/* ============================================================
   WeatherWindow.AI — Redesign 2 · sections.css
   Content-section components + device frames + responsive.
   ============================================================ */

/* ---------- Device frames (native iPad / MacBook bezels) ---------- */
.device { position: relative; margin-inline: auto; }
.device .device-screen { position: absolute; overflow: hidden; background: #000; }
.device .device-frame { position: relative; z-index: 2; width: 100%; height: auto; }
.device .device-screen img,
.device .device-screen video { width: 100%; height: 100%; object-fit: cover; }
/* iPad Pro 13" landscape cut-out insets (measured — matched to the ipad13 capture aspect so the frame bezel doesn't crop the screen edges) */
.device--ipad .device-screen { left: 4.133%; top: 5.130%; width: 91.733%; height: 89.739%; border-radius: 2px; }
/* MacBook Pro 16" cut-out insets (measured, matched to the mbp16 capture aspect) */
.device--macbook .device-screen { left: 9.437%; top: 10.669%; width: 81.127%; height: 78.662%; border-radius: 2px; }

/* ============================================================
   ORIGIN — editorial pull-quote
   ============================================================ */
.origin-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(2rem,5vw,5rem); align-items: start; margin-top: 3rem; }
.origin-quote {
  font-family: var(--serif); font-variation-settings: 'opsz' 110; font-weight: 380;
  color: var(--paper); font-size: clamp(1.7rem, 3vw, 2.5rem); line-height: 1.18; letter-spacing: -.012em;
}
.origin-quote .lat { color: var(--brass-bright); white-space: nowrap; }
.origin-body p { margin-bottom: 1.1rem; color: var(--body); font-size: 1.04rem; line-height: 1.72; }
.origin-body .lat { font-family: var(--mono); font-size: .92em; color: var(--brass-bright); }
.origin-sign {
  display: flex; align-items: center; gap: .8rem; margin-top: 1.8rem;
  font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brass);
}
.origin-sign::before { content: ""; width: 2rem; height: 1px; background: var(--brass-hair); }
.sec-tan .origin-quote { color: var(--tan-text); }
.sec-tan .origin-quote .lat,
.sec-tan .origin-body .lat { color: var(--brass-deep); }
.sec-tan .origin-body p { color: var(--tan-dim); }
.origin-body .lat.lat-plain,
.sec-tan .origin-body .lat.lat-plain { color: inherit; }
.sec-tan .origin-sign { color: var(--brass-deep); }

/* 22°N watermark — ported from website-improved (v1) .origin .bg-lat.
   #about needs overflow:hidden to clip the oversized outline numeral. */
#about { overflow: hidden; }
#about .bg-lat {
  position: absolute; right: -0.06em; top: 0.02em;
  font-family: var(--serif); font-weight: 400;
  font-size: clamp(9rem, 24vw, 20rem);
  line-height: 0.9; color: transparent;
  -webkit-text-stroke: 1px var(--tan-rule);
  opacity: 0.5;
  pointer-events: none; user-select: none;
}

/* ============================================================
   PROBLEM — before / after
   Same-size cards (not asymmetric), but "before" is visually de-weighted
   — fainter border, no fill, muted text — so it reads as the lesser,
   receding option next to the clean bordered/tinted "after" card. A
   brass arrow connects the two, reinforcing "many things become one."
   ============================================================ */
.cmp-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 1.4rem; align-items: center; margin-top: 3rem; }
.cmp-card {
  position: relative; border-radius: var(--r-lg); padding: 1.9rem;
  background: var(--panel); border: 1px solid var(--line-2);
}
/* ---- Before: fainter border, no fill, muted text — visually lesser ---- */
.cmp-card.before { background: transparent; border-color: var(--line); }
.cmp-card.before .cmp-tag { opacity: .75; }
.cmp-card.before h3 { color: var(--dim); }
.cmp-card.before .cmp-list li { color: var(--mute); }
/* ---- After: the one clean, bordered, brass-tinted card ---- */
.cmp-card.after { border-color: var(--brass-hair); background: linear-gradient(180deg, var(--brass-wash), var(--panel)); }
.cmp-card.after .cmp-tag { color: var(--brass); }
.cmp-tag {
  display: inline-block; font-family: var(--mono); font-size: 0.72rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--mute); margin-bottom: 1rem;
}
.cmp-card h3 { font-family: var(--serif); font-variation-settings: 'opsz' 50; font-weight: 440; font-size: 1.45rem; line-height: 1.2; margin-bottom: 1.3rem; }
.cmp-card h3 .warn { color: var(--dim); }
.cmp-card h3 .good { color: var(--go); }
.cmp-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.cmp-list li { position: relative; padding-left: 1.7rem; font-size: .95rem; line-height: 1.5; color: var(--dim); }
.cmp-list li::before {
  position: absolute; left: 0; top: .05em; font-family: var(--mono); font-size: .85em;
}
.cmp-card.before .cmp-list li::before { content: "\00d7"; color: var(--nogo); opacity: .6; }
.cmp-card.after .cmp-list li { color: var(--body); }
.cmp-card.after .cmp-list li::before { content: "\2713"; color: var(--go); }
/* ---- Connector: the clutter resolving into one answer ----
   Glyph swaps via ::before content (not transform) so it never collides
   with .reveal's own scroll-in transform at the responsive breakpoint. */
.cmp-arrow { justify-self: center; font-family: var(--serif); font-size: 1.7rem; color: var(--brass); line-height: 1; }
.cmp-arrow::before { content: "\2192"; }
/* ---- Light canvas: #problem became tan on 2026-08-07 when #about (ORIGIN)
   moved down the page and every canvas between the two slots inverted. Same
   hierarchy as the dark treatment — the "before" card stays fill-less and
   muted, the "after" card keeps the brass border and the one tinted fill. ---- */
.sec-tan .cmp-card { background: var(--tan-2); border-color: var(--tan-border); }
.sec-tan .cmp-card h3 { color: var(--tan-text); }
.sec-tan .cmp-card h3 .warn { color: var(--tan-dim); }
.sec-tan .cmp-card h3 .good { color: var(--go-deep); }
.sec-tan .cmp-tag { color: var(--tan-dim); }
.sec-tan .cmp-list li { color: var(--tan-dim); }
.sec-tan .cmp-card.before { background: transparent; border-color: var(--tan-border); }
.sec-tan .cmp-card.before h3 { color: var(--tan-dim); }
.sec-tan .cmp-card.before .cmp-list li { color: var(--tan-dim); }
.sec-tan .cmp-card.before .cmp-list li::before { color: var(--nogo-deep); }
.sec-tan .cmp-card.after { border-color: var(--brass-deep); background: var(--tan); }
.sec-tan .cmp-card.after .cmp-tag { color: var(--brass-deep); }
.sec-tan .cmp-card.after .cmp-list li { color: var(--tan-text); }
.sec-tan .cmp-card.after .cmp-list li::before { color: var(--go-deep); }
.sec-tan .cmp-arrow { color: var(--brass-deep); }

/* ============================================================
   ENGINE — the differentiator (editorial spread)
   ============================================================ */
.engine-head { max-width: 26ch; }
.engine-head .where-are { color: var(--brass-bright); }
.engine-head .where-be { color: var(--go); }
.engine-lead { margin-top: 2rem; display: grid; grid-template-columns: 1fr; gap: 1.1rem; max-width: 68ch; margin-inline: auto; text-align: center; }
.engine-lead p { color: var(--body); font-size: 1.05rem; line-height: 1.75; }
.engine-lead p + p { margin-top: 1.1rem; }
/* Engine statement — no card; renders in the same heading + prose rhythm as the
   section head above it. */
.engine-statement { margin-top: clamp(2.5rem, 5vw, 4rem); text-align: center; }
.engine-statement .big {
  font-family: var(--serif); font-variation-settings: 'opsz' 120; font-weight: 380;
  color: var(--paper); font-size: clamp(1.9rem, 3.6vw, 3rem); line-height: 1.08; letter-spacing: -.015em;
  max-width: 24ch; margin-bottom: 1.5rem; margin-inline: auto;
}
.engine-statement .big em { color: var(--brass-bright); font-style: normal; }
.engine-statement .big em.big-you { color: var(--go); }
.engine-statement .why { max-width: 68ch; margin-inline: auto; }
.engine-statement .why p { color: var(--body); font-size: 1.05rem; line-height: 1.75; }
.engine-statement .why p + p { margin-top: 1.1rem; }
.sec-tan .engine-head .where-are { color: var(--brass-deep); }
.sec-tan .engine-head .where-be { color: var(--go-deep); }
.sec-tan .engine-lead p { color: var(--tan-dim); }
.sec-tan .engine-statement .big { color: var(--tan-text); }
.sec-tan .engine-statement .big em { color: var(--brass-deep); }
.sec-tan .engine-statement .big em.big-you { color: var(--go-deep); }
.sec-tan .engine-statement .why p { color: var(--tan-dim); }

/* ============================================================
   ENSEMBLE — the confidence pillar (#ensemble, shares the
   engine tan band: "where you'll be" / "how sure we are")
   ============================================================ */
.ensemble-lead { margin-top: 2rem; max-width: 68ch; margin-inline: auto; text-align: center; }
.ensemble-lead p { color: var(--body); font-size: 1.05rem; line-height: 1.75; }
.sec-tan .ensemble-lead p { color: var(--tan-dim); }
.ensemble-proof { margin: clamp(2rem, 4vw, 3rem) auto 0; max-width: 920px; }
.ensemble-proof img { display: block; width: 100%; height: auto; border: 1px solid var(--tan-border); border-radius: var(--r-lg); }
.ensemble-cap {
  margin-top: .9rem; text-align: center;
  font-family: var(--mono); font-size: .72rem; letter-spacing: .05em;
  color: var(--tan-dim); font-variant-numeric: tabular-nums;
}
.ensemble-tier-note { margin-top: 1.8rem; text-align: center; font-family: var(--mono); font-size: .72rem; letter-spacing: .05em; color: var(--tan-dim); }
.ensemble-tier-note a { color: var(--brass-deep); }

/* ============================================================
   STEPS — how it works
   ============================================================ */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 3rem; }
.step { display: flex; flex-direction: column; }
.step-num { font-family: var(--mono); font-size: 0.72rem; letter-spacing: .18em; color: var(--brass); margin-bottom: .9rem; }
.step h4 { font-family: var(--serif); font-variation-settings: 'opsz' 40; font-weight: 460; font-size: 1.3rem; margin-bottom: .7rem; }
.step p { color: var(--dim); font-size: .96rem; line-height: 1.6; margin-bottom: 1.5rem; }
.step-media { position: relative; cursor: zoom-in; border: none; background: none; padding: 0; width: 100%; margin-top: auto; }
.step-media .zoom-badge,
.showcase-item .zoom-badge,
.demo-card .zoom-badge {
  position: absolute; z-index: 4; top: 8%; right: 7%; width: 30px; height: 30px;
  display: grid; place-items: center; border-radius: 50%;
  background: rgba(6,18,31,.7); border: 1px solid var(--brass-hair); color: var(--brass-bright);
  opacity: 0; transition: opacity .2s;
}
.step-media:hover .zoom-badge,
.showcase-item:hover .zoom-badge,
.demo-card:hover .zoom-badge,
.demo-card:focus-visible .zoom-badge { opacity: 1; background: var(--brass); border-color: var(--brass); color: var(--on-brass); }
.zoom-badge svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
/* Device thumbnails lift + zoom slightly on hover (matches the original site). */
.step-media .device,
.showcase-item .device { transition: transform .18s ease; }
.step-media:hover .device,
.step-media:focus-visible .device,
.showcase-item:hover .device,
.showcase-item:focus-visible .device { transform: translateY(-4px) scale(1.02); }

/* ============================================================
   SHOWCASE — cinematic device duo
   ============================================================ */
.showcase-stage {
  display: grid; grid-template-columns: 1.4fr 1fr; gap: clamp(1rem,3vw,2.5rem); align-items: center; margin-top: 3rem;
}
.showcase-item { position: relative; cursor: zoom-in; border: none; background: none; padding: 0; }
.showcase-item .cap { margin-top: 1rem; font-family: var(--mono); font-size: 0.72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); text-align: center; }
.sec-tan .showcase-item .cap { color: var(--tan-dim); }

/* ============================================================
   FEATURES
   ============================================================ */
.feat-lead { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; margin-top: 3rem; }
.feat-card {
  border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--panel);
  padding: 1.7rem; display: flex; flex-direction: column; transition: border-color .25s, transform .25s;
}
.feat-card:hover { border-color: var(--brass-hair); transform: translateY(-3px); }
/* Full-width fifth lead card (Ensemble Forecasts) — copy left, device right */
.feat-card--wide { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1.15fr; gap: 1.8rem; align-items: center; }
.feat-card--wide .device { margin-top: 0; }
.feat-card--wide .feat-card-copy p { margin-bottom: 0; }
.feat-card h4 { font-family: var(--serif); font-variation-settings: 'opsz' 40; font-weight: 460; font-size: 1.25rem; margin-bottom: .6rem; }
.feat-card p { color: var(--dim); font-size: .95rem; line-height: 1.6; margin-bottom: 1.4rem; }
.feat-card .device { margin-top: auto; }

.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.4rem; }
.feat {
  border-radius: var(--r); border: 1px solid var(--line); background: rgba(255,255,255,.014);
  padding: 1.5rem; transition: border-color .25s, background .25s;
}
.feat:hover { border-color: var(--line-2); background: rgba(255,255,255,.03); }
.feat-ico { color: var(--brass); margin-bottom: 1rem; }
.feat-ico svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.feat h4 { font-size: 1.05rem; font-weight: 600; color: var(--paper); margin-bottom: .5rem; }
.feat p { color: var(--dim); font-size: .9rem; line-height: 1.55; }

/* ============================================================
   SAMPLES — verdict system
   ============================================================ */
.verdict-scale { display: grid; grid-template-columns: repeat(5, 1fr); gap: .7rem; margin-top: 2.6rem; }
.vchip {
  text-align: left; cursor: pointer; border-radius: var(--r-xs); padding: 1rem .9rem;
  background: var(--panel); border: 1px solid var(--line-2); color: var(--body);
  transition: border-color .2s, background .2s, transform .2s; font-family: inherit;
}
.vchip:hover { transform: translateY(-2px); }
.vchip.go:hover       { border-color: var(--go-line);       box-shadow: 0 0 24px var(--go-line); }
.vchip.caution:hover  { border-color: var(--caution-line);  box-shadow: 0 0 24px var(--caution-line); }
.vchip.marginal:hover { border-color: var(--marginal-line); box-shadow: 0 0 24px var(--marginal-line); }
.vchip.nogo:hover     { border-color: var(--nogo-line);     box-shadow: 0 0 24px var(--nogo-line); }
.vchip.divert:hover   { border-color: var(--divert-line);   box-shadow: 0 0 24px var(--divert-line); }
.vchip .vchip-head { display: flex; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.vchip .glyph { font-size: 1rem; }
.vchip .word { font-family: var(--mono); font-weight: 600; font-size: .8rem; letter-spacing: .08em; }
.vchip .blurb { font-size: .78rem; line-height: 1.4; color: var(--mute); }
.vchip.go      { border-color: var(--line-2); } .vchip.go .glyph, .vchip.go .word { color: var(--go); }
.vchip.caution .glyph, .vchip.caution .word { color: var(--caution); }
.vchip.marginal .glyph, .vchip.marginal .word { color: var(--marginal); }
.vchip.nogo .glyph, .vchip.nogo .word { color: var(--nogo); }
.vchip.divert .glyph, .vchip.divert .word { color: var(--divert); }
.vchip.is-selected { background: var(--panel-2); }
.vchip.go.is-selected      { border-color: var(--go-line);      box-shadow: 0 0 0 1px var(--go-line); }
.vchip.caution.is-selected { border-color: var(--caution-line); box-shadow: 0 0 0 1px var(--caution-line); }
.vchip.marginal.is-selected{ border-color: var(--marginal-line);box-shadow: 0 0 0 1px var(--marginal-line); }
.vchip.nogo.is-selected    { border-color: var(--nogo-line);    box-shadow: 0 0 0 1px var(--nogo-line); }
.vchip.divert.is-selected  { border-color: var(--divert-line);  box-shadow: 0 0 0 1px var(--divert-line); }

/* Chips + card sit inside a .sec-tan (light) section — swap the dark --panel
   surface for a tan card surface so the component doesn't read as a dark
   island floating on the light canvas, and deepen the verdict hues (they're
   tuned to pop on dark, not on cream) so glyph/word text stays legible. */
.sec-tan .vchip { background: var(--tan-2); border-color: var(--tan-border); color: var(--tan-dim); }
.sec-tan .vchip.is-selected { background: var(--tan); }
.sec-tan .vchip .blurb { color: var(--tan-dim); }
.sec-tan .vchip.go        { border-color: var(--tan-border); }
.sec-tan .vchip.go .glyph, .sec-tan .vchip.go .word             { color: var(--go-deep); }
.sec-tan .vchip.caution .glyph, .sec-tan .vchip.caution .word   { color: var(--caution-deep); }
.sec-tan .vchip.marginal .glyph, .sec-tan .vchip.marginal .word { color: var(--marginal-deep); }
.sec-tan .vchip.nogo .glyph, .sec-tan .vchip.nogo .word         { color: var(--nogo-deep); }
.sec-tan .vchip.divert .glyph, .sec-tan .vchip.divert .word     { color: var(--divert-deep); }

.sample-detail { margin-top: 1.4rem; }
.vcard {
  display: grid; grid-template-columns: auto 1fr; gap: 1.6rem;
  border-radius: var(--r); border: 1px solid var(--line-2); padding: 1.8rem; background: var(--panel);
  overflow: hidden; transition: opacity .35s ease;
}
.vcard.is-swapping { opacity: 0; }
/* Verdict panel — a solid verdict-colored fill (not an outlined box), bled
   flush to the card's own left/top/bottom edges by canceling .vcard's own
   padding on this side, then re-padded internally. .vcard's overflow:hidden
   clips this flush panel to the card's own (smaller) rounded corner. */
.vcard .vbadge-lg {
  align-self: stretch; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
  margin: -1.8rem 0 -1.8rem -1.8rem; padding: 1.8rem 1.6rem; min-width: 140px;
  color: var(--ink);
}
.vcard .vbadge-lg.v-go       { background: var(--go); }
.vcard .vbadge-lg.v-caution  { background: var(--caution); }
.vcard .vbadge-lg.v-marginal { background: var(--marginal); }
.vcard .vbadge-lg.v-nogo     { background: var(--nogo); }
.vcard .vbadge-lg.v-divert   { background: var(--divert); }
.vcard .vbadge-lg .glyph { font-size: 2.1rem; line-height: 1; }
.vcard .vbadge-lg .word { font-family: var(--mono); font-weight: 700; font-size: .84rem; letter-spacing: .1em; }
.vcard-body h4 { font-family: var(--serif); font-variation-settings: 'opsz' 40; font-weight: 460; font-size: 1.35rem; line-height: 1.25; margin-bottom: .6rem; }
.vcard-body .reason { color: var(--dim); font-size: .98rem; line-height: 1.6; margin-bottom: 1.3rem; }
.vmetrics { display: flex; flex-wrap: wrap; gap: 1.6rem; border-top: 1px solid var(--line); padding-top: 1.1rem; }
.vmetric .lbl { display: block; font-family: var(--mono); font-size: 0.72rem; letter-spacing: .13em; text-transform: uppercase; color: var(--mute); margin-bottom: .35rem; }
.vmetric .val { font-family: var(--mono); font-weight: 600; font-size: .95rem; color: var(--paper); font-variant-numeric: tabular-nums; }
/* Apparent wind/wave, comfort, squall & lightning — the app's real coloured
   risk pills (mirrors App/css/styles.css .awa-ps / .comfort-badge /
   .squall-pill / .lightning-pill; tokens only). Tier/band classes are
   derived from the raw score in site.js with the app's own thresholds. */
.vmetric .awa-ps,
.vmetric .comfort-badge,
.vmetric .squall-pill,
.vmetric .lightning-pill {
  display: inline-block; font-family: var(--mono); font-weight: 700;
  font-size: .78rem; padding: 2px 7px; border-radius: var(--r-xs);
  border: 1px solid transparent; white-space: nowrap; vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
.vmetric .awa-p { background: var(--nogo-bg); color: var(--nogo); border-color: var(--nogo-line); }
.vmetric .awa-s { background: var(--go-bg); color: var(--go); border-color: var(--go-line); }
.vmetric .comfort-badge.comfort-calm,
.vmetric .comfort-badge.comfort-mild { background: var(--go-bg); color: var(--go); border-color: var(--go-line); }
.vmetric .comfort-badge.comfort-moderate { background: var(--caution-bg); color: var(--caution); border-color: var(--caution-line); }
.vmetric .comfort-badge.comfort-rough,
.vmetric .comfort-badge.comfort-severe { background: var(--nogo-bg); color: var(--nogo); border-color: var(--nogo-line); }
.vmetric .squall-pill.squall-low,
.vmetric .lightning-pill.lightning-negligible { background: var(--go-bg); color: var(--go); border-color: var(--go-line); }
.vmetric .squall-pill.squall-moderate,
.vmetric .lightning-pill.lightning-isolated,
.vmetric .lightning-pill.lightning-scattered { background: var(--caution-bg); color: var(--caution); border-color: var(--caution-line); }
.vmetric .squall-pill.squall-high,
.vmetric .lightning-pill.lightning-likely { background: var(--nogo-bg); color: var(--nogo); border-color: var(--nogo-line); }
.vmetric .squall-pill.squall-severe,
.vmetric .lightning-pill.lightning-severe { background: var(--nogo); color: var(--paper); border-color: var(--nogo); }
.sec-tan .vcard { background: var(--tan-2); border-color: var(--tan-border); }
.sec-tan .vcard-body h4 { color: var(--tan-text); }
.sec-tan .vcard-body .reason { color: var(--tan-dim); }
.sec-tan .vmetrics { border-top-color: var(--tan-border); }
.sec-tan .vmetric .lbl { color: var(--tan-dim); }
.sec-tan .vmetric .val { color: var(--tan-text); }
/* Deepened text variants for legibility on the tan (cream) canvas — same
   convention as .sec-tan .vchip's go-deep/caution-deep/etc swaps above. */
.sec-tan .vmetric .awa-p,
.sec-tan .vmetric .comfort-badge.comfort-rough,
.sec-tan .vmetric .comfort-badge.comfort-severe,
.sec-tan .vmetric .squall-pill.squall-high,
.sec-tan .vmetric .lightning-pill.lightning-likely { color: var(--nogo-deep); }
.sec-tan .vmetric .awa-s,
.sec-tan .vmetric .comfort-badge.comfort-calm,
.sec-tan .vmetric .comfort-badge.comfort-mild,
.sec-tan .vmetric .squall-pill.squall-low,
.sec-tan .vmetric .lightning-pill.lightning-negligible { color: var(--go-deep); }
.sec-tan .vmetric .comfort-badge.comfort-moderate,
.sec-tan .vmetric .squall-pill.squall-moderate,
.sec-tan .vmetric .lightning-pill.lightning-isolated,
.sec-tan .vmetric .lightning-pill.lightning-scattered { color: var(--caution-deep); }
.sample-dots { display: flex; gap: .5rem; justify-content: center; margin-top: 1.6rem; }
.sample-dots button { width: 8px; height: 8px; border-radius: 50%; border: none; background: var(--line-3); cursor: pointer; padding: 0; transition: background .2s, transform .2s; }
.sample-dots button:hover { background: var(--dim); }
.sample-dots button.active { background: var(--brass); transform: scale(1.25); }
.sec-tan .sample-dots button { background: var(--tan-rule); }
.sec-tan .sample-dots button:hover { background: var(--tan-dim); }
.sec-tan .sample-dots button.active { background: var(--brass-deep); }
/* DESIGN_SYSTEM.md §3.1.10 — the 44px touch floor, same treatment as
   .console-dots in site.css: the painted 8px dot is left alone and a
   transparent ::after overlay carries the tap target, with the container gap
   widened so adjacent hit areas tile instead of overlapping. */
@media (pointer: coarse) {
  .sample-dots { gap: 1rem; }
  .sample-dots button { position: relative; }
  .sample-dots button::after {
    content: "";
    position: absolute;
    inset: -18px -8px;
  }
}
.samples-note { margin-top: 1.4rem; font-size: .8rem; color: var(--mute); max-width: 74ch; }
.sec-tan .samples-note { color: var(--tan-dim); }

/* Consolidated limits / NFN note — foot of #samples (sits on .sec-tan). */
.limits-note {
  margin-top: 2rem; padding: 1.1rem 1.2rem;
  border: 1px solid var(--line-2); border-radius: var(--r-lg); max-width: 88ch;
}
.limits-note__title {
  margin: 0 0 .55rem; font-family: var(--mono); font-size: .78rem;
  letter-spacing: .06em; color: var(--body);
}
.limits-note__glyph { margin-right: .5rem; }
.limits-note__body { margin: 0; font-size: .82rem; line-height: 1.6; color: var(--dim); }
.sec-tan .limits-note { border-color: var(--tan-border); }
.sec-tan .limits-note__title { color: var(--tan-text); }
.sec-tan .limits-note__body { color: var(--tan-dim); }

/* ============================================================
   RANGE — your kind of sailing
   ============================================================ */
.range-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 3rem; }
.range-card {
  border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--panel);
  padding: 1.6rem; display: flex; flex-direction: column;
}
.range-card.feat { border-color: var(--brass-hair); }
.range-tier { font-family: var(--serif); font-size: .82rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brass); margin-bottom: .9rem; }
.range-head { margin-bottom: .3rem; }
.range-route { font-family: var(--serif); font-variation-settings: 'opsz' 36; font-weight: 460; font-size: 1.18rem; }
.range-stat { display: block; font-family: var(--mono); font-size: .74rem; color: var(--mute); white-space: nowrap; margin-bottom: 1.1rem; }
.range-verdict { display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; margin-bottom: 1.3rem; }
.range-verdict .vbadge { margin-bottom: 0; }
.range-verdict .reason { font-size: .88rem; line-height: 1.5; color: var(--dim); }
/* ---- Light canvas: #range became tan on 2026-08-07 (same alternation
   repair as #problem). The verdict badges pick up their --*-deep hues from
   the .sec-tan .v-* block in site.css. ---- */
.sec-tan .range-card { background: var(--tan-2); border-color: var(--tan-border); }
.sec-tan .range-card.feat { border-color: var(--brass-deep); }
.sec-tan .range-tier { color: var(--brass-deep); }
.sec-tan .range-route { color: var(--tan-text); }
.sec-tan .range-stat { color: var(--tan-dim); }
.sec-tan .range-verdict .reason { color: var(--tan-dim); }

/* ============================================================
   REPORT SAMPLE
   ============================================================ */
.report-duo { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(1rem,3vw,2.5rem); align-items: center; margin-top: 3rem; }
.report-cta { text-align: center; margin-top: 2.5rem; }

/* ============================================================
   PRICING
   ============================================================ */
.pricing { text-align: center; }
.free-note { margin-top: 1rem; font-size: .95rem; color: var(--brass-bright); font-weight: 500; }
.interval-toggle {
  display: inline-flex; gap: .3rem; margin: 2.2rem auto 0; padding: .3rem;
  border: 1px solid var(--line-2); border-radius: var(--r-pill); background: var(--panel);
}
.interval-btn {
  display: inline-flex; align-items: center; gap: .5rem; border: none; cursor: pointer;
  padding: .55rem 1.2rem; border-radius: var(--r-pill); background: transparent; color: var(--dim);
  font-family: var(--sans); font-size: .88rem; font-weight: 600; transition: background .2s, color .2s;
}
.interval-btn:hover:not(.active) { color: var(--paper); }
.interval-btn.active { background: var(--brass); color: var(--on-brass); }
.interval-save { font-family: var(--mono); font-size: 0.72rem; letter-spacing: .04em; padding: .15rem .45rem; border-radius: var(--r-pill); background: rgba(62,192,140,.18); color: var(--go); }
.interval-btn.active .interval-save { background: rgba(26,18,6,.2); color: var(--on-brass); }

.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; margin-top: 2.6rem; text-align: left; }
.price-card {
  position: relative; border-radius: var(--r-lg); border: 1px solid var(--line-2); background: var(--panel);
  padding: 1.9rem; display: flex; flex-direction: column;
}
.price-card.feat-tier {
  border-color: var(--brass-hair);
  background: linear-gradient(180deg, var(--brass-wash), var(--panel));
  box-shadow: var(--glow-brass);
}
.ribbon {
  position: absolute; top: -.8rem; left: 1.9rem; font-family: var(--mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--on-brass);
  background: var(--brass); padding: .35rem .7rem; border-radius: var(--r-pill);
}
.tier { font-family: var(--serif); font-variation-settings: 'opsz' 40; font-weight: 500; font-size: 1.5rem; color: var(--paper); margin-bottom: .5rem; }
.tier-fit { color: var(--dim); font-size: .88rem; line-height: 1.5; margin-bottom: 1.3rem; min-height: 4.2em; }
.price { font-family: var(--mono); font-weight: 600; color: var(--paper); font-size: 2.4rem; line-height: 1; font-variant-numeric: tabular-nums; }
.price .per { font-size: .95rem; color: var(--mute); font-weight: 400; }
.price-alt { font-family: var(--mono); font-size: .72rem; color: var(--mute); margin-top: .5rem; }
.price-tag {
  display: inline-block; font-family: var(--mono); font-size: 0.72rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase; color: var(--brass);
  background: var(--brass-wash); border: 1px solid var(--brass-hair);
  border-radius: var(--r-pill); padding: .18rem .6rem; margin-top: .5rem;
}
.price-card .desc { color: var(--dim); font-size: .9rem; line-height: 1.55; margin: 1.3rem 0; }
.price-card ul { list-style: none; padding: 0; margin: 0 0 1.6rem; display: grid; gap: .6rem; }
.price-card li { position: relative; padding-left: 1.5rem; font-size: .88rem; line-height: 1.4; color: var(--body); }
.price-card li::before { content: "\2713"; position: absolute; left: 0; color: var(--brass); font-family: var(--mono); font-size: .82em; }
.price-card .cta-stack { margin-top: auto; }
.price-card .btn { width: 100%; }
.pricing-terms { margin-top: 2.4rem; font-size: .8rem; color: var(--mute); max-width: 76ch; margin-inline: auto; line-height: 1.6; }
.pricing-terms a { color: var(--dim); border-bottom: 1px solid var(--line-2); }
.pricing-terms a:hover { color: var(--brass-bright); }

/* ============================================================
   FAQ
   ============================================================ */
.faq-list { max-width: 76rem; margin: 3rem auto 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem 1.6rem; }
.faq {
  border: 1px solid var(--line-2); border-radius: var(--r); background: var(--panel);
  overflow: hidden; transition: border-color .2s; align-self: start;
}
.faq:hover { border-color: var(--brass-hair); }
.faq[open] { border-color: var(--brass-hair); }
.faq summary:hover { color: var(--brass-bright); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.15rem 1.4rem; display: flex; justify-content: space-between; gap: 1rem;
  font-weight: 600; color: var(--paper); font-size: 1rem;
  transition: color .2s ease;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; font-family: var(--mono); color: var(--brass); font-size: 1.3rem; line-height: 1; transition: transform .2s; flex: none;
}
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 1.4rem 1.3rem; color: var(--dim); font-size: .94rem; line-height: 1.65; }
.faq-more { text-align: center; margin-top: 2rem; color: var(--dim); }

/* FAQ always sits on the tan canvas — solid tan-2 fill (matches the
   .vcard/.vchip card treatment elsewhere on tan) instead of the dark-canvas
   --panel card, and instead of a fully transparent fill, which let the
   section's grid-line texture show through the card and hurt legibility. */
.sec-tan .faq { background: var(--tan-2); border-color: var(--tan-border); }
.sec-tan .faq:hover, .sec-tan .faq[open] { border-color: var(--brass-deep); }
.sec-tan .faq summary { color: var(--tan-text); }
.sec-tan .faq summary:hover { color: var(--brass-deep); }
.sec-tan .faq p { color: var(--tan-dim); }

/* ============================================================
   CLOSING CTA — cinematic full-bleed
   ============================================================ */
.closing { position: relative; overflow: hidden; text-align: center; padding-block: clamp(5rem,10vw,9rem); }
.closing-bg { position: absolute; inset: 0; z-index: 0; }
.closing-bg video, .closing-bg img { width: 100%; height: 100%; object-fit: cover; }
.closing-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(80% 90% at 50% 40%, rgba(6,18,31,.55), rgba(6,18,31,.92) 75%),
    linear-gradient(180deg, var(--ink) 0%, rgba(6,18,31,.7) 40%, var(--ink) 100%);
}
.closing-inner { position: relative; z-index: 2; }
.closing h2 {
  font-family: var(--serif); font-variation-settings: 'opsz' 144; font-weight: 380;
  color: var(--paper); font-size: clamp(2.2rem,5vw,3.8rem); line-height: 1.04; letter-spacing: -.02em;
  max-width: 20ch; margin-inline: auto;
}
.closing h2 em { color: var(--brass-bright); font-style: normal; }
.closing p { margin: 1.6rem auto 2.4rem; max-width: 54ch; color: var(--dim); font-size: 1.1rem; }
.closing .hero-actions { justify-content: center; }
.closing .microcopy { text-align: center; margin-top: 1.2rem; }

/* ============================================================
   CINEMATIC MEDIA BAND — full-bleed ambient video behind a
   text-only section (Origin, Engine). Mirrors .closing-bg:
   the loop sits under a gradient scrim so the prose stays
   legible; base (non-tan) text tokens already render light.
   ============================================================ */
.sec-cinema { position: relative; overflow: hidden; }
.cinema-bg { position: absolute; inset: 0; z-index: 0; }
.cinema-bg video, .cinema-bg img { width: 100%; height: 100%; object-fit: cover; }
.cinema-bg::after {
  content: ""; position: absolute; inset: 0;
  /* Lighter than the CTA scrim: the footage must read as colour + depth, not a
     flat dark panel. ~.40 through the middle keeps the sea/boat/dawn visible;
     top and bottom darken for the headings and to blend into adjacent sections. */
  background:
    linear-gradient(180deg, rgba(6,18,31,.54) 0%, rgba(6,18,31,.28) 30%, rgba(6,18,31,.28) 66%, rgba(6,18,31,.64) 100%),
    radial-gradient(120% 110% at 50% 42%, rgba(6,18,31,.04), rgba(6,18,31,.40) 92%);
}
.sec-cinema > .wrap { position: relative; z-index: 2; }
/* the 22°N watermark reads as a faint light outline on the dark band */
.sec-cinema .bg-lat { z-index: 1; -webkit-text-stroke-color: var(--brass-hair); opacity: .32; }
/* Engine's open-sea clip runs brighter than Origin's dawn — a touch more scrim
   settles it and holds the centred prose. Origin keeps the lighter default. */
#engine .cinema-bg::after {
  background:
    linear-gradient(180deg, rgba(6,18,31,.62) 0%, rgba(6,18,31,.40) 30%, rgba(6,18,31,.40) 66%, rgba(6,18,31,.72) 100%),
    radial-gradient(120% 110% at 50% 42%, rgba(6,18,31,.12), rgba(6,18,31,.48) 92%);
}
/* Trust band is the densest (model pills + a legally AA-gated non-endorsement
   line), so it runs a touch darker still — the bottom is weighted to protect
   the small disclaimer's contrast. */
.trust.sec-cinema .cinema-bg::after {
  background:
    linear-gradient(180deg, rgba(6,18,31,.66) 0%, rgba(6,18,31,.46) 28%, rgba(6,18,31,.52) 66%, rgba(6,18,31,.82) 100%),
    radial-gradient(120% 110% at 50% 42%, rgba(6,18,31,.14), rgba(6,18,31,.56) 92%);
}
/* model pills read as dark chips over the footage (50% transparent) */
.trust.sec-cinema .logo { background: rgba(6,18,31,.5); border-color: var(--line); }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  border-top: 1px solid var(--line); margin-top: 2rem;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 2rem;
  padding-block: clamp(3rem,5vw,4rem);
}
.site-footer .brand img { height: 68px; margin-bottom: 1rem; }
.foot-tagline { color: var(--mute); font-size: .9rem; line-height: 1.6; max-width: 32ch; }
.foot-col h5 { font-family: var(--mono); font-size: 0.72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--brass); margin-bottom: 1rem; font-weight: 600; }
.foot-col a { display: block; color: var(--dim); font-size: .9rem; padding: .3rem 0; transition: color .2s; }
.foot-col a:hover { color: var(--paper); }
.fineprint {
  border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  padding-block: 1.6rem; font-family: var(--sans); font-size: .72rem; color: var(--mute); letter-spacing: .04em;
}
.nfn-strip {
  text-align: center; padding: .8rem 1rem; border: 1px solid var(--nogo-line); border-radius: var(--r);
  background: var(--nogo-bg); color: var(--body); font-family: var(--mono); font-size: .72rem; letter-spacing: .08em;
  max-width: 60rem; margin: 0 auto 2rem;
}
.nfn-strip strong { color: var(--nogo); letter-spacing: .1em; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox { position: fixed; inset: 0; z-index: 100; display: none; place-items: center; padding: clamp(1rem, 4vw, 3rem); }
.lightbox[open], .lightbox.is-open { display: grid; }
.lightbox-backdrop { position: absolute; inset: 0; background: rgba(2,8,16,.82); backdrop-filter: blur(6px); }
.lightbox-panel {
  position: relative; z-index: 2; display: flex; flex-direction: column; gap: 1rem;
  width: min(92vw, 1060px); max-height: 92vh; padding: clamp(1rem, 2.4vw, 1.6rem);
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--shadow-lg), var(--inset-hi); overflow: hidden;
}
.lightbox-bar { display: flex; align-items: center; gap: 1rem; flex: 0 0 auto; }
.lightbox-title {
  flex: 1 1 auto; min-width: 0; color: var(--paper);
  font-family: var(--serif); font-variation-settings: 'opsz' 40; font-weight: 500;
  font-size: 1.05rem; line-height: 1.2;
}
.lightbox-close {
  flex: 0 0 auto; background: rgba(6,18,31,.5); border: 1px solid var(--line-2);
  border-radius: 50%; width: 40px; height: 40px; color: var(--dim); cursor: pointer;
  display: grid; place-items: center; transition: border-color .2s, background .2s, color .2s;
}
.lightbox-close:hover { border-color: var(--brass-hair); background: var(--brass-wash); color: var(--brass-bright); }
.lightbox-close svg { width: 16px; height: 16px; }
.lightbox-stage { flex: 1 1 auto; min-height: 0; display: flex; align-items: center; justify-content: center; }
.lightbox-stage .device { width: auto; max-width: 100%; margin: 0; }
.lightbox-stage .device .device-frame { width: auto; height: auto; max-width: 100%; max-height: calc(90vh - 150px); }
.lightbox-duo { gap: 1.4rem; flex-wrap: wrap; }
.lightbox-panel:has(.lightbox-duo) { width: min(96vw, 1280px); }
.lightbox-duo .device { flex: 1 1 0; min-width: min(100%, 380px); }
.lightbox-duo .device .device-frame { width: 100%; max-height: calc(84vh - 150px); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
/* Nav collapses to the hamburger at 1240px, not 900px: adding the 8th link
   ("The Ensemble", 2026-07-10) pushed the desktop row's min-content width to
   ~1279px — past the site-wide --wrap: 1200px cap, so the row could not fit
   inside its container at ANY viewport width and `.nav-cta` spilled 40px past
   a 1280px viewport (page-wide horizontal scrollbar, scrollWidth 1320). With
   the 80px brand pinned to the original site's size, gaps + link typography
   were tightened in site.css (min-content 1279px -> 1186px, measured live);
   the tightened row first fits inside the wrap at a 1226px viewport (page-fit
   at 1206px). 1240px covers the whole 901-1225px no-fit zone with margin past
   the 1226px fit point rather than another knife's-edge fit. (Supersedes the
   7-link measurements from 2026-07-08: >=840px fit, 900px breakpoint.) */
@media (max-width: 1240px) {
  .nav-inner { gap: .9rem; }
  .brand { flex-shrink: 0; }
  .brand img { height: 32px; }
  .site-nav nav[aria-label="Primary"] { display: contents; }
  .nav-links, .nav-signin { display: none; }
  /* Desktop right-aligns the CTA via .nav-links { margin-inline: auto }, which
     is display:none here — the CTA needs its own auto margin or it packs left
     beside the brand (masked at phone widths, glaring at tablet/1240px). */
  .nav-cta { gap: .5rem; margin-left: auto; }
  .nav-cta .btn-primary { --_pad: .55rem .85rem; }
  .nav-toggle { display: inline-flex; flex-shrink: 0; }
  .site-nav.nav-open .nav-links {
    display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0;
    background: var(--ink-2); border-bottom: 1px solid var(--line); padding: .5rem 1.25rem 1rem;
  }
  .site-nav.nav-open .nav-links a { padding: .85rem 0; border-bottom: 1px solid var(--line); }
}
@media (max-width: 1000px) {
  .hero-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .console { max-width: 480px; }
  .istrip-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .engine-lead, .engine-statement, .origin-grid, .report-duo, .showcase-stage { grid-template-columns: 1fr; }
  .feat-grid, .steps, .range-grid, .price-grid, .feat-lead, .cmp-grid, .faq-list { grid-template-columns: 1fr; }
  .feat-card--wide { grid-template-columns: 1fr; }
  .cmp-arrow::before { content: "\2193"; }
  .cmp-arrow { margin-block: -.3rem; }
  .verdict-scale { grid-template-columns: repeat(2, 1fr); }
  .site-footer { grid-template-columns: 1fr 1fr; }
}
/* Instrument strip: the 7-column layout sizes its tracks to content (the
   readouts are nowrap and unequal in length), so it needs ~1180px. Between
   the 1000px breakpoint above and that fit point it drove the PAGE into
   horizontal scroll — 157px of overflow at 1024px, i.e. every tablet in
   landscape. Bounded on BOTH sides so it cannot disturb the <=1000px (3-col)
   or <=720px (2-col) blocks wherever it sits in the file. */
@media (min-width: 1001px) and (max-width: 1300px) {
  .istrip-inner { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .verdict-scale { grid-template-columns: 1fr; }
  .vcard { grid-template-columns: 1fr; }
  /* Stacked layout: the verdict fill becomes a full-width bar across the top
     of the card instead of a left rail. */
  .vcard .vbadge-lg { margin: -1.8rem -1.8rem 0 -1.8rem; padding: 1.4rem 1.6rem; min-width: 0; }
  /* minmax(0,1fr): a plain 1fr track can't shrink below the min-content of
     the nowrap .v values, which pushed the strip past a 375px viewport
     (page-wide horizontal scroll). Tracks shrink + values wrap on phones. */
  .istrip-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .istrip-item .v { white-space: normal; }
  .site-footer { grid-template-columns: 1fr; }
  .lightbox-duo { grid-template-columns: 1fr; }
  .vmetrics { gap: 1rem; }
}
/* Narrow-phone nav squeeze: at a 320px viewport the mobile nav row's
   min-content (~300px: 32px brand at its natural 4.51:1 aspect = 144px +
   .9rem gap + Start free + hamburger) exceeds the 280px wrap, eats the whole
   20px right margin, and ends 0.58px past the viewport (page scrollWidth
   321). 26px brand + .6rem gap bring the CTA's right edge to 288.7px at 320
   (measured live 2026-07-10) — real margin, same convention as the
   nav-collapse fit points above. */
/* Re-measured 2026-07-30 (/device-optimization). The 360px ceiling above no
   longer holds: the nav CTA label grew ("Get early access"), taking .nav-cta
   to 190px, so the 32px-brand row now measures 348px against a 335px
   container at 375px and 317px against 280px at 320px. Widening this step to
   430px puts every phone in portrait on the 26px brand, and the 360px step
   below trims the CTA's padding for the narrowest handsets. */
@media (max-width: 430px) {
  .brand img { height: 26px; }
  .nav-inner { gap: .6rem; }
}
@media (max-width: 360px) {
  .nav-cta { gap: .4rem; }
  .nav-cta .btn-primary { --_pad: .5rem .6rem; font-size: .82rem; }
}