/* Approved first-screen composition */
.hero { position:relative;padding:32px var(--gutter) 30px }
.hero-inner { position:relative;max-width:1120px;margin:auto }
.hero-copy { position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;text-align:center }
.frags { position:absolute;z-index:-1;left:50%;top:-40px;width:1180px;height:360px;transform:translateX(-50%);pointer-events:none }
.frags .d { fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round }
.frags .d.d2 { stroke:var(--accent-2) }
.frags .q { fill:var(--accent) }
.frags .o1 { opacity:.25 }.frags .o2 { opacity:.4 }.frags .o3 { opacity:.55 }.frags .o4 { opacity:.7 }
.badge { display:inline-flex;align-items:center;gap:10px;max-width:100%;min-height:28px;padding:2px 14px 2px 4px;border:1px solid var(--border-soft);border-radius:var(--radius-pill);background:var(--panel-glass);box-shadow:0 4px 12px -6px var(--accent-a24);color:var(--text-muted);font-size:13px;line-height:1.3;overflow:hidden }
.badge-key { flex:none;padding:4px 9px;border-radius:var(--radius-pill);background:var(--accent-a10);color:var(--accent-dark);font:700 11px var(--font-mono);letter-spacing:.04em }
.hero-title { margin:18px 0 0;font-size:68px;line-height:1.1;letter-spacing:-.02em }
.hero-sub { max-width:720px;margin-top:14px;color:var(--text-muted);font-size:20px;line-height:1.5 }
.hero-sub strong { color:var(--text) }
.cta-row { display:flex;justify-content:center;gap:12px;margin-top:24px }
.cta-row svg { width:18px;height:18px }
.trust { display:flex;flex-wrap:wrap;justify-content:center;align-items:center;margin-top:20px;color:var(--text-muted);font-size:14px }
.trust li { display:flex;align-items:center;gap:6px }
.trust li+li::before { content:"";width:3px;height:3px;flex:none;margin:0 10px 0 4px;border-radius:1px;background:var(--border-strong) }
.trust svg { width:14px;height:14px }
.platforms { display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:22px;margin-top:12px;color:var(--text-muted);font-size:13px }
.platforms li { display:flex;align-items:center;gap:7px }
.platforms svg { width:17px;height:17px;color:var(--text-soft) }
.plat-label { color:var(--accent-dark);font:11px var(--font-mono);letter-spacing:.12em }
.device { position:relative;z-index:1;width:min(88%,986px);margin:40px auto 0 }
.lockcard { position:relative;z-index:2;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:inset 0 1px 0 var(--white),0 2px 6px var(--accent-a06),0 30px 80px -10px var(--accent-a12),0 16px 36px -22px var(--accent-a30) }
.chrome { display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:42px;padding:0 14px 0 16px;border-bottom:1px solid var(--border-soft);border-radius:11px 11px 0 0;background:linear-gradient(180deg,var(--white),var(--bg-panel)) }
.lights { display:flex;gap:7px }
.lights i { display:block;width:10px;height:10px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--ink-a10) }
.lights .l-r { background:var(--error) }.lights .l-y { background:var(--warn) }.lights .l-g { background:var(--success) }
.chrome-title { display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600 }
.chrome-title .file { color:var(--text-muted);font:11px var(--font-mono) }
.corner-tag { justify-self:end;display:inline-flex;align-items:center;gap:5px;min-height:22px;padding:2px 8px;border-radius:var(--radius-s);background:var(--accent-a10);color:var(--accent-dark);font:700 10.5px var(--font-mono);letter-spacing:.1em;white-space:nowrap }
.corner-tag svg { width:11px;height:11px }
.lockbody { --pt:22px;--cell:48px;--band-right:122px;position:relative;display:grid;grid-template-columns:minmax(0,1fr) 132px;column-gap:18px;padding:var(--pt) 32px 20px }
.wheelset { min-width:0 }
.caps,.tray { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px }
.caps { height:22px;margin-bottom:8px;padding:0 10px }
.cap { display:flex;align-items:center;justify-content:center;gap:6px;color:var(--text-muted);font:10.5px var(--font-mono);letter-spacing:.1em;white-space:nowrap }
.cap b { color:var(--text);font:600 12px var(--font-body) }
.tray { padding:10px;border-radius:var(--radius-xl);background:var(--bg-panel-2);box-shadow:inset 0 2px 6px var(--ink-a10),inset 0 -1px 0 var(--white) }
.drum { position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:var(--radius-m);background:linear-gradient(180deg,var(--drum-edge),var(--drum-tint) 9%,var(--white) 24%,var(--bg-panel) 34%,var(--drum-tint) 50%,var(--drum-tint) 62%,var(--bg-panel-2) 84%,var(--drum-edge));box-shadow:inset 0 1px 0 var(--white),inset 0 -1px 0 var(--ink-a08),0 2px 4px -1px var(--ink-a10) }
.drum::before,.drum::after { content:"";position:absolute;top:0;bottom:0;width:7px;background:linear-gradient(180deg,var(--drum-edge),var(--white) 26%,var(--drum-tint) 55%,var(--drum-edge));pointer-events:none }
.drum::before { left:0;box-shadow:inset -1px 0 0 var(--ink-a10) }
.drum::after { right:0;box-shadow:inset 1px 0 0 var(--ink-a10) }
.cell { display:flex;align-items:center;justify-content:center;gap:6px;height:var(--cell);padding:0 8px;color:var(--text-muted);font-size:13px;white-space:nowrap }
.cell.up { opacity:.5;transform:perspective(220px) rotateX(30deg);transform-origin:50% 100% }
.cell.down { opacity:.5;transform:perspective(220px) rotateX(-30deg);transform-origin:50% 0 }
.cell.set { color:var(--text);font-size:16.5px;font-weight:700;letter-spacing:-.01em }
.cell .k { color:var(--text-muted);font:500 10.5px var(--font-mono) }
.cell.set .k { color:var(--accent-dark);font-weight:700 }
.band { position:absolute;z-index:2;left:26px;right:var(--band-right);top:calc(var(--pt) + 40px + var(--cell));height:var(--cell);border-radius:var(--radius-s);background:linear-gradient(180deg,var(--accent-a12),var(--accent-a08));border-top:1px solid var(--white-a90);border-bottom:1px solid var(--white-a90);box-shadow:0 0 0 1px var(--accent-a24),0 8px 18px -8px var(--accent-a30);pointer-events:none }
.band::before { content:"";position:absolute;left:-1px;top:50%;margin-top:-5px;border:5px solid transparent;border-left-color:var(--accent) }
.lockcol { position:relative;z-index:3 }
.lock-svg { position:absolute;left:50%;top:40px;width:96px;height:112px;margin-left:-48px;filter:drop-shadow(0 10px 14px var(--accent-a30)) }
.lock-label { position:absolute;left:0;right:0;top:156px;text-align:center;color:var(--accent-dark);font:600 11px/1.4 var(--font-mono);letter-spacing:.08em }
.routes { display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:24px;min-height:60px;padding:10px 32px;border-top:1px dashed var(--border);border-radius:0 0 11px 11px;background:linear-gradient(180deg,var(--bg-panel),var(--panel-deep)) }
.routes-label { margin-right:4px;color:var(--accent-dark);font:11px var(--font-mono);letter-spacing:.14em }
.flag { display:flex;align-items:center;gap:8px;color:var(--text);font-size:13.5px;font-weight:500;white-space:nowrap }
.flag svg { width:24px;height:17px;filter:drop-shadow(0 1px 1.5px var(--ink-a10)) }
.flag svg.sq { width:17px;height:17px }
.fl-r { fill:var(--flag-red) }.fl-b { fill:var(--flag-blue) }.fl-w { fill:var(--flag-white) }
.s-acc { stop-color:var(--accent) }.s-acc2 { stop-color:var(--accent-2) }.s-dark { stop-color:var(--accent-dark) }.s-white { stop-color:var(--white) }
.f-white { fill:var(--white) }.f-dark { fill:var(--accent-dark) }.k-white { fill:none;stroke:var(--white) }
.float { position:absolute;z-index:3;padding:12px 14px;background:var(--white);border:1px solid var(--border-soft);border-radius:var(--radius-l);box-shadow:inset 0 1px 0 var(--white),0 18px 40px -16px var(--accent-a30),0 3px 8px -2px var(--accent-a10) }
.float-net { left:-194px;top:-52px;width:210px }.float-app { position:relative;right:auto;top:auto;width:222px;margin:0 0 16px auto }
.float-head { display:flex;align-items:center;justify-content:space-between;margin-bottom:8px }
.float-eyebrow { color:var(--text-muted);font:10px var(--font-mono);letter-spacing:.14em }
.mini-tag { padding:2px 6px;border-radius:var(--radius-s);background:var(--accent-a10);color:var(--accent-dark);font:700 9.5px var(--font-mono);letter-spacing:.1em }
.cov { display:flex;align-items:baseline;gap:5px;white-space:nowrap;font-family:var(--font-mono) }
.cov b { font-size:18px }.cov span { color:var(--text-muted);font:12.5px var(--font-body) }.cov i { color:var(--accent);font-style:normal }
.float-note { margin-top:6px;color:var(--text-muted);font:11px var(--font-mono) }
.float-title { font-size:13.5px;font-weight:700 }
.mini-grid { display:flex;gap:6px;margin-top:10px }
.mini-grid li { display:flex;align-items:center;justify-content:center;width:26px;height:26px;border:1px solid var(--border-soft);border-radius:var(--radius-s);background:var(--bg-panel);color:var(--text-soft) }
.mini-grid svg { width:14px;height:14px }
.stack { position:absolute;z-index:1;left:-138px;bottom:28px;width:170px;height:232px }
.stack text { fill:var(--accent-dark);font:700 11px var(--font-mono) }
.statsband { padding:18px var(--gutter);border-top:1px solid var(--border);background:var(--bg-panel-2) }
.statsband ul { max-width:1120px;margin:auto;display:flex;justify-content:space-between;gap:16px;color:var(--text-muted);font:13px var(--font-mono) }
.statsband b { color:var(--text) }

/* Shared content components */
.tabs { display:flex;flex-wrap:wrap;gap:6px;width:max-content;max-width:100%;padding:5px;border:1px solid var(--border);border-radius:var(--radius-l);background:var(--bg-panel-2) }
.tabs [role="tab"] { min-height:40px;padding:8px 16px;border:0;border-radius:var(--radius-m);background:transparent;color:var(--text-muted);font-weight:600;cursor:pointer }
.tabs [role="tab"][aria-selected="true"] { background:var(--bg-panel);color:var(--accent-dark);box-shadow:0 2px 8px var(--accent-a12) }
[role="tabpanel"][hidden] { display:none }
.toc-tabs { position:sticky;top:12px;z-index:4;display:flex;gap:6px;max-width:100%;overflow-x:auto;overscroll-behavior-inline:contain;padding:8px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-l);box-shadow:0 12px 25px -18px var(--accent-a30);scrollbar-width:thin }
.toc-tabs a { display:inline-flex;align-items:center;min-height:38px;padding:6px 12px;border-radius:var(--radius-s);white-space:nowrap;text-decoration:none;color:var(--text-muted) }
.toc-tabs a:hover,.toc-tabs a.is-current { background:var(--accent-a10);color:var(--accent-dark) }
body:has(.toc-tabs) section[id] { scroll-margin-top:96px }
.faq-list { border-top:1px solid var(--border) }
.faq-list details { border-bottom:1px solid var(--border);background:var(--bg-panel) }
.faq-list summary { position:relative;min-height:52px;padding:16px 48px 16px 18px;cursor:pointer;font-weight:700;list-style:none }
.faq-list summary::-webkit-details-marker { display:none }
.faq-list summary::after { content:"+";position:absolute;right:18px;color:var(--accent);font:24px var(--font-mono) }
.faq-list details[open] summary::after { content:"−" }
.faq-list details > :not(summary) { padding:0 18px 18px;color:var(--text-muted) }
.plan-grid,.route-type-grid,.client-grid,.article-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px }
.plan-card,.route-type-card,.client-card,.article-card { position:relative;min-width:0;padding:24px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--radius-xl);box-shadow:inset 0 1px 0 var(--white),0 20px 42px -25px var(--accent-a24) }
.plan-card.is-featured { border-color:var(--accent);box-shadow:inset 0 1px 0 var(--white),0 22px 44px -18px var(--accent-a30) }
.plan-card .corner-tag,.route-type-card .corner-tag { position:absolute;right:18px;top:18px }
.plan-card h3,.route-type-card h3,.client-card h3,.article-card h3 { margin:12px 0;font-size:23px }
.plan-card .price { margin:18px 0;color:var(--text);font:700 32px var(--font-mono);font-variant-numeric:tabular-nums }
.plan-card .price small { color:var(--text-muted);font:14px var(--font-body) }
.plan-card ul { margin:14px 0 22px;color:var(--text-muted) }
.plan-card li { padding-block:5px }
.plan-card .btn { width:100% }
.route-type-card p,.client-card p,.article-card p { color:var(--text-muted) }
.route-sketch { display:flex;align-items:center;gap:8px;margin-top:22px;padding:14px;border-radius:var(--radius-m);background:var(--accent-pale);color:var(--accent-dark);font:12px var(--font-mono) }
.route-sketch i { flex:1;border-top:1px dashed var(--accent) }
.table-scroll { max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:var(--radius-l) }
.table-scroll table,.data-table { width:100%;min-width:650px;border-collapse:collapse;background:var(--bg-panel) }
.table-scroll th,.table-scroll td,.data-table th,.data-table td { padding:14px 18px;border-bottom:1px solid var(--border);text-align:left;word-break:keep-all }
.table-scroll th,.data-table th { background:var(--bg-panel-2);color:var(--text);font-weight:700;white-space:nowrap }
.table-scroll td:first-child,.data-table td:first-child { color:var(--text);font-weight:600 }
.table-scroll tbody tr:last-child td,.data-table tbody tr:last-child td { border-bottom:0 }
.prose > .data-table { display:block;max-width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch }
.client-grid { grid-template-columns:repeat(5,minmax(0,1fr)) }
.client-card svg { display:block;width:28px;height:28px;margin-bottom:14px;color:var(--accent-dark) }
.client-card .btn { margin-top:16px;padding-inline:12px;font-size:13px }
.icon-matrix { display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px }
.icon-matrix span { display:grid;place-items:center;aspect-ratio:1;border:1px solid var(--border);border-radius:var(--radius-m);background:var(--bg-panel);color:var(--accent-dark);font:700 13px var(--font-mono) }
.article-card a { color:var(--accent-dark);font-weight:700 }
.article-card time,.article-card .eyebrow { display:block }
.callout { margin-block:24px;padding:18px 22px;border-left:3px solid var(--accent);border-radius:0 var(--radius-m) var(--radius-m) 0;background:var(--accent-pale);color:var(--text-soft) }
.promo-block { display:flex;align-items:center;justify-content:space-between;gap:24px;padding:28px;background:var(--bar-from);border-radius:var(--radius-xl);color:var(--on-dark) }
.promo-block h2 { margin:0 0 6px;color:var(--on-dark);font-size:26px }
.promo-block p { color:var(--on-dark-muted) }
.promo-block .btn { flex-shrink:0;white-space:nowrap }
.feature-pair { display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:64px;margin-bottom:96px }
.feature-pair:nth-child(even) .feature-art { order:-1 }
.feature-art { min-height:280px;padding:28px }
.feature-pair h3 { margin:14px 0 22px }
.feature-pair p { margin-bottom:18px;color:var(--text-muted) }
.feature-pair .btn { margin-top:12px }
@media (max-width:1320px) { .float,.stack { display:none } }
@media (max-width:1040px) { .device { width:100% } }
@media (max-width:768px) {
  .hero { padding:28px var(--gutter) 24px }
  .hero-title { font-size:36px;line-height:1.18 }
  .hero-sub { font-size:16px }
  .cta-row { flex-wrap:wrap }
  .trust { row-gap:6px;font-size:13px }
  .platforms { gap:10px 16px }
  .plat-label { width:100% }
  .frags { left:-12%;top:0;width:124%;height:100%;transform:none;opacity:.8 }
  .frags .fi,.frags .fh { display:none }
  .device { margin-top:32px }
  .lockbody { --pt:18px;--band-right:74px;grid-template-columns:minmax(0,1fr) 84px;column-gap:8px;padding:var(--pt) 14px 16px }
  .caps,.tray { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .caps > :nth-child(n+4),.tray > :nth-child(n+4) { display:none }
  .cell { padding:0 5px;font-size:12px }
  .cell.set { font-size:14px }
  .lock-svg { top:43px;transform:scale(.8) }
  .lock-label { top:150px;font-size:10px }
  .routes { gap:10px 16px;padding:14px }
  .routes-label { width:100%;text-align:center }
  .statsband ul { flex-wrap:wrap;justify-content:center }
  .plan-grid,.route-type-grid,.article-grid { grid-template-columns:1fr 1fr }
  .client-grid { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .feature-pair { grid-template-columns:1fr;gap:24px;margin-bottom:64px }
  .feature-pair:nth-child(even) .feature-art { order:0 }
}
@media (max-width:640px) {
  .plan-grid,.route-type-grid,.article-grid { grid-template-columns:1fr }
  .client-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .icon-matrix { gap:5px }
  .icon-matrix span { font-size:10px }
  .promo-block { flex-wrap:wrap }
  .lockbody { --cell:44px;--band-right:54px;grid-template-columns:minmax(0,1fr) 54px;column-gap:3px;padding-inline:8px }
  .caps,.tray { gap:3px }
  .caps { padding-inline:3px }
  .tray { padding:4px }
  .cap { font-size:9px }
  .cap b { font-size:10px }
  .cell { font-size:10px;padding-inline:2px }
  .cell.set { font-size:11px }
  .band { left:5px }
  .lock-svg { left:50%;margin-left:-48px;transform:scale(.52) }
  .lock-label { font-size:8px;letter-spacing:0 }
  .chrome-title .file { display:none }
}
@media (prefers-reduced-motion:reduce) { .glow { animation:none } }