/* ==========================================================================
   Numae — shared site styles
   ONE stylesheet for every page: marketing pages AND all seven tool dashboards.

   Design direction (approved v3):
     Type   — Fraunces (display serif, regular weight) + Manrope (body)
     Color  — bay laurel green as the single accent, gold used sparingly for
              "act on this", plus three semantic status colors that ONLY ever
              mean status and never decorate.

   Rules of the road:
     * Never hardcode a color in a page. Use the tokens below.
     * --ink means TEXT. --accent means the brand green. Tool pages used to
       redefine --ink as their own accent, which is why every dashboard used
       to look like a different website. Don't do that again.
     * Both light and dark themes are defined at token level only.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,300..600&family=Manrope:wght@400;500;600;700;800&display=swap');

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* --- neutrals: a green-biased grey, not a pure grey --- */
  --ink:       #11171A;   /* headings, primary text */
  --ink-soft:  #414D47;   /* body copy — deliberately not black */
  --muted:     #66716B;   /* labels, secondary text */
  --paper:     #F6F8F5;   /* page ground */
  --card:      #FFFFFF;
  --line:      #DDE3DE;   /* hairlines */
  --line-firm: #C6CFC8;   /* control borders */

  /* --- inverted surfaces (hero, page header, banner, footer) ---
     These must stay DARK in both themes. Do NOT use --ink as a background:
     --ink flips to near-white in dark mode, and white text on it disappears.
     Anything sitting on --deep uses --on-deep for its text. */
  --deep:    #11171A;
  --on-deep: #FFFFFF;
  --on-deep-soft: #C3CDC7;

  /* --- the one accent --- */
  --accent:      #17694A;
  --accent-deep: #0E4530;
  --accent-lift: #2E8A64;   /* hover / brighter fill */
  --accent-tint: #DCEDE4;
  /* text/icon colour for anything sitting ON a filled accent surface —
     white in light mode, near-black in dark mode where the accent lightens */
  --on-accent:   #FFFFFF;

  /* --- gold: means "act on this today". Used sparingly, never decoratively --- */
  --event:     #6D28D9;   /* schedule/eventy accent - the only non-green hue */
  --gold:      #9A6B1F;
  --gold-lift: #C79138;
  --gold-tint: #F7EBD4;

  /* --- semantic status. These mean state. Nothing else. --- */
  --good:  #0E5537;  --good-bg: #D7EDE1;  --good-dot: #1E8A5B;
  --wait:  #92400E;  --wait-bg: #FBE7CE;  --wait-dot: #D97706;
  --stale: #99190F;  --stale-bg:#FBDEDB;  --stale-dot:#DC2626;

  /* legacy aliases — some older markup still references these. Mapped onto
     the new system so nothing renders unstyled. Prefer the names above. */
  --success: var(--good-dot);
  --warning: var(--wait-dot);
  --danger:  var(--stale-dot);
  --bg:      var(--paper);

  --radius:   11px;
  --radius-lg:14px;
  --sh-1: 0 1px 2px rgba(17,23,26,.06), 0 1px 1px rgba(17,23,26,.04);
  --sh-2: 0 4px 14px -4px rgba(17,23,26,.16), 0 1px 2px rgba(17,23,26,.06);
  --shadow-sm: var(--sh-1);
  --shadow-md: var(--sh-2);
  --wrap: 1120px;

  --display: 'Fraunces', Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  --body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --serif: var(--display);   /* legacy alias */
  --mono: ui-monospace, 'Cascadia Code', Consolas, 'Courier New', monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink:#F0F2EF; --ink-soft:#B8C3BC; --muted:#8E9993;
    --paper:#12181A; --card:#1B2220; --line:#2E3733; --line-firm:#3D4842;
    --deep:#0C1113; --on-deep:#F0F2EF; --on-deep-soft:#AEBAB3; --on-accent:#07120D;
    --accent:#4FB287; --accent-deep:#7BCBA6; --accent-lift:#63C79A; --accent-tint:#172A23;
    --event:#B69CF5; --gold:#D6A855; --gold-lift:#E8BF74; --gold-tint:#2C2418;
    --good:#7BCBA6; --good-bg:#16281F; --good-dot:#39B37D;
    --wait:#EDA75E; --wait-bg:#2C2016; --wait-dot:#E08A2B;
    --stale:#F0837A; --stale-bg:#2F1917; --stale-dot:#E5544A;
  }
}
:root[data-theme="dark"] {
  --ink:#F0F2EF; --ink-soft:#B8C3BC; --muted:#8E9993;
  --paper:#12181A; --card:#1B2220; --line:#2E3733; --line-firm:#3D4842;
  --deep:#0C1113; --on-deep:#F0F2EF; --on-deep-soft:#AEBAB3; --on-accent:#07120D;
  --accent:#4FB287; --accent-deep:#7BCBA6; --accent-lift:#63C79A; --accent-tint:#172A23;
  --event:#B69CF5; --gold:#D6A855; --gold-lift:#E8BF74; --gold-tint:#2C2418;
  --good:#7BCBA6; --good-bg:#16281F; --good-dot:#39B37D;
  --wait:#EDA75E; --wait-bg:#2C2016; --wait-dot:#E08A2B;
  --stale:#F0837A; --stale-bg:#2F1917; --stale-dot:#E5544A;
}
:root[data-theme="light"] {
  --ink:#11171A; --ink-soft:#414D47; --muted:#66716B;
  --paper:#F6F8F5; --card:#FFFFFF; --line:#DDE3DE; --line-firm:#C6CFC8;
  --deep:#11171A; --on-deep:#FFFFFF; --on-deep-soft:#C3CDC7; --on-accent:#FFFFFF;
  --accent:#17694A; --accent-deep:#0E4530; --accent-lift:#2E8A64; --accent-tint:#DCEDE4;
  --event:#6D28D9; --gold:#9A6B1F; --gold-lift:#C79138; --gold-tint:#F7EBD4;
  --good:#0E5537; --good-bg:#D7EDE1; --good-dot:#1E8A5B;
  --wait:#92400E; --wait-bg:#FBE7CE; --wait-dot:#D97706;
  --stale:#99190F; --stale-bg:#FBDEDB; --stale-dot:#DC2626;
}

/* ==========================================================================
   Base
   ========================================================================== */

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--body);
  font-size: 16.5px;
  color: var(--ink-soft);
  background: var(--paper);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--display);
  font-weight: 500;
  font-variation-settings: 'SOFT' 0, 'WONK' 0;
  color: var(--ink);
  line-height: 1.18;
  letter-spacing: -.016em;
  text-wrap: balance;
}

img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent-lift); outline-offset: 2px; border-radius: 4px; }
code, kbd, samp { font-family: var(--mono); font-size: .87em; }

button, input, select, textarea { font-family: inherit; font-size: inherit; color: inherit; }

/* Kill the 300ms double-tap-zoom delay on controls without disabling pinch zoom
   on the page. manipulation = pan + zoom gestures, no double-tap-to-zoom. */
a, button, input, select, textarea, label { touch-action: manipulation; }

/* Keyboard users' first tab stop. Visually offscreen until focused — never
   display:none, which would remove it from the tab order entirely. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--on-accent) !important;
  padding: 10px 18px; border-radius: 0 0 8px 0; font-weight: 700;
}
.skip-link:focus { left: 0; text-decoration: none; outline: 2px solid var(--gold-lift); }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.section { padding: 56px 0; }
.center { text-align: center; }
.muted { color: var(--muted); }

.eyebrow {
  font-family: var(--body);
  text-transform: uppercase;
  letter-spacing: .11em;
  font-size: .7rem;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 8px;
}
.section h2 { font-size: clamp(1.65rem, 3.4vw, 2.3rem); margin-bottom: 10px; letter-spacing: -.022em; }
.section .lead { font-size: 1.04rem; color: var(--muted); max-width: 64ch; }
.section.center .lead { margin: 0 auto; }

.display { font-family: var(--display); font-weight: 500; letter-spacing: -.022em; line-height: 1.08; }
.serif-lead { font-family: var(--display); font-weight: 400; color: var(--muted); font-size: 1.14rem; }

/* Wide content must scroll inside itself, never the page body */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* ==========================================================================
   Navigation — one bar for every page, marketing and tools alike
   ========================================================================== */

.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: var(--wrap); margin: 0 auto; padding: 11px 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
}
.brand {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--display); font-weight: 600; font-size: 1.24rem;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 24;
  color: var(--ink); letter-spacing: -.02em;
}
.brand:hover { text-decoration: none; }
/* the mark is a small gold dot, not a gradient tile */
.brand .dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: var(--gold-lift);
  box-shadow: 0 0 0 3px rgba(199,145,56,.22);
  font-size: 0; color: transparent; overflow: hidden;
}
.nav-links { display: flex; align-items: center; gap: 21px; min-width: 0; }
.nav-links a {
  color: var(--muted); font-weight: 600; font-size: .9rem; padding: 2px 0;
}
.nav-links a:hover { color: var(--ink); text-decoration: none; }
.nav-links a.active { color: var(--ink); box-shadow: inset 0 -2px 0 var(--accent); }
.nav-cta {
  flex: 0 0 auto;
  background: var(--accent); color: var(--on-accent) !important;
  padding: 7px 15px !important; border-radius: 999px;
  font-weight: 700; font-size: .85rem;
  box-shadow: 0 1px 2px rgba(17,23,26,.14);
}
.nav-cta:hover { background: var(--accent-lift); text-decoration: none; }
.nav-toggle { display: none; background: none; border: 0; font-size: 1.4rem; cursor: pointer; color: var(--ink); }

/* Two mobile navs by width. TABLET (641-860): the links scroll sideways with
   the CTA pinned right — no JS needed. PHONE (<=640): a real hamburger
   dropdown. The dropdown once existed, was removed because only the 8
   marketing pages loaded nav.js, and is now restored because ALL pages load
   nav.js (added 2026-08-09 in the a11y pass). The 2px-padding links were
   26px-tall tap targets on phones — under half the 44px floor. */
@media (max-width: 860px) {
  .nav-inner { gap: 12px; }
  .nav-links {
    gap: 16px; overflow-x: auto; white-space: nowrap;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    /* room so the last link can scroll clear of the pinned CTA */
    padding-right: 4px;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { flex: 0 0 auto; padding: 12px 2px; }   /* >=44px tap height */
  /* CTA sits inside .nav-links on most pages — pin it so it never scrolls away */
  .nav-links .nav-cta {
    position: sticky; right: 0; margin-left: 4px;
    box-shadow: -8px 0 8px -4px var(--paper), 0 1px 2px rgba(17,23,26,.14);
  }
}
@media (max-width: 640px) {
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; min-height: 44px; margin: -6px -8px -6px 0;
    border-radius: 8px;
  }
  .nav-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
  .nav-links { display: none; }
  /* .nav is position:sticky, so the panel anchors to it cleanly */
  .nav-links.open {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--card); border-bottom: 1px solid var(--line);
    box-shadow: var(--sh-2); padding: 6px 20px 14px;
    white-space: normal; overflow: visible;
  }
  .nav-links.open a {
    padding: 13px 2px; font-size: 1rem;
    border-bottom: 1px solid var(--line);
  }
  .nav-links.open a:last-child { border-bottom: 0; }
  .nav-links.open a.active { box-shadow: inset 3px 0 0 var(--accent); padding-left: 12px; }
  .nav-links.open .nav-cta {
    position: static; margin: 10px 0 0; justify-content: center;
    display: inline-flex; box-shadow: 0 1px 2px rgba(17,23,26,.14);
  }
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; font-family: var(--body); font-weight: 700; font-size: .92rem;
  text-decoration: none;
  transition: background .16s, box-shadow .16s, transform .16s;
}
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--accent); color: var(--on-accent); box-shadow: 0 2px 10px -3px rgba(23,105,74,.55); }
.btn-primary:hover { background: var(--accent-lift); }
.btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line-firm); }
.btn-ghost:hover { border-color: var(--muted); }
.btn-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.36); }
.btn-light:hover { border-color: #fff; }
.btn-sm { padding: 6px 13px; font-size: .83rem; }

@media (prefers-reduced-motion: reduce) {
  .btn, .card { transition: none !important; }
  .btn:hover, .card:hover { transform: none !important; }
}

/* ==========================================================================
   Hero — marketing pages only. Tool pages use .toolhead instead.
   ========================================================================== */

.hero {
  background: var(--deep); color: #fff;
  padding: 62px 0 70px; position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: auto -10% -60% 55%; height: 110%;
  background: radial-gradient(ellipse at center, rgba(46,138,100,.26), transparent 68%);
  pointer-events: none;
}
.hero .wrap { position: relative; z-index: 1; max-width: 780px; }
/* the photo hero needs the full column width — the 780px cap is for text-only heroes */
.hero .wrap.hero-wide { max-width: var(--wrap); }
.hero .eyebrow { color: var(--gold-lift); }
.hero .kicker { font-family: var(--display); font-weight: 400; font-size: 1.35rem; opacity: .9; margin-bottom: 4px; }
.hero h1 {
  color: #fff; font-weight: 400;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 96;
  font-size: clamp(2.2rem, 5.4vw, 3.5rem);
  line-height: 1.05; letter-spacing: -.028em; margin-bottom: 14px;
}
/* one word of gold inside a headline, for emphasis */
.hero h1 em { font-style: normal; color: var(--gold-lift); }
.hero p { color: #C3CDC7; font-size: 1.06rem; max-width: 52ch; margin-bottom: 24px; }
.hero .btn-row { display: flex; gap: 10px; flex-wrap: wrap; }
.hero-stats { display: flex; gap: 40px; margin-top: 40px; flex-wrap: wrap; }
.hero-stats .num {
  font-family: var(--display); font-size: 2.2rem; font-weight: 500; color: #fff;
  font-variant-numeric: tabular-nums; font-variation-settings: 'SOFT' 0,'WONK' 0,'opsz' 60;
  letter-spacing: -.022em;
}
.hero-stats .lbl { color: #9FADA5; font-size: .84rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.hero.dark { background: var(--deep); }
.hero.dark h1 { font-family: var(--display); }

/* --- hero with photography (homepage) --------------------------------------
   Asymmetric two-column: words left, photo right. The photo leans out of its
   column and gets an organic radius — the one deliberate grid-break on the
   page. Collapses photo-first on phones. */
.hero-grid {
  display: grid; grid-template-columns: 1.1fr .9fr;
  gap: 40px; align-items: center;
}
.hero-photo {
  width: 100%; max-height: 430px; object-fit: cover;
  border-radius: 46% 54% 42% 58% / 52% 44% 56% 48%;
  box-shadow: 0 24px 60px -24px rgba(0,0,0,.55);
  transform: rotate(1.6deg);
}
@media (max-width: 780px) {
  .hero-grid { grid-template-columns: 1fr; gap: 26px; }
  .hero-photo { max-height: 260px; transform: none; order: -1; }
}
/* gold button — the "go" action. Global (not hero-scoped): the tools hub and
   dashboards use it too, tying them to the homepage CTA. */
.btn-gold {
  background: var(--gold-lift); color: #211703; border-color: transparent;
  box-shadow: 0 2px 12px -3px rgba(199,145,56,.6);
}
/* brightness, not a fixed hex: #E8BF74 IS dark-mode --gold-lift, so a hex
   hover was a no-op in dark theme. */
.btn-gold:hover { filter: brightness(1.07); color: #211703; }

/* --- page-load reveal (hero only) ------------------------------------------
   One orchestrated moment, ~650ms total, CSS-only. Each .reveal child fades
   up in sequence. Guarded below for reduced motion. */
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.reveal { animation: rise .55s cubic-bezier(.2,.7,.3,1) both; }
.reveal-1 { animation-delay: .05s; }
.reveal-2 { animation-delay: .16s; }
.reveal-3 { animation-delay: .27s; }
.reveal-4 { animation-delay: .38s; }
/* The photo keeps its tilt through the animation — the generic `rise` ends at
   transform:none, which would silently undo the rotate. */
@keyframes riseTilt { from { opacity: 0; transform: translateY(14px) rotate(1.6deg); } to { opacity: 1; transform: rotate(1.6deg); } }
.hero-photo.reveal { animation-name: riseTilt; }
@media (max-width: 780px) {
  .hero-photo.reveal { animation-name: rise; }   /* tilt is off on phones */
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-1, .reveal-2, .reveal-3, .reveal-4 { animation: none !important; }
}

/* ==========================================================================
   Row/pill/bar utilities — the three patterns the tool dashboards kept
   hand-writing inline (236 inline styles in the Deal Optimizer alone).
   New code uses these; old inline styles migrate as files get touched.
   ========================================================================== */

/* A data row: content left, value right, hairline under. */
.row-line {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: .6rem; padding: .4rem 0; border-bottom: 1px solid var(--line);
}
.row-line > .grow { min-width: 0; }
.row-line .row-sub { font-size: .75rem; color: var(--muted); }
.row-line .row-val { font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Status chips: use the EXISTING .chip system further down in this sheet
   (.chip with .chip-good / .chip-wait / .chip-stale, dot included) — that is
   what the dashboards already use. A duplicate ".chip.good"-style block that
   briefly lived here collided with it and served no markup; removed. */

/* A thin progress bar. Fill width is set inline (it's data), color by class. */
.bar-track { height: 6px; background: var(--paper); border-radius: 3px; overflow: hidden; margin: .2rem 0; }
.bar-fill  { height: 100%; background: var(--accent); }
.bar-fill.good { background: var(--good-dot); }
.bar-fill.gold { background: var(--gold-lift); }

/* ==========================================================================
   Cards & grids
   ========================================================================== */

.grid { display: grid; gap: 16px; }
/* A grid item's automatic minimum size is min-content, so wide content
   (a Chart.js canvas, a long table) pushes its track past the container.
   min-width:0 lets tracks shrink; canvases then scale to fit. */
.grid > * { min-width: 0; }
canvas { max-width: 100%; }
/* Explicit breakpoints, deliberately NOT repeat(auto-fit, minmax(Npx, 1fr)):
   a fixed px minimum forces a track wider than a narrow phone, and the
   min(Npx, 100%) workaround is unreliable because a percentage in a track
   minimum can resolve as indefinite during intrinsic sizing and fall back to
   the raw px value. Mobile-first single column, widening on real breakpoints. */
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 780px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1020px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 740px) { .grid-4 { grid-template-columns: 1fr 1fr; } }
/* Two metric columns can't hold a label like "Value Left on Table" this narrow */
@media (max-width: 420px) { .grid-4 { grid-template-columns: 1fr; } }

.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 19px 21px; box-shadow: var(--sh-1);
  transition: box-shadow .16s ease, transform .16s ease, border-color .16s ease;
}
.card:hover { box-shadow: var(--sh-2); transform: translateY(-1px); }
.card h3 { font-size: 1.24rem; margin-bottom: 6px; letter-spacing: -.02em; }
.card p { color: var(--muted); }

/* card icon tile — holds a single serif MONOGRAM letter (2026-08-09; the
   emoji that used to live here read as childish). Letterpress feel: Fraunces
   at its display optical size, accent-deep on the tint. */
.card .icon {
  width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center;
  font-size: 1.3rem; line-height: 1; margin-bottom: 13px;
  font-family: var(--display); font-weight: 500;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 40;
  /* gold, not green (2026-08-09): the monogram is a brand mark like the gold
     nav dot, and it warms the otherwise all-green tool pages. */
  color: var(--gold);
  background: var(--gold-tint); border: 1px solid var(--gold-lift);
}
/* The old per-tool tinted icon variants (i-emerald, i-indigo, i-amber,
   i-coral, i-blue) are dead: the monogram tiles are gold now, and this rule —
   equal specificity, later in the sheet — was silently overriding the gold
   back to green on every hub/blog/reviews card. The classes stay in markup
   harmlessly; nothing styles them anymore. */

/* --- attention stripe: the left edge carries severity --- */
.card.flag { border-left-width: 3px; border-left-style: solid; border-left-color: var(--line-firm); }
.card.flag-good  { border-left-color: var(--good-dot); }
.card.flag-wait  { border-left-color: var(--wait-dot); }
.card.flag-stale { border-left-color: var(--stale-dot); }
.card.flag-accent{ border-left-color: var(--accent); }

/* ==========================================================================
   Tool page header — replaces the seven different gradient banners
   ========================================================================== */

.toolhead {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--sh-1);
  padding: 19px 21px 17px; margin-bottom: 16px;
}
.toolhead .titling { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.toolhead .titling > div:not(.acts) { min-width: 0; flex: 1 1 15ch; }
.toolhead .icon {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 9px;
  background: var(--gold-tint); border: 1px solid var(--gold-lift);
  display: grid; place-items: center; font-size: 1.15rem; line-height: 1;
  /* serif monogram in gold, same treatment as the hub cards */
  font-family: var(--display); font-weight: 500;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 40;
  color: var(--gold);
}
/* a short gold rule under each tool's name — the editorial section mark that
   carries the homepage's warmth into the dashboards */
.toolhead h1::after, .toolhead h2::after {
  content: ""; display: block; width: 44px; height: 3px;
  background: var(--gold-lift); border-radius: 2px; margin-top: 7px;
}
.toolhead h1, .toolhead h2 {
  font-size: 1.62rem; font-weight: 500; line-height: 1.15;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 40; letter-spacing: -.024em;
}
/* .toolsub, not .sub — the Subscriptions tool already uses .sub for its
   subscription cards, and a shared class must never collide with a page's own. */
.toolhead .toolsub { color: var(--muted); font-size: .89rem; margin-top: 2px; max-width: 60ch; line-height: 1.45; }
.toolhead .acts { margin-left: auto; display: flex; gap: 7px; flex-wrap: wrap; flex: 0 0 auto; }
/* On narrow screens the action buttons drop to their own full-width row
   instead of being pushed off the right edge by margin-left:auto. */
@media (max-width: 620px) {
  .toolhead .acts { margin-left: 0; flex-basis: 100%; }
}

/* ==========================================================================
   Tabs — used by every dashboard
   ========================================================================== */

.tabs { display: flex; gap: 5px; flex-wrap: wrap; margin: 14px 0 18px; }
/* PHONES: 16 wrapped tabs made a 205px wall before any content. One scrolling
   row instead — nav.js keeps the active tab scrolled into view. */
@media (max-width: 640px) {
  .tabs {
    flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    margin-left: -16px; margin-right: -16px; padding: 2px 16px;
    scroll-padding-inline: 16px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs .tab-btn { flex: 0 0 auto; }
}
.tab-btn {
  border: 1px solid var(--line-firm); background: var(--card); color: var(--muted);
  padding: 7px 15px; border-radius: 999px;
  font-family: var(--body); font-weight: 700; font-size: .84rem; cursor: pointer;
}
.tab-btn:hover { color: var(--ink); border-color: var(--muted); }
.tab-btn.active {
  background: var(--accent); border-color: var(--accent); color: var(--on-accent);
  box-shadow: 0 2px 8px -2px rgba(23,105,74,.55);
}
.view { display: none; }
.view.active { display: block; }

/* ==========================================================================
   Metrics — the big scannable numbers
   ========================================================================== */

.metric .label,
.metric-label {
  font-size: .67rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: var(--muted);
}
.metric .value,
.metric-value {
  font-family: var(--display); font-weight: 500; font-size: 2.3rem; line-height: 1.02;
  margin: 2px 0 1px; color: var(--ink);
  font-variant-numeric: tabular-nums;
  font-variation-settings: 'SOFT' 0, 'WONK' 0, 'opsz' 60;
  letter-spacing: -.024em;
}
.metric .value.pos { color: var(--accent); }
.metric .value.neg { color: var(--stale); }
.metric .foot { font-size: .75rem; color: var(--muted); }

/* "act on this today" — the one gold thing on a page */
.metric.win { background: var(--gold-tint); border-color: var(--gold-lift); }
.metric.win .label,
.metric.win .value { color: var(--gold); }
.metric.win .foot { color: var(--gold); opacity: .85; }

/* ==========================================================================
   Status chips — saturated, dotted, meant to catch the eye.
   NOTE: named .chip, not .pill — .pill is the dark marketing CTA below.
   ========================================================================== */

.chips { display: flex; gap: 5px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
  font-family: var(--body); font-size: .735rem; font-weight: 700;
  padding: 3px 10px; border-radius: 999px; letter-spacing: -.005em;
}
.chip::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor; flex: 0 0 auto; opacity: .9;
}
.chip.nodot::before { display: none; }
.chip-good  { background: var(--good-bg);  color: var(--good); }
.chip-good::before  { background: var(--good-dot); }
.chip-wait  { background: var(--wait-bg);  color: var(--wait); }
.chip-wait::before  { background: var(--wait-dot); }
.chip-stale { background: var(--stale-bg); color: var(--stale); }
.chip-stale::before { background: var(--stale-dot); }
.chip-flat  { background: var(--paper); color: var(--muted); border: 1px solid var(--line-firm); }
.chip-flat::before { display: none; }
.chip-accent { background: var(--accent); color: var(--on-accent); }
.chip-accent::before { display: none; }

/* Status badges (tool hub "Ready / Soon / Later") */
.badge {
  font-size: .68rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; white-space: nowrap;
}
.badge.ready { background: var(--good-bg); color: var(--good); }
.badge.soon  { background: var(--wait-bg); color: var(--wait); }
.badge.later { background: var(--paper); color: var(--muted); border: 1px solid var(--line-firm); }

/* ==========================================================================
   Tool hub cards
   ========================================================================== */

.tool-card { display: flex; flex-direction: column; }
.tool-card .top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.tool-card .body { flex: 1; }
.tool-card .foot { margin-top: 15px; }
.tool-card.is-soon { opacity: .82; }

/* ==========================================================================
   Data freshness line — the staleness indicator
   ========================================================================== */

.freshness { font-size: .76rem; font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; gap: 5px; }
.freshness.is-ok    { color: var(--good); }
.freshness.is-aging { color: var(--wait); }
.freshness.is-stale { color: var(--stale); }

/* ==========================================================================
   Legend tables (code shorthand reference)
   ========================================================================== */

.legend-group { margin-bottom: 20px; }
.legend-group h4 { font-size: 1rem; margin-bottom: 7px; color: var(--ink); }
.legend-grid { display: grid; grid-template-columns: 1fr; gap: 1px 26px; }
@media (min-width: 640px)  { .legend-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .legend-grid { grid-template-columns: repeat(3, 1fr); } }
.legend-grid div { font-size: .86rem; padding: 2px 0; color: var(--ink-soft); }
.legend-grid code {
  background: var(--accent-tint); color: var(--accent-deep);
  padding: 1px 6px; border-radius: 4px; font-weight: 700;
}

/* ==========================================================================
   Forms & controls
   ========================================================================== */

.field {
  padding: 8px 11px; border: 1px solid var(--line-firm); border-radius: 8px;
  background: var(--card); color: var(--ink); font-size: .92rem;
}
.field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(23,105,74,.14); }
.filters { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.filters select, .filters input { padding: 8px 11px; border: 1px solid var(--line-firm); border-radius: 8px;
  background: var(--card); color: var(--ink); font-size: .92rem; }
.filters input { flex: 1; min-width: 180px; }

.subscribe { display: flex; gap: 8px; flex-wrap: wrap; max-width: 470px; margin: 20px auto 0; }
.subscribe input {
  flex: 1; min-width: 210px; padding: 11px 15px; border-radius: 999px;
  border: 1px solid var(--line-firm); background: var(--card); color: var(--ink); font-size: 1rem;
}
.subscribe input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(23,105,74,.14); }

/* ==========================================================================
   Messages / empty states
   ========================================================================== */

.msg {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px; text-align: center; color: var(--muted); box-shadow: var(--sh-1);
}
.callout {
  background: var(--card); border: 1px solid var(--line);
  border-left: 3px solid var(--accent); border-radius: var(--radius);
  padding: 15px 18px; font-size: .9rem; line-height: 1.6; box-shadow: var(--sh-1);
}
.callout b { color: var(--ink); }
.callout + .callout { margin-top: 10px; }

/* ==========================================================================
   Interior page header (marketing sub-pages)
   ========================================================================== */

.page-head { background: var(--deep); color: #fff; padding: 46px 0 42px; }
.page-head h1 {
  color: #fff; font-weight: 400; font-size: clamp(1.9rem, 4.6vw, 2.9rem);
  font-variation-settings: 'SOFT' 0,'WONK' 0,'opsz' 72; letter-spacing: -.026em; margin-bottom: 9px;
}
.page-head p { color: #C3CDC7; max-width: 62ch; font-size: 1.04rem; }
.crumbs { font-size: .8rem; margin-bottom: 13px; font-weight: 600; letter-spacing: .02em; }
.crumbs a { color: #9FADA5; }
.crumbs a:hover { color: #fff; }

/* ==========================================================================
   Feature banner
   ========================================================================== */

.banner {
  background: var(--deep); color: #fff; border-radius: var(--radius-lg);
  padding: 34px; display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; position: relative; overflow: hidden;
}
.banner::after {
  content: ""; position: absolute; inset: auto -20% -80% 60%; height: 140%;
  background: radial-gradient(ellipse at center, rgba(46,138,100,.24), transparent 68%);
  pointer-events: none;
}
.banner > * { position: relative; z-index: 1; }
.banner h2 { color: #fff; font-weight: 400; font-size: 1.85rem; margin-bottom: 7px;
  font-variation-settings: 'SOFT' 0,'WONK' 0,'opsz' 48; letter-spacing: -.024em; }
.banner p { color: #C3CDC7; max-width: 52ch; }

/* ==========================================================================
   Coming soon
   ========================================================================== */

.soon-wrap { max-width: 700px; margin: 0 auto; }
.soon-list { list-style: none; margin-top: 16px; }
.soon-list li { padding: 10px 0 10px 30px; position: relative; border-bottom: 1px solid var(--line); }
.soon-list li::before { content: "✓"; position: absolute; left: 0; color: var(--accent); font-weight: 800; }

/* ==========================================================================
   Editorial bits used by the marketing pages
   ========================================================================== */

.stats-row { display: flex; gap: 44px; flex-wrap: wrap; }
.stat .n {
  font-family: var(--display); font-size: 2.5rem; font-weight: 500; color: var(--accent); line-height: 1;
  font-variant-numeric: tabular-nums; font-variation-settings: 'SOFT' 0,'WONK' 0,'opsz' 60; letter-spacing: -.024em;
}
.stat .k { color: var(--muted); font-weight: 700; margin-top: 3px; font-size: .84rem;
  text-transform: uppercase; letter-spacing: .08em; }

/* Photo placeholders — quiet neutrals now, not six competing gradients.
   Swap in a real background-image whenever you have one. */
.ph {
  position: relative; border-radius: var(--radius); overflow: hidden;
  background: var(--accent-tint); border: 1px solid var(--line);
  display: grid; place-items: center; min-height: 200px;
}
.ph::before { content: attr(data-emoji); font-size: 2.8rem; opacity: .8; }
.ph .cap {
  position: absolute; bottom: 9px; right: 11px; font-size: .68rem; font-weight: 700;
  background: rgba(17,23,26,.62); color: #fff; padding: 3px 9px; border-radius: 999px;
}
.ph.tall { min-height: 340px; }

/* A real photo in a placeholder slot. Same class, so swapping a
   <div class="ph"> for an <img class="ph"> needs no other changes.
   object-fit:cover crops to fill instead of squashing the aspect ratio. */
img.ph {
  display: block; width: 100%;
  /* height:auto is required, not optional: the width/height HTML attributes
     (kept to reserve space and avoid layout shift) apply as presentational
     hints, and aspect-ratio is ignored unless height resolves to auto. */
  height: auto;
  object-fit: cover; object-position: center;
  background: var(--accent-tint);
}
img.ph::before { content: none; }

/* Each slot gets an explicit aspect-ratio rather than height:100%.
   A percentage height against an auto-height parent collapses to the
   image's own proportions, so a portrait photo grows to ~1600px tall
   and swallows the page. aspect-ratio + object-fit:cover crops instead. */
.band img.ph       { aspect-ratio: 16 / 9;  min-height: 0; }
.media-card img.ph { aspect-ratio: 3 / 2;   min-height: 0; }
.split img.ph      { aspect-ratio: 4 / 3;   min-height: 0; }
/* blog thumbnails: a fixed ratio keeps a portrait and a landscape photo the
   same height when they sit side by side in the .posts grid */
.post img.ph       { aspect-ratio: 3 / 2;   min-height: 0; }
/* the collage has fixed 170px rows, so a real percentage height works there */
.collage img.ph    { height: 100%; min-height: 0; }
@media (max-width: 640px) {
  .band img.ph, .media-card img.ph, .split img.ph { aspect-ratio: 3 / 2; }
}
.ph.g1, .ph.g2, .ph.g3, .ph.g4, .ph.g5 { background: var(--accent-tint); }
.ph.g2 { background: var(--gold-tint); }
.ph.g4 { background: var(--paper); }
.ph.dark { background: var(--deep); border-color: var(--deep); }
.ph.dark::before { opacity: .55; }

.band {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 8px 8px 32px; margin-top: 24px; text-align: center;
}
.band .ph { border-radius: var(--radius); min-height: 280px; }
.band h2 { font-weight: 400; font-size: clamp(1.75rem,3.8vw,2.5rem); margin: 22px 0 7px;
  font-variation-settings: 'SOFT' 0,'WONK' 0,'opsz' 60; letter-spacing: -.024em; }
.band p { color: var(--muted); }

.media-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--sh-1);
}
.media-card .ph { border-radius: 0; border: 0; border-bottom: 1px solid var(--line); }
.media-card .m-body { padding: 19px; text-align: center; }
.media-card h3 { font-size: 1.2rem; margin-bottom: 7px; }
.media-card p { color: var(--muted); }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: center; }
.split .ph { min-height: 280px; }
.split h3 { font-size: 1.6rem; margin-bottom: 11px; letter-spacing: -.022em; }

/* .pill is the dark marketing CTA (legacy usage). Status chips are .chip. */
.pill {
  display: inline-block; background: var(--deep); color: #fff; padding: 9px 20px;
  border-radius: 999px; font-weight: 700; font-size: .9rem; margin-top: 14px;
}
.pill:hover { text-decoration: none; background: var(--accent); }

.posts { display: grid; grid-template-columns: 1fr; gap: 28px; }
@media (min-width: 780px) { .posts { grid-template-columns: 1fr 1fr; } }
.post .ph { min-height: 220px; margin-bottom: 16px; }
.post h3 { font-size: 1.55rem; margin-bottom: 10px; font-weight: 500; letter-spacing: -.022em; }
.post p { color: var(--ink-soft); }
.post .meta { color: var(--muted); font-size: .84rem; margin-top: 12px; font-weight: 600; }

.collage { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 170px; gap: 14px; }
.collage .ph { min-height: 0; height: 100%; }
.collage .span2 { grid-row: span 2; }
.collage .span2col { grid-column: span 2; }

/* ==========================================================================
   Footer
   ========================================================================== */

.footer { background: var(--deep); color: #B8C3BC; padding: 44px 0 24px; margin-top: 36px; }
.footer a { color: #B8C3BC; }
.footer a:hover { color: #fff; text-decoration: none; }
.footer .brand { color: #fff; margin-bottom: 11px; }
.footer .brand .dot { box-shadow: 0 0 0 3px rgba(199,145,56,.28); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 28px; }
.footer h4 {
  color: #fff; font-family: var(--body); font-size: .7rem; margin-bottom: 12px;
  text-transform: uppercase; letter-spacing: .11em; font-weight: 800;
}
.footer ul { list-style: none; display: grid; gap: 7px; font-size: .9rem; }
.footer .copy {
  border-top: 1px solid rgba(255,255,255,.12); margin-top: 30px; padding-top: 18px;
  font-size: .82rem; color: #8E9993; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap;
}

@media (max-width: 820px) {
  .footer-grid { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .collage { grid-template-columns: repeat(2, 1fr); }
  .stats-row { gap: 26px; }
  .banner { padding: 26px; }
  .section { padding: 42px 0; }
}

/* ==========================================================================
   Print — "print today's cards" from a dashboard
   ========================================================================== */

@media print {
  .nav, .footer, .tabs, .btn, .nav-cta, .filters { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .card { box-shadow: none; border: 1px solid #ccc; break-inside: avoid; }
  .view { display: block !important; }
}