/* The approved first-screen composition. */
.stage{position:relative;overflow-x:clip;max-width:100%;background:linear-gradient(180deg,var(--accent-wash) 0%,var(--bg) 640px)}
.halo{position:absolute;inset:-200px -6% auto auto;width:min(640px,54vw);max-width:100%;aspect-ratio:1;border-radius:var(--r-round);background:radial-gradient(closest-side,var(--lime-glow),var(--clear));pointer-events:none;z-index:0;animation:breathe 10s ease-in-out infinite alternate}
@keyframes breathe{from{transform:scale(1);opacity:.7}to{transform:scale(1.08);opacity:1}}
.hero{position:relative;z-index:1;padding-top:20px;padding-bottom:0}
.hero-copy{position:relative;z-index:2;text-align:center}
.tag{display:inline-flex;align-items:center;gap:8px;min-height:28px;max-width:100%;padding:3px 12px;border:1px solid var(--accent-line);border-radius:var(--r-pill);background:var(--hi);font-size:13px;font-weight:var(--weight-semibold);color:var(--accent-dark)}
.tag i{width:6px;height:6px;flex-shrink:0;border-radius:var(--r-round);background:var(--accent);box-shadow:0 0 0 3px var(--accent-14)}
.hero h1{margin:16px 0 14px;font-family:var(--font-display);font-weight:var(--weight-black);font-size:var(--title-display);line-height:1.1;letter-spacing:-.02em;color:var(--ink)}
.hl{color:var(--accent-dark);padding:0 .06em;border-radius:var(--r-mini);background:linear-gradient(180deg,var(--clear) 56%,var(--lime-soft) 56%,var(--lime-soft) 94%,var(--clear) 94%)}
.lede{max-width:760px;margin:0 auto;font-size:var(--text-lede);line-height:1.55;color:var(--muted)}
.lede strong{color:var(--ink);font-weight:var(--weight-bold)}
.facts{display:flex;justify-content:center;flex-wrap:wrap;gap:8px;list-style:none;margin:14px 0 0;padding:0}
.facts li{display:inline-flex;align-items:center;gap:6px;min-height:28px;max-width:100%;padding:3px 12px;border-radius:var(--r-pill);background:var(--panel);border:1px solid var(--line);font-size:13px;color:var(--muted)}
.facts svg{width:13px;height:13px;color:var(--accent)}
.band{margin-top:22px}
.band-title{display:flex;align-items:center;justify-content:center;gap:12px;margin:0;font-size:12px;letter-spacing:.08em;color:var(--muted-2)}
.band-title::before,.band-title::after{content:"";width:40px;height:1px;flex-shrink:0;background:var(--line)}
.band-row{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:8px 28px;list-style:none;margin:8px 0 0;padding:0;font-size:13px;color:var(--muted)}
.band-row li{display:inline-flex;align-items:center;gap:7px;min-height:22px}
.band-row svg.pf{width:17px;height:17px;flex:none}
.flag{display:inline-block;flex:none;width:21px;height:14px;border-radius:var(--r-flag);overflow:hidden;box-shadow:0 0 0 1px var(--line)}
.flag svg{display:block;width:100%;height:100%}
.flag--sq{width:14px;height:14px}
.f-red{fill:var(--flag-red)}
.f-blue{fill:var(--flag-blue)}
.f-navy{fill:var(--flag-navy)}
.f-white{fill:var(--flag-white)}
.s-white{fill:none;stroke:var(--flag-white)}
.s-red{fill:none;stroke:var(--flag-red)}
.rail{position:relative;margin-top:24px;--gap:20px;--n:3;--card-w:calc((100% - 3 * var(--gap)) / 3.5);--card-h:352px}
.track{display:flex;gap:var(--gap);overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scroll-behavior:smooth;scroll-padding-left:22px;margin:-22px 0 0 -22px;padding:22px 0 24px 22px;scrollbar-width:none}
.track::-webkit-scrollbar{display:none}
.track::after{content:"";flex:0 0 calc(var(--card-w) / 2 + 8px)}
.scene{position:relative;flex:0 0 var(--card-w);min-width:0;scroll-snap-align:start;scroll-margin-top:100vh}
.scene-card{height:var(--card-h);display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-card);background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-card)}
.scene-visual{position:relative;isolation:isolate;flex:none;height:63%;padding:16px;display:flex;align-items:stretch;gap:8px;--glass:var(--glass-light);--glass-edge:var(--glass-light-line);--veil:var(--veil-light)}
.scene-visual::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 90% at 12% 0%,var(--hi-soft),var(--clear) 60%)}
.scene-visual::after{content:"";position:absolute;inset:0 auto 0 0;width:34%;z-index:-1;background:var(--veil)}
.v1{background:linear-gradient(150deg,var(--c1a),var(--c1b));--glass:var(--glass-dark);--glass-edge:var(--glass-dark-line);--veil:var(--veil-deep)}
.v2{background:linear-gradient(150deg,var(--c2a),var(--c2b))}
.v3{background:linear-gradient(150deg,var(--c3a),var(--c3b))}
.v4{background:linear-gradient(150deg,var(--c4a),var(--c4b))}
.glass{flex:1;min-width:0;padding:6px;border-radius:var(--r-glass);background:var(--glass);border:1px solid var(--glass-edge);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.pane{height:100%;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--r-window);background:var(--panel);border:1px solid var(--pane-line);box-shadow:inset 0 1px 0 var(--hi),var(--shadow-pane)}
.chrome{flex:none;display:flex;align-items:center;gap:5px;min-height:26px;padding:0 10px;background:var(--panel-2);border-bottom:1px solid var(--line);font-size:11px;color:var(--muted)}
.chrome i{width:7px;height:7px;flex-shrink:0;border-radius:var(--r-round)}
.d-r{background:var(--err)}
.d-y{background:var(--warn)}
.d-g{background:var(--ok)}
.chrome b{margin-left:6px;font-weight:var(--weight-semibold);color:var(--ink)}
.chrome svg{width:14px;height:14px;margin-left:auto;color:var(--accent)}
.pane-body{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;padding:8px 12px 10px;font-size:12px;line-height:1.45;color:var(--muted)}
.acts{margin-top:auto;display:flex;align-items:center;gap:12px}
.mini-go{display:inline-flex;align-items:center;justify-content:center;min-height:24px;padding:0 10px;border:0;border-radius:var(--r-mini);background:var(--accent);color:var(--panel);font-size:12px;font-weight:var(--weight-bold);text-decoration:none}
.mini-txt{display:inline-flex;align-items:center;min-height:24px;font-size:12px;color:var(--muted-2)}
.tabs{display:flex;gap:14px;padding-bottom:5px;border-bottom:1px solid var(--line)}
.tabs span{position:relative}
.tabs .on{color:var(--ink);font-weight:var(--weight-bold)}
.tabs .on::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:var(--r-hair);background:var(--accent)}
.route{padding-left:9px;border-left:2px solid var(--accent)}
.route b{display:block;color:var(--ink);font-weight:var(--weight-bold)}
.route em{font-style:normal;font-weight:var(--weight-bold);color:var(--accent-dark)}
.quality{position:relative;height:34px;flex:none}
.q-label{position:absolute;top:0;transform:translateX(-50%);font-family:var(--font-mono);font-size:10px;color:var(--muted)}
.q-label.on{color:var(--accent-dark);font-weight:var(--weight-bold)}
.q-low{left:28%}
.q-high{left:84%}
.q-bar{position:absolute;left:0;right:0;bottom:7px;height:4px;border-radius:var(--r-hair);background:var(--panel-2)}
.q-fill{position:absolute;left:0;top:0;bottom:0;width:84%;border-radius:var(--r-hair);background:linear-gradient(90deg,var(--accent-14),var(--accent))}
.q-tick{position:absolute;bottom:4px;width:2px;height:10px;margin-left:-1px;border-radius:var(--r-hair);background:var(--line-dark)}
.q-knob{position:absolute;bottom:2px;left:84%;width:14px;height:14px;margin-left:-7px;border-radius:var(--r-round);background:var(--panel);border:3px solid var(--accent);box-shadow:0 3px 8px -2px var(--accent-line)}
.q-head{display:flex;justify-content:space-between;align-items:center;color:var(--ink);font-weight:var(--weight-bold)}
.q-head span{font-weight:var(--weight-medium);color:var(--muted-2);font-size:11px}
.lines{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.lines li{display:flex;align-items:center;gap:7px;min-height:24px;padding:0 6px;border-radius:var(--r-mini)}
.lines .flag{width:18px;height:12px}
.lines .flag--sq{width:12px;height:12px}
.lines .nm{color:var(--ink);font-weight:var(--weight-semibold);white-space:nowrap}
.chip{display:inline-block;max-width:100%;overflow:hidden;overflow-wrap:anywhere;padding:1px 7px;border-radius:var(--r-pill);background:var(--panel-2);font-size:10px;color:var(--muted)}
.lines .chip{margin-left:auto;flex-shrink:0}
.lines .on{background:var(--accent-08)}
.lines .on .chip{background:var(--accent);color:var(--panel)}
.iconbar{flex:none;align-self:center;display:flex;flex-direction:column;align-items:center;gap:8px;width:34px;padding:8px 0;border-radius:var(--r-pane);background:var(--panel);border:1px solid var(--glass-light-line);box-shadow:var(--shadow-pane);color:var(--accent-dark)}
.iconbar span{display:grid;place-items:center;width:24px;height:24px;border-radius:var(--r-round)}
.iconbar span.on{box-shadow:0 0 0 1.5px var(--accent);background:var(--accent-08)}
.iconbar svg{width:15px;height:15px}
.devices{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:1px}
.devices li{display:flex;align-items:center;gap:7px;min-height:18px;color:var(--ink);white-space:nowrap}
.devices svg{width:12px;height:12px;flex:none;color:var(--muted)}
.dot{width:6px;height:6px;flex:none;border-radius:var(--r-round)}
.dot.ok{background:var(--ok)}
.dot.ac{background:var(--accent)}
.dot.wn{background:var(--warn)}
.cap{align-self:flex-start;margin-top:auto;padding:2px 10px;border-radius:var(--r-pill);background:var(--accent-08);border:1px solid var(--accent-line);font-size:11px;font-weight:var(--weight-bold);color:var(--accent-dark)}
.scene-copy{flex:1;padding:18px 20px}
.scene-copy h3{margin:0 0 6px;font-family:var(--font-display);font-size:18px;font-weight:var(--weight-heavy);letter-spacing:-.01em;color:var(--ink)}
.scene-copy p{margin:0;font-size:14px;line-height:1.5;color:var(--muted)}
.float-pill{position:absolute;z-index:3;top:-14px;left:-14px;display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px 0 6px;border-radius:var(--r-pill);background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-float);font-size:13px;font-weight:var(--weight-bold);color:var(--ink);transform:rotate(-4deg)}
.float-pill span{display:grid;place-items:center;width:22px;height:22px;border-radius:var(--r-round);background:var(--accent-08);color:var(--accent)}
.float-pill svg{width:14px;height:14px}
.float-globe{position:absolute;z-index:3;top:-18px;right:-14px;display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-round);background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow-float);color:var(--accent)}
.float-globe::before{content:"";position:absolute;inset:5px;border-radius:var(--r-round);background:radial-gradient(circle at 35% 30%,var(--accent-08),var(--clear) 70%);border:1px dashed var(--accent-line)}
.float-globe svg{position:relative;width:24px;height:24px}
.rail-next{position:absolute;z-index:4;left:calc(var(--card-w) * var(--n) + var(--gap) * var(--n) - 24px);top:calc(var(--card-h) * .315 - 24px);display:grid;place-items:center;width:48px;height:48px;border-radius:var(--r-round);background:var(--panel);border:1px solid var(--line-dark);color:var(--ink);box-shadow:var(--shadow-float);text-decoration:none;transition:border-color var(--ease-fast),color var(--ease-fast)}
.rail-next:hover{color:var(--accent-dark);border-color:var(--accent-dark)}
.rail-next svg{width:20px;height:20px}
.next{position:relative;background:var(--panel);border-top:1px solid var(--line);padding-top:48px;padding-bottom:72px}
.next h2{margin:0;font-family:var(--font-display);font-size:var(--title-section);font-weight:var(--weight-heavy);line-height:1.2;letter-spacing:-.02em}

/* Shared controls and reading navigation. */
.tab-set{min-width:0}
.tab-list,[role="tablist"]{display:flex;align-items:center;gap:8px;max-width:100%;overflow-x:auto;padding:6px;border:1px solid var(--line);border-radius:var(--r-pane);background:var(--panel-2);scrollbar-width:thin}
[role="tab"]{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-height:44px;padding:10px 18px;border:1px solid var(--clear);border-radius:var(--r-btn);background:var(--clear);color:var(--muted);white-space:nowrap;font-size:var(--text-sm);font-weight:var(--weight-semibold)}
[role="tab"][aria-selected="true"]{background:var(--panel);border-color:var(--accent-line);color:var(--accent-dark);box-shadow:var(--shadow-card)}
[role="tabpanel"]{min-width:0;margin-top:var(--space-3)}
.toc-tabs{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:8px;overflow-x:auto;max-width:100%;padding:12px 8px;border:1px solid var(--line);border-radius:var(--r-pane);background:var(--panel);box-shadow:var(--shadow-card);scrollbar-width:thin}
.toc-tabs a{display:inline-flex;align-items:center;justify-content:center;min-height:40px;flex-shrink:0;padding:8px 14px;border-radius:var(--r-btn);color:var(--muted);font-size:var(--text-sm);text-decoration:none;white-space:nowrap}
.toc-tabs a.is-current{background:var(--accent-dark);color:var(--panel);font-weight:var(--weight-bold)}
.toc-tabs.toc-static{position:static}
body:has(.toc-tabs) section[id]{scroll-margin-top:var(--toc-offset)}
.faq-list{display:grid;gap:12px}
.faq-item{background:var(--panel);border:1px solid var(--line);border-radius:var(--r-pane);box-shadow:var(--shadow-card)}
.faq-item summary{position:relative;min-height:56px;padding:16px 52px 16px 20px;list-style:none;font-weight:var(--weight-semibold);cursor:pointer}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";position:absolute;right:20px;top:16px;width:24px;height:24px;display:grid;place-items:center;color:var(--accent-dark)}
.faq-item[open] summary::after{content:"−"}
.faq-answer{padding:0 20px 20px;color:var(--muted);line-height:1.8}
.faq-answer p{margin:0}

/* A browser-like feature area, with an overlapping explanation. */
.feature-browser{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:64px;align-items:start}
.feature-index h2{margin-top:0}
.feature-index>p{color:var(--muted)}
.feature-tabs[role="tablist"]{display:flex;flex-direction:column;align-items:stretch;gap:0;padding:0;border:0;border-radius:0;background:var(--clear);overflow:visible}
.feature-tabs [role="tab"]{position:relative;justify-content:space-between;width:100%;padding:14px 16px;border:0;border-left:3px solid var(--clear);border-radius:0;background:var(--clear);box-shadow:none;text-align:left;white-space:normal}
.feature-tabs [role="tab"]::after{content:"→";color:var(--clear)}
.feature-tabs [aria-selected="true"]{border-left-color:var(--accent);background:var(--accent-08);color:var(--accent-dark)}
.feature-tabs [aria-selected="true"]::after{color:var(--accent)}
.feature-stage{position:relative;padding-bottom:48px}
.feature-window{min-height:300px;padding-bottom:40px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--panel);box-shadow:var(--shadow-soft);overflow:hidden}
.feature-window .chrome{min-height:40px}
.feature-content{padding:var(--space-4);display:grid;gap:16px;color:var(--muted)}
.feature-content .lines{font-size:var(--text-sm)}
.feature-note{position:relative;width:100%;margin-top:-48px;margin-left:-15%;padding:24px 24px 24px 36px;border:2px solid var(--accent);border-radius:var(--r-card);background:var(--panel);box-shadow:var(--shadow-soft)}
.feature-note::before{content:"";position:absolute;left:18px;top:24px;bottom:24px;width:4px;border-radius:var(--r-hair);background:var(--accent)}
.feature-note h3{margin:0 0 12px;font-size:18px;color:var(--accent-dark)}
.feature-note p{margin:0 0 16px;color:var(--muted);line-height:1.8}

/* Pricing, tables, platforms and editorial cards. */
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3);align-items:stretch}
.plan-card{position:relative;min-width:0;display:flex;flex-direction:column;gap:16px;padding:32px 24px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--panel);box-shadow:var(--shadow-card)}
.plan-card.is-current{border:2px solid var(--accent);padding:31px 23px;background:linear-gradient(180deg,var(--accent-08),var(--panel) 45%);box-shadow:var(--shadow-soft)}
.plan-card h3{margin:0}
.plan-badge{position:absolute;top:-14px;right:20px;display:inline-flex;align-items:center;min-height:28px;max-width:calc(100% - 40px);padding:3px 12px;border:1px solid var(--accent-line);border-radius:var(--r-pill);background:var(--lime-soft);color:var(--accent-dark);font-size:13px;font-weight:var(--weight-bold)}
.plan-price{margin:0;font-family:var(--font-display);font-size:40px;line-height:1.2;font-weight:var(--weight-heavy);font-variant-numeric:tabular-nums;color:var(--ink)}
.plan-price small{font-family:var(--font-body);font-size:var(--text-sm);font-weight:var(--weight-normal);color:var(--muted)}
.plan-facts{padding-left:20px;margin:0;color:var(--muted);line-height:1.9}
.plan-card .btn{align-self:flex-start;margin-top:auto}
.table-scroll{max-width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:var(--r-pane);background:var(--panel)}
.data-table,.line-table{width:100%;min-width:640px;border-collapse:collapse;font-size:var(--text-sm);text-align:left}
.data-table caption,.line-table caption{padding:16px;text-align:left;font-weight:var(--weight-bold);color:var(--ink)}
.data-table th,.data-table td,.line-table th,.line-table td{padding:14px 18px;border-bottom:1px solid var(--line);word-break:keep-all}
.table-scroll th,.data-table th,.line-table th{white-space:nowrap;background:var(--panel-2);color:var(--ink);font-weight:var(--weight-bold)}
.data-table td:first-child,.line-table td:first-child{color:var(--ink);font-weight:var(--weight-semibold)}
.data-table tbody tr:last-child td,.line-table tbody tr:last-child td{border-bottom:0}
.line-table .region-row th{background:var(--accent-08);color:var(--accent-dark)}
.prose>.data-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%;min-width:0}
.platform-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.platform-card{display:flex;flex-direction:column;align-items:flex-start;gap:16px;min-width:0;padding:24px 20px;border:1px solid var(--line);border-radius:var(--r-card);background:var(--panel);box-shadow:var(--shadow-card)}
.platform-card>svg{width:32px;height:32px;color:var(--accent-dark)}
.platform-card h3{margin:0;font-size:18px}
.platform-card .btn{margin-top:auto;white-space:normal}
.article-card{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:var(--r-card);background:var(--panel);overflow:hidden;box-shadow:var(--shadow-card)}
.article-art{display:flex;align-items:center;gap:16px;min-height:120px;padding:24px;background:linear-gradient(135deg,var(--panel-2),var(--c3b));color:var(--accent-dark)}
.article-art svg{width:40px;height:40px}
.article-body{padding:24px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;flex:1}
.article-body h3{margin:0;font-size:20px}
.article-body h3 a{text-decoration:none}
.article-body h3 a:hover{color:var(--accent-dark)}
.article-body p{margin:0;color:var(--muted)}
.article-meta{display:flex;align-items:center;flex-wrap:wrap;gap:12px;font-size:var(--text-xs);color:var(--muted)}
.article-hero{position:relative;overflow-x:clip;padding:48px;background:var(--panel-2);border-radius:var(--r-card)}
.article-hero::after{content:"Q";position:absolute;right:32px;top:24px;display:grid;place-items:center;width:64px;height:64px;border:3px double var(--accent);border-radius:var(--r-round);transform:rotate(-10deg);font:var(--weight-heavy) 28px var(--font-display);color:var(--accent)}
.article-hero h1{max-width:calc(100% - 96px);font-size:40px}
.badge{display:inline-flex;align-items:center;gap:6px;min-height:28px;max-width:100%;overflow:hidden;padding:3px 10px;border:1px solid var(--accent-line);border-radius:var(--r-pill);color:var(--accent-dark);background:var(--accent-08);font-size:var(--text-xs);font-weight:var(--weight-semibold);overflow-wrap:anywhere}
.callout{margin:24px 0;padding:20px 24px;border-left:4px solid var(--accent);border-radius:var(--r-btn);background:var(--accent-08);color:var(--accent-dark);line-height:1.8}
.callout p{margin:0}
.promo-block{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px;padding:32px;border:1px solid var(--accent-line);border-radius:var(--r-card);background:linear-gradient(120deg,var(--panel-2),var(--c3b));box-shadow:var(--shadow-soft)}
.promo-block h3{margin:0 0 8px}
.promo-block p{margin:0;color:var(--muted)}
.promo-block .btn{flex-shrink:0;white-space:nowrap}
.cta-band{padding:32px;border-radius:var(--r-card);background:var(--accent-dark);color:var(--panel);display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:24px}
.cta-band h2{font-size:26px;color:var(--panel);margin:0 0 8px}
.cta-band p{margin:0}
.cta-band .btn-main{background:var(--panel);color:var(--accent-dark)}
.float-cta{position:fixed;right:24px;bottom:calc(20px + env(safe-area-inset-bottom,0px));z-index:30;display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:10px 18px;border-radius:var(--r-btn);background:var(--accent-dark);color:var(--panel);font-size:14px;font-weight:var(--weight-bold);text-decoration:none;box-shadow:var(--shadow-cta);transition:background var(--ease-fast)}
.float-cta:hover{background:var(--accent)}
.float-cta svg{width:16px;height:16px}
body:has(.float-cta)::after{content:"";display:block;height:calc(88px + env(safe-area-inset-bottom,0px))}

/* Static design reference utilities. */
.preview-section{padding-top:48px;padding-bottom:48px;border-top:1px solid var(--line)}
.preview-section>h2{margin-top:0}
.preview-row{display:flex;align-items:center;flex-wrap:wrap;gap:16px}
.swatch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px}
.swatch{min-width:0;padding:8px;border:1px solid var(--line);border-radius:var(--r-pane);background:var(--panel)}
.swatch i{display:block;height:56px;border:1px solid var(--line);border-radius:var(--r-btn);margin-bottom:8px}
.swatch code{font-size:11px}
.sw-bg{background:var(--bg)}
.sw-panel{background:var(--panel)}
.sw-panel2{background:var(--panel-2)}
.sw-line{background:var(--line)}
.sw-line-dark{background:var(--line-dark)}
.sw-accent{background:var(--accent)}
.sw-deep{background:var(--accent-deep)}
.sw-dark{background:var(--accent-dark)}
.sw-ink{background:var(--ink)}
.sw-muted{background:var(--muted)}
.sw-muted2{background:var(--muted-2)}
.sw-ok{background:var(--ok)}
.sw-warn{background:var(--warn)}
.sw-err{background:var(--err)}
.sw-lime{background:var(--lime-soft)}
.sw-glow{background:var(--lime-glow)}
.sw-wash{background:var(--accent-wash)}
.sw-a08{background:var(--accent-08)}
.sw-a14{background:var(--accent-14)}
.sw-aline{background:var(--accent-line)}
.sw-pline{background:var(--pane-line)}
.sw-hi{background:var(--hi)}
.sw-hisoft{background:var(--hi-soft)}
.sw-c1a{background:var(--c1a)}
.sw-c1b{background:var(--c1b)}
.sw-c2a{background:var(--c2a)}
.sw-c2b{background:var(--c2b)}
.sw-c3a{background:var(--c3a)}
.sw-c3b{background:var(--c3b)}
.sw-c4a{background:var(--c4a)}
.sw-c4b{background:var(--c4b)}
.sw-vdeep{background:var(--veil-deep)}
.sw-vlight{background:var(--veil-light)}
.sw-gdark{background:var(--glass-dark)}
.sw-gdarkline{background:var(--glass-dark-line)}
.sw-glight{background:var(--glass-light)}
.sw-glightline{background:var(--glass-light-line)}
.sw-red{background:var(--flag-red)}
.sw-blue{background:var(--flag-blue)}
.sw-navy{background:var(--flag-navy)}
.sw-white{background:var(--flag-white)}
.sw-clear{background:var(--clear)}
.sw-menu{background:var(--menu-shade)}
.type-display{font:var(--weight-black) 64px/1.1 var(--font-display);letter-spacing:-.02em;margin:16px 0}
@media(max-width:1180px){
  .rail{--n:2;--card-w:calc((100% - 2 * var(--gap)) / 2.5)}
}
@media(max-width:980px){
  .feature-browser{gap:32px}
  .platform-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:768px){
  .hero h1{font-size:36px;margin:14px 0 12px}
  .lede{font-size:16px}
  .band-row{gap:6px 16px}
  .rail{--card-w:84%;--card-h:420px}
  .track{display:grid;grid-template-columns:minmax(0,1fr);margin:0;padding:0 0 20px;scroll-padding-left:0}
  .track::after{content:none}
  .scene-visual{padding-top:52px}
  .float-pill{top:12px;left:12px;transform:none}
  .float-globe{top:8px;right:8px;width:36px;height:36px}
  .float-globe svg{width:18px;height:18px}
  .rail-next{display:none}
  .float-cta{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px))}
  .feature-browser{grid-template-columns:minmax(0,1fr);gap:24px}
  .feature-tabs[role="tablist"]{flex-direction:row;overflow-x:auto;gap:8px}
  .feature-tabs [role="tab"]{width:auto;border:1px solid var(--line);border-radius:var(--r-pill);white-space:nowrap;padding:10px 16px}
  .feature-tabs [role="tab"]::after{display:none}
  .feature-tabs [aria-selected="true"]{border-color:var(--accent)}
  .feature-stage{padding-bottom:0}
  .feature-note{margin:16px 0 0;width:100%}
  .feature-window{padding-bottom:0}
  .feature-content{padding:24px}
  .plan-grid{grid-template-columns:minmax(0,1fr);gap:32px}
  .platform-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .promo-block{padding:24px}
  .type-display{font-size:36px}
  .article-hero{padding:24px}
  .article-hero h1{font-size:32px;max-width:100%;padding-top:64px}
  .article-hero::after{right:24px;top:16px;width:48px;height:48px}
}
@media(max-width:640px){
  .float-pill{transform:none}
  .halo{max-width:100%}
}
@media(max-width:360px){
  .platform-grid{grid-template-columns:minmax(0,1fr)}
  .scene-visual{padding-inline:10px}
  .pane-body{padding-inline:8px}
  .tabs{gap:8px;font-size:10px}
  .lines .nm{font-size:11px}
  .lines .chip{font-size:9px;padding-inline:4px}
}
@media(prefers-reduced-motion:reduce){
  .halo{animation:none}
  .track{scroll-behavior:auto}
}