/* ==========================================================================
   AKG Marketing — site.css
   Static site for Cloudflare Pages. Hand-built, no framework, no build step.

   DESIGN DIRECTION, settled 14 Aug 2026 over three rounds. Read this before
   restyling anything, because two of the three rounds were rejected.

   Round 1 was dark and read as generic AI software. Round 2 stripped the dark
   out entirely, matched the live Wix site's all-light palette, and was
   correct but boring. Round 3 is where it landed: THE DARK IS BACK, but
   built like a marketing agency instead of a SaaS dashboard.

   The distinction matters, because the dark was never the problem. These
   were, and none of them may come back:
     - Radial green glows and gradient grounds. Flat colour only.
     - Blueprint grid overlays, film grain, frosted glass.
     - Uppercase monospace labels. There is NO monospace on this site.
     - Fully rounded pill buttons. The live CTA is radius 0; ours is 2px.
     - Neon green focus rings. The focus ring is dark.
     - Numbering things that are not sequences.

   What carries the dark instead: flat deepened slate, ONE very large quiet
   monogram per dark section, bone-coloured text rather than pure white
   (warm off-white on slate reads editorial, pure white on navy reads
   dashboard), and Georgia italic where the monospace used to be.

   Grounds alternate dark / bone / dark / bone so the page has rhythm, with
   one solid green band at the closing CTA and a flat brand-slate footer.

   RESPONSIVE RULE: nothing has a fixed width. Type is clamp(), layout is
   grid/flex, and every grid child carries min-width:0 (see §3). That is the
   direct fix for what broke the Wix site.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. FONT
   Questrial, self-hosted. Not from Google: it removes a third-party
   connection from the critical path and hands no visitor IP to Google.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Questrial";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/questrial-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Questrial";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/questrial-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

:root {
  /* --- brand, exactly as specified ------------------------------------- */
  --slate:      #36454F;
  --green:      #3D7A6F;
  --bone:       #F5F3EE;
  --offwhite:   #F4F4F4;

  /* --- neutrals -------------------------------------------------------
     Warm-biased, so they sit with bone rather than fighting it. A pure
     blue-grey ramp is what made the old version read as software. */
  --ink-950:  #14140F;
  --ink-900:  #1C1C18;
  --ink-800:  #2B2B26;
  --ink-600:  #4B4B44;
  --ink-500:  #61615A;
  --ink-400:  #6E6E66;
  --ink-300:  #A5A49C;
  --ink-200:  #CFCDC5;
  --ink-150:  #E2E0D9;
  --ink-100:  #EDEBE4;

  /* --- green ----------------------------------------------------------- */
  --green-900: #1E3D38;
  --green-800: #274F48;
  --green-700: #2F5F56;
  --green-600: #3D7A6F;   /* = brand green */
  --green-500: #4C8D82;
  --green-300: #8FBDB4;
  --green-100: #DDE9E6;
  --green-050: #EFF5F3;

  /* --- the dark ---------------------------------------------------------
     Deepened brand slate. What made the first dark version read as software
     was never the hue: it was the radial glows, the blueprint grid, the
     frosted glass and the mono labels. Those are gone. What is left is flat
     colour, one very large quiet monogram, and bone-coloured text.

     Text on dark is BONE, not white. A warm off-white on slate reads
     editorial; pure white on navy reads dashboard. */
  --slate-deep: #212B32;
  --slate-mid:  #2A363E;

  --on-dark:       var(--bone);
  --on-dark-soft:  rgba(245,243,238,.74);
  --on-dark-faint: rgba(245,243,238,.55);
  --rule-on-dark:  rgba(245,243,238,.18);

  /* --- semantic -------------------------------------------------------- */
  --fg:         var(--ink-900);
  --fg-soft:    var(--ink-600);
  --fg-faint:   var(--ink-400);
  --fg-invert:  #FFFFFF;
  --fg-invert-soft: rgba(255,255,255,.78);

  --bg:       #FFFFFF;
  --bg-bone:  var(--bone);
  --bg-off:   var(--offwhite);
  --bg-slate: var(--slate);
  --bg-green: var(--green-600);

  --rule:        #E3E0D8;
  --rule-strong: #C9C5BA;
  --rule-ink:    var(--ink-900);
  --rule-invert: rgba(255,255,255,.22);

  --danger: #A63A22;

  /* --- type ------------------------------------------------------------ */
  --font-display: "Questrial", Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-body:    Arial, "Helvetica Neue", Helvetica, sans-serif;
  --font-label:   Georgia, "Times New Roman", serif;

  --fs-display: clamp(2.5rem, 1.5rem + 4.4vw, 4.9rem);
  --fs-h1:      clamp(2.1rem, 1.5rem + 2.8vw, 3.7rem);
  --fs-h2:      clamp(1.75rem, 1.36rem + 1.8vw, 2.8rem);
  --fs-h3:      clamp(1.2rem, 1.1rem + 0.48vw, 1.5rem);
  --fs-h4:      clamp(1.04rem, 1rem + 0.22vw, 1.16rem);
  --fs-lead:    clamp(1.06rem, 1rem + 0.34vw, 1.28rem);
  --fs-body:    clamp(1rem, 0.975rem + 0.12vw, 1.06rem);
  --fs-sm:      0.9375rem;
  --fs-xs:      0.8375rem;
  --fs-label:   0.9rem;      /* Georgia italic labels. Never under 12px. */

  --lh-tight: 1.05;
  --lh-snug:  1.16;
  --lh-body:  1.62;

  /* --- space ----------------------------------------------------------- */
  --sp-1: .25rem;  --sp-2: .5rem;   --sp-3: .75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;  --sp-6: 2rem;    --sp-7: 2.75rem; --sp-8: 3.5rem;
  --sp-section: clamp(3.75rem, 2.1rem + 6.8vw, 7.5rem);
  --sp-gutter:  clamp(1.25rem, .7rem + 2.2vw, 2.5rem);

  --wrap:      78rem;
  --wrap-wide: 88rem;
  --wrap-text: 44rem;

  /* --- radius ----------------------------------------------------------
     Softened 14 Aug. 2px read as brutally square. These are rounded enough
     to feel considered and stop well short of the bubbly pill-everything
     look that was part of the original problem. Badges stay fully round,
     because a badge genuinely is a pill. */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius:    8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  --shadow-sm: 0 1px 2px rgba(20,20,15,.05);
  --shadow:    0 1px 3px rgba(20,20,15,.06), 0 6px 16px -8px rgba(20,20,15,.10);
  --shadow-lg: 0 2px 6px rgba(20,20,15,.05), 0 18px 40px -14px rgba(20,20,15,.16);

  --ease:     cubic-bezier(.3,.7,.4,1);
  --ease-out: cubic-bezier(.16,1,.3,1);

  color-scheme: light;
}

/* --------------------------------------------------------------------------
   2. RESET
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
  overflow-x: clip;
}

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  min-height: 100vh;
}

img, svg, video, canvas { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: var(--lh-snug);
  letter-spacing: -0.018em;
  text-wrap: balance;
  color: var(--ink-950);
}

p { text-wrap: pretty; }

/* A dark ring, not a green one. Neon accent rings were part of the problem. */
:focus-visible {
  outline: 2px solid var(--ink-900);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}
.on-dark :focus-visible { outline-color: #fff; }

::selection { background: var(--green-600); color: #fff; }

/* --------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   -------------------------------------------------------------------------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--sp-gutter);
}
.wrap--wide { max-width: var(--wrap-wide); }
.wrap--text { max-width: var(--wrap-text); }

.sect { padding-block: var(--sp-section); position: relative; }
.sect--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4.5rem); }

.sect--bone  { background: var(--bg-bone); }
.sect--off   { background: var(--bg-off); }

/* Flat deep slate. No gradient, no grid, no glow, no texture.
   The only thing on it is one very large, very quiet monogram. */
.sect--slate {
  position: relative;
  background: var(--slate-deep);
  color: var(--on-dark);
  overflow: hidden;
}
.sect--slate h1, .sect--slate h2, .sect--slate h3, .sect--slate h4 { color: var(--on-dark); }
.sect--slate p { color: var(--on-dark-soft); }
.sect--slate > * { position: relative; z-index: 1; }

/* The monogram watermark. Big, cropped by the section edge, barely there.
   This is the one decorative element the design gets, so it has to be the
   brand mark rather than a pattern. */
.mono-mark {
  position: absolute;
  pointer-events: none;
  z-index: 0;
  color: var(--bone);
  opacity: .055;
  width: min(46rem, 72vw);
  right: -8%;
  bottom: -30%;
}
.mono-mark--left  { right: auto; left: -12%; bottom: -34%; }
.mono-mark--top   { bottom: auto; top: -26%; }

.stack > * + * { margin-top: var(--sp-4); }
.stack-lg > * + * { margin-top: var(--sp-6); }

/* THE MOST IMPORTANT RULE IN THIS FILE.
   A grid or flex child defaults to min-width:auto and refuses to shrink below
   its own content, which pushes columns off the screen. That is exactly how
   "B2B leads generated" ended up hanging off every phone on the Wix site.
   Every grid and flex container in this file is listed here.
   IF YOU ADD A NEW ONE, ADD IT TO THIS LIST. */
.grid > *, .split > *, .finding > *, .cards > *, .honest > *, .tabs > *,
.tabs__list > *, .steps > *, .step > *, .step__body > *, .hero__inner > *,
.hero__copy > *, .proof__grid > *, .cta__inner > *, .ftr__top > *,
.fgrid > *, .field > *, .check > *, .tickrow > *, .qa__q > *, .dots > *,
.stack > *, .aside-trust > *, .hdr__inner > *, .device__bar > *, .dfield > *,
.calc > *, .calc__out > *, .calc__modes > *, .calc__row > *, .calc__grab > *,
.hcol > *, .quote > *,
.serp-demo > *, .serp-demo__nav > *, .schk > *, .schk__t > *, .schk__body > *,
.browser > *, .browser__bar > *, .browser__page > *, .serp__zone > *,
.serp__search > *, .serp__res > *, .device__meta > *, .checks > * { min-width: 0; }

/* --------------------------------------------------------------------------
   4. TYPE HELPERS
   -------------------------------------------------------------------------- */

.display { font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: -0.028em; }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); letter-spacing: -0.022em; }
.h3 { font-size: var(--fs-h3); }
.h4 { font-size: var(--fs-h4); }

.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--fg-soft); }
.sect--slate .lead { color: var(--fg-invert-soft); }

.small { font-size: var(--fs-sm); }
.xs { font-size: var(--fs-xs); }
.muted { color: var(--fg-soft); }
.sect--slate .muted { color: var(--fg-invert-soft); }

/* Georgia italic. Replaces the tracked-out uppercase monospace, which was the
   single most "software" thing on the page. */
.eyebrow {
  display: block;
  font-family: var(--font-label);
  font-style: italic;
  font-size: var(--fs-label);
  letter-spacing: 0;
  text-transform: none;
  color: var(--green-700);
}
.sect--slate .eyebrow { color: var(--green-300); }

.accent { color: var(--green-700); }
.sect--slate .accent { color: var(--green-300); }

.mark {
  background-image: linear-gradient(transparent 64%, var(--green-100) 64%);
  background-repeat: no-repeat;
  background-size: 0% 100%;
  transition: background-size .8s var(--ease-out);
}
.is-revealed .mark, .mark.is-lit { background-size: 100% 100%; }

/* --------------------------------------------------------------------------
   5. SECTION HEADERS
   -------------------------------------------------------------------------- */

.sect-head {
  display: grid;
  gap: var(--sp-4);
  max-width: 46rem;
  margin-bottom: clamp(2rem, 1.3rem + 2.6vw, 3.5rem);
}
.sect-head--center { margin-inline: auto; text-align: center; }

/* --------------------------------------------------------------------------
   6. BUTTONS — solid green, square, no sheen
   -------------------------------------------------------------------------- */

.btn {
  --btn-bg: var(--green-600);
  --btn-fg: #fff;
  --btn-bd: var(--green-600);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  padding: .88em 1.6em;
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: var(--btn-fg);
  background: var(--btn-bg);
  border: 1.5px solid var(--btn-bd);
  border-radius: var(--radius);
  cursor: pointer;
  min-height: 48px;
  transition: background-color .18s var(--ease), border-color .18s var(--ease),
              color .18s var(--ease);
}
.btn:hover  { --btn-bg: var(--green-700); --btn-bd: var(--green-700); }
.btn:active { --btn-bg: var(--green-800); --btn-bd: var(--green-800); }

.btn--lg { padding: 1.05em 2em; font-size: 1rem; min-height: 56px; }
.btn--sm { padding: .65em 1.15em; font-size: var(--fs-xs); min-height: 44px; }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink-900);
  --btn-bd: var(--ink-900);
}
.btn--ghost:hover { --btn-bg: var(--ink-900); --btn-fg: #fff; --btn-bd: var(--ink-900); }

.btn--invert { --btn-bg: #fff; --btn-fg: var(--green-800); --btn-bd: #fff; }
.btn--invert:hover { --btn-bg: var(--bone); --btn-bd: var(--bone); --btn-fg: var(--green-800); }

.btn--outline-invert { --btn-bg: transparent; --btn-fg: #fff; --btn-bd: rgba(255,255,255,.55); }
.btn--outline-invert:hover { --btn-bg: rgba(255,255,255,.12); --btn-bd: #fff; --btn-fg: #fff; }

.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }

.btn__arrow { transition: transform .25s var(--ease-out); flex: none; }
.btn:hover .btn__arrow { transform: translateX(3px); }

.tlink {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-weight: 700;
  color: var(--green-700);
  border-bottom: 1.5px solid var(--green-300);
  padding-bottom: 1px;
  transition: color .18s, border-color .18s;
}
.tlink:hover { color: var(--green-800); border-bottom-color: var(--green-700); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: center; }

/* --------------------------------------------------------------------------
   7. HEADER
   -------------------------------------------------------------------------- */

.skip {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 200;
  background: var(--ink-900); color: #fff; padding: .7rem 1.1rem;
  border-radius: var(--radius); font-size: var(--fs-sm); font-weight: 700;
}
.skip:focus { top: var(--sp-4); }

.hdr {
  position: sticky; top: 0; z-index: 100;
  background: var(--bg-bone);
  border-bottom: 1px solid transparent;
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.hdr__inner {
  display: flex; align-items: center; gap: var(--sp-5);
  min-height: 4.5rem;
}
.hdr.is-stuck { background: #fff; border-bottom-color: var(--rule); }

/* Sits transparent over the dark hero until you scroll, then goes solid. */
.hdr--over-dark { background: var(--slate-deep); }
.hdr--over-dark .hdr__link { color: var(--on-dark-soft); }
.hdr--over-dark .hdr__link:hover { color: var(--on-dark); }
.hdr--over-dark .hdr__logo .lg-word, .hdr--over-dark .hdr__logo .lg-mark { fill: var(--bone); }
.hdr--over-dark .hdr__logo .lg-dot { fill: var(--green-300); }
.hdr--over-dark .burger span { background: var(--bone); }
.hdr--over-dark .btn--ghost { --btn-fg: var(--bone); --btn-bd: rgba(245,243,238,.5); }
.hdr--over-dark .btn--ghost:hover { --btn-bg: var(--bone); --btn-fg: var(--slate-deep); --btn-bd: var(--bone); }

.hdr__logo { display: flex; align-items: center; flex: none; padding-block: .45rem; }
.hdr__logo svg { height: 2.1rem; width: auto; }
.hdr__logo .lg-word, .hdr__logo .lg-mark { fill: var(--ink-950); }
.hdr__logo .lg-dot { fill: var(--green-600); }

.hdr__nav { display: none; margin-left: auto; }
.hdr__list { display: flex; align-items: center; gap: clamp(1rem, .3rem + 1.5vw, 2rem); }

.hdr__link {
  position: relative;
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--ink-800);
  padding-block: .4rem;
  transition: color .18s var(--ease);
}
.hdr__link::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px; background: var(--green-600);
  transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease-out);
}
.hdr__link:hover { color: var(--green-700); }
.hdr__link:hover::after, .hdr__link[aria-current="page"]::after { transform: scaleX(1); }

.hdr__cta { display: none; flex: none; }

.burger {
  margin-left: auto; display: grid; place-content: center; gap: 5px;
  width: 46px; height: 46px; flex: none;
}
.burger span {
  display: block; width: 22px; height: 2px; background: var(--ink-900);
  transition: transform .25s var(--ease), opacity .18s var(--ease);
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.drawer {
  position: fixed; inset: 0; z-index: 99;
  background: var(--bg-bone);
  padding: 6rem var(--sp-gutter) var(--sp-7);
  display: grid; align-content: start; gap: var(--sp-1);
  overflow-y: auto;
  opacity: 0; visibility: hidden;
  transition: opacity .25s var(--ease), visibility .25s;
}
.drawer.is-open { opacity: 1; visibility: visible; }
.drawer__link {
  font-family: var(--font-display);
  font-size: clamp(1.55rem, 1.2rem + 1.9vw, 2.1rem);
  letter-spacing: -0.018em;
  padding-block: .6rem;
  border-bottom: 1px solid var(--rule-strong);
  display: block;
  color: var(--ink-950);
  transition: color .18s;
}
.drawer__link:hover { color: var(--green-700); }
.drawer__foot { margin-top: var(--sp-6); display: grid; gap: var(--sp-4); }
.drawer__meta { font-size: var(--fs-sm); color: var(--fg-soft); display: grid; gap: .35rem; }
.drawer__meta a:hover { color: var(--green-700); }

body.nav-open { overflow: hidden; }

@media (min-width: 62rem) {
  .hdr__nav { display: block; }
  .hdr__cta { display: inline-flex; }
  .burger, .drawer { display: none; }
}

/* --------------------------------------------------------------------------
   8. HERO — bone ground, flat. No glow, no grid, no glass.
   -------------------------------------------------------------------------- */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--slate-deep);
  color: var(--on-dark);
  padding-block: clamp(3rem, 1.6rem + 5.5vw, 5.5rem) clamp(3.25rem, 1.8rem + 5.5vw, 6rem);
}
.hero > .wrap { position: relative; z-index: 1; }

.hero__inner { display: grid; gap: clamp(2.5rem, 1.4rem + 4.4vw, 4rem); align-items: start; }
@media (min-width: 64rem) {
  .hero__inner {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
    gap: clamp(2.5rem, .8rem + 4.6vw, 4.5rem);
    align-items: center;
  }
}

.hero__copy { display: grid; gap: var(--sp-5); max-width: 40rem; }

.hero h1 {
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.03em;
  color: var(--on-dark);
}
.hero h1 .soft { color: var(--green-300); }

.hero__sub { font-size: var(--fs-lead); line-height: 1.5; color: var(--on-dark-soft); max-width: 34rem; }

.hero__trust {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule-on-dark);
}
.hero__trust li {
  display: flex; align-items: center; gap: .5em;
  font-size: var(--fs-xs); color: var(--on-dark-faint);
}
.hero__trust svg { flex: none; color: var(--green-300); }

/* --------------------------------------------------------------------------
   9. THE AUDIT DEVICE — a white card, not a pane of glass
   -------------------------------------------------------------------------- */

/* A browser window. The point of the offer is that we look at THEIR website,
   so the control that asks for it should look like the thing it is asking
   about. The address bar IS the input. */
.device {
  background: #fff;
  border-radius: var(--radius-xl);
  box-shadow: 0 2px 4px rgba(0,0,0,.18), 0 24px 60px -18px rgba(0,0,0,.55);
  overflow: hidden;
}

.device__bar {
  display: flex; align-items: center; gap: .75rem;
  padding: .7rem .85rem;
  background: var(--ink-950);
}
.device__dots { display: flex; gap: 6px; flex: none; }
.device__dots i {
  width: 10px; height: 10px; border-radius: 50%;
  background: rgba(245,243,238,.22);
}
.device__dots i:first-child { background: rgba(245,243,238,.34); }

.device__title { display: none; }
.device__badge {
  font-family: var(--font-label); font-style: italic;
  font-size: var(--fs-xs); color: var(--green-300);
  display: inline-flex; align-items: center; gap: .4em; flex: none;
}

/* The address bar */
.dfield {
  display: flex; align-items: center; gap: .1rem;
  flex: 1 1 auto; min-width: 0;
  background: rgba(245,243,238,.1);
  border: 1px solid rgba(245,243,238,.16);
  border-radius: 999px;
  padding: .3rem .8rem;
  transition: border-color .18s var(--ease), background-color .18s var(--ease);
}
.dfield:focus-within { border-color: var(--green-500); background: rgba(245,243,238,.16); }
.dfield__pre {
  font-size: var(--fs-xs); color: rgba(245,243,238,.62);
  flex: none; user-select: none;
}
.dfield input {
  flex: 1 1 6rem; min-width: 0; background: none; border: 0; outline: none;
  color: var(--bone); font-size: 1rem; padding-block: .45rem;
}
.dfield input::placeholder { color: rgba(245,243,238,.4); }

.device__body { padding: clamp(1.15rem, .8rem + 1.3vw, 1.6rem); }

.device__label {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.18rem, 1.06rem + .5vw, 1.4rem);
  line-height: 1.2;
  color: var(--ink-950);
}
.device__hint {
  font-family: var(--font-label);
  font-size: var(--fs-sm); color: var(--fg-soft);
  margin-top: .3rem; line-height: 1.45;
}
.device__go { width: 100%; margin-top: .95rem; }

/* Three short reassurances on one row. Replaces a second paragraph of prose,
   and deliberately does NOT repeat "free" or "yours to keep" — the hero trust
   list under the H1 already says both. */
.device__meta {
  display: flex; flex-wrap: wrap; gap: .3rem .9rem;
  margin-top: .85rem; padding-top: .75rem;
  border-top: 1px solid var(--rule);
}
.device__meta li {
  display: flex; align-items: center; gap: .38em;
  font-size: var(--fs-xs); color: var(--fg-faint);
}
.device__meta li::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%;
  background: var(--green-600); flex: none;
}

.dfield-err { display: none; font-size: var(--fs-xs); color: var(--danger); margin-top: .55rem; }
.dfield-err.is-shown { display: block; }

.dfield-err { display: none; font-size: var(--fs-xs); color: var(--danger); margin-top: .55rem; }
.dfield-err.is-shown { display: block; }

.checks { display: grid; gap: .4rem; margin-top: .95rem; }

.check {
  display: grid; grid-template-columns: auto minmax(0,1fr);
  gap: .7rem; align-items: center;
  padding: .6rem .8rem;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  background: var(--bg-off);
  opacity: 0; transform: translateY(8px);
  transition: opacity .4s var(--ease-out), transform .4s var(--ease-out),
              background-color .25s, border-color .25s;
}
.check.is-in { opacity: 1; transform: none; }
.check.is-done { background: var(--green-050); border-color: var(--green-300); }

.check__ico {
  width: 22px; height: 22px; flex: none;
  border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; border: 1.5px solid var(--rule-strong);
  transition: background-color .25s, border-color .25s;
}
.check.is-done .check__ico { background: var(--green-600); border-color: var(--green-600); }
.check__ico svg { width: 13px; height: 13px; opacity: 0; transition: opacity .2s; }
.check.is-done .check__ico svg { opacity: 1; }
.check__spin {
  position: absolute; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid transparent; border-top-color: var(--green-600);
  animation: spin .8s linear infinite; opacity: 0; transition: opacity .18s;
}
.check.is-working .check__spin { opacity: 1; }
@keyframes spin { to { transform: rotate(360deg); } }

.check__txt strong { display: block; font-size: var(--fs-sm); font-weight: 700; color: var(--ink-900); line-height: 1.35; }

.device__out { display: none; margin-top: .95rem; padding-top: .95rem; border-top: 1px solid var(--rule); }
.device__out.is-shown { display: block; animation: fadeUp .4s var(--ease-out) both; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.device__out p { font-size: var(--fs-sm); color: var(--fg-soft); margin-bottom: .8rem; line-height: 1.5; }
.device__out .dom { font-weight: 700; color: var(--green-700); word-break: break-all; }
.device__out .btn { width: 100%; }

/* --------------------------------------------------------------------------
   10. PROOF BAND
   -------------------------------------------------------------------------- */

/* Continues the hero's dark block, separated only by a hairline. */
.proof { background: var(--slate-deep); color: var(--on-dark); border-top: 1px solid var(--rule-on-dark); }
.proof__grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 44rem) { .proof__grid { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.stat {
  padding: clamp(1.5rem, 1rem + 2.2vw, 2.5rem) clamp(0rem, -.5rem + 2vw, 2rem);
  border-bottom: 1px solid var(--rule-on-dark);
  text-align: center;
}
.stat:last-child { border-bottom: 0; }
@media (min-width: 44rem) {
  .stat { border-bottom: 0; border-right: 1px solid var(--rule-on-dark); text-align: left; }
  .stat:first-child { padding-left: 0; }
  .stat:last-child { border-right: 0; }
}

.stat__num {
  display: block; font-family: var(--font-display);
  font-size: clamp(2rem, 1.25rem + 2.9vw, 3.2rem);
  line-height: 1; letter-spacing: -0.03em; color: var(--on-dark);
  font-variant-numeric: tabular-nums;
}
.stat__lbl { display: block; margin-top: .55rem; font-size: var(--fs-sm); color: var(--on-dark-soft); }
.stat__note {
  display: block; margin-top: .25rem;
  font-family: var(--font-label); font-style: italic;
  font-size: var(--fs-xs); color: var(--green-300);
}

/* --------------------------------------------------------------------------
   11. SPLIT
   -------------------------------------------------------------------------- */

.split { display: grid; gap: clamp(2.25rem, 1.2rem + 4vw, 4rem); align-items: center; }
@media (min-width: 60rem) {
  .split { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .split--wide-left  { grid-template-columns: minmax(0,1.12fr) minmax(0,.88fr); }
  .split--wide-right { grid-template-columns: minmax(0,.88fr) minmax(0,1.12fr); }
  .split--start { align-items: start; }
}

/* --------------------------------------------------------------------------
   12. THE CAPACITY CALCULATOR
   Replaces the fixed "idle equipment" panel. Three vocabularies over one
   sum, so it speaks to hire, service and product businesses alike.
   -------------------------------------------------------------------------- */

.calc {
  background: #fff;
  border: 1.5px solid var(--ink-900);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: grid;
}

.calc__modes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  border-bottom: 1.5px solid var(--ink-900);
}
.calc__mode {
  padding: .85rem .6rem;
  border-radius: 0;
  font-size: var(--fs-xs);
  font-weight: 700;
  line-height: 1.25;
  color: var(--fg-soft);
  background: var(--bg-off);
  border-right: 1px solid var(--rule-strong);
  min-height: 52px;
  transition: background-color .18s, color .18s;
}
.calc__mode:last-child { border-right: 0; }
.calc__mode:hover { background: var(--ink-100); color: var(--ink-900); }
.calc__mode[aria-selected="true"] { background: var(--ink-900); color: #fff; }

.calc__body { padding: clamp(1.2rem, .85rem + 1.4vw, 1.9rem); display: grid; gap: var(--sp-5); }

.calc__row { display: grid; gap: .55rem; }
.calc__grab {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.calc__grab label { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-800); }
.calc__val {
  font-family: var(--font-display);
  font-size: 1.3rem;
  color: var(--green-700);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Range input, styled square to match everything else. */
.calc input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 26px; background: none; cursor: pointer; margin: 0;
}
.calc input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; background: var(--ink-150); border-radius: var(--radius-pill);
}
.calc input[type="range"]::-moz-range-track {
  height: 6px; background: var(--ink-150); border-radius: var(--radius-pill);
}
.calc input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -8px;
  background: var(--green-600); border: 0; border-radius: 50%;
  transition: background-color .15s;
}
.calc input[type="range"]::-moz-range-thumb {
  width: 22px; height: 22px;
  background: var(--green-600); border: 0; border-radius: 50%;
}
.calc input[type="range"]:hover::-webkit-slider-thumb { background: var(--green-700); }
.calc input[type="range"]:focus-visible { outline-offset: 4px; }

.calc__scale {
  display: flex; justify-content: space-between;
  font-size: var(--fs-xs); color: var(--fg-faint);
}

.calc__out {
  background: var(--ink-900);
  color: #fff;
  padding: clamp(1.2rem, .85rem + 1.4vw, 1.75rem);
  display: grid; gap: .3rem;
}
.calc__out span { font-size: var(--fs-sm); color: rgba(255,255,255,.72); }
.calc__big {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.3rem + 2.8vw, 3rem);
  line-height: 1.05; letter-spacing: -0.03em; color: #fff;
  font-variant-numeric: tabular-nums;
}
.calc__sub { font-size: var(--fs-xs); color: rgba(255,255,255,.6); line-height: 1.5; margin-top: .4rem; }

/* Email capture on the calculator: the second lead magnet. */
.calc__cap { border-top: 1px solid var(--rule); padding: clamp(1.2rem, .85rem + 1.4vw, 1.75rem); background: var(--bg-off); }
.calc__cap p { font-size: var(--fs-sm); color: var(--fg-soft); margin-bottom: .85rem; }
.calc__cap .fgrid { gap: .6rem; }
.calc__cap .btn { width: 100%; }
.calc__note { font-size: var(--fs-xs); color: var(--fg-faint); margin-top: .7rem; line-height: 1.5; }

/* --------------------------------------------------------------------------
   13. THE FINDING — 40 squares
   -------------------------------------------------------------------------- */

.finding { display: grid; gap: clamp(2rem, 1rem + 3.4vw, 3.5rem); align-items: center; }
@media (min-width: 60rem) { .finding { grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr); } }

.dots {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: clamp(6px, 1.2vw, 10px);
  width: 100%; max-width: 25rem;
}
.dots i {
  aspect-ratio: 1;
  border-radius: var(--radius-xs);
  background: transparent;
  border: 1.5px solid var(--rule-strong);
  opacity: 0; transform: scale(.75);
  transition: opacity .35s var(--ease-out), transform .4s var(--ease-out);
}
.is-revealed .dots i { opacity: 1; transform: none; }
.dots i.ok { background: var(--green-600); border-color: var(--green-600); }
.sect--slate .dots i { border-color: rgba(245,243,238,.28); }
.sect--slate .dots i.ok { background: var(--green-500); border-color: var(--green-500); }

.dots-key {
  display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5);
  margin-top: var(--sp-5); font-size: var(--fs-xs); color: var(--fg-soft);
}
.sect--slate .dots-key { color: var(--on-dark-faint); }
.dots-key span { display: inline-flex; align-items: center; gap: .5em; }
.dots-key i { width: 12px; height: 12px; flex: none; border-radius: var(--radius-xs); }
.dots-key .gap { border: 1.5px solid var(--rule-strong); }
.dots-key .ok  { background: var(--green-600); }
.sect--slate .dots-key .gap { border-color: rgba(245,243,238,.28); }
.sect--slate .dots-key .ok  { background: var(--green-500); }

.finding blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 1.1rem + 1.9vw, 2.5rem);
  line-height: 1.2; letter-spacing: -0.024em; color: var(--ink-950);
}
.sect--slate .finding blockquote { color: var(--on-dark); }

/* --------------------------------------------------------------------------
   14. CARDS
   -------------------------------------------------------------------------- */

.cards { display: grid; gap: clamp(1rem, .5rem + 1.6vw, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 46rem) { .cards { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 68rem) { .cards--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.card {
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column; gap: var(--sp-4);
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.1rem);
  background: #fff;
  border: 1px solid var(--rule-strong);
  border-top: 3px solid var(--ink-900);
  transition: border-top-color .25s var(--ease), box-shadow .25s var(--ease);
}
.card:hover, .card:focus-within { border-top-color: var(--green-600); box-shadow: var(--shadow); }

.card__ico {
  width: 46px; height: 46px; flex: none; border-radius: var(--radius);
  display: grid; place-items: center;
  background: var(--green-050);
  border: 1px solid var(--green-100);
  color: var(--green-700);
  transition: background-color .25s, color .25s;
}
.card:hover .card__ico { background: var(--green-600); color: #fff; }
.card__ico svg { width: 24px; height: 24px; }

.card h3 { font-size: var(--fs-h3); }
.card p { color: var(--fg-soft); font-size: var(--fs-sm); line-height: 1.62; }

.card__pain {
  margin-top: auto; padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
  font-family: var(--font-label); font-style: italic;
  font-size: var(--fs-sm); color: var(--ink-800); line-height: 1.5;
}

/* --------------------------------------------------------------------------
   15. METHOD
   Numbered because the three steps ARE a sequence: you cannot have the
   strategy call before the audit. Plain numerals, not badges.
   -------------------------------------------------------------------------- */

.steps { display: grid; }

.step {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: clamp(1rem, .5rem + 2vw, 2.2rem);
  padding-block: clamp(1.5rem, 1rem + 2.2vw, 2.6rem);
  border-top: 1px solid var(--rule-strong);
}
.step:last-child { border-bottom: 1px solid var(--rule-strong); }

.step__rail { display: grid; justify-items: center; }
.step__n {
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3rem);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ink-200);
  transition: color .4s var(--ease);
  font-variant-numeric: tabular-nums;
}
.step.is-revealed .step__n { color: var(--green-600); }
.step__line { display: none; }

.step__body { display: grid; gap: var(--sp-3); align-content: start; }
.step__hd { display: flex; align-items: baseline; gap: .85rem; flex-wrap: wrap; }
.step__body h3 { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.85rem); }
.step__body p { color: var(--fg-soft); max-width: 44rem; }

.pill {
  display: inline-flex; align-items: center;
  padding: .28em .75em;
  font-size: var(--fs-xs); font-weight: 700;
  white-space: nowrap;
  border-radius: var(--radius-pill);
}
.pill--free  { background: var(--green-600); color: #fff; }
.pill--quiet { background: var(--ink-100); color: var(--ink-600); }

/* --------------------------------------------------------------------------
   16. TABS
   -------------------------------------------------------------------------- */

.tabs { display: grid; gap: var(--sp-5); }
@media (min-width: 58rem) {
  .tabs { grid-template-columns: minmax(0, 19rem) minmax(0, 1fr); gap: clamp(1.75rem, 1rem + 2.6vw, 3rem); align-items: start; }
}

.tabs__list {
  display: flex; gap: .4rem; overflow-x: auto; padding-bottom: .3rem;
  scrollbar-width: thin; -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.tabs__list > .tab { scroll-snap-align: start; }
@media (min-width: 58rem) {
  .tabs__list { flex-direction: column; overflow: visible; padding: 0; scroll-snap-type: none; gap: 0; }
}

.tab {
  flex: none; text-align: left;
  padding: .9rem 1.1rem;
  border-radius: var(--radius);
  border: 1px solid var(--rule-strong);
  background: #fff;
  color: var(--ink-800);
  font-family: var(--font-display);
  font-size: 1.02rem;
  min-height: 48px;
  transition: background-color .18s, color .18s, border-color .18s;
}
@media (min-width: 58rem) {
  .tab { width: 100%; border-bottom: 0; }
  .tab:last-child { border-bottom: 1px solid var(--rule-strong); }
}
.tab:hover { background: var(--bg-off); }
.tab[aria-selected="true"] { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }

.tabpanel { display: none; border: 1px solid var(--rule-strong); border-radius: var(--radius-lg); overflow: hidden; background: #fff; }
.tabpanel.is-active { display: block; animation: fadeUp .3s var(--ease-out) both; }

.tabpanel__hd { padding: clamp(1.2rem, .9rem + 1.2vw, 1.8rem); border-bottom: 1px solid var(--rule); background: var(--bg-bone); }
.tabpanel__hd h3 { font-size: var(--fs-h3); margin-bottom: .45rem; }
.tabpanel__hd p { color: var(--fg-soft); font-size: var(--fs-sm); }
.tabpanel__bd { padding: clamp(1.2rem, .9rem + 1.2vw, 1.8rem); display: grid; gap: var(--sp-4); }

.tickrow {
  display: grid; grid-template-columns: auto minmax(0,1fr); gap: .75rem;
  align-items: start; font-size: var(--fs-sm); color: var(--fg-soft); line-height: 1.6;
}
.tickrow svg { color: var(--green-600); flex: none; margin-top: .35em; }

/* A plain note, set in Georgia. Not a coloured bubble. */
.callout {
  padding-top: var(--sp-4);
  border-top: 1px solid var(--rule);
  font-family: var(--font-label);
  font-size: var(--fs-sm);
  color: var(--fg-soft);
  line-height: 1.62;
}
.callout strong { font-family: var(--font-body); font-weight: 700; color: var(--ink-900); }

/* --------------------------------------------------------------------------
   16b. THE SERP DEMONSTRATION
   The three checks, shown on a mock search results page rather than
   described in a list. Pick a check on the left, the matching zone of the
   page lights up on the right.

   HONESTY: this is an EXAMPLE and is labelled as one, on a generic term with
   invented competitor names. It never shows the visitor's own domain or a
   real ranking, because we cannot know either from a static page.
   -------------------------------------------------------------------------- */

.serp-demo { display: grid; gap: clamp(1.5rem, 1rem + 2.4vw, 2.75rem); align-items: start; }
@media (min-width: 62rem) {
  .serp-demo { grid-template-columns: minmax(0, 25rem) minmax(0, 1fr); }
  .serp-demo__vis { position: sticky; top: 6rem; }
}

.serp-demo__nav { display: grid; gap: .6rem; }

.schk {
  display: block; width: 100%; text-align: left;
  padding: 1rem 1.15rem;
  background: #fff;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
  transition: border-color .22s var(--ease), box-shadow .22s var(--ease), background-color .22s;
}
.schk:hover { border-color: var(--green-300); }
.schk[aria-selected="true"] {
  border-color: var(--green-600);
  box-shadow: inset 0 0 0 1px var(--green-600);
}
.schk__t {
  display: flex; align-items: flex-start; gap: .6rem;
  font-family: var(--font-display);
  font-size: 1.08rem; color: var(--ink-950);
}
.schk__n {
  width: 22px; height: 22px; flex: none; margin-top: .2em;
  border-radius: 50%;
  border: 1.5px solid var(--rule-strong);
  display: grid; place-items: center;
  transition: background-color .22s, border-color .22s;
}
.schk__n::after {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: transparent; transition: background-color .22s;
}
.schk[aria-selected="true"] .schk__n { border-color: var(--green-600); }
.schk[aria-selected="true"] .schk__n::after { background: var(--green-600); }

.schk__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .35s var(--ease-out); }
.schk__body > div { overflow: hidden; }
.schk[aria-selected="true"] .schk__body { grid-template-rows: 1fr; }
.schk__body p { font-size: var(--fs-sm); color: var(--fg-soft); line-height: 1.6; padding-top: .7rem; }
.schk__body .callout { margin-top: .9rem; }

/* --- the browser window --- */
.browser {
  background: #fff;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.browser__bar {
  display: flex; align-items: center; gap: .7rem;
  padding: .65rem .8rem;
  background: var(--ink-100);
  border-bottom: 1px solid var(--rule-strong);
}
.browser__dots { display: flex; gap: 6px; flex: none; }
.browser__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--ink-200); }
.browser__url {
  flex: 1 1 auto; min-width: 0;
  background: #fff;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  padding: .3rem .8rem;
  font-size: var(--fs-xs);
  color: var(--fg-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.browser__page { padding: clamp(.9rem, .6rem + 1.2vw, 1.5rem); }

.serp__search {
  display: flex; align-items: center; gap: .7rem;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-pill);
  padding: .65rem 1rem;
  margin-bottom: 1.1rem;
}
.serp__search svg { color: var(--fg-faint); flex: none; }
.serp__q { font-size: var(--fs-sm); color: var(--ink-900); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* A zone dims until its check is chosen. */
.serp__zone {
  position: relative;
  padding: .8rem .85rem;
  border-radius: var(--radius);
  border: 1.5px solid transparent;
  transition: opacity .3s var(--ease), border-color .3s var(--ease), background-color .3s var(--ease);
  opacity: .34;
}
.serp__zone + .serp__zone { margin-top: .5rem; }
.serp__zone.is-lit {
  opacity: 1;
  border-color: var(--green-600);
  background: var(--green-050);
}

.serp__lbl {
  display: block;
  font-size: var(--fs-xs); font-weight: 700; color: var(--ink-800);
  margin-bottom: .5rem;
}
.serp__ad {
  display: inline-block;
  font-size: 12.5px; font-weight: 700;
  color: var(--ink-800);
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-xs);
  padding: 0 .35em; margin-right: .45em;
  vertical-align: 1px;
}

.serp__empty {
  border: 1.5px dashed var(--rule-strong);
  border-radius: var(--radius);
  padding: 1rem;
  text-align: center;
  font-family: var(--font-label); font-style: italic;
  font-size: var(--fs-sm); color: var(--fg-faint);
}
.serp__zone.is-lit .serp__empty { border-color: var(--green-300); color: var(--green-700); }

.serp__res + .serp__res { margin-top: .85rem; }
.serp__dom { display: block; font-size: var(--fs-xs); color: var(--fg-faint); }
.serp__ttl {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(.98rem, .94rem + .2vw, 1.08rem);
  color: #1a4fa0;
  line-height: 1.3;
  margin-top: .1rem;
}
.serp__snip { display: block; font-size: var(--fs-xs); color: var(--fg-soft); line-height: 1.5; margin-top: .2rem; }
.serp__res--you .serp__ttl { color: var(--green-700); }
.serp__you-tag {
  display: inline-block;
  font-size: 12.5px; font-weight: 700;
  background: var(--green-600); color: #fff;
  border-radius: var(--radius-xs);
  padding: .05em .45em; margin-left: .4em;
}
.serp__gap {
  text-align: center; color: var(--fg-faint);
  font-family: var(--font-label); font-style: italic;
  font-size: var(--fs-xs); padding: .5rem 0;
}

.serp__note {
  margin-top: 1rem; padding-top: .9rem;
  border-top: 1px solid var(--rule);
  font-family: var(--font-label);
  font-size: var(--fs-sm); color: var(--fg-soft); line-height: 1.6;
}
.serp__caption {
  margin-top: .85rem;
  font-size: var(--fs-xs); color: var(--fg-faint); line-height: 1.5;
}

/* --------------------------------------------------------------------------
   17. SERVICES / HONEST
   -------------------------------------------------------------------------- */

.honest { display: grid; gap: clamp(1rem, .5rem + 1.6vw, 1.5rem); grid-template-columns: 1fr; }
@media (min-width: 52rem) { .honest { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (min-width: 64rem) { .honest--3 { grid-template-columns: repeat(3, minmax(0,1fr)); } }

.hcol {
  padding: clamp(1.4rem, 1rem + 1.6vw, 2.1rem);
  background: #fff;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-lg);
}
.hcol h3 { font-size: var(--fs-h3); margin-bottom: var(--sp-3); display: flex; align-items: center; gap: .55rem; }
.hcol ul { display: grid; gap: .8rem; }
.hcol li {
  display: grid; grid-template-columns: auto minmax(0,1fr); gap: .7rem;
  align-items: start; font-size: var(--fs-sm); color: var(--fg-soft); line-height: 1.55;
}
.hcol li svg { flex: none; margin-top: .3em; }
.hcol li strong { color: var(--ink-900); font-weight: 700; }
.hcol--do li svg { color: var(--green-600); }
.hcol--dont { background: var(--bg-off); }
.hcol--dont li svg { color: var(--ink-300); }

.hcol--span { grid-column: 1 / -1; }
.hcol--span ul { display: grid; gap: .8rem; }
@media (min-width: 46rem) { .hcol--span ul { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1rem 1.75rem; } }

.hcol__lead { font-size: var(--fs-sm); color: var(--fg-soft); margin-bottom: var(--sp-4); line-height: 1.55; }
.hcol__tag {
  display: block;
  font-family: var(--font-label); font-style: italic;
  font-size: var(--fs-label); color: var(--green-700);
  margin-bottom: .35rem;
}

/* --------------------------------------------------------------------------
   18. TESTIMONIAL
   -------------------------------------------------------------------------- */

.quote { max-width: 50rem; margin-inline: auto; text-align: center; display: grid; gap: var(--sp-5); justify-items: center; }
.quote__mark { display: none; }
.quote blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.05rem + 1.4vw, 2.05rem);
  line-height: 1.3; letter-spacing: -0.02em; color: var(--ink-950);
}
.quote figcaption { display: grid; gap: .15rem; }
.quote__who { font-weight: 700; font-size: var(--fs-sm); color: var(--ink-900); }
.quote__role { font-family: var(--font-label); font-style: italic; font-size: var(--fs-sm); color: var(--fg-faint); }
.sect--slate .quote blockquote { color: var(--on-dark); }
.sect--slate .quote__who { color: var(--on-dark); }
.sect--slate .quote__role { color: var(--on-dark-faint); }

/* --------------------------------------------------------------------------
   19. FAQ
   -------------------------------------------------------------------------- */

.faq { display: grid; max-width: 50rem; margin-inline: auto; }
.qa { border-bottom: 1px solid var(--rule-strong); }
.qa:first-child { border-top: 1px solid var(--rule-strong); }

.qa__q {
  width: 100%;
  display: grid; grid-template-columns: minmax(0,1fr) auto; gap: 1rem; align-items: center;
  text-align: left;
  padding: clamp(1.05rem, .85rem + .7vw, 1.45rem) 0;
  font-family: var(--font-display);
  font-size: clamp(1.02rem, .96rem + .4vw, 1.2rem);
  color: var(--ink-950);
  min-height: 56px;
  transition: color .18s;
}
.qa__q:hover { color: var(--green-700); }

.qa__sign { width: 22px; height: 22px; position: relative; flex: none; }
.qa__sign::before, .qa__sign::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  background: var(--ink-800);
  transition: transform .3s var(--ease-out), background-color .18s;
}
.qa__sign::before { width: 14px; height: 1.5px; transform: translate(-50%,-50%); }
.qa__sign::after  { width: 1.5px; height: 14px; transform: translate(-50%,-50%); }
.qa__q[aria-expanded="true"] .qa__sign::before { background: var(--green-700); }
.qa__q[aria-expanded="true"] .qa__sign::after  { background: var(--green-700); transform: translate(-50%,-50%) scaleY(0); }

.qa__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .38s var(--ease-out); }
.qa__a > div { overflow: hidden; }
.qa.is-open .qa__a { grid-template-rows: 1fr; }
.qa__a p {
  color: var(--fg-soft); font-size: var(--fs-sm); line-height: 1.68;
  padding: 0 0 clamp(1.05rem, .85rem + .7vw, 1.5rem) 0; max-width: 42rem;
}
.qa__a p + p { padding-top: .8rem; }

/* --------------------------------------------------------------------------
   20. CTA — solid green band, matching the live site's CTA button
   -------------------------------------------------------------------------- */

/* Deepened from brand green. At #3D7A6F the body copy on this band measured
   4.11:1, under the 4.5 required. green-700 takes it to ~5.9 and reads richer
   at full-band scale. Buttons stay on brand green, which also stops the band
   and the buttons on it from being the same colour. */
.cta { background: var(--green-700); color: #fff; }
.cta__inner { display: grid; gap: clamp(1.5rem, 1rem + 2.4vw, 2.75rem); align-items: center; }
@media (min-width: 58rem) { .cta__inner { grid-template-columns: minmax(0,1.3fr) minmax(0,.7fr); } }
.cta h2 { color: #fff; font-size: var(--fs-h2); }
.cta p { color: rgba(255,255,255,.85); max-width: 38rem; margin-top: var(--sp-4); }
.cta__side { display: grid; gap: var(--sp-4); justify-items: start; }
@media (min-width: 58rem) { .cta__side { justify-items: end; text-align: right; } }
.cta__side .btn { width: 100%; }
@media (min-width: 58rem) { .cta__side .btn { width: auto; } }
.cta__rev { font-size: var(--fs-xs); color: rgba(255,255,255,.75); line-height: 1.5; }

/* --------------------------------------------------------------------------
   21. FOOTER — flat brand slate
   -------------------------------------------------------------------------- */

.ftr {
  background: var(--slate);
  color: var(--fg-invert-soft);
  padding-block: clamp(2.75rem, 2rem + 3.2vw, 4.25rem) var(--sp-6);
}
.ftr__top {
  display: grid; gap: clamp(2rem, 1.2rem + 3vw, 3.25rem);
  padding-bottom: var(--sp-7); border-bottom: 1px solid var(--rule-invert);
}
@media (min-width: 52rem) { .ftr__top { grid-template-columns: minmax(0,1.4fr) repeat(2, minmax(0,1fr)); } }

.ftr__brand { display: grid; gap: var(--sp-4); align-content: start; }
.ftr__brand svg { height: 2.3rem; width: auto; }
.ftr__brand .lg-word, .ftr__brand .lg-mark { fill: #fff; }
.ftr__brand .lg-dot { fill: var(--green-300); }
.ftr__brand p { font-size: var(--fs-sm); max-width: 26rem; color: rgba(255,255,255,.68); line-height: 1.6; }

.ftr h4 {
  font-family: var(--font-label); font-style: italic; font-weight: 400;
  font-size: var(--fs-label); color: var(--green-300);
  margin-bottom: var(--sp-4);
}
.ftr ul { display: grid; gap: .65rem; }
.ftr li a, .ftr li span { font-size: var(--fs-sm); color: rgba(255,255,255,.8); transition: color .18s; }
.ftr li a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

.ftr__bot {
  padding-top: var(--sp-5);
  display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-6);
  align-items: center; justify-content: space-between;
  font-size: var(--fs-xs); color: rgba(255,255,255,.6);
}
.ftr__bot a:hover { color: #fff; }
.ftr__legal { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-5); }

/* --------------------------------------------------------------------------
   22. STICKY MOBILE CTA
   -------------------------------------------------------------------------- */

.mcta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  padding: .65rem var(--sp-gutter) calc(.65rem + env(safe-area-inset-bottom, 0px));
  background: var(--ink-900);
  border-top: 1px solid var(--ink-800);
  display: flex; align-items: center; gap: var(--sp-4);
  transform: translateY(110%);
  transition: transform .3s var(--ease-out);
}
.mcta.is-shown { transform: none; }
.mcta__txt { flex: 1 1 auto; min-width: 0; }
.mcta__txt strong { display: block; font-size: var(--fs-sm); color: #fff; font-weight: 700; }
.mcta__txt span { display: block; font-size: var(--fs-xs); color: rgba(255,255,255,.6); }
.mcta .btn { flex: none; }
@media (min-width: 52rem) { .mcta { display: none; } }

/* --------------------------------------------------------------------------
   23. FORMS
   -------------------------------------------------------------------------- */

.formwrap { background: #fff; border: 1.5px solid var(--ink-900); border-radius: var(--radius-lg); overflow: hidden; }
.formwrap__hd { padding: clamp(1.3rem, 1rem + 1.4vw, 1.9rem); border-bottom: 1px solid var(--rule); background: var(--bg-bone); }
.formwrap__hd h2 { font-size: var(--fs-h3); }
.formwrap__hd p { font-size: var(--fs-sm); color: var(--fg-soft); margin-top: .35rem; }
.formwrap__bd { padding: clamp(1.3rem, 1rem + 1.4vw, 2rem); }

.fgrid { display: grid; gap: var(--sp-4); }
@media (min-width: 34rem) { .fgrid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.field { display: grid; gap: .35rem; }
.field label { font-size: var(--fs-sm); font-weight: 700; color: var(--ink-800); display: flex; align-items: baseline; gap: .4rem; }
.field label .req { color: var(--green-700); }
.field label .opt { font-weight: 400; font-family: var(--font-label); font-style: italic; font-size: var(--fs-xs); color: var(--fg-faint); }

.field input, .field textarea, .field select {
  width: 100%;
  padding: .82rem .95rem;
  font-size: 1rem;              /* under 16px and iOS zooms the page on focus */
  color: var(--ink-900);
  background: #fff;
  border: 1.5px solid var(--rule-strong);
  border-radius: var(--radius);
  min-height: 50px;
  transition: border-color .18s var(--ease);
}
.field textarea { min-height: 8rem; resize: vertical; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-300); }
.field input:hover, .field textarea:hover { border-color: var(--ink-400); }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--green-600); box-shadow: inset 0 0 0 1px var(--green-600);
}
.field.is-invalid input, .field.is-invalid textarea { border-color: var(--danger); }
.field__err { font-size: var(--fs-xs); color: var(--danger); display: none; }
.field.is-invalid .field__err { display: block; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form__foot { margin-top: var(--sp-6); display: grid; gap: var(--sp-4); }
.form__foot .btn { width: 100%; }
.form__note { font-size: var(--fs-xs); color: var(--fg-faint); line-height: 1.55; }
.form__note a { color: var(--green-700); text-decoration: underline; text-underline-offset: 2px; }

.form__status { display: none; border-radius: var(--radius); padding: .9rem 1.05rem; font-size: var(--fs-sm); line-height: 1.55; margin-bottom: var(--sp-5); }
.form__status.is-shown { display: block; }
.form__status--ok  { background: var(--green-050); border-left: 3px solid var(--green-600); color: var(--green-800); }
.form__status--err { background: #FBEEEA; border-left: 3px solid var(--danger); color: var(--danger); }

.done { display: none; padding: clamp(1.6rem, 1.2rem + 2.2vw, 3rem); text-align: center; }
.done.is-shown { display: grid; gap: var(--sp-4); justify-items: center; animation: fadeUp .4s var(--ease-out) both; }
.done__ico { width: 56px; height: 56px; border-radius: 50%; background: var(--green-600); color: #fff; display: grid; place-items: center; }
.done h2 { font-size: var(--fs-h3); }
.done p { color: var(--fg-soft); font-size: var(--fs-sm); max-width: 30rem; }
.done a { color: var(--green-700); }

.aside-trust { display: grid; gap: var(--sp-5); align-content: start; }
.aside-trust .tickrow strong { color: var(--ink-900); display: block; font-weight: 700; }
.aside-trust .tickrow span { color: var(--fg-soft); font-size: var(--fs-sm); }

/* --------------------------------------------------------------------------
   24. PAGE HEADER
   -------------------------------------------------------------------------- */

.phead {
  position: relative;
  overflow: hidden;
  background: var(--slate-deep);
  color: var(--on-dark);
  padding-block: clamp(2.75rem, 1.7rem + 3.6vw, 4.25rem) clamp(2.5rem, 1.6rem + 3.2vw, 3.75rem);
}
.phead__bg { display: none; }
.phead__inner { position: relative; z-index: 1; display: grid; gap: var(--sp-4); max-width: 42rem; }
.phead h1 { font-size: var(--fs-h1); color: var(--on-dark); }
.phead p { color: var(--on-dark-soft); font-size: var(--fs-lead); }

.crumbs {
  display: flex; gap: .45rem; align-items: center; flex-wrap: wrap;
  font-family: var(--font-label); font-style: italic;
  font-size: var(--fs-label); color: var(--on-dark-faint);
}
.crumbs a:hover { color: var(--green-300); }

/* --------------------------------------------------------------------------
   25. PROSE
   -------------------------------------------------------------------------- */

.prose { max-width: var(--wrap-text); }
.prose h2 {
  font-size: clamp(1.28rem, 1.14rem + .55vw, 1.55rem);
  margin-top: var(--sp-8); margin-bottom: var(--sp-3);
  padding-top: var(--sp-5); border-top: 1px solid var(--rule-strong);
}
.prose h2:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
.prose h3 { font-size: var(--fs-h4); margin-top: var(--sp-5); margin-bottom: var(--sp-2); }
.prose p { color: var(--fg-soft); margin-bottom: var(--sp-4); }
.prose ul { display: grid; gap: .55rem; margin-bottom: var(--sp-4); }
.prose ul li { display: grid; grid-template-columns: auto minmax(0,1fr); gap: .7rem; color: var(--fg-soft); }
.prose ul li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--green-600); margin-top: .62em; }
.prose a { color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink-900); }

/* --------------------------------------------------------------------------
   26. IMAGE PLACEHOLDERS
   -------------------------------------------------------------------------- */

.shot {
  position: relative; overflow: hidden; border-radius: var(--radius-lg);
  background: var(--ink-100);
  display: grid; place-items: center; aspect-ratio: 4 / 3;
  border: 1px dashed var(--rule-strong);
  color: var(--fg-faint); text-align: center; padding: var(--sp-5);
}
.shot__txt { display: grid; gap: .3rem; }
.shot__txt b { font-family: var(--font-label); font-style: italic; font-weight: 400; color: var(--green-700); }
.shot__txt span { font-size: var(--fs-xs); line-height: 1.5; }
.shot--wide { aspect-ratio: 16 / 10; }

/* --------------------------------------------------------------------------
   27. SCROLL REVEAL
   -------------------------------------------------------------------------- */

.reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.reveal.is-revealed { opacity: 1; transform: none; }

.reveal-stagger > * { opacity: 0; transform: translateY(14px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
.reveal-stagger.is-revealed > * { opacity: 1; transform: none; }
.reveal-stagger.is-revealed > *:nth-child(2) { transition-delay: .07s; }
.reveal-stagger.is-revealed > *:nth-child(3) { transition-delay: .14s; }
.reveal-stagger.is-revealed > *:nth-child(4) { transition-delay: .21s; }

.progress { display: none; }

/* --------------------------------------------------------------------------
   28. NO-JS + REDUCED MOTION
   -------------------------------------------------------------------------- */

.no-js .reveal, .no-js .reveal-stagger > * { opacity: 1; transform: none; }
.no-js .dots i { opacity: 1; transform: none; }
.no-js .check { opacity: 1; transform: none; }
.no-js .qa__a { grid-template-rows: 1fr; }
.no-js .tabpanel { display: block; margin-bottom: var(--sp-4); }
.no-js .tabs__list { display: none; }
.no-js .schk__body { grid-template-rows: 1fr; }
.no-js .serp__zone { opacity: 1; }
.no-js .step__n { color: var(--green-600); }
.no-js .calc__cap { display: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal, .reveal-stagger > *, .dots i, .check { opacity: 1; transform: none; }
  .mark { background-size: 100% 100%; }
}

/* --------------------------------------------------------------------------
   29. PRINT
   -------------------------------------------------------------------------- */

@media print {
  .hdr, .mcta, .drawer, .device, .cta, .calc__cap { display: none !important; }
  body { color: #000; background: #fff; }
  .ftr, .sect--slate { background: #fff !important; color: #000 !important; }
  .sect { padding-block: 1.5rem; }
}