/* ============================================================
   Rheon — stylesheet
   Tokens match the Figma "Components" page exactly.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --font-display: 'Unbounded', system-ui, -apple-system, sans-serif;
  --font-body: 'Stack Sans Headline', system-ui, -apple-system, sans-serif;
  --font-mono: 'DotGothic16', ui-monospace, 'SF Mono', monospace;
  /* Coverage tables only. DotGothic16 is a dot-matrix display face: it
     keeps the terminal register in labels and commands, but its dotted
     strokes hurt legibility when scanning rows of data at 12px. */
  --font-data: ui-monospace, 'SF Mono', 'Menlo', 'Consolas', monospace;

  --ink: #0C0C0D;   /* a true black to anchor the page */
  --ink-2: #474c52;
  --muted: #707880;
  --faint: #9aa0a8;

  --sky: #8fafc9;
  --sky-deep: #6e92b0;
  --sky-pale: #b7ccdd;
  --sky-mist: #dee7ed;

  --surface-tab-active: rgba(255, 255, 255, 0.92);
  --surface-tab-default: rgba(255, 255, 255, 0.24);
  --paper: #FAFAF8;        /* the one white. every surface uses it */
  --rule:  #DCDAD4;        /* the one hairline */
  --surface-card: var(--paper);
  --surface-panel: rgba(255, 255, 255, 0.46);
  --surface-console: rgba(255, 255, 255, 0.44);
  --surface-engine: rgba(23, 25, 28, 0.94);
  --surface-footer: rgba(247, 249, 250, 0.94);

  --hairline: rgba(89, 97, 105, 0.35);
  --border: rgba(115, 122, 133, 0.55);

  --grid: 1264px;   /* one content width; every container shares these edges */
  --gutter: 16px;
  --pad: 24px;
}

/* ---------- fonts ---------- */
@font-face {
  font-family: 'Unbounded';
  src: url('fonts/Unbounded-VariableFont_wght.woff2') format('woff2-variations');
  font-weight: 300 900;
  font-display: swap;
}
@font-face {
  font-family: 'DotGothic16';
  src: url('fonts/DotGothic16.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
/* Body font: Stack Sans Headline, self-hosted from Google Fonts (open
   licence, so it ships with the site). Variable weight axis 200-700 —
   declare the full range or the browser renders everything at the
   ExtraLight default. */
@font-face {
  font-family: 'Stack Sans Headline';
  src: url('fonts/StackSansHeadline.woff2') format('woff2-variations');
  font-weight: 200 700;
  font-display: swap;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  /* Sky, sampled from the hero image itself. The photo is alpha-masked
     above ~30% of the frame so this gradient IS the sky: no pixels, no
     compression, and the noisiest part of the source never ships. */
  background: linear-gradient(180deg,
    #C8D5DC 0%,
    #CBD6DB 4%,
    #D1D9DD 8%,
    #D6DCDF 12%,
    #DBE0E1 16%,
    #E1E3E1 20%,
    #E6E6E2 24%,
    #EAE9E4 28%,
    #EFE9E1 32%,
    #EFE7DE 40%,
    #E9E2D8 100%);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
input { font: inherit; }

/* ---------- page shell ---------- */
/* min-height must let EVERY state scroll to the same offset (995px).
   With 1672px the shorter states (/deposits, /cards) clamped early, so the
   hero showed a different part of the photo and looked like it had changed.
   995 + a 900px viewport = 1895; 1960 leaves headroom for taller viewports. */
/* The photo is a fixed 1500px so its framing never shifts between states.
   Where the page runs longer, this background continues the photo's bottom
   tone so the join is invisible instead of a hard edge. */
.page {
  position: relative;
  min-height: 1500px;
  overflow-x: clip;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: #E9EAE8;
}

/* Fixed height, not inset:0. With inset:0 the image box was the whole
   document, so a taller state (/ramps is 235px taller than /deposits)
   rescaled the photo and the framing visibly shifted between products.
   Pinned to the composition height it renders identically everywhere. */
/* Height must not be inset:0 (a taller state rescales the photo and the
   framing shifts between products), but it must still cover the whole
   page or the body gradient shows through as a band under the footer.
   100% of a page whose min-height is fixed gives both. */
/* Fixed height. inset:0 / height:100% both make the image box follow page
   length, and since states differ in height the photo rescaled and the
   framing visibly shifted between products. Pinned to the composition it
   renders identically everywhere; the footer sits on the photo at 1840. */
.page > picture {
  position: absolute;
  top: 0; left: 0; right: 0;
  /* 1500 is the framing height: taller and `cover` zooms the image so far
     the mountains leave the frame. The page can exceed it at some widths,
     so .page carries a matching background below — no hard edge, no zoom. */
  height: 1500px;
  z-index: 0;
  display: block;
}

.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 34%;   /* pull the range up; top left a dead sky band */
  z-index: 0;
}

/* Atmospheric haze over the lower composition. Warm white lifted from the
   sky end of the palette, strongest through the cloud band and fading out
   upward, so mountain -> cloud -> footer reads as continuous air rather
   than three stacked layers. */
.mist {
  position: absolute;
  left: 0; right: 0;
  top: 52%;
  height: 48%;
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(243, 242, 238, 0)    0%,
    rgba(243, 242, 238, 0.22) 20%,
    rgba(246, 245, 241, 0.52) 44%,
    rgba(249, 248, 245, 0.76) 66%,
    rgba(251, 251, 249, 0.90) 84%,
    rgba(252, 252, 250, 0.94) 100%);
}

.content { position: relative; z-index: 1; }


.container {
  width: 100%;
  /* min() keeps a real margin on narrower desktops: at 1280px the grid
     alone filled the viewport edge to edge with no breathing room. */
  max-width: min(calc(var(--grid) + var(--gutter) * 2), calc(100vw - 96px));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- nav ---------- */
.nav {
  display: flex;
  justify-content: center;
  padding-top: 64px;
}
.nav-inner {
  /* Figma 153:3 — 640x46 plate, rgba(255,255,255,0.34), centred in the
     1440 frame. Four 160px cells with hairline dividers between them. */
  display: flex;
  width: 640px;
  max-width: 100%;
  margin-inline: auto;
  height: 46px;
  background: rgba(255, 255, 255, 0.34);
  backdrop-filter: blur(10px);
}
.nav-inner a {
  width: 160px;          /* Figma: four equal 160px cells */
  flex: 0 0 160px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-decoration: none;
  border-right: 1px solid rgba(26, 28, 31, 0.14);
}
/* :last-child never matched — the burger <button> is the container's last
   child, so no <a> qualified and "Company" kept a trailing divider. */
.nav-inner a:last-of-type { border-right: 0; }
.nav-inner a:hover { background: rgba(255, 255, 255, 0.28); }
.nav-brand {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.02em;
}
.nav-burger { display: none; }

/* ---------- hero ---------- */
/* Figma frame is 1440x1672: nav at 64, headline at 196, panel at 990.
   The hero owns the top 59% of the composition — without a floor the
   panel rides up into the mountains on short viewports. */
/* Spacing taken from the Figma frame (1440x1672):
   headline 196 · sub 338 · cta 404 · proof 506 · panel 990.
   The 466px gap between the proof line and the panel is what lets
   the mountain range breathe — it is the composition, not padding. */
.hero { text-align: center; padding-top: 86px; padding-bottom: 0; }
.hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 52px;
  line-height: 1.14;
  letter-spacing: -0.025em;
  color: #2b2e31;
  margin: 0 auto 28px;
  /* The grid is wide for the panel, but a headline wants a measure, not
     the full span: at 1264px it broke "...for frontier / markets" with a
     single orphaned word. Centred within the grid, so edges still agree. */
  max-width: min(900px, 100%);
}
/* Figma 144:5 — Stack Sans Headline Regular, 17px, #42474d,
   line-height 1.25, letter-spacing 0.17px. */
.hero-sub {
  font-size: 17px;
  line-height: 1.25;
  letter-spacing: 0.17px;
  color: #42474d;
  margin: 0 auto 44px;   /* Figma: sub 338 -> cta 404 */
  max-width: min(760px, 100%);
}

/* Was 494px. That void is what made the page read as a photograph with a
   little content dropped into it: 548px of empty picture before the panel
   and 470px after, on a 1960px page. */
.cta { display: flex; justify-content: center; margin-bottom: 190px; }
.closer .cta { margin-bottom: 0; }
.cta input {
  width: 300px;
  height: 60px;
  padding: 0 18px;
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid var(--border);
  border-right: 0;
  color: var(--ink);
}
.cta input::placeholder { color: var(--muted); }
.cta input:focus {
  outline: none;
  border-color: var(--sky-deep);
  box-shadow: inset 0 0 0 1px var(--sky-deep);
}
.cta button {
  width: 150px;
  height: 60px;
  background: var(--paper);
  border: 1px solid var(--border);
  color: var(--ink);
  font-size: 14px;
  letter-spacing: 0.02em;
}
.cta button:hover { background: #fff; }

/* single hero CTA — replaces the old inline email field + button */
.cta-start {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  width: 240px;
  height: 60px;
  background: var(--paper);
  border: 1px solid var(--border);
  color: var(--ink);
  font-size: 15px;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 140ms ease, border-color 140ms ease;
}
.cta-start:hover { background: #fff; border-color: var(--ink); }
.cta-start:focus-visible { outline: 2px solid var(--sky-deep); outline-offset: 2px; }
.cta button:disabled, .modal button:disabled { opacity: 0.55; cursor: default; }

.cta-done {
  margin: 0;
  padding: 19px 24px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink);
}

/* Figma: bare text directly on the photograph. No chip, no blur —
   the glass panel is the only surface in this composition. */
.proof {
  text-align: center;
  font-size: 14px;
  letter-spacing: 0.03em;
  color: #2b3034;
  margin: 0 auto 478px;   /* Figma: proof 494 -> panel 990 */
  max-width: 100%;
}

/* ---------- terminal panel ---------- */
.panel {
  background: var(--surface-panel);
  backdrop-filter: blur(12px);
  border: 1px solid var(--rule);
  /* Figma: panel 990..1432. Tabs start at 1042 (52 below the top),
     cards end at 1402, leaving 30 below. Not a uniform pad. */
  padding: var(--gutter);   /* even inset; nothing sits above the tab row */
  margin-bottom: 56px;
}
/* card-network marks. Sized to sit on the text baseline of the
   meta row rather than as icons in their own right. */
.marks { display: inline-flex; align-items: center; gap: 12px; }
.mark { height: 20px; width: auto; display: block; }
.mark-mc { height: 22px; }
/* the marks stand alone on their row, no leading icon */
.meta-marks { padding-left: 0; }
.wallet-marks { display: inline-flex; align-items: center; gap: 16px; }
.wallet-marks .mark { height: 22px; }

/* conversion block, below the products */
.closer {
  position: relative;
  z-index: 1;
  text-align: center;
  padding: 0 0 104px;
  margin-top: 0;
}
.closer .proof { margin: 0 auto 26px; }
.closer .cta { margin-bottom: 0; }

/* command tabs */
.tabs { display: flex; gap: 2px; margin-bottom: 2px; }
.tab {
  flex: 1;
  padding: 13px 18px;
  background: var(--surface-tab-default);
  border: 0;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-align: left;
  position: relative;
}
.tab:hover { background: rgba(255, 255, 255, 0.4); }
.tab[aria-selected='true'] {
  background: var(--surface-tab-active);
  color: var(--ink);
  box-shadow: inset 0 -2px 0 var(--sky);
}
.caret {
  display: none;
  width: 7px;
  height: 15px;
  margin-left: 6px;
  background: var(--ink);
  vertical-align: -2px;
}
.tab[aria-selected='true'] .caret {
  display: inline-block;
  animation: blink 1.1s steps(2) infinite;
}
@keyframes blink { 0%, 49% { opacity: 0.85 } 50%, 100% { opacity: 0 } }

/* ---------- use-case cards ---------- */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; }
/* Four columns need ~1000px; below that the titles broke onto four lines. */
@media (max-width: 1040px) and (min-width: 821px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  /* Two rows make the page taller than the 1500px photo, so the photo edge
     cut through the closer CTA. Tighten this range so it fits. */
  .cta { margin-bottom: 96px; }
  .panel { margin-bottom: 40px; }
  .closer { padding-bottom: 64px; }
}
.card {
  background: var(--surface-card);
  border: 0;
  padding: 40px 30px 36px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  text-align: left;
  text-decoration: none;
  color: inherit;
}
.card:hover { background: var(--paper); }
.card-icon { width: 36px; height: 36px; margin-bottom: 44px; }
.card h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 22px;
  line-height: 1.32;
  letter-spacing: -0.02em;
  margin: 0 0 20px;
}
.card-meta { display: flex; flex-direction: column; gap: 10px; }
.meta-row { display: flex; align-items: center; gap: 10px; }
.meta-row > img { width: 16px; height: 16px; opacity: 0.7; }
.meta-row span {
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.brand-marks { display: flex; align-items: center; gap: 14px; }
.brand-marks img { height: 13px; width: auto; opacity: 0.75; }
.card-chevron { display: none; }

/* ---------- detail states ---------- */
.detail { display: none; }
.detail.is-active { display: block; }
.cards-view.is-hidden { display: none; }

.statement {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 31px;
  line-height: 1.26;
  letter-spacing: -0.022em;
  margin: 28px 0 14px;
  max-width: 100%;   /* panel is 1296 wide; 664 forced needless wraps */
}
.lede {
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: #3d4247;
  margin: 0 0 34px;
  max-width: 70ch;
}
.section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: #5c6166;
  margin: 0 0 22px;
}

/* scheme diagram */
.scheme { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.scheme-col { display: flex; flex-direction: column; gap: 4px; }
.node {
  background: var(--surface-card);
  padding: 14px 16px;
  min-width: 180px;
}
.node b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: -0.01em;
}
.node span {
  display: block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--faint);
  margin-top: 6px;
}
.node.engine { background: var(--surface-engine); }
.node.engine b { color: #fff; }
.node.engine span { color: #adb4bb; }
.connector { flex: 1; height: 1px; background: var(--hairline); min-width: 40px; }

/* why box */
.why {
  background: rgba(255, 255, 255, 0.68);
  padding: 22px 24px;
  margin-top: 30px;
}
.why p {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.75;
  letter-spacing: 0.03em;
  color: #3d4247;
}

/* coverage grid */
.coverage { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 30px; }
.coverage-cell { background: rgba(255, 255, 255, 0.74); padding: 16px; }
.coverage-cell b {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
}
.flags { display: flex; gap: 6px; margin-bottom: 12px; }
.flags img { width: 30px; height: 20px; }
.coverage-cell small {
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--muted);
}

/* terminal accordion */
/* direction switcher — on-ramp / off-ramp.
   Uses data-dir (NOT data-tab) so page navigation can't hijack it. */
.switch {
  display: flex;
  gap: 0;
  margin: 18px 0 0;
  border-bottom: 1px solid rgba(26, 28, 31, 0.10);
}
.switch-opt {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  padding: 9px 18px;
  margin-bottom: -1px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--muted);
  cursor: pointer;
  transition: color 120ms ease, border-color 120ms ease;
}
.switch-opt:hover { color: var(--ink-2); }
.switch-opt[aria-selected="true"] {
  color: var(--ink);
  border-bottom-color: var(--sky);
}
.switch-opt:focus-visible {
  outline: 2px solid var(--sky);
  outline-offset: -2px;
}

.console {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, 0.44) 0%,
    rgba(246, 249, 251, 0.60) 55%,
    rgba(238, 243, 247, 0.72) 100%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  padding: 20px 24px;
  margin-top: 8px;
}
.console-cmd {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0 0 22px;
}
.acc-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 0;
  padding: 0 0 8px;
  background: none;
  border: 0;
  border-bottom: 1px solid rgba(89, 97, 105, 0.18);
  margin-bottom: 12px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--ink);
}
.acc-row .chev { width: 22px; color: #464b50; }
.acc-row .count {
  margin-left: auto;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.acc-row[aria-expanded='true'] { color: var(--ink); }
.acc-body { display: none; padding: 0 0 18px 22px; }
.acc-body.is-open { display: block; }

table { width: 100%; border-collapse: collapse; }
th {
  font-family: var(--font-data);
  font-size: 10px;
  letter-spacing: 0.16em;
  font-weight: 400;
  color: var(--faint);
  text-align: left;
  padding: 0 12px 14px 0;
}
td {
  font-family: var(--font-data);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: #3d4247;
  padding: 5px 12px 5px 0;
}
td:first-child { color: var(--ink); }

/* capability rows */
.caps { display: flex; flex-direction: column; gap: 7px; }
.cap {
  background: rgba(255, 255, 255, 0.8);
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 24px;
}
.cap b {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 14px;
  letter-spacing: -0.01em;
  min-width: 240px;
}
.cap span { font-size: 12px; color: var(--muted); }
.cap .wallets { display: flex; align-items: center; gap: 12px; min-width: 240px; }
.cap .wallets img { height: 17px; width: auto; }

.card-face {
  background: var(--surface-engine);
  padding: 22px;
  width: 300px;
  min-height: 182px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.card-face .brand {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.02em;
  color: #fff;
}
.card-face .num {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: #ccd3da;
}
.card-face .row { display: flex; justify-content: space-between; align-items: flex-end; }
.card-face .name {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #99a1a9;
}
.card-face .network {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: #d8dee4;
}
.cards-layout { display: flex; gap: 28px; align-items: stretch; }
.cards-layout .caps { flex: 1; }

.geo {
  background: rgba(255, 255, 255, 0.72);
  padding: 16px 18px;
  margin-top: 28px;
}
.geo small {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--faint);
  margin-bottom: 10px;
}
.geo b { font-size: 14px; font-weight: 400; letter-spacing: 0.02em; }

/* back control — mobile only */
.back { display: none; }

/* ---------- footer ---------- */
/* Figma: the footer band sits INSIDE the 1672px composition at y=1552,
   full width, 120px tall, rgba(247,249,250,0.94) — translucent, so the
   photograph continues behind it to the bottom of the frame. */
.footer {
  /* In normal flow, not pinned: the detail states are taller than the
     1672px index frame, and an absolutely positioned band would float
     over them and swallow clicks. .page's min-height puts it at the
     Figma y on the index state; the photo runs behind it either way. */
  position: relative;
  margin-top: auto;
  min-height: 120px;        /* Figma band height */
  padding-top: 96px;        /* longer runway for the fade */
  display: flex;
  align-items: center;
  z-index: 1;
  /* Fade in from transparent at the top edge: a flat 94% band cut a hard
     line across the clouds. This lets them dissolve into the footer. */
  background: linear-gradient(180deg,
    rgba(250, 250, 248, 0) 0%,
    rgba(250, 250, 248, 0.18) 12%,
    rgba(250, 250, 248, 0.46) 30%,
    rgba(250, 250, 248, 0.78) 52%,
    rgba(250, 250, 248, 0.95) 74%,
    var(--paper) 100%);
  border-top: 0;
  padding: 0;
}
.footer-inner { display: flex; align-items: baseline; width: 100%; }
.footer-brand {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.02em;
  width: 240px;
}
.footer a {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--ink-2);
  text-decoration: none;
  margin-right: 40px;
}
.footer a:hover { color: var(--ink); }
.footer .copy {
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
}

/* ---------- docs modal ---------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 10;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(20, 23, 26, 0.55);
}
.modal.is-open { display: flex; }
.modal-sheet {
  background: rgba(255, 255, 255, 0.97);
  width: 520px;
  max-width: calc(100% - 32px);
  padding: 44px 40px;
  position: relative;
}
.modal h2 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 24px;
  letter-spacing: -0.022em;
  margin: 0 0 14px;
}
.modal p { font-size: 13.5px; line-height: 1.55; color: var(--ink-2); margin: 0 0 34px; }
.field { margin-bottom: 24px; }
.field label {
  display: block;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--muted);
  margin-bottom: 8px;
}
.field input {
  width: 100%;
  height: 50px;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--border);
  /* Chrome's UA stylesheet rounds form controls. The design is
     radius 0 everywhere, so surrender the native appearance. */
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  font: inherit;
  color: var(--ink);
}
.field input:focus { outline: none; border-color: var(--sky-deep); box-shadow: inset 0 0 0 1px var(--sky-deep); }
.note { font-size: 11.5px; color: var(--muted); margin: 0 0 24px; }
.modal button[type='submit'] {
  appearance: none;
  -webkit-appearance: none;
  border-radius: 0;
  width: 100%;
  height: 54px;
  background: var(--ink);
  color: #fff;
  border: 0;
  font-size: 14.5px;
  letter-spacing: 0.02em;
}
.modal-close {
  position: absolute;
  top: 30px;
  right: 34px;
  background: none;
  border: 0;
  font-size: 22px;
  color: var(--muted);
  line-height: 1;
}
.modal-sent { text-align: center; }
.modal-sent .tick {
  width: 44px;
  height: 44px;
  border: 1.4px solid var(--ink);
  border-radius: 50%;
  margin: 8px auto 24px;
  display: grid;
  place-items: center;
  font-size: 18px;
}

/* ============================================================
   MOBILE  —  cards become the navigation, tabs are removed
   ============================================================ */
@media (max-width: 820px) {
  .nav { padding-top: 20px; }
  .nav-inner {
    width: 100%;
    justify-content: space-between;
    align-items: center;
    padding: 0 14px;
    height: 44px;
  }
  .nav:not(.is-open) .nav-inner a:not(.nav-brand) { display: none; }
  /* Open menu: brand + burger stay on the first row, links stack
     beneath. The brand/burger row keeps its original height so the
     header doesn't jump when the menu opens. */
  .nav.is-open .nav-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    height: auto;
    padding-bottom: 6px;
  }
  .nav.is-open .nav-inner a.nav-brand { grid-row: 1; grid-column: 1; align-self: center; }
  .nav.is-open .nav-burger { grid-row: 1; grid-column: 2; align-self: center; }
  .nav.is-open .nav-inner a:not(.nav-brand) {
    grid-column: 1 / -1;
    display: block;
    width: 100%;
    background: none;
    text-align: left;
    padding: 13px 0 13px 2px;
    border-right: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.42);
  }
  .nav-inner a.nav-brand { width: auto; border: 0; padding: 0; text-align: left; }
  .nav-burger {
    display: block;
    width: 20px;
    background: none;
    border: 0;
    padding: 0;
  }
  .nav-burger span {
    display: block;
    height: 1.5px;
    background: var(--ink);
    opacity: 0.75;
    margin: 5px 0;
  }

  /* Arthur: "let people see it first with the main statement, then scroll
     at least once before they see the products". The hero holds the first
     screen on mobile; the product cards start below the fold. */
  /* Hero still holds the first screen (Arthur: see the statement, scroll
     once before products) but sits nearer the top rather than centring in
     a tall box, which left a dead gap under the nav. */
  /* The desktop container reserves 96px of side margin; on a 390px screen
     that is a third of the width. Mobile gets a real edge instead. */
  .container { max-width: 100%; padding-inline: 18px; }

  /* Arthur: see the statement, scroll once before the products. The hero
     holds the first screen, but 100svh minus a small nav left the panel
     452px below the fold with nothing in between. */
  .hero {
    padding-top: 96px;
    min-height: calc(100svh - 80px);
  }

  /* desktop's 190px hero gap left a 402px void before the panel */
  .cta { margin-bottom: 40px; }
  .hero h1 { font-size: 26px; line-height: 1.30; margin-bottom: 22px; }
  .hero-sub {
    font-size: 13.5px;
    line-height: 1.45;
    margin-inline: auto;
    margin-bottom: 30px;
    max-width: 300px;      /* forces an even two-line split */
    text-wrap: balance;
  }

  .cta { flex-direction: column; }
  .cta input, .cta button { width: 100%; height: 52px; }
  .cta input { border-right: 1px solid var(--border); border-bottom: 0; }
  .cta-start { width: 100%; height: 52px; }
  .cta-done {
  margin: 0;
  padding: 19px 24px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid var(--border);
  font-size: 14px;
  letter-spacing: 0.02em;
  color: var(--ink);
}

.proof { font-size: 12px; margin-bottom: 46px; }

  .panel { padding: 16px; margin-bottom: 80px; }

  /* the tab row does not exist on mobile */
  .tabs { display: none; }

  /* cards become the nav */
  .cards { grid-template-columns: 1fr; gap: 2px; }
  .card {
    min-height: 0;
    padding: 18px 16px;
    display: grid;
    grid-template-columns: 24px 1fr 16px;
    grid-template-areas: 'icon title chev' 'icon meta chev';
    column-gap: 16px;
    align-items: center;
  }
  .card-icon { grid-area: icon; width: 24px; height: 24px; margin: 0; }
  .card h3 { grid-area: title; font-size: 13.5px; margin: 0 0 4px; }
  .card-meta { grid-area: meta; flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .meta-row > img { display: none; }
  .meta-row span { font-size: 11px; }
  .card-chevron {
    grid-area: chev;
    display: block;
    font-family: var(--font-mono);
    font-size: 18px;
    color: var(--muted);
    text-align: right;
  }
  .brand-marks img { height: 11px; }

  /* back control replaces the tabs on detail screens */
  .detail.is-active .back {
    display: flex;
    align-items: center;
    gap: 10px;
    background: none;
    border: 0;
    border-bottom: 1px solid rgba(89, 97, 105, 0.25);
    width: 100%;
    padding: 0 0 14px;
    margin-bottom: 4px;
    font-family: var(--font-mono);
    font-size: 13px;
    letter-spacing: 0.06em;
    color: var(--ink);
  }
  .back .arrow { font-size: 18px; color: var(--muted); }

  .statement { font-size: 21px; margin-top: 22px; }
  .lede { font-size: 12.5px; margin-bottom: 26px; }
  .section-label { font-size: 11px; margin-bottom: 16px; }

  /* scheme goes vertical */
  .scheme { flex-direction: column; align-items: stretch; gap: 0; }
  .scheme-col { gap: 0; }
  .node { min-width: 0; width: 100%; margin-bottom: 0; }
  .scheme-col .node + .node { margin-top: 22px; }
  .connector {
    width: 100%;
    height: 22px;
    background: none;
    min-width: 0;
    display: grid;
    place-items: center;
    color: var(--muted);
    font-family: var(--font-mono);
    font-size: 12px;
  }
  .connector::after { content: '↓'; }

  .coverage { grid-template-columns: 1fr 1fr; }
  .flags img { width: 24px; height: 16px; }

  .cards-layout { flex-direction: column; }
  .card-face { width: 100%; }
  .cap { flex-direction: column; align-items: flex-start; gap: 6px; }
  .cap b { min-width: 0; }
  .cap .wallets { min-width: 0; }

  .console { padding: 16px; }
  .acc-body { padding-left: 18px; }
  table { font-size: 11px; }

  .footer { padding: 28px 0; }
  .footer-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .footer-brand { width: auto; }
  .footer-links { display: flex; gap: 0; flex-wrap: wrap; }
  .footer a { font-size: 12px; margin-right: 26px; }
  .footer .copy { margin-left: 0; }

  .modal { align-items: flex-end; }
  .modal-sheet { width: 100%; max-width: none; padding: 28px 24px 34px; }
  .modal-sheet::before {
    content: '';
    display: block;
    width: 36px;
    height: 4px;
    background: rgba(112, 120, 128, 0.4);
    margin: 0 auto 20px;
  }
  .modal-close { display: none; }
  .modal h2 { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}