/* =============================================================================
   cRawl 公式サイト — Design Protocol v8.1 / Screens v9 の写し
   -----------------------------------------------------------------------------
   正本は design_handoff_crawl_v9/tokens.css（アプリ側の正本は RetroV9.swift /
   RetroV7.swift / RetroV5.swift）。**ここには新しい色・新しい濃さを発明しない**。

   色は 4 つだけ（5 つ目を足したら規約違反）
     --c-terracotta #BC5B33 … 見出し・MONO ラベル・罫・帯・アイコン（読む本文には使わない）
     --c-ink        #33465A … 読む文字すべて・押せるもの（ボタン枠・リンク）
     --c-cream      #F4E9D2 … 地
     --c-paper      #F8F0DE … 起きている面（ヘッダ／フッタ帯）
   濃淡は不透明度の梯子（--ink-85 等）だけで作る。

   書体（README §1）
     League Spartan 800 … 画面タイトル。**EN CAPS のみ・和文には使わない**
     IBM Plex Sans JP   … 本文（和文・欧文とも）
     IBM Plex Mono      … MONO ラベル・数値・日付（12px 以上・CAPS）

   構造の規律（README 0-4 / 0-5）
     枠が付くもの＝押せるもの（ボタンだけ）。押せない情報に枠や板を付けない。
     区切りは 1px の罫と余白。塗りは無し。影は使わない。スピナーは使わない。
     アイコンに絵文字を使わない（このサイトはアイコンそのものを置いていない）。
   ============================================================================= */

:root {
  /* 4 色 */
  --c-terracotta: #BC5B33;
  --c-ink: #33465A;
  --c-cream: #F4E9D2;
  --c-paper: #F8F0DE;

  /* 墨藍の梯子（読む文字） */
  --ink-100: rgba(51, 70, 90, 1);
  --ink-90:  rgba(51, 70, 90, 0.90);
  --ink-85:  rgba(51, 70, 90, 0.85);
  --ink-45:  rgba(51, 70, 90, 0.45);
  --ink-face: rgba(51, 70, 90, 0.09);

  /* 陶土の梯子（構造） */
  --ter-70: rgba(188, 91, 51, 0.70);
  --ter-45: rgba(188, 91, 51, 0.45);
  --ter-25: rgba(188, 91, 51, 0.25);
  --ter-20: rgba(188, 91, 51, 0.20);
  --ter-09: rgba(188, 91, 51, 0.09);

  /* 役割（画面ではこちらを使う・生の梯子を直接引かない） */
  --text-primary: var(--ink-100);
  --text-secondary: var(--ink-85);
  --text-label: var(--c-terracotta);
  --surface-ground: var(--c-cream);
  --surface-raised: var(--c-paper);
  --surface-pressed: var(--ink-face);
  --border-interactive: var(--c-ink);
  --border-divider: var(--ter-20);

  /* 書体 */
  --font-ui: "IBM Plex Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN",
             system-ui, -apple-system, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-display: "League Spartan", "IBM Plex Sans JP", "Hiragino Sans", sans-serif;

  /* 間・角・線 */
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-6: 24px; --s-8: 32px; --s-12: 48px;
  --screen-gutter: 22px;
  --r-tile: 4px; --r-btn: 6px; --r-chip: 16px; --r-pill: 20px;
  --bw: 1.5px; --rule: 1px;

  /* 動き（120 / 200 / 320ms・ease-out のみ） */
  --t-press: 120ms; --t-appear: 200ms; --t-nav: 320ms;
  --ease: cubic-bezier(0, 0, 0.2, 1);

  --maxw: 960px;
  color-scheme: light;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--surface-ground);
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.8;
  font-weight: 400;
  font-feature-settings: "palt" 1;
}

/* --- 書体ユーティリティ ------------------------------------------------- */
/* DISPLAY は EN CAPS 専用（和文を入れない）。 */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1.04;
}
/* MONO ラベル（12px 以上・CAPS・陶土）。和文の文章には使わない。 */
.meta {
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: var(--text-label);
}

a { color: var(--c-ink); text-underline-offset: 3px; }
a:hover { text-decoration: none; }
:focus-visible { outline: 2px solid var(--c-ink); outline-offset: 3px; border-radius: var(--r-btn); }

/* --- ヘッダ（紙帯） ----------------------------------------------------- */
.siteheader {
  background: var(--surface-raised);
  border-bottom: var(--rule) solid var(--ter-25);
}
.siteheader .inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: var(--s-3) var(--screen-gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-6);
}
.wordmark {
  /* ブランドの文字ロゴ（League Spartan 800・綴りはブランドのまま） */
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.01em;
  color: var(--c-terracotta);
  text-decoration: none;
  line-height: 1;
}
.sitenav {
  margin-left: auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-4);
}
/* ナビは和文なので MONO を当てない（README 0-3 / 書体の規律）。 */
.sitenav a {
  font-size: 13.5px;
  color: var(--text-secondary);
  text-decoration: none;
  padding: 6px 0;
  line-height: 1.4;
}
.sitenav a:hover { color: var(--c-ink); text-decoration: underline; }
.sitenav a[aria-current="page"] {
  color: var(--c-terracotta);
  border-bottom: var(--bw) solid var(--c-terracotta);
}

/* --- 本文レイアウト ----------------------------------------------------- */
main { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--screen-gutter) 72px; }

.hero { padding: 56px 0 var(--s-8); border-bottom: var(--rule) solid var(--ter-25); }
.hero h1 { margin: var(--s-2) 0 var(--s-4); font-size: clamp(40px, 10vw, 84px); color: var(--c-terracotta); }
.hero .lead { font-size: clamp(17px, 2.4vw, 20px); font-weight: 600; max-width: 34em; margin: 0 0 var(--s-2); }
.hero p.sub { max-width: 36em; color: var(--text-secondary); margin: 0 0 var(--s-6); }
.eyebrow { display: block; margin-bottom: var(--s-1); }

section { padding: var(--s-8) 0 var(--s-2); }
section + section { border-top: var(--rule) solid var(--border-divider); }

h2 {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  margin: var(--s-1) 0 var(--s-4);
  line-height: 1.55;
}
h2 .display { display: block; font-size: 2rem; color: var(--c-terracotta); margin-bottom: var(--s-1); }
h3 { font-size: 1.02rem; font-weight: 600; margin: var(--s-6) 0 var(--s-2); }

p { margin: 0 0 var(--s-3); }

/* --- カード（枠なし・板なし。罫と余白だけで割る） ----------------------- */
.cards {
  display: grid;
  gap: var(--s-6) var(--s-8);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin: var(--s-6) 0 var(--s-2);
}
.card { padding: 0; }
.card h3 { margin: var(--s-1) 0 var(--s-2); font-size: 1.02rem; }
.card p { margin: 0; font-size: 0.95rem; color: var(--text-secondary); }
.card .num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--text-label);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 12px;
}

/* --- ボタン（唯一の「枠が付くもの」・塗らない） ------------------------- */
.btnrow { display: flex; flex-wrap: wrap; gap: var(--s-3); margin: var(--s-6) 0 0; }
.btn {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 20px;
  border-radius: var(--r-btn);
  border: var(--bw) solid var(--border-interactive);
  background: transparent;
  color: var(--c-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  transition: background var(--t-press) var(--ease);
}
.btn:hover { background: var(--surface-pressed); }
/* ghost / red は旧クラス名の受け皿（v9 ではボタンは全て同じアウトライン）。 */
.btn.ghost, .btn.red { border-color: var(--border-interactive); color: var(--c-ink); }

/* --- FAQ（枠なし・罫で割る） -------------------------------------------- */
details.qa {
  padding: var(--s-4) 0;
  border-bottom: var(--rule) solid var(--border-divider);
}
details.qa > summary {
  cursor: pointer;
  font-weight: 600;
  list-style: none;
  display: flex;
  gap: var(--s-3);
  align-items: baseline;
  color: var(--text-primary);
}
details.qa > summary::-webkit-details-marker { display: none; }
details.qa > summary::before {
  content: "Q";
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--text-label);
  font-size: 12px;
  letter-spacing: 0.08em;
  flex: none;
}
details.qa[open] > summary { color: var(--c-terracotta); }
details.qa .a { margin: var(--s-3) 0 0 calc(12px + var(--s-3)); font-size: 0.95rem; color: var(--text-secondary); }
details.qa .a p:last-child { margin-bottom: 0; }

/* --- 定義リスト（運営者情報・特商法）------------------------------------ */
.deflist { margin: var(--s-6) 0; overflow-x: auto; }
.deflist table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.deflist th, .deflist td {
  text-align: left;
  vertical-align: top;
  padding: var(--s-3) 0;
  border-bottom: var(--rule) solid var(--border-divider);
}
.deflist tr:last-child th, .deflist tr:last-child td { border-bottom: 0; }
.deflist th {
  width: 34%;
  font-weight: 600;
  color: var(--c-terracotta);
  white-space: nowrap;
  padding-right: var(--s-6);
}
.deflist td { color: var(--text-secondary); }
/* 「準備中」等の小札（塗らない・MONO ＋ 陶土の下罫だけ） */
.deflist td .todo {
  display: inline-block;
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: var(--text-label);
  border-bottom: var(--bw) solid var(--ter-45);
}

/* --- 法務文書（プライバシー・規約・特商法）------------------------------ */
/* ⚠️ 本文は 1 字も変えない。ここで変えるのは意匠だけ。 */
.doc { max-width: 46em; }
.doc .updated { color: var(--text-label); }
.doc h2 {
  font-size: 1.1rem;
  color: var(--c-terracotta);
  border-top: var(--rule) solid var(--border-divider);
  padding-top: var(--s-6);
  margin-top: var(--s-8);
}
.doc h3 { font-size: 1rem; color: var(--text-primary); }
.doc p, .doc li { color: var(--text-secondary); }
.doc ol, .doc ul { padding-left: 1.3em; }
.doc li { margin: var(--s-1) 0; }
.doc .callout,
.pending-note {
  border-left: 2px solid var(--c-terracotta);
  padding: var(--s-1) 0 var(--s-1) var(--s-4);
  margin: var(--s-4) 0;
  font-size: 0.95rem;
  color: var(--text-secondary);
}
.doc .callout strong { color: var(--c-ink); }
.toc {
  border-left: 2px solid var(--ter-45);
  padding: var(--s-1) 0 var(--s-1) var(--s-4);
  margin: var(--s-6) 0 var(--s-2);
}
.toc ol { margin: var(--s-2) 0 0; padding-left: 1.3em; }
.toc li { margin: 2px 0; font-size: 0.93rem; }

/* --- フッタ（紙帯） ----------------------------------------------------- */
.sitefooter {
  background: var(--surface-raised);
  border-top: var(--rule) solid var(--ter-25);
  color: var(--text-secondary);
  margin-top: var(--s-12);
  padding: var(--s-8) var(--screen-gutter);
}
.sitefooter .inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4) var(--s-12);
}
.sitefooter a { color: var(--text-secondary); }
.sitefooter nav { display: flex; flex-direction: column; gap: var(--s-1); }
.sitefooter nav a { font-size: 13.5px; text-decoration: none; }
.sitefooter nav a:hover { color: var(--c-ink); text-decoration: underline; }
.sitefooter .copy {
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: var(--text-label);
  margin-left: auto;
  align-self: flex-end;
}

.skip { position: absolute; left: -9999px; }
.skip:focus {
  left: 8px; top: 8px; z-index: 50; background: var(--surface-raised); color: var(--c-ink);
  padding: 10px 16px; border-radius: var(--r-btn); border: var(--bw) solid var(--c-ink);
}

/* 小さな注記（和文の文章。MONO は使わない）。 */
.note {
  display: inline-block;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text-secondary);
}

/* --- 猫の線画（アプリの空状態と同じ絵）----------------------------------- */
/* 正本は Codex/onboarding-assets-v9/states/STATE-0x.png（アプリの空状態と同一の線画）。
   v9 の規律どおり **枠なし・板なし・影なし**。地（cream）に直置きし、余白だけで置く。
   絵は墨藍の線＋陶土の差し色だけなので 4 色の外へ出ない。
   透明の余白は書き出し時に切り落としてあるので、間隔はここだけで決まる。 */
.illus { margin: var(--s-8) 0 var(--s-6); }
.illus img {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  border: 0;
}

@media (max-width: 620px) {
  .siteheader .inner { padding: var(--s-3) var(--s-4); }
  .sitenav { margin-left: 0; width: 100%; gap: 0 var(--s-4); }
  main { padding: 0 var(--s-4) 56px; }
  .hero { padding: var(--s-8) 0 var(--s-6); }
  .deflist th { width: auto; white-space: normal; padding-right: 0; }
  .deflist table, .deflist tbody, .deflist tr, .deflist th, .deflist td { display: block; }
  .deflist th { border-bottom: 0; padding-bottom: 0; }
  .sitefooter { padding: var(--s-6) var(--s-4); }
  .sitefooter .copy { margin-left: 0; }
}

/* =============================================================================
   LP（/about-crawl）— SAVE → LOG → SHARE の一直線
   ============================================================================= */

.hero-lp { border-bottom: var(--rule) solid var(--ter-25); padding: 56px 0 var(--s-8); }
.hero-lp h1 { margin: var(--s-2) 0 var(--s-4); }
.hero-lp h1 .display {
  display: block;
  color: var(--c-terracotta);
  font-size: clamp(38px, 8.4vw, 78px);
}
.hero-lp h1 .ja {
  display: block;
  margin-top: var(--s-4);
  color: var(--text-primary);
  font-weight: 600;
  font-size: clamp(19px, 4vw, 28px);
  line-height: 1.5;
}
.hero-lp .lead { font-weight: 600; font-size: clamp(17px, 2.6vw, 21px); max-width: 32em; margin: 0 0 var(--s-2); }
.hero-lp .sub { max-width: 34em; margin: 0; color: var(--text-secondary); }
.hero-lp .btnrow { margin-top: var(--s-6); }

.story { padding: var(--s-12) 0 var(--s-3); }
.story .kicker {
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: var(--text-label);
  display: block;
}
.story h2 { margin: var(--s-1) 0 var(--s-3); font-size: clamp(18px, 3.2vw, 24px); }
.story h2 .display { display: block; font-size: clamp(32px, 7vw, 54px); margin-bottom: var(--s-2); }
.story .body { max-width: 34em; }
.story .body p { color: var(--text-secondary); }
.story .body p:last-child { margin-bottom: 0; }
.story .cards { margin-top: var(--s-6); }

/* --- CORE（SAVE → LOG → SHARE） ----------------------------------------- */
.core {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: var(--s-4);
  margin: var(--s-6) 0 0;
}
.core-step {
  display: block;
  text-decoration: none;
  color: var(--text-primary);
  min-width: 0;
  border-top: 2px solid var(--ter-25);
  padding-top: var(--s-3);
  transition: border-color var(--t-press) var(--ease);
}
a.core-step:hover { border-top-color: var(--c-terracotta); }
.core-step .num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-label);
  font-size: 12px;
}
.core-step .name {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  font-size: clamp(26px, 4.6vw, 40px);
  line-height: 1.04;
  color: var(--c-terracotta);
  margin: 2px 0 var(--s-2);
}
.core-step p { margin: 0; font-size: 0.9rem; line-height: 1.7; color: var(--text-secondary); }
.core-arrow { align-self: center; width: 20px; height: 1px; background: var(--ter-45); position: relative; }
.core-arrow::after {
  content: ""; position: absolute; right: 0; top: -4px;
  border: 4px solid transparent; border-left: 7px solid var(--ter-45); border-right: 0;
}
@media (max-width: 660px) {
  .core { grid-template-columns: 1fr; gap: var(--s-6); }
  .core-arrow { display: none; }
}

/* --- 最終 CTA（帯を塗らない・罫で区切る） ------------------------------- */
.cta-band {
  border-top: var(--rule) solid var(--ter-25);
  padding: var(--s-12) 0 var(--s-2);
  margin: var(--s-12) 0 0;
}
.cta-band h2 { margin: 0 0 var(--s-3); font-size: clamp(18px, 3.2vw, 24px); }
.cta-band h2 .display { display: block; color: var(--c-terracotta); font-size: clamp(30px, 6.6vw, 52px); margin-bottom: var(--s-2); }
.cta-band p { max-width: 32em; margin: 0 0 var(--s-2); color: var(--text-secondary); }

/* --- スクロール出現（200ms・ease-out・reduce-motion 尊重） -------------- */
.reveal { opacity: 0; transform: translateY(10px); }
.reveal.in { opacity: 1; transform: none; transition: opacity var(--t-appear) var(--ease), transform var(--t-appear) var(--ease); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; }
  .reveal.in { transition: none; }
  html { scroll-behavior: auto; }
}
html:not(.js) .reveal { opacity: 1; transform: none; }

/* =============================================================================
   トップページ（/）— HERO だけの 1 画面
   ============================================================================= */

.splash-page main.splash { max-width: none; padding: 0; }
.splash .stage {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(40px, 7vh, 88px) var(--screen-gutter) var(--s-12);
  min-height: calc(100svh - 58px - 44px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media (max-width: 620px) { .splash .stage { padding-left: var(--s-4); padding-right: var(--s-4); } }

.splash .eyebrow { margin-bottom: var(--s-3); }

.splash .lines { margin: 0 0 var(--s-6); }
.splash .line {
  display: block;
  width: fit-content;
  text-decoration: none;
  position: relative;
  padding-right: 0.4em;
}
.splash .line .display {
  display: block;
  color: var(--c-terracotta);
  font-size: clamp(40px, 8.8vw, 96px);
  transition: transform var(--t-appear) var(--ease), color var(--t-appear) var(--ease);
}
.splash .line .tag {
  position: absolute;
  left: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  white-space: nowrap;
  opacity: 0;
  transition: opacity var(--t-appear) var(--ease), transform var(--t-appear) var(--ease);
}
.splash .line:hover .display,
.splash .line:focus-visible .display { color: var(--c-ink); transform: translateX(8px); }
.splash .line:hover .tag,
.splash .line:focus-visible .tag { opacity: 1; transform: translateY(-50%) translateX(0); }
@media (max-width: 760px) { .splash .line .tag { display: none; } }

.splash .ja-line {
  margin: 0 0 var(--s-3);
  font-weight: 600;
  font-size: clamp(19px, 4.2vw, 30px);
  line-height: 1.6;
  color: var(--text-primary);
}
.splash .ja-line span {
  padding: 0 0.08em;
  transition: color var(--t-appear) var(--ease);
}
.splash .ja-line span.hot { color: var(--c-terracotta); }

.splash .lead { font-weight: 600; font-size: clamp(17px, 2.6vw, 21px); margin: 0 0 var(--s-2); }
.splash .sub { margin: 0; color: var(--text-secondary); }
.splash .btnrow { margin-top: var(--s-8); }

/* 下端の MONO 帯（静止・流さない＝v9 の動きは 120/200/320ms だけ） */
.splash .strip {
  background: var(--surface-raised);
  border-top: var(--rule) solid var(--ter-25);
  padding: var(--s-3) var(--screen-gutter);
  text-align: center;
  overflow: hidden;
}
.splash .strip span {
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: var(--text-label);
  white-space: nowrap;
}

/* 登場のスタッガー（1 回だけ・200ms・reduce-motion では出さない） */
@media (prefers-reduced-motion: no-preference) {
  html.js .splash .s-in { animation: splash-in var(--t-appear) var(--ease) both; }
  html.js .splash .s-d0 { animation-delay: 0.04s; }
  html.js .splash .s-d1 { animation-delay: 0.10s; }
  html.js .splash .s-d2 { animation-delay: 0.16s; }
  html.js .splash .s-d3 { animation-delay: 0.22s; }
  html.js .splash .s-d4 { animation-delay: 0.30s; }
  html.js .splash .s-d5 { animation-delay: 0.36s; }
  html.js .splash .s-d6 { animation-delay: 0.44s; }
}
@keyframes splash-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* About ページの見出し */
.hero-about h1 .display { display: block; color: var(--c-terracotta); font-size: clamp(38px, 8.4vw, 78px); }
.hero-about h1 .ja { display: block; margin-top: var(--s-3); color: var(--text-primary); font-weight: 600; font-size: clamp(18px, 3.8vw, 26px); line-height: 1.5; }

/* =============================================================================
   共有リンクの着地ページ（/s ・ /join ・ /u）
   ここを見る人はほぼ全員がアプリ未所持（所持端末では Universal Link が発火して
   アプリが直接開く）。主導線は App Store・副導線が「アプリで開く」。
   ============================================================================= */

.landing-page main.landing { padding-bottom: 56px; }

.landing .hero-landing { padding: var(--s-12) 0 var(--s-8); border-bottom: var(--rule) solid var(--ter-25); }
.landing .hero-landing h1 { margin: var(--s-2) 0 0; }
.landing .hero-landing h1 .display {
  display: block;
  color: var(--c-terracotta);
  font-size: clamp(36px, 7.8vw, 72px);
}
.landing .hero-landing h1 .ja {
  display: block;
  margin-top: var(--s-3);
  color: var(--text-primary);
  font-weight: 600;
  font-size: clamp(18px, 3.6vw, 25px);
  line-height: 1.5;
}

/* 共有された中身のプレビュー（値は JS が textContent で入れる・枠は付けない） */
.landing .preview {
  border-left: 2px solid var(--ter-45);
  padding: var(--s-1) 0 var(--s-1) var(--s-4);
  margin: var(--s-6) 0 0;
  max-width: 34em;
}
.landing .preview .num {
  display: block;
  font-family: var(--font-mono);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 12px;
  color: var(--text-label);
}
.landing .preview .title {
  margin: var(--s-1) 0 0;
  font-weight: 600;
  font-size: clamp(17px, 3vw, 21px);
  line-height: 1.5;
  overflow-wrap: anywhere;
}
.landing .preview .sub {
  margin: var(--s-1) 0 0;
  color: var(--text-secondary);
  font-size: 0.92rem;
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.landing .preview[hidden], .landing .preview .sub[hidden] { display: none; }

.landing .btnrow { margin-top: var(--s-6); }
.landing .btnrow .btn[hidden] { display: none; }
.landing .hero-landing .note { display: block; margin: var(--s-4) 0 0; max-width: 34em; }

.landing .steps { padding: var(--s-8) 0 0; }
.landing .steps h2 { margin: 0 0 var(--s-1); font-size: clamp(17px, 3vw, 22px); }
.landing .steps h2 .display { display: block; font-size: clamp(28px, 6vw, 46px); color: var(--c-terracotta); margin-bottom: var(--s-2); }
.landing .steps .body { max-width: 34em; }