@font-face {
  font-family: "Barlow Condensed";
  src: url("/fonts/barlow-condensed-800.woff2") format("woff2");
  font-style: normal;
  font-weight: 800;
  font-display: swap;
}

:root {
  color-scheme: light;
  --paper: #f3f3ea;
  --panel: #fdfdf7;
  --ink: #171a15;
  --dark: #181b17;
  --dark-2: #21261e;
  --dark-line: #3d4437;
  --lime: #dcfb63;
  --olive: #42531b;
  --line: #d9dcce;
  --mute: #515a4b;
  --soft: #c5cbbd;
  --display: "Barlow Condensed", "Arial Narrow", "Segoe UI", sans-serif;
  --body: system-ui, -apple-system, "Segoe UI", sans-serif;
  --round: 14px;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 5.5rem; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 1rem/1.62 var(--body); }
button, input, summary { font: inherit; }
button, summary { cursor: pointer; }
a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
p, figure, h1, h2, h3, dl, dd { margin: 0; }
h1, h2 { font: 800 3rem/.98 var(--display); letter-spacing: -.015em; }
h3 { font-size: 1.06rem; line-height: 1.33; }
ol, ul { margin: 0; padding: 0; }
:focus-visible { outline: 3px solid #64821e; outline-offset: 4px; }
.site-header :focus-visible, .site-footer :focus-visible, .masthead :focus-visible,
.doc-hero :focus-visible, .track-board :focus-visible { outline-color: var(--lime); }
.wrap { width: min(100% - 80px, 1250px); margin-inline: auto; }
.icon { flex: none; width: 1.25rem; height: 1.25rem; display: inline-block; vertical-align: middle; }
.sr-only, .skip-link:not(:focus) {
  position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
.skip-link { position: fixed; z-index: 40; top: 10px; left: 10px; padding: .6rem .9rem; background: var(--lime); color: var(--ink); font-weight: 700; }
.eyebrow { display: flex; align-items: center; gap: .6rem; color: var(--olive); font-size: .875rem; font-weight: 750; letter-spacing: .095em; line-height: 1.3; }
.slash { width: 18px; height: 9px; background: currentColor; clip-path: polygon(25% 0,100% 0,75% 100%,0 100%); flex: none; }
.lede { font-size: 1.05rem; line-height: 1.62; color: var(--soft); max-width: 37rem; }
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; }
.button {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 46px; padding: .64rem .96rem; border: 1px solid transparent;
  border-radius: 8px; font-size: .9375rem; font-weight: 730; line-height: 1.25; text-decoration: none;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}
.button-primary { background: var(--lime); color: #151a0e; }
.button-primary:hover { background: #e9ff97; }
.button-dark { background: #2b3028; color: #f2f5eb; border-color: #454e3f; }
.button-dark:hover { background: #373f30; border-color: #72805f; }
.button-ink { background: var(--ink); color: #f8faee; }
.button-ink:hover { background: #344029; }
.button-line { color: var(--ink); border-color: #adb5a0; background: transparent; }
.button-line:hover { border-color: var(--ink); background: #e7ebd8; }
.text-link { display: inline-flex; align-items: center; gap: .4rem; font-weight: 730; color: #384a17; text-underline-offset: .22em; }

.site-header { position: sticky; z-index: 20; top: 0; background: #141713; color: #f7f9f0; border-bottom: 1px solid #383e34; }
.header-row { display: flex; justify-content: space-between; align-items: center; gap: 1.4rem; min-height: 68px; }
.brand { display: inline-flex; flex: none; align-items: center; gap: .65rem; font: 800 1.7rem/1 var(--display); text-decoration: none; letter-spacing: .03em; }
.brand > svg { border-radius: 6px; }
.brand-number { color: var(--lime); margin-left: .18em; }
.main-nav, .header-tools { display: flex; align-items: center; gap: .4rem; }
.main-nav a, .search-trigger, .mobile-nav summary {
  min-height: 44px; display: inline-flex; align-items: center; justify-content: center;
  gap: .38rem; padding: .52rem .78rem; font-size: .9375rem; font-weight: 650; line-height: 1.25;
  border: 1px solid transparent; border-radius: 8px; color: var(--soft); text-decoration: none;
}
.main-nav a:hover, .main-nav [aria-current="page"] { background: #272e24; color: #f4f8e8; }
.main-nav [aria-current="page"] { color: var(--lime); }
.search-trigger, .mobile-nav summary { background: #242a21; border-color: var(--dark-line); color: #f4f6ec; }
.search-trigger:hover, .mobile-nav summary:hover { background: #353d2f; }
.mobile-nav { display: none; position: relative; }
.mobile-nav summary { list-style: none; width: 46px; padding: 0; }
.mobile-nav summary::-webkit-details-marker { display: none; }
.mobile-nav nav {
  position: absolute; right: 0; top: calc(100% + .65rem); width: min(260px, 84vw);
  display: grid; padding: .45rem; background: var(--dark); border: 1px solid var(--dark-line);
  border-radius: 10px; box-shadow: 0 12px 28px #0004;
}
.mobile-nav nav a { padding: .68rem .85rem; border-radius: 6px; color: #edf2e2; text-decoration: none; }
.mobile-nav nav a:hover, .mobile-nav [aria-current="page"] { background: var(--dark-2); color: var(--lime); }

.masthead, .doc-hero {
  color: #f9faf2;
  background: radial-gradient(ellipse at 76% 2%, #2b3225 0, #1b2019 37%, transparent 73%), var(--dark);
}
.masthead { padding: clamp(2.6rem, 5vw, 4.5rem) 0 clamp(2.4rem, 4.5vw, 4.1rem); }
.masthead-grid { display: grid; grid-template-columns: .82fr 1.18fr; gap: clamp(1.7rem, 4vw, 4rem); align-items: center; }
.mast-copy { min-width: 0; }
.masthead .eyebrow, .doc-hero .eyebrow, .track-board .eyebrow { color: var(--lime); }
.masthead h1 { margin: .6rem 0 .9rem; font-size: clamp(3.4rem, 6.3vw, 6.3rem); line-height: .88; }
.masthead h1 em { display: block; font-style: normal; color: var(--lime); }
.mast-copy .actions { margin-top: 1.45rem; }
.mast-note { display: flex; align-items: center; gap: .4rem; margin-top: 1.12rem; color: var(--soft); font-size: .875rem; }
.mast-note .icon { color: var(--lime); width: 1.05rem; height: 1.05rem; }
.photo { position: relative; margin: 0; min-width: 0; overflow: hidden; border-radius: var(--round); border: 1px solid #434c3d; background: #222820; color: #edf0e6; }
.photo-bar {
  display: flex; align-items: center; gap: .5rem; min-height: 43px; padding: .54rem .8rem;
  color: #e8eddf; font-size: .875rem; font-weight: 720; letter-spacing: .06em; line-height: 1.3;
}
.photo-light { width: 8px; height: 8px; border-radius: 50%; background: var(--lime); flex: none; }
.photo-bar-end { color: #c3cdb7; margin-left: auto; font-weight: 600; }
.photo-open { display: block; background: #111411; }
.photo-open:focus-visible { outline-offset: -4px; }
.photo-open img { width: 100%; }
.photo-zoom {
  position: absolute; right: .5rem; bottom: .35rem; display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 7px; background: #141814e8; color: #f2f5ea; border: 1px solid #a3ab99;
}
.photo-open:hover .photo-zoom { background: var(--lime); color: var(--ink); border-color: var(--lime); }
.photo figcaption { display: flex; align-items: center; min-height: 52px; padding: .65rem 3.6rem .65rem .8rem; color: #d7ded0; font-size: .875rem; line-height: 1.45; }
.mast-photo { box-shadow: 0 17px 44px #060a063c; }
.stat-strip { background: #252a21; color: #f3f6ea; border-block: 1px solid var(--dark-line); }
.stats { display: grid; grid-template-columns: repeat(4, 1fr); border-left: 1px solid var(--dark-line); }
.stats > div { display: flex; flex-direction: column-reverse; justify-content: center; min-height: 86px; padding: .75rem 1.2rem; border-right: 1px solid var(--dark-line); }
.stats dt { font-size: .875rem; color: var(--soft); font-weight: 650; }
.stats dd { font: 800 clamp(1.9rem, 3vw, 2.55rem)/1 var(--display); color: var(--lime); }

.home-section { margin-block: clamp(2.75rem, 6vw, 5.2rem); }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 1.2rem 2.4rem; margin-bottom: 1.35rem; }
.section-head h2, .garage-copy h2, .install-copy h2, .first-steps h2 { margin-top: .35rem; font-size: clamp(2.3rem, 4.5vw, 4.3rem); }
.section-head > p { max-width: 29rem; color: var(--mute); }
.guide-grid { display: grid; gap: .8rem; }
.guide-primary { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.guide-secondary { grid-template-columns: repeat(4, 1fr); margin-top: .8rem; }
.guide-card {
  min-width: 0; position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: .45rem;
  padding: 1.05rem; background: var(--panel); border: 1px solid var(--line); border-radius: var(--round);
  text-decoration: none; transition: background-color 160ms ease, border-color 160ms ease;
}
.guide-card:hover { background: #f0f6dd; border-color: #99a881; }
.guide-feature { padding: 1.25rem; }
.guide-icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 8px; background: #e9efda; color: #42531b; }
.guide-feature .guide-icon { background: var(--lime); color: var(--ink); }
.guide-arrow { position: absolute; right: .95rem; top: 1.05rem; color: #536344; }
.guide-name { font: 800 1.9rem/1 var(--display); margin-top: .25rem; }
.guide-text { font-size: .9375rem; color: var(--mute); line-height: 1.48; }
.studio-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; list-style: none; }
.studio-card {
  min-width: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--round);
}
.studio-card img { width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: var(--dark); }
.studio-card-body { display: flex; flex: 1; flex-direction: column; gap: .45rem; padding: 1rem; }
.studio-card h3 { font: 800 1.75rem/1.08 var(--display); }
.studio-card p { color: var(--mute); font-size: .9375rem; line-height: 1.48; }
.studio-links { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: auto; padding-top: .35rem; }
.track-board { background: var(--dark); color: #f5f7ed; border-radius: var(--round); padding: clamp(1.15rem, 3vw, 2.25rem); }
.track-board .section-head > p { color: var(--soft); }
.track-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: .65rem; }
.track-tile {
  min-width: 0; min-height: 179px; display: flex; flex-direction: column; align-items: flex-start; padding: .9rem;
  color: inherit; text-decoration: none; border: 1px solid var(--dark-line); border-radius: 9px; background:
  repeating-linear-gradient(125deg, transparent, transparent 15px, #a1b79112 15px, #a1b79112 16px, transparent 16px, transparent 30px) right top / 58px 67px no-repeat,
  var(--dark-2);
}
a.track-tile:hover { border-color: var(--lime); background-color: #2c3823; }
.track-code { color: var(--soft); font-size: .875rem; letter-spacing: .08em; }
.track-mark { color: var(--lime); font: 800 2.55rem/1 var(--display); margin: .28rem 0 .5rem; }
.track-mark small { color: var(--soft); font: 680 .875rem/1.2 var(--body); }
.track-name { font-weight: 730; }
.track-desc { color: var(--soft); font-size: .875rem; line-height: 1.5; margin-top: .28rem; }
.garage-feature { display: grid; grid-template-columns: 1.12fr .88fr; align-items: center; gap: clamp(1.1rem, 4.5vw, 4rem); }
.garage-copy > p:not(.eyebrow), .install-copy > p:not(.eyebrow) { color: var(--mute); margin: .72rem 0 1.1rem; max-width: 36rem; }
.first-steps { display: grid; grid-template-columns: .8fr 1.2fr; gap: 1.3rem clamp(2rem, 7vw, 6rem); align-items: start; border-top: 1px solid var(--line); padding-top: 1.8rem; }
.first-steps .button { margin-top: 1rem; }
.steps { list-style: none; display: grid; gap: .8rem; }
.steps li { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: .75rem; }
.steps li + li { border-top: 1px solid var(--line); padding-top: .8rem; }
.step-no { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; border-radius: 8px; background: #e3ebca; color: #40511b; font-size: .875rem; font-weight: 800; }
.steps h3 { margin: .12rem 0 .2rem; }
.steps p { color: var(--mute); }
.update-banner { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 1.2rem; padding: clamp(1.2rem, 3vw, 2rem); background: #e7efcb; border: 1px solid #c8d4a6; border-radius: var(--round); }
.version-mark { display: grid; place-items: center; padding: .45rem .9rem .62rem; background: var(--ink); color: var(--lime); border-radius: 8px; font: 800 3.15rem/1 var(--display); }
.update-banner h2 { margin: .2rem 0 .42rem; font-size: clamp(2.2rem, 4vw, 3.25rem); }
.update-banner p:not(.eyebrow) { color: #404a33; }
.date-line { display: flex; align-items: center; gap: .4rem; font-size: .875rem; margin-top: .65rem; color: var(--soft); flex-wrap: wrap; }
.date-line .icon { width: 1rem; height: 1rem; }
.install-section { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 1.35rem 2.5rem; }
.store-card {
  display: grid; grid-template-columns: 3.15rem minmax(0, 1fr) auto; gap: .75rem; align-items: center;
  background: var(--dark); border: 1px solid var(--dark-line); color: #f4f6ed; border-radius: var(--round); padding: .9rem;
}
.store-card img { width: 3.15rem; height: 3.15rem; border-radius: 9px; }
.store-card strong, .store-card span { display: block; }
.store-card div > span { font-size: .875rem; color: var(--soft); }
.store-card .button { align-self: center; }

.doc-hero { padding: 1.25rem 0 2.6rem; border-bottom: 1px solid var(--dark-line); }
.crumbs { display: flex; gap: .45rem; align-items: center; margin-bottom: 1.4rem; color: var(--soft); font-size: .875rem; }
.crumbs a { text-underline-offset: .22em; }
.crumbs [aria-current="page"] { color: #f4f6ed; }
.crumbs .icon { width: 1rem; height: 1rem; }
.doc-hero-grid { display: grid; align-items: center; grid-template-columns: .93fr 1.07fr; gap: clamp(1.15rem, 4vw, 3.2rem); }
.doc-heading h1 { font-size: clamp(2.75rem, 5vw, 5rem); margin: .45rem 0 .75rem; }
.doc-heading .actions { margin-top: 1.1rem; }
.doc-grid { display: grid; align-items: start; grid-template-columns: minmax(0, 1fr) minmax(225px, 270px); gap: clamp(1.6rem, 5.4vw, 5rem); padding-block: 2.2rem 4.5rem; }
.doc-sidebar { position: sticky; top: 5.5rem; }
.toc, .toc-mobile { border: 1px solid var(--line); background: var(--panel); border-radius: 12px; padding: .95rem; }
.toc > p, .toc-mobile summary { display: flex; align-items: center; gap: .55rem; font-weight: 750; }
.toc .icon, .toc-mobile .icon { color: #4b5d24; }
.toc ol, .toc-mobile ol { list-style: none; display: grid; gap: .18rem; margin-top: .6rem; }
.toc a, .toc-mobile a { display: block; padding: .4rem .45rem; text-decoration: none; color: var(--mute); font-size: .9375rem; border-radius: 5px; line-height: 1.4; }
.toc a:hover, .toc-mobile a:hover { background: #e8eedb; color: var(--ink); }
.toc-mobile { display: none; }
.toc-mobile summary { list-style: none; min-height: 44px; }
.toc-mobile summary::-webkit-details-marker { display: none; }
.toc-mobile summary::after { content: "+"; margin-left: auto; font-size: 1.2rem; }
.toc-mobile[open] summary::after { content: "−"; }
.article-body { min-width: 0; }
.reading-section + .reading-section { margin-top: 1.8rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.reading-section h2 { font-size: clamp(2rem, 3.7vw, 3rem); line-height: 1.03; margin-bottom: .7rem; }
.reading-section > p, .reading-section .steps p { max-width: 73ch; }
.reading-section > p + p { margin-top: .7rem; }
.questions { display: grid; gap: .95rem; max-width: 73ch; }
.questions h3 { margin-bottom: .22rem; }
.reading-section p a, .sources a { color: #3f5418; font-weight: 660; text-underline-offset: .19em; }
.reading-section p a:hover, .sources a:hover { text-decoration-thickness: 2px; }
.reading-section .photo, .reading-section .steps, .table-shell, .bike-list, .callout, .reward-grid, .current-version, .reading-section .store-card { margin-top: .95rem; }
.bike-list { list-style: none; border: 1px solid var(--line); border-radius: var(--round); overflow: hidden; background: var(--panel); }
.bike-list li { display: grid; grid-template-columns: 2.45rem minmax(0, 1fr) auto; gap: .7rem; align-items: start; padding: .83rem; }
.bike-list li + li { border-top: 1px solid var(--line); }
.bike-index { color: #546734; font: 800 1.7rem/1 var(--display); }
.bike-list h3 { font-size: 1.16rem; margin-bottom: .24rem; }
.bike-list p { font-size: .9375rem; line-height: 1.5; color: var(--mute); }
.bike-list p + p { margin-top: .26rem; }
.price { display: inline-flex; align-items: center; gap: .3rem; padding: .3rem .55rem; border-radius: 7px; background: #ebf0d8; color: #36491c; font-size: .875rem; font-weight: 780; white-space: nowrap; }
.price .icon { width: 1rem; height: 1rem; }
.table-shell { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); }
table { border-collapse: collapse; width: 100%; text-align: left; line-height: 1.48; }
th, td { padding: .68rem .7rem; vertical-align: top; font-size: .9375rem; }
thead th { background: #e6ecd7; }
tbody th, tbody td { border-top: 1px solid var(--line); }
tbody th { white-space: nowrap; }
.reward-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; }
.reward-grid > div, .current-version { display: flex; gap: .75rem; align-items: center; padding: .75rem; border: 1px solid var(--line); border-radius: 10px; background: #e8efd1; }
.reward-grid strong, .current-version strong { font: 800 2.6rem/.95 var(--display); color: #42541e; }
.reward-grid p, .current-version p { color: var(--mute); font-size: .9375rem; }
.current-version { padding: .9rem; }
.current-version span { font-weight: 700; }
.release-store { margin-top: .75rem; }
.callout { border-left: 4px solid #90a94f; padding: .75rem .85rem; background: #e9eddb; border-radius: 0 7px 7px 0; }
.callout p { margin-top: .18rem; }
.sources { list-style: none; display: grid; gap: .68rem; }
.sources span { display: block; color: var(--mute); font-size: .875rem; }
.related-list { display: grid; gap: .45rem; list-style: none; }
.related-list a { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr) 1.25rem; align-items: center; gap: .65rem; padding: .68rem .75rem; border: 1px solid var(--line); border-radius: 8px; background: var(--panel); text-decoration: none; }
.related-list a:hover { background: #eaf0d8; border-color: #9aaa88; }
.related-list a span span { display: block; color: var(--mute); font-size: .875rem; line-height: 1.45; }
.related-list a > .icon { color: #50622f; }

.site-footer { background: #171b16; color: #ecf1e3; padding: 2.25rem 0 1.2rem; }
.footer-grid { display: grid; grid-template-columns: 1.1fr 1fr .8fr; gap: 1.15rem 1.65rem; }
.footer-brand p { color: var(--soft); font-size: .9375rem; max-width: 22rem; margin-top: .6rem; }
.footer-nav nav { display: flex; flex-wrap: wrap; gap: .25rem .85rem; margin-top: .38rem; }
.footer-nav a, .footer-official a, .footer-sources a { color: #dce4d3; font-size: .9375rem; text-decoration: underline; text-decoration-color: #88957e; text-underline-offset: .21em; }
.footer-nav a:hover, .footer-official a:hover, .footer-sources a:hover { color: var(--lime); }
.footer-official a { display: block; margin-top: .38rem; }
.footer-sources { margin-top: 1.25rem; border-top: 1px solid var(--dark-line); padding-top: .7rem; }
.footer-sources .sources { margin-top: .35rem; display: flex; flex-wrap: wrap; gap: .35rem 1.15rem; }
.footer-sources .sources span { display: none; }
.footer-credit { border-top: 1px solid var(--dark-line); margin-top: 1.2rem; padding-top: .75rem; font-size: .875rem; color: var(--soft); }
.error-page { padding-block: 4.5rem; min-height: 50vh; }
.error-page h1 { margin: .55rem 0 .75rem; font-size: clamp(2.85rem, 6vw, 4.7rem); }
.error-page .button { margin-top: 1rem; }

dialog { border: 1px solid var(--line); border-radius: var(--round); max-height: 88vh; padding: 1rem; color: var(--ink); background: var(--panel); box-shadow: 0 16px 55px #0004; }
dialog::backdrop { background: #0a0e0ac9; }
.search-dialog { width: min(540px, 100% - 28px); }
.dialog-top { display: flex; align-items: center; justify-content: space-between; gap: .6rem; margin-bottom: .55rem; }
.dialog-top h2 { font-size: 2rem; }
.close-dialog { display: grid; place-items: center; border: 1px solid var(--line); border-radius: 7px; background: #ebeee1; color: var(--ink); width: 44px; height: 44px; }
.close-dialog:hover { background: #dce7c1; }
.search-field { display: flex; align-items: center; gap: .35rem; background: var(--paper); padding: 0 .55rem; border: 1px solid #a7b19b; border-radius: 8px; }
.search-field input { width: 100%; min-width: 0; min-height: 47px; padding: .45rem; background: transparent; border: 0; border-radius: 6px; color: var(--ink); font-size: 1rem; }
.search-field input:focus-visible { outline-offset: -2px; }
.search-message { margin: .65rem 0 .35rem; font-size: .875rem; color: var(--mute); }
.search-results { list-style: none; }
.search-results a { display: block; padding: .55rem .45rem; border-top: 1px solid var(--line); text-decoration: none; }
.search-results a:hover { background: #edf1e0; }
.search-results span { display: block; font-size: .875rem; color: var(--mute); }
.photo-dialog { width: min(1060px, 100% - 28px); background: var(--dark); border-color: var(--dark-line); color: #f2f4ed; }
.photo-dialog img { width: 100%; max-height: 68vh; object-fit: contain; }
.photo-dialog-caption { color: var(--soft); font-size: .875rem; padding-top: .5rem; }

@media (max-width: 1040px) {
  .wrap { width: min(100% - 56px, 1250px); }
  .store-card { grid-template-columns: 3rem minmax(0, 1fr); }
  .store-card .button { grid-column: 1 / -1; justify-self: start; }
  .reading-section .store-card { grid-template-columns: 3.15rem minmax(0, 1fr) auto; }
  .reading-section .store-card .button { grid-column: auto; }
}
@media (max-width: 880px) {
  .main-nav { display: none; }
  .mobile-nav { display: block; }
  .masthead-grid, .doc-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
  .masthead h1 { font-size: clamp(3.5rem, 10vw, 5.3rem); }
  .mast-note { display: none; }
  .doc-hero { padding-bottom: 1.65rem; }
  .doc-grid { grid-template-columns: minmax(0, 1fr); gap: 1rem; padding-block: 1.2rem 3rem; }
  .doc-sidebar { display: none; }
  .toc-mobile { display: block; padding-block: .25rem; }
  .toc-mobile[open] { padding-bottom: .7rem; }
  .guide-primary, .guide-secondary, .track-grid, .studio-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  html { scroll-padding-top: 4.7rem; }
  .wrap { width: calc(100% - 32px); }
  .header-row { min-height: 60px; gap: .6rem; }
  .brand { gap: .44rem; font-size: 1.57rem; }
  .brand > svg { width: 32px; height: 32px; }
  .header-tools { gap: .3rem; }
  .search-trigger { padding-inline: .45rem; }
  .masthead { padding: 1.65rem 0 1.25rem; }
  .masthead h1 { margin-block: .55rem .72rem; font-size: clamp(3rem, 12.5vw, 4.5rem); }
  .lede { font-size: 1rem; }
  .mast-copy .actions { margin-top: 1.05rem; }
  .stats { grid-template-columns: repeat(2, 1fr); }
  .stats > div { min-height: 70px; padding: .55rem .75rem; }
  .stats > div:nth-child(-n+2) { border-bottom: 1px solid var(--dark-line); }
  .section-head { display: block; }
  .section-head > p { margin-top: .56rem; }
  .guide-primary, .studio-grid { grid-template-columns: minmax(0, 1fr); }
  .guide-card, .guide-feature { padding: .8rem; }
  .guide-icon { width: 38px; height: 38px; }
  .guide-name { font-size: 1.72rem; }
  .guide-arrow { top: .83rem; right: .75rem; }
  .garage-feature, .first-steps, .install-section, .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .garage-feature .garage-copy { grid-row: 1; }
  .update-banner { grid-template-columns: minmax(0, 1fr); gap: .65rem; }
  .update-banner .version-mark { justify-self: start; }
  .update-banner .button { justify-self: start; }
  .doc-hero { padding-top: .75rem; }
  .crumbs { margin-bottom: .95rem; }
  .doc-heading h1 { font-size: clamp(2.65rem, 11vw, 3.7rem); }
  .reading-section .store-card, .store-card { grid-template-columns: 3rem minmax(0, 1fr); }
  .reading-section .store-card .button, .store-card .button { grid-column: 1 / -1; }
  .site-footer { padding-top: 1.45rem; }
}
@media (max-width: 410px) {
  .track-tile { padding: .68rem; }
  .track-mark small { display: block; margin-top: .1rem; }
  .bike-list li { grid-template-columns: 1.65rem minmax(0, 1fr) auto; padding: .65rem; gap: .4rem; }
  .price { padding-inline: .34rem; }
  th, td { padding: .48rem .37rem; }
  tbody th { white-space: normal; }
  .reward-grid > div { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}