:root {
    /* palette lifted from the live blueharboursolutions.com stylesheet */
    --navy:        #0C1B35;
    --navy-2:      #0F2143;
    --navy-deep:   #050D1C;
    --gold:        #F0B429;   /* primary accent */
    --gold-hover:  #D99E1E;
    /* Gold as TEXT on light grounds. Was #9A7D2E, which measured 3.93:1 on
       white and 3.55:1 on --gold-tint, both below the WCAG AA 4.5:1 floor for
       normal text. That mattered because every .eyebrow uses it at 12px
       uppercase, the smallest and hardest-to-read text on the site.
       #7E651F measures 5.57:1 on white and 5.03:1 on the tint. */
    --gold-ink:    #0C1B35; /* was #7E651F: gold is never text on a light ground (Trevor, 2026-09-30) */
    --gold-soft:   #FFE8A3;   /* tint only, never the primary accent */
    --gold-tint:   #FBF3DC;
    --grey-light:  #C9CCD3;
    --slate:       #2C2F36;
    --surface:     #F4F6F9;

    --ground:      #FFFFFF;
    --ground-alt:  var(--surface);
    --ink:         var(--slate);
    --ink-strong:  var(--navy);
    --ink-muted:   #55585F;
    --rule:        #E7EBF0;
    --divider:     #A6ADB8;   /* structural cell separators, 2.26:1, vs --rule at 1.20:1 */
    --card:        #FFFFFF;
    --callout:     var(--gold-tint);
    --callout-rule:#EADAA8;
    --accent-ink:  var(--gold-ink);  /* gold text that sits on a light ground */

    --display: "Source Serif 4", Georgia, "Iowan Old Style", Palatino, serif;
    --sans: Inter, system-ui, -apple-system, "Helvetica Neue", Helvetica, Arial, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    --wrap: 1140px;
    --measure: 62ch;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --ground:      #0A1426;
      --ground-alt:  #0E1B31;
      --ink:         #C6CDDA;
      --ink-strong:  #F1F4F9;
      --ink-muted:   #8A94A8;
      --rule:        #2A3B5C;
      --divider:     #4B6194;
      --card:        #101E37;
      --callout:     #16233F;
      --callout-rule:#3A4468;
      --accent-ink:  var(--gold);
    }
  }
  :root[data-theme="dark"] {
    --ground:      #0A1426;
    --ground-alt:  #0E1B31;
    --ink:         #C6CDDA;
    --ink-strong:  #F1F4F9;
    --ink-muted:   #8A94A8;
    --rule:        #1E2C46;
    --divider:     #4B6194;
    --card:        #101E37;
    --callout:     #16233F;
    --callout-rule:#3A4468;
    --accent-ink:  var(--gold);
  }
  :root[data-theme="light"] {
    --ground:      #FFFFFF;
    --ground-alt:  #F4F6F9;
    --ink:         #2C2F36;
    --ink-strong:  #0C1B35;
    --ink-muted:   #55585F;
    --rule:        #E7EBF0;
    --card:        #FFFFFF;
    --callout:     #FBF3DC;
    --callout-rule:#EADAA8;
    --accent-ink:  var(--gold-ink);
  }

  * { box-sizing: border-box; }

  html { scroll-padding-top: 108px; }

  body {
    margin: 0;
    background: var(--ground);
    color: var(--ink);
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1.62;
    -webkit-font-smoothing: antialiased;
  }

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

  /* Default link treatment. Without this an unstyled link falls back to
     browser blue (#0000EE), which was live on this page. `color: inherit`
     would hide the fault rather than fix it, so links get a real colour and
     keep their underline; components that are not prose links opt out below. */
  a { color: var(--accent-ink); }
  /* These opt out of the link colour and take their container's ink instead.
     `.nav a` is (0,1,1) and would outrank a bare `.brand` at (0,1,0), which is
     how the wordmark ended up body-ink on navy at 1.28:1, so the nav sets its
     own colour and .brand is scoped to beat it. */
  /* `.nav a` was in this list at (0,1,1) and outranked both `.brand` and
     `.btn-primary` at (0,1,0), which put body ink on the wordmark (1.28:1)
     and grey on the gold CTA (1.16:1). Keep the reset to elements that carry
     their own colour rule further down the file. */
  .btn, .post-link, .skip-link, .faq-item summary a,
  .footer a, .nav-links a, .brand { color: inherit; text-decoration: none; }
  .nav { color: var(--grey-light); }
  .nav .brand, .nav .brand:hover { color: #fff; }
  .nav .btn-primary, .nav .btn-primary:hover { color: var(--navy); }
  .nav .brand { flex: 0 0 auto; }
  .band-navy a:not(.btn):not(.brand), .hero a:not(.btn):not(.brand) { color: var(--gold); }

  h1, h2, h3 {
    font-family: var(--display);
    font-weight: 400;
    color: var(--ink-strong);
    text-wrap: balance;
    margin: 0;
  }

  .eyebrow {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin: 0;
  }

  /* ---------- review chrome (mockup only, not part of the site) ---------- */
  .review-bar {
    background: repeating-linear-gradient(135deg, #1A2440, #1A2440 12px, #16203A 12px, #16203A 24px);
    color: var(--grey-light);
    font-family: var(--sans);
    font-size: 12px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 10px 32px;
    display: flex;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
  }
  .review-bar strong { color: var(--gold); font-weight: 600; }

  /* ---------- nav ---------- */
  /* Sticky, to match styles.css. It was static here, so jumping to an anchor
     like /#founder scrolled the menu away and left the reader with no way out
     of a 1,400-word section. Measured height is 91px at 1440, so html gets
     scroll-padding-top above that to keep anchor targets clear of it. */
  .nav {
    background: var(--navy);
    border-bottom: 1px solid rgba(255,255,255,0.08);
    position: sticky;
    top: 0;
    z-index: 50;
  }
  .nav-inner {
    display: flex;
    align-items: center;
    gap: 40px;
    padding-block: 20px;
  }
  .brand {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-right: auto;
    color: #fff;
    text-decoration: none;
    font-family: var(--display);
    font-size: 19px;
    letter-spacing: 0.01em;
  }
  .brand:hover { color: #fff; }
  .mark {
    height: 34px; width: auto;
    flex: none;
    display: block;
  }
  .nav-links {
    display: flex;
    gap: 30px;
    list-style: none;
    margin: 0; padding: 0;
  }
  .nav-links a {
    color: var(--grey-light);
    text-decoration: none;
    font-size: 15px;
  }
  .nav-links a:hover, .nav-links a:focus-visible { color: var(--gold); }

  .btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    padding: 12px 22px;
    border-radius: 10px;
    border: 1px solid transparent;
    white-space: nowrap;
  }
  .btn-primary {
    background: var(--gold);
    color: var(--navy);
  }
  .btn-primary:hover { background: var(--gold-hover); }
  /* Ghost button, light ground by default. It used to be white-on-white
     wherever it sat on a card (the WildEcho "See what it does" link was a
     165x50 invisible control), because it was written for navy only. */
  .btn-ghost {
    color: var(--ink-strong);
    border-color: var(--divider);
  }
  .btn-ghost:hover { border-color: var(--navy); background: var(--ground-alt); }
  .band-navy .btn-ghost, .hero .btn-ghost {
    color: #fff;
    border-color: rgba(255,255,255,0.34);
    background: transparent;
  }
  .band-navy .btn-ghost:hover, .hero .btn-ghost:hover {
    border-color: var(--gold); color: var(--gold); background: transparent;
  }

  a:focus-visible, button:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 3px;
  }

  /* ---------- hero ---------- */
  .hero {
    background: var(--navy);
    color: var(--grey-light);
    position: relative;
    overflow: hidden;
  }
  /* lighthouse beam, the only decorative motif, per brand rules */
  .hero::after {
    content: "";
    position: absolute;
    top: -20%; right: -10%;
    width: 620px; height: 620px;
    background:
      conic-gradient(from 200deg at 70% 30%,
        rgba(255,232,163,0.10) 0deg,
        rgba(255,232,163,0.00) 34deg,
        rgba(255,232,163,0.00) 320deg,
        rgba(255,232,163,0.07) 360deg);
    pointer-events: none;
  }
  .hero-inner {
    padding-block: 104px 88px;
    position: relative;
    z-index: 1;
    max-width: 780px;
  }
  .hero .eyebrow { color: var(--gold); margin-bottom: 26px; }
  .hero h1 {
    color: #fff;
    letter-spacing: -0.015em;
    /* size, measure and leading live in the consolidated rule further down */
  }
  /* :not() so the panel's own type rules are not outranked. .hero p is
     (0,1,1) and .hero-panel-h was (0,1,0), which silently rendered the card
     title at 19px and wrapped it onto two lines. */
  .hero p:not(.hero-panel-h):not(.hero-panel-note) {
    font-size: 19px;
    line-height: 1.62;
    max-width: 60ch;
    margin: 28px 0 0;
  }
  .hero-cta {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 40px;
  }
  .hero-facts {
    display: flex;
    flex-wrap: wrap;
    gap: 0;
    margin-top: 48px;
    padding-top: 26px;
    border-top: 1px solid rgba(255,255,255,0.12);
  }
  .hero-facts div {
    padding-right: 30px;
    margin-right: 30px;
    border-right: 1px solid rgba(255,255,255,0.12);
  }
  .hero-facts div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
  .hero-facts dt {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(201,204,211,0.65);
    margin-bottom: 5px;
  }
  .hero-facts dd {
    margin: 0;
    font-family: var(--display);
    font-size: 22px;
    color: #fff;
    font-variant-numeric: tabular-nums;
  }

  /* ---------- generic section ---------- */
  .band { padding-block: 96px; }
  .band-alt { background: var(--ground-alt); }
  .band-navy {
    background: var(--navy);
    color: var(--grey-light);
  }
  .band-navy h1, .band-navy h2, .band-navy h3 { color: #fff; }
  .band-navy .eyebrow { color: var(--gold); }

  .section-head { max-width: var(--measure); margin-bottom: 52px; }
  .section-head .eyebrow { margin-bottom: 16px; }
  .section-head h1, .section-head h2 {
    font-size: clamp(30px, 3.4vw, 41px);
    line-height: 1.16;
    letter-spacing: -0.012em;
  }
  /* :not(.eyebrow) so the label keeps its own 12px. Without it eight
     eyebrows rendered 50% larger than the other seven. */
  .section-head p:not(.eyebrow) {
    margin: 20px 0 0;
    font-size: 18px;
  }

  /* ---------- problem ---------- */
  .problem-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 72px;
    align-items: start;
  }
  .questions {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    list-style: none;
    margin: 0; padding: 0;
  }
  .questions li {
    border: 1px solid var(--rule);
    border-radius: 999px;
    padding: 7px 15px;
    font-size: 14.5px;
    color: var(--ink-muted);
    background: var(--card);
  }
  .verdict {
    font-family: var(--display);
    font-size: 27px;
    line-height: 1.35;
    color: var(--ink-strong);
    border-left: 3px solid var(--gold);
    padding-left: 24px;
    margin: 0;
  }
  .verdict em { font-style: italic; }

  /* ---------- triggers ---------- */
  .triggers {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
  .trigger {
    border-top: 2px solid var(--rule);
    padding-top: 22px;
  }
  .trigger:hover { border-top-color: var(--gold); }
  .trigger h3 {
    font-size: 21px;
    line-height: 1.28;
    margin-bottom: 10px;
  }
  .trigger p {
    margin: 0;
    font-size: 15.5px;
    color: var(--ink-muted);
  }

  .anchor-block {
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
    margin-top: 72px;
    padding-top: 56px;
    border-top: 1px solid var(--rule);
  }
  .anchor-figure {
    background: var(--callout);
    border: 1px solid var(--callout-rule);
    border-radius: 14px;
    padding: 36px 34px;
  }
  .anchor-math {
    font-family: var(--display);
    font-size: 27px;
    line-height: 1.35;
    color: var(--ink-strong);
    margin: 0;
  }
  .anchor-math strong {
    font-weight: 400;
    font-size: 40px;
    color: var(--ink-strong);
    font-variant-numeric: tabular-nums;
  }

  /* ---------- guarantee ---------- */
  .guarantee {
    margin-top: 28px;
    padding: 26px 30px;
    border: 1px solid var(--callout-rule);
    border-left: 3px solid var(--gold);
    border-radius: 10px;
    background: var(--card);
  }
  .guarantee h3 {
    font-size: 20px;
    margin-bottom: 8px;
  }
  .guarantee p { margin: 0; color: var(--ink-muted); font-size: 16px; }

  .founding {
    margin-top: 20px;
    font-size: 15px;
    color: var(--ink-muted);
  }
  .founding strong { color: var(--ink-strong); font-weight: 600; }

  /* ---------- pillars ---------- */
  .pillars {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--divider);
    border: 1px solid var(--rule);
  }
  .pillar {
    background: var(--card);
    padding: 40px;
  }
  .pillar h3 {
    font-size: 25px;
    margin-bottom: 12px;
  }
  .pillar p { margin: 0; color: var(--ink-muted); }
  .pillar .tick {
    display: block;
    width: 22px;
    height: 2px;
    background: var(--gold);
    margin-bottom: 22px;
  }

  /* ---------- receive (numbered, the Brief genuinely has five parts) ---------- */
  .receive { display: grid; gap: 0; }
  .receive li {
    display: grid;
    grid-template-columns: 62px minmax(0, 1fr);
    gap: 28px;
    padding-block: 28px;
    border-top: 1px solid var(--rule);
    align-items: baseline;
  }
  .receive li:last-child { border-bottom: 1px solid var(--rule); }
  .receive .num {
    font-family: var(--display);
    font-size: 30px;
    color: var(--accent-ink);
    font-variant-numeric: tabular-nums;
  }
  .receive h3 { font-size: 22px; margin-bottom: 7px; }
  .receive p { margin: 0; color: var(--ink-muted); max-width: 64ch; }
  ol.receive { list-style: none; margin: 0; padding: 0; }

  /* ---------- process (a true sequence) ---------- */
  .steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    counter-reset: step;
  }
  .step {
    padding-top: 22px;
    border-top: 2px solid rgba(255,255,255,0.18);
  }
  .step:first-child { border-top-color: var(--gold); }
  .step .when {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold);
    display: block;
    margin-bottom: 12px;
  }
  .step h3 { font-size: 21px; margin-bottom: 9px; }
  .step p { margin: 0; font-size: 15.5px; color: rgba(201,204,211,0.82); }

  /* ---------- engagement callout ---------- */
  .engagement {
    background: var(--callout);
    border: 1px solid var(--callout-rule);
    border-radius: 14px;
    padding: 48px 52px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 48px;
    align-items: center;
  }
  .engagement h2 { font-size: 33px; margin-bottom: 14px; }
  .engagement p { margin: 0; max-width: 52ch; color: var(--ink); }
  .price {
    text-align: right;
    flex: none;
  }
  .price .figure {
    font-family: var(--display);
    font-size: 52px;
    line-height: 1;
    color: var(--ink-strong);
    font-variant-numeric: tabular-nums;
  }
  .price .unit {
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-top: 10px;
  }

  /* ---------- exclusions ---------- */
  .excl-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 72px;
    align-items: start;
  }
  .excl-list {
    list-style: none;
    margin: 0; padding: 0;
  }
  .excl-list li {
    padding: 18px 0 18px 26px;
    position: relative;
    font-size: 16px;
    color: rgba(201,204,211,0.82);
    break-inside: avoid;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .excl-list li strong {
    display: block;
    color: #fff;
    font-weight: 600;
    margin-bottom: 3px;
  }
  .excl-list li::before {
    content: "";
    position: absolute;
    left: 0; top: 27px;
    width: 12px; height: 1px;
    background: var(--gold);
  }
  .map-line {
    font-family: var(--display);
    font-size: 29px;
    color: #fff;
    margin: 34px 0 0;
    line-height: 1.35;
  }

  /* ---------- disclosure ---------- */
  .disclosure {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--divider);
    border: 1px solid var(--rule);
    border-radius: 2px;
  }
  .rule-card {
    background: var(--card);
    padding: 36px;
  }
  .rule-card .n {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink-muted);
    display: block;
    margin-bottom: 16px;
  }
  .rule-card h3 { font-size: 21px; margin-bottom: 11px; }
  /* A component that inverts its own ground has to restate its ink, or the
     ground-scoped .band-navy rule above paints it white on cream (1.11:1,
     invisible). These are the two declared-interest headings. */
  .band-navy .rule-card.owned h3,
  .rule-card.owned h3 { color: var(--ink-strong); }
  .band-navy .rule-card.owned p,
  .rule-card.owned p { color: var(--ink-muted); }
  .rule-card p { margin: 0; font-size: 15.5px; color: var(--ink-muted); }
  .rule-card.owned {
    background: var(--callout);
  }
  .badge {
    display: inline-block;
    font-family: var(--sans);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: var(--navy);
    color: var(--gold);
    padding: 5px 10px;
    border-radius: 4px;
    margin-bottom: 16px;
  }
  .signature {
    margin-top: 40px;
    padding-top: 28px;
    border-top: 1px solid var(--rule);
    font-family: var(--display);
    font-size: 20px;
    font-style: italic;
    color: var(--ink-strong);
    max-width: var(--measure);
  }
  .signature span {
    display: block;
    font-family: var(--sans);
    font-style: normal;
    font-size: 13px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-muted);
    margin-top: 14px;
  }

  /* ---------- ladder ---------- */
  .ladder {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
  }
  /* was an inline grid-template-columns on the element itself, which outranked
     every media query and kept two columns at 320px */
  .ladder-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (max-width: 620px) { .ladder-2 { grid-template-columns: minmax(0, 1fr); } }
  .rung {
    border: 1px solid var(--rule);
    border-radius: 10px;
    padding: 30px 26px;
    background: var(--card);
  }
  .rung.now {
    border-color: var(--navy);
    border-width: 2px;
  }
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .rung.now { border-color: var(--gold); }
  }
  :root[data-theme="dark"] .rung.now { border-color: var(--gold); }
  .rung .stage {
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-muted);
    display: block;
    margin-bottom: 12px;
  }
  .rung.now .stage { color: var(--ink-strong); font-weight: 700; }
  .rung h3 { font-size: 20px; margin-bottom: 8px; }
  .rung p { margin: 0; font-size: 15px; color: var(--ink-muted); }

  /* ---------- founder ---------- */
  .founder-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 72px;
    align-items: start;
  }
  .cred-group + .cred-group { margin-top: 34px; }

  /* Measured: the four credential groups stacked in a 437px column ran 1451px
     tall beside a 681px narrative column, so the grid height was set entirely
     by the credentials and 770px of the right column was empty. Narrative
     first, credentials two-up beside it. Nothing is deleted; the credentials
     are the only externally-conferred proof on a site with no clients yet. */
  .founder-grid-v2 { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 56px; }
  .founder-grid-v2 .cred-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 28px;
    align-content: start;
  }
  .founder-grid-v2 .cred-cols .cred-group + .cred-group { margin-top: 0; }
  @media (max-width: 900px) {
    .founder-grid-v2 { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  }
  @media (max-width: 560px) {
    .founder-grid-v2 .cred-cols { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  }
  .cred-group > .eyebrow { margin-bottom: 14px; }
  .cred {
    list-style: none;
    margin: 0; padding: 0;
    display: grid;
    gap: 0;
  }
  .cred li {
    padding: 15px 0 15px 18px;
    border-top: 1px solid var(--rule);
    border-left: 2px solid transparent;
  }
  .cred li:last-child { border-bottom: 1px solid var(--rule); }
  .cred .org {
    display: block;
    color: var(--ink-strong);
    font-weight: 600;
    font-size: 16.5px;
    line-height: 1.35;
  }
  .cred .role {
    display: block;
    color: var(--ink-muted);
    font-size: 15px;
    line-height: 1.45;
    margin-top: 3px;
  }
  .cred li.current { border-left-color: var(--gold); }
  .cred .note,
  .cred-group > .note {
    display: inline-block;
    margin-top: 6px;
    font-size: 13.5px;
    color: var(--accent-ink);
    text-decoration: none;
    border-bottom: 1px solid currentColor;
    padding-bottom: 1px;
  }
  .cred .note:hover,
  .cred-group > .note:hover { color: var(--ink-strong); }
  .founder-quote {
    font-family: var(--display);
    font-size: 24px;
    line-height: 1.45;
    color: var(--ink-strong);
  }

  /* ---------- wildecho, deliberately its OWN world, not a BHS card ---------- */
  .band-wild {
    background: #030A05;
    background-image:
      radial-gradient(ellipse at 15% 30%, rgba(10,40,15,.9) 0%, transparent 55%),
      radial-gradient(ellipse at 85% 5%, rgba(5,28,10,.75) 0%, transparent 50%);
    color: #E2F5E8;
    padding-block: 88px;
  }
  .band-wild .eyebrow { color: rgba(134,239,172,.7); }
  .wild-inner { text-align: center; }
  .frog {
    width: 84px; height: 84px;
    filter: drop-shadow(0 0 22px rgba(74,222,128,.4));
  }
  .band-wild .eyebrow { color: rgba(134,239,172,.55); margin-bottom: 30px; }
  .wild-name {
    font-family: var(--display);
    font-size: clamp(42px, 6vw, 62px);
    line-height: 1.05;
    margin: 16px 0 6px;
    background: linear-gradient(135deg, #86EFAC, #4ADE80, #A7F3D0);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #4ADE80;
  }
  .wild-hook {
    font-family: var(--display);
    font-style: italic;
    color: #A7F3D0;
    font-size: clamp(19px, 3vw, 26px);
    margin: 4px 0 14px;
  }
  .band-wild p.body {
    color: rgba(134,239,172,.72);
    max-width: 54ch;
    margin: 12px auto 0;
    font-size: 17px;
  }
  .wild-feats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    max-width: 900px;
    margin: 48px auto 0;
    text-align: left;
  }
  .we-pill {
    display: inline-block;
    font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
    color: #86EFAC;
    background: rgba(74,222,128,.08);
    border: 1px solid rgba(74,222,128,.24);
    border-radius: 50px;
    padding: 6px 16px;
  }
  .btn-wild {
    display: inline-flex; align-items: center; gap: 9px;
    background: linear-gradient(135deg, #166534, #15803D);
    border: 1px solid #4ADE80;
    color: #DCFCE7;
    font-weight: 500; font-size: 15px;
    padding: 13px 26px;
    border-radius: 50px;
    text-decoration: none;
    margin-top: 28px;
  }
  .btn-wild:hover { border-color: #86EFAC; color: #fff; }
  .btn-wild:focus-visible { outline: 2px solid #4ADE80; outline-offset: 3px; }
  .wild-feats { display: grid; gap: 12px; }
  .wild-feat {
    background: rgba(10,30,14,.6);
    border: 1px solid rgba(74,222,128,.14);
    border-radius: 16px;
    padding: 20px 22px;
  }
  .wild-feat h4 {
    margin: 0 0 5px;
    font-family: var(--sans);
    font-size: 16px; font-weight: 600;
    color: #F0FDF4;
  }
  .wild-feat p { margin: 0; font-size: 14.5px; color: rgba(134,239,172,.62); }

  /* ---------- final cta ---------- */
  .final { text-align: left; }
  .final h2 {
    font-size: clamp(32px, 3.8vw, 45px);
    line-height: 1.15;
    max-width: 24ch;
  }
  .final p { margin: 22px 0 0; max-width: 54ch; font-size: 18px; }

  /* Quieter than the buttons on purpose: it is the fallback, not the ask. */
  .final .cta-alt {
    margin: 22px 0 0;
    max-width: 54ch;
    font-size: 15px;
    color: rgba(201, 204, 211, 0.72);
  }
  .final .cta-alt a {
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.32);
  }
  .final .cta-alt a:hover { color: var(--gold); border-bottom-color: var(--gold); }

  /* ---------- footer ---------- */
  .footer {
    background: var(--navy-deep);
    color: rgba(201,204,211,0.7);
    padding-block: 64px 40px;
    font-size: 15px;
  }
  .footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) repeat(3, 1fr);
    gap: 48px;
  }
  .footer h4 {
    font-family: var(--sans);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.55);
    margin: 0 0 18px;
  }
  .footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
  .footer a { color: rgba(201,204,211,0.75); text-decoration: none; }
  .footer a:hover { color: var(--gold); }
  .footer .brand { color: #fff; margin-bottom: 18px; }
  .footer address { font-style: normal; line-height: 1.7; }
  .colophon {
    margin-top: 56px;
    padding-top: 26px;
    border-top: 1px solid rgba(255,255,255,0.1);
    display: flex;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    font-size: 13.5px;
    /* was .5, 3.69:1 on --navy-deep at 13.5px. .68 gives 5.98:1. */
    color: rgba(201,204,211,0.68);
  }

  @media (max-width: 900px) {
    .problem-grid, .excl-grid, .founder-grid, .anchor-block { grid-template-columns: minmax(0, 1fr); gap: 44px; }
    .pillars, .disclosure { grid-template-columns: minmax(0, 1fr); }
    .steps, .ladder, .triggers, .wild-feats { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .footer-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .engagement, .we-card { grid-template-columns: minmax(0, 1fr); gap: 32px; }
    .price { text-align: left; }
    .nav-links { display: none; }
    .band { padding-block: 68px; }
  }
  @media (max-width: 560px) {
    .steps, .ladder, .footer-grid, .triggers, .wild-feats { grid-template-columns: minmax(0, 1fr); }
    .hero-facts div { border-right: 0; margin-right: 0; padding-right: 0; width: 100%; margin-bottom: 16px; }
    .wrap { padding-inline: 22px; }
  }

  @media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
  }

  /* ============================================================
     Homepage rebuild, August 2026.
     New sections only. Everything above is unchanged apart from
     the --gold-ink contrast fix noted at the top of the file.
     ============================================================ */


  /* Two doors: decision vs direction -------------------------- */
  .doors { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px; }
  .door {
    background: var(--card); border: 1px solid var(--rule);
    border-radius: 16px; padding: 28px 30px;
  }
  .door .tag {
    display: inline-block; font-size: 12px; font-weight: 700;
    letter-spacing: .14em; text-transform: uppercase;
    color: var(--accent-ink); margin-bottom: 12px;
  }
  .door h3 {
    font-family: var(--display); font-size: 23px; line-height: 1.18;
    color: var(--ink-strong); margin: 0 0 16px;
  }
  .door-list { list-style: none; margin: 0; padding: 0; }
  .door-list li {
    position: relative; padding-left: 22px; margin: 0 0 14px;
    font-size: 15.5px; color: var(--ink-muted); line-height: 1.55;
  }
  .door-list li:last-child { margin-bottom: 0; }
  .door-list li::before {
    content: ""; position: absolute; left: 0; top: 9px;
    width: 9px; height: 9px; border-radius: 2px; background: var(--gold);
  }
  .door-list b { color: var(--ink-strong); font-weight: 600; }

  /* Repeated inline call to action ---------------------------- */
  .cta-inline {
    display: flex; align-items: center; gap: 14px 20px; flex-wrap: wrap;
    margin-top: 34px; padding: 22px 26px;
    background: var(--callout); border: 1px solid var(--callout-rule);
    border-radius: 14px;
  }
  .cta-inline p {
    margin: 0; font-family: var(--display); font-size: 19px;
    color: var(--ink-strong);
  }
  .cta-note { font-size: 14.5px; color: var(--ink-muted); flex: 1 1 240px; }
  .cta-note a { color: var(--ink-strong); font-weight: 600; }

  /* The Brief, shown rather than described -------------------- */
  .brief-grid {
    display: grid; grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr);
    gap: 40px; align-items: start;
  }
  .brief-doc {
    margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px;
    position: sticky; top: 96px;
  }
  .brief-cover, .brief-contents {
    aspect-ratio: 17 / 22; border-radius: 6px; padding: 20px 18px;
    display: flex; flex-direction: column;
    box-shadow: 0 12px 30px rgba(12,27,53,.14), 0 2px 6px rgba(12,27,53,.10);
  }
  .brief-cover {
    background: linear-gradient(160deg, var(--navy-2), var(--navy-deep));
    color: #E8EDF6; justify-content: space-between;
  }
  .brief-mark {
    font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--gold);
  }
  .brief-title {
    font-family: var(--display); font-size: 21px; line-height: 1.18; color: #fff;
  }
  .brief-meta { font-size: 9.5px; line-height: 1.7; color: rgba(201,204,211,.72); }
  .brief-contents {
    background: var(--card); border: 1px solid var(--rule); color: var(--ink);
  }
  .brief-ct {
    font-size: 9px; letter-spacing: .14em; text-transform: uppercase;
    color: var(--accent-ink); margin-bottom: 12px;
  }
  .brief-contents ol {
    margin: 0; padding-left: 16px; flex: 1 1 auto;
    font-size: 10.5px; line-height: 1.5; color: var(--ink-muted);
  }
  .brief-contents li { margin-bottom: 9px; }
  .brief-foot {
    font-size: 8.5px; line-height: 1.5; color: var(--ink-muted);
    border-top: 1px solid var(--rule); padding-top: 8px;
  }

  /* Founder outcomes, filled from the interview --------------- */
  .outcomes {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr));
    gap: 14px; margin: 22px 0 8px;
  }
  .outcome {
    background: var(--card); border: 1px solid var(--rule);
    border-radius: 12px; padding: 18px 20px;
    display: flex; flex-direction: column; gap: 6px;
  }
  .o-n {
    font-family: var(--display); font-size: 30px; line-height: 1.05;
    color: var(--ink-strong); font-variant-numeric: tabular-nums;
  }
  .o-l { font-size: 15px; color: var(--ink); line-height: 1.45; }
  .o-w { font-size: 13px; color: var(--ink-muted); }

  .progcards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr));
    gap: 14px; margin: 20px 0 8px;
  }
  .progcard {
    background: var(--card); border: 1px solid var(--rule);
    border-radius: 12px; padding: 20px 22px;
  }
  .progcard h4 {
    font-family: var(--display); font-size: 18px; color: var(--ink-strong);
    margin: 0 0 10px;
  }
  .progcard p { margin: 0; font-size: 14.8px; color: var(--ink-muted); line-height: 1.7; }
  .progcard b { color: var(--ink-strong); font-weight: 600; }

  /* Tightened disclosure inside the independence section ------ */
  .disclosure-tight { display: grid; gap: 14px; margin-top: 26px; }

  /* Also from Blue Harbour: WildEcho, restrained --------------- */
  .alsofrom {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 34px; align-items: center;
    background: var(--card); border: 1px solid var(--rule);
    border-radius: 18px; padding: 34px 38px;
  }
  .alsofrom-body h2 { margin-top: 0; }
  .alsofrom-body .btn { margin-right: 10px; }
  .alsofrom-mark svg { width: 118px; height: 118px; display: block; }


  @media (max-width: 860px) {
    .doors { grid-template-columns: minmax(0, 1fr); }
    .brief-grid { grid-template-columns: minmax(0, 1fr); gap: 30px; }
    .brief-doc { position: static; max-width: min(420px, 100%); }
    .alsofrom { grid-template-columns: minmax(0, 1fr); text-align: left; }
    .alsofrom-mark { order: -1; }
    .alsofrom-mark svg { width: 84px; height: 84px; }
  }
  @media (max-width: 560px) {
    .cta-inline { padding: 20px; }
    .alsofrom { padding: 26px 22px; }
    .alsofrom-body .btn { display: block; margin: 0 0 10px; text-align: center; }
  }

  /* Stacked hero eyebrow. The single run-on line wrapped mid-phrase at most
     widths and buried the category behind the product name. Two lines: the
     product in gold caps, then what it actually is, in sentence case because
     a long letterspaced uppercase string is measurably harder to read. */
  .hero .eyebrow-stack {
    display: flex; flex-direction: column; gap: 9px;
    margin-bottom: 30px; text-transform: none; letter-spacing: 0;
  }
  .hero .e-brand {
    font-size: 12px; font-weight: 700;
    letter-spacing: .16em; text-transform: uppercase;
    color: var(--gold);
  }
  .hero .e-desc {
    font-size: 17px; font-weight: 400; letter-spacing: 0;
    color: rgba(201,204,211,.92);
    font-family: var(--display);
  }
  /* The line that carries the empathy, set above the mechanics so the hook
     lands before the detail. */
  .hero .hero-lede {
    font-size: 21px;
    color: #fff;
    max-width: 52ch;
    margin-top: 30px;
  }
  .hero .hero-lede + p { margin-top: 16px; font-size: 18px; }

  @media (max-width: 560px) {
    .hero .e-desc { font-size: 15.5px; }
    .hero .hero-lede { font-size: 19px; }
    .hero .hero-lede + p { font-size: 17px; }
  }


  /* The H1 is now the descriptive statement rather than a slogan, so it is
     longer (62 characters) and needs a smaller size and a wider measure than
     a two-word hook. Targets two lines at desktop, three on narrow. */
  .hero .eyebrow { margin-bottom: 24px; }

  /* Outcome-led pillars. The recognisable loss leads; the formal diagnostic
     question follows it in smaller type, so the card reads as "here is what
     you already feel" before "here is what we ask". */
  .pillar-q {
    margin-top: 12px; padding-top: 12px;
    border-top: 1px solid var(--rule);
    font-size: 14px; line-height: 1.5; color: var(--ink-muted); font-style: italic;
  }
  .pillars-foot {
    margin: 30px 0 0; max-width: 68ch; 
    font-size: 16.5px; color: var(--ink-muted);
  }

  /* H1 is now a full sentence at 92 characters, so it needs a wider measure
     and a smaller cap than either the slogan or the category descriptor. */

  /* Phone-first hero. Measured on a 393px viewport (iPhone 15/16), the
     previous hero put the primary CTA 149px BELOW the fold: a 6-line H1, a
     4-line lede and an 11-line paragraph before any button. Nothing
     actionable was on the first screen, which is indefensible when two
     thirds of B2B buyers prefer a route that is not "book a call". */
  .hero .eyebrow { color: var(--gold); margin-bottom: 22px; }
  .hero .hero-lede { font-size: 19px; color: rgba(255,255,255,.94); max-width: 50ch; margin-top: 26px; }
  /* White with a small gold mark, not gold text: the gold button is the one
     thing in the hero asking for action (Trevor approved, 2026-09-30). */
  .hero-stamp {
    margin: 18px 0 0; font-size: 15px; font-weight: 600;
    color: rgba(255,255,255,.92); letter-spacing: .01em;
  }
  .hero-cta { margin-top: 30px; }
  .hero-facts { margin-top: 38px; }

  @media (max-width: 620px) {
    .hero-inner { padding-block: 56px 52px; }
    .hero .hero-lede { font-size: 17.5px; margin-top: 20px; }
    .hero-stamp { font-size: 14.5px; margin-top: 14px; }
    .hero-cta { margin-top: 24px; gap: 10px; }
    .hero-cta .btn { width: 100%; justify-content: center; }
    .hero-facts { margin-top: 30px; padding-top: 22px; gap: 18px 0; }
    .hero-facts div { padding-right: 20px; margin-right: 20px; }
  }

  /* Who it is for, and who it is not. The cold read could not tell whether
     the page was aimed at a two-person law office or a 400-person
     manufacturer, and "growing businesses" answered nothing. Qualifying on
     size and structure rather than sector keeps it industry-neutral while
     still being concrete enough to self-select against. */
  .fit-line {
    margin: 22px 0 0; max-width: 72ch;
    padding: 16px 20px;
    background: var(--callout); border: 1px solid var(--callout-rule);
    border-radius: 12px;
    font-size: 16px; color: var(--ink);
  }
  .fit-line b { color: var(--ink-strong); font-weight: 650; }
  .not-for {
    margin: 26px 0 0; max-width: 74ch;
    font-size: 15.5px; color: var(--ink-muted);
    padding-left: 16px; border-left: 3px solid var(--rule);
  }
  .not-for b { color: var(--ink-strong); font-weight: 650; }

  /* Mobile hero, retuned after the eyebrow went to two lines and the stamp
     grew. At 38px the H1 pushed the primary CTA to within 11px of the fold,
     which is inside the margin of error on any real handset. */
  @media (max-width: 620px) {
    .hero-inner { padding-block: 42px 46px; }
    .hero .e-desc { font-size: 15px; }
    .hero-stamp { font-size: 14px; line-height: 1.5; }
  }

  /* ============================================================
     HERO TYPE SCALE, consolidated. Six passes of iteration had left six
     competing '.hero h1' rules at equal specificity, where only the last
     one applied and the rest read as if they did. One rule now.

     The eyebrow sizing was a real fault, not a matter of taste. Line two,
     "For owner-led businesses", is the QUALIFIER: it
     answers "is this me", which is the question the cold read could not
     answer and the whole five-second test turns on. It was set at 17px,
     BELOW the 19px lede, which styled the most load-bearing line in the
     hero as the least important. Same inverted-hierarchy error as the
     original headline, milder.

     At 22px it outranks the lede, which is the correct order (who it is
     for beats how it works), and 60/22 = 2.7:1 is a normal display-to-deck
     ratio; editorial standfirsts sit around 2.5:1 to 3:1.
     ============================================================ */
  .hero h1 {
    max-width: 21ch;
    font-size: clamp(36px, 5.1vw, 60px);
    line-height: 1.06;
  }
  .hero .e-brand { font-size: 13px; letter-spacing: .15em; }
  .hero .e-desc {
    font-size: 22px; line-height: 1.32;
    color: rgba(232,237,246,.95);
    /* 32ch on a 44-character line was breaking it early and orphaning
       "people" onto its own line, with ~1076px of container going unused.
       46ch holds it on one line at desktop; balance stops the orphan on
       narrow screens, splitting it "For owner-led businesses of / 10 to
       100 people" instead. */
    max-width: 46ch;
    text-wrap: balance;
  }
  .hero .eyebrow-stack { gap: 11px; margin-bottom: 28px; }
  .hero .hero-lede { font-size: 19px; }

  /* Two claims, two lines. Stacked so each lands on its own rather than
     running together as one long sentence. */
  .hero-stamp { font-size: 16px; line-height: 1.5; }
  .hero-stamp span { display: flex; align-items: baseline; gap: 10px; }
  .hero-stamp span::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 2px; background: var(--gold); transform: translateY(-2px); }
  .hero-stamp span + span { margin-top: 5px; }

  @media (max-width: 620px) {
    /* The promoted qualifier and the stacked stamp both cost vertical room,
       and the primary CTA has to stay above the fold. Padding and gaps give
       it back rather than shrinking the type that is doing the work. */
    .hero-inner { padding-block: 34px 44px; }
    .hero h1 { font-size: 35px; line-height: 1.08; max-width: none; }
    .hero .eyebrow-stack { gap: 8px; margin-bottom: 20px; }
    .hero .e-brand { font-size: 12px; }
    .hero .e-desc { font-size: 17px; line-height: 1.28; max-width: 30ch; }
    .hero .hero-lede { font-size: 17.5px; margin-top: 18px; }
    .hero-stamp { font-size: 15px; margin-top: 12px; }
  }

  /* ============================================================
     Two-column hero.

     .hero-inner was capped at 780px inside a 1140px .wrap, which left a
     296px void to the right of every line of hero copy at EVERY viewport.
     That is not the outer gutter (which is just the container doing its
     job); it is dead space inside the container, and on a wide monitor it
     reads as an unfinished page.

     The right column now carries the engagement terms. That fills the void
     with the thing a self-directed buyer is hunting for, and Gartner has
     that buyer at 67% of the market. Better still would be a photograph of
     Trevor, since the page sells one person's judgement and currently shows
     no picture of him anywhere; that needs an asset.
     ============================================================ */
  .hero-inner {
    /* NOT max-width:none. This rule is later in the file than .wrap and has
       the same specificity, so 'none' removed the 1140px container entirely
       and the hero spanned the full viewport with nothing for
       margin-inline:auto to centre. It has to restate the container width,
       not remove it. The 780px cap from the earlier .hero-inner rule is what
       needed overriding, so the grid can use the full container. */
    max-width: var(--wrap);
    display: grid;
    grid-template-columns: minmax(0, 1fr) 336px;
    gap: 60px;
    align-items: start;
  }
  .hero-main { max-width: 720px; }

  /* The surface measured 1.12:1 against the hero and the border 1.74:1, so the
     card read as loose text rather than an object. .10 fill and .26 border put
     the boundary at 3.00:1, the WCAG 1.4.11 floor for a UI component. The 6px
     margin-top aligned the card to nothing; it now shares the top edge of the
     column. */
  .hero-panel {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.26);
    border-radius: 16px;
    padding: 26px 28px;
    margin-top: 0;
  }
  .hero-panel-link {
    display: inline-block; margin-top: 18px;
    font-size: 14px; font-weight: 600; color: var(--gold);
    text-decoration: none; border-bottom: 1px solid rgba(240,180,41,.45);
    padding-bottom: 2px;
  }
  .hero-panel-link:hover { border-bottom-color: var(--gold); }
  .hero .hero-panel-h {
    margin: 0 0 18px;
    font-size: 12px; font-weight: 600;
    letter-spacing: .15em; text-transform: uppercase;
    color: rgba(201,204,211,.78);
  }
  .hero-panel .hero-facts {
    display: block;
    margin: 0; padding: 0; border-top: 0;
  }
  .hero-panel .hero-facts div {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: 16px;
    padding: 12px 0; margin: 0;
    border: 0; border-bottom: 1px solid rgba(255,255,255,.1);
  }
  .hero-panel .hero-facts div:last-child { border-bottom: 0; padding-bottom: 0; }
  .hero-panel .hero-facts div:first-child { padding-top: 0; }
  .hero-panel .hero-facts dt {
    margin: 0; font-size: 13px; letter-spacing: .04em; text-transform: none;
    color: rgba(201,204,211,.72);
    white-space: nowrap; flex: 0 0 auto;
  }
  /* nowrap here set the min-content floor for the whole hero grid, which
     is what pushed the document to 442px on every phone. Keep it only where
     there is room for it. */
  .hero-panel .hero-facts dd { font-size: 20px; text-align: right; }
  @media (max-width: 460px) {
    .hero-panel .hero-facts div { flex-wrap: wrap; gap: 2px 16px; }
    .hero-panel .hero-facts dd { white-space: normal; }
  }
  .hero .hero-panel-note {
    margin: 18px 0 0; padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,.1);
    font-size: 13.5px; line-height: 1.55; color: rgba(201,204,211,.68);
  }

  @media (max-width: 1000px) {
    .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .hero-main { max-width: none; }
    .hero-panel { max-width: min(420px, 100%); margin-top: 0; }
  }

  /* ============================================================
     Credibility section, written from the founder interview.
     Replaces the scaffolding. Every number here is either on the
     resume or was confirmed in the interview and checked against
     public sources where one existed.
     ============================================================ */
  .cred-line {
    font-family: var(--display);
    font-size: 22px; line-height: 1.42;
    color: var(--ink-strong);
    max-width: 62ch;
    margin: 0 0 34px;
  }
  .cred-h {
    font-family: var(--display);
    font-size: 25px; color: var(--ink-strong);
    margin: 46px 0 18px;
  }
  .cred-body { max-width: 68ch; color: var(--ink-muted); }
  .cred-body a { color: var(--accent-ink); }

  .outcome .o-n { font-size: 34px; letter-spacing: -.015em; }

  .progcard h4 { font-size: 19px; line-height: 1.25; margin-bottom: 12px; }
  .progcard p { margin-bottom: 12px; }
  .progcard p:last-child { margin-bottom: 0; }

  .gotwrong {
    background: var(--callout);
    border: 1px solid var(--callout-rule);
    border-radius: 16px;
    padding: 26px 30px;
    max-width: 78ch;
  }
  .gotwrong p { color: var(--ink); font-size: 16px; margin-bottom: 14px; }
  .gotwrong p:last-child { margin-bottom: 0; }
  .gotwrong b { color: var(--ink-strong); font-weight: 650; }

  .cred .yr {
    font-style: normal; font-weight: 400; font-size: 13px;
    color: var(--ink-muted); margin-left: 8px;
    font-variant-numeric: tabular-nums;
  }
  .cred.awards li { border-left-color: var(--gold); }
  .cred-foot {
    margin: 14px 0 0; font-size: 14.5px; color: var(--ink-muted); font-style: italic;
  }

  @media (max-width: 620px) {
    .cred-line { font-size: 19px; }
    .cred-h { font-size: 21px; margin-top: 36px; }
    .gotwrong { padding: 22px 20px; }
    .outcome .o-n { font-size: 30px; }
  }

  /* Founder photo. Placed here rather than in the hero because this is where
     he is introduced, and the hero panel is doing real work carrying the
     engagement terms for the self-directed buyer. */
  .founder-intro {
    display: grid; grid-template-columns: 260px minmax(0,1fr);
    gap: 34px; align-items: start; margin-bottom: 34px;
  }
  .founder-photo { margin: 0; }
  .founder-photo img {
    width: 100%; height: auto; display: block;
    border-radius: 14px;
    border: 1px solid var(--rule);
  }
  .founder-intro .cred-line { margin-bottom: 0; }

  @media (max-width: 720px) {
    .founder-intro { grid-template-columns: minmax(0, 1fr); gap: 22px; }
    .founder-photo { max-width: 200px; }
  }

  /* Years on the outcome tiles. Without them the order reads as arbitrary,
     which is exactly how it read on a phone. */
  .outcome .o-w em {
    font-style: normal; display: block; margin-top: 3px;
    font-size: 12.5px; color: var(--ink-muted); 
    font-variant-numeric: tabular-nums; letter-spacing: .02em;
  }

  /* ============================================================
     Proof strip, directly under the hero.
     Four numbers, four employers, four date ranges. Deliberately not
     logos: these are places he worked, and a logo wall in this slot is
     read as a client list. Compact enough not to push the buyer
     qualification section down the page.
     ============================================================ */
  .proofbar {
    background: var(--ground-alt);
    border-bottom: 1px solid var(--rule);
    padding: 30px 0 28px;
  }
  .proofbar-h {
    margin: 0 0 20px;
    font-size: 12px; font-weight: 600; letter-spacing: .15em;
    text-transform: uppercase; color: var(--accent-ink);
  }
  .proofbar-grid {
    display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 26px;
  }
  .proofbar-foot {
    margin: 22px 0 0; padding-top: 18px;
    border-top: 1px solid var(--rule);
    font-size: 15px; color: var(--ink-muted);
  }
  .proofbar-foot b { color: var(--ink-strong); font-weight: 650; }
  .proofbar-foot a { color: var(--accent-ink); font-weight: 600; white-space: nowrap; }

  @media (max-width: 860px) {
    .proofbar-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px 20px; }
  }
  @media (max-width: 460px) {
    .proofbar { padding: 24px 0 22px; }
    .proofbar-grid { gap: 18px 16px; }
    .pf-n { font-size: 25px; }
    .pf-l { font-size: 14px; }
    .proofbar-foot { font-size: 14px; }
  }


  /* The lighthouse beam is a 620px square with a hard boundary. On a 393px
     phone that square is 1.6x the viewport width, so its outer edge lands
     inside the visible area and draws a horizontal seam across the hero.
     Caught on a real handset, not in any of my calculations.
     A radial mask fades the square out before its own edge is reached. */
  .hero::after {
    -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
            mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  }
  @media (max-width: 620px) {
    /* On a narrow screen it earns nothing and risks the seam, so retire it. */
    .hero::after { display: none; }
  }

  /* ============================================================
     Proof cells, rebuilt. Three faults, one structural cause.

     1. The dividers were offset. Each cell was an independent flex column,
        so the rule sat wherever that cell's text happened to end. A company
        name or a job title wrapping to two lines in one cell and not its
        neighbour threw the rule and the number below it out of line.
        Fixed by giving the name and the role fixed line counts, so every
        cell's header block is exactly the same height.

     2. "The top number and the company below it look like they belong
        together." They did: the gap between a number and the NEXT cell's
        company was smaller than the gap inside a cell. Proximity was
        grouping the wrong things. Each cell is now a bordered card, so
        the grouping is unambiguous regardless of spacing.

     3. Company in gold, number in navy, per Trevor. The two were both
        navy, so nothing separated the wordmark from the payload.
     ============================================================ */
  .proofbar-grid { gap: 16px; }

  .pf {
    display: flex; flex-direction: column;
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 14px;
    padding: 22px 24px 24px;
  }
  .pf-w {
    font-family: var(--display);
    font-size: 19px; line-height: 1.22;
    color: var(--accent-ink);
    letter-spacing: -.005em;
    /* two lines, always, so every divider lands at the same height */
    min-height: calc(19px * 1.22 * 2);
  }
  /* was opacity:.8, which composited --accent-ink to 3.66:1 on white. Full
     strength is 5.57:1 and reads the same at 15.5px. */
  .pf-w i { font-style: normal; font-size: 15.5px; }
  .pf-y {
    font-size: 12.5px; line-height: 1.45; color: var(--ink-muted);
    margin-top: 8px; padding-bottom: 14px;
    border-bottom: 1px solid var(--rule);
    font-variant-numeric: tabular-nums;
    /* title on line one, dates on line two, so this block is fixed too */
    min-height: calc(12.5px * 1.45 * 2);
  }
  .pf-n {
    font-family: var(--display);
    font-size: 33px; line-height: 1.05;
    color: var(--ink-strong);
    letter-spacing: -.018em;
    font-variant-numeric: tabular-nums;
    margin-top: 16px;
  }
  .pf-l {
    font-size: 14.5px; line-height: 1.42; color: var(--ink-muted);
    margin-top: 6px;
  }

  @media (max-width: 860px) {
    /* two up: names and titles get narrower, so allow a third line */
    .pf-w { min-height: calc(19px * 1.22 * 2); }
    .pf-y { min-height: calc(12.5px * 1.45 * 3); }
  }
  @media (max-width: 460px) {
    .proofbar-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
    .pf { padding: 18px 20px 20px; }
    /* single column: everything fits on one line, so drop the reserved space */
    .pf-w { font-size: 18px; min-height: 0; }
    .pf-y { min-height: 0; }
    .pf-n { font-size: 30px; margin-top: 13px; }
  }

  /* FAQ. Question headings with self-contained answers are the most
     extractable shape there is for AI systems, and the page had none.
     <details> so the page does not grow by 400 words visually, with the
     answers still in the DOM for crawlers, which is the point. */
  .faq { display: grid; gap: 10px; }
  .faq-item {
    background: var(--card);
    border: 1px solid var(--rule);
    border-radius: 12px;
    padding: 4px 22px;
  }
  .faq-item summary {
    list-style: none; cursor: pointer;
    padding: 16px 30px 16px 0; position: relative;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary h3 {
    display: inline; font-family: var(--display);
    font-size: 18.5px; line-height: 1.35; color: var(--ink-strong);
    font-weight: 400; margin: 0;
  }
  .faq-item summary::after {
    content: "+"; position: absolute; right: 0; top: 13px;
    font-size: 22px; line-height: 1; color: var(--accent-ink);
    transition: transform .18s ease;
  }
  .faq-item[open] summary::after { content: "\2212"; }
  .faq-item summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
  .faq-item > p {
    margin: 0 0 18px; padding-top: 2px;
    color: var(--ink-muted); font-size: 15.8px; max-width: 74ch;
  }
  .faq-item[open] summary { border-bottom: 1px solid var(--rule); }

  @media (prefers-reduced-motion: reduce) {
    .faq-item summary::after { transition: none; }
  }
  @media (max-width: 560px) {
    .faq-item { padding: 2px 18px; }
    .faq-item summary h3 { font-size: 17px; }
  }

  /* Blog index */
  /* Was max-width:800px inside the 1140px container, which left a 340px empty
     strip down the right of every wide screen. Two up fills the frame and both
     edges line up with the nav and the footer. */
  .posts { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (max-width: 900px) { .posts { grid-template-columns: minmax(0, 1fr); } }
  .post-link {
    display: block; text-decoration: none;
    background: var(--card); border: 1px solid var(--rule);
    border-radius: 16px; padding: 28px 30px;
    transition: border-color .15s ease;
  }
  .post-link:hover { border-color: var(--gold); }
  .post-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
  .post-meta {
    font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase;
    color: var(--ink-muted); margin: 0 0 10px;
  }
  .post-link h2 {
    font-size: 24px; line-height: 1.2; color: var(--ink-strong);
    margin: 0 0 10px; letter-spacing: -.008em;
  }
  .post-deck { color: var(--ink-muted); margin: 0 0 14px; font-size: 16.5px; max-width: 46ch; }
  .post-more { font-size: 15px; font-weight: 600; color: var(--accent-ink); }
  @media (max-width: 560px) {
    .post-link { padding: 22px 20px; }
    .post-link h2 { font-size: 22px; }
  }

/* Skip link. Off-screen until focused, then pinned top-left over the sticky nav. */
.skip-link{position:absolute;left:-9999px;top:0;z-index:2000}
.skip-link:focus{left:12px;top:12px;background:var(--gold);color:#0C1B35;
  font-weight:600;padding:10px 16px;border-radius:8px;text-decoration:none;
  outline:2px solid #0C1B35;outline-offset:2px}

  /* ---------- mobile navigation ----------
     .nav-links used to be display:none below 900px with nothing in its place,
     so a phone visitor had exactly one link on the entire site: the gold CTA.
     Pricing, Blog, About and WildEcho were unreachable from any phone.
     This is a disclosure panel, not a hidden menu: the button owns the state,
     the panel is a real list, and it needs 12 lines of JS rather than a
     checkbox hack so aria-expanded stays truthful. */
  .nav-toggle { display: none; }

  @media (max-width: 1023px) {
    .nav-inner { gap: 12px; position: relative; flex-wrap: nowrap; }
    .nav-toggle {
      display: inline-flex; align-items: center; justify-content: center;
      width: 46px; height: 46px; flex: none; order: 3;
      background: transparent; border: 1px solid rgba(255,255,255,.22);
      border-radius: 10px; cursor: pointer;
    }
    .nav-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
    .nav-bars, .nav-bars::before, .nav-bars::after {
      display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px;
      transition: transform .18s ease, opacity .18s ease;
    }
    .nav-bars::before, .nav-bars::after { content: ""; position: absolute; }
    .nav-bars::before { transform: translateY(-6px); }
    .nav-bars::after  { transform: translateY(6px); }
    .nav-toggle[aria-expanded="true"] .nav-bars { background: transparent; }
    .nav-toggle[aria-expanded="true"] .nav-bars::before { transform: rotate(45deg); }
    .nav-toggle[aria-expanded="true"] .nav-bars::after  { transform: rotate(-45deg); }

    .nav-links {
      display: none;
      position: absolute; top: calc(100% + 14px); left: 0; right: 0;
      flex-direction: column; gap: 0;
      background: var(--navy-2); border: 1px solid rgba(255,255,255,.14);
      border-radius: 14px; padding: 6px; z-index: 60;
      box-shadow: 0 18px 44px rgba(0,0,0,.42);
    }
    .nav-links.open { display: flex; }
    .nav-links li { border-bottom: 1px solid rgba(255,255,255,.08); }
    .nav-links li:last-child { border-bottom: none; }
    /* 48px tall, above the 44px floor, because this is the only navigation a
       phone user gets */
    .nav-links a { display: block; padding: 14px 16px; font-size: 16px; min-height: 20px; }
    .nav-inner .btn-primary { order: 2; padding-inline: 16px; }
  }

  @media (max-width: 460px) {
    .nav-inner { gap: 10px; padding-block: 14px; }
    .brand span, .brand { font-size: 0; gap: 0; }
    .brand .mark { height: 30px; }
    .nav-inner .btn-primary { font-size: 14px; padding-inline: 13px; }
  }
  @media (max-width: 360px) {
    .wrap { padding-inline: 16px; }
  }

  @media (prefers-reduced-motion: reduce) {
    .nav-bars, .nav-bars::before, .nav-bars::after { transition: none; }
  }


  /* ---------- narrow-viewport containment ----------
     Measured with real viewport emulation: the page overflowed sideways on
     every phone (122px at 320, 82px at 360, 52px at 390) and was only clean
     at 442px and up. Two causes, both structural rather than cosmetic:
     bare `1fr` grid tracks, whose floor is min-content, and `white-space:
     nowrap` on buttons whose labels are full sentences. */
  @media (max-width: 620px) {
    .ladder { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 480px) {
    /* A button label like "Or tell me what you're facing, no call needed" is
       longer than the viewport. Let it wrap and take the full width. */
    .btn { white-space: normal; text-align: center; }
    .hero-cta .btn, .cta-inline .btn, .final .btn, .alsofrom-body .btn {
      display: block; width: 100%;
    }
  }
  /* Nothing may exceed its container, whatever the content. */
  img, svg, video, table, pre { max-width: 100%; }

  /* ---------- interaction states ----------
     Measured: zero :active rules existed anywhere on the site, so a tap gave
     no acknowledgement at all until the next page began loading, and five of
     the six button variants had a 0s transition. */
  .btn { transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .06s ease; }
  .btn:active { transform: translateY(1px); }
  .nav-links a:active, .footer a:active, .post-link:active { opacity: .75; }
  .faq-item summary:hover { background: var(--ground-alt); }
  .faq-item summary { border-radius: 10px; }
  /* a returning reader could not tell which articles they had read */
  .post-link:visited h2 { color: var(--ink-muted); }

  /* 12 in-page anchors live on the home.css pages, and they jumped instantly
     while the pages with one anchor scrolled smoothly. */
  @media (prefers-reduced-motion: no-preference) {
    html { scroll-behavior: smooth; }
  }

  /* Long unbreakable tokens (email addresses, URLs) set their container's
     min-content width and push the page sideways on small phones. */
  address, .footer a, .cred .role, .doc p { overflow-wrap: anywhere; }

  /* Footer and related links were 17 to 26px tall, which is half of every
     page's sub-44px tap targets. */
  .footer a { display: inline-block; padding-block: 11px; }
  .footer ul { gap: 0; }
  .hero-cta .btn, .cta-inline .btn, .final .btn { padding-block: 14px; }

  /* Three homepage blocks skipped the measure cap the rest of the page uses
     and ran 141 to 152 characters per line at 1440. */
  .founding, .guarantee p, .proofbar-foot { max-width: 62ch; }

  /* The hero collapsed at 1000px but the two CTAs only fit on one row from
     1080, so 1001 to 1079 was the one desktop width where they stacked. */
  @media (max-width: 1080px) {
    .hero-inner { grid-template-columns: minmax(0, 1fr); gap: 34px; }
    .hero-main { max-width: none; }
  }

/* A seventh nav item (LedgrAI) took the row past its width and "What you get"
   wrapped onto two lines mid-bar. The links never want to wrap, so say so,
   and buy the room back from the gap rather than from a link's label. */
.nav-links a { white-space: nowrap; }
@media (max-width: 1320px) { .nav-links { gap: 22px; } }

/* ---- Hero diagnostic card (2026-09-30): question 1 of the diagnostic, live in the hero.
   Each answer is a plain link into /scorecard with the answer already given, so it works
   without JavaScript. Gold is only the dot of a chosen row and the eyebrow mark. ---- */
.hero-dx{align-self:center;background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);border-radius:18px;padding:clamp(22px,2.6vw,32px);display:flex;flex-direction:column;gap:14px;min-width:0}
.hero .hero-dx .hero-dx-k{display:flex;align-items:center;gap:8px;margin:0;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#fff}
.hero-dx-k::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--gold);flex:none}
.hero-dx h2{margin:0;font-family:var(--display);font-weight:600;font-size:clamp(22px,2.2vw,27px);line-height:1.25;color:#fff;text-wrap:balance}
.hero-dx-list{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.hero-dx-opt{display:flex;align-items:flex-start;gap:12px;padding:13px 15px;border-radius:12px;background:rgba(255,255,255,.06);box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);color:#fff;text-decoration:none;font-size:15.5px;line-height:1.4;transition:background-color 120ms ease,box-shadow 120ms ease,transform 160ms cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){.hero-dx-opt:hover{background:rgba(255,255,255,.11);box-shadow:inset 0 0 0 1px rgba(240,180,41,.55)}.hero-dx-opt:hover .hero-dx-dot{box-shadow:inset 0 0 0 5px var(--gold)}}
.hero-dx-opt:active{transform:scale(.985)}
.hero-dx-opt:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.hero-dx-dot{flex:none;width:17px;height:17px;margin-top:2px;border-radius:50%;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.45);transition:box-shadow 120ms ease}
.hero .hero-dx .hero-dx-foot{margin:2px 0 0;font-size:14px;color:rgba(201,204,211,.85)}
.hero .hero-dx .hero-dx-alt{margin:0;font-size:14px;color:rgba(201,204,211,.85)}
.hero-dx-alt a{color:#fff;text-decoration:underline;text-underline-offset:3px}
@media (prefers-reduced-motion:reduce){.hero-dx-opt,.hero-dx-dot{transition:none}}
.hero-inner:has(.hero-dx){grid-template-columns:minmax(0,1fr) minmax(0,460px);align-items:center}
/* Same 3:1 boundary the old panel was tuned to (WCAG 1.4.11). */
.hero-dx{box-shadow:inset 0 0 0 1px rgba(255,255,255,.26);background:rgba(255,255,255,.07)}
@media (max-width:1000px){.hero-inner:has(.hero-dx){grid-template-columns:minmax(0,1fr)}}
/* The hero's general link and paragraph rules (gold links, 21px paragraphs) outrank the card at
   (0,3,1); these restate the card's own values one step more specific. */
.hero .hero-dx a.hero-dx-opt{color:#fff}
.hero .hero-dx p.hero-dx-k{font-size:12px;line-height:1.4;margin:0;color:#fff}
.hero .hero-dx p.hero-dx-foot,.hero .hero-dx p.hero-dx-alt{font-size:14px;line-height:1.55;margin:0;color:rgba(201,204,211,.85)}
.hero .hero-dx p.hero-dx-alt a{color:#fff}
/* Also from Blue Harbour: the products as one quiet strip, not two full sections (Jev: they helped
   a Navigator buyer decide 0.12 and 0.28 of 2). */
.also-strip{padding-block:44px}
.also-list{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px}
.also-list a{display:flex;flex-direction:column;gap:4px;padding:16px 18px;border:1px solid var(--rule);border-radius:12px;background:var(--card);text-decoration:none;color:inherit}
@media (hover:hover) and (pointer:fine){.also-list a:hover{border-color:var(--divider)}}
.also-list b{color:var(--ink-strong);font-size:17px}
.also-list span{color:var(--ink-muted);font-size:15px;line-height:1.5}
@media (max-width:640px){.also-list{grid-template-columns:1fr}}

/* Resources joined the nav on 1 Oct 2026. Between 1024 and 1180 the extra item pushed
   "Book a fit call" off the right edge, so the gaps tighten in that band only. */
@media (min-width:1024px) and (max-width:1180px){ .nav-inner{gap:20px} .nav-links{gap:16px} .nav-links a{font-size:14px} }