/* tokens.css — the design system, canonised from the values the hand-written
   sections already keep (which encode the kit's measured decisions).
   Every transcribed section spends these; none defines its own. */
:root{
  /* ink & paper */
  --ink:#0d1410; --ink-2:#41504a; --ink-3:#606e68;
  --line:#e2e8e4; --paper:#fff; --paper-2:#f4f6f4;
  /* the greens */
  --deep:#082a1d; --deep-2:#0b3122; --deep-3:#10402c; --hdr:#132c14;
  --acc:#26c46f; --acc-lite:#7fdca0; --acc-dark:#157a43;
  --hero-grad:linear-gradient(168deg,#132c14 0%,#0f2410 52%,#0d1f0e 100%);
  --dark-grad:linear-gradient(180deg,#10402c 0%,#0b3122 55%,#082a1d 100%);
  /* type */
  --font:Inter,Inter,"Inter Fallback",-apple-system,Helvetica,Arial,sans-serif;
  --display-size:28px; --display-lh:1.14; --display-ls:-.3px; --display-w:420;
  --body-size:16.5px; --body-lh:1.5;
  --kicker-size:12px; --kicker-ls:.12em;
  /* the Shopify-derived display step (rail sections run larger and lighter
     than the zigzag scale) and their wider container */
  --display-2-size:36px; --display-2-lh:1.08; --display-2-w:330;
  --maxw-wide:1400px;
  /* recurring muted-ink pair */
  --ink-soft:color-mix(in srgb, var(--ink) 60%, transparent);
  --hairline:color-mix(in srgb, var(--ink) 13%, transparent);
  /* dark-ground vocabulary (three agents asked; canonised once) */
  --acc-bright:#3ddb84;          /* the hot green for small accents on dark */
  --deep-ink:#04170f;            /* near-black green: text on bright accents */
  --ink-dark-1:rgba(255,255,255,.72);
  --ink-dark-2:rgba(255,255,255,.62);
  --ink-dark-3:rgba(255,255,255,.5);
  --hairline-dark:rgba(255,255,255,.16);
  /* rhythm */
  --pad:20px; --maxw:1240px;
  --sect-y:64px;
  /* shape */
  --r-card:14px; --r-panel:22px; --r-corner:48px; --r-pill:9999px;
  --shadow-stage:0 34px 70px -34px rgba(4,20,12,.5);
}
@media(min-width:768px){ :root{--pad:32px} }
@media(min-width:1024px){ :root{--display-size:46px; --display-ls:-.46px; --sect-y:96px; --display-2-size:56px} }
@media(min-width:1200px){ :root{--pad:56px} }
/* ─────────────────────────────────────────────────────────────────────────
   Struth feature page — shared stylesheet for every /features/* page.

   FLAT BY DESIGN. Unlike the homepage rail, a feature page is ONE document
   with no iframes, so its content is indexable by search engines and
   taggable by the Amplifier extension. That is the whole point; do not
   "simplify" these into rail sections.

   Type scale and spacing come from the captured Shopify tokens
   (shopify-kit/tokens/tokens.css); the palette is Struth's own green.
   ───────────────────────────────────────────────────────────────────────── */
@font-face{font-family:Inter;src:url(/rail/blocks/_shared/InterVariable.woff2) format("woff2");
  font-weight:100 900;font-display:swap}

/* Design tokens come from tokens.css, which build-features.mjs concatenates
   ahead of this file. Do not redeclare them here: a stale copy of --acc-dark
   (#1a8f4f, WCAG AA fail) lived in this block and only stayed harmless because
   NAV_CSS happened to be inlined last. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:Inter,Inter,-apple-system,Helvetica,Arial,sans-serif;
  font-synthesis-weight:none;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--pad)}

/* ── shared type ─────────────────────────────────────────────────────── */
.eyebrow{font-size:13px;line-height:16px;font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--acc-dark);margin:0 0 18px}
.f-dark .eyebrow{color:var(--acc-lite)}
h1,h2,h3{margin:0;font-weight:480;letter-spacing:-.02em}
h1{font-size:clamp(38px,5.4vw,72px);line-height:1.04}
h2{font-size:clamp(30px,3.6vw,48px);line-height:1.08;letter-spacing:-.022em}
h3{font-size:clamp(19px,1.5vw,23px);line-height:1.25;letter-spacing:-.01em;font-weight:520}
.lede{font-size:clamp(17px,1.35vw,21px);line-height:1.5;color:var(--ink-2);margin:20px 0 0;max-width:62ch}
.f-dark .lede{color:rgba(255,255,255,.68)}
.muted{color:var(--ink-3)}

/* ── buttons ─────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:9px;border-radius:9999px;
  padding:14px 26px;font-size:16px;font-weight:550;text-decoration:none;
  border:1.5px solid transparent;cursor:pointer;transition:transform .12s ease,opacity .12s ease}
.btn:hover{transform:translateY(-1px)}
.btn--dark{background:var(--ink);color:#fff}
.btn--green{background:var(--acc);color:#04170f}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.f-dark .btn--ghost{color:#fff;border-color:rgba(255,255,255,.28)}
.btn--lite{background:#fff;color:var(--deep)}

/* ── 1 · hero — handoff's standard template ──────────────────────────────
   Copy in the LEFT column, product art in the RIGHT, art bleeding off the
   right edge. NOT copy-above-a-centred-image: that was our own invention and
   it is what made the page read as a different design. */
.f-hero{background:
    radial-gradient(at 78% 16%,color-mix(in srgb,var(--deep-3) 62%,transparent) 0,rgba(0,0,0,0) 46%),
    radial-gradient(at 22% 74%,color-mix(in srgb,var(--acc-dark) 20%,transparent) 0,rgba(0,0,0,0) 48%),
    radial-gradient(at 97% 86%,color-mix(in srgb,var(--deep-ink) 80%,transparent) 0,rgba(0,0,0,0) 44%),
    var(--hero-grad);
  color:#fff;padding:clamp(70px,7vw,116px) 0 0;
  position:relative;
  /* the art column bleeds DOWN past the hero, like the reference, so overflow
     must stay visible horizontally; the body clips the right edge instead. */
  overflow:visible}
body{overflow-x:hidden}
.f-hero__in{display:grid;gap:clamp(28px,3vw,44px);grid-template-columns:1fr;align-items:center}
@media(min-width:960px){
  .f-hero__in{grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);
    gap:clamp(30px,3vw,48px);padding-bottom:clamp(70px,7vw,116px);align-items:center;
    min-height:clamp(520px,44vw,700px)}
}
.f-hero h1{font-size:clamp(32px,3.15vw,46px);line-height:1.07;letter-spacing:-.026em;text-wrap:balance}
.f-hero h1 .alt{color:var(--acc-lite);display:block}
.f-hero .lede{color:rgba(255,255,255,.7);font-size:clamp(16px,1.15vw,18px);
  line-height:1.5;margin-top:18px;max-width:52ch}
.f-hero__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
/* one quiet button, like the reference — not two loud ones */
.f-hero__cta .btn{padding:12px 22px;font-size:15.5px}

.f-hero__fine{margin:14px 0 0;font-size:13.5px;color:rgba(255,255,255,.5)}
.f-hero__fine b{color:rgba(255,255,255,.75)}

/* the art column bleeds off the right edge */
.f-hero__art{position:relative;min-height:clamp(300px,30vw,430px)}
@media(min-width:960px){
  /*True bleed: .wrap is max-width 1240 centred, so clearing the viewport edge
     needs the gutter AND the centring margin, not just the padding. */
  /* CONTAINED, not bleeding. The reference bleeds its hero art off the right
     edge, but theirs is a collage of real UI cards whose ragged edge reads as
     intentional. A single placeholder rectangle sliced at the viewport edge
     just looks broken. Restore the bleed when real screenshots land. */
  .f-hero__art{min-height:clamp(360px,32vw,470px);margin-bottom:0}
  .f-hero__art .ph{border-radius:18px;height:100%}
}
.f-hero__art .ph{aspect-ratio:auto;height:100%;min-height:inherit;border-radius:16px 0 0 16px}
@media(max-width:959px){
  .f-hero__art{margin:0 0 28px}
  .f-hero__art .ph{border-radius:16px;aspect-ratio:16/10;min-height:0}
}

/* ── 2 · three-up value props ────────────────────────────────────────── */
.f-props{background:var(--paper);padding:clamp(64px,7vw,110px) 0}
.f-props__head{max-width:70ch;margin-bottom:clamp(34px,4vw,56px)}
.f-grid3{display:grid;gap:22px;grid-template-columns:1fr}
@media(min-width:760px){.f-grid3{grid-template-columns:repeat(3,1fr);gap:26px}}
.f-card{border:1px solid var(--line);border-radius:18px;padding:28px 26px 30px;background:var(--paper)}
.f-card h3{margin-bottom:10px}
.f-card p{margin:0;font-size:16px;line-height:24px;color:var(--ink-2)}
.f-card__ic{width:38px;height:38px;border-radius:10px;background:var(--paper-2);
  display:grid;place-items:center;margin-bottom:18px;color:var(--acc-dark)}

/* ── 3 · quote ───────────────────────────────────────────────────────── */
.f-quote{margin:clamp(40px,4.5vw,64px) 0 0;padding:clamp(30px,3.4vw,44px);
  background:var(--paper-2);border:1px solid var(--line);border-radius:20px}
.f-quote__stars{color:var(--acc-dark);font-weight:600;font-size:15px;margin-bottom:16px}
.f-quote blockquote{margin:0;font-size:clamp(21px,2.3vw,30px);line-height:1.32;
  letter-spacing:-.016em;font-weight:460;max-width:26ch}
@media(min-width:760px){.f-quote blockquote{max-width:34ch}}
.f-quote__who{margin-top:22px;font-size:15px;line-height:21px;color:var(--ink-2)}
.f-quote__who b{display:block;color:var(--ink);font-weight:560}

/* ── 4 · logo strip ──────────────────────────────────────────────────── */
.f-logos{margin-top:clamp(36px,4vw,56px);text-align:center}
.f-logos__lbl{font-size:13px;letter-spacing:.09em;text-transform:uppercase;
  font-weight:600;color:var(--ink-3);margin:0 0 26px}
.f-logos__row{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:14px 30px}
.f-logos__row img{height:26px;width:auto;opacity:.62}

/* ── 5 · alternating feature blocks ──────────────────────────────────── */
.f-blocks{background:var(--paper-2)}
.f-block{padding:clamp(52px,6vw,88px) 0}
.f-block__in{display:grid;gap:clamp(30px,4vw,60px);align-items:center;grid-template-columns:1fr}
@media(min-width:900px){
  .f-block__in{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr)}
  .f-block--flip .f-block__copy{order:2}
}
.f-block__copy h2{margin-bottom:16px}
.f-list{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:13px}
.f-list li{position:relative;padding-left:30px;font-size:16.5px;line-height:24px;color:var(--ink-2)}
.f-list li::before{content:"";position:absolute;left:0;top:4px;width:18px;height:18px;
  border-radius:50%;background:var(--acc);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.6 16.2 4.8 11.4l1.4-1.4 3.4 3.4 8-8L19 6.8z'/%3E%3C/svg%3E") center/104% no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9.6 16.2 4.8 11.4l1.4-1.4 3.4 3.4 8-8L19 6.8z'/%3E%3C/svg%3E") center/104% no-repeat}
.f-block__more{display:inline-flex;align-items:center;gap:7px;margin-top:28px;
  font-size:16px;font-weight:550;text-decoration:none;color:var(--ink);
  border-bottom:1.5px solid var(--acc);padding-bottom:2px}
.f-block__shot{border-radius:18px;overflow:hidden;border:1px solid var(--line);
  background:var(--paper);box-shadow:0 30px 60px -40px rgba(11,49,34,.45);
  align-self:start}
.f-blocks .ph{background:
    repeating-linear-gradient(135deg,transparent 0 14px,rgba(11,49,34,.045) 14px 28px),
    var(--paper)}
.f-block__shot img{width:100%;height:auto}

/* ── 5b · founder band ──────────────────────────────────────────────────
   The honest stand-in for the testimonial wall competitors run: no invented
   customers, no stars — the founders' actual emails and the promise that a
   founder replies. Mirrors the homepage founders section, compressed. */
.f-founder{background:var(--paper);padding:clamp(56px,6.5vw,96px) 0}
.f-founder__card{background:var(--paper-2);border:1px solid var(--line);border-radius:20px;
  padding:clamp(30px,3.6vw,48px);display:grid;gap:26px;align-items:center}
@media(min-width:900px){.f-founder__card{grid-template-columns:1.5fr 1fr;gap:44px}}
.f-founder__card h2{font-size:clamp(24px,2.5vw,34px)}
.f-founder__card .lede{font-size:clamp(16px,1.2vw,18px)}
.f-founder__people{display:grid;gap:16px;font-size:15.5px;line-height:22px}
.f-founder__people b{font-weight:600}
.f-founder__people a{color:var(--acc-dark);text-decoration:none;font-weight:550}
.f-founder__people a:hover{text-decoration:underline}
@media(min-width:520px) and (max-width:899px){.f-founder__people{grid-template-columns:1fr 1fr}}

/* ── 6 · FAQ ─────────────────────────────────────────────────────────── */
.f-faq{background:var(--paper-2);padding:clamp(56px,6.5vw,96px) 0}
.f-faq__head{margin-bottom:clamp(28px,3vw,44px)}
.f-faq details{border-top:1px solid var(--line)}
.f-faq details:last-of-type{border-bottom:1px solid var(--line)}
.f-faq summary{cursor:pointer;list-style:none;padding:22px 44px 22px 0;position:relative;
  font-size:17.5px;line-height:25px;font-weight:520}
.f-faq summary::-webkit-details-marker{display:none}
.f-faq summary::after{content:"";position:absolute;right:8px;top:50%;width:14px;height:14px;
  margin-top:-7px;background:currentColor;transition:transform .18s ease;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 5h2v14h-2z'/%3E%3Cpath fill='%23000' d='M5 11h14v2H5z'/%3E%3C/svg%3E") center/contain no-repeat;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M11 5h2v14h-2z'/%3E%3Cpath fill='%23000' d='M5 11h14v2H5z'/%3E%3C/svg%3E") center/contain no-repeat}
.f-faq details[open] summary::after{transform:rotate(45deg)}
.f-faq p{margin:0 0 24px;font-size:16.5px;line-height:25px;color:var(--ink-2);max-width:78ch}

/* ── 7 · closing CTA ─────────────────────────────────────────────────── */
.f-cta{background:
    radial-gradient(at 82% 20%,color-mix(in srgb,var(--deep-3) 58%,transparent) 0,rgba(0,0,0,0) 48%),
    radial-gradient(at 18% 82%,color-mix(in srgb,var(--acc-dark) 18%,transparent) 0,rgba(0,0,0,0) 50%),
    var(--hero-grad);
  color:#fff;border-radius:40px;margin:clamp(20px,2.5vw,40px) var(--pad) clamp(48px,5.5vw,80px);
  padding:clamp(52px,6vw,88px) var(--pad);text-align:center}
.f-cta h2{max-width:22ch;margin-inline:auto}
.f-cta .lede{margin-inline:auto;color:rgba(255,255,255,.7);text-align:center}
.f-cta__row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:30px}
.f-cta__fine{margin:18px 0 0;font-size:14px;color:rgba(255,255,255,.5)}

/* ── 8 · feature grid (meta pages list their children here) ──────────── */
.f-index{margin-top:clamp(40px,4.5vw,64px)}
.f-index__h{font-size:clamp(19px,1.5vw,22px);margin:0 0 20px;font-weight:540}
.f-index__grid{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.f-index__grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.f-index__grid{grid-template-columns:repeat(3,1fr)}}
.f-tile{display:block;text-decoration:none;color:inherit;border:1px solid var(--line);
  border-radius:16px;padding:22px 22px 24px;background:var(--paper);
  transition:border-color .14s ease,transform .14s ease,box-shadow .14s ease}
.f-tile:hover{border-color:var(--acc);transform:translateY(-2px);
  box-shadow:0 18px 36px -26px rgba(11,49,34,.5)}
.f-tile h3{margin:0 0 7px;font-size:19px;line-height:25px;display:flex;align-items:center;gap:9px}
.f-tile p{margin:0;font-size:15px;line-height:22px;color:var(--ink-2)}
.f-tile__go{display:inline-block;margin-top:14px;font-size:14.5px;font-weight:550;color:var(--acc-dark)}

/* The header and Product-menu CSS lives in ../nav.mjs (NAV_CSS) — appended to
   feature.css by build-features.mjs, shared with the rail pages. */

/* ── jump nav on a pillar page ───────────────────────────────────────── */
.f-jump{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;
  margin-top:clamp(28px,3vw,40px)}
.f-jump a{display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:12px;
  border:1px solid var(--line);text-decoration:none;color:var(--ink);font-size:15.5px;
  transition:border-color .14s ease,background .14s ease}
.f-jump a:hover{border-color:var(--acc);background:var(--paper-2)}
.f-jump__ic{width:19px;height:19px;flex:0 0 auto;color:var(--acc-dark)}
.f-jump__ic svg{width:19px;height:19px;display:block}
.eyebrow__ic{width:17px;height:17px;display:inline-block;vertical-align:-3px;margin-right:7px}
.eyebrow__ic svg{width:17px;height:17px;display:block}
.f-block{scroll-margin-top:88px}

/* The footer is the SHARED .s-footer section (sections-flat/footer.html);
   it carries its own scoped CSS. Nothing to style here. */

/* restored: truncated away when the header CSS was rewritten */
/* ── placeholders ────────────────────────────────────────────────────────
   Deliberately obvious. These stand in for per-feature screenshots that do
   not exist yet. They must NEVER be mistaken for real product UI, so they
   are flat, labelled, and carry a "placeholder" tag. Replace by giving the
   page a real `shot` in content.mjs — the markup swaps automatically. */
.ph{position:relative;display:grid;place-items:center;aspect-ratio:16/10;
  background:
    repeating-linear-gradient(135deg,transparent 0 14px,rgba(11,49,34,.045) 14px 28px),
    var(--paper-2);
  border-radius:inherit;color:var(--ink-3);text-align:center;padding:28px}
.f-hero__shot .ph{aspect-ratio:16/9;background:
    repeating-linear-gradient(135deg,transparent 0 14px,rgba(255,255,255,.045) 14px 28px),
    rgba(255,255,255,.05);color:rgba(255,255,255,.72)}
.ph__name{font-size:clamp(17px,1.6vw,21px);font-weight:540;letter-spacing:-.01em;
  color:var(--ink-2);margin:0}
.f-hero__shot .ph__name{color:#fff}
.ph__tag{position:absolute;top:14px;left:14px;font-size:11px;font-weight:640;
  letter-spacing:.1em;text-transform:uppercase;padding:5px 9px;border-radius:6px;
  background:rgba(11,49,34,.08);color:var(--ink-3)}
.f-hero__shot .ph__tag{background:rgba(255,255,255,.12);color:rgba(255,255,255,.8)}
.ph__sub{margin:8px 0 0;font-size:14px;line-height:20px;color:var(--ink-3);max-width:34ch}
.f-hero__shot .ph__sub{color:rgba(255,255,255,.55)}


/* ── logo strip: real supplier logos we already own ──────────────────────
   The asset is a 3200x900 sheet of four logo rows. Drive it as a background so
   the crop is explicit — an <img> at this width centres unpredictably inside an
   overflow:hidden box and lands on an empty part of the sheet. */
.f-logos__strip{height:132px;border-radius:14px;border:1px solid var(--line);
  background-color:var(--paper);
  background-image:url("/rail/sections/suppliers-assets-strip.webp");
  background-repeat:no-repeat;
  background-size:1580px auto;
  background-position:center -6px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
/* Height must crop BETWEEN sheet rows: at 104px this showed a sliced third
   row of half-logos, which read as broken. 90px ends cleanly after row two. */
@media(max-width:760px){.f-logos__strip{height:90px;background-size:1080px auto;
  background-position:center -4px;
  /* the 7% fade is ~27px at 390 wide — too abrupt to hide the sliced edge logos */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent)}}


/* ── newsletter (the reference closes on one) ────────────────────────── */
.f-news{border-top:1px solid var(--line);padding:clamp(44px,5vw,72px) 0 clamp(52px,6vw,84px)}
.f-news__in{display:grid;gap:26px;align-items:center;grid-template-columns:1fr}
@media(min-width:900px){.f-news__in{grid-template-columns:1.1fr 1fr auto;gap:44px}}
.f-news h2{font-size:clamp(24px,2.4vw,32px)}
.f-news__list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.f-news__list li{position:relative;padding-left:26px;font-size:16px;line-height:23px;color:var(--ink-2)}
.f-news__list li::before{content:"";position:absolute;left:2px;top:8px;width:7px;height:7px;
  border-radius:50%;background:var(--acc)}


/* ── stacked-sheet corners — the homepage convention (build-flat.mjs) ────
   Every section after the hero sits on a wrapper painted with the PREVIOUS
   section's ground and clips itself to rounded top corners. No section
   rounds its own bottom; the next sheet rounds over it. */
.fcorner{position:relative}
.fclip{border-radius:var(--r-corner) var(--r-corner) 0 0;overflow:hidden;position:relative}

/* the FAQ + floating-CTA band share one grey ground inside their sheet;
   the footer sheet then rounds its top corners over that grey. The
   homepage footer is untouched — this file styles /features/* only. */
.f-tail{background:var(--paper-2);display:flow-root}
.f-tail .f-faq{background:transparent}

@font-face{font-family:Inter;src:url(/rail/blocks/_shared/InterVariable.woff2) format("woff2");
  font-weight:100 900;font-display:swap}
.site-hdr,.site-hdr *,.site-hdr *::before,.site-hdr *::after{box-sizing:border-box}
:root{
  /* ── THIS BLOCK IS A MIRROR, NOT A SOURCE ────────────────────────────────
     tokens.css is the source. Six of the eight values below are copies of it,
     and they exist only because build-ours.mjs inlines NAV_CSS WITHOUT
     tokens.css — on the rail pages (index.html, pricing.html) this is the only
     definition they get. Do not delete them, and do not treat them as
     editable: every builder that DOES load tokens.css inlines this block
     AFTER it, so anything written here silently overrides the design system
     site-wide. A value that drifts here makes a fix in tokens.css inert, with
     no error to notice. That has already happened twice.

     Change a value in tokens.css FIRST, then copy it here. Both must agree.

     The two that were caught drifting, kept here as the worked example:
       --acc-dark  #1a8f4f -> #157a43   4.129 / 3.802  ->  5.389 / 4.962
       --ink-3     #6b7a74 -> #606e68   4.505 / 4.148  ->  5.347 / 4.923
     (ratios are against #fff and #f4f6f4; both were under WCAG AA 4.5 on the
     grey ground. --acc-dark is spent by .nav__kicker, the why-card arrows and
     .st-eyebrow; --ink-3 by .why__card span, .why__inst span and .nav__ic.)

     NOTE for anyone tempted to reuse --acc-dark as a focus ring: don't. See
     the RING_BASE comment in head.mjs — text needs 4.5:1, a focus ring needs
     3:1 on grounds this colour cannot serve. They are different numbers on
     purpose. */
  --ink:#0d1410; --ink-3:#606e68; --paper-2:#f4f6f4;
  --acc:#26c46f; --acc-lite:#7fdca0; --acc-dark:#157a43;
  /* nav's own, not in tokens.css */
  --nav-pad:20px; --nav-maxw:2000px;
}
@media(min-width:768px){ :root{--nav-pad:32px} }
@media(min-width:1200px){ :root{--nav-pad:90px} }
.site-hdr .wrap{max-width:var(--nav-maxw);margin:0 auto;padding-inline:var(--nav-pad)}
/* #132c14 = the top stop of the homepage hero gradient, so header and hero
   read as one surface; the hairline below only appears once you scroll. */
.site-hdr{position:sticky;top:0;z-index:60;background:#132c14;color:#fff;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,0);transition:box-shadow .2s ease;
  font:400 16px/1.5 Inter,Inter,-apple-system,Helvetica,Arial,sans-serif}
.site-hdr[data-scrolled]{box-shadow:inset 0 -1px 0 rgba(255,255,255,.16)}
.hdr__in{display:flex;align-items:center;gap:20px;height:72px}
/* ── the logo lockup: ONE rule per element ─────────────────────────────────
   This block used to be six rules deep, with three of them setting the
   wordmark's height and a .hdr__logo img{width:auto} that beat
   .hdr__mark{width:26px} (desktop only looked right because the mark is
   square). It broke in production twice, once rendering the wordmark as a
   billboard. Nothing cascades over these now, so nothing can win by accident:
   change the number here and it is the number you get.
   The mark and the wordmark are DELIBERATELY different heights. The wordmark
   SVG's viewBox is cropped to its ink — it used to carry 62% empty space, so
   height:15px painted 5.6px of actual letters, which is why the lockup read
   as broken next to the 26px mark. 13px here IS 13px of letters, and the
   <img height> attribute in HEADER matches it. (William, 2026-08-25) */
  .hdr__logo{display:flex;align-items:center;gap:9px}
  .hdr__mark{height:26px;width:26px;display:block;border-radius:6px}
  .hdr__word{height:13px;width:auto;display:block}
.site-hdr a{color:#fff;text-decoration:none}
.hdr__link{font-size:15.5px;white-space:nowrap}
.hdr__link:hover{color:var(--acc-lite)}
.hdr__spacer{flex:1}
.hdr__mig{font-size:14px;padding:6px 12px;border-radius:9999px;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);white-space:nowrap}
.hdr__tel{font-size:15px;font-weight:560;white-space:nowrap}
.site-hdr .btn--dark{background:#fff;color:#0d1410;padding:10px 20px;font-size:15px;
  white-space:nowrap;border-radius:9999px;font-weight:550;display:inline-block}
.site-hdr .btn--dark:hover{background:var(--acc-lite)}
@media(max-width:1180px){.hdr__mig,.hdr__tel{display:none}}
@media(max-width:860px){.hdr__link{display:none}}

/* ── the burger and the mobile menu (2026-08-25) ───────────────────────────
   Above 860 nothing here applies and the desktop header is untouched. Below
   it the two mega-menus give way to one menu, which is also what lets the
   logo go back to its real 26px instead of the 18px squeeze it needed to fit
   the desktop row on a phone. */
/* THE BARS CARRY THEIR OWN WIDTH ON PURPOSE (2026-08-28). They used to have
   none and got their 22px by stretching to the button's content box. That
   works in Blink, where a <button> flex container computes align-items:normal
   -> stretch. It does NOT work in WebKit: its UA stylesheet sets
   button { align-items: center }, so three empty <i> elements with no width
   collapsed to 0px. The result on iPhone was an INVISIBLE hamburger over a
   button that was still 38x38 and still opened the menu when tapped — which is
   how it survived every desktop check. Never size an empty flex child by
   stretch inside a <button>; state the width. */
.hdr__burger{display:none;flex-direction:column;align-items:center;justify-content:center;gap:4.5px;
  width:38px;height:38px;padding:0;border:0;background:none;cursor:pointer;flex:none;
  border-radius:9999px}
.hdr__burger i{display:block;width:22px;height:2px;border-radius:2px;background:#fff;flex:none;
  transition:transform .2s ease,opacity .16s ease}
.hdr__mobile{display:none}
@media(max-width:860px){
  .site-hdr .hdr__nav{display:none}
  .hdr__burger{display:flex}
  .hdr__in{gap:12px}
  .site-hdr[data-menu] .hdr__burger i:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .site-hdr[data-menu] .hdr__burger i:nth-child(2){opacity:0}
  .site-hdr[data-menu] .hdr__burger i:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
  /* iOS SAFARI EATS THE LAST ROW. bottom:0 is the layout viewport, which sits
     UNDER Safari's bottom toolbar, so the Start free pill in .mnav__foot was
     clipped on a real iPhone (reported 2026-08-28; every desktop emulator
     shows it fine because there is no toolbar). The scroll padding below
     clears the toolbar and the home indicator. */
  .hdr__mobile{display:block;position:fixed;left:0;right:0;top:72px;bottom:0;
    background:var(--hdr,#132c14);overflow-y:auto;z-index:60;
    overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
    opacity:0;visibility:hidden;transform:translateY(-6px);
    transition:opacity .18s ease,transform .18s ease,visibility .18s}
  .site-hdr[data-menu] .hdr__mobile{opacity:1;visibility:visible;transform:none}
  .hdr__mobile-in{padding:8px 20px calc(96px + env(safe-area-inset-bottom));
    max-width:560px;margin:0 auto}
  .hdr__mobile ul{list-style:none;margin:0;padding:0}
  /* TOP-LEVEL ROWS ONLY. The child selector matters: the accordions now hold
     dozens of anchors, and a loose ".mnav__main li a" made every feature a
     22px row with its own divider. */
  .mnav__main > li > a,
  .mnav__main > li > .mnav__acc > summary{
    display:flex;align-items:center;justify-content:space-between;gap:10px;
    padding:15px 0;font-size:22px;font-weight:520;
    letter-spacing:-.01em;color:#fff;text-decoration:none;
    border-bottom:1px solid rgba(255,255,255,.12)}
  .mnav__acc > summary{cursor:pointer;list-style:none}
  .mnav__acc > summary::-webkit-details-marker{display:none}
  /* Chevron: a rotated border corner. TRANSLATE BEFORE ROTATE — transforms
     apply right to left, so rotate(45deg) translateY(-3px) nudges the mark
     along its own rotated axis and it drifts diagonally out of the corner.
     Nudging first, in unrotated space, keeps both states optically centred. */
  .mnav__acc > summary::after{content:"";flex:none;width:9px;height:9px;margin-right:5px;
    border-right:2px solid rgba(255,255,255,.5);border-bottom:2px solid rgba(255,255,255,.5);
    transform:translateY(-3px) rotate(45deg);transition:transform .18s ease}
  .mnav__acc[open] > summary::after{transform:translateY(2px) rotate(-135deg)}
  .mnav__accin{padding:4px 0 14px}

  /* THE DESKTOP PANEL CLASSES ARE REUSED, SO THEY MUST BE RE-COLOURED. The
     mega-menu is a LIGHT panel: .nav__item, .nav__colhead and .nav__ic all
     resolve to var(--ink) / var(--paper-2). Dropped into this dark sheet
     unchanged they are dark text on a dark ground — invisible. */
  /* !important IS LOAD-BEARING HERE. The light-panel rules are themselves
     color: var(--ink) !important (they have to beat .site-hdr a, which
     paints every header link white). Specificity alone loses to that, so the
     first attempt rendered the whole Product tree in near-black on the dark
     green sheet — legible in the DOM, invisible to a human. */
  .hdr__mobile .mnav__grp{padding:14px 0 2px}
  .hdr__mobile .nav__colhead{margin-bottom:8px;font-size:15.5px;color:#fff !important}
  .hdr__mobile .nav__kicker{color:rgba(255,255,255,.42) !important;margin-bottom:2px}
  .hdr__mobile .nav__item{padding:9px 0;margin-inline:0;font-size:16px;
    color:rgba(255,255,255,.82) !important;border-radius:0}
  .hdr__mobile span.nav__item--off{color:rgba(255,255,255,.64) !important}
  .hdr__mobile .nav__ic{color:rgba(255,255,255,.5) !important}
  /* Hover is a lie on a touch screen and the light-panel hover ground
     (var(--paper-2)) would flash white here. Kill both. */
  .hdr__mobile .nav__item:hover,
  .hdr__mobile span.nav__item--off:hover{background:none;color:rgba(255,255,255,.82) !important}
  .hdr__mobile .nav__colhead:hover,
  .hdr__mobile span.nav__colhead:hover{color:#fff !important}
  .hdr__mobile .nav__item:hover .nav__ic{color:rgba(255,255,255,.5) !important}
  .mnav__grp--ai{margin-top:6px;padding-top:14px;border-top:1px solid rgba(255,255,255,.1)}

  .mnav__cards{margin:4px 0 2px;display:grid;gap:10px}
  .mnav__cards a{display:block;padding:13px 15px;border-radius:14px;text-decoration:none;
    background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1)}
  .mnav__cards b{display:block;color:#fff;font-size:16px;font-weight:600;margin-bottom:3px}
  .mnav__cards span{display:block;color:rgba(255,255,255,.62);font-size:13.5px;line-height:1.45}
  .mnav__cards em{display:block;margin-top:7px;font-style:normal;font-size:13.5px;
    font-weight:600;color:#8fe08a}
  .mnav__small{margin-top:22px;display:flex;flex-wrap:wrap;gap:8px 18px}
  .mnav__small a{color:rgba(255,255,255,.6);font-size:14px;text-decoration:none}
  .mnav__foot{margin-top:26px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12);
    display:flex;align-items:center;gap:14px;flex-wrap:wrap}
  .mnav__tel{color:#8fe08a;font-size:16px;font-weight:600;text-decoration:none}
  .mnav__login{color:rgba(255,255,255,.75);font-size:16px;text-decoration:none}
  /* .site-hdr a already sets white; this needs to beat it on specificity or the
     pill renders white on white. */
  .site-hdr .mnav__go{margin-left:auto;background:#fff;color:#0d1410;border-radius:9999px;
    padding:11px 22px;font-size:16px;font-weight:600;text-decoration:none}
}
@media(max-width:420px){
  .hdr__in{gap:8px}
  .site-hdr .btn--dark{padding:8px 14px;font-size:14px}
  .mnav__main > li > a,
  .mnav__main > li > .mnav__acc > summary{font-size:20px;padding:13px 0}
}

/* ── the panels: FULL-BLEED, Shopify-style — the sheet spans the viewport,
   the content inside stays on the header's grid ───────────────────────── */
.hdr__nav{position:relative}
.nav__btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;
  font:inherit;font-size:15.5px;color:#fff;cursor:pointer;padding:8px 2px;
  white-space:nowrap;position:relative;z-index:70}
.nav__btn svg{transition:transform .18s ease}
[data-open="true"] .nav__btn svg{transform:rotate(180deg)}
.nav__backdrop{position:fixed;inset:72px 0 0;background:rgba(4,20,12,.48);z-index:65;
  opacity:0;pointer-events:none;transition:opacity .16s ease}
[data-open="true"] .nav__backdrop{opacity:1;pointer-events:auto}
.nav__panel{position:fixed;top:72px;left:0;right:0;background:#fff;color:var(--ink);
  box-shadow:0 40px 90px -40px rgba(4,20,12,.5);
  max-height:calc(100vh - 72px);overflow:auto;overscroll-behavior:contain;
  opacity:0;pointer-events:none;transform:translateY(-6px);
  transition:opacity .16s ease,transform .16s ease;z-index:66}
[data-open="true"] .nav__panel{opacity:1;transform:translateY(0);pointer-events:auto}
.nav__body{max-width:var(--nav-maxw);margin:0 auto;padding:30px var(--nav-pad) 26px}
.nav__cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}
.nav__grp + .nav__grp{margin-top:28px}
.nav__colhead{display:block;margin-bottom:14px;font-size:16.5px;font-weight:600;
  letter-spacing:-.012em;color:var(--ink) !important;text-decoration:none}
.nav__colhead:hover{color:var(--acc-dark) !important}
.nav__kicker{display:block;font-size:11px;font-weight:640;letter-spacing:.1em;
  text-transform:uppercase;color:var(--acc-dark);margin-bottom:3px}
.nav__grp ul{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.nav__item{display:flex;align-items:center;gap:9px;padding:7px 9px;margin-inline:-9px;
  border-radius:8px;font-size:14.5px;line-height:19px;color:var(--ink) !important;text-decoration:none}
.nav__item:hover{background:var(--paper-2);color:var(--acc-dark) !important}
span.nav__item--off{cursor:default}
span.nav__item--off:hover{background:none;color:var(--ink) !important}
span.nav__item--off:hover .nav__ic{color:var(--ink-3)}
span.nav__colhead:hover{color:var(--ink) !important}
.nav__ic{flex:0 0 auto;width:18px;height:18px;color:var(--ink-3);display:block}
.nav__ic svg{width:18px;height:18px;display:block}
.nav__item:hover .nav__ic{color:var(--acc)}

/* the grey band along the bottom — full-bleed, content on the grid */
.nav__band{background:var(--paper-2)}
.nav__bandin{max-width:var(--nav-maxw);margin:0 auto;
  padding:16px var(--nav-pad) 18px;display:flex;align-items:center;flex-wrap:wrap;gap:10px 34px}
.nav__aihead{color:var(--ink) !important;text-decoration:none;font-size:16.5px;
  font-weight:600;letter-spacing:-.012em}
.nav__aihead:hover{color:var(--acc-dark) !important}
.nav__aifeats{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 22px}
.nav__band .nav__item{color:var(--ink) !important;font-weight:550}
.nav__band .nav__item:hover{background:#fff;color:var(--acc-dark) !important}

/* Why Struth — the trust menu */
.nav__why{display:grid;grid-template-columns:minmax(0,1fr) 265px;gap:36px}
.why__cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.why__card{display:flex;flex-direction:column;background:var(--paper-2);border-radius:14px;
  padding:18px;text-decoration:none;color:var(--ink) !important;
  border:1px solid transparent;transition:border-color .14s ease,transform .14s ease}
.why__card:hover{border-color:var(--acc);transform:translateY(-2px)}
.why__card b{font-size:15.5px;font-weight:650;letter-spacing:-.012em;margin-bottom:6px}
.why__card span{font-size:13px;line-height:1.45;color:var(--ink-3)}
.why__card em{font-style:normal;margin-top:auto;padding-top:12px;font-size:13px;
  font-weight:600;color:var(--acc-dark)}
.why__rail ul{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:12px}
.why__inst{display:flex;gap:10px;align-items:flex-start;text-decoration:none;color:var(--ink) !important}
.why__inst .nav__ic{margin-top:2px}
.why__inst span{font-size:13px;line-height:1.4;color:var(--ink-3)}
.why__inst b{display:block;font-size:14.5px;font-weight:600;color:var(--ink)}
.why__inst:hover b{color:var(--acc-dark)}
.why__links{font-size:13.5px;font-weight:550}
.why__links a{color:var(--ink) !important}
.why__links a:hover{color:var(--acc-dark) !important}
.why__links i{font-style:normal;color:#c9d4cd}

@media(max-width:1100px){
  .nav__cols{gap:30px}
}
@media(max-width:1000px){
  .nav__panel{position:fixed;top:84px;left:50%;right:auto;width:96vw;
    transform:translate(-50%,-6px);max-height:70vh;border-radius:22px}
  [data-open="true"] .nav__panel{transform:translate(-50%,0)}
  .nav__cols{grid-template-columns:1fr}
  .nav__band{border-radius:0 0 22px 22px}
  .nav__why{grid-template-columns:1fr;gap:22px}
  .why__cards{grid-template-columns:1fr}
  .nav__backdrop{display:none}
}
main{display:block}
/* ── the skip link (WCAG 2.4.1) ───────────────────────────────────────────
   The header is 117 interactive elements and two mega-menus deep. Without
   this, reaching the first line of the page by keyboard means tabbing all of
   it. Off-screen until focused, then it lands over the sticky header. */
.skip-link{position:fixed;left:-9999px;top:0;z-index:200}
.skip-link:focus{left:12px;top:12px;background:#fff;color:#0d1410;
  padding:10px 18px;border-radius:9999px;text-decoration:none;
  font:550 15px/1 Inter,-apple-system,Helvetica,Arial,sans-serif;
  box-shadow:0 8px 28px rgba(0,0,0,.28);outline:2px solid #0b7a4f;outline-offset:2px}
/* ── one visible focus ring, everywhere (WCAG 2.4.7 / 1.4.11) ─────────────
   Deliberately LOW specificity (0,1,0 and 0,2,0) and emitted before the
   section styles, so any section that already ships its own :focus-visible
   keeps winning — on specificity, on source order, or both. In particular
   .s-cta .ring__in{outline:0} still wins: the CTA replaces the ring with a
   :focus-within border and glow on its wrapper, and that keeps working. */
:focus-visible{outline:2px solid #1a8f4f;outline-offset:2px}
.site-hdr :focus-visible,
.s-footer :focus-visible,
.f-dark :focus-visible{outline-color:#9fe870}
/* …except the two mega-menu panels, which are WHITE sheets dropped over the
   dark bar. They are inside .site-hdr, so without this they would inherit the
   pale ring and score 1.47:1 — invisible. */
.site-hdr .nav__panel :focus-visible{outline-color:#0b7a4f}