.hero { position:relative;z-index:1;overflow-x:clip;max-width:100%;padding:38px 32px 42px }
.hero::before { content:"";position:absolute;inset:auto 14% 0 14%;height:58%;background:radial-gradient(closest-side,var(--accent-glow),var(--accent-glow-none));pointer-events:none;z-index:0 }
.hero__inner { position:relative;z-index:1;width:100%;max-width:1200px;margin:0 auto;display:flex;flex-direction:column;align-items:center;text-align:center }
.kicker { font-size:13px;line-height:20px;letter-spacing:.2em;color:var(--text-muted);margin-bottom:18px }
.hero__title { font-family:var(--font-display);font-weight:var(--weight-medium);font-size:62px;line-height:1.12;letter-spacing:-.02em;color:var(--text);margin-bottom:28px }
.cta-row { display:flex;justify-content:center;gap:16px;margin-bottom:22px }
.hero__lead { max-width:820px;font-size:17px;line-height:1.6;color:var(--text-muted);margin-bottom:30px }
.hero__lead strong { color:var(--text);font-weight:var(--weight-strong) }
.facts { display:flex;justify-content:center;gap:96px;margin-bottom:24px }
.fact { display:flex;flex-direction:column;align-items:center;gap:8px;min-width:150px }
.fact__num { font-family:var(--font-display);font-weight:var(--weight-medium);font-size:42px;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;color:var(--accent) }
.fact__unit { font-size:26px;margin-left:4px;letter-spacing:0 }
.fact__label { font-size:14px;line-height:20px;color:var(--text-muted) }
.trust { display:flex;justify-content:center;align-items:center;gap:0;margin-bottom:38px;font-size:13px;line-height:18px;letter-spacing:.14em;color:var(--text-muted) }
.trust__item { display:flex;align-items:center;gap:8px }
.trust__item + .trust__item::before { content:"·";margin:0 18px;color:var(--text-soft);letter-spacing:0 }
.trust__item svg { width:15px;height:15px;display:block;flex-shrink:0 }
.tray { position:relative;width:100%;max-width:880px;padding:26px 40px 28px;border-radius:var(--r-lg);background:linear-gradient(180deg,var(--panel-2) 0%,var(--panel-2-deep) 100%);border:1px solid var(--border);box-shadow:var(--shadow-tray) }
.tray::before { content:"";position:absolute;inset:0 0 auto 0;height:46%;border-radius:var(--r-lg) var(--r-lg) 0 0;background:linear-gradient(180deg,var(--hi-soft),var(--hi-none));pointer-events:none }
.tray > * { position:relative }
.tray__eyebrow { font-size:12px;line-height:16px;letter-spacing:.2em;color:var(--text-muted);margin-bottom:8px }
.tray__title { font-family:var(--font-serif);font-weight:var(--weight-regular);font-size:23px;line-height:26px;letter-spacing:.01em;color:var(--text);margin-bottom:20px }
.seg { display:inline-flex;gap:4px;padding:4px;border-radius:var(--r-md);background:var(--groove);box-shadow:var(--shadow-groove);margin-bottom:22px }
.seg__step { height:32px;display:flex;align-items:center;padding:0 18px;border-radius:var(--r-sm);font-size:14px;color:var(--text-muted);white-space:nowrap }
.seg__step[aria-current="step"] { background:var(--panel);color:var(--text);font-weight:var(--weight-medium);box-shadow:var(--shadow-seg) }
.platforms { display:flex;justify-content:center;gap:14px;margin-bottom:22px }
.platform { width:128px;height:80px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-card);color:var(--text);min-width:0 }
.platform svg { width:26px;height:26px;display:block }
.platform span { font-size:14px;line-height:18px;font-weight:var(--weight-medium) }
.routes { display:flex;justify-content:center;align-items:center;gap:14px }
.routes__label { font-size:12px;letter-spacing:.16em;color:var(--text-muted);white-space:nowrap }
.flags { display:flex;gap:10px;min-width:0 }
.flag { display:flex;align-items:center;gap:8px;height:34px;padding:0 14px 0 9px;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-pill);box-shadow:var(--shadow-card);font-size:14px;white-space:nowrap;flex-shrink:0 }
.flag svg { width:24px;height:16px;display:block;flex-shrink:0;overflow:hidden;border-radius:var(--r-line) }
.f-red { fill:var(--flag-red) }
.f-blue { fill:var(--flag-blue) }
.f-white { fill:var(--flag-white) }
.f-edge { fill:none;stroke:var(--flag-edge);stroke-width:1 }
.s-white { stroke:var(--flag-white);stroke-width:3.4 }
.s-red { stroke:var(--flag-red);stroke-width:1.2 }
.note { position:absolute;display:flex;align-items:flex-start;gap:9px;padding:10px 16px 11px 12px;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-note);text-align:left;z-index:2 }
.note__dot { width:8px;height:8px;margin-top:6px;background:var(--accent);border-radius:var(--r-dot);flex-shrink:0 }
.note__body { display:flex;flex-direction:column }
.note__tag { font-size:11px;line-height:14px;letter-spacing:.16em;color:var(--text-soft) }
.note__text { font-size:15px;line-height:22px;font-weight:var(--weight-strong);color:var(--text) }
.note__sub { font-size:12px;line-height:16px;color:var(--text-muted) }
.note--tl { left:-34px;top:-24px;transform:rotate(-2deg) }
.note--br { right:-34px;bottom:-22px;transform:rotate(2deg) }
.datastrip { position:relative;z-index:1;border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:var(--panel-2) }
.datastrip__inner { max-width:1200px;margin:0 auto;height:48px;display:flex;justify-content:center;align-items:center;gap:32px;font-family:var(--font-mono);font-size:13px;letter-spacing:.04em;color:var(--text-muted) }
.datastrip__item { display:flex;align-items:center;gap:10px }
.datastrip__item::before { content:"";width:6px;height:6px;background:var(--accent);border-radius:var(--r-dot);flex-shrink:0 }
.tab-set { min-width:0 }
.tab-controls,[role="tablist"] { display:flex;align-items:center;gap:4px;max-width:100%;overflow-x:auto;padding:5px;border:1px solid var(--border);border-radius:var(--r-md);background:var(--groove);box-shadow:var(--shadow-groove);margin-bottom:24px }
[role="tab"] { flex-shrink:0;min-height:44px;padding:8px 20px;border:1px solid var(--hi-none);border-radius:var(--r-sm);background:var(--hi-none);color:var(--text-muted);white-space:nowrap }
[role="tab"][aria-selected="true"] { color:var(--text);background:var(--panel);border-color:var(--border);box-shadow:var(--shadow-seg) }
[role="tabpanel"] { padding-block:8px }
.toc-tabs { position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:6px;min-height:var(--toc-height);overflow-x:auto;max-width:100%;padding:8px;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-card);margin-bottom:32px;overscroll-behavior-x:contain }
.toc-tabs a { flex-shrink:0;display:inline-flex;align-items:center;min-height:44px;padding:8px 16px;white-space:nowrap;border-radius:var(--r-sm);color:var(--text-muted) }
.toc-tabs a.is-current { color:var(--accent-dark);background:var(--panel-2);box-shadow:inset 0 -2px 0 var(--accent) }
.toc-tabs.toc-static { position:static }
body:has(.toc-tabs) section[id] { scroll-margin-top:var(--anchor-offset) }
.faq-item { padding:0 24px;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-card) }
.faq-item + .faq-item { margin-top:12px }
.faq-item summary { cursor:pointer;position:relative;padding:20px 28px 20px 0;list-style:none;font-weight:var(--weight-medium);min-height:60px }
.faq-item summary::-webkit-details-marker { display:none }
.faq-item summary::after { content:"+";position:absolute;right:0;top:18px;color:var(--accent-dark);font-size:22px }
.faq-item[open] summary::after { content:"−" }
.faq-item > p,.faq-answer { padding-bottom:24px;color:var(--text-muted) }
.faq-answer p + p { margin-top:16px }
.badge,.tag { display:inline-block;vertical-align:middle;padding:4px 10px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid var(--border);border-radius:var(--r-pill);background:var(--panel-2);font-size:var(--size-caption);color:var(--text) }
.badge--accent { background:var(--accent);color:var(--on-accent);border-color:var(--accent) }
.badge--success { color:var(--success) }
.badge--warn { color:var(--warn) }
.badge--error { color:var(--error) }
.plan-card { position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:20px;padding:28px;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-card);min-width:0 }
.plan-card.is-current { border-color:var(--accent);box-shadow:var(--shadow-note) }
.plan-card__head { width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap }
.plan-card h3 { font-size:24px }
.plan-card__price { font:var(--weight-medium) 42px/1.1 var(--font-display);font-variant-numeric:tabular-nums;color:var(--accent) }
.plan-card__price small { font:var(--weight-regular) var(--size-small)/1.6 var(--font-body);color:var(--text-muted) }
.plan-card__features { display:grid;gap:12px;color:var(--text-muted);font-size:var(--size-small) }
.plan-card__features li::before { content:"";display:inline-block;width:8px;height:8px;margin-right:10px;background:var(--accent);border-radius:var(--r-dot) }
.plan-card .btn { margin-top:auto;width:100% }
.table-scroll { overflow-x:auto;max-width:100%;min-width:0;-webkit-overflow-scrolling:touch;border:1px solid var(--border);border-radius:var(--r-md);background:var(--panel);box-shadow:var(--shadow-card) }
.data-table,.line-table { width:100%;min-width:660px;border-collapse:collapse;text-align:left;font-size:var(--size-small) }
.data-table th,.data-table td,.line-table th,.line-table td { padding:16px 20px;border-bottom:1px solid var(--border);word-break:keep-all }
.table-scroll th,.data-table th,.line-table th { color:var(--text);background:var(--panel-2);font-weight:var(--weight-strong);white-space:nowrap }
.data-table th:first-child,.data-table td:first-child,.line-table td:first-child { color:var(--text);font-weight:var(--weight-medium) }
.data-table tr:last-child td,.line-table tr:last-child td { border-bottom:0 }
.line-table .region-row th { background:var(--groove);font-family:var(--font-serif);font-size:18px }
.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:center;gap:16px;padding:24px 12px;min-width:0;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-card);text-align:center }
.platform-card svg { width:30px;height:30px;display:block }
.platform-card h3 { font-family:var(--font-body);font-size:var(--size-body);font-weight:var(--weight-medium) }
.platform-card .btn { padding-inline:12px;font-size:var(--size-small);height:40px;max-width:100% }
.article-card { display:flex;flex-direction:column;gap:18px;min-width:0;padding:28px;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-card) }
.article-card__meta { display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;color:var(--text-muted);font-size:var(--size-caption) }
.article-card h3 { font-size:24px }
.article-card h3 a { display:block }
.article-card h3 a:hover { color:var(--accent-dark) }
.article-card p { color:var(--text-muted) }
.article-card > .text-link { margin-top:auto;align-self:flex-start }
.callout { padding:24px;border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--r-sm);background:var(--panel-2);box-shadow:var(--shadow-card);min-width:0 }
.callout p + p { margin-top:12px }
.promo-block { display:flex;align-items:center;justify-content:space-between;gap:28px;padding:32px;background:var(--panel-2);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-note);margin-block:32px }
.promo-block__copy { min-width:0 }
.promo-block h2,.promo-block h3 { font-size:26px;margin-bottom:12px }
.promo-block p { color:var(--text-muted) }
.promo-block .btn { flex-shrink:0;white-space:nowrap }
.feature-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px }
.feature-card { display:flex;flex-direction:column;gap:20px;padding:32px;min-width:0;background:var(--panel-2);border:1px solid var(--border);border-radius:var(--r-md) }
.feature-card::before { content:"";display:block;width:8px;height:8px;background:var(--accent);border-radius:var(--r-dot);flex-shrink:0 }
.feature-card p { color:var(--text-muted) }
.client-scene { position:relative;overflow:hidden;min-width:0;padding:36px 24px;background:radial-gradient(ellipse at 20% 20%,var(--panel),var(--hi-none) 60%),linear-gradient(145deg,var(--panel-2),var(--scene-apricot),var(--scene-sage));border-radius:var(--r-sm);margin-top:auto }
.client-window { position:relative;width:100%;max-width:420px;margin:auto;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-md);box-shadow:var(--shadow-note);overflow:hidden }
.client-window__bar { display:flex;align-items:center;gap:6px;padding:12px 14px;border-bottom:1px solid var(--border);font-size:var(--size-caption);color:var(--text-muted) }
.chrome-dot { display:block;width:8px;height:8px;border-radius:var(--r-pill);background:var(--chrome-red);flex-shrink:0 }
.chrome-dot--yellow { background:var(--chrome-yellow) }
.chrome-dot--green { background:var(--chrome-green) }
.client-window__title { margin-left:8px }
.client-window__body { padding:16px }
.client-row { display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:10px 0;border-bottom:1px solid var(--border);font-size:var(--size-small) }
.client-row:last-child { border-bottom:0 }
.setting-switch { width:30px;height:18px;border-radius:var(--r-pill);background:var(--success);padding:3px;flex-shrink:0 }
.setting-switch::after { content:"";display:block;width:12px;height:12px;border-radius:var(--r-pill);background:var(--panel);margin-left:auto }
.demo-section { border-bottom:1px solid var(--border) }
.demo-title { margin-bottom:28px }
.swatch-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px }
.swatch { min-width:0;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--panel);overflow:hidden }
.swatch__ink { height:64px }
.swatch code { display:block;padding:12px;font-size:var(--size-caption);color:var(--text) }
.swatch--bg .swatch__ink { background:var(--bg) }
.swatch--top .swatch__ink { background:var(--bg-top) }
.swatch--bottom .swatch__ink { background:var(--bg-bottom) }
.swatch--panel .swatch__ink { background:var(--panel) }
.swatch--tray .swatch__ink { background:var(--panel-2) }
.swatch--deep .swatch__ink { background:var(--panel-2-deep) }
.swatch--groove .swatch__ink { background:var(--groove) }
.swatch--border .swatch__ink { background:var(--border) }
.swatch--accent .swatch__ink { background:var(--accent) }
.swatch--dark .swatch__ink { background:var(--accent-dark) }
.swatch--text .swatch__ink { background:var(--text) }
.swatch--muted .swatch__ink { background:var(--text-muted) }
.swatch--soft .swatch__ink { background:var(--text-soft) }
.swatch--success .swatch__ink { background:var(--success) }
.swatch--warn .swatch__ink { background:var(--warn) }
.swatch--error .swatch__ink { background:var(--error) }
.sample-stack { display:grid;gap:24px;min-width:0 }
.type-display { font:var(--weight-medium) var(--size-h1)/1.12 var(--font-display);letter-spacing:-.02em }
.button-samples { display:flex;flex-wrap:wrap;align-items:center;gap:16px }
@media (max-width:960px) {
  .hero { padding:32px 24px 40px }
  .facts { gap:48px }
  .note--tl { left:-10px }
  .note--br { right:-10px }
  .trust { flex-wrap:wrap;row-gap:8px }
  .platform-grid { grid-template-columns:repeat(3,minmax(0,1fr)) }
  .feature-card { padding:24px }
}
@media (max-width:768px) {
  .hero__title { font-size:38px }
  .feature-grid { grid-template-columns:1fr }
  .promo-block { flex-direction:column;align-items:flex-start }
}
@media (max-width:640px) {
  .hero { padding:28px 16px 36px }
  .kicker { font-size:12px;letter-spacing:.14em;margin-bottom:14px }
  .hero__title { font-size:36px;line-height:1.2;margin-bottom:22px }
  .cta-row { width:100%;gap:12px }
  .cta-row .btn { flex:1;padding:0 16px;height:50px;font-size:16px;min-width:0 }
  .hero__lead { font-size:15px;margin-bottom:24px }
  .facts { flex-direction:column;gap:16px;width:100% }
  .fact { flex-direction:row;justify-content:center;gap:12px;min-width:0 }
  .fact__num { font-size:34px }
  .fact__unit { font-size:22px }
  .trust { flex-direction:column;gap:8px;letter-spacing:.08em;margin-bottom:28px }
  .trust__item + .trust__item::before { content:none }
  .tray { padding:16px 14px 18px;display:flex;flex-direction:column;align-items:center }
  .note { position:static;transform:none;width:100% }
  .note--tl { margin-bottom:16px }
  .note--br { margin-top:16px }
  .tray__title { font-size:20px;line-height:26px }
  .seg { max-width:100%;flex-wrap:wrap;justify-content:center }
  .seg__step { height:auto;min-height:32px;max-width:100%;padding:6px 10px;font-size:13px;white-space:normal;overflow-wrap:anywhere;justify-content:center }
  .platforms { display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;width:100% }
  .platform { width:auto;height:76px;grid-column:span 2 }
  .platform:nth-child(4) { grid-column:2 / 4 }
  .platform:nth-child(5) { grid-column:4 / 6 }
  .routes { flex-direction:column;align-items:stretch;gap:10px;width:100% }
  .flags { overflow-x:auto;padding:2px 2px 8px }
  .datastrip__inner { height:auto;padding:12px 16px;flex-wrap:wrap;gap:8px 20px }
  .platform-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .swatch-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
  .client-scene { padding:24px 12px }
  .feature-card,.article-card,.plan-card,.promo-block { padding:24px }
  .faq-item { padding-inline:18px }
  .plan-card__price { font-size:36px }
}