/* ==================================================================
   Kanji Trial LP — rev.3 (coherence / professionalisation)
   ------------------------------------------------------------------
   規格（発注書 490 §2 の明文化。例外を作らないこと）

   §A 背景リズム — 背景は 2 値のみ
       light = var(--paper) ／ night = var(--ink) 系。
       #fff は「カード面」専用でセクション背景には使わない。
       暗色章は 3 箇所だけ: ①hero(+trustbar) ②players-guide(スミ+子ども章)
       ③closing(+graduate strip + footer)。それ以外は必ず paper。
       eyebrow ピルは .eyebrow-pill 1 形式（night 面では .eyebrow-night）。

   §B 図版の器 — 3 種のみ。1 セクション内で器を混ぜない
       A. DOM モック  .mock-frame（hero / conv / 板）
       B. 概念図フレーム .dg-wrap > .dg-frame > img + figcaption.dg-caption
          チップは必ず図版の外（キャプション欄）。図版内には置かない。
       C. スプライト棚 .shelf > .shelf-block > .shelf-row > .cell
          生スプライトの直置き禁止。desktop cell 128x160 / mobile 64x80。

   §C ドット密度 — 表示幅 = 論理幅 x 整数（1.0 未満は禁止）
       全 img に data-logical-w / data-logical-h を付与し検査可能にする。
       max-width:100% による連続縮小は .lp-pixel では無効化し、
       ブレークポイントごとに段階スナップする。
       概念図(論理 80): 640 / 480 / 400 / 320 / 240
       棚のセル art: 128px(desktop) / 64px(mobile) — 全アセット整数倍
       (pet x4 / boss x2 / tower x1 / gear32 x4 / gear64 x2)

   §D ピクセルフォントの役割 — 3 つだけ
       ①kicker/eyebrow の英字リテラル (.kicker-pixel)
       ②数値の見出し (.trust-num)
       ③ブランド語 (.nav-word / .footer-word)
       本文・比較チップ・価格表には使わない。

   §E カードグリッド
       孤児カード禁止（4 枚は 4 列 or 2x2）。行内は高さ揃え（stretch + flex）。
       画像の有無は行単位で揃える。

   §F CTA 階層
       primary(朱) = アプリへの遷移のみ ／ secondary = outline ／
       tertiary = テキストリンク。白書ボタンは secondary。

   §G 発注書 527（LP案C-2）で追加した器 — 528 で訂正: 当初「既存§A〜Fの
       ソフトカード言語（var(--line) 罫線・--ambient-shadow-card・角丸）を
       流用する」と書いていたが、これは案C-2本体（.dc.html）の指示と矛盾
       していた。C-2 は radius 0・2px 濃紺罫線・ハードオフセット影
       （ぼかし無し）を**全セクション共通**で明記しており、「既存に合わせる」
       は「527以前の旧LPに合わせる」ではなく「この発注書自身のトークンに
       合わせる」の意だった。`tokens/spacing.css` の --radius-* を全て 0 に、
       カード/表/バッジ類の罫線を 2px（小物は1.5px）の var(--ink) に、
       影をハードオフセットに統一済み（528）。
   ================================================================== */

@import url("tokens/colors.css");
@import url("tokens/typography.css");
@import url("tokens/spacing.css");
@import url("tokens/effects.css");

/* ------------------------------------------------------------------ */
/* Base                                                                 */
/* ------------------------------------------------------------------ */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-wrap: break-word;
}
img { max-width: 100%; display: block; }
.wrap { max-width: var(--content-max); margin: 0 auto; padding: 0 24px; min-width: 0; }
.wrap-narrow { max-width: var(--content-narrow); margin: 0 auto; padding: 0 24px; min-width: 0; }
.nowrap { white-space: nowrap; }
@media (max-width: 900px) { .nowrap { white-space: normal; } }

/* ------------------------------------------------------------------ */
/* Language toggle                                                      */
/* ------------------------------------------------------------------ */
[lang-variant] { display: none; }
body[data-lang="en"] [lang-variant="en"] { display: inherit; }
body[data-lang="ja"] [lang-variant="ja"] { display: inherit; }
body[data-lang="th"] [lang-variant="th"] { display: inherit; }
span[lang-variant] { display: none; }
body[data-lang="en"] span[lang-variant="en"] { display: inline; }
body[data-lang="ja"] span[lang-variant="ja"] { display: inline; }
body[data-lang="th"] span[lang-variant="th"] { display: inline; }
div[lang-variant], section[lang-variant] { display: none; }
body[data-lang="en"] div[lang-variant="en"], body[data-lang="en"] section[lang-variant="en"] { display: block; }
body[data-lang="ja"] div[lang-variant="ja"], body[data-lang="ja"] section[lang-variant="ja"] { display: block; }
body[data-lang="th"] div[lang-variant="th"], body[data-lang="th"] section[lang-variant="th"] { display: block; }
body[data-lang="ja"] .price-anchor[lang-variant="ja"] { display: grid; }
body[data-lang="en"] .price-anchor[lang-variant="ja"],
body[data-lang="th"] .price-anchor[lang-variant="ja"] { display: none; }
.lang-only-en-th { display: none; }
body[data-lang="en"] .price-anchor.lang-only-en-th,
body[data-lang="th"] .price-anchor.lang-only-en-th { display: grid; }
body[data-lang="ja"] .price-anchor.lang-only-en-th { display: none; }
body[data-lang="ja"] .lang-only-en-th { display: none !important; }
body[data-lang="en"] a.btn.lang-only-en-th,
body[data-lang="th"] a.btn.lang-only-en-th { display: inline-flex; }
body[data-lang="en"] .lang-only-en-th,
body[data-lang="th"] .lang-only-en-th { display: block; }
body[data-lang="en"] span.lang-only-en-th,
body[data-lang="th"] span.lang-only-en-th { display: inline; }

/* ------------------------------------------------------------------ */
/* §D Kickers — the only place pixel type is allowed (role 1)           */
/* ------------------------------------------------------------------ */
.kicker { font-size: var(--text-sm); font-weight: var(--weight-black); letter-spacing: 1.5px; }
.kicker-pixel { font-family: var(--font-pixel-en); font-size: 10px; letter-spacing: 1px; line-height: 1.6; }
body[data-lang="ja"] .kicker-pixel { font-family: var(--font-pixel-jp); font-size: var(--text-sm); }
body[data-lang="th"] .kicker-pixel { font-family: var(--font-body); font-size: var(--text-xs); font-weight: var(--weight-black); }
.kicker-bad { color: var(--shu); }
.kicker-good { color: var(--teal-bright); }

/* §A one eyebrow format for every section */
.eyebrow-pill {
  display: inline-block; font-weight: var(--weight-black); font-size: var(--text-xs);
  padding: 6px 16px; border-radius: var(--radius-pill); letter-spacing: .12em;
  background: #fff; border: 1px solid var(--indigo); color: var(--indigo);
}
.eyebrow-night { background: rgba(255,255,255,.08); border-color: var(--night-line); color: var(--teal-bright); }

/* ------------------------------------------------------------------ */
/* §F Buttons                                                           */
/* ------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--font-body); font-weight: var(--weight-black);
  text-decoration: none; cursor: pointer; user-select: none; border: none;
  border-radius: var(--radius-lg);
  transition: transform var(--duration-press) ease, box-shadow var(--duration-press) ease;
}
.btn:active { transform: translateY(3px); }
.btn-sm { padding: 9px 18px; font-size: var(--text-sm); border-radius: var(--radius-md); }
.btn-md { padding: 13px 26px; font-size: var(--text-md); }
.btn-lg { padding: 16px 34px; font-size: var(--text-lg); }
.btn-sm:active, .btn-md:active { transform: translateY(2px); }
.btn-primary { background: var(--shu); color: #fff; box-shadow: var(--block-shadow-shu); }
.btn-primary:active { box-shadow: var(--block-shadow-shu-sm); }
.btn-outline { background: transparent; color: var(--indigo); border: 2px solid var(--indigo); }
.btn-outline:active { transform: translateY(1px); }
.btn-ghost { background: transparent; color: var(--night-text-soft); border: 2px solid var(--night-line); box-shadow: none; }
.btn-ghost:active { transform: translateY(1px); border-color: #8fa2e0; }
.btn-block { display: flex; width: 100%; }
/* サイズ修飾（btn-sm/md/lg）の付け忘れでも 44px を割らない保険。
   .btn 基底は padding を持たないので、忘れると高さ 24px で出ていた（499 B1/B2）。 */
.btn { min-height: 44px; }

/* ------------------------------------------------------------------ */
/* Nav                                                                  */
/* ------------------------------------------------------------------ */
.nav {
  display: flex; align-items: center; gap: 28px; padding: 16px 24px;
  background: rgba(247,246,241,.96); backdrop-filter: blur(4px); color: var(--ink);
  border-bottom: 2px solid var(--ink); position: sticky; top: 0; z-index: 40;
}
.nav-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.nav-mark {
  width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; flex: none;
}
.nav-mark img { display: block; width: 40px; height: 42px; image-rendering: pixelated; image-rendering: crisp-edges; }
.nav-word { font-family: var(--font-pixel-jp); font-size: 20px; letter-spacing: 1px; color: var(--ink); }
.nav-links { flex: 1; display: flex; gap: 26px; justify-content: center; font-size: var(--text-md); font-weight: var(--weight-medium); }
.nav-links a { color: var(--ink-soft); text-decoration: none; }
.nav-links a:hover { color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: 14px; }
.lang-pill {
  cursor: pointer; font-size: var(--text-sm); font-weight: var(--weight-bold);
  padding: 6px 12px; border: 1.5px solid var(--line); border-radius: 0;
  color: var(--sub); background: #fff;
}
.nav-menu-btn {
  display: none; align-items: center; justify-content: center; width: 44px; height: 44px;
  background: #fff; border: 2px solid var(--ink); border-radius: 0; color: var(--ink);
  font-size: 20px; cursor: pointer; padding: 4px; flex: none;
}
.mobile-nav {
  display: none; position: fixed; inset: 0; top: 74px; background: var(--paper);
  border-bottom: 2px solid var(--ink); z-index: 39;
  flex-direction: column; padding: 8px 24px 24px; gap: 4px; overflow-y: auto;
}
.mobile-nav.open { display: flex; }
.mobile-nav a { color: var(--ink); text-decoration: none; font-size: var(--text-lg); font-weight: var(--weight-medium); padding: 14px 0; border-bottom: 1px solid var(--line); }
.mobile-nav .btn { margin-top: 16px; }

/* ------------------------------------------------------------------ */
/* §C Pixel art — nearest neighbour, integer steps only                 */
/* ------------------------------------------------------------------ */
.lp-pixel { image-rendering: pixelated; image-rendering: crisp-edges; max-width: none; height: auto; }
.dg-frame img[width][height] { display: block; }
.lp-coin { display: inline-block; vertical-align: -2px; flex: none; width: 16px; height: 16px; }
.mock-coin { display: inline-flex; align-items: center; gap: 4px; color: var(--gold-bright); }
.loop-title .lp-coin { vertical-align: -2px; margin-right: 2px; }

/* ------------------------------------------------------------------ */
/* Hero — light "paper" chapter, matches design_handoff_lp_signup      */
/* (LP案C-2 改訂版.dc.html): #f7f6f1 + faint shu grid, dark ink text.   */
/* ------------------------------------------------------------------ */
.hero {
  position: relative; overflow: hidden;
  background-color: var(--paper);
  background-image: linear-gradient(rgba(224,83,59,.10) 1px, transparent 1px), linear-gradient(90deg, rgba(224,83,59,.10) 1px, transparent 1px);
  background-size: 44px 44px;
  color: var(--ink); padding: 72px 24px 88px;
}
.hero-inner { display: flex; gap: 48px; align-items: center; position: relative; max-width: var(--content-max); margin: 0 auto; }
.hero-copy { flex: 1; min-width: 0; }
.hero .kicker-pixel {
  display: inline-block; font-family: inherit; letter-spacing: 1px;
  background: #fff; border: 2px solid var(--ink); color: var(--ink);
  padding: 7px 16px; font-size: 12.5px; font-weight: 800; margin-bottom: 18px;
}
.hero-headline { font-size: clamp(34px, 4.4vw, 54px); font-weight: 900; line-height: 1.28; letter-spacing: -0.5px; margin: 0; }
.hero-headline .accent { color: var(--shu); }
.hero-sub { font-size: var(--text-lg); line-height: var(--leading-loose); color: var(--ink-soft); margin-top: 20px; max-width: 480px; }
.hero-ctas { display: flex; gap: 14px; margin-top: 32px; align-items: flex-start; flex-wrap: wrap; flex-direction: column; }
.hero-ctas .btn-primary { background: var(--ink); box-shadow: 4px 4px 0 var(--shu); }
.hero-ctas .btn-primary:active { box-shadow: 2px 2px 0 var(--shu); }
.hero-ctas .btn-ghost { background: #fff; color: var(--ink); border: 2px solid var(--ink); box-shadow: none; }
.hero-ctas .btn-ghost:active { transform: translateY(1px); }
.hero-sublinks { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.hero-sublink {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 44px; color: var(--ink-soft); text-decoration: underline;
  text-underline-offset: 3px; font-size: var(--text-md); font-weight: var(--weight-medium);
}
.hero-sublink:hover { color: var(--ink); }
.hero-tag { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--sub); margin-top: 22px; letter-spacing: .08em; }
.hero-visual { width: 300px; flex: none; position: relative; min-width: 0; margin: 0 auto; }
.hero-frame { background: var(--ink); padding: 10px; box-shadow: 8px 8px 0 rgba(28,39,64,.18); position: relative; }
.hero-cover-wrap { position: relative; width: 100%; }
.hero-cover { width: 100%; display: block; }
.hero-sumi-float {
  position: absolute; bottom: -20px; right: -38px; width: 80px;
  filter: drop-shadow(0 8px 16px rgba(0,0,0,.4)); pointer-events: none;
}
.hero-iap-badge {
  position: absolute; top: -18px; left: -24px; width: 76px; height: 76px;
  border: 3px solid var(--shu); border-radius: 50%; background: rgba(255,255,255,.9);
  display: flex; align-items: center; justify-content: center; text-align: center;
  color: var(--shu); font-weight: 900; font-size: 12px; line-height: 1.3;
  transform: rotate(-12deg); pointer-events: none;
}
.hero-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.hero-badge {
  font-size: 12px; font-weight: var(--weight-bold); letter-spacing: .3px;
  padding: 6px 12px; border-radius: 0;
  background: #fff; color: var(--ink); border: 1.5px solid var(--ink);
}
@keyframes ktBob { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-10px) rotate(-3deg); } }
@keyframes ktBob2 { 0%, 100% { transform: translateY(-6px) rotate(4deg); } 50% { transform: translateY(4px) rotate(4deg); } }
@keyframes ktPulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .voxel { animation: none !important; } }

/* ------------------------------------------------------------------ */
/* LP variants (Lazyweb 501) — combined | demo | proof                  */
/* ------------------------------------------------------------------ */
body[data-lp-variant="combined"] { padding-bottom: 72px; }
body[data-lp-variant="demo"],
body[data-lp-variant="proof"] { padding-bottom: 0; }

body[data-lp-variant="combined"] [data-lp-sticky] { display: flex; }
[data-hero-proof], [data-hero-demo] { display: none; }
body[data-lp-variant="demo"] [data-hero-demo] { display: block; }
body[data-lp-variant="proof"] [data-hero-proof] { display: block; }
body[data-lp-variant="demo"] [data-hero-ctas],
body[data-lp-variant="proof"] .hero-visual { display: none !important; }
body[data-lp-variant="proof"] [data-hero-ctas] { display: flex !important; }

.hero-proof { margin-top: 28px; }
.hero-proof-eyebrow { color: var(--teal-bright); letter-spacing: 2px; margin-bottom: 16px; }
.hero-proof-figure { margin: 0 0 16px; }
.hero-proof-img { width: 320px; max-width: 100%; }
.hero-proof-list {
  margin: 0; padding: 0 0 0 18px; color: var(--night-text-soft);
  font-size: var(--text-md); line-height: var(--leading-loose); max-width: 520px;
}
.hero-proof-list li { margin-bottom: 10px; }
.hero-proof-list strong { color: #fff; }

.hero-demo { margin-top: 28px; max-width: 480px; width: 100%; }
.hero-demo-card {
  background: rgba(0,0,0,.28); border: 1px solid var(--night-line);
  border-radius: var(--radius-lg); padding: 20px 18px;
}
.hero-demo-status, .hero-demo-fail {
  font-size: var(--text-md); color: var(--night-text-soft); margin: 0 0 12px; line-height: 1.5;
}
.hero-demo-progress {
  font-size: var(--text-xs); font-weight: var(--weight-black); letter-spacing: .08em;
  color: var(--teal-bright); margin-bottom: 12px;
}
.hero-demo-prompt {
  font-size: clamp(48px, 12vw, 72px); font-weight: var(--weight-black);
  line-height: 1.1; text-align: center; margin-bottom: 8px;
}
.hero-demo-ask {
  font-size: var(--text-sm); color: var(--night-text-soft); text-align: center; margin-bottom: 16px;
}
.hero-demo-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hero-demo-opt {
  min-height: 44px; padding: 10px 12px; border-radius: var(--radius-md);
  border: 2px solid var(--night-line); background: rgba(255,255,255,.06);
  color: #fff; font-size: var(--text-md); font-weight: var(--weight-bold); cursor: pointer;
  font-family: var(--font-body);
}
.hero-demo-opt:hover:not(:disabled) { border-color: var(--teal-bright); }
.hero-demo-opt--good { border-color: var(--teal-bright); background: rgba(45,212,191,.15); }
.hero-demo-opt--bad { border-color: var(--shu); opacity: .7; }
.hero-demo-opt:disabled { cursor: default; opacity: .55; }
.hero-demo-feedback {
  margin-top: 12px; text-align: center; font-size: var(--text-sm); font-weight: var(--weight-bold);
}
.hero-demo-feedback--good { color: var(--teal-bright); }
.hero-demo-feedback--bad { color: var(--gold-bright); }
.hero-demo-win { text-align: center; }
.hero-demo-win-badge {
  font-size: 36px; color: var(--gold-bright); line-height: 1; margin-bottom: 8px;
}
.hero-demo-win-title { font-size: var(--text-2xl); font-weight: var(--weight-black); margin-bottom: 8px; }
.hero-demo-win-body { font-size: var(--text-md); color: var(--night-text-soft); margin: 0 0 16px; line-height: 1.5; }
.hero-demo-cta { width: 100%; }

.lp-sticky-start {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 45;
  display: none; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; background: var(--ink); border-top: 1px solid var(--night-line);
  box-shadow: 0 -4px 24px rgba(0,0,0,.35);
}
.lp-sticky-badge {
  font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--gold-bright);
  letter-spacing: .04em; flex: 1; min-width: 0;
}
.lp-sticky-cta { flex: none; white-space: nowrap; }
body.mobile-nav-open [data-lp-sticky] { display: none !important; }

.nav .btn-sm { white-space: nowrap; padding: 10px 14px; font-size: var(--text-sm); }
.nav-cta-long { display: inline; }
.nav-cta-short { display: none; }
@media (max-width: 767px) {
  .nav-cta-long { display: none; }
  .nav-cta-short { display: inline; }
}

section[id], [id]#top { scroll-margin-top: 132px; }
@media (min-width: 768px) {
  section[id], [id]#top { scroll-margin-top: 96px; }
}

/* Trust hotbar — foot of the hero chapter */
.trustbar { background: var(--night-3); padding: 18px 24px; display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.trust-item {
  flex: 1 1 150px; min-width: 130px; max-width: 220px; background: var(--night-1);
  border: 2px solid var(--night-line); border-radius: var(--radius-md); padding: 12px 16px; text-align: center;
}
.trust-num { font-family: var(--font-pixel-en); font-size: var(--text-md); line-height: 1.5; }
.trust-label { font-size: var(--text-xs); color: var(--night-text-faint); font-weight: var(--weight-medium); margin-top: 6px; }
.trust-soon {
  display: inline-block; margin-top: 6px; padding: 3px 8px;
  font-size: 10px; font-weight: var(--weight-bold); letter-spacing: .3px;
  color: var(--gold-bright); background: rgba(244, 200, 94, .12);
  border: 1px solid var(--gold); border-radius: var(--radius-pill);
}

/* ------------------------------------------------------------------ */
/* §A Section shell — light sections are always --paper                 */
/* ------------------------------------------------------------------ */
.section { padding: 92px 24px; background: var(--paper); }
.section-tight { padding: 84px 24px; background: var(--paper); }
.section-title {
  font-size: clamp(26px, 3.2vw, 38px); font-weight: 900; color: var(--ink);
  margin: 14px auto 0; text-align: center; line-height: 1.4; letter-spacing: -.01em;
  max-width: min(34ch, 100%); text-wrap: balance;
}
.section-title-night { color: #fff; }
.section-title-left { text-align: left; margin-left: 0; }
.section-body {
  font-size: var(--text-md); line-height: var(--leading-loose); color: var(--sub);
  margin: 18px auto 0; text-align: center; max-width: 62ch; text-wrap: pretty;
}
.section-body-night { color: #c9d2ee; }
.section-body-left { text-align: left; margin-left: 0; }
.section-evidence { text-align: center; margin-top: 22px; }

/* ------------------------------------------------------------------ */
/* §B-B Concept diagram frame — chips live in the caption, never on art */
/* ------------------------------------------------------------------ */
.dg-wrap { margin: 40px auto 0; width: 640px; max-width: 100%; }
.dg-wrap-inline { margin: 0 auto; }
.dg-frame {
  position: relative; width: max-content; max-width: 100%; margin: 0 auto;
  background: #fff; border: 2px solid var(--ink);
  padding: 12px; box-shadow: 6px 6px 0 rgba(28,39,64,.12);
}
.dg-img { width: 640px; }
.dg-img-md { width: 480px; }
.dg-img-sm { width: 320px; }
.dg-caption {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  margin-top: 12px; text-align: left;
}
.dg-chip {
  font-size: 11px; font-weight: var(--weight-bold); line-height: 1.4; color: var(--ink);
  background: #fff; border: 1.5px solid var(--ink);
  padding: 4px 9px;
}
.dg-chip strong { font-weight: 900; }
.dg-caption-night .dg-chip { background: var(--night-1); border-color: var(--night-line); color: var(--night-text-soft); }
.night-chapter .dg-frame { background: var(--night-2); border-color: var(--night-line); box-shadow: none; }

/* ------------------------------------------------------------------ */
/* Problem                                                              */
/* ------------------------------------------------------------------ */
.problem-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 36px; align-items: stretch; }
.problem-card { background: #fff; border: 2px solid var(--ink); padding: 20px 24px; text-align: left; }
.problem-card.dark { background: var(--ink); color: #fff; box-shadow: 5px 5px 0 var(--shu); border: none; }
.problem-line { font-size: var(--text-md); font-weight: var(--weight-bold); margin-top: 8px; }
.problem-desc { font-size: var(--text-base); color: var(--sub); margin-top: 6px; line-height: var(--leading-normal); }
.problem-card.dark .problem-desc { color: var(--night-text-soft); }

/* ------------------------------------------------------------------ */
/* §E Loop — 4 cards, never 3+1                                         */
/* ------------------------------------------------------------------ */
.loop-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; margin-top: 44px; align-items: stretch; }
.loop-card {
  border-radius: var(--radius-xl); padding: 24px; border-bottom: 6px solid;
  display: flex; flex-direction: column; gap: 6px;
}
.loop-art { height: 140px; display: flex; align-items: flex-end; margin-bottom: 10px; }
.loop-step-art { width: 160px; }
.loop-card-text .loop-title { margin-top: 0; }
.loop-title { font-size: var(--text-xl); font-weight: 900; color: var(--ink); display: flex; align-items: center; gap: 8px; }
.loop-desc { font-size: var(--text-sm); line-height: var(--leading-loose); color: var(--ink-soft); margin-top: 4px; }
.loop-link { margin-top: auto; padding-top: 12px; font-size: var(--text-sm); font-weight: var(--weight-black); color: var(--indigo); text-decoration: none; }
.loop-link:hover { text-decoration: underline; }
.loop-note { text-align: center; margin-top: 26px; font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--shu); }

/* ------------------------------------------------------------------ */
/* §E Economy — art cards on row 1, text cards on row 2                 */
/* ------------------------------------------------------------------ */
.economy-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 36px; align-items: stretch; }
.economy-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-xl); padding: 20px;
  display: flex; flex-direction: column; min-width: 0;
}
.economy-card-thumb { margin: 0 0 14px; }
.economy-card-title { font-size: var(--text-xl); font-weight: 900; color: var(--ink); }
.economy-card-body { font-size: var(--text-base); color: var(--sub); line-height: var(--leading-loose); margin-top: 8px; }
.economy-closer { text-align: center; margin-top: 32px; font-size: var(--text-lg); font-weight: var(--weight-bold); color: var(--ink); line-height: var(--leading-loose); }

/* Curriculum block */
.curriculum-block {
  margin-top: 36px; background: var(--indigo-soft); border: 1px solid var(--indigo);
  border-radius: var(--radius-xl); padding: 24px 28px; text-align: left;
}
.curriculum-badge {
  display: inline-block; font-size: var(--text-xs); font-weight: var(--weight-black); letter-spacing: .04em;
  color: var(--indigo); background: #fff; padding: 6px 12px; border-radius: 999px;
  margin-bottom: 12px; border: 1px solid var(--indigo);
}
.curriculum-block h3 { font-size: var(--text-2xl); font-weight: 900; color: var(--ink); margin: 0 0 12px; }
.curriculum-block p { font-size: var(--text-base); color: var(--ink-soft); line-height: var(--leading-loose); margin: 0 0 10px; }

/* ------------------------------------------------------------------ */
/* Money                                                                */
/* ------------------------------------------------------------------ */
.money-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 32px; align-items: stretch; }
.money-card { background: #fff; border-radius: var(--radius-xl); padding: 22px; border: 1px solid var(--line); }
.money-card-title { font-size: var(--text-xl); font-weight: 900; color: var(--ink); }
.money-card-body { font-size: var(--text-base); color: var(--sub); line-height: var(--leading-loose); margin-top: 8px; }
.money-disclaimer { text-align: center; margin-top: 20px; font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--sub); }

/* ------------------------------------------------------------------ */
/* §B-A DOM mock                                                        */
/* ------------------------------------------------------------------ */
.mock-frame { background: var(--paper); border-radius: var(--radius-2xl); padding: 18px; box-shadow: 0 14px 0 rgba(0, 0, 0, .12); border: 1px solid var(--line); }
.mock-bar { display: flex; align-items: center; gap: 10px; background: var(--ink); border-radius: var(--radius-lg); padding: 10px 14px; color: #fff; font-size: var(--text-sm); font-weight: var(--weight-bold); }
.mock-lv { background: var(--indigo); border-radius: 6px; padding: 3px 8px; font-family: var(--font-pixel-jp); }
.mock-xp { flex: 1; height: 8px; background: #39466e; border-radius: 4px; overflow: hidden; }
.mock-xp > div { height: 100%; background: linear-gradient(90deg, var(--teal), var(--teal-bright)); }
.mock-card { background: #fff; border-radius: var(--radius-xl); margin-top: 12px; padding: 22px; text-align: center; border: 1px solid var(--line); }
.mock-label { font-size: var(--text-xs); font-weight: var(--weight-bold); color: var(--sub); letter-spacing: 2px; }
.mock-choice { border: 2px solid var(--line); color: var(--sub); font-weight: var(--weight-bold); padding: 10px; border-radius: var(--radius-md); font-size: var(--text-md); background: var(--paper); }
.mock-choice.correct { background: var(--teal-soft); border-color: var(--teal); color: var(--teal); }

/* ------------------------------------------------------------------ */
/* Heritage (EN/TH)                                                     */
/* ------------------------------------------------------------------ */
.heritage-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 32px; text-align: left; align-items: stretch; }
.heritage-item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 18px 20px; }
.heritage-item-title { font-weight: 900; color: var(--ink); font-size: var(--text-md); }
.heritage-item-body { font-size: var(--text-sm); color: var(--sub); line-height: var(--leading-loose); margin-top: 6px; }

/* §D price anchors and comparisons share one pill format (no pixel type) */
.price-anchor { margin: 28px 0 32px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; font-size: var(--text-sm); }
.price-anchor > div { padding: 14px 16px; border: 1.5px solid var(--ink); background: #fff; text-align: left; line-height: var(--leading-loose); }
.price-anchor .them { color: var(--sub); }
.price-anchor .us { background: var(--ink); border-color: var(--ink); font-weight: var(--weight-bold); color: #fff; }

/* ------------------------------------------------------------------ */
/* §A Night chapter 2/3 — Sumi + player's guide, one continuous chapter  */
/* ------------------------------------------------------------------ */
.night-chapter { background: var(--ink); color: #fff; padding: 84px 24px; }
.sumi-row { display: flex; gap: 48px; align-items: center; justify-content: center; flex-wrap: wrap; }
.sumi-hero { width: 384px; flex: none; filter: drop-shadow(0 12px 26px rgba(0,0,0,.45)); }
.sumi-copy { flex: 1; min-width: 280px; max-width: 540px; }
.night-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.night-pill { padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.08); font-weight: 900; font-size: 13px; }
.chapter-rule { height: 1px; background: var(--night-line); margin: 64px 0 56px; }

.kids-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin-top: 40px; align-items: stretch; }
.kids-card {
  background: var(--night-2); border-radius: var(--radius-xl); padding: 24px;
  border: 2px solid var(--night-line); display: flex; flex-direction: column; min-width: 0;
}
.kids-card-body { flex: 1; }
.kids-title { font-size: var(--text-xl); font-weight: 900; }
.kids-desc { font-size: var(--text-base); color: var(--night-text-soft); line-height: var(--leading-normal); margin-top: 6px; }
.kids-card-art { margin: 18px auto 0; width: 320px; }
.egg-strip { display: flex; gap: 12px; justify-content: center; margin-top: 18px; }
.egg-art { width: 128px; flex: none; }

/* §B-C Sprite shelf — fixed cell, single apparent dot size, grouped */
.shelf { margin-top: 48px; padding-top: 36px; border-top: 1px solid var(--night-line); }
.shelf-caption { text-align: center; font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--teal-bright); margin: 0 0 28px; }
.shelf-block { margin-bottom: 32px; overflow: hidden; }
.shelf-block-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.shelf-block-title { font-size: var(--text-md); font-weight: 900; color: #fff; }
.shelf-block-note { font-size: var(--text-xs); color: var(--night-text-faint); font-weight: var(--weight-medium); }
.shelf-row {
  display: flex; gap: 16px; align-items: flex-end; flex-wrap: nowrap;
  overflow-x: auto; padding-bottom: 8px; -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 92%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 92%, transparent 100%);
}
.cell {
  position: relative; flex: none; width: 144px; height: 176px;
  background: var(--night-2); border: 1px solid var(--night-line); border-radius: var(--radius-md);
  display: flex; align-items: flex-end; justify-content: center; padding: 8px;
}
.cell-art { width: 128px; flex: none; }
.cell-label {
  position: absolute; left: 8px; bottom: 6px;
  font-size: 10px; font-weight: 900; letter-spacing: .06em; color: var(--night-text-faint);
}
.cell-fusion { border-color: var(--gold); box-shadow: inset 0 0 0 1px rgba(244,200,94,.35); }
.cell-label-fusion { color: var(--gold-bright); }
.shelf-figures { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; margin-top: 40px; }
.tower-figure { width: 640px; }
.fishhub-figure { width: 384px; }

/* ------------------------------------------------------------------ */
/* Safety                                                               */
/* ------------------------------------------------------------------ */
.safety-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-top: 40px; align-items: stretch; }
.safety-card { background: #fff; padding: 24px; border: 1.5px solid var(--ink); }
.safety-title { font-size: var(--text-xl); font-weight: 900; color: var(--ink); margin-top: 8px; }
.safety-desc { font-size: var(--text-base); color: var(--sub); line-height: var(--leading-loose); margin-top: 8px; }

.ftc-wrap { margin-top: 40px; overflow-x: auto; }
.ftc-cards { display: none; }
.ftc-card { background: #fff; border: 1.5px solid var(--ink); padding: 14px 16px; }
.ftc-card-topic { font-weight: 900; color: var(--ink); font-size: var(--text-md); line-height: var(--leading-snug); margin-bottom: 10px; }
.ftc-card-row + .ftc-card-row { margin-top: 10px; }
.ftc-card-label { font-size: var(--text-xs); font-weight: var(--weight-black); color: var(--sub); letter-spacing: .04em; margin-bottom: 4px; }
.ftc-card-bad { color: var(--shu); font-size: var(--text-sm); line-height: var(--leading-loose); }
.ftc-card-good { color: var(--teal); font-weight: var(--weight-bold); font-size: var(--text-sm); line-height: var(--leading-loose); background: var(--teal-soft); border-radius: var(--radius-md); padding: 10px 12px; margin-top: 4px; }
.ftc-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); min-width: 520px; background: #fff; border: 2px solid var(--ink); }
.ftc-table th, .ftc-table td { padding: 12px 14px; border-top: 1px solid var(--line); vertical-align: top; text-align: left; }
.ftc-table thead th { background: var(--ink); font-weight: var(--weight-black); color: #fff; border-top: none; }
.ftc-table thead th:nth-child(2) { color: var(--night-text-faint); }
.ftc-table td:first-child { color: var(--sub); width: 42%; }
.ftc-table .good { color: var(--teal); font-weight: var(--weight-bold); }
.ftc-table .bad { color: var(--shu); }

.dashboard-row { display: flex; gap: 36px; margin-top: 56px; align-items: center; flex-wrap: wrap; }
.dashboard-copy { flex: 1; min-width: 260px; }
.dashboard-copy-title { font-size: var(--text-3xl); font-weight: 900; color: var(--ink); }
.dashboard-copy-body { font-size: var(--text-md); color: var(--sub); line-height: var(--leading-loose); margin-top: 12px; }
.dashboard-visual { flex: none; width: 100%; max-width: 506px; }

/* ------------------------------------------------------------------ */
/* §E Pricing — equal-height columns, CTA pinned to the bottom          */
/* ------------------------------------------------------------------ */
.pricing-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 40px; text-align: left; align-items: stretch; }
.pricing-card {
  border: 2px solid var(--ink); padding: 28px; box-shadow: 6px 6px 0 rgba(28,39,64,.12);
  background: #fff; display: flex; flex-direction: column; min-width: 0;
}
.pricing-card.highlight { border-color: var(--ink); background: var(--ink); color: #fff; box-shadow: 6px 6px 0 var(--shu); }
.pricing-card.highlight .pricing-plan-title,
.pricing-card.highlight .pricing-amount { color: #fff; }
.pricing-card.highlight .pricing-features,
.pricing-card.highlight .pricing-sub-amount { color: var(--night-text-soft); }
.pricing-amount { font-size: var(--text-4xl); font-weight: 900; color: var(--ink); margin-top: 10px; }
.pricing-amount span[lang-variant] { display: none; }
body[data-lang="en"] .pricing-amount span[lang-variant="en"],
body[data-lang="ja"] .pricing-amount span[lang-variant="ja"],
body[data-lang="th"] .pricing-amount span[lang-variant="th"] { display: block; }
.pricing-amount small { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--sub); }
.pricing-sub-amount { font-size: var(--text-md); font-weight: var(--weight-bold); color: var(--sub); margin-top: 4px; }
.pricing-sub-amount span[lang-variant] { display: none; }
body[data-lang="en"] .pricing-sub-amount span[lang-variant="en"],
body[data-lang="ja"] .pricing-sub-amount span[lang-variant="ja"],
body[data-lang="th"] .pricing-sub-amount span[lang-variant="th"] { display: block; }
.pricing-plan-title { font-size: var(--text-xl); font-weight: 900; color: var(--ink); margin-top: 10px; }
.pricing-features { font-size: var(--text-base); color: var(--ink-soft); line-height: 2.1; margin-top: 14px; }
.plus-figure { margin-top: 18px; }
.pricing-note { font-size: var(--text-sm); color: var(--sub); line-height: var(--leading-loose); margin-top: 14px; }
.pricing-cta { margin-top: auto; }
.pricing-features + .pricing-cta { margin-top: 24px; }

/* ------------------------------------------------------------------ */
/* FAQ                                                                  */
/* ------------------------------------------------------------------ */
.faq-head { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 8px; flex-wrap: wrap; }
.faq-accent { width: 80px; flex: none; opacity: .9; }
.faq-list { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; }
.faq-item { background: #fff; padding: 20px 24px; border: 1.5px solid var(--ink); }
.faq-q { font-size: var(--text-md); font-weight: var(--weight-black); color: var(--ink); }
.faq-a { font-size: var(--text-sm); color: var(--sub); line-height: var(--leading-loose); margin-top: 6px; }

/* ------------------------------------------------------------------ */
/* §A Night chapter 3/3 — closing + bridge + footer                     */
/* ------------------------------------------------------------------ */
.closing { background: var(--ink); padding: 80px 24px; text-align: center; color: #fff; }
.closing-inner { display: flex; gap: 40px; align-items: center; justify-content: center; flex-wrap: wrap; max-width: var(--content-max); margin: 0 auto; }
.closing-art { flex: none; width: 480px; filter: drop-shadow(0 12px 28px rgba(0,0,0,.35)); }
.closing-copy { flex: 1; min-width: 280px; text-align: center; }
.closing-eyebrow { color: var(--teal-bright); display: block; }
.closing-title { font-size: var(--text-4xl); font-weight: 900; margin-top: 12px; line-height: var(--leading-snug); }
.closing-sub { font-size: var(--text-lg); color: var(--night-text-soft); margin-top: 12px; }
.closing .btn { margin-top: 30px; }

.graduate-strip {
  display: block; text-align: center; text-decoration: none;
  background: var(--night-2); color: var(--night-text-soft);
  padding: 16px 24px; font-size: var(--text-base); font-weight: var(--weight-bold);
  border-top: 1px solid var(--night-line); border-bottom: 1px solid var(--night-line);
}
.graduate-strip:hover { color: #fff; background: var(--night-1); }

.footer { background: var(--night-3); color: var(--night-text-faint); padding: 28px 24px; display: flex; justify-content: space-between; align-items: center; font-size: var(--text-sm); flex-wrap: wrap; gap: 12px; }
.footer-brand { display: flex; align-items: center; gap: 10px; }
.footer-mark { width: 26px; height: 27px; display: flex; align-items: center; justify-content: center; flex: none; }
.footer-mark img { display: block; width: 22px; height: 23px; image-rendering: pixelated; image-rendering: crisp-edges; }
.footer-word { font-family: var(--font-pixel-jp); font-size: var(--text-md); color: var(--night-text-soft); }
.footer-links { display: flex; gap: 22px; align-items: center; flex-wrap: wrap; }
.footer-links a { color: var(--night-text-faint); text-decoration: none; }
.footer-links a:hover { color: #fff; }
.footer-lang { cursor: pointer; color: var(--night-text-soft); background: none; border: none; font: inherit; padding: 0; }

/* ================================================================== */
/* Responsive — every art step below is logical x integer (§C)          */
/* ================================================================== */
@media (max-width: 1180px) {
  .loop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1100px) {
  .dg-img { width: 480px; }
  .dg-img-sm { width: 240px; }
  .closing-inner { flex-direction: column; }
  .closing-art { width: 320px; }
}

@media (max-width: 900px) {
  .hero-inner { flex-direction: column; align-items: stretch; }
  .hero-visual, .hero-cover-wrap { width: 100%; max-width: 480px; margin: 0 auto; }
  .safety-grid { grid-template-columns: 1fr; }
  .money-grid { grid-template-columns: 1fr; }
  .economy-cards { grid-template-columns: 1fr; }
  .heritage-grid { grid-template-columns: 1fr; }
  .price-anchor { grid-template-columns: 1fr; }
  .closing-inner { flex-direction: column; }
  .dashboard-row { justify-content: center; }
  .pricing-cards { grid-template-columns: 1fr; }
  .dg-img-md { width: 400px; }
  .sumi-hero { width: 256px; }
  .closing-art { width: 320px; }
}

@media (max-width: 767px) {
  .ftc-wrap { overflow: visible; }
  .ftc-table { display: none; }
  .ftc-cards { display: flex; flex-direction: column; gap: 14px; }
}

@media (max-width: 800px) {
  .dg-img { width: 400px; }
  .tower-figure { width: 480px; }
}

@media (max-width: 720px) {
  .nav-links { display: none; }
  .nav-menu-btn { display: flex; }
  .section, .section-tight { padding: 56px 20px; }
  .night-chapter { padding: 56px 20px; }
  .hero { padding: 48px 20px 64px; }
  .hero-headline { font-size: var(--text-4xl); }
  .hero-visual, .hero-cover-wrap { max-width: 240px; }
  .hero-cover { width: 240px; }
  .section-title { font-size: var(--text-3xl); }
  .closing-title { font-size: var(--text-3xl); }
  .pricing-cards { grid-template-columns: 1fr; }
  .problem-cards { grid-template-columns: 1fr; }
  .loop-grid { grid-template-columns: 1fr; }
  .kids-grid { grid-template-columns: 1fr; }
  .voxel { display: none; }
  .footer { flex-direction: column; text-align: center; }
  .chapter-rule { margin: 40px 0 36px; }
  .dg-img { width: 320px; }
  .dg-img-md { width: 320px; }
  .dg-img-sm { width: 240px; }
  .kids-card-art { width: 240px; }
  .egg-art { width: 64px; }
  .egg-strip { gap: 8px; }
  .sumi-hero { width: 192px; }
  .closing-art { width: 320px; }
  .tower-figure { width: 320px; }
  .fishhub-figure { width: 192px; }
  /* mobile cell = 64x80 art; tower has no integer fit and leaves the shelf */
  .cell { width: 80px; height: 104px; padding: 6px; }
  .cell-art { width: 64px; }
  .cell-desktop-only { display: none; }
  .shelf-row { gap: 10px; }
}

@media (max-width: 420px) {
  /* 375px wrap ≈ 311px row: 4×72 + 3×7 = 309 — fusion cell stays inside viewport */
  .cell { width: 72px; height: 96px; padding: 4px; }
  .cell-art { width: 64px; }
  .shelf-row { gap: 7px; }
  .hero-headline { font-size: var(--text-3xl); }
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
  .hero-proof-img { width: 240px; }
  body[data-lp-variant="combined"] { padding-bottom: 64px; }
  .dg-img, .dg-img-md { width: 240px; }
  .dg-img-sm { width: 160px; }
  .kids-card-art { width: 160px; }
  .tower-figure { width: 160px; }
  .closing-art { width: 160px; }
  .sumi-hero { width: 128px; }
}

/* ------------------------------------------------------------------ */
/* §G-1 Rule band — dark, closes hero night-chapter (527)               */
/* ------------------------------------------------------------------ */
.rule-band { background: var(--ink); color: #fff; padding: 36px 24px; text-align: center; }
.rule-band-eyebrow { font-size: var(--text-sm); letter-spacing: .3em; color: var(--night-text-faint); font-weight: var(--weight-bold); }
.rule-band-title { font-size: clamp(20px, 3.5vw, 30px); font-weight: 900; margin-top: 8px; }
.rule-band-sub { font-size: var(--text-base); font-weight: var(--weight-bold); color: var(--night-text-soft); margin-top: 6px; }

/* ------------------------------------------------------------------ */
/* §G-2 Stats rule — light band, borders top/bottom (527)               */
/* ------------------------------------------------------------------ */
.stats-rule { border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: #fff; padding: 20px 24px; }
.stats-rule-row { max-width: var(--content-max); margin: 0 auto; display: flex; justify-content: space-between; gap: 12px 20px; flex-wrap: wrap; font-size: var(--text-sm); font-weight: var(--weight-bold); color: var(--ink-soft); }
.stats-rule-row strong { font-size: var(--text-xl); color: var(--ink); }

/* ------------------------------------------------------------------ */
/* §G-3 Section heading with a left accent border (Collection/Economy)  */
/* ------------------------------------------------------------------ */
.accent-heading {
  text-align: left; margin: 0; max-width: none;
  border-left: 6px solid var(--accent-color, var(--indigo)); padding-left: 18px;
}
.accent-lede { text-align: left; margin: 10px 0 0 24px; max-width: 62ch; }

/* ------------------------------------------------------------------ */
/* §G-4 Curriculum grade table (527)                                    */
/* ------------------------------------------------------------------ */
.curriculum-grid { display: flex; flex-wrap: wrap; gap: 40px 56px; margin-top: 36px; align-items: flex-start; }
.curriculum-grid-text { flex: 1 1 380px; min-width: 0; }
.curriculum-grid-table { flex: 1 1 320px; max-width: 420px; }
.grade-table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); background: #fff; border: 2px solid var(--ink); }
.grade-table th, .grade-table td { padding: 9px 16px; border-top: 1px solid var(--line); text-align: left; }
.grade-table thead th { background: var(--ink); color: #fff; font-weight: var(--weight-black); border-top: none; }
.grade-table tbody tr:first-child td { border-top: none; }
.grade-table td:first-child { font-weight: var(--weight-bold); }
.grade-table .grade-free { color: var(--shu); font-weight: var(--weight-black); }
.grade-table tfoot td { border-top: 2px solid var(--ink); font-weight: 900; }

/* ------------------------------------------------------------------ */
/* §G-5 Collection (ずかん) — light card, single row shelf (527)         */
/* ------------------------------------------------------------------ */
.collection-card { background: #fff; border: 2px solid var(--ink); box-shadow: 6px 6px 0 rgba(28,39,64,.1); padding: 26px; margin-top: 36px; }
.collection-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-around; gap: 22px 12px; }
.collection-item { text-align: center; }
.collection-item img { margin: 0 auto; }
.collection-item-label { font-size: var(--text-xs); font-weight: var(--weight-black); color: var(--sub); margin-top: 6px; letter-spacing: .06em; }
.collection-item-label.is-rare { color: var(--indigo); }
.collection-item-label.is-fusion { color: var(--gold); font-weight: 900; }
.collection-item-label.is-tower { color: var(--shu); }
.collection-divider { width: 1px; align-self: stretch; background: var(--line); }
.collection-sub-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.collection-chip { display: flex; align-items: center; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 7px 14px; font-size: var(--text-sm); font-weight: var(--weight-bold); }
.collection-chip img { width: 26px; height: 26px; }
.collection-chip.is-egg { border-color: var(--gold); color: #9a6c17; background: var(--gold-soft); }
.collection-caption { text-align: center; font-size: var(--text-sm); color: var(--sub); margin-top: 14px; }

/* ------------------------------------------------------------------ */
/* §G-6 Economy / やりくり — daily price chart + tax strip (527, new)     */
/* ------------------------------------------------------------------ */
.yarikuri-grid { display: flex; flex-wrap: wrap; gap: 40px 56px; margin-top: 40px; align-items: flex-start; }
.yarikuri-chart-col { flex: 1 1 380px; min-width: 0; }
.yarikuri-blocks-col { flex: 1 1 380px; display: flex; flex-direction: column; gap: 20px; }
.chart-card { background: var(--paper); border: 2px solid var(--ink); box-shadow: 6px 6px 0 rgba(28,39,64,.12); padding: 22px 22px 16px; }
.chart-card-title { font-size: var(--text-sm); font-weight: 900; color: var(--ink); }
.chart-bars { display: flex; align-items: flex-end; gap: 8px; height: 150px; margin-top: 30px; }
.bar-col { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.bar { width: 100%; max-width: 44px; margin: 0 auto; }
.bar-callout { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; margin-bottom: 4px; }
.bar-callout-tag { background: var(--shu); color: #fff; font-size: 11px; font-weight: 900; padding: 5px 10px; white-space: nowrap; border-radius: var(--radius-sm); }
.bar-callout-stem { width: 2px; height: 52px; background: var(--shu); }
.chart-days { display: flex; gap: 8px; border-top: 1px solid var(--line); margin-top: 8px; padding-top: 6px; }
.chart-day { flex: 1; text-align: center; font-size: 11px; font-weight: var(--weight-bold); color: var(--sub); }
.chart-day.is-highlight { font-weight: 900; color: var(--shu); }
.tax-strip { display: flex; margin-top: 14px; border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; font-size: 11px; font-weight: var(--weight-bold); text-align: center; }
.tax-seg { flex: 1; padding: 8px 4px; color: var(--sub); border-left: 1px solid var(--line); }
.tax-seg:first-child { border-left: none; }
.tax-seg-rate { display: block; font-size: 14px; margin-top: 2px; }
.tax-seg.is-top .tax-seg-rate { color: var(--shu); }
.yarikuri-block { border-left: 3px solid var(--accent-color, var(--teal)); padding-left: 18px; }
.yarikuri-block-title { font-size: var(--text-lg); font-weight: 900; color: var(--ink); }
.yarikuri-block-body { font-size: var(--text-sm); color: var(--sub); line-height: var(--leading-loose); margin-top: 5px; }
.yarikuri-closer { border-top: 2px solid var(--ink); padding-top: 14px; font-size: var(--text-md); font-weight: 900; color: var(--ink); }

/* ------------------------------------------------------------------ */
/* §G-7 Comparison table — extracted from Safety (527)                  */
/* ------------------------------------------------------------------ */
.comparison-wrap { margin-top: 8px; overflow-x: auto; }

/* ------------------------------------------------------------------ */
/* §G-8 Social proof slot — intentionally display:none (527)            */
/*      復活は下の display:none を消すだけ（README 参照）                */
/* ------------------------------------------------------------------ */
.social-proof-slot { display: none; background: #fff; border-top: 1px solid var(--line); padding: 64px 24px; }
.social-proof-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-top: 28px; }
.social-proof-card { border: 2px dashed var(--line); border-radius: var(--radius-lg); padding: 20px; color: var(--sub); font-size: var(--text-sm); line-height: var(--leading-loose); }
.social-proof-quote { font-size: 24px; font-weight: 900; color: var(--line); line-height: 1; margin-bottom: 8px; }

/* ------------------------------------------------------------------ */
/* §G-9 Mobile sticky CTA — markup added 527, mobile + 40%-scroll gated */
/* ------------------------------------------------------------------ */
.lp-sticky-start.is-hidden { display: none !important; }

.figures-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 3vw, 32px); margin-top: 40px; align-items: start; }
.figures-grid > * { min-width: 0; }

@media (max-width: 900px) {
  .curriculum-grid-table { max-width: 100%; }
  .yarikuri-grid { gap: 32px; }
  .figures-grid { grid-template-columns: minmax(0, 1fr); max-width: 480px; margin-left: auto; margin-right: auto; }
}

@media (max-width: 720px) {
  .collection-card { padding: 18px; }
  .collection-row { gap: 16px 10px; }
  .stats-rule-row { justify-content: flex-start; }
  .accent-heading { padding-left: 14px; border-left-width: 5px; }
  .accent-lede { margin-left: 20px; }
}

/* ------------------------------------------------------------------ */
/* Legal documents (Privacy / Terms) — unchanged                        */
/* ------------------------------------------------------------------ */
.legal-header { background: var(--ink); color: #fff; padding: 48px 24px 40px; }
.legal-header .wrap-narrow { text-align: left; }
.legal-back { color: var(--night-text-soft); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-medium); display: inline-flex; align-items: center; gap: 6px; }
.legal-back:hover { color: #fff; }
.legal-title { font-size: var(--text-5xl); font-weight: 900; margin-top: 18px; }
.legal-updated { font-size: var(--text-sm); color: var(--night-text-faint); margin-top: 10px; }
.legal-body { padding: 56px 24px 90px; background: #fff; }
.legal-content { max-width: var(--content-narrow); margin: 0 auto; font-size: var(--text-md); line-height: var(--leading-loose); color: var(--ink-soft); }
.legal-content h2 { font-size: var(--text-2xl); font-weight: 900; color: var(--ink); margin: 44px 0 14px; }
.legal-content h2:first-child { margin-top: 0; }
.legal-content h3 { font-size: var(--text-lg); font-weight: var(--weight-black); color: var(--ink); margin: 26px 0 8px; }
.legal-content p { margin: 0 0 14px; }
.legal-content ul, .legal-content ol { margin: 0 0 14px; padding-left: 22px; }
.legal-content li { margin-bottom: 8px; }
.legal-content a { color: var(--indigo); }
.legal-content strong { color: var(--ink); }
.legal-table { width: 100%; border-collapse: collapse; margin: 0 0 20px; font-size: var(--text-base); }
.legal-table th, .legal-table td { text-align: left; padding: 10px 12px; border: 1px solid var(--line); vertical-align: top; }
.legal-table th { background: var(--paper); font-weight: var(--weight-black); color: var(--ink); }
.legal-note { background: var(--indigo-soft); border-radius: var(--radius-lg); padding: 16px 20px; font-size: var(--text-base); color: var(--ink-soft); margin: 0 0 20px; }