/*=====================================================*/
/*  CAMPAIGN LANDING PAGES — the campaign layer        */
/*  Depends on assets/css/ai/common.css                */
/*                                                     */
/*  Light, editorial and human, in the register of     */
/*  about-us and careers: cream and paper, one orange, */
/*  Montserrat display type, generous air. Ink is kept */
/*  for accents and the one closing band.              */
/*                                                     */
/*  Every block here is a reusable section of the      */
/*  campaign system (custom-snippets/campaign/), named */
/*  cmp-*. Nothing is tied to one campaign's subject.  */
/*                                                     */
/*  Contents                                           */
/*    page base & theme defences                       */
/*    motion primitives                                */
/*    section shell: chapter rule, opener, display     */
/*    calls to action                                  */
/*    hero                                             */
/*    Ask Richard chat preview                         */
/*    equation · features · phase track · steps        */
/*    plans · compare · loop · chain · benefits        */
/*    question · lead form · FAQ · final · articles    */
/*    chapter rail · responsive · reduced motion       */
/*=====================================================*/

/*----------------------------*/
/* PAGE BASE                  */
/*----------------------------*/
.cmp-page {
  /* Orange dark enough for small text on paper and cream (5.4:1 / 5:1).
     The brand orange stays for fills, icons and display-size accents. */
  --cmp-orange-text: #A85200;
  --cmp-accent: linear-gradient(100deg, #DD6C00 0%, #C86200 55%, #AE5200 100%);
  --cmp-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --cmp-ease-out: cubic-bezier(0.16, 0.84, 0.28, 1);
  --cmp-pop: cubic-bezier(0.2, 0.9, 0.3, 1.25);
  --cmp-shadow: 0 22px 50px rgba(20, 20, 20, 0.08);
  --cmp-shadow-sm: 0 12px 28px rgba(20, 20, 20, 0.06);
  --cmp-sticky-top: 104px;

  /* `clip`, not the inherited `hidden`: hidden would make the page a scroll
     container and stop the sticky asides from sticking. */
  overflow: clip;
  /* .vce-main-content sets 380px, which scrolls sideways on 360px phones */
  min-width: 0;
}

/*----------------------------*/
/* THEME DEFENCES             */
/* The live theme's reset     */
/* gives every element its    */
/* own colour, Raleway and an */
/* em-based line-height, and  */
/* margins to p and headings. */
/* :where() keeps these at    */
/* element weight, so every   */
/* component class still wins.*/
/*----------------------------*/
:where(.cmp-page) :is(h1, h2, h3, h4, p, blockquote, figure, figcaption, ol, ul, dl, dd) {
  margin: 0;
}

:where(.cmp-page) ol {
  padding: 0;
  list-style: none;
}

:where(.cmp-page) blockquote {
  padding: 0;
  border: 0;
}

:where(.cmp-page) :is(span, strong, b, em, i, small, mark) {
  font-family: inherit;
  line-height: inherit;
  color: inherit;
}

:where(.cmp-page) :is(strong, b) {
  font-weight: 800;
}

/* The theme breaks any word anywhere, which lets flex and grid items squeeze
   words in half. Wrap at spaces, break only what cannot fit. */
.cmp-page,
.cmp-page * {
  word-break: normal;
  overflow-wrap: break-word;
}

/* Raleway sets old-style figures by default; prices and ranges read better
   lining */
.cmp-page {
  font-variant-numeric: lining-nums;
}

.cmp-nowrap {
  white-space: nowrap;
}

.cmp-sr {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.cmp-page :is(a, button):focus-visible {
  outline: 2px solid var(--cmp-orange-text);
  outline-offset: 3px;
}

/*-----------------------------------*/
/* MOTION PRIMITIVES                 */
/* The about-us / careers reveals,   */
/* made shared:                      */
/*  [data-cmp-lines]  heading rises  */
/*    out of its mask box            */
/*  [data-cmp-fade]   block fades up */
/*  [data-cmp-stagger] children run  */
/*    in off --ai-i                  */
/*  [data-cmp-once]   a diagram's    */
/*    one-shot .is-on                */
/* Hidden states apply only under    */
/* .cmp-js (set inline at the top of */
/* <main>), so the page reads in     */
/* full when scripts never run. The  */
/* hero plays on load in CSS alone   */
/* and never waits for a script.     */
/*-----------------------------------*/
.cmp-line {
  display: block;
  overflow: hidden;
  /* Room for descenders and swashes, without moving the line box */
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}

/* Bare spans: the theme styles them directly, so the heading's own type is
   restated rather than inherited */
.cmp-line,
.cmp-line>span {
  color: inherit !important;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit !important;
}

.cmp-line>span {
  display: block;
}

.cmp-line:nth-child(2) {
  --cmp-li: 1;
}

.cmp-line:nth-child(3) {
  --cmp-li: 2;
}

.cmp-line:nth-child(4) {
  --cmp-li: 3;
}

.cmp-js .cmp-line>span {
  translate: 0 110%;
  transition: translate 0.95s var(--cmp-ease-out);
  transition-delay: calc(var(--cmp-li, 0) * 110ms + 40ms);
}

.cmp-js [data-cmp-lines].is-in .cmp-line>span {
  translate: 0 0;
}

.cmp-js [data-cmp-fade] {
  opacity: 0;
  translate: 0 20px;
  transition: opacity 0.7s ease, translate 0.8s var(--cmp-ease);
}

.cmp-js [data-cmp-fade].is-in {
  opacity: 1;
  translate: 0 0;
}

.cmp-js [data-cmp-stagger]>* {
  opacity: 0;
}

.cmp-js [data-cmp-stagger].is-in>* {
  animation: ai-reveal-up 0.7s var(--cmp-ease) both;
  animation-delay: calc(var(--ai-i, 0) * 80ms);
}

/* The family's own reveal (common.js, [data-ai-animate] on the advisor card
   and quote band) hides its blocks until a script shows them. On a campaign
   page, with scripts off, they show as they are. */
.cmp-page:not(.cmp-js *) [data-ai-animate] {
  opacity: 1;
}

/* The hero: on load, no script */
.cmp-hero [data-cmp-fade] {
  opacity: 1;
  translate: none;
  transition: none;
  animation: cmp-rise 0.8s var(--cmp-ease) both;
  animation-delay: var(--cmp-d, 0ms);
}

.cmp-hero .cmp-line>span {
  translate: none;
  transition: none;
  animation: cmp-line-in 0.95s var(--cmp-ease-out) both;
  animation-delay: calc(var(--cmp-d, 0ms) + var(--cmp-li, 0) * 110ms);
}

/* Once an entrance has played, campaign.js marks it .is-settled and the
   animation is taken off. Anything that lays the page out again later —
   printing, saving as PDF, a full-page capture — would otherwise restart it
   from its hidden first frame. The ambient loops carry on. */
.cmp-hero.is-settled [data-cmp-fade],
.cmp-hero.is-settled .cmp-lines,
.cmp-hero.is-settled .cmp-line>span,
.cmp-hero.is-settled .cmp-hero__disc,
.cmp-hero.is-settled .cmp-hero__photo,
.cmp-hero.is-settled .cmp-hero__person,
.cmp-hero.is-settled .cmp-chat--mini {
  animation: none;
}

.cmp-hero.is-settled .cmp-hero__swash path {
  stroke-dashoffset: 0;
  animation: none;
}

.cmp-hero.is-settled .cmp-hero__icon {
  animation: cmp-drift 7s ease-in-out calc(var(--cmp-i, 0) * -1.8s) infinite;
}

.cmp-hero.is-settled .cmp-hero__plan {
  animation: cmp-bob 6.5s ease-in-out infinite;
}

.cmp-hero.is-settled .cmp-hero__chip {
  animation: cmp-bob 6s ease-in-out -2.1s infinite;
}

/* Scrolled past, the hero's loops come off altogether (the hero carries
   data-cmp-live; campaign.js initLive): not paused, as a paused animation is
   still restyled on every frame. They start again as it comes back. */
.cmp-hero.is-settled:not(.is-live) .cmp-hero__orbit,
.cmp-hero.is-settled:not(.is-live) .cmp-hero__icon,
.cmp-hero.is-settled:not(.is-live) .cmp-hero__plan,
.cmp-hero.is-settled:not(.is-live) .cmp-hero__chip,
.cmp-hero.is-settled:not(.is-live) .ai-hero__sheen::before,
.cmp-hero.is-settled:not(.is-live) .ai-hero__sheen::after,
.cmp-hero.is-settled:not(.is-live) .cmp-hero__scroll svg {
  animation: none;
}

.cmp-js [data-cmp-stagger].is-settled>* {
  opacity: 1;
  animation: none;
}

@keyframes cmp-rise {
  from {
    opacity: 0;
    translate: 0 20px;
  }

  to {
    opacity: 1;
    translate: 0 0;
  }
}

@keyframes cmp-line-in {
  from {
    translate: 0 110%;
  }

  to {
    translate: 0 0;
  }
}

@keyframes cmp-pop {
  from {
    opacity: 0;
    scale: 0.4;
  }

  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes cmp-bob {

  0%,
  100% {
    translate: 0 0;
  }

  50% {
    translate: 0 -9px;
  }
}

@keyframes cmp-drift {

  0%,
  100% {
    translate: 0 0;
    rotate: 0deg;
  }

  50% {
    translate: 4px -12px;
    rotate: 6deg;
  }
}

@keyframes cmp-spin {
  to {
    rotate: 360deg;
  }
}

@keyframes cmp-draw {
  to {
    stroke-dashoffset: 0;
  }
}

/*-----------------------------------*/
/* SECTION SHELL                     */
/*-----------------------------------*/
.cmp-section {
  padding: clamp(80px, 8.5vw, 128px) 0;
}

/* The numbered rule opening a section: the page reads as a guide, chapter
   by chapter. A number, never a label — the briefing's headings carry the
   words, at full size. */
.cmp-chapter {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: clamp(26px, 3vw, 36px);
}

.cmp-chapter::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ai-line);
}

.cmp-chapter--center::before {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ai-line);
}

.cmp-chapter__num {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ai-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.4 !important;
  color: var(--ai-muted);
}

.cmp-chapter__num::before {
  content: "";
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  background: var(--ai-primary);
}

/* ---- opener: the display heading and the copy it sets up ---- */
.cmp-intro {
  display: grid;
  gap: 26px 64px;
  margin-bottom: clamp(48px, 5.5vw, 72px);
}

/* Top aligned: several openers carry four or five paragraphs, and a heading
   sunk to their foot leaves a void above it */
.cmp-intro--split {
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  align-items: start;
}

.cmp-intro--split .cmp-intro__copy {
  padding-top: 6px;
}

.cmp-intro--center {
  justify-items: center;
  text-align: center;
}

.cmp-intro--center .cmp-display {
  max-width: 24ch;
}

.cmp-intro--center .cmp-intro__copy {
  align-items: center;
  max-width: 70ch;
}

.cmp-intro--center .cmp-intro__copy p {
  text-wrap: balance;
}

.cmp-intro--stack {
  grid-template-columns: minmax(0, 1fr);
}

/* The pink lines of the briefing. Large on purpose — never a section label. */
.cmp-display {
  font-family: var(--ai-heading);
  font-size: clamp(34px, 4.5vw, 60px);
  font-weight: 800;
  letter-spacing: -0.038em;
  line-height: 1.04 !important;
  color: var(--ai-ink);
  text-wrap: balance;
}

/* Deep enough orange to hold 3:1 on paper and cream at display size */
.cmp-display em,
.cmp-track__title em,
.cmp-question__quote em {
  font-style: normal;
  color: var(--ai-primary-deep);
  background: var(--cmp-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cmp-intro__copy,
.cmp-prose {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cmp-intro__copy p,
.cmp-prose p {
  font-family: var(--ai-body);
  font-size: 17px;
  line-height: 1.75 !important;
  color: var(--ai-muted);
}

.cmp-intro__copy strong,
.cmp-prose strong {
  color: var(--ai-ink);
}

/* A paragraph that is one bold line: set as a statement */
.cmp-page p.is-statement {
  font-family: var(--ai-heading);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.5 !important;
  color: var(--ai-ink);
}

.cmp-page p.is-statement strong {
  font-weight: 700;
}

/* A paragraph that starts "> ": the pull-quote */
.cmp-pull {
  position: relative;
  margin: 4px 0 0;
  padding: 4px 0 4px 24px;
  border-left: 3px solid var(--ai-primary);
}

.cmp-pull p {
  font-family: var(--ai-heading) !important;
  font-size: clamp(20px, 2vw, 26px) !important;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.3 !important;
  color: var(--ai-ink) !important;
  text-wrap: balance;
}

.cmp-intro__list {
  margin-top: 6px !important;
}

.cmp-intro__list li {
  font-size: 16px;
}

/* ---- the slot closing a section ---- */
.cmp-slot {
  margin-top: clamp(52px, 6.5vw, 84px);
}

.cmp-slot--quote .ai-quoteband,
.cmp-slot--advisor .ai-advisor {
  max-width: 980px;
}

/*-----------------------------------*/
/* CALLS TO ACTION                   */
/* The family buttons. A prompt link */
/* — one that opens Ask Richard with */
/* a question already written —      */
/* carries Richard on the button, so */
/* it reads as asking, not as a form.*/
/*-----------------------------------*/
.cmp-ctas {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 14px 16px;
}

.cmp-ctas--center {
  justify-content: center;
}

.ai-btn.cmp-cta {
  justify-content: flex-start;
  gap: 12px;
}

.cmp-cta__label {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: 1.2 !important;
  color: inherit !important;
  text-align: left;
}

.ai-btn.cmp-cta--prompt {
  padding-left: 9px;
}

.cmp-cta__avatar {
  position: relative;
  display: inline-flex;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #FFF;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}

.cmp-cta__face {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

/* Richard's status dot, as on the floating button */
.cmp-cta__avatar::after {
  content: "";
  position: absolute;
  right: -2px;
  bottom: -1px;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #2ECC71;
  border: 2px solid var(--ai-primary);
}

/* ---- a white button for a second CTA on a light surface ---- */
.ai-btn.cmp-cta--ghost {
  background: #FFF;
  border-color: var(--ai-line);
  color: var(--ai-ink) !important;
  box-shadow: 0 4px 0 0 #DCD4C6, 0 16px 30px -14px rgba(20, 20, 20, 0.22);
}

.ai-btn.cmp-cta--ghost:hover,
.ai-btn.cmp-cta--ghost:focus {
  color: var(--ai-ink) !important;
  border-color: rgba(var(--ai-primary-rgb), 0.55);
  box-shadow: 0 2px 0 0 rgba(var(--ai-primary-rgb), 0.55), 0 12px 24px -14px rgba(20, 20, 20, 0.22);
}

.ai-btn.cmp-cta--ghost i,
.ai-btn.cmp-cta--ghost svg {
  color: var(--ai-primary-deep);
}

.cmp-cta--ghost .cmp-cta__avatar {
  box-shadow: 0 0 0 2px var(--ai-cream);
}

.cmp-cta--ghost .cmp-cta__avatar::after,
.ai-btn--inverse .cmp-cta__avatar::after {
  border-color: #FFF;
}

/* ---- the question, previewed under the button ---- */
.cmp-cta-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 100%;
}

.cmp-ctas--center .cmp-cta-wrap {
  align-items: center;
}

/* ---- block: the button fills its container (plan cards by default) ---- */
.ai-btn.cmp-cta--block {
  display: flex;
  width: 100%;
}

/* Label takes the free space, so the arrow sits at the far end, as on the
   family's full-width quote-band button */
.cmp-cta--block .cmp-cta__label {
  flex: 1;
}

.cmp-cta-wrap--block {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.cmp-cta__q {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  max-width: 48ch;
  font-family: var(--ai-body);
  font-size: 13.5px;
  font-style: italic;
  line-height: 1.5 !important;
  color: var(--ai-muted);
}

.cmp-cta__q>span {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.cmp-cta__q svg {
  width: 15px;
  height: 15px;
  margin-top: 2px;
  flex-shrink: 0;
  color: var(--ai-primary);
  stroke-width: 2.2;
}

.cmp-ctas--center .cmp-cta__q {
  text-align: left;
}

/*-----------------------------------*/
/* HERO                              */
/* .ai-hero--light, the family's     */
/* people-first surface. Copy on the */
/* left; the stage on the right: the */
/* orange disc and its orbit, a      */
/* photograph of the work, the plan  */
/* card advancing phase by phase and */
/* Ask Richard typing the hero's     */
/* prompt.                           */
/*-----------------------------------*/
.cmp-hero {
  display: flex;
  flex-direction: column;
  min-height: min(100vh, 1080px);
  min-height: min(100svh, 1080px);
  --ai-grid-x: 76%;
  --ai-grid-y: 48%;
}

.cmp-hero .ai-grid-beams,
.cmp-hero::before {
  z-index: 1;
}

.cmp-hero>.ai-wrap {
  position: relative;
  z-index: 2;
  flex: 1;
  /* Wide enough for both prompt buttons on one row */
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  align-items: center;
  gap: clamp(28px, 3.4vw, 48px);
  /* The top is the fixed nav (80px) plus air */
  padding: clamp(112px, 13.5vh, 140px) 0 clamp(72px, 9vh, 100px);
}

/* ---- copy ---- */
.cmp-hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

/* The page's H1, set as the badge that opens the hero */
.cmp-hero__h1 {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 28px;
  padding: 6px 18px 6px 6px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(20, 20, 20, 0.07);
  border-radius: 999px;
  box-shadow: 0 14px 30px -16px rgba(20, 20, 20, 0.35);
  font-family: var(--ai-heading);
  font-size: clamp(14px, 1.15vw, 16px);
  font-weight: 800;
  letter-spacing: -0.005em;
  line-height: 1.2 !important;
  color: var(--ai-ink);
  --cmp-d: 0ms;
}

.cmp-hero__h1-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ai-primary);
  box-shadow: 0 6px 14px -4px rgba(var(--ai-primary-rgb), 0.6);
}

.cmp-hero__h1-icon svg {
  width: 19px;
  height: 19px;
  color: #FFF;
  stroke-width: 2.4;
}

.cmp-hero__h1-text {
  color: var(--ai-ink);
}

.cmp-hero__h1 em {
  font-style: normal;
  color: var(--cmp-orange-text);
}

.cmp-hero__display {
  font-family: var(--ai-heading);
  font-size: clamp(25px, 2.45vw, 36px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12 !important;
  color: var(--ai-ink-soft);
  --cmp-d: 80ms;
}

/* The commercial promise: the briefing's pink line, the largest type here */
.cmp-hero__promise {
  margin-top: 8px;
  font-family: var(--ai-heading);
  font-size: clamp(40px, 4.5vw, 64px);
  font-weight: 900;
  letter-spacing: -0.048em;
  line-height: 1 !important;
  color: var(--ai-ink);
  --cmp-d: 220ms;
}

.cmp-hero__promise em {
  position: relative;
  display: inline-block;
  font-style: normal;
  color: var(--ai-primary-deep);
  background: var(--cmp-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* The last line's mask grows downward so the swash under it is not clipped */
.cmp-hero__promise .cmp-line:last-child {
  padding-bottom: 0.3em;
  margin-bottom: -0.3em;
}

.cmp-hero__swash {
  position: absolute;
  left: -1%;
  bottom: -0.2em;
  width: 102%;
  height: 0.3em;
  overflow: visible;
  pointer-events: none;
}

.cmp-hero__swash path {
  fill: none;
  stroke: var(--ai-primary);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: cmp-draw 0.9s cubic-bezier(0.65, 0, 0.35, 1) 1.1s forwards;
}

.cmp-hero__lede {
  max-width: 46ch;
  margin-top: 26px;
  font-family: var(--ai-heading);
  font-size: clamp(17.5px, 1.45vw, 20px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.45 !important;
  color: var(--ai-ink);
  --cmp-d: 420ms;
}

.cmp-hero__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-width: 56ch;
  margin-top: 12px;
  --cmp-d: 500ms;
}

.cmp-hero__body p {
  font-family: var(--ai-body);
  font-size: 16px;
  line-height: 1.7 !important;
  color: var(--ai-muted);
}

.cmp-hero__body p.is-statement {
  font-size: 16px;
  line-height: 1.6 !important;
}

.cmp-hero__statement {
  max-width: 48ch;
  margin-top: 18px;
  padding-left: 18px;
  border-left: 3px solid var(--ai-primary);
  font-family: var(--ai-heading);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.55 !important;
  color: var(--ai-ink-soft);
  --cmp-d: 580ms;
}

.cmp-hero__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin-top: 30px;
  --cmp-d: 660ms;
}

/* Both prompts on one row: a little tighter than the family default */
.cmp-hero__ctas {
  gap: 12px;
}

.cmp-hero__ctas .ai-btn {
  gap: 10px;
  padding: 14px 20px 14px 8px;
  font-size: 14.5px;
}

.cmp-hero__ctas .cmp-cta__avatar {
  width: 32px;
  height: 32px;
}

.cmp-hero__note {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.45 !important;
}

.cmp-hero__note-face {
  display: inline-flex;
  flex-shrink: 0;
}

.cmp-hero__note-img {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px solid #FFF;
  background: var(--ai-cream);
  box-shadow: 0 4px 12px rgba(20, 20, 20, 0.16);
}

.cmp-hero__note em {
  font-family: var(--ai-body);
  font-style: italic;
  font-weight: 500;
  color: var(--ai-ink-soft);
}

/* ---- stage ---- */
/* Every layer is placed as a share of the stage, so the composition scales
   as one piece. */
.cmp-hero__stage {
  position: relative;
  justify-self: end;
  width: min(108%, 520px);
  margin-right: -3%;
  aspect-ratio: 100 / 112;
}

.cmp-hero__disc {
  position: absolute;
  left: 4%;
  top: 7%;
  width: 92%;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.34), transparent 44%),
    linear-gradient(155deg, #FFA43A 0%, var(--ai-primary) 48%, #EE6C00 100%);
  box-shadow:
    0 50px 90px -40px rgba(var(--ai-primary-rgb), 0.7),
    inset 0 -24px 50px rgba(176, 72, 0, 0.22);
  translate: var(--cmp-nx, 0) var(--cmp-ny, 0);
  transition: translate 0.9s var(--cmp-ease);
  animation: cmp-disc-in 1.2s cubic-bezier(0.2, 0.9, 0.3, 1.12) 0.1s both;
}

.cmp-hero__disc::before {
  content: "";
  position: absolute;
  inset: 9%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Spin on the wrapper, not the <svg>: Chrome cannot rotate an SVG element on
   the compositor (same note as about-us) */
.cmp-hero__orbit {
  position: absolute;
  top: -10%;
  left: -10%;
  width: 120%;
  height: 120%;
  animation: cmp-spin 48s linear infinite;
}

.cmp-hero__orbit svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.cmp-hero__orbit circle {
  stroke: rgba(var(--ai-primary-rgb), 0.55);
  stroke-width: 0.7;
  stroke-linecap: round;
  stroke-dasharray: 0.01 3.4;
}

.cmp-hero__orbit .cmp-hero__satellite {
  fill: var(--ai-primary);
  stroke: #FFF;
  stroke-width: 1.2;
  stroke-dasharray: none;
}

.cmp-hero__photo {
  position: absolute;
  left: 22%;
  top: 9%;
  z-index: 1;
  width: 56%;
  aspect-ratio: 760 / 1018;
  overflow: hidden;
  border: 7px solid #FFF;
  border-radius: 30px;
  background: var(--ai-cream);
  box-shadow:
    0 44px 80px -34px rgba(20, 20, 20, 0.5),
    0 10px 26px rgba(20, 20, 20, 0.12);
  translate: var(--cmp-px, 0) 0;
  transition: translate 0.6s var(--cmp-ease);
  animation: cmp-photo-in 1.1s var(--cmp-ease) 0.3s both;
}

.cmp-hero__photo img {
  display: block;
  width: 100%;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover;
}

.cmp-hero__icon {
  position: absolute;
  z-index: 0;
  width: 42px;
  height: 42px;
  color: var(--ai-primary);
  animation:
    cmp-pop 0.7s var(--cmp-pop) calc(0.9s + var(--cmp-i, 0) * 0.12s) both,
    cmp-drift 7s ease-in-out calc(var(--cmp-i, 0) * -1.8s) infinite;
}

.cmp-hero__icon svg {
  display: block;
  width: 100%;
  height: 100%;
  stroke-width: 1.4;
}

.cmp-hero__icon--1 {
  --cmp-i: 0;
  left: 3%;
  top: 3%;
}

.cmp-hero__icon--2 {
  --cmp-i: 1;
  right: -2%;
  top: 56%;
  width: 40px;
  height: 40px;
}

.cmp-hero__icon--3 {
  --cmp-i: 2;
  left: 10%;
  top: 30%;
  width: 34px;
  height: 34px;
}

/* ---- the plan card ---- */
.cmp-hero__plan {
  position: absolute;
  right: -4%;
  top: 16%;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 11px;
  width: 52%;
  min-width: 232px;
  padding: 14px 16px 15px;
  background: rgba(255, 255, 255, 0.97);
  border-radius: 18px;
  box-shadow:
    0 26px 50px -20px rgba(20, 20, 20, 0.38),
    0 2px 6px rgba(20, 20, 20, 0.06);
  animation:
    cmp-pop 0.7s var(--cmp-pop) 1s both,
    cmp-bob 6.5s ease-in-out 1.8s infinite;
}

.cmp-hero__plan-top {
  display: flex;
  align-items: center;
  padding-right: 4px;
}

.cmp-hero__plan-kicker {
  font-family: var(--ai-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.3 !important;
  color: var(--ai-muted);
  white-space: nowrap;
}

/* Hung on the card's top edge, like a tab */
.cmp-hero__plan-range {
  position: absolute;
  top: -11px;
  right: 14px;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--ai-ink);
  font-family: var(--ai-heading);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.2 !important;
  color: #FFF;
  white-space: nowrap;
}

/* All phases share one cell and crossfade, so the card never resizes */
.cmp-hero__plan-now {
  display: grid;
}

.cmp-hero__plan-phase {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  gap: 9px;
  opacity: 0;
  translate: 0 8px;
  transition: opacity 0.4s ease, translate 0.5s var(--cmp-ease);
}

.cmp-hero__plan-phase.is-current {
  opacity: 1;
  translate: 0 0;
}

.cmp-hero__plan-phase svg {
  width: 30px;
  height: 30px;
  padding: 6px;
  flex-shrink: 0;
  border-radius: 9px;
  background: rgba(var(--ai-primary-rgb), 0.13);
  color: var(--cmp-orange-text);
  stroke-width: 2.2;
}

.cmp-hero__plan-phase b {
  font-family: var(--ai-heading);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.15 !important;
  color: var(--ai-ink);
  white-space: nowrap;
}

.cmp-hero__plan-bar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 4px;
}

.cmp-hero__plan-bar i {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: var(--ai-line);
  transition: background 0.4s ease;
}

.cmp-hero__plan-bar i.is-done {
  background: var(--ai-primary);
}

/* ---- chip ---- */
.cmp-hero__chip {
  position: absolute;
  left: -5%;
  top: 47%;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 18px 8px 8px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 999px;
  box-shadow:
    0 22px 44px -18px rgba(20, 20, 20, 0.34),
    0 2px 6px rgba(20, 20, 20, 0.05);
  white-space: nowrap;
  animation:
    cmp-pop 0.7s var(--cmp-pop) 1.25s both,
    cmp-bob 6s ease-in-out -2.1s infinite;
}

.cmp-hero__chip svg {
  width: 34px;
  height: 34px;
  padding: 8px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ai-primary);
  color: #FFF;
  stroke-width: 2.2;
}

.cmp-hero__chip b {
  font-family: var(--ai-heading);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1 !important;
  color: var(--ai-ink);
}

/* ---- Ask Richard, typing the hero's prompt ---- */
.cmp-hero .cmp-chat--mini {
  position: absolute;
  left: -8%;
  bottom: 1%;
  z-index: 4;
  width: 80%;
  animation: cmp-pop 0.7s cubic-bezier(0.2, 0.9, 0.3, 1.18) 0.75s both;
}

@keyframes cmp-disc-in {
  from {
    opacity: 0;
    scale: 0.55;
  }

  to {
    opacity: 1;
    scale: 1;
  }
}

@keyframes cmp-photo-in {
  from {
    opacity: 0;
    transform: translateY(8%) rotate(2deg);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- a person instead of the photograph (stage.person) ---- */
/* A cut-out, centred on the disc and a little larger than the framed photo:
   the head rises out of the disc and the figure runs on below the stage, cut
   by the foot of the hero (overflow: hidden), as on about-us. The fade at the
   bottom only shows if a hero is ever taller than the figure. */
.cmp-hero__person {
  position: absolute;
  left: 15%;
  top: -1%;
  z-index: 1;
  width: 70%;
  max-width: none !important;
  height: auto !important;
  -webkit-mask-image: linear-gradient(to bottom, #000 86%, transparent 99%);
  mask-image: linear-gradient(to bottom, #000 86%, transparent 99%);
  translate: var(--cmp-px, 0) 0;
  transition: translate 0.6s var(--cmp-ease);
  animation: cmp-person-in 1.1s var(--cmp-ease) 0.3s both;
}

@keyframes cmp-person-in {
  from {
    opacity: 0;
    transform: translateY(6%);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

/* ---- Richard high on the right, the plan low on the left (chat_at: top) ---- */
/* Richard's card sits beside the head, clear of the face, so it is narrower
   than at the foot of the stage; its question is held to three lines. */
.cmp-hero__stage--chat-top .cmp-chat--mini {
  left: auto;
  right: -7%;
  top: 15%;
  bottom: auto;
  width: 50%;
  min-width: 250px;
}

.cmp-hero__stage--chat-top .cmp-chat--mini .cmp-chat__sizer,
.cmp-hero__stage--chat-top .cmp-chat--mini .cmp-chat__typed {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

.cmp-hero__stage--chat-top .cmp-hero__plan {
  left: -7%;
  right: auto;
  top: auto;
  bottom: 9%;
}

/* The chip moves up out of the plan card's way, and out a little so it covers
   hair, not the neck; the rocket drops below Richard's card */
.cmp-hero__stage--chat-top .cmp-hero__chip {
  left: -9%;
  top: 44%;
}

.cmp-hero__stage--chat-top .cmp-hero__icon--2 {
  top: 66%;
}

/* Up to 1365px the stage runs close to the window: Richard's card comes in */
@media (min-width: 1024px) and (max-width: 1365px) {
  .cmp-hero__stage--chat-top .cmp-chat--mini {
    right: -2%;
  }
}

/* 1024-1279px: the stage is too narrow to keep Richard beside the face, so
   the card drops below the chin, the plan card sits on the foot of the stage,
   and the chip (no room left for it) goes */
@media (min-width: 1024px) and (max-width: 1279px) {
  .cmp-hero__stage--chat-top .cmp-chat--mini {
    top: 37%;
    width: 64%;
    min-width: 0;
  }

  .cmp-hero__stage--chat-top .cmp-hero__plan {
    left: -4%;
    bottom: 0;
  }

  .cmp-hero__stage--chat-top .cmp-hero__chip {
    display: none;
  }
}

/* The scroll cue, clickable, under the copy column */
.cmp-hero__scroll {
  left: max(24px, calc(50% - 590px));
  bottom: 26px;
  transform: none;
  flex-direction: row;
  gap: 10px;
  pointer-events: auto;
  color: rgba(20, 20, 20, 0.5) !important;
  text-decoration: none !important;
  transition: color 0.25s ease;
}

.cmp-hero__scroll:hover,
.cmp-hero__scroll:hover span {
  color: var(--ai-ink) !important;
}

/* Short laptop screens (1280x720, 1366x768): the same copy in the same
   order, set smaller, so the two prompts still land in the first screen */
@media (min-width: 1024px) and (max-height: 820px) {
  .cmp-hero>.ai-wrap {
    padding-top: 102px;
    padding-bottom: 60px;
  }

  .cmp-hero__h1 {
    margin-bottom: 16px;
    padding-top: 4px;
    padding-bottom: 4px;
  }

  .cmp-hero__h1-icon {
    width: 30px;
    height: 30px;
  }

  .cmp-hero__display {
    font-size: clamp(23px, 2.1vw, 30px);
  }

  .cmp-hero__promise {
    margin-top: 4px;
    font-size: clamp(38px, 3.9vw, 54px);
  }

  .cmp-hero__lede {
    margin-top: 18px;
    font-size: 16.5px;
  }

  .cmp-hero__body {
    margin-top: 8px;
  }

  .cmp-hero__body p,
  .cmp-hero__body p.is-statement {
    font-size: 15px;
    line-height: 1.6 !important;
  }

  .cmp-hero__statement {
    margin-top: 12px;
    font-size: 15px;
  }

  .cmp-hero__actions {
    gap: 12px;
    margin-top: 20px;
  }

  .cmp-hero__stage {
    width: min(100%, 450px);
  }
}

/*-----------------------------------*/
/* ASK RICHARD — CHAT PREVIEW        */
/* A clickable preview of the Versa  */
/* AI Advisor; the question in the   */
/* composer types itself in once.    */
/*-----------------------------------*/
/* Layout lives on the bare class only. Repeated on :hover/:focus it would
   tie with a placement such as .cmp-hero .cmp-chat--mini and, coming later,
   win: under the pointer the card jumped out of place, the pointer fell off
   it, it jumped back — a flicker, every frame. The states only guard the
   theme's link colour and underline. */
.cmp-chat {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cmp-chat,
.cmp-chat:hover,
.cmp-chat:focus,
.cmp-chat:visited {
  color: var(--ai-ink) !important;
  text-decoration: none !important;
}

.cmp-chat__window {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-radius: 20px;
  box-shadow:
    0 26px 50px -26px rgba(20, 20, 20, 0.34),
    0 2px 6px rgba(20, 20, 20, 0.05);
  transition: transform 0.35s var(--cmp-ease), box-shadow 0.35s ease, border-color 0.35s ease;
}

.cmp-chat:hover .cmp-chat__window,
.cmp-chat:focus-visible .cmp-chat__window {
  transform: translateY(-4px);
  border-color: rgba(var(--ai-primary-rgb), 0.55);
  box-shadow:
    0 4px 0 0 var(--ai-primary),
    0 30px 60px -26px rgba(20, 20, 20, 0.38);
}

.cmp-chat__head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.cmp-chat__avatar {
  position: relative;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
}

.cmp-chat__face {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 2px solid #FFF;
  background: var(--ai-cream);
  box-shadow: 0 4px 14px rgba(20, 20, 20, 0.18);
}

.cmp-chat__dot {
  position: absolute;
  right: 0;
  bottom: 1px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #2ECC71;
  border: 2px solid #FFF;
}

.cmp-chat__who {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.cmp-chat__who b {
  font-family: var(--ai-heading);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.15 !important;
  color: var(--ai-ink);
}

.cmp-chat__who small {
  font-family: var(--ai-body);
  font-size: 12.5px;
  line-height: 1.2 !important;
  color: var(--ai-muted);
}

.cmp-chat__composer {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 12px 12px 12px 15px;
  background: var(--ai-cream);
  border: 1px solid var(--ai-line);
  border-radius: 14px;
}

.cmp-chat__field {
  display: grid;
  flex: 1;
  min-width: 0;
}

.cmp-chat__sizer,
.cmp-chat__typed {
  grid-area: 1 / 1;
  font-family: var(--ai-body);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.5 !important;
  color: var(--ai-ink-soft);
}

.cmp-chat__sizer {
  visibility: hidden;
}

/* The caret while the question is being written */
.cmp-chat.is-typing .cmp-chat__typed::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1.05em;
  margin-left: 2px;
  vertical-align: -0.16em;
  background: var(--ai-primary);
  animation: ai-caret-blink 0.9s steps(1) infinite;
}

.cmp-chat__send {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  border-radius: 11px;
  background: var(--ai-primary);
  box-shadow: 0 3px 0 0 var(--ai-primary-deep);
  transition: transform 0.25s var(--cmp-ease);
}

.cmp-chat__send svg {
  width: 18px;
  height: 18px;
  color: #FFF;
  stroke-width: 2.6;
}

.cmp-chat:hover .cmp-chat__send {
  transform: translateY(-2px);
}

/* Once the question is written, the send button calls for the click: a halo
   grows from it and fades, twice (scale and opacity run on the compositor;
   a growing box-shadow repainted on every frame) */
.cmp-chat__send::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: rgba(var(--ai-primary-rgb), 0.45);
  opacity: 0;
  pointer-events: none;
}

.cmp-chat.is-typed .cmp-chat__send::after {
  animation: cmp-ping 1.8s ease-out 0.2s 2;
}

@keyframes cmp-ping {
  from {
    opacity: 1;
    scale: 1;
  }

  to {
    opacity: 0;
    scale: 1.8;
  }
}

.cmp-chat__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--ai-heading);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.25 !important;
  color: var(--ai-ink);
}

.cmp-chat__cta>span {
  color: inherit;
}

.cmp-chat__cta svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--ai-primary);
  stroke-width: 2.4;
  transition: transform 0.25s ease;
}

.cmp-chat:hover .cmp-chat__cta svg {
  transform: translateX(4px);
}

/* ---- mini: the hero ---- */
.cmp-chat--mini .cmp-chat__window {
  gap: 10px;
  padding: 13px;
  border-radius: 18px;
}

.cmp-chat--mini .cmp-chat__avatar {
  width: 38px;
  height: 38px;
}

.cmp-chat--mini .cmp-chat__composer {
  padding: 10px 10px 10px 12px;
  border-radius: 12px;
}

.cmp-chat--mini .cmp-chat__sizer,
.cmp-chat--mini .cmp-chat__typed {
  font-size: 12.5px;
}

.cmp-chat--mini .cmp-chat__send {
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

/* ---- wide: a band closing a section ---- */
/* On the bare class, like .cmp-chat: a state that repeated the margin would
   outrank any placement given to the band */
.cmp-chat--wide {
  flex-direction: row;
  align-items: stretch;
  gap: 0;
  max-width: 1000px;
  margin: 0 auto;
  overflow: hidden;
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-radius: 24px;
  box-shadow: 0 4px 0 0 rgba(var(--ai-primary-rgb), 0.35), var(--cmp-shadow);
  transition: transform 0.35s var(--cmp-ease), box-shadow 0.35s ease, border-color 0.35s ease;
}

.cmp-chat--wide:hover,
.cmp-chat--wide:focus-visible {
  transform: translateY(-4px);
  border-color: rgba(var(--ai-primary-rgb), 0.55);
  box-shadow: 0 4px 0 0 var(--ai-primary), 0 30px 60px rgba(20, 20, 20, 0.1);
}

.cmp-chat--wide .cmp-chat__window,
.cmp-chat--wide:hover .cmp-chat__window,
.cmp-chat--wide:focus-visible .cmp-chat__window {
  flex: 1;
  min-width: 0;
  gap: 14px;
  padding: 26px 28px;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  transform: none;
}

.cmp-chat--wide .cmp-chat__composer {
  padding: 14px 14px 14px 18px;
}

.cmp-chat--wide .cmp-chat__cta {
  position: relative;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 16px;
  width: 300px;
  flex-shrink: 0;
  padding: 28px 30px;
  overflow: hidden;
  background: var(--ai-ink);
  font-size: 20px;
  letter-spacing: -0.02em;
  color: #FFF;
}

/* Faint grid on the ink side, the advisor card's texture */
.cmp-chat--wide .cmp-chat__cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 28px 28px;
  pointer-events: none;
}

.cmp-chat--wide .cmp-chat__cta svg {
  width: 26px;
  height: 26px;
  padding: 0;
}

/* ---- panel: the advisor page itself ---- */
.cmp-chat--panel {
  gap: 18px;
}

.cmp-chat__lead {
  font-family: var(--ai-heading);
  font-size: clamp(17px, 1.6vw, 19px);
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.5 !important;
  color: var(--ai-ink);
}

.cmp-chat--panel .cmp-chat__window {
  flex: 1;
  gap: 18px;
  padding: clamp(22px, 2.6vw, 30px);
  border-radius: 24px;
  text-align: center;
}

.cmp-chat--panel .cmp-chat__head {
  flex-direction: column;
  gap: 14px;
}

.cmp-chat--panel .cmp-chat__avatar {
  width: 68px;
  height: 68px;
}

.cmp-chat--panel .cmp-chat__dot {
  width: 15px;
  height: 15px;
  right: 2px;
  bottom: 3px;
}

.cmp-chat__intro {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cmp-chat__title {
  display: block;
  font-family: var(--ai-heading);
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.2 !important;
  color: var(--ai-ink);
}

.cmp-chat__sub {
  display: block;
  font-family: var(--ai-body);
  font-size: 14.5px;
  line-height: 1.6 !important;
  color: var(--ai-muted);
}

.cmp-chat--panel .cmp-chat__composer {
  min-height: 128px;
  text-align: left;
  background: #FFF;
  box-shadow: 0 18px 40px rgba(39, 34, 33, 0.08);
}

.cmp-chat__chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 7px;
}

.cmp-chat__chips span {
  padding: 7px 12px;
  border: 1px solid var(--ai-line);
  border-radius: 999px;
  background: #FFF;
  font-family: var(--ai-body);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2 !important;
  color: var(--ai-ink-soft);
}

.cmp-chat--panel .cmp-chat__cta {
  justify-content: center;
  min-height: 54px;
  padding: 16px 24px;
  border-radius: 12px;
  background: var(--ai-primary);
  box-shadow: 0 4px 0 0 var(--ai-primary-deep);
  color: #FFF;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cmp-chat--panel .cmp-chat__cta svg {
  color: #FFF;
}

.cmp-chat--panel:hover .cmp-chat__cta {
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 var(--ai-primary-deep);
}

/*-----------------------------------*/
/* EQUATION                          */
/*-----------------------------------*/
.cmp-eq-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  align-items: center;
  gap: clamp(36px, 5.5vw, 80px);
}

.cmp-eq {
  position: relative;
}

.cmp-eq__terms {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 14px;
}

.cmp-eq__term {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: 26px 24px 28px;
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-radius: 22px;
  box-shadow: var(--cmp-shadow-sm);
}

.cmp-eq__badge {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  border-radius: 15px;
  background: var(--ai-cream);
  border: 1px solid var(--ai-line);
}

.cmp-eq__badge svg {
  width: 24px;
  height: 24px;
  color: var(--ai-primary-deep);
  stroke-width: 2;
}

.cmp-eq__term--a .cmp-eq__badge {
  background: var(--ai-ink);
  border-color: var(--ai-ink);
}

.cmp-eq__term--a .cmp-eq__badge svg {
  color: var(--ai-primary);
}

.cmp-eq__label {
  font-family: var(--ai-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.3 !important;
  color: var(--cmp-orange-text);
}

.cmp-eq__text {
  font-family: var(--ai-heading);
  font-size: clamp(18px, 1.75vw, 22px);
  font-weight: 800;
  letter-spacing: -0.022em;
  line-height: 1.28 !important;
  color: var(--ai-ink);
}

.cmp-eq__text strong {
  font-weight: 800;
}

.cmp-eq__op {
  display: grid;
  place-items: center;
  align-self: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ai-primary);
  border: 4px solid #FFF;
  box-shadow: 0 10px 24px rgba(var(--ai-primary-rgb), 0.4);
}

.cmp-eq__op svg {
  width: 20px;
  height: 20px;
  color: #FFF;
  stroke-width: 3;
}

/* Two wires from the middle of each term meet at the equals sign */
.cmp-eq__join {
  position: relative;
  display: block;
  height: 78px;
}

.cmp-eq__wire {
  position: absolute;
  top: 0;
  width: calc((100% - 74px) / 4 + 37px);
  height: 34px;
  border: 2px solid rgba(var(--ai-primary-rgb), 0.5);
  border-top: 0;
}

.cmp-eq__wire--a {
  left: calc((100% - 74px) / 4);
  border-right: 0;
  border-bottom-left-radius: 18px;
}

.cmp-eq__wire--b {
  right: calc((100% - 74px) / 4);
  border-left: 0;
  border-bottom-right-radius: 18px;
}

.cmp-eq__op--equals {
  position: absolute;
  left: 50%;
  top: 34px;
  translate: -50% -50%;
  background: var(--ai-ink);
  box-shadow: 0 10px 24px rgba(20, 20, 20, 0.25);
}

.cmp-eq__op--equals svg {
  color: var(--ai-primary);
}

.cmp-eq__result {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 26px;
  background: var(--ai-ink);
  border-radius: 20px;
  box-shadow: 0 4px 0 0 var(--ai-primary), 0 24px 50px rgba(20, 20, 20, 0.18);
}

.cmp-eq__result-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  border-radius: 14px;
  background: rgba(var(--ai-primary-rgb), 0.16);
  border: 1px solid rgba(var(--ai-primary-rgb), 0.45);
}

.cmp-eq__result-icon svg {
  width: 23px;
  height: 23px;
  color: var(--ai-primary);
  stroke-width: 2;
}

.cmp-eq__result p {
  font-family: var(--ai-heading);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3 !important;
  color: #FFF;
}

/* ---- assembly, once ---- */
.cmp-js .cmp-eq__term {
  opacity: 0;
  transition: opacity 0.7s ease, translate 0.9s var(--cmp-ease);
}

.cmp-js .cmp-eq__term--a {
  translate: -36px 0;
}

.cmp-js .cmp-eq__term--b {
  translate: 36px 0;
}

.cmp-js .cmp-eq__op {
  opacity: 0;
  scale: 0.4;
  transition: opacity 0.3s ease 0.55s, scale 0.6s cubic-bezier(0.2, 0.9, 0.3, 1.4) 0.55s;
}

.cmp-js .cmp-eq__wire {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.6s var(--cmp-ease) 0.75s;
}

.cmp-js .cmp-eq__op--equals {
  transition-delay: 1.05s, 1.05s;
}

.cmp-js .cmp-eq__result {
  opacity: 0;
  translate: 0 18px;
  transition: opacity 0.6s ease 1.25s, translate 0.7s var(--cmp-ease) 1.25s;
}

.cmp-eq.is-on .cmp-eq__term,
.cmp-eq.is-on .cmp-eq__result {
  opacity: 1;
  translate: 0 0;
}

.cmp-eq.is-on .cmp-eq__op {
  opacity: 1;
  scale: 1;
}

.cmp-eq.is-on .cmp-eq__wire {
  clip-path: inset(0 0 0 0);
}

/*-----------------------------------*/
/* FEATURES                          */
/* Cards light under the pointer and */
/* draw an orange edge on hover — the*/
/* careers value cards' language.    */
/*-----------------------------------*/
.cmp-features {
  display: grid;
  gap: 18px;
  margin: 0 !important;
  padding: 0;
  list-style: none;
}

.cmp-features--cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.cmp-feature {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding: clamp(28px, 3vw, 40px);
  overflow: hidden;
  isolation: isolate;
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-radius: 22px;
  transition: transform 0.4s var(--cmp-ease), border-color 0.35s ease, box-shadow 0.35s ease;
}

.cmp-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(440px circle at var(--cmp-mx, 50%) var(--cmp-my, 0%),
      rgba(var(--ai-primary-rgb), 0.1),
      transparent 62%);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.cmp-feature:hover {
  transform: translateY(-6px);
  border-color: rgba(var(--ai-primary-rgb), 0.5);
  box-shadow: 0 22px 50px rgba(20, 20, 20, 0.09);
}

.cmp-feature:hover::before {
  opacity: 1;
}

.cmp-feature__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 6px;
}

.cmp-feature__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: var(--ai-cream);
  border: 1px solid var(--ai-line);
  transition: background 0.35s ease, border-color 0.35s ease, transform 0.45s var(--cmp-ease);
}

.cmp-feature__icon svg {
  width: 25px;
  height: 25px;
  color: var(--ai-primary-deep);
  stroke-width: 1.9;
  transition: color 0.35s ease;
}

.cmp-feature:hover .cmp-feature__icon {
  background: var(--ai-primary);
  border-color: var(--ai-primary);
  transform: translateY(-3px) rotate(-6deg);
}

.cmp-feature:hover .cmp-feature__icon svg {
  color: #FFF;
}

.cmp-feature__num {
  font-family: var(--ai-heading);
  font-size: 44px;
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1 !important;
  /* Solid, not outlined: a stroke draws Montserrat's overlapping contours */
  color: #EEE8DE;
  transition: color 0.35s ease;
}

.cmp-feature:hover .cmp-feature__num {
  color: rgba(var(--ai-primary-rgb), 0.28);
}

.cmp-feature__title {
  font-family: var(--ai-heading);
  font-size: clamp(21px, 2vw, 26px);
  font-weight: 800;
  letter-spacing: -0.026em;
  line-height: 1.2 !important;
  color: var(--ai-ink);
}

.cmp-feature__text {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cmp-feature__text p {
  font-family: var(--ai-body);
  font-size: 15.5px;
  line-height: 1.7 !important;
  color: var(--ai-muted);
}

.cmp-feature__edge {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, var(--ai-primary-deep), var(--ai-primary));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s var(--cmp-ease);
}

.cmp-feature:hover .cmp-feature__edge {
  transform: scaleX(1);
}

/* ---- media: a photograph beside compact tiles ---- */
.cmp-features-wrap--media {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  align-items: stretch;
  gap: clamp(24px, 3.5vw, 48px);
}

.cmp-features__media {
  position: relative;
  min-height: 460px;
  overflow: hidden;
  border-radius: 26px;
  box-shadow: 0 34px 70px rgba(20, 20, 20, 0.18);
}

.cmp-features__media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover;
}

.cmp-features__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.cmp-features--media {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.cmp-features--media .cmp-feature {
  gap: 10px;
  padding: 26px 24px 28px;
}

.cmp-features--media .cmp-feature__top {
  margin-bottom: 4px;
}

.cmp-features--media .cmp-feature__icon {
  width: 48px;
  height: 48px;
  border-radius: 14px;
}

.cmp-features--media .cmp-feature__icon svg {
  width: 22px;
  height: 22px;
}

.cmp-features--media .cmp-feature__title {
  font-size: clamp(19px, 1.7vw, 21px);
}

.cmp-features--media .cmp-feature__text p {
  font-size: 15px;
}

/* The line a set of modules closes on */
.cmp-closing {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  background: #FFF;
  border: 1px solid rgba(var(--ai-primary-rgb), 0.4);
  border-left: 4px solid var(--ai-primary);
  border-radius: 16px;
  font-family: var(--ai-heading);
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.45 !important;
  color: var(--ai-ink);
}

.cmp-closing>svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--ai-primary);
  stroke-width: 2.4;
}

.cmp-closing strong {
  font-weight: 700;
}

/*-----------------------------------*/
/* PHASE TRACK                       */
/* The go-live route on one line: a  */
/* rail fills first to last as the   */
/* card arrives, each phase lighting */
/* as the fill reaches it; then the  */
/* bracket opens under all of them.  */
/*-----------------------------------*/
.cmp-track {
  position: relative;
  padding: clamp(28px, 3.6vw, 52px);
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-radius: 30px;
  box-shadow:
    0 4px 0 0 rgba(var(--ai-primary-rgb), 0.3),
    0 34px 80px rgba(20, 20, 20, 0.07);
  overflow: hidden;
}

/* The warm corner the briefing's graphic carries */
.cmp-track::before {
  content: "";
  position: absolute;
  top: -90px;
  right: -90px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--ai-primary-rgb), 0.16), rgba(var(--ai-primary-rgb), 0) 68%);
  pointer-events: none;
}

.cmp-track__head {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px 40px;
  margin-bottom: clamp(34px, 4.5vw, 54px);
}

.cmp-track__title {
  margin-top: 12px;
  font-family: var(--ai-heading);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 1.08 !important;
  color: var(--ai-ink);
  text-wrap: balance;
}

.cmp-track__sub {
  margin-top: 10px;
  font-family: var(--ai-body);
  font-size: 16.5px;
  line-height: 1.6 !important;
  color: var(--ai-muted);
}

.cmp-track__tag {
  position: relative;
  flex-shrink: 0;
  margin-top: 8px;
  padding-bottom: 10px;
  font-family: var(--ai-heading);
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2 !important;
  color: var(--cmp-orange-text);
  rotate: -3deg;
}

.cmp-track__tag svg {
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 12px;
  overflow: visible;
}

.cmp-track__tag path {
  fill: none;
  stroke: var(--ai-primary);
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.4s;
}

.cmp-track.is-on .cmp-track__tag path,
.cmp-page:not(.cmp-js *) .cmp-track__tag path {
  stroke-dashoffset: 0;
}

/* ---- the route ---- */
.cmp-track__route {
  position: relative;
}

.cmp-track__phases {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(var(--cmp-n), minmax(0, 1fr));
  gap: 14px;
}

.cmp-track__phase {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* On the horizontal route every phase shares the same four rows — icon,
   name, text, points (subgrid) — so each part lines up across the columns
   whatever its length, and every column is the same height. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 1024px) {
    .cmp-track__phases {
      grid-template-rows: repeat(4, auto);
      row-gap: 10px;
    }

    .cmp-track__phase {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
      align-items: start;
      justify-items: start;
    }
  }
}

.cmp-track__node {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #FFF;
  border: 2px solid var(--ai-line);
  color: var(--ai-primary-deep);
  transition: background 0.45s ease, border-color 0.45s ease, color 0.45s ease, box-shadow 0.45s ease, transform 0.35s var(--cmp-ease);
}

.cmp-track__node svg {
  width: 24px;
  height: 24px;
  stroke-width: 2;
}

.cmp-track__phase:hover .cmp-track__node {
  transform: translateY(-4px) scale(1.05);
}

.cmp-track__name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ai-heading);
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.012em;
  line-height: 1.2 !important;
  color: var(--ai-ink);
}

.cmp-track__name b {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ai-ink);
  font-family: var(--ai-heading);
  font-size: 11px;
  font-weight: 800;
  line-height: 1 !important;
  color: #FFF;
  transition: background 0.45s ease;
}

.cmp-track__text {
  font-family: var(--ai-body);
  font-size: 13.5px;
  line-height: 1.55 !important;
  color: var(--ai-muted);
}

.cmp-page .cmp-track__points {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  margin-top: 2px !important;
  padding-top: 11px;
  border-top: 2px solid rgba(var(--ai-primary-rgb), 0.22);
}

.cmp-track__points li {
  position: relative;
  padding-left: 13px;
  font-family: var(--ai-body);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.4 !important;
  color: var(--ai-ink-soft);
}

.cmp-track__points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ai-primary);
}

/* The rail runs through the node centres and on past the last one */
.cmp-track__rail {
  position: absolute;
  top: 28px;
  left: 29px;
  right: 0;
  z-index: 0;
  height: 3px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ai-line);
}

.cmp-track__rail em {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--ai-primary-deep), var(--ai-primary));
}

/* ---- the bracket ---- */
.cmp-track__range {
  position: relative;
  height: 48px;
  margin-top: 30px;
}

.cmp-track__bracket {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 20px;
  border: 2px solid rgba(var(--ai-primary-rgb), 0.55);
  border-top: 0;
  border-radius: 0 0 16px 16px;
}

.cmp-track__range-label {
  position: absolute;
  left: 50%;
  top: 20px;
  translate: -50% -50%;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 20px 10px 14px;
  background: var(--ai-ink);
  border: 3px solid #FFF;
  border-radius: 999px;
  box-shadow: 0 0 0 2px rgba(var(--ai-primary-rgb), 0.55), 0 14px 30px rgba(20, 20, 20, 0.2);
  white-space: nowrap;
}

.cmp-track__range-label svg {
  width: 18px;
  height: 18px;
  color: var(--ai-primary);
  stroke-width: 2.4;
}

.cmp-track__range-label b {
  font-family: var(--ai-heading);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1 !important;
  color: #FFF;
}

/* ---- the run, once ---- */
.cmp-js .cmp-track__rail em {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.7s cubic-bezier(0.45, 0, 0.25, 1) 0.2s;
}

.cmp-js .cmp-track__node,
.cmp-js .cmp-track__name b {
  transition-delay: calc(0.25s + var(--i, 0) * 0.22s);
}

.cmp-js .cmp-track__bracket {
  clip-path: inset(0 50% 0 50%);
  transition: clip-path 0.9s var(--cmp-ease) 1.7s;
}

.cmp-js .cmp-track__range-label {
  opacity: 0;
  scale: 0.6;
  transition: opacity 0.4s ease 2.2s, scale 0.55s var(--cmp-pop) 2.2s;
}

.cmp-track.is-on .cmp-track__rail em {
  transform: none;
}

.cmp-track.is-on .cmp-track__node,
.cmp-page:not(.cmp-js *) .cmp-track__node {
  background: var(--ai-primary);
  border-color: var(--ai-primary);
  color: #FFF;
  box-shadow: 0 0 0 6px rgba(var(--ai-primary-rgb), 0.14);
}

.cmp-track.is-on .cmp-track__name b {
  background: var(--ai-primary-deep);
}

.cmp-track.is-on .cmp-track__bracket {
  clip-path: inset(0 0 0 0);
}

.cmp-track.is-on .cmp-track__range-label {
  opacity: 1;
  scale: 1;
}

/*-----------------------------------*/
/* STEPS                             */
/* The heading holds still beside a  */
/* spine that fills with scroll; the */
/* counter follows the step in view. */
/*-----------------------------------*/
.cmp-steps {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  align-items: start;
  gap: clamp(36px, 6vw, 96px);
}

.cmp-steps__aside {
  position: sticky;
  top: var(--cmp-sticky-top);
}

.cmp-steps__aside .cmp-intro {
  margin-bottom: 34px;
}

.cmp-steps__aside .cmp-display {
  font-size: clamp(32px, 3.7vw, 52px);
}

.cmp-steps__meter {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 340px;
}

.cmp-steps__count {
  display: flex;
  align-items: baseline;
  gap: 12px;
}

.cmp-steps__count b {
  font-family: var(--ai-heading);
  font-size: clamp(64px, 7vw, 104px);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.9 !important;
  color: var(--ai-primary-deep);
  background: var(--cmp-accent);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cmp-steps__count span {
  font-family: var(--ai-mono);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ai-muted);
}

.cmp-steps__bar {
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--ai-line);
}

.cmp-steps__bar em {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--ai-primary-deep), var(--ai-primary));
  transform: scaleX(var(--cmp-draw, 1));
  transform-origin: left;
  transition: transform 0.25s linear;
}

.cmp-steps__track {
  position: relative;
  padding-left: 54px;
}

.cmp-steps__spine {
  position: absolute;
  top: 34px;
  bottom: 34px;
  left: 13px;
  width: 2px;
  overflow: hidden;
  border-radius: 999px;
  background: #DCD4C6;
}

.cmp-steps__spine em {
  position: absolute;
  inset: 0;
  display: block;
  background: linear-gradient(180deg, var(--ai-primary), var(--ai-primary-deep));
  transform: scaleY(var(--cmp-draw, 1));
  transform-origin: top;
  transition: transform 0.25s linear;
}

.cmp-steps__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cmp-step {
  position: relative;
}

.cmp-step__dot {
  position: absolute;
  top: 31px;
  left: -50px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ai-paper);
  border: 2px solid #DCD4C6;
  transition: border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;
}

.cmp-step.is-on .cmp-step__dot,
.cmp-page:not(.cmp-js *) .cmp-step__dot {
  background: var(--ai-primary);
  border-color: var(--ai-primary);
  box-shadow: 0 0 0 6px rgba(var(--ai-primary-rgb), 0.16);
}

.cmp-step__card {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px 26px 24px;
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-radius: 18px;
  transition: transform 0.35s var(--cmp-ease), border-color 0.35s ease, box-shadow 0.35s ease;
}

.cmp-step:hover .cmp-step__card {
  transform: translateX(6px);
  border-color: var(--ai-primary);
  box-shadow: 0 4px 0 0 var(--ai-primary);
}

.cmp-step__icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 13px;
  background: var(--ai-cream);
  border: 1px solid var(--ai-line);
  transition: background 0.4s ease, border-color 0.4s ease;
}

.cmp-step__icon svg {
  width: 22px;
  height: 22px;
  color: var(--ai-primary-deep);
  stroke-width: 2;
}

.cmp-step.is-on .cmp-step__icon {
  background: rgba(var(--ai-primary-rgb), 0.1);
  border-color: rgba(var(--ai-primary-rgb), 0.35);
}

.cmp-step__copy {
  min-width: 0;
}

.cmp-step__title {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: var(--ai-heading);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25 !important;
  color: var(--ai-ink);
}

.cmp-step__num {
  flex-shrink: 0;
  font-family: var(--ai-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--cmp-orange-text);
}

.cmp-step__copy p {
  margin-top: 7px;
  font-family: var(--ai-body);
  font-size: 15px;
  line-height: 1.65 !important;
  color: var(--ai-muted);
}

/* The destination carries the ink */
.cmp-step--last .cmp-step__card {
  background: var(--ai-ink);
  border-color: var(--ai-ink);
}

.cmp-step--last .cmp-step__icon {
  background: rgba(var(--ai-primary-rgb), 0.16);
  border-color: rgba(var(--ai-primary-rgb), 0.42);
}

.cmp-step--last .cmp-step__icon svg,
.cmp-step--last .cmp-step__num {
  color: var(--ai-primary);
}

.cmp-step--last .cmp-step__title {
  color: #FFF;
}

.cmp-step--last .cmp-step__copy p {
  color: rgba(255, 255, 255, 0.72);
}

/* Steps land as they come into view; nothing waits on the reader */
.cmp-js .cmp-step {
  opacity: 0;
  translate: 0 18px;
  transition: opacity 0.6s ease, translate 0.7s var(--cmp-ease);
}

.cmp-js .cmp-step.is-in {
  opacity: 1;
  translate: 0 0;
}

.cmp-steps__closing {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 22px 0 0 54px;
  padding: 22px 26px;
  background: #FFF;
  border: 1px solid rgba(var(--ai-primary-rgb), 0.45);
  border-radius: 18px;
  box-shadow: 0 4px 0 0 var(--ai-primary), var(--cmp-shadow-sm);
}

.cmp-steps__closing-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--ai-primary);
}

.cmp-steps__closing-icon svg {
  width: 21px;
  height: 21px;
  color: #FFF;
  stroke-width: 2.3;
}

.cmp-steps__closing>span:last-child {
  font-family: var(--ai-heading);
  font-size: 17.5px;
  font-weight: 700;
  letter-spacing: -0.012em;
  line-height: 1.45 !important;
  color: var(--ai-ink);
}

.cmp-steps__closing strong {
  font-weight: 700;
}

/*-----------------------------------*/
/* PLANS                             */
/*-----------------------------------*/
.cmp-plans {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
  gap: clamp(18px, 2.4vw, 28px);
}

.cmp-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(28px, 3.4vw, 46px);
  overflow: hidden;
  isolation: isolate;
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-radius: 28px;
  box-shadow: 0 30px 70px -34px rgba(20, 20, 20, 0.22);
  transition: transform 0.4s var(--cmp-ease), box-shadow 0.4s ease, border-color 0.4s ease;
}

.cmp-plan::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: var(--cmp-plan-edge);
}

.cmp-plan--primary {
  --cmp-plan-edge: linear-gradient(90deg, var(--ai-primary-deep), var(--ai-primary));
  border-color: rgba(var(--ai-primary-rgb), 0.38);
}

.cmp-plan--ink {
  --cmp-plan-edge: var(--ai-ink);
}

.cmp-plan:hover {
  transform: translateY(-6px);
  box-shadow: 0 44px 84px -34px rgba(20, 20, 20, 0.3);
}

/* The plan's number, as an outline behind the card */
.cmp-plan__ghost {
  position: absolute;
  top: -34px;
  right: -6px;
  z-index: -1;
  font-family: var(--ai-heading);
  font-size: 210px;
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 1 !important;
  color: rgba(20, 20, 20, 0.035);
  pointer-events: none;
}

.cmp-plan__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 26px;
  padding-bottom: 26px;
  border-bottom: 1px dashed #DCD4C6;
}

/* From 768px the cards share one set of rows (subgrid): icon, title, price
   and promise each line up across the cards whatever their length — a title
   on one line beside one on two still has both prices on the same line —
   then the body, then the foot. Same-height headers, so the options compare
   line for line. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 768px) {
    .cmp-plans {
      grid-template-rows: repeat(6, auto);
      row-gap: 0;
    }

    .cmp-plan {
      display: grid;
      grid-row: span 6;
      grid-template-rows: subgrid;
      row-gap: 0;
    }

    .cmp-plan__head {
      display: grid;
      grid-row: span 4;
      grid-template-rows: subgrid;
      align-items: start;
      justify-items: start;
    }
  }
}

.cmp-plan__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: rgba(var(--ai-primary-rgb), 0.12);
  border: 1px solid rgba(var(--ai-primary-rgb), 0.35);
}

.cmp-plan__icon svg {
  width: 25px;
  height: 25px;
  color: var(--ai-primary-deep);
  stroke-width: 2;
}

.cmp-plan--ink .cmp-plan__icon {
  background: var(--ai-ink);
  border-color: var(--ai-ink);
}

.cmp-plan--ink .cmp-plan__icon svg {
  color: var(--ai-primary);
}

/* "01 - Guided Implementation": the briefing's pink line, kept large */
.cmp-plan__title {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--ai-heading);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 800;
  letter-spacing: -0.036em;
  line-height: 1.05 !important;
  color: var(--ai-ink);
}

/* The title's words in one box, so an authored break ("|") is a line break
   inside it rather than a flex item of its own. A bare span: the heading's
   type is restated, as for .cmp-line. */
.cmp-plan__name {
  display: block;
  color: inherit !important;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit !important;
}

.cmp-plan__num {
  font-family: var(--ai-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.18em;
  line-height: 1.3 !important;
  color: var(--cmp-orange-text);
}

.cmp-plan__price {
  margin-top: 4px;
  font-family: var(--ai-heading);
  line-height: 1 !important;
  color: var(--ai-ink);
}

.cmp-plan__amount {
  font-family: var(--ai-heading);
  font-size: clamp(46px, 5.2vw, 68px);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1 !important;
  color: var(--ai-ink);
}

.cmp-plan__unit {
  font-family: var(--ai-heading);
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ai-muted);
}

.cmp-plan__tagline {
  font-family: var(--ai-heading);
  font-size: clamp(18px, 1.7vw, 21px);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.35 !important;
  color: var(--ai-ink);
}

.cmp-plan__tagline strong {
  font-weight: 800;
}

.cmp-plan__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.cmp-plan__p,
.cmp-plan__lead {
  font-family: var(--ai-body);
  font-size: 15.5px;
  line-height: 1.7 !important;
  color: var(--ai-muted);
}

.cmp-plan__lead {
  margin-top: 4px;
  font-weight: 700;
  color: var(--ai-ink);
}

.cmp-plan__list li {
  font-size: 15px;
}

.cmp-plan__fit {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
  padding: 22px 22px 24px;
  background: var(--ai-cream);
  border-radius: 18px;
}

.cmp-plan__fit-title {
  font-family: var(--ai-heading);
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25 !important;
  color: var(--ai-ink);
}

.cmp-plan__fit .cmp-plan__lead {
  margin-top: 0;
}

.cmp-plan__fitlist {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.cmp-plan__fitlist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--ai-body);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5 !important;
  color: var(--ai-ink-soft);
}

.cmp-plan__fitlist li svg {
  width: 17px;
  height: 17px;
  margin-top: 3px;
  flex-shrink: 0;
  color: var(--ai-primary-deep);
  stroke-width: 2.5;
}

.cmp-plan__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  margin-top: auto;
  padding-top: 28px;
}

.cmp-plan__price-line {
  width: 100%;
  padding: 14px 18px;
  background: rgba(var(--ai-primary-rgb), 0.08);
  border-left: 3px solid var(--ai-primary);
  border-radius: 12px;
  font-family: var(--ai-heading);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4 !important;
  color: var(--ai-ink);
}

.cmp-plan--ink .cmp-plan__price-line {
  background: rgba(20, 20, 20, 0.05);
  border-left-color: var(--ai-ink);
}

/*-----------------------------------*/
/* COMPARE                           */
/*-----------------------------------*/
.cmp-compare {
  max-width: 1040px;
  margin: 0 auto;
}

.cmp-compare__focus {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-bottom: 22px;
}

.cmp-compare__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-radius: 999px;
  font-family: var(--ai-heading);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.2;
  color: var(--ai-muted);
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.cmp-compare__btn svg {
  width: 16px;
  height: 16px;
  color: var(--ai-primary-deep);
  stroke-width: 2.2;
}

.cmp-compare__btn:hover {
  border-color: rgba(var(--ai-primary-rgb), 0.5);
  color: var(--ai-ink);
}

.cmp-compare__btn.is-active {
  background: var(--ai-ink);
  border-color: var(--ai-ink);
  color: #FFF;
}

.cmp-compare__btn.is-active svg {
  color: var(--ai-primary);
}

.cmp-page .cmp-compare__table {
  display: table;
  width: 100%;
  max-width: 100%;
  margin: 0;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-radius: 22px;
  box-shadow: var(--cmp-shadow);
}

.cmp-compare__table th,
.cmp-compare__table td {
  padding: 20px 26px;
  border-top: 1px solid var(--ai-line);
  text-align: left;
  vertical-align: top;
  font-family: var(--ai-body);
  font-size: 15.5px;
  font-weight: 500;
  line-height: 1.6 !important;
  color: var(--ai-ink-soft);
  transition: opacity 0.3s ease, background 0.3s ease;
}

.cmp-compare__table thead th,
.cmp-compare__table thead td {
  position: relative;
  padding-top: 26px;
  border-top: 0;
  vertical-align: bottom;
}

.cmp-compare__corner {
  width: 22%;
  background: var(--ai-cream);
}

/* Each option's head carries its card's edge */
.cmp-compare__table thead th::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--ai-primary-deep), var(--ai-primary));
}

.cmp-compare__table thead th[data-col="2"]::before {
  background: var(--ai-ink);
}

.cmp-compare__colhead {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ai-heading);
  font-size: clamp(17px, 1.6vw, 20px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2 !important;
  color: var(--ai-ink);
}

.cmp-compare__colhead svg {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: var(--ai-primary-deep);
  stroke-width: 2;
}

.cmp-compare__table tbody th {
  background: var(--ai-cream);
  font-family: var(--ai-heading);
  font-size: 15.5px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ai-ink);
}

.cmp-compare__table tbody tr:first-child td strong {
  font-family: var(--ai-heading);
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ai-ink);
}

.cmp-compare__label {
  display: none;
}

.cmp-compare__value {
  display: block;
}

/* Focus one option, dim the other */
.cmp-compare.is-focus-1 [data-col="2"],
.cmp-compare.is-focus-2 [data-col="1"] {
  opacity: 0.32;
}

.cmp-compare.is-focus-1 td[data-col="1"],
.cmp-compare.is-focus-2 td[data-col="2"] {
  background: rgba(var(--ai-primary-rgb), 0.07);
  color: var(--ai-ink);
}

/* On a pointer, the column under it lifts */
.cmp-compare__table [data-col].is-hovered {
  background: rgba(var(--ai-primary-rgb), 0.05);
  color: var(--ai-ink);
}

/*-----------------------------------*/
/* LOOP vs PATH                      */
/*-----------------------------------*/
.cmp-loop-lead {
  max-width: 860px;
  margin: 0 auto clamp(40px, 5vw, 60px);
  text-align: center;
}

.cmp-loop-lead__title {
  font-family: var(--ai-heading);
  font-size: clamp(26px, 3.1vw, 40px);
  font-weight: 800;
  letter-spacing: -0.034em;
  line-height: 1.12 !important;
  color: var(--ai-ink);
  text-wrap: balance;
}

.cmp-loop-lead__text {
  margin-top: 16px;
  font-family: var(--ai-body);
  font-size: 18px;
  line-height: 1.7 !important;
  color: var(--ai-muted);
}

.cmp-loop {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: stretch;
  gap: 22px;
}

.cmp-loop__panel {
  position: relative;
  padding: clamp(24px, 3vw, 38px);
  border-radius: 26px;
}

.cmp-loop__panel--loop {
  background: var(--ai-cream);
  border: 1.5px dashed #D6CDBE;
}

.cmp-loop__panel--path {
  background: #FFF;
  border: 1px solid rgba(var(--ai-primary-rgb), 0.45);
  box-shadow: 0 4px 0 0 var(--ai-primary), var(--cmp-shadow);
}

.cmp-loop__label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 24px !important;
  font-family: var(--ai-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3 !important;
  color: var(--ai-muted);
}

.cmp-loop__label svg {
  width: 18px;
  height: 18px;
  stroke-width: 2.3;
}

.cmp-loop__panel--path .cmp-loop__label {
  color: var(--cmp-orange-text);
}

/* ---- the cycle ---- */
.cmp-loop__cycle {
  position: relative;
  padding-right: 44px;
}

.cmp-loop__steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cmp-loop__steps li {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 15px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid var(--ai-line);
  border-radius: 13px;
  font-family: var(--ai-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45 !important;
  color: var(--ai-ink-soft);
}

/* The overhead piles up: the last three sit stacked on one another */
.cmp-loop__steps li:nth-child(n+4) {
  background: #FFF;
  box-shadow: 0 3px 0 -1px #FFF, 0 4px 0 0 var(--ai-line), 0 7px 0 -1px #FFF, 0 8px 0 0 var(--ai-line);
}

.cmp-loop__n {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  border-radius: 50%;
  background: #FFF;
  border: 1px solid var(--ai-line);
  font-family: var(--ai-mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1 !important;
  color: var(--ai-muted);
}

/* The return path, round to the start again */
.cmp-loop__return {
  position: absolute;
  top: 22px;
  bottom: 22px;
  right: 0;
  width: 30px;
  border: 2px dashed rgba(var(--ai-primary-rgb), 0.5);
  border-left: 0;
  border-radius: 0 20px 20px 0;
}

.cmp-loop__return svg {
  position: absolute;
  top: 50%;
  right: -15px;
  width: 28px;
  height: 28px;
  padding: 5px;
  translate: 0 -50%;
  border-radius: 50%;
  background: var(--ai-cream);
  color: var(--ai-primary-deep);
  stroke-width: 2.4;
}

/* The marker: a dot at the head of a track as tall as the path. The climb
   moves the track (translate, on the compositor); moving the dot by top
   re-laid the page out on every frame. */
.cmp-loop__return em {
  position: absolute;
  top: 0;
  bottom: 0;
  right: -6px;
  width: 10px;
  opacity: 0;
  translate: 0 100%;
}

.cmp-loop__return em::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ai-primary);
  box-shadow: 0 0 0 4px rgba(var(--ai-primary-rgb), 0.2);
}

/* A step's light: an outline and white fill laid over the step's own and
   faded in and out. Fading (opacity) runs on the compositor; animating the
   border and background colours repainted the list on every frame. */
.cmp-loop__steps li::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  border: 1px solid rgba(var(--ai-primary-rgb), 0.75);
  border-radius: inherit;
  background: #FFF;
  opacity: 0;
}

/* While on screen the cycle runs: each step lights in turn, then the marker
   climbs the return path and it starts again — for as long as you watch. */
.cmp-loop.is-live .cmp-loop__steps li::before {
  animation: cmp-loop-step 7s ease-in-out infinite;
  animation-delay: calc(var(--i, 0) * 1s);
}

.cmp-loop.is-live .cmp-loop__return em {
  animation: cmp-loop-return 7s ease-in-out infinite;
}

@keyframes cmp-loop-step {

  0%,
  2% {
    opacity: 0;
  }

  5%,
  12% {
    opacity: 1;
  }

  16%,
  100% {
    opacity: 0;
  }
}

@keyframes cmp-loop-return {

  0%,
  84% {
    translate: 0 100%;
    opacity: 0;
  }

  87% {
    opacity: 1;
  }

  97% {
    opacity: 1;
  }

  100% {
    translate: 0 0;
    opacity: 0;
  }
}

.cmp-loop__versus {
  display: grid;
  place-items: center;
  align-self: center;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ai-ink);
  box-shadow: 0 12px 26px rgba(20, 20, 20, 0.22);
}

.cmp-loop__versus svg {
  width: 22px;
  height: 22px;
  color: var(--ai-primary);
  stroke-width: 2.6;
}

/* ---- the straight path ---- */
.cmp-loop__stops {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-left: 44px;
}

.cmp-loop__stops::before {
  content: "";
  position: absolute;
  top: 12px;
  bottom: 18px;
  left: 13px;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--ai-primary), var(--ai-green));
}

.cmp-loop__stop {
  position: relative;
}

.cmp-loop__node {
  position: absolute;
  top: 1px;
  left: -44px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #FFF;
  border: 2px solid var(--ai-primary);
}

.cmp-loop__stop--end .cmp-loop__node {
  background: var(--ai-green);
  border-color: var(--ai-green);
}

.cmp-loop__node svg {
  width: 15px;
  height: 15px;
  color: #FFF;
  stroke-width: 3.2;
}

.cmp-loop__stop-copy {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cmp-loop__stop-copy p {
  font-family: var(--ai-body);
  font-size: 16.5px;
  line-height: 1.65 !important;
  color: var(--ai-muted);
}

.cmp-loop__stop-copy strong {
  color: var(--ai-ink);
}

.cmp-loop__stop-copy p.is-statement {
  padding: 16px 18px;
  background: rgba(var(--ai-primary-rgb), 0.08);
  border-radius: 14px;
  font-size: 18px;
  line-height: 1.45 !important;
}

/*-----------------------------------*/
/* CHAIN                             */
/*-----------------------------------*/
.cmp-page .cmp-chain {
  display: grid;
  grid-template-columns: repeat(var(--cmp-n), minmax(0, 1fr));
  gap: 22px;
  max-width: 1120px;
  margin: 0 auto !important;
}

.cmp-chain__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 22px 10px 20px;
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-radius: 18px;
  box-shadow: var(--cmp-shadow-sm);
  text-align: center;
  transition: transform 0.3s var(--cmp-ease), border-color 0.3s ease;
}

.cmp-chain__stage:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--ai-primary-rgb), 0.5);
}

/* The link to the next stage: the briefing's arrow */
.cmp-chain__stage:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  width: 22px;
  height: 2px;
  background: var(--ai-primary);
}

.cmp-chain__stage:not(:last-child)::before {
  content: "";
  position: absolute;
  top: calc(50% - 4px);
  left: calc(100% + 13px);
  width: 8px;
  height: 8px;
  border-top: 2px solid var(--ai-primary);
  border-right: 2px solid var(--ai-primary);
  rotate: 45deg;
}

.cmp-chain__check {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ai-green);
  border: 1px solid var(--ai-green);
  transition: background 0.3s ease, border-color 0.3s ease;
}

.cmp-chain__check svg {
  width: 20px;
  height: 20px;
}

.cmp-chain__check path {
  stroke: #FFF;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.cmp-chain__name {
  font-family: var(--ai-heading);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.012em;
  line-height: 1.2 !important;
  color: var(--ai-ink);
}

/* ---- ticked off in turn, once ---- */
.cmp-js .cmp-chain__check {
  background: var(--ai-cream);
  border-color: var(--ai-line);
  transition-delay: calc(var(--i, 0) * 0.22s + 0.1s);
}

.cmp-js .cmp-chain__check path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.4s ease;
  transition-delay: calc(var(--i, 0) * 0.22s + 0.22s);
}

.cmp-js .cmp-chain__stage:not(:last-child)::after {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s var(--cmp-ease);
  transition-delay: calc(var(--i, 0) * 0.22s + 0.32s);
}

.cmp-js .cmp-chain__stage:not(:last-child)::before {
  opacity: 0;
  transition: opacity 0.2s ease;
  transition-delay: calc(var(--i, 0) * 0.22s + 0.5s);
}

.cmp-chain.is-on .cmp-chain__check {
  background: var(--ai-green);
  border-color: var(--ai-green);
}

.cmp-chain.is-on .cmp-chain__check path {
  stroke-dashoffset: 0;
}

/* Written to outrank the hidden state at every breakpoint, including the
   vertical one declared further down */
.cmp-js .cmp-chain.is-on .cmp-chain__stage:not(:last-child)::after {
  transform: none;
}

.cmp-js .cmp-chain.is-on .cmp-chain__stage:not(:last-child)::before {
  opacity: 1;
}

.cmp-chain-after {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 4vw, 64px);
  max-width: 1060px;
  margin: clamp(48px, 5.5vw, 70px) auto 0;
  padding-top: clamp(32px, 4vw, 46px);
  border-top: 1px solid var(--ai-line);
}

.cmp-chain-after__closing {
  font-family: var(--ai-heading);
  font-size: clamp(22px, 2.5vw, 32px);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.2 !important;
  color: var(--ai-ink);
  text-wrap: balance;
}

/*-----------------------------------*/
/* BENEFITS                          */
/* The about-us audience index:      */
/* names read as a list, each row    */
/* opening on hover.                 */
/*-----------------------------------*/
.cmp-page .cmp-benefits {
  margin: 0 !important;
  border-top: 1px solid #DCD4C6;
}

.cmp-benefit {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.12fr) 36px;
  align-items: center;
  gap: 24px;
  padding: 26px 22px 26px 6px;
  border-bottom: 1px solid #DCD4C6;
  transition: padding 0.35s var(--cmp-ease);
}

/* numbered => false: no index column at the end of the row */
.cmp-benefits--plain .cmp-benefit {
  grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.12fr);
}

.cmp-benefit::before {
  content: "";
  position: absolute;
  inset: 0 -22px;
  z-index: 0;
  background: #FFF;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(20, 20, 20, 0.07);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cmp-benefit:hover::before {
  opacity: 1;
}

.cmp-benefit:hover {
  padding-left: 18px;
}

.cmp-benefit>* {
  position: relative;
  z-index: 1;
}

.cmp-benefit__icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: #FFF;
  border: 1px solid var(--ai-line);
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.35s var(--cmp-ease);
}

.cmp-benefit__icon svg {
  width: 24px;
  height: 24px;
  color: var(--ai-primary-deep);
  stroke-width: 2;
  transition: color 0.3s ease;
}

.cmp-benefit:hover .cmp-benefit__icon {
  background: var(--ai-primary);
  border-color: var(--ai-primary);
  transform: rotate(-6deg);
}

.cmp-benefit:hover .cmp-benefit__icon svg {
  color: #FFF;
}

.cmp-benefit__name {
  font-family: var(--ai-heading);
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.1 !important;
  color: var(--ai-ink);
  transition: color 0.25s ease;
}

.cmp-benefit__text {
  font-family: var(--ai-body);
  font-size: 16px;
  line-height: 1.65 !important;
  color: var(--ai-muted);
}

.cmp-benefit__num {
  font-family: var(--ai-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-align: right;
  /* Quiet, but still 5:1 on cream */
  color: #6F675B;
  transition: color 0.3s ease;
}

.cmp-benefit:hover .cmp-benefit__num {
  color: var(--cmp-orange-text);
}

/*-----------------------------------*/
/* QUESTION                          */
/* The about-us manifesto band.      */
/*-----------------------------------*/
.cmp-question-section {
  overflow: hidden;
}

.cmp-question-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse 46% 60% at 50% 46%, rgba(var(--ai-primary-rgb), 0.08), transparent 72%),
    linear-gradient(rgba(20, 20, 20, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(20, 20, 20, 0.045) 1px, transparent 1px);
  background-size: auto, 44px 44px, 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 30%, #000 100%);
  mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, transparent 30%, #000 100%);
  pointer-events: none;
}

.cmp-question-section>.ai-wrap {
  position: relative;
  z-index: 1;
}

.cmp-question-section .cmp-display {
  font-size: clamp(30px, 3.8vw, 50px);
}

.cmp-question {
  position: relative;
  max-width: 1060px;
  margin: 0 auto;
  text-align: center;
}

/* Behind the question, as a watermark, clear of the "Ask:" above it */
.cmp-question__mark {
  position: absolute;
  top: 18px;
  left: 50%;
  z-index: 0;
  translate: -50% 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 300px;
  line-height: 1 !important;
  color: rgba(var(--ai-primary-rgb), 0.1);
  pointer-events: none;
}

.cmp-question__ask {
  position: relative;
  z-index: 1;
  margin-bottom: 18px !important;
  font-family: var(--ai-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  line-height: 1.3 !important;
  color: var(--cmp-orange-text);
}

.cmp-question__quote {
  position: relative;
  font-family: var(--ai-heading);
  font-size: clamp(32px, 5.4vw, 74px);
  font-weight: 800;
  letter-spacing: -0.046em;
  line-height: 1.04 !important;
  color: var(--ai-ink);
  text-wrap: balance;
}

.cmp-question__answer {
  max-width: 1000px;
  margin: clamp(44px, 5.5vw, 70px) auto 0;
}

.cmp-question__body {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 52px;
}

.cmp-question__body strong {
  font-family: var(--ai-heading);
  color: var(--ai-ink);
}

.cmp-question__closing {
  margin-top: clamp(32px, 4vw, 48px) !important;
  font-family: var(--ai-heading);
  font-size: clamp(22px, 2.6vw, 34px);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.2 !important;
  text-align: center;
  color: var(--ai-ink);
}

/*-----------------------------------*/
/* LEAD                              */
/*-----------------------------------*/
.cmp-lead {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) auto minmax(0, 0.94fr);
  align-items: stretch;
  gap: clamp(18px, 2.4vw, 30px);
}

.cmp-lead__form {
  padding: clamp(26px, 3vw, 42px);
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-radius: 28px;
  box-shadow:
    0 4px 0 0 rgba(var(--ai-primary-rgb), 0.35),
    0 30px 70px -34px rgba(20, 20, 20, 0.22);
}

.cmp-lead__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}

.cmp-lead__icon {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  flex-shrink: 0;
  border-radius: 15px;
  background: rgba(var(--ai-primary-rgb), 0.12);
  border: 1px solid rgba(var(--ai-primary-rgb), 0.35);
}

.cmp-lead__icon svg {
  width: 24px;
  height: 24px;
  color: var(--ai-primary-deep);
  stroke-width: 2;
}

.cmp-lead__title {
  font-family: var(--ai-heading);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 800;
  letter-spacing: -0.026em;
  line-height: 1.15 !important;
  color: var(--ai-ink);
}

.cmp-lead__or {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.cmp-lead__or::before,
.cmp-lead__or::after {
  content: "";
  flex: 1;
  width: 1px;
  background: #D6CDBE;
}

.cmp-lead__or span {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: #FFF;
  border: 1px solid var(--ai-line);
  font-family: var(--ai-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1 !important;
  color: var(--ai-muted);
}

.cmp-lead__alt {
  display: flex;
}

.cmp-lead__alt .cmp-chat {
  flex: 1;
}

/* ---- the HubSpot form, in the family's inputs ---- */
.cmp-form {
  position: relative;
}

/* Only while a script is loading the form; without scripts, the fallback */
.cmp-form__skeleton {
  display: none;
  flex-direction: column;
  gap: 12px;
}

.cmp-js .cmp-form__skeleton {
  display: flex;
}

.cmp-form__skeleton span {
  position: relative;
  display: block;
  height: 50px;
  overflow: hidden;
  border: 1px solid var(--ai-line);
  border-radius: 12px;
  background: var(--ai-cream);
}

/* The light crossing each field: a band moved with translate, which runs on
   the compositor, and only while the form is on screen (data-cmp-live).
   Sweeping background-position instead repainted the page on every frame
   from the moment it loaded, wherever the reader was. */
.cmp-form__skeleton span::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.9) 50%, transparent 100%);
  translate: -100% 0;
}

.cmp-form.is-live .cmp-form__skeleton span::after {
  animation: cmp-shimmer 1.4s linear infinite;
}

.cmp-form__skeleton .is-tall {
  height: 112px;
}

.cmp-form__skeleton .is-button {
  height: 54px;
  border: 0;
  background: rgba(var(--ai-primary-rgb), 0.22);
}

@keyframes cmp-shimmer {
  to {
    translate: 100% 0;
  }
}

.cmp-form.is-ready .cmp-form__skeleton,
.cmp-form.is-failed .cmp-form__skeleton {
  display: none;
}

.cmp-form__fallback {
  font-size: 15px;
  line-height: 1.6 !important;
  color: var(--ai-muted);
}

.cmp-form .hs-form {
  display: flex !important;
  flex-direction: column;
  gap: 12px !important;
  font-family: var(--ai-body);
}

.cmp-form .hs-form fieldset,
.cmp-form .hs-form .form-columns-1,
.cmp-form .hs-form .form-columns-2,
.cmp-form .hs-form .form-columns-3 {
  max-width: none !important;
  margin: 0 !important;
  padding: 0;
  border: 0;
}

.cmp-form .hs-form .form-columns-2 {
  display: flex;
  gap: 12px;
}

.cmp-form .hs-form .form-columns-2 .hs-form-field {
  flex: 1;
  width: auto !important;
}

.cmp-form .hs-form .hs-form-field {
  margin: 0 !important;
  float: none;
}

.cmp-form .hs-form .hs-form-field>label {
  display: block;
  margin: 0 0 6px !important;
  font-family: var(--ai-heading);
  font-size: 13px;
  font-weight: 700;
  color: var(--ai-ink-soft);
}

/* Labels the form ships without text (it relies on placeholders); the
   placeholder becomes the input's accessible name instead (campaign.js) */
.cmp-form .hs-form .hs-form-field>label.cmp-label-empty {
  display: none;
}

.cmp-form .hs-form .hs-form-field>.input {
  margin: 0 !important;
}

.cmp-form .hs-form .hs-input {
  width: 100% !important;
  max-width: none !important;
  height: auto;
  min-height: 50px;
  margin: 0 !important;
  padding: 13px 16px;
  background: var(--ai-cream);
  border: 1px solid var(--ai-line);
  border-radius: 12px;
  box-shadow: none;
  font-family: var(--ai-body);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--ai-ink);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.cmp-form .hs-form .hs-input::placeholder {
  color: var(--ai-muted);
  opacity: 1;
}

.cmp-form .hs-form .hs-input:focus {
  outline: 0;
  background: #FFF;
  border-color: var(--ai-primary);
  box-shadow: 0 0 0 4px rgba(var(--ai-primary-rgb), 0.18);
}

.cmp-form .hs-form textarea.hs-input {
  min-height: 116px;
  resize: vertical;
}

/* The phone field is a country picker and a number: the wrapper carries
   .hs-input too, so it gives up the input styling to the two inside it */
.cmp-form .hs-form .hs-fieldtype-intl-phone.hs-input {
  display: flex;
  gap: 10px;
  min-height: 0;
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
}

.cmp-form .hs-form .hs-fieldtype-intl-phone.hs-input select {
  flex: 0 0 40%;
  width: 40% !important;
  padding-right: 10px;
  text-overflow: ellipsis;
}

.cmp-form .hs-form .hs-fieldtype-intl-phone.hs-input input {
  flex: 1;
  width: auto !important;
  min-width: 0;
}

/* The form's own reCAPTCHA badge sits in line under the fields */
.cmp-form .hs-form .hs_recaptcha {
  margin: 2px 0 0 !important;
}

/* hide_recaptcha: the badge leaves the layout and the screen but stays
   rendered — not display:none, which can stop the reCAPTCHA check from
   running. Challenges, when Google shows one, open in their own overlay. */
.cmp-form.cmp-form--no-recaptcha .hs-form .hs_recaptcha {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip-path: inset(50%) !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

.cmp-form .hs-form .hs-form-field .hs-error-msgs {
  margin: 6px 2px 0 !important;
  padding: 0;
  list-style: none;
}

.cmp-form .hs-form .hs-error-msgs li,
.cmp-form .hs-form .hs-error-msgs label,
.cmp-form .hs-form .hs-error-msg {
  margin: 0 !important;
  font-family: var(--ai-body);
  font-size: 12.5px;
  font-weight: 600;
  color: #B42318;
}

.cmp-form .hs-form .hs-richtext,
.cmp-form .hs-form .hs-richtext p,
.cmp-form .hs-form .legal-consent-container .hs-richtext p {
  margin: 0 !important;
  padding: 0 !important;
  font-family: var(--ai-body);
  font-size: 12px;
  line-height: 1.6 !important;
  color: var(--ai-muted);
}

/* The consent copy's links: underlined and dark enough to read as links */
.cmp-form .hs-form a,
.cmp-form .hs-form a:visited {
  color: var(--cmp-orange-text) !important;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.cmp-form .hs-form .hs-submit .actions {
  margin: 0;
  padding: 0;
}

.cmp-form .hs-form .hs-submit .hs-button.primary.large {
  width: 100% !important;
  min-height: 54px;
  margin: 4px 0 0 !important;
  padding: 16px 26px;
  background: var(--ai-primary);
  border: 0;
  border-radius: 12px;
  box-shadow: 0 4px 0 0 var(--ai-primary-deep), 0 16px 30px -12px rgba(var(--ai-primary-rgb), 0.55);
  font-family: var(--ai-heading);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.01em;
  color: #FFF;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cmp-form .hs-form .hs-submit .hs-button.primary.large:hover,
.cmp-form .hs-form .hs-submit .hs-button.primary.large:focus {
  background: var(--ai-primary);
  transform: translateY(2px);
  box-shadow: 0 2px 0 0 var(--ai-primary-deep), 0 10px 22px -12px rgba(var(--ai-primary-rgb), 0.55);
}

.cmp-form .submitted-message {
  padding: 26px;
  background: rgba(var(--ai-green-rgb), 0.08);
  border: 1px solid rgba(var(--ai-green-rgb), 0.35);
  border-radius: 16px;
  text-align: center;
}

.cmp-form .submitted-message,
.cmp-form .submitted-message p,
.cmp-form .submitted-message span {
  font-family: var(--ai-heading) !important;
  font-size: 17px !important;
  font-weight: 700;
  line-height: 1.5 !important;
  color: var(--ai-ink) !important;
}

/*-----------------------------------*/
/* FAQ                               */
/* The family accordion; heading     */
/* held beside it on wide screens.   */
/*-----------------------------------*/
.cmp-faq {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  align-items: start;
  gap: clamp(32px, 5.5vw, 88px);
}

.cmp-faq__aside {
  position: sticky;
  top: var(--cmp-sticky-top);
}

.cmp-faq__aside .cmp-intro {
  margin-bottom: 0;
}

.cmp-page .cmp-faq__list.ai-faq {
  max-width: none;
  margin: 0;
  border-radius: 22px;
  box-shadow: var(--cmp-shadow-sm);
}

.cmp-faq__h {
  margin: 0;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.cmp-faq .ai-faq__q {
  gap: 16px;
  padding: 22px 26px;
  font-size: 17px;
  line-height: 1.4 !important;
}

.cmp-faq__n {
  width: 24px;
  flex-shrink: 0;
  font-family: var(--ai-mono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--cmp-orange-text);
}

.cmp-faq__text {
  flex: 1;
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-align: left;
}

.cmp-faq .ai-faq__q:focus-visible {
  outline: 2px solid var(--cmp-orange-text);
  outline-offset: -5px;
  border-radius: 14px;
}

.cmp-faq .ai-faq__item.is-open {
  background: linear-gradient(180deg, rgba(var(--ai-primary-rgb), 0.045), rgba(var(--ai-primary-rgb), 0));
}

.cmp-faq .ai-faq__a p {
  padding: 0 26px 0 66px;
}

.cmp-faq .ai-faq__a p:last-child {
  padding-bottom: 24px;
}

.cmp-faq .ai-faq__a p+p {
  padding-top: 10px;
}

.cmp-faq .ai-faq__a strong {
  color: var(--ai-ink);
}

.cmp-faq .ai-faq__a p.is-statement {
  font-size: 15px;
  line-height: 1.6 !important;
}

/* Closed answers leave the accessibility tree once they finish closing */
.cmp-faq .ai-faq__a>div {
  visibility: hidden;
  transition: visibility 0s linear 0.35s;
}

.cmp-faq .ai-faq__item.is-open .ai-faq__a>div {
  visibility: visible;
  transition-delay: 0s;
}

/*-----------------------------------*/
/* FINAL                             */
/* The family ink band, at display   */
/* size, with the hero's disc as a   */
/* glow on the action side.          */
/*-----------------------------------*/
.cmp-final {
  --ai-grid-x: 80%;
  --ai-grid-y: 50%;
}

.cmp-final__disc {
  position: absolute;
  top: 50%;
  right: -180px;
  z-index: 0;
  width: 620px;
  aspect-ratio: 1;
  translate: 0 -50%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 40%, rgba(var(--ai-primary-rgb), 0.42), rgba(var(--ai-primary-rgb), 0.08) 55%, transparent 70%);
  pointer-events: none;
}

.cmp-final__disc span {
  position: absolute;
  inset: 14%;
  border-radius: 50%;
  border: 1px dashed rgba(var(--ai-primary-rgb), 0.35);
}

.cmp-final .ai-wrap {
  grid-template-columns: minmax(0, 1.55fr) minmax(280px, auto);
  align-items: end;
  gap: clamp(32px, 5vw, 72px);
  padding-top: clamp(88px, 10vw, 140px);
  padding-bottom: clamp(88px, 10vw, 140px);
}

.cmp-final .cmp-final__title {
  margin: 0;
  font-family: var(--ai-heading);
  font-size: clamp(36px, 5.2vw, 70px);
  font-weight: 800;
  letter-spacing: -0.044em;
  line-height: 1.02 !important;
  color: #FFF;
  text-wrap: balance;
}

.cmp-final .cmp-final__title em {
  font-style: normal;
  color: var(--ai-primary);
}

.cmp-final .cmp-final__sub {
  max-width: none;
  margin: 26px 0 0;
  font-family: var(--ai-heading);
  font-size: clamp(21px, 2.3vw, 30px);
  font-weight: 800;
  letter-spacing: -0.024em;
  line-height: 1.2 !important;
  color: #FFF;
}

.cmp-final .cmp-final__sub em {
  font-style: normal;
  color: var(--ai-primary);
}

.cmp-final .cmp-final__lines {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: none;
  margin-top: 22px;
  font-size: 17.5px;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.82);
}

.cmp-final__lines strong {
  font-weight: 700;
  color: rgba(255, 255, 255, 0.86);
}

.cmp-final__actions {
  position: relative;
}

.cmp-final__actions .ai-btn {
  width: 100%;
}

/*-----------------------------------*/
/* ARTICLES                          */
/*-----------------------------------*/
.cmp-articles__title {
  margin-bottom: clamp(30px, 4vw, 46px) !important;
  font-family: var(--ai-heading);
  font-size: clamp(28px, 3.3vw, 44px);
  font-weight: 800;
  letter-spacing: -0.032em;
  line-height: 1.1 !important;
  color: var(--ai-ink);
}

.cmp-page .cmp-articles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
  margin: 0 !important;
}

.cmp-article {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-radius: 22px;
  transition: transform 0.35s var(--cmp-ease), box-shadow 0.35s ease, border-color 0.35s ease;
}

.cmp-article:hover,
.cmp-article:focus-within {
  transform: translateY(-6px);
  border-color: rgba(var(--ai-primary-rgb), 0.45);
  box-shadow: 0 26px 54px rgba(20, 20, 20, 0.1);
}

.cmp-article:focus-within {
  outline: 2px solid var(--cmp-orange-text);
  outline-offset: 3px;
}

.cmp-article__media {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--ai-cream);
}

.cmp-article__media img {
  display: block;
  width: 100%;
  max-width: none !important;
  height: 100% !important;
  object-fit: cover;
  transition: transform 0.7s var(--cmp-ease);
}

.cmp-article:hover .cmp-article__media img {
  transform: scale(1.05);
}

.cmp-article__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 10px;
  padding: 22px 24px 24px;
}

.cmp-article__title {
  font-family: var(--ai-heading);
  font-size: 18.5px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3 !important;
  color: var(--ai-ink);
}

.cmp-article__link,
.cmp-article__link:is(:link, :visited, :hover, :focus, :active) {
  font-family: inherit;
  font-size: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  line-height: inherit;
  color: var(--ai-ink);
  text-decoration: none;
}

/* The title's link stretches over the whole card */
.cmp-article__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

/* The card draws the ring (:focus-within), not the title inside it */
.cmp-page .cmp-article__link:focus-visible {
  outline: 0;
}

.cmp-article__text {
  font-family: var(--ai-body);
  font-size: 14.5px;
  line-height: 1.65 !important;
  color: var(--ai-muted);
}

.cmp-article__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 6px;
  font-family: var(--ai-heading);
  font-size: 14px;
  font-weight: 800;
  color: var(--cmp-orange-text);
}

.cmp-article__more svg {
  width: 16px;
  height: 16px;
  stroke-width: 2.6;
  transition: transform 0.25s ease;
}

.cmp-article:hover .cmp-article__more svg {
  transform: translate(3px, -3px);
}

.cmp-articles__all {
  display: flex;
  justify-content: center;
  margin-top: clamp(34px, 4vw, 50px);
}

/*-----------------------------------*/
/* CHAPTER RAIL                      */
/* Fixed, wide screens only; each    */
/* section's heading appears beside  */
/* its dash on hover or focus.       */
/*-----------------------------------*/
.cmp-rail {
  position: fixed;
  top: 50%;
  right: 20px;
  z-index: 40;
  display: none;
  transform: translateY(-50%);
}

/* Lives outside .cmp-page, so it carries its own resets */
.cmp-rail ul {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cmp-rail li {
  margin: 0;
  padding: 0;
  list-style: none;
}

.cmp-rail a,
.cmp-rail a:hover,
.cmp-rail a:focus,
.cmp-rail a:visited {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 6px;
  color: var(--ai-muted) !important;
  text-decoration: none !important;
}

.cmp-rail a::after {
  content: "";
  width: 16px;
  height: 2px;
  border-radius: 999px;
  background: #CFC6B6;
  transition: width 0.3s ease, background 0.3s ease;
}

.cmp-rail a em {
  position: absolute;
  top: 50%;
  right: 38px;
  width: max-content;
  max-width: 280px;
  padding: 7px 12px;
  background: #FFF;
  border: 1px solid var(--ai-line);
  border-radius: 10px;
  box-shadow: 0 10px 26px rgba(20, 20, 20, 0.12);
  font-family: var(--ai-heading);
  font-style: normal;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.35 !important;
  color: var(--ai-ink);
  white-space: normal;
  opacity: 0;
  translate: 6px -50%;
  pointer-events: none;
  transition: opacity 0.2s ease, translate 0.25s ease;
}

.cmp-rail a:hover em,
.cmp-rail a:focus-visible em {
  opacity: 1;
  translate: 0 -50%;
}

.cmp-rail a:hover::after,
.cmp-rail a:focus-visible::after {
  width: 26px;
  background: var(--ai-primary);
}

.cmp-rail a.is-current::after {
  width: 30px;
  background: var(--ai-primary);
}

.cmp-rail a:focus-visible {
  outline: 2px solid var(--ai-primary);
  outline-offset: 0;
  border-radius: 6px;
}

.cmp-rail.is-inverted a::after {
  background: rgba(255, 255, 255, 0.3);
}

.cmp-rail.is-inverted a.is-current::after,
.cmp-rail.is-inverted a:hover::after {
  background: var(--ai-primary);
}

@media (min-width: 1400px) {
  .cmp-rail {
    display: block;
  }
}

/*-----------------------------------*/
/* RESPONSIVE                        */
/*-----------------------------------*/
@media (max-width: 1279px) {
  .cmp-track__phases {
    gap: 10px;
  }

  .cmp-track__name {
    font-size: 14.5px;
  }

  .cmp-benefit {
    grid-template-columns: 50px minmax(0, 1fr) minmax(0, 1.1fr) 30px;
    gap: 18px;
  }

  .cmp-benefits--plain .cmp-benefit {
    grid-template-columns: 50px minmax(0, 1fr) minmax(0, 1.1fr);
  }

  .cmp-page .cmp-chain {
    gap: 18px;
  }

  .cmp-chain__stage:not(:last-child)::after {
    width: 18px;
  }

  .cmp-chain__stage:not(:last-child)::before {
    left: calc(100% + 9px);
  }

  .cmp-chain__name {
    font-size: 14px;
  }
}

/* Narrow desktops: the stage stops bleeding past the wrap, so the plan
   card keeps clear of the window edge */
@media (min-width: 1024px) and (max-width: 1199px) {
  .cmp-hero__stage {
    margin-right: 0;
  }

  .cmp-hero__plan {
    right: -1%;
  }
}

@media (max-width: 1023px) {
  .cmp-intro--split {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 22px;
  }

  /* ---- hero: the statement, then the stage under it ---- */
  .cmp-hero {
    min-height: 0;
  }

  .cmp-hero>.ai-wrap {
    grid-template-columns: minmax(0, 1fr);
    gap: 56px;
    padding: 120px 0 72px;
  }

  .cmp-hero__stage {
    justify-self: center;
    width: min(86%, 500px);
    margin-right: 0;
  }

  .cmp-hero__scroll {
    display: none;
  }

  .cmp-eq-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .cmp-features-wrap--media {
    grid-template-columns: minmax(0, 1fr);
  }

  .cmp-features__media {
    min-height: 0;
    aspect-ratio: 16 / 10;
  }

  /* ---- the track turns vertical ---- */
  .cmp-track__head {
    flex-direction: column;
  }

  .cmp-track__tag {
    margin-top: 0;
  }

  .cmp-track__phases {
    grid-template-columns: minmax(0, 1fr);
    gap: 26px;
  }

  .cmp-track__phase {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    align-items: start;
    column-gap: 20px;
    row-gap: 8px;
  }

  .cmp-track__node {
    grid-row: 1 / span 3;
  }

  .cmp-track__name,
  .cmp-track__text,
  .cmp-track__points {
    grid-column: 2;
  }

  .cmp-track__name {
    padding-top: 6px;
    font-size: 16px;
  }

  .cmp-track__text {
    font-size: 15px;
  }

  .cmp-page .cmp-track__points {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px 18px;
  }

  .cmp-track__points li {
    font-size: 13.5px;
  }

  .cmp-track__rail {
    top: 0;
    bottom: 0;
    left: 28px;
    right: auto;
    width: 3px;
    height: auto;
  }

  .cmp-js .cmp-track__rail em {
    height: 100%;
    transform: scaleY(0);
    transform-origin: top;
  }

  /* ---- steps: the aside stops holding still ---- */
  .cmp-steps {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .cmp-steps__aside,
  .cmp-faq__aside {
    position: static;
  }

  .cmp-steps__meter {
    display: none;
  }

  .cmp-steps__aside .cmp-intro {
    margin-bottom: 0;
  }

  .cmp-loop {
    grid-template-columns: minmax(0, 1fr);
    gap: 16px;
  }

  .cmp-loop__versus {
    justify-self: center;
    rotate: 90deg;
  }

  /* ---- chain: one stage per line ---- */
  .cmp-page .cmp-chain {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    max-width: 520px;
  }

  .cmp-chain__stage {
    flex-direction: row;
    gap: 14px;
    padding: 14px 18px;
    text-align: left;
  }

  .cmp-chain__name {
    font-size: 16px;
  }

  .cmp-chain__stage:not(:last-child)::after {
    top: 100%;
    left: 37px;
    width: 2px;
    height: 14px;
  }

  .cmp-js .cmp-chain__stage:not(:last-child)::after {
    transform: scaleY(0);
    transform-origin: top;
  }

  .cmp-chain__stage:not(:last-child)::before {
    display: none;
  }

  .cmp-chain-after {
    grid-template-columns: minmax(0, 1fr);
  }

  .cmp-lead {
    grid-template-columns: minmax(0, 1fr);
  }

  .cmp-lead__or {
    flex-direction: row;
  }

  .cmp-lead__or::before,
  .cmp-lead__or::after {
    width: auto;
    height: 1px;
  }

  .cmp-faq {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }

  .cmp-final .ai-wrap {
    grid-template-columns: minmax(0, 1fr);
  }

  .cmp-final__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .cmp-final__actions .ai-btn {
    width: auto;
  }

  .cmp-page .cmp-articles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 767px) {
  .cmp-section {
    padding: 64px 0;
  }

  .cmp-intro {
    margin-bottom: 40px;
  }

  .cmp-intro__copy p,
  .cmp-prose p {
    font-size: 16px;
  }

  /* ---- hero ---- */
  .cmp-hero>.ai-wrap {
    gap: 44px;
    padding: 108px 0 56px;
  }

  .cmp-hero__h1 {
    margin-bottom: 22px;
  }

  .cmp-hero__ctas,
  .cmp-hero__ctas .ai-btn {
    width: 100%;
  }

  /* Authored breaks are for wide screens; here the lines run on as text,
     and the block rises as one */
  .cmp-hero .cmp-line,
  .cmp-hero .cmp-line>span {
    display: inline;
    overflow: visible;
    padding: 0;
    margin: 0;
  }

  .cmp-hero .cmp-line>span {
    animation: none;
  }

  .cmp-hero .cmp-lines {
    animation: cmp-rise 0.8s var(--cmp-ease) both;
    animation-delay: var(--cmp-d, 0ms);
  }

  .cmp-hero__display {
    font-size: clamp(23px, 6.4vw, 30px);
  }

  .cmp-hero__promise {
    font-size: clamp(36px, 10.6vw, 48px);
  }

  /* Taller here, so the photograph stands clear above Richard's card */
  .cmp-hero__stage {
    justify-self: center;
    width: 100%;
    margin: 0;
    aspect-ratio: 100 / 134;
  }

  .cmp-hero__disc {
    left: 7%;
    top: 4%;
    width: 86%;
  }

  .cmp-hero__photo {
    left: 19%;
    top: 3%;
    width: 62%;
    border-width: 6px;
    border-radius: 24px;
  }

  .cmp-hero__icon,
  .cmp-hero__chip {
    display: none;
  }

  .cmp-hero__plan {
    right: 0;
    top: 2%;
    width: 54%;
    min-width: 0;
  }

  .cmp-hero .cmp-chat--mini {
    left: 0;
    bottom: 0;
    width: 88%;
  }

  /* With a person: a narrower, taller stage. The face stays clear at the
     top, Richard's card (chat_at: top) crosses the chest under the chin, and
     the plan card sits at the foot, inside the screen. */
  .cmp-hero__stage--person {
    width: min(100%, 440px);
    aspect-ratio: 100 / 136;
  }

  .cmp-hero__person {
    left: 13%;
    top: 0;
    width: 74%;
  }

  .cmp-hero__stage--chat-top .cmp-chat--mini {
    left: auto;
    right: 0;
    top: 33%;
    bottom: auto;
    width: 74%;
    min-width: 0;
  }

  .cmp-hero__stage--chat-top .cmp-hero__plan {
    left: 0;
    right: auto;
    top: auto;
    bottom: 1%;
  }

  /* ---- chat band: stacked ---- */
  .cmp-chat--wide {
    flex-direction: column;
  }

  .cmp-chat--wide .cmp-chat__window {
    padding: 22px;
  }

  .cmp-chat--wide .cmp-chat__cta {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    width: auto;
    padding: 20px 22px;
    font-size: 17px;
  }

  .cmp-chat--wide .cmp-chat__cta svg {
    width: 22px;
    height: 22px;
  }

  .cmp-eq__terms {
    grid-template-columns: minmax(0, 1fr);
    gap: 10px;
  }

  .cmp-eq__op--plus {
    justify-self: center;
  }

  .cmp-eq__join {
    height: 60px;
  }

  .cmp-eq__wire {
    display: none;
  }

  .cmp-eq__join::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: rgba(var(--ai-primary-rgb), 0.5);
  }

  .cmp-eq__op--equals {
    top: 50%;
  }

  .cmp-features--cards,
  .cmp-features--media,
  .cmp-plans {
    grid-template-columns: minmax(0, 1fr);
  }

  .cmp-plan__ghost {
    font-size: 150px;
    top: -20px;
  }

  /* ---- compare: one card per question ---- */
  .cmp-page .cmp-compare__table,
  .cmp-compare__table tbody,
  .cmp-compare__table tr,
  .cmp-compare__table th,
  .cmp-compare__table td {
    display: block;
    width: 100%;
  }

  .cmp-page .cmp-compare__table {
    overflow: visible;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .cmp-compare__table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
  }

  .cmp-compare__table tbody tr {
    margin-bottom: 14px;
    overflow: hidden;
    background: #FFF;
    border: 1px solid var(--ai-line);
    border-radius: 18px;
    box-shadow: var(--cmp-shadow-sm);
  }

  .cmp-compare__table tbody th {
    padding: 14px 20px;
    border-top: 0;
    font-size: 16px;
  }

  .cmp-compare__table tbody td {
    padding: 14px 20px 16px;
  }

  .cmp-compare__label {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-family: var(--ai-mono);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1.3 !important;
    color: var(--cmp-orange-text);
  }

  .cmp-compare__table td[data-col="2"] .cmp-compare__label {
    color: var(--ai-ink);
  }

  .cmp-compare__label::before {
    content: "";
    width: 14px;
    height: 3px;
    border-radius: 999px;
    background: var(--ai-primary);
  }

  .cmp-compare__table td[data-col="2"] .cmp-compare__label::before {
    background: var(--ai-ink);
  }

  .cmp-loop__cycle {
    padding-right: 36px;
  }

  .cmp-loop__steps li {
    font-size: 14.5px;
  }

  /* ---- benefits: the line under the name ---- */
  .cmp-benefit,
  .cmp-benefit:hover,
  .cmp-benefits--plain .cmp-benefit {
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 6px 16px;
    padding: 22px 0;
  }

  .cmp-benefit__icon {
    grid-row: 1 / span 2;
    width: 46px;
    height: 46px;
    border-radius: 14px;
  }

  .cmp-benefit__icon svg {
    width: 21px;
    height: 21px;
  }

  .cmp-benefit__name,
  .cmp-benefit__text {
    grid-column: 2;
  }

  .cmp-benefit__num,
  .cmp-benefit::before {
    display: none;
  }

  .cmp-question__mark {
    top: 14px;
    font-size: 200px;
  }

  .cmp-question__body {
    grid-template-columns: minmax(0, 1fr);
  }

  .cmp-faq .ai-faq__q {
    gap: 12px;
    padding: 18px 20px;
    font-size: 15.5px;
  }

  .cmp-faq__n {
    width: 20px;
  }

  .cmp-faq .ai-faq__a p {
    padding: 0 20px 0 52px;
  }

  .cmp-faq .ai-faq__a p:last-child {
    padding-bottom: 20px;
  }

  .cmp-final__disc {
    right: -320px;
    opacity: 0.7;
  }

  .cmp-final__actions,
  .cmp-final__actions .ai-btn {
    width: 100%;
  }

  .cmp-page .cmp-articles {
    grid-template-columns: minmax(0, 1fr);
  }

  .cmp-steps__closing {
    margin-left: 0;
  }

  .cmp-step__card {
    gap: 14px;
    padding: 20px 20px 22px;
  }

  .cmp-step__icon {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 480px) {
  .cmp-hero__h1 {
    padding-right: 14px;
    font-size: 13.5px;
  }

  .cmp-hero__h1-icon {
    width: 30px;
    height: 30px;
  }

  .cmp-hero__plan {
    padding: 11px 12px 12px;
    border-radius: 14px;
  }

  .cmp-hero__plan-kicker {
    display: none;
  }

  .cmp-hero__plan-phase b {
    font-size: 14px;
  }

  .cmp-steps__track {
    padding-left: 40px;
  }

  .cmp-step__dot {
    left: -36px;
  }

  .cmp-steps__spine {
    left: 6px;
  }

  .cmp-step__icon {
    display: none;
  }

  .cmp-loop__steps li {
    padding: 11px 12px;
  }
}

/*-----------------------------------*/
/* PRINT                             */
/* Printing lays the page out again, */
/* which restarts animations at      */
/* their hidden first frame: print   */
/* everything finished instead.      */
/*-----------------------------------*/
@media print {

  .cmp-page *,
  .cmp-page *::before,
  .cmp-page *::after {
    animation: none !important;
    transition: none !important;
  }

  .cmp-page [data-cmp-fade],
  .cmp-page [data-ai-animate],
  .cmp-page .cmp-line>span,
  .cmp-page [data-cmp-stagger]>*,
  .cmp-page .cmp-step,
  .cmp-page .cmp-eq__term,
  .cmp-page .cmp-eq__op,
  .cmp-page .cmp-eq__result {
    opacity: 1 !important;
    translate: none !important;
    scale: none !important;
  }

  .cmp-rail,
  .cmp-hero__scroll,
  .cmp-form__skeleton {
    display: none !important;
  }
}

/*-----------------------------------*/
/* REDUCED MOTION                    */
/* Everything starts finished; the   */
/* ambient loops stop. The page reads*/
/* the same, it just does not move.  */
/*-----------------------------------*/
@media (prefers-reduced-motion: reduce) {

  .cmp-line>span,
  [data-cmp-fade],
  [data-cmp-stagger]>*,
  .cmp-js .cmp-step,
  .cmp-hero [data-cmp-fade],
  .cmp-hero .cmp-line>span {
    opacity: 1 !important;
    translate: none !important;
    animation: none !important;
    transition: none !important;
  }

  .cmp-hero__disc,
  .cmp-hero__orbit,
  .cmp-hero__photo,
  .cmp-hero__person,
  .cmp-hero__icon,
  .cmp-hero__chip,
  .cmp-hero__plan,
  .cmp-hero .cmp-chat--mini,
  .cmp-chat.is-typed .cmp-chat__send::after,
  .cmp-form__skeleton span::after,
  .cmp-loop.is-live .cmp-loop__steps li::before,
  .cmp-loop.is-live .cmp-loop__return em {
    animation: none !important;
  }

  .cmp-hero__swash path,
  .cmp-track__tag path {
    stroke-dashoffset: 0 !important;
    animation: none !important;
    transition: none !important;
  }

  .cmp-eq__term,
  .cmp-eq__op,
  .cmp-eq__wire,
  .cmp-eq__result,
  .cmp-track__rail em,
  .cmp-track__node,
  .cmp-track__name b,
  .cmp-track__bracket,
  .cmp-track__range-label,
  .cmp-chain__check,
  .cmp-chain__check path,
  .cmp-chain__stage::before,
  .cmp-chain__stage::after {
    transition: none !important;
  }

  .cmp-feature,
  .cmp-plan,
  .cmp-article,
  .cmp-chat__window,
  .cmp-chat--wide {
    transition: none !important;
  }
}