/* The AI Lab marketing site (Direction A · "The Method").
   Brand tokens and component styles recreated from the design handoff.
   Plain CSS, no framework, to match the existing static site. */

:root {
  --navy: #14212E;
  --navy-dark: #0d171f;
  --teal: #2DA584;
  /* Hover for anything resting on --teal-deep: button and badge fills, and
     --teal-deep text. Darker than the resting colour rather than lighter, so
     white on it and it on white both stay above AA (6.07:1 against white;
     resting --teal-deep is 5.05:1). It was #249170, one step down from brand
     teal, which put white labels at 3.92:1 on hover. */
  --teal-hover: #1c6f56;
  --teal-light: #3DC496;   /* accent on navy */
  --teal-pale: #edf8f4;
  --offwhite: #f8fafb;
  --white: #ffffff;
  --border: #e2eaef;
  --border-teal: #cfe3db;
  --muted: #4c5f6e;   /* body / intros, darkened for AA contrast on pale backgrounds */
  /* The design system's muted grey. Lighter than --muted and still AA at normal
     sizes: 5.04:1 on white, 4.82:1 on --offwhite, 4.64:1 on --teal-pale. The
     headroom on teal-pale is thin, so do not take it below 14px or onto a
     darker fill without measuring again. */
  --muted-soft: #5a7282;
  --faint: #aab5be;
  /* Small print: price notes, form fine print, article dates. Was #8aa0ac,
     2.72:1 on white and 2.60:1 on --offwhite. Darkened, hue kept, by the least
     that passes AA on all three page grounds: 4.91:1 white, 4.69:1 --offwhite,
     4.52:1 --teal-pale. */
  --fineprint: #63737c;
  --success: #1f7d60;
  --teal-deep: #1f7d60;   /* links inside body copy */
  --amber: #e8a33d;   /* the one low-key "caution" colour */

  --shadow-sm: 0 2px 8px rgba(20, 33, 46, .08);
  --shadow-card: 0 6px 24px rgba(20, 33, 46, .1);
  --shadow-teal: 0 8px 28px rgba(45, 165, 132, .32);

  --maxw: 1120px;
  --pad-x: 56px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
/* Stop iOS Safari inflating long text blocks in landscape. Without it the
   footer's copyright and registration lines rendered at about 1.6 times their
   size on a phone held sideways, while the rest of the page did not. */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: Inter, 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.5;
}

a { color: var(--teal-deep); }
img { max-width: 100%; }

/* Keyboard focus: a clear, consistent ring. --teal-deep meets 3:1 on every band: 5.05 on white, 4.82 on off-white, 4.65 on teal-pale, 3.23 on navy, 3.59 on navy-dark. The brand teal was 2.94 on off-white. */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--teal-deep);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Skip link: hidden until focused, then pinned top-left. */
.skip-link {
  position: absolute; left: 8px; top: -56px; z-index: 100;
  background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 8px;
  text-decoration: none; font-size: 14px; font-weight: 600;
  transition: top .15s ease;
}
.skip-link:focus { top: 8px; }

/* ── Layout primitives ─────────────────────────────────────────────── */
.section { padding: 92px var(--pad-x); }
.container { max-width: var(--maxw); margin: 0 auto; }

.bg-white { background: var(--white); }
.bg-offwhite { background: var(--offwhite); }
.bg-teal-pale { background: var(--teal-pale); }
.bg-navy { background: var(--navy); }

.eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--teal-deep);
  margin-bottom: 16px;
}
.bg-navy .eyebrow { color: var(--teal-light); }

h1, h2, h3 { margin: 0; }
.h2 {
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--navy);
  max-width: 760px;
}
.bg-navy .h2 { color: var(--white); }

.lead {
  font-size: 19px;
  line-height: 1.65;
  color: var(--muted);
  max-width: 720px;
}
.bg-navy .lead { color: rgba(255, 255, 255, .75); }

.mt-18 { margin-top: 18px; }
.mb-44 { margin-bottom: 44px; }
.mb-52 { margin-bottom: 52px; }
.mt-52 { margin-top: 52px; }
/* For a change of subject INSIDE a section, where the gap has to read as bigger
   than the space between a heading and its own paragraphs or the two blocks run
   together. */
.mt-72 { margin-top: 72px; }

/* ── The problem (navy, two-column: sticky headline + symptom cards) ── */
.problem-grid { display: grid; grid-template-columns: 0.92fr 1.08fr; gap: 64px; align-items: start; }
.problem-intro { position: sticky; top: 40px; }
.problem-intro .h2 { margin-bottom: 28px; }
.problem-fix {
  border-radius: 18px; padding: 28px 30px;
  background: rgba(45, 165, 132, .12); border: 1.5px solid rgba(45, 165, 132, .45);
}
.problem-fix-eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal-light); margin-bottom: 10px;
}
.problem-fix p { font-size: 19px; line-height: 1.5; color: #fff; margin: 0; font-weight: 500; }
.problem-symptoms-head { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .6); margin: 0 0 20px; }
.symptom-list { display: flex; flex-direction: column; gap: 12px; }
.symptom {
  padding: 20px 24px 20px 22px; border-radius: 14px;
  background: rgba(255, 255, 255, .05); border: 1.5px solid rgba(255, 255, 255, .1);
  border-left: 3px solid var(--amber);
  font-size: 17px; line-height: 1.45; color: #fff; font-weight: 500;
}

/* ── Buttons ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border-radius: 50px;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  border: none;
  font-family: inherit;
  line-height: inherit;
  transition: background .2s ease, color .2s ease, transform .2s ease;
}
/* Default is the handoff's tighter button size (14px 28px / 16px). The hero
   pair is the exception and opts into .btn-lg. */
.btn-primary {
  background: var(--teal-deep);
  color: #fff;
  box-shadow: 0 8px 28px rgba(45, 165, 132, .28);
  padding: 14px 28px;
  font-size: 16px;
}
.btn-primary:hover { background: var(--teal-hover); transform: translateY(-1px); }

.btn-outline {
  background: transparent;
  border: 1.5px solid var(--navy);
  color: var(--navy);
  padding: 14px 28px;
  font-size: 16px;
}
.btn-outline:hover { background: var(--navy); color: #fff; }

.btn-outline-light {
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, .5);
  color: #fff;
  padding: 15px 30px;
  font-size: 16px;
}
.btn-outline-light:hover { background: rgba(255, 255, 255, .08); }

.btn-sm { padding: 11px 22px; font-size: 15px; box-shadow: 0 6px 20px rgba(45, 165, 132, .28); }
.btn-lg.btn-primary { padding: 17px 32px; font-size: 17px; box-shadow: var(--shadow-teal); }
.btn-lg.btn-outline { padding: 17px 30px; font-size: 17px; }

/* ── Hover & motion ────────────────────────────────────────────────── */
.btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(45, 165, 132, .42); }
.btn-outline:hover, .btn-outline-light:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.price-card .btn-book, .price-card .btn-reserve {
  transition: all .25s ease;
}
.price-card .btn-book:hover, .nav-actions .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 6px 20px rgba(45, 165, 132, .35); }
.price-card .btn-reserve:hover { transform: translateY(-1px); }
.price-card .btn-book:active, .price-card .btn-reserve:active,
.nav-actions .btn-primary:active { transform: translateY(0); }

/* Nav links: underline that grows from the left on hover. */
.nav-links a:not(.btn) { position: relative; }
.nav-links a:not(.btn)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 2px;
  background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform .2s ease;
}
.nav-links a:not(.btn):hover::after { transform: scaleX(1); }

/* Text links: underline on hover. Buttons excluded - they signal hover with
   their own background/lift, and an underlined button label looks broken. */
.legal a:not(.btn):hover, .form-fine a:hover,
.footer-legal a:hover, .footer-col a:hover { text-decoration: underline; }

/* Cards: a gentle lift on hover. */
.tool-card, .sector-tile, .testi-card { transition: transform .2s ease, box-shadow .2s ease; }
.tool-card:hover, .sector-tile:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.testi-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(20, 33, 46, .12); }

/* ── Nav ───────────────────────────────────────────────────────────── */
/* In-page anchors land below the sticky bar, not under it: 85px tall, 73px
   on phones. */
html { scroll-padding-top: 85px; }
@media (max-width: 479px) { html { scroll-padding-top: 73px; } }
/* The launch nav, per the Claude Design site-nav handover: logo, five links,
   then the hub pill and the CTA. */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 18px var(--pad-x);
  border-bottom: 1.5px solid var(--border);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: saturate(180%) blur(12px);
  transition: box-shadow .25s ease;
}
.nav.is-scrolled { box-shadow: 0 2px 8px rgba(20, 33, 46, .08); }
.nav-bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-brand { display: flex; align-items: center; gap: 14px; flex: none; }
.nav-brand img { height: 48px; width: auto; display: block; }
.nav-tagline {
  padding-left: 14px;
  border-left: 1.5px solid var(--border);
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}
.nav-right { display: flex; align-items: center; gap: 28px; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a:not(.btn) {
  font-size: 15px;
  font-weight: 500;
  color: var(--navy);
  text-decoration: none;
  transition: color .25s ease;
  white-space: nowrap;
}
/* The handover asks for #2DA584 on hover and for the active page; at 14-15px
   that is 3.0:1 on white, under AA, so text takes --teal-deep. The hover
   underline and the pill's border keep the brighter teal. */
.nav-links a:not(.btn):hover { color: var(--teal-deep); }
.nav-links a[aria-current="page"] { font-weight: 600; color: var(--teal-deep); }
/* The phone menu's copy of the hub link; see nav.njk. */
.nav-links .nav-hub-menu { display: none; }
.nav-links .nav-index-menu { display: none; }
.nav-actions { display: flex; align-items: center; gap: 10px; margin-left: 6px; }
.nav-actions .btn { white-space: nowrap; }
.nav-hub {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: 50px;
  border: 1.5px solid var(--border); background: transparent;
  font-size: 14px; font-weight: 600; color: var(--navy);
  text-decoration: none; white-space: nowrap;
  transition: color .25s ease, border-color .25s ease;
}
.nav-hub svg { flex: none; }
.nav-hub:hover { border-color: var(--teal); color: var(--teal-deep); }
/* The 404 page's only header link. */
.nav-back { font-size: 15px; font-weight: 500; color: var(--navy); text-decoration: none; white-space: nowrap; }
.nav-back:hover { color: var(--teal-deep); }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; padding: 8px; }
.nav-toggle span {
  display: block; width: 24px; height: 2px; background: var(--navy);
  margin: 5px 0; transition: transform .2s ease, opacity .2s ease;
}

/* ── Hero ──────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  overflow: hidden;
  background: linear-gradient(160deg, #edf8f4 0%, #ffffff 62%);
  padding: 88px var(--pad-x) 56px;
}
.hero-blob {
  position: absolute;
  top: -140px;
  right: -120px;
  width: 520px;
  height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle at center, rgba(45, 165, 132, .18), transparent 70%);
  animation: floatBlob 11s ease-in-out infinite;
  pointer-events: none;
}
@keyframes floatBlob {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-18px, 14px); }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-blob { animation: none; }
  .btn-primary:hover, .btn-outline:hover, .btn-outline-light:hover,
  .price-card .btn-book:hover, .price-card .btn-reserve:hover, .nav-actions .btn-primary:hover,
  .tool-card:hover, .sector-tile:hover, .testi-card:hover,
  .uplift-card:hover, .lead-card:hover, .ladder-row:hover,
  .day-card:hover, .score-card:hover, .ladder-more:hover span { transform: none; }
  .nav-links a:not(.btn)::after { transition: none; }
  .faq-item .faq-a, .faq-item .faq-a > div, .faq-item .faq-icon { transition: none; }
}

.hero-inner { position: relative; max-width: 880px; }
.hero h1 {
  font-size: clamp(46px, 5.4vw, 80px);
  line-height: 1.04;
  letter-spacing: -0.025em;
  font-weight: 800;
  color: var(--navy);
  margin: 0 0 26px;
}
.hero-accent { color: var(--teal); }
/* Teal fragment inside a heading, e.g. "Prove." in Measure. Train. Embed. Prove. */
.accent { color: var(--teal-deep); }
.bg-navy .accent { color: var(--teal-light); }
.hero-lead { font-size: 21px; line-height: 1.6; color: var(--muted); margin: 0 0 38px; max-width: 680px; }

.offer-row { display: flex; flex-wrap: wrap; gap: 14px 28px; align-items: center; margin-bottom: 28px; }
.offer-item { display: flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--navy); }
.offer-item .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }

/* Understated UK-wide reach line, under the trust chips. */
.hero-reach { font-size: 15px; font-weight: 500; color: var(--muted); margin: 0 0 34px; }

.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-bottom: 44px; }

.tools-row { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.tools-row .label { font-size: 13px; font-weight: 600; color: var(--muted); }
.tool-pills { display: flex; gap: 10px; flex-wrap: wrap; }
.pill {
  padding: 8px 16px;
  border-radius: 50px;
  background: #fff;
  border: 1.5px solid var(--border);
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
}

/* ── Method ────────────────────────────────────────────────────────── */
.method { padding: 88px var(--pad-x); }
.method-2col { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 72px; align-items: start; }
.method-intro p { font-size: 19px; line-height: 1.65; color: var(--muted); margin: 18px 0 28px; }
.method-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px; border-radius: 50px; background: var(--teal-pale);
  font-size: 14px; font-weight: 600; color: var(--success);
}
.method-pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--teal); }
/* The Loop is a cycle, not a countdown. It used to be drawn as 01-04 in a
   quieter teal than .uplift-num, which put three separate 01-04 sequences on
   the methodology page and made "step 04" mean two different things. Numerals
   belong to the four methodology stages alone; the Loop is drawn as a rail
   that returns to the top, which is what the ↻ badge above it already claims.
   The markup is still an <ol>, so a screen reader gets the order without the
   page showing a fourth countdown. */
.method-steps .loop-steps { list-style: none; margin: 0; padding: 0 0 0 44px; position: relative; }
.method-steps .loop-steps::before {
  content: ""; position: absolute; left: 12px; top: 15px; bottom: 0;
  width: 2px; background: var(--border-teal);
}
.method-steps .loop-step { position: relative; padding-bottom: 34px; }
.method-steps .loop-step:last-child { padding-bottom: 0; }
/* The ring is the offwhite section fill, so the rail passes behind the dot
   rather than through it. It must be restated anywhere this sits on white. */
.method-steps .loop-step::before {
  content: ""; position: absolute; left: -37px; top: 9px;
  width: 12px; height: 12px; border-radius: 50%;
  background: var(--teal); box-shadow: 0 0 0 4px var(--offwhite);
}
.method-steps .loop-step h3 { font-size: 25px; font-weight: 700; color: var(--navy); margin: 0 0 6px; }
.method-steps .loop-step p { font-size: 16px; line-height: 1.55; color: var(--muted); margin: 0; }
.loop-return {
  display: grid; grid-template-columns: 44px 1fr; align-items: center;
  position: relative; margin: 0; padding-top: 22px;
}
.loop-return::before {
  content: ""; position: absolute; left: 12px; top: 0; height: 22px;
  width: 2px; background: var(--border-teal);
}
.loop-return-icon {
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--teal-pale); border: 1.5px solid var(--border-teal);
  font-size: 15px; line-height: 1; color: var(--teal-deep);
}
.loop-return-text { font-size: 15px; font-weight: 600; color: var(--success); }

/* ── Cards on navy (safe use) ──────────────────────────────────────── */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.dark-card {
  border: 1.5px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  padding: 32px;
  background: rgba(255, 255, 255, .05);
}
.dark-card h3 { font-size: 19px; font-weight: 700; color: #fff; margin: 0 0 10px; }
#score .index-card-link { display: flex; flex-direction: column; text-decoration: none; }
#score .index-card-link h3 { text-decoration: none; }
#score .index-card-action { display: block; margin-top: auto; padding-top: 16px; color: #fff; text-decoration: underline; font-weight: 600; }
#score .index-card-link:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.dark-card p { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .7); margin: 0; }

/* ── Tools & licences ──────────────────────────────────────────────── */
/* Four cards, laid out by the .price-grid--four breakpoints below (4, then 2, then 1). */
.tool-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
/* Four across leaves a card 265px wide at the full container. The side
   padding comes in, as the four-card price row's does, so "Claude with
   Cowork" fits on one line there; below the full container (1101-1231px) a
   title can still wrap, so two lines are reserved and the descriptions stay
   level across the row. */
@media (min-width: 1101px) { .tool-grid .tool-card { padding-left: 20px; padding-right: 20px; } .tool-grid .tool-card .tool-head { gap: 8px; } }
@media (min-width: 1101px) and (max-width: 1231px) { .tool-grid .tool-card h3 { min-height: 2lh; } }
.tool-card {
  display: flex; flex-direction: column;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 30px;
  background: #fff;
}
.tool-card .tool-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 8px; }
.tool-card .tool-icon { order: 2; flex: none; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; color: var(--faint); }
.tool-card .tool-icon svg { width: 100%; height: 100%; display: block; }
.tool-card h3 { font-size: 20px; font-weight: 700; color: var(--navy); margin: 0; }
.tool-card > p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0 0 16px; }
/* The plan line sits alone: the per-user prices came off the cards, so this
   is no longer a two-item row and does not need to be a flex one. */
.tool-card .foot { margin-top: auto; border-top: 1.5px solid var(--border); padding-top: 14px; }
.tool-card .plan { font-size: 13px; color: var(--fineprint); }

.callout {
  display: flex; align-items: center; gap: 16px;
  margin-top: 24px;
  background: var(--teal-pale);
  border: 1.5px solid rgba(45, 165, 132, .4);
  border-radius: 16px;
  padding: 22px 28px;
}
.callout.on-white { background: #fff; }
.callout .badge {
  flex: none; padding: 6px 14px; border-radius: 50px;
  background: var(--teal-deep); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em;
}
.callout p { font-size: 16px; line-height: 1.5; color: var(--navy); margin: 0; font-weight: 500; }

/* ── Sectors ───────────────────────────────────────────────────────── */
.sector-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 24px; }
.sector-tile { background: #fff; border-radius: 16px; padding: 28px; box-shadow: var(--shadow-sm); }
.sector-tile h3 { font-size: 18px; font-weight: 700; color: var(--navy); margin: 0 0 8px; }
.sector-tile p { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0; }

/* ── Readiness quadrant ────────────────────────────────────────────── */
.quadrant-map { display: grid; grid-template-columns: 34px 1fr; gap: 16px; align-items: stretch; }
.quad-axis-y { display: flex; align-items: center; justify-content: center; }
.quad-axis-y span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--fineprint); white-space: nowrap;
}
.quad-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.quad-card {
  border: 1.5px solid var(--border); border-radius: 16px; padding: 28px; background: #fff;
  min-height: 154px;
}
.quad-card.goal { background: var(--teal-pale); border-color: rgba(45, 165, 132, .5); }
.quad-card h3 { font-size: 21px; font-weight: 700; color: var(--navy); margin: 0 0 8px; }
.quad-card p { font-size: 14px; line-height: 1.55; color: var(--muted); margin: 0; }
.quad-axis-x { display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding: 0 4px; }
.quad-axis-x .end { font-size: 13px; font-weight: 600; color: var(--fineprint); }
.quad-axis-x .mid { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--fineprint); }

/* ── Founder ───────────────────────────────────────────────────────── */
.founder { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: 56px; align-items: center; }
.founder-photo {
  width: 100%; height: 520px; object-fit: cover; object-position: top center;
  border-radius: 22px; display: block;
}
/* :not(.eyebrow) - this rule is more specific than .eyebrow, so without it the
   "Founder-led" eyebrow rendered at 19px in muted grey instead of 13px teal. */
.founder-body p:not(.eyebrow) { font-size: 19px; line-height: 1.65; color: var(--muted); margin: 0 0 18px; max-width: 660px; }
.founder-body p:last-of-type { margin-bottom: 32px; }
.founder-body a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
.founder-body a:hover { color: var(--teal-hover); }
.cred-pills { display: flex; flex-wrap: wrap; gap: 12px; }
.cred-pill {
  background: #fff; border: 1.5px solid var(--border-teal); border-radius: 50px;
  padding: 10px 20px; font-size: 14px; font-weight: 600; color: var(--navy);
}

.is-hidden { display: none !important; }
/* Read by screen readers, not shown: e.g. "Full price" before a struck price. */
.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; }

/* ── Testimonials ──────────────────────────────────────────────────── */
.testi-featured { display: grid; grid-template-columns: 1.25fr 1fr; gap: 24px; align-items: stretch; }
.stars { letter-spacing: 3px; color: var(--teal); }
.testi-stack { display: flex; flex-direction: column; gap: 24px; }

.testi-card {
  background: #fff; border-radius: 22px; padding: 32px; box-shadow: var(--shadow-sm);
  flex: 1; display: flex; flex-direction: column;
}
.testi-card .stars { font-size: 14px; margin-bottom: 14px; }
.testi-card .quote { font-size: 17px; line-height: 1.6; color: var(--navy); margin: 0 0 22px; flex: 1; }

.testi-feature {
  background: var(--navy); border-radius: 22px; padding: 48px;
  display: flex; flex-direction: column; box-shadow: 0 16px 48px rgba(20, 33, 46, .18);
}
.testi-feature .tag {
  display: inline-flex; align-self: flex-start; align-items: center; gap: 8px;
  padding: 7px 16px; border-radius: 50px; background: rgba(45, 165, 132, .16);
  font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--teal-light); margin-bottom: 24px;
}
.testi-feature .stars { font-size: 15px; color: var(--teal-light); margin-bottom: 18px; }
.testi-feature .mark { font-size: 64px; line-height: .5; color: var(--teal-light); font-weight: 800; margin-bottom: 24px; }
.testi-feature .quote { font-size: 26px; line-height: 1.45; font-weight: 600; color: #fff; margin: 0 0 32px; flex: 1; }
.testi-feature .testi-foot { border-top-color: rgba(255, 255, 255, .12); padding-top: 24px; gap: 16px; }
.testi-feature .avatar { width: 48px; height: 48px; background: var(--teal-deep); font-size: 16px; }
/* Qualified with .testi-foot so these out-specify the shared dark-on-light
   .testi-foot .name/.role rules below (equal specificity would lose on order). */
.testi-feature .testi-foot .name { color: #fff; font-size: 16px; }
.testi-feature .testi-foot .role { color: rgba(255, 255, 255, .65); }

.testi-foot { display: flex; align-items: center; gap: 14px; border-top: 1.5px solid var(--border); padding-top: 18px; }
.avatar {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700;
}
.testi-foot .name { font-size: 15px; font-weight: 700; color: var(--navy); }
.testi-foot .role { font-size: 14px; color: var(--muted); }

/* ── Pricing ───────────────────────────────────────────────────────── */
.price-grid { display: flex; flex-wrap: wrap; gap: 20px; }
.price-card {
  flex: 1 1 280px; max-width: 360px; border: 1.5px solid var(--border);
  border-radius: 22px; padding: 36px 32px 32px; background: #fff;
  display: flex; flex-direction: column;
}
.price-card.featured { border-color: var(--teal); box-shadow: 0 8px 32px rgba(45, 165, 132, .25); }
.price-badge {
  align-self: flex-start; padding: 5px 12px; border-radius: 50px; margin-bottom: 16px;
  background: var(--teal-pale); color: var(--success);
  font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.price-badge--inperson { background: var(--navy); color: #fff; }
.price-card h3 { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; color: var(--navy); margin: 0 0 8px; }
.price-card .sub { font-size: 14px; color: var(--muted-soft); margin: 0 0 28px; min-height: 21px; }
.price-card .amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; min-height: 56px; }
.price-card .amount .val { font-size: 48px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--navy); }
.price-card .amount .vat { font-size: 14px; color: var(--muted-soft); font-weight: 600; }
/* Founding-client offer (src/_data/foundingOffer.js, markup in
   _includes/founding-flag.njk). While it is live the big figure is the
   founding price and the full price sits beside it struck through, with a
   chip under the row. The chip row keeps its height when empty, so the
   cards' descriptions line up with the offer on or off. */
/* --muted-soft, not the handover's --faint: the struck price is price
   information, and --faint is about 2.1:1 on white. */
.list-price { font-size: 16px; font-weight: 600; color: var(--muted-soft); text-decoration: line-through; }
.price-card .offer-row { margin: 12px 0 0; min-height: 20px; font-size: 13px; line-height: 20px; color: var(--muted-soft); }
.founding-chip {
  display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 50px;
  background: var(--teal-pale); color: var(--teal-deep);
  font-size: 12px; font-weight: 700; letter-spacing: .06em; line-height: 1.2; text-transform: uppercase;
}
.founding-banner {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px;
  margin: 0 0 28px; padding: 14px 18px; border-radius: 14px;
  background: #fff; border: 1.5px solid var(--border-teal);
}
.founding-pill {
  display: inline-flex; align-items: center; padding: 5px 12px; border-radius: 50px;
  background: var(--navy); color: #fff; white-space: nowrap;
  font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.founding-banner p { flex: 1 1 320px; margin: 0; font-size: 15px; line-height: 1.5; color: var(--navy); }
.founding-banner strong { font-weight: 600; }
/* CTAs sit at the bottom of each (equal-height) card, so they line up. */
.price-card .btn-book, .price-card .btn-reserve { margin-top: auto; }
.price-card .btn-book {
  display: block; text-align: center; padding: 15px 24px; border-radius: 50px;
  background: var(--teal-deep); color: #fff; font-size: 16px; font-weight: 600; text-decoration: none;
  border: 1.5px solid transparent;   /* same height as the outlined .btn-reserve beside it */
}
.price-card .btn-book:hover { background: var(--teal-hover); }
.price-card .btn-reserve {
  display: block; text-align: center; padding: 15px 24px; border-radius: 50px;
  background: #fff; border: 1.5px solid var(--navy); color: var(--navy);
  font-size: 16px; font-weight: 600; text-decoration: none;
}
.price-card .btn-reserve:hover { background: var(--navy); color: #fff; }
.price-note { font-size: 13px; color: var(--fineprint); margin: -12px 0 22px; }
.price-fine { font-size: 14px; color: var(--fineprint); margin: 24px 0 0; }

/* ── Guardrail ─────────────────────────────────────────────────────── */
.guardrail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
/* Light treatment per the handoff: the section sits on white, so the cards are
   teal-pale and off-white rather than the old on-navy pair. */
.guard-card { border-radius: 22px; padding: 34px; }
.guard-do { border: 1.5px solid rgba(45, 165, 132, .4); background: var(--teal-pale); }
.guard-dont { border: 1.5px solid var(--border); background: var(--offwhite); }
.guard-card .label { font-size: 14px; font-weight: 700; margin-bottom: 18px; }
.guard-do .label { color: var(--teal-deep); }
.guard-dont .label { color: var(--muted); }
.guard-card ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.guard-card li { display: flex; gap: 12px; font-size: 16px; line-height: 1.5; }
.guard-do li { color: var(--navy); }
.guard-dont li { color: var(--muted); }
.guard-card li .mk { font-weight: 700; flex: none; }
.guard-do li .mk { color: var(--teal); }
.guard-dont li .mk { color: var(--faint); }

/* ── FAQ ───────────────────────────────────────────────────────────── */
.faq-grid { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 64px; align-items: start; }
.faq-intro { position: sticky; top: 40px; }
.faq-lead { font-size: 17px; line-height: 1.6; color: var(--muted); margin: 0 0 24px; max-width: 300px; }
.ask { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--success); text-decoration: none; transition: gap .18s ease; }
.ask:hover { gap: 12px; }

.faq-acc { border-bottom: 1.5px solid var(--border); }
.faq-item { border-top: 1.5px solid var(--border); }
.faq-q-head { margin: 0; }
.faq-row {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  width: 100%; padding: 24px 2px; cursor: pointer; background: none; border: none;
  text-align: left; font-family: inherit;
}
.faq-row:focus-visible { outline: 3px solid var(--teal-deep); outline-offset: 2px; border-radius: 6px; }
.faq-q { font-size: 19px; font-weight: 700; color: var(--navy); transition: color .18s ease; }
.faq-icon {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--teal-pale); transition: background .2s ease, transform .2s ease;
}
.faq-icon svg { stroke: var(--success); transition: stroke .2s ease; }
/* The answer opens by animating a grid row from 0fr to 1fr, so it opens to
   whatever height the text needs. It was a max-height cap of 320px, which cut
   a two-paragraph answer off mid-sentence on a phone (22 October 2026); any
   cap does the same again at a larger text size. The inner div is the row's
   only child, hidden from screen readers and find-in-page while closed. */
.faq-a {
  font-size: 16px; line-height: 1.65; color: var(--muted); max-width: 640px;
  padding: 0 56px 0 2px; display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease, padding .28s ease;
}
.faq-a > div { min-height: 0; overflow: hidden; visibility: hidden; transition: visibility 0s .28s; }
.faq-a p { margin: 0; }
.faq-a > div > * + * { margin-top: 12px; }
.faq-item.open .faq-q { color: var(--success); }
.faq-item.open .faq-icon { background: var(--teal); transform: rotate(45deg); }
.faq-item.open .faq-icon svg { stroke: #fff; }
.faq-item.open .faq-a { grid-template-rows: 1fr; padding: 0 56px 26px 2px; }
.faq-item.open .faq-a > div { visibility: visible; transition-delay: 0s; }

/* ── Contact / Request a call ─────────────────────────────────────────── */
.contact { display: grid; grid-template-columns: 0.94fr 1.06fr; gap: 64px; align-items: start; }
.contact-lead { font-size: 18px; line-height: 1.6; color: var(--muted); margin: 0 0 34px; max-width: 440px; }

/* Step list with connecting line */
.steps { position: relative; display: flex; flex-direction: column; }
.steps-line { position: absolute; left: 18px; top: 20px; bottom: 20px; width: 2px; background: var(--border-teal); }
.step { display: flex; gap: 18px; align-items: flex-start; padding-bottom: 24px; position: relative; }
.step:last-child { padding-bottom: 0; }
.step-num {
  flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--teal-pale); border: 1.5px solid var(--border-teal); color: var(--success);
  font-size: 15px; font-weight: 700; display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 1;
}
.step-num--last { background: var(--teal-deep); color: #fff; border: none; box-shadow: 0 4px 14px rgba(45, 165, 132, .3); }
.step-text { font-size: 17px; line-height: 1.45; color: var(--navy); font-weight: 500; padding-top: 6px; }
.step-text--last { font-weight: 600; }

/* Phone card */
.phone-card {
  display: flex; align-items: center; gap: 16px; margin-top: 36px; padding: 18px 22px;
  background: #fff; border: 1.5px solid var(--border); border-radius: 22px;
}
.phone-disc { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--teal-pale); display: flex; align-items: center; justify-content: center; }
.phone-label { font-size: 13px; font-weight: 600; color: var(--muted); margin-bottom: 2px; }
.phone-num { font-size: 20px; font-weight: 700; color: var(--navy); text-decoration: none; letter-spacing: -0.01em; }
.phone-num:hover { color: var(--teal-deep); }
/* Two local numbers stacked inside the phone card. */

/* Form card */
.contact-form { background: #fff; border: 1.5px solid var(--border); border-radius: 22px; padding: 34px; box-shadow: var(--shadow-sm); }
.form-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.contact-form input:not([type="checkbox"]), .contact-form textarea {
  padding: 14px 16px; border-radius: 10px; border: 1.5px solid var(--border);
  font-size: 16px; font-family: inherit; width: 100%; color: var(--navy);
}
.contact-form input:not([type="checkbox"]):focus, .contact-form textarea:focus {
  /* The outline is replaced by the border, which turns --teal-deep: 5.05:1
     against the white field, where brand teal would be 3.07:1 and the resting
     border is 1.2:1. */
  border-color: var(--teal-deep); box-shadow: 0 0 0 3px rgba(45, 165, 132, .15); outline: none;
}
.contact-form .form-2col input { margin-bottom: 0; }
.contact-form > input { margin-bottom: 14px; }
.contact-form textarea { margin-bottom: 20px; resize: none; }

/* Enquiry context panel (shown only when arriving from a pricing CTA) */
.form-context {
  padding: 18px 20px; margin-bottom: 20px; background: var(--offwhite);
  border: 1.5px solid var(--border); border-radius: 16px;
}
.fc-label { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin: 0 0 8px; }
.fc-item { font-size: 15px; font-weight: 600; color: var(--navy); margin: 0; line-height: 1.45; }
.fc-item .fc-meta { display: block; font-weight: 500; color: var(--muted); font-size: 14px; margin-top: 2px; }
.contact-form .form-context input { margin-top: 14px; }

/* Scheduling sub-panel */
.sched-panel { padding: 22px; background: var(--offwhite); border: 1.5px solid var(--border); border-radius: 16px; }
.sched-label { font-size: 13px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); margin-bottom: 11px; }
.sched-panel .check-row { margin-bottom: 0; }
.callback-ask { margin-top: 20px; }
.phone-ask { margin-bottom: 20px; }
.phone-ask .sched-label { display: block; }
.contact-form .phone-ask input { background: #fff; }

/* Custom checkbox */
.check-row { display: flex; align-items: center; gap: 12px; cursor: pointer; margin-bottom: 20px; }
.cb-input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.cb-box {
  flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid #cbd5dd; background: #fff;
  display: flex; align-items: center; justify-content: center; transition: all .18s ease;
}
.cb-box svg { opacity: 0; transition: opacity .18s ease; }
.check-row:has(.cb-input:checked) .cb-box { border-color: var(--teal); background: var(--teal); }
.check-row:has(.cb-input:checked) .cb-box svg { opacity: 1; }
.check-row:has(.cb-input:focus-visible) .cb-box { outline: 3px solid var(--teal-deep); outline-offset: 2px; }
.cb-text { font-size: 15px; font-weight: 500; color: var(--navy); }

/* Chips (day / time toggle buttons) */
.chip-row { display: flex; flex-wrap: wrap; gap: 9px; margin-bottom: 20px; }
.chip-row:last-child { margin-bottom: 0; }
.chip {
  flex: none; padding: 9px 19px; border-radius: 50px; font-size: 14px; font-weight: 600;
  cursor: pointer; transition: all .18s ease; border: 1.5px solid var(--border);
  background: #fff; color: var(--navy); font-family: inherit;
}
.chip[aria-pressed="true"] { border-color: var(--teal-deep); background: var(--teal-deep); color: #fff; box-shadow: 0 4px 14px rgba(45, 165, 132, .28); }
.chip:focus-visible { outline: 3px solid var(--teal-deep); outline-offset: 2px; }

/* Submit + notes */
.submit-btn {
  width: 100%; padding: 16px; margin-top: 22px; border: none; border-radius: 50px;
  background: var(--teal-deep); color: #fff; font-size: 16px; font-weight: 600; cursor: pointer;
  font-family: inherit; transition: all .2s ease;
}
.submit-btn:hover { background: var(--teal-hover); transform: translateY(-1px); box-shadow: 0 6px 20px rgba(45, 165, 132, .35); }
.submit-btn:active { transform: scale(.99); }
.submit-btn:disabled { opacity: .6; cursor: default; }
.form-fine { font-size: 13px; line-height: 1.5; color: var(--fineprint); text-align: center; margin: 16px 0 0; }
.form-fine a { color: var(--muted); }
.form-msg { font-size: 15px; margin: 14px 0 0; font-weight: 600; text-align: center; }
.form-msg.ok { color: var(--success); }
.form-msg.err { color: #b4453a; }

/* ── Contact success state (replaces the form after a send) ── */
.contact-success {
  background: #fff; border: 1.5px solid var(--border); border-radius: 22px;
  padding: 52px 34px; box-shadow: var(--shadow-sm); text-align: center; align-self: start;
}
.cs-badge { width: 84px; height: 84px; margin: 0 auto 22px; animation: csPop .5s ease both; }
/* After the rule above, not in the reduced-motion block near the top: same
   specificity, so whichever comes later wins. */
@media (prefers-reduced-motion: reduce) { .cs-badge { animation: none; } }
.cs-eyebrow { margin-bottom: 8px; }
.cs-h { font-size: 28px; font-weight: 800; letter-spacing: -.025em; color: var(--navy); margin: 0 0 12px; }
.cs-body { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0 auto 24px; max-width: 380px; }
.cs-body strong { color: var(--navy); }
.cs-pill {
  display: flex; width: fit-content; align-items: center; gap: 9px; background: var(--offwhite);
  border: 1px solid var(--border); border-radius: 50px; padding: 9px 18px;
  font-size: 13px; font-weight: 600; color: var(--muted); margin: 0 auto 26px;
}
.cs-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--teal); }
@keyframes csPop { 0% { transform: scale(.6); opacity: 0; } 60% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }
/* visually-hidden honeypot field */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ── Legal pages (privacy) ─────────────────────────────────────────── */
.legal { max-width: 760px; }
.legal h1 { color: var(--navy); }
.legal h2 { font-size: 22px; font-weight: 700; color: var(--navy); margin: 40px 0 12px; }
.legal p { font-size: 16px; line-height: 1.65; color: var(--muted); margin: 0 0 16px; }
.legal ul { margin: 0 0 16px; padding-left: 22px; }
.legal li { font-size: 16px; line-height: 1.6; color: var(--muted); margin-bottom: 12px; }
/* Text links only - `.legal a` (0,1,1) outranks `.btn-primary` (0,1,0) on the
   element count, which would paint a primary button's label teal on its teal
   background. */
.legal a:not(.btn) { color: var(--teal-deep); }
.legal strong { color: var(--navy); }
.legal-updated { font-size: 14px; color: var(--fineprint); margin: 0 0 28px; }
.legal-note { font-size: 14px; color: var(--fineprint); background: var(--offwhite); border: 1.5px solid var(--border); border-radius: 12px; padding: 16px 18px; }

/* ── Business Memory coda (navy, last before the footer) ───────────── */
/* No page uses these since 19 October 2026: Business Memory is off the
   marketing pages until it launches (improve-card.test.js). Kept for the
   change that brings the panel back; delete them if it returns redesigned. */
.bm { padding: 96px var(--pad-x); background: var(--navy); position: relative; overflow: hidden; border-top: 1.5px solid rgba(255, 255, 255, .12); }
.bm-glow { position: absolute; top: -160px; left: -120px; width: 540px; height: 540px; border-radius: 50%; background: radial-gradient(circle at center, rgba(45, 165, 132, .16), transparent 70%); pointer-events: none; }
.bm-inner { position: relative; max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: center; }
.bm-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-light); margin-bottom: 16px; }
.bm-title { font-size: clamp(30px, 3.4vw, 46px); line-height: 1.08; letter-spacing: -0.025em; font-weight: 800; color: #fff; margin: 0 0 20px; }
.bm-lead { font-size: 19px; line-height: 1.6; color: rgba(255, 255, 255, .78); margin: 0 0 18px; }
.bm-lead--last { margin: 0 0 30px; }
.bm-cta-group { display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
/* Two treatments, per the handoff: white-on-navy outline where the CTA sits
   inside the dark strip, solid teal for the homepage "How it works" link. */
.bm-cta {
  display: inline-flex; align-items: center; gap: 10px; padding: 15px 28px; border-radius: 50px;
  background: transparent; border: 1.5px solid rgba(255, 255, 255, .45); color: #fff;
  font-size: 16px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.bm-cta:hover { background: rgba(255, 255, 255, .08); border-color: #fff; transform: translateY(-1px); }
.bm-cta--solid {
  background: var(--teal-deep); border-color: var(--teal-deep); padding: 15px 30px;
  box-shadow: 0 8px 28px rgba(45, 165, 132, .3);
}
.bm-cta--solid:hover { background: var(--teal-hover); border-color: var(--teal-hover); }

/* Homepage strip diagram: three tools, dashed connectors, one memory card. */
.bm-flow { display: flex; flex-direction: column; align-items: center; gap: 0; }
.bm-flow .bm-tools { margin-bottom: 0; }
.bm-connectors { width: 200px; display: block; }
.bm-connectors path, .bm-join path { fill: none; stroke: rgba(61, 196, 150, .55); stroke-width: 1.5; stroke-dasharray: 3 5; }
.bm-card {
  display: flex; align-items: center; gap: 18px; width: 100%; max-width: 420px;
  background: rgba(45, 165, 132, .1); border: 1.5px solid rgba(45, 165, 132, .45);
  border-radius: 22px; padding: 22px 24px; box-shadow: 0 12px 40px rgba(45, 165, 132, .18);
}
.bm-card-tile {
  flex: none; width: 60px; height: 60px; border-radius: 15px; background: #fff;
  display: flex; align-items: center; justify-content: center; padding: 7px;
}
.bm-card-tile img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.bm-card-name { font-size: 18px; font-weight: 800; color: #fff; letter-spacing: -0.01em; margin-bottom: 3px; }
.bm-card-desc { font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .72); margin: 0; }

/* ── Business Memory page diagram: capture -> memory -> available ─── */
.bm-diagram { align-self: center; }
.bm-flow-label {
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5); margin: 0 0 16px; text-align: center;
}
.bm-diagram .bm-tools { margin-bottom: 0; gap: 8px; }
.bm-diagram .bm-chip { padding: 8px 14px; white-space: nowrap; }
.bm-flow-stack { display: flex; flex-direction: column; align-items: center; gap: 0; }
.bm-join { display: block; }
.bm-join--in { width: 440px; max-width: 100%; }
.bm-join--out { width: 280px; max-width: 100%; }
.bm-card--lg { max-width: 480px; gap: 20px; padding: 24px 26px; }
.bm-card--lg .bm-card-tile { width: 72px; height: 72px; border-radius: 18px; padding: 8px; }
.bm-card--lg .bm-card-name { font-size: 19px; margin-bottom: 4px; }
.bm-card--lg .bm-card-desc { font-size: 15px; }
.bm-reassure { font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .65); margin: 0; max-width: 540px; }
.bm-diagram-label { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .5); margin: 0 0 14px; text-align: center; }
.bm-tools { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 8px; }
.bm-chip { padding: 9px 16px; border-radius: 50px; background: rgba(255, 255, 255, .06); border: 1.5px solid rgba(255, 255, 255, .14); font-size: 13px; font-weight: 600; color: #fff; }
.bm-converge { display: flex; flex-direction: column; align-items: center; }
.bm-connector-text { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-light); margin: 14px 0 8px; }
.bm-connector-line { width: 1.5px; height: 20px; background: rgba(45, 165, 132, .55); margin-bottom: 18px; }
.bm-hub { width: 100%; background: rgba(45, 165, 132, .1); border: 1.5px solid rgba(45, 165, 132, .45); border-radius: 22px; padding: 28px; text-align: center; box-shadow: 0 14px 44px rgba(45, 165, 132, .2); }
.bm-hub-tile { width: 84px; height: 84px; border-radius: 20px; background: #fff; display: flex; align-items: center; justify-content: center; padding: 10px; margin: 0 auto 16px; }
.bm-hub-tile img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.bm-hub-name { font-size: 20px; font-weight: 800; color: #fff; letter-spacing: -0.01em; margin-bottom: 6px; }
.bm-hub-desc { font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .72); margin: 0; }

/* ── Footer ────────────────────────────────────────────────────────── */
.footer { padding: 64px var(--pad-x); background: var(--navy-dark); border-top: 1.5px solid rgba(255, 255, 255, .12); }
.footer-grid {
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 40px;
  padding-bottom: 40px; border-bottom: 1.5px solid rgba(255, 255, 255, .12);
}
.footer img { height: 40px; width: auto; margin-bottom: 18px; }
.footer-about { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .6); margin: 0; max-width: 300px; }
.social-links { display: flex; align-items: center; gap: 12px; margin-top: 22px; }
.social-links a {
  display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, .16);
  color: rgba(255, 255, 255, .75); text-decoration: none;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.social-links a:hover { border-color: var(--teal-light); color: var(--teal-light); background: rgba(255, 255, 255, .05); }
.footer-col .head {
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 16px;
}
.footer-col .links { display: flex; flex-direction: column; gap: 12px; }
.footer-col a, .footer-col span { font-size: 15px; color: rgba(255, 255, 255, .78); text-decoration: none; }
.footer-col a:hover { color: var(--teal-light); }
.footer-col span { color: rgba(255, 255, 255, .6); }
.footer-copy { padding-top: 28px; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; }
.footer-copy span { font-size: 14px; color: rgba(255, 255, 255, .5); }
.footer-copy a { font-size: 14px; color: rgba(255, 255, 255, .6); text-decoration: none; }
.footer-copy a:hover { color: var(--teal-light); }
.footer-legal { font-size: 14px; color: rgba(255, 255, 255, .5); }
.footer-reg { font-size: 13px; color: rgba(255, 255, 255, .5); margin: 14px 0 0; }

/* ── Problem: emphasised final symptom ─────────────────────────────── */
.symptom.emph {
  background: rgba(45, 165, 132, .1);
  border-color: rgba(45, 165, 132, .45);
  border-left-color: var(--teal-light);
  font-weight: 600;
}

/* ── AI Uplift Methodology (4 numbered cards) ──────────────────────── */
.uplift-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.uplift-card { border: 1.5px solid var(--border); border-radius: 16px; padding: 30px; background: #fff; }
.uplift-card.featured { background: var(--teal-pale); border-color: rgba(45, 165, 132, .5); }
.uplift-num { font-size: 52px; font-weight: 800; line-height: .9; letter-spacing: -0.04em; color: var(--teal-deep); margin-bottom: 18px; }
.uplift-card h3 { font-size: 21px; font-weight: 700; color: var(--navy); margin: 0 0 8px; }
.uplift-card p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; }

/* ── The four readings as a timeline (methodology) ─────────────────── */
/* The light-background twin of .day-timeline, and for the same reason: the
   four readings are points in time, not steps you take, and drawing them as
   another 01-04 card grid both hid the elapsed time the section argues about
   and collided with the methodology's own 01-04 further up the page. The
   label carries the timing; the card carries what the reading is for. */
.score-timeline {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.score-point { display: flex; flex-direction: column; }
.score-when {
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal-deep); margin: 0 0 10px;
}
.score-rule { display: flex; align-items: center; margin: 0 0 16px; }
.score-rule::before {
  content: ""; flex: 0 0 auto; width: 10px; height: 10px;
  border-radius: 50%; background: var(--teal);
}
.score-rule::after { content: ""; flex: 1; height: 1.5px; margin-left: 8px; background: var(--border); }
/* The last line is transparent so the run of readings ends rather than
   trailing off into a fifth nobody takes. */
.score-point:last-child .score-rule::after { background: transparent; }
.score-card {
  flex: 1; background: #fff;
  border: 1.5px solid var(--border); border-radius: 16px; padding: 26px;
}
.score-card h3 { font-size: 19px; font-weight: 700; color: var(--navy); margin: 0 0 8px; }
.score-card p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; }
.score-card.result { background: var(--teal-pale); border-color: rgba(45, 165, 132, .5); }
/* The reading that counts gets the ring on the rail as well as the fill, so
   the emphasis reads at a glance from the line rather than only the card. */
.score-point.result .score-rule::before { box-shadow: 0 0 0 4px rgba(45, 165, 132, .18); }

/* ── The AI Adoption Index (navy) ────────────────────────────────────── */
/* The gauge card takes the wider column; the intro text sits in the narrower
   0.9fr on the left. Collapses to one column at <=1140px (see media query). */
.score-top { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; margin-bottom: 56px; }
.uplift-figure { display: flex; align-items: baseline; gap: 10px; }
.uplift-figure .from { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; color: rgba(255, 255, 255, .55); line-height: 1; }
.uplift-figure .arrow { font-size: 22px; color: var(--teal-light); }
.uplift-figure .to { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; color: var(--teal-light); line-height: 1; }
.uplift-figure.lg { gap: 20px; margin-bottom: 14px; }
.uplift-figure.lg .from, .uplift-figure.lg .to { font-size: clamp(84px, 7vw, 110px); letter-spacing: -0.045em; }
.uplift-figure.lg .from { color: rgba(255, 255, 255, .5); }
.uplift-figure.lg .arrow { font-size: 44px; }
.score-types-head { font-size: 15px; font-weight: 600; color: rgba(255, 255, 255, .6); margin: 0 0 18px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-4 .dark-card { border-radius: 16px; padding: 26px; }
.grid-4 .dark-card h3 { margin: 0 0 8px; }
.grid-4 .dark-card p { font-size: 14px; line-height: 1.55; color: rgba(255, 255, 255, .68); }
.dark-card.goal { background: rgba(45, 165, 132, .14); border-color: rgba(45, 165, 132, .5); }
.dark-card.goal p { color: rgba(255, 255, 255, .8); }

/* AI Adoption Index visual: the six-axis radar and its legend/caption. */
.score-viz-card {
  background: rgba(255, 255, 255, .04); border: 1.5px solid rgba(255, 255, 255, .1);
  border-radius: 22px; padding: 36px 36px 28px;
}
/* Six-axis radar, per the design handoff. The Index is six dimensions, so the
   shape shows which ones moved rather than only the headline total. */
.score-radar { display: block; width: 100%; max-width: 400px; margin: 0 auto; }
.score-radar text { font-family: Inter, 'Segoe UI', system-ui, -apple-system, sans-serif; }
.radar-axis { font-size: 13px; font-weight: 600; fill: rgba(255, 255, 255, .75); }
.radar-after { fill: rgba(61, 196, 150, .18); stroke: var(--teal-light); stroke-width: 2.5; stroke-linejoin: round; }
.radar-before { fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .65); stroke-width: 2; stroke-dasharray: 5 5; stroke-linejoin: round; }
.score-legend { display: flex; justify-content: center; gap: 18px; flex-wrap: wrap; margin: 18px 0 20px; }
.score-legend-item { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .7); }
.radar-key { flex: none; width: 18px; height: 0; border-top-width: 2px; }
.radar-key--before { border-top-style: dashed; border-top-color: rgba(255, 255, 255, .65); }
.radar-key--after { border-top-style: solid; border-top-color: var(--teal-light); }
.score-viz-cap {
  font-size: 13px; line-height: 1.5; color: rgba(255, 255, 255, .55); margin: 0;
  text-align: center; border-top: 1.5px solid rgba(255, 255, 255, .1); padding-top: 16px;
}
/* The label line under the caption (decision W3): same type, no second rule. */
.score-viz-cap--sub { border-top: 0; padding-top: 6px; }

/* ── The organisation figure over time (Uplift Programme) ──────────────
   The light-ground sibling of .score-viz-card above. Not a variant of it:
   that one sits on navy and reads its colours from white at low alpha, and
   every one of those values inverts here. One set of markup with two themes
   would be a bigger object than two small ones.

   THE BAND IS THE ARGUMENT. A median rising on its own is a sales chart. The
   band narrowing around it is the gap between the strongest and weakest
   people closing, which is what the page claims two sections earlier. So it
   carries a visible stroke rather than fill alone - it has to survive being
   printed, and it must not need colour to be read. */
.trend-card {
  background: #fff; border: 1.5px solid var(--border); border-radius: 22px;
  padding: 32px 34px 24px; margin-top: 44px;
}
.trend-chart { display: block; width: 100%; }
.trend-chart text { font-family: Inter, 'Segoe UI', system-ui, -apple-system, sans-serif; }
.trend-grid line { stroke: var(--border); stroke-width: 1.5; }
.trend-axis text { font-size: 13px; font-weight: 600; fill: var(--muted); }
.trend-xlab text { font-size: 15px; font-weight: 700; fill: var(--navy); }
.trend-band { fill: rgba(45, 165, 132, .16); stroke: rgba(45, 165, 132, .42); stroke-width: 1.5; stroke-linejoin: round; }
.trend-line { fill: none; stroke: var(--teal); stroke-width: 3.5; stroke-linejoin: round; stroke-linecap: round; }
.trend-dot circle { fill: var(--teal); stroke: #fff; stroke-width: 3; }
.trend-legend { display: flex; justify-content: center; gap: 22px; flex-wrap: wrap; margin: 16px 0 18px; }
.trend-legend-item { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--muted); }
.trend-key { flex: none; width: 20px; height: 13px; border-radius: 3px; }
.trend-key--line { height: 0; border-radius: 0; border-top: 3.5px solid var(--teal); }
.trend-key--band { background: rgba(45, 165, 132, .16); border: 1.5px solid rgba(45, 165, 132, .42); }
.trend-cap {
  font-size: 13px; line-height: 1.55; color: var(--muted); margin: 0;
  text-align: center; border-top: 1.5px solid var(--border); padding-top: 16px;
}

/* ── The Loop badge ────────────────────────────────────────────────── */
.loop-badge {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px; border-radius: 50px; background: var(--navy);
  color: #fff; font-size: 14px; font-weight: 700; letter-spacing: .04em; margin-bottom: 20px;
}
.loop-badge span { font-size: 16px; color: var(--teal-light); line-height: 1; }

/* ── The offer ladder ──────────────────────────────────────────────── */
.ladder { display: flex; flex-direction: column; gap: 14px; }
.ladder-row {
  display: grid; grid-template-columns: 64px 1fr auto; gap: 24px; align-items: center;
  background: #fff; border-radius: 16px; padding: 26px 30px; box-shadow: var(--shadow-sm);
  border: 1.5px solid transparent;
}
.ladder-row.featured { border-color: rgba(45, 165, 132, .5); box-shadow: 0 8px 32px rgba(45, 165, 132, .14); }
.ladder-row.dark { background: var(--navy); box-shadow: 0 8px 28px rgba(20, 33, 46, .18); }
.ladder-num { font-size: 36px; font-weight: 800; letter-spacing: -0.03em; color: var(--teal); line-height: 1; }
.ladder-row.dark .ladder-num { color: var(--teal-light); }
.ladder-title { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.ladder-title h3 { margin: 0; }
.ladder-body h3 { font-size: 20px; font-weight: 700; color: var(--navy); margin: 0 0 4px; }
.ladder-row.dark .ladder-body h3 { color: #fff; }
.ladder-body p { font-size: 15px; line-height: 1.55; color: var(--muted); margin: 0; }
.ladder-row.dark .ladder-body p { color: rgba(255, 255, 255, .72); }
.pop-badge { padding: 4px 12px; border-radius: 50px; background: var(--teal-deep); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .05em; }
.ladder-price { flex: none; font-size: 15px; font-weight: 700; color: var(--navy); white-space: nowrap; text-align: right; }
.ladder-row.dark .ladder-price { color: #fff; white-space: normal; max-width: 190px; }
.ladder-cta {
  flex: none; padding: 8px 18px; border-radius: 50px; background: var(--teal-deep); color: #fff;
  font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap; transition: background .2s ease;
}
.ladder-cta:hover { background: var(--teal-hover); }
/* The free conversation's secondary pill: the Index above keeps the solid one. */
.ladder-cta--outline { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); padding: 6.5px 16.5px; }
.ladder-cta--outline:hover { background: var(--navy); color: #fff; }
/* The "more information" link on rows that have a detail page behind them.
   A text link and not a second button: the row already carries a price, and two
   competing affordances in one row makes neither of them read as the next step.

   --teal-deep, which is the token that exists for link text on a pale ground.
   --teal-hover is a hover state or a background, never resting text: it is the
   darker step a --teal-deep fill or link moves to under the pointer. The navy
   row takes --teal-light for the same reason in reverse. */
.ladder-more {
  display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 700;
  color: var(--teal-deep); text-decoration: none; border-bottom: 1.5px solid transparent;
  transition: border-color .2s ease;
}
.ladder-more span { transition: transform .2s ease; display: inline-block; }
.ladder-more:hover { border-bottom-color: currentColor; }
.ladder-more:hover span { transform: translateX(3px); }
.ladder-row.dark .ladder-more { color: var(--teal-light); }

/* ── Leadership session ────────────────────────────────────────────── */
.leadership { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.leadership-price { font-size: 17px; line-height: 1.65; color: var(--muted); margin: 0 0 32px; }
.lead-cards { display: flex; flex-direction: column; gap: 14px; }
.lead-card { border: 1.5px solid var(--border); border-radius: 16px; padding: 26px 28px; background: #fff; }
.lead-card.goal { border-color: rgba(45, 165, 132, .5); background: var(--teal-pale); }
.lead-card h3 { font-size: 18px; font-weight: 700; color: var(--navy); margin: 0 0 6px; }
.lead-card p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0; }
#the-indices .grid-3 > .lead-card,
#ways-to-work .grid-3 > .lead-card { display: flex; flex-direction: column; }
#the-indices .grid-3 > .lead-card > p:last-child,
#ways-to-work .grid-3 > .lead-card > p:last-child { margin-top: auto; padding-top: 12px; }

/* ── Meta chips ────────────────────────────────────────────────────── */
/* The facts that used to sit in a sentence of prose (duration, group size,
   both prices). Static text, not controls - nothing here is clickable, which
   is why these are .meta-chip and not the .chip above: that one is the
   contact form's day/time toggle, a button with a pressed state. */
.meta-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 28px; }
.meta-chip {
  font-size: 13px; font-weight: 600; color: var(--navy);
  border: 1.5px solid var(--border); border-radius: 50px; padding: 7px 14px;
}
.meta-chip--price { background: var(--teal-pale); border-color: var(--teal-pale); }
.bg-navy .meta-chip { color: rgba(255, 255, 255, .85); border-color: rgba(255, 255, 255, .18); }
.bg-navy .meta-chip--price { color: var(--teal-light); background: transparent; border-color: rgba(45, 165, 132, .4); }

/* ── AI Adviser (/adviser.html) ────────────────────────────────────── */
/* The hero keeps .page-header's spacing and type and swaps its off-white for
   the handoff's pale-teal wash, with deeper padding. */
.page-header.page-header--adviser { padding: 76px var(--pad-x) 60px; background: linear-gradient(160deg, var(--teal-pale) 0%, #ffffff 62%); border-bottom: none; }
.page-header--adviser h1 { letter-spacing: -0.025em; line-height: 1.06; max-width: 820px; }
.page-header--adviser .page-lead { font-size: 20px; color: var(--muted-soft); }
.adviser-hero-cta { margin-top: 34px; }
.adviser-stages-h2 { max-width: 760px; margin-bottom: 48px; }

/* Two stacked stage cards: summary and price left, content right. */
.stage-card {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr); gap: 40px;
  border: 1.5px solid var(--border); border-radius: 22px; padding: 40px; background: #fff;
}
.stage-card--featured { border-color: rgba(45, 165, 132, .5); box-shadow: 0 8px 32px rgba(45, 165, 132, .12); }
.stage-side { display: flex; flex-direction: column; }
.stage-pill {
  display: inline-flex; align-self: flex-start; padding: 5px 14px; border-radius: 50px; margin-bottom: 16px;
  background: var(--teal-deep); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}
.stage-pill--soft { background: var(--teal-pale); border: 1.5px solid var(--border-teal); color: var(--teal-deep); }
.stage-card h3 { font-size: 28px; font-weight: 800; letter-spacing: -0.015em; color: var(--navy); margin: 0 0 10px; }
.stage-summary { font-size: 16px; line-height: 1.6; color: var(--muted-soft); margin: 0 0 28px; }
.stage-price { border-top: 1.5px solid var(--border); padding-top: 22px; margin-top: auto; }
.stage-amount { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.stage-amount .val { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; color: var(--navy); }
.stage-amount .vat { font-size: 15px; font-weight: 600; color: var(--muted-soft); }
.stage-amount .list-price { margin-left: 4px; }
.stage-offer { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; font-size: 14px; color: var(--muted-soft); }
.stage-note { font-size: 14px; line-height: 1.5; color: var(--fineprint); margin: 0; }
.stage-steps { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; }
.stage-steps li { display: flex; gap: 16px; align-items: flex-start; }
.stage-num {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--teal-pale); border: 1.5px solid var(--border-teal); color: var(--teal-deep); font-size: 14px; font-weight: 700;
}
.stage-steps h4 { font-size: 16px; font-weight: 700; color: var(--navy); margin: 0 0 3px; }
.stage-steps p { font-size: 15px; line-height: 1.55; color: var(--muted-soft); margin: 0; }
.stage-link { color: var(--teal-deep); font-weight: 600; text-decoration: none; }
.stage-link:hover { color: var(--teal-hover); }
.stage-body { display: flex; flex-direction: column; gap: 22px; }
.stage-label { font-size: 14px; font-weight: 700; color: var(--teal-deep); margin: 0 0 12px; }
.stage-ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.stage-ticks li { display: flex; gap: 12px; font-size: 16px; line-height: 1.5; color: var(--navy); }
.stage-ticks .mk { color: var(--teal); font-weight: 700; flex: none; }
.stage-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.stage-tile { margin: 0; border: 1.5px solid var(--border); border-radius: 14px; padding: 16px 20px; font-size: 15px; line-height: 1.55; color: var(--muted-soft); background: var(--offwhite); }
.stage-connector { display: flex; flex-direction: column; align-items: center; padding: 6px 0; }
.stage-connector-line { width: 2px; height: 26px; background: var(--border-teal); }
.stage-connector-pill { padding: 6px 16px; border-radius: 50px; border: 1.5px solid var(--border-teal); background: var(--teal-pale); color: var(--teal-deep); font-size: 13px; font-weight: 700; }

/* The two teal-pale bands run at the handoff's 72px rather than .cta-band's
   104px: here they sit between full sections, not above the footer alone. */
.cta-band.adviser-band { padding-top: 72px; padding-bottom: 72px; }
.adviser-band .eyebrow { margin-bottom: 14px; }

.adviser-boundary { padding: 64px var(--pad-x); background: var(--navy); }
.adviser-boundary-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 28px 48px; }
.adviser-boundary-pill {
  flex: none; padding: 7px 16px; border-radius: 50px; border: 1.5px solid rgba(255, 255, 255, .2);
  color: var(--teal-light); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.adviser-boundary p { flex: 1 1 520px; font-size: 20px; line-height: 1.55; color: #fff; font-weight: 500; margin: 0; }
.adviser-boundary .soft { color: rgba(255, 255, 255, .65); font-weight: 400; }


/* ── The day as a timeline (team course) ───────────────────────────── */
/* The one section on this page with an order to it, so it is drawn as one:
   time label, a dot on the line, then the card. */
.course-intro { max-width: 640px; }
.course-intro .meta-chips { margin: 24px 0 0; }
.day-timeline { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-top: 56px; }
.day-step { display: flex; flex-direction: column; }
.day-time { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-light); margin: 0 0 10px; }
.day-rule { display: flex; align-items: center; margin: 0 0 16px; }
.day-rule::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; background: var(--teal-light); }
.day-rule::after { content: ""; flex: 1; height: 1.5px; margin-left: 8px; background: rgba(255, 255, 255, .15); }
/* The last line is transparent so the day ends rather than trailing off. */
.day-step:last-child .day-rule::after { background: transparent; }
.day-card {
  flex: 1;
  background: rgba(255, 255, 255, .05);
  border: 1.5px solid rgba(255, 255, 255, .1);
  border-radius: 14px; padding: 24px;
  transition: transform .25s ease, border-color .25s ease;
}
.day-card:hover { border-color: rgba(45, 165, 132, .4); transform: translateY(-4px); }
.day-card h3 { font-size: 17px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.day-card p { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .65); margin: 0; }
.day-card.goal { background: rgba(45, 165, 132, .12); border-color: rgba(45, 165, 132, .4); }
.day-card.goal h3 { color: var(--teal-light); }
.day-card.goal p { color: rgba(255, 255, 255, .72); }
.day-cta { margin-top: 44px; }

/* ── Business Memory: tool-layer tag, process cards, no-pressure strip ─ */
.bm-tag { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; }
.bm-tag-strong { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-light); }
.bm-tag-dot { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .3); }
.bm-tag-soft { font-size: 13px; font-weight: 600; letter-spacing: .04em; color: rgba(255, 255, 255, .55); }
.bm-extra { position: relative; max-width: var(--maxw); margin: 60px auto 0; }
.bm-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 36px; }
.bm-step { border: 1.5px solid rgba(255, 255, 255, .1); border-radius: 16px; padding: 28px; background: rgba(255, 255, 255, .05); }
.bm-step-num { font-size: 14px; font-weight: 800; color: var(--teal-light); margin-bottom: 12px; }
.bm-step h3 { font-size: 18px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.bm-step p { font-size: 15px; line-height: 1.6; color: rgba(255, 255, 255, .7); margin: 0; }
.bm-strip {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  background: rgba(255, 255, 255, .05); border: 1.5px solid rgba(255, 255, 255, .1); border-radius: 18px; padding: 28px 32px;
}
.bm-strip-copy { display: flex; align-items: center; gap: 18px; flex: 1 1 420px; }
.bm-strip-copy .badge { flex: none; padding: 7px 15px; border-radius: 50px; background: var(--teal-deep); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .04em; }
.bm-strip-copy p { font-size: 16px; line-height: 1.5; color: #fff; margin: 0; font-weight: 500; max-width: 600px; }

/* ── Proof (measured uplift + real quote + placeholders) ───────────── */
.proof-top { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-bottom: 24px; align-items: stretch; }
.uplift-proof {
  background: var(--navy); border-radius: 22px; padding: 44px;
  display: flex; flex-direction: column; justify-content: center; box-shadow: 0 16px 48px rgba(20, 33, 46, .18);
}
.uplift-proof-badges { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; flex-wrap: wrap; }
.up-badge { padding: 7px 16px; border-radius: 50px; background: rgba(45, 165, 132, .16); font-size: 12px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--teal-light); }
.up-badge--outline { background: transparent; border: 1.5px solid rgba(255, 255, 255, .2); color: rgba(255, 255, 255, .6); }
.uplift-proof-name { font-size: 17px; font-weight: 700; color: #fff; margin-bottom: 4px; }
.uplift-proof-cap { font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, .65); margin: 0; }
.proof-quote { background: var(--teal-pale); border-radius: 22px; padding: 44px; display: flex; flex-direction: column; }
.proof-quote .stars { font-size: 15px; margin-bottom: 18px; }
.proof-quote .quote { font-size: 22px; line-height: 1.5; font-weight: 600; color: var(--navy); margin: 0 0 28px; flex: 1; }
.proof-quote .testi-foot { border-top-color: var(--border-teal); padding-top: 22px; gap: 16px; }
.proof-quote .avatar { width: 48px; height: 48px; font-size: 16px; background: var(--teal-deep); }
/* Second row of quotes under .proof-top. One column while there is one
   quote; a full-width card is kept readable by capping the line length
   rather than the card. Widen to two columns when a second quote lands. */
.proof-more { display: grid; grid-template-columns: 1fr; gap: 24px; }
.proof-quote--wide .quote { font-size: 20px; max-width: 820px; }
.proof-placeholders { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.placeholder-card { background: #fff; border: 1.5px dashed #cbd5dd; border-radius: 22px; padding: 32px; display: flex; flex-direction: column; }
.placeholder-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.placeholder-head .stars { font-size: 14px; }
.placeholder-badge { padding: 5px 12px; border-radius: 50px; background: #f1f4f6; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: #8a99a5; }
.placeholder-card .quote { font-size: 17px; line-height: 1.6; color: var(--navy); margin: 0 0 22px; flex: 1; }

/* ── Pricing: venue toggle, tier grid, footnote cards ──────────────── */
.pricing-toggle { display: inline-flex; max-width: 100%; padding: 4px; border-radius: 50px; background: #fff; border: 1.5px solid var(--border); margin-bottom: 40px; }
.pt-btn { flex: 1; text-align: center; padding: 11px 26px; border-radius: 50px; font-size: 15px; font-weight: 600; cursor: pointer; background: transparent; color: var(--navy); border: none; font-family: inherit; white-space: nowrap; transition: all .25s ease; }
.pt-btn.is-on { background: var(--navy); color: #fff; }
/* The training page's header row: heading on the left, the venue toggle and
   its note on the right. It wraps, so on narrow screens the toggle drops
   below the heading. */
.pricing-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px 40px; margin-bottom: 36px; }
.pricing-head-copy { max-width: 560px; }
.pricing-venue { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.pricing-venue .pricing-toggle { margin: 0; }
/* The two venue notes share one grid cell and the hidden one keeps its space
   (overriding .is-hidden's display:none here only), so the column is always as
   wide as the longer note and the toggle above it never shifts. */
.venue-note { display: grid; margin: 0; padding-left: 6px; font-size: 13px; color: var(--muted-soft); }
.venue-note > .virtual-note, .venue-note > .travel-note { grid-area: 1 / 1; }
.venue-note > .virtual-note.is-hidden, .venue-note > .travel-note.is-hidden { display: block !important; visibility: hidden; }
/* auto-fit collapses 3 -> 2 -> 1 as the handover asks; min() stops a 250px
   track overflowing the narrowest phones. With the AI Adviser listed there
   are four cards (.price-grid--four): 4 -> 2 -> 1 instead, so a card is
   never left alone on a row. */
.price-grid--tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 20px; align-items: stretch; }
/* 4px less side padding and tighter tracking on the founding chip keep
   "Founding offer · 20% off" on one line in a four-card row at the 1120px
   container (27 September 2026). Narrower, it wraps. */
.price-grid--tiers .price-card { max-width: none; padding-left: 28px; padding-right: 28px; }
.price-grid--tiers .founding-chip { letter-spacing: .04em; }
.price-grid--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .price-grid--four, .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .price-grid--four, .tool-grid { grid-template-columns: 1fr; } }
/* Keep the big price row level across the cards in a row: reserve two
   title lines whatever each title actually wraps to (multi-column only). */
@media (min-width: 881px) {
  .price-grid--tiers .price-card h3 { min-height: 2.5em; }
}
.price-card.dark { background: var(--navy); border-color: var(--navy); box-shadow: 0 16px 48px rgba(20, 33, 46, .2); }
.price-card.dark h3 { color: #fff; }
.price-card.dark .sub { color: rgba(255, 255, 255, .6); }
.price-card.dark .amount .val { color: #fff; }
.price-card.dark .amount .vat { color: rgba(255, 255, 255, .6); }
.price-card.dark .price-desc { color: rgba(255, 255, 255, .55); }
.price-card.dark .btn-book { background: var(--teal-deep); }
.price-card.dark .btn-book:hover { background: var(--teal-hover); }
.price-desc { font-size: 15px; line-height: 1.65; color: var(--muted-soft); margin: 24px 0 28px; flex: 1; }
.price-desc .inline-link { font-weight: 600; }
/* auto-fit so a single note card fills the row rather than sitting half-width */
.price-notes { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 20px; margin-top: 20px; }
.price-note-card { display: flex; align-items: flex-start; gap: 18px; background: #fff; border: 1.5px solid var(--border); border-radius: 14px; padding: 22px 24px; }
/* The businessmemory.co.uk link is unbreakable, so on phones its column is
   allowed to shrink and the link to wrap (overflow-wrap below), rather than
   push the page wider than the viewport as the old badge layout did. */
.price-note-card > div { min-width: 0; }
.price-note-icon { flex: none; display: block; width: 40px; height: 40px; }
.price-note-icon--tile { display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--teal-pale); color: var(--teal); }
.price-note-title { font-size: 15px; font-weight: 700; color: var(--navy); margin: 0 0 4px; }
.price-note-card p { font-size: 15px; line-height: 1.6; color: var(--muted-soft); margin: 0; }
.price-note-card a { color: var(--teal-deep); font-weight: 600; text-decoration: none; overflow-wrap: anywhere; }
.price-note-card a:hover { color: var(--teal-hover); }

/* Gentle hover lift on the new card families (matches the site pattern). */
.uplift-card, .lead-card, .ladder-row, .score-card { transition: transform .2s ease, box-shadow .2s ease; }
.uplift-card:hover, .lead-card:hover, .score-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-card); }
.ladder-row:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); }

/* ── Sub-page header ───────────────────────────────────────────────── */
/* Shorter than the homepage hero: sub-pages get straight to the content. */
.page-header { position: relative; padding: 44px var(--pad-x) 68px; background: var(--offwhite); border-bottom: 1.5px solid var(--border); }
.back-link { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--muted); text-decoration: none; margin-bottom: 30px; }
.back-link:hover { color: var(--teal-deep); }
.page-header h1 { font-size: clamp(38px, 4.2vw, 58px); font-weight: 800; letter-spacing: -0.02em; line-height: 1.08; color: var(--navy); margin: 0 0 18px; max-width: 800px; }
.page-lead { font-size: 19px; line-height: 1.6; color: var(--muted); max-width: 680px; margin: 0; }

/* ── "Not open yet" notice in a page header ────────────────────────── */
/* Teal rather than amber: nothing is wrong, a date is simply not here yet,
   and --amber is reserved for actual caution. The left bar carries the
   weight so the notice reads as a status on the page rather than a banner
   pasted over it. */
.launch-note {
  max-width: 680px; margin: 26px 0 0; padding: 18px 22px;
  background: var(--teal-pale); border-left: 4px solid var(--teal);
  border-radius: 0 12px 12px 0;
}
.launch-note-when {
  margin: 0 0 6px;
  font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--teal-deep);
}
.launch-note-body { margin: 0; font-size: 16px; line-height: 1.6; color: var(--muted); }

/* Inline "read more" link under a section intro. */
/* Sits at the end of the paragraph above, per the handoff, not on its own line.
   No underline in either state, so hover shifts colour instead. */
.inline-link { font-weight: 700; color: var(--teal-deep); text-decoration: none; white-space: nowrap; }
.inline-link:hover { color: var(--teal-hover); }

/* ── Closing CTA band ──────────────────────────────────────────────── */
/* Horizontal band per the handoff: copy left, buttons right, not centred,
   with a smaller heading than a full section. Padding is deeper than the
   handoff's 72px so the strip reads as a section in its own right rather than
   a stripe wedged between the block above and the navy footer. Phones fall
   back to the 64px .section padding below. */
.cta-band { padding: 104px var(--pad-x); }
.cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px; }
.cta-band h2 { font-size: clamp(24px, 2.6vw, 34px); line-height: 1.12; letter-spacing: -0.02em; font-weight: 800; color: var(--navy); margin: 0 0 10px; }
.cta-band p { font-size: 17px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 560px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ── Lab Notes ──────────────────────────────────────────────────────── */
.notes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.article-card {
  display: flex; flex-direction: column; background: #fff;
  border: 1.5px solid var(--border); border-radius: 18px; padding: 28px 26px;
  text-decoration: none; color: inherit; transition: transform .25s ease, box-shadow .25s ease;
}
a.article-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); }
.article-card .kicker { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--teal-deep); margin-bottom: 14px; }
.article-card h3 { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.25; color: var(--navy); margin: 0 0 12px; }
.article-card p { font-size: 15px; line-height: 1.6; color: var(--muted); margin: 0 0 20px; }
.article-card .more { margin-top: auto; font-size: 15px; font-weight: 600; color: var(--teal-deep); }
/* Unwritten articles: dashed and unlinked, so nothing dead ships. */
.article-card.is-soon { background: var(--offwhite); border-style: dashed; }
.article-card.is-soon .kicker { color: var(--fineprint); }
.article-card.is-soon h3 { color: var(--muted); }

/* Written but not due yet. Hidden until ?drafts=true puts .show-drafts on the
   root element, and dashed once shown so a draft never reads as a live note.
   Hidden here rather than in JS so there is no flash of a card that is not
   published, and so the grid is correct with scripting off. */
.article-card.is-draft { display: none; }
.show-drafts .article-card.is-draft { display: flex; border-style: dashed; border-color: var(--teal); }
.show-drafts .article-card.is-draft .kicker { color: var(--teal-deep); }

/* ── Draft banner ──────────────────────────────────────────────────── */
.draft-banner { background: var(--teal-pale); border-bottom: 1.5px dashed var(--teal); padding: 12px 0; }
.draft-banner .container { font-size: 14px; line-height: 1.5; color: var(--navy); }
.draft-banner a { color: var(--teal-deep); }

/* ── Article body ──────────────────────────────────────────────────── */
.article-body { max-width: 760px; margin: 0 auto; }
.article-body h2 { font-size: 28px; font-weight: 800; letter-spacing: -0.02em; color: var(--navy); margin: 46px 0 16px; }
.article-body p, .article-body li { font-size: 17px; line-height: 1.7; color: #33454f; }
.article-body ul { padding-left: 22px; margin: 0 0 20px; }
.article-body li { margin-bottom: 10px; }
.article-body strong { color: var(--navy); }
.article-body a:not(.btn) { color: var(--teal-deep); overflow-wrap: anywhere; }
/* .inline-link never wraps, which suits a three-word "read more" and not an
   article's source list, where the link text is a full citation and pushed the
   page up to 560px wider than a phone. In an article it wraps like the prose. */
.article-body .inline-link { white-space: normal; }
.article-body blockquote { margin: 28px 0; padding: 20px 26px; border-left: 3px solid var(--teal); background: var(--teal-pale); border-radius: 0 14px 14px 0; }
.article-body blockquote p { margin: 0; font-style: italic; color: var(--navy); }

.article-meta { font-size: 14px; font-weight: 600; color: var(--fineprint); margin: 0 0 12px; }

/* Freshness stamp for articles whose facts date: pricing, product features, plan
   names. Sits at the end of the body, above the sign-off, and reads as an aside
   rather than as the argument.

   Scoped under .article-body for the same reason .signoff-disclosure is (see the
   note below it): this is a <p>, so a bare class loses the specificity contest to
   `.article-body p` and the stamp would render at full body size in body ink.
   --muted-soft, not --fineprint, because the reader has to be able to read the
   date to act on it.

   No rule above it on purpose. .article-signoff below already draws a 1.5px
   border-top 52px later, and a second horizontal line this close read as clutter.
   The drop to 14px and grey is enough to mark it as an aside. */
.article-body .article-freshness {
  font-size: 14px; line-height: 1.55; color: var(--muted-soft); margin: 34px 0 0;
}

/* ── Context stack: what the tool sees, and where it comes from ─────
   Your prompt on top, what the tool actually sees below it, and the
   routes context arrives by feeding up from underneath. Built from the
   training deck slide, cut from six feeds to four so it survives the
   760px article column. Teal-deep rather than teal on the top bar: the
   sub-line is small text, and white on --teal only reaches 3.1:1. */
.context-stack { margin: 34px 0 30px; }
.context-stack-cap {
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--teal-deep); text-align: center; margin: 0 0 14px;
}
.ctx-bar { border-radius: 16px; padding: 18px 24px; text-align: center; }
.ctx-bar--you { background: var(--teal-deep); }
.ctx-bar--sees { background: var(--navy); }
.ctx-bar-title { display: block; font-size: 19px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.ctx-bar-sub { display: block; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .78); margin-top: 5px; }
/* Teal is a lighter ground than navy, so the same 78% white drops to 3.7:1
   on it. Near-solid white keeps this sub-line above 4.5:1 at 14px. */
.ctx-bar--you .ctx-bar-sub { color: rgba(255, 255, 255, .95); }

.ctx-down { display: block; width: 22px; height: 30px; margin: 9px auto; }
.ctx-up { display: block; width: 18px; height: 22px; margin: 0 auto 10px; }
.ctx-down path, .ctx-up path {
  fill: none; stroke: var(--navy); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
}

.article-body .ctx-feeds {
  list-style: none; padding: 0; margin: 10px 0 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
}
.article-body .ctx-feed {
  background: var(--teal-pale); border: 1.5px solid var(--border-teal);
  border-radius: 14px; padding: 16px 16px 18px; margin: 0;
}
.ctx-badge {
  display: inline-block; padding: 5px 11px; border-radius: 50px;
  background: var(--navy); color: #fff; white-space: nowrap;
  font-size: 11px; line-height: 1.4; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
}
.ctx-feed h3 { font-size: 16px; line-height: 1.25; font-weight: 800; color: var(--navy); letter-spacing: -0.01em; margin: 10px 0 6px; }
.article-body .ctx-feed p { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 0; }

/* ── The loop: brief, produce, challenge, refine, decide, round again ──
   The post claims the shape is a circle rather than a line, so this is
   drawn as one. Nodes are HTML positioned on the ring rather than SVG
   text, so the words stay real text at a readable size and can drop to
   a stacked list on phones, where a 342px ring would shrink them to
   nine pixels. The SVG carries only the ring and its arrowheads.
   Three of the five nodes are yours: navy against pale is the argument. */
.loop-fig { margin: 34px 0 30px; }
.loop-cap {
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--teal-deep); text-align: center; margin: 0 0 10px;
}
/* A circle in a square box leaves dead bands top and bottom, and uneven
   ones: one node sits at the top of the ring, two sit above its bottom.
   Measured, that is 40px above and 68px below. So the box is cropped to
   the content instead (440x350, the SVG viewBox shifted to match) rather
   than pulled in with negative margins, which collapse into the figure's
   own margin and let the next paragraph ride up into the diagram. */
.loop-ring { position: relative; width: 100%; max-width: 440px; aspect-ratio: 440 / 350; margin: 0 auto; }
.loop-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.loop-svg circle { fill: none; stroke: var(--border-teal); stroke-width: 2; }
.loop-svg path { fill: var(--teal); }

/* Nodes, not steps: .loop-steps and .loop-step are the methodology page's
   rail, and sharing them made the <ol> position:relative (so every node's
   top % resolved against a zero-height list) and gave each a dot. The list
   is stated static so the ring, not the list, stays the containing block. */
.article-body .loop-nodes { list-style: none; padding: 0; margin: 0; position: static; }
.article-body .loop-node {
  position: absolute; transform: translate(-50%, -50%);
  width: 116px; padding: 11px 8px; margin: 0;
  border-radius: 14px; text-align: center;
}
.loop-ring .loop-who {
  display: block; font-size: 10px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; margin-bottom: 2px;
}
.loop-ring .loop-name { display: block; font-size: 16px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.2; }
.loop-ring .loop-node--you { background: var(--navy); }
.loop-ring .loop-node--you .loop-name { color: #fff; }
.loop-ring .loop-node--you .loop-who { color: rgba(255, 255, 255, .72); }
.loop-ring .loop-node--ai { background: var(--teal-pale); border: 1.5px solid var(--border-teal); }
.loop-ring .loop-node--ai .loop-name { color: var(--navy); }
.loop-ring .loop-node--ai .loop-who { color: var(--teal-deep); }

/* Clockwise from the top: 72 degrees apart on a 150px radius, then
   shifted up 32px with the crop above. Percentages are of the 440x350 box. */
.article-body .loop-node:nth-child(1) { left: 50%;     top: 10.86%; }
.article-body .loop-node:nth-child(2) { left: 82.42%;  top: 40.47%; }
.article-body .loop-node:nth-child(3) { left: 70.04%;  top: 88.39%; }
.article-body .loop-node:nth-child(4) { left: 29.96%;  top: 88.39%; }
.article-body .loop-node:nth-child(5) { left: 17.58%;  top: 40.47%; }

.article-body .loop-centre {
  position: absolute; left: 50%; top: 53.71%; transform: translate(-50%, -50%);
  width: 178px; margin: 0; text-align: center;
  font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--muted);
}

/* ── Assembling an assistant: three ingredients, one front door ──────
   The converge is drawn with the curved join from the Business Memory
   page rather than the context stack's straight arrows, so the site's
   two article diagrams do not read as the same piece of furniture. */
.asm-fig { margin: 30px 0 28px; }
.asm-cap {
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--teal-deep); text-align: center; margin: 0 0 14px;
}
.article-body .asm-parts {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.article-body .asm-part {
  background: var(--teal-pale); border: 1.5px solid var(--border-teal);
  border-radius: 14px; padding: 16px 16px 18px; margin: 0;
}
.asm-part h3 { font-size: 15px; line-height: 1.25; font-weight: 800; color: var(--navy); letter-spacing: -0.01em; margin: 0 0 6px; }
.article-body .asm-part p { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 0; }

.asm-join { display: block; width: 100%; height: 72px; }
.asm-join path { fill: none; stroke: var(--border-teal); stroke-width: 2; }
.asm-join polygon { fill: var(--teal); stroke: none; }

.asm-result { background: var(--navy); border-radius: 16px; padding: 18px 24px; text-align: center; }
.asm-result-name { display: block; font-size: 19px; font-weight: 800; color: #fff; letter-spacing: -0.01em; }
.article-body .asm-result p {
  font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .78); margin: 5px 0 0;
}

/* ── Scale stats: a KPI row, because these numbers are not a chart ───
   Ratios of 10,000:1 and 1,000,000:1 put one bar of any pair below a
   pixel, so the numbers carry themselves typographically instead.
   Weight, tracking and line-height follow .uplift-figure, the site's
   existing big-figure treatment. Proportional figures deliberately:
   tabular-nums gives every digit the width of a zero, which reads loose
   at this size. */
.stat-fig { margin: 32px 0 30px; }
.stat-cap {
  font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--teal-deep); text-align: center; margin: 0 0 18px;
}
.article-body .stat-row {
  list-style: none; padding: 0; margin: 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.article-body .stat-item { margin: 0; padding: 16px 4px 0; border-top: 2px solid var(--border-teal); }
.stat-value {
  /* Capped at 42px, not 46: the longest value is 1,000,000, and at 46px it
     cleared its tile by 9px. That is 4%, which a fallback font would eat. */
  display: block; font-size: clamp(32px, 3.9vw, 42px); font-weight: 800;
  letter-spacing: -0.04em; line-height: 1; color: var(--navy);
}
.stat-unit { font-size: .45em; font-weight: 700; letter-spacing: -0.01em; color: var(--teal-deep); margin-left: 5px; }
.article-body .stat-item p { font-size: 13px; line-height: 1.5; color: var(--muted); margin: 10px 0 0; }

/* ── Article sign-off: author byline, then the Index prompt ────────── */
.article-signoff {
  display: flex; align-items: center; gap: 18px;
  margin-top: 52px; padding-top: 32px; border-top: 1.5px solid var(--border);
}
.signoff-photo {
  flex: none; width: 64px; height: 64px; border-radius: 50%;
  object-fit: cover; object-position: top center; border: 2px solid var(--border-teal);
}
.signoff-name { font-size: 16px; font-weight: 700; color: var(--navy); }
.signoff-bio { font-size: 14px; line-height: 1.55; color: var(--muted-soft); margin-top: 2px; }
/* Authorship stamp, carried by every article. It sits ABOVE the sign-off rule,
   as the article's last line, because it is a claim about the piece and not a
   fact about the author. It used to sit under the bio, where it was 14px muted
   grey directly beneath a 14px muted grey bio in the same column, and read as
   the bio's final clause. Same words, wrong subject.

   Never --fineprint: this is a claim about how the piece was made and it has to
   be readable, and that grey measures 2.7:1 on white.

   Scoped under .article-body deliberately. The stamp is a <p>, so the bare class
   loses to `.article-body p` above, which is a class PLUS a type selector and so
   outranks it: the stamp rendered at body size in body ink instead of small and
   grey. .signoff-bio never hit this because it is a <div>. Keep the descendant
   selector, or the size silently reverts.

   The top margin is what separates it from the last paragraph of the argument.
   The sign-off's own 52px margin-top then separates the sign-off from it, so
   the stamp reads as attached to the article rather than floating between. */
.article-body .article-disclosure { font-size: 14px; line-height: 1.55; color: var(--muted-soft); margin: 30px 0 0; }

/* Copy left, buttons right, wrapping to a stack when there is no room. */
.article-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px;
  margin-top: 32px; background: var(--teal-pale);
  border: 1.5px solid rgba(45, 165, 132, .4); border-radius: 22px; padding: 28px 32px;
}
/* No max-width on the copy. This box only ever sits inside .article-body, whose
   693px content box cannot fit a 480px column plus the ~370px of buttons, so a
   cap here did not produce the side-by-side layout the comment above promises -
   it just stopped the copy early, left a ragged gap to its right, and pushed it
   onto an extra line before the buttons wrapped underneath anyway. Uncapped, the
   copy fills the row and the buttons wrap below when they must, while a short
   line still sits beside them. Let the wrap decide, not an arbitrary width. */
/* Scoped under .article-body too: the box sits inside the article column, where
   `.article-body p` here and in refresh.css (18px, 1.8) would otherwise set its
   copy as body text. Two classes and a type selector outrank both. */
.article-cta p, .article-body .article-cta p { font-size: 17px; line-height: 1.55; font-weight: 600; color: var(--navy); margin: 0; }
.article-cta .cta-row { flex: none; gap: 12px; }

/* ── Responsive ────────────────────────────────────────────────────── */
/* The five links fold into the menu below 1120px. The handover says 1024, but
   it pads the bar 24px a side and the site pads it --pad-x (56px); measured,
   the full row needs about 1060px, so 1024 would overflow. Media widths count
   a desktop scrollbar (about 17px), and the rest is headroom for font
   metrics. The hub pill and the CTA stay in the bar; the toggle, first in the
   source so Tab goes from it into the menu, is drawn after them. */
@media (max-width: 1119px) {
  .nav-right { gap: 12px; }
  .nav-actions { margin-left: 0; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: #fff; border-bottom: 1.5px solid var(--border);
    padding: 8px 24px 20px; display: none;
    /* Keep the last link reachable on short screens and at larger text sizes. */
    max-height: calc(100vh - 86px);
    max-height: calc(100dvh - 86px);
    overflow-y: auto;
  }
  .nav-links > a { flex-shrink: 0; }
  .nav-links.open { display: flex; }
  .nav-links a:not(.btn) { padding: 12px 0; }
  .nav-tagline { display: none; }
  .nav-toggle { display: block; order: 1; }
}
/* Below 640px the pill gives its room to the CTA and the menu carries the hub
   as its last item. */
@media (max-width: 639px) {
  .nav-hub { display: none; }
  .nav-links .nav-hub-menu { display: block; }
  .nav-links .nav-index-menu { display: block; }
}
/* Phones: logo, CTA and toggle need 366px at full size, so below 480px they
   tighten to fit a 360px screen. */
@media (max-width: 479px) {
  .nav { padding-top: 14px; padding-bottom: 14px; }
  .nav-bar { gap: 12px; }
  .nav-right { gap: 4px; }
  .nav-brand img { height: 40px; }
  .nav-actions .btn-sm { padding: 9px 16px; font-size: 14px; }
  .nav-toggle { margin-right: -8px; }
}
/* And the oldest small phones, 320px wide, a step tighter again. */
@media (max-width: 359px) {
  .nav-bar { gap: 8px; }
  .nav-brand img { height: 34px; }
  .nav-actions .btn-sm { padding: 8px 12px; font-size: 13px; }
}

/* The day timeline breaks a step earlier than the content grids: four cards
   of body copy get cramped well before the two-column sections do. */
@media (max-width: 1000px) {
  .day-timeline, .score-timeline { grid-template-columns: 1fr 1fr; }
  /* In two rows the line no longer reads as one continuous day, so every
     step gets its own - including the one that terminated it. */
  .day-step:last-child .day-rule::after { background: rgba(255, 255, 255, .15); }
  .score-point:last-child .score-rule::after { background: var(--border); }
}

@media (max-width: 880px) {
  :root { --pad-x: 24px; }
  .section { padding: 64px var(--pad-x); }
  .method { padding: 56px var(--pad-x) 64px; }
  .hero { padding: 64px var(--pad-x) 48px; }
  /* Four feed cards get too narrow to hold a badge and a sentence. */
  .article-body .ctx-feeds { grid-template-columns: repeat(2, 1fr); }

  .grid-3, .sector-grid { grid-template-columns: 1fr; }
  .method-2col, .testi-featured, .problem-grid, .faq-grid, .bm-inner { grid-template-columns: 1fr; gap: 40px; }
  .problem-intro, .faq-intro { position: static; }
  .bm { padding: 64px var(--pad-x); }
  .founder, .contact, .guardrail-grid, .form-2col, .footer-grid { grid-template-columns: 1fr; }
  .founder-photo { height: 420px; max-width: 380px; margin: 0 auto; }
  .quad-card { padding: 22px; min-height: 0; }
  .method { padding: 64px var(--pad-x); }
  .testi-feature { padding: 36px; }
  .testi-feature .quote { font-size: 22px; }
  .btn { min-height: 44px; }

  .page-header { padding: 30px var(--pad-x) 52px; }
  .page-header.page-header--adviser { padding: 30px var(--pad-x) 52px; }
  .notes-grid { grid-template-columns: 1fr; }

  /* Proven-AI-adoption sections */
  .uplift-grid, .grid-4, .bm-steps { grid-template-columns: 1fr 1fr; }
  .score-top, .leadership, .stage-card, .proof-top, .proof-placeholders { grid-template-columns: 1fr; gap: 40px; }
  .day-timeline { margin-top: 40px; }
  .day-cta { margin-top: 32px; }
  /* Stacked, the Loop's headings sit next to a rail rather than a wide
     column, so they come down to the body's scale. */
  .method-steps .loop-step h3 { font-size: 22px; }
  .price-notes { grid-template-columns: 1fr; }
  .uplift-proof, .proof-quote { padding: 36px; }
  .bm-extra { margin-top: 40px; }
  .ladder-row { grid-template-columns: 56px 1fr; align-items: start; }
  .ladder-num { grid-row: 1; }
  .ladder-body { grid-column: 2; }
  .ladder-price, .ladder-cta { grid-column: 2; justify-self: start; text-align: left; white-space: normal; }
  .ladder-row.dark .ladder-price { max-width: none; }
}

@media (max-width: 560px) {
  .stage-card { padding: 28px 22px; }
  .adviser-boundary { padding: 52px var(--pad-x); }
  .adviser-boundary p { font-size: 18px; }
  /* One card per row: two columns of timeline card leave no room for the copy. */
  .day-timeline, .score-timeline { grid-template-columns: 1fr; }
  /* The ring cannot hold five readable labels at this width, so it
     unwinds into the sequence it describes and the centre line becomes
     the closing note it already reads as. */
  /* One number per row: three of these side by side at this width leaves
     each value about a hundred pixels, and 1,000,000 does not fit in it. */
  .article-body .stat-row { grid-template-columns: 1fr; gap: 16px; }
  /* Stacked, the three-way converge has nothing to converge across, so
     it goes and the vertical order carries the assembly instead. */
  .article-body .asm-parts { grid-template-columns: 1fr; }
  .asm-join { display: none; }
  .asm-result { margin-top: 14px; }
  .loop-ring { aspect-ratio: auto; max-width: none; margin: 0 auto; }
  .loop-svg { display: none; }
  .article-body .loop-nodes { display: flex; flex-direction: column; gap: 8px; }
  .article-body .loop-node {
    position: static; transform: none; width: auto;
    display: flex; align-items: baseline; gap: 10px;
    text-align: left; padding: 12px 16px;
  }
  .loop-ring .loop-who { margin-bottom: 0; }
  .article-body .loop-centre {
    position: static; transform: none; width: auto;
    margin: 14px auto 0; max-width: 300px;
  }
  /* Single column, and the up-arrows go: stacked, each one points at the
     card above rather than at the bar, which reads as a chain not a feed.
     The bar's own sub-line carries the relationship instead. */
  .article-body .ctx-feeds { grid-template-columns: 1fr; }
  .ctx-up { display: none; }
  .article-body .ctx-feed { padding: 15px 18px 17px; }
  .agenda-card { padding: 8px 22px; }
  /* Phones: the chart scales with its viewBox, so only the card's own padding
     needs to give. The legend stacks rather than wrapping mid-label - the
     second one is long enough to break across two lines beside a swatch. */
  .trend-card { padding: 22px 18px 18px; border-radius: 18px; }
  .trend-legend { flex-direction: column; align-items: flex-start; gap: 10px; }
  /* The SVG scales with its viewBox, so every label shrinks with the phone:
     640 units drawn into roughly 390px is a 0.6 factor, which takes the axis
     down to about 8px. These sizes are viewBox units, not screen pixels, so
     raising them here lands each one back around 11-12px rendered. Nothing
     about the geometry changes - only the type. */
  .trend-axis text { font-size: 18px; }
  .trend-xlab text { font-size: 21px; }
  /* phones: stack the hero CTAs full-width for easy tapping */
  .hero-ctas, .cta-row { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn, .cta-row .btn { width: 100%; justify-content: center; }
  .article-body h2 { font-size: 24px; }
  .article-body p, .article-body li { font-size: 16px; }
  .founder-photo { max-width: none; height: 360px; }
  /* phones: stack the callout badge above its text instead of a skinny column */
  .callout { flex-direction: column; align-items: flex-start; gap: 14px; }


  /* Proven-AI-adoption sections: single column on phones */
  .uplift-grid, .grid-4, .bm-steps { grid-template-columns: 1fr; }
  .uplift-figure.lg .from, .uplift-figure.lg .to { font-size: 64px; }
  .uplift-figure.lg .arrow { font-size: 30px; }
  .bm-strip { flex-direction: column; align-items: flex-start; }
  /* In a column the 420px flex-basis would become HEIGHT and blow the card
     open - reset it so the copy block hugs its content. */
  .bm-strip-copy { flex-direction: column; align-items: flex-start; gap: 12px; flex: 0 1 auto; }
  .proof-quote .quote { font-size: 19px; }
  .placeholder-head { flex-direction: column; align-items: flex-start; gap: 8px; }
}

/* ── Cookie consent banner ──────────────────────────────────────── */
/* IN THE NORMAL FLOW, at the top of the page after the skip link, not fixed
   to the bottom of the screen. The fixed version covered the footer and the
   legal line on a phone, and a fixed bar can hide whatever holds keyboard
   focus (WCAG 2.2, 2.4.11). In flow it pushes the page down while it asks and
   takes its space back when answered. The Index pages carry a copy of these
   rules in aiprofile/brand.css, since they do not load this file. */
.cookie-consent {
  background: #14212E;
  color: #E8ECEF;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.cookie-consent[hidden] { display: none; }
.cookie-consent-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
}
.cookie-consent-text { margin: 0; flex: 1 1 320px; font-size: 14px; line-height: 1.55; }
.cookie-consent-text a { color: #7FD1B9; }
.cookie-consent-actions { display: flex; gap: 10px; flex: 0 0 auto; }
.cookie-consent .c-btn {
  font: 600 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  padding: 10px 18px;
  border-radius: 7px;
  border: 1.5px solid transparent;
  cursor: pointer;
}
.cookie-consent .c-accept { background: var(--teal-deep); color: #fff; }
.cookie-consent .c-accept:hover { background: var(--teal-hover); }
.cookie-consent .c-reject { background: transparent; color: #E8ECEF; border-color: rgba(255, 255, 255, .35); }
.cookie-consent .c-reject:hover { border-color: rgba(255, 255, 255, .6); }
@media (max-width: 480px) {
  .cookie-consent-inner { padding: 12px 16px; }
  .cookie-consent-actions { width: 100%; }
  .cookie-consent .c-btn { flex: 1; }
}
/* "Cookie settings" in the footer reopens the banner. A button, since it does
   something rather than going somewhere, dressed as the links beside it. */
.cookie-settings-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: rgba(255, 255, 255, .6);
}
.cookie-settings-btn:hover { color: var(--teal-light); text-decoration: underline; }


#memory .bm-title .accent { color: var(--teal-light); }

/* Homepage review: client testimonials, scoped to this section. */
#proof .client-stories { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; align-items: stretch; }
#proof .client-story { display: flex; flex-direction: column; min-width: 0; padding: 32px; background: #fff; border: 1px solid var(--border); border-top: 3px solid var(--teal); border-radius: 16px; }
#proof .client-story .quote { color: var(--navy); font-size: 18px; line-height: 1.7; margin: 0 0 28px; }
#proof .client-story .stars { color: var(--teal-deep); margin-bottom: 20px; }
#proof .client-story .testi-foot { margin-top: auto; }
#proof .client-baseline { margin-top: 24px; padding: 20px; background: var(--teal-pale); border-radius: 10px; }
#proof .client-baseline-value { display: flex; align-items: center; justify-content: space-between; gap: 16px; color: var(--navy); }
#proof .client-baseline-value span { font-size: 14px; font-weight: 600; }
#proof .client-baseline-value strong { font-size: 32px; line-height: 1.1; }
#proof .client-baseline p { margin: 10px 0 0; font-size: 13px; line-height: 1.6; color: var(--muted); }
@media (max-width: 760px) { #proof .client-stories { grid-template-columns: 1fr; } #proof .client-story { padding: 24px; } }

#proof .client-feedback-rating { margin: 0 0 20px; color: var(--teal-deep); font-size: 14px; line-height: 1.5; font-weight: 600; }

#proof .pilot-stars { display: flex; align-items: center; gap: 0; width: fit-content; margin-bottom: 8px; }

#proof .pilot-half-star-icon { width: 1em; height: 1em; display: block; flex: none; color: var(--teal-deep); }

#proof .client-feedback-rating { margin-bottom: 4px; }
#proof .client-feedback-note { margin: 0 0 20px; color: var(--muted); font-size: 13px; line-height: 1.5; }

#proof .client-feedback-header { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 20px; }
#proof .client-feedback-header .pilot-stars { margin: 0; }
#proof .client-feedback-header .client-feedback-rating { margin: 0; }

.hero .hero-proof { margin: 22px 0 0; color: var(--muted); font-size: 14px; line-height: 1.6; font-weight: 500; }

/* Personal Index opening: explicit rhythm after base page-lead reset. */
.personal-index-header .personal-index-free { margin-top: 20px; }
.personal-index-header .personal-index-actions { margin: 28px 0 0; }
.personal-index-header .personal-index-note { margin-top: 18px; font-size: 15px; line-height: 1.6; }
.personal-index-header .personal-index-invitation { margin-top: 24px; }

/* Keep paid training-page prices and VAT together within narrow cards. */
#pricing .price-card .amount:has(.price-current) { container-type: inline-size; }
#pricing .price-current { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; flex-wrap: nowrap; }
#pricing .price-current .val { font-size: clamp(28px, 21cqi, 48px); }
#pricing .price-current .vat { font-size: clamp(11px, 6cqi, 14px); }
#pricing .price-current + .list-price { flex-basis: 100%; }

/* Align methodology card links within each responsive grid row. */
#methodology .uplift-grid > .uplift-card { display: flex; flex-direction: column; }
#methodology .uplift-card .methodology-card-link { margin-top: auto; padding-top: 18px; }

/* Homepage problem summary: compact rows, scoped to this section. */
#problem .problem-summary { margin: 0; max-width: 44ch; font-size: 19px; line-height: 1.6; color: rgba(255,255,255,.85); }
#problem .problem-rows { list-style: none; margin: 0; padding: 0; }
#problem .problem-rows li { padding: 20px 0; border-bottom: 1px solid rgba(255,255,255,.2); }
#problem .problem-rows li:first-child { padding-top: 0; }
#problem .problem-rows li:last-child { padding-bottom: 0; border-bottom: 0; }
#problem .problem-rows h3 { margin: 0 0 6px; font-size: 19px; line-height: 1.4; font-weight: 700; color: #fff; }
#problem .problem-rows p { margin: 0; font-size: 17px; line-height: 1.5; color: rgba(255,255,255,.85); }

/* Homepage: direct introduction to indices and independent offers. */
#score .score-overview { max-width: 960px; margin-bottom: 36px; }
#score .score-overview .lead { max-width: 76ch; }
#ladder[data-unnumbered-offers] .ladder-row { grid-template-columns: minmax(0, 1fr) auto; }
#ladder[data-unnumbered-offers] .ladder-body { grid-column: 1; }
@media (max-width: 900px) {
  #ladder[data-unnumbered-offers] .ladder-row { grid-template-columns: minmax(0, 1fr); }
  #ladder[data-unnumbered-offers] .ladder-price,
  #ladder[data-unnumbered-offers] .ladder-cta { grid-column: 1; justify-self: start; text-align: left; white-space: normal; }
}

/* Soft-launch reflow: the longer approved CTA needs its own row on phones. */
.mt-24 { margin-top: 24px; }
@media (max-width: 639px) {
  .nav-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto; }
  .nav-right { display: contents; }
  .nav-toggle { grid-column: 2; grid-row: 1; margin-right: 0; min-width: 44px; min-height: 44px; }
  .nav-actions { grid-column: 1 / -1; min-width: 0; }
  .nav-actions .btn { width: 100%; white-space: normal; text-align: center; }
}
.lead-card, .lead-card > *, .personal-index-header .inline-link { min-width: 0; overflow-wrap: anywhere; }

/* Long, descriptive index links must reflow with user text spacing. */
.inline-link { white-space: normal; overflow-wrap: anywhere; }

/* Mobile header keeps the logo and menu; the page retains its main CTA. */
@media (max-width: 639px) {
  .nav-actions { display: none; }
}