/* LINZO LP @ casapivote.com/linzo/ — 「続き」 × PRO STAFF DARK × ピッチ
   掟: #000 は使わない(本番モード専用) / green=行動のみ / amber=継続・積み上げのみ
   ブランド色はアプリのワードマークに一致(green #36D399 / amber #FFB454)
   フォントはセルフホスト(トップページの「解析ツール等を設置しない」宣言と整合) */

@font-face {
  font-family: "Barlow Condensed";
  src: url("/linzo/fonts/barlow-condensed-700.woff2") format("woff2");
  font-weight: 600 700;
  font-display: swap;
}
@font-face {
  font-family: "Barlow Condensed";
  src: url("/linzo/fonts/barlow-condensed-800.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: "Zen Kaku Gothic New";
  src: url("/linzo/fonts/zen-kaku-700.woff2") format("woff2");
  font-weight: 700 900;
  font-display: swap;
}

:root {
  --bg: #0e1319;
  --surface: #151c24;
  --line: #26303c;
  --text: #eaf0f5;
  --muted: #93a1ae;
  --pitchline: #22303d;   /* ピッチ幾何(背景) */
  --action: #36d399;      /* green = 行動 */
  --amber: #ffb454;       /* amber = 継続・積み上げ */
  --font-num: "Barlow Condensed", sans-serif;
  --font-head: "Zen Kaku Gothic New", "Hiragino Sans", sans-serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-head), sans-serif;
  font-size: 16px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
.container { max-width: 1000px; margin: 0 auto; padding: 0 24px; }
.pc { display: none; }
@media (min-width: 760px) { .pc { display: inline; } .sp { display: none; } }

/* ---- スタジアムの床(フルピッチ背景) ---- */
.pitch-lines { position: fixed; inset: 0; z-index: 0; display: flex; justify-content: center; pointer-events: none; opacity: .5; }
.pitch-lines svg { width: min(92vw, 860px); height: 100%; }
main, header.nav, footer { position: relative; z-index: 1; }

/* ---- nav ---- */
.nav { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.nav-inner { max-width: 1120px; margin: 0 auto; padding: 14px 24px; display: flex; justify-content: space-between; align-items: center; }
.logo { display: block; }
.logo svg { height: 24px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 18px; }
.nav-home { color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 700; }
.nav-home:hover { color: var(--text); }
.nav-cta { color: var(--action); text-decoration: none; font-weight: 700; font-size: 14px; border: 1px solid color-mix(in srgb, var(--action) 45%, transparent); padding: 6px 16px; border-radius: 999px; }

/* ---- hero ---- */
.hero { padding: 64px 0 88px; overflow: hidden; }
.hero-grid { display: grid; gap: 44px; align-items: center; }
@media (min-width: 760px) { .hero-grid { grid-template-columns: 1.08fr .92fr; } }
.h1 {
  font-weight: 900; letter-spacing: .05em; line-height: 1.32;
  font-size: clamp(44px, 8.6vw, 76px);
}
.lede { margin-top: 24px; font-size: clamp(15px, 2.4vw, 18px); }
.hero-cta { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin-top: 28px; }
.btn-action {
  display: inline-block; background: var(--action); color: #08251a;
  font-weight: 900; font-size: 16px; text-decoration: none;
  padding: 14px 36px; border-radius: 10px; border: none; cursor: pointer;
  font-family: var(--font-head);
}
.btn-action:hover { filter: brightness(1.08); }
.cta-note { font-size: 13px; color: var(--muted); }

/* 実機フレーム */
.phone {
  width: min(310px, 82vw); margin: 0 auto;
  border-radius: 46px; padding: 10px;
  background: #1a232e;
  box-shadow: 0 30px 70px rgba(4, 8, 12, .55), 0 0 0 1px #2a3441;
}
.phone img { width: 100%; height: auto; display: block; border-radius: 37px; }
.hero-phone { justify-self: center; }

/* STEP 01: 条件入力 → 生成結果 のクロスフェード(キャプションは端末枠の外) */
.phone-morph { margin: 0 auto; width: min(310px, 82vw); }
.phone-morph .phone { width: 100%; }
.morph { position: relative; }
.morph .morph-b { position: absolute; inset: 0; opacity: 0; }
.morph-note { display: flex; justify-content: center; gap: 8px; margin-top: 12px; font-size: 12px; color: var(--muted); }
.morph-note .mn-arrow { color: var(--action); font-weight: 700; }

/* 積み上げ計器 */
.telemetry { display: flex; align-items: flex-end; gap: 26px; margin-top: 40px; border-top: 1px solid var(--line); padding-top: 20px; flex-wrap: wrap; }
.telemetry dt { font-size: 11px; color: var(--muted); letter-spacing: .2em; }
.telemetry dd { font-family: var(--font-num); }
.telemetry .num { font-size: 40px; font-weight: 700; line-height: 1; }
.telemetry .unit { font-size: 14px; color: var(--muted); margin-left: 3px; font-family: var(--font-head); }
.bars { display: flex; align-items: flex-end; gap: 5px; height: 40px; margin-left: auto; }
.bars i { width: 9px; height: calc(var(--h) * 40px); background: var(--amber); opacity: .85; border-radius: 1.5px; }

/* ---- sections 共通 ---- */
section { padding: 88px 0; }
.kicker { font-family: var(--font-num); font-weight: 700; letter-spacing: .38em; font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.h-jp { font-size: clamp(24px, 4.6vw, 38px); font-weight: 900; line-height: 1.5; letter-spacing: .04em; margin-bottom: 22px; }
em { font-style: normal; color: var(--amber); }

/* ---- 問題提起 ---- */
.pain { border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 72%, transparent); }
.pain p { color: var(--muted); max-width: 40em; }
.pain p + p { margin-top: 10px; }

/* ---- 使い方3手 ---- */
.screens { padding-bottom: 40px; }
.screen-row { display: grid; gap: 36px; align-items: center; padding: 48px 0; }
@media (min-width: 760px) {
  .screen-row { grid-template-columns: 1fr 1fr; }
  .screen-row:nth-of-type(even) .screen-copy { order: 2; }
  .screen-row:nth-of-type(even) .phone { order: 1; }
}
.screen-copy h3 { font-size: clamp(21px, 3.4vw, 28px); font-weight: 900; margin: 10px 0 12px; }
.screen-copy p { color: var(--muted); font-size: 15px; max-width: 34em; }
.fnum { font-family: var(--font-num); font-weight: 700; font-size: 15px; color: var(--muted); letter-spacing: .3em; }

/* ---- 図アニメ(製品シグネチャー) ---- */
.diagram { border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 72%, transparent); }
.diagram-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 760px) { .diagram-grid { grid-template-columns: 1fr .9fr; } }
.diagram-copy p { color: var(--muted); font-size: 15px; max-width: 34em; }
.diagram-copy p + p { margin-top: 10px; }
.diagram-stage { margin: 0 auto; width: min(340px, 88vw); }
.diagram-stage svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 40px rgba(4, 8, 12, .5)); }
.diagram-note { margin-top: 14px; font-size: 12.5px; color: var(--muted); text-align: center; }

/* ---- 2速ループ+連なり ---- */
.loop { background: var(--surface); border-block: 1px solid var(--line); }
.loop .card { background: var(--bg); }
.chain { list-style: none; display: flex; gap: 30px; margin: 36px 0 8px; flex-wrap: wrap; }
.chain li {
  position: relative;
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 18px; min-width: 128px;
  display: flex; flex-direction: column; gap: 2px;
}
.chain li:not(:last-child)::after {
  content: ""; position: absolute; right: -30px; top: 50%; width: 30px; height: 1px;
  background: var(--line);
}
.c-date { font-family: var(--font-num); font-weight: 700; font-size: 22px; line-height: 1.2; }
.c-date i { font-style: normal; font-size: 12px; color: var(--muted); margin-left: 6px; font-family: var(--font-head); }
.c-theme { font-size: 13px; font-weight: 700; }
.c-outcome { font-size: 11.5px; display: flex; align-items: center; gap: 6px; color: var(--muted); }
.c-outcome::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.o-low::before { opacity: .45; }
.o-mid::before { opacity: .85; }
.c-next { border-color: color-mix(in srgb, var(--action) 60%, var(--line)); box-shadow: 0 0 24px color-mix(in srgb, var(--action) 14%, transparent); }
.c-next .c-date { color: var(--action); }
.c-make { font-size: 11.5px; font-weight: 700; color: var(--action); }
.chain-note { font-size: 12.5px; color: var(--muted); margin-bottom: 34px; }

.loop-cards { display: grid; gap: 20px; }
@media (min-width: 760px) { .loop-cards { grid-template-columns: 1fr 1fr; } }
.card { position: relative; border: 1px solid var(--line); border-radius: 14px; padding: 28px; }
.card-fast { border-top: 3px solid var(--action); }
.card-slow { border-top: 3px solid var(--amber); }
.card-kicker { font-size: 13px; font-weight: 700; letter-spacing: .1em; margin-bottom: 12px; }
.card-fast .card-kicker { color: var(--action); }
.card-slow .card-kicker { color: var(--amber); }
.card-kicker span { color: var(--muted); font-weight: 400; margin-left: 12px; letter-spacing: .06em; }
.card h3 { font-size: 20px; font-weight: 900; margin-bottom: 10px; }
.card p:last-child { color: var(--muted); font-size: 14.5px; }

/* ミニ計器 */
.mini-timer { position: absolute; top: 22px; right: 22px; width: 44px; height: 44px; }
.mini-timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.mt-track { fill: none; stroke: var(--line); stroke-width: 4; }
.mt-run { fill: none; stroke: var(--action); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 28; }
.mini-bars { position: absolute; top: 26px; right: 22px; display: flex; align-items: flex-end; gap: 4px; height: 34px; }
.mini-bars i { width: 7px; height: calc(var(--h) * 34px); background: var(--amber); opacity: .85; border-radius: 1.5px; }

/* ---- テーマヘックス ---- */
.hexsec { border-top: 1px solid var(--line); }
.hex-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 760px) {
  .hex-grid { grid-template-columns: .9fr 1fr; }
}
@media (max-width: 759px) {
  .hex-grid .hex-stage { order: 2; }
  .hex-grid .hex-copy { order: 1; }
}
.hex-stage { margin: 0 auto; width: min(380px, 92vw); }
.hex-stage svg { width: 100%; height: auto; display: block; }
.hex-now { fill-opacity: .13; }
.hex-last { opacity: .9; }
.hex-copy p { color: var(--muted); font-size: 15px; max-width: 34em; }
.hex-note { margin-top: 10px; font-weight: 700; color: var(--text); }
.hex-legend { display: flex; gap: 22px; justify-content: center; margin-top: 10px; font-size: 12.5px; color: var(--muted); }
.hex-legend span { display: flex; align-items: center; gap: 7px; }
.lg-now::before { content: ""; width: 16px; height: 3px; border-radius: 2px; background: var(--amber); }
.lg-last::before { content: ""; width: 16px; height: 0; border-top: 2px dashed #c98f45; }

/* ---- 機能 ---- */
.feature-grid { display: grid; gap: 18px; }
@media (min-width: 760px) { .feature-grid { grid-template-columns: 1fr 1fr; } }
.feature-grid article { border: 1px solid var(--line); border-radius: 14px; padding: 26px; background: color-mix(in srgb, var(--surface) 82%, transparent); }
.feature-grid h3 { font-size: 18px; font-weight: 900; margin: 8px 0; }
.feature-grid p:last-child { color: var(--muted); font-size: 14.5px; }

/* ---- 誰のためか ---- */
.who { background: var(--surface); border-block: 1px solid var(--line); text-align: center; }
.who p { color: var(--muted); }

/* ---- 料金 ---- */
.price-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 760px) { .price-grid { grid-template-columns: repeat(4, 1fr); } }
.price-grid article { border: 1px solid var(--line); border-radius: 14px; padding: 22px 18px; text-align: center; background: color-mix(in srgb, var(--surface) 82%, transparent); }
.price-hl { border-color: color-mix(in srgb, var(--action) 55%, var(--line)); }
.price-grid h3 { font-size: 14px; font-weight: 700; color: var(--muted); letter-spacing: .18em; }
.price { margin: 10px 0 6px; font-family: var(--font-num); }
.price .num { font-size: 34px; font-weight: 700; }
.price .unit { font-size: 13px; color: var(--muted); font-family: var(--font-head); }
.price-grid p:last-child { font-size: 12.5px; color: var(--muted); }
.price-note { margin-top: 16px; font-size: 12.5px; color: var(--muted); }

/* ---- お問い合わせ ---- */
.contact { text-align: center; border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 72%, transparent); }
.contact-lede { color: var(--muted); font-size: 14.5px; margin-bottom: 28px; }
.contact-mail { margin-top: 14px; font-family: var(--font-num); font-size: 15px; letter-spacing: .06em; color: var(--muted); }

/* ---- footer ---- */
.footer { border-top: 1px solid var(--line); padding: 44px 0 60px; background: var(--bg); }
.footer-line { font-weight: 900; font-size: 15px; letter-spacing: .08em; margin-bottom: 18px; }
.footer-meta { display: flex; align-items: center; gap: 14px; font-size: 12.5px; color: var(--muted); flex-wrap: wrap; }
.footer-mark { width: 26px; height: 26px; }
.footer-op a { color: var(--muted); }
.footer-op a:hover { color: var(--text); }
.copy { margin-left: auto; font-family: var(--font-num); letter-spacing: .1em; }

.progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--action); z-index: 20; }

/* ---- mobile 調整 ---- */
@media (max-width: 759px) {
  .hero { padding-top: 44px; }
  .telemetry { gap: 18px; }
  .telemetry .num { font-size: 32px; }
  .chain { gap: 14px; }
  .chain li:not(:last-child)::after { display: none; }
  .chain li { min-width: calc(50% - 7px); }
  .screen-row { padding: 36px 0; }
  section { padding: 64px 0; }
}

/* ============================================================
   MOTION 層 — 「めくるたびに再生」
   減速設定時は初期状態から可視(アニメ・隠し無し)。
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {

  @keyframes rise { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
  @keyframes glowPulse {
    0%, 100% { box-shadow: 0 0 16px color-mix(in srgb, var(--action) 10%, transparent); }
    50% { box-shadow: 0 0 32px color-mix(in srgb, var(--action) 30%, transparent); }
  }
  @keyframes timerRun { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
  @keyframes floatY { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

  /* ---- ヒーロー起動シーケンス ---- */
  .h1 { animation: rise .8s .05s both; }
  .lede { animation: rise .8s .25s both; }
  .hero-cta { animation: rise .8s .4s both; }
  .hero-phone { animation: rise 1s .55s both; }
  .hero-phone img { animation: floatY 7s 2.2s ease-in-out infinite; }
  .telemetry { animation: rise .8s .7s both; }

  /* ---- スクロール到達で再生(reveal) ---- */
  .reveal { opacity: 0; transform: translateY(20px); transition: opacity .7s ease, transform .7s ease; }
  .reveal.in { opacity: 1; transform: none; }

  .reveal .kicker { opacity: 0; letter-spacing: .16em; transition: opacity .7s ease .15s, letter-spacing .9s ease .15s; }
  .reveal.in .kicker { opacity: 1; letter-spacing: .38em; }

  .reveal .h-jp { clip-path: inset(0 0 100% 0); transform: translateY(14px); transition: clip-path .7s ease .1s, transform .7s ease .1s; }
  .reveal.in .h-jp { clip-path: inset(0 0 -10% 0); transform: none; }

  /* STEP 01: 到達後、条件入力⇄生成結果をゆっくり往復(生成の因果を1枠で見せる) */
  @keyframes morphFade { 0%, 38% { opacity: 0; } 50%, 88% { opacity: 1; } 100% { opacity: 0; } }
  .screen-row.in .morph-b { animation: morphFade 9s ease-in-out 1.2s infinite; }
  .morph-note .mn-b { opacity: .55; transition: opacity .4s ease; }
  .screen-row.in .morph-note .mn-b { opacity: 1; }

  /* 使い方3手: 端末が左右からスライドイン */
  .screen-row .phone { opacity: 0; transform: translateX(40px) translateY(10px); transition: opacity .8s ease .25s, transform .8s ease .25s; }
  .screen-row:nth-of-type(even) .phone { transform: translateX(-40px) translateY(10px); }
  .screen-row.in .phone { opacity: 1; transform: none; }
  .screen-row .screen-copy { opacity: 0; transform: translateY(16px); transition: opacity .7s ease .1s, transform .7s ease .1s; }
  .screen-row.in .screen-copy { opacity: 1; transform: none; }

  /* 強調(amber)の下線スイープ */
  em {
    background-image: linear-gradient(var(--amber), var(--amber));
    background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px;
    transition: background-size .8s ease .9s;
  }
  .reveal.in em { background-size: 100% 2px; }

  /* 図アニメ: ステージが右からスライドイン */
  .diagram .diagram-stage { opacity: 0; transform: translateX(36px); transition: opacity .8s ease .3s, transform .8s ease .3s; }
  .diagram.in .diagram-stage { opacity: 1; transform: none; }

  /* 連なり: 到達で1枚ずつ+コネクタ伸長+「今日」発光 */
  .chain li { opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
  .loop.in .chain li:nth-child(1) { transition-delay: .25s; }
  .loop.in .chain li:nth-child(2) { transition-delay: .45s; }
  .loop.in .chain li:nth-child(3) { transition-delay: .65s; }
  .loop.in .chain li:nth-child(4) { transition-delay: .85s; }
  .loop.in .chain li { opacity: 1; transform: none; }
  .chain li:not(:last-child)::after { transform: scaleX(0); transform-origin: left; transition: transform .3s ease; }
  .loop.in .chain li:nth-child(1)::after { transform: none; transition-delay: .45s; }
  .loop.in .chain li:nth-child(2)::after { transform: none; transition-delay: .65s; }
  .loop.in .chain li:nth-child(3)::after { transform: none; transition-delay: .85s; }
  .loop.in .c-next { animation: glowPulse 3.2s 1.3s infinite; }
  .chain-note { opacity: 0; transition: opacity .6s ease 1.1s; }
  .loop.in .chain-note { opacity: 1; }

  /* 2速ループ: 左右から+ミニ計器が動き出す */
  .loop .card-fast { opacity: 0; transform: translateX(-32px); transition: opacity .7s ease .5s, transform .7s ease .5s; }
  .loop .card-slow { opacity: 0; transform: translateX(32px); transition: opacity .7s ease .7s, transform .7s ease .7s; }
  .loop.in .card-fast, .loop.in .card-slow { opacity: 1; transform: none; }
  .mt-run { stroke-dashoffset: 100; }
  .loop.in .mt-run { animation: timerRun 8s linear 1s infinite; }
  .mini-bars i { transform: scaleY(0); transform-origin: bottom; transition: transform .6s cubic-bezier(.2, .7, .2, 1.15); }
  .loop.in .mini-bars i:nth-child(1) { transition-delay: 1s; }
  .loop.in .mini-bars i:nth-child(2) { transition-delay: 1.1s; }
  .loop.in .mini-bars i:nth-child(3) { transition-delay: 1.2s; }
  .loop.in .mini-bars i:nth-child(4) { transition-delay: 1.3s; }
  .loop.in .mini-bars i { transform: none; }

  /* テーマヘックス: 軸→リング→当月ポリゴン描画→面→先月破線 */
  .hex-axes line { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .5s ease; }
  .hexsec.in .hex-axes line:nth-child(1) { stroke-dashoffset: 0; transition-delay: .15s; }
  .hexsec.in .hex-axes line:nth-child(2) { stroke-dashoffset: 0; transition-delay: .22s; }
  .hexsec.in .hex-axes line:nth-child(3) { stroke-dashoffset: 0; transition-delay: .29s; }
  .hexsec.in .hex-axes line:nth-child(4) { stroke-dashoffset: 0; transition-delay: .36s; }
  .hexsec.in .hex-axes line:nth-child(5) { stroke-dashoffset: 0; transition-delay: .43s; }
  .hexsec.in .hex-axes line:nth-child(6) { stroke-dashoffset: 0; transition-delay: .5s; }
  .hex-rings .ring { opacity: 0; transform: scale(.55); transform-box: fill-box; transform-origin: center; transition: opacity .5s ease, transform .6s cubic-bezier(.2, .7, .25, 1.1); }
  .hexsec.in .ring.r1 { opacity: 1; transform: none; transition-delay: .3s; }
  .hexsec.in .ring.r2 { opacity: 1; transform: none; transition-delay: .42s; }
  .hexsec.in .ring.r3 { opacity: 1; transform: none; transition-delay: .54s; }
  .hex-labels text { opacity: 0; transition: opacity .5s ease; }
  .hexsec.in .hex-labels text:nth-child(1) { opacity: 1; transition-delay: .55s; }
  .hexsec.in .hex-labels text:nth-child(2) { opacity: 1; transition-delay: .62s; }
  .hexsec.in .hex-labels text:nth-child(3) { opacity: 1; transition-delay: .69s; }
  .hexsec.in .hex-labels text:nth-child(4) { opacity: 1; transition-delay: .76s; }
  .hexsec.in .hex-labels text:nth-child(5) { opacity: 1; transition-delay: .83s; }
  .hexsec.in .hex-labels text:nth-child(6) { opacity: 1; transition-delay: .9s; }
  .hex-now { stroke-dasharray: 1; stroke-dashoffset: 1; fill-opacity: 0; transition: stroke-dashoffset 1.1s ease .95s, fill-opacity .7s ease 1.9s; }
  .hexsec.in .hex-now { stroke-dashoffset: 0; fill-opacity: .13; }
  .hex-last { opacity: 0; transition: opacity .7s ease 2.2s; }
  .hexsec.in .hex-last { opacity: .9; }
  .hex-legend { opacity: 0; transition: opacity .6s ease 2.4s; }
  .hexsec.in .hex-legend { opacity: 1; }

  /* グリッドの時差スタガー */
  .stagger > * { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
  .reveal.in .stagger > *:nth-child(1) { transition-delay: .25s; }
  .reveal.in .stagger > *:nth-child(2) { transition-delay: .37s; }
  .reveal.in .stagger > *:nth-child(3) { transition-delay: .49s; }
  .reveal.in .stagger > *:nth-child(4) { transition-delay: .61s; }
  .reveal.in .stagger > * { opacity: 1; transform: none; }

  /* 料金の推しカードが一拍おいて発光 */
  .pricing.in .price-hl { animation: glowPulse 2.4s .9s 2; }

  /* 積み上げ計器: バーが伸びる(数字のカウントアップは JS) */
  .telemetry .bars i { transform: scaleY(0); transform-origin: bottom; transition: transform .7s cubic-bezier(.2, .7, .2, 1.15); }
  .telemetry.in .bars i:nth-child(1) { transition-delay: .1s; }
  .telemetry.in .bars i:nth-child(2) { transition-delay: .18s; }
  .telemetry.in .bars i:nth-child(3) { transition-delay: .26s; }
  .telemetry.in .bars i:nth-child(4) { transition-delay: .34s; }
  .telemetry.in .bars i:nth-child(5) { transition-delay: .42s; }
  .telemetry.in .bars i:nth-child(6) { transition-delay: .5s; }
  .telemetry.in .bars i { transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* 図アニメ(SMIL)の停止は JS 側。ヘックスは基底CSSで静止表示済み */
  /* STEP 01 は生成結果(=見せたい方)を静止表示 */
  .morph .morph-b { opacity: 1; }
}

/* ---- AIは、裏方。 ---- */
.ai { border-top: 1px solid var(--line); background: color-mix(in srgb, var(--bg) 72%, transparent); }
.ai-lede { color: var(--muted); margin-bottom: 28px; }
.ai-grid { display: grid; gap: 18px; }
@media (min-width: 760px) { .ai-grid { grid-template-columns: repeat(2, 1fr); } }
.ai-grid article { border: 1px solid var(--line); border-left: 3px solid var(--action); border-radius: 14px; padding: 24px; background: color-mix(in srgb, var(--surface) 82%, transparent); }
.ai-grid h3 { font-size: 18px; font-weight: 900; margin-bottom: 8px; }
.ai-grid p { color: var(--muted); font-size: 14.5px; }
.ai-note { margin-top: 22px; font-weight: 700; font-size: 15px; }