/*!
 * HirePay — public site stylesheet ("Lorenz" editorial design language)
 * Hand-written, static, no build step. See docs/PUBLIC_REDESIGN_PLAN.md.
 *
 * Table of contents (cascade layers, in order):
 *   1. reset       — modern CSS reset
 *   2. tokens       — design tokens (color, type, space, motion)
 *   3. base         — element defaults, headings, links, keyframes
 *   4. layout       — container, section, grid, split, primitives
 *   5. components    — buttons, header, footer, cards, hero, forms, etc.
 *   6. utilities     — small, deliberately minimal helpers
 */

@layer reset, tokens, base, layout, components, utilities;

/* ==========================================================================
   1. RESET
   ========================================================================== */
@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { line-height: 1.5; -webkit-font-smoothing: antialiased; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { cursor: pointer; background: none; border: none; }
  p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }
  ul[class], ol[class] { list-style: none; padding: 0; }
  a { text-decoration: none; }
  table { border-collapse: collapse; }
  fieldset { border: none; padding: 0; }
  #app, #__next { isolation: isolate; }
}

/* ==========================================================================
   2. TOKENS
   ========================================================================== */
@layer tokens {
  :root {
    /* Color — navy / cream / sand / forest-green editorial palette */
    --navy-900: #0B1F33;
    --navy-800: #122B44;
    --navy-700: #16324F;
    --cream:    #FBFAF7;
    --sand:     #F3EEE5;
    --sand-100: #EFEAE0;
    --sand-200: #E9E4D9;
    --sand-300: #D8D2C4;
    --green-700: #0E7C5B;
    --green-800: #0B6A4D;
    --sage-400:  #7FB8A3;
    --mint-50:   #E9F4EF;
    --ink-900:  var(--navy-900);
    --ink-600:  #4C5866;
    --ink-400:  #8A8F98;
    --slate-500: #5E7CA0;
    --amber-500: #C99A3B;
    --red-600:  #B3261E;

    --on-dark:        var(--cream);
    --on-dark-muted:  rgba(251, 250, 247, .75);
    --on-dark-faint:  #B8C2CD;
    --border-light:   var(--sand-200);
    --border-dark:    rgba(251, 250, 247, .12);

    --surface-page: var(--cream);
    --surface-alt:  var(--sand);
    --surface-dark: var(--navy-900);
    --surface-card: #FFFFFF;

    --text-primary:   var(--ink-900);
    --text-secondary: var(--ink-600);
    --text-muted:     var(--ink-400);
    --text-on-dark:   var(--on-dark);
    --text-link:      var(--green-700);

    --focus-ring: 0 0 0 3px color-mix(in srgb, var(--green-700) 35%, transparent);

    /* Typography */
    --font-display: "Space Grotesk", ui-sans-serif, system-ui, sans-serif;
    --font-body: "Inter", ui-sans-serif, system-ui, -apple-system, sans-serif;

    --fs-display: clamp(2.625rem, 1.6rem + 4.4vw, 5.25rem);
    --fs-h2:      clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
    --fs-h3:      clamp(1.625rem, 1.35rem + 1.2vw, 2.25rem);
    --fs-card-title: 1.625rem;
    --fs-title-sm:   1.375rem;
    --fs-eyebrow:    .75rem;
    --fs-lead:    1.3125rem;
    --fs-body:    1.0625rem;
    --fs-body-sm: .9375rem;
    --fs-ui:      .875rem;
    --fs-meta:    .8125rem;

    --lh-tight: 1.04;
    --lh-snug:  1.15;
    --lh-normal: 1.5;
    --lh-relaxed: 1.75;
    --measure: 68ch;

    /* Space + shape */
    --container-w: 1280px;
    --container-narrow: 760px;
    --container-wide: 1360px;
    --gutter: clamp(20px, 3.75vw, 48px);
    --section-py: clamp(80px, 10vw, 128px);
    --section-py-hero: clamp(72px, 9vw, 116px);
    --section-py-cta: clamp(96px, 14vw, 180px);

    --radius-sm: 8px;
    --radius-md: 9px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 18px;
    --radius-full: 50%;

    --border-w: 1px;

    --shadow-card: 0 24px 48px -32px rgba(11, 31, 51, .25);
    --shadow-float: 0 40px 80px -40px rgba(11, 31, 51, .28);

    /* Motion */
    --ease-out: cubic-bezier(.22, 1, .36, 1);
    --dur-micro: .25s;
    --dur-image: .7s;
    --dur-reveal: .85s;
    --stagger: .08s;

    /* z-index scale */
    --z-base: 1;
    --z-raised: 10;
    --z-sticky: 100;
    --z-overlay: 500;
    --z-modal: 900;
    --z-toast: 950;
    --z-cursor: 1000;
  }

  /* @font-face — self-hosted Inter + Space Grotesk (see docs/PUBLIC_REDESIGN_PLAN.md A3) */
  @font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("../fonts/inter-400.woff2") format("woff2");
  }
  @font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/inter-500.woff2") format("woff2");
  }
  @font-face {
    font-family: "Inter";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/inter-600.woff2") format("woff2");
  }
  @font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("../fonts/space-grotesk-500.woff2") format("woff2");
  }
  @font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("../fonts/space-grotesk-600.woff2") format("woff2");
  }
  @font-face {
    font-family: "Space Grotesk";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("../fonts/space-grotesk-700.woff2") format("woff2");
  }
}

/* ==========================================================================
   3. BASE
   ========================================================================== */
@layer base {
  html {
    scroll-behavior: smooth;
    scroll-padding-top: 96px;
    /* Safety net against accidental horizontal scroll — the off-canvas
       mobile drawer (position:fixed + translateX(100%) when closed) sits
       just past the right edge of the viewport by design, and some
       browsers count that painted-but-off-screen box toward the page's
       scrollable area. Clipping here doesn't affect any fixed/sticky
       element's own behavior, it just stops the viewport from growing a
       horizontal scrollbar because of content that's meant to be hidden.
       Set on html (the actual scrolling box), not just body, since a
       body-only overflow value only propagates to the viewport when html
       itself declares no overflow — safer to be explicit on both. */
    overflow-x: hidden;
  }
  /* Pages carrying a sticky .section-nav (currently /product) stack TWO
     sticky bars: the header, then the module nav at top:88px, ~73px tall —
     so it occupies roughly 88–161px of the viewport. The base 96px
     scroll-padding-top above was sized for the header alone, which meant an
     anchor jump (#payroll etc.) landed the section heading underneath the
     module nav. Raising it here clears both bars.
     :has() degrades safely — a browser without support simply keeps the
     96px above, i.e. today's behaviour, rather than breaking. */
  html:has(.section-nav) { scroll-padding-top: 172px; }
  body {
    background: var(--surface-page);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    line-height: var(--lh-relaxed);
    overflow-x: hidden;
  }
  h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    color: var(--text-primary);
    line-height: var(--lh-snug);
  }
  h1 { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -0.03em; }
  h2 { font-size: var(--fs-h2); letter-spacing: -0.025em; }
  h3 { font-size: var(--fs-h3); letter-spacing: -0.02em; }
  h4 { font-size: var(--fs-card-title); letter-spacing: -0.01em; }
  p { color: var(--text-secondary); }

  a { color: var(--text-primary); transition: color var(--dur-micro) ease; }
  a:hover { color: var(--green-700); }

  ::selection { background: var(--green-700); color: var(--cream); }

  :focus-visible {
    outline: none;
    box-shadow: var(--focus-ring);
    border-radius: 4px;
  }

  em, .accent { font-style: normal; color: var(--green-700); }

  @keyframes ofRise {
    0%   { opacity: 0; transform: translateY(28px); }
    100% { opacity: 1; transform: none; }
  }
  @keyframes ofFade {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  @keyframes ofDraw {
    0%   { stroke-dashoffset: 720; }
    100% { stroke-dashoffset: 0; }
  }
  @keyframes ofBar {
    0%   { transform: scaleY(0); }
    100% { transform: scaleY(1); }
  }
  @keyframes ofRipple {
    0%   { transform: scale(.1); opacity: .5; }
    100% { transform: scale(3.2); opacity: 0; }
  }
  @keyframes ofSpin {
    to { transform: rotate(360deg); }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: .01ms !important;
      animation-delay: 0ms !important;
      animation-iteration-count: 1 !important;
      transition-duration: .01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

/* ==========================================================================
   4. LAYOUT
   ========================================================================== */
@layer layout {
  .container {
    width: 100%;
    max-width: var(--container-w);
    margin-inline: auto;
    padding-inline: var(--gutter);
  }
  .container--narrow { max-width: var(--container-narrow); }
  .container--wide { max-width: var(--container-wide); }

  .section { padding-block: var(--section-py); }
  .section--flush { padding-block: 0; }
  .section--tight { padding-block: clamp(48px, 6vw, 80px); }
  .section--tall { padding-block: var(--section-py-cta); }
  .section--sand { background: var(--surface-alt); }
  .section--dark { background: var(--surface-dark); color: var(--text-on-dark); }
  .section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--text-on-dark); }
  .section--dark p { color: var(--on-dark-muted); }

  .section-head { max-width: 46rem; margin-bottom: clamp(32px, 5vw, 56px); }
  .section-head--center { margin-inline: auto; text-align: center; }

  .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display);
    font-size: var(--fs-eyebrow);
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--green-700);
    margin-bottom: 16px;
  }
  .section--dark .eyebrow { color: var(--sage-400); }

  .lead { font-size: var(--fs-lead); line-height: 1.65; letter-spacing: -0.01em; color: var(--text-secondary); }
  .section--dark .lead { color: var(--on-dark-muted); }

  .grid { display: grid; gap: clamp(20px, 3vw, 32px); grid-template-columns: 1fr; }
  .grid--2 { grid-template-columns: 1fr; }
  .grid--3 { grid-template-columns: 1fr; }
  .grid--4 { grid-template-columns: 1fr; }
  @media (min-width: 640px) {
    .grid--2 { grid-template-columns: repeat(2, 1fr); }
    .grid--4 { grid-template-columns: repeat(2, 1fr); }
  }
  @media (min-width: 900px) {
    .grid--3 { grid-template-columns: repeat(3, 1fr); }
    .grid--4 { grid-template-columns: repeat(4, 1fr); }
  }

  .split {
    display: grid;
    gap: clamp(32px, 5vw, 72px);
    grid-template-columns: 1fr;
    align-items: center;
  }
  @media (min-width: 900px) {
    .split { grid-template-columns: 1fr 1fr; }
    .split--reverse > :first-child { order: 2; }
  }
  .split--top { align-items: start; }
  /* Editorial split — gives the image column a touch more visual weight than
     a plain 50/50, for sections built around a strong landscape photo rather
     than a diagram/screenshot. */
  @media (min-width: 900px) {
    .split--editorial { grid-template-columns: 0.92fr 1.08fr; gap: clamp(40px, 6vw, 80px); }
    .split--editorial.split--reverse { grid-template-columns: 1.08fr 0.92fr; }
  }

  .stack { display: flex; flex-direction: column; gap: 16px; }
  .cluster { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

  .media-frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--radius-xl);
    background: var(--sand-200);
  }
  .media-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-image) var(--ease-out); }
  .media-frame:hover img { transform: scale(1.05); }
  /* Landscape editorial treatment — fixed aspect-ratio (not "whatever the
     source image is") so the crop is intentional at every breakpoint, plus a
     hairline border and deeper shadow so it reads as a deliberately placed
     photograph rather than a stretched thumbnail. */
  .media-frame--landscape {
    aspect-ratio: 3 / 2;
    border: 1px solid var(--sand-200);
    box-shadow: var(--shadow-card);
  }
  @media (max-width: 640px) {
    .media-frame--landscape { aspect-ratio: 4 / 3; }
  }
  /* Portrait/vertical editorial treatment — same fixed-crop discipline as
     --landscape, just tall instead of wide, for sections built around a
     single upright photo next to a compact text/card column. */
  .media-frame--portrait {
    aspect-ratio: 3 / 4;
    border: 1px solid var(--sand-200);
    box-shadow: var(--shadow-card);
  }
  @media (max-width: 640px) {
    /* Stay vertical on mobile too (unlike --landscape, which flips to a
       shorter ratio there) — a portrait frame going wide on small screens
       would defeat the point of it being vertical; just relax the ratio
       slightly so it doesn't get too tall in a single-column layout. */
    .media-frame--portrait { aspect-ratio: 4 / 5; }
  }

  .empty-state { text-align: center; padding: clamp(48px, 8vw, 96px) 24px; color: var(--text-muted); }

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

  .skip-link {
    position: absolute; top: -48px; left: 16px; z-index: var(--z-toast);
    background: var(--navy-900); color: var(--cream); padding: 12px 20px;
    border-radius: var(--radius-sm); transition: top var(--dur-micro);
  }
  .skip-link:focus { top: 16px; color: var(--cream); }
}

/* ==========================================================================
   5. COMPONENTS
   ========================================================================== */
@layer components {

  /* --- Buttons ------------------------------------------------------ */
  .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body);
    font-weight: 500;
    font-size: var(--fs-ui);
    white-space: nowrap;
    transition: background var(--dur-micro), color var(--dur-micro), border-color var(--dur-micro), box-shadow var(--dur-micro), transform var(--dur-micro);
  }
  .btn--primary {
    background: var(--navy-900);
    color: var(--cream);
    padding: 11px 22px;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
  }
  .btn--primary:hover {
    background: var(--green-700);
    color: var(--cream);
    box-shadow: 0 12px 28px -12px color-mix(in srgb, var(--green-700) 50%, transparent);
  }
  .btn--secondary {
    background: transparent;
    color: var(--navy-900);
    padding: 15px 30px;
    border-radius: var(--radius-md);
    border: 1px solid var(--sand-300);
  }
  .btn--secondary:hover { border-color: var(--navy-900); background: var(--sand); color: var(--navy-900); }
  .section--dark .btn--secondary { color: var(--cream); border-color: var(--border-dark); }
  .section--dark .btn--secondary:hover { background: rgba(251,250,247,.08); border-color: var(--sage-400); color: var(--cream); }
  .btn--on-dark.btn--primary { background: var(--cream); color: var(--navy-900); }
  .btn--on-dark.btn--primary:hover { background: var(--sage-400); color: var(--navy-900); }
  .btn--block { display: flex; width: 100%; }
  .btn--sm { padding: 9px 16px; font-size: var(--fs-meta); }
  .btn:disabled { opacity: .5; cursor: not-allowed; }

  .link-arrow {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 500; color: var(--text-primary);
  }
  .link-arrow svg { transition: transform var(--dur-micro) var(--ease-out); }
  .link-arrow:hover svg { transform: translateX(4px); }
  .link-arrow:hover { color: var(--green-700); }

  /* --- Header --------------------------------------------------------- */
  .site-header {
    position: sticky; top: 0; z-index: var(--z-sticky);
    background: rgba(251, 250, 247, .85);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: var(--border-w) solid var(--sand-200);
  }
  .site-header__inner {
    display: flex; align-items: center; justify-content: space-between;
    gap: 24px; padding-block: 16px; min-height: 72px;
    /* Positioning context for .mega-panel (see below) — centering the panel
       on this instead of on the individual trigger button keeps it inside
       the header's own (viewport-centered, max-width-capped) box no matter
       which nav item opens it or how close to the left edge that item
       sits. */
    position: relative;
  }
  .brand { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 19px; color: var(--navy-900); }
  .brand__mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: var(--radius-sm);
    background: var(--navy-900); color: var(--cream); flex-shrink: 0;
  }
  .brand__mark svg { width: 18px; height: 18px; }

  .primary-nav { display: none; align-items: center; gap: 4px; }
  @media (min-width: 1024px) { .primary-nav { display: flex; } }
  .primary-nav__link {
    padding: 10px 14px; border-radius: var(--radius-sm);
    font-size: var(--fs-ui); font-weight: 500; color: var(--ink-600);
    display: inline-flex; align-items: center; gap: 4px;
  }
  .primary-nav__link:hover, .primary-nav__link[aria-current="page"] { color: var(--navy-900); }

  .mega-trigger { /* no position:relative here — .mega-panel is positioned against .site-header__inner instead, see below */ }
  .mega-panel {
    /* Positioned relative to .site-header__inner (nearest [position]
       ancestor, since .mega-trigger no longer sets one), not the trigger
       button — a 960px panel centered on a button that sits near the left
       edge of the header would spill off the left edge of the viewport
       (found and fixed in the same pass as the widening below). Centering
       on the header's own box instead keeps it within the header's
       viewport-centered, max-width-capped bounds regardless of which nav
       item opens it.
       top: calc(100% - 16px) instead of a bare 100% — .site-header__inner
       has padding-block:16px, and the trigger (vertically centered inside
       that padded box, via align-items:center) naturally sits flush with
       the CONTENT box's bottom edge, not the padded/bordered box's bottom
       edge that "100%" resolves to. Subtracting that same 16px lands the
       panel exactly flush with the trigger's real bottom edge instead of
       leaving a 16px dead strip that belongs to neither element — the
       same "gap between button and panel closes the menu on the way
       through" bug as the old `calc(100% + 12px)` had, just reintroduced
       vertically by moving the panel's positioning context up to the
       header for the horizontal fix above. (Tied to .site-header__inner's
       padding-block value — if that ever changes, update this too.) */
    position: absolute; top: calc(100% - 16px); left: 50%; transform: translateX(-50%);
    /* Was min(760px, 90vw) — the same number as --container-narrow, which
       made a 4-column layout read as cramped. Widened so each column has
       real room to breathe. */
    width: min(960px, 92vw);
    background: var(--cream); border: 1px solid var(--sand-200); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-float);
    padding: 40px 32px 28px; opacity: 0; visibility: hidden; pointer-events: none;
    transition: opacity var(--dur-micro), transform var(--dur-micro);
    transform-origin: top center;
  }
  /* Keyed off [data-menu-open] on the .mega-trigger wrapper (set by
     initMegaMenu() in hirepay.js), not aria-expanded — that attribute lives
     on the trigger *button* (correct a11y target), which is a sibling of
     .mega-panel, not an ancestor, so a selector checking it here could
     never match. See the comment in hirepay.js for the full story. */
  .mega-trigger[data-menu-open="true"] .mega-panel {
    opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
  }
  .mega-panel__inner { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px 32px; }
  .mega-panel__col-title {
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px;
    color: var(--text-muted); margin-bottom: 12px;
  }
  .mega-panel__link {
    display: flex; align-items: flex-start; gap: 10px; padding: 8px; border-radius: var(--radius-sm);
    margin-inline: -8px;
  }
  .mega-panel__link:hover { background: var(--sand); }
  .mega-panel__link svg { flex-shrink: 0; margin-top: 2px; color: var(--green-700); }
  .mega-panel__link-title { font-size: var(--fs-body-sm); font-weight: 600; color: var(--navy-900); display: block; }
  .mega-panel__link-desc { font-size: 12.5px; color: var(--text-muted); display: block; margin-top: 2px; }

  .header-cta { display: flex; align-items: center; gap: 12px; }
  /* Hide the "Book a demo" button itself on the narrowest phones (the
     mobile drawer has its own full-width copy) — was keyed to .btn--secondary
     when this button used that style; kept keyed to .btn now that it's
     .btn--primary, and written generically so it isn't tied to either. */
  .header-cta > a.btn { display: none; }
  @media (min-width: 640px) { .header-cta > a.btn { display: inline-flex; } }
  /* "Customer Login" button — only shown once the full desktop nav is present
     (1024px+); below that it lives in the mobile drawer instead, same as
     Pricing/About/etc., so the header-cta bar doesn't get crowded on
     phones/tablets. It's now a real .btn (see public-header.blade.php), so
     these selectors have to out-specify ".header-cta > a.btn" above —
     otherwise that generic rule would win the display:none/inline-flex tie
     and show this button at 640px instead of 1024px. */
  .header-cta > a.header-cta__login { display: none; }
  @media (min-width: 1024px) { .header-cta > a.header-cta__login { display: inline-flex; } }

  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: var(--radius-sm);
  }
  @media (min-width: 1024px) { .nav-toggle { display: none; } }
  .nav-toggle:hover { background: var(--sand); }

  .mobile-drawer {
    position: fixed; inset: 0; z-index: var(--z-modal); visibility: hidden;
  }
  .mobile-drawer[data-open="true"] { visibility: visible; }
  .mobile-drawer__scrim {
    position: absolute; inset: 0; background: rgba(11,31,51,.5);
    opacity: 0; transition: opacity var(--dur-micro);
  }
  .mobile-drawer[data-open="true"] .mobile-drawer__scrim { opacity: 1; }
  .mobile-drawer__panel {
    position: absolute; top: 0; right: 0; bottom: 0; width: min(340px, 85vw);
    background: var(--cream); padding: 24px; overflow-y: auto;
    transform: translateX(100%); transition: transform var(--dur-reveal) var(--ease-out);
    display: flex; flex-direction: column; gap: 24px;
  }
  .mobile-drawer[data-open="true"] .mobile-drawer__panel { transform: translateX(0); }
  .mobile-drawer__link { display: block; padding: 12px 4px; font-size: 1.0625rem; font-weight: 500; border-bottom: 1px solid var(--sand-200); }
  /* Collapsible nav group inside the drawer — the small-screen counterpart
     to the desktop mega panel (which lives in .primary-nav and is
     display:none below 1024px, so none of its links were reachable on a
     phone). Built on native <details>/<summary>, the same disclosure
     primitive the FAQ accordion uses, which means: no JS at all, works
     with scripts disabled, and keyboard + screen-reader semantics come
     from the browser for free. Safe alongside initMobileDrawer() too —
     that only closes on [data-drawer-close] and Escape, never on a generic
     click inside the panel, so toggling a group can't dismiss the drawer. */
  .mobile-drawer__summary {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    cursor: pointer; list-style: none;
  }
  .mobile-drawer__summary::-webkit-details-marker { display: none; }
  .mobile-drawer__summary svg { color: var(--text-muted); flex-shrink: 0; transition: transform var(--dur-micro); }
  .mobile-drawer__group[open] .mobile-drawer__summary svg { transform: rotate(180deg); }
  /* Open state hands its bottom rule to .mobile-drawer__sub below, so the
     group still reads as one bordered row instead of showing a doubled
     hairline above the revealed sub-list. */
  .mobile-drawer__group[open] .mobile-drawer__summary { border-bottom-color: transparent; }
  .mobile-drawer__sub { padding: 2px 0 14px 4px; border-bottom: 1px solid var(--sand-200); }
  .mobile-drawer__sub-title {
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 1.5px;
    color: var(--text-muted); margin: 16px 0 2px;
  }
  /* ~46px tall including line box — comfortably above the 44px touch-target
     floor, while still reading as subordinate to the top-level links. */
  .mobile-drawer__sublink { display: block; padding: 10px 0; font-size: var(--fs-body-sm); color: var(--text-secondary); }
  .mobile-drawer__sublink:hover { color: var(--navy-900); }

  /* --- Footer --------------------------------------------------------- */
  .site-footer { background: var(--navy-900); color: var(--on-dark-muted); }
  .footer-grid { display: grid; gap: 40px; grid-template-columns: 1fr; padding-block: 72px 48px; }
  @media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr repeat(3, 1fr); } }
  .footer-brand .brand { color: var(--cream); }
  .footer-brand__desc { margin-top: 16px; max-width: 32ch; color: var(--on-dark-muted); font-size: var(--fs-body-sm); }
  .footer-social { display: flex; gap: 10px; margin-top: 20px; }
  .footer-social__link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; border-radius: var(--radius-full);
    border: 1px solid var(--border-dark); color: var(--on-dark-faint);
  }
  .footer-social__link:hover { border-color: var(--sage-400); color: var(--sage-400); }
  .footer-col-title { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-meta); letter-spacing: 1.5px; text-transform: uppercase; color: var(--sage-400); margin-bottom: 16px; }
  .footer-links { display: flex; flex-direction: column; gap: 10px; }
  .footer-links a { color: var(--on-dark-muted); font-size: var(--fs-body-sm); }
  .footer-links a:hover { color: var(--cream); }
  .footer-bottom {
    display: flex; flex-direction: column; gap: 12px; padding-block: 24px;
    border-top: 1px solid var(--border-dark); font-size: var(--fs-meta);
  }
  @media (min-width: 640px) { .footer-bottom { flex-direction: row; align-items: center; justify-content: space-between; } }
  .footer-bottom__legal { display: flex; gap: 20px; }
  .footer-bottom__legal a { color: var(--on-dark-faint); }
  .footer-bottom__legal a:hover { color: var(--cream); }

  .cta-bar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky);
    background: var(--cream); border-top: 1px solid var(--sand-200);
    padding: 12px var(--gutter); box-shadow: 0 -8px 24px -12px rgba(11,31,51,.15);
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    transform: translateY(100%); transition: transform var(--dur-reveal) var(--ease-out);
  }
  .cta-bar[data-visible="true"] { transform: translateY(0); }
  @media (min-width: 900px) { .cta-bar { display: none; } }

  .scroll-top-btn {
    position: fixed; right: 20px; bottom: 20px; z-index: var(--z-raised);
    width: 44px; height: 44px; border-radius: var(--radius-full);
    background: var(--navy-900); color: var(--cream);
    display: inline-flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity var(--dur-micro), transform var(--dur-micro), background var(--dur-micro);
    box-shadow: var(--shadow-card);
  }
  .scroll-top-btn[data-visible="true"] { opacity: 1; visibility: visible; transform: none; }
  .scroll-top-btn:hover { background: var(--green-700); }

  /* --- Cards ------------------------------------------------------------ */
  .card {
    background: var(--surface-card); border: 1px solid var(--sand-200);
    border-radius: var(--radius-2xl); padding: 32px;
  }
  .card--dark { background: var(--navy-800); border-color: var(--border-dark); color: var(--on-dark-muted); }
  .card--dark h3, .card--dark h4 { color: var(--cream); }
  .card--featured {
    background: var(--navy-900); color: var(--on-dark-muted);
    border-radius: var(--radius-2xl); padding: 40px; position: relative; overflow: hidden;
  }
  .card--featured h3, .card--featured h4 { color: var(--cream); }
  .card--tinted { background: var(--mint-50); border-color: transparent; }
  .card--interactive { transition: border-color var(--dur-micro), transform var(--dur-micro), box-shadow var(--dur-micro); }
  .card--interactive:hover { border-color: var(--navy-900); transform: translateY(-2px); box-shadow: var(--shadow-card); }

  .card-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border-radius: var(--radius-md);
    background: var(--mint-50); color: var(--green-700); margin-bottom: 16px;
  }
  .card--dark .card-icon, .card--featured .card-icon { background: rgba(251,250,247,.1); color: var(--sage-400); }

  .image-card {
    position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 4 / 5;
  }
  .image-card img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-image) var(--ease-out); }
  .image-card:hover img { transform: scale(1.06); }
  .image-card::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(11,31,51,0) 40%, rgba(11,31,51,.82) 100%);
  }
  .image-card__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px; z-index: 1; color: var(--cream); }
  .image-card__caption h4 { color: var(--cream); font-size: 1.125rem; margin-bottom: 4px; }
  .image-card__caption p { color: var(--on-dark-muted); font-size: var(--fs-meta); }

  .stat-band { display: flex; flex-wrap: wrap; gap: 32px 48px; justify-content: space-between; }
  .stat { display: flex; align-items: center; gap: 12px; }
  .stat__value { font-family: var(--font-display); font-weight: 600; font-size: 1.75rem; color: var(--navy-900); }
  .section--dark .stat__value { color: var(--cream); }
  .stat__label { font-size: var(--fs-meta); color: var(--text-muted); max-width: 14ch; }
  .section--dark .stat__label { color: var(--on-dark-faint); }
  .stat__icon { color: var(--green-700); }

  .testimonial {
    background: var(--surface-card); border-radius: var(--radius-2xl); padding: 36px;
    box-shadow: var(--shadow-card); position: relative;
  }
  .testimonial__quote-mark { font-family: var(--font-display); font-size: 3.5rem; line-height: 1; color: var(--green-700); opacity: .5; margin-bottom: 8px; }
  .testimonial__body { font-size: 1.0625rem; color: var(--text-primary); margin-bottom: 24px; }
  .testimonial__author { display: flex; align-items: center; gap: 12px; }
  .testimonial__avatar {
    width: 44px; height: 44px; border-radius: var(--radius-full);
    background: var(--navy-900); color: var(--cream);
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 600; font-size: var(--fs-meta); flex-shrink: 0;
  }
  .testimonial__name { font-weight: 600; color: var(--navy-900); font-size: var(--fs-body-sm); }
  .testimonial__role { font-size: var(--fs-meta); color: var(--text-muted); }

  .blog-card { display: block; border-radius: var(--radius-xl); overflow: hidden; border: 1px solid var(--sand-200); background: var(--surface-card); }
  .blog-card__image-wrap { aspect-ratio: 16 / 10; overflow: hidden; background: var(--sand-200); position: relative; }
  .blog-card__image-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-image) var(--ease-out); }
  .blog-card:hover .blog-card__image-wrap img { transform: scale(1.05); }
  .blog-card__badge {
    position: absolute; top: 12px; left: 12px; background: var(--cream); color: var(--navy-900);
    font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
    padding: 5px 10px; border-radius: 999px;
  }
  .blog-card__body { padding: 20px; }
  .blog-card__title { font-size: 1.125rem; margin-bottom: 8px; color: var(--navy-900); }
  .blog-card__excerpt { font-size: var(--fs-body-sm); color: var(--text-secondary); }
  .blog-card__meta { display: flex; gap: 10px; align-items: center; font-size: var(--fs-meta); color: var(--text-muted); margin-top: 12px; }

  .blog-card--featured { display: grid; grid-template-columns: 1fr; }
  @media (min-width: 768px) { .blog-card--featured { grid-template-columns: 1.2fr 1fr; } .blog-card--featured .blog-card__image-wrap { aspect-ratio: auto; height: 100%; } }
  /* Featured article gets its own type scale (bigger title, roomier body,
     larger excerpt) instead of reusing the compact grid-card sizing — it's
     meant to visually dominate the page after the hero, per the editorial
     brief, not read as "just another card". */
  .blog-card--featured .blog-card__body { display: flex; flex-direction: column; justify-content: center; padding: 28px 28px 32px; }
  @media (min-width: 768px) { .blog-card--featured .blog-card__body { padding: 40px 48px; } }
  .blog-card--featured .blog-card__title { font-size: clamp(1.5rem, 1.15rem + 1.8vw, 2.125rem); margin-bottom: 14px; }
  .blog-card--featured .blog-card__excerpt { font-size: var(--fs-body); }
  .blog-card--featured .blog-card__cta { margin-top: 20px; }

  .contact-info-card { display: flex; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--sand-200); transition: padding-left var(--dur-micro); }
  .contact-info-card:last-child { border-bottom: none; }
  .contact-info-card:hover { padding-left: 6px; }
  .contact-info-card__icon {
    width: 44px; height: 44px; border-radius: var(--radius-md); background: var(--mint-50); color: var(--green-700);
    display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
    transition: background var(--dur-micro), color var(--dur-micro);
  }
  .contact-info-card:hover .contact-info-card__icon { background: var(--green-700); color: var(--cream); }
  .contact-info-card__title { font-weight: 600; color: var(--navy-900); margin-bottom: 4px; }

  /* Quick-contact cards — the hero→form transition, same "elevated panel
     over a dark band" language as Pricing's currency bar, just 3-up instead
     of a single control. Each links straight to an existing, real contact
     path (tel:/mailto:/the demo-request route) — no new functionality. */
  .contact-quick-links {
    position: relative; z-index: 2;
    max-width: 980px; margin: -52px auto 0;
    display: grid; grid-template-columns: 1fr; gap: 16px;
  }
  @media (min-width: 700px) { .contact-quick-links { grid-template-columns: repeat(3, 1fr); } }
  .contact-quick-link {
    background: var(--surface-card); border: 1px solid var(--sand-200); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-float); padding: 24px; text-align: center;
    transition: border-color var(--dur-micro), transform var(--dur-micro);
  }
  .contact-quick-link:hover { border-color: var(--navy-900); transform: translateY(-3px); }
  .contact-quick-link .card-icon { margin-inline: auto; }
  .contact-quick-link__title { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; color: var(--navy-900); margin: 12px 0 4px; }
  .contact-quick-link__desc { font-size: var(--fs-meta); color: var(--text-muted); }
  @media (max-width: 480px) {
    .contact-quick-links { margin-top: -36px; }
    .contact-quick-link { padding: 18px; }
  }

  /* Small uppercase micro-label above a form field group (e.g. "Your
     details" / "Your company" / "Your enquiry") — reuses the eyebrow type
     scale at a smaller size so it doesn't compete with the card's own h2. */
  .field-group-label {
    font-family: var(--font-display); font-weight: 600; font-size: 11px;
    letter-spacing: 1.5px; text-transform: uppercase; color: var(--text-muted);
    margin-bottom: 12px; margin-top: 28px;
  }
  .field-group-label:first-child { margin-top: 0; }

  .definition-card { padding: 24px; border-radius: var(--radius-lg); background: var(--sand); }
  .definition-card__term { font-family: var(--font-display); font-weight: 600; margin-bottom: 8px; }

  .feature-card { padding: 20px; border-radius: var(--radius-lg); border: 1px solid var(--sand-200); background: var(--surface-card); }
  .feature-card h4 { font-size: 1rem; margin-bottom: 6px; }
  .feature-card .card-icon { margin-bottom: 12px; width: 36px; height: 36px; }

  /* --- Value cards (About page) — ghost-numeral card, the ledger-style
         numeral treatment from the design system's "process timeline" spec
         (Space Grotesk 600, ~64-80px, sand-200) reused here as an oversized
         card watermark instead of a sidebar numeral. A steady 2×2 at every
         width that fits 2 columns (tablet and desktop alike) rather than
         going to 4-across — larger cards read better than a thin single
         row, and it's a size step up from tablet to desktop instead of an
         extra column. Single column only on the narrowest phones. --------- */
  .value-cards { display: grid; grid-template-columns: 1fr; gap: 20px; }
  @media (min-width: 560px) { .value-cards { grid-template-columns: repeat(2, 1fr); gap: 24px; } }
  @media (min-width: 1024px) { .value-cards { gap: 32px; max-width: 980px; margin-inline: auto; } }
  .value-card {
    position: relative;
    background: var(--surface-card);
    border: 1px solid var(--sand-200);
    border-radius: var(--radius-xl);
    padding: 28px 24px;
    overflow: hidden;
    transition: border-color var(--dur-micro), transform var(--dur-micro), box-shadow var(--dur-micro);
  }
  .value-card:hover { border-color: var(--navy-900); transform: translateY(-4px); box-shadow: var(--shadow-card); }
  .value-card__num {
    position: absolute; top: -8px; right: 10px;
    font-family: var(--font-display); font-weight: 600; font-size: 4.5rem; line-height: 1;
    color: var(--sand-200); z-index: 0; user-select: none;
  }
  .value-card__icon, .value-card__title, .value-card__desc { position: relative; z-index: 1; }
  .value-card__title { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; color: var(--navy-900); margin-bottom: 8px; margin-top: 4px; }
  .value-card__desc { font-size: var(--fs-body-sm); color: var(--text-secondary); line-height: 1.65; }
  /* Bigger cards on large screens — more breathing room, a larger ghost
     numeral/icon/title so the 2×2 reads as deliberately spacious rather
     than just "2×2 of the mobile card". */
  @media (min-width: 1024px) {
    .value-card { padding: 44px 40px; }
    .value-card__num { font-size: 6rem; top: -12px; right: 16px; }
    .value-card .card-icon { width: 52px; height: 52px; margin-bottom: 20px; }
    .value-card__title { font-size: 1.375rem; margin-bottom: 12px; }
    .value-card__desc { font-size: var(--fs-body); }
  }

  /* --- Team grid (About) -------------------------------------------------
         Flex rather than .grid--3 because the team is an odd count (5): a
         3-column grid leaves the final two cards stranded against the left
         edge with a visible hole on the right. Centred flex wrapping puts
         3 on the first row and centres the remaining 2 beneath them, so
         any headcount reads as deliberate. max-width keeps a lone trailing
         card from stretching to full width. */
  .team-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(20px, 3vw, 32px); }
  .team-grid > * { flex: 1 1 300px; max-width: 380px; }

  /* --- Module cards (Product section) -----------------------------------
         Shared card for every "pick a thing and go there" grid across the
         Product ecosystem — modules on the /product gateway, supported
         countries, free tools. Rendered by the <x-public.module-card>
         Blade component. .module-grid is 3-up; --4 is for four-item sets.
         Deliberately close cousins of .value-card (About) rather than a
         new visual idea: same radius, hairline, hover-lift and icon chip,
         differing only in carrying a CTA row instead of a ghost numeral. */
  .module-grid { display: grid; grid-template-columns: 1fr; gap: 20px; }
  @media (min-width: 768px) { .module-grid { grid-template-columns: repeat(3, 1fr); gap: 24px; } }
  .module-grid--4 { grid-template-columns: 1fr; }
  @media (min-width: 640px) { .module-grid--4 { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1024px) { .module-grid--4 { grid-template-columns: repeat(4, 1fr); } }

  .module-card {
    display: flex; flex-direction: column;
    background: var(--surface-card);
    border: 1px solid var(--sand-200);
    border-radius: var(--radius-xl);
    padding: 30px 26px;
    transition: border-color var(--dur-micro), transform var(--dur-micro), box-shadow var(--dur-micro);
  }
  a.module-card:hover { border-color: var(--navy-900); transform: translateY(-4px); box-shadow: var(--shadow-card); }
  .module-card__icon { margin-bottom: 18px; }
  .module-card__title { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; color: var(--navy-900); margin-bottom: 8px; }
  .module-card__desc { font-size: var(--fs-body-sm); color: var(--text-secondary); line-height: 1.65; }
  /* margin-top:auto pins the CTA to the card's bottom edge so a row of
     cards with uneven description lengths still aligns its actions. */
  .module-card__cta {
    display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 20px;
    font-size: var(--fs-ui); font-weight: 500; color: var(--green-700);
  }
  .module-card__cta svg { transition: transform var(--dur-micro) var(--ease-out); }
  a.module-card:hover .module-card__cta svg { transform: translateX(4px); }
  /* On-dark variant — same card inside a .section--dark band. */
  .section--dark .module-card { background: var(--navy-800); border-color: var(--border-dark); }
  .section--dark .module-card__title { color: var(--cream); }
  .section--dark .module-card__desc { color: var(--on-dark-muted); }
  .section--dark .module-card__cta { color: var(--sage-400); }
  .section--dark a.module-card:hover { border-color: var(--sage-400); }

  /* --- Numbered rows / process timeline --------------------------------- */
  .row-list { display: flex; flex-direction: column; }
  .row-item {
    display: grid; grid-template-columns: 2.5rem 1fr auto; gap: 16px; align-items: center;
    padding: 20px 12px; border-top: 1px solid var(--sand-200);
    transition: padding-left var(--dur-micro), background var(--dur-micro);
  }
  .row-item:last-child { border-bottom: 1px solid var(--sand-200); }
  .row-item:hover { padding-left: 22px; background: #F7F3EA; }
  .section--dark .row-item { border-color: var(--border-dark); }
  .section--dark .row-item:hover { background: rgba(251,250,247,.04); }
  .row-item__num { font-family: var(--font-display); font-weight: 600; color: var(--text-muted); font-size: var(--fs-body-sm); }
  .row-item__title { font-weight: 600; color: var(--navy-900); margin-bottom: 2px; }
  .section--dark .row-item__title { color: var(--cream); }
  .row-item__desc { font-size: var(--fs-body-sm); color: var(--text-secondary); }
  .section--dark .row-item__desc { color: var(--on-dark-muted); }
  .row-item__arrow { color: var(--text-muted); transition: transform var(--dur-micro) var(--ease-out); }
  .row-item:hover .row-item__arrow { transform: translateX(4px); color: var(--green-700); }

  /* --- Security cards (horizontal 3-up stack, dark band) ----------------
     Filled navy cards instead of the thin hairline-divided row-list — a
     row of 3 side-by-side on desktop, stacking to a single column on small
     screens so nothing gets cramped. */
  .security-cards {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    max-width: 980px;
    margin-inline: auto;
  }
  @media (min-width: 640px) {
    .security-cards { grid-template-columns: repeat(3, 1fr); gap: 16px; }
  }
  @media (min-width: 1024px) {
    .security-cards { gap: 24px; }
  }
  .security-card {
    position: relative;
    background: var(--navy-800);
    border: 1px solid var(--border-dark);
    border-radius: var(--radius-xl);
    padding: 28px 24px;
    transition: border-color var(--dur-micro), transform var(--dur-micro), background var(--dur-micro);
  }
  .security-card:hover {
    border-color: var(--sage-400);
    background: rgba(251,250,247,.05);
    transform: translateY(-4px);
  }
  .security-card__num {
    position: absolute; top: 22px; right: 24px;
    font-family: var(--font-display); font-weight: 600; font-size: 1.25rem;
    color: rgba(251,250,247,.22);
  }
  .security-card__icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; border-radius: var(--radius-md);
    background: rgba(251,250,247,.1); color: var(--sage-400);
    margin-bottom: 20px;
  }
  .security-card__title {
    font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem;
    color: var(--cream); margin-bottom: 8px;
  }
  .security-card__desc { font-size: var(--fs-body-sm); color: var(--on-dark-muted); line-height: 1.65; }

  .timeline { position: relative; padding-left: 48px; }
  .timeline::before {
    content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--sand-300);
  }
  .timeline-item { position: relative; padding-bottom: 48px; }
  .timeline-item:last-child { padding-bottom: 0; }
  .timeline-item::before {
    content: ""; position: absolute; left: -48px; top: 4px; width: 16px; height: 16px; border-radius: 50%;
    background: var(--cream); border: 2px solid var(--green-700);
  }
  .timeline-item__ghost {
    position: absolute; left: -8px; top: -24px; font-family: var(--font-display); font-weight: 600;
    font-size: clamp(48px, 6vw, 72px); color: var(--sand-200); z-index: 0; line-height: 1; user-select: none;
  }
  .timeline-item__content { position: relative; z-index: 1; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
  .timeline-item__title { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin-bottom: 6px; }
  .timeline-item__desc { color: var(--text-secondary); max-width: 48ch; }
  .timeline-item__meta { font-size: var(--fs-meta); color: var(--text-muted); white-space: nowrap; }

  /* --- Hero blocks -------------------------------------------------------- */
  /* Intelligent full-screen composition: min-height (never a hard/clipping
     height) so overflowing content simply grows the section instead of being
     cropped. ~95vh only from desktop widths up; tablet/mobile size to content
     so nothing gets clipped on short viewports. See docs — Homepage
     Refinement brief, §2. */
  .hero {
    /* Tightened from the section-wide hero padding token — the stats band
       now living inside the hero needs the vertical room, and this keeps
       the whole hero (headline through stats) fitting in the first view on
       typical laptop screens instead of pushing the stats row below the fold. */
    padding-block: clamp(32px, 5vw, 56px) clamp(24px, 3vw, 40px);
    overflow: hidden;
    display: flex;
    align-items: center;
  }
  @media (min-width: 1024px) {
    /* Reduced from 95vh — the in-hero stats row (below) needs the room, and
       a slightly shorter hero still reads as full-screen without crowding. */
    .hero { min-height: 88vh; }
  }
  @media (min-width: 640px) and (max-width: 1023px) {
    .hero { min-height: 82vh; }
  }
  .hero .split { width: 100%; }
  .hero__title { margin-bottom: 12px; }
  .hero__lead { margin-bottom: 32px; max-width: 42ch; }
  .hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 16px; }
  .hero__trust { display: flex; flex-wrap: wrap; gap: 20px; font-size: var(--fs-meta); color: var(--text-muted); }
  .hero__trust-item { display: inline-flex; align-items: center; gap: 6px; }
  .hero__trust-item svg { color: var(--green-700); }

  /* Stats row, moved inside the hero itself (see home.blade.php) — spans
     both columns of the .split grid and sits below them as a dark navy band
     (same navy as the rest of the system, e.g. .section--dark/.card--dark),
     so it reads as a distinct "proof" strip rather than blending into the
     cream hero background. No scroll-reveal — always visible on load.
     A real grid (not flex-wrap) so the 4 items form a clean, evenly-aligned
     2x2 block on narrow screens instead of an uneven wrap; widens to a
     single row of 4 once there's room for it. */
  .hero__stats {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 20px;
    align-items: center;
    margin-top: clamp(16px, 2vw, 24px);
    padding: 16px clamp(16px, 3vw, 28px);
    background: var(--navy-900);
    border-radius: var(--radius-lg);
  }
  @media (min-width: 640px) {
    .hero__stats { grid-template-columns: repeat(4, 1fr); gap: 14px 24px; padding: 14px clamp(20px, 3vw, 28px); }
  }
  /* Centered, larger icon+numeral treatment — reads more like a proof
     "stat band" now, less like a compact trust line. */
  .hero__stats { justify-items: center; }
  .hero__stats .trust-strip__item { justify-content: center; text-align: center; }
  .hero__stats .trust-strip__item svg { color: var(--sage-400); width: 26px; height: 26px; flex-shrink: 0; }
  .hero__stats .trust-strip__item-label { color: var(--cream); font-size: 1.25rem; }
  .hero__stats .trust-strip__item-sub { color: var(--on-dark-faint); }
  @media (max-width: 480px) {
    .hero__stats .trust-strip__item svg { width: 22px; height: 22px; }
    .hero__stats .trust-strip__item-label { font-size: 1.0625rem; }
  }

  /* Short-viewport adaptation — common laptop screens (e.g. 1366x768) leave
     well under 700px of usable height once browser chrome is subtracted.
     Rather than let the stats band run below the fold there, scale the
     whole hero down a notch: smaller display size, tighter rhythm. This is
     a viewport-*height* query, deliberately separate from the width
     breakpoints above. */
  @media (max-height: 760px) and (min-width: 1024px) {
    .hero { padding-block: clamp(20px, 3vh, 32px) clamp(16px, 2vh, 24px); }
    .hero__title { font-size: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); margin-bottom: 8px; }
    .hero__actions { margin-bottom: 12px; }
    .hero-panel { padding: 16px; }
    .hero-panel .field { margin-bottom: 10px; }
    .hero-panel__head { margin-bottom: 12px; }
    .hero__stats { padding: 12px clamp(16px, 2vw, 24px); margin-top: 12px; }
  }

  .hero-panel {
    background: var(--surface-card); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-float); border: 1px solid var(--sand-200);
    padding: 20px; position: relative;
    max-width: 420px; margin-inline: auto;
  }
  @media (min-width: 900px) {
    .hero-panel { max-width: none; margin-inline: 0; }
  }
  .hero-panel__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 8px; flex-wrap: wrap; }
  .hero-panel__brand { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: var(--fs-body-sm); }
  .hero-panel__meta { font-size: var(--fs-meta); color: var(--text-muted); }
  .hero-panel__figure { font-family: var(--font-display); font-weight: 600; font-size: 1.125rem; }
  .hero-panel__figure--accent { color: var(--green-700); }
  .hero-panel__results { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin-top: 14px; }
  .hero-panel__footer {
    display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--sand-200);
  }
  /* Compact field rhythm inside the hero calculator specifically — the
     global .field spacing (20px) is right for standalone forms, but this
     panel needs to stay short enough that the stats band below it lands in
     the first view on common laptop heights. */
  .hero-panel .field { margin-bottom: 14px; }

  /* Mobile: the calculator panel was reading as oversized relative to a
     375-430px viewport (padding, label size and figure size all scaled for
     desktop). Shrink the whole thing a notch so it sits comfortably in one
     screen instead of dominating it. */
  @media (max-width: 640px) {
    .hero-panel { padding: 16px; border-radius: var(--radius-lg); }
    .hero-panel__head { margin-bottom: 12px; }
    .hero-panel__brand { font-size: var(--fs-meta); }
    .hero-panel .field { margin-bottom: 12px; }
    .hero-panel .field label { font-size: var(--fs-meta); }
    .hero-panel__figure { font-size: 1rem; }
    .hero-panel__results { gap: 10px 14px; margin-top: 12px; }
    .hero-panel__footer { margin-top: 12px; padding-top: 12px; }
  }

  .page-hero { padding-block: clamp(64px, 8vw, 96px) clamp(48px, 6vw, 72px); }
  .page-hero--compact { padding-block: clamp(48px, 6vw, 72px) clamp(32px, 4vw, 48px); }
  .page-hero__title { margin-bottom: 16px; }
  .page-hero__lead { max-width: 60ch; }

  /* --- Trust strip / stat band / CTA band --------------------------------- */
  .trust-strip { background: var(--surface-alt); padding-block: 28px; }
  .trust-strip__inner { display: flex; flex-wrap: wrap; gap: 24px 40px; justify-content: space-between; align-items: center; }
  .trust-strip__item { display: flex; align-items: center; gap: 10px; }
  .trust-strip__item svg { color: var(--green-700); }
  .trust-strip__item-label { font-weight: 600; font-size: var(--fs-body-sm); color: var(--navy-900); display: block; }
  .trust-strip__item-sub { font-size: 11.5px; color: var(--text-muted); }

  /* --- Marquee / logo ticker ------------------------------------------------
     Continuous, time-based (not scroll-scrubbed — a ticker keeps moving
     regardless of scroll) horizontal scroll of wordmarks. Two identical
     .marquee__group children sit side by side and the track scrolls exactly
     -50%, so the loop point is invisible. Edges fade via mask-image rather
     than a hard clip, so items don't just vanish. */
  .marquee-band { overflow: hidden; }
  .marquee-band__head { text-align: center; margin-bottom: clamp(28px, 4vw, 40px); }
  .marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
    mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  }
  .marquee__track {
    display: flex;
    width: max-content;
    animation: marqueeScroll 34s linear infinite;
  }
  .marquee__track:hover { animation-play-state: paused; }
  .marquee__group { display: flex; align-items: center; flex-shrink: 0; }
  .marquee__item {
    display: inline-flex; align-items: center;
    font-family: var(--font-display); font-weight: 600; font-size: 1.375rem;
    letter-spacing: -0.01em; color: var(--ink-400); white-space: nowrap;
    padding-inline: 32px; opacity: .7; transition: opacity var(--dur-micro), color var(--dur-micro);
  }
  .marquee__item:not(:last-child) { border-right: 1px solid var(--sand-300); }
  .marquee__item:hover { opacity: 1; color: var(--navy-900); }
  @keyframes marqueeScroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce) {
    .marquee__track { animation: none; }
    .marquee { overflow-x: auto; }
  }
  @media (max-width: 640px) {
    .marquee__item { font-size: 1.125rem; padding-inline: 22px; }
  }

  .cta-band { text-align: center; }
  .cta-band__eyebrow { justify-content: center; }
  .cta-band__title { margin-bottom: 20px; }
  .cta-band__lead { max-width: 46ch; margin-inline: auto; margin-bottom: 36px; }

  /* Final conversion CTA with a photographic background — image + brand-tinted
     overlay + content, layered per the Homepage Refinement brief §5. The
     overlay is a near-opaque navy wash (not a decorative gradient effect) so
     it exists purely to guarantee text contrast, not to decorate. */
  .cta-image-band {
    position: relative;
    overflow: hidden;
  }
  .cta-image-band__bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  }
  .cta-image-band__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(175deg, rgba(11,31,51,.93) 0%, rgba(11,31,51,.90) 55%, rgba(11,31,51,.96) 100%);
  }
  .cta-image-band .container { position: relative; z-index: 1; }
  .cta-image-band .eyebrow { color: var(--sage-400); }
  .cta-image-band .cta-band__title { color: var(--cream); }
  .cta-image-band .cta-band__lead { color: var(--on-dark-muted); }
  /* Button treatment for BOTH photographic dark bands — the closing CTA and
     the page hero. Scoped to both selectors rather than duplicated, because
     the requirement is identical: these sections put a near-opaque navy wash
     behind their content, so the default navy-fill primary and navy-text
     secondary are effectively invisible (navy on navy).
     This originally covered .cta-image-band only, because .hero-image-band
     had no buttons on any page that used it. The Product hero was the first
     to add them, which is when "See pricing" turned up as navy text on a
     navy overlay — same bug, wider scope, hence the shared selector. */
  .cta-image-band .btn--secondary,
  .hero-image-band .btn--secondary { color: var(--cream); border-color: var(--border-dark); }
  .cta-image-band .btn--secondary:hover,
  .hero-image-band .btn--secondary:hover { background: rgba(251,250,247,.1); border-color: var(--sage-400); color: var(--cream); }
  /* "Book a free demo" is .btn--primary, which fills navy — on this band's
     near-opaque navy overlay (see .cta-image-band__overlay above) that reads
     as almost no button at all, just cream text with barely-visible edges.
     Same root cause as the header CTA fix: a dark-fill button needs a light
     fill once it sits on a dark background. Reuses the existing
     .btn--on-dark.btn--primary treatment (cream fill / navy text, sage-400
     on hover) scoped to this section instead of touching the blade markup. */
  .cta-image-band .btn--primary,
  .hero-image-band .btn--primary { background: var(--cream); color: var(--navy-900); }
  .cta-image-band .btn--primary:hover,
  .hero-image-band .btn--primary:hover { background: var(--sage-400); color: var(--navy-900); }

  /* Photographic page hero — same photo + brand-tinted overlay treatment as
     .cta-image-band above, but viewport-height driven (capped at 90vh) and
     centered instead of padding-driven, for a page hero rather than a
     closing CTA. Used on About; any other page hero can reuse it. */
  .hero-image-band {
    position: relative;
    overflow: hidden;
    height: 65vh;
    max-height: 720px;
    min-height: 400px;
    display: flex;
    align-items: center;
  }
  .hero-image-band__bg {
    position: absolute; inset: 0;
    width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  }
  .hero-image-band__overlay {
    position: absolute; inset: 0;
    background: linear-gradient(175deg, rgba(11,31,51,.88) 0%, rgba(11,31,51,.72) 55%, rgba(11,31,51,.9) 100%);
  }
  .hero-image-band .container { position: relative; z-index: 1; text-align: center; }
  .hero-image-band .eyebrow { color: var(--sage-400); justify-content: center; margin-bottom: 14px; }
  /* At 65vh there's more headroom than the earlier 40vh pass, but still not
     the full fs-display scale (up to 84px) without risking a squeeze against
     overflow:hidden on shorter/laptop-height screens — a size step between
     the two. */
  .hero-image-band h1 { color: var(--cream); font-size: clamp(2rem, 1.4rem + 3.4vw, 4rem); margin-bottom: 0; }
  .hero-image-band .lead { color: var(--on-dark-muted); max-width: 56ch; margin-inline: auto; }
  .hero-image-band .hero__trust { justify-content: center; color: var(--on-dark-faint); }
  .hero-image-band .hero__trust-item svg { color: var(--sage-400); }
  @media (max-width: 640px) {
    /* 65vh of a short mobile viewport (once browser chrome eats into it)
       can still get tight — relax the floor a little so the hero never
       feels squeezed or clips its own content. */
    .hero-image-band { min-height: 360px; }
    .hero-image-band h1 { font-size: clamp(1.75rem, 1.3rem + 4vw, 2.75rem); }
  }
  /* Taller variant — used where a page hero is meant to carry more visual
     weight (Pricing), closer to the homepage's own ~90vh hero rather than
     About's more compact 65vh. Enough headroom to run the heading back up
     near the site's full fs-display scale without crowding. */
  .hero-image-band--tall { height: 60vh; max-height: 760px; min-height: 440px; }
  .hero-image-band--tall h1 { font-size: clamp(2.25rem, 1.5rem + 4vw, 4.25rem); }
  @media (max-width: 640px) {
    .hero-image-band--tall { height: auto; min-height: 380px; max-height: none; padding-block: 56px; }
    .hero-image-band--tall h1 { font-size: clamp(1.875rem, 1.35rem + 4.5vw, 2.5rem); }
  }

  /* Transition card from the hero into the pricing grid — an elevated panel
     that overlaps the hero's bottom edge (negative margin), the same
     "floating panel over a dark band" language as the homepage's
     .hero-panel, instead of an abrupt cut from image hero to plain cards. */
  .pricing-currency-bar {
    position: relative;
    z-index: 2;
    max-width: 460px;
    margin: -44px auto 0;
    background: var(--surface-card);
    border: 1px solid var(--sand-200);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-float);
    padding: 20px 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
    text-align: center;
  }
  .pricing-currency-bar label { font-size: var(--fs-meta); font-weight: 600; color: var(--text-muted); white-space: nowrap; }
  @media (max-width: 480px) {
    .pricing-currency-bar { margin-top: -32px; padding: 16px 20px; }
  }

  /* --- Calculator widget (home hero panel reuses .hero-panel; standalone
         tool pages use this fuller variant with a results grid) ------------- */
  .calculator {
    background: var(--surface-card); border: 1px solid var(--sand-200); border-radius: var(--radius-xl);
    box-shadow: var(--shadow-card); overflow: hidden;
  }
  .calculator__header { display: flex; align-items: center; justify-content: space-between; padding: 20px 24px; border-bottom: 1px solid var(--sand-200); }
  .calculator__header-title { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
  .calculator__body { padding: 24px; }
  .calculator__results { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 20px; }
  @media (min-width: 560px) { .calculator__results { grid-template-columns: repeat(4, 1fr); } }
  .calculator__result { padding: 16px; border-radius: var(--radius-md); background: var(--sand); }
  .calculator__result--accent { background: var(--mint-50); }
  .calculator__result-label { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-bottom: 6px; }
  .calculator__result-value { font-family: var(--font-display); font-weight: 600; font-size: 1.375rem; color: var(--navy-900); }
  .calculator__footer { padding: 16px 24px; border-top: 1px solid var(--sand-200); background: var(--sand); }

  /* --- Pricing cards --------------------------------------------------------- */
  .pricing-grid { display: grid; gap: 24px; grid-template-columns: 1fr; }
  @media (min-width: 700px) { .pricing-grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1100px) { .pricing-grid { grid-template-columns: repeat(4, 1fr); } }
  .price-card {
    position: relative; background: var(--surface-card); border: 1px solid var(--sand-200);
    border-radius: var(--radius-2xl); padding: 32px 28px; display: flex; flex-direction: column;
    transition: border-color var(--dur-micro), transform var(--dur-micro), box-shadow var(--dur-micro);
  }
  .price-card:hover { border-color: var(--sand-300); transform: translateY(-4px); box-shadow: var(--shadow-card); }
  /* Recommended plan — a restrained lift (not a scale transform, which would
     resize the card's own content oddly) plus the accent border/shadow it
     already had, so it reads as "the one to pick" without shouting. */
  .price-card--popular { border-color: var(--navy-900); box-shadow: var(--shadow-float); transform: translateY(-8px); }
  @media (min-width: 1100px) {
    .price-card--popular { padding-block: 40px; }
  }
  .price-card--popular:hover { border-color: var(--navy-900); transform: translateY(-12px); }
  .price-card__badge {
    position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
    background: var(--navy-900); color: var(--cream);
    display: inline-flex; align-items: center; gap: 6px;
  }
  .price-card__name { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; margin-bottom: 4px; }
  .price-card__desc { font-size: var(--fs-body-sm); color: var(--text-muted); margin-bottom: 20px; }
  .price-card__amount { margin-bottom: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--sand-200); }
  .price-card__figure { font-family: var(--font-display); font-weight: 600; font-size: 2.25rem; color: var(--navy-900); letter-spacing: -0.02em; }
  .price-card--popular .price-card__figure { font-size: 2.5rem; }
  .price-card__period { font-size: var(--fs-body-sm); color: var(--text-muted); }
  .price-card__features { display: flex; flex-direction: column; gap: 12px; margin-bottom: 28px; flex: 1; }
  .price-card__feature { display: flex; align-items: flex-start; gap: 10px; font-size: var(--fs-body-sm); color: var(--text-secondary); transition: transform var(--dur-micro); }
  .price-card__feature svg { color: var(--green-700); flex-shrink: 0; margin-top: 2px; transition: transform var(--dur-micro); }
  .price-card__feature:hover svg { transform: scale(1.15); }

  .currency-select {
    padding: 11px 16px; border-radius: var(--radius-sm); border: 1px solid var(--sand-300);
    background: var(--cream); font-size: var(--fs-body-sm); font-weight: 500; min-width: 220px;
  }

  /* --- Forms --------------------------------------------------------------- */
  .field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
  .field-row--2 { display: grid; grid-template-columns: 1fr; gap: 20px; }
  @media (min-width: 640px) { .field-row--2 { grid-template-columns: 1fr 1fr; } }
  .field label { font-size: var(--fs-body-sm); font-weight: 500; color: var(--navy-900); }
  .field .required { color: var(--red-600); }
  .field input[type="text"], .field input[type="email"], .field input[type="tel"],
  .field input[type="number"], .field input[type="password"], .field select, .field textarea {
    width: 100%; padding: 13px 16px; border-radius: var(--radius-sm);
    border: 1px solid var(--sand-300); background: var(--cream); font-size: var(--fs-body-sm);
    color: var(--text-primary); transition: border-color var(--dur-micro), box-shadow var(--dur-micro);
  }
  .field textarea { min-height: 120px; resize: vertical; }
  .field input:focus, .field select:focus, .field textarea:focus {
    outline: none; border-color: var(--green-700); box-shadow: var(--focus-ring);
  }
  .field--error input, .field--error select, .field--error textarea { border-color: var(--red-600); }
  .field__error { font-size: var(--fs-meta); color: var(--red-600); }
  .field__hint { font-size: var(--fs-meta); color: var(--text-muted); }

  .notice { padding: 16px 20px; border-radius: var(--radius-md); font-size: var(--fs-body-sm); margin-bottom: 20px; display: flex; gap: 10px; }
  .notice--success { background: var(--mint-50); color: var(--green-800); }
  .notice--warning { background: #FBF2DE; color: #8A6212; }
  .notice--error { background: #FBEAE9; color: var(--red-600); }
  .notice__list { margin-top: 6px; padding-left: 1.2em; }

  .turnstile-wrap { margin-block: 1rem; }
  .turnstile-error { display: block; color: var(--red-600); font-size: var(--fs-meta); margin-top: 4px; }

  .step-indicator { display: flex; align-items: center; gap: 12px; margin-bottom: 32px; }
  .step-indicator__item { display: flex; align-items: center; gap: 8px; font-size: var(--fs-body-sm); color: var(--text-muted); }
  .step-indicator__num {
    width: 28px; height: 28px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid var(--sand-300); font-size: var(--fs-meta); font-weight: 600;
  }
  .step-indicator__item[data-active="true"] { color: var(--navy-900); }
  .step-indicator__item[data-active="true"] .step-indicator__num { background: var(--navy-900); border-color: var(--navy-900); color: var(--cream); }
  .step-indicator__connector { width: 32px; height: 1px; background: var(--sand-300); }

  /* --- Accordion / pill filters / badges / breadcrumb / pagination --------- */
  .accordion { display: flex; flex-direction: column; gap: 12px; }
  /* 2-column FAQ layout for the homepage's 4-item set — stays single-column
     (the default above) below 768px so small screens are unchanged. */
  @media (min-width: 768px) {
    .accordion--grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px 20px;
      align-items: start;
      max-width: 920px;
      margin-inline: auto;
    }
  }
  .accordion details {
    border: 1px solid var(--sand-200); border-radius: var(--radius-lg); padding: 4px 20px; background: var(--surface-card);
  }
  .accordion summary {
    display: flex; align-items: center; justify-content: space-between; gap: 16px;
    padding: 18px 0; font-weight: 600; color: var(--navy-900); cursor: pointer; list-style: none;
  }
  .accordion summary::-webkit-details-marker { display: none; }
  .accordion summary svg { transition: transform var(--dur-micro); flex-shrink: 0; color: var(--text-muted); }
  .accordion details[open] summary svg { transform: rotate(180deg); }
  .accordion__body { padding-bottom: 20px; color: var(--text-secondary); }

  .pill-filters { display: flex; flex-wrap: wrap; gap: 10px; }
  .pill {
    padding: 9px 18px; border-radius: 999px; border: 1px solid var(--sand-300);
    font-size: var(--fs-meta); font-weight: 500; color: var(--text-secondary);
  }
  .pill:hover { border-color: var(--navy-900); color: var(--navy-900); }
  .pill[aria-current="true"], .pill.is-active { background: var(--navy-900); border-color: var(--navy-900); color: var(--cream); }

  .badge {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
    font-size: 11px; font-weight: 600; letter-spacing: .5px; text-transform: uppercase;
  }
  .badge--brand { background: var(--mint-50); color: var(--green-800); }
  .badge--dark { background: var(--navy-900); color: var(--cream); }
  .badge--outline { border: 1px solid var(--sand-300); color: var(--text-secondary); }

  .breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding-block: 20px; font-size: var(--fs-meta); color: var(--text-muted); }
  .breadcrumb a { color: var(--text-muted); }
  .breadcrumb a:hover { color: var(--green-700); }
  .breadcrumb__sep { color: var(--sand-300); }
  .breadcrumb [aria-current="page"] { color: var(--navy-900); font-weight: 500; }

  .pagination { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 48px; }
  .pagination__link, .pagination__current, .pagination__disabled {
    min-width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm); font-size: var(--fs-body-sm); font-weight: 500;
  }
  .pagination__link { color: var(--text-secondary); border: 1px solid transparent; }
  .pagination__link:hover { border-color: var(--sand-300); color: var(--navy-900); }
  .pagination__current { background: var(--navy-900); color: var(--cream); }
  .pagination__disabled { color: var(--sand-300); }

  .section-nav {
    position: sticky; top: 88px; z-index: var(--z-raised);
    display: flex; gap: 8px; overflow-x: auto; padding-block: 16px;
    border-bottom: 1px solid var(--sand-200); background: var(--cream);
  }
  /* The inner wrapper in the blade template is a .cluster, which sets
     flex-wrap:wrap — that fought this nav's own overflow-x:auto and
     white-space:nowrap (both of which exist to make it a single scrolling
     row), so on narrow screens the links wrapped onto two lines instead.
     Because .section-nav is position:sticky, that doubled its height to
     ~125px and parked it over a sixth of a phone viewport for the whole
     page. Forcing nowrap here restores the intended single-row-that-
     scrolls behaviour. */
  .section-nav .cluster { flex-wrap: nowrap; }
  .section-nav__link {
    padding: 8px 16px; border-radius: 999px; font-size: var(--fs-meta); font-weight: 500;
    color: var(--text-secondary); white-space: nowrap; border: 1px solid transparent;
  }
  .section-nav__link:hover { border-color: var(--sand-300); }
  .section-nav__link[data-active="true"] { background: var(--navy-900); color: var(--cream); }

  /* --- Tables (feature comparison) ------------------------------------------ */
  /* Card-framed wrapper — turns the bare table into a designed panel (radius,
     border, hairline row rule already on the table itself) instead of a
     spreadsheet dropped onto the page. The horizontal-scroll wrapper in the
     blade template stays outside this, so overflow on narrow screens is
     unaffected. */
  .compare-table-card {
    background: var(--surface-card); border: 1px solid var(--sand-200);
    border-radius: var(--radius-xl); overflow: hidden;
  }
  .compare-table { width: 100%; border-collapse: collapse; font-size: var(--fs-body-sm); }
  .compare-table th, .compare-table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--sand-200); }
  .compare-table thead th { font-family: var(--font-display); font-weight: 600; color: var(--navy-900); background: var(--sand); }
  .compare-table tbody th { font-weight: 500; color: var(--text-secondary); }
  .compare-table td { text-align: center; }
  .compare-table td:first-child, .compare-table th:first-child { text-align: left; }
  .compare-table .icon-check { color: var(--green-700); }
  .compare-table .icon-dash { color: var(--sand-300); }
  .compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: none; }
  .compare-table tbody tr:hover { background: var(--surface-alt); }

  /* --- Prose / blog article / TOC -------------------------------------------- */
  .prose { max-width: var(--measure); color: var(--text-secondary); }
  .prose h2 { margin-block: 2.2em .6em; font-size: 1.75rem; }
  .prose h3 { margin-block: 1.8em .5em; font-size: 1.375rem; }
  .prose p { margin-bottom: 1.2em; }
  .prose ul, .prose ol { margin-bottom: 1.2em; padding-left: 1.4em; color: var(--text-secondary); }
  .prose li { margin-bottom: .5em; }
  .prose a { color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; }
  .prose blockquote { border-left: 3px solid var(--green-700); padding-left: 20px; font-style: italic; color: var(--navy-900); margin-block: 1.5em; }
  .prose img { border-radius: var(--radius-lg); margin-block: 1.5em; }
  .prose > *:first-child { margin-top: 0; }

  .post-layout { display: grid; gap: 48px; grid-template-columns: 1fr; }
  @media (min-width: 1024px) { .post-layout { grid-template-columns: 220px 1fr; } }
  .post-toc { position: sticky; top: 96px; align-self: start; }
  .post-toc__title { font-size: var(--fs-meta); font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text-muted); margin-bottom: 12px; }
  .post-toc__list { display: flex; flex-direction: column; gap: 8px; border-left: 2px solid var(--sand-200); }
  .post-toc__list a { padding: 4px 0 4px 16px; font-size: var(--fs-body-sm); color: var(--text-muted); border-left: 2px solid transparent; margin-left: -2px; }
  .post-toc__list a[data-active="true"] { color: var(--green-700); border-left-color: var(--green-700); font-weight: 500; }

  .author-box { display: flex; align-items: center; gap: 12px; padding-block: 24px; border-top: 1px solid var(--sand-200); margin-top: 32px; }
  .share-row { display: flex; gap: 10px; }
  .share-row a {
    width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--sand-300);
    display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary);
  }
  .share-row a:hover { border-color: var(--navy-900); color: var(--navy-900); }

  /* --- Exit-intent modal / consent banner ------------------------------------- */
  .exit-intent { position: fixed; inset: 0; z-index: var(--z-modal); display: none; align-items: center; justify-content: center; padding: 24px; }
  .exit-intent[data-visible="true"] { display: flex; }
  .exit-intent__scrim { position: absolute; inset: 0; background: rgba(11,31,51,.55); animation: ofFade var(--dur-micro) ease; }
  .exit-intent__panel {
    position: relative; z-index: 1; max-width: 440px; width: 100%; background: var(--cream);
    border-radius: var(--radius-2xl); padding: 40px; text-align: center; box-shadow: var(--shadow-float);
    animation: ofRise var(--dur-micro) var(--ease-out);
  }
  .exit-intent__close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
  .exit-intent__close:hover { background: var(--sand); }
  .exit-intent__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--mint-50); color: var(--green-700); display: inline-flex; align-items: center; justify-content: center; margin: 0 auto 20px; }
  .exit-intent__title { margin-bottom: 12px; font-size: var(--fs-h3); }
  .exit-intent__desc { color: var(--text-secondary); margin-bottom: 28px; }
  .exit-intent__actions { display: flex; flex-direction: column; gap: 12px; }
  .exit-intent__actions .btn--ghost { background: none; color: var(--text-muted); font-size: var(--fs-meta); padding: 8px; }
  .exit-intent__actions .btn--ghost:hover { color: var(--navy-900); }

  .consent-banner {
    position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: var(--z-toast);
    max-width: 560px; margin-inline: auto; background: var(--navy-900); color: var(--on-dark-muted);
    border-radius: var(--radius-xl); padding: 24px; box-shadow: var(--shadow-float);
    display: none; flex-direction: column; gap: 16px;
  }
  .consent-banner[data-visible="true"] { display: flex; }
  .consent-banner__actions { display: flex; gap: 12px; flex-wrap: wrap; }

  /* --- Legacy input/table aliases -------------------------------------------
     The tool calculator JS (public/assets/js/tools/*.js, ported verbatim from
     the pre-redesign system per docs/PUBLIC_REDESIGN_PLAN.md A2/A8) builds
     some markup at runtime with class="input"/"select"/"tnum"/"table" rather
     than relying on bare-tag selectors inside .field. These aliases keep that
     untouched JS rendering correctly without needing to rewrite it. --------- */
  .input, .select, .textarea,
  input.input, select.select, textarea.textarea {
    width: 100%; padding: 13px 16px; border-radius: var(--radius-sm);
    border: 1px solid var(--sand-300); background: var(--cream); font-size: var(--fs-body-sm);
    color: var(--text-primary); transition: border-color var(--dur-micro), box-shadow var(--dur-micro);
  }
  .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--green-700); box-shadow: var(--focus-ring); }
  .tnum { font-variant-numeric: tabular-nums; }
  .text-right { text-align: right; }

  .table { width: 100%; border-collapse: collapse; font-size: var(--fs-body-sm); }
  .table th, .table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--sand-200); }
  .table thead th { font-weight: 600; color: var(--navy-900); background: var(--sand); }
  .table tfoot th { font-weight: 600; border-top: 2px solid var(--sand-300); }

  .payslip-doc { background: var(--surface-card); border: 1px solid var(--sand-200); border-radius: var(--radius-lg); padding: 32px; }
  .payslip-doc__header { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid var(--sand-200); }
  .payslip-doc__net { margin-top: 20px; padding-top: 16px; border-top: 2px solid var(--navy-900); font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; text-align: right; }

  /* --- Payslip print styles ------------------------------------------------- */
  @media print {
    .site-header, .site-footer, .cta-bar, .scroll-top-btn, .no-print { display: none !important; }
    body { background: #fff; color: #000; }
  }
}

/* ==========================================================================
   6. UTILITIES (deliberately minimal — not a substitute for the layout layer)
   ========================================================================== */
@layer utilities {
  .text-center { text-align: center; }
  .text-left { text-align: left; }
  .text-muted { color: var(--text-muted); }
  .text-secondary { color: var(--text-secondary); }
  .label-caps { text-transform: uppercase; letter-spacing: 1.5px; font-size: 11px; font-weight: 600; }
  .mx-auto { margin-inline: auto; }
  .mt-0 { margin-top: 0; } .mt-2 { margin-top: 8px; } .mt-4 { margin-top: 16px; }
  .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }
  .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 8px; } .mb-4 { margin-bottom: 16px; }
  .mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; }
  .hidden { display: none !important; }
  .icon-flip { transform: scaleX(-1); }
  @media (min-width: 768px) {
    .md\:hidden { display: none !important; }
    .md\:block { display: block !important; }
  }
  [data-reveal] { opacity: 0; transform: translateY(28px); }
  [data-reveal].is-visible {
    animation: ofRise var(--dur-reveal) var(--ease-out) forwards;
    animation-delay: var(--reveal-delay, 0s);
  }
  @media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; animation: none; }
  }
}