/* QuizBlast marketing site — single stylesheet, tokens first.
   Design system: "Editorial / Projector" (see macosedugame Project Docs/CloudBackendPlan.md §4).
   Three surfaces in rotation: crimson (brand ground), paper (reading), stage (screenshots).
   Contrast rule: body copy on crimson sits on the deeper half of the gradient or is ≥20px. */

:root {
  --crimson-lo:   #D8394A;  /* gradient top — icon-exact */
  --crimson:      #C53040;  /* brand mid */
  --crimson-deep: #AB1E2F;  /* gradient bottom — icon-exact; link accent on paper (6.9:1) */
  --paper:        #FAF9F7;
  --ink:          #16161A;
  --ink-muted:    #5A5A63;  /* 7.0:1 on paper */
  --rule:         #E2E0DC;
  --stage:        #0D0D12;
  --stage-ink:    #F2F1F4;
  --stage-muted:  #9C9BA6;

  --font-display: "Space Grotesk", "Avenir Next", "Helvetica Neue", sans-serif;
  --font-text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --measure: 38rem;
  --wide: 68rem;
  --pad: clamp(1.25rem, 4vw, 2.5rem);
}

@font-face {
  font-family: "Space Grotesk";
  src: url("fonts/space-grotesk-latin.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+2191, U+2193;
}

/* ---------- base ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { font-family: var(--font-display); line-height: 1.08; letter-spacing: -0.015em; margin: 0 0 0.6em; font-weight: 700; }
h1 { font-size: clamp(2.4rem, 6.5vw, 4.4rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.6rem); }
h3 { font-size: 1.25rem; }
p { margin: 0 0 1em; }
a { color: var(--crimson-deep); text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible, summary:focus-visible {
  outline: 3px solid var(--crimson);
  outline-offset: 3px;
  border-radius: 2px;
}
::selection { background: var(--crimson-lo); color: #fff; }

.wrap   { max-width: var(--wide); margin-inline: auto; padding-inline: var(--pad); }
.measure { max-width: var(--measure); }
.label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-muted);
  display: block;
  margin-bottom: 1rem;
}
.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 99;
  background: var(--paper); color: var(--ink); padding: 0.6rem 1rem;
}
.skip-link:focus { left: 0.5rem; top: 0.5rem; }

/* ---------- surfaces ---------- */

.surface-crimson {
  background: linear-gradient(178deg, var(--crimson-lo) 0%, var(--crimson-deep) 100%);
  color: #fff;
}
.surface-crimson .label { color: rgba(255,255,255,0.82); }
.surface-crimson a { color: #fff; }
.surface-stage { background: var(--stage); color: var(--stage-ink); }
.surface-stage .label { color: var(--stage-muted); }

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  text-decoration: none;
  border-radius: 10px;
  padding: 0.85rem 1.7rem;
  border: 2px solid transparent;
}
.btn-paper, .surface-crimson .btn-paper { background: #fff; color: var(--crimson-deep); }  /* on crimson */
.btn-paper:hover { background: var(--paper); }
.btn-crimson { background: var(--crimson-deep); color: #fff; }       /* on paper */
.btn-crimson:hover { background: var(--crimson); }
.btn-soon { cursor: default; opacity: 0.9; }                         /* inert Coming Soon stand-in */
.btn-paper.btn-soon:hover { background: #fff; }
.btn-crimson.btn-soon:hover { background: var(--crimson-deep); }
.btn-micro {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  margin-top: 0.9rem;
  opacity: 0.92;
}

/* ---------- nav ---------- */

.nav {
  display: flex; align-items: center; gap: 1.4rem;
  padding-block: 1rem;
}
.nav .wordmark {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: inherit; text-decoration: none; margin-right: auto;
}
.nav .wordmark img { width: 30px; height: 30px; border-radius: 7px; }
.nav a:not(.wordmark):not(.btn) {
  color: inherit; text-decoration: none; font-size: 0.95rem; font-weight: 500;
}
.nav a:not(.wordmark):not(.btn):hover { text-decoration: underline; text-underline-offset: 4px; }
.nav .btn { padding: 0.5rem 1.1rem; font-size: 0.95rem; }
@media (max-width: 40rem) {
  .nav { gap: 0.7rem; }
  .nav .nav-secondary { display: none; }  /* Pricing/For-schools fold away; Join + Download stay */
  .nav .wordmark { font-size: 1rem; gap: 0.45rem; }
  .nav .wordmark img { width: 26px; height: 26px; }
  .nav a:not(.wordmark):not(.btn) { font-size: 0.88rem; }
  .nav .btn { padding: 0.45rem 0.85rem; font-size: 0.88rem; }
}

/* ---------- hero ---------- */

.hero { padding-block: clamp(2.5rem, 6vw, 4.75rem); }
.hero .sub {
  font-size: clamp(1.25rem, 2.2vw, 1.45rem);   /* ≥20px — AA on the light end of the gradient */
  line-height: 1.5;
  max-width: 34rem;
  margin-bottom: 1.6rem;
}
.hero .cloud-tease {
  font-size: 0.95rem; opacity: 0.92; max-width: 30rem;
  margin: 1.4rem 0 0; padding-top: 1.2rem;
  border-top: 1px solid rgba(255,255,255,0.25);
}
.hero .aside-link { font-size: 1rem; display: inline-block; margin-top: 1.2rem; }

/* ---------- hero wireframe: the setup, as a blueprint ----------
   A MacBook running the game, wired to the projected screen and student
   phones. Device outlines draw themselves in on load (pen-plotter style),
   then idle: tiles pulse in sequence, one tile fills (the right answer),
   the timer drains, phones flash as answers land, and dashes march along
   the links (data flowing, outward from the Mac). Decorative; aria-hidden. */

.hero-head { position: relative; overflow: hidden; }
.hero-head > .wrap { position: relative; z-index: 2; }
.hero-wire {
  position: absolute; top: 0; right: 0; height: 100%; width: 58%;
  z-index: 1; pointer-events: none;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 26%);
  mask-image: linear-gradient(to right, transparent, #000 26%);
}
.hero-wire svg { width: 100%; height: 100%; }

.hero-wire .dv {
  fill: none; stroke: #fff; stroke-opacity: 0.4; stroke-width: 2;
  stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: qb-draw 1s ease-out var(--dd) both;
}
.hero-wire .dv.thin { stroke-width: 1.3; stroke-opacity: 0.3; }

.hero-wire .ui {
  fill: #fff; fill-opacity: 0; stroke: #fff; stroke-opacity: 0.3; stroke-width: 1.3;
  opacity: 0; animation: qb-fade 0.5s ease-out var(--dd) forwards;
}
.hero-wire .bar { stroke: none; fill-opacity: 0.25; }
.hero-wire .tile { animation: qb-fade 0.5s ease-out var(--dd) forwards, qb-tile 8s linear var(--td) infinite; }
.hero-wire .tile.ans { animation: qb-fade 0.5s ease-out var(--dd) forwards, qb-tile 8s linear var(--td) infinite, qb-ans 8s linear 4s infinite; }
.hero-wire .ptile { stroke: none; animation: qb-fade 0.5s ease-out 1.9s forwards, qb-pflash 8s linear var(--pd) infinite; }
.hero-wire .timer {
  fill: none; stroke: #fff; stroke-opacity: 0.45; stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 1; animation: qb-fade 0.5s ease-out var(--dd) forwards, qb-timer 8s linear 2s infinite;
}
.hero-wire .lk {
  fill: none; stroke: #fff; stroke-opacity: 0.22; stroke-width: 1.4;
  stroke-dasharray: 0.035 0.065; opacity: 0;
  animation: qb-fade 0.6s ease-out var(--dd) forwards, qb-march 4s linear infinite;
}

@keyframes qb-draw   { to { stroke-dashoffset: 0; } }
@keyframes qb-fade   { to { opacity: 1; } }
@keyframes qb-march  { to { stroke-dashoffset: -0.4; } }
@keyframes qb-timer  { 0% { stroke-dashoffset: 0; } 92%, 100% { stroke-dashoffset: 1; } }
@keyframes qb-tile   { 0% { stroke-opacity: 0.3; } 3% { stroke-opacity: 0.85; } 8%, 100% { stroke-opacity: 0.3; } }
@keyframes qb-ans    { 0% { fill-opacity: 0; } 4% { fill-opacity: 0.4; } 14%, 100% { fill-opacity: 0; } }
@keyframes qb-pflash { 0% { fill-opacity: 0; } 3% { fill-opacity: 0.5; } 9%, 100% { fill-opacity: 0; } }

/* Reduced motion: the finished blueprint, no animation. */
@media (prefers-reduced-motion: reduce) {
  .hero-wire .dv, .hero-wire .ui, .hero-wire .lk, .hero-wire .timer { animation: none !important; }
  .hero-wire .dv { stroke-dashoffset: 0; }
  .hero-wire .ui, .hero-wire .lk { opacity: 1; }
}
/* Small screens: the headline owns the full width — drop the layer. */
@media (max-width: 48rem) { .hero-wire { display: none; } }

/* ---------- join strip ---------- */

.join-strip { border-bottom: 1px solid var(--rule); padding-block: 1.4rem; }
.join-strip form { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.join-strip label { font-weight: 600; margin-right: 0.4rem; }
.join-strip input {
  font-family: var(--font-mono); font-size: 1.05rem; letter-spacing: 0.08em;
  padding: 0.55rem 0.8rem; border: 2px solid var(--rule); border-radius: 8px;
  background: #fff; color: var(--ink); width: 11ch; text-transform: lowercase;
}
.join-strip input:focus { border-color: var(--crimson); outline: none; }
.join-strip .btn { padding: 0.55rem 1.2rem; font-size: 0.98rem; }
.join-note { font-size: 0.85rem; color: var(--ink-muted); margin: 0.5rem 0 0; }

/* ---------- stage / product shot ---------- */

.stage-section { padding-block: clamp(2rem, 5vw, 3.5rem); }
.stage-frame {
  border: 1px solid #26262e;
  border-radius: 12px;
  overflow: hidden;
  background: #14141a;
}
.stage-frame video { width: 100%; height: auto; display: block; }
.stage-caption { color: var(--stage-muted); font-size: 0.9rem; margin-top: 0.9rem; }

/* ---------- signature moment ---------- */

.sig { padding-block: clamp(2.5rem, 6vw, 4.25rem); }
.sig-panel {
  background: var(--stage); color: var(--stage-ink);
  border-radius: 12px; padding: 1.4rem;
  font-family: var(--font-mono); font-size: 0.9rem;
}
.sig-row { display: flex; justify-content: space-between; gap: 1rem; align-items: center; margin-bottom: 1rem; flex-wrap: wrap; }
.sig-url { color: var(--stage-muted); letter-spacing: 0.04em; }
.badge {
  display: inline-flex; align-items: center; gap: 0.45rem;
  border-radius: 999px; padding: 0.25rem 0.8rem; font-size: 0.8rem;
  background: #1E1E26;
}
.badge .dot { width: 9px; height: 9px; border-radius: 50%; background: #4CC38A; }
.badge.badge-down .dot { background: var(--crimson-lo); }
.sig-question {
  font-family: var(--font-display); font-size: clamp(1.1rem, 2.4vw, 1.5rem);
  font-weight: 700; margin-bottom: 1rem;
}
.sig-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1.2rem; }
.sig-tiles span {
  background: #1E1E26; border-radius: 8px; padding: 0.6rem 0.8rem;
  font-family: var(--font-text); font-size: 0.92rem;
}
.sig-timer { height: 8px; border-radius: 4px; background: #26262e; overflow: hidden; }
.sig-timer i {
  display: block; height: 100%; width: 62%;
  background: linear-gradient(90deg, var(--crimson-lo), var(--crimson-deep));
}
.sig-count { color: var(--stage-muted); font-size: 0.8rem; margin-top: 0.7rem; }

/* Static two-panel fallback: the default. */
.sig-static { display: grid; gap: 1.2rem; margin-top: 2rem; }
@media (min-width: 48rem) { .sig-static { grid-template-columns: 1fr 1fr; } }
.sig-static figcaption { font-size: 0.9rem; color: var(--ink-muted); margin-top: 0.6rem; font-family: var(--font-text); }
.sig-static figure { margin: 0; }
.sig-live { display: none; }

/* Scroll-driven version — only when supported AND motion is allowed. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .sig-static { display: none; }
    .sig-live { display: block; margin-top: 2rem; }

    .sig-live .badge-up, .sig-live .badge-down { grid-area: 1 / 1; }
    .sig-live .badge-stack { display: inline-grid; }
    .sig-live .badge-up   { animation: sig-fade-out linear both; animation-timeline: view(); animation-range: cover 32% cover 42%; }
    .sig-live .badge-down { opacity: 0; animation: sig-fade-in  linear both; animation-timeline: view(); animation-range: cover 42% cover 52%; }

    .sig-live .cap-a, .sig-live .cap-b { grid-area: 1 / 1; }
    .sig-live .cap-stack { display: grid; margin-top: 1rem; }
    .sig-live .cap-a { animation: sig-fade-out linear both; animation-timeline: view(); animation-range: cover 32% cover 42%; }
    .sig-live .cap-b { opacity: 0; animation: sig-fade-in linear both; animation-timeline: view(); animation-range: cover 42% cover 52%; }

    /* The point: the timer never stops. Time-based, not scroll-based. */
    .sig-live .sig-timer i { animation: sig-drain 14s linear infinite; }
  }
}
@keyframes sig-fade-out { to { opacity: 0; } }
@keyframes sig-fade-in  { to { opacity: 1; } }
@keyframes sig-drain    { from { width: 96%; } to { width: 4%; } }

@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; }
}

/* ---------- trust strip ---------- */

.trust { border-block: 1px solid var(--rule); padding-block: 1.6rem; }
.trust ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 0.6rem 2.2rem;
  font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.05em;
  color: var(--ink-muted);
}
.trust li::before { content: "✓ "; color: var(--crimson-deep); font-weight: 700; }

/* ---------- arguments ---------- */

.args { padding-block: clamp(2.5rem, 6vw, 4.25rem); }
.arg { display: grid; gap: 0.4rem 2.5rem; padding-block: 2.2rem; border-top: 1px solid var(--rule); }
.arg:first-of-type { border-top: 0; }
@media (min-width: 48rem) { .arg { grid-template-columns: 6rem 1fr; } }
.arg .num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 2rem; color: var(--crimson-deep); line-height: 1;
}
.arg p { color: var(--ink-muted); max-width: var(--measure); margin-bottom: 0.4em; }
.arg p strong { color: var(--ink); }
.arg-shot { margin: 0.5rem 0 0; }
.arg-shot img { border: 1px solid var(--rule); border-radius: 10px; }
.arg-shot.phone { display: flex; justify-content: center; }
.arg-shot.phone img { max-width: 12rem; border-radius: 16px; }
@media (min-width: 64rem) {
  .arg { grid-template-columns: 6rem minmax(0, 1fr) minmax(0, 24rem); align-items: center; }
  .arg-shot { margin: 0; grid-column: 3; grid-row: 1 / span 2; }
}

/* ---------- modes ---------- */

.modes { padding-block: clamp(2.5rem, 6vw, 4.25rem); }
.modes-grid {
  display: grid; gap: 1rem; margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
@media (min-width: 60rem) { .modes-grid { grid-template-columns: repeat(3, 1fr); } }
.mode {
  border: 1px solid var(--rule); border-radius: 12px; background: #fff;
  padding: 1.2rem 1.3rem;
}
.mode h3 { margin-bottom: 0.3em; }
.mode p { color: var(--ink-muted); font-size: 0.95rem; margin: 0; }
.modes .kicker { color: var(--ink-muted); max-width: var(--measure); }

/* ---------- in the room gallery ---------- */

.room { padding-block: clamp(2.5rem, 6vw, 4.25rem); }
.room-kicker { color: var(--stage-muted); max-width: var(--measure); }
.room-grid { display: grid; gap: 1.4rem; margin-top: 2rem; }
@media (min-width: 48rem) { .room-grid { grid-template-columns: 1fr 1fr; gap: 1.6rem 1.4rem; } }
.room-grid figure { margin: 0; }
.room-grid img { border: 1px solid #26262e; border-radius: 10px; }
.room-grid figcaption {
  font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.05em;
  color: var(--stage-muted); margin-top: 0.7rem;
}
.has-phone { position: relative; }
.room-phone {
  position: absolute; right: -0.5rem; bottom: 2.4rem; width: 24%;
  border-radius: 12px !important; border: 1px solid #3a3a46 !important;
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.55);
}

/* ---------- classroom reality ---------- */

.classroom { padding-block: clamp(2.5rem, 6vw, 4.25rem); }
.classroom dl { margin: 2rem 0 0; display: grid; gap: 1.8rem; }
@media (min-width: 60rem) { .classroom dl { grid-template-columns: 1fr 1fr; gap: 2rem 3.5rem; } }
.classroom dt { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.classroom dd { margin: 0.3rem 0 0; color: var(--ink-muted); max-width: var(--measure); }

/* ---------- divider band ---------- */

.band { padding-block: 2.6rem; text-align: center; }
.band p {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.3rem, 3vw, 1.9rem); margin: 0; letter-spacing: -0.01em;
}

/* ---------- pricing ---------- */

.pricing { padding-block: clamp(2.5rem, 6vw, 4.25rem); }
.price-grid { display: grid; gap: 1.4rem; margin-top: 2rem; }
@media (min-width: 48rem) { .price-grid { grid-template-columns: 1fr 1fr; } }
.price-card { border: 1px solid var(--rule); border-radius: 14px; background: #fff; padding: 1.8rem; }
.price-card.featured { border: 2px solid var(--crimson-deep); }
.price-card .price { font-family: var(--font-display); font-weight: 700; font-size: 2.4rem; margin: 0.2rem 0 0.1rem; }
.price-card .per { color: var(--ink-muted); font-size: 0.9rem; }
.price-card ul { list-style: none; padding: 0; margin: 1.2rem 0 0; display: grid; gap: 0.55rem; color: var(--ink-muted); }
.price-card li::before { content: "✓  "; color: var(--crimson-deep); font-weight: 700; }
.price-card .soon {
  display: inline-block; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em;
  text-transform: uppercase; background: var(--paper); border: 1px solid var(--rule);
  border-radius: 999px; padding: 0.2rem 0.7rem; color: var(--ink-muted);
}

/* ---------- proof ---------- */

.proof { padding-block: clamp(2.5rem, 6vw, 4.25rem); }
.proof-grid { display: grid; gap: 3rem; }
@media (min-width: 60rem) { .proof-grid { grid-template-columns: 1.2fr 1fr; } }
.founder-note {
  border-left: 3px solid var(--crimson-deep);
  padding-left: 1.4rem;
}
.founder-note p { max-width: var(--measure); }
.founder-note .sig-name { font-family: var(--font-display); font-weight: 700; }
.loadtest table {
  border-collapse: collapse; width: 100%;
  font-family: var(--font-mono); font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
}
.loadtest caption { text-align: left; font-family: var(--font-text); color: var(--ink-muted); font-size: 0.9rem; margin-bottom: 0.8rem; }
.loadtest th, .loadtest td { text-align: right; padding: 0.55rem 0.4rem; border-bottom: 1px solid var(--rule); }
.loadtest th:first-child, .loadtest td:first-child { text-align: left; }
.loadtest thead th { color: var(--ink-muted); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.loadtest .hl td { font-weight: 700; }

/* ---------- closing CTA ---------- */

.closing { text-align: center; padding-block: clamp(3rem, 7vw, 5rem); }
.closing h2 { font-size: clamp(2rem, 5vw, 3.2rem); }
.closing .sub { font-size: 1.25rem; max-width: 30rem; margin-inline: auto; }

/* ---------- footer ---------- */

.footer { border-top: 1px solid var(--rule); padding-block: 2.2rem; font-size: 0.9rem; color: var(--ink-muted); }
.footer .wrap { display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.footer nav { display: flex; gap: 1.6rem; flex-wrap: wrap; }
.footer a { color: var(--ink-muted); }

/* ---------- guide pages (setup / IT) ---------- */

.guide-hero { padding-block: clamp(2rem, 5vw, 3.5rem); }
.guide-hero .sub { font-size: clamp(1.15rem, 2vw, 1.35rem); line-height: 1.5; max-width: 34rem; }
.guide-body { padding-block: clamp(2.5rem, 6vw, 4rem); }
.guide-body h2 { font-size: clamp(1.5rem, 3vw, 2rem); margin-top: 2.6em; }
.guide-body h2:first-of-type { margin-top: 0; }

.step { display: grid; gap: 0.4rem 2.5rem; padding-block: 2.4rem; border-top: 1px solid var(--rule); }
.step:first-of-type { border-top: 0; }
@media (min-width: 48rem) { .step { grid-template-columns: 6rem 1fr; } }
.step .num {
  font-family: var(--font-display); font-weight: 700;
  font-size: 2rem; color: var(--crimson-deep); line-height: 1;
}
.step h3 { font-size: 1.35rem; }
.step p, .step ul { color: var(--ink-muted); max-width: var(--measure); }
.step p strong, .step li strong { color: var(--ink); }
.step ul { margin: 0 0 1em; padding-left: 1.2rem; }
.step-shot { margin: 1rem 0 0; }
.step-shot img { border: 1px solid var(--rule); border-radius: 10px; }
.step-shot figcaption { font-size: 0.85rem; color: var(--ink-muted); margin-top: 0.6rem; }
.step-shot.dark img { border-color: #26262e; }

.callout {
  border: 1px solid var(--rule); border-left: 4px solid var(--crimson-deep);
  border-radius: 10px; background: #fff;
  padding: 1.2rem 1.4rem; margin: 1.6rem 0; max-width: var(--measure);
}
.callout p { margin: 0 0 0.6em; color: var(--ink-muted); }
.callout p:last-child { margin-bottom: 0; }
.callout strong { color: var(--ink); }
.callout .callout-title {
  display: block; font-family: var(--font-display); font-weight: 700;
  color: var(--ink); margin-bottom: 0.4rem;
}

/* help hub */
.help-grid {
  display: grid; gap: 1.4rem; margin-top: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.help-card {
  display: block; border: 1px solid var(--rule); border-radius: 14px;
  background: #fff; padding: 1.6rem; text-decoration: none; color: var(--ink);
}
.help-card:hover { border-color: var(--crimson-deep); }
.help-card .card-label {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted);
  display: block; margin-bottom: 0.7rem;
}
.help-card h3 { margin-bottom: 0.4em; }
.help-card p { color: var(--ink-muted); margin: 0 0 1rem; font-size: 0.97rem; }
.help-card .go { color: var(--crimson-deep); font-weight: 600; }

/* IT guide specifics */
.it-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; margin: 1.4rem 0; }
.it-table th, .it-table td { text-align: left; padding: 0.7rem 0.8rem; border-bottom: 1px solid var(--rule); vertical-align: top; }
.it-table thead th {
  font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-muted); font-weight: 600;
}
.it-table td:first-child { font-weight: 600; }
.it-table-scroll { overflow-x: auto; }
.fact-list {
  list-style: none; padding: 0; margin: 1.4rem 0;
  display: grid; gap: 0.55rem;
  font-family: var(--font-mono); font-size: 0.88rem;
}
.fact-list li::before { content: "→ "; color: var(--crimson-deep); font-weight: 700; }
.vendor { border-top: 1px solid var(--rule); padding-block: 1.6rem; }
.vendor h3 { margin-bottom: 0.4em; }
.vendor p { color: var(--ink-muted); max-width: var(--measure); }
.vendor p strong { color: var(--ink); }
.vendor .path {
  font-family: var(--font-mono); font-size: 0.82rem;
  background: #fff; border: 1px solid var(--rule); border-radius: 8px;
  padding: 0.55rem 0.9rem; display: inline-block; margin: 0.2rem 0 0.8rem;
}

/* ---------- download page ---------- */

.dl-hero { padding-block: clamp(2.5rem, 6vw, 4.25rem); }
.dl-meta {
  list-style: none; padding: 0; margin: 1.6rem 0 0;
  display: grid; gap: 0.5rem;
  font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink-muted);
}
.dl-body { padding-block: clamp(2.5rem, 6vw, 4rem); }
.dl-body h2 { font-size: 1.4rem; }
.sha {
  font-family: var(--font-mono); font-size: 0.78rem;
  background: #fff; border: 1px solid var(--rule); border-radius: 8px;
  padding: 0.8rem 1rem; overflow-x: auto; white-space: nowrap;
}