/* marketing-mono.css - Docket Mono marketing-site component layer.

   Load order on every public marketing page (index, pricing, digest sample,
   coverage, terms, contact, 404): docket-mono.css FIRST (tokens + dashboard
   atoms), this file SECOND. No :root/token block lives here - every color is a
   var(--token) already declared in docket-mono.css. `grep -nE "#[0-9a-fA-F]{3,6}"
   web/assets/marketing-mono.css` must stay empty.

   docket-mono.css already defines .btn/.btn.ghost/.wrap/.eyebrow/.stamp for the
   dashboard/app surface. Where the marketing surface only needs a handful of
   properties to differ, this file overrides just those properties (see "Base
   overrides" below) instead of re-declaring the whole rule - the dashboard hover/
   active/focus-visible/reduced-motion states on .btn carry over unchanged.

   .sec-head and .county-grid are reused below with a DIFFERENT shape than their
   docket-mono.css (dashboard) counterparts. Safe: marketing pages never load the
   dashboard markup that depends on the dashboard shape, and vice versa. */

* { box-sizing: border-box; }
a { text-decoration: none; }

/* ============================================================
   Base overrides (docket-mono.css already owns these classes -
   only the marketing-specific deltas are re-declared here)
   ============================================================ */
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 28px; }
.eyebrow { font-weight: 600; line-height: 1; }
.btn { display: inline-block; text-decoration: none; border-radius: 6px; padding: 14px 18px; }

/* ============================================================
   Nav (every marketing page)
   ============================================================ */
header.nav { position: sticky; top: 0; z-index: 10; background: var(--surface);
  border-bottom: 1.5px solid var(--line-strong); }
.nav-row { display: flex; align-items: center; gap: 12px; max-width: 1080px;
  margin: 0 auto; padding: 13px 28px; }
.brand { display: flex; align-items: center; gap: 10px; }
.brand .wm { font: 700 15px/1 var(--sans); letter-spacing: -.01em; }
.nav-links { margin-left: auto; display: flex; gap: 18px; align-items: center;
  font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); }
.nav-links a[aria-current="page"] { color: var(--ink); }
.nav-cta { background: var(--ink); color: var(--stamp-ink); padding: 9px 12px;
  border-radius: 5px; box-shadow: 2px 2px 0 var(--stamp); }

/* ============================================================
   Hero (homepage) + screenshot frame (also reused as the base for
   the digest .email-frame below - same border/radius/shadow pattern)
   ============================================================ */
.hero { padding: 52px 0 60px; }
.hero-grid { display: grid; grid-template-columns: .92fr 1.08fr; gap: 34px; align-items: center; }
.hero h1 { font: 700 44px/1.06 var(--sans); letter-spacing: -.025em; margin: 14px 0 16px; }
.hero .lede { font-size: 16.5px; line-height: 1.62; color: var(--ink-soft); margin: 0 0 24px; max-width: 46ch; }
.hero-actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.hero .micro { font: 600 11px/1 var(--mono); letter-spacing: .04em; text-transform: uppercase;
  color: var(--faint); margin-top: 20px; }

.frame, .email-frame { border: 1.5px solid var(--line-strong); border-radius: 9px;
  overflow: hidden; box-shadow: 6px 6px 0 var(--line-strong); background: var(--surface); }
.frame img, .email-frame img { display: block; width: 100%; height: auto; }
.chrome { display: flex; align-items: center; gap: 7px; padding: 9px 12px;
  background: var(--surface-2); border-bottom: 1.5px solid var(--line-strong); }
.chrome .dot { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid var(--line-strong); }
.chrome .addr { margin-left: 8px; font: 600 10px/1 var(--mono); color: var(--muted);
  background: var(--surface); border: 1px solid var(--line); border-radius: 4px; padding: 5px 10px; }
/* the email split-view frame runs taller than the hero screenshot frame */
.feat .email-frame { max-height: 520px; }
.email-head { padding: 11px 14px; background: var(--surface-2);
  border-bottom: 1.5px solid var(--line-strong); font: 600 10.5px/1.7 var(--mono); color: var(--muted); }
.email-head b { color: var(--ink); }

/* ============================================================
   Section scaffold (page header bands + generic content sections)
   ============================================================ */
section { padding: 56px 0; border-top: 1.5px solid var(--line); }
/* docket-mono.css's .sec-head is a flex row with a border-bottom (dashboard rail
   header). Marketing wants a plain stacked block (eyebrow/h2/p) - neutralize every
   bled-through structural property instead of relying on cascade order. */
.sec-head { max-width: 640px; margin-bottom: 28px; display: block; align-items: normal;
  gap: 0; border-bottom: none; padding-bottom: 0; flex-wrap: nowrap; row-gap: normal; }
.sec-head h2 { font: 700 30px/1.14 var(--sans); letter-spacing: -.02em; margin: 10px 0 8px; }
.sec-head p { color: var(--ink-soft); font-size: 15.5px; margin: 0; }

/* per-page header bands (each page has exactly one) */
.phead { padding: 48px 0 8px; }
.phead h1 { font: 700 36px/1.1 var(--sans); letter-spacing: -.025em; margin: 12px 0 10px; }
.phead p { color: var(--ink-soft); font-size: 16px; margin: 0; max-width: 60ch; }

.dhead { padding: 46px 0 8px; max-width: 680px; }
.dhead h1 { font: 700 36px/1.1 var(--sans); letter-spacing: -.025em; margin: 12px 0 12px; }
.dhead p { color: var(--ink-soft); font-size: 16px; margin: 0; }

.chead { padding: 46px 0 8px; max-width: 680px; }
.chead h1 { font: 700 38px/1.08 var(--sans); letter-spacing: -.025em; margin: 12px 0 12px; }
.chead p { color: var(--ink-soft); font-size: 16px; margin: 0; }

.lhead { padding: 48px 0 6px; }
.lhead h1 { font: 700 32px/1.14 var(--sans); letter-spacing: -.02em; margin: 12px 0 12px; max-width: 20ch; }
.lhead .effective { font: 600 12px/1.6 var(--mono); color: var(--ink-soft); max-width: 70ch; }

/* ============================================================
   Cards - "what we monitor" (homepage)
   ============================================================ */
.card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.mcard { background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 8px;
  box-shadow: var(--shadow-hard); padding: 16px 16px 15px; }
.mcard .tag { font: 600 10px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--stamp); border: 1px solid var(--stamp); border-radius: 3px; padding: 3px 6px;
  display: inline-block; }
.mcard h3 { font: 700 16px/1.2 var(--sans); margin: 12px 0 6px; }
.mcard p { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); margin: 0; }

/* stat band (homepage) */
.stat-band { display: grid; grid-template-columns: repeat(3, 1fr); border: 1.5px solid var(--line-strong);
  border-radius: 8px; box-shadow: var(--shadow-hard); background: var(--surface); overflow: hidden; }
.stat { padding: 24px 22px; border-right: 1.5px solid var(--line); }
.stat:last-child { border-right: none; }
.stat .num { font: 700 30px/1 var(--mono); letter-spacing: -.02em; }
.stat .lbl { font: 600 10.5px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase;
  color: var(--muted); margin-top: 8px; }

/* email feature split (homepage) */
.feat { display: grid; grid-template-columns: 1fr .78fr; gap: 40px; align-items: center; }
.feat ul { list-style: none; padding: 0; margin: 18px 0 0; }
.feat li { font-size: 15px; color: var(--ink-soft); padding: 8px 0 8px 22px; position: relative; }
.feat li::before { content: ""; position: absolute; left: 0; top: 14px; width: 9px; height: 9px;
  background: var(--stamp); border-radius: 2px; }

/* audience cards (homepage) */
.aud-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.acard { background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 8px;
  box-shadow: var(--shadow-hard); padding: 16px; }
.acard .ah { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.acard .av { width: 34px; height: 34px; display: grid; place-items: center; background: var(--ink);
  color: var(--stamp-ink); font: 800 14px/1 var(--mono); border-radius: 6px; }
.acard .an { font: 700 15px/1 var(--sans); display: block; }
.acard .as { font: 600 10px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); margin-top: 4px; display: block; }
.acard p { font-size: 13.5px; line-height: 1.5; color: var(--ink-soft); margin: 0; }

/* final CTA (homepage, digest, coverage) */
.final { text-align: center; background: var(--surface); border: 1.5px solid var(--line-strong);
  border-radius: 10px; box-shadow: var(--shadow-hard); padding: 44px 28px; }
.final h2 { font: 700 30px/1.14 var(--sans); letter-spacing: -.02em; margin: 0 0 10px; }
.final p { color: var(--ink-soft); margin: 0 0 22px; }
.final .signin { font: 600 12px/1 var(--mono); color: var(--muted); margin-top: 16px; }
.final .signin a { border-bottom: 1px solid var(--muted); }

/* ============================================================
   Tier cards (pricing)
   ============================================================ */
.tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding: 36px 0 8px; align-items: start; }
.tier { background: var(--surface); border: 1.5px solid var(--line-strong); border-radius: 9px;
  box-shadow: var(--shadow-hard); padding: 20px 18px; display: flex; flex-direction: column;
  min-height: 100%; position: relative; }
.tier.featured { border-width: 2px; border-color: var(--stamp); }
.clearance { font: 600 9.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.tier h3 { font: 700 19px/1.1 var(--sans); margin: 10px 0 8px; }
.price { font: 700 30px/1 var(--mono); letter-spacing: -.02em; margin-bottom: 4px; }
.price span { font: 600 11px/1 var(--mono); color: var(--muted); letter-spacing: 0; }
/* reuses docket-mono.css's .stamp (color/border/rotate/weight); only the ribbon
   position + smaller size are added here for the tier-card "Recommended" flag */
.tier .stamp { position: absolute; top: -11px; right: 14px; font-size: 9px; padding: 3px 7px;
  background: var(--surface); opacity: 1; }
.tier ul { list-style: none; padding: 0; margin: 16px 0 18px; flex: 1; }
.tier li { font-size: 13px; line-height: 1.45; color: var(--ink-soft); padding: 6px 0 6px 20px; position: relative; }
.tier li::before { content: "\2713"; position: absolute; left: 0; top: 6px; color: var(--stamp);
  font-weight: 700; font-size: 12px; }
.plan-note { font: 600 10px/1.4 var(--mono); color: var(--faint); margin: 0 0 12px; }
/* pricing CTA buttons stretch to the tier-card width; scoped so it doesn't leak
   onto every .btn sitewide */
.tier .btn { width: 100%; text-align: center; padding: 13px 16px; }

.billing-strip { margin: 26px 0 6px; border: 1.5px solid var(--line-strong); border-radius: 8px;
  background: var(--surface-2); padding: 14px 18px; font: 600 11.5px/1.5 var(--mono); color: var(--muted);
  letter-spacing: .02em; }
.billing-strip b { color: var(--ink); }

/* ============================================================
   Contact form (pricing "talk to us" + the standalone contact page)
   ============================================================ */
section.talk { margin-top: 40px; }
.talk h2 { font: 700 26px/1.15 var(--sans); letter-spacing: -.02em; margin: 10px 0 8px; }
.talk p { color: var(--ink-soft); margin: 0 0 22px; max-width: 60ch; }
form.contact { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; max-width: 680px; }
form.contact label { display: block; font: 600 10px/1 var(--mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
form.contact .full { grid-column: 1 / -1; }
form.contact input, form.contact textarea { width: 100%; font: 400 15px/1.4 var(--sans); padding: 10px 12px;
  background: var(--surface-2); border: 1.5px solid var(--line-strong); border-radius: 5px; color: var(--ink); }
form.contact textarea { min-height: 110px; resize: vertical; }
form.contact .submit { grid-column: 1 / -1; }
form.contact button { font: 700 12px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase;
  background: var(--ink); color: var(--stamp-ink); border: 1.5px solid var(--ink); border-radius: 6px;
  padding: 13px 18px; box-shadow: var(--shadow-hard); cursor: pointer; }
form.contact button:disabled { opacity: .6; cursor: not-allowed; }
form.contact input[aria-invalid="true"], form.contact textarea[aria-invalid="true"] { border-color: var(--crit); }
form.contact.is-sent label, form.contact.is-sent .submit { display: none; }
.form-note { grid-column: 1 / -1; font: 600 10.5px/1.5 var(--mono); color: var(--faint); }

/* ============================================================
   Sample digest split (digest page)
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr .86fr; gap: 40px; align-items: start; padding: 36px 0 8px; }
.side h2 { font: 700 22px/1.2 var(--sans); letter-spacing: -.02em; margin: 2px 0 14px; }
.anno { list-style: none; padding: 0; margin: 0 0 26px; }
.anno li { padding: 12px 0; border-top: 1px solid var(--line); }
.anno li:first-child { border-top: none; }
.anno .k { font: 700 11px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--stamp); }
.anno .v { font-size: 14px; color: var(--ink-soft); margin-top: 6px; line-height: 1.5; }
.covers { border: 1.5px solid var(--line-strong); border-radius: 8px; background: var(--surface);
  box-shadow: var(--shadow-hard); padding: 18px 18px 16px; }
.covers h3 { font: 700 14px/1 var(--sans); margin: 0 0 12px; }
.covers ul { list-style: none; padding: 0; margin: 0; }
.covers li { font-size: 13px; color: var(--ink-soft); padding: 7px 0 7px 20px; position: relative; line-height: 1.45; }
.covers li::before { content: "\2713"; position: absolute; left: 0; top: 7px; color: var(--stamp);
  font-weight: 700; font-size: 12px; }
.sample-note { font: 600 10.5px/1 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint);
  margin-top: 14px; }

/* ============================================================
   Coverage map + legend + county list (coverage page)
   The per-county <path data-county="..."> fill overrides (which counties are
   live) are page content driven by the jurisdiction registry, not design system -
   out of scope here; built by the coverage page task.
   ============================================================ */
.map-card { border: 1.5px solid var(--line-strong); border-radius: 10px; background: var(--surface);
  box-shadow: var(--shadow-hard); padding: 22px 22px 18px; margin-top: 30px; }
.map-card svg { width: 100%; height: auto; display: block; }
.wa-county { fill: var(--surface-2); stroke: var(--line-strong); stroke-width: 1; stroke-linejoin: round; }
/* .is-live is toggled by coverage-meta.js per county from the /api/meta live
   flag - never hardcode which counties are shaded here (fail-closed: a county
   absent from /api/meta or a failed fetch stays the default neutral fill). */
.wa-county.is-live { fill: var(--stamp); }
.legend { display: flex; gap: 22px; align-items: center; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid var(--line); }
.legend span { display: inline-flex; align-items: center; gap: 8px; font: 600 11px/1 var(--mono);
  letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.legend .sw { width: 16px; height: 16px; border: 1.5px solid var(--line-strong); border-radius: 3px; }
.legend .sw.live { background: var(--stamp); }
.legend .sw.none { background: var(--surface-2); }
/* marketing county-grid (a plain text list) - a different shape than
   docket-mono.css's dashboard .county-grid (a card grid); safe, the two surfaces
   never load together. margin-top reset to 0: docket-mono.css's 22px top margin
   is a dashboard-card-grid spacing choice, not the marketing list's; the
   preceding heading owns its own margin-bottom here. */
.county-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 18px; margin-top: 0; }
.county-grid span { font: 600 13px/1.9 var(--mono); color: var(--ink); border-bottom: 1px solid var(--line);
  padding: 2px 0; }

/* ============================================================
   Legal reading column (terms, privacy)
   ============================================================ */
.read { max-width: 760px; }
.clauses { padding: 30px 0 10px; }
.clause { padding: 22px 0; border-top: 1.5px solid var(--line); max-width: 760px; }
.clause:first-child { border-top: none; }
.clause h2 { font: 700 17px/1.2 var(--sans); letter-spacing: -.01em; margin: 0 0 8px; }
.clause p { font-size: 15px; line-height: 1.72; color: var(--ink-soft); margin: 0; max-width: 72ch; }
.clause a { border-bottom: 1px solid var(--muted); }

/* ============================================================
   404
   ============================================================ */
.notfound { display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 80px 28px; min-height: 60vh; }
.stamp404 { display: inline-block; font: 700 13px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--stamp); border: 2.5px solid var(--stamp); border-radius: 6px; padding: 10px 16px; transform: rotate(-4deg); }
.notfound h1 { font: 700 40px/1.08 var(--sans); letter-spacing: -.025em; margin: 26px 0 12px; }
.notfound p { color: var(--ink-soft); font-size: 16px; margin: 0 auto 28px; max-width: 44ch; }
.actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* ============================================================
   Footer (every marketing page)
   ============================================================ */
footer { border-top: 1.5px solid var(--line-strong); background: var(--surface); margin-top: 0; }
.foot-row { display: flex; align-items: center; justify-content: space-between; padding: 22px 0;
  flex-wrap: wrap; gap: 12px; }
.foot-brand { font: 700 13px/1 var(--sans); }
.foot-links { display: flex; gap: 18px; font: 600 10px/1 var(--mono); letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); }
.foot-disc { font-size: 11.5px; color: var(--faint); line-height: 1.6; padding-bottom: 18px; max-width: 80ch; }
.foot-legal { display: flex; justify-content: space-between; font: 600 10px/1 var(--mono); color: var(--faint);
  padding-bottom: 24px; flex-wrap: wrap; gap: 8px; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 900px) { .tiers { grid-template-columns: 1fr 1fr; } }
@media (max-width: 860px) { .split { grid-template-columns: 1fr; } .dhead h1 { font-size: 29px; } }
@media (max-width: 820px) {
  .hero-grid, .feat { grid-template-columns: 1fr; }
  .card-grid, .aud-grid, .stat-band { grid-template-columns: 1fr; }
  .stat { border-right: none; border-bottom: 1.5px solid var(--line); }
  .hero h1 { font-size: 34px; }
}
@media (max-width: 720px) { .county-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) {
  .tiers { grid-template-columns: 1fr; }
  form.contact { grid-template-columns: 1fr; }
  .phead h1 { font-size: 29px; }
  .lhead h1 { font-size: 26px; }
  .notfound h1 { font-size: 31px; }
}
/* Narrow-screen nav: the brand wordmark plus four controls cannot share one
   319px row, so wrap to two rows (brand, then links) and let the links wrap
   internally. Guarantees no horizontal overflow down to 320px. */
@media (max-width: 560px) {
  .nav-row { flex-wrap: wrap; row-gap: 10px; padding: 12px 18px; }
  .nav-links { margin-left: 0; width: 100%; flex-wrap: wrap; gap: 12px 16px; }
}