/* Modern Earner · Graphite (Edgard, 2026-10-03, implementation brief §03–04).
   Loaded LAST on every page. A dark editorial system: graphite canvas, light text, deep red for actions, a lighter
   red for small text on dark, one sans-serif family (Manrope), modest radii, thin rules, no glow.
   The older sheets keep their structure; this layer re-points their tokens and corrects the components whose
   colours were written for a light page. */

:root {
  /* Canvas and surfaces */
  --paper: #111315;          /* main canvas (old ivory) */
  --paper-2: #15181b;        /* alternate section, a step up */
  --card: #191d20;           /* content surface */
  --surface-2: #242a2e;      /* elevated: forms, selected panels */
  --noir: #191d20;           /* old "black cards" become the content surface */
  --bone: #e9eae6;           /* text on surfaces (old bone) */
  /* Text */
  --ink: #f4f4f1;
  --ink-2: #d4d9dc;
  --muted: #afb7bd;
  /* Lines */
  --line: #333b42;
  --line-2: #48525a;
  /* Red: a fill for actions, a lighter tone for text and rules on dark */
  --red-fill: #9b1b1b;
  --red-fill-hi: #b32424;
  --red: #f06b73;
  --red-hi: #ff8f95;
  --red-soft: rgba(240, 107, 115, 0.14);
  --rose: #f06b73;
  /* One family */
  --serif: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --display: var(--sans);
  --radius: 8px;
  --radius-sm: 6px;
  --shadow: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 12px 28px -20px rgba(0, 0, 0, 0.7);
  --shadow-lg: 0 24px 60px -30px rgba(0, 0, 0, 0.8);
  color-scheme: dark;
}

html, body { background: var(--paper); color: var(--ink); }
body { font-size: 17px; line-height: 1.65; }
::selection { background: rgba(240, 107, 115, 0.35); color: #fff; }
a { color: var(--red); }
a:hover { color: var(--red-hi); }
:focus-visible, .btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid #f4f4f1; outline-offset: 3px; }

/* Type: one sans family, short tight headings, no italics-as-decoration */
.display, h1, h2, h3, .hero-title, .fg-title, .q-legend, .card-title { font-family: var(--sans); font-style: normal; letter-spacing: -0.02em; color: var(--ink); }
.display, .hero-title, .fg-title { font-weight: 700; line-height: 1.08; }
.h-xl, .hero-title { font-size: clamp(2.3rem, 4.8vw, 4.4rem); }
.h-lg, .fg-title { font-size: clamp(1.75rem, 3.2vw, 2.625rem); }
.h-md { font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 700; }
em, i, .grad, .fg-kicker em { font-style: normal; }
/* Headings that the older sheets set light (they were serif): bold sans now */
.keep-title, .finish-title, .next-title, .lb-q, .simple-hero h1, .prose h2, .prose h3, .section-head h2 { font-family: var(--sans); font-weight: 800; letter-spacing: -0.02em; }
.lede { color: var(--ink-2); font-size: clamp(1.02rem, 1.3vw, 1.15rem); line-height: 1.6; max-width: 62ch; }
p { max-width: 70ch; }
.muted, .small.muted { color: var(--muted); }
.eyebrow, .mono, .fg-kicker { color: var(--red); letter-spacing: 0.16em; }
.eyebrow::before { background: var(--red); }

/* Header / footer */
.site-header { background: rgba(17, 19, 21, 0.94); border-bottom: 1px solid var(--line); backdrop-filter: blur(8px); }
.mark b { font-family: var(--sans); font-weight: 800; font-size: 19px; letter-spacing: -0.01em; color: var(--ink); }
.mark span { color: var(--red); }
.header-nav a { color: var(--ink-2); }
.header-nav a:hover { color: var(--ink); }
.site-footer { border-top: 1px solid var(--line); color: var(--muted); background: #0d0f10; }
.site-footer a { color: var(--ink-2); }
.demo-banner { background: #2a2416; border-bottom-color: #5c4a1c; color: #f1d58a; }
.demo-banner a { color: #f1d58a; }
.skip-link { background: var(--ink); color: var(--paper); }

/* Buttons: solid deep red, light label, modest radius, no gradient, no offset shadow */
.btn, .btn-red, .btn-lg { border-radius: 8px; background: var(--red-fill); border: 1px solid var(--red-fill); color: #fff; box-shadow: none; min-height: 48px; font-weight: 700; }
.btn:hover, .btn-red:hover { background: var(--red-fill-hi); border-color: var(--red-fill-hi); color: #fff; transform: none; }
.btn-ghost, .btn-light { background: transparent; color: var(--ink); border: 1px solid var(--line-2); }
.btn-ghost:hover, .btn-light:hover { background: var(--surface-2); color: var(--ink); border-color: var(--ink-2); }
.btn[disabled] { background: var(--surface-2); color: var(--muted); border-color: var(--line); }
.btn::after, .btn::before { display: none !important; }

/* Surfaces: flat panels with a thin line, small radius */
.card, .price-card, .jt-fold, .insight-block, .first-move, .perspective, .jt-doubt, .call-card, .toc .tag { background: var(--card); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: none; }
.section-alt, .simple-hero, .section { background: transparent; }
.section-alt { background: var(--paper-2); border-block: 1px solid var(--line); }
.tag, .chip, .pill { border-radius: 6px; }

/* Forms: dark field, visible border, real labels */
input[type='text'], input[type='email'], input[type='tel'], input:not([type]), textarea, select {
  background: var(--surface-2); color: var(--ink); border: 1px solid #5b666e; border-radius: 6px;
}
input::placeholder, textarea::placeholder { color: #8d969c; }
input:focus, textarea:focus, select:focus { border-color: var(--ink-2); outline: 2px solid rgba(244, 244, 241, 0.35); outline-offset: 1px; }
label { color: var(--ink-2); }
[aria-invalid='true'] { border-color: #ff8f95 !important; }

/* The old warm radial washes behind sections: gone. Sections are flat graphite; bands are set per page. */
#help, #subscribe, #about-edgard, #about-edgard.section-alt, .simple-hero, .hero, .quiz, .lessons, .hook, .hook.section-alt { background: transparent; }

/* Footer links: plain text links, not cards */
.footer-links a { display: inline; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--ink-2); font-weight: 500; }
.footer-links a:hover { color: var(--ink); transform: none; }


/* Reduced motion: still (the animations keep their triggers and timing otherwise; brief v2 §21) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Phones: 20px gutters */
@media (max-width: 600px) { :root { --gutter: 20px; } }

/* Video: a restrained play control in the corner, never over a face (brief §04). No pulse, no glow. */
.video-shell, .video-inner { border-radius: var(--radius); background: #0b0c0d; }
.video-inner.has-poster .video-play .disc {
  left: 16px; top: auto; bottom: 16px; translate: none; width: 60px; height: 60px; aspect-ratio: auto;
  border-radius: 8px; border: 0; background: var(--red-fill); color: #fff; font-size: 20px; padding-left: 3px;
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, 0.6); animation: none; -webkit-backdrop-filter: none; backdrop-filter: none; text-shadow: none;
}
.video-inner.has-poster .video-play:hover .disc, .video-inner.has-poster .video-play:focus-visible .disc { background: var(--red-fill-hi); }
.video-play .disc { box-shadow: none; }
@media (max-width: 600px) { .video-inner.has-poster .video-play .disc { width: 48px; height: 48px; left: 12px; bottom: 12px; font-size: 16px; } }

/* Questions: full-width rows, a clear selected state that isn't colour alone (brief §04) */
.opt label { background: var(--card); border: 1px solid var(--line-2); border-radius: 8px; color: var(--ink); box-shadow: none; }
.opt label:hover { border-color: var(--ink-2); }
.opt input:checked + label { border-color: var(--ink); background: var(--surface-2); box-shadow: inset 4px 0 0 var(--red-fill); }
.opt input:checked + label .key { background: var(--red-fill); color: #fff; border-color: var(--red-fill); }
.opt label { position: relative; padding-right: 44px; }
.opt input:checked + label::after { content: '✓'; position: absolute; right: 16px; top: 50%; translate: 0 -50%; font-weight: 800; color: var(--ink); }
.opt .key { background: transparent; border: 1px solid var(--line-2); color: var(--ink-2); border-radius: 6px; }
.opt input:focus-visible + label { outline: 2px solid var(--ink); outline-offset: 2px; }
.opt-group { margin: 18px 0 8px; font: 700 12px/1.3 var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); }
.opt-group:first-child { margin-top: 4px; }
.q-note { color: var(--muted); }
.q-progress-text { color: var(--red); }

/* Result: the useful part first (brief §08) */
.result-rows { display: grid; gap: 0; margin: 22px 0 8px; border-top: 1px solid var(--line); }
.result-row { padding: 16px 0; border-bottom: 1px solid var(--line); }
.result-row p { margin: 0 0 6px; color: var(--ink-2); }
.result-row-label { font: 700 12px/1.3 var(--sans) !important; letter-spacing: 0.14em; text-transform: uppercase; color: var(--red) !important; }
.result-row-strong { color: var(--ink) !important; font-weight: 700; font-size: 1.08rem; }
.result-row.is-action { padding-left: 16px; border-left: 2px solid var(--red-fill); }
.result-row.is-action p:not(.result-row-label) { color: var(--ink); }
.result-call { margin: 28px 0 8px; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--card); }
.result-call p { margin: 0; color: var(--ink-2); }
.result-call-title { color: var(--ink) !important; font-weight: 700; margin-bottom: 4px !important; }
.deep-card { background: var(--card); border: 1px solid var(--line); border-radius: 6px; }
.deep-title { color: var(--ink); }

/* Header menu: a visible button on phones, one clear action */
.nav-toggle { border-radius: 8px; border: 1px solid var(--line-2); color: var(--ink); background: transparent; }
.header-nav .nav-cta { color: #fff; background: var(--red-fill); padding: 9px 14px; border-radius: 8px; }
.header-nav .nav-cta:hover { background: var(--red-fill-hi); color: #fff; }
@media (max-width: 860px) {
  .header-nav { background: var(--paper) !important; border-bottom: 1px solid var(--line); }
  .header-nav a { border-color: var(--line) !important; }
}
.result-row.is-locked { padding-left: 16px; border-left: 2px solid var(--red-fill); }
.result-row.is-locked p:not(.result-row-label) { color: var(--muted); }
.result-row.is-locked p:not(.result-row-label)::before { content: "\1F512\00A0"; }