/* Homepage taste pass, option for Kristian (15 Oct 2026).
   Visual only: no words, links, buttons, prices or section order change.
   Brand fixed points kept: six colours, Fraunces / Source Sans 3 / IBM Plex Mono,
   the hero button shadow and the Fraunces italic accents.
   Loaded after assets/pages-home.css. */

/* 1. Labels in sentence case. design.md bans tracked uppercase labels;
      the words stay exactly as written. */
main .hp-penny__aim-h,
main .hp-how__eyebrow,
main .hp-price__badge,
main .hp-route__or span {
  text-transform: none;
  letter-spacing: 0;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
}
main .hp-price__name {
  text-transform: none;
  letter-spacing: 0;
  font-family: "Source Sans 3", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: #232A31;
}
main .hp-price__badge {
  padding: 5px 12px;
  border-radius: 999px;
}

/* 2. Surfaces by tone, not outline.
      On the Off-White page: a Soft Stone step. On the Light Blue panels: Off-White. */
main .hp-pain__card,
main .hp-promise__card {
  border-color: transparent;
  background-color: rgba(229, 229, 226, 0.55);
}
main .hp-price__card,
main .hp-free__card,
main .hp-fit__col--not,
main .hp-how__step:not(.hp-how__step--result) {
  border-color: transparent;
  background-color: #FAFAF8;
}
/* The two wide routes (recommended first step, Strategy Call) read first. */
main .hp-price__card.hp-route__wide {
  background-color: rgba(175, 196, 221, 0.45);
}
main .hp-price__ticks {
  border-top-color: transparent;
}
main .hp-penny__aim {
  border-top-color: transparent;
}

/* 3. No icons on problem cards (design.md icon restraint rule). */
main .hp-pain__svc-icon {
  display: none;
}

/* 4. Nothing meant to be read under 14px (site small-print size). */
.footer-help,
.footer-help a {
  font-size: 14px;
}

/* No scroll entrance: it fought the pinned "Which of these sounds like you?"
   scene and could leave cards hidden, so it was left out to protect the flow. */

/* 6. Bolder scale (round 2, Kristian could not see round 1). Same words, bigger
      contrast between the one large thing and the body text. */
html body main .hp-hero--full .hp-hero__h1 {
  font-size: clamp(34px, 3.4vw, 50px) !important;
  line-height: 1.04;
  letter-spacing: -0.022em;
}
html body main .hp-pain__h2,
html body main .hpv3-start__h2,
html body main .hp-cost__h2,
html body main .hp-team__title,
html body main .hp-promise__title,
html body main .hp-cases__h2 {
  font-size: clamp(30px, 3.5vw, 50px) !important;
  line-height: 1.06;
  letter-spacing: -0.02em;
}
html body main .hp-how__h2 {
  font-size: clamp(30px, 2.8vw, 40px) !important;
  line-height: 1.06;
  letter-spacing: -0.02em;
}
/* Problem cards: the buyer's own words, set larger. */
html body main .hp-pain__card h3,
html body main .hp-pain__card [class*="quote"] {
  font-size: clamp(22px, 1.9vw, 24px) !important;
  line-height: 1.2;
}
/* Prices: the figure is the thing to see. */
html body main .hp-price__fig {
  font-size: clamp(36px, 3.6vw, 52px) !important;
  letter-spacing: -0.02em;
}
/* More air between sections than inside them. */
@media (min-width: 1024px) {
  html body main .hp-pain,
  html body main .hpv3-start,
  html body main .hp-team,
  html body main .hp-cases {
    padding-top: 136px;
    padding-bottom: 136px;
  }
  html body main .hp-cost { padding-top: 112px; padding-bottom: 136px; }
  html body main .hp-promise { padding-top: 136px; }
  html body main .hp-pain__h2,
  html body main .hpv3-start__h2 { margin-bottom: 40px; }
}

/* 7. Hover fix (Kristian, 15 Oct 2026): the stage-2 blue fill on the wide cards
      blocked their own dark hover, so they "highlighted the same colour".
      Every price card turns Charcoal on hover or keyboard focus again. */
html body main .hp-price__card:is(:focus-within) {
  background-color: #232A31;
}@media (hover: hover) and (pointer: fine){html body main .hp-price__card:is(:hover){
  background-color: #232A31;
}}

/* 8. Round 3: push further, flow unchanged.
   8a. The recommended first step is the one dark card at rest, so the eye
       lands on it first. Uses the card's own dark styles. Hover goes
       Consulting Blue so it still answers the pointer. */
html body main .hp-price__card.hp-route__wide:has(a[href="/ai-feasibility-study"]) {
  background-color: #232A31 !important;
}
html body main .hp-price__card.hp-route__wide:has(a[href="/ai-feasibility-study"]) .hp-price__name { color: #AFC4DD !important; }
html body main .hp-price__card.hp-route__wide:has(a[href="/ai-feasibility-study"]) :is(.hp-price__fig, .hp-price__desc) { color: #FAFAF8 !important; }
html body main .hp-price__card.hp-route__wide:has(a[href="/ai-feasibility-study"]) :is(.hp-price__from, .hp-price__unit) { color: rgba(250, 250, 248, 0.7) !important; }
html body main .hp-price__card.hp-route__wide:has(a[href="/ai-feasibility-study"]) .hp-price__ticks li { color: rgba(250, 250, 248, 0.86) !important; }
html body main .hp-price__card.hp-route__wide:has(a[href="/ai-feasibility-study"]) .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");
}
html body main .hp-price__card.hp-route__wide:has(a[href="/ai-feasibility-study"]) .hp-price__btn { background: #AFC4DD; color: #232A31 !important; }
@media (hover: hover) and (pointer: fine) {
  html body main .hp-price__card.hp-route__wide:has(a[href="/ai-feasibility-study"]) .hp-price__btn:hover { background: #FAFAF8; color: #232A31 !important; }
}
/* Its label: Light Blue on Charcoal now stands out. The Strategy Call label
   sits on a Light Blue card, so it turns Consulting Blue. */
html body main .hp-price__card.hp-route__wide:not(:has(a[href="/ai-feasibility-study"])) .hp-price__badge {
  background: #1B3A5B;
  color: #FAFAF8 !important;
}

/* 8c. Feasibility card hover (Kristian, 15 Oct 2026): it turns Light Blue,
   the opposite of the Strategy Call card, and its text flips to Charcoal. */
@media (hover: hover) and (pointer: fine) {
  html body main .hp-price__card.hp-route__wide:has(a[href="/ai-feasibility-study"]):hover { background-color: #AFC4DD !important; }
  html body main .hp-price__card.hp-route__wide:has(a[href="/ai-feasibility-study"]):hover :is(.hp-price__name, .hp-price__fig, .hp-price__desc, .hp-price__ticks li) { color: #232A31 !important; }
  html body main .hp-price__card.hp-route__wide:has(a[href="/ai-feasibility-study"]):hover :is(.hp-price__from, .hp-price__unit) { color: #586069 !important; }
  html body main .hp-price__card.hp-route__wide:has(a[href="/ai-feasibility-study"]):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='%23232A31' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
  html body main .hp-price__card.hp-route__wide:has(a[href="/ai-feasibility-study"]):hover .hp-price__badge { background: #1B3A5B; color: #FAFAF8 !important; }
  html body main .hp-price__card.hp-route__wide:has(a[href="/ai-feasibility-study"]):hover .hp-price__btn { background: #232A31; color: #FAFAF8 !important; }
  html body main .hp-price__card.hp-route__wide:has(a[href="/ai-feasibility-study"]):hover .hp-price__btn:hover { background: #1B3A5B; color: #FAFAF8 !important; }
}

/* 8b. Section headings one step bigger again; the hero headline keeps three lines. */
html body main .hp-pain__h2,
html body main .hpv3-start__h2,
html body main .hp-cost__h2,
html body main .hp-team__title,
html body main .hp-promise__title,
html body main .hp-cases__h2 {
  font-size: clamp(30px, 4.1vw, 58px) !important;
}

/* 8c. Card titles carry more weight. */
html body main .hp-free__name { font-size: clamp(22px, 1.9vw, 27px) !important; }
html body main .hp-promise__head { font-size: clamp(24px, 2.2vw, 31px) !important; }
html body main .hp-price__fig { font-size: clamp(38px, 4vw, 58px) !important; }

/* 8d. Problem cards: a Consulting Blue rail at rest marks each as a choice;
       the hover lift stays. */
html body main .hp-pain__card {
  box-shadow: inset 0 4px 0 #1B3A5B;
}

/* 9. Stage 4a: one type family of sizes (was 21 sizes on the page).
      Source Sans 3: 14 small print · 16 buttons and UI · 17 body · 19 intro.
      Fraunces: 24 card titles · 30 sub-heads · display headings · figures. */
html body main :is(.hp-price__from, .rt__when, .rt__post) { font-size: 14px !important; }
html body main :is(.hp-price__btn, .hp-penny__why, .hp-tools__heading) { font-size: 16px !important; }
html body main :is(.hp-how__step-title, .hp-penny__label, .rt__head, .hp-fit__h,
  .hp-founder__line, .hp-pain__title, .hp-free__name, .hp-penny__aim-t, .hp8-later__title) {
  font-size: 24px !important;
  line-height: 1.2 !important;
}
html body main :is(.hp-free__h, .rt__name, .hp-promise__head, .hp8-ask__label,
  .bl-funnel__title, .bl-funnel__h) {
  font-size: 30px !important;
  line-height: 1.15 !important;
}
html body main :is(.hp-how__h2, .hp-pain__h2, .hpv3-start__h2, .hp-cost__h2, .hp-team__title,
  .hp-promise__title, .hp-cases__h2) {
  font-size: clamp(30px, 3.9vw, 54px) !important;
}
/* The four narrow "how" steps: keep their titles to two lines at desktop. */
@media (min-width: 1024px) and (max-width: 1279px) {
  html body main .hp-how__step-title { font-size: 21px !important; }
}
@media (max-width: 640px) {
  html body main :is(.hp-free__h, .rt__name, .hp-promise__head, .hp8-ask__label,
    .bl-funnel__title, .bl-funnel__h) { font-size: 26px !important; }
  html body main :is(.hp-how__step-title, .hp-penny__label, .rt__head, .hp-fit__h,
    .hp-founder__line, .hp-pain__title, .hp-free__name, .hp-penny__aim-t, .hp8-later__title) { font-size: 22px !important; }
}

/* 10. Stage 4b: motion and feel. Transform and opacity only, under 300ms for
       interaction, ease-out. Hover only on mouse devices. Anyone who turns
       motion off sees the settled page. Entrances are CSS scroll timelines:
       where a browser lacks them, everything simply shows. The pinned
       "Which of these sounds like you?" scene keeps its own motion. */
:root { --hp-ease: cubic-bezier(0.23, 1, 0.32, 1); }

/* Press feedback on every button. */
html body main :is(.hp-price__btn, .hero-btn, .hp8-course__submit, .bl-funnel__go, .hp-price__card .hp-price__btn) {
  transition: transform 160ms var(--hp-ease), background-color 200ms var(--hp-ease), color 200ms var(--hp-ease);
}
html body main :is(.hp-price__btn, .hero-btn, .hp8-course__submit, .bl-funnel__go):active { transform: scale(0.97); }

@media (hover: hover) and (pointer: fine) {
  /* Cards answer the pointer. */
  html body main :is(.hp-free__card, .hp-promise__card, .hp-price__card) {
    transition: translate 260ms var(--hp-ease), background-color 220ms var(--hp-ease);
  }
  html body main :is(.hp-free__card, .hp-promise__card, .hp-price__card):hover { translate: 0 -4px; }
  /* Link arrows nudge. */
  html body main :is(.hp-free__link, .hp-cost__link) span[aria-hidden="true"] {
    display: inline-block;
    transition: translate 220ms var(--hp-ease);
  }
  html body main :is(.hp-free__link, .hp-cost__link):hover span[aria-hidden="true"] { translate: 4px 0; }
}

@media (prefers-reduced-motion: no-preference) {
  /* The hero figure settles in once on load. */
  html body main .hp-penny__big { animation: hp-settle 700ms var(--hp-ease) 150ms both; }

  @supports (animation-timeline: view()) {
    /* Each part rises in as it enters, finished by the time it is a third of the
       way up the screen. Neighbours are staggered a little. */
    html body main :is(.hp-how__step, .hp-price__card, .hp-free__card, .hp-fit__col,
      .hp-cost__result, .hp-promise__card, .rt__stop, .hp-cases__h2, .hp-promise__title,
      .hpv3-start__h2, .hp-cost__h2, .hp-team__title, .hp-taste-art) {
      animation: hp-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 40%;
    }
    html body main :is(.hp-how__step, .hp-price__card, .hp-free__card, .hp-promise__card, .rt__stop):nth-child(2) { animation-range: entry 5% entry 45%; }
    html body main :is(.hp-how__step, .hp-price__card, .hp-free__card, .hp-promise__card, .rt__stop):nth-child(3) { animation-range: entry 10% entry 50%; }
    html body main :is(.hp-how__step, .hp-price__card):nth-child(4) { animation-range: entry 15% entry 55%; }
    /* The cost figure grows as the calculator comes into view. */
    html body main .hp-cost__num {
      animation: hp-grow linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 35%;
    }
  }
}
@keyframes hp-rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes hp-settle { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes hp-grow { from { opacity: 0.2; scale: 0.92; } to { opacity: 1; scale: 1; } }

/* 11. Stage 4c: drawn pictures for the three promises (measured first, checked
       before it goes out, yours to keep). Six colours, no words, no photos. */
html body main .hp-taste-art {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 320 / 140;
  margin: 0 0 22px;
  border-radius: 12px;
  background: rgba(175, 196, 221, 0.3);
}

/* 12. Stage 5a: section rhythm. Keeps the site's inset rounded panels.
       Order now alternates: hero white, how blue, problems white, prices blue,
       calculator white, team dark, promises blue, next steps white with the
       dark card, sign-up white, footer dark. Before, prices and calculator were
       two blue panels back to back and the promises sat on plain white. */
html body main .hp-how,
html body main .hpv3-start {
  background: rgba(175, 196, 221, 0.3);
}
/* Calculator: off the blue, so it reads as its own white chapter. */
html body main .hp-cost__inner {
  background: transparent;
}
/* Promises: a blue panel of their own, cards in Off-White on it. */
html body main .hp-promise {
  margin: clamp(8px, 2vw, 24px) clamp(8px, 1.4vw, 20px) 0;
  border-radius: clamp(20px, 3vw, 36px);
  background: rgba(175, 196, 221, 0.3);
  padding-bottom: clamp(56px, 8vw, 120px) !important;
}
html body main .hp-promise__card {
  background-color: #FAFAF8;
}
html body main .hp-promise .hp-taste-art {
  background: rgba(175, 196, 221, 0.3);
}

/* 13. Stage 5b: phone layout pass (Kristian, 15 Oct 2026).
   Even section spacing, even card padding, and every tap target at least 44px tall. */
@media (max-width: 767px) {
  html body main .hp-pain,
  html body main .hp-team,
  html body main .hp-promise,
  html body main .hp8-later { padding-top: 64px !important; padding-bottom: 64px !important; }
  html body main .hpv3-start { padding-top: 48px !important; padding-bottom: 48px !important; }

  html body main .hp-pain__card,
  html body main .hp-free__card,
  html body main .hp-fit__col,
  html body main .hp-promise__card { padding: 24px 22px !important; }
  html body main .hp-price__card { padding: 30px 22px 24px !important; }
  html body main .hp-how__step { padding: 18px !important; }

  html body main .hp-pain__svc,
  html body main .hp-free__link,
  html body main .hp-cost__link,
  html body main .hp-penny__why,
  html body main .hp-insolv__num {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }
}

/* 14. One vertical spacing scale (Kristian, 15 Oct 2026: "spacing between the
   sections, tabs, cards vertically all look mismatched").
   Section padding: 128px desktop, 64px phone.  Heading to its lead line: 16px.
   Heading or lead to content: 48px.  Between blocks in a section: 80px.
   Between cards: 20px.  Inset panels sit 24px in from their neighbours. */
:root { --hp-sec: clamp(64px, 9vw, 128px); --hp-head: 16px; --hp-content: clamp(32px, 3.4vw, 48px); --hp-block: clamp(56px, 5.6vw, 80px); }

html body main :is(.hp-pain, .hpv3-start, .hp-cost, .hp-team, .hp-promise, .bl-funnel, .hp8-later) {
  padding-top: var(--hp-sec) !important;
  padding-bottom: var(--hp-sec) !important;
}
html body main :is(.hp-how, .hp-team, .hp-promise) { margin-top: 24px !important; }

html body main :is(.hp-pain, .hpv3-start, .hp-cost, .hp-team, .hp-promise, .hp8-later) h2 { margin-bottom: 0 !important; }
html body main :is(.hp-pain, .hpv3-start, .hp-cost, .hp-team, .hp-promise, .hp8-later) h2 + p { margin-top: var(--hp-head) !important; margin-bottom: 0 !important; }
html body main :is(.hp-pain, .hpv3-start, .hp-cost, .hp-team, .hp-promise, .hp8-later) h2 + p + :not(p),
html body main :is(.hp-pain, .hpv3-start, .hp-cost, .hp-team, .hp-promise, .hp8-later) h2 + :not(p) { margin-top: var(--hp-content) !important; }

html body main .hp-founder { margin-top: var(--hp-block) !important; }
html body main .hpv3-start__vat { margin-top: 24px !important; margin-bottom: 0 !important; }
html body main :is(.hp-free, .hp-fit, .hp-tools) { margin-top: var(--hp-block) !important; margin-bottom: 0 !important; }
html body main .hp-how__steps { gap: 20px !important; }
html body main .bl-funnel h2 { margin-bottom: 0 !important; }
html body main .bl-funnel h2 + * { margin-top: var(--hp-content) !important; }
html body main .hp-how h2 + p { margin-top: var(--hp-head) !important; }
html body main .hp-price + .hp-price { margin-top: var(--hp-content) !important; }

/* 15. Case studies carousel (Kristian, 15 Oct 2026): heading on the homepage h2 scale. */
html body main .hp-cs h2 { font-size: clamp(30px, 3.9vw, 54px) !important; line-height: 1.08 !important; margin: 0 !important; }