/* Hallmark · macrostructure: Catalogue Split · tone: winter mercantile · anchor hue: forest-green */
/* Hallmark · pre-emit critique: P5 H5 E5 S5 R4 V5 */
@import url("tokens.css");

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-width: 0; overflow-x: clip; }
html { scroll-behavior: smooth; scroll-padding-top: 6.5rem; background: var(--color-paper); }
body { color: var(--color-ink); background: var(--color-paper); font-family: var(--font-body); line-height: 1.72; -webkit-font-smoothing: antialiased; }
body.is-locked { overflow: hidden; }
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-underline-offset: 0.18em; }
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
h1, h2, h3, p { min-width: 0; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-style: normal; line-height: 1.14; overflow-wrap: anywhere; }
p { margin: 0 0 var(--space-md); }
ul, ol { margin-top: 0; }
.skip-link { position: fixed; top: var(--space-md); left: var(--space-md); z-index: 1000; transform: translateY(-160%); background: var(--color-surface-dark); color: var(--color-white); padding: var(--space-sm) var(--space-md); }
.skip-link:focus { transform: translateY(0); }
.container { width: min(74rem, calc(100% - 2rem)); margin-inline: auto; }
.narrow { width: min(48rem, calc(100% - 2rem)); margin-inline: auto; }
.muted { color: var(--color-ink-soft); }
.only-mobile { display: none; }

.promo { background: var(--color-berry); color: var(--color-white); font-size: var(--text-sm); text-align: center; padding: var(--space-xs) var(--space-md); }
.promo strong { letter-spacing: 0.04em; }
.site-header { position: sticky; top: 0; z-index: 50; border-bottom: var(--rule-thin) solid color-mix(in oklch, var(--color-white) 12%, transparent); background: color-mix(in oklch, var(--color-surface-dark) 96%, transparent); color: var(--color-white); backdrop-filter: blur(10px); }
.nav-shell { min-height: 4.25rem; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--space-xl); }
.brand { display: inline-flex; align-items: center; gap: var(--space-sm); text-decoration: none; white-space: nowrap; font-weight: 800; }
.brand-mark { width: 2rem; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; color: var(--color-surface-dark); background: var(--color-orange); font-family: var(--font-display); }
.nav-links { display: flex; justify-content: center; align-items: center; gap: clamp(0.8rem, 2vw, 1.75rem); }
.nav-links a { position: relative; text-decoration: none; white-space: nowrap; color: color-mix(in oklch, var(--color-white) 80%, transparent); font-size: var(--text-sm); }
.nav-links a::after { content: ""; position: absolute; inset: auto 0 -0.45rem; height: 2px; transform: scaleX(0); background: var(--color-orange); transition: transform var(--dur-base) var(--ease-out); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--color-white); }
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); }
.nav-links a:active { color: var(--color-orange); }
.nav-links a[aria-disabled="true"] { opacity: 0.45; pointer-events: none; }
.menu-toggle { display: none; border: var(--rule-thin) solid color-mix(in oklch, var(--color-white) 35%, transparent); background: transparent; color: var(--color-white); padding: 0.55rem 0.75rem; border-radius: var(--radius-sm); white-space: nowrap; }

.btn { min-height: 2.85rem; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-xs); border: var(--rule-strong) solid transparent; border-radius: var(--radius-sm); padding: 0.72rem 1.15rem; font-weight: 800; line-height: 1; text-decoration: none; white-space: nowrap; cursor: pointer; transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.btn:hover, .btn.is-hover { transform: translateY(-2px); }
.btn:active, .btn.is-active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"], .btn.is-disabled { opacity: 0.46; pointer-events: none; }
.btn[data-state="loading"]::before, .btn.is-loading::before { content: ""; width: 0.9rem; aspect-ratio: 1; border: var(--rule-strong) solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 700ms linear infinite; }
.btn[data-state="error"], .btn.is-error { background: var(--color-danger); color: var(--color-white); }
.btn[data-state="success"], .btn.is-success { background: var(--color-success); color: var(--color-white); }
.btn-primary { background: var(--color-orange); color: var(--color-surface-dark); border-color: var(--color-orange); box-shadow: 0 0.5rem 1.3rem color-mix(in oklch, var(--color-orange) 26%, transparent); }
.btn-primary:hover { background: var(--color-gold); border-color: var(--color-gold); }
.btn-secondary { background: transparent; color: var(--color-white); border-color: color-mix(in oklch, var(--color-white) 55%, transparent); }
.btn-secondary:hover { background: color-mix(in oklch, var(--color-white) 10%, transparent); border-color: var(--color-white); }
.btn-dark { background: var(--color-surface-dark); color: var(--color-white); border-color: var(--color-surface-dark); }
.btn-dark:hover { background: var(--color-forest-dark); border-color: var(--color-forest-dark); }
.btn-ghost { background: transparent; color: var(--color-forest-dark); border-color: var(--color-forest); }
.btn-ghost:hover { background: color-mix(in oklch, var(--color-forest) 8%, transparent); }
@keyframes spin { to { transform: rotate(360deg); } }

.hero { position: relative; background: var(--color-surface-dark); color: var(--color-white); overflow: clip; }
.hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, color-mix(in oklch, var(--color-black) 64%, transparent), transparent 56%); }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 55% 40%; opacity: 0.45; animation: hero-drift 18s var(--ease-in-out) alternate infinite; }
@keyframes hero-drift { from { transform: scale(1.02); } to { transform: scale(1.05); } }
.hero-shell { position: relative; z-index: 1; min-height: 29rem; padding-block: var(--space-3xl); display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(17rem, 0.65fr); gap: var(--space-2xl); align-items: end; }
.hero-copy { max-width: 43rem; }
.eyebrow { margin: 0 0 var(--space-sm); color: var(--color-gold); font-size: var(--text-sm); font-weight: 800; letter-spacing: 0.12em; }
.hero h1 { font-size: var(--text-display); letter-spacing: -0.04em; text-shadow: 0 0.12em 0.5em color-mix(in oklch, var(--color-black) 50%, transparent); }
.hero .subtitle { display: block; margin-top: var(--space-xs); font-family: var(--font-body); font-size: var(--text-lg); font-weight: 500; letter-spacing: 0.06em; color: color-mix(in oklch, var(--color-white) 82%, transparent); }
.hero-lede { max-width: 38rem; margin: var(--space-lg) 0; font-size: var(--text-lg); }
.tag-row, .cta-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.tag { border: var(--rule-thin) solid color-mix(in oklch, var(--color-white) 32%, transparent); background: color-mix(in oklch, var(--color-black) 18%, transparent); padding: 0.3rem 0.66rem; border-radius: 999px; font-size: var(--text-xs); white-space: nowrap; }
.cta-row { margin-top: var(--space-lg); }
.buy-card { align-self: stretch; display: grid; grid-template-columns: 7.1rem minmax(0, 1fr); gap: var(--space-md); padding: var(--space-md); background: color-mix(in oklch, var(--color-surface-dark) 88%, transparent); border: var(--rule-thin) solid color-mix(in oklch, var(--color-white) 20%, transparent); box-shadow: var(--shadow-soft); }
.buy-card img { width: 100%; aspect-ratio: 267 / 400; object-fit: cover; }
.buy-meta { display: flex; flex-direction: column; justify-content: space-between; min-width: 0; }
.buy-meta h2 { font-family: var(--font-body); font-size: var(--text-lg); }
.meta-list { display: grid; gap: var(--space-xs); margin: var(--space-sm) 0; font-size: var(--text-sm); }
.meta-list span { display: block; color: color-mix(in oklch, var(--color-white) 65%, transparent); }

.fact-strip { position: relative; z-index: 2; margin-top: -1.5rem; }
.facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--color-surface); border-top: 0.25rem solid var(--color-forest); box-shadow: var(--shadow-soft); }
.fact { min-width: 0; padding: var(--space-lg); border-right: var(--rule-thin) solid var(--color-rule); }
.fact:last-child { border-right: 0; }
.fact dt { font-size: var(--text-xs); color: var(--color-ink-soft); letter-spacing: 0.08em; }
.fact dd { margin: var(--space-xs) 0 0; font-weight: 800; overflow-wrap: anywhere; }

.section { padding-block: var(--space-3xl); }
.section-tight { padding-block: var(--space-2xl); }
.section-dark { background: var(--color-surface-dark); color: var(--color-white); }
.section-white { background: var(--color-surface); }
.section-head { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: var(--space-2xl); align-items: end; margin-bottom: var(--space-xl); padding-bottom: var(--space-md); border-bottom: var(--rule-strong) solid var(--color-ink); }
.section-dark .section-head { border-color: color-mix(in oklch, var(--color-white) 35%, transparent); }
.section-head h2 { font-size: var(--text-2xl); }
.section-head p { margin: 0; color: var(--color-ink-soft); }
.section-dark .section-head p { color: color-mix(in oklch, var(--color-white) 72%, transparent); }

.store-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(16rem, 0.75fr); gap: var(--space-2xl); align-items: start; }
.main-shot { position: relative; margin: 0; background: var(--color-black); overflow: clip; }
.main-shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.shot-caption { position: absolute; inset: auto var(--space-md) var(--space-md); padding: var(--space-xs) var(--space-sm); background: color-mix(in oklch, var(--color-black) 68%, transparent); color: var(--color-white); font-size: var(--text-sm); }
.thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-sm); margin-top: var(--space-sm); }
.thumbs a { display: block; border: var(--rule-strong) solid transparent; }
.thumbs a:hover, .thumbs a[aria-current="true"] { border-color: var(--color-orange); }
.thumbs img { aspect-ratio: 16 / 9; object-fit: cover; }
.summary-card { border-top: 0.25rem solid var(--color-berry); padding: var(--space-lg); background: var(--color-surface); box-shadow: 0 0.5rem 1.5rem color-mix(in oklch, var(--color-black) 8%, transparent); }
.summary-card h3 { margin-bottom: var(--space-md); }
.key-list { list-style: none; padding: 0; margin: 0; }
.key-list li { display: grid; grid-template-columns: 6.25rem minmax(0, 1fr); gap: var(--space-sm); padding: 0.66rem 0; border-bottom: var(--rule-thin) solid var(--color-rule); }
.key-list li:last-child { border-bottom: 0; }
.key-list strong { font-size: var(--text-sm); color: var(--color-ink-soft); }

.feature-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.feature { position: relative; min-height: 15rem; padding: var(--space-xl); background: var(--color-surface); border: var(--rule-thin) solid var(--color-rule); box-shadow: inset 0 0 0 0 var(--color-forest); transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out); }
.feature:hover { transform: translateY(-3px); box-shadow: inset 0.25rem 0 0 var(--color-forest), 0 0.75rem 1.6rem color-mix(in oklch, var(--color-black) 8%, transparent); }
.feature-index { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--color-berry); }
.feature h3 { margin: var(--space-xl) 0 var(--space-sm); font-size: var(--text-xl); }

.story-grid { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: var(--space-2xl); align-items: start; }
.story-title { position: sticky; top: 7rem; }
.story-title h2 { font-size: clamp(2rem, 4vw, 4rem); color: var(--color-gold); }
.story-copy { font-size: var(--text-lg); }
.timeline { margin: var(--space-xl) 0 0; padding: 0; list-style: none; border-left: var(--rule-strong) solid var(--color-earth); }
.timeline li { position: relative; padding: 0 0 var(--space-lg) var(--space-xl); }
.timeline li::before { content: ""; position: absolute; left: -0.45rem; top: 0.45rem; width: 0.75rem; aspect-ratio: 1; border-radius: 50%; background: var(--color-orange); }
.timeline strong { display: block; color: var(--color-gold); }

.audience-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: var(--rule-thin) solid var(--color-rule); }
.audience { min-height: 10rem; padding: var(--space-xl); background: var(--color-surface); border-right: var(--rule-thin) solid var(--color-rule); border-bottom: var(--rule-thin) solid var(--color-rule); }
.audience:nth-child(2n) { border-right: 0; }
.audience h3 { margin-bottom: var(--space-sm); font-size: var(--text-xl); }
.audience.no { background: color-mix(in oklch, var(--color-berry) 5%, var(--color-surface)); }

.notice { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); padding: var(--space-lg); border-left: 0.35rem solid var(--color-berry); background: color-mix(in oklch, var(--color-berry) 7%, var(--color-surface)); }
.notice-badge { align-self: start; background: var(--color-berry); color: var(--color-white); padding: 0.3rem 0.55rem; font-weight: 800; white-space: nowrap; }

.download-panel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-xl); align-items: center; padding: var(--space-xl); background: var(--color-forest-dark); color: var(--color-white); border-top: 0.3rem solid var(--color-orange); }
.download-panel p { margin: var(--space-xs) 0 0; color: color-mix(in oklch, var(--color-white) 76%, transparent); }
.download-facts { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.download-facts span { padding: 0.35rem 0.6rem; border: var(--rule-thin) solid color-mix(in oklch, var(--color-white) 24%, transparent); font-size: var(--text-sm); white-space: nowrap; }

.faq { display: grid; gap: var(--space-sm); }
.faq details { background: var(--color-surface); border: var(--rule-thin) solid var(--color-rule); }
.faq summary { padding: var(--space-md) var(--space-lg); cursor: pointer; font-weight: 800; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; float: right; color: var(--color-forest); font-size: var(--text-xl); }
.faq details[open] summary::after { content: "−"; }
.faq-answer { padding: 0 var(--space-lg) var(--space-lg); color: var(--color-ink-soft); }

.final-cta { position: relative; overflow: clip; background: var(--color-earth); color: var(--color-white); }
.final-cta::before { content: ""; position: absolute; inset: 0; opacity: 0.22; background-image: repeating-linear-gradient(45deg, transparent 0 1.5rem, color-mix(in oklch, var(--color-black) 22%, transparent) 1.5rem 1.58rem); }
.final-shell { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-xl); padding-block: var(--space-2xl); }
.final-shell h2 { font-size: var(--text-2xl); }
.final-shell p { margin: var(--space-xs) 0 0; }

.footer { background: var(--color-surface-dark); color: color-mix(in oklch, var(--color-white) 70%, transparent); padding: var(--space-2xl) 0 6rem; font-size: var(--text-sm); }
.footer-grid { display: grid; grid-template-columns: 1.3fr 0.7fr 1fr; gap: var(--space-2xl); }
.footer h2, .footer h3 { color: var(--color-white); font-family: var(--font-body); font-size: var(--text-base); margin-bottom: var(--space-md); }
.footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-xs); }
.footer-links a { text-decoration: none; white-space: nowrap; }
.footer-links a:hover { color: var(--color-orange); text-decoration: underline; }
.legal { margin-top: var(--space-xl); padding-top: var(--space-lg); border-top: var(--rule-thin) solid color-mix(in oklch, var(--color-white) 14%, transparent); }

.page-hero { background: var(--color-surface-dark); color: var(--color-white); padding: var(--space-3xl) 0 var(--space-2xl); }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-lg); font-size: var(--text-sm); color: color-mix(in oklch, var(--color-white) 70%, transparent); }
.breadcrumbs a { white-space: nowrap; }
.page-hero h1 { max-width: 50rem; font-size: clamp(2.35rem, 6vw, 4.8rem); }
.page-hero p { max-width: 44rem; margin-top: var(--space-lg); font-size: var(--text-lg); color: color-mix(in oklch, var(--color-white) 76%, transparent); }
.guide-layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: var(--space-2xl); align-items: start; }
.toc { position: sticky; top: 6.5rem; padding: var(--space-lg); border-top: 0.25rem solid var(--color-forest); background: var(--color-surface); }
.toc strong { display: block; margin-bottom: var(--space-sm); }
.toc ol { margin: 0; padding-left: 1.2rem; display: grid; gap: var(--space-xs); }
.toc a { text-decoration: none; }
.article section + section { margin-top: var(--space-2xl); padding-top: var(--space-2xl); border-top: var(--rule-thin) solid var(--color-rule); }
.article h2 { font-size: var(--text-2xl); margin-bottom: var(--space-md); }
.article h3 { font-size: var(--text-xl); margin: var(--space-xl) 0 var(--space-sm); }
.steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: var(--space-md); }
.steps li { counter-increment: step; position: relative; padding: var(--space-lg) var(--space-lg) var(--space-lg) 4.25rem; background: var(--color-surface); border: var(--rule-thin) solid var(--color-rule); }
.steps li::before { content: counter(step); position: absolute; left: var(--space-lg); top: var(--space-lg); width: 2rem; aspect-ratio: 1; display: grid; place-items: center; border-radius: 50%; background: var(--color-forest); color: var(--color-white); font-weight: 900; }
.spec-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.spec-card { background: var(--color-surface); border-top: 0.25rem solid var(--color-forest); padding: var(--space-xl); }
.spec-card h2 { margin-bottom: var(--space-lg); font-size: var(--text-xl); }
.spec-card dl { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--space-sm); margin: 0; }
.spec-card dt { color: var(--color-ink-soft); }
.spec-card dd { margin: 0; }
.route-table { width: 100%; border-collapse: collapse; background: var(--color-surface); }
.route-table th, .route-table td { padding: var(--space-sm) var(--space-md); border: var(--rule-thin) solid var(--color-rule); text-align: left; vertical-align: top; }
.route-table th { background: var(--color-surface-dark); color: var(--color-white); }
.update-card { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-lg); padding: var(--space-lg); border-left: 0.3rem solid var(--color-forest); background: var(--color-surface); }
.version { font-family: var(--font-mono); font-weight: 900; color: var(--color-berry); }

.filters { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-xl); }
.filter { border: var(--rule-thin) solid var(--color-forest); background: transparent; color: var(--color-forest-dark); padding: 0.55rem 0.9rem; border-radius: 999px; white-space: nowrap; cursor: pointer; }
.filter:hover, .filter[aria-pressed="true"] { background: var(--color-forest); color: var(--color-white); }
.filter:active { transform: translateY(1px); }
.filter[disabled] { opacity: 0.45; cursor: not-allowed; }
.filter[data-state="loading"] { cursor: wait; }
.filter[data-state="error"] { border-color: var(--color-danger); color: var(--color-danger); }
.filter[data-state="success"] { border-color: var(--color-success); color: var(--color-success); }
.gallery-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-md); }
.gallery-item { margin: 0; min-width: 0; background: var(--color-surface); border: var(--rule-thin) solid var(--color-rule); }
.gallery-item.is-hidden { display: none; }
.gallery-item a { display: block; overflow: clip; }
.gallery-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.gallery-item a:hover img { transform: scale(1.025); }
.gallery-item figcaption { padding: var(--space-sm) var(--space-md); font-size: var(--text-sm); }

.lightbox { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; background: color-mix(in oklch, var(--color-black) 90%, transparent); padding: var(--space-xl); }
.lightbox.is-open { display: grid; }
.lightbox figure { margin: 0; max-width: min(92vw, 82rem); }
.lightbox img { max-height: 82vh; width: auto; margin: auto; }
.lightbox figcaption { color: var(--color-white); text-align: center; margin-top: var(--space-sm); }
.lightbox-close, .lightbox-prev, .lightbox-next { position: fixed; border: var(--rule-thin) solid color-mix(in oklch, var(--color-white) 45%, transparent); background: color-mix(in oklch, var(--color-black) 55%, transparent); color: var(--color-white); min-width: 2.75rem; min-height: 2.75rem; cursor: pointer; }
.lightbox-close { top: var(--space-md); right: var(--space-md); }
.lightbox-prev, .lightbox-next { top: 50%; transform: translateY(-50%); }
.lightbox-prev { left: var(--space-md); }
.lightbox-next { right: var(--space-md); }
.lightbox button:hover { background: var(--color-forest); }
.lightbox button:active { background: var(--color-orange-dark); }
.lightbox button[disabled] { opacity: 0.35; }

.back-top { position: fixed; right: var(--space-md); bottom: 5.2rem; z-index: 20; display: none; width: 2.75rem; aspect-ratio: 1; border: 0; border-radius: 50%; background: var(--color-surface-dark); color: var(--color-white); cursor: pointer; box-shadow: var(--shadow-soft); }
.back-top.is-visible { display: grid; place-items: center; }
.back-top:hover { background: var(--color-forest); }
.back-top:active { transform: translateY(1px); }
.mobile-cta { display: none; }

@media (max-width: 960px) {
  .nav-shell { gap: var(--space-md); }
  .nav-links { gap: var(--space-md); }
  .hero-shell { grid-template-columns: minmax(0, 1fr); }
  .buy-card { max-width: 34rem; }
  .store-layout, .story-grid { grid-template-columns: minmax(0, 1fr); }
  .story-title { position: static; }
  .feature-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid > :first-child { grid-column: 1 / -1; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 5.5rem; }
  .container, .narrow { width: min(100% - 1.25rem, 74rem); }
  .only-mobile { display: block; }
  .nav-shell { grid-template-columns: minmax(0, 1fr) auto; min-height: 3.7rem; }
  .nav-shell > .btn { display: none; }
  .menu-toggle { display: inline-flex; }
  .nav-links { grid-column: 1 / -1; align-items: stretch; flex-direction: column; gap: 0; padding: var(--space-xs) 0 var(--space-md); }
  .js .nav-links { position: absolute; top: 100%; left: 0; right: 0; display: none; padding-inline: var(--space-md); background: var(--color-surface-dark); border-top: var(--rule-thin) solid color-mix(in oklch, var(--color-white) 12%, transparent); }
  .js .nav-links.is-open { display: flex; }
  .nav-links a { padding: 0.75rem; }
  .nav-links a::after { display: none; }
  .hero-shell { min-height: auto; padding: var(--space-2xl) 0 4rem; }
  .hero::after { background: linear-gradient(0deg, color-mix(in oklch, var(--color-black) 82%, transparent), color-mix(in oklch, var(--color-black) 38%, transparent)); }
  .hero-media img { object-position: 54% center; }
  .buy-card { grid-template-columns: 6rem minmax(0, 1fr); }
  .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fact { border-bottom: var(--rule-thin) solid var(--color-rule); }
  .fact:nth-child(2n) { border-right: 0; }
  .section { padding-block: var(--space-2xl); }
  .section-head { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .feature-list, .gallery-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .download-panel, .final-shell { grid-template-columns: minmax(0, 1fr); }
  .guide-layout { grid-template-columns: minmax(0, 1fr); }
  .toc { position: static; }
  .spec-grid { grid-template-columns: minmax(0, 1fr); }
  .route-table-wrap { overflow-x: auto; }
  .mobile-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-sm); align-items: center; padding: var(--space-sm) max(var(--space-sm), env(safe-area-inset-left)); background: var(--color-surface-dark); color: var(--color-white); border-top: var(--rule-thin) solid color-mix(in oklch, var(--color-white) 18%, transparent); }
  .mobile-cta span { min-width: 0; font-size: var(--text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .footer { padding-bottom: 7rem; }
}

@media (max-width: 480px) {
  .brand { font-size: var(--text-sm); }
  .hero h1 { font-size: clamp(2.3rem, 16vw, 3.8rem); }
  .hero-lede { font-size: var(--text-base); }
  .cta-row { display: grid; }
  .cta-row .btn { width: 100%; }
  .buy-card { grid-template-columns: 5.3rem minmax(0, 1fr); padding: var(--space-sm); }
  .fact { padding: var(--space-md); }
  .feature-list, .audience-grid, .gallery-grid, .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .audience { border-right: 0; }
  .notice { grid-template-columns: minmax(0, 1fr); }
  .download-panel { padding: var(--space-lg); }
  .download-panel .btn, .final-shell .btn { width: 100%; }
  .update-card { grid-template-columns: minmax(0, 1fr); }
  .route-table { min-width: 37rem; }
  .lightbox { padding: var(--space-xs); }
  .lightbox-prev { left: var(--space-xs); }
  .lightbox-next { right: var(--space-xs); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  .hero-media img { transform: none; }
}