/**
 * BBMT Homepage — the Stakkr front page.
 *
 * The STAKKR BRAND block below is duplicated byte-identically from
 * bbmt-calculators / bbmt-accounts (the plugins stay self-contained).
 * bin/check-tokens.sh fails a commit if the three drift.
 * Everything else is scoped under .stakkr-homepage.
 */

/* @@STAKKR-SHARED-START@@ */
/* =============================================================================
   STAKKR BRAND — shared design tokens + signature components.
   KEEP BYTE-IDENTICAL between:
     wp-content/plugins/bbmt-calculators/assets/css/bbmt-calculators.css
     wp-content/plugins/bbmt-accounts/assets/css/bbmt-accounts.css
   Enforced by bin/check-tokens.sh (this block + assets/img/stakkr-mark.svg).

   Selectors are double-scoped so the one block works in both plugins; the
   half that doesn't match on a given page is inert.

   Stream swatches (fixed, semantic): plum = job/salary; side-income cycle is
   mustard -> terracotta -> rust -> maroon (Set A). An all-warm set can't be
   made colour-vision-deficiency-distinguishable past ~4 steps, so the stream
   NAME on every pill/segment is the primary identifier and colour is a
   secondary cue. (Pattern-fill fallback for 6+ streams: deferred.)
   ========================================================================== */
.bbmt-calculator,
.bbmt-dashboard,
.stakkr-homepage,
body.stakkr-chrome {
  --stakkr-paper: #FBF6EC;
  --stakkr-ink: #241A26;
  --stakkr-ink-soft: #6E5F67;       /* secondary text — 6.0:1 on card (WCAG AA) */
  --stakkr-plum: #3D2C3F;           /* dark accent / stream: job/salary */
  --stakkr-terracotta: #D9724B;     /* primary accent / stream 2 (fills + big numbers) */
  --stakkr-mustard: #E8A93A;        /* stream 1 */
  --stakkr-rust: #A8452F;           /* stream 3 / alerts / small accent text */
  --stakkr-maroon: #5A2A22;         /* stream 4 */
  --stakkr-line: #EADFC7;           /* decorative dividers, dashed rules */
  --stakkr-line-strong: #988A63;    /* form-field / control borders — 3:1 (WCAG 1.4.11) */
  --stakkr-card: #FFFFFF;           /* card surfaces */
  --stakkr-positive: #4F6B45;       /* "clear / ahead" states — 6:1 on card */
  --stakkr-shadow: 36 26 38;        /* = ink, for card shadow rgb(...) / alpha */
}

/* --- Stream pill: the Stakkr signature ------------------------------------- */
.bbmt-calculator .bbmt-stream-pill,
.bbmt-dashboard .bbmt-stream-pill {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-width: 0;
  padding: 11px 16px;
  border-radius: 100px;
  box-shadow: inset 0 0 0 1px rgb(var(--stakkr-shadow) / 0.10);
  font-family: 'Space Grotesk', 'Inter', ui-sans-serif, sans-serif;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
}
.bbmt-calculator .bbmt-stream-pill + .bbmt-stream-pill,
.bbmt-dashboard .bbmt-stream-pill + .bbmt-stream-pill { margin-top: 7px; }
.bbmt-calculator .bbmt-stream-pill .bbmt-stream-pill-name,
.bbmt-dashboard .bbmt-stream-pill .bbmt-stream-pill-name {
  min-width: 0;
  overflow-wrap: anywhere;   /* a narrow funnel pill wraps to 2 lines rather than truncating the name */
}
.bbmt-calculator .bbmt-stream-pill .bbmt-stream-pill-value,
.bbmt-dashboard .bbmt-stream-pill .bbmt-stream-pill-value {
  flex: none;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.bbmt-calculator .bbmt-stream-pill.s1, .bbmt-dashboard .bbmt-stream-pill.s1 { background: var(--stakkr-mustard);    color: var(--stakkr-ink); }
.bbmt-calculator .bbmt-stream-pill.s2, .bbmt-dashboard .bbmt-stream-pill.s2 { background: var(--stakkr-terracotta); color: var(--stakkr-ink); }
.bbmt-calculator .bbmt-stream-pill.s3, .bbmt-dashboard .bbmt-stream-pill.s3 { background: var(--stakkr-rust);       color: #fff; }
.bbmt-calculator .bbmt-stream-pill.s4, .bbmt-dashboard .bbmt-stream-pill.s4 { background: var(--stakkr-maroon);     color: #fff; }
.bbmt-calculator .bbmt-stream-pill.job, .bbmt-dashboard .bbmt-stream-pill.job { background: var(--stakkr-plum);     color: #fff; }

/* --- Segmented stream bar + legend --------------------------------------- */
.bbmt-calculator .bbmt-stream-bar,
.bbmt-dashboard .bbmt-stream-bar {
  display: flex;
  height: 24px;
  margin: 2px 0 14px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px rgb(var(--stakkr-shadow) / 0.10);
}
.bbmt-calculator .bbmt-stream-bar > span,
.bbmt-dashboard .bbmt-stream-bar > span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 2px;
  overflow: hidden;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 10.5px;
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.bbmt-calculator .bbmt-stream-bar .s1, .bbmt-dashboard .bbmt-stream-bar .s1 { background: var(--stakkr-mustard);    color: var(--stakkr-ink); }
.bbmt-calculator .bbmt-stream-bar .s2, .bbmt-dashboard .bbmt-stream-bar .s2 { background: var(--stakkr-terracotta); color: var(--stakkr-ink); }
.bbmt-calculator .bbmt-stream-bar .s3, .bbmt-dashboard .bbmt-stream-bar .s3 { background: var(--stakkr-rust);       color: #fff; }
.bbmt-calculator .bbmt-stream-bar .s4, .bbmt-dashboard .bbmt-stream-bar .s4 { background: var(--stakkr-maroon);     color: #fff; }
.bbmt-calculator .bbmt-stream-bar .job, .bbmt-dashboard .bbmt-stream-bar .job { background: var(--stakkr-plum);     color: #fff; }

.bbmt-calculator .bbmt-stream-legend,
.bbmt-dashboard .bbmt-stream-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  margin-top: 10px;
  font-family: 'Space Grotesk', 'Inter', ui-sans-serif, sans-serif;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--stakkr-ink);
}
.bbmt-calculator .bbmt-stream-legend > span,
.bbmt-dashboard .bbmt-stream-legend > span { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.bbmt-calculator .bbmt-stream-legend .bbmt-dot,
.bbmt-dashboard .bbmt-stream-legend .bbmt-dot {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  box-shadow: inset 0 0 0 1px rgb(var(--stakkr-shadow) / 0.12);
}
.bbmt-calculator .bbmt-stream-legend .bbmt-dot.s1, .bbmt-dashboard .bbmt-stream-legend .bbmt-dot.s1 { background: var(--stakkr-mustard); }
.bbmt-calculator .bbmt-stream-legend .bbmt-dot.s2, .bbmt-dashboard .bbmt-stream-legend .bbmt-dot.s2 { background: var(--stakkr-terracotta); }
.bbmt-calculator .bbmt-stream-legend .bbmt-dot.s3, .bbmt-dashboard .bbmt-stream-legend .bbmt-dot.s3 { background: var(--stakkr-rust); }
.bbmt-calculator .bbmt-stream-legend .bbmt-dot.s4, .bbmt-dashboard .bbmt-stream-legend .bbmt-dot.s4 { background: var(--stakkr-maroon); }
.bbmt-calculator .bbmt-stream-legend .bbmt-dot.job, .bbmt-dashboard .bbmt-stream-legend .bbmt-dot.job { background: var(--stakkr-plum); }
.bbmt-calculator .bbmt-stream-legend .bbmt-stream-legend-val,
.bbmt-dashboard .bbmt-stream-legend .bbmt-stream-legend-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  color: var(--stakkr-ink-soft);
}

@media (prefers-reduced-motion: reduce) {
  .bbmt-calculator .bbmt-stream-pill,
  .bbmt-dashboard .bbmt-stream-pill,
  .bbmt-calculator .bbmt-stream-bar > span,
  .bbmt-dashboard .bbmt-stream-bar > span { transition: none !important; }
}

/* =============================================================================
   SITE CHROME — sticky nav, page-head band, footer.

   Rendered by bbmt-homepage on every front-end view (wp_body_open /
   wp_footer), OUTSIDE the .stakkr-homepage wrapper. Duplicated into all three
   plugin stylesheets so the chrome is styled even when only one loads. Class
   names kept as .hp-* (reused from the homepage build, not reimplemented).
   ========================================================================== */
body.stakkr-chrome {
  --hp-wrap: 1120px;
  --hp-pad: clamp(20px, 5vw, 56px);
  background: var(--stakkr-paper);
}
.hp-nav, .hp-nav *, .hp-nav *::before, .hp-nav *::after,
.stakkr-pagehead, .stakkr-pagehead *,
.hp-footer, .hp-footer *, .hp-footer *::before, .hp-footer *::after { box-sizing: border-box; }

/* Collapse GeneratePress's container chrome on pages the Stakkr layer owns,
   and sit the whole page on the Stakkr paper colour (continuous with the
   page-head band and the footer). */
.stakkr-chrome .site,
.stakkr-chrome .site-content,
.stakkr-chrome #content { background: var(--stakkr-paper); }
.stakkr-chrome .entry-header,
.stakkr-chrome .generate-page-header { display: none; }
.stakkr-chrome .site-content { margin-top: 0; padding: 0; }
.stakkr-chrome .site-content .content-area { padding: 0; margin: 0; }
.stakkr-chrome .site-main,
.stakkr-chrome .site-main > .entry-content,
.stakkr-chrome article.page,
.stakkr-chrome .inside-article { margin: 0; padding: 0; border: 0; }

.hp-nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in srgb, var(--stakkr-paper) 82%, transparent);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--stakkr-line);
}
.hp-nav-inner {
  max-width: var(--hp-wrap);
  margin-inline: auto;
  padding: 14px var(--hp-pad);
  display: flex;
  align-items: center;
  gap: 20px;
}
.hp-nav a:focus-visible,
.hp-nav button:focus-visible {
  outline: 3px solid var(--stakkr-mustard);
  outline-offset: 2px;
  border-radius: 3px;
}
.hp-logo {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--stakkr-ink);
  text-decoration: none;
}
.hp-logo > span[aria-hidden] { display: inline-flex; align-items: center; }
/* The mark stands in for the second "k": long top + long bottom, short
   middle, so the three bars read as a K. Sits on the text's line. */
.hp-logo .hp-logo-mark {
  display: inline-flex;
  flex-direction: column;
  gap: 2.5px;
  margin: 0 1px;
  transform: translateY(-1px);
}
.hp-logo .hp-logo-mark i {
  display: block; height: 3.5px; border-radius: 1.5px;
}
.hp-logo .hp-logo-mark i:nth-child(1) { width: 15px; background: var(--stakkr-terracotta); }
.hp-logo .hp-logo-mark i:nth-child(2) { width: 8px;  background: var(--stakkr-mustard); }
.hp-logo .hp-logo-mark i:nth-child(3) { width: 15px; background: var(--stakkr-rust); }

.hp-nav-links {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 26px;
}
.hp-nav-links > a,
.hp-nav-drop-trigger {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--stakkr-ink);
  text-decoration: none;
}
.hp-nav-links > a:hover,
.hp-nav-drop-trigger:hover { color: var(--stakkr-rust); }
.hp-nav-links .hp-signin {
  border: 2px solid var(--stakkr-ink);
  border-radius: 8px;
  padding: 8px 16px;
}
.hp-nav-links .hp-signin:hover,
.hp-nav-links .hp-signin:focus-visible { background: var(--stakkr-ink); color: var(--stakkr-paper); }

.hp-nav-item.hp-has-drop { position: relative; }
.hp-nav-drop-trigger {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
}
.hp-nav-drop-trigger .hp-caret {
  width: 14px; height: 14px;
  transition: transform 0.15s ease;
}
.hp-nav-drop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  margin: 0;
  padding: 6px;
  list-style: none;
  background: var(--stakkr-card);
  border: 1px solid var(--stakkr-line);
  border-radius: 12px;
  box-shadow: 0 18px 44px -20px rgb(var(--stakkr-shadow) / 0.3);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.14s ease, transform 0.14s ease, visibility 0.14s;
}
.hp-nav-item.hp-has-drop:hover .hp-nav-drop,
.hp-nav-item.hp-has-drop:focus-within .hp-nav-drop,
.hp-nav-drop-trigger[aria-expanded="true"] + .hp-nav-drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.hp-nav-item.hp-has-drop:hover .hp-caret,
.hp-nav-drop-trigger[aria-expanded="true"] .hp-caret { transform: rotate(180deg); }
.hp-nav-drop li { margin: 0; }
.hp-nav-drop a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--stakkr-ink);
  text-decoration: none;
}
.hp-nav-drop a:hover,
.hp-nav-drop a:focus-visible { background: var(--stakkr-paper); color: var(--stakkr-rust); }

.hp-nav-toggle {
  margin-left: auto;
  display: none;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 2px solid var(--stakkr-ink);
  border-radius: 8px;
  padding: 8px 12px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--stakkr-ink);
  cursor: pointer;
}
.hp-nav-toggle svg { width: 16px; height: 16px; }

.hp-nav-mobile {
  display: none;
  border-top: 1px solid var(--stakkr-line);
  background: var(--stakkr-paper);
  padding: 8px var(--hp-pad) 16px;
}
.hp-nav-mobile a {
  display: block;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--stakkr-ink);
  text-decoration: none;
  padding: 12px 0;
  border-bottom: 1px solid var(--stakkr-line);
}
.hp-nav-mobile a:last-child { border-bottom: 0; }
.hp-nav-mobile-label {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--stakkr-ink-soft);
  padding: 14px 0 6px;
  margin: 0;
}
.hp-nav-mobile a.hp-nav-mobile-sub {
  font-size: 15px;
  padding: 10px 0 10px 16px;
}
.hp-nav[data-open="true"] .hp-nav-mobile { display: block; }

/* Page-head <h1> for interior pages (the homepage and About bring their own).
   Kept in the DOM for the document outline / a11y — every page needs one
   <h1> — but visually hidden: the tool or dashboard card carries the visible
   title. */
.stakkr-pagehead {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hp-footer {
  background: var(--stakkr-paper);
  border-top: 1px solid var(--stakkr-line);
  padding: 44px 0 40px;
}
.hp-footer-inner {
  max-width: var(--hp-wrap);
  margin-inline: auto;
  padding-inline: var(--hp-pad);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
}
.hp-footer .hp-logo { font-size: 19px; }
.hp-footer-links { display: flex; flex-wrap: wrap; gap: 20px; }
.hp-footer-links a {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--stakkr-ink);
  text-decoration: none;
}
.hp-footer-links a:hover { color: var(--stakkr-rust); }
.hp-footer a:focus-visible {
  outline: 3px solid var(--stakkr-terracotta);
  outline-offset: 2px;
  border-radius: 3px;
}
.hp-footer-copy {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--stakkr-ink-soft);
}

@media (max-width: 860px) {
  .hp-nav-links { display: none; }
  .hp-nav-toggle { display: inline-flex; }
}
@media (max-width: 560px) {
  .hp-footer-copy { margin-left: 0; width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .hp-nav {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--stakkr-paper);
  }
}
/* ============================ END STAKKR BRAND ============================= */
/* @@STAKKR-SHARED-END@@ */


/* =============================================================================
   HOMEPAGE
   ========================================================================== */
.stakkr-homepage {
  --hp-wrap: 1120px;
  --hp-pad: clamp(20px, 5vw, 56px);

  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  color: var(--stakkr-ink);
  background: var(--stakkr-paper);
  font-size: 16px;
  line-height: 1.6;
  overflow-x: clip;
}
.stakkr-homepage *,
.stakkr-homepage *::before,
.stakkr-homepage *::after { box-sizing: border-box; }
.stakkr-homepage img,
.stakkr-homepage svg { max-width: 100%; }

/* Self-contained visually-hidden helper (don't lean on the theme's copy). */
.stakkr-homepage .screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Zero the theme's default margins at ZERO specificity (:where), so every
   .hp-* rule below wins without needing to out-specify a base reset. */
.stakkr-homepage :where(h1, h2, h3, h4, p, ul, ol, li, figure, blockquote) {
  margin: 0;
  padding: 0;
}
.stakkr-homepage h1,
.stakkr-homepage h2,
.stakkr-homepage h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  text-wrap: balance;
}

.hp-wrap {
  max-width: var(--hp-wrap);
  margin-inline: auto;
  padding-inline: var(--hp-pad);
}

.hp-eyebrow {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--stakkr-rust);
  margin: 0 0 18px;
}
.hp-section-eyebrow { display: block; }

.hp-accent { color: var(--stakkr-terracotta); }

/* --- Buttons -------------------------------------------------------------- */
.hp-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  border-radius: 10px;
  padding: 15px 24px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.hp-btn-primary { background: var(--stakkr-terracotta); color: var(--stakkr-ink); }
.hp-btn-primary:hover,
.hp-btn-primary:focus-visible { background: #C25E38; color: #fff; }
.hp-btn-ghost {
  background: transparent;
  color: var(--stakkr-ink);
  border-color: currentColor;
}
.hp-btn-ghost:hover,
.hp-btn-ghost:focus-visible { background: var(--stakkr-ink); color: var(--stakkr-paper); }
.hp-btn-onplum { color: #fff; }
.hp-btn-onplum.hp-btn-ghost:hover,
.hp-btn-onplum.hp-btn-ghost:focus-visible { background: #fff; color: var(--stakkr-plum); }

.stakkr-homepage a { color: var(--stakkr-rust); }
.stakkr-homepage :focus-visible {
  outline: 3px solid var(--stakkr-terracotta);
  outline-offset: 2px;
  border-radius: 3px;
}
.stakkr-homepage .hp-on-plum :focus-visible { outline-color: var(--stakkr-mustard); }

/* --- Hero ------------------------------------------------------------- */
.hp-hero {
  padding: clamp(56px, 9vw, 104px) 0 clamp(48px, 7vw, 84px);
}
.hp-hero h1 {
  font-size: clamp(34px, 6vw, 60px);
  max-width: 16ch;
  margin: 0 0 22px;
}
.hp-hero-sub {
  font-size: clamp(16px, 2vw, 18.5px);
  color: var(--stakkr-ink-soft);
  max-width: 60ch;
  margin: 0 0 44px;
}
.hp-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.hp-hero-ctas .hp-btn-ghost { color: var(--stakkr-plum); }

/* --- Reveal strip --------------------------------------------------- */
.hp-reveal {
  background: var(--stakkr-plum);
  color: #fff;
  padding: clamp(44px, 6vw, 72px) 0;
}
.hp-reveal-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
}
/* Second row (the answer): text left, the winning figure on the right. */
.hp-reveal-row--win {
  grid-template-columns: 1fr auto;
  margin-top: clamp(28px, 4vw, 44px);
  padding-top: clamp(28px, 4vw, 44px);
  border-top: 2px dashed color-mix(in srgb, #fff 22%, transparent);
}
.hp-reveal-figures { text-align: center; flex: none; }
.hp-reveal-old {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(16px, 2.4vw, 20px);
  font-weight: 500;
  color: color-mix(in srgb, #fff 62%, transparent);
  text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--stakkr-rust) 90%, #fff);
  text-decoration-thickness: 2px;
  display: block;
  margin-bottom: 6px;
}
.hp-reveal-new {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: clamp(44px, 8vw, 76px);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--stakkr-mustard);
  line-height: 1;
  display: block;
}
.hp-reveal-win {
  display: inline-flex;
  align-items: center;
  gap: 14px;
}
.hp-reveal-win .hp-reveal-new { display: inline; }   /* keep "£14.50/hr" together — the flex gap is only tick↔figure */
.hp-reveal-tick {
  width: clamp(28px, 5vw, 40px);
  height: clamp(28px, 5vw, 40px);
  flex: none;
  color: #8FC078;   /* ~5.5:1 on plum — the "this is the right way" mark */
}
.hp-reveal-body { font-size: clamp(15px, 1.8vw, 17px); color: #fff; max-width: 58ch; }
.hp-reveal-teach { color: #fff; }   /* identical to .hp-reveal-body — kept for the hook */
.hp-reveal-caveat {
  margin-top: 14px;
  font-size: 12.5px;
  color: color-mix(in srgb, #fff 68%, transparent);
  max-width: 58ch;
}

/* --- Method + journey diagram ------------------------------------- */
.hp-method { padding: clamp(64px, 9vw, 112px) 0; }
.hp-method h2 {
  font-size: clamp(26px, 3.6vw, 40px);
  max-width: 22ch;
  margin: 0 0 22px;
}
.hp-method-body { font-size: 17px; color: var(--stakkr-ink-soft); max-width: 64ch; }

.hp-journey {
  margin-top: clamp(40px, 6vw, 64px);
  display: flex;
  align-items: flex-start;
  gap: 0;
}
.hp-journey-stage {
  flex: 1 1 0;
  text-align: center;
  padding: 0 8px;
  min-width: 0;
}
.hp-jicon {
  width: 62px;
  height: 62px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--stakkr-plum);
  display: flex;
  align-items: center;
  justify-content: center;
}
.hp-jicon svg { width: 30px; height: 30px; color: var(--stakkr-mustard); }
/* Placeholder until the reference-mockup SVGs are dropped in (see homepage.php). */
.hp-jicon-ph {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 20px;
  color: var(--stakkr-mustard);
}
.hp-journey-stage h3 {
  font-size: 15.5px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  letter-spacing: 0;
  margin: 0 0 6px;
}
.hp-journey-stage p { font-size: 13px; color: var(--stakkr-ink-soft); line-height: 1.45; }
.hp-journey-arrow {
  flex: none;
  align-self: center;
  margin-top: 31px;
  color: var(--stakkr-terracotta);
}
.hp-journey-arrow svg { width: 22px; height: 22px; display: block; }

/* --- Why flexible / 4 steps ------------------------------------- */
.hp-why {
  background: var(--stakkr-card);
  border-top: 1px solid var(--stakkr-line);
  border-bottom: 1px solid var(--stakkr-line);
  padding: clamp(64px, 9vw, 112px) 0;
}
.hp-why h2 {
  font-size: clamp(24px, 3.4vw, 36px);
  max-width: 26ch;
  margin: 0 0 22px;
}
.hp-why-body { font-size: 17px; color: var(--stakkr-ink-soft); max-width: 66ch; }
.hp-steps {
  margin-top: clamp(40px, 6vw, 56px);
  padding: 0;
  list-style: none;   /* it's an <ol> for semantics — the card shows its own "01" */
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.hp-step {
  background: var(--stakkr-paper);
  border: 1px solid var(--stakkr-line);
  border-radius: 16px;
  padding: 24px 20px 22px;
}
.hp-step-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 13px;
  color: var(--stakkr-rust);
  display: block;
  margin-bottom: 12px;
}
.hp-step h3 {
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0;
  margin: 0 0 8px;
}
.hp-step p { font-size: 13.5px; color: var(--stakkr-ink-soft); line-height: 1.5; }

/* --- Tools grid ------------------------------------------------- */
.hp-tools { padding: clamp(64px, 9vw, 112px) 0; }
.hp-tools h2 { font-size: clamp(24px, 3.4vw, 36px); max-width: 24ch; margin: 0 0 16px; }
.hp-tools-lead { font-size: 15.5px; color: var(--stakkr-ink-soft); max-width: 60ch; margin: 0 0 clamp(36px, 5vw, 48px); }
.hp-tools-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}
.hp-tool {
  display: flex;
  flex-direction: column;
  background: var(--stakkr-card);
  border: 1px solid var(--stakkr-line);
  border-left: 5px solid var(--tool-accent, var(--stakkr-terracotta));
  border-radius: 14px;
  padding: 24px 22px 22px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hp-tool:hover,
.hp-tool:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -22px rgb(var(--stakkr-shadow) / 0.3);
}
.hp-tool.t01 { --tool-accent: var(--stakkr-terracotta); }
.hp-tool.t02 { --tool-accent: var(--stakkr-mustard); }
.hp-tool.t03 { --tool-accent: var(--stakkr-plum); }
.hp-tool.t04 { --tool-accent: var(--stakkr-rust); }
.hp-tool-num {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 13px;
  color: var(--stakkr-rust);   /* accent hues fail small-text AA; border carries the colour ID */
  margin-bottom: 14px;
}
.hp-tool h3 {
  font-family: 'Fraunces', Georgia, serif;
  font-size: 20px;
  margin: 0 0 10px;
}
.hp-tool p { font-size: 13.5px; color: var(--stakkr-ink-soft); line-height: 1.5; flex: 1; }
.hp-tool-cta {
  margin-top: 18px;
  font-family: 'Space Grotesk', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--stakkr-rust);
}

/* --- Dashboard / OTP ------------------------------------------- */
.hp-dash {
  background: var(--stakkr-plum);
  color: #fff;
  padding: clamp(64px, 9vw, 112px) 0;
}
.hp-dash-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(32px, 6vw, 64px);
  align-items: start;
}
.hp-dash .hp-eyebrow { color: var(--stakkr-mustard); }
.hp-dash h2 { font-size: clamp(24px, 3.4vw, 36px); max-width: 20ch; margin: 0 0 18px; }
.hp-dash-body { font-size: 16px; color: color-mix(in srgb, #fff 86%, transparent); max-width: 52ch; }
.hp-otp-card {
  background: var(--stakkr-card);
  color: var(--stakkr-ink);
  border-radius: 18px;
  padding: 28px 26px;
  box-shadow: 0 30px 70px -30px rgb(0 0 0 / 0.45);
}
.hp-otp-step { display: flex; gap: 14px; padding: 14px 0; border-top: 1px dashed var(--stakkr-line); }
.hp-otp-step:first-child { border-top: 0; padding-top: 4px; }
.hp-otp-step .hp-otp-n {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--stakkr-terracotta);
  color: var(--stakkr-ink);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-weight: 700;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center;
}
.hp-otp-step h3 { font-family: 'Space Grotesk', 'Inter', sans-serif; font-weight: 700; font-size: 15px; letter-spacing: 0; margin: 2px 0 4px; }
.hp-otp-step p { font-size: 13px; color: var(--stakkr-ink-soft); line-height: 1.45; }
.hp-otp-foot {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--stakkr-line);
  font-size: 12.5px;
  color: var(--stakkr-ink-soft);
  line-height: 1.5;
}

   ABOUT / "MY STORY"  (.stakkr-about — shares the nav, footer and .hp-* system)
   ========================================================================== */
.stakkr-about .hp-story-head {
  padding: clamp(52px, 8vw, 96px) 0 clamp(30px, 5vw, 48px);
}
.stakkr-about .hp-story-head h1 {
  font-size: clamp(32px, 5.4vw, 54px);
  max-width: 18ch;
  margin: 0 0 20px;
}
.stakkr-about .hp-story-standfirst {
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.5;
  color: var(--stakkr-ink-soft);
  max-width: 54ch;
}

.stakkr-about .hp-story-section { padding: clamp(24px, 3.5vw, 40px) 0; }

/* Readable prose column */
.stakkr-about .hp-prose { max-width: 40rem; }
.stakkr-about .hp-prose > * + * { margin-top: 1.4em; }
.stakkr-about .hp-prose p {
  font-size: clamp(16px, 1.5vw, 17.5px);
  line-height: 1.75;
  color: var(--stakkr-ink);
}
.stakkr-about .hp-prose strong { font-weight: 700; }
.stakkr-about .hp-prose a {
  color: var(--stakkr-rust);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}
.stakkr-about .hp-prose a:hover { text-decoration-thickness: 2.5px; }

/* The method callout — plum band (full-bleed, butts against its neighbours
   like the homepage plum sections). */
.stakkr-about .hp-story-method {
  background: var(--stakkr-plum);
  color: #fff;
  padding: clamp(54px, 8vw, 92px) 0;
  margin: clamp(24px, 4vw, 40px) 0 0;
}
.stakkr-about .hp-story-method .hp-eyebrow { color: var(--stakkr-mustard); }
.stakkr-about .hp-story-method h2 {
  font-size: clamp(26px, 3.6vw, 38px);
  max-width: 20ch;
  margin: 0 0 20px;
}
.stakkr-about .hp-story-method-body {
  font-size: clamp(16px, 1.7vw, 17.5px);
  line-height: 1.7;
  color: color-mix(in srgb, #fff 90%, transparent);
  max-width: 60ch;
  margin: 0 0 28px;
}

/* Disclaimer — quiet, set apart. Equal padding top/bottom so the card sits
   centred between the plum band above and the CTA rule below. */
.stakkr-about .hp-story-disclaimer-sec { padding: clamp(40px, 6vw, 64px) 0; }
.stakkr-about .hp-story-disclaimer {
  max-width: 40rem;
  padding: 16px 20px;
  border-left: 3px solid var(--stakkr-line-strong);
  background: var(--stakkr-card);
  border-radius: 0 10px 10px 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--stakkr-ink-soft);
}

/* End CTA */
.stakkr-about .hp-story-cta {
  border-top: 1px solid var(--stakkr-line);
  padding: clamp(56px, 8vw, 92px) 0 clamp(64px, 9vw, 100px);
  text-align: center;
}
.stakkr-about .hp-story-cta h2 { font-size: clamp(24px, 3.4vw, 34px); margin: 0 0 12px; }
.stakkr-about .hp-story-cta-sub {
  font-size: 15.5px;
  color: var(--stakkr-ink-soft);
  max-width: 44ch;
  margin: 0 auto 28px;
}
.stakkr-about .hp-story-cta .hp-hero-ctas { justify-content: center; }
.stakkr-about .hp-story-cta .hp-btn-ghost { color: var(--stakkr-plum); }

@media (max-width: 560px) {
  .stakkr-about .hp-story-cta .hp-btn { width: 100%; justify-content: center; }
}


/* =============================================================================
   LEGAL  (.stakkr-legal — privacy policy etc. Reuses the About header + prose
   look; adds heading/list styling for a structured document.)
   ========================================================================== */
.stakkr-legal .hp-story-head {
  padding: clamp(48px, 8vw, 88px) 0 clamp(24px, 4vw, 36px);
}
.stakkr-legal .hp-story-head h1 {
  font-size: clamp(30px, 5vw, 46px);
  margin: 0 0 16px;
}
.stakkr-legal .hp-story-standfirst {
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.55;
  color: var(--stakkr-ink-soft);
  max-width: 58ch;
}

.stakkr-legal .hp-story-section { padding: clamp(20px, 3vw, 36px) 0 clamp(48px, 7vw, 88px); }

.stakkr-legal .hp-prose { max-width: 44rem; }
.stakkr-legal .hp-prose h2 {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 600;
  font-size: clamp(20px, 2.4vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--stakkr-ink);
  margin: 2.2em 0 0.5em;
}
.stakkr-legal .hp-prose h2:first-child { margin-top: 0; }
.stakkr-legal .hp-prose p,
.stakkr-legal .hp-prose li {
  font-size: clamp(15px, 1.4vw, 16.5px);
  line-height: 1.7;
  color: var(--stakkr-ink);
}
.stakkr-legal .hp-prose p + p { margin-top: 1em; }
.stakkr-legal .hp-prose ul {
  margin: 0.8em 0 0;
  padding-left: 1.2em;
  list-style: disc;
}
.stakkr-legal .hp-prose li { margin: 0.45em 0; }
.stakkr-legal .hp-prose li::marker { color: var(--stakkr-line-strong); }
.stakkr-legal .hp-prose strong { font-weight: 700; }
.stakkr-legal .hp-prose a {
  color: var(--stakkr-rust);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 2px;
}
.stakkr-legal .hp-prose a:hover { text-decoration-thickness: 2.5px; }

.stakkr-legal .hp-story-disclaimer {
  margin-top: 2.4em;
  padding: 16px 20px;
  border-left: 3px solid var(--stakkr-line-strong);
  background: var(--stakkr-card);
  border-radius: 0 10px 10px 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--stakkr-ink-soft);
}


/* =============================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width: 1000px) {
  .hp-tools-grid { grid-template-columns: repeat(2, 1fr); }
  .hp-steps { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .hp-hero { padding-top: clamp(40px, 12vw, 64px); }

  /* Reveal strip: both rows stack to one column, text aligned left */
  .hp-reveal-row,
  .hp-reveal-row--win { grid-template-columns: 1fr; text-align: left; gap: 16px; }
  .hp-reveal-figures { text-align: left; }
  .hp-reveal-win { flex-wrap: wrap; }

  /* Journey diagram: vertical stack, arrows rotated. The badge spans both
     rows so the heading AND caption sit in the wide right-hand column. */
  .hp-journey { flex-direction: column; align-items: stretch; gap: 0; }
  .hp-journey-stage {
    display: grid;
    grid-template-columns: 62px 1fr;
    column-gap: 16px;
    row-gap: 2px;
    align-items: start;
    text-align: left;
    padding: 14px 0;
  }
  .hp-journey-stage .hp-jicon { grid-column: 1; grid-row: 1 / span 2; margin: 0; }
  .hp-journey-stage h3 { grid-column: 2; grid-row: 1; margin: 2px 0 0; }
  .hp-journey-stage p  { grid-column: 2; grid-row: 2; margin: 0; }
  .hp-journey-arrow {
    align-self: start;
    margin: 0 0 0 20px;
    transform: rotate(90deg);
  }

  /* Dashboard: single column */
  .hp-dash-inner { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .hp-tools-grid { grid-template-columns: 1fr; }
  .hp-steps { grid-template-columns: 1fr; }
  .hp-hero-ctas .hp-btn { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .stakkr-homepage * { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}