/*
  Consumer Talent Forum: brand tokens
  Version 1.0, 13 October 2026

  From the CTF brand pack (August 2026) and the membership brochure (6 October 2026):
  Anton for headlines (uppercase, tight leading), DM Sans for everything else,
  the logo navy and amber, with pink and cyan as the brochure's supporting accents.
  Load this file first. It sets custom properties only and styles nothing itself.
*/

@font-face { font-family: "Anton"; src: url("/brand/fonts/anton-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/brand/fonts/dmsans-400.woff") format("woff"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/brand/fonts/dmsans-400-italic.woff") format("woff"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/brand/fonts/dmsans-500.woff") format("woff"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "DM Sans"; src: url("/brand/fonts/dmsans-700.woff") format("woff"); font-weight: 700; font-style: normal; font-display: swap; }

:root {
  /* ---------- Colour: the palette ---------- */
  --ctf-navy: #272938;        /* the logo navy: dark surfaces, headings and text on light */
  --ctf-navy-deep: #1E2030;   /* hover on navy, the announcement bar's text */
  --ctf-navy-soft: #2E3245;   /* panels and circles on navy (brochure cover) */
  --ctf-navy-line: #3A3E54;   /* borders on navy */
  --ctf-amber: #FFA947;       /* the logo full stop: the primary button on navy, accents */
  --ctf-amber-deep: #F9A031;  /* amber hover */
  --ctf-pink: #EE3165;        /* brochure accent: headline words and the full stop on light */
  --ctf-pink-deep: #C8174A;   /* pink as text on white (AA) and errors */
  --ctf-pink-tint: #FDE6EC;
  --ctf-cyan: #68CDEE;        /* brochure accent */
  --ctf-cyan-tint: #E3F5FC;
  --ctf-amber-tint: #FFF1E0;
  --ctf-slate: #5A5D6B;       /* secondary text on light (6.4:1 on white) */
  --ctf-mist: #F3F4F7;        /* light section background */
  --ctf-line: #E1E3EA;        /* borders on light */
  --ctf-white: #FFFFFF;
  --ctf-soft-on-navy: #C9CBD6;/* body text on navy (8.9:1) */

  /* ---------- Colour: roles ---------- */
  --color-bg: var(--ctf-white);
  --color-surface: var(--ctf-white);
  --color-text: var(--ctf-navy);
  --color-text-muted: var(--ctf-slate);
  --color-heading: var(--ctf-navy);
  --color-primary: var(--ctf-navy);
  --color-accent: var(--ctf-pink);
  --color-border: var(--ctf-line);
  --color-focus: var(--ctf-navy);
  --color-error: var(--ctf-pink-deep);

  /* ---------- Type ---------- */
  --font-display: "Anton", "Impact", "Arial Narrow", sans-serif;
  --font-sans: "DM Sans", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --fs-hero: clamp(3rem, 1.6rem + 4.4vw, 5.75rem);         /* 48px to 92px: the home hero */
  --fs-display: clamp(2.625rem, 1.7rem + 3.6vw, 5.25rem);  /* 42px to 84px: inner heroes */
  --fs-h1: clamp(2.25rem, 1.55rem + 2.5vw, 4rem);          /* 36px to 64px: section headings */
  --fs-h2: clamp(1.625rem, 1.3rem + 1.1vw, 2.25rem);       /* 26px to 36px */
  --fs-h3: clamp(1.5rem, 1.3rem + 0.55vw, 1.75rem);        /* 24px to 28px: card titles in Anton (pink accents stay large text) */
  --fs-h4: 1.125rem;                                       /* 18px: DM Sans bold subheads, questions */
  --fs-body-lg: clamp(1.125rem, 1.05rem + 0.3vw, 1.3125rem);/* 18px to 21px: ledes */
  --fs-body: 1.0625rem;                                    /* 17px */
  --fs-small: 0.9375rem;                                   /* 15px */
  --fs-label: 0.8125rem;                                   /* 13px uppercase labels */

  --lh-display: 0.94;   /* "tight vertical line spacing" (brand pack) */
  --lh-heading: 1;
  --lh-body: 1.6;
  --ls-display: 0.005em;
  --ls-label: 0.14em;

  /* ---------- Spacing (Website Build Playbook, section 6) ---------- */
  --sec-pad: clamp(40px, 4.2vw, 64px);   /* the ONE section spacing unit */
  --space-1: 8px;
  --space-2: 14px;
  --space-3: 20px;
  --space-4: 28px;
  --space-5: 40px;
  --gap-cards: 20px;
  --gap-panels: 16px;
  --hero-strip-gap: 28px;
  --content-max: 1240px;
  --side-pad: clamp(20px, 5vw, 72px);

  /* ---------- Shape ---------- */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 28px;
  --radius-band: 36px;
  --radius-pill: 999px;
  --border: 1px solid var(--color-border);
  --focus-ring: 0 0 0 3px var(--ctf-white), 0 0 0 5px var(--ctf-navy);
  --focus-ring-dark: 0 0 0 3px var(--ctf-navy), 0 0 0 5px var(--ctf-amber);

  /* ---------- Redesign additions (14 October 2026) ---------- */
  /* Motion (the reference's timing) */
  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur-fast: 150ms;
  --dur: 300ms;
  --dur-slow: 500ms;
  --dur-header: 400ms;

  /* Layout */
  --content-narrow: 1080px;   /* centred inset for text-led grids inside the 1240 wrap */
  --spine: 64px;              /* a collapsed feature-stack panel */

  /* Surfaces and lines */
  --surface-raised: var(--ctf-navy-soft);   /* raised on navy: quote panel, quote cards, fact panels */
  --ctf-line-strong: #858899;               /* borders that must be seen: 3.51:1 on white, 3.19:1 on mist */

  /* Type additions */
  --fs-hero-lede: clamp(1.125rem, 1rem + .6vw, 1.5rem);    /* 18px to 24px: hero ledes */
  --fs-panel: clamp(2rem, 1.5rem + 1.6vw, 3.25rem);        /* 32px to 52px: stack and feature-panel headings */
  --fs-stat: clamp(3.5rem, 2.6rem + 3vw, 5.5rem);          /* 56px to 88px: big figures */
  --fs-quote: clamp(1.25rem, 1.05rem + .8vw, 1.625rem);    /* 20px to 26px: the quote panel */
  --fs-prose: clamp(1.0625rem, 1rem + .3vw, 1.1875rem);    /* 17px to 19px: article and legal text */

  /* Radius roles (a nested radius is always smaller than its parent's) */
  --radius-panel: var(--radius-band);                       /* 36: the feature stack */
  --radius-card: var(--radius-xl);                          /* 28: cards, panels, sign-up, quote panel */
  --radius-inner: calc(var(--radius-xl) - var(--space-2));  /* 14: images inside 14px-padded cards */

  /* Shadows (navy-tinted; only on things that overlap) */
  --shadow-header: 0 4px 10px rgba(30, 32, 48, .28);
  --shadow-panel-active: 0 0 40px 15px rgba(30, 32, 48, .35);
  --shadow-panel-left: -25px 0 20px -5px rgba(30, 32, 48, .3);
  --shadow-panel-right: 25px 0 20px -5px rgba(30, 32, 48, .3);

  /* Shape: the CTF speech-bubble silhouette, from the logo's own path (tools/logos.py) */
  --shape-bubble: url("/brand/img/shapes/ctf-bubble.svg");
}


/*
  Consumer Talent Forum: site stylesheet
  Version 1.0, 13 October 2026

  The brand tokens (brand/tokens/brand.css) are prepended at build time.
  Look: the CTF brand pack and the October 2026 membership brochure. Navy
  surfaces, Anton headlines in capitals with tight leading, accent words in
  pink (on light) or amber (on navy), the square full stop, speech bubbles,
  and the brochure's pink, cyan, amber and navy blocks.
  Section spacing comes from ONE variable, --sec-pad, in the rhythm block at
  the end. Never add spacing to an individual section.
*/

:root {
  --header-h: 72px;
  --pink-card: #D81E55;            /* pink behind white body text: 4.95:1 (the brochure pink is 3.99:1) */
  --shadow-soft: 0 12px 30px -18px rgba(39, 41, 56, 0.35);
  --shadow-lift: 0 30px 60px -30px rgba(39, 41, 56, 0.45);
  --shadow-deep: 0 40px 80px -30px rgba(10, 12, 24, 0.6);
}

/* ---------- Reset and base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }
body {
  margin: 0; font-family: var(--font-sans); font-size: var(--fs-body); line-height: var(--lh-body);
  color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; text-wrap: pretty; overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--ctf-pink-deep); text-decoration: underline; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--ctf-navy); }
button { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -200px; z-index: 100; padding: 10px 16px; background: var(--ctf-white); color: var(--ctf-navy); border-radius: var(--radius-md); font-weight: 700; }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
::selection { background: var(--ctf-amber); color: var(--ctf-navy); }
.muted { color: var(--color-text-muted); }
.small { font-size: var(--fs-small); line-height: 1.5; }

/* ---------- Type ---------- */
.headline, h1, h2, h3 { color: var(--color-heading); text-wrap: balance; overflow-wrap: break-word; }
.headline, .h3 {
  font-family: var(--font-display); font-weight: 400; text-transform: uppercase;
  line-height: var(--lh-display); letter-spacing: var(--ls-display);
}
.hero-size, .headline.hero { font-size: var(--fs-hero); }
/* The headline size class shares its name with the section class: keep the section's padding, fill and clip off the headline
   (they were the home hero's phantom space: the box is now exactly its lines) */
.headline.hero { padding: 0; background: none; position: static; overflow: visible; }
.display { font-size: var(--fs-display); }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); line-height: 1; }
.h4 { font-family: var(--font-sans); font-size: var(--fs-h4); font-weight: 700; line-height: 1.3; letter-spacing: -0.005em; text-transform: none; }
:where(.headline, .h3) .accent { color: var(--ctf-pink); }
.dot { color: var(--ctf-pink); }
.lede { font-size: var(--fs-body-lg); line-height: 1.55; color: var(--color-text-muted); max-width: 58ch; }
p { max-width: 68ch; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase;
  color: var(--ctf-pink-deep); line-height: 1.25; white-space: nowrap;
}
.eyebrow::before { content: ""; width: 8px; height: 8px; background: var(--ctf-pink); flex-shrink: 0; }

/* Dark surfaces: amber accents, white headings, soft body text.
   Each rule keyed on a dark container carries one class of specificity (the target sits in :where()),
   so any later component rule wins: light cards and white form cards inside a dark container keep
   their own colours. Order matters within the block (p, then headings, then accents and eyebrows).
   All component CSS stays after this block. */
.hero, .stage, .signup, .cta-band, .site-footer, .library-box, .not-box, .tone-card--navy, .quote-panel { color: var(--ctf-soft-on-navy); }
:is(.hero, .stage, .signup, .cta-band, .library-box, .quote-panel) :where(p, li, .lede) { color: var(--ctf-soft-on-navy); }
:is(.hero, .stage, .signup, .cta-band, .library-box, .quote-panel, .site-header, .site-footer) :where(.headline, h1, h2, h3, h4) { color: var(--ctf-white); }
:is(.hero, .stage, .signup, .cta-band, .library-box, .quote-panel, .site-header, .site-footer) :where(.accent, .dot, .eyebrow) { color: var(--ctf-amber); }
:is(.hero, .stage, .signup, .cta-band, .library-box, .quote-panel, .site-header, .site-footer) :where(.eyebrow)::before { background: var(--ctf-amber); }
:is(.hero, .stage, .signup, .cta-band, .library-box, .quote-panel, .site-footer) :where(a:not(.btn)) { color: var(--ctf-white); }
:is(.hero, .stage, .signup, .cta-band, .library-box, .quote-panel, .site-footer) :where(a:not(.btn)):hover { color: var(--ctf-amber); }
:is(.hero, .stage, .signup, .cta-band, .library-box, .quote-panel, .site-header, .site-footer) :where(:focus-visible) { box-shadow: var(--focus-ring-dark); }
/* White cards inside a dark container are light surfaces again */
.signup__form, .form-card { color: var(--ctf-navy); }
:is(.signup__form, .form-card) :where(p, li) { color: inherit; }
:is(.signup__form, .form-card) :where(.muted, .lede) { color: var(--color-text-muted); }
:is(.signup__form, .form-card) :where(a:not(.btn)):hover { color: var(--ctf-navy); }
.signup__form :focus-visible { box-shadow: var(--focus-ring); }
.stack__panel--pink :where(:focus-visible) { box-shadow: 0 0 0 3px var(--ctf-navy), 0 0 0 5px var(--ctf-white); }
.on-dark { color: var(--ctf-soft-on-navy); }

/* A visible placeholder for anything promised but not supplied (a pin) */
.pin-box { border: 1.5px dashed var(--ctf-amber); border-radius: var(--radius-md); padding: 12px 16px; font-size: var(--fs-small); color: var(--ctf-amber); font-weight: 700; max-width: none; }
.pin { background: var(--ctf-amber-tint); border: 1px dashed var(--ctf-amber-deep); border-radius: 6px; padding: 0 6px; }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: calc(var(--content-max) + 2 * var(--side-pad)); margin-inline: auto; padding-inline: var(--side-pad); }
.wrap.narrow > * { max-width: 820px; margin-inline: auto; }
.is-narrow { width: 100%; max-width: var(--content-narrow); margin-inline: auto; }
.sec > .wrap, .band > .wrap, .stage > .wrap, .form-section > .wrap { display: flex; flex-direction: column; gap: var(--space-5); }
.band--mist { background: var(--ctf-mist); }
.stage { background: var(--ctf-navy); position: relative; overflow: hidden; }
.stage::before { /* a big speech bubble edge in the corner, as on the brand banners: the logo's own silhouette */
  content: ""; position: absolute; right: -180px; bottom: -260px; width: 560px; height: 560px; max-width: 100%;
  background: var(--ctf-navy-soft); pointer-events: none;
  -webkit-mask: var(--shape-bubble) center / contain no-repeat; mask: var(--shape-bubble) center / contain no-repeat;
}
.stage > .wrap { position: relative; }
/* Stages whose raised navy-soft panels, pills or the feature stack reach the corner keep a plain field
   (the same-coloured bubble would merge with them) */
.stage:has(.stack, .quotes, .quote-panel, .facts--panels, .not-box, .pills, .fit)::before { display: none; }

/* Internal scale (playbook 6.4): label to heading 14, heading to lede 20, lede to content 40, content to button 28 */
.sec-head { display: grid; gap: var(--space-2); justify-items: start; }
.sec-head .lede { margin-top: 6px; }
.sec-head .headline { max-width: 20ch; }
.sec-head.centred { text-align: center; justify-items: center; margin-inline: auto; max-width: 820px; width: 100%; }
.sec-head.centred .headline { max-width: none; }
.sec-head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3) var(--space-5); flex-wrap: wrap; }
.narrow-split { display: grid !important; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: var(--space-5) 64px !important; align-items: start; }

.arrow-link { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; color: var(--ctf-navy); border-bottom: 2px solid var(--ctf-pink); padding-bottom: 3px; width: fit-content; }
.arrow-link:hover { color: var(--ctf-pink-deep); }
.arrow-link .icon { transition: transform 0.15s ease; }
.arrow-link:hover .icon { transform: translateX(3px); }
:is(.hero, .stage, .signup, .cta-band, .library-box, .quote-panel) :where(.arrow-link) { border-color: var(--ctf-amber); color: var(--ctf-white); }
:is(.hero, .stage, .signup, .cta-band, .library-box, .quote-panel) :where(.arrow-link):hover { color: var(--ctf-amber); }

/* ---------- Announcement bar ---------- */
.announce { background: var(--ctf-amber); color: var(--ctf-navy); font-size: 14.5px; font-weight: 500; text-align: center; padding: 9px var(--side-pad); }
.announce p { max-width: none; }
.announce a { color: var(--ctf-navy); font-weight: 700; display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; white-space: nowrap; }
.announce a .icon { transition: transform 0.15s ease; }
.announce a:hover { color: var(--ctf-navy-deep); }
.announce a:hover .icon { transform: translateX(3px); }

/* ---------- Header: sticky; site.js hides it on the way down, back on the way up ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--ctf-navy); border-bottom: 1px solid var(--ctf-navy-line);
  transition: transform var(--dur-header) var(--ease), box-shadow var(--dur) var(--ease); }
.site-header.is-stuck { box-shadow: var(--shadow-header); border-bottom-color: transparent; }
.site-header.is-hidden { transform: translateY(-100%); }   /* resting transform is none: the header never contains the fixed sheet */
.site-header__bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; column-gap: 20px; height: var(--header-h); }
.site-logo { display: inline-flex; }
.site-logo img { width: auto; height: 30px; }
.site-nav { justify-self: center; display: flex; align-items: center; }
.site-nav > ul { display: flex; gap: 4px; }
.site-nav > ul a {
  display: inline-block; position: relative; padding: 10px 12px; color: var(--ctf-white); font-weight: 500; font-size: 16px;
  text-decoration: none; white-space: nowrap; border-radius: 8px; transition: color var(--dur) var(--ease);
}
.site-nav > ul a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; background: var(--ctf-amber);
  transform-origin: left; animation: grow-x var(--dur-slow) var(--ease) both; }
@keyframes grow-x { from { transform: scaleX(0); } }
@media (hover: hover) { .site-nav > ul a:hover { color: var(--ctf-amber); } }
.site-nav__actions { display: none; }
.site-header__actions { grid-column: 3; display: flex; align-items: center; gap: 10px; }
.site-login { display: inline-flex; align-items: center; gap: 8px; color: var(--ctf-white); font-weight: 500; font-size: 15px; text-decoration: none; padding: 10px 12px; border-radius: var(--radius-pill); white-space: nowrap; }
.site-login:hover { color: var(--ctf-amber); }
.site-login .icon { color: var(--ctf-amber); }
.nav-toggle {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer;
  background: transparent; border: 1.5px solid var(--ctf-navy-line); border-radius: 50%; color: var(--ctf-white);
}
.nav-toggle .nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* ---------- Buttons: pills with a nudging arrow ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 13px 26px; font-family: var(--font-sans);
  font-weight: 700; font-size: 16px; line-height: 1.2; text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 2px solid transparent; border-radius: var(--radius-pill);
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn .arr { transition: transform var(--dur) var(--ease); flex-shrink: 0; }
.btn--primary { background: var(--ctf-navy); color: var(--ctf-white); border-color: var(--ctf-navy); }
.btn--amber { background: var(--ctf-amber); color: var(--ctf-navy); border-color: var(--ctf-amber); }
.btn--ghost { background: transparent; color: var(--ctf-navy); border-color: var(--ctf-navy); }
.btn--ghost-light { background: transparent; color: var(--ctf-white); border-color: rgba(255, 255, 255, 0.55); }
.btn--white { background: var(--ctf-white); color: var(--ctf-navy); border-color: var(--ctf-white); }
/* Hover colours stay outside a (hover: hover) query on purpose: on touch screens the global a:hover
   would otherwise colour a tapped button's label. Only the arrow nudge is hover-device only. */
.btn--primary:hover { background: var(--ctf-navy-deep); border-color: var(--ctf-navy-deep); color: var(--ctf-white); }
.btn--amber:hover { background: var(--ctf-amber-deep); border-color: var(--ctf-amber-deep); color: var(--ctf-navy); }
.btn--ghost:hover { background: var(--ctf-navy); color: var(--ctf-white); }
.btn--ghost-light:hover { background: var(--ctf-white); color: var(--ctf-navy); border-color: var(--ctf-white); }
.btn--white:hover { background: var(--ctf-mist); color: var(--ctf-navy); border-color: var(--ctf-mist); }
@media (hover: hover) { .btn:hover .arr { transform: translateX(4px); } }
.btn--lg { min-height: 56px; padding: 15px 30px; font-size: 17px; }
.btn--sm { min-height: 44px; padding: 10px 20px; font-size: 15px; }
.btn--block { width: 100%; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }
.linklike { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }

/* ---------- Heroes ---------- */
.hero { background: var(--ctf-navy); position: relative; overflow: hidden; }
.hero > .wrap { position: relative; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: var(--space-5) 56px; align-items: center; }
/* Hero text breathes more than a section head: label to headline 20, headline to lede 28, lede to buttons 32 */
.hero__text { display: grid; gap: var(--space-3); align-content: center; justify-items: start; }
.hero__text .lede { margin-top: 8px; }
/* A headline that ends a hero (Insights topic and tag pages) keeps its full stop's font box inside its own box:
   Anton's box is 1.5em against a 0.94 line height, so 0.28em hangs below the last line */
.hero__text > .headline:last-child:has(> .dot:last-child) { padding-bottom: 0.28em; }
.hero .lede { font-size: var(--fs-hero-lede); line-height: 1.5; max-width: 52ch; }
@media (min-width: 1024px) { .hero--inner .hero__grid { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); } }
.hero__text .cta-row { margin-top: 12px; }
.hero--home .headline { max-width: 20ch; font-size: min(var(--fs-hero), 4.5rem); }
.hero--inner .headline { max-width: 18ch; }
.hero__offer { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 700; color: var(--ctf-white); max-width: none; }
.hero__offer .icon { flex-shrink: 0; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--ctf-amber); color: var(--ctf-navy); }
.hero__offer--plain { color: var(--ctf-soft-on-navy); font-weight: 500; }
.hero__media { position: relative; min-width: 0; display: grid; justify-items: center; align-content: center; }
.hero__bubble img { width: min(360px, 100%); height: auto; opacity: 0.95; }
.hero__bubble--powered img { width: min(420px, 100%); }
.offer-badge { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; color: var(--ctf-white); font-weight: 500; max-width: 46ch; }
.offer-badge span { background: var(--ctf-amber); color: var(--ctf-navy); font-weight: 700; font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius-pill); }

/* Member questions floating beside the home hero (hero_questions) */
.sp-bubble {
  position: absolute; z-index: 2; max-width: 230px; background: var(--ctf-white); color: var(--ctf-navy); font-size: 14.5px; font-weight: 700; line-height: 1.35;
  padding: 14px 18px; border-radius: 22px; box-shadow: var(--shadow-deep); animation: bob 6s ease-in-out infinite;
}
.sp-bubble::after { content: ""; position: absolute; bottom: -10px; width: 22px; height: 22px; background: inherit; clip-path: polygon(0 0, 100% 0, 0 100%); }
.sp-bubble--1 { left: -4%; top: 8%; }
.sp-bubble--1::after { left: 26px; }
.sp-bubble--2 { right: -6%; top: 40%; background: var(--pink-card); color: var(--ctf-white); animation-duration: 7s; animation-delay: 0.6s; }
.sp-bubble--2::after { right: 26px; left: auto; clip-path: polygon(0 0, 100% 0, 100% 100%); }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -8px; } }

/* The CTF image stand: an image in front of a speech-bubble field (section 2.10). The field is
   decorative; mock-ups, the laptop and logos stand in front of it and are never clipped by it. */
.shape-bubble { -webkit-mask: var(--shape-bubble) center / contain no-repeat; mask: var(--shape-bubble) center / contain no-repeat; }
/* The image stands 9% (of the plinth's width) above the bubble's foot. The box ends at the image's foot
   and the decorative field runs the 9% on below it, so the measured content (the image) and the box agree
   and the field never adds height to a hero or a row: portrait 4:5 and square 1:1, each less that 9%. */
.plinth { position: relative; width: 100%; max-width: 440px; display: grid; place-items: end center; isolation: isolate; margin-inline: auto; }
.plinth--portrait { aspect-ratio: 100 / 116; }
.plinth--square { aspect-ratio: 100 / 91; }
.plinth::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; aspect-ratio: 834 / 835; z-index: -1; background: var(--plinth);
  transform: translateY(9%); pointer-events: none;
  -webkit-mask: var(--shape-bubble) center / contain no-repeat; mask: var(--shape-bubble) center / contain no-repeat;
}
.plinth--navy-soft { --plinth: var(--ctf-navy-soft); }
.plinth--white { --plinth: var(--ctf-white); }
.plinth--mist { --plinth: var(--ctf-mist); }
.plinth img { width: 68%; height: auto; filter: drop-shadow(0 28px 34px rgba(0, 0, 0, 0.45)); }
/* A logo on a plinth sits inside the bubble's round body. The box is the logo itself and the field runs on
   around it (as a 62%-wide logo, offset up and left, sits in the whole bubble), so the measured content and
   the box agree: the field stays inside the section's padding and never adds height. */
.plinth--logo { aspect-ratio: auto; width: 62%; place-items: center; }
.plinth--logo::before { top: -25.8%; bottom: -35.5%; left: -24.2%; right: -37.1%; aspect-ratio: auto; transform: none; }
.plinth--logo img { width: 100%; margin: 0; filter: none; }
/* The laptop on a plinth: the box is the image's own height and the field (76% wide) rises a little behind
   the screen, so the field never adds height to a row and stays inside the section's padding */
.plinth--laptop { max-width: 600px; aspect-ratio: auto; }
.plinth--laptop::before { left: 12%; right: 12%; }
.plinth--laptop img { width: 96%; filter: drop-shadow(0 30px 40px rgba(39, 41, 56, 0.25)); }
.hero .plinth { display: none; }
@media (min-width: 1024px) { .hero .plinth { display: grid; } }

/* The figures under the home hero */
.hero-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--ctf-navy-line); }
.hero-stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hero-tab--mark .hero-stats__n { font-size: clamp(3.85rem, 3.05rem + 2.75vw, 6rem); line-height: 0.6; }   /* the testimonials tab: a large Anton quote mark, same box height as the figures */
.hero-stats li { display: grid; gap: 6px; align-content: start; padding: 24px 24px 0; }
.hero-stats li + li { border-left: 1px solid var(--ctf-navy-line); }
.hero-stats li:first-child { padding-left: 0; }
.hero-stats__n { font-family: var(--font-display); font-size: clamp(2.25rem, 1.8rem + 1.6vw, 3.5rem); line-height: 1; color: var(--ctf-white); text-transform: uppercase; }
.hero-stats li:first-child .hero-stats__n { color: var(--ctf-amber); }
.hero-stats__l { font-size: 14.5px; line-height: 1.4; color: var(--ctf-soft-on-navy); max-width: 22ch; }

/* ---------- Home hero: centred, in front of a navy-soft bubble "horizon" (SPEC 5.1) ---------- */
/* A flex column (not a grid), so the headline box is exactly its lines; the horizon is a pseudo-element, clipped by the hero */
.hero--home::before {
  content: ""; position: absolute; left: 50%; top: 52%; width: min(1180px, 100%); aspect-ratio: 834 / 835; transform: translateX(-50%);
  background: var(--ctf-navy-soft); pointer-events: none;
  -webkit-mask: var(--shape-bubble) center / contain no-repeat; mask: var(--shape-bubble) center / contain no-repeat;
}
.hero__centre { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; }
.hero__centre .lede { margin-top: 8px; }
.hero__centre .cta-row { justify-content: center; margin-top: 12px; width: 100%; }
.hero__centre .hero__offer { text-align: left; }
/* Two member questions float either side from 1440px (below that the second one reaches the lede). The layer is absolute, so it takes no slot in the column
   and the bubbles stay inside the measured hero content. */
.hero__questions { display: none; }
@media (min-width: 1440px) {
  .hero__questions { display: block; position: absolute; inset: 0; pointer-events: none; }
  .hero__questions .sp-bubble { max-width: 240px; z-index: 1; text-align: left; }
  .hero__questions .sp-bubble--1 { left: 0; top: 8%; }
  .hero__questions .sp-bubble--2 { right: 0; top: 20%; }      /* both beside the two-line headline, clear of the lede */
}

/* ---------- Proof tabs: CTF's own figures as links, docked on the logo rail from 1024px (SPEC 4.3) ---------- */
.hero-stats--tabs { position: relative; z-index: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); border-top: 0; }
.hero-stats.hero-stats--tabs li { display: flex; padding: 0; border: 0; }   /* flex, so every tab fills its row's height */
/* The figure has the tab's full width ("Monthly" at the 36 to 56px clamp is wider than a figure column beside the
   arrow from 1024 to 1920 and at 375); the arrow sits in the tab's bottom corner, level across the row */
.hero-tab {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; grid-template-areas: "n n" "l a";
  flex: 1 1 auto; gap: var(--space-1) var(--space-2); padding: var(--space-3); background: var(--ctf-navy-deep); border: 2px solid var(--ctf-navy-line);
  border-radius: var(--radius-md); color: var(--ctf-white); text-decoration: none; transition: border-color var(--dur) var(--ease), translate var(--dur) var(--ease);
}
.hero-tab .hero-stats__n { grid-area: n; }
.hero-tab .hero-stats__l { grid-area: l; align-self: start; color: var(--ctf-soft-on-navy); }
.hero-tab__arr { grid-area: a; align-self: end; color: var(--ctf-amber); transition: transform var(--dur) var(--ease); }
@media (max-width: 599px) { .hero-tab { padding: var(--space-2); } }
@media (hover: hover) { .hero-tab:hover { border-color: var(--ctf-amber); } .hero-tab:hover .hero-tab__arr { transform: translateX(4px); } }
.hero-tab:focus-visible { border-color: var(--ctf-amber); }
@media (min-width: 1024px) {
  .hero-stats--tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .hero-tab { padding: var(--space-4); border-bottom: 0; border-radius: var(--radius-md) var(--radius-md) 0 0; }
  /* the "skirt": same fill and side borders below the tab, under the rail at rest, so the lift reads as the tab rising */
  .hero-tab::after { content: ""; position: absolute; left: -2px; right: -2px; top: 100%; height: var(--space-2);
    background: inherit; border: 2px solid; border-color: inherit; border-block: 0; }
}
@media (min-width: 1024px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .hero-tab:is(:hover, :focus-visible) { translate: 0 calc(-1 * var(--space-2)); }
}

/* ---------- Logo rail: the home hero's mist foot, a slow pausable loop (SPEC 4.4) ---------- */
.logo-rail { position: relative; z-index: 1; padding-top: var(--sec-pad); }
/* the mist runs on through the hero's own bottom padding: a pseudo-element, so measure.js counts the logos, not the band */
.logo-rail::before { content: ""; position: absolute; inset: 0 0 calc(-1 * var(--sec-pad)) 0; z-index: -1; background: var(--ctf-mist); }
.logo-rail__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-3) var(--space-5); align-items: center; }
.logo-rail__label { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; line-height: 1.35; color: var(--ctf-navy); }
.marquee { overflow-x: auto; scrollbar-width: thin; scroll-snap-type: x proximity;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 48px, #000 calc(100% - 48px), transparent); }
.marquee:focus-visible { -webkit-mask-image: none; mask-image: none; box-shadow: var(--focus-ring); }   /* the edge fade would clip the ring */
.marquee__track { display: flex; width: max-content; }
.marquee__list { display: flex; align-items: center; gap: 48px; padding-inline: 24px; }
.marquee__list li { scroll-snap-align: start; }
.marquee__list img { height: var(--h, 40px); width: auto; max-width: none; }      /* --h: each logo's balanced height (logo_rail) */
.marquee__list--dup { display: none; }
.logo-rail.is-animated .marquee { overflow: hidden; }
.logo-rail.is-animated .marquee__list--dup { display: flex; }
.logo-rail.is-animated .marquee__track { animation: marquee var(--marquee-dur) linear infinite; }
.logo-rail:is(.is-paused, .is-offscreen) .marquee__track, .logo-rail .marquee:hover .marquee__track, .logo-rail .marquee:focus-within .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.marquee__toggle { width: 44px; height: 44px; padding: 0; border-radius: 50%; display: grid; place-items: center; cursor: pointer;
  background: var(--ctf-white); color: var(--ctf-navy); border: 1.5px solid var(--ctf-line-strong); }      /* 3.19:1 on mist */
.marquee__toggle:focus-visible { box-shadow: var(--focus-ring); }
.marquee__toggle[aria-pressed="false"] .marquee__play, .marquee__toggle[aria-pressed="true"] .marquee__pause { display: none; }
@media (max-width: 1023px) {
  .logo-rail { margin-top: var(--space-4); }
  .logo-rail__inner { grid-template-columns: minmax(0, 1fr); grid-template-areas: "marquee"; }
  .marquee { grid-area: marquee; } .marquee__toggle { grid-area: toggle; }
}
@media (max-width: 700px) { .marquee__list img { height: calc(var(--h, 40px) * .8); } }

/* ---------- Logo wall ---------- */
.logo-wall { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 36px 0; width: 100%; }
.logo-wall li { display: grid; place-items: center; height: 56px; padding: 0 12px; }
.logo-wall img { width: auto; max-width: 100%; height: auto; max-height: 56px; object-fit: contain; }

/* ---------- Light cards: sessions and Insights (P14), flat, amber on hover ---------- */
.session-cards { display: grid; gap: var(--gap-cards); width: 100%; }
.session-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.session-cards--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.session-card {
  --card-bg: var(--ctf-mist); position: relative; display: flex; flex-direction: column; min-width: 0; padding: var(--space-2);
  border-radius: var(--radius-card); background: var(--card-bg); color: var(--ctf-navy); transition: background-color var(--dur) var(--ease);
}
.band--mist .session-card { --card-bg: var(--ctf-white); }      /* white on mist; mist on white and on navy */
.session-card__img { display: block; position: relative; z-index: 1; aspect-ratio: 16 / 9; border-radius: var(--radius-inner); overflow: hidden; background: var(--ctf-navy); }
.session-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The chip sits in the meta row, never on the cover: every cover carries its own title in its top-left corner */
.card-chip {
  display: inline-block; background: var(--ctf-white); color: var(--ctf-navy); border-radius: var(--radius-sm); padding: 4px 8px; font-size: 13px; font-weight: 700; line-height: 1.3;
}
.band--mist .card-chip { background: var(--ctf-mist); }      /* white cards: a mist chip (the next-session chip stays navy) */
.session-card__body { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; padding: var(--space-3) var(--space-1) var(--space-1); }
.session-card__meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: 13.5px; font-weight: 700; color: var(--color-text-muted); max-width: none; }
.session-card__title a { color: var(--ctf-navy); text-decoration: none; }
.session-card__title a::after { content: ""; position: absolute; inset: 0; } /* the whole card is the title's link */
.session-card__title a:focus-visible { box-shadow: none; }
.session-card:has(.session-card__title a:focus-visible) { box-shadow: var(--focus-ring); }
.session-card__speaker { font-size: 15px; font-weight: 700; color: var(--ctf-navy); line-height: 1.4; }
.session-card__text { font-size: 15.5px; color: var(--color-text-muted); line-height: 1.55; }
.post-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--color-text-muted); max-width: none; }
.session-card__go { margin-top: auto; padding-top: var(--space-3); align-self: flex-end; color: var(--ctf-navy); }
@media (hover: hover) {
  .session-card__go { opacity: 0; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
  .session-card:not(.session-card--next):hover { --card-bg: var(--ctf-amber); }
  /* navy only on amber (7.54:1) */
  .session-card:not(.session-card--next):hover :is(.session-card__title a, .session-card__speaker, .session-card__text, .session-card__meta, .post-meta) { color: var(--ctf-navy); }
  .session-card:hover .session-card__go { opacity: 1; transform: translateX(4px); }
}
.session-card.session-card--next { --card-bg: var(--ctf-amber); }      /* amber, navy text, no flood */
.session-card--next .session-card__body { padding: 30px; justify-content: center; gap: 14px; }
.session-card--next .card-chip { position: static; align-self: flex-start; background: var(--ctf-navy); color: var(--ctf-white); }
.session-card--next :is(.session-card__title, .session-card__speaker, .session-card__text) { color: var(--ctf-navy); }
.session-card--next .btn { align-self: flex-start; margin-top: 8px; white-space: normal; text-align: left; }
.session-card__bubble { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--ctf-navy); color: var(--ctf-amber); }
.post-card__placeholder { position: absolute; inset: 0; display: grid; place-items: center; }

/* ---------- The next session ---------- */
.next-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; background: var(--ctf-white); border-radius: var(--radius-card); padding: 16px 22px; max-width: none; }
.next-strip__pill { background: var(--ctf-amber); color: var(--ctf-navy); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 5px 12px; border-radius: var(--radius-pill); }
.next-strip strong { color: var(--ctf-navy); }
.next-strip a { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ctf-navy); text-decoration: none; border-bottom: 2px solid var(--ctf-pink); padding-bottom: 2px; }
.next-strip a:hover { color: var(--ctf-pink-deep); }
.next-feature__speaker { font-weight: 700; font-size: 18px; color: var(--ctf-navy); margin-top: -8px; }
.next-feature__when { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ctf-pink-deep); }
.next-feature__bio { color: var(--color-text-muted); font-size: var(--fs-body-lg); line-height: 1.6; }
.cover-card {
  position: relative; container-type: inline-size; width: min(560px, 100%); aspect-ratio: 16 / 9; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--ctf-navy); padding: 7% 6%; display: grid; align-content: start; gap: 6%; box-shadow: var(--shadow-lift);
}
.cover-card__title { font-family: var(--font-display); text-transform: uppercase; color: var(--ctf-white); font-size: clamp(2rem, 12cqi, 4.25rem); line-height: 0.92; display: grid; position: relative; z-index: 1; max-width: 62%; }
.cover-card__title .accent { color: var(--ctf-amber); }
.cover-card__with { color: var(--ctf-white); font-size: clamp(0.95rem, 0.8rem + 0.5vw, 1.25rem); position: relative; z-index: 1; max-width: 58%; }
.cover-card__circle { position: absolute; right: -14%; bottom: -46%; width: 64%; aspect-ratio: 1 / 1; border-radius: 50%; background: var(--ctf-white); display: grid; place-items: start center; padding-top: 16%; }
.cover-card__circle img { width: 52%; height: auto; }
@container (max-width: 400px) { .cover-card__circle { width: 50%; } }      /* small covers: the circle clears the "With" line */

/* ---------- The brochure's colour blocks ---------- */
.tone-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-cards); width: 100%; }
.tone-cards--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.tone-card { border-radius: var(--radius-card); padding: 30px 28px 32px; display: grid; gap: 14px; align-content: start; }
.tone-card__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 58px; }
.tone-card__n { font-family: var(--font-display); font-size: clamp(3.5rem, 2.8rem + 2vw, 4.5rem); line-height: 0.9; }
.tone-card__icon { width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; margin-left: auto; }
.tone-card .h3 { font-size: clamp(1.5rem, 1.3rem + 0.5vw, 1.875rem); min-height: 2em; }   /* parallel titles: every title holds two lines */
.tone-card p { font-size: 16px; line-height: 1.55; }
.tone-card--pink { background: var(--pink-card); color: var(--ctf-white); }
.tone-card--pink .h3, .tone-card--pink .tone-card__n { color: var(--ctf-white); }
.tone-card--pink .tone-card__icon { background: var(--ctf-white); color: var(--ctf-navy); }
.tone-card--cyan { background: var(--ctf-cyan); color: var(--ctf-navy); }
.tone-card--cyan .h3, .tone-card--cyan .tone-card__n { color: var(--ctf-navy); }
.tone-card--cyan .tone-card__icon { background: var(--ctf-navy); color: var(--ctf-white); }
.tone-card--amber { background: var(--ctf-amber); color: var(--ctf-navy); }
.tone-card--amber .h3, .tone-card--amber .tone-card__n { color: var(--ctf-navy); }
.tone-card--amber .tone-card__icon { background: var(--ctf-navy); color: var(--ctf-white); }
.tone-card--navy { background: var(--ctf-navy); }
.tone-card--navy .h3, .tone-card--navy .tone-card__n { color: var(--ctf-white); }
.tone-card--navy .tone-card__icon { background: var(--ctf-white); color: var(--ctf-navy); }
.tone-card--navy .accent { color: var(--ctf-amber); }

/* ---------- Zig-zag rows ---------- */
.zig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5) 72px; align-items: center; }
.zig--flip .zig__text { order: 2; }
.zig__text { display: grid; gap: var(--space-4); align-content: center; }
.zig__text .sec-head { gap: var(--space-2); }
.zig__vis { min-width: 0; display: grid; justify-items: center; gap: 14px; }
.vis-caption { font-size: 13.5px; color: var(--ctf-soft-on-navy); text-align: center; max-width: none; }
.topic-block { display: grid; gap: 12px; }
.topic-block__h { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ctf-navy); }

/* ---------- Pills, ticks, crosses, tags ---------- */
.pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; }
.pills li { background: var(--ctf-white); border: 1px solid var(--ctf-line); border-radius: var(--radius-pill); padding: 10px 16px; font-size: 15px; font-weight: 700; line-height: 1.3; text-align: center; display: grid; place-items: center; }
.band--mist .pills li { background: var(--ctf-white); }
.pills--roles, .pills--dark, .pills--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
:is(.stage) :where(.pills) li { background: var(--ctf-navy-soft); border-color: var(--ctf-navy-line); color: var(--ctf-white); }
.pills--dark li { background: var(--ctf-navy-soft); border-color: var(--ctf-navy-line); color: var(--ctf-white); }
.ticks { display: grid; gap: 12px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; }
.ticks li::before {
  content: ""; flex-shrink: 0; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%; background-color: var(--pink-card);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 11.5l3 3 6-6.5'/%3E%3C/svg%3E");
  background-size: 22px 22px;
}
.ticks--lg li { font-size: 17.5px; font-weight: 700; color: var(--ctf-navy); }
:is(.stage, .signup, .library-box) :where(.ticks) li::before { background-color: var(--ctf-amber); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%23272938' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 11.5l3 3 6-6.5'/%3E%3C/svg%3E"); }
:is(.stage, .library-box) :where(.ticks--lg) li, :is(.library-box) :where(.ticks) li { color: var(--ctf-white); }
.crosses { display: grid; gap: 12px; }
.crosses li { display: flex; gap: 12px; align-items: center; font-weight: 700; }
.crosses li::before {
  content: ""; flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background-color: var(--ctf-navy-soft); border: 1px solid var(--ctf-navy-line);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%23FFA947' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7.5 7.5l7 7M14.5 7.5l-7 7'/%3E%3C/svg%3E");
  background-size: 20px 20px; background-position: center; background-repeat: no-repeat;
}
.not-box { background: var(--ctf-navy-soft); border: 1px solid var(--ctf-navy-line); border-radius: var(--radius-card); padding: 32px; display: grid; gap: 18px; width: 100%; max-width: 480px; color: var(--ctf-white); }
.not-box .h3 { color: var(--ctf-white); }
.not-box :where(li) { color: inherit; }
.not-box .muted { color: var(--ctf-soft-on-navy); font-size: 15px; }
.not-box--light { background: var(--ctf-mist); border-color: var(--ctf-line); color: var(--ctf-navy); }
.not-box--light .h3 { color: var(--ctf-navy); }
.band--mist .not-box--light { background: var(--ctf-white); }
.not-box--light .muted { color: var(--color-text-muted); }
.not-box--light .crosses li::before { background-color: var(--ctf-white); border-color: var(--ctf-line); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%23C8174A' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M7.5 7.5l7 7M14.5 7.5l-7 7'/%3E%3C/svg%3E"); }
.tag { display: inline-flex; align-items: center; justify-content: center; padding: 7px 14px; border-radius: var(--radius-pill); background: var(--ctf-white); border: 1px solid var(--ctf-line); color: var(--ctf-navy); font-size: 14px; font-weight: 700; line-height: 1.2; text-decoration: none; }
a.tag:hover { border-color: var(--ctf-navy); color: var(--ctf-navy); }
.tags { display: flex; flex-wrap: wrap; gap: 10px; }
.numbered { counter-reset: n; display: grid; gap: 12px; }
.numbered li { counter-increment: n; display: flex; gap: 12px; align-items: flex-start; line-height: 1.5; }
.numbered li::before { content: counter(n); flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--ctf-navy); color: var(--ctf-white); font-size: 14px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
:is(.signup, .stage) :where(.numbered) li::before { background: var(--ctf-amber); color: var(--ctf-navy); }

/* ---------- Speech bubbles ---------- */
.bubble { position: relative; border-radius: 22px; padding: 16px 20px; width: fit-content; max-width: 100%; }
.bubble p { font-weight: 700; line-height: 1.4; max-width: none; }
.bubble::after { content: ""; position: absolute; bottom: -11px; width: 22px; height: 22px; background: inherit; }
.bubble--tail-left::after { left: 28px; clip-path: polygon(0 0, 100% 0, 0 100%); }
.bubble--tail-right::after { right: 28px; clip-path: polygon(0 0, 100% 0, 100% 100%); }
.bubble--white { background: var(--ctf-white); color: var(--ctf-navy); box-shadow: var(--shadow-soft); }
.bubble--pink { background: var(--pink-card); color: var(--ctf-white); }
.bubble--navy-soft { background: var(--ctf-navy-soft); color: var(--ctf-white); }
.bubble--navy-soft p { font-weight: 500; }
.proof-bubbles { display: grid; gap: 22px; }
.curiosity { display: grid; gap: 26px; width: 100%; max-width: 440px; }
.curiosity .bubble { font-size: 18px; }
.curiosity .bubble:nth-child(2) { justify-self: end; }
.sec .curiosity .bubble--white { border: 1px solid var(--ctf-line); }

/* ---------- The phone: member chat ---------- */
.phone { width: min(320px, 100%); aspect-ratio: 9 / 18.4; background: #15161F; border-radius: 46px; padding: 11px; box-shadow: var(--shadow-deep); }
.phone__screen { height: 100%; background: var(--ctf-white); border-radius: 36px; overflow: hidden; display: flex; flex-direction: column; font-size: 13px; line-height: 1.4; color: var(--ctf-navy); }
.phone__bar { display: flex; align-items: center; gap: 10px; padding: 26px 18px 14px; border-bottom: 1px solid var(--ctf-line); }
.phone__bar b { font-size: 15px; }
.phone__bar span { margin-left: auto; font-size: 11.5px; color: var(--color-text-muted); }
.chat { flex: 1; padding: 16px 14px; display: grid; gap: 14px; align-content: start; background: var(--ctf-mist); }
.chat__msg { display: grid; gap: 4px; justify-items: start; }
.chat__msg span { font-size: 10.5px; font-weight: 700; color: var(--color-text-muted); padding: 0 6px; }
.chat__msg p { background: var(--ctf-white); border-radius: 16px 16px 16px 6px; padding: 10px 13px; font-size: 13px; max-width: 85%; box-shadow: 0 2px 6px rgba(39, 41, 56, 0.06); }
.chat__msg--me { justify-items: end; }
.chat__msg--me p { background: var(--pink-card); color: var(--ctf-white); border-radius: 16px 16px 6px 16px; font-weight: 700; }
.chat__typing { display: inline-flex !important; gap: 4px; align-items: center; padding: 13px 14px !important; }
.chat__typing i { width: 7px; height: 7px; border-radius: 50%; background: #A7AAB8; animation: typing 1.2s infinite ease-in-out; }
.chat__typing i:nth-child(2) { animation-delay: 0.15s; }
.chat__typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes typing { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
.chat__input { margin: 0 12px 14px; background: var(--ctf-white); border: 1px solid var(--ctf-line); border-radius: var(--radius-pill); padding: 11px 16px; color: #8A8D99; font-size: 13px; }

/* ---------- Laptop, product pairs, the person ---------- */
.laptop { width: 100%; max-width: 640px; }
.laptop img { width: 100%; height: auto; filter: drop-shadow(0 30px 40px rgba(39, 41, 56, 0.25)); }
.duo { position: relative; width: min(460px, 100%); aspect-ratio: 1 / 0.9; }
.duo::before { content: ""; position: absolute; inset: 0 6% 4% 6%; background: var(--ctf-navy-soft);
  -webkit-mask: var(--shape-bubble) center / contain no-repeat; mask: var(--shape-bubble) center / contain no-repeat; }
.duo img { position: absolute; height: auto; filter: drop-shadow(0 24px 30px rgba(0, 0, 0, 0.45)); }
.duo img:first-child { width: 58%; left: 2%; bottom: 0; }
.duo img:last-child { width: 46%; right: 2%; top: 4%; }
.person { display: grid; grid-template-columns: minmax(0, 420px) minmax(0, 1fr); gap: var(--space-5) 64px; align-items: center; }
.person__mark { max-width: 260px; }
.person__text { position: relative; }   /* above the mark's bubble field */
.person__text { display: grid; gap: var(--space-3); justify-items: start; }
.person__role { font-weight: 700; color: var(--ctf-navy); font-size: 18px; margin-top: -8px; }
.person__text p:not(.person__role) { color: var(--color-text-muted); }

/* ---------- Facts ---------- */
.facts { display: grid; gap: var(--gap-cards); width: 100%; }
.fact { display: grid; gap: 8px; align-content: start; }
.fact__stat { font-family: var(--font-display); font-size: clamp(4rem, 3rem + 4vw, 7rem); line-height: 0.9; color: var(--ctf-pink); }
.fact__text { font-weight: 700; font-size: 18px; line-height: 1.4; color: var(--ctf-navy); max-width: 30ch; }
.fact__source { font-size: 14px; color: var(--color-text-muted); }

/* ---------- Quotes ---------- */
.quotes { display: grid; gap: var(--gap-cards); grid-template-columns: minmax(0, 1fr); width: 100%; }
.quote-panel { display: grid; align-items: center; gap: var(--space-4) 48px; min-height: 320px; padding: clamp(28px, 4.5vw, 64px);
  border-radius: var(--radius-card); background: var(--surface-raised); }
.quote-panel blockquote p { font-size: var(--fs-quote); line-height: 1.4; font-style: italic; color: var(--ctf-white); max-width: 40ch; text-wrap: pretty; }
.quote-panel figcaption { display: grid; gap: 4px; margin-top: var(--space-3); }
.quote-panel figcaption strong { display: inline-flex; align-items: center; gap: 10px; color: var(--ctf-amber); }   /* 6.64:1 */
.quote-panel figcaption strong::before { content: ""; width: 8px; height: 8px; background: currentColor; }    /* the brand square, not a dash */
.quote-panel figcaption span { font-size: 14px; color: var(--ctf-soft-on-navy); }
.quote-panel__mark { display: none; }
@media (min-width: 1280px) {
  .quote-panel { grid-template-columns: minmax(0, 1fr) 240px; }
  .quote-panel__mark { display: grid; place-items: center; aspect-ratio: 834 / 835; background: var(--ctf-amber);
    -webkit-mask: var(--shape-bubble) center / contain no-repeat; mask: var(--shape-bubble) center / contain no-repeat; }
  .quote-panel__mark span { font: 400 180px/1 var(--font-display); color: var(--ctf-navy); padding-top: .3em; }
}
.quotes__grid { display: grid; gap: var(--gap-cards); grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1023px) { .quotes__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 699px) { .quotes__grid { grid-template-columns: minmax(0, 1fr); } }
.quote { background: var(--ctf-white); border-radius: var(--radius-card); padding: 26px 26px 24px; display: grid; gap: 16px; align-content: space-between; position: relative; }
.quote blockquote { margin: 0; }
.quote blockquote p { font-size: 16.5px; line-height: 1.55; font-style: italic; color: var(--ctf-navy); max-width: none; }
.quote blockquote::before { content: "\201C"; display: block; font-family: var(--font-display); font-size: 54px; line-height: 0.6; color: var(--ctf-pink); margin-bottom: 8px; height: 26px; }
.quote figcaption { display: grid; gap: 2px; font-size: 14px; line-height: 1.4; color: var(--color-text-muted); }
.quote figcaption strong { color: var(--ctf-navy); font-size: 15px; }
.stage .quote { background: var(--surface-raised); box-shadow: none; }
.stage .quote blockquote p { color: var(--ctf-white); font-style: italic; }
.stage .quote blockquote::before, .stage .quote figcaption strong { color: var(--ctf-amber); }
.stage .quote figcaption { color: var(--ctf-soft-on-navy); }   /* the role line: slate fails on navy-soft */

/* ---------- Steps, spaces, rules ---------- */
.steps { display: grid; gap: var(--gap-cards); width: 100%; counter-reset: s; }
.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps li { background: var(--ctf-white); border-radius: var(--radius-lg); padding: 28px 26px 30px; display: grid; gap: 12px; align-content: start; }
.sec .steps li { background: var(--ctf-mist); }
.steps__n { font-family: var(--font-display); font-size: 3rem; line-height: 0.9; color: var(--ctf-pink); }
.steps p { color: var(--color-text-muted); font-size: 16px; line-height: 1.55; }
.steps--4 .h4 { min-height: 2.6em; }   /* two lines at line-height 1.3, so the descriptions start level */
.steps__note { color: var(--color-text-muted); max-width: none; }
.steps__note.is-narrow { max-width: var(--content-narrow); }   /* under num rows: in the same 1080 inset */
.spaces { display: grid; width: 100%; }
.spaces li { display: grid; grid-template-columns: minmax(0, 180px) minmax(0, 1fr); gap: 6px 20px; padding: 16px 0; border-top: 1px solid var(--ctf-line); align-items: baseline; }
.spaces li:last-child { border-bottom: 1px solid var(--ctf-line); }
.spaces p { color: var(--color-text-muted); font-size: 16px; }
.rules { display: grid; gap: 14px; width: 100%; }
.rules li { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 18px; align-items: start; background: var(--ctf-mist); border-radius: var(--radius-lg); padding: 22px 24px; }
.rules__n { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--ctf-navy); color: var(--ctf-amber); font-family: var(--font-display); font-size: 1.75rem; }
.rules li > div { display: grid; gap: 4px; padding-top: 4px; }
.rules p { color: var(--color-text-muted); font-size: 16px; }
.band--mist .rules li { background: var(--ctf-white); }
.rules.rules--grid li { grid-template-columns: minmax(0, 1fr); justify-items: center; align-content: start; text-align: center; gap: var(--space-2); border-radius: var(--radius-card); padding: var(--space-4); }
.rules.rules--grid li > div { justify-items: center; padding-top: 0; }
.rules.rules--grid .rules__n { width: 56px; height: 56px; font-size: 1.75rem; }
.rules.rules--grid p { max-width: 34ch; }
@media (min-width: 1024px) { .rules--grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-cards); } }

/* ---------- Numbered rows (P7): each row's rule takes the next brand colour ---------- */
.num-rows { display: grid; }
.num-row { display: grid; gap: var(--space-2); padding-block: var(--space-5); border-bottom: 2px solid var(--rule); }
.num-row:first-child { padding-top: 0; }
.num-row--pink { --rule: var(--ctf-pink); } .num-row--cyan { --rule: var(--ctf-cyan); } .num-row--amber { --rule: var(--ctf-amber); } .num-row--navy { --rule: var(--ctf-navy); }
.num-row__n { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--ctf-navy); color: var(--ctf-amber);
  font: 400 1.75rem/1 var(--font-display); }
.num-row__title { font-size: var(--fs-h2); }
.num-row__text { font-size: var(--fs-body-lg); color: var(--color-text-muted); max-width: 54ch; }
@media (min-width: 1024px) { .num-row { grid-template-columns: 56px minmax(0, 3fr) minmax(0, 7fr); column-gap: var(--space-5); align-items: center; } }

/* ---------- Feature panel (P4, P16): amber or cyan, navy text only ---------- */
.feature-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5) 56px; align-items: center;
  padding: clamp(28px, 4.5vw, 64px); border-radius: var(--radius-card); color: var(--ctf-navy); }
.feature-panel--amber { background: var(--ctf-amber); } .feature-panel--cyan { background: var(--ctf-cyan); }
/* Navy text only (pink-deep on amber is 3.0:1: never). Scoped to the text column, so a cover drawn in the media
   column (navy, with white and amber type) keeps its own colours. */
.feature-panel__text :is(.headline, .eyebrow, .lede, p, li, .accent, .dot, a:not(.btn)) { color: var(--ctf-navy); }
.feature-panel__text a:not(.btn):hover { color: var(--ctf-navy-deep); }
.feature-panel__text .eyebrow::before { background: var(--ctf-navy); }
.feature-panel .headline { font-size: var(--fs-panel); }
.feature-panel__text { display: grid; gap: var(--space-3); justify-items: start; align-content: center; }
.feature-panel__media { min-width: 0; display: grid; justify-items: center; gap: var(--space-2); }
.feature-panel .cover-card { border-radius: var(--radius-inner); box-shadow: none; }
.feature-panel .curiosity .bubble--white { border: 0; box-shadow: none; }
.feature-panel .next-feature__speaker { margin-top: 0; }
@media (min-width: 1024px) { .feature-panel { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); } }

/* ---------- Results panels (P12): CTF's own figures on navy-soft ---------- */
.facts--panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-cards); }
.facts--panels .fact { display: flex; flex-direction: column; gap: var(--space-4); padding: clamp(24px, 3vw, 40px); border-radius: var(--radius-card); background: var(--surface-raised); }
.facts--panels .fact__text { order: -1; color: var(--ctf-soft-on-navy); font-size: 16px; font-weight: 500; max-width: none; }
.facts--panels .fact .fact__stat { margin-top: auto; font-family: var(--font-display); font-size: var(--fs-stat); line-height: 1; color: var(--ctf-amber); }  /* both amber */
@media (max-width: 599px) { .facts--panels { grid-template-columns: minmax(0, 1fr); } }
.cta-row--centre { justify-content: center; }
.lp-more { display: flex; justify-content: center; max-width: none; }

/* ---------- Feature grid (type-led benefits) ---------- */
.feature-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
.feature { display: grid; gap: var(--space-2); align-content: start; justify-items: center; text-align: center; }
.feature__icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; }
.feature__icon--pink { background: var(--pink-card); color: #fff; } .feature__icon--cyan { background: var(--ctf-cyan); color: var(--ctf-navy); }
.feature__icon--amber { background: var(--ctf-amber); color: var(--ctf-navy); } .feature__icon--navy { background: var(--ctf-navy); color: #fff; }
.feature p { font-size: 16px; line-height: 1.6; color: var(--color-text-muted); max-width: 34ch; }
@media (min-width: 700px) { .feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .feature { justify-items: start; text-align: left; } .feature .h3 { min-height: 2em; } }
@media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ---------- Figures in speech bubbles (the logo silhouette) ---------- */
.fact-bubbles { width: min(420px, 100%); display: grid; }
.fact-bubble { position: relative; display: grid; place-content: center; text-align: center; aspect-ratio: 834 / 835; padding: 18%; }
.fact-bubble::before { content: ""; position: absolute; inset: 0; z-index: 0; -webkit-mask: var(--shape-bubble) center / contain no-repeat; mask: var(--shape-bubble) center / contain no-repeat; }
.fact-bubble > * { position: relative; }
.fact-bubble--1 { width: 82%; justify-self: start; } .fact-bubble--1::before { background: var(--ctf-white); }
.fact-bubble--1 :is(.fact-bubble__stat, .fact-bubble__text) { color: var(--ctf-navy); }
.fact-bubble--2 { width: 58%; justify-self: end; margin-top: -26%; } .fact-bubble--2::before { background: var(--ctf-navy); }
.fact-bubble--2 :is(.fact-bubble__stat, .fact-bubble__text) { color: var(--ctf-white); }
.fact-bubble__stat { font-family: var(--font-display); font-size: var(--fs-stat); line-height: .9; }
.fact-bubble__text { font-weight: 700; font-size: 15px; line-height: 1.35; max-width: 18ch; }

/* ---------- Feature stack (SPEC 4.6): the brochure's colour blocks. Stacked panels without JS and below 1024px ---------- */
.stack { display: grid; gap: var(--gap-panels); width: 100%; }
.stack__panel { --ink: var(--ctf-navy); position: relative; border-radius: var(--radius-card); background: var(--bg); color: var(--ink); }
.stack__panel--pink { --bg: var(--pink-card); --ink: var(--ctf-white); }      /* white on pink-card 4.96:1 */
.stack__panel--cyan { --bg: var(--ctf-cyan); } .stack__panel--amber { --bg: var(--ctf-amber); }   /* navy 7.91:1 and 7.54:1 */
/* The panel's ink is scoped to the text column and the caption, so the white bubbles, the phone and the
   figure bubbles keep their own colours (one accent per panel: accent words and the stop take the ink) */
.stack__text :is(.headline, .eyebrow, .lede, p, li, .accent, .dot, .topic-block__h, a:not(.btn)), .stack__vis > .vis-caption { color: var(--ink); }
.stack__text .eyebrow::before { background: var(--ink); }
.stack__text .bubble--white { box-shadow: none; }
.stack__text .bubble--white p { color: var(--ctf-navy); }
.stack__panel .headline.h1 { font-size: var(--fs-panel); max-width: 16ch; }
.stack__panel .pills li { background: var(--ctf-navy); border-color: var(--ctf-navy); color: var(--ctf-white); }
.stack__panel .ticks li::before { background-color: var(--ctf-navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 11.5l3 3 6-6.5'/%3E%3C/svg%3E"); }
.stack__panel--pink .ticks li::before { background-color: var(--ctf-white);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='%23272938' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 11.5l3 3 6-6.5'/%3E%3C/svg%3E"); }
.proof-bubbles .bubble--tail-right { justify-self: end; }
.stack__content { display: grid; gap: var(--space-5); padding: var(--space-5) clamp(20px, 4vw, 40px); }
.stack__text { display: grid; gap: var(--space-4); align-content: center; justify-items: start; }
.stack__vis { display: grid; justify-items: center; gap: var(--space-2); min-width: 0; }
@media (min-width: 1024px) {
  .stack__panel { border-radius: var(--radius-panel); }
  .stack__content { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); align-items: center; padding: var(--space-4) 48px; }
  .stack__text .lede { font-size: var(--fs-body); }
  :is(.stack, .feature-block) .proof-bubbles .bubble { padding: 14px 16px; }
  :is(.stack, .feature-block) .proof-bubbles .bubble p { font-size: 15px; }
  :is(.stack, .feature-block) .phone { width: min(300px, 100%); }
}
@media (max-width: 699px) { .stack__vis--deco { display: none; } }

/* ---------- Sector landing pages: logos and the form in the first screen (warm visitors from a brief or LinkedIn) ---------- */
.lp-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); align-items: start; }
.lp-hero__top { display: grid; gap: var(--space-3); align-content: start; justify-items: start; }
.lp-hero__top .headline { max-width: 20ch; font-size: clamp(2.25rem, 1.6rem + 2.2vw, 3.5rem); }
@media (max-width: 700px) { .lp-hero__top .lede { font-size: 17px; } }
/* Small logos, lots of them (Aaron, 21 October 2026) */
.lp-logos { background: var(--ctf-white); border-radius: var(--radius-card); padding: 20px 22px; display: grid; align-content: center; width: 100%; }
.lp-logos .logo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 6px; }
.lp-logos .logo-wall li { height: 38px; padding: 0 6px; }
.lp-logos .logo-wall img { height: var(--h, 30px); width: auto; max-width: 100%; max-height: none; }   /* --h: optical balance (logo_wall) */
@media (max-width: 700px) { .lp-logos .logo-wall img { height: calc(var(--h, 30px) * .8); } }
/* Stacked layout: twelve logos (three rows of four on phones, two rows of six on tablets), so the form stays near the top */
@media (max-width: 1023px) { .lp-logos .logo-wall li:nth-child(n+13) { display: none; } }
@media (min-width: 600px) and (max-width: 1023px) { .lp-logos .logo-wall { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .lp-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); grid-template-rows: auto 1fr; grid-template-areas: "top form" "logos form"; gap: var(--space-4) 56px; }
  .lp-hero__top { grid-area: top; padding-top: var(--space-2); }
  /* The logos card and the form end on the same line. The logo wall sits out of the flow, so the form alone sets the
     height; the wall then shows as many full rows as fit beside it (any rows past that are zero high and clipped). */
  .lp-logos { grid-area: logos; align-self: stretch; position: relative; min-height: 140px; }
  .lp-logos .logo-wall { position: absolute; inset: 20px 22px; width: auto; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    grid-template-rows: repeat(auto-fill, minmax(44px, 1fr)); grid-auto-rows: 0; gap: 0 6px; overflow: hidden; }
  .lp-logos .logo-wall li { height: auto; min-height: 0; overflow: hidden; }
  .lp-form { grid-area: form; align-self: stretch; }
}
/* The landing form: the same form, tighter, without the optional phone field or the "Eligibility" label */
.lp-form { border: 0; box-shadow: var(--shadow-deep); padding: 24px 28px 22px; scroll-margin-top: calc(var(--header-h) + 16px); }
.lp-form .form-card__head { margin-bottom: 14px; gap: 4px; }
.lp-form .form-card__head .headline { font-size: clamp(1.375rem, 1.2rem + 0.45vw, 1.625rem); }
.lp-form .form { gap: 14px; }
.lp-form .form__fields { gap: 10px 12px; }
.lp-form .field { gap: 4px; }
.lp-form .field label, .lp-form .field__label { font-size: 14px; }
.lp-form .field input, .lp-form .field select { min-height: 40px; padding: 7px 12px; font-size: 15px; }
.lp-form .field--radio .choice { min-height: 40px; padding: 7px 12px; gap: 10px; font-size: 14px; }
.lp-form .field--checkbox .choice { font-size: 14px; line-height: 1.4; }
.lp-form .field--checkbox .field__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lp-form [data-field="phone"] { display: none; }
.lp-form [data-field="seats"] { grid-column: auto; }
.lp-form .form__foot { gap: 8px; }
.lp-form .btn--lg { min-height: 46px; padding: 11px 22px; font-size: 16px; }
.lp-form .form__small { font-size: 13px; line-height: 1.45; }
@media (min-width: 1024px) and (max-width: 1139px) {   /* small laptops: a narrower form keeps the headline to two lines */
  .lp-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); column-gap: 40px; }
  .lp-hero__top .headline { font-size: 2.75rem; }
  .lp-form .form-card__head .headline { font-size: 1.375rem; }
}
.form-card :is(.headline, h2, h3) { color: var(--ctf-navy); }
.form-card :is(.accent, .dot) { color: var(--ctf-pink); }
.form-card :focus-visible { box-shadow: var(--focus-ring); }
@media (max-width: 700px) { .lp-form .field[data-field="seats"] { grid-column: 1 / -1; } }

/* ---------- Who it's for / who it isn't (Membership): a matching pair of cards ---------- */
.fit { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--gap-cards); width: 100%; }
.fit__card { border-radius: var(--radius-card); padding: clamp(24px, 3.5vw, 44px); display: grid; gap: var(--space-4); align-content: start; }
.fit__card--for { background: var(--ctf-amber); }
.fit__card--for :is(.h3, li) { color: var(--ctf-navy); }
.fit__card--for .ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px; }
.fit__card--for .ticks li { font-weight: 700; }
.fit__card--for .ticks li::before { background-color: var(--ctf-navy);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 11.5l3 3 6-6.5'/%3E%3C/svg%3E"); }
.fit__card--not { background: var(--ctf-navy-soft); border: 1px solid var(--ctf-navy-line); }
.fit__card--not :is(.h3, li) { color: var(--ctf-white); }
.fit__note { color: var(--ctf-soft-on-navy); font-size: 15px; }
@media (min-width: 1024px) { .fit { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
@media (max-width: 599px) { .fit__card--for .ticks { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Fixed colour blocks on Home (team feedback, 20 October): always open, one per section ---------- */
.topic-bubbles { width: min(440px, 100%); display: grid; gap: var(--space-3); }
.topic-bubbles__list { display: grid; gap: 18px; }
.topic-bubbles__list .bubble { box-shadow: none; padding: 14px 20px; }
.topic-bubbles__list .bubble p { font-size: 17px; color: var(--ctf-navy); }
.topic-bubbles__list .bubble:nth-child(even) { justify-self: end; }
.stack__vis .topic-block__h { color: var(--ink); }
.feature-block { width: 100%; }
.feature-block--featured .headline.h1 { font-size: var(--fs-h1); max-width: 15ch; }
.feature-block__foot { padding: 0 clamp(20px, 4vw, 40px) var(--space-5); }
.net-points { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding-top: var(--space-5); border-top: 2px solid rgba(39, 41, 56, 0.18); }
.net-point { display: grid; gap: var(--space-1); align-content: start; }
.net-point__icon { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--ctf-navy); color: var(--ctf-white); margin-bottom: 6px; }
.net-point :is(.h4, p) { color: var(--ink); }
.net-point p { font-size: 16px; line-height: 1.55; }
@media (min-width: 700px) { .net-points { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .feature-block .stack__content { padding: var(--space-5) 56px; }
  .feature-block--flip .stack__content { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .feature-block--flip .stack__text { order: 2; }
  .feature-block__foot { padding: 0 56px var(--space-5); }
}
/* Enhanced (site.js, 1024px and up): one panel open, the others 64px spines. Panels left of the open one sit at i x 64;
   panels right of it rest with their left edge on their spine (W - (n - i) x 64), so opening one slides it across.
   Transforms and opacity only; site.js sets --stack-wa, --stack-h and each --x. */
.stack.is-enhanced { display: block; position: relative; height: var(--stack-h); border-radius: var(--radius-panel); overflow: hidden; isolation: isolate; }
/* Each panel runs one corner radius on under its right-hand neighbour (its content keeps the same inset), so behind
   every visible rounded corner there is always a neighbouring panel's colour */
.stack.is-enhanced .stack__panel { position: absolute; top: 0; left: 0; bottom: 0; width: calc(var(--stack-wa) + var(--radius-panel));
  box-shadow: var(--shadow-panel-left); transform: translateX(var(--x, 0)); transition: transform var(--dur-slow) var(--ease); }
.stack.is-enhanced [data-side="active"] { box-shadow: var(--shadow-panel-active); }
.stack.is-enhanced .stack__content { min-height: var(--stack-h, 0); padding-right: calc(48px + var(--radius-panel)); align-content: center;
  opacity: 0; transition: opacity var(--dur) linear; }
.stack.is-enhanced [data-side="active"] .stack__content { opacity: 1; transition-delay: 250ms; }
.stack__spine { position: absolute; top: 0; bottom: 0; left: 0; z-index: 2; width: var(--spine); display: flex; flex-direction: column; align-items: center;
  justify-content: flex-start; gap: var(--space-3); padding: 36px 0 0; border: 0; background: transparent; color: var(--ink); cursor: pointer;
  transition: opacity var(--dur-fast) linear; }
[data-side="active"] > .stack__spine, .stack__panel.is-moving > .stack__spine { opacity: 0; pointer-events: none; }
.stack__n { font-family: var(--font-display); font-size: 1.75rem; line-height: 1; }          /* a big number: Anton */
.stack__spine-label { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap;
  font: 700 var(--fs-label)/1.2 var(--font-sans); letter-spacing: var(--ls-label); text-transform: uppercase; }   /* a label: DM Sans */
.stack__spine:focus-visible { box-shadow: inset 0 0 0 3px currentColor; border-radius: var(--radius-card); }   /* inset: the stack's clip cannot cut it */
.stack.is-instant .stack__panel, .stack.is-instant .stack__content, .stack.is-instant .stack__spine { transition: none !important; }
.stack__controls { display: flex; justify-content: space-between; align-items: center; }
.stack__dots { display: flex; gap: var(--space-1); }
.stack__dot { width: 28px; height: 28px; padding: 0; border: 0; background: none; display: grid; place-items: center; cursor: pointer; }
.stack__dot::before { content: ""; width: 12px; height: 12px; border-radius: 999px; background: var(--ctf-white); transition: background-color var(--dur) var(--ease); }
.stack__dot[aria-current="true"] { width: 52px; } .stack__dot[aria-current="true"]::before { width: 40px; background: var(--dot); }   /* the width changes instantly */
.stack__arrows { display: flex; gap: var(--space-1); }
.stack__arrow { width: 48px; height: 48px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: var(--surface-raised);
  border: 1px solid rgba(255, 255, 255, .55); color: var(--ctf-white); cursor: pointer; }
.stack__arrow[aria-disabled="true"] { opacity: .4; cursor: default; }

/* ---------- Link rows (thank you, 404) ---------- */
.link-rows li { border-top: 1px solid var(--ctf-line); }
.link-rows li:last-child { border-bottom: 1px solid var(--ctf-line); }
.link-rows a { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-3) 0;
  font-weight: 700; font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); line-height: 1.3; color: var(--ctf-navy); text-decoration: none;
  transition: color var(--dur) var(--ease); }
.link-rows .icon { flex-shrink: 0; transition: transform var(--dur) var(--ease); }
.link-rows a:hover { color: var(--ctf-pink-deep); }   /* 5.19:1 on mist */
@media (hover: hover) { .link-rows a:hover .icon { transform: translateX(4px); } }

/* ---------- Pricing ---------- */
.price-cards { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: 18px; align-items: stretch; width: 100%; }
.price-cards__plus { align-self: center; font-family: var(--font-display); font-size: 3.5rem; line-height: 1; color: var(--ctf-navy); }
.price-card { border-radius: var(--radius-card); padding: 30px 30px 32px; display: grid; gap: 14px; align-content: start; }
.price-card--navy { background: var(--ctf-navy); color: var(--ctf-white); }
.price-card--pink { background: var(--pink-card); color: var(--ctf-white); }
.price-card .h4 { color: var(--ctf-white); max-width: 26ch; min-height: 2.6em; }
.price-card__icon { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: var(--pink-card); color: var(--ctf-white); }
.price-card--pink .price-card__icon { background: var(--ctf-navy); }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; max-width: none; }
.price__amount { font-family: var(--font-display); font-size: clamp(4.5rem, 3.4rem + 4vw, 7.25rem); line-height: 0.9; color: var(--ctf-white); }
.price-card--navy .price__amount { color: var(--ctf-amber); }
.price__was { font-family: var(--font-display); font-size: 2.25rem; line-height: 1; color: var(--ctf-soft-on-navy); }
.price__was s { text-decoration-thickness: 3px; text-decoration-color: var(--ctf-pink); }
.price__plus { font-family: var(--font-display); font-size: 3.5rem; line-height: 0.9; }
.price__note { font-weight: 700; font-size: 16px; color: inherit; }
.price__then { font-weight: 700; color: var(--ctf-soft-on-navy); margin-top: -6px; }
.terms { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 20px; width: 100%; }
.terms li { display: flex; align-items: center; gap: 12px; font-weight: 700; font-size: 15.5px; line-height: 1.35; color: var(--ctf-navy); }
.terms__icon { width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; background: var(--ctf-mist); color: var(--ctf-navy); }
.band--mist .terms__icon { background: var(--ctf-white); }
.zig--pricing .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.zig--pricing .price-cards { grid-template-columns: minmax(0, 1fr); }
.zig--pricing .price-cards__plus { justify-self: center; font-size: 2.5rem; margin: -6px 0; }

.calc { display: grid; gap: 18px; background: var(--ctf-white); border-radius: var(--radius-card); padding: 28px; width: 100%; max-width: 520px; }
.calc label { font-weight: 700; }
.calc__control { display: grid; grid-template-columns: 56px minmax(0, 1fr) 56px; border: 1.5px solid var(--ctf-line-strong); border-radius: var(--radius-pill); overflow: hidden; }
.calc__control:focus-within { border-color: var(--ctf-navy); box-shadow: var(--focus-ring); }
.calc__step { border: 0; background: var(--ctf-mist); font-size: 24px; font-weight: 700; cursor: pointer; color: var(--ctf-navy); }
.calc__step:hover { background: var(--ctf-amber); }
.calc input { width: 100%; min-height: 56px; border: 0; text-align: center; font: inherit; font-family: var(--font-display); font-size: 28px; color: var(--ctf-navy); -moz-appearance: textfield; appearance: textfield; }
.calc input::-webkit-outer-spin-button, .calc input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.calc input:focus-visible { box-shadow: none; }
.calc__out { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.calc__out p { display: grid; gap: 4px; background: var(--ctf-mist); border-radius: var(--radius-md); padding: 16px 18px; }
.calc__label { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }
.calc__out strong { font-family: var(--font-display); font-weight: 400; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.75rem); line-height: 1; color: var(--ctf-navy); }
.calc__total strong { color: var(--ctf-pink-deep); }
.calc__offer { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--ctf-navy); }
.calc__offer .icon { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--ctf-amber); }
.calc__table { min-width: 0; }
.included { background: var(--ctf-white); border-radius: var(--radius-card); padding: 32px; display: grid; gap: 22px; width: 100%; max-width: 520px; }

/* ---------- Questions ---------- */
.faq { display: grid; width: 100%; }
.faq__item { border-top: 1px solid var(--ctf-line); }
.faq__item:last-child { border-bottom: 1px solid var(--ctf-line); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 20px 0; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .h4 { text-align: left; }
.faq__item summary .h4 { transition: color var(--dur) var(--ease); }
.faq__item summary:hover .h4 { color: var(--ctf-pink-deep); }
.faq__plus { position: relative; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; background: var(--ctf-navy); color: var(--ctf-amber); }
.faq__plus::before, .faq__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 1px; background: currentColor; transform: translate(-50%, -50%); transition: transform var(--dur) var(--ease); }
.faq__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__answer { padding: 0 48px 22px 0; color: var(--color-text-muted); }

/* ---------- Closing cards ---------- */
.signup, .cta-band { position: relative; border-radius: var(--radius-card); background: var(--ctf-navy); overflow: hidden; padding: var(--sec-pad) clamp(24px, 4.5vw, 64px); }
.signup::before, .cta-band::before { /* navy-soft bubble field */
  content: ""; position: absolute; left: -140px; bottom: -220px; width: 460px; max-width: 100%; aspect-ratio: 1; background: var(--ctf-navy-soft); pointer-events: none;
  -webkit-mask: var(--shape-bubble) center / contain no-repeat; mask: var(--shape-bubble) center / contain no-repeat; }
.signup > *, .cta-band > * { position: relative; }
.signup { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: var(--space-5) 56px; align-items: start; }
.signup__text { display: grid; gap: var(--space-3); }
@media (min-width: 901px) {
  .signup { overflow: clip; }      /* clip, not hidden: the copy column can stick (where clip is unsupported it stays hidden) */
  .signup > .signup__text { position: sticky; top: 112px; align-self: start; }
}
.signup__offer { display: flex; align-items: center; gap: 10px; color: var(--ctf-white); font-weight: 700; }
.signup__offer .icon, .library-box .icon.tick { flex-shrink: 0; width: 26px; height: 26px; padding: 5px; border-radius: 50%; background: var(--ctf-amber); color: var(--ctf-navy); }
.whatnext { display: grid; gap: 14px; border-top: 1px solid var(--ctf-navy-line); padding-top: var(--space-3); margin-top: 6px; }
.whatnext__h { font-family: var(--font-sans); font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ctf-amber) !important; }
.signup__form { background: var(--ctf-white); border-radius: var(--radius-lg); padding: clamp(22px, 3vw, 36px); color: var(--ctf-navy); }
@media (min-width: 901px) and (max-width: 1199px) { .signup .form__fields { grid-template-columns: minmax(0, 1fr); } }
/* Centred closing panel (P13): where a page already has a form */
.cta-band { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--space-4); text-align: center; }
.cta-band__text { display: grid; gap: var(--space-3); justify-items: center; }
.cta-band .headline { font-size: var(--fs-h2); }
.cta-band .lede { margin-inline: auto; }
.cta-band .cta-row { justify-content: center; }

/* ---------- Contact links ---------- */
.contact-links { display: grid; gap: 10px; }
.contact-links a { display: flex; width: fit-content; align-items: center; gap: 10px; text-decoration: none; font-weight: 700; color: var(--ctf-navy); }
.contact-links a:hover { color: var(--ctf-pink-deep); text-decoration: underline; }
.contact-links .icon { color: var(--ctf-pink-deep); flex-shrink: 0; }
.contact-links.on-dark a { color: var(--ctf-white); }
.contact-links.on-dark a:hover { color: var(--ctf-amber); }
.contact-links.on-dark .icon { color: var(--ctf-amber); }
.contact-links--lg { gap: var(--space-2); }
.contact-links--lg.on-dark a { font-size: clamp(1.125rem, 1rem + .6vw, 1.5rem); color: var(--ctf-amber); }   /* 7.54:1 */
.contact-links--lg.on-dark a:hover { color: var(--ctf-white); }

/* ---------- Forms ---------- */
.form-grid { display: grid !important; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-5) 56px !important; align-items: start; }
.form-card__head { display: grid; gap: 10px; margin-bottom: 28px; }
.form-card { background: var(--ctf-white); border: 1px solid var(--ctf-line); border-radius: var(--radius-card); padding: clamp(22px, 3.5vw, 40px); }
.form { display: grid; gap: 22px; }
.form__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2) 16px; }
.field { display: grid; gap: 6px; grid-row: span 3; grid-template-rows: subgrid; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label, .field__label { font-weight: 700; line-height: 1.3; font-size: 15px; color: var(--ctf-navy); }
.field .req { color: var(--ctf-pink-deep); }
.field .opt { color: var(--color-text-muted); font-weight: 400; font-size: 14px; }
.field input, .field textarea, .field select {
  width: 100%; min-height: 48px; padding: 11px 14px; font: inherit; font-size: 16px; color: var(--ctf-navy);
  background: var(--ctf-white); border: 1.5px solid var(--ctf-line-strong); border-radius: var(--radius-md);
}
.field textarea { min-height: 140px; resize: vertical; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--ctf-navy); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { border-color: var(--ctf-navy); box-shadow: var(--focus-ring); }
.field--checkbox .choice { align-items: flex-start; font-weight: 500; line-height: 1.45; }
.field--checkbox .choice input { min-height: 0; width: 22px; height: 22px; margin-top: 1px; flex-shrink: 0; }
.select { position: relative; }
.select select { appearance: none; padding-right: 44px; }
.select .icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--ctf-navy); }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--color-error); }
.field__error { display: flex; gap: 6px; align-items: flex-start; font-size: 14px; color: var(--color-error); font-weight: 700; line-height: 1.4; }
.field__error::before {
  content: ""; flex-shrink: 0; width: 18px; height: 18px; background-color: var(--color-error);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.field--trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.choices { display: grid; gap: 10px; }
.choice { display: flex; align-items: center; gap: 12px; font-weight: 500; cursor: pointer; }
.choice input { width: 20px; height: 20px; accent-color: var(--ctf-navy); }
.field--radio .choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.field--radio .choice { border: 1.5px solid var(--ctf-line-strong); border-radius: var(--radius-md); padding: 13px 16px; min-height: 52px; line-height: 1.3; }
.field--radio .choice:hover { border-color: var(--ctf-navy); }
.field--radio .choice:has(input:checked) { border-color: var(--ctf-navy); background: var(--ctf-mist); font-weight: 700; }
.field--radio .choice input { min-height: 0; flex-shrink: 0; }
.form__foot { display: grid; gap: var(--space-2); justify-items: start; }
.form__small { max-width: 56ch; color: var(--color-text-muted); }
.form__small a { color: var(--ctf-navy); }
.form__status { font-weight: 700; color: var(--ctf-navy); }
.form__status.is-error { color: var(--color-error); }
.form__status:empty { display: none; }
.form__done { display: grid; gap: 10px; padding: 12px 0; }
.form-aside { display: grid; gap: 30px; align-content: start; padding-top: 8px; }
.form-aside__block { display: grid; gap: 14px; }

/* ---------- Lists of links (thank you, 404) ---------- */
.link-list { display: grid; gap: var(--space-2); }

/* ---------- Prose (legal pages, articles) ---------- */
.prose, .wrap.narrow > .prose { display: grid; gap: var(--space-3); width: 100%; max-width: 750px; margin-inline: auto; font-size: var(--fs-prose); line-height: 1.65; color: var(--ctf-navy); }
.prose h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; font-size: var(--fs-h2); line-height: 1; margin-top: var(--space-4); }
.prose h3 { font-size: 22px; font-weight: 700; line-height: 1.3; margin-top: var(--space-1); }
.prose h4 { font-size: 18px; font-weight: 700; line-height: 1.3; }
.prose p, .prose li { max-width: none; }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: 10px; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul li { position: relative; padding-left: 26px; }
.prose ul li::before { content: ""; position: absolute; left: 2px; top: 0.62em; width: 9px; height: 9px; background: var(--ctf-pink); }
.prose ol { list-style: decimal; }
.prose blockquote { border-left: 4px solid var(--ctf-pink); padding-left: var(--space-3); color: var(--ctf-navy); font-size: 20px; font-weight: 500; }
.prose img { border-radius: var(--radius-lg); }
.prose a { color: var(--ctf-pink-deep); font-weight: 500; }
.prose a:hover { color: var(--ctf-navy); }
.prose hr { border: 0; border-top: var(--border); }
.prose strong { color: var(--ctf-navy); }
.table-wrap { overflow-x: auto; max-width: 100%; }
table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 1.5; min-width: 520px; }
th, td { text-align: left; vertical-align: top; padding: 11px 12px; border-bottom: var(--border); }
th { font-weight: 700; color: var(--ctf-navy); background: var(--ctf-mist); }
.band--mist th { background: var(--ctf-white); }
.draft-box { background: var(--ctf-amber-tint); border: 1.5px dashed var(--ctf-amber-deep); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); display: grid; gap: 8px; font-size: 16px; }
.draft-box__title { font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-label); font-size: var(--fs-label); color: var(--ctf-navy); }
.draft-box ul li { padding-left: 22px; }

/* ---------- Insights ---------- */
/* Breadcrumbs: first in an inner hero (padding and negative margin keep focus rings unclipped) */
.crumbs-wrap + .wrap { margin-top: var(--space-4); }
.breadcrumbs { font-size: 14px; line-height: 1.4; color: var(--ctf-soft-on-navy); }
.breadcrumbs ol { display: flex; gap: 8px; white-space: nowrap; overflow-x: auto; scrollbar-width: none; padding: 6px; margin: -6px; }
.breadcrumbs ol::-webkit-scrollbar { display: none; }
.breadcrumbs li + li::before { content: "/"; margin-right: 8px; color: rgba(255, 255, 255, .4); }
.breadcrumbs a { color: var(--ctf-soft-on-navy); text-decoration: none; }
.breadcrumbs a:hover { color: var(--ctf-white); text-decoration: underline; }
.breadcrumbs [aria-current] { color: var(--ctf-amber); }
.hero .post-meta { color: var(--ctf-soft-on-navy); margin-top: 6px; }
/* Article hero: crumbs, eyebrow, title, excerpt and meta share the 750 prose column's left edge */
:is(.hero--post, .hero--reading) :is(.wrap, .crumbs-wrap) { max-width: calc(750px + 2 * var(--side-pad)); }
.hero--post .post-meta { font-size: 16px; gap: 6px 14px; align-items: center; }
.hero--post .post-meta span { display: inline-flex; align-items: center; gap: 14px; }
.hero--post .post-meta span:not(:last-child)::after { content: ""; width: 6px; height: 6px; background: var(--ctf-amber); flex-shrink: 0; }   /* after each part, so a wrapped line never starts on a square */
.post-title { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.75rem); max-width: 25ch; }
.hero--inner .headline.post-title { max-width: 22ch; }
.list-intro { color: var(--color-text-muted); font-size: var(--fs-body-lg); max-width: 70ch; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; }
.filters .tag { min-height: 44px; padding: 10px 18px; font-size: 15px; background: var(--ctf-white); border-color: var(--ctf-line-strong);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.filters .tag:hover { border-color: var(--ctf-navy); }
.filters .tag[aria-current="page"] { background: var(--ctf-navy); color: var(--ctf-white); border-color: var(--ctf-navy); }
/* Numbered pages in one bordered group (inset focus ring: the clip cannot cut it) */
.pagination { display: flex; width: max-content; max-width: 100%; margin-inline: auto; background: var(--ctf-white);
  border: 1px solid var(--ctf-line-strong); border-radius: var(--radius-md); overflow: hidden; }
.pagination__item { min-width: 44px; height: 44px; padding: 0 12px; display: grid; place-items: center; font-weight: 700; color: var(--ctf-navy); text-decoration: none;
  transition: background-color var(--dur) var(--ease); }
.pagination__item + .pagination__item { border-left: 1px solid var(--ctf-line-strong); }
.pagination__item[aria-current="page"] { background: var(--ctf-navy); color: var(--ctf-white); }
a.pagination__item:hover { background: var(--ctf-amber); color: var(--ctf-navy); }
.pagination__item:focus-visible { border-radius: 0; box-shadow: inset 0 0 0 3px var(--ctf-navy), inset 0 0 0 5px var(--ctf-white); }
/* Article reading band (mist): one 750 column for the cover, prose, FAQ, library box and tags */
.post-wrap { max-width: calc(750px + 2 * var(--side-pad)); }
.post-wrap > * { width: 100%; }
.post-cover { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 16 / 9; position: relative; background: var(--ctf-navy); }
.post-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post-wrap .prose { margin-inline: auto; }
.post-tags { justify-content: flex-start; }
.library-box { background: var(--ctf-navy); border-radius: var(--radius-card); padding: clamp(26px, 4vw, 44px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; position: relative; overflow: hidden; }   /* one column inside the 750 article column */
.library-box__text { display: grid; gap: 12px; }
.library-box__meta { font-size: 14px; font-weight: 700; color: var(--ctf-amber) !important; }
.library-box .ticks { margin-top: 6px; }
.library-box__cta { display: grid; gap: 18px; }
.library-box__cta p { color: var(--ctf-white); font-weight: 500; }
.post-faq { display: grid; gap: var(--space-4); }

/* ---------- Footer: big type in two halves, navy, the amber top bar kept ---------- */
.site-footer { background: var(--ctf-navy); color: var(--ctf-soft-on-navy); border-top: 6px solid var(--ctf-amber); }
.footer__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5) 64px; }
.footer__lead, .footer__side { display: grid; gap: var(--space-4); justify-items: start; align-content: start; }
.footer__social a { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; text-decoration: none; }
.footer__logo img { width: 250px; height: auto; }
.footer__line { font-size: 16px; max-width: 40ch; }
.footer__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); width: 100%; }
.footer__col { display: grid; gap: var(--space-1); align-content: start; }
.footer__col ul a { display: inline-block; padding-block: 6px; font-size: 16px; color: var(--ctf-soft-on-navy); text-decoration: none; }
.footer__col ul a:hover { color: var(--ctf-white); text-decoration: underline; }
.footer__heading { font-size: var(--fs-label); font-weight: 700; letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--ctf-amber); }
.footer__legal { margin-top: var(--space-5); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-2) var(--space-4); }
.footer__legal p, .footer__legal-links { font-size: 14.5px; }
.footer__legal-links { display: flex; flex-wrap: wrap; gap: 8px 20px; }
.footer__legal-links a, .footer__legal-links .linklike { color: var(--ctf-soft-on-navy); text-decoration: none; }
.footer__legal-links a:hover, .footer__legal-links .linklike:hover { text-decoration: underline; color: var(--ctf-white); }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Consent banner ---------- */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: var(--gap-panels); }
.consent__inner { max-width: 720px; margin-inline: auto; background: var(--ctf-white); border: 1px solid var(--ctf-line); border-top: 5px solid var(--ctf-amber); border-radius: var(--radius-card); padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-2); box-shadow: var(--shadow-deep); }
.consent__title { font-family: var(--font-display); text-transform: uppercase; font-size: 1.5rem; line-height: 1; }
.consent__text { color: var(--color-text-muted); max-width: none; font-size: 15.5px; }
.consent__text a { color: var(--ctf-navy); }
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.consent .btn { min-height: 46px; padding: 10px 22px; font-size: 15px; }

/* ---------- Sticky "Apply to join" (phones; shown by site.js) ---------- */
.sticky-cta { display: none; }

/* ---------- Reveal on scroll: only once the script confirms it is running ---------- */
html.js .reveal { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease), background-color var(--dur) var(--ease); }   /* SPEC 2.7: 12px rise, 500ms */
html.js .reveal.is-visible { opacity: 1; transform: none; }
/* Reduced motion (SPEC 2.7): explicit selectors, no blanket *. Colours change instantly; nothing moves. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .marquee__track, .sp-bubble, .chat__typing i, .site-nav > ul a[aria-current="page"]::after { animation: none !important; }
  .site-header, .site-nav, .site-nav > ul a, .sticky-cta, .stack__panel, .stack__content, .stack__spine, .stack__dot::before,
  .hero-tab, .hero-tab__arr, .session-card, .session-card__go, .btn, .btn .arr, .arrow-link .icon, .announce a .icon,
  .link-rows a, .link-rows .icon, .pagination__item, .filters .tag, .faq__item summary .h4, .faq__plus::before, .faq__plus::after,
  .feature-panel { transition: none !important; }
  .hero-tab:is(:hover, :focus-visible) { translate: none; }
  .btn:hover .arr, .arrow-link:hover .icon, .announce a:hover .icon, .hero-tab:hover .hero-tab__arr, .link-rows a:hover .icon,
  .session-card:hover .session-card__go { transform: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .site-header__actions .site-login { display: none; }
  .nav-toggle { display: inline-flex; }
  /* With scripts: a white sheet under the bar (site.js makes the page behind it inert) */
  html.js .site-nav {
    position: fixed; left: 0; right: 0; top: var(--sheet-top, var(--header-h)); bottom: 0; z-index: 49;
    display: flex; flex-direction: column; align-items: stretch; gap: var(--space-5); padding: var(--space-4) var(--side-pad) calc(var(--space-5) + env(safe-area-inset-bottom));
    background: var(--ctf-white); color: var(--ctf-navy); overflow-y: auto; overscroll-behavior: contain;
    transform: translateY(100%); visibility: hidden; transition: transform var(--dur-header) var(--ease), visibility 0s linear var(--dur-header);
  }
  html.js body.nav-open .site-nav { transform: none; visibility: visible; transition: transform var(--dur-header) var(--ease), visibility 0s; }
  body.nav-open { overflow: hidden; }
  html.js .site-nav > ul { flex-direction: column; gap: 0; }
  html.js .site-nav > ul a { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 0; border-radius: 0; font-size: 20px; font-weight: 700;
    white-space: normal; color: var(--ctf-navy); border-bottom: 1px solid var(--ctf-line); }
  html.js .site-nav > ul a[aria-current="page"]::after { content: none; }
  html.js .site-nav > ul a[aria-current="page"]::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; background: var(--ctf-pink); }
  html.js .site-nav__actions { display: grid; gap: var(--space-2); padding: var(--space-3); background: var(--ctf-mist); border-radius: var(--radius-lg); }
  html.js .site-nav__actions .site-login { justify-content: flex-start; min-height: 44px; padding: 10px 0; font-weight: 700; color: var(--ctf-navy); }
  html.js .site-nav__actions :is(.site-login .icon, .contact-links .icon) { color: var(--ctf-pink-deep); }
  html.js .site-nav :focus-visible { box-shadow: var(--focus-ring); }
  /* Without scripts: a row of links under the bar */
  html:not(.js) .nav-toggle, html:not(.js) .site-nav__actions { display: none; }
  html:not(.js) .site-header__bar { height: auto; min-height: var(--header-h); padding-block: 12px; row-gap: 4px; }
  html:not(.js) .site-nav { grid-column: 1 / -1; grid-row: 2; justify-self: start; }
  html:not(.js) .site-nav > ul { flex-wrap: wrap; gap: 0 20px; }
  html:not(.js) .site-nav > ul a { display: inline-flex; align-items: center; min-height: 44px; padding: 0; }
  html:not(.js) .site-nav > ul a[aria-current="page"]::after { left: 0; right: 0; bottom: 6px; }
  .logo-wall { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .tone-cards--4, .steps--4, .session-cards--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1180px) and (hover: hover) {
  html.js .site-nav > ul a:hover { color: var(--ctf-pink-deep); }
}
@media (max-width: 1023px) {
  .hero--inner .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero--inner .hero__media { display: none; }
  .session-cards--4, .session-cards--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 1000px) {
  .tone-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero__grid, .zig, .signup, .cta-band, .form-grid, .narrow-split, .person { grid-template-columns: minmax(0, 1fr) !important; }
  .zig--flip .zig__text { order: 0; }
  .hero--inner .hero__media { display: none; }
  .hero-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-stats li:nth-child(3) { border-left: 0; padding-left: 0; }
  .hero-stats li { padding-bottom: 4px; }
  .steps--3 { grid-template-columns: minmax(0, 1fr); }
  .price-cards { grid-template-columns: minmax(0, 1fr); }
  .price-cards__plus { justify-self: center; font-size: 2.5rem; margin: -6px 0; }
  .person__mark { max-width: 136px; margin-bottom: 12px; }   /* room for the field's tail (35.5% of the logo) */
  .zig__vis { justify-items: start; }
  .hero__media { justify-items: center; }
  .not-box, .included, .calc { max-width: none; }
}
@media (max-width: 700px) {
  :root { --header-h: 64px; }
  html { scroll-padding-bottom: 88px; }      /* clears the sticky bar (WCAG 2.4.11) */
  .sticky-cta {
    display: block; position: fixed; inset: auto 0 0 0; z-index: 55; padding: 12px var(--side-pad) calc(12px + env(safe-area-inset-bottom));
    background: var(--ctf-navy); border-top: 1px solid var(--ctf-navy-line); box-shadow: 0 -8px 24px rgba(30, 32, 48, .25);
    transform: translateY(110%); visibility: hidden; transition: transform var(--dur) var(--ease), visibility 0s linear var(--dur);
  }
  .sticky-cta.is-shown { transform: none; visibility: visible; transition: transform var(--dur) var(--ease), visibility 0s; }
  .site-logo img { height: 24px; }
  .site-header__cta { display: none !important; }
  .announce { font-size: 13.5px; padding: 8px 16px; }
  .logo-wall { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .logo-wall { row-gap: 28px; }
  .logo-wall li { height: 40px; padding: 0 6px; }
  .logo-wall img { max-height: 40px; }
  .tone-cards, .tone-cards--4, .steps--4 { grid-template-columns: minmax(0, 1fr); }
  .pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pills--roles, .pills--dark { grid-template-columns: minmax(0, 1fr); }
  .field--radio .choices { grid-template-columns: minmax(0, 1fr); }
  .spaces li { grid-template-columns: minmax(0, 1fr); }
  .next-strip a { margin-left: 0; }
  .form__fields { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 12px; }   /* phones: names side by side, the rest full width */
  .field { grid-row: auto; grid-template-rows: none; grid-column: 1 / -1; }
  .field[data-field="first_name"], .field[data-field="last_name"] { grid-column: auto; }
  .form { gap: 22px; }
  .signup { padding: 28px 18px; border-radius: var(--radius-xl); }
  .signup__form { padding: 20px 16px; }
  .signup .whatnext, .signup .contact-links { display: none; }
  .footer__legal { flex-direction: column; align-items: flex-start; }
  .cta-row .btn { flex: 1 1 auto; }
  .faq__answer { padding-right: 0; }
  .price__amount { font-size: 4.5rem; }
  .calc__out { grid-template-columns: minmax(0, 1fr); }
  .rules li { grid-template-columns: 44px minmax(0, 1fr); padding: 18px; }
  .rules__n { width: 44px; height: 44px; font-size: 1.4rem; }
  .stage::before { width: 360px; height: 360px; right: -160px; bottom: -200px; }
}
@media (max-width: 599px) {
  .pills--2, .pills--roles, .pills--dark { display: flex; flex-wrap: wrap; }
  :is(.pills--2, .pills--roles, .pills--dark) > li { flex: 0 0 auto; max-width: 100%; font-size: 14px; }
  .fact-bubble { padding: 15%; }
  .fact-bubble--2 { width: 74%; margin-top: -12%; }
  .fact-bubble--2 .fact-bubble__stat { font-size: 2.75rem; }
  .fact-bubble__text { font-size: 14px; }
  .consent__inner { padding: var(--space-3); }
  .consent__actions { flex-wrap: nowrap; }
  .consent .btn { flex: 1 1 0; padding-inline: 12px; }
  .session-cards--4, .session-cards--3 { grid-template-columns: minmax(0, 1fr); }
  :is(.session-cards--4, .session-cards--related) .session-card { display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: var(--space-2); align-items: start; }
    :is(.session-cards--4, .session-cards--related) .session-card__body { padding: 0; }
  :is(.session-cards--4, .session-cards--related) .session-card__go { display: none; }
}
@media (max-width: 699px) {
  .breadcrumbs ol:has(li:nth-child(3)) li:first-child, .breadcrumbs ol:has(li:nth-child(3)) li:nth-child(2)::before { display: none; }
  .breadcrumbs ol:has(li:nth-child(3)) [aria-current] { max-width: 32ch; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 480px) {
  .eyebrow { white-space: normal; }
  .btn--lg, .form__foot .btn { width: 100%; }
  .terms { grid-template-columns: minmax(0, 1fr); }
  .hero-stats__l { font-size: 13.5px; }
}

/* Without mask support every bubble field falls back to today's circle (kept after every rule it overrides) */
@supports not ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
  .shape-bubble, .plinth::before, .hero--home::before, .stage::before, .signup::before, .cta-band::before, .duo::before, .fact-bubble::before, .quote-panel__mark {
    -webkit-mask: none; mask: none; border-radius: 50%; }
}

/* ======================================================================
   Section rhythm (playbook, section 6). Keep this block at the end.
   One unit above and below every section and inside every dark stage,
   and under every page hero. Change --sec-pad in the tokens to move everything.
   ====================================================================== */
.sec, .band, .stage, .form-section { padding-block: var(--sec-pad); }
.hero { padding-block: var(--sec-pad); }
.hero--home { padding-top: calc(var(--sec-pad) + 8px); }
.hero.has-strip { padding-bottom: var(--sec-pad); }
.hero-strip { margin-top: var(--hero-strip-gap); }
.site-footer { padding-block: var(--sec-pad); }
/* First and last elements inside a section add no outer space of their own. */
.sec > .wrap > :first-child, .band > .wrap > :first-child, .stage > .wrap > :first-child, .hero__text > :first-child { margin-top: 0; }
.sec > .wrap > :last-child, .band > .wrap > :last-child, .stage > .wrap > :last-child { margin-bottom: 0; }
.cta-row:empty { display: none; }