/* SearchTrophy. A single dark look. Layout: a 1200px grid, left-aligned headlines, product windows as the hero,
   bento tiles that each carry a small piece of real UI, monospace figure labels. Colour: an enchanted forest at night,
   taken from one wallpaper: royal-navy sky, cyan light, magenta flowers, leaf green, gold fireflies. */
:root {
  color-scheme: dark;
  --bg: #001913;
  --bg-2: rgb(242 70 195 / .05);
  --surface: #072E20;
  --glass: rgb(173 222 199 / .07);
  --glass-2: rgb(173 222 199 / .12);
  --ink: #EEF8F0;
  --ink-2: #C3DCC7;
  --ink-3: #ABCBB0;
  --ink-dim: #99BB9F;
  --line: rgb(173 222 199 / .16);
  --line-2: rgb(173 222 199 / .28);
  --glow: #A4D854;
  --glow-ink: #C9EB92;
  --glow-wash: rgb(164 216 84 / .13);
  --accent: #F246C3;
  --accent-ink: #FDA8DD;
  --label: #39ECFF;
  --btn-a: #A4D854;
  --btn-b: #39ECFF;
  --btn-text: #001913;
  --streak-1: #A4D854;
  --streak-2: #39ECFF;
  --streak-3: #F246C3;
  --cap-1: #F246C3;
  --cap-2: #39ECFF;
  --cap-3: #FCE765;
  --gold: #FCE765;
  --cyan: #39ECFF;
  --sage: #C2D38D;
  --pink-soft: #FFB6DC;
  --mauve: #D28FCD;
  --purple: #A47FD3;
  --sky-1: #06BAFF;   /* the blue of the clock digits on the user's phone wallpaper, light to deep */
  --sky-2: #06A2FF;
  --sky-3: #067EDE;
  --ok: #A4D854;
  --no: #FEA195;
  --hit: rgb(164 216 84 / .15);
  --s-before: #DE43B1;
  --s-after: #71A428;
  --shadow-panel: 0 0 0 1px rgb(1 17 10 / .5), 0 30px 80px -30px rgb(0 8 4 / .8);
  --f-sans: "Host Grotesk", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --f-mono: "Geist Mono", ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; background: var(--bg); }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font: 400 1.0625rem/1.6 var(--f-sans); letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: clip;
}
::selection { background: var(--glow); color: var(--bg); }
a { color: inherit; text-decoration: none; }
p a, li a, .link { text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
p a:hover, li a:hover, .link:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--glow); outline-offset: 3px; border-radius: 6px; }
img, svg { max-width: 100%; }
p, ul, ol, h1, h2, h3, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3 { text-wrap: balance; font-weight: 500; }
h1 { font-size: clamp(2.6rem, 6vw, 4.6rem); line-height: .98; letter-spacing: -.05em; }
h2 { font-size: clamp(1.9rem, 3.5vw, 2.9rem); line-height: 1.04; letter-spacing: -.04em; }
h3 { font-size: 1.06rem; line-height: 1.35; font-weight: 500; letter-spacing: -.015em; }
.grad { background: linear-gradient(180deg, #FFFFFF 30%, #B4B4C0 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.dim { color: var(--ink-dim); }
.mono { font-family: var(--f-mono); font-size: .8em; letter-spacing: 0; }
.tnum { font-variant-numeric: tabular-nums; }

.wrap {
  max-width: 1200px; margin-inline: auto;
  padding-left: max(20px, env(safe-area-inset-left, 0px));
  padding-right: max(20px, env(safe-area-inset-right, 0px));
}
@media (min-width: 760px) {
  .wrap { padding-left: max(40px, env(safe-area-inset-left, 0px)); padding-right: max(40px, env(safe-area-inset-right, 0px)); }
}
.section { position: relative; padding-block: clamp(88px, 11vw, 150px); }
.section + .section::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 30%, var(--line-2) 70%, transparent);
}
.sec-head { display: grid; gap: 20px; max-width: 880px; margin-bottom: clamp(44px, 6vw, 72px); }
.sec-head p { font-size: 1.1rem; color: var(--ink-2); max-width: 60ch; }
.kicker { display: inline-flex; align-items: center; gap: 10px; font: 500 .74rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-2); }
.kicker::before { content: ""; width: 6px; height: 6px; border-radius: 1px; background: var(--glow); box-shadow: 0 0 12px var(--glow); }
.fig { font: 500 .72rem/1.4 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.fig b { color: var(--glow); font-weight: 500; margin-right: 8px; }
.note { font-size: .92rem; color: var(--ink-3); max-width: 64ch; }
.example { font: 500 .7rem/1.3 var(--f-mono); letter-spacing: .04em; color: var(--ink-3); }
.scroll { overflow-x: auto; }

/* Header */
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 30; background: var(--bg); }
.top {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20;
  background: rgb(0 25 19 / .72); backdrop-filter: saturate(1.6) blur(16px); -webkit-backdrop-filter: saturate(1.6) blur(16px);
  border-bottom: 1px solid var(--line);
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }
.top .btn { flex: none; white-space: nowrap; }
.brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; font-size: 1.04rem; letter-spacing: -.035em; }
.brand svg { flex: none; }
.lockup { display: grid; line-height: 1; }
.lockup .name { font-weight: 600; font-size: 1.04rem; letter-spacing: -.035em; }
.brand:has(.lockup) svg { width: 26px; height: 26px; }
/* The brain mark: its tile; the two halves carry their own gradients in the markup. */
.brand .m-bg { fill: #013222; stroke: var(--line-2); }
/* Tagline (user): centred in the space between the logo and the menu, in the lushest green of the forest palette (leaf,
   --glow). Shown only where it fits on one line beside the menu. */
.tagline { margin: 0 auto; font-size: calc(.88rem + 4px); font-weight: 600; line-height: 1.3; color: var(--glow); white-space: nowrap; }
@media (max-width: 459px) { .tagline { display: none; } }   /* measured: it needs 417px beside the button, 795px beside the full menu */
.nav { display: flex; align-items: center; gap: 28px; font-size: .92rem; }
.nav a:not(.btn) { color: var(--ink-2); transition: color .15s; }
.nav a:not(.btn):hover, .nav a[aria-current="page"] { color: var(--ink); }
@media (max-width: 899px) { .nav a:not(.btn) { display: none; } }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 20px;
  border-radius: 999px; font: 500 .95rem/1 var(--f-sans); letter-spacing: -.01em; border: 1px solid transparent;
  cursor: pointer; transition: background-color .15s, border-color .15s, box-shadow .2s;
}
.btn-ink { background: var(--ink); color: var(--bg); box-shadow: 0 0 0 1px rgb(255 255 255 / .1), 0 8px 30px -8px rgb(255 255 255 / .25); }
.btn-ink:hover { background: #FFFFFF; box-shadow: 0 0 0 1px rgb(255 255 255 / .2), 0 10px 40px -6px rgb(242 70 195 / .45); }
.btn-ghost { border-color: var(--line-2); color: var(--ink); background: var(--glass); }
.btn-ghost:hover { border-color: rgb(255 255 255 / .28); background: var(--glass-2); }
.btn-sm { min-height: 34px; padding: 0 15px; font-size: .88rem; }
.btn .arr { transition: transform .15s; }
.btn:hover .arr { transform: translateX(2px); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* Hero */
.hero { position: relative; padding-block: 18px clamp(56px, 7vw, 88px); overflow: hidden; isolation: isolate; }
.hero-copy { display: grid; gap: 28px; max-width: 1000px; }
.hero h1 { max-width: 16ch; }
.hero .lead, .page-hero .lead { font-size: clamp(1.12rem, 1.8vw, 1.32rem); line-height: 1.5; letter-spacing: -.015em; color: var(--ink-2); max-width: 46ch; }
.perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.hero .perks { font-size: calc(clamp(1.12rem, 1.8vw, 1.32rem) - 1px); }
.perks .hl, .perks .hl::before { color: var(--sage); }
/* Two-column hero: the pluses hang out into the gap beside the headline; the text stays put. */
@media (min-width: 1100px) { .perks li::before { position: relative; left: -24px; } }
.perks li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; }
.perks li::before { content: "+"; content: "+" / ""; font-family: var(--f-mono); font-weight: 500; color: var(--glow); }
@media (min-width: 1100px) {
  .hero-copy { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: 72px; max-width: none; }
  .hero-copy > .kicker { grid-column: 1 / -1; }
  .hero-copy > h1 { grid-column: 1; grid-row: 2 / span 2; }
  .hero-copy > .lead { grid-column: 2; grid-row: 2; align-self: end; }
  .hero-copy > .cta-row { grid-column: 2; grid-row: 3; align-self: start; }
  /* Home page: the headline and the list side by side, one list item level with each headline line: each item's
     x-height is centred on its line's x-height (user: "move mid line"). Host Grotesk metrics as measured in the browser:
     ascent 1.02, descent .32, x-height .50, so a line's x-height centre sits .59H below the top of the headline
     (line-height .98) and .85em below the top of a list row (line-height 1.5). H is the headline size. Items step down
     one headline line (.98H) each, so this holds while the headline has as many lines as the list has items (3). */
  .hero-copy > h1:first-child { grid-row: 1; }
  .hero-copy > h1:first-child ~ .perks {
    grid-row: 1; align-self: start; align-content: start; padding-block: 0;
    margin-top: calc(clamp(2.6rem, 6vw, 4.6rem) * .59 - .85em);
    row-gap: calc(clamp(2.6rem, 6vw, 4.6rem) * .98 - 1.5em);
  }
}
.price-hint { font: 500 .78rem/1.3 var(--f-mono); color: var(--ink-3); }

/* Gold light streaks behind the product window */
.stage { position: relative; margin-top: clamp(56px, 8vw, 96px); isolation: isolate; }
.stage .fig { margin-bottom: 14px; }
.streaks { position: absolute; left: -10%; right: -10%; top: -18%; height: 120%; z-index: -1; pointer-events: none; filter: blur(30px); opacity: .72; animation: drift 14s ease-in-out infinite alternate; }
.streaks i { position: absolute; top: 0; height: 100%; border-radius: 60px; transform: skewX(-30deg); background: linear-gradient(180deg, transparent 0%, var(--streak-1) 28%, var(--streak-2) 48%, var(--streak-3) 70%, transparent 100%); }
.streaks i:nth-child(1) { left: 14%; width: 9%; opacity: .55; }
.streaks i:nth-child(2) { left: 30%; width: 15%; opacity: .85; }
.streaks i:nth-child(3) { left: 52%; width: 7%; opacity: .6; }
.streaks i:nth-child(4) { left: 66%; width: 18%; opacity: .45; }
@keyframes drift { from { transform: translateX(-2.5%); } to { transform: translateX(2.5%); } }

/* Product window */
.window {
  background: linear-gradient(180deg, rgb(255 255 255 / .055), rgb(255 255 255 / .02)), rgb(7 40 28 / .88);
  border: 1px solid var(--line-2); border-radius: 18px; overflow: hidden;
  box-shadow: 0 0 0 1px rgb(0 0 0 / .6), 0 50px 140px -40px rgb(242 70 195 / .35), 0 30px 80px -30px rgb(0 0 0 / .9);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
}
.win-bar { display: flex; align-items: center; gap: 14px; padding: 12px 16px; border-bottom: 1px solid var(--line); font: 500 .72rem/1 var(--f-mono); color: var(--ink-3); }
.win-bar .dots { display: inline-flex; gap: 6px; }
.win-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: rgb(255 255 255 / .12); }
.win-bar .grow { flex: 1; }
.win-body { display: grid; }
@media (min-width: 900px) { .win-body { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); } }
.convo { display: grid; gap: 16px; padding: clamp(18px, 2.6vw, 30px); align-content: start; min-width: 0; }
.ask { justify-self: end; max-width: 92%; background: var(--glass-2); border: 1px solid var(--line); border-radius: 14px 14px 4px 14px; padding: 11px 15px; }
.steps { display: grid; gap: 4px; font: .74rem/1.6 var(--f-mono); color: var(--ink-3); overflow-wrap: anywhere; }
.steps span::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); margin-right: 9px; vertical-align: 1px; }
.answer { display: grid; gap: 12px; }
.side { border-top: 1px solid var(--line); padding: clamp(18px, 2.6vw, 30px); display: grid; gap: 14px; align-content: start; background: rgb(255 255 255 / .02); min-width: 0; }
@media (min-width: 900px) { .side { border-top: 0; border-left: 1px solid var(--line); } }
.facts div { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .92rem; }
.facts span:first-child { color: var(--ink-3); }
.facts b { font-weight: 500; text-align: right; }
.ok-t { color: var(--ok); }

/* Tables */
.tbl { width: 100%; border-collapse: collapse; font-size: .92rem; font-variant-numeric: tabular-nums; }
.tbl th { font: 500 .68rem/1.2 var(--f-mono); letter-spacing: .05em; text-transform: uppercase; color: var(--ink-3); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.tbl td { padding: 10px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tbl tr:last-child td { border-bottom: 0; }
.tbl .num { text-align: right; white-space: nowrap; }
.tbl tr.hit td { background: var(--hit); }
.tbl .code { font-family: var(--f-mono); font-size: .8em; color: var(--ink-2); }
.down { color: var(--no); }

/* Proof strip */
.proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(48px, 7vw, 80px); border-top: 1px solid var(--line); }
@media (min-width: 900px) { .proof { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.proof div { padding: 24px 20px 0 0; display: grid; gap: 10px; align-content: start; }
@media (min-width: 900px) { .proof div + div { padding-left: 24px; border-left: 1px solid var(--line); } }
.proof b { font-weight: 500; font-size: clamp(2rem, 3.6vw, 2.8rem); line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #FFFFFF, #9C9CA8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.proof span { font-size: .88rem; line-height: 1.45; color: var(--ink-2); }

/* Question ticker */
.ticker { display: grid; gap: 10px; margin-top: clamp(56px, 8vw, 88px); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.track { display: flex; gap: 10px; width: max-content; animation: marquee 70s linear infinite; }
.track.rev { animation-direction: reverse; animation-duration: 80s; }
.ticker:hover .track { animation-play-state: paused; }
.q { white-space: nowrap; display: inline-flex; align-items: center; gap: 10px; border: 1px solid var(--line); background: var(--glass); border-radius: 999px; padding: 10px 16px; font-size: .94rem; color: var(--ink-2); }
.q b { font: 500 .66rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--glow); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Cards and bento tiles */
.grid-3 { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 720px) { .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card, .tile {
  position: relative; background: var(--glass); border: 1px solid var(--line); border-radius: 18px; padding: 24px;
  display: grid; gap: 14px; align-content: start; min-width: 0; overflow: hidden; transition: border-color .2s, background-color .2s;
}
.card::before, .tile::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .2), transparent); }
.card:hover, .tile:hover { border-color: var(--line-2); background: var(--glass-2); }
.card .role { font: 500 .68rem/1 var(--f-mono); letter-spacing: .06em; color: var(--glow); text-transform: uppercase; }
.card ul { display: grid; gap: 12px; }
.card li { font-size: 1.02rem; line-height: 1.4; letter-spacing: -.012em; }
.card li small { display: block; margin-top: 4px; font-size: .86rem; color: var(--ink-3); letter-spacing: 0; }
.card p { color: var(--ink-2); font-size: .97rem; }
.bento { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 960px) { .bento { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bento .wide { grid-column: span 2; } }
.card, .tile { grid-template-columns: minmax(0, 1fr); }
.tile { padding: 26px; gap: 10px; }
.viz > * { min-width: 0; }
.tile p { color: var(--ink-2); font-size: .96rem; max-width: 52ch; }
.viz { margin-bottom: 14px; min-height: 92px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--line-2); border-radius: 999px; padding: 7px 12px; font: 500 .74rem/1 var(--f-mono); color: var(--ink-2); background: rgb(0 0 0 / .25); }
.pill.ok { color: var(--ok); border-color: color-mix(in srgb, var(--ok) 35%, transparent); }
.pill.no { color: var(--no); border-color: color-mix(in srgb, var(--no) 35%, transparent); text-decoration: line-through; }
.pill.gold { color: var(--glow); border-color: color-mix(in srgb, var(--glow) 40%, transparent); box-shadow: 0 0 20px -6px var(--glow); }
.viz .arrow { font: 500 .8rem/1 var(--f-mono); color: var(--ink-3); }
.big0 { font-weight: 500; font-size: 4.6rem; line-height: .9; letter-spacing: -.06em; background: linear-gradient(180deg, #FFFFFF, #8C8C98); -webkit-background-clip: text; background-clip: text; color: transparent; }
.switches { display: grid; gap: 10px; width: 100%; max-width: 420px; }
.switches div { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 500 .76rem/1 var(--f-mono); color: var(--ink-2); padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgb(0 0 0 / .25); }
.tg { position: relative; flex: none; width: 34px; height: 20px; border-radius: 999px; background: var(--glow-wash); border: 1px solid color-mix(in srgb, var(--glow) 50%, transparent); }
.tg::after { content: ""; position: absolute; top: 2px; left: 16px; width: 14px; height: 14px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 10px var(--glow); }
.logs { width: 100%; display: grid; gap: 6px; font: .74rem/1.4 var(--f-mono); color: var(--ink-3); padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: rgb(0 0 0 / .3); overflow-x: auto; }
.logs span { white-space: nowrap; }
.logs .ok-t { color: var(--ok); }
.logs .no-t { color: var(--no); }

/* Role demo */
.demo { margin-top: clamp(64px, 8vw, 104px); background: linear-gradient(180deg, rgb(255 255 255 / .045), rgb(255 255 255 / .015)), var(--surface); border: 1px solid var(--line-2); border-radius: 20px; box-shadow: var(--shadow-panel); overflow: hidden; }
.demo-top { display: grid; gap: 18px; padding: clamp(20px, 3vw, 32px); border-bottom: 1px solid var(--line); }
.demo-top p { color: var(--ink-2); max-width: 64ch; }
.ctl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ctl-label { font: 500 .68rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); min-width: 88px; }
.chip { font: 500 .86rem/1 var(--f-sans); color: var(--ink-2); background: var(--glass); border: 1px solid var(--line-2); border-radius: 999px; padding: 0 14px; min-height: 36px; cursor: pointer; transition: all .15s; }
.chip:hover { color: var(--ink); border-color: rgb(255 255 255 / .28); }
.chip[aria-pressed="true"] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.panes { display: grid; }
@media (min-width: 900px) { .panes { grid-template-columns: 1fr 1fr; } .pane + .pane { border-left: 1px solid var(--line); } }
.pane { min-width: 0; display: grid; align-content: start; }
.pane + .pane { border-top: 1px solid var(--line); }
@media (min-width: 900px) { .pane + .pane { border-top: 0; } }
.pane-bar { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; padding: 12px 20px; border-bottom: 1px solid var(--line); font: 500 .7rem/1.3 var(--f-mono); letter-spacing: .03em; color: var(--ink-3); }
.pane-body { padding: 18px 20px 22px; display: grid; gap: 12px; }
.pane-body > div { display: grid; gap: 10px; min-width: 0; }
.pane-body ul, .pane-body ol { display: grid; gap: 4px; padding-left: 20px; }
.pane-body ul { list-style: disc; }
.pane-body ol { list-style: decimal; }
.denied { color: var(--no); font-weight: 500; }
.inj td:last-child { box-shadow: inset 2px 0 0 var(--no); }
.warn { border-left: 2px solid var(--glow); padding-left: 12px; color: var(--ink-2); }
.demo-foot { display: grid; gap: 10px; padding: 16px 20px 20px; border-top: 1px solid var(--line); }
.match { display: inline-flex; align-items: center; gap: 9px; font: 500 .76rem/1.3 var(--f-mono); color: var(--ok); }
.match::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 8px var(--ok); flex: none; }
.audit { font: .74rem/1.5 var(--f-mono); color: var(--ink-3); background: rgb(0 0 0 / .35); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; overflow-x: auto; white-space: nowrap; }
.stars { letter-spacing: 1px; white-space: nowrap; color: var(--glow); }

/* Comparison */
.versus { display: grid; gap: 40px; margin-top: clamp(72px, 9vw, 120px); }
@media (min-width: 1000px) { .versus { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: start; gap: 64px; } }
.versus-copy { display: grid; gap: 18px; }
.versus-copy h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.08; }
.versus-copy p { color: var(--ink-2); }
.bubbles { display: grid; gap: 10px; margin-top: 8px; }
.bubble { border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; background: var(--glass); display: grid; gap: 6px; font-size: .96rem; }
.bubble .who { font: 500 .66rem/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.redact { display: inline-block; width: 8ch; height: .95em; vertical-align: -.1em; background: var(--ink); border-radius: 2px; }
.cmp { width: 100%; border-collapse: collapse; font-size: .95rem; }
.cmp th, .cmp td { text-align: left; padding: 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.cmp thead th { font: 500 .68rem/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.cmp tbody th { font-weight: 500; color: var(--ink-2); white-space: nowrap; }
.cmp td { color: var(--ink-2); }
.cmp td.us { color: var(--ink); font-weight: 500; }
.cmp td.us::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 8px var(--glow); margin-right: 9px; vertical-align: 2px; }

/* Local compute diagram */
.flow { display: grid; gap: 12px; }
@media (min-width: 960px) { .flow { grid-template-columns: minmax(0, 1.2fr) 64px minmax(0, 1fr) 64px minmax(0, 1fr); align-items: stretch; gap: 0; } }
.node { position: relative; background: var(--glass); border: 1px solid var(--line); border-radius: 18px; padding: 22px; display: grid; gap: 12px; align-content: start; min-width: 0; }
.node::before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .2), transparent); }
.node.hot { border-color: color-mix(in srgb, var(--glow) 45%, transparent); box-shadow: 0 0 0 4px var(--glow-wash), 0 30px 80px -30px rgb(242 70 195 / .35); }
.node .tag { font: 500 .66rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.node.hot .tag { color: var(--glow); }
.node ul { display: grid; gap: 7px; color: var(--ink-2); font-size: .95rem; }
.node li::before { content: "\2013"; margin-right: 8px; color: var(--ink-3); }
.pipe { display: grid; place-items: center; }
.pipe i { display: block; width: 2px; height: 30px; background: repeating-linear-gradient(to bottom, var(--glow) 0 5px, transparent 5px 11px); background-size: 2px 22px; animation: flow-v 1.2s linear infinite; opacity: .8; }
@keyframes flow-v { to { background-position: 0 22px; } }
@media (min-width: 960px) {
  .pipe i { width: 100%; height: 2px; background: repeating-linear-gradient(to right, var(--glow) 0 5px, transparent 5px 11px); background-size: 22px 2px; animation-name: flow-h; }
}
@keyframes flow-h { to { background-position: 22px 0; } }
.nopay { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 28px; }
.nopay .lbl { font: 500 .68rem/1 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-right: 6px; }
.nopay span:not(.lbl) { font-size: .9rem; border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; color: var(--ink-3); text-decoration: line-through; text-decoration-color: var(--no); }

/* Spend compute, not tokens */
.tokens { margin-top: clamp(80px, 10vw, 128px); }
.tokens .sec-head p { font-size: 1.02rem; }
.tokens .checks { color: var(--ink-2); font-size: .97rem; }
.script { margin: 0; padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px; background: rgb(0 0 0 / .4); font: .76rem/1.65 var(--f-mono); color: var(--ink-2); overflow-x: auto; white-space: pre; }
.script .kw { color: var(--glow); }
.script .st { color: var(--ok); }

/* Charts */
.charts { display: grid; gap: 14px; margin-top: clamp(56px, 7vw, 88px); }
@media (min-width: 980px) { .charts { grid-template-columns: 1fr 1fr; } }
.chart { position: relative; background: var(--glass); border: 1px solid var(--line); border-radius: 18px; padding: 26px; display: grid; gap: 18px; align-content: start; min-width: 0; }
.chart p { color: var(--ink-2); font-size: .94rem; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .84rem; color: var(--ink-2); }
.sw { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 7px; vertical-align: -.5px; }
.sw.b, .units i { background: var(--s-before); }
.sw.a, .units.after i { background: var(--s-after); }
.mrow { display: grid; gap: 7px; }
.mrow-l { display: flex; justify-content: space-between; gap: 12px; font-size: .92rem; color: var(--ink-2); }
.mrow-l b { font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 479px) { .mrow-l { flex-wrap: wrap; } .mrow-l b { white-space: normal; } }   /* long values wrap on phones */
.bars { display: grid; gap: 2px; }
.bar { height: 10px; border-radius: 0 4px 4px 0; }
.bar.b { background: var(--s-before); width: 100%; }
.bar.a { background: var(--s-after); }
.units { display: flex; flex-wrap: wrap; gap: 3px; max-width: 440px; }
.units i { width: 10px; height: 10px; border-radius: 2px; }
.units.after i { box-shadow: 0 0 10px var(--s-after); }
.stats2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.stats2 b { display: block; font-weight: 500; font-size: 2.1rem; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.stats2 span { font-size: .86rem; color: var(--ink-2); }
.weigh { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 8px 24px; align-items: baseline; padding: 18px 22px; border: 1px dashed var(--line-2); border-radius: 18px; color: var(--ink-2); font-size: .95rem; }
.weigh b { color: var(--ink); font-weight: 500; }
.tip { position: fixed; z-index: 40; pointer-events: none; max-width: 260px; background: var(--ink); color: var(--bg); font: 500 .8rem/1.4 var(--f-sans); padding: 7px 10px; border-radius: 8px; }
[data-tip] { cursor: default; }

/* Pricing */
.plans { display: grid; max-width: 600px; margin-inline: auto; }   /* one plan, centred on the home and pricing pages */
.plans-note { margin-top: 18px; text-align: center; }
/* The plan under the home headline, centred. The visible gap above it is 85px on desktop (the user's mockup's 49px, then "a tad down" three times), measured
   from the lowest letters: the g/p descenders hang 7px below the headline box; on phones the list sits 3px above its box. */
.hero .plans { margin: 58px auto 0; }
@media (min-width: 1100px) { .hero .plans { margin-top: 92px; } }
.plan { position: relative; border: 1px solid var(--line); border-radius: 22px; padding: clamp(24px, 3.4vw, 40px); display: grid; gap: 22px; align-content: start; background: var(--glass); }
.plan.main {
  border: 1px solid transparent;
  background: linear-gradient(180deg, #0D3325, #02291C) padding-box, linear-gradient(140deg, var(--glow) 0%, rgb(242 70 195 / .15) 40%, rgb(255 255 255 / .08) 60%, var(--cyan) 100%) border-box;
  box-shadow: 0 40px 120px -40px rgb(242 70 195 / .35);
}
.plan p { color: var(--ink-2); }
.price { font-weight: 500; font-size: clamp(2.6rem, 5vw, 3.7rem); line-height: 1; letter-spacing: -.055em; font-variant-numeric: tabular-nums; }
.price small { white-space: nowrap; font-size: 1rem; letter-spacing: -.01em; font-weight: 400; color: var(--ink-2); }
.checks { display: grid; gap: 10px; }
.checks li { position: relative; padding-left: 26px; }
.checks li::before { content: ""; position: absolute; left: 3px; top: .52em; width: 10px; height: 5px; border-left: 1.6px solid var(--ok); border-bottom: 1.6px solid var(--ok); transform: rotate(-45deg); }
.plan.main .checks li::before { border-color: var(--glow); }
/* The plan's list wears the same green "+" markers as the hero list (user: "use + here like on top"). */
.plan .checks li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 12px; padding-left: 0; }
/* Items 1.3x further apart than the other lists (user): the space between one item's text and the next goes from 20px to 26px. */
.plan .checks { gap: 16px; }
.plan .checks li::before { content: "+"; content: "+" / ""; position: static; width: auto; height: auto; border: 0; transform: none; font-family: var(--f-mono); font-weight: 500; color: var(--glow); }
.fine { font-size: .88rem; color: var(--ink-3); }
.process { display: grid; gap: 36px 40px; margin-top: 28px; counter-reset: step; }
@media (min-width: 720px) { .process { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .process { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.process li { counter-increment: step; display: grid; gap: 8px; align-content: start; padding-top: 18px; border-top: 1px solid var(--line-2); }
.process li::before { content: "0" counter(step); font: 500 .74rem/1 var(--f-mono); color: var(--glow); }
.process p { color: var(--ink-2); font-size: .97rem; }
.subhead { margin-top: clamp(72px, 9vw, 112px); font-size: clamp(1.4rem, 2.4vw, 1.8rem); font-weight: 500; letter-spacing: -.035em; }

/* Usage insights */
.split { display: grid; gap: 48px; }
@media (min-width: 1000px) { .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 72px; } }
.split > * { min-width: 0; }
.loop { display: grid; gap: 14px; counter-reset: step; margin-top: 8px; }
.loop li { counter-increment: step; display: grid; grid-template-columns: 34px 1fr; color: var(--ink-2); }
.loop li::before { content: "0" counter(step); font: 500 .74rem/1.9 var(--f-mono); color: var(--glow); }
.dash { background: linear-gradient(180deg, rgb(255 255 255 / .05), rgb(255 255 255 / .015)), var(--surface); border: 1px solid var(--line-2); border-radius: 20px; box-shadow: var(--shadow-panel), 0 40px 120px -50px rgb(242 70 195 / .3); overflow: hidden; }
.dash-body { padding: 22px; display: grid; gap: 20px; }
.kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.kpis div { border: 1px solid var(--line); border-radius: 12px; padding: 14px; background: rgb(0 0 0 / .25); }
.kpis b { display: block; font-weight: 500; font-size: 1.7rem; line-height: 1; letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.kpis span { font-size: .78rem; color: var(--ink-3); }
.flag { display: inline-block; font: 500 .66rem/1.3 var(--f-mono); background: var(--glow-wash); color: var(--glow); border: 1px solid color-mix(in srgb, var(--glow) 35%, transparent); border-radius: 999px; padding: 3px 9px; white-space: nowrap; }

/* Closing and footer */
.closing { overflow: hidden; isolation: isolate; text-align: left; }
.closing .wrap { display: grid; gap: 28px; position: relative; }
.closing h2 { font-size: clamp(2.2rem, 5vw, 4rem); max-width: 16ch; }
.closing .streaks { top: 10%; height: 90%; opacity: .32; }
.mail { font: 500 .9rem/1 var(--f-mono); color: var(--ink-2); }
.foot { border-top: 1px solid var(--line); padding-block: 40px 48px; font-size: .88rem; color: var(--ink-3); }
.foot .wrap { display: grid; gap: 24px; }
@media (min-width: 900px) { .foot .wrap { grid-template-columns: 1fr auto; align-items: end; } }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--ink-2); }
.foot nav a:hover { color: var(--ink); }
.speed { font: 500 .74rem/1.4 var(--f-mono); }

/* Inner pages */
.page-hero { position: relative; padding-block: clamp(56px, 9vw, 112px) clamp(24px, 4vw, 48px); overflow: hidden; isolation: isolate; }
.page-hero .hero-copy h1 { max-width: 18ch; }
.parts { display: grid; gap: 14px; }
@media (min-width: 760px) { .parts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.rules { display: grid; gap: 14px; }
@media (min-width: 720px) { .rules { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .rules { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.rules > div { position: relative; display: grid; gap: 10px; align-content: start; padding: 24px; border: 1px solid var(--line); border-radius: 18px; background: var(--glass); }
.rules p { color: var(--ink-2); font-size: .96rem; }
.rules h3::before { content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 10px; border-radius: 1px; background: var(--glow); box-shadow: 0 0 10px var(--glow); vertical-align: 2px; }
.timeline { display: grid; border-left: 1px solid var(--line-2); margin-left: 4px; }
.timeline li { position: relative; padding: 0 0 36px 32px; display: grid; gap: 8px; }
.timeline li::before { content: ""; position: absolute; left: -5px; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--glow); box-shadow: 0 0 0 4px var(--bg), 0 0 14px var(--glow); }
.timeline .day { font: 500 .7rem/1.3 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.timeline p { color: var(--ink-2); max-width: 66ch; }
.callout { border: 1px solid color-mix(in srgb, var(--glow) 40%, transparent); background: var(--glass); border-radius: 18px; padding: 22px 24px; display: grid; gap: 10px; box-shadow: 0 0 0 4px var(--glow-wash); }
.callout p { color: var(--ink-2); }
.boundary { border: 1px dashed var(--line-2); border-radius: 22px; padding: clamp(14px, 2vw, 20px); display: grid; gap: 14px; }
.faq { display: grid; max-width: 860px; border-top: 1px solid var(--line); }
.faq div { display: grid; gap: 8px; padding: 24px 0; border-bottom: 1px solid var(--line); }
@media (min-width: 860px) { .faq div { grid-template-columns: 1fr 1.4fr; gap: 32px; } }
.faq p { color: var(--ink-2); }
.prose { display: grid; gap: 16px; max-width: 64ch; }
.prose p { color: var(--ink-2); }
.dark { background: radial-gradient(ellipse 80% 50% at 50% 0%, rgb(242 70 195 / .06), transparent 70%), var(--bg-2); }


/* ---- Deep Canopy: Dark foliage all the way down, so every glow pops: leaf green, cyan and pink. ---- */
html { background: #001913; }
body { background: linear-gradient(180deg, #001913 0%, #001E13 22%, #01210F 45%, #041E0B 68%, #051906 86%, #071305 100%); }
::selection { background: var(--glow); color: var(--btn-text); }
.kicker::before { background: var(--accent); box-shadow: 0 0 12px var(--accent); }
.fig b { color: var(--label); }
.card .role { color: var(--label); }
.q b { color: var(--accent-ink); }
.grad { background: linear-gradient(135deg, #FFFFFF 25%, #D7EFB5 62%, #AFF6FE 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* "Access restricted": the azure of the clock on the user's phone screen, light to deep (was the pink-to-purple swatch) */
.gov { background: linear-gradient(135deg, var(--sky-1), var(--sky-2) 50%, var(--sky-3)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.proof b, .big0 { background: linear-gradient(180deg, #FFFFFF, #D7EFB5); -webkit-background-clip: text; background-clip: text; color: transparent; }
.btn-ink { background: linear-gradient(135deg, var(--btn-a), var(--btn-b)); color: var(--btn-text); box-shadow: 0 8px 30px -8px rgb(57 236 255 / .55); }
.btn-ink:hover { background: linear-gradient(135deg, #B4E966, #9EF4FE); box-shadow: 0 10px 40px -6px rgb(57 236 255 / .65); }
.plan.main .btn-ink { color: var(--btn-text); }
.chip[aria-pressed="true"] { background: linear-gradient(135deg, var(--btn-a), var(--btn-b)); border-color: transparent; color: var(--btn-text); }
.pill.gold { color: var(--accent-ink); border-color: rgb(242 70 195 / .5); box-shadow: 0 0 22px -6px var(--accent); }
.node.hot { border-color: rgb(242 70 195 / .55); box-shadow: 0 0 0 4px rgb(242 70 195 / .14), 0 30px 80px -30px rgb(242 70 195 / .45); }
.node.hot .tag { color: var(--accent-ink); }
.process li::before { color: var(--label); }
.timeline li::before { background: var(--accent); box-shadow: 0 0 0 4px var(--bg), 0 0 14px var(--accent); }
.script .kw { color: var(--accent-ink); }
.script .st { color: var(--glow); }
.stars { color: var(--gold); }
.tg { background: rgb(164 216 84 / .14); border-color: rgb(164 216 84 / .5); }
.flag { background: rgb(242 70 195 / .16); color: var(--accent-ink); border-color: rgb(242 70 195 / .4); }
/* "Aurora", the user's pick of ten price colours: leaf green, cyan and flower pink, like the light streaks, with a cyan
   glow. The frame is the same phone-clock azure as "Well restricted" in the headline, light to deep, all the way round. */
.plan.main {
  border-color: transparent;
  background: linear-gradient(180deg, #0D3325, #02291C) padding-box,
              linear-gradient(135deg, var(--sky-1), var(--sky-2) 50%, var(--sky-3)) border-box;
  box-shadow: 0 40px 110px -44px rgb(57 236 255 / .42), 0 26px 70px -34px rgb(57 236 255 / .22);
}
.plan.main .amt { background: linear-gradient(135deg, var(--glow), var(--cyan), #F27AD3); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 18px rgb(57 236 255 / .22)); }
.plan.main .amt .cur { color: #59E6CC; }   /* the "$" in one colour, the gradient's own at the "3" (70% cyan, 30% leaf), so "$3" reads as one (user: "keep the same color") */
.window { box-shadow: 0 0 0 1px rgb(1 17 10 / .5), 0 50px 140px -40px rgb(164 216 84 / .4), 0 30px 80px -30px rgb(0 8 4 / .8); }
.dark { background: radial-gradient(ellipse 80% 55% at 50% 0%, rgb(57 236 255 / .08), transparent 70%), rgb(1 17 10 / .3); }
.audit, .logs, .script, .switches div, .kpis div, .pill { background: rgb(1 17 10 / .45); }
/* Glowing mushrooms at the end of the page */
.shrooms { position: absolute; right: max(20px, 5vw); bottom: -6px; width: clamp(150px, 20vw, 260px); z-index: -1; pointer-events: none; filter: drop-shadow(0 0 22px rgb(242 70 195 / .55)); }
.shrooms .stem { fill: #FCE3EE; }
.shrooms .cap-p { fill: var(--cap-1); }
.shrooms .cap-s { fill: var(--cap-2); }
.shrooms .cap-g { fill: var(--cap-3); }
.shrooms .spot { fill: #FFFFFF; opacity: .75; }
@media (max-width: 759px) { .shrooms { opacity: .45; } }

/* Inner pages: each wears one colour of the forest, in the hero's glow and the kicker's light. */
.page-hero { --pa: var(--accent); }
.tone-leaf { --pa: var(--glow); }
.tone-cyan { --pa: var(--label); }
.tone-gold { --pa: var(--gold); }
.tone-pink { --pa: var(--accent); }
.tone-purple { --pa: var(--purple); }
.page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 55% 85% at 86% 0%, color-mix(in srgb, var(--pa) 19%, transparent), transparent 72%); }
.page-hero .kicker::before { background: var(--pa); box-shadow: 0 0 12px var(--pa); }
.section.flush { padding-top: clamp(20px, 3.5vw, 44px); }
.section.first { padding-top: clamp(40px, 6vw, 72px); }   /* a page that opens straight on its content (pricing) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Home: a door to each page, lit in that page's colour */
.doors { --pa: var(--glow); display: grid; gap: 14px; }
@media (min-width: 760px) { .doors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .doors { grid-template-columns: repeat(6, minmax(0, 1fr)); } .door { grid-column: span 2; } .door.sm { grid-column: span 3; } }
.door { position: relative; isolation: isolate; overflow: hidden; display: grid; gap: 12px; align-content: start; padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: var(--glass); transition: border-color .15s, background-color .15s, box-shadow .2s; }
.door::before { content: ""; position: absolute; z-index: -1; top: -60%; right: -30%; width: 90%; aspect-ratio: 1; background: radial-gradient(closest-side, color-mix(in srgb, var(--pa) 16%, transparent), transparent); }
.door:hover { border-color: color-mix(in srgb, var(--pa) 55%, transparent); background: var(--glass-2); box-shadow: 0 30px 80px -40px color-mix(in srgb, var(--pa) 70%, transparent); }
.door .fig { color: var(--pa); }
.door h3 { font-size: clamp(1.3rem, 2vw, 1.55rem); line-height: 1.15; letter-spacing: -.03em; }
.door p:not(.fig) { color: var(--ink-2); font-size: .96rem; }
.door .go { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-weight: 500; font-size: .95rem; }
.door .arr { transition: transform .15s; }
.door:hover .arr { transform: translateX(2px); }

/* Contact form */
.contact { padding-block: 0 clamp(64px, 9vw, 112px); }
.form-card { max-width: 760px; display: grid; gap: 20px; margin: 0; padding: clamp(20px, 4vw, 36px); border-radius: 22px; border: 1px solid var(--line-2); background: linear-gradient(180deg, rgb(255 255 255 / .04), rgb(255 255 255 / .015)), var(--surface); box-shadow: var(--shadow-panel); }
.form-row { display: grid; gap: 20px; }
@media (min-width: 640px) { .form-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.field { display: grid; gap: 8px; margin: 0; min-width: 0; }
.field label { font: 500 .74rem/1.2 var(--f-mono); letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.field .opt { text-transform: none; letter-spacing: 0; color: var(--ink-dim); }
.field input, .field textarea { width: 100%; font: 400 1rem/1.5 var(--f-sans); color: var(--ink); background: rgb(0 0 0 / .28); border: 1px solid var(--line-2); border-radius: 12px; padding: 12px 14px; }
.field textarea { min-height: 150px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-dim); }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--glow); outline-offset: 1px; border-color: transparent; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.form-msg { margin: 0; min-height: 1.4em; font-size: .95rem; color: var(--ink-2); }
.form-msg.err { color: var(--no); }
.form-note { margin: 0; font-size: .85rem; color: var(--ink-3); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}