/* US City List storefront stylesheet — ported from the approved design.
   Self-contained (tokens + base + components): it is the single stylesheet for
   every page on this host, linked by _StorefrontLayout. Tokens mirror the
   us-city-list brand. */

/* ─────────────────────────────────────────────────────────────────
   Pebble & Silver — Design Tokens
   Drop this :root block into your global stylesheet.
   Reference tokens via var(--token-name). Never hardcode values.
   ───────────────────────────────────────────────────────────────── */

:root {
  /* ── Color · Brand ───────────────────────────────────────────── */
  --color-green:        #336633;  /* Pebble Green — primary brand */
  --color-green-deep:   #1f4220;  /* Deep Moss — body text on green (AAA) */
  --color-green-soft:   #5a8a5a;  /* Sage — secondary accent, muted */
  --color-ochre:        #b8732a;  /* Field Ochre — display only, fails AA at body */
  --color-rust:         #9a4a2a;  /* Iron Rust — editorial accent, "don't" indicators */

  /* ── Color · Neutrals ────────────────────────────────────────── */
  --color-ink:          #1a1d1a;  /* primary text */
  --color-stone:        #6b6e68;  /* secondary text, captions */
  --color-bone:         #ffffff;  /* primary surface (white) */
  --color-paper:        #fafafa;  /* card surface */
  --color-mist:         #f5f6f5;  /* tinted surface — marketing banding only */

  /* ── Color · Signal palette (semantic, never decorative) ─────── */
  --signal-error:        #b03030;  /* validation, destructive, system errors */
  --signal-error-tint:   #fbeceb;
  --signal-warning:      #c89a2a;  /* preliminary data, advisory */
  --signal-warning-tint: #faf2dc;
  --signal-link:         #3a5a78;  /* inline links, info banners, "Updated" tag */
  --signal-link-tint:    #eaf0f5;
  --signal-success:      #2d6a3a;  /* confirmation, save success */
  --signal-success-tint: #e6efe4;

  /* ── Spacing (4px base) ──────────────────────────────────────── */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  24px;
  --space-6:  32px;
  --space-7:  48px;
  --space-8:  64px;
  --space-9:  96px;
  --space-10: 128px;

  /* ── Radius — sharp corners, every surface ───────────────────── */
  --radius: 0;

  /* ── Borders ─────────────────────────────────────────────────── */
  --border-hairline: 1px solid rgba(26,29,26,0.10);
  --border-default:  1px solid rgba(26,29,26,0.18);
  --border-emphasis: 1.5px solid var(--color-ink);
  --border-brand:    2px solid var(--color-green);

  /* ── Shadows (use sparingly — borders are preferred) ─────────── */
  --shadow-1: 0 1px 2px rgba(26,29,26,.06), 0 1px 1px rgba(26,29,26,.04);
  --shadow-2: 0 4px 12px rgba(26,29,26,.08), 0 2px 4px rgba(26,29,26,.04);
  --shadow-3: 0 12px 32px rgba(26,29,26,.12), 0 4px 12px rgba(26,29,26,.06);

  /* ── Breakpoints (consume via media queries) ─────────────────── */
  --bp-sm:  480px;
  --bp-md:  768px;
  --bp-lg:  1024px;
  --bp-xl:  1280px;
  --bp-2xl: 1600px;

  /* ── Containers ──────────────────────────────────────────────── */
  --container-text: 680px;   /* long-form reading width */
  --container:      1280px;  /* default page max */
  --container-wide: 1600px;  /* hero / data-viz / map */

  /* ── Motion ──────────────────────────────────────────────────── */
  --duration-instant: 50ms;
  --duration-fast:    150ms;
  --duration-base:    240ms;
  --duration-slow:    400ms;
  --ease-standard:    cubic-bezier(0.2, 0, 0, 1);
  --ease-emphasized:  cubic-bezier(0.3, 0, 0, 1);
  --ease-exit:        cubic-bezier(0.4, 0, 1, 1);

  /* ── Z-index scale ───────────────────────────────────────────── */
  --z-sticky:   100;
  --z-dropdown: 1000;
  --z-overlay:  1100;
  --z-modal:    1200;
  --z-toast:    1300;

  /* ── Type families ───────────────────────────────────────────── */
  --font-serif: "Crimson Pro", Georgia, serif;
  --font-body:  "Rethink Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:  "IBM Plex Mono", "SF Mono", Consolas, monospace;

  /* ── Type scale (rem, base = 16px) ───────────────────────────── */
  --text-mono-xs:   0.625rem;  /* 10px — eyebrow, kicker */
  --text-mono-sm:   0.6875rem; /* 11px — UI labels */
  --text-body-xs:   0.75rem;   /* 12px — caption */
  --text-body-sm:   0.8125rem; /* 13px — secondary */
  --text-body:      1rem;      /* 16px — body */
  --text-body-lg:   1.125rem;  /* 18px — lead */
  --text-display-1: 1.5rem;    /* 24px */
  --text-display-2: 2rem;      /* 32px */
  --text-display-3: 2.75rem;   /* 44px */
  --text-display-4: 4rem;      /* 64px — hero */

  /* ── Type weights ────────────────────────────────────────────── */
  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;

  /* ── Letter-spacing ──────────────────────────────────────────── */
  --tracking-tight:  -0.025em;  /* large display serif */
  --tracking-snug:   -0.01em;   /* mid serif, body */
  --tracking-normal: 0;
  --tracking-wide:   0.18em;    /* small mono UI labels */
  --tracking-wider:  0.32em;    /* eyebrow / kicker */
}

/* Honor user motion preferences */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 1ms;
    --duration-fast:    1ms;
    --duration-base:    1ms;
    --duration-slow:    1ms;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   US City List — site styles (Pebble & Silver sub-brand)
   Tokens come from assets/tokens.css; this file is components only.
   ═══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.6;
  color: var(--color-ink);
  background: var(--color-bone);
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--signal-link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
img, svg { max-width: 100%; }
h1, h2, h3, h4, p { margin: 0; }
:focus-visible { outline: 2px solid var(--color-ochre); outline-offset: 2px; }

.skip { position: absolute; left: -9999px; top: 0; background: var(--color-ink); color: var(--color-bone); padding: 10px 16px; z-index: var(--z-toast); }
.skip:focus { left: 8px; top: 8px; }

/* ── Type helpers ───────────────────────────────────────────── */
.eyebrow { font-family: var(--font-mono); font-weight: var(--weight-regular); font-size: var(--text-mono-xs); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-ink); opacity: 0.7; }
.kicker  { font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-stone); }
.serif   { font-family: var(--font-serif); font-style: italic; font-weight: 500; letter-spacing: var(--tracking-tight); line-height: 1.05; }
.mono    { font-family: var(--font-mono); }
em.it    { font-style: italic; }

h1.serif { font-size: var(--text-display-4); }
h2.serif { font-size: var(--text-display-3); }
h3.serif { font-size: var(--text-display-2); }
h4.serif { font-size: var(--text-display-1); line-height: 1.15; letter-spacing: var(--tracking-snug); }

.wrap { max-width: var(--container); margin: 0 auto; padding: 0 var(--space-5); }
.wrap-wide { max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--space-5); }
.muted { color: var(--color-stone); }

/* ── Buttons ────────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; padding: 12px 22px; border: 0; border-radius: 0; cursor: pointer; background: transparent; transition: background var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); text-decoration: none; }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--color-green); color: var(--color-bone); }
.btn-primary:hover { background: var(--color-green-deep); color: var(--color-bone); }
.btn-primary:active { transform: scale(0.98); }
.btn-secondary { background: transparent; color: var(--color-ink); border: var(--border-default); }
.btn-secondary:hover { background: var(--color-green-deep); color: var(--color-bone); }
.btn-outline-green { background: transparent; color: var(--color-green); border: 1.5px solid var(--color-green); }
.btn-outline-green:hover { background: var(--color-green); color: var(--color-bone); }
.btn-outline-green:active { transform: scale(0.98); }
.btn-ghost { color: var(--color-ink); padding-left: 0; padding-right: 0; }
.btn-ghost:hover { color: var(--color-green); }
.btn-lg { padding: 16px 28px; font-size: 12px; }
.btn-sm { padding: 8px 14px; font-size: 10px; }
.btn-xl { font-family: var(--font-body); font-size: 18px; font-weight: 500; letter-spacing: normal; text-transform: none; padding: 16px 28px; }
.btn-block { width: 100%; justify-content: center; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.4; cursor: not-allowed; }
/* Header CTA: bold weight so the (now de-emphasized secondary) button still reads
   clearly. Scoped so it does not bold every .btn on the site. */
.btn.nav-cta { font-weight: 700; }
/* PDP checkout CTA: bold (like the hero CTA), scoped so it does not bold every .btn. */
.btn.pdp-checkout { font-weight: 700; }
/* bone button — for use over green fields */
.btn-bone { background: var(--color-bone); color: var(--color-ink); }
.btn-bone:hover { background: var(--color-paper); color: var(--color-green-deep); }

/* ── Return link ────────────────────────────────────────────── */
/* A low-emphasis text link that closes a block of copy — used on post-submission
   confirmation panels. Distinct from .btn-ghost (reserved for button rows): it
   reads as a link rather than a button, and the leading green angle marker (a
   decorative ::before) anchors it to the text column's left seam. Swap the glyph
   in `content` to change the marker (\203A right ›, \2039 left ‹). */
.return-link { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink); text-decoration: none; transition: color var(--duration-fast) var(--ease-standard); }
.return-link::before { content: "\203A" / ""; flex: none; color: var(--color-green); font-size: 16px; line-height: 1; }
.return-link:hover { color: var(--color-green); text-decoration: none; }

/* ── Tags ───────────────────────────────────────────────────── */
.tag { display: inline-flex; align-items: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: 500; padding: 4px 10px; }
.tag-place { background: rgba(90,138,90,0.22); color: var(--color-green-deep); }
.tag-feat  { background: rgba(184,115,42,0.20); color: var(--color-rust); }
.tag-new   { background: var(--signal-link-tint); color: var(--signal-link); }
.tag-free  { background: var(--color-green); color: var(--color-bone); }

/* ── Header ─────────────────────────────────────────────────── */
.site-header { position: sticky; top: 0; z-index: var(--z-sticky); background: var(--color-bone); border-top: 3px solid var(--accent, var(--color-rust)); border-bottom: var(--border-hairline); }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; height: 64px; max-width: var(--container-wide); margin: 0 auto; padding: 0 var(--space-5); }
.brand { display: inline-flex; align-items: center; gap: 9px; }
/* The logo is an anchor, so the base a:hover underline (drawn in --signal-link blue)
   would show on hover; suppress it — the wordmark is a brand mark, not a text link. */
.site-header .brand:hover { text-decoration: none; }
.brand svg { display: block; }
.brand .wm { font-family: var(--font-serif); font-weight: 500; font-size: 22px; letter-spacing: var(--tracking-tight); color: var(--color-green); line-height: 1; white-space: nowrap; }
.brand .wm em { font-style: italic; }
.main-nav { display: flex; align-items: center; gap: var(--space-6); }
.header-right { display: flex; align-items: center; gap: var(--space-6); }
.main-nav a.navlink { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: rgba(26,29,26,0.70); padding: 4px 0; border-bottom: 2px solid transparent; }
.main-nav a.navlink:hover { color: var(--color-ink); text-decoration: none; }
.main-nav a.navlink.active { color: var(--color-green); border-bottom-color: var(--color-green); }
/* Emphasized nav item: bold + full-strength ink so it stands out (vs the muted 70% links). */
.main-nav a.navlink.navlink-strong { font-weight: 700; color: var(--color-ink); }
.cart-btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ink); border: var(--border-emphasis); padding: 8px 14px; background: var(--color-bone); cursor: pointer; }
.cart-btn:hover { background: var(--color-ink); color: var(--color-bone); }
.cart-btn .count { font-weight: 500; }

/* ── View routing ───────────────────────────────────────────── */
.view { display: none; }
.view.active { display: block; }
main { min-height: 60vh; }

/* ── Hero · choropleth (Horizon) ────────────────────────────── */
.hero-choro { position: relative; overflow: hidden; background: var(--color-mist); }
.hero-choro .choro-map { position: absolute; right: -2%; bottom: -10%; width: 52%; max-width: 1000px; z-index: 1; }
.hero-choro .choro-map svg { width: 100%; height: auto; display: block; }
.hero-choro .choro-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to bottom, var(--color-mist) 16%, rgba(245,246,245,0) 68%); }
.hero-choro .choro-inner { position: relative; z-index: 3; max-width: var(--container-wide); margin: 0 auto; min-height: 600px; padding: var(--space-10) var(--space-7) var(--space-9) var(--space-8); }
.hero-choro .choro-text { max-width: 600px; display: flex; flex-direction: column; gap: var(--space-5); }
.hero-choro .ticker { font-family: var(--font-mono); font-weight: var(--weight-regular); font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--accent, var(--color-rust)); display: flex; align-items: center; gap: 10px; }
.hero-choro .ticker::after { content: ""; width: 34px; height: 1.5px; background: currentColor; display: inline-block; }
.hero-choro .choro-h1 { font-family: var(--font-serif); font-style: italic; font-weight: 500; letter-spacing: var(--tracking-tight); line-height: 1.02; color: var(--color-ink); font-size: clamp(44px, 5vw, 72px); }
.hero-choro .choro-h1 .pop { color: var(--color-green); font-style: normal; }
.hero-choro[data-figure="ink"] .choro-h1 .pop { color: var(--color-ink); }
.hero-choro .choro-lede { font-size: var(--text-body-lg); line-height: 1.55; color: var(--color-ink); max-width: 42ch; }
.hero-choro .cta-row { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin-top: var(--space-2); }
/* Hero CTA: bold weight (uses the loaded IBM Plex Mono 700). Scoped to the hero cta-row
   so it does not bold every .btn on the site. */
.hero-choro .cta-row .btn { font-weight: 700; }
.hero-choro .choro-cap { position: absolute; left: var(--space-8); bottom: var(--space-6); z-index: 3; font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-stone); }

/* Hero entrance — the four left-column blocks (ticker, headline, lede, CTA) hold for
   ~0.25s, then launch together and rise 40px into place, each a touch FASTER than the
   one below it (shorter duration, same start), so they snap in top-to-bottom. Pure
   CSS: storefront.css is render-blocking, so the hidden start frame is present at
   first paint — no flash, no JS. `both` fill holds the start frame through the delay
   AND the animation, so the blocks stay hidden during the quarter-second hold. Wrapped
   in prefers-reduced-motion: no-preference, so a reduced-motion visitor gets the final
   state with no motion at all. translateY is a transform (no reflow), so nothing below
   the hero shifts. */
@media (prefers-reduced-motion: no-preference) {
  .hero-choro .choro-text > .ticker,
  .hero-choro .choro-text > .choro-h1,
  .hero-choro .choro-text > .choro-lede,
  .hero-choro .choro-text > .cta-row { animation: hero-rise 460ms var(--ease-emphasized) 250ms both; }
  .hero-choro .choro-text > .choro-h1  { animation-duration: 540ms; }
  .hero-choro .choro-text > .choro-lede { animation-duration: 620ms; }
  .hero-choro .choro-text > .cta-row    { animation-duration: 700ms; }
}
@keyframes hero-rise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }

/* ── Generic section ────────────────────────────────────────── */
.section { padding: var(--space-9) 0; }
.section.alt { background: var(--color-mist); }
.section-head { max-width: 64ch; margin-bottom: var(--space-7); }
.section-head.section-head-wide { max-width: none; }
.section-head .eyebrow { display: block; margin-bottom: var(--space-3); }
.section-head h2 { color: var(--color-ink); }
.section-head p { margin-top: var(--space-4); color: var(--color-stone); font-size: var(--text-body-lg); }

/* ── Closing CTA ────────────────────────────────────────────── */
.cta-final { padding: var(--space-10) 0; text-align: center; border-top: var(--border-hairline); }
.cta-final-inner { max-width: 820px; margin: 0 auto; padding: 0 var(--space-5); display: flex; flex-direction: column; align-items: center; gap: var(--space-6); }
.cta-final h2 { width: 100%; font-size: clamp(36px, 4.2vw, 50px); line-height: 1.12; color: var(--color-ink); }
.cta-final .sub { font-size: var(--text-body-lg); line-height: 1.55; color: var(--color-stone); max-width: 52ch; margin: calc(-1 * var(--space-2)) 0 0; }
.cta-final .btn { margin-top: var(--space-2); }

/* ── Product summary cards (home) ───────────────────────────── */
.prod-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.prod-card { background: var(--color-paper); border: var(--border-hairline); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
.prod-card:hover { border: 1.5px solid var(--color-ink); }
.prod-card .top { display: flex; align-items: center; justify-content: space-between; }
.prod-card h4 { color: var(--color-ink); }
.prod-card .price { font-family: var(--font-mono); font-size: var(--text-display-1); color: var(--color-green); }
.prod-card .price small { font-size: 11px; color: var(--color-stone); letter-spacing: var(--tracking-wide); }
.prod-card .desc { color: var(--color-stone); font-size: var(--text-body-sm); flex: 1; }
.prod-card .links { display: flex; gap: var(--space-4); align-items: center; margin-top: var(--space-2); }

/* ── Spec cards (home catalog) ──────────────────────────────── */
.specgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-5); align-items: stretch; }
.spec { background: var(--color-bone); border: var(--border-hairline); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
.spec:hover { border: 1.5px solid var(--color-ink); box-shadow: var(--shadow-2); }
.spec.featured { border: 1.5px solid var(--color-green); box-shadow: var(--shadow-2); }
.spec .spflag { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: 500; padding: 4px 10px; background: rgba(90,138,90,0.20); color: var(--color-green-deep); align-self: flex-start; visibility: hidden; }
.spec.featured .spflag { visibility: visible; }
.spec .sptop { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.spec .spname { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 28px; color: var(--color-ink); letter-spacing: var(--tracking-snug); }
.spec .sprows { font-family: var(--font-mono); font-size: 13px; color: var(--color-green); white-space: nowrap; }
.spec .spblurb { color: var(--color-stone); font-size: var(--text-body-sm); }
.spec .sptiers { display: flex; flex-direction: column; border-top: var(--border-hairline); margin-top: auto; }
.spec .sptier { display: grid; grid-template-columns: 1fr auto auto; gap: var(--space-3); align-items: baseline; padding: 10px 0; border-bottom: var(--border-hairline); }
.spec .sptier .tl { font-family: var(--font-mono); font-size: 12px; color: var(--color-ink); }
.spec .sptier .tc { font-family: var(--font-mono); font-size: 11px; color: var(--color-stone); }
.spec .sptier .tp { font-family: var(--font-mono); font-size: 14px; color: var(--color-green); min-width: 46px; text-align: right; }
.spec .spfoot { display: grid; grid-template-columns: 1fr auto; gap: var(--space-3); align-items: stretch; margin-top: var(--space-2); }
/* Scroll-reveal (home): home.js adds .spec-reveal (100px low + transparent) then
   .is-revealed (lifted into place) via an IntersectionObserver as each card scrolls
   into view. The transition lives on the revealed state only, so applying the hidden
   state never animates a card downward first. JS-applied, so a no-JS /
   no-IntersectionObserver / reduced-motion visitor always sees the cards in place.
   translateY is a transform (no reflow), so surrounding content never shifts.
   border-color + box-shadow are re-declared so the card's hover state still animates
   after the reveal classes remain on the element. */
.spec.spec-reveal { opacity: 0; transform: translateY(100px); }
.spec.spec-reveal.is-revealed { opacity: 1; transform: none; transition: opacity var(--duration-slow) var(--ease-emphasized), transform var(--duration-slow) var(--ease-emphasized), border-color var(--duration-fast), box-shadow var(--duration-fast); }
/* Stagger the second card (Counties) so it arrives ~0.5s after the first (Cities). Only
   on the desktop 2-up row (>=1024px, where the cards share a row and would otherwise
   reveal together); the delay is on opacity+transform ONLY so the hover border/shadow
   still respond instantly. Below 1024px the grid is single-column, so each card keeps
   revealing promptly as it is scrolled to — no hold on an already-visible card. */
@media (min-width: 1024px) {
  .specgrid .spec.spec-reveal:nth-child(2).is-revealed { transition: opacity var(--duration-slow) var(--ease-emphasized) 500ms, transform var(--duration-slow) var(--ease-emphasized) 500ms, border-color var(--duration-fast), box-shadow var(--duration-fast); }
}
@media (prefers-reduced-motion: reduce) { .spec.spec-reveal { opacity: 1; transform: none; } }
.spec .spfoot .btn { justify-content: center; white-space: nowrap; }

/* ── Compare table ──────────────────────────────────────────── */
.compare { width: 100%; border-collapse: collapse; table-layout: fixed; }
.compare col { width: 25%; }
.compare th, .compare td { text-align: left; padding: 14px 16px; border-bottom: var(--border-hairline); vertical-align: top; }
.compare thead th { position: sticky; top: 67px; background: var(--color-bone); z-index: 5; border-bottom: var(--border-default); }
.compare .colhead { display: flex; flex-direction: column; gap: var(--space-2); }
.compare .colhead .pname { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 22px; color: var(--color-ink); letter-spacing: var(--tracking-snug); }
.compare .colhead a.pname:hover { color: var(--color-green); text-decoration: none; }
.compare .colhead .pprice { font-family: var(--font-mono); font-size: 18px; color: var(--color-green); }
.compare .colhead .pprice small { font-size: 10px; color: var(--color-stone); }
.compare .colhead .btn { margin-top: 4px; }
.colhead-cta { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin-top: 4px; }

/* ── PDP extras ─────────────────────────────────────────────── */
.pdp-badges { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.pill-digital { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; font-weight: 500; padding: 4px 10px; background: var(--signal-link-tint); color: var(--signal-link); }
.price-tax { font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--color-stone); margin-top: 6px; }
.sku { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-stone); margin-top: var(--space-4); }
.pdp-section { margin-top: var(--space-8); }
.compare tbody .grouprow th { background: var(--color-mist); font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: rgba(26,29,26,0.7); }
.compare .feat th { font-weight: 500; color: var(--color-ink); }
.compare .feat td { font-family: var(--font-mono); font-size: 13px; color: var(--color-ink); }
.compare tbody tr.feat:hover { background: var(--color-paper); }
.compare .yes { color: var(--color-green); font-weight: 600; }
.compare .yes .ck { display: none; vertical-align: middle; color: var(--color-green); }
.compare .no  { color: rgba(26,29,26,0.28); }
.compare td.val { color: var(--color-stone); }
.compare .featname .hint { display: block; font-family: var(--font-body); font-size: 12px; color: var(--color-stone); font-weight: 400; margin-top: 2px; }
.compare .featname, .compare .colhead .pname { overflow-wrap: anywhere; }

/* ── Compare tabs ───────────────────────────────────────────── */
.tabs { display: flex; gap: var(--space-2); border-bottom: var(--border-default); margin-bottom: var(--space-6); }
.tab { font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: rgba(26,29,26,0.6); background: none; border: 0; border-bottom: 2px solid transparent; padding: 12px 14px; cursor: pointer; margin-bottom: -1px; }
.tab:hover { color: var(--color-ink); }
.tab.active { color: var(--color-green); border-bottom-color: var(--color-green); }

/* ── Folder tabs (dataset compare) ──────────────────────────── */
.tabs-folder { display: flex; justify-content: center; gap: 4px; align-items: flex-end; position: relative; z-index: 2; margin-bottom: 0; }
.tab-folder { font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-stone); background: var(--color-bone); border: 1px solid rgba(26,29,26,0.14); padding: 12px 20px; cursor: pointer; position: relative; top: 1px; text-decoration: none; }
.tab-folder:hover { color: var(--color-ink); text-decoration: none; }
.tab-folder.active { background: var(--color-mist); color: var(--color-green); border-top: 2px solid var(--color-green); border-bottom: 0; padding-top: 11px; }
.folder-panel { border: 1px solid rgba(26,29,26,0.14); border-left: 0; border-right: 0; background: var(--color-bone); padding: 0 0 var(--space-6); }
.folder-panel .compare col:first-child { width: 40%; }
.folder-panel .compare col:nth-child(n+2) { width: 20%; }
.folder-panel .compare th, .folder-panel .compare td { padding-left: 20px; padding-right: 20px; }
.folder-panel .compare thead th { background: var(--color-mist); }
.folder-panel .compare thead th:first-child { border-left: 1px solid rgba(26,29,26,0.14); }
.folder-panel .compare thead th:last-child { border-right: 1px solid rgba(26,29,26,0.14); }
.folder-panel .compare .grouprow th { border-left: 1px solid rgba(26,29,26,0.14); border-right: 1px solid rgba(26,29,26,0.14); }
.folder-panel .compare thead th:not(:first-child) { text-align: center; }
.folder-panel .compare tbody td { text-align: center; }
.folder-panel .compare .colhead { text-align: center; }
.folder-panel .compare .colhead-cta { align-items: center; }
.folder-panel .compare .colhead .pname { font-size: 19px; line-height: 1.18; display: block; }

/* ── Breadcrumb ─────────────────────────────────────────────── */
.crumbs { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wide); color: var(--color-stone); margin-bottom: var(--space-5); }
.crumbs a { color: var(--color-stone); }
.crumbs a:hover { color: var(--color-ink); }
.crumbs .sep { padding: 0 8px; }
.crumbs .here { color: var(--color-ink); }

/* ── Product page ───────────────────────────────────────────── */
.prod-head { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-8); align-items: start; }
.prod-head .buybox { background: var(--color-paper); border: var(--border-hairline); padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); position: sticky; top: 84px; }
.prod-head .buybox .price { font-family: var(--font-mono); font-size: var(--text-display-3); color: var(--color-green); line-height: 1; }
.prod-head .buybox .price small { font-size: 12px; color: var(--color-stone); letter-spacing: var(--tracking-wide); display: block; margin-top: 6px; }
.prod-head h1 { color: var(--color-ink); margin: var(--space-3) 0; }
.prod-head .lede { font-size: var(--text-body-lg); color: var(--color-ink); }
.meta-list { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.meta-list .row { display: flex; justify-content: space-between; gap: var(--space-4); font-size: 13px; padding: 6px 0; border-bottom: var(--border-hairline); }
.meta-list .row dt { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-stone); }
.meta-list .row dd { margin: 0; font-family: var(--font-mono); font-size: 13px; color: var(--color-ink); }

/* data dictionary */
.dict { width: 100%; border-collapse: collapse; }
.dict th, .dict td { text-align: left; padding: 10px 12px; border-bottom: var(--border-hairline); font-size: 13px; }
.dict thead th { background: var(--color-mist); font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: rgba(26,29,26,0.7); }
/* display:table-cell guards against the generic form .field rule (display:flex)
   below, which would otherwise collapse this column and misalign row borders. */
.dict td.field { display: table-cell; font-family: var(--font-mono); font-size: 12px; color: var(--color-green-deep); }
.dict td.type  { font-family: var(--font-mono); font-size: 11px; color: var(--color-stone); }

/* sample data preview */
.sample-wrap { border: var(--border-hairline); overflow-x: auto; background: var(--color-bone); }
.sample { border-collapse: collapse; min-width: 100%; font-size: 12px; }
.sample th, .sample td { padding: 9px 12px; border-bottom: var(--border-hairline); white-space: nowrap; }
.sample thead th { background: var(--color-mist); font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: rgba(26,29,26,0.7); position: sticky; top: 0; }
.sample td { font-family: var(--font-mono); color: var(--color-ink); }
.sample td.num { text-align: right; }
.sample tbody tr:hover { background: var(--color-paper); }
.sample-cap { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-stone); margin-top: var(--space-3); }

/* ── Cart / checkout ────────────────────────────────────────── */
.cart-grid { display: grid; grid-template-columns: 460px 360px; justify-content: center; gap: var(--space-6); align-items: start; }
.line-items { border-top: var(--border-default); }
.line-item { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) 0; border-bottom: var(--border-hairline); }
.line-item .li-name { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 20px; color: var(--color-ink); }
.line-item .li-sub { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-stone); margin-top: 4px; }
.line-item .li-price { font-family: var(--font-mono); font-size: 18px; color: var(--color-green); }
.line-item .li-remove { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-stone); background: none; border: 0; cursor: pointer; padding: 6px; }
.line-item .li-remove:hover { color: var(--signal-error); }
.summary { background: var(--color-paper); border: var(--border-hairline); padding: var(--space-6); position: static; }
.summary .row { display: flex; justify-content: space-between; padding: 8px 0; font-size: 14px; }
.summary .row.total { border-top: var(--border-default); margin-top: var(--space-3); padding-top: var(--space-4); font-family: var(--font-mono); font-size: 20px; color: var(--color-ink); }
.summary .total .amt { color: var(--color-green); }
.checkout-main form { max-width: 460px; }
.summary-title { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: var(--text-display-1); color: var(--color-ink); letter-spacing: var(--tracking-snug); margin-bottom: var(--space-4); }
.summary-item { padding-bottom: var(--space-4); margin-bottom: var(--space-3); border-bottom: var(--border-default); }
.summary-sku { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 19px; color: var(--color-ink); }
.summary-qty { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wide); color: var(--color-stone); margin-top: 6px; }
.processed { margin-top: var(--space-4); padding-top: var(--space-4); border-top: var(--border-hairline); font-size: 12px; color: var(--color-stone); }

.empty { text-align: center; padding: var(--space-9) var(--space-5); color: var(--color-stone); }
.empty .eyebrow { display: block; margin-bottom: var(--space-4); }

/* form */
.field { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.field label { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: rgba(26,29,26,0.8); }
/* A full-sentence question label reads as normal body text, not the compact uppercase-mono
   field label above — so the eye catches the question before dropping into the input. */
.field label.field-question { font-family: var(--font-body); font-size: var(--text-body); font-weight: 500; letter-spacing: normal; text-transform: none; color: var(--color-ink); }
.field input { font-family: var(--font-body); font-size: 16px; color: var(--color-ink); background: var(--color-bone); border: 1px solid rgba(26,29,26,0.30); border-radius: 0; padding: 12px 14px; }
.field input:focus-visible { border: 1.5px solid var(--color-green); box-shadow: 0 0 0 3px rgba(51,102,51,0.20); outline: none; }
.field textarea { font-family: var(--font-body); font-size: 16px; color: var(--color-ink); background: var(--color-bone); border: 1px solid rgba(26,29,26,0.30); border-radius: 0; padding: 12px 14px; width: 100%; box-sizing: border-box; resize: vertical; min-height: 150px; line-height: 1.5; }
.field textarea:focus-visible { border: 1.5px solid var(--color-green); box-shadow: 0 0 0 3px rgba(51,102,51,0.20); outline: none; }
.field.invalid textarea { border: 1.5px solid var(--signal-error); box-shadow: 0 0 0 3px rgba(176,48,48,0.20); }
.field .hint { font-size: 12px; color: var(--color-stone); }
.field.invalid input { border: 1.5px solid var(--signal-error); box-shadow: 0 0 0 3px rgba(176,48,48,0.20); }
.field.invalid label { color: var(--signal-error); }
/* Shared error line: hidden until an invalid wrapper (.field or .consent) reveals
   it. Class-only base so the consent checkboxes can reuse the exact glyph + copy
   treatment without living inside a .field. */
.err-msg { display: none; align-items: center; gap: 6px; font-size: 12px; color: var(--signal-error); }
.field.invalid .err-msg { display: flex; }
.err-msg .glyph { display: inline-flex; width: 13px; height: 13px; border-radius: 50%; background: var(--signal-error); color: var(--color-bone); font-size: 9px; align-items: center; justify-content: center; }

/* callout */
.callout { border: 1px solid rgba(26,29,26,0.10); border-left: 4px solid var(--signal-link); padding: var(--space-3) var(--space-4); font-size: 14px; color: var(--color-ink); }
.callout-success { background: var(--signal-success-tint); border-left-color: var(--signal-success); }
.callout-info { background: var(--signal-link-tint); border-left-color: var(--signal-link); }
.callout-error { background: var(--signal-error-tint); border-left-color: var(--signal-error); color: var(--color-ink); }
/* Checkout form-level error surface (checkout.js toggles [hidden]); spacing
   separates it from the first field when shown, and focus shows no extra outline
   beyond the callout itself. */
#checkout-error { margin-bottom: var(--space-5); }
#checkout-error:focus-visible { outline: 2px solid var(--signal-error); outline-offset: 2px; }

/* Consent checkboxes (Terms/Privacy, Refund waiver) carry a submit-time error
   line like the input fields. The wrapper owns the vertical rhythm so the inner
   checkbox-row margins collapse to nothing and the .err-msg sits tight beneath
   the box. Only the checkbox itself reddens on error — the disclosure text keeps
   its stone color and links keep their link color. */
.consent { margin-top: var(--space-4); margin-bottom: var(--space-5); }
.consent .checkbox-row { margin-top: 0; margin-bottom: 0; }
.consent .err-msg { margin-top: var(--space-2); }
.consent.invalid .err-msg { display: flex; }
.consent.invalid .checkbox-row input[type="checkbox"] { border-color: var(--signal-error); box-shadow: 0 0 0 3px rgba(176,48,48,0.20); }

/* ── Customer error page (/sorry/*) ─────────────────────────── */
/* Folded once from the four error mock-ups' duplicated inline <style>. Every custom
   property used below already exists in :root. The unrelated .err-msg / .consent .err-msg
   rules above are form-validation styling — the names don't collide, but never target
   these with a prefix selector like [class^="err-"]. */
.err-page { min-height: 62vh; display: flex; align-items: center; }
.err-wrap { max-width: 760px; margin: 0 auto; padding: var(--space-9) var(--space-6); width: 100%; }
.err-code { font-family: var(--font-mono); font-size: clamp(72px, 14vw, 148px); line-height: 0.9; letter-spacing: -0.02em; color: var(--color-ink); display: flex; align-items: baseline; gap: var(--space-4); }
.err-code .dot { color: var(--color-green); }
.err-eyebrow { font-family: var(--font-mono); font-size: var(--text-mono-sm); letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--signal-error); display: block; margin-bottom: var(--space-4); }
.err-eyebrow.neutral { color: var(--color-green); }
.err-title { font-family: var(--font-serif); font-style: italic; font-weight: 500; letter-spacing: var(--tracking-tight); font-size: clamp(30px, 4.4vw, 46px); line-height: 1.05; color: var(--color-ink); margin-top: var(--space-5); }
.err-lede { margin-top: var(--space-5); color: var(--color-stone); font-size: var(--text-body-lg); line-height: 1.6; max-width: 54ch; }
.err-actions { margin-top: var(--space-7); display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }
.err-ref { margin-top: var(--space-6); font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-stone); }
.err-links { margin-top: var(--space-7); padding-top: var(--space-5); border-top: var(--border-hairline); }
.err-links .lbl { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-stone); display: block; margin-bottom: var(--space-3); }
.err-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); }
.err-links a { font-size: var(--text-body); color: var(--color-ink); }
.err-links a:hover { color: var(--color-green); }

/* ── FAQ accordion ──────────────────────────────────────────── */
.faq-list { max-width: var(--container-text); border-top: var(--border-hairline); }
.faq-item { border-bottom: var(--border-hairline); }
.faq-q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); background: none; border: 0; cursor: pointer; text-align: left; padding: var(--space-5) 0; font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: var(--text-display-1); color: var(--color-ink); letter-spacing: var(--tracking-snug); }
.faq-q .pm { font-family: var(--font-mono); font-size: 20px; color: var(--color-green); flex: none; }
.faq-a { display: none; padding: 0 0 var(--space-5); max-width: 64ch; color: var(--color-stone); }
.faq-item.open .faq-a { display: block; }

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer { background: var(--color-ink); color: var(--color-bone); padding: var(--space-8) 0 var(--space-7); margin-top: 0; }
.site-footer .cols { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: var(--space-6); }
.site-footer .wm { font-family: var(--font-serif); font-weight: 500; font-size: 24px; letter-spacing: var(--tracking-tight); color: var(--color-bone); }
.site-footer .wm em { font-style: italic; }
.site-footer .tagline { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: rgba(255,255,255,0.6); margin-top: var(--space-3); }
.site-footer h5 { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: rgba(255,255,255,0.5); margin: 0 0 var(--space-4); }
.site-footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.site-footer a { color: rgba(255,255,255,0.85); font-size: 14px; }
.site-footer a:hover { color: var(--color-bone); }
.site-footer .footer-main { display: grid; grid-template-columns: 2fr 1fr; gap: var(--space-8); align-items: start; }
.site-footer .footer-cta p { font-size: 14px; line-height: 1.5; color: rgba(255,255,255,0.7); margin: 0 0 var(--space-4); max-width: 34ch; }
.site-footer .footer-cta .btn-primary { color: var(--color-bone); }
.site-footer .colophon { margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid rgba(255,255,255,0.15); font-size: 12px; color: rgba(255,255,255,0.5); display: flex; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }

/* ── Toast ──────────────────────────────────────────────────── */
.toast-wrap { position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: var(--z-toast); display: flex; flex-direction: column; gap: var(--space-3); }
.toast { background: var(--color-ink); color: var(--color-bone); padding: 14px 18px; max-width: 420px; font-size: 14px; display: flex; align-items: center; gap: var(--space-4); box-shadow: var(--shadow-3); animation: toastin var(--duration-base) var(--ease-emphasized); }
.toast .undo { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-ochre); background: none; border: 0; cursor: pointer; }
@keyframes toastin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 1023px) {
  .hero-choro .choro-map { width: 64%; right: -8%; }
  .prod-head, .cart-grid { grid-template-columns: 1fr; }
  .prod-head .buybox, .summary { position: static; }
  .prod-grid { grid-template-columns: 1fr; }
  .specgrid { grid-template-columns: 1fr; }
  .site-footer .footer-main { grid-template-columns: 1fr; gap: var(--space-7); }
  .site-footer .cols { grid-template-columns: 1fr 1fr; }
  .compare thead th { position: static; }
}
@media (max-width: 900px) {
  .hero-choro .choro-map { opacity: 0.16; width: 104%; right: -12%; bottom: auto; top: 44%; max-width: none; }
  .hero-choro .choro-scrim { display: none; }
  .hero-choro .choro-inner { min-height: 0; padding: var(--space-9) var(--space-5); }
  .hero-choro .choro-text { max-width: 100%; }
  .hero-choro .choro-cap { display: none; }
}
@media (max-width: 640px) {
  .main-nav { display: none; }
  h1.serif { font-size: 38px; }
  .hero-choro .choro-h1 { font-size: 38px; }
  .site-footer .cols { grid-template-columns: 1fr; }
  /* Compare table: swap the "Included" word for a compact check icon to save
     horizontal space; keep the word for screen readers (visually hidden). */
  .compare .yes .ck { display: inline-block; }
  .compare .yes .ck-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  /* Even out the table columns on phones: the field column and the three tier
     columns each take 25% (desktop keeps the wider 40% field column). The roomier
     tier columns also ease the cramped column heads. */
  .folder-panel .compare col:first-child { width: 25%; }
  .folder-panel .compare col:nth-child(n+2) { width: 25%; }
  /* Drop the "one-time" price note in the column heads; show just the price. */
  .compare .colhead .pprice small { display: none; }
  /* Column heads as aligned rows on phones: each title sits in a fixed-height,
     bottom-aligned band, so the price, "Get this", and "Learn more" line up across
     the three tier columns (like a table). */
  .folder-panel .compare .colhead .pname { font-size: 12px; line-height: 1.15; height: 5.2em; display: flex; align-items: flex-end; justify-content: center; }
  /* Full-width buttons with tighter padding so they fit the narrow columns; give
     the primary button a transparent border so its box height matches the bordered
     secondary buttons and "Learn more" stays on the same row across columns. */
  .folder-panel .compare .colhead-cta { align-items: stretch; }
  .folder-panel .compare .colhead-cta .btn { padding-left: 6px; padding-right: 6px; justify-content: center; letter-spacing: normal; }
  .folder-panel .compare .colhead-cta .btn-primary { border: var(--border-default); border-color: transparent; }
}

/* ═══════════════════════════════════════════════════════════════════
   PDP — Product Details Page template
   (map-led hero · editorial value split · schema/FAQ tabs · closing CTA)
   Ported from the approved PDP design export; .dict / .faq-list / .crumbs /
   .pdp-badges / .pill-digital / .tag / .meta-list already live above.
   ═══════════════════════════════════════════════════════════════════ */
.tp-pdp { padding-top: var(--space-7); }
.tp-container { max-width: 1120px; margin: 0 auto; padding: 0 var(--space-6); }
.tp-pdp .crumbs { margin-bottom: var(--space-6); }

/* ── Hero (map-led) ─────────────────────────────────────────── */
.tp-hero { display: grid; grid-template-columns: 1fr 1.05fr; gap: var(--space-8); align-items: center; }
.tp-hero .pdp-badges { margin-bottom: var(--space-4); }
.tp-pdp .tp-hero h1 { font-size: clamp(34px, 4vw, 52px); line-height: 1.06; color: var(--color-ink); }
.tp-hero .mp-lede { font-size: var(--text-body-lg); line-height: 1.55; color: var(--color-ink); max-width: 40ch; margin: var(--space-4) 0 var(--space-7); }
.tp-hero .mp-sample { display: inline-block; margin-bottom: var(--space-6); }
.tp-hero .mp-buy { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; }
.tp-hero .mp-price { font-size: 30px; color: var(--color-green); white-space: nowrap; }
.tp-hero .mp-price span { font-size: 11px; color: var(--color-stone); letter-spacing: var(--tracking-wide); text-transform: uppercase; }
.tp-hero .mp-buy .btn { flex: 1; min-width: 200px; }
.tp-hero .mp-stats { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--border-hairline); font-family: var(--font-mono); font-size: 12px; color: var(--color-stone); }
.tp-hero .mp-stats b { color: var(--color-ink); }
.tp-hero .mp-sku-pill { display: inline-flex; align-items: center; font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-green-deep); background: rgba(51,102,51,0.10); border: 1px solid rgba(51,102,51,0.30); padding: 3px 9px; }
.tp-hero .mp-plot { background: var(--color-paper); border: var(--border-hairline); padding: var(--space-5); margin: 0; }
.tp-hero .coordplot { display: block; width: 100%; height: auto; }
.tp-hero .coordplot .axt { font-family: var(--font-mono); font-size: 10px; fill: var(--color-stone); }
.tp-hero .coordplot .cpt { font-family: var(--font-mono); font-size: 11px; fill: var(--color-ink); }
.tp-hero .mp-plot figcaption { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-stone); margin-top: var(--space-3); text-align: center; }
.tp-sample-link { font-family: var(--font-mono); font-size: 12px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-green); border-bottom: 1.5px solid var(--color-green); padding-bottom: 1px; white-space: nowrap; }
.tp-sample-link:hover { color: var(--color-green-deep); border-color: var(--color-green-deep); text-decoration: none; }

/* ── Value split (full-bleed mist band) ─────────────────────── */
.tp-values { background: var(--color-mist); border-top: var(--border-hairline); border-bottom: var(--border-hairline); padding: var(--space-9) 0; margin-top: var(--space-9); }
.tp-values .tp-container { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--space-8); align-items: start; }
.tp-val-aside .eyebrow { display: block; color: var(--color-green); margin-bottom: var(--space-3); }
.tp-values .tp-val-title { font-size: clamp(28px, 2.8vw, 36px); line-height: 1.1; color: var(--color-ink); }
.tp-val-note { margin-top: var(--space-4); color: var(--color-stone); font-size: var(--text-body); line-height: 1.6; max-width: 30ch; }
.tp-val-rows { display: flex; flex-direction: column; }
.tp-val-row { padding: var(--space-5) 0; border-top: var(--border-default); }
.tp-val-row:first-child { border-top: 0; padding-top: 0; }
.tp-val-row-top { display: flex; align-items: baseline; gap: var(--space-4); margin-bottom: var(--space-2); }
.tp-val-n { font-family: var(--font-mono); font-size: 12px; color: var(--color-green); }
.tp-val-row .tp-val-h { font-size: 21px; color: var(--color-ink); }
.tp-val-p { font-size: var(--text-body); line-height: 1.6; color: var(--color-stone); max-width: 56ch; }

/* ── Schema / FAQ tabs ──────────────────────────────────────── */
.tp-tabs { margin-top: var(--space-9); }
.tp-tabbar { display: flex; align-items: baseline; gap: var(--space-6); flex-wrap: wrap; margin-bottom: var(--space-5); border-bottom: var(--border-default); }
.tp-tab { background: none; border: 0; cursor: pointer; font-family: var(--font-serif); font-style: italic; font-weight: 500; letter-spacing: var(--tracking-tight); line-height: 1.1; font-size: clamp(22px, 2.4vw, 30px); color: var(--color-stone); padding: 0 0 var(--space-3); margin-bottom: -1px; border-bottom: 2px solid transparent; transition: color var(--duration-fast) var(--ease-standard); }
.tp-tab:hover { color: var(--color-ink); }
.tp-tab.is-active { color: var(--color-ink); border-bottom-color: var(--color-green); }
.tp-tabmeta { margin-left: auto; align-self: baseline; font-family: var(--font-mono); font-size: 12px; color: var(--color-stone); }
.tp-panel.is-hidden { display: none; }
.tp-schema-desc { color: var(--color-ink); font-size: var(--text-body); line-height: 1.6; max-width: 68ch; margin-bottom: var(--space-5); }
.tp-panel .faq-list { max-width: none; }

/* ── Closing CTA (full-bleed mist band) ─────────────────────── */
.tp-cta { background: var(--color-mist); border-top: var(--border-hairline); padding: var(--space-9) 0 var(--space-10); margin-top: var(--space-9); text-align: center; }
.tp-cta .tp-container { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); }
.tp-cta .tp-container h2 { font-size: clamp(36px, 4.2vw, 50px); line-height: 1.12; color: var(--color-ink); }
.tp-cta .sub { font-size: var(--text-body-lg); line-height: 1.55; color: var(--color-stone); max-width: 52ch; }
.tp-cta-actions { display: flex; align-items: center; justify-content: center; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-2); }

@media (max-width: 760px) {
  .tp-hero { grid-template-columns: 1fr; }
  .tp-values .tp-container { grid-template-columns: 1fr; gap: var(--space-6); }
  /* The hero's second-column visual — both the coordinate-plot illustration and the
     product display image — only fills the desktop layout; it adds nothing once the
     hero stacks, so drop both on phones. (The basic tier's "what's inside" facts list,
     a plain .mp-plot, stays.) */
  .tp-hero .mp-plot-viz,
  .tp-hero .mp-plot-img { display: none; }
}

/* ── Legal documents (on the storefront layout) ─────────────── */
.legal { max-width: var(--container-text); margin-inline: auto; color: var(--color-ink); }
.legal h1 { font-family: var(--font-serif); font-weight: var(--weight-medium); font-size: var(--text-display-3); line-height: 1.1; letter-spacing: var(--tracking-tight); color: var(--color-green); margin: 0 0 var(--space-5); }
.legal h2 { font-family: var(--font-serif); font-weight: var(--weight-medium); font-size: var(--text-display-1); letter-spacing: var(--tracking-snug); color: var(--color-ink); margin: var(--space-7) 0 var(--space-3); }
.legal h3 { font-family: var(--font-body); font-weight: var(--weight-semibold); font-size: var(--text-body-lg); color: var(--color-ink); margin: var(--space-5) 0 var(--space-2); }
.legal p, .legal li { font-size: var(--text-body); line-height: 1.6; color: var(--color-ink); }
.legal p { margin: 0 0 var(--space-4); }
.legal a { color: var(--signal-link); text-decoration: underline; text-underline-offset: 2px; }
.legal ul, .legal ol { padding-left: var(--space-5); margin: 0 0 var(--space-4); }
.legal li { margin-bottom: var(--space-2); }

/* ── Checkout · out-of-stock placeholder (main column) ──────── */
.checkout-oos { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); }
.tag-oos { background: rgba(26,29,26,0.08); color: var(--color-stone); }
.checkout-oos h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.08; color: var(--color-ink); }
.oos-msg { color: var(--color-stone); font-size: var(--text-body); line-height: 1.6; max-width: 46ch; }
.oos-msg strong { color: var(--color-ink); font-weight: var(--weight-semibold); }
.oos-actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-3); }

/* ── Checkout · order-complete (thank-you) column ──────────── */
/* Constrain the thank-you column to the same 560px measure as the contact /
   sign-up confirmation panels. */
.complete-card { max-width: 560px; margin-inline: auto; }
/* Give the order number room to breathe above the "save this number" hint. */
.complete-order-number { margin-bottom: var(--space-4); }

/* ── Checkout · free-order email-delivery instructions ──────── */
/* Break the "Check your email" subsection away from the download CTA above it. */
.complete-free h3 { margin-top: var(--space-6); }
/* Delivery notes span the full column width (matching the download button), with
   clear spacing between the stacked paragraphs. */
.complete-free .oos-msg { max-width: none; }
.complete-free .oos-msg + .oos-msg { margin-top: var(--space-4); }
/* Standard bulleted list (disc markers) — mirrors the .legal list treatment. */
.complete-free .allowlist-links { list-style: disc; padding: 0 0 0 var(--space-5); margin: var(--space-2) 0 0; max-width: 46ch; }
.complete-free .allowlist-links li { margin-bottom: var(--space-2); }
.complete-free .allowlist-links a { color: var(--signal-link); text-decoration: underline; text-underline-offset: 2px; }
/* The closing "check your junk/spam" note now sits after the list — give it the
   same separation the inter-paragraph rule provides above the list. */
.complete-free .allowlist-links + .oos-msg { margin-top: var(--space-4); }

/* ── Checkout · paid-order processing → download (Option E) ───────
   "Checklist + skeleton reveal" waiting experience: a two-step checklist with
   an animated ring, plus a shimmering skeleton button that dissolves into the
   real download link once /checkout/paid reports the order is ready. Ported
   from the approved Claude Design handoff and blended into the borderless
   thank-you column (no card chrome — the page frame stays as-is). */
.complete-paid { margin-top: var(--space-6); }
.complete-sub { max-width: 46ch; }

/* Animated ring spinner — shared by the active checklist step and the reveal
   caption. */
.ring {
  width: 18px; height: 18px; flex: none;
  border: 2px solid rgba(51,102,51,0.22);
  border-top-color: var(--color-green);
  border-radius: 50%;
  animation: complete-spin 0.8s linear infinite;
}
@keyframes complete-spin { to { transform: rotate(360deg); } }

/* Two-step checklist (payment submitted · confirming with your bank). */
.complete-steps { list-style: none; margin: var(--space-5) 0 0; padding: 0; }
.complete-steps li {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 11px 0; font-size: var(--text-body);
  color: var(--color-stone); border-bottom: var(--border-hairline);
}
.complete-steps li:last-child { border-bottom: 0; }
.complete-steps li.active { color: var(--color-ink); font-weight: var(--weight-medium); }
.complete-steps li.done { color: var(--color-ink); }
/* Step marker — empty ring by default, filled green check once the step is done. */
.complete-steps .step-marker {
  width: 18px; height: 18px; flex: none;
  border: 1.5px solid rgba(26,29,26,0.22); border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; color: var(--color-bone);
}
.complete-steps li.done .step-marker { background: var(--color-green); border-color: var(--color-green); }
.complete-steps li.done .step-marker::after { content: "\2713"; }

/* Reveal slot: shimmering skeleton while processing, download button once ready. */
.complete-reveal { margin-top: var(--space-5); transition: opacity var(--duration-base) var(--ease-standard); }
.complete-reveal.is-fading { opacity: 0; }
.complete-reveal .sk-btn { height: 48px; }
.complete-reveal .sk-cap {
  display: flex; align-items: center; gap: var(--space-2);
  margin: var(--space-4) 0 0;
  font-family: var(--font-mono); font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--color-stone);
}
/* Loading shimmer for the skeleton button. */
.shimmer {
  background: linear-gradient(90deg, #f0f1f0 0%, #e4e6e4 30%, #f0f1f0 60%);
  background-size: 220% 100%;
  animation: complete-shimmer 1.5s ease infinite;
}
@keyframes complete-shimmer { to { background-position: -220% 0; } }

/* Confirmed note beneath the revealed download button. */
.complete-done-note {
  display: flex; align-items: center; gap: var(--space-2);
  margin: var(--space-3) 0 0;
  font-family: var(--font-mono); font-size: var(--text-mono-xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--signal-success);
}
.complete-done-note .done-check {
  width: 15px; height: 15px; flex: none; border-radius: 50%;
  background: var(--signal-success); color: var(--color-bone);
  display: grid; place-items: center; font-size: 9px;
}
.complete-done-note .done-check::after { content: "\2713"; }

@media (prefers-reduced-motion: reduce) {
  .ring { animation: none; }
  .shimmer { animation: none; }
}

/* ── Checkout · order form (extends the base .field styles above) ── */
.field input:focus::placeholder { color: transparent; }
.field select { font-family: var(--font-body); font-size: 16px; color: var(--color-ink); background: var(--color-bone); border: 1px solid rgba(26,29,26,0.30); border-radius: 0; padding: 12px 36px 12px 14px; appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%23336633' stroke-width='1.5'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; cursor: pointer; }
.field select:focus-visible { border: 1.5px solid var(--color-green); box-shadow: 0 0 0 3px rgba(51,102,51,0.20); outline: none; }
.field input, .field select { min-width: 0; width: 100%; box-sizing: border-box; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.field-row .field { margin-bottom: var(--space-4); min-width: 0; }
.checkbox-row { display: flex; align-items: flex-start; gap: var(--space-3); margin-top: var(--space-4); margin-bottom: var(--space-5); cursor: pointer; font-size: 13px; color: var(--color-stone); line-height: 1.5; }
.checkbox-row input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; width: 18px; height: 18px; margin-top: 1px; border: 1px solid rgba(26,29,26,0.40); border-radius: 0; background: var(--color-bone); cursor: pointer; position: relative; }
.checkbox-row input[type="checkbox"]:checked { background: var(--color-green); border-color: var(--color-green); }
.checkbox-row input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 5px; top: 1px; width: 5px; height: 10px; border: solid var(--color-bone); border-width: 0 2px 2px 0; transform: rotate(45deg); }
.checkbox-row input[type="checkbox"]:focus-visible { box-shadow: 0 0 0 3px rgba(51,102,51,0.20); outline: none; }
.pay-section { margin: var(--space-6) 0 var(--space-4); padding-top: var(--space-5); border-top: var(--border-default); }
.pay-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.pay-head .eyebrow { margin: 0; }
.card-brands { display: flex; gap: 5px; }
.card-brands span { font-family: var(--font-mono); font-size: 9px; letter-spacing: 0.04em; color: var(--color-stone); border: 1px solid rgba(26,29,26,0.18); padding: 2px 5px; line-height: 1.2; }
@media (max-width: 520px) { .field-row { grid-template-columns: 1fr; gap: 0; } }

/* ── Free tools (HO-B) — shared page pattern across /tools/zip-code-lookup,
   /tools/city-geocoder, /tools/nearby-cities ── */
.tool-page { max-width: 860px; margin: 0 auto; padding: var(--space-9) var(--space-6) var(--space-7); }
.tool-head { text-align: center; max-width: 60ch; margin: 0 auto var(--space-7); }
.tool-eyebrow { display: inline-flex; align-items: center; gap: 7px; margin-bottom: var(--space-4); }
.tool-head h1 { font-family: var(--font-serif); font-style: italic; font-weight: 500; letter-spacing: var(--tracking-tight); font-size: clamp(32px, 5vw, 50px); line-height: 1.03; color: var(--color-ink); }
.tool-head .tool-intro { margin-top: var(--space-4); color: var(--color-stone); font-size: var(--text-body-lg); line-height: 1.5; }

.tool-box { background: var(--color-bone); border: 1.5px solid var(--color-ink); box-shadow: var(--shadow-2); padding: var(--space-6); }
.tool-form { display: flex; gap: var(--space-3); }
.tool-form .tf-field { flex: 1; display: flex; align-items: center; gap: var(--space-3); border: 1px solid rgba(26,29,26,0.30); background: var(--color-paper); padding: 0 var(--space-4); }
.tool-form .tf-field:focus-within { border: 1.5px solid var(--color-green); box-shadow: 0 0 0 3px rgba(51,102,51,0.18); }
.tool-form .tf-icon { flex: none; color: var(--color-green); }
.tool-form input { flex: 1; border: 0; background: transparent; font-family: var(--font-body); font-size: 17px; color: var(--color-ink); padding: 15px 0; outline: none; min-width: 0; }
.tool-form .btn { flex: none; }
.tool-hint { margin-top: var(--space-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--color-stone); }

#tool-result { margin-top: var(--space-6); }
#tool-result:empty { display: none; }
.result-card { background: var(--color-bone); border: var(--border-default); padding: var(--space-6); animation: rc-in 0.32s var(--ease-standard); }
@keyframes rc-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); }
.rc-badge { display: inline-flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--signal-success); }
.rc-badge .rc-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--signal-success); }
.rc-badge.amber { color: var(--signal-warning); } .rc-badge.amber .rc-dot { background: var(--signal-warning); }
.rc-badge.neutral { color: var(--color-stone); } .rc-badge.neutral .rc-dot { background: var(--color-stone); }
.rc-title { font-size: 27px; color: var(--color-ink); margin-top: var(--space-2); }
.rc-title .rc-zip { font-family: var(--font-mono); font-style: normal; font-size: 13px; letter-spacing: var(--tracking-wide); color: var(--color-stone); vertical-align: middle; margin-left: 6px; }
.rc-src { flex: none; font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-stone); text-align: right; padding-top: 4px; }

.rc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: rgba(26,29,26,0.10); border: 1px solid rgba(26,29,26,0.10); }
.rc-cell { background: var(--color-bone); padding: var(--space-4); display: flex; flex-direction: column; gap: 5px; }
.rc-cell.is-emph { background: var(--signal-success-tint); }
.rc-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-stone); display: flex; align-items: center; gap: 5px; }
.rc-star { color: var(--color-green); font-size: 7px; }
.rc-v { font-family: var(--font-serif); font-style: normal; font-weight: 600; font-size: 20px; color: var(--color-ink); line-height: 1.1; }
.rc-v.mono { font-family: var(--font-mono); font-weight: 500; font-size: 16px; }
.rc-cell.is-emph .rc-v { color: var(--color-green-deep); }
.rc-interlock { margin-top: var(--space-4); padding: var(--space-4); background: var(--color-mist); border-left: 3px solid var(--color-green); font-size: 13.5px; line-height: 1.5; color: var(--color-ink); display: flex; gap: 10px; }
.rc-interlock .rc-lock { color: var(--color-green); flex: none; }

/* nearby list */
.nb-controls { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); flex-wrap: wrap; }
.nb-ctl-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-stone); }
.nb-ctl-hint { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.02em; color: var(--color-stone); opacity: 0.8; }
.nb-seg { display: inline-flex; border: 1px solid rgba(26,29,26,0.25); }
.nb-rad { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; background: var(--color-bone); color: var(--color-stone); border: 0; border-right: 1px solid rgba(26,29,26,0.15); padding: 8px 13px; cursor: pointer; }
.nb-rad:last-child { border-right: 0; }
.nb-rad:hover { color: var(--color-ink); background: var(--color-paper); }
.nb-rad.active { background: var(--color-green); color: var(--color-bone); }
.nb-empty { padding: var(--space-6); text-align: center; color: var(--color-stone); font-size: 14px; }
.nb-list { list-style: none; margin: 0; padding: 0; border: 1px solid rgba(26,29,26,0.10); }
.nb-row { display: grid; grid-template-columns: 32px 1fr auto auto; align-items: center; gap: var(--space-4); padding: 11px var(--space-4); border-bottom: var(--border-hairline); }
.nb-row:last-child { border-bottom: 0; }
.nb-head { background: var(--color-mist); font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-stone); }
.nb-rank { font-family: var(--font-mono); font-size: 12px; color: var(--color-stone); text-align: center; }
.nb-name { font-family: var(--font-serif); font-style: normal; font-weight: 500; font-size: 17px; color: var(--color-ink); }
.nb-pop { font-size: 13px; color: var(--color-stone); text-align: right; }
.nb-dist { font-size: 14px; color: var(--color-green-deep); text-align: right; min-width: 62px; }
.nb-head .nb-pop, .nb-head .nb-dist, .nb-head .nb-name { font-family: var(--font-mono); font-weight: 400; font-size: 10px; }

.gh-block.gh-hero { border-style: solid; border-width: 1.5px; background: var(--signal-success-tint); }
.gh-block.gh-hero .gh-chip { font-size: 15px; padding: 7px 12px; }
.gh-block { margin-top: var(--space-5); border: 1px dashed rgba(51,102,51,0.45); background: rgba(51,102,51,0.04); padding: var(--space-5); }
.gh-top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.gh-label { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-green-deep); }
.gh-copy { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; background: transparent; border: 1px solid var(--color-green); color: var(--color-green); padding: 5px 10px; cursor: pointer; }
.gh-copy:hover { background: var(--color-green); color: var(--color-bone); }
.gh-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.gh-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; max-width: 380px; margin-left: auto; margin-right: auto; }
.gh-grid .gh-chip { display: flex; flex-direction: column; gap: 3px; text-align: center; padding: 8px 6px; }
.gh-grid .gh-dir { font-size: 8px; letter-spacing: var(--tracking-wide); color: var(--color-stone); }
.gh-grid .gh-chip.is-center { background: var(--color-green); border-color: var(--color-green); color: var(--color-bone); }
.gh-grid .gh-chip.is-center .gh-dir { color: rgba(255,255,255,0.75); }
.gh-chip { font-family: var(--font-mono); font-size: 13px; color: var(--color-green-deep); background: var(--color-bone); border: 1px solid rgba(51,102,51,0.3); padding: 5px 9px; }
.gh-note { margin-top: var(--space-3); font-size: 12.5px; line-height: 1.5; color: var(--color-stone); }

/* prompt states (ambiguous / not found / rate limit) */
.is-prompt { text-align: center; }
.is-prompt .rc-badge { justify-content: center; }
.is-prompt .rc-title { margin: var(--space-2) 0 var(--space-2); }
.rc-prompt-sub { color: var(--color-stone); font-size: var(--text-body); line-height: 1.5; max-width: 48ch; margin: 0 auto var(--space-5); }
.amb-list { display: grid; gap: var(--space-2); max-width: 460px; margin: 0 auto; text-align: left; }
.amb-opt { display: flex; align-items: center; gap: var(--space-3); background: var(--color-bone); border: var(--border-default); padding: var(--space-3) var(--space-4); cursor: pointer; text-align: left; }
.amb-opt:hover { border: 1.5px solid var(--color-ink); box-shadow: var(--shadow-1); }
.amb-city { font-size: 17px; color: var(--color-ink); }
.amb-sub { font-family: var(--font-mono); font-size: 11px; color: var(--color-stone); margin-left: auto; }
.amb-arrow { color: var(--color-green); font-family: var(--font-mono); }
.np-actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* skeletons */
.sk { display: block; background: linear-gradient(90deg, #f0f1f0 0%, #e4e6e4 30%, #f0f1f0 60%); background-size: 220% 100%; animation: sk 1.4s ease infinite; }
@keyframes sk { to { background-position: -220% 0; } }
.sk-badge { width: 90px; height: 11px; margin-bottom: 12px; }
.sk-title { width: 200px; height: 24px; }
.sk-k { width: 55%; height: 9px; margin-bottom: 8px; } .sk-v { width: 80%; height: 17px; }

/* upsell — natural next step, appears live under a result */
.tool-upsell { margin-top: var(--space-6); border: 1.5px solid var(--color-green); background: var(--signal-success-tint); padding: var(--space-6); display: grid; grid-template-columns: 1fr auto; gap: var(--space-5); align-items: center; opacity: 0.55; transition: opacity var(--duration-base); }
.tool-upsell.is-live { opacity: 1; }
.tool-upsell .up-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-green-deep); display: block; margin-bottom: 6px; }
.tool-upsell h3 { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 24px; color: var(--color-ink); line-height: 1.1; }
.tool-upsell p { margin-top: 6px; font-size: 13.5px; color: var(--color-stone); max-width: 46ch; }
.tool-upsell .up-buy { text-align: right; }
.tool-upsell .up-price { font-family: var(--font-mono); font-size: 13px; color: var(--color-green-deep); display: block; margin-bottom: var(--space-2); }

/* secondary — two clean choices */
.tool-secondary { margin-top: var(--space-5); display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.sec-choice { display: flex; align-items: center; gap: var(--space-4); background: var(--color-paper); border: var(--border-default); padding: var(--space-5); text-decoration: none; transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
.sec-choice:hover { border: 1.5px solid var(--color-ink); box-shadow: var(--shadow-1); text-decoration: none; }
.sec-choice .sec-ic { width: 42px; height: 42px; flex: none; border: 1.5px solid var(--color-green); color: var(--color-green); display: grid; place-items: center; }
.sec-choice .sec-body { flex: 1; min-width: 0; }
.sec-choice .sec-t { display: block; font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 19px; color: var(--color-ink); }
.sec-choice .sec-d { display: block; margin-top: 3px; font-size: 12.5px; color: var(--color-stone); line-height: 1.45; }
.sec-choice .sec-go { flex: none; font-family: var(--font-mono); color: var(--color-green); font-size: 18px; }

/* differentiator strip */
.tool-diff { border-top: var(--border-hairline); border-bottom: var(--border-hairline); background: var(--color-mist); margin-top: var(--space-8); }
.tool-diff .diff-inner { max-width: 960px; margin: 0 auto; padding: var(--space-5) var(--space-6); display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-5); }
.tool-diff .df { display: flex; flex-direction: column; gap: 5px; }
.tool-diff .df b { font-family: var(--font-body); font-weight: 600; font-size: 14px; color: var(--color-ink); }
.tool-diff .df span { font-size: 12px; color: var(--color-stone); line-height: 1.4; }
.tool-diff .df .df-ic { color: var(--color-green); margin-bottom: 2px; }

/* content slot (MVP stub — CMO pass later) */
.tool-content { max-width: 760px; margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-9); }
.tool-content h2 { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 28px; color: var(--color-ink); }
.tool-content .cs-faq { margin-top: var(--space-5); }
.tool-content .cs-q { border-top: var(--border-hairline); padding: var(--space-4) 0; }
.tool-content .cs-q h3 { font-size: 16px; color: var(--color-ink); }
.tool-content .cs-q p { margin-top: 6px; font-size: 14px; color: var(--color-stone); line-height: 1.55; }

/* tools hub (HO-D) — card grid + $29 band on /tools */
/* .tool-page's own bottom padding + .tool-head's own bottom margin + the next
   .section's top padding would otherwise stack to ~192px of dead air between the
   intro copy and the cards — collapse those three down to one deliberate gap. */
.tools-hero.tool-page { padding-bottom: 0; }
.tools-hero .tool-head { margin-bottom: 0; }
.section.tools-cards { padding-top: var(--space-8); padding-bottom: var(--space-7); }
.section.tools-band { padding-top: var(--space-7); }
.tools-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); }
.tool-card { position: relative; display: flex; flex-direction: column; gap: var(--space-4); background: var(--color-paper); border: var(--border-default); padding: var(--space-6); transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
.tool-card:hover { border: 1.5px solid var(--color-ink); box-shadow: var(--shadow-1); }
.tool-card h2 { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 22px; color: var(--color-ink); }
.tool-card h2 a { color: inherit; }
.tool-card h2 a:hover { color: var(--color-green-deep); text-decoration: none; }
/* Stretched link: the title anchor's ::after covers the whole card (including the
   whitespace), so the entire box is clickable, not just the visible text — the same
   area .tool-card:hover already reacts to. .tc-cta sits above it (z-index) so it
   keeps its own hover color and remains individually focusable/clickable. */
.tool-card h2 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.tc-blurb { flex: 1; margin: 0; color: var(--color-stone); font-size: var(--text-body-sm); line-height: 1.5; }
.tc-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.tc-chip { font-family: var(--font-mono); font-size: 11px; color: var(--color-green-deep); background: var(--signal-success-tint); border: 1px solid rgba(51,102,51,0.25); padding: 4px 9px; }
.tc-chip-label { font-family: var(--font-mono); font-size: 11px; color: var(--color-stone); }
.tc-cta { position: relative; z-index: 2; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-green); }
.tc-cta:hover { color: var(--color-green-deep); text-decoration: none; }

.tools-band .band-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; max-width: 960px; margin: 0 auto; }
.tools-band p { margin: 0; max-width: 52ch; font-size: var(--text-body-lg); line-height: 1.5; color: var(--color-ink); }

@media (max-width: 720px) {
  .tool-page { padding: var(--space-7) var(--space-4) var(--space-6); }
  .tool-form { flex-direction: column; }
  .tool-form .btn { width: 100%; }
  .rc-grid { grid-template-columns: repeat(2, 1fr); }
  .rc-head { flex-direction: column; gap: var(--space-2); }
  .rc-src { text-align: left; }
  .tool-upsell { grid-template-columns: 1fr; }
  .tool-upsell .up-buy { text-align: left; }
  .tool-secondary { grid-template-columns: 1fr; }
  .tool-diff .diff-inner { grid-template-columns: 1fr 1fr; }
  .nb-row { grid-template-columns: 24px 1fr auto; }
  .nb-pop { display: none; }
  .nb-head .nb-pop { display: none; }
  .tools-grid { grid-template-columns: 1fr; }
  .tools-band .band-inner { flex-direction: column; align-items: flex-start; }
}

/* guides hub (/guides) */
.guides { max-width: 1080px; margin: 0 auto; padding: var(--space-9) var(--space-6) var(--space-8); }
.gi-head { max-width: 62ch; margin-bottom: var(--space-8); }
.gi-head .eyebrow { display: block; margin-bottom: var(--space-3); }
.gi-head h1 { font-family: var(--font-serif); font-style: italic; font-weight: 500; letter-spacing: var(--tracking-tight); font-size: clamp(34px, 5vw, 52px); line-height: 1.03; color: var(--color-ink); }
.gi-head p { margin-top: var(--space-4); color: var(--color-stone); font-size: var(--text-body-lg); line-height: 1.5; }

.cluster { margin-bottom: var(--space-8); }
.cluster-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-5); padding-bottom: var(--space-3); border-bottom: var(--border-default); }
.cluster-head h2 { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 26px; color: var(--color-ink); }
.cluster-head .ch-tool { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-green); text-decoration: none; }
.cluster-head .ch-tool:hover { color: var(--color-green-deep); }

.g-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-4); }
.g-card { display: flex; flex-direction: column; background: var(--color-bone); border: var(--border-default); padding: var(--space-6); text-decoration: none; transition: border-color var(--duration-fast), box-shadow var(--duration-fast), transform var(--duration-fast); }
.g-card:hover { border: 1.5px solid var(--color-ink); box-shadow: var(--shadow-2); transform: translateY(-2px); text-decoration: none; }
.g-card .gc-kicker { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-stone); }
.g-card h3 { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 22px; color: var(--color-ink); margin-top: var(--space-2); line-height: 1.15; }
.g-card p { margin-top: var(--space-3); font-size: var(--text-body-sm); color: var(--color-stone); line-height: 1.5; flex: 1; }
.g-card .gc-foot { margin-top: var(--space-4); display: flex; align-items: center; justify-content: space-between; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-green); }
.g-card .gc-min { color: var(--color-stone); }

.gi-cta { margin-top: var(--space-6); border: 1.5px solid var(--color-green); background: var(--signal-success-tint); padding: var(--space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.gi-cta p { font-size: var(--text-body); color: var(--color-ink); max-width: 54ch; }
.gi-cta p strong { font-weight: 600; }

/* guide article (/guides/{slug}) */
.article { max-width: 1080px; margin: 0 auto; padding: var(--space-8) var(--space-6) var(--space-9); display: grid; grid-template-columns: minmax(0,1fr) 320px; gap: var(--space-8); align-items: start; }
.art-main { min-width: 0; }
.art-eyebrow { display: block; margin-bottom: var(--space-3); }
.art-h1 { font-family: var(--font-serif); font-style: italic; font-weight: 500; letter-spacing: var(--tracking-tight); font-size: clamp(32px, 4.4vw, 46px); line-height: 1.05; color: var(--color-ink); }
.art-standfirst { margin-top: var(--space-4); font-size: var(--text-body-lg); line-height: 1.55; color: var(--color-stone); max-width: 62ch; }
.art-meta { margin-top: var(--space-4); display: flex; gap: var(--space-4); flex-wrap: wrap; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-stone); }
.lead-cta { margin: var(--space-7) 0; border: 1.5px solid var(--color-green); background: var(--signal-success-tint); padding: var(--space-6); display: grid; grid-template-columns: 1fr auto; gap: var(--space-5); align-items: center; }
.lead-cta .lc-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-green-deep); display: block; margin-bottom: 6px; }
.lead-cta h2 { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 24px; color: var(--color-ink); line-height: 1.1; }
.lead-cta p { margin-top: 6px; font-size: 13.5px; color: var(--color-stone); max-width: 46ch; }
.lead-cta .lc-actions { display: flex; flex-direction: column; gap: var(--space-2); }
.lead-cta .lc-sub { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-stone); text-align: center; }
.prose { font-size: var(--text-body-lg); line-height: 1.7; color: var(--color-ink); }
.prose > * + * { margin-top: var(--space-5); }
.prose h2 { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 28px; letter-spacing: var(--tracking-snug); color: var(--color-ink); margin-top: var(--space-8); }
.prose a { color: var(--signal-link); text-decoration: underline; text-underline-offset: 2px; }
.prose a:hover { color: var(--color-green); }
.prose ol, .prose ul { padding-left: 1.3em; }
.prose ol > li, .prose ul > li { margin-top: var(--space-2); }
.prose ul ul { margin-top: var(--space-2); }
.prose code { font-family: var(--font-mono); font-size: 0.86em; background: var(--color-mist); padding: 2px 6px; color: var(--color-green-deep); }
.prose pre { background: var(--color-ink); color: var(--color-bone); padding: var(--space-5); overflow-x: auto; font-family: var(--font-mono); font-size: 13px; line-height: 1.6; }
.prose pre code { background: none; color: inherit; padding: 0; }
.prose .cap { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-stone); margin-bottom: -8px; }
.disclaimer { margin-top: var(--space-6); border: 1px solid rgba(26,29,26,0.14); background: var(--color-paper); padding: var(--space-4) var(--space-5); display: flex; gap: 10px; font-size: 12.5px; line-height: 1.5; color: var(--color-stone); }
.disclaimer .di-ic { flex: none; color: var(--color-stone); }
.disclaimer strong { color: var(--color-ink); font-weight: 600; }
.art-next { margin-top: var(--space-6); font-size: var(--text-body); }
.aside { display: flex; flex-direction: column; gap: var(--space-4); }
.xmod { border: var(--border-default); background: var(--color-bone); }
.xmod .xm-head { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-stone); padding: var(--space-4) var(--space-5); border-bottom: var(--border-hairline); }
.xlink { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: var(--border-hairline); text-decoration: none; }
.xlink:last-child { border-bottom: 0; }
.xlink:hover { background: var(--color-paper); text-decoration: none; }
.xlink .xl-ic { width: 34px; height: 34px; flex: none; border: 1.5px solid var(--color-green); color: var(--color-green); display: grid; place-items: center; }
.xlink .xl-t { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 16px; color: var(--color-ink); display: block; }
.xlink .xl-d { font-size: 12px; color: var(--color-stone); }
.xlink .xl-go { margin-left: auto; font-family: var(--font-mono); color: var(--color-green); }
.xmod.buy { border-color: var(--color-green); }
.xmod.buy .xm-body { padding: var(--space-5); }
.xmod.buy .xb-price { font-family: var(--font-mono); font-size: 12px; color: var(--color-green-deep); display: block; margin-bottom: var(--space-3); }
.xmod.buy .xb-name { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 19px; color: var(--color-ink); }
.xmod.buy .xb-d { font-size: 12.5px; color: var(--color-stone); margin: 6px 0 var(--space-4); }

/* faq hub + faq content page (/faq, /faq/{slug}) */
.faq { max-width: 980px; margin: 0 auto; padding: var(--space-9) var(--space-6) var(--space-8); display: grid; grid-template-columns: 250px minmax(0,1fr); gap: var(--space-8); }
.faq-head { grid-column: 1 / -1; max-width: 68ch; margin-bottom: var(--space-4); }
.faq-head .eyebrow { display: block; margin-bottom: var(--space-3); }
.faq-head h1 { font-family: var(--font-serif); font-style: italic; font-weight: 500; letter-spacing: var(--tracking-tight); font-size: clamp(32px, 4.6vw, 46px); line-height: 1.05; color: var(--color-ink); }
.faq-head p { margin-top: var(--space-4); color: var(--color-stone); font-size: var(--text-body-lg); line-height: 1.55; }
.faq-toc-inner { position: sticky; top: 84px; }
.faq-toc .toc-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-wider); text-transform: uppercase; color: var(--color-stone); display: block; margin-bottom: var(--space-3); }
.faq-toc a { display: block; padding: 8px 0; font-size: 13.5px; line-height: 1.4; color: var(--color-ink); text-decoration: none; border-bottom: var(--border-hairline); }
.faq-toc a:hover { color: var(--color-green); }
.faq-body { min-width: 0; }
.qa { padding: var(--space-6) 0; border-bottom: var(--border-hairline); scroll-margin-top: 80px; }
.qa:first-child { padding-top: 0; }
.qa h2 { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: 24px; color: var(--color-ink); line-height: 1.15; display: flex; align-items: baseline; gap: 10px; }
.qa h2 .qa-anchor { font-family: var(--font-mono); font-style: normal; font-size: 14px; color: var(--color-stone); opacity: 0; text-decoration: none; transition: opacity var(--duration-fast); }
.qa:hover h2 .qa-anchor, .qa h2 .qa-anchor:focus { opacity: 1; }
.qa h2 .qa-anchor:hover { color: var(--color-green); }
.qa p { margin-top: var(--space-3); font-size: var(--text-body); line-height: 1.65; color: var(--color-ink); max-width: 66ch; }
.qa code { font-family: var(--font-mono); font-size: 0.85em; background: var(--color-mist); padding: 2px 6px; color: var(--color-green-deep); }
.qa a { color: var(--signal-link); text-decoration: underline; text-underline-offset: 2px; }
.qa a:hover { color: var(--color-green); }
.qa em { font-style: italic; }
.faq-foot { grid-column: 1 / -1; margin-top: var(--space-4); border: 1.5px solid var(--color-green); background: var(--signal-success-tint); padding: var(--space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.faq-foot p { font-size: var(--text-body); color: var(--color-ink); max-width: 52ch; }
.faq-foot p strong { font-weight: 600; }
.faq-src { grid-column: 1 / -1; margin-top: var(--space-5); font-size: 12.5px; line-height: 1.6; color: var(--color-stone); max-width: 74ch; }

@media (max-width: 900px) {
  .article { grid-template-columns: 1fr; }
  .lead-cta { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .faq { grid-template-columns: 1fr; }
  .faq-toc-inner { position: static; border: var(--border-hairline); padding: var(--space-4); background: var(--color-paper); }
}
@media (max-width: 700px) {
  .g-grid { grid-template-columns: 1fr; }
}
@media (max-width: 420px) { .rc-grid { grid-template-columns: 1fr; } }