/* ============================================================================
   DeepFlow design system
   ----------------------------------------------------------------------------
   One token layer, two themes, no per-component colour literals. The palette is
   a neutral graphite/warm-white foundation plus ONE accent family (mineral
   green -> electric mint) and ONE secondary signal (warm amber) used only where
   a route is rejected or constrained. Amber, not red: a filtered candidate is a
   normal outcome, not an error, and colouring it red would misreport the
   product. Red is reserved for genuine failure states.

   Legacy alias block at the end of :root keeps the pages this redesign does not
   touch - the two concept studies, dashboard, login and the legal pages -
   rendering against the new palette instead of forking a second colour system.
   ========================================================================== */

/* ---------- faces: three, all self-hosted, no external font requests ------ */
@font-face {
  font-family: "Schibsted Grotesk";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("fonts/schibsted-grotesk-latin.woff2") format("woff2");
}
@font-face {
  font-family: Inter;
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("fonts/inter-latin.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-mono-500.woff2") format("woff2");
}

:root {
  color-scheme: light;

  /* ---- foundation ---- */
  --paper: #f7f6f2;          /* warm white */
  --paper-2: #f1f0ea;
  --surface: #ffffff;
  --surface-2: #f4f3ee;
  --surface-sunk: #edece5;
  --ink: #0f1618;            /* near-black graphite */
  --ink-2: #2b3538;
  /* Both greys carry real copy at 10-14px, so both clear 4.5:1 against every
     light surface token, not just --paper. The previous --faint (#7d888c) sat
     at 3.07-3.64 on these backgrounds: fine for a hairline, a failure for the
     trust line, the visualization status and the footer. --muted moved down
     with it to keep a visible step between the two. */
  --muted: #4c585c;          /* 6.2-7.35:1 on light surfaces */
  --faint: #5a6468;          /* 4.55-5.39:1 on light surfaces */
  --line: #e0ded5;
  --line-strong: #cbc8bd;

  /* ---- brand: mineral green base, electric mint accent ---- */
  --mineral: #0b322c;
  --mineral-2: #10453c;
  --graphite: #0c1214;       /* inverted section base */
  --accent: #00b184;         /* graphics, fills, indicators */
  --accent-strong: #056c56;  /* accent used as TEXT on light surfaces (AA) */
  --accent-quiet: #dcf1e9;
  --accent-line: #a9dccb;

  /* ---- secondary signal: rejected / constrained ---- */
  --signal: #9a5f14;         /* text-safe on light */
  --signal-graphic: #c8892f;
  --signal-quiet: #f6ecd9;

  /* ---- true error, used only for real failures ---- */
  --danger: #a33124;

  /* ---- inverted surfaces (API section, code, instrument panels) ---- */
  --inv-bg: #0c1214;
  --inv-bg-2: #131b1d;
  --inv-line: #242f31;
  --inv-line-2: #354245;
  --inv-ink: #eceee9;
  --inv-muted: #a0aca9;
  --inv-faint: #7f8b88;
  --inv-accent: #4fe3b0;

  /* ---- visualization tokens: the only contract the hero canvases read ---- */
  --viz-bg: #f7f6f2;
  --viz-ink: #0f1618;
  --viz-muted: #64737a;
  --viz-line: #cbc8bd;
  --viz-accent: #00a67c;
  --viz-accent-soft: #4a9d84;
  --viz-signal: #c8892f;

  /* ---- spacing scale ---- */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 64px;
  --s-9: 96px;
  --s-10: 128px;
  --gutter: clamp(20px, 4vw, 48px);
  --shell: 1240px;
  --section-y: clamp(72px, 9vw, 132px);

  /* ---- type ---- */
  --display: "Schibsted Grotesk", Inter, system-ui, sans-serif;
  --body: Inter, system-ui, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, monospace;
  --t-hero: clamp(46px, 7.4vw, 92px);
  --t-h2: clamp(30px, 3.6vw, 46px);
  --t-h3: clamp(19px, 1.6vw, 22px);
  --t-lede: clamp(16px, 1.25vw, 18px);
  --t-body: 16px;
  --t-small: 13.5px;
  --t-micro: 11px;
  --tracking-eyebrow: .14em;

  /* ---- borders, radii, elevation (crisp lines, not heavy shadows) ---- */
  --r-xs: 6px;
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 20px;
  --r-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(15, 22, 24, .04);
  --shadow: 0 1px 2px rgba(15, 22, 24, .04), 0 10px 28px rgba(15, 22, 24, .06);
  --shadow-lg: 0 2px 6px rgba(15, 22, 24, .05), 0 26px 60px rgba(15, 22, 24, .09);

  /* ---- motion ---- */
  --ease: cubic-bezier(.22, .72, .16, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-spring: cubic-bezier(.2, .9, .25, 1.12);
  --dur-1: 160ms;
  --dur-2: 220ms;
  --dur-3: 360ms;
  --dur-swap: 380ms;

  --header-h: 64px;
  --focus: #05604d;

  /* ================= legacy aliases: pages outside this redesign ========= */
  --surface-soft: var(--surface-2);
  --forest: var(--mineral);
  --forest-2: var(--mineral-2);
  --night: var(--graphite);
  --mint: var(--accent);
  --mint-soft: var(--accent-quiet);
  --warning: var(--signal);
  --ink-surface: var(--inv-bg-2);
  --ink-surface-2: #1a2325;
  --ink-line: var(--inv-line);
  --ink-line-2: var(--inv-line-2);
  --ink-body: var(--inv-ink);
  --ink-muted: var(--inv-muted);
  --ink-faint: var(--inv-faint);
  --r-1: var(--r-sm);
  --r-2: var(--r-md);
  --r-3: var(--r-lg);
}

[data-theme="dark"] {
  color-scheme: dark;

  --paper: #0a0f10;
  --paper-2: #0d1314;
  --surface: #111819;
  --surface-2: #161f20;
  --surface-sunk: #0c1213;
  --ink: #eaece7;
  --ink-2: #cbd2ce;
  --muted: #9caaa6;
  --faint: #8b9793;
  --line: #222d2e;
  --line-strong: #33403f;

  --mineral: #7fe8c2;
  --mineral-2: #a4f0d5;
  --graphite: #060a0b;
  --accent: #4fe3b0;
  --accent-strong: #6fe9c0;
  --accent-quiet: #10302a;
  --accent-line: #23594c;

  --signal: #e2b075;
  --signal-graphic: #d79f5c;
  --signal-quiet: #2c2418;

  --danger: #e08a7c;

  --inv-bg: #060a0b;
  --inv-bg-2: #0e1516;
  --inv-line: #1e2829;
  --inv-line-2: #2d3a3a;
  --inv-ink: #eaece7;
  --inv-muted: #9caaa6;
  --inv-faint: #7d8a86;
  --inv-accent: #4fe3b0;

  /* On a near-black canvas every mark has to be LIGHTER than the ground, so
     these are not the light values dimmed - they are lifted. The first pass
     reused light-mode logic (`soft` = a darker accent, `line` = a dark hairline)
     and the candidate ladder's bars disappeared completely against #0a0f10 at
     the low alphas the modules composite with. */
  --viz-bg: #0a0f10;
  --viz-ink: #eaece7;
  --viz-muted: #93a29e;
  --viz-line: #3c4c4c;
  --viz-accent: #4fe3b0;
  --viz-accent-soft: #58a98f;
  --viz-signal: #cf9a55;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 12px 30px rgba(0, 0, 0, .34);
  --shadow-lg: 0 2px 6px rgba(0, 0, 0, .4), 0 30px 68px rgba(0, 0, 0, .44);
  --focus: #6fe9c0;
}

/* The marketing site shares lineage with 1delta Labs: black structure, white
   copy and a pale mint action colour. Keep these overrides on the landing root
   so the denser authenticated dashboard retains its analytics palette. */
.landing {
  --r-sm: 8px;
  --r-md: 8px;
  --r-lg: 10px;
  --control-h: 48px;
  --control-compact-h: 42px;
  --control-bg: color-mix(in srgb, var(--surface) 82%, transparent);
  --control-embedded-bg: var(--surface-2);
  --control-line: var(--line-strong);
  --control-hover: var(--muted);
}
.landing[data-theme="dark"] {
  --paper: #030404;
  --paper-2: #080b0a;
  --surface: #0b0f0e;
  --surface-2: #101513;
  --surface-sunk: #060908;
  --ink: #ffffff;
  --ink-2: #edf3f1;
  --muted: #c0c9c6;
  --faint: #919d99;
  --line: #202724;
  --line-strong: #3b4944;
  --mineral: #b2fff6;
  --mineral-2: #d1fffa;
  --accent: #8df5df;
  --accent-strong: #a5f8e7;
  --accent-quiet: #0d2823;
  --accent-line: #32645b;
  --graphite: #000000;
  --inv-bg: #000000;
  --inv-bg-2: #090d0c;
  --inv-line: #202724;
  --inv-line-2: #3b4944;
  --inv-ink: #ffffff;
  --inv-muted: #c0c9c6;
  --inv-faint: #919d99;
  --inv-accent: #b2fff6;
  --viz-bg: #030404;
  --viz-ink: #ffffff;
  --viz-muted: #a9b5b1;
  --viz-line: #43514d;
  --viz-accent: #8df5df;
  --viz-accent-soft: #62b5a4;
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: none;
  --focus: #b2fff6;
}

/* ========================================================================== */
/* base                                                                        */
/* ========================================================================== */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 28px);
  -webkit-text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--t-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: -.022em;
  line-height: 1.06;
  margin: 0;
  text-wrap: balance;
}
h1 em, h2 em, h3 em { font-style: normal; color: var(--accent-strong); }
p { margin: 0; text-wrap: pretty; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img, svg, canvas { display: block; max-width: 100%; }
::selection { background: var(--accent); color: #05201a; }

:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-y); position: relative; }
.section + .section { border-top: 1px solid var(--line); }

.skip {
  position: fixed;
  z-index: 200;
  left: var(--s-4);
  top: -60px;
  padding: 12px 18px;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  background: var(--ink);
  color: var(--paper);
  font-size: var(--t-small);
  transition: top var(--dur-2) var(--ease);
}
.skip:focus { top: 0; }

/* Visible to assistive technology only. The comparison table needs a caption
   for a screen reader; on screen the panel heading already says it. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  color: var(--muted);
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  width: 5px;
  height: 5px;
  flex: none;
  border-radius: 50%;
  background: var(--accent);
}
.eyebrow.on-dark { color: var(--inv-muted); }

.section-head { display: grid; gap: var(--s-5); max-width: 720px; margin-bottom: var(--s-8); }
.section-head h2 { font-size: var(--t-h2); }
.section-head p { color: var(--muted); font-size: var(--t-lede); line-height: 1.65; }
.section-head.wide { max-width: 860px; }

.mono-label {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}


/* ========================================================================== */
/* buttons                                                                     */
/* ========================================================================== */
.btn {
  --btn-bg: var(--ink);
  --btn-fg: var(--paper);
  --btn-line: var(--ink);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 46px;
  padding: 12px 22px;
  border: 1px solid var(--btn-line);
  border-radius: var(--r-pill);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -.005em;
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-spring),
              background-color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn:active { transform: translateY(1px); box-shadow: var(--shadow-sm); }
.btn .arw { transition: transform var(--dur-2) var(--ease-spring); }
.btn:hover .arw { transform: translateX(3px); }
.hero-actions .btn-secondary:hover .arw { transform: translateY(3px); }

.btn-primary {
  --btn-bg: var(--mineral);
  --btn-line: var(--mineral);
  --btn-fg: #f4fbf8;
  box-shadow: var(--shadow-sm);
}
[data-theme="dark"] .btn-primary { --btn-fg: #05201a; }
.btn-primary:hover { --btn-bg: var(--mineral-2); --btn-line: var(--mineral-2); }

.btn-secondary { --btn-bg: transparent; --btn-fg: var(--ink); --btn-line: var(--line-strong); }
.btn-secondary:hover { --btn-line: var(--ink); background: color-mix(in srgb, var(--ink) 5%, transparent); }

.btn-ghost { --btn-bg: transparent; --btn-fg: var(--ink); --btn-line: transparent; padding-inline: 12px; }
.btn-ghost:hover { --btn-line: var(--line-strong); }

.btn-light { --btn-bg: var(--inv-accent); --btn-line: var(--inv-accent); --btn-fg: #04231c; }
.btn-light:hover { --btn-bg: #6fe9c0; --btn-line: #6fe9c0; }

.btn-sm { min-height: 40px; padding: 8px 16px; font-size: 13px; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--accent-strong);
  font-size: 14px;
  font-weight: 500;
  border-bottom: 1px solid color-mix(in srgb, var(--accent-strong) 32%, transparent);
  padding-bottom: 1px;
  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.text-link:hover { color: var(--ink); border-bottom-color: var(--accent-strong); }
/* Directional links advance without moving the surrounding text. */
.text-link .arw { transition: transform var(--dur-2) var(--ease-spring); }
.text-link:hover .arw { transform: translateX(3px); }
.text-link.on-dark { color: var(--inv-accent); border-bottom-color: color-mix(in srgb, var(--inv-accent) 34%, transparent); }

.icon-btn {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-spring),
              color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease),
              background-color var(--dur-2) var(--ease);
}
.icon-btn:hover { color: var(--ink); border-color: var(--line-strong); background: var(--surface-2); }
.icon-btn:active { transform: scale(.96); }
.icon-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.icon-btn .moon { display: none; }
[data-theme="dark"] .icon-btn .moon { display: block; }
[data-theme="dark"] .icon-btn .sun { display: none; }

/* ========================================================================== */
/* header                                                                      */
/* ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  height: var(--header-h);
  display: flex;
  align-items: center;
  gap: var(--s-6);
  padding-inline: var(--gutter);
  border-bottom: 1px solid transparent;
  transition: background var(--dur-3) var(--ease), border-color var(--dur-3) var(--ease),
              backdrop-filter var(--dur-3) var(--ease);
}
.site-header.is-stuck {
  background: color-mix(in srgb, var(--paper) 82%, transparent);
  border-bottom-color: var(--line);
  backdrop-filter: blur(14px) saturate(1.4);
}

/* The sprite is a definitions-only element: it must occupy no space. */
.mark-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.brand-slot { position: relative; display: flex; align-items: center; gap: 2px; flex: none; }
.brand { display: inline-flex; align-items: center; gap: 10px; flex: none; }
.brand-mark { width: 26px; height: 26px; color: inherit; }
/* `> path`, not descendant: `login`, `delivery-field` and `outcome-loop`
   still carry their mark inline as bare paths with no fill or
   stroke of their own, and SVG's initial fill is black, so without this they
   render as solid blobs. The sprite marks reference a <symbol> through <use>,
   whose shadow content this cannot and must not reach - those paths carry
   their own stroke, including the accent one. */
.brand-mark > path {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Mark picker: a 24px disclosure beside the wordmark, invisible until hovered
   or focused so the header stays a header rather than a settings bar. */
.logo-btn {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--faint);
  opacity: 0;
  cursor: pointer;
  transition: opacity var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}
.logo-btn svg { width: 12px; height: 12px; }
.brand-slot:hover .logo-btn,
.logo-btn:focus-visible,
.logo-btn[aria-expanded="true"] { opacity: 1; }
.logo-btn:hover, .logo-btn[aria-expanded="true"] { color: var(--ink); }
.logo-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
.logo-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
/* Reveal-on-hover is a pointer affordance. Without a hover-capable pointer the
   control would be undiscoverable, so it stays visible and takes the 44px
   target the rest of the site commits to. Keyed on `hover: none` rather than a
   width breakpoint: a touch laptop at 1440px has the same problem as a phone. */
@media (hover: none) {
  .logo-btn { width: 44px; height: 44px; opacity: 1; }
  .logo-menu li { min-height: 44px; }
}

.logo-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 8px);
  left: 0;
  min-width: 190px;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
}
.logo-menu[hidden] { display: none; }
.logo-menu li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 6px 10px;
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: 13px;
  cursor: pointer;
  transition: background-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.logo-menu li svg { width: 22px; height: 22px; flex: none; color: var(--ink); }
.logo-menu li:hover { background: var(--surface-2); color: var(--ink); }
.logo-menu li[aria-selected="true"] { background: var(--accent-quiet); color: var(--accent-strong); }
.logo-menu li:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.brand-word {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -.03em;
}
.brand-word b { font-weight: 500; color: var(--accent-strong); }

.site-nav { display: flex; align-items: center; gap: 4px; margin-inline: auto; }
.site-nav a {
  position: relative;
  padding: 9px 13px;
  border-radius: var(--r-sm);
  color: var(--muted);
  font-size: 14px;
  transition: color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
}
.site-nav a:hover { color: var(--ink); background: color-mix(in srgb, var(--ink) 4%, transparent); }
.site-nav a[aria-current="true"] { color: var(--ink); }
.site-nav a::after {
  content: "";
  position: absolute;
  left: 13px;
  right: 13px;
  bottom: 2px;
  height: 1.5px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-2) var(--ease-out);
}
.site-nav a:hover::after,
.site-nav a[aria-current="true"]::after { transform: scaleX(1); }
.header-actions { display: flex; align-items: center; gap: 10px; flex: none; }

.menu-btn {
  display: none;
  width: 44px;
  height: 44px;
  place-items: center;
  gap: 5px;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: transparent;
  cursor: pointer;
}
.menu-btn {
  transition: transform var(--dur-1) var(--ease-spring),
              background-color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease);
}
.menu-btn:hover { border-color: var(--line-strong); background: var(--surface-2); }
.menu-btn:active { transform: scale(.96); }
.menu-btn span { width: 15px; height: 1.5px; background: currentColor; transition: transform var(--dur-2) var(--ease-spring); }
.menu-btn[aria-expanded="true"] span:first-child { transform: translateY(3.25px) rotate(45deg); }
.menu-btn[aria-expanded="true"] span:last-child { transform: translateY(-3.25px) rotate(-45deg); }

/* ========================================================================== */
/* hero: one content model, two concepts                                       */
/* ========================================================================== */
.hero {
  position: relative;
  min-height: min(880px, 92svh);
  display: grid;
  isolation: isolate;
  overflow: clip;
}
.hero-stage { position: absolute; inset: 0; z-index: 0; }
.hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-swap) var(--ease);
}
.hero-canvas.is-live { opacity: 1; visibility: visible; }

.hero-inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding: calc(var(--header-h) + var(--s-6)) var(--gutter) var(--s-8);
  display: grid;
  align-content: end;
  gap: var(--s-6);
}


.hero-copy {
  display: grid;
  gap: var(--s-5);
  transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.hero-copy h1 { font-size: var(--t-hero); letter-spacing: -.035em; line-height: .98; }
.hero-copy h1 em { color: var(--accent-strong); }
.hero-lede { color: var(--muted); font-size: var(--t-lede); line-height: 1.62; max-width: 46ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.hero-trust {
  display: flex;
  align-items: center;
  gap: 9px;
  color: var(--faint);
  font-size: var(--t-small);
}
.hero-trust::before {
  content: "";
  width: 22px;
  height: 1px;
  background: var(--line-strong);
}

/* --- hero composition -----------------------------------------------------
   Both concepts are the same idea - filaments evaluated down to one route - so
   they share ONE layout and ONE annotation frame. There is deliberately no
   per-concept selector here: switching changes the visualization, never the
   composition, which is also why the swap cannot move the headline or the CTA.

   The copy is one column - eyebrow, headline, lede, actions, trust line in an
   unbroken stack - and the visualization is one tall column beside it. An
   earlier `auto 1fr auto` row set gave the slack to the headline row and opened
   a dead 150px gap between the headline and the sentence under it. */
.hero-inner {
  grid-template-areas: "rail rail" "head viz" "side viz";
  grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
  grid-template-rows: auto auto 1fr;
  align-content: center;
  gap: var(--s-5) clamp(24px, 4vw, 64px);
  padding-block: calc(var(--header-h) + var(--s-6)) var(--s-8);
}






/* ========================================================================== */
/* how it works: three steps                                                   */
/* ========================================================================== */
/* Four steps, not three: the loop needs its closing move. `auto-fit` rather
   than a fixed four-up, because four 300px cards at 1440 are thinner than the
   art inside them - it wraps to 2x2 before it squeezes. */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--s-5); }
/* SUBGRID, so alignment is structural rather than coincidental. Per-card rows
   only lined up while every heading happened to wrap to the same depth; one
   longer heading and the bodies stair-stepped again. Sharing the track's rows
   aligns art, label, heading and body across all four cards for any wrap, with
   no min-height guesses to maintain. */
.steps { grid-template-rows: auto auto auto auto; }
.steps > .step {
  display: grid;
  grid-row: span 4;
  grid-template-rows: subgrid;
  align-content: start;
}
/* Browsers without subgrid keep the old per-card packing: headings may wrap to
   different depths, which is a cosmetic drift, not a broken card. */
@supports not (grid-template-rows: subgrid) {
  .steps { grid-template-rows: none; }
  .steps > .step { grid-row: auto; grid-template-rows: auto auto auto 1fr; }
}
.step {
  position: relative;
  display: grid;
  gap: var(--s-4);
  padding: var(--s-6);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
}
.step-n {
  font-family: var(--mono);
  font-size: var(--t-micro);
  letter-spacing: .12em;
  color: var(--accent-strong);
}
.step h3 { font-size: var(--t-h3); }
.step p { color: var(--muted); font-size: 15px; line-height: 1.64; }
.step-art { height: 96px; border-radius: var(--r-sm); background: var(--surface-2); overflow: hidden; }
.step-art svg { width: 100%; height: 100%; }
/* Every shape in the step diagrams is a STROKE. Keyed on the element rather
   than on a `stroke` attribute: SVG's initial fill is black, so a path that
   carries only a class would otherwise render as a filled silhouette. */
.step-art path, .step-art rect, .step-art circle, .step-art line {
  fill: none;
  stroke-width: 1.25;
  vector-effect: non-scaling-stroke;
}
/* Higher specificity than the stroke-everything rule above, so the two filled
   marks (the resolved outcome dots) keep their fill. */
.step-art .art-fill-accent { stroke: none; fill: var(--accent); }
.step-art .art-fill-line { stroke: none; fill: var(--line-strong); }
.art-line { stroke: var(--line-strong); }
.art-muted { stroke: var(--faint); }
.art-accent { stroke: var(--accent); }
.art-signal { stroke: var(--signal-graphic); }
.art-fill-accent { fill: var(--accent); }
.art-fill-line { fill: var(--line-strong); }
.dash { stroke-dasharray: 3 4; }

/* ========================================================================== */
/* comparison demo                                                             */
/* ========================================================================== */
/* Landing demo only. The dashboard also uses `.panel`; keeping the surface
   selector tied to `data-demo` prevents marketing-card layout from leaking
   into authenticated analytics panels. */
.panel[data-demo] {
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow: var(--shadow);
  overflow: hidden;
}
/* `minmax(0, 1fr)` is load-bearing: an implicit auto column honors the input's
   intrinsic width and can clip the token selector and objective controls
   inside the panel on narrow screens. */
.panel[data-demo] .panel-body {
  padding: clamp(22px, 3vw, 32px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--s-5);
}
.demo-head {
  display: grid;
  gap: 8px;
}
.demo-head h2 { max-width: 22ch; font-size: clamp(28px, 3.2vw, 42px); line-height: 1.08; }
.demo-head p { max-width: 58ch; color: var(--muted); font-size: 13px; line-height: 1.6; }

fieldset.objective { margin: 0; padding: 0; border: 0; display: grid; gap: 9px; }
fieldset.objective legend {
  padding: 0;
  color: var(--faint);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.radio-track {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-sunk);
}
.radio-track label { position: relative; min-width: 0; }
.radio-track input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.radio-track span {
  width: 100%;
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid transparent;
  border-radius: calc(var(--r-md) - 5px);
  color: var(--muted);
  font-size: 12px;
  text-align: center;
  cursor: pointer;
  transition: background var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.radio-track label:hover span { color: var(--ink); background: color-mix(in srgb, var(--surface) 55%, transparent); }
.radio-track span small {
  padding: 2px 4px;
  border-radius: 4px;
  background: var(--surface-sunk);
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .08em;
  opacity: .9;
}
.radio-track input:checked + span {
  border-color: var(--accent-strong);
  background: var(--accent-quiet);
  color: var(--accent-strong);
  box-shadow: none;
}
.radio-track input:checked + span small { background: var(--accent-quiet); }
.radio-track input:focus-visible + span { outline: 2px solid var(--focus); outline-offset: 3px; }

.cmp-block { display: grid; gap: 9px; }
.cmp-label { display: grid; gap: 3px; }
.cmp-label strong {
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.cmp-label span { color: var(--faint); font-size: 11px; }





/* ========================================================================== */
/* value model                                                                 */
/* ========================================================================== */
.value-grid { display: grid; grid-template-columns: minmax(0, .86fr) minmax(0, 1.14fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.value-copy { display: grid; gap: var(--s-5); }
.value-copy h2 { font-size: var(--t-h2); }
.value-copy p { color: var(--muted); font-size: var(--t-lede); line-height: 1.65; }

.calc { border: 1px solid var(--inv-line); border-radius: var(--r-lg); background: var(--inv-bg); color: var(--inv-ink); overflow: hidden; box-shadow: var(--shadow-lg); }
/* `minmax(0, 1fr)`, not the implicit `auto`: the amount input's intrinsic
   min-content pushed this column to 362px inside a 348px card at 390px wide,
   and `overflow: hidden` on `.calc` then clipped the USD suffix, the presets
   and the slider rather than scrolling them. Same failure the comparison
   panel had. */
.calc-body { padding: var(--s-5); display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }

.vol-field { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; min-width: 0; }
.vol-field > span { color: var(--inv-muted); font-size: var(--t-small); }
.vol-input { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 12px var(--s-4); border: 1px solid var(--inv-line-2); border-radius: var(--r-md); background: var(--inv-bg-2); }
.vol-input i { color: var(--inv-faint); font-style: normal; font-family: var(--mono); }
.vol-input input {
  /* `width: 0` with grow, so the field can shrink below the intrinsic width
     an <input> claims from its `size` attribute. */
  flex: 1 1 0;
  width: 0;
  min-width: 0;
  min-height: 32px;
  border: 0;
  background: transparent;
  color: var(--inv-ink);
  font-family: var(--mono);
  font-size: 22px;
  letter-spacing: -.02em;
}
.vol-input input:focus { outline: none; }
.vol-input input:focus-visible { outline: 2px solid var(--inv-accent); outline-offset: 4px; }
.vol-input b { color: var(--inv-faint); font-family: var(--mono); font-size: 12px; font-weight: 400; }

.presets { display: flex; flex-wrap: wrap; gap: 6px; }
.presets button {
  min-height: 44px;
  padding: 8px 14px;
  border: 1px solid var(--inv-line-2);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--inv-muted);
  font-family: var(--mono);
  font-size: 12px;
  cursor: pointer;
  transition: transform var(--dur-1) var(--ease-spring),
              background-color var(--dur-2) var(--ease),
              border-color var(--dur-2) var(--ease),
              color var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
}
.presets button:hover { color: var(--inv-ink); border-color: var(--inv-accent); }
.presets button[aria-pressed="true"] { background: color-mix(in srgb, var(--inv-accent) 16%, transparent); border-color: var(--inv-accent); color: var(--inv-accent); }
.presets button:active { transform: scale(.97); }

.slider { display: grid; gap: 8px; }
.slider-top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-3); color: var(--inv-muted); font-size: var(--t-small); }
.slider-top output { font-family: var(--mono); font-size: 14px; color: var(--inv-accent); }

input[type="range"] { -webkit-appearance: none; appearance: none; width: 100%; height: 24px; background: transparent; cursor: pointer; }
input[type="range"]::-webkit-slider-runnable-track { height: 2px; border-radius: 2px; background: var(--inv-line-2); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -8px;
  border: 0;
  border-radius: 50%;
  background: var(--inv-accent);
  box-shadow: 0 0 0 1px var(--inv-bg);
}
input[type="range"]::-moz-range-track { height: 2px; border-radius: 2px; background: var(--inv-line-2); }
input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 0; border-radius: 50%; background: var(--inv-accent); }
input[type="range"]:focus-visible { outline: 2px solid var(--inv-accent); outline-offset: 6px; }

/* The answer to the section's question, and the only large figure in the panel. */
.answer { display: grid; gap: 6px; }
.answer span { color: var(--inv-muted); font-size: var(--t-small); }
.answer strong { font-family: var(--mono); font-size: clamp(30px, 3.6vw, 44px); font-weight: 500; letter-spacing: -.03em; }
.answer small { color: var(--inv-faint); font-size: 11px; }
.answer small b { color: var(--inv-muted); font-family: var(--mono); font-weight: 400; }




.context { margin-top: var(--s-8); padding-top: var(--s-7); border-top: 1px solid var(--line); }
/* Heading and its sentence stack in one left column. Sitting the sentence
   opposite the heading, baseline-aligned across a 1200px gap, read as an
   orphaned caption belonging to the timeline rather than to the heading. */
.context-head { display: grid; gap: 10px; max-width: 62ch; margin-bottom: var(--s-6); }
.context-head h3 { font-size: clamp(20px, 2vw, 26px); }
.context-head p { color: var(--muted); font-size: var(--t-small); }
.timeline { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.timeline > li { display: grid; gap: 6px; align-content: start; padding: var(--s-4); background: var(--surface); }
.timeline span { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--faint); }
.timeline b { font-size: 13px; font-weight: 600; }
.timeline p { color: var(--muted); font-size: 12px; line-height: 1.55; }
.timeline > li:last-child { background: var(--accent-quiet); }
.timeline > li:last-child span { color: var(--accent-strong); }

/* ========================================================================== */
/* conversion                                                                  */
/* ========================================================================== */
.cta-section { background: var(--paper-2); }
.cta-grid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.cta-copy { display: grid; gap: var(--s-5); }
.cta-copy h2 { font-size: var(--t-h2); }
.cta-copy p { color: var(--muted); font-size: var(--t-lede); line-height: 1.65; }
.paths { display: grid; gap: var(--s-3); }
.path {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  transition: transform var(--dur-1) var(--ease-spring), border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.path:hover { border-color: var(--ink); transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.path:active { transform: translateY(1px); box-shadow: none; }
.path b { display: block; font-size: 15px; font-weight: 600; }
.path span { display: block; color: var(--muted); font-size: var(--t-small); line-height: 1.55; margin-top: 3px; }
.path .arw { color: var(--muted); transition: transform var(--dur-2) var(--ease-spring); }
.path:hover .arw { transform: translateX(3px); }
.path-primary { border-color: var(--accent-line); background: var(--accent-quiet); }
.path-primary .arw { color: var(--accent-strong); }

.contact-card {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-5);
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
}
.contact-card dl { display: grid; gap: 10px; }
.contact-card dl > div { display: grid; grid-template-columns: 128px 1fr; gap: var(--s-3); }
.contact-card dt { color: var(--faint); font-family: var(--mono); font-size: 10px; letter-spacing: .09em; text-transform: uppercase; padding-top: 3px; }
.contact-card dd { color: var(--muted); font-size: var(--t-small); line-height: 1.55; }

/* ========================================================================== */
/* footer                                                                      */
/* ========================================================================== */
.site-footer { border-top: 1px solid var(--line); padding-block: var(--s-7) var(--s-6); }
.footer-grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: var(--s-6); }
.footer-brand { display: grid; gap: var(--s-4); align-content: start; max-width: 34ch; }
.footer-brand p { color: var(--muted); font-size: var(--t-small); line-height: 1.6; }
.footer-col { display: grid; gap: 10px; align-content: start; }
.footer-col b { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--faint); }
.footer-col a {
  width: fit-content;
  border-bottom: 1px solid transparent;
  color: var(--muted);
  font-size: var(--t-small);
  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease);
}
.footer-col a:hover { color: var(--ink); border-bottom-color: currentColor; }
.footer-base {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
  margin-top: var(--s-7);
  padding-top: var(--s-5);
  border-top: 1px solid var(--line);
  color: var(--faint);
  font-size: 12px;
}

/* ========================================================================== */
/* reveal-on-scroll: opt-in, and a no-op under reduced motion                   */
/* ========================================================================== */
.reveal {
  opacity: 1;
  transform: none;
}
.reveal.reveal-pending {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--dur-3) var(--ease-out), transform var(--dur-3) var(--ease-out);
  transition-delay: var(--reveal-delay, 0ms);
}
.reveal.reveal-pending.is-in { opacity: 1; transform: none; }

/* ========================================================================== */
/* responsive                                                                  */
/* ========================================================================== */
@media (max-width: 1080px) {
  /* 2x2 on a wide tablet: four stacked cards is a long scroll, and the art
     needs ~260px to stay legible, which two columns give down to ~640px. */
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .value-grid, .cta-grid { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  :root { --header-h: 60px; }

  .site-nav {
    position: fixed;
    inset: var(--header-h) 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 0;
    padding: var(--s-4) var(--gutter) var(--s-6);
    background: var(--paper);
    border-bottom: 1px solid var(--line);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
  }
  .site-nav.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .site-nav a { min-height: 48px; display: flex; align-items: center; font-size: 16px; }
  .site-nav a[aria-current="true"]::after { display: none; }
  .menu-btn { display: grid; }
  .header-actions .desktop-only { display: none; }

    .hero { min-height: 0; }
  .hero-inner {
    grid-template-areas: "head" "side" "rail" "viz";
    grid-template-columns: 1fr;
    grid-template-rows: none;
    align-content: start;
    gap: var(--s-5);
    padding: calc(var(--header-h) + var(--s-6)) var(--gutter) var(--s-7);
  }
  /* The stage establishes a bounded canvas box in the legacy mobile hero
     layout. Landing-specific full-bleed rules override this composition. */
  .hero-stage {
    grid-area: viz;
    display: block;
    position: relative;
    inset: auto;
    min-height: 0;
    height: 52vw;
    max-height: 320px;
    align-self: auto;
    z-index: 0;
  }
  .hero-lede { max-width: none; }
  .hero-actions .btn { flex: 1 1 auto; }

  /* 44px minimum on everything a thumb can hit */
  .brand { min-height: 44px; }
  .icon-btn { width: 44px; height: 44px; }
  .menu-btn { width: 44px; height: 44px; }
  /* Paired with the `hover: none` rule above, which covers a touch laptop at
     desktop width. This one covers the phone layout, and is the case a
     viewport test can actually assert. */
  .logo-btn { width: 44px; height: 44px; opacity: 1; }
  .logo-menu li { min-height: 44px; }
  .eyebrow { letter-spacing: .1em; }
}


@media (max-width: 640px) {
  .steps { grid-template-columns: 1fr; }
  .timeline { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; gap: var(--s-5); }
  .contact-card dl > div { grid-template-columns: 1fr; gap: 2px; }
  .radio-track { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .radio-track span { padding-inline: 5px; font-size: 11px; }
  .cmp-label { display: grid; gap: 3px; }
  .cmp { table-layout: fixed; }
  .cmp thead td:first-child,
  .cmp tbody th { width: 28%; }
  .cmp thead th { width: 36%; font-size: 10px; white-space: normal; }
  .cmp th, .cmp td { padding: 10px 6px; overflow-wrap: anywhere; }
  .cmp tbody th { white-space: nowrap; font-size: 11px; }
  .cmp thead th i { display: block; width: max-content; margin: 0 0 4px auto; }
  .cmp tbody td { font-size: 12px; }
  .cmp-delivered td { font-size: 13px; }
}

/* ========================================================================== */
/* reduced motion: kill decorative motion, keep every state legible            */
/* ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .btn:hover, .step:hover, .path:hover { transform: none; }
}

/* ========================================================================== */
/* legal pages (privacy, terms) - kept working against the new tokens          */
/* ========================================================================== */
.legal-page { background: var(--paper); }
.legal-header { justify-content: space-between; }
.legal-header nav { display: flex; gap: var(--s-4); margin-left: auto; }
.legal-header nav a { color: var(--muted); font-size: 14px; }
.legal-main { padding-block: var(--s-8) var(--s-9); }
.legal-grid { display: grid; grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.legal-grid aside { display: grid; gap: var(--s-4); position: sticky; top: calc(var(--header-h) + var(--s-6)); }
.legal-grid aside h1 { font-size: clamp(36px, 4.4vw, 58px); }
.legal-grid aside span { color: var(--faint); font-family: var(--mono); font-size: var(--t-micro); letter-spacing: .08em; text-transform: uppercase; }
.legal-copy { display: grid; gap: var(--s-6); max-width: 68ch; }
.legal-copy h2 { font-size: 19px; margin-bottom: 8px; }
.legal-copy p { color: var(--muted); font-size: 14px; line-height: 1.72; }
.legal-footer { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-4); padding: var(--s-6) var(--gutter); border-top: 1px solid var(--line); color: var(--faint); font-size: 12px; }
.legal-footer .brand { font-family: var(--display); font-size: 17px; font-weight: 500; letter-spacing: -.03em; }
.legal-footer div { display: flex; gap: var(--s-4); margin-left: auto; }
@media (max-width: 900px) {
  .legal-grid { grid-template-columns: 1fr; }
  .legal-grid aside { position: static; }
}

/* ========================================================================== */
/* 404                                                                         */
/* ========================================================================== */
.error-page { min-height: 100svh; display: grid; place-items: center; padding: var(--gutter); text-align: center; }
.error-page h1 { font-size: clamp(40px, 6vw, 72px); margin-bottom: var(--s-4); }
.error-page p { color: var(--muted); margin-bottom: var(--s-5); }

/* Contact form. The section's only interactive element, so it carries the
   panel weight the removed link cards used to. */
.contact-form { display: grid; gap: 10px; align-content: start; padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); }
.contact-form label { display: flex; justify-content: space-between; gap: var(--s-3); font-size: var(--t-small); color: var(--muted); }
.contact-form label span { color: var(--faint); font-size: 11px; }
.contact-form input,
.contact-form textarea {
  width: 100%;
  padding: 12px var(--s-4);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  transition: border-color var(--dur-2) var(--ease),
              background-color var(--dur-2) var(--ease),
              box-shadow var(--dur-2) var(--ease);
}
.contact-form textarea { resize: vertical; min-height: 84px; }
.contact-form input:focus-visible,
.contact-form textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 16%, transparent);
}
.contact-form input:user-invalid,
.contact-form textarea:user-invalid,
.contact-form [aria-invalid="true"] {
  border-color: var(--danger);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 12%, transparent);
}
.contact-form .btn[disabled] { opacity: .6; cursor: progress; }
/* Reserves its line so an answer never shifts the form under the cursor. */
.contact-status {
  min-height: 1.2em;
  font-size: var(--t-small);
  color: var(--muted);
  transition: color var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease);
}
.contact-status[data-tone="ok"] { color: var(--accent-strong); }
.contact-status[data-tone="error"] { color: var(--signal-graphic); }

/* Submit and the bot sit on one row: two ways in, equal standing, the form
   still the primary. Wraps rather than shrinking below a thumb target. */
.contact-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.contact-telegram { display: inline-flex; align-items: center; gap: 8px; }
.contact-telegram svg { flex: none; }


/* ==========================================================================
   1delta-aligned landing treatment
   High-contrast type, flatter composition, and one control grammar: 8px
   corners, 48px targets, visible borders, quiet fills, mint only for action.
   ========================================================================== */
.landing .site-header {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--paper) 94%, transparent);
  backdrop-filter: blur(14px);
}
.landing .site-header.is-stuck {
  background: color-mix(in srgb, var(--paper) 96%, transparent);
}
.landing .eyebrow { color: var(--accent-strong); }
.landing .btn {
  min-height: 48px;
  padding: 12px 24px;
  border-radius: var(--r-sm);
  box-shadow: none;
}
.landing[data-theme="dark"] .btn-primary { --btn-fg: #000000; }
.landing .btn-secondary { --btn-line: var(--line-strong); }
.landing .logo-menu {
  border-color: var(--line-strong);
  border-radius: var(--r-sm);
}

/* Flat groups replace a field of unrelated floating cards. The one-pixel grid
   keeps items distinct without giving every item its own silhouette. */
.landing .steps {
  gap: 1px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--line);
  overflow: hidden;
}
.landing .step {
  border: 0;
  border-radius: 0;
}
.landing .step-art { border-radius: 6px; }
.landing .timeline { border-radius: var(--r-sm); }

/* One outer frame for the decision model. Nested controls remain fields, not
   smaller cards with their own competing elevation and accent decoration. */
.landing .panel[data-demo] {
  border-color: var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  box-shadow: none;
}
.landing .radio-track {
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.landing .radio-track span {
  min-height: var(--control-h);
  border-color: var(--control-line);
  border-radius: var(--r-sm);
  background: var(--control-embedded-bg);
}
.landing .radio-track label:hover span {
  border-color: var(--control-hover);
  background: var(--control-embedded-bg);
}
.landing .radio-track input:checked + span {
  border-color: var(--accent);
  background: var(--accent);
  color: #00110d;
}
.landing .calc { border-radius: var(--r-sm); }

/* Calculator controls use the same rectangular language as the contact and
   trade controls. Pills remain reserved for status and metadata. */
.landing .vol-input {
  min-height: 52px;
  border-color: var(--inv-line-2);
  border-radius: var(--r-sm);
}
.landing .presets button { border-radius: var(--r-sm); }

/* The form itself is the content, not another card. Labels, fields and actions
   now mirror the Labs contact surface while retaining DeepFlow's fields. */
.landing .contact-form {
  gap: 8px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.landing .contact-form > label:not(:first-child) { margin-top: 10px; }
.landing .contact-form label {
  color: var(--ink-2);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.landing .contact-form label span {
  color: var(--faint);
  font-size: 9px;
}
.landing .contact-form input,
.landing .contact-form textarea {
  min-height: var(--control-h);
  padding: 13px 16px;
  border-color: var(--control-line);
  border-radius: var(--r-sm);
  background: var(--control-bg);
  color: var(--ink);
  font-size: 15px;
}
.landing .contact-form textarea { min-height: 120px; }
.landing .contact-form input::placeholder,
.landing .contact-form textarea::placeholder { color: var(--faint); opacity: 1; }
.landing .contact-form input:hover,
.landing .contact-form textarea:hover { border-color: var(--control-hover); }
.landing .contact-form input:focus-visible,
.landing .contact-form textarea:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-color: var(--accent);
}
.landing .contact-actions {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.landing .contact-actions .btn { width: 100%; }

@media (max-width: 640px) {
  .landing .steps {
    grid-template-columns: 1fr;
  }
  .landing .radio-track {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}