/* ==========================================================================
   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 > *, .heron__mark > *,
.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. WHY THE HERON
   The one place on the site where the mark is shown at size and explained.

   THE BIRD IS NEGATIVE SPACE INSIDE THE A. It is the ground showing through
   the filled triangle, not a drawn shape, so the mark only reads on a LIGHT
   ground. Moving this section onto .sect--slate would fill the bird with
   slate and erase it. If it ever has to go on the dark, the fill has to
   invert to bone and the section needs its own ground behind the mark.
   -------------------------------------------------------------------------- */

.heron__mark {
  display: grid;
  gap: var(--sp-4);
  justify-items: center;
  text-align: center;
}
.heron__mark svg {
  width: min(19rem, 60vw);
  height: auto;
  color: var(--slate-deep);
}
.heron__mark figcaption {
  font-family: var(--font-label);
  font-style: italic;
  font-size: var(--fs-sm);
  color: var(--fg-faint);
  max-width: 21rem;
}

/* The one line meant to be remembered. Georgia-free: this is the display
   face, sized between a lead and an h3, over a rule. */
.heron__kicker {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1.5px solid var(--ink-900);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
  line-height: 1.32;
  letter-spacing: -0.018em;
  color: var(--ink-950);
}

/* --------------------------------------------------------------------------
   19. 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); }

/* --------------------------------------------------------------------------
   20. 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; }

/* --------------------------------------------------------------------------
   21. 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; }

/* --------------------------------------------------------------------------
   22. 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; }

/* h2, not h4. These are top-level sections of the page and the document went
   h2 (closing CTA) straight to h4 here, which is a heading level skipped for
   anyone navigating by headings. The styling is unchanged. */
.ftr h2 {
  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; }

/* Footer links measured 17px tall, and the legal row 22px — both well under the
   44px a thumb needs, and they sit close enough together to mis-tap. Padding
   goes on for touch only: on a mouse this column is a reading list, not a tap
   list, and loosening it there would just spread the footer out.

   The query is deliberately (pointer: coarse) OR narrow, not coarse alone.
   Pointer detection is the more accurate signal and it is also the one you
   cannot verify in a desktop browser, which is how an untestable fix gets
   shipped and believed. The width half makes it provable. */
@media (pointer: coarse), (max-width: 52rem) {
  .ftr ul { gap: .05rem; }
  .ftr li a, .ftr__bot a { display: inline-block; padding-block: .72rem; }
  .ftr__legal { gap: var(--sp-2) var(--sp-5); }
}

.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); }

/* --------------------------------------------------------------------------
   23. 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; } }

/* --------------------------------------------------------------------------
   24. 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); }

/* --------------------------------------------------------------------------
   25. 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); }

/* --------------------------------------------------------------------------
   26. 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); }
/* The bullet is positioned, NOT a grid column.
   This was `display: grid; grid-template-columns: auto minmax(0,1fr)`, which
   works only while an <li> contains exactly one child. Put a <strong> lead-in
   in front of the text and they become two separate grid items: the bold half
   is squeezed into a narrow column one word per line, and the rest drops to
   the next row. It looked fine on the privacy page, whose list items are plain
   text, and shipped broken on two service pages. */
.prose ul li { position: relative; padding-left: 1.15rem; color: var(--fg-soft); }
.prose ul li::before {
  content: "";
  position: absolute; left: 0; top: .62em;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--green-600);
}
.prose a { color: var(--green-700); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink-900); }

/* --------------------------------------------------------------------------
   27. INSIGHTS — the index, the filters, and the related block

   There is no photography on this site, so the index has to carry itself on
   type, rule and space. Every card leads with its category and its argument
   rather than a thumbnail, and the featured slot is simply bigger.

   THE FILTERS MUST DEGRADE. The chip row is hidden until site.js confirms it
   is alive (§10), because a row of buttons that does nothing is worse than no
   row at all, and every article is in the DOM regardless — a crawler and a
   reader with JS off both see the complete list.
   -------------------------------------------------------------------------- */

/* Ships with the `hidden` attribute on it. site.js §11 removes that only after
   the filters are wired, so the row cannot appear unless the code driving it
   actually ran — stricter than keying off .no-js, which only tells you a
   script started. The explicit [hidden] rule is needed because .ifilters sets
   display and an author rule beats the UA sheet's [hidden] { display: none }. */
.ifilters {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin-bottom: var(--sp-6);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--rule-strong);
}
.ifilters[hidden] { display: none; }

.ichip {
  font-size: var(--fs-xs);
  font-weight: 700;
  padding: .5rem .85rem;
  border-radius: var(--radius-xs);
  border: 1.5px solid var(--rule-strong);
  background: #fff;
  color: var(--fg-soft);
  transition: background-color .18s, color .18s, border-color .18s;
}
.ichip:hover { border-color: var(--ink-900); color: var(--ink-900); }
.ichip[aria-pressed="true"] { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.ichip__n { opacity: .55; margin-left: .35em; font-weight: 400; }

.ilist { display: grid; gap: clamp(1rem, .5rem + 1.6vw, 1.5rem); }
@media (min-width: 52rem) { .ilist { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.ilist > * { min-width: 0; }
/* A filter that leaves one card would otherwise strand it half-width with a
   hole beside it. site.js §10 sets this. */
.ilist--single > .icard { grid-column: 1 / -1; }

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

/* The featured article is the same card, spanning and set larger. No separate
   component, so the two cannot drift apart visually. */
.icard--feat { grid-column: 1 / -1; border-top-color: var(--green-600); }
.icard--feat .icard__ttl { font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2.1rem); letter-spacing: -0.022em; }
.icard--feat .icard__dek { font-size: var(--fs-lead); line-height: 1.5; }
@media (min-width: 52rem) { .icard--feat .icard__dek { max-width: 46rem; } }

.icard__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
  font-family: var(--font-label); font-style: italic;
  font-size: var(--fs-xs); color: var(--fg-faint);
}
.icard__cat {
  font-family: var(--font-body); font-style: normal; font-weight: 700;
  font-size: var(--fs-xs); letter-spacing: .01em;
  color: var(--green-700);
  background: var(--green-050);
  border: 1px solid var(--green-100);
  border-radius: var(--radius-xs);
  padding: .2rem .5rem;
}
.icard__dot { opacity: .5; }

.icard__ttl { font-size: var(--fs-h3); line-height: 1.22; }
.icard__ttl a { color: inherit; }
.icard__ttl a:hover { color: var(--green-800); }
/* The whole card is the target, but the anchor stays the only tab stop. */
.icard__ttl a::after { content: ""; position: absolute; inset: 0; }
.icard { position: relative; }

.icard__dek { color: var(--fg-soft); font-size: var(--fs-sm); line-height: 1.62; }
.icard__go { margin-top: auto; padding-top: var(--sp-3); }

.iempty {
  grid-column: 1 / -1;
  padding: var(--sp-7) var(--sp-5);
  text-align: center;
  color: var(--fg-faint);
  border: 1px dashed var(--rule-strong);
  border-radius: var(--radius-lg);
}
.iempty[hidden] { display: none; }

/* --------------------------------------------------------------------------
   THE AD CHECK

   Two halves, and the split is deliberate.

   The top half is REAL and instant: Google's Ads Transparency Centre is a
   public, URL-driven page, so a domain typed here becomes a deep link straight
   into it, filtered to Australia. Nothing is fetched, nothing is claimed, and
   the reader gets the actual answer from Google rather than from us.

   The bottom half is a promise a person keeps. There is NO public API for the
   Transparency Centre, so "tell us your industry and we will scan it" cannot
   be automated honestly — anything offering that is scraping or guessing. So
   it is an email and a report we write. Do not let anyone wire this to a
   scraper later.
   -------------------------------------------------------------------------- */

.adcheck {
  border: 1.5px solid var(--ink-900);
  border-radius: var(--radius-lg);
  background: #fff;
  overflow: hidden;
  max-width: var(--wrap-text);
}
.adcheck > * { min-width: 0; }

.adcheck__hd {
  padding: clamp(1.2rem, 1rem + 1.2vw, 1.75rem);
  background: var(--bg-bone);
  border-bottom: 1px solid var(--rule);
}
.adcheck__hd h3 { font-size: var(--fs-h3); }
.adcheck__hd p { font-size: var(--fs-sm); color: var(--fg-soft); margin-top: .4rem; }

.adcheck__bd { padding: clamp(1.2rem, 1rem + 1.2vw, 1.75rem); }

/* flex-end, so the button sits level with the INPUT rather than with the top
   of the label above it. The empty .field__err span under the input has no
   height, so this lands where you expect. */
.adcheck__row { display: flex; flex-wrap: wrap; gap: var(--sp-3); align-items: flex-end; }
.adcheck__row > * { min-width: 0; }
.adcheck__row .field { flex: 1 1 16rem; }

.adcheck__note {
  font-size: var(--fs-xs); color: var(--fg-faint);
  margin-top: var(--sp-4); line-height: 1.55;
}

/* The second half sits behind a rule, because it is a different offer. */
.adcheck__more {
  margin-top: var(--sp-5); padding-top: var(--sp-5);
  border-top: 1px solid var(--rule-strong);
}
.adcheck__more > p { font-size: var(--fs-sm); color: var(--fg-soft); margin-bottom: var(--sp-4); }

/* Back to the index. One at the top of an article and one at the foot, because
   the breadcrumb in the page header is small, italic and not obviously a
   control — it reads as a location, not a way out. */
.backlink {
  display: inline-flex; align-items: center; gap: .45em;
  font-size: var(--fs-sm); font-weight: 700;
  color: var(--fg-soft);
  transition: color .18s;
}
.backlink:hover { color: var(--green-800); }
.backlink svg { flex: none; transition: transform .25s var(--ease-out); }
.backlink:hover svg { transform: translateX(-3px); }
.backlink--top { margin-bottom: var(--sp-5); }
.backlink--foot { margin-top: var(--sp-6); }

/* The related block at the foot of an article. Every article carries one, so
   nothing published here is an orphan. The register of what links to what is
   ../CONTENT-LOG.md. */
.related {
  max-width: var(--wrap-text);
  margin-top: var(--sp-8);
  padding-top: var(--sp-6);
  border-top: 1.5px solid var(--ink-900);
}
.related h2 { font-size: var(--fs-h4); margin-bottom: var(--sp-4); }
.related ul { display: grid; gap: var(--sp-4); }
.related li { display: grid; gap: .25rem; }
.related li > * { min-width: 0; }
.related a { font-weight: 700; color: var(--ink-900); }
.related a:hover { color: var(--green-800); }
.related span { font-size: var(--fs-sm); color: var(--fg-soft); line-height: 1.55; }

/* --------------------------------------------------------------------------
   28. 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; }

/* --------------------------------------------------------------------------
   29. 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; }

/* --------------------------------------------------------------------------
   30. 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%; }
}

/* --------------------------------------------------------------------------
   31. 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; }
}