/* ═══════════════════════════════════════════════════════════════
   DropRefund Site UI System v1
   Static HTML + CSS. No framework, no build step, no dependencies.

   Design direction: calm consumer-fintech. Trust from clarity and
   specificity, never from fake scale. The palette evolves the existing
   DropRefund blues rather than discarding them, so the marketing site and
   the SEO surface read as one house.

   Structure: tokens → primitives → layout → components → pages → responsive.
   ═══════════════════════════════════════════════════════════════ */

/* ── tokens ──────────────────────────────────────────────────── */
:root{
  /* Brand ramp. --brand-600 is the existing production blue; the ramp is
     built around it so nothing already shipped has to shift. */
  --brand-900:#0E2338; --brand-800:#16354F; --brand-700:#1E4467;
  --brand-600:#2B4B6F; --brand-500:#366196; --brand-400:#5384BA;
  --brand-300:#8FB3D6; --brand-200:#C3D8EC; --brand-100:#E7EEF6; --brand-50:#F3F7FC;
  /* Secondary: blue-indigo, used sparingly for accents and diagram strokes. */
  --indigo-600:#3B4E9E; --indigo-500:#4C63C0; --indigo-100:#E8EBF9;

  --good-700:#146A45; --good:#1C8657; --good-100:#E1F1E9;
  --warn-700:#8E5B12; --warn:#B4741A; --warn-100:#F8EEDA;
  --danger:#9E3232; --danger-100:#F7E6E6;

  --ink:#12161C; --ink-2:#48525F; --ink-3:#77828F; --ink-4:#9AA4B0;
  --line:#DFE5EC; --line-2:#EDF1F6;
  --bg:#FFFFFF; --bg-tint:#F5F8FB; --bg-deep:#0E2338;
  --surface:#FFFFFF; --surface-2:#F5F8FB; --surface-3:#EDF3F9;

  --sans:'Inter var','Inter',system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,'SF Mono','Cascadia Code',Menlo,Consolas,monospace;

  /* spacing scale */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px;
  --s7:48px; --s8:64px; --s9:80px; --s10:112px;

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:22px; --r-pill:999px;

  /* Shadows stay near-invisible: depth comes from tint and border, not blur. */
  --sh-1:0 1px 2px rgba(16,35,56,.05);
  --sh-2:0 2px 6px rgba(16,35,56,.06), 0 1px 2px rgba(16,35,56,.04);
  --sh-3:0 10px 30px rgba(16,35,56,.08), 0 2px 8px rgba(16,35,56,.04);

  --shell:1200px; --measure:720px; --wide:1040px;
}
/* V1 is light-first and only the light theme has been designed and reviewed.
   An OS dark preference previously flipped a subset of tokens, which produced a
   mixed theme nobody had signed off: navy footer over dark surfaces, amber and
   green state tints against the wrong grounds. Until a dark theme is actually
   designed, theme behaviour is deterministic — the approved light rendering is
   the only rendering. `color-scheme: light` also keeps UA-painted parts (form
   controls, scrollbars, the canvas behind the page) on the light side, so the
   deep-navy footer and .section.deep stay the only dark surfaces, by design. */
:root{color-scheme:light}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}
  *{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;
  font-feature-settings:'cv02','cv03','cv04','ss01'}

/* ── typography scale ────────────────────────────────────────── */
.display{font-size:clamp(34px,4.6vw,52px);line-height:1.06;letter-spacing:-.03em;
  font-weight:800;margin:0 0 var(--s4);text-wrap:balance}
h1{font-size:clamp(30px,4vw,44px);line-height:1.1;letter-spacing:-.028em;font-weight:800;margin:0 0 var(--s4);text-wrap:balance}
h2{font-size:clamp(24px,2.9vw,32px);line-height:1.18;letter-spacing:-.022em;font-weight:750;margin:0 0 var(--s3);text-wrap:balance}
h3{font-size:clamp(18px,2vw,21px);line-height:1.28;letter-spacing:-.012em;font-weight:700;margin:0 0 var(--s2)}
h4{font-size:16px;line-height:1.35;font-weight:700;margin:0 0 var(--s2)}
p{margin:0 0 var(--s4)}
.lead{font-size:clamp(17px,1.5vw,19.5px);line-height:1.55;color:var(--ink-2);margin:0 0 var(--s5)}
.eyebrow{display:inline-flex;align-items:center;gap:var(--s2);font-family:var(--mono);
  font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;color:var(--brand-500);
  margin:0 0 10px}
/* An eyebrow labels the heading under it — they are one unit, not two blocks. */
.eyebrow + h1,.eyebrow + h2,.eyebrow + h3,
.eyebrow + h2:not(:first-child){margin-top:0}
.small{font-size:14px;line-height:1.55;color:var(--ink-3)}
.meta{font-family:var(--mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
a{color:inherit}
.link{color:var(--brand-500);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;font-weight:550}
.link:hover{text-decoration-thickness:2px}
strong,b{font-weight:660;color:var(--ink)}
code{font-family:var(--mono);font-size:.9em;background:var(--surface-3);padding:1px 5px;border-radius:5px}
:focus-visible{outline:2px solid var(--brand-500);outline-offset:3px;border-radius:6px}

/* ── layout ──────────────────────────────────────────────────── */
.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--s5)}
.measure{max-width:var(--measure)}
/* `.shell.measure` on one element collapsed the shell to the reading measure and
   then centred it, indenting those blocks 240px from every heading around them.
   Keep the shell's own width and constrain the reading measure inside it, so a
   page has one left edge from the H1 to the last paragraph. */
.shell.measure{max-width:var(--shell)}
.shell.measure > *{max-width:var(--measure)}
.shell.measure > .wide{max-width:var(--wide)}
.wide{max-width:var(--wide)}
.section{padding:var(--s9) 0}
.section.tight{padding:var(--s8) 0}
.section.tint{background:var(--bg-tint);border-top:1px solid var(--line-2);border-bottom:1px solid var(--line-2)}
.section.deep{background:var(--bg-deep);color:#EAF1F8}
.section.deep h2,.section.deep h3{color:#fff}
.section.deep .lead,.section.deep p{color:#B3C6D8}
.section-head{max-width:640px;margin:0 0 var(--s7)}
.section-head.center{margin-left:auto;margin-right:auto;text-align:center}
.section-head p{margin-bottom:0}
.grid{display:grid;gap:var(--s5)}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.rule{border:0;border-top:1px solid var(--line);margin:var(--s7) 0}

/* ── surfaces: level 0 plain, 1 grouped, 2 card, 3 demo ──────── */
.surf-1{background:var(--surface-2);border-radius:var(--r-lg);padding:var(--s5)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s5);box-shadow:var(--sh-1)}
.demo{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:var(--s5);box-shadow:var(--sh-3)}

/* ── buttons ─────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font:inherit;font-size:16px;font-weight:640;line-height:1;padding:15px 22px;
  min-height:50px;border:1px solid transparent;border-radius:var(--r-md);
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .14s ease,border-color .14s ease,color .14s ease,transform .14s ease}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand-600);color:#fff;box-shadow:var(--sh-2)}
.btn-primary:hover{background:var(--brand-700)}
.btn-secondary{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-secondary:hover{border-color:var(--brand-400);color:var(--brand-600)}
.btn-ghost{background:transparent;color:var(--brand-500);padding-left:var(--s2);padding-right:var(--s2)}
.btn-ghost:hover{color:var(--brand-700)}
.btn-lg{font-size:17px;padding:17px 28px;min-height:56px}
.btn-block{width:100%}
.btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}
.btn .ico{flex:0 0 auto}
.section.deep .btn-secondary{background:transparent;color:#EAF1F8;border-color:rgba(255,255,255,.28)}
.section.deep .btn-secondary:hover{border-color:rgba(255,255,255,.55);color:#fff}

/* ── badges / status ─────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:640;
  letter-spacing:.01em;padding:5px 10px;border-radius:var(--r-pill);white-space:nowrap}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex:0 0 auto}
.badge-open{background:var(--good-100);color:var(--good-700)}
.badge-soon{background:var(--warn-100);color:var(--warn-700)}
.badge-info{background:var(--brand-100);color:var(--brand-700)}
.badge-off{background:var(--surface-3);color:var(--ink-3)}
.badge-live .dot{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

/* ── site header ─────────────────────────────────────────────── */
.site-header{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(160%) blur(10px);border-bottom:1px solid transparent;
  transition:border-color .18s ease,box-shadow .18s ease}
.site-header.scrolled{border-bottom-color:var(--line);box-shadow:var(--sh-1)}
.site-header .inner{display:flex;align-items:center;gap:var(--s5);height:68px}
/* Brand lockup. The approved mark ships with its own gradient rounded-square
   tile, so it is never wrapped in a second pill or circle — that would read as a
   double container. Sizing is CSS only; the bitmap is never edited for layout.
   The artwork sits ~2.9% above its own canvas centre, so the mark is nudged down
   a fraction to sit optically level with the wordmark's x-height. */
.brand-link{display:inline-flex;align-items:center;gap:10px;text-decoration:none;flex:0 0 auto}
.brand-mark{width:30px;height:30px;display:block;flex:0 0 auto;transform:translateY(.5px)}
.brand-mark.sm{width:28px;height:28px}
.brand-link .wordmark{font-size:17.5px;font-weight:730;letter-spacing:-.021em;color:var(--ink);line-height:1}
@media(max-width:640px){
  .brand-mark{width:28px;height:28px}
  .brand-link .wordmark{font-size:17px}
}
.nav{display:flex;align-items:center;gap:var(--s2);margin-left:var(--s5)}
.nav a{padding:9px 12px;border-radius:var(--r-sm);font-size:15px;font-weight:550;
  color:var(--ink-2);text-decoration:none;transition:color .14s,background .14s}
.nav a:hover{color:var(--ink);background:var(--surface-2)}
.nav a[aria-current=page]{color:var(--brand-600);font-weight:640}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:var(--s3)}
.nav-toggle{display:none;width:44px;height:44px;align-items:center;justify-content:center;
  background:transparent;border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer;color:var(--ink)}
.mobile-nav{display:none;border-top:1px solid var(--line);background:var(--bg);padding:var(--s3) 0 var(--s5)}
.mobile-nav.open{display:block}
.mobile-nav a{display:block;padding:13px 0;font-size:16.5px;font-weight:600;
  color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2)}
.mobile-nav .btn{margin-top:var(--s4)}
@media(max-width:880px){
  .nav{display:none}
  .header-actions .btn-desktop{display:none}
  .nav-toggle{display:inline-flex}
  .site-header .inner{height:60px}
}

/* ── hero ────────────────────────────────────────────────────── */
.hero{padding:var(--s8) 0 var(--s9);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-30% 40% 40% -20%;pointer-events:none;
  background:radial-gradient(60% 60% at 50% 50%,var(--brand-100),transparent 70%);opacity:.75}
.hero .inner{position:relative;display:grid;gap:var(--s7);align-items:center}
@media(min-width:960px){.hero .inner{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:var(--s8)}}
.hero h1{margin-bottom:var(--s4)}
.hero .lead{max-width:34em}
.hero-actions{display:flex;flex-wrap:wrap;gap:var(--s3);margin:0 0 var(--s5)}
.trust-strip{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}
.trust-strip li{display:flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-2);list-style:none}
.trust-strip{margin:0;padding-left:0}
.trust-strip .ico{color:var(--brand-500);flex:0 0 auto}

/* ── price movement demo (hero visual) ───────────────────────── */
.pm{padding:var(--s5);border-radius:var(--r-xl)}
.pm-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin:0 0 var(--s4)}
.pm-retailer{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;font-weight:640;color:var(--ink-2)}
.pm-retailer .chip{width:26px;height:26px;border-radius:7px;background:var(--brand-100);
  color:var(--brand-600);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800}
.pm-item{font-size:15.5px;font-weight:660;margin:0 0 var(--s4)}
.pm-row{display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
  padding:11px 0;border-bottom:1px solid var(--line-2)}
.pm-row:last-of-type{border-bottom:0}
.pm-row .k{font-size:13.5px;color:var(--ink-3)}
.pm-row .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:15px;font-weight:640}
.pm-row .v.down{color:var(--good)}
.pm-chart{margin:var(--s3) 0;height:78px}
.pm-chart svg{width:100%;height:100%;display:block;overflow:visible}
.pm-delta{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  background:var(--good-100);border-radius:var(--r-md);padding:13px 15px;margin:var(--s4) 0 var(--s3)}
.pm-delta .k{font-size:13.5px;color:var(--good-700);font-weight:600}
.pm-delta .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:20px;font-weight:750;color:var(--good-700)}
.pm-window{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);font-size:13.5px;color:var(--ink-2)}
.pm-note{font-size:12px;color:var(--ink-4);margin:var(--s4) 0 0;padding-top:var(--s3);border-top:1px solid var(--line-2)}

/* ── generic flow / steps ────────────────────────────────────── */
.flow{display:grid;gap:var(--s5);counter-reset:f}
@media(min-width:820px){.flow.f3{grid-template-columns:repeat(3,1fr)}.flow.f4{grid-template-columns:repeat(4,1fr)}}
.flow .step{counter-increment:f;position:relative;padding-top:var(--s7)}
.flow .step .n{position:absolute;top:0;left:0;width:34px;height:34px;border-radius:10px;
  background:var(--brand-600);color:#fff;font-family:var(--mono);font-size:14px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.flow .step.gated .n{background:var(--surface-3);color:var(--ink-3);border:1px dashed var(--line)}
@media(min-width:820px){
  .flow .step:not(:last-child)::after{content:"";position:absolute;top:16px;left:46px;right:-18px;
    height:2px;background:var(--line)}
}
.flow .step h3{margin-bottom:6px}
.flow .step p{font-size:15px;color:var(--ink-2);margin:0}
.flow .step .badge{margin-top:var(--s3)}

/* ── timeline (policy window) ────────────────────────────────── */
.timeline{margin:var(--s5) 0}
.timeline .track{position:relative;height:4px;background:var(--line);border-radius:var(--r-pill);margin:38px 0 var(--s5)}
.timeline .fill{position:absolute;left:0;top:0;bottom:0;background:var(--brand-500);border-radius:var(--r-pill)}
.timeline .pt{position:absolute;top:50%;transform:translate(-50%,-50%);width:13px;height:13px;
  border-radius:50%;background:#fff;border:3px solid var(--brand-500)}
.timeline .pt.end{border-color:var(--warn)}
.timeline .pt .lbl{position:absolute;left:50%;transform:translateX(-50%);bottom:22px;white-space:nowrap;
  font-size:12px;font-weight:640;color:var(--ink-2)}
.timeline .pt .sub{position:absolute;left:50%;transform:translateX(-50%);top:20px;white-space:nowrap;
  font-family:var(--mono);font-size:11px;color:var(--ink-3)}

/* At narrow widths the horizontal timeline cannot work: the end labels are
   centred on their points, so the first and last ones hang off both edges of a
   390px viewport. Measured — SPAN.lbl breached the viewport by design, not by
   accident. Below 640px it becomes a vertical list instead of a squeezed rail. */
@media(max-width:640px){
  .timeline .track{height:auto;background:none;border-radius:0;margin:var(--s4) 0 var(--s5);
    display:grid;gap:2px}
  .timeline .fill{display:none}
  .timeline .pt{position:static;transform:none;width:auto;height:auto;border:0;border-radius:0;
    display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3);
    padding:11px 0 11px 15px;border-left:2px solid var(--brand-500)}
  .timeline .pt.end{border-left-color:var(--warn)}
  .timeline .pt .lbl,.timeline .pt .sub{position:static;transform:none;bottom:auto;top:auto;left:auto}
  .timeline .pt .lbl{font-size:15px}
  .timeline .pt .sub{font-size:12px}
}

/* ── exact match visual ──────────────────────────────────────── */
.match{display:grid;gap:var(--s4)}
@media(min-width:760px){.match{grid-template-columns:1fr 1fr}}
.match .case{border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5);background:var(--surface)}
.match .case.ok{border-color:color-mix(in srgb,var(--good) 35%,var(--line))}
.match .case.no{border-color:color-mix(in srgb,var(--warn) 35%,var(--line))}
.match .hd{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;margin:0 0 var(--s4)}
.match .case.ok .hd{color:var(--good-700)} .match .case.no .hd{color:var(--warn-700)}
.match .hd .mark{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:12px;font-weight:800;flex:0 0 auto}
.match .case.ok .mark{background:var(--good)} .match .case.no .mark{background:var(--warn)}
.match .ln{display:flex;justify-content:space-between;gap:var(--s3);padding:9px 0;
  border-bottom:1px dashed var(--line);font-size:13.5px}
.match .ln:last-of-type{border-bottom:0}
.match .ln .k{color:var(--ink-3)}
.match .ln .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:660;text-align:right}
.match .out{font-size:13.5px;color:var(--ink-2);margin:var(--s4) 0 0;line-height:1.5}

/* ── beta status panel ───────────────────────────────────────── */
.status-panel{border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;background:var(--surface)}
.status-panel .top{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);
  padding:var(--s4) var(--s5);background:var(--surface-2);border-bottom:1px solid var(--line)}
.status-panel .top h3{margin:0;font-size:16px}
.status-row{display:flex;align-items:center;justify-content:space-between;gap:var(--s4);
  padding:var(--s4) var(--s5);border-bottom:1px solid var(--line-2)}
.status-row:last-child{border-bottom:0}
.status-row .t{font-size:15.5px;font-weight:600}
.status-row .d{font-size:13.5px;color:var(--ink-3);margin-top:2px}

/* ── policy / source trust block ─────────────────────────────── */
.policy{border:1px solid var(--line);border-left:3px solid var(--brand-500);
  border-radius:var(--r-md);padding:var(--s5);background:var(--surface)}
.policy ul{margin:var(--s3) 0 var(--s4);padding-left:20px}
.policy li{margin:0 0 8px;font-size:15.5px}
.source-line{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s4);
  padding-top:var(--s4);border-top:1px solid var(--line-2);font-size:13.5px;color:var(--ink-3)}
.source-line a{color:var(--brand-500)}

/* ── limitations ─────────────────────────────────────────────── */
.limits{border-top:1px solid var(--line)}
.limits .row{display:grid;grid-template-columns:150px 1fr;gap:var(--s4);padding:var(--s4) 0;
  border-bottom:1px solid var(--line);align-items:start}
.limits .row .k{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  font-weight:700;color:var(--ink-3)}
.limits .row p{margin:0;font-size:15.5px}
@media(max-width:640px){.limits .row{grid-template-columns:1fr;gap:6px}}

/* ── CTA band ────────────────────────────────────────────────── */
.cta-band{background:var(--brand-900);color:#fff;border-radius:var(--r-xl);
  padding:var(--s8) var(--s7);text-align:center;position:relative;overflow:hidden}
.cta-band::before{content:"";position:absolute;inset:auto -10% -60% -10%;height:70%;
  background:radial-gradient(50% 100% at 50% 100%,rgba(83,132,186,.35),transparent 70%)}
.cta-band > *{position:relative}
.cta-band h2{color:#fff;margin-bottom:var(--s3)}
.cta-band p{color:#AFC4D8;max-width:44em;margin:0 auto var(--s5)}
.cta-band .fine{font-size:13.5px;color:#8FA6BC;margin:var(--s4) 0 0}
@media(max-width:640px){.cta-band{padding:var(--s7) var(--s5)}}

/* ── forms ───────────────────────────────────────────────────── */
.field{margin:0 0 var(--s4)}
.field label{display:block;font-size:14.5px;font-weight:640;margin:0 0 7px}
.field .hint{font-size:13px;color:var(--ink-3);margin:0 0 8px}
.field input[type=text],.field input[type=email],.field input[type=url],.field select,.field textarea{
  width:100%;font:inherit;font-size:16px;padding:14px 15px;min-height:52px;
  border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);color:var(--ink);
  transition:border-color .14s,box-shadow .14s}
.field textarea{min-height:96px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand-500);
  box-shadow:0 0 0 3px var(--brand-100);outline:none}
.field input[aria-invalid=true],.field select[aria-invalid=true]{border-color:var(--danger)}
.err{color:var(--danger);font-size:13.5px;font-weight:600;margin:7px 0 0}
.err:empty{display:none}
/* 貼上連結後的身分回讀。刻意樸素:它只說「我們讀到了哪一家、哪一個 SKU」,
   不是綠勾勾、不是「已支援」、不是任何形式的可監控性判定。 */
/* 手動後備區塊。只有在 URL 認不出來、或使用者說沒有連結時才出現。 */
.manual{border-top:1px solid var(--line-2);padding-top:var(--s4);margin-top:var(--s4)}
.idread{font-size:13px;color:var(--ink-3);margin:8px 0 0;font-family:var(--mono);letter-spacing:.01em}
.idread.ok{color:var(--ink-2);font-weight:640}
/* 文字型切換按鈕（「我沒有商品連結」）。看起來是連結,實際是 button,鍵盤可達。 */
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--brand-600);
  text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.linkbtn:hover{color:var(--brand-700)}
.linkbtn:focus-visible{outline:2px solid var(--brand-500);outline-offset:3px;border-radius:3px}
.ack{display:flex;gap:11px;align-items:flex-start;font-size:14.5px;line-height:1.5;cursor:pointer}
.ack input{margin-top:3px;width:18px;height:18px;flex:0 0 auto;accent-color:var(--brand-600)}
.banner{border-radius:var(--r-md);padding:13px 15px;font-size:14.5px;margin:0 0 var(--s4)}
.banner.bad{background:var(--danger-100);color:var(--danger)}
.hidden{display:none!important}
.vh{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ── reserve page layout ─────────────────────────────────────── */
.reserve-grid{display:grid;gap:var(--s6);align-items:start}
@media(min-width:940px){.reserve-grid{grid-template-columns:minmax(0,1fr) 380px;gap:var(--s7)}}
.summary{border:1px solid var(--line);border-radius:var(--r-xl);background:var(--surface);
  box-shadow:var(--sh-2);overflow:hidden}
@media(min-width:940px){.summary{position:sticky;top:92px}}
.summary .sh{padding:var(--s5);border-bottom:1px solid var(--line);background:var(--surface-2)}
.summary .sh h2{font-size:17px;margin:0}
.summary .sb{padding:var(--s5)}
.line{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);padding:11px 0}
.line .k{font-size:14.5px;color:var(--ink-2)}
.line .v{font-family:var(--mono);font-variant-numeric:tabular-nums;font-weight:700}
.line.total{border-top:1px solid var(--line);margin-top:var(--s2);padding-top:var(--s4)}
.line.total .k{font-size:15.5px;font-weight:640;color:var(--ink)}
.line.total .v{font-size:22px}
.ledger{margin:var(--s5) 0}
.ledger h4{font-size:12.5px;font-family:var(--mono);letter-spacing:.07em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 var(--s3);font-weight:700}
.ledger ul{list-style:none;margin:0 0 var(--s5);padding:0}
.ledger li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5;margin:0 0 10px;color:var(--ink-2)}
.ledger li .ico{flex:0 0 auto;margin-top:2px}
.ledger .yes .ico{color:var(--good)} .ledger .no .ico{color:var(--ink-4)}
.paynote{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-3);
  margin:var(--s4) 0 0;padding-top:var(--s4);border-top:1px solid var(--line-2)}

/* ── inner-page head (compact; not a marketing hero) ─────────── */
.page-head{padding:var(--s8) 0 var(--s6)}
.page-head .measure{max-width:680px}
.page-head h1{margin-bottom:var(--s3)}
.page-head .lead{margin-bottom:0}
@media(max-width:640px){.page-head{padding:var(--s6) 0 var(--s5)}}

/* ── process diagram (how-it-works) ──────────────────────────── */
.process{margin:var(--s6) 0;counter-reset:pr}
.process .stage{counter-increment:pr;position:relative;padding:0 0 var(--s6) 56px}
.process .stage:last-child{padding-bottom:0}
.process .stage .n{position:absolute;left:0;top:0;width:36px;height:36px;border-radius:11px;
  background:var(--brand-600);color:#fff;font-family:var(--mono);font-size:14px;font-weight:700;
  display:flex;align-items:center;justify-content:center}
.process .stage.gated .n{background:var(--surface-3);color:var(--ink-3);border:1px dashed var(--line)}
.process .stage:not(:last-child)::after{content:"";position:absolute;left:17px;top:44px;bottom:12px;
  width:2px;background:var(--line)}
.process .stage h3{margin:6px 0 6px}
.process .stage p{font-size:15.5px;color:var(--ink-2);margin:0}
.process .stage .badge{margin-top:var(--s3)}
.process .stage .detail{margin-top:var(--s3);background:var(--surface-2);border-radius:var(--r-md);
  padding:var(--s4);font-size:14.5px;color:var(--ink-2)}
.process .stage .detail b{color:var(--ink)}

/* ── principles list ─────────────────────────────────────────── */
.principles{border-top:1px solid var(--line);margin:var(--s5) 0 0}
.principles .p{display:grid;grid-template-columns:minmax(150px,190px) 1fr;gap:var(--s5);
  padding:var(--s5) 0;border-bottom:1px solid var(--line);align-items:start}
.principles .p h3{margin:0;font-size:16.5px}
.principles .p p{margin:0;font-size:15.5px;color:var(--ink-2)}
@media(max-width:700px){.principles .p{grid-template-columns:1fr;gap:6px}}

/* ── contact ─────────────────────────────────────────────────── */
.contact-grid{display:grid;gap:var(--s4);margin:var(--s5) 0 var(--s6)}
@media(min-width:720px){.contact-grid{grid-template-columns:1fr 1fr}}
.contact-card{border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s4) var(--s5);background:var(--surface);display:flex;flex-direction:column}
.contact-card h3{margin:0 0 5px;font-size:16.5px}
.contact-card p{font-size:14.5px;line-height:1.5;color:var(--ink-2);margin:0 0 11px;flex:1 1 auto}
.contact-card a{display:inline-flex;align-items:center;min-height:32px;font-size:15.5px;font-weight:640;
  color:var(--brand-500);text-decoration:none;word-break:break-word}
.contact-card a:hover{text-decoration:underline}

/* ── utility / state pages (status, credit, success, reserved) ─ */
/* Deliberately narrow and quiet: these are reference screens someone lands on
   from an email, not places to sell anything. */
.utility{max-width:620px;margin:0 auto;padding:var(--s7) 0 var(--s8)}
.utility.wide{max-width:760px}
@media(max-width:640px){.utility{padding:var(--s6) 0 var(--s8)}}
.state-mark{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;margin:0 0 var(--s5)}
.state-mark svg{width:26px;height:26px;stroke-width:2.25}
.state-mark.ok{background:var(--good-100);color:var(--good-700)}
.state-mark.wait{background:var(--brand-100);color:var(--brand-600)}
.state-mark.warn{background:var(--warn-100);color:var(--warn-700)}
.state-mark.err{background:var(--danger-100);color:var(--danger)}
.kv-list{border-top:1px solid var(--line);margin:var(--s5) 0}
.kv-list .kv{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4);
  padding:14px 0;border-bottom:1px solid var(--line)}
.kv-list .kv span{font-size:14.5px;color:var(--ink-2)}
.kv-list .kv b{font-size:15px;font-weight:660;text-align:right;
  font-variant-numeric:tabular-nums}
.kv-list .kv b.mono{font-family:var(--mono);font-size:14px}
.did{display:grid;gap:var(--s5);margin:var(--s5) 0}
@media(min-width:640px){.did{grid-template-columns:1fr 1fr}}
.did h4{font-family:var(--mono);font-size:11px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 var(--s3);font-weight:700}
.did ul{list-style:none;margin:0;padding:0}
.did li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.5;
  margin:0 0 10px;color:var(--ink-2)}
.did li .ico{flex:0 0 auto;margin-top:2px}
.did .yes .ico{color:var(--good)} .did .no .ico{color:var(--ink-4)}
.spin{display:inline-block;width:22px;height:22px;border:2.5px solid var(--brand-200);
  border-top-color:var(--brand-500);border-radius:50%;animation:sp .8s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spin{animation:none;border-top-color:var(--brand-200)}}

/* ── legal documents ─────────────────────────────────────────── */
.legal{display:grid;gap:var(--s7);align-items:start;padding:var(--s7) 0 var(--s9)}
@media(min-width:1040px){.legal{grid-template-columns:230px minmax(0,1fr);gap:var(--s8)}}
.legal-toc{font-size:14px}
@media(min-width:1040px){.legal-toc{position:sticky;top:92px;max-height:calc(100vh - 120px);overflow-y:auto}}
.legal-toc .h{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 var(--s3);font-weight:700}
.legal-toc ol{list-style:none;margin:0;padding:0}
.legal-toc a{display:block;padding:6px 0 6px 12px;font-size:13.5px;line-height:1.4;
  color:var(--ink-3);text-decoration:none;border-left:2px solid var(--line)}
.legal-toc a:hover{color:var(--ink-2);border-left-color:var(--ink-3)}
/* Section nav is a disclosure. It ships open, so a reader without JS gets every
   link; brand.js collapses it below the two-column breakpoint, where an
   always-open list of ten anchors was pushing the document itself off-screen. */
.legal-toc summary{list-style:none;cursor:pointer;display:none}
.legal-toc summary::-webkit-details-marker{display:none}
@media(max-width:1039px){
  /* Single column: the airy two-column rhythm turns into dead space. */
  .legal{padding:var(--s5) 0 var(--s7);gap:var(--s5)}
  .legal-toc{border:1px solid var(--line);border-radius:var(--r-md);
    background:var(--surface-2);font-size:14px}
  .legal-toc summary{display:flex;align-items:center;justify-content:space-between;
    gap:var(--s3);padding:14px var(--s5);min-height:48px}
  .legal-toc summary .h{margin:0}
  .legal-toc summary .chev{color:var(--ink-3);transition:transform .18s ease;flex:0 0 auto}
  .legal-toc .toc-d[open] summary .chev{transform:rotate(180deg)}
  .legal-toc .toc-d[open] summary{border-bottom:1px solid var(--line)}
  .legal-toc ol{padding:var(--s3) var(--s5) var(--s4)}
  .legal-toc a{padding:9px 0 9px 12px;font-size:14px}
  .legal-toc summary:focus-visible{outline:2px solid var(--brand-500);outline-offset:-2px;border-radius:var(--r-md)}
}
@media(min-width:1040px){.legal-toc .h{display:block}}
.legal-body{max-width:700px}
.legal-body h2{font-size:clamp(19px,2.1vw,22px);margin:var(--s7) 0 var(--s3);scroll-margin-top:96px}
.legal-body h2:first-of-type{margin-top:0}
.legal-body p,.legal-body li{font-size:16px;line-height:1.65;color:var(--ink-2)}
.legal-body b,.legal-body strong{color:var(--ink)}
.legal-body ul{padding-left:22px;margin:0 0 var(--s4)}
.legal-body li{margin:0 0 9px}
.legal-body a{color:var(--brand-500)}
.doc-meta{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);padding:var(--s4) 0;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin:0 0 var(--s6)}
.doc-meta span{font-family:var(--mono);font-size:11.5px;letter-spacing:.05em;
  text-transform:uppercase;color:var(--ink-3)}
.doc-meta b{color:var(--ink-2);font-weight:640}

/* ── footer ──────────────────────────────────────────────────── */
/* Deep-navy terminus. Every page ends on the same dark band, which reads as a
   deliberate close rather than a page that ran out of content. The navy is the
   existing --brand-900, so nothing new enters the palette. Contrast on
   #0E2338: body 7.4:1, links 10.8:1, headings 6.3:1, © 5.0:1 — all above AA. */
:root{--foot-bg:#0E2338;--foot-text:#9FB3C8;--foot-head:#8FA5BB;
  --foot-link:#C7D6E4;--foot-faint:#7E93A8;--foot-line:rgba(255,255,255,.11)}
.site-footer{background:var(--foot-bg);color:var(--foot-text);
  padding:var(--s8) 0 var(--s6);margin-top:0}
.site-footer .brand-link .wordmark{color:#fff}
.foot-top{display:grid;gap:var(--s6);margin:0 0 var(--s6)}
@media(min-width:800px){.foot-top{grid-template-columns:1.4fr 3fr;gap:var(--s7)}}
.foot-nav{display:grid;gap:var(--s6)}
@media(min-width:800px){.foot-nav{grid-template-columns:repeat(3,1fr)}}
.foot-brand .brand-link{margin-bottom:var(--s3)}
.foot-brand p{font-size:14px;line-height:1.6;color:var(--foot-text);max-width:34em;margin:0}
.foot-col h4{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--foot-head);margin:0 0 var(--s3);font-weight:700}
.foot-col ul{list-style:none;margin:0;padding:0}
.foot-col li{margin:0 0 10px}
.foot-col a{display:inline-block;font-size:14.5px;line-height:1.45;color:var(--foot-link);text-decoration:none}
.foot-col a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}
.foot-bottom{border-top:1px solid var(--foot-line);padding-top:var(--s5);display:grid;gap:var(--s4)}
.foot-bottom p{font-size:13px;color:var(--foot-text);margin:0;line-height:1.6;max-width:78em}
.foot-bottom .small{color:var(--foot-faint)}
.foot-status{display:flex;align-items:flex-start;gap:9px;font-size:13px;font-weight:600;color:#DCE6F0}
.foot-status .badge{flex:0 0 auto}
/* The Beta pill keeps amber semantics but needs its own values on navy —
   the light-surface amber token pair would drop under AA here. */
.site-footer .badge-soon{background:rgba(214,158,63,.18);color:#EBBE77}
.site-footer a:focus-visible{outline-color:#8FB3D6}

@media(max-width:799px){
  /* Mobile density. The three link stacks were the single biggest block: a
     two-column grid plus one horizontal Legal row removes about 150px without
     dropping a link or shrinking a tap target. Nothing is hidden behind a
     disclosure — the beta status and the independence notice stay in the open. */
  .site-footer{padding:var(--s7) 0 var(--s5)}
  .foot-top{gap:var(--s5);margin-bottom:var(--s5)}
  .foot-brand p{font-size:13.5px;line-height:1.52}
  .foot-nav{grid-template-columns:1fr 1fr;gap:var(--s5) var(--s4)}
  .foot-legal{grid-column:1/-1}
  .foot-legal ul{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s6)}
  .foot-legal li{margin:0}
  .foot-col li{margin:0}
  /* box-sizing is border-box, so the tap target has to be stated as the whole
     box height, not as a content minimum. */
  .foot-col a{display:flex;align-items:center;padding:9px 0;min-height:44px}
  .foot-bottom{padding-top:var(--s4);gap:10px}
  .foot-bottom p{font-size:12.5px;line-height:1.55}
  .foot-status{font-size:12.5px}
}

/* ── about: the gap figure ───────────────────────────────────── */
/* One original diagram, not an illustration: a purchase, a later price move,
   the retailer's deadline, and the stretch in between that nobody tells you
   about. It claims no product capability — it draws the problem. */
.gapfig{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:var(--s6);box-shadow:var(--sh-1);margin:var(--s6) 0 0}
.gapfig-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:var(--s3);margin:0 0 var(--s5)}
.gapfig-head .t{font-size:15.5px;font-weight:660;margin:0}
.gapfig-plot{position:relative;height:172px;margin:0 0 var(--s3)}
.gapfig-plot svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.gapfig .band{fill:var(--warn-100)}
.gapfig .grid-l{stroke:var(--line-2)}
.gapfig .line{stroke:var(--brand-600);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.gapfig .line.past{stroke:var(--ink-4);stroke-dasharray:1 5}
.gapfig .dead{stroke:var(--warn-700);stroke-width:1.5;stroke-dasharray:4 4}
.gapfig .axis{stroke:var(--line)}
.gapfig-plot .dotm{position:absolute;width:11px;height:11px;border-radius:50%;
  background:var(--brand-600);border:2.5px solid var(--surface);
  box-shadow:0 0 0 1.5px var(--brand-600);transform:translate(-50%,-50%)}
.gapfig-plot .pricetag{position:absolute;transform:translate(-50%,-50%);
  font-family:var(--mono);font-size:11.5px;font-weight:640;color:var(--ink-2);
  background:var(--surface);padding:1px 6px;border-radius:5px;white-space:nowrap}
.gapfig-axis{position:relative;min-height:78px;border-top:1px solid var(--line)}
.gapfig-axis .mk{position:absolute;top:0;padding-top:11px;max-width:12em;
  border-left:1px solid var(--line);padding-left:10px;transform:translateX(-1px)}
.gapfig-axis .mk.end{border-left:0;border-right:1px solid var(--line);
  padding-left:0;padding-right:10px;text-align:right;transform:translateX(1px)}
.gapfig-axis .mk b{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);font-weight:700;margin:0 0 3px}
.gapfig-axis .mk span{display:block;font-size:13.5px;line-height:1.35;color:var(--ink-2)}
.gapfig-axis .mk.warn b{color:var(--warn-700)}
.gapfig-gap{display:flex;align-items:flex-start;gap:11px;margin:var(--s5) 0 0;
  background:var(--warn-100);border-radius:var(--r-md);padding:var(--s4) var(--s5)}
.gapfig-gap .ico{color:var(--warn-700);margin-top:2px}
.gapfig-gap p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.gapfig-gap b{color:var(--warn-700)}
.gapfig-fine{font-size:12px;color:var(--ink-4);margin:var(--s4) 0 0}
@media(max-width:700px){
  /* Three absolutely-placed labels collide below ~700px, so the axis becomes a
     plain vertical list. The chart itself keeps its shape. */
  .gapfig{padding:var(--s5)}
  .gapfig-plot{height:132px}
  .gapfig-axis{position:static;height:auto;display:grid;gap:0;padding-top:var(--s2)}
  .gapfig-axis .mk,.gapfig-axis .mk.end{position:static;max-width:none;left:auto!important;
    border-left:2px solid var(--line);border-right:0;padding:10px 0 10px 13px;
    text-align:left;transform:none;display:flex;align-items:baseline;gap:10px}
  .gapfig-axis .mk.warn,.gapfig-axis .mk.end.warn{border-left-color:var(--warn)}
  .gapfig-axis .mk b{margin:0;flex:0 0 4.2em}
  .gapfig-plot .pricetag{font-size:10.5px}
}

/* ── principles: numeral anchors, not cards ──────────────────── */
.principles{counter-reset:pn}
.principles .p{counter-increment:pn;grid-template-columns:34px minmax(140px,180px) 1fr}
.principles .p::before{content:"0" counter(pn);font-family:var(--mono);font-size:11.5px;
  font-weight:700;letter-spacing:.04em;color:var(--brand-400);padding-top:3px}
@media(max-width:760px){
  .principles .p{grid-template-columns:28px 1fr;gap:var(--s3) var(--s2);align-items:baseline}
  .principles .p h3{grid-column:2}
  .principles .p p{grid-column:2}
  .principles .p::before{grid-row:1;padding-top:2px}
}

/* ── transaction state shell ─────────────────────────────────── */
/* One shell for every token-page state: loading, pending, confirmed, not
   found, failed. A state always renders as a finished panel — never a mark
   floating on an empty page. */
.tstate{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:var(--s6);box-shadow:var(--sh-2)}
.tstate .state-mark{margin:0 0 var(--s4)}
.tstate h1{font-size:clamp(23px,3vw,30px);margin:0 0 var(--s3)}
.tstate .lead{margin:0}
.tstate .lead+.small{margin:var(--s3) 0 0}
.tstate .banner{margin:var(--s4) 0 0}
.tstate.is-ok{border-color:color-mix(in srgb,var(--good) 30%,var(--line))}
.tstate.is-warn{border-color:color-mix(in srgb,var(--warn) 34%,var(--line))}
.tstate.is-err{border-color:color-mix(in srgb,var(--danger) 28%,var(--line))}
.tactions{display:flex;flex-wrap:wrap;gap:var(--s3);margin:var(--s5) 0 0;padding:0}
.tactions .btn{min-height:48px}
.tsec{margin:var(--s6) 0 0}
.tsec h2{font-size:19px;margin:0 0 var(--s3)}
.tfoot{margin:var(--s6) 0 0;padding-top:var(--s4);border-top:1px solid var(--line-2)}
.tfoot p{font-size:13.5px;color:var(--ink-3);margin:0 0 6px}
.tfoot p:last-child{margin-bottom:0}
@media(max-width:640px){.tstate{padding:var(--s5)}.tactions .btn{width:100%}}

/* ── note (used by every state page) ─────────────────────────── */
.note{background:var(--surface-2);border:1px solid var(--line-2);
  border-left:3px solid var(--brand-300);border-radius:var(--r-md);
  padding:var(--s4) var(--s5);margin:var(--s5) 0}
.note .t{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin:0 0 8px}
.note p{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0}
.note p+p{margin-top:9px}
.note.warn{border-left-color:var(--warn)}

/* ── utility chrome (transaction / private-link archetype) ───── */
/* /reserved /success /status /credit /app resolve an existing payment,
   record or error. They keep a home affordance and one relevant action, and
   drop the marketing navigation: a person sorting out a reservation should not
   be competing with "Reserve a beta place". The footer is light and compact
   here rather than the deep-navy marketing terminus, because on a short state
   page a full dark band outweighs the task it sits under. */
.site-header-util .inner{justify-content:space-between}
.util-action{font-size:15px;font-weight:620;color:var(--ink-2);text-decoration:none;
  padding:10px 14px;border:1px solid var(--line);border-radius:var(--r-md);
  min-height:44px;display:inline-flex;align-items:center;
  transition:border-color .14s ease,color .14s ease}
.util-action:hover{border-color:var(--brand-400);color:var(--brand-600)}

.foot-compact{background:var(--bg);border-top:1px solid var(--line);
  color:var(--ink-3);padding:var(--s6) 0 var(--s5);margin-top:var(--s7)}
/* A state page is often short. Full-height column layout puts the footer at the
   bottom of the viewport instead of leaving a void under the panel. */
body[data-arch="utility"]{min-height:100vh;display:flex;flex-direction:column}
body[data-arch="utility"] main{flex:1 0 auto}
body[data-arch="utility"] .foot-compact{margin-top:0}
body[data-arch="utility"] .utility{padding-bottom:var(--s7)}
.foot-compact-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s4);margin:0 0 var(--s4)}
.foot-compact .brand-link{min-height:44px}
.foot-compact .brand-link .wordmark{font-size:16px;color:var(--ink-2)}
.foot-compact .brand-mark.sm{width:24px;height:24px}
.foot-compact-nav{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s5)}
.foot-compact-nav a{font-size:14.5px;color:var(--ink-2);text-decoration:none;
  min-height:44px;display:inline-flex;align-items:center}
.foot-compact-nav a:hover{color:var(--brand-600);text-decoration:underline;text-underline-offset:3px}
.foot-compact-fine{font-size:12.5px;line-height:1.55;color:var(--ink-3);margin:0 0 var(--s2);max-width:78em}
.foot-compact-copy{font-size:12.5px;color:var(--ink-4);margin:0}
@media(max-width:640px){
  .foot-compact{padding:var(--s5) 0}
  .foot-compact-row{gap:var(--s2);margin-bottom:var(--s3)}
  .foot-compact-nav{gap:0 var(--s5)}
}

/* ── archetype rhythm ────────────────────────────────────────── */
/* Hierarchy should not come from size and whitespace alone. Editorial and
   utility pages sit a step below the marketing scale, and subordinate sections
   are marked by a quieter heading level rather than by yet more air. */
.section.quiet h2{font-size:clamp(19px,2.1vw,23px);line-height:1.24;
  letter-spacing:-.015em;font-weight:720}
.section.quiet .lead{font-size:clamp(16.5px,1.3vw,18px)}
body[data-arch="editorial"] .page-head h1,
body[data-arch="utility"] .page-head h1{font-size:clamp(27px,3.4vw,38px)}


@media(max-width:640px){
  /* Secondary pages were opening with four consecutive display-scale moments.
     The hero stays strong; everything after it steps down. Reading sizes and
     line-height are untouched — only heading scale and the gaps move. */
  body[data-arch="editorial"] .page-head{padding:var(--s5) 0 var(--s4)}
  body[data-arch="editorial"] .page-head h1{font-size:27px;line-height:1.14}
  body[data-arch="editorial"] .page-head .lead{font-size:16.5px;line-height:1.55}
  body[data-arch="editorial"] .section{padding:var(--s6) 0}
  body[data-arch="editorial"] .section.tight{padding:var(--s6) 0}
  body[data-arch="editorial"] .section.quiet{padding:var(--s6) 0 var(--s5)}
  body[data-arch="editorial"] .section-head{margin-bottom:var(--s5)}
  body[data-arch="editorial"] .section.quiet h2{font-size:20px}
  body[data-arch="editorial"] h2{font-size:23px}
  body[data-arch="editorial"] h2:not(:first-child){margin-top:var(--s5)}
  /* …except when an eyebrow already labels it: those two are one unit. Stated
     last and at matching specificity so a quiet section cannot re-add the gap. */
  body[data-arch="editorial"] .section.quiet .eyebrow + h2,
  body[data-arch="editorial"] .eyebrow + h2:not(:first-child){margin-top:0}
  /* Legal documents keep their own body scale — the editorial step-down above
     is for marketing-shaped sections, not for a policy's section headings. */
  body[data-arch="editorial"] .legal-body h2{font-size:19px;margin:var(--s5) 0 var(--s3)}
  body[data-arch="editorial"] .legal-body h2:first-of-type{margin-top:0}
  /* Legal opening rhythm: a premium document, not a landing-page hero.
     header → 48 → eyebrow+H1 → 32 → On this page → 32 → metadata → 32 → text. */
  body[data-arch="editorial"] .page-head.legal-head{padding:var(--s7) 0 0}
  .legal{padding:var(--s6) 0 var(--s7);gap:var(--s6)}
}

/* ── product-led SEO page (M02 reference implementation) ─────── */
/* A search-intent page that opens on a working tool rather than a hero. The
   first viewport has to read as a product surface: crumb, one H1, a short
   explanation, the input, the action, and the honest status of all of it. */
.tool-head{padding:var(--s6) 0 var(--s7);border-bottom:1px solid var(--line-2)}
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);
  font-size:13px;color:var(--ink-3);margin:0 0 var(--s5)}
.crumb a{color:var(--ink-3);text-decoration:none}
.crumb a:hover{color:var(--brand-600);text-decoration:underline}
.crumb span[aria-hidden]{color:var(--ink-4)}
.crumb [aria-current]{color:var(--ink-2)}
.tool-grid{display:grid;gap:var(--s6);align-items:start}
@media(min-width:940px){
  .tool-grid{grid-template-columns:1.05fr .95fr;gap:var(--s5) var(--s8)}
  .tool-copy{grid-column:1;grid-row:1}
  .tool-grid > .trustrow{grid-column:1;grid-row:2;align-self:start}
  .checker{grid-column:2;grid-row:1/span 2}
}
/* Below the two-column breakpoint the tool comes before the trust row, so the
   input and its action stay inside the first screen. */
.tool-copy h1{font-size:clamp(28px,3.5vw,40px);margin-bottom:var(--s3)}
.tool-copy .lead{margin-bottom:var(--s3)}
.tool-copy .small{margin:0 0 var(--s5)}
.trustrow{list-style:none;display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);margin:var(--s5) 0 0;padding:0}
@media(min-width:940px){.trustrow{margin-top:0}}
.trustrow li{display:inline-flex;align-items:center;gap:7px;font-size:13.5px;color:var(--ink-2)}
.trustrow .ico{color:var(--good)}

.checker{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-xl);
  padding:var(--s5);box-shadow:var(--sh-3)}
.checker-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin:0 0 var(--s4)}
.checker-head .t{font-size:15px;font-weight:660;margin:0}
.checker .field{margin-bottom:var(--s4)}
.checker input{font-family:var(--mono);font-size:14px}
.checker-out{display:none}
.checker-out.shown{display:block;margin:var(--s4) 0 0}
.checker-out .res{display:flex;gap:11px;align-items:flex-start;padding:var(--s4);
  border-radius:var(--r-md);border:1px solid var(--line-2);background:var(--surface-2)}
.checker-out .res + .res{margin-top:var(--s3)}
.checker-out .res.ok{background:var(--good-100);border-color:color-mix(in srgb,var(--good) 26%,var(--line-2))}
.checker-out .res.warn{background:var(--warn-100);border-color:color-mix(in srgb,var(--warn) 28%,var(--line-2))}
.checker-out .ic{flex:0 0 auto;width:19px;height:19px;margin-top:1px}
.checker-out .ic svg{width:19px;height:19px;display:block}
.checker-out .res.ok .ic{color:var(--good-700)}
.checker-out .res.warn .ic{color:var(--warn-700)}
.checker-out .t{font-size:14.5px;font-weight:680;margin:0 0 4px;color:var(--ink)}
.checker-out .d{font-size:13.5px;line-height:1.55;color:var(--ink-2);margin:0}
.checker-fine{font-size:12.5px;line-height:1.55;color:var(--ink-3);margin:var(--s4) 0 0;
  padding-top:var(--s3);border-top:1px solid var(--line-2)}

/* ── Costco channel panels (R01) ─────────────────────────────── */
/* Two panels, not two cards in a card grid — the whole point of the page is
   that these are two different policies, so they sit side by side and one
   disappears when the visitor says which channel they are under. */
.cc-selector{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:var(--s4) var(--s5);margin:var(--s5) 0 var(--s5)}
.cc-pick{display:flex;flex-direction:column;gap:6px;max-width:420px}
.cc-pick span{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700}
.cc-pick select{font:inherit;font-size:15px;padding:11px 12px;min-height:46px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink)}
.cc-hint{font-size:13.5px;line-height:1.55;color:var(--ink-3);margin:var(--s3) 0 0}
.cc-grid{display:grid;gap:var(--s4)}
@media(min-width:900px){.cc-grid{grid-template-columns:repeat(2,1fr);gap:var(--s5)}
  /* 只剩一個面板時不要留半欄空白 —— 收成單欄並限寬,讀起來才像一個答案。 */
  .cc-grid[data-one]{grid-template-columns:minmax(0,620px)}}
.ccard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s5);box-shadow:var(--sh-1);display:flex;flex-direction:column}
.cc-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s3);margin:0 0 var(--s4)}
.cc-head h3{margin:0;font-size:18.5px}
.cc-kvs{border-top:1px solid var(--line-2);margin:0 0 var(--s4)}
.cc-kv{display:grid;grid-template-columns:minmax(120px,140px) 1fr;gap:var(--s3);
  padding:10px 0;border-bottom:1px solid var(--line-2)}
.cc-kv span{font-size:13px;color:var(--ink-3)}
.cc-kv b{font-size:14.5px;font-weight:640;color:var(--ink)}
.cc-summary{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0 0 var(--s4)}
.cc-list{margin:0 0 var(--s4)}
.cc-list .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin:0 0 6px}
.cc-list ul{margin:0;padding-left:19px}
.cc-list li{font-size:14px;line-height:1.5;color:var(--ink-2);margin:0 0 5px}
.cc-src{font-size:13px;line-height:1.6;color:var(--ink-3);margin:auto 0 0;
  padding-top:var(--s3);border-top:1px solid var(--line-2)}
.cc-ver{font-family:var(--mono);font-size:11.5px;color:var(--ink-4)}
@media(max-width:640px){
  .cc-selector{padding:var(--s4)}
  .cc-pick{max-width:none}
  .ccard{padding:var(--s4)}
  .cc-kv{grid-template-columns:1fr;gap:2px;padding:9px 0}
}

/* ── /app —— 已登入的最小顧客介面 ────────────────────────────── */
/* 刻意樸素。這頁今天能誠實顯示的只有「預留名額」與「還沒開始監控」,
   任何看起來像儀表板的視覺(數字大字、走勢圖、進度條)都會暗示一個
   我們還做不到的能力。等真的有觀測資料再談視覺。 */
.approot{padding:var(--s6) 0 var(--s7)}
.apptop{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:var(--s3);margin:0 0 var(--s5)}
.apptop h1{margin:0;font-size:26px;letter-spacing:-.015em}
.appwho{font-size:13.5px;color:var(--ink-3);margin:0}
.appwho b{color:var(--ink-2);font-weight:640}
.appwho .linkbtn{margin-left:var(--s3)}
.appbox{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s6);box-shadow:var(--sh-1);max-width:var(--measure)}
.appbox h1,.appbox h2{margin:0 0 var(--s3);font-size:22px;letter-spacing:-.01em}
.appcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s5);box-shadow:var(--sh-1);margin:0 0 var(--s4);max-width:var(--measure)}
.apphead{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s3);margin:0 0 var(--s3)}
.apphead h3{margin:0;font-size:17.5px}
.appid{font-family:var(--mono);font-size:12.5px;color:var(--ink-2);margin:0 0 var(--s3);
  letter-spacing:.01em}
.appline{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0 0 var(--s3)}
.appmeta{font-size:13px;color:var(--ink-3);margin:0 0 var(--s3)}
.appact{margin:0;font-size:14px}
.appnote{font-size:13px;color:var(--ink-3);line-height:1.55;margin:var(--s3) 0 0}
.appmuted{font-size:14px;color:var(--ink-3);margin:0}
.appfine{font-size:13px;color:var(--ink-3);line-height:1.55;margin:var(--s5) 0 0;
  max-width:var(--measure)}
.appbtns{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s4);margin:var(--s5) 0 0}
.appotp{margin:var(--s5) 0 0;padding:var(--s4);background:var(--surface-2);
  border:1px solid var(--line-2);border-radius:var(--r-md);max-width:420px}
.applabel{display:block;font-size:13.5px;font-weight:640;margin:0 0 7px}
.appotp input{width:100%;padding:11px 13px;font-size:15px;font-family:inherit;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink)}
.appotp input:focus{border-color:var(--brand-500);outline:2px solid var(--brand-200);outline-offset:1px}
.appotp .btn{margin-top:var(--s3)}

/* ── /app · USER_ASSISTED ─────────────────────────────────────────────── */
/* 結果橫幅。顏色只分「有事可做 / 沒事可做 / 要人看」三檔 —— 不用綠色慶祝,
   因為我們沒有替使用者拿到任何東西,只是把他自己看到的價格算了一下。 */
.appresult{border:1px solid var(--line-2);border-left-width:3px;border-radius:var(--r-md);
  padding:var(--s4);margin:0 0 var(--s4);background:var(--surface-2)}
.appresult-t{margin:0 0 6px;font-size:14.5px;font-weight:660;color:var(--ink)}
.appresult-b{margin:0;font-size:13.5px;line-height:1.6;color:var(--ink-2)}
.appresult[data-state="POTENTIAL_DROP_WINDOW_MAY_BE_OPEN"]{border-left-color:var(--brand-500);background:var(--brand-100)}
.appresult[data-state="POTENTIAL_DROP"]{border-left-color:var(--warn-500,var(--warn-700));background:var(--warn-100)}
.appresult[data-state="WINDOW_APPEARS_CLOSED"],
.appresult[data-state="NO_DROP_OBSERVED"]{border-left-color:var(--line)}
.appresult[data-state="NEEDS_POLICY_REVIEW"]{border-left-color:var(--warn-700)}

/* 「這是誰講的」標籤。永遠貼在價格旁邊,不得省略。 */
.appsrc b{color:var(--ink);font-weight:660}
.apptag{display:inline-block;margin-left:8px;padding:1px 7px;border-radius:999px;
  background:var(--surface-3);color:var(--ink-3);font-size:11px;font-weight:640;
  letter-spacing:.02em;vertical-align:1px;white-space:nowrap}
.appspark{display:block;color:var(--brand-500);margin:0 0 6px;max-width:100%;height:auto}
.appnext{display:inline-block;margin:0 0 0 var(--s4)}
.appcard .appact .btn{margin:var(--s2,6px) 0 0}

/* 檢查頁 */
.appcheck h1{margin-bottom:var(--s3)}
.appback{margin:0 0 var(--s4);font-size:13px}
.appfacts{padding:var(--s4);background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:var(--r-md);margin:0 0 var(--s5)}
.appfact-name{margin:0 0 6px;font-size:16px;font-weight:660;color:var(--ink)}
.appfacts .appmeta:last-child{margin-bottom:0}
/* 完整網址逐字顯示 —— 長網址要能斷行,不能被裁掉。使用者必須看得到自己要去哪。 */
.appurl{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin:0 0 var(--s3);
  overflow-wrap:anywhere;word-break:break-word;line-height:1.5}
.apppricerow{display:flex;align-items:center;gap:8px}
.appcur{font-size:15px;font-weight:660;color:var(--ink-2)}
.apppricerow input{flex:1 1 auto;min-width:0}
.appcheckbox{display:flex;align-items:flex-start;gap:8px;margin:var(--s4) 0 0;
  font-size:13.5px;line-height:1.55;color:var(--ink-2);cursor:pointer}
.appcheckbox input{width:auto;flex:0 0 auto;margin-top:2px}
.appclaim{margin:var(--s5) 0 0;padding-top:var(--s5);border-top:1px solid var(--line-2)}
.appclaim h2{margin:0 0 var(--s3);font-size:17px}

/* 比較基準的說明句。刻意小而灰 —— 它是防呆,不是賣點;但不得被藏起來。 */
.appbasis{display:inline-block;margin:4px 0 0;font-size:12.5px;line-height:1.5;color:var(--ink-3)}
.appbasis-in{display:block;margin:0 0 var(--s3);max-width:46ch}
/* 追蹤卡上通往預留的次要入口。 */
.appres{margin:0 0 var(--s3)}
@media(max-width:640px){
  .approot{padding:var(--s5) 0 var(--s6)}
  .appbox,.appcard{padding:var(--s4)}
  .appnext{display:block;margin:var(--s3) 0 0}
  .appspark{width:100%}
  .apptop h1{font-size:23px}
  .appbtns{flex-direction:column;align-items:stretch}
  .appbtns .btn{width:100%}
}

/* ── retailer policy registry (M05) ──────────────────────────── */
/* Cards, not a table. A ten-column table is unreadable at 390px and the
   honest answer per retailer is a short record, not a row of cells. */
.rsummary{margin:0 0 var(--s5)}
.rsummary .rs-line{font-size:15.5px;color:var(--ink-2);margin:0 0 6px}
.rsummary .rs-note{font-size:13.5px;color:var(--ink-3);margin:0}
.rfilters{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s4);
  padding:var(--s4) var(--s5);background:var(--surface-2);border:1px solid var(--line-2);
  border-radius:var(--r-md);margin:0 0 var(--s5)}
.rf{display:flex;flex-direction:column;gap:6px;min-width:190px}
.rf span{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700}
.rf select{font:inherit;font-size:15px;padding:10px 12px;min-height:44px;
  border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink)}
.rf-count{font-family:var(--mono);font-size:12px;color:var(--ink-3);margin:0 0 12px;flex:1 0 auto;text-align:right}
.rgrid{display:grid;gap:var(--s4)}
@media(min-width:900px){.rgrid{grid-template-columns:repeat(2,1fr)}}
.rcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--s5);box-shadow:var(--sh-1);display:flex;flex-direction:column}
.rcard[data-status="UNCONFIRMED"]{background:var(--surface-2);border-style:dashed}
.rc-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s3);margin:0 0 4px}
.rc-head h3{margin:0;font-size:18px}
.rc-channel{font-family:var(--mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--ink-3);margin:0 0 var(--s4)}
.rc-kvs{border-top:1px solid var(--line-2);margin:0 0 var(--s4)}
.rc-kv{display:grid;grid-template-columns:minmax(120px,140px) 1fr;gap:var(--s3);
  padding:10px 0;border-bottom:1px solid var(--line-2)}
.rc-kv span{font-size:13px;color:var(--ink-3)}
.rc-kv b{font-size:14.5px;font-weight:640;color:var(--ink)}
.rc-kv b.muted{font-weight:520;color:var(--ink-3)}
.rc-summary{font-size:14.5px;line-height:1.6;color:var(--ink-2);margin:0 0 var(--s4)}
.rc-list{margin:0 0 var(--s4)}
.rc-list .k{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin:0 0 6px}
.rc-list ul{margin:0;padding-left:19px}
.rc-list li{font-size:14px;line-height:1.5;color:var(--ink-2);margin:0 0 5px}
.rc-src{font-size:13px;line-height:1.6;color:var(--ink-3);margin:auto 0 0;
  padding-top:var(--s3);border-top:1px solid var(--line-2)}
.rc-ver{font-family:var(--mono);font-size:11.5px;color:var(--ink-4)}
.rempty{font-size:15px;color:var(--ink-3);margin:var(--s5) 0 0}
@media(max-width:640px){
  .rfilters{flex-direction:column;align-items:stretch;gap:var(--s3);padding:var(--s4)}
  .rf{min-width:0}
  .rf-count{text-align:left;margin:0}
  .rcard{padding:var(--s4)}
  .rc-kv{grid-template-columns:1fr;gap:2px;padding:9px 0}
}

/* Net-benefit framing — a decision laid out, not a recommendation. */
.formula{background:var(--surface-2);border:1px solid var(--line-2);border-radius:var(--r-md);
  padding:var(--s4) var(--s5);margin:var(--s4) 0}
.formula .t{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);font-weight:700;margin:0 0 10px}
.formula .f{font-size:15px;line-height:1.85;color:var(--ink-2);margin:0}
.formula .fine{font-size:13px;color:var(--ink-3);margin:12px 0 0;padding-top:10px;border-top:1px solid var(--line-2)}
.checker-out .inline-list{margin:8px 0 8px;padding-left:18px}
.checker-out .inline-list li{margin:0 0 5px}

/* Direct-answer capsule — the one thing a searcher came for, said first. */
.answer{background:var(--brand-50);border:1px solid var(--brand-100);
  border-left:3px solid var(--brand-500);border-radius:var(--r-md);
  padding:var(--s4) var(--s5);margin:var(--s4) 0 0}
.answer .t{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  color:var(--brand-600);font-weight:700;margin:0 0 8px}
.answer p{font-size:15.5px;line-height:1.6;color:var(--ink-2);margin:0}
.answer b{color:var(--ink)}

/* Two clocks: the conceptual centre of the product, so it gets its own pair. */
.clocks{display:grid;gap:var(--s4);margin:0 0 var(--s6)}
@media(min-width:760px){.clocks{grid-template-columns:1fr 1fr;gap:var(--s5)}}
.clock{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:var(--s5)}
.clock .n{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;
  color:var(--brand-500);font-weight:700;margin:0 0 8px}
.clock h3{margin:0 0 8px;font-size:17px}
.clock p{margin:0;font-size:15px;line-height:1.55;color:var(--ink-2)}

.policy-list{list-style:none;margin:var(--s4) 0;padding:0;border-top:1px solid var(--line)}
.policy-list li{padding:12px 0;border-bottom:1px solid var(--line-2);font-size:15.5px;color:var(--ink-2)}
.src{font-size:13px;line-height:1.6;color:var(--ink-3);margin:var(--s4) 0 0}

.qa{border-top:1px solid var(--line);margin:var(--s5) 0 0}
.qa .q{padding:var(--s5) 0;border-bottom:1px solid var(--line-2)}
.qa .q h3{font-size:17px;margin:0 0 8px}
.qa .q p{margin:0;font-size:15.5px;line-height:1.6;color:var(--ink-2)}

@media(max-width:640px){
  /* Shared tool-page density — unchanged from the approved M02 geometry. */
  .tool-head{padding:var(--s5) 0 var(--s6)}
  .crumb{margin-bottom:var(--s4);font-size:12.5px}
  .tool-copy h1{font-size:28px}
  .checker{padding:var(--s4)}
  .qa .q{padding:var(--s4) 0}

  /* `.tool-head.dense` — for a tool head carrying more than one form field.
     M02 has one input and its action button already sits inside the first
     screen; M01 has two plus a direct-answer capsule, which pushes the button
     past the fold. Everything below is spacing only, scoped to the modifier, so
     adding an SEO page can never move an approved live page's geometry.
     Reading sizes and line-height are untouched. */
  .tool-head.dense{padding:var(--s3) 0 var(--s5)}
  .tool-head.dense .crumb{margin-bottom:10px}
  .tool-head.dense .tool-copy h1{margin-bottom:var(--s2)}
  .tool-head.dense .tool-copy .lead{margin-bottom:var(--s2)}
  .tool-head.dense .tool-grid{gap:var(--s3)}
  .tool-head.dense .answer{margin-top:var(--s3);padding:10px 15px}
  .tool-head.dense .checker{padding:var(--s4) var(--s4) var(--s3)}
  .tool-head.dense .checker-head{margin-bottom:10px}
  .tool-head.dense .checker .field{margin-bottom:10px}
  .tool-head.dense .checker .field label{margin-bottom:5px}
  .tool-head.dense .trustrow{margin-top:var(--s4)}
}

/* ── icons ───────────────────────────────────────────────────── */
.ico{display:inline-block;vertical-align:middle;flex:0 0 auto}
svg.ico{stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}

/* ── responsive density ──────────────────────────────────────── */
@media(max-width:820px){
  .g2,.g3,.g4{grid-template-columns:1fr}
  .section{padding:var(--s8) 0}
  .section.tight{padding:var(--s7) 0}
}
@media(max-width:640px){
  body{font-size:16.5px}
  .shell{padding:0 18px}
  .hero{padding:var(--s6) 0 var(--s7)}
  .hero::before{inset:-20% 0 60% -40%}
  .section{padding:var(--s7) 0}
  .section-head{margin-bottom:var(--s6)}
  .card,.surf-1{padding:var(--s4)}
  .demo{padding:var(--s4)}
  .btn{width:100%}
  .hero-actions .btn{width:100%}
  .btn.btn-inline{width:auto}
  .timeline .pt .lbl{font-size:11px}
}