/* TrustPay site v6 (3 Oct 2026). One file, hand-written (brand rules: trustpay/brand/DESIGN-v3.md).
   Forest & Mint only. Flat 2D: no shadows, no borders, no dividers; tone and space only. Bricolage Grotesque
   headlines, Geist for everything else. Tokens first (light), then dark (only when the visitor picks it). */

@font-face { font-family: "TP Sans"; src: url("/_tp/fonts/geist-wght.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "TP Display"; src: url("/_tp/fonts/bricolage-grotesque-latin.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }

:root {
  color-scheme: light;
  /* palette A "Forest & Mint" (v3, 3 Oct 2026: from the client's logo, brand/DESIGN-v3.md) */
  --ground: #FBFCFB; --ground-2: #F1F5F2; --raised: #FFFFFF; --raised-2: #F7FAF8; --field: #E1E9E4;
  --ink: #0F201B; --ink-2: #2B3D37; --muted: #5A6B65; --faint: #62716B;
  --brand: #2FD08F; --brand-hover: #29BD81; --brand-deep: #0F201B; --on-brand: #0F201B; --brand-soft: #D9F6EA; --brand-text: #0E7350;
  --logo: #2FD08F;   /* the official logo green (client vectors, 3 Oct): the mark stays this colour in every palette */
  --lock: #FFC23D; --lock-soft: #FFF0C2; --lock-text: #835600;
  --paid: #1FA463; --paid-soft: #D6F3E3; --paid-text: #0B7349;
  --warm: #FF8A4C; --warm-soft: #FFE2D1; --coral: #F0525A; --coral-soft: #FDE1E2;
  --night: #0F201B; --night-2: #1B342C; --night-ink: #F2F7F4; --night-muted: #9DB0A8;
  /* the two solid bands: how it works + hero b (--band), the closing call (--cta) */
  --band: #0F201B; --band-ink: #FFFFFF; --band-muted: rgb(255 255 255 / .74); --band-btn: var(--brand); --band-btn-ink: #0F201B; --band-btn-hover: #4ADB9F;
  /* the client's banner gradient (brand/reference/x-profile-preview.png): mint at the top fading to near-white.
     Hero ground (ends in the page ground) and the closing card. Text on it is forest (AA from the top stop down). */
  --g1: #35DA8D; --g2: #6DDFAB; --g3: #A3E6C7; --g4: #CDEFDE; --g5: #EEF9F3; --g-ink: #0F201B; --g-ink-2: #1E3A30;
  --mk-fill: rgb(255 255 255 / .5); --mk-edge: rgb(255 255 255 / .9);
  --cta: var(--g3); --cta-ink: var(--g-ink); --cta-muted: var(--g-ink-2); --cta-btn: var(--g-ink); --cta-btn-ink: var(--ground); --cta-btn-hover: var(--g-ink-2);
  --cta-field: #FFFFFF; --cta-bad: #8A1D23; --wl-btn-ink: var(--ground);
  --bad-text: #B4232B;
  --device: #DCE7E1;   /* phone mockups: a flat tone frame, not a black bezel */
  --wash: #E3EAE5; --art-dark: #0F201B;
  --pill: rgb(241 245 242 / .95);
  --mark-cut: var(--ground);
  /* the line-art palette (unpay/art/sketch/kit/palette.js reads these per art element) */
  --u-ground: var(--ground); --u-ink: var(--ink); --u-wash: var(--wash); --u-accent: var(--brand);
  --u-pending: var(--lock); --u-final: var(--paid); --u-dark: var(--art-dark);
  /* the people kit (trustpay/art/line/src/palette.js) reads --art-* first */
  --art-ground: var(--ground); --art-surface: var(--ground-2); --art-ink: var(--ink); --art-brand: var(--brand); --art-brand-deep: var(--brand-deep);
  --art-locked: var(--lock); --art-released: var(--paid); --art-warm: var(--warm); --art-dispute: var(--coral); --art-extra: var(--brand-soft);

  --sans: "TP Sans", "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "TP Display", "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --ease: cubic-bezier(.22, 1, .36, 1);
  --sway: cubic-bezier(.65, 0, .35, 1);
  --t1: .2s; --t2: .3s; --t3: .6s;
  --gut: clamp(16px, 4vw, 48px);
  --inset: clamp(8px, 1.1vw, 16px);
  /* two radii (v7): cards 20, panels 28 */
  --r-panel: 28px;
  --r-block: 28px;
  --r-card: 20px;
  --nav-h: 76px;   /* header.css: the bar floats 20 px down, 56 px tall */
  --pill-b: 80px;
  --max: 1200px;
  /* one vertical rhythm: a section's padding, half of it between paired sections, the panel gap around inset panels */
  --sec-y: clamp(80px, 9vw, 136px); --sec-y-half: calc(var(--sec-y) / 2); --panel-gap: clamp(24px, 3vw, 40px);
}
/* dark tokens. v7 (3 Oct 2026): ONE look, no theme toggle. The dark palette paints the top zone (.zone-dark: the hero,
   the problem section, the waitlist's head); the story keeps it dark, and a fixed band at the story's foot (the client's
   X banner gradient) carries it into the light page. No content ever sits on the band's middle tones.
   :root[data-theme="dark"] is kept (unused) so a site-wide dark theme can come back. */
:root[data-theme="dark"], .zone-dark {
  color-scheme: dark;
  --ground: #0F201B; --ground-2: #142822; --raised: #162B25; --raised-2: #1E3830; --field: #2A463D;
  --ink: #F2F7F4; --ink-2: #D5E0DB; --muted: #9DB0A8; --faint: #6E847B;
  --brand-text: color-mix(in srgb, var(--brand) 70%, #FFFFFF);
  --brand-soft: color-mix(in srgb, var(--brand) 18%, var(--ground));
  --lock-soft: color-mix(in srgb, var(--lock) 15%, var(--ground)); --lock-text: var(--lock);
  --paid-soft: color-mix(in srgb, var(--paid) 18%, var(--ground)); --paid-text: #5ED6A2;
  --warm-soft: color-mix(in srgb, var(--warm) 13%, var(--ground));
  --coral-soft: color-mix(in srgb, var(--coral) 18%, var(--ground));
  --night: #162B25; --night-2: #213D34; --band: #162B25;
  --wash: #24403A; --art-dark: #1E3830;
  --pill: rgb(22 43 37 / .94); --device: #2A463D;
  --g1: #1F7A50; --g2: #1A5E40; --g3: #164632; --g4: #133428; --g5: #112920; --g-ink: #F2F7F4; --g-ink-2: #CFE0D8;
  --mk-fill: rgb(255 255 255 / .1); --mk-edge: rgb(255 255 255 / .28); --cta-field: rgb(255 255 255 / .1); --cta-bad: #FF9AA0;
  --bad-text: #FF9AA0;
}
/* ============================================================ base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--ground); }
body {
  margin: 0; background: var(--ground); color: var(--ink);
  font: 400 17px/1.55 var(--sans); letter-spacing: -.006em;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
.num { font-variant-numeric: lining-nums tabular-nums; }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.i { width: 1.1em; height: 1.1em; flex: none; }
.tp-mark { width: 1.2em; height: 1.33em; flex: none; color: var(--logo); }
.tp-sprite { overflow: hidden; }
:focus-visible { outline: 2px solid var(--brand-text); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--brand-soft); color: var(--ink); }
.skip {
  position: fixed; z-index: 1000; top: calc(env(safe-area-inset-top, 0px) + 8px); left: 12px; padding: 10px 16px;
  border-radius: 999px; background: var(--ink); color: var(--ground); font-weight: 600; text-decoration: none; transform: translateY(-160%);
}
.skip:focus { transform: none; }

/* type: Bricolage 600-700 at a calm, tight scale; Geist for everything else */
.display { font-family: var(--display); font-weight: 700; font-optical-sizing: auto; letter-spacing: -.035em; line-height: 1.02; text-wrap: balance; }
.h2 { font-family: var(--display); font-weight: 650; font-optical-sizing: auto; font-size: clamp(2rem, 1.9vw + 1.25rem, 3.25rem); line-height: 1.06; letter-spacing: -.03em; text-wrap: balance; }
.sub { margin-top: 14px; color: var(--muted); font-size: clamp(1.0625rem, .25vw + 1rem, 1.1875rem); line-height: 1.5; text-wrap: balance; max-width: 34rem; }
.sec-head.center { text-align: center; }
.sec-head.center .h2, .sec-head.center .sub { margin-inline: auto; }
.sec-head .h2 { max-width: 16ch; }
.sec-head.center .h2 { max-width: 20ch; }
h3 { font-family: var(--sans); font-weight: 600; font-size: 1.125rem; letter-spacing: -.015em; line-height: 1.3; }

/* buttons: one pill shape; hover = tone only, press = a 2 % dip */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem; height: 48px; padding: 0 22px;
  border: 0; border-radius: 999px; font-size: 16px; font-weight: 600; letter-spacing: -.01em; text-decoration: none; white-space: nowrap;
  cursor: pointer; transition: background-color var(--t1) var(--ease), color var(--t1) var(--ease), transform var(--t1) var(--ease);
}
.btn .i { width: 18px; height: 18px; transition: transform var(--t2) var(--ease); }
.btn:hover .i { transform: translate(2px, -2px); }
.btn:active { transform: scale(.98); }
.btn-lg { height: 54px; padding: 0 26px; font-size: 16.5px; }
.btn-sm { height: 40px; padding: 0 18px; font-size: 15px; }
.btn-brand { background: var(--brand); color: var(--on-brand); }
.btn-brand:hover { background: var(--brand-hover); }
.btn-quiet { background: transparent; color: var(--ink); padding-inline: 16px; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 6px; text-decoration-thickness: 1.5px; transition: text-decoration-color var(--t2) var(--ease); }
.btn-quiet:hover { text-decoration-color: currentColor; }
.btn-cta { background: var(--cta-btn); color: var(--cta-btn-ink); }
.btn-cta:hover { background: var(--cta-btn-hover); }
.ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 8px; }

/* sections: open near-white; one forest band; the closing green card */
/* one rhythm (v7): every section carries half the gap above and below, so two sections always sit --sec-y apart */
.sec { position: relative; padding: var(--sec-y-half) var(--gut); scroll-margin-top: calc(var(--pill-b) + 8px); }
.sec > * { max-width: var(--max); margin-inline: auto; }

/* cards: one tone, one radius; a calm lift on hover (transform only) */
.card { position: relative; border-radius: var(--r-card); background: var(--ground-2); transition: transform var(--t2) var(--ease), background-color var(--t2) var(--ease); }
@media (hover: hover) and (pointer: fine) { .card:hover { transform: translate3d(0, -3px, 0); } }

/* reveals: 16 px lift + fade, 700 ms ease-out, staggered inside a group (site.js sets --d) */
html.reveal-ready [data-reveal] { transition: opacity .7s var(--ease) var(--d, 0s), transform .7s var(--ease) var(--d, 0s); }
html.reveal-ready [data-reveal]:not(.is-in) { opacity: 0; transform: translate3d(0, 16px, 0); }
html.reveal-ready .card[data-reveal].is-in { transition: opacity .7s var(--ease) var(--d, 0s), transform var(--t2) var(--ease), background-color var(--t2) var(--ease); }

/* art slots: the motion scene's canvas over an HTML stand-in (product UI); the stand-in hides once the scene is live */
.art { position: relative; }
.art > canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.art.is-live > .art-fallback { visibility: hidden; }
/* the art kit's scenes, held to the same flat rules: no card shadows, no hairline rules */
.tpf, .tpf * { box-shadow: none !important; }
.tpf .hr { background: transparent !important; }
/* the kit's chip text on its soft chips, held to AA (4.5:1): darker paid / lock text on light scenes */
.tpf { --f-paid-text: #12784A !important; --f-lock-text: #7A5300 !important; }
[data-art-mode="dark"] .tpf { --f-paid-text: #5ED6A2 !important; --f-lock-text: #FFC23D !important; }
/* r9 QA: milestones has no mint panel any more, so its scene card takes the page's card tone (not white on near-white) */
.miles .tpf { --f-card: var(--ground-2) !important; }
.art[hidden] { display: none !important; }

/* ============================================================ product UI fragments (flat: tone only) */
.ui-card {
  display: grid; gap: 10px; width: min(100%, 340px); padding: 16px; border-radius: 16px; background: var(--raised); color: var(--ink);
  font-size: 14px; line-height: 1.35; text-align: left;
}
.ui-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ui-head b { font-size: 15px; font-weight: 600; }
.ui-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 32px; padding: 0 12px; border-radius: 10px; background: var(--ground-2); }
.ui-row b { font-weight: 550; text-align: right; }
.ui-k { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); }
.ui-k .i { width: 15px; height: 15px; }
.ui-st { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 99px; background: var(--field); color: var(--ink-2); font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ui-st .i { width: 13px; height: 13px; }
.st-lock { background: var(--lock-soft); color: var(--lock-text); }
.st-paid { background: var(--paid-soft); color: var(--paid-text); }
.st-brand { background: var(--brand-soft); color: var(--brand-text); }
.st-bad { background: var(--coral-soft); color: var(--bad-text); }
.st-paid-t { color: var(--paid-text); }
.st-lock-t { color: var(--lock-text); }
.ui-money { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; background: var(--lock-soft); }
.ui-money small { display: inline-flex; align-items: center; gap: 6px; color: var(--lock-text); font-size: 12.5px; font-weight: 550; }
.ui-money small .i { width: 14px; height: 14px; }
.ui-money b { font-size: 26px; font-weight: 650; letter-spacing: -.03em; line-height: 1.1; }
.ui-money b i { margin-left: 4px; font-style: normal; font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--muted); }
.ui-money-paid { background: var(--paid-soft); }
.ui-money-paid small { color: var(--paid-text); }
.ui-keys { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ui-keys span { display: flex; align-items: center; justify-content: center; gap: 6px; height: 36px; border-radius: 10px; background: var(--brand-soft); color: var(--brand-text); font-size: 13px; font-weight: 600; }
.ui-keys .i { width: 15px; height: 15px; }
.ui-keys-col { grid-template-columns: 1fr; }
.ui-pages { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.ui-pages i { aspect-ratio: 1; border-radius: 8px; background: var(--ground-2) linear-gradient(var(--brand-soft) 0 0) 50% 28% / 64% 22% no-repeat; }
.ui-btn { display: flex; align-items: center; justify-content: center; height: 40px; border-radius: 99px; background: var(--brand); color: var(--on-brand); font-weight: 600; font-size: 14px; }
.ui-mini { width: min(100%, 260px); }
.ui-dark { background: var(--night-2); color: var(--night-ink); }
.ui-dark .ui-row { background: rgb(255 255 255 / .06); }
.ui-dark .ui-k { color: var(--night-muted); }
.ui-dark .ui-money { background: rgb(255 194 61 / .14); }
.ui-dark .ui-money small { color: var(--lock); }
.ui-dark .ui-money b i { color: var(--night-muted); }
.ui-split { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; color: var(--night-muted); font-size: 12.5px; }
.ui-split i { position: relative; height: 6px; border-radius: 6px; background: rgb(255 255 255 / .12); overflow: hidden; }
.ui-split i::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--lock); transform-origin: 0 50%; transform: scaleX(var(--split, .5)); transition: transform 1.2s var(--ease); }

/* ============================================================ the shield (the logo's rounded-top silhouette, outline only) */
.sh { position: relative; display: grid; place-items: center; --sh-line: var(--brand); --sh-fill: var(--brand-soft); --sh-lock: var(--faint); --sh-hole: var(--ground); --sh-tick: var(--paid); }
.shield { width: 100%; height: 100%; overflow: visible; }
.sh-fill { fill: var(--sh-fill); transition: fill var(--t3) var(--ease); }
.sh-line { fill: none; stroke: var(--sh-line); stroke-width: 3; stroke-linejoin: round; stroke-dasharray: 1.02 1.02; stroke-dashoffset: 0; transition: stroke var(--t3) var(--ease), stroke-dashoffset 1.4s var(--ease); }
.sh-lock { transform-box: fill-box; transform-origin: 50% 100%; transition: opacity .45s var(--ease), transform .6s var(--ease); }
.sh-shackle { fill: none; stroke: var(--sh-lock); stroke-width: 5; stroke-linecap: round; transform-box: fill-box; transition: stroke var(--t2) var(--ease), transform .5s var(--ease); }
.sh-body { fill: var(--sh-lock); transition: fill var(--t2) var(--ease); }
.sh-hole { fill: var(--sh-hole); }
.sh-tick { fill: none; stroke: var(--sh-tick); stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .7s var(--ease) .15s; }
.sh[data-state="open"] .sh-shackle { transform: translateY(-5px); }
.sh[data-state="locked"] { --sh-lock: var(--lock); --sh-hole: #3A2600; }
.sh[data-state="released"] { --sh-line: var(--paid); --sh-fill: var(--paid-soft); }
.sh[data-state="released"] .sh-lock { opacity: 0; transform: translateY(-6px) scale(.9); }
.sh[data-state="released"] .sh-tick { stroke-dashoffset: 0; }
html.motion .sh:not(.is-drawn) .sh-line { stroke-dashoffset: 1.02; }
html.motion .sh:not(.is-drawn) .sh-fill, html.motion .sh:not(.is-drawn) .sh-lock { opacity: 0; }
.sh-fill { transition: fill var(--t3) var(--ease), opacity .8s var(--ease) .5s; }

/* ============================================================ header pill: header.css */

/* ============================================================ hero (v10, "client banner, light"): the client's X banner IS the hero.
   Mint at the top running to the page white exactly at the hero's foot, forest type; clean: the title and one line only
   (client 3 Oct: no buttons or facts in the hero, the nav carries Waitlist and Open app).
   ?hero=a (default, html[data-hero="a"]): copy 5/12 left, the stage 7/12 right from 1024 px; ?hero=b: the centred stack. */
.hero { --banner: radial-gradient(42% 46% at 70% 46%, rgb(255 255 255 / .42), rgb(255 255 255 / 0) 100%),
    radial-gradient(70% 55% at 0% 0%, rgb(12 140 84 / .38), rgb(12 140 84 / 0) 100%),
    linear-gradient(180deg, #1FC47A 0%, #35DA8D 16%, #62DDA5 32%, #A3E6C7 52%, #CDEFDE 68%, #EEF9F3 86%, #FBFCFB 100%);
  position: relative; isolation: isolate; padding: 0 var(--gut); color: #0F201B; }
.hero-ground { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; background: #FBFCFB; }
/* r14: the banner keeps the first screen's size (the cards under it sit on the page white end), so the hero's
   tones and the title's contrast stay as measured before the cards moved in */
.hero-ground::before { content: ""; position: absolute; inset: 0 0 auto; height: var(--banner-h, min(100svh, 940px)); background: var(--banner); }
.hero-ground > * { height: var(--banner-h, min(100svh, 940px)); bottom: auto !important; }
.art-marks { position: absolute; inset: 0; }
/* r11 (client: "background is not powerful, feels weak"): one giant 3D glass mark behind everything (art scene 'backdrop'),
   drawn at reduced opacity and faded into white at the foot; the flat SVG mark stays only as the no-WebGL stand-in */
.hero-backdrop { position: absolute; inset: 0; opacity: .5;
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 92%); mask-image: linear-gradient(180deg, #000 45%, transparent 92%); }
.hero-ground:has(.hero-backdrop.is-live) .bgmark { display: none; }
.hero-grid { max-width: var(--max); margin: 0 auto; }
.hero-in { position: relative; padding-top: calc(var(--nav-h) + clamp(28px, 6vh, 72px)); }
.hero-h { font-weight: 800; font-size: clamp(52px, 6.4vw, 92px); letter-spacing: -.045em; line-height: .98; max-width: 10ch; color: #0F201B; }
.lede { margin: 18px auto 0; max-width: 32rem; color: var(--g-ink-2); font-size: clamp(1.0625rem, .35vw + 1rem, 1.25rem); line-height: 1.5; text-wrap: balance; }
.ca-bar { display: inline-flex; align-items: center; gap: 12px; max-width: 100%; margin-top: clamp(18px, 2vw, 28px); padding: 6px 6px 6px 16px; border-radius: 999px; background: rgba(255,255,255,.72); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); font-size: 15px; }
.ca-l { font-weight: 700; color: #0F201B; letter-spacing: .02em; }
.ca-v { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #24433A; text-decoration: none; }
.ca-bar[data-ca-state="pending"] .ca-v { color: #5B7068; }
.ca-copy { flex: none; min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: #0F201B; color: #fff; font: inherit; font-weight: 600; cursor: pointer; }
.ca-copy:disabled { background: rgba(15,32,27,.12); color: #5B7068; cursor: default; }
@media (max-width: 520px) { .ca-bar { display: flex; } .ca-v { flex: 1; font-size: 13px; } }
.hero .lede { margin: clamp(16px, 2vw, 28px) 0 0; max-width: 16em; color: #24433A; font-size: clamp(18px, 1.1vw + 13px, 24px); line-height: 1.4; text-wrap: pretty; }
/* the stage: the full width under the copy (b, and every width under 1024) */
.hero-stage { margin: clamp(8px, 2vh, 24px) auto 0; padding-bottom: clamp(48px, 6vw, 96px); }
.art-stage { position: relative; width: min(100%, calc((100svh - 400px) * 20 / 9)); min-width: min(100%, 720px); aspect-ratio: 20 / 9; margin: 0 auto; }
@media (max-width: 760px) { .art-stage { width: 100%; min-width: 0; aspect-ratio: 5 / 6; max-height: calc(100svh - 120px); }
  .hero-stage { padding-bottom: 0; } }
/* phones: title, one line, then the scene, all inside the first screen (390 x 844) */
@media (max-width: 600px) {
  .hero-in { padding-top: calc(var(--nav-h) + 40px); }
  .hero-stage { margin-top: 24px; }
}
/* the stand-in: the art kit's still where the stage is square-ish (the split, phones), the HTML cards where it is wide */
.hero-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: none; }
@media (max-width: 760px) { .hero-still { display: block; } .hero-stage .hs { display: none; } }
/* b: the centred stack */
html[data-hero="b"] .hero-in { text-align: center; }
html[data-hero="b"] .hero-h, html[data-hero="b"] .hero .lede { margin-inline: auto; }
html[data-hero="b"] .hero-h { max-width: 13ch; }
/* a, 1024 px and up: two columns, copy 5/12, stage 7/12, both centred in the first screen */
@media (min-width: 1024px) {
  html[data-hero="a"] .hero-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(24px, 3vw, 48px); align-items: center;
    min-height: min(100svh, 940px); padding-top: var(--nav-h); padding-bottom: clamp(24px, 4vh, 48px); }
  html[data-hero="a"] .hero-in { padding-top: 0; }
  html[data-hero="a"] .hero-h { font-size: clamp(56px, 7.4vw, 112px); }
  html[data-hero="a"] .hero-stage { margin: 0; padding-bottom: 0; }
  html[data-hero="a"] .art-stage { width: 100%; min-width: 0; aspect-ratio: 640 / 620; max-height: calc(min(100svh, 940px) - var(--nav-h) - 48px); }
  html[data-hero="a"] .hero-still { display: block; }
  html[data-hero="a"] .hero-stage .hs { display: none; }
  /* the no-WebGL stand-in in the square column: the mark on top, the two cards side by side under it */
  html[data-hero="a"] .hs { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; align-content: center; gap: 16px; }
  html[data-hero="a"] .hs-mark { grid-column: 1 / -1; grid-row: 1; }
  html[data-hero="a"] .hs-st { width: 100%; justify-items: start; }
  html[data-hero="a"] .hs-who { flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
}
/* the giant background mark (client 3 Oct: "the logo as the background, very low visible accent, behind everything,
   subtle, with some depth"): the official shield (#tp-shield, never redrawn), ~130 % of the ground's height, a little
   right of centre, cropped by the ground's foot. Three stacked copies offset down-right read as a thick slab, no shadow:
   back #2FBF7E 8 %, middle white 7 %, front white 12 % with a soft top-left light. The whole stack fades out toward
   the foot. site.js moves it: scroll (--sy, it rises at 0.3x the scroll), pointer (--mx/--my, at most 12 px, the
   back layers less); static under reduced motion. */
.bgmark { position: absolute; inset: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 86%); mask-image: linear-gradient(180deg, #000 20%, transparent 86%); }
/* r10 (client: "the mid area feels cluttered"): two layers, and ~35 % quieter behind the scene column, so the mark's inner
   edges don't draw lines between the cards; full strength stays over the copy side */
@media (min-width: 1024px) {
  html[data-hero="a"] .bgmark {
    -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 86%), linear-gradient(90deg, #000 34%, rgb(0 0 0 / .65) 52%);
    mask-image: linear-gradient(180deg, #000 20%, transparent 86%), linear-gradient(90deg, #000 34%, rgb(0 0 0 / .65) 52%);
    -webkit-mask-composite: source-in; mask-composite: intersect; }
}
.bgmark-in { position: absolute; left: 54%; top: 4%; height: 130%; aspect-ratio: 114.03 / 126.34;
  transform: translate3d(-50%, var(--sy, 0px), 0); will-change: transform; }
.bgm { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  transform: translate3d(calc(var(--o) + var(--mx, 0px) * var(--k)), calc(var(--o) + var(--my, 0px) * var(--k)), 0); }
.bgm-3 { --o: 8px; --k: .6; color: #2FBF7E; opacity: .08; }
.bgm-2 { display: none; }
.bgm-1 { --o: 0px; --k: 1; color: #FFFFFF; opacity: .12;
  -webkit-mask-image: linear-gradient(135deg, #000 10%, rgb(0 0 0 / .55) 70%); mask-image: linear-gradient(135deg, #000 10%, rgb(0 0 0 / .55) 70%); }
@media (max-width: 760px) { .bgmark-in { left: 50%; top: 8%; height: 118%; } }
/* the flat frosted marks (stand-in for the 3D banner): the logo silhouette, white glass, a slow drift (transform only) */
.marks { position: absolute; inset: 0; }
.mk { position: absolute; width: var(--s); height: auto; aspect-ratio: 114 / 126.34; fill: var(--mk-fill); color: var(--mk-fill); overflow: visible;
  transform: translate3d(0, 0, 0) rotate(var(--r)); }
.mk use { fill: var(--mk-fill); }
.mk-1 { --s: clamp(64px, 8vw, 128px); --r: -14deg; left: 6%; top: 22%; }
.mk-2 { --s: clamp(36px, 3.6vw, 56px); --r: 10deg; left: 22%; top: 11%; }
.mk-3 { --s: clamp(72px, 9vw, 148px); --r: 16deg; right: 5%; top: 18%; }
.mk-4 { --s: clamp(30px, 3vw, 46px); --r: -8deg; right: 24%; top: 9%; }
.mk-5 { --s: clamp(40px, 4vw, 64px); --r: 6deg; left: 4%; top: 70%; }
html.motion .mk { animation: mk-drift 9s ease-in-out infinite alternate; }
html.motion .mk-2 { animation-duration: 11s; animation-delay: -3s; }
html.motion .mk-3 { animation-duration: 10s; animation-delay: -5s; }
html.motion .mk-4 { animation-duration: 12s; animation-delay: -2s; }
html.motion .mk-5 { animation-duration: 13s; animation-delay: -7s; }
@keyframes mk-drift { from { transform: translate3d(0, -6px, 0) rotate(var(--r)); } to { transform: translate3d(0, 8px, 0) rotate(calc(var(--r) + 4deg)); } }
@media (max-width: 767px) {
  .mk-1 { left: -6%; top: 5%; } .mk-3 { right: -8%; top: 8%; } .mk-2 { left: 72%; top: 3%; }
  .mk-4, .mk-5 { display: none; }
}
/* the HTML stand-in: two flat cards and the flat shield, stepping through the deal (site.js sets data-step 0..3) */
.hs { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .9fr) minmax(0, 1fr); align-items: center; gap: clamp(12px, 2vw, 32px); }
/* v10: the stand-in cards match the art kit's light cards (r9d): white glass, coloured avatar, deal line, the state
   label over the amount, the four-step track (done green, Locked amber, next dark, later muted). No border, no shadow. */
.hs-card { display: grid; gap: 4px; padding: 20px 22px 20px; border-radius: 22px; background: rgb(255 255 255 / .26); -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4); color: var(--ink); text-align: left;
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.hs-who { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; }
.hs-who > span:nth-child(2) { display: grid; flex: 1; min-width: 0; line-height: 1.25; }
.hs-who b { font-size: 16px; font-weight: 600; }
.hs-who small, .hs-k { color: var(--muted); font-size: 13px; }
.hs-k { margin-top: -6px; }
.hs .av-buyer { background: #DDF5E8; color: #0F201B; }
.hs .av-seller { background: #FFE2D1; color: #7A3410; }
.hs-lab { display: grid; margin-top: 12px; }
.hs-lab > i { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 6px; font-style: normal; font-size: 13.5px; font-weight: 550; white-space: nowrap;
  opacity: 0; transition: opacity .45s var(--ease); }
.hs-lab .i { width: 14px; height: 14px; }
.hs .hs-lab > i[class] { background: none; }
.hs-lab .st-wait { color: var(--muted); } .hs-lab .st-lock { color: var(--lock-text); } .hs-lab .st-paid { color: var(--paid-text); }
.hs[data-step="0"] .hs-lab .st-wait, .hs[data-step="1"] .hs-lab .st-lock, .hs[data-step="2"] .hs-lab .st-lock, .hs[data-step="3"] .hs-lab .st-paid { opacity: 1; }
.hs[data-step="3"] .hs-seller .hs-amt { color: var(--paid-text); }
.hs[data-step="1"] .hs-seller .hs-lab .st-wait { opacity: 0; }   /* the chip says Agreed, the money is already locked */
.hs-card { container-type: inline-size; }
.hs-track { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.hs-track i { display: grid; gap: 6px; font-style: normal; font-size: 12.5px; font-weight: 500; color: var(--muted); white-space: nowrap; transition: color .45s var(--ease); }
.hs-track b { height: 4px; border-radius: 2px; background: var(--field); transition: background-color .45s var(--ease); }
/* step n: the steps before n are done (green), step n is current (Locked = amber, else dark ink), the rest muted */
.hs[data-step="1"] .hs-track i:nth-child(1), .hs[data-step="2"] .hs-track i:nth-child(-n+1), .hs[data-step="3"] .hs-track i { color: var(--paid-text); }
.hs[data-step="1"] .hs-track i:nth-child(1) b, .hs[data-step="2"] .hs-track i:nth-child(1) b, .hs[data-step="3"] .hs-track b { background: var(--paid); }
.hs[data-step="0"] .hs-track i:nth-child(1) { color: var(--ink); font-weight: 600; }
.hs[data-step="0"] .hs-track i:nth-child(1) b { background: var(--paid); }
.hs[data-step="1"] .hs-track i:nth-child(2), .hs[data-step="2"] .hs-track i:nth-child(2) { color: var(--lock-text); }
.hs[data-step="1"] .hs-track i:nth-child(2) b, .hs[data-step="2"] .hs-track i:nth-child(2) b { background: var(--lock); }
.hs[data-step="1"] .hs-track i:nth-child(3), .hs[data-step="2"] .hs-track i:nth-child(3) { color: var(--ink); font-weight: 600; }
/* a narrow card (the wide stage between 761 and ~1100 px): the bars only, the label over the amount names the step */
@container (max-width: 260px) { .hs-track { gap: 6px; } .hs-track i { font-size: 0; gap: 0; } }
.hs-av { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; font-weight: 650; font-size: 14px; }
.hs-amt { font-size: clamp(1.5rem, 1.4vw + .8rem, 2.1rem); font-weight: 650; letter-spacing: -.035em; line-height: 1.1; }
.hs-st, .hs-pill { display: grid; justify-items: end; }
.hs-st > i, .hs-pill > i { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 99px; font-style: normal; font-size: 12.5px; font-weight: 600; white-space: nowrap;
  opacity: 0; transform: translateY(4px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.hs-st .i, .hs-pill .i { width: 14px; height: 14px; }
.hs i.st-wait { background: var(--ground-2); color: var(--muted); }
.hs i.st-lock { background: var(--lock-soft); color: var(--lock-text); }
.hs i.st-paid { background: var(--paid-soft); color: var(--paid-text); }
.hs[data-step="0"] .st-wait, .hs[data-step="1"] .hs-buyer .st-lock, .hs[data-step="1"] .hs-pill .st-lock, .hs[data-step="1"] .hs-seller .st-wait,
.hs[data-step="2"] .st-lock, .hs[data-step="3"] .st-paid { opacity: 1; transform: none; }
.hs-mark { display: grid; justify-items: center; gap: 18px; }
.hs-pill { justify-items: center; }
.hs-pill > i { height: 32px; padding: 0 14px; font-size: 13.5px; }
.sh-hero { width: min(220px, 80%); aspect-ratio: 120 / 136; --sh-fill: rgb(255 255 255 / .6); --sh-hole: #FFFFFF; }
:root[data-theme="dark"] .sh-hero, .zone-dark .sh-hero { --sh-fill: rgb(255 255 255 / .08); --sh-hole: var(--ground); }
@media (max-width: 760px) {
  .hs { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr auto; align-content: center; gap: 12px; }
  .hs-mark { grid-column: 1 / -1; grid-row: 1; }
  .hs-card { padding: 16px; border-radius: 18px; }
  .hs-who { flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
  .hs-st { width: 100%; justify-items: start; }
  .sh-hero { width: min(170px, 46vw); }
}

/* ============================================================ problem: three equal cards */

.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.4vw, 20px); margin-top: clamp(40px, 4.4vw, 64px); }
.trio > .pr-card { height: 100%; }
.pr-card { display: flex; flex-direction: column; padding: 22px 24px 26px; background: var(--brand-soft); }
@media (hover: hover) and (pointer: fine) { .pr-card:hover { transform: none; } }
.pr-ui { display: grid; gap: 4px; font-size: 15px; margin-bottom: 22px; }
.pr-ui .ui-row { min-height: 36px; padding: 0; border-radius: 0; background: none; }
.pr-ui .ui-k { color: var(--muted); }
.pr-ui .ui-row b { font-weight: 600; }
.pr-card h3 { display: flex; align-items: center; gap: 8px; }
.pr-card p { margin-top: 4px; color: var(--muted); font-size: 15.5px; }
.pr-tp { background: var(--brand-soft); }
.pr-tp .tp-mark { width: 18px; height: 20px; }
/* r13 (client): one green for all three, plain chips in the logo colours (no red, no amber here) */
.pr-card .ui-st { background: rgb(255 255 255 / .7); color: #0F201B; }
.pr-card .pr-ui .ui-k, .pr-card p { color: #3F5A50; }
@media (max-width: 900px) { .trio { grid-template-columns: 1fr; max-width: 520px; } }

/* r14 (client): the three cards sit in the hero, under the title and the scene; the heading left, its line right */
.hero-go { max-width: var(--max); margin: 0 auto; padding: clamp(8px, 2vw, 24px) 0 var(--sec-y-half); scroll-margin-top: calc(var(--pill-b) + 8px); }
.go-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 32px; }
.go-head .h2 { color: #0F201B; }
.go-head .sub { margin: 0; color: #3F5A50; }
.hero-go .trio { margin-top: clamp(20px, 2.4vw, 32px); }
@media (max-width: 600px) { .hero-go { padding-top: 40px; } }
.zone-dark { color: var(--ink); }
/* art.js: until the logo's first frame is drawn (.gl-wait), or for good when WebGL fails (.gl-off), the stand-in
   stays and the scene is hidden, so the stage is never an empty hole */
.hero .art-stage.is-live > .tpf { transition: opacity .4s cubic-bezier(.22, 1, .36, 1); }
.hero .art-stage.gl-wait > .art-fallback, .hero .art-stage.gl-off > .art-fallback { visibility: visible; }
.hero .art-stage.gl-wait > .tpf { opacity: 0; }
.hero .art-stage.gl-off > .tpf { display: none; }
/* the live scene's edge marks run past the canvas's bottom edge: fade the bottom of its two outer thirds so a mark is
   never cut flat; the centre column (the logo and its state pill, which sits close to the bottom) is never masked */
.hero .art-stage.is-live {
  -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 56px), transparent calc(100% - 6px)), linear-gradient(90deg, transparent 22%, #000 30%, #000 70%, transparent 78%);
  mask-image: linear-gradient(180deg, #000 calc(100% - 56px), transparent calc(100% - 6px)), linear-gradient(90deg, transparent 22%, #000 30%, #000 70%, transparent 78%);
  -webkit-mask-composite: source-over; mask-composite: add; }
@media (max-width: 760px) {   /* v10: 8 px only: the state pill sits ~11 px above the stage's foot on phones */
  .hero .art-stage.is-live { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 8px), transparent); mask-image: linear-gradient(180deg, #000 calc(100% - 8px), transparent); }
}
/* v10: the split's square column has no edge marks under the canvas edge: only the short bottom fade; the stand-in
   (no WebGL) is never masked */
@media (min-width: 1024px) {
  html[data-hero="a"] .hero .art-stage.is-live { -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 24px), transparent calc(100% - 2px)); mask-image: linear-gradient(180deg, #000 calc(100% - 24px), transparent calc(100% - 2px)); }
}
.hero .art-stage.gl-off { -webkit-mask-image: none !important; mask-image: none !important; }

/* ============================================================ the story: one gradient panel, pinned while one deal walks Agree -> Lock -> Deliver -> Release.
   The four gradient layers match the art kit's 'story' scene (art/flow/src/scenes/story.js GRAD) stop for stop, so the
   scene's own ground (the right column) and the panel (the copy side) read as one surface. site.js fades the layers
   and sets data-step / data-ink. */
.story { --st-ink: #F2F7F4; --st-muted: rgb(242 247 244 / .9); --st-faint: rgb(242 247 244 / .4); --st-tone: rgb(255 255 255 / .09);
  position: relative; padding: 0; scroll-margin-top: 0; background: var(--ground); }
/* r9: the panel sits inset on the white page with rounded corners (v6 showpiece), so the page stays light around it */
.story-stage { padding: clamp(8px, 1vw, 14px); }
.story-panel { border-radius: clamp(24px, 2.4vw, 36px); }
.story[data-ink="dark"] { --st-ink: #0F201B; --st-muted: rgb(15 32 27 / .86); --st-faint: rgb(15 32 27 / .42); --st-tone: rgb(15 32 27 / .1); }
.story-panel { position: relative; isolation: isolate; overflow: hidden; color: var(--st-ink); transition: color .5s var(--ease); }
.story-bg, .story-bg i { position: absolute; inset: 0; }
.story-bg { z-index: -1; }
.story-bg i { opacity: 0; will-change: opacity; }
/* r9: forest -> brand green, step by step (the last step meets the hero's top green) */
.story-bg i:nth-child(1) { opacity: 1; background: linear-gradient(180deg, #0F201B 0%, #17402F 100%); }
.story-bg i:nth-child(2) { background: linear-gradient(180deg, #123528 0%, #1A5239 100%); }
.story-bg i:nth-child(3) { background: linear-gradient(180deg, #154532 0%, #1C6243 100%); }
.story-bg i:nth-child(4) { background: linear-gradient(180deg, #185A3E 0%, #1E7550 100%); }
:root[data-theme="dark"] .story-bg i:nth-child(1) { background: linear-gradient(180deg, #0B1814 0%, #0F201B 100%); }
:root[data-theme="dark"] .story-bg i:nth-child(2) { background: linear-gradient(180deg, #0F201B 0%, #14402F 100%); }
:root[data-theme="dark"] .story-bg i:nth-child(3) { background: linear-gradient(180deg, #145A40 0%, #1E7A55 100%); }
:root[data-theme="dark"] .story-bg i:nth-child(4) { background: linear-gradient(180deg, #1E7A55 0%, #2FD08F 100%); }
.story-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: inherit; max-width: calc(var(--max) + 2 * var(--gut)); margin: 0 auto; padding-inline: var(--gut); }
.story-copy { display: flex; flex-direction: column; justify-content: center; padding: calc(var(--pill-b) + 16px) 0 clamp(32px, 4.4vw, 72px); }
.story .h2 { max-width: 13ch; color: var(--st-ink); }
.story .sub { color: var(--st-muted); }
.story-steps { display: grid; gap: 2px; margin-top: clamp(24px, 3.4vh, 40px); }
/* r12 (client: too much text): titles only; the current step alone shows its one line */
.story-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; padding: 10px 0; transition: opacity .45s var(--ease); opacity: .38; }
.ss-n { padding-top: 7px; font-size: 14px; font-weight: 600; color: var(--st-ink); }
.ss-t b { display: block; font-family: var(--display); font-size: clamp(1.5rem, 1vw + 1.1rem, 2rem); font-weight: 700; letter-spacing: -.03em; line-height: 1.15; color: var(--st-ink); }
.ss-t span { display: block; max-height: 0; overflow: hidden; color: var(--st-ink); font-size: 16px; line-height: 1.45; opacity: 0;
  transition: max-height .45s var(--ease), opacity .35s var(--ease), margin .45s var(--ease); }
.story[data-step="0"] li[data-i="0"], .story[data-step="1"] li[data-i="1"], .story[data-step="2"] li[data-i="2"], .story[data-step="3"] li[data-i="3"] { opacity: 1; }
.story[data-step="0"] li[data-i="0"] .ss-t span, .story[data-step="1"] li[data-i="1"] .ss-t span, .story[data-step="2"] li[data-i="2"] .ss-t span, .story[data-step="3"] li[data-i="3"] .ss-t span { max-height: 4.5em; margin-top: 6px; opacity: .8; }
.story-prog { display: flex; gap: 6px; margin: 22px 0 0 12px; }
.story-prog i { width: 28px; height: 4px; border-radius: 4px; background: var(--st-faint); transition: background-color .45s var(--ease); }
.story[data-step="0"] .story-prog i:nth-child(-n+1), .story[data-step="1"] .story-prog i:nth-child(-n+2),
.story[data-step="2"] .story-prog i:nth-child(-n+3), .story[data-step="3"] .story-prog i { background: var(--st-ink); }
.story-art { position: relative; min-height: 420px; }
.art-story { position: absolute; inset: 0; }
/* the scene paints its own copy of the step gradient over its slot only; the panel already paints it edge to edge
   (same colours, same crossfade), so the slot's copy is hidden to avoid a seam where the slot starts */
.art-story .tpf { background: transparent !important; }
.art-story .tpf > div:first-child:not([class*="tpf-"]) { display: none; }
/* stand-in: the flat shield follows the money, a step card under it */
.ss-fb { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 28px; padding: 24px; }
.sh-story { width: clamp(150px, 16vw, 230px); aspect-ratio: 120 / 136; --sh-line: var(--st-ink); --sh-fill: var(--st-tone); --sh-lock: var(--st-ink); --sh-hole: #0F201B; --sh-tick: var(--st-ink); }
.story[data-step="1"] .sh-story, .story[data-step="2"] .sh-story { --sh-lock: var(--lock); --sh-hole: #3A2600; --sh-line: var(--lock); }
.ss-card { display: grid; width: min(100%, 320px); }
.ss-c { grid-area: 1 / 1; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 2px 12px; padding: 16px 18px; border-radius: 18px; background: var(--raised); color: var(--ink);
  opacity: 0; transform: translateY(6px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.ss-c small { grid-column: 1; color: var(--muted); font-size: 12.5px; }
.ss-c b { grid-column: 1; font-size: 16px; font-weight: 600; }
.ss-c .chip { grid-column: 2; grid-row: 1 / span 2; }
.story[data-step="0"] .ss-c[data-c="0"], .story[data-step="1"] .ss-c[data-c="1"], .story[data-step="2"] .ss-c[data-c="2"], .story[data-step="3"] .ss-c[data-c="3"] { opacity: 1; transform: none; }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border-radius: 99px; font-style: normal; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.chip .i { width: 14px; height: 14px; }
.chip-ok { background: var(--brand-soft); color: var(--brand-text); }
.chip-lock { background: var(--lock-soft); color: var(--lock-text); }
.chip-paid { background: var(--paid-soft); color: var(--paid-text); }
/* pinned (motion on, a screen at least 560 px tall): the panel fills the screen under the pill for four stretches */
@media (min-height: 560px) {
  html.motion .story { padding-block: 0; }
  html.motion .story-pin { height: 420vh; }
  html.motion .story-stage { position: sticky; top: 0; height: 100vh; height: 100svh; padding: clamp(8px, 1vw, 14px); }
  html.motion .story-panel { height: 100%; }
  html.motion .story-grid { height: 100%; }
  html.motion .story-art { min-height: 0; }
}
@media (max-width: 1023px) {
  .story-grid { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .story-copy { padding: calc(var(--pill-b) + 12px) 0 0; justify-content: flex-start; }
  .story .sub { margin-top: 8px; font-size: 1rem; }
  .story-art { min-height: 380px; }
}
@media (min-height: 560px) and (max-width: 1023px) {
  /* phones and tablets, pinned: only the step that is on shows its line */
  html.motion .story-steps { display: grid; margin-top: 16px; }
  html.motion .story-steps li { grid-area: 1 / 1; opacity: 0; visibility: hidden; transition: opacity .2s var(--ease), visibility 0s linear .2s; }
  html.motion .story[data-step="0"] li[data-i="0"], html.motion .story[data-step="1"] li[data-i="1"],
  html.motion .story[data-step="2"] li[data-i="2"], html.motion .story[data-step="3"] li[data-i="3"] { opacity: 1; visibility: visible; transition: opacity .3s var(--ease) .2s, visibility 0s linear 0s; }
  html.motion .story-prog { margin: 14px 0 0 12px; }
  html.motion .story-art { min-height: 0; }
}

/* ============================================================ product mockups shared by both sides + profiles */

.av-buyer { background: var(--brand-soft); color: #0D6B4B; }
.zone-dark .av-buyer, :root[data-theme="dark"] .av-buyer { color: var(--brand-text); }
/* the seller: the same forest/mint family as the buyer, one shade deeper (no peach, no indigo) */
.av-seller { background: #B5E4CD; color: #0B4F37; }
:root[data-theme="dark"] .av-seller { background: #1F5A43; color: #CFF3E2; }

/* ============================================================ release rules (v8, client r8): six flat tone cards in a grid
   all fully visible: 3 per row >= 1180, 2 >= 641, 1 below. Every card: the same scene box (same size, same place,
   on the card's own tone: no box-in-box), then the title and a two-line slot, so every card is the same height. */
.rgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.4vw, 20px); margin-top: clamp(32px, 4vw, 52px); }
.rcard { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 8px; border-radius: var(--r-block); background: var(--ground-2); }
.rc-media { position: relative; aspect-ratio: 4 / 3; border-radius: calc(var(--r-block) - 8px); overflow: hidden; }
.art-rule { position: absolute; inset: 0; display: grid; place-items: center; padding: 18px; }
.art-rule.is-live { padding: 0; }
.rcard-t { position: absolute; }
.rc-soon { position: absolute; top: 26px; right: 26px; z-index: 2; }   /* r12: the name is in the scene; the h3 stays for screen readers */
.rcard-t h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.rcard-t p { min-height: 3em; margin-top: 4px; color: var(--muted); font-size: 15.5px; line-height: 1.5; text-wrap: pretty; }
.soon { padding: 2px 8px; border-radius: 99px; background: var(--field); color: var(--ink-2); font: 600 13px/1.4 var(--sans); font-style: normal; letter-spacing: .01em; }
@media (max-width: 1179px) { .rgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }   /* 2 per row up to 1179 px: a scene tile under ~300 px wide shrinks the art text below 12 px */
@media (max-width: 640px) { .rgrid { grid-template-columns: minmax(0, 1fr); } .rcard-t p { min-height: 0; } .rc-media { aspect-ratio: 3 / 2; } }   /* r9 QA: one column, no tall empty box */
.ui-timer { display: flex; align-items: center; gap: 14px; }
.ring { width: 64px; height: 64px; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 6; stroke: var(--field); }
.ring .ring-v { stroke: var(--lock); stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: .3; transition: stroke-dashoffset 1.6s var(--ease); }
.ui-timer b { display: block; font-size: 28px; font-weight: 650; letter-spacing: -.03em; line-height: 1; }
.ui-timer small { color: var(--muted); font-size: 13px; }

/* ============================================================ milestones: a mint panel; the scroll releases the four stages (desktop: pinned) */
.panel { margin-inline: var(--inset); border-radius: var(--r-panel); }
.miles { background: none; }   /* r9 QA: no mint panel around the cards (one level) */
/* desktop: the panel's copy lines up with every other section's left edge (gutter = inset + this) */
@media (min-width: 1024px) { .miles { padding-inline: calc(var(--gut) - var(--inset)); } }
.miles-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; justify-content: center; max-width: 1040px; margin: 0 auto; }
.miles-totals { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 32px; }
.tot { padding: 16px 18px; border-radius: 20px; background: var(--ground-2); }
.tot small { display: block; color: var(--muted); font-size: 14px; }
.tot b { display: block; margin-top: 2px; font-size: clamp(1.75rem, 1.6vw + 1rem, 2.5rem); font-weight: 700; letter-spacing: -.04em; }
.tot-paid b { color: var(--paid-text); }
.tot-locked { background: var(--lock-soft); }
.tot-locked small, .tot-locked b { color: var(--lock-text); }
/* the scene brings its own card: no pale panel behind it (no card-in-card) */
.miles-art { width: min(100%, 560px); justify-self: center; }
.miles .sub { max-width: 26rem; text-wrap: pretty; }
.art-miles { aspect-ratio: 4 / 3; }
.ms-fb { position: absolute; inset: 0; display: grid; align-content: center; padding: 10%; }
.ms-bar { display: flex; gap: 6px; }
.ms-bar li { flex: var(--w) 1 0; min-width: 0; display: grid; gap: 8px; font-size: 13px; color: var(--muted); }
.ms-bar i { position: relative; height: 10px; border-radius: 10px; background: var(--lock-soft); overflow: hidden; }
.ms-bar i::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--lock); }
.ms-bar i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--paid); transform-origin: 0 50%; transform: scaleX(0); transition: transform .7s var(--ease); }
.ms-bar li.is-done i::after { transform: none; }
.ms-bar span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (min-width: 1024px) and (min-height: 620px) and (prefers-reduced-motion: no-preference) {
  html.motion .miles { padding-block: 0; }
  html.motion .miles-pin { height: 240vh; }
  html.motion .miles-stage { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding-top: calc(var(--pill-b) - 24px); }
  html.motion .miles-grid { width: 100%; }
}
@media (max-width: 1023px) { .miles-grid { grid-template-columns: 1fr; } .miles-art { order: -1; } }

/* ============================================================ condition builder: GitHub live, the rest coming */
.rb { max-width: 1040px; margin-top: clamp(40px, 4.4vw, 60px); }   /* r18 (client: bigger, taller, better) */
.rb-sources { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 6px; border-radius: 28px; background: var(--ground-2); }
.rb-sources button {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px; height: 54px; padding: 0 12px; border: 0; border-radius: 999px;
  background: transparent; color: var(--ink-2); font-size: 16px; font-weight: 600; cursor: pointer; transition: background-color var(--t1) var(--ease), color var(--t1) var(--ease);
}
.rb-sources button:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.rb-sources button .i { width: 21px; height: 21px; }
.rb-sources button em { font-style: normal; font-size: 12.5px; font-weight: 600; color: var(--muted); }
.rb-sources button em.live { color: var(--paid-text); }
.rb-sources button[aria-checked="true"] { background: var(--ink); color: var(--ground); }
.rb-sources button[aria-checked="true"] em { color: color-mix(in srgb, var(--ground) 70%, transparent); }
.rb-sources button[aria-checked="true"] em.live { color: var(--brand); }
:root[data-theme="dark"] .rb-sources button[aria-checked="true"] em.live { color: var(--paid-text); }
.rb-card { margin-top: 10px; display: grid; gap: 10px; }   /* r9 QA: no panel around the rows (one level) */
.rb-row { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 20px; min-height: 112px; padding: 26px 36px; border-radius: 26px; background: var(--ground-2); }
.rb-k { font-size: 13.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.rb-v { font-size: clamp(1.25rem, .9vw + .95rem, 1.875rem); font-weight: 500; letter-spacing: -.02em; line-height: 1.45; }
.rb-v b { display: inline-block; padding: 1px 12px; border-radius: 12px; background: var(--brand-soft); color: var(--brand-text); font-weight: 650; }
/* NOW: four steps with their own marks, joined by a line that fills as the PR moves */
.rb-watch { padding-block: 30px 28px; }
.rb-flow { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; font-size: 15px; font-weight: 600; color: var(--muted); }
.rb-flow li { position: relative; display: grid; justify-items: start; gap: 12px; transition: color var(--t2) var(--ease); }
.rb-flow li i { position: relative; z-index: 1; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: #FFFFFF; color: var(--muted);
  transition: background-color var(--t2) var(--ease), color var(--t2) var(--ease), transform var(--t2) var(--ease); }
.rb-flow li i .i { width: 22px; height: 22px; }
.rb-flow li:not(:last-child)::after { content: ""; position: absolute; left: 60px; right: 12px; top: 22.5px; height: 3px; border-radius: 3px; background: var(--field);
  transform-origin: 0 50%; transition: background-color .5s var(--ease); }
.rb-flow[data-step="1"] li:nth-child(-n+1), .rb-flow[data-step="2"] li:nth-child(-n+2), .rb-flow[data-step="3"] li:nth-child(-n+3), .rb-flow[data-step="4"] li { color: var(--ink); }
.rb-flow[data-step="1"] li:nth-child(-n+1) i, .rb-flow[data-step="2"] li:nth-child(-n+2) i, .rb-flow[data-step="3"] li:nth-child(-n+3) i, .rb-flow[data-step="4"] li i { background: var(--lock-soft); color: var(--lock-text); }
.rb-flow[data-step="2"] li:nth-child(-n+1)::after, .rb-flow[data-step="3"] li:nth-child(-n+2)::after, .rb-flow[data-step="4"] li::after { background: var(--lock); }
.rb-flow[data-step="4"] li.pine { color: var(--paid-text); }
.rb-flow[data-step="4"] li.pine i { background: var(--paid); color: #FFFFFF; }
html.motion .rb-flow[data-step="1"] li:nth-child(1) i, html.motion .rb-flow[data-step="2"] li:nth-child(2) i, html.motion .rb-flow[data-step="3"] li:nth-child(3) i, html.motion .rb-flow[data-step="4"] li:nth-child(4) i { transform: scale(1.08); }
.rb-note { margin-top: 6px; padding: 4px 0 6px; color: var(--muted); font-size: 15px; text-align: center; }
.rb[data-src]:not([data-src="github"]) .rb-watch { opacity: .45; }
@media (max-width: 860px) {
  .rb-sources { display: flex; flex-wrap: wrap; justify-content: center; }
  .rb-sources button { height: 48px; padding: 0 14px 0 12px; font-size: 15px; }
  .rb-row { min-height: 0; padding: 22px 24px; }
}
@media (max-width: 600px) {
  .rb-sources { border-radius: 24px; }
  .rb-sources button { padding: 0 12px 0 10px; }
  .rb-row { grid-template-columns: 1fr; gap: 10px; padding: 20px; }
  .rb-flow { font-size: 12.5px; }
  .rb-flow li { gap: 8px; }
  .rb-flow li i { width: 36px; height: 36px; }
  .rb-flow li i .i { width: 18px; height: 18px; }
  .rb-flow li:not(:last-child)::after { left: 42px; right: 6px; top: 16.5px; }
}

/* ============================================================ use cases: cases.css */
/* ============================================================ disputes: disputes.css */

/* ============================================================ safety: one calm strip (four facts, no cards) */
.trust { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 clamp(28px, 3.4vw, 56px); margin-top: clamp(40px, 4.4vw, 60px); padding: clamp(28px, 3.6vw, 52px) clamp(24px, 3.6vw, 56px); border-radius: var(--r-block); background: var(--ground-2); }
.trust li { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }   /* r16: icon, title, line, link share rows across the four */
.trust-ic { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 20px; border-radius: 50%; background: var(--brand); color: var(--on-brand); }
.trust-ic .i { width: 22px; height: 22px; }
.trust b { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -.025em; line-height: 1.2; }
.trust li > span:not(.trust-ic) { margin-top: 8px; color: var(--muted); font-size: 15.5px; line-height: 1.5; }
.trust-link { display: inline-flex; justify-self: start; align-self: start; align-items: center; gap: 4px; margin-top: 12px; color: var(--brand-text); font-weight: 600; font-size: 15px; text-decoration: none; }
.trust-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.trust-link .i { width: 16px; height: 16px; }
@media (max-width: 1023px) { .trust { grid-template-columns: 1fr 1fr; } .trust li:nth-child(n+3) { padding-top: 40px; } }
@media (max-width: 560px) { .trust { grid-template-columns: 1fr; } .trust li + li { padding-top: 32px; } }

/* ============================================================ compare */

.cmp-wrap { max-width: 960px; margin-top: clamp(40px, 4.4vw, 60px); overflow-x: auto; }
.cmp { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0 6px; font-size: 16px; }
.cmp th, .cmp td { padding: 16px 22px; text-align: left; vertical-align: middle; }
.cmp thead th { padding-block: 8px; font-size: 14.5px; font-weight: 600; color: var(--muted); }
.cmp thead th.cmp-tp { color: var(--ink); }
.cmp thead .tp-ico { display: inline-block; vertical-align: -4px; margin-right: 6px; }
.cmp thead .tp-mark { width: 17px; height: 19px; }
.cmp tbody th { width: 30%; font-weight: 550; background: var(--ground-2); border-radius: 14px 0 0 14px; }
.cmp tbody td { color: var(--muted); background: var(--ground-2); }
.cmp tbody td.cmp-tp { color: var(--ink); font-weight: 550; background: var(--brand-soft); border-radius: 0 14px 14px 0; }
.cmp td.cmp-tp .i { display: inline-block; vertical-align: -3px; width: 18px; height: 18px; margin-right: 8px; color: var(--brand-text); }
@media (max-width: 640px) {
  .cmp, .cmp thead, .cmp tbody { display: block; }
  .cmp { min-width: 0; font-size: 15px; }
  .cmp thead tr, .cmp tbody tr { display: grid; grid-template-columns: 1fr 1fr; }
  .cmp thead th:first-child { display: none; }
  .cmp thead th { padding: 0 16px 6px; }
  .cmp tbody tr { margin-top: 8px; border-radius: 14px; overflow: hidden; }
  .cmp tbody th { grid-column: 1 / -1; width: auto; border-radius: 0; padding: 14px 16px 4px; }
  .cmp tbody td, .cmp tbody td.cmp-tp { border-radius: 0; padding: 8px 16px 14px; }
}

/* ============================================================ faq */
.faq-grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 4.4vw, 72px); align-items: start; }
.faq-list { display: grid; gap: 6px; }
.faq-list details { border-radius: 16px; background: var(--ground-2); overflow: hidden; transition: background-color var(--t2) var(--ease); }
.faq-list details:hover { background: color-mix(in srgb, var(--field) 45%, var(--ground-2)); }
.faq-list summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px 18px 24px; font-size: 17px; font-weight: 550; letter-spacing: -.01em; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.fq-ic { display: grid; place-items: center; flex: none; color: var(--muted); transition: transform var(--t2) var(--ease), color var(--t2) var(--ease); }
.fq-ic .i { width: 20px; height: 20px; }
.faq-list details[open] .fq-ic { transform: rotate(45deg); color: var(--ink); }
.fq-a { padding: 0 24px 20px; color: var(--muted); max-width: 46rem; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } }

/* ============================================================ cta (green card) + waitlist */
.cta { padding: var(--sec-y-half) var(--inset) 0; }
.cta > .cta-band { max-width: none; }
.cta-band {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 4vw, 64px); align-items: center;
  padding: clamp(56px, 7vw, 104px) max(clamp(24px, 6vw, 88px), calc((100% - var(--max)) / 2));
  position: relative; isolation: isolate; overflow: hidden;
  border-radius: var(--r-panel); background: var(--cta); color: var(--cta-ink);
  background: linear-gradient(180deg, #35DA8D 0%, #6DDFAB 33%, #A3E6C7 66%, #CDEFDE 100%);   /* v10: the hero's banner stops, ending at #CDEFDE so the card keeps its shape and the pale 3D logo reads */
}
/* r9 QA: copy left, the big resting 3D logo right (on top on phones) */
@media (min-width: 901px) { .cta-band { grid-template-columns: minmax(0, 1fr) minmax(0, .8fr); } }
.cta-art { justify-self: center; width: min(100%, 440px); }
.art-cta { position: relative; aspect-ratio: 1 / 1; }
.cta-still { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.cta-copy { max-width: 34rem; }
.cta .sub { color: var(--cta-muted); }
.cta-h { font-size: clamp(2.6rem, 3.4vw + 1.2rem, 4.5rem); max-width: 11ch; }
.cta .ctas { justify-content: flex-start; margin-top: 28px; }
.wl-inline { margin-top: clamp(32px, 4vw, 48px); max-width: 30rem; }
.wl-label { display: block; margin-bottom: 10px; color: var(--cta-muted); font-size: 15px; }
.wl-field { display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: var(--cta-field); outline: 2px solid transparent; outline-offset: 0; transition: outline-color var(--t2) var(--ease); }
.wl-input { flex: 1; min-width: 0; height: 46px; padding: 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--cta-ink); font: inherit; font-size: 16px; }
.wl-input::placeholder { color: var(--cta-muted); }
.wl-input:focus { outline: none; }
.wl-field:focus-within { outline-color: var(--cta-ink); }  /* focus indicator, not decoration */
.wl-field.is-bad { background: rgb(240 82 90 / .2); }
.wl-btn { height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--cta-btn); color: var(--wl-btn-ink); font-weight: 600; cursor: pointer; white-space: nowrap; transition: background-color var(--t1) var(--ease), transform var(--t1) var(--ease); }
.wl-btn:hover { background: var(--cta-btn-hover); }
.wl-btn:active { transform: scale(.98); }
.wl-msg { min-height: 1.5em; margin-top: 10px; font-size: 15px; color: var(--cta-muted); }
.wl-msg.is-bad { color: var(--cta-bad); font-weight: 600; }
.wl-msg.is-ok { color: var(--cta-ink); font-weight: 600; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
@media (max-width: 900px) {
  .cta-art { order: -1; width: min(56%, 240px); }
}
@media (max-width: 420px) { .wl-field { flex-direction: column; border-radius: 24px; } .wl-btn { width: 100%; } }

/* ============================================================ waitlist page (v7): the hero's banner ground, the 3D marks, one form card.
   Flat: the card is one raised tone, fields are a field tone, errors tint the field (no outline look). */
/* r9 QA: the same nav as home (links included) */
.wlx { position: relative; isolation: isolate; min-height: 100svh; padding: calc(var(--nav-h) + clamp(40px, 8vh, 96px)) var(--gut) clamp(64px, 8vw, 112px); color: var(--g-ink); }
/* v10: the home hero's banner ground (the client's X banner), ending on the page white exactly at the section's foot */
.wlx-ground { position: absolute; z-index: -1; inset: 0; overflow: hidden; pointer-events: none;
  background: linear-gradient(180deg, #35DA8D 0%, #6DDFAB 20%, #A3E6C7 40%, #CDEFDE 60%, #EEF9F3 80%, #FBFCFB 100%); }
.wlx-head { color: #0F201B; }
.wlx-head .lede { color: #24433A; }
.wlx-in { position: relative; max-width: 560px; margin: 0 auto; text-align: center; }
.wlx-h { font-size: clamp(2.6rem, 3.4vw + 1.3rem, 4.6rem); max-width: 12ch; margin: 0 auto; }
.wlx-card { margin-top: clamp(32px, 4vw, 44px); padding: clamp(22px, 3vw, 32px); border-radius: var(--r-block); background: var(--raised); color: var(--ink); text-align: left; }
.wlx-form { display: grid; gap: 18px; }
.wlx-row { display: grid; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; }
.wlx-label { display: flex; align-items: baseline; gap: 8px; padding: 0; font-size: 14.5px; font-weight: 600; color: var(--ink-2); }
.wlx-opt { color: var(--faint); font-weight: 500; font-size: 13px; }
.wlx .wlx-field { flex-direction: row; padding: 0; border-radius: 16px; background: var(--ground-2); outline: 2px solid transparent; transition: background-color var(--t2) var(--ease), outline-color var(--t2) var(--ease); }
.wlx .wlx-field:focus-within { outline-color: var(--brand-text); }  /* focus indicator, not decoration */
.wlx .wlx-field.is-bad { background: var(--coral-soft); outline-color: transparent; }
.wlx .wl-input { height: 52px; color: var(--ink); border-radius: 16px; }
.wlx .wl-input::placeholder { color: var(--faint); }
.wlx-at { display: flex; align-items: center; }
.wlx-at > span { padding-left: 18px; color: var(--muted); font-weight: 500; }
.wlx-at .wl-input { padding-left: 4px; }
/* the role choice: three equal segments on the field tone; the picked one is the brand tone */
.seg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; padding: 4px; border-radius: 16px; background: var(--ground-2); }
.seg label { position: relative; display: block; cursor: pointer; }
.seg input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.seg span { display: grid; place-items: center; height: 44px; border-radius: 12px; font-size: 15px; font-weight: 600; color: var(--muted); transition: background-color var(--t2) var(--ease), color var(--t2) var(--ease), transform var(--t1) var(--ease); }
.seg label:hover span { color: var(--ink); }
.seg input:checked + span { background: var(--brand); color: var(--on-brand); }
.seg input:focus-visible + span { outline: 2px solid var(--brand-text); outline-offset: 2px; }
.seg label:active span { transform: scale(.98); }
.wlx-btn { width: 100%; height: 54px; margin-top: 4px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-size: 16.5px; }
.wlx-btn:hover { background: var(--brand-hover); }
.wlx .wl-msg { margin-top: -6px; color: var(--muted); text-align: center; }
.wlx .wl-msg:empty { display: none; }
.wlx .wl-msg.is-bad { color: #B4232B; }
:root[data-theme="dark"] .wlx .wl-msg.is-bad { color: #FF9AA0; }
.wlx-note { margin-top: 22px; color: var(--g-ink-2); font-size: 15px; }
.wlx-note a { color: inherit; font-weight: 600; text-underline-offset: 4px; }
/* done: the shield settles, the tick draws in paid green (transform, opacity, stroke only) */
.wlx-done { display: grid; justify-items: center; gap: 6px; padding: 18px 0 10px; text-align: center; outline: none; }
.wlx-shield { width: 96px; height: auto; margin-bottom: 14px; overflow: visible; }
.wlx-sh { fill: var(--paid-soft); transform-box: fill-box; transform-origin: 50% 50%; }
.wlx-tick { fill: none; stroke: var(--paid); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; }
.wlx-done.is-on .wlx-sh { animation: wlx-sh .7s var(--ease) both; }
.wlx-done.is-on .wlx-tick { animation: wlx-tick .7s var(--ease) .35s both; }
.wlx-done.is-on .wlx-done-h, .wlx-done.is-on .wlx-done-p { animation: wlx-up .6s var(--ease) both; }
.wlx-done.is-on .wlx-done-h { animation-delay: .5s; } .wlx-done.is-on .wlx-done-p { animation-delay: .6s; }
@keyframes wlx-sh { from { opacity: 0; transform: scale(.86); } to { opacity: 1; transform: none; } }
@keyframes wlx-tick { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes wlx-up { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: none; } }
.wlx-done-h { font-family: var(--display); font-weight: 650; font-size: clamp(1.6rem, 1vw + 1.2rem, 2rem); letter-spacing: -.03em; line-height: 1.1; }
.wlx-done-p { color: var(--muted); }
@media (prefers-reduced-motion: reduce) { .wlx-done.is-on * { animation: none !important; } }

/* ============================================================ footer */
.foot { padding: clamp(56px, 6vw, 88px) var(--gut) calc(28px + env(safe-area-inset-bottom, 0px)); }
/* r18 (client: the closing green runs on under the footer): on the home page the CTA card and the footer are one green
   panel; the footer continues the card's last stop and closes the shape. Dark-ink tokens, as in the mint panels. */
body:has(.cta) .cta-band { border-radius: var(--r-panel) var(--r-panel) 0 0; }
body:has(.cta) .foot { margin: 0 var(--inset) var(--inset); padding-inline: max(clamp(24px, 6vw, 88px), calc((100% - var(--max)) / 2)); border-radius: 0 0 var(--r-panel) var(--r-panel);
  background: linear-gradient(180deg, #CDEFDE 0%, #E2F6EB 100%); color: #0F201B;
  --ink: #0F201B; --ink-2: #1E332C; --muted: #2E4A40; --faint: #3F5A50; --brand-text: #0B5A3F; }
body:has(.cta) .foot .logo-l { filter: brightness(0); }
body:has(.cta) .foot-in, body:has(.cta) .foot-legal { max-width: none; }   /* the panel padding already sets the column, as in the card above */
.foot-in, .foot-legal { max-width: var(--max); margin: 0 auto; }
.foot-in { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 40px; }
.foot-brand .brand { display: inline-flex; }
.foot-brand .logo { height: 28px; width: auto; }
.foot-brand p { margin-top: 12px; color: var(--muted); max-width: 22rem; }
.foot-x { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 12px; padding: 0 16px 0 13px; border-radius: 999px; background: #0F201B; color: #fff; text-decoration: none; font-weight: 600; font-size: 14px; transition: background var(--t1) var(--ease); }
.foot-x:hover { background: #000; }
.foot-cols { display: flex; flex-wrap: wrap; gap: clamp(40px, 6vw, 96px); }
/* r9 QA: every footer link and Pause motion is a >= 44 px tap target */
.foot-cols div { display: grid; gap: 0; align-content: start; }
.foot-cols b { margin-bottom: 2px; font-size: 14px; color: var(--faint); font-weight: 600; }
.foot-cols a { display: block; min-height: 44px; padding-block: 10px; text-decoration: none; font-weight: 500; transition: color var(--t1) var(--ease); }
.foot-cols a:hover { color: var(--brand-text); }
.foot-legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; margin-top: 56px; color: var(--faint); font-size: 14px; }
.foot-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; }
.motion-btn { min-height: 44px; padding: 10px 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
/* the full logo: light file on light grounds, dark file on dark grounds (never recoloured) */
.logo { display: block; height: 26px; width: auto; }
.logo-d { display: none; }
:root[data-theme="dark"] .logo-l { display: none; }
:root[data-theme="dark"] .logo-d { display: block; }

/* ============================================================ reduced motion */
@media (prefers-reduced-motion: reduce) {
  .mk { animation: none !important; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; scroll-behavior: auto !important; }
}

.tp-ico { display: inline-grid; place-items: center; }

/* ============================================================ motion layer (v7). Transform and opacity only; site.js adds the hooks.
   Reduced motion / Pause motion: html.motion is off, so none of this moves. */
/* headlines: each word rises out of its own mask, 45 ms apart */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.split .w > span { display: inline-block; }
html.motion.split-ready .split .w > span { transform: translate3d(0, 108%, 0); transition: transform .9s var(--ease) calc(var(--wi, 0) * 55ms + .08s); }
html.motion.split-ready .split.words-in .w > span { transform: none; }
html.motion .hero-in, html.motion .hero-stage { will-change: transform, opacity; }
.hero-stage { transform-origin: 50% 0; }
/* r14 (Taskly): past the first 24 px the bar pulls in (header.css) and moves up 8 px, and stays so */
.nav-bar { transform-origin: 50% 0; transition: background-color var(--t2) var(--ease), color var(--t2) var(--ease), transform .45s var(--ease), width .45s cubic-bezier(.25, 1, .5, 1), padding .45s cubic-bezier(.25, 1, .5, 1); }
html.motion .nav.is-compact .nav-bar { transform: translate3d(0, -8px, 0); }
@media (max-width: 1023px) { html.motion .nav.is-compact .nav-bar { transform: none; } }
/* the green grounds breathe: a soft light pool drifts across the hero, the closing card and the waitlist (18 s, transform only) */
.hero-ground::after, .cta-band::before, .wlx-ground::after {
  content: ""; position: absolute; z-index: -1; left: -30%; top: -40%; width: 90%; height: 120%; pointer-events: none;
  background: radial-gradient(closest-side, rgb(255 255 255 / .28), rgb(255 255 255 / 0)); }
:root[data-theme="dark"] .hero-ground::after, :root[data-theme="dark"] .cta-band::before, :root[data-theme="dark"] .wlx-ground::after,
.zone-dark .hero-ground::after, .zone-dark.wlx-ground::after {
  background: radial-gradient(closest-side, rgb(31 122 80 / .45), rgb(31 122 80 / 0)); }   /* the top gradient stop, not a glow */
.hero-ground::after, .wlx-ground::after { z-index: 0; }
.hero-ground::after { height: calc(var(--banner-h, min(100svh, 940px)) * 1.2); }
html.motion .hero-ground::after, html.motion .cta-band::before, html.motion .wlx-ground::after { animation: pool 18s ease-in-out infinite alternate; }
html.motion .cta-band::before { animation-duration: 22s; animation-delay: -6s; }
@keyframes pool { from { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(70%, 18%, 0); } to { transform: translate3d(120%, -6%, 0); } }
/* hover: a calm lift (transform) and a tone step (colour); never a shadow */
@media (hover: hover) and (pointer: fine) {
  .rcard, .trust li, .clist li { transition: transform var(--t2) var(--ease), background-color var(--t2) var(--ease); }
  .rcard:hover { transform: translate3d(0, -4px, 0); background: color-mix(in srgb, var(--field) 40%, var(--ground-2)); }
  .trust li:hover { transform: translate3d(0, -3px, 0); }
  .trust li:hover .trust-ic { transform: scale(1.08); }
  .trust-ic { transition: transform var(--t2) var(--ease); }
  .faq-list details { transition: background-color var(--t2) var(--ease), transform var(--t2) var(--ease); }
  .faq-list details:hover { transform: translate3d(4px, 0, 0); }
}

/* the rhythm next to pinned stages (v7): a pinned stage is a full screen with its content centred, so its own top or
   bottom space already does the job of the neighbour's half gap. Measured on screen at 1440 x 900 (_proof/v7 gaps). */
@media (min-width: 1024px) and (min-height: 620px) and (prefers-reduced-motion: no-preference) {
  html.motion .miles { margin-bottom: var(--sec-y-half); }
  /* v8: rules is a plain grid between two sections (no pinned stage space of its own), so it carries a full gap */
  html.motion .rules { padding-bottom: var(--sec-y); }
  html.motion .profiles { padding-top: 0; padding-bottom: var(--panel-gap); }
}
/* v8b: cases is no longer pulled up over the builder (the builder's card showed under the nav while the pin held, a
   doubled pill). Its gap is kept inside the stage instead: the stuck content sits 65 px above centre (a deeper bottom
   padding), and profiles tucks into the stage's empty bottom by the same amount. The stage's empty top never catches
   clicks meant for the section above it. */
@media (min-width: 1024px) and (min-height: 560px) and (prefers-reduced-motion: no-preference) {
  html.motion .cases-stage { pointer-events: none; }
  html.motion .cases .cases-stage { padding-bottom: calc(clamp(16px, 3vh, 32px) + 130px); }
  html.motion .cases + .profiles { margin-top: -65px; }
  html.motion .cases-stage > * { pointer-events: auto; }
}
/* after the band under the story: the band's last stretch is already page white, so a little more space keeps the
   first light heading in the same ~135 px band as every other gap (was 94 px at 1440) */
.story + .sec { padding-top: calc(var(--sec-y) - clamp(8px, 1vw, 14px)); }
.story + .mr-sec { padding-top: 0; }   /* r18: the links panel is its own inset panel; its art runs to the top edge */   /* r9: the story panel is inset by the same amount */

/* ============================================================ r13 (client: the page felt blank below the story): tinted
   inset panels like the story. Mint (the X banner's greens, dark ink) on sides / milestones / profiles; forest on safety.
   Two gradient layers; the scroll fades the deeper one in (view timeline, opacity only), static mid-tone elsewhere. */
.tint { position: relative; isolation: isolate; overflow: clip; margin: var(--inset); border-radius: var(--r-panel);
  padding-block: clamp(64px, 7vw, 112px); scroll-margin-top: calc(var(--pill-b) + 8px); }
.tint::before, .tint::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.tint-mint { --brand-text: #0B5A3F; --muted: #2E4A40; --faint: #3F5A50; --field: rgb(15 32 27 / .12); --ground-2: rgb(255 255 255 / .6); }
.tint-mint::before { background: linear-gradient(180deg, #EEF9F3 0%, #CDEFDE 55%, #A3E6C7 100%); }
.tint-mint::after { background: linear-gradient(180deg, #CDEFDE 0%, #8FE3BC 55%, #6DDFAB 100%); opacity: .5; }
.tint-mint .sd-scr { --ground-2: #F1F5F2; --field: #E3EAE6; --muted: #5A6B65; --faint: #7A8A84; }
.tint-mint .pf-card { background: rgb(255 255 255 / .72); }
.tint-mint .tot { background: rgb(255 255 255 / .6); }
.tint-mint .tot-locked { background: var(--lock-soft); }
.tint-forest::before { background: linear-gradient(180deg, #0F201B 0%, #17402F 100%); }
.tint-forest::after { background: linear-gradient(180deg, #154532 0%, #1E7550 100%); opacity: .5; }
.tint-forest { --muted: #CFDDD6; --faint: #A9BDB4; }
.tint-forest .trust { background: rgb(255 255 255 / .06); }
.tint-forest .trust-link { color: var(--brand); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .tint::after { opacity: 0; animation: tint-in linear both; animation-timeline: view(); animation-range: entry 10% exit 60%; }
  }
}
@keyframes tint-in { to { opacity: 1; } }
/* pinned neighbours: the panel keeps its own top / bottom space */
@media (min-width: 1024px) and (min-height: 620px) and (prefers-reduced-motion: no-preference) {
  html.motion .sec.tint.profiles { padding-top: clamp(64px, 7vw, 112px); padding-bottom: clamp(64px, 7vw, 112px); }
  html.motion .sec.tint.miles { padding-block: 0; margin-bottom: var(--inset); }
}

/* ============================================================ r19 (client 3 Oct: "use the landscape assets and work around
   them"): six calm landscape photos (landscape-assets/, AVIF + WebP in _tp/img/land) under the sections. Each one sits
   under the section's own colours, so text, contrast and the green brand read as before. The hero and the closing card
   MULTIPLY the photo into their green (white sky keeps the green, the hills add depth); the forest photo is darkened. */
:root {
  --land-hero: image-set(url("/_tp/img/land/hero-1920.avif") type("image/avif"), url("/_tp/img/land/hero-1920.webp") type("image/webp"));
  --land-grass: image-set(url("/_tp/img/land/grass-1600.avif") type("image/avif"), url("/_tp/img/land/grass-1600.webp") type("image/webp"));
  --land-why: image-set(url("/_tp/img/land/why-2400.avif") type("image/avif"), url("/_tp/img/land/why-2400.webp") type("image/webp"));
  --land-forest: image-set(url("/_tp/img/land/forest-2400.avif") type("image/avif"), url("/_tp/img/land/forest-2400.webp") type("image/webp"));
  --land-dunes: image-set(url("/_tp/img/land/dunes-2400.avif") type("image/avif"), url("/_tp/img/land/dunes-2400.webp") type("image/webp"));
  --land-valley: image-set(url("/_tp/img/land/valley-2880.avif") type("image/avif"), url("/_tp/img/land/valley-2880.webp") type("image/webp"));
}
@media (max-width: 900px) {
  :root {
    --land-hero: image-set(url("/_tp/img/land/hero-960.avif") type("image/avif"), url("/_tp/img/land/hero-960.webp") type("image/webp"));
    --land-grass: image-set(url("/_tp/img/land/grass-800.avif") type("image/avif"), url("/_tp/img/land/grass-800.webp") type("image/webp"));
    --land-why: image-set(url("/_tp/img/land/why-1200.avif") type("image/avif"), url("/_tp/img/land/why-1200.webp") type("image/webp"));
    --land-forest: image-set(url("/_tp/img/land/forest-1200.avif") type("image/avif"), url("/_tp/img/land/forest-1200.webp") type("image/webp"));
    --land-dunes: image-set(url("/_tp/img/land/dunes-1200.avif") type("image/avif"), url("/_tp/img/land/dunes-1200.webp") type("image/webp"));
    --land-valley: image-set(url("/_tp/img/land/valley-1440.avif") type("image/avif"), url("/_tp/img/land/valley-1440.webp") type("image/webp"));
  }
}
/* hero: misty hills rise out of the green banner; the foot still fades to the page white */
.hero-ground::before {
  background: linear-gradient(180deg, rgb(251 252 251 / 0) 78%, #FBFCFB 100%), linear-gradient(90deg, rgb(255 255 255 / .26) 0%, rgb(255 255 255 / .14) 34%, rgb(255 255 255 / 0) 50%), var(--land-hero) 50% 100% / cover no-repeat, var(--banner);
  background-blend-mode: normal, normal, multiply, normal, normal, normal;
}
/* phones: the copy sits over the top of the photo, so the veil runs top-down instead */
@media (max-width: 900px) {
  .hero-ground::before { background: linear-gradient(180deg, rgb(251 252 251 / 0) 78%, #FBFCFB 100%), linear-gradient(180deg, rgb(255 255 255 / .3) 0, rgb(255 255 255 / .2) 300px, rgb(255 255 255 / 0) 460px), var(--land-hero) 50% 100% / cover no-repeat, var(--banner); }
}
/* links: the mint art field is a soft meadow */
.mr .mr-art { background: linear-gradient(180deg, rgb(228 248 238 / .3), rgb(205 239 222 / .15)), var(--land-grass) 50% 50% / cover no-repeat, #CDEFDE; }
/* why: a light panel, two hills meeting across still water; the cards are white on it */
.tint-land::before { background: var(--land-why) 50% 50% / cover no-repeat, #EEF6F2; }
.tint-land::after { display: none; }
.tint-land.wy-sec { padding-block: var(--sec-y); }
.tint-land .wy-card { background: rgb(255 255 255 / .9); }
.tint-land .wy-ic { background: var(--ground-2); }
.tint-land .wy-mark { background: #FFFFFF; }
@media (max-width: 860px) { .tint-land .wy-say { background: #FFFFFF; } }
/* safety: a misty forest from above, darkened so the light type keeps its contrast */
.tint-forest::before { background: linear-gradient(180deg, rgb(15 32 27 / .62) 0%, rgb(15 32 27 / .78) 100%), var(--land-forest) 50% 40% / cover no-repeat, #0F201B; }
.tint-forest::after { display: none; }
/* features: pale dunes under the white cards */
.ft-sec.tint-quiet::before { background: linear-gradient(180deg, rgb(241 245 242 / .25), rgb(241 245 242 / .55)), var(--land-dunes) 50% 30% / cover no-repeat, var(--ground-2); }
/* closing card: the valley (mirrored, hills behind the 3D logo) multiplied into the green; the footer carries on below */
.cta-band {
  background: linear-gradient(180deg, rgb(205 239 222 / 0) 72%, #CDEFDE 100%), var(--land-valley) 50% 0 / cover no-repeat,
    linear-gradient(180deg, #35DA8D 0%, #6DDFAB 33%, #A3E6C7 66%, #CDEFDE 100%);
  background-blend-mode: normal, multiply, normal;
}

/* ============================================================ r20 (client 3 Oct: "improve its vibrance a bit"): a deeper
   and more saturated banner, the white left veil dropped, the lede one step darker so it keeps its contrast without the
   veil. The giant background mark stays (r20b, client: "get it back"). */
.hero { --banner: radial-gradient(40% 44% at 72% 44%, rgb(255 255 255 / .2), rgb(255 255 255 / 0) 100%),
    radial-gradient(70% 60% at 0% 0%, rgb(6 128 74 / .45), rgb(6 128 74 / 0) 100%),
    linear-gradient(180deg, #0FBF72 0%, #26D688 16%, #4FDC9C 32%, #8FE5BD 52%, #C4EFD9 68%, #EBF9F2 86%, #FBFCFB 100%); }
.hero-ground::before {
  background: linear-gradient(180deg, rgb(251 252 251 / 0) 80%, #FBFCFB 100%), var(--land-hero) 50% 100% / cover no-repeat, var(--banner);
  background-blend-mode: normal, multiply, normal, normal, normal;
  filter: saturate(1.18) contrast(1.03);
}
@media (max-width: 900px) {
  .hero-ground::before { background: linear-gradient(180deg, rgb(251 252 251 / 0) 80%, #FBFCFB 100%), linear-gradient(180deg, rgb(255 255 255 / .12) 0, rgb(255 255 255 / 0) 420px), var(--land-hero) 50% 100% / cover no-repeat, var(--banner); }
}
.hero .lede { color: #0F201B; font-weight: 450; }

/* ============================================================ r21 (client 3 Oct: "mix a yellow to give depth, so not all
   green"): warm sunlight, not a second brand colour. A lemon-gold sun sits top right behind the 3D mark and a low gold
   haze warms the horizon; the closing card, the links photo and every other icon chip take the same light. Kept clear
   of the Locked amber (#FFC23D): lemon leans green, and it never touches a status chip. */
:root { --sun: #FFD95C; --sun-soft: #FBF3C2; --sun-text: #665400; }
/* r21d (client 4 Oct, after three rounds: green sky over golden hills read as desert, see-through yellow over green
   turned lime): colours sit where nature puts them. A golden sky with the sun top right, green hills below, the page
   white at the foot. The hills are CUT OUT of the photos (sky transparent, ridge feathered, green baked richer), so no
   colour is ever laid over them and no filter touches the sky: the real ridge line meets real gold. The big glass mark
   is SCREEN-blended so it reads as bright glass in sunlight over any colour, never a lime film; the centre shield keeps
   the official green in its gold frame. */
:root {
  --hills-hero: image-set(url("/_tp/img/land/hero-hills-1920.avif") type("image/avif"), url("/_tp/img/land/hero-hills-1920.webp") type("image/webp"));
  --hills-valley: image-set(url("/_tp/img/land/valley-hills-2880.avif") type("image/avif"), url("/_tp/img/land/valley-hills-2880.webp") type("image/webp"));
}
@media (max-width: 900px) {
  :root {
    --hills-hero: image-set(url("/_tp/img/land/hero-hills-960.avif") type("image/avif"), url("/_tp/img/land/hero-hills-960.webp") type("image/webp"));
    --hills-valley: image-set(url("/_tp/img/land/valley-hills-1440.avif") type("image/avif"), url("/_tp/img/land/valley-hills-1440.webp") type("image/webp"));
  }
}
.hero { --banner: radial-gradient(38% 48% at 86% 0%, rgb(255 210 74 / .85), rgb(255 210 74 / 0) 100%),
    linear-gradient(180deg, #FFE07E 0%, #FFEDB0 20%, #FFF5D8 40%, #FFF9EA 55%, #FBFCFB 72%); }
.hero-ground::before {
  background: linear-gradient(180deg, rgb(251 252 251 / 0) 80%, #FBFCFB 100%), var(--hills-hero) 50% 100% / cover no-repeat, var(--banner);
  background-blend-mode: normal;
  filter: none;
}
.hero-backdrop { mix-blend-mode: screen; opacity: .55; }
/* the waitlist page wears the hero's sky: gold at the top, the page white at the foot */
.wlx-ground { background: radial-gradient(36% 46% at 86% 0%, rgb(255 214 70 / .9), rgb(255 214 70 / 0) 100%),
    linear-gradient(180deg, #FFE27A 0%, #FFEDA8 18%, #FFF6D6 38%, #FDFBF0 60%, #FBFCFB 100%); }
/* the drifting light pool (r14): warm white, so it never tints anything lime */
.hero-ground::after, .cta-band::before, .wlx-ground::after { background: radial-gradient(closest-side, rgb(255 252 240 / .3), rgb(255 252 240 / 0)); }
/* closing card: the same golden sky over the valley's cut-out hills, the sun behind the 3D logo; the valley's left
   morning mist melts into pale mint, which runs on into the footer */
.cta-band {
  background: radial-gradient(40% 56% at 84% 0%, rgb(255 210 74 / .8), rgb(255 210 74 / 0) 100%),
    linear-gradient(180deg, rgb(230 246 236 / 0) 78%, #E6F6EC 100%), var(--hills-valley) 50% 0 / cover no-repeat,
    linear-gradient(180deg, #FFE07E 0%, #FFEDB0 14%, #FFF5D8 28%, #FDFAEE 40%, #F1F8F1 52%, #E6F6EC 100%);
  background-blend-mode: normal;
}
body:has(.cta) .foot.foot { background: linear-gradient(180deg, #E6F6EC 0%, #F3FAF6 100%); }
#links .mr-art.mr-art::before {
  background: radial-gradient(50% 50% at 88% 8%, rgb(255 217 92 / .45), rgb(255 217 92 / 0) 100%),
    linear-gradient(180deg, rgb(228 248 238 / .3), rgb(205 239 222 / .15)), var(--land-grass) 50% 50% / cover no-repeat, #CDEFDE;
}
.ft-card:nth-child(even) i, .wy-card:nth-child(even) .wy-ic { background: var(--sun-soft); color: var(--sun-text); }
.wy-mark { background: radial-gradient(circle at 70% 25%, var(--sun-soft), var(--brand-soft) 70%); }
.tint-land .wy-mark { background: radial-gradient(circle at 70% 25%, var(--sun-soft), #FFFFFF 70%); }