/* ============================================================================
   POOOL UI — landing.css (Layer 4: page styles for POOOL Landing.html)
   Page-specific only: hero, card strip, background rhythm. Everything
   reusable lives in components.css — do not restyle components here.
   ============================================================================ */

html { overflow-x: hidden; }

/* ── Market hero ─────────────────────────────────────────── */
.mhero { padding: 64px 0 56px; text-align: center; position: relative; }
.mhero h1 { font-size: 58px; font-weight: 800; letter-spacing: -.035em; line-height: 1.04; color: var(--fg-heading-2); margin: 18px auto 16px; max-width: 17ch; }
.mhero h1 .hl { color: var(--brand-blue); }
.mhero__p { font-size: 19px; color: var(--fg-secondary); line-height: 1.55; margin: 0 auto 32px; max-width: 52ch; }
.msearch { display: inline-flex; align-items: center; background: #fff; border: 0; border-radius: 40px; box-shadow: 0 10px 40px rgba(10,13,18,.10); padding: 6px 6px 6px 10px; text-align: left; }
.msearch__seg { padding: 8px 22px; cursor: pointer; border-radius: 30px; transition: background .15s ease; }
.msearch__seg:hover { background: var(--bg-hover); }
.msearch__seg + .msearch__seg { border-left: 1px solid var(--border); }
.msearch__seg .k { font-size: 12px; font-weight: 700; color: var(--fg-heading-2); letter-spacing: .02em; }
.msearch__seg .v { font-size: 14px; color: var(--fg-muted); margin-top: 1px; white-space: nowrap; }
.msearch__btn { height: 48px; border-radius: 30px; border: 0; background: var(--brand-blue); color: var(--brand-green-mint); font-family: var(--font-family); font-size: 15px; font-weight: 700; display: inline-flex; align-items: center; gap: 8px; padding: 0 22px; margin-left: 8px; cursor: pointer; transition: background .15s ease; }
.msearch__btn:hover { background: var(--brand-blue-hover); }
.msearch__btn svg { width: 16px; height: 16px; }
.mhero__trust { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 30px; font-size: 14px; color: var(--fg-muted); }
.mhero__flags { display: flex; }
.mhero__flags img { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #fff; margin-left: -8px; object-fit: cover; box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.mhero__flags img:first-child { margin-left: 0; }

/* ── Hero v2: depth, drawn accent, line reveal, live card strip ────────── */
.mhero { padding: 54px 0 18px; position: relative; overflow: hidden; text-align: left; }
.mhero h1 { max-width: none; font-size: clamp(44px, 5.4vw, 68px); letter-spacing: 0; line-height: .98; margin: 18px 0 18px; }
.mh-ln { display: block; white-space: nowrap; }
.mhero__bg, .mhero__dots { position: absolute; inset: 0; pointer-events: none; }
.mhero__bg { background:
  radial-gradient(640px 320px at 8% 0%, rgba(0,0,255,.06), transparent 70%),
  radial-gradient(720px 380px at 94% 6%, rgba(3,255,136,.09), transparent 70%); }
.mhero__dots { background-image: radial-gradient(rgba(0,0,255,.10) 1.2px, transparent 1.8px); background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(62% 56% at 50% 26%, rgba(0,0,0,.55), transparent 78%);
  mask-image: radial-gradient(62% 56% at 50% 26%, rgba(0,0,0,.55), transparent 78%); }
.mhero .wrap { position: relative; }
.mhero__layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(360px, 480px); gap: 54px; align-items: center; }
.mhero__copy { min-width: 0; }
.mh-ln { display: block; }
.mh-ln > span { display: inline-block; animation: mhUp .9s cubic-bezier(.2,.8,.2,1) both; }
.mh-ln:nth-child(2) > span { animation-delay: .15s; }
@keyframes mhUp { from { transform: translateY(34px); opacity: 0; } }
.mh-circ { position: relative; color: var(--brand-blue); white-space: nowrap; }
.mh-fade-1 { animation: heroFade .8s cubic-bezier(.2,.7,.2,1) .20s both; }
.mh-fade-2 { animation: heroFade .8s cubic-bezier(.2,.7,.2,1) .34s both; }
.mh-fade-3 { animation: heroFade .8s cubic-bezier(.2,.7,.2,1) .48s both; }
.mhero__p { margin: 0 0 30px; max-width: 52ch; }
.mhero__trust { justify-content: flex-start; }
.mhero__flags img { animation: mhPop .55s cubic-bezier(.3,1.4,.4,1) both; }
@keyframes mhPop { from { transform: scale(0); } }
.mh-caret::after { content: '|'; margin-left: 1px; color: var(--brand-blue); animation: mhBlink 1s steps(1) infinite; }
@keyframes mhBlink { 50% { opacity: 0; } }
.mhero__visual { position: relative; min-height: 520px; border-radius: 8px; overflow: hidden;
  background: var(--bg-hover); box-shadow: 0 22px 60px rgba(10,13,18,.16); isolation: isolate; }
.mhero__visual::after { content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,13,18,0) 42%, rgba(10,13,18,.62) 100%); z-index: 1; }
.mhero__visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.mhero__visual-badge { position: absolute; top: 18px; left: 18px; z-index: 2; display: inline-flex; align-items: center;
  gap: 8px; border-radius: 99px; padding: 8px 13px; background: rgba(255,255,255,.9); color: var(--fg-heading-2);
  box-shadow: 0 8px 24px rgba(10,13,18,.14); font-size: 12.5px; font-weight: 800; }
.mhero__visual-badge span { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-green-neon); }
.mhero__visual-panel { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2; display: grid;
  grid-template-columns: 1fr auto; gap: 18px; align-items: end; border-radius: 8px; padding: 18px;
  background: rgba(255,255,255,.92); box-shadow: 0 12px 32px rgba(10,13,18,.18); backdrop-filter: blur(8px); }
.mhero__visual-panel .k { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em;
  color: var(--fg-muted); font-weight: 800; margin-bottom: 4px; }
.mhero__visual-panel strong { display: block; color: var(--fg-heading-2); font-size: 19px; line-height: 1.1; }
.mhero__visual-panel > div:last-child { text-align: right; }
.mhero__visual-panel > div:last-child strong { color: var(--brand-blue); }
@media (prefers-reduced-motion: reduce) {
  .mh-ln > span, .mh-fade-1, .mh-fade-2, .mh-fade-3, .mhero__flags img { animation: none; }
  .mh-caret::after { content: none; }
}
@media (max-width: 1040px) {
  .mhero__layout { grid-template-columns: 1fr; gap: 34px; }
  .mhero__copy { text-align: center; }
  .mhero h1 { margin-left: auto; margin-right: auto; }
  .mhero__p { margin-left: auto; margin-right: auto; }
  .mhero__trust { justify-content: center; }
  .mhero__visual { min-height: 420px; max-width: 680px; width: 100%; margin: 0 auto; }
}
@media (max-width: 720px) {
  .mhero { padding-top: 38px; }
  .mh-ln { white-space: normal; display: inline; }
  .mh-ln > span { display: inline; animation: heroFade .8s cubic-bezier(.2,.7,.2,1) both; }
  .mhero__layout { gap: 28px; }
  .mhero__visual { min-height: 320px; }
  .mhero__visual-panel { grid-template-columns: 1fr; }
  .mhero__visual-panel > div:last-child { text-align: left; }
}

/* Live card strip — the marketplace leaking into the hero */
.mstrip { position: relative; z-index: 2; margin-top: 46px; margin-bottom: -34px; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.mstrip__track { display: flex; gap: 14px; width: max-content; padding: 12px 0 20px; animation: mstripMove 60s linear infinite; }
.mstrip:hover .mstrip__track { animation-play-state: paused; }
@keyframes mstripMove { to { transform: translateX(-50%); } }
.mcard-mini { display: flex; gap: 11px; align-items: center; background: #fff; border-radius: 14px; box-shadow: 0 4px 20px rgba(0,0,0,.08); padding: 8px; padding-right: 16px; cursor: pointer; transition: transform .3s, box-shadow .3s; }
.mcard-mini:hover { transform: translateY(-4px); box-shadow: 0 14px 36px rgba(0,0,0,.14); }
.mcard-mini img { width: 94px; height: 66px; border-radius: 9px; object-fit: cover; display: block; }
.mcard-mini .t { font-size: 13px; font-weight: 700; color: var(--fg-heading-2); white-space: nowrap; }
.mcard-mini .p { font-size: 12px; font-weight: 700; color: var(--brand-blue); white-space: nowrap; margin-top: 2px; }
.mcard-mini .y { display: inline-block; margin-top: 6px; font-size: 10.5px; font-weight: 800; background: var(--brand-green-mint); color: var(--brand-blue); border-radius: 10px; padding: 2px 8px; white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .mstrip { overflow-x: auto; } .mstrip__track { animation: none; } }

/* ── Background system: one continuous canvas, no hard seams ──────────────
   Rhythm: hero (white + glows) → marketplace (tint) → stats (white + halo)
   → how (white) → why (tint) → calculator (white + halo) → testimonials
   (tint) → FAQ/CTA (white) → footer (dark). Tinted panels dissolve in and
   out over ~110px instead of cutting; blue moments get soft radial halos. */
#market { background: linear-gradient(180deg, rgba(247,248,252,0) 0%, #F7F8FC 110px, #F7F8FC calc(100% - 140px), rgba(247,248,252,0) 100%); }
#why, #testimonials, #founding { background: linear-gradient(180deg, rgba(247,248,252,0) 0%, #F7F8FC 110px, #F7F8FC calc(100% - 110px), rgba(247,248,252,0) 100%); }
.statwrap { position: relative; }
.statwrap::before { content: ''; position: absolute; inset: -70px 0; background: radial-gradient(52% 72% at 50% 50%, rgba(0,0,255,.05), transparent 72%); pointer-events: none; }
.statwrap .sband { z-index: 1; }
#calc { background: radial-gradient(58% 66% at 50% 46%, rgba(0,0,255,.05), transparent 74%); }

/* ── Featured-launch mode (low inventory: ≤2 live assets) ─────────────────
   The abundance grid would read as "empty marketplace" with 1–2 assets, so
   the marketplace section swaps to large 2-column spotlight cards + a
   "more coming" panel. Same .acard surface language (white, xl radius,
   property shadow, hover lift) so it reads as one system. */
.mgrid--featured { display: grid; grid-template-columns: 1fr; gap: 28px; }
.spot { display: grid; grid-template-columns: 1.05fr 1fr; background: var(--bg-surface);
  border: 1px solid var(--border-soft); border-radius: var(--radius-card-xl); overflow: hidden;
  box-shadow: var(--shadow-property); transition: transform .3s, box-shadow .3s; }
.spot:hover { transform: translateY(-4px); box-shadow: var(--shadow-property-hover); }
.spot__media { position: relative; min-height: 340px; background: var(--bg-hover); }
.spot__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.spot__media > a { position: absolute; inset: 0; z-index: 1; }
.spot__live { position: absolute; top: 16px; right: 16px; z-index: 2; display: inline-flex; align-items: center;
  gap: 7px; background: rgba(255,255,255,.92); backdrop-filter: blur(4px); border-radius: 99px;
  padding: 6px 13px; font-size: 12.5px; font-weight: 700; color: var(--fg-heading-2);
  box-shadow: 0 1px 4px rgba(0,0,0,.12); }
.spot__live i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-green-neon);
  box-shadow: 0 0 0 0 rgba(0,255,128,.55); animation: spotPulse 2s ease-out infinite; }
@keyframes spotPulse { 70%, 100% { box-shadow: 0 0 0 7px rgba(0,255,128,0); } }
.spot__body { padding: 30px 34px; display: flex; flex-direction: column; gap: 11px; }
.spot__loc { font-size: 13.5px; font-weight: 600; color: var(--fg-muted); }
.spot__title { font-size: 27px; font-weight: 800; letter-spacing: -.02em; color: var(--fg-heading-2);
  margin: 0; line-height: 1.12; }
.spot__blurb { font-size: 14.5px; color: var(--fg-secondary); line-height: 1.6; margin: 2px 0 0; }
.spot__specs { display: flex; align-items: center; gap: 18px; font-size: 13px; font-weight: 600;
  color: var(--fg-secondary); margin-top: 2px; }
.spot__specs svg { width: 15px; height: 15px; margin-right: 5px; vertical-align: -3px; color: var(--fg-muted); }
.spot__priced { display: flex; align-items: baseline; justify-content: space-between; margin-top: 6px; }
.spot__price { font-size: 30px; font-weight: 800; color: var(--brand-blue); }
.spot__price span { font-size: 14px; color: var(--fg-muted); font-weight: 600; }
.spot__funded { font-size: 13px; font-weight: 700; color: var(--fg-secondary); }
.spot__track { height: 7px; border-radius: 99px; background: var(--bg-hover); overflow: hidden; }
.spot__fill { height: 100%; border-radius: 99px; background: var(--brand-green-mint); }
.spot__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  border-top: 1px dotted var(--border-strong); padding-top: 16px; margin-top: 4px; }
.spot__stats .k { font-size: 11px; text-transform: uppercase; letter-spacing: .05em;
  color: var(--fg-disabled); font-weight: 600; }
.spot__stats .v { font-size: 16px; font-weight: 800; color: var(--brand-blue); margin-top: 3px; }
.spot__cta { display: flex; gap: 10px; margin-top: auto; padding-top: 12px; }
.spot__cta .btn { flex: 1; }

/* "More assets coming" panel — scarcity framed as a deliberate first release */
.launch-more { margin-top: 28px; display: grid; grid-template-columns: auto 1fr auto; align-items: center;
  gap: 22px; background: linear-gradient(120deg, rgba(0,0,255,.04), rgba(0,255,128,.05));
  border: 1px dashed var(--border-strong); border-radius: var(--radius-card-xl); padding: 24px 30px; }
.launch-more__logo { height: 26px; width: auto; flex: none; }
.launch-more__txt h3 { margin: 0; font-size: 18px; font-weight: 800; color: var(--fg-heading-2); }
.launch-more__txt p { margin: 4px 0 0; font-size: 14px; color: var(--fg-secondary); line-height: 1.55; }

@media (max-width: 860px) {
  .spot { grid-template-columns: 1fr; }
  .spot__media { min-height: 220px; }
  .launch-more { grid-template-columns: 1fr; text-align: center; justify-items: center; gap: 14px; }
}

/* ── "How it works" — 4-step card + phone video ──────────────────────────
   Ported from the old landing-v2 how-section (numbered stepper + webm phone),
   re-skinned to design tokens (no raw hex / inline <style>, so it passes the
   design-metrics ratchet). Card left, phone video right; stacks on mobile. */
/* Header reuses the design-system section pattern (.eyebrow pill + .s-title,
   sentence case) — not the old landing-v2 uppercase mega-title. */
.how-split { display: flex; flex-direction: column-reverse; align-items: center; gap: 40px; margin-top: 8px; }
/* Card surface — matches the landing's own .value/.step cards: bg-surface +
   border-soft + radius-card-xl + shadow-property. (The style guide's .set-card
   omits the border because there --shadow-property carries a 1px ring; on the
   landing that token resolves WITHOUT the ring, so the explicit hairline is
   what gives the card a visible edge — dropping it left it edgeless.) */
.how-card { flex: 1; min-width: 0; width: 100%; background: var(--bg-surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-card-xl); box-shadow: var(--shadow-property); padding: 40px;
  display: flex; flex-direction: column; justify-content: center; box-sizing: border-box; }
/* "Simple process" reuses the .eyebrow pill; this only left-aligns it in the card. */
.how-card__label { align-self: flex-start; margin-bottom: 20px; }
/* Typography on the documented type scale (--fs-* / --fw-*), not ad-hoc px. */
.how-card__title { font-size: var(--fs-2xl); font-weight: var(--fw-xbold); letter-spacing: -.02em;
  line-height: 1.2; color: var(--fg-heading-2); margin: 0 0 26px; }
.how-stepper { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.how-stepper__item { position: relative; display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding: 12px 0; }
.how-stepper__item:not(:last-child)::before { content: ""; position: absolute; top: 32px; bottom: -4px;
  left: 12px; width: 2px; background: var(--border); z-index: 0; }
.how-stepper__step { width: 26px; height: 26px; border-radius: 50%; background: var(--brand-blue);
  color: var(--brand-green-mint); font-weight: var(--fw-xbold); font-size: var(--fs-xs); font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: center; justify-content: center; position: relative; z-index: 1; margin-top: 1px; }
.how-stepper__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.how-stepper__name { font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--fg-heading-2); line-height: 1.3; margin: 0; }
.how-stepper__desc { font-size: var(--fs-sm); color: var(--fg-secondary); line-height: 1.55; margin: 0; }
.how-media { flex: 1; min-width: 0; width: 100%; display: flex; justify-content: center; }
.how-video { width: 100%; max-width: 100%; max-height: 460px; object-fit: contain; border-radius: var(--radius-card-xl); }
@media (min-width: 1025px) {
  .how-split { flex-direction: row; align-items: stretch; gap: 56px; }
  .how-media { align-self: center; }
}

/* ── Trust band (landing-pro) ─────────────────────────────────────────────
   Honest, compliance-safe replacement for the fabricated stats band. Same
   electric-blue panel + neon-spark surface as the old .sband (so the page
   rhythm is unchanged), but each cell states a STRUCTURAL fact (escrow, SPV,
   audit/insurance, $100 entry) instead of an invented metric. Tokens only. */
.tband { position: relative; max-width: 1200px; margin: 0 auto; border-radius: 24px; overflow: hidden;
  box-shadow: 0 4px 20px rgba(0,0,255,.16);
  background: radial-gradient(130% 180% at 10% 0%, var(--brand-blue-active), var(--brand-blue) 48%, var(--brand-blue-hover));
  padding: 40px 18px; }
.tband__spark { position: absolute; inset: 0; width: 100%; height: 100%; opacity: .30; pointer-events: none; }
.tband__spark polyline { fill: none; stroke: var(--brand-green-neon); stroke-width: 2; stroke-linecap: round;
  stroke-dasharray: 10 12; animation: sbandDash 16s linear infinite; }
.tband__grid { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tband__item { position: relative; text-align: center; padding: 0 22px; display: flex; flex-direction: column; align-items: center; }
.tband__item + .tband__item::before { content: ''; position: absolute; left: 0; top: 10%; bottom: 10%; width: 1px; background: rgba(255,255,255,.16); }
.tband__ic { width: 46px; height: 46px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.12); color: var(--brand-green-mint); margin-bottom: 14px; }
.tband__v { font-size: 19px; font-weight: var(--fw-xbold); color: var(--brand-green-mint); letter-spacing: -.01em; line-height: 1.2; }
.tband__k { font-size: 13.5px; color: rgba(255,255,255,.82); line-height: 1.5; margin-top: 8px; max-width: 28ch; }
@media (prefers-reduced-motion: reduce) { .tband__spark polyline { animation: none; } }
@media (max-width: 880px) {
  .tband__grid { grid-template-columns: 1fr 1fr; gap: 30px 8px; }
  .tband__item:nth-child(3)::before { display: none; }
}
@media (max-width: 540px) {
  .tband__grid { grid-template-columns: 1fr; gap: 26px; }
  .tband__item + .tband__item::before { display: none; }
}

/* ── Pre-launch credibility (landing-pro) ─────────────────────────────────
   Replaces the fake-testimonials grid. A founder note (real, hedged copy) on
   the left and the genuine protection model on the right — no people, photos,
   ratings or histories. Card surfaces reuse the landing's own value-card
   language (bg-surface + border-soft + radius-card-xl + shadow-property). */
.s-sub { font-size: 16px; color: var(--fg-secondary); line-height: 1.6; margin: 16px auto 0; max-width: 56ch; }
.founding { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: stretch; }
.founder { position: relative; margin: 0; background: var(--bg-surface); border: 1px solid var(--border-soft);
  border-radius: var(--radius-card-xl); box-shadow: var(--shadow-property);
  padding: 40px 38px; display: flex; flex-direction: column; }
.founder__mark { font-size: 72px; line-height: .6; font-weight: var(--fw-xbold); color: var(--brand-blue); opacity: .18; }
.founder__q { font-size: 19px; line-height: 1.55; color: var(--fg-heading-2); font-weight: var(--fw-medium);
  letter-spacing: -.01em; margin: 12px 0 0; flex: 1; }
.founder__by { display: flex; align-items: center; gap: 13px; margin-top: 26px;
  border-top: 1px dotted var(--border-strong); padding-top: 20px; }
.founder__avatar { width: 44px; height: 44px; border-radius: 50%; flex: none; display: inline-flex; align-items: center;
  justify-content: center; background: var(--brand-blue); color: var(--brand-green-mint);
  font-weight: var(--fw-xbold); font-size: 18px; }
.founder__meta { display: flex; flex-direction: column; }
.founder__name { font-size: 14.5px; font-weight: var(--fw-bold); color: var(--fg-heading-2); }
.founder__role { font-size: 13px; color: var(--fg-muted); margin-top: 1px; }

.protect { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.protect__item { background: var(--bg-surface); border: 1px solid var(--border-soft); border-radius: var(--radius-card-xl);
  box-shadow: var(--shadow-property); padding: 22px 22px 24px; display: flex; flex-direction: column; gap: 12px;
  transition: transform .3s, box-shadow .3s; }
.protect__item:hover { transform: translateY(-4px); box-shadow: var(--shadow-property-hover); }
.protect__ic { width: 40px; height: 40px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--info-bg); color: var(--brand-blue); flex: none; }
.protect__body { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.protect__t { font-size: 15.5px; font-weight: var(--fw-bold); color: var(--fg-heading-2); margin: 0; line-height: 1.3; }
.protect__d { font-size: 13.5px; color: var(--fg-secondary); line-height: 1.55; margin: 0; }

.founding__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 40px; }

@media (max-width: 980px) {
  .founding { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .protect { grid-template-columns: 1fr; }
  .founder { padding: 30px 24px; }
  .founder__q { font-size: 17.5px; }
}

/* ── Tokenised replacements for former inline styles (landing-pro) ─────────
   These move per-element theming out of HTML and into tokens, so the page
   passes the design-metrics ratchet (no raw hex / inline style / !important). */
/* Hero trust line emphasis (was style="color:var(--fg-heading-2)" on <b>). */
.mhero__trust b { color: var(--fg-heading-2); }
/* Section eyebrow→title rhythm (was style="margin-top:14px" on each .s-title). */
.s-head .eyebrow + .s-title { margin-top: 14px; }
/* Calculator "Est. earnings" figure (was style="color:var(--brand-green-mint)"). */
.calc__r-mint { color: var(--brand-green-mint); }

/* ── FAQ accordion trigger (a11y): the question is now a <button>, so reset
   native button chrome back to the original .faqq__q look and add a visible
   keyboard focus ring. Layout/colour still come from components.css. */
.faqq__q { width: 100%; text-align: left; background: none; border: 0; font: inherit; cursor: pointer; }
.faqq__q:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; border-radius: 8px; }

/* ── A11y: hero search segments are real <button>s (were click-only divs) —
   reset native chrome back to the .msearch__seg look; .k/.v were divs and
   are now spans, so restore their stacked block layout. */
.msearch__seg { border: 0; background: none; font: inherit; }
.msearch__seg .k, .msearch__seg .v { display: block; }
.msearch__seg:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; }
/* Cards are tabindex=0 role=button — give keyboard users a visible ring. */
.acard:focus-visible { outline: 3px solid var(--brand-blue); outline-offset: 3px; }

/* ── Landing nav alignment: keep logo, center links/search pill, and auth
   actions in three stable zones so the middle navigation stays visually
   centered regardless of the right-side CTA width. */
.nav__in { display: grid; grid-template-columns: minmax(180px, 1fr) auto minmax(180px, 1fr); align-items: center; column-gap: 28px; }
.nav__logo { display: block; justify-self: start; }
.mnav__center { justify-self: center; align-items: center; width: max-content; max-width: 100%; }
.mnav__links { align-items: center; min-height: 46px; }
.mnav__links a { display: inline-flex; align-items: center; }
.nav__cta { justify-self: end; }
.nav .btn { display: inline-flex; align-items: center; justify-content: center; }

/* ── Skip link (WCAG 2.4.1): visually offscreen until keyboard-focused;
   colour comes from .btn--primary, only positioning lives here. */
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 10001; }
.skip-link:focus { top: 12px; }

/* ── Quick-view price: the digits carry the emphasis, not the $ sign — the
   shared `.qv__price .p span` rule was shrinking them to unit size. */
.qv__price .p .num { font-size: 30px; font-weight: 800; color: var(--brand-blue); }

/* ── Target sizes (WCAG 2.5.8, ≥24px): pad the dense link rows and the
   calculator chart toggles without shifting the layout. */
.mnav__links a { padding: 8px 0; }
.foot__col a { padding: 4px 0; margin-bottom: 4px; }
.cf-switch button { padding: 9px 12px; }

/* ── Reduced-motion: explicitly disable the decorative landing-pro animations
   for users who ask for less motion (belt-and-suspenders alongside the guards
   in components.css). Covers the value-card scenes, background shapes, the
   trust-band spark and the hero/marketplace card marquee. */
@media (prefers-reduced-motion: reduce) {
  .vf-months i,
  .vf-people img,
  .vf-chip,
  .bshape,
  .tband__spark polyline,
  .mstrip__track { animation: none; }
}

/* ── Page responsive ───────────────────────────────────────────────── */
@media (max-width: 720px) {
  .nav__in { grid-template-columns: auto 1fr auto; }
  .mnav__center { width: auto; }
  .mhero h1 { font-size: 38px; }
  .msearch { display: none; }
  /* Desktop-only line break — avoids the "that grow" orphan on mobile. */
  .br-desk { display: none; }
  .spot__body { padding: 24px; }
  .spot__cta { flex-direction: column; }
  .how-card { padding: 28px; }
  .how-video { max-height: 360px; }
}