/* TapeVision — the site's one stylesheet.
   Tokens first, then base, layout, components, sections. No framework: a handful of pages. */

@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/fonts/inter-latin.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('/fonts/inter-latin-ext.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
    font-family: 'JetBrains Mono';
    font-style: normal;
    font-weight: 400 700;
    font-display: swap;
    src: url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
}

:root {
    /* The app's dark theme, so the site and the screenshots on it read as one product:
       neutral greys rather than navy, the app's own green and red, and its small corners.
       The page background is a step darker than the app's, so the halftone texture shows. */
    --bg: #0b0c0f;
    --bg-2: #0e0f13;
    --surface: #1a1b1e;
    --surface-2: #1f2124;
    --surface-3: #26292d;
    --line: rgba(255, 255, 255, 0.08);
    --line-2: rgba(255, 255, 255, 0.14);
    --text: #e2e8f0;
    --text-2: #b6c0cc;
    --muted: #8b95a5;
    --accent: #3b82f6;
    --accent-2: #7cb2ff;
    --accent-soft: rgba(59, 130, 246, 0.14);
    --up: #10b981;
    --up-2: #34d399;
    --down: #ef4444;
    --down-2: #f87171;
    --violet: #a78bfa;
    --amber: #f5a524;
    --radius-sm: 6px;
    --radius: 8px;
    --radius-lg: 12px;
    --shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8), 0 0 0 1px var(--line);
    /* A fine grain, mean-neutral under `overlay`, laid in the page background beneath the glows. A faint
       gradient on near-black has only a few distinct colour levels, so each level shows as a ring; the
       grain under it dithers them. It is not over the content, so screenshots and text stay clean. */
    --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='.45 0 0 0 .275  .45 0 0 0 .275  .45 0 0 0 .275  0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    /* Cards and captions are blue-black, not grey: the screenshots are a neutral grey (24, 24, 24), and the
       things around them must not read as more screenshot. A faint tint toward the top, a lit top edge,
       and a soft blue border; a caption strip under a picture is the darker blue-black. */
    --card-bg: linear-gradient(180deg, rgba(120, 150, 255, 0.075), rgba(120, 150, 255, 0.03));
    --card-edge: inset 0 1px 0 rgba(160, 185, 255, 0.14);
    --card-line: rgba(120, 150, 255, 0.2);
    --caption-bg: #0d1019;
    --wrap: 1200px;
    --font: 'Inter', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
    color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
    margin: 0;
    background: var(--bg) var(--grain); background-blend-mode: overlay;
    color: var(--text);
    font: 400 17px/1.6 var(--font);
    font-feature-settings: 'cv11', 'ss01', 'ss03';
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--accent-2); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3, h4 { margin: 0; line-height: 1.1; letter-spacing: -0.028em; font-weight: 650; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -48px; z-index: 100; background: var(--accent); color: #fff; padding: 8px 14px; border-radius: var(--radius-sm); }
.skip:focus { top: 12px; }
.mono { font-family: var(--mono); font-feature-settings: 'zero'; }
.up { color: var(--up-2); } .down { color: var(--down-2); }

.wrap { width: min(var(--wrap), 100% - 32px); margin-inline: auto; }
@media (min-width: 720px) { .wrap { width: min(var(--wrap), 100% - 64px); } }

/* ------------------------------------------------------------------ buttons & badges */

.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 14px 22px; border-radius: var(--radius); font-weight: 600; font-size: 16px; line-height: 1;
    border: 1px solid transparent; cursor: pointer; transition: transform .15s, background .15s, border-color .15s, box-shadow .2s;
    text-decoration: none !important; white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn-primary {
    background: linear-gradient(180deg, #4b8ff8, #2f6fe0); color: #fff;
    box-shadow: 0 10px 30px -10px rgba(59, 130, 246, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.22);
}
.btn-primary:hover { box-shadow: 0 14px 40px -10px rgba(59, 130, 246, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.btn-ghost { background: rgba(255, 255, 255, 0.03); color: var(--text); border-color: var(--line-2); }
.btn-ghost:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(148, 163, 184, 0.35); }
/* A link to another part of the site: the eyebrow blue as a soft tint with a blue edge, so the download buttons stay the loud ones. */
.btn-soft { background: var(--accent-soft); color: var(--accent-2); border-color: rgba(124, 178, 255, 0.5); }
.btn-soft:hover { background: rgba(59, 130, 246, 0.24); border-color: rgba(124, 178, 255, 0.75); }
.btn[href="/download"], .btn[href^="/download/"] {
    background: #20dba5; color: #061a17; border-color: transparent; box-shadow: 0 10px 32px rgba(32, 219, 165, 0.2);
}
.btn[href="/download"]:hover, .btn[href^="/download/"]:hover {
    background: #32e6b2; border-color: transparent; box-shadow: 0 14px 40px -10px rgba(32, 219, 165, 0.65);
}
.btn-small { padding: 10px 16px; font-size: 14px; border-radius: var(--radius); }
.btn .arrow { transition: transform .2s; }
.btn:hover .arrow { transform: translateX(3px); }

.badge {
    display: inline-flex; align-items: center; gap: 6px; font: 600 11px/1 var(--font); letter-spacing: 0.06em;
    text-transform: uppercase; padding: 5px 8px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2);
}
.badge-beta { color: #9cc3ff; border-color: rgba(59, 130, 246, 0.4); background: var(--accent-soft); }
.pill {
    display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 8px; border-radius: 999px;
    background: rgba(255, 255, 255, 0.04); border: 1px solid var(--line-2); color: var(--text-2); font-size: 14px;
}
.pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--up-2); box-shadow: 0 0 0 4px rgba(74, 222, 128, 0.16); animation: pulse 2.4s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0.05); } }

/* ------------------------------------------------------------------ header */

.site-header {
    position: sticky; top: 0; z-index: 50;
    background: rgba(11, 12, 15, 0.55); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px);
    border-bottom: 1px solid transparent; transition: border-color .3s, background .3s;
}
.site-header.scrolled { border-bottom-color: var(--line); background: rgba(11, 12, 15, 0.82); }
.header-row { position: relative; display: flex; align-items: center; gap: 28px; height: 68px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 680; font-size: 18px; letter-spacing: -0.02em; text-decoration: none !important; }
.site-nav { display: none; position: absolute; left: 50%; transform: translateX(-50%); gap: 26px; }
.site-nav a { color: var(--text-2); font-size: 15px; font-weight: 500; }
.site-nav a:hover, .site-nav a[aria-current] { color: var(--text); text-decoration: none; }
.header-cta { display: none; margin-left: auto; }
.nav-toggle { margin-left: auto; width: 42px; height: 42px; display: grid; place-content: center; gap: 5px; background: none; border: 1px solid var(--line-2); border-radius: var(--radius); cursor: pointer; }
.nav-toggle span:not(.sr-only) { display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; transition: transform .2s; }
.nav-toggle[aria-expanded="true"] span:nth-of-type(2) { transform: translateY(3.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-of-type(3) { transform: translateY(-3.5px) rotate(-45deg); }
.mobile-nav { display: grid; gap: 4px; padding: 8px 16px 20px; border-bottom: 1px solid var(--line); background: rgba(11, 12, 15, 0.96); }
.mobile-nav[hidden] { display: none; }
.mobile-nav a:not(.btn) { color: var(--text); padding: 12px 4px; font-size: 18px; border-bottom: 1px solid var(--line); }
.mobile-nav .btn { margin-top: 14px; }
@media (min-width: 1000px) {
    .site-nav, .header-cta { display: flex; }
    .nav-toggle, .mobile-nav { display: none !important; }
}

/* ------------------------------------------------------------------ hero */

.hero { position: relative; padding: clamp(42px, 4vw, 56px) 0 40px; isolation: isolate; }
.hero-grid-bg {
    position: absolute; inset: -68px 0 0; z-index: -1; pointer-events: none;
    background-image: radial-gradient(rgba(255, 255, 255, 0.22) 1px, transparent 1.4px);
    background-size: 26px 26px;
    mask-image: radial-gradient(60% 55% at 50% 20%, #000 10%, transparent 75%);
}
/* A halftone cloud surrounds the product image and fades into the page. */
.hero > .hero-grid-bg {
    inset: 70px 0 auto; height: min(1000px, 72vw); min-height: 540px;
    background: image-set(url('/img/hero-halftone-original.webp') 1x, url('/img/hero-halftone-4k.webp') 2x) center top / max(100%, 960px) auto no-repeat;
    mask-image: radial-gradient(ellipse 82% 72% at 50% 45%, #000 30%, transparent 100%),
        linear-gradient(to bottom, transparent, #000 12%, #000 72%, transparent 100%);
    mask-composite: intersect;
}
@media (min-width: 2000px) {
    .hero > .hero-grid-bg { background-image: url('/img/hero-halftone-4k.webp'); }
}
.hero-summary { width: min(100%, 1068px); margin: 30px auto 0; padding-top: 22px; border-top: 1px solid var(--line); text-align: center; }
.hero-summary-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 0; padding: 0; margin: 0; list-style: none; color: var(--text); font-size: 15px; font-weight: 600; }
.hero-summary-items li + li::before { content: '·'; color: var(--muted); padding: 0 18px; }
.hero-summary p { margin-top: 10px; color: var(--muted); font-size: 13px; }
.hero h1 { font-size: clamp(34px, 4vw, 58px); line-height: 1.08; letter-spacing: -0.045em; font-weight: 680; }
.hero h1.accent {
    background: linear-gradient(95deg, #2d9cff 0%, #21cbd0 54%, #37e7aa 100%);
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero-subtitle { margin: 14px auto 0; font-size: clamp(16px, 1.25vw, 19px); line-height: 1.5; color: var(--text-2); }
.hero-top .hero-actions { margin-top: 24px; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }
.hero .hero-actions { justify-content: center; }

/* The product shot sits above the feature summary. */
.stage { position: relative; width: min(100%, 1068px); margin: 36px auto 0; }
.stage::after {
    content: ''; position: absolute; left: 8%; right: 8%; bottom: -40px; height: 120px; z-index: -1;
    background: radial-gradient(50% 50% at 50% 50%, rgba(59, 130, 246, 0.22), transparent 70%); filter: blur(30px);
}
/* The gradient is the frame itself, so the image follows the same rounded corners. */
.window {
    position: relative; padding: 1px; border-radius: var(--radius); overflow: hidden;
    background: linear-gradient(115deg, #1b6398, #238db2, #48c9a5, #207f9d, #1b6398) 0% 50% / 300% 300%;
    box-shadow: 0 60px 120px -40px rgba(0, 0, 0, 0.9);
    animation: screenshot-rim 9s ease-in-out infinite alternate;
}
@keyframes screenshot-rim { to { background-position: 100% 50%; } }
.window img { display: block; width: 100%; border-radius: calc(var(--radius) - 1px); }

/* ------------------------------------------------------------------ the tape (ticker band) */

.tape {
    position: relative; margin-top: 64px; border-block: 1px solid var(--line); background: rgba(255, 255, 255, 0.015);
    overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tape-track { display: flex; width: max-content; animation: tape 60s linear infinite; }
.tape:hover .tape-track { animation-play-state: paused; }
.tape-item { display: inline-flex; align-items: baseline; gap: 10px; padding: 14px 26px; font: 500 14px/1 var(--mono); color: var(--text-2); border-right: 1px solid var(--line); white-space: nowrap; }
.tape-item b { color: var(--text); font-weight: 600; letter-spacing: 0.02em; }
@keyframes tape { to { transform: translateX(-50%); } }

/* ------------------------------------------------------------------ sections */

.section { padding: 110px 0; position: relative; }
.section-tight { padding: 70px 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 500 12.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-2); }
.eyebrow::before, .center .eyebrow::after { content: ''; width: 22px; height: 1px; background: currentColor; opacity: 0.7; }
.section-head { max-width: 760px; }
.section-head h2 { font-size: clamp(34px, 4.6vw, 56px); margin-top: 16px; }
.section-head p { margin-top: 20px; color: var(--text-2); font-size: 19px; }
.center { text-align: center; margin-inline: auto; }

/* Three pillars */
.pillars { display: grid; gap: 18px; margin-top: 56px; }
@media (min-width: 900px) { .pillars { grid-template-columns: repeat(3, 1fr); } }
.card {
    position: relative; padding: 24px 0 0; border-top: 1px solid var(--line-2);
}
.card h2, .card h3 { font-size: 22px; margin-top: 18px; }
.card p { margin-top: 10px; color: var(--text-2); font-size: 16px; }
.card .icon { width: 44px; height: 44px; border-radius: var(--radius); display: grid; place-content: center; background: var(--accent-soft); color: var(--accent-2); border: 1px solid rgba(59, 130, 246, 0.3); }
.card .icon svg { width: 22px; height: 22px; }

/* Feature rows: text beside a screenshot, alternating */
.feature { display: grid; gap: 40px; align-items: center; padding: 64px 0; }
@media (min-width: 980px) {
    .feature { grid-template-columns: 5fr 7fr; gap: 64px; }
    .feature.flip { grid-template-columns: 7fr 5fr; }
    .feature.flip .feature-copy { order: 2; }
}
.feature-copy h3 { font-size: clamp(28px, 3.4vw, 40px); margin-top: 14px; }
.feature-copy > p { margin-top: 18px; color: var(--text-2); font-size: 18px; }
.checks { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 12px; }
.checks li { position: relative; padding-left: 30px; color: var(--text-2); }
.checks li::before {
    content: ''; position: absolute; left: 0; top: 5px; width: 18px; height: 18px; border-radius: 6px;
    background: var(--accent-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237cb2ff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center/12px no-repeat;
    border: 1px solid rgba(59, 130, 246, 0.35);
}
.checks li b { color: var(--text); font-weight: 600; }
/* A screenshot has small corners, and its caption is a status line under it, in the mono font as in a terminal. */
.shot {
    position: relative; border-radius: var(--radius-sm); overflow: hidden; background: #181818; box-shadow: var(--shadow);
}
.shot img { width: 100%; }
.shot figcaption { padding: 9px 14px; font: 400 12.5px/1.55 var(--mono); color: var(--muted); border-top: 1px solid var(--card-line); background: var(--caption-bg); }

/* FAQ */
.faq { margin-top: 48px; display: grid; max-width: 860px; border-top: 1px solid var(--line-2); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; font-weight: 600; font-size: 18px; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ''; position: absolute; right: 4px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
.faq details > div { padding: 0 40px 22px 0; color: var(--text-2); }
.faq details > div p + p { margin-top: 12px; }
/* Wide screens: the heading stays in view on the left while the questions fill the right. */
@media (min-width: 1000px) {
    #faq .wrap { display: grid; grid-template-columns: 4fr 7fr; gap: 72px; align-items: start; }
    #faq .section-head { position: sticky; top: 110px; }
    #faq .faq { margin-top: 0; max-width: none; }
}

/* Closing invitation */
.cta-band {
    position: relative; isolation: isolate; overflow: hidden; padding: clamp(56px, 8vw, 100px) 24px;
    border-top: 1px solid var(--line); text-align: center;
}
.cta-band h2 { font-size: clamp(34px, 5vw, 60px); }
.cta-band p { margin: 18px auto 0; max-width: 620px; color: var(--text-2); font-size: 19px; }
.cta-band .hero-actions { justify-content: center; }
.cta-band::before {
    content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.36;
    background: image-set(url('/img/hero-halftone-original.webp') 1x, url('/img/hero-halftone-4k.webp') 2x) center 43% / max(100%, 900px) auto no-repeat;
    mask-image: radial-gradient(ellipse 70% 65% at 50% 50%, #000, transparent 100%);
}
@media (min-width: 2000px) { .cta-band::before { background-image: url('/img/hero-halftone-4k.webp'); } }
.cta-band > * { position: relative; }

/* ------------------------------------------------------------------ footer */

.site-footer { margin-top: 80px; border-top: 1px solid var(--line); padding: 56px 0 40px; }
.footer-grid { display: grid; gap: 40px; }
@media (min-width: 800px) { .footer-grid { grid-template-columns: 1.3fr 1fr; } }
.footer-brand p { margin-top: 14px; color: var(--muted); max-width: 420px; font-size: 15px; }
.footer-links { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.footer-links .footer-title { font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; font-weight: 600; }
.footer-links a { display: block; color: var(--text-2); padding: 5px 0; font-size: 15px; }
.footer-fine { margin-top: 44px; padding-top: 28px; border-top: 1px solid var(--line); display: grid; gap: 10px; color: var(--muted); font-size: 13px; }

/* ------------------------------------------------------------------ motion */

.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .js .reveal { opacity: 1; transform: none; transition: none; }
    .tape-track { animation: none; }
    .window { animation: none; }
    .pill .dot { animation: none; }
}

/* ------------------------------------------------------------------ home: feature rows, local, brokers, steps */

/* Down the home page a hairline marks where each section starts. */
.hero ~ .section + .section::after {
    content: ''; position: absolute; top: 0; left: 50%; width: min(var(--wrap), 100% - 64px); height: 1px; transform: translateX(-50%);
    background: linear-gradient(90deg, transparent, rgba(160, 185, 255, 0.25), transparent);
}

.features-home { padding-top: 40px; }
.trade-lead { display: grid; gap: 34px; align-items: center; }
.trade-lead-copy h2 { font-size: clamp(34px, 4.6vw, 56px); margin-top: 16px; }
.trade-lead-copy p { margin-top: 20px; max-width: 520px; color: var(--text-2); font-size: 18px; line-height: 1.6; }
.trade-lead .shot { width: min(100%, 500px); justify-self: center; }
.trade-capabilities { list-style: none; padding: 0; margin: 48px 0 64px; display: grid; gap: 26px 32px; }
.trade-capabilities li { padding-top: 18px; border-top: 1px solid var(--line-2); color: var(--text-2); line-height: 1.6; }
.trade-capabilities li b { color: var(--text); font-weight: 600; }
@media (min-width: 760px) { .trade-capabilities { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) {
    .trade-lead { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); gap: 80px; }
    .trade-capabilities { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.trade-capabilities + .feature { border-top: 1px solid var(--line); }
.features-home .feature + .feature { border-top: 1px solid var(--line); }

.local-grid { display: grid; gap: 56px; align-items: center; }
@media (min-width: 1020px) { .local-grid { grid-template-columns: 1fr 1.1fr; } }
.local-grid .checks { margin-top: 28px; }
.local-visual { position: relative; min-height: 460px; }
.local-visual .light-card { position: relative; margin-left: 70px; transform: rotate(1.5deg); }
/* A phone, framed: the bezel is padding, the caption hangs below it. */
.phone {
    position: relative; margin: 0; border-radius: 34px; padding: 9px; background: linear-gradient(145deg, #2a3140, #0d1117);
    box-shadow: 0 40px 80px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(148, 163, 184, 0.25);
}
.phone img { border-radius: 26px; }
.phone figcaption { position: absolute; left: 0; right: 0; top: calc(100% + 14px); font-size: 12px; color: var(--muted); text-align: center; }
.local-visual .phone { position: absolute; left: 0; bottom: -30px; z-index: 2; width: min(210px, 38%); transform: rotate(-4deg); }
.local-visual .phone figcaption { transform: rotate(4deg); }
@media (max-width: 600px) {
    .local-visual { min-height: 0; }
    .local-visual .light-card { margin-left: 0; transform: none; }
    .local-visual .phone { position: relative; width: 60%; margin: 28px auto 40px; transform: none; bottom: 0; }
    .local-visual .phone figcaption { transform: none; }
}

.brokers-band { padding: 56px 0; border-block: 1px solid var(--line); }
.brokers { list-style: none; padding: 0; margin: 26px 0 0; display: grid; gap: 24px 28px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }
.brokers li { display: grid; gap: 6px; align-content: start; padding: 16px 0 0; border-top: 1px solid var(--line-2); text-align: left; }
.brokers b { font-size: 19px; letter-spacing: -0.01em; }
.brokers span { color: var(--muted); font-size: 13px; }

.steps { list-style: none; padding: 0; margin: 48px 0 40px; display: grid; gap: 16px; counter-reset: step; }
@media (min-width: 860px) { .steps { grid-template-columns: repeat(4, 1fr); } }
.steps li { position: relative; padding: 22px 0 0; border-top: 1px solid var(--line-2); }
.steps h3 { font-size: 20px; margin-top: 16px; }
.steps p { margin-top: 8px; color: var(--text-2); font-size: 15.5px; }
.step-n {
    display: inline-grid; place-content: center; width: 36px; height: 36px; border-radius: var(--radius);
    font: 600 16px/1 var(--mono); color: var(--accent-2); background: var(--accent-soft); border: 1px solid rgba(59, 130, 246, 0.35);
}

/* ------------------------------------------------------------------ inner pages: hero */

.page-hero { position: relative; isolation: isolate; padding: 72px 0 36px; }
.page-hero .hero-grid-bg {
    inset: -68px 0 -80px; background: image-set(url('/img/hero-halftone-original.webp') 1x, url('/img/hero-halftone-4k.webp') 2x) center 32% / max(100%, 1000px) auto no-repeat;
    opacity: 0.38; mask-image: linear-gradient(to bottom, transparent, #000 35%, transparent 100%);
}
@media (min-width: 2000px) { .page-hero .hero-grid-bg { background-image: url('/img/hero-halftone-4k.webp'); } }
.page-hero h1 { font-size: clamp(40px, 6.2vw, 72px); line-height: 1.02; letter-spacing: -0.042em; margin-top: 18px; font-weight: 680; }
.page-hero .lede { margin-top: 22px; font-size: clamp(17px, 2vw, 20px); color: var(--text-2); max-width: 720px; }

.tag {
    display: inline-flex; align-items: center; font: 600 10.5px/1 var(--font); letter-spacing: 0.07em; text-transform: uppercase;
    padding: 4px 7px; border-radius: 999px; vertical-align: 2px; margin-left: 4px; border: 1px solid; white-space: nowrap;
}
.tag-beta { color: #c4b5fd; border-color: rgba(167, 139, 250, 0.4); background: rgba(167, 139, 250, 0.1); }
.tag-partial { color: #fcd34d; border-color: rgba(245, 165, 36, 0.4); background: rgba(245, 165, 36, 0.08); }
.tag-soon { color: #9cc3ff; border-color: rgba(59, 130, 246, 0.4); background: var(--accent-soft); }

/* ------------------------------------------------------------------ features: groups and points */

/* The content starts where every other page's does and lines up with the header, on every page.
   Below 860px the list collapses into a compact "Jump to" disclosure button. Between 860 and
   1699px it is a horizontally-scrolling pill strip sticky below the header. At 1700px and up the
   list moves into the left margin, outside the page column, so the content never shifts. */
.features-layout { width: min(var(--wrap), 100% - 32px); margin: 12px auto 0; }
@media (min-width: 720px) { .features-layout { width: min(var(--wrap), 100% - 64px); } }

/* Below 1700px: compact "Jump to [Section ▾]" dropdown replacing pill strip buttons */
.cats-picker {
    position: sticky; top: 68px; z-index: 20;
    display: flex; align-items: center; gap: 10px;
    padding: 10px 0;
    background: rgba(11, 12, 15, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}
.cats-picker-label {
    font-size: 13.5px; font-weight: 500; color: var(--muted);
    letter-spacing: -0.01em; white-space: nowrap; user-select: none;
}
.cats-picker-select-wrap {
    position: relative; display: inline-flex; align-items: center;
    min-width: 0; max-width: 100%;
}
.cats-picker-select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background: var(--surface); color: var(--text);
    font: 500 14px/1.4 var(--font);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 7px 34px 7px 12px;
    cursor: pointer;
    outline: none;
    min-width: 200px;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: border-color .15s, background .15s;
}
.cats-picker-select:hover {
    border-color: var(--line-2);
    background: var(--surface-2);
}
.cats-picker-select:focus-visible {
    border-color: var(--accent);
    outline: 2px solid var(--accent-2);
    outline-offset: 1px;
}
.cats-picker-select option {
    background: #15171b;
    color: var(--text);
    padding: 6px 10px;
}
.cats-picker-chevron {
    position: absolute; right: 10px; pointer-events: none;
    width: 14px; height: 14px; color: var(--text-2);
    background: currentColor;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M3 6l5 5 5-5'/%3E%3C/svg%3E") center/contain no-repeat;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='currentColor' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round' d='M3 6l5 5 5-5'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* Sidebar navigation for large screens (>=1700px) and fallback */
.cats {
    position: sticky; top: 68px; z-index: 20; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none;
    margin: 0; padding: 10px 0; background: rgba(11, 12, 15, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--line);
}
.cats::-webkit-scrollbar { display: none; }
.cats a {
    flex: none; padding: 7px 12px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface);
    color: var(--text-2); font-size: 14px; font-weight: 500; text-decoration: none; transition: color .15s, background .15s, border-color .15s;
}
.cats a:hover { color: var(--text); }
.cats a[aria-current="true"] { color: var(--text); border-color: rgba(59, 130, 246, 0.55); background: var(--accent-soft); }
.cats .cat-next { border-style: dashed; border-color: rgba(59, 130, 246, 0.35); }

/* Below 1700px: hide pill strip buttons when picker dropdown is active */
@media (max-width: 1699px) {
    .has-cats-picker .cats { display: none !important; }
}

/* At 1700px and up: hide the select dropdown and position .cats as the left sidebar */
@media (min-width: 1700px) {
    .cats-picker { display: none !important; }
    .features-layout { width: 100%; display: grid; grid-template-columns: 1fr min(var(--wrap), 100% - 64px) 1fr; margin-top: 24px; }
    .cats {
        grid-column: 1; align-self: start; justify-self: end; top: 92px; width: 184px; display: grid; gap: 2px;
        margin: 40px 32px 0 0; padding: 0; overflow: visible; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; border: 0;
    }
    .cats a { padding: 8px 12px; border: 0; background: none; font-size: 14.5px; }
    .cats a:hover { background: rgba(255, 255, 255, 0.03); }
    .cats a[aria-current="true"] { background: var(--accent-soft); }
    .cats .cat-next { margin-top: 10px; border: 1px dashed rgba(59, 130, 246, 0.3); }
    .groups { grid-column: 2; min-width: 0; }
}

.group { padding: 56px 0; scroll-margin-top: 128px; }
.group + .group { border-top: 1px solid var(--line); }
@media (min-width: 1700px) { .group { scroll-margin-top: 84px; } }
.group > header h2 { font-size: clamp(28px, 3.2vw, 40px); margin-top: 12px; }
.group > header p { margin-top: 14px; color: var(--text-2); font-size: 18px; max-width: 760px; }

/* A point: its picture, then what it does. A wide point takes the whole row, with its words beside
   the picture where there is room. */
.feats { --feats-gap: 20px; display: grid; gap: var(--feats-gap); margin-top: 30px; }
@media (min-width: 760px) { .feats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feat-wide { grid-column: 1 / -1; } }
.feat { display: flex; flex-direction: column; }
.feat-shot { margin: 0; aspect-ratio: 16 / 10; border-radius: var(--radius-sm); box-shadow: 0 0 0 1px var(--line); background: var(--bg-2); }
.feat-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; }
.feat-text { padding: 16px 0 20px; }
.feat h3 { font-size: 18px; font-weight: 620; letter-spacing: -0.012em; line-height: 1.3; }
.feat p { margin-top: 8px; color: var(--text-2); font-size: 15px; line-height: 1.55; }
@media (min-width: 1000px) {
    .feat-wide { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); }
    .feat-wide .feat-shot { border-bottom: 0; border-right: 1px solid var(--line); }
    .feat-wide .feat-text { align-self: center; padding: 28px 30px; }
    .feat-wide h3 { font-size: 23px; }
    .feat-wide p { font-size: 16px; }
}
@media (min-width: 760px) { .feat-full { grid-column: 1 / -1; } }
.feat-full .feat-shot { aspect-ratio: auto; }
.feat-full .feat-shot img { height: auto; object-fit: contain; }
/* The picture's column is as wide as one card of the grid above and below it, so its right edge lines up with theirs. */
@media (min-width: 760px) { .feat-tall { grid-column: 1 / -1; display: grid; grid-template-columns: calc((100% - var(--feats-gap)) / 2) minmax(0, 1fr); } }
.feat-tall .feat-shot { aspect-ratio: auto; }
.feat-tall .feat-shot img { height: auto; object-fit: contain; }
@media (min-width: 760px) {
    .feat-tall .feat-shot { border-bottom: 0; border-right: 1px solid var(--line); }
    .feat-tall .feat-text { align-self: center; padding: 28px 30px; }
    .feat-tall h3 { font-size: 23px; }
    .feat-tall p { font-size: 16px; }
    .feat-tall p + p { margin-top: 14px; }
}
.feat-full .feat-text { max-width: 860px; }
@media (min-width: 1000px) { .feat-full .feat-text { padding: 22px 26px 26px; } .feat-full h3 { font-size: 23px; } .feat-full p { font-size: 16px; } }
/* The zoom illustration in a point's frame, rather than in the home page's own card. */
.feat .zoom-demo { aspect-ratio: auto; display: flex; flex-direction: column; justify-content: center; gap: 10px; margin: 0; padding: 16px; border: 0; border-radius: 0; }
.feat .zoom-demo .zoom-canvas { height: clamp(200px, 22vw, 300px); }
@media (min-width: 1000px) { .feat-wide .zoom-demo { border-right: 1px solid var(--line); } }

.facts { list-style: none; margin: 30px 0 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 760px) { .facts { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.facts li { display: grid; gap: 6px; align-content: start; padding: 18px 0 0; border-top: 1px solid var(--line-2); }
.facts b { font-size: 16px; font-weight: 620; }
.facts span { color: var(--text-2); font-size: 14.5px; line-height: 1.55; }
.group .brokers { margin-top: 16px; }
.group .brokers .tag { margin-left: 2px; }

.coming { display: grid; gap: 32px; margin-top: 30px; align-items: start; }
.coming .phone { width: min(220px, 60%); margin: 0 auto 44px; }
@media (min-width: 900px) { .coming { grid-template-columns: 200px minmax(0, 1fr); } .coming .phone { width: 100%; } }
.next-list { list-style: none; margin: 0; padding: 0; border: 1px dashed rgba(59, 130, 246, 0.35); border-radius: var(--radius-lg); background: rgba(59, 130, 246, 0.03); }
.next-list li { position: relative; padding: 14px 16px 14px 42px; color: var(--text-2); font-size: 15px; line-height: 1.55; }
.next-list li + li { border-top: 1px dashed rgba(59, 130, 246, 0.2); }
.next-list li::before { content: '→'; position: absolute; left: 16px; top: 14px; color: var(--accent-2); font-family: var(--mono); }
.next-list b { color: var(--text); font-weight: 600; }
.next-scope { margin-top: 18px; color: var(--muted); font-size: 15px; }

/* ------------------------------------------------------------------ adaptive-trailing illustration */

figure { margin: 0; }
.hero-top { text-align: center; }
.ladder { display: none; }
.js .ladder { display: block; width: min(100%, 480px); }
.ladder {
    position: relative; padding: 0;
    border-top: 1px solid var(--line-2);
    --stop: #ff7a7f;
}
.ladder[data-state="even"] { --stop: #f5a524; }
.ladder[data-state="lock"] { --stop: #4ade80; }
.ladder-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; color: var(--muted); }
.ladder-head b { color: var(--text); font-weight: 650; font-size: 15px; margin-right: 8px; letter-spacing: -0.01em; }
.ladder-readout { font-size: 14px; font-weight: 600; color: var(--stop); transition: color .3s; }
.ladder svg { width: 100%; height: auto; margin-top: 12px; overflow: visible; transition: opacity .45s; }
.ladder .lvl line { stroke: rgba(148, 163, 184, 0.2); stroke-dasharray: 3 4; }
.ladder .lvl line.entry { stroke: rgba(148, 163, 184, 0.5); }
.ladder .lvl text { font: 500 10px var(--mono); fill: var(--muted); }
.ladder .lvl text.entry { fill: var(--text-2); }
.ladder .c-up { fill: var(--up); stroke: var(--up); }
.ladder .c-down { fill: var(--down); stroke: var(--down); }
.ladder .stop { fill: none; stroke: var(--stop); stroke-width: 1.8; transition: stroke .3s; filter: drop-shadow(0 0 4px color-mix(in srgb, var(--stop) 50%, transparent)); }
.ladder .stop-tag rect { fill: var(--stop); transition: fill .3s; }
.ladder .stop-tag text { font: 600 10.5px var(--mono); fill: var(--bg); }
.ladder .exit-dot { fill: var(--bg); stroke: var(--stop); stroke-width: 2; }
.ladder-events { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 7px; font-size: 13.5px; transition: opacity .45s; }
.ladder-events li { display: flex; align-items: center; gap: 10px; color: var(--muted); opacity: 0.5; transition: opacity .3s, color .3s; }
.ladder-events li.on { opacity: 1; color: var(--text); }
.ladder-events i {
    width: 16px; height: 16px; border-radius: 50%; border: 1.5px solid rgba(148, 163, 184, 0.45); flex: none; transition: background-color .3s, border-color .3s;
}
.ladder-events li.on i {
    border-color: var(--up); background: var(--up) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center/10px no-repeat;
}
.ladder-note { margin-top: 12px; font-size: 11.5px; color: var(--muted); opacity: 0.8; }
.ladder.fading svg, .ladder.fading .ladder-events { opacity: 0; }

/* ------------------------------------------------------------------ home: detail shots, the tour */

/* A fine edge separates screenshots from the page background. */
.feature .shot, .shot-detail {
    border-radius: var(--radius-sm);
    box-shadow: 0 0 0 1px var(--line-2);
}
.js .shot img, .js .window img { cursor: zoom-in; }

.tour { padding-top: 40px; }
.gallery { margin-top: 48px; }
/* Tabs: the tour's screens and the beta page's install steps. Without script there are no tabs and
   every panel shows. */
.tabs { display: none; }
.js .tabs {
    display: flex; gap: 6px; flex-wrap: wrap; width: max-content; max-width: 100%;
    padding: 5px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line);
}
.js .gallery .tabs { justify-content: center; margin: 0 auto 36px; }
.tabs button {
    appearance: none; border: 0; background: none; color: var(--text-2); font: 500 15px/1 var(--font); padding: 11px 18px; border-radius: var(--radius); cursor: pointer;
    transition: background .15s, color .15s;
}
.tabs button:hover { color: var(--text); background: rgba(255, 255, 255, 0.04); }
/* The chosen tab is the eyebrow blue as a soft tint with a blue edge, as the current name on a picture switcher is. */
.tabs button[aria-selected="true"] { color: var(--accent-2); background: var(--accent-soft); box-shadow: inset 0 0 0 1px rgba(124, 178, 255, 0.5); }
.gallery-panel + .gallery-panel { margin-top: 72px; }
.js .gallery-panel + .gallery-panel { margin-top: 0; }
.gallery-panel[hidden] { display: none; }
.gallery-copy { display: grid; gap: 20px 56px; margin-bottom: 32px; }
@media (min-width: 900px) { .gallery-copy { grid-template-columns: 1fr 1fr; align-items: start; } }
.gallery-copy h3 { font-size: clamp(26px, 3vw, 34px); }
.gallery-copy p { margin-top: 14px; color: var(--text-2); font-size: 17px; }
.gallery-copy .checks { margin-top: 4px; }
.js .gallery-panel:not([hidden]) { animation: panel-in .45s cubic-bezier(.2, .7, .2, 1); }
@keyframes panel-in { from { opacity: 0; transform: translateY(10px); } }
@media (prefers-reduced-motion: reduce) { .js .gallery-panel:not([hidden]) { animation: none; } }

/* ------------------------------------------------------------------ lightbox */

.lightbox {
    width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 24px; border: 0; background: rgba(3, 5, 8, 0.92);
    display: grid; place-items: center; cursor: zoom-out; color: var(--text);
}
.lightbox:not([open]) { display: none; }
.lightbox::backdrop { background: transparent; }
.lightbox figure { display: grid; gap: 12px; max-width: 100%; max-height: 100%; }
.lightbox img { max-width: min(100%, 2400px); max-height: calc(100dvh - 90px); width: auto; height: auto; border-radius: var(--radius); box-shadow: 0 0 0 1px var(--line-2), 0 40px 120px rgba(0, 0, 0, 0.8); }
.lightbox figcaption { text-align: center; color: var(--text-2); font-size: 14px; }
.lightbox figcaption b, .lightbox figcaption span { display: block; max-width: 90ch; margin: 0 auto; }
.lightbox figcaption b { color: var(--text); margin-bottom: 4px; }
.lightbox-close {
    position: fixed; top: 16px; right: 16px; width: 42px; height: 42px; border-radius: var(--radius); border: 1px solid var(--line-2);
    background: rgba(255, 255, 255, 0.06); color: var(--text); font-size: 22px; line-height: 1; cursor: pointer;
}
html:has(dialog[open]) { overflow: hidden; }

/* ------------------------------------------------------------------ beta */

.beta-hero { display: grid; gap: 40px; align-items: end; }
@media (min-width: 1000px) { .beta-hero { grid-template-columns: minmax(0, 1fr) 380px; } }
.page-hero .pill { margin-bottom: 6px; }
.page-hero h1 .accent { background: linear-gradient(95deg, #7cb2ff 0%, #b0d0ff 40%, #6ee7a8 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.beta-facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.beta-facts li { display: grid; gap: 4px; padding: 18px 18px 16px; border-radius: var(--radius-lg); background: rgba(255, 255, 255, 0.03); border: 1px solid var(--line); }
.beta-facts b { font-size: 19px; letter-spacing: -0.015em; font-weight: 650; }
.beta-facts span { color: var(--muted); font-size: 13.5px; }

.join {
    display: grid; gap: 36px; align-items: center; padding: clamp(28px, 5vw, 56px); border-radius: var(--radius-lg);
    background: radial-gradient(70% 120% at 0% 0%, rgba(59, 130, 246, 0.2), transparent 60%), var(--surface);
    border: 1px solid var(--line-2);
}
@media (min-width: 980px) { .join { grid-template-columns: 1.1fr 1fr; gap: 56px; } }
.join h2 { font-size: clamp(32px, 4.4vw, 50px); margin-top: 14px; }
.join-copy > p { margin-top: 16px; color: var(--text-2); font-size: 18px; max-width: 520px; }
.join .hero-actions { margin-top: 28px; }
.join-template { border-radius: var(--radius-lg); background: #0e0f10; border: 1px solid var(--line-2); overflow: hidden; }
.code-head { display: flex; justify-content: space-between; align-items: center; padding: 10px 12px 10px 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.join-template pre { margin: 0; padding: 18px 20px 22px; font: 400 14px/1.7 var(--mono); color: var(--text-2); white-space: pre-wrap; overflow-x: auto; }
.copy {
    appearance: none; border: 1px solid var(--line-2); background: rgba(255, 255, 255, 0.04); color: var(--text-2); border-radius: var(--radius-sm);
    font: 500 12.5px/1 var(--font); padding: 7px 10px; cursor: pointer; transition: background .15s, color .15s, border-color .15s;
}
.copy:hover { background: rgba(255, 255, 255, 0.08); color: var(--text); }
.copy.done, .btn.done { color: var(--up-2); border-color: rgba(74, 222, 128, 0.45); }
.gets { display: grid; gap: 16px; margin-top: 20px; }
@media (min-width: 900px) { .gets { grid-template-columns: repeat(3, 1fr); } }

.needs { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 900px) { .needs { grid-template-columns: repeat(3, 1fr); } }
.need { padding: 22px 0 0; border-top: 1px solid var(--line-2); }
.need h3 { font-size: 20px; }
.need p { margin-top: 10px; color: var(--text-2); font-size: 15.5px; }
.need b { color: var(--text); font-weight: 600; }

code { font: 500 0.9em var(--mono); background: rgba(148, 163, 184, 0.1); border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; color: var(--text); overflow-wrap: anywhere; }
.install-section { background: linear-gradient(180deg, transparent, rgba(59, 130, 246, 0.04) 40%, transparent); }
.os-tabs { margin-top: 40px; }
.os-panels { display: grid; gap: 20px; margin-top: 44px; }
.js .os-panels { margin-top: 18px; }
.os-panel[hidden] { display: none; }
.js .os-panel:not([hidden]) { animation: panel-in .45s cubic-bezier(.2, .7, .2, 1); }
@media (prefers-reduced-motion: reduce) { .js .os-panel:not([hidden]) { animation: none; } }
/* A panel spans the page, so its notes sit beside its steps rather than under them. */
@media (min-width: 980px) {
    .os-panel { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); column-gap: 56px; align-items: start; }
    .os-title { grid-column: 1 / -1; }
    .os-notes { margin-top: 26px; }
    .os-notes .aside:first-child { margin-top: 0; border-top: 0; }
    .os-notes .aside:first-child summary { padding-top: 0; }
}
.os-panel { padding: 26px 0 0; border-top: 1px solid var(--line-2); }
.os-title { display: flex; align-items: center; gap: 12px; font-size: 24px; }
.os-title svg { width: 26px; height: 26px; color: var(--accent-2); }
.os-here { margin-left: auto; font: 600 11px/1 var(--font); letter-spacing: 0.08em; text-transform: uppercase; color: var(--up-2); border: 1px solid rgba(74, 222, 128, 0.4); background: rgba(74, 222, 128, 0.08); padding: 5px 8px; border-radius: 999px; }
.install-steps { list-style: none; counter-reset: s; margin: 26px 0 0; padding: 0; display: grid; gap: 22px; }
.install-steps li { counter-increment: s; position: relative; padding-left: 46px; }
.install-steps li::before {
    content: counter(s); position: absolute; left: 0; top: -2px; width: 30px; height: 30px; border-radius: var(--radius-sm); display: grid; place-content: center;
    font: 600 14px/1 var(--mono); color: var(--accent-2); background: var(--accent-soft); border: 1px solid rgba(59, 130, 246, 0.35);
}
.install-steps li:not(:last-child)::after { content: ''; position: absolute; left: 15px; top: 34px; bottom: -18px; width: 1px; background: var(--line-2); }
.install-steps h4 { font-size: 17px; font-weight: 620; letter-spacing: -0.01em; }
.install-steps p { margin-top: 6px; color: var(--text-2); font-size: 15.5px; }
.install-steps b { color: var(--text); font-weight: 600; }
.code { position: relative; margin-top: 12px; border-radius: var(--radius); background: #0e0f10; border: 1px solid var(--line-2); }
.code pre { margin: 0; padding: 14px 16px; padding-right: 76px; overflow-x: auto; }
.code code { background: none; border: 0; padding: 0; font-size: 13.5px; color: #d6e2f0; white-space: pre; }
.code .copy { position: absolute; top: 8px; right: 8px; }
.aside { margin-top: 18px; border-top: 1px solid var(--line); }
.aside summary { cursor: pointer; padding: 16px 0 4px; color: var(--text-2); font-weight: 550; font-size: 15px; list-style: none; display: flex; align-items: center; gap: 10px; }
.aside summary::-webkit-details-marker { display: none; }
.aside summary::before { content: '+'; display: grid; place-content: center; width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--line-2); font: 500 14px/1 var(--mono); color: var(--muted); }
.aside[open] summary::before { content: '−'; }
.aside > div { padding: 8px 0 4px; color: var(--text-2); font-size: 15px; }

.timeline { list-style: none; margin: 44px 0 0; padding: 0; display: grid; gap: 14px; }
@media (min-width: 900px) { .timeline { grid-template-columns: repeat(2, 1fr); } }
.timeline li { display: flex; gap: 18px; padding: 22px 0 0; border-top: 1px solid var(--line-2); }
.timeline h3 { font-size: 19px; margin-top: 4px; }
.timeline p { margin-top: 8px; color: var(--text-2); font-size: 15.5px; }
.timeline .step-n { flex: none; }

.limits-section { background: var(--bg-2); border-block: 1px solid var(--line); }
.limits-grid { display: grid; gap: 40px; }
@media (min-width: 980px) { .limits-grid { grid-template-columns: 0.9fr 1.1fr; gap: 64px; } }
.limits { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.limits li { position: relative; padding: 16px 0 16px 34px; border-top: 1px solid var(--line-2); color: var(--text-2); font-size: 15.5px; }
.limits li::before {
    content: '!'; position: absolute; left: 0; top: 16px; width: 20px; height: 20px; border-radius: 50%; display: grid; place-content: center;
    font: 700 12px/1 var(--mono); color: var(--bg); background: var(--amber);
}
.limits b { color: var(--text); font-weight: 600; }

.data-grid { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 900px) { .data-grid { grid-template-columns: repeat(3, 1fr); } }
.data-grid .card h3 { margin-top: 0; }

/* ------------------------------------------------------------------ 404 */

.halt { padding: 110px 0 60px; min-height: 60vh; }
.halt-badge {
    display: inline-flex; align-items: center; gap: 10px; padding: 7px 14px 7px 10px; border-radius: 999px; font: 600 13px/1 var(--mono); letter-spacing: 0.06em;
    text-transform: uppercase; color: #fcd34d; border: 1px solid rgba(245, 165, 36, 0.4); background: rgba(245, 165, 36, 0.08);
}
.halt-badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.halt-chart { width: min(600px, 100%); margin-top: 36px; }
.halt-candles .u { fill: var(--up); } .halt-candles .d { fill: var(--down); }
.halt-line { stroke: var(--amber); stroke-width: 2; stroke-dasharray: 2 7; stroke-linecap: round; opacity: 0.8; }
.halt .hero-actions { margin-top: 30px; }
/* Grid items default to min-width: auto, so one long command line would widen the page on a phone;
   the code block scrolls sideways inside its own box instead. */
.os-panel, .join > *, .install-steps li, .gallery-panel, .feature > * { min-width: 0; }
@media (max-width: 600px) {
    .local-visual .phone { margin-bottom: 72px; }
    /* The bar is the width of the screen, so its buttons share it: each takes an equal part of what is free, with its
       words in the middle. Past that width (more tabs than fit) the bar scrolls, from the first tab. */
    .js .tabs, .js .gallery .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; justify-content: flex-start; width: 100%; }
    .tabs::-webkit-scrollbar { display: none; }
    .tabs button { flex: 1 0 auto; font-size: 14px; padding: 10px 12px; text-align: center; }
}
/* The copy button sits beside the code, never over it: a long command scrolls inside its own box. */
.code { display: flex; align-items: center; }
.code pre { flex: 1; min-width: 0; padding-right: 16px; }
.code .copy { position: static; flex: none; margin: 0 8px 0 0; }
.code-head b { color: var(--text-2); font-weight: 600; }

/* ------------------------------------------------------------------ home: the exits, the desks, who it is for */


/* The desks are screens of a 1440p monitor: they get more width than the text column. */
.wrap-wide { width: min(1440px, 100% - 32px); margin-inline: auto; }
@media (min-width: 720px) { .wrap-wide { width: min(1440px, 100% - 64px); } }
.desks .gallery { margin-top: 40px; }

.exits { padding-top: 90px; }
.exits-intro { max-width: 1000px; }
.exits-intro h2 { font-size: clamp(34px, 4.6vw, 56px); margin-top: 16px; }
.exits-intro p { max-width: 820px; margin-top: 20px; color: var(--text-2); font-size: 18px; line-height: 1.6; }
.exits-examples { display: grid; gap: 52px; align-items: start; margin-top: 46px; }
.exits-chart, .adaptive-example { min-width: 0; }
.exits-details { margin-top: 24px; gap: 14px; }
.adaptive-example { display: grid; gap: 22px; align-content: start; }
.adaptive-example .ladder { padding-top: 16px; }
.adaptive-example-copy { border-top: 1px solid var(--line); padding-top: 20px; }
.adaptive-example-copy h3 { font-size: clamp(24px, 2.3vw, 30px); }
.adaptive-example-copy p { margin-top: 12px; color: var(--text-2); font-size: 16px; line-height: 1.6; }
@media (min-width: 1000px) {
    .exits-examples:has(.adaptive-example) { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 56px; }
}
.exits-grid { display: grid; gap: 20px; margin-top: 8px; align-items: start; }
@media (min-width: 1000px) { .exits-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); } }

.gap h3 { font-size: 22px; letter-spacing: -0.02em; }

.gap { padding: 22px 0 0; border-top: 1px solid var(--line-2); }
.table-scroll { margin-top: 18px; overflow-x: auto; }
.gap-table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14.5px; }
.gap-table th, .gap-table td { text-align: left; vertical-align: top; padding: 12px 12px 12px 0; border-bottom: 1px solid var(--line); }
.gap-table thead th { font: 600 11.5px/1.2 var(--font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); padding-top: 0; }
.gap-table tbody th { color: var(--text); font-weight: 620; white-space: nowrap; }
.gap-table td { color: var(--text-2); }
.gap-table td:nth-child(2) { color: var(--text); }
.gap-table tbody tr:last-child th, .gap-table tbody tr:last-child td { border-bottom: 0; }
.gap-note { margin-top: 14px; color: var(--muted); font-size: 13px; }

.fit-grid { display: grid; gap: 20px; margin-top: 40px; }
@media (min-width: 900px) { .fit-grid { grid-template-columns: 1fr 1fr; } }
.fit-col { padding: 22px 0 0; border-top: 1px solid var(--line-2); }
.fit-col h3 { font-size: 22px; }
.fit-col .checks { margin-top: 20px; }
.fit-not { border-top-color: rgba(245, 165, 36, 0.45); }
@media (min-width: 900px) { .fit-grid-3 { grid-template-columns: repeat(3, 1fr); } }
.fit-col p { margin-top: 12px; color: var(--text-2); font-size: 15.5px; }

.stop-box { margin-top: 30px; padding: 20px 0 0; border-top: 1px solid var(--line-2); }
.stop-box h3 { font-size: 18px; }
.stop-box p { margin-top: 10px; color: var(--text-2); font-size: 15.5px; }

/* A label that has to sit beside the figures it qualifies, on the image itself. */
.shot-label {
    position: absolute; top: 12px; right: 12px; z-index: 2; padding: 7px 11px; border-radius: 999px;
    font: 600 12px/1 var(--font); letter-spacing: 0.02em; color: var(--bg); background: var(--amber);
    box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.8);
}
.exits-grid > *, .fit-grid > * { min-width: 0; }

/* ------------------------------------------------------------------ beta: privacy, security; feedback */

@media (min-width: 900px) { .data-grid-4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 1100px) { .data-grid-5 { grid-template-columns: repeat(3, 1fr); } } }
.data-grid .card p { font-size: 15px; }
.report-band {
    display: grid; gap: 16px 40px; align-items: center; padding: 28px 0 0; border-top: 1px solid var(--line-2);
}
@media (min-width: 900px) { .report-band { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; } }
.report-band h2 { font-size: clamp(26px, 3vw, 34px); margin-top: 12px; }
.report-band p { color: var(--text-2); font-size: 17px; }
@media (max-width: 899px) { .report-band .btn { justify-self: start; } }

.ways { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 900px) { .ways { grid-template-columns: repeat(3, 1fr); } }
.ways .card h2, .ways .card h3 { margin-top: 0; }
.ways .card p + p { margin-top: 10px; }


/* ------------------------------------------------------------------ download */

.page-download .page-hero .pill { margin-bottom: 6px; }
.dl-grid { display: grid; gap: 16px; margin-top: 34px; }
@media (min-width: 900px) { .dl-grid { grid-template-columns: repeat(3, 1fr); } }
.dl-card {
    display: grid; gap: 12px; align-content: start; padding: 22px 0 0; border-top: 1px solid var(--line-2);
}
.dl-card.here { border-top-color: var(--up-2); }
.dl-title { display: flex; align-items: center; gap: 12px; font-size: 24px; }
.dl-title svg { width: 26px; height: 26px; color: var(--accent-2); flex: none; }
.dl-need { color: var(--text-2); font-size: 15px; }
.dl-button { width: 100%; margin-top: 4px; }
.dl-file { color: var(--muted); font-size: 13.5px; }
.dl-after { margin-top: 22px; max-width: 760px; color: var(--muted); font-size: 14.5px; }
.timeline { counter-reset: step; }
.timeline li { counter-increment: step; }
.timeline .step-n:empty::before { content: counter(step); }

/* ------------------------------------------------------------------ charts: tiles */

.jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 30px; }
.jump a {
    padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--text-2); font-size: 14px; font-weight: 500;
    background: rgba(255, 255, 255, 0.02); text-decoration: none !important; transition: color .15s, border-color .15s, background .15s;
}
.jump a:hover { color: var(--text); border-color: rgba(59, 130, 246, 0.5); background: var(--accent-soft); }
.tiles { display: grid; gap: 18px; margin-top: 34px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); }
.tiles-wide { grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); }
.tiles-head { margin-top: 40px; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.tiles-head + .tiles { margin-top: 16px; }
.tile { display: flex; flex-direction: column; }
.tile figcaption { flex: 1; display: grid; align-content: start; gap: 5px; padding: 14px 16px 16px; }
.tile figcaption b { color: var(--text); font-size: 15.5px; font-weight: 620; letter-spacing: -0.01em; }
.tile figcaption span { color: var(--text-2); font-size: 14px; line-height: 1.5; }
.section-tight + .section-tight { padding-top: 20px; }
.page-charts .section-head h2 { font-size: clamp(30px, 3.8vw, 44px); }
/* A menu or a card is shown near its own size, not stretched to the column. */
.shot-menu { width: 100%; max-width: 440px; justify-self: center; }
.cta-band h2 .accent { background: linear-gradient(95deg, #2d9cff 0%, #21cbd0 54%, #37e7aa 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.footer-brand .footer-tagline { margin-top: 12px; color: var(--text-2); font-weight: 600; letter-spacing: -0.01em; }
.footer-brand .footer-tagline + p { margin-top: 8px; }

/* ------------------------------------------------------------------ charts on the home page */

/* The zoom illustration (js/zoomdemo.js): a chart whose candle size follows the slider. It is a picture of the
   app's chart, so it takes the colours of the Midnight palette the screenshots are shot in (the app's
   frontend/src/theme/schemes.ts): its page, and its rising and falling. The script reads --up and --down
   from the canvas, so they apply here only. */
.zoom-demo {
    --up: #14d896; --down: #f0443f;
    margin: 0; padding: 16px 16px 14px; border-radius: var(--radius-lg); border: 1px solid var(--line);
    background: #0c1116; display: grid; gap: 12px;
}
.zoom-demo-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.zoom-chip {
    font-size: 13px; font-weight: 600; color: var(--text); padding: 4px 10px; border-radius: 999px;
    border: 1px solid rgba(59, 130, 246, 0.5); background: rgba(59, 130, 246, 0.12);
}
.zoom-span { color: var(--muted); font-size: 13.5px; }
.zoom-canvas { display: block; width: 100%; height: clamp(220px, 28vw, 320px); }
.zoom-slider { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 13px; }
.zoom-slider input { flex: 1; accent-color: var(--accent); }
.zoom-demo figcaption { color: var(--muted); font-size: 13px; line-height: 1.5; }

.tiles-3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
.more-link { margin-top: 22px; text-align: center; }
.more-link a { color: var(--accent-2, var(--accent)); font-weight: 560; }

/* ------------------------------------------------------------------ charts page: themes */

/* Each theme: its words, one picture with its name and what it shows, and the names that swap the
   picture (src/js/switch.js): a list beside it on wide screens, an even grid under it on narrow ones.
   The layout screenshots and the single charts share a 16:9 frame, so the page does not jump when a
   name is picked. */
.story-head { max-width: 780px; }
.story-head h2 { font-size: clamp(28px, 3.4vw, 40px); margin-top: 12px; }
.story-head p { margin-top: 14px; color: var(--text-2); font-size: 17px; }
.story-view { margin-top: 26px; }
.story-shot { margin: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--caption-bg); box-shadow: none; }
.story-shot img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top left; background: var(--bg-2); }
.story-shot figcaption { display: grid; gap: 3px; padding: 10px 14px; border-top: 1px solid var(--card-line); background: none; font-size: inherit; color: inherit; }
.story-shot figcaption b { font: 600 12.5px/1.5 var(--mono); letter-spacing: 0; color: var(--text); }
.story-shot figcaption span { color: var(--muted); font: 400 12.5px/1.55 var(--mono); max-width: 820px; }
/* Stacked, invisible copies of every caption of a group (src/js/switch.js): the caption keeps the height of the tallest. */
.switch-sizer { grid-column: 1; display: grid; visibility: hidden; pointer-events: none; }
.switch-sizer > * { grid-area: 1 / 1; }
.story-shot figcaption [data-switch-title] { grid-area: 1 / 1; }
.story-shot figcaption [data-switch-text] { grid-area: 2 / 1; }
.chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-top: 14px; }
.chips a {
    display: flex; align-items: center; justify-content: center; text-align: center; min-height: 46px; padding: 9px 14px; line-height: 1.25;
    border-radius: var(--radius); border: 1px solid var(--line-2); background: var(--card-bg);
    color: var(--text-2); font-size: 14px; text-decoration: none; transition: color .15s, border-color .15s, background .15s;
}
.chips a:hover, .chips a[data-pending] { color: var(--text); border-color: rgba(124, 178, 255, 0.4); }
.chips a[aria-current="true"] { color: var(--accent-2); border-color: rgba(124, 178, 255, 0.5); background: var(--accent-soft); }
.chips-head { margin: 22px 0 0; font: 600 11px/1 var(--font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.chips-head + .chips { margin-top: 10px; }
/* Wide screens: the names are a list beside the picture, however many there are and however long. A
   group with headings (the Workspace palettes) keeps them in the list, above their names. */
@media (min-width: 1100px) {
    .story-view { display: grid; grid-template-columns: minmax(0, 1fr) 280px; column-gap: 24px; align-items: start; }
    .story-shot { grid-column: 1; grid-row: 1 / span 4; }
    .story-view > .chips, .story-view > .chips-head { grid-column: 2; }
    .story-view > .chips-head:first-of-type { margin-top: 0; }
    .chips { display: flex; flex-direction: column; gap: 2px; margin-top: 0; }
    .chips a {
        justify-content: flex-start; text-align: left; min-height: 0; padding: 10px 14px; text-wrap: balance;
        border: 0; border-left: 2px solid transparent; border-radius: 0 var(--radius) var(--radius) 0; background: none;
    }
    .chips a:hover { background: rgba(255, 255, 255, 0.04); }
    .chips a[aria-current="true"] { color: var(--accent-2); border-left-color: var(--accent-2); background: var(--accent-soft); }
}

/* The Charts page's sections come in two shapes. A split one puts the heading, the intro and the names in a
   column beside the picture, on alternating sides (story-flip puts the picture on the left); a wide one keeps
   the heading above a picture the width of the page, with the names in rows under it. Under 1100px every
   section is the heading, the picture, then the names. */
/* The heading is inside the view here, so the gap to the picture is the picture's own margin. */
.story-split .story-view { margin-top: 0; }
.story-split .story-shot { margin-top: 26px; }
@media (min-width: 1100px) {
    .story-split .story-shot { margin-top: 0; }
    .story-split .story-view { display: grid; grid-template-columns: 330px minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: 40px; align-items: start; margin-top: 0; }
    .story-split .story-head { grid-column: 1; grid-row: 1; max-width: none; }
    .story-split .story-head h2 { font-size: clamp(26px, 2.4vw, 32px); }
    .story-split .story-head p { font-size: 15.5px; }
    .story-split .story-shot { grid-column: 2; grid-row: 1 / span 2; }
    .story-split .story-view > .chips { grid-column: 1; grid-row: 2; margin-top: 22px; }
    .story-split.story-flip .story-view { grid-template-columns: minmax(0, 1fr) 330px; }
    .story-split.story-flip .story-head, .story-split.story-flip .story-view > .chips { grid-column: 2; }
    .story-split.story-flip .story-shot { grid-column: 1; }

    .story-wide .story-view { display: block; }
    .story-wide .chips { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 14px; }
    .story-wide .chips a {
        justify-content: center; text-align: center; min-height: 46px; padding: 9px 14px;
        border: 1px solid var(--line-2); border-radius: var(--radius); background: var(--card-bg);
    }
    .story-wide .chips a:hover { color: var(--text); border-color: rgba(124, 178, 255, 0.4); background: var(--card-bg); }
    .story-wide .chips a[aria-current="true"] { color: var(--accent-2); border-color: rgba(124, 178, 255, 0.5); background: var(--accent-soft); }
}

/* The chart types: a mosaic of thumbnails, the first twice the size, each opening at full size with its words. */
.thumbs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 26px; }
.thumb { margin: 0; display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--caption-bg); box-shadow: none; transition: border-color .15s; }
.thumb:hover { border-color: rgba(124, 178, 255, 0.4); }
.thumb img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; object-position: top left; background: var(--bg-2); }
.thumb figcaption { padding: 8px 12px; border-top: 1px solid var(--card-line); background: none; font: 600 12.5px/1.4 var(--mono); letter-spacing: 0; color: var(--text); }
.thumb figcaption b { font: inherit; }
.thumb figcaption span { display: none; }
.thumb-lead { grid-column: 1 / -1; }
@media (min-width: 760px) {
    .thumbs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .thumb-lead { grid-column: span 2; grid-row: span 2; }
    .thumb-lead img { flex: 1; min-height: 0; height: 100%; aspect-ratio: auto; }
}

/* The beta terms (generated page): running text, read top to bottom. */
.terms { max-width: 720px; }
.terms h2 { font-size: 1.15rem; margin: 32px 0 8px; }
.terms h2:first-child { margin-top: 0; }
.terms p { margin: 0 0 10px; color: var(--text-2); line-height: 1.6; }