/*
  Websites by Watson: brand tokens
  Version 1.0, 30 September 2026

  Load this file first, before the site's own stylesheet.
  It holds the font, colours, type scale, spacing and radii as CSS custom
  properties. It does not style any elements on its own.
  Component starters live in brand-components.css (optional).
*/

@font-face {
  font-family: "Manrope";
  src: url("/brand/fonts/Manrope-Variable-latin.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- Colour: the palette ---------- */
  --wbw-evergreen: #0F4A40;   /* primary: logo, buttons, headings on light, key bands */
  --wbw-forest: #0A332C;      /* darker evergreen: hover state, footer */
  --wbw-ink: #13241F;         /* main text */
  --wbw-slate: #4F5E59;       /* secondary text, captions */
  --wbw-sage: #A9BFB2;        /* soft accent: logo cursor, taglines and ticks on evergreen. Never text on white */
  --wbw-sage-pale: #E4EBE7;   /* tint: tags, soft panels, icon backgrounds */
  --wbw-cloud: #F5F8F6;       /* page background */
  --wbw-white: #FFFFFF;       /* cards and surfaces */
  --wbw-line: #DCE6E1;        /* borders and dividers */
  --wbw-error: #8A4B1F;       /* form errors only: dark burnt orange, never red. Always with an icon and message */

  /* ---------- Colour: roles (use these in components) ---------- */
  --color-bg: var(--wbw-cloud);
  --color-surface: var(--wbw-white);
  --color-text: var(--wbw-ink);
  --color-text-muted: var(--wbw-slate);
  --color-heading: var(--wbw-ink);
  --color-primary: var(--wbw-evergreen);
  --color-primary-hover: var(--wbw-forest);
  --color-on-primary: var(--wbw-white);
  --color-accent-on-dark: var(--wbw-sage);
  --color-tint: var(--wbw-sage-pale);
  --color-border: var(--wbw-line);
  --color-focus: var(--wbw-evergreen);
  --color-focus-on-dark: var(--wbw-white);
  --color-band: var(--wbw-evergreen);   /* dark bands: trust strip, pricing card, final call to action */
  --color-footer: var(--wbw-forest);
  --color-error: var(--wbw-error);

  /* ---------- Type ---------- */
  --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  --fs-display: clamp(2.5rem, 1.6rem + 3.2vw, 4.25rem);   /* 40px to 68px: homepage hero only */
  --fs-h1: clamp(2.125rem, 1.5rem + 2.2vw, 3rem);         /* 34px to 48px */
  --fs-h2: clamp(1.625rem, 1.3rem + 1.2vw, 2rem);         /* 26px to 32px */
  --fs-h3: 1.375rem;                                       /* 22px */
  --fs-body-lg: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* 17px to 19px: ledes */
  --fs-body: 1rem;                                         /* 16px */
  --fs-small: 0.875rem;                                    /* 14px */
  --fs-label: 0.8125rem;                                   /* 13px, uppercase eyebrow */

  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  --lh-display: 1.04;
  --lh-heading: 1.08;
  --lh-subheading: 1.2;
  --lh-body: 1.6;

  --ls-display: -0.035em;
  --ls-h1: -0.03em;
  --ls-h2: -0.02em;
  --ls-h3: -0.01em;
  --ls-label: 0.12em;

  /* ---------- Spacing (matches the Website Build Playbook, section 6) ---------- */
  --sec-pad: clamp(36px, 3.6vw, 56px);   /* the ONE section spacing unit */
  --space-1: 8px;
  --space-2: 14px;
  --space-3: 20px;
  --space-4: 28px;
  --space-5: 40px;
  --gap-cards: 20px;
  --gap-panels: 16px;
  --hero-strip-gap: 28px;
  --content-max: 1280px;
  --side-pad: clamp(20px, 5.5vw, 80px);

  /* ---------- Shape ---------- */
  --radius-sm: 10px;     /* small tiles, inputs on phones */
  --radius-md: 14px;     /* buttons, inputs */
  --radius-lg: 20px;     /* cards */
  --radius-xl: 24px;     /* photos, large panels, pricing card */
  --radius-pill: 999px;  /* tags */
  --border: 1px solid var(--color-border);
  --focus-ring: 0 0 0 3px var(--wbw-white), 0 0 0 5px var(--color-focus);

  /* ---------- Icons ---------- */
  --icon-stroke: 2px;    /* line icons, rounded caps and joins */
  --icon-tile: 52px;     /* icon on a pale sage rounded square */
}


/*
  Websites by Watson: site stylesheet
  Version 2.0, 1 October 2026 (the redesign)

  The brand tokens (brand/tokens/brand.css) are prepended to this file at
  build time. The palette, font, spacing unit and radii are the brand's; the
  overrides at the top push the type scale up and add the depth tokens
  (soft shadows, the dark glow) that the redesign uses on purpose.
  Section spacing comes from ONE variable, --sec-pad, in the section-rhythm
  block at the end. Never add spacing to an individual section.
*/

/* ---------- Site-level tokens: the redesign's additions ---------- */
:root {
  --fs-display: clamp(2.5rem, 1.2rem + 3.9vw, 4.5rem);      /* 40px to 72px */
  --fs-h1: clamp(2rem, 1.35rem + 2.3vw, 3.25rem);           /* 32px to 52px */
  --fs-h2: clamp(1.5rem, 1.25rem + 1vw, 2rem);
  --lh-display: 0.98;
  --ls-display: -0.04em;
  --soft-on-dark: #D7E3DC;                                   /* ledes and body on evergreen */
  --shadow-soft: 0 10px 30px -18px rgba(15, 74, 64, 0.35);
  --shadow-lift: 0 30px 60px -32px rgba(15, 74, 64, 0.45);
  --shadow-deep: 0 44px 80px -36px rgba(10, 51, 44, 0.55);
  --radius-2xl: 28px;
  --radius-band: 40px;
  --stage-glow: radial-gradient(120% 140% at 15% 0%, #1E6A5C 0%, var(--wbw-evergreen) 55%, var(--wbw-forest) 100%);
  --grid-lines: linear-gradient(rgba(255, 255, 255, 0.55) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.55) 1px, transparent 1px);
  --header-h: 64px;
}

/* ---------- Reset and base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 100px; }
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: var(--color-primary); text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px; }
a:hover { color: var(--color-primary-hover); }
button { font: inherit; color: inherit; }
:focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: 6px; }
.stage :focus-visible, .signup :focus-visible, .cta-band :focus-visible, .site-footer :focus-visible {
  box-shadow: 0 0 0 3px var(--wbw-evergreen), 0 0 0 5px var(--color-focus-on-dark);
}
.skip { position: absolute; left: 12px; top: -200px; z-index: 100; padding: 10px 16px; background: var(--wbw-white); color: var(--color-primary); border-radius: var(--radius-md); font-weight: var(--fw-bold); }
.skip:focus { top: 12px; }
[hidden] { display: none !important; }
::selection { background: var(--wbw-sage); color: var(--wbw-forest); }

/* ---------- Type ---------- */
.headline, h1, h2, h3 { color: var(--color-heading); text-wrap: balance; overflow-wrap: break-word; }
.display { font-size: var(--fs-display); font-weight: var(--fw-extrabold); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.h1 { font-size: var(--fs-h1); font-weight: var(--fw-extrabold); line-height: var(--lh-heading); letter-spacing: var(--ls-h1); }
.h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-subheading); letter-spacing: var(--ls-h2); }
.h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-subheading); letter-spacing: var(--ls-h3); }
.lede { font-size: var(--fs-body-lg); line-height: 1.55; color: var(--color-text-muted); max-width: 56ch; }
.small { font-size: var(--fs-small); line-height: 1.5; color: var(--color-text-muted); }
.micro { font-size: 13.5px; line-height: 1.5; color: var(--color-text-muted); max-width: none; }
p { max-width: 65ch; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 12px; font-weight: var(--fw-extrabold); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--color-primary); line-height: 1.2; white-space: nowrap;
}
.eyebrow::before { content: ""; width: 22px; height: 3px; border-radius: 2px; background: var(--wbw-sage); flex-shrink: 0; }
/* Headlines made of several sentences: one sentence per line (components.headline) */
.headline .line { display: block; }
.accent { color: var(--color-primary); }

/* Visible placeholder for anything promised but not yet supplied (a pin) */
.pin {
  display: inline; background: var(--color-tint); color: var(--color-primary);
  border: 1px dashed var(--wbw-sage); border-radius: 8px; padding: 1px 8px; font-weight: var(--fw-semibold);
}
.stage .pin, .signup .pin, .cta-band .pin { background: rgba(255, 255, 255, 0.12); color: var(--wbw-white); }

/* ---------- Layout ---------- */
.wrap { width: 100%; max-width: calc(var(--content-max) + 2 * var(--side-pad)); margin-inline: auto; padding-inline: var(--side-pad); }
.wrap.narrow > * { max-width: 860px; }
.wrap.narrow.centred > * { margin-inline: auto; }
.sec > .wrap, .band > .wrap, .panel > .wrap, .form-section > .wrap { display: flex; flex-direction: column; gap: var(--space-5); }
/* Internal scale (playbook 6.4): label to heading 14, heading to lede 20, lede to content 40, content to button 28 */
.sec-head { display: grid; gap: var(--space-2); justify-items: start; }
.sec-head .lede { margin-top: 6px; }
.sec-head.centred { text-align: center; justify-items: center; margin-inline: auto; max-width: 760px; width: 100%; }
.sec-head .h1 { max-width: 22ch; }
.sec-link { max-width: none; }
.arrow-link { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-bold); text-decoration: none; border-bottom: 1.5px solid var(--wbw-sage); padding-bottom: 2px; }
.arrow-link:hover { border-color: var(--color-primary); }
.arrow-link .icon { transition: transform 0.15s ease; }
.arrow-link:hover .icon { transform: translateX(3px); }

.band, .panel { margin-inline: var(--gap-panels); background: var(--color-surface); border-radius: var(--radius-band); }
.band + .band, .panel + .panel { margin-top: var(--gap-panels); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5) 64px; align-items: center; }
.split__text { display: grid; gap: var(--space-3); }
.split__media { min-width: 0; }
.split--pricing .split__media, .split--extras .split__media { max-width: 520px; width: 100%; justify-self: end; }

/* ---------- Header: the floating pill ---------- */
.site-header { position: sticky; top: 12px; z-index: 50; pointer-events: none; margin-top: 12px; }
.site-header__pill {
  pointer-events: auto; display: flex; align-items: center; gap: 12px; height: var(--header-h);
  background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px);
  border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 0 10px 0 20px; box-shadow: var(--shadow-soft);
}
.site-logo { display: inline-flex; flex-shrink: 0; }
.site-logo img { width: auto; height: 34px; }
.site-nav { margin-left: auto; display: flex; align-items: center; }
.site-nav ul { display: flex; gap: 2px; }
.site-nav ul a { display: inline-block; padding: 9px 12px; border-radius: var(--radius-pill); color: var(--color-text-muted); font-weight: var(--fw-semibold); font-size: 14.5px; text-decoration: none; white-space: nowrap; }
.site-nav ul a:hover, .site-nav ul a[aria-current="page"] { color: var(--color-text); background: var(--wbw-cloud); }
.site-nav__actions { display: none; }
.site-header__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.site-header__phone { display: inline-flex; align-items: center; gap: 8px; font-weight: var(--fw-bold); font-size: 14.5px; color: var(--color-text); text-decoration: none; padding: 9px 12px; border-radius: var(--radius-pill); white-space: nowrap; }
.site-header__phone:hover { background: var(--wbw-cloud); color: var(--color-text); }
.site-header__phone .icon { color: var(--color-primary); }
.site-header__cta.btn { min-height: 44px; padding: 10px 18px; font-size: 14.5px; }
.nav-toggle {
  display: none; width: 44px; height: 44px; align-items: center; justify-content: center;
  background: var(--wbw-cloud); border: 1px solid var(--color-border); border-radius: 50%; cursor: pointer; color: var(--color-text);
}
.nav-toggle .nav-toggle__close { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__open { display: none; }
.nav-toggle[aria-expanded="true"] .nav-toggle__close { display: block; }

/* ---------- Buttons: pills with a nudging arrow ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 50px; padding: 13px 24px;
  font-weight: var(--fw-bold); font-size: 15.5px; letter-spacing: -0.01em; line-height: 1.2;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  border: 1.5px solid transparent; border-radius: var(--radius-pill);
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.btn .arr { transition: transform 0.15s ease; flex-shrink: 0; }
.btn:hover .arr { transform: translateX(3px); }
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.btn--primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-on-primary); }
.btn--ghost { background: var(--wbw-white); color: var(--wbw-ink); border-color: var(--color-border); }
.btn--ghost:hover { border-color: var(--wbw-ink); color: var(--wbw-ink); }
.btn--on-dark { background: var(--wbw-white); color: var(--wbw-evergreen); border-color: var(--wbw-white); }
.btn--on-dark:hover { background: var(--wbw-sage-pale); border-color: var(--wbw-sage-pale); color: var(--wbw-evergreen); }
.btn--ghost-on-dark { background: transparent; color: var(--wbw-white); border-color: rgba(255, 255, 255, 0.45); }
.btn--ghost-on-dark:hover { border-color: var(--wbw-white); color: var(--wbw-white); }
.btn--lg { min-height: 56px; padding: 16px 28px; font-size: 17px; }
.btn--block { width: 100%; }
.btn--icon { padding-inline: 13px; }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px 14px; align-items: center; }
.cta-row.centred { justify-content: center; }
.linklike { background: none; border: 0; padding: 0; cursor: pointer; color: inherit; text-decoration: underline; text-underline-offset: 0.15em; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; }
.hero--home::before, .hero.has-media::before {
  content: ""; position: absolute; left: 50%; top: -120px; width: 1100px; max-width: 100%; height: 620px; transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(169, 191, 178, 0.32), rgba(169, 191, 178, 0)); pointer-events: none;
}
.hero > .wrap { position: relative; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: var(--space-5) 64px; align-items: center; }
.hero__single .hero__text { max-width: 820px; }
/* Hero text breathes more than a section head: label to headline 20, headline to lede 28, lede to buttons 32 */
.hero__text { display: grid; gap: var(--space-3); align-content: center; justify-items: start; }
.hero__text .lede { margin-top: 8px; }
.hero__text .cta-row { margin-top: 12px; }
.hero--home .hero__text, .hero.has-media .hero__text { max-width: 680px; }
.hero__text .display { max-width: 15ch; }
.hero__media { position: relative; min-width: 0; display: grid; justify-items: center; align-content: center; }
.hero__media > * { max-width: 100%; }
.hero__media .photo-stack { max-width: 420px; width: 100%; }
.hero__media .price-card { max-width: 480px; }
.hero__media .phone { position: relative; z-index: 1; }

/* Floating chips around the hero mock-up */
.chip-float {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255, 255, 255, 0.95); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border: 1px solid var(--color-border); border-radius: 14px; padding: 10px 14px 10px 10px;
  font-size: 13px; font-weight: var(--fw-extrabold); color: var(--color-text); box-shadow: var(--shadow-soft); white-space: nowrap;
  animation: bob 6s ease-in-out infinite;
}
.chip-float .icon { width: 24px; height: 24px; padding: 5px; border-radius: 50%; background: var(--wbw-sage-pale); color: var(--color-primary); flex-shrink: 0; }
.chip-float.f1 { left: 0; top: 16%; }
.chip-float.f2 { right: 0; top: 46%; animation-duration: 7s; }
.chip-float.f3 { left: 6%; bottom: 10%; animation-duration: 8s; }
.chip-row { display: none; }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
html.js .hero .chip-float { opacity: 0; animation: none; }
html.js .hero.in .chip-float { animation: chipin 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) forwards, bob 6s ease-in-out 1s infinite; }
html.js .hero.in .f1 { animation-delay: 0.35s, 1.15s; }
html.js .hero.in .f2 { animation-delay: 0.5s, 1.3s; animation-duration: 0.8s, 7s; }
html.js .hero.in .f3 { animation-delay: 0.65s, 1.45s; animation-duration: 0.8s, 8s; }
@keyframes chipin { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
.rise { animation: rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.rise.d1 { animation-delay: 0.1s; }
@keyframes rise { from { opacity: 0.001; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* The proof strip under the home hero */
.proof { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 28px; padding: 20px 0; border-block: 1px solid var(--color-border); }
.proof li { display: grid; grid-template-columns: 8px minmax(0, 1fr); column-gap: 12px; align-items: center; font-size: 14px; line-height: 1.35; }
.proof li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--wbw-sage); grid-row: 1 / span 2; }
.proof strong { font-weight: var(--fw-extrabold); text-transform: uppercase; letter-spacing: 0.1em; font-size: 12px; color: var(--color-primary); white-space: nowrap; grid-column: 2; }
.proof span { color: var(--color-text-muted); grid-column: 2; }

/* ---------- The dark stage ---------- */
.stage { position: relative; border-radius: var(--radius-band); color: var(--wbw-white); overflow: hidden; }
.stage__glow { position: absolute; inset: 0; background: var(--stage-glow); }
.stage__inner { position: relative; z-index: 1; padding: var(--sec-pad) clamp(24px, 5vw, 64px); display: flex; flex-direction: column; align-items: center; }
.stage__inner > * + * { margin-top: var(--space-5); }
.stage__inner > .cta-row { margin-top: var(--space-4); }
.stage .headline, .stage h2, .stage h3 { color: var(--wbw-white); }
.stage .lede { color: var(--soft-on-dark); }
.stage .eyebrow, .signup .eyebrow, .cta-band .eyebrow { color: var(--wbw-sage); }

/* The numbered journey */
.journey { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px 32px; width: 100%; }
.journey li { position: relative; display: grid; gap: 10px; align-content: start; }
.journey__n { width: 40px; height: 40px; border-radius: 50%; background: var(--wbw-sage); color: var(--wbw-forest); display: inline-flex; align-items: center; justify-content: center; font-weight: var(--fw-extrabold); font-size: 15px; position: relative; z-index: 1; }
.journey li::before { content: ""; position: absolute; left: 48px; right: -32px; top: 19px; height: 2px; background: rgba(255, 255, 255, 0.18); }
.journey li:last-child::before { display: none; }
.journey h3 { font-size: 1.25rem; margin-top: 6px; }
.journey p { color: var(--soft-on-dark); font-size: 15.5px; line-height: 1.55; }
.journey:not(.journey--dark) .journey__n { background: var(--color-primary); color: var(--wbw-white); }
.journey:not(.journey--dark) li::before { background: var(--color-border); }
.journey:not(.journey--dark) p { color: var(--color-text-muted); }

/* ---------- Zig-zag rows ---------- */
.zig { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5) 64px; align-items: center; }
.zig--flip .zig__text { order: 2; }
.zig + .zig { margin-top: max(0px, calc(var(--sec-pad) - var(--space-5))); } /* stacked rows sit one unit apart */
.zig__text { display: grid; gap: var(--space-3); }
.zig__text .cta-row { margin-top: var(--space-1); }
.zig__vis { min-width: 0; display: grid; justify-items: center; }
/* Home About row: the photo runs from the top of the heading to the bottom of the buttons */
.zig--about { align-items: stretch; }
.zig--about .zig__vis { display: block; padding-top: 28px; /* the label line and its gap, so the photo starts level with the heading */ }
.zig--about .photo { height: 100%; aspect-ratio: auto; min-height: 0; }

/* ---------- Drawn mock-ups ---------- */
.ln { display: block; height: 6px; border-radius: 3px; background: var(--wbw-line); width: 100%; }
.ln.s { width: 60%; }

/* The phone */
.phone { width: min(300px, 100%); aspect-ratio: 9 / 18.6; background: var(--wbw-ink); border-radius: 44px; padding: 10px; box-shadow: var(--shadow-deep); }
.phone__screen { height: 100%; background: var(--wbw-cloud); border-radius: 34px; overflow: hidden; display: flex; flex-direction: column; font-size: 12px; line-height: 1.35; color: var(--color-text); }
.phone__bar { display: flex; justify-content: space-between; align-items: center; padding: 14px 22px 6px; font-size: 11px; font-weight: var(--fw-bold); }
.phone__sig { display: inline-flex; gap: 2px; align-items: flex-end; }
.phone__sig i { width: 3px; height: 6px; background: var(--wbw-ink); border-radius: 1px; }
.phone__sig i:nth-child(2) { height: 9px; }
.phone__sig i:nth-child(3) { height: 12px; }
.sms { padding: 8px 14px 14px; display: grid; gap: 10px; align-content: start; }
.sms__from { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--color-border); }
.sms__from img { width: 34px; height: 34px; border-radius: 50%; }
.sms__from b { display: block; font-size: 13px; }
.sms__from span { display: block; font-size: 11px; color: var(--color-text-muted); }
.sms__bubble { background: var(--wbw-sage-pale); border-radius: 18px 18px 18px 6px; padding: 10px 12px; font-size: 12.5px; line-height: 1.45; max-width: 94%; }
.sms__card { background: var(--wbw-white); border-radius: 16px; overflow: hidden; border: 1px solid var(--color-border); box-shadow: var(--shadow-soft); }
.sms__cap { padding: 9px 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; border-top: 1px solid var(--color-border); }
.sms__cap b { font-size: 12px; }
.sms__cap span { font-size: 11px; color: var(--color-text-muted); }
.sms__time { font-size: 10.5px; color: var(--color-text-muted); text-align: right; }

/* The little website inside the phone */
.mini { background: var(--wbw-white); font-size: 10px; padding: 10px; display: grid; gap: 8px; align-content: start; }
.mini__nav { display: flex; align-items: center; gap: 6px; }
.mini__nav i { width: 14px; height: 14px; border-radius: 4px; background: var(--color-primary); }
.mini__nav span { width: 22px; height: 4px; border-radius: 2px; background: var(--wbw-line); }
.mini__nav em { margin-left: auto; font-style: normal; background: var(--color-primary); color: var(--wbw-white); border-radius: 999px; padding: 3px 8px; font-weight: var(--fw-extrabold); font-size: 9px; }
.mini__hero { aspect-ratio: 16 / 9; border-radius: 10px; background: linear-gradient(135deg, #CBD9D1, var(--wbw-sage)); display: flex; flex-direction: column; justify-content: flex-end; padding: 10px; color: var(--wbw-forest); }
.mini__name { font-weight: var(--fw-extrabold); font-size: 13px; letter-spacing: -0.02em; }
.mini__tag { font-size: 9.5px; opacity: 0.85; }
.mini__btns { display: flex; gap: 6px; }
.mini__btns b { flex: 1; text-align: center; background: var(--color-primary); color: var(--wbw-white); border-radius: 999px; padding: 6px 8px; font-weight: var(--fw-extrabold); font-size: 10px; }
.mini__btns b.o { background: var(--wbw-white); color: var(--color-text); border: 1px solid var(--color-border); }
.mini--full { padding: 12px; gap: 10px; flex: 1; }
.mini--full .mini__hero { aspect-ratio: 4 / 3; }
.mini__row { display: flex; gap: 8px; align-items: center; padding-top: 9px; border-top: 1px solid var(--color-border); }
.mini__row .icon { color: var(--color-primary); flex-shrink: 0; }
.mini__row div { flex: 1; display: grid; gap: 5px; }
.mini__row b { font-size: 10.5px; }
.mini__row .ln { width: 70%; height: 5px; }
.mini__map { height: 54px; border-radius: 10px; background-color: var(--wbw-sage-pale); background-image: var(--grid-lines); background-size: 14px 14px; display: grid; place-items: center; color: var(--color-primary); }

/* The search result */
.srch { width: min(440px, 100%); display: grid; gap: 12px; font-size: 13px; }
.srch__bar { display: flex; align-items: center; gap: 10px; background: var(--wbw-white); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 12px 18px; box-shadow: var(--shadow-soft); color: var(--color-text); font-weight: var(--fw-semibold); }
.srch__bar .icon { color: var(--color-primary); }
.srch__res { background: var(--wbw-white); border: 1px solid var(--color-border); border-radius: 18px; padding: 16px 18px; box-shadow: var(--shadow-lift); display: grid; gap: 6px; }
.srch__site { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.srch__site i { width: 28px; height: 28px; border-radius: 50%; background: var(--wbw-sage-pale) url("/brand/logo/svg/wbw-icon.svg") center / 18px no-repeat; flex-shrink: 0; }
.srch__site b { display: block; font-size: 13px; }
.srch__site span { display: block; font-size: 11.5px; color: var(--color-text-muted); }
.srch__res h4 { font-size: 17px; font-weight: var(--fw-bold); color: var(--color-primary); letter-spacing: -0.01em; }
.srch__res p { font-size: 13px; color: var(--color-text-muted); }
.srch__ai { background: var(--wbw-sage-pale); border-radius: 18px; padding: 14px 16px; display: grid; gap: 6px; margin-left: 28px; }
.srch__ai-label { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: var(--fw-extrabold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--color-primary); }
.srch__ai p { font-size: 13px; color: var(--color-text); line-height: 1.45; }
.srch__ai q { font-weight: var(--fw-bold); quotes: "\201C" "\201D"; }

/* The business profile card */
.gbp { width: min(380px, 100%); background: var(--wbw-white); border: 1px solid var(--color-border); border-radius: 22px; overflow: hidden; box-shadow: var(--shadow-lift); font-size: 13px; }
.gbp__map { height: 150px; background-color: var(--wbw-sage-pale); background-image: var(--grid-lines); background-size: 26px 26px; display: grid; place-items: center; }
.gbp__map span { width: 44px; height: 44px; border-radius: 50%; background: var(--color-primary); color: var(--wbw-white); display: grid; place-items: center; box-shadow: var(--shadow-soft); }
.gbp__body { padding: 16px 18px 18px; display: grid; gap: 10px; }
.gbp__body > b { font-size: 18px; font-weight: var(--fw-extrabold); letter-spacing: -0.02em; }
.gbp__meta { color: var(--color-text-muted); font-size: 12.5px; margin-top: -8px; }
.gbp__btns { display: flex; gap: 8px; flex-wrap: wrap; }
.gbp__btns em { display: inline-flex; align-items: center; gap: 6px; font-style: normal; border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 7px 12px; font-weight: var(--fw-bold); font-size: 12px; color: var(--color-text); }
.gbp__btns em.on { background: var(--color-primary); color: var(--wbw-white); border-color: var(--color-primary); }
.gbp__rows { display: grid; margin-top: 4px; }
.gbp__rows div { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; padding: 9px 0; border-top: 1px solid var(--color-border); font-size: 12px; font-weight: var(--fw-bold); color: var(--color-text-muted); }
.gbp__rows .ln { height: 5px; width: 70%; }

/* ---------- Client spotlight: real screenshots in a browser frame, phone overlapping ---------- */
.shot { position: relative; width: 100%; padding: 0 0 12% 10%; }
.shot__desktop { background: var(--wbw-white); border: 1px solid var(--color-border); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-lift); }
.shot__bar { display: flex; align-items: center; gap: 6px; padding: 10px 14px; background: var(--wbw-cloud); border-bottom: 1px solid var(--color-border); }
.shot__bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--wbw-line); display: block; }
.shot__bar span { margin-left: 8px; flex: 1; background: var(--wbw-white); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 4px 12px; font-size: 12px; font-weight: var(--fw-semibold); color: var(--color-text-muted); }
.shot__desktop img { display: block; width: 100%; aspect-ratio: 1.6 / 1; object-fit: cover; object-position: top; }
/* 26% wide keeps the phone (ratio 9:18.6) shorter than the frame plus its 12% footing, so it never pokes above the row when stacked */
.shot .phone--shot { position: absolute; left: 0; bottom: 0; width: 26%; padding: 6px; border-radius: 30px; box-shadow: var(--shadow-deep); } /* two classes, so the phone-width rule for .phone further down cannot override it */
.phone--shot .phone__screen { border-radius: 24px; display: block; }
.phone--shot .phone__screen img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.zig--work .zig__text .tag { justify-self: start; }
.zig--work + .zig--work { margin-top: calc(var(--sec-pad) * 1.5 - var(--space-5)); } /* spotlight rows sit a unit and a half apart (Aaron, 2 October 2026) */
.tag--sector { background: var(--wbw-sage-pale); border-color: var(--wbw-sage-pale); color: var(--color-primary); }
.work__label { font-size: 12px; font-weight: var(--fw-extrabold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-primary); margin-top: 6px; }
.zig--work .ticks { gap: 8px; }
.zig--work .zig__text .cta-row { margin-top: var(--space-1); }

/* ---------- Price card ---------- */
.price-card { background: var(--wbw-white); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); padding: clamp(24px, 3vw, 36px); display: grid; gap: 16px; box-shadow: var(--shadow-lift); width: 100%; }
.price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.price__amount { font-size: clamp(3rem, 2.5rem + 2vw, 4rem); font-weight: var(--fw-extrabold); line-height: 1; letter-spacing: -0.04em; color: var(--color-primary); }
.price__amount.pin { font-size: clamp(1.75rem, 1.5rem + 1vw, 2.25rem); }
.price__note { font-size: 17px; font-weight: var(--fw-bold); color: var(--color-text-muted); }
.price__label { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.08em; }
.price__sub { color: var(--color-text-muted); font-size: 15px; margin-top: -6px; }
.price-list { display: grid; }
.price-list li { position: relative; padding: 11px 0 11px 26px; border-top: 1px solid var(--color-border); font-size: 15px; font-weight: var(--fw-semibold); }
.price-list li:last-child { border-bottom: 1px solid var(--color-border); }
.price-list li::before { content: ""; position: absolute; left: 0; top: 18px; width: 9px; height: 9px; background: var(--wbw-sage); border-radius: 2px; }
.price-card .micro { margin: 0; }

/* ---------- Facts ---------- */
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); width: 100%; }
.fact { display: grid; gap: 10px; padding: 8px 32px 8px 0; align-content: start; }
.fact + .fact { padding-left: 32px; border-left: 1px solid var(--color-border); }
.facts--stack { grid-template-columns: minmax(0, 1fr); }
.facts--stack .fact { padding: var(--space-2) 0; gap: 8px; }
.facts--stack .fact:first-child { padding-top: 0; }
.facts--stack .fact:last-child { padding-bottom: 0; }
.facts--stack .fact + .fact { padding-left: 0; border-left: 0; border-top: 1px solid var(--color-border); }
.facts--stack .fact__stat { font-size: clamp(2.25rem, 1.9rem + 1.4vw, 3rem); }
.facts--stack .fact__text { font-size: 15.5px; }
.facts--stack .fact__source { font-size: 12.5px; }
/* The search conversation sits beside the stats at the same visual size */
.split--search { align-items: center; }
.split--search .split__text { gap: var(--space-3); }
.split--search .split__media { display: grid; justify-items: end; }
.split--search .srch { width: min(560px, 100%); gap: 16px; font-size: 15px; }
.split--search .srch__bar { padding: 16px 22px; font-size: 16px; }
.split--search .srch__res { padding: 22px 24px; gap: 8px; border-radius: 22px; }
.split--search .srch__site { gap: 12px; margin-bottom: 6px; }
.split--search .srch__site i { width: 34px; height: 34px; background-size: 22px; }
.split--search .srch__site b { font-size: 15px; }
.split--search .srch__site span { font-size: 13px; }
.split--search .srch__res h4 { font-size: 21px; }
.split--search .srch__res p { font-size: 15px; }
.split--search .srch__ai { padding: 18px 20px; border-radius: 22px; margin-left: 36px; gap: 8px; }
.split--search .srch__ai-label { font-size: 11.5px; }
.split--search .srch__ai p { font-size: 15px; line-height: 1.5; }
.fact__stat { font-size: clamp(2.75rem, 2.2rem + 2vw, 3.75rem); font-weight: var(--fw-extrabold); line-height: 1; letter-spacing: -0.04em; color: var(--color-primary); }
.fact__text { font-weight: var(--fw-semibold); color: var(--color-text); }
.fact__source { font-size: 12.5px; color: var(--color-text-muted); line-height: 1.45; }

/* ---------- Icon rows, pills, extras ---------- */
.irow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 40px; width: 100%; }
.irow--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.irow li { display: grid; gap: 8px; align-content: start; }
.irow li > div { display: grid; gap: 8px; }
.irow.irow--list { grid-template-columns: minmax(0, 1fr); gap: 0; }
.irow.irow--list li { grid-template-columns: 46px minmax(0, 1fr); column-gap: var(--space-3); padding: var(--space-3) 0; align-items: start; }
.irow.irow--list li + li { border-top: 1px solid var(--color-border); }
.irow.irow--list li:first-child { padding-top: 0; }
.irow.irow--list li:last-child { padding-bottom: 0; }
.irow.irow--list .icon-tile { margin-bottom: 0; }
.irow.irow--list p { max-width: 60ch; }
.irow h3 { font-size: 1.125rem; }
.irow p { color: var(--color-text-muted); font-size: 15px; line-height: 1.55; }
.icon-tile { width: 46px; height: 46px; display: inline-flex; align-items: center; justify-content: center; border-radius: 14px; background: var(--color-tint); color: var(--color-primary); margin-bottom: 6px; }
.band .icon-tile, .panel .icon-tile { background: var(--wbw-cloud); }
.pills { display: flex; flex-wrap: wrap; gap: 10px; }
.pills li { background: var(--wbw-white); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 10px 16px; font-size: 15px; font-weight: var(--fw-bold); box-shadow: var(--shadow-soft); }
.band .pills li, .panel .pills li { background: var(--wbw-cloud); box-shadow: none; }
.extras { display: grid; }
.extras li { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 0; border-top: 1px solid var(--color-border); }
.extras li:last-child { border-bottom: 1px solid var(--color-border); }
.extras h3 { font-size: 1.0625rem; }
.extra__price { font-weight: var(--fw-extrabold); color: var(--color-primary); font-size: 1.25rem; white-space: nowrap; }
.extra__price.pin { font-size: var(--fs-small); }

/* ---------- Ticks, tags ---------- */
.ticks { display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks li::before {
  content: ""; flex-shrink: 0; width: 18px; height: 18px; margin-top: 0.2em; background-color: var(--color-primary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9.5l3.5 3.5 7.5-8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.stage .ticks li::before, .signup .ticks li::before, .cta-band .ticks li::before { background-color: var(--wbw-sage); }
.tag { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-pill); background: var(--wbw-white); border: 1px solid var(--color-border); color: var(--color-text); font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1.2; text-decoration: none; }
.tags { display: flex; flex-wrap: wrap; gap: 10px; }

/* ---------- Photos and the name card ---------- */
.photo { position: relative; width: 100%; aspect-ratio: var(--ratio, 3 / 4); border-radius: var(--radius-2xl); overflow: hidden; background: var(--color-tint); box-shadow: var(--shadow-lift); }
.photo--pin { background-color: var(--wbw-sage-pale); background-image: var(--grid-lines); background-size: 26px 26px; }
.photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.photo__pin { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 12px; color: var(--color-primary); padding: var(--space-3); text-align: center; }
.photo-stack { position: relative; margin-bottom: 30px; width: 100%; max-width: 440px; }
.photo-stack .namecard { position: absolute; left: 20px; right: 20px; bottom: -30px; max-width: 340px; }
.namecard { display: flex; align-items: center; gap: var(--space-2); background: var(--color-surface); border: var(--border); border-radius: 16px; padding: 14px 18px; box-shadow: var(--shadow-soft); }
.namecard img { width: 44px; height: 44px; flex-shrink: 0; }
.namecard strong { display: block; font-weight: var(--fw-extrabold); line-height: 1.3; }
.namecard span { display: block; font-size: var(--fs-small); color: var(--color-text-muted); line-height: 1.4; }

/* ---------- Cards (blog) ---------- */
.cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-cards); }
.cards--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card {
  background: var(--color-surface); border: var(--border); border-radius: var(--radius-2xl);
  padding: var(--space-4); display: grid; gap: var(--space-2); align-content: start; min-width: 0; box-shadow: var(--shadow-soft);
}
.band .card, .panel .card { background: var(--wbw-cloud); box-shadow: none; }
.card p { color: var(--color-text-muted); }
.card .h3 { margin-top: 2px; }

/* ---------- Questions (FAQ) ---------- */
.faq { display: grid; width: 100%; }
.faq--centred { max-width: 760px; margin-inline: auto; }
.faq__item { border-top: 1px solid var(--color-border); }
.faq__item:last-child { border-bottom: 1px solid var(--color-border); }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 18px 0; cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary .h3 { font-size: 1.0625rem; text-align: left; }
.faq__plus { position: relative; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--color-tint); color: var(--color-primary); }
.faq__plus::before, .faq__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; border-radius: 1px; background: currentColor; transform: translate(-50%, -50%); transition: transform 0.2s ease; }
.faq__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__item[open] .faq__plus::after { transform: translate(-50%, -50%) rotate(0deg); }
.faq__item summary:focus-visible { border-radius: 8px; }
.faq__answer { padding: 0 44px 20px 0; color: var(--color-text-muted); }
.band .faq__plus, .panel .faq__plus { background: var(--wbw-cloud); }

/* ---------- The closing cards: sign-up (with the form) and the plain band ---------- */
.signup, .cta-band {
  position: relative; border-radius: var(--radius-band); color: var(--wbw-white); overflow: hidden;
  background: var(--stage-glow); padding: var(--sec-pad) clamp(24px, 4.5vw, 56px);
}
.signup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: var(--space-5) 56px; align-items: start; }
.signup__text { display: grid; gap: var(--space-3); }
.signup .headline, .signup h2, .signup h3, .cta-band .headline, .cta-band h2 { color: var(--wbw-white); }
.signup .lede, .cta-band .lede { color: var(--soft-on-dark); }
.whatnext { display: grid; gap: 14px; border-top: 1px solid rgba(255, 255, 255, 0.16); padding-top: var(--space-3); }
.whatnext h3 { font-size: 12px; font-weight: var(--fw-extrabold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wbw-sage); }
.signup .numbered li::before { background: var(--wbw-sage); color: var(--wbw-forest); }
.signup .ticks { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 14.5px; color: var(--soft-on-dark); }
.signup__form { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: var(--radius-2xl); padding: clamp(20px, 3vw, 32px); }
.signup .field label { color: var(--wbw-white); }
.signup .field .opt, .signup .field .req { color: var(--wbw-sage); }
.signup .field input, .signup .field textarea, .signup .field select { border-color: transparent; }
.signup .field input:hover, .signup .field textarea:hover, .signup .field select:hover { border-color: var(--wbw-sage); }
.signup .form__small { color: var(--soft-on-dark); }
.signup .form__small a { color: var(--wbw-white); }
.signup .btn--primary { background: var(--wbw-white); color: var(--wbw-evergreen); border-color: var(--wbw-white); }
.signup .btn--primary:hover { background: var(--wbw-sage-pale); border-color: var(--wbw-sage-pale); }
.signup .form__status { color: var(--wbw-white); }
.signup .form__status.is-error, .signup .field__error { color: #F4C9A4; }
.signup .field__error::before { background-color: #F4C9A4; }
.signup .form__done .h3 { color: var(--wbw-white); }
.cta-band { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--space-4) var(--space-5); align-items: center; }
.cta-band__text { display: grid; gap: var(--space-3); }
.cta-band .cta-row { justify-content: flex-end; }

/* ---------- Contact links ---------- */
.contact-links { display: grid; gap: 10px; }
.contact-links a { display: flex; width: fit-content; align-items: center; gap: 10px; text-decoration: none; font-weight: var(--fw-semibold); color: var(--color-text); }
.contact-links a:hover { text-decoration: underline; color: var(--color-primary); }
.contact-links .icon { color: var(--color-primary); flex-shrink: 0; }
.contact-links.on-dark a { color: var(--wbw-white); }
.contact-links.on-dark a:hover { color: var(--wbw-white); }
.contact-links.on-dark .icon { color: var(--wbw-sage); }

/* ---------- Forms ---------- */
.form-grid, .form-section > .wrap.form-grid, .sec > .wrap.form-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-5) 48px; align-items: start; }
.form-grid__form { min-width: 0; }
.form-card { background: var(--wbw-white); border: 1px solid var(--color-border); border-radius: var(--radius-2xl); padding: clamp(24px, 3.5vw, 40px); box-shadow: var(--shadow-lift); }
.form { display: grid; gap: 30px; }
.form__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.field { display: grid; gap: 8px; grid-row: span 3; grid-template-rows: subgrid; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field label { font-weight: var(--fw-semibold); line-height: 1.3; font-size: 15px; }
.field .req { color: var(--color-primary); }
.field .opt { color: var(--color-text-muted); font-weight: var(--fw-regular); font-size: var(--fs-small); }
.field input, .field textarea, .field select {
  width: 100%; min-height: 52px; padding: 13px 16px; font: inherit; color: var(--color-text);
  background: var(--color-surface); border: 1.5px solid var(--color-border); border-radius: var(--radius-md);
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--wbw-sage); }
.field input:focus-visible, .field textarea:focus-visible, .field select:focus-visible { border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.select { position: relative; }
.select select { appearance: none; padding-right: 44px; }
.select .icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--color-primary); }
.field.has-error input, .field.has-error textarea, .field.has-error select { border-color: var(--color-error); }
.field__error { display: flex; gap: 6px; align-items: flex-start; font-size: var(--fs-small); color: var(--color-error); font-weight: var(--fw-semibold); line-height: 1.4; }
.field__error::before {
  content: ""; flex-shrink: 0; width: 18px; height: 18px; background-color: var(--color-error);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v4M12 16h.01'/%3E%3C/svg%3E") center / contain no-repeat;
}
.field--trap { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.choices { display: grid; gap: 10px; }
.choice { display: flex; align-items: center; gap: 10px; font-weight: var(--fw-regular); }
.choice input { width: 20px; height: 20px; accent-color: var(--color-primary); }
.form__foot { display: grid; gap: var(--space-2); justify-items: start; }
.form__small { max-width: 56ch; }
.form__status { font-weight: var(--fw-semibold); color: var(--color-primary); }
.form__status.is-error { color: var(--color-error); }
.form__status:empty { display: none; }
.form-aside { display: grid; gap: var(--space-3); align-content: start; padding-top: 8px; }
.form-aside__heading { font-weight: var(--fw-bold); margin-top: var(--space-1); }
.numbered { counter-reset: n; display: grid; gap: 12px; }
.numbered li { counter-increment: n; display: flex; gap: 12px; align-items: flex-start; }
.numbered li::before { content: counter(n); flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--color-primary); color: var(--wbw-white); font-size: var(--fs-small); font-weight: var(--fw-bold); display: inline-flex; align-items: center; justify-content: center; }

/* ---------- Pricing calculator ---------- */
.calc { display: grid; gap: var(--space-2); background: var(--wbw-cloud); border: var(--border); border-radius: var(--radius-2xl); padding: var(--space-4); }
.sec .calc { background: var(--wbw-white); box-shadow: var(--shadow-lift); }
.calc label { font-weight: var(--fw-semibold); }
.calc__row { display: flex; align-items: center; border: 1.5px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); padding-left: 14px; }
.calc__row:focus-within { border-color: var(--color-primary); box-shadow: var(--focus-ring); }
.calc__prefix { font-weight: var(--fw-bold); color: var(--color-text-muted); }
.calc input { width: 100%; min-height: 56px; border: 0; background: transparent; font: inherit; font-size: var(--fs-h3); font-weight: var(--fw-bold); padding: 12px 14px 12px 6px; }
.calc input:focus-visible { box-shadow: none; }
.calc__result { font-size: var(--fs-body-lg); font-weight: var(--fw-bold); color: var(--color-primary); }
.calc__result strong { font-size: var(--fs-h2); }
.calc--pinned { background: var(--color-tint); border-style: dashed; box-shadow: none; }

/* ---------- Prose (legal pages, blog articles) ---------- */
.prose { display: grid; gap: var(--space-3); max-width: 72ch; }
.prose h2 { font-size: var(--fs-h2); font-weight: var(--fw-bold); line-height: var(--lh-subheading); letter-spacing: var(--ls-h2); margin-top: var(--space-2); }
.prose h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); line-height: var(--lh-subheading); }
.prose p, .prose li { max-width: none; }
.prose ul, .prose ol { padding-left: 1.3em; display: grid; gap: 8px; }
.prose ul { list-style: disc; }
.prose ol { list-style: decimal; }
.prose blockquote { border-left: 3px solid var(--wbw-sage); padding-left: var(--space-3); color: var(--color-text-muted); font-size: var(--fs-body-lg); }
.prose img { border-radius: var(--radius-lg); }
.prose pre { overflow-x: auto; background: var(--color-tint); padding: var(--space-3); border-radius: var(--radius-md); font-size: var(--fs-small); }
.prose code { font-size: 0.92em; background: var(--color-tint); padding: 1px 5px; border-radius: 4px; }
.prose pre code { background: none; padding: 0; }
.prose hr { border: 0; border-top: var(--border); }
.table-wrap { overflow-x: auto; max-width: 100%; }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); min-width: 520px; }
th, td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: var(--border); }
th { font-weight: var(--fw-bold); color: var(--color-primary); }
.draft-box { background: var(--color-tint); border: 1px dashed var(--color-primary); border-radius: var(--radius-lg); padding: var(--space-3) var(--space-4); display: grid; gap: 8px; }
.draft-box__title { font-weight: var(--fw-extrabold); color: var(--color-primary); text-transform: uppercase; letter-spacing: var(--ls-label); font-size: var(--fs-label); }
.draft-box ul { list-style: disc; padding-left: 1.3em; display: grid; gap: 4px; }

/* ---------- Blog ---------- */
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: var(--fs-small); color: var(--color-text-muted); }
.breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 6px; }
.breadcrumbs a { color: var(--color-text-muted); }
.breadcrumbs li + li::before { content: "/"; margin-right: 6px; color: var(--wbw-sage); }
.post-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: var(--fs-small); color: var(--color-text-muted); }
.post-card { padding: 0; overflow: hidden; }
.post-card__img { aspect-ratio: 1.6 / 1; background: var(--color-tint); position: relative; display: block; }
.post-card__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.post-card__body { padding: var(--space-4); display: grid; gap: var(--space-2); }
.post-card .h3 a { text-decoration: none; color: inherit; }
.post-card .h3 a:hover { text-decoration: underline; }
.post-card--featured { grid-column: 1 / -1; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); display: grid; }
.post-card--featured { align-items: center; }
.post-card--featured .post-card__img { aspect-ratio: 1.6 / 1; min-height: 0; align-self: center; }
.post-card--featured .post-card__body { padding: var(--space-5); align-content: center; }
.post-cover { border-radius: var(--radius-2xl); overflow: hidden; aspect-ratio: 1.6 / 1; position: relative; background: var(--color-tint); box-shadow: var(--shadow-lift); }
.post-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.filters { display: flex; flex-wrap: wrap; gap: 10px; }
.filters a { text-decoration: none; }
.filters a[aria-current="page"] { background: var(--color-primary); color: var(--wbw-white); border-color: var(--color-primary); }
.pagination { display: flex; gap: var(--space-2); flex-wrap: wrap; }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-footer); color: var(--wbw-white); border-radius: 32px 32px 0 0; }
.site-footer a { color: var(--wbw-white); }
.site-footer a:hover { color: var(--wbw-sage-pale); }
.site-footer a.btn--on-dark, .site-footer a.btn--on-dark:hover { color: var(--wbw-evergreen); }
.footer__grid { display: grid; grid-template-columns: 1.5fr repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-5); }
.footer__grid:has(> :nth-child(4)) { grid-template-columns: 1.5fr repeat(3, minmax(0, 1fr)); }
.footer__col { display: grid; gap: var(--space-2); align-content: start; }
.footer__col ul { display: grid; gap: 9px; }
.footer__col ul a { text-decoration: none; color: rgba(255, 255, 255, 0.88); font-size: 15px; }
.footer__col ul a:hover { text-decoration: underline; color: var(--wbw-white); }
.footer__brand { justify-items: start; gap: var(--space-3); }
.footer__brand img { height: 40px; width: auto; }
.footer__brand .btn { margin-top: 4px; }
.footer__heading { font-size: 12px; font-weight: var(--fw-extrabold); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wbw-sage); }
.footer__tagline { color: var(--wbw-sage); font-weight: var(--fw-bold); }
.footer__line { color: var(--soft-on-dark); font-size: 14.5px; max-width: 36ch; }
.footer__legal { border-top: 1px solid rgba(255, 255, 255, 0.14); margin-top: var(--space-5); padding-top: var(--space-4); display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.footer__legal-links { display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: var(--fs-small); }
.footer__legal-links a, .footer__legal-links .linklike { color: rgba(255, 255, 255, 0.88); text-decoration: none; }
.footer__legal-links a:hover, .footer__legal-links .linklike:hover { text-decoration: underline; color: var(--wbw-white); }
.site-footer .small { color: var(--soft-on-dark); }

/* ---------- Sticky action on phones ---------- */
.sticky-cta { display: none; }

/* ---------- Consent banner ---------- */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: var(--gap-panels); }
.consent__inner { max-width: 720px; margin-inline: auto; background: var(--color-surface); border: var(--border); border-radius: var(--radius-2xl); padding: var(--space-3) var(--space-4); display: grid; gap: var(--space-2); box-shadow: var(--shadow-lift); }
.consent__title { font-weight: var(--fw-extrabold); }
.consent__text { color: var(--color-text-muted); max-width: none; }
.consent__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* ---------- Reveal on scroll: only once the script confirms it is running ---------- */
html.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1); }
html.js .reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html.js .reveal, .rise, html.js .hero .chip-float { opacity: 1; transform: none; transition: none; animation: none; }
  .arrow-link .icon, .btn, .btn .arr, .faq__plus::after { transition: none; }
}

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
  .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .chip-float { display: none; }
  .hero__media { min-height: 0; }
}
@media (max-width: 1000px) {
  .site-nav {
    display: none; position: absolute; left: var(--side-pad); right: var(--side-pad); top: calc(100% + 8px);
    background: var(--wbw-white); border: 1px solid var(--color-border); border-radius: 24px; padding: 8px 20px 20px;
    box-shadow: var(--shadow-lift); flex-direction: column; align-items: stretch; pointer-events: auto; margin: 0;
  }
  body.nav-open .site-nav { display: flex; }
  .site-nav ul { flex-direction: column; gap: 0; }
  .site-nav ul a { display: block; padding: 13px 0; border-bottom: 1px solid var(--color-border); border-radius: 0; font-size: 17px; color: var(--color-text); }
  .site-nav ul a:hover, .site-nav ul a[aria-current="page"] { background: none; color: var(--color-primary); }
  .site-nav__actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; margin-top: 16px; }
  .site-nav__phone { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-weight: var(--fw-bold); text-decoration: none; color: var(--color-text); }
  .site-header__phone { display: none; }
  .site-header__actions { margin-left: auto; } /* with the nav hidden, the button and burger sit at the far right */
  .nav-toggle { display: inline-flex; }
  .journey { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .journey li::before { display: none; }
  .journey li { grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; }
  .journey h3 { margin-top: 8px; }
  .journey li > p, .journey li > h3 { grid-column: 2; }
  .journey li > p { margin-top: -4px; }
  .journey__n { grid-row: 1 / span 3; }
  .irow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .hero__grid, .zig, .split, .signup, .cta-band, .form-grid, .form-section > .wrap.form-grid, .sec > .wrap.form-grid, .post-card--featured { grid-template-columns: minmax(0, 1fr); }
  .zig--flip .zig__text { order: 0; }
  .zig--about .zig__vis { padding-top: 0; }
  .zig--about .photo { height: auto; aspect-ratio: var(--ratio, 1.6 / 1); }
  .split--pricing .split__media, .split--extras .split__media { justify-self: stretch; max-width: none; }
  .split--search .split__media { justify-items: start; }
  .hero__media .photo-stack, .hero__media .price-card { max-width: 460px; }
  .cta-band .cta-row { justify-content: flex-start; }
  .facts { grid-template-columns: minmax(0, 1fr); }
  .fact { padding: 20px 0; }
  .fact + .fact { padding-left: 0; border-left: 0; border-top: 1px solid var(--color-border); }
  .footer__grid, .footer__grid:has(> :nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 900px) {
  .proof { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .cards, .cards--2, .irow, .irow--2 { grid-template-columns: minmax(0, 1fr); }
  .proof { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  /* A compact form on phones (Aaron, 2 October 2026): short fields stay paired, boxes and gaps shrink, the extras go */
  .form { gap: 18px; }
  .form__fields { gap: 12px; }
  .field { gap: 5px; }
  .field label { font-size: 13.5px; }
  .field .opt { font-size: 12px; }
  .field input, .field textarea, .field select { min-height: 44px; padding: 9px 12px; font-size: 16px; }
  .field textarea { min-height: 84px; }
  .form__foot { gap: 10px; }
  .form__foot .btn { min-height: 48px; padding: 12px 20px; font-size: 16px; }
  .form__small { font-size: 12.5px; }
  .signup { padding: 28px 18px; gap: 20px; }
  .signup__form { padding: 14px; }
  .signup .whatnext, .signup .contact-links { display: none; }
  .form-card { padding: 18px; }
  .footer__grid, .footer__grid:has(> :nth-child(4)) { grid-template-columns: minmax(0, 1fr); }
  .footer__brand { grid-column: auto; }
  .proof { justify-content: flex-start; }
  .sticky-cta {
    display: flex; gap: 10px; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40;
    transition: transform 0.25s ease, opacity 0.25s ease;
  }
  .sticky-cta .btn--primary { flex: 1; box-shadow: var(--shadow-lift); }
  .sticky-cta .btn--ghost { background: var(--color-surface); box-shadow: var(--shadow-lift); }
  .sticky-cta.is-hidden { transform: translateY(130%); opacity: 0; pointer-events: none; }
  body:has(.sticky-cta) { padding-bottom: 76px; }
  body.consent-open .sticky-cta { bottom: calc(var(--consent-h, 0px) + 12px); }
  .cta-row .btn { flex: 1 1 auto; }
  .site-header__cta { display: none; }
  .site-header__pill { padding-left: 16px; height: 60px; }
  .site-logo img { height: 30px; }
  /* Phones get a shorter home page: the proof strip, the search mock-up and the About row are desktop-only (Aaron, 2 October 2026) */
  .mobile-hide { display: none !important; }
  /* Client spotlight on phones: the browser frame only (Aaron, 2 October 2026) */
  .shot { padding: 0; }
  .shot .phone--shot { display: none; }
}
@media (max-width: 480px) {
  .eyebrow { white-space: normal; }
  .btn--lg { width: 100%; }
  .form__foot .btn { width: 100%; }
  .band, .panel { margin-inline: 10px; border-radius: 28px; }
  .stage, .signup, .cta-band { border-radius: 28px; }
  .phone { width: min(240px, 100%); }
  .shot .phone--shot { display: none; }
  .hero__text .display { max-width: none; }
  .faq__answer { padding-right: 0; }
}

/* ======================================================================
   Section rhythm (playbook, section 6). Keep this block at the end.
   One unit above and below every section, inside every white band and
   under every page hero. Change --sec-pad in the tokens to move everything.
   ====================================================================== */
.sec, .band, .panel, .form-section { padding-block: var(--sec-pad); }
.hero { padding: calc(var(--sec-pad) + 28px) 0 var(--sec-pad); } /* extra room under the floating header; one unit below */
.hero.has-strip { padding-bottom: 0; }
.hero-strip { margin-top: var(--hero-strip-gap); }
main > .band:last-child, main > .panel:last-child { margin-bottom: var(--gap-panels); }
.site-footer { padding-block: var(--sec-pad); }
/* First and last elements inside a section add no outer space of their own. */
.sec > .wrap > :first-child, .band > .wrap > :first-child, .panel > .wrap > :first-child, .hero__text > :first-child { margin-top: 0; }
.sec > .wrap > :last-child, .band > .wrap > :last-child, .panel > .wrap > :last-child { margin-bottom: 0; }
.cta-row:empty, .sec-link:empty { display: none; }