/* The first-screen composition is intentionally static. */
.ann-switch { position:absolute;width:1px;height:1px;opacity:0;pointer-events:none }
.ann { position:relative;z-index:10;padding-top:8px;padding-bottom:8px;background:linear-gradient(90deg,color-mix(in srgb,var(--violet) 12%,var(--bg-panel)),color-mix(in srgb,var(--coral) 11%,var(--bg-panel))) }
.ann-switch:checked+.ann { display:none }
.ann-in { display:flex;justify-content:center }
.ann-pill { display:inline-flex;align-items:center;gap:14px;margin:0;padding:5px 5px 5px 20px;border-radius:var(--r-pill);background:linear-gradient(100deg,var(--coral-ink),var(--violet));color:var(--paper);font-size:14px;font-weight:700;letter-spacing:.01em;box-shadow:0 12px 26px -14px color-mix(in srgb,var(--coral) 70%,transparent),inset 0 1px 0 color-mix(in srgb,var(--paper) 30%,transparent) }
.ann-dot { width:6px;height:6px;border-radius:var(--r-round);background:var(--paper);flex-shrink:0 }
.ann-link { display:inline-flex;align-items:center;justify-content:center;min-height:26px;padding:0 12px;border-radius:var(--r-pill);border:1px solid color-mix(in srgb,var(--paper) 70%,transparent);color:var(--paper);font-size:12.5px;font-weight:700;text-decoration:none;white-space:nowrap }
.ann-link:hover { background:color-mix(in srgb,var(--paper) 16%,transparent) }
.ann-close { min-width:26px;height:26px;border-radius:var(--r-round);display:grid;place-items:center;cursor:pointer;background:color-mix(in srgb,var(--paper) 18%,transparent);color:var(--paper);flex-shrink:0 }
.ann-close svg { width:12px;height:12px }
.ann-switch:focus-visible+.ann .ann-close { outline:2px solid var(--paper);outline-offset:2px }
.hero { position:relative;overflow-x:clip;max-width:100%;padding-top:52px;padding-bottom:60px;background:linear-gradient(180deg,var(--hero-top),var(--bg) 58%,var(--hero-bottom)) }
.hero-grid { display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1fr);gap:48px;align-items:center }
.copy { position:relative;z-index:3 }
.kicker { display:inline-flex;align-items:center;gap:10px;margin:0;padding:5px 14px 5px 5px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--paper) 72%,transparent);border:1px solid color-mix(in srgb,var(--accent) 24%,var(--border));font-family:var(--font-mono);font-size:12.5px;color:var(--accent-dark);letter-spacing:.02em;box-shadow:var(--hl-edge) }
.kicker-tag { padding:3px 9px;border-radius:var(--r-pill);background:var(--accent-dark);color:var(--paper);font-weight:700;letter-spacing:.06em }
.lead { margin:28px 0 0;max-width:34em;font-size:17px;line-height:1.75;color:var(--text-muted) }
.lead strong { color:var(--text);font-weight:700 }
.trust { list-style:none;margin:24px 0 0;padding:0;max-width:560px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 16px }
.trust li { display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--text);min-width:0 }
.ck { width:20px;height:20px;border-radius:var(--r-round);flex-shrink:0;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 15%,var(--paper));color:var(--accent-dark) }
.ck svg { width:12px;height:12px }
.fixtures { margin-top:28px;padding-top:20px;max-width:560px;border-top:1px dashed color-mix(in srgb,var(--text-muted) 32%,transparent) }
.fx-row { display:grid;grid-template-columns:64px minmax(0,1fr);align-items:center;gap:12px }
.fx-row+.fx-row { margin-top:14px }
.fx-label { font-family:var(--font-mono);font-size:11.5px;letter-spacing:.06em;color:var(--text-muted) }
.fx-items { list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px }
.fx-items li { display:inline-flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600;color:var(--text);white-space:nowrap }
.pf-ico { width:18px;height:18px;color:var(--text-muted);flex-shrink:0 }
.flag-chip { display:inline-flex;border-radius:var(--r-xs);overflow:hidden;flex-shrink:0;box-shadow:0 2px 6px -3px color-mix(in srgb,var(--accent) 40%,transparent) }
.flag { width:24px;height:16px;display:block }
.rig { position:relative;z-index:1;height:636px }
.glow { position:absolute;inset:-70px -100px 150px 120px;pointer-events:none;z-index:0;background:radial-gradient(closest-side at 62% 36%,color-mix(in srgb,var(--accent-blue) 30%,transparent),transparent 72%),radial-gradient(closest-side at 38% 66%,color-mix(in srgb,var(--accent) 24%,transparent),transparent 74%) }
.cloud { position:absolute;inset:-34px -36px 130px 150px;pointer-events:none;z-index:0;opacity:.42;background-image:radial-gradient(circle,var(--coral) 1.5px,transparent 1.9px);background-size:9px 9px;-webkit-mask-image:radial-gradient(38% 34% at 64% 30%,var(--mask) 0 40%,transparent 100%),radial-gradient(24% 30% at 88% 60%,var(--mask) 0 30%,transparent 100%),radial-gradient(30% 20% at 38% 82%,var(--mask) 0 25%,transparent 100%);mask-image:radial-gradient(38% 34% at 64% 30%,var(--mask) 0 40%,transparent 100%),radial-gradient(24% 30% at 88% 60%,var(--mask) 0 30%,transparent 100%),radial-gradient(30% 20% at 38% 82%,var(--mask) 0 25%,transparent 100%) }
.win-wrap { position:absolute;left:48px;top:88px;width:560px;height:400px;z-index:2;transform:rotate(-2deg) }
.win-wrap::before { content:"";position:absolute;inset:10px 10px -12px;z-index:-1;border-radius:var(--r-xl);background:linear-gradient(160deg,color-mix(in srgb,var(--bg-panel-2) 90%,var(--accent)),var(--bg-panel-2));box-shadow:var(--shadow-float) }
.win { position:relative;height:100%;overflow:hidden;border-radius:var(--r-xl);background:var(--bg-panel);border:1px solid color-mix(in srgb,var(--paper) 60%,var(--border));box-shadow:var(--shadow-float) }
.win::after { content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 var(--paper),inset 0 0 0 1px color-mix(in srgb,var(--paper) 55%,transparent) }
.win-bar { height:44px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 16px;background:linear-gradient(180deg,var(--paper),color-mix(in srgb,var(--bg-panel-2) 35%,var(--bg-panel)));border-bottom:1px solid color-mix(in srgb,var(--border) 70%,transparent) }
.lights { display:flex;gap:7px }
.lights span { width:11px;height:11px;border-radius:var(--r-round);display:block;box-shadow:inset 0 -1px 0 color-mix(in srgb,var(--text) 14%,transparent) }
.lights span:nth-child(1) { background:var(--tl-red) }
.lights span:nth-child(2) { background:var(--tl-amber) }
.lights span:nth-child(3) { background:var(--tl-green) }
.win-title { display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;white-space:nowrap }
.win-title img { width:18px;height:18px }
.win-body { display:grid;grid-template-columns:172px minmax(0,1fr);height:calc(100% - 44px) }
.side { padding:14px 10px;background:linear-gradient(180deg,color-mix(in srgb,var(--bg-panel-2) 55%,var(--bg-panel)),color-mix(in srgb,var(--bg-panel-2) 25%,var(--bg-panel)));border-right:1px solid color-mix(in srgb,var(--border) 60%,transparent) }
.side-label,.main-kicker { margin:0 0 8px;padding:0 8px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.08em;color:var(--text-muted) }
.regions { list-style:none;margin:0;padding:0;display:grid;gap:3px }
.regions li { display:flex;align-items:center;gap:9px;min-height:36px;padding:0 8px 0 10px;border-radius:var(--r-sm);font-size:13px;font-weight:600;white-space:nowrap }
.regions .is-on { color:var(--accent-dark);font-weight:700;background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 18%,var(--paper)),color-mix(in srgb,var(--accent) 6%,var(--paper)));box-shadow:inset 3px 0 0 var(--accent),0 8px 16px -10px color-mix(in srgb,var(--accent) 60%,transparent) }
.flag-s { width:22px;height:15px;display:block;flex-shrink:0;border-radius:var(--r-xs);overflow:hidden }
.on-tag { margin-left:auto;padding:2px 6px;border-radius:var(--r-pill);background:var(--accent-dark);color:var(--paper);font-size:10px;font-weight:700 }
.main { display:flex;flex-direction:column;gap:12px;padding:16px 16px 14px;min-width:0 }
.main-head { display:flex;align-items:center;justify-content:space-between;gap:8px }
.main-title { margin:0;font-size:14px;font-weight:800 }
.mini-chip { padding:3px 8px;border-radius:var(--r-pill);font-family:var(--font-mono);font-size:10.5px;color:var(--text-muted);background:color-mix(in srgb,var(--bg-panel-2) 70%,var(--paper)) }
.rules { list-style:none;margin:0;padding:0;display:grid;gap:8px }
.rule { display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:10px;min-height:48px;padding:6px 10px;border-radius:var(--r-md);background:var(--paper);border:1px solid color-mix(in srgb,var(--border) 55%,transparent);box-shadow:0 8px 16px -12px color-mix(in srgb,var(--accent) 40%,transparent) }
.rule.is-hit { border-color:color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 12%,transparent),0 10px 18px -12px color-mix(in srgb,var(--accent) 60%,transparent) }
.cat { width:32px;height:32px;border-radius:var(--r-sm);display:grid;place-items:center;font-family:var(--font-mono);font-size:10.5px;font-weight:700;color:var(--text-muted);background:color-mix(in srgb,var(--bg-panel-2) 70%,var(--paper)) }
.rule.is-hit .cat { background:color-mix(in srgb,var(--accent) 16%,var(--paper));color:var(--accent-dark) }
.app { display:flex;flex-direction:column;min-width:0;line-height:1.25 }
.app b { font-size:13px;font-weight:700;white-space:nowrap }
.app small { font-size:11px;color:var(--text-muted) }
.dest { display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;white-space:nowrap }
.lt { padding:3px 8px;border-radius:var(--r-pill);font-size:10.5px;font-weight:700;white-space:nowrap }
.lt-iepl { background:color-mix(in srgb,var(--accent) 15%,var(--paper));color:var(--accent-dark) }
.lt-relay { background:color-mix(in srgb,var(--accent-blue) 15%,var(--paper));color:var(--accent-dark) }
.lt-direct { background:color-mix(in srgb,var(--text-muted) 14%,var(--paper));color:var(--text-muted) }
.toggles { display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:auto }
.tg { display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:50px;padding:6px 12px;border-radius:var(--r-md);background:linear-gradient(180deg,var(--paper),color-mix(in srgb,var(--accent) 5%,var(--paper)));border:1px solid color-mix(in srgb,var(--accent) 22%,var(--border)) }
.tg-text { display:flex;flex-direction:column;line-height:1.25;min-width:0 }
.tg-text b { font-size:12.5px;font-weight:700;white-space:nowrap }
.tg-text small { font-size:11px;font-weight:600;color:var(--accent-dark) }
.sw { position:relative;flex-shrink:0;width:34px;height:20px;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--accent),var(--accent-blue));box-shadow:inset 0 1px 2px color-mix(in srgb,var(--accent-dark) 22%,transparent) }
.sw::after { content:"";position:absolute;top:2px;right:2px;width:16px;height:16px;border-radius:var(--r-round);background:var(--paper) }
.ride { position:absolute;top:-22px;left:18px;width:44px;height:44px;border-radius:var(--r-round);display:grid;place-items:center;color:var(--paper);font-family:var(--font-mono);font-weight:700;font-size:20px }
.ride svg { width:22px;height:22px }
.ride-coral { background:linear-gradient(140deg,var(--coral),var(--coral-ink));box-shadow:var(--shadow-coral),var(--hl-edge) }
.ride-mint { background:linear-gradient(140deg,var(--accent),var(--accent-dark));box-shadow:var(--shadow-soft),var(--hl-edge) }
.ride-violet { background:linear-gradient(140deg,var(--violet),var(--violet-ink));box-shadow:var(--shadow-violet),var(--hl-edge) }
.cover { position:absolute;right:-8px;top:6px;width:200px;z-index:4;padding:30px 16px 16px;border-radius:var(--r-lg);background:var(--paper);border:1px solid color-mix(in srgb,var(--accent) 18%,var(--border));box-shadow:var(--shadow-soft),var(--hl-edge) }
.card-label { margin:0;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:var(--text-muted) }
.cover-grid { display:grid;grid-template-columns:1fr 1fr;margin-top:8px }
.cover-grid>div+div { padding-left:14px;border-left:1px solid color-mix(in srgb,var(--border) 80%,transparent) }
.big { display:block;font-family:var(--font-mono);font-size:24px;font-weight:800;letter-spacing:-.03em;line-height:1.1;background:linear-gradient(96deg,var(--accent),var(--accent-blue));-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent }
.big-unit { font-size:12px;font-weight:600;color:var(--text-muted) }
.phone { position:absolute;left:0;top:404px;width:204px;z-index:4;transform:rotate(4deg);padding:30px 16px 16px;border-radius:var(--r-phone);background:linear-gradient(160deg,color-mix(in srgb,var(--paper) 80%,transparent),color-mix(in srgb,var(--bg-panel) 52%,transparent));backdrop-filter:blur(16px) saturate(1.4);-webkit-backdrop-filter:blur(16px) saturate(1.4);border:1px solid color-mix(in srgb,var(--paper) 85%,transparent);box-shadow:var(--shadow-coral),var(--hl-edge) }
.notch { position:absolute;top:10px;left:50%;width:54px;height:6px;margin-left:-27px;border-radius:var(--r-pill);background:color-mix(in srgb,var(--text) 16%,transparent) }
.ph-row { display:flex;align-items:center;justify-content:space-between;gap:8px }
.ph-label { font-size:11.5px;font-weight:600;color:var(--text-muted) }
.grp { padding:2px 8px;border-radius:var(--r-pill);font-size:10.5px;font-weight:700 }
.grp-coral { background:color-mix(in srgb,var(--coral) 15%,var(--paper));color:var(--coral-ink) }
.ph-price { margin:6px 0 0;font-family:var(--font-mono);font-size:36px;font-weight:800;line-height:1.2;letter-spacing:-.04em }
.ph-price small { font-size:13px;font-weight:500;letter-spacing:0;color:var(--text-muted) }
.ph-traffic { margin:6px 0 12px;font-size:13px;font-weight:700 }
.traffic-track { height:7px;border-radius:var(--r-pill);background:var(--bg-panel-2);overflow:hidden }
.traffic-track::before { content:"";display:block;width:62%;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--coral),var(--violet)) }
.ph-devices { margin:14px 0 0;padding-top:12px;border-top:1px solid var(--border);font-size:12px;display:flex;justify-content:space-between }
.platform-note { position:absolute;right:0;top:512px;z-index:3;width:324px;padding:17px 20px;border:1px solid color-mix(in srgb,var(--violet) 48%,var(--border));border-radius:var(--r-lg);background:color-mix(in srgb,var(--paper) 90%,transparent);box-shadow:var(--shadow-violet),var(--hl-edge) }
.platform-note p { margin:0;font-size:13px;font-weight:600;line-height:1.7 }
.platform-note strong { display:block;color:var(--violet-ink);font-size:14px }
.fact-band { display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;padding:24px 0;border-top:1px solid var(--border);border-bottom:1px solid var(--border);font-family:var(--font-mono);font-weight:700 }
.tabs { margin-bottom:28px }
[role="tablist"] { display:flex;align-items:center;gap:6px;flex-wrap:wrap;width:fit-content;max-width:100%;padding:6px;background:var(--bg-panel-2);border:1px solid var(--border);border-radius:var(--r-pill);box-shadow:var(--hl-edge) }
[role="tab"] { min-height:44px;padding:10px 22px;border:0;border-radius:var(--r-pill);background:transparent;color:var(--text-muted);font-weight:700;white-space:nowrap }
[role="tab"][aria-selected="true"] { color:var(--accent-dark);background:var(--bg-panel);box-shadow:var(--shadow-soft) }
[role="tabpanel"] { min-width:0 }
.toc-tabs { position:sticky;top:var(--toc-offset);z-index:30;display:flex;gap:8px;max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;padding:8px;margin:24px 0 40px;border:1px solid var(--border);border-radius:var(--r-btn);background:var(--bg-panel);box-shadow:var(--shadow-soft);-webkit-overflow-scrolling:touch }
.toc-tabs a { display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-height:44px;padding:8px 16px;border-radius:var(--r-sm);font-size:14px;font-weight:600;text-decoration:none;color:var(--text-muted);white-space:nowrap }
.toc-tabs a:hover,.toc-tabs a.is-current { color:var(--paper);background:var(--accent-dark) }
.toc-tabs.toc-static { position:static }
.faq { border-bottom:1px solid var(--border);background:var(--bg-panel);border-radius:var(--r-md);margin-bottom:12px;box-shadow:var(--hl-edge) }
.faq summary { position:relative;list-style:none;padding:22px 56px 22px 24px;min-height:56px;font-weight:700;cursor:pointer }
.faq summary::-webkit-details-marker { display:none }
.faq summary::after { content:"+";position:absolute;right:24px;top:20px;color:var(--accent-dark);font-family:var(--font-mono);font-size:22px }
.faq[open] summary::after { content:"−" }
.faq-answer { padding:0 24px 24px;color:var(--text-muted) }
.faq-answer p:last-child { margin:0 }
.pricing-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;padding-top:28px }
.plan-card { position:relative;display:flex;flex-direction:column;min-width:0;padding:48px 28px 28px;border:1px solid color-mix(in srgb,var(--accent) 25%,var(--border));border-radius:var(--r-xl);background:var(--bg-panel);box-shadow:var(--shadow-soft),var(--hl-edge) }
.plan-card h3 { color:var(--accent-dark);background:linear-gradient(95deg,var(--accent-dark),var(--accent-blue));-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent }
.plan-card.is-current { border:2px solid var(--accent);background:linear-gradient(170deg,var(--paper),color-mix(in srgb,var(--accent) 7%,var(--bg-panel))) }
.plan-card.plan-coral { border-color:color-mix(in srgb,var(--coral) 45%,var(--border));box-shadow:var(--shadow-coral) }
.plan-card.plan-coral h3 { background:linear-gradient(95deg,var(--coral-ink),var(--violet-ink));-webkit-background-clip:text;background-clip:text }
.plan-card.plan-violet { border-color:color-mix(in srgb,var(--violet) 45%,var(--border));box-shadow:var(--shadow-violet) }
.plan-card.plan-violet h3 { background:linear-gradient(95deg,var(--violet-ink),var(--coral-ink));-webkit-background-clip:text;background-clip:text }
.plan-badge { position:absolute;right:18px;top:14px;padding:4px 10px;border-radius:var(--r-pill);color:var(--accent-dark);background:color-mix(in srgb,var(--accent) 14%,var(--paper));font-size:12px;font-weight:700;max-width:calc(100% - 84px) }
.plan-price { margin:8px 0 20px;font-family:var(--font-mono);font-size:42px;font-weight:800;line-height:1.2;letter-spacing:-.03em }
.plan-price small { font-family:var(--font-body);font-size:14px;font-weight:500;letter-spacing:0;color:var(--text-muted) }
.plan-list { list-style:none;margin:0 0 28px;padding:0;color:var(--text-muted) }
.plan-list li { padding:8px 0;border-bottom:1px solid var(--border) }
.plan-card .btn { margin-top:auto;width:100%;white-space:normal }
.badge,.tag { display:inline-flex;align-items:center;gap:6px;max-width:100%;padding:4px 10px;border-radius:var(--r-pill);font-size:12px;line-height:1.5;font-weight:700;background:var(--bg-panel-2);color:var(--text-muted);overflow-wrap:anywhere;white-space:normal }
.badge-mint { color:var(--accent-dark);background:color-mix(in srgb,var(--accent) 12%,var(--paper)) }
.badge-coral { color:var(--coral-ink);background:color-mix(in srgb,var(--coral) 12%,var(--paper)) }
.badge-violet { color:var(--violet-ink);background:color-mix(in srgb,var(--violet) 12%,var(--paper)) }
.badge-success { color:var(--accent-dark);background:color-mix(in srgb,var(--success) 12%,var(--paper)) }
.badge-warn { color:var(--text);background:color-mix(in srgb,var(--warn) 18%,var(--paper)) }
.badge-error { color:var(--text);background:color-mix(in srgb,var(--error) 16%,var(--paper)) }
.table-scroll { width:100%;max-width:100%;min-width:0;overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:var(--r-lg);background:var(--bg-panel);box-shadow:var(--hl-edge) }
.data-table,.route-table { width:100%;min-width:680px;font-size:14px }
.data-table caption,.route-table caption { padding:18px 20px;text-align:left;font-weight:700;color:var(--text) }
.data-table th,.route-table th,.table-scroll th { color:var(--text);font-weight:700;background:var(--bg-panel-2);white-space:nowrap }
.data-table :is(th,td),.route-table :is(th,td) { padding:16px 20px;border-bottom:1px solid var(--border);word-break:keep-all }
.data-table td:first-child,.route-table td:first-child { color:var(--text);font-weight:600 }
.route-group th { background:color-mix(in srgb,var(--accent) 10%,var(--bg-panel));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-radius:var(--r-xl);border:1px solid var(--border);background:var(--bg-panel);box-shadow:var(--shadow-soft),var(--hl-edge) }
.platform-card .pf-ico { width:28px;height:28px;color:var(--accent-dark) }
.platform-card h3 { font-size:18px;margin:0 }
.platform-card .btn { margin-top:auto;padding-inline:12px;font-size:13px;max-width:100%;white-space:normal }
.article-grid { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px }
.article-card { display:flex;flex-direction:column;gap:16px;padding:28px;background:var(--bg-panel);border-radius:var(--r-xl);border:1px solid var(--border);box-shadow:var(--shadow-soft),var(--hl-edge);min-width:0 }
.article-meta { display:flex;align-items:center;flex-wrap:wrap;gap:12px;color:var(--text-muted);font-family:var(--font-mono);font-size:12px }
.article-card h3 { margin:0;font-size:22px;line-height:1.45 }
.article-card h3 a { color:var(--text);text-decoration:none }
.article-card p { color:var(--text-muted);margin:0 }
.article-card .detail-link { margin-top:auto }
.detail-link { display:inline-flex;align-items:center;gap:8px;min-height:32px;color:var(--accent-dark);font-weight:700;text-decoration:none }
.detail-link.link-coral { color:var(--coral-ink) }
.detail-link.link-violet { color:var(--violet-ink) }
.callout { margin:24px 0;padding:24px 28px;border-left:4px solid var(--accent);border-radius:var(--r-md);background:color-mix(in srgb,var(--accent) 8%,var(--bg-panel));color:var(--text) }
.callout p:last-child { margin:0 }
.callout-warn { border-color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,var(--bg-panel)) }
.promo-block { display:flex;align-items:center;justify-content:space-between;gap:28px;margin-top:48px;padding:32px;border-radius:var(--r-xl);background:linear-gradient(125deg,var(--bg-panel),color-mix(in srgb,var(--accent) 15%,var(--bg-panel)));border:1px solid color-mix(in srgb,var(--accent) 30%,var(--border));box-shadow:var(--shadow-soft),var(--hl-edge) }
.promo-copy { min-width:0 }
.promo-copy strong { font-size:22px;font-weight:900 }
.promo-copy p { margin:8px 0 0;color:var(--text-muted) }
.promo-block .btn { flex-shrink:0;white-space:nowrap }
.feature-stage { position:relative;overflow-x:clip;background:linear-gradient(180deg,var(--bg) 0 120px,var(--bg-panel-2) 120px);padding-top:40px;padding-bottom:80px }
.feature-board { padding:48px 32px 32px;border-radius:var(--r-board);background:linear-gradient(135deg,var(--violet-ink),var(--violet) 46%,var(--coral-ink));box-shadow:var(--shadow-violet),var(--hl-edge) }
.feature-board-head { text-align:center;color:var(--paper);margin-bottom:36px }
.feature-board-head .eyebrow { color:var(--paper) }
.feature-board-head h2 { margin-top:16px;color:var(--paper) }
.feature-grid { display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px }
.feature-card { grid-column:span 3;display:flex;flex-direction:column;gap:16px;padding:20px;border-radius:var(--r-xl);background:color-mix(in srgb,var(--paper) 94%,transparent);border:1px solid color-mix(in srgb,var(--paper) 70%,transparent);box-shadow:var(--hl-edge);min-width:0 }
.feature-card.feature-wide { grid-column:span 7 }
.feature-card.feature-medium { grid-column:span 5 }
.feature-card h3 { margin:0;font-size:21px }
.feature-card p { font-size:14px;color:var(--text-muted);margin:0 }
.feature-card .detail-link { margin-top:auto }
.mini-ui { padding:16px;border-radius:var(--r-md);background:var(--bg-panel-2);border:1px solid var(--border);overflow:hidden;min-width:0 }
.mini-row { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 10px;margin-bottom:6px;border-radius:var(--r-xs);background:var(--bg-panel);font-size:12px;color:var(--text);overflow-wrap:anywhere }
.mini-row:last-child { margin:0 }
.mini-row span { min-width:0 }
.mini-row b { color:var(--accent-dark);font-size:11px }
.draw-diagram { width:100%;height:64px;display:block;color:var(--accent) }
.preview-section { padding-top:64px;padding-bottom:64px }
.swatch-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px }
.swatch { padding:10px;background:var(--bg-panel);border:1px solid var(--border);border-radius:var(--r-md);font-family:var(--font-mono);font-size:12px;overflow-wrap:anywhere }
.swatch-color { height:64px;border-radius:var(--r-sm);margin-bottom:10px;border:1px solid var(--border) }
.swatch-color[data-token="bg"] { background:var(--bg) }
.swatch-color[data-token="bg-panel"] { background:var(--bg-panel) }
.swatch-color[data-token="bg-panel-2"] { background:var(--bg-panel-2) }
.swatch-color[data-token="border"] { background:var(--border) }
.swatch-color[data-token="accent"] { background:var(--accent) }
.swatch-color[data-token="accent-dark"] { background:var(--accent-dark) }
.swatch-color[data-token="accent-blue"] { background:var(--accent-blue) }
.swatch-color[data-token="coral"] { background:var(--coral) }
.swatch-color[data-token="coral-ink"] { background:var(--coral-ink) }
.swatch-color[data-token="violet"] { background:var(--violet) }
.swatch-color[data-token="violet-ink"] { background:var(--violet-ink) }
.swatch-color[data-token="text"] { background:var(--text) }
.swatch-color[data-token="text-muted"] { background:var(--text-muted) }
.swatch-color[data-token="success"] { background:var(--success) }
.swatch-color[data-token="warn"] { background:var(--warn) }
.swatch-color[data-token="error"] { background:var(--error) }
.swatch-color[data-token="paper"] { background:var(--paper) }
.swatch-color[data-token="hero-top"] { background:var(--hero-top) }
.swatch-color[data-token="hero-bottom"] { background:var(--hero-bottom) }
.swatch-color[data-token="tl-red"] { background:var(--tl-red) }
.swatch-color[data-token="tl-amber"] { background:var(--tl-amber) }
.swatch-color[data-token="tl-green"] { background:var(--tl-green) }
.swatch-color[data-token="flag-red"] { background:var(--flag-red) }
.swatch-color[data-token="flag-white"] { background:var(--flag-white) }
.swatch-color[data-token="flag-navy"] { background:var(--flag-navy) }
.swatch-color[data-token="flag-black"] { background:var(--flag-black) }
.swatch-color[data-token="flag-gold"] { background:var(--flag-gold) }
.swatch-color[data-token="mask"] { background:var(--mask) }
.type-samples { display:grid;gap:24px }
.type-samples p { margin:0 }
.type-display { font-family:var(--font-display);font-size:52px;font-weight:900;line-height:1.15;letter-spacing:-.02em }
.type-heading { font-family:var(--font-display);font-size:var(--text-h2);font-weight:900 }
.button-samples { display:flex;align-items:center;flex-wrap:wrap;gap:16px }
@media (max-width:1190px) {
  .hero-grid { gap:24px;grid-template-columns:minmax(0,1fr) minmax(0,1fr) }
  .hero h1 { font-size:56px }
  .rig { height:570px }
  .win-wrap { left:0;width:520px }
  .cover { right:0 }
  .phone { top:390px }
  .platform-note { top:508px;width:260px }
  .trust { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .platform-grid { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .feature-card { grid-column:span 6 }
}
@media (max-width:960px) {
  .hero-grid { grid-template-columns:1fr }
  .copy { max-width:680px }
  .rig { width:620px;max-width:100%;margin:24px auto 0;height:636px }
  .win-wrap { left:32px;width:560px }
  .cover { right:0 }
  .platform-note { width:324px }
  .pricing-grid,.article-grid { grid-template-columns:1fr }
}
@media (max-width:768px) {
  .hero { padding-top:36px;padding-bottom:40px }
  .hero h1 { font-size:40px;line-height:1.15;letter-spacing:-.02em }
  .feature-card.feature-wide,.feature-card.feature-medium { grid-column:span 12 }
  .promo-block { align-items:flex-start;flex-direction:column }
}
@media (max-width:640px) {
  .ann-pill { gap:8px;padding-left:12px;font-size:11px;max-width:100% }
  .ann-link { font-size:11px;padding-inline:8px }
  .ann-dot { display:none }
  .hero-grid { gap:20px }
  .kicker { font-size:11px;gap:6px;padding-right:10px }
  .hero h1 { font-size:38px }
  .cta-row { margin-top:24px;gap:10px }
  .btn { min-height:50px;padding:12px 20px;font-size:15px }
  .lead { font-size:16px;margin-top:24px }
  .trust { gap:10px 12px }
  .trust li { font-size:12px }
  .fixtures { margin-top:24px }
  .fx-row { grid-template-columns:50px minmax(0,1fr);gap:8px }
  .fx-items { gap:8px 12px }
  .fx-items li { font-size:11px;gap:5px }
  .pf-ico { width:16px;height:16px }
  .flag { width:21px;height:14px }
  .rig { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 12px;width:100%;height:auto;margin-top:12px;padding-top:22px }
  .glow { inset:0;max-width:100% }
  .cloud { inset:0 0 45% 35%;max-width:100% }
  .win-wrap { position:relative;left:auto;top:auto;width:100%;height:auto;min-width:0;grid-column:1/-1;transform:none }
  .win { height:auto }
  .win-bar { padding-inline:10px }
  .win-title { font-size:10px;gap:5px }
  .lights { gap:4px }
  .lights span { width:8px;height:8px }
  .win-body { grid-template-columns:100px minmax(0,1fr);height:auto }
  .side { padding:12px 5px }
  .side-label { font-size:9px;padding:0 4px }
  .regions li { white-space:normal;gap:5px;padding:6px 4px;font-size:10px;line-height:1.35 }
  .regions .flag-s { width:17px;height:12px }
  .on-tag { display:none }
  .main { padding:12px 8px;gap:10px }
  .main-title { font-size:12px }
  .mini-chip { font-size:9px;padding:3px 5px }
  .rule { grid-template-columns:minmax(0,1fr) auto;gap:5px;padding:8px 6px;min-height:49px }
  .cat { display:none }
  .app b { font-size:11px }
  .app small { font-size:10px }
  .lt { font-size:9px;padding:3px 5px }
  .toggles { grid-template-columns:1fr }
  .tg { padding:8px;min-height:42px }
  .tg-text b { font-size:11px }
  .tg-text small { font-size:10px }
  .sw { width:28px;height:18px }
  .sw::after { width:14px;height:14px }
  .cover,.phone,.platform-note { position:relative;left:auto;right:auto;top:auto;transform:none;width:100%;max-width:100%;min-width:0;margin:0 }
  .cover { padding:26px 12px 16px;grid-column:2;grid-row:2;align-self:start }
  .phone { padding:30px 12px 16px;grid-column:1;grid-row:2/4;border-radius:var(--r-xl) }
  .platform-note { padding:14px 12px;grid-column:2;grid-row:3 }
  .platform-note p { font-size:10px;overflow-wrap:anywhere }
  .platform-note strong { font-size:12px }
  .big { font-size:19px }
  .big-unit { font-size:10px }
  .cover-grid>div+div { padding-left:8px }
  .card-label { font-size:9px }
  .ride { width:36px;height:36px;top:-18px;left:12px;font-size:17px }
  .ride svg { width:18px;height:18px }
  .ph-price { font-size:30px }
  .ph-devices { flex-wrap:wrap;gap:4px;font-size:11px }
  .ph-row { gap:4px }
  .ph-label { font-size:10px }
  .grp { font-size:9px;padding-inline:5px }
  .feature-board { padding:32px 16px 16px }
  .feature-card { grid-column:1/-1 }
  .feature-stage { padding-bottom:56px }
  .platform-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .platform-card { padding:20px 16px }
  .plan-card { padding-inline:22px }
  .promo-block { padding:24px }
  .type-display { font-size:36px }
  .table-scroll { max-width:100% }
  .toc-tabs { border-radius:var(--r-md) }
}
@media (max-width:350px) {
  .hero h1 { font-size:34px }
  .btn { padding-inline:16px }
  .trust { grid-template-columns:1fr }
  .ann-link { display:none }
}