/* /motorsport 2026-09-15: shorter page, no decorative numbering, compact walkthrough. */
.ms2 a:not(.btn):not(.ms2-card):not(.ms2-stat):not(.ms2-store) { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }

/* This page's nav is not fixed, so anchors need no fixed-nav offset. */
.ms2 [id]:target, .ms2 [id] { scroll-margin-top: 0; }

/* Hero */
.ms2-hero { min-height: calc(100svh - 78px); padding-top: clamp(48px, 8vh, 96px); padding-bottom: clamp(96px, calc(24vh - 24px), 256px); }
.ms2-hero .h-xl { max-width: 16ch; font-size: clamp(46px, 6.3vw, 98px); }
.ms2-accent { color: var(--engine-bright); }
.ms2-hero .kicker { display: block; margin-bottom: 14px; }
.ms2-hero-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; margin-top: 52px; }
.ms2-hero-row .lede { max-width: 54ch; margin: 0; }
.ms2-actions { display: flex; flex-wrap: wrap; gap: 12px; }
/* Side-by-side layout: the buttons sit a little below the paragraph's last line. */
@media (min-width: 901px) { .ms2-actions { position: relative; top: 56px; } .ms2-hero-row .lede { position: relative; top: 28px; } }

/* Card grids (disciplines, detail) */
.ms2-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.ms2-cards-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ms2-card { display: flex; flex-direction: column; gap: 10px; padding: 26px 24px 28px; border: 1px solid var(--line-dark); border-radius: 14px; background: #0d0d13; transition: border-color .2s, background .2s; }
.ms2-card h3 { font: 600 20px/1.2 var(--font-text); color: var(--paper); margin: 0; }
.ms2-card p { font: 400 15px/1.55 var(--font-text); color: var(--mut-dark); margin: 0; }
.ms2-card:hover, .ms2-card:focus-visible { border-color: var(--engine); background: #6e62ff10; }

/* Numbers */
.ms2-numbers { border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); background: radial-gradient(60% 140% at 50% 50%, rgba(110,98,255,.14) 0%, transparent 70%), var(--ink); }
.ms2-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 36px; max-width: 1240px; margin: 0 auto; }
.ms2-stat { display: flex; flex-direction: column; gap: 8px; padding: 8px 28px; border-left: 1px solid var(--line-dark); }
.ms2-stat:nth-child(3n+1) { border-left: 0; padding-left: 0; }
.ms2-stat small { font: 500 11px/1 var(--font-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--mut-dark); }
.ms2-stat b { font: 400 clamp(44px, 5.4vw, 84px)/1 var(--font-display); color: var(--paper); transition: color .2s; }
.ms2-stat span { font: 400 15px/1.45 var(--font-text); color: var(--mut-dark); max-width: 22ch; }
.ms2-stat:hover b, .ms2-stat:focus-visible b { color: var(--engine-bright); }
.ms2-note { max-width: 1240px; margin: 36px auto 0; font: 400 13px/1.7 var(--font-text); color: rgba(244,241,234,.5); }

/* Walkthrough: compact so the pinned animation fits laptop-height windows */
.ms2-walk .section-head { margin-bottom: 18px; }
.ms2-walk-note { max-width: 70ch; margin: 0 0 28px; font: 400 14px/1.6 var(--font-text); color: var(--mut-dark); }
.ms2-walk .walk-pin { min-height: 0; grid-template-columns: minmax(240px, .8fr) 2fr; align-items: center; }
.ms2-walk .walk-step { padding: 11px 0 11px 22px; }
.ms2-walk .walk-step :is(h3, h4) { font-size: 12px; margin-bottom: 4px; }
.ms2-walk .walk-step p { font-size: 13.5px; line-height: 1.45; }
.ms2-walk .appwin { aspect-ratio: auto; height: clamp(380px, calc(100vh - 230px), max(540px, 42vw)); }

/* Demo step bar copied from the app (client_tool/ui.html .step-chevron) */
.ms2-walk .app-steps { display: flex; align-items: stretch; gap: 0; height: 42px; padding: 0; justify-content: stretch; user-select: none; }
.ms2-walk .app-steps .s-chip { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 0 24px; background: rgba(255,255,255,.03); color: #6a6a6a; clip-path: polygon(16px 0, 100% 0, calc(100% - 16px) 100%, 0 100%); transition: background .2s; }
/* Neighbouring chevrons overlap so only a thin slanted seam shows between them. */
.ms2-walk .app-steps .s-chip + .s-chip { margin-left: -13px; }
.ms2-walk .app-steps .s-chip:first-child { clip-path: polygon(0 0, 100% 0, calc(100% - 16px) 100%, 0 100%); }
.ms2-walk .app-steps .s-chip:last-child { clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%); }
.ms2-walk .app-steps .step-num { width: 22px; height: 22px; border-radius: 50%; position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font: 700 11px var(--font-text); background: rgba(255,255,255,.06); color: #6a6a6a; transition: background-color .25s ease, color .25s ease; }
.ms2-walk .app-steps .step-text { font: 600 11px var(--font-text); white-space: nowrap; transition: color .2s; }
.ms2-walk .app-steps .s-chip.active { background: rgba(192,193,255,.08); }
.ms2-walk .app-steps .s-chip.active .step-num { background: #c0c1ff; color: #0f0f10; }
.ms2-walk .app-steps .s-chip.active .step-text { color: #c0c1ff; }
.ms2-walk .app-steps .s-chip.done { background: rgba(192,193,255,.05); }
.ms2-walk .app-steps .step-num::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%230f0f10' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E"); opacity: 0; transition: opacity .25s ease; }
.ms2-walk .app-steps .s-chip.done .step-num { background-color: #c0c1ff; color: transparent; }
.ms2-walk .app-steps .s-chip.done .step-num::after { opacity: 1; }
.ms2-walk .app-steps .s-chip.done .step-text { color: #b0b0b0; }

/* The demo window never scrolls on its own; content that does not fit is clipped. */
.ms2-walk .app-scene { overflow: hidden; }

/* The scroll-driven demo runs at every width. style.css stacks and flattens the
   walkthrough under 900px for a static list; undo that for the animated demo. */
@media (max-width: 900px) {
  .ms2-walk .walk-pin { grid-template-columns: minmax(190px, .7fr) 2fr; align-items: center; gap: 24px; }
  .ms2-walk .appwin { height: clamp(340px, calc(100svh - 230px), 520px); }
  .ms2-walk .appwin-body { flex: 1; }
  .ms2-walk .app-scene { padding: 16px 18px; }
  .ms2-walk .app-scene[data-scene="3"] { position: absolute; }
  .ms2-walk .folder-gallery { position: absolute; top: 42px; margin-top: 0; }
  .ms2-walk .folder-line.sibling { display: flex; }
  .ms2-walk .walk-step { padding: 9px 0 9px 16px; }
  .ms2-walk .walk-step p { margin-top: 4px; }
}
@media (max-width: 700px) {
  .ms2-walk .walk-pin { grid-template-columns: 1fr; gap: 32px; align-items: start; }
  /* Phones show only the current step above the app window while the demo plays. */
  /* Fixed step area (tallest step fits) so the window below never shifts as steps change. */
  .ms2-walk.walk-animated .walk-steps { min-height: 0; height: 112px; display: flex; flex-direction: column; justify-content: flex-start; transform: translateY(-10px); }
  /* translateY moves the step up visually without changing the layout, so the window below stays put. */
  .ms2-walk.walk-animated .walk-step:not(.active) { display: none; }
  .ms2-walk .appwin { height: clamp(300px, calc(100svh - 266px), 460px); }
  .ms2-walk .cluster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ms2-walk .scene-grid-top { flex-direction: column; align-items: flex-start; gap: 6px; }
  .ms2-walk .scene-grid-stats { font-size: 10px; }
  .ms2-walk .folder-gallery .gallery-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .ms2-walk .app-steps .s-chip { padding: 0 10px; gap: 6px; }
  .ms2-walk .app-steps .step-text { font-size: 10px; }
}

/* Scroll hint under the demo window; only while the demo is scroll-driven.
   Antialiased on its own layer: when the pin switches the panel between fixed and
   static, Safari re-rasterised the text with different smoothing and it flickered
   between bright and dim. */
.walk-scroll-hint { display: none; }
.ms2-walk.walk-animated .walk-scroll-hint { grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 12px; margin: 0; font: 600 12px/1 var(--font-text); letter-spacing: .14em; text-transform: uppercase; color: #c0c1ff; text-shadow: 0 0 14px rgba(141,131,255,.45); -webkit-font-smoothing: antialiased; transform: translateZ(0); transition: opacity .3s ease; margin-top: calc(22px - clamp(24px, 4vw, 64px)); }
.walk-scroll-track { position: relative; width: 2px; height: 22px; border-radius: 2px; background: rgba(141,131,255,.3); overflow: hidden; }
.walk-scroll-track span { position: absolute; left: 0; top: -8px; width: 2px; height: 8px; border-radius: 2px; background: #c0c1ff; animation: walk-scroll 1.6s ease-in-out infinite; }
@keyframes walk-scroll { 0% { top: -8px; } 70%, 100% { top: 22px; } }
.walk-scroll-hint.is-done { opacity: 0; }
@media (max-width: 700px) { .ms2-walk.walk-animated .walk-scroll-hint { grid-column: 1; margin-top: -14px; } }
@media (prefers-reduced-motion: reduce) { .walk-scroll-track span { animation: none; top: 7px; } }

/* Whole step is the click target */
.walk-enhanced .walk-step { cursor: pointer; }
.walk-enhanced .walk-step:hover p { color: var(--paper); }

/* Why */
.ms2-why { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.ms2-why > div { padding: 26px 0 30px; border-top: 1px solid var(--line-dark); }
.ms2-why h3 { font: 600 19px/1.25 var(--font-text); color: var(--paper); margin: 0 0 10px; }
.ms2-why p { font: 400 15px/1.6 var(--font-text); color: var(--mut-dark); margin: 0; }

/* One-shot sorting: two ways of working, ours marked. */
.ms2-compare { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ms2-compare > div { padding: 28px 26px 30px; border: 1px solid var(--line-dark); border-radius: 14px; background: #0d0d13; }
.ms2-compare > div.is-ours { border-color: var(--engine); background: #6e62ff12; }
.ms2-compare h3 { margin: 0 0 12px; font: 600 20px/1.2 var(--font-text); color: var(--mut-dark); }
.ms2-compare .is-ours h3 { color: var(--engine-bright); }
.ms2-compare p { margin: 0; font: 400 16px/1.6 var(--font-text); color: var(--mut-dark); }
.ms2-compare .is-ours p { color: var(--paper); }
#one-shot .ms2-note { margin: 20px 0 0; max-width: 90ch; }
#one-shot .ms2-note b { color: var(--paper); font-weight: 600; }
@media (max-width: 900px) { .ms2-compare { grid-template-columns: 1fr; } }

/* Stores */
/* Flex, not grid: cards in an incomplete last row keep the same width and sit centred. */
.ms2-stores { --cols: 5; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ms2-store { flex: 0 0 calc((100% - (var(--cols) - 1) * 12px) / var(--cols)); min-width: 0; }
.ms2-store { display: flex; flex-direction: column; border: 1px solid var(--line-dark); border-radius: 12px; overflow: hidden; background: #0d0d13; transition: border-color .2s, transform .2s; }
.ms2-store:hover, .ms2-store:focus-visible { border-color: var(--engine); transform: translateY(-3px); }
.ms2-shot { display: block; aspect-ratio: 16 / 10; background-size: cover; background-position: center top; border-bottom: 1px solid var(--line-dark); }
.ms2-store-name { padding: 12px 14px; font: 600 14px var(--font-text); color: var(--paper); }

/* Reviews */
.ms2-reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ms2-review { margin: 0; display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 28px; border: 1px solid var(--line-dark); border-radius: 14px; background: #0d0d13; }
.ms2-review blockquote { margin: 0; font: 400 18px/1.55 var(--font-text); color: var(--paper); }
.ms2-review figcaption { display: flex; flex-direction: column; gap: 2px; font: 400 13px var(--font-text); color: var(--mut-dark); }
.ms2-review figcaption b { color: var(--paper); font-weight: 600; }
.ms2-review-wide { grid-column: 1 / -1; padding: clamp(28px, 4vw, 56px); gap: 28px; }
.ms2-review blockquote p { margin: 0; }
.ms2-review blockquote > p:first-child { font: 500 clamp(17px, 1.3vw, 20px)/1.45 var(--font-text); color: var(--paper); }
.ms2-review-original { margin-top: 18px !important; font-size: 14px; }
.ms2-review-wide blockquote > p:first-child { font: 500 clamp(22px, 2.4vw, 34px)/1.35 var(--font-text); color: var(--paper); max-width: 42ch; }
.ms2-review-original { margin-top: 22px !important; max-width: 70ch; font: 400 15px/1.6 var(--font-text); color: var(--mut-dark); font-style: italic; }
.ms2-review-original span { display: block; margin-bottom: 6px; font: 600 11px/1 var(--font-text); letter-spacing: .12em; text-transform: uppercase; font-style: normal; color: rgba(244,241,234,.45); }
.ms2-review figcaption a { color: var(--engine-bright); }
/* Two real quotes share the row; the 900px rule below still stacks them on phones. */
.ms2-reviews-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ms2-reviews-2 .ms2-review-wide { grid-column: auto; padding: clamp(28px, 3vw, 44px); }
.ms2-reviews-2 .ms2-review-wide blockquote > p:first-child { font-size: clamp(19px, 1.6vw, 24px); max-width: none; }
.ms2-review.is-placeholder { border-style: dashed; position: relative; }
.ms2-review.is-placeholder blockquote { color: var(--mut-dark); font-style: italic; }
.ms2-review.is-placeholder::before { content: 'PLACEHOLDER'; position: absolute; top: 12px; right: 14px; font: 600 10px var(--font-mono); letter-spacing: .12em; color: #ff8a6b; }

/* FAQ: heading on the left, questions on the right */
.ms2-faq { max-width: none; border-top: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.8fr); gap: 40px; align-items: start; }
.ms2-faq .section-head { position: sticky; top: 32px; margin: 0; }
.ms2-faq .faq-list { max-width: none; margin: 0; }
.ms2-faq .faq-a a { color: var(--engine-bright); }

/* Contact */
.ms2-contact .lede { max-width: 60ch; margin: 18px auto 28px; text-align: center; }

@media (max-width: 1100px) {
  .ms2-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ms2-stores { --cols: 3; }
  .ms2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
  .ms2-stat:nth-child(even) { border-left: 1px solid var(--line-dark); padding-left: 28px; }
  .ms2-stat:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (max-width: 900px) {
  .ms2-why, .ms2-reviews, .ms2-cards-3 { grid-template-columns: 1fr; }
  .ms2-faq { grid-template-columns: 1fr; gap: 0; }
  .ms2-faq .section-head { position: static; margin-bottom: 24px; }
}
@media (max-width: 600px) {
  .ms2-hero .h-xl { font-size: clamp(40px, 12vw, 64px); }
  .ms2-cards { grid-template-columns: 1fr; }
  .ms2-stores { --cols: 2; }
  .ms2-stat { padding: 4px 14px; }
  .ms2-stat:nth-child(even) { padding-left: 14px; }
  .ms2-stat b { font-size: clamp(34px, 11vw, 48px); }
  .ms2-stat span { font-size: 13px; }
}

/* Each step is numbered, matching the numbered chips inside the app window. */
.ms2-walk .walk-num { display: block; margin-bottom: 5px; font: 600 10px/1 var(--font-text); letter-spacing: .16em; color: var(--mut-dark); }
.ms2-walk .walk-step.active .walk-num { color: var(--engine-bright); }

/* The group cards were sized by their square thumbs, so two rows ran past the
   window and sat on its bottom edge. The grid fills the height the scene has
   left instead, which keeps the scene's own padding as a margin underneath. */
.ms2-walk .app-scene[data-scene="2"] { display: flex; flex-direction: column; }
.ms2-walk .cluster-grid { flex: 1; min-height: 0; grid-auto-rows: minmax(0, 1fr); }
.ms2-walk .cluster-card { display: flex; flex-direction: column; min-height: 0; }
.ms2-walk .cluster-thumbs { flex: 1; min-height: 0; grid-template-rows: repeat(2, minmax(0, 1fr)); }
.ms2-walk .cluster-thumbs span { aspect-ratio: auto; min-height: 0; }
.ms2-walk .cluster-thumbs img { height: 100%; min-height: 0; }
/* Two columns of six cards squashed each one into a strip: show four there. */
@media (max-width: 700px) {
  .ms2-walk .cluster-grid > :nth-child(n+5) { display: none; }
}