/* Built Logic homepage — page-scoped composition (handoff v3, 11 Sep 2026).
   Loaded after /assets/bl-visual.css, which owns the shared tokens and the
   .bl-diagram / .bl-media / .bl-card / .bl-strip / .bl-reserve / .bl-film
   components. Nothing here restyles a bare element selector and nothing here
   is required for the page to read: every rule is layout or surface.

   Selectors that override homepage-critical.css / homepage-route.css are
   deliberately one level more specific, because the route CSS is inlined at
   the end of <body> on the built homepage and would otherwise win on order. */

/* ------------------------------------------------------------- 1. hero */
/* The shared .bl-hero owns the 45:55 copy/media split (assets/bl-visual.css).
   The container is the shared .bl-wide (1,304px less 32px gutters). The route
   CSS inlined at the end of <body> makes .hp-hero__inner a 50/1fr grid, which
   would cap the media column, so it is reset to a plain block here. The primary
   frame lands around 650px wide at a wide desktop. */

.hp-hero .hp-hero__inner {
  display: block;
  padding-top: clamp(124px, 11vw, 148px);
  padding-bottom: 56px;
}
.hp-hero .hp-hero__copy { padding-top: 0; }
.hp-hero .hp-hero__h1 { font-size: clamp(38px, 4.4vw, 62px); }
.hp-hero .hp-hero__support { max-width: 34em; font-size: 18.5px; }

/* Production view: the staging-only frame is removed at publish time, so the
   hero becomes one readable column instead of leaving an empty track. */
.hp-hero .bl-hero:has(.bl-hero__media:empty) { grid-template-columns: minmax(0, 1fr); }
.hp-hero .bl-hero:has(.bl-hero__media:empty) .bl-hero__media { display: none; }
.hp-hero .bl-hero:has(.bl-hero__media:empty) .bl-hero__copy { max-width: 46em; }

@media (max-width: 899px) {
  .hp-hero .hp-hero__inner { padding-top: 118px; padding-bottom: 40px; }
  .hp-hero .hp-hero__h1 { font-size: 34px; }
}

/* 2. The capability strip (.hpv3-cap) was removed on 12 Sep 2026 (copy handoff
   v5 section 3) together with its own padding. The technology banner owns the
   spacing under the hero now, so nothing replaces this block. */

/* 3. The client-feedback reservation was removed on 11 Sep 2026 (copy handoff
   v4, section 4) and its space collapsed with it. */

/* --------------------------------- 4. outcomes beside the system graphic */

.hpv3-outcomes { background: #FAFAF8; padding: clamp(56px, 7vw, 88px) 0; border-bottom: 1px solid #E5E5E2; }
.hpv3-outcomes__inner { max-width: 1320px; margin: 0 auto; padding: 0 28px; }
.hpv3-outcomes__h2 { margin: 0; font-size: clamp(30px, 3.2vw, 44px); }
.hpv3-outcomes__grid {
  margin-top: clamp(30px, 3.4vw, 46px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(28px, 3vw, 44px);
  align-items: start;
}
.hpv3-outcomes__col { display: grid; gap: 20px; align-content: start; }
.hpv3-outcome { border-top: 1px solid #232A31; padding: 18px 0 0; }
/* Side by side, the three outcomes span the workflow panel: the first rule sits
   on the panel's top edge and the last paragraph ends on its bottom edge. */
@media (min-width: 1024px) {
  .hpv3-outcomes__grid { align-items: stretch; }
  .hpv3-outcomes__col { align-content: space-between; }
}
.hpv3-outcome h3 {
  margin: 0;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-weight: 600;
  font-size: 19px;
  line-height: 1.25;
  color: #232A31;
}
.hpv3-outcome p { margin: 10px 0 0; font-size: 16.5px; line-height: 1.6; color: #586069; }

/* One workflow composition on the flat slate panel (visual handoff v4 §1).
   The shared .bl-diagram--slate owns the surface, the node cards and the
   motion; this file only lays the four nodes out and decides where each
   node's supporting detail rows are shown. */

.hpv4-sys { margin: 0; }
/* Give each stage card presence on the slate without stretching it to the
   height of the longest label. The three document inputs are deliberately the
   smallest surfaces and the preparation stage the largest, so scale carries
   the hierarchy instead of four identical boxes. */
.hpv4-sys .hpv4-flow > li.bl-node { min-height: 0; padding: 18px; }
.hpv4-sys .hpv4-flow__prepare { padding: 24px 22px; min-height: 118px; }
.hpv4-sys .bl-node--doc { padding: 14px 16px; }
.hpv4-flow {
  list-style: none;
  margin: clamp(24px, 2.6vw, 34px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) minmax(0, 1.05fr) minmax(0, 1.15fr);
  column-gap: 34px;
  row-gap: 0;
  /* Each stage is the size of its own content and sits on the centre line of
     the input stack, so scale reads as hierarchy rather than as stretch. */
  align-items: center;
}
/* The three inputs are one column: a labelled lane of document surfaces that
   gathers into the preparation stage. */
.hpv4-flow__sources { display: grid; gap: 10px; align-content: start; }
.hpv4-flow__lane { margin: 0 0 2px; }
.hpv4-flow__gate { margin: 0 0 8px; font-size: 10px; letter-spacing: .12em; color: #586069 !important; }
.hpv4-flow__prepare .bl-node__label { font-size: 17px; }

/* Light Blue connector between the stages: a chevron on the dark ground, in
   the gap rather than over a card. The return path below carries no chevron. */
.hpv4-flow > li { position: relative; }
.hpv4-flow > li + li:not(.hpv4-return)::before {
  content: "";
  position: absolute;
  left: -22px;
  top: calc(50% - 5px);
  width: 9px;
  height: 9px;
  border-top: 1.5px solid #AFC4DD;
  border-right: 1.5px solid #AFC4DD;
  transform: rotate(45deg);
}

/* The labelled exception return: out of the check, back along the row and up
   into the sources it came from. Orthogonal segments only, and the label sits
   clear of the line rather than on it. */
.hpv4-return {
  grid-column: 1 / 4;
  grid-row: 2;
  /* The horizontal segment sits in this padding, 26px clear of the stage cards
     above it; the two risers occupy the same band. */
  padding-top: 26px;
  display: flex;
  flex-direction: column-reverse;
}
.hpv4-return__label { margin: 0; }
.hpv4-return__line {
  display: block;
  height: 0;
  /* 9px clear of the label below, so the label never sits on the path. */
  margin-bottom: 9px;
  border-top: 1.5px dashed rgba(175,196,221,.55);
}
/* Left riser, up into the sources column, with its arrowhead. The risers hang
   off the row rather than off the line, so the draw animation below can clip
   the horizontal segment without clipping them. */
.hpv4-return::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 26px;
  border-left: 1.5px dashed rgba(175,196,221,.55);
}
.hpv4-return__head {
  position: absolute;
  left: -4px;
  top: -1px;
  width: 8px;
  height: 8px;
  border-left: 1.5px solid #AFC4DD;
  border-top: 1.5px solid #AFC4DD;
  transform: rotate(45deg);
}
/* Right riser, down out of the check stage. */
.hpv4-return::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  height: 26px;
  border-right: 1.5px dashed rgba(175,196,221,.55);
}
/* The one drawn segment of the entry sequence: the return path traces back
   from the check towards the sources, once, in step with the node stagger. */
@keyframes hpv4-return-draw {
  from { clip-path: inset(0 0 0 100%); }
  to { clip-path: inset(0); }
}
[data-bl-animate].is-armed .hpv4-return__line { clip-path: inset(0 0 0 100%); }
[data-bl-animate].is-armed.is-live .hpv4-return__line {
  animation: hpv4-return-draw 760ms var(--bl-ease) both;
  animation-delay: calc(var(--i, 0) * 120ms);
}
[data-bl-animate].is-settled .hpv4-return__line { clip-path: none !important; animation: none !important; }

/* On the page each node shows its name. The expanded view is the same figure
   with the supporting rows revealed. */
.hpv4-sys .bl-node__detail { display: none; }
.hp8-dialog .bl-node__detail {
  display: block;
  list-style: none;
  margin: 14px 0 0;
  padding: 14px 0 0;
  border-top: 1px solid rgba(35,42,49,.14);
}
.hp8-dialog .bl-node__detail li {
  font-size: 14.5px;
  line-height: 1.5;
  color: #586069;
}
.hp8-dialog .bl-node__detail li + li { margin-top: 8px; }

.hpv4-sys__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 18px;
  margin-top: clamp(22px, 2.4vw, 30px);
  padding-top: 18px;
  border-top: 1px solid rgba(250,250,248,.14);
}

/* The expanded view inside the dialog: larger type and room to read the rows,
   same subject, same node names, same theme. */
.hp8-dialog .hp8-dialog__body { padding: clamp(28px, 3vw, 44px); }
.hp8-dialog .bl-diagram--expanded { margin: 0; }
.hp8-dialog .hpv4-flow { column-gap: 40px; }
.hp8-dialog .bl-node__label { font-size: 18px; }

@media (max-width: 1099px) {
  .hpv4-flow,
  .hp8-dialog .hpv4-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; row-gap: 24px; }
  .hpv4-flow > li + li:not(.hpv4-return)::before { display: none; }
  /* Two stages per row: the return path runs under the whole block instead of
     under the first three columns. */
  .hpv4-return { grid-column: 1 / -1; grid-row: auto; }
}
@media (max-width: 639px) {
  .hpv4-flow,
  .hp8-dialog .hpv4-flow { grid-template-columns: minmax(0, 1fr); column-gap: 0; row-gap: 16px; }
}

@media (max-width: 1023px) {
  .hpv3-outcomes__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 899px) {
  .hpv3-outcomes { padding: clamp(38px, 8vw, 56px) 0; }
  .hpv3-outcomes__inner { padding: 0 24px; }
}

/* ----------------------------------------------------- 5. starting points */

.hpv3-start { background: #FAFAF8; padding: clamp(56px, 7vw, 88px) 0; }
.hpv3-start__inner { max-width: 1320px; margin: 0 auto; padding: 0 28px; }
.hpv3-start__h2 { margin: 0; font-size: clamp(30px, 3.2vw, 44px); }
.hpv3-start__lead { margin: 18px 0 0; max-width: 62ch; font-size: 17.5px; line-height: 1.6; color: #586069; }
.hpv3-start__cred { margin: 10px 0 0; font-size: 17.5px; line-height: 1.6; }
.hpv3-start__cred a { color: #1B3A5B; font-weight: 600; text-decoration: underline; text-decoration-color: #AFC4DD; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine){.hpv3-start__cred a:hover{ color: #17314D; text-decoration-color: #1B3A5B; }}
.hpv3-start__grid {
  margin-top: clamp(28px, 3.2vw, 44px);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}
@media (min-width: 900px) and (max-width: 1199px) {
  .hpv3-start__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.hpv3-offer { display: flex; flex-direction: column; padding: 28px; }
.hpv3-offer__icon { color: #1B3A5B; margin-bottom: 18px; }
.hpv3-offer h3 {
  margin: 0;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  color: #232A31;
}
.hpv3-offer p { margin: 12px 0 0; font-size: 16.5px; line-height: 1.6; color: #586069; }
.hpv3-offer__link {
  margin-top: auto;
  padding-top: 20px;
  align-self: flex-start;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #1B3A5B;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: #AFC4DD;
}
@media (hover: hover) and (pointer: fine){.hpv3-offer__link:hover{ color: #17314D; text-decoration-color: #1B3A5B; }}

/* Partnership ribbon: the shared flat-slate .bl-ribbon, spaced under the three
   starting-point cards. The blue gradient panel was removed on 11 Sep 2026, and
   v5 decision 4 gives the shared .bl-ribbon its own padding and its
   heading/action grid, so this file only spaces it under the cards. */
.hpv4-partner { margin-top: 28px; }

@media (max-width: 899px) {
  .hpv3-start { padding: clamp(38px, 8vw, 56px) 0; }
  .hpv3-start__inner { padding: 0 24px; }
  .hpv3-start__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* ------------------------------------------------------------- 6. Map */

.hpv3-map { background: #FAFAF8; padding: clamp(56px, 7vw, 88px) 0; border-top: 1px solid #E5E5E2; }
.hpv3-map__inner {
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 28px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(32px, 4vw, 64px);
  align-items: center;
}
.hpv3-map__h2 { margin: 0; font-size: clamp(30px, 3.2vw, 44px); }
.hpv3-map__steps { margin: 18px 0 0; padding-left: 1.3em; max-width: 52ch; display: grid; gap: 12px; font-size: 17.5px; line-height: 1.6; color: #586069; }
.hpv3-map__steps strong { color: #232A31; font-weight: 600; }
.hpv3-map__body { margin: 18px 0 0; max-width: 46ch; font-size: 17.5px; line-height: 1.6; color: #586069; }
.hpv3-map__note {
  margin: 22px 0 0;
  max-width: 52ch;
  font-size: 13.5px;
  line-height: 1.5;
  color: #586069;
}
/* True A4 proportions: page one large, pages two and three as thumbnails. */
.hpv3-pages { display: grid; grid-template-columns: minmax(0, 69fr) minmax(0, 31fr); gap: 18px; align-items: start; }
.hpv3-pages__thumbs { display: grid; gap: 18px; }
.hpv3-page { margin: 0; }
.hpv3-page__frame { overflow: hidden; }
.hpv3-page img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 210 / 297;
  object-fit: contain;
  background: #FAFAF8;
  border-radius: 8px;
}
.hpv3-page--lead img { border-radius: 12px; }
.hpv3-page figcaption {
  margin-top: 8px;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: #586069;
}
@media (max-width: 899px) {
  .hpv3-map { padding: clamp(38px, 8vw, 56px) 0; }
  .hpv3-map__inner { grid-template-columns: minmax(0, 1fr); padding: 0 24px; }
}

/* ------------------------------------------------ 6b. AI Systems Score */
/* Same band rhythm and type scale as the Map section above it. */

.hpv3-score { background: #FAFAF8; padding: clamp(48px, 6vw, 88px) 28px; }
.hpv3-score__card {
  position: relative; overflow: hidden;
  max-width: 1264px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(260px, 0.8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: center;
  padding: clamp(36px, 5vw, 72px);
  background: #232A31; /* flat Charcoal like the hero panel (Kristian, 26 Sep: no gradient next to solid boxes) */
  color: #FAFAF8; border-radius: 20px;
}
.hpv3-score__card::after {
  content: ''; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%;
  border: 1px solid rgba(175, 196, 221, 0.14); pointer-events: none;
}
.hpv3-score__visual { display: flex; flex-direction: column; align-items: center; gap: 28px; }
.hpv3-score__ring { position: relative; width: min(260px, 60vw); aspect-ratio: 1; }
.hpv3-score__ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.hpv3-score__seg { fill: none; stroke: rgba(175, 196, 221, 0.18); stroke-width: 12; transition: stroke 380ms ease; }
.hpv3-score.is-in .hpv3-score__seg { stroke: #AFC4DD; }
.hpv3-score.is-in .hpv3-score__seg:nth-child(4) { stroke: rgba(175, 196, 221, 0.18); }
.hpv3-score__seg:nth-child(2) { transition-delay: 140ms; } .hpv3-score__seg:nth-child(3) { transition-delay: 280ms; }
.hpv3-score__seg:nth-child(4) { transition-delay: 420ms; } .hpv3-score__seg:nth-child(5) { transition-delay: 560ms; }
.hpv3-score__ring-label { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.hpv3-score__ring-q { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: clamp(56px, 6vw, 80px); line-height: 1; color: #FAFAF8; }
.hpv3-score__ring-of { margin-top: 8px; font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 13px; letter-spacing: 0; text-transform: none; color: #AFC4DD; font-weight: 600 }
.hpv3-score__areas { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 16px; max-width: 320px;
  font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 13px; letter-spacing: 0; text-transform: none; color: rgba(250, 250, 248, 0.62); font-weight: 600 }
.hpv3-score__areas li { display: inline-flex; align-items: center; gap: 7px; }
.hpv3-score__dot { width: 6px; height: 6px; border-radius: 50%; background: #AFC4DD; opacity: .9; }
.hpv3-score__copy { position: relative; z-index: 1; }
.hpv3-score__h2 { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 400; letter-spacing: -0.02em; line-height: 1.06; font-size: clamp(34px, 4vw, 56px); color: #FAFAF8; }
.hpv3-score__h2 em { font-style: italic; color: #AFC4DD; }
.hpv3-score__body { margin: 22px 0 0; max-width: 52ch; font-size: 17.5px; line-height: 1.6; color: rgba(250, 250, 248, 0.78); }
.hpv3-score__facts { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.hpv3-score__facts li { font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 13px; letter-spacing: 0; text-transform: none; color: #FAFAF8;
  border: 1px solid rgba(175, 196, 221, 0.32); border-radius: 999px; padding: 8px 14px; font-weight: 600 }
.hpv3-score__cta { display: inline-flex; align-items: center; gap: 10px; margin-top: 30px; padding: 16px 26px; border-radius: 11px;
  background: transparent; color: #FAFAF8; border: 1px solid rgba(250, 250, 248, 0.5); font-weight: 600; font-size: 16px; text-decoration: none;
  transition: background-color .25s ease, border-color .25s ease, transform .2s ease; }
.hpv3-score__cta span { transition: transform .2s ease; }
@media (hover: hover) and (pointer: fine){.hpv3-score__cta:hover{ background: rgba(250, 250, 248, 0.08); border-color: #FAFAF8; color: #FAFAF8; transform: translateY(-1px); }}
@media (hover: hover) and (pointer: fine){.hpv3-score__cta:hover span{ transform: translateX(4px); }}
.hpv3-score__cta:focus-visible { outline: 2px solid #AFC4DD; outline-offset: 3px; }
@media (max-width: 899px) {
  .hpv3-score { padding: clamp(32px, 8vw, 56px) 16px; }
  .hpv3-score__card { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 32px 24px; border-radius: 16px; }
  .hpv3-score__ring { width: 180px; }
  .hpv3-score__visual { order: 2; }
}
@media (prefers-reduced-motion: reduce) {
  .hpv3-score__seg, .hpv3-score__cta, .hpv3-score__cta span { transition: none; }
}

/* -------------------------------------------------- 7. calculator support */

.hpv3-calc { background: #FAFAF8; padding: 0 0 clamp(56px, 7vw, 88px); }
.hpv3-calc__inner { max-width: 1320px; margin: 0 auto; padding: 0 28px; }
.hpv3-calc__card {
  padding: clamp(26px, 3vw, 36px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px 32px;
  align-items: center;
}
.hpv3-calc__h3 {
  margin: 0;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.25;
  color: #232A31;
}
.hpv3-calc__body { margin: 10px 0 0; max-width: 62ch; font-size: 16.5px; line-height: 1.6; color: #586069; }
.hpv3-calc__link {
  flex: 0 0 auto;
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: #1B3A5B;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-color: #AFC4DD;
  white-space: nowrap;
}
@media (hover: hover) and (pointer: fine){.hpv3-calc__link:hover{ color: #17314D; text-decoration-color: #1B3A5B; }}
@media (max-width: 899px) {
  .hpv3-calc { padding: 0 0 clamp(38px, 8vw, 56px); }
  .hpv3-calc__inner { padding: 0 24px; }
  .hpv3-calc__card { grid-template-columns: minmax(0, 1fr); }
  .hpv3-calc__link { white-space: normal; }
}

/* --------------------------------------- 8. FAQ beside the daily series */
/* The form needs room for first name, work email and the button, so the
   newsletter column is the wider of the two and the fields stop wrapping
   into a three-up row before there is space for it. */

.hp8-later .hp8-later__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); column-gap: clamp(32px, 4vw, 64px); }
.hp8-later .hp8-course__row { gap: 16px; }
@media (max-width: 1100px) {
  .hp8-later .hp8-later__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ==================================================================
   Homepage refresh (23 Sep 2026, Kristian: brighter, friendlier, one
   flowing journey). Soft Light Blue tonal fields replace the hard section rules;
   cards lift and icons sit on tinted tiles. Six brand colours only.
   ================================================================== */

.hpv3-score__eyebrow { margin: 0 0 18px; display: flex; align-items: center; gap: 12px; font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 13px; letter-spacing: 0; text-transform: none; color: #AFC4DD; font-weight: 600 }
.hpv3-score__eyebrow::before { content: ''; width: 26px; height: 1px; background: #AFC4DD; }

/* Hero: a Light Blue field and a halftone dot field behind the film */
.hp-hero { position: relative; overflow: hidden; }
.hp-hero::before { content: ''; position: absolute; z-index: 0; right: -6vw; top: 8%; width: min(46vw, 640px); aspect-ratio: 1; border-radius: 50%; background: rgba(175, 196, 221, 0.28); pointer-events: none; }
.hp-hero::after { content: ''; position: absolute; z-index: 0; right: 3vw; bottom: 6%; width: min(30vw, 420px); height: min(22vw, 300px); border-radius: 28px; background-image: radial-gradient(#1B3A5B 1.3px, transparent 1.6px); background-size: 16px 16px; opacity: .38; pointer-events: none; }
.hp-hero > * { position: relative; z-index: 1; }

/* Tools strip: soft card instead of two hard rules */
.hp-tools { border: 0 !important; }

/* 01 Where AI helps: each outcome is a friendly card with its own icon */
.hpv3-outcomes { border-bottom: 0; }
.hpv3-outcome { border-top: 0; position: relative; padding: 20px 22px 20px 78px; border-radius: 16px; background: rgba(175, 196, 221, 0.16); transition: background-color .25s ease, transform .25s ease; }
@media (hover: hover) and (pointer: fine){.hpv3-outcome:hover{ background: rgba(175, 196, 221, 0.28); transform: translateX(4px); }}
.hpv3-outcome__icon { position: absolute; left: 20px; top: 20px; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; background: #1B3A5B; color: #FAFAF8; }
.hpv3-outcome__icon svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* 02 Where to start: a tinted sheet so the section reads as its own step */
.hpv3-start { background: rgba(175, 196, 221, 0.18); margin: 0 clamp(8px, 1.4vw, 20px); border-radius: clamp(20px, 3vw, 36px); }
.hpv3-offer { background: #FAFAF8; border: 1px solid rgba(35, 42, 49, 0.08); border-radius: 18px; position: relative; overflow: hidden; transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, border-color .3s ease; }
.hpv3-offer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: #1B3A5B; transform: scaleX(0); transform-origin: left; transition: transform .35s cubic-bezier(.2,.8,.2,1); }
@media (hover: hover) and (pointer: fine){.hpv3-offer:hover{ transform: translateY(-6px); border-color: rgba(27, 58, 91, 0.18); }}
@media (hover: hover) and (pointer: fine){.hpv3-offer:hover::before{ transform: scaleX(1); }}
.hpv3-offer__icon { box-sizing: content-box; width: 24px; height: 24px; padding: 12px; border-radius: 14px; background: rgba(175, 196, 221, 0.42); color: #1B3A5B; }
.hpv3-offer__link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 22px; text-decoration: none; }
.hpv3-offer__link::after { content: '\2192'; transition: transform .2s ease; }
@media (hover: hover) and (pointer: fine){.hpv3-offer:hover .hpv3-offer__link::after{ transform: translateX(4px); }}
/* 29 Sep 2026 (Kristian): the service name sits at the top of each card beside its
   icon, so the reader sees which service answers which outcome before reading.
   The whole card is the link. */
.hpv3-offer__link { order: -1; margin: 0 0 22px; padding: 0; gap: 14px; font-size: 17px; text-decoration: none; color: #1B3A5B; }
.hpv3-offer__link .hpv3-offer__icon { margin: 0; flex: none; }
.hpv3-offer__link::after { content: none; }
.hpv3-offer__link::before { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.hpv3-offer__link span { text-decoration: underline; text-decoration-color: #AFC4DD; text-underline-offset: 5px; }
@media (hover: hover) and (pointer: fine){.hpv3-offer:hover .hpv3-offer__link span{ text-decoration-color: #1B3A5B; }}
.hpv3-offer__link:focus-visible { outline: none; }
.hpv3-offer:focus-within { outline: 2px solid #1B3A5B; outline-offset: 3px; }

/* The partnership ribbon: flat Charcoal like every other dark surface (the
   signal gradient is reserved for the AI Systems Score), with connected
   Now, Next, Later steps */
.hpv4-partner .bl-ribbon__marks { gap: 8px; align-items: center; }
.hpv4-partner .bl-ribbon__mark { padding: 7px 12px; border: 1px solid rgba(175, 196, 221, 0.4); border-radius: 999px; }
.hpv4-partner .bl-ribbon__mark:first-child { background: rgba(175, 196, 221, 0.16); border-color: #AFC4DD; color: #FAFAF8; }
.hpv4-partner .bl-ribbon__mark + .bl-ribbon__mark { margin-left: 22px; position: relative; }
.hpv4-partner .bl-ribbon__mark + .bl-ribbon__mark::after { content: ''; position: absolute; left: -23px; top: 50%; width: 16px; height: 1px; background: rgba(175, 196, 221, 0.6); }
.hpv4-partner .bl-ribbon__action a { display: inline-flex; align-items: center; gap: 10px; padding: 14px 22px; border-radius: 11px; background: #FAFAF8; color: #232A31; text-decoration: none; font-weight: 600; transition: background-color .25s ease, transform .2s ease; }
@media (hover: hover) and (pointer: fine){.hpv4-partner .bl-ribbon__action a:hover{ background: #AFC4DD; transform: translateY(-2px); }}

/* 03 Your Opportunity Map: no hard rule; the Map pages float on a soft field */
.hpv3-map { border-top: 0; position: relative; }
/* The tonal field now sits on the page flipper's own column, so the page is
   always inside it (26 Sep 2026). */
.hpv3-map > * { position: relative; }

/* 05 Your own figures: a tinted card with a button-weight link */

/* Daily series and FAQ: softer cards */
.hp8-later .hp8-faq { background: #FAFAF8; border-radius: 14px; }

@media (max-width: 899px) {
  .hp-hero::before { width: 90vw; right: -40vw; top: auto; bottom: -10%; }
  .hp-hero::after { display: none; }
  .hpv3-outcome { padding: 18px 18px 18px 72px; }
}
@media (prefers-reduced-motion: reduce) {
  .hpv3-outcome, .hpv3-offer, .hpv3-offer::before, .hpv3-offer__link::after, .hpv4-partner .bl-ribbon__action a, .hpv3-calc__link { transition: none; }
  @media (hover: hover) and (pointer: fine){.hpv3-outcome:hover,.hpv3-offer:hover{ transform: none; }}
}

/* ---- Homepage polish (impeccable critique, 23 Sep 2026) ---- */

/* Fewer shouting labels: the tools caption and Score chips in sentence case */
body .hp-tools .hp-tools__heading { text-transform: none; letter-spacing: 0; font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 15px; color: #586069; }
.hpv3-score__facts li { text-transform: none; letter-spacing: 0; font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 14px; }

/* Each service card shows what the client gets, so the three stop looking alike */
.hpv3-offer__art { list-style: none; margin: 22px 0 0; padding: 0; }
.hpv3-offer__art--chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hpv3-offer__art--chips li { padding: 6px 12px; border-radius: 999px; background: rgba(175, 196, 221, 0.3); color: #1B3A5B; font-size: 14px; font-weight: 600; }
.hpv3-offer__art--flow { display: flex; align-items: center; gap: 0; }
.hpv3-offer__art--flow li { padding: 7px 11px; border: 1px solid rgba(27, 58, 91, 0.3); border-radius: 8px; font-size: 13.5px; font-weight: 600; color: #1B3A5B; background: #FAFAF8; white-space: nowrap; }
.hpv3-offer__art--flow li:last-child { background: #1B3A5B; color: #FAFAF8; border-color: #1B3A5B; }
.hpv3-offer__art--flow li + li { margin-left: 22px; position: relative; }
.hpv3-offer__art--flow li + li::before { content: ''; position: absolute; left: -18px; top: 50%; width: 14px; height: 1.5px; background: #1B3A5B; }
.hpv3-offer__art--doc { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid rgba(35, 42, 49, 0.14); border-radius: 10px; background: #FAFAF8; box-shadow: 6px 6px 0 rgba(175, 196, 221, 0.45); }
.hpv3-offer__art--doc span { display: flex; align-items: center; gap: 10px; font-size: 13.5px; font-weight: 600; color: #232A31; }
.hpv3-offer__art--doc span::before { content: ''; width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid #1B3A5B; background: rgba(175, 196, 221, 0.35); flex: 0 0 auto; }

@media (max-width: 600px) {
  .hpv4-partner .bl-ribbon__mark + .bl-ribbon__mark { margin-left: 0; }
  .hpv4-partner .bl-ribbon__mark + .bl-ribbon__mark::after { display: none; }
}

/* Equal service cards: same height, the "what you get" art in a fixed band, links aligned */
.hpv3-start__grid { align-items: stretch; }
.hpv3-offer { height: 100%; }
.hpv3-offer__art { min-height: 132px; align-content: flex-start; }
.hpv3-offer__art--flow { align-items: flex-start; }
.hpv3-offer__art--doc { min-height: 0; height: 132px; box-sizing: border-box; align-content: center; }
@media (max-width: 899px) { .hpv3-offer__art, .hpv3-offer__art--doc { min-height: 0; height: auto; } }

/* Journey bridges: each section hands the reader to the next step down the page */
.hp-bridge { margin: 26px 0 0; font-size: 17px; line-height: 1.5; color: #232A31; }
.hp-bridge a { color: #1B3A5B; font-weight: 600; text-decoration: underline; text-decoration-color: #AFC4DD; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine){.hp-bridge a:hover{ text-decoration-color: #1B3A5B; }}
/* One matching panel for every card's "what you get" art, so the three cards line up */
.hpv3-offer__art, .hpv3-offer__art--doc { box-sizing: border-box; width: 100%; height: 132px; min-height: 0; margin: 22px 0 0; padding: 14px 16px; border: 1px solid rgba(35, 42, 49, 0.14); border-radius: 10px; background: #FAFAF8; box-shadow: 6px 6px 0 rgba(175, 196, 221, 0.45); }
.hpv3-offer__art--chips { align-content: center; }
.hpv3-offer__art--flow { justify-content: center; align-items: center; }
.hpv3-offer__link { margin-top: auto; }
@media (max-width: 899px) { .hpv3-offer__art, .hpv3-offer__art--doc { height: auto; min-height: 96px; } }

/* ROI calculator section: copy beside a drawn slice of the calculator itself (no figures) */
body .hpv3-calc__card { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(28px, 4vw, 56px); border-radius: clamp(20px, 3vw, 32px); background: rgba(175, 196, 221, 0.2); border: 0; }
.hpv3-calc__eyebrow { margin: 0 0 14px; font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 13px; letter-spacing: 0; text-transform: none; color: #1B3A5B; font-weight: 600 }
.hpv3-calc__h2 { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 400; letter-spacing: -0.02em; line-height: 1.08; font-size: clamp(30px, 3.4vw, 46px); color: #232A31; }
.hpv3-calc__h2 em { font-style: italic; color: #1B3A5B; }
body .hpv3-calc__body { margin: 18px 0 0; max-width: 46ch; font-size: 17px; line-height: 1.6; color: #586069; }
body .hpv3-calc__link { display: inline-flex; align-items: center; gap: 10px; margin-top: 28px; padding: 15px 24px; border-radius: 11px; background: #232A31; color: #FAFAF8; font-weight: 600; font-size: 16px; text-decoration: none; white-space: nowrap; transition: background-color .25s ease, transform .2s ease; }
@media (hover: hover) and (pointer: fine){body .hpv3-calc__link:hover{ background: #1B3A5B; color: #FAFAF8; transform: translateY(-2px); }}
body .hpv3-calc__link span { transition: transform .2s ease; }
@media (hover: hover) and (pointer: fine){body .hpv3-calc__link:hover span{ transform: translateX(4px); }}
.hpv3-calc__tool { display: grid; gap: 22px; padding: clamp(24px, 3vw, 36px); border-radius: 18px; background: #FAFAF8; border: 1px solid rgba(35, 42, 49, 0.08); }
.hpv3-calc__slider { display: grid; gap: 10px; }
.hpv3-calc__label { font-size: 14px; font-weight: 600; color: #232A31; }
.hpv3-calc__track { position: relative; height: 6px; border-radius: 999px; background: #E5E5E2; }
.hpv3-calc__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 999px; background: #1B3A5B; transition: width 900ms cubic-bezier(.2,.8,.2,1); }
.hpv3-calc__fill::after { content: ''; position: absolute; right: -9px; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; background: #FAFAF8; border: 2px solid #1B3A5B; box-shadow: 0 2px 6px rgba(27, 58, 91, 0.25); }
.hpv3-calc.is-in .hpv3-calc__slider:nth-child(1) .hpv3-calc__fill { width: 68%; }
.hpv3-calc.is-in .hpv3-calc__slider:nth-child(2) .hpv3-calc__fill { width: 44%; transition-delay: 120ms; }
.hpv3-calc.is-in .hpv3-calc__slider:nth-child(3) .hpv3-calc__fill { width: 56%; transition-delay: 240ms; }
.hpv3-calc__result { display: grid; gap: 10px; padding-top: 20px; border-top: 1px solid #E5E5E2; }
.hpv3-calc__range { position: relative; height: 14px; border-radius: 999px; background: #E5E5E2; }
.hpv3-calc__band { position: absolute; top: 0; bottom: 0; left: 34%; width: 0; border-radius: 999px; background: #AFC4DD; border: 2px solid #1B3A5B; transition: width 900ms cubic-bezier(.2,.8,.2,1) 380ms; }
.hpv3-calc.is-in .hpv3-calc__band { width: 38%; }
.hpv3-calc__note { font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 13px; letter-spacing: 0; text-transform: none; color: #586069; font-weight: 600 }
.hp-hero__call { margin-top: 18px; }
@media (max-width: 899px) { body .hpv3-calc__card { grid-template-columns: minmax(0, 1fr); } }
@media (prefers-reduced-motion: reduce) { .hpv3-calc__fill, .hpv3-calc__band { transition: none; } }

/* Touch screens (24 Sep 2026, Emil Kowalski's motion rules): a tap leaves
   :hover stuck on, so the lifts and nudges above would stay raised after a
   tap. Hover motion runs only on a real mouse or trackpad. */
@media (hover: none), (pointer: coarse) {
  @media (hover: hover) and (pointer: fine){html body .hero-btn--primary:hover,html body .hero-btn--ghost:hover,html body .hero-btn--primary:hover svg,html body .hero-btn--ghost:hover svg,html body .hpv3-score__cta:hover,html body .hpv3-score__cta:hover span,html body .hpv3-outcome:hover,html body .hpv3-offer:hover,html body .hpv3-offer:hover .hpv3-offer__link::after,html body .hpv4-partner .bl-ribbon__action a:hover,html body .hpv3-calc__link:hover,html body .hpv3-calc__link:hover span{ transform: none; }}
  @media (hover: hover) and (pointer: fine){html body .hpv3-offer:hover::before{ transform: scaleX(0); }}
  @media (hover: hover) and (pointer: fine){html body .hpv3-offer:hover{ box-shadow: none; }}
}

/* ------------------------------------------ pain-led homepage (26 Sep 2026)
   Hero runs full width with no video. Pain cards follow the "Which situation
   is yours?" pattern; the origin band carries the founder's figures. */
.hp-hero--full .hp-hero__copy { max-width: none; }
.hp-hero--full .hp-hero__h1 { font-size: clamp(40px, 4.6vw, 68px); line-height: 1.06; max-width: none; }
.hp-hero--full .hp-hero__h1-line { display: block; color: #1B3A5B; }
.hp-hero--full .hp-hero__support { max-width: 50em; font-size: clamp(18px, 1.35vw, 21px); margin-top: 26px; }
.hp-hero--full .hp-hero__inner { padding-bottom: clamp(56px, 7vw, 96px); }
@media (max-width: 899px) {
  .hp-hero--full .hp-hero__h1 { font-size: 38px; }
}

.hp-pain { background: #FAFAF8; padding: clamp(56px, 7vw, 88px) 0; }
.hp-pain__inner { max-width: 1320px; margin: 0 auto; padding: 0 28px; }
.hp-pain__h2 { margin: 0; font-size: clamp(30px, 3.2vw, 44px); }
.hp-pain__lead { margin: 14px 0 0; font-size: 17.5px; line-height: 1.6; color: #586069; }
.hp-pain__grid { list-style: none; margin: 36px 0 0; padding: 0; display: grid; gap: 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hp-pain__card { padding: 26px 26px 28px; }
.hp-pain__card { position: relative; display: flex; flex-direction: column; }
/* Each card names the service it leads to, at the top, with that service's
   icon from "How you get there" (Kristian, 28 Sep 2026). The whole card links. */
.hp-pain__svc { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 14px; font-weight: 600; font-size: 15px; color: #1B3A5B; text-decoration: none; }
.hp-pain__svc::after { content: ""; position: absolute; inset: 0; border-radius: inherit; }
.hp-pain__svc-icon { flex: none; }
.hp-pain__svc span { text-decoration: underline; text-decoration-color: #AFC4DD; text-underline-offset: 4px; }
.hp-pain__svc:focus-visible { outline: 2px solid #1B3A5B; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) {
  .hp-pain__card:hover .hp-pain__svc span { text-decoration-color: #1B3A5B; }
}
.hp-pain__title { margin: 18px 0 0; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 22px; line-height: 1.25; color: #232A31; }
.hp-pain__text { margin: 10px 0 0; font-size: 16.5px; line-height: 1.55; color: #586069; }
.hp-pain__fix { margin-top: 18px; padding: 14px 16px 16px; border-radius: 12px; background: rgba(175, 196, 221, 0.22); }
.hp-pain__fixlabel { margin: 0; font: 600 13.5px/1 'Source Sans 3', system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #1B3A5B; }
.hp-pain__fixtext { margin: 8px 0 0; font-size: 16px; line-height: 1.5; color: #232A31; }
.hp-pain .hp-bridge { margin-top: 32px; }
@media (max-width: 1023px) { .hp-pain__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .hp-pain__inner { padding: 0 24px; } .hp-pain__grid { grid-template-columns: minmax(0, 1fr); } }


/* Hero: copy left, "where the margin goes" diagram on the circle (26 Sep 2026).
   One-time sequence: bars fill as leaks, then each is fixed in turn and the
   profit bar grows. Reduced motion shows the settled end state. */
.hp-hero__grid > * { grid-area: auto; }
.hp-hero__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(32px, 4vw, 64px); align-items: center; }
.hp-hero--full .hp-hero__h1 { font-size: clamp(40px, 4.2vw, 64px); }
.hp-hero--full::after { right: 1vw; bottom: 2%; }
@media (max-width: 1099px) {
  .hp-hero__grid { grid-template-columns: minmax(0, 1fr); }
}

/* Hero: "Every pound" (26 Sep 2026). A huge Fraunces pound sign on a flat
   Charcoal panel, filled with Light Blue, drains as the costs go out, then
   leaks through rework, wasted tender time and money never claimed until 4p
   is left. The leaks are stopped and part of the pound refills. Plays once,
   then settles; markup ships in the settled end state for reduced motion and
   no-JavaScript visitors. Motion: assets/hp-drain.js. */
.hp-drain { position: relative; margin: 0; width: 100%; max-width: 460px; justify-self: end; border-radius: 20px; background: #232A31; color: #FAFAF8; padding: 24px 24px 18px; overflow: hidden; }
/* Label on one line, then the key on its own row so they never overlap.
   While the pound drains the label sits centred; when the key fades in the
   label slides back to the left edge (transform only). */
.hp-drain__top { position: relative; container-type: inline-size; display: grid; gap: 14px; }
.hp-drain__label { justify-self: start; white-space: nowrap; font: 400 26px/1.15 'Fraunces', Georgia, serif; color: #FAFAF8; transform: translateX(0); transition: transform 280ms cubic-bezier(.2,.8,.2,1); }
.hp-drain[data-phase="play"] .hp-drain__label { transform: translateX(calc(50cqw - 50%)); }
.hp-drain__count { font: 400 64px/1 'Fraunces', Georgia, serif; font-variant-numeric: tabular-nums; color: #FAFAF8; }
.hp-drain__meter { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; transition: opacity 300ms cubic-bezier(.2,.8,.2,1); }
.hp-drain__left { font: 600 15px/1 'Source Sans 3', system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #AFC4DD; }
.hp-drain[data-phase="done"] .hp-drain__meter, .hp-drain[data-phase="fix"] .hp-drain__meter { opacity: 0; }
.hpd-time { fill: url(#hpd-hatch); }
.hp-drain__kick { display: block; margin-bottom: 6px; font: italic 400 17px/1.2 'Fraunces', Georgia, serif; letter-spacing: 0; text-transform: none; color: #AFC4DD; }
.hp-drain__kick:empty { display: none; }
.hp-drain__line2 { display: block; }
.hp-drain__line2:empty { display: none; }
.hp-drain__line2.is-in { animation: hpd-line-in 260ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes hpd-line-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.hp-drain__key { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 18px; font: 400 15px/1.2 'Source Sans 3', system-ui, sans-serif; color: #FAFAF8; transition: opacity 300ms cubic-bezier(.2,.8,.2,1); }
.hp-drain__key li { display: flex; align-items: center; gap: 8px; }
.hp-drain[data-phase="play"] .hp-drain__key { opacity: 0; }
.hpd-sw { display: inline-block; width: 16px; height: 16px; border-radius: 4px; }
.hpd-sw--kept { background: #AFC4DD; }
.hpd-sw--back { background: #FAFAF8; }
.hpd-sw { flex: none; overflow: hidden; }
.hp-drain__svg { display: block; width: 100%; height: auto; margin-top: 8px; }
.hpd-glyph { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 165px; letter-spacing: -0.02em; }
.hpd-glyph--empty { fill: none; stroke: rgba(175, 196, 221, 0.55); stroke-width: 1.6px; }
.hpd-back { fill: #FAFAF8; }
.hpd-fill { fill: #AFC4DD; }
.hpd-drops circle { fill: #AFC4DD; opacity: 0; }
.hp-drain__cap { margin: 6px 0 0; min-height: 4.2em; font: 400 23px/1.28 'Fraunces', Georgia, serif; color: #FAFAF8; }
.hp-drain__step { display: inline-block; transition: opacity 220ms cubic-bezier(.2,.8,.2,1), transform 220ms cubic-bezier(.2,.8,.2,1); }
.hp-drain__step.is-out { opacity: 0; transform: translateY(6px); }
.hp-drain__step.is-leak { color: #AFC4DD; }
.hp-drain__foot { display: flex; justify-content: flex-end; align-items: center; margin-top: 10px; }
.hp-drain__replay { font: 600 13px/1 'Source Sans 3', system-ui, sans-serif; color: #AFC4DD; background: none; border: 1px solid rgba(175, 196, 221, 0.4); border-radius: 99px; padding: 7px 14px; cursor: pointer; transition: transform 160ms cubic-bezier(.2,.8,.2,1), opacity 160ms; }
.hp-drain[data-phase="play"] .hp-drain__replay, .hp-drain[data-phase="fix"] .hp-drain__replay { opacity: 0; pointer-events: none; }
.hpd-drops.is-dripping circle { animation: hpd-drip 760ms cubic-bezier(.2,.8,.2,1) both; }
.hpd-drops.is-dripping circle:nth-child(2) { animation-delay: 140ms; }
.hpd-drops.is-dripping circle:nth-child(3) { animation-delay: 280ms; }
@keyframes hpd-drip { 0% { opacity: 0; transform: translateY(-6px); } 25% { opacity: 1; } 100% { opacity: 0; transform: translateY(28px); } }
.hp-drain__replay:focus-visible { outline: 2px solid #AFC4DD; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .hp-drain__label { transition: none; } }
@media (hover: hover) and (pointer: fine) { .hp-drain__replay:hover { transform: translateY(-1px); } }
@media (max-width: 900px) {
  .hp-drain { justify-self: stretch; max-width: 520px; margin-inline: auto; }
}
@media (max-width: 520px) {
  .hp-drain { padding: 20px 18px 16px; }
  .hp-drain__count { font-size: 48px; }
  .hp-drain__label { font-size: clamp(17px, 5.2vw, 22px); }
  .hp-drain__key { font-size: 12.5px; gap: 6px 14px; }
  .hpd-sw { width: 13px; height: 13px; }
  .hp-drain__cap { font-size: 20px; }
}

/* Hero tidy (Kristian, 26 Sep 2026; 27 Sep: smaller headline and pound panel for breathing space: "optimised for readability, not too in
   your face"). Calmer headline, a comfortable line length for the paragraph,
   a slimmer pound panel and a quieter circle behind it. */
.hp-hero--full .hp-hero__h1 { font-size: clamp(34px, 2.8vw, 42px); line-height: 1.1; }
.hp-hero--full .hp-hero__support { max-width: 36em; font-size: clamp(17px, 1.15vw, 19px); line-height: 1.6; margin-top: 22px; }
.hp-hero--full .hp-hero__actions { margin-top: 30px; }
@media (min-width: 1100px) { .hp-hero__grid { grid-template-columns: minmax(0, 560px) minmax(0, 440px); justify-content: center; gap: clamp(64px, 7vw, 120px); } }
.hp-drain { max-width: 440px; padding: 26px 22px 20px; }
.hp-drain__label { font-size: 22px; }
.hp-drain__key { font-size: 14px; }
.hp-drain__cap { font-size: 20px; min-height: 3.9em; margin-top: 14px; }
.hp-hero--full::before { width: min(38vw, 540px); top: 12%; right: max(-6vw, calc(50% - 780px)); background: rgba(175, 196, 221, 0.2); }
.hp-hero--full::after { right: max(1vw, calc(50% - 700px)); }
.hp-hero--full::after { opacity: .22; }
@media (max-width: 899px) {
  .hp-hero--full .hp-hero__h1 { font-size: 30px; }
  .hp-hero--full .hp-hero__support { font-size: 17px; }
}

/* Margin statistics band (26 Sep 2026): flat Charcoal, one sourced figure per
   customer type. Sources link out and carry the INDUSTRY label. */
.hp-stats { background: #232A31; color: #FAFAF8; margin: 0 clamp(8px, 1.4vw, 20px) clamp(40px, 5vw, 64px); border-radius: clamp(20px, 3vw, 36px); padding: clamp(48px, 6vw, 88px) 0; }
.hp-stats__inner { max-width: 1240px; margin: 0 auto; padding: 0 clamp(24px, 4vw, 56px); }
.hp-stats__eyebrow { margin: 0; color: #AFC4DD; }
.hp-stats__h2 { margin: 12px 0 0; max-width: 20em; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.1; color: #FAFAF8; }
.hp-stats__grid { list-style: none; margin: 40px 0 0; padding: 0; display: grid; gap: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(175, 196, 221, 0.22); }
.hp-stats__tile { padding: 28px 28px 26px 0; border-bottom: 1px solid rgba(175, 196, 221, 0.22); display: flex; flex-direction: column; }
.hp-stats__tile:not(:nth-child(3n+1)) { padding-left: 28px; border-left: 1px solid rgba(175, 196, 221, 0.22); }
.hp-stats__type { margin: 0; font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 14px; letter-spacing: 0; text-transform: none; color: #AFC4DD; font-weight: 600 }
.hp-stats__num { margin: 14px 0 0; font-family: 'Fraunces', Georgia, serif; font-size: clamp(44px, 4.4vw, 64px); line-height: 1; color: #FAFAF8; }
.hp-stats__text { margin: 14px 0 0; font-size: 16.5px; line-height: 1.55; color: rgba(250, 250, 248, 0.8); }
.hp-stats__src { margin: auto 0 0; padding-top: 16px; font-family: 'IBM Plex Mono', monospace; font-size: 11px; letter-spacing: .06em; }
.hp-stats__src a { color: rgba(175, 196, 221, 0.85); text-decoration: none; border-bottom: 1px solid rgba(175, 196, 221, 0.35); }
.hp-stats__close { margin: 32px 0 0; font-size: 19px; color: #FAFAF8; }
.hp-stats__close a { color: #AFC4DD; font-weight: 600; text-decoration: none; margin-left: 6px; }
@media (hover: hover) and (pointer: fine) { .hp-stats__src a:hover, .hp-stats__close a:hover { color: #FAFAF8; } }
@media (max-width: 999px) {
  .hp-stats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-stats__tile:not(:nth-child(3n+1)) { padding-left: 0; border-left: 0; }
  .hp-stats__tile:nth-child(2n) { padding-left: 24px; border-left: 1px solid rgba(175, 196, 221, 0.22); }
}
@media (max-width: 639px) {
  .hp-stats__grid { grid-template-columns: minmax(0, 1fr); }
  .hp-stats__tile:nth-child(2n) { padding-left: 0; border-left: 0; }
}


/* Self-Assessment page flipper (26 Sep 2026): the shared .bl-pager on the real
   plan pages, replacing the three-thumbnail preview. No shadow on the frame. */
.hpv3-map__visual { padding: clamp(24px, 3.4vw, 44px); border-radius: 24px; background: rgba(175, 196, 221, 0.2); }
.hpv3-doc { margin: 0 auto; width: min(100%, 420px); }
.hpv3-doc__frame { overflow: hidden; border: 1px solid #E5E5E2; border-radius: 12px; background: #FAFAF8; aspect-ratio: 560 / 792; }
.hpv3-doc__frame img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hpv3-doc__cap { margin-top: 18px; font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 14px; letter-spacing: 0; text-transform: none; color: #586069; font-weight: 600 }

/* Admin cost check (26 Sep 2026): live mini calculator on a Light Blue tonal
   field. Native range inputs in Consulting Blue, no handle shadow. */
.hp-cost { background: #FAFAF8; padding: clamp(40px, 5vw, 64px) 28px clamp(56px, 7vw, 88px); }
.hp-cost__inner { max-width: 1264px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 72px); align-items: center; padding: clamp(32px, 5vw, 64px); border-radius: 20px; background: rgba(175, 196, 221, 0.24); }
.hp-cost__eyebrow { margin: 0; font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 14px; letter-spacing: 0; text-transform: none; color: #1B3A5B; font-weight: 600 }
.hp-cost__h2 { margin: 12px 0 0; font-size: clamp(32px, 3.6vw, 50px); }
.hp-cost__body { margin: 16px 0 0; max-width: 52ch; font-size: 17px; line-height: 1.6; color: #586069; }
.hp-cost__controls { margin-top: 28px; display: grid; gap: 20px; max-width: 520px; }
.hp-cost__field label { display: flex; justify-content: space-between; gap: 16px; font-size: 16px; font-weight: 600; color: #232A31; }
.hp-cost__field output { font-family: 'IBM Plex Mono', ui-monospace, monospace; font-weight: 500; font-variant-numeric: tabular-nums; color: #1B3A5B; }
.hp-cost__field input { width: 100%; margin: 10px 0 0; accent-color: #1B3A5B; cursor: pointer; }
.hp-cost__field input:focus-visible { outline: 2px solid #1B3A5B; outline-offset: 4px; }
.hp-cost__link { display: inline-block; margin-top: 28px; font-weight: 600; font-size: 16.5px; color: #1B3A5B; text-decoration: underline; text-decoration-color: #AFC4DD; text-underline-offset: 4px; }
.hp-cost__link span { display: inline-block; transition: transform 200ms cubic-bezier(.2,.8,.2,1); }
@media (hover: hover) and (pointer: fine) { .hp-cost__link:hover { color: #17314D; text-decoration-color: #1B3A5B; } .hp-cost__link:hover span { transform: translateX(4px); } }
.hp-cost__result { padding: clamp(26px, 3vw, 40px); border-radius: 16px; background: #FAFAF8; }
.hp-cost__label { margin: 0; font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 14px; letter-spacing: 0; text-transform: none; color: #586069; font-weight: 600 }
.hp-cost__num { margin: 10px 0 0; font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: clamp(52px, 6.4vw, 92px); line-height: 1; letter-spacing: -0.02em; color: #1B3A5B; font-variant-numeric: tabular-nums; }
.hp-cost__sub { margin: 12px 0 0; font-size: 16px; color: #586069; }
.hp-cost__week { margin-top: 28px; padding-top: 22px; border-top: 1px solid #E5E5E2; }
.hp-cost__weeklabel, .hp-cost__weekkey { margin: 0; font-size: 15px; color: #586069; }
.hp-cost__next { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid #E5E5E2; font-size: 16px; line-height: 1.5; color: #232A31; }
.hp-cost__next a { font-weight: 600; color: #1B3A5B; text-decoration: underline; text-decoration-color: #AFC4DD; text-underline-offset: 4px; }
.hp-cost__next a:focus-visible { outline: 2px solid #1B3A5B; outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .hp-cost__next a:hover { color: #17314D; text-decoration-color: #1B3A5B; } }
.hp-cost__bar { margin: 10px 0; height: 14px; border-radius: 7px; background: #E5E5E2; overflow: hidden; }
.hp-cost__fill { display: block; height: 100%; background: #1B3A5B; border-radius: 7px; transform-origin: left center; transform: scaleX(0.2); transition: transform 280ms cubic-bezier(.2,.8,.2,1); }
@media (max-width: 899px) {
  .hp-cost { padding: clamp(28px, 7vw, 40px) 16px clamp(38px, 8vw, 56px); }
  .hp-cost__inner { grid-template-columns: minmax(0, 1fr); padding: 28px 20px; border-radius: 16px; }
}
@media (prefers-reduced-motion: reduce) { .hp-cost__fill, .hp-cost__link span { transition: none; } }

/* Subgrid lines up the heading, body, worry box and link across the four cards. */
@supports (grid-template-rows: subgrid) {
  .hpv3-start__grid .hpv3-offer { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
  .hpv3-start__grid .hpv3-offer .hpv3-offer__link { align-self: end; margin-top: 18px; }
}

/* "Can't see your question?" box under the FAQ (Kristian, 26 Sep 2026).
   Submitting opens the chat and sends the question (assets/chat-widget.js). */
.hp8-ask { margin-top: 16px; padding: 18px; border-radius: 14px; background: rgba(175, 196, 221, 0.22); }
.hp8-ask__label { display: block; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: 18px; line-height: 1.3; color: #232A31; }
.hp8-ask__row { display: flex; gap: 8px; margin-top: 12px; }
.hp8-ask__row input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid #AFC4DD; border-radius: 12px; background: #FAFAF8; font: 400 16px/1.2 'Source Sans 3', system-ui, sans-serif; color: #232A31; }
.hp8-ask__row input::placeholder { color: #586069; }
.hp8-ask__row input:focus-visible { outline: 2px solid #1B3A5B; outline-offset: 1px; }
.hp8-ask__btn { flex: none; height: 44px; padding: 0 18px; border: 0; border-radius: 11px; background: #232A31; color: #FAFAF8; font: 600 16px/1 'Source Sans 3', system-ui, sans-serif; cursor: pointer; transition: transform 160ms cubic-bezier(.2,.8,.2,1), background-color 160ms ease, color 160ms ease; }
.hp8-ask__btn:focus-visible { outline: 2px solid #1B3A5B; outline-offset: 2px; }
@media (hover: hover) and (pointer: fine){.hp8-ask__btn:hover{ background: #AFC4DD; color: #232A31; }}
@media (hover: hover) and (pointer: fine) { .hp8-ask__btn:hover { transform: translateY(-1px); } }
.hp8-ask__note { margin: 10px 0 0; font-size: 14px; line-height: 1.5; color: #586069; }

/* Founder line under the hero mission (Kristian, 27 Sep 2026). */
/* Founder quote: moved from the hero to close the pain cards (Kristian, 27 Sep 2026). */
.hp-pain__close { margin: 48px 0 0; padding: clamp(32px, 4vw, 52px) clamp(24px, 4vw, 56px); border-radius: 20px; background: rgba(175, 196, 221, 0.18); text-align: center; }
.hp-pain__founder { margin: 0 auto; max-width: 64rem; }
.hp-pain__founder blockquote { text-wrap: balance; }
.hp-pain__founder blockquote { margin: 0; font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(22px, 2vw, 28px); line-height: 1.35; color: #232A31; }
.hp-pain__founder figcaption { margin-top: 14px; font: 600 14px/1.3 'Source Sans 3', system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #586069; }

/* Review fixes (Astra and Fable, 27 Sep 2026). */

/* Question panel beside the Toolbox Talk card (Kristian, 27 Sep 2026): same
   height as the card, its own heading and line, so it doesn't float alone. */
.hp8-later .hp8-later__grid { align-items: stretch; }
.hp8-later .hp8-later__reads { display: flex; }
.hp8-later .hp8-ask { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; margin: 0; padding: clamp(26px, 3vw, 40px); border-radius: 16px; }
.hp8-later .hp8-ask__label { font-size: clamp(24px, 2.2vw, 30px); line-height: 1.15; }
.hp8-ask__intro { margin: 10px 0 0; font-size: 16.5px; line-height: 1.55; color: #586069; max-width: 30em; }
.hp8-later .hp8-ask__row { margin-top: 20px; }

/* Hero: sector insolvency pop-up (Insolvency Service, Aug 2026). Native popover, works without JS. */
.hp-insolv__open { margin-left: .3em; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: #1B3A5B; text-decoration: underline; text-decoration-color: #AFC4DD; text-underline-offset: 4px; cursor: pointer; }
.hp-insolv__open span { display: inline-block; transition: transform 200ms cubic-bezier(.2,.8,.2,1); }
.hp-insolv__open:focus-visible { outline: 2px solid #1B3A5B; outline-offset: 3px; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) { .hp-insolv__open:hover { text-decoration-color: #1B3A5B; } .hp-insolv__open:hover span { transform: translateX(3px); } }
/* 27 Sep 2026: the headline figure opens the numbers, so no separate link takes up a line. */
.hp-insolv__num { padding: 0; border: 0; background: none; font: inherit; color: inherit; letter-spacing: inherit; cursor: pointer; text-decoration: underline solid; text-decoration-color: #AFC4DD; text-decoration-thickness: 3px; text-underline-offset: .14em; transition: text-decoration-color 200ms cubic-bezier(.2,.8,.2,1); }
.hp-insolv__num:focus-visible { outline: 2px solid #1B3A5B; outline-offset: 3px; border-radius: 4px; }
@media (hover: hover) and (pointer: fine) { .hp-insolv__num:hover { text-decoration-color: #1B3A5B; } }
.hp-insolv { width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; padding: 32px 32px 26px; border: 0; border-radius: 20px; background: #232A31; color: #FAFAF8; opacity: 0; transform: translateY(8px); transition: opacity 220ms cubic-bezier(.2,.8,.2,1), transform 220ms cubic-bezier(.2,.8,.2,1), overlay 220ms allow-discrete, display 220ms allow-discrete; }
.hp-insolv:popover-open { opacity: 1; transform: none; }
@starting-style { .hp-insolv:popover-open { opacity: 0; transform: translateY(8px); } }
.hp-insolv::backdrop { background: rgba(35, 42, 49, 0.45); }
.hp-insolv__close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; border-radius: 22px; background: none; color: #AFC4DD; font-size: 26px; line-height: 1; cursor: pointer; }
.hp-insolv__close:focus-visible { outline: 2px solid #AFC4DD; outline-offset: 2px; }
.hp-insolv__eyebrow { margin: 0; padding-right: 40px; font: 600 13.5px/1.5 'Source Sans 3', system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #AFC4DD; }
.hp-insolv__title { margin: 12px 0 0; font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 28px; line-height: 1.2; color: #FAFAF8; }
.hp-insolv__lead { margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: #AFC4DD; }
.hp-insolv__bars { list-style: none; margin: 24px 0 0; padding: 0; display: grid; gap: 16px; }
.hp-insolv__bars li { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 6px 16px; font-size: 15px; line-height: 1.35; }
.hp-insolv__bars b { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: 20px; }
.hp-insolv__bars li::after { content: ""; grid-column: 1 / -1; height: 8px; border-radius: 4px; background: #AFC4DD; width: var(--w); transform-origin: left; transition: transform 600ms cubic-bezier(.2,.8,.2,1); }
@starting-style { .hp-insolv:popover-open .hp-insolv__bars li::after { transform: scaleX(0); } }
.hp-insolv__src { margin: 22px 0 0; font-size: 13px; line-height: 1.5; color: rgba(250, 250, 248, 0.7); }
.hp-insolv__src a { color: #AFC4DD; text-underline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .hp-insolv, .hp-insolv__bars li::after, .hp-insolv__open span { transition: none; } }

/* £1m panel (Kristian, 27 Sep 2026): text in the panel centred; panel wider so the £1m reads bigger. */
.hp-drain__label { justify-self: center; }
.hp-drain[data-phase="play"] .hp-drain__label { transform: none; }
.hp-drain__key { justify-content: center; }
.hp-drain__cap { text-align: center; }

/* Tool logos under the How you get there cards, as a scrolling strip (Kristian, 27 Sep 2026: the wrapped rows looked messy).
   Pauses on hover and focus; stands still under reduced motion (existing rules). */
.hp-tools--inset { margin: clamp(40px, 5vw, 56px) 0 0; padding: 0; background: none; border: 0; }
.hp-tools--inset .hp-tools__rail { padding-left: 0; }

/* 27 Sep 2026 audit fixes ------------------------------------------------ */
/* Cost sliders: a 44px tall drag area with a 24px thumb, like the ROI calculator's. */
.hp-cost__field input[type="range"] { -webkit-appearance: none; appearance: none; height: 44px; background: transparent; }
.hp-cost__field input[type="range"]::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: rgba(27, 58, 91, 0.2); }
.hp-cost__field input[type="range"]::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(27, 58, 91, 0.2); }
.hp-cost__field input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 24px; height: 24px; margin-top: -9px; border-radius: 50%; border: 2px solid #FAFAF8; background: #1B3A5B; }
.hp-cost__field input[type="range"]::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; border: 2px solid #FAFAF8; background: #1B3A5B; }
/* Replay stays out of the tab order while it is hidden during the animation. */
.hp-drain[data-phase="play"] .hp-drain__replay, .hp-drain[data-phase="fix"] .hp-drain__replay { visibility: hidden; }
/* The smallest phones: the panel label and key wrap instead of being cut off. */
@media (max-width: 340px) {
  .hp-drain__label { white-space: normal; font-size: 17px; text-align: center; }
  .hp-drain__key { font-size: 12px; justify-content: center; }
}
/* "Start Day 1": the same button shape as everywhere else (11px corners). */
.hp8-later__course .hp8-course__submit.hp8-course__submit { border-radius: 11px; padding: 14px 24px; }
.hp8-later__course .hp8-course__field input { border-radius: 12px; }

/* How it works band (Kristian, 28 Sep 2026): the old hero paragraph as its own
   designed section. A Light Blue tonal sheet, the statement on the left and the
   three steps it describes on the right, joined by a rail that draws in once as
   it scrolls into view (settled, fully drawn, under reduced motion). */
.hp-how { margin: clamp(8px, 2vw, 24px) clamp(8px, 1.4vw, 20px) 0; padding: clamp(32px, 3.6vw, 48px) 0; border-radius: clamp(20px, 3vw, 36px); background: rgba(175, 196, 221, 0.26); }
.hp-how__inner { max-width: 1480px; margin: 0 auto; padding: 0 clamp(20px, 3vw, 48px); display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.hp-how__eyebrow { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #586069; }
.hp-how__h2 { margin: 0; font-size: clamp(26px, 2.4vw, 34px); line-height: 1.1; color: #232A31; text-wrap: balance; }
.hp-how__lead { margin: 14px 0 0; font-size: 16px; line-height: 1.55; color: #232A31; }
.hp-how__lead + .hp-how__lead { margin-top: 8px; }
/* The steps: four compact cards in a row, joined by a thin charcoal rail,
   ending in the result. */
.hp-how__steps { position: relative; list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.hp-how__steps::before { content: ""; position: absolute; left: 36px; right: 36px; top: 34px; height: 1px; background: rgba(35, 42, 49, 0.2); }
.hp-how__step { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 16px; background: #FAFAF8; border: 1px solid rgba(35, 42, 49, 0.08); }
.hp-how__num { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #FAFAF8; border: 1.5px solid #232A31; font-family: 'Fraunces', Georgia, serif; font-size: 16px; line-height: 1; color: #232A31; }
.hp-how__step-title { margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: 18px; line-height: 1.2; color: #232A31; text-wrap: balance; }
.hp-how__step-text { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: #586069; }
.hp-how__step--result { background: #232A31; border-color: #232A31; }
.hp-how__step--result .hp-how__num { background: #232A31; border-color: #FAFAF8; color: #FAFAF8; }
.hp-how__step--result .hp-how__step-title { color: #FAFAF8; }
.hp-how__step--result .hp-how__step-text { color: #E5E5E2; }
@media (max-width: 1099px) {
  .hp-how__inner { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699px) {
  .hp-how__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hp-how__steps::before { display: none; }
  .hp-how__step { gap: 10px; padding: 14px; }
  .hp-how__step-title { font-size: 16.5px; }
  .hp-how__step-text { display: none; }
}

/* Case studies (29 Sep 2026): one dark featured case, two light cases stacked
   beside it. Real screenshots replace the drawn previews once cases are real. */
.hp-cases { padding: clamp(56px, 7vw, 96px) 0; }
.hp-cases__inner { max-width: 1480px; margin: 0 auto; padding: 0 clamp(20px, 3vw, 48px); }
.hp-cases__draft { display: inline-block; margin: 0 0 18px; padding: 4px 10px; border-radius: 6px; background: rgba(175, 196, 221, 0.16); color: #586069; font-size: 13px; font-weight: 600; }
.hp-cases__eyebrow { margin: 0 0 10px; font-size: 13px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #586069; }
.hp-cases__h2 { margin: 0; font-size: clamp(30px, 3.2vw, 44px); color: #232A31; }
.hp-cases__grid { margin-top: 32px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; gap: 20px; }
.hp-case { display: flex; flex-direction: column; gap: 12px; padding: clamp(22px, 2.4vw, 32px); border-radius: 24px; background: #FAFAF8; border: 1px solid rgba(35, 42, 49, 0.08); box-shadow: inset 0 3px 0 rgba(175, 196, 221, 0.9); }
.hp-case--feature { grid-row: 1 / span 2; background: #232A31; border-color: #232A31; box-shadow: none; }
.hp-case__who { margin: 0; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #586069; }
.hp-case__result { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: clamp(20px, 1.7vw, 24px); line-height: 1.2; color: #232A31; }
.hp-case__result span { display: block; margin-top: 4px; font-size: clamp(26px, 2.3vw, 34px); color: #1B3A5B; }
.hp-case__basis { margin: 0; font-size: 13.5px; line-height: 1.4; color: #586069; }
.hp-case__text { margin: 0; font-size: 15.5px; line-height: 1.55; color: #586069; }
.hp-case__link { margin-top: auto; align-self: flex-start; font-weight: 600; font-size: 15.5px; color: #232A31; text-decoration: underline; text-decoration-color: #AFC4DD; text-underline-offset: 5px; }
.hp-case--feature .hp-case__who { color: #AFC4DD; }
.hp-case--feature .hp-case__result { color: #FAFAF8; font-size: clamp(22px, 2vw, 28px); }
.hp-case--feature .hp-case__result span { font-size: clamp(38px, 4.2vw, 60px); color: #AFC4DD; }
.hp-case--feature .hp-case__basis, .hp-case--feature .hp-case__text { color: #E5E5E2; }
.hp-case--feature .hp-case__text { font-size: 16.5px; }
.hp-case--feature .hp-case__link { color: #FAFAF8; }
/* Drawn previews standing in for real screenshots. */
.hp-case__shot { margin: 6px 0; padding: 14px; border-radius: 14px; background: #FAFAF8; border: 1px solid #E5E5E2; font-size: 13px; color: #232A31; }
.hp-shot__bar { display: flex; justify-content: space-between; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid #E5E5E2; font-weight: 600; }
.hp-shot__bar span:last-child { font-weight: 400; color: #586069; }
.hp-shot__row { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 8px; padding: 7px 8px; border-radius: 8px; }
.hp-shot__row--head { font-weight: 600; color: #586069; font-size: 12px; }
.hp-shot__row--flag { background: rgba(175, 196, 221, 0.35); outline: 1.5px solid #1B3A5B; outline-offset: -1.5px; }
.hp-shot__row .ok { color: #586069; }
.hp-shot__row .warn { color: #586069; }
.hp-shot__row .bad { color: #586069; font-weight: 600; }
.hp-shot__note { margin: 8px 0 0; font-size: 12px; font-weight: 600; color: #1B3A5B; }
.hp-case__shot--photo { display: grid; place-items: center; min-height: 120px; background: rgba(175, 196, 221, 0.16); color: #586069; font-weight: 600; }
@media (max-width: 899px) {
  .hp-cases__grid { grid-template-columns: minmax(0, 1fr); }
  .hp-case--feature { grid-row: auto; }
  .hp-shot__row { grid-template-columns: 1.4fr 1fr 1fr 1fr; font-size: 12px; }
}

/* Founder note (29 Sep 2026): editorial, on the page background between two
   thin rules. Photo about a quarter of the width, note alongside. */
.hp-founder { margin: 20px 0 0; padding: clamp(24px, 3vw, 40px); border-radius: 18px; background: rgba(175, 196, 221, 0.22); display: grid; grid-template-columns: minmax(200px, 3fr) minmax(0, 9fr); gap: clamp(20px, 3vw, 48px); align-items: center; }
.hp-founder__by { display: flex; align-items: center; gap: 14px; font-size: 14.5px; line-height: 1.35; color: #586069; }
.hp-founder__by img { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid #FAFAF8; }
.hp-founder__by > span { display: flex; flex-direction: column; gap: 2px; }
.hp-founder__by strong { color: #232A31; font-size: 15.5px; font-weight: 600; }
.hp-founder__quote { margin: 0; padding-left: clamp(20px, 3vw, 48px); border-left: 1px solid rgba(35, 42, 49, 0.12); }
.hp-founder__story { margin: 0; font-size: clamp(17px, 1.3vw, 18.5px); line-height: 1.6; color: #232A31; }
.hp-founder__line { margin: 8px 0 0; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: clamp(24px, 2.3vw, 32px); line-height: 1.2; color: #232A31; text-wrap: balance; }
@media (max-width: 899px) {
  .hp-founder { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .hp-founder__quote { padding-left: 0; border-left: 0; }
}
/* The team (30 Sep 2026): folded in from the retired About page, three stops each. */
.hp-team { margin: clamp(40px, 5vw, 72px) clamp(8px, 1.4vw, 20px) 0; padding: clamp(56px, 7vw, 96px) 0; border-radius: 28px; background: #232A31; color: #FAFAF8; }
.hp-team__wrap { max-width: 1320px; margin: 0 auto; padding: 0 28px; }
.hp-team__title { margin: 0; max-width: 16em; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.08; color: #FAFAF8; }
.hp-team__grid { margin-top: clamp(32px, 4vw, 56px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 6vw, 96px); }
.hp-team .rt__who { display: flex; align-items: center; gap: 16px; }
.hp-team .rt__photo { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; object-position: center 20%; }
.hp-team .rt__name { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: clamp(24px, 2.2vw, 30px); line-height: 1.1; color: #FAFAF8; }
.hp-team .rt__creds { margin: 6px 0 0; font: 600 14px/1.4 'Source Sans 3', system-ui, sans-serif; color: #AFC4DD; }
.hp-team .rt__stops { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 24px; }
.hp-team .rt__stop { position: relative; display: grid; grid-template-columns: 16px minmax(0, 1fr); column-gap: 20px; align-items: start; }
.hp-team .rt__stop:not(:last-child)::after { content: ""; position: absolute; left: 7px; top: 22px; bottom: -24px; width: 2px; background: rgba(175, 196, 221, 0.5); }
.hp-team .rt__dot { position: relative; z-index: 1; display: block; width: 16px; height: 16px; margin-top: 3px; border-radius: 50%; border: 2px solid #AFC4DD; background: #232A31; }
.hp-team .rt__stop--peak .rt__dot { background: #AFC4DD; }
.hp-team .rt__when { margin: 0; font: 600 13px/1.3 'Source Sans 3', system-ui, sans-serif; color: rgba(175, 196, 221, 0.85); }
.hp-team .rt__head { margin: 4px 0 0; font-family: 'Fraunces', Georgia, serif; font-size: clamp(19px, 1.6vw, 22px); line-height: 1.3; color: #FAFAF8; }
.hp-team .rt__text { margin: 4px 0 0; font-size: 16px; line-height: 1.55; color: #E5E5E2; }
@media (max-width: 899px) { .hp-team__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639px) { .hp-team__wrap { padding: 0 24px; } .hp-team { border-radius: 22px; margin-inline: 8px; } }
/* Founder line on one line with the two phrases picked out (Kristian, 30 Sep 2026).
   A Light Blue highlighter behind Charcoal text, so it stays readable on the tinted card. */
.hp-founder__line { font-size: clamp(20px, 1.75vw, 25px); text-wrap: nowrap; }
.hp-founder__line mark { padding: 0; background: none; color: #1B3A5B; }
@media (max-width: 1199px) { .hp-founder__line { text-wrap: balance; } }

/* What happens to your business (30 Sep 2026): three promises from the retired About page. */
.hp-promise { padding: clamp(64px, 8vw, 110px) 0 0; }
.hp-promise__wrap { max-width: 1320px; margin: 0 auto; padding: 0 28px; }
.hp-promise__title { margin: 0; max-width: 16em; font-size: clamp(30px, 3.4vw, 48px); line-height: 1.08; color: #232A31; }
.hp-promise__lead { margin: 16px 0 0; max-width: 40em; font-size: 19px; line-height: 1.55; color: #586069; }
.hp-promise__grid { margin: clamp(28px, 3vw, 40px) 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.hp-promise__card { padding: clamp(24px, 2.6vw, 32px); border-radius: 20px; background: #FAFAF8; border: 1px solid #E5E5E2; }
.hp-promise__head { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: clamp(22px, 2vw, 27px); line-height: 1.18; color: #232A31; }
.hp-promise__text { margin: 12px 0 0; font-size: 17px; line-height: 1.55; color: #586069; }
@media (max-width: 899px) { .hp-promise__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 639px) { .hp-promise__wrap { padding: 0 24px; } }
/* The Toolbox Talk sign-up sits straight below "Two questions" on the homepage, so its pointer line is hidden here. */
.bl-funnel__alt { display: none; }

/* How you get there, side by side (30 Sep 2026, competitor review). Four columns
   that share one set of rows, so a buyer reads across: when it fits, what comes
   back, how long, the team's time and the cost. Wide screens use a subgrid so
   the rows line up; narrower screens stack the columns and show each row label. */
.hp-cmp { margin-top: 28px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.hp-cmp__labels { display: none; }
.hp-cmp__col { display: flex; flex-direction: column; border-radius: 18px; border: 1px solid rgba(35, 42, 49, 0.14); background: #FAFAF8; overflow: hidden; }
.hp-cmp__name { margin: 0; padding: 18px 20px; background: #232A31; font: 500 21px/1.2 'Fraunces', Georgia, serif; }
.hp-cmp__name a { color: #FAFAF8; text-decoration: none; }
 .hp-cmp__name a:focus-visible { text-decoration: underline; text-decoration-color: #AFC4DD; text-underline-offset: 4px; }@media (hover: hover) and (pointer: fine){.hp-cmp__name a:hover{ text-decoration: underline; text-decoration-color: #AFC4DD; text-underline-offset: 4px; }}
.hp-cmp__rows { margin: 0; }
.hp-cmp__cell { padding: 14px 20px; }
.hp-cmp__cell + .hp-cmp__cell { border-top: 1px solid rgba(35, 42, 49, 0.1); }
.hp-cmp__cell dt { margin: 0 0 4px; font: 600 13.5px/1.3 'Source Sans 3', system-ui, sans-serif; color: #586069; }
.hp-cmp__cell dd { margin: 0; font-size: 16px; line-height: 1.5; color: #232A31; }
.hp-cmp__cell--cost { background: rgba(175, 196, 221, 0.24); }
.hp-cmp__cell--cost dd { font: 500 19px/1.3 'Fraunces', Georgia, serif; color: #1B3A5B; }
.hp-cmp__more { margin-top: auto; padding: 16px 20px 18px; border-top: 1px solid rgba(35, 42, 49, 0.1); color: #1B3A5B; font-weight: 600; font-size: 15.5px; text-decoration: underline; text-decoration-color: #AFC4DD; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine){.hp-cmp__more:hover{ color: #17314D; text-decoration-color: #1B3A5B; }}
@media (min-width: 700px) and (max-width: 1099px) { .hp-cmp { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) {
  .hp-cmp { grid-template-columns: 150px repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(7, auto); column-gap: 14px; row-gap: 0; }
  .hp-cmp__labels, .hp-cmp__col { display: grid; grid-row: 1 / -1; grid-template-rows: subgrid; }
  .hp-cmp__labels span { padding: 14px 0; font: 600 14.5px/1.35 'Source Sans 3', system-ui, sans-serif; color: #586069; border-top: 1px solid transparent; }
  .hp-cmp__rows { display: contents; }
  .hp-cmp__cell dt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .hp-cmp__more { margin-top: 0; }
}
@media (hover: hover) and (pointer: fine) {
  .hp-cmp__col { transition: border-color 200ms ease; }
  .hp-cmp__col:hover { border-color: rgba(27, 58, 91, 0.45); }
}

/* One line on desktop (Kristian, 30 Sep 2026). */
body .hp-promise__title { max-width: none; }

/* Funnel next-step card: copied from styles.css (deep review, 30 Sep 2026). It sits here, not in homepage-route.css, to keep the
   inlined homepage under its size limit. The production homepage does not load styles.css, so without this the "Two questions
   worth answering first" card rendered unstyled, with a giant black ring. */
/* ---------- Funnel next-step card (partials/funnel-next.html, 23 Sep 2026) ---------- */
.bl-funnel { padding: clamp(40px, 6vw, 72px) 20px; background: #FAFAF8; }
/* Next-step card (Kristian, 26 Sep 2026, designed in Figma): flat Charcoal,
   no gradient, two Off-White tiles for the two first questions. Tiles lift
   with a Consulting Blue top rail on hover and carry no shadow. */
.bl-funnel__card { position: relative; overflow: hidden; max-width: 1080px; margin: 0 auto; padding: clamp(28px, 4.4vw, 56px); background: #232A31; color: #FAFAF8; border-radius: 20px; }
.bl-funnel__card::after { content: ''; position: absolute; right: -140px; top: -150px; width: 360px; height: 360px; border-radius: 50%; border: 1px solid rgba(175, 196, 221, 0.16); pointer-events: none; }
.bl-funnel__eyebrow { position: relative; margin: 0 0 14px; font-family: 'Source Sans 3', system-ui, sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0; text-transform: none; color: #AFC4DD; }
.bl-funnel__h { position: relative; margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 400; letter-spacing: -0.02em; line-height: 1.04; font-size: clamp(32px, 4.2vw, 56px); color: #FAFAF8; }
.bl-funnel__tiles { position: relative; margin-top: clamp(24px, 3vw, 36px); display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.bl-funnel__tile { position: relative; display: flex; flex-direction: column; gap: 12px; padding: 32px; background: #FAFAF8; color: #232A31; border-radius: 18px; text-decoration: none; overflow: hidden; transition: transform 220ms cubic-bezier(.2,.8,.2,1); }
.bl-funnel__tile::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: #1B3A5B; transform: scaleX(0); transform-origin: left; transition: transform 240ms cubic-bezier(.2,.8,.2,1); }
@media (hover: hover) and (pointer: fine) {
  .bl-funnel__tile:hover { transform: translateY(-4px); }
  .bl-funnel__tile:hover::before { transform: scaleX(1); }
  .bl-funnel__tile:hover .bl-funnel__go span { transform: translateX(4px); }
}
.bl-funnel__tile:focus-visible { outline: 2px solid #AFC4DD; outline-offset: 3px; }
.bl-funnel__ring { position: relative; display: block; width: 72px; height: 72px; margin-bottom: 8px; }
.bl-funnel__ring svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.bl-funnel__seg { fill: none; stroke: #E5E5E2; stroke-width: 9; transition: stroke 380ms ease; }
.bl-funnel.is-in .bl-funnel__seg { stroke: #1B3A5B; }
.bl-funnel.is-in .bl-funnel__seg:nth-child(4) { stroke: #E5E5E2; }
.bl-funnel__seg:nth-child(2) { transition-delay: 140ms; } .bl-funnel__seg:nth-child(3) { transition-delay: 280ms; }
.bl-funnel__seg:nth-child(4) { transition-delay: 420ms; } .bl-funnel__seg:nth-child(5) { transition-delay: 560ms; }
.bl-funnel__ring-q { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-family: 'Fraunces', Georgia, serif; font-size: 26px; line-height: 1; color: #232A31; }
.bl-funnel__route { position: relative; display: flex; justify-content: space-between; align-items: center; width: 180px; height: 72px; margin-bottom: 8px; }
.bl-funnel__route::before { content: ''; position: absolute; left: 8px; right: 8px; top: 50%; height: 2px; margin-top: -1px; background: #1B3A5B; transform: scaleX(0.08); transform-origin: left; transition: transform 700ms cubic-bezier(.2,.8,.2,1) 200ms; }
.bl-funnel.is-in .bl-funnel__route::before { transform: none; }
.bl-funnel__route i { position: relative; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #1B3A5B; background: #FAFAF8; box-sizing: border-box; }
.bl-funnel__route i:first-child { background: #1B3A5B; }
.bl-funnel__label { margin-top: 4px; font-family: 'Source Sans 3', system-ui, sans-serif; font-weight: 600; font-size: 13px; letter-spacing: 0; text-transform: none; color: #586069; }
.bl-funnel__title { font-family: 'Fraunces', Georgia, serif; font-weight: 400; font-size: clamp(24px, 2.3vw, 30px); line-height: 1.1; letter-spacing: -0.015em; color: #232A31; }
.bl-funnel__body { font-size: 17px; line-height: 1.5; color: #586069; }
.bl-funnel__go { margin-top: auto; padding-top: 6px; font-weight: 600; font-size: 16px; color: #1B3A5B; text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }
.bl-funnel__go span { display: inline-block; transition: transform 200ms cubic-bezier(.2,.8,.2,1); }
.bl-funnel__alt { position: relative; margin: clamp(22px, 3vw, 32px) 0 0; font-size: 15px; color: rgba(250, 250, 248, 0.78); }
.bl-funnel__alt a { color: #AFC4DD; text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine){.bl-funnel__alt a:hover{ color: #FAFAF8; }}
.bl-funnel__alt a:focus-visible { outline: 2px solid #AFC4DD; outline-offset: 3px; }
@media (max-width: 760px) {
  .bl-funnel__card { padding: 28px 20px; border-radius: 16px; }
  .bl-funnel__tiles { grid-template-columns: 1fr; gap: 14px; }
  .bl-funnel__tile { padding: 24px; }
  .bl-funnel__ring { width: 56px; height: 56px; }
  .bl-funnel__route { height: 40px; }
}
@media (prefers-reduced-motion: reduce) { .bl-funnel__seg, .bl-funnel__tile, .bl-funnel__tile::before, .bl-funnel__go span { transition: none; } .bl-funnel__route::before { transition: none; transform: none; } }
/* Closing card motion (Kristian, 27 Sep 2026): plays once when the card first comes into view, then settles.
   Ring: the seven segments draw in, then five fill blue one by one (a score filling up), then the question mark lands.
   Route: the line draws left to right and each stop fills as the line reaches it. */
.bl-funnel .bl-funnel__seg { stroke-dasharray: 0 276.5; transition: stroke-dasharray 360ms cubic-bezier(.23,1,.32,1), stroke 280ms ease; }
.bl-funnel.is-in .bl-funnel__seg { stroke-dasharray: 65.1 211.4; }
.bl-funnel.is-in .bl-funnel__seg:nth-child(1) { transition-delay: 0ms, 700ms; }
.bl-funnel.is-in .bl-funnel__seg:nth-child(2) { transition-delay: 70ms, 840ms; }
.bl-funnel.is-in .bl-funnel__seg:nth-child(3) { transition-delay: 140ms, 980ms; }
.bl-funnel.is-in .bl-funnel__seg:nth-child(4) { transition-delay: 210ms, 1120ms; }
.bl-funnel.is-in .bl-funnel__seg:nth-child(5) { transition-delay: 280ms, 1260ms; }
.bl-funnel.is-in .bl-funnel__seg:nth-child(6) { transition-delay: 350ms, 0ms; }
.bl-funnel.is-in .bl-funnel__seg:nth-child(7) { transition-delay: 420ms, 0ms; }
.bl-funnel .bl-funnel__ring-q { opacity: 0; transform: scale(.7); transition: opacity 260ms ease, transform 320ms cubic-bezier(.23,1,.32,1); }
.bl-funnel.is-in .bl-funnel__ring-q { opacity: 1; transform: none; transition-delay: 1450ms; }
.bl-funnel .bl-funnel__route::before { transform: scaleX(0); transition: transform 1100ms cubic-bezier(.45,0,.55,1) 250ms; }
.bl-funnel.is-in .bl-funnel__route::before { transform: none; }
.bl-funnel .bl-funnel__route i { transform: scale(.85); transition: background-color 220ms ease, transform 280ms cubic-bezier(.23,1,.32,1); }
.bl-funnel .bl-funnel__route i:first-child { background: #FAFAF8; }
.bl-funnel.is-in .bl-funnel__route i { background: #1B3A5B; transform: none; }
.bl-funnel.is-in .bl-funnel__route i:nth-child(1) { transition-delay: 150ms; }
.bl-funnel.is-in .bl-funnel__route i:nth-child(2) { transition-delay: 800ms; }
.bl-funnel.is-in .bl-funnel__route i:nth-child(3) { transition-delay: 1350ms; }
@media (prefers-reduced-motion: reduce) {
  .bl-funnel .bl-funnel__seg, .bl-funnel .bl-funnel__ring-q, .bl-funnel .bl-funnel__route::before, .bl-funnel .bl-funnel__route i { transition: none !important; }
  .bl-funnel .bl-funnel__seg { stroke-dasharray: 35.5 241; }
  .bl-funnel .bl-funnel__seg:nth-child(-n+5) { stroke: #1B3A5B; }
  .bl-funnel .bl-funnel__ring-q { opacity: 1; transform: none; }
  .bl-funnel .bl-funnel__route::before { transform: none; }
  .bl-funnel .bl-funnel__route i { background: #1B3A5B; transform: none; }
}

/* The heading, intro and "Not sure which?" sit centred over the four offer
   columns, not on the label column's left edge (Kristian, 30 Sep 2026). */
.hpv3-start__h2, .hpv3-start__lead, .hpv3-start__cred { text-align: center; }
.hpv3-start__lead { margin-left: auto; margin-right: auto; }
/* Centred on the section (Kristian, 2 Oct 2026): the old 164px offset matched the four-column layout and is gone. */
/* One line per price in the Cost row (Kristian, 30 Sep 2026: lowest price, "From"). */
@media (min-width: 1100px) and (max-width: 1399px) { .hp-cmp__cell--cost dd { font-size: 17px; } }


/* Homepage copy of the "How we help" menu styles (30 Sep 2026 hotfix). The
   built homepage does not load styles.css, and its inlined route CSS still holds
   the older menu, so the new menu shipped unstyled on the live homepage only.
   `html` prefix so these win over the inlined route rules that load later. */
/* "How we help" menu, 29 Sep 2026 (Kristian): no route line or stages. One
   suggested start on the left for anyone unsure, then "What do you need help
   with?" and four tiles: the reason to click first, the service name under it.
   The AI Self-Assessment and ROI Calculator live under Resources. */
html body .pill-nav.pill-nav .pill-nav__help { padding: 10px; }
html body .pill-nav.pill-nav .pill-nav__help-label { margin: 0; padding: 10px 14px 8px; font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #586069; }
html body .pill-nav.pill-nav .pill-nav__help-label::before { content: none; display: none; }
html body .pill-nav.pill-nav .pill-nav__help-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
html body .pill-nav.pill-nav .pill-nav__menu--route .pill-nav__help-grid a { display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; text-align: left; gap: 14px; min-height: 0; padding: 12px 14px; border-radius: 16px; font-family: 'Fraunces', Georgia, serif; font-size: 19px; line-height: 1.2; color: #232A31; white-space: normal; transition: background-color .2s ease; }

html body .pill-nav.pill-nav .pill-nav__menu--route .pill-nav__help-grid a:focus-visible { background: rgba(175, 196, 221, 0.26); }@media (hover: hover) and (pointer: fine){html body .pill-nav.pill-nav .pill-nav__menu--route .pill-nav__help-grid a:hover{ background: rgba(175, 196, 221, 0.26); }}
html body .pill-nav.pill-nav .pill-nav__help-icon { flex: none; box-sizing: content-box; width: 22px; height: 22px; padding: 10px; border-radius: 12px; background: rgba(175, 196, 221, 0.42); color: #1B3A5B; }
html body .pill-nav.pill-nav .pill-nav__help-text { display: flex; flex-direction: column; gap: 5px; padding-top: 3px; }
html body .pill-nav.pill-nav .pill-nav__help .pill-nav__menu-note { font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 14px; font-weight: 600; line-height: 1.3; color: #1B3A5B; }
html body .pill-nav.pill-nav .pill-nav__rail { display: none !important; }
@media (min-width: 1100px) {
  html body .pill-nav.pill-nav .pill-nav__help { padding: 40px clamp(20px, 3.2vw, 56px) 36px 28px; }
  html body .pill-nav.pill-nav .pill-nav__help-label { padding: 0 14px 16px; }
  html body .pill-nav.pill-nav .pill-nav__help-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
  html body .pill-nav.pill-nav .pill-nav__menu--route .pill-nav__help-grid a { padding: 18px; font-size: 22px; border: 1px solid #E5E5E2; }
  
  html body .pill-nav.pill-nav .pill-nav__menu--route .pill-nav__help-grid a:focus-visible { border-color: rgba(27, 58, 91, 0.3); }@media (hover: hover) and (pointer: fine){html body .pill-nav.pill-nav .pill-nav__menu--route .pill-nav__help-grid a:hover{ border-color: rgba(27, 58, 91, 0.3); }}
  html body .pill-nav.pill-nav .pill-nav__pitch { justify-content: center; gap: 22px; padding-top: 40px; padding-bottom: 40px; }
  html body .pill-nav.pill-nav .pill-nav__pitch-line { font-size: 30px; }
  html body .pill-nav.pill-nav .pill-nav__menu .pill-nav__pitch-link { margin-top: 0; }
}

/* "How we help", 29 Sep 2026 (Kristian): services first, for anyone who knows
   what they need. Beside them, "Not sure what you need?" offers the three free
   tools as help, not as a required first step. */
html body .pill-nav.pill-nav .pill-nav__unsure-label { margin: 0; padding: 10px 14px 8px; font-family: 'Source Sans 3', system-ui, sans-serif; font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #586069; }
html body .pill-nav.pill-nav .pill-nav__unsure-label::before { content: none; display: none; }
html body .pill-nav.pill-nav .pill-nav__help--unsure { border-top: 1px solid #E5E5E2; }
@media (min-width: 1100px) {
  html body .pill-nav.pill-nav .pill-nav__menu--services { grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); }
  html body .pill-nav.pill-nav .pill-nav__menu--services .pill-nav__help:first-child { padding-left: clamp(20px, 3.2vw, 56px); }
  html body .pill-nav.pill-nav .pill-nav__help--unsure { border-top: 0; background: rgba(175, 196, 221, 0.16); padding: 40px clamp(20px, 3.2vw, 56px) 36px 24px; }
  html body .pill-nav.pill-nav .pill-nav__unsure-label { padding: 0 14px 16px; }
  html body .pill-nav.pill-nav .pill-nav__help--unsure .pill-nav__help-grid { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  html body .pill-nav.pill-nav .pill-nav__menu--route .pill-nav__help--unsure .pill-nav__help-grid a { padding: 12px 14px; border-color: transparent; font-size: 18px; align-items: center; }
  
  html body .pill-nav.pill-nav .pill-nav__menu--route .pill-nav__help--unsure .pill-nav__help-grid a:focus-visible { background: #FAFAF8; border-color: #E5E5E2; }@media (hover: hover) and (pointer: fine){html body .pill-nav.pill-nav .pill-nav__menu--route .pill-nav__help--unsure .pill-nav__help-grid a:hover{ background: #FAFAF8; border-color: #E5E5E2; }}
  html body .pill-nav.pill-nav .pill-nav__help--unsure .pill-nav__help-icon { background: #FAFAF8; }
}
@media (max-width: 1180px) {
  /* Phone menu: icon beside the reason to click, service name under it. */
  html body .pill-nav__mobile a.pill-nav__mobile-sub:has(.pill-nav__help-icon) { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; min-height: 56px; }
  html body .pill-nav__mobile .pill-nav__help-icon { flex: none; width: 18px; height: 18px; padding: 8px; border-radius: 10px; background: rgba(175, 196, 221, 0.42); color: #1B3A5B; box-sizing: content-box; }
  html body .pill-nav__mobile .pill-nav__help-text { display: flex; flex-direction: column; gap: 2px; }
}

/* Simplicity pass (Kristian, 2 Oct 2026): the free call column, and who it's for. */
@media (min-width: 1100px) { .hp-cmp { grid-template-columns: 150px repeat(5, minmax(0, 1fr)); } }
.hp-cmp__col--free .hp-cmp__cell--cost dd { color: #1B3A5B; }
.hp-fit { margin-top: 40px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.hp-fit__col { padding: 24px 26px; border: 1px solid rgba(35, 42, 49, 0.12); border-radius: 14px; background: #FAFAF8; }
.hp-fit__col--not { background: transparent; }
.hp-fit__h { margin: 0 0 12px; font: 500 22px/1.2 'Fraunces', Georgia, serif; color: #232A31; }
.hp-fit ul { margin: 0; padding-left: 18px; }
.hp-fit li { margin: 0 0 8px; font: 400 16px/1.5 'Source Sans 3', system-ui, sans-serif; color: #232A31; }
@media (max-width: 799px) { .hp-fit { grid-template-columns: minmax(0, 1fr); } }

/* Each column ends in a real button (Kristian, 2 Oct 2026): all filled in slate (Charcoal), like the headings and price row. */
.hp-cmp .hp-cmp__more { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 16px 20px 20px; padding: 11px 10px; white-space: nowrap; border: 1.5px solid #232A31; border-radius: 10px; background: #232A31; color: #FAFAF8; font: 600 15px/1.25 'Source Sans 3', system-ui, sans-serif; text-align: center; text-decoration: none; transition: background-color 150ms ease, color 150ms ease; }
.hp-cmp .hp-cmp__col--free .hp-cmp__more { background: #232A31; color: #FAFAF8; }
@media (hover: hover) and (pointer: fine) {
  .hp-cmp .hp-cmp__more:hover { background: #AFC4DD; border-color: #AFC4DD; color: #232A31; }
}
.hp-cmp .hp-cmp__more:focus-visible { outline: 2px solid #232A31; outline-offset: 3px; }
@media (min-width: 1100px) { .hp-cmp .hp-cmp__more { align-self: end; justify-self: stretch; margin: 16px 12px 16px; font-size: 14.5px; } }
/* Row labels tied to their rows (Kristian, 2 Oct 2026): the same dividers as the cells. */
@media (min-width: 1100px) {
  .hp-cmp__labels span { padding: 14px 16px 14px 0; color: #232A31; font-size: 15px; }
  .hp-cmp__labels span:nth-child(n+3):nth-child(-n+6) { border-top: 1px solid rgba(35, 42, 49, 0.1); }
}
/* "Right for you if" on the dark slate card, the other stays light (Kristian, 2 Oct 2026). */
.hp-fit__col:not(.hp-fit__col--not) { background: #232A31; border-color: #232A31; }
.hp-fit__col:not(.hp-fit__col--not) .hp-fit__h { color: #FAFAF8; }
.hp-fit__col:not(.hp-fit__col--not) li { color: rgba(250, 250, 248, 0.86); }
.hp-fit__col:not(.hp-fit__col--not) li::marker { color: #AFC4DD; }
.hp-fit__col--not { background: #FAFAF8; }
/* Cost row on the slate (Charcoal) band with white text, matching the column headings (Kristian, 2 Oct 2026). */
.hp-cmp .hp-cmp__cell--cost { background: #232A31; }
.hp-cmp .hp-cmp__cell--cost dd, .hp-cmp .hp-cmp__col--free .hp-cmp__cell--cost dd { color: #FAFAF8; }
.hp-cmp .hp-cmp__cell--cost dt { color: rgba(250, 250, 248, 0.75); }
@media (min-width: 1100px) { .hp-cmp__labels span:nth-child(6) { font-weight: 700; } }
/* Mock: the 2p card (Kristian, 2 Oct 2026). The yearly saving is the hero figure; 2p explains it. One spacing scale. */
.hp-penny { margin: 0; padding: 36px 36px 32px; border-radius: 20px; background: #232A31; color: #FAFAF8; display: flex; flex-direction: column; align-items: center; text-align: center; }
.hp-penny p { margin: 0; }
.hp-penny__label { max-width: 300px; font: 500 21px/1.35 'Fraunces', Georgia, serif; color: #FAFAF8; }
.hp-penny__label span { color: #AFC4DD; font-size: 26px; }
.hp-penny__big { margin-top: 14px !important; font: 500 clamp(52px, 5.2vw, 72px)/1 'Fraunces', Georgia, serif; color: #AFC4DD; letter-spacing: -0.01em; white-space: nowrap; }
.hp-penny__year { margin-top: 6px !important; font: 400 19px/1.4 'Source Sans 3', system-ui, sans-serif; color: rgba(250, 250, 248, 0.8); }
.hp-penny__slider { width: 100%; max-width: 360px; margin-top: 28px; display: grid; gap: 12px; font: 400 18px/1.3 'Source Sans 3', system-ui, sans-serif; color: rgba(250, 250, 248, 0.75); }
.hp-penny__slider output { color: #FAFAF8; font-weight: 700; font-size: 20px; }
.hp-penny__slider input { width: 100%; accent-color: #AFC4DD; }
.hp-penny__note { margin-top: 22px !important; }
.hp-penny__why { padding: 0; border: 0; background: none; color: #AFC4DD; font: 600 15px/1.5 'Source Sans 3', system-ui, sans-serif; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
@media (hover: hover) and (pointer: fine){.hp-penny__why:hover{ color: #FAFAF8; }}
.hp-penny__aim { width: 100%; margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(175, 196, 221, 0.25); }
.hp-penny__aim-h { font: 600 13px/1.3 'Source Sans 3', system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; color: #AFC4DD; }
.hp-penny__aim-t { margin-top: 8px !important; font: 500 26px/1.2 'Fraunces', Georgia, serif; color: #FAFAF8; }
@media (max-width: 1099px) { .hp-penny { width: 100%; max-width: 520px; margin-inline: auto; } }
@media (max-width: 599px) { .hp-penny { padding: 30px 22px 26px; } .hp-penny__label { font-size: 19px; } }

/* Label column as its own card (Kristian, 2 Oct 2026): slate heading band, light rows with the same dividers,
   Cost in the slate price band, so the labels read across into each column instead of floating. */
@media (min-width: 1100px) {
  .hp-cmp { grid-template-columns: 168px repeat(5, minmax(0, 1fr)); }
  .hp-cmp__labels { border-radius: 18px; border: 1px solid rgba(35, 42, 49, 0.14); background: #FAFAF8; overflow: hidden; }
  .hp-cmp__labels span { display: flex; align-items: flex-start; padding: 14px 18px; border-top: 0; font: 700 15px/1.35 'Source Sans 3', system-ui, sans-serif; color: #232A31; }
  .hp-cmp__labels span:nth-child(n+3):nth-child(-n+6) { border-top: 1px solid rgba(35, 42, 49, 0.1); }
  .hp-cmp__labels span:first-child { padding: 18px; background: #232A31; color: #AFC4DD; font: 500 21px/1.2 'Fraunces', Georgia, serif; }
  .hp-cmp__labels span:nth-child(6) { background: #232A31; color: #FAFAF8; font: 500 19px/1.3 'Fraunces', Georgia, serif; }
  .hp-cmp__labels span:last-child { background: rgba(175, 196, 221, 0.18); }
}
/* Fit cards (Kristian, 2 Oct 2026): a tick on each "right for you" line, a cross on each "not for you" line. Left aligned to scan. */
.hp-fit ul { list-style: none; padding-left: 0; }
.hp-fit li { position: relative; padding-left: 30px; margin-bottom: 12px; }
.hp-fit li:last-child { margin-bottom: 0; }
.hp-fit li::before { content: ""; position: absolute; left: 2px; top: 0.45em; width: 16px; height: 16px; border-radius: 50%; }
.hp-fit__col:not(.hp-fit__col--not) li::before { background: #AFC4DD url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.3 7 10.7l4.6-5' fill='none' stroke='%23232A31' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.hp-fit__col--not li::before { background: rgba(35, 42, 49, 0.1) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5l5 5m0-5-5 5' fill='none' stroke='%23232A31' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.hp-fit__h { margin-bottom: 16px; }

/* One table, not six cards (Kristian, 2 Oct 2026): a single outer frame, columns joined by thin dividers,
   and the slate heading and price bands running straight across. */
@media (min-width: 1100px) {
  .hp-cmp { column-gap: 0; border: 1px solid rgba(35, 42, 49, 0.14); border-radius: 18px; overflow: hidden; background: #FAFAF8; }
  .hp-cmp__labels, .hp-cmp__col { border: 0; border-radius: 0; }
  .hp-cmp__col { border-left: 1px solid rgba(250, 250, 248, 0.14); }
  .hp-cmp__col .hp-cmp__cell, .hp-cmp__col .hp-cmp__more { box-shadow: inset 1px 0 0 rgba(35, 42, 49, 0.1); }
  .hp-cmp__labels span:first-child { background: #232A31; }
  .hp-cmp__labels span:last-child { background: #FAFAF8; }
  @media (hover: hover) and (pointer: fine){.hp-cmp__col:hover{ border-color: rgba(250, 250, 248, 0.14); }}
}
/* Alignment and contrast fixes (Kristian, 2 Oct 2026): labels use the cells' size and line height so first lines line up;
   the "not for you" crosses sit on slate circles. */
@media (min-width: 1100px) {
  .hp-cmp__labels span:nth-child(n+2):nth-child(-n+5) { padding: 14px 18px; font: 700 16px/1.5 'Source Sans 3', system-ui, sans-serif; }
  .hp-cmp__labels span:nth-child(6) { padding: 14px 18px; }
}
.hp-fit__col--not li::before { background: #232A31 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M5.5 5.5l5 5m0-5-5 5' fill='none' stroke='%23FAFAF8' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / 16px no-repeat; }

/* Every table row centred vertically (Kristian, 2 Oct 2026): headings, labels, cells and prices sit in the middle of their row. */
@media (min-width: 1100px) {
  .hp-cmp__name, .hp-cmp__cell, .hp-cmp__labels span { display: flex; flex-direction: column; justify-content: center; }
  .hp-cmp__labels span { align-items: flex-start; }
}
/* Less slate (Kristian, 2 Oct 2026): the price row moves to Light Blue with slate text; only the heading band and buttons stay dark. */
.hp-cmp .hp-cmp__cell--cost { background: #AFC4DD; }
.hp-cmp .hp-cmp__cell--cost dd, .hp-cmp .hp-cmp__col--free .hp-cmp__cell--cost dd { color: #232A31; }
.hp-cmp .hp-cmp__cell--cost dt { color: #232A31; }
@media (min-width: 1100px) { .hp-cmp__labels span:nth-child(6) { background: #AFC4DD; color: #232A31; } }
.hpv3-start__vat { margin: 12px 0 0; text-align: center; font: 400 14.5px/1.5 'Source Sans 3', system-ui, sans-serif; color: #586069; }
@media (min-width: 1100px) { .hp-cmp .hp-cmp__cell--cost dd { white-space: nowrap; } }
/* Timeline (Kristian, 2 Oct 2026): highlight where both founders are now, not a past stage. */
.hp-team .rt__stop--peak .rt__dot { background: #232A31; }
.hp-team .rt__stop--now .rt__dot { background: #AFC4DD; }
.hp-team .rt__stop--now .rt__when { color: #AFC4DD; }
/* Start free strip (mock, 2 Oct 2026). */
.hp-free { margin-top: 36px; }
.hp-free__h { margin: 0 0 16px; text-align: center; font: 500 24px/1.25 'Fraunces', Georgia, serif; color: #232A31; }
.hp-free__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.hp-free__card { display: flex; flex-direction: column; gap: 6px; padding: 22px 24px; border: 1px solid rgba(35, 42, 49, 0.14); border-radius: 14px; background: #FAFAF8; }
.hp-free__name { margin: 0; font: 500 20px/1.25 'Fraunces', Georgia, serif; color: #232A31; }
.hp-free__what { margin: 0 0 6px; font: 400 16px/1.5 'Source Sans 3', system-ui, sans-serif; color: #586069; }
.hp-free__link { margin-top: auto; color: #1B3A5B; font: 600 15.5px/1.4 'Source Sans 3', system-ui, sans-serif; text-decoration: underline; text-decoration-color: #AFC4DD; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine){.hp-free__link:hover{ color: #232A31; text-decoration-color: #232A31; }}
@media (max-width: 899px) { .hp-free__grid { grid-template-columns: minmax(0, 1fr); } }
/* Key points only, with room to breathe (Kristian, 2 Oct 2026): four rows, one short point per cell, more padding. */
@media (min-width: 1100px) {
  .hp-cmp { grid-template-rows: repeat(6, auto); }
  .hp-cmp__cell, .hp-cmp__labels span:nth-child(n+2):nth-child(-n+4) { padding: 24px 24px; }
  .hp-cmp__cell--cost, .hp-cmp__labels span:nth-child(5) { padding: 22px 24px; }
  .hp-cmp__name, .hp-cmp__labels span:first-child { padding: 22px 24px; }
  .hp-cmp__cell dd { font-size: 17px; line-height: 1.45; }
  .hp-cmp .hp-cmp__more { margin: 20px 16px 22px; }
  .hp-cmp__labels span:nth-child(5) { background: #AFC4DD; color: #232A31; font: 500 19px/1.3 'Fraunces', Georgia, serif; }
  .hp-cmp__labels span:nth-child(6) { background: #FAFAF8; font: inherit; }
}
@media (min-width: 1100px) { .hp-cmp .hp-cmp__labels span:nth-child(5):nth-child(5) { font: 500 19px/1.3 'Fraunces', Georgia, serif; } }
/* Pricing cards (Kristian, 2 Oct 2026). */
.hp-cmp[hidden] { display: none !important; }
.hp-price { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.hp-price__card { position: relative; display: flex; flex-direction: column; padding: 28px 22px 24px; border: 1px solid rgba(35, 42, 49, 0.12); border-radius: 18px; background: #FAFAF8; }
.hp-price__card:is(:focus-within) { background: #232A31; border-color: #232A31; color: #FAFAF8; box-shadow: 0 18px 40px rgba(35, 42, 49, 0.18); }@media (hover: hover) and (pointer: fine){.hp-price__card:is(:hover){ background: #232A31; border-color: #232A31; color: #FAFAF8; box-shadow: 0 18px 40px rgba(35, 42, 49, 0.18); }}
.hp-price__card p { margin: 0; }
.hp-price__badge { position: absolute; top: -12px; left: 22px; padding: 4px 10px; border-radius: 6px; background: #AFC4DD; color: #232A31; font: 700 12px/1.3 'Source Sans 3', system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; }
.hp-price__name { font: 700 13px/1.3 'Source Sans 3', system-ui, sans-serif; letter-spacing: 0.07em; text-transform: uppercase; color: #1B3A5B; }
.hp-price__card:is(:focus-within) .hp-price__name { color: #AFC4DD; }@media (hover: hover) and (pointer: fine){.hp-price__card:is(:hover) .hp-price__name{ color: #AFC4DD; }}
.hp-price__fig { margin-top: 12px !important; font: 500 34px/1.05 'Fraunces', Georgia, serif; color: #232A31; white-space: nowrap; }
.hp-price__card:is(:focus-within) .hp-price__fig { color: #FAFAF8; }@media (hover: hover) and (pointer: fine){.hp-price__card:is(:hover) .hp-price__fig{ color: #FAFAF8; }}
.hp-price__unit { margin-top: 6px !important; font: 400 14px/1.4 'Source Sans 3', system-ui, sans-serif; color: #586069; }
.hp-price__card:is(:focus-within) .hp-price__unit { color: rgba(250, 250, 248, 0.7); }@media (hover: hover) and (pointer: fine){.hp-price__card:is(:hover) .hp-price__unit{ color: rgba(250, 250, 248, 0.7); }}
.hp-price__desc { margin-top: 16px !important; font: 600 16px/1.45 'Source Sans 3', system-ui, sans-serif; color: #232A31; }
.hp-price__card:is(:focus-within) .hp-price__desc { color: #FAFAF8; }@media (hover: hover) and (pointer: fine){.hp-price__card:is(:hover) .hp-price__desc{ color: #FAFAF8; }}
.hp-price__ticks { list-style: none; margin: 16px 0 24px; padding: 18px 0 0; border-top: 1px solid rgba(35, 42, 49, 0.1); display: grid; gap: 10px; }
.hp-price__card:is(:focus-within) .hp-price__ticks { border-top-color: rgba(250, 250, 248, 0.14); }@media (hover: hover) and (pointer: fine){.hp-price__card:is(:hover) .hp-price__ticks{ border-top-color: rgba(250, 250, 248, 0.14); }}
.hp-price__ticks li { position: relative; padding-left: 24px; font: 400 15px/1.4 'Source Sans 3', system-ui, sans-serif; color: #232A31; }
.hp-price__ticks li::before { content: ""; position: absolute; left: 0; top: 0.15em; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' fill='none' stroke='%231B3A5B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat; }
.hp-price__card:is(:focus-within) .hp-price__ticks li { color: rgba(250, 250, 248, 0.86); }@media (hover: hover) and (pointer: fine){.hp-price__card:is(:hover) .hp-price__ticks li{ color: rgba(250, 250, 248, 0.86); }}
.hp-price__card:is(:focus-within) .hp-price__ticks li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' fill='none' stroke='%23AFC4DD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }@media (hover: hover) and (pointer: fine){.hp-price__card:is(:hover) .hp-price__ticks li::before{ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5 6.5 11.5 12.5 4.5' fill='none' stroke='%23AFC4DD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }}
.hp-price__btn { margin-top: auto; display: flex; justify-content: center; padding: 13px 14px; border-radius: 10px; background: #232A31; color: #FAFAF8; font: 600 15px/1.3 'Source Sans 3', system-ui, sans-serif; text-decoration: none; text-align: center; transition: background-color .15s ease, color .15s ease; }
.hp-price__card:is(:focus-within) .hp-price__btn { background: #AFC4DD; color: #232A31; }@media (hover: hover) and (pointer: fine){.hp-price__card:is(:hover) .hp-price__btn{ background: #AFC4DD; color: #232A31; }}
@media (hover: hover) and (pointer: fine) { .hp-price__btn:hover { background: #AFC4DD; color: #232A31; } .hp-price__card:is(:hover, :focus-within) .hp-price__btn:hover { background: #FAFAF8; color: #232A31; } }
.hp-price__btn:focus-visible { outline: 2px solid #1B3A5B; outline-offset: 3px; }
@media (max-width: 1279px) { .hp-price { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 899px) { .hp-price { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .hp-price { grid-template-columns: minmax(0, 1fr); } }
.hp-price__from { display: block; margin-bottom: 4px; font: 600 13px/1.2 'Source Sans 3', system-ui, sans-serif; color: #586069; letter-spacing: 0; }
.hp-price__card:is(:focus-within) .hp-price__from { color: rgba(250, 250, 248, 0.7); }@media (hover: hover) and (pointer: fine){.hp-price__card:is(:hover) .hp-price__from{ color: rgba(250, 250, 248, 0.7); }}
/* Breathing room in How you get there (Kristian, 2 Oct 2026): a clear gap between each block, roomier cards. */
.hp-price { margin-top: 40px; gap: 20px; }
.hpv3-start__vat { margin-top: 22px; }
.hp-free { margin-top: 80px; }
.hp-free__h { margin-bottom: 28px; font-size: 28px; }
.hp-free__grid { gap: 20px; }
.hp-free__card { padding: 30px 30px 28px; gap: 10px; }
.hp-fit { margin-top: 80px; gap: 20px; }
.hp-fit__col { padding: 34px 36px; }
.hp-fit__h { margin-bottom: 20px !important; }
.hp-fit li { margin-bottom: 14px; }
.hpv3-start .hp-tools { margin-top: 88px; }

/* Hover highlight, not a fixed "start here" card (Kristian, 2 Oct 2026): the card under the pointer or keyboard turns dark. */
.hp-price__card { transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease, color .2s ease; }
.hp-price__card :is(.hp-price__name, .hp-price__fig, .hp-price__unit, .hp-price__desc, .hp-price__from, .hp-price__ticks li) { transition: color .2s ease; }
@media (hover: none) { .hp-price__card:is(:hover, :focus-within) { background: #FAFAF8; border-color: rgba(35, 42, 49, 0.12); box-shadow: none; } }

/* Route, not a sequence (Kristian, 6 Oct 2026): the study is the recommended first step, then the line forks to the
   three other offers, any of which can be a starting point. The Strategy Call card sits underneath for anyone unsure. */
.hp-route { max-width: 1000px; margin-inline: auto; grid-template-columns: minmax(0, 1fr); }
.hp-route__wide { display: grid; grid-template-columns: 180px minmax(0, 1fr) 170px; grid-template-rows: auto auto 1fr; column-gap: 32px; padding: 34px 30px 28px; }
.hp-route__wide .hp-price__name, .hp-route__wide .hp-price__fig, .hp-route__wide .hp-price__unit { grid-column: 1; }
.hp-route__wide .hp-price__desc { grid-column: 2; grid-row: 1; margin-top: 0 !important; }
.hp-route__wide .hp-price__ticks { grid-column: 2; grid-row: 2 / span 2; margin: 14px 0 0; padding-top: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
.hp-route__wide .hp-price__btn { grid-column: 3; grid-row: 1 / span 3; align-self: center; margin-top: 0; }
.hp-route__or { position: relative; max-width: 1000px; height: 72px; margin: 0 auto; padding: 8px 0 0 calc(50% + 16px); font: 700 12px/1.3 'Source Sans 3', system-ui, sans-serif; letter-spacing: 0.07em; text-transform: uppercase; color: #586069; }
.hp-route__or::before { content: ""; position: absolute; left: calc(50% - 1px); top: 0; height: 40px; width: 2px; background: #AFC4DD; }
.hp-route__or::after { content: ""; position: absolute; top: 40px; left: calc((100% - 40px) / 6); right: calc((100% - 40px) / 6); height: 2px; background: #AFC4DD; }
.hp-route__options { max-width: 1000px; margin: 0 auto; grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* The fork label sits on the junction of the route lines, not off to the side (Kristian, 7 Oct 2026). */
.hp-route__or { padding: 27px 0 0; text-align: center; }
.hp-route__or span { position: relative; z-index: 1; display: inline-block; padding: 5px 14px; border: 2px solid #AFC4DD; border-radius: 999px; background: #FAFAF8; line-height: 1.3; }
.hp-route__options .hp-price__card::before { content: ""; position: absolute; left: calc(50% - 1px); top: -32px; height: 32px; width: 2px; background: #AFC4DD; }
@media (max-width: 899px) {
  .hp-route__wide { grid-template-columns: minmax(0, 1fr); padding: 34px 22px 24px; }
  .hp-route__wide > * { grid-column: 1 !important; grid-row: auto !important; }
  .hp-route__wide .hp-price__desc { margin-top: 16px !important; }
  .hp-route__wide .hp-price__ticks { grid-template-columns: minmax(0, 1fr); margin: 16px 0 24px; }
  .hp-route__or { height: auto; padding: 40px 0 20px; text-align: center; }
  .hp-route__or::after, .hp-route__options .hp-price__card::before { display: none; }
  .hp-route__options { grid-template-columns: minmax(0, 1fr); }
}
.hp-team .rt__post { margin-left: 4px; font: 600 15px/1 'Source Sans 3', system-ui, sans-serif; letter-spacing: 0.06em; color: #AFC4DD; vertical-align: middle; }
/* Linked first steps in "Not sure what you need?" (Kristian, 6 Oct 2026): a Start here tag on the readiness check. */
@media (min-width: 1100px) {
  html body .pill-nav.pill-nav .pill-nav__help--unsure .pill-nav__help-grid a[href="/are-we-ready-for-ai"] .pill-nav__menu-note::after { content: "Start here"; display: inline-block; vertical-align: 1px; margin-left: 8px; padding: 3px 8px; border-radius: 6px; background: #AFC4DD; color: #232A31; font: 700 11px/1.3 'Source Sans 3', system-ui, sans-serif; letter-spacing: 0.06em; text-transform: uppercase; }
}