/* Blueprint - landing site.
   The palette is NOT defined here. It comes from ../docs/brand/tokens.css (the
   brand single source of truth), linked before this file. tokens.css already
   resolves the adaptive surfaces per theme:
     - LIGHT (default): warm off-white bg, white cards, navy text, orange accent
     - DARK: navy field, navy cards, light text, brighter orange accent
   Below we only build LAYOUT + MOTION variables and map the brand tokens
   (--bp-*) into short semantic names. Every colour here is a var(--bp-*).
   The navy/blueprint colours are reserved for the building illustration motif.
   No em dashes anywhere. */

:root {
  /* ---- Layout + motion only (no colours) ---- */
  --maxw: 1080px;
  --pad: clamp(20px, 5vw, 64px);
  --radius: 16px;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  --font: var(--bp-font);

  /* ---- Semantic colour aliases, all sourced from tokens.css ----
     These follow the active theme automatically because the underlying
     --bp-* tokens are redefined per theme inside tokens.css. */
  --bg-1:           var(--bp-bg);
  --bg-2:           var(--bp-bg-2);
  --surface:        var(--bp-surface);
  --surface-stroke: var(--bp-surface-stroke);
  --text-primary:   var(--bp-text);
  --text-secondary: var(--bp-text-dim);
  --accent:         var(--bp-accent);
  --card-shadow:    var(--bp-card-shadow);
  --on-accent:      var(--bp-button-text);

  /* The building illustration motif (navy world), fixed in both themes. */
  --art-ink:     var(--bp-navy);
  --window-fill: var(--bp-accent);
  --line:        var(--bp-line);

  /* Fixed, meaningful A-F grade colours (never change per theme). */
  --grade-a: var(--bp-grade-a); --grade-a-deep: var(--bp-grade-a-deep);
  --grade-b: var(--bp-grade-b); --grade-b-deep: var(--bp-grade-b-deep);
  --grade-c: var(--bp-grade-c); --grade-c-deep: var(--bp-grade-c-deep);
  --grade-d: var(--bp-grade-d); --grade-d-deep: var(--bp-grade-d-deep);
  --grade-f: var(--bp-grade-f); --grade-f-deep: var(--bp-grade-f-deep);

  /* A faint blueprint grid tint that reads on either surface. */
  --grid-line: color-mix(in srgb, var(--bp-navy) 7%, transparent);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* Text-size control scales the root font-size (Small / Default / Large). */
  font-size: var(--bp-root-size, 100%);
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text-primary);
  background: var(--bg-1);
  background:
    radial-gradient(120% 80% at 80% -10%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 60%),
    linear-gradient(180deg, var(--bg-1) 0%, var(--bg-2) 100%);
  background-attachment: fixed;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  transition: color 0.3s var(--ease), background-color 0.3s var(--ease);
}

/* Faint blueprint grid behind everything (echoes the app's BlueprintGrid). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: 44px 44px;
  mask-image: radial-gradient(120% 100% at 50% 0%, #000 30%, transparent 90%);
}

img, svg { max-width: 100%; height: auto; display: block; }

a { color: inherit; }

h1, h2, h3 { line-height: 1.1; margin: 0; letter-spacing: -0.02em; }

p { margin: 0; }

.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--pad);
  position: relative;
  z-index: 1;
}

.eyebrow {
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}

.muted { color: var(--text-secondary); }

/* ---------- Intro splash (sibling to vasly.app's) ---------- */
#splashScreen {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  background: var(--bp-bg);
  /* Fades out after the line finishes; "forwards" + visibility/pointer-events
     guarantee it stops covering the page even if JS never runs. */
  animation: splashFade 0.45s ease 1.35s forwards;
}
.splash-inner { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.splash-mark {
  border-radius: 10px;
  box-shadow: 0 6px 20px var(--bp-card-shadow);
  opacity: 0;
  animation: splashRise 0.5s ease 0.1s forwards;
}
.splash-word {
  font-size: 1.85rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--bp-text);
  opacity: 0;
  animation: splashRise 0.5s ease 0.24s forwards;
}
.splash-word .dot { color: var(--bp-accent); }
.splash-line {
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--bp-accent);
  margin-top: 4px;
  animation: splashLine 0.95s cubic-bezier(0.6, 0, 0.2, 1) 0.34s forwards;
}
@keyframes splashRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes splashLine { from { width: 0; } to { width: 128px; } }
@keyframes splashFade { to { opacity: 0; visibility: hidden; pointer-events: none; } }

/* No splash at all when reduced motion is requested. */
@media (prefers-reduced-motion: reduce) {
  #splashScreen { display: none; }
  .splash-mark, .splash-word, .splash-line { animation: none; opacity: 1; width: 128px; }
}

/* ---------- Skip link / a11y ---------- */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--accent);
  color: var(--on-accent);
  padding: 10px 16px;
  border-radius: 8px;
}
.skip-link:focus { left: 12px; top: 12px; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ---------- Wordmark ---------- */
.wordmark {
  font-weight: 900;
  letter-spacing: -0.03em;
}
.wordmark .dot { color: var(--accent); }

/* The real app icon used as the nav + footer logo mark. */
.logo-mark {
  width: 30px;
  height: 30px;
  border-radius: 7px;
  display: block;
  box-shadow: 0 1px 4px var(--card-shadow);
}
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
}

/* ---------- Top nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(10px);
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-1) 80%, transparent), transparent);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease), background 0.3s var(--ease);
}
.nav.scrolled {
  border-bottom-color: var(--surface-stroke);
  background: color-mix(in srgb, var(--bg-1) 85%, transparent);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px var(--pad);
  max-width: var(--maxw);
  margin-inline: auto;
}
.nav .wordmark { font-size: 1.25rem; }
.nav-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.nav a.nav-cta {
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--text-primary);
  border: 1px solid var(--surface-stroke);
  padding: 8px 16px;
  border-radius: 999px;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
  white-space: nowrap;
}
.nav a.nav-cta:hover { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, transparent); }

/* ---------- Segmented controls (shared: theme toggle + text size) ---------- */
.seg {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--surface-stroke);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface) 70%, transparent);
}
.seg-opt {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
  min-width: 30px;
  height: 30px;
  padding: 0 6px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  cursor: pointer;
  font-weight: 800;
  font-size: 0.82rem;
  line-height: 1;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.seg-opt svg { width: 16px; height: 16px; stroke: currentColor; }
.seg-opt:hover { color: var(--text-primary); }
.seg-opt[aria-checked="true"] {
  background: var(--accent);
  color: var(--on-accent);
}
.seg-opt[aria-checked="true"]:hover { color: var(--on-accent); }

/* The text-size control labels scale to hint Small / Default / Large. */
.textsize .seg-opt.ts-sm { font-size: 0.7rem; }
.textsize .seg-opt.ts-md { font-size: 0.85rem; }
.textsize .seg-opt.ts-lg { font-size: 1rem; }

/* ---------- Sections ---------- */
section {
  position: relative;
  /* Less top than bottom, so section headings sit a touch higher. */
  padding-top: clamp(48px, 8vh, 96px);
  padding-bottom: clamp(72px, 12vh, 140px);
}
.section-head { max-width: 640px; margin-bottom: 48px; }
.section-head h2 {
  font-size: clamp(1.9rem, 4.4vw, 3rem);
  font-weight: 800;
}
.section-head p { margin-top: 18px; font-size: 1.12rem; color: var(--text-secondary); }

/* ---------- Hero ---------- */
.hero.scrolly { --track: 200vh; }
.hero .scrolly-stage { padding-top: 80px; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(24px, 5vw, 72px);
  align-items: center;
}
.hero h1 {
  font-size: clamp(2.6rem, 7vw, 5rem);
  font-weight: 900;
}
.hero .tagline {
  margin-top: 22px;
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  font-weight: 600;
  color: var(--text-primary);
}
.hero .oneliner {
  margin-top: 16px;
  font-size: 1.08rem;
  max-width: 30ch;
  color: var(--text-secondary);
}
.hero-art {
  aspect-ratio: 3 / 4;
  width: 100%;
  max-width: 420px;
  margin-inline: auto;
  /* The illustration is the navy blueprint motif, so it sits on its own
     navy field card to read correctly in both light and dark themes. */
  background: linear-gradient(160deg, var(--bp-navy-top), var(--bp-navy));
  border-radius: 24px;
  border: 1px solid color-mix(in srgb, var(--bp-line) 30%, transparent);
  padding: 22px;
  box-shadow: 0 30px 70px -28px var(--card-shadow);
}

/* ---------- Store buttons ---------- */
.store-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;                 /* clear space >= 1/4 of badge height (Apple + Google guidelines) */
  margin-top: 34px;
  align-items: center;
}
.store-btn { display: inline-flex; }
.store-btn[aria-disabled="true"] { cursor: default; }
/* Official store badge artwork (Apple "Download on the App Store", Google "Get it
   on Google Play"). Per the guidelines: do not recolor, rotate, animate, add
   effects, or render below 40px; App Store badge is placed first. The badges are
   the unmodified files in /assets, not recreations. */
.store-img { display: block; height: 44px; width: auto; }
/* Google's official badge PNG has a wide transparent border (the opaque button
   is only ~67% of the file height), so it must render taller for its visible
   button to match the App Store badge and stay "the same size or larger" than
   other store badges, as Google requires. 66px gives a ~44px visible button. */
.store-img.gplay { height: 66px; }
.soon-tag {
  align-self: center;
  font-size: 0.7rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent);
}

/* ---------- Grade badge ---------- */
.grade-stage {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
}
.grade-badge {
  --c: var(--grade-a);
  --c2: var(--grade-a-deep);
  width: clamp(160px, 30vw, 240px);
  aspect-ratio: 1;
  border-radius: 28px;
  display: grid;
  place-items: center;
  font-size: clamp(5rem, 14vw, 8rem);
  font-weight: 900;
  color: #fff; /* brand: the grade letter is always white on the gradient */
  background: linear-gradient(135deg, var(--c), var(--c2));
  box-shadow: 0 24px 60px -20px var(--card-shadow), inset 0 1px 0 rgba(255,255,255,0.15);
  position: relative;
  overflow: hidden;
  transition: background 0.6s var(--ease);
}
.grade-badge::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(255,255,255,0.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.12) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.5;
}
.grade-scale {
  display: flex;
  gap: 8px;
  margin-top: 26px;
  flex-wrap: wrap;
}
.grade-chip {
  font-weight: 800;
  font-size: 0.95rem;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.2s, border-color 0.2s, opacity 0.2s;
  opacity: 0.55;
}
.grade-chip[aria-pressed="true"] { opacity: 1; transform: scale(1.06); border-color: rgba(255,255,255,0.5); }
.grade-chip.a { background: linear-gradient(135deg,var(--grade-a),var(--grade-a-deep)); }
.grade-chip.b { background: linear-gradient(135deg,var(--grade-b),var(--grade-b-deep)); }
.grade-chip.c { background: linear-gradient(135deg,var(--grade-c),var(--grade-c-deep)); }
.grade-chip.d { background: linear-gradient(135deg,var(--grade-d),var(--grade-d-deep)); }
.grade-chip.f { background: linear-gradient(135deg,var(--grade-f),var(--grade-f-deep)); }
.grade-desc { margin-top: 18px; min-height: 1.6em; font-weight: 600; color: var(--text-primary); }

.grade-steps { list-style: none; padding: 0; margin: 28px 0 0; display: grid; gap: 14px; }
.grade-steps li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  color: var(--text-secondary);
}
.grade-steps .n {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-size: 0.8rem; font-weight: 800;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}
.grade-steps strong { color: var(--text-primary); }

/* ---------- Coverage / count-up ---------- */
.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 8px;
}
.stat {
  background: var(--surface);
  border: 1px solid var(--surface-stroke);
  border-radius: var(--radius);
  padding: 28px 22px;
  box-shadow: 0 10px 30px -22px var(--card-shadow);
}
.stat .num {
  font-size: clamp(2.4rem, 6vw, 3.6rem);
  font-weight: 900;
  color: var(--text-primary);
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.stat .label { margin-top: 6px; color: var(--text-secondary); font-weight: 600; }

/* ---------- Feature cards ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--surface-stroke);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 14px 36px -26px var(--card-shadow);
  transition: transform 0.3s var(--ease), border-color 0.3s, box-shadow 0.3s;
}
.card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  box-shadow: 0 22px 48px -26px var(--card-shadow);
}
.card .ic {
  width: 46px; height: 46px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent);
  margin-bottom: 18px;
}
.card .ic svg { width: 24px; height: 24px; stroke: var(--accent); }
.card h3 { font-size: 1.25rem; font-weight: 700; }
.card p { margin-top: 10px; color: var(--text-secondary); }

.cards.two { grid-template-columns: repeat(2, 1fr); }

/* ---------- Pricing ---------- */
/* Free vs Pro comparison table (mirrors the in-app Pro table). */
.compare-table {
  border: 1px solid var(--surface-stroke);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 14px 36px -26px var(--card-shadow);
  overflow: hidden;
}
.compare-table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 1rem;
}
.compare-table thead th {
  text-align: center;
  padding: 22px 14px 18px;
  vertical-align: bottom;
  background: var(--bg-2);
  border-bottom: 1px solid var(--surface-stroke);
}
.compare-table thead th.feat-col { text-align: left; }
.compare-table thead .tier {
  display: block;
  font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  font-size: 0.78rem; color: var(--text-secondary);
}
.compare-table thead .pro-col .tier { color: var(--accent); }
.compare-table thead .amount {
  display: block; margin-top: 4px;
  font-size: 1.7rem; font-weight: 900; color: var(--text-primary);
}
.compare-table thead .amount small { font-size: 0.85rem; font-weight: 600; color: var(--text-secondary); }
.compare-table .pro-col {
  background:
    radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 70%),
    var(--bg-2);
}
.compare-table tbody th {
  text-align: left; font-weight: 600; color: var(--text-primary);
  padding: 13px 16px;
}
.compare-table tbody td {
  text-align: center; color: var(--text-secondary); font-weight: 600;
  padding: 13px 14px; width: 22%;
}
.compare-table tbody tr + tr th,
.compare-table tbody tr + tr td { border-top: 1px solid var(--surface-stroke); }
.compare-table td.yes { color: var(--accent); font-weight: 800; }
.compare-table td.no { color: var(--text-secondary); opacity: 0.6; }
.compare-table td.pro-cell { background: color-mix(in srgb, var(--accent) 6%, transparent); color: var(--text-primary); }
.compare-table td.yes.pro-cell { color: var(--accent); }
.price-note { margin-top: 28px; font-size: 1.05rem; color: var(--text-primary); font-weight: 600; max-width: 52ch; }

/* ---------- Final CTA ---------- */
.cta { text-align: center; }
.cta h2 { font-size: clamp(2rem, 5.5vw, 3.4rem); font-weight: 900; }
.cta p { margin: 16px auto 0; max-width: 44ch; color: var(--text-secondary); font-size: 1.1rem; }
.cta .store-row { justify-content: center; }

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--surface-stroke);
  padding-block: 48px;
  position: relative;
  z-index: 1;
}
.foot-inner { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; align-items: center; }
.foot-links { display: flex; flex-wrap: wrap; gap: 22px; }
.foot-links a { color: var(--text-secondary); text-decoration: none; font-weight: 600; }
.foot-links a:hover { color: var(--accent); }
footer .wordmark { font-size: 1.1rem; }
.foot-fine { margin-top: 22px; font-size: 0.82rem; color: var(--text-secondary); max-width: 70ch; }
.foot-fine a { color: var(--accent); }

/* ---------- Scroll reveal (tasteful, for the non-pinned sections) ---------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }
.reveal.d1 { transition-delay: 0.08s; }
.reveal.d2 { transition-delay: 0.16s; }
.reveal.d3 { transition-delay: 0.24s; }

/* =====================================================================
   Apple-grade scrollytelling: pinned, scroll-scrubbed stages.
   Each .scrolly is a tall track. Inside, .scrolly-stage is sticky (pinned)
   and 100svh tall. A normalized progress 0..1 is exposed as --p. Where
   supported, native CSS scroll-driven animations write --p; everywhere else
   app.js writes --p in a rAF-throttled scroll handler. Animations key off --p
   only, so both paths drive the exact same visuals.
   ===================================================================== */

@property --p {
  syntax: "<number>";
  inherits: true;
  initial-value: 0;
}

.scrolly {
  position: relative;
  --track: 230vh;
  height: var(--track);
  padding-block: 0;
  --p: 0;
}
.grade-scrolly    { --track: 320vh; }
.coverage-scrolly { --track: 260vh; }

.scrolly-stage {
  position: sticky;
  top: 0;
  min-height: 100svh;
  display: grid;
  align-items: center;
  /* Bias the centered content upward (more padding below than above) so the
     pinned headings sit higher in the viewport, clear of the sticky nav. */
  padding-top: clamp(56px, 8vh, 92px);
  padding-bottom: clamp(112px, 18vh, 190px);
  overflow: hidden;
}

@supports (animation-timeline: view()) {
  @keyframes bp-progress { from { --p: 0; } to { --p: 1; } }
  html:not(.js-scrub) .scrolly {
    animation: bp-progress linear both;
    animation-timeline: view();
    animation-range: cover 0% cover 100%;
  }
}

.scroll-hint {
  position: absolute;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-secondary);
  opacity: calc(1 - var(--p) * 3);
  pointer-events: none;
}

/* ----- Hero: visible immediately on load (never blank). The building draws
   itself in once as a load animation (not scroll-scrubbed), and all the copy is
   shown right away. The pinned scrollytelling lives in the grade + coverage
   stages below the fold. ----- */
.hero.scrolly { height: auto; --track: auto; }
.hero .scrolly-stage { position: static; min-height: auto; padding-block: clamp(96px, 15vh, 150px); }
.hero .scroll-hint { display: none; }
.hero .hero-copy > * { opacity: 1; transform: none; }

.hero .bp-ink > * {
  stroke-dasharray: var(--len, 600);
  stroke-dashoffset: 0;
  animation: bp-draw 1.7s ease-out 0.2s both;
}
.hero .bp-windows > * { opacity: 0; animation: bp-win 0.5s ease-out 1.5s both; }
@keyframes bp-draw { from { stroke-dashoffset: var(--len, 600); } to { stroke-dashoffset: 0; } }
@keyframes bp-win  { to { opacity: 1; } }

/* ----- Grade stage: subtle scale scrub; JS swaps the letter/colour ----- */
.grade-scrolly .grade-badge {
  transform: scale(calc(0.96 + 0.04 * var(--p)));
}

/* ----- Coverage stage: city grid cells reveal in sequence by --p ----- */
.city-grid {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
  max-width: 520px;
}
.city-grid span {
  aspect-ratio: 1;
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
  opacity: clamp(0, (var(--p) - var(--i, 0) * 0.024) * 6, 1);
  transform: scale(calc(0.8 + 0.2 * clamp(0, (var(--p) - var(--i, 0) * 0.024) * 6, 1)));
}

/* ----- Coverage: where Blueprint works, one compact card per market ----- */
.market-grid {
  margin-top: 34px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.market-card {
  background: var(--surface);
  border: 1px solid var(--surface-stroke);
  border-radius: var(--radius);
  padding: 20px 18px;
  box-shadow: 0 10px 30px -22px var(--card-shadow);
}
.market-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
}
.market-card p {
  margin-top: 6px;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.55;
}
.market-note {
  margin-top: 18px;
  color: var(--text-secondary);
  font-size: 0.95rem;
}
.market-note strong { color: var(--text-primary); font-weight: 700; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .hero-grid { grid-template-columns: 1fr; text-align: left; }
  .hero-art { grid-row: 1; max-width: 300px; }
  .stats, .cards, .cards.two, .price-grid, .grade-stage { grid-template-columns: 1fr; }
  .grade-stage { justify-items: start; }
  .city-grid { gap: 6px; }
}

/* On small/cramped viewports, drop the heavy pinning so stages do not feel
   trapped: collapse the track to natural height and render content settled. */
@media (max-width: 640px), (max-height: 560px) {
  .market-grid { grid-template-columns: 1fr; }
  .scrolly { height: auto; --p: 1; }
  .scrolly-stage { position: static; min-height: 0; overflow: visible; }
  .scroll-hint { display: none; }
  .hero .hero-copy > * { opacity: 1; transform: none; }
  .hero .bp-ink > * { stroke-dashoffset: 0; }
  .hero .bp-windows > * { opacity: 1; }
  .city-grid span { opacity: 1; transform: none; }
  @supports (animation-timeline: view()) {
    .scrolly { animation: none; }
  }
}

/* ---------- Reduced motion: render everything in its final state ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .card, .store-btn, .grade-badge, .seg-opt { transition: none; }
  * { animation: none !important; }

  .scrolly { height: auto; --p: 1; }
  .scrolly-stage { position: static; min-height: 0; overflow: visible; }
  .scroll-hint { display: none; }
  .hero .hero-copy > * { opacity: 1; transform: none; }
  .hero .bp-ink > * { stroke-dashoffset: 0; }
  .hero .bp-windows > * { opacity: 1; }
  .grade-scrolly .grade-badge { transform: none; }
  .city-grid span { opacity: 1; transform: none; }
  @supports (animation-timeline: view()) {
    .scrolly { animation: none; }
  }
}