.hero {position:relative;max-width:100%;overflow-x:clip;background:var(--halo);padding-top:var(--s6);padding-bottom:var(--s6)}
.hero-copy {position:relative;text-align:center}
.eyebrow {display:inline-flex;align-items:center;gap:var(--s2);min-height:var(--s6);font-size:var(--fs-small);color:var(--accent-dark);font-weight:var(--bold);letter-spacing:var(--tracking-label)}
.eyebrow svg {width:var(--s4);height:var(--s4)}
.hero-actions {display:flex;justify-content:center;gap:var(--s3)}
.hero-description {margin:var(--s4) 0 var(--s2);font-size:var(--fs-body);line-height:var(--lh);color:var(--muted)}
.hero-description strong {font-weight:var(--bold);color:var(--text)}
.trust {display:flex;justify-content:center;gap:var(--s6);font-size:var(--fs-label);color:var(--muted);line-height:var(--lh)}
.trust span {display:inline-flex;align-items:center;gap:var(--s2)}
.trust svg {width:var(--s4);height:var(--s4);color:var(--success)}
.device-stage {position:relative;margin:var(--s6) auto 0;min-height:var(--device-height);display:flex;justify-content:center;align-items:center}
.cradle {width:var(--device-width);max-width:100%;min-height:var(--device-height);padding:var(--s5) 0 var(--s6) var(--s6);border-radius:var(--r-device);background:var(--cradle);box-shadow:var(--shadow-cradle);position:relative;left:calc(-1 * var(--s3))}
.directory {width:calc(100% + var(--s3));background:var(--ink);border:var(--hairline) solid var(--ink-border);border-radius:var(--r-medium);color:var(--white);box-shadow:var(--shadow-window);overflow:hidden;line-height:normal}
.chrome {min-height:var(--s10);padding:0 var(--s5);display:flex;align-items:center;justify-content:space-between;border-bottom:var(--hairline) solid var(--ink-border);background:var(--ink-panel);font-size:var(--fs-small)}
.chrome-left {display:flex;align-items:center;gap:var(--s3)}
.window-dots {display:flex;gap:var(--s1)}
.window-dots i {display:block;width:var(--dot);height:var(--dot);border-radius:var(--r-pill);background:var(--ink-muted);opacity:var(--disabled-opacity)}
.window-dots i:first-child {background:var(--lilac);opacity:1}
.chrome-label {color:var(--ink-muted);font-family:var(--mono);font-size:var(--fs-tiny)}
.directory-body {padding:var(--s4) var(--s5) var(--s3)}
.guide-entry {display:flex;align-items:center;gap:var(--s3);padding:var(--s3) var(--s4);background:var(--ink-raised);border:var(--hairline) solid var(--ink-border);border-radius:var(--r-small);font-size:var(--fs-ui)}
.guide-entry svg {color:var(--cyan)}
.guide-entry strong {font-weight:var(--bold)}
.guide-topics {color:var(--ink-muted);font-size:var(--fs-small);margin-left:var(--s2)}
.guide-arrow {margin-left:auto;color:var(--cyan);font-size:var(--fs-body)}
.guide-entry:hover {background:var(--ink-border)}
.region-heading {display:flex;justify-content:space-between;align-items:center;margin:var(--s4) 0 var(--s2);font-size:var(--fs-label)}
.coverage {display:flex;gap:var(--s3);font-size:var(--fs-small);color:var(--ink-muted)}
.coverage b {color:var(--cyan);font-family:var(--mono);font-weight:var(--medium)}
.regions {display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s2);padding:0;margin:0;list-style:none}
.regions a {display:flex;align-items:center;justify-content:center;gap:var(--s2);min-height:var(--s12);font-size:var(--fs-label);border:var(--hairline) solid var(--ink-border);border-radius:var(--r-small);background:var(--ink-panel)}
.regions a:hover {background:var(--ink-raised)}
.flag {width:var(--flag-width);height:var(--flag-height);border-radius:var(--r-flag);overflow:hidden;box-shadow:0 0 0 var(--hairline) color-mix(in srgb,var(--white) 10%,var(--clear))}
.flag-white {fill:var(--flag-white)}
.flag-red {fill:var(--flag-red)}
.flag-blue {fill:var(--flag-blue)}
.billing {display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);margin-top:var(--s4)}
.billing-card {display:grid;grid-template-columns:1fr auto;align-items:center;column-gap:var(--s3);row-gap:var(--s1);padding:var(--s3) var(--s4);border:var(--hairline) solid var(--ink-border);border-radius:var(--r-small);background:linear-gradient(120deg,var(--ink-raised),var(--ink-panel));font-size:var(--fs-ui)}
.billing-card .price {font-family:var(--mono);font-size:var(--fs-price);letter-spacing:var(--tracking)}
.billing-card .price small {font-family:var(--body);font-size:var(--fs-small);font-weight:var(--regular);color:var(--ink-muted);letter-spacing:normal}
.billing-card p {margin:0;color:var(--ink-muted);font-size:var(--fs-small)}
.billing-link {font-size:var(--fs-small);color:var(--cyan);text-align:right;min-height:var(--s6);display:inline-flex;align-items:center;justify-content:flex-end}
.directory-foot {display:flex;justify-content:space-between;gap:var(--s3);margin-top:var(--s3);font-size:var(--fs-tiny);color:var(--ink-muted)}
.directory-foot a {color:var(--cyan);min-height:var(--s6);display:inline-flex;align-items:center}
.side-note {position:absolute;width:var(--button-width);padding:var(--s4);border:var(--hairline) solid color-mix(in srgb,var(--panel) 85%,var(--border));border-radius:var(--r-medium);background:color-mix(in srgb,var(--panel) 92%,var(--clear));box-shadow:var(--shadow-card);backdrop-filter:blur(var(--s3))}
.side-note svg {color:var(--accent);width:var(--s6);height:var(--s6);margin-bottom:var(--s3)}
.side-note p {font-size:var(--fs-small);color:var(--muted);margin:0 0 var(--s1)}
.side-note strong {font-size:var(--fs-body);font-weight:var(--bold)}
.note-devices {left:0;top:var(--s16)}
.note-traffic {right:0;bottom:var(--s12);background:color-mix(in srgb,var(--panel) 92%,var(--cyan))}
.platform-band {display:flex;justify-content:center;align-items:center;gap:var(--s8);margin:var(--s6) auto 0}
.platform-caption {font-size:var(--fs-small);color:var(--muted);line-height:var(--lh);text-align:right}
.platform-caption a {color:var(--accent-dark);font-weight:var(--bold)}
.platforms {display:grid;grid-template-columns:repeat(5,var(--platform-width));gap:var(--s4);list-style:none;margin:0;padding:0}
.platforms a {display:flex;flex-direction:column;align-items:center;gap:var(--s2);font-size:var(--fs-small);color:var(--muted)}
.platforms svg {width:var(--icon);height:var(--icon);color:var(--text)}
.platforms a:hover,.platforms a:hover svg {color:var(--accent)}
.platform-divider {width:var(--hairline);height:var(--s10);background:var(--border)}
.tabs {min-width:0}
.tabs [role="tablist"] {display:flex;gap:var(--s2);padding:var(--s2);max-width:100%;overflow-x:auto;background:var(--sunken);border:var(--hairline) solid var(--border);border-radius:var(--r-small)}
.tabs [role="tab"] {flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;min-height:var(--touch);padding:var(--s2) var(--s5);border:var(--hairline) solid var(--clear);border-radius:var(--r-small);background:var(--clear);color:var(--muted);font-size:var(--fs-nav);font-weight:var(--bold)}
.tabs [role="tab"]:hover {color:var(--text);background:var(--panel)}
.tabs [role="tab"][aria-selected="true"] {background:var(--panel);color:var(--accent-dark);border-color:var(--border);box-shadow:var(--shadow-card)}
.tabs [role="tabpanel"] {padding-top:var(--s6)}
.toc-tabs {position:sticky;top:var(--toc-offset);z-index:var(--z-toc);display:flex;gap:var(--s2);max-width:100%;overflow-x:auto;overscroll-behavior-x:contain;padding:var(--s2);margin-block:var(--s6);background:var(--panel);border:var(--hairline) solid var(--border);border-radius:var(--r-small);box-shadow:var(--shadow-card)}
.toc-tabs.toc-static {position:static}
.toc-tabs a {display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;min-height:var(--touch);padding:var(--s2) var(--s4);font-size:var(--fs-ui);border-radius:var(--r-pill);color:var(--muted)}
.toc-tabs a:hover,.toc-tabs a.is-current {background:var(--sunken);color:var(--accent-dark);font-weight:var(--bold)}
.faq-list {border-top:var(--hairline) solid var(--border)}
.faq-item {padding:var(--s4) 0;border-bottom:var(--hairline) solid var(--border)}
.faq-item summary {cursor:pointer;font-weight:var(--bold);padding:var(--s2) var(--s1);min-height:var(--touch)}
.faq-item summary::marker {color:var(--accent)}
.faq-item[open] summary {color:var(--accent-dark)}
.faq-item p {margin:var(--s3) 0 var(--s2);color:var(--muted)}
.plan-grid {display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6)}
.plan-card {display:flex;flex-direction:column;align-items:flex-start;gap:var(--s4);padding:var(--s8);border:var(--hairline) solid var(--border);border-radius:var(--r-medium);background:var(--panel);box-shadow:var(--shadow-card)}
.plan-card h3,.plan-card p {margin:0}
.plan-card .price {font:var(--bold) var(--fs-h2)/var(--lh-title) var(--mono);font-variant-numeric:tabular-nums}
.plan-card .price small {font:var(--regular) var(--fs-ui)/var(--lh) var(--body);color:var(--muted)}
.plan-card .button {margin-top:auto;width:100%}
.plan-card ul {font-size:var(--fs-ui);color:var(--muted);margin:0 0 var(--s2)}
.plan-card.is-current {box-shadow:var(--shadow-selected)}
.plan-best {background:var(--accent);color:var(--white)}
.plan-note {font-size:var(--fs-ui);color:var(--muted);margin-top:var(--s6)}
.table-scroll {max-width:100%;width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border:var(--hairline) solid var(--border);border-radius:var(--r-small);background:var(--panel)}
.data-table {border-collapse:collapse;width:100%;min-width:var(--table-width);font-size:var(--fs-ui);text-align:left}
.data-table caption {padding:var(--s4);text-align:left;font-weight:var(--bold);color:var(--text)}
.data-table th,.data-table td {padding:var(--s4);border-bottom:var(--hairline) solid var(--border);vertical-align:top}
.data-table thead th,.data-table tbody th {color:var(--text);font-weight:var(--bold)}
.data-table thead th {background:var(--sunken)}
.data-table .region-group th {background:color-mix(in srgb,var(--cyan) 24%,var(--panel));color:var(--accent-dark)}
.data-table tr:last-child td,.data-table tr:last-child th {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:var(--s4)}
.platform-card {display:flex;flex-direction:column;align-items:center;gap:var(--s4);text-align:center;padding:var(--s6) var(--s4);border:var(--hairline) solid var(--border);border-radius:var(--r-small);background:var(--panel);box-shadow:var(--shadow-card)}
.platform-card svg {width:var(--s8);height:var(--s8);color:var(--accent)}
.platform-card h3 {font-size:var(--fs-body);margin:0}
.platform-card .button {min-width:0;width:100%;font-size:var(--fs-ui);padding-inline:var(--s2);gap:var(--s2)}
.article-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6)}
.article-card {padding:var(--s8);border-top:var(--s1) solid var(--accent);background:var(--panel);border-radius:0 0 var(--r-small) var(--r-small);box-shadow:var(--shadow-card)}
.article-meta {display:flex;gap:var(--s3);align-items:center;flex-wrap:wrap;font-size:var(--fs-small);color:var(--muted);margin-bottom:var(--s4)}
.article-card h3 {font-size:var(--fs-h3)}
.article-card p {font-size:var(--fs-nav);color:var(--muted)}
.article-card>a {display:inline-flex;align-items:center;min-height:var(--s6);color:var(--accent-dark);font-size:var(--fs-ui);font-weight:var(--bold)}
.article-masthead {border-top:var(--s1) solid var(--accent);padding-top:var(--s5);padding-bottom:var(--s6);border-bottom:var(--hairline) solid var(--border)}
.callout {margin:var(--s6) 0;padding:var(--s5) var(--s6);border-left:var(--s1) solid var(--accent);background:color-mix(in srgb,var(--cyan) 18%,var(--panel));border-radius:0 var(--r-small) var(--r-small) 0}
.callout p:last-child {margin-bottom:0}
.article-promo {margin-top:var(--s12);padding:var(--s8);display:flex;justify-content:space-between;align-items:center;gap:var(--s6);background:var(--sunken);border:var(--hairline) solid var(--border);border-radius:var(--r-medium);box-shadow:var(--shadow-card)}
.article-promo strong {font-size:var(--fs-brand)}
.article-promo p {margin:var(--s2) 0 0;color:var(--muted);font-size:var(--fs-nav)}
.article-promo .button {flex-shrink:0}
.evidence-stack {display:flex;flex-direction:column;gap:var(--s20)}
.evidence-row {display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:center;gap:var(--s16)}
.evidence-row:nth-child(even) {grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
.evidence-row:nth-child(even) .evidence-copy {order:2}
.evidence-copy p {color:var(--muted)}
.section-icon {display:inline-flex;align-items:center;justify-content:center;width:var(--s12);height:var(--s12);border:var(--hairline) solid var(--border);border-radius:var(--r-small);background:var(--sunken);color:var(--accent);margin-bottom:var(--s6)}
.section-icon svg {width:var(--s6);height:var(--s6)}
.evidence-frame {padding:var(--s5);background:var(--cradle);border-radius:var(--r-device);box-shadow:var(--shadow-cradle)}
.evidence-row:nth-child(even) .evidence-frame {background:linear-gradient(135deg,var(--lilac),var(--panel) 70%)}
.evidence-frame .panel {box-shadow:var(--shadow-card)}
.checklist {margin:0;padding-inline-start:var(--s6)}
.checklist li+li {margin-top:var(--s4)}
.preview-grid {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6)}
.preview-stack {display:flex;flex-direction:column;gap:var(--s6)}
.preview-actions {display:flex;flex-wrap:wrap;gap:var(--s4);align-items:center}
.swatch-grid {display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s3)}
.swatch {border:var(--hairline) solid var(--border);border-radius:var(--r-small);overflow:hidden;background:var(--panel)}
.swatch i {display:block;height:var(--s16)}
.swatch code {display:block;padding:var(--s3);font-size:var(--fs-small)}
.sw-bg {background:var(--bg)}
.sw-panel {background:var(--panel)}
.sw-sunken {background:var(--sunken)}
.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-success {background:var(--success)}
.sw-warn {background:var(--warn)}
.sw-error {background:var(--error)}
.sw-lilac {background:var(--lilac)}
.sw-cyan {background:var(--cyan)}
.sw-ink {background:var(--ink)}
.sw-ink-panel {background:var(--ink-panel)}
.sw-ink-raised {background:var(--ink-raised)}
.sw-ink-border {background:var(--ink-border)}
.sw-ink-muted {background:var(--ink-muted)}
.sw-white {background:var(--white)}
.sw-flag-white {background:var(--flag-white)}
.sw-flag-red {background:var(--flag-red)}
.sw-flag-blue {background:var(--flag-blue)}
.sw-clear {background:var(--clear)}
.motion-line-mask {display:block;overflow:clip}
.motion-line-content {display:block}
@media (min-width:1500px) {
  .hero {padding-top:var(--s8);padding-bottom:var(--s8)}
  .device-stage {margin-top:var(--s8)}
}
@media (max-width:1190px) {
  .device-stage {padding-bottom:var(--s16)}
  .cradle {width:calc(100% - var(--s16))}
  .side-note {top:auto;bottom:0;width:auto;padding:var(--s3) var(--s4);display:flex;align-items:center;gap:var(--s3);border-radius:var(--r-small)}
  .side-note svg,.side-note p {margin:0}
  .side-note strong {font-size:var(--fs-ui)}
  .note-devices {left:var(--s8)}
  .note-traffic {right:var(--s8)}
}
@media (max-width:920px) {
  .hero-description {max-width:var(--description-width);margin-inline:auto}
  .side-note {gap:var(--s2)}
  .guide-topics {display:none}
  .directory-body {padding:var(--s4)}
  .regions {gap:var(--s1)}
  .regions a {gap:var(--s1);font-size:var(--fs-small)}
  .platform-band {gap:var(--s4)}
  .platforms {grid-template-columns:repeat(5,var(--platform-tablet-width));gap:var(--s2)}
  .plan-card {padding:var(--s5)}
  .platform-grid {grid-template-columns:repeat(3,minmax(0,1fr))}
  .evidence-row,.evidence-row:nth-child(even) {grid-template-columns:1fr;gap:var(--s6)}
  .evidence-row:nth-child(even) .evidence-copy {order:0}
}
@media (max-width:640px) {
  .hero {padding-top:var(--s6)}
  .hero h1 {max-width:var(--title-mobile-width);margin:var(--s3) auto var(--s4)}
  .hero-actions {gap:var(--s2)}
  .hero-actions .button {flex:1;max-width:var(--button-mobile-width)}
  .hero-description {font-size:var(--fs-ui);max-width:var(--description-mobile-width);line-height:var(--lh-prose)}
  .trust {gap:var(--s2) var(--s3);flex-wrap:wrap;font-size:var(--fs-tiny)}
  .trust span {gap:var(--s1)}
  .trust svg {width:var(--s3);height:var(--s3)}
  .device-stage {display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);padding:0;min-height:0}
  .cradle {grid-column:1/-1;width:100%;left:0;min-height:0;padding:var(--s3);border-radius:var(--r-medium)}
  .directory {width:100%;border-radius:var(--r-small)}
  .chrome {padding:var(--s3);min-height:var(--s10)}
  .chrome-label {font-size:var(--fs-micro)}
  .chrome-left {gap:var(--s2)}
  .directory-body {padding:var(--s3)}
  .guide-entry {gap:var(--s2);padding:var(--s3);font-size:var(--fs-label)}
  .region-heading {align-items:flex-start;gap:var(--s2)}
  .coverage {flex-direction:column;gap:var(--s1);text-align:right;font-size:var(--fs-tiny)}
  .regions {grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2)}
  .regions a {font-size:var(--fs-small);gap:var(--s2)}
  .flag {width:var(--flag-mobile-width);height:var(--flag-mobile-height)}
  .billing {grid-template-columns:1fr;gap:var(--s2);margin-top:var(--s3)}
  .billing-card {padding:var(--s3)}
  .billing-card .price {font-size:var(--fs-price-mobile)}
  .directory-foot {flex-direction:column;gap:var(--s1);line-height:var(--lh)}
  .side-note {position:static;width:100%;display:block;padding:var(--s3);border-radius:var(--r-small)}
  .side-note svg {margin-bottom:var(--s2);width:var(--s5);height:var(--s5)}
  .side-note p {font-size:var(--fs-tiny);margin-bottom:var(--s1)}
  .side-note strong {font-size:var(--fs-ui)}
  .platform-band {flex-direction:column-reverse;gap:var(--s4);margin-top:var(--s6)}
  .platform-divider {display:none}
  .platforms {width:100%;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--s1)}
  .platforms a {font-size:var(--fs-tiny)}
  .platform-caption {text-align:center;font-size:var(--fs-tiny)}
  .platform-caption br {display:none}
  .plan-grid,.article-grid,.preview-grid {grid-template-columns:1fr}
  .platform-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .swatch-grid {grid-template-columns:repeat(2,minmax(0,1fr))}
  .article-promo {flex-direction:column;align-items:flex-start;padding:var(--s6)}
  .article-promo .button {width:100%}
  .evidence-stack {gap:var(--s12)}
  .evidence-frame {padding:var(--s3)}
  .callout {padding:var(--s4)}
}