/* B3 page styles (round 3, 2026-10-28). Same system as B2: the PDF / Sync app neutrals, Inter
   Light headings, nothing heavier than Medium, the app's raised buttons and tint badges.
   New in B3: the hero app is a working demo with a tour under it, How it works walks the same app through a year, and the
   frames behind the app take a gradient preset (data-grad on <html>). */

/* ---------- tokens ---------- */
:root, html[data-bg="pdf"] {
  --bg: #141415; --rail: #111112; --panel: #19191b; --raised: #212124;
  --hair: #28282c; --hair-2: #353539;
  --text: #ececea; --text-2: #a9a9ae; --text-3: #8a8a91;
  --scrim: rgb(8 8 9 / .62);
}
html[data-bg="black"] {
  --bg: #000000; --rail: #050506; --panel: #0b0c0e; --raised: #131418;
  --hair: #1e2126; --hair-2: #2c3037;
  --text: #eceef1; --text-2: #a2a8b2; --text-3: #6f7681;
  --scrim: rgb(0 0 0 / .72);
}
:root {
  --signal: #3d8bff; --on-signal: #0d0d0e;
  --spectrum: linear-gradient(90deg, oklch(.8 .115 6), oklch(.8 .115 22), oklch(.8 .115 62), oklch(.72 .13 160), oklch(.8 .115 178), oklch(.8 .115 228), oklch(.8 .115 277), oklch(.8 .115 295), oklch(.8 .115 309), oklch(.8 .115 335), oklch(.8 .115 6));   /* the ten solution colours by hue */
  --ok: oklch(.72 .16 152); --warn: oklch(.78 .135 75);
  --lip: rgb(255 255 255 / .06);
  --signal-fill: color-mix(in oklch, var(--signal) 14%, var(--panel));
  --signal-edge: color-mix(in oklch, var(--signal) 55%, transparent);
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --w-display: 300;
  --max: 1200px;
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
html[data-weight="400"] { --w-display: 400; }
body { background: var(--bg); color: var(--text); font-family: var(--sans); font-size: 16px; line-height: 1.6; letter-spacing: -.006em; font-optical-sizing: auto; transition: background-color .3s; }
.wrap { width: min(var(--max), 100% - 48px); margin: 0 auto; }
b, strong { font-weight: 500; }
[hidden] { display: none !important; }

/* Category hues, from the Sync app (OKLCH). */
[data-cat] { --tone: oklch(.8 .115 var(--h, 260)); }
[data-cat="connectivity"] { --h: 178; } [data-cat="ucaas"] { --h: 295; } [data-cat="ccaas"] { --h: 309; }
[data-cat="cpaas"] { --h: 277; } [data-cat="security"] { --h: 22; } [data-cat="sase"] { --h: 6; }
[data-cat="cloud"] { --h: 228; } [data-cat="colocation"] { --h: 62; } [data-cat="ai"] { --h: 335; }
[data-cat="services"] { --tone: oklch(.8 .012 260); }

/* ---------- gradient presets for the frames ----------
   Blooms sit at the top and the sides, where the frame shows around the app window. */
html[data-grad="blue"]     { --mesh: url("/assets/start-sky.webp") center 72% / cover no-repeat, #05060c; --mesh-grain: none; }
html[data-grad="ink"]      { --mesh: radial-gradient(60% 80% at 90% -6%, rgb(40 70 210 / .8), transparent 72%), radial-gradient(50% 80% at -4% 64%, rgb(72 44 180 / .66), transparent 72%), radial-gradient(44% 44% at 62% 108%, rgb(61 139 255 / .5), transparent 70%), #04050c; }
html[data-grad="bloom"]    { --mesh: radial-gradient(90% 100% at 70% -12%, rgb(61 139 255 / .85), rgb(20 40 140 / .45) 42%, transparent 74%), radial-gradient(36% 50% at 0% 100%, rgb(20 40 140 / .45), transparent 70%), #03040a; }
html[data-grad="aurora"]   { --mesh: radial-gradient(54% 76% at 4% 18%, rgb(0 168 150 / .66), transparent 72%), radial-gradient(58% 70% at 96% -4%, rgb(40 96 255 / .66), transparent 72%), radial-gradient(44% 48% at 72% 108%, rgb(0 120 140 / .45), transparent 70%), #020709; }
html[data-grad="dusk"]     { --mesh: radial-gradient(58% 74% at 92% -6%, rgb(124 64 232 / .74), transparent 72%), radial-gradient(48% 76% at -6% 72%, rgb(196 60 150 / .54), transparent 72%), radial-gradient(44% 44% at 50% 110%, rgb(61 100 255 / .42), transparent 70%), #07040d; }
html[data-grad="copper"]   { --mesh: radial-gradient(56% 74% at 92% 0%, rgb(214 120 58 / .7), transparent 72%), radial-gradient(50% 76% at -4% 80%, rgb(140 60 25 / .6), transparent 72%), radial-gradient(44% 44% at 55% 112%, rgb(240 170 90 / .32), transparent 70%), #0a0605; }
html[data-grad="dawn"]     { --mesh: radial-gradient(58% 80% at 0% -8%, rgb(255 150 96 / .54), transparent 72%), radial-gradient(62% 82% at 100% -8%, rgb(61 139 255 / .68), transparent 72%), radial-gradient(64% 44% at 50% 112%, rgb(110 80 220 / .32), transparent 72%), #05060c; }
html[data-grad="graphite"] { --mesh: radial-gradient(58% 76% at 88% -6%, rgb(196 200 214 / .3), transparent 72%), radial-gradient(50% 76% at -4% 70%, rgb(126 130 146 / .26), transparent 72%), #0c0c0e; }
html[data-grad="plain"]    { --mesh: var(--panel); --mesh-grain: none; }
/* The same colours as three separate lights (--l1 left, --l2 top right, --l3 bottom), so the
   hero stage and the closing panel can move them independently. --l0 is the ground under them. */
html[data-grad="blue"]     { --l0: #05060c; --l1: rgb(20 40 140 / .7); --l2: rgb(47 111 255 / .62); --l3: rgb(61 139 255 / .4); }
html[data-grad="ink"]      { --l0: #04050c; --l1: rgb(72 44 180 / .62); --l2: rgb(40 70 210 / .74); --l3: rgb(61 139 255 / .46); }
html[data-grad="bloom"]    { --l0: #03040a; --l1: rgb(20 40 140 / .5); --l2: rgb(61 139 255 / .7); --l3: rgb(20 40 140 / .46); }
html[data-grad="aurora"]   { --l0: #020709; --l1: rgb(0 168 150 / .62); --l2: rgb(40 96 255 / .64); --l3: rgb(0 120 140 / .5); }
html[data-grad="dusk"]     { --l0: #07040d; --l1: rgb(196 60 150 / .5); --l2: rgb(124 64 232 / .7); --l3: rgb(61 100 255 / .42); }
html[data-grad="copper"]   { --l0: #0a0605; --l1: rgb(140 60 25 / .6); --l2: rgb(214 120 58 / .64); --l3: rgb(240 170 90 / .32); }
html[data-grad="dawn"]     { --l0: #05060c; --l1: rgb(255 150 96 / .44); --l2: rgb(61 139 255 / .64); --l3: rgb(110 80 220 / .34); }
html[data-grad="graphite"] { --l0: #0c0c0e; --l1: rgb(126 130 146 / .26); --l2: rgb(196 200 214 / .28); --l3: rgb(126 130 146 / .18); }
html[data-grad="plain"]    { --l0: var(--panel); --l1: transparent; --l2: transparent; --l3: transparent; }

.frame { position: relative; isolation: isolate; overflow: hidden; border-radius: 24px; box-shadow: 0 0 0 1px var(--hair); }
.mesh { position: absolute; inset: -14%; z-index: -2; background: var(--mesh); transition: background .4s; }
.mesh::after { content: ""; position: absolute; inset: 0; background: var(--mesh-grain, var(--grain)); }
@media (prefers-reduced-motion: no-preference) {
  .mesh { animation: drift 34s ease-in-out infinite alternate; }
  @keyframes drift { 0% { transform: translate3d(-2.5%, 1.5%, 0) rotate(-2deg) scale(1.02); } 100% { transform: translate3d(2.5%, -1.5%, 0) rotate(2deg) scale(1.07); } }
}
/* Moving lights: a .mesh holding three <i>s shows the preset as three lights over --l0, each on
   its own path. The frames that use them (the hero stage, the closing panel) set where they sit
   and how they travel; reduced motion leaves them at rest. */
.stage .mesh, .final .mesh { inset: 0; background: var(--l0, #050608); animation: none; }
.mesh > i { position: absolute; border-radius: 50%; mix-blend-mode: screen; }
.mesh > i:nth-child(1) { background: radial-gradient(closest-side, var(--l1), transparent); }
.mesh > i:nth-child(2) { background: radial-gradient(closest-side, var(--l2), transparent); }
.mesh > i:nth-child(3) { background: radial-gradient(closest-side, var(--l3), transparent); }
/* With the script (chan.js), the hero's and the closing panels' lights become the dithered solution colours
   (Will, 2026-11-03); the gradient lights stay for anyone without it. */
.mesh.dithered > i, .mesh.dithered::after { display: none; }
.mesh__dither { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ---------- type ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 500; color: var(--text-3); }
.eyebrow .n { color: var(--text); font-variant-numeric: tabular-nums; }
.h1 { margin: 22px 0 0; font-weight: var(--w-display); font-size: clamp(40px, 6.6vw, 92px); line-height: 1.01; letter-spacing: -.038em; text-wrap: balance; }
.h2 { margin: 18px 0 0; font-weight: var(--w-display); font-size: clamp(34px, 4.3vw, 58px); line-height: 1.05; letter-spacing: -.032em; text-wrap: balance; }
.h3 { margin: 0; font-weight: 400; font-size: 21px; line-height: 1.25; letter-spacing: -.016em; }
.lede { margin: 20px 0 0; max-width: 560px; font-size: clamp(16.5px, 1.3vw, 18.5px); line-height: 1.6; color: var(--text-2); text-wrap: pretty; }
.basis { margin: 14px 0 0; font-size: 12.5px; color: var(--text-3); }
.basis b { color: var(--text-2); }
/* The two lines beside every Sync demo or entry point (legal brief, 2026-10-29): what Sync is, and how CHNLSYNC is paid. */
.disclose { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 40px; margin: 20px 0 0; }
.disclose p { position: relative; margin: 0; padding-left: 26px; font-size: 13px; line-height: 1.55; color: var(--text-3); text-wrap: pretty; }
.disclose svg { position: absolute; left: 0; top: 1px; width: 16px; height: 16px; color: var(--text-2); }
.disclose a { color: var(--text-2); text-decoration: underline; text-decoration-color: var(--hair-2); text-underline-offset: 3px; }
.disclose a:hover { color: var(--text); }

/* ---------- buttons (the app's raised buttons) ---------- */
.btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 10px; font: 500 14.5px/1 var(--sans); letter-spacing: -.01em; white-space: nowrap; user-select: none; cursor: pointer; }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; transition: filter .15s ease-out, box-shadow .15s ease-out, scale .15s ease-out; }
.btn:active::before { scale: .985; }
.btn svg { width: 16px; height: 16px; }
.btn--primary { color: var(--on-signal); }
.btn--primary::before { background: var(--signal); box-shadow: inset 0 1px 0 rgb(255 255 255 / .14), inset 0 1px 2px -.5px rgb(255 255 255 / .12), inset 0 8px 24px -4px rgb(255 255 255 / .1), inset 0 -4px 12px -4px rgb(255 255 255 / .06), 0 0 0 1px color-mix(in oklch, var(--signal), black 40%), 0 .5px .5px rgb(0 0 0 / .08), 0 2px 2px -1px rgb(0 0 0 / .08), 0 3px 3px -1.5px rgb(0 0 0 / .08), 0 5px 5px -2.5px rgb(0 0 0 / .07), 0 8px 8px -3px rgb(0 0 0 / .06), 0 12px 12px -6px rgb(0 0 0 / .05); }
.btn--primary:hover::before { filter: brightness(1.14); }
.btn--outline { color: var(--text); }
.btn--outline::before { background: color-mix(in oklch, var(--bg), white 4%); box-shadow: inset 0 8px 24px -4px rgb(255 255 255 / .04), inset 0 -4px 12px -4px rgb(255 255 255 / .05), inset 0 0 0 1px rgb(255 255 255 / .1), 0 .5px .5px rgb(0 0 0 / .16), 0 2px 2px -1px rgb(0 0 0 / .12), 0 3px 3px -1.5px rgb(0 0 0 / .1), 0 5px 5px -2.5px rgb(0 0 0 / .08), 0 8px 8px -3px rgb(0 0 0 / .06), 0 12px 12px -6px rgb(0 0 0 / .05); }
.btn--outline:hover::before { box-shadow: inset 0 8px 24px -4px rgb(255 255 255 / .04), inset 0 -4px 12px -4px rgb(255 255 255 / .05), inset 0 0 0 1px rgb(255 255 255 / .17), 0 .5px .5px rgb(0 0 0 / .16), 0 2px 2px -1px rgb(0 0 0 / .12), 0 3px 3px -1.5px rgb(0 0 0 / .1), 0 5px 5px -2.5px rgb(0 0 0 / .08), 0 8px 8px -3px rgb(0 0 0 / .06), 0 12px 12px -6px rgb(0 0 0 / .05); }
.btn--ghost { color: var(--text-2); }
.btn--ghost:hover { color: var(--text); }
.btn--ghost:hover::before { background: color-mix(in srgb, var(--text) 7%, transparent); }
.btn--sm { height: 32px; padding: 0 12px; font-size: 13.5px; border-radius: 8px; }
.btn--lg { height: 46px; padding: 0 20px; font-size: 15px; border-radius: 12px; }

/* ---------- tint badges ---------- */
.b { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; font: 500 12.5px/1 var(--sans); white-space: nowrap; color: var(--text-2); }
.b::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: color-mix(in oklab, currentColor 10%, var(--panel)); box-shadow: inset 0 1px 0 var(--lip), inset 0 -1px 0 color-mix(in srgb, currentColor 12%, transparent), 0 0 0 1px color-mix(in srgb, currentColor 24%, transparent); }
.b.ok { color: var(--ok); } .b.warn { color: var(--warn); } .b.sig { color: var(--signal); } .b.tint { color: var(--tone); }
.b.no { color: var(--text-3); } .b.no::before { background: var(--raised); box-shadow: inset 0 0 0 1px var(--hair-2); }
.b.out { color: var(--text-2); } .b.out::before { background: var(--panel); box-shadow: 0 0 0 1px var(--hair-2); }
.b.sm { height: 20px; padding: 0 8px; font-size: 11px; gap: 5px; }
.b svg { width: 12px; height: 12px; }

/* ---------- nav ---------- */
.nav { position: sticky; top: 0; z-index: 60; height: 64px; display: flex; align-items: center; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom: 1px solid transparent; transition: border-color .3s, background-color .3s; }
.nav.scrolled { border-bottom-color: var(--hair); }
.nav .wrap { display: flex; align-items: center; gap: 28px; }
.nav__links { display: flex; gap: 2px; }
.nav__links a { padding: 7px 10px; border-radius: 8px; font-size: 14px; color: var(--text-2); transition: color .2s, background-color .2s; }
.nav__links a:hover { color: var(--text); background: color-mix(in srgb, var(--text) 6%, transparent); }
.nav__right { margin-left: auto; display: flex; align-items: center; gap: 6px; }
/* Phones and tablets get a menu (Will, 2026-11-03): the bar's button opens a sheet under it with the nav's links,
   then Sign in and Start. It closes on a link, on Esc, or when the window widens past 1080px. */
.nav__menu { display: none; align-items: center; justify-content: center; width: 36px; height: 36px; margin-right: -6px; border-radius: 8px; color: var(--text); transition: background-color .2s; }
.nav__menu:hover { background: color-mix(in srgb, var(--text) 7%, transparent); }
.nav__menu svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.nav__menu path { transform-origin: 12px 12px; transition: transform .2s cubic-bezier(.22, 1, .36, 1); }
html.menu-open .nav__menu .m-a { transform: translateY(3px) rotate(45deg); }
html.menu-open .nav__menu .m-b { transform: translateY(-3px) rotate(-45deg); }
html.menu-open { overflow: hidden; }
html.menu-open .nav { background: var(--bg); border-bottom-color: var(--hair); }
.nav__sheet { position: fixed; z-index: 59; inset: 64px 0 0; display: none; overflow-y: auto; background: var(--bg); visibility: hidden; opacity: 0; transform: translateY(-6px); transition: opacity .18s, transform .18s, visibility 0s .18s; }
html.menu-open .nav__sheet { visibility: visible; opacity: 1; transform: none; transition: opacity .18s, transform .18s; }
.nav__sheet-links { display: flex; flex-direction: column; padding-top: 8px; }
.nav__sheet-links a { padding: 15px 0; border-bottom: 1px solid var(--hair); font-size: 19px; font-weight: 500; letter-spacing: -.012em; color: var(--text); }
.nav__sheet-links a[aria-current="page"] { color: var(--text-2); }
.nav__sheet-ctas { display: grid; gap: 10px; padding: 28px 0 40px; }
.nav__sheet-ctas .btn { height: 46px; font-size: 15px; }

/* ---------- arranged sections ---------- */
/* Will rearranges these himself in the lab (Arrange in the lab bar: shared/arrange.js, saved by arrange.py), so the
   rules here draw any arrangement. .lay holds one or two columns; a column is a stack of lines; a line has a left
   group and, optionally, a right group held to the far edge. A right group that runs out of room wraps under the
   left one and lines up on the left. */
[data-arrange] > .wrap { container: arrange / inline-size; }
.lay[data-cols="2"] { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px 56px; align-items: start; }
.lay[data-split="even"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.lay[data-split="wide-right"] { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
.lay[data-cv="center"] { align-items: center; }
.lay[data-cv="end"] { align-items: end; }
@container arrange (max-width: 900px) { .lay[data-cols="2"] { grid-template-columns: minmax(0, 1fr); } }
.lay__col { min-width: 0; }
.lay__line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 22px; }
.lay__line[data-v="start"] { align-items: flex-start; }
.lay__line[data-v="end"] { align-items: flex-end; }
.lay__line[data-align="center"] { justify-content: center; text-align: center; }
.lay__g { display: flex; flex-wrap: wrap; align-items: inherit; gap: 12px 22px; min-width: 0; }
.lay__line[data-align="center"] .lay__g { justify-content: center; }
.lay [data-block] { margin: 0; }

/* ---------- hero ---------- */
/* The home hero, after Linear's (measured 2026-11-03 at 1512×982). The headline, the paragraph and the beta note
   share one left edge, and Start and Book a call sit on the right edge, level with the beta note and under the nav's
   Start (Will, 2026-11-03). Then the app. On a phone the buttons come first, full width, under the paragraph.
   The gaps between lines default to that layout (26px above the paragraph, 32px above the buttons, 20px under a
   beta pill on a line of its own); a line's "Space above" in Arrange overrides them.
   The Solutions index still uses the two-column .hero__top below. */
.hero { padding: clamp(56px, 6.2vw, 88px) 0 clamp(36px, 3.4vw, 48px); }
.hero .lay__line + .lay__line { margin-top: var(--gap-set, var(--gap, 28px)); }
.hero .lay__line:has([data-block="lede"]) { --gap: 26px; }
.hero .lay__line:has([data-block="ctas"]) { --gap: 32px; }
.hero .lay__line:not(:has([data-block]:not([data-block="beta"]))):has([data-style="pill"]) + .lay__line { --gap: 20px; }
.hero .lay__line[data-gap="s"] { --gap-set: 14px; }
.hero .lay__line[data-gap="l"] { --gap-set: 52px; }
.hero [data-block="h1"][data-size="m"] { font-size: clamp(38px, 5.6vw, 78px); }
.hero [data-block="h1"][data-size="s"] { font-size: clamp(36px, 4.8vw, 64px); }
.hero [data-block="lede"] { max-width: 640px; }
.hero [data-block="lede"][data-width="s"] { max-width: 520px; }
.hero [data-block="lede"][data-width="l"] { max-width: 760px; }
.hero__beta { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--text-3); transition: color .2s; }
.hero__beta b { font-weight: 500; color: var(--text); }
.hero__beta svg { width: 14px; height: 14px; transition: translate .2s; }
.hero__beta:hover { color: var(--text-2); }
.hero__beta:hover svg { translate: 2px 0; }
.hero__beta[data-style="pill"] { height: 28px; padding: 0 11px 0 12px; border-radius: 999px; font-size: 13px; background: var(--panel); box-shadow: 0 0 0 1px var(--hair-2); }
.hero__top { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px 56px; align-items: end; }
.hero__aside .lede { margin: 0; max-width: 460px; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hero__fine { margin: 14px 0 0; font-size: 13px; color: var(--text-3); }

.stage { width: min(1340px, 100% - 24px); margin: 0 auto; padding: clamp(14px, 3.4vw, 46px) clamp(10px, 3.4vw, 46px) 18px; }
.stage__note { position: relative; margin: 16px 0 0; text-align: center; font-size: 13px; color: rgb(255 255 255 / .66); }
/* The stage's lights travel the edges the app window leaves showing: teal down and up the left
   side, blue along the top right and down the right side, deep teal along the top. */
.stage .mesh i:nth-child(1) { left: -20%; top: -6%; width: 46%; height: 80%; }
.stage .mesh i:nth-child(2) { left: 66%; top: -46%; width: 52%; height: 88%; }
.stage .mesh i:nth-child(3) { left: 14%; top: -52%; width: 40%; height: 70%; }
@media (prefers-reduced-motion: no-preference) {
  .stage .mesh i:nth-child(1) { animation: stage-1 20s ease-in-out infinite alternate; }
  .stage .mesh i:nth-child(2) { animation: stage-2 25s ease-in-out infinite alternate; }
  .stage .mesh i:nth-child(3) { animation: stage-3 29s ease-in-out infinite alternate; }
  @keyframes stage-1 { 50% { transform: translate3d(4%, 52%, 0) scale(1.12); } 100% { transform: translate3d(30%, -18%, 0) scale(.94); } }
  @keyframes stage-2 { 50% { transform: translate3d(-42%, 14%, 0) scale(1.1); } 100% { transform: translate3d(-6%, 58%, 0) scale(1); } }
  @keyframes stage-3 { 50% { transform: translate3d(70%, 8%, 0) scale(1.2); } 100% { transform: translate3d(120%, -4%, 0) scale(.95); } }
}
/* the page arrives the way Linear's does: the words, then the app, each sharpening out of a soft blur */
@media (prefers-reduced-motion: no-preference) {
  .hero .lay__line, .hero__aside { animation: arrive .9s cubic-bezier(.22, 1, .36, 1) both; }
  .hero .lay__line:nth-child(2) { animation-delay: .08s; }
  .hero .lay__line:nth-child(n+3), .hero__aside { animation-delay: .16s; }
  .stage .win, .stage__note { animation: arrive 1.1s .3s cubic-bezier(.22, 1, .36, 1) both; }
  @keyframes arrive { from { opacity: 0; filter: blur(10px); transform: translateY(12px); } }
}

/* the tour under the app */
.tour { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 0; border-bottom: 1px solid var(--hair); }
.tour button { position: relative; display: block; padding: 18px 18px 20px 0; text-align: left; font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
.tour button + button { padding-left: 18px; }
.tour button::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 1px; background: var(--hair); }
.tour button + button::before { left: 18px; }
.tour .bar { position: absolute; left: 0; top: -1px; height: 1px; width: 0; background: var(--text); }
.tour button + button .bar { left: 18px; }
.tour b { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-3); transition: color .2s; }
.tour b svg { width: 15px; height: 15px; }
.tour small { display: block; margin-top: 5px; font-size: 13px; line-height: 1.5; color: var(--text-3); opacity: .7; transition: opacity .2s, color .2s; }
.tour button:hover b, .tour button.on b { color: var(--text); }
.tour button.on small { color: var(--text-2); opacity: 1; }
.tour button.on::before { background: var(--hair-2); }

/* ---------- strip ---------- */
.strip { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 56px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.strip > div { padding: 20px 24px 20px 0; }
.strip > div + div { padding-left: 24px; border-left: 1px solid var(--hair); }
.strip b { display: block; font-weight: var(--w-display); font-size: clamp(28px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.strip span { display: block; margin-top: 4px; font-size: 13.5px; color: var(--text-3); }

/* ---------- sections ---------- */
.sec { padding: clamp(104px, 12vw, 168px) 0 0; }
.sec__head { max-width: 760px; }
.sec__badges { display: flex; gap: 8px; margin-top: 22px; }
.card { position: relative; background: var(--panel); border: 1px solid var(--hair); border-radius: 16px; }


/* How it works: one app window that stays put while the buyer's year scrolls past it (Will kept this
   over a grid of cards, 2026-11-02). The step at the middle of the screen sets the window's state.
   The months give the order: a dot on the line marks each step, no numbers. */
.story { display: grid; grid-template-columns: minmax(280px, .6fr) minmax(0, 1.4fr); gap: clamp(32px, 4.6vw, 72px); margin-top: 48px; }
/* room after the last step, so the window is still whole on screen while January is the step in the middle */
.steps { position: relative; list-style: none; margin: 0; padding: 0 0 max(24px, calc(708px - 82vh), calc(324px - 32vh)); }
.steps::before { content: ""; position: absolute; left: 5px; top: 14px; bottom: 30vh; width: 1px; background: linear-gradient(var(--hair-2) 85%, transparent); }
.step { position: relative; min-height: 64vh; display: grid; grid-template-columns: 11px minmax(0, 1fr); column-gap: 22px; align-content: center; padding: 28px 0; cursor: pointer; outline: none; }
.step:first-child { align-content: start; min-height: 58vh; padding-top: 4px; }
.step > * { grid-column: 2; transition: opacity .5s cubic-bezier(.22, 1, .36, 1); }
.step:not(.on) > :not(.step__dot) { opacity: .32; }
.step:not(.on):hover > :not(.step__dot) { opacity: .6; }
.step:focus-visible h3 { text-decoration: underline; text-underline-offset: 4px; }
.step__dot { grid-column: 1; grid-row: 1; align-self: center; width: 11px; height: 11px; border-radius: 50%; background: var(--bg); box-shadow: inset 0 0 0 1.5px var(--hair-2), 0 0 0 6px var(--bg); transition: background-color .4s, box-shadow .4s; }
.step.on .step__dot { background: var(--text); box-shadow: inset 0 0 0 1.5px var(--text), 0 0 0 6px var(--bg), 0 0 16px 3px rgb(255 255 255 / .22); }
.step__mo { grid-row: 1; align-self: center; font-size: 13.5px; font-weight: 500; color: var(--text-3); }
.step.on .step__mo { color: var(--text-2); }
.step > h3 { margin: 14px 0 0; font-weight: 400; font-size: clamp(24px, 2.3vw, 30px); line-height: 1.15; letter-spacing: -.024em; }
.step > p { margin: 12px 0 0; max-width: 430px; font-size: 16.5px; line-height: 1.6; color: var(--text-2); }
.step__by { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.step__panel { display: none; }
.sticky { position: sticky; top: max(84px, calc(50vh - 300px)); height: 600px; align-self: start; }

/* 03 */
.two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 6vw, 96px); align-items: center; }
/* Your broker: One, not many (Will picked it from layouts/why-broker/, 2026-11-03). A floor of grey pixels, a call
   center's worth of desks, gathers into one ring of the ten colours round Will's initials (chan.js); his name arrives
   with them. The avatar, the button row and the three things are shared with the options page. */
.bx-cta { margin-top: 28px; }
.bx-av { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; background: var(--raised); box-shadow: inset 0 0 0 1px var(--hair-2), 0 0 0 6px var(--bg); font-size: 24px; font-weight: 500; letter-spacing: .02em; }
.bx-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; margin-top: 56px; border-top: 1px solid var(--hair); }
.bx-items .it { padding: 20px 0 0; border: 0; }

.bx-crowd__stage { position: relative; aspect-ratio: 1.2; }
.bx-crowd__stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.bx-crowd .bx-av { position: absolute; left: 50%; top: 46%; width: 112px; height: 112px; font-size: 30px; transform: translate(-50%, -50%) scale(.85); opacity: 0; transition: opacity .6s ease, transform .8s cubic-bezier(.22, 1, .36, 1); }
.bx-crowd.is-one .bx-av { opacity: 1; transform: translate(-50%, -50%); }
.bx-crowd__cap { position: absolute; left: 0; right: 0; top: 74%; display: grid; margin: 0; text-align: center; font-size: 15px; }
.bx-crowd__cap span { grid-area: 1 / 1; transition: opacity .6s ease; }
.bx-crowd__cap .cap-was { color: var(--text-3); }
.bx-crowd__cap .cap-now { opacity: 0; color: var(--text-2); }
.bx-crowd__cap .cap-now b { font-weight: 500; color: var(--text); }
.bx-crowd__cap .cap-now small { display: block; margin-top: 4px; font-size: 13px; color: var(--text-3); }
.bx-crowd.is-one .cap-was { opacity: 0; }
.bx-crowd.is-one .cap-now { opacity: 1; }

.items .it { padding: 14px 0 15px; border-top: 1px solid var(--hair); }
.items .it:first-child { border-top: 0; padding-top: 4px; }
.it .t { font-size: 15.5px; font-weight: 500; letter-spacing: -.01em; }
.it p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }

/* Why CHNLSYNC: Panels (Will picked them from layouts/why-broker/, 2026-11-03). Before and after, read across: the
   usual way flat and grey, CHNLSYNC bright over a corner of the ten colours' pixels. */
.wp-grid { display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); align-items: stretch; margin-top: 56px; }
.wp-panel { position: relative; overflow: hidden; padding: 26px 28px 10px; border-radius: 22px; }
.wp-panel--was { background: color-mix(in oklch, var(--panel) 60%, var(--bg)); box-shadow: inset 0 0 0 1px var(--hair); }
.wp-panel--now { background: var(--panel); box-shadow: 0 0 0 1px var(--hair-2), 0 40px 100px -50px color-mix(in oklch, var(--ok) 50%, transparent); }
.wp-px { position: absolute; inset: 0; background: var(--spectrum); background-size: 200% 100%; opacity: .55;
  -webkit-mask-image: radial-gradient(90% 70% at 100% 0%, #000 0, transparent 70%), linear-gradient(90deg, #000 4px, transparent 0), linear-gradient(#000 4px, transparent 0);
  -webkit-mask-size: 100% 100%, 6px 6px, 6px 6px; -webkit-mask-composite: source-in, source-in;
  mask-image: radial-gradient(90% 70% at 100% 0%, #000 0, transparent 70%), linear-gradient(90deg, #000 4px, transparent 0), linear-gradient(#000 4px, transparent 0);
  mask-size: 100% 100%, 6px 6px, 6px 6px; mask-composite: intersect; }
.wp-k { position: relative; font-size: 13px; font-weight: 500; color: var(--text-3); }
.wp-panel--now .wp-k { color: var(--ok); }
.wp-panel ul { position: relative; margin: 18px 0 0; padding: 0; list-style: none; }
.wp-panel li { position: relative; min-height: 3.2lh; padding: 16px 0 16px 26px; border-top: 1px solid var(--hair); font-size: 19px; line-height: 1.4; letter-spacing: -.015em; }
.wp-panel li::before { content: ""; position: absolute; left: 0; top: calc(16px + .7lh - 5px); width: 9px; height: 9px; border-radius: 2px; }
.wp-panel--was li { font-weight: var(--w-display); color: var(--text-3); }
.wp-panel--was li::before { background: var(--hair-2); }
.wp-panel--now li { color: var(--text); }
.wp-panel--now li::before { background: var(--ok); }
.wp-arrow { align-self: center; justify-self: center; width: 12px; height: 12px; border-top: 1.5px solid var(--text-3); border-right: 1.5px solid var(--text-3); transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) { .wp-px { animation: px-drift 18s linear infinite; } }

@keyframes px-drift { to { background-position: -200% 0; } }

/* How we're paid: Flow (Will picked it from layouts/paid/, 2026-11-03). What you get from CHNLSYNC at $0, what the
   provider you choose pays us when you buy, and what you pay the provider, as one map. The pixel streams step a
   pixel at a time toward where the value goes: the ten colours for the work, green for the money. */
.pa-map { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; margin-top: 64px; padding-bottom: 84px; }
.pa-node { position: relative; z-index: 1; padding: 20px 22px 22px; border-radius: 16px; background: var(--panel); box-shadow: 0 0 0 1px var(--hair); }
.pa-node--us { background: var(--signal-fill); box-shadow: 0 0 0 1px var(--signal-edge); }
.pa-k { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-3); }
.pa-node--us .pa-k { color: var(--signal); }
.pa-node b { display: block; margin-top: 6px; font-size: 17px; font-weight: 500; letter-spacing: -.012em; }
.pa-link { display: grid; justify-items: center; gap: 12px; padding: 0 14px; }
.pa-tag { padding: 4px 11px; border-radius: 999px; background: var(--raised); box-shadow: inset 0 0 0 1px var(--hair-2); font-size: 12.5px; font-weight: 500; }
.pa-link--paid .pa-tag { background: color-mix(in oklch, var(--ok) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--ok) 40%, transparent); color: var(--ok); }
.pa-line { display: block; width: 100%; height: 6px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); mask-image: linear-gradient(90deg, transparent, #000 14%, #000 86%, transparent); }
.pa-link--free .pa-line { background: repeating-linear-gradient(90deg, oklch(.8 .115 6) 0 6px, transparent 6px 12px, oklch(.8 .115 62) 12px 18px, transparent 18px 24px, oklch(.8 .115 178) 24px 30px, transparent 30px 36px, oklch(.8 .115 277) 36px 42px, transparent 42px 48px, oklch(.8 .115 309) 48px 54px, transparent 54px 60px); }
.pa-link--paid .pa-line { background: repeating-linear-gradient(90deg, var(--ok) 0 6px, transparent 6px 12px); }
.pa-cap { font-size: 13px; color: var(--text-3); text-align: center; }
.pa-buy { position: absolute; left: 9.1%; right: 9.1%; bottom: 34px; height: 46px; border: 1px solid var(--hair-2); border-top: 0; border-radius: 0 0 16px 16px; }   /* from You to the provider */
.pa-buy span { position: absolute; left: 50%; bottom: -10px; padding: 0 14px; background: var(--bg); font-size: 13px; color: var(--text-2); white-space: nowrap; transform: translateX(-50%); }
.pa-buy i { position: absolute; right: -5px; top: -2px; border: 5px solid transparent; border-bottom: 7px solid var(--text-3); border-top: 0; }
.pa-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 48px; margin-top: 8px; border-top: 1px solid var(--hair); }
.pa-rules > div { padding: 20px 0 0; }
.pa-rules b { font-size: 15.5px; font-weight: 500; }
.pa-rules p { margin: 4px 0 0; font-size: 14.5px; line-height: 1.55; color: var(--text-2); }
@media (prefers-reduced-motion: no-preference) {
  .pa-link--free .pa-line { animation: pa-free 1.5s steps(10) infinite; }
  .pa-link--paid .pa-line { animation: pa-paid .5s steps(2) infinite; }
  @keyframes pa-free { to { background-position: -60px 0; } }
  @keyframes pa-paid { to { background-position: -12px 0; } }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 960px) {   /* standing up, the value still runs toward You: up */
  .pa-link--free .pa-line { animation: pa-free-up 1s steps(6) infinite; }
  .pa-link--paid .pa-line { animation: pa-paid-up .5s steps(2) infinite; }
  @keyframes pa-free-up { to { background-position: 0 -36px; } }
  @keyframes pa-paid-up { to { background-position: 0 -12px; } }
}

/* 05 */
.g2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 56px; }
.tool { display: flex; flex-direction: column; padding: 22px 24px; min-height: 280px; transition: border-color .25s; }
.tool:hover { border-color: var(--hair-2); }
.tool__h { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tool p { margin: 10px 0 0; max-width: 440px; font-size: 15px; line-height: 1.6; color: var(--text-2); }
.tool .carriers { margin-top: 18px; max-width: 460px; border-radius: 12px; background: var(--bg); box-shadow: 0 0 0 1px var(--hair); overflow: hidden; }
.tool .carriers div { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 14px; align-items: center; padding: 7px 12px; border-top: 1px solid var(--hair); font-size: 12.5px; color: var(--text-2); }
.tool .carriers div:first-child { border-top: 0; }
.tool .carriers span:nth-child(2) { font-size: 11px; color: var(--text-3); }
.tool .go { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 22px; font-size: 14px; font-weight: 500; }
.tool .go svg { width: 15px; height: 15px; transition: transform .25s cubic-bezier(.22, 1, .36, 1); }
.tool:hover .go svg { transform: translateX(3px); }
.mapdots { display: grid; grid-template-columns: repeat(26, 1fr); gap: 4px; margin-top: 18px; max-width: 380px; }
.mapdots i { aspect-ratio: 1; border-radius: 50%; background: var(--hair-2); }
.mapdots i.w { background: var(--warn); opacity: .85; }
.mapdots i.x { background: transparent; }
.cover { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--hair); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.2fr); gap: 24px 48px; align-items: start; }
.cover h3 { margin: 0; font-size: 21px; font-weight: 400; letter-spacing: -.016em; }
.cover p { margin: 6px 0 0; font-size: 14.5px; color: var(--text-2); }
.cats { display: flex; flex-wrap: wrap; gap: 8px; }
.cats .b { height: 30px; padding: 0 13px; font-size: 13.5px; }

/* final: the closing call to action on every page. It sits on the content column, like the
   cards above it: the heading on the left, the words and buttons on the right, so the gradient
   carries no empty half. Behind it the preset's three lights drift on their own paths. */
.final { padding: clamp(64px, 8vw, 112px) 0 clamp(56px, 7vw, 96px); }
.final .frame { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: center; gap: 22px clamp(32px, 5vw, 80px); width: min(var(--max), 100% - 48px); margin: 0 auto; padding: clamp(36px, 4.6vw, 64px) clamp(24px, 4.6vw, 64px); border-radius: 20px; }
.final .frame::after { content: ""; position: absolute; inset: 0; z-index: -1; background: rgb(0 0 0 / .22); }
html[data-grad="plain"] .final .frame::after { display: none; }
.final .h2 { margin: 0; max-width: 600px; font-size: clamp(30px, 3.5vw, 48px); }
.final .eyebrow + .h2 { margin-top: 14px; }
.final .lede { margin: 0; max-width: 520px; font-size: clamp(16px, 1.2vw, 17.5px); color: var(--text); }
.final .hero__ctas { margin-top: 22px; }
.final .mesh i:nth-child(1) { left: -22%; top: -65%; width: 60%; height: 190%; }
.final .mesh i:nth-child(2) { left: 60%; top: -95%; width: 56%; height: 180%; }
.final .mesh i:nth-child(3) { left: 46%; top: 28%; width: 50%; height: 160%; }
@media (prefers-reduced-motion: no-preference) {
  .final .mesh i:nth-child(1) { animation: light-1 18s ease-in-out infinite alternate; }
  .final .mesh i:nth-child(2) { animation: light-2 23s ease-in-out infinite alternate; }
  .final .mesh i:nth-child(3) { animation: light-3 27s ease-in-out infinite alternate; }
  @keyframes light-1 { 50% { transform: translate3d(45%, 12%, 0) scale(1.18); } 100% { transform: translate3d(78%, -10%, 0) scale(.94); } }
  @keyframes light-2 { 50% { transform: translate3d(-40%, 22%, 0) scale(1.12); } 100% { transform: translate3d(-74%, 6%, 0) scale(.96); } }
  @keyframes light-3 { 50% { transform: translate3d(-55%, -18%, 0) scale(1.2); } 100% { transform: translate3d(-96%, -6%, 0) scale(1); } }
}

footer { border-top: 1px solid var(--hair); padding: 56px 0 0; }   /* the band runs to the foot of the page */
.foot { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 32px; }
.foot p { margin: 14px 0 0; max-width: 300px; font-size: 14px; line-height: 1.6; color: var(--text-3); }
.foot h4, .foot .foot__title { margin: 0 0 12px; font-size: 13px; font-weight: 500; color: var(--text-3); }
.foot ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.foot li a { font-size: 14px; color: var(--text-2); }
.foot li a:hover { color: var(--text); }
.foot .foot__copy { margin-top: 18px; font-size: 12.5px; }
/* the ten solutions, each with its colour as a square: the key to the channels below */
.foot__sol { margin-top: 44px; }
.foot__sol .foot__title { margin: 0 0 14px; font-size: 13px; font-weight: 500; color: var(--text-3); }
.foot__sol ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 11px 32px; }
.foot__sol a { display: inline-flex; align-items: flex-start; gap: 10px; font-size: 14px; color: var(--text-2); }
.foot__sol a i { flex: none; width: 7px; height: 7px; margin-top: .45em; margin-top: calc((1lh - 7px) / 2); border-radius: 1.5px; background: var(--tone); }   /* level with the first line when a name wraps */
.foot__sol a:hover, .foot__sol a:focus-visible { color: var(--text); }
/* The footer band (chan.js, Dither, 2026-11-03): the ten solution colours as a dithered horizon, edge to edge and
   down to the foot of the page (Will: "much larger … bleed down to the bottom"); each colour's tenth of the width is a
   link that lifts it and shows its name */
.chan { position: relative; height: clamp(200px, 30vw, 440px); margin-top: 56px; }
.chan canvas { position: absolute; inset: 0; width: 100%; height: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
.chan__lanes { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); }
.chan__lane { position: relative; color: var(--tone); }
.chan__lane span { position: absolute; top: max(4px, calc(16% - 30px)); left: 50%; padding: 3px 9px; border-radius: 6px; background: rgb(0 0 0 / .8); box-shadow: 0 0 0 1px color-mix(in oklch, var(--tone) 45%, transparent); font-size: 12px; line-height: 1.25; white-space: nowrap; transform: translateX(-50%); opacity: 0; transition: opacity .18s; pointer-events: none; }
.chan__lane:first-child span { left: 12px; transform: none; }
.chan__lane:last-child span { left: auto; right: 12px; transform: none; }
.chan__lane:hover span, .chan__lane.on span { opacity: 1; }
@media (hover: none) { .chan__lane { pointer-events: none; } }   /* phones: the row above is the way in */
@media (max-width: 960px) { .foot__sol ul { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .foot__sol ul { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; } }

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .nav__links { display: none; }
  .nav__menu { display: inline-flex; }
  .nav__sheet { display: block; }
  .tour small { display: none; }
}
@media (max-width: 960px) {
  .final .frame { grid-template-columns: 1fr; }
  .hero__top { grid-template-columns: 1fr; }
  .story { grid-template-columns: 1fr; margin-top: 16px; }
  .sticky { display: none; }
  .step, .step:first-child { min-height: 0; padding: 44px 0 8px; cursor: default; align-content: start; }
  .step:not(.on) > :not(.step__dot) { opacity: 1; }
  .step__dot { background: var(--text); box-shadow: inset 0 0 0 1.5px var(--text), 0 0 0 6px var(--bg); }
  .steps::before { top: 56px; bottom: 60px; }
  .step__panel { display: block; margin-top: 22px; }
  .two { grid-template-columns: 1fr; }
  .g2 { grid-template-columns: 1fr; }
  .cover { grid-template-columns: 1fr; }
  .foot { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot > div:first-child { grid-column: 1 / -1; }
  .wp-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .wp-arrow { transform: rotate(135deg); }   /* pointing down to the answer */
  .wp-panel li { min-height: 0; }   /* stacked, the rows needn't line up across */
  .bx-crowd__stage { margin-top: 36px; }
  .bx-items { grid-template-columns: minmax(0, 1fr); }
  .pa-map { grid-template-columns: minmax(0, 1fr); max-width: 420px; padding-bottom: 0; }   /* the map stands up: the streams run down */
  .pa-link { padding: 14px 0; }
  .pa-line { width: 6px; height: 40px; -webkit-mask-image: none; mask-image: none; }
  .pa-link--free .pa-line { background: repeating-linear-gradient(180deg, oklch(.8 .115 6) 0 6px, transparent 6px 12px, oklch(.8 .115 178) 12px 18px, transparent 18px 24px, oklch(.8 .115 295) 24px 30px, transparent 30px 36px); }
  .pa-link--paid .pa-line { background: repeating-linear-gradient(180deg, var(--ok) 0 6px, transparent 6px 12px); }
  .pa-buy { position: static; height: auto; margin-top: 20px; border: 0; text-align: center; }
  .pa-buy span { position: static; padding: 0; transform: none; white-space: normal; }
  .pa-buy i { display: none; }
  .pa-rules { grid-template-columns: minmax(0, 1fr); margin-top: 36px; }
  .step__panel .win--mini { max-height: 420px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }   /* a glimpse of each state, not the whole screen */
}
@media (max-width: 760px) {
  .disclose { grid-template-columns: 1fr; }
  .tour { display: none; }   /* phones: the app window under the hero has its own tabs */
  .strip { grid-template-columns: 1fr 1fr; }
  .strip > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .strip > div:nth-child(n+3) { border-top: 1px solid var(--hair); }
}
@media (max-width: 560px) {
  .wrap { width: min(var(--max), 100% - 32px); }
  .sec { padding-top: 84px; }
  .pa-map { max-width: none; }
  .foot { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 14px; }   /* the three link columns side by side */
  .nav__right .signin { display: none; }
  .hero__ctas .btn { flex: 1; }
  .hero .lay__g:has(> [data-block="ctas"]), .hero [data-block="ctas"] { flex: 1 1 100%; }
  .hero .lay__r:has([data-block="ctas"]) { order: -1; }
  .stage { width: calc(100% - 16px); border-radius: 18px; }
  .stage .mesh i:nth-child(1) { left: -40%; top: 0; width: 80%; height: 45%; }
  .stage .mesh i:nth-child(2) { left: 50%; top: -20%; width: 90%; height: 45%; }
  .stage .mesh i:nth-child(3) { left: 5%; top: -25%; width: 70%; height: 35%; }
  .final .frame { width: min(var(--max), 100% - 32px); border-radius: 18px; }
  .final .mesh i:nth-child(1) { left: -45%; top: -30%; width: 120%; height: 90%; }
  .final .mesh i:nth-child(2) { left: 30%; top: -45%; width: 110%; height: 80%; }
  .final .mesh i:nth-child(3) { left: 0; top: 62%; width: 110%; height: 70%; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }