/* ==========================================================================
   Next Position Advisory — design system
   One file. Tokens at the top; components below. Edit tokens, not components.
   ========================================================================== */

/* --- Tokens ------------------------------------------------------------- */
/* Values sampled from the live site + logo PNG, 22 Aug 2026. See BRAND.md.
   NOTE: the live Zyro site also exposes --color-primary #673DE6 and friends.
   Those are Hostinger builder defaults, NOT brand. Do not reintroduce them. */
:root {
  /* Brand */
  --ink:        #1D1E20;   /* primary text — the dominant colour on the site */
  --ink-soft:   #4A4C50;   /* secondary text (derived) */
  --ink-faint:  #77797F;   /* captions, meta (derived) */
  --coral:      #E56A54;   /* THE brand colour — logo + section backgrounds */
  --coral-dark: #C9553F;   /* hover/pressed (derived) */
  --coral-tint: #FEE1D8;   /* soft card background — live on the site */
  --teal:       #2F7F73;   /* secondary — About page sections */
  --teal-tint:  #E4F0ED;   /* (derived) */

  /* Surfaces */
  --bg:         #FFFFFF;   /* page */
  --surface:    #FFFFFF;
  --surface-2:  #F1F1F1;   /* alternate section — live on the site */
  --deep:       #0D141A;   /* dark sections, nav */
  --line:       #E2E2E4;   /* (derived — softer than the site's #000 borders) */
  --line-soft:  #EFEFF1;

  /* Type */
  --font-display: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-body:    "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  /* Scale — fluid, clamps to sensible bounds */
  --step--1: clamp(0.83rem, 0.79rem + 0.18vw, 0.92rem);
  --step-0:  clamp(1rem, 0.96rem + 0.22vw, 1.12rem);
  --step-1:  clamp(1.2rem, 1.12rem + 0.4vw, 1.45rem);
  --step-2:  clamp(1.45rem, 1.3rem + 0.75vw, 1.95rem);
  --step-3:  clamp(1.8rem, 1.5rem + 1.4vw, 2.7rem);
  --step-4:  clamp(2.2rem, 1.7rem + 2.4vw, 3.8rem);

  /* Space */
  --gutter: clamp(1.25rem, 4vw, 2.5rem);
  /* Reduced three times, 24 Aug 2026: clamp(3.5rem, 9vw, 7rem) ->
     clamp(2.25rem, 5.5vw, 4.25rem) -> clamp(1.5rem, 3.75vw, 3rem) -> this.
     Lisa's standing rule now: no excessive padding or spacing anywhere,
     and people should see what they need on the first screen when a
     page loads. This value is ~70% down from the original. */
  --section-y: clamp(1rem, 2.5vw, 2rem);
  /* Both widened 24 Aug 2026 per Lisa: "use the whole page as wide as
     possible... do not put unnecessary line breaks." --narrow used to be
     720px, and .prose text inside it was capped at 68ch (~610px) on top of
     that, so even "wide" sections had blank space on the right and wrapped
     earlier than the container required. --narrow now matches --wide, and
     --measure is close to that container's full content width instead of
     well short of it. */
  --measure: 110ch;
  --wide: 1180px;
  --narrow: 1180px;

  /* Effects */
  --radius: 14px;
  --radius-sm: 8px;
  --shadow-sm: 0 1px 2px rgba(16, 36, 46, .06), 0 2px 8px rgba(16, 36, 46, .04);
  --shadow-md: 0 4px 12px rgba(16, 36, 46, .07), 0 12px 32px rgba(16, 36, 46, .06);
  --ring: 0 0 0 3px rgba(229, 106, 84, .32);
}

/* No dark mode. The brand is light-only, matching the existing site.
   Decided 22 Aug 2026. Do not reintroduce a prefers-color-scheme block. */

/* --- Reset -------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 4px; }

/* --- Typography --------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
/* text-wrap: balance sometimes chooses an even split over filling the
   first line, reading as an arbitrary break mid-sentence at headline
   sizes. Applied one-off to specific headings as this comes up (already
   several times sitewide) rather than turning balance off everywhere. */
.no-balance { text-wrap: wrap; }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-1); }
h4 { font-size: var(--step-0); font-weight: 600; }

p { text-wrap: pretty; }
p + p { margin-top: 1em; }

/* max-width was a hardcoded 58ch (~520px), not the --measure token, so it
   kept wrapping early even after the sitewide widening. Matched to
   --measure, 24 Aug 2026. */
.lede {
  font-size: var(--step-1);
  line-height: 1.55;
  color: var(--ink-soft);
  max-width: var(--measure);
}

.eyebrow {
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: .9rem;
  display: block;
}

.muted { color: var(--ink-soft); }
.meta  { font-size: var(--step--1); color: var(--ink-faint); }

/* --- Layout ------------------------------------------------------------- */
.wrap { width: min(100% - (var(--gutter) * 2), var(--wide)); margin-inline: auto; }
.wrap-narrow { width: min(100% - (var(--gutter) * 2), var(--narrow)); margin-inline: auto; }
.section { padding-block: var(--section-y); }
/* Roughly half the standard section padding. For sections a reader should
   move through quickly rather than settle into, e.g. the two short prose
   sections directly under the home hero, per Lisa's instruction 24 Aug 2026
   that the page was making people scroll too far before reaching the point. */
.section--brief { padding-block: clamp(.85rem, 2vw, 1.5rem); }
/* The newsletter CTA above the footer. Lisa: likes it as a band, wants it
   "a super thin line" rather than a full section's worth of padding. */
.section--thin { padding-block: clamp(.9rem, 2vw, 1.25rem); }
.section--tint { background: var(--surface-2); }
.stack > * + * { margin-top: 1.25rem; }
.center { text-align: center; margin-inline: auto; }

.grid { display: grid; gap: clamp(1.25rem, 3vw, 2rem); }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }

.split {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  grid-template-columns: 1fr;
}
@media (min-width: 880px) { .split { grid-template-columns: 1.05fr 0.95fr; } }

/* --- Skip link ---------------------------------------------------------- */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--ink); color: var(--bg);
  padding: .75rem 1.25rem; border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; }

/* --- Header / nav ------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, box-shadow .25s ease;
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: var(--shadow-sm); }

.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding-block: .95rem;
}

.brand {
  display: inline-flex; align-items: center; gap: .6rem;
  text-decoration: none; font-family: var(--font-display);
  font-weight: 600; font-size: 1.12rem; letter-spacing: -.02em;
  color: var(--ink); white-space: nowrap;
}
.brand__mark {
  width: 30px; height: 30px; flex: none;
  border-radius: 8px; background: var(--coral);
  display: grid; place-items: center;
  color: #fff; font-size: .82rem; font-weight: 700;
  font-family: var(--font-body); letter-spacing: .01em;
}
.brand__sub { color: var(--ink-faint); font-weight: 400; }

.nav__links { display: flex; align-items: center; gap: .35rem; list-style: none; padding: 0; }
.nav__links a {
  text-decoration: none; font-size: var(--step--1); font-weight: 500;
  color: var(--ink-soft); padding: .5rem .8rem; border-radius: var(--radius-sm);
  transition: color .18s ease, background .18s ease;
}
.nav__links a:hover { color: var(--ink); background: var(--surface-2); }
.nav__links a[aria-current="page"] { color: var(--coral); font-weight: 600; }

.nav__cta { margin-left: .5rem; }

.nav__toggle {
  display: none; background: none; border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: .5rem .6rem; cursor: pointer;
  color: var(--ink);
}

@media (max-width: 980px) {
  .nav__toggle { display: grid; place-items: center; }
  .nav__menu {
    position: fixed; inset: 62px 0 auto 0;
    background: var(--bg); border-bottom: 1px solid var(--line);
    padding: 1rem var(--gutter) 1.75rem;
    display: none; box-shadow: var(--shadow-md);
  }
  .nav__menu[data-open="true"] { display: block; }
  .nav__links { flex-direction: column; align-items: stretch; gap: .15rem; }
  .nav__links a { padding: .8rem .6rem; font-size: var(--step-0); }
  .nav__cta { margin: .85rem 0 0; display: block; }
  .nav__cta .btn { width: 100%; }
}

/* --- Buttons ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  padding: .78rem 1.4rem; border-radius: 999px;
  font-size: var(--step--1); font-weight: 600; letter-spacing: .005em;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: transform .16s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--coral); color: #fff; box-shadow: var(--shadow-sm); }
.btn--primary:hover { background: var(--coral-dark); box-shadow: var(--shadow-md); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--ink-faint); background: var(--surface-2); }

/* A ghost button on a dark band (.section--deep, teal bands, .band--ink)
   needs light styling, or its ink text and light-grey border are
   unreadable. .band--ink added 26 Aug 2026, needed once a ghost button
   first appeared on one (the-solo-track.html's closing band). */
.section--deep .btn--ghost, .band--teal .btn--ghost, .band--ink .btn--ghost {
  color: #fff; border-color: rgba(255,255,255,.4);
}
.section--deep .btn--ghost:hover, .band--teal .btn--ghost:hover, .band--ink .btn--ghost:hover {
  border-color: rgba(255,255,255,.7); background: rgba(255,255,255,.08);
}

/* 28 Aug 2026, per Lisa: was solid teal. Not a title section, so it goes to
   solid black rather than the new gradient (unused sitewide currently, kept
   for parity if it comes back into use). */
.btn--teal { background: #000000; color: #fff; }
.btn--teal:hover { filter: brightness(1.35); box-shadow: var(--shadow-md); }

.btn--deep { background: var(--deep); color: #fff; }
.btn--deep:hover { filter: brightness(1.35); box-shadow: var(--shadow-md); }

.btn--lg { padding: .95rem 1.85rem; font-size: var(--step-0); }
.btn--block { width: 100%; }

.link-arrow {
  display: inline-flex; align-items: center; gap: .35rem;
  color: var(--coral); font-weight: 600; font-size: var(--step--1);
  text-decoration: none;
}
.link-arrow::after { content: "\2192"; transition: transform .18s ease; }
.link-arrow:hover::after { transform: translateX(3px); }

/* --- Hero --------------------------------------------------------------- */
.hero { padding-block: clamp(3rem, 8vw, 6rem) clamp(3rem, 8vw, 5.5rem); position: relative; overflow: hidden; }
.hero::before {
  content: ""; position: absolute; z-index: -1;
  width: 620px; height: 620px; right: -180px; top: -240px;
  background: radial-gradient(circle, var(--coral-tint) 0%, transparent 68%);
  border-radius: 50%;
}
.hero h1 { margin-bottom: 1.25rem; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 2rem; align-items: center; }

.hero__panel {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.5rem, 3vw, 2.1rem);
  box-shadow: var(--shadow-md);
}

/* --- Trust strip -------------------------------------------------------- */
.trust { border-block: 1px solid var(--line-soft); padding-block: 1.6rem; }
.trust__row {
  display: flex; flex-wrap: wrap; gap: 1rem clamp(1.5rem, 5vw, 3.5rem);
  align-items: center; justify-content: center;
}
.trust__item { font-size: var(--step--1); color: var(--ink-faint); display: inline-flex; gap: .5rem; align-items: center; }
.trust__item strong { color: var(--ink); font-weight: 600; }

/* --- Cards -------------------------------------------------------------- */
.card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: clamp(1.4rem, 2.6vw, 1.9rem);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display: flex; flex-direction: column;
}
.card--hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--coral); }
.card h3 { margin-bottom: .6rem; }
.card p { color: var(--ink-soft); font-size: var(--step--1); }
.card__icon {
  width: 42px; height: 42px; border-radius: 10px; flex: none;
  background: var(--coral-tint); color: var(--coral);
  display: grid; place-items: center; margin-bottom: 1.1rem;
}
.card__foot { margin-top: auto; padding-top: 1.25rem; }

/* --- Steps -------------------------------------------------------------- */
.steps { counter-reset: step; list-style: none; padding: 0; display: grid; gap: 1.75rem; }
.step { counter-increment: step; display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start; }
.step::before {
  content: counter(step, decimal-leading-zero);
  font-family: var(--font-display); font-size: var(--step-1); font-weight: 600;
  color: var(--coral); line-height: 1.1; min-width: 2.2rem;
}
.step h3 { margin-bottom: .35rem; }
.step p { color: var(--ink-soft); font-size: var(--step--1); }

/* --- Pricing ------------------------------------------------------------ */
.price-card { position: relative; }
.price-card--featured { border-color: var(--coral); border-width: 2px; box-shadow: var(--shadow-md); }
.price-card__badge {
  position: absolute; top: -.75rem; left: 50%; transform: translateX(-50%);
  background: var(--coral); color: #fff; font-size: .7rem; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  padding: .3rem .8rem; border-radius: 999px; white-space: nowrap;
}
.price {
  font-family: var(--font-display); font-size: var(--step-3);
  font-weight: 600; color: var(--ink); line-height: 1; margin: .6rem 0 .3rem;
}
.price small { font-family: var(--font-body); font-size: var(--step--1); font-weight: 500; color: var(--ink-faint); }

.ticks { list-style: none; padding: 0; display: grid; gap: .6rem; margin-top: 1.25rem; }
/* Positioned, NOT grid. A grid li makes every child its own grid item, so an
   item like "<strong>A price</strong> you can say" puts the loose text node on
   a second row under the tick. Items wrapped entirely in <strong> aligned and
   the rest did not. Padding plus an absolute tick handles any inline mix. */
.ticks li {
  position: relative; padding-left: 1.6rem;
  font-size: var(--step--1); color: var(--ink-soft);
}
.ticks li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: var(--coral); font-weight: 700;
}

/* --- Quote / testimonial ------------------------------------------------ */
.quote {
  background: var(--surface); border: 1px solid var(--line);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius); padding: clamp(1.4rem, 3vw, 2rem);
  display: flex; flex-direction: column;
}
.quote blockquote { font-size: var(--step-0); line-height: 1.6; color: var(--ink); }
.quote figcaption { margin-top: 1.1rem; font-size: var(--step--1); color: var(--ink-faint); }
.quote figcaption strong { display: block; color: var(--ink); font-weight: 600; }

/* --- Forms -------------------------------------------------------------- */
.field { display: grid; gap: .4rem; margin-bottom: 1.1rem; }
.field label { font-size: var(--step--1); font-weight: 600; }
.field .hint { font-size: .8rem; color: var(--ink-faint); }

.field input, .field textarea, .field select {
  width: 100%; padding: .78rem .95rem;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: var(--step--1); transition: border-color .18s ease, box-shadow .18s ease;
}
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--coral); box-shadow: var(--ring);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #C0392B; }
.field .error { font-size: .8rem; color: #C0392B; display: none; }
.field .error[data-show="true"] { display: block; }

/* Honeypot — hidden from humans, catches bots */
.hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; }

.form-note { font-size: .8rem; color: var(--ink-faint); margin-top: .9rem; }
.form-status {
  margin-top: 1rem; padding: .85rem 1rem; border-radius: var(--radius-sm);
  font-size: var(--step--1); display: none;
}
.form-status[data-state="ok"]  { display: block; background: var(--coral-tint); color: var(--coral-dark); }
.form-status[data-state="err"] { display: block; background: #FBEAE8; color: #A03227; }

/* --- Signup band -------------------------------------------------------- */
.signup {
  background: var(--deep); color: #ECECEE;
  border-radius: var(--radius); padding: clamp(1.9rem, 4vw, 3rem);
}
.signup h2 { color: #fff; }
.signup p { color: #A9BDC5; }
.signup .field label { color: #EAF1F3; }
.signup .field input {
  background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.18); color: #fff;
}
.signup .field input::placeholder { color: #7E959E; }
.signup .inline-form { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.4rem; }
.signup .inline-form .field { flex: 1 1 220px; margin-bottom: 0; }
.signup .form-note { color: #7E959E; }

/* --- Blog --------------------------------------------------------------- */
/* Two (or more, on very wide screens) cards per row, same auto-fit
   pattern as .grid-2 elsewhere on the site, one column under ~300px.
   Was a single-column list with a full-width hero image per row; Lisa's
   call 1 Sep 2026: "it's all image now... two articles next to each
   other again", so this went back to a proper card grid with a smaller,
   contained image per card instead of a full-bleed banner. */
.post-list {
  display: grid; gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
}
.post-card {
  display: flex; flex-direction: column; text-decoration: none;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.post-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--coral); }
.post-card__body { display: grid; gap: .5rem; padding: 1.2rem 1.3rem 1.5rem; }
.post-card h3 { transition: color .18s ease; }
.post-card:hover h3 { color: var(--coral); }
.post-card p { color: var(--ink-soft); font-size: var(--step--1); }

.post-hero-img { display: block; width: 100%; height: auto; border-radius: var(--radius); }

/* Card thumbnail: same image the post itself uses, cropped short (16:9
   rather than the post's own 1200:630) so it reads as a thumbnail, not
   the whole card. */
.post-card__img {
  display: block; width: 100%; aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* /writing pagination. Added 1 Sep 2026, matching the live site's own
   numbered pages + prev/next. Only rendered when there is more than one
   page (build.js), so it is invisible while the blog has 4 posts or fewer. */
.pagination {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; margin-top: 2.5rem; padding-top: 1.6rem;
  border-top: 1px solid var(--line-soft); flex-wrap: wrap;
}
.pagination__link { font-weight: 600; text-decoration: none; color: var(--ink); }
.pagination__link:hover { color: var(--coral); }
.pagination__link--disabled { color: var(--ink-soft); opacity: .4; pointer-events: none; }
.pagination__nums { display: flex; gap: .4rem; }
.pagination__num {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2rem; height: 2rem; border-radius: 999px;
  text-decoration: none; color: var(--ink-soft); font-size: var(--step--1);
}
.pagination__num:hover { color: var(--coral); }
.pagination__num--current { background: var(--coral); color: #fff; font-weight: 600; }

.tag {
  display: inline-block; font-size: .72rem; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase;
  color: var(--coral); background: var(--coral-tint);
  padding: .22rem .6rem; border-radius: 999px;
}

/* Article body */
.prose { max-width: var(--measure); }
.prose > * + * { margin-top: 1.2em; }
.prose h2 { font-size: var(--step-2); margin-top: 2.2em; }
.prose h3 { font-size: var(--step-1); margin-top: 1.8em; }
.prose ul, .prose ol { padding-left: 1.4em; display: grid; gap: .5em; }
.prose li { color: var(--ink-soft); }
.prose a { color: var(--coral); text-underline-offset: 3px; }
.prose blockquote {
  border-left: 3px solid var(--teal); padding-left: 1.2rem;
  font-style: italic; color: var(--ink-soft);
}
.prose hr { border: none; border-top: 1px solid var(--line); margin-block: 2.5em; }

/* --- FAQ ---------------------------------------------------------------- */
.faq { display: grid; gap: .75rem; }
.faq details {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 1.1rem 1.3rem;
}
.faq summary {
  cursor: pointer; font-weight: 600; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--coral); font-size: 1.3rem; line-height: 1; flex: none; }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin-top: .8rem; color: var(--ink-soft); font-size: var(--step--1); max-width: var(--measure); }

/* --- CTA band ----------------------------------------------------------- */
.cta-band { background: var(--coral-tint); border-radius: var(--radius); padding: clamp(2rem, 5vw, 3.5rem); text-align: center; }
.cta-band .btn { margin-top: 1.5rem; }

/* --- Footer ------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--line); padding-block: clamp(2.5rem, 5vw, 3.5rem) 2rem; margin-top: var(--section-y); }
.footer__grid { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.footer__grid h4 { font-family: var(--font-body); font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: .9rem; }
.footer__grid ul { list-style: none; padding: 0; display: grid; gap: .5rem; }
.footer__grid a { text-decoration: none; font-size: var(--step--1); color: var(--ink-soft); }
.footer__grid a:hover { color: var(--coral); }
.footer__bottom {
  margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: .82rem; color: var(--ink-faint);
}
.footer__bottom a { color: var(--ink-faint); text-decoration: none; }
.footer__bottom a:hover { color: var(--coral); }

/* --- Utilities ---------------------------------------------------------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.mt-0 { margin-top: 0; }
.mt-2 { margin-top: 2rem; }
.mb-1 { margin-bottom: 1rem; }

/* Scroll reveal — opt-in, degrades to visible without JS */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s ease, transform .55s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

/* ==========================================================================
   Components for the Track B rebuild
   Contrast notes, measured not guessed:
     white on teal  #2F7F73 = 4.77:1  passes AA for body text
     white on coral #E56A54 = 3.22:1  FAILS AA for body text
     ink   on coral #E56A54 = 5.22:1  passes
   So teal bands reverse to white. Coral bands keep ink text and carry white
   cards. Do not reverse a coral band to white text.
   ========================================================================== */

/* --- Full-width bands --------------------------------------------------- */
.band { position: relative; }
/* 28 Aug 2026, per Lisa: every title/hero band that was solid teal now
   carries this black-to-coral gradient instead. Left near-black to match
   the site's dark bands, ramping to the brand coral on the right, per the
   gradient swatch she supplied. Text stays white -- .band--teal h1/h2/h3
   below already reverses to white, and headings are large enough to clear
   AA contrast even over the coral end (3.22:1, the large-text threshold);
   any smaller body copy placed on this band should stay left-weighted,
   where the contrast is highest. Solid teal is not used as a background
   anywhere else: other former-teal backgrounds (the footer, .btn--teal)
   went to solid black instead, since they are not title sections. */
.band--teal  { background: linear-gradient(90deg, #000000 0%, var(--coral) 100%); color: #fff; }
.band--coral { background: var(--coral); color: var(--ink); }
.section--deep { background: var(--deep); color: #ECECEE; }

/* Positioning Fast Track's closing band, 24 Aug 2026. That page's brief
   restricts it to four tokens only, coral/ink/white/light-grey, no teal or
   deep-ink, so it needs its own dark-band variant using --ink rather than
   reusing .section--deep (--deep is a different colour, not in that page's
   allowed set). */
.band--ink { background: var(--ink); color: #fff; }

.band--teal h1, .band--teal h2, .band--teal h3,
.section--deep h1, .section--deep h2, .section--deep h3,
.band--ink h1, .band--ink h2, .band--ink h3,
.heading--on-dark { color: #fff; }
.band--coral h2 { color: var(--ink); }

.lede--on-dark { color: rgba(255,255,255,.9); }
.prose--on-dark { color: rgba(255,255,255,.88); }
.prose--on-dark li { color: rgba(255,255,255,.88); }
.prose--on-dark a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.center-prose { margin-inline: auto; text-align: center; }
.center-actions { justify-content: center; }

/* --- Hero --------------------------------------------------------------- */
.hero { padding-block: clamp(1.75rem, 4vw, 3rem); }
.hero::before { content: none; }          /* the old radial glow, retired */
/* Cut again 24 Aug 2026, per Lisa's standing rule: no excessive padding
   anywhere, and the first screen should show what a reader needs
   immediately, not mostly hero whitespace. */
.hero--compact { padding-block: clamp(1rem, 2.25vw, 1.75rem); }

/* Studio and Contact are the sitewide hero--compact pages with a portrait
   (About has its own separate .ab-hero system, not this one). At the base
   .hero__portrait width (100% of an .85fr column) it ran close to 500px
   wide, reading as a much bigger header than every text-only hero--compact
   page. Capped to the same order of size as home's hero--tight portrait
   (215px), 24 Aug 2026 per Lisa: "the header is massive". */
.hero--compact .hero__portrait { max-width: 260px; margin-inline: auto; }

/* 31 Aug 2026, per Lisa: "the profile pictures are all too small, make
   them hit the top and bottom of the section". Desktop only (matches the
   existing two-column breakpoint) -- on a single mobile column the
   portrait is its own row, not sharing height with the text, so there is
   no "section height" to fill and the old centred/padded look is kept.
   The section's own padding-block moves onto .hero__copy only, so the
   portrait column is free to stretch the full row height.

   ⚠️ FIRST ATTEMPT (still 31 Aug) fixed the column at 260px wide and let
   it stretch to whatever height the row turned out to be -- on Studio
   that row runs ~480px tall, so a 260-wide/480-tall box is far narrower
   than the photo's own ~0.8 aspect ratio, and object-fit: cover had to
   blow the image up and crop away most of its width to fill that shape.
   Read back as "too zoomed in and tiny". Fixed properly below: the
   column's WIDTH is now derived from the row's height via aspect-ratio,
   so cover never has to crop hard, whatever height a given page's hero
   text happens to produce. */
@media (min-width: 900px) {
  /* ⚠️ Fixed same day: this used to zero out .hero--compact's padding
     unconditionally, on the assumption every .hero--compact section has
     a .hero__portrait to move that padding onto. Most don't -- AI and
     Automation, Decision Call, Path, Positioning Profile, Questions,
     Soundcheck, The Stack and Writing are all .hero--compact with no
     portrait at all, and silently lost their top/bottom padding at
     900px+ ("space under the button" disappearing on AI and Automation
     was this). Scoped with :has() now, so only the two pages that
     actually have a portrait (Studio, Contact) get the padding moved;
     every other .hero--compact page keeps its normal padding-block
     from the rule above, untouched. */
  .hero--compact:has(.hero__portrait) { padding-block: 0; }
  .hero--compact .hero__copy { padding-block: clamp(1rem, 2.25vw, 1.75rem); }
  .hero--compact .hero__grid { grid-template-columns: 1fr auto; align-items: stretch; }
  /* ⚠️ Fixed again, 1 Sep 2026: width:auto + aspect-ratio on a
     stretch-row grid item is NOT independent of the row's height the
     way align-self:center implies -- browsers size an auto-width
     aspect-ratio item's max-content contribution off the row's
     stretched height regardless, so on a page with a short hero__copy
     (Studio, after its price-line copy got shorter) the portrait
     shrank right along with it, while a page with a tall hero__copy
     (Contact) happened to still hit the 400px ceiling and looked
     "right" by luck, not by design. Read back as "gone smaller again"
     on Home and Studio, inconsistent with About/Contact. Fixed by
     giving width a DEFINITE value (400px, not auto/max-width) so the
     aspect-ratio-derived height is computed from that fixed width
     alone -- same size on every page, independent of copy length.
     ⚠️ Also caught here: the base (no-media) rule above this block sets
     max-width: 260px, unconditionally. That rule was never scoped to
     under-900px, so it kept applying here too and silently capped
     "width: 400px" back down to 260 -- max-width always wins over
     width when the two conflict. max-width: none clears it. */
  .hero--compact .hero__portrait {
    width: 400px; max-width: none; margin-inline: 0; align-self: center;
    aspect-ratio: 1740 / 2160; /* the source photo's own ratio -- see .hero__portrait img */
  }
  .hero--compact .hero__portrait img { height: 100%; width: 100%; object-fit: cover; object-position: 50% 15%; }
}

.hero__grid {
  display: grid; gap: clamp(2rem, 5vw, 3.5rem);
  grid-template-columns: 1fr; align-items: center;
}
@media (min-width: 900px) { .hero__grid { grid-template-columns: 1.15fr .85fr; } }

/* Portrait shape matches the live site, 31 Aug 2026 per Lisa: "same shape
   and format as the current active website". The live site masks the
   image with an inline SVG (viewBox 0 0 200 200) rather than using
   border-radius -- two sharp corners (top-left, bottom-right) and two
   large rounded ones (top-right, bottom-left), each rounded at ~43% of
   the image's own size. Read directly off the live DOM's computed
   mask-image rather than guessed. box-shadow dropped: a rectangular
   shadow behind an organic-masked image reads as a mismatch, and the
   live site doesn't use one either. */
.hero__portrait img {
  width: 100%;
  -webkit-mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M0 0H113.333C161.198 0 200 38.802 200 86.6667V200H86.6667C38.802 200 0 161.198 0 113.333V0Z"/></svg>');
  -webkit-mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200"><path d="M0 0H113.333C161.198 0 200 38.802 200 86.6667V200H86.6667C38.802 200 0 161.198 0 113.333V0Z"/></svg>');
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}
@media (max-width: 899px) { .hero__portrait { max-width: 340px; } }

/* Was capped at --step-2, a size down from a real H1, to look "quiet" next
   to the portrait. Per Lisa, 24 Aug 2026: "make sure it's H1... use all
   the space." Only used on About, so this now just sets a slightly looser
   line-height for a two-sentence headline; size comes from the sitewide
   h1 rule (--step-4). */
.h1--quiet { line-height: 1.15; }

/* --- About page, main narrative section, 24 Aug 2026 spec ---------------
   Four distinct full-bleed blocks (opening / stat band / what she watched
   / then she left), each with its own treatment. Content column is wider
   than the sitewide --wide token on purpose: 90% of viewport, capped at
   1600px, left aligned throughout. No text-wrap balance/pretty and no
   manual <br> anywhere in this section, per brief. */
.about-wide { width: min(90vw, 1600px); margin-inline: auto; }
.about-narrative h1, .about-narrative h2, .about-narrative h3,
.about-narrative p { text-wrap: wrap; }

.about-open__title {
  font-family: var(--font-display); font-weight: 600; line-height: 1.12;
  letter-spacing: -0.015em; color: var(--ink); font-size: var(--step-4);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.about-open__body p { font-size: var(--step-0); max-width: none; }
.about-open__body p + p { margin-top: 1.2em; }

.stat-band__lead { color: #fff; font-size: var(--step-0); margin-bottom: clamp(1.75rem, 4vw, 2.5rem); max-width: none; }
.stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 4vw, 2.5rem); }
@media (max-width: 900px) { .stat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stat-grid { grid-template-columns: 1fr; } }
.stat-grid__figure {
  font-family: var(--font-display); font-weight: 600; font-size: var(--step-3);
  color: #fff; line-height: 1.1;
}
.stat-grid__label {
  font-family: var(--font-body); font-size: var(--step--1);
  color: rgba(255,255,255,.75); margin-top: .4rem;
}

.about-watched__body p { font-size: var(--step-0); max-width: none; }
.about-watched__body p + p { margin-top: 1.2em; }
.about-watched__body p.about-pullquote {
  font-family: var(--font-display); font-weight: 600;
  font-size: calc(var(--step-0) * 1.4); color: var(--coral); line-height: 1.3;
  margin-block: clamp(1.75rem, 4vw, 2.5rem);
}

.about-left__body p { font-size: var(--step-0); max-width: none; }
.about-left__body p + p { margin-top: 1.2em; }
.about-left__form { margin-top: clamp(1.75rem, 4vw, 2.25rem); max-width: 480px; }

.price-line {
  margin-top: 1.1rem; font-size: var(--step--1); font-weight: 500;
  color: rgba(255,255,255,.82); letter-spacing: .01em;
}

/* --- Logo strip --------------------------------------------------------- */
.logo-strip { margin-top: clamp(2.25rem, 5vw, 3.25rem); }
.logo-strip__label {
  font-size: .72rem; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.6); margin-bottom: 1rem;
}
.logo-strip__row {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.25rem clamp(1.75rem, 5vw, 3.25rem);
}
.logo-strip__row img { opacity: .92; height: 30px; width: auto; }

/* Pure newsletter asks are now a link to /corporate-to-solo rather than
   an inline form, so this sits where .capture used to and matches its
   spacing. See build.js FOOTER_FORM for why. */
.capture__cta { margin-top: 1.75rem; }
.capture__cta.center { text-align: center; }

/* --- Email capture, one component used everywhere ----------------------- */
.capture { margin-top: 1.75rem; }
.capture__row { display: flex; flex-wrap: wrap; gap: .65rem; }
.capture__row input[type="email"] {
  flex: 1 1 260px; min-width: 0;
  padding: .85rem 1rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.1); color: #fff;
  font-size: var(--step--1);
}
.capture__row input::placeholder { color: rgba(255,255,255,.55); }
.capture__row input:focus {
  outline: none; border-color: #fff; background: rgba(255,255,255,.16);
  box-shadow: 0 0 0 3px rgba(255,255,255,.22);
}
.capture__row input[aria-invalid="true"] { border-color: #FFD5CE; }

/* max-width was a hardcoded 52ch, same issue as .lede and .price-line:
   kept wrapping early even after the sitewide widening. Matched to
   --measure, 24 Aug 2026. */
.capture__note {
  margin-top: .95rem; font-size: .82rem; line-height: 1.5;
  color: rgba(255,255,255,.72); max-width: var(--measure);
}
.capture--centred .capture__note, .center .capture__note { margin-inline: auto; }

.capture__check {
  display: inline-flex; align-items: center; gap: .5rem;
  margin-top: .9rem; font-size: var(--step--1); color: rgba(255,255,255,.9);
  cursor: pointer;
}
.capture__check input { width: 17px; height: 17px; accent-color: var(--coral); }

.capture__status { margin-top: .7rem; font-size: .82rem; }
.capture__status[data-state="err"] { color: #FFD5CE; }
.capture__status[data-state="ok"]  { color: #fff; }

.capture__done {
  margin-top: 1.75rem; font-weight: 600; font-size: var(--step-0);
  color: inherit;
}

.capture--centred { max-width: 540px; margin-inline: auto; }
.capture--centred .capture__row { justify-content: center; }

/* Capture on a light background, used in the footer and on Contact */
.capture--compact .capture__row input[type="email"],
.section:not(.band) .capture .capture__row input[type="email"] {
  background: var(--surface); color: var(--ink); border-color: var(--line);
}
.capture--compact .capture__row input::placeholder,
.section:not(.band) .capture .capture__row input::placeholder { color: var(--ink-faint); }
.capture--compact .capture__row input:focus,
.section:not(.band) .capture .capture__row input:focus {
  border-color: var(--coral); box-shadow: var(--ring); background: var(--surface);
}
.section:not(.band) .capture__note { color: var(--ink-faint); }
.section:not(.band) .capture__status[data-state="err"] { color: #A03227; }

/* --- Pull quote --------------------------------------------------------- */
.pullquote {
  margin-block: clamp(1.75rem, 4vw, 2.5rem);
  padding-block: clamp(1.25rem, 3vw, 1.75rem);
  border-top: 2px solid var(--coral);
  border-bottom: 2px solid var(--coral);
}
/* When a pullquote is the last thing in its section, its own bottom
   margin stacks with the section's bottom padding AND the next section's
   top padding, producing a large gap. Dropped per Lisa 24 Aug 2026. */
.pullquote:last-child { margin-bottom: 0; }
.pullquote blockquote {
  font-family: var(--font-display); font-size: var(--step-2);
  font-weight: 600; line-height: 1.25; letter-spacing: -.015em;
  color: var(--ink); text-wrap: balance;
}

/* --- Row zero, the newsletter rung ------------------------------------- */
.row-zero {
  margin-top: 1.75rem; padding: 1.4rem 1.6rem;
  border-left: 3px solid var(--coral); background: var(--surface-2);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.row-zero p { font-size: var(--step--1); color: var(--ink-soft); }
.row-zero p:first-child { color: var(--ink); }
.row-zero__link { margin-top: .8rem; }
.row-zero__link a { color: var(--coral); text-decoration: none; font-weight: 500; }
.row-zero__link a:hover { text-decoration: underline; }

/* --- Cards -------------------------------------------------------------- */
.card .card__reader {
  font-size: var(--step--1); font-weight: 600; color: var(--ink);
  margin-bottom: .85rem; line-height: 1.45;
}
.card .card__label {
  font-size: .72rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; color: var(--coral); margin-bottom: .5rem;
}
.card .card__aside {
  margin-top: 1rem; font-size: .78rem; line-height: 1.55;
  color: var(--ink-faint);
}
.card--featured { border-color: var(--coral); border-width: 2px; }

.alongside {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-inline: clamp(1.25rem, 3vw, 2rem);
}
/* Was a tiny uppercase kicker ("Alongside any of them"), which read as an
   afterthought next to the two full-size group headings above it. Restyled
   24 Aug 2026 to match .group__heading's weight, now that its text is a
   full sentence rather than a short label. */
.alongside__heading {
  font-size: var(--step-2);
  margin-bottom: 1rem;
  /* The sitewide h3 rule sets text-wrap: balance, which was choosing an
     even two-line split (breaking after "and") rather than filling the
     first line, reading as an arbitrary break mid-sentence. Reverted to
     normal wrap 24 Aug 2026 per Lisa. The sentence is long enough that it
     will still wrap at this size; normal wrap at least breaks as late as
     possible instead of splitting artificially early. */
  text-wrap: wrap;
}
/* Card used to cap at 620px, a leftover from a narrower .group-b layout
   that no longer exists (replaced by .help-columns). Left the card
   looking cropped against the now-full-width container. Removed 24 Aug
   2026 per Lisa: "use the whole page." */

/* --- Testimonials on the coral band ------------------------------------ */
.quote--on-coral { background: var(--surface); border-color: transparent; }

/* --- Question blocks ---------------------------------------------------- */
.qa { display: grid; gap: 1.75rem; }
.qa__item h3, .qa__item h2 { margin-bottom: .55rem; }
.qa__item p { color: var(--ink-soft); }
.qa__item p + p { margin-top: .8rem; }
.qa--long { gap: 2.5rem; }
.qa--long .qa__item { padding-bottom: 2.5rem; border-bottom: 1px solid var(--line-soft); }
.qa--long .qa__item:last-child { border-bottom: none; padding-bottom: 0; }
.qa--long h2 { font-size: var(--step-1); }

/* --- Plain lists -------------------------------------------------------- */
.plain-list { list-style: none; padding: 0; display: grid; gap: .9rem; }
.plain-list li {
  padding-left: 1.25rem; position: relative;
  color: var(--ink-soft); font-size: var(--step-0);
}
.plain-list li::before {
  content: ""; position: absolute; left: 0; top: .65em;
  width: 6px; height: 6px; border-radius: 50%; background: var(--coral);
}
.plain-list--centred { justify-items: center; }
.plain-list--centred li { padding-left: 0; }
.plain-list--centred li::before { content: none; }

/* Small clarifier directly under one contact-list line, not its own
   paragraph gap. Added 24 Aug 2026: the discovery call is not for
   Studio/cohort bookings. */
.contact-list__note { margin-top: .3rem; font-size: var(--step--2); color: var(--ink-faint); }

/* --- Plain note in Lisa's voice, never a footer disclaimer -------------- */
.note-plain {
  margin-top: 1.5rem; padding-left: 1rem;
  border-left: 2px solid var(--line);
  font-size: var(--step--1); color: var(--ink-soft);
  max-width: var(--measure);
}
.note-plain--on-dark {
  border-left-color: rgba(255,255,255,.3); color: rgba(255,255,255,.75);
  margin-inline: auto; text-align: left; max-width: 46ch;
}

/* --- Soundcheck verdicts ----------------------------------------------- */
.verdicts { display: grid; gap: 0; }
.verdicts > div {
  display: grid; gap: .3rem 1.5rem; padding: 1rem 0;
  border-bottom: 1px solid var(--line-soft);
}
@media (min-width: 620px) { .verdicts > div { grid-template-columns: 200px 1fr; } }
.verdicts dt { font-weight: 600; color: var(--ink); }
.verdicts dd { margin: 0; color: var(--ink-soft); font-size: var(--step--1); }

/* --- The Path steps ----------------------------------------------------- */
.path-steps { list-style: none; padding: 0; display: grid; gap: 0; }
.path-step {
  display: grid; grid-template-columns: auto 1fr; gap: 1.25rem;
  padding: 1.6rem 0; border-bottom: 1px solid var(--line-soft);
  align-items: start;
}
.path-step__num {
  font-family: var(--font-display); font-size: var(--step-2);
  font-weight: 600; color: var(--coral); line-height: 1;
  min-width: 2.2rem;
}
.path-step--alt .path-step__num { color: var(--teal); }
.path-step__body h3 { margin-bottom: .3rem; }
.path-step__price {
  font-weight: 600; color: var(--ink); font-size: var(--step--1);
  margin-bottom: .5rem;
}
.path-step__body p { color: var(--ink-soft); font-size: var(--step--1); max-width: var(--measure); }

/* --- The record, About -------------------------------------------------- */
/* Gap tightened 24 Aug 2026 per Lisa: "remove all spacing between the
   different qualifications." Only used on the About page's
   Qualifications list now (the CV/record section switched to the new
   .ab-* design and no longer uses this class). */
.record { display: grid; gap: .3rem; }
/* Was --step--1 (a size down from body text), which read as hard to read
   for a CV/record list. Bumped to base size, 24 Aug 2026 per Lisa. */
.record p { color: var(--ink-soft); font-size: var(--step-0); max-width: var(--measure); }
.record strong { color: var(--ink); }

.subhead-label {
  font-family: var(--font-body); font-size: .74rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint);
  margin-bottom: 1rem;
}

/* --- Ticks reversed ----------------------------------------------------- */
.ticks--on-dark li { color: rgba(255,255,255,.85); }
.ticks--on-dark li strong { color: #fff; }
.ticks--on-dark li::before { color: var(--coral); }

/* --- Newsletter CTA, own section above the footer ----------------------- */
/* Used to live inside <footer>, label and button stacked (button below,
   with its own top margin), which made the footer noticeably tall. 24 Aug
   2026 per Lisa: moved to its own grey section directly above the footer,
   label and button in one row, button right-aligned. */
/* max-width was 720px, too narrow for the longer label copy ("Sign up
   here for weekly Corporate to Founder Notes...") to sit on one line
   next to the button, so it wrapped to two lines. Widened 24 Aug 2026
   per Lisa: "the button on the right... so it all fits on one line." */
.footer__form {
  max-width: 960px;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: .75rem 1.5rem;
}
.footer__form-label { font-size: var(--step--1); color: var(--ink-soft); }
.footer__form .capture__cta { margin-top: 0; }
.footer__form .capture { margin-top: 1rem; }

/* --- Header brand image ------------------------------------------------- */
.brand img { height: 42px; width: auto; }
@media (max-width: 520px) { .brand img { height: 34px; } }

/* --- Ladder grid -------------------------------------------------------- */
@media (min-width: 760px) { .ladder { grid-template-columns: repeat(2, 1fr); } }

/* The footer sits directly under a full-width band on most pages, so the
   old top margin would open a white gap. */
.site-footer { margin-top: 0; }

/* ==========================================================================
   Homepage revisions, 22 Aug 2026
   Hero proportions taken from the live site's own hero: 190 characters of
   text, one button, no form. The reader reaches information without scrolling.
   ========================================================================== */

/* Green block shortened again and everything pulled up, 22 Aug.
   The headline, the subhead and the note under the button each sit on a
   single line at desktop width. They wrap normally below 900px. */
/* Cut again 24 Aug 2026, per Lisa's standing rule: no excessive padding
   anywhere, and the first screen should show what a reader needs
   immediately. This is the home page hero. */
.hero--tight { padding-block: clamp(.85rem, 1.75vw, 1.5rem) clamp(1rem, 2vw, 1.75rem); }
/* 31 Aug 2026, per Lisa: portrait stretches the full section height on
   desktop -- same treatment and same reasoning as .hero--compact just
   above. Padding moves onto .hero__copy only so the portrait column is
   free to fill the row. */
@media (min-width: 900px) {
  .hero--tight { padding-block: 0; }
  .hero--tight .hero__copy { padding-block: clamp(.85rem, 1.75vw, 1.5rem) clamp(1rem, 2vw, 1.75rem); }
}
/* Same size as every other page's H1 (var(--step-4)) — was its own smaller
   clamp, which read as a lighter opening than the rest of the site. */
.hero--tight h1 { line-height: 1.06; }
.hero--tight .lede { font-size: var(--step-0); max-width: none; margin-top: .7rem; }
.hero--tight .hero__actions { margin-top: 1.2rem; }
.hero--tight .hero__grid { gap: clamp(1.5rem, 3.5vw, 2.25rem); align-items: center; }

/* Was .82rem at 72% white, which Lisa had to squint at. It also measured
   3.2:1 against the teal, below the 4.5 AA needs for text this size.
   Full white is 4.77:1 and passes. */
.hero__sub-action {
  margin-top: .85rem; font-size: .95rem; line-height: 1.5;
  color: #fff; max-width: none;
}

/* The hero subhead is now a recognition block: a paragraph of the reader's
   own situation, then a short turn. Set at body size, not lede size, because
   at lede size it dominates the H1. */
.hero__recognition {
  margin-top: .9rem; max-width: none;
}
.hero__recognition p {
  font-size: var(--step-0); line-height: 1.55;
  color: rgba(255,255,255,.9);
}
.hero__recognition p + p {
  margin-top: .7rem; color: #fff; font-weight: 500;
}

/* Section 1's heading is a quoted line with a standfirst above it.
   It shares --step-2 with the pull quote deliberately: the two are the only
   display moments in the section, and at 34px against 30px they read as an
   accident rather than a rhythm. One display size, used twice. */
.h2--quoted {
  font-size: var(--step-2);
  line-height: 1.2;
  color: var(--ink);
  margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
}

/* Fixed-210px portrait width (24-26 Aug 2026 history: narrowed to 190px,
   then widened back to 210px "slightly bigger") is superseded 31 Aug
   2026 by the aspect-ratio-driven width further down this file -- see
   the mobile rule below and its own 900px+ override. Kept as history in
   this comment rather than the dead rule itself, since the two would
   otherwise silently fight over the same properties. */

/* The headline and the note sit on one line from 1200px up.
   🛑 The subhead is NOT in this rule. On 23 Aug it gained the AI workforce
   clause and is now ~116 characters, which is wider than its column even at
   1440. Forcing nowrap on it pushed it outside the wrap and clipped it.
   If the subhead ever gets shorter again, measure before adding it back. */
@media (min-width: 1200px) {
  .hero--tight h1,
  .hero--tight .hero__sub-action { white-space: nowrap; }
}

/* Portrait, mobile: narrower column, not cropped, full figure shows.
   Source is 1740x2160, so a 250px column renders roughly 310px tall. */
.hero--tight .hero__portrait { justify-self: end; width: 100%; max-width: 210px; }
.hero--tight .hero__portrait img {
  width: 100%; height: auto;
  max-height: none; object-fit: contain;
}
@media (min-width: 900px) {
  .hero--tight .hero__grid { grid-template-columns: 1fr auto; align-items: stretch; }
  /* 31 Aug 2026, per Lisa: "hit the top and bottom of the section" --
     desktop only, same as .hero--compact. Switches from object-fit:
     contain (deliberately uncropped, see the mobile rule above and its
     26 Aug note) to cover, which crops the source photo to fill the full
     row height; object-position pinned toward the top so any crop trims
     from the shoulders down rather than through the face.
     ⚠️ Fixed same day: a fixed 210px width stretched to whatever height
     the row turned out to be forced a much harder crop than intended
     ("too zoomed in and tiny"). Width is now aspect-ratio-derived from
     the height instead of a fixed px value, same fix as .hero--compact.
     ⚠️ Fixed again same day: with no ceiling, .hero--compact's version of
     this same rule let a tall-wrapping H1 spiral the image up to 914px
     wide against a 312px text column (see about.html's own copy of this
     fix). Capped here too, same 400px ceiling, before Home's own H1 ever
     gets long enough to do the same thing. Height is no longer forced to
     100% -- letting aspect-ratio derive it from the (now capped) width
     avoids the two fighting over the same box. */
  /* ⚠️ Fixed again, 1 Sep 2026: same width:auto/aspect-ratio bug as
     .hero--compact just above -- a definite width now replaces
     width:auto+max-width so the portrait is a fixed 400px on every
     .hero--tight page too, not sized off however tall that page's own
     copy happens to be. See the longer note on .hero--compact.
     Same second bug too: the base rule above sets max-width: 210px
     unconditionally, which silently capped this override right back
     down. max-width: none clears it. */
  .hero--tight .hero__portrait { width: 400px; max-width: none; align-self: center; aspect-ratio: 1740 / 2160; }
  .hero--tight .hero__portrait img { height: 100%; width: 100%; object-fit: cover; object-position: 50% 15%; }
}
@media (max-width: 899px) { .hero--tight .hero__portrait { max-width: 200px; justify-self: start; } }

/* Sits inside the copy column, directly under the button. */
.hero--tight .logo-strip { margin-top: 1.35rem; }
.hero--tight .logo-strip__row { gap: .9rem clamp(1.35rem, 3.5vw, 2.4rem); }
.hero--tight .logo-strip__row img { opacity: .85; }

/* ==========================================================================
   The one-pager, /what-i-do-and-what-it-costs
   Lisa's document restyled into NPA brand. The source used Newsreader, IBM
   Plex Mono, a green #00604C and a dark mode. All of that is replaced with
   the site's own type and palette; the structure it needs is below.
   ========================================================================== */
.onepager .lede { color: var(--ink); }

/* Section rules. The source used a small mono label over a hairline. Same
   job here, in the site's own type. */
.rule-head {
  font-family: var(--font-body);
  font-size: .74rem; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-faint);
  margin-top: clamp(2.75rem, 6vw, 3.75rem);
  margin-bottom: 1.25rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--line);
}

/* The overheard line. Display size, the same one Section 1 of the home page
   uses, so the site has one display size and not two. Only used on
   what-i-do-and-what-it-costs.html, 26 Aug 2026 -- no max-width, since both
   scene lines there run 40-55 characters and a narrow cap forced awkward
   mid-sentence wraps instead of using the page width. */
.scene {
  font-family: var(--font-display);
  font-size: var(--step-2); font-weight: 600;
  line-height: 1.25; color: var(--ink);
  margin-block: clamp(1.5rem, 3.5vw, 2rem);
}

/* A product block. */
.rung {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.4rem, 3vw, 1.9rem);
  margin-bottom: .9rem;
}
.rung--lead { border-left: 3px solid var(--coral); }
.rung__top {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 1rem; flex-wrap: wrap; margin-bottom: .35rem;
}
.rung__top h3 { margin: 0; }
.rung .rung__price {
  font-weight: 600; color: var(--coral);
  font-size: var(--step-1); white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.rung .rung__meta {
  font-size: .74rem; font-weight: 600;
  letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-faint); margin-bottom: .9rem;
}
.rung p { font-size: var(--step--1); color: var(--ink-soft); }
.rung p + p { margin-top: .7rem; }
.rung .rung__email { font-size: var(--step-0); color: var(--ink); }
.rung__email a { color: var(--coral); white-space: nowrap; }

.rung__list {
  list-style: none; padding: 0; margin: .9rem 0;
  display: grid; gap: .5rem;
}
.rung__list li {
  position: relative; padding-left: 1.35rem;
  font-size: var(--step--1); color: var(--ink-soft);
}
.rung__list li::before {
  content: ""; position: absolute; left: 0; top: .72em;
  width: 8px; height: 2px; background: var(--coral);
}
.rung__list li strong { color: var(--ink); }

/* Quoted recommendations, plainer than the card style used elsewhere. */
.said {
  border-left: 2px solid var(--line);
  padding-left: 1.25rem;
  margin-block: clamp(1.5rem, 3vw, 2rem);
}
.said blockquote {
  font-size: var(--step-0); line-height: 1.55; color: var(--ink);
}
.said blockquote p + p { margin-top: .7rem; }
.said--tight blockquote { font-size: var(--step--1); }
.said figcaption {
  margin-top: .8rem;
  font-size: .74rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-faint);
}

.note-panel {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(1.25rem, 3vw, 1.6rem);
}
.note-panel p { font-size: var(--step--1); color: var(--ink-soft); }
.note-panel p + p { margin-top: .8rem; }
.note-panel strong { color: var(--ink); }

/* Same shaded card as .note-panel, but sized for a full block of body prose
   (.prose) rather than a smaller aside note -- for breaking up a long run
   of narrative paragraphs on text-heavy pages like the one-pager. */
.story-panel {
  background: var(--surface-2);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.25rem);
}
.story-panel .prose { max-width: none; }

/* Wide content scrolls inside its own box; the page never scrolls sideways. */
.table-scroll { overflow-x: auto; }
.price-table {
  width: 100%; border-collapse: collapse;
  font-size: var(--step--1); min-width: 440px;
}
.price-table th, .price-table td {
  text-align: left; padding: .7rem .75rem;
  border-bottom: 1px solid var(--line-soft); vertical-align: top;
}
.price-table thead th {
  font-size: .7rem; font-weight: 600;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-faint); border-bottom: 1px solid var(--line);
}
.price-table td { color: var(--ink-soft); }
.price-table td strong { color: var(--ink); }
.price-table .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

.onepager__foot {
  margin-top: clamp(3rem, 7vw, 4rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--line);
  font-size: .84rem; color: var(--ink-faint);
}
.onepager__foot p + p { margin-top: .5rem; }
.onepager__foot strong { color: var(--ink-soft); }

/* ==========================================================================
   Brevo embed, /corporate-to-solo
   Presentation only. Nothing here changes what the form posts or where.
   The embed ships Helvetica and Roboto, a #EFF2F7 blue-grey panel and the
   drifted coral #E76952. All three are off-brand and are corrected below.
   ========================================================================== */
.signup-page { padding-block: clamp(3rem, 8vw, 6rem); }
.signup-page .sib-form { background: transparent !important; padding: 0 !important; }

.signup-page #sib-container {
  max-width: 540px; margin-inline: auto;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow-md);
  padding: clamp(1.75rem, 4vw, 2.5rem) !important;
  text-align: left !important;
}

/* Type: the site's faces, not Brevo's */
.signup-page #sib-container,
.signup-page #sib-container input,
.signup-page #sib-container button,
.signup-page #sib-container label,
.signup-page #sib-container p {
  font-family: var(--font-body) !important;
}
.signup-page .sib-form-block--title h1 {
  font-family: var(--font-display) !important;
  font-size: var(--step-3); color: var(--ink); margin-bottom: .5rem;
}
.signup-page .sib-form-block--sub p {
  font-size: var(--step-0); color: var(--ink-soft); margin-bottom: 1.5rem;
}

.signup-page .entry__label {
  display: block; font-size: var(--step--1); font-weight: 600;
  color: var(--ink) !important; margin-bottom: .4rem;
}
.signup-page #sib-container input.input {
  width: 100%; padding: .78rem .95rem;
  border: 1px solid var(--line) !important; border-radius: var(--radius-sm) !important;
  background: var(--surface); color: var(--ink);
  font-size: var(--step--1);
}
.signup-page #sib-container input.input:focus {
  outline: none; border-color: var(--coral) !important; box-shadow: var(--ring);
}
.signup-page .sib-input { margin-bottom: 1.1rem; }

/* The button: brand coral, not the drifted E76952 the embed ships */
.signup-page .sib-form-block__button {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  width: 100%;
  background: var(--coral) !important; color: #fff !important;
  font-family: var(--font-body) !important;
  font-size: var(--step--1) !important; font-weight: 600 !important;
  padding: .85rem 1.4rem !important;
  border: none !important; border-radius: 999px !important;
  cursor: pointer; text-align: center !important;
  transition: background .18s ease, box-shadow .18s ease;
}
.signup-page .sib-form-block__button:hover {
  background: var(--coral-dark) !important; box-shadow: var(--shadow-md);
}
.signup-page .sib-form-block--submit { margin-top: .4rem; }

.signup-page .entry__error { font-size: .8rem; }
.signup-page .input--hidden { position: absolute; left: -9999px; }

/* --- Booking confirmation page ------------------------------------------- */
.booking-page { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.booking-page .lede { margin-top: .75rem; }
.booking-page .note-plain { margin-top: 1.5rem; }
.calendly-wrap {
  margin-top: 2rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--surface);
}

/* --- Two boxes under "How I can help" ------------------------------------
   Redesigned 24 Aug 2026 per Lisa: two full-height boxes side by side,
   "Thinking about it" left, "Already running it" right, each one scannable
   without scrolling. Replaces the old single-column stack of four full
   .card elements (long paragraphs, one under the other), which read as
   messy rather than as two clear answers. Offerings inside each box are
   now compact rows (.help-item), not full cards. */
.help-columns {
  display: grid; gap: clamp(1.5rem, 4vw, 2.5rem);
  grid-template-columns: 1fr;
}
@media (min-width: 860px) { .help-columns { grid-template-columns: 1fr 1fr; } }

/* Border matched to .card--featured (the Decision Call card) per Lisa
   24 Aug 2026: "make the boxes orange like the decision call." */
.help-box {
  background: var(--surface); border: 2px solid var(--coral);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
}

/* Smaller than the section h2, larger than a card title. */
.group__heading { font-size: var(--step-2); margin-top: 0; }
.group__sub { font-size: var(--step--1); color: var(--ink-soft); margin-top: .4rem; }

.help-list { display: grid; gap: 0; margin-top: 1.1rem; }
.help-item {
  padding: .85rem 0; border-top: 1px solid var(--line-soft);
}
.help-item:first-child { border-top: none; }
.help-item__label {
  font-size: .74rem; font-weight: 600; letter-spacing: .09em;
  text-transform: uppercase; color: var(--ink-faint); margin-bottom: .3rem;
}
.help-item h4 { font-size: var(--step-0); margin-bottom: .3rem; }
.help-item p { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: .5rem; }

/* --- Embedded n8n form -------------------------------------------------- */
/* The form is embedded rather than linked so the domain does not change under
   the reader. n8n cannot post its height to us, so the frame is generously
   tall and scrolls internally if it needs to. */
.form-embed {
  max-width: 680px;
  margin-inline: auto;
}
.form-embed iframe {
  display: block; width: 100%; border: 0;
  height: 1750px;
}

/* Small Brevo forms (Soundcheck waiting list) ship their own fixed size.
   White card so the form's own white background reads as deliberate on a
   teal band, not a mistake. Height was 305px, which cut the form off
   partway down; measured the real content at 440-550px depending on width
   (it stacks taller on narrow screens) and set 570px, 24 Aug 2026, so the
   whole thing is visible without an internal scrollbar. */
.form-embed--compact {
  max-width: 540px; margin-top: 1.75rem;
  background: #fff; border-radius: var(--radius);
  overflow: hidden; box-shadow: var(--shadow-md);
}
.form-embed--compact iframe { height: 570px; }
.note-plain--centred {
  border-left: none; padding-left: 0;
  margin-inline: auto; text-align: center;
}

/* --- Positioning page --------------------------------------------------- */
.card .card__label--product {
  color: var(--ink); margin-bottom: .75rem;
  text-transform: none; letter-spacing: 0; font-size: var(--step--1);
}
/* Shown instead of a button where the product cannot be delivered yet. */
.card__soon {
  display: inline-block;
  font-size: var(--step--1); font-weight: 600;
  color: var(--ink-faint); background: var(--surface-2);
  padding: .55rem 1.1rem; border-radius: 999px;
}

/* --- Qualification marks, About page ------------------------------------ */
.qual-row {
  list-style: none; padding: 0; margin-top: 1.75rem;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 1.25rem clamp(1.75rem, 4vw, 2.75rem);
}
.qual-row img { height: 40px; width: auto; }
.qual-row img.qual-row__tall { height: 52px; }

/* Row zero now carries the site's primary capture */
.row-zero--form { padding: clamp(1.5rem, 3vw, 2rem) clamp(1.5rem, 3vw, 2rem); }
.row-zero__lead { font-size: var(--step-0) !important; color: var(--ink) !important; }
.row-zero--form .capture { margin-top: 1.2rem; max-width: 480px; }

/* --- Footer -------------------------------------------------------------- */
/* Was solid teal, matching the live site. 28 Aug 2026, per Lisa: not a
   title section, so solid black rather than the new gradient. Text colours
   already white/near-white, unchanged. */
.site-footer {
  background: #000000;
  color: rgba(255,255,255,.85);
  border-top: none;
}
.site-footer .footer__grid h4 { color: rgba(255,255,255,.6); }
.site-footer .footer__grid a  { color: rgba(255,255,255,.85); }
.site-footer .footer__grid a:hover { color: #fff; text-decoration: underline; }

.site-footer .capture__row input[type="email"] {
  background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.28);
}
.site-footer .capture__row input::placeholder { color: rgba(255,255,255,.55); }
.site-footer .capture__row input:focus {
  border-color: #fff; background: rgba(255,255,255,.16);
  box-shadow: 0 0 0 3px rgba(255,255,255,.22);
}
.site-footer .capture__status[data-state="err"] { color: #FFD5CE; }

.site-footer .footer__bottom {
  border-top-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.7);
}
.site-footer .footer__bottom a { color: rgba(255,255,255,.7); }
.site-footer .footer__bottom a:hover { color: #fff; }

/* --- Install page, minimum 18px everywhere, per Lisa 24 Aug 2026 -------- */
/* Several sitewide small-text tokens (eyebrow, base .btn, verdicts dd)
   read too small on this page specifically. Scoped to .install-page
   (added to every <section> on the-install.html) rather than changing
   those tokens sitewide, since they're deliberately small elsewhere
   (kicker labels, compact button variants). */
.install-page p,
.install-page dt,
.install-page dd,
.install-page .eyebrow,
.install-page .btn { font-size: 18px; }

/* --- AI and Automation page (renamed from Operations, 27 Aug 2026),
   minimum 18px everywhere, per Lisa 24 Aug 2026 ----- */
.aia-page p,
.aia-page a,
.aia-page dt,
.aia-page dd,
.aia-page .price-line,
.aia-page .card__label,
.aia-page .link-arrow,
.aia-page .btn,
.aia-page .capture__note { font-size: 18px; }

/* --- Studio hero sub-line + price, bigger per Lisa 24 Aug 2026 ---------- */
.studio-hero .hero__sub-action,
.studio-hero .price-line { font-size: 18px; }

/* --- Soundcheck hero H1, stop the balanced two-line break --------------- */
.soundcheck-hero h1 { text-wrap: wrap; }