:root {
  /* One page edge for the header, every section, the footer and the floating
     button, so the hero lines up with the logo and the form with the header
     button at every width. Content stops widening past --max. */
  --gutter: clamp(16px, 4vw, 48px);
  --max: 1536px;
  --edge: max(var(--gutter), calc((100vw - var(--max)) / 2));
  --cream: #fff8eb;
  --ink: #121212;
  --yellow: #ffc51a;
  --green: #b8f27c;
  --pink: #ff8fb1;
  --sky: #bfe9ff;
  --muted: #4a4a4a;
  --shadow: 4px 4px 0 var(--ink);
  --shadow-big: 8px 8px 0 var(--ink);
  --display: "Space Grotesk", Inter, system-ui, sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font: 16px/1.55 Inter, system-ui, sans-serif;
  overflow-x: hidden;
}
a { color: inherit; }
h1, h2, h3, .big, .logo, .btn, .card-num, .pill { font-family: var(--display); }
/* No one-word last lines: headings balance their lines, body text avoids orphans. */
h1, h2, h3, h4, .big { text-wrap: balance; }
p, li, blockquote, .size-len, .hint { text-wrap: pretty; }
/* Short descriptions (one to four lines) split evenly instead of leaving a stub. */
.lede, .sub, .sd-intro, .guide-sub p, .fine, .card p, .callout p, .page-hero .lede { text-wrap: balance; }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 16px; top: 16px; z-index: 50; background: var(--yellow); padding: 8px 12px; border: 2px solid var(--ink); }

/* Nav */
.nav {
  display: flex; align-items: center; gap: 24px;
  padding: 14px var(--edge);
  border-bottom: 2px solid var(--ink);
  background: var(--cream);
  position: sticky; top: 0; z-index: 20;
}
.logo { font-weight: 700; font-size: 20px; letter-spacing: -0.5px; text-decoration: none; display: flex; align-items: center; gap: 4px; }
.logo-wheel { width: 18px; height: 18px; border-radius: 50%; background: var(--ink); box-shadow: inset 0 0 0 5px var(--ink), inset 0 0 0 9px var(--yellow); display: inline-block; }
.nav nav { display: flex; align-items: center; gap: 22px; margin-left: auto; }
.nav nav a:not(.btn) { text-decoration: none; font-weight: 500; font-size: 15px; }
.nav nav a:not(.btn):hover, .nav nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; text-decoration-color: var(--yellow); }
.nav nav a[aria-current] { font-weight: 700; }
.menu-btn { display: none; margin-left: auto; font: 700 13px var(--display); letter-spacing: 1px; background: var(--cream); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; padding: 8px 14px; box-shadow: 3px 3px 0 var(--ink); cursor: pointer; }

/* Buttons */
.btn {
  display: inline-block; text-decoration: none; cursor: pointer;
  font-weight: 700; font-size: 14px; letter-spacing: 0.3px;
  padding: 10px 18px; border: 2px solid var(--ink); border-radius: 999px;
  box-shadow: 3px 3px 0 var(--ink);
  transition: transform .08s, box-shadow .08s;
}
.btn:hover { transform: translate(-2px, -2px); box-shadow: 5px 5px 0 var(--ink); }
.btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.btn-yellow { background: var(--yellow); }
.btn-green { background: var(--green); }
.btn-ink { background: var(--ink); color: var(--cream); box-shadow: 3px 3px 0 var(--yellow); }
.btn-ink:hover { box-shadow: 5px 5px 0 var(--yellow); }
.btn-big { font-size: 18px; padding: 14px 26px; width: 100%; text-align: center; }
.float-cta { position: fixed; right: var(--edge); bottom: 20px; z-index: 30; }
.page-guide .float-cta { display: none; }

/* Ticker */
.ticker { background: var(--yellow); border-bottom: 2px solid var(--ink); overflow: hidden; white-space: nowrap; }
.ticker-track { display: inline-flex; animation: scroll 40s linear infinite; }
.ticker span { font: 700 14px var(--display); letter-spacing: 1px; padding: 9px 22px; }
.ticker span::before { content: "\25CF"; margin-right: 22px; font-size: 9px; vertical-align: middle; }
@keyframes scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .ticker-track { animation: none; } html { scroll-behavior: auto; } }

/* Hero */
.hero {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: 40px 56px; align-items: start;
  padding: clamp(40px, 7vw, 88px) var(--edge) 40px;
}
.eyebrow { text-transform: uppercase; letter-spacing: 2px; font-weight: 700; font-size: 13px; color: var(--muted); margin: 0 0 14px; }
h1 { font-size: clamp(46px, 6.2vw, 96px); line-height: .92; letter-spacing: -0.035em; margin: 0; font-weight: 700; }
.hl { background: var(--yellow); padding: 0 .12em; border: 3px solid var(--ink); box-shadow: var(--shadow); display: inline-block; transform: rotate(-2deg); margin-top: 8px; }
.lede { font-size: 19px; max-width: 44ch; margin: 28px 0 0; }
.hero-links { margin: 28px 0 0; }
.btn-pink { background: var(--pink); }

/* Bus parade: buses are placed by app.js, left to right over two bumps */
.parade { position: relative; height: 150px; overflow: hidden; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); background: var(--sky); }
/* Wheels end 16/210 of the drawing above its bottom edge, so drop the bus by that much onto the road */
.parade-bus { position: absolute; left: 0; bottom: calc(32px - 90px * 16 / 210); display: block; transform-origin: 50% 100%; will-change: transform; transform: translateX(-600px); }
.parade-bus .bus-svg { height: 90px; width: auto; display: block; overflow: visible; }
.parade-bus:focus-visible { outline: 3px solid var(--pink); outline-offset: 4px; border-radius: 8px; }
.road { position: absolute; left: 0; right: 0; bottom: 0; height: 32px; background: #3a3a3a; border-top: 3px solid var(--ink); }
.road::after { content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 4px; background: repeating-linear-gradient(90deg, var(--yellow) 0 34px, transparent 34px 68px); }
.bump { position: absolute; bottom: 100%; left: 34%; width: 60px; height: 12px; margin-left: -30px; margin-bottom: 1px; background: var(--yellow); border: 3px solid var(--ink); border-bottom: 0; border-radius: 60px 60px 0 0; }
.bump-2 { left: 76%; }
.parade-static { display: flex; gap: 40px; align-items: flex-end; padding: 0 24px; overflow-x: auto; }
.parade-static .parade-bus { position: static; transform: none; flex: none; margin-bottom: 30px; }

.finder { grid-column: 2; grid-row: 1; }

/* Cards */
.card {
  position: relative; background: #fff; border: 2px solid var(--ink); border-radius: 18px;
  box-shadow: var(--shadow); padding: 26px 22px 22px;
}
.card-num {
  position: absolute; top: -16px; left: -12px;
  background: var(--ink); color: var(--cream); font-weight: 700; font-size: 14px;
  min-width: 34px; height: 34px; padding: 0 8px; border-radius: 8px;
  display: grid; place-items: center;
}
.finder { box-shadow: var(--shadow-big); background: var(--green); }
.finder h2 { margin: 0 0 16px; font-size: 28px; letter-spacing: -0.5px; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
label { display: grid; gap: 6px; font-weight: 700; font-size: 13px; text-transform: uppercase; letter-spacing: .5px; }
input, select {
  font: 500 17px Inter, system-ui, sans-serif; color: var(--ink);
  padding: 12px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; width: 100%;
}
input:focus, select:focus, .btn:focus-visible, a:focus-visible { outline: 3px solid var(--pink); outline-offset: 2px; }
.finder .btn-big { margin-top: 8px; }
.fine { font-size: 13px; color: var(--muted); margin: 10px 0 0; }

/* Sections */
section { padding: 56px var(--edge); scroll-margin-top: 64px; }
#finder { scroll-margin-top: 90px; }
.band { max-width: none; background: var(--yellow); border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); }
.section-head { margin-bottom: 36px; }
.big { font-size: clamp(40px, 7vw, 84px); line-height: .92; letter-spacing: -0.035em; margin: 0; font-weight: 700; }
.sub { font-size: 18px; max-width: 72ch; margin: 14px 0 0; }
.label { margin: 40px 0 22px; }
.pill { display: inline-block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 6px 14px; border: 2px solid var(--ink); border-radius: 999px; }
.pill-yellow { background: var(--yellow); }
.pill-green { background: var(--green); }
.pill-pink { background: var(--pink); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 28px 24px; }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }

/* Result cards */
.bus h4 { font: 700 19px/1.2 var(--display); margin: 4px 0 10px; letter-spacing: -0.3px; }
.bus .price { font: 700 30px var(--display); letter-spacing: -1px; margin: 0; }
.bus .meta { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 16px; padding: 0; list-style: none; }
.bus .meta li { font-size: 12px; font-weight: 700; border: 2px solid var(--ink); border-radius: 999px; padding: 3px 10px; background: var(--cream); }
.bus:nth-child(3n+1) { background: var(--cream); }
.bus:nth-child(1) { background: var(--yellow); }
.search-card p { margin: 6px 0 16px; }
.empty { border-style: dashed; box-shadow: none; background: transparent; }

/* Sizes: selectable cards and the detail panel */
.size { font: inherit; color: inherit; text-align: left; cursor: pointer; display: grid; gap: 4px; align-content: start; transition: transform .08s, box-shadow .08s, background .12s; }
.size:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-big); }
.size[aria-checked="true"] { background: var(--green); box-shadow: var(--shadow-big); transform: translate(-3px, -3px); }
.size[aria-checked="true"] .card-num { background: var(--pink); color: var(--ink); border: 2px solid var(--ink); }
.size:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; }
.size-art { display: flex; align-items: flex-end; height: 92px; margin: 6px 0 10px; }
.size-art .bus-svg { height: 100%; width: auto; max-width: 100%; }
.size-name { font: 700 22px/1.15 var(--display); letter-spacing: -0.3px; }
.size-len { font-size: 14px; font-weight: 500; color: var(--muted); }
.size-detail { margin-top: 36px; padding: 30px 28px 26px; box-shadow: var(--shadow-big); }
.size-detail-head { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.size-detail h3 { font-size: clamp(28px, 4vw, 44px); letter-spacing: -1px; margin: 0; }
.size-detail h4 { font: 700 15px var(--display); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 10px; }
.sd-intro { font-size: 18px; max-width: 70ch; }
.sd-cols { margin: 8px 0 24px; }
.ticks, .crosses { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ticks li::before, .crosses li::before { font-weight: 700; display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 10px; border: 2px solid var(--ink); border-radius: 6px; font-size: 12px; }
.ticks li::before { content: "\2713"; background: var(--green); }
.crosses li::before { content: "!"; background: var(--pink); }
.size-detail .btn-big { width: auto; }

/* Builds, bid */
.slot h3 { font-size: 22px; margin: 4px 0 8px; letter-spacing: -0.3px; }
.slot p { margin: 0; }
.slot { text-decoration: none; display: grid; gap: 10px; transition: transform .08s, box-shadow .08s; }
.slot:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-big); }
.slot-img {
  aspect-ratio: 4 / 3; border: 2px solid var(--ink); border-radius: 12px;
  display: grid; place-items: center; font: 700 22px var(--display); letter-spacing: 1px;
  background: repeating-linear-gradient(-45deg, var(--yellow) 0 18px, var(--cream) 18px 36px);
}
.slot .btn { justify-self: start; }
.feature { background: var(--pink); }
.feature-card { max-width: 760px; padding: 36px 32px 30px; box-shadow: var(--shadow-big); }
.feature-card .big { font-size: clamp(32px, 5vw, 56px); }
.feature-card p { font-size: 18px; }
.checks { padding: 0; list-style: none; margin: 18px 0 26px; display: grid; gap: 10px; }
.checks li::before { content: "\2713"; font-weight: 700; display: inline-grid; place-items: center; width: 24px; height: 24px; margin-right: 10px; background: var(--green); border: 2px solid var(--ink); border-radius: 6px; font-size: 13px; }
.bid-list { list-style: none; padding: 0; margin: 0; }
.bid-list li { font-size: 17px; font-weight: 500; }

.footer { border-top: 2px solid var(--ink); padding: 40px var(--edge) 90px; background: var(--ink); color: var(--cream); }
.footer > * { max-width: 760px; }
.footer-logo { font: 700 clamp(40px, 9vw, 96px)/.9 var(--display); letter-spacing: -0.04em; color: var(--yellow); margin: 0 0 18px; }
.footer .fine { color: #bdb6a8; }
.footer a { color: var(--cream); }
.footer-nav { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 0 0 18px; }
.footer-nav a { font: 700 16px var(--display); text-decoration: none; }
.footer-nav a:hover { color: var(--yellow); }

/* Plain pages: About, Contact */
.page-hero { padding-bottom: 24px; }
.page-hero h1 { font-size: clamp(48px, 8vw, 104px); }
.page-hero .lede { max-width: 64ch; }
.prose { max-width: 720px; font-size: 18px; }
.prose h2 { font-size: clamp(26px, 3.4vw, 36px); letter-spacing: -0.5px; margin: 40px 0 10px; }
.prose a { text-decoration-thickness: 2px; text-underline-offset: 3px; }
.contact-grid { max-width: 900px; }
.contact-card h2 { font-size: 26px; margin: 4px 0 8px; }
.contact-card p { margin: 0 0 16px; }

/* Guide: squeeze hero in the CommercialBuses guide layout */
/* The book fills the row's height (top of the copy to the bottom of the form)
   and sits centered between the copy and the right edge. */
.guide-hero { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: 48px 64px; align-items: stretch; align-content: center; padding-top: clamp(40px, 6vw, 80px); }
/* height 0 + min-height 100%: the book takes the row's height without adding
   to it. The negative margin (the column gap) centers it between the copy
   and the right edge instead of within its own column. */
.guide-hero > .cover:not(.cover-mini) { width: auto; max-width: none; height: 0; min-height: 100%; justify-self: center; align-self: stretch; margin-left: -64px; }
/* Looser than the home hero: the highlight box needs room so its border and
   shadow clear the line below instead of sitting on top of it. */
.guide-h1 { font-size: clamp(34px, 4.4vw, 62px); line-height: 1.2; letter-spacing: -0.03em; }
.guide-h1 .hl { margin: 0 .04em; padding: .02em .14em .06em; line-height: 1; white-space: nowrap; transform: rotate(-1.5deg); box-shadow: 3px 3px 0 var(--ink); border-width: 3px; }
.guide-sub { display: flex; gap: 18px; align-items: flex-start; margin: 24px 0 0; }
.guide-sub p { font-size: 19px; margin: 0; max-width: 68ch; }
.guide-form { margin-top: 26px; }
.guide-form .trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.guide-done { font: 700 20px var(--display); background: var(--green); border: 2px solid var(--ink); border-radius: 14px; padding: 16px 18px; box-shadow: var(--shadow); margin: 0; }
.guide-unlocked { margin-top: 26px; max-width: 620px; display: grid; gap: 12px; }
.guide-unlocked .guide-done { font-size: 17px; padding: 10px 14px; }
.unlock-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.unlock-actions .btn-big { font-size: 15px; padding: 12px 16px; }
.chapter-intro { scroll-margin-top: 90px; margin-top: 0; }

/* The email gate. html.gate (set in the guide's <head>) pins the hero over
   the whole screen and stops the page behind it from scrolling. The guide is
   still in the page underneath; "Read it free below" slides the hero up and
   away (html.gate-leaving), then app.js drops both classes. */
.gate-brand { display: none; margin-bottom: 28px; }
html.gate, html.gate body { overflow: hidden; height: 100%; }
html.gate .guide-hero {
  position: fixed; inset: 0; z-index: 100; margin: 0; max-width: none;
  background: var(--cream); overflow-y: auto; overscroll-behavior: contain;
  padding: clamp(24px, 5vh, 64px) var(--edge);
  transition: transform .8s cubic-bezier(.65, 0, .35, 1);
}
html.gate .gate-brand { display: inline-flex; }
html.gate .float-cta { display: none; }
html.gate-leaving .guide-hero { transform: translateY(-100%); }
@media (prefers-reduced-motion: reduce) { html.gate .guide-hero { transition: none; } }
.cover { aspect-ratio: 8.5 / 11; background: var(--yellow); border: 3px solid var(--ink); border-radius: 10px 18px 18px 10px; box-shadow: 10px 10px 0 var(--ink); padding: 30px 26px; display: flex; flex-direction: column; position: relative; overflow: hidden; transform: rotate(2deg); max-width: 400px; justify-self: center; width: 100%; }
.cover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; background: var(--ink); }
.cover-kicker { font: 700 12px var(--display); letter-spacing: 2px; margin: 0 0 0 10px; }
.cover-title { font: 700 clamp(34px, 4.2vw, 50px)/.92 var(--display); letter-spacing: -0.04em; margin: 14px 0 0 10px; }
.cover-art { margin-top: auto; }
.cover-art .bus-svg { width: 100%; height: auto; }
.cover-foot { display: flex; justify-content: space-between; font: 700 12px var(--display); letter-spacing: 1px; margin: 10px 0 0 10px; border-top: 2px solid var(--ink); padding-top: 10px; }
.cover-mini { display: none; width: 78px; flex: none; transform: rotate(-2deg); padding: 8px 6px; box-shadow: 4px 4px 0 var(--ink); border-width: 2px; }
.cover-mini::before { width: 6px; }
.cover-mini .cover-kicker, .cover-mini .cover-foot { display: none; }
.cover-mini .cover-title { font-size: 12px; margin: 2px 0 0 6px; }

.guide-wrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 56px; align-items: start; }
.toc { position: sticky; top: 84px; background: #fff; border: 2px solid var(--ink); border-radius: 16px; box-shadow: var(--shadow); padding: 18px 16px; max-height: calc(100vh - 110px); overflow-y: auto; }
.toc p { font: 700 13px var(--display); letter-spacing: 1.5px; margin: 0 0 10px; }
.toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 2px; counter-reset: ch; }
.toc a { display: block; text-decoration: none; font-size: 14px; font-weight: 500; padding: 6px 8px; border-radius: 8px; }
.toc a::before { counter-increment: ch; content: counter(ch, decimal-leading-zero) "  "; font: 700 12px var(--display); }
.toc a:hover { background: var(--cream); }
.toc a[aria-current] { background: var(--yellow); font-weight: 700; }
.chapter { scroll-margin-top: 80px; padding: 0 0 28px; margin: 0 0 40px; border-bottom: 2px dashed var(--ink); max-width: 760px; }
.chapter:last-child { border-bottom: 0; }
.chapter-num { display: inline-block; font: 700 14px var(--display); letter-spacing: 1.5px; background: var(--ink); color: var(--cream); padding: 5px 12px; border-radius: 8px; }
.chapter h2 { font-size: clamp(34px, 5vw, 58px); line-height: .95; letter-spacing: -0.035em; margin: 14px 0 18px; }
.chapter h3 { font-size: 24px; letter-spacing: -0.3px; margin: 30px 0 8px; }
.chapter p, .chapter li { font-size: 17.5px; }
.chapter ul, .chapter ol { padding-left: 22px; }
.chapter li { margin: 6px 0; }
.callout { border: 2px solid var(--ink); border-radius: 14px; box-shadow: var(--shadow); padding: 16px 20px; margin: 22px 0; background: var(--green); }
.callout.warn { background: var(--pink); }
.callout.tip { background: var(--sky); }
.callout strong:first-child { font-family: var(--display); text-transform: uppercase; letter-spacing: 1px; font-size: 13px; display: block; margin-bottom: 4px; }
.callout p { margin: 0; }
.checklist { list-style: none; padding: 0 !important; display: grid; gap: 8px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: 10px 14px; margin: 0 !important; }
.checklist li::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 3px; border: 2px solid var(--ink); border-radius: 5px; background: var(--cream); }
.compare { width: 100%; border-collapse: separate; border-spacing: 0; border: 2px solid var(--ink); border-radius: 14px; overflow: hidden; margin: 18px 0; background: #fff; font-size: 15.5px; }
.compare th, .compare td { text-align: left; padding: 10px 12px; border-bottom: 2px solid var(--ink); vertical-align: top; }
.compare tr:last-child td { border-bottom: 0; }
.compare th { background: var(--yellow); font-family: var(--display); }
.table-scroll { overflow-x: auto; }
.chapter-cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }

/* Home: the build guide feature */
.guide-feature-grid { display: grid; grid-template-columns: minmax(260px, 400px) 1fr; gap: 48px 72px; align-items: center; }
.guide-feature .cover { text-decoration: none; color: inherit; transition: transform .12s, box-shadow .12s; }
.guide-feature .cover:hover { transform: rotate(0deg) translate(-3px, -3px); box-shadow: 13px 13px 0 var(--ink); }
.guide-feature .cover-kicker, .guide-feature .cover-title, .guide-feature .cover-art { display: block; }
.guide-feature .checks li { font-size: 18px; }
.guide-feature .btn-big { width: auto; }
.feature-form-section { padding-top: 0; }

/* The hunt: steps that slide open one after another */
.hunt { padding: 0; }
.step { scroll-margin-top: 66px; }
.step { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .7s cubic-bezier(.2, .7, .2, 1); }
.step.open { grid-template-rows: 1fr; }
.step > .step-inner { min-height: 0; overflow: hidden; padding: 0 var(--edge); transition: padding .7s cubic-bezier(.2, .7, .2, 1); }
.step.open > .step-inner { padding-top: 56px; padding-bottom: 56px; }
.step.open { border-top: 2px solid var(--ink); }
#step-size { background: var(--yellow); }
#step-load { background: var(--cream); }
.step-num { display: inline-block; font: 700 14px var(--display); letter-spacing: 1.5px; background: var(--ink); color: var(--cream); padding: 5px 12px; border-radius: 8px; margin-bottom: 14px; }
.step-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.step-actions .btn-big { width: auto; }
.loader { display: grid; justify-items: center; gap: 16px; text-align: center; }
.step.open > .loader { padding-top: 72px; padding-bottom: 72px; }
.tire { width: 120px; height: 120px; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tire { animation-duration: 4s; } .step, .step > .step-inner { transition: none; } }
.loader-text { font: 700 24px var(--display); margin: 0; }
.also-search { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 36px 0 0; font-weight: 700; }
.btn-small { padding: 7px 14px; font-size: 13px; }

/* One-line email forms (guide page, home guide section) */
.inline-form { margin-top: 24px; max-width: 620px; }
.inline-row { display: flex; gap: 10px; margin-top: 6px; }
.inline-row input { flex: 1; min-width: 0; }
.inline-row .btn { flex: none; white-space: nowrap; padding: 12px 20px; font-size: 15px; }
.inline-form .form-msg { margin-top: 8px; }

/* Forms: build submission, contact */
.site-form { display: grid; gap: 14px; margin-top: 20px; }
.site-form .field-row { margin: 0; }
.field-row-3 { grid-template-columns: repeat(3, 1fr); }
textarea { font: 500 17px/1.5 Inter, system-ui, sans-serif; color: var(--ink); padding: 12px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; width: 100%; resize: vertical; }
textarea:focus { outline: 3px solid var(--pink); outline-offset: 2px; }
.hint { font: 400 13px Inter, system-ui, sans-serif; text-transform: none; letter-spacing: 0; color: var(--muted); }
label.check { display: flex; gap: 12px; align-items: flex-start; text-transform: none; letter-spacing: 0; font: 500 15px/1.4 Inter, system-ui, sans-serif; }
label.check input { width: 22px; height: 22px; flex: none; margin: 0; accent-color: var(--ink); }
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-msg { margin: 0; font-weight: 700; min-height: 1.4em; }
.contact-form-card { max-width: 760px; }

/* Build Board: featured builds and their videos */
.build { display: grid; gap: 8px; align-content: start; }
.build h3 { font-size: 22px; margin: 4px 0 0; letter-spacing: -0.3px; }
.build-by { margin: 0; font-weight: 700; }
.build .meta { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; margin: 4px 0; }
.build .meta li { font-size: 12px; font-weight: 700; border: 2px solid var(--ink); border-radius: 999px; padding: 3px 10px; background: var(--cream); }
.build blockquote { margin: 4px 0 8px; font-style: italic; }
.build .btn { justify-self: start; }
.yt, .yt-frame { display: block; width: 100%; aspect-ratio: 16 / 9; border: 2px solid var(--ink); border-radius: 12px; overflow: hidden; }
.yt { position: relative; padding: 0; cursor: pointer; background: var(--ink); }
.yt img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-play { position: absolute; inset: 0; margin: auto; width: 68px; height: 48px; border-radius: 14px; background: #ff0033; border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); transition: transform .08s; }
.yt-play::after { content: ""; position: absolute; left: 26px; top: 12px; border-style: solid; border-width: 10px 0 10px 18px; border-color: transparent transparent transparent #fff; }
.yt:hover .yt-play, .yt:focus-visible .yt-play { transform: scale(1.08); }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; }
  .finder { grid-row: auto; grid-column: auto; }
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr; }
  .menu-btn { display: inline-block; }
  .nav nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: var(--cream); border-bottom: 2px solid var(--ink); padding: 8px 16px 18px; }
  .nav nav.open { display: flex; }
  .nav nav a:not(.btn) { font: 700 26px var(--display); padding: 12px 0; border-bottom: 2px solid var(--ink); }
  .nav nav .nav-cta { margin-top: 16px; text-align: center; font-size: 16px; padding: 12px; }
  .guide-hero { grid-template-columns: 1fr; }
  .guide-feature-grid { grid-template-columns: 1fr; }
  .guide-feature .cover { max-width: 300px; }
  .guide-hero .cover:not(.cover-mini) { display: none; }
  .cover-mini { display: flex; }
  /* minmax(0, 1fr): the comparison tables scroll in their own box instead of widening the page */
  .guide-wrap { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .toc { position: static; max-height: none; }
}
@media (max-width: 600px) {
  .grid-4, .grid-2 { grid-template-columns: 1fr; }
  .field-row, .field-row-3 { grid-template-columns: 1fr; }
  .inline-row { flex-direction: column; }
  .unlock-actions { grid-template-columns: 1fr; }
  .logo { font-size: 17px; }
  .parade { height: 120px; }
  .parade-bus .bus-svg { height: 66px; }
  .parade-bus { bottom: calc(32px - 66px * 16 / 210); }
  .size-detail { padding: 26px 18px 20px; }
}

/* Print: the guide prints as the PDF */
@page { size: letter; margin: 0.6in; }
@media print {
  .nav, .ticker, .parade, .float-cta, .footer, .skip, .chapter-cta, .guide-hero > div:first-child, .cover-mini { display: none !important; }
  html.gate, html.gate body { overflow: visible; height: auto; }
  html.gate .guide-hero { position: static; padding: 0; overflow: visible; background: none; }
  body { background: #fff; font-size: 11pt; }
  /* Page 1: the cover alone. Page 2: contents and the 7 mistakes. Then one chapter per page. */
  .guide-hero { display: block; min-height: 0; padding: 0; break-after: page; }
  .guide-hero .cover:not(.cover-mini) { display: flex !important; transform: none; box-shadow: none; margin: 0.4in auto 0; max-width: 5.6in; width: 100%; height: auto; min-height: 0; }
  .guide-wrap { display: block; }
  .toc { position: static; box-shadow: none; max-height: none; border: 0; padding: 0; margin-bottom: 24px; }
  .toc p { font-size: 28px; letter-spacing: -0.5px; }
  .toc a { font-size: 13pt; padding: 3px 0; }
  .toc a[aria-current] { background: none; font-weight: 500; }
  .chapter { break-before: page; border: 0; max-width: none; }
  .callout, .checklist li, .compare { box-shadow: none; break-inside: avoid; }
  a { text-decoration: none; color: inherit; }
  section { padding: 0; }
}