/* ══════════════════════════════════════════════════════════════════════════
   marketing.css — shared visual system for the front page (/) and keynote
   page (/reach). CODE_INSTRUCTION §2, §6.

   RULES ENFORCED HERE (see §6 + §10 tests):
   • Nunito for ALL text — self-hosted woff2 (public/fonts/), font-display: swap.
     No Fraunces, no Plus Jakarta Sans, no Georgia on these two pages.
   • Cream #FDFAF4 ground, ink #1A1410 text. The four energy colours appear ONLY
     together inside the animation SVG, the icon row, and the ball photo — NEVER
     as a background, wash, rule, or button. (The energy tokens below exist for
     the icon row only.)
   • One ink CTA. Everything else is a text link.
   ══════════════════════════════════════════════════════════════════════════ */

/* Self-hosted Nunito. Google now ships Nunito latin as one variable woff2 reused
   across weights, so all four weights point at the same file (smaller, one
   preload). Preload it in the page <head>. */
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 300; font-display: swap; src: url("fonts/nunito-latin.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/nunito-latin.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/nunito-latin.woff2") format("woff2"); }
@font-face { font-family: "Nunito"; font-style: normal; font-weight: 900; font-display: swap; src: url("fonts/nunito-latin.woff2") format("woff2"); }

:root {
  --cream: #FDFAF4;
  --ink: #1A1410;
  --ink-70: rgba(26, 20, 16, 0.70);
  --ink-60: rgba(26, 20, 16, 0.60);
  --ink-50: rgba(26, 20, 16, 0.50);
  --ink-12: rgba(26, 20, 16, 0.12);

  /* Energy colours — used ONLY together, in the icon row / animation / ball.
     Never as a background, border, rule, or button fill (§2, enforced by test). */
  --spark: #D92010;
  --glow: #F5D000;
  --glow-text: #C8960C; /* Glow on light — the amber that reads on cream */
  --pulse: #1A8C4E;
  --flow: #1755B8;

  --font: "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid tokens — text caps ~1440px; the Living Profile visual keeps growing. */
  --im-gap: clamp(16px, 3vw, 28px);
  --im-hero-visual: clamp(300px, 42vw, 620px);
  --section-py: clamp(64px, 9vw, 128px);   /* 96–128 desktop / 64–80 mobile */
  --content-max: 34em;
  --page-max: 1160px;
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font);
  font-weight: 400;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ─── Type scale (§6) ─────────────────────────────────────────────────────── */
h1, h2, h3 { text-wrap: balance; margin: 0; }

.h1 {
  font-weight: 900;
  font-size: clamp(36px, 6vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.02em;
}
.h2 {
  font-weight: 900;
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.015em;
}
.eyebrow {
  font-weight: 700;
  font-size: 14px;
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-60);
  margin: 0 0 12px;
}
.body {
  font-weight: 400;
  font-size: clamp(17px, 1.4vw, 18px);
  line-height: 1.6;
  max-width: var(--content-max);
}
/* Editorial passage — §4.6 three Welsh words: lighter, larger, generous leading. */
.editorial {
  font-weight: 300;
  font-size: clamp(22px, 2.4vw, 24px);
  line-height: 1.6;
  max-width: 28em;
}
.micro {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-70);
}
.proof {
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-60);
}

a { color: var(--ink); }

/* ─── Layout scaffolding ──────────────────────────────────────────────────── */
/* §A (03 Sept amend) — one gutter rule site-wide. Desktop/tablet 32px; below
   768px clamp(20px, 6vw, 24px). Nothing textual sits within 20px of either edge
   at 375px (6vw of 375 = 22.5px). Header + footer follow the same gutter. */
.page { max-width: var(--page-max); margin: 0 auto; padding: 0 32px; }
@media (max-width: 767px) {
  .page, .site-header, .site-footer { padding-left: clamp(20px, 6vw, 24px); padding-right: clamp(20px, 6vw, 24px); }
}

/* Every section on the same alignment (§1: no zigzag). Desktop: text left,
   visual right; mobile: single column, text then visual. */
/* Vertical only (longhand) — the `padding` shorthand here used to clobber the
   horizontal gutter that `.page` sets on the same `class="page section"` element
   (both single-class, .section declared later, so its `0` won). §A fix. */
.section { padding-top: var(--section-py); padding-bottom: var(--section-py); }
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 6vw, 72px);
  align-items: center;
}
.split > .col-text { max-width: 38em; }
@media (max-width: 860px) {
  .split { grid-template-columns: 1fr; }
  .split > .col-visual { order: 2; }
  .split > .col-text { order: 1; }
}

/* ─── The one CTA (§2) ────────────────────────────────────────────────────── */
.cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 clamp(24px, 4vw, 40px);
  border-radius: 12px;
  background: var(--ink);
  color: #FFFFFF;
  font-family: var(--font);
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.cta-primary:hover { box-shadow: 0 6px 20px rgba(26, 20, 16, 0.18); }
.cta-primary:active { transform: translateY(1px); }
.cta-primary:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* Text links (every non-CTA action) */
.text-link {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1.5px solid var(--ink-12);
  padding-bottom: 1px;
  font-weight: 700;
  min-height: 48px;              /* tap target */
  display: inline-flex;
  align-items: center;
}
.text-link:hover { border-bottom-color: var(--ink); }
.text-link:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }

/* ─── Header / footer ─────────────────────────────────────────────────────── */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: clamp(16px, 3vw, 24px) 32px;
  max-width: var(--page-max);
  margin: 0 auto;
}
.wordmark {
  font-weight: 900;
  font-size: 22px;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}
.wordmark sup { font-size: 0.5em; font-weight: 700; top: -0.7em; }

/* ─── Site navigation (9 Oct 2026) ─────────────────────────────────────────
   Logged-out public pages only. Desktop: links top right, two click-to-open
   dropdowns, "Start free" the only filled element. Below 900px: a Menu button
   opens the links as a panel (dropdowns become expandable sections); Start free
   stays visible outside the menu. */
.site-header { position: relative; }
.site-nav { display: flex; align-items: center; gap: clamp(8px, 1.6vw, 18px); margin-left: auto; }
.nav-list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: clamp(2px, 0.8vw, 8px); }
.nav-list > li { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 10px;
  border: 0; border-radius: 10px; background: transparent; color: var(--ink);
  font-family: var(--font); font-weight: 700; font-size: 15px; line-height: 1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
}
.nav-link:hover { background: rgba(26, 20, 16, 0.05); }
.nav-link:focus-visible, .nav-dd-menu a:focus-visible, .nav-cta:focus-visible, .nav-toggle:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.nav-link[aria-current="page"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; }
.nav-caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .15s ease; }
.nav-dd-btn[aria-expanded="true"] .nav-caret { transform: translateY(2px) rotate(-135deg); }
.nav-dd-menu {
  list-style: none; margin: 0; padding: 8px; position: absolute; top: calc(100% + 6px); left: 0; z-index: 50;
  min-width: 200px; background: #FFFFFF; border: 1px solid var(--ink-12); border-radius: 14px;
  box-shadow: 0 14px 34px rgba(26, 20, 16, 0.12);
}
.nav-dd-menu[hidden] { display: none; }
.nav-dd-menu a {
  display: flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 10px;
  color: var(--ink); text-decoration: none; font-weight: 700; font-size: 15px; white-space: nowrap;
}
.nav-dd-menu a:hover { background: rgba(26, 20, 16, 0.05); }
.nav-dd-menu a[aria-current="page"] { text-decoration: underline; text-underline-offset: 5px; }
.nav-cta {
  display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px;
  border-radius: 999px; background: var(--ink); color: #FFFFFF; text-decoration: none;
  font-weight: 700; font-size: 15px; white-space: nowrap;
}
.nav-cta:hover { box-shadow: 0 6px 18px rgba(26, 20, 16, 0.18); }
.nav-toggle {
  display: none; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px;
  border: 1.5px solid var(--ink-12); border-radius: 999px; background: transparent; color: var(--ink);
  font-family: var(--font); font-weight: 700; font-size: 15px; cursor: pointer;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after { display: block; width: 16px; height: 2px; background: currentColor; border-radius: 2px; }
.nav-toggle-bars { position: relative; }
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; position: absolute; left: 0; }
.nav-toggle-bars::before { top: -5px; }
.nav-toggle-bars::after { top: 5px; }
.site-nav.is-open .nav-toggle-bars { background: transparent; }
.site-nav.is-open .nav-toggle-bars::before { top: 0; transform: rotate(45deg); }
.site-nav.is-open .nav-toggle-bars::after { top: 0; transform: rotate(-45deg); }

@media (max-width: 899px) {
  .nav-toggle { display: inline-flex; order: 2; }
  .nav-cta { order: 1; }
  .nav-list {
    display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
    flex-direction: column; align-items: stretch; gap: 2px;
    margin: 0 clamp(20px, 6vw, 32px); padding: 10px;
    background: #FFFFFF; border: 1px solid var(--ink-12); border-radius: 16px;
    box-shadow: 0 16px 40px rgba(26, 20, 16, 0.14);
  }
  .site-nav.is-open .nav-list { display: flex; }
  .nav-link { width: 100%; justify-content: space-between; min-height: 48px; padding: 0 12px; font-size: 16px; }
  .nav-dd-menu { position: static; min-width: 0; margin: 0 0 6px; padding: 0 0 0 12px; border: 0; box-shadow: none; border-radius: 0; }
  .nav-dd-menu a { min-height: 44px; font-size: 16px; font-weight: 400; }
}
@media (max-width: 380px) {
  .nav-toggle-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav-toggle { padding: 0 13px; }
  .nav-cta { padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) { .nav-caret { transition: none; } }

.site-footer {
  padding: clamp(40px, 6vw, 72px) 32px;
  border-top: 1px solid var(--ink-12);
  color: var(--ink-60);
  font-size: 14px;
  max-width: var(--page-max);
  margin: 0 auto;
}
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 16px; }
.footer-nav a { color: var(--ink-60); text-decoration: none; }
.footer-nav a:hover { color: var(--ink); }
.footer-contact { margin-bottom: 8px; }
.footer-contact a { color: var(--ink-60); text-decoration: none; }
.footer-contact a:hover { color: var(--ink); }

/* ─── Hero (§4.2 / §5) ────────────────────────────────────────────────────
   Desktop: text top-left, proof bottom-left, visual spans the right column.
   Mobile: H1 → sub → button → micro (text), then the visual, then the proof —
   so the button is always above the fold and the proof reads last. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  grid-template-areas: "text visual" "proof visual";
  gap: clamp(28px, 6vw, 72px) clamp(28px, 6vw, 72px);
  align-items: center;
}
.hero-text { grid-area: text; max-width: 38em; }
.hero-visual { grid-area: visual; }
.hero-proof { grid-area: proof; align-self: start; }
@media (max-width: 860px) {
  .hero {
    grid-template-columns: 1fr;
    grid-template-areas: "text" "visual" "proof";
    gap: 28px;
  }
  .hero-visual { width: 88vw; max-width: 88vw; margin: 0 auto; }
}

/* ─── The Living Profile visual ───────────────────────────────────────────── */
.lp-visual { width: 100%; max-width: var(--im-hero-visual); margin: 0 auto; }
.lp-hero { max-width: clamp(300px, 46vw, 640px); }

/* ─── Energy icon row (§4.4) — the only place energy colours sit as fills ──── */
.energy-row { display: flex; align-items: center; justify-content: center; gap: clamp(20px, 5vw, 48px); flex-wrap: wrap; }
.energy-item { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.energy-item .name { font-weight: 700; font-size: 15px; }

/* The four energy words are ALWAYS coloured + bold wherever they appear in copy
   — the same rule the app enforces via its EnergyWord component. Applied
   automatically by the colorizer script in the footer partial. Colours match
   the app's AA-safe energy-text tokens (Glow is the amber that reads on cream). */
b.e-spark, b.e-glow, b.e-pulse, b.e-flow { font-weight: 700; }
b.e-spark { color: #D92010; }
b.e-glow  { color: #C8960C; }
b.e-pulse { color: #178443; }
b.e-flow  { color: #1755B8; }

/* ─── Widen your reach (§1.2) — four statements as one set, no colour fills ─── */
/* The four energy icons + names sit together as a set (all four together, per the
   site rule); the paragraphs' energy words are coloured by the footer colorizer.
   No single-energy background, tint or box anywhere in this section. */
.reach-block { max-width: 44em; }
.reach-set { margin-top: 28px; display: grid; gap: 22px; }
.reach-item { display: grid; gap: 10px; }
.reach-head { display: inline-flex; align-items: center; gap: 10px; }
.reach-head .name { font-weight: 800; font-size: 16px; }
.reach-item .body { margin-top: 0; max-width: 40em; }
.reach-defs { margin-top: 32px; display: grid; gap: 6px; }
.reach-defs p { margin: 0; max-width: 40em; }

/* ─── Founder photograph (§B, 03 Sept amend) ──────────────────────────────── */
/* 4:5 portrait, full colour, no border, no filter. 320px desktop (max 400 wide),
   ~72vw on mobile. Gaze points toward the text column (viewer's left). */
.founder-photo {
  display: block;
  width: clamp(280px, 34vw, 400px);
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 16px;
  margin: 0 auto;
}
@media (max-width: 860px) {
  .founder-photo { width: 72vw; max-width: 360px; }
}
/* /reach founder — a proper 200px 4:5 element beneath the button, photo right of
   the credentials on desktop, stacked on mobile. */
.reach-proof { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; max-width: 40em; }
.reach-proof .reach-credit { flex: 1 1 220px; margin: 0; }
.reach-proof .reach-founder-photo {
  width: 160px; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 12px; flex: 0 0 auto;
}
@media (max-width: 560px) {
  .reach-proof { flex-direction: column; align-items: flex-start; }
  .reach-proof .reach-founder-photo { width: 200px; }
}

/* ─── Motion discipline (§6): the animation is the only moving element. ────── */
@media (prefers-reduced-motion: reduce) {
  .cta-primary { transition: none; }
}