/* ══════════════════════════════════════════════════════════════════════
   QUARTERS — homepage brand override for the shared marketing pages.

   product-tour / manifesto / vc-frameworks / coaching are built on
   /quarters-marketing.css (a warm-paper editorial system: Schibsted +
   Instrument-Serif italic accents, cream ground, green gradient buttons).
   That reads as a different brand from the homepage (usequarters.com /
   index.html) and founders.html, which use Hanken Grotesk sans on white
   with near-black buttons.

   This sheet is loaded AFTER /quarters-marketing.css (so it wins on equal
   specificity) and retargets the design tokens + a few components to the
   homepage system, WITHOUT editing the shared marketing stylesheet. Pages
   that link this MUST also load the Hanken Grotesk + JetBrains Mono webfonts.
   ══════════════════════════════════════════════════════════════════════ */

:root {
  --display: 'Hanken Grotesk', system-ui, sans-serif;
  --serif:   'Hanken Grotesk', system-ui, sans-serif;   /* homepage has no serif display */
  --news:    'Hanken Grotesk', system-ui, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, monospace;
  --paper: #ffffff; --paper-2: #fafafa; --card: #ffffff;
  --ink: #1c1d1f; --ink-2: #62676e; --ink-3: #9aa0a6;
  --line: rgba(20,24,28,.09); --line-soft: rgba(20,24,28,.05);
  --accent: #4f6e2f; --accent-2: #6d7d35; --accent-soft: rgba(79,110,47,.12); --on-accent: #f5f2ea;
  --qh-grad: linear-gradient(118deg, #4f6e2f 0%, #6d7d35 46%, #3e5a2a 100%);
}
/* The evergreen colorway forces the cream ground via --canvas on a selector
   more specific than :root — override it (and the body rule) to white. */
html[data-accent="evergreen"] { --canvas: #ffffff; --accent: #4f6e2f; --accent-2: #6d7d35; }
html[data-accent="evergreen"] body { background: #ffffff; }

/* Big display type uses the homepage's lighter 500 weight. */
h1, h2 { font-weight: 500; }

/* Accent words (.serif and the .it headline-accent class) render as
   gradient-green SANS, not serif/italic. */
.serif, .it { font-family: var(--display); font-style: normal; font-weight: 600;
  background: var(--qh-grad); -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent; }
/* On the dark bands a dark gradient would vanish — solid light olive, upright. */
.close h2 .serif, .fl-one h2 .it { background: none; -webkit-text-fill-color: var(--accent-2); color: var(--accent-2); font-style: normal; }
/* Several shared rules re-italicize accent words at higher specificity —
   keep them upright sans (the homepage accent is never italic). */
.dia-head h2 .serif, .cmp-head h2 .serif, .sprint h2 .serif, .feat-text h2 .serif,
.vtext h3 .serif, .vpair-head h3 .serif,
.np-title h1 .it, .fl-hero h1 .it, .fl-price-head h2 .it { font-style: normal; }

/* Eyebrows: grey mono, green marker retained (homepage kick/mono style). */
.label { color: var(--ink-3); font-weight: 600; }

/* Primary buttons: near-black, white text (homepage .btn.pri). The shared
   sheet paints a green gradient via `.btn:not(.ghost){background-image}`
   (specificity 0,2,0), so override at the same selector AND clear the image,
   or the dark background-color stays hidden under the gradient. */
.btn:not(.ghost) { background: #1c1d1f; background-image: none; color: #fff; border-color: #1c1d1f; border-radius: 10px;
  box-shadow: 0 1px 2px rgba(20,24,28,.05), 0 10px 26px -14px rgba(20,24,28,.22); }
.btn:not(.ghost):hover { background: #1c1d1f; background-image: none; opacity: .92; }
.btn.ghost { background: transparent; color: var(--ink); border-color: rgba(20,24,28,.16); border-radius: 10px; }
.btn.ghost:hover { background: #f5f6f5; color: var(--ink); border-color: rgba(20,24,28,.30); }
/* Dark-band CTA flips to a light button (homepage dark-context treatment). */
.close .btn { background: #fff; background-image: none; color: #1c1d1f; border-color: #fff; }
.close .btn:hover { background: #fff; background-image: none; color: #1c1d1f; border-color: #fff; opacity: .92; }

/* Floating CTA + logo marks → near-black to match the homepage. */
.floatcta { background: #1c1d1f; color: #fff; border-color: #1c1d1f; }
.floatcta:hover { background: #1c1d1f; opacity: .92; }
.brand .mk, .fl-brand .mk { background: #1c1d1f; color: #fff; }