.notice-toggle { position: absolute; opacity: 0; width: var(--hair); height: var(--hair); }
.notice { position: relative; min-height: var(--s9); margin-top: var(--s2); display: flex; align-items: center; justify-content: center; gap: var(--s4); padding: var(--s3) var(--s10); border-radius: var(--radius); background: var(--rose); color: var(--accent-dark); font-size: var(--nav); }
.notice svg { width: var(--s4); height: var(--s4); }
.notice-message { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; }
.notice a { text-decoration: underline; text-underline-offset: var(--s1); }
.notice-close { position: absolute; right: var(--s3); top: 50%; transform: translateY(-50%); width: var(--s7); height: var(--s7); border: 0; border-radius: var(--radius); display: grid; place-items: center; cursor: pointer; background: var(--accent-wash); }
.notice-close:hover { background: var(--rose-deep); }
.notice-toggle:checked + .notice { display: none; }
.notice-toggle:focus-visible + .notice .notice-close { outline: var(--line) solid var(--accent-dark); outline-offset: var(--s1); }
.hero-surface { max-width: 100%; overflow-x: clip; background: var(--ambient); }
.hero { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); gap: var(--s9); align-items: center; padding-top: var(--s9); padding-bottom: var(--s9); }
.hero-copy { position: relative; z-index: 1; min-width: 0; }
.eyebrow { display: flex; align-items: center; gap: var(--s3); font-size: var(--nav); font-weight: var(--bold); color: var(--accent-dark); margin-bottom: var(--s5); }
.eyebrow::before { content: ''; width: var(--s6); height: var(--line); background: var(--accent-dark); flex-shrink: 0; }
.h1-brand { display: block; margin-bottom: var(--s2); letter-spacing: var(--tight); }
.hero-actions { display: flex; gap: var(--s4); margin-top: var(--s7); }
.hero-description { font-size: var(--body); line-height: var(--reading-lh); color: var(--muted); margin-top: var(--s6); max-width: var(--hero-description-width); }
.hero-description strong { color: var(--ink); font-weight: var(--bold); }
.trust-line { display: flex; align-items: center; gap: var(--s5); margin-top: var(--s5); font-size: var(--label); color: var(--muted); }
.trust-line li { display: flex; align-items: center; gap: var(--s1); white-space: nowrap; }
.trust-line svg { width: var(--s4); height: var(--s4); color: var(--accent-dark); }
.platforms { display: flex; align-items: center; justify-content: space-between; gap: var(--s4); margin-top: var(--s7); padding-top: var(--s6); border-top: var(--hair) solid var(--border); max-width: var(--platform-row-width); }
.platforms li { display: flex; align-items: center; gap: var(--s2); font-size: var(--label); font-weight: var(--medium-weight); color: var(--muted); }
.platforms svg { width: var(--s5); height: var(--s5); }
.flag-row { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); margin-top: var(--s6); max-width: var(--platform-row-width); }
.flag-row li { display: flex; align-items: center; gap: var(--s2); font-size: var(--small); color: var(--muted); white-space: nowrap; }
.flag { width: var(--flag-width); height: var(--flag-height); border-radius: var(--flag-radius); overflow: hidden; box-shadow: 0 0 0 var(--hair) var(--flag-edge); background: var(--flag-white); }
.flag-white { fill: var(--flag-white); }
.flag-red { fill: var(--flag-red); }
.flag-blue { fill: var(--flag-blue); }
.flag-france { fill: var(--flag-france); }
.flag-white-stroke { stroke: var(--flag-white); }
.flag-red-stroke { stroke: var(--flag-red); }
.device-scene { position: relative; min-width: 0; height: var(--scene-height); isolation: isolate; }
.device-backdrop { position: absolute; inset: var(--s6) 0 var(--s6) var(--s2); background: var(--stage-fill); border-radius: var(--radius); border: var(--hair) solid var(--accent-edge); overflow: hidden; z-index: -1; }
.device-backdrop::before { content: ''; position: absolute; inset: 12% -18% 22% 12%; border-radius: var(--circle); background: var(--stage-glint); transform: rotate(-30deg); }
.device-backdrop::after { content: ''; position: absolute; inset: 68% -10% -28% -15%; border-radius: var(--circle); background: var(--stage-ribbon); transform: rotate(-18deg); }
.route-window { position: absolute; left: var(--s6); right: var(--s7); top: calc(var(--desktop-top) + var(--s3)); height: var(--desktop-height); background: var(--panel); border: var(--hair) solid var(--border); border-radius: var(--radius); box-shadow: var(--window-shadow); overflow: hidden; }
.window-chrome { height: var(--s8); border-bottom: var(--hair) solid var(--border); display: flex; align-items: center; padding-inline: var(--s4); gap: var(--s2); background: linear-gradient(var(--panel), var(--rose-light)); }
.window-dots { display: flex; gap: var(--s1); }
.window-dots i { width: var(--dot-size); height: var(--dot-size); border-radius: var(--round); background: var(--chrome-dot); }
.window-title { font-size: var(--tiny); color: var(--muted); margin-left: var(--s3); }
.chrome-view { margin-left: auto; width: var(--s3); height: var(--s3); color: var(--muted); }
.window-body { display: grid; grid-template-columns: var(--sidebar-width) minmax(0, 1fr); height: calc(100% - var(--s8)); }
.window-sidebar { background: var(--panel-soft); border-right: var(--hair) solid var(--border); padding: var(--s5) var(--s3); display: flex; flex-direction: column; min-width: 0; }
.sidebar-brand { display: flex; gap: var(--s2); align-items: center; font-size: var(--label); font-weight: var(--heavy); padding-inline: var(--s1); margin-bottom: var(--s6); }
.sidebar-brand svg { width: var(--s4); height: var(--s4); color: var(--accent-dark); }
.sidebar-item { display: flex; align-items: center; gap: var(--s2); font-size: var(--micro); color: var(--muted); padding: var(--s2); border-radius: var(--radius); margin-bottom: var(--s1); }
.sidebar-item svg { width: var(--s3); height: var(--s3); }
.sidebar-item.is-selected { background: var(--rose-deep); color: var(--accent-dark); font-weight: var(--bold); }
.sidebar-platforms { margin-top: auto; }
.sidebar-caption { font-size: var(--tiny); color: var(--muted); margin-bottom: var(--s2); padding-left: var(--s1); }
.platform-tags { display: flex; flex-wrap: wrap; gap: var(--s1); }
.platform-tags span { background: var(--panel); border: var(--hair) solid var(--border); padding: var(--s1); border-radius: var(--flag-radius); font-size: var(--tiny); line-height: var(--compact-lh); color: var(--muted); }
.route-content { position: relative; padding: var(--s5) var(--s5) var(--s4); min-width: 0; }
.route-heading { font-size: var(--card-title); font-weight: var(--heavy); letter-spacing: var(--tight); }
.route-caption { max-width: calc(100% - var(--region-reserve)); font-size: var(--micro); color: var(--muted); margin-top: var(--s1); }
.region-list { width: calc(100% - var(--region-reserve)); min-width: var(--region-min); display: grid; gap: var(--s1); margin-top: var(--s4); }
.region-list li { display: flex; align-items: center; gap: var(--s3); height: var(--s8); padding: var(--s2) var(--s3); border: var(--hair) solid var(--border); border-radius: var(--radius); background: linear-gradient(110deg, var(--panel), var(--bg)); }
.region-list .flag { width: var(--s6); height: var(--s4); }
.region-list span { font-size: var(--small); font-weight: var(--medium-weight); }
.region-list .region-arrow { margin-left: auto; color: var(--chrome-dot); font-size: var(--base); }
.coverage-note { position: absolute; right: var(--s5); top: var(--s8); text-align: right; color: var(--muted); font-size: var(--tiny); display: grid; gap: var(--s2); }
.coverage-note div { display: flex; flex-direction: column; }
.coverage-note strong { font-family: var(--mono); font-size: var(--number); font-weight: var(--medium-weight); color: var(--accent-dark); line-height: var(--brand-lh); letter-spacing: var(--tight); }
.account-note { position: absolute; left: 0; top: var(--s1); width: var(--note-width); display: flex; align-items: center; gap: var(--s3); padding: var(--s4); border-radius: var(--radius); background: var(--panel); border: var(--hair) solid var(--border); box-shadow: var(--note-shadow); z-index: 2; }
.account-note-icon { display: grid; place-items: center; width: var(--s8); height: var(--s8); border-radius: var(--radius); color: var(--accent-dark); background: var(--rose); flex-shrink: 0; }
.account-note-icon svg { width: var(--s5); height: var(--s5); }
.account-note strong { font-size: var(--label); font-weight: var(--bold); display: block; }
.account-note p { font-size: var(--micro); color: var(--muted); margin-top: var(--s1); }
.mobile-device { position: absolute; right: var(--s2); bottom: var(--s2); width: var(--phone-width); height: var(--phone-height); background: linear-gradient(145deg, var(--panel), var(--frame)); border: var(--hair) solid var(--frame); border-radius: var(--phone-radius); padding: var(--phone-inset); box-shadow: var(--phone-shadow); z-index: 3; animation: device-arrive var(--duration) var(--ease) both; }
.mobile-screen { position: relative; height: 100%; background: var(--panel); border: var(--hair) solid var(--border); border-radius: var(--screen-radius); overflow: hidden; padding: var(--s7) var(--s4) var(--s4); }
.mobile-screen::before { content: ''; position: absolute; top: var(--s2); left: 50%; transform: translateX(-50%); width: var(--s8); height: var(--s1); border-radius: var(--round); background: var(--ink); }
.mobile-kicker { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: var(--tiny); color: var(--muted); }
.mobile-kicker svg { width: var(--s3); height: var(--s3); }
.mobile-title { font-size: var(--medium); font-weight: var(--heavy); letter-spacing: var(--tight); margin-top: var(--s3); }
.mobile-description { font-size: var(--tiny); color: var(--muted); margin-top: var(--s1); }
.credential-label { display: flex; align-items: center; gap: var(--s2); height: var(--credential-height); padding-inline: var(--s3); background: var(--panel-soft); border: var(--hair) solid var(--border); border-radius: var(--radius); font-size: var(--micro); color: var(--muted); margin-top: var(--s3); }
.credential-label svg { width: var(--s3); height: var(--s3); }
.mobile-guide { display: flex; align-items: center; justify-content: space-between; background: var(--rose); color: var(--accent-dark); padding: var(--s2) var(--s3); border-radius: var(--radius); font-size: var(--micro); font-weight: var(--bold); margin-top: var(--s3); }
.mobile-platforms { text-align: center; color: var(--muted); font-size: var(--tiny); margin-top: var(--s2); }
.scene-caption { position: absolute; bottom: var(--s5); left: var(--s7); font-size: var(--micro); color: var(--accent-dark); display: flex; align-items: center; gap: var(--s2); }
.scene-caption::before { content: ''; width: var(--s5); height: var(--hair); background: var(--accent-dark); }
.fact-strip { min-height: var(--s11); display: flex; align-items: center; justify-content: center; gap: var(--s6); border-top: var(--hair) solid var(--border); border-bottom: var(--hair) solid var(--border); font-size: var(--small); color: var(--muted); background: var(--glass); padding: var(--s3) var(--gutter); }
.fact-strip strong { font-family: var(--mono); font-weight: var(--medium-weight); font-size: var(--medium); color: var(--ink); }
.slash { color: var(--chrome-dot); font-size: var(--medium); }
.feature-pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s11); align-items: center; padding-top: var(--s11); padding-bottom: var(--s11); }
.feature-pair > * { min-width: 0; }
.feature-pair.is-mirrored > .feature-detail { order: -1; }
.feature-copy > p:not(.eyebrow) { font-size: var(--body); line-height: var(--reading-lh); color: var(--muted); margin-top: var(--s6); }
.feature-detail { background: var(--stage-fill); border: var(--hair) solid var(--accent-edge); border-radius: var(--radius); padding: var(--s8); min-width: 0; overflow-x: clip; }
.matter-list { display: grid; gap: var(--s4); }
.matter-list li { display: flex; gap: var(--s4); align-items: center; background: var(--panel); border: var(--hair) solid var(--border); border-radius: var(--radius); padding: var(--s5); box-shadow: var(--note-shadow); }
.matter-list li::before { content: ''; width: var(--s5); height: var(--s5); border: var(--line) solid var(--accent-dark); border-radius: var(--circle); flex-shrink: 0; }
.badge, .tag { display: inline-flex; align-items: center; gap: var(--s2); padding: var(--s1) var(--s3); max-width: 100%; overflow-wrap: anywhere; border: var(--hair) solid var(--border); border-radius: var(--radius); font-size: var(--small); font-weight: var(--medium-weight); background: var(--panel-soft); color: var(--muted); }
.badge { background: var(--rose); border-color: var(--rose-deep); color: var(--accent-dark); }
.tag-list { display: flex; flex-wrap: wrap; gap: var(--s2); }
.tabs { min-width: 0; }
.tab-list, [role="tablist"] { display: flex; gap: var(--s2); max-width: 100%; overflow-x: auto; padding: var(--s2); background: var(--panel-soft); border: var(--hair) solid var(--border); border-radius: var(--radius); }
[role="tab"] { display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch); flex-shrink: 0; padding: var(--s2) var(--s5); border: var(--hair) solid var(--clear); border-radius: var(--radius); background: var(--clear); color: var(--muted); font-weight: var(--bold); }
[role="tab"][aria-selected="true"] { color: var(--accent-dark); background: var(--panel); border-color: var(--border); box-shadow: var(--note-shadow); }
[role="tabpanel"] { min-width: 0; padding-top: var(--s7); }
.toc-tabs { position: sticky; top: var(--toc-offset); z-index: var(--layer-toc); display: flex; gap: var(--s2); overflow-x: auto; max-width: 100%; padding: var(--s2); border: var(--hair) solid var(--border); border-radius: var(--radius); background: var(--panel); box-shadow: var(--note-shadow); }
.toc-tabs a { display: inline-flex; align-items: center; flex-shrink: 0; min-height: var(--touch); padding: var(--s2) var(--s4); font-size: var(--nav); border-radius: var(--radius); color: var(--muted); }
.toc-tabs a.is-current { color: var(--accent-dark); background: var(--rose); }
.toc-tabs.toc-static { position: static; }
.faq-list { border-top: var(--hair) solid var(--border); }
.faq-item { border-bottom: var(--hair) solid var(--border); padding-block: var(--s2); }
.faq-item summary { cursor: pointer; padding: var(--s5) var(--s7) var(--s5) var(--s1); font-weight: var(--bold); position: relative; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: '+'; position: absolute; right: var(--s2); top: var(--s5); color: var(--accent-dark); }
.faq-item[open] summary::after { content: '−'; }
.faq-answer { padding: 0 var(--s7) var(--s6) var(--s1); color: var(--muted); line-height: var(--reading-lh); }
.plan-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s6); }
.plan-card { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s5); padding: var(--s7); border: var(--hair) solid var(--border); border-radius: var(--radius); background: linear-gradient(var(--panel), var(--bg)); }
.plan-card.is-current { border-color: var(--accent-dark); box-shadow: var(--selected-shadow); background: linear-gradient(var(--panel), var(--rose-light)); }
.plan-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s3); width: 100%; }
.plan-price { font-family: var(--mono); font-size: var(--heading); line-height: var(--brand-lh); font-weight: var(--medium-weight); color: var(--ink); font-variant-numeric: tabular-nums; }
.plan-price small { font-family: var(--font); font-size: var(--nav); color: var(--muted); }
.plan-detail { font-size: var(--nav); color: var(--muted); }
.plan-card ul { display: grid; gap: var(--s3); color: var(--muted); font-size: var(--nav); }
.plan-card .btn { margin-top: auto; width: 100%; font-size: var(--base); }
.table-scroll { width: 100%; min-width: 0; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border: var(--hair) solid var(--border); border-radius: var(--radius); background: var(--panel); }
.data-table, .route-table { border-collapse: collapse; width: 100%; min-width: var(--table-width); text-align: left; font-size: var(--nav); }
.data-table caption, .route-table caption { text-align: left; padding: var(--s5); font-weight: var(--bold); color: var(--ink); background: var(--rose-light); }
.data-table th, .data-table td, .route-table th, .route-table td { padding: var(--s4) var(--s5); border-bottom: var(--hair) solid var(--border); vertical-align: top; }
.data-table th, .route-table th { color: var(--ink); font-weight: var(--bold); background: var(--panel-soft); }
.data-table td:first-child, .route-table td:first-child { color: var(--ink); font-weight: var(--medium-weight); }
.route-table .region-heading th { background: var(--rose); color: var(--accent-dark); }
.data-table tr:last-child td, .route-table tbody:last-child tr:last-child td { 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(auto-fit, minmax(min(100%, var(--platform-card-min)), 1fr)); gap: var(--s4); }
.platform-card { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--s5); padding: var(--s6); background: var(--panel); border: var(--hair) solid var(--border); border-radius: var(--radius); box-shadow: var(--note-shadow); }
.platform-card > svg { width: var(--s7); height: var(--s7); color: var(--muted); }
.platform-card h3 { font-size: var(--body); }
.platform-card .btn { min-height: var(--touch); padding: var(--s2) var(--s3); font-size: var(--nav); width: 100%; }
.article-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s6); }
.article-card { padding: var(--s7); border: var(--hair) solid var(--border); border-radius: var(--radius); background: var(--panel); min-width: 0; }
.article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3); color: var(--muted); font-size: var(--small); margin-bottom: var(--s5); }
.article-card h3 a:hover { color: var(--accent-dark); }
.article-card p { color: var(--muted); font-size: var(--nav); margin-top: var(--s4); }
.article-card > .text-link { display: inline-flex; align-items: center; min-height: var(--s7); margin-top: var(--s5); font-size: var(--nav); }
.article-masthead { text-align: center; padding-top: var(--s13); padding-bottom: var(--s11); }
.article-masthead .eyebrow, .article-masthead .article-meta { justify-content: center; }
.article-masthead h1 { font-size: var(--heading); max-width: var(--reading-width); margin-inline: auto; }
.article-masthead h1::after { content: ''; display: block; width: var(--s11); height: var(--line); background: var(--accent-dark); margin: var(--s7) auto; }
.callout { margin-inline: 0; padding: var(--s6); border-left: var(--s1) solid var(--accent-dark); border-radius: var(--radius); background: var(--rose-light); color: var(--ink); }
.callout p + p { margin-top: var(--s3); }
.article-promo { display: flex; align-items: center; justify-content: space-between; gap: var(--s7); margin-top: var(--s11); padding: var(--s7); border: var(--hair) solid var(--rose-deep); border-radius: var(--radius); background: var(--stage-fill); box-shadow: var(--note-shadow); }
.article-promo > div { min-width: 0; }
.article-promo strong { font-size: var(--card-title); font-weight: var(--black); }
.article-promo p { color: var(--muted); margin-top: var(--s2); font-size: var(--base); }
.article-promo .btn { flex-shrink: 0; }
.motion-divider { width: 100%; height: var(--s9); display: block; color: var(--accent-dark); }
.motion-divider path { stroke: currentColor; fill: none; stroke-width: var(--line); }
.motion-divider path.line-wait { stroke-dasharray: 1; stroke-dashoffset: 1; }
.motion-divider path.line-drawn { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset var(--line-duration) var(--ease); }
.region-ticker { overflow: hidden; max-width: 100%; min-width: 0; padding-block: var(--s5); background: var(--rose-light); border-block: var(--hair) solid var(--border); }
.ticker-track { display: flex; width: max-content; }
.ticker-group { display: flex; flex-shrink: 0; align-items: center; gap: var(--s9); padding-right: var(--s9); font-family: var(--mono); color: var(--muted); }
.ticker-group span { white-space: nowrap; }
.preview-section { border-top: var(--hair) solid var(--border); }
.preview-heading { margin-bottom: var(--s7); }
.sample-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--swatch-min)), 1fr)); gap: var(--s4); }
.sample-swatch { min-width: 0; background: var(--panel); border: var(--hair) solid var(--border); border-radius: var(--radius); overflow: hidden; }
.sample-swatch code { display: block; padding: var(--s3); font-size: var(--small); color: var(--ink); }
.swatch-paint { height: var(--swatch-height); border-bottom: var(--hair) solid var(--border); }
.swatch-bg { background: var(--bg); }
.swatch-panel { background: var(--panel); }
.swatch-soft { background: var(--panel-soft); }
.swatch-border { background: var(--border); }
.swatch-accent { background: var(--accent); }
.swatch-deep { background: var(--accent-dark); }
.swatch-ink { background: var(--ink); }
.swatch-muted { background: var(--muted); }
.swatch-success { background: var(--success); }
.swatch-warn { background: var(--warn); }
.swatch-error { background: var(--error); }
.swatch-rose { background: var(--rose); }
.swatch-rose-deep { background: var(--rose-deep); }
.swatch-rose-light { background: var(--rose-light); }
.swatch-frame { background: var(--frame); }
.swatch-dot { background: var(--chrome-dot); }
.swatch-flag-white { background: var(--flag-white); }
.swatch-flag-red { background: var(--flag-red); }
.swatch-flag-blue { background: var(--flag-blue); }
.swatch-flag-france { background: var(--flag-france); }
.swatch-ambient { background: var(--ambient); }
.swatch-stage { background: var(--stage-fill); }
.swatch-glint { background: var(--stage-glint), var(--rose); }
.swatch-ribbon { background: var(--stage-ribbon), var(--rose); }
.swatch-wash { background: var(--accent-wash); }
.swatch-edge { background: var(--accent-edge); }
.swatch-flag-edge { background: var(--flag-edge); }
.swatch-veil { background: var(--veil); }
.swatch-glass { background: var(--glass), var(--rose); }
.swatch-clear { background: var(--clear); }
.button-samples { display: flex; flex-wrap: wrap; gap: var(--s5); align-items: center; }
.preview-type { display: grid; gap: var(--s6); }
.preview-type > p { font-size: var(--body); color: var(--muted); }
.preview-static-nav { display: none; }
@keyframes device-arrive {
  from { opacity: 0; transform: translateY(var(--s3)) rotate(var(--entry-tilt)); }
  to { opacity: 1; transform: translateY(0) rotate(0); }
}
@media (min-width: 1500px) {
  .hero { padding-top: var(--s11); padding-bottom: var(--s11); }
}
@media (max-width: 1250px) {
  :root { --sidebar-width: 110px; --phone-width: 178px; --region-reserve: 102px; --region-min: 146px; }
  .hero { gap: var(--s7); grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); }
  .hero h1 { font-size: var(--s10); }
  .trust-line { gap: var(--s3); font-size: var(--small); }
  .platforms { gap: var(--s2); }
  .platforms li { font-size: var(--small); }
  .flag-row { gap: var(--s2); }
  .flag-row li { gap: var(--s1); font-size: var(--micro); }
  .route-content { padding-inline: var(--s3); }
  .coverage-note { right: var(--s3); top: var(--s8); }
  .coverage-note strong { font-size: var(--card-title); }
}
@media (max-width: 1020px) {
  :root { --sidebar-width: 132px; --phone-width: 194px; --region-reserve: 128px; }
  .hero { grid-template-columns: 1fr; max-width: calc(var(--hero-single-width) + var(--gutter) * 2); gap: var(--s8); }
  .hero-copy { max-width: var(--hero-copy-width); }
  .hero h1 { font-size: var(--display); }
  .device-scene { width: 100%; }
  .platforms, .flag-row { max-width: 100%; }
  .coverage-note { right: var(--s6); }
  .coverage-note strong { font-size: var(--number); }
  .feature-pair { gap: var(--s7); }
  .feature-detail { padding: var(--s6); }
  .plan-grid { gap: var(--s4); }
  .plan-card { padding: var(--s5); }
  .preview-static-nav { display: block; flex-basis: 100%; font-size: var(--nav); color: var(--muted); }
  .preview-static-nav summary { min-height: var(--touch); display: flex; align-items: center; cursor: pointer; }
  .preview-static-nav nav { display: grid; padding: var(--s3); background: var(--panel); border: var(--hair) solid var(--border); border-radius: var(--radius); }
  .preview-static-nav a { display: flex; align-items: center; min-height: var(--touch); padding: var(--s3); }
  .site-header:has(.preview-static-nav) { flex-wrap: wrap; gap: var(--s2); padding-top: var(--s4); padding-bottom: var(--s3); }
}
@media (max-width: 768px) {
  .hero h1 { font-size: var(--mobile-display); }
  .feature-pair, .plan-grid, .article-grid { grid-template-columns: 1fr; }
  .feature-pair.is-mirrored > .feature-detail { order: initial; }
  .feature-pair { padding-top: var(--s8); padding-bottom: var(--s8); }
  .article-promo { flex-direction: column; align-items: stretch; }
}
@media (max-width: 640px) {
  .notice { font-size: var(--micro); padding: var(--s3) var(--s8) var(--s3) var(--s3); gap: var(--s2); }
  .notice-message { gap: var(--s2); }
  .notice-message svg { display: none; }
  .notice-close { right: var(--s1); width: var(--s6); height: var(--s6); }
  .hero { padding-top: var(--s7); padding-bottom: var(--s7); gap: var(--s7); }
  .eyebrow { font-size: var(--small); margin-bottom: var(--s4); }
  .h1-brand { margin-bottom: var(--s1); }
  .hero-actions { margin-top: var(--s6); gap: var(--s3); }
  .hero-actions .btn { flex: 1; gap: var(--s3); }
  .hero-description { font-size: var(--base); margin-top: var(--s5); }
  .trust-line { gap: var(--s2); justify-content: space-between; font-size: var(--tiny); margin-top: var(--s4); }
  .trust-line li { gap: var(--s1); }
  .trust-line svg { width: var(--s3); height: var(--s3); }
  .platforms { margin-top: var(--s6); padding-top: var(--s5); gap: var(--s2); }
  .platforms li { flex-direction: column; gap: var(--s1); font-size: var(--micro); }
  .flag-row { margin-top: var(--s5); gap: var(--s1); }
  .flag-row li { flex-direction: column; gap: var(--s2); font-size: var(--tiny); }
  .device-scene { height: auto; display: flex; flex-direction: column; align-items: stretch; padding: var(--s4); gap: var(--s5); max-width: 100%; }
  .device-backdrop { inset: 0; }
  .account-note { position: relative; left: auto; top: auto; width: auto; padding: var(--s3); order: -1; }
  .route-window { position: relative; inset: auto; height: auto; min-height: 0; flex-shrink: 0; }
  .window-body { grid-template-columns: var(--s12) minmax(0, 1fr); height: auto; }
  .window-sidebar { padding: var(--s3) var(--s1); }
  .sidebar-brand { font-size: var(--tiny); gap: var(--s1); margin-bottom: var(--s4); }
  .sidebar-brand svg { width: var(--s3); height: var(--s3); }
  .sidebar-item { padding: var(--s1); font-size: var(--tiny); gap: var(--s1); }
  .sidebar-caption { font-size: var(--tiny); }
  .platform-tags { gap: var(--s1); padding-inline: var(--s1); }
  .platform-tags span { font-size: var(--tiny); }
  .route-content { padding: var(--s3); }
  .route-heading { font-size: var(--body); }
  .route-caption { font-size: var(--tiny); }
  .region-list { width: 100%; min-width: 0; margin-top: var(--s3); }
  .region-list li { height: var(--credential-height); padding-inline: var(--s2); gap: var(--s2); }
  .region-list span { font-size: var(--micro); }
  .region-list .region-arrow { display: none; }
  .coverage-note { position: static; display: flex; justify-content: space-between; text-align: left; margin-top: var(--s4); gap: var(--s2); }
  .coverage-note strong { font-size: var(--medium); }
  .mobile-device { position: relative; inset: auto; align-self: flex-end; width: var(--phone-width); max-width: 100%; height: calc(var(--phone-height) + var(--s5)); }
  .mobile-platforms { display: none; }
  .scene-caption { position: static; font-size: var(--tiny); }
  .fact-strip { gap: var(--s4); }
  .feature-detail { padding: var(--s5); }
  .matter-list li { padding: var(--s4); }
  .article-card, .article-promo { padding: var(--s5); }
  .ticker-group { gap: var(--s6); padding-right: var(--s6); }
}
@media (prefers-reduced-motion: reduce) {
  .mobile-device { animation: none; }
  .motion-divider path.line-wait, .motion-divider path.line-drawn { stroke-dashoffset: 0; transition: none; }
  .ticker-track { width: auto; display: block; transform: none; }
  .ticker-group { flex-wrap: wrap; gap: var(--s4); padding-inline: var(--s5); }
  [data-ticker-copy] { display: none; }
}