/* The hero preserves the approved device stack and sibling order. */
.hero { position:relative; isolation:isolate; overflow-x:clip; max-width:100%; min-height:calc(100svh - 112px); display:flex; align-items:center; padding-block:48px; background:linear-gradient(180deg,var(--bg-top) 0%,var(--bg) 55%,var(--bg-bottom) 100%) }
.hero::before { content:""; position:absolute; inset:0; z-index:-1; background-image:linear-gradient(var(--grid-ink) 1px,var(--clear) 1px),linear-gradient(90deg,var(--grid-ink) 1px,var(--clear) 1px); background-size:32px 32px; background-position:-1px -1px }
.hero-grid { width:100%; display:grid; grid-template-columns:46fr 54fr; gap:24px; align-items:center }
.copy { position:relative; z-index:3 }
.badge { display:inline-flex; align-items:center; gap:10px; min-height:32px; max-width:100%; padding:4px 14px 4px 12px; border:1px solid var(--border); border-radius:var(--r-pill); background:var(--panel); color:var(--muted); font-size:13.5px; font-weight:500; box-shadow:var(--shadow-card); overflow-wrap:anywhere }
.badge-dot { width:8px; height:8px; flex-shrink:0; border-radius:var(--r-circle); background:var(--success); box-shadow:0 0 0 3px var(--success-12) }
.hero h1 { margin-top:28px; font-family:var(--font-display); font-weight:800; font-size:clamp(52px,4.6vw,66px); line-height:1.12; letter-spacing:-.02em; color:var(--text) }
.h1-line { display:block }
.key { position:relative; display:inline-block }
.key-line { position:absolute; left:-3%; bottom:-.12em; width:106%; height:.26em; color:var(--accent); overflow:visible; pointer-events:none }
.key-line path { fill:none; stroke:currentColor; stroke-linecap:round; vector-effect:non-scaling-stroke }
.key-line .kl-1 { stroke-width:5 }
.key-line .kl-2 { stroke-width:2.2; opacity:.65 }
.lead { margin-top:28px; max-width:30em; font-size:20px; line-height:1.6; color:var(--muted) }
.lead strong { color:var(--text); font-weight:600 }
.trust { margin-top:24px; display:flex; flex-wrap:wrap; align-items:center; row-gap:8px; font-size:14px; color:var(--text) }
.trust li { display:flex; align-items:center; gap:6px }
.trust li+li::before { content:""; width:3px; height:3px; flex-shrink:0; margin:0 12px; border-radius:var(--r-circle); background:var(--faint) }
.trust svg { width:15px; height:15px; flex:none; color:var(--muted) }
.trust svg path,.trust svg rect,.trust svg circle { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.platforms { margin-top:32px; display:inline-flex; align-items:center; max-width:100%; padding:5px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--panel); box-shadow:var(--shadow-card) }
.platforms li { display:flex; align-items:center; gap:7px; height:34px; padding:0 12px; font-size:14px; font-weight:500; color:var(--text) }
.platforms li+li { box-shadow:inset 1px 0 0 var(--border) }
.platforms svg { display:block; width:18px; height:18px; flex:none }
.routes { margin-top:20px; display:flex; align-items:center; gap:16px }
.routes-label { flex:none; padding:3px 8px; border-radius:var(--r-xs); background:var(--panel-2); font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; color:var(--muted) }
.routes ul { display:flex; flex-wrap:wrap; gap:8px 16px }
.routes li { display:flex; align-items:center; gap:7px; font-size:14px; color:var(--text) }
.flag { display:block; width:22px; height:16px; flex:none; overflow:hidden; border-radius:var(--r-xs) }
.fl-w { fill:var(--flag-white) }
.fl-r { fill:var(--flag-red) }
.fl-b { fill:var(--flag-blue) }
.fl-edge { fill:none; stroke:var(--flag-edge); stroke-width:1 }
.doodle { position:absolute; color:var(--doodle); opacity:.72; pointer-events:none }
.doodle svg { display:block; width:100%; height:100% }
.doodle path { fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round }
.d-hash { left:-86px; top:-4px; width:34px; height:34px; transform:rotate(-8deg) }
.d-slash { left:300px; top:-2px; width:28px; height:28px; transform:rotate(6deg) }
.d-tilde { left:-90px; top:150px; width:38px; height:30px; transform:rotate(-4deg) }
.d-arrow { left:372px; top:248px; width:34px; height:34px }
.d-brace { left:-74px; top:318px; width:30px; height:38px; transform:rotate(5deg) }
.d-at { left:-90px; top:462px; width:38px; height:38px; transform:rotate(-10deg) }
.d-tilde2 { left:508px; top:536px; width:32px; height:24px; transform:rotate(8deg) }
.stage { position:relative; z-index:1; height:640px; min-width:0 }
.stage::before { content:""; position:absolute; right:-10%; top:-8%; width:80%; height:74%; background:radial-gradient(closest-side,var(--accent-08) 0%,var(--accent-05) 48%,var(--clear) 100%); pointer-events:none }
.rig-wrap { position:absolute; inset:0; display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,1fr); place-items:center; perspective:2200px; animation:rig-rise .45s ease-out both }
.rig { --s:1; position:relative; width:560px; height:460px; transform:scale(var(--s)) rotateX(14deg) }
.kbd { position:absolute; z-index:1; left:170px; top:286px; width:390px; height:166px; padding:10px 12px 12px; display:flex; flex-direction:column; gap:4px; border-radius:var(--r-kbd); background:linear-gradient(165deg,var(--alu-hi) 0%,var(--alu-mid) 62%,var(--alu-lo) 100%); box-shadow:0 5px 0 -1px var(--alu-lo),0 34px 56px -20px var(--accent-14),0 22px 30px -20px var(--ink-30),inset 0 1px 0 var(--panel) }
.krow { display:flex; gap:4px; flex:1 1 0; min-height:0 }
.krow.fn { flex:0 0 13px }
.k { flex:1 1 0; min-width:0; display:flex; align-items:center; justify-content:center; border-radius:var(--r-xs); background:linear-gradient(180deg,var(--key-top) 0%,var(--key-top) 34%,var(--key-bottom) 100%); box-shadow:0 1.5px 0 var(--key-edge),0 2px 3px -1px var(--ink-14),inset 0 -1px 0 var(--ink-08); font-family:var(--font-mono); font-size:7px; line-height:1; color:var(--muted) }
.k.w15 { flex-grow:1.5 }
.k.w18 { flex-grow:1.8 }
.k.w22 { flex-grow:2.25 }
.k.w12 { flex-grow:1.25 }
.k.sp { flex-grow:5.6 }
.k.connect { font-family:var(--font-body); font-size:9px; font-weight:700; letter-spacing:.3em; color:var(--text) }
.ipad { position:absolute; z-index:2; left:118px; top:10px; width:442px; height:312px; padding:11px; border-radius:var(--r-tab); background:linear-gradient(150deg,var(--device-ink-2) 0%,var(--device-ink) 46%,var(--device-ink) 100%); box-shadow:0 0 0 1.5px var(--device-rim),inset 0 0 0 1px var(--sheen-soft),var(--shadow-lift) }
.ipad::after { content:""; position:absolute; inset:0; z-index:5; border-radius:inherit; pointer-events:none; background:linear-gradient(122deg,var(--white-0) 24%,var(--sheen) 31%,var(--white-0) 39%),linear-gradient(122deg,var(--white-0) 44%,var(--sheen-soft) 48%,var(--white-0) 54%); opacity:.6 }
.ipad-cam { position:absolute; top:4px; left:50%; width:3px; height:3px; margin-left:-1.5px; border-radius:var(--r-circle); background:var(--device-rim) }
.ipad-screen { position:relative; width:100%; height:100%; display:flex; flex-direction:column; overflow:hidden; border-radius:var(--r-tab-screen); background:var(--panel) }
.ipad-screen::after { content:""; position:absolute; inset:0; z-index:4; pointer-events:none; background:linear-gradient(150deg,var(--ink-04) 0%,var(--white-0) 34%) }
.os-bar { flex:none; height:18px; display:flex; align-items:center; justify-content:space-between; padding:0 12px; background:var(--panel-soft); font-family:var(--font-mono); font-size:8px; color:var(--text) }
.bat { display:block; width:14px; height:7px }
.bat-shell { fill:none; stroke:currentColor; stroke-width:1 }
.bat-fill { fill:currentColor }
.app { flex:1; min-height:0; display:grid; grid-template-columns:104px 1fr 118px }
.side { display:flex; flex-direction:column; padding:10px 6px 8px; border-right:1px solid var(--border); background:var(--panel-soft) }
.lbl { font-family:var(--font-mono); font-size:7.5px; letter-spacing:.08em; color:var(--muted) }
.side .lbl { padding:0 6px 6px }
.folder { position:relative; display:flex; align-items:center; gap:6px; height:24px; padding:0 6px 0 8px; border-radius:var(--r-folder); font-size:10px; color:var(--text) }
.folder svg { display:block; width:13px; height:11px; flex:none }
.fz-1 { fill:var(--gray-1) }
.fz-2 { fill:var(--gray-2) }
.fz-3 { fill:var(--gray-3) }
.fz-4 { fill:var(--gray-4) }
.fz-5 { fill:var(--gray-5) }
.fz-tab { fill:var(--panel); opacity:.45 }
.folder.on { background:var(--accent-08); font-weight:600 }
.folder.on::before { content:""; position:absolute; left:0; top:5px; bottom:5px; width:2.5px; border-radius:var(--r-xs); background:var(--accent) }
.side-foot { margin-top:auto; padding:6px 6px 0; border-top:1px solid var(--border); font-family:var(--font-mono); font-size:7.5px; color:var(--muted) }
.main { min-width:0; display:flex; flex-direction:column; gap:7px; padding:10px 12px }
.line-card { padding:9px 10px; border:1px solid var(--border); border-radius:var(--r-sm); background:var(--panel); box-shadow:0 10px 18px -10px var(--accent-14) }
.line-name { display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; letter-spacing:-.01em }
.mini-flag { display:block; width:15px; height:11px; flex:none; overflow:hidden; border-radius:var(--r-xs) }
.line-state { margin-top:5px; display:flex; align-items:center; gap:5px; font-size:9px; font-weight:600; color:var(--success-dark) }
.dot { width:6px; height:6px; flex-shrink:0; border-radius:var(--r-circle); background:var(--success); box-shadow:0 0 0 2.5px var(--success-12) }
.chips { display:flex; flex-wrap:wrap; gap:4px }
.chip { padding:4px 7px; max-width:100%; overflow-wrap:anywhere; border-radius:var(--r-pill); font-size:8.5px; font-weight:600; line-height:1.3 }
.c-iepl { background:var(--success-12); color:var(--success-dark) }
.c-relay { background:var(--warn-14); color:var(--warn-dark) }
.c-direct { background:var(--panel-2); color:var(--muted) }
.lines li { display:flex; align-items:center; justify-content:space-between; height:22px; border-bottom:1px solid var(--panel-2); font-size:9.5px }
.lines li span { display:flex; align-items:center; gap:5px }
.pip { width:5px; height:5px; flex-shrink:0; border-radius:var(--r-circle) }
.pip-relay { background:var(--warn) }
.pip-direct { background:var(--gray-2) }
.lines em { font-style:normal; font-family:var(--font-mono); font-size:7.5px; color:var(--muted) }
.note { font-size:9px; color:var(--muted) }
.caret { display:inline-block; width:1px; height:11px; margin-left:1px; vertical-align:-2px; background:var(--text); animation:blink 1.1s steps(1,end) infinite }
.info { display:flex; flex-direction:column; gap:3px; padding:10px; border-left:1px solid var(--border); background:var(--panel) }
.info-k { margin-bottom:5px; font-size:11px; font-weight:700 }
.info-v { margin-bottom:5px; font-size:9.5px; line-height:1.45 }
.plan { margin-top:auto; padding:8px; border-radius:var(--r-sm); background:var(--panel-2) }
.plan-price { margin-top:2px; font-family:var(--font-display); font-size:15px; font-weight:800; letter-spacing:-.02em }
.plan-gb { font-family:var(--font-mono); font-size:9px; color:var(--text) }
.plan-note { margin-top:3px; font-size:7.5px; line-height:1.4; color:var(--muted) }
.iphone { position:absolute; z-index:4; left:0; top:128px; width:142px; height:288px; padding:7px; border-radius:var(--r-phone); background:linear-gradient(150deg,var(--device-ink-2) 0%,var(--device-ink) 50%,var(--device-ink) 100%); box-shadow:0 0 0 1.5px var(--device-rim),inset 0 0 0 1px var(--sheen-soft),var(--shadow-phone) }
.iphone::after { content:""; position:absolute; inset:0; z-index:5; border-radius:inherit; pointer-events:none; background:linear-gradient(122deg,var(--white-0) 22%,var(--sheen) 30%,var(--white-0) 40%); opacity:.5 }
.iphone-screen { position:relative; height:100%; display:flex; flex-direction:column; padding:28px 11px 10px; overflow:hidden; border-radius:var(--r-phone-screen); background:var(--panel) }
.island { position:absolute; top:7px; left:50%; width:38px; height:11px; margin-left:-19px; border-radius:var(--r-pill); background:var(--device-ink) }
.ph-bar { position:absolute; top:8px; left:13px; right:12px; display:flex; align-items:center; justify-content:space-between; font-family:var(--font-mono); font-size:7px; color:var(--text) }
.ph-name { margin-top:3px; font-size:10.5px; font-weight:700; letter-spacing:-.01em }
.ph-toggle { margin-top:12px; display:flex; align-items:center; gap:9px }
.switch { position:relative; flex:none; width:56px; height:32px; border-radius:var(--r-pill); background:linear-gradient(180deg,var(--success) 0%,var(--success-dark) 140%); box-shadow:inset 0 1px 2px var(--ink-14),0 6px 12px -6px var(--success-20) }
.knob { position:absolute; top:3px; right:3px; width:26px; height:26px; border-radius:var(--r-circle); background:var(--panel); box-shadow:0 2px 4px var(--ink-30) }
.ph-state b { display:flex; align-items:center; gap:4px; font-size:10px; color:var(--success-dark) }
.ph-state small { display:block; margin-top:1px; font-size:8px; color:var(--muted) }
.breath { animation:breath 2.8s ease-in-out infinite }
.ph-div { margin:12px 0 8px; height:1px; background:var(--panel-2) }
.ph-list { margin-top:4px }
.ph-list li { display:flex; align-items:center; gap:6px; height:18px; font-size:9.5px; color:var(--text) }
.ph-list svg { display:block; width:11px; height:11px; flex:none }
.ph-list i { margin-left:auto; font-style:normal; font-size:8px; color:var(--success-dark) }
.float { position:absolute; z-index:6; display:flex; align-items:center; gap:10px; padding:9px 14px 9px 9px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--panel); box-shadow:var(--shadow-card),inset 0 1px 0 var(--panel) }
.float-ic { display:grid; place-items:center; width:30px; height:30px; border-radius:var(--r-sm); background:var(--panel-2); color:var(--text) }
.float-ic svg { width:16px; height:16px }
.float-ic path,.float-ic rect { fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round }
.float b { font-size:14px; font-weight:700; line-height:1.3; white-space:nowrap }
.float small { display:block; font-size:12px; color:var(--muted); line-height:1.3 }
.f-refund { left:6px; bottom:14px; transform:rotate(-3deg) }
.f-devices { right:0; top:0; transform:rotate(3deg) }
.band { position:relative; overflow:hidden; padding-top:72px; padding-bottom:80px; background:var(--graphite); color:var(--on-dark) }
.band-arcs { position:absolute; inset:0; display:block; width:100%; height:100%; pointer-events:none }
.band-arcs circle { fill:none; stroke:var(--arc); stroke-width:1; stroke-dasharray:3 11; vector-effect:non-scaling-stroke }
.feature-layout { position:relative; display:grid; grid-template-columns:.85fr 1.15fr; gap:64px; align-items:center }
.band-copy { position:relative; max-width:520px }
.band-title { position:relative; padding-top:50px }
.hand-edit { position:absolute; left:0; top:0; width:118px; height:42px; color:var(--accent) }
.hand-edit path { fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round }
.band-copy p { margin-top:24px; color:var(--on-dark-muted); font-size:18px }
.band-copy .btn { margin-top:28px }
.feature-window { min-width:0; border:1px solid var(--border); border-radius:var(--r-lg); overflow:hidden; color:var(--text); background:var(--panel); box-shadow:var(--shadow-lift) }
.window-chrome { padding:12px 18px; border-bottom:1px solid var(--border); background:var(--panel-soft); display:flex; gap:7px; align-items:center; font-family:var(--font-mono); font-size:12px; color:var(--muted) }
.chrome-dot { width:7px; height:7px; border-radius:var(--r-circle); background:var(--gray-2); flex-shrink:0 }
.chrome-title { margin-left:10px }
.feature-browser { display:grid; grid-template-columns:180px minmax(0,1fr) }
.feature-tabs { padding:12px 8px; background:var(--panel-soft); border-right:1px solid var(--border); display:flex; flex-direction:column; gap:4px }
.feature-tabs [role="tab"] { position:relative; display:flex; align-items:center; gap:8px; text-align:left; width:100%; min-height:44px; padding:10px 12px; border:0; border-radius:var(--r-folder); background:var(--clear); color:var(--text); font-size:14px }
.feature-tabs [role="tab"] svg { width:16px; height:16px; color:var(--gray-3) }
.feature-tabs [aria-selected="true"] { background:var(--accent-08); font-weight:600 }
.feature-tabs [aria-selected="true"]::before { content:""; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:var(--r-xs); background:var(--accent) }
.feature-details { padding:28px; min-width:0 }
.feature-details p { margin-top:16px; font-size:15px; color:var(--muted); line-height:1.85 }
.feature-details .tag { margin-top:20px }
.feature-accordion { display:none }
.tabs { min-width:0 }
.tab-list { display:flex; gap:6px; flex-wrap:wrap; padding:6px; width:fit-content; max-width:100%; background:var(--panel-2); border:1px solid var(--border); border-radius:var(--r-md); margin-bottom:24px }
.tab-list [role="tab"] { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:10px 20px; border:1px solid var(--clear); border-radius:var(--r-sm); background:var(--clear); color:var(--muted); font-weight:600 }
.tab-list [role="tab"][aria-selected="true"] { background:var(--panel); color:var(--text); border-color:var(--border); box-shadow:var(--shadow-card) }
.tab-panel { min-width:0 }
.tab-panel+.tab-panel { margin-top:24px }
.toc-tabs { position:sticky; top:var(--toc-offset); z-index:12; display:flex; align-items:center; gap:6px; overflow-x:auto; max-width:100%; padding:8px; margin-top:24px; margin-bottom:32px; border:1px solid var(--border); border-radius:var(--r-md); background:var(--panel); box-shadow:var(--shadow-card); overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch }
.toc-tabs a { display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; min-height:40px; padding:8px 16px; white-space:nowrap; color:var(--muted); font-size:14px; border-radius:var(--r-sm) }
.toc-tabs a.is-current { background:var(--panel-2); color:var(--text); font-weight:600 }
.toc-tabs.toc-static { position:static }
body:has(.toc-tabs) section[id] { scroll-margin-top:var(--toc-landing) }
.faq-item { border-bottom:1px solid var(--border); min-width:0 }
.faq-item summary { position:relative; padding:22px 40px 22px 0; cursor:pointer; list-style:none; font-weight:600; min-height:48px }
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after { content:"+"; position:absolute; right:8px; top:20px; font-family:var(--font-mono); font-size:22px; color:var(--muted) }
.faq-item[open] summary::after { content:"−" }
.faq-answer { padding-bottom:24px; color:var(--muted); max-width:70em }
.faq-answer p+p { margin-top:16px }
.plan-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; align-items:stretch }
.plan-card { position:relative; min-width:0; display:flex; flex-direction:column; padding:28px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--panel); box-shadow:var(--shadow-card); transform-style:preserve-3d }
.plan-card.is-current { border-color:var(--text); box-shadow:var(--shadow-card),inset 0 0 0 1px var(--text) }
.plan-badge { position:absolute; top:-14px; right:20px; padding:4px 12px; border-radius:var(--r-pill); background:var(--text); color:var(--panel); font-size:12px; font-weight:600; max-width:calc(100% - 40px) }
.plan-cycle { font-family:var(--font-mono); font-size:13px; color:var(--muted); margin-bottom:12px }
.price { font-family:var(--font-display); font-size:44px; font-weight:800; line-height:1.2; margin-top:24px; letter-spacing:-.02em; font-variant-numeric:tabular-nums }
.price small { font-family:var(--font-body); font-size:14px; font-weight:500; letter-spacing:0; color:var(--muted) }
.plan-traffic { margin-top:8px; font-family:var(--font-mono); color:var(--text) }
.plan-features { margin-top:24px; margin-bottom:28px; font-size:14px; color:var(--muted) }
.plan-features li { padding-block:7px; border-top:1px solid var(--panel-2) }
.plan-card>.btn { margin-top:auto; width:100% }
.table-scroll { overflow-x:auto; max-width:100%; width:100%; min-width:0; -webkit-overflow-scrolling:touch; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--panel) }
.data-table,.route-table { width:100%; border-collapse:collapse; text-align:left; min-width:680px; font-size:14px }
.data-table caption,.route-table caption { text-align:left; padding:16px 20px; font-weight:600; color:var(--text) }
.data-table th,.data-table td,.route-table th,.route-table td { padding:16px 20px; border-bottom:1px solid var(--border); word-break:keep-all; color:var(--text); vertical-align:top }
.table-scroll th { white-space:nowrap; color:var(--text); background:var(--panel-2); font-weight:600 }
.table-scroll td:first-child { font-weight:600; color:var(--text) }
.route-table .region-heading th { background:var(--panel-soft); color:var(--text); font-size:13px }
.data-table tr:last-child td,.route-table tr:last-child td { border-bottom:0 }
.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 { min-width:0; display:flex; flex-direction:column; align-items:flex-start; padding:24px 20px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--panel); box-shadow:var(--shadow-card) }
.platform-card>svg { width:32px; height:32px; margin-bottom:20px }
.platform-card h3 { font-size:18px; margin-bottom:20px }
.platform-card .btn { margin-top:auto; padding-inline:12px; width:100%; font-size:13px }
.article-card { display:flex; flex-direction:column; min-width:0; border:1px solid var(--border); border-radius:var(--r-lg); padding:28px; background:var(--panel); box-shadow:var(--shadow-card) }
.article-meta { display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:24px; color:var(--muted); font-family:var(--font-mono); font-size:12px }
.article-card h3 { font-size:22px; line-height:1.45 }
.article-card p { color:var(--muted); margin-top:16px; font-size:15px }
.article-link { display:inline-flex; align-items:center; min-height:32px; margin-top:24px; font-size:14px; font-weight:600; text-decoration:underline; text-underline-offset:5px }
.tag { display:inline-block; padding:4px 10px; border-radius:var(--r-pill); background:var(--panel-2); color:var(--muted); font-size:12px; font-weight:500; max-width:100%; overflow-wrap:anywhere; vertical-align:middle }
.tag-success { background:var(--success-12); color:var(--success-dark) }
.tag-warn { background:var(--warn-14); color:var(--warn-dark) }
.callout { margin:24px 0; padding:20px 24px; border-left:3px solid var(--text); border-radius:var(--r-sm); background:var(--panel-2); color:var(--text) }
.callout p+p { margin-top:12px }
.promo-block { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; margin-top:48px; padding:32px; border:1px solid var(--border); border-radius:var(--r-lg); background:var(--panel); box-shadow:var(--shadow-card); min-width:0 }
.promo-copy { flex:1 1 240px; min-width:0 }
.promo-copy strong { font-size:22px; font-weight:800 }
.promo-copy p { margin-top:8px; color:var(--muted) }
.promo-block .btn { flex-shrink:0; white-space:nowrap }
.cta-band { padding-top:48px; padding-bottom:48px; background:var(--graphite); color:var(--on-dark) }
.cta-band-inner { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:24px }
.cta-band p { margin-top:12px; color:var(--on-dark-muted) }
.blog-heading { position:relative; isolation:isolate; overflow-x:clip; padding-top:64px; padding-bottom:56px }
.blog-heading::before { content:""; position:absolute; z-index:-1; inset:28px 16% 24px 0; background:var(--accent-05); border-radius:var(--r-lg) }
.blog-heading p,.blog-heading .article-meta { margin-left:24px; margin-top:24px; max-width:760px }
.preview-section { padding-top:64px; padding-bottom:64px; border-bottom:1px solid var(--border) }
.preview-section>h2 { margin-bottom:32px }
.swatch-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px }
.swatch { border:1px solid var(--border); background:var(--panel); border-radius:var(--r-sm); overflow:hidden; min-width:0 }
.swatch-color { height:64px; border-bottom:1px solid var(--border) }
.swatch code { display:block; padding:12px; color:var(--text); font-size:12px }
.sw-bg { background:var(--bg) }
.sw-top { background:var(--bg-top) }
.sw-bottom { background:var(--bg-bottom) }
.sw-panel { background:var(--panel) }
.sw-panel2 { background:var(--panel-2) }
.sw-soft { background:var(--panel-soft) }
.sw-border { background:var(--border) }
.sw-accent { background:var(--accent) }
.sw-accent-dark { background:var(--accent-dark) }
.sw-text { background:var(--text) }
.sw-muted { background:var(--muted) }
.sw-faint { background:var(--faint) }
.sw-success { background:var(--success) }
.sw-success-dark { background:var(--success-dark) }
.sw-warn { background:var(--warn) }
.sw-warn-dark { background:var(--warn-dark) }
.sw-error { background:var(--error) }
.sw-graphite { background:var(--graphite) }
.sw-doodle { background:var(--doodle) }
.sw-gray1 { background:var(--gray-1) }
.sw-gray2 { background:var(--gray-2) }
.sw-gray3 { background:var(--gray-3) }
.sw-gray4 { background:var(--gray-4) }
.sw-gray5 { background:var(--gray-5) }
.sw-accent05 { background:var(--accent-05) }
.sw-accent08 { background:var(--accent-08) }
.sw-accent10 { background:var(--accent-10) }
.sw-accent14 { background:var(--accent-14) }
.sw-grid { background:var(--grid-ink) }
.sw-ink04 { background:var(--ink-04) }
.sw-ink08 { background:var(--ink-08) }
.sw-ink14 { background:var(--ink-14) }
.sw-ink30 { background:var(--ink-30) }
.sw-success12 { background:var(--success-12) }
.sw-success20 { background:var(--success-20) }
.sw-warn14 { background:var(--warn-14) }
.sw-sheen { background:var(--sheen) }
.sw-sheen-soft { background:var(--sheen-soft) }
.sw-clear { background:var(--clear) }
.sw-white0 { background:var(--white-0) }
.sw-veil { background:var(--veil) }
.sw-device { background:var(--device-ink) }
.sw-device2 { background:var(--device-ink-2) }
.sw-rim { background:var(--device-rim) }
.sw-aluhi { background:var(--alu-hi) }
.sw-alumid { background:var(--alu-mid) }
.sw-alulo { background:var(--alu-lo) }
.sw-keytop { background:var(--key-top) }
.sw-keybottom { background:var(--key-bottom) }
.sw-keyedge { background:var(--key-edge) }
.sw-flagred { background:var(--flag-red) }
.sw-flagblue { background:var(--flag-blue) }
.sw-flagwhite { background:var(--flag-white) }
.sw-flagedge { background:var(--flag-edge) }
.sw-onaccent { background:var(--on-accent) }
.sw-ondark { background:var(--on-dark) }
.sw-ondarkmuted { background:var(--on-dark-muted) }
.sw-arc { background:var(--arc) }
.type-samples { display:grid; gap:24px }
.type-display { font-family:var(--font-display); font-size:clamp(32px,4vw,56px); line-height:1.12; font-weight:800; letter-spacing:-.02em }
.button-samples { display:flex; align-items:center; flex-wrap:wrap; gap:16px }
.preview-dark { padding:24px; border-radius:var(--r-lg); background:var(--graphite); color:var(--on-dark) }
@keyframes rig-rise { from { transform:translateY(10px) } to { transform:translateY(0) } }
@keyframes blink { 0%,45% { opacity:1 } 46%,100% { opacity:0 } }
@keyframes breath { 0%,100% { transform:scale(1); opacity:1 } 50% { transform:scale(.85); opacity:.65 } }
@media (max-width:1200px) {
  .rig { --s:.88 }
  .platforms li { padding-inline:9px; gap:5px; font-size:12px }
  .feature-layout { gap:32px }
  .feature-browser { grid-template-columns:160px minmax(0,1fr) }
  .feature-details { padding:22px }
}
@media (max-width:980px) {
  .hero-grid { grid-template-columns:1fr 1fr; gap:16px }
  .rig { --s:.72 }
  .stage { height:570px }
  .platforms { flex-wrap:wrap }
  .platforms li+li { box-shadow:none }
  .routes { align-items:flex-start }
  .routes-label { display:none }
  .float { padding:8px 10px; gap:7px }
  .float b { font-size:12px }
  .float small { font-size:10px }
  .f-refund { bottom:20px }
  .feature-layout { grid-template-columns:1fr }
  .band-copy { max-width:700px }
  .platform-grid { grid-template-columns:repeat(3,minmax(0,1fr)) }
}
@media (max-width:768px) {
  .hero { min-height:auto; padding-block:40px 32px }
  .hero-grid { grid-template-columns:minmax(0,1fr); gap:16px }
  .hero h1 { font-size:clamp(28px,7.6vw,40px); margin-top:24px }
  .copy { max-width:620px }
  .doodle { display:none }
  .stage { height:440px; width:100%; max-width:620px; margin-inline:auto }
  .rig { --s:.8 }
  .stage::before { right:0; max-width:100% }
  .lead { font-size:18px; margin-top:24px }
  .cta-row { margin-top:28px }
  .platforms { margin-top:24px }
  .platforms li { padding-inline:10px; font-size:13px }
  .plan-grid { grid-template-columns:1fr; gap:28px }
  .swatch-grid { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .feature-browser { display:none }
  .feature-accordion { display:block; padding:0 20px }
  .feature-accordion .faq-item:last-child { border-bottom:0 }
  .feature-accordion .faq-answer { font-size:15px }
}
@media (max-width:640px) {
  .stage { height:350px; max-width:100% }
  .rig { --s:.58 }
  .f-refund { left:0; bottom:4px; transform:none }
  .f-devices { right:0; top:6px; transform:none }
  .platforms { display:flex; flex-wrap:wrap; padding:6px; gap:4px }
  .platforms li { padding-inline:7px; gap:5px; font-size:12px }
  .platforms svg { width:16px; height:16px }
  .trust { font-size:12px; gap:8px 14px }
  .trust li+li::before { display:none }
  .routes ul { gap:10px 14px }
  .routes li { font-size:12px }
  .band { padding-top:48px; padding-bottom:56px }
  .band-copy p { font-size:16px }
  .platform-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .platform-card { padding:20px 16px }
  .swatch-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .promo-block { padding:24px }
  .promo-block .btn { max-width:100% }
  .preview-section { padding-top:48px; padding-bottom:48px }
  .blog-heading p,.blog-heading .article-meta { margin-left:0 }
}
@media (max-width:359px) {
  .rig { --s:.51 }
  .stage { height:310px }
  .btn { padding-inline:20px; font-size:15px }
  .float-ic { width:24px; height:24px }
}
@media (prefers-reduced-motion:reduce) {
  .rig-wrap,.caret,.breath { animation:none }
}