/* Hero-only explorations (2026-10-23): the live landing's frame for one-screen pages.
   Every rule here is the landing's own (assets/landing.css) or reads a token (assets/tokens.css): nothing is coloured by hand. */
:root {
  --wrap: 1320px;
  --gutter: clamp(16px, 4.4vw, 56px);
  --gl: max(var(--gutter), env(safe-area-inset-left)); --gr: max(var(--gutter), env(safe-area-inset-right));
  --nav-h: 56px;
  --fs-hero: clamp(44px, 13vw, 64px);
  --fs-lede: 17px;
  --fs-body: 16.5px;
  /* the worst day is drenched in the Backer's deep indigo whatever the theme (BRAND 1; landing.css names these once) */
  --rp-bg: oklch(0.17 0.045 268); --rp-ink: oklch(0.96 0.006 268); --rp-ink-2: oklch(0.80 0.02 268); --rp-muted: oklch(0.72 0.03 268);
  --rp-rule: oklch(0.30 0.04 268); --rp-flame: oklch(0.72 0.165 46);
  --card-body: oklch(0.205 0.03 268);
}
@media (min-width: 768px) { :root { --fs-hero: clamp(52px, 6.4vw, 94px); --fs-lede: 20px; --fs-body: 18px; } }

h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }
b { font-weight: 640; }
.t { color: var(--trader-text); }
.bk { color: var(--backer-text); }
.skip { position: absolute; left: -9999px; top: 8px; z-index: var(--z-toast); padding: 10px 14px; background: var(--ink); color: var(--bg); border-radius: var(--r-1); }
.skip:focus { left: 12px; }

/* one screen: the hero takes what the nav and the footer leave */
body { min-height: 100dvh; display: flex; flex-direction: column; }
main { flex: 1 0 auto; display: flex; flex-direction: column; }

/* display type (BRAND 5): one family, contrast from width and weight */
.display { font-size: var(--fs-hero); line-height: 0.96; font-weight: 680; font-variation-settings: 'wdth' 114; letter-spacing: -0.04em; }
.lede { font-size: var(--fs-lede); line-height: 1.55; color: var(--ink-2); max-width: 44ch; }
.more { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 600; color: var(--ink);
  text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
@media (hover: hover) and (pointer: fine) { .more:hover { text-decoration-thickness: 2px; } }

/* ── nav (landing.css) ────────────────────────────────────────────────────────────────── */
.nav { position: fixed; z-index: var(--z-sticky); top: 0; left: 0; width: 100%; display: flex; align-items: center; gap: 8px;
  height: calc(var(--nav-h) + env(safe-area-inset-top)); padding: env(safe-area-inset-top) calc(6px + env(safe-area-inset-right)) 0 calc(16px + env(safe-area-inset-left));
  background: var(--bg); box-shadow: inset 0 -1px 0 var(--rule); }
.wordmark { display: inline-flex; align-items: center; gap: 9px; min-height: 44px; font-size: 22px; font-weight: 760; font-variation-settings: 'wdth' 122;
  letter-spacing: -0.045em; text-decoration: none; color: var(--ink); }
.wordmark::before, .cardmark { content: ''; --wm-h: 13px; flex: none; box-sizing: content-box; width: 22px; height: var(--wm-h);
  border: 2px solid var(--card-body); border-radius: 4.5px;
  background: linear-gradient(var(--coral), var(--coral)) 0 0 / 100% calc(var(--wm-h) * 0.34) no-repeat,
    linear-gradient(var(--indigo), var(--indigo)) 0 100% / 100% calc(var(--wm-h) * 0.66) no-repeat, var(--card-body); }
:root[data-theme="dark"] .wordmark::before, :root[data-theme="dark"] .cardmark { box-shadow: 0 0 0 1px var(--rule-strong); }
.nav-links { display: none; }
.theme { display: grid; place-items: center; flex: none; width: 44px; height: 44px; margin-left: auto; border: 0; border-radius: 50%; background: transparent; color: var(--ink-2);
  transition: background-color var(--t-ui) ease, color var(--t-ui) ease, transform var(--t-press) var(--ease-out); }
.theme:active { transform: scale(0.94); }
.theme svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
@media (hover: hover) and (pointer: fine) { .theme:hover { background: var(--surface-2); color: var(--ink); } }
.btn-nav { height: 44px; padding: 0 14px; font-size: 14px; }
@media (min-width: 768px) {
  .nav { top: 16px; left: 50%; transform: translateX(-50%); width: min(var(--wrap), calc(100% - 32px)); height: var(--nav-h); padding: 0 8px 0 20px; gap: 4px;
    border-radius: var(--r-pill); background: var(--glass); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px);
    box-shadow: inset 0 0 0 1px var(--rule), var(--shadow-soft); }
  .nav-links { display: flex; gap: 4px; margin-left: auto; }
  .nav-links a { padding: 9px 14px; border-radius: var(--r-pill); font-size: 14.5px; font-weight: 500; color: var(--ink-2); text-decoration: none; }
  @media (hover: hover) and (pointer: fine) { .nav-links a:hover { background: var(--surface-2); color: var(--ink); } }
  .theme { margin-left: 0; }
  .btn-nav { height: 40px; padding: 0 18px; font-size: 14.5px; margin-left: 4px; }
}

/* ── footer: the risk line stays on every version of the page ────────────────────────────── */
.foot { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-2); padding: var(--s-5) var(--gr) calc(var(--s-5) + env(safe-area-inset-bottom)) var(--gl);
  font-size: 13.5px; line-height: 1.55; color: var(--muted); box-shadow: inset 0 1px 0 var(--rule); }
.foot p { max-width: 72ch; }
.foot b { color: var(--ink); font-weight: 600; }
.foot a { color: var(--ink-2); text-underline-offset: 3px; white-space: nowrap; }
@media (min-width: 900px) {
  .foot { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); column-gap: var(--s-7); align-items: end;
    padding-left: max(var(--gl), calc((100% - var(--wrap)) / 2 + var(--gl))); padding-right: max(var(--gr), calc((100% - var(--wrap)) / 2 + var(--gr))); }
  .foot p + p { justify-self: end; text-align: right; }
}

/* ── the Arlo card (landing.css "the cards"; drawn by kit/card.js): a canvas and its print, both reaching past the stage so the
   card's shadow is not cut. The print is white in both themes, like a printed card, and never moves. ── */
:root {
  --card-print: oklch(1 0 0);
  --cp-x: min(24px, var(--gutter)); --cp-t: 24px; --cp-b: 48px;    /* how far the card's canvas reaches past its stage */
}
/* metallic gold (founder, 2026-10-23, 09i: "what if the back of the card was metallic gold and the front frame around the orange and
   blue was metallic gold as well"). Not in BRAND v2's palette: new colours for this exploration, named once here; kit/card.js reads
   the same tokens for the card's frame. The darkest band stays light enough for the dark print on it. */
:root {
  --gold-hi: oklch(0.93 0.075 95);     /* the highlight band */
  --gold-1: oklch(0.85 0.11 88);
  --gold-2: oklch(0.76 0.125 80);
  --gold-lo: oklch(0.67 0.115 72);     /* the shadow band */
  --gold-ink: oklch(0.25 0.045 62);    /* print on gold: a dark bronze, as if engraved */
}
.card-stage { position: relative; min-width: 0; width: 100%; aspect-ratio: 856 / 540; }
.card-stage canvas { position: absolute; display: block; left: calc(-1 * var(--cp-x)); top: calc(-1 * var(--cp-t)); width: calc(100% + 2 * var(--cp-x)); height: calc(100% + var(--cp-t) + var(--cp-b));
  pointer-events: none; }      /* it reaches past the card for the shadow, so it must never take a click meant for what sits there */
.card-stage .cprint { position: absolute; inset: calc(-1 * var(--cp-t)) calc(-1 * var(--cp-x)) calc(-1 * var(--cp-b)); pointer-events: none; }
.cprint svg { position: absolute; display: block; overflow: visible; text-rendering: geometricPrecision; }
.cprint .print { fill: var(--card-print); }
.cprint .pl { fill: none; stroke: var(--card-print); stroke-width: 3; }
.cprint .wm { font: 760 40px var(--font); font-variation-settings: 'wdth' 122; letter-spacing: -0.045em; }
.cprint .prod { font: 600 28px var(--font); font-variation-settings: 'wdth' 106; letter-spacing: 0.04em; }
.cprint .pan { font: 600 44px var(--font); font-variation-settings: 'wdth' 108; letter-spacing: 0.03em; }
.cprint .pan.cp-lines { font-size: 36px; letter-spacing: 0.01em; }      /* a value of several lines (kit/card.js shrinks it further if a line would not fit) */
.cprint .exp-k { font: 640 14px var(--font); letter-spacing: 0.18em; }
.cprint .exp { font: 640 26px var(--font); letter-spacing: 0.1em; }
.cprint .holder { font: 640 19px var(--font); letter-spacing: 0.16em; }
.cprint .cur { font: 640 26px var(--font); letter-spacing: 0.14em; }
.cprint .net { font: 800 46px var(--font); font-variation-settings: 'wdth' 118; letter-spacing: -0.01em; }
.cprint .net-k { font: 560 17px var(--font); letter-spacing: 0.04em; }

/* ── motion (BRAND 7: transform and opacity, eased out, none longer than --t-enter). Everything is visible by default. With
   motion on (.mo: never for ?still=1 or reduced motion) the bar drops in, headlines rise line by line out of a mask and ledes
   word by word (kit.js splits them once the fonts are in and puts them back after), and every other part rises once, in order. ── */
.kl-mask { padding-block: 0.12em; margin-block: -0.12em; }      /* a line's mask reaches past its tight line box, so no descender is cut */
.kit-word { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .mo .nav { animation: kit-nav var(--t-enter) var(--ease-out) both; }
  .mo [data-rise] { animation: kit-rise var(--t-enter) var(--ease-out) both; animation-delay: calc(var(--i, 0) * 80ms + 60ms); }
  .mo [data-split]:not(.split-on) { visibility: hidden; animation: kit-show 0s 2s forwards; }      /* hidden until split; shown anyway if the split never comes */
  .mo .kit-line { animation: kit-line var(--t-enter) var(--ease-out) var(--d, 0ms) both; }
  .mo .kit-word { animation: kit-word var(--t-enter) var(--ease-out) var(--d, 0ms) both; }
}
@keyframes kit-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes kit-nav { from { opacity: 0; translate: 0 -14px; } }
@keyframes kit-show { to { visibility: visible; } }
@keyframes kit-line { from { transform: translateY(125%); } }
@keyframes kit-word { from { opacity: 0; transform: translateY(0.4em); } }