/* oddly broadsheet layer. Visual-signature build, phase 1 (2026-06-12).
 *
 * The shared editorial-broadsheet system for the PUBLIC marketing pages
 * (landing, /pricing, /what-is-oddly, /faq). One layer, three jobs:
 *
 *   1. Marketing token aliases. The short names the landing's editorial
 *      CSS established (--cream, --navy, --serif ...) defined ONCE here,
 *      sourced from the locked 52.0a contract (/_shared/oddly-tokens.css)
 *      wherever an exact token exists. Pages keep layout-only CSS and
 *      reference these vars; no page declares its own font or color value.
 *   2. The masthead nameplate (PR #186), generalized so every public page
 *      carries it: full-size on the landing, --compact on subpages.
 *   3. The signature primitives: dollar hero, evidence block, read-only
 *      seal, same-data-same-answer. Reusable components, deployed across
 *      the phase-1 surfaces.
 *
 * Anti-slop rules enforced by this sheet: sharp corners (radius 0 on
 * surfaces), hairline rules over shadows, tabular numerals on every
 * figure, ink on cream, teal as THE accent, gold sparingly.
 *
 * Load order on a page: oddly-chrome.css, oddly-tokens.css, then this.
 */

/* Fraunces, self-hosted (visual P1.5). Two variable files (upright +
 * italic), latin subset, weight range 400-600 with the optical-size axis,
 * served from /_shared/fonts like the dashboard's Space Grotesk: no
 * third-party font roundtrip on the marketing surface. Pages keep Google
 * Fonts for Inter only. */
@font-face {
  font-family: "Fraunces";
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/_shared/fonts/fraunces-latin-var.woff2") format("woff2");
}
@font-face {
  font-family: "Fraunces";
  font-style: italic;
  font-weight: 400 600;
  font-display: swap;
  src: url("/_shared/fonts/fraunces-italic-latin-var.woff2") format("woff2");
}

:root {
  /* exact matches sourced from the locked contract */
  --cream: var(--oddly-canvas, #FAFAF7);
  --navy: var(--oddly-ink, #1A1A2E);
  --teal: var(--oddly-teal, #2C7873);
  --gold: var(--oddly-gold, #B08D57);
  /* marketing-surface values with no 52.0a equivalent (kept byte-identical
   * to the shipped landing palette so nothing shifts) */
  --navy-soft: #4a4860;
  --teal-deep: #1f5f5b;
  --gold-deep: #8a6d3f;
  --loss: #b3261e;
  --line: #d8d3c4;            /* warm hairline on cream */
  --serif: var(--oddly-font-serif, Georgia, "Times New Roman", serif);
  --sans: var(--oddly-font-sans, -apple-system, sans-serif);
  --mono: var(--oddly-text-mono, ui-monospace, Menlo, monospace);

  /* ============================================================
   * FLOW FOUNDATION (OEG-BRIEF-2026-FLOW-01, 2026-06-23). The
   * system that makes a marketing page read as ONE continuous
   * surface instead of stacked compartments. Tokens here; the
   * feather + rhythm utilities below. Consumed first by the
   * landing, then by the marketing-page rollouts that block on
   * this foundation.
   *
   * USAGE RULES (locked):
   *  - cream is the one canvas. Zones shift only between cream-0/1/2,
   *    never on a hard line. navy is PUNCTUATION (at most twice per
   *    page, always feathered). teal is the single ACTION + emphasis
   *    accent. gold is SIGNATURE only (the mark; one optional hairline).
   *  - one colour per type role (below). no raw hex in components.
   *  - separate content with spacing + soft elevation, never strokes.
   * ============================================================ */
  /* palette ramp: a warm cream canvas that steps, never jumps */
  --cream-0: var(--oddly-canvas, #FAFAF7);   /* base canvas */
  --cream-1: #F6F4ED;                          /* a touch warmer */
  --cream-2: #F1EDE3;                          /* warmer still */
  --navy-900: var(--oddly-ink, #1A1A2E);       /* deep punctuation zone */

  /* type-colour hierarchy: one colour per role */
  --ink-display: var(--navy-900);              /* Fraunces headings on cream */
  --ink-body: #4A4A52;                          /* the one warm-gray body */
  --ink-eyebrow: #6E6C74;                       /* muted label/eyebrow */
  --teal-emph: var(--teal);                     /* the emphasized phrase (cream) */
  --teal-emph-navy: #6FB3AC;                    /* lightened for AA on navy */
  /* text on a navy punctuation zone */
  --on-navy: var(--cream);
  --on-navy-soft: rgba(250, 250, 249, 0.82);
  --on-navy-eyebrow: rgba(250, 250, 249, 0.6);

  /* one type scale (one size per role) */
  --fs-display: clamp(30px, 7.6vw, 56px);
  --fs-h2: clamp(26px, 6vw, 38px);
  --fs-h3: 18px;
  --fs-body: clamp(16px, 4.4vw, 18px);
  --fs-body-sm: 15px;
  --fs-eyebrow: 12px;
  --tracking-eyebrow: 0.16em;

  /* vertical rhythm: one spine, one section padding, one feather depth */
  --flow-spine: 1200px;
  --flow-pad-y: clamp(96px, 13vw, 140px);
  --flow-feather: clamp(80px, 10vw, 104px);
}

/* ---------- Flow utilities (shared marketing system) -------------------- */
/* A navy PUNCTUATION zone that feathers into the surrounding cream at both
 * edges, so the deep colour reads as one moment on the page canvas rather than
 * a hard-edged rectangle. The neighbour creams pass in per instance via
 * --flow-top / --flow-bottom so the blend is exact (no visible seam). Content
 * sits in a .flow-spine child; the zone's padding keeps copy off the feather
 * where contrast would drop. */
.flow-navy {
  position: relative;
  color: var(--on-navy);
  background:
    linear-gradient(
      180deg,
      var(--flow-top, var(--cream-0)) 0,
      var(--navy-900) var(--flow-feather),
      var(--navy-900) calc(100% - var(--flow-feather)),
      var(--flow-bottom, var(--cream-0)) 100%);
}
/* the shared content spine: every section aligns to the same column */
.flow-spine { max-width: var(--flow-spine); margin: 0 auto; }

/* the one eyebrow: a muted small-caps label, one size, one colour. On a navy
 * zone it lightens; it is never gold (gold is signature only). */
.flow-eyebrow {
  display: inline-block;
  font-family: var(--sans);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-eyebrow);
  margin: 0 0 14px;
}
.flow-navy .flow-eyebrow { color: var(--on-navy-eyebrow); }

/* the one emphasis: a single teal italic phrase per section. */
.flow-em { color: var(--teal-emph); font-style: italic; font-weight: 400; }
.flow-navy .flow-em { color: var(--teal-emph-navy); }

/* a soft elevation for separating content without strokes (the only allowed
 * alternative to a border). Low-opacity, warm, sharp corners preserved. */
.flow-lift { box-shadow: 0 1px 2px rgba(26, 26, 46, 0.04), 0 14px 34px -22px rgba(26, 26, 46, 0.22); }

/* ---------- Base editorial page (subpages opt in via body.bs-page) ----- */
.bs-page {
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  color: var(--navy);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* small-caps section tag, shared with the landing */
.tag {
  display: inline-block;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: 16px;
}

/* ---------- The masthead nameplate (carried on every public page) ------ */
.masthead-band { background: var(--cream); padding: 0 28px; }
.hero-masthead { max-width: 1280px; margin: 0 auto; padding-top: 8px; }
/* Titan-flow refinement FOUNDATION (2026-06-23): the gold rules that
 * bracketed the nameplate top and bottom are removed. They fenced the
 * masthead into a box; the nameplate now floats on the cream field and
 * the gold is reserved for the brand "o" itself (the ::first-letter
 * below) per the rationed palette. Spacing carries the masthead rhythm
 * in place of the rules. */
.hm-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 14px 0 10px;
}
.hm-side {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy-soft);
}
.hm-side.hm-right { text-align: right; color: var(--teal-deep); }
.hm-nameplate {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: clamp(38px, 6.6vw, 72px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 0.85;
  color: var(--navy);
  text-align: center;
  text-decoration: none;
}
/* Titan 2026-06-15: restore the gold "O" as the brand mark on the
 * masthead nameplate (matches the header + footer wordmark). */
.hm-nameplate::first-letter { color: var(--gold); }
.hm-strapline {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-weight: 400;
  font-size: 15px;
  color: var(--teal);
  letter-spacing: 0.01em;
  margin: 9px 0 0;
}
/* subpage register: same nameplate, lower volume */
.hero-masthead--compact { padding-top: 6px; padding-bottom: 4px; }
.hero-masthead--compact .hm-row { padding: 9px 0; }
.hero-masthead--compact .hm-nameplate { font-size: clamp(28px, 4.2vw, 44px); }
.hero-masthead--compact .hm-strapline { font-size: 13px; margin-top: 7px; }
@media (max-width: 640px) {
  .hm-row { grid-template-columns: 1fr; justify-items: center; gap: 0; }
  .hm-side { display: none; }
}

/* ---------- Primitive 1: the dollar hero ------------------------------- */
/* The money figure as typographic protagonist: serif tabular numerals,
 * the honest kind-label beneath in small caps. The null state renders the
 * reason line instead of a number; it never fakes a figure. */
.bs-dollar { display: flex; flex-direction: column; }
.bs-dollar-num {
  font-family: var(--serif);
  font-variant-numeric: tabular-nums;
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--navy);
}
.bs-dollar-kind {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy-soft);
  margin-top: 8px;
}
/* on an ink panel the figure carries the single gold highlight */
.bs-dollar--onink .bs-dollar-num { color: var(--gold); }
.bs-dollar--onink .bs-dollar-kind { color: rgba(250, 250, 249, 0.7); }
/* the honest null state: a reason, never a fake number */
.bs-dollar--null .bs-dollar-reason {
  font-family: var(--serif);
  font-style: italic;
  font-size: 20px;
  line-height: 1.4;
  color: var(--navy-soft);
  margin: 0;
}

/* ---------- Primitive 2: the evidence block ---------------------------- */
/* Provenance of a claim, styled as a newspaper pull-quote: hairline left
 * rule, the claim in serif, the raw figures in mono, the source line in
 * small caps with window + date. */
.bs-evidence {
  border-left: 2px solid var(--teal);
  padding: 4px 0 4px 18px;
  margin: 0;
}
.bs-evidence-quote {
  font-family: var(--serif);
  font-style: italic;
  font-size: 17px;
  line-height: 1.55;
  color: var(--navy);
  margin: 0 0 10px;
}
.bs-evidence-data {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  line-height: 1.6;
  color: var(--navy);
  margin: 0 0 8px;
}
.bs-evidence-source {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy-soft);
  margin: 0;
}
/* a guarantee/trait block reads as evidence too: serif lead, plain body */
.bs-evidence > strong {
  display: block;
  font-family: var(--serif);
  font-style: normal;
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin-bottom: 4px;
}

/* ---------- Primitive 3: the read-only seal ----------------------------- */
/* A small set seal: "reads your store. never raises your spend." (copy v2,
 * used on landing, pricing, listing screenshots, docs. The ring is the
 * stamp; gold is earned here (a guarantee, not a decoration). */
.bs-seal {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  border: 1px solid var(--gold);
  background: transparent;
  padding: 9px 16px 9px 11px;
}
.bs-seal-mark {
  width: 28px;
  height: 28px;
  border: 1px solid var(--gold);
  border-radius: 999px; /* the seal ring itself; everything else stays sharp */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1;
  color: var(--gold-deep);
}
.bs-seal-text {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold-deep);
}

/* ---------- Primitive 4: same data, same answer ------------------------- */
/* Deterministic repetition as a visual idea: the same finding rendered
 * twice, pixel-identical, two run stamps. A section, not a wallpaper. */
.bs-twice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* flow foundation: the bordered box + divider stroke are gone. The two
   * panes are separated by spacing and a soft elevation, never strokes. */
  gap: 18px;
}
.bs-twice-pane {
  padding: 24px 26px;
  background: var(--cream-0);
  box-shadow: 0 1px 2px rgba(26, 26, 46, 0.04), 0 14px 34px -22px rgba(26, 26, 46, 0.22);
}
.bs-run-label {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy-soft);
  margin: 0 0 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
.bs-mini-title {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--navy);
  margin: 0 0 8px;
}
.bs-mini-data {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--navy);
  margin: 0 0 12px;
}
.bs-mini-impact {
  font-family: var(--serif);
  font-variant-numeric: tabular-nums;
  font-size: 30px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--navy);
  margin: 0 0 6px;
}
.bs-mini-impact .bs-mini-impact-cap {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy-soft);
  margin-left: 8px;
}
.bs-mini-rule {
  font-family: var(--sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin: 0;
}
.bs-twice-caption {
  text-align: center;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--navy-soft);
  margin: 16px 0 0;
}
@media (max-width: 720px) {
  .bs-twice-grid { grid-template-columns: 1fr; }
  .bs-twice-pane + .bs-twice-pane { border-top: none; }
}

/* ---------- Editorial doc furniture for subpages ------------------------ */
.bs-h1 {
  font-family: var(--serif);
  font-optical-sizing: auto;
  font-size: clamp(32px, 4.4vw, 44px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--navy);
}
.bs-h2 {
  font-family: var(--serif);
  font-size: clamp(22px, 2.8vw, 28px);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--navy);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--gold);
}
.bs-rule-gold { height: 1px; background: var(--gold); border: none; }