/* Closing Foundry design system (phase 1 redesign, Oct 2026).
   Values are taken from Charles's approved Claude Design exports (Homepage V5, Strategic Sales Enablement V8).
   Loaded only by pages built on the new design; the Webflow pages never link this file, so nothing here can
   restyle them. Every selector below is a cf- class or sits under body.cfds. */

@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/assets/ds/fonts/inter-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/assets/ds/fonts/inter-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/assets/ds/fonts/inter-tight-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter Tight'; font-style: normal; font-weight: 300 700; font-display: swap; src: url('/assets/ds/fonts/inter-tight-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---- tokens: tokens/cf-tokens.css from the approved V5 handoff, verbatim (plus --cf-joint) ---- */
/* Closing Foundry - design tokens (from Strategic Sales Enablement V8, 31 Oct 2026)
   Names extend the site's existing --cf-* variables. Handoff reference for the Webflow/Cloudflare build. */
:root {
  /* Colour - one role per value */
  --cf-navy: #122236;          /* ink: headings, emphasis, primary button */
  --cf-dark-blue: #24364F;     /* body text, button hover */
  --cf-medium-blue: #264363;   /* secondary text, captions */
  --cf-light-blue: #4275AE;    /* index numbers, labels, focus ring (4.8:1 on white) */
  --cf-sky: #8FB4DA;           /* decorative rules only - never text */
  --cf-highlight: #DCE7F4;     /* highlighted phrase, selected tag */
  --cf-white: #FFFFFF;         /* default page */
  --cf-canvas-warm: #F7F5F2;   /* footer, selected cell */
  --cf-section-warm: #F1EEE8;  /* alternate band (max two per page) */
  --cf-line-soft: #EAE5DC;     /* inner dividers */
  --cf-border-warm: #D8D2C8;   /* card + panel borders */
  --cf-line-strong: #BFB7A8;   /* nav cells, row rules on warm */
  --cf-divider: #C9C2B6;       /* dashed section dividers */
  --cf-orange: #FF8001;        /* ATTENTION ONLY: 2–3px lines and dots. Never fills, buttons or text */
  --cf-orange-tint: #FFF0E3;   /* attention background (gaps, missing evidence) */

  /* Type */
  --cf-font-display: 'Inter Tight', Inter, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --cf-font-body: Inter, -apple-system, 'Helvetica Neue', Arial, sans-serif;
  --cf-text-display: clamp(52px, 7.4vw, 112px);  /* 400 · 0.96 · -0.055em */
  --cf-text-h2: clamp(36px, 4vw, 58px);          /* 400 · 1.04 · -0.035em */
  --cf-text-statement: clamp(28px, 3.4vw, 50px); /* 400 · 1.16 · -0.03em  */
  --cf-text-h3: clamp(22px, 2.2vw, 32px);        /* 400–500 · 1.1 · -0.025em */
  --cf-text-lead: clamp(18px, 1.6vw, 22px);      /* 400 · 1.5 */
  --cf-text-body: 16px;                          /* 400 · 1.6 */
  --cf-text-small: 14px;                         /* 400–600 · 1.5 */
  --cf-text-label: 12px;                         /* 500 · uppercase · 0.12em */

  /* Space */
  --cf-space-1: 4px;  --cf-space-2: 8px;  --cf-space-3: 12px; --cf-space-4: 16px;
  --cf-space-5: 24px; --cf-space-6: 32px; --cf-space-7: 48px; --cf-space-8: 64px;
  --cf-section-y: clamp(60px, 8vw, 154px);   /* band padding */
  --cf-block-gap: clamp(40px, calc(28.86px + 2.857vw), 70px);    /* heading → content */
  --cf-gutter: clamp(20px, 4vw, 56px);
  /* Go Nimbly's frame (Charles, 31 Oct: "use 41px inside the frame to match Go Nimbly exactly"): the frame is 94.4% of
     the screen up to 1440px, the frame lines sit on its edges, and text starts 41px inside it (less on phones). Text
     then starts at x = 81 at 1440, 76 at 1280, 68 at 1000, 62 at 768 and 281 at 1920, as on gonimbly.com. */
  --cf-frame: min(1440px, 94.444vw);
  /* For Revenue Leaders V2 (designed at the target sizes): card padding 32 / 20, band 160 / 96 (1440 / 390) */
  --cf-p-card: clamp(20px, calc(15.54px + 1.143vw), 32px);
  --cf-band: clamp(96px, calc(72.2px + 6.1vw), 160px); /* the handoff's --cf-max (1360px) is the V5/V8 frame, no longer used */
  /* phones: 37px from the screen edge at 390 (Revenue Leaders V2 spec), 32px at 320 */
  --cf-gutter: clamp(22px, calc(10.9px + 3.92vw), 41px);
  --cf-max: 1360px;

  /* Shape + motion */
  --cf-radius: 0;            /* everything square… */
  --cf-radius-pill: 999px;   /* …except tags and functional icon buttons */
  --cf-rule: 3px;            /* coloured cell rules */
  --cf-ease: 160ms ease;     /* colour transitions only; none under prefers-reduced-motion */
  --cf-focus: 2px solid #4275AE; --cf-focus-offset: 3px;
  /* extension for this build */
  --cf-joint: #8E8677;         /* section-divider joint circles */
  /* the display stack exactly as the approved pages set it inline: arrows (→) are not in Inter Tight's subsets, and
     falling back to -apple-system instead of sans-serif changes their glyph and the line height */
  --cf-font-display: 'Inter Tight', Inter, sans-serif;
  /* #4275AE is 4.79:1 on white but 4.40 on #F7F5F2 and 4.13 on #F1EEE8: light-blue TEXT on a warm background uses
     this nearest passing shade (4.80 / 4.51) so the pages meet WCAG AA. Rules, borders and text on white keep #4275AE. */
  --cf-light-blue-on-warm: #3E6FA5;
}

/* ---- base (new-design pages only) ----
   overflow-wrap: a word longer than its box breaks rather than run out of it (only then; WCAG 1.4.12 text spacing) */
html.cfds { scroll-behavior: smooth; }
html.cfds, body.cfds { overflow-x: clip; }
body.cfds { overflow-wrap: break-word; margin: 0; background: var(--cf-white); color: var(--cf-dark-blue); font-family: var(--cf-font-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:where(body.cfds *, body.cfds *::before, body.cfds *::after) { box-sizing: border-box; }
:where(body.cfds a) { color: var(--cf-medium-blue); }
:where(body.cfds a:hover) { color: var(--cf-light-blue); }
:where(body.cfds button) { font: inherit; }
:where(body.cfds img) { max-width: 100%; }
:where(body.cfds) :focus-visible { outline: 2px solid var(--cf-light-blue); outline-offset: 3px; }
body.cfds main:focus { outline: none; }
@media (prefers-reduced-motion: reduce) {
  html.cfds { scroll-behavior: auto; }
  body.cfds *, body.cfds *::before, body.cfds *::after { transition: none !important; animation: none !important; }
}
/* page change (Charles, 1 Nov): following a top-nav link, the next page slides in from the right over the last
   one, which dims and drifts left; the header stays put (ds.js skips the slide for every other navigation). Browsers without cross-document view transitions (Firefox today) change page as before */
@view-transition { navigation: auto; }
.cf-header { view-transition-name: cf-header; }
::view-transition-old(root) { animation: cf-vt-out 0.5s cubic-bezier(0.65, 0, 0.35, 1) both; }
::view-transition-new(root) { animation: cf-vt-in 0.5s cubic-bezier(0.65, 0, 0.35, 1) both; }
@keyframes cf-vt-out { to { transform: translateX(-12%); filter: brightness(0.82); } }
@keyframes cf-vt-in { from { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
.cf-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---- layout ---- */
.cf-wrap { max-width: var(--cf-frame); margin: 0 auto; padding: 0 var(--cf-gutter); }
.cf-section { position: relative; padding: var(--cf-section-y) 0; border-bottom: 1px dashed var(--cf-divider); }
.cf-section--warm { background: var(--cf-section-warm); }
/* the two faint vertical rules at the container edges, and the small circles where they meet each section rule */
.cf-frame { position: fixed; inset: 0; pointer-events: none; z-index: 50; display: flex; justify-content: center; }
.cf-frame > span { width: 100%; max-width: var(--cf-frame); height: 100%; border-left: 1px solid rgba(18, 34, 54, 0.10); border-right: 1px solid rgba(18, 34, 54, 0.10); }
.cf-joints { position: absolute; left: 0; right: 0; bottom: -6px; display: none; justify-content: center; pointer-events: none; z-index: 3; }
.cf-joints > span { position: relative; width: 100%; max-width: var(--cf-frame); height: 11px; }
.cf-joints > span::before, .cf-joints > span::after { content: ''; position: absolute; top: 0; width: 11px; height: 11px; border: 1px solid var(--cf-joint); border-radius: 50%; background: var(--cf-white); }
.cf-joints > span::before { left: -6px; }
.cf-joints > span::after { right: -6px; }
@media (min-width: 1380px) { .cf-joints { display: flex; } }

/* section head: heading left, short line right */
.cf-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; }
.cf-head > div { flex: 1 1 520px; min-width: 0; }
.cf-head > p { flex: 0 1 420px; margin: 0; font-size: 18px; line-height: 1.55; color: var(--cf-dark-blue); text-wrap: pretty; }
.cf-after-head { margin-top: var(--cf-block-gap); }

/* ---- type ---- */
.cf-h1 { font-family: var(--cf-font-display); font-weight: 400; font-size: clamp(48px, calc(38.29px + 3.036vw), 82px); line-height: 0.96; letter-spacing: -0.055em; color: var(--cf-navy); margin: 0; max-width: 12ch; text-wrap: balance; }
.cf-h2 { font-family: var(--cf-font-display); font-weight: 400; font-size: clamp(34px, calc(30px + 1.25vw), 48px); line-height: 1.04; letter-spacing: -0.035em; color: var(--cf-navy); margin: 0; text-wrap: balance; }
.cf-h2--xl { font-size: clamp(40px, calc(30.86px + 2.857vw), 72px); line-height: 1; letter-spacing: -0.045em; max-width: 12ch; }
.cf-h2--close { font-size: clamp(40px, calc(30.86px + 2.857vw), 72px); line-height: 0.98; letter-spacing: -0.05em; max-width: 12ch; }
.cf-h3 { margin: 0; font-family: var(--cf-font-display); font-weight: 400; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.1; letter-spacing: -0.025em; color: var(--cf-navy); text-wrap: balance; }
.cf-lede { margin: 0; font-size: clamp(18px, calc(17.43px + 0.179vw), 20px); line-height: 1.5; color: var(--cf-navy); text-wrap: pretty; }
.cf-eyebrow { margin: 0; font-size: 16px; font-weight: 600; color: var(--cf-light-blue); }
.cf-num { font: 400 16px/1 var(--cf-font-display); color: var(--cf-light-blue); }
.cf-label { font: 500 12px/1.2 var(--cf-font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cf-medium-blue); }
.cf-mw-14 { max-width: 14ch; } .cf-mw-16 { max-width: 16ch; } .cf-mw-17 { max-width: 17ch; } .cf-mw-20 { max-width: 20ch; }

/* ---- buttons and links ---- */
.cf-button { display: inline-flex; align-items: center; gap: 12px; padding: 16px 24px; background: var(--cf-navy); color: var(--cf-white); border: 1px solid var(--cf-navy); font-weight: 500; font-size: 16px; line-height: normal; text-decoration: none; white-space: nowrap; transition: background var(--cf-ease); }
.cf-button:hover { background: var(--cf-dark-blue); border-color: var(--cf-dark-blue); color: var(--cf-white); }
.cf-button--sm { gap: 10px; padding: 10px 16px; font-size: 14px; }
.cf-link { font-weight: 600; font-size: 16px; color: var(--cf-navy); text-decoration: none; border-bottom: 1px solid var(--cf-navy); padding-bottom: 3px; white-space: nowrap; }
.cf-link:hover { color: var(--cf-light-blue); border-color: var(--cf-light-blue); }
.cf-link--inline { padding-bottom: 0; white-space: normal; }
.cf-pill { display: inline-block; font: 500 12px/1 var(--cf-font-display); color: var(--cf-navy); background: var(--cf-white); border: 1px solid var(--cf-navy); border-radius: 999px; padding: 6px 10px; white-space: nowrap; }

/* ---- header ---- */
.cf-skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: var(--cf-navy); color: var(--cf-white); padding: 12px 16px; font-size: 14px; font-weight: 600; text-decoration: none; }
.cf-skip:focus { left: 16px; }
.cf-header { position: sticky; top: 0; z-index: 40; background: rgba(255, 255, 255, 0.96); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--cf-border-warm); }
.cf-header__in { max-width: var(--cf-frame); margin: 0 auto; padding: 12px var(--cf-gutter); display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.cf-header__logo { flex: none; display: flex; align-items: center; }
.cf-header__logo img { height: 36px; width: auto; display: block; }
.cf-nav { display: flex; align-items: center; gap: 10px; }
.cf-nav__links { display: flex; border: 1px solid var(--cf-border-warm); }
/* links: regular weight, no fill; hover draws a fine line under the word from the left, the current page keeps it */
.cf-nav__links a { position: relative; display: flex; align-items: center; height: 36px; padding: 0 13px; font-size: 12.5px; font-weight: 400; line-height: 1; color: var(--cf-dark-blue); text-decoration: none; border-right: 1px solid var(--cf-border-warm); white-space: nowrap; transition: color 0.25s ease; }
.cf-nav__links a::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 9px; height: 1px; background: var(--cf-navy); transform: scaleX(0); transform-origin: left; transition: transform 0.3s ease; }
.cf-nav__links a:last-child { border-right: 0; }
.cf-nav__links a:hover { color: var(--cf-navy); }
.cf-nav__links a:hover::after, .cf-nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.cf-nav__links a:focus-visible { outline-offset: -2px; }
.cf-nav > .cf-button--sm { height: 38px; padding: 0 14px; gap: 8px; font-size: 12.5px; line-height: 1; }
@media (prefers-reduced-motion: reduce) { .cf-nav__links a, .cf-nav__links a::after { transition: none; } }
.cf-header__compact { flex: none; display: none; gap: 8px; }
.cf-header__compact .cf-button { height: 36px; padding: 0 12px; font-size: 13px; border: 0; }
.cf-menu-btn { height: 36px; padding: 0 12px; font-size: 13px; font-weight: 500; background: var(--cf-white); border: 1px solid var(--cf-navy); color: var(--cf-navy); cursor: pointer; min-width: 72px; }
.cf-menu { position: fixed; top: 61px; left: 0; right: 0; bottom: 0; z-index: 39; background: var(--cf-white); overflow: auto; padding: 16px calc((100% - var(--cf-frame)) / 2 + var(--cf-gutter)) 48px; }
.cf-menu[hidden] { display: none; }
.cf-menu nav a { display: flex; justify-content: space-between; align-items: center; padding: 18px 0; border-bottom: 1px solid var(--cf-line-soft); font-family: var(--cf-font-display); font-size: 22px; letter-spacing: -0.02em; color: var(--cf-navy); text-decoration: none; }
.cf-menu nav a span { color: var(--cf-light-blue); }
.cf-menu .cf-button { margin-top: 32px; }
@media (max-width: 1179px) {
  .cf-nav { display: none; }
  .cf-header__compact { display: flex; }
}
@media (min-width: 1180px) { .cf-menu { display: none; } }

/* ---- footer ---- */
.cf-footer { background: var(--cf-canvas-warm); border-top: 1px solid var(--cf-border-warm); }
.cf-footer__in { max-width: var(--cf-frame); margin: 0 auto; padding: clamp(64px, 8vw, 104px) var(--cf-gutter) 32px; }
.cf-footer__cols { display: flex; flex-wrap: wrap; gap: 48px clamp(32px, 5vw, 80px); }
.cf-footer__brand { flex: 1.4 1 280px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.cf-footer__brand img { height: 56px; width: auto; align-self: flex-start; }
.cf-footer__brand p { margin: 0; max-width: 40ch; font-size: 16px; line-height: 1.6; color: var(--cf-dark-blue); }
.cf-footer__col { flex: 1 1 160px; min-width: 0; }
.cf-footer__col h2 { margin: 0 0 16px; font: 500 12px/1.2 var(--cf-font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cf-light-blue); }
.cf-footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cf-footer__col a { font-size: 14px; color: var(--cf-navy); text-decoration: none; }
.cf-footer__col a:hover { color: var(--cf-light-blue); text-decoration: underline; }
.cf-footer__base { margin-top: clamp(48px, 6vw, 80px); padding-top: 24px; border-top: 1px solid var(--cf-border-warm); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; font-size: 14px; color: var(--cf-medium-blue); }
.cf-footer__base > span:last-child { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.cf-footer__base a { color: var(--cf-medium-blue); text-decoration: none; }
.cf-footer__base a:hover { color: var(--cf-navy); text-decoration: underline; }

/* ---- homepage: hero, point of view, service intro ---- */
.cf-hero { position: relative; border-bottom: 1px dashed var(--cf-divider); }
.cf-hero__top { padding-top: clamp(40px, 6.67vw, 101px); padding-bottom: clamp(28px, 3.33vw, 48px); }
.cf-hero__row { margin-top: clamp(28px, 4vw, 59px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 28px 48px; }
.cf-hero__row > p { flex: 1 1 440px; max-width: 560px; }
.cf-hero__ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.cf-hero__media { padding-bottom: clamp(28px, 3.33vw, 48px); }
.cf-band { position: relative; width: 100%; height: clamp(140px, 18vw, 260px); }
.cf-band img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cf-band .cf-pill { position: absolute; left: 16px; bottom: 16px; pointer-events: none; }
.cf-pov { max-width: 1040px; margin: 0 auto; }
.cf-statement { margin: clamp(32px, 4vw, 48px) 0 0; max-width: 34ch; font-family: var(--cf-font-display); font-weight: 400; font-size: clamp(24px, calc(21.71px + 0.714vw), 32px); line-height: 1.25; letter-spacing: -0.02em; color: var(--cf-navy); text-wrap: pretty; }
.cf-hl { background: var(--cf-highlight); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 0.1em; }
.cf-sse-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px clamp(40px, 5vw, 80px); }
.cf-sse-head > div:first-child { flex: 1.2 1 480px; min-width: 0; display: flex; flex-direction: column; gap: clamp(20px, 2.4vw, 28px); }
.cf-sse-head > div:last-child { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cf-lede--21 { font-size: clamp(18px, calc(17.43px + 0.179vw), 20px); }
.cf-layers-head { margin-top: var(--cf-block-gap); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px 40px; align-items: flex-end; }
.cf-layers-head .cf-h3 { flex: 1 1 420px; min-width: 0; max-width: 22ch; }
.cf-layers-head > span { font-size: 14px; font-weight: 600; line-height: 1.5; color: var(--cf-light-blue); }
.cf-after-layers { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; }

/* ---- client logo row (marquee; static under reduced motion) ---- */
.cf-logos { position: relative; margin-top: clamp(28px, 3.5vw, 48px); padding-top: 22px; border-top: 1px solid var(--cf-border-warm); }
.cf-logos__track { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%); }
/* pause / play (WCAG 2.2.2): sits in the row's faded right edge; not shown when motion is reduced (the row is still) */
.cf-logos__toggle { position: absolute; right: 0; top: 40px; transform: translateY(-50%); width: 28px; height: 28px; padding: 0; border: 1px solid var(--cf-navy); border-radius: 50%; background: var(--cf-white); color: var(--cf-navy); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.cf-logos__toggle svg { fill: currentColor; }
.cf-logos__toggle .cf-i-play, .cf-logos__toggle[aria-pressed="true"] .cf-i-pause { display: none; }
.cf-logos__toggle[aria-pressed="true"] .cf-i-play { display: block; }
.cf-logos.is-paused ul { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .cf-logos__toggle { display: none; } }
.cf-logos ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 72px; width: max-content; animation: cf-scroll 40s linear infinite; }
.cf-logos ul:hover { animation-play-state: paused; }
.cf-logos li { position: relative; flex: none; height: 36px; width: var(--w); opacity: 0.42; }
.cf-logos img { position: absolute; left: 50%; top: 50%; width: auto; max-width: none; height: var(--h); transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))); }
@keyframes cf-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ---- grid of numbered cards (buying moments) and outcome figures: 4 / 2 / 1 columns ---- */
.cf-grid4 { display: grid; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .cf-grid4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cf-grid4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cf-cards { border-top: 1px solid var(--cf-navy); border-left: 1px solid var(--cf-border-warm); }
.cf-card { padding: clamp(24px, 2.4vw, 32px); border-right: 1px solid var(--cf-border-warm); border-bottom: 1px solid var(--cf-border-warm); display: flex; flex-direction: column; gap: 14px; min-height: 220px; }
.cf-card h3 { font-family: var(--cf-font-display); font-weight: 500; font-size: clamp(22px, 1.67vw, 24px); line-height: 1.12; letter-spacing: -0.02em; color: var(--cf-navy); margin: 0; text-wrap: balance; }
.cf-card p { margin: auto 0 0; font-size: 16px; line-height: 1.55; color: var(--cf-dark-blue); text-wrap: pretty; }
.cf-asides { margin-top: 24px; display: flex; flex-wrap: wrap; gap: 12px 32px; font-size: 16px; color: var(--cf-dark-blue); }
.cf-asides a { font-weight: 600; color: var(--cf-navy); text-decoration: none; border-bottom: 1px solid var(--cf-navy); }
.cf-asides a:hover { color: var(--cf-light-blue); border-color: var(--cf-light-blue); }

/* ---- five-layer architecture (accordion: one layer open at a time) ---- */
.cf-layers { margin-top: 24px; background: var(--cf-white); border: 1px solid var(--cf-navy); }
.cf-layer { display: flex; border-bottom: 1px solid var(--cf-border-warm); background: var(--cf-white); }
.cf-layer.is-open { min-height: 300px; }
.cf-layer--enabling { background: var(--cf-canvas-warm); border-top: 1px solid var(--cf-navy); }
.cf-layer__main { flex: 1.15 1 0; min-width: 0; display: flex; flex-direction: column; }
.cf-layer__btn { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; text-align: left; background: transparent; border: 0; cursor: pointer; padding: clamp(20px, 2.4vw, 28px) clamp(20px, 2.6vw, 36px); color: var(--cf-navy); font: inherit; width: 100%; }
.cf-layer__btn:focus-visible { outline-offset: -2px; }
.cf-layer__top { display: flex; gap: 12px; align-items: center; }
.cf-layer__tag { font: 500 12px/1 var(--cf-font-display); color: var(--cf-medium-blue); border: 1px solid var(--cf-light-blue); border-radius: 999px; padding: 5px 9px; white-space: nowrap; }
.cf-layer__title { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; }
.cf-layer__title > span:first-child { flex: 1 1 auto; min-width: 0; font-family: var(--cf-font-display); font-weight: 400; font-size: clamp(22px, 1.67vw, 24px); letter-spacing: -0.02em; line-height: 1.1; }
.cf-layer__sign { flex: none; width: 28px; height: 28px; border: 1px solid var(--cf-navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.cf-layer__means { font-size: 16px; line-height: 1.5; color: var(--cf-dark-blue); }
.cf-layer__steps { list-style: none; margin: 0 clamp(20px, 2.6vw, 36px) 20px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); border-top: 1px solid var(--cf-navy); }
.cf-layer__steps li { padding: 12px 16px 0 0; display: flex; flex-direction: column; gap: 6px; }
.cf-layer__steps li > span:first-child { font-family: var(--cf-font-display); font-size: 18px; color: var(--cf-navy); }
.cf-layer__steps li > span:last-child { font-size: 14px; line-height: 1.45; color: var(--cf-dark-blue); }
.cf-layer__detail { margin-top: auto; padding: 0 clamp(20px, 2.6vw, 36px) clamp(20px, 2.4vw, 28px); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 16px 28px; }
.cf-layer__detail > div { border-top: 2px solid var(--cf-navy); padding-top: 12px; }
.cf-layer__detail > div:first-child { border-top-color: var(--cf-orange); }
.cf-layer__detail p { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: var(--cf-navy); }
.cf-layer__steps[hidden], .cf-layer__detail[hidden] { display: none; }
.cf-layer__img { display: block; flex: 1 1 0; min-width: 0; position: relative; background: var(--cf-highlight); border-left: 1px solid var(--cf-border-warm); overflow: hidden; }
.cf-layer__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cf-layer__img::before { content: ''; position: absolute; left: 20px; top: 20px; width: 1px; bottom: 0; background: rgba(18, 34, 54, 0.55); }
.cf-layer__chip { position: absolute; left: 14px; top: 30px; display: flex; align-items: center; gap: 8px; }
.cf-layer.is-open .cf-layer__chip { top: 40px; }
.cf-layer__chip::before { content: ''; width: 12px; height: 12px; border-radius: 50%; background: var(--cf-white); border: 1px solid var(--cf-navy); }
.cf-layer__chip span { font: 500 12px/1 var(--cf-font-display); color: var(--cf-navy); background: var(--cf-white); border: 1px solid var(--cf-navy); padding: 6px 10px; white-space: nowrap; }
.cf-layer__chip2 { display: none; position: absolute; right: 20px; bottom: 20px; font: 500 12px/1 var(--cf-font-display); color: var(--cf-navy); background: var(--cf-orange-tint); border: 1px solid var(--cf-orange-tint); border-radius: 999px; padding: 6px 10px; white-space: nowrap; }
.cf-layer.is-open .cf-layer__chip2 { display: block; }
@media (max-width: 859px) { .cf-layer__img { display: none; } }
.cf-layers__foot { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.cf-layers__foot > div { display: flex; flex-direction: column; gap: 6px; padding: 18px clamp(20px, 2.6vw, 36px); }
.cf-layers__foot > div + div { border-left: 1px solid var(--cf-border-warm); }
.cf-layers__foot span:first-child { font-size: 14px; color: var(--cf-light-blue); }
.cf-layers__foot span:last-child { font-family: var(--cf-font-display); font-size: 18px; color: var(--cf-navy); }

/* ---- Design / Enable / Run tabs ---- */
.cf-stages { background: var(--cf-white); border: 1px solid var(--cf-border-warm); }
.cf-stages__tabs { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.cf-stage { text-align: left; cursor: pointer; font: inherit; background: var(--cf-white); border: 0; border-right: 1px solid var(--cf-line-soft); border-bottom: 1px solid var(--cf-line-soft); padding: clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 10px; min-width: 0; transition: background var(--cf-ease); }
.cf-stage[aria-selected="true"] { background: var(--cf-canvas-warm); }
.cf-stage:focus-visible { outline-offset: -2px; }
.cf-stage__chip { align-self: flex-start; font: 500 12px/1 var(--cf-font-display); color: var(--cf-navy); border: 1px solid var(--cf-navy); border-radius: 999px; padding: 5px 9px; white-space: nowrap; background: var(--cf-white); }
.cf-stage[aria-selected="true"] .cf-stage__chip { background: var(--cf-highlight); }
.cf-stage__tick { width: 1px; height: 14px; background: var(--cf-navy); margin: -10px 0 -10px 16px; }
.cf-stage__bar { height: 3px; margin-bottom: 8px; background: var(--c); }
.cf-stage__title { font-family: var(--cf-font-display); font-weight: 500; font-size: clamp(22px, 1.67vw, 24px); letter-spacing: -0.025em; color: var(--cf-navy); line-height: 1.05; }
.cf-stage__line { font-size: 16px; line-height: 1.5; color: var(--cf-dark-blue); text-wrap: pretty; }
.cf-stage__state { margin-top: 4px; font: 500 12px/1 var(--cf-font-display); color: var(--cf-light-blue); }
.cf-stage__state--on, .cf-stage[aria-selected="true"] .cf-stage__state--off { display: none; }
.cf-stage[aria-selected="true"] .cf-stage__state--on { display: inline; color: var(--cf-navy); }
/* testimonial panels share one grid cell, so the box keeps the height of the tallest and nothing below moves */
.cf-stack { display: grid; }
.cf-stack > * { grid-area: 1 / 1; }
.cf-stack > [hidden] { display: block; visibility: hidden; }
.cf-stages__panel { padding: clamp(20px, 2.6vw, 32px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 40px; }
.cf-stages__panel[hidden] { display: none; }
.cf-stages__panel > div { flex: 1 1 420px; min-width: 0; }
.cf-stages__panel p { font-size: 16px; line-height: 1.55; color: var(--cf-dark-blue); margin: 6px 0 0; }
.cf-stages__panel p.cf-stages__start { margin: 0; font-weight: 600; color: var(--cf-navy); line-height: normal; }
.cf-note { margin: 24px 0 0; max-width: 68ch; font-size: 16px; line-height: 1.6; color: var(--cf-medium-blue); }

/* ---- testimonial selector ---- */
.cf-proof__tabs { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 4px; position: relative; z-index: 1; }
.cf-proof__tab { height: 60px; overflow: hidden; display: flex; align-items: center; padding: 0 16px; margin-bottom: -1px; border: 1px solid transparent; border-bottom: 0; background: transparent; cursor: pointer; }
.cf-proof__tab[aria-selected="true"] { background: var(--cf-white); border-color: var(--cf-border-warm); }
.cf-proof__tab:focus-visible { outline: 2px solid var(--cf-light-blue); outline-offset: -2px; }
.cf-proof__tab img { height: 80px; width: 128px; object-fit: contain; display: block; opacity: 0.55; }
.cf-proof__tab[aria-selected="true"] img { opacity: 1; }
.cf-proof__panels { border: 1px solid var(--cf-border-warm); background: var(--cf-white); }
.cf-proof__panel { display: flex; flex-wrap: wrap; }
.cf-stack > .cf-proof__panel[hidden] { display: flex; }
.cf-proof__who { flex: 1 1 300px; min-width: 0; padding: clamp(24px, 3vw, 44px); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
.cf-proof__who > div:first-child { display: flex; flex-direction: column; gap: 6px; }
.cf-proof__name { margin: 0; font-family: var(--cf-font-display); font-weight: 400; font-size: clamp(22px, 1.67vw, 24px); line-height: 1.15; letter-spacing: -0.02em; color: var(--cf-navy); }
.cf-proof__role { font-size: 16px; line-height: 1.45; color: var(--cf-medium-blue); }
.cf-glance { background: var(--cf-canvas-warm); padding: 20px 22px 8px; display: flex; flex-direction: column; max-width: 420px; }
.cf-glance > p { margin: 0; font-family: var(--cf-font-display); font-size: 18px; color: var(--cf-navy); padding-bottom: 14px; }
.cf-glance dl { margin: 0; display: flex; flex-direction: column; }
.cf-glance dl > div { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; border-top: 1px solid var(--cf-border-warm); }
.cf-glance dl > div.cf-glance--col { flex-direction: column; gap: 4px; padding: 10px 0 14px; }
.cf-glance dt { font-size: 14px; color: var(--cf-medium-blue); }
.cf-glance dd { margin: 0; font-size: 14px; font-weight: 500; color: var(--cf-navy); text-align: right; }
.cf-glance .cf-glance--col dd { font-size: 16px; line-height: 1.4; text-align: left; text-wrap: pretty; }
.cf-proof__quote { flex: 2 1 460px; min-width: 0; margin: 0; padding: clamp(24px, 3vw, 44px); border-left: 1px solid var(--cf-border-warm); display: flex; flex-direction: column; justify-content: space-between; gap: 40px; }
@media (max-width: 859px) { .cf-proof__quote { border-left: 0; border-top: 1px solid var(--cf-border-warm); } }
.cf-proof__quote blockquote { margin: 0; font-family: var(--cf-font-display); font-weight: 400; font-size: clamp(22px, calc(19.71px + 0.714vw), 30px); line-height: 1.28; letter-spacing: -0.02em; color: var(--cf-navy); text-wrap: pretty; }
.cf-proof__nav { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.cf-proof__count { font-size: 14px; color: var(--cf-medium-blue); white-space: nowrap; }
.cf-proof__nav > div { display: flex; gap: 8px; }
.cf-round { width: 44px; height: 44px; border: 1px solid var(--cf-border-warm); border-radius: 50%; background: var(--cf-white); color: var(--cf-navy); font-size: 18px; cursor: pointer; }
.cf-round:hover { border-color: var(--cf-navy); }
.cf-round:focus-visible { outline-offset: 2px; }
.cf-outcomes { list-style: none; margin: clamp(40px, 5vw, 64px) 0 0; padding: 0; column-gap: 24px; border-top: 1px solid var(--cf-navy); }
.cf-outcomes li { padding: 24px 0; display: flex; flex-direction: column; gap: 8px; border-bottom: 1px solid var(--cf-border-warm); }
.cf-outcomes li > span:nth-child(1) { font-family: var(--cf-font-display); font-size: clamp(32px, calc(29.71px + 0.714vw), 40px); line-height: 1; letter-spacing: -0.035em; color: var(--cf-navy); }
.cf-outcomes li > span:nth-child(2) { font-size: 16px; line-height: 1.4; color: var(--cf-dark-blue); }
.cf-outcomes li > span:nth-child(3) { font-size: 14px; font-weight: 600; color: var(--cf-medium-blue); }
.cf-small { margin: 20px 0 0; max-width: 720px; font-size: 14px; line-height: 1.5; color: var(--cf-medium-blue); text-wrap: pretty; }

/* ---- entry routes ---- */
.cf-routes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 20px; }
.cf-route { background: var(--cf-white); border: 1px solid var(--cf-border-warm); display: flex; flex-direction: column; text-decoration: none; color: var(--cf-navy); transition: border-color var(--cf-ease); }
.cf-route:hover { border-color: var(--cf-navy); }
.cf-route__img { position: relative; height: 180px; overflow: hidden; }
.cf-route__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cf-route__body { padding: clamp(24px, 2.6vw, 36px); display: flex; flex-direction: column; gap: 12px; flex: 1; }
.cf-route__title { margin: 0; font-family: var(--cf-font-display); font-weight: 400; font-size: clamp(22px, 1.67vw, 24px); line-height: 1.1; letter-spacing: -0.025em; }
.cf-route__sub { font-size: 18px; line-height: 1.4; color: var(--cf-medium-blue); }
.cf-route__line { font-size: 16px; line-height: 1.55; color: var(--cf-dark-blue); }
.cf-route__cta { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--cf-line-soft); font-weight: 600; font-size: 16px; }

/* ---- closing conversion ---- */
.cf-close { position: relative; padding: clamp(80px, 9.33vw, 147px) 0; background: var(--cf-white); }
.cf-close .cf-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(24px, 3vw, 36px); }
.cf-close p { margin: 0; max-width: 44ch; font-size: clamp(18px, calc(17.43px + 0.179vw), 20px); line-height: 1.55; color: var(--cf-navy); text-wrap: pretty; }

/* light-blue text on warm backgrounds: the AA shade (see --cf-light-blue-on-warm) */
.cf-section--warm .cf-eyebrow, .cf-section--warm .cf-layers-head > span, .cf-layer--enabling .cf-num, .cf-stage[aria-selected="true"] .cf-num, .cf-footer__col h2 { color: var(--cf-light-blue-on-warm); }
.cf-footer__col a:hover, .cf-section--warm .cf-link:hover { color: var(--cf-light-blue-on-warm); }
.cf-section--warm .cf-link:hover { border-color: var(--cf-light-blue-on-warm); }
:where(.cf-footer, .cf-section--warm) :where(a:hover) { color: var(--cf-light-blue-on-warm); }

/* ======== Strategic Sales Enablement (V8) components; shared primitives above ======== */
.cf-mw-11 { max-width: 11ch; } .cf-mw-13 { max-width: 13ch; } .cf-mw-18 { max-width: 18ch; } .cf-mw-19 { max-width: 19ch; }
.cf-button--lg { padding: 17px 24px; flex: none; }
.cf-button--md { padding: 13px 18px; }
.cf-link--wrap { white-space: normal; }
.cf-demo__note .cf-link { flex: none; }
.cf-round--lg { width: 48px; height: 48px; border-color: var(--cf-navy); }
.cf-round--navy { background: var(--cf-navy); color: var(--cf-white); }
.cf-n12 { font: 500 12px/1 var(--cf-font-display); color: var(--cf-medium-blue); }
.cf-label--blue { color: var(--cf-light-blue); line-height: 1; }
.cf-panel-title { margin: 0 0 20px; font-size: 14px; line-height: 1.4; font-weight: 600; color: var(--cf-navy); }
.cf-section--open { border-bottom: 0; }
.cf-box { background: var(--cf-white); border: 1px solid var(--cf-border-warm); }
.cf-sign { flex: none; width: 30px; height: 30px; border: 1px solid var(--cf-navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; }

/* hero */
.cf-hero--sse .cf-hero__top { padding-bottom: clamp(32px, 4vw, 54px); }
.cf-hero--sse .cf-h1 { font-size: clamp(40px, calc(30.86px + 2.857vw), 72px); max-width: 20ch; }
.cf-hero--sse .cf-hero__row > p { max-width: 560px; line-height: 1.55; }
.cf-hero--sse .cf-hero__media { padding-bottom: clamp(32px, 4vw, 54px); }
.cf-hero--sse .cf-band { height: clamp(200px, 28vw, 420px); }

/* why you need it: a grid, or a swipe row with previous / next below 860px */
.cf-needs { margin-top: var(--cf-block-gap); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); border-top: 1px solid var(--cf-navy); border-left: 1px solid var(--cf-border-warm); }
.cf-need { padding: clamp(24px, 2.4vw, 32px); border-right: 1px solid var(--cf-border-warm); border-bottom: 1px solid var(--cf-border-warm); display: flex; flex-direction: column; gap: 14px; min-height: 220px; }
.cf-need .cf-num { align-self: flex-start; }
.cf-need h3 { font-family: var(--cf-font-display); font-weight: 500; font-size: clamp(21px, 1.67vw, 24px); line-height: 1.12; letter-spacing: -0.02em; color: var(--cf-navy); margin: 0; text-wrap: balance; }
.cf-need p { margin: auto 0 0; font-size: 16px; line-height: 1.55; color: var(--cf-dark-blue); text-wrap: pretty; }
.cf-needs__nav { display: none; }
@media (max-width: 859px) {
  .cf-needs { margin: 56px calc(-1 * var(--cf-gutter)) 0; padding: 0 var(--cf-gutter); display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border: 0; }
  .cf-needs::-webkit-scrollbar { display: none; }
  .cf-need { flex: 0 0 82%; scroll-snap-align: start; border: 1px solid var(--cf-border-warm); border-top-color: var(--cf-navy); padding: 24px; background: var(--cf-white); }
  .cf-need h3 { font-size: 22px; text-wrap: wrap; }
  .cf-need p { text-wrap: wrap; }
  .cf-needs__nav { margin-top: 16px; display: flex; gap: 10px; justify-content: flex-end; }
}
.cf-triggers { margin: clamp(28px, 3vw, 40px) 0 0; max-width: 68ch; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: var(--cf-navy); text-wrap: pretty; }
.cf-statement--lg { margin: 0 auto; max-width: 28ch; font-size: clamp(32px, calc(29.71px + 0.714vw), 40px); line-height: 1.16; letter-spacing: -0.03em; }

/* section head with the heading itself as the flex item */
.cf-head2 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; }
.cf-head2 > h2 { flex: 1 1 480px; }
.cf-head2--520 > h2 { flex-basis: 520px; }
.cf-head2 > p { flex: 0 1 400px; margin: 0; font-size: 18px; line-height: 1.55; color: var(--cf-dark-blue); text-wrap: pretty; }

/* the service: numbered rows */
.cf-pillars { border-top: 1px solid var(--cf-navy); }
.cf-pillar { display: flex; flex-wrap: wrap; gap: 14px clamp(24px, 5vw, 80px); padding: clamp(24px, 3vw, 40px) 0; border-bottom: 1px solid var(--cf-line-strong); }
.cf-pillar h3 { flex: 1 1 300px; min-width: 0; display: flex; gap: 18px; align-items: baseline; margin: 0; font-family: var(--cf-font-display); font-weight: 400; font-size: clamp(22px, 1.67vw, 24px); line-height: 1.12; letter-spacing: -0.025em; color: var(--cf-navy); }
.cf-pillar__n { flex: none; align-self: flex-start; height: 1.12em; display: flex; align-items: center; }
.cf-pillar > div { flex: 1.25 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.cf-pillar p { margin: 0; font-size: clamp(17px, 1.39vw, 20px); line-height: 1.45; color: var(--cf-navy); text-wrap: pretty; }
.cf-pillar__tag { font: 500 12px/1.4 var(--cf-font-display); letter-spacing: 0.04em; color: var(--cf-medium-blue); }

/* cells: the stage cell without the button (quarters, AI steps); measurement tabs use .cf-stage */
.cf-cells { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.cf-cells--150 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); }
.cf-cell { padding: clamp(20px, 2.4vw, 32px); border-right: 1px solid var(--cf-line-soft); border-bottom: 1px solid var(--cf-line-soft); display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cf-stage--small-n .cf-stage__title, .cf-cell .cf-stage__title { line-height: 1; }

/* how it works: measurement panels */
.cf-mpanel { padding: clamp(20px, 2.6vw, 36px) clamp(20px, 2.4vw, 32px); }
.cf-rubric { border-top: 1px solid var(--cf-navy); }
.cf-rubric__row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.6fr) 96px; gap: 8px 24px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--cf-line-soft); }
.cf-rubric__name { font-weight: 600; font-size: 16px; color: var(--cf-navy); }
.cf-rubric__desc { font-size: 14px; color: var(--cf-medium-blue); margin-top: 2px; }
.cf-rubric__bar { position: relative; height: 14px; }
.cf-rubric__bar > span { position: absolute; top: 6px; height: 2px; left: 0; }
.cf-rubric__bar > span:first-child { right: 0; background: var(--cf-line-soft); }
.cf-rubric__bar > span:last-child { top: 0; width: 1px; height: 14px; background: var(--cf-navy); }
.cf-rubric__tag { justify-self: end; font: 500 12px/1 var(--cf-font-display); color: var(--cf-navy); padding: 5px 8px; border-radius: 999px; background: var(--cf-white); border: 1px solid var(--cf-border-warm); white-space: nowrap; }
.cf-rubric__tag.is-gap { background: var(--cf-orange-tint); border-color: var(--cf-orange-tint); }
.cf-rubric__key { margin: 14px 0 0; font: 400 12px/1.5 var(--cf-font-display); color: var(--cf-medium-blue); }
.cf-rubric__key span { color: var(--cf-navy); background: var(--cf-orange-tint); padding: 1px 4px; }
.cf-evidence { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); border-top: 1px solid var(--cf-navy); border-left: 1px solid var(--cf-line-soft); }
.cf-evidence > div { padding: 16px; border-right: 1px solid var(--cf-line-soft); border-bottom: 1px solid var(--cf-line-soft); display: flex; flex-direction: column; gap: 8px; }
.cf-evidence__l { font: 500 22px/1 var(--cf-font-display); color: var(--cf-navy); }
.cf-evidence__k { font-weight: 600; font-size: 14px; color: var(--cf-navy); }
.cf-evidence__s { display: flex; align-items: center; gap: 7px; font: 500 12px/1 var(--cf-font-display); color: var(--cf-medium-blue); }
.cf-evidence__s > span { width: 8px; height: 8px; border-radius: 50%; border: 1px solid; }
.cf-kpi { border-top: 1px solid var(--cf-navy); }
.cf-kpi__row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) 90px; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--cf-line-soft); align-items: end; }
.cf-kpi__row > span:first-child { font-weight: 600; font-size: 16px; color: var(--cf-navy); }
.cf-kpi__row > span:last-child { text-align: right; font: 500 12px/1 var(--cf-font-display); color: var(--cf-medium-blue); }
.cf-kpi__blank { height: 18px; border-bottom: 1px dashed var(--cf-line-strong); }
.cf-kpi__head { padding: 12px 0; align-items: normal; font: 500 12px/1 var(--cf-font-display); text-transform: uppercase; color: var(--cf-medium-blue); }
.cf-kpi__row.cf-kpi__head > span:first-child { font: inherit; color: inherit; }
.cf-mpanel__note { margin: 20px 0 0; font-size: 16px; line-height: 1.55; color: var(--cf-navy); max-width: 72ch; }
.cf-mpanel__eg { margin: 8px 0 0; font-size: 12px; line-height: 1.5; color: var(--cf-medium-blue); }

/* disclosures */
.cf-disclosure { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 0; background: transparent; border: 0; cursor: pointer; text-align: left; color: var(--cf-navy); }
.cf-disclosure > span:first-child { font-family: var(--cf-font-display); font-weight: 500; font-size: 18px; }
.cf-disclosure--lg { border-bottom: 1px solid var(--cf-line-strong); }
.cf-disclosure--lg > span:first-child { font-size: clamp(18px, 1.6vw, 21px); }
.cf-loop { border-top: 1px solid var(--cf-line-soft); padding: 0 clamp(20px, 2.4vw, 32px); }
.cf-loop__steps { list-style: none; margin: 0; padding: 0 0 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 16px; }
.cf-loop__steps[hidden], .cf-rhythm[hidden] { display: none; }
.cf-loop__steps li { display: flex; flex-direction: column; gap: 8px; }
.cf-loop__steps li > span:nth-child(1) { height: 3px; background: var(--cf-light-blue); }
.cf-loop__steps li > span:nth-child(2) { font: 500 12px/1 var(--cf-font-display); color: var(--cf-medium-blue); }
.cf-loop__steps li > span:nth-child(3) { font-size: 16px; line-height: 1.4; color: var(--cf-navy); font-weight: 500; }

/* the relationship */
.cf-intro2 { margin-top: clamp(24px, 3vw, 36px); display: flex; flex-wrap: wrap; gap: 16px clamp(24px, 4vw, 64px); }
.cf-intro2 p { flex: 1 1 360px; max-width: 520px; margin: 0; text-wrap: pretty; }
.cf-intro2 p:first-child { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.5; color: var(--cf-navy); }
.cf-intro2 p:last-child { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: var(--cf-dark-blue); }
.cf-running { padding: clamp(18px, 2.4vw, 28px) clamp(20px, 2.4vw, 32px); display: flex; flex-direction: column; gap: 14px; }
.cf-running > .cf-label { line-height: 1; }
.cf-running > div { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 12px 24px; }
.cf-running > div > div { display: flex; gap: 12px; align-items: baseline; }
.cf-mark { flex: none; }
.cf-running__when { font: 500 12px/1.3 var(--cf-font-display); color: var(--cf-light-blue); }
.cf-running__what { font-weight: 600; font-size: 16px; line-height: 1.35; color: var(--cf-navy); margin-top: 3px; }
.cf-owns { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 12px 32px; justify-content: space-between; }
.cf-owns p { margin: 0; }
.cf-owns p:first-child { flex: 1 1 480px; font-size: 16px; line-height: 1.55; color: var(--cf-navy); }
.cf-owns p:last-child { flex: 0 1 360px; font-size: 14px; line-height: 1.5; color: var(--cf-medium-blue); }
.cf-details { margin-top: 28px; border-top: 1px solid var(--cf-navy); }
.cf-install { padding: 24px 0 8px; }
.cf-steps { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 180px), 1fr)); border-top: 1px solid var(--cf-line-strong); border-left: 1px solid var(--cf-line-strong); }
.cf-steps > div { background: var(--cf-canvas-warm); padding: 16px 18px; display: flex; flex-direction: column; gap: 6px; border-right: 1px solid var(--cf-line-strong); border-bottom: 1px solid var(--cf-line-strong); }
.cf-steps__n { font: 500 12px/1 var(--cf-font-display); color: var(--cf-light-blue-on-warm); }
.cf-steps__name { font-family: var(--cf-font-display); font-weight: 500; font-size: 20px; color: var(--cf-navy); }
.cf-steps__d { font-size: 14px; line-height: 1.5; color: var(--cf-dark-blue); }
.cf-sprints { margin-top: 16px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: 16px; }
.cf-sprints article { background: var(--cf-white); border: 1px solid var(--cf-border-warm); padding: 20px; display: flex; flex-direction: column; gap: 10px; }
.cf-sprints h3 { font-family: var(--cf-font-display); font-weight: 500; font-size: 18px; line-height: 1.2; color: var(--cf-navy); margin: 0; }
.cf-sprints ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cf-line-soft); }
.cf-sprints li { padding: 7px 0; border-bottom: 1px solid var(--cf-line-soft); font-size: 14px; line-height: 1.4; color: var(--cf-navy); }
.cf-sprints p { margin: 0; font-size: 12px; line-height: 1.5; color: var(--cf-medium-blue); }
.cf-rhythm { padding: 8px 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 0 28px; }
.cf-rhythm > div { padding: 16px 0; border-bottom: 1px solid var(--cf-border-warm); }
.cf-rhythm .cf-running__when { line-height: 1; }
.cf-rhythm__t { font-weight: 600; font-size: 16px; color: var(--cf-navy); margin: 6px 0; }
.cf-rhythm p { margin: 0; font-size: 14px; line-height: 1.55; color: var(--cf-dark-blue); }

/* technology: the approve / dismiss example */
.cf-demo { border-top: 1px solid var(--cf-navy); }
.cf-demo__row { display: grid; grid-template-columns: minmax(0, 160px) minmax(0, 1fr) auto; gap: 10px 24px; align-items: center; padding: 16px 0; border-bottom: 1px solid var(--cf-line-soft); }
.cf-demo__type { font-size: 14px; line-height: 1.3; font-weight: 600; color: var(--cf-medium-blue); }
.cf-demo__text { font-size: 16px; line-height: 1.45; color: var(--cf-navy); }
/* V8 greys a dismissed draft to #8E8677 (3.6:1); the nearest shade that meets AA for this 16px text is #7C7567 (4.57:1) */
.cf-demo__row.is-d .cf-demo__text { color: #7C7567; text-decoration: line-through; }
.cf-demo__ctl { display: flex; align-items: center; gap: 8px; justify-self: end; }
.cf-demo__status { font: 500 12px/1 var(--cf-font-display); color: var(--cf-medium-blue); white-space: nowrap; margin-right: 6px; }
.cf-demo__row.is-a .cf-demo__status { color: var(--cf-navy); }
.cf-tick, .cf-cross { width: 38px; height: 38px; border-radius: 50%; cursor: pointer; font-size: 16px; line-height: 1; padding: 0; }
.cf-tick { border: 1px solid var(--cf-navy); background: var(--cf-white); color: var(--cf-navy); }
.cf-tick[aria-pressed="true"] { background: var(--cf-navy); color: var(--cf-white); }
.cf-cross { border: 1px solid var(--cf-line-strong); background: var(--cf-white); color: var(--cf-medium-blue); }
.cf-demo__foot { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px; }
.cf-demo__foot > span { font-size: 16px; color: var(--cf-navy); }
.cf-demo__count { font: 500 12px/1 var(--cf-font-display); border: 1px solid var(--cf-navy); border-radius: 999px; padding: 5px 9px; margin-right: 10px; }
.cf-reset { background: transparent; border: 0; border-bottom: 1px solid var(--cf-navy); padding: 0 0 2px; font-size: 14px; color: var(--cf-navy); cursor: pointer; }
.cf-demo__note { margin-top: 18px; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 32px; }
.cf-demo__note p { margin: 0; flex: 1 1 440px; font-size: 14px; line-height: 1.55; color: var(--cf-medium-blue); }

/* technology: quote and the operator video */
.cf-proof2 { margin-top: var(--cf-block-gap); display: flex; flex-wrap: wrap; gap: 24px; align-items: stretch; }
.cf-proof2 figure { flex: 2 1 520px; min-width: 0; margin: 0; border-top: 1px solid var(--cf-navy); padding-top: 28px; display: flex; flex-direction: column; gap: 28px; }
.cf-proof2 blockquote { margin: 0; font-family: var(--cf-font-display); font-weight: 500; font-size: clamp(22px, calc(19.71px + 0.714vw), 30px); line-height: 1.25; letter-spacing: -0.02em; color: var(--cf-navy); text-wrap: pretty; }
.cf-proof2 figcaption { display: flex; flex-direction: column; gap: 4px; }
.cf-proof2 figcaption span:first-child { font-weight: 600; font-size: 16px; color: var(--cf-navy); }
.cf-proof2 figcaption span:last-child { font-size: 14px; color: var(--cf-medium-blue); }
.cf-video { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; text-decoration: none; color: var(--cf-navy); border: 1px solid var(--cf-border-warm); background: var(--cf-white); }
.cf-video:hover { border-color: var(--cf-navy); color: var(--cf-navy); }
.cf-video__thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cf-navy); }
.cf-video__thumb > * { position: absolute; }
.cf-video__thumb img, .cf-video__navy, .cf-video__fade { inset: 0; width: 100%; height: 100%; }
.cf-video__thumb img { object-fit: cover; }
.cf-video__yt { filter: grayscale(1) contrast(1.08) brightness(1.05); }
.cf-video__navy { background: var(--cf-medium-blue); mix-blend-mode: multiply; opacity: 0.82; }
.cf-video__tex { mix-blend-mode: screen; opacity: 0.35; }
.cf-video__fade { background: linear-gradient(to top, rgba(18, 34, 54, 0.75) 0%, rgba(18, 34, 54, 0) 55%); }
.cf-video__tag { left: 16px; top: 16px; font: 500 12px/1 var(--cf-font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cf-white); border: 1px solid rgba(255, 255, 255, 0.7); border-radius: 999px; padding: 6px 10px; }
.cf-video__play { left: 16px; bottom: 16px; display: flex; align-items: stretch; }
.cf-video__play > span:first-child { display: flex; align-items: center; padding: 0 14px; height: 44px; background: var(--cf-white); color: var(--cf-navy); font-weight: 500; font-size: 14px; }
.cf-video__play > span:last-child { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--cf-white); display: flex; align-items: center; justify-content: center; }
.cf-video__play > span:last-child span { width: 0; height: 0; margin-left: 3px; border-left: 10px solid var(--cf-white); border-top: 6px solid transparent; border-bottom: 6px solid transparent; }
.cf-video__body { padding: 18px 20px; display: flex; flex-direction: column; gap: 6px; }
.cf-video__body > span:last-child { font-family: var(--cf-font-display); font-weight: 500; font-size: 18px; line-height: 1.3; }

/* get started: three route cards, then the FAQ */
.cf-start { display: flex; flex-wrap: wrap; gap: 32px clamp(32px, 5vw, 80px); align-items: flex-start; }
.cf-start > div:first-child { flex: 1 1 300px; min-width: 0; }
.cf-routes2 { flex: 1.7 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.cf-route2 { background: var(--cf-white); border: 1px solid var(--cf-border-warm); min-width: 0; display: flex; flex-wrap: wrap; }
.cf-route2__img { position: relative; flex: 1 1 180px; min-height: 180px; }
/* fills the strip beside the text; when the card wraps on narrow screens it is 3:2, as in V8 */
.cf-route2__img img { display: block; width: 100%; height: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.cf-route2__body { flex: 3 1 300px; min-width: 0; padding: clamp(28px, 3.2vw, 44px); display: flex; flex-direction: column; gap: 14px; }
.cf-route2__body .cf-num { align-self: flex-start; }
.cf-route2 h3 { font-family: var(--cf-font-display); font-weight: 400; font-size: clamp(22px, 1.67vw, 24px); line-height: 1.1; letter-spacing: -0.025em; color: var(--cf-navy); margin: 6px 0 0; }
.cf-route2__body > p { margin: 0 0 14px; font-size: 18px; line-height: 1.4; color: var(--cf-medium-blue); }
.cf-route2 dl { margin: 0; display: grid; grid-template-columns: minmax(0, 110px) minmax(0, 1fr); gap: 10px 20px; padding-top: 16px; border-top: 1px solid var(--cf-line-soft); align-items: baseline; }
.cf-route2 dt { font: 500 12px/1.4 var(--cf-font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cf-light-blue); }
.cf-route2 dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--cf-navy); }
.cf-route2__links { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 12px 28px; align-items: center; }
.cf-route2__links .cf-button { white-space: normal; }
.cf-faq { margin-top: clamp(64px, 7.33vw, 107px); display: flex; flex-wrap: wrap; gap: 24px clamp(32px, 5vw, 80px); }
.cf-faq > h2 { flex: 1 1 260px; font-family: var(--cf-font-display); font-weight: 400; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.08; letter-spacing: -0.03em; color: var(--cf-navy); margin: 0; max-width: 12ch; }
.cf-faq__list { flex: 2.4 1 480px; min-width: 0; border-top: 1px solid var(--cf-navy); }
.cf-faq__item { padding-top: 22px; }
.cf-faq__item h3 { margin: 0; font: inherit; }
.cf-faq__item button { width: 100%; display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding: 0; background: transparent; border: 0; border-bottom: 1px solid var(--cf-navy); cursor: pointer; text-align: left; color: var(--cf-navy); }
.cf-faq__item button > span:first-child { background: #E6E1D8; padding: 9px 12px; font-weight: 600; font-size: clamp(15px, 1.4vw, 17px); line-height: 1.3; transition: background var(--cf-ease); }
.cf-faq__item.is-open button > span:first-child { background: var(--cf-highlight); }
.cf-knob { flex: none; width: 28px; height: 10px; border: 1px solid var(--cf-navy); border-radius: 999px; background: var(--cf-section-warm); margin-bottom: -5px; transition: all var(--cf-ease); }
.cf-faq__item.is-open .cf-knob { width: 24px; height: 24px; margin-bottom: -12px; }
.cf-faq__item p { margin: 0; padding: 16px 44px 8px 0; font-size: 16px; line-height: 1.6; color: var(--cf-dark-blue); text-wrap: pretty; }

/* closing call to action with the floating labels (860px and wider) */
.cf-close--sse { overflow: hidden; border-top: 1px dashed var(--cf-divider); }
.cf-close--sse .cf-wrap { position: relative; }
.cf-floaters { position: absolute; inset: 0; pointer-events: none; }
.cf-floaters > div { position: absolute; display: flex; align-items: center; }
.cf-floaters > div > span:first-child { width: 28px; height: 28px; border: 1px solid var(--cf-navy); border-radius: 50%; background: var(--cf-white); display: flex; align-items: center; justify-content: center; }
.cf-floaters > div > span:first-child span { width: 6px; height: 6px; border-radius: 50%; background: var(--cf-navy); }
.cf-floaters > div > span:last-child { height: 30px; border: 1px solid var(--cf-navy); display: flex; align-items: center; padding: 0 12px; font: 500 12px/1 var(--cf-font-display); color: var(--cf-navy); white-space: nowrap; }
@media (max-width: 859px) { .cf-floaters { display: none; } }
.cf-veil { background: rgba(255, 255, 255, 0.85); }
.cf-close__copy { display: flex; flex-direction: column; gap: 14px; align-items: center; max-width: 42ch; background: rgba(255, 255, 255, 0.88); }
.cf-close .cf-close__copy p { margin: 0; max-width: none; text-wrap: pretty; }
.cf-close .cf-close__copy p:first-child { font-size: clamp(18px, calc(17.43px + 0.179vw), 20px); line-height: 1.5; color: var(--cf-navy); }
.cf-close .cf-close__copy p:last-child { font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: var(--cf-dark-blue); }

/* light-blue text on a warm background on this page: the AA shade */
.cf-section--warm .cf-pillar .cf-num { color: var(--cf-light-blue-on-warm); }

/* ======== Phones (Charles, 31 Oct: "make it look perfect"): layouts V8 squeezes below 640px ======== */
@media (max-width: 640px) {
  /* rubric: name and description across the row, then the bar and the score */
  .cf-rubric__row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; }
  .cf-rubric__row > div:not(.cf-rubric__bar) { grid-column: 1 / -1; }
  /* KPI view: the KPI across the row, then baseline, latest and review under their headings */
  .cf-kpi__row { grid-template-columns: repeat(2, minmax(0, 1fr)) auto; gap: 8px 16px; }
  .cf-kpi__row > span:first-child { grid-column: 1 / -1; }
  .cf-kpi__head > span:first-child { display: none; }
  /* approve / dismiss: type and controls on one line, the suggestion below at full width */
  .cf-demo__row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px 16px; }
  .cf-demo__text { grid-column: 1 / -1; grid-row: 2; }
  .cf-demo__foot > span { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
  .cf-demo__count { margin-right: 0; }
  /* route cards: "Best for" / "Includes" above their text */
  .cf-route2 dl { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .cf-route2 dd + dt { margin-top: 10px; }
}
@media (max-width: 420px) {
  /* phones: buttons 4px narrower each side, so 'Book a 30 minute conversation →' stays on one line at 390 */
  .cf-button { padding-left: 20px; padding-right: 20px; gap: 10px; }
  /* too narrow for type and controls side by side: type, suggestion, then the controls */
  .cf-demo__row { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .cf-demo__text { grid-column: auto; grid-row: auto; }
}
@media (max-width: 480px) {
  /* long buttons and links wrap inside themselves instead of running off the screen */
  .cf-button { white-space: normal; }
  .cf-button--lg { flex: 0 1 auto; }
  .cf-demo__note .cf-link { flex: 0 1 auto; }
  .cf-link { white-space: normal; }
}

/* ======== Go Nimbly scale (Charles, 31 Oct: "match"): line length ========
   Go Nimbly keeps running text within ~40em (median 564px at 16px, 800px at 20px); these paragraphs ran to 58–62em */
.cf-stages__panel p, .cf-faq__item p, .cf-demo__note p, .cf-owns p:first-child, .cf-mpanel__note, .cf-note, .cf-triggers, .cf-small { max-width: 40em; }

/* pills keep to one line when they fit and wrap rather than run out of their cell (WCAG 1.4.12 text spacing) */
.cf-stage__chip, .cf-layer__tag { white-space: normal; max-width: 100%; }


/* ======== Phase 2 components (For Revenue Leaders V2; reused by 5 Days to Scale V3 and MEDDPICC V3) ======== */
/* header: the current page's link (V2): semibold on the warm fill with a navy underline; in the menu a left marker */
.cf-nav__links a[aria-current="page"] { color: var(--cf-navy); }
.cf-menu nav a[aria-current="page"] { padding-left: 14px; box-shadow: inset 1px 0 0 var(--cf-navy); }
.cf-mw-15 { max-width: 15ch; }
.cf-h1--72 { font-size: clamp(40px, calc(30.86px + 2.857vw), 72px); letter-spacing: -0.045em; }
.cf-h2--frl { letter-spacing: -0.03em; }
.cf-eyebrow--hero { margin: 0 0 24px; }
/* split hero: headline left, intro and action in a column behind a navy rule (stacked under 1056px) */
.cf-hero--split .cf-split { padding-top: var(--cf-section-y); padding-bottom: var(--cf-block-gap); display: flex; flex-wrap: wrap; align-items: flex-end; gap: 40px 64px; }
.cf-split__main { flex: 1 1 480px; min-width: 0; }
.cf-split__side { flex: 0 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 28px; border-top: 1px solid var(--cf-navy); padding: 28px 0 0; }
@media (min-width: 1056px) { .cf-split__side { border-top: 0; border-left: 1px solid var(--cf-navy); padding: 4px 0 4px 40px; } }
.cf-split__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.cf-split__actions > span { font-size: 14px; color: var(--cf-medium-blue); white-space: nowrap; }
.cf-split__actions .cf-button { white-space: normal; }
.cf-hero__media--sec { padding-bottom: var(--cf-section-y); }
.cf-band--fixed { height: var(--cf-band); }
.cf-logos--40 { margin-top: 40px; }
/* section head with an intro-size paragraph, or a two-paragraph column */
.cf-head--intro > p { max-width: 560px; font-size: clamp(18px, calc(17.43px + 0.179vw), 20px); line-height: 1.5; }
.cf-head--two > div:last-child { flex: 0 1 420px; display: flex; flex-direction: column; gap: 14px; }
.cf-head--two > div:last-child p { margin: 0; text-wrap: pretty; }
.cf-head--two > div:last-child p:first-child { font-size: 18px; line-height: 1.55; color: var(--cf-navy); font-weight: 500; }
.cf-head--two > div:last-child p:last-child { font-size: 16px; line-height: 1.6; color: var(--cf-dark-blue); }
/* problem selector: tabs from 768px (4 across from 1100px), an accordion below; panels share one cell (no jump) */
.cf-rr { background: var(--cf-white); border: 1px solid var(--cf-border-warm); }
.cf-rr__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1100px) { .cf-rr__tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cf-rr__tab { text-align: left; cursor: pointer; font: inherit; background: var(--cf-white); border: 0; border-right: 1px solid var(--cf-line-soft); border-bottom: 1px solid var(--cf-line-soft); padding: var(--cf-p-card); display: flex; flex-direction: column; gap: 12px; min-width: 0; transition: background var(--cf-ease); }
.cf-rr__tab:focus-visible { outline-offset: -2px; }
.cf-rr__tab[aria-selected="true"] { background: var(--cf-canvas-warm); border-bottom-color: var(--cf-canvas-warm); }
.cf-rr__rule { height: 3px; align-self: stretch; background: var(--cf-border-warm); margin-bottom: 6px; }
.cf-rr__tab[aria-selected="true"] .cf-rr__rule { background: var(--cf-orange); }
.cf-rr__tab[aria-selected="true"] .cf-num { color: var(--cf-light-blue-on-warm); }
.cf-rr__title, .cf-rra__title { font-family: var(--cf-font-display); font-weight: 500; font-size: clamp(22px, 1.67vw, 24px); line-height: 1.15; letter-spacing: -0.02em; color: var(--cf-navy); text-wrap: balance; }
.cf-rr__line, .cf-rra__line { font-size: 16px; line-height: 1.5; color: var(--cf-dark-blue); text-wrap: pretty; }
.cf-rr__tab .cf-stage__state { margin-top: auto; padding-top: 6px; }
.cf-rr__tab[aria-selected="true"] .cf-stage__state--off { display: none; }
.cf-rr__tab[aria-selected="true"] .cf-stage__state--on { display: inline; color: var(--cf-navy); }
.cf-rr__tab .cf-stage__state--on { display: none; }
.cf-rr__panels { background: var(--cf-canvas-warm); }
.cf-rr__panel { padding: var(--cf-p-card); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); align-content: start; gap: 28px 40px; }
.cf-stack > .cf-rr__panel[hidden] { display: grid; }
.cf-rr__b { border-top: 2px solid var(--cf-navy); padding-top: 14px; display: flex; flex-direction: column; gap: 10px; }
.cf-rr__b--o { border-top-color: var(--cf-orange); }
.cf-rr__b--b { border-top-color: var(--cf-light-blue); gap: 12px; }
.cf-rr__b p { margin: 0; font-family: var(--cf-font-display); font-size: clamp(18px, calc(17.43px + 0.179vw), 20px); line-height: 1.4; letter-spacing: -0.01em; color: var(--cf-navy); text-wrap: pretty; }
.cf-kpis { display: flex; flex-wrap: wrap; gap: 8px; }
.cf-kpis span { font: 500 14px/1 var(--cf-font-display); color: var(--cf-navy); background: var(--cf-white); border: 1px solid var(--cf-navy); border-radius: 999px; padding: 8px 12px; }
.cf-rra { display: none; }
@media (max-width: 767px) {
  .cf-rr { background: transparent; border: 0; border-top: 1px solid var(--cf-border-warm); }
  .cf-rr__tabs, .cf-rr__panels { display: none; }
  .cf-rra { display: block; }
}
.cf-rra__item { border-bottom: 1px solid var(--cf-border-warm); }
.cf-rra__btn { width: 100%; text-align: left; cursor: pointer; font: inherit; background: var(--cf-white); border: 0; padding: 20px 0; display: flex; gap: 14px; align-items: flex-start; min-height: 44px; color: var(--cf-navy); }
.cf-rra__item.is-open .cf-rra__btn { background: var(--cf-canvas-warm); }
.cf-rra__item.is-open .cf-num { color: var(--cf-light-blue-on-warm); }
.cf-rra__btn .cf-num { flex: none; line-height: 1.5; }
.cf-rra__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cf-rra__title { font-size: 22px; text-wrap: wrap; }
.cf-rra__panel { padding: 4px 0 24px; background: var(--cf-white); display: flex; flex-direction: column; gap: 20px; }
.cf-rra__panel[hidden] { display: none; }
.cf-rra__panel .cf-rr__b { padding-top: 12px; gap: 8px; }
.cf-rra__panel .cf-rr__b p { font-family: var(--cf-font-body); font-size: 17px; line-height: 1.5; letter-spacing: 0; }
.cf-statement--after { margin: var(--cf-block-gap) 0 0; max-width: 30ch; line-height: 1.25; }
/* navy ownership band */
.cf-section--navy { background: var(--cf-navy); color: var(--cf-white); border-bottom: 1px solid var(--cf-navy); }
.cf-section--canvas { background: var(--cf-canvas-warm); }
.cf-own { display: flex; flex-wrap: wrap; gap: 40px 80px; align-items: flex-start; }
.cf-own > div:first-child { flex: 1 1 420px; min-width: 0; }
.cf-own > div:last-child { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.cf-h2--own { color: var(--cf-white); letter-spacing: -0.035em; }
.cf-own__second { margin: 16px 0 0; color: #A9C4E3; }
.cf-own > div:last-child p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--cf-white); text-wrap: pretty; }
.cf-own > div:last-child p.cf-own__strong { padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, 0.28); font-weight: 600; }
.cf-link--light { align-self: flex-start; margin-top: 8px; color: var(--cf-white); border-color: var(--cf-white); }
.cf-link--light:hover { color: #A9C4E3; border-color: #A9C4E3; }
.cf-section--navy :focus-visible { outline-color: var(--cf-white); }
/* route cards with an image tag (Revenue Leaders) */
.cf-routes--300 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.cf-route--lead { border-top: 3px solid var(--cf-navy); }
.cf-route__img--160 { height: 160px; background: var(--cf-highlight); }
.cf-route__img .cf-pill { position: absolute; left: 16px; bottom: 16px; }
.cf-route__body--card { padding: var(--cf-p-card); gap: 12px; }
.cf-route--tag .cf-route__title { font-size: clamp(22px, 1.67vw, 24px); line-height: 1.15; text-wrap: balance; }
/* testimonials with a headshot; the divider moves on top below 768px */
.cf-proof__who--photo { justify-content: flex-start; gap: 20px; padding: var(--cf-p-card); }
.cf-proof__who--photo > div { display: flex; flex-direction: column; gap: 6px; }
.cf-proof__photo { width: 120px; height: 120px; object-fit: cover; display: block; filter: grayscale(1); border: 1px solid var(--cf-border-warm); }
.cf-proof__panels--768 .cf-proof__who { flex-basis: 280px; }
.cf-proof__panels--768 .cf-proof__quote { padding: var(--cf-p-card); }
@media (min-width: 768px) and (max-width: 859px) { .cf-proof__panels--768 .cf-proof__quote { border-left: 1px solid var(--cf-line); border-top: 0; } }
@media (max-width: 767px) { .cf-proof__panels--768 .cf-proof__quote { border-left: 0; border-top: 1px solid var(--cf-line); } }
.cf-proof__quote--stmt blockquote { font-size: clamp(24px, calc(21.71px + 0.714vw), 32px); line-height: 1.3; }
/* closing section on the section rhythm */
.cf-close--sec { padding: var(--cf-section-y) 0; }
.cf-close--sec .cf-wrap { gap: 32px; }
.cf-mw-14.cf-h2--close { max-width: 14ch; }
.cf-close p.cf-close__intro { max-width: 560px; font-size: clamp(18px, calc(17.43px + 0.179vw), 20px); line-height: 1.5; }


/* ======== 5 Days to Scale V3 (designed at the old scale; mapped to the tokens, see docs D7) ======== */
.cf-mw-12 { max-width: 12ch; }
.cf-label2 { font: 600 12px/1.2 var(--cf-font-body); letter-spacing: 0.08em; text-transform: uppercase; color: var(--cf-light-blue); }
.cf-section--canvas .cf-label2, .cf-client .cf-label2 { color: var(--cf-light-blue-on-warm); }
.cf-section--canvas .cf-twobox .cf-label2 { color: var(--cf-light-blue); }
.cf-link--hit { position: relative; }
.cf-link--hit::before { content: ''; position: absolute; left: 0; right: 0; top: -12px; bottom: -12px; }
.cf-pill--28 { height: 28px; display: inline-flex; align-items: center; padding: 0 12px; font: 600 13px/1 var(--cf-font-body); }
/* hero: headline and a side column on one ruled line (wide), stacked under 1000px */
.cf-hero--5d .cf-hero__top { padding-top: clamp(40px, 6vw, 91px); padding-bottom: clamp(32px, 4vw, 59px); }
.cf-grid-hero { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(24px, 2.67vw, 48px); align-items: stretch; }
.cf-grid-hero h1 { align-self: end; letter-spacing: -0.045em; }
.cf-grid-hero__side { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: 32px; border-top: 1px solid var(--cf-navy); padding: 28px 0 0; }
.cf-grid-hero__side > p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--cf-navy); text-wrap: pretty; }
.cf-grid-hero__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.cf-grid-hero__dot { display: none; position: absolute; left: -5px; bottom: -5px; width: 9px; height: 9px; border-radius: 50%; background: var(--cf-white); border: 1px solid var(--cf-navy); }
@media (min-width: 1000px) {
  .cf-grid-hero { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); border-bottom: 1px solid var(--cf-navy); }
  .cf-grid-hero h1 { padding-bottom: 32px; }
  .cf-grid-hero__side { border-top: 0; border-left: 1px solid var(--cf-navy); padding: 8px 0 32px clamp(28px, 3vw, 48px); }
  .cf-grid-hero__dot { display: block; }
}
.cf-onpage { margin-top: clamp(20px, 2.33vw, 32px); padding-top: 8px; border-top: 1px solid var(--cf-border-warm); display: flex; flex-wrap: wrap; gap: 0 32px; }
.cf-onpage a { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--cf-dark-blue); text-decoration: none; }
.cf-onpage a:hover { color: var(--cf-light-blue); }
.cf-head2--560 > h2 { flex-basis: 560px; }
.cf-head2--560 > p { flex-basis: 460px; }
/* when to use it: Fix / Build in one navy-bordered box */
.cf-fixbuild { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--cf-navy); background: var(--cf-white); }
.cf-fixbuild__col { display: flex; flex-direction: column; }
.cf-fixbuild__col + .cf-fixbuild__col { border-top: 1px solid var(--cf-navy); }
@media (min-width: 860px) { .cf-fixbuild { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cf-fixbuild__col + .cf-fixbuild__col { border-top: 0; border-left: 1px solid var(--cf-navy); } }
.cf-fixbuild__head { padding: 20px var(--cf-p-card); border-bottom: 1px solid var(--cf-border-warm); display: flex; align-items: center; gap: 14px; }
.cf-tagpill { height: 32px; display: inline-flex; align-items: center; padding: 0 16px; border: 1px solid var(--cf-navy); border-radius: 999px; font-size: 15px; font-weight: 600; color: var(--cf-navy); }
.cf-tagpill--fix { background: var(--cf-orange-tint); }
.cf-tagpill--build { background: var(--cf-highlight); }
.cf-fixbuild__item { padding: 24px var(--cf-p-card); display: flex; flex-direction: column; gap: 8px; }
.cf-fixbuild__item + .cf-fixbuild__item { border-top: 1px solid var(--cf-line-soft); }
.cf-fixbuild__h { font-family: var(--cf-font-display); font-size: 20px; line-height: 1.25; letter-spacing: -0.015em; color: var(--cf-navy); text-wrap: pretty; }
.cf-fixbuild__t { font-size: 16px; line-height: 1.55; color: var(--cf-dark-blue); max-width: 52ch; text-wrap: pretty; }
.cf-fit { margin-top: clamp(28px, 3.33vw, 43px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px clamp(24px, 2.67vw, 43px); }
@media (min-width: 860px) { .cf-fit { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cf-fit > div { border-top: 1px solid var(--cf-border-warm); padding-top: 20px; }
.cf-fit > div:first-child { border-top-color: var(--cf-navy); }
.cf-fit h3, .cf-asks h3 { margin: 0 0 14px; font-size: 16px; font-weight: 600; color: var(--cf-navy); }
.cf-fit ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; font-size: 16px; line-height: 1.5; color: var(--cf-dark-blue); }
/* what you leave with */
.cf-outputs { padding: 0; list-style: none; border-top: 1px solid var(--cf-navy); }
.cf-outputs li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px clamp(16px, 2vw, 32px); padding: clamp(16px, 2vw, 24px) 0; border-bottom: 1px solid var(--cf-border-warm); align-items: baseline; }
@media (min-width: 860px) { .cf-outputs li { grid-template-columns: 48px minmax(0, 0.9fr) minmax(0, 1.6fr); } }
.cf-outputs__n { font-family: var(--cf-font-display); font-size: 14px; color: var(--cf-light-blue); }
.cf-outputs h3 { margin: 0; font-family: var(--cf-font-display); font-weight: 400; font-size: clamp(22px, 1.67vw, 24px); line-height: 1.1; letter-spacing: -0.025em; color: var(--cf-navy); }
.cf-outputs li > div { display: flex; flex-direction: column; gap: 8px; }
.cf-outputs__k { font-size: 18px; font-weight: 600; line-height: 1.4; color: var(--cf-navy); }
.cf-outputs__t { font-size: 16px; line-height: 1.55; color: var(--cf-dark-blue); max-width: 56ch; text-wrap: pretty; }
/* the diagnostic: data-step (0 Inspect, 1 Diagnose, 2 Plan) and data-stage (0-3) on .cf-dx drive every state */
.cf-dx { background: var(--cf-white); border: 1px solid var(--cf-border-warm); }
.cf-dx__steps { scroll-margin-top: 88px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--cf-border-warm); }
.cf-dx__step { margin-bottom: -1px; padding: clamp(16px, 1.9vw, 24px) clamp(14px, 1.7vw, 24px) clamp(14px, 1.6vw, 20px); display: flex; flex-direction: column; align-items: flex-start; gap: 12px; text-align: left; cursor: pointer; background: #FBFAF8; border: 0; border-bottom: 2px solid transparent; transition: background 200ms, border-color 200ms; min-width: 0; }
.cf-dx__step + .cf-dx__step { border-left: 1px solid var(--cf-border-warm); }
.cf-dx__step:hover { background: var(--cf-canvas-warm); }
.cf-dx__step:focus-visible, .cf-dx__stage:focus-visible { outline-offset: -2px; }
.cf-dx__step[aria-selected="true"] { background: var(--cf-white); border-bottom-color: var(--cf-navy); }
.cf-dx__stepname { font-size: 14px; font-weight: 500; color: var(--cf-navy); }
/* three step tabs across a phone: tighter padding, and the label may wrap (in the prototype it ran out of the tab) */
@media (max-width: 480px) { .cf-dx__step { padding: 14px 10px 12px; } .cf-dx__stepname { font-size: 13px; } .cf-dx__stepname > span { display: block; margin: 0 0 2px; } }
.cf-dx__step[aria-selected="true"] .cf-dx__stepname { font-weight: 600; }
.cf-dx__stepname > span { font-family: var(--cf-font-display); font-weight: 400; color: var(--cf-light-blue-on-warm); margin-right: 8px; }
.cf-dx__big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.cf-dx__big > span, .cf-dx__stepname { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
.cf-dx__big > span:first-child { font-family: var(--cf-font-display); font-weight: 400; font-size: clamp(32px, 3.33vw, 48px); line-height: 0.9; letter-spacing: -0.045em; color: var(--cf-light-blue-on-warm); transition: color 200ms; }
.cf-dx__step[aria-selected="true"] .cf-dx__big > span:first-child { color: var(--cf-navy); }
.cf-dx__big > span:last-child { font-size: 15px; line-height: 1.3; color: var(--cf-medium-blue); }
.cf-dx__stages { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cf-dx__corner { display: none; padding: 16px 20px 12px; align-items: flex-end; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cf-medium-blue); border-bottom: 2px solid var(--cf-border-warm); }
.cf-dx__stage { min-height: 56px; padding: 16px 20px 12px; display: flex; align-items: flex-end; text-align: left; cursor: pointer; border: 0; border-bottom: 2px solid var(--cf-border-warm); background: var(--cf-white); color: var(--cf-medium-blue); font-family: var(--cf-font-display); font-size: clamp(16px, 1.25vw, 18px); line-height: 1.1; letter-spacing: -0.02em; white-space: nowrap; transition: background 200ms, color 200ms, border-color 200ms; }
@media (max-width: 480px) { .cf-dx__stage { padding: 14px 12px 10px; } }
.cf-dx__stage:hover { background: var(--cf-canvas-warm); color: var(--cf-navy); }
.cf-dx__stage:nth-child(odd) { border-left: 1px solid var(--cf-line-soft); }
.cf-dx__stage:nth-child(n+4) { border-top: 1px solid var(--cf-line-soft); }
.cf-dx__stage[aria-selected="true"] { background: var(--cf-canvas-warm); color: var(--cf-navy); border-bottom-color: var(--cf-navy); }
.cf-dx:not([data-step="0"]) .cf-dx__stage { color: var(--cf-navy); }
@media (min-width: 860px) {
  .cf-dx__stages { grid-template-columns: minmax(140px, 0.6fr) repeat(4, minmax(0, 1fr)); }
  .cf-dx__corner { display: flex; }
  .cf-dx__stage { border-left: 1px solid var(--cf-line-soft); }
  .cf-dx__stage:nth-child(n+4) { border-top: 0; }
}
.cf-mx__row { display: grid; grid-template-columns: minmax(110px, 0.6fr) minmax(0, 1fr); }
.cf-mx__row + .cf-mx__row { border-top: 1px solid var(--cf-line-soft); }
@media (min-width: 860px) { .cf-mx__row { grid-template-columns: minmax(140px, 0.6fr) repeat(4, minmax(0, 1fr)); } }
.cf-mx__lens { padding: 16px 20px; display: flex; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cf-medium-blue); }
.cf-mx__cell { padding: 16px 20px; min-height: 72px; display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; border-left: 1px solid var(--cf-line-soft); background: var(--cf-white); transition: background 220ms; }
.cf-mx__cell > span:first-child { font-size: 15px; line-height: 1.35; color: var(--cf-medium-blue); text-wrap: pretty; transition: color 220ms; }
.cf-mx__badge { display: none; margin-top: auto; align-items: center; gap: 6px; height: 16px; font-size: 12px; font-weight: 600; line-height: 16px; color: var(--cf-navy); white-space: nowrap; }
.cf-mx__badge > span:first-child, .cf-dx__pribadge > span:first-child { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--cf-orange); }
.cf-dx:not([data-step="0"]) .cf-mx__cell.is-pri { background: var(--cf-orange-tint); }
.cf-dx:not([data-step="0"]) .cf-mx__cell.is-pri > span:first-child { color: var(--cf-navy); font-weight: 500; }
.cf-dx:not([data-step="0"]) .cf-mx__cell.is-pri .cf-mx__badge { display: flex; }
.cf-on-dx, .cf-on-pl { display: none; }
.cf-dx[data-step="1"] .cf-on-dx, .cf-dx[data-step="2"] .cf-on-pl { display: inline; }
.cf-mini { display: none; grid-template-columns: minmax(84px, auto) repeat(4, minmax(0, 1fr)); }
.cf-mini > div { min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 4px; border-left: 1px solid var(--cf-line-soft); border-top: 1px solid var(--cf-line-soft); background: var(--cf-white); font-size: 12px; font-weight: 600; color: var(--cf-navy); text-align: center; }
.cf-mini > div.cf-mini__lens, .cf-mini > div:first-child { justify-content: flex-start; padding: 10px 12px; border-left: 0; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--cf-medium-blue); }
.cf-mini > div.is-pri { background: var(--cf-orange-tint); }
@media (max-width: 859px) {
  .cf-dx[data-stage="0"] .cf-mx__cell:not([data-c="0"]) { display: none; }
  .cf-dx[data-stage="1"] .cf-mx__cell:not([data-c="1"]) { display: none; }
  .cf-dx[data-stage="2"] .cf-mx__cell:not([data-c="2"]) { display: none; }
  .cf-dx[data-stage="3"] .cf-mx__cell:not([data-c="3"]) { display: none; }
  .cf-dx:not([data-step="0"]) .cf-mx { display: none; }
  .cf-dx:not([data-step="0"]) .cf-mini { display: grid; }
}
.cf-dx__out { border-top: 1px solid var(--cf-navy); padding: clamp(20px, 2.33vw, 32px) clamp(20px, 2.6vw, 32px) clamp(24px, 2.67vw, 36px); }
.cf-dx__inspect { display: none; grid-template-columns: minmax(0, 1fr); gap: 10px clamp(24px, 3vw, 48px); align-items: baseline; }
@media (min-width: 860px) { .cf-dx__inspect { grid-template-columns: minmax(160px, 0.3fr) minmax(0, 1fr); } }
.cf-dx__inspect > span:first-child { font-size: 14px; font-weight: 600; color: var(--cf-medium-blue); }
.cf-dx__inspect > span:last-child { font-family: var(--cf-font-display); font-size: clamp(20px, 1.67vw, 24px); line-height: 1.25; letter-spacing: -0.02em; color: var(--cf-navy); max-width: 34ch; text-wrap: pretty; }
.cf-dx[data-step="0"][data-stage="0"] .cf-mx__cell[data-c="0"] { background: var(--cf-canvas-warm); }
.cf-dx[data-step="0"][data-stage="0"] .cf-mx__cell[data-c="0"] > span:first-child { color: var(--cf-navy); font-weight: 500; }
.cf-dx[data-step="0"][data-stage="0"] .cf-dx__inspect[data-for-stage="0"] { display: grid; }
.cf-dx[data-step="0"][data-stage="1"] .cf-mx__cell[data-c="1"] { background: var(--cf-canvas-warm); }
.cf-dx[data-step="0"][data-stage="1"] .cf-mx__cell[data-c="1"] > span:first-child { color: var(--cf-navy); font-weight: 500; }
.cf-dx[data-step="0"][data-stage="1"] .cf-dx__inspect[data-for-stage="1"] { display: grid; }
.cf-dx[data-step="0"][data-stage="2"] .cf-mx__cell[data-c="2"] { background: var(--cf-canvas-warm); }
.cf-dx[data-step="0"][data-stage="2"] .cf-mx__cell[data-c="2"] > span:first-child { color: var(--cf-navy); font-weight: 500; }
.cf-dx[data-step="0"][data-stage="2"] .cf-dx__inspect[data-for-stage="2"] { display: grid; }
.cf-dx[data-step="0"][data-stage="3"] .cf-mx__cell[data-c="3"] { background: var(--cf-canvas-warm); }
.cf-dx[data-step="0"][data-stage="3"] .cf-mx__cell[data-c="3"] > span:first-child { color: var(--cf-navy); font-weight: 500; }
.cf-dx[data-step="0"][data-stage="3"] .cf-dx__inspect[data-for-stage="3"] { display: grid; }
.cf-dx__pri, .cf-dx__board { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px clamp(28px, 3.4vw, 48px); }
@media (min-width: 1000px) { .cf-dx__pri, .cf-dx__board { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cf-dx__pri { display: none; }
.cf-dx[data-step="1"] .cf-dx__pri { display: grid; }
.cf-dx__pri li { padding-top: 14px; border-top: 1px solid var(--cf-orange); display: flex; flex-direction: column; gap: 10px; }
.cf-dx__pribadge { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; font-weight: 600; color: var(--cf-navy); }
.cf-dx__pribadge > span:last-child { font-weight: 400; color: var(--cf-medium-blue); }
.cf-dx__short { font-family: var(--cf-font-display); font-size: clamp(18px, 1.39vw, 20px); line-height: 1.3; letter-spacing: -0.015em; color: var(--cf-navy); text-wrap: pretty; }
.cf-dx__plan { display: none; flex-direction: column; gap: 28px; }
.cf-dx[data-step="2"] .cf-dx__plan { display: flex; }
.cf-dx__board li { padding-top: 14px; border-top: 2px solid var(--rule); display: flex; flex-direction: column; gap: 10px; }
.cf-dx__bk { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; font-size: 13px; }
.cf-dx__bk > span:first-child { font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--cf-navy); }
.cf-dx__bk > span:last-child { color: var(--cf-medium-blue); white-space: nowrap; }
.cf-dx__det { margin: 6px 0 0; display: none; flex-direction: column; }
.cf-dx[data-plan-details="true"] .cf-dx__det { display: flex; }
.cf-dx__det > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; padding: 10px 0; border-top: 1px solid var(--cf-line-soft); }
.cf-dx__det dt { font-size: 13px; font-weight: 600; color: var(--cf-medium-blue); }
.cf-dx__det dd { margin: 0; font-size: 15px; line-height: 1.45; color: var(--cf-navy); text-wrap: pretty; }
.cf-textbtn { align-self: flex-start; background: none; border: 0; border-bottom: 1px solid var(--cf-navy); padding: 0 0 3px; cursor: pointer; font-weight: 600; font-size: 15px; color: var(--cf-navy); text-align: left; }
.cf-textbtn:hover { color: var(--cf-light-blue); border-color: var(--cf-light-blue); }
.cf-on-open, [aria-expanded="true"] > .cf-on-closed { display: none; }
[aria-expanded="true"] > .cf-on-open { display: inline; }
/* the sprint */
.cf-brackets { display: none; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0 24px; }
.cf-brackets > div { height: 10px; border: 1px solid var(--cf-navy); border-bottom: 0; }
.cf-brackets > div:nth-child(1) { grid-column: 1 / span 2; }
.cf-brackets > div:nth-child(2) { grid-column: 3; border-color: var(--cf-light-blue); }
.cf-brackets > div:nth-child(3) { grid-column: 4 / span 2; border-color: var(--cf-sky); }
.cf-brackets > span { margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--cf-navy); }
.cf-brackets > span:nth-of-type(1) { grid-column: 1 / span 2; }
.cf-brackets > span:nth-of-type(2) { grid-column: 3; }
.cf-brackets > span:nth-of-type(3) { grid-column: 4 / span 2; }
.cf-days { margin: var(--cf-block-gap) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 24px; }
.cf-days > li { position: relative; padding: 0 0 32px 28px; border-left: 1px solid var(--cf-navy); display: flex; flex-direction: column; gap: 10px; }
.cf-days__dot { position: absolute; left: -6px; top: 0; width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--cf-navy); background: var(--cf-white); }
.cf-days__dot.is-last { background: var(--cf-navy); }
.cf-days__n { font-family: var(--cf-font-display); font-size: 14px; color: var(--cf-light-blue); }
.cf-days__n > span { color: var(--cf-medium-blue); }
.cf-days h3 { margin: 0; font-family: var(--cf-font-display); font-weight: 400; font-size: clamp(22px, 1.67vw, 24px); line-height: 1.1; letter-spacing: -0.025em; color: var(--cf-navy); }
.cf-days ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.cf-days ul li { font-size: 15px; line-height: 1.45; color: var(--cf-dark-blue); }
.cf-days ul li.is-first { font-weight: 600; }
.cf-days > li > p { margin: auto 0 0; padding-top: 6px; font-size: 14px; line-height: 1.45; color: var(--cf-medium-blue); text-wrap: pretty; }
@media (min-width: 1000px) {
  .cf-brackets { display: grid; }
  .cf-days { margin-top: 20px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .cf-days > li { padding: 28px 0 0; border-left: 0; border-top: 1px solid var(--cf-navy); }
  .cf-days__dot { left: 0; top: -6px; }
  .cf-days__n > span { display: none; }
}
.cf-asks { margin-top: clamp(32px, 4vw, 48px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px clamp(24px, 2.67vw, 43px); padding-top: 24px; border-top: 1px solid var(--cf-navy); }
@media (min-width: 860px) { .cf-asks { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); } }
.cf-asks ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 10px; }
.cf-asks li { min-height: 32px; display: inline-flex; align-items: center; padding: 0 14px; border: 1px solid var(--cf-line-strong); border-radius: 999px; font-size: 15px; color: var(--cf-navy); background: var(--cf-white); }
.cf-asks p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--cf-dark-blue); text-wrap: pretty; }
.cf-asks > div:last-child h3 { margin-bottom: 8px; }
/* proof and after the sprint */
.cf-client { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 48px; }
.cf-client img { height: 52px; width: 170px; object-fit: contain; object-position: left center; display: block; }
.cf-client__line { margin: clamp(24px, 3vw, 32px) 0 0; font-size: 18px; line-height: 1.5; color: var(--cf-dark-blue); max-width: 60ch; text-wrap: pretty; }
.cf-client__quote { margin: clamp(28px, 3.33vw, 43px) 0 0; max-width: 1080px; display: flex; flex-direction: column; gap: clamp(20px, 2.27vw, 27px); }
.cf-client__quote blockquote { margin: 0; font-family: var(--cf-font-display); font-weight: 400; font-size: clamp(24px, calc(21.71px + 0.714vw), 32px); line-height: 1.25; letter-spacing: -0.02em; color: var(--cf-navy); text-wrap: pretty; }
.cf-client__quote figcaption { display: flex; flex-direction: column; gap: 4px; padding-top: 20px; border-top: 1px solid var(--cf-navy); max-width: 420px; }
.cf-client__quote figcaption span:first-child { font-family: var(--cf-font-display); font-size: 20px; color: var(--cf-navy); }
.cf-client__quote figcaption span:last-child { font-size: 15px; color: var(--cf-medium-blue); }
.cf-after-top { margin-top: clamp(48px, 6vw, 85px); }
.cf-twobox { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--cf-navy); background: var(--cf-white); }
@media (min-width: 860px) { .cf-twobox { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cf-twobox > div + div { border-top: 0; border-left: 1px solid var(--cf-navy); } }
.cf-twobox > div { padding: var(--cf-p-card); display: flex; flex-direction: column; gap: 16px; }
.cf-twobox > div + div { border-top: 1px solid var(--cf-navy); }
.cf-twobox h3 { margin: 0; font-family: var(--cf-font-display); font-weight: 400; font-size: clamp(24px, calc(21.71px + 0.714vw), 32px); line-height: 1.08; letter-spacing: -0.03em; color: var(--cf-navy); }
.cf-twobox p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--cf-dark-blue); max-width: 48ch; text-wrap: pretty; }
.cf-twobox .cf-link { margin-top: auto; align-self: flex-start; }
/* closing: Fix / Build choice, then the questions */
.cf-section--close5 { border-bottom: 0; padding-top: clamp(75px, 9.33vw, 133px); }
.cf-close5 { max-width: 1040px; display: flex; flex-direction: column; gap: clamp(20px, 2.27vw, 29px); }
.cf-close5 > p { margin: 0; max-width: 60ch; font-size: clamp(18px, calc(17.43px + 0.179vw), 20px); line-height: 1.5; color: var(--cf-dark-blue); text-wrap: pretty; }
.cf-choose { display: flex; flex-direction: column; gap: 20px; max-width: 820px; }
.cf-choose > span { font-size: 15px; font-weight: 600; color: var(--cf-navy); }
.cf-choose > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 860px) { .cf-choose > div { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cf-choose > div a { min-height: 88px; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 24px; border: 1px solid var(--cf-navy); background: var(--cf-white); color: var(--cf-navy); text-decoration: none; transition: background var(--cf-ease); }
.cf-choose > div a:hover, .cf-choose > div a:focus-visible { background: var(--cf-navy); color: var(--cf-white); }
.cf-choose > div a > span:first-child { display: flex; flex-direction: column; gap: 4px; }
.cf-choose > div a > span:first-child > span:first-child { font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.cf-choose > div a > span:first-child > span:last-child { font-family: var(--cf-font-display); font-size: 20px; letter-spacing: -0.015em; }
.cf-choose > div a > span:last-child { font-size: 20px; }
.cf-choose .cf-link { align-self: flex-start; }
.cf-faq5 { margin-top: clamp(48px, 6vw, 85px); display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px clamp(32px, 4vw, 64px); }
@media (min-width: 1000px) { .cf-faq5 { grid-template-columns: minmax(0, 0.6fr) minmax(0, 1.4fr); } }
.cf-faq5 > h2 { margin: 0; font-family: var(--cf-font-display); font-weight: 400; font-size: clamp(22px, 1.67vw, 24px); line-height: 1.1; letter-spacing: -0.025em; color: var(--cf-navy); }
.cf-faq5 > div { border-top: 1px solid var(--cf-navy); }
.cf-faq5__item { border-bottom: 1px solid var(--cf-border-warm); }
.cf-faq5__item h3 { margin: 0; font: inherit; }
.cf-faq5__item button { width: 100%; min-height: 64px; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 18px 0; background: transparent; border: 0; cursor: pointer; text-align: left; font-family: var(--cf-font-display); font-weight: 400; font-size: clamp(18px, 1.39vw, 20px); line-height: 1.3; letter-spacing: -0.01em; color: var(--cf-navy); }
.cf-faq5__item button:hover { color: var(--cf-light-blue); }
.cf-faq5__item button > span:first-child { flex: 1 1 auto; min-width: 0; text-wrap: pretty; }
.cf-faq5__item button > span:last-child { flex: none; width: 24px; text-align: center; font-size: 22px; color: var(--cf-medium-blue); }
.cf-faq5__item > div { padding: 0 48px 24px 0; max-width: 780px; }
.cf-faq5__item > div[hidden] { display: none; }
.cf-faq5__item p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--cf-dark-blue); text-wrap: pretty; }

/* ======== MEDDPICC Competence Training V3 (31 Oct) ======== */
.cf-lab { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--cf-light-blue); }
.cf-head2--460 > p { flex-basis: 460px; }
.cf-head2__col { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.cf-head2__col > p { margin: 0; font-size: 18px; line-height: 1.55; color: var(--cf-dark-blue); max-width: 56ch; text-wrap: pretty; }
.cf-head2__col--pill { gap: 20px; }
.cf-head2__col--pill > .cf-pill { align-self: flex-start; }
.cf-head2 > .cf-pill { align-self: flex-start; }
.cf-pill--canvas { background: var(--cf-canvas-warm); }
.cf-button--white { background: var(--cf-white); color: var(--cf-navy); }
.cf-button--white:hover { background: var(--cf-navy); border-color: var(--cf-navy); color: var(--cf-white); }
.cf-foot { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 20px 48px; }
.cf-foot > p { margin: 0; flex: 1 1 480px; max-width: 40em; font-size: 16px; line-height: 1.55; color: var(--cf-dark-blue); text-wrap: pretty; }
.cf-foot strong { font-weight: 600; color: var(--cf-navy); }
.cf-foot--inline { justify-content: flex-start; align-items: baseline; gap: 8px 16px; }
.cf-foot--inline > p { flex: 0 1 auto; color: var(--cf-medium-blue); }
/* where you are: two routes in one navy box, each under an image header */
.cf-sit > div { --pad: clamp(24px, 2.6vw, 40px); padding: var(--pad); gap: 20px; overflow: hidden; }
.cf-sit__alt { background: var(--cf-canvas-warm); }
.cf-sit__img { height: clamp(120px, 11vw, 160px); margin: calc(-1 * var(--pad)) calc(-1 * var(--pad)) 8px; overflow: hidden; background: var(--cf-navy); }
.cf-sit__img--mid { background: var(--cf-medium-blue); }
.cf-sit__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.cf-sit__n { display: flex; align-items: center; gap: 8px; font-family: var(--cf-font-display); font-size: 14px; color: var(--cf-medium-blue); }
.cf-sit__n > span { width: 6px; height: 6px; border-radius: 50%; background: var(--cf-orange); }
.cf-sit p { margin: 0; font-size: 18px; line-height: 1.5; color: var(--cf-dark-blue); max-width: 40ch; text-wrap: pretty; }
.cf-sit__cta { margin-top: auto; padding-top: 20px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.cf-sit__cta > span { font-size: 14px; line-height: 1.5; color: var(--cf-medium-blue); max-width: 46ch; }
/* two rubrics: the spine (1000px and up) */
.cf-spine { display: none; }
.cf-spine__panel { padding: clamp(28px, 3vw, 44px); display: flex; flex-direction: column; gap: 14px; background: var(--cf-highlight); }
.cf-spine__panel > span { font-size: 14px; font-weight: 600; color: var(--cf-medium-blue); }
.cf-spine__panel h3 { margin: 0; font-family: var(--cf-font-display); font-weight: 400; font-size: clamp(24px, 2.2vw, 32px); line-height: 1.12; letter-spacing: -0.02em; color: var(--cf-navy); }
.cf-spine__panel p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--cf-dark-blue); max-width: 50ch; text-wrap: pretty; }
.cf-spine__panel--deal { background: var(--cf-navy); }
.cf-spine__panel--deal > span { color: var(--cf-sky); }
.cf-spine__panel--deal h3 { color: var(--cf-white); }
.cf-spine__panel--deal p { color: var(--cf-highlight); }
.cf-spine__mid { position: relative; }
.cf-spine__mid::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--cf-navy); }
.cf-spine__mid > span { position: absolute; left: 50%; top: 50%; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 1px solid var(--cf-navy); border-radius: 50%; background: var(--cf-white); display: flex; align-items: center; justify-content: center; font-family: var(--cf-font-display); font-size: 20px; color: var(--cf-navy); }
.cf-spine__q { padding: 26px 0 26px 32px; border-bottom: 1px solid var(--cf-border-warm); display: flex; align-items: center; }
.cf-spine__q--l { padding: 26px 32px 26px 0; justify-content: flex-end; text-align: right; }
.cf-spine__q > span, .cf-rubl__q > span:last-child { font-family: var(--cf-font-display); font-size: clamp(19px, 1.6vw, 23px); line-height: 1.3; letter-spacing: -0.01em; color: var(--cf-navy); text-wrap: pretty; }
.cf-spine__node { position: relative; border-bottom: 1px solid var(--cf-border-warm); }
.cf-spine__node::before { content: ''; position: absolute; left: 50%; top: 0; bottom: -1px; width: 1px; margin-left: -0.5px; background: var(--cf-navy); }
.cf-spine__node::after { content: ''; position: absolute; left: -18px; right: -18px; top: 50%; height: 1px; margin-top: -0.5px; background: linear-gradient(90deg, var(--cf-navy) 50%, var(--cf-light-blue) 50%); }
.cf-spine__node > .cf-node { left: 50%; top: 50%; }
.cf-spine__end { position: absolute; left: -18px; top: 50%; width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--cf-white); border: 1px solid var(--cf-navy); }
.cf-spine__end--r { left: auto; right: -18px; border-color: var(--cf-light-blue); }
/* the node: a ringed dot on a line */
.cf-node { position: absolute; z-index: 1; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--cf-white); border: 2px solid var(--cf-navy); display: flex; align-items: center; justify-content: center; }
.cf-node > span { width: 6px; height: 6px; border-radius: 50%; background: var(--cf-navy); }
.cf-node--blue { border-color: var(--cf-light-blue); }
.cf-node--blue > span { background: var(--cf-light-blue); }
.cf-node--orange > span { background: var(--cf-orange); }
/* two rubrics below 1000px: two columns, stacked with labels below 860px */
.cf-rubl { border: 1px solid var(--cf-navy); background: var(--cf-white); }
.cf-rubl > div { display: grid; grid-template-columns: minmax(0, 1fr); }
.cf-rubl__h { padding: clamp(24px, 3vw, 40px) clamp(20px, 2.6vw, 36px); display: flex; flex-direction: column; gap: 14px; border-top: 3px solid var(--cf-navy); margin-top: -1px; }
.cf-rubl__h--b { border-top-color: var(--cf-light-blue); box-shadow: 0 -1px 0 var(--cf-border-warm); }
.cf-rubl__h > span, .cf-rubl__q > span:first-child { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--cf-light-blue); }
.cf-rubl__h h3 { margin: 0; font-family: var(--cf-font-display); font-weight: 400; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -0.02em; color: var(--cf-navy); text-wrap: balance; }
.cf-rubl__h p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--cf-dark-blue); max-width: 52ch; text-wrap: pretty; }
.cf-rubl__q { padding: 22px clamp(20px, 2.6vw, 36px); border-top: 1px solid var(--cf-border-warm); display: flex; flex-direction: column; gap: 6px; }
.cf-rubl__q > span:first-child { font-size: 12px; }
@media (min-width: 860px) {
  .cf-rubl > div { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-rubl > div > :nth-child(even) { border-left: 1px solid var(--cf-border-warm); }
  .cf-rubl__h--b { box-shadow: none; }
  .cf-rubl__q > span:first-child { display: none; }
}
@media (min-width: 1000px) {
  .cf-spine { display: grid; grid-template-columns: minmax(0, 1fr) 88px minmax(0, 1fr); }
  .cf-rubl { display: none; }
}
.cf-hlq { margin: clamp(32px, 4vw, 48px) auto 0; max-width: 30ch; text-align: center; font-family: var(--cf-font-display); font-size: clamp(24px, 2.2vw, 32px); line-height: 1.25; letter-spacing: -0.02em; color: var(--cf-navy); text-wrap: balance; }
.cf-hlq > span { background: var(--cf-highlight); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 0.1em; }
/* deal strategy: scenario tabs, the question panel, then five steps as lanes (1000px and up) or a list */
/* with a script (html.cf-js, set in the head before the page paints) only the selected scenario is visible; without
   one every scenario is shown */
.cf-js .cf-ds[data-sel="0"] [data-sc]:not([data-sc="0"]),
.cf-js .cf-ds[data-sel="1"] [data-sc]:not([data-sc="1"]),
.cf-js .cf-ds[data-sel="2"] [data-sc]:not([data-sc="2"]),
.cf-js .cf-ds[data-sel="3"] [data-sc]:not([data-sc="3"]) { visibility: hidden; }
.cf-ds__choose { margin: var(--cf-block-gap) 0 0; font-size: 14px; font-weight: 600; color: var(--cf-medium-blue); }
.cf-ds__tabs { margin-top: 14px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.cf-ds__tab { text-align: left; cursor: pointer; font: inherit; color: var(--cf-navy); background: transparent; border: 0; border-top: 1px solid var(--cf-border-warm); padding: 18px 16px 20px; display: flex; flex-direction: column; gap: 10px; transition: background var(--cf-ease); min-width: 0; }
.cf-ds__tab:hover, .cf-ds__tab[aria-selected="true"] { background: var(--cf-white); }
.cf-ds__tab[aria-selected="true"] { border-top: 2px solid var(--cf-navy); padding-top: 17px; }
.cf-ds__tab:focus-visible { outline-offset: 2px; }
.cf-ds__meta { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 13px; line-height: 1.2; color: var(--cf-medium-blue); font-variant-numeric: tabular-nums; }
.cf-ds__meta > span { white-space: nowrap; }
.cf-ds__meta > span:last-child { font-weight: 500; }
.cf-ds__label { font-family: var(--cf-font-display); font-size: 19px; line-height: 1.25; letter-spacing: -0.01em; text-wrap: pretty; }
.cf-ds__panel { margin-top: 16px; border: 1px solid var(--cf-navy); background: var(--cf-white); display: grid; grid-template-columns: minmax(0, 1fr); }
.cf-ds__panel > div { padding: clamp(22px, 2.6vw, 36px); display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cf-ds__panel > .cf-ds__focus { gap: 14px; border-top: 1px solid var(--cf-navy); }
.cf-ds__q { margin: 0; font-family: var(--cf-font-display); font-size: clamp(24px, 2.2vw, 32px); line-height: 1.2; letter-spacing: -0.02em; color: var(--cf-navy); text-wrap: balance; }
.cf-ds__pills > span { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; }
.cf-fpill { flex: none; display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 5px 12px 5px 10px; font-size: 13px; font-weight: 600; line-height: 16px; color: var(--cf-navy); background: var(--cf-white); border: 1px solid var(--cf-navy); border-radius: 999px; }
.cf-fpill > span:first-child { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--cf-orange); }
.cf-fpill > span:last-child { min-width: 0; }
@media (min-width: 560px) { .cf-ds__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 860px) {
  .cf-ds__panel { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); }
  .cf-ds__panel > .cf-ds__focus { border-top: 0; border-left: 1px solid var(--cf-navy); }
}
.cf-lpill { box-sizing: border-box; min-height: 28px; display: inline-flex; align-items: center; padding: 0 12px; font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--cf-navy); background: var(--cf-white); border: 1px solid var(--cf-navy); border-radius: 999px; }
.cf-lpill--mid { color: var(--cf-medium-blue); border-color: var(--cf-medium-blue); }
.cf-lpill--bl { color: var(--cf-light-blue); border-color: var(--cf-light-blue); }
.cf-lpill--navy { color: var(--cf-white); background: var(--cf-navy); }
.cf-lpill--blue { color: var(--cf-white); background: var(--cf-light-blue); border-color: var(--cf-light-blue); }
.cf-lanes { display: none; }
.cf-lcard { position: relative; z-index: 1; background: var(--cf-white); border: 1px solid var(--cf-navy); padding: 18px 18px 20px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.cf-lcard__n { font-family: var(--cf-font-display); font-size: 13px; line-height: 1; color: var(--cf-light-blue); font-variant-numeric: tabular-nums; }
.cf-lcard__t { font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--cf-navy); }
.cf-lcard__x { font-size: 15px; line-height: 1.5; color: var(--cf-dark-blue); text-wrap: pretty; }
.cf-lcard--s .cf-lcard__x { font-family: var(--cf-font-display); font-size: clamp(18px, 1.39vw, 20px); line-height: 1.3; color: var(--cf-navy); }
.cf-lcard--navy { background: var(--cf-navy); }
.cf-lcard--navy .cf-lcard__n { color: var(--cf-sky); }
.cf-lcard--navy .cf-lcard__t { color: var(--cf-white); }
.cf-lcard--navy .cf-lcard__x { color: var(--cf-highlight); }
.cf-lcard--pale { background: var(--cf-highlight); border-color: var(--cf-highlight); }
.cf-lcard--pale .cf-lcard__t { color: var(--cf-navy); }
.cf-lcard--pale .cf-lcard__n { color: var(--cf-medium-blue); }
.cf-dsl { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--cf-navy); display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); column-gap: 24px; }
.cf-dsl li { padding: 22px 0 28px; display: flex; flex-direction: column; gap: 12px; border-bottom: 1px solid var(--cf-border-warm); min-width: 0; }
.cf-dsl__h { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.cf-dsl__h > span:first-child { font-family: var(--cf-font-display); font-size: 14px; color: var(--cf-medium-blue); }
.cf-dsl__t { font-size: 16px; font-weight: 600; color: var(--cf-navy); }
.cf-dsl p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--cf-dark-blue); text-wrap: pretty; }
.cf-dsl p.cf-dsl__s { font-family: var(--cf-font-display); font-size: 20px; color: var(--cf-navy); }
@media (min-width: 1000px) { .cf-ds__tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* lanes from 1200px: below that the longest scenario words (“reorganisation.”) don't fit five cards across */
@media (min-width: 1200px) {
  .cf-dsl { display: none; }
  .cf-lanes { display: grid; margin-top: 32px; grid-template-columns: minmax(132px, max-content) repeat(5, minmax(0, 1fr)); grid-template-rows: auto auto auto; column-gap: 16px; }
  .cf-lanes .cf-lpill { white-space: nowrap; }
  .cf-lanes__l1 { grid-column: 1; grid-row: 1; align-self: end; padding-top: 18px; }
  .cf-lanes__l2 { grid-column: 1; grid-row: 2; align-self: center; }
  .cf-lanes__l3 { grid-column: 1; grid-row: 3; align-self: start; padding-top: 18px; }
  .cf-lanes__axis { grid-column: 2 / -1; grid-row: 2; position: relative; pointer-events: none; }
  .cf-lanes__axis::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--cf-navy); }
  .cf-lanes__axis::after { content: ''; position: absolute; right: -2px; top: 50%; margin-top: -5px; border-left: 8px solid var(--cf-navy); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }
  .cf-lanes__up, .cf-lanes__down { grid-row: 2; position: relative; min-height: 72px; }
  .cf-lanes__up { grid-column: 3; }
  .cf-lanes__down--4 { grid-column: 4; }
  .cf-lanes__down--5 { grid-column: 5; }
  .cf-lanes__up::before, .cf-lanes__down::before { content: ''; position: absolute; left: 50%; width: 1px; margin-left: -0.5px; background: var(--cf-navy); top: 0; bottom: 50%; }
  .cf-lanes__down::before { background: var(--cf-light-blue); top: 50%; bottom: 0; }
  .cf-lanes__up::after, .cf-lanes__down::after { content: ''; position: absolute; z-index: 2; left: 50%; top: -4px; width: 9px; height: 9px; margin-left: -4.5px; box-sizing: border-box; border-radius: 50%; background: var(--cf-white); border: 1px solid var(--cf-navy); }
  .cf-lanes__down::after { top: auto; bottom: -4px; border-color: var(--cf-light-blue); }
  .cf-lanes .cf-node { left: 50%; top: 50%; }
  .cf-lcard--s { grid-column: 2; grid-row: 2; align-self: center; }
  .cf-lcard--e { grid-column: 3; grid-row: 1; align-self: end; }
  .cf-lcard--o { grid-column: 4; grid-row: 3; align-self: start; }
  .cf-lcard--m { grid-column: 5; grid-row: 3; align-self: start; }
  .cf-lcard--a { grid-column: 6; grid-row: 2; align-self: center; }
}
.cf-ds__foot { margin-top: 28px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 40px; }
.cf-ds__foot > div { display: flex; flex-direction: column; gap: 8px; max-width: 64ch; }
.cf-ds__foot p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--cf-medium-blue); text-wrap: pretty; }
.cf-ds__foot p + p { font-size: 14px; line-height: 1.5; }
.cf-ds__foot .cf-link { align-self: flex-start; }
/* programme: Design / Enable / Run, then the timeline */
.cf-psteps { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 24px; }
.cf-psteps > div { padding: 24px 0 32px; border-top: 3px solid var(--cf-navy); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cf-psteps > div:nth-child(2) { border-top-color: var(--cf-light-blue); }
.cf-psteps > div:nth-child(3) { border-top-color: var(--cf-sky); }
.cf-psteps__h { display: flex; justify-content: space-between; align-items: baseline; }
.cf-psteps__h > span:first-child { font-size: 16px; font-weight: 600; color: var(--cf-navy); }
.cf-psteps__h > span:last-child { font-family: var(--cf-font-display); font-size: 14px; color: var(--cf-medium-blue); font-variant-numeric: tabular-nums; }
.cf-psteps h3, .cf-twobox--sm h3, .cf-cur__cols h3 { margin: 0; font-family: var(--cf-font-display); font-weight: 400; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -0.02em; color: var(--cf-navy); text-wrap: balance; }
.cf-psteps p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--cf-dark-blue); text-wrap: pretty; }
.cf-psteps p.cf-pill { align-self: flex-start; color: var(--cf-navy); white-space: normal; }
/* 28px pills grow when their words wrap; the hero band's tag and the side column's button wrap rather than run out */
.cf-pill--28 { height: auto; min-height: 28px; padding-top: 5px; padding-bottom: 5px; }
.cf-band .cf-pill { white-space: normal; max-width: calc(100% - 32px); }
.cf-grid-hero__side .cf-button { white-space: normal; }
.cf-tl { --tl-gap: clamp(48px, 6vw, 80px); list-style: none; margin: var(--tl-gap) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
.cf-tl > li { position: relative; padding: 0 16px 0 0; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cf-tl__track { position: relative; display: block; height: 24px; margin-right: -16px; }
.cf-tl__line { position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: var(--cf-navy); transform-origin: left center; transition: transform 700ms cubic-bezier(.2, .7, .2, 1); }
.cf-tl.is-pending .cf-tl__line { transform: scaleX(0); }
.cf-tl__dot { position: absolute; left: 0; top: 3px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--cf-navy); }
.cf-tl > li:nth-child(n+2) .cf-tl__line, .cf-tl > li:nth-child(n+2) .cf-tl__dot { background: var(--cf-light-blue); }
.cf-tl > li:nth-child(2) .cf-tl__line { transition-delay: 350ms; }
.cf-tl > li:nth-child(3) .cf-tl__line { transition-delay: 700ms; }
.cf-tl > li.cf-tl__run .cf-tl__line { transition-delay: 1050ms; background: var(--cf-sky); }
.cf-tl__track .cf-node { top: 12px; }
.cf-tl__at0 { left: 0; } .cf-tl__at1 { left: 33.333%; } .cf-tl__at3 { left: 100%; }
.cf-tl__tick { position: absolute; left: 66.667%; top: 7px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--cf-white); border: 2px solid var(--cf-sky); }
.cf-tl__k { font-size: 14px; font-weight: 600; color: var(--cf-navy); }
.cf-tl > li:nth-child(2) .cf-tl__k, .cf-tl > li:nth-child(3) .cf-tl__k { color: var(--cf-light-blue); }
.cf-tl__run .cf-tl__k { color: var(--cf-medium-blue); }
.cf-tl__t { font-size: 16px; line-height: 1.4; font-weight: 500; color: var(--cf-navy); max-width: 28ch; text-wrap: pretty; }
.cf-tl__run { margin-top: 136px; }
.cf-tl__marks { position: absolute; left: 0; right: 0; bottom: calc(100% - 3px); height: 138px; pointer-events: none; }
.cf-tl__mk { position: absolute; white-space: nowrap; height: 28px; display: flex; align-items: center; padding: 0 12px; font-size: 13px; font-weight: 600; color: var(--cf-navy); background: var(--cf-white); border: 1px solid var(--cf-navy); border-radius: 999px; }
.cf-tl__mk--base { top: 0; left: -10px; }
.cf-tl__mk--re { top: 42px; left: -10px; }
.cf-tl__mk--fin { top: 84px; right: 0; transform: translateX(12px); }
.cf-tl__stem { position: absolute; bottom: 0; width: 1px; margin-left: -0.5px; background: var(--cf-navy); }
.cf-tl__stem--base { left: 0; top: 28px; }
.cf-tl__stem--re { left: 33.333%; top: 70px; }
.cf-tl__stem--fin { left: 100%; top: 112px; }
@media (min-width: 640px) {
  .cf-tl { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 136px; }
  .cf-tl__run { margin-top: 0; }
  .cf-tl__marks { height: 96px; }
  .cf-tl__mk--base { left: 0; transform: translateX(-50%); }
  .cf-tl__mk--re { left: 33.333%; transform: translateX(-50%); }
  .cf-tl__mk--fin { top: 0; }
  .cf-tl__stem--fin { top: 28px; }
}
@media (min-width: 1000px) {
  .cf-psteps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cf-tl { --col: calc((100% - 48px) / 3 + 24px); margin-top: calc(var(--tl-gap) + 104px); row-gap: 32px; grid-template-columns: var(--col) calc(var(--col) / 2) calc(var(--col) / 2) minmax(0, 1fr); }
}
.cf-subhead { margin-top: clamp(64px, 8vw, 112px); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 24px 48px; }
.cf-subhead > h3 { flex: 1 1 420px; max-width: 18ch; }
.cf-subhead > p { flex: 0 1 460px; margin: 0; font-size: 18px; line-height: 1.55; color: var(--cf-dark-blue); text-wrap: pretty; }
.cf-twobox--40 { margin-top: 40px; }
.cf-twobox--sm > div { gap: 12px; }
.cf-twobox--sm p { font-size: 16px; }
.cf-twobox--give > div { gap: 12px; }
.cf-twobox--give p { font-size: 18px; color: var(--cf-navy); max-width: 52ch; }
/* proof */
.cf-proofq { margin: 0; max-width: 1080px; display: flex; flex-direction: column; gap: clamp(32px, 4vw, 48px); }
.cf-proofq img { height: 72px; width: 180px; object-fit: contain; object-position: left center; display: block; }
.cf-proofq blockquote { margin: 0; font-family: var(--cf-font-display); font-weight: 400; font-size: clamp(24px, calc(20px + 1vw), 34px); line-height: 1.25; letter-spacing: -0.02em; color: var(--cf-navy); text-wrap: pretty; }
.cf-proofq figcaption { display: flex; flex-direction: column; gap: 4px; padding-top: 20px; border-top: 1px solid var(--cf-navy); max-width: 420px; }
.cf-proofq figcaption span:first-child { font-family: var(--cf-font-display); font-size: 20px; color: var(--cf-navy); }
.cf-proofq figcaption span:last-child { font-size: 16px; color: var(--cf-medium-blue); }
/* numbered lists (materials, the data layer) */
.cf-nlist { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); column-gap: 24px; border-top: 1px solid var(--cf-navy); }
.cf-nlist--240 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.cf-nlist li { padding: 24px 0 28px; display: flex; flex-direction: column; gap: 10px; border-bottom: 1px solid var(--cf-border-warm); min-width: 0; }
.cf-nlist--240 li { padding-top: 22px; }
.cf-nlist__n { font-family: var(--cf-font-display); font-size: 14px; color: var(--cf-medium-blue); }
.cf-nlist__t { font-family: var(--cf-font-display); font-size: 21px; line-height: 1.2; letter-spacing: -0.01em; color: var(--cf-navy); }
.cf-nlist p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--cf-medium-blue); text-wrap: pretty; }
/* curriculum behind one toggle */
.cf-cur { margin-top: clamp(48px, 6vw, 88px); border-top: 1px solid var(--cf-navy); border-bottom: 1px solid var(--cf-navy); }
.cf-cur__btn { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 24px 0; background: transparent; border: 0; cursor: pointer; text-align: left; color: var(--cf-navy); }
.cf-cur__btn > span:first-child { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.cf-cur__btn > span:first-child > span:first-child { font-family: var(--cf-font-display); font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -0.02em; }
.cf-cur__btn > span:first-child > span:last-child { font-size: 14px; color: var(--cf-medium-blue); }
.cf-cur__btn:hover > span:first-child > span:first-child { color: var(--cf-light-blue); }
.cf-cur__sign { flex: none; width: 44px; height: 44px; border: 1px solid var(--cf-navy); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; color: var(--cf-navy); }
.cf-cur__panel { padding: 8px 0 40px; }
.cf-cur__panel[hidden] { display: none; }
.cf-cur__panel > p:first-child { margin: 0 0 32px; font-size: 16px; line-height: 1.55; color: var(--cf-dark-blue); max-width: 40em; text-wrap: pretty; }
.cf-cur__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: 40px; }
.cf-cur__cols > div { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.cf-cur__prep { background: var(--cf-canvas-warm); padding: 16px 18px; display: flex; flex-direction: column; gap: 4px; }
.cf-cur__prep > span:first-child { font-size: 14px; font-weight: 600; color: var(--cf-navy); }
.cf-cur__prep > span:last-child { font-size: 15px; line-height: 1.5; color: var(--cf-dark-blue); }
.cf-mods { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cf-navy); }
.cf-mods li { display: flex; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--cf-border-warm); }
.cf-mods li > span:first-child { flex: none; width: 22px; padding-top: 2px; font-family: var(--cf-font-display); font-size: 14px; color: var(--cf-medium-blue); }
.cf-mods li > span:last-child { min-width: 0; font-size: 16px; line-height: 1.45; color: var(--cf-navy); }
.cf-cur__panel > .cf-small { margin-top: 28px; }
.cf-cur__cta { margin-top: 40px; }
/* resources: three cards on navy, each with an upright sheet rising from the bottom of its frame */
.cf-section--navy .cf-h2 { color: var(--cf-white); }
.cf-res { list-style: none; margin: clamp(40px, 5vw, 72px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 24px; }
.cf-res > li { display: flex; min-width: 0; }
.cf-res a { flex: 1; min-width: 0; display: flex; flex-direction: column; text-decoration: none; border: 1px solid #3A4E68; background: var(--cf-navy); transition: border-color var(--cf-ease); }
.cf-res a:hover { border-color: var(--cf-sky); color: var(--cf-white); }
.cf-section--canvas .cf-link:hover { color: var(--cf-light-blue-on-warm); border-color: var(--cf-light-blue-on-warm); }
.cf-res__pv { height: clamp(200px, 18vw, 260px); overflow: hidden; background: var(--cf-dark-blue); display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid #3A4E68; }
.cf-res__cover { display: block; width: 58%; height: auto; align-self: flex-end; margin-bottom: -40%; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); }
.cf-res__b { padding: 24px 24px 28px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.cf-res__n { font-family: var(--cf-font-display); font-size: 13px; color: var(--cf-sky); }
.cf-res__t { font-family: var(--cf-font-display); font-size: clamp(22px, 2vw, 26px); letter-spacing: -0.02em; color: var(--cf-white); }
.cf-res__d { font-size: 16px; line-height: 1.5; color: var(--cf-highlight); text-wrap: pretty; }
.cf-res__cta { margin-top: auto; padding: 12px 0 3px; align-self: flex-start; font-weight: 600; font-size: 16px; color: var(--cf-white); border-bottom: 1px solid var(--cf-sky); }
.cf-pv { width: 86%; height: calc(100% - 28px); background: var(--cf-white); overflow: hidden; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); }
.cf-pv > div { height: 100%; padding: 18px 18px 0; display: flex; flex-direction: column; gap: 10px; }
.cf-pv--cm { width: 72%; }
.cf-pv--cm > div { padding: 16px 16px 0; gap: 6px; }
.cf-pv--cm img { height: 13px; width: auto; align-self: flex-start; display: block; }
.cf-pv__k { font-size: 9px; font-weight: 600; letter-spacing: 0.08em; color: var(--cf-light-blue); }
.cf-pv__k--sm { margin-top: 4px; font-size: 7.5px; }
.cf-pv__h { font-family: var(--cf-font-display); font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; line-height: 1.1; letter-spacing: -0.02em; color: var(--cf-navy); }
.cf-pv__h--sm { font-size: clamp(15px, 1.3vw, 18px); }
.cf-pv__s { font-size: 8.5px; line-height: 1.3; color: var(--cf-dark-blue); }
.cf-pv__two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
.cf-pv__two > span { border-top: 2px solid var(--cf-navy); background: var(--cf-canvas-warm); padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.cf-pv__k2 { display: flex; align-items: center; gap: 6px; font-size: 8px; font-weight: 600; letter-spacing: 0.06em; color: var(--cf-medium-blue); }
.cf-pv__k2 > span { width: 5px; height: 5px; border-radius: 50%; background: var(--cf-orange); }
.cf-pv__t { font-family: var(--cf-font-display); font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--cf-navy); }
.cf-pv__bar { display: block; height: 4px; background: #E4DFD7; }
.cf-pv__lv { margin-top: 4px; display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--cf-navy); border-bottom: 1px solid var(--cf-border-warm); }
.cf-pv__lv > span { padding: 5px 6px; font-size: 8px; font-weight: 600; color: var(--cf-navy); }
.cf-pv__lv > span.is-on { background: var(--cf-highlight); }
.cf-pv__cols, .cf-pv__rows > span { display: grid; grid-template-columns: 0.9fr 1fr 1fr; gap: 8px; }
.cf-pv__cols { margin-top: 4px; font-size: 7px; font-weight: 600; letter-spacing: 0.06em; color: var(--cf-light-blue); }
.cf-pv__rows { display: flex; flex-direction: column; }
.cf-pv__rows > span { padding: 6px 0; border-top: 1px solid #E4DFD7; }
.cf-pv__rows > span > span:first-child { font-size: 8px; font-weight: 600; line-height: 1.25; color: var(--cf-navy); }
.cf-pv__rows > span > span:not(:first-child) { display: flex; flex-direction: column; gap: 3px; }
/* questions: five shown, six more behind one button; expand all */
.cf-faqm__all { min-height: 44px; padding: 0 18px; background: transparent; border: 1px solid var(--cf-navy); color: var(--cf-navy); font-weight: 600; font-size: 14px; cursor: pointer; white-space: nowrap; }
.cf-faqm__all:hover { background: var(--cf-navy); color: var(--cf-white); }
.cf-faqm__list { border-top: 1px solid var(--cf-navy); }
.cf-faqm .cf-faq5__item button { min-height: 72px; padding: 20px 0; font-size: clamp(20px, 1.67vw, 24px); line-height: 1.3; letter-spacing: -0.01em; }
.cf-faqm .cf-faq5__item > div { padding: 0 48px 28px 0; max-width: 820px; }
.cf-faqm__more { margin-top: 14px !important; }
.cf-faqm__toggle { margin-top: 28px; font-size: 16px; }
#faq-more[hidden] { display: none; }

/* ======== For Founders V2 (31 Oct) ======== */
.cf-mw-24 { max-width: 24ch; }
.cf-split__side--ff { flex-basis: 440px; gap: 20px; }
.cf-split__side--460 { flex-basis: 460px; gap: 16px; }
.cf-split__sub { margin: 0; font-size: 16px; line-height: 1.6; color: var(--cf-dark-blue); text-wrap: pretty; }
.cf-split__side--ff .cf-split__actions { margin-top: 8px; }
/* four founder problems: static ruled cells */
.cf-probs { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 40px; border-top: 1px solid var(--cf-navy); }
.cf-probs li { padding: 28px 0 32px; border-bottom: 1px solid var(--cf-border-warm); display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cf-probs h3 { margin: 0; font-family: var(--cf-font-display); font-weight: 500; font-size: clamp(22px, 1.67vw, 24px); line-height: 1.15; letter-spacing: -0.02em; color: var(--cf-navy); text-wrap: balance; }
.cf-probs p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--cf-dark-blue); text-wrap: pretty; }
@media (min-width: 768px) { .cf-probs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cf-probs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cf-bridge { margin: 40px 0 0; max-width: 640px; font-size: clamp(18px, calc(17.43px + 0.179vw), 20px); line-height: 1.5; font-weight: 600; color: var(--cf-navy); text-wrap: pretty; }
/* founder → team: a table at 1000px and up, tabs below */
.cf-head--ff > div:last-child { flex: 0 1 460px; max-width: 640px; display: flex; flex-direction: column; gap: 12px; }
.cf-head--ff > div:last-child p { margin: 0; text-wrap: pretty; }
.cf-head--ff > div:last-child p:first-child { font-size: clamp(18px, calc(17.43px + 0.179vw), 20px); line-height: 1.5; color: var(--cf-navy); }
.cf-head--ff > div:last-child p:last-child { font-size: 16px; line-height: 1.6; color: var(--cf-dark-blue); }
.cf-ho__k { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cf-ho__k > span:not([class]) { font: 500 12px/1.2 var(--cf-font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cf-medium-blue); white-space: nowrap; }
.cf-ho__dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--cf-navy); }
.cf-ho__dot--orange { background: var(--cf-orange); }
.cf-ho__dot--blue { background: var(--cf-light-blue); }
.cf-ho__conn { flex: 1; height: 1px; background: var(--cf-line-strong); }
.cf-ho__arr { font-size: 14px; line-height: 1; color: #8E8677; }
.cf-ho__m { margin: 0; padding-top: 12px; border-top: 1px solid var(--cf-border-warm); font-size: 14px; line-height: 1.5; color: var(--cf-medium-blue); }
.cf-ho__m > span { margin-left: 8px; font-size: 16px; font-weight: 600; color: var(--cf-navy); }
.cf-hm { display: none; }
.cf-hm__row { display: grid; grid-template-columns: 200px repeat(2, minmax(0, 1fr)) minmax(0, 1.2fr); column-gap: 40px; align-items: start; padding: 32px 0 36px; border-bottom: 1px solid var(--cf-border-warm); }
.cf-hm__row--head { align-items: center; padding: 0 0 16px; border-bottom-color: var(--cf-navy); }
.cf-hm__row > p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--cf-dark-blue); text-wrap: pretty; }
.cf-hm__row > p:nth-child(2) { color: var(--cf-navy); }
.cf-hm__label { display: flex; flex-direction: column; gap: 12px; }
.cf-hm__label > span:last-child, .cf-ht__tab > span:last-child { font-family: var(--cf-font-display); font-weight: 500; font-size: clamp(22px, 1.67vw, 24px); line-height: 1.15; letter-spacing: -0.02em; color: var(--cf-navy); }
.cf-hm__build { display: flex; flex-direction: column; gap: 14px; }
.cf-hm__build > p:first-child { margin: 0; font-family: var(--cf-font-display); font-weight: 500; font-size: clamp(18px, calc(17.43px + 0.179vw), 20px); line-height: 1.35; letter-spacing: -0.015em; color: var(--cf-navy); text-wrap: pretty; }
.cf-hm__note { margin: 16px 0 0; font-size: 14px; color: var(--cf-medium-blue); text-align: right; }
.cf-ht__bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 32px; border-bottom: 1px solid var(--cf-navy); }
.cf-ht__tabs { display: flex; flex-wrap: nowrap; max-width: 100%; gap: 0 40px; }
.cf-ht__tab { cursor: pointer; font: inherit; border: 0; background: transparent; padding: 12px 0 14px; margin-bottom: -1px; min-height: 44px; flex: none; white-space: nowrap; display: flex; align-items: baseline; gap: 10px; color: var(--cf-medium-blue); transition: color var(--cf-ease); }
.cf-ht__tab > span:last-child { font-weight: 400; color: inherit; }
.cf-ht__tab .cf-num { font-size: 14px; }
.cf-ht__tab:hover, .cf-ht__tab[aria-selected="true"] { color: var(--cf-navy); }
.cf-ht__tab[aria-selected="true"] { box-shadow: inset 0 -2px 0 var(--cf-navy); }
.cf-ht__tab[aria-selected="true"] > span:last-child { font-weight: 600; }
.cf-section--canvas .cf-num { color: var(--cf-light-blue-on-warm); }
.cf-ht__note { font-size: 14px; color: var(--cf-medium-blue); padding-bottom: 16px; white-space: nowrap; }
.cf-ht__panel { display: grid; grid-template-columns: minmax(0, 1fr); }
.cf-ht__panel > div { display: flex; flex-direction: column; gap: 16px; padding: 28px 0 0; }
.cf-ht__panel > div + div { border-top: 1px solid var(--cf-border-warm); margin-top: 28px; }
.cf-ht__panel > div:first-child { padding-top: 36px; }
.cf-ht__panel p { margin: 0; font-family: var(--cf-font-display); font-size: clamp(18px, calc(17.43px + 0.179vw), 20px); line-height: 1.45; letter-spacing: -0.01em; color: var(--cf-navy); text-wrap: pretty; }
.cf-ht__build > p:nth-of-type(1) { font-weight: 500; font-size: clamp(22px, 1.67vw, 24px); line-height: 1.25; letter-spacing: -0.02em; }
.cf-ht__build > .cf-ho__m { margin-top: 4px; padding-top: 14px; font-family: var(--cf-font-body); font-size: 14px; letter-spacing: 0; color: var(--cf-medium-blue); }
/* phones: a long label wraps onto two lines; if the three still don't fit (320px with text spacing) the tabs wrap */
@media (max-width: 767px) {
  .cf-ht__tabs { gap: 0 18px; flex-wrap: wrap; }
  .cf-ht__tab { flex: 0 1 auto; white-space: normal; text-align: left; }
  .cf-ht__tab .cf-num { display: none; }
  .cf-ht__tab > span:last-child { font-size: 16px; }
}
@media (max-width: 400px) { .cf-ht__tabs { gap: 0 12px; } }
@media (min-width: 1000px) { .cf-hm { display: block; } .cf-ht { display: none; } }
/* where do you need help: three equal service cards, then two lines */
.cf-svc { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 900px) { .cf-svc { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cf-svc li { display: flex; min-width: 0; }
.cf-svc a { flex: 1; min-width: 0; background: var(--cf-white); border: 1px solid var(--cf-border-warm); display: flex; flex-direction: column; text-decoration: none; color: var(--cf-navy); transition: border-color var(--cf-ease); }
.cf-svc a:hover { border-color: var(--cf-navy); color: var(--cf-navy); }
.cf-svc img { display: block; width: 100%; height: 120px; object-fit: cover; background: var(--cf-highlight); }
.cf-svc a > div { padding: var(--cf-p-card); display: flex; flex-direction: column; gap: 14px; flex: 1; }
.cf-svc p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--cf-dark-blue); text-wrap: pretty; }
.cf-svc p:first-child { line-height: 1.45; color: var(--cf-medium-blue); }
.cf-svc h3 { margin: 0; font-family: var(--cf-font-display); font-weight: 400; font-size: clamp(22px, 1.67vw, 24px); line-height: 1.15; letter-spacing: -0.025em; }
.cf-svc a > div > span { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--cf-line-soft); font-weight: 600; font-size: 16px; }
@media (max-width: 767px) { .cf-svc img { height: 96px; } }
.cf-ldc { margin-top: 32px; padding: 24px 0; border-top: 1px solid var(--cf-navy); border-bottom: 1px solid var(--cf-border-warm); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 40px; }
.cf-ldc > div { flex: 1 1 420px; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cf-ldc > div > span:first-child { font-family: var(--cf-font-display); font-size: clamp(18px, calc(17.43px + 0.179vw), 20px); font-weight: 500; letter-spacing: -0.01em; color: var(--cf-navy); }
.cf-ldc > div > span:last-child { font-size: 16px; line-height: 1.55; color: var(--cf-dark-blue); }
.cf-ldc > a, .cf-first a { font-weight: 600; color: var(--cf-navy); text-decoration: underline; text-underline-offset: 4px; }
.cf-ldc > a { flex: 0 1 auto; display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; }
.cf-ldc > a:hover, .cf-first a:hover { color: var(--cf-light-blue); }
.cf-first { margin-top: 24px; max-width: 880px; display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; font-size: 14px; line-height: 1.55; color: var(--cf-dark-blue); }
.cf-first > span:first-child { font-weight: 600; color: var(--cf-navy); }
.cf-first a { font-weight: 500; text-underline-offset: 3px; }
/* proof: two results, then the quote */
.cf-cases { display: grid; grid-template-columns: minmax(0, 1fr); border: 1px solid var(--cf-border-warm); background: var(--cf-white); }
.cf-cases > div { padding: var(--cf-p-card); display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.cf-cases > div + div { border-top: 1px solid var(--cf-border-warm); }
@media (min-width: 768px) { .cf-cases { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cf-cases > div + div { border-top: 0; border-left: 1px solid var(--cf-border-warm); } }
.cf-cases__logo { position: relative; height: 36px; width: var(--w); }
.cf-cases__logo img { position: absolute; left: 50%; top: 50%; width: auto; max-width: none; height: var(--h); transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))); }
.cf-cases__fig { font-family: var(--cf-font-display); font-weight: 300; font-size: clamp(42px, calc(30.86px + 2.857vw), 72px); line-height: 1; letter-spacing: -0.04em; color: var(--cf-navy); }
.cf-cases p { margin: 0; max-width: 40ch; font-size: 16px; line-height: 1.55; color: var(--cf-dark-blue); text-wrap: pretty; }
.cf-fq { margin: var(--cf-block-gap) 0 0; max-width: 1040px; display: flex; flex-direction: column; gap: 32px; }
.cf-fq blockquote { margin: 0; font-family: var(--cf-font-display); font-weight: 400; font-size: clamp(24px, calc(21.71px + 0.714vw), 32px); line-height: 1.3; letter-spacing: -0.02em; color: var(--cf-navy); text-wrap: pretty; }
.cf-fq figcaption { display: flex; flex-direction: column; gap: 4px; padding-top: 20px; border-top: 1px solid var(--cf-navy); max-width: 420px; }
.cf-fq figcaption span:first-child { font-family: var(--cf-font-display); font-size: clamp(22px, 1.67vw, 24px); line-height: 1.15; letter-spacing: -0.02em; color: var(--cf-navy); }
.cf-fq figcaption span:last-child { font-size: 16px; color: var(--cf-medium-blue); }
.cf-close p.cf-close__intro--640 { max-width: 640px; }

/* ======== Our Work V2 (31 Oct) ======== */
.cf-cidx-wrap { padding-bottom: var(--cf-block-gap); }
.cf-cidx ol { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; border-top: 1px solid var(--cf-navy); }
@media (min-width: 1100px) { .cf-cidx ol { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cf-cidx li { border-bottom: 1px solid var(--cf-border-warm); min-width: 0; }
.cf-cidx a { display: flex; align-items: baseline; gap: 14px; padding: 18px 0; min-height: 44px; text-decoration: none; color: var(--cf-navy); }
.cf-cidx a:hover { color: var(--cf-light-blue); }
.cf-cidx .cf-num { font-size: 14px; }
.cf-cidx a > span:last-child { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.cf-cidx a > span:last-child > span:first-child { font-family: var(--cf-font-display); font-size: clamp(18px, calc(17.43px + 0.179vw), 20px); line-height: 1.2; font-weight: 500; letter-spacing: -0.015em; }
.cf-cidx a > span:last-child > span:last-child { font-size: 14px; color: var(--cf-medium-blue); }
.cf-cidx p { margin: 24px 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; font-size: 14px; line-height: 1.5; color: var(--cf-medium-blue); }
.cf-cidx p > span:first-child { font-weight: 600; color: var(--cf-navy); }
/* the cases: a lead case, a pair, then rows; one toggle per case shows the engagement in full */
.cf-case { scroll-margin-top: 88px; outline-offset: 4px; }
.cf-case--lead { border: 1px solid var(--cf-navy); background: var(--cf-white); padding: clamp(20px, 3.33vw, 48px); }
.cf-case__top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; }
.cf-case__id { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.cf-case__id > span, .cf-case__chips { font-size: 14px; line-height: 1.4; color: var(--cf-medium-blue); }
.cf-case__chips { line-height: 1.5; }
.cf-case__id--col { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 6px; min-width: 0; }
.cf-case__logo { position: relative; flex: none; height: 36px; width: var(--w); }
.cf-case__logo img { position: absolute; left: 50%; top: 50%; width: auto; max-width: none; height: var(--h); transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))); }
.cf-case__id > .cf-case__name { display: flex; align-items: center; height: 36px; font-family: var(--cf-font-display); font-size: 20px; font-weight: 600; letter-spacing: -0.02em; color: var(--cf-navy); }
.cf-case__k { margin: 0 0 12px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cf-medium-blue); }
.cf-case__sum { margin-top: 36px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 56px; align-items: start; }
@media (min-width: 1000px) { .cf-case__sum { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.cf-case__sum > div { min-width: 0; }
.cf-case--lead h3 { margin: 0; font-family: var(--cf-font-display); font-weight: 400; font-size: clamp(24px, calc(21.71px + 0.714vw), 32px); line-height: 1.2; letter-spacing: -0.025em; color: var(--cf-navy); text-wrap: balance; }
.cf-case__keep { border-top: 2px solid var(--cf-light-blue); padding-top: 18px; }
.cf-case__keep .cf-case__k { margin-bottom: 10px; }
.cf-case__keep > p:last-child { margin: 0; font-family: var(--cf-font-display); font-size: clamp(18px, calc(17.43px + 0.179vw), 20px); line-height: 1.4; font-weight: 500; letter-spacing: -0.01em; color: var(--cf-navy); text-wrap: pretty; }
.cf-case__q { margin: 40px 0 0; padding-top: 28px; border-top: 1px solid var(--cf-navy); display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 28px; align-items: start; }
.cf-case__q:has(> img) { grid-template-columns: 72px minmax(0, 1fr); }
.cf-case__q > div { min-width: 0; max-width: 62ch; }
.cf-case__photo { width: 72px; height: 72px; object-fit: cover; object-position: 50% 20%; display: block; background: var(--cf-section-warm); }
.cf-case__q blockquote { margin: 0; font-family: var(--cf-font-display); font-size: clamp(18px, calc(17.43px + 0.179vw), 20px); line-height: 1.4; letter-spacing: -0.015em; color: var(--cf-navy); text-wrap: pretty; }
.cf-case__q figcaption { margin-top: 14px; font-size: 14px; line-height: 1.5; color: var(--cf-medium-blue); }
.cf-case__q figcaption > span { color: var(--cf-navy); font-weight: 600; }
.cf-case__acts { margin-top: 32px; display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.cf-ulink { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 16px; color: var(--cf-navy); text-decoration: underline; text-underline-offset: 4px; }
.cf-ulink:hover { color: var(--cf-light-blue); }
.cf-case__btn { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 10px 16px; background: var(--cf-white); color: var(--cf-navy); border: 1px solid var(--cf-navy); font-size: 14px; font-weight: 600; cursor: pointer; text-align: left; }
.cf-case__btn[aria-expanded="true"] { background: var(--cf-navy); color: var(--cf-white); }
.cf-case__btn [data-sign] { font-size: 16px; line-height: 1; }
.cf-on-open { display: none; }
[aria-expanded="true"] > .cf-on-open { display: inline; }
.cf-case__region[hidden] { display: none; }
.cf-case__region--rule { margin-top: 32px; border-top: 1px solid var(--cf-border-warm); padding-top: 28px; }
.cf-case__det { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px 40px; }
@media (min-width: 1000px) { .cf-case__det { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cf-case__det > div { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.cf-case__det h4, .cf-case__det h5 { margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cf-medium-blue); }
.cf-case__det p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--cf-dark-blue); text-wrap: pretty; }
.cf-case__det p.cf-case__kept { color: var(--cf-navy); }
.cf-case__det ul { margin: 0; padding: 0 0 0 18px; display: flex; flex-direction: column; gap: 10px; }
.cf-case__det li { font-size: 16px; line-height: 1.55; color: var(--cf-dark-blue); text-wrap: pretty; }
.cf-case__note { margin: 24px 0 0; max-width: 640px; font-size: 14px; line-height: 1.6; color: var(--cf-medium-blue); text-wrap: pretty; }
.cf-cases2 { margin-top: 16px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 900px) { .cf-cases2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cf-case--pair { min-width: 0; background: var(--cf-white); border: 1px solid var(--cf-border-warm); padding: var(--cf-p-card); display: flex; flex-direction: column; transition: border-color var(--cf-ease); }
.cf-case--pair:has(> .cf-case__btn[aria-expanded="true"]) { border-color: var(--cf-navy); }
.cf-case__k--28 { margin: 28px 0 10px; }
.cf-case--pair h3 { margin: 0; font-family: var(--cf-font-display); font-weight: 400; font-size: clamp(22px, 1.67vw, 24px); line-height: 1.25; letter-spacing: -0.02em; color: var(--cf-navy); text-wrap: pretty; }
.cf-case--pair .cf-case__keep { margin-top: 24px; padding-top: 16px; }
.cf-case--pair .cf-case__keep .cf-case__k { margin-bottom: 8px; }
.cf-case--pair .cf-case__keep > p:last-child { font-family: var(--cf-font-body); font-size: 16px; line-height: 1.5; letter-spacing: 0; }
.cf-case__q--sm { margin-top: 28px; padding-top: 24px; gap: 16px 24px; }
.cf-case__q--sm:has(> img) { grid-template-columns: 64px minmax(0, 1fr); }
.cf-case__q--sm .cf-case__photo { width: 64px; height: 64px; }
.cf-case__q--sm blockquote { font-size: 18px; }
.cf-case__q--sm figcaption { margin-top: 12px; }
.cf-case--pair > .cf-case__btn { margin-top: 28px; align-self: flex-start; }
.cf-case--pair .cf-case__region--rule { margin-top: 28px; padding-top: 24px; }
.cf-case__region--stack .cf-case__det { grid-template-columns: minmax(0, 1fr); gap: 24px; margin-top: 24px; }
.cf-case__region--stack .cf-case__chips { margin: 0; }
.cf-case__region--stack .cf-case__note { margin-top: 24px; max-width: none; }
.cf-more__h { margin: var(--cf-block-gap) 0 0; font-family: var(--cf-font-display); font-weight: 400; font-size: clamp(22px, 1.67vw, 24px); letter-spacing: -0.02em; color: var(--cf-navy); }
.cf-more { list-style: none; margin: 24px 0 0; padding: 0; border-top: 1px solid var(--cf-navy); }
.cf-more > li { border-bottom: 1px solid var(--cf-border-warm); }
.cf-case--row { padding: 28px 0; }
.cf-case__rowtop { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 40px; align-items: start; }
@media (min-width: 900px) { .cf-case__rowtop { grid-template-columns: 220px minmax(0, 1fr) auto; } .cf-case__rowtop > .cf-case__btn { justify-self: end; } }
.cf-case__rowtop > .cf-case__btn { justify-self: start; }
.cf-case__rowmain { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.cf-case__rowmain h4 { margin: 0; font-family: var(--cf-font-display); font-weight: 400; font-size: clamp(18px, calc(17.43px + 0.179vw), 20px); line-height: 1.35; letter-spacing: -0.015em; color: var(--cf-navy); text-wrap: pretty; }
.cf-case__kept1 { margin: 0; display: flex; gap: 10px; align-items: baseline; font-size: 16px; line-height: 1.5; color: var(--cf-navy); text-wrap: pretty; }
.cf-case__kept1 > span:first-child { flex: none; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cf-light-blue); }
.cf-case--row .cf-case__region { margin-top: 28px; }
.cf-case__chips--20 { margin: 0 0 20px; }
.cf-case__det--rule { border-top: 1px solid var(--cf-border-warm); padding-top: 28px; }
.cf-case__q--row { margin-top: 32px; padding-top: 24px; max-width: 72ch; }
/* closing on the warm band, with a second link and a line to About */
.cf-close--canvas { background: var(--cf-canvas-warm); padding: calc(var(--cf-section-y) * 1.2) 0; }
.cf-close__acts { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 16px 28px; }
.cf-close p.cf-close__small { margin: 8px 0 0; font-size: 14px; color: var(--cf-medium-blue); }
.cf-close__small a { color: var(--cf-navy); font-weight: 600; text-underline-offset: 3px; }
.cf-close__small a:hover, .cf-close--canvas .cf-ulink:hover { color: var(--cf-light-blue-on-warm); }

/* ======== About Us V2 (31 Oct) ======== */
.cf-mw-26 { max-width: 26ch; }
.cf-head2--440 > p { flex-basis: 440px; font-size: 16px; line-height: 1.6; }
.cf-head2--lede > p { font-size: clamp(18px, calc(17.43px + 0.179vw), 20px); line-height: 1.5; color: var(--cf-navy); }
.cf-hl2 { background: var(--cf-highlight); -webkit-box-decoration-break: clone; box-decoration-break: clone; padding: 0 4px; }
.cf-cidx-wrap--sec { padding-bottom: var(--cf-section-y); }
/* hero facts: five across at 1200px, two (Sectors full width) at 600–1199px, stacked below */
.cf-afacts { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 40px; border-top: 1px solid var(--cf-navy); }
.cf-afacts > div { min-width: 0; padding: 20px 0; border-bottom: 1px solid var(--cf-border-warm); display: flex; flex-direction: column; gap: 6px; }
.cf-afacts dt, .cf-pf dt { font: 500 12px/1.2 var(--cf-font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cf-medium-blue); }
.cf-afacts dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--cf-navy); text-wrap: pretty; }
@media (min-width: 600px) { .cf-afacts { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cf-afacts > div:last-child { grid-column: 1 / -1; } }
@media (min-width: 1200px) { .cf-afacts { grid-template-columns: repeat(5, minmax(0, 1fr)); } .cf-afacts > div:last-child { grid-column: auto; } .cf-afacts > div { border-bottom: 0; } }
/* two statement lines */
.cf-stmts { display: flex; flex-direction: column; gap: 24px; max-width: 900px; }
.cf-stmts p { margin: 0; font-family: var(--cf-font-display); font-size: clamp(24px, calc(21.71px + 0.714vw), 32px); line-height: 1.25; letter-spacing: -0.02em; color: var(--cf-navy); text-wrap: pretty; }
.cf-stmts--880 { max-width: 880px; gap: 20px; }
.cf-stmts p.cf-stmts__small { max-width: 640px; font-family: var(--cf-font-body); font-size: 16px; line-height: 1.6; letter-spacing: 0; color: var(--cf-dark-blue); }
/* people: two lead operators, two operators, the specialist network */
.cf-leads { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px 40px; }
.cf-ops { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 40px; border-top: 1px solid var(--cf-navy); }
@media (min-width: 900px) { .cf-leads, .cf-ops { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cf-leads > li { min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.cf-leads__img { aspect-ratio: 4 / 3; background: var(--cf-section-warm); overflow: hidden; }
.cf-leads__img img, .cf-ops__img img, .cf-specs__img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; display: block; }
.cf-leads__name, .cf-ops__name { display: flex; flex-direction: column; gap: 6px; }
.cf-leads__name h3 { margin: 0; font-family: var(--cf-font-display); font-weight: 400; font-size: clamp(24px, calc(21.71px + 0.714vw), 32px); line-height: 1.1; letter-spacing: -0.025em; color: var(--cf-navy); }
.cf-leads__name p, .cf-ops__name p { margin: 0; font-size: 16px; font-weight: 600; color: var(--cf-light-blue); }
.cf-leads__bio { margin: 0; max-width: 640px; font-size: clamp(18px, calc(17.43px + 0.179vw), 20px); line-height: 1.5; color: var(--cf-navy); text-wrap: pretty; }
.cf-pf { margin: 0; border-top: 1px solid var(--cf-border-warm); }
.cf-pf > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 24px; padding: 16px 0; border-bottom: 1px solid var(--cf-border-warm); }
@media (min-width: 768px) { .cf-pf > div { grid-template-columns: 152px minmax(0, 1fr); } }
.cf-pf dt { line-height: 1.6; }
.cf-pf dd { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.cf-pf dd > span { font-size: 16px; line-height: 1.55; color: var(--cf-dark-blue); text-wrap: pretty; }
.cf-pf dd > span.is-strong { font-weight: 600; color: var(--cf-navy); }
.cf-pf--sm > div { gap: 4px 20px; padding: 12px 0; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 768px) and (max-width: 899px), (min-width: 1240px) { .cf-pf--sm > div { grid-template-columns: 128px minmax(0, 1fr); } }
.cf-pf--sm dd { gap: 4px; }
.cf-pf--sm dd > span { font-size: 14px; }
.cf-plinks { display: flex; flex-wrap: wrap; gap: 0 24px; }
.cf-plinks a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; font-size: 14px; color: var(--cf-navy); text-decoration: underline; text-underline-offset: 4px; white-space: nowrap; }
.cf-plinks a:hover { color: var(--cf-light-blue); }
.cf-ops > li { min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px 28px; padding: 32px 0; border-bottom: 1px solid var(--cf-border-warm); }
@media (min-width: 768px) { .cf-ops > li { grid-template-columns: 120px minmax(0, 1fr); } }
@media (min-width: 900px) { .cf-ops > li { border-bottom: 0; } }
.cf-ops__img { width: 96px; aspect-ratio: 1 / 1; background: var(--cf-section-warm); overflow: hidden; }
@media (min-width: 768px) { .cf-ops__img { width: 120px; } }
.cf-ops__body { min-width: 0; display: flex; flex-direction: column; gap: 12px; }
.cf-ops__name { gap: 4px; }
.cf-ops__name h3 { margin: 0; font-family: var(--cf-font-display); font-weight: 400; font-size: clamp(22px, 1.67vw, 24px); line-height: 1.15; letter-spacing: -0.02em; color: var(--cf-navy); }
.cf-ops__name p { font-size: 14px; }
.cf-ops__bio { margin: 0; font-size: 16px; line-height: 1.6; color: var(--cf-dark-blue); text-wrap: pretty; }
/* how an engagement works: three roles */
.cf-roles { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 40px; border-top: 1px solid var(--cf-navy); }
.cf-roles > li { min-width: 0; padding: 28px 0 32px; border-bottom: 1px solid var(--cf-border-warm); display: flex; flex-direction: column; gap: 14px; }
.cf-roles__k { display: flex; align-items: center; gap: 12px; }
.cf-roles__dot { flex: none; width: var(--d); height: var(--d); border-radius: 50%; background: var(--c); }
.cf-roles__conn { display: none; flex: 1; height: 1px; background: var(--cf-line-strong); }
.cf-roles h3 { margin: 0; font-family: var(--cf-font-display); font-weight: 500; font-size: clamp(22px, 1.67vw, 24px); line-height: 1.15; letter-spacing: -0.02em; color: var(--cf-navy); }
.cf-roles p { margin: 0; font-size: 16px; line-height: 1.6; color: var(--cf-dark-blue); text-wrap: pretty; }
@media (min-width: 1000px) { .cf-roles { grid-template-columns: repeat(3, minmax(0, 1fr)); } .cf-roles > li { border-bottom: 0; } .cf-roles > li:not(:last-child) .cf-roles__conn { display: block; } }
.cf-net { display: grid; grid-template-columns: minmax(0, 1fr); gap: 40px 64px; }
@media (min-width: 1100px) { .cf-net { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); } }
.cf-net > div { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.cf-net > div > p { margin: 0; max-width: 640px; font-size: 16px; line-height: 1.6; color: var(--cf-dark-blue); text-wrap: pretty; }
.cf-specs { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 32px; border-top: 1px solid var(--cf-navy); align-self: start; }
@media (min-width: 768px) { .cf-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cf-specs > li { min-width: 0; display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 16px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--cf-border-warm); }
.cf-specs__img { width: 56px; height: 56px; background: var(--cf-section-warm); overflow: hidden; }
.cf-specs > li > div:last-child { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cf-specs a { font-size: 16px; font-weight: 600; color: var(--cf-navy); text-decoration: none; }
.cf-specs a:hover { color: var(--cf-light-blue); text-decoration: underline; }
.cf-specs span { font-size: 14px; line-height: 1.45; color: var(--cf-medium-blue); }
/* closing */
.cf-section--last { border-bottom: 0; }
.cf-aclose { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px 64px; }
.cf-aclose > div:first-child { flex: 1 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.cf-aclose > div:first-child > p { margin: 0; max-width: 640px; font-size: clamp(18px, calc(17.43px + 0.179vw), 20px); line-height: 1.5; color: var(--cf-navy); text-wrap: pretty; }
.cf-aclose__acts { flex: 0 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; }
.cf-section--canvas .cf-ulink:hover, .cf-section--canvas .cf-specs a:hover { color: var(--cf-light-blue-on-warm); }

/* ======== MEDDPICC Competence Model V1 (31 Oct) ======== */
.cf-mw-22 { max-width: 22ch; }
.cf-lbl { margin: 0; font: 500 12px/1.3 var(--cf-font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cf-medium-blue); }
.cf-plain { display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 600; color: var(--cf-navy); text-decoration: none; }
.cf-plain:hover { color: var(--cf-light-blue); }
.cf-head2--480 > p { flex-basis: 480px; font-size: clamp(18px, calc(17.43px + 0.179vw), 20px); line-height: 1.5; color: var(--cf-navy); }
.cf-stmt1 { max-width: 900px; font-family: var(--cf-font-display); font-size: clamp(24px, calc(21.71px + 0.714vw), 32px); line-height: 1.25; letter-spacing: -0.02em; color: var(--cf-navy); text-wrap: pretty; }
/* hero: breadcrumb, headline and side column, four facts */
.cf-cmhero { padding-top: calc(var(--cf-section-y) * 0.6); padding-bottom: var(--cf-section-y); }
.cf-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 14px; color: var(--cf-medium-blue); }
.cf-crumb a { color: var(--cf-navy); text-decoration: none; border-bottom: 1px solid var(--cf-light-blue); white-space: nowrap; }
.cf-crumb a:hover { color: var(--cf-light-blue); }
.cf-cmhero__row { margin-top: calc(var(--cf-block-gap) * 0.7); display: flex; flex-wrap: wrap; align-items: flex-end; gap: 40px 64px; }
.cf-cmhero__row .cf-split__main { flex-basis: 520px; }
@media (min-width: 1056px) and (max-width: 1081px) { .cf-split__side--1082 { border-left: 0; border-top: 1px solid var(--cf-navy); padding: 28px 0 0; } }
.cf-afacts--4 { margin-top: var(--cf-block-gap); }
@media (min-width: 600px) { .cf-afacts--4 > div:last-child { grid-column: auto; } }
@media (min-width: 1000px) { .cf-afacts--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cf-afacts--4 > div { border-bottom: 0; } }
/* versus: two panels and a ≠ marker */
.cf-vs { display: grid; grid-template-columns: minmax(0, 1fr); align-items: stretch; }
@media (min-width: 1000px) { .cf-vs { grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); } }
.cf-vs__a, .cf-vs__b { min-width: 0; padding: var(--cf-p-card); display: flex; flex-direction: column; gap: 16px; }
.cf-vs__a { background: var(--cf-navy); }
.cf-vs__a .cf-lbl { color: #C9D6E6; }
.cf-vs__b { background: #E9EFF6; border: 1px solid #C9D6E6; }
.cf-vs h3 { margin: 0; font-family: var(--cf-font-display); font-weight: 400; font-size: clamp(22px, 1.67vw, 24px); line-height: 1.2; letter-spacing: -0.03em; color: var(--cf-navy); }
.cf-vs__a h3 { color: var(--cf-white); }
.cf-vs p:not(.cf-lbl) { margin: 0; font-size: 18px; line-height: 1.55; color: var(--cf-navy); text-wrap: pretty; }
.cf-vs__a p:not(.cf-lbl) { color: var(--cf-canvas-warm); }
.cf-vs__a a { margin-top: auto; align-self: flex-start; display: inline-flex; align-items: center; min-height: 44px; font-size: 16px; font-weight: 600; color: var(--cf-white); text-decoration: none; }
.cf-vs__a a:hover { color: #C9D6E6; }
.cf-vs__a a:focus-visible { outline-color: var(--cf-white); }
.cf-vs__mid { display: flex; align-items: center; justify-content: center; padding: 16px 0; }
@media (min-width: 1000px) { .cf-vs__mid { padding: 0; } }
.cf-vs__mid span { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--cf-navy); background: var(--cf-white); display: flex; align-items: center; justify-content: center; font: 400 24px/1 var(--cf-font-display); color: var(--cf-navy); }
/* seven competencies: tabs, one panel each (stacked), shared controls, the full table */
.cf-cmtabs { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--cf-navy); }
@media (min-width: 600px) { .cf-cmtabs { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cf-cmtabs { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
.cf-cmtab { min-width: 0; min-height: 44px; text-align: left; cursor: pointer; background: var(--cf-white); border: 0; border-bottom: 1px solid var(--cf-border-warm); box-shadow: inset -1px 0 0 #E6E1D8; padding: 14px 4px; display: flex; flex-direction: row; align-items: center; gap: 10px 14px; color: var(--cf-navy); }
@media (min-width: 600px) { .cf-cmtab { padding: 20px 16px 22px; flex-direction: column; align-items: flex-start; } }
.cf-cmtab:hover, .cf-cmtab[aria-selected="true"] { background: var(--cf-canvas-warm); }
.cf-cmtab__n { flex: none; display: flex; flex-direction: column; gap: 10px; }
.cf-cmtab__n > span:first-child { font: 500 12px/1 var(--cf-font-display); letter-spacing: 0.12em; color: var(--cf-light-blue-on-warm); }
.cf-cmtab__n > span:last-child { display: none; width: 32px; height: 2px; background: var(--cf-border-warm); }
.cf-cmtab[aria-selected="true"] .cf-cmtab__n > span:last-child { background: var(--cf-navy); }
.cf-cmtab__t { font-size: 16px; line-height: 1.35; text-wrap: pretty; }
.cf-cmtab[aria-selected="true"] .cf-cmtab__t { font-weight: 600; }
.cf-cmtab__s { display: none; margin-top: auto; font-size: 12px; font-weight: 600; color: var(--cf-medium-blue); }
@media (min-width: 600px) { .cf-cmtab__n > span:last-child { display: block; } .cf-cmtab[aria-selected="true"] .cf-cmtab__s { display: block; } }
.cf-cmp { background: var(--cf-canvas-warm); border: 1px solid var(--cf-border-warm); border-top: 0; padding: calc(var(--cf-p-card) * 1.25); display: flex; flex-direction: column; gap: 32px; }
.cf-cmp__panel { display: flex; flex-direction: column; gap: 32px; min-width: 0; }
.cf-cmp__panel:focus-visible { outline-offset: 6px; }
.cf-cmp__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px 32px; }
.cf-cmp__head > div { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cf-cmp__head h3 { margin: 0; font-family: var(--cf-font-display); font-weight: 400; font-size: clamp(24px, calc(21.71px + 0.714vw), 32px); line-height: 1.15; letter-spacing: -0.025em; color: var(--cf-navy); text-wrap: balance; }
.cf-cmp__lv { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--cf-navy); border-radius: 999px; background: var(--cf-white); font-size: 14px; font-weight: 600; color: var(--cf-navy); white-space: nowrap; }
.cf-cmp__lv > span { width: 8px; height: 8px; border-radius: 50%; background: var(--cf-navy); }
.cf-cmp__draws { display: flex; flex-direction: column; gap: 12px; }
.cf-cmp__draws > p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--cf-medium-blue); }
.cf-cmp__draws > p > span { font-weight: 600; color: var(--cf-navy); }
.cf-letters { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
@media (min-width: 900px) { .cf-letters { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
.cf-letters li { min-width: 0; background: var(--cf-white); border: 1px solid var(--cf-border-warm); padding: 12px 10px; display: flex; flex-direction: column; gap: 6px; }
.cf-letters li > span:first-child { font: 400 28px/1 var(--cf-font-display); color: var(--cf-medium-blue); }
.cf-letters li > span:last-child { font-size: 12px; line-height: 1.3; color: var(--cf-medium-blue); overflow-wrap: anywhere; }
.cf-letters li.is-on { background: var(--cf-navy); border-color: var(--cf-navy); }
.cf-letters li.is-on > span:first-child { color: var(--cf-white); }
.cf-letters li.is-on > span:last-child { color: var(--cf-canvas-warm); }
.cf-letters li.is-soft { background: #E9EFF6; border-color: var(--cf-light-blue); }
.cf-letters li.is-soft > span { color: var(--cf-navy) !important; }
.cf-cmp__sm { display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--cf-navy); }
.cf-cmp__sm > div { min-width: 0; padding: 24px 0; display: flex; flex-direction: column; gap: 10px; }
.cf-cmp__sm > div + div { border-top: 1px solid var(--cf-border-warm); padding-bottom: 0; }
@media (min-width: 900px) { .cf-cmp__sm { grid-template-columns: repeat(2, minmax(0, 1fr)); } .cf-cmp__sm > div { padding: 24px 40px 0 0; } .cf-cmp__sm > div + div { border-top: 0; border-left: 1px solid var(--cf-border-warm); padding: 24px 0 0 40px; } }
.cf-cmp__sm p:not(.cf-lbl) { margin: 0; max-width: 640px; font-size: 18px; line-height: 1.55; color: var(--cf-navy); text-wrap: pretty; }
.cf-cmp__ctl { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 24px; padding-top: 20px; border-top: 1px solid var(--cf-border-warm); }
.cf-cmp__ctl > div { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 480px) { .cf-cmbtn { white-space: normal; } }
.cf-cmbtn { min-height: 44px; padding: 0 16px; background: var(--cf-white); border: 1px solid var(--cf-navy); color: var(--cf-navy); font-size: 14px; font-weight: 600; cursor: pointer; white-space: nowrap; }
.cf-cmbtn:hover { background: #E9EFF6; }
.cf-cmtoggle { min-height: 44px; padding: 0; background: none; border: 0; color: var(--cf-navy); font-size: 16px; font-weight: 600; cursor: pointer; text-decoration: underline; text-decoration-color: var(--cf-light-blue); text-underline-offset: 4px; text-align: left; }
.cf-cmtable { margin-top: 40px; }
.cf-cmtable[hidden] { display: none; }
.cf-cmtable__head { display: none; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr); gap: 12px 32px; padding-bottom: 12px; }
.cf-cmtable__head span { font: 500 12px/1.3 var(--cf-font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cf-medium-blue); }
.cf-cmtable ol { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cf-navy); }
.cf-cmtable li { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px 32px; padding: 24px 0; border-bottom: 1px solid var(--cf-border-warm); }
.cf-cmtable li > div { min-width: 0; }
.cf-cmtable h4 { margin: 0; font-family: var(--cf-font-display); font-weight: 500; font-size: 20px; line-height: 1.3; color: var(--cf-navy); }
.cf-cmtable li > div:first-child p { margin: 6px 0 0; font-size: 14px; line-height: 1.45; color: var(--cf-medium-blue); }
.cf-cmtable li p:not(.cf-lbl) { margin: 0; font-size: 16px; line-height: 1.55; color: var(--cf-dark-blue); text-wrap: pretty; }
.cf-cmtable__l { margin-bottom: 6px; }
@media (min-width: 900px) { .cf-cmtable__head { display: grid; } .cf-cmtable li { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr) minmax(0, 1fr); } .cf-cmtable__l { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } }
/* four levels: rising steps, level 3 navy, level 4 dashed */
.cf-lvls { list-style: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-items: start; }
@media (min-width: 600px) { .cf-lvls { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .cf-lvls { grid-template-columns: repeat(4, minmax(0, 1fr)); } .cf-lvls > li:nth-child(1) { margin-top: 120px; } .cf-lvls > li:nth-child(2) { margin-top: 80px; } .cf-lvls > li:nth-child(3) { margin-top: 40px; } }
.cf-lvls > li { min-width: 0; background: var(--cf-white); border: 1px solid var(--cf-border-warm); border-top: 2px solid var(--cf-navy); padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.cf-lvls > li.is-target { background: var(--cf-navy); border-color: var(--cf-navy); }
.cf-lvls > li.is-adv { border: 1px dashed var(--cf-light-blue); border-top: 2px dashed var(--cf-light-blue); }
.cf-lvls__n { font: 400 44px/1 var(--cf-font-display); letter-spacing: -0.03em; color: var(--cf-light-blue); }
.cf-lvls h3 { margin: 0; font-family: var(--cf-font-display); font-weight: 500; font-size: clamp(22px, 1.67vw, 24px); line-height: 1.2; color: var(--cf-navy); }
.cf-lvls p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--cf-dark-blue); text-wrap: pretty; }
.cf-lvls .is-target .cf-lvls__n, .cf-lvls .is-target h3 { color: var(--cf-white); }
.cf-lvls .is-target p { color: var(--cf-canvas-warm); }
.cf-lvls__tag { align-self: flex-start; margin-top: 6px; padding: 4px 10px; border: 1px solid #C9D6E6; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cf-white); white-space: nowrap; }
.cf-two { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 64px; border-top: 1px solid var(--cf-navy); padding-top: 28px; }
@media (min-width: 900px) { .cf-two { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.cf-two p { margin: 0; max-width: 640px; font-size: 18px; line-height: 1.55; color: var(--cf-dark-blue); text-wrap: pretty; }
/* how it is used: three steps and the score timeline */
.cf-cmnum { font: 500 12px/1 var(--cf-font-display); letter-spacing: 0.12em; color: var(--cf-light-blue); }
.cf-when { margin-top: 56px; }
.cf-when > .cf-lbl { margin-bottom: 20px; }
.cf-when ol { list-style: none; margin: 0; padding: 0; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.cf-when__line { position: absolute; left: 6px; right: 0; top: 6px; height: 1px; background: var(--cf-navy); }
.cf-when li:not(.cf-when__line) { position: relative; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.cf-when__dot { width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--cf-navy); background: var(--cf-white); }
.cf-when__dot.is-on { background: var(--cf-navy); }
.cf-when li > span:nth-child(2) { font-size: 16px; font-weight: 600; color: var(--cf-navy); }
.cf-when li > span:nth-child(3) { font-size: 14px; line-height: 1.5; color: var(--cf-medium-blue); }
/* the worked example: a 1–4 scale and the assessment record */
.cf-ex { background: var(--cf-white); border: 1px solid var(--cf-border-warm); padding: calc(var(--cf-p-card) * 1.25); display: flex; flex-direction: column; gap: 32px; }
.cf-ex__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; }
.cf-ex__head h3 { margin: 0; font-family: var(--cf-font-display); font-weight: 400; font-size: clamp(22px, 1.67vw, 24px); line-height: 1.25; letter-spacing: -0.02em; color: var(--cf-navy); text-wrap: balance; }
.cf-ex__head span { font-size: 14px; color: var(--cf-medium-blue); white-space: nowrap; }
.cf-scale { position: relative; height: 118px; margin: 0 8px; }
.cf-scale > span { position: absolute; }
.cf-scale__gap { left: calc(100% / 3); width: calc(100% / 3); top: 40px; height: 14px; background: #FCE9D6; border-top: 2px solid var(--cf-orange); }
.cf-scale__line { left: 0; right: 0; top: 46px; height: 1px; background: var(--cf-navy); }
.cf-scale__tick { left: var(--l); top: 41px; width: 1px; height: 11px; background: var(--cf-navy); }
.cf-scale__tl { left: var(--l); top: 64px; transform: translateX(-50%); font-size: 12px; line-height: 1.3; color: var(--cf-medium-blue); white-space: nowrap; }
.cf-scale__tl--0 { transform: none; }
.cf-scale__tl--3 { transform: translateX(-100%); }
.cf-scale__tl > span:first-child { font-weight: 600; color: var(--cf-navy); }
.cf-scale__pin { left: var(--l); top: 40px; transform: translateX(-50%); width: 13px; height: 13px; border-radius: 50%; border: 2px solid var(--cf-navy); background: var(--cf-white); }
.cf-scale__pin.is-on { background: var(--cf-navy); }
.cf-scale__pl, .cf-scale__note { font-size: 12px; font-weight: 600; color: var(--cf-navy); white-space: nowrap; transform: translateX(-50%); }
.cf-scale__pl { left: var(--l); top: 8px; }
.cf-scale__note { left: 50%; top: 96px; }
.cf-narrow { display: none; }
@media (max-width: 767px) { .cf-wide { display: none; } .cf-narrow { display: inline; } }
.cf-exdl { margin: 0; border-top: 1px solid var(--cf-navy); }
.cf-exdl > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px 32px; padding: 18px 0; border-bottom: 1px solid var(--cf-border-warm); }
@media (min-width: 768px) { .cf-exdl > div { grid-template-columns: 200px minmax(0, 1fr); } }
.cf-exdl dt { padding-top: 4px; font: 500 12px/1.3 var(--cf-font-display); letter-spacing: 0.12em; text-transform: uppercase; color: var(--cf-medium-blue); }
.cf-exdl dd { margin: 0; max-width: 640px; font-size: 17px; line-height: 1.55; color: var(--cf-navy); text-wrap: pretty; }
.cf-ex__note { margin: 0; font-size: 16px; line-height: 1.55; color: var(--cf-medium-blue); text-wrap: pretty; }
/* download band: an HTML sheet of the PDF, built from the page's own data */
.cf-dl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 48px 80px; align-items: center; }
@media (min-width: 1000px) { .cf-dl { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1fr); } }
.cf-dl__sheet { display: block; width: 100%; max-width: 460px; justify-self: center; text-decoration: none; transition: transform var(--cf-ease); }
.cf-dl__sheet:hover { transform: translateY(-4px); }
.cf-dl__sheet, .cf-dl__sheet:hover { color: var(--cf-white); }
.cf-sheet { position: relative; container-type: inline-size; padding: 0 14px 14px 0; }
.cf-sheet__back { position: absolute; top: 14px; left: 14px; right: 0; bottom: 0; background: var(--cf-medium-blue); border: 1px solid var(--cf-light-blue); }
.cf-sheet__page { position: relative; aspect-ratio: 210 / 297; background: var(--cf-white); box-shadow: 0 32px 64px -24px rgba(0, 0, 0, 0.55); padding: 6cqw 6cqw 5cqw; display: flex; flex-direction: column; gap: 2.4cqw; overflow: hidden; color: var(--cf-navy); }
.cf-sheet__top { display: flex; justify-content: space-between; align-items: center; gap: 2cqw; }
.cf-sheet__top img { height: 5cqw; width: auto; display: block; }
.cf-sheet__top span, .cf-sheet__th, .cf-sheet__use > span { font-size: 1.6cqw; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cf-light-blue); }
.cf-sheet__title { display: flex; flex-direction: column; gap: 1cqw; border-bottom: 1px solid var(--cf-navy); padding-bottom: 2cqw; }
.cf-sheet__title > span:first-child { font: 400 6.2cqw/1 var(--cf-font-display); letter-spacing: -0.03em; }
.cf-sheet__title > span:last-child { font-size: 2.3cqw; line-height: 1.3; color: var(--cf-medium-blue); }
.cf-sheet__lv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1cqw; }
.cf-sheet__lv > div { min-width: 0; background: var(--cf-white); border: 1px solid var(--cf-border-warm); padding: 1.2cqw 1.3cqw; display: flex; flex-direction: column; gap: 0.5cqw; }
.cf-sheet__lv > div.is-target { background: var(--cf-navy); border-color: var(--cf-navy); color: var(--cf-white); }
.cf-sheet__lv > div.is-adv { border: 1px dashed var(--cf-light-blue); }
.cf-sheet__lv span:first-child { font-size: 1.9cqw; font-weight: 600; line-height: 1.1; }
.cf-sheet__lv span:last-child { font-size: 1.35cqw; line-height: 1.3; }
.cf-sheet__tbl { display: flex; flex-direction: column; }
.cf-sheet__th, .cf-sheet__tr { display: grid; grid-template-columns: 0.9fr 1.3fr 1.3fr; gap: 2cqw; }
.cf-sheet__th { border-bottom: 1px solid var(--cf-navy); padding-bottom: 0.8cqw; font-size: 1.4cqw; letter-spacing: 0.06em; }
.cf-sheet__tr { border-bottom: 1px solid var(--cf-border-warm); padding: 1.1cqw 0; }
.cf-sheet__tr > span { min-width: 0; font-size: 1.28cqw; line-height: 1.36; color: var(--cf-dark-blue); }
.cf-sheet__tr > span:first-child { display: flex; flex-direction: column; gap: 0.4cqw; }
.cf-sheet__tr > span:first-child > span:first-child { font-size: 1.75cqw; font-weight: 600; line-height: 1.2; color: var(--cf-navy); }
.cf-sheet__tr > span:first-child > span:last-child { font-size: 1.25cqw; line-height: 1.3; color: var(--cf-light-blue); }
.cf-sheet__use { display: flex; flex-direction: column; gap: 1cqw; }
.cf-sheet__use > span { font-size: 1.4cqw; letter-spacing: 0.06em; }
.cf-sheet__use > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2cqw; border-top: 1px solid var(--cf-navy); padding-top: 1cqw; }
.cf-sheet__use > div > span { display: flex; flex-direction: column; gap: 0.4cqw; min-width: 0; }
.cf-sheet__use > div > span > span:first-child { font-size: 1.6cqw; font-weight: 600; }
.cf-sheet__use > div > span > span:last-child { font-size: 1.28cqw; line-height: 1.36; color: var(--cf-dark-blue); }
.cf-sheet__foot { margin-top: auto; display: flex; justify-content: space-between; gap: 2cqw; font-size: 1.3cqw; line-height: 1.3; color: var(--cf-medium-blue); }
.cf-sheet__foot > span:last-child { font-weight: 600; color: var(--cf-navy); }
.cf-dl__copy { min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.cf-dl__copy > p { margin: 0; max-width: 640px; font-size: clamp(18px, calc(17.43px + 0.179vw), 20px); line-height: 1.5; color: var(--cf-canvas-warm); text-wrap: pretty; }
.cf-button--onnavy { background: var(--cf-white); color: var(--cf-navy); border-color: var(--cf-white); }
.cf-button--onnavy:hover { background: #E9EFF6; border-color: #E9EFF6; color: var(--cf-navy); }
.cf-dl__notes { border-top: 1px solid var(--cf-light-blue); padding-top: 20px; display: flex; flex-direction: column; gap: 10px; max-width: 640px; }
.cf-dl__notes p { margin: 0; font-size: 14px; line-height: 1.55; color: #E9EFF6; text-wrap: pretty; }
/* closing */
.cf-cmclose { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.cf-cmclose > p { margin: 0; max-width: 640px; font-size: clamp(18px, calc(17.43px + 0.179vw), 20px); line-height: 1.5; color: var(--cf-navy); text-wrap: pretty; }
.cf-cmclose__lr { margin-top: 20px; width: 100%; border-top: 1px solid var(--cf-border-warm); padding-top: 24px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 32px; }
.cf-cmclose__lr p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--cf-dark-blue); }

/* ======== MEDDPICC Hub V1 (31 Oct, batch 2) ======== */
.cf-hubhero { border-bottom: 1px solid var(--cf-border-warm); }
.cf-hubhero__in { padding-top: var(--cf-section-y); padding-bottom: calc(var(--cf-section-y) * 0.8); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 32px 96px; }
.cf-hubhero__in > div { flex: 1 1 640px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.cf-hubhero__in > p { flex: 0 1 440px; min-width: 0; color: var(--cf-dark-blue); }
.cf-hubeb { margin: 0; font-size: 12px; font-weight: 600; line-height: 1.3; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cf-light-blue); }
.cf-hubsec { padding: var(--cf-section-y) 0; scroll-margin-top: 80px; }
.cf-hubsec--canvas { background: var(--cf-canvas-warm); border-top: 1px solid var(--cf-border-warm); border-bottom: 1px solid var(--cf-border-warm); }
/* start with what you need: four columns on a numbered rail (1100px+), 2 × 2, then a vertical rail */
.cf-intents__rail { display: none; }
@media (min-width: 1100px) {
  .cf-intents__rail { margin-top: var(--cf-block-gap); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); position: relative; }
  .cf-intents__rail > span:first-child { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--cf-navy); }
  .cf-intents__rail > span:not(:first-child) { position: relative; display: flex; align-items: center; padding-left: 24px; }
  .cf-intents__rail > span:nth-child(2) { padding-left: 0; }
}
.cf-intents__node { width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--cf-navy); background: var(--cf-white); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; color: var(--cf-navy); }
.cf-intents__node.is-on { background: var(--cf-navy); color: var(--cf-white); }
.cf-intents { list-style: none; margin: var(--cf-block-gap) 0 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); }
.cf-intents > li { position: relative; min-width: 0; scroll-margin-top: 80px; border-left: 1px solid var(--cf-navy); }
.cf-intents__node--rail { position: absolute; left: -14px; top: 0; }
.cf-intents a { height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 0 0 48px 32px; color: var(--cf-navy); text-decoration: none; transition: color var(--cf-ease); }
.cf-intents a:hover { color: var(--cf-light-blue); }
.cf-intents h3 { margin: 0; font-family: var(--cf-font-display); font-weight: 500; font-size: clamp(22px, 1.67vw, 24px); line-height: 1.2; letter-spacing: -0.015em; color: inherit; text-wrap: balance; }
.cf-intents p { margin: 0; font-size: 16px; line-height: 1.55; color: var(--cf-dark-blue); text-wrap: pretty; }
.cf-intents__foot { margin-top: auto; padding-top: 28px; display: flex; flex-direction: column; gap: 14px; }
.cf-intents__foot > .cf-rtag { align-self: flex-start; }
.cf-intents__cta { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-top: 14px; border-top: 1px solid var(--cf-border-warm); font-size: 16px; font-weight: 500; line-height: 1.35; color: inherit; }
.cf-intents__cta > span:first-child { flex: 1 1 auto; min-width: 0; }
.cf-intents__cta > span:last-child { flex: none; color: var(--cf-light-blue); }
.cf-intents__meta { font-size: 14px; line-height: 1.45; color: var(--cf-medium-blue); }
@media (min-width: 720px) {
  .cf-intents { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cf-intents > li { border-left: 0; }
  .cf-intents > li:nth-child(even) { border-left: 1px solid var(--cf-border-warm); }
  .cf-intents__node--rail { display: none; }
  .cf-intents > li:nth-child(odd) a { padding: 28px 24px 40px 0; }
  .cf-intents > li:nth-child(even) a { padding: 28px 0 40px 24px; }
}
@media (min-width: 1100px) {
  .cf-intents { margin-top: 20px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cf-intents > li { border-left: 1px solid var(--cf-border-warm); }
  .cf-intents > li:first-child { border-left: 0; }
  .cf-intents > li a, .cf-intents > li:nth-child(n) a { padding: 28px 24px 0; }
  .cf-intents > li:first-child a { padding: 28px 24px 0 0; }
}
/* resource type tags */
.cf-rtag { display: inline-flex; align-items: center; padding: 4px 8px; border: 1px solid var(--cf-line-strong); background: var(--cf-white); color: var(--cf-dark-blue); font-size: 12px; font-weight: 600; letter-spacing: 0.04em; line-height: 1; white-space: nowrap; }
.cf-rtag--guide, .cf-rtag--model { border-color: var(--cf-navy); color: var(--cf-navy); }
.cf-rtag--scorecard, .cf-rtag--interactive-review { border-color: var(--cf-navy); background: var(--cf-navy); color: var(--cf-white); }
.cf-rtag--example { border-color: var(--cf-light-blue); color: var(--cf-medium-blue); }
/* featured resources: one row each */
.cf-lib { list-style: none; margin: var(--cf-block-gap) 0 0; padding: 0; border-top: 1px solid var(--cf-navy); }
.cf-lib > li { border-bottom: 1px solid var(--cf-border-warm); }
.cf-lib a { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; align-items: baseline; padding: 24px 0 26px; color: var(--cf-navy); text-decoration: none; transition: color var(--cf-ease); }
.cf-lib a:hover { color: var(--cf-light-blue-on-warm); }
.cf-lib a > span:first-child { display: flex; }
.cf-lib__t { font-family: var(--cf-font-display); font-weight: 500; font-size: clamp(22px, 1.67vw, 24px); line-height: 1.2; letter-spacing: -0.015em; color: inherit; text-wrap: balance; }
.cf-lib__d { font-size: 16px; line-height: 1.55; color: var(--cf-dark-blue); text-wrap: pretty; }
.cf-lib__a { display: none; justify-self: end; color: var(--cf-light-blue-on-warm); }
@media (min-width: 900px) { .cf-lib a { grid-template-columns: 180px minmax(0, 1fr) minmax(0, 1.1fr) 24px; gap: 32px; } .cf-lib__a { display: block; } }
/* image strip */
.cf-strip > div { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--cf-border-warm); border: 1px solid var(--cf-border-warm); border-top: 0; margin: 0 0 var(--cf-section-y); }
.cf-strip img { display: block; width: 100%; height: 160px; object-fit: cover; }
@media (max-width: 767px) { .cf-strip img { height: 96px; } }
/* the two closing bands */
.cf-hubband { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 48px 96px; }
.cf-hubband > div:first-child { flex: 1 1 560px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.cf-hubband > div:first-child > p { margin: 0; max-width: 560px; font-size: clamp(18px, calc(17.43px + 0.179vw), 20px); line-height: 1.5; color: var(--cf-highlight); text-wrap: pretty; }
.cf-hubband--light { gap: 32px 96px; }
.cf-hubband--light > div:first-child { gap: 24px; }
.cf-hubband--light > div:first-child > p { max-width: 600px; color: var(--cf-dark-blue); }
.cf-hubband__acts { flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.cf-hubband .cf-button { max-width: 100%; white-space: normal; }
.cf-hubband__l { font-size: 16px; color: var(--cf-white); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--cf-sky); }
.cf-hubband__l:hover { color: var(--cf-highlight); }
/* MEDDPICC batch 2: the training page's link to the hub, under the resource cards (16px, navy, light blue underline) */
.cf-res__all { margin: 32px 0 0; }
.cf-res__all a { font-size: 16px; color: var(--cf-white); text-decoration: underline; text-decoration-color: var(--cf-sky); text-underline-offset: 4px; }
.cf-res__all a span { color: var(--cf-sky); }
.cf-res__all a:hover { color: var(--cf-highlight); }

/* ======== Products batch (1 Nov): the Next Best Actions film in place of the design's poster ======== */
.cf-nb-film video { display: block; width: 100%; height: 100%; object-fit: cover; background: #122236; }
.cf-nb-film p { position: absolute; left: 16px; right: 16px; bottom: 16px; margin: 0; padding: 12px 14px; background: #fff; color: #122236; font-size: 14px; }
/* narrow phones: the designs' call-to-action labels wrap rather than run past the screen (320 to 479px), and the
   PlaymakerAI stage tabs keep "During" inside its tab down to 320px, with text spacing too (smaller label,
   tighter sides below 768 and 480px) */
@media (max-width: 479px) { .cf-po a, .cf-pm a, .cf-nb a, .cf-so a { white-space: normal; max-width: 100%; } }
@media (max-width: 767px) {
  .cf-pm [role="tab"] { padding-left: 12px; padding-right: 12px; }
  .cf-pm [role="tab"] > span:first-child > span:last-child { font-size: 18px; }
}
@media (max-width: 479px) {
  .cf-pm [role="tab"] { padding-left: 8px; padding-right: 8px; }
  .cf-pm [role="tab"] > span:first-child > span:last-child { font-size: 15px; }
}