/* ==========================================================================
   Convello — assets/css/style.css
   1. Tokens          6. Container / layout   11. Reusable components
   2. Reset           7. Header               12. Forms
   3. Base / global   8. Navigation           13. Footer
   4. Typography      9. Hero                 14. Responsive
   5. Utilities      10. Page sections        15. Overrides
   ========================================================================== */


/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
  /* Colour — ground */
  --colour-ink: #0b0b0c;
  --colour-black: #08080a;
  --colour-white: #ffffff;
  --colour-sand: #f4f3f1;
  --colour-sand-light: #f7f6f4;

  /* Colour — brand */
  --colour-violet: oklch(0.7 0.14 285);
  --colour-violet-mid: oklch(0.62 0.15 288);
  --colour-violet-deep: oklch(0.35 0.09 288);
  --colour-violet-glow: oklch(0.5 0.16 288);
  --colour-violet-bright: oklch(0.62 0.19 288);
  --colour-teal: oklch(0.72 0.13 175);
  --colour-teal-deep: oklch(0.45 0.1 205);
  --colour-green: oklch(0.72 0.16 150);
  --colour-green-ink: #04120a;
  --colour-error: oklch(0.52 0.2 27);

  /* Colour — Trustpilot */
  --colour-trustpilot: #00b67a;

  /* Colour — ink on light */
  --ink-72: rgba(11, 11, 12, 0.72);
  --ink-72: rgba(11, 11, 12, 0.72);
  --ink-70: rgba(11, 11, 12, 0.7);
  --ink-68: rgba(11, 11, 12, 0.68);
  --ink-66: rgba(11, 11, 12, 0.66);
  --ink-62: rgba(11, 11, 12, 0.62);
  --ink-65: rgba(11, 11, 12, 0.65);
  --ink-60: rgba(11, 11, 12, 0.6);
  --ink-58: rgba(11, 11, 12, 0.58);
  --ink-55: rgba(11, 11, 12, 0.55);
  --ink-50: rgba(11, 11, 12, 0.5);
  --ink-45: rgba(11, 11, 12, 0.45);
  --ink-35: rgba(11, 11, 12, 0.35);
  --ink-30: rgba(11, 11, 12, 0.3);
  --ink-28: rgba(11, 11, 12, 0.28);
  --ink-22: rgba(11, 11, 12, 0.22);
  --ink-16: rgba(11, 11, 12, 0.16);
  --ink-14: rgba(11, 11, 12, 0.14);
  --ink-12: rgba(11, 11, 12, 0.12);
  --ink-10: rgba(11, 11, 12, 0.1);
  --ink-09: rgba(11, 11, 12, 0.09);
  --ink-08: rgba(11, 11, 12, 0.08);

  /* Colour — white on dark */
  --paper-85: rgba(255, 255, 255, 0.85);
  --paper-82: rgba(255, 255, 255, 0.82);
  --paper-80: rgba(255, 255, 255, 0.8);
  --paper-78: rgba(255, 255, 255, 0.78);
  --paper-72: rgba(255, 255, 255, 0.72);
  --paper-68: rgba(255, 255, 255, 0.68);
  --paper-66: rgba(255, 255, 255, 0.66);
  --paper-65: rgba(255, 255, 255, 0.65);
  --paper-60: rgba(255, 255, 255, 0.6);
  --paper-58: rgba(255, 255, 255, 0.58);
  --paper-55: rgba(255, 255, 255, 0.55);
  --paper-50: rgba(255, 255, 255, 0.5);
  --paper-45: rgba(255, 255, 255, 0.45);
  --paper-30: rgba(255, 255, 255, 0.3);
  --paper-28: rgba(255, 255, 255, 0.28);
  --paper-26: rgba(255, 255, 255, 0.26);
  --paper-24: rgba(255, 255, 255, 0.24);
  --paper-20: rgba(255, 255, 255, 0.2);
  --paper-18: rgba(255, 255, 255, 0.18);
  --paper-16: rgba(255, 255, 255, 0.16);
  --paper-14: rgba(255, 255, 255, 0.14);
  --paper-12: rgba(255, 255, 255, 0.12);
  --paper-10: rgba(255, 255, 255, 0.1);
  --paper-08: rgba(255, 255, 255, 0.08);
  --paper-06: rgba(255, 255, 255, 0.06);
  --paper-04: rgba(255, 255, 255, 0.04);

  /* Type families */
  --font-sans: 'Schibsted Grotesk', Helvetica, Arial, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;

  /* Type scale — every size the design draws, named by its value */
  --text-9: 9px;
  --text-10-5: 10.5px;
  --text-11: 11px;
  --text-11-5: 11.5px;
  --text-12: 12px;
  --text-12-5: 12.5px;
  --text-13: 13px;
  --text-13-5: 13.5px;
  --text-14: 14px;
  --text-14-5: 14.5px;
  --text-15: 15px;
  --text-15-5: 15.5px;
  --text-16: 16px;
  --text-16-5: 16.5px;
  --text-17: 17px;
  --text-17-5: 17.5px;
  --text-18: 18px;
  --text-18-5: 18.5px;
  --text-19: 19px;
  --text-20: 20px;
  --text-21: 21px;
  --text-22: 22px;
  --text-23: 23px;
  --text-24: 24px;
  --text-25: 25px;
  --text-26: 26px;
  --text-27: 27px;
  --text-30: 30px;
  --text-42: 42px;
  --text-62: 62px;
  --text-64: 64px;

  /* Type scale — fluid display steps */
  --display-home: clamp(52px, 6.8vw, 108px);
  --display-1: clamp(52px, 6.6vw, 104px);
  --display-2: clamp(48px, 6.2vw, 96px);
  --display-3: clamp(46px, 6vw, 92px);
  --display-4: clamp(40px, 4.4vw, 68px);
  --display-5: clamp(38px, 4.4vw, 70px);
  --display-6: clamp(36px, 4vw, 62px);
  --display-7: clamp(34px, 3.8vw, 60px);
  --display-8: clamp(32px, 3.6vw, 54px);
  --display-9: clamp(30px, 3vw, 46px);
  --display-10: clamp(26px, 2.4vw, 38px);
  --display-heading-lg: clamp(34px, 3.6vw, 56px);
  --display-contact: clamp(42px, 5vw, 74px);
  --display-step: clamp(40px, 4.4vw, 68px);
  --display-section: clamp(36px, 4vw, 62px);
  --display-plan: clamp(38px, 4.4vw, 68px);
  --display-why: clamp(38px, 4.2vw, 68px);
  --display-options: clamp(34px, 3.8vw, 60px);
  --display-split: clamp(38px, 4.6vw, 72px);
  --display-split-card: clamp(30px, 3vw, 46px);
  --display-plan-title: clamp(32px, 3.2vw, 50px);
  --display-11: clamp(24px, 2.4vw, 34px);

  /* Weights */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;
  --weight-black: 800;

  /* Tracking */
  --track-display: -0.05em;
  --track-tight: -0.04em;
  --track-snug: -0.02em;
  --track-mono: 0.12em;

  /* Space */
  --space-4: 4px;
  --space-6: 6px;
  --space-8: 8px;
  --space-10: 10px;
  --space-12: 12px;
  --space-13: 13px;
  --space-14: 14px;
  --space-15: 15px;
  --space-16: 16px;
  --space-17: 17px;
  --space-18: 18px;
  --space-20: 20px;
  --space-22: 22px;
  --space-24: 24px;
  --space-26: 26px;
  --space-28: 28px;
  --space-30: 30px;
  --space-32: 32px;
  --space-34: 34px;
  --space-36: 36px;
  --space-38: 38px;
  --space-40: 40px;
  --space-44: 44px;
  --space-46: 46px;
  --space-48: 48px;
  --space-52: 52px;
  --space-56: 56px;
  --space-60: 60px;
  --space-64: 64px;
  --space-72: 72px;

  /* Vertical section rhythm — fluid, matching the drawn desktop values */
  --section-gap: clamp(56px, 8vw, 104px);
  --section-gap-lg: clamp(60px, 8.6vw, 110px);
  --section-gap-sm: clamp(48px, 7vw, 96px);
  --section-gap-xs: clamp(44px, 6.4vw, 88px);

  /* Radii */
  --radius-10: 10px;
  --radius-12: 12px;
  --radius-14: 14px;
  --radius-16: 16px;
  --radius-18: 18px;
  --radius-20: 20px;
  --radius-22: 22px;
  --radius-24: 24px;
  --radius-26: 26px;
  --radius-30: 30px;
  --radius-32: 32px;
  --radius-34: 34px;
  --radius-40: 40px;
  --radius-pill: 999px;
  --radius-circle: 50%;
  /* Shadows */
  --shadow-panel: 0 24px 60px rgba(11, 11, 12, 0.14);
  --shadow-deep: 0 40px 120px rgba(6, 6, 8, 0.45);
  --shadow-glow: 0 18px 44px rgba(255, 255, 255, 0.22);
  --shadow-glow-lg: 0 20px 50px rgba(255, 255, 255, 0.2);
  --shadow-glow-xl: 0 20px 50px rgba(255, 255, 255, 0.22);

  /* Layout */
  --container: 1280px;
  --container-hero: 1180px;
  --container-prose: 760px;
  --gutter: 20px;

  /* Motion */
  --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
  --ease-soft: cubic-bezier(0.2, 0.7, 0.2, 1);
  --transition-fast: 0.22s;
  --transition-base: 0.25s;
  --transition-slow: 0.3s;
  --transition-card: 0.45s;
  --transition-reveal: 0.8s;

  /* Layers */
  --layer-header: 60;
  --layer-dropdown: 80;
  --layer-drawer: 90;
  --layer-modal: 200;
}


/* ==========================================================================
   2. Reset
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

table {
  border-collapse: collapse;
}

/* !important is required: [hidden] is a UA rule and loses to any class that
   sets display, which would leave hidden panels visible. */
[hidden] {
  display: none !important;
}


/* ==========================================================================
   3. Base / global
   ========================================================================== */

@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/schibsted-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'Schibsted Grotesk';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('../fonts/schibsted-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url('../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

body {
  margin: 0;
  background: var(--colour-white);
  color: var(--colour-ink);
  font-family: var(--font-sans);
  font-size: var(--text-16);
  line-height: normal;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--colour-ink);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--colour-violet-mid);
}

::selection {
  background: var(--colour-violet);
  color: var(--colour-white);
}

:focus-visible {
  outline: 2px solid var(--colour-violet-mid);
  outline-offset: 3px;
  border-radius: 2px;
}

.is-dark :focus-visible,

.skip-link {
  position: absolute;
  top: var(--space-12);
  left: var(--space-12);
  z-index: var(--layer-modal);
  padding: var(--space-12) var(--space-20);
  border-radius: var(--radius-pill);
  background: var(--colour-ink);
  color: var(--colour-white);
  font-size: var(--text-14-5);
  font-weight: var(--weight-semibold);
  transform: translateY(calc(-100% - var(--space-24)));
  transition: transform var(--transition-base) var(--ease-out);
}

.skip-link:focus-visible {
  color: var(--colour-white);
  transform: translateY(0);
}

@keyframes drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(6%, -8%, 0) scale(1.18); }
  100% { transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes drift-alt {
  0% { transform: translate3d(0, 0, 0) scale(1.1); }
  50% { transform: translate3d(-9%, 7%, 0) scale(0.9); }
  100% { transform: translate3d(0, 0, 0) scale(1.1); }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.25; }
}


/* ==========================================================================
   4. Typography
   ========================================================================== */

h1,
h2,
h3,
h4 {
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-snug);
  line-height: normal;
}

strong {
  font-weight: var(--weight-bold);
}


.stat {
  display: block;
  font-size: var(--text-42);
  font-weight: var(--weight-black);
  letter-spacing: -0.045em;
}

.stat__label {
  display: block;
  max-width: 22ch;
  margin-block-start: var(--space-4);
  font-size: var(--text-14-5);
  color: var(--ink-60);
}


/* ==========================================================================
   5. Utilities
   ========================================================================== */

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


/* Reveal-on-scroll is opt-in: general.js arms each element the moment it runs,
   so content stays visible if the script never loads and no inline script is
   needed to prevent a flash. */
[data-reveal].is-armed {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity var(--transition-reveal) var(--ease-soft) var(--reveal-delay, 0ms),
    transform var(--transition-reveal) var(--ease-soft) var(--reveal-delay, 0ms);
}

[data-reveal].is-armed.is-revealed {
  opacity: 1;
  transform: none;
}


/* ==========================================================================
   6. Container / layout
   ========================================================================== */

/* The design gives sections one of four top paddings; these re-space any
   section that reads --section-pad, and are how the ACF "section spacing"
   select will drive it. */
.gap-md { --section-pad: var(--section-gap); }
.gap-lg { --section-pad: var(--section-gap-lg); }


/* Full-bleed gutter with a full-width inner panel — as drawn on the CTA bands */


/* ==========================================================================
   7. Header
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--layer-header);
  background: rgba(255, 255, 255, 0.72);
  border-bottom: 1px solid var(--ink-08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-28);
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--space-14) var(--gutter);
}

.site-header__logo {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  flex-shrink: 0;
}

.site-header__logo:hover {
  color: var(--colour-ink);
}

.site-header__wordmark {
  font-size: var(--text-22);
  font-weight: var(--weight-black);
  letter-spacing: var(--track-tight);
}

.site-header__dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  background: var(--colour-violet);
  transform: translateY(-2px);
}

.site-header__cta {
  flex-shrink: 0;
  margin-inline-start: auto;
}

.site-header__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-inline-start: auto;
  border-radius: var(--radius-circle);
  color: var(--colour-ink);
}

.site-header__toggle-bars {
  position: relative;
  display: block;
  width: 20px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: currentColor;
  transition: background var(--transition-fast);
}

.site-header__toggle-bars::before,
.site-header__toggle-bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 20px;
  height: 2px;
  border-radius: var(--radius-pill);
  background: currentColor;
  transition: transform var(--transition-fast) var(--ease-out);
}

.site-header__toggle-bars::before { top: -6px; }
.site-header__toggle-bars::after { top: 6px; }

.site-header__toggle[aria-expanded='true'] .site-header__toggle-bars {
  background: transparent;
}

.site-header__toggle[aria-expanded='true'] .site-header__toggle-bars::before {
  transform: translateY(6px) rotate(45deg);
}

.site-header__toggle[aria-expanded='true'] .site-header__toggle-bars::after {
  transform: translateY(-6px) rotate(-45deg);
}
.has-drawer-open .site-header{background: #ffffff;}

/* ==========================================================================
   8. Navigation
   ========================================================================== */

.primary-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-22);
  font-size: var(--text-14-5);
  font-weight: var(--weight-medium);
}

.primary-nav__item--has-children {
  position: relative;
  display: flex;
  align-items: center;
  gap: 6px;
}

.primary-nav__link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-8) 0;
  color: var(--ink-66);
}

.primary-nav__link:hover,
.primary-nav__link[aria-current='page'] {
  color: var(--colour-ink);
}

.primary-nav__caret {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-8) 0;
  color: var(--ink-66);
  transition: color var(--transition-base);
}

/* The caret is a 9px glyph by design; this gives it a 44px target without
   changing the drawn layout. */
.primary-nav__caret::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}

.primary-nav__caret:hover,
.primary-nav__caret[aria-expanded='true'] {
  color: var(--colour-ink);
}

.primary-nav__caret-glyph {
  display: block;
  font-size: var(--text-9);
  line-height: 1;
  opacity: 0.55;
  transition: transform var(--transition-base);
}

.primary-nav__caret[aria-expanded='true'] .primary-nav__caret-glyph {
  transform: rotate(180deg);
}

.primary-nav__drop {
  position: absolute;
  top: 100%;
  left: -12px;
  z-index: var(--layer-dropdown);
  padding-top: var(--space-14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity var(--transition-fast) ease,
    transform var(--transition-fast) var(--ease-out),
    visibility var(--transition-fast);
}

.primary-nav__caret[aria-expanded='true'] ~ .primary-nav__drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.primary-nav__drop-panel {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-10);
  border: 1px solid var(--ink-10);
  border-radius: var(--radius-18);
  background: var(--colour-white);
  box-shadow: var(--shadow-panel);
}

.primary-nav__drop-link {
  display: block;
  padding: 9px var(--space-14);
  border-radius: var(--radius-10);
  font-size: var(--text-14-5);
  font-weight: var(--weight-medium);
  color: var(--ink-72);
  white-space: nowrap;
}

.primary-nav__drop-link:hover {
  background: var(--colour-sand);
  color: var(--colour-ink);
}


/* ==========================================================================
   9. Hero
   ========================================================================== */

/* Blurred drifting backdrop, shared by every dark hero */
.aurora {
  position: absolute;
  inset: -25% -10% auto -10%;
  height: 130%;
  filter: blur(90px);
  opacity: 0.7;
  pointer-events: none;
}

.aurora__blob {
  position: absolute;
  border-radius: var(--radius-circle);
  animation: drift 22s ease-in-out infinite;
}

.aurora__blob--b {
  animation: drift-alt 27s ease-in-out infinite;
}

.aurora--violet .aurora__blob--a {
  left: 12%;
  top: 8%;
  width: 44vw;
  height: 44vw;
  background: var(--colour-violet-bright);
}

.aurora--violet .aurora__blob--b {
  right: 8%;
  top: 30%;
  width: 32vw;
  height: 32vw;
  background: oklch(0.6 0.16 320);
}

.aurora--violet { opacity: 0.72; }

.aurora--dual .aurora__blob--a {
  left: 8%;
  top: 10%;
  width: 40vw;
  height: 40vw;
  background: var(--colour-violet-bright);
}

.aurora--dual .aurora__blob--b {
  right: 4%;
  top: 30%;
  width: 32vw;
  height: 32vw;
  background: oklch(0.68 0.14 200);
}

.aurora--business .aurora__blob--a {
  left: 10%;
  top: 10%;
  width: 42vw;
  height: 42vw;
  background: oklch(0.6 0.14 195);
}

.aurora--business .aurora__blob--b {
  right: 6%;
  top: 28%;
  width: 34vw;
  height: 34vw;
  background: oklch(0.62 0.13 165);
}

.aurora--service {
  inset: -30% -10% auto -10%;
  height: 140%;
  filter: blur(100px);
  opacity: 0.6;
}

.aurora--service .aurora__blob--a {
  left: 4%;
  top: 12%;
  width: 46%;
  height: 62%;
  background: var(--colour-violet-glow);
  animation-duration: 24s;
}

.aurora--service .aurora__blob--b {
  right: 2%;
  top: 26%;
  width: 40%;
  height: 56%;
  background: var(--colour-teal-deep);
  animation-duration: 30s;
}

.aurora--band {
  inset: auto -10% -60% 20%;
  height: 120%;
  filter: blur(100px);
  opacity: 0.5;
}

.aurora--band .aurora__blob--a {
  left: 0;
  top: 0;
  width: 32vw;
  height: 32vw;
  background: oklch(0.6 0.18 288);
  animation-duration: 21s;
}

.aurora--band .aurora__blob--b {
  right: 0;
  top: 20%;
  width: 26vw;
  height: 26vw;
  background: oklch(0.66 0.13 190);
  animation-duration: 26s;
}

.aurora--quiet {
  filter: blur(110px);
  opacity: 0.16;
}

.aurora--quiet .aurora__blob--a {
  left: 6%;
  top: 8%;
  width: 38vw;
  height: 38vw;
  background: var(--colour-violet-bright);
}

.aurora--quiet .aurora__blob--b {
  right: 6%;
  top: 34%;
  width: 30vw;
  height: 30vw;
  background: oklch(0.68 0.14 200);
}

/* Full hero — Home, Personal, Business, Lite, Plus, Free Trial, About */
.hero-banner {
  position: relative;
  overflow: hidden;
  padding-inline: var(--gutter);
  background: var(--colour-black);
  color: var(--colour-white);
}

.hero-banner__inner {
  position: relative;
  width: 100%;
  max-width: var(--container-hero);
  margin-inline: auto;
  padding-block:
    var(--hero-pad-top, clamp(72px, 9vw, 118px))
    var(--hero-pad-bottom, clamp(76px, 9.4vw, 124px));
}


.hero-banner__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-11-5);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--paper-60);
}

/* Sector / section marker above the pill ("Business · Construction"). */
.hero-banner__kicker {
  margin-block-end: var(--space-12);
  font-family: var(--font-mono);
  font-size: var(--text-11-5);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--paper-60);
}

/* Each hero sets its own title metrics through these three custom properties;
   the component itself is defined once. */
.hero-banner__title {
  max-width: var(--hero-title-width, 14ch);
  margin-block-start: var(--hero-title-gap, var(--space-26));
  font-size: var(--hero-title-size, var(--display-1));
  font-weight: var(--weight-black);
  letter-spacing: var(--track-display);
  line-height: var(--hero-title-leading, 0.92);
  text-wrap: var(--hero-title-wrap, wrap);
}

.hero-banner--about {
  --hero-pad-bottom: clamp(74px, 9.2vw, 122px);
  --hero-title-width: 20ch;
  --hero-title-gap: var(--space-20);
  --hero-title-size: var(--display-3);
  --hero-title-leading: 0.94;
  --hero-title-wrap: balance;
  --hero-lede-width: 620px;
}

.hero-banner--trial {
  --hero-pad-top: clamp(72px, 8.8vw, 116px);
  --hero-title-width: 17ch;
  --hero-title-gap: var(--space-20);
  --hero-title-size: var(--display-3);
  --hero-title-leading: 0.94;
  --hero-title-wrap: balance;
}

.hero-banner--trial .hero-banner__actions {
  align-items: center;
  margin-block-start: var(--space-36);
}

.hero-banner--trial .btn--ghost {
  --btn-pad-y: var(--space-18);
  --btn-pad-x: var(--space-28);
  border-color: var(--paper-28);
}

.hero-banner--trial .btn--solid {
  --btn-pad-y: var(--space-18);
  --btn-pad-x: var(--space-32);
  --btn-size: var(--text-17);
}

.hero-banner--trial .btn--solid:hover {
  box-shadow: var(--shadow-glow-xl);
}

.hero-banner__note {
  margin-block-start: var(--space-18);
  font-size: var(--text-15);
  color: var(--paper-60);
}

.hero-banner__steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-26);
  max-width: 900px;
  margin-block-start: var(--space-52);
  padding-block-start: var(--space-28);
  border-top: 1px solid var(--paper-12);
}

.hero-banner__step-index {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--paper-45);
}

.hero-banner__step-label {
  margin-block-start: var(--space-8);
  font-size: var(--text-16-5);
  font-weight: var(--weight-semibold);
}

.hero-banner--business {
  --hero-lede-width: 580px;
}

.hero-banner--business .pill__dot {
  background: oklch(0.8 0.14 175);
}

.hero-banner--home {
  --hero-title-width: 16ch;
  --hero-title-size: var(--display-home);
  --hero-title-wrap: balance;
  --hero-lede-width: 600px;
}

.hero-banner--home .hero-banner__inner {
  padding-block: clamp(80px, 9.2vw, 132px) clamp(84px, 9.8vw, 140px);
  text-align: center;
}

.hero-banner--home .hero-banner__title,
.hero-banner--home .hero-banner__lede {
  margin-inline: auto;
}

.hero-banner--home .hero-banner__actions {
  justify-content: center;
}

.hero-banner--home .pill__dot {
  background: oklch(0.78 0.16 150);
}

.hero-banner__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-22);
  margin-block-start: var(--space-40);
  font-size: var(--text-14);
  color: var(--paper-58);
}

.hero-banner__trust strong {
  color: var(--colour-white);
  font-weight: var(--weight-semibold);
}

.hero-banner__trust-divider {
  color: var(--paper-30);
}

.aurora--home {
  opacity: 0.75;
}

.aurora--home .aurora__blob--a {
  left: 10%;
  top: 8%;
  width: 44vw;
  height: 44vw;
  background: var(--colour-violet-bright);
}

.aurora--home .aurora__blob--b {
  right: 6%;
  top: 26%;
  width: 34vw;
  height: 34vw;
  background: oklch(0.68 0.14 200);
}

.aurora--home .aurora__blob--c {
  left: 40%;
  bottom: -12%;
  width: 30vw;
  height: 30vw;
  background: oklch(0.55 0.16 320);
  animation: drift 19s ease-in-out infinite;
}

/* Personal, Business, Lite and Plus pad their hero ghost button 26px; Home,
   About and Free Trial use the default 28px. */
.hero-banner--personal .btn--ghost,
.hero-banner--business .btn--ghost {
  --btn-pad-x: var(--space-26);
}

.hero-banner__lede {
  max-width: var(--hero-lede-width, 560px);
  margin-block-start: var(--space-26);
  font-size: var(--text-20);
  line-height: 1.5;
  color: var(--paper-66);
}

.hero-banner__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-block-start: clamp(24px, 3vw, 34px);
}

.hero-banner__stats .stat__label {
  color: var(--paper-60);
}

.hero-banner__stats {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-28);
  margin-block-start: clamp(32px, 3.8vw, 44px);
  padding-block-start: var(--space-28);
  border-top: 1px solid var(--paper-12);
}

/* Compact hero — the five service pages */
.hero-compact {
  position: relative;
  overflow: hidden;
  padding: clamp(64px, 8vw, 96px) var(--gutter) clamp(72px, 8.6vw, 104px);
  background: var(--colour-black);
  color: var(--colour-white);
}

.hero-compact__inner {
  position: relative;
  max-width: var(--container);
  margin-inline: auto;
}

.hero-compact__title {
  max-width: 16ch;
  margin-block-start: var(--space-26);
  font-size: var(--display-2);
  font-weight: var(--weight-black);
  letter-spacing: var(--track-display);
  line-height: 0.93;
  text-wrap: balance;
}

.hero-compact__lede {
  max-width: 620px;
  margin-block-start: var(--space-26);
  font-size: var(--text-20);
  line-height: 1.5;
  color: var(--paper-68);
  text-wrap: pretty;
}

.hero-compact__badge {
  margin-block-start: clamp(24px, 3vw, 34px);
}


/* ==========================================================================
   10. Page sections
   ========================================================================== */

/* --- audience-split ------------------------------------------------------
   Same progressive-enhancement pattern as trial-scrub: a plain two-card block
   by default, scroll-scrubbed once .is-scrub is added.
   ------------------------------------------------------------------------ */

.audience-split {
  background: var(--colour-white);
}

.audience-split__sticky {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-block: var(--section-gap);
  background: var(--colour-white);
  color: var(--colour-ink);
}

.audience-split__glow {
  position: absolute;
  inset: -20%;
  filter: blur(120px);
  opacity: 0.22;
  pointer-events: none;
}

.audience-split__glow .aurora__blob--a {
  left: 18%;
  top: 18%;
  width: 38vw;
  height: 38vw;
  background: oklch(0.6 0.18 288);
  animation-duration: 23s;
}

.audience-split__glow .aurora__blob--b {
  right: 14%;
  bottom: 10%;
  width: 32vw;
  height: 32vw;
  background: oklch(0.66 0.13 180);
  animation-duration: 28s;
}

.audience-split__inner {
  position: relative;
  width: 100%;
  max-width: var(--container);
  padding-inline: var(--gutter);
}

.audience-split__head {
  text-align: center;
  will-change: transform, opacity;
}

.audience-split__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-11-5);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-50);
}

.audience-split__title {
  margin-block-start: var(--space-14);
  font-size: var(--display-split);
  font-weight: var(--weight-black);
  letter-spacing: -0.045em;
  line-height: 0.96;
}

.audience-split__lede {
  max-width: 520px;
  margin: var(--space-16) auto 0;
  font-size: var(--text-17-5);
  line-height: 1.55;
  color: var(--ink-62);
}

.audience-split__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-20);
  margin-block-start: var(--space-46);
}

.split-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-26);
  min-height: 320px;
  padding: var(--space-38) var(--space-36) var(--space-34);
  border: 1px solid var(--ink-12);
  border-radius: var(--radius-32);
  background: var(--colour-white);
  color: var(--colour-ink);
  will-change: transform, opacity;
  transition: border-color 0.35s, background 0.35s;
}

.split-card:hover {
  border-color: var(--colour-ink);
  background: var(--colour-sand);
  color: var(--colour-ink);
}

.split-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-55);
}

.split-card__dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-circle);
  background: var(--colour-violet);
}

.split-card__dot--teal {
  background: var(--colour-teal);
}

.split-card__title {
  margin-block-start: var(--space-18);
  font-size: var(--display-split-card);
  font-weight: var(--weight-black);
  letter-spacing: -0.04em;
  line-height: 1;
}

.split-card__body {
  max-width: 34ch;
  margin-block-start: var(--space-14);
  font-size: var(--text-16-5);
  line-height: 1.5;
  color: var(--ink-62);
}

.audience-split.is-scrub {
  position: relative;
  height: 240vh;
}

.audience-split.is-scrub .audience-split__sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  padding-block: 0;
}

/* --- start-options ------------------------------------------------------- */

.start-options {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--section-pad, var(--section-gap-sm)) var(--gutter) 0;
}

.start-options .section-head__title {
  max-width: 20ch;
  font-size: var(--display-options);
}

.start-options__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  align-items: stretch;
  margin-block-start: var(--space-40);
}

.option {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
  padding: var(--space-32);
  border-radius: var(--radius-26);
  background: var(--colour-sand);
  transition: transform var(--transition-card) var(--ease-out);
}

.option--ink {
  background: var(--colour-ink);
  color: var(--colour-white);
}

.option__index {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-45);
}

.option--ink .option__index {
  color: var(--paper-45);
}

.option__title {
  font-size: var(--text-24);
  font-weight: var(--weight-black);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.option__spacer {
  flex: 1;
}

.option__cta {
  --btn-pad-y: var(--space-15);
  --btn-pad-x: var(--space-24);
  --btn-size: var(--text-15-5);
  margin-block-start: 6px;
  align-self: stretch;
  background: var(--colour-ink);
  color: var(--colour-white);
}

.option__cta:hover {
  color: var(--colour-white);
  transform: translateY(-2px);
}

.option--ink .option__cta {
  background: var(--colour-white);
  color: var(--colour-black);
}

.option--ink .option__cta:hover {
  color: var(--colour-black);
}

/* --- tick list ----------------------------------------------------------- */

.tick-list {
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: var(--text-15);
  line-height: 1.5;
  color: var(--ink-65);
}

.option--ink .tick-list {
  color: var(--paper-72);
}

.tick-list__item {
  display: flex;
  gap: var(--space-10);
}

.tick-list__mark {
  flex: none;
  font-weight: var(--weight-black);
  color: var(--colour-ink);
}

.option--ink .tick-list__mark {
  color: var(--colour-white);
}

.tick-list strong {
  color: var(--colour-ink);
  font-weight: var(--weight-bold);
}

.option--ink .tick-list strong {
  color: var(--colour-white);
}

/* --- benefits-grid ------------------------------------------------------- */

.benefits-grid {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--section-pad, var(--section-gap-lg)) var(--gutter) 0;
}

.benefits-grid__title {
  font-size: var(--display-why);
  font-weight: var(--weight-black);
  letter-spacing: -0.045em;
  line-height: 0.98;
  text-wrap: balance;
}

.benefits-grid__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  margin-block-start: var(--space-40);
}

/* --- review-wall --------------------------------------------------------- */

.review-wall {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--section-pad, var(--section-gap-lg)) var(--gutter) 0;
}

.review-wall__rating {
  display: flex;
  align-items: center;
  gap: var(--space-10);
}

.review-wall__mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--colour-trustpilot);
  color: var(--colour-white);
  font-size: var(--text-15);
  line-height: 1;
}

.review-wall__brand {
  font-size: var(--text-16);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
}

.review-wall__score {
  font-size: var(--text-15);
  color: var(--ink-55);
}

.review-wall__title {
  max-width: 22ch;
  margin-block-start: var(--space-18);
  font-size: var(--display-7);
  font-weight: var(--weight-black);
  letter-spacing: -0.045em;
  line-height: 0.98;
  text-wrap: balance;
}

.review-wall__link {
  --btn-pad-y: var(--space-15);
  --btn-pad-x: var(--space-26);
  --btn-size: var(--text-15-5);
  border-color: var(--ink-16);
}

.review-wall__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  align-items: stretch;
  margin-block-start: var(--space-40);
}

.review {
  display: flex;
  flex-direction: column;
  gap: var(--space-16);
  padding: var(--space-30);
  border-radius: var(--radius-26);
  background: var(--colour-sand);
  transition: transform var(--transition-card) var(--ease-out);
}

.review--ink {
  background: var(--colour-ink);
  color: var(--colour-white);
}

.review__stars {
  display: flex;
  gap: 3px;
}

.review__star {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--colour-trustpilot);
  color: var(--colour-white);
  font-size: var(--text-13);
  line-height: 1;
}

.review__title {
  font-size: var(--text-18-5);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

.review__body {
  font-size: var(--text-15-5);
  line-height: 1.6;
  color: var(--ink-68);
  text-wrap: pretty;
}

.review--ink .review__body {
  color: var(--paper-72);
}

/* Mirrors the drawn card: a flexible spacer sits between the quote and the
   footer, so the footer is pushed down and the row gap above it is preserved. */
.review__spacer {
  flex: 1;
}

.review__meta {
  padding-block-start: var(--space-16);
  border-top: 1px solid var(--ink-12);
  font-size: var(--text-13-5);
  color: var(--ink-50);
}

.review--ink .review__meta {
  border-top-color: var(--paper-16);
  color: var(--paper-50);
}

.review-wall__note {
  margin-block-start: var(--space-22);
  font-size: var(--text-13-5);
  color: var(--ink-45);
}

.cta-band__note {
  font-size: var(--text-13-5);
  color: var(--paper-50);
}

.aurora--band-wide.aurora--home-cta {
  opacity: 0.55;
}

.aurora--band-wide.aurora--home-cta .aurora__blob--b {
  right: 0;
  top: 20%;
  width: 26vw;
  height: 26vw;
  background: oklch(0.66 0.13 190);
  animation-duration: 26s;
}

/* --- trial-scrub ---------------------------------------------------------
   Reads as a plain stacked list of steps. general.js adds .is-scrub on wide
   viewports to turn it into the sticky, scroll-scrubbed sequence.
   ------------------------------------------------------------------------ */

.trial-scrub {
  margin-block-start: var(--scrub-gap, var(--section-gap));
}

.trial-scrub--flush {
  --scrub-gap: 0;
}

.trial-scrub__sticky {
  position: relative;
  overflow: hidden;
  padding: var(--section-gap-sm) 0;
  background: var(--colour-black);
  color: var(--colour-white);
}

.trial-scrub__glow {
  position: absolute;
  inset: -20% -10%;
  filter: blur(110px);
  opacity: 0.45;
  pointer-events: none;
}

.trial-scrub--teal {
  --scrub-rule-width: 180px;
}

.trial-scrub--teal .trial-scrub__blob {
  background: oklch(0.58 0.13 190);
}

.trial-scrub__blob {
  position: absolute;
  left: 24%;
  top: 14%;
  width: 44vw;
  height: 44vw;
  border-radius: var(--radius-circle);
  background: oklch(0.6 0.18 288);
}

.trial-scrub__numeral {
  display: none;
  position: absolute;
  right: 4vw;
  top: 50%;
  z-index: 0;
  font-size: 17vw;
  font-weight: var(--weight-black);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--track-display);
  line-height: 1;
  color: rgba(255, 255, 255, 0.11);
  transform: translateY(-50%);
  pointer-events: none;
}

.trial-scrub__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 900px);
  align-items: center;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.trial-scrub__head {
  display: flex;
  align-items: center;
  gap: var(--space-14);
}

.trial-scrub__label {
  font-family: var(--font-mono);
  font-weight: var(--weight-regular);
  line-height: normal;
  font-size: var(--text-11-5);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--paper-50);
}

.trial-scrub__head-rule {
  flex: 1;
  max-width: var(--scrub-rule-width, 200px);
  height: 1px;
  background: var(--paper-18);
}

.trial-scrub__counter {
  display: none;
  font-family: var(--font-mono);
  font-size: var(--text-11-5);
  letter-spacing: var(--track-mono);
  color: var(--paper-85);
}

.trial-scrub__steps {
  display: grid;
  gap: var(--space-40);
  margin-block-start: var(--space-26);
}

.trial-scrub__title {
  max-width: 17ch;
  font-size: var(--display-step);
  font-weight: var(--weight-black);
  letter-spacing: -0.045em;
  line-height: 0.95;
}

.trial-scrub__body {
  max-width: 44ch;
  margin-block-start: var(--space-18);
  font-size: var(--text-18);
  line-height: 1.55;
  color: var(--paper-66);
}

.trial-scrub__meta {
  margin-block-start: var(--space-20);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper-45);
}

.trial-scrub__rail,
.trial-scrub__bar {
  display: none;
}

/* The rail item's own font-size only sets the line box the index sits in;
   13px reproduces the 16px line box the design draws. */
.trial-scrub__rail-item {
  font-size: var(--text-13);
  padding-block-start: var(--space-14);
  border-top: 2px solid var(--paper-16);
  color: var(--colour-white);
  text-align: left;
  transition: border-color 0.4s, opacity 0.4s;
}

.trial-scrub__rail-index {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: 0.1em;
}

.trial-scrub__rail-label {
  display: block;
  margin-block-start: 5px;
  font-size: var(--text-14-5);
  font-weight: var(--weight-semibold);
}

.trial-scrub__bar-fill {
  display: block;
  height: 100%;
  width: 8%;
  border-radius: var(--radius-pill);
  background: var(--colour-white);
}

/* Scrubbed presentation */
.trial-scrub.is-scrub {
  position: relative;
  height: 420vh;
}

.trial-scrub.is-scrub .trial-scrub__sticky {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  height: 100vh;
  padding: 0;
}

.trial-scrub.is-scrub .trial-scrub__numeral,
.trial-scrub.is-scrub .trial-scrub__counter {
  display: block;
}

.trial-scrub.is-scrub .trial-scrub__steps {
  position: relative;
  display: block;
  min-height: 250px;
}

.trial-scrub.is-scrub .trial-scrub__step {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition:
    opacity 0.5s var(--ease-soft),
    transform 0.5s var(--ease-soft);
}

.trial-scrub.is-scrub .trial-scrub__rail {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-12);
  margin-block-start: var(--space-34);
}

.trial-scrub.is-scrub .trial-scrub__bar {
  display: block;
  overflow: hidden;
  height: 2px;
  margin-block-start: var(--space-22);
  border-radius: var(--radius-pill);
  background: var(--paper-12);
}

/* --- service-cards ------------------------------------------------------- */

.service-cards {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--section-gap) var(--gutter) 0;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-40);
}

.section-head__title {
  font-size: var(--display-section);
  font-weight: var(--weight-black);
  letter-spacing: -0.045em;
  line-height: 0.98;
  text-wrap: balance;
}

.section-head__lede {
  max-width: 380px;
  font-size: var(--text-17);
  line-height: 1.55;
  color: var(--ink-60);
}

.service-cards__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  margin-block-start: var(--space-36);
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  min-height: 210px;
  padding: var(--space-30);
  border: 1px solid var(--ink-10);
  border-radius: var(--radius-24);
  transition: transform var(--transition-card) var(--ease-out), border-color var(--transition-card);
}

.service-card:hover {
  border-color: var(--colour-ink);
  color: var(--colour-ink);
}

.service-card__dot {
  width: 10px;
  height: 10px;
  border-radius: var(--radius-circle);
  background: var(--colour-violet);
}

.service-card__title {
  font-size: var(--text-23);
  font-weight: var(--weight-bold);
  letter-spacing: -0.025em;
}

.service-card__body {
  font-size: var(--text-15-5);
  line-height: 1.5;
  color: var(--ink-60);
}

.service-card--ink,
.service-card--ink:hover {
  justify-content: space-between;
  border: 0;
  background: var(--colour-ink);
  color: var(--colour-white);
}

.service-card--ink .service-card__body {
  color: var(--paper-66);
}

.service-card__action {
  font-size: var(--text-15-5);
  font-weight: var(--weight-bold);
}

/* --- plan-duo ------------------------------------------------------------ */

.plan-duo {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--section-pad, var(--section-gap)) var(--gutter) 0;
}

.plan-duo .section-head__title {
  font-size: var(--display-plan);
  line-height: 0.96;
}

.plan-duo .section-head__lede {
  max-width: 400px;
}

.plan-duo__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-18);
  margin-block-start: var(--space-36);
}

.plan-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-28);
  min-height: 300px;
  padding: var(--space-44) var(--space-40);
  border: 1px solid var(--ink-12);
  border-radius: var(--radius-30);
  transition: transform var(--transition-card) var(--ease-out), border-color var(--transition-card);
}

.plan-card:hover {
  border-color: var(--colour-ink);
  color: var(--colour-ink);
}

.plan-card--ink,
.plan-card--ink:hover {
  border: 0;
  background: var(--colour-ink);
  color: var(--colour-white);
}

.plan-card__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-50);
}

.plan-card--ink .plan-card__eyebrow {
  color: var(--paper-60);
}

.plan-card__dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: var(--radius-circle);
  background: var(--colour-teal);
}

.plan-card__title {
  margin-block-start: var(--space-18);
  font-size: var(--display-plan-title);
  font-weight: var(--weight-black);
  letter-spacing: -0.04em;
  line-height: 1;
}

.plan-card__body {
  max-width: 34ch;
  margin-block-start: var(--space-14);
  font-size: var(--text-16-5);
  line-height: 1.5;
  color: var(--ink-62);
}

.plan-card--ink .plan-card__body {
  color: var(--paper-66);
}

/* --- service-index ------------------------------------------------------- */

.service-index {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--section-pad, var(--section-gap-sm)) var(--gutter) 0;
}

.service-index__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-14);
  margin-block-start: var(--space-36);
}

.service-index__item {
  display: flex;
  flex-direction: column;
  gap: 9px;
  min-height: 178px;
  padding: var(--space-26);
  border: 1px solid var(--ink-10);
  border-radius: var(--radius-22);
  transition: transform var(--transition-card) var(--ease-out), border-color var(--transition-card);
}

.service-index__item:hover {
  border-color: var(--colour-ink);
  color: var(--colour-ink);
}

.service-index__dot {
  width: 9px;
  height: 9px;
  border-radius: var(--radius-circle);
  background: var(--colour-teal);
}

.service-index__title {
  font-size: var(--text-21);
  font-weight: var(--weight-bold);
  letter-spacing: -0.025em;
}

.service-index__body {
  font-size: var(--text-15);
  line-height: 1.5;
  color: var(--ink-60);
}

/* --- pricing-duo --------------------------------------------------------- */

.pricing-duo {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--section-gap) var(--gutter) 0;
}

.pricing-duo .section-head__title {
  max-width: 18ch;
}

.pricing-duo__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-18);
  margin-block-start: var(--space-40);
}

.plan {
  min-width: 0;
  padding: var(--space-38);
  border-radius: var(--radius-30);
  transition: transform var(--transition-card) var(--ease-out);
}

.plan--ink {
  background: var(--colour-ink);
  color: var(--colour-white);
}

.plan--sand {
  background: var(--colour-sand);
}

.plan__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-16);
}

.plan__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-11-5);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--paper-55);
}

.plan--sand .plan__eyebrow {
  color: var(--ink-50);
}

.plan__badge {
  margin-block-start: var(--space-14);
}

.plan__price {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  margin-block-start: var(--space-14);
}

.plan__price-figure {
  font-size: var(--text-62);
  font-weight: var(--weight-black);
  letter-spacing: var(--track-display);
}

.plan__price-note {
  font-size: var(--text-15);
  color: var(--paper-60);
}

.plan__rate {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
  margin-block-start: var(--space-12);
}

.plan__rate-figure {
  font-size: var(--text-24);
  font-weight: var(--weight-black);
  letter-spacing: -0.035em;
}

.plan__rate-unit {
  font-size: var(--text-14);
  color: var(--paper-60);
}

.plan__small {
  max-width: 34ch;
  margin-block-start: var(--space-8);
  font-size: var(--text-14-5);
  line-height: 1.5;
  color: var(--paper-60);
}
.pricing-duo__grid--single .plan__small {
  max-width: 100%;
}

.pricing-duo__grid--single .plan__rate--text .plan__price-note{
  max-width: 100%;
}

.plan__flag {
  padding: 7px 13px;
  border-radius: var(--radius-pill);
  background: var(--colour-violet);
  font-size: var(--text-12-5);
  font-weight: var(--weight-bold);
}

.plan__features {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-10) var(--space-22);
  margin-block-start: var(--space-28);
  font-size: var(--text-15);
  color: var(--paper-80);
}

.plan__cta {
  --btn-pad-y: var(--space-15);
  --btn-pad-x: var(--space-26);
  --btn-size: 15.5px;
  margin-block-start: var(--space-30);
  background: var(--colour-white);
  color: var(--colour-ink);
}

.plan__cta:hover {
  color: var(--colour-ink);
}

.plan__title {
  margin-block-start: var(--space-12);
  font-size: var(--text-42);
  font-weight: var(--weight-black);
  letter-spacing: -0.045em;
  line-height: 1;
}

.plan__body {
  margin-block-start: var(--space-16);
  font-size: var(--text-16-5);
  line-height: 1.55;
  color: var(--ink-62);
}

.plan__footnote {
  margin-block-start: var(--space-26);
  padding-block-start: var(--space-20);
  border-top: 1px solid var(--ink-10);
  font-size: var(--text-15);
  color: var(--ink-70);
}

/* --- contact ------------------------------------------------------------- */

.contact {
  position: relative;
  overflow: hidden;
  padding: 0 var(--gutter) var(--section-gap-lg);
  background: var(--colour-white);
  color: var(--colour-ink);
}

.contact__grid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-40);
  align-items: start;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-block-start: var(--section-gap);
}

.contact__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-11-5);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-50);
}

.contact__title {
  max-width: 16ch;
  margin-block-start: var(--space-20);
  font-size: var(--display-contact);
  font-weight: var(--weight-black);
  letter-spacing: var(--track-display);
  line-height: 0.94;
  text-wrap: balance;
}

.contact__lede {
  max-width: 42ch;
  margin-block-start: var(--space-22);
  font-size: var(--text-19);
  line-height: 1.55;
  color: var(--ink-66);
}

.contact__disclaimer {
  max-width: 46ch;
  margin-block-start: var(--space-26);
  font-size: var(--text-13-5);
  line-height: 1.6;
  color: var(--ink-45);
}

/* Hairline separators come from the 1px grid gap showing the panel behind. */
.contact-details {
  display: grid;
  gap: 1px;
  margin-block-start: var(--space-40);
  border-radius: var(--radius-20);
  background: var(--ink-12);
  overflow: hidden;
}

.contact-details__item {
  padding: var(--space-22) var(--space-24);
  background: var(--colour-white);
}

.contact-details__label {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-45);
}

.contact-details__value {
  display: block;
  margin-block-start: 6px;
  font-size: var(--text-19);
  font-weight: var(--weight-semibold);
  color: var(--colour-ink);
}

a.contact-details__value:hover {
  color: var(--colour-violet-mid);
}

.contact-details__note {
  margin-block-start: var(--space-4);
  font-size: var(--text-14-5);
  color: var(--ink-55);
}

/* The contact card (21 Sep 2026: it took the enquiry form's place) — a call
   button, then the address, telephone and hours. */
.contact-card {
  padding: var(--space-40) var(--space-38);
  border: 1px solid var(--ink-12);
  border-radius: var(--radius-32);
  background: var(--colour-sand-light);
}

.contact-card__title {
  margin-block-end: var(--space-24);
  font-size: var(--text-26);
  font-weight: var(--weight-bold);
  line-height: 1.25;
  letter-spacing: var(--track-tight);
  color: var(--colour-ink);
}

.contact-card__call {
  display: inline-flex;
  align-items: center;
  gap: var(--space-10);
}

.contact-card__call-icon {
  flex: none;
}

.contact-card__details {
  margin-block-start: var(--space-28);
}

.contact-card .contact-whatsapp {
  margin-block-start: var(--space-24);
}

@media (max-width: 620px) {
  .contact-card {
    padding: var(--space-28) var(--space-22);
    border-radius: var(--radius-20);
  }

  .contact-card__call {
    /* Full width on a phone so it is an easy thumb target. */
    display: flex;
    justify-content: center;
    width: 100%;
  }

  .contact-details__value {
    font-size: var(--text-17);
    overflow-wrap: anywhere;
  }
}

/* WhatsApp call to action, under the contact details */
.contact-whatsapp {
  margin-block-start: var(--space-16);
}

.contact-whatsapp__button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-10);
  min-height: 52px;
  padding: var(--space-14) var(--space-24);
  border-radius: var(--radius-20);
  background: #25d366;
  font-size: var(--text-16);
  font-weight: var(--weight-semibold);
  /* The green is fixed by the brand, so the label is pinned to a dark ink
     rather than a theme token that could stop meeting contrast on it. */
  color: #0b2e13;
  transition: background var(--transition-fast), transform var(--transition-fast);
}

.contact-whatsapp__button:hover {
  background: #1eb457;
  color: #0b2e13;
}

.contact-whatsapp__button:active {
  transform: translateY(1px);
}

.contact-whatsapp__icon {
  flex: none;
}

.contact-whatsapp__note {
  margin-block-start: var(--space-8);
  font-size: var(--text-14-5);
  color: var(--ink-55);
}

@media (max-width: 620px) {
  .contact-whatsapp__button {
    /* Full width on a phone so it is an easy thumb target. */
    display: flex;
    justify-content: center;
    width: 100%;
  }
}

/* --- about-intro --------------------------------------------------------- */

.about-intro {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--section-gap) var(--gutter) 0;
}

.about-intro__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  align-items: start;
}

.about-intro__title {
  font-size: var(--display-heading-lg);
  font-weight: var(--weight-black);
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.about-intro__body {
  display: grid;
  gap: var(--space-22);
  font-size: var(--text-18-5);
  line-height: 1.6;
  color: var(--ink-70);
}

/* --- principles ---------------------------------------------------------- */

.principles {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--section-gap-sm) var(--gutter) 0;
}

.principles__title {
  font-size: var(--display-7);
  font-weight: var(--weight-black);
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.principles__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
  margin-block-start: var(--space-40);
}

/* --- services-promo ------------------------------------------------------ */

.services-promo {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--section-gap-sm) var(--gutter) 0;
}

.services-promo__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-16);
}

.promo-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-26);
  min-height: 240px;
  padding: var(--space-38) var(--space-36);
  border-radius: var(--radius-30);
  background: var(--colour-sand);
  color: var(--colour-ink);
}

.promo-card:hover {
  color: var(--colour-ink);
}

.promo-card--ink,
.promo-card--ink:hover {
  background: var(--colour-black);
  color: var(--colour-white);
}

.promo-card__text {
  display: block;
}

.promo-card__title {
  font-size: var(--display-10);
  font-weight: var(--weight-black);
  letter-spacing: -0.035em;
  line-height: 1.02;
}

.promo-card__body {
  max-width: 34ch;
  margin-block-start: var(--space-12);
  font-size: var(--text-16-5);
  line-height: 1.5;
  color: var(--ink-62);
}

.promo-card--ink .promo-card__body {
  color: var(--paper-66);
}

.promo-card__action {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  font-size: var(--text-16);
  font-weight: var(--weight-bold);
}

.promo-card__arrow {
  font-size: var(--text-20);
}

/* --- cta-band ------------------------------------------------------------ */

.cta-band {
  padding: var(--section-pad, var(--section-gap-sm)) var(--gutter) 0;
}

.cta-band__panel {
  position: relative;
  overflow: hidden;
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(48px, 6vw, 72px) clamp(24px, 4vw, 56px);
  border-radius: var(--radius-40);
  background: var(--colour-black);
  color: var(--colour-white);
  text-align: center;
}

.cta-band__inner {
  position: relative;
}

.cta-band__title {
  font-size: var(--display-6);
  font-weight: var(--weight-black);
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.cta-band__body {
  max-width: 500px;
  margin: var(--space-18) auto 0;
  font-size: var(--text-18);
  line-height: 1.55;
  color: var(--paper-68);
}

/* Two-column variant: copy on the left, two action cards stacked on the right */
.cta-band--dual .cta-band__panel {
  padding: clamp(48px, 6.4vw, 76px) clamp(24px, 4vw, 56px);
  text-align: left;
}

.cta-band--dual .cta-band__inner {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-32);
  align-items: center;
}

.cta-band--dual .cta-band__title {
  font-size: var(--display-5);
  line-height: 0.96;
}

.cta-band--dual .cta-band__body {
  max-width: 460px;
  margin: var(--space-20) 0 0;
}

.cta-band__cards {
  display: grid;
  gap: var(--space-14);
}

.cta-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-20);
  padding: var(--space-26) var(--space-28);
  border-radius: var(--radius-24);
  background: var(--colour-white);
  color: var(--colour-ink);
  transition: transform 0.4s var(--ease-out), box-shadow 0.4s, background 0.4s;
}

.cta-card:hover {
  color: var(--colour-ink);
  box-shadow: 0 24px 60px rgba(255, 255, 255, 0.2);
}

.cta-card--ghost,
.cta-card--ghost:hover {
  border: 1px solid var(--paper-24);
  background: none;
  color: var(--colour-white);
}

.cta-card--ghost:hover {
  background: rgba(255, 255, 255, 0.09);
  box-shadow: none;
}

.cta-card__title {
  display: block;
  font-size: var(--text-23);
  font-weight: var(--weight-black);
  letter-spacing: -0.03em;
}

.cta-card__note {
  display: block;
  margin-block-start: var(--space-4);
  font-size: var(--text-14-5);
  color: var(--ink-60);
}

.cta-card--ghost .cta-card__note {
  color: var(--paper-60);
}

.cta-card__arrow {
  font-size: var(--text-22);
}

.aurora--band-wide {
  inset: auto -10% -60% 30%;
  height: 120%;
  filter: blur(100px);
  opacity: 0.5;
}

.aurora--band-wide.aurora--teal .aurora__blob--a {
  background: oklch(0.58 0.13 190);
}

.aurora--band-wide .aurora__blob--a {
  left: 0;
  top: 0;
  width: 34vw;
  height: 34vw;
  background: oklch(0.6 0.18 288);
  animation-duration: 21s;
}

.cta-band--trial .cta-band__body {
  max-width: 520px;
}

.cta-band--trial .btn--solid {
  --btn-pad-x: var(--space-30);
  --btn-size: var(--text-16-5);
}

.cta-band__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-12);
  margin-block-start: var(--space-30);
}

/* --- prose-stack --------------------------------------------------------- */

.prose-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-44);
  width: 100%;
  max-width: var(--container-prose);
  margin-inline: auto;
  padding: var(--section-gap-xs) var(--gutter) 0;
}

/* --- trial-offer --------------------------------------------------------- */

.trial-offer {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--section-gap-xs) var(--gutter) 0;
}

.trial-offer__panel {
  padding: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 40px);
  border-radius: var(--radius-34);
  background: var(--colour-ink);
  color: var(--colour-white);
  text-align: center;
}

.trial-offer__title {
  margin-block-start: var(--space-22);
  font-size: var(--display-8);
  font-weight: var(--weight-black);
  letter-spacing: -0.045em;
  line-height: 1;
  text-wrap: balance;
}

.trial-offer__body {
  max-width: 46ch;
  margin: var(--space-16) auto 0;
  font-size: var(--text-17-5);
  line-height: 1.55;
  color: var(--paper-68);
}

.trial-offer__cta {
  margin-block-start: var(--space-30);
}

.trial-offer__note {
  margin-block-start: var(--space-18);
  font-size: var(--text-14-5);
  color: var(--paper-50);
}

.trial-offer__note a {
  color: var(--paper-80);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.trial-offer__note a:hover {
  color: var(--colour-white);
}


/* ==========================================================================
   11. Reusable components
   ========================================================================== */

/* --- Buttons ------------------------------------------------------------ */

/* One component. Size classes set the padding and type; a section that needs a
   different pad (the design uses twelve) overrides the two custom properties
   rather than redefining the button. */
.btn {
  display: inline-flex;
  /* flex-start, not center: buttons are flex items that get stretched by their
     row, and the design lays the label out from the top padding edge. */
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-8);
  padding: var(--btn-pad-y, var(--space-16)) var(--btn-pad-x, var(--space-28));
  border-radius: var(--radius-pill);
  font-size: var(--btn-size, var(--text-16));
  font-weight: var(--weight-bold);
  line-height: normal;
  text-align: center;
  transition:
    transform var(--transition-slow) var(--ease-out),
    background var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-slow),
    color var(--transition-base);
}

/* Sizes */
.btn--sm {
  --btn-pad-y: 11px;
  --btn-pad-x: var(--space-20);
  --btn-size: var(--text-14-5);
  min-height: 40px;
  font-weight: var(--weight-semibold);
}

.btn--md {
  --btn-pad-y: var(--space-16);
  --btn-pad-x: var(--space-28);
  min-height: 44px;
}

.btn--lg {
  --btn-pad-y: 17px;
  --btn-pad-x: var(--space-32);
  --btn-size: 17px;
  min-height: 44px;
}

/* Colours */
.btn--solid {
  background: var(--colour-white);
  color: var(--colour-black);
}

.btn--solid:hover {
  color: var(--colour-black);
  box-shadow: var(--shadow-glow);
}

.btn--lg.btn--solid:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow-lg);
}

.btn--ink {
  background: var(--colour-ink);
  color: var(--colour-white);
}

.btn--ink:hover {
  background: var(--colour-violet-deep);
  color: var(--colour-white);
  transform: translateY(-2px);
}

.btn--ghost {
  border: 1px solid var(--paper-26);
  color: var(--colour-white);
  font-weight: var(--weight-semibold);
}

.btn--ghost:hover {
  background: var(--paper-10);
  color: var(--colour-white);
}

.btn--outline {
  border: 1px solid var(--ink-14);
  color: var(--colour-ink);
  font-weight: var(--weight-semibold);
}

.btn--outline:hover {
  background: var(--colour-sand);
  color: var(--colour-ink);
}

/* --- Badges and pills --------------------------------------------------- */

.pill {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px var(--space-14) 7px var(--space-10);
  border: 1px solid var(--paper-18);
  border-radius: var(--radius-pill);
  background: var(--paper-06);
  font-family: var(--font-mono);
  font-size: var(--text-11-5);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-82);
}

.pill--outline {
  padding: var(--space-8) var(--space-16) var(--space-8) var(--space-12);
  gap: var(--space-10);
  border-color: var(--paper-20);
  background: none;
  letter-spacing: var(--track-mono);
  color: var(--paper-72);
}

.pill__dot {
  display: block;
  width: 7px;
  height: 7px;
  border-radius: var(--radius-circle);
  background: var(--colour-violet);
  animation: pulse-dot 2s ease-in-out infinite;
}

.pill--outline .pill__dot {
  animation-duration: 2.6s;
}

.badge-free {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-10);
  padding: 7px var(--space-14) 7px var(--space-10);
  border-radius: var(--radius-pill);
  background: var(--colour-green);
  color: var(--colour-green-ink);
}

.badge-free__strong {
  font-size: var(--text-13);
  font-weight: var(--weight-black);
  letter-spacing: 0.02em;
}

.badge-free__rule {
  display: block;
  width: 1px;
  height: 14px;
  background: rgba(4, 18, 10, 0.3);
}

.badge-free__note {
  font-size: var(--text-13);
  font-weight: var(--weight-bold);
}

/* --- Section heading ---------------------------------------------------- */


/* --- Cards -------------------------------------------------------------- */

.card {
  display: flex;
  flex-direction: column;
  padding: var(--space-34);
  border-radius: var(--radius-26);
  background: var(--colour-sand);
}

.card--ink {
  background: var(--colour-ink);
  color: var(--colour-white);
}

.card__index {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-50);
}

.card--ink .card__index {
  color: var(--paper-50);
}

.card__title:first-child {
  margin-block-start: 0;
}

.card__title {
  margin-block-start: var(--space-16);
  font-size: var(--text-25);
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
}

/* Round icon to the left of a benefits-grid card heading (client PDF, 18 Sep
   2026). Ink circle, white glyph; on the ink card only the glyph shows, as drawn. */
.card__title--icon {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
}

.card__icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-circle);
  background: var(--colour-ink);
  color: var(--colour-white);
}

.card__icon svg {
  display: block;
}

.card__title-text {
  /* Sits the first line of the heading level with the icon's centre. */
  padding-block-start: 1px;
}

.card__body {
  margin-block-start: var(--space-12);
  font-size: var(--text-16-5);
  line-height: 1.55;
  color: var(--ink-62);
}

.card--ink .card__body {
  color: var(--paper-68);
}

/* Pointer lift, as drawn. Hover only — never on touch. */
@media (hover: hover) and (pointer: fine) {
  [data-card] {
    transition:
      transform var(--transition-card) var(--ease-out),
      box-shadow var(--transition-card);
  }

  [data-card]:hover {
    transform: translateY(-6px);
  }
}

/* --- Rating (Trustpilot) ------------------------------------------------ */

.rating {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-10);
  padding: var(--space-16) var(--space-18);
  border: 1px solid var(--paper-14);
  border-radius: var(--radius-16);
  background: var(--paper-04);
  color: var(--colour-white);
  transition: background var(--transition-base), border-color var(--transition-base);
}

.rating:hover {
  background: var(--paper-08);
  border-color: var(--paper-28);
  color: var(--colour-white);
}

.rating__brand {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.rating__brand-mark {
  color: var(--colour-trustpilot);
  font-size: var(--text-16);
  line-height: 1;
}

.rating__brand-name {
  font-size: var(--text-15-5);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
}

.rating__stars {
  display: flex;
  align-items: center;
  gap: 3px;
}

.rating__star {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: var(--colour-trustpilot);
  color: var(--colour-white);
  font-size: var(--text-15);
  line-height: 1;
}

.rating__score {
  font-size: var(--text-13-5);
  line-height: 1.5;
  color: var(--paper-65);
}

.rating__score strong {
  color: var(--colour-white);
  font-weight: var(--weight-bold);
}

/* --- Prose -------------------------------------------------------------- */

.prose-block__title {
  font-size: var(--display-11);
  font-weight: var(--weight-black);
  letter-spacing: -0.035em;
  line-height: 1.08;
  text-wrap: balance;
}

.prose-block__body {
  margin-block-start: var(--space-14);
  font-size: var(--text-18);
  line-height: 1.62;
  color: var(--ink-70);
  text-wrap: pretty;
}

.prose-block__body + .prose-block__body {
  margin-block-start: var(--space-14);
}

/* --- Rule --------------------------------------------------------------- */


/* --- trial-wizard --------------------------------------------------------
   A native <dialog>: the browser supplies the modal focus trap, Esc handling,
   inert background and focus return, so general.js only renders the screens.
   ------------------------------------------------------------------------ */

.wizard {
  width: 100%;
  /* Never edge to edge on a phone: at least 10px of page each side (client, 28 Sep 2026). */
  max-width: min(640px, calc(100% - 20px));
  max-height: 88vh;
  padding: 0;
  border: 0;
  border-radius: var(--radius-30);
  background: var(--colour-white);
  color: var(--colour-ink);
  box-shadow: var(--shadow-deep);
  overflow: visible;
}

.wizard::backdrop {
  background: rgba(6, 6, 8, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

/* Embedded checkout (prototype, 25 Sep 2026): Chargebee's Full-Page checkout
   mounted inside the payment step — the popup widens while it is up. */
.wizard--wide {
  max-width: min(720px, calc(100% - 20px));
}

.wizard__checkout {
  --cb-trim: 0px;
  margin-block-start: var(--space-16);
  min-height: 420px;
  border-radius: var(--radius-16, 16px);
  overflow: hidden;
  transition: height 0.2s ease;
}

.wizard__checkout iframe {
  display: block;
  width: 100% !important;
  border: 0;
}

/* Chargebee's Full-Page layout keeps an empty header band above "Checkout" now that its logo is off (client,
   28 Sep 2026). On wide screens the frame is pulled up behind the popup's own intro line by that band once the
   form has loaded; the JS takes the same amount off the box height. Narrow frames (under about 600px) put
   Chargebee's cart pill in that band, so nothing is trimmed there. */
@media (min-width: 760px) {
  .wizard__checkout {
    --cb-trim: 72px;
  }
}

.wizard__checkout--ready iframe {
  margin-block-start: calc(var(--cb-trim) * -1);
}

.wizard__checkout-wait {
  padding: var(--space-16) 0;
  font-size: var(--text-14);
  color: var(--ink-45);
}

/* The address step (25 Sep 2026): postcode search with a list of addresses to pick from. */
.wizard__group-title {
  margin: var(--space-20, 20px) 0 var(--space-10, 10px);
  font-size: var(--text-16, 16px);
  font-weight: var(--weight-bold, 700);
  letter-spacing: -0.02em;
}

.wizard-postcode__row {
  display: flex;
  gap: 10px;
  align-items: stretch;
}

.wizard-postcode__row .field__control {
  flex: 1 1 auto;
  min-width: 0;
}

.wizard-postcode__find {
  flex: none;
  padding: 0 18px;
  border: 1px solid var(--colour-ink);
  border-radius: var(--radius-pill);
  background: var(--colour-ink);
  color: var(--colour-white);
  font: inherit;
  font-size: var(--text-14, 14px);
  font-weight: var(--weight-bold, 700);
  cursor: pointer;
}

.wizard-postcode__find:hover,
.wizard-postcode__find:focus-visible {
  background: var(--colour-black);
}

.wizard-postcode__status {
  margin: 8px 0 0;
  font-size: var(--text-14, 14px);
  color: var(--ink-45);
}

.wizard-postcode__status--error {
  color: var(--colour-error);
}

/* 29 Sep 2026 — the type-ahead list and messages are redrawn in their own box while the customer types. */
/* The popup head is sticky: leave room for it when the postcode box is scrolled into view. */
.wizard-postcode {
  scroll-margin-top: 116px;
}

.wizard-postcode__results:empty {
  display: none;
}

.wizard-postcode__list {
  margin-top: 8px;
  max-height: 260px;
  overflow-y: auto;
  border: 1px solid var(--ink-14);
  border-radius: var(--radius-14);
  background: var(--colour-white);
}

.wizard-postcode__list .wizard-postcode__status {
  margin: 0;
  padding: 8px 14px 4px;
}

.wizard-postcode__option {
  display: block;
  width: 100%;
  padding: 10px 14px;
  border: 0;
  border-top: 1px solid var(--ink-08);
  background: none;
  color: var(--colour-ink);
  font: inherit;
  font-size: var(--text-15, 15px);
  text-align: left;
  cursor: pointer;
}

.wizard-postcode__option:hover,
.wizard-postcode__option:focus-visible {
  background: var(--colour-sand);
  outline: none;
}

.wizard__panel {
  max-height: 88vh;
  border-radius: var(--radius-30);
  overflow-y: auto;
}

.wizard__head {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: var(--space-26) var(--space-30) var(--space-16);
  border-bottom: 1px solid var(--ink-08);
  background: var(--colour-white);
}

.wizard__head-row {
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
}

.wizard__head-text {
  flex: 1;
}

.wizard__step {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-45);
}

.wizard__title {
  margin-block-start: 6px;
  font-size: var(--text-21);
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
}

.wizard__close {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--ink-14);
  border-radius: var(--radius-circle);
  background: var(--colour-white);
  color: var(--colour-ink);
  font-size: var(--text-17);
  line-height: 1;
  transition: background 0.2s, transform 0.2s;
}

.wizard__close:hover {
  background: var(--colour-sand);
  transform: rotate(90deg);
}

.wizard__progress {
  overflow: hidden;
  height: 4px;
  margin-block-start: var(--space-16);
  border-radius: var(--radius-pill);
  background: var(--ink-09);
}

.wizard__progress-fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--colour-ink);
  transition: width 0.45s var(--ease-out);
}

.wizard__body {
  padding: var(--space-26) var(--space-30) var(--space-30);
}

.wizard__hint {
  font-size: var(--text-15-5);
  line-height: 1.55;
  color: var(--ink-60);
}

/* 3 Nov 2026 (HANDOVER §5di): the live calendar box follows Calendly's own height (set by the script from Calendly's
   page_height message) — no scroll inside the box; on phones it fills the popup's width edge to edge. */
.wizard-calendly--live .wizard-calendly__widget {
  min-height: 480px;
  transition: height 0.15s ease-out;
}
@media (max-width: 640px) {
  .wizard-calendly--live {
    margin-block-start: var(--space-10);
  }
  .wizard-calendly--live .wizard-calendly__widget {
    margin-inline: calc(-1 * var(--space-18));
    border-inline: 0;
    border-radius: 0;
  }
}

/* Explanation screens: the guide's words in a soft panel, nothing to pick. */
.wizard-statement {
  padding: var(--space-22) var(--space-24);
  border-radius: var(--radius-18);
  background: var(--ink-08);
}

.wizard-statement__body {
  font-size: var(--text-15-5);
  line-height: 1.6;
  color: var(--colour-ink);
}

/* 27 Oct 2026: the legal-aid information screen (two paragraphs in one panel, HANDOVER §5da). */
.wizard-statement--legal .wizard-statement__body + .wizard-statement__body {
  margin-block-start: var(--space-14);
}

.wizard__choices {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  margin-block-start: var(--space-18);
}

.wizard-choice {
  display: flex;
  align-items: center;
  gap: var(--space-14);
  padding: var(--space-18) var(--space-20);
  border: 1.5px solid var(--ink-14);
  border-radius: var(--radius-18);
  background: var(--colour-white);
  color: var(--colour-ink);
  text-align: left;
  transition: border-color 0.2s, background 0.2s, transform 0.2s;
}

.wizard-choice:hover {
  transform: translateY(-1px);
}

.wizard-choice[aria-pressed='true'] {
  border-color: var(--colour-ink);
  background: var(--colour-sand);
}

.wizard-choice__dot {
  display: block;
  flex: none;
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--ink-28);
  border-radius: var(--radius-circle);
  background: transparent;
}

.wizard-choice[aria-pressed='true'] .wizard-choice__dot {
  border-color: var(--colour-ink);
  background: var(--colour-ink);
}

.wizard-choice__label {
  display: block;
  font-size: var(--text-17);
  font-weight: var(--weight-bold);
  letter-spacing: -0.015em;
}

.wizard-choice__sub {
  display: block;
  margin-block-start: 3px;
  font-size: var(--text-14-5);
  line-height: 1.45;
  color: var(--ink-58);
}

/* "Select all that apply" questions: a square tick box instead of the round dot. */
.wizard__choices--multi .wizard-choice__dot {
  border-radius: 6px;
}

.wizard__choices--multi .wizard-choice[aria-pressed='true'] .wizard-choice__dot {
  background: var(--colour-ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5 10.4l3.2 3.2L15 6.8' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 100% no-repeat;
}

/* Domestic abuse flow: the emergency line at the top of every step. */
.wizard-emergency {
  margin-block-end: var(--space-18);
  padding: var(--space-12) var(--space-16);
  border: 1.5px solid var(--colour-ink);
  border-radius: var(--radius-18);
  background: var(--colour-white);
  font-size: var(--text-15-5);
  font-weight: var(--weight-bold);
  line-height: 1.45;
  color: var(--colour-ink);
}

.wizard-emergency__link {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Price screen */
.wizard-price {
  padding: var(--space-26);
  border-radius: var(--radius-22);
  background: var(--colour-ink);
  color: var(--colour-white);
}

.wizard-price__band {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--paper-50);
}

.wizard-price__badge {
  margin-block-start: var(--space-16);
}

.wizard-price__figure-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-10);
  margin-block-start: var(--space-14);
}

.wizard-price__figure {
  font-size: var(--text-64);
  font-weight: var(--weight-black);
  letter-spacing: var(--track-display);
  line-height: 0.86;
}

.wizard-price__figure-note {
  padding-block-end: 6px;
  font-size: var(--text-17);
  font-weight: var(--weight-medium);
  color: var(--paper-66);
}

.wizard-price__rate {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  margin-block-start: var(--space-20);
  padding-block-start: var(--space-18);
  border-top: 1px solid var(--paper-16);
}

.wizard-price__rate-label {
  font-size: var(--text-15-5);
  color: var(--paper-66);
}

.wizard-price__rate-figure {
  font-size: var(--text-26);
  font-weight: var(--weight-black);
  letter-spacing: -0.035em;
}

.wizard-price__rate-unit {
  font-size: var(--text-15);
  font-weight: var(--weight-medium);
  color: var(--paper-60);
}

.wizard-price__note {
  margin-block-start: var(--space-12);
  font-size: var(--text-15);
  line-height: 1.55;
  color: var(--paper-66);
}

.wizard-summary {
  display: grid;
  gap: 1px;
  overflow: hidden;
  margin-block-start: var(--space-18);
  border: 1px solid var(--ink-10);
  border-radius: var(--radius-18);
  background: var(--ink-10);
}

.wizard-summary__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-18);
  padding: var(--space-14) var(--space-18);
  background: var(--colour-white);
}

.wizard-summary__q {
  font-size: var(--text-14);
  color: var(--ink-55);
}

.wizard-summary__a {
  font-size: var(--text-15);
  font-weight: var(--weight-bold);
  text-align: right;
}

/* Chargebee / Clio: the notice shown while either is still unconfigured */
.wizard__demo-note {
  display: flex;
  gap: var(--space-10);
  align-items: baseline;
  margin-block-start: var(--space-16);
  padding: var(--space-12) var(--space-14);
  border: 1px dashed var(--ink-12);
  border-radius: var(--radius-12);
  font-size: var(--text-13);
  line-height: 1.55;
  color: var(--ink-50);
}

.wizard__demo-flag {
  flex: none;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--colour-sand);
  font-size: var(--text-11);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--colour-ink);
}

/* Calendly, embedded in the appointment step (the client's choice, 14 Sep 2026). */
.wizard-calendly {
  margin-block-start: var(--space-16);
}

.wizard-calendly__lead {
  font-size: var(--text-15-5);
  line-height: 1.55;
  color: var(--ink-60);
}

.wizard-calendly__widget {
  /* Calendly's widget sizes its iframe to 100% of this box, so the height must be explicit. */
  height: 700px;
  margin-block-start: var(--space-12);
  border: 1px solid var(--ink-12);
  border-radius: var(--radius-16);
  overflow: hidden;
}

.wizard-calendly__widget iframe {
  display: block;
}

.wizard-calendly__widget--fallback {
  height: auto;
}

.wizard-calendly__fallback {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-10);
  padding: var(--space-22);
}

.wizard-calendly__fallback-lead {
  font-weight: 700;
}

.wizard-calendly__fallback-note {
  font-size: var(--text-14-5);
  color: var(--ink-65);
}

.wizard-calendly__note {
  margin-block-start: var(--space-10);
  font-size: var(--text-14-5);
  line-height: 1.5;
  color: var(--ink-60);
}

/* Clio Scheduler will not load inside another site, so the appointment step
   hands off to a centred popup window and waits for "I've booked my slot". */
.wizard-clio {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  margin-block-start: var(--space-16);
  padding: var(--space-20) var(--space-22);
  border: 1px solid var(--ink-12);
  border-radius: var(--radius-18);
}

.wizard-clio__title {
  font-size: var(--text-15-5);
  font-weight: var(--weight-bold);
  color: var(--colour-ink);
}

.wizard-clio__body {
  font-size: var(--text-14-5);
  line-height: 1.55;
  color: var(--ink-72);
}

.wizard-clio__open {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  margin-block-start: var(--space-10);
  padding: var(--space-14) var(--space-24);
  border-radius: var(--radius-pill);
  background: var(--colour-ink);
  color: var(--colour-white);
  font-size: var(--text-15-5);
  font-weight: var(--weight-bold);
  text-decoration: none;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s;
}

.wizard-clio__open:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(11, 11, 12, 0.22);
}

.wizard-clio__note {
  font-size: var(--text-14-5);
  line-height: 1.5;
  color: var(--ink-60);
}

/* Clio Scheduler, embedded in the appointment step (unused since 2026-09-14 —
   Clio blocks framing; kept for the demo-mode layout) */
.wizard-book__frame {
  display: block;
  width: 100%;
  min-height: 520px;
  margin-block-start: var(--space-16);
  border: 1px solid var(--ink-12);
  border-radius: var(--radius-16);
  background: #fff;
}

/* Price step: what the subscription covers, and the disbursements caveat */
.wizard__covers-lead {
  margin-block-start: var(--space-20);
  font-size: var(--text-14-5);
  line-height: 1.55;
  color: var(--ink-72);
}

/* "Which do you need?" above the Plus / Lite toggle on the business numbers step. */
.wizard__toggle-lead {
  margin-block-start: var(--space-24);
  font-weight: 700;
  color: var(--colour-ink);
}

.wizard__toggle-lead + .wizard__choices {
  margin-block-start: var(--space-12);
}

/* The line under the contact fields on step 1 of both popups. */
.wizard__privacy a {
  color: inherit;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.wizard-note {
  margin-block-start: var(--space-16);
  padding: var(--space-16) var(--space-18);
  border-radius: var(--radius-16);
  background: var(--colour-sand);
}

.wizard-note__title {
  margin-block-end: var(--space-8);
  font-size: var(--text-14-5);
  font-weight: var(--weight-bold);
  color: var(--colour-ink);
}

.wizard-note__body {
  font-size: var(--text-13-5);
  line-height: 1.6;
  color: var(--ink-65);
}

.wizard__included {
  margin-block-start: var(--space-20);
  font-size: var(--text-13-5);
  line-height: 1.6;
  color: var(--ink-50);
}

.wizard__routes {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  margin-block-start: var(--space-22);
  padding-block-start: var(--space-20);
  border-top: 1px solid var(--ink-10);
}

.wizard-route {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  width: 100%;
  padding: var(--space-20) var(--space-22);
  border: 1.5px solid var(--ink-16);
  border-radius: var(--radius-20);
  background: var(--colour-white);
  color: var(--colour-ink);
  text-align: left;
  transition: background 0.2s, border-color 0.2s, transform 0.25s var(--ease-out), box-shadow 0.25s;
}

.wizard-route:hover {
  background: var(--colour-sand);
  border-color: var(--ink-30);
}

.wizard-route--primary {
  border-color: transparent;
  background: var(--colour-ink);
  color: var(--colour-white);
}

.wizard-route--primary:hover {
  background: var(--colour-ink);
  border-color: transparent;
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(11, 11, 12, 0.24);
}

.wizard-route__label {
  display: block;
  font-size: var(--text-17-5);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

.wizard-route__sub {
  display: block;
  margin-block-start: var(--space-4);
  font-size: var(--text-14);
  line-height: 1.45;
  color: var(--ink-60);
}

.wizard-route--primary .wizard-route__sub {
  color: var(--paper-66);
}

.wizard-route__arrow {
  flex: none;
  font-size: var(--text-18);
}

/* Pack, pay, urgent forms */
.wizard__fields {
  display: grid;
  gap: var(--space-14);
  margin-block-start: var(--space-20);
}

.wizard__fields--pay {
  grid-template-columns: 1fr 1fr;
  margin-block-start: var(--space-22);
}

.wizard__consent {
  display: flex;
  flex-direction: column;
  gap: var(--space-14);
  margin-block-start: var(--space-22);
  padding-block-start: var(--space-18);
  border-top: 1px solid var(--ink-10);
}

.wizard__consent-title {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-45);
}

.wizard__check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  cursor: pointer;
  font-size: var(--text-14);
  line-height: 1.5;
  color: var(--ink-70);
}

.wizard__check input {
  flex: none;
  width: 20px;
  height: 20px;
  margin: 2px 0 0;
  accent-color: var(--colour-ink);
  cursor: pointer;
}

.wizard__small {
  margin-block-start: var(--space-18);
  font-size: var(--text-13);
  line-height: 1.6;
  color: var(--ink-50);
}

.wizard-due {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-16) var(--space-18);
  border-radius: var(--radius-16);
  background: var(--colour-sand);
}

.wizard-due__label {
  font-size: var(--text-15);
  color: var(--ink-60);
}

.wizard-due__amount {
  font-size: var(--text-22);
  font-weight: var(--weight-black);
  letter-spacing: -0.03em;
}

.wizard__pay-note {
  margin-block-start: var(--space-8);
  font-size: var(--text-13-5);
  color: var(--ink-55);
}

.wizard__terms {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  margin-block-start: var(--space-16);
  padding: var(--space-18) var(--space-20);
  border: 1px solid var(--ink-12);
  border-radius: var(--radius-18);
  font-size: var(--text-14-5);
  line-height: 1.5;
  color: var(--ink-72);
}

.wizard__pay-badge {
  margin-block-end: var(--space-12);
}

/* Booking screen */
.wizard-book__banner {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-14) var(--space-18);
  border-radius: var(--radius-16);
  background: oklch(0.95 0.05 150);
  color: oklch(0.42 0.1 150);
  font-size: var(--text-15);
  font-weight: var(--weight-semibold);
}

.wizard-book__tick {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: var(--radius-circle);
  background: oklch(0.62 0.14 150);
  color: var(--colour-white);
  font-size: var(--text-13);
  font-weight: var(--weight-black);
}

.wizard-book__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-16);
  margin-block-start: var(--space-20);
}

.wizard-book__title {
  font-size: var(--text-17);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
}

.wizard-book__meta {
  font-size: var(--text-12-5);
  color: var(--ink-45);
}

.wizard-book__days {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-8);
  margin-block-start: var(--space-14);
}

.wizard-day {
  padding: var(--space-12) var(--space-16);
  border: 1.5px solid var(--ink-14);
  border-radius: var(--radius-14);
  background: var(--colour-white);
  color: var(--colour-ink);
  text-align: center;
  transition: border-color 0.2s, background 0.2s;
}

.wizard-day[aria-pressed='true'] {
  border-color: var(--colour-ink);
  background: var(--colour-sand);
}

.wizard-day__dow {
  display: block;
  font-size: var(--text-12);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.6;
}

.wizard-day__date {
  display: block;
  margin-block-start: var(--space-4);
  font-size: var(--text-16);
  font-weight: var(--weight-bold);
}

.wizard-book__times {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-8);
  margin-block-start: var(--space-18);
}

.wizard-time {
  padding: var(--space-12) var(--space-8);
  border: 1.5px solid var(--ink-14);
  border-radius: var(--radius-12);
  background: var(--colour-white);
  color: var(--colour-ink);
  font-size: var(--text-15);
  font-weight: var(--weight-bold);
  transition: border-color 0.2s, background 0.2s;
}

.wizard-time[aria-pressed='true'] {
  border-color: var(--colour-ink);
  background: var(--colour-ink);
  color: var(--colour-white);
}

.wizard-book__hint {
  margin-block-start: var(--space-18);
  font-size: var(--text-13-5);
  line-height: 1.6;
  color: var(--ink-55);
}

/* Done screen */
.wizard-done {
  padding: var(--space-8) 0 var(--space-4);
  text-align: center;
}

.wizard-done__tick {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  margin-inline: auto;
  border-radius: var(--radius-circle);
  background: var(--colour-ink);
  color: var(--colour-white);
  font-size: var(--text-24);
  font-weight: var(--weight-black);
}

.wizard-done__title {
  margin-block-start: var(--space-20);
  font-size: var(--text-27);
  font-weight: var(--weight-black);
  letter-spacing: -0.035em;
}

.wizard-done__line {
  max-width: 40ch;
  margin: var(--space-12) auto 0;
  font-size: var(--text-16);
  line-height: 1.55;
  color: var(--ink-62);
}

.wizard-done__note {
  max-width: 420px;
  margin: var(--space-20) auto 0;
  padding: var(--space-16) var(--space-18);
  border-radius: var(--radius-16);
  background: var(--colour-sand);
  font-size: var(--text-14-5);
  line-height: 1.55;
  color: var(--ink-65);
}

.wizard-done__manage {
  max-width: 420px;
  margin: var(--space-20) auto 0;
  padding-block-start: var(--space-20);
  border-top: 1px solid rgba(11, 11, 12, 0.12);
}

.wizard-done__manage-text {
  margin: 0;
  font-size: var(--text-14-5);
  line-height: 1.55;
  color: var(--ink-62);
}

.wizard-done__manage-link {
  display: inline-block;
  margin-block-start: var(--space-12);
  padding: 0.65em 1.3em;
  border: 1.5px solid var(--colour-ink);
  border-radius: 999px;
  color: var(--colour-ink);
  font-size: var(--text-14-5);
  font-weight: 700;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.wizard-done__manage-link:hover,
.wizard-done__manage-link:focus-visible {
  background-color: var(--colour-ink);
  color: var(--colour-white);
}

.wizard-consent-log {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  max-width: 420px;
  margin: var(--space-14) auto 0;
  text-align: left;
}

.wizard-consent-log__title {
  font-family: var(--font-mono);
  font-size: var(--text-10-5);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--ink-45);
}

.wizard-consent-log__item {
  padding: var(--space-14) var(--space-16);
  border: 1px solid var(--ink-12);
  border-radius: var(--radius-14);
}

.wizard-consent-log__row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-12);
  font-size: var(--text-13-5);
  font-weight: var(--weight-bold);
}

.wizard-consent-log__when {
  font-weight: var(--weight-medium);
  color: var(--ink-50);
}

.wizard-consent-log__wording {
  margin-block-start: 6px;
  font-size: var(--text-12-5);
  line-height: 1.5;
  color: var(--ink-55);
}

/* Urgent screen */
.wizard-urgent {
  padding: var(--space-24);
  border-radius: var(--radius-22);
  background: var(--colour-ink);
  color: var(--colour-white);
}

.wizard-urgent__title {
  font-size: var(--text-22);
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
}

.wizard-urgent__body {
  margin-block-start: var(--space-10);
  font-size: var(--text-15-5);
  line-height: 1.55;
  color: var(--paper-68);
}

/* Footer */
.wizard__foot {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: var(--space-12);
  padding: var(--space-16) var(--space-30) var(--space-20);
  border-top: 1px solid var(--ink-08);
  background: var(--colour-white);
}

.wizard__back {
  padding: var(--space-14) var(--space-22);
  border: 1px solid var(--ink-16);
  border-radius: var(--radius-pill);
  background: var(--colour-white);
  color: var(--colour-ink);
  font-size: var(--text-15);
  font-weight: var(--weight-semibold);
  transition: background 0.2s;
}

.wizard__back:hover {
  background: var(--colour-sand);
}

.wizard__note {
  flex: 1;
  font-size: var(--text-13);
  color: var(--ink-45);
}

/* Must follow .wizard__note — same specificity, so source order decides. */
.wizard__note--error {
  color: var(--colour-error);
  font-weight: var(--weight-semibold);
}

/* Phones (28 Sep 2026): the popup keeps its 10px gap each side (see .wizard), the panels lose some padding, and
   the footer note sits on its own line above the buttons instead of being squeezed between Back and Next. */
@media (max-width: 640px) {
  .wizard {
    max-height: calc(100% - 20px);
  }

  .wizard__head {
    padding: var(--space-18) var(--space-18) var(--space-12);
  }

  /* One-line step kicker and a title that fits: no four-line headers on a phone. */
  .wizard__step {
    font-size: 10px;
    letter-spacing: 0.08em;
  }

  .wizard__title {
    margin-block-start: 4px;
    font-size: 20px;
    line-height: 1.2;
  }

  .wizard__progress {
    margin-block-start: var(--space-12);
  }

  .wizard__body {
    padding: var(--space-18) var(--space-18) var(--space-22);
  }

  .wizard__hint {
    font-size: 15px;
  }

  .wizard__back {
    padding: var(--space-12) var(--space-18);
    font-size: 15px;
  }

  .wizard__next {
    padding: var(--space-13) var(--space-22);
    font-size: 15px;
  }

  .wizard__foot {
    flex-wrap: wrap;
    gap: var(--space-10) var(--space-12);
    padding: var(--space-12) var(--space-18) var(--space-16);
  }

  .wizard__note {
    flex: 1 1 100%;
    order: -1;
  }

  .wizard__next {
    margin-inline-start: auto;
  }

  /* The card step: Chargebee's form gets the width — it lays itself out for the frame's own width. */
  .wizard--wide .wizard__body {
    padding-inline: var(--space-10);
  }
}

.wizard__next {
  padding: var(--space-15) var(--space-26);
  border-radius: var(--radius-pill);
  background: var(--colour-ink);
  color: var(--colour-white);
  font-size: var(--text-15-5);
  font-weight: var(--weight-bold);
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s;
}

.wizard__next:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(11, 11, 12, 0.22);
}


/* ==========================================================================
   12. Forms
   ========================================================================== */

.field {
  display: block;
}

.field--wide {
  grid-column: 1 / -1;
}

.field__label {
  display: block;
  font-size: var(--text-13);
  font-weight: var(--weight-semibold);
  color: var(--ink-60);
}

.field__optional {
  font-weight: var(--weight-regular);
  color: var(--ink-45);
}

.field__control {
  width: 100%;
  margin-block-start: var(--space-8);
  padding: var(--space-14) var(--space-16);
  border: 1px solid var(--ink-14);
  border-radius: var(--radius-14);
  background: var(--colour-white);
  font-size: var(--text-16);
  color: var(--colour-ink);
  transition: border-color var(--transition-base);
}

.field__control::placeholder {
  color: var(--ink-35);
  opacity: 1;
}

.field__control:focus {
  border-color: var(--ink-45);
  outline: none;
}

.field__control:focus-visible {
  border-color: var(--ink-45);
  outline: 2px solid var(--colour-violet-mid);
  outline-offset: 2px;
}

.field__control[aria-invalid='true'] {
  border-color: var(--colour-error);
}

textarea.field__control {
  line-height: 1.5;
  resize: vertical;
}

/* --- Contact Form 7 ------------------------------------------------------
   The plugin's own stylesheet is dequeued; these rules cover the wrappers it
   adds around the theme's form markup.
   ------------------------------------------------------------------------ */

.screen-reader-response {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}



/* ==========================================================================
   13. Footer
   ========================================================================== */

.site-footer {
  margin-block-start: var(--footer-gap, var(--section-gap));
  padding: clamp(48px, 6vw, 72px) var(--gutter) var(--space-40);
  background: var(--colour-black);
  color: var(--colour-white);
}

.site-footer--flush {
  --footer-gap: 0;
}

.site-footer--lg {
  --footer-gap: var(--section-gap-lg);
}

.site-footer__inner {
  max-width: var(--container);
  margin-inline: auto;
}

.site-footer__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-40);
}

.site-footer__brand-mark {
  display: flex;
  align-items: baseline;
  gap: var(--space-8);
}

.site-footer__wordmark {
  font-size: var(--text-26);
  font-weight: var(--weight-black);
  letter-spacing: var(--track-tight);
}

.site-footer__dot {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: var(--radius-circle);
  background: var(--colour-violet);
}

.site-footer__blurb {
  max-width: 34ch;
  margin-block-start: var(--space-14);
  font-size: var(--text-15);
  line-height: 1.55;
  color: var(--paper-60);
}

.site-footer__rating {
  margin-block-start: var(--space-22);
}

.site-footer__column {
  display: flex;
  flex-direction: column;
  gap: var(--space-10);
  font-size: var(--text-15);
}

.site-footer__column-title {
  font-family: var(--font-mono);
  font-weight: var(--weight-regular);
  line-height: normal;
  font-size: var(--text-11);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: var(--paper-45);
}

.site-footer__link {
  color: var(--paper-78);
}

.site-footer__link:hover {
  color: var(--colour-white);
}

.site-footer__legal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-30);
  margin-block-start: var(--space-48);
  padding-block-start: var(--space-24);
  border-top: 1px solid var(--paper-12);
  font-size: var(--text-12-5);
  line-height: 1.6;
  color: var(--paper-45);
}

.site-footer__legal-note {
  max-width: 76ch;
}

.site-footer__portal {
  display: inline-flex;
  align-items: center;
  align-self: center;
  padding: 0.6em 1.15em;
  border: 1px solid var(--paper-45);
  border-radius: 999px;
  color: var(--colour-white);
  font-size: var(--text-12-5);
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.site-footer__portal:hover,
.site-footer__portal:focus-visible {
  border-color: var(--colour-white);
  background-color: var(--paper-12);
  color: var(--colour-white);
}


/* ==========================================================================
   14. Responsive
   ========================================================================== */

@media (min-width: 600px) {
  .hero-banner__stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .plan__features {
    grid-template-columns: 1fr 1fr;
  }

  .principles__grid,
  .services-promo__grid,
  .service-cards__grid,
  .service-index__grid,
  .plan-duo__grid,
  .audience-split__grid,
  .benefits-grid__grid,
  .review-wall__grid,
  .start-options__grid,
  .hero-banner__steps {
    grid-template-columns: repeat(2, 1fr);
  }

  .site-footer__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 900px) {
  :root {
    --gutter: 32px;
  }

  .about-intro__grid {
    grid-template-columns: 0.85fr 1.15fr;
    gap: var(--space-60);
  }

  .contact__grid {
    grid-template-columns: 0.9fr 1.1fr;
    gap: var(--space-64);
  }

  .principles__grid,
  .service-cards__grid,
  .service-index__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .plan-duo__grid,
  .audience-split__grid,
  .benefits-grid__grid {
    grid-template-columns: 1fr 1fr;
  }

  .review-wall__grid,
  .start-options__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .hero-banner__steps {
    grid-template-columns: repeat(4, 1fr);
  }

  .pricing-duo__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  }

  .cta-band--dual .cta-band__inner {
    grid-template-columns: 1.05fr 0.95fr;
    gap: var(--space-56);
  }

  .site-header__toggle {
    display: none;
  }

  .hero-banner__stats {
    grid-template-columns: repeat(4, 1fr);
  }

  .site-footer__grid {
    grid-template-columns: 1.6fr 1fr 1fr 1fr;
  }
}

/* --- Navigation drawer, below 900px -------------------------------------- */

@media (max-width: 899px) {
  .site-header__toggle {
    display: inline-flex;
  }

  .site-header__inner {
    gap: var(--space-12);
  }

  .site-header__cta {
    display: none;
  }

  /* Anchored to the header rather than the viewport: backdrop-filter makes
     .site-header a containing block, so position: fixed would be trapped
     inside it. Body scroll is locked while open, so this behaves identically. */
  .primary-nav {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: var(--layer-drawer);
    display: flex;
    flex-direction: column;
    width: 100vw;
    height: calc(100vh - 100%);
    height: calc(100dvh - 100%);
    padding: var(--space-24) var(--gutter) var(--space-32);
    background: var(--colour-white);
    overflow-y: auto;
    overscroll-behavior: contain;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition:
      opacity var(--transition-base) ease,
      transform var(--transition-base) var(--ease-out),
      visibility var(--transition-base);
  }

  .primary-nav.is-open {
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .primary-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    font-size: var(--text-20);
  }

  .primary-nav__item {
    border-bottom: 1px solid var(--ink-08);
  }

  .primary-nav__item--has-children {
    flex-wrap: wrap;
    gap: 0;
  }

  .primary-nav__link {
    flex: 1;
    min-height: 56px;
    padding: var(--space-12) 0;
    color: var(--colour-ink);
  }

  .primary-nav__item--has-children .primary-nav__link {
    padding-inline-end: var(--space-12);
  }

  .primary-nav__caret {
    width: 56px;
    height: 56px;
    padding: 0;
  }

  .primary-nav__caret-glyph {
    font-size: var(--text-12);
  }

  .primary-nav__drop {
    position: static;
    flex: 1 0 100%;
    padding-top: 0;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
  }

  .primary-nav__caret[aria-expanded='true'] ~ .primary-nav__drop {
    display: block;
  }

  .primary-nav__drop-panel {
    gap: 0;
    padding: 0 0 var(--space-12);
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .primary-nav__drop-link {
    min-height: 44px;
    padding: var(--space-12) var(--space-16);
    font-size: var(--text-16);
    white-space: normal;
  }

  .primary-nav__cta {
    margin-block-start: var(--space-24);
  }

  .primary-nav__cta .btn {
    width: 100%;
    min-height: 48px;
  }

  body.has-drawer-open {
    overflow: hidden;
  }
}

@media (min-width: 900px) {
  .primary-nav__cta {
    display: none;
  }
}

/* The panel also opens on pointer hover, exactly as drawn. Pointer only —
   the caret button carries the state for keyboard and touch. */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  .primary-nav__item--has-children:hover:not(.is-dismissed) .primary-nav__drop {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
}

/* --- Reduced motion ------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important; /* stop drift/pulse loops outright */
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal].is-armed {
    opacity: 1;
    transform: none;
  }

  .aurora__blob {
    animation: none;
  }
}


/* ==========================================================================
   15. Overrides
   ========================================================================== */

/* Intentionally empty. */

/* --- home copy changes (2026-09-08): hero tick list, arrows, stars ------- */

.hero-banner__points {
  display: flex;
  justify-content: center;
  margin-block-start: var(--space-30);
}

.hero-banner__points .tick-list {
  gap: var(--space-10);
  font-size: var(--text-17);
  text-align: left;
  color: var(--paper-72);
}

.hero-banner__points .tick-list__mark {
  color: oklch(0.78 0.16 150);
}

.hero-banner__stars {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-inline-end: 6px;
  vertical-align: -2px;
}

.hero-banner__star {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  background: var(--colour-trustpilot);
  color: var(--colour-white);
  font-size: 9px;
  line-height: 1;
}

.btn__arrow {
  display: inline-block;
}

/* --- trial-scrub with a heading: the home page "How it works" -----------
   Small screens read as the introduced, numbered list from the approved
   screen; wide screens keep the scrubbed sequence with the intro above it.
   ------------------------------------------------------------------------ */

.trial-scrub__intro {
  position: relative;
  max-width: 640px;
  margin-inline: auto;
  text-align: center;
}

.trial-scrub__heading {
  margin-block-start: var(--space-16);
  font-size: var(--display-step);
  font-weight: var(--weight-black);
  letter-spacing: -0.045em;
  line-height: 0.98;
  text-wrap: balance;
}

.trial-scrub__subtitle {
  margin-block-start: var(--space-14);
  font-size: var(--text-18);
  line-height: 1.5;
  color: var(--paper-66);
}

.trial-scrub--headed .trial-scrub__steps {
  margin-block-start: var(--space-48);
}

.trial-scrub__step-index {
  display: none;
}

.trial-scrub__cta {
  margin-block-start: var(--space-40);
  text-align: center;
}

.trial-scrub--headed:not(.is-scrub) .trial-scrub__step {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  column-gap: var(--space-18);
}

.trial-scrub--headed:not(.is-scrub) .trial-scrub__step::before {
  content: "";
  position: absolute;
  left: 20px;
  top: 44px;
  bottom: calc(-1 * var(--space-40));
  width: 1px;
  background: var(--paper-18);
}

.trial-scrub--headed:not(.is-scrub) .trial-scrub__step:last-child::before {
  content: none;
}

.trial-scrub--headed:not(.is-scrub) .trial-scrub__step-index {
  display: flex;
  align-items: center;
  justify-content: center;
  grid-row: 1 / span 3;
  width: 40px;
  height: 40px;
  border: 1px solid var(--paper-30);
  border-radius: var(--radius-circle);
  font-family: var(--font-mono);
  font-size: var(--text-12);
  letter-spacing: 0.08em;
  color: var(--colour-white);
}

.trial-scrub--headed:not(.is-scrub) .trial-scrub__title {
  display: flex;
  align-items: center;
  grid-column: 2;
  min-height: 40px;
  max-width: none;
  font-size: clamp(22px, 2.6vw, 28px);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.trial-scrub--headed:not(.is-scrub) .trial-scrub__body,
.trial-scrub--headed:not(.is-scrub) .trial-scrub__meta {
  grid-column: 2;
}

.trial-scrub--headed:not(.is-scrub) .trial-scrub__body {
  margin-block-start: var(--space-10);
  font-size: var(--text-16-5);
}

.trial-scrub.is-scrub .trial-scrub__intro {
  max-width: 46ch;
  margin-inline: 0;
  text-align: left;
}

.trial-scrub.is-scrub .trial-scrub__intro .trial-scrub__counter {
  position: absolute;
  right: 0;
  top: 4px;
}

.trial-scrub.is-scrub .trial-scrub__heading {
  font-size: clamp(30px, 2.8vw, 40px);
}

.trial-scrub.is-scrub.trial-scrub--headed .trial-scrub__steps {
  margin-block-start: var(--space-34);
}

.trial-scrub.is-scrub .trial-scrub__cta {
  margin-block-start: var(--space-26);
  text-align: left;
}

/* The home pill carries a long line; keep it on one line on phones. */
@media (max-width: 480px) {
  .hero-banner--home .pill {
    padding-inline: var(--space-10) var(--space-12);
    font-size: 10px;
    letter-spacing: 0.06em;
    text-align: center;
  }
}

/* Plain pages without sections (privacy policy, terms): give the headings
   and paragraphs inside the prose body room to breathe. */
.prose-block__body h2 {
  margin-block: var(--space-24) var(--space-8);
  font-size: var(--text-24);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.prose-block__body h3 {
  margin-block: var(--space-20) var(--space-8);
  font-size: var(--text-16);
}

.prose-block__body p + p {
  margin-block-start: var(--space-12);
}

/* ==========================================================================
   Personal hub (10 Sep 2026): hero service list, section eyebrow, card note,
   price-without-a-figure, legible footer disclaimer.
   ========================================================================== */

/* The list "What can we help you with?" opens beneath the hero buttons. */
.service-list {
  max-width: 520px;
  margin-block-start: var(--space-16);
  padding: var(--space-16) var(--space-18) var(--space-18);
  border-radius: var(--radius-16);
  background: var(--colour-white);
  color: var(--colour-ink);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.service-list__lead {
  margin: 0 0 var(--space-10);
  font-size: var(--text-12-5);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-62);
}

.service-list__items {
  display: grid;
  gap: var(--space-8);
  margin: 0;
  padding: 0;
  list-style: none;
}

.service-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-12);
  padding: 0.85em 1em;
  border: 1.5px solid rgba(11, 11, 12, 0.12);
  border-radius: 999px;
  color: var(--colour-ink);
  font-size: var(--text-16);
  font-weight: 700;
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

a.service-list__item:hover,
a.service-list__item:focus-visible {
  border-color: var(--colour-ink);
  background-color: var(--colour-ink);
  color: var(--colour-white);
}

.service-list__item--soon {
  color: rgba(11, 11, 12, 0.42);
  border-style: dashed;
  cursor: default;
}

.service-list__tag {
  flex: none;
  padding: 0.3em 0.7em;
  border-radius: 999px;
  background: rgba(11, 11, 12, 0.06);
  font-size: var(--text-12-5);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(11, 11, 12, 0.55);
}

[data-service-list-toggle].is-open .btn__arrow {
  transform: rotate(90deg);
}

/* Small line above a section heading, e.g. the service the visitor is inside.
   .section-head is a flex row, so the eyebrow takes the whole first line. */
.section-head__eyebrow {
  flex-basis: 100%;
  margin: 0 0 var(--space-10);
  font-size: var(--text-12-5);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-62);
}

/* One short line under a service card's body, e.g. the 999 line. */
.service-card__note {
  display: block;
  margin-block-start: var(--space-10);
  font-size: var(--text-14-5);
  font-weight: 700;
  color: var(--colour-ink);
}

/* Subscription card with no fixed figure: the rate line is a sentence. */
.plan__rate--text .plan__price-note {
  display: block;
  max-width: 34ch;
  font-size: var(--text-14-5);
  line-height: 1.55;
}

/* Regulatory wording in the footer must be legible (client note, every page). */
.site-footer__legal {
  color: var(--paper-65);
}

/* The tick list and trust line are centred on the centred home hero; on the
   left-aligned hubs they sit with the rest of the copy. */
.hero-banner:not(.hero-banner--home) .hero-banner__points {
  justify-content: flex-start;
}

.hero-banner:not(.hero-banner--home) .hero-banner__trust {
  justify-content: flex-start;
  text-align: left;
}

/* Hub and sector headlines (client, 10 Sep 2026): full width, tight leading,
   no tracking — so the personal hub reads "Expert lawyers for / individuals
   on a / monthly subscription." on desktop, and the business pages wrap the
   same way. */
.hero-banner--personal .hero-banner__title,
.hero-banner--business .hero-banner__title {
  max-width: none;
  line-height: 1;
  letter-spacing: 0;
}

/* --- Paid-traffic landing pages (client spec, 15 Sep 2026) ---------------
   Two personal pages built from reusable sections: hero (landing variant),
   How it works (trial-scrub), a tappable list, three start cards, FAQs,
   reviews, and a trial button pinned to the bottom of the screen. */

.hero-banner--landing {
  --hero-pad-top: clamp(52px, 6.5vw, 92px);
  --hero-pad-bottom: clamp(60px, 7.5vw, 104px);
  /* Wide headline, two balanced lines on desktop: "Expert Family Lawyers on /
     a monthly subscription." (client, 15 Sep 2026). */
  --hero-title-width: 26ch;
  --hero-title-gap: var(--space-20);
  --hero-title-size: clamp(36px, 5.4vw, 86px);
  --hero-title-leading: 1;
  --hero-title-wrap: balance;
  --hero-lede-width: 600px;
}

.hero-banner--landing .hero-banner__title {
  letter-spacing: -0.03em;
}

.hero-banner--landing .hero-banner__lede {
  margin-block-start: var(--space-22);
  font-size: clamp(16px, 1.55vw, 20px);
}

.hero-banner--landing .hero-banner__points {
  margin-block-start: var(--space-26);
}

.hero-banner--landing .hero-banner__points .tick-list {
  font-size: var(--text-16);
  color: var(--colour-white);
}

.hero-banner--landing .hero-banner__points .tick-list__mark {
  color: var(--colour-green);
}

.hero-banner--landing .hero-banner__actions {
  margin-block-start: var(--space-28);
}

.hero-banner--landing .hero-banner__actions .btn {
  --btn-pad-y: var(--space-18);
  --btn-size: var(--text-17);
  width: 100%;
  max-width: 440px;
}

.hero-banner--landing .hero-banner__trust {
  gap: var(--space-14);
  margin-block-start: var(--space-24);
  font-size: var(--text-14-5);
}

.hero-banner__trust-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-inline-end: 6px;
}

.hero-banner__trust-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--colour-trustpilot);
  color: var(--colour-white);
  font-size: 11px;
  line-height: 1;
}

.hero-banner__trust-link {
  color: var(--colour-white);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero-banner__trust-link:hover,
.hero-banner__trust-link:focus-visible {
  color: var(--colour-violet);
}

.hero-banner__trust-arrow {
  margin-inline-start: 2px;
}

/* The pinned bar must never sit directly under the hero's own button. */
.has-sticky-cta .hero-banner--landing {
  --hero-pad-bottom: clamp(104px, 13vw, 150px);
}

@media (max-width: 480px) {
  .hero-banner--landing {
    --hero-title-size: clamp(33px, 9.4vw, 38px);
    --hero-title-width: none;
  }
}

/* What we help with — tappable rows */
.help-list {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--section-gap) var(--gutter) 0;
}

.help-list__items {
  display: grid;
  margin: var(--space-30) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--ink-12);
}

.help-list__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-20) var(--space-6);
  border-bottom: 1px solid var(--ink-12);
  color: var(--colour-ink);
  font-size: var(--text-18);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  text-decoration: none;
  transition: padding-inline-start 0.2s var(--ease-out), color 0.15s ease;
}

.help-list__item:hover,
.help-list__item:focus-visible {
  padding-inline-start: var(--space-14);
  color: var(--colour-violet-deep);
}

.help-list__arrow {
  flex: none;
  font-weight: var(--weight-black);
  transition: transform 0.2s var(--ease-out);
}

.help-list__item:hover .help-list__arrow {
  transform: translateX(4px);
}

@media (min-width: 900px) {
  .help-list__items {
    max-width: 760px;
  }
}

/* Choose how to start — three cards */
.start-cards {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--section-gap) var(--gutter) 0;
}

.start-cards__grid {
  display: grid;
  gap: var(--space-14);
  margin: var(--space-30) 0 0;
  padding: 0;
  list-style: none;
}

.start-card {
  display: flex;
  align-items: center;
  gap: var(--space-16);
  width: 100%;
  padding: var(--space-20) var(--space-22);
  border: 1px solid var(--ink-12);
  border-radius: var(--radius-16);
  background: var(--colour-white);
  color: var(--colour-ink);
  text-align: left;
  text-decoration: none;
  transition: transform 0.2s var(--ease-out), border-color 0.15s ease, box-shadow 0.2s ease;
}

.start-card:hover,
.start-card:focus-visible {
  border-color: var(--colour-ink);
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(11, 11, 12, 0.08);
}

.start-card--ink {
  border-color: var(--colour-ink);
  background: var(--colour-ink);
  color: var(--colour-white);
}

.start-card__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 14px;
  background: var(--colour-sand);
  color: var(--colour-violet-deep);
}

.start-card__icon svg {
  width: 22px;
  height: 22px;
}

.start-card--ink .start-card__icon {
  background: var(--paper-10);
  color: var(--colour-white);
}

.start-card__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.start-card__index {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: 0.1em;
  color: var(--ink-50);
}

.start-card--ink .start-card__index {
  color: var(--paper-50);
}

.start-card__title {
  font-size: var(--text-17-5);
  font-weight: var(--weight-bold);
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.start-card__body {
  font-size: var(--text-15);
  line-height: 1.45;
  color: var(--ink-62);
}

.start-card--ink .start-card__body {
  color: var(--paper-66);
}

.start-card__arrow {
  flex: none;
  font-size: var(--text-20);
  font-weight: var(--weight-black);
  transition: transform 0.2s var(--ease-out);
}

.start-card:hover .start-card__arrow {
  transform: translateX(4px);
}

@media (min-width: 900px) {
  .start-cards__grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .start-card {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-18);
    height: 100%;
    padding: var(--space-26);
  }

  .start-card__arrow {
    align-self: flex-end;
  }
}

/* FAQs — accordions, closed on load */
.faq {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--section-gap) var(--gutter) 0;
}

.faq__list {
  margin-block-start: var(--space-30);
  border-top: 1px solid var(--ink-12);
}

.faq__item {
  border-bottom: 1px solid var(--ink-12);
}

.faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-18) 0;
  cursor: pointer;
  list-style: none;
  font-size: var(--text-17);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--colour-ink);
}

.faq__question::-webkit-details-marker {
  display: none;
}

.faq__toggle {
  position: relative;
  flex: none;
  width: 26px;
  height: 26px;
  border: 1px solid var(--ink-14);
  border-radius: 50%;
}

.faq__toggle::before,
.faq__toggle::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 1.5px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.2s var(--ease-out);
}

.faq__toggle::after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.faq__item[open] .faq__toggle::after {
  transform: translate(-50%, -50%) rotate(0deg);
}

.faq__answer {
  max-width: 62ch;
  padding: 0 0 var(--space-22);
  font-size: var(--text-15-5);
  line-height: 1.6;
  color: var(--ink-65);
}

.faq__answer p + p {
  margin-block-start: var(--space-12);
}

@media (min-width: 900px) {
  .faq__list {
    max-width: 760px;
  }
}

/* Review wall additions: stars beside the provider, link under the cards */
.review-wall__stars {
  display: inline-flex;
  gap: 2px;
}

.review-wall__star {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--colour-trustpilot);
  color: var(--colour-white);
  font-size: 11px;
  line-height: 1;
}

.review-wall__more {
  margin-block-start: var(--space-26);
}

/* The trial button pinned to the bottom of the screen */
.sticky-cta {
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 90;
  padding: var(--space-12) var(--gutter) calc(var(--space-12) + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--paper-12);
  background: rgba(11, 11, 12, 0.9);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.sticky-cta__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  max-width: 460px;
  margin-inline: auto;
}

.sticky-cta__button {
  --btn-pad-y: var(--space-15);
  --btn-size: var(--text-16-5);
  width: 100%;
}

.sticky-cta__note {
  font-size: var(--text-12-5);
  letter-spacing: 0.01em;
  color: var(--paper-60);
}

body.has-sticky-cta {
  padding-block-end: 104px;
}

body:has(dialog[open]) .sticky-cta {
  display: none;
}

/* Landing hero on phones: the pill stays on one line, the trust row wraps
   between its items rather than inside "4.8 out of 5". */
.hero-banner--landing .hero-banner__trust > a,
.hero-banner--landing .hero-banner__trust > span {
  white-space: nowrap;
}

@media (max-width: 480px) {
  .hero-banner--landing .pill {
    padding-inline: var(--space-12) var(--space-10);
    font-size: var(--text-10-5);
    letter-spacing: 0.06em;
  }

  .hero-banner--landing .hero-banner__trust {
    gap: var(--space-10) var(--space-12);
  }

  .hero-banner--landing .hero-banner__trust-divider {
    display: none;
  }
}

/* Review-wall rating line on phones: wrap between the parts, never inside the score. */
.review-wall__rating {
  flex-wrap: wrap;
}

.review-wall__score {
  white-space: nowrap;
}

/* --- Final website changes brief (client, 15 Sep 2026) -------------------
   Back link on sector heroes, the sector list shown open, a plain numbered
   timeline, a second button on the steps block, a standfirst on the benefits
   grid, and the subscription-offers section. Same palette, type and controls. */

.hero-banner__back {
  margin-block-end: var(--space-16);
  font-size: var(--text-14-5);
}

.hero-banner__back-link {
  color: var(--paper-66);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: color 0.15s ease;
}

.hero-banner__back-link:hover,
.hero-banner__back-link:focus-visible {
  color: var(--colour-white);
}

/* The service (sector) list printed open: plain rows on the dark hero. */
.service-list--open {
  max-width: 560px;
  margin-block-start: var(--space-26);
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--colour-white);
  box-shadow: none;
}

.service-list--open .service-list__lead {
  color: var(--paper-60);
}

.service-list--open .service-list__items {
  gap: 0;
  border-top: 1px solid var(--paper-16);
}

.service-list--open .service-list__item {
  padding: var(--space-16) var(--space-4);
  border: 0;
  border-bottom: 1px solid var(--paper-16);
  border-radius: 0;
  color: var(--colour-white);
  font-size: var(--text-17);
}

/* The lead sector (first row) is the priority: heavier and larger. */
.service-list--open li:first-child .service-list__item {
  font-size: var(--text-19);
  font-weight: var(--weight-black);
}

.service-list--open a.service-list__item:hover,
.service-list--open a.service-list__item:focus-visible {
  background: none;
  border-color: var(--paper-30);
  color: var(--colour-green);
}

.service-list--open .service-list__item--soon {
  border-style: solid;
  color: var(--paper-50);
}

.service-list--open .service-list__tag {
  background: var(--paper-10);
  color: var(--paper-60);
}

.hero-banner__note {
  max-width: 560px;
}

/* Plain timeline: the steps never turn into the scroll-driven version. */
.trial-scrub--static .trial-scrub__sticky {
  position: static;
  min-height: 0;
}

.trial-scrub--static .trial-scrub__numeral,
.trial-scrub--static .trial-scrub__counter,
.trial-scrub--static .trial-scrub__glow {
  display: none;
}

.trial-scrub__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-12);
}

.benefits-grid__lede {
  max-width: 520px;
  margin-block-start: var(--space-14);
  font-size: var(--text-18);
  line-height: 1.5;
  color: var(--ink-60);
}

/* Subscription offers */
.offer-list {
  position: relative;
  overflow: hidden;
  padding: var(--section-gap) var(--gutter);
  background: var(--colour-black);
  color: var(--colour-white);
}

.offer-list__inner {
  position: relative;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
}

.offer-list__title {
  max-width: 18ch;
  margin-block-start: var(--space-20);
  font-size: var(--display-section);
  font-weight: var(--weight-black);
  letter-spacing: -0.04em;
  line-height: 1;
  text-wrap: balance;
}

.offer-list__lede {
  max-width: 560px;
  margin-block-start: var(--space-16);
  font-size: var(--text-18);
  line-height: 1.5;
  color: var(--paper-66);
}

.offer-list__items {
  display: grid;
  gap: var(--space-12);
  margin-block-start: var(--space-34);
}

.offer {
  border: 1px solid var(--paper-18);
  border-radius: var(--radius-16);
  background: var(--paper-04);
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.offer:hover,
.offer[open] {
  border-color: var(--paper-30);
  background: var(--paper-06);
}

.offer--featured {
  border-color: var(--colour-green);
  background: rgba(0, 182, 122, 0.06);
}

.offer--featured:hover,
.offer--featured[open] {
  border-color: var(--colour-green);
}

.offer__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16);
  padding: var(--space-20) var(--space-22);
  cursor: pointer;
  list-style: none;
}

.offer__summary::-webkit-details-marker {
  display: none;
}

.offer__text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.offer__title {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-10);
  font-size: var(--text-20);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.offer__tag {
  padding: 4px 10px;
  border: 1px solid var(--colour-green);
  border-radius: var(--radius-pill);
  font-family: var(--font-mono);
  font-size: var(--text-11);
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--colour-green);
}

.offer__body {
  font-size: var(--text-15-5);
  line-height: 1.5;
  color: var(--paper-66);
}

.offer__arrow {
  flex: none;
  font-size: var(--text-20);
  font-weight: var(--weight-black);
  transition: transform 0.2s var(--ease-out);
}

.offer[open] .offer__arrow {
  transform: rotate(90deg);
}

.offer__detail {
  display: grid;
  gap: var(--space-12);
  padding: 0 var(--space-22) var(--space-22);
  font-size: var(--text-15-5);
  line-height: 1.55;
  color: var(--paper-72);
}

.offer__detail-row {
  display: grid;
  gap: 4px;
}

.offer__detail-label {
  font-family: var(--font-mono);
  font-size: var(--text-11);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--paper-50);
}

.offer__link {
  justify-self: start;
  color: var(--colour-white);
  font-weight: var(--weight-semibold);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.offer-list__points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-14) var(--space-26);
  margin-block-start: var(--space-28);
  padding-block-start: var(--space-22);
  border-top: 1px solid var(--paper-12);
  font-size: var(--text-15);
  color: var(--paper-72);
}

.offer-list__point {
  display: flex;
  gap: var(--space-8);
}

.offer-list__point .tick-list__mark {
  color: var(--colour-green);
}

.offer-list__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-block-start: var(--space-28);
}

@media (min-width: 900px) {
  .offer__detail-row {
    grid-template-columns: 160px minmax(0, 1fr);
    gap: var(--space-16);
  }
}

/* Plain timeline on wide screens: keep the numbered list in a readable column under its heading. */
.trial-scrub--static .trial-scrub__steps {
  max-width: 640px;
  margin-inline: auto;
}

/* ------------------------------------------------------------------------
   PPC landing pages — client changes 15 Sep 2026
   ------------------------------------------------------------------------ */

/* Hero buttons hidden where the sticky trial button already shows them
   (below the theme's desktop breakpoint). */
@media (max-width: 899px) {
  .hero-banner__actions--desktop {
    display: none;
  }
}

/* "Background: Sand" on a section: a full-bleed light band behind the
   container so white sections alternate. box-shadow paints out to the
   viewport edges, clip-path trims it to the section's own height. */
.tone-sand {
  background: var(--colour-sand);
  box-shadow: 0 0 0 100vmax var(--colour-sand);
  clip-path: inset(0 -100vmax);
  padding-block-end: var(--section-gap);
}

/* A white section right before a sand band needs its own bottom breathing
   room (sections normally only carry top padding). */
.help-list:has(+ .tone-sand),
.start-cards:has(+ .tone-sand),
.faq:has(+ .tone-sand),
.review-wall:has(+ .tone-sand) {
  padding-block-end: var(--section-gap);
}

/* Service pages: the trial button under the free-trial badge (client feedback 16 Sep 2026) */
.hero-compact__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-12);
  margin-block-start: clamp(22px, 3vw, 30px);
}

/* Final changes, 17 Sep 2026: three package cards side by side, plain cards without a link,
   and the pricing section standing alone once the fixed-fee card is gone. */
.plan-card--static {
  cursor: default;
}

.plan-card--static:hover {
  border-color: var(--ink-12);
}

@media (min-width: 900px) {
  .plan-duo__grid--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .plan-duo__grid--three .plan-card {
    padding: var(--space-40) var(--space-28);
    min-height: 260px;
  }

  .pricing-duo__grid--single {
    grid-template-columns: minmax(0, 1fr);
    max-width: 100%;
    margin-inline: auto;
  }
}

/* Booking limits, 18 Sep 2026: the "Book a call" page (page-book-a-call.php) and the
   note the popups show when the customer already holds an appointment. */
.booking-gate {
  padding: var(--section-gap-sm) var(--gutter) var(--section-gap);
  background: var(--colour-sand);
}

.booking-gate__inner {
  max-width: 920px;
  margin-inline: auto;
}

.booking-gate__panel {
  padding: clamp(24px, 4vw, 40px);
  border: 1px solid var(--ink-10);
  border-radius: var(--radius-20);
  background: var(--colour-white);
}

.booking-gate__panel--calendar {
  padding: clamp(14px, 2.4vw, 24px);
}

.booking-gate__title {
  font-size: clamp(24px, 3vw, 32px);
  font-weight: var(--weight-black);
  letter-spacing: var(--track-display);
  line-height: 1.1;
}

.booking-gate__lead,
.booking-gate__loading {
  max-width: 62ch;
  margin-block-start: var(--space-14);
  font-size: var(--text-16);
  line-height: 1.6;
  color: var(--ink-70);
}

.booking-gate__loading {
  margin-block-start: 0;
  text-align: center;
}

.booking-gate__count {
  padding: var(--space-4) var(--space-8) var(--space-12);
  font-size: var(--text-15-5);
  font-weight: var(--weight-semibold);
  color: var(--ink-70);
}

.booking-gate__widget {
  margin-block-start: 0;
}

.booking-gate__note {
  padding: var(--space-12) var(--space-8) var(--space-4);
  font-size: var(--text-14-5);
  line-height: 1.5;
  color: var(--ink-60);
}

.booking-gate__booked {
  margin-block-end: var(--space-16);
  padding: var(--space-16) var(--space-20);
  border-radius: var(--radius-16);
  background: var(--colour-green);
  color: var(--colour-green-ink);
  font-weight: var(--weight-semibold);
  line-height: 1.5;
}

.booking-gate__form {
  max-width: 460px;
  margin-block-start: var(--space-24);
}

.booking-gate__button {
  margin-block-start: var(--space-20);
}

.booking-gate__trap {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.booking-gate__status {
  min-height: 1.5em;
  margin-block-start: var(--space-12);
  font-size: var(--text-14-5);
  color: var(--ink-60);
}

.booking-gate__status--error {
  color: var(--colour-error);
}

.wizard-calendly__held {
  margin-block-start: var(--space-12);
  padding: var(--space-20) var(--space-22);
  border: 1px solid var(--ink-12);
  border-radius: var(--radius-16);
  background: var(--colour-sand-light);
}

.wizard-calendly__held-title {
  font-weight: 700;
}

.wizard-calendly__held-body {
  margin-block-start: var(--space-8);
  font-size: var(--text-15-5);
  line-height: 1.55;
  color: var(--ink-65);
}

/* Book a call page: the customer's upcoming calls, each with a Reschedule link (21 Sep 2026). */
.booking-gate__calls {
  margin-block-start: var(--space-24);
  padding-block-start: var(--space-20);
  border-block-start: 1px solid var(--ink-12);
  text-align: left;
}

.booking-gate__calls-title {
  font-size: var(--text-15-5);
  font-weight: var(--weight-bold);
  color: var(--colour-ink);
}

.booking-gate__calls-list {
  display: grid;
  gap: var(--space-10);
  margin-block-start: var(--space-12);
  padding: 0;
  list-style: none;
}

.booking-gate__call {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-10) var(--space-16);
  padding: var(--space-12) var(--space-16);
  border: 1px solid var(--ink-12);
  border-radius: var(--radius-18);
  background: var(--colour-white);
  font-size: var(--text-15-5);
  color: var(--colour-ink);
}

.booking-gate__call-link,
.booking-gate__booked-link {
  font-weight: var(--weight-bold);
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   Client brief "Landing page and booking journeys" (3–4 Oct 2026)
   Landing hero with three routes, and the sign-up popup's new screens:
   the trial explained (02), the free case assessment explained (03),
   the legal-aid question (05) and its "Sorry, we can't help." screen (06).
   ========================================================================== */

/* --- Landing hero: a three-tier headline --------------------------------- */
.hero-banner__title-line {
  display: block;
}

.hero-banner__title-line--second {
  margin-block-start: 0.2em;
  font-size: 0.6em;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.hero-banner__title-line--third {
  margin-block-start: 0.34em;
  font-size: 0.42em;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.hero-banner--landing .hero-banner__title--tiered {
  --hero-title-width: 22ch;
}

/* The reviews line sits above the buttons when the page says so. */
.hero-banner--landing .hero-banner__trust--above {
  margin-block-start: var(--space-22);
}

/* Three routes, one under the other: solid, outlined, then a plain link. */
.hero-banner--landing .hero-banner__actions--stack {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-12);
  margin-block-start: var(--space-22);
}

.hero-banner--landing .hero-banner__actions--stack .btn--ghost {
  border-width: 1.5px;
  border-color: var(--paper-60);
}

.btn--link {
  --btn-pad-y: var(--space-8);
  --btn-pad-x: 0;
  min-height: 44px;
  border-radius: 0;
  background: none;
  color: var(--colour-white);
  font-weight: var(--weight-medium, 500);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

.btn--link:hover,
.btn--link:focus-visible {
  color: var(--colour-violet);
}

.hero-banner--landing .hero-banner__actions--stack .btn--link {
  justify-content: center;
}

@media (max-width: 480px) {
  .hero-banner--landing .hero-banner__actions--stack {
    align-items: stretch;
  }

  .hero-banner--landing .hero-banner__actions--stack .btn {
    max-width: none;
  }
}

/* --- Popup: screen 02, the trial in seven steps --------------------------- */
.wizard-steps {
  display: grid;
  gap: var(--space-20);
  margin: 0;
  padding: 0;
  list-style: none;
}

.wizard-steps__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-16);
}

.wizard-steps__number {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--radius-circle);
  background: oklch(0.95 0.03 288);
  color: var(--colour-violet-mid);
  font-size: var(--text-17);
  font-weight: var(--weight-bold);
  line-height: 1;
}

.wizard-steps__text {
  display: block;
  padding-block-start: 2px;
}

.wizard-steps__title {
  display: block;
  font-size: var(--text-16);
  font-weight: var(--weight-bold);
  letter-spacing: -0.015em;
  color: var(--colour-ink);
}

.wizard-steps__body {
  display: block;
  margin-block-start: 3px;
  font-size: var(--text-14-5);
  line-height: 1.5;
  color: var(--ink-58);
}

.wizard-steps__note {
  margin-block-start: var(--space-22);
  padding-block-start: var(--space-18);
  border-block-start: 1px solid var(--ink-12);
  font-size: var(--text-14-5);
  line-height: 1.55;
  color: var(--ink-58);
}

/* One wide "Continue →" button, nothing else in the footer. */
.wizard__panel--intro .wizard__note {
  display: none;
}

.wizard__panel--intro .wizard__next {
  flex: 1;
  padding-block: var(--space-16);
  font-size: var(--text-16);
}

/* --- Popup: screen 03, the free case assessment --------------------------- */
.wizard-offer {
  padding: var(--space-24);
  border: 1px solid var(--ink-14);
  border-radius: var(--radius-18);
}

.wizard-offer__title {
  font-size: var(--text-21);
  font-weight: var(--weight-bold);
  letter-spacing: -0.03em;
  color: var(--colour-ink);
}

.wizard-offer__price {
  margin-block-start: 4px;
  font-size: var(--text-17);
  font-weight: var(--weight-bold);
  color: var(--colour-violet-deep);
}

.wizard-offer__lede {
  margin-block-start: var(--space-14);
  font-size: var(--text-15-5);
  line-height: 1.55;
  color: var(--ink-60);
}

.wizard-offer__points {
  display: grid;
  gap: var(--space-12);
  margin-block-start: var(--space-18);
}

.wizard-offer__point {
  display: flex;
  align-items: flex-start;
  gap: var(--space-14);
  font-size: var(--text-15-5);
  line-height: 1.5;
  color: var(--ink-60);
}

.wizard-offer__mark {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--radius-circle);
  background: var(--ink-08);
  color: var(--colour-ink);
  font-size: var(--text-13);
  line-height: 1;
}

.wizard-offer__note {
  margin-block-start: var(--space-18);
  font-size: var(--text-15-5);
  line-height: 1.55;
  color: var(--ink-60);
}

/* --- Popup: screens 04–06 -------------------------------------------------- */
.wizard__hint-lead {
  font-weight: var(--weight-semibold);
  color: var(--colour-ink);
}

/* The legal-aid options open the screen; their hint follows them. */
.wizard__choices--first {
  margin-block-start: 0;
}

.wizard__hint--after {
  margin-block-start: var(--space-18);
}

.wizard-legal {
  min-height: 150px;
}

.wizard-legal__lead {
  font-size: var(--text-16);
  line-height: 1.55;
  color: var(--colour-ink);
}

.wizard-legal__body {
  margin-block-start: 2px;
  font-size: var(--text-16);
  line-height: 1.55;
  color: var(--ink-60);
}

/* Next waits for an answer on the legal-aid question. */
.wizard__next:disabled {
  background: var(--ink-28);
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

/* --- 6 Oct 2026: fixes found in the QA of the brief ------------------------ */

/* "Choose how to start" now sits right before the dark How-it-works band (section 2, client comment 2),
   which carries no top margin of its own: the white section keeps its own breathing room. */
.start-cards:has(+ .trial-scrub--flush) {
  padding-block-end: var(--section-gap);
}

/* The three-tier headline: the medium and small lines stay readable on phones. */
.hero-banner__title-line--second {
  font-size: 0.62em;
}

.hero-banner__title-line--third {
  font-size: 0.5em;
}

@media (max-width: 480px) {
  .hero-banner--landing .hero-banner__title--tiered {
    --hero-title-size: clamp(40px, 12.5vw, 50px);
  }
}

@media (max-width: 480px) {
  /* "One Monthly Subscription" on one line at phone width, as the approved picture. */
  .hero-banner__title-line--second {
    font-size: 0.58em;
  }

  .hero-banner__title-line--third {
    font-size: 0.46em;
  }
}

/* The plain-link button: the words carry the underline, the arrow does not (user, 6 Oct 2026). */
.btn--link {
  text-decoration: none;
}

.btn--link .btn__label {
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}

/* A link from a follow-up email whose saved progress has expired: one quiet line on the first screen. */
.wizard__resume-note {
  margin-block-end: var(--space-16);
  padding: var(--space-12) var(--space-14);
  border-radius: var(--radius-12, 12px);
  background: var(--colour-sand, #f4f3f1);
  color: var(--colour-ink);
}

/* Screen 02 (7 Oct 2026): the one-line intro above the seven steps. */
.wizard-steps__lede {
  margin-block-end: var(--space-18);
}

/* ==========================================================================
   The plan screen of the popup (client screenshot, 7 Oct 2026)
   ========================================================================== */
.wizard__subtitle {
  margin-block-start: 4px;
  font-size: var(--text-14-5);
  line-height: 1.5;
  color: var(--ink-58);
}

.wizard__subtitle[hidden] {
  display: none;
}

/* Colours sampled from the client's picture (7 Oct 2026): dark indigo base, a bright violet glow in the
   top-right corner that fades across the top half, softer lilac at the two bottom corners. */
.wizard-plan {
  position: relative;
  overflow: hidden;
  padding: var(--space-24) var(--space-26) var(--space-26);
  border-radius: var(--radius-22);
  background-color: #1a1236;
  background-image:
    radial-gradient(90% 120% at 100% 0%, #a47ef8 0%, #8560e8 18%, rgba(66, 42, 138, 0.88) 38%, rgba(46, 29, 97, 0.62) 58%, rgba(26, 18, 54, 0) 82%),
    radial-gradient(60% 50% at 0% 100%, rgba(62, 40, 132, 0.85) 0%, rgba(26, 18, 54, 0) 70%),
    radial-gradient(60% 50% at 100% 100%, rgba(62, 40, 132, 0.85) 0%, rgba(26, 18, 54, 0) 70%),
    linear-gradient(180deg, #171031 0%, #1d133e 100%);
  color: var(--colour-white);
}

.wizard-plan__pill {
  display: inline-block;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  background: #e6e1f7;
  color: #2b1f63;
  font-family: var(--font-mono);
  font-size: var(--text-11);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
}

.wizard-plan__free {
  margin-block-start: var(--space-14);
  line-height: 1;
}

.wizard-plan__figure {
  font-size: 48px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.04em;
}

.wizard-plan__for {
  font-size: var(--text-21);
  font-weight: var(--weight-semibold);
  color: #cfc7f3;
}

.wizard-plan__then {
  margin-block-start: var(--space-10);
  font-size: 19px;
  color: #cfc7f3;
}

.wizard-plan__amount {
  font-size: 27px;
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  color: var(--colour-white);
}

.wizard-plan__note {
  margin-block-start: var(--space-16);
  padding-block-start: var(--space-14);
  border-block-start: 1px solid rgba(255, 255, 255, 0.16);
  font-size: var(--text-13-5);
  line-height: 1.55;
  color: #cfc7f3;
}

.wizard-plan__heading {
  margin-block-start: var(--space-22);
  font-size: var(--text-16);
  font-weight: var(--weight-bold);
  letter-spacing: -0.02em;
  color: var(--colour-ink);
}

.wizard-plan__points {
  margin-block-start: var(--space-12);
}

/* The ticks of this screen as in the client's picture: a lavender circle with a plain dark tick. */
.wizard-plan__points .wizard-offer__mark {
  background: #efe9fc;
  color: #1d1d1f;
  font-size: 14px;
  font-weight: var(--weight-regular, 400);
}

@media (max-width: 480px) {
  .wizard-plan__figure {
    font-size: 44px;
  }

  .wizard-plan__amount {
    font-size: 25px;
  }

  .wizard-plan__then {
    font-size: 18px;
  }
}

.wizard-plan__costs {
  margin-block-start: var(--space-18);
}

.wizard-plan__terms {
  margin-block-start: var(--space-18);
}

.wizard-plan__cta {
  display: block;
  width: 100%;
  margin-block-start: var(--space-18);
  padding: var(--space-15) var(--space-26);
  border-radius: var(--radius-pill);
  background: var(--colour-ink);
  color: var(--colour-white);
  font-size: var(--text-15-5);
  font-weight: var(--weight-bold);
  text-align: center;
  transition: transform 0.25s var(--ease-out), box-shadow 0.25s;
}

.wizard-plan__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 34px rgba(11, 11, 12, 0.22);
}

.wizard-plan__small {
  margin-block-start: var(--space-10);
  font-size: var(--text-12-5, 12.5px);
  text-align: center;
  color: var(--ink-58);
}

/* ==========================================================================
   The sticky strip with the three routes (client request 3, 7 Oct 2026)
   ========================================================================== */
.sticky-cta {
  transform: translateY(110%);
  visibility: hidden;
  transition: transform 0.35s var(--ease-out), visibility 0s linear 0.35s;
}

.sticky-cta.is-on {
  transform: none;
  visibility: visible;
  transition: transform 0.35s var(--ease-out), visibility 0s;
}

.sticky-cta__inner {
  max-width: none;
}

.sticky-cta__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-12) var(--space-14);
  width: 100%;
}

.sticky-cta__button {
  width: auto;
  --btn-pad-y: var(--space-14);
  --btn-size: var(--text-16);
}

/* 27 Oct 2026: the outlined button of the strip is the trial button now (the assessment is solid and first). */
.sticky-cta__button.btn--ghost {
  border-color: var(--paper-60);
}

.sticky-cta__button--pack {
  --btn-pad-y: var(--space-8);
  min-height: 0;
}

/* The strip no longer covers the hero's own button, so the hero keeps its ordinary bottom padding. */
.has-sticky-cta .hero-banner--landing {
  --hero-pad-bottom: clamp(60px, 7.5vw, 104px);
}

/* Phones: the three routes stacked, as in the hero, in a compact strip. */
@media (max-width: 640px) {
  .sticky-cta {
    padding-block: var(--space-10) var(--space-12);
  }

  .sticky-cta__row {
    flex-direction: column;
    gap: var(--space-8);
  }

  .sticky-cta__button {
    --btn-pad-y: var(--space-10);
    --btn-size: var(--text-15);
    width: 100%;
    max-width: 360px;
    min-height: 44px;
  }

  .sticky-cta__button--pack {
    --btn-pad-y: var(--space-4);
    width: auto;
    min-height: 32px;
  }

  .sticky-cta__note {
    margin-block-start: 0;
  }

  body.has-sticky-cta {
    padding-block-end: 196px;
  }
}

/* ==========================================================================
   "You’re Almost There" — the free trial's summary before the card form (client screenshot, 8 Oct 2026)
   ========================================================================== */
.wizard-plan__due {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-12);
  margin-block-start: var(--space-14);
}

.wizard-plan__due-label {
  font-size: var(--text-17);
  color: #cfc7f3;
}

.wizard-plan__figure--due {
  font-size: 40px;
}

.wizard-plan__then--rule {
  margin-block-start: var(--space-14);
  padding-block-start: var(--space-14);
  border-block-start: 1px solid rgba(255, 255, 255, 0.16);
  font-size: var(--text-19);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  color: var(--colour-white);
}

.wizard-plan__note--plain {
  margin-block-start: var(--space-8);
  padding-block-start: 0;
  border-block-start: 0;
}

.wizard-why {
  display: grid;
  gap: var(--space-18);
  margin-block-start: var(--space-22);
}

.wizard-why__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-14);
}

.wizard-why__icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-circle);
  background: #f0e7fd; /* the reference picture: pale lavender circles (8 Oct 2026) */
  color: var(--colour-ink);
}

.wizard-why__icon svg {
  width: 22px;
  height: 22px;
}

.wizard-why__title {
  margin: 0 0 4px;
  font-size: var(--text-16);
  font-weight: var(--weight-bold);
  letter-spacing: -0.01em;
  color: var(--colour-ink);
}

.wizard-why__text {
  margin: 0;
  font-size: var(--text-14);
  line-height: 1.5;
  color: var(--ink-60);
}

.wizard-pay__small {
  margin-block-start: var(--space-18);
  padding-block-start: var(--space-14);
  border-block-start: 1px solid var(--ink-08); /* the reference picture: a rule above this line too (8 Oct 2026) */
  font-size: var(--text-13);
  line-height: 1.5;
  color: var(--ink-55);
}

.wizard-pay__nothing {
  margin-block-start: var(--space-16);
  padding-block-start: var(--space-14);
  border-block-start: 1px solid var(--ink-08);
  font-size: var(--text-15-5);
  font-weight: var(--weight-bold);
  color: var(--colour-ink);
}

@media (max-width: 480px) {
  .wizard-plan__figure--due {
    font-size: 36px;
  }
}

/* The "You’re Almost There" footer on phones (reference picture, 8 Oct 2026): Back and the Continue button side by side,
   the note centred underneath. The plan screen uses the same footer since its button moved into it (client, 8 Oct 2026).
   Elsewhere the phone footer keeps its usual layout. */
@media (max-width: 640px) {
  .wizard--almost .wizard__foot {
    gap: var(--space-8) var(--space-8);
  }

  .wizard--almost .wizard__note {
    order: 1;
    flex: 1 1 100%;
    margin-block-start: 2px;
    text-align: center;
    font-size: 12px;
  }

  .wizard--almost .wizard__back {
    flex: none;
    padding: var(--space-12) var(--space-12);
    font-size: 14px;
  }

  .wizard--almost .wizard__next {
    flex: 1 1 0;
    min-width: 0;
    margin-inline-start: 0;
    padding: var(--space-12) 6px;
    font-size: 13px;
    line-height: 1.25;
    text-align: center;
    letter-spacing: -0.01em;
  }

  /* The row titles fit one line on a phone, as in the picture. */
  .wizard-why__title {
    font-size: 15px;
  }

  @media (max-width: 360px) {
    .wizard--almost .wizard__next {
      font-size: 12px;
    }
  }
}

/* --- 9 Oct 2026: the "What is included" section (client picture, 8 Oct 2026) -------------------------------
   The family pages, between "Choose how to start" and "How it works": a small line, the heading and the
   standfirst; one highlighted card with a lilac border and the padlock; then the numbered cards. Phones: one
   column, the heading centred as drawn. Tablets: the cards two by two. Desktop: heading left with the
   standfirst beside it (as the section above it), the highlighted card in one row with its bold line on the
   right, the four cards in one row. The icon tiles use the light lilac of the plan screen (#efe9fc). */
.what-included {
  --wi-lilac: #efe9fc;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  /* Top and sides only: the sand band (.tone-sand, declared earlier) owns the bottom padding. */
  padding-block-start: var(--section-gap);
  padding-inline: var(--gutter);
}

/* A white (untinted) copy right before the dark How-it-works band keeps its own breathing room, as the start cards do. */
.what-included:not(.tone-sand):has(+ .trial-scrub--flush) {
  padding-block-end: var(--section-gap);
}

.what-included__head {
  justify-content: center;
  text-align: center;
}

.what-included__head .section-head__title {
  font-size: clamp(28px, 7.7vw, 36px);
}

.what-included__head .section-head__lede {
  max-width: 380px;
  margin-inline: auto;
}

.what-included__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-11-5);
  font-weight: var(--weight-medium);
  letter-spacing: 0.14em;
  color: var(--ink-50);
}

/* The highlighted card, as drawn: a thick violet bar on its left edge inside a thin violet border, the padlock tile,
   and the bold line across the foot of the card. (Picture re-checked at full size, 9 Oct 2026.) */
.what-included__callout {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-12) var(--space-14);
  align-items: start;
  margin-block-start: var(--space-28);
  padding: var(--space-18) var(--space-18) var(--space-16);
  border: 1px solid var(--colour-violet);
  border-inline-start: 4px solid var(--colour-violet);
  border-radius: var(--radius-12);
  background: var(--colour-white);
  color: var(--colour-ink);
}

.what-included__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-10);
  background: var(--wi-lilac);
  color: var(--colour-violet-deep);
}

.what-included__icon svg {
  width: 20px;
  height: 20px;
}

.what-included__callout-title {
  font-size: var(--text-16-5);
  font-weight: var(--weight-bold);
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.what-included__callout-body {
  margin-block-start: 4px;
  font-size: var(--text-14-5);
  line-height: 1.45;
  color: var(--ink-62);
}

.what-included__callout-note {
  grid-column: 1 / -1;
  margin: 0;
  padding-block-start: var(--space-12);
  border-block-start: 1px solid var(--ink-08);
  font-size: var(--text-13-5);
  font-weight: var(--weight-bold);
  line-height: 1.4;
  color: var(--colour-ink);
}

.what-included__grid {
  display: grid;
  gap: var(--space-12);
  margin: var(--space-12) 0 0;
  padding: 0;
  list-style: none;
}

/* The numbered cards, as drawn: light cards with a soft shadow rather than a drawn border, the icon tile on the left. */
.what-included__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-14);
  padding: var(--space-16) var(--space-18);
  border: 1px solid var(--ink-08);
  border-radius: var(--radius-12);
  background: var(--colour-white);
  color: var(--colour-ink);
  box-shadow: 0 2px 10px rgba(11, 11, 12, 0.04);
}

.what-included__item-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.what-included__index {
  font-family: var(--font-mono);
  font-size: var(--text-10-5);
  letter-spacing: 0.1em;
  color: var(--ink-50);
}

.what-included__item-title {
  font-size: var(--text-16);
  font-weight: var(--weight-bold);
  letter-spacing: -0.015em;
  line-height: 1.25;
}

.what-included__item-body {
  font-size: var(--text-14-5);
  line-height: 1.45;
  color: var(--ink-62);
}

@media (min-width: 640px) {
  .what-included__head {
    justify-content: space-between;
    text-align: left;
  }

  .what-included__head .section-head__title {
    font-size: var(--display-section);
  }

  .what-included__head .section-head__lede {
    max-width: 100%;
    margin-inline: 0;
  }

  .what-included__callout {
    margin-block-start: var(--space-36);
    padding: var(--space-20) var(--space-24) var(--space-18);
  }

  .what-included__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-14);
    margin-block-start: var(--space-14);
  }
}

@media (min-width: 1100px) {
  .what-included__callout {
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--space-20);
  }

  .what-included__callout-note {
    grid-column: auto;
    max-width: 320px;
    padding: 0 0 0 var(--space-24);
    border-block-start: 0;
    border-inline-start: 1px solid var(--ink-10);
  }

  .what-included__grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .what-included__item {
    flex-direction: column;
    gap: var(--space-16);
    height: 100%;
    padding: var(--space-22);
  }
}

/* --- 9 Oct 2026: the Trustpilot line in the hero (user's picture: the five stars sat 3 px below the words) ---
   Each item of the trust row is a flex row of its own, so the stars, the bold word and the text share one
   centre line instead of hanging off the text baseline. The gap stands in for the space character the flex
   row swallows, so the spacing stays as it was; the stars and the brand keep their own 6 px margins. */
.hero-banner__trust > a,
.hero-banner__trust > span:not(.hero-banner__trust-divider) {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 0.28em;
}

/* The landing heroes never wrap inside an item (rule above, "4.8 out of 5" stays whole). */
.hero-banner--landing .hero-banner__trust > a,
.hero-banner--landing .hero-banner__trust > span {
  flex-wrap: nowrap;
}

.hero-banner__stars {
  vertical-align: middle;
}

/* The "Excellent ★★★★★ on Trustpilot" item of the home and personal heroes is now a link to Trustpilot
   (client, 9 Oct 2026): it keeps its plain look — only the bold word is white, no underline, no arrow — and
   shows the underline in violet on hover, like the other review links. */
.hero-banner__trust-link:has(.hero-banner__stars) {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}

.hero-banner__trust-link:has(.hero-banner__stars):hover,
.hero-banner__trust-link:has(.hero-banner__stars):focus-visible {
  color: var(--colour-violet);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.hero-banner__trust-link:has(.hero-banner__stars) .hero-banner__trust-arrow {
  display: none;
}

/* --- 9 Oct 2026: the plan screen rewritten to the client's picture (HANDOVER §5ce) ---
   Under the purple card: the heading and its line, the five lavender-circle ticks (the 8 Oct style), two boxes with an
   icon tile (lilac: one monthly price; sand: costs outside), and the welcome-appointment line with a calendar in a
   lavender circle. The card has no pill above the figure any more. Wider popups put the two boxes side by side. */
.wizard-plan__free:first-child {
  margin-block-start: 0;
}

.wizard-plan__heading {
  font-size: var(--text-20);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.wizard-plan__lede {
  margin-block-start: var(--space-8);
  font-size: var(--text-14-5);
  line-height: 1.55;
  color: var(--ink-60);
}

.wizard-plan__points {
  margin-block-start: var(--space-16);
}

.wizard-plan__boxes {
  display: grid;
  gap: var(--space-10);
  margin-block-start: var(--space-18);
}

.wizard-plan__box {
  display: flex;
  align-items: flex-start;
  gap: var(--space-12);
  padding: var(--space-14) var(--space-16);
  border-radius: var(--radius-12);
  background: var(--colour-sand);
}

.wizard-plan__box--lilac {
  background: #efe9fc;
}

.wizard-plan__tile {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-10);
  background: var(--colour-white);
  color: var(--colour-ink);
}

.wizard-plan__tile svg {
  width: 18px;
  height: 18px;
}

/* The picture's sizes on phones (title 13.5 px, text 12.5 px: each title on one line); a little larger on wider popups. */
.wizard-plan__box-title {
  margin: 0 0 2px;
  font-size: var(--text-13-5);
  font-weight: var(--weight-bold);
  line-height: 1.35;
  color: var(--colour-ink);
}

.wizard-plan__box-text {
  margin: 0;
  font-size: var(--text-12-5);
  line-height: 1.5;
  color: var(--ink-60);
}

.wizard-plan__book {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  margin-block-start: var(--space-18);
}

.wizard-plan__book-icon {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-circle);
  background: #efe9fc;
  color: var(--colour-ink);
}

.wizard-plan__book-icon svg {
  width: 18px;
  height: 18px;
}

.wizard-plan__book-text {
  margin: 0;
  font-size: var(--text-12-5);
  line-height: 1.5;
  color: var(--ink-60);
}

@media (min-width: 600px) {
  .wizard-plan__boxes {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-12);
  }

  /* Side by side, each box becomes a small card: the tile above the words. */
  .wizard-plan__box {
    flex-direction: column;
    gap: var(--space-12);
    padding: var(--space-16) var(--space-18);
  }

  .wizard-plan__box-title {
    font-size: var(--text-14-5);
    text-wrap: balance;
  }

  .wizard-plan__box-text,
  .wizard-plan__book-text {
    font-size: var(--text-13);
  }
}

/* --- 12 Oct 2026: the free-case-assessment screen's ticks like the trial's (Peter, 8 Oct call): a lavender circle with
   a plain dark tick (the plan screen's style of 8 Oct) instead of the grey circle. --- */
.wizard-offer__mark {
  background: #efe9fc;
  color: #1d1d1f;
  font-size: 14px;
  font-weight: var(--weight-regular, 400);
}

/* --- 12 Oct 2026: the assessment price screen (client picture, 12 Oct 2026) — the trial's price shown before the
   calendar on the free-case-assessment route. The purple card's small label above the figure, and the closing
   "Would you like to book your assessment?" block with a rule above it. Everything else reuses the plan screen's
   styles (card, heading, ticks, the two boxes, the phone footer). --- */
.wizard-plan__kicker {
  margin: 0;
  font-family: var(--font-mono);
  font-size: var(--text-11);
  font-weight: var(--weight-bold);
  letter-spacing: var(--track-mono);
  text-transform: uppercase;
  color: #cfc7f3;
}

.wizard-plan__ask {
  margin-block-start: var(--space-18);
  padding-block-start: var(--space-18);
  border-block-start: 1px solid var(--ink-10);
}

.wizard-plan__ask-title {
  margin: 0;
  font-size: var(--text-20);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.wizard-plan__ask-text {
  margin: var(--space-8) 0 0;
  font-size: var(--text-14-5);
  line-height: 1.55;
  color: var(--ink-60);
}

/* --- 13 Oct 2026: the real Trustpilot reviews in the review sections (HANDOVER §5cj) ---
   The cards keep their look; a review under five stars shows its missing stars as grey squares. */
.review__star--off {
  background: var(--ink-16);
}

.review--ink .review__star--off {
  background: var(--paper-16);
}

.review__date {
  white-space: nowrap;
}

/* --- 14 Oct 2026: the fixed-fee flows (HANDOVER §5cl) — "case assessment first" shows one box, full width ---
   The plan screen's box grid is two columns on a wide popup; a lone box keeps the whole row. */
.wizard-plan__boxes.wizard-plan__boxes--one {
  grid-template-columns: 1fr;
}

/* The order's name under Peter's stage line on the purple card ("Stage 2 · Fixed fee / Occupation order") — white,
   semibold, 21 px with 16 px above, as on the client's page (14 Oct 2026). On the trial card the "£0 for 7 days" line
   follows it; on the assessment card the fee does. */
.wizard-plan__name {
  margin-block-start: var(--space-16);
  font-size: 21px;
  font-weight: var(--weight-semibold);
  line-height: 1.25;
  color: var(--colour-white);
}

/* --- 14 Oct 2026: both buttons on the first phone screen (HANDOVER §5cm) ---
   The client: "people are stalling at this part where the free case assessment button isn't visible on the landing
   page" → "get rid of the 7 day trial bit right at the top, put trust pilot there and then move the call to action
   buttons up" → "too scrunched… keep the buttons same size… doesn't need the 'read our reviews' link". The reviews line
   sits at the top of the landing hero (hero-banner.php prints it there, without the "Read our reviews" item, instead of the
   pill, and not above the buttons); on phones the buttons keep their normal size, the headline is a little
   smaller (it keeps "Expert Divorce Lawyers" on two lines) with a little more air between its lines, the rows sit a little
   closer and the hero ends 40 px under the info-pack link — so "Start a 7 Day Free Trial", "Book a Free Case Assessment"
   and the info-pack link all show before any scroll on every common phone; narrow phones (≤ 375 px) sit closer still, and
   very short screens (the 4.7" iPhone SE, old 360×640 Androids) get a third, tighter rule. Nothing else removed; tablet and
   desktop keep the design. */
.hero-banner--landing .hero-banner__trust--top {
  margin-block-start: 0;
}

.hero-banner--landing .hero-banner__trust--top .hero-banner__trust-link {
  color: inherit;
  font-weight: inherit;
  text-decoration: none;
}

.hero-banner--landing .hero-banner__trust--top .hero-banner__trust-link:hover,
.hero-banner--landing .hero-banner__trust--top .hero-banner__trust-link:focus-visible {
  color: var(--colour-white);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 480px) {
  .hero-banner--landing,
  .has-sticky-cta .hero-banner--landing {
    --hero-pad-top: 20px;
    --hero-pad-bottom: 40px;
  }

  .hero-banner--landing .hero-banner__title--tiered {
    --hero-title-size: clamp(36px, 11.4vw, 46px);
  }

  .hero-banner--landing .hero-banner__title-line--second {
    margin-block-start: 0.42em;
  }

  .hero-banner--landing .hero-banner__title-line--third {
    margin-block-start: 0.5em;
  }

  .hero-banner--landing .hero-banner__points {
    margin-block-start: var(--space-20);
  }

  .hero-banner--landing .hero-banner__points .tick-list {
    gap: var(--space-8);
    line-height: 1.4;
  }

  .hero-banner--landing .hero-banner__actions {
    margin-block-start: var(--space-22);
  }
}

@media (max-width: 375px) {
  .hero-banner--landing {
    --hero-pad-top: 14px;
    --hero-title-gap: var(--space-14);
  }

  .hero-banner--landing .hero-banner__points {
    margin-block-start: var(--space-14);
  }

  .hero-banner--landing .hero-banner__points .tick-list {
    gap: var(--space-6);
    font-size: var(--text-15-5);
    line-height: 1.3;
  }

  .hero-banner--landing .hero-banner__actions {
    margin-block-start: var(--space-16);
  }
}

@media (max-width: 480px) and (max-height: 660px) {
  .hero-banner--landing {
    --hero-pad-top: 10px;
    --hero-title-gap: var(--space-10);
  }

  .hero-banner--landing .hero-banner__title--tiered {
    --hero-title-size: clamp(32px, 9vw, 40px);
  }

  .hero-banner--landing .hero-banner__points {
    margin-block-start: var(--space-12);
  }

  .hero-banner--landing .hero-banner__points .tick-list {
    gap: var(--space-4);
    font-size: var(--text-15);
    line-height: 1.2;
  }

  .hero-banner--landing .hero-banner__actions {
    gap: var(--space-6);
    margin-block-start: var(--space-10);
  }

  .hero-banner--landing .hero-banner__actions .btn {
    --btn-pad-y: var(--space-12);
  }
}


@media screen and (max-width: 600px) {
  #CybotCookiebotDialog.CybotCookiebotDialogActive {
    top: auto !important;
    bottom: 8px !important;
    transform: translateX(-50%) !important;
    max-height: 65vh !important;
  }
}

/* --- 27 Oct 2026: the free case assessment first, smaller phone buttons (HANDOVER §5cz) ---
   The client: "Book a Free Case Assessment should be at the top and then Start a 7 Day Free Trial — the assessment button
   highlighted"; "on mobile the buttons look too big". hero-banner.php and sticky-cta.php print the assessment button first
   and solid and the trial button second and outlined (the outline = the existing .btn--ghost rules). Here: on phones
   (≤ 480 px) the landing hero's buttons are a step smaller — 16 px text and 14 px padding, about 48 px tall instead of 58 —
   and very short screens keep their 12 px padding. Tablet and desktop keep the design. */
@media (max-width: 480px) {
  .hero-banner--landing .hero-banner__actions .btn {
    --btn-pad-y: var(--space-14);
    --btn-size: var(--text-16);
  }
}

/* Narrow phones (≤ 375 px): less side padding so "Book a Free Case Assessment →" stays on one line (at 360 px it wrapped
   and made that button 64 px tall). */
@media (max-width: 375px) {
  .hero-banner--landing .hero-banner__actions .btn {
    --btn-pad-x: var(--space-20);
  }
}

@media (max-width: 480px) and (max-height: 660px) {
  .hero-banner--landing .hero-banner__actions .btn {
    --btn-pad-y: var(--space-12);
  }
}

/* ==========================================================================
   PPC location heroes (24 Oct 2026)
   The Family and Divorce Lawyers landing heroes: "Serving <town>" under the
   main line (town from the Convello PPC Locations plugin; the main page keeps
   the line's space empty), and the savings pill beside "No Hidden Costs".
   Only drawn when the hero carries .hero-banner--geo.
   ========================================================================== */
.hero-banner__title-line--geo {
  margin-block-start: 0.16em;
  font-size: 0.74em;
  line-height: 1.04;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.hero-geo__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-block-start: var(--space-10);
}

/* A little larger than the theme's third title line, as in the approved picture. */
.hero-geo__costs {
  margin: 0;
  font-size: calc(var(--hero-title-size, 46px) * 0.52);
  font-weight: var(--weight-black);
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--colour-white);
}

.hero-geo__pill {
  display: inline-grid;
  margin: 0;
  padding: 7px 16px 8px;
  border-radius: 10px;
  background: oklch(0.62 0.19 288);
  box-shadow: 0 8px 24px oklch(0.5 0.2 288 / 0.35);
  color: var(--colour-white);
  font-size: 15px;
  line-height: 1.25;
  transform-origin: left center;
  animation: hero-geo-pulse 1.32s ease-in-out 1s infinite; /* stopped by the reduced-motion rule above */
}

.hero-geo__pill strong {
  font-size: 17px;
  font-weight: var(--weight-bold);
}

/* Scale only, so the pulse never repaints. */
@keyframes hero-geo-pulse {
  0%, 100% { scale: 1; }
  50%      { scale: 1.025; }
}

/* Phones: "No Hidden Costs" at the third line's own size and a smaller pill, so the two share a line. */
@media (max-width: 599px) {
  .hero-geo__row {
    gap: 8px 12px;
  }

  .hero-geo__costs {
    font-size: calc(var(--hero-title-size, 46px) * 0.46);
  }

  .hero-geo__pill {
    padding: 5px 11px 6px;
    border-radius: 9px;
    font-size: 12.5px;
  }

  .hero-geo__pill strong {
    font-size: 14px;
  }
}

/* Desktop: the hero fills the screen under the header with its content centred, so the space above
   and below is equal and everything fits on one screen down to 1366×657. */
@media (min-width: 1100px) {
  .hero-banner.hero-banner--geo,
  .has-sticky-cta .hero-banner.hero-banner--geo {
    --hero-pad-top: clamp(24px, 4vh, 56px);
    --hero-pad-bottom: clamp(24px, 4vh, 56px);
    --hero-title-size: clamp(50px, min(5.2vw, 8.6vh), 86px);
    display: flex;
    align-items: center;
    min-height: calc(100vh - 70px);
    min-height: calc(100svh - 70px);
  }

  .hero-banner--geo .hero-banner__inner {
    width: 100%;
  }

  .hero-banner--geo .hero-banner__title {
    margin-block-start: clamp(12px, 2vh, 22px);
  }

  .hero-banner--geo .hero-banner__points {
    margin-block-start: clamp(14px, 2.4vh, 26px);
  }

  .hero-banner--geo .hero-banner__points .tick-list {
    gap: clamp(4px, 0.9vh, 10px);
    font-size: clamp(15px, 2.1vh, 17px);
  }

  .hero-banner--geo .hero-banner__actions {
    gap: clamp(8px, 1.4vh, 12px);
    margin-block-start: clamp(16px, 2.6vh, 28px);
  }

  .hero-banner--geo .hero-banner__actions .btn:not(.btn--link) {
    --btn-pad-y: clamp(11px, 1.8vh, 18px);
  }
}

/* Short laptop screens (1366×657, 1280×720): a slightly smaller headline and a tighter link row. */
@media (min-width: 1100px) and (max-height: 740px) {
  .hero-banner.hero-banner--geo,
  .has-sticky-cta .hero-banner.hero-banner--geo {
    --hero-pad-top: 16px;
    --hero-pad-bottom: 16px;
    --hero-title-size: clamp(44px, 8vh, 60px);
  }

  .hero-banner--geo .hero-banner__actions .btn--link {
    --btn-pad-y: 2px;
    min-height: 0;
  }
}

/* "One Monthly Subscription" (the second headline line) in the brand violet on every hero that has it (v1.2.0, 25 Oct 2026). */
.hero-banner__title-line--second {
  color: var(--colour-violet);
}

/* --- 28 Oct 2026: "Why Choose Convello" + the compact sticky bar (client brief 27 Oct 2026, HANDOVER §5dd) ---
   (a) The new section under the hero of the two PPC pages (template-parts/sections/why-choose.php, ACF layout why_choose):
       the heading with its purple word, five benefits (lilac icon tile, bold title, a line of text, thin dividers) and the
       lilac free-trial panel — the client's mockup on phones (one column: heading, benefits, panel); from 900 px the heading
       and the panel stand on the left and the five benefits on the right. No button in it.
   (b) The sticky strip: one compact row of two buttons (assessment solid, trial outlined), side by side on phones too, with
       two-line labels and 44 px+ touch targets; about 70 px tall on phones plus the device's safe-area inset; the page's
       bottom clearance matches. Replaces the stacked three-route strip of 7 Oct (its rules above stay; these come later). */
.why-choose {
  --wc-lilac: #efe9fc;
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding: var(--section-gap) var(--gutter) 0;
}

/* A white copy right before a sand band keeps its own bottom breathing room (the sand band owns its own). */
.why-choose:not(.tone-sand):has(+ .tone-sand),
.why-choose:not(.tone-sand):last-of-type,
.what-included:not(.tone-sand):has(+ .tone-sand) {
  padding-block-end: var(--section-gap);
}

.why-choose__inner {
  display: grid;
  gap: var(--space-28);
}

.why-choose__title {
  font-size: clamp(36px, 10vw, 46px);
  font-weight: var(--weight-black);
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.why-choose__title-main,
.why-choose__title-accent {
  display: block;
}

.why-choose__title-accent {
  color: var(--colour-violet-bright);
}

.why-choose__list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.why-choose__item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-14);
  padding: var(--space-16) 0;
  border-block-start: 1px solid var(--ink-12);
}

.why-choose__item:first-child {
  padding-block-start: 0;
  border-block-start: 0;
}

.why-choose__icon {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: var(--radius-12);
  background: var(--wc-lilac);
  color: var(--colour-violet-bright);
}

.why-choose__icon svg {
  width: 28px;
  height: 28px;
}

.why-choose__item-text {
  flex: 1;
  min-width: 0;
}

.why-choose__item-title {
  font-size: var(--text-17);
  font-weight: var(--weight-bold);
  letter-spacing: -0.015em;
  line-height: 1.25;
  text-wrap: balance;
}

.why-choose__item-body {
  margin-block-start: 4px;
  font-size: var(--text-15);
  line-height: 1.5;
  color: var(--ink-62);
}

.why-choose__panel {
  padding: var(--space-18) var(--space-20);
  border-radius: var(--radius-14);
  background: var(--wc-lilac);
  color: var(--colour-ink);
}

.why-choose__panel-title {
  font-size: clamp(22px, 6vw, 26px);
  font-weight: var(--weight-black);
  letter-spacing: -0.03em;
  line-height: 1.1;
}

.why-choose__panel-accent {
  color: var(--colour-violet-bright);
}

.why-choose__panel-text {
  margin-block-start: 6px;
  font-size: var(--text-15);
  line-height: 1.5;
  color: var(--ink-62);
}

.why-choose__panel--desktop {
  display: none;
}

@media (min-width: 900px) {
  .why-choose__inner {
    grid-template-columns: minmax(280px, 5fr) 7fr;
    gap: var(--space-40) clamp(40px, 6vw, 96px);
    align-items: start;
  }

  .why-choose__side {
    position: sticky;
    top: 96px;
    display: grid;
    gap: var(--space-28);
  }

  .why-choose__title {
    font-size: var(--display-section);
  }

  .why-choose__panel--desktop {
    display: block;
  }

  .why-choose__panel--mobile {
    display: none;
  }

  .why-choose__item {
    gap: var(--space-18);
    padding: var(--space-20) 0;
  }
}

/* (b) the compact strip */
.sticky-cta {
  padding: var(--space-8) var(--gutter) calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
}

.sticky-cta__row {
  flex-wrap: nowrap;
  gap: var(--space-10);
  max-width: 560px;
  margin-inline: auto;
}

.sticky-cta__button {
  flex: 1 1 0;
  width: auto;
  min-height: 44px;
  --btn-pad-y: var(--space-10);
  --btn-pad-x: var(--space-14);
  --btn-size: var(--text-15);
  align-items: center;
  line-height: 1.15;
  text-align: center;
}

body.has-sticky-cta {
  padding-block-end: 84px;
}

@media (max-width: 640px) {
  .sticky-cta {
    padding-block: var(--space-8) calc(var(--space-8) + env(safe-area-inset-bottom, 0px));
  }

  .sticky-cta__row {
    flex-direction: row;
    gap: var(--space-8);
  }

  .sticky-cta__button {
    max-width: none;
    min-height: 48px;
    --btn-pad-y: var(--space-10);
    --btn-pad-x: var(--space-10);
    --btn-size: var(--text-14);
  }

  /* The mockup's two-line labels carry no arrow. */
  .sticky-cta__button .btn__arrow {
    display: none;
  }

  body.has-sticky-cta {
    padding-block-end: 84px;
  }
}

/* --- 2 Nov 2026: the Business paid-traffic landing page in the Business colours (HANDOVER §5df) ---------------------
   The client (Peter, 2 Nov 2026): the copy of /construction-lawyers/ stays exactly the same; the colours follow the Business
   section of the site (the teal / green glow of /business/ and /business/construction/) instead of the Personal violet.
   body.palette-business is printed by convello_body_class() (inc/setup.php) on a page that has the sticky strip AND carries
   the business popup (inc/b2b-wizard.php's page list) — today only /construction-lawyers/. Every rule here only changes a
   colour: nothing moves, nothing is hidden, the family pages are untouched. */
.palette-business {
  --biz-accent: var(--colour-teal);                 /* on the dark hero: "One Monthly Subscription", link hovers */
  --biz-accent-deep: oklch(0.47 0.11 190);          /* text and icons on white (the purple word, the icon tiles) */
  --biz-tint: oklch(0.955 0.035 180);               /* the light tiles and the trial panel (was the lilac #efe9fc) */
  --biz-line: oklch(0.62 0.13 175);                 /* the highlighted card's border */
}

/* Page-wide accents that were violet: text selection, keyboard focus in the light sections, link hover. */
.palette-business ::selection {
  background: var(--biz-accent-deep);
  color: var(--colour-white);
}

.palette-business :where(.why-choose, .help-list, .what-included, .start-cards, .faq, .review-wall) :focus-visible {
  outline-color: var(--biz-accent-deep);
}

.palette-business a:hover {
  color: var(--biz-accent-deep);
}

/* The hero: the same two glow blobs as the Business hero (aurora--business), the second headline line in teal,
   the review-line and plain-link hovers in teal. */
.palette-business .hero-banner--landing .aurora {
  opacity: 0.7;
}

.palette-business .hero-banner--landing .aurora__blob--a {
  background: oklch(0.6 0.14 195);
}

.palette-business .hero-banner--landing .aurora__blob--b {
  background: oklch(0.62 0.13 165);
}

.palette-business .hero-banner__title-line--second {
  color: var(--biz-accent);
}

.palette-business .hero-banner__trust-link:hover,
.palette-business .hero-banner__trust-link:focus-visible,
.palette-business .hero-banner__trust-link:has(.hero-banner__stars):hover,
.palette-business .hero-banner__trust-link:has(.hero-banner__stars):focus-visible,
.palette-business .btn--link:hover,
.palette-business .btn--link:focus-visible {
  color: var(--biz-accent);
}

/* Why Choose Convello: the light tiles and the trial panel in the mint tint, the purple word and the icons in deep teal. */
.palette-business .why-choose {
  --wc-lilac: var(--biz-tint);
}

.palette-business .why-choose__title-accent,
.palette-business .why-choose__icon,
.palette-business .why-choose__panel-accent {
  color: var(--biz-accent-deep);
}

/* What's included: the highlighted card's border and the icon tiles. */
.palette-business .what-included {
  --wi-lilac: var(--biz-tint);
}

.palette-business .what-included__callout {
  border-color: var(--biz-line);
  border-inline-start-color: var(--biz-line);
}

.palette-business .what-included__icon {
  color: var(--biz-accent-deep);
}

/* Choose how to start and What we help with: the icons and the keyboard-focus colour. */
.palette-business .start-card__icon {
  color: var(--biz-accent-deep);
}

.palette-business .help-list__item:focus-visible {
  color: var(--biz-accent-deep);
}