.fact-chips,.fact-row { display:flex; flex-wrap:wrap; align-items:center; gap:8px; list-style:none; padding:0; margin:0; }
.chip,.badge {
  display:inline-flex; align-items:center; gap:8px; max-width:100%; min-height:30px;
  padding:4px 13px; border-radius:var(--r-pill); border:1px solid var(--border);
  background:var(--bg); color:var(--text-muted); font-size:var(--size-small);
  overflow-wrap:anywhere;
}
.chip-lead {
  color:var(--accent-dark); font-weight:var(--weight-medium); border-color:var(--clear);
  background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--grad-select) border-box;
}
.chip-dot { width:6px; height:6px; border-radius:var(--r-dot); background:var(--coral); flex-shrink:0; }
.badge-success { background:var(--bg-panel); color:var(--success-ink); }
.badge-warning { background:var(--bg-panel); color:var(--warn-ink); }
.badge-error { background:var(--bg-panel); color:var(--error-ink); }
.appstore-button { min-height:52px; background:var(--accent); color:var(--on-accent); box-shadow:var(--shadow-btn); }
.appstore-button:hover { background:var(--accent-dark); color:var(--on-accent); }
.appstore-button svg { width:18px; height:22px; flex-shrink:0; fill:currentColor; }
.store-copy { display:flex; flex-direction:column; align-items:flex-start; line-height:1.25; }
.store-copy small { font-size:11px; }
.store-copy strong { font-size:15px; font-weight:var(--weight-medium); }

.hero { position:relative; min-height:792px; background:var(--bg); color:var(--text); }
.hero-copy { position:relative; z-index:2; max-width:540px; padding-top:136px; }
.hero h1 { margin-top:28px; }
.lede { margin-top:24px; font-size:17px; line-height:1.72; color:var(--text-muted); max-width:520px; }
.lede strong { color:var(--text); font-weight:var(--weight-strong); }
.device-row { display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; margin:32px 0 0; padding:0; list-style:none; }
.device-row li,.device-row a { display:inline-flex; align-items:center; gap:7px; font-size:13.5px; color:var(--text-muted); }
.device-row a:hover { color:var(--accent-dark); }
.device-row svg { width:18px; height:18px; flex-shrink:0; fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; color:var(--text); }
.device-row .store-pill { min-height:26px; padding:3px 11px; border-radius:var(--r-pill); background:var(--bg-panel); color:var(--text); border:1px solid var(--border); font-size:12.5px; font-weight:var(--weight-medium); }
.store-pill svg { width:12px; height:12px; fill:currentColor; stroke:none; }
.device-note { margin-top:10px; font-size:12.5px; color:var(--text-muted); }

.rig { position:absolute; z-index:1; left:calc(50% - 50px); top:96px; width:800px; height:600px; }
.rig-glow { position:absolute; left:300px; top:220px; width:620px; height:480px; border-radius:var(--r-dot); background:radial-gradient(closest-side at 40% 45%,var(--glow-a) 0%,var(--glow-b) 55%,var(--clear) 100%); opacity:.16; pointer-events:none; }
.win { position:absolute; background:var(--bg); color:var(--text); border:1px solid var(--border); border-radius:var(--r-float); }
.win-config { left:268px; top:184px; width:520px; z-index:1; box-shadow:var(--shadow-far); }
.config-head { height:52px; display:flex; align-items:center; padding:0 24px 0 96px; border-bottom:1px solid var(--border); font-family:var(--font-mono); font-size:12px; letter-spacing:.02em; color:var(--text-muted); }
.config-head b { font-weight:var(--weight-medium); color:var(--text); }
.config-head i { font-style:normal; color:var(--text-muted); margin-inline:8px; }
.rules { padding:12px 20px 8px; list-style:none; margin:0; }
.rule { position:relative; display:flex; align-items:center; height:46px; border-radius:var(--r-row); }
.rule::before { content:""; position:absolute; inset:0; border-radius:var(--r-row); background:var(--accent-tint); box-shadow:inset 0 0 0 1px var(--accent-tint-strong); opacity:0; }
.rule.r4::before { opacity:1; }
.rule > * { position:relative; }
.ln { width:38px; flex-shrink:0; padding-right:12px; align-self:stretch; display:flex; align-items:center; justify-content:flex-end; border-right:1px solid var(--border); font-family:var(--font-mono); font-size:12px; color:var(--text-muted); }
.rule code { display:flex; align-items:center; padding-left:16px; font-size:13.5px; color:var(--text-muted); white-space:nowrap; overflow-wrap:normal; }
.rule code b { font-weight:var(--weight-medium); color:var(--accent-dark); }
.rule code .v { color:var(--text); }
.pol { display:inline-flex; align-items:center; min-height:22px; margin-left:4px; padding:2px 9px; border-radius:var(--r-pill); font-family:var(--font-mono); font-size:11px; font-weight:var(--weight-medium); letter-spacing:.03em; }
.pol-proxy { background:var(--accent-tint-strong); color:var(--accent-dark); }
.pol-direct { background:var(--bg-panel); color:var(--text-muted); box-shadow:inset 0 0 0 1px var(--border); }
.ruler { margin:6px 20px 0; padding:16px 4px 20px; border-top:1px solid var(--border); }
.ruler-head { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--text-muted); }
.ruler-head span:last-child { font-family:var(--font-mono); font-size:11px; }
.track { position:relative; height:28px; margin-top:14px; display:flex; align-items:flex-end; justify-content:space-between; }
.track::after { content:""; position:absolute; inset-inline:0; bottom:0; height:1px; background:var(--border); }
.tk { position:relative; width:1px; height:10px; background:var(--border-strong); }
.tk.major { width:2px; height:20px; border-radius:var(--r-tick); background:var(--text-faint); }
.tk.final { width:3px; height:28px; background:var(--grad-key); }
.tk.final::before { content:""; position:absolute; inset:-4px -5px; border-radius:var(--r-tick); background:var(--accent-tint-strong); }
.ticks-label { display:flex; justify-content:space-between; margin-top:8px; font-family:var(--font-mono); font-size:10.5px; color:var(--text-muted); }
.ticks-label span:last-child { color:var(--accent-dark); font-weight:var(--weight-medium); }
.win-verify { left:0; top:0; width:340px; z-index:2; padding:14px 12px 12px; background:var(--bg-panel); color:var(--text); box-shadow:var(--shadow-mid); }
.verify-head { display:flex; justify-content:space-between; align-items:baseline; padding:2px 8px 10px; }
.verify-head span:first-child { font-size:13px; font-weight:var(--weight-strong); }
.verify-head span:last-child { font-size:11.5px; color:var(--text-muted); }
.group { background:var(--bg); color:var(--text); border-radius:var(--r-inner); box-shadow:inset 0 0 0 1px var(--border); list-style:none; padding:0; margin:0; }
.group li { position:relative; display:flex; align-items:center; gap:10px; min-height:56px; padding:8px 12px 8px 14px; }
.group li + li::before { content:""; position:absolute; left:14px; right:0; top:0; height:1px; background:var(--border); }
.row-text { flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.3; }
.row-k { font-size:11.5px; color:var(--text-muted); }
.row-v { font-size:13.5px; color:var(--text); overflow-wrap:anywhere; }
.row-v.mono { font-family:var(--font-mono); font-size:13px; }
.ok { width:18px; height:18px; flex-shrink:0; border-radius:var(--r-dot); background:var(--success); color:var(--text); display:grid; place-items:center; font-size:12px; font-weight:var(--weight-strong); }
.chev { flex-shrink:0; color:var(--text-muted); }
.tag { position:absolute; z-index:3; display:inline-flex; align-items:center; gap:8px; height:36px; padding:0 16px; border-radius:var(--r-pill); font-size:13.5px; font-weight:var(--weight-medium); white-space:nowrap; }
.tag-routing { right:40px; top:164px; color:var(--text); border:1px solid var(--clear); background:linear-gradient(var(--bg),var(--bg)) padding-box,var(--grad-select) border-box; box-shadow:var(--shadow-near); }
.tag-routing i { width:7px; height:7px; flex-shrink:0; border-radius:var(--r-dot); background:var(--coral); }
.tag-ondemand { left:212px; top:536px; color:var(--on-accent); background:var(--accent); box-shadow:var(--shadow-accent); }

.capabilities { margin-inline:16px; padding-top:140px; padding-bottom:160px; border-radius:var(--r-section); background:var(--bg-deep); color:var(--text-on-deep); }
.capabilities h2 { margin:48px 0 12px; }
.capabilities > .shell > p { color:var(--text-on-deep-muted); font-size:17px; max-width:620px; }
.seg { display:inline-flex; max-width:100%; flex-wrap:wrap; gap:4px; padding:5px; border-radius:var(--r-pill); background:var(--bg-deep-raise); color:var(--text-on-deep); }
.seg button,.seg span { border:0; padding:9px 20px; border-radius:var(--r-pill); font-size:14px; background:var(--clear); color:var(--text-on-deep-muted); }
.seg [aria-pressed="true"],.seg .is-selected { background:var(--text-on-deep); color:var(--bg-deep); font-weight:var(--weight-medium); }
.feature-layout { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:56px; margin-top:48px; align-items:start; }
[role="tablist"] { display:flex; flex-wrap:wrap; gap:8px; min-width:0; }
[role="tab"] { border:1px solid var(--border); border-radius:var(--r-btn); padding:12px 18px; min-height:48px; text-align:left; background:var(--bg); color:var(--text-muted); }
[role="tab"][aria-selected="true"] { background:var(--accent); color:var(--on-accent); border-color:var(--accent); }
[role="tabpanel"] { min-width:0; }
.feature-tabs[role="tablist"] { flex-direction:column; flex-wrap:nowrap; gap:10px; }
.feature-tabs [role="tab"] { width:100%; padding:22px 24px; border:1px solid var(--clear); border-radius:var(--r-float); background:var(--clear); color:var(--text-on-deep-muted); }
.feature-tabs [role="tab"] strong { display:block; font-size:20px; font-weight:var(--weight-medium); }
.feature-tabs [role="tab"] small { display:block; margin-top:8px; font-size:14px; line-height:1.7; }
.feature-tabs [aria-selected="true"] { background:linear-gradient(var(--bg-deep-raise),var(--bg-deep-raise)) padding-box,var(--grad-select) border-box; color:var(--text-on-deep); }
.feature-tabs [aria-selected="true"] strong::before { content:""; display:inline-block; width:7px; height:7px; margin-right:10px; vertical-align:middle; border-radius:var(--r-dot); background:var(--coral); }
.feature-detail { padding:40px; background:var(--bg); color:var(--text); border-radius:var(--r-float); box-shadow:var(--shadow-far); }
.feature-detail p { margin-top:16px; color:var(--text-muted); }
.feature-detail .fact-row { margin-top:24px; }
.toc { display:flex; flex-wrap:wrap; gap:8px; padding:12px; border:1px solid var(--border); border-radius:var(--r-float); background:var(--bg); color:var(--text); }
.toc a { display:block; padding:10px 14px; min-height:44px; border-radius:var(--r-btn); color:var(--text-muted); }
.toc a:hover,.toc a[aria-current] { background:var(--accent-tint); color:var(--accent-dark); }
.toc-sticky { position:sticky; top:16px; z-index:5; }
.faq-item { border:1px solid var(--border); border-radius:var(--r-float); background:var(--bg); color:var(--text); }
.faq-item + .faq-item { margin-top:12px; }
.faq-item summary { position:relative; cursor:pointer; list-style:none; padding:24px 58px 24px 24px; font-weight:var(--weight-medium); }
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after { content:"+"; position:absolute; right:24px; top:24px; color:var(--accent-dark); }
.faq-item[open] summary::after { content:"−"; }
.faq-answer { padding:0 24px 24px; color:var(--text-muted); }
.term-card { border-top:3px solid var(--accent); }
.term-card dt { font-family:var(--font-mono); font-weight:var(--weight-medium); font-size:18px; }
.term-card dd { margin:16px 0 0; color:var(--text-muted); }
.official-shot { width:100%; max-width:280px; flex-shrink:0; margin-inline:auto; padding:0; }
.official-shot img { display:block; width:100%; height:auto; border-radius:var(--r-shot); }
.official-shot img { outline:1px solid var(--border); outline-offset:-1px; }
.official-shot figcaption { margin-top:12px; color:var(--text-muted); font-size:var(--size-small); line-height:1.6; }
.shot-layout { display:flex; flex-wrap:wrap; align-items:start; gap:48px; }
.shot-layout > :not(.official-shot) { flex:1 1 300px; min-width:0; }
.device-card { display:flex; flex-direction:column; align-items:flex-start; gap:18px; padding:32px; border:1px solid var(--border); border-radius:var(--r-float); background:var(--bg); color:var(--text); box-shadow:var(--shadow-near); }
.device-card > svg { width:48px; height:56px; fill:none; stroke:var(--text); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; flex-shrink:0; }
.device-card p { color:var(--text-muted); }
.device-card .btn { margin-top:auto; }
.article-card { display:flex; flex-direction:column; gap:18px; }
.article-card h3 a { text-decoration:none; }
.article-card h3 a:hover { color:var(--accent-dark); }
.article-card p { color:var(--text-muted); }
.article-meta { font-size:var(--size-small); color:var(--text-muted); }
.callout { margin:24px 0; padding:24px; border-left:3px solid var(--accent); border-radius:var(--r-inner); background:var(--bg-panel); color:var(--text); }
.callout p + p { margin-top:12px; }
.callout-success { border-left-color:var(--success); }
.table-scroll { max-width:100%; min-width:0; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.data-table { width:100%; border-collapse:collapse; text-align:left; }
.data-table th,.data-table td,.prose table th,.prose table td {
  min-width:7em; padding:16px 20px; border-bottom:1px solid var(--border);
  overflow-wrap:normal; word-break:normal; vertical-align:top;
}
.data-table th,.prose table th { background:var(--bg-panel); color:var(--text); font-weight:var(--weight-medium); }
.data-table td,.prose table td { background:var(--bg); color:var(--text); }
.prose table {
  display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%;
  min-width:0; border-collapse:collapse; text-align:left;
}
.prose table code,.data-table code { overflow-wrap:anywhere; }
.dl-fab {
  position:fixed; z-index:20; right:max(20px,env(safe-area-inset-right)); bottom:max(20px,env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:12px; max-width:calc(100% - 40px);
  padding:14px 20px; border-radius:var(--r-float); border:1px solid var(--border);
  background:var(--bg); color:var(--text); box-shadow:var(--shadow-mid);
}
.dl-fab svg { width:22px; height:22px; color:var(--accent); flex-shrink:0; }
.dl-fab strong { display:block; font-size:14px; font-weight:var(--weight-medium); }
.dl-fab small { display:block; color:var(--text-muted); font-size:12px; }
.article-store-card { padding:32px; border-radius:var(--r-float); background:var(--bg-panel); color:var(--text); }
.article-store-card p { margin-top:12px; color:var(--text-muted); }
.article-store-card .btn { margin-top:24px; }
.fab-example { position:static; width:fit-content; margin-top:24px; }

.preview-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:24px; }
.preview-grid > * { min-width:0; }
.preview-stack { display:grid; gap:24px; }
.preview-swatch { display:flex; flex-direction:column; border:1px solid var(--border); border-radius:var(--r-inner); overflow:hidden; background:var(--bg); color:var(--text); }
.preview-swatch::before { content:""; display:block; min-height:72px; background:var(--swatch,var(--bg)); }
.preview-swatch code { padding:12px 16px; font-size:12px; }
.sw-bg { --swatch:var(--bg); }
.sw-panel { --swatch:var(--bg-panel); }
.sw-deep { --swatch:var(--bg-deep); }
.sw-raise { --swatch:var(--bg-deep-raise); }
.sw-border { --swatch:var(--border); }
.sw-border-strong { --swatch:var(--border-strong); }
.sw-accent { --swatch:var(--accent); }
.sw-accent-dark { --swatch:var(--accent-dark); }
.sw-sky { --swatch:var(--sky); }
.sw-coral { --swatch:var(--coral); }
.sw-text { --swatch:var(--text); }
.sw-muted { --swatch:var(--text-muted); }
.sw-faint { --swatch:var(--text-faint); }
.sw-on-deep { --swatch:var(--text-on-deep); }
.sw-on-deep-muted { --swatch:var(--text-on-deep-muted); }
.sw-on-accent { --swatch:var(--on-accent); }
.sw-success { --swatch:var(--success); }
.sw-success-ink { --swatch:var(--success-ink); }
.sw-warn { --swatch:var(--warn); }
.sw-warn-ink { --swatch:var(--warn-ink); }
.sw-error { --swatch:var(--error); }
.sw-error-ink { --swatch:var(--error-ink); }
.sw-tint { --swatch:var(--accent-tint); }
.sw-tint-strong { --swatch:var(--accent-tint-strong); }
.sw-glow-a { --swatch:var(--glow-a); }
.sw-glow-b { --swatch:var(--glow-b); }
.sw-clear { --swatch:var(--clear); }
.sw-veil { --swatch:var(--veil); }
.sw-key { --swatch:var(--grad-key); }
.sw-select { --swatch:var(--grad-select); }
.shot-placeholder {
  display:grid; place-items:center; aspect-ratio:750 / 1334; width:100%;
  padding:24px; border-radius:var(--r-shot); border:1px solid var(--border);
  background:var(--bg-panel); color:var(--text-muted); text-align:center;
}
.preview-typography > * + * { margin-top:24px; }
.preview-footnote { margin-top:24px; color:var(--text-muted); font-size:var(--size-small); }

@media (max-width:1180px) {
  .hero { min-height:0; padding-bottom:80px; }
  .hero-copy { padding-top:72px; max-width:600px; }
  .rig { position:relative; left:auto; top:auto; margin:56px auto 0; transform-origin:top center; }
}
@media (max-width:860px) {
  .rig { transform:scale(.72); margin-bottom:-168px; }
  .feature-layout { grid-template-columns:minmax(0,1fr); gap:32px; }
  .preview-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:640px) {
  .hero-copy { padding-top:48px; }
  .lede { font-size:15.5px; }
  .hero h1 { font-size:var(--size-h1); }
  .hero .cta-row { margin-top:24px; gap:10px; }
  .hero .btn { padding-inline:18px; font-size:14px; }
  .device-row { gap:10px 18px; margin-top:24px; }
  .rig { transform:scale(.44); margin:32px 0 -336px; transform-origin:top left; }
  .capabilities { margin-inline:0; padding-top:80px; padding-bottom:80px; }
  .seg button,.seg span { padding:9px 12px; font-size:12px; }
  .feature-detail { padding:24px; }
  .preview-grid { grid-template-columns:minmax(0,1fr); }
  .shot-layout { flex-direction:column; align-items:stretch; }
  .shot-layout > :not(.official-shot) { flex:auto; }
  .official-shot { align-self:center; }
  .device-card { padding:24px; }
  .dl-fab { right:16px; bottom:max(16px,env(safe-area-inset-bottom)); max-width:calc(100% - 32px); }
}
@media (max-width:380px) {
  .rig { transform:scale(.35); margin-bottom:-390px; }
}