/* =========================================================================
   CronosNow — Landing Page Stylesheet
   -------------------------------------------------------------------------
   Built on the CronosNow Design System (Design Assets/CronosBrand/).
   Tokens mirror colors_and_type.css; page-level components extend them.

   Contents
     01. Fonts
     02. Tokens
     03. Reset & base
     04. Layout primitives
     05. Typography helpers
     06. Buttons
     07. Icons
     08. Cards & grids
     09. Header & nav
     10. Hero
     11. Section 2 — Problem
     12. Section 3 — Why / hidden cost
     13. Section 4 — 6 Profit Leaks
     14. Section 5 — Comparison table
     15. Section 6 — How it works
     16. Section 7 — The offer
     17. Section 8 — Outcomes
     18. Section 9 — Proof
     19. Section 10 — Risk reversal
     20. Section 11 — FAQ
     21. Section 12 — Fit
     22. Section 13 — Final CTA & booking form
     23. Footer
     24. Mobile CTA bar
     25. Motion / reveal
     26. Responsive
     27. Print
   ========================================================================= */


/* =========================================================================
   01. FONTS — local brand webfonts
   ========================================================================= */
@font-face { font-family:'Raleway'; font-weight:400; font-style:normal; font-display:swap; src:url('assets/fonts/Raleway-Regular.ttf') format('truetype'); }
@font-face { font-family:'Raleway'; font-weight:500; font-style:normal; font-display:swap; src:url('assets/fonts/Raleway-Medium.ttf') format('truetype'); }
@font-face { font-family:'Raleway'; font-weight:600; font-style:normal; font-display:swap; src:url('assets/fonts/Raleway-SemiBold.ttf') format('truetype'); }
@font-face { font-family:'Raleway'; font-weight:700; font-style:normal; font-display:swap; src:url('assets/fonts/Raleway-Bold.ttf') format('truetype'); }
@font-face { font-family:'Raleway'; font-weight:800; font-style:normal; font-display:swap; src:url('assets/fonts/Raleway-ExtraBold.ttf') format('truetype'); }

@font-face { font-family:'Open Sans'; font-weight:400; font-style:normal; font-display:swap; src:url('assets/fonts/OpenSans-Regular.ttf') format('truetype'); }
@font-face { font-family:'Open Sans'; font-weight:400; font-style:italic;  font-display:swap; src:url('assets/fonts/OpenSans-Italic.ttf') format('truetype'); }
@font-face { font-family:'Open Sans'; font-weight:600; font-style:normal; font-display:swap; src:url('assets/fonts/OpenSans-Semibold.ttf') format('truetype'); }
@font-face { font-family:'Open Sans'; font-weight:700; font-style:normal; font-display:swap; src:url('assets/fonts/OpenSans-Bold.ttf') format('truetype'); }


/* =========================================================================
   02. TOKENS
   ========================================================================= */
:root {
  /* ---- Brand palette ---- */
  --cn-blue-deep:   #0A3857;
  --cn-blue:        #3152A3;
  --cn-blue-bright: #009BE7;

  --cn-green-dark:  #056839;
  --cn-green:       #74A156;
  --cn-green-lime:  #8BC53F;

  --cn-black:       #000000;
  --cn-gray-700:    #707070;
  --cn-gray-600:    #818386;
  --cn-gray-100:    #F7F7F7;
  --cn-white:       #FFFFFF;

  /* ---- Semantic ---- */
  --fg-1:          var(--cn-blue-deep);
  --fg-2:          var(--cn-gray-700);
  --fg-3:          var(--cn-gray-600);
  --fg-inverse:    var(--cn-white);
  --fg-link:       var(--cn-blue);
  --fg-link-hover: var(--cn-blue-deep);

  --bg-page:   var(--cn-white);
  --bg-soft:   var(--cn-gray-100);
  --bg-deep:   var(--cn-blue-deep);
  --bg-accent: var(--cn-blue);

  --color-success: var(--cn-green-dark);
  --color-info:    var(--cn-blue-bright);
  --color-danger:  #B23B3B;

  /* ---- Borders ---- */
  --border-subtle:  #E5E7EB;
  --border-default: #D1D5DB;
  --border-strong:  var(--cn-gray-600);

  /* ---- Type ---- */
  --font-heading: 'Raleway', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Fluid scale — min at 360px, max at 1200px */
  --fs-hero:    clamp(2.125rem, 1.15rem + 4.35vw, 4rem);      /* 34 → 64 */
  --fs-h2:      clamp(1.75rem, 1.16rem + 2.6vw, 2.875rem);    /* 28 → 46 */
  --fs-h3:      clamp(1.375rem, 1.11rem + 1.19vw, 1.875rem);  /* 22 → 30 */
  --fs-h4:      clamp(1.125rem, 1.02rem + 0.48vw, 1.375rem);  /* 18 → 22 */
  --fs-lead:    clamp(1.0625rem, 1.0rem + 0.30vw, 1.1875rem); /* 17 → 19 */
  --fs-body:    1rem;
  --fs-small:   0.875rem;
  --fs-micro:   0.75rem;
  --fs-display: clamp(2.5rem, 1.9rem + 2.7vw, 3.75rem);       /* 40 → 60 */

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

  --lh-tight:1.1; --lh-snug:1.25; --lh-normal:1.6; --lh-loose:1.75;

  --tracking-tight:  -0.01em;
  --tracking-eyebrow: 0.12em;

  /* ---- Spacing (4px base) ---- */
  --space-1:4px;  --space-2:8px;  --space-3:12px; --space-4:16px; --space-5:24px;
  --space-6:32px; --space-7:48px; --space-8:64px; --space-9:96px; --space-10:128px;

  /* ---- Radii ---- */
  --radius-xs:4px; --radius-sm:6px; --radius-md:10px; --radius-lg:16px; --radius-pill:999px;

  /* ---- Shadows — soft, navy-tinted ---- */
  --shadow-xs: 0 1px 2px rgba(10,56,87,0.06);
  --shadow-sm: 0 2px 6px rgba(10,56,87,0.08);
  --shadow-md: 0 6px 18px rgba(10,56,87,0.10);
  --shadow-lg: 0 18px 40px rgba(10,56,87,0.14);
  --shadow-focus: 0 0 0 3px rgba(49,82,163,0.30);
  --shadow-focus-onDark: 0 0 0 3px rgba(255,255,255,0.55);

  /* ---- Motion ---- */
  --ease-out:    cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;

  /* ---- Layout ---- */
  --container:        1200px;
  --container-narrow: 860px;
  --gutter:   clamp(20px, 4vw, 32px);
  --section-y: clamp(48px, 7vw, 96px);
  --header-h: 78px;

  /* ---- Z-index scale ---- */
  --z-base:1; --z-sticky:100; --z-header:200; --z-nav:300;
}


/* =========================================================================
   03. RESET & BASE
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--fg-1);
  background: var(--bg-page);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; border: 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--cn-blue-deep);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  margin: 0 0 var(--space-4);
  text-wrap: balance;
}
h1 { font-size: var(--fs-hero); font-weight: var(--fw-extra); }
h2 { font-size: var(--fs-h2);   font-weight: var(--fw-bold); }
h3 { font-size: var(--fs-h3);   font-weight: var(--fw-bold); }
h4 { font-size: var(--fs-h4);   font-weight: var(--fw-semibold); line-height: var(--lh-snug); }

p { margin: 0 0 var(--space-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a { color: var(--fg-link); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
a:hover { color: var(--fg-link-hover); text-decoration: underline; }

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

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

/* Focus — visible ring on every interactive element */
:focus-visible {
  outline: 2px solid var(--cn-blue);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.section--deep :focus-visible,
.hero :focus-visible,
.final-cta :focus-visible,
.site-footer :focus-visible {
  outline-color: var(--cn-white);
}

::selection { background: rgba(49,82,163,0.18); color: var(--cn-blue-deep); }

.sr-only {
  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: -100px; left: var(--space-4);
  z-index: 999;
  background: var(--cn-white); color: var(--cn-blue-deep);
  font-family: var(--font-heading); font-weight: var(--fw-bold);
  padding: var(--space-3) var(--space-5);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  transition: top var(--dur-base) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); text-decoration: none; }

.sprite { display: none; }


/* =========================================================================
   04. LAYOUT PRIMITIVES
   ========================================================================= */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: var(--container-narrow); }

.section {
  position: relative;
  padding-block: var(--section-y);
}
.section--soft { background: var(--bg-soft); }
.section--deep { background: var(--bg-deep); color: rgba(255,255,255,0.88); overflow: hidden; }
.section--deep h2, .section--deep h3, .section--deep h4 { color: var(--cn-white); }

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

/* Section head paired with an image, so a left-aligned heading doesn't
   leave the right half of the section empty. */
.head-split {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(28px, 5vw, 64px);
  align-items: center;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.section-head--flush { margin-bottom: 0; max-width: none; }
.head-figure { margin: 0; }
.head-figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.section-subhead {
  margin-block: clamp(40px, 5vw, 64px) var(--space-6);
  max-width: 62ch;
}
.section-subhead p { color: var(--fg-2); }

/* Asymmetric splits — 7/5 and 5/7 per the design system */
.split {
  display: grid;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.split--7-5 { grid-template-columns: 7fr 5fr; }
.split--5-7 { grid-template-columns: 5fr 7fr; }

.figure { margin: 0; }
.figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

/* Split imagery is squared off so it holds its own against the tall copy
   column — the 4:3 source is centre-cropped rather than letterboxed. */
.split-media .figure img {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
#how .split-media .figure img { object-position: 42% center; }   /* keep both monitors in frame */
#problem .split-media .figure img { object-position: 55% center; }


/* =========================================================================
   05. TYPOGRAPHY HELPERS
   ========================================================================= */
.eyebrow {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--cn-blue);
  margin: 0 0 var(--space-3);
}
.eyebrow--onDark { color: var(--cn-blue-bright); }

.lead {
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  max-width: 68ch;
}
.lead--onDark { color: rgba(255,255,255,0.82); }

.stat {
  display: block;
  font-family: var(--font-heading);
  font-weight: var(--fw-extra);
  font-size: var(--fs-display);
  line-height: 1;
  color: var(--cn-blue);
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
}
.stat sup { font-size: 0.42em; vertical-align: super; margin-left: 2px; }


/* =========================================================================
   06. BUTTONS
   ========================================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: var(--radius-md);
  padding: 14px 26px;
  min-height: 48px;             /* touch target */
  transition:
    background-color var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-fast) var(--ease-out);
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }   /* press: no scale */
.btn .icon { width: 1.15em; height: 1.15em; flex: none; }

.btn-primary {
  background: var(--cn-blue);
  color: var(--cn-white);
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--cn-blue-deep); color: var(--cn-white); box-shadow: var(--shadow-md); }

/* Accent — lime, for the highest-intent CTAs on navy */
.btn-accent {
  background: var(--cn-green-lime);
  color: #16320B;
  box-shadow: var(--shadow-sm);
}
.btn-accent:hover { background: #7BB233; color: #16320B; box-shadow: var(--shadow-md); }

.btn-ghost {
  background: transparent;
  color: var(--cn-blue);
  border-color: var(--border-default);
}
.btn-ghost:hover { background: rgba(49,82,163,0.08); color: var(--cn-blue-deep); }

.btn-sm { padding: 10px 18px; min-height: 42px; font-size: var(--fs-small); }
.btn-lg { padding: 17px 32px; min-height: 56px; font-size: 1.0625rem; }
.btn-block { display: flex; width: 100%; }

.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }


/* =========================================================================
   07. ICONS — Lucide, 2px stroke
   ========================================================================= */
.icon {
  width: 24px; height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================================================
   08. CARDS & GRIDS
   ========================================================================= */
.grid { display: grid; gap: clamp(16px, 2vw, 24px); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  position: relative;
  background: var(--cn-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-out);
  overflow: hidden;
}
.card:hover { box-shadow: var(--shadow-md); }
.card p { color: var(--fg-2); margin-bottom: 0; }
.card h4 { margin-bottom: var(--space-2); }

/* Card sitting on --bg-soft doesn't need the outline */
.section--soft .card { border-color: transparent; }

/* 4px top accent bar (never a left-border accent) */
.card--accent::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 4px;
  background: var(--cn-blue);
}
.card--accent { padding-top: calc(var(--space-6) + 4px); }

.card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  background: rgba(49,82,163,0.08);
  color: var(--cn-blue);
  margin-bottom: var(--space-4);
}


/* =========================================================================
   09. HEADER & NAV
   ========================================================================= */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--header-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled {
  background: rgba(255,255,255,0.92);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-bottom-color: var(--border-subtle);
  box-shadow: var(--shadow-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
}

/* --- Brand lockup: SVG clock-mark + live-text wordmark.
       The supplied lockup SVGs draw their wordmark as <text> in Raleway with
       baked-in kerning offsets, which would fall back to a system font inside
       an <img>. The mark is pure vector, so we pair it with real text. --- */
.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  text-decoration: none;
  flex: none;
}
.brand:hover { text-decoration: none; }

.brand-mark { width: 46px; height: 45px; }
.brand-mark--onLight { display: none; }
.is-scrolled .brand-mark--onDark  { display: none; }
.is-scrolled .brand-mark--onLight { display: block; }

.brand-text { display: flex; flex-direction: column; line-height: 1.05; }

.brand-name {
  font-family: var(--font-heading);
  font-weight: var(--fw-extra);
  font-size: 1.4375rem;   /* 23px: measured so CRONOSNOW ends flush with the tagline */
  letter-spacing: 0.015em;
}
.brand-name-a { color: var(--cn-white); }
.brand-name-b { color: var(--cn-blue-bright); }
.is-scrolled .brand-name-a { color: var(--cn-gray-600); }
.is-scrolled .brand-name-b { color: var(--cn-blue); }

/* Mixed case, matching how the supplied logo lockup sets the tagline —
   the brand rule is that "eCommerce" always keeps its lowercase e. */
.brand-tagline {
  font-family: var(--font-heading);
  font-weight: var(--fw-medium);
  font-size: 0.625rem;
  letter-spacing: 0.03em;
  color: rgba(255,255,255,0.72);
  margin-top: 3px;
}
.is-scrolled .brand-tagline { color: var(--fg-3); }

.primary-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2vw, 32px);
}
.nav-list {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.8vw, 28px);
}
.nav-list a {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: 0.9375rem;
  color: rgba(255,255,255,0.88);
  padding: 8px 2px;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.nav-list a:hover {
  color: var(--cn-white);
  border-bottom-color: var(--cn-blue-bright);
  text-decoration: none;
}
.is-scrolled .nav-list a { color: var(--fg-1); }
.is-scrolled .nav-list a:hover { color: var(--cn-blue); border-bottom-color: var(--cn-blue); }

.nav-cta { flex: none; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: var(--radius-sm);
  color: var(--cn-white);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out);
}
.is-scrolled .nav-toggle { color: var(--cn-blue-deep); border-color: var(--border-default); }
.nav-toggle:hover { background: rgba(255,255,255,0.12); }
.is-scrolled .nav-toggle:hover { background: rgba(49,82,163,0.08); }
.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; }


/* =========================================================================
   10. HERO
   ========================================================================= */
.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(92svh, 900px);
  padding-top: calc(var(--header-h) + clamp(32px, 5vw, 72px));
  padding-bottom: clamp(96px, 12vw, 140px);
  background: var(--cn-blue-deep);
  overflow: hidden;
}

/* Home hero: taller with more breathing room, so more of the founder photo
   shows around the (now-shorter) copy. */
.hero--home {
  min-height: min(100svh, 1040px);
  padding-top: calc(var(--header-h) + clamp(56px, 9vw, 128px));
  padding-bottom: clamp(140px, 16vw, 220px);
}
/* Tighter leading so the three tagline sentences read as one block. */
.hero--home .hero-title { line-height: 1.0; }

.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 72% center; }

/* Parallax variant (home hero only). The image keeps its original centred
   framing but is scaled up 40%, which gives generous headroom for it to travel
   on scroll without ever exposing an edge. The translate is applied in
   script.js; reduced-motion users get the un-scaled image and no movement. */
.hero-media--parallax { will-change: transform; }
.hero-media--parallax img {
  /* Scaled for parallax headroom AND shifted 120px down so the founder sits
     lower in the frame. The zoom origin sits below centre so there is enough
     overhang above to absorb the offset + the downward parallax without ever
     exposing a navy gap at the top. script.js re-applies this on scroll;
     reduced-motion / phones keep this resting transform (no movement). */
  transform: translate3d(0, 120px, 0) scale(1.55);
  transform-origin: center 40%;
  will-change: transform;
}

/* Single flat navy overlay — the only photo treatment the brand allows */
.hero-overlay { position: absolute; inset: 0; z-index: -1; background: rgba(10,56,87,0.72); }

.hero-inner { width: 100%; }
.hero-copy { max-width: 42rem; }

/* Trust line — sentence case so "eCommerce" keeps its brand casing */
.hero-trustline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2) var(--space-3);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.82);
  margin: 0 0 var(--space-5);
}
.hero-trustline .dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--cn-blue-bright);
  flex: none;
}

.hero-title {
  color: var(--cn-white);
  margin-bottom: var(--space-5);
  text-wrap: balance;
}
.hero-title-accent { color: var(--cn-blue-bright); }

.hero-sub {
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: rgba(255,255,255,0.84);
  max-width: 60ch;
  margin-bottom: var(--space-6);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-5); }

.hero-microcopy {
  font-size: var(--fs-small);
  color: rgba(255,255,255,0.66);
  max-width: 58ch;
  margin: 0;
}

/* Trust strip — sits on the fold line */
.trust-strip {
  position: absolute;
  inset: auto 0 0 0;
  background: rgba(255,255,255,0.07);
  border-top: 1px solid rgba(255,255,255,0.14);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding-block: var(--space-4);
}
.trust-strip-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--space-3) var(--space-5);
  text-align: center;
}
.trust-strip-text {
  margin: 0;
  font-size: var(--fs-small);
  color: rgba(255,255,255,0.78);
  letter-spacing: 0.02em;
}
.trust-strip-text strong {
  font-family: var(--font-heading);
  color: var(--cn-white);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-size: var(--fs-micro);
  margin-right: 4px;
}
.trust-strip-divider { width: 1px; height: 16px; background: rgba(255,255,255,0.24); }

/* Rating in the hero — the single highest-value proof atom, previously
   buried 60% down the page in §9. */
.trust-strip-rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}
.trust-strip-rating strong {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--fs-small);
  margin-right: 0;
}


/* =========================================================================
   10b. CHANNEL BAND
   ========================================================================= */
.channels {
  background: var(--cn-white);
  border-bottom: 1px solid var(--border-subtle);
  padding-block: clamp(32px, 4vw, 52px);
}
.channels-label {
  text-align: center;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-3);
  margin: 0 0 var(--space-6);
}
/* ---- Carousel ----
   The track is a native scroll container with snap points; the arrows just
   call scrollBy(). That keeps trackpad / touch / keyboard scrolling working
   even if the JS never runs. --per is the number of logos in view. */
.channels-carousel {
  display: flex;
  align-items: center;
  gap: clamp(8px, 1.5vw, 16px);
}

.channels-track {
  --per: 4;
  --gap: clamp(20px, 2.6vw, 36px);

  display: flex;
  gap: var(--gap);
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding-block: var(--space-3);
  /* the arrows are the affordance — a scrollbar under the logos reads as a bug */
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.channels-track::-webkit-scrollbar { display: none; }
.channels-track:focus-visible { outline: 2px solid var(--cn-blue); outline-offset: 4px; border-radius: var(--radius-sm); }

.channels-track li {
  flex: 0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
}
.channels-track img {
  width: 100%;
  max-width: 200px;
  height: auto;
  /* Greyscale at rest keeps eight brand palettes from fighting the page
     and the lime CTA; colour returns on hover. Opacity stays high enough
     that thin-stroke marks (Faire, Etsy) don't disappear. */
  filter: grayscale(1);
  opacity: 0.8;
  transition:
    filter var(--dur-base) var(--ease-out),
    opacity var(--dur-base) var(--ease-out);
}
.channels-track li:hover img { filter: grayscale(0); opacity: 1; }

.channels-nav {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--border-default);
  border-radius: 50%;
  background: var(--cn-white);
  color: var(--cn-blue);
  cursor: pointer;
  transition:
    background-color var(--dur-fast) var(--ease-out),
    border-color var(--dur-fast) var(--ease-out),
    color var(--dur-fast) var(--ease-out),
    opacity var(--dur-base) var(--ease-out);
}
.channels-nav:hover { background: rgba(49,82,163,0.08); border-color: var(--cn-blue); }
.channels-nav:active { transform: translateY(1px); }
.channels-nav .icon { width: 20px; height: 20px; }
.channels-nav[disabled] { opacity: 0.3; cursor: default; pointer-events: none; }
/* No JS = no reason to show controls that can't do anything */
html:not(.js) .channels-nav { display: none; }

@media (prefers-reduced-motion: reduce) {
  .channels-track { scroll-behavior: auto; }
}
.channels-note {
  text-align: center;
  font-size: var(--fs-small);
  color: var(--fg-2);
  margin: var(--space-6) 0 0;
}

/* Fewer logos in view as the track narrows, so they never shrink to unreadable */
@media (max-width: 1024px) { .channels-track { --per: 3; } }
@media (max-width: 700px)  { .channels-track { --per: 2; } }
@media (max-width: 420px)  { .channels-track { --per: 1.6; } }  /* peek: hints there's more */


/* =========================================================================
   11. SECTION 2 — PROBLEM
   ========================================================================= */
.pain-list { display: grid; gap: var(--space-4); margin-block: var(--space-6); }
.pain-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  font-size: var(--fs-body);
  color: var(--fg-1);
  line-height: var(--lh-normal);
}
/* The bullet marker is now the .mark--no circle (same as the table). Nudge it
   down a touch so it sits on the first line of text. */
.pain-list .mark { margin-top: 1px; }

.turn {
  border-left: 4px solid var(--cn-blue);
  background: var(--bg-soft);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: var(--space-5) var(--space-5) var(--space-5) var(--space-5);
  margin-bottom: var(--space-6);
}
.turn p { margin: 0; font-size: var(--fs-lead); line-height: var(--lh-loose); }


/* =========================================================================
   12. SECTION 3 — WHY / HIDDEN COST
   ========================================================================= */
.margin-callout {
  background: var(--cn-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 40px);
  box-shadow: var(--shadow-sm);
  text-align: center;
}
.margin-callout-figures {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 4vw, 56px);
  margin-bottom: var(--space-5);
}
.margin-figure { display: flex; flex-direction: column; gap: var(--space-2); }
.margin-figure-label {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--fg-3);
}
.margin-figure-value {
  font-family: var(--font-heading);
  font-weight: var(--fw-extra);
  font-size: clamp(2.5rem, 6vw, 4rem);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.margin-figure--bad  .margin-figure-value { color: var(--fg-3); text-decoration: line-through; text-decoration-thickness: 3px; }
.margin-figure--real .margin-figure-value { color: var(--cn-blue-deep); }
.margin-callout-arrow { width: 40px; height: 40px; color: var(--color-danger); }
.margin-callout-note {
  margin: 0 auto;
  max-width: 60ch;
  color: var(--fg-2);
  font-size: var(--fs-small);
}


/* =========================================================================
   13. SECTION 4 — 6 PROFIT LEAKS
   ========================================================================= */
.leaks-grid .card { padding-top: var(--space-6); }

.card--leak .card-icon { background: rgba(139,197,63,0.14); color: var(--cn-green-dark); }

.leak-number {
  position: absolute;
  top: var(--space-4); right: var(--space-5);
  font-family: var(--font-heading);
  font-weight: var(--fw-extra);
  font-size: 2.25rem;
  line-height: 1;
  color: rgba(10,56,87,0.07);
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.payoff {
  margin-top: clamp(32px, 4vw, 56px);
  text-align: center;
}
.payoff-text {
  max-width: 60ch;
  margin: 0 auto var(--space-5);
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--fg-1);
  font-weight: var(--fw-semibold);
}


/* =========================================================================
   14. SECTION 5 — COMPARISON TABLE
   ========================================================================= */
.table-hint {
  display: none;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  color: var(--fg-3);
  margin-bottom: var(--space-3);
}
.table-hint .icon { width: 14px; height: 14px; }

.table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-lg);
  background: var(--cn-white);
  box-shadow: var(--shadow-sm);
  -webkit-overflow-scrolling: touch;
}

.compare-table {
  width: 100%;
  min-width: 780px;
  border-collapse: collapse;
  font-size: var(--fs-small);
}
.compare-table thead th {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fg-2);
  text-align: center;
  padding: var(--space-5) var(--space-3);
  vertical-align: bottom;
  border-bottom: 2px solid var(--border-subtle);
  background: var(--cn-white);
}
.compare-table thead th .th-note {
  display: block;
  font-weight: var(--fw-medium);
  text-transform: none;
  letter-spacing: 0;
  color: var(--fg-3);
}
.compare-table thead th.cap-col {
  text-align: left;
  position: sticky; left: 0;
  z-index: 2;
  min-width: 250px;
}
.compare-table thead th.col-cn {
  color: var(--cn-white);
  background: var(--cn-blue);
  border-bottom-color: var(--cn-blue);
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  font-size: var(--fs-small);
}

.compare-table tbody th {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  color: var(--fg-1);
  text-align: left;
  padding: var(--space-4) var(--space-5) var(--space-4) var(--space-3);
  position: sticky; left: 0;
  background: var(--cn-white);
  z-index: 1;
  border-bottom: 1px solid var(--border-subtle);
  border-right: 1px solid var(--border-subtle);
}
.compare-table tbody td {
  padding: var(--space-4) var(--space-3);
  text-align: center;
  border-bottom: 1px solid var(--border-subtle);
}
.compare-table tbody tr:last-child th,
.compare-table tbody tr:last-child td { border-bottom: 0; }

.compare-table tbody td.col-cn { background: rgba(49,82,163,0.06); }
.compare-table tbody tr:last-child td.col-cn { border-radius: 0 0 var(--radius-md) var(--radius-md); }

.mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
}
.mark .icon { width: 17px; height: 17px; stroke-width: 2.5; }
.mark--yes     { background: rgba(5,104,57,0.10);  color: var(--cn-green-dark); }
.mark--partial { background: rgba(112,112,112,0.12); color: var(--fg-2); }
.mark--no      { background: rgba(178,59,59,0.10); color: var(--color-danger); }
.col-cn .mark--yes { background: rgba(5,104,57,0.16); }

/* Pull-quote — proof seeded mid-page, at the argument it supports */
.pull-quote {
  margin: clamp(40px, 5vw, 64px) auto 0;
  max-width: 62rem;
  background: var(--cn-white);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3.5vw, 44px);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
  text-align: center;
}
.pull-quote blockquote { margin: 0; }
.pull-quote blockquote p {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h3);
  line-height: var(--lh-snug);
  color: var(--cn-blue-deep);
  max-width: 30ch;
  text-wrap: balance;
}
.pull-quote blockquote p::before { content: "\201C"; }
.pull-quote blockquote p::after  { content: "\201D"; }
.pull-quote figcaption { display: flex; align-items: center; gap: var(--space-3); }

.legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-5);
  margin-top: var(--space-5);
  font-size: var(--fs-small);
  color: var(--fg-2);
}
.legend li { display: inline-flex; align-items: center; gap: var(--space-2); }
.legend .mark { width: 22px; height: 22px; }
.legend .mark .icon { width: 13px; height: 13px; }


/* =========================================================================
   15. SECTION 6 — HOW IT WORKS
   ========================================================================= */
.check-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-4) var(--space-6);
}
.check-grid--3 { grid-template-columns: repeat(3, 1fr); }
.check-grid li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  line-height: var(--lh-normal);
}
.check-grid .icon { width: 22px; height: 22px; color: var(--cn-green-dark); margin-top: 2px; }

/* Quantified side of the mechanism — sits with §6, not at the foot of Proof */
.system-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.5vw, 32px);
  margin-top: clamp(36px, 4vw, 56px);
  padding-top: clamp(32px, 4vw, 44px);
  border-top: 1px solid var(--border-subtle);
}
.system-stats li { text-align: center; }
.system-stats .stat { margin-bottom: var(--space-3); }
.system-stats p {
  margin: 0;
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: var(--fg-2);
}

.human-band {
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: stretch;
  gap: 0;
  margin-top: clamp(40px, 5vw, 64px);
  background: var(--cn-blue-deep);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.human-band-media { position: relative; min-height: 280px; }
.human-band-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.human-band-copy {
  padding: clamp(28px, 4vw, 48px);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-5);
}
.human-band-icon { width: 32px; height: 32px; color: var(--cn-blue-bright); }
.human-band-copy p {
  margin: 0;
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: rgba(255,255,255,0.9);
  max-width: 46ch;
}
/* Two classes so this beats `.human-band-copy p` on specificity, no !important */
.human-band-copy .human-band-note {
  font-size: var(--fs-small);
  line-height: var(--lh-normal);
  color: rgba(255,255,255,0.7);
  max-width: none;
  padding-top: var(--space-4);
  border-top: 1px solid rgba(255,255,255,0.14);
  width: 100%;
}
.human-band-note strong { color: var(--cn-green-lime); }


/* =========================================================================
   16. SECTION 7 — THE OFFER
   ========================================================================= */
.offer-watermark {
  position: absolute;
  top: 50%; right: -8%;
  width: min(620px, 55vw);
  transform: translateY(-50%);
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}
.section--deep .container { position: relative; z-index: 1; }

.offer-title { max-width: 20ch; margin-inline: auto; }

.offer-layout {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(32px, 4vw, 56px);
  align-items: stretch;
}
.offer-main { display: flex; flex-direction: column; gap: var(--space-5); }

.stack-list { display: grid; gap: var(--space-4); }
.stack-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.stack-list li:hover { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.2); }
.stack-list .icon { width: 24px; height: 24px; color: var(--cn-green-lime); margin-top: 2px; }
.stack-list h4 { margin-bottom: var(--space-1); color: var(--cn-white); }
.stack-list p { margin: 0; font-size: var(--fs-small); color: rgba(255,255,255,0.72); line-height: var(--lh-normal); }

.offer-side { display: flex; flex-direction: column; gap: var(--space-5); }
.offer-figure { margin: 0; }
.offer-figure img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* Testimonial at the decision point */
.offer-quote {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.offer-quote blockquote { margin: 0; }
.offer-quote blockquote p {
  margin: 0;
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--cn-white);
}
.offer-quote blockquote p::before { content: "\201C"; }
.offer-quote blockquote p::after  { content: "\201D"; }
.offer-quote figcaption { display: flex; align-items: center; gap: var(--space-3); }
.offer-quote .quote-avatar { width: 36px; height: 36px; background: var(--cn-blue); font-size: var(--fs-micro); }
.offer-quote .quote-attr strong { color: var(--cn-white); font-size: var(--fs-small); }
.offer-quote .quote-attr span { color: rgba(255,255,255,0.66); font-size: var(--fs-micro); }

/* Estimate caveat — the audit's four numbers are modelled, not measured.
   A plain span, not <sup>: the asterisk glyph already sits high in its em
   box, and shrinking it inside a <sup> reduced it to an invisible speck. */
.star { color: var(--cn-green-lime); font-weight: var(--fw-bold); }
.offer-footnote {
  display: flex;
  gap: 6px;
  margin: 0;
  padding-left: var(--space-5);
  font-size: var(--fs-micro);
  line-height: var(--lh-normal);
  color: rgba(255,255,255,0.6);
}

/* Full-width framing block beneath the stack + image */
.offer-frame {
  margin-top: clamp(32px, 4vw, 56px);
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 40px);
}
.offer-frame-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 56px);
}
.offer-frame-label {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--cn-blue-bright);
  margin: 0 0 var(--space-2);
}
.offer-frame p { font-size: var(--fs-small); line-height: var(--lh-loose); color: rgba(255,255,255,0.8); }
.offer-frame p strong { color: var(--cn-white); }

.offer-frame-cta {
  margin-top: clamp(24px, 3vw, 36px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
}
.offer-microcopy {
  margin: 0;
  text-align: center;
  font-size: var(--fs-micro);
  color: rgba(255,255,255,0.6);
}


/* =========================================================================
   17. SECTION 8 — OUTCOMES
   ========================================================================= */
.outcome-list { display: grid; gap: var(--space-5); margin-top: var(--space-6); }
.outcome-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
}
.outcome-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-md);
  background: rgba(139,197,63,0.16);
  color: var(--cn-green-dark);
  flex: none;
}
.outcome-list h4 { margin-bottom: var(--space-1); }
.outcome-list p { margin: 0; color: var(--fg-2); font-size: var(--fs-small); line-height: var(--lh-normal); }

.monthly-band {
  margin-top: clamp(40px, 5vw, 64px);
  background: var(--bg-soft);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3.5vw, 48px);
}
.monthly-band h3 { margin-bottom: var(--space-5); }


/* =========================================================================
   18. SECTION 9 — PROOF
   ========================================================================= */
.rating {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
}
.stars { display: inline-flex; gap: 2px; color: var(--cn-green-lime); }
.stars .icon { width: 22px; height: 22px; fill: currentColor; stroke: none; }
.stars--sm .icon { width: 16px; height: 16px; }
.rating-text { font-size: var(--fs-body); color: var(--fg-2); }
.rating-text strong { color: var(--fg-1); }

.quote-grid { margin-bottom: clamp(16px, 2vw, 24px); }

/* Testimonial wall: masonry via CSS columns, so cards of varied length pack tight */
.quote-wall {
  columns: 3;
  column-gap: clamp(18px, 2vw, 28px);
  margin-bottom: clamp(24px, 3vw, 40px);
}
.quote-wall .quote-card {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  margin: 0 0 clamp(18px, 2vw, 28px);
}
@media (max-width: 900px) { .quote-wall { columns: 2; } }
@media (max-width: 600px) { .quote-wall { columns: 1; } }

/* ---- Trust flow: Numbers -> Information -> Insights -> Outcomes ---- */
.trust-flow {
  display: flex;
  align-items: stretch;
  gap: clamp(8px, 1vw, 16px);
  margin-top: clamp(32px, 4vw, 56px);
}
.trust-step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  background: var(--cn-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 1.8vw, 28px);
  box-shadow: var(--shadow-sm);
}
.trust-step--outcome { border-color: rgba(139,197,63,0.5); background: rgba(139,197,63,0.06); }
.trust-step-top { display: flex; align-items: center; justify-content: space-between; }
.trust-step-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 12px;
  background: rgba(49,82,163,0.10); color: var(--cn-blue); flex: none;
}
.trust-step--outcome .trust-step-icon { background: rgba(139,197,63,0.18); color: var(--cn-green-dark); }
.trust-step-icon .icon { width: 24px; height: 24px; }
.trust-step-num {
  font-family: var(--font-heading); font-weight: var(--fw-extra);
  font-size: 1.65rem; line-height: 1; color: var(--border-strong);
}
.trust-step h3 { font-size: var(--fs-h4); color: var(--cn-blue-deep); margin: var(--space-1) 0 0; }
.trust-step > p { font-size: var(--fs-small); color: var(--fg-2); line-height: var(--lh-normal); margin: 0; }
.trust-points {
  display: grid; gap: var(--space-2); list-style: none;
  margin: auto 0 0; padding: var(--space-4) 0 0;
  border-top: 1px solid var(--border-subtle);
}
.trust-points li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-2); align-items: start;
  font-size: var(--fs-small); color: var(--fg-1); line-height: var(--lh-snug);
}
.trust-points .icon { width: 15px; height: 15px; margin-top: 3px; color: var(--cn-green-dark); flex: none; }
.trust-sep { display: flex; align-items: center; flex: none; color: var(--cn-green-lime); }
.trust-sep .icon { width: 26px; height: 26px; }

@media (max-width: 900px) {
  .trust-flow { flex-direction: column; gap: clamp(6px, 1.5vw, 12px); }
  .trust-sep { align-self: center; transform: rotate(90deg); }
}

.quote-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  margin: 0;
  background: var(--cn-white);
  border-radius: var(--radius-md);
  padding: clamp(24px, 3vw, 36px);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-out);
  position: relative;
  overflow: hidden;
}
.quote-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0;
  height: 4px;
  background: var(--cn-blue);
}
.quote-card:hover { box-shadow: var(--shadow-md); }
.quote-card blockquote { margin: 0; flex: 1; }
.quote-card blockquote p {
  margin: 0;
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--fg-1);
}
.quote-card blockquote p::before { content: "\201C"; }
.quote-card blockquote p::after  { content: "\201D"; }

.quote-card figcaption { display: flex; align-items: center; gap: var(--space-3); }
.quote-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--cn-blue-deep);
  color: var(--cn-white);
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-small);
  letter-spacing: 0.04em;
  flex: none;
}
.quote-attr { display: flex; flex-direction: column; line-height: 1.35; }
.quote-attr strong { font-family: var(--font-heading); color: var(--fg-1); font-size: var(--fs-body); }
.quote-attr span { font-size: var(--fs-small); color: var(--fg-2); }

.review-wall { margin-bottom: clamp(32px, 4vw, 56px); }
.review-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin: 0;
  background: var(--cn-white);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  box-shadow: var(--shadow-xs);
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.review-card:hover { box-shadow: var(--shadow-sm); }
.review-card blockquote { margin: 0; flex: 1; }
.review-card blockquote p { margin: 0; font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--fg-1); }
.review-card blockquote p::before { content: "\201C"; }
.review-card blockquote p::after  { content: "\201D"; }
.review-card figcaption { display: flex; flex-direction: column; line-height: 1.35; }
.review-card figcaption strong { font-family: var(--font-heading); font-size: var(--fs-small); }
.review-card figcaption span { font-size: var(--fs-micro); color: var(--fg-2); }

.stat-strip { margin-bottom: clamp(32px, 4vw, 56px); }
.stat-card {
  background: var(--cn-white);
  border-radius: var(--radius-md);
  padding: var(--space-6);
  box-shadow: var(--shadow-xs);
  text-align: center;
}
.stat-card .stat { margin-bottom: var(--space-3); }
.stat-card p { margin: 0; font-size: var(--fs-small); color: var(--fg-2); line-height: var(--lh-normal); }

.certs { text-align: center; }
.certs-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(20px, 3vw, 40px);
}
.certs-badges img { height: clamp(52px, 6vw, 72px); width: auto; }
/* The A2X/Dext strip is a solid-fill block, so it reads heavier than the
   outline-style Xero marks — run it a little shorter to even the weights,
   and cap its width so it never overflows a narrow screen. */
.certs-badges img.certs-badge--wide {
  height: clamp(38px, 4.6vw, 56px);
  max-width: 100%;
}


/* =========================================================================
   19. SECTION 10 — RISK REVERSAL
   ========================================================================= */
.promise-list { display: grid; gap: var(--space-4); margin-bottom: clamp(32px, 4vw, 48px); }
.promise-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-4);
  align-items: start;
  background: var(--bg-soft);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  font-size: var(--fs-lead);
  line-height: var(--lh-normal);
}
.promise-list .icon { width: 24px; height: 24px; color: var(--cn-blue); margin-top: 2px; }

.guarantee {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-5);
  align-items: start;
  background: var(--cn-blue-deep);
  color: rgba(255,255,255,0.86);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 3.5vw, 44px);
  box-shadow: var(--shadow-md);
}
.guarantee h3 { color: var(--cn-white); margin-bottom: var(--space-2); }
.guarantee p { margin: 0; font-size: var(--fs-lead); line-height: var(--lh-loose); }
.guarantee-icon { width: 44px; height: 44px; color: var(--cn-green-lime); }


/* =========================================================================
   20. SECTION 11 — FAQ
   ========================================================================= */
.faq { display: grid; gap: var(--space-3); }

.faq-item {
  background: var(--cn-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--dur-base) var(--ease-out);
}
.faq-item[open] { box-shadow: var(--shadow-sm); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5);
  min-height: 60px;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-h4);
  color: var(--fg-1);
  list-style: none;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { background: rgba(49,82,163,0.04); }

.faq-chevron {
  width: 22px; height: 22px;
  color: var(--cn-blue);
  flex: none;
  transition: transform var(--dur-base) var(--ease-out);
}
.faq-item[open] .faq-chevron { transform: rotate(180deg); }

.faq-body { padding: 0 var(--space-5) var(--space-5); }
.faq-body p { margin: 0; color: var(--fg-2); line-height: var(--lh-loose); max-width: 68ch; }


/* =========================================================================
   21. SECTION 12 — FIT
   ========================================================================= */
.fit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 24px); }

.fit-card {
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 40px);
  border: 1px solid var(--border-subtle);
  position: relative;
  overflow: hidden;
}
.fit-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; }
.fit-card--yes { background: rgba(139,197,63,0.07); border-color: rgba(139,197,63,0.35); }
.fit-card--yes::before { background: var(--cn-green-lime); }
.fit-card--no  { background: var(--bg-soft); }
.fit-card--no::before { background: var(--border-strong); }

.fit-card h3 { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-5); }
.fit-card h3 .icon { width: 26px; height: 26px; flex: none; }
.fit-card--yes h3 .icon { color: var(--cn-green-dark); }
.fit-card--no  h3 .icon { color: var(--fg-2); }

.fit-card ul { display: grid; gap: var(--space-3); }
.fit-card li {
  position: relative;
  padding-left: var(--space-5);
  color: var(--fg-2);
  line-height: var(--lh-normal);
}
.fit-card li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.6em;
  width: 7px; height: 7px;
  border-radius: 50%;
}
.fit-card--yes li::before { background: var(--cn-green-lime); }
.fit-card--no  li::before { background: var(--border-strong); }


/* =========================================================================
   22. SECTION 13 — FINAL CTA & BOOKING
   ========================================================================= */
.final-cta {
  position: relative;
  isolation: isolate;
  padding-block: clamp(56px, 8vw, 112px);
  background: var(--cn-blue-deep);
  overflow: hidden;
}
.final-cta-media { position: absolute; inset: 0; z-index: -2; }
.final-cta-media img { width: 100%; height: 100%; object-fit: cover; object-position: 30% center; }
.final-cta-overlay { position: absolute; inset: 0; z-index: -1; background: rgba(10,56,87,0.86); }
/* Darker overlay where the background image is lighter under the copy (Shopify page) */
.final-cta--darker .final-cta-overlay { background: rgba(10,56,87,0.93); }

.final-cta-inner {
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.final-cta-copy h2 { color: var(--cn-white); }
.final-tagline {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h3);
  color: var(--cn-white);
  margin-bottom: var(--space-6);
}
.final-points {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-6);
}
.final-points li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  color: rgba(255,255,255,0.82);
}
.final-points .icon { width: 18px; height: 18px; color: var(--cn-green-lime); }

.scarcity {
  margin-top: var(--space-5);
  padding: var(--space-4) var(--space-5);
  border: 1px dashed rgba(139,197,63,0.5);
  border-radius: var(--radius-md);
  font-size: var(--fs-small);
  color: rgba(255,255,255,0.82);
}

/* Booking card */
.booking-card {
  background: var(--cn-white);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 40px);
  box-shadow: var(--shadow-lg);
}
.booking-title { margin-bottom: var(--space-2); font-size: var(--fs-h3); }
.booking-sub { font-size: var(--fs-small); color: var(--fg-2); margin-bottom: var(--space-6); }

.booking-form { display: grid; gap: var(--space-5); }

.field { display: grid; gap: var(--space-2); }
.field label {
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  color: var(--fg-1);
}
.field .req { color: var(--color-danger); }

.field input,
.field select {
  width: 100%;
  font-family: var(--font-body);
  font-size: var(--fs-body);      /* 16px — prevents iOS auto-zoom */
  color: var(--fg-1);
  background: var(--cn-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  padding: 13px var(--space-4);
  min-height: 48px;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
  appearance: none;
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230A3857' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  padding-right: 42px;
  cursor: pointer;
}
.field input:hover, .field select:hover { border-color: var(--border-strong); }
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--cn-blue);
  box-shadow: var(--shadow-focus);
}
.field input[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--color-danger); }

.field-hint { margin: 0; font-size: var(--fs-micro); color: var(--fg-2); }
.field-error {
  margin: 0;
  font-size: var(--fs-micro);
  font-weight: var(--fw-semibold);
  color: var(--color-danger);
  display: flex;
  align-items: center;
  gap: 6px;
}

.booking-microcopy {
  margin: 0;
  text-align: center;
  font-size: var(--fs-micro);
  color: var(--fg-2);
}

.form-status {
  margin: var(--space-4) 0 0;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  text-align: center;
}
.form-status.is-success { color: var(--cn-green-dark); }
.form-status.is-error   { color: var(--color-danger); }
.form-status:empty { margin: 0; }


/* =========================================================================
   23. FOOTER
   ========================================================================= */
.site-footer {
  background: var(--cn-blue-deep);
  color: rgba(255,255,255,0.72);
  padding-block: clamp(48px, 6vw, 80px) var(--space-6);
  font-size: var(--fs-small);
}
.footer-top {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  padding-bottom: clamp(32px, 4vw, 48px);
  border-bottom: 1px solid rgba(255,255,255,0.14);
}

.footer-logo {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; margin-bottom: var(--space-5);
}
.footer-logo-mark { width: 46px; height: 45px; flex: none; }
.footer-logo-name {
  font-family: var(--font-heading);
  font-weight: var(--fw-extra);
  font-size: 1.6rem;
  letter-spacing: 0.01em;
  line-height: 1;
}
.footer-logo-name .brand-name-a { color: var(--cn-white); }
.footer-logo-name .brand-name-b { color: var(--cn-blue-bright); }
.footer-promise {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  color: var(--cn-white);
  max-width: 30ch;
  line-height: var(--lh-snug);
  margin: 0;
}
.footer-promise-accent { color: var(--cn-green-lime); }

.footer-heading {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--cn-white);
  margin: 0 0 var(--space-4);
}
.footer-col ul { display: grid; gap: var(--space-3); }
.footer-col a { color: rgba(255,255,255,0.72); }
.footer-col a:hover { color: var(--cn-white); text-decoration: underline; }
.footer-partners li { color: rgba(255,255,255,0.72); }
.footer-cta { margin-top: var(--space-5); }

.footer-bottom { padding-top: var(--space-6); display: grid; gap: var(--space-4); text-align: center; justify-items: center; }
.footer-address { margin: 0; color: rgba(255,255,255,0.72); }
.footer-disclaimer {
  margin: 0;
  font-size: var(--fs-micro);
  line-height: var(--lh-normal);
  color: rgba(255,255,255,0.5);
  max-width: none;
}
.footer-copy { margin: 0; font-size: var(--fs-micro); color: rgba(255,255,255,0.5); }


/* =========================================================================
   24. MOBILE CTA BAR
   ========================================================================= */
.mobile-cta {
  display: none;
  position: fixed;
  inset: auto 0 0 0;
  z-index: var(--z-sticky);
  padding: var(--space-3) var(--gutter) calc(var(--space-3) + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,0.94);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--border-subtle);
  transform: translateY(110%);
  transition: transform var(--dur-slow) var(--ease-out);
}
.mobile-cta.is-visible { transform: translateY(0); }


/* =========================================================================
   25. MOTION / REVEAL
   ========================================================================= */
/* Gated behind `.js` (set by the inline head script) so content is never
   left invisible if JavaScript is disabled or fails to load. */
.js .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity var(--dur-slow) var(--ease-out),
    transform var(--dur-slow) var(--ease-out);
  will-change: opacity, transform;
}
.js .reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .js .reveal { opacity: 1; transform: none; }
  .mobile-cta { transition: none; }
}


/* =========================================================================
   26. RESPONSIVE
   ========================================================================= */

/* ---- ≤1024px — tablet ---- */
@media (max-width: 1024px) {
  :root { --header-h: 70px; }

  .nav-list { gap: 14px; }
  .nav-list a { font-size: 0.875rem; }

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

  .system-stats { grid-template-columns: repeat(2, 1fr); row-gap: clamp(24px, 3vw, 36px); }

  .footer-top { grid-template-columns: 1fr 1fr; }
}

/* ---- ≤900px — stack the splits ---- */
@media (max-width: 900px) {
  .split--7-5,
  .split--5-7 { grid-template-columns: 1fr; }

  /* Heading first, image after — the copy carries the argument */
  .head-split { grid-template-columns: 1fr; gap: var(--space-6); }
  .head-figure img { max-height: 320px; object-fit: cover; }

  /* The trust strip is absolutely pinned to the fold on desktop. Narrow
     screens wrap it onto several lines, which would overlap the hero
     microcopy — so drop it into normal flow instead of trying to guess a
     padding-bottom big enough to clear it. */
  .trust-strip { position: static; margin-top: clamp(32px, 7vw, 48px); }
  .hero { padding-bottom: 0; }

  .human-band { grid-template-columns: 1fr; }
  .human-band-media { min-height: 220px; }

  .offer-layout { grid-template-columns: 1fr; }
  .offer-frame-cols { grid-template-columns: 1fr; }

  .final-cta-inner { grid-template-columns: 1fr; }

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

/* ---- ≤768px — mobile nav, single columns ---- */
@media (max-width: 768px) {
  .nav-toggle { display: inline-flex; }

  .primary-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    z-index: var(--z-nav);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--cn-white);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-lg);
    padding: var(--space-4) var(--gutter) var(--space-6);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition:
      transform var(--dur-base) var(--ease-out),
      opacity var(--dur-base) var(--ease-out),
      visibility var(--dur-base) var(--ease-out);
  }
  .primary-nav.is-open { transform: translateY(0); opacity: 1; visibility: visible; }

  .nav-list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-list a {
    display: block;
    color: var(--fg-1);
    font-size: 1.0625rem;
    padding: var(--space-4) 0;
    border-bottom: 1px solid var(--border-subtle);
  }
  .nav-list a:hover { color: var(--cn-blue); border-bottom-color: var(--border-subtle); }
  .nav-list li:last-child a { border-bottom: 0; }
  .nav-cta { margin-top: var(--space-4); width: 100%; }

  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .check-grid, .check-grid--3 { grid-template-columns: 1fr; }
  .fit-grid { grid-template-columns: 1fr; }
  .system-stats { grid-template-columns: repeat(2, 1fr); }
  .offer-frame-cta .btn { width: 100%; }
  .pull-quote blockquote p { font-size: var(--fs-h4); }

  .table-hint { display: flex; }

  .footer-top { grid-template-columns: 1fr; }

  .mobile-cta { display: block; }
  body { padding-bottom: 84px; }   /* clear the sticky bar */

  .hero { min-height: 0; }
  .hero-media img { object-position: 76% center; }

  .margin-callout-figures { flex-direction: column; gap: var(--space-4); }
  .margin-callout-arrow { transform: rotate(90deg); }

  .guarantee { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* ---- ≤560px — small phones ---- */
@media (max-width: 560px) {
  .hero-trustline { font-size: var(--fs-micro); gap: 6px 8px; }
  .hero-actions .btn { width: 100%; }

  .trust-strip-divider { display: none; }
  .trust-strip-inner { flex-direction: column; gap: var(--space-2); }

  .btn-lg { padding: 15px 22px; font-size: var(--fs-body); }

  .card, .quote-card, .stat-card { padding: var(--space-5); }
  .leak-number { font-size: 1.75rem; }

  .channels-label { font-size: var(--fs-micro); }

  .faq-item summary { font-size: 1.0625rem; padding: var(--space-4); }
  .faq-body { padding: 0 var(--space-4) var(--space-4); }

  .promise-list li { font-size: var(--fs-body); }
}


/* =========================================================================
   27. PRINT
   ========================================================================= */
@media print {
  .site-header, .mobile-cta, .nav-toggle, .hero-media, .hero-overlay,
  .final-cta-media, .final-cta-overlay, .offer-watermark { display: none !important; }

  body { color: #000; background: #fff; padding-bottom: 0; }
  .hero, .final-cta, .section--deep, .site-footer { background: #fff !important; color: #000 !important; }
  .hero-title, .section--deep h2, .section--deep h3, .section--deep h4,
  .final-cta-copy h2, .guarantee h3 { color: #000 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .btn { border: 1px solid #000; color: #000 !important; background: #fff !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; }
}


/* =========================================================================
   28. HOME PAGE — components unique to index.html
   (audit page is landing-page-audit.html; both share this stylesheet)
   ========================================================================= */

/* Ghost button on the navy hero */
.btn-ghost--onDark {
  color: var(--cn-white);
  border-color: rgba(255,255,255,0.5);
  background: transparent;
}
.btn-ghost--onDark:hover {
  background: rgba(255,255,255,0.1);
  color: var(--cn-white);
  border-color: var(--cn-white);
}

/* ---- Focus-area pillars (four decisions) ---- */
.pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 1.8vw, 24px);
}
.pillar {
  text-align: center;
  background: var(--cn-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: clamp(20px, 2vw, 28px) var(--space-4);
  box-shadow: var(--shadow-xs);
  transition:
    box-shadow var(--dur-base) var(--ease-out),
    transform var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out);
}
/* More pronounced hover: a clear lift, a lime border accent, and the icon pops. */
.pillar:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-6px);
  border-color: rgba(139,197,63,0.55);
}
.pillar-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  margin-bottom: var(--space-4);
  border-radius: 50%;
  background: var(--cn-blue-deep);
  color: var(--cn-green-lime);
  transition: transform var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out);
}
.pillar:hover .pillar-icon { transform: scale(1.1) translateY(-2px); }
.pillar-icon .icon { width: 26px; height: 26px; }

/* A slightly bigger, staggered rise on scroll-in so the row animates in with
   a bit more presence (the reveal observer + per-item delay live in script.js). */
.js .pillar.reveal { transform: translateY(20px); }
.js .pillar.reveal.is-visible { transform: none; }
.pillar h3 { font-size: var(--fs-h4); margin-bottom: var(--space-2); }
.pillar p { margin: 0; font-size: var(--fs-small); color: var(--fg-2); line-height: var(--lh-normal); }

/* ---- Services grid: card links ---- */
.services-grid .card h3 { font-size: var(--fs-h4); margin-bottom: var(--space-2); }
.services-grid .card a {
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

/* ---- Inventory options ---- */
.options-grid { margin-top: clamp(32px, 4vw, 48px); }
.options-grid .card h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-h4);
  margin-bottom: var(--space-3);
}
.option-tag {
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--cn-green-dark);
  background: rgba(139,197,63,0.16);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
}
.mini-list {
  display: grid;
  gap: var(--space-3);
  margin-top: var(--space-4);
}
.mini-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-3);
  align-items: start;
  font-size: var(--fs-small);
  color: var(--fg-1);
  line-height: var(--lh-normal);
}
.mini-list .icon { width: 18px; height: 18px; color: var(--cn-green-dark); margin-top: 2px; }

/* ---- Stat icons (why-us figures) ---- */
.stat-ico {
  display: block;
  width: 30px; height: 30px;
  margin: 0 auto var(--space-3);
  color: var(--cn-blue);
}

/* ---- Audit cross-link band ---- */
.audit-band-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(24px, 4vw, 56px);
  align-items: center;
}
.audit-band-copy h2 { color: var(--cn-white); max-width: 22ch; }
.audit-band-copy .lead { margin-bottom: 0; }
.audit-band-cta { flex: none; }

/* Green (inverted) variant — CronosNow lime background, deep-navy text, a big
   white button. Made larger so it stands out as a break between sections. */
.audit-band--green {
  background: var(--cn-green-lime);
  color: var(--cn-blue-deep);
  overflow: hidden;
  padding-block: clamp(64px, 9vw, 120px);
}
.audit-band--green .eyebrow { color: var(--cn-blue-deep); }
.audit-band--green .audit-band-copy h2 {
  color: var(--cn-blue-deep);
  font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem);
  max-width: 20ch;
}
.audit-band--green .lead { color: rgba(255,255,255,0.9); }
.audit-band--green .offer-watermark { opacity: 0.12; }

/* White button with a navy rollover to match the section */
.btn-white {
  background: var(--cn-white);
  color: var(--cn-blue-deep);
  box-shadow: var(--shadow-md);
}
.btn-white:hover {
  background: var(--cn-blue-deep);
  color: var(--cn-white);
  box-shadow: var(--shadow-lg);
}


/* ---- Home responsive ---- */
@media (max-width: 1024px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }   /* 4 boxes -> even 2x2 */
}
@media (max-width: 900px) {
  .audit-band-inner { grid-template-columns: 1fr; }
  .options-grid { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .pillars { grid-template-columns: 1fr; }
  .hero-actions .btn { width: 100%; }
  .services-grid .card a { white-space: normal; }
}


/* =========================================================================
   29. BLOG — index (holder) + articles
   Shares all tokens/components above. Interactive charts + tooltips are
   wired in script.js (guarded, so they are inert on non-blog pages).
   ========================================================================= */

/* ---- Blog index (holder) ---- */
.blog-hero {
  background: var(--cn-blue-deep);
  color: rgba(255,255,255,0.85);
  padding-block: calc(var(--header-h) + clamp(40px, 6vw, 72px)) clamp(40px, 6vw, 72px);
  text-align: center;
}
.blog-hero h1 { color: var(--cn-white); margin-bottom: var(--space-4); }
.blog-hero .lead { margin-inline: auto; color: rgba(255,255,255,0.82); }

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.6vw, 32px);
}
.post-card {
  display: flex;
  flex-direction: column;
  background: var(--cn-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.post-card:hover { box-shadow: var(--shadow-md); transform: translateY(-4px); }
.post-card-media { aspect-ratio: 16 / 10; overflow: hidden; }
.post-card-media img { width: 100%; height: 100%; object-fit: cover; }
.post-card-body { display: flex; flex-direction: column; flex: 1; padding: clamp(20px, 2.4vw, 28px); }
.post-tag {
  align-self: flex-start;
  font-family: var(--font-heading);
  font-weight: var(--fw-bold);
  font-size: var(--fs-micro);
  text-transform: uppercase;
  letter-spacing: var(--tracking-eyebrow);
  color: var(--cn-green-dark);
  background: rgba(139,197,63,0.16);
  padding: 4px 10px;
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
}
.post-card h2 { font-size: var(--fs-h3); margin-bottom: var(--space-3); }
.post-card h2 a { color: var(--cn-blue-deep); text-decoration: none; }
.post-card h2 a:hover { color: var(--cn-blue); }
.post-card-dek { color: var(--fg-2); margin-bottom: var(--space-5); flex: 1; }
.post-card-meta {
  display: flex; align-items: center; gap: var(--space-3);
  font-size: var(--fs-small); color: var(--fg-3);
  padding-top: var(--space-4); border-top: 1px solid var(--border-subtle);
}
.post-card-meta .read-more {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-heading); font-weight: var(--fw-bold);
  color: var(--cn-blue);
}
.post-card-meta .read-more .icon { width: 16px; height: 16px; transition: transform var(--dur-base) var(--ease-out); }
.post-card:hover .read-more .icon { transform: translateX(3px); }

/* ---- Article header ---- */
.article-head {
  padding-top: calc(var(--header-h) + clamp(28px, 5vw, 56px));
  padding-bottom: clamp(24px, 3vw, 40px);
}
.article-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
  font-size: var(--fs-small); color: var(--fg-2);
  margin-bottom: var(--space-4);
}
.article-back .icon { width: 16px; height: 16px; }
.article-head h1 {
  font-size: clamp(2rem, 1.3rem + 3vw, 3.25rem);
  max-width: 20ch;
  margin-bottom: var(--space-5);
}
.article-dek {
  font-size: var(--fs-lead);
  line-height: var(--lh-loose);
  color: var(--fg-2);
  max-width: 60ch;
  margin-bottom: var(--space-5);
}
.article-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-4);
  font-size: var(--fs-small); color: var(--fg-3);
}
.article-meta .author { font-weight: var(--fw-semibold); color: var(--fg-1); }
.article-meta .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--border-strong); }

.article-hero-media { margin-bottom: clamp(28px, 4vw, 48px); }
.article-hero-media img {
  width: 100%; aspect-ratio: 16 / 9; object-fit: cover;
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md);
}

/* ---- Article body layout ---- */
.article-body {
  max-width: 760px;
  margin-inline: auto;
  padding-bottom: clamp(48px, 7vw, 96px);
}

/* ---- In-this-article mini menu ---- */
.toc {
  background: var(--bg-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 2.4vw, 28px);
  margin-bottom: clamp(32px, 4vw, 48px);
}
.toc-title {
  font-family: var(--font-heading); font-weight: var(--fw-bold);
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  color: var(--cn-blue); margin: 0 0 var(--space-4);
}
.toc-list { display: grid; gap: var(--space-1); counter-reset: toc; }
.toc-list li { margin: 0; }
.toc-list a {
  display: flex; gap: var(--space-3); align-items: center;
  padding: var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--fg-1); text-decoration: none; font-weight: var(--fw-semibold);
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.toc-list a:hover { background: rgba(49,82,163,0.07); color: var(--cn-blue); text-decoration: none; }
.toc-list a::before {
  counter-increment: toc; content: counter(toc);
  flex: none; width: 24px; height: 24px; border-radius: 50%;
  background: var(--cn-blue-deep); color: var(--cn-green-lime);
  font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--fs-small);
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---- Six profit levers callout ---- */
.levers {
  background: var(--cn-blue-deep);
  color: rgba(255,255,255,0.86);
  border-radius: var(--radius-lg);
  padding: clamp(24px, 3vw, 36px);
  margin-bottom: clamp(32px, 4vw, 48px);
}
.levers-title {
  font-family: var(--font-heading); font-weight: var(--fw-bold);
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  color: var(--cn-green-lime); margin: 0 0 var(--space-4);
}
.levers > p { color: rgba(255,255,255,0.8); font-size: var(--fs-small); }
.levers-list { display: grid; gap: var(--space-3); margin-top: var(--space-4); }
.levers-list li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: baseline;
  font-size: var(--fs-small); line-height: var(--lh-normal); color: rgba(255,255,255,0.82);
}
.levers-list .n {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(139,197,63,0.18); color: var(--cn-green-lime);
  font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--fs-micro);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.levers-list li strong { color: var(--cn-white); }

/* ---- Prose ---- */
.prose > h2 {
  font-size: var(--fs-h2);
  margin-top: clamp(40px, 5vw, 64px);
  margin-bottom: var(--space-5);
  scroll-margin-top: calc(var(--header-h) + 16px);
}
.prose > h2:first-child { margin-top: 0; }
.prose h3 { font-size: var(--fs-h4); margin-top: var(--space-6); margin-bottom: var(--space-3); }
.prose p { font-size: var(--fs-lead); line-height: var(--lh-loose); color: var(--fg-1); margin-bottom: var(--space-5); }
.prose ol, .prose ul { margin: 0 0 var(--space-5); padding: 0; display: grid; gap: var(--space-4); }
.prose ol { counter-reset: step; }
.prose ol > li {
  position: relative; padding-left: 44px;
  font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg-1);
}
.prose ol > li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: -2px;
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(49,82,163,0.1); color: var(--cn-blue);
  font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--fs-small);
  display: inline-flex; align-items: center; justify-content: center;
}
.prose ol > li strong:first-child { color: var(--cn-blue-deep); }
.prose ul.bullets > li {
  position: relative; padding-left: var(--space-5);
  font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--fg-1);
}
.prose ul.bullets > li::before {
  content: ""; position: absolute; left: 0; top: 0.55em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--cn-green-lime);
}

/* ---- Key-sentence callout ---- */
.key-sentence {
  margin: clamp(32px, 4vw, 48px) 0;
  padding: clamp(24px, 3vw, 36px);
  background: rgba(139,197,63,0.1);
  border-left: 4px solid var(--cn-green-lime);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
}
.key-sentence .k-label {
  font-family: var(--font-heading); font-weight: var(--fw-bold);
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  color: var(--cn-green-dark); margin: 0 0 var(--space-3);
}
.key-sentence p {
  margin: 0;
  font-family: var(--font-heading); font-weight: var(--fw-bold);
  font-size: var(--fs-h3); line-height: var(--lh-snug); color: var(--cn-blue-deep);
}

/* ---- Tables ---- */
.table-caption {
  font-family: var(--font-heading); font-weight: var(--fw-bold);
  font-size: var(--fs-h4); color: var(--cn-blue-deep);
  margin: clamp(28px, 3.5vw, 44px) 0 var(--space-1);
}
.table-note { font-size: var(--fs-small); color: var(--fg-3); margin: 0 0 var(--space-4); }
.blog-table-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-subtle); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); margin-bottom: clamp(28px, 3.5vw, 44px);
  background: var(--cn-white);
}
.blog-table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: var(--fs-small); }
.blog-table thead th {
  background: var(--cn-blue-deep); color: var(--cn-white);
  font-family: var(--font-heading); font-weight: var(--fw-semibold);
  text-align: right; padding: var(--space-4); white-space: nowrap;
}
.blog-table thead th:first-child { text-align: left; }
.blog-table tbody th {
  font-family: var(--font-body); font-weight: var(--fw-semibold);
  text-align: left; color: var(--fg-1);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  position: sticky; left: 0; background: var(--cn-white);
}
.blog-table tbody td {
  text-align: right; padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
  font-variant-numeric: tabular-nums; color: var(--fg-1);
}
.blog-table tbody tr:nth-child(even) th,
.blog-table tbody tr:nth-child(even) td { background: var(--bg-soft); }
.blog-table td.neg { color: var(--color-danger); }
.blog-table td.pos { color: var(--cn-green-dark); }
.blog-table tr.total th, .blog-table tr.total td {
  border-top: 2px solid var(--cn-blue-deep);
  border-bottom: none;
  font-weight: var(--fw-bold);
  font-size: var(--fs-body);
  background: rgba(49,82,163,0.06) !important;
  color: var(--cn-blue-deep);
}
.blog-table tr.total td.neg { color: var(--color-danger); }
.blog-table tr.total td.pos { color: var(--cn-green-dark); }

/* ---- Interactive chart ---- */
.chart {
  margin: clamp(28px, 3.5vw, 44px) 0;
  background: var(--cn-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: clamp(20px, 2.6vw, 32px);
  box-shadow: var(--shadow-sm);
}
.chart-holder { position: relative; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart-caption { font-size: var(--fs-small); color: var(--fg-2); margin: var(--space-4) 0 0; text-align: center; }
.chart .bar { transition: opacity var(--dur-fast) var(--ease-out); cursor: default; }
.chart .bar:hover, .chart .bar:focus-visible { opacity: 0.82; outline: none; }
.chart .bar-label { font-family: var(--font-body); font-size: 12px; fill: var(--fg-2); }
.chart .bar-value { font-family: var(--font-heading); font-weight: 700; font-size: 13px; }
.chart .axis-line { stroke: var(--border-default); stroke-width: 1; }
.chart .baseline { stroke: var(--cn-blue-deep); stroke-width: 1.5; stroke-dasharray: 5 4; }
.chart .baseline-label { font-family: var(--font-body); font-size: 11px; fill: var(--fg-3); }
.chart-tip {
  position: absolute; z-index: 5; pointer-events: none;
  background: var(--cn-blue-deep); color: var(--cn-white);
  font-size: var(--fs-small); font-weight: var(--fw-semibold);
  padding: 8px 12px; border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md); white-space: nowrap;
  transform: translate(-50%, -115%); opacity: 0;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.chart-tip.is-on { opacity: 1; }

/* ---- Tooltip terms (definitions) ---- */
.term {
  border: 0; border-bottom: 2px dotted var(--cn-blue);
  color: inherit; cursor: help;
  background: none; font: inherit; padding: 0 1px;
}
.term:hover { background: rgba(49,82,163,0.08); }
.term:focus-visible { outline: 2px solid var(--cn-blue); outline-offset: 2px; }
.term[aria-expanded="true"] { background: rgba(49,82,163,0.12); }
.term-pop {
  display: none;
  position: absolute; z-index: 60;
  width: min(300px, calc(100vw - 32px));
  background: var(--cn-white);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 24px;
  font-family: var(--font-body); font-weight: var(--fw-regular);
  font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--fg-1);
  text-align: left; white-space: normal;
}
.term-pop.is-open { display: block; }
.term-pop .term-pop-name {
  display: block; font-family: var(--font-heading); font-weight: var(--fw-bold);
  color: var(--cn-blue-deep); margin-bottom: 6px;
}
.term-pop-close { display: none; }

/* ---- Quick reference (avoid / apply) ---- */
.quick-ref { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(16px, 2vw, 24px); margin: var(--space-5) 0; }
.qr-card { border-radius: var(--radius-lg); padding: clamp(20px, 2.4vw, 28px); border: 1px solid var(--border-subtle); }
.qr-card--avoid { background: rgba(178,59,59,0.05); border-color: rgba(178,59,59,0.3); }
.qr-card--apply { background: rgba(139,197,63,0.08); border-color: rgba(139,197,63,0.4); }
.qr-card h3 { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-4); font-size: var(--fs-h4); }
.qr-card h3 .icon { width: 24px; height: 24px; flex: none; }
.qr-card--avoid h3 .icon { color: var(--color-danger); }
.qr-card--apply h3 .icon { color: var(--cn-green-dark); }
.qr-card ul { display: grid; gap: var(--space-3); }
.qr-card li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start;
  font-size: var(--fs-small); line-height: var(--lh-normal); color: var(--fg-1);
}
.qr-card li .icon { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.qr-card--avoid li .icon { color: var(--color-danger); }
.qr-card--apply li .icon { color: var(--cn-green-dark); }

.prose .faq { margin-top: var(--space-5); }

/* ---- Definitions / notes reference block ---- */
.reference {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: clamp(28px, 3.5vw, 44px);
  border-top: 1px solid var(--border-subtle);
}
.reference > h2 { font-size: var(--fs-h3); margin-bottom: var(--space-5); }
.reference h3 {
  font-family: var(--font-heading); font-weight: var(--fw-bold);
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  color: var(--cn-blue); margin: var(--space-6) 0 var(--space-3);
}
.reference dl { display: grid; gap: var(--space-3); margin: 0; }
.reference dt { font-family: var(--font-heading); font-weight: var(--fw-bold); color: var(--cn-blue-deep); font-size: var(--fs-small); }
.reference dd { margin: 2px 0 0; font-size: var(--fs-small); color: var(--fg-2); line-height: var(--lh-normal); }
.reference ul.notes { display: grid; gap: var(--space-3); }
.reference ul.notes li {
  position: relative; padding-left: var(--space-5);
  font-size: var(--fs-small); color: var(--fg-2); line-height: var(--lh-normal);
}
.reference ul.notes li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; border-radius: 50%; background: var(--border-strong); }

/* ---- End-of-article CTA ---- */
.article-cta {
  margin-top: clamp(40px, 5vw, 64px);
  background: var(--cn-blue-deep);
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 48px);
  text-align: center;
  color: rgba(255,255,255,0.85);
}
.article-cta h2 { color: var(--cn-white); font-size: var(--fs-h3); margin-bottom: var(--space-3); }
.article-cta p { max-width: 52ch; margin: 0 auto var(--space-6); }
.article-cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); justify-content: center; }

/* ---- Blog responsive ---- */
@media (max-width: 900px) {
  .post-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .post-grid { grid-template-columns: 1fr; }
  .quick-ref { grid-template-columns: 1fr; }
  .key-sentence p { font-size: var(--fs-h4); }
  .term-pop.is-open {
    position: fixed; left: 16px; right: 16px; bottom: 16px; top: auto;
    width: auto; max-width: none;
  }
  .term-pop-close {
    display: inline-flex; align-items: center; justify-content: center;
    position: absolute; top: 8px; right: 8px; width: 32px; height: 32px;
    border: 0; background: var(--bg-soft); border-radius: 50%; cursor: pointer; color: var(--fg-1);
  }
  .term-pop-close .icon { width: 18px; height: 18px; }
}

/* =========================================================================
   29b. BLOG ARTICLE — v2 layout
   Full-width navy two-column hero, wider body, floating back-to-top.
   Layout overrides are scoped to `.article-v2` so any article still on the
   v1 layout (plain .article) is untouched until the design is rolled out.
   ========================================================================= */

/* ---- Full-width navy hero band (mirrors the blog holder hero) ---- */
.article-hero {
  background: var(--cn-blue-deep);
  color: rgba(255,255,255,0.85);
  padding-block: calc(var(--header-h) + clamp(32px, 5vw, 60px)) clamp(36px, 5vw, 64px);
}
.article-hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.article-hero-text { min-width: 0; }

.article-hero .article-back { color: rgba(255,255,255,0.72); margin-bottom: var(--space-5); }
.article-hero .article-back:hover { color: var(--cn-white); }

.article-hero .post-tag {
  display: inline-block;
  font-family: var(--font-heading); font-weight: var(--fw-bold);
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  color: var(--cn-green-lime);
  background: rgba(139,197,63,0.16);
  padding: 4px 12px; border-radius: var(--radius-pill);
  margin-bottom: var(--space-4);
}
.article-hero h1 {
  color: var(--cn-white);
  font-size: clamp(1.9rem, 1.2rem + 2.8vw, 3rem);
  line-height: 1.1;
  max-width: 18ch;
  margin-bottom: var(--space-4);
}
.article-hero .article-dek {
  font-size: var(--fs-lead); line-height: var(--lh-loose);
  color: rgba(255,255,255,0.82);
  max-width: 46ch;
  margin-bottom: var(--space-5);
}
.article-hero .article-meta { color: rgba(255,255,255,0.7); }
.article-hero .article-meta .author { color: var(--cn-white); }
.article-hero .article-meta .dot { background: rgba(255,255,255,0.4); }

.article-hero .article-hero-media { margin: 0; }
.article-hero .article-hero-media img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 30px 60px -15px rgba(0,0,0,0.6), 0 12px 24px -10px rgba(0,0,0,0.45);
}

/* ---- Full-width body: content fills the container width and left-aligns with
   the hero title above it (no centered/narrowed reading column). padding-top
   sets the gap between the hero band and the first heading. ---- */
.article-v2 .article-body {
  max-width: var(--container);
  padding-top: clamp(52px, 5vw, 72px);
}
/* Quick reference now sits before the FAQ; give the FAQ that follows a proper
   section gap (its heading is first-child of its prose, so has no top margin). */
.article-v2 .quick-ref { margin-bottom: clamp(40px, 5vw, 64px); }

/* ---- Two-column example block: text left, image right ---- */
.example-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
  margin-top: clamp(40px, 5vw, 64px);
  margin-bottom: var(--space-6);
}
.example-split-text { min-width: 0; }
.example-split-media { margin: 0; }
.example-split-media img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 40px -14px rgba(10,56,87,0.30);
}
@media (max-width: 820px) {
  .example-split { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 28px); }
  .example-split-media img { aspect-ratio: 16 / 9; }
}

@media (max-width: 820px) {
  .article-hero-grid { grid-template-columns: 1fr; gap: clamp(24px, 5vw, 32px); }
  .article-hero .article-hero-media img { aspect-ratio: 16 / 9; }
}

/* ---- Floating back-to-top button ---- */
.to-top {
  position: fixed; z-index: var(--z-header);
  right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px);
  width: 48px; height: 48px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--cn-blue-deep); color: var(--cn-white);
  border: 0; cursor: pointer;
  box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out),
              visibility var(--dur-base) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
.to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { background: var(--cn-blue); }
.to-top:focus-visible { outline: 2px solid var(--cn-blue-bright); outline-offset: 2px; }
.to-top .icon { width: 22px; height: 22px; }


/* Multi-tag chip row (Profit Playbook + lever, or topic tags) */
.post-tags { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; margin-bottom: var(--space-4); }
.post-tags .post-tag { margin-bottom: 0; align-self: auto; }
.article-hero .post-tags { margin-bottom: var(--space-4); }

/* ===== Blog search + tag filter ===== */
.blog-controls-wrap { padding-top: clamp(28px, 3.5vw, 48px); padding-bottom: 0; }
.blog-search { position: relative; max-width: 520px; margin: 0 auto var(--space-5); }
.blog-search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; fill: none; stroke: var(--fg-2); stroke-width: 2; stroke-linecap: round; pointer-events: none; }
.blog-search input { width: 100%; padding: 13px 18px 13px 46px; border: 1px solid var(--border-default); border-radius: var(--radius-pill); font: inherit; color: var(--cn-blue-deep); background: var(--cn-white); }
.blog-search input::placeholder { color: var(--fg-3, #818386); }
.blog-search input:focus { outline: none; border-color: var(--cn-blue); box-shadow: var(--shadow-focus); }
.blog-filters { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; max-width: 940px; margin: 0 auto; }
.filter-chip { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--cn-blue-deep); background: var(--bg-soft); border: 1px solid var(--border-subtle); padding: 7px 14px; border-radius: var(--radius-pill); cursor: pointer; transition: background .12s ease, color .12s ease, border-color .12s ease; }
.filter-chip:hover { background: rgba(49,82,163,0.08); }
.filter-chip.is-active { background: var(--cn-blue); color: var(--cn-white); border-color: var(--cn-blue); }
.blog-result-count { text-align: center; color: var(--fg-2); font-size: var(--fs-small); margin-top: 16px; }
.blog-noresults { text-align: center; padding: 56px 16px; color: var(--fg-2); }
.link-btn { background: none; border: 0; color: var(--cn-blue); font: inherit; font-weight: var(--fw-bold); cursor: pointer; text-decoration: underline; }
.link-btn:hover { color: var(--cn-blue-deep); }
.blog-group[hidden], .blog-collection[hidden] { display: none !important; }

/* ===== Full-width audit promo band (blog hub) ===== */
.audit-promo { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; background: var(--cn-blue-deep); color: var(--cn-white); border-top: 4px solid var(--cn-green-lime); }
.audit-promo-media { position: relative; min-height: 440px; }
.audit-promo-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.audit-promo-body { display: flex; align-items: center; padding: clamp(40px, 6vw, 100px); }
.audit-promo-inner { max-width: 560px; }
.audit-promo-body h2 { color: var(--cn-white); font-size: clamp(1.9rem, 1.2rem + 2.6vw, 2.8rem); line-height: 1.1; margin: var(--space-3) 0 var(--space-4); }
.audit-promo-body p { color: rgba(255,255,255,0.85); margin-bottom: var(--space-6); }
.audit-promo-actions { display: flex; flex-wrap: wrap; gap: var(--space-4); }
@media (max-width: 820px) {
  .audit-promo { grid-template-columns: 1fr; }
  .audit-promo-media { min-height: 260px; }
}

/* Audit-focused homepage: centered single-column final CTA */
.final-cta--single .final-cta-inner { grid-template-columns: 1fr; }
.final-cta-copy--center { text-align: center; max-width: 760px; margin-inline: auto; }
.hero-actions--center { justify-content: center; }

/* ===== Stacked solution flow (homepage v2): copy + stat band + image per step ===== */
.flow-row { display: grid; grid-template-columns: 7fr 5fr; gap: clamp(28px, 4vw, 64px); align-items: stretch; padding: clamp(32px, 4vw, 56px) 0; }
.flow-row:last-child { border-bottom: 0; padding-bottom: 0; }
.flow-row--flip .flow-copy { order: 2; }
.flow-row--flip .flow-media { order: 1; }
.flow-media { position: relative; min-height: 360px; }
.flow-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-md); }
@media (max-width: 860px) { .flow-media { min-height: 0; } .flow-media img { position: static; aspect-ratio: 4 / 3; height: auto; } }
.flow-copy h3 { font-size: clamp(1.35rem, 1rem + 1.2vw, 1.8rem); margin: var(--space-3) 0; color: var(--cn-blue-deep); }
.flow-copy > p { color: var(--fg-2); max-width: 60ch; }
.trust-step-icon--green { background: rgba(139,197,63,0.18); color: var(--cn-green-dark); }
.system-stats--flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); margin-top: var(--space-6); padding: 0; border-top: 0; }
.system-stats--flow li { text-align: center; }
.system-stats--flow .stat { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); }
.system-stats--flow p { font-size: var(--fs-small); color: var(--fg-2); margin-top: 4px; }
@media (max-width: 860px) {
  .flow-row { grid-template-columns: 1fr; }
  /* Numbers / Insights rows: picture first on mobile */
  .flow-row .flow-media { order: -1; }
  .flow-row--flip .flow-copy { order: 1; }
  .flow-row--flip .flow-media { order: 2; }
  .system-stats--flow { grid-template-columns: repeat(3, 1fr); gap: 12px; }
}

/* Portrait figure caption (Experts section) */
.figure--portrait img { border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-md); }
.figure-caption { text-align: center; margin-top: 10px; color: var(--fg-2); font-size: var(--fs-small); font-weight: var(--fw-semibold, 600); }

/* Four core-report cards (solution flow, step 02) */
.report-cards { grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 1.6vw, 24px); margin: var(--space-6) 0 clamp(32px, 4vw, 56px); }
.report-cards h4 { font-size: 1.05rem; color: var(--cn-blue-deep); margin-bottom: var(--space-2); }
.report-cards p { font-size: var(--fs-small); color: var(--fg-2); }
@media (max-width: 1020px) { .report-cards { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .report-cards { grid-template-columns: 1fr; } }

.report-cards--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1020px) { .report-cards--3 { grid-template-columns: 1fr; } }

/* ===== Wireframe v3: split hero, 2-col pain grid, plan band tweaks ===== */
.hero--split { position: relative; isolation: isolate; background: var(--cn-blue-deep); overflow: hidden; min-height: min(80svh, 780px); justify-content: flex-end; padding-top: var(--header-h); padding-bottom: 0; }
.hero--split .hero-media { position: absolute; inset: 0; z-index: -2; }
.hero--split .hero-media img { width: 100%; height: 100%; object-fit: cover; }
.hero--split .hero-overlay { z-index: -1; }
.hero--split .hero-split-inner { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(20px, 2.5vw, 36px); align-items: center; padding-top: clamp(12px, 2.5vh, 28px); padding-bottom: 0; width: 100%; }
.hero--split .hero-copy { padding-bottom: clamp(76px, 10vh, 110px); }
.hero--split .hero-title { color: var(--cn-white); }
.hero--split .hero-title-accent { color: var(--cn-green-lime); }
.hero--split .hero-sub { color: rgba(255,255,255,0.88); max-width: 56ch; }
.hero--split .hero-microcopy { color: rgba(255,255,255,0.75); }
.hero-split-media img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-lg); }
.hero--split .trust-strip { z-index: 3; }
@media (max-width: 860px) { .hero--split .hero-split-inner { grid-template-columns: 1fr; } .hero-split-media { order: -1; } .hero-split-media img { aspect-ratio: 16 / 10; } }

.pain-list--grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 32px; margin-top: var(--space-7); }
@media (max-width: 820px) { .pain-list--grid { grid-template-columns: 1fr; } }

.step-more a { display: inline-flex; align-items: center; gap: 6px; font-weight: var(--fw-bold); color: var(--cn-blue); text-decoration: none; }
.step-more a:hover { color: var(--cn-blue-deep); text-decoration: underline; }
.system-stats--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 860px) { .system-stats--4 { grid-template-columns: repeat(2, 1fr); } }
.trust-step-top--center { justify-content: center; }
.outcomes-block { margin-top: clamp(40px, 5vw, 72px); }
.outcomes-title { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.3rem); color: var(--cn-blue-deep); margin: var(--space-3) 0; }

/* ===== Layered hero parallax (v2): warehouse bg drifts down, founder cutout drifts up ===== */
.hero-bg-parallax img { transform: scale(1.12); will-change: transform; }
.hero-split-media--cutout { display: flex; align-items: flex-end; justify-content: center; align-self: stretch; margin: 0; position: relative; z-index: 1; }
.hero-split-media--cutout picture { display: flex; align-items: flex-end; width: 100%; height: 100%; }
.hero-split-media--cutout img { display: block; width: 100%; height: 100%; max-width: none; max-height: none; aspect-ratio: auto; object-fit: contain; object-position: bottom center; border-radius: 0; box-shadow: none; filter: drop-shadow(0 18px 32px rgba(0,0,0,0.45)); will-change: transform; vertical-align: bottom; }
@media (max-width: 860px) {
  /* navy-only background: hide the warehouse image and its screen */
  .hero--split .hero-media, .hero--split .hero-overlay { display: none; }
  .hero--split .hero-split-media--cutout { order: -1; margin: 0 0 var(--space-5); padding: 0; align-self: stretch; height: auto; width: 100vw; margin-left: calc(50% - 50vw); }
  .hero--split .hero-split-media--cutout picture { height: auto; width: 100%; }
  .hero--split .hero-split-media--cutout img { position: static; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 0; box-shadow: none; filter: none; margin: 0; }
  .hero--split .hero-copy { order: 2; padding-bottom: 0; }
  .hero--split .trust-strip { position: static; margin-top: var(--space-5); }
}

.hero--split .hero-overlay { background: rgba(10,56,87,0.86); }

/* Detail-step headers: big number first, icon just to its right */
.trust-step-top--inline { display: inline-flex; justify-content: flex-start; align-items: center; gap: 14px; }
.trust-step-top--inline .trust-step-num { order: 0; }
.trust-step-top--inline .trust-step-icon { order: 1; margin-left: 2px; }
.trust-step-top--inline.trust-step-top--center { justify-content: center; display: flex; }

/* Offer image fills the column when it stands alone (no quote below it) */
.offer-side .offer-figure:only-child { height: 100%; position: relative; min-height: 340px; }
.offer-side .offer-figure:only-child img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) { .offer-side .offer-figure:only-child { position: static; min-height: 0; height: auto; } .offer-side .offer-figure:only-child img { position: static; aspect-ratio: 1 / 1; height: auto; } }

/* Plan overview on deep navy: white cards keep their own text colors */
.section--deep .trust-step { color: var(--fg-2); }
.section--deep .trust-step h3 { color: var(--cn-blue-deep); }
.section--deep .trust-sep { color: var(--cn-green-lime); }

/* Outcome card on the navy band: solid pale-green fill instead of transparent tint */
.section--deep .trust-step--outcome { background: #F3F9E9; border-color: var(--cn-green-lime); }

/* Gentle float on the hero founder (wrapper animates; JS parallax owns the img transform) */
@keyframes founder-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-7px); }
}
@media (min-width: 861px) {
  .hero-fg-parallax picture { animation: founder-float 6.5s ease-in-out infinite; will-change: transform; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-fg-parallax picture { animation: none; }
}

/* ===== Plan band background (right-biased, zoomed, parallax) + navy screen ===== */
.plan-band { position: relative; }
.plan-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.plan-media img { width: 100%; height: 100%; object-fit: cover; object-position: 82% center; transform: scale(1.2); will-change: transform; }
.plan-overlay { position: absolute; inset: 0; z-index: 0; background: rgba(10,56,87,0.86); }
@media (prefers-reduced-motion: reduce) { .plan-media img { transform: scale(1.2); } }

/* Problem section on mobile: image above the copy */
@media (max-width: 900px) {
  #problem .split-media { order: -1; }
}

/* 50/50 step rows (desktop): natural square images beside the copy */
@media (min-width: 861px) {
  .flow-row--kpi, .flow-row--half { grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 32px); }
}
.flow-row--kpi .flow-media, .flow-row--half .flow-media { position: static; min-height: 0; display: flex; align-items: center; }
.flow-row--kpi .flow-media img, .flow-row--half .flow-media img { position: static; width: 100%; height: auto; object-fit: contain; border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-md); }
@media (max-width: 860px) {
  .flow-row--kpi .flow-media img, .flow-row--half .flow-media img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
}

/* Outcomes split inside the plan-detail section */
.outcomes-split { margin-top: clamp(40px, 5vw, 72px); }
@media (max-width: 900px) { .outcomes-split .split-media { order: -1; } }

/* Dream-outcome band: pale green panel with lime accent */
.outcomes-band { background: #F3F9E9; border: 1px solid rgba(139,197,63,0.45); border-top: 4px solid var(--cn-green-lime); border-radius: var(--radius-lg, 16px); padding: clamp(24px, 3.5vw, 56px); margin-top: clamp(40px, 5vw, 72px); }
.outcomes-band .outcomes-split { margin-top: 0; }
.outcomes-band .offer-microcopy { color: var(--fg-2); }

/* "Our 4-step plan · Part" wayfinding label before the step numbers */
.step-label { font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--cn-blue); margin-right: 2px; }

/* ===== Audit booking modal ===== */
.modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(10,56,87,0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.modal-card { position: relative; background: var(--cn-white); border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-lg); width: min(480px, 100%); max-height: calc(100vh - 40px); overflow: auto; padding: clamp(24px, 4vw, 36px); animation: modal-in 200ms cubic-bezier(0.22, 0.61, 0.36, 1); }
@keyframes modal-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.modal-close { position: absolute; top: 14px; right: 14px; background: var(--bg-soft); border: 0; border-radius: var(--radius-pill); width: 36px; height: 36px; display: grid; place-items: center; cursor: pointer; color: var(--cn-blue-deep); }
.modal-close:hover { background: rgba(49,82,163,0.12); }
.modal-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .modal-card { animation: none; } }

/* Footer lockup: tagline sized/tracked to end flush with CRONOSNOW (measured) */
.footer-logo-text { display: flex; flex-direction: column; line-height: 1.05; }
.footer-logo-tagline { font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: 0.6875rem; letter-spacing: 0.034em; color: rgba(255,255,255,0.72); margin-top: 3px; white-space: nowrap; }

/* Footer: centered tagline banner + brand address */
.footer-tagline-banner { text-align: center; font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: clamp(1.15rem, 1rem + 0.8vw, 1.5rem); color: var(--cn-white); margin: 0 0 clamp(28px, 4vw, 48px); }
.footer-tagline-accent { color: var(--cn-green-lime); }
.footer-brand-address { font-style: normal; color: var(--cn-white); line-height: 1.6; font-size: var(--fs-small); }

/* Final CTA: center the microcopy under the button */
.final-cta .hero-microcopy { margin-inline: auto; text-align: center; }

/* ===== Playbook announcement bar (blog pages) ===== */
.playbook-bar { position: fixed; inset: 0 0 auto 0; z-index: calc(var(--z-header) + 1); height: 40px; display: flex; align-items: center; justify-content: center; gap: 6px; background: var(--cn-green-lime); color: var(--cn-blue-deep); font-family: var(--font-heading); font-weight: var(--fw-medium); font-size: var(--fs-small); text-decoration: none; border-bottom: 2px solid var(--cn-blue-deep); padding: 0 14px; text-align: center; transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); }
.playbook-bar strong { color: var(--cn-white); font-weight: var(--fw-bold); }
.playbook-bar .icon { width: 15px; height: 15px; }
/* Hover: the same darker lime as .btn-accent:hover, with everything
   going white so the two-tone label resolves into one legible line. */
.playbook-bar:hover, .playbook-bar:focus-visible { background: #7BB233; color: var(--cn-white); }
.playbook-bar:hover strong, .playbook-bar:focus-visible strong { color: var(--cn-white); }
.playbook-bar .icon { transition: transform var(--dur-base) var(--ease-out); }
.playbook-bar:hover .icon { transform: translateX(3px); }
.has-playbook-bar .site-header { top: 40px; }
.has-playbook-bar main { padding-top: 40px; }
.has-playbook-bar .to-top { z-index: var(--z-header); }

/* ===== Playbook capture page ===== */
.playbook-hero { align-items: start; }
.playbook-title { color: var(--cn-white); font-size: clamp(2rem, 1.3rem + 2.6vw, 3rem); line-height: 1.08; margin: var(--space-3) 0 var(--space-4); }
.playbook-hero .booking-card { margin-top: var(--space-6); }
.playbook-cover img { width: 100%; height: auto; border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-lg); }
@media (max-width: 900px) { .playbook-hero .split-media { order: -1; } }

/* Playbook full-bleed hero */
.pb-hero { position: relative; isolation: isolate; overflow: hidden; display: grid; place-items: center; min-height: min(72svh, 680px); padding: calc(var(--header-h) + 40px) 0 56px; background: var(--cn-blue-deep); }
.pb-hero-media { position: absolute; inset: 0; z-index: -2; }
.pb-hero-media img { width: 100%; height: 100%; object-fit: cover; }
.pb-hero-overlay { position: absolute; inset: 0; z-index: -1; background: rgba(10,56,87,0.78); }
.pb-hero-inner { text-align: center; max-width: 760px; }
.pb-hero-microcopy { margin-inline: auto; text-align: center; margin-top: var(--space-4); }
.pb-form-card { margin-inline: auto; max-width: 520px; }

.pb-form-card--left { margin-inline: 0; margin-top: var(--space-5); }
#get-playbook .playbook-cover img { width: 100%; height: auto; }
@media (max-width: 900px) { #get-playbook .split-media { order: 2; } }

/* Capture section: left-align copy, cover fills the right column */
#get-playbook .offer-title { margin-inline: 0; }
#get-playbook .split--7-5 { align-items: stretch; }
.playbook-cover--fill { position: relative; margin: 0; min-height: 420px; }
.playbook-cover--fill img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-lg); }
@media (max-width: 900px) { .playbook-cover--fill { position: static; min-height: 0; } .playbook-cover--fill img { position: static; aspect-ratio: 1 / 1; height: auto; } }

/* Playbook page: tighten the why -> plays seam */
#why-playbook { padding-bottom: clamp(28px, 3.5vw, 48px); }
#plays { padding-top: clamp(28px, 3.5vw, 48px); }

/* Capture section: 50/50 columns, tight gap, image bottoms out with the form */
@media (min-width: 901px) { #get-playbook .split--7-5 { grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 32px); } }
.playbook-cover--fill { align-self: stretch; }

/* Capture cover: contain to the row height exactly (bottom = form bottom) */
#get-playbook .playbook-cover--fill { min-height: 0; overflow: hidden; border-radius: var(--radius-lg, 16px); }
#get-playbook .playbook-cover--fill img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }

/* Playbook hero mobile: square photo served via <picture>, homepage full-bleed rules apply */

/* Why section: 50/50 with a big natural square image */
@media (min-width: 901px) { #why-playbook .why-split { grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 32px); } }
@media (max-width: 900px) { #why-playbook .split-media { order: -1; } }
#why-playbook .playbook-cover img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-lg, 16px); box-shadow: var(--shadow-md); }

/* Check list on the navy capture band */
.trust-points--onDark { border-top: 0; padding-top: var(--space-2); margin-bottom: var(--space-2); }
.trust-points--onDark li { color: rgba(255,255,255,0.88); font-size: var(--fs-body); }
.trust-points--onDark .icon { color: var(--cn-green-lime); }

/* Comparison table on mobile: narrower sticky capability column so the
   provider columns get the scroll space; labels wrap over 1-2 lines */
@media (max-width: 700px) {
  .compare-table thead th.cap-col { min-width: 0; width: 34vw; max-width: 150px; font-size: var(--fs-micro); }
  .compare-table tbody th {
    min-width: 0; width: 34vw; max-width: 150px;
    white-space: normal; overflow-wrap: break-word;
    font-size: 0.8rem; line-height: 1.35;
    padding: var(--space-3) var(--space-3) var(--space-3) var(--space-2);
  }
  .compare-table tbody td { padding: var(--space-3) var(--space-2); min-width: 84px; }
  .compare-table thead th { font-size: var(--fs-micro); }
}

/* Keep the lockup compact on small screens (tagline stays visible) */
@media (max-width: 480px) {
  .brand-name { font-size: 1.25rem; letter-spacing: 0.012em; }
  .brand-tagline { font-size: 0.55rem; }
  .brand-mark { width: 40px; height: 39px; }
}

/* Pain-list warning marker: amber alert triangle */
.mark--warn { background: rgba(217,119,6,0.12); color: #B45309; }

/* Amber variant of the turn callout (matches the warning-triangle pain list) */
.turn--amber { border-left-color: #D97706; background: #FDF4E7; }

/* Service-page heroes: green eyebrow + green title accent */
.eyebrow--green { color: var(--cn-green-lime); }
.hero-title-accent--green { color: var(--cn-green-lime); }

/* Service heroes: 20% darker screen for stronger text contrast (matches homepage) */
.hero-overlay--darker { background: rgba(10,56,87,0.86); }

/* Lime audit band: navy CTA + navy-tinted lead text */
.audit-band--green .lead { color: rgba(10,56,87,0.85); }
.audit-band--green .btn-white { background: var(--cn-blue-deep); color: var(--cn-white); }
.audit-band--green .btn-white:hover { background: var(--cn-blue); }

/* Service heroes on mobile: square image on top, flat navy behind the copy */
.hero-mobile-square { display: none; }
@media (max-width: 860px) {
  .hero--mobile-square .hero-media, .hero--mobile-square .hero-overlay { display: none; }
  .hero--mobile-square { background: var(--cn-blue-deep); }
  .hero-mobile-square { display: block; margin: 0 0 var(--space-5); width: 100vw; align-self: center; }
  .hero-mobile-square img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; }
}

.final-tagline-accent { color: var(--cn-green-lime); }

/* Quote form extras: optional labels, channel pills, textarea */
.field-optional { font-weight: var(--fw-regular, 400); color: var(--fg-2); font-size: var(--fs-small); }
.field--checks { border: 0; padding: 0; margin: 0; }
.field--checks legend { font-weight: var(--fw-semibold, 600); margin-bottom: var(--space-2); padding: 0; }
.check-row { display: flex; flex-wrap: wrap; gap: 8px; }
.check-pill { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-pill); font-size: var(--fs-small); cursor: pointer; background: var(--cn-white); }
.check-pill:has(input:checked) { border-color: var(--cn-blue); background: rgba(49,82,163,0.08); color: var(--cn-blue-deep); font-weight: var(--fw-semibold, 600); }
.check-pill input { accent-color: var(--cn-blue); margin: 0; }
.field textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--border-default); border-radius: var(--radius-md, 8px); font: inherit; color: inherit; resize: vertical; background: var(--cn-white); }
.field textarea:focus { outline: none; border-color: var(--cn-blue); box-shadow: var(--shadow-focus); }

/* Honeypot: parked off-screen rather than display:none, because smarter
   bots skip fields they can see are display:none. Humans never encounter
   it; tabindex=-1 keeps it out of keyboard order too. */
.hp-wrap { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Quote mode toggle: fill in the form (default) or book a Calendly call */
/* Scoped via :has so the diagnostic and Playbook cards, which share
   .booking-title but have no toggle, keep their left-aligned titles */
.booking-card:has(.quote-mode) .booking-title { text-align: center; }
.quote-mode { display: flex; gap: 4px; margin-bottom: var(--space-5); padding: 4px; border: 1px solid var(--border-default); border-radius: var(--radius-pill); }
.quote-mode-btn { flex: 1; padding: 10px 14px; border: 0; border-radius: var(--radius-pill); background: transparent; font: inherit; font-size: var(--fs-small); font-weight: var(--fw-semibold, 600); color: var(--fg-2); cursor: pointer; }
.quote-mode-btn.is-active { background: var(--cn-blue); color: var(--cn-white); }
.quote-mode-btn:focus-visible { outline: 2px solid var(--cn-blue); outline-offset: 2px; }
.quote-call-avatar { display: block; margin: 0 auto var(--space-4); width: 140px; height: auto; }
.quote-call-intro { margin: 0 0 var(--space-3); font-size: var(--fs-small); color: var(--fg-2); text-align: center; }
/* Calendly draws its own generous gutter inside the iframe, which we cannot
   style (cross-origin). Instead the widget bleeds into the card's padding
   (clamp(24px, 3vw, 40px) each side), so the calendar's visible content
   lines up with the card content instead of sitting inside double padding. */
.quote-call .calendly-inline-widget { margin-left: calc(-1 * clamp(24px, 3vw, 40px)); margin-right: calc(-1 * clamp(24px, 3vw, 40px)); }
/* [hidden] must always win, whatever display the elements otherwise carry */
.booking-form[hidden], .quote-call[hidden] { display: none !important; }

/* Get a Quote page: even 50/50 split between copy and form */
@media (min-width: 901px) {
  .final-cta--even .final-cta-inner { grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 48px); }
}

/* Checkboxes: undo the global text-input styling (appearance:none was erasing them) */
.field input[type="checkbox"] {
  width: 17px; height: 17px; min-height: 0; padding: 0; margin: 0;
  appearance: auto; -webkit-appearance: auto;
  border: 0; box-shadow: none; accent-color: var(--cn-blue); flex: none;
}

/* Get a Quote form: tighter vertical rhythm between fields */
.final-cta--even .booking-form { gap: var(--space-3); }
.final-cta--even .field { gap: 6px; }

/* Ensure [hidden] wins over .field's display:grid (confirm-email reveal) */
.field[hidden] { display: none !important; }

/* Term tooltips (e.g. BAU): dotted underline, hover / tap / keyboard-focus bubble */
.term-tip {
  position: relative;
  text-decoration: underline dotted currentColor 1.5px;
  text-underline-offset: 3px;
  cursor: help;
  border-bottom: 0;
}
.term-tip::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  width: max-content;
  max-width: min(280px, 74vw);
  background: var(--cn-blue-deep);
  color: #fff;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  padding: 10px 14px;
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(10, 56, 87, 0.28);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  pointer-events: none;
  z-index: 40;
}
.term-tip::before {
  content: "";
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-bottom-color: var(--cn-blue-deep);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease;
  z-index: 40;
}
.term-tip:hover::after, .term-tip:focus::after, .term-tip:focus-visible::after,
.term-tip:hover::before, .term-tip:focus::before, .term-tip:focus-visible::before {
  opacity: 1;
  visibility: visible;
}

/* Problem section: CTA sits below the amber callout, centered */
.problem-cta { text-align: center; margin-top: var(--space-6); }

/* Step 02 image: visibly shorter frame, cropping mostly from the top (desktop only) */
@media (min-width: 861px) {
  #step-information .flow-media img { aspect-ratio: 1 / 0.86; height: auto; object-fit: cover; object-position: 50% 82%; }
}

/* Icon cards: icon left, title beside it, description full width below.
   Saves ~60px per card and reads as one unit. Text stays left-aligned. */
.card:has(> .card-icon) {
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: var(--space-4);
  align-content: start;
  text-align: left;
}
.card:has(> .card-icon) > .card-icon { grid-column: 1; margin-bottom: 0; align-self: center; }
.card:has(> .card-icon) > h3,
.card:has(> .card-icon) > h4 { grid-column: 2; margin: 0; align-self: center; }
.card:has(> .card-icon) > :not(.card-icon):not(h3):not(h4) { grid-column: 1 / -1; }
.card:has(> .card-icon) > p { margin-top: var(--space-3); }

/* Landing-page chrome: single-CTA header, slim footer */
.site-header--landing .header-inner { justify-content: space-between; }
.landing-header-cta { white-space: nowrap; }
@media (max-width: 560px) { .landing-header-cta { padding: 9px 14px; font-size: 0.8rem; } }

/* Pages that also render the sticky .mobile-cta bar drop the header button
   on small screens. A long CTA label has nowhere to go beside the wordmark
   and gets clipped, and the sticky bar (<=768px) plus the hero button are
   the better tap targets anyway. 860px, not 768px, so it flips at the same
   width as the hero's mobile-square layout - between 769 and 860px the
   hero CTA at the top of the page carries the load. Opt in per page with
   `hideHeaderCtaMobile: true` in front matter. */
@media (max-width: 860px) { .landing-header-cta--hide-mobile { display: none !important; } }

.site-footer--slim .footer-slim-brand {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: var(--space-4); padding: var(--space-6) 0;
}
.site-footer--slim .footer-brand-address { text-align: center; }

/* "Three events" block: same split rhythm as the section head above it */
.head-split--events { margin-top: var(--space-8); align-items: center; }

/* Scarcity flag: red urgency line above CTA microcopy */
.scarcity-flag { color: var(--color-danger, #C0392B); font-weight: 700; }
.section--deep .scarcity-flag, .final-cta .scarcity-flag { color: #FF9B8F; }

/* Audit modal: compact deliverables list above the form */
.modal-benefits { list-style: none; margin: 0 0 var(--space-5); padding: 0; display: grid; gap: 10px; }
.modal-benefits li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.92rem; line-height: 1.45; color: var(--fg-2); }
.modal-benefits .icon { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--cn-green-dark); }

/* ===================== Policy / terms pages ===================== */
/* Legal documents: navy hero with no media, clause-ruled prose, 2-col jump menu */
.policy-hero { text-align: left; }
.policy-hero .article-dek { max-width: 62ch; }
.policy-hero .article-meta { margin-top: var(--space-5); }

/* Jump menu: many short clauses, so run it in two columns on wide screens */
.toc--policy .toc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-5); }
.toc--policy .toc-list a { align-items: flex-start; font-size: var(--fs-small); line-height: 1.35; }
.toc--policy .toc-list a::before { margin-top: -1px; }
@media (max-width: 700px) {
  .toc--policy .toc-list { grid-template-columns: 1fr; }
}

/* Clause rule: replaces the horizontal rules of the source document */
.prose--policy > h2 {
  font-size: var(--fs-h3);
  border-top: 1px solid var(--border-subtle);
  padding-top: clamp(28px, 3.5vw, 44px);
  margin-top: clamp(32px, 4vw, 52px);
}
.prose--policy > h2:first-child { border-top: 0; padding-top: 0; }
.prose--policy p { font-size: var(--fs-body); }
.prose--policy > ul, .prose--policy > ol { gap: var(--space-3); }
.prose--policy .policy-list-lead { margin-bottom: var(--space-4); }

/* Hourly rates read as a rate card, not body copy */
.policy-rates > li { font-variant-numeric: tabular-nums; font-weight: var(--fw-semibold); }

/* Cross-links to the other engagement variants */
.policy-switch {
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(24px, 3vw, 32px);
  background: var(--bg-soft);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
}
.policy-switch-title {
  font-family: var(--font-heading); font-weight: var(--fw-bold);
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  color: var(--cn-blue); margin: 0 0 var(--space-4);
}
.policy-switch-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.policy-switch-list a {
  display: grid; grid-template-columns: 1fr auto; align-items: center;
  column-gap: var(--space-4);
  padding: var(--space-4);
  background: var(--cn-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.policy-switch-list a:hover { border-color: var(--cn-blue); box-shadow: var(--shadow-sm); text-decoration: none; }
.policy-switch-name {
  font-family: var(--font-heading); font-weight: var(--fw-bold);
  color: var(--cn-blue-deep); font-size: var(--fs-body);
}
.policy-switch-note { grid-column: 1; color: var(--fg-2); font-size: var(--fs-small); line-height: var(--lh-normal); }
.policy-switch-list .icon { grid-row: 1 / span 2; width: 20px; height: 20px; color: var(--cn-blue); }

/* ---- Policies index ---- */
.policy-hero--center { text-align: center; }
.policy-hero--center h1 {
  color: var(--cn-white);
  margin-bottom: var(--space-4);
  /* .article-hero h1 caps the width at 18ch, which is right for the
     left-aligned heroes but leaves the box flush left here. Centre the
     box itself, not just the text inside it. */
  margin-inline: auto;
}
.policy-hero--center .article-dek { max-width: 66ch; margin-inline: auto; }

/* Whole card is the link */
.policy-card { text-decoration: none; }
.policy-card:hover { text-decoration: none; box-shadow: var(--shadow-md); }
.policy-card h3 { color: var(--cn-blue-deep); font-size: var(--fs-h4); }
.policy-card:hover h3 { color: var(--cn-blue); }
.policy-card-cta {
  display: inline-flex; align-items: center; gap: var(--space-2);
  margin-top: var(--space-5);
  font-family: var(--font-heading); font-weight: var(--fw-bold);
  font-size: var(--fs-small); color: var(--cn-blue);
}
.policy-card-cta .icon { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
.policy-card:hover .policy-card-cta .icon { transform: translateX(3px); }

/* Cards in this grid stretch to equal height so the CTA sits on a common line */
.policy-grid .policy-card { align-content: space-between; }
.policy-shared .card h4 { color: var(--cn-blue-deep); }
.policy-cta-actions { display: flex; justify-content: center; margin: var(--space-6) 0 0; }

/* ===================== Quote-received (conversion page) ===================== */
.thanks-hero {
  background: var(--cn-blue-deep);
  color: rgba(255,255,255,0.85);
  padding-block: calc(var(--header-h) + clamp(40px, 6vw, 72px)) clamp(40px, 6vw, 72px);
  text-align: center;
}
.thanks-hero h1 { color: var(--cn-white); margin-bottom: var(--space-4); }
.thanks-hero .lead { margin-inline: auto; max-width: 58ch; color: rgba(255,255,255,0.82); }
.thanks-badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: rgba(139,197,63,0.16);
  color: var(--cn-green-lime);
  margin-bottom: var(--space-5);
}
.thanks-badge .icon { width: 34px; height: 34px; }
.thanks-ref {
  margin-top: var(--space-5);
  font-size: var(--fs-micro); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow);
  color: rgba(255,255,255,0.55);
}
.thanks-ref span { color: var(--cn-green-lime); font-weight: var(--fw-bold); }

/* Numbered next-steps, same counter treatment as .prose ol */
.thanks-steps { display: grid; gap: var(--space-4); counter-reset: step; margin: 0; padding: 0; }
.thanks-steps > li {
  display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: start;
  background: var(--cn-white);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-5);
}
.thanks-steps > li::before {
  counter-increment: step; content: counter(step);
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(49,82,163,0.1); color: var(--cn-blue);
  font-family: var(--font-heading); font-weight: var(--fw-bold); font-size: var(--fs-body);
  display: inline-flex; align-items: center; justify-content: center;
}
.thanks-steps h3 { font-size: var(--fs-h4); margin-bottom: var(--space-2); color: var(--cn-blue-deep); }
.thanks-steps p { margin: 0; color: var(--fg-2); line-height: var(--lh-normal); }
.thanks-note {
  margin-top: clamp(28px, 3.5vw, 40px);
  text-align: center; font-size: var(--fs-small); color: var(--fg-2);
}
.thanks-links .read-more { margin-top: var(--space-4); }

/* Footer legal links: deliberately small and quiet, present but not competing */
.footer-legal-links { font-size: 0.72rem; letter-spacing: 0.01em; margin-bottom: var(--space-2); opacity: 0.75; }
.footer-legal-links a { color: rgba(255,255,255,0.8); text-decoration: underline; text-underline-offset: 2px; }
.footer-legal-links a:hover, .footer-legal-links a:focus-visible { color: var(--cn-green-lime); opacity: 1; }

/* Playbook bar: the gift mark. Decorative (aria-hidden), so it can be dropped
   on very narrow screens without losing any meaning. */
.playbook-bar-gift { font-size: 1.05em; line-height: 1; }
@media (max-width: 380px) { .playbook-bar-gift { display: none; } }

/* Heading levels were corrected for accessibility (no h2 -> h4 skips).
   These keep the previous visual weight now that the tags have changed. */
.card h3, .card h4 { margin-bottom: var(--space-2); }
.card--leak h3, .policy-shared .card h3 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-snug); color: var(--cn-blue-deep); }
.final-cta-copy h1 { color: var(--cn-white); font-size: var(--fs-h2); font-weight: var(--fw-bold); }
@media print { .final-cta-copy h1 { color: #000 !important; } }
.stack-list h3 { font-size: var(--fs-h4); font-weight: var(--fw-semibold); line-height: var(--lh-snug); }
.booking-card h2.booking-title { font-size: var(--fs-h4); font-weight: var(--fw-bold); }

/* Offer value anchor */
.value-anchor { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 10px; margin: var(--space-3) 0 var(--space-4); }
.value-anchor-strike { color: rgba(255,255,255,0.62); text-decoration: line-through; font-size: var(--fs-lead); }
.value-anchor-free { color: var(--cn-green-lime); font-family: var(--font-heading); font-weight: var(--fw-extra); font-size: clamp(1.15rem, 0.9rem + 1vw, 1.6rem); }

/* Restrictions on use: present but not shouting, collapsed by default */
.restrictions { border: 1px solid var(--border-subtle); border-radius: var(--radius-md); padding: var(--space-4) var(--space-5); background: var(--cn-white); }
.restrictions summary { cursor: pointer; font-size: var(--fs-small); color: var(--fg-2); }
.restrictions summary strong { color: var(--cn-blue-deep); }
.restrictions p { margin: var(--space-4) 0 0; font-size: 0.82rem; line-height: 1.65; color: var(--fg-2); }

/* Final CTA deal terms: the four lines a skimmer must not miss */
.final-points--deal { gap: var(--space-3); }
.final-points--deal li { align-items: flex-start; font-size: var(--fs-body); }
.final-points--deal strong { color: var(--cn-green-lime); font-weight: var(--fw-bold); }
.final-points--deal .icon { margin-top: 3px; color: var(--cn-green-lime); }
.final-footnote { font-size: 0.78rem; line-height: 1.6; color: rgba(255,255,255,0.72); margin-top: var(--space-4); max-width: 56ch; }
.final-footnote a { color: rgba(255,255,255,0.9); text-decoration: underline; }
.final-footnote a:hover { color: var(--cn-green-lime); }

/* "Last step" subhead above the deal terms */
.final-subhead { color: var(--cn-white); font-size: var(--fs-h4); font-weight: var(--fw-bold); margin: var(--space-5) 0 var(--space-3); }

/* Eligibility gate: an obvious stop, not a subtle hint */
.form-gate { border: 2px solid var(--color-danger, #C0392B); border-radius: var(--radius-md); background: #FDECEA; padding: var(--space-4) var(--space-5); margin-bottom: var(--space-4); }
.form-gate p { color: #7A1F16; font-size: var(--fs-small); line-height: 1.6; margin: 0 0 var(--space-3); }
.form-gate p:last-child { margin-bottom: 0; }
.form-gate strong { color: #7A1F16; font-size: var(--fs-body); }
.form-gate a { color: #7A1F16; text-decoration: underline; font-weight: var(--fw-bold); }
.form-gate a:hover { color: #000; }
.booking-form button[type="submit"]:disabled { opacity: 0.45; cursor: not-allowed; }

/* "You must provide" list: same layout, quieter marks so it reads as terms
   rather than as more benefits */
.final-subhead--req { margin-top: var(--space-6); }
.final-points--req li { align-items: flex-start; font-size: var(--fs-body); }
.final-points--req strong { color: var(--cn-white); font-weight: var(--fw-bold); }
.final-points--req .icon { margin-top: 3px; color: rgba(255,255,255,0.72); }