/* ═══════════════════════════════════════════════════════════════════════════
   NoFooly design tokens — PUBLIC system ("Editorial Craft").  Violet 2026-09-04
   Ruling: D:\Jackson\brand\NOFOOLY_BRAND.md.  One file, imported by every
   public page and every PDF generator.  Adopt by swapping variables, not layout.
   ═══════════════════════════════════════════════════════════════════════════ */
@import url('fonts.css'); /* self-hosted: Newsreader · Plus Jakarta Sans · Space Grotesk (OFL) */

:root{
  /* ── colour: surfaces (tiers 0→3) ─────────────────────────────────────── */
  --nf-canvas:#fbf9f5;          /* 0 parchment page */
  --nf-surface:#ffffff;         /* 1 card / paper */
  --nf-inset:#f3efea;           /* 2 oatmeal panel, fields, stripes */
  --nf-band:#0f2b48;            /* 3 navy band (masthead, footer, hero strip) */
  --nf-line:#e7e0d6;
  --nf-line-strong:#d6cdbf;

  /* ── colour: roles ───────────────────────────────────────────────────── */
  --nf-navy:#0f2b48;  --nf-navy-deep:#0a1f36;  --nf-navy-soft:#e8eef5;
  --nf-amber:#d97706; --nf-amber-deep:#b45309; --nf-amber-soft:#fdf3e2;
  --nf-terracotta:#c2410c; --nf-terracotta-soft:#fdeee6;
  --nf-green:#15803d; --nf-green-soft:#e9f5ec;
  --nf-ink:#1e293b; --nf-muted:#64748b; --nf-faint:#94a3b8;
  --nf-on-band:#ffffff; --nf-on-band-muted:#b8c4d3; --nf-on-amber:#1a1405;

  /* ── type ────────────────────────────────────────────────────────────── */
  --nf-font-head:'Newsreader',Georgia,'Times New Roman',serif;
  --nf-font-body:'Plus Jakarta Sans','Segoe UI',system-ui,-apple-system,Roboto,Helvetica,Arial,sans-serif;
  --nf-font-label:'Space Grotesk','Plus Jakarta Sans','Segoe UI',system-ui,sans-serif;
  --nf-fs-xs:.75rem;  --nf-fs-sm:.875rem; --nf-fs-base:1.0625rem; --nf-fs-lg:1.125rem;
  --nf-fs-xl:1.375rem; --nf-fs-2xl:1.75rem; --nf-fs-3xl:clamp(2.1rem,5vw,3.1rem);
  --nf-lh-tight:1.1; --nf-lh-snug:1.3; --nf-lh-body:1.6;
  --nf-track-label:.08em;  /* eyebrows, pills */
  --nf-track-head:-.015em;

  /* ── space / radius / elevation ──────────────────────────────────────── */
  --nf-sp-1:4px; --nf-sp-2:8px; --nf-sp-3:12px; --nf-sp-4:16px; --nf-sp-5:24px;
  --nf-sp-6:32px; --nf-sp-7:40px; --nf-sp-8:48px; --nf-sp-9:64px; --nf-sp-10:96px;
  --nf-r-sm:6px; --nf-r-md:10px; --nf-r-lg:14px; --nf-r-pill:999px;
  --nf-shadow-paper:0 1px 2px rgba(15,43,72,.05),0 6px 20px rgba(15,43,72,.07);
  --nf-shadow-lift:0 2px 4px rgba(15,43,72,.06),0 14px 36px rgba(15,43,72,.12);
  --nf-container:74rem;

  /* ── LEGACY ALIASES — the five site pages read these today.  Keep until each
        page uses nf-* directly, then delete this block. ──────────────────── */
  --bg:var(--nf-canvas); --panel:var(--nf-surface); --panel2:var(--nf-inset); --field:var(--nf-surface);
  --line:var(--nf-line); --text:var(--nf-ink); --muted:var(--nf-muted);
  --gold:var(--nf-amber); --accent:var(--nf-navy); --accent-ink:var(--nf-on-band);
  --pink:var(--nf-terracotta);            /* the launch pill: urgency, not neon */
  --good:var(--nf-green); --bad:var(--nf-terracotta); --warn:var(--nf-amber-deep);
  --ink:var(--nf-navy);
}

/* ── OPS mode: same palette, turned to night.  Add class="nf-ops" on <html>.
      Console, orders, generators' chrome, HQ.  NO violet, NO fuchsia. ─────── */
.nf-ops{
  --nf-canvas:#0b1220; --nf-surface:#111a2b; --nf-inset:#18233a; --nf-band:#0a1f36;
  --nf-line:#22304a; --nf-line-strong:#2f405e;
  --nf-ink:#e6ecf5; --nf-muted:#93a1b5; --nf-faint:#5f6f88;
  --nf-navy-soft:#16294a; --nf-amber-soft:#2b1f0a; --nf-terracotta-soft:#33170e; --nf-green-soft:#0e2a19;
  --nf-shadow-paper:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35); --nf-shadow-lift:var(--nf-shadow-paper);
  --accent:var(--nf-amber); --accent-ink:var(--nf-on-amber);
  color-scheme:dark;
}

/* ── NIGHT ground (Wayne's pick 2026-09-04: "C but not the top bar").  The PUBLIC web
      pages carry class="nf-night" on <html>.  Same navy/amber/type; PDFs stay light. ─ */
.nf-night{
  /* 2026-09-23: retuned to the homepage hero's navy (Wayne: 'lose the white, too much snow'); night is now the web default */
  --nf-canvas:#071426; --nf-surface:#0e2339; --nf-inset:#132c47; --nf-band:#0a1f36;
  --nf-line:#1d3753; --nf-line-strong:#2b4b6e;
  --nf-ink:#e6ecf5; --nf-muted:#9fadc2; --nf-faint:#7f8ea8;   /* N-01: 5.65 canvas / 5.25 surface / 4.73 inset */
  --nf-navy:#f1e9dc; --nf-navy-deep:#ffffff; --nf-navy-soft:#16294a;
  --nf-amber-deep:#f0a640; --nf-amber-soft:#2b1f0a; --nf-terracotta-soft:#33170e; --nf-green-soft:#0e2a19;
  --nf-green:#4ade80; --nf-terracotta:#f0764a;
  --nf-shadow-paper:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35); --nf-shadow-lift:var(--nf-shadow-paper);
  --accent:var(--nf-amber); --accent-ink:var(--nf-on-amber);
  color-scheme:dark;
}
.nf-night .btn-primary,.nf-night .nav a.cta,.nf-night .btn.primary,.nf-night .btn:not(.ghost),.nf-night .unlock .badge,.nf-night .skip{
  background:var(--nf-amber)!important;color:var(--nf-on-amber)!important}
.nf-night .btn-primary:hover,.nf-night .nav a.cta:hover,.nf-night .btn.primary:hover{background:#f0a640!important;color:var(--nf-on-amber)!important}
.nf-night .btn-ghost,.nf-night .btn.ghost{color:var(--nf-ink);border-color:var(--nf-line-strong)} .nf-night .btn.ghost:hover{border-color:var(--nf-amber)}
.nf-night header{background:rgba(7,20,38,.96)!important;border-bottom:1px solid var(--nf-line)}
.nf-night .launch code{background:var(--nf-amber);color:var(--nf-on-amber)}
.nf-night .launch{background:var(--nf-amber-soft)}
.nf-night .p-head,.nf-night .band,.nf-night .r-head{background:#0f2b48!important;border-bottom:3px solid var(--nf-amber)}
.nf-night .p-head h2,.nf-night .band h1,.nf-night .band h2{color:#fff}
.nf-night .step .n{background:var(--nf-amber);color:var(--nf-on-amber)}
.nf-night .seg .opt.on{border-color:var(--nf-amber);background:var(--nf-amber-soft);color:var(--nf-ink)}
.nf-night .pill--trust{border-color:var(--nf-green);color:var(--nf-green);background:var(--nf-green-soft)}
.nf-night .kicker,.nf-night .eyebrow{color:var(--nf-amber)}
.nf-night code{background:var(--nf-inset);color:var(--nf-ink)}
.nf-night .hp b,.nf-night .price{color:var(--nf-ink)}
.nf-night .card .tag,.nf-night .tier .tag{color:var(--nf-amber)}
.nf-night img.paper-shot,.nf-night .paper img{filter:none}
.nf-night ::selection{background:#3a2a0a}

/* ── LIGHT view on the web (toggle): cool white, not parchment (Wayne 09-04: "not a fan of the beige").
      Parchment stays the PDF/paper ground.  <html class="nf-light">. ───────────────────────────── */
.nf-light{--nf-canvas:#ffffff;--nf-inset:#f2f5f9;--nf-line:#dde4ec;--nf-line-strong:#c7d1dd;--nf-navy-soft:#e8eef5;--nf-muted:#5b6b82;--nf-faint:#5f6e84}  /* N-01: muted 5.43/4.96, faint 5.19/4.74 on #fff/#f2f5f9 */
.nf-light header{background:rgba(255,255,255,.94)!important}

/* ── theme toggle (shared key nf_theme with nofooly.com and the app) ─────────────────────────── */
.theme-toggle{appearance:none;background:transparent;border:1px solid var(--nf-line-strong);color:var(--nf-ink);
  width:36px;height:36px;border-radius:999px;cursor:pointer;font-size:15px;line-height:1;display:inline-flex;
  align-items:center;justify-content:center;margin-right:8px;flex:0 0 auto}
.theme-toggle:hover{border-color:var(--nf-amber);color:var(--nf-amber)}

/* ── base ────────────────────────────────────────────────────────────────── */
body{background:var(--nf-canvas);color:var(--nf-ink);font-family:var(--nf-font-body);
  font-size:var(--nf-fs-base);line-height:var(--nf-lh-body);-webkit-font-smoothing:antialiased}
h1,h2,.nf-display{font-family:var(--nf-font-head);font-weight:600;color:var(--nf-navy);
  letter-spacing:var(--nf-track-head);line-height:var(--nf-lh-tight)}
h1{font-size:var(--nf-fs-3xl)} h2{font-size:var(--nf-fs-2xl);line-height:var(--nf-lh-snug)}
h1 em,h2 em{font-style:italic;font-weight:500;color:inherit}   /* emphasis = italic serif, not colour */
h3{font-family:var(--nf-font-body);font-weight:700;font-size:var(--nf-fs-lg);color:var(--nf-navy);line-height:var(--nf-lh-snug)}
a{color:var(--nf-navy);text-decoration:underline;text-decoration-color:var(--nf-amber);text-underline-offset:3px}
a:hover{color:var(--nf-amber-deep)}
:focus-visible{outline:2px solid var(--nf-amber);outline-offset:3px;border-radius:4px}
::selection{background:var(--nf-amber-soft)}

/* ── utilities ───────────────────────────────────────────────────────────── */
.eyebrow,.kicker{font-family:var(--nf-font-label);font-weight:700;font-size:var(--nf-fs-xs);
  letter-spacing:var(--nf-track-label);text-transform:uppercase;color:var(--nf-amber-deep)}
.rule{display:block;width:28px;height:3px;background:var(--nf-amber);border-radius:2px;margin:0 0 10px}

.pill{display:inline-flex;align-items:center;gap:6px;font-family:var(--nf-font-label);font-weight:700;
  font-size:var(--nf-fs-xs);letter-spacing:.06em;text-transform:uppercase;line-height:1;
  padding:7px 11px;border-radius:var(--nf-r-pill);border:1px solid var(--nf-line-strong);
  background:var(--nf-surface);color:var(--nf-navy)}
.pill--trust{border-color:var(--nf-green);color:var(--nf-green);background:var(--nf-green-soft)}
.pill--trust::before{content:"✓"}
.pill--warn{border-color:var(--nf-terracotta);color:#fff;background:var(--nf-terracotta)}
.pill--amber{border-color:var(--nf-amber);color:var(--nf-amber-deep);background:var(--nf-amber-soft)}

.btn-primary,.btn-accent,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:46px;padding:11px 22px;border-radius:var(--nf-r-md);font-family:var(--nf-font-body);
  font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none;border:1px solid transparent;cursor:pointer}
.btn-primary{background:var(--nf-navy);color:var(--nf-on-band)} .btn-primary:hover{background:var(--nf-navy-deep);color:#fff}
.btn-accent{background:var(--nf-amber);color:var(--nf-on-amber)} .btn-accent:hover{background:#c46a05;color:var(--nf-on-amber)}
.btn-ghost{background:transparent;color:var(--nf-navy);border-color:var(--nf-line-strong)} .btn-ghost:hover{border-color:var(--nf-navy)}

.card{background:var(--nf-surface);border:1px solid var(--nf-line);border-radius:var(--nf-r-lg);
  padding:var(--nf-sp-5);box-shadow:var(--nf-shadow-paper)}
.card--flag{border-color:var(--nf-amber);box-shadow:0 0 0 1px var(--nf-amber),var(--nf-shadow-paper)}
.inset{background:var(--nf-inset);border:1px solid var(--nf-line);border-radius:var(--nf-r-md);padding:var(--nf-sp-4)}
.band{background:var(--nf-band);color:var(--nf-on-band);border-bottom:3px solid var(--nf-amber)}
.band .eyebrow{color:var(--nf-amber)} .band h1,.band h2{color:#fff}

.price,.figure{font-family:var(--nf-font-label);font-weight:700;font-variant-numeric:tabular-nums;color:var(--nf-navy)}
.lockup{font-family:var(--nf-font-label);font-weight:700;font-size:var(--nf-fs-xs);letter-spacing:var(--nf-track-label);
  text-transform:uppercase;color:var(--nf-muted)}           /* ASSEMBLED BY JACKSON · CHECKED BY WAYNE */
.wordmark{font-family:var(--nf-font-body);font-weight:800;letter-spacing:.04em;color:var(--nf-navy);text-decoration:none}
.wordmark span{color:var(--nf-amber)}                                    /* JACKSON<span>.</span> */

.field{width:100%;background:var(--nf-surface);border:1px solid var(--nf-line-strong);border-radius:var(--nf-r-sm);
  color:var(--nf-ink);padding:11px 12px;font:inherit;min-height:46px}
.field:focus{outline:none;border-color:var(--nf-navy);box-shadow:0 0 0 3px var(--nf-navy-soft)}
.field::placeholder{color:var(--nf-faint)}

/* ═══ PRINT — the PDFs (generate.html, business.html, duel.html, md_to_pdf.mjs).
   Navy band, amber rule, no shadows.  @page margins are owned by each generator
   (12mm 0 14mm, print-verified 09-01) — do NOT set @page here. ═══════════════ */
@media print{
  :root{--nf-canvas:#fff;--nf-shadow-paper:none;--nf-shadow-lift:none}
  body{background:#fff;color:var(--nf-ink);font-size:10.5pt;line-height:1.55;
    -webkit-print-color-adjust:exact;print-color-adjust:exact}
  .card,.inset,.tile,.callout{box-shadow:none}
  .band,.r-head,.head{background:var(--nf-navy)!important;background-image:none!important;color:#fff;
    border-bottom:3px solid var(--nf-amber)}
  .r-head .brand,.head .k{font-family:var(--nf-font-label);color:var(--nf-amber);letter-spacing:.14em}
  .r-head h2,.head h1{font-family:var(--nf-font-head);font-weight:600;color:#fff;letter-spacing:-.01em}
  .r-head .meta,.foot,.lockup{font-family:var(--nf-font-label);color:var(--nf-on-band-muted);letter-spacing:.1em}
  #report h3,.kick,h2{font-family:var(--nf-font-label);color:var(--nf-navy);letter-spacing:.12em}
  #report h3::before,.kick::before{background:var(--nf-amber)}
  h2{border-top-color:var(--nf-amber)}
  table th{border-bottom:2px solid var(--nf-navy);font-family:var(--nf-font-label);color:var(--nf-muted)}
  .tile .val,.tile .v,td.price,.price{font-family:var(--nf-font-label)}
  .verdict,.intent{font-family:var(--nf-font-head);font-size:11.5pt;line-height:1.6;color:var(--nf-ink);
    background-image:none;border-top:3px solid var(--nf-amber);outline:none}
  .callout{border-left-color:var(--nf-amber);background:var(--nf-amber-soft)}
  .callout.good{border-left-color:var(--nf-green);background:var(--nf-green-soft)}
  .callout.bad,.callout.warn{border-left-color:var(--nf-terracotta);background:var(--nf-terracotta-soft)}
  .fault{background:var(--nf-terracotta)}
  a{color:var(--nf-navy-deep);text-decoration-color:rgba(217,119,6,.6)}
  .btn-primary,.btn-accent,.btn-ghost,.leaflet-control-container,.op,.opnews,#status{display:none!important}
}

/* Phones: the site nav became wider than the screen (6 links + toggle + CTA in one row laid
   the page out at 607px on a 375px phone, so every page rendered shrunk). Below 720px the
   links drop under the logo as one swipeable strip that never widens the page. 2026-09-23 */
@media screen and (max-width:720px){
  header .nav{flex-wrap:wrap;row-gap:0}
  header .nav .links{order:3;flex:1 0 100%;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;gap:2px;padding-bottom:2px;
    -webkit-mask-image:linear-gradient(to right,#000 88%,transparent);mask-image:linear-gradient(to right,#000 88%,transparent)}
  header .nav .links::-webkit-scrollbar{display:none}
  header .nav .links > *{flex:0 0 auto;white-space:nowrap}
  header .nav .links a{padding-inline:10px}
}
/* Guide images (BabyLoveGrowth, up to 1940px wide) had no cap and widened guide pages on phones. */
@media screen{ main img,article img,.wrap img{max-width:100%;height:auto} }
/* Wide guide tables scroll inside themselves on phones instead of widening the page. */
@media screen and (max-width:720px){ main table,article table{display:block;max-width:100%;overflow-x:auto} }

/* Night is the default web look (2026-09-23): cards read as the hero's glass, the hero frame keeps an edge on the navy page */
.nf-night .hx{box-shadow:0 0 0 1px rgba(255,255,255,.07),0 20px 60px rgba(0,0,0,.35)}
.nf-night body{background:radial-gradient(1200px 600px at 50% -200px,#0f2b48 0%,rgba(15,43,72,0) 70%),var(--nf-canvas)}
/* The sample report is a picture of the PDF, and the PDF is paper: it keeps the light tokens inside the navy page */
.nf-night .paper{--nf-canvas:#fbf9f5;--nf-surface:#ffffff;--nf-inset:#f3efea;--nf-band:#0f2b48;--nf-line:#e7e0d6;--nf-line-strong:#d6cdbf;
  --nf-navy:#0f2b48;--nf-navy-deep:#0a1f36;--nf-navy-soft:#e8eef5;--nf-amber-deep:#b45309;--nf-amber-soft:#fdf3e2;--nf-terracotta:#c2410c;
  --nf-terracotta-soft:#fdeee6;--nf-green:#15803d;--nf-green-soft:#e9f5ec;--nf-ink:#1e293b;--nf-muted:#64748b;--nf-faint:#94a3b8;color-scheme:light;color:var(--nf-ink)}

/* ONE HEADER (2026-09-23): the homepage hero's pill bar on every page, navy in both themes; no tagline under the logo */
header.jh{background:transparent!important;border:0!important;padding:12px 0 0!important;position:relative;z-index:20}
.jh-bar{width:min(1240px,calc(100vw - 32px));margin:0 auto;display:flex;align-items:center;gap:8px;background:#0a1f36;border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:6px}
.jh-pill{display:inline-flex;align-items:center;height:40px;padding:0 16px;border-radius:999px;background:transparent;border:1px solid rgba(255,255,255,.16);color:#e8eef6!important;text-decoration:none;font:600 .86rem/1 var(--nf-font-body);white-space:nowrap;cursor:pointer;list-style:none}
.jh-pill::-webkit-details-marker{display:none}
.jh-pill:hover{border-color:#f0a640}
.jh-logo{background:#071426;font-family:var(--nf-font-label);letter-spacing:.06em;font-weight:700}.jh-logo i{color:#f0a640;font-style:normal}
.jh-links{display:flex;gap:6px}
.jh-bar .theme-toggle{margin:0 0 0 auto;width:40px;height:40px;border-color:rgba(255,255,255,.2);color:#e8eef6}
.jh-cta{background:#d97706!important;border-color:#d97706!important;color:#1b1200!important}
.jh-menu{display:none;position:relative}
.jh-drop{position:absolute;right:0;top:46px;z-index:30;background:#071426;border:1px solid rgba(255,255,255,.16);border-radius:16px;padding:8px;display:grid;min-width:210px;box-shadow:0 12px 30px rgba(0,0,0,.35)}
.jh-drop a{color:#e8eef6;text-decoration:none;padding:12px 14px;border-radius:10px;font-weight:600}.jh-drop a:hover{background:rgba(255,255,255,.08)}
@media (max-width:1100px){ .jh-links{display:none} .jh-menu{display:block} }
@media (max-width:420px){ .jh-pill{padding:0 12px;font-size:.8rem} .jh-bar{gap:6px} }
/* the hero's picture as a band at the top of the main pages */
.jband{position:relative;height:clamp(120px,19vw,210px);border-radius:22px;overflow:hidden;margin:18px 0 22px;border:1px solid rgba(255,255,255,.1);background:#0a1f36}
.jband.tall{height:clamp(150px,24vw,260px)}
.jband img{width:100%;height:100%;object-fit:cover;object-position:62% 56%;display:block}
.jband::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,20,38,0) 55%,rgba(7,20,38,.45) 100%)}
.jband + .hero,.jband + section .hero,.jband + div.hero{padding-top:4px!important}
/* a little life (Wayne 2026-09-23): picture bands drift very slowly; still for reduced motion */
.jband.biz img{object-position:64% 70%}
@media (prefers-reduced-motion:no-preference){
  .jband img{animation:jdrift 26s ease-in-out infinite alternate;transform-origin:62% 60%;will-change:transform}
  @keyframes jdrift{from{transform:scale(1.02) translate3d(0,0,0)}to{transform:scale(1.09) translate3d(-1.2%,-1%,0)}}
}