/* ワリピタ LP — スタイル（コピー：CMOレン／ビジュアル仕様：CDOミオ／実装：CTOコウ）
   方針：本体トークンをコピーして拡張（本体 src/styles.css は触らない）。
   外部リソースなし（システムフォント・インラインSVGのみ）。モバイルファースト・ブレークは820pxの1つだけ。 */

:root {
  /* --- 本体からコピーしたトークン --- */
  --accent: #4F46E5;
  --accent-hover: #4338CA;
  --accent-ink: #ffffff;
  --accent-tint: #EEF1FE;
  --bg: #FBFBFD;
  --card: #ffffff;
  --ink: #14181F;
  --ink-soft: #5A6472;
  --line: #ECEEF3;
  --radius: 16px;
  --radius-inner: 10px;
  --shadow: 0 1px 2px rgba(20, 24, 40, .04), 0 10px 30px -12px rgba(20, 24, 40, .10);
  --shadow-hover: 0 2px 4px rgba(20, 24, 40, .06), 0 18px 40px -14px rgba(20, 24, 40, .18);
  --focus-ring: 0 0 0 3px rgba(79, 70, 229, .40);

  /* --- LP拡張トークン --- */
  --hero-grad: linear-gradient(160deg, #1E1B4B 0%, #312E81 55%, #4F46E5 130%);
  --hero-glow: radial-gradient(ellipse at 70% 20%, rgba(139, 156, 255, .18), transparent 60%);
  --hero-ink: #FFFFFF;          /* on #1E1B4B = 15.99:1 */
  --hero-sub: #C7D2FE;          /* on #1E1B4B = 10.72:1 */
  --sec-white: #FFFFFF;         /* 白セクション */
  --sec-tint: #FBFBFD;          /* 微灰セクション */
  --fig-gray: #C9CFDA;          /* ビフォー線（装飾） */
  --radius-cta: 12px;
  --focus-ring-light: 0 0 0 3px rgba(255, 255, 255, .55);  /* 暗い地の上のリング */

  /* --- 演出トークン（T-015 ミオ§2/§6 Q-1・全transition/animationはここを参照） --- */
  --ease-out:  cubic-bezier(.22, .61, .36, 1);  /* 全revealとsettle */
  --ease-draw: cubic-bezier(.65, 0, .35, 1);    /* 線を描く時だけ */
  --dur-0: .15s;   /* マイクロ（hover反応。既存CTAの体感を維持する拡張トークン） */
  --dur-1: .45s;   /* 小さい要素（バッジ・行） */
  --dur-2: .7s;    /* カード・見出し */
  --dur-3: 1s;     /* 線画・数字カウント */
  --stagger: 70ms; /* 連続要素の間隔 */
}

/* ダークモード：色トークンだけ上書き（色を二度書かない）。
   ヒーロー/最終CTAのグラデーションはライト/ダーク共通（ミオ§9指定）。 */
@media (prefers-color-scheme: dark) {
  :root {
    --accent: #8B9CFF;           /* on #0F1218 = 7.41:1 */
    --accent-hover: #A3B0FF;
    --accent-ink: #14181F;
    --accent-tint: #20243A;
    --bg: #0F1218;
    --card: #171B22;
    --ink: #E6E9EF;              /* 15.42:1 */
    --ink-soft: #9AA4B2;
    --line: #2A303B;
    --shadow: 0 1px 2px rgba(0, 0, 0, .25), 0 10px 30px -14px rgba(0, 0, 0, .5);
    --shadow-hover: 0 2px 4px rgba(0, 0, 0, .3), 0 18px 40px -16px rgba(0, 0, 0, .6);
    --focus-ring: 0 0 0 3px rgba(139, 156, 255, .50);
    --sec-white: #171B22;
    --sec-tint: #0F1218;
    --fig-gray: #4A5260;
  }
}

/* ============ ベース ============ */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.container {
  max-width: 1040px;
  margin: 0 auto;
  padding: 0 20px;
}
.container-narrow { max-width: 720px; }

/* セクション余白：一定の64px（モバイル）/ 96px（デスクトップ）パルス */
.sec { padding: 64px 0; }
.sec-white { background: var(--sec-white); }
.sec-tint  { background: var(--sec-tint); }

.sec-title {
  margin: 0 0 24px;
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.sec-lead {
  margin: 0 0 16px;
  max-width: 720px;
}
.sec-close {
  margin: 32px 0 0;
  max-width: 720px;
  font-weight: 700;
}

/* ============ CTAボタン（2種のみ・第3の様式を作らない） ============ */
.cta {
  position: relative;               /* Q-2 光沢スイープの土台 */
  overflow: clip;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;                 /* タップ領域（モバイル親指基準） */
  padding: 16px 40px;
  font-size: 17px;
  font-weight: 800;
  border-radius: var(--radius-cta);
  text-decoration: none;
  transition: transform var(--dur-0) var(--ease-out), box-shadow var(--dur-0) var(--ease-out), background var(--dur-0) var(--ease-out);
}
.cta:hover  { transform: translateY(-1px); box-shadow: var(--shadow-hover); }
.cta:active { transform: translateY(1px); }

/* --- Q-2 CTAの光沢スイープ：hover/focus-visible 状態にだけ transition を書く＝
       1回だけ左→右へ走り、hover中は再発火せず、離れたら即リセット --- */
.cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255, 255, 255, .35) 50%, transparent 60%);
  transform: translateX(-120%);
  pointer-events: none;
}
.cta:hover::after,
.cta:focus-visible::after {
  transform: translateX(120%);
  transition: transform var(--dur-2) var(--ease-out);
}
/* 白ボタンは白ハイライトが効かないためインディゴ微光に差し替え */
.cta-light::after {
  background: linear-gradient(105deg, transparent 40%, rgba(79, 70, 229, .08) 50%, transparent 60%);
}

/* 暗い地の上：白ボタン（ライト/ダーク共通＝グラデーションが共通のため固定色） */
.cta-light { background: #FFFFFF; color: #4F46E5; }   /* 6.29:1 */
/* 白系セクション内：本体と同じインディゴ地 */
.cta-solid { background: var(--accent); color: var(--accent-ink); }
.cta-solid:hover { background: var(--accent-hover); }

.cta:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.cta-light:focus-visible { box-shadow: var(--focus-ring-light); }

/* ============ §1 ヒーロー ============ */
.hero {
  position: relative;
  background: var(--hero-grad);
  color: var(--hero-ink);
  padding: 72px 0 64px;
  overflow: clip;                   /* 念のための保険（はみ出しは余白側で吸収する設計） */
}
/* H-3 背景グローの超低速ドリフト（グローを擬似要素化し transform だけ25秒往復。
   「気づくか気づかないか」の閾値＝移動量±2%・opacity変化なし） */
.hero::before {
  content: "";
  position: absolute;
  inset: -6%;
  background: var(--hero-glow);
  animation: glow-drift 25s linear infinite alternate;
  pointer-events: none;
}
/* S-4代替（静的・CSS only）：ヒーロー下端96pxの転換ゾーンで次セクションへの断絶をやわらげる */
.hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 96px;
  background: linear-gradient(180deg, transparent, var(--sec-tint));
  pointer-events: none;
}
@keyframes glow-drift {
  from { transform: translate3d(-2%, -1%, 0); }
  to   { transform: translate3d(2%, 1%, 0); }
}
.hero-grid { position: relative; display: flex; flex-direction: column; gap: 40px; }

.hero-title {
  margin: 0;
  font-size: clamp(40px, 8vw, 76px);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--hero-ink);
}
.hero-lead {
  margin: 24px 0 0;
  max-width: 30em;
  font-size: clamp(16px, 2.5vw, 19px);
  line-height: 1.7;
  color: var(--hero-sub);
}
.hero-cta-wrap { margin: 32px 0 0; }

/* --- H-1 ロード時シーケンス（CSS only・JSゲート不要＝JS無効でも動く。
       reduce時は末尾の全無効ブロックで即・最終状態になる） --- */
.hero-line-mask {
  display: inline-block;
  overflow: clip;
  vertical-align: bottom;
  /* 行間が詰まった大型タイポのグリフ欠け防止の逃げ */
  padding: .06em .02em;
  margin: -.06em -.02em;
}
.hero-line {
  display: inline-block;
  animation: hero-rise var(--dur-2) var(--ease-out) both;  /* 0ms：1行目 */
}
.hero-line-2 { animation-delay: 120ms; }                    /* 120ms：2行目 */
.hero-lead {
  animation: fade-up var(--dur-2) var(--ease-out) both;
  animation-delay: 350ms;                                   /* 350ms：リード */
}
.hero-cta-wrap {
  animation: settle-in var(--dur-2) var(--ease-out) both;
  animation-delay: 500ms;                                   /* 500ms：CTA（settleで視線が着地） */
}
.hero-badges span {
  display: inline-block;
  animation: fade-up var(--dur-1) var(--ease-out) both;
  animation-delay: 650ms;                                   /* 650ms〜：バッジ3つをstagger */
}
.hero-badges span:nth-child(2) { animation-delay: calc(650ms + var(--stagger)); }
.hero-badges span:nth-child(3) { animation-delay: calc(650ms + var(--stagger) * 2); }

@keyframes hero-rise {
  from { transform: translateY(110%); }
  to   { transform: translateY(0); }
}
@keyframes settle-in {
  from { opacity: 0; transform: translateY(12px) scale(1.02); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.hero-badges {
  margin: 16px 0 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--hero-sub);
}
.hero-badges span + span::before { content: "・"; margin: 0 2px; }

/* --- カードモック（全部CSS・ダークでも白カード固定＝ミオ§9指定） --- */
.hero-visual {
  display: flex;
  justify-content: center;
  padding: 16px;                    /* 傾き分のはみ出し（最大約14px）を余白で吸収 */
}
.mock-wrap {
  position: relative;
  width: min(320px, 86vw);
  animation: fade-up var(--dur-2) var(--ease-out) both;
  animation-delay: 400ms;           /* 400ms：コピーと並走で白カード（H-1） */
}
/* 800ms〜：精算3行が stagger×1.5 間隔で1行ずつ「決まる」 */
.mock-list li { animation: settle-in var(--dur-1) var(--ease-out) both; animation-delay: 800ms; }
.mock-list li:nth-child(2) { animation-delay: calc(800ms + var(--stagger) * 1.5); }
.mock-list li:nth-child(3) { animation-delay: calc(800ms + var(--stagger) * 3); }
/* 最後にバッジ「✓ 送金は3回でピタッ」が点く（シーケンスの結論・約1.6sで完了） */
.mock-badge { animation: settle-in var(--dur-1) var(--ease-out) both; animation-delay: 1150ms; }
/* H-2 マウス連動の微チルト（JSが --tilt-x/--tilt-y を書く。最大 ±3deg/±4deg）。
   既存の rotate はそのまま土台にし、この内側ラッパーで合成。離れたら .6s で初期角へ */
.mock-tilt {
  transform: perspective(900px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg));
  transition: transform .6s var(--ease-out);
}
.mock-tilt.tilt-on { will-change: transform; }  /* H-2有効時のみJSが付与 */

.mock-back {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .06);
  border-radius: 20px;
  transform: rotate(3deg) translateY(2px);
}
.mock-card {
  position: relative;
  background: #FFFFFF;
  color: #14181F;
  border-radius: 20px;
  box-shadow: 0 2px 4px rgba(20, 24, 40, .08), 0 24px 64px -16px rgba(20, 24, 40, .45);
  padding: 20px;
  transform: rotate(-2deg) translateY(-8px);
}
/* Q-5 チルト中だけ影を1段深く（box-shadowのtransitionは禁止＝影専用擬似要素のopacity切替） */
.mock-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  box-shadow: 0 6px 12px rgba(20, 24, 40, .10), 0 40px 80px -20px rgba(20, 24, 40, .55);
  opacity: 0;
  transition: opacity var(--dur-1) var(--ease-out);
  z-index: -1;
}
.mock-tilt.is-tilting .mock-card::before { opacity: 1; }
.mock-badge {
  margin: 0 0 12px;
  padding: 12px 14px;
  background: #EEF1FE;
  border-radius: var(--radius-inner);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.01em;          /* 文字 #14181F on #EEF1FE = 15.80:1 */
}
.mock-badge strong {
  color: #4F46E5;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.mock-list { list-style: none; margin: 0; padding: 0; }
.mock-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 12px 14px;
  background: #FBFCFE;
  border: 1px solid #ECEEF3;
  border-radius: var(--radius-inner);
  box-shadow: inset 3px 0 0 #4F46E5;  /* 本体 .settlement-list li と同じ様式 */
  font-size: 14px;
}
.m-name { font-weight: 700; }
.m-arrow { color: #5A6472; }
.m-amt {
  margin-left: auto;
  font-weight: 800;
  font-size: 16px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ============ カードグリッド（§2 あるある / §4 機能 / §5 安心） ============ */
.card-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px;
}
.card h3 {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.card p { margin: 0; font-size: 15px; color: var(--ink-soft); }
.card-num {
  margin: 0 0 8px !important;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--accent) !important;
  font-variant-numeric: tabular-nums;
}
/* 白セクション上のカードは微灰地で立てる */
.card-on-white { background: var(--sec-tint); box-shadow: none; }

/* ============ §3 ビフォー/アフター図解 ============ */
.fig-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 24px;
  align-items: stretch;
}
.fig-panel {
  background: var(--sec-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px;
}
.fig-label {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}
.fig-num {
  margin: 4px 0 0;
  font-size: clamp(48px, 10vw, 88px);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.fig-num small { font-size: 0.4em; font-weight: 800; }
.fig-num-before { color: var(--ink-soft); }
.fig-num-after  { color: var(--accent); }

.fig-svg {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 16px auto 0;
}
/* 線色は currentColor 参照（marker の矢じりも継承）→ ダークモード追従 */
.fig-svg-before { color: var(--fig-gray); }
.fig-svg-after  { color: var(--accent); }
.fig-svg .fig-lines line { stroke: currentColor; }
.fig-svg-before .fig-lines line { stroke-width: 1.5; }
.fig-svg-after  .fig-lines line { stroke-width: 3; }
.fig-svg .fig-nodes circle { fill: var(--accent-tint); }
.fig-svg .fig-nodes text {
  fill: var(--accent);
  font-size: 13px;
  font-weight: 700;
  text-anchor: middle;
}

.fig-desc { margin: 16px 0 0; font-size: 14px; color: var(--ink-soft); }
.fig-desc p { margin: 0 0 8px; }
.fig-desc p:last-child { margin-bottom: 0; }
.fig-plan {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}
.fig-arrow {
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  color: var(--ink-soft);
  text-align: center;
  align-self: center;
}
.fa-h { display: none; }   /* デスクトップで「→」 */
.fa-v { display: inline; } /* モバイルで「↓」（rotateでなく文字を出し分け） */

/* 立替合計の1行（CEO承認済みコピー。数字はN-1カウントアップ対象） */
.fig-total {
  margin: 24px 0 0;
  max-width: 720px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

.fig-caption {
  margin: 24px 0 0;
  text-align: center;
  font-size: 14px;
  color: var(--ink-soft);
}
.sec-cta-wrap { margin: 24px 0 0; text-align: center; }

/* ============ §6 FAQ ============ */
.faq {
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.faq:last-of-type { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 16px 0;
  font-weight: 700;
  color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "▸ "; color: var(--accent); }
.faq[open] summary::before { content: "▾ "; }
.faq summary:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: 8px;
}
.faq p { margin: 0 0 16px; padding-left: 1.2em; color: var(--ink-soft); }

/* ============ §7 最終CTA（逃げ場のない構成・リンクはCTAのみ） ============ */
.sec-final {
  background: var(--hero-glow), var(--hero-grad);
  text-align: center;
}
.final-title {
  margin: 0;
  font-size: clamp(28px, 5vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--hero-ink);
}
.final-lead {
  margin: 16px auto 0;
  max-width: 30em;
  font-size: clamp(16px, 2.5vw, 19px);
  color: var(--hero-sub);
}
.final-cta-wrap { margin: 32px 0 0; }
.final-cta-wrap .cta { width: 100%; max-width: 360px; }
.final-note {
  margin: 16px 0 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--hero-sub);
}

/* ============ フッター ============ */
.site-footer {
  text-align: center;
  padding: 32px 20px 40px;
  font-size: 12px;
  color: var(--ink-soft);
}
.site-footer p { margin: 4px 0; }

/* スクリーンリーダー専用テキスト（カウントアップ中の中間値を読ませない・最終値を常置） */
.vh {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ============ スクロール演出（JSゲート通過時のみ隠す。JS無効＝全表示） ============ */
.js-reveal .reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity var(--dur-2) var(--ease-out), transform var(--dur-2) var(--ease-out);
}
.js-reveal .reveal.is-visible { opacity: 1; transform: translateY(0); }
.js-reveal .rv-d1 { transition-delay: calc(var(--stagger) * 1); }
.js-reveal .rv-d2 { transition-delay: calc(var(--stagger) * 2); }
.js-reveal .rv-d3 { transition-delay: calc(var(--stagger) * 3); }
.js-reveal .rv-d4 { transition-delay: calc(var(--stagger) * 4); }
.js-reveal .rv-d5 { transition-delay: calc(var(--stagger) * 5); }

/* --- S-3 見出しのマスクリビール（.reveal の変種。IO・JSは共通） --- */
.js-reveal .reveal-mask {
  opacity: 1;
  transform: none;
  overflow: clip;
}
.js-reveal .reveal-mask .mask-inner {
  display: block;
  transform: translateY(110%);
  transition: transform var(--dur-2) var(--ease-out);
}
.js-reveal .reveal-mask.is-visible .mask-inner { transform: translateY(0); }

/* --- S-1 最終CTAの settle 変種（fade-up＋scale 1.02→1） --- */
.js-reveal .reveal-settle { transform: translateY(12px) scale(1.02); }
.js-reveal .reveal-settle.is-visible { transform: translateY(0) scale(1); }

/* アフターの3本は「丁寧に」描く（--dur-3＋ゆとりのdelay。ビフォー9本との対比＝N-2） */
.js-reveal .fig-svg-after .fig-lines line {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  transition: stroke-dashoffset var(--dur-3) var(--ease-draw);
}
.js-reveal .fig-after.is-visible .fig-svg-after .fig-lines line { stroke-dashoffset: 0; }
.js-reveal .fig-after.is-visible .fig-lines line:nth-child(1) { transition-delay: .25s; }
.js-reveal .fig-after.is-visible .fig-lines line:nth-child(2) { transition-delay: .45s; }
.js-reveal .fig-after.is-visible .fig-lines line:nth-child(3) { transition-delay: .65s; }

/* --- N-2 ビフォー9本の「乱入」draw（非sticky環境の物語担保。
       50msピッチであえて速く雑に＝丁寧なアフター3本とのリズム対比） --- */
.js-reveal .fig-svg-before .fig-lines line {
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  transition: stroke-dashoffset var(--dur-3) var(--ease-draw);
}
.js-reveal .fig-before.is-visible .fig-svg-before .fig-lines line { stroke-dashoffset: 0; }
.js-reveal .fig-svg-before .fig-lines line:nth-child(2) { transition-delay: .05s; }
.js-reveal .fig-svg-before .fig-lines line:nth-child(3) { transition-delay: .10s; }
.js-reveal .fig-svg-before .fig-lines line:nth-child(4) { transition-delay: .15s; }
.js-reveal .fig-svg-before .fig-lines line:nth-child(5) { transition-delay: .20s; }
.js-reveal .fig-svg-before .fig-lines line:nth-child(6) { transition-delay: .25s; }
.js-reveal .fig-svg-before .fig-lines line:nth-child(7) { transition-delay: .30s; }
.js-reveal .fig-svg-before .fig-lines line:nth-child(8) { transition-delay: .35s; }
.js-reveal .fig-svg-before .fig-lines line:nth-child(9) { transition-delay: .40s; }

/* --- N-3 「3回」の settle（確定の一拍。カウント完了の900msに合わせて点く） --- */
.js-reveal .fig-num-after {
  color: var(--ink-soft);
  transform: scale(1.02);
  transition: color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
  transition-delay: .9s;
}
.js-reveal .fig-after.is-visible .fig-num-after { color: var(--accent); transform: scale(1); }

@keyframes fade-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============ デスクトップ（821px〜）：mobile-firstで拡張 ============ */
@media (min-width: 821px) {
  .sec { padding: 96px 0; }
  .sec-title { margin-bottom: 40px; }

  .hero { padding: 112px 0 96px; }
  .hero-grid {
    flex-direction: row;
    align-items: center;
    gap: 48px;
  }
  .hero-copy { flex: 1 1 55%; }
  .hero-visual { flex: 1 1 45%; }
  .mock-wrap { width: min(360px, 90vw); }
  .mock-card { transform: rotate(-3deg) translateY(-8px); }

  .card-grid-3 { grid-template-columns: repeat(3, 1fr); }

  .fig-grid {
    grid-template-columns: 1fr auto 1fr;
    gap: 32px;
  }
  .fa-h { display: inline; }
  .fa-v { display: none; }

  .final-cta-wrap .cta { width: auto; }
}

/* 大型見出しの改行：デスクトップでは1行に戻す（モバイル専用<br>） */
@media (min-width: 821px) {
  .br-sp { display: none; }
}

/* ============ S-2 図解の sticky pin＋スクロールスクラブ（本仕様の目玉）
   3重ゲート：.js-reveal（JS）＋ 幅821px以上・高さ640px以上（レイアウト）＋ no-preference（動き）。
   ゲートを通らない環境では .pin-wrap/.pin-stage は只のdiv＝通常フロー（280vhの空白を絶対に作らない）。
   進行は JSが書く1変数 --p（0→1）だけから clamp+calc で導出（transition不使用＝手に吸い付くスクラブ）。 ============ */

/* 線の通し番号（スクラブの区間割り。ゲート外では未使用なだけで無害） */
.fig-lines line:nth-child(1) { --i: 0; }
.fig-lines line:nth-child(2) { --i: 1; }
.fig-lines line:nth-child(3) { --i: 2; }
.fig-lines line:nth-child(4) { --i: 3; }
.fig-lines line:nth-child(5) { --i: 4; }
.fig-lines line:nth-child(6) { --i: 5; }
.fig-lines line:nth-child(7) { --i: 6; }
.fig-lines line:nth-child(8) { --i: 7; }
.fig-lines line:nth-child(9) { --i: 8; }

@media (min-width: 821px) and (min-height: 640px) and (prefers-reduced-motion: no-preference) {
  .js-reveal .pin-wrap { height: 280vh; }
  .js-reveal .pin-stage {
    position: sticky;
    top: 0;
    min-height: 100vh;
    display: flex;
    align-items: center;
  }
  .js-reveal .pin-stage > .container { width: 100%; }

  /* スクラブ駆動へ切替：IO用の reveal/transition を無効化（以降すべて --p から導出） */
  .js-reveal .pin-wrap .fig-panel,
  .js-reveal .pin-wrap .fig-total { opacity: 1; transform: none; transition: none; }

  /* p 0〜0.40：ビフォー9本が1本ずつ絡まっていく */
  .js-reveal .pin-wrap .fig-before .fig-svg-before .fig-lines line {
    transition: none;
    stroke-dashoffset: calc(240px * clamp(0, 1 - (var(--p, 0) - var(--i, 0) * .038) / .06, 1));
  }
  /* p 0.40〜0.55：ビフォー全体が0.35へ沈み、矢印が現れる（direct） */
  .js-reveal .pin-wrap .fig-before {
    opacity: clamp(.35, 1 - (var(--p, 0) - .40) / .15 * .65, 1);
  }
  .js-reveal .pin-wrap .fig-arrow {
    opacity: clamp(0, (var(--p, 0) - .40) / .15, 1);
  }
  /* p 0.55〜0.95：アフター3本がすっと描かれる（p 0.95〜1.0 は静止＝答えを眺める余韻） */
  .js-reveal .pin-wrap .fig-after .fig-svg-after .fig-lines line {
    transition: none;
    stroke-dashoffset: calc(240px * clamp(0, 1 - (var(--p, 0) - .55 - var(--i, 0) * .12) / .08, 1));
  }
  /* N-3：p≧0.85 でJSが .is-confirmed を立て、「3回」が settle（確定の一拍） */
  .js-reveal .pin-wrap .fig-after .fig-num-after {
    color: var(--ink-soft);
    transform: scale(1.02);
    transition: color var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
  }
  .js-reveal .pin-wrap.is-confirmed .fig-after .fig-num-after { color: var(--accent); transform: scale(1); }

  /* will-change はピン区間が画面内にある間だけ（IOで .is-live を付け外し＝常時指定しない） */
  .js-reveal .pin-wrap.is-live .fig-lines line { will-change: stroke-dashoffset; }
}

/* ============ 動きを抑える設定では全アニメ・遷移を無効化（本体と同方式） ============ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;  /* infinite（H-3）を確実に止める */
    transition-duration: .001ms !important;
    transition-delay: 0ms !important;
  }
}