/* ============================================================================
   Nashville’s Web Design — "The Map Layer", with a signal layer on top
   A cartographic design system: survey paper, hairline grid, coordinate ticks,
   registration marks and a map pin as the recurring marker. The AI-era work
   sits on it as a dark signal layer — the same grid and ticks, inverted, with
   the answer panel, the engine strip and the entity graph (see the end of
   this file). Written mobile-first. Every block is designed at 375px, then
   widened.
   ========================================================================= */

/* ---- Fonts. Self-hosted Metropolis, the house typeface for headings and UI.
   Public domain (UNLICENSE). --- */
@font-face{font-family:Metropolis;src:url(/assets/fonts/Metropolis-Regular.woff2) format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Metropolis;src:url(/assets/fonts/Metropolis-Medium.woff2) format('woff2');font-weight:500;font-style:normal;font-display:swap}
/* Metropolis has no 700 face. Seven rules ask for one, including every
   button, and a missing weight is synthesised differently by different
   engines — which is why button text looked wrong on some browsers and
   fine on others. The SemiBold and ExtraBold faces are declared over
   ranges so every weight the stylesheet asks for resolves to a real file. */
@font-face{font-family:Metropolis;src:url(/assets/fonts/Metropolis-SemiBold.woff2) format('woff2');font-weight:600 690;font-style:normal;font-display:swap}
@font-face{font-family:Metropolis;src:url(/assets/fonts/Metropolis-ExtraBold.woff2) format('woff2');font-weight:700 800;font-style:normal;font-display:swap}
@font-face{font-family:Metropolis;src:url(/assets/fonts/Metropolis-Black.woff2) format('woff2');font-weight:900;font-style:normal;font-display:swap}

/* ---- Tokens -------------------------------------------------------------- */
:root{
  /* Dark-first (2026-09-20, Michael: "the hero and the section under it are what the whole
     site should look like"). The page is the hero's dark gray; the alternate sections and the
     footer are the deep teal of the tools band; content blocks sit on paper cards (the
     `--on-paper` set below), so every section is the dark ground + bright cards + gold buttons
     that the top of the home page is. The header stays paper so the dark-gray lockup reads. */
  --paper:#161514;
  --paper-2:#1F1D1C;
  --sunk:#211F1E;
  --ink:#F2EEE9;
  --ink-2:#D6CFC8;
  --muted:#A69E97;
  --rule:#332F2D;
  --rule-2:#4A4340;
  /* The palette (2026-09-20): deep teal is the brand and the structure (bands, eyebrows, rules,
     links — the trust color, ~30% of the page); goldenrod is the one color reserved for calls
     to action (contrast and isolation are what make a button convert, so nothing else wears
     it); tomato is scarce — the logo's mark, urgency, alerts — so it keeps its punch. The dark
     gray and the paper stay as the 60%. */
  --brand:#3DB8C6;                 /* teal, lit for rules and ticks on the dark ground */
  --brand-ink:#5CCAD6;             /* teal for text on the dark ground (8:1) */
  --brand-lift:#5CCAD6;
  --brand-tint:#0F2E32;            /* washes and callouts on the dark ground */
  --brand-deep:#073F46;            /* the tools band, the alternate sections, the footer */
  --cta:#FCB432;                   /* goldenrod: buttons and calls to action only */
  --cta-ink:#1A1919;
  --cta-hover:#F2A41B;
  --alert:#EE3430;                 /* tomato: urgency, errors */
  --alert-ink:#FF6E69;             /* tomato lit for text on the dark ground */

  --grid:rgba(242,238,233,.07);    /* map grid hairline */
  --contour:rgba(242,238,233,.13);
  color-scheme:dark;

  --font:Metropolis,-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;

  --pad:clamp(1.25rem,5vw,2rem);   /* gutter */
  --wide:76rem;                    /* max content width */
  --narrow:44rem;                  /* prose measure */
  --r:12px;                        /* soft corners (2026-09-20 restyle; the old system was 2px) */
  --tap:44px;                      /* minimum tap target */
}

/* The paper surfaces: the header, its menus, and every card. One token set, so a card on the
   dark ground carries dark ink, dark-teal links and light rules without restating a rule.
   These rules redefine tokens their own `background`/`color` read — on purpose: a card IS the
   inversion. Nothing else on the site may do that (see .band below). */
.hdr,.nav-menu,.drawer,.card,.tool-card,.scan-result,.on-paper{
  --paper:#F7F5F2; --paper-2:#FFFFFF; --sunk:#EFEAE3;
  --ink:#1A1919; --ink-2:#403B38; --muted:#6B6560;
  --rule:#E2DCD3; --rule-2:#D3CBC0;
  --brand:#0A5A64; --brand-ink:#07434B; --brand-tint:#E6F1F2; --alert-ink:#C4231F;
  --grid:rgba(26,25,25,.045); --contour:rgba(26,25,25,.10);
  color-scheme:light;
}

/* ---- Reset --------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
*{margin:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  font-family:var(--font);
  font-size:1.0625rem;           /* 17px — never below 16 */
  line-height:1.6;
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  /* `clip` not `hidden`: overflow-x:hidden forces overflow-y to compute as
     auto, which makes <body> a scroll container and silently breaks in-page
     anchor links (#section jumps land at the top) and position:sticky.
     `clip` gives the same 375px protection without creating a scroller. */
  overflow-x:clip;
}
img,svg,video{display:block;max-width:100%;height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--brand);outline-offset:3px;border-radius:var(--r)}
::selection{background:var(--cta);color:var(--cta-ink)}

.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--ink);color:var(--paper);padding:.85rem 1.25rem;font-weight:600;
}
.skip:focus{left:0}

/* ---- Layout -------------------------------------------------------------- */
.wrap{width:100%;max-width:var(--wide);margin-inline:auto;padding-inline:var(--pad)}
.narrow{max-width:var(--narrow)}
/* When .narrow sits on the container itself it would center the whole block,
   which reads as a jump away from the left-aligned heroes and section heads.
   Keep the container at full width and constrain the measure on its children
   instead, so prose starts on the same line as everything above it. */
.wrap.narrow{max-width:var(--wide)}
.wrap.narrow>*{max-width:var(--narrow)}
section{padding-block:clamp(3.5rem,9vw,6.5rem)}
.sec-sunk{background:var(--sunk)}
/* There is exactly one inverted-section class, and it is .band (below).
   An earlier .sec-ink redefined --ink on the same element that read
   `background:var(--ink)` — the override fed back into that declaration, so
   the section rendered in the PAGE color while its children stayed
   light-on-light. The headline and the ghost button were invisible and the
   blank headline held the layout open. Never redefine a token a rule reads. */

/* The map grid. A hairline graticule behind the page — the single most
   recognizable piece of the system. Kept very faint so text stays AA. */
.grid-bg{position:relative;isolation:isolate}
.grid-bg::before{
  content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
                   linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:clamp(48px,9vw,88px) clamp(48px,9vw,88px);
  mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 100%);
}

/* ---- Type ---------------------------------------------------------------- */
h1,h2,h3,h4{font-weight:900;line-height:1.02;letter-spacing:-.022em;text-wrap:balance}
/* The headline carries the whole proposition now and is longer than the one
   it replaced, so it scales a little smaller — four lines of 74px was more
   shout than sentence. */
h1{font-size:clamp(2.15rem,7vw,4rem)}
h2{font-size:clamp(1.85rem,5.4vw,3.1rem);line-height:1.05}
h3{font-size:clamp(1.2rem,3vw,1.55rem);line-height:1.15;letter-spacing:-.014em}
h4{font-size:1.0625rem;font-weight:800;letter-spacing:-.01em}
p{text-wrap:pretty}
/* The floor was 1.09rem, which on a phone left only 1.4px between a lede and
   the body copy under it — not enough to read as a different level, which is
   why the two ran together on mobile. Raised rather than shrinking the body
   copy below 16px, so the separation improves legibility instead of trading
   it away. */
.lede{font-size:clamp(1.16rem,2.4vw,1.3rem);line-height:1.55;color:var(--ink-2)}
.sub{color:var(--muted)}
strong{font-weight:700}

/* The coordinate tick — mono, letterspaced, red. Used as an eyebrow everywhere.
   Reads as a map label, and gives every section a machine-readable-looking
   caption without any actual clutter. */
.tick{
  font-family:var(--mono);
  font-size:.6875rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--brand-ink);
  display:flex;align-items:center;gap:.6rem;
}
.tick::before{
  content:'';flex:none;width:1.4rem;height:1px;background:var(--brand);opacity:.55;
}
.tick-plain::before{display:none}

/* ---- Buttons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  min-height:var(--tap);padding:.8rem 1.4rem;
  font-weight:700;font-size:1rem;letter-spacing:-.01em;
  text-decoration:none;border:1.5px solid transparent;border-radius:var(--r);
  cursor:pointer;transition:transform .12s ease,background .18s ease,color .18s ease,border-color .18s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--cta);color:var(--cta-ink);border-color:var(--cta)}
.btn-primary:hover{background:var(--cta-hover);border-color:var(--cta-hover);transform:translateY(-1px);box-shadow:0 12px 26px -14px rgba(252,180,50,.9)}
/* A filled button is white-on-red in every context. Nav, drawer and footer
   link rules are more specific than .btn-primary on their own, so without
   this a button dropped into one of them inherits that context's link color
   and renders dark text on red. */
a.btn-primary,a.btn-primary:hover,a.btn-primary:focus,a.btn-primary:visited,
button.btn-primary,.btn-primary{color:var(--cta-ink)}
.btn-ghost{background:transparent;color:var(--brand-ink);border-color:var(--brand)}
.btn-ghost:hover{border-color:var(--brand-ink);background:var(--brand-tint)}
.btn-row{display:flex;flex-wrap:wrap;gap:.75rem}

/* Text link with the pin-red underline that thickens on hover. */
.link{
  color:var(--ink);text-decoration:none;font-weight:600;
  box-shadow:inset 0 -2px 0 var(--brand);
  transition:box-shadow .15s ease,color .15s ease;
}
.link:hover{box-shadow:inset 0 -1.2em 0 var(--brand-tint);color:var(--brand-ink)}

/* ---- Header -------------------------------------------------------------- */
.hdr{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(10px);
  border-bottom:1px solid var(--rule);
}
.hdr-in{display:flex;align-items:center;gap:1rem;min-height:64px}
.brand{display:flex;align-items:center;flex:none;text-decoration:none;padding-block:.5rem}
/* 160px, matching the width attribute — the intrinsic size and the rendered
   size agreeing is what stops the browser reserving the wrong box on load. */
.brand svg,.brand img{width:160px;height:auto}
@media (max-width:26rem){.brand svg,.brand img{width:136px}}
/* The artwork is near-black ink on transparent, so on a dark background it
   needs lightening rather than hue rotation — the previous filter was tuned
   for the navy version and turned the red chevron green. */

.nav{display:none;margin-left:auto;align-items:center;gap:.35rem}
.nav a:not(.btn){
  text-decoration:none;font-weight:600;font-size:.95rem;
  padding:.6rem .8rem;border-radius:var(--r);color:var(--ink-2);
  min-height:var(--tap);display:inline-flex;align-items:center;
}
.nav a:not(.btn):hover{color:var(--ink);background:var(--sunk)}
.nav a:not(.btn)[aria-current=page]{color:var(--ink);box-shadow:inset 0 -2px 0 var(--brand)}
/* The Contact button sits after the search, outside the nav, so the search can
   come between the links and the button; below 62rem the burger stands in for it. */
.hdr-cta{display:none;margin-left:.5rem;padding-inline:1.1rem;flex:none}

.burger{
  margin-left:auto;width:var(--tap);height:var(--tap);
  display:grid;place-content:center;gap:5px;
  background:none;border:1px solid var(--rule-2);border-radius:var(--r);cursor:pointer;
}
.burger span{display:block;width:19px;height:2px;background:var(--ink);transition:transform .2s ease,opacity .2s 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{
  display:none;border-top:1px solid var(--rule);background:var(--paper);
  padding:.75rem var(--pad) 1.5rem;
}
.drawer.open{display:block}
.drawer a:not(.btn){
  display:flex;align-items:center;min-height:52px;
  text-decoration:none;font-weight:700;font-size:1.05rem;
  border-bottom:1px solid var(--rule);
}
.drawer a:not(.btn):last-of-type{border-bottom:0}
.drawer .btn{width:100%;margin-top:1rem}
.drawer-tel{
  display:flex;align-items:center;gap:.5rem;margin-top:.75rem;
  font-family:var(--mono);font-size:.9rem;font-weight:600;
  text-decoration:none;min-height:var(--tap);color:var(--brand-ink);
}

@media (min-width:62rem){
  .burger,.drawer{display:none!important}
  .nav{display:flex;margin-left:auto}
  .hdr-cta{display:inline-flex}
}
/* Eight links, the search and the button on one row from the point the nav
   appears: a little less padding until the row has room to spare. */
@media (min-width:62rem) and (max-width:72rem){
  .nav{gap:.1rem}
  .nav a:not(.btn){padding:.6rem .55rem;font-size:.9rem}
  .hdr-cta{margin-left:.35rem;padding-inline:.9rem}
}

/* The strip above the bar (2026-09-20): the phone and the email, deep teal like
   the footer, right-aligned where the phone used to sit. Outside the sticky
   header, so it scrolls away. Desktop only — the phone bar and the drawer
   carry both on a phone. */
.hdr-top{display:none;background:var(--brand-deep);color:#F2EEE9}
.hdr-top-in{display:flex;justify-content:flex-end;align-items:center;gap:1.75rem;min-height:36px}
.hdr-top a{
  display:inline-flex;align-items:center;gap:.45rem;
  font-family:var(--mono);font-size:.78rem;font-weight:600;letter-spacing:.02em;
  color:#F2EEE9;text-decoration:none;white-space:nowrap;min-height:36px;
}
.hdr-top a svg{width:13px;height:13px;flex:none;color:var(--brand-ink)}
.hdr-top a:hover{color:var(--cta)}
@media (min-width:62rem){.hdr-top{display:block}}

/* ---- Hero ---------------------------------------------------------------- */
.hero{position:relative;padding-block:clamp(3rem,10vw,6rem) clamp(3rem,8vw,5rem);overflow:hidden}
.hero-in{position:relative;z-index:2}
.hero h1{margin-block:1.1rem .9rem}
.hero .lede{max-width:38ch}
.hero .btn-row{margin-top:1.9rem}
.hero-note{
  margin-top:1.1rem;font-size:.9rem;color:var(--muted);max-width:44ch;
}
/* Contour lines — decorative topography behind the hero, hidden from AT.
   Absolutely positioned, so it is explicitly re-checked at 375px: it is
   clipped by .hero{overflow:hidden} and faded out under the text. */
.contour{
  position:absolute;z-index:1;pointer-events:none;
  top:50%;left:50%;width:min(1100px,175%);translate:-50% -50%;
  color:var(--contour);opacity:.9;
}
@media (min-width:62rem){
  .contour{left:auto;right:-6%;width:720px;translate:0 -50%}
}

/* The map-pin marker. */
.pin{flex:none;display:inline-block;vertical-align:-.12em;width:1em;height:1em;color:var(--brand-ink)}

/* ---- Cards / grid -------------------------------------------------------- */
.grid{display:grid;gap:1rem}
@media (min-width:40rem){
  .grid-2{grid-template-columns:repeat(2,1fr)}
  .grid-3{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:56rem){.grid-3{grid-template-columns:repeat(3,1fr)}}

.card{
  position:relative;background:var(--paper-2);
  border:1px solid var(--rule);border-radius:var(--r);
  padding:clamp(1.25rem,3.4vw,1.75rem);
  transition:border-color .18s ease,transform .18s ease;
}
.card h3{margin-bottom:.5rem}
.card p{color:var(--muted);font-size:.98rem}
a.card{text-decoration:none;display:block}
a.card:hover{border-color:var(--rule-2);transform:translateY(-2px)}
a.card:hover h3{color:var(--brand-ink)}

/* Registration marks — the little corner crosshairs on a printed map sheet.
   Pure CSS, no extra elements. */
.reg::before,.reg::after{
  content:'';position:absolute;width:9px;height:9px;pointer-events:none;
  border-color:var(--rule-2);border-style:solid;
}
.reg::before{top:-1px;left:-1px;border-width:1px 0 0 1px}
.reg::after{bottom:-1px;right:-1px;border-width:0 1px 1px 0}
a.card:hover.reg::before,a.card:hover.reg::after{border-color:var(--brand)}

.card-tick{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin-bottom:.9rem;
}
.card-go{
  display:inline-flex;align-items:center;gap:.4rem;margin-top:1rem;
  font-weight:700;font-size:.9rem;color:var(--brand-ink);
}

/* ---- The stack (services as strata) -------------------------------------- */
.stack{border-top:1px solid var(--rule)}
.stratum{
  display:grid;gap:.35rem 1.5rem;
  padding-block:clamp(1.35rem,3.6vw,1.9rem);
  border-bottom:1px solid var(--rule);
  text-decoration:none;position:relative;
  transition:background .18s ease,padding-inline .18s ease;
}
.stratum:hover{background:var(--paper-2)}
.stratum-n{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;color:var(--brand-ink);
  align-self:start;padding-top:.35rem;
}
.stratum h3{transition:color .18s ease}
.stratum:hover h3{color:var(--brand-ink)}
.stratum p{color:var(--muted);font-size:.98rem;max-width:60ch}
@media (min-width:52rem){
  .stratum{grid-template-columns:5.5rem minmax(0,15rem) minmax(0,1fr);align-items:baseline}
  .stratum:hover{padding-inline:.9rem}
}

/* ---- Prose --------------------------------------------------------------- */
.prose>*+*{margin-top:1.15rem}
.prose h2{margin-top:2.6rem}
.prose h3{margin-top:2rem}
.prose ul,.prose ol{padding-left:0;list-style:none}
.prose li{position:relative;padding-left:1.6rem;margin-top:.6rem;color:var(--ink-2)}
.prose li::before{
  content:'';position:absolute;left:.15rem;top:.62em;
  width:7px;height:7px;background:var(--brand);border-radius:50%;
}
.prose ol{counter-reset:n}
.prose ol li{counter-increment:n}
.prose ol li::before{
  content:counter(n,decimal-leading-zero);
  font-family:var(--mono);font-size:.7rem;font-weight:600;color:var(--brand-ink);
  background:none;width:auto;height:auto;border-radius:0;top:.28em;left:0;
}
.prose a:not(.btn){color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--brand)}
.prose a:not(.btn):hover{color:var(--brand-ink)}

/* ---- Deliverables checklist ---------------------------------------------- */
.checks{list-style:none;padding:0;display:grid;gap:.85rem}
.checks li{display:grid;grid-template-columns:1.35rem 1fr;gap:.75rem;align-items:start;color:var(--ink-2)}
.checks svg{width:1.1rem;height:1.1rem;color:var(--brand-ink);margin-top:.28em;flex:none}

/* ---- FAQ ----------------------------------------------------------------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:1rem;
  padding-block:1.15rem;min-height:var(--tap);
  font-weight:800;font-size:1.05rem;line-height:1.3;
  cursor:pointer;list-style:none;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:'';flex:none;width:12px;height:12px;margin-top:.42em;
  border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq details[open] summary{color:var(--brand-ink)}
.faq-a{padding-bottom:1.3rem;color:var(--muted);max-width:68ch}

/* ---- City plates --------------------------------------------------------- */
.plate{
  position:relative;display:block;text-decoration:none;
  border:1px solid var(--rule);border-radius:var(--r);
  background:var(--paper-2);padding:1.4rem 1.4rem 1.5rem;
  transition:border-color .18s ease,transform .18s ease;
}
.plate:hover{border-color:var(--brand);transform:translateY(-2px)}
.plate-coord{
  font-family:var(--mono);font-size:.625rem;letter-spacing:.12em;
  color:var(--muted);text-transform:uppercase;
}
.plate h3{margin:.55rem 0 .1rem;display:flex;align-items:center;gap:.5rem}
.plate .county{font-family:var(--mono);font-size:.68rem;color:var(--brand-ink);letter-spacing:.1em;text-transform:uppercase}
.plate p{margin-top:.7rem;color:var(--muted);font-size:.95rem}

/* ---- Callout / CTA band -------------------------------------------------- */
.band{
  background:#161514;color:#F2EEE9;position:relative;overflow:hidden;
  border-block:3px solid var(--cta);
  /* Literals for the ground and the text (the page tokens are dark now, and a
     rule must never redefine a token its own declarations read). The tokens
     below are for descendants only. */
  --muted:#A69E97;
  --ink-2:#D6CFC8;
  --rule:#332F2D;
  --rule-2:#4A4340;
  --paper-2:#1F1D1C;
  /* --brand-ink is derived for AA on paper, which leaves it at 2.79:1 on this
     ink. Redefining it for descendants means every `.band .x{color:var(
     --brand-ink)}` rule below becomes readable without restating any of them.
     Safe to override here for the same reason --ink is not: this rule's own
     background does not read it. */
  --brand-ink:var(--brand-lift);
}
.band .tick{color:var(--brand-ink)}
/* The band lifts --brand-ink so text on the dark surface reads. That is right
   for words and wrong for a button that uses it as a field under white text —
   the lifted red carries white at only 3.78:1. The primary button here uses
   the true brand red, which carries white at 6.30:1. */
.band .btn-primary{background:var(--cta);border-color:var(--cta);color:var(--cta-ink)}
.band .btn-primary:hover{background:var(--cta-hover);border-color:#F2EEE9}
.band .btn-ghost{color:#F2EEE9;border-color:rgba(255,255,255,.42)}
.band .btn-ghost:hover{border-color:#F2EEE9;background:rgba(255,255,255,.08)}
.band h1,.band h2,.band h3,.band h4{color:#F2EEE9}
/* Only the band's own copy gets the narrow measure — card paragraphs and the
   trailing trade list must not inherit a 52ch cap or the centered color. */
.band>.wrap>p{color:var(--muted);max-width:52ch}
.band .lede{color:var(--ink-2);max-width:60ch}
.band .card{background:var(--paper-2);border-color:var(--rule)}
.band a.card:hover{border-color:var(--brand-ink);transform:translateY(-2px)}
.band a.card:hover h3{color:var(--brand-ink)}
.band .card p{color:var(--muted)}
.band .card-tick{color:#8A817A}
.band .checks li{color:var(--ink-2)}
.band .ftr-area{color:#8A817A;max-width:none}
.band .stratum{border-color:var(--rule)}
.band .stratum:hover{background:var(--paper-2)}
.band .stack{border-color:var(--rule)}
.band .btn-ghost{color:#F2EEE9;border-color:rgba(255,255,255,.42)}
.band .btn-ghost:hover{border-color:#F2EEE9;background:rgba(255,255,255,.08)}

/* ---- Forms --------------------------------------------------------------- */
.form{display:grid;gap:1rem}
@media (min-width:40rem){.form .half{grid-column:span 1}.form{grid-template-columns:1fr 1fr}.form .full{grid-column:1/-1}}
.field{display:grid;gap:.4rem}
.field label{font-weight:700;font-size:.9rem}
.field .opt{font-weight:400;color:var(--muted)}
.field input,.field select,.field textarea{
  width:100%;min-height:var(--tap);padding:.7rem .85rem;
  background:var(--paper-2);color:var(--ink);
  border:1.5px solid var(--rule-2);border-radius:var(--r);
  font-size:1rem;   /* ≥16px stops iOS zooming the viewport on focus */
}
.field textarea{min-height:7rem;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--brand);outline-offset:1px}
.form-note{font-size:.85rem;color:var(--muted)}
.form-status{padding:.9rem 1rem;border-radius:var(--r);font-weight:600;font-size:.95rem;display:none}
.form-status.err{display:block;background:#FDECEC;color:#C4231F;border:1px solid var(--alert)}
.form-status.ok{display:block;background:var(--sunk);color:var(--ink);border:1px solid var(--rule-2)}

/* ---- Footer -------------------------------------------------------------- */
.ftr{background:var(--sunk);border-top:1px solid var(--rule);padding-block:clamp(2.5rem,6vw,4rem) 1.5rem}
.ftr-top{display:grid;gap:2.25rem}
@media (min-width:52rem){.ftr-top{grid-template-columns:repeat(2,1fr)}}
@media (min-width:68rem){.ftr-top{grid-template-columns:1.5fr 1fr 1fr 1fr 1.1fr}}
.ftr img{width:150px}
.ftr .ftr-h{font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--brand-ink);margin-bottom:1rem}
.ftr ul{list-style:none;padding:0;display:grid;gap:.1rem}
.ftr ul a{display:inline-flex;align-items:center;min-height:var(--tap);text-decoration:none;color:var(--ink-2);font-size:.95rem}
.ftr ul a:hover{color:var(--brand-ink)}
.ftr-blurb{color:var(--muted);font-size:.95rem;margin-top:1rem;max-width:38ch}
.ftr-nap{margin-top:1.25rem;display:grid;gap:.3rem;font-size:.95rem}
.ftr-nap a{display:inline-flex;align-items:center;min-height:var(--tap);text-decoration:none;font-weight:600}
.ftr-nap a:hover{color:var(--brand-ink)}
.ftr-area{color:var(--muted);font-size:.9rem;line-height:1.75}
.ftr-btm{
  margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;align-items:center;justify-content:space-between;
  font-size:.85rem;color:var(--muted);
}
.ftr-btm a{color:var(--muted)}
.ftr-btm a:hover{color:var(--brand-ink)}

/* ---- Sticky mobile call bar ---------------------------------------------- */
/* One action, not two. There is no number to call, and a sticky bar offering a
   single obvious next step converts better than one offering a choice. */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:block;background:var(--paper-2);
  border-top:1px solid var(--rule-2);
  padding:.5rem var(--pad) calc(.5rem + env(safe-area-inset-bottom));
}
.callbar .c-note{
  display:flex;align-items:center;justify-content:center;gap:.4rem;
  font-family:var(--mono);font-size:.75rem;font-weight:600;
  color:var(--brand-ink);padding:.1rem 0 .4rem;
}
.callbar .c-note svg{width:13px;height:13px;flex:none}
.callbar a{
  display:flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:var(--tap);text-decoration:none;font-weight:700;font-size:1rem;
  border-radius:var(--r);
}
.callbar .c-cta{background:var(--cta);color:var(--cta-ink);border-radius:999px}
body{padding-bottom:calc(6.25rem + env(safe-area-inset-bottom))}
@media (min-width:62rem){
  .callbar{display:none}
  body{padding-bottom:0}
}

/* ---- Utilities ----------------------------------------------------------- */
.stack-sm>*+*{margin-top:.6rem}
.stack-md>*+*{margin-top:1.15rem}
.stack-lg>*+*{margin-top:2.25rem}
.mt-sm{margin-top:1rem}.mt-md{margin-top:2rem}.mt-lg{margin-top:3rem}
.center{text-align:center}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sec-head{max-width:52rem}
.sec-head h2{margin-block:.9rem .8rem}
.crumbs{font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--muted);text-transform:uppercase;display:flex;flex-wrap:wrap;gap:.4rem;align-items:center}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--brand-ink)}
.crumbs span[aria-current]{color:var(--ink)}

/* ---- Tap-target corrections ----------------------------------------------
   Inline links inside a sentence are exempt from the target-size rule, but
   anything that reads as a standalone control is not. These three did not
   clear the minimum on audit. */

/* Breadcrumbs are navigation, not prose — give them a real hit area. */
.crumbs a{display:inline-flex;align-items:center;min-height:26px;padding-inline:.15rem}

/* The phone and email on the contact cards are the primary actions there. */
.card h3 a[href^="tel:"],
.card h3 a[href^="mailto:"]{
  display:inline-flex;align-items:center;min-height:var(--tap);
}

/* Footer credit. */
.ftr-btm a{display:inline-flex;align-items:center;min-height:26px}

/* Placement/rate table — plain data, so it stays a table rather than being
   forced into cards that would read as marketing. */
table.rate{width:100%;border-collapse:collapse;font-size:.95rem;max-width:34rem}
table.rate th{text-align:left;font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);font-weight:500;padding:0 1rem .5rem 0;
  border-bottom:1px solid var(--rule-2);white-space:nowrap}
table.rate td{padding:.6rem 1rem .6rem 0;border-bottom:1px solid var(--rule);color:var(--ink-2)}
table.rate td:first-child{font-weight:700;color:var(--ink)}

/* Brokers-versus-us on the home page. A table, because it is a like-for-like
   comparison and cards would hide the alignment. Below 40rem the header row
   goes and each cell names its column itself. */
table.vs{width:100%;border-collapse:collapse;font-size:.98rem;max-width:60rem}
table.vs th{text-align:left;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);font-weight:500;padding:0 1.25rem .6rem 0;
  border-bottom:1px solid var(--rule-2);vertical-align:bottom}
table.vs th.us{color:var(--brand-ink)}
table.vs td{padding:.85rem 1.25rem .85rem 0;border-bottom:1px solid var(--rule);color:var(--ink-2);vertical-align:top}
table.vs td:first-child{font-weight:700;color:var(--ink);width:20%}
table.vs td.us{color:var(--ink);font-weight:600}
@media (max-width:40rem){
  table.vs thead{display:none}
  table.vs tr{display:block;padding:.9rem 0;border-bottom:1px solid var(--rule)}
  table.vs td{display:block;border:0;padding:.15rem 0}
  table.vs td:first-child{width:auto;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
    text-transform:uppercase;color:var(--muted);font-weight:500;padding-bottom:.35rem}
  table.vs td[data-l]::before{content:attr(data-l) ': ';font-weight:700;color:var(--ink)}
  table.vs td.us[data-l]::before{color:var(--brand-ink)}
}

/* The "separate subscription" callout. Everything else on the lead-generation
   page is included in the monthly fee; this one is not, and a reader skimming
   must not carry the wrong assumption into a sales call. */
.sep-note{
  border-left:3px solid var(--brand);
  background:var(--brand-tint);
  padding:.85rem 1rem;
  font-size:.95rem;
  color:var(--ink-2);
  max-width:60ch;
}
.band .sep-note{background:#2A1918;color:#CFC8C1}

/* "What you will not be sent".
   The previous treatment stacked three negation signals — a NOT THIS label,
   a strikethrough heading and 72% opacity on the whole card — which between
   them made the copy genuinely hard to read on the dark band. One clear
   signal does the job: a red cross, full-contrast text. */
ul.nope{list-style:none;padding:0;display:grid;gap:1.15rem 2.25rem}
@media (min-width:44rem){ul.nope{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:72rem){ul.nope{grid-template-columns:repeat(3,minmax(0,1fr))}}
ul.nope li{
  display:grid;grid-template-columns:1.6rem 1fr;gap:.5rem .8rem;align-items:start;
  padding-left:0;margin:0;
}
ul.nope li::before{content:none}          /* cancel the .prose bullet */
.nope-x{width:1.35rem;height:1.35rem;color:var(--brand-ink);margin-top:.1rem;flex:none}
ul.nope h4{font-size:1rem;font-weight:800;line-height:1.25;letter-spacing:-.01em;margin:0 0 .3rem}
ul.nope p{font-size:.93rem;line-height:1.55;color:var(--muted);margin:0}
/* On the dark band the muted token is already lightened, but the description
   needs a touch more lift to stay comfortably readable at this size. */
.band ul.nope p{color:#B4ABA4}
.band ul.nope h4{color:#F2EEE9}  /* a literal: --paper is the dark ground since 2026-09-20, and read here it made the six headings dark on dark */

/* The magazine is a separately-subscribed channel, not part of the package the
   rest of the lead-generation page describes. It sits after that material and
   is fenced off from it, so the separation is structural and visible rather
   than something the reader has to take from the copy alone. */
.aside-channel{
  border-top:2px solid var(--rule-2);
  padding-block-start:clamp(3.5rem,8vw,5.5rem);
}
.aside-channel::before{
  content:'';display:block;width:2.5rem;height:2px;background:var(--brand);
  margin-bottom:clamp(1.5rem,4vw,2.25rem);
}

/* ---- Network category grid ------------------------------------------------
   Every lead-generation site we run, linked. Dense on purpose: the value here
   is that you can see the whole network at once and click into any of it. */
.netgrid{
  display:grid;gap:1px;background:var(--rule-2);
  border:1px solid var(--rule-2);border-radius:var(--r);overflow:hidden;
  grid-template-columns:1fr;
}
@media (min-width:34rem){.netgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:52rem){.netgrid{grid-template-columns:repeat(3,1fr)}}
@media (min-width:72rem){.netgrid{grid-template-columns:repeat(4,1fr)}}
.netcard{
  display:flex;flex-direction:column;gap:.15rem;
  background:var(--paper-2);padding:.85rem 1rem;text-decoration:none;
  min-height:var(--tap);justify-content:center;
  transition:background .12s ease;
}
.netcard:hover{background:var(--brand-tint)}
.netcard-name{font-weight:800;font-size:.94rem;color:var(--ink);line-height:1.25}
.netcard-dom{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.01em;
  color:var(--brand-ink);word-break:break-all;
}

/* The one-line version of the whole offer, sat directly under the hero lede.
   It exists because "all in one, done for you" is the thing people are
   actually shopping for, and it was buried three sections down. */
.hero-claim{
  margin-top:.9rem;font-weight:800;font-size:clamp(1rem,2.2vw,1.16rem);
  color:var(--brand-ink);max-width:46ch;line-height:1.4;
}

/* ---- Hero with the form alongside ----------------------------------------
   The form sits next to the headline rather than under it, so the offer and
   the way to take it are on screen together. Below the split it stacks with
   the copy first — the headline has to earn the form, not compete with it. */
.hero-split{display:grid;gap:clamp(2rem,4vw,3.25rem);align-items:start}
@media (min-width:64rem){
  .hero-split{grid-template-columns:minmax(0,1.05fr) minmax(23rem,.95fr)}
  .hero-copy h1{font-size:clamp(2rem,4.4vw,3.35rem)}
}

.hero-form{
  background:var(--paper-2);
  border:1px solid var(--rule-2);
  border-radius:var(--r);
  padding:clamp(1.25rem,3vw,1.75rem);
  box-shadow:0 1px 2px rgba(26,25,25,.05),0 12px 32px -12px rgba(26,25,25,.18);
}
.hero-form-h{
  font-family:var(--font);font-weight:800;font-size:1.16rem;
  line-height:1.25;color:var(--ink);margin:0;
}
.hero-form-sub{margin:.4rem 0 1.1rem;font-size:.88rem;line-height:1.5;color:var(--muted)}

/* Two columns from the point the card is wide enough to hold them, which is
   not the same breakpoint as the page — the card is narrower than the page. */
.hf-grid{display:grid;gap:.75rem}
@media (min-width:26rem){.hf-grid{grid-template-columns:1fr 1fr}}
.hero-form .field{display:flex;flex-direction:column;gap:.3rem;min-width:0}
.hero-form label{font-size:.76rem;font-weight:600;color:var(--ink-2);letter-spacing:.01em}
.hero-form input,.hero-form select{
  width:100%;min-width:0;min-height:var(--tap);
  padding:.55rem .65rem;font:inherit;font-size:.92rem;
  color:var(--ink);background:var(--paper-2);
  border:1px solid var(--rule-2);border-radius:var(--r);
}
.hero-form input:focus,.hero-form select:focus{border-color:var(--brand);outline-offset:1px}
.hero-form .btn{width:100%;margin-top:1rem}
.hero-form .form-status{margin:.75rem 0 0}
.hero-form .form-status:empty{display:none}
.hero-form-note{margin:.7rem 0 0;font-size:.74rem;line-height:1.45;color:var(--muted)}

/* The answer panel sits beside the copy; below the split it follows the
   buttons. (The buttons used to be hidden here from the days the market-check
   form sat in the hero — with the form in its own section that left a phone
   with no button at all above the fold.) */
@media (max-width:63.99rem){
  .hero-aside{margin-top:.25rem}
  .hero-copy .hero-note{margin-bottom:0}
}

/* ---- The network hub ------------------------------------------------------
   A section per category rather than a wall of links. Forty bare links is a
   link farm and reads like one; naming what each site covers makes the page
   worth landing on, which is what makes the links pointing at it worth having. */
.netlist{display:grid;gap:1px;background:var(--rule-2);border:1px solid var(--rule-2);border-radius:var(--r);overflow:hidden}
@media (min-width:44rem){.netlist{grid-template-columns:1fr 1fr}}
@media (min-width:76rem){.netlist{grid-template-columns:repeat(3,1fr)}}
.netitem{background:var(--paper-2);padding:1.15rem 1.25rem;display:flex;flex-direction:column;gap:.35rem}
.netitem h3{font-size:1.02rem;line-height:1.25;margin:0}
.netitem h3 a{color:var(--ink);text-decoration:none}
.netitem h3 a:hover{color:var(--brand-ink)}
.netitem-dom{margin:0}
.netitem-dom a{font-family:var(--mono);font-size:.72rem;color:var(--brand-ink);text-decoration:none;word-break:break-all}
.netitem-lede{margin:.15rem 0 0;font-size:.86rem;line-height:1.5;color:var(--ink-2)}
.netitem-svc{margin:.35rem 0 0;font-size:.75rem;line-height:1.5;color:var(--muted)}
.netitem-svc span{font-weight:700;color:var(--ink-2)}

/* ---- Network grid (homepage) --------------------------------------------- */
/* Forty links have to stay scannable, so each is a two-line plate — trade name
   above, domain below — rather than a card with a paragraph in it. The full
   descriptions live on /leads/, which this section points at. */
.netgrid{
  display:grid;gap:1px;background:var(--rule);
  border:1px solid var(--rule);
  grid-template-columns:repeat(auto-fill,minmax(15rem,1fr));
}
.netcard{
  background:var(--paper);padding:.85rem 1rem;text-decoration:none;
  display:flex;flex-direction:column;gap:.15rem;min-width:0;
  transition:background .15s ease;
}
.netcard:hover{background:var(--paper-2)}
.netcard-name{
  font-weight:700;color:var(--ink);font-size:.95rem;line-height:1.25;
}
.netcard:hover .netcard-name{color:var(--brand-ink)}
.netcard-dom{
  font-family:var(--mono);font-size:.7rem;letter-spacing:.01em;
  color:var(--brand-ink);word-break:break-all;
}

/* ---- Network site feature (trade category pages) -------------------------- */
.netfeature{display:grid;gap:1.25rem;align-items:start}
.netfeature-main{
  background:var(--paper);border:1px solid var(--rule);
  padding:clamp(1.1rem,3vw,1.6rem);
}
.netfeature-main h3{margin:0 0 .2rem;font-size:clamp(1.2rem,2.6vw,1.45rem);line-height:1.2}
.netfeature-main h3 a{color:var(--ink);text-decoration:none}
.netfeature-main h3 a:hover{color:var(--brand-ink)}
.netfeature-dom{margin:0 0 .7rem}
.netfeature-dom a{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.02em;
  color:var(--brand-ink);text-decoration:none;word-break:break-all;
}
.netfeature-lede{margin:0 0 .6rem;color:var(--ink);font-size:1rem;line-height:1.55}
.netfeature-svc{margin:0;font-size:.85rem;line-height:1.5;color:var(--muted)}
.netfeature-svc span{
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand-ink);
}
.netfeature-side{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.netfeature-sidehead{
  margin:0;background:var(--paper);padding:.7rem .9rem;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand-ink);
}
.netfeature-rel{
  background:var(--paper);padding:.75rem .9rem;text-decoration:none;
  display:flex;flex-direction:column;gap:.12rem;transition:background .15s ease;
}
.netfeature-rel:hover{background:var(--paper-2)}
.netfeature-relname{font-weight:700;color:var(--ink);font-size:.92rem;line-height:1.25}
.netfeature-rel:hover .netfeature-relname{color:var(--brand-ink)}
.netfeature-reldom{font-family:var(--mono);font-size:.66rem;color:var(--brand-ink);word-break:break-all}
.netfeature-reltag{font-size:.82rem;color:var(--muted);line-height:1.4;margin-top:.15rem}

@media (min-width:900px){
  .netfeature{grid-template-columns:minmax(0,1.55fr) minmax(240px,.95fr);gap:1.5rem}
}

/* ---- Free scanner --------------------------------------------------------- */
.scanner{background:var(--paper-2);border-block:1px solid var(--rule)}
/* A tool form is rows: the tool's own inputs, then the button with the fine
   print beside it. Nothing else — the contact details are asked for after the
   result, and only if the visitor wants a person to read it (2026-09-23). */
.scan-form{display:grid;gap:.6rem;margin-top:1.5rem;max-width:38rem;position:relative}
.scan-row{display:flex;flex-wrap:wrap;gap:.6rem}
.scan-form input{
  flex:1 1 16rem;min-width:0;min-height:var(--tap);padding:.7rem .9rem;
  background:var(--paper);color:var(--ink);border:1.5px solid var(--rule-2);
  border-radius:var(--r);font-size:1rem;font-family:var(--mono);
}
.scan-form input:focus{border-color:var(--brand);outline-offset:1px}
.scan-form .btn{flex:0 0 auto}
.scan-contact input{flex:1 1 9rem;font-family:var(--font);font-size:.95rem}
.scan-go{align-items:center;margin-top:.15rem}
.scan-go .cf-turnstile{flex:1 0 100%;margin:0 !important}
.scan-fine{flex:1 1 12rem;font-size:.78rem;line-height:1.45;color:var(--muted)}
.scan-note{margin-top:.6rem;font-size:.85rem;color:var(--muted)}

/* Progress. A thirty-second wait with a spinner reads as broken, so the bar
   advances against the stages the scan actually goes through. */
.scan-progress{margin-top:1.5rem;max-width:38rem}
.scan-bar{height:4px;background:var(--rule);border-radius:2px;overflow:hidden}
.scan-bar span{display:block;height:100%;width:0;background:var(--brand);transition:width .6s ease}
.scan-stage{margin-top:.6rem;font-family:var(--mono);font-size:.8rem;color:var(--brand-ink)}

.scan-error{
  margin-top:1.25rem;max-width:38rem;padding:.85rem 1rem;border-radius:var(--r);
  background:#FEF2F2;color:#991B1B;border:1px solid #FCA5A5;font-weight:600;font-size:.94rem;
}

.scan-result{margin-top:2rem}
.scan-head{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.75rem 1.75rem;
  padding-bottom:1.1rem;border-bottom:1px solid var(--rule);
}
.scan-score{display:flex;align-items:baseline;gap:.35rem}
.scan-score-n{font-size:clamp(2.4rem,7vw,3.4rem);font-weight:800;line-height:1;color:var(--ink)}
.scan-score-of{font-size:1rem;color:var(--muted)}
.scan-score-label{
  margin-left:.5rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--brand-ink);
}
.scan-tallies{display:flex;flex-wrap:wrap;gap:.9rem;font-size:.88rem;color:var(--muted)}
.scan-tally b{color:var(--ink);font-weight:800}
.scan-tally.pass b{color:#166534}
.scan-tally.warn b{color:#92400E}
.scan-tally.fail b{color:#991B1B}
.scan-url{
  flex:1 0 100%;margin:0;font-family:var(--mono);font-size:.74rem;
  color:var(--brand-ink);word-break:break-all;
}
/* PageSpeed not measured: the score leaves performance out, said plainly */
.scan-provisional{flex:1 0 100%;margin:0;padding:.6rem .85rem;border-radius:var(--r);background:#FFFBEB;color:#92400E;border:1px solid #FCD34D;font-size:.88rem;font-weight:600}
/* a score per category, as chips */
.scan-cats{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:.4rem}
.scan-cat{display:inline-flex;align-items:baseline;gap:.4rem;padding:.3rem .6rem;border:1px solid var(--line);border-radius:var(--r);font-size:.74rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.scan-cat b{font-size:.95rem;color:var(--ink);font-weight:800;letter-spacing:0;text-transform:none}
.scan-pages{flex:1 0 100%;margin:0;font-size:.82rem;color:var(--muted);word-break:break-word}
.scan-actions{
  flex:1 0 100%;display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin-top:.35rem;
}
.scan-actions .btn{display:inline-flex;align-items:center;gap:.5rem}
.scan-actions .btn[disabled]{opacity:.6;cursor:progress}
.scan-actions-note{font-size:.85rem;color:var(--muted)}
.scan-actions-note.is-error{color:#991B1B;font-weight:600}

/* The two free checks under the hero: the brand red so nobody scrolls past, cards on paper, the results full width. */
.sec-tools{background:var(--brand-deep);color:#fff;border-block:3px solid var(--cta);position:relative}
.sec-tools .sec-head h2,.sec-tools .sec-head .lede{color:#fff}
.sec-tools .sec-head .lede{opacity:.92}
.sec-tools .tick-plain{color:var(--brand-lift)}
.sec-tools .tool-card .tick,.sec-tools .scan-result .tick,.tool-card .tick{color:var(--brand-ink)}
.sec-tools .tool-card .tick::before,.tool-card .tick::before{background:var(--brand)}
.sec-tools .tools-grid{align-items:stretch}
@media (min-width:56rem) and (max-width:74rem){.sec-tools .tools-grid.grid-3{grid-template-columns:repeat(2,1fr)}.sec-tools .tools-grid.grid-3 > :nth-child(3){grid-column:1/-1}}
.tool-card{background:var(--paper);color:var(--ink);padding:1.6rem;border:0;border-radius:18px;box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
.tool-card .tick{color:var(--brand-ink)}
.tool-card h3{margin:.25rem 0 .4rem;font-size:1.35rem}
.tool-card > p{color:var(--ink-2);font-size:.95rem}
.tool-card .scan-form{margin-top:1rem;max-width:none}
.tool-card .scan-note{color:var(--muted)}
.tool-more{margin-top:.9rem;font-size:.9rem}
.tool-more a{color:var(--brand-ink);font-weight:600;white-space:nowrap}
.sec-tools .scan-result{background:var(--paper);color:var(--ink);padding:1.5rem;margin-top:1.5rem;border:0;border-radius:18px}
.sec-tools .scan-result .scan-note{color:var(--muted)}
.scan-repeat{margin:0 0 1rem;padding:.75rem 1rem;border-radius:var(--r);background:#FFFBEB;color:#92400E;border:1px solid #FCD34D;font-size:.92rem;font-weight:600}
/* The Tools group in the header: a link with a menu on hover and keyboard focus. */
.nav-group{position:relative;display:inline-block}
.nav-group[data-current] > a{color:var(--ink);box-shadow:inset 0 -2px 0 var(--brand)}
.nav-caret{font-size:.7em;opacity:.6;margin-left:.15rem}
.nav-menu{position:absolute;top:100%;left:0;min-width:15rem;padding:.4rem;background:var(--paper-2);border:1px solid var(--rule-2);border-radius:var(--r);box-shadow:0 10px 30px rgba(26,25,25,.12);display:none;z-index:30}
.nav-group:hover .nav-menu,.nav-group:focus-within .nav-menu{display:block}
.nav-menu a{display:block !important;padding:.55rem .7rem !important;border-radius:var(--r);color:var(--ink) !important}
.nav-menu a:hover{background:var(--sunk)}
.nav-menu a b{display:block;font-weight:700;font-size:.92rem}
.nav-menu a span{display:block;font-size:.78rem;color:var(--muted);margin-top:.1rem}
.drawer-h{display:block;padding:.6rem 0 .2rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
/* Labels for screen readers only — the scanner's and the AI check's inputs carry placeholders for sighted visitors. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* The AI answer check: the scanner's form and progress, one verdict, three cards. */
.ai-check-form input[name=state]{flex:0 0 4.5rem;text-transform:uppercase}
.ai-check-form input[name=name],.ai-check-form input[name=service]{flex:1 1 14rem}
.ai-check-form input[name=city]{flex:1 1 9rem}
.ai-check-verdict{padding:1.1rem 1.25rem;border-radius:var(--r);border:1.5px solid var(--rule-2);background:var(--paper)}
.ai-check-verdict h3{margin:0 0 .35rem;font-size:1.25rem}
.ai-check-verdict p{margin:0;color:var(--ink-2)}
.ai-check-verdict.yes{border-color:#86EFAC;background:#F0FDF4}
.ai-check-verdict.no{border-color:#FCA5A5;background:#FEF2F2}
.ai-check-verdict.warn{border-color:#FCD34D;background:#FFFBEB}
.ai-check-result .ai-check-verdict.no{border-color:#FCD34D;background:#FFFBEB}
/* The backlink check: four figures, then the reasons and the top tier. */
.bl-figs{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;margin-top:1rem}
@media (min-width:44rem){.bl-figs{grid-template-columns:repeat(4,1fr)}}
.bl-fig{padding:.9rem 1rem;border:1.5px solid var(--rule-2);border-radius:var(--r);background:var(--paper)}
.bl-fig b{display:block;font-size:1.7rem;font-weight:800;letter-spacing:-.02em;line-height:1.1;color:var(--ink)}
.bl-fig span{display:block;margin-top:.25rem;font-size:.82rem;line-height:1.35;color:var(--muted)}
.bl-list{margin:.5rem 0 0;padding:0;list-style:none;display:grid;gap:.4rem}
.bl-list li{font-size:.92rem;line-height:1.45;color:var(--ink-2);padding-left:1rem;position:relative;word-break:break-word}
.bl-list li::before{content:"";position:absolute;left:0;top:.6em;width:.4rem;height:.4rem;border-radius:50%;background:var(--brand)}
.bl-list b{color:var(--ink)}
.bl-more{margin-top:.6rem !important;font-size:.85rem !important;color:var(--muted)}
.ai-check-cards .card p{margin:.4rem 0 0;font-size:.92rem;line-height:1.5}
.ai-check-q{font-family:var(--mono);font-size:.82rem;color:var(--brand-ink)}
.ai-check-big{font-size:1.9rem;font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-top:.2rem !important}
.ai-check-excerpt{color:var(--muted);font-size:.85rem !important;border-left:2px solid var(--rule);padding-left:.7rem}
.scan-group{margin-top:1.75rem}
.scan-group > h3{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand-ink);margin:0 0 .7rem;
}
.scan-checks{display:grid;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.scan-check{background:var(--paper);padding:.85rem 1rem;display:grid;gap:.25rem}
.scan-check-top{display:flex;align-items:baseline;gap:.6rem}
.scan-badge{
  flex:none;width:1.15rem;height:1.15rem;border-radius:var(--r);
  display:grid;place-content:center;font-size:.72rem;font-weight:800;line-height:1;
}
.scan-badge.pass{background:#DCFCE7;color:#166534}
.scan-badge.warn{background:#FEF3C7;color:#92400E}
.scan-badge.fail{background:#FEE2E2;color:#991B1B}
.scan-badge.info{background:var(--sunk);color:var(--muted)}
.scan-check-label{font-weight:700;font-size:.95rem;color:var(--ink)}
.scan-finding{margin:0;font-size:.9rem;line-height:1.5;color:var(--ink-2);padding-left:1.75rem}
.scan-fix{
  margin:.3rem 0 0;padding-left:1.75rem;font-size:.86rem;line-height:1.5;color:var(--muted);
}
.scan-fix b{color:var(--brand-ink);font-weight:700}


/* ---- Section head: lede vs supporting copy -------------------------------
   Two problems, both visible in the lead-gen band. The paragraphs had no
   margin between them at all — measured 0px — so on a narrow screen the lede
   and the paragraph under it read as one block of text. And `.band>.wrap>p`
   is a direct-child selector, so a paragraph nested inside .sec-head never
   matched it and inherited the band's bright body color instead, leaving the
   supporting line brighter than the lede it supports.

   A paragraph after the lede is supporting copy: smaller, dimmer, and clearly
   separated. */
.sec-head > p + p{margin-top:1rem}
.sec-head > .lede + p{
  font-size:1rem;line-height:1.65;color:var(--muted);max-width:62ch;
}
.band .sec-head > .lede + p,
.hero .sec-head > .lede + p{color:var(--muted)}

@media (max-width:40rem){
  .sec-head > p + p{margin-top:1.15rem}
}


/* ============================================================================
   The signal layer — the AI-era additions
   ========================================================================= */

/* ---- The AI hero ----------------------------------------------------------
   Dark in both color schemes, on purpose: it is the one surface on the site
   that is the same everywhere, so the first screen a visitor sees is the same
   first screen every time. The palette is set explicitly rather than by
   inverting the page tokens — .band inverts with the scheme, this must not.
   Nothing here redefines a token this rule's own declarations read: the
   background is a literal, and every token below is for descendants. */
.hero-ai{
  background:#161514;color:#F2EEE9;
  --ink-2:#D6CFC8;--muted:#A69E97;--rule:#332F2D;--rule-2:#4A4340;--paper-2:#1F1D1C;
  --brand:#3DB8C6;--brand-ink:#5CCAD6;--brand-tint:#0F2E32;
  --grid:rgba(242,238,233,.07);--contour:rgba(242,238,233,.13);
}
.hero-ai::after{
  content:'';position:absolute;z-index:0;pointer-events:none;
  width:min(70vw,880px);height:min(70vw,880px);right:-18vw;top:-32%;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,rgba(252,180,50,.22),transparent 42%),radial-gradient(circle at 65% 65%,rgba(10,90,100,.85),transparent 60%);
  filter:blur(18px);
}
.hero-ai .contour{opacity:1}
.hero-ai h1{color:#F2EEE9}
.hero-ai .hero-claim{color:var(--cta)}
.hero-ai .btn-primary{background:var(--cta);border-color:var(--cta);color:var(--cta-ink);
  box-shadow:0 0 0 0 rgba(252,180,50,.5)}
.hero-ai .btn-primary:hover{border-color:#F2EEE9;box-shadow:0 0 28px -4px rgba(252,180,50,.75)}
.hero-ai .btn-ghost{color:#F2EEE9;border-color:rgba(255,255,255,.4)}
.hero-ai .btn-ghost:hover{border-color:#F2EEE9;background:rgba(255,255,255,.07)}
.hero-ai .crumbs{color:var(--muted)}
.hero-ai .crumbs span[aria-current]{color:#F2EEE9}
.hero-ai .hero-note{color:var(--muted)}
/* The mobile rule that hides the hero buttons exists for the form hero, where
   the form is the action. In the AI hero the buttons are the action. */
@media (max-width:63.99rem){
  .hero-ai .hero-copy .btn-row{display:flex}
  .hero-ai .hero-copy .hero-note{display:block;margin-bottom:0}
}
@media (min-width:64rem){
  .hero-ai .hero-copy .hero-note{display:block}
  .hero-ai.hero .hero-split{grid-template-columns:minmax(0,1.1fr) minmax(24rem,.9fr);align-items:center}
}

/* The headline's two registers: a small line that says what the business is,
   then the big line that says what it does. Both inside the h1 so the heading
   carries the category and the proposition together. */
.h1-kicker{
  display:block;font-size:clamp(1rem,2.2vw,1.25rem);font-weight:600;letter-spacing:.01em;
  line-height:1.3;color:var(--ink-2);margin-bottom:.6rem;text-wrap:pretty;
}
.hero-ai .hero-copy h1{font-size:clamp(2.6rem,7.4vw,4.6rem);line-height:.98}
@media (min-width:64rem){.hero-ai .hero-copy h1{font-size:clamp(3rem,5.2vw,4.6rem)}}

/* ---- The engine strip ------------------------------------------------------
   The engines the work targets, as ticks. Uses the tokens, so it reads on the
   dark hero and on paper alike. */
.engines{
  display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.25rem;
  margin-top:clamp(2rem,5vw,3rem);padding-top:1.25rem;border-top:1px solid var(--rule);
}
.engines-l{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--brand-ink);white-space:nowrap;display:flex;align-items:center;gap:.55rem;
}
.engines-l::before{content:'';width:.5rem;height:.5rem;border-radius:50%;background:var(--cta);
  box-shadow:0 0 0 0 rgba(252,180,50,.6);animation:pulse 2.4s ease-out infinite}
.engines-list{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:.35rem 0}
.engines-list li{
  font-family:var(--mono);font-size:.74rem;font-weight:600;letter-spacing:.06em;
  color:var(--ink-2);white-space:nowrap;
}
.engines-list li+li::before{content:'·';color:var(--muted);margin-inline:.7rem}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(252,180,50,.55)}100%{box-shadow:0 0 0 .7rem rgba(252,180,50,0)}}

/* ---- The answer panel ------------------------------------------------------
   A conversation card: the question, then the answer that names the business
   and cites the sources. Everything is real text; site.js only staggers the
   reveal (see .is-live). */
.answer{
  position:relative;margin:0;background:var(--paper-2);
  border:1px solid var(--rule-2);border-radius:var(--r);
  padding:clamp(1.1rem,2.6vw,1.5rem);
  box-shadow:0 1px 2px rgba(0,0,0,.3),0 30px 60px -30px rgba(10,90,100,.6);
}
.answer::before,.answer::after{
  content:'';position:absolute;width:11px;height:11px;pointer-events:none;
  border-color:var(--brand-ink);border-style:solid;
}
.answer::before{top:-1px;left:-1px;border-width:1.5px 0 0 1.5px}
.answer::after{bottom:-1px;right:-1px;border-width:0 1.5px 1.5px 0}
.answer-cap{
  display:flex;align-items:center;gap:.6rem;flex-wrap:wrap;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);padding-bottom:.9rem;border-bottom:1px solid var(--rule);
}
.answer-dot{width:.5rem;height:.5rem;border-radius:50%;background:var(--brand);flex:none;
  animation:pulse 2.4s ease-out infinite}
.answer-ill{margin-left:auto;color:var(--muted);opacity:.8}
.answer-who{
  display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand-ink);margin-bottom:.35rem;
}
.answer-q{margin-top:1rem;padding:.8rem .95rem;background:rgba(255,255,255,.05);
  border:1px solid var(--rule);border-radius:var(--r)}
.answer-q p{margin:0;font-weight:700;font-size:1.02rem;line-height:1.4;color:#F2EEE9}
.answer-a{margin-top:1rem}
.answer-a p{margin:0;font-size:.95rem;line-height:1.55;color:var(--ink-2)}
.answer-a p+p{margin-top:.6rem}
.answer-a strong{color:#F2EEE9}
.answer-src{font-size:.8rem!important;color:var(--muted)!important;display:flex;flex-wrap:wrap;gap:.35rem;align-items:center}
.answer-src span{
  font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;padding:.2rem .5rem;
  border:1px solid var(--rule-2);border-radius:var(--r);color:var(--brand-ink);white-space:nowrap;
}
.answer-eng{
  list-style:none;padding:.9rem 0 0;margin:1rem 0 0;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:.4rem;
}
.answer-eng li{
  font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);padding:.25rem .5rem;background:rgba(255,255,255,.04);border-radius:var(--r);
}
/* The staggered reveal. Only while .is-live, which site.js adds only when the
   visitor has not asked for reduced motion — otherwise the card is simply
   there, complete, like it is for a crawler. */
.answer.is-live .answer-q,.answer.is-live [data-line],.answer.is-live .answer-eng li{
  opacity:0;transform:translateY(5px);transition:opacity .45s ease,transform .45s ease;
}
.answer.is-live .answer-q.on,.answer.is-live [data-line].on,.answer.is-live .answer-eng li.on{opacity:1;transform:none}
.answer.is-live.thinking .answer-a .answer-who::after{
  content:'';display:inline-block;width:1.4em;text-align:left;
  animation:dots 1.1s steps(4,end) infinite;
}
@keyframes dots{0%{content:''}25%{content:'.'}50%{content:'..'}75%{content:'...'}}
.answer .cursor{display:inline-block;width:.55em;height:1em;vertical-align:-.15em;margin-left:.15em;
  background:var(--brand-ink);animation:blink 1s steps(2,start) infinite}
@keyframes blink{to{visibility:hidden}}

/* ---- The stack, with the AI layers marked ---------------------------------- */
.stratum-n em{
  font-style:normal;font-weight:700;font-size:.58rem;letter-spacing:.14em;
  padding:.12rem .38rem;margin-left:.35rem;border:1px solid var(--brand);border-radius:var(--r);
  color:var(--brand-ink);vertical-align:.1em;
}
.stratum-ai{box-shadow:inset 3px 0 0 var(--brand)}
.stratum-ai:hover{background:var(--brand-tint)}
.stratum-sub{
  display:block;font-family:var(--mono);font-size:.66rem;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--brand-ink);margin-top:.35rem;
}
.stratum-product h3{color:var(--brand-ink)}
.method .stratum:hover{background:transparent}

/* ---- The glossary table ---------------------------------------------------- */
table.gloss td:first-child{width:22%}
table.gloss abbr{
  display:block;text-decoration:none;font-family:var(--mono);font-weight:700;
  font-size:1.15rem;letter-spacing:.06em;color:var(--brand-ink);
}
.gloss-name{display:block;font-size:.8rem;font-weight:500;color:var(--muted);line-height:1.35;margin-top:.15rem}
@media (max-width:40rem){
  table.gloss td:first-child{width:auto;padding-bottom:.5rem}
  table.gloss abbr{font-size:1.3rem}
}

/* ---- The author strip ------------------------------------------------------ */
.author{border-left:3px solid var(--brand);padding-left:clamp(1rem,3vw,1.5rem);max-width:60rem}
.author-name{font-weight:800;font-size:1.05rem;margin-top:.5rem}
.author-bio{margin-top:.3rem;font-size:.95rem;line-height:1.6;color:var(--muted);max-width:70ch}
.author-bio a{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--brand);text-decoration:none}
.author-bio a:hover{color:var(--brand-ink)}

/* ---- The split form section ------------------------------------------------
   The market-check form beside its argument, on paper rather than in the
   hero. Below the split the copy leads and the form follows. */
.split-form{display:grid;gap:clamp(2rem,4vw,3.25rem);align-items:start}
@media (min-width:64rem){.split-form{grid-template-columns:minmax(0,1.05fr) minmax(23rem,.95fr)}}
.split-form .sec-head{max-width:none}

/* ---- The entity graph ------------------------------------------------------
   Nodes and edges — the record an engine assembles about a business — drawn
   behind the AI hero where the map contours sit on the paper heroes. */
.graph{
  position:absolute;z-index:1;pointer-events:none;
  top:50%;left:50%;width:min(1100px,175%);translate:-50% -50%;
  color:var(--contour);
}
@media (min-width:62rem){.graph{left:auto;right:-4%;width:760px;translate:0 -50%}}
.graph circle{fill:#161514;stroke:currentColor;stroke-width:1.2}
.graph .node-hi{fill:var(--brand);stroke:var(--brand);animation:node 3.2s ease-in-out infinite}
.graph .node-hi:nth-child(2){animation-delay:1.1s}
.graph .node-hi:nth-child(3){animation-delay:2.2s}
.graph line{stroke:currentColor;stroke-width:1}
.graph .edge-hi{stroke:var(--brand);stroke-dasharray:6 8;animation:flow 2.6s linear infinite;opacity:.8}
@keyframes node{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes flow{to{stroke-dashoffset:-28}}


/* ---- 2026-09-20 restyle: the modern read --------------------------------------------------------------------
   Softer corners everywhere, pill buttons in the one CTA color, cards that lift, a teal-tinted alternate section
   instead of beige, a deep-teal footer, bigger and tighter headlines, the mesh glow on the hero. Nothing structural
   moved; the eyebrows, the graticule and the mono ticks stay — they are the part that is not a template. */
.btn{border-radius:999px;padding:.85rem 1.5rem}
.card{border-radius:18px;border:1px solid transparent;box-shadow:0 1px 2px rgba(26,25,25,.05),0 18px 40px -28px rgba(10,90,100,.45)}
.card:hover{transform:translateY(-3px);border-color:var(--brand-tint);box-shadow:0 2px 4px rgba(26,25,25,.05),0 26px 50px -26px rgba(10,90,100,.55)}
.field input,.field select,.field textarea,.scan-form input,.hero-form input,.hero-form select{border-radius:12px}
.sec-head h2,.hero h1{letter-spacing:-.028em;line-height:1.04}
.sec-head h2{font-size:clamp(1.9rem,3.4vw,2.75rem)}
.sec-head .lede{font-size:clamp(1.05rem,1.6vw,1.2rem)}
.sec-sunk{background:var(--brand-deep)}
.sec-sunk .tick{color:var(--brand-lift)}
.sec-sunk .tick::before{background:var(--brand-lift)}
.sec-sunk .sec-head .lede,.sec-sunk .lede{color:#D6E4E6}
.sec-sunk{--muted:#9FC1C6;--ink-2:#D6E4E6;--rule:rgba(255,255,255,.14);--rule-2:rgba(255,255,255,.26);--paper-2:#0A4C54;--brand-tint:rgba(255,255,255,.07)}
.sec-sunk .card{box-shadow:0 1px 2px rgba(26,25,25,.05),0 18px 40px -28px rgba(7,63,70,.5)}
.tick{color:var(--brand-ink)}
.tick::before{background:var(--brand);opacity:.8;height:2px;border-radius:1px}
.hero-ai .tick,.band .tick,.sec-tools .tick{color:var(--brand-lift)}
.hero-ai .tick::before,.band .tick::before{background:var(--brand-lift)}
.hero-ai .h1-kicker{color:var(--brand-lift)}
.ftr{background:var(--brand-deep);border-top:0;color:#F2EEE9;
  --ink:#F2EEE9;--ink-2:#D6E4E6;--muted:#9FC1C6;--rule:rgba(255,255,255,.12);--rule-2:rgba(255,255,255,.22);--paper-2:#0A4C54;--sunk:#062F35;--brand-ink:#5CCAD6;--brand-tint:rgba(255,255,255,.06)}
.ftr a{color:#F2EEE9}
.ftr .ftr-h{color:var(--brand-lift)}
.ftr .btn-primary{color:var(--cta-ink)}
.hdr{border-bottom:1px solid var(--rule)}
.nav a:not(.btn)[aria-current=page]{box-shadow:inset 0 -3px 0 var(--cta)}
.nav-group[data-current] > a{box-shadow:inset 0 -3px 0 var(--cta)}
.scanner{background:var(--paper-2)}
.scan-badge.pass{background:#DDF3EE;color:#0A5A64}
.ai-check-verdict.yes{border-color:#5CCAD6;background:#E6F1F2}
.link{box-shadow:inset 0 -2px 0 var(--cta)}
.link:hover{box-shadow:inset 0 -1.2em 0 rgba(252,180,50,.35);color:var(--ink)}
@media (prefers-reduced-motion:reduce){.card:hover,.btn-primary:hover{transform:none}}
/* Registration marks do not sit on a rounded card; the lift and the shadow do that job now. */
.card.reg::before,.card.reg::after,.tool-card.reg::before,.tool-card.reg::after{display:none}
.answer{border-radius:18px;border-color:rgba(92,202,214,.28);background:rgba(31,29,28,.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.answer::before,.answer::after{display:none}
.answer-q{border-radius:12px}
.hero-ai .contour{opacity:.7}

/* ---- Guides and glossary (2026-09-20) ------------------------------------
   The straight-answer block is the passage an engine lifts; it is styled to
   read as the answer, not as a decoration. Takeaways and the contents list
   are what a skimming owner reads; the prose is what a model quotes. */
.guide-meta{margin-top:1rem;font-size:.95rem;color:var(--muted)}
.guide-meta time{color:var(--ink-2)}
.tldr{background:var(--brand-tint);border-left:4px solid var(--cta);border-radius:0 18px 18px 0;padding:clamp(1.1rem,3vw,1.6rem) clamp(1.2rem,3.5vw,1.9rem)}
.tldr .tick{margin:0;color:var(--brand-ink)}
.tldr-text{margin:.6rem 0 0;font-size:clamp(1.08rem,1.6vw,1.24rem);line-height:1.55;font-weight:500;color:var(--ink)}
.takeaways{border:1px solid var(--rule);border-radius:18px;padding:clamp(1.1rem,3vw,1.5rem) clamp(1.2rem,3.5vw,1.8rem);background:var(--paper-2)}
.takeaways .tick{margin:0}
.takeaways ul{list-style:none;padding:0;margin:.7rem 0 0}
.takeaways li{position:relative;padding-left:1.7rem;margin-top:.55rem;line-height:1.5;color:var(--ink-2)}
.takeaways li::before{content:'';position:absolute;left:0;top:.55em;width:.7rem;height:.7rem;border-radius:50%;background:var(--cta)}
.toc .tick{margin:0}
.toc ol{list-style:none;padding:0;margin:.6rem 0 0;display:flex;flex-wrap:wrap;gap:.45rem}
.toc li a{display:inline-block;padding:.4rem .85rem;border:1px solid var(--rule-2);border-radius:999px;font-size:.88rem;font-weight:600;color:var(--brand-ink);text-decoration:none;background:var(--paper-2)}
.toc li a:hover{border-color:var(--brand);background:var(--brand-tint)}
.guide-body h2{scroll-margin-top:5.5rem}
.guide-body .deflist,.deflist{margin:1.15rem 0 0;padding:0}
.deflist>div{padding:.9rem 0;border-top:1px solid var(--rule)}
.deflist>div:last-child{border-bottom:1px solid var(--rule)}
.deflist dt{font-weight:600;color:var(--ink)}
.deflist dd{margin:.35rem 0 0;color:var(--ink-2);line-height:1.6}
.code{background:#0B0B0B;color:#F2EEE9;border:1px solid var(--rule);border-radius:14px;padding:1.1rem 1.25rem;overflow-x:auto;font-family:var(--mono);font-size:.82rem;line-height:1.55;margin-top:1.15rem}
.guide-card h3{font-size:1.15rem;line-height:1.3}
.guide-card p:not(.card-tick){font-size:.93rem;color:var(--ink-2);line-height:1.55;margin-top:.5rem}
.gloss-nav ul{list-style:none;padding:0;margin:.6rem 0 0;display:flex;flex-wrap:wrap;gap:.45rem}
.gloss-nav li a{display:inline-block;padding:.45rem .95rem;border:1px solid var(--rule-2);border-radius:999px;font-size:.9rem;font-weight:600;color:var(--brand-ink);text-decoration:none;background:var(--paper-2)}
.gloss-nav li a:hover{border-color:var(--brand);background:var(--brand-tint)}
.gloss-group{margin-top:clamp(2.5rem,6vw,4rem);scroll-margin-top:5.5rem}
.gloss{margin:0;padding:0;border-top:1px solid var(--rule)}
.gloss-term{display:grid;gap:.4rem 2rem;padding:1.1rem 0;border-bottom:1px solid var(--rule);scroll-margin-top:5.5rem}
@media (min-width:760px){.gloss-term{grid-template-columns:minmax(0,18rem) minmax(0,1fr)}}
.gloss-term dt{font-weight:800;font-size:1.05rem;line-height:1.3}
.gloss-term dt a{color:var(--ink);text-decoration:none}
.gloss-term dt a:hover{color:var(--brand-ink)}
.gloss-term:target{background:var(--brand-tint);margin-inline:-1rem;padding-inline:1rem;border-radius:12px}
.gloss-term dd{margin:0;color:var(--ink-2);line-height:1.6;max-width:70ch}
.gloss-term dd p{margin:0}
.gloss-more{margin-top:.45rem !important;font-size:.9rem;color:var(--muted)}
.gloss-more a{color:var(--brand-ink);font-weight:600}


/* ---- Dark-first (2026-09-20) --------------------------------------------------------------------------------
   Every hero gets the home hero's glow; every section is the dark ground or the deep teal; content sits on
   paper cards; tables and lists on the ground read in paper ink with lit teal accents. */
.hero{background:var(--paper)}
.hero::after{
  content:'';position:absolute;z-index:0;pointer-events:none;
  width:min(60vw,760px);height:min(60vw,760px);right:-16vw;top:-30%;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,rgba(252,180,50,.18),transparent 42%),radial-gradient(circle at 65% 65%,rgba(10,90,100,.8),transparent 60%);
  filter:blur(18px);
}
.hero>.wrap{position:relative;z-index:1}
.hero .contour{color:#F2EEE9;opacity:.5}
.hero h1{color:#F2EEE9}
.hero .lede{color:var(--ink-2)}
.card{background:#F7F5F2;color:#1A1919;border-color:transparent}
.card h3,.card h2{color:#1A1919}
.card p{color:#403B38}
.card .card-tick{color:#6B6560}
.card .card-go{color:#07434B}
a.card:hover h3{color:#07434B}
.tool-card{background:#F7F5F2;color:#1A1919}
.scan-result{background:#F7F5F2;color:#1A1919;padding:1.5rem;border-radius:18px}
.sec-tools .scan-result{border:0}
.hdr{background:#F7F5F2;backdrop-filter:none}
.hdr .nav a:not(.btn){color:#403B38}
.hdr .nav a:not(.btn):hover{color:#1A1919;background:#EFEAE3}
.hdr .nav a:not(.btn)[aria-current=page]{color:#1A1919}
.drawer{background:#F7F5F2;color:#1A1919}
.drawer a:not(.btn){color:#1A1919}
.nav-menu{background:#FFFFFF;color:#1A1919;box-shadow:0 14px 40px rgba(0,0,0,.35)}
.nav-menu a{color:#1A1919}
.answer{border-color:rgba(92,202,214,.28)}
.sec-sunk .card{box-shadow:0 20px 50px -20px rgba(0,0,0,.6)}
.card{box-shadow:0 20px 50px -24px rgba(0,0,0,.7)}
.card:hover{box-shadow:0 26px 60px -24px rgba(0,0,0,.8);border-color:transparent}
.stratum:hover{background:var(--paper-2)}
.stratum-ai{border-left-color:var(--brand)}
.tick{color:var(--brand-ink)}
.tick::before{background:var(--brand)}
.faq summary{color:var(--ink)}
.faq details[open] summary{color:var(--brand-ink)}
.faq-a p{color:var(--ink-2)}
table.vs td strong,table.vs th{color:var(--ink)}
.author{border-left-color:var(--cta)}
.author-bio a{box-shadow:inset 0 -2px 0 var(--cta)}
.prose a:not(.btn){color:var(--ink);box-shadow:inset 0 -2px 0 var(--cta)}
.prose a:not(.btn):hover{color:var(--cta)}
.link{color:var(--ink)}
.btn-ghost{color:#F2EEE9;border-color:rgba(242,238,233,.45)}
.btn-ghost:hover{border-color:#F2EEE9;background:rgba(242,238,233,.08);color:#F2EEE9}
.card .btn-ghost,.tool-card .btn-ghost,.scan-result .btn-ghost{color:#07434B;border-color:#0A5A64}
.card .btn-ghost:hover,.tool-card .btn-ghost:hover,.scan-result .btn-ghost:hover{background:#E6F1F2;color:#07434B}
.tldr{background:rgba(255,255,255,.05);border-left-color:var(--cta)}
.tldr .tick{color:var(--brand-ink)}
.takeaways{background:var(--paper-2);border-color:var(--rule-2)}
.toc li a,.gloss-nav li a{background:transparent;color:var(--brand-ink);border-color:var(--rule-2)}
.toc li a:hover,.gloss-nav li a:hover{background:rgba(255,255,255,.06);border-color:var(--brand)}
.deflist dt,.gloss-term dt a{color:var(--ink)}
.gloss-term:target{background:rgba(255,255,255,.05)}
.callbar{background:#1F1D1C;border-top-color:#4A4340}
.callbar .c-note{color:var(--brand-ink)}
.scan-badge.info{background:#EFEAE3;color:#6B6560}
.engines-list li{color:var(--ink)}
.ftr{background:#073F46}
.band::after{
  content:'';position:absolute;z-index:0;pointer-events:none;
  width:min(60vw,760px);height:min(60vw,760px);right:-16vw;top:-40%;border-radius:50%;
  background:radial-gradient(circle at 35% 35%,rgba(252,180,50,.18),transparent 42%),radial-gradient(circle at 65% 65%,rgba(10,90,100,.8),transparent 60%);
  filter:blur(18px);
}
.band>.wrap{position:relative;z-index:1}

/* ---- Search and the assistant (2026-09-20) ---------------------------------------------------------------
   The header button and the panel. The panel is a paper card on the dark page: results as a list, the thread
   as bubbles, gold for the one action. */
.hdr-search{
  display:inline-flex;align-items:center;gap:.45rem;margin-left:auto;
  min-height:38px;padding:.45rem .9rem;border:1px solid #D3CBC0;border-radius:999px;
  background:#FFFFFF;color:#403B38;font:inherit;font-size:.9rem;font-weight:600;cursor:pointer;
}
.hdr-search:hover{border-color:#0A5A64;color:#07434B;background:#E6F1F2}
.hdr-search svg{flex:none}
.hdr-search{white-space:nowrap;flex:none}
@media (min-width:62rem){.hdr-search{margin-left:.25rem;margin-right:.25rem}}
@media (max-width:61.99rem){.hdr-search span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.hdr-search{padding:.45rem .6rem;margin-right:.5rem}}
.ask{
  width:min(44rem,calc(100vw - 2rem));max-height:min(88vh,52rem);margin:auto;padding:0;
  border:0;border-radius:20px;background:#F7F5F2;color:#1A1919;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.8);
}
.ask::backdrop{background:rgba(10,9,9,.72);backdrop-filter:blur(4px)}
.ask-in{display:flex;flex-direction:column;gap:.9rem;padding:clamp(1rem,3vw,1.5rem);max-height:inherit;overflow:auto}
.ask-top{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.ask-top .tick{margin:0}
.ask-close{border:0;background:transparent;color:#6B6560;font-size:1.6rem;line-height:1;cursor:pointer;padding:.2rem .5rem;border-radius:8px}
.ask-close:hover{background:#EFEAE3;color:#1A1919}
.ask-form{display:flex;gap:.5rem}
.ask-form input{
  flex:1 1 auto;min-width:0;min-height:var(--tap);padding:.7rem 1rem;font:inherit;font-size:1.02rem;
  background:#FFFFFF;color:#1A1919;border:1.5px solid #D3CBC0;border-radius:999px;
}
.ask-form input:focus{border-color:#0A5A64;outline-offset:1px}
.ask-form input::-webkit-search-cancel-button{-webkit-appearance:none}
.ask-form .btn{flex:none;padding-inline:1.2rem}
.ask-hint{margin:0;font-size:.85rem;color:#6B6560;line-height:1.5}
.ask-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.ask-chip{border:1px solid #D3CBC0;background:#FFFFFF;color:#07434B;font:inherit;font-size:.86rem;font-weight:600;padding:.45rem .85rem;border-radius:999px;cursor:pointer}
.ask-chip:hover{border-color:#0A5A64;background:#E6F1F2}
.ask-results{list-style:none;margin:0;padding:0;border:1px solid #E2DCD3;border-radius:14px;background:#FFFFFF;overflow:hidden}
.ask-results li+li{border-top:1px solid #E2DCD3}
.ask-results a{display:grid;grid-template-columns:auto 1fr;gap:.15rem .7rem;padding:.7rem .9rem;text-decoration:none;color:#1A1919}
.ask-results a:hover{background:#E6F1F2}
.ask-kind{grid-row:span 2;align-self:start;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:#07434B;background:#E6F1F2;padding:.25rem .45rem;border-radius:6px;margin-top:.15rem;white-space:nowrap}
.ask-title{font-weight:700;line-height:1.3}
.ask-sub{font-size:.86rem;color:#6B6560;line-height:1.4}
.ask-none{padding:.8rem .9rem;font-size:.9rem;color:#6B6560}
.ask-thread{display:flex;flex-direction:column;gap:.7rem}
.ask-thread:empty{display:none}
.ask-msg{max-width:92%;padding:.8rem 1rem;border-radius:16px;line-height:1.55;font-size:.98rem}
.ask-msg p{margin:0}
.ask-msg p+p,.ask-msg ul{margin-top:.55rem}
.ask-msg ul{padding-left:1.2rem}
.ask-msg li+li{margin-top:.3rem}
.ask-user{align-self:flex-end;background:#0A5A64;color:#F2EEE9;border-bottom-right-radius:4px}
.ask-assistant{align-self:flex-start;background:#FFFFFF;border:1px solid #E2DCD3;border-left:4px solid var(--cta);border-bottom-left-radius:4px;color:#1A1919}
.ask-assistant a{color:#07434B;font-weight:600}
.ask-cite{display:inline-block;min-width:1.15em;padding:0 .3em;margin-left:.15em;border-radius:6px;background:#E6F1F2;color:#07434B;font-size:.72em;font-weight:700;text-decoration:none;vertical-align:super;line-height:1.5}
.ask-sources{font-size:.84rem;color:#6B6560;border-top:1px solid #E2DCD3;padding-top:.5rem}
.ask-wait{color:#6B6560;font-style:italic}
.ask-foot{margin:0;font-size:.82rem;color:#6B6560;line-height:1.5;border-top:1px solid #E2DCD3;padding-top:.7rem}
.ask-foot a{color:#07434B;font-weight:600}

/* ---- Contact forms on white (2026-09-20, Michael) -------------------------------------------------------- */
form[data-lead-form]{
  background:#FFFFFF;color:#1A1919;padding:clamp(1.1rem,3vw,1.75rem);border-radius:18px;
  box-shadow:0 20px 50px -24px rgba(0,0,0,.7);
  --paper:#FFFFFF;--paper-2:#FFFFFF;--sunk:#EFEAE3;--ink:#1A1919;--ink-2:#403B38;--muted:#6B6560;
  --rule:#E2DCD3;--rule-2:#D3CBC0;--brand:#0A5A64;--brand-ink:#07434B;--brand-tint:#E6F1F2;--alert-ink:#C4231F;
  color-scheme:light;
}
form[data-lead-form] input,form[data-lead-form] select,form[data-lead-form] textarea{background:#FFFFFF;color:#1A1919;border-color:#D3CBC0}
form[data-lead-form] label{color:#1A1919}
form[data-lead-form] .btn-ghost{color:#07434B;border-color:#0A5A64}
.ask [hidden]{display:none !important}
/* The header at desktop widths: the links, then the search, then the Contact button — the search loses its
   label while the row is tight, so the nav never wraps. */
@media (min-width:62rem){
  .hdr-search{margin-left:.5rem}
  .nav a:not(.btn){white-space:nowrap}
}
@media (min-width:62rem) and (max-width:74rem){.hdr-search span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}.hdr-search{padding:.45rem .6rem}.nav a:not(.btn){padding:.6rem .55rem;font-size:.9rem}}
/* A question in the results answers itself: the row is a button, the answer opens under it (the best one opens on its own). */
.ask-faq-q{display:grid;grid-template-columns:auto 1fr;gap:.15rem .7rem;width:100%;padding:.7rem .9rem;text-align:left;border:0;background:transparent;color:#1A1919;font:inherit;cursor:pointer}
.ask-faq-q:hover,.ask-faq.open .ask-faq-q{background:#E6F1F2}
.ask-faq-q .ask-title::after{content:' ▾';color:#07434B;font-size:.85em}
.ask-faq.open .ask-faq-q .ask-title::after{content:' ▴'}
.ask-faq-a{padding:.2rem .9rem .9rem calc(.9rem + 4.4rem);font-size:.93rem;line-height:1.55;color:#403B38;background:#F7F5F2;border-top:1px solid #E2DCD3}
.ask-faq-a p{margin:.5rem 0 .4rem}
.ask-faq-a a{color:#07434B;font-weight:600}
@media (max-width:40rem){.ask-faq-a{padding-left:.9rem}}
.faq details{scroll-margin-top:5.5rem}
.ask-in>*{flex-shrink:0}   /* the panel scrolls; nothing inside it is squeezed */
/* the calls to action under every answer and at the foot of the panel (2026-09-20) */
.ask-ways{display:flex;flex-wrap:wrap;gap:.5rem;margin:.75rem 0 0}
.ask-way{display:inline-flex;align-items:center;min-height:40px;padding:.5rem 1rem;border:1.5px solid #0A5A64;border-radius:999px;color:#07434B;font-weight:700;font-size:.88rem;text-decoration:none;background:#fff}
.ask-way:hover{background:#E6F1F2}
.ask-way-main{background:var(--cta);border-color:var(--cta);color:var(--cta-ink)}.ask-way-main:hover{background:var(--cta-hover);border-color:var(--cta-hover)}
.ask-foot{margin:0;border-top:1px solid #E2DCD3;padding-top:.8rem}.ask-foot .ask-ways{margin:0}
.ask-foot-note{margin:.5rem 0 0;font-size:.8rem;color:#6B6560;line-height:1.5}
/* the website assistant page (2026-09-20) */
.hero-sub{margin-top:1rem;font-size:.95rem;color:var(--muted);max-width:44ch}
.hero-sub kbd{font-family:var(--mono);font-size:.85em;padding:.1em .45em;border:1px solid var(--rule-2);border-radius:6px;background:var(--paper-2);color:var(--ink)}
button.card{width:100%;display:block;color:#1A1919}
button.card:hover{transform:translateY(-3px)}


/* ============================================================================
   2026-09-20 — Michael's picks from the audit's style notes
   ========================================================================= */

/* Plain section labels: the mono uppercase tick stays on the hero, the tools
   band and the CTA bands; everywhere else the label is the body face in
   sentence case (layout.js rewrites the text to match). */
section:not(.hero):not(.sec-tools):not(.band) .tick,
section:not(.hero):not(.sec-tools):not(.band) .card-tick{
  font-family:var(--font);text-transform:none;letter-spacing:.005em;font-weight:700;
}
section:not(.hero):not(.sec-tools):not(.band) .tick{font-size:.84rem}
section:not(.hero):not(.sec-tools):not(.band) .card-tick{font-size:.78rem}

/* The phone: in the strip above the header (with the email), in the drawer,
   in the footer's NAP, and as the first button of the phone bar. */
.ftr-nap a[href^="tel:"]{font-family:var(--mono);font-weight:700;letter-spacing:.02em}
/* The bar is a flex row below 62rem — the note on its own line, then the Call pill and the gold button side by side.
   It had stayed display:block, so the two buttons stacked and the bar grew past the page's bottom padding (fixed
   2026-09-23). Scoped to the phone widths: the desktop display:none above must keep winning. */
@media (max-width:61.99rem){.callbar{display:flex}}
.callbar{flex-wrap:wrap;row-gap:.35rem;column-gap:.5rem}
.callbar .c-note{width:100%;justify-content:center}
.callbar .c-tel{
  display:inline-flex;align-items:center;justify-content:center;gap:.4rem;
  min-height:var(--tap);padding:.6rem .9rem;border-radius:999px;
  border:1px solid var(--brand-ink);color:var(--brand-ink);font-weight:800;text-decoration:none;flex:0 0 auto;
}
.callbar .c-tel svg{width:13px;height:13px}
.callbar .c-cta{flex:1 1 auto;text-align:center}

/* The recorded answer: beside the copy on a desktop, after the free checks on
   a phone (the panel is a whole screen tall there and was sitting between the
   headline and the checks). */
@media (max-width:63.99rem){.hero-aside{display:none}}
.proof-mobile{padding-block:clamp(1.5rem,5vw,2.5rem)}
@media (min-width:64rem){.proof-mobile{display:none}}
.answer-note{margin:.9rem 0 0;font-size:.76rem;line-height:1.5;color:var(--muted)}
.answer-note a{color:inherit;font-weight:600}

/* The work: every live client site as an even grid of hero screenshots (2026-09-24) — the first screen of each
   home page at 16:10, the business name and the domain, nothing else (workGrid() in partials.js). Two across on a
   phone, four from 48rem; the tiles wrap and center, so a row that is not full sits in the middle. */
.work-grid{--cols:2;--gap:.75rem;display:flex;flex-wrap:wrap;justify-content:center;gap:var(--gap);margin:0;padding:0;list-style:none}
@media (min-width:48rem){.work-grid{--cols:4;--gap:1rem}}
.work-tile{
  display:flex;flex-direction:column;flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols) - .1px);min-width:0;
  background:var(--paper-2);border:1px solid var(--rule-2);border-radius:10px;overflow:hidden;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.work-tile:hover{border-color:var(--brand);box-shadow:0 14px 32px -22px rgba(0,0,0,.7)}
.work-link{display:block;flex:1 0 auto;padding-bottom:.75rem;text-decoration:none;color:var(--ink)}
.work-link img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top;border-bottom:1px solid var(--rule)}
.work-link:focus-visible{outline-offset:-3px;border-radius:10px}
.work-tile .work-name{padding:.65rem .75rem 0;font-size:.88rem;line-height:1.3}
.work-tile .work-dom{padding:.15rem .75rem 0;font-size:.72rem;letter-spacing:0;overflow-wrap:anywhere}
/* The case study's own screenshot: one wide card under the hero. */
.work-card{
  display:block;text-decoration:none;color:var(--ink);
  background:var(--paper-2);border:1px solid var(--rule-2);border-radius:var(--r);overflow:hidden;
  transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease;
}
.work-card:hover{transform:translateY(-2px);border-color:var(--brand);box-shadow:0 18px 40px -24px rgba(0,0,0,.6)}
.work-card img{display:block;width:100%;height:auto;aspect-ratio:720/450;object-fit:cover;border-bottom:1px solid var(--rule)}
.work-name{display:block;padding:.8rem .9rem 0;font-weight:800;font-size:.95rem}
.work-dom{display:block;padding:.15rem .9rem .9rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.02em;color:var(--brand-ink)}

/* The founder's photo: square beside the author strip, portrait on About. */
.author{display:flex;gap:clamp(1rem,2.5vw,1.5rem);align-items:flex-start}
.author-photo{flex:none;width:clamp(72px,9vw,104px);height:auto;aspect-ratio:1;border-radius:50%;object-fit:cover;border:2px solid var(--brand)}
.author-in{min-width:0}
/* About → Who does the work (2026-09-27): the portrait beside the bio on the
   teal band. At 375px the photo comes first, capped so it never fills the
   phone; from 52rem it takes a column of its own. */
.founder{display:grid;gap:clamp(1.75rem,4vw,3.25rem);align-items:start}
.founder-photo{margin:0;width:100%;max-width:17rem}
.founder-photo img{display:block;width:100%;height:auto;border-radius:var(--r);border:1px solid var(--rule-2);box-shadow:0 24px 60px -30px rgba(0,0,0,.7)}
.founder-photo figcaption{margin-top:.85rem}
.founder-body{min-width:0;max-width:var(--narrow)}
.founder-body h2{margin-top:.5rem}
@media (min-width:52rem){.founder{grid-template-columns:minmax(16rem,22rem) minmax(0,1fr);align-items:center}.founder-photo{max-width:none}}

/* The case studies: a dated, sourced fact list; screenshots inside cards. */
.facts{display:grid;gap:1rem;margin:0}
@media (min-width:52rem){.facts{grid-template-columns:repeat(2,1fr)}}
.fact{margin:0;padding:1.1rem 1.2rem;background:var(--paper-2);border:1px solid var(--rule-2);border-radius:var(--r)}
.fact dt{font-size:.82rem;font-weight:700;color:var(--brand-ink);letter-spacing:.005em}
.fact dd{margin:.35rem 0 0}
.fact dd strong{display:block;font-size:clamp(1.35rem,2.4vw,1.8rem);line-height:1.15;letter-spacing:-.015em}
.fact dd span{display:block;margin-top:.4rem;font-size:.92rem;line-height:1.5;color:var(--ink-2)}
.fact dd small{display:block;margin-top:.55rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--muted)}
.card-shot{display:block;width:calc(100% + 2 * clamp(1.1rem,2.4vw,1.5rem));max-width:none;margin:calc(-1 * clamp(1.1rem,2.4vw,1.5rem)) calc(-1 * clamp(1.1rem,2.4vw,1.5rem)) 1rem;aspect-ratio:720/450;object-fit:cover;border-bottom:1px solid var(--rule)}
.work-card-wide{max-width:56rem;margin-inline:auto}
.proof-shot{padding-block:0 clamp(1.5rem,4vw,2.5rem)}

/* ---- The Punch List (2026-09-20) --------------------------------------------------------------------------
   The blog. A post is the guide layout with three additions: the picture under the hero, the punch list — a paper
   card of ticked boxes, the one thing the reader came for — and the inline "want it done" card. Cards on the hub
   carry the picture as a thumbnail. */
.post-figure{margin:0;border-radius:18px;overflow:hidden;border:1px solid var(--rule);background:var(--paper-2)}
.post-figure img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.punch{background:#F7F5F2;color:#1A1919;border-radius:18px;padding:clamp(1.1rem,3vw,1.6rem) clamp(1.2rem,3.5vw,1.9rem);box-shadow:0 20px 50px -24px rgba(0,0,0,.7)}
.punch .tick{margin:0;color:#0A5A64}
.punch .tick::before{background:#0A5A64}
.punch ol{list-style:none;padding:0;margin:.8rem 0 0;counter-reset:none}
.punch li{display:grid;grid-template-columns:1.45rem 1fr;gap:.8rem;align-items:start;margin-top:.7rem;line-height:1.55;color:#403B38}
.punch li:first-child{margin-top:0}
.punch li svg{width:1.45rem;height:1.45rem;padding:.22rem;box-sizing:border-box;margin-top:.1em;border-radius:5px;background:var(--cta);color:#1A1919;flex:none}
.punch li strong{color:#1A1919}
.punch li a{color:#07434B;font-weight:600;text-decoration:none;box-shadow:inset 0 -2px 0 #0A5A64}
.punch li a:hover{color:#0A5A64}
.punch li code{font-family:var(--mono);font-size:.9em;background:#EFEAE3;padding:.05em .35em;border-radius:4px}
.post-card{display:flex;flex-direction:column}
.post-card img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;border-radius:12px;margin-bottom:1rem}
.post-card h3{font-size:1.12rem;line-height:1.3}
.post-card p:not(.card-tick){font-size:.93rem;color:#403B38;line-height:1.55;margin-top:.5rem}
.post-card .card-go{margin-top:auto;padding-top:.9rem}
.post-cta{max-width:52rem}
.post-cta h2{margin-top:.8rem}
.post-cta p:not(.tick){margin-top:.8rem;color:var(--ink-2);max-width:60ch;line-height:1.6}
.guide-body code{font-family:var(--mono);font-size:.9em;background:rgba(255,255,255,.08);padding:.05em .4em;border-radius:4px}
.guide-body em{font-style:italic}

/* ---- The follow-up under a tool's result (2026-09-23) ---------------------------------------------------------
   The tools ask for nothing up front; this is the lead, after the value: a name, an email, a phone if they like,
   posted to /api/follow-up with what the result was for. It sits inside the paper result card, so it reads the
   card's light tokens. */
.tool-follow{margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--rule);display:grid;gap:.8rem;max-width:44rem}
.tool-follow-h{margin:0;font-weight:800;font-size:1.12rem;line-height:1.3;color:var(--ink)}
.tool-follow-text p:not(.tool-follow-h){margin:.35rem 0 0;font-size:.94rem;line-height:1.55;color:var(--ink-2)}
.tool-follow .scan-contact input{
  flex:1 1 11rem;min-width:0;min-height:var(--tap);padding:.7rem .9rem;background:var(--paper);color:var(--ink);
  border:1.5px solid var(--rule-2);border-radius:12px;font:inherit;font-size:.95rem;
}
.tool-follow .scan-contact input:focus{border-color:var(--brand);outline-offset:1px}
.tool-follow-opt{display:flex;align-items:center;gap:.6rem;min-height:var(--tap);font-size:.93rem;color:var(--ink);cursor:pointer}
.tool-follow-opt input{width:20px;height:20px;flex:none;accent-color:#0A5A64}
.tool-follow-go{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1.25rem}
.tool-follow-go .cf-turnstile,.aide-cb-go .cf-turnstile{flex:1 0 100%;margin:0 !important}
.tool-follow-alt{display:inline-flex;align-items:center;gap:.45rem;min-height:var(--tap);font-weight:700;color:var(--brand-ink);text-decoration:none}
.tool-follow-alt:hover{text-decoration:underline;text-underline-offset:3px}
.tool-follow-status{margin:0;font-size:.93rem;line-height:1.5}
.tool-follow-status.is-ok{color:#166534;font-weight:600}
.tool-follow-status.is-err{color:#991B1B;font-weight:600}
.tool-follow.is-sent .scan-contact,.tool-follow.is-sent .tool-follow-opt,.tool-follow.is-sent .tool-follow-go .btn,.tool-follow.is-sent .cf-turnstile{display:none}

/* ---- Nora, the site assistant (2026-09-23) --------------------------------------------------------------------
   The chat launcher and panel on every page (src/search.js → aidePanel(), site.js → nora()) — the Zorva Labs
   assistant's shape with this site's look: the launcher dark on the dark ground with a teal ring (gold stays for
   buttons), the panel paper with a deep-teal head. It sits above the phone bar below 62rem; on a phone the open
   panel takes the whole screen. */
.aide{
  position:fixed;z-index:75;right:max(1rem,env(safe-area-inset-right));bottom:calc(6.75rem + env(safe-area-inset-bottom));
  display:flex;flex-direction:column-reverse;align-items:flex-end;gap:.75rem;font-family:var(--font);
}
.aide[hidden]{display:none}
@media (min-width:62rem){.aide{bottom:max(1.25rem,env(safe-area-inset-bottom))}}
.aide-launch{
  display:inline-flex;align-items:center;gap:.65rem;padding:.3rem;border-radius:999px;cursor:pointer;
  background:#1F1D1C;color:#F2EEE9;border:1px solid #4A4340;font:inherit;
  box-shadow:0 18px 38px -12px rgba(0,0,0,.75),0 0 0 1px rgba(61,184,198,.14);
  transition:border-color .2s ease,box-shadow .2s ease,transform .15s ease;
  animation:aide-in .5s cubic-bezier(.2,.8,.2,1) .6s both;
}
.aide.is-shown .aide-launch{animation:none}
.aide-launch:hover{border-color:rgba(61,184,198,.7);box-shadow:0 18px 38px -12px rgba(0,0,0,.75),0 0 0 1px rgba(61,184,198,.4),0 0 26px rgba(61,184,198,.22)}
.aide-launch:active{transform:translateY(1px) scale(.98)}
.aide-launch:focus-visible{outline:2px solid #5CCAD6;outline-offset:3px}
.aide-label{font-weight:700;font-size:.95rem;padding-right:.95rem}
@media (max-width:39.99rem){.aide-label{display:none}.aide-launch{padding:.2rem}}
/* She rises out of the disc: the disc is ::before, the picture is pre-masked (scripts/make-assistant-images.mjs —
   above the disc's center line all of her shows, below it only what is inside the circle), and a shade at the
   floor sinks her shoulders into it. The file is 3× a 52px disc and scales with --disc. */
.aide-avatar{--disc:52px;position:relative;flex:none;width:var(--disc);height:var(--disc);overflow:visible}
.aide-avatar::before{
  content:'';position:absolute;inset:0;border-radius:999px;
  background:radial-gradient(circle at 50% 30%,#16606A,#073F46 72%);
  box-shadow:0 0 0 2px #3DB8C6,0 0 16px rgba(61,184,198,.3),inset 0 -8px 14px rgba(0,0,0,.4);
}
.aide-avatar img{
  position:absolute;left:0;bottom:0;width:var(--disc);max-width:none;height:auto;display:block;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.4));transform-origin:50% 100%;transition:transform .25s cubic-bezier(.2,.8,.2,1);
}
.aide-launch:hover .aide-avatar img{transform:translateY(-2px) scale(1.04)}
.aide-shade{position:absolute;inset:0;border-radius:999px;overflow:hidden;pointer-events:none}
.aide-shade::before{content:'';position:absolute;left:0;right:0;bottom:0;height:30%;background:linear-gradient(180deg,rgba(7,63,70,0),rgba(7,63,70,.55))}
.aide-avatar::after{content:'';position:absolute;inset:-6px;border-radius:999px;border:1px solid rgba(61,184,198,.6);animation:aide-ring 2.4s ease-out infinite;pointer-events:none}
.aide[data-open] .aide-avatar::after,.aide-head-avatar::after{display:none}

/* the word balloon — above the launcher, its tail toward her */
.aide-hello{
  position:relative;display:flex;align-items:flex-start;gap:.2rem;max-width:min(19.5rem,calc(100vw - 2rem));margin-right:.4rem;
  padding:.8rem .35rem .85rem 1rem;border-radius:16px 16px 4px 16px;background:#FFFFFF;color:#1A1919;border:1px solid #D3CBC0;
  box-shadow:0 22px 44px -18px rgba(0,0,0,.85);transform-origin:90% 100%;animation:aide-hello .4s cubic-bezier(.2,.9,.2,1.2) both;
}
.aide-hello[hidden]{display:none}
.aide-hello::before,.aide-hello::after{content:'';position:absolute;right:24px;bottom:-9px;border-left:8px solid transparent;border-right:8px solid transparent;border-top:9px solid #D3CBC0}
.aide-hello::after{bottom:-7px;border-top-color:#FFFFFF}
.aide-hello-text{flex:1;min-width:0;padding:0;margin:0;border:0;background:none;cursor:pointer;text-align:left;font:inherit;font-size:.92rem;line-height:1.45;color:#1A1919}
.aide-hello-text:hover{color:#07434B}
.aide-hello-name{display:block;margin-bottom:.2rem;font-size:.74rem;font-weight:700;color:#07434B}
.aide-hello-close{flex:none;width:44px;height:44px;margin:-.7rem -.2rem -.5rem 0;border:0;border-radius:999px;background:transparent;color:#6B6560;font:inherit;font-size:1.15rem;line-height:1;cursor:pointer}
.aide-hello-close:hover{background:#EFEAE3;color:#1A1919}

/* the panel */
.aide-panel{
  display:flex;flex-direction:column;overflow:hidden;padding-block:0;   /* it is a <section>; the page's section padding is not for it */
  width:min(25rem,calc(100vw - 2rem));height:min(41rem,calc(100vh - 9.5rem));height:min(41rem,calc(100dvh - 9.5rem));
  background:#F7F5F2;color:#1A1919;border-radius:20px;
  box-shadow:0 40px 90px -20px rgba(0,0,0,.85),0 0 0 1px rgba(242,238,233,.08);
  animation:aide-panel .28s cubic-bezier(.2,.8,.2,1) both;
}
.aide-panel[hidden]{display:none}
.aide-head{display:flex;align-items:center;gap:.8rem;padding:1.05rem .8rem .8rem 1rem;background:#073F46;color:#F2EEE9}
.aide-head-avatar{--disc:40px;margin-top:10px}
.aide-head-avatar::before{box-shadow:0 0 0 1.5px #5CCAD6,inset 0 -6px 10px rgba(0,0,0,.4)}
.aide-head-text{flex:1;min-width:0}
.aide-title{margin:0;font-weight:800;font-size:1.12rem;line-height:1.1;color:#F2EEE9}
.aide-sub{margin:.3rem 0 0;display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:#A9DCE2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aide-dot{width:7px;height:7px;flex:none;border-radius:999px;background:#5CCAD6;box-shadow:0 0 8px rgba(92,202,214,.8)}
.aide-icon{flex:none;width:44px;height:44px;border-radius:12px;border:1px solid rgba(242,238,233,.25);background:transparent;color:#F2EEE9;font:inherit;font-size:1.25rem;line-height:1;cursor:pointer}
.aide-icon:hover{border-color:#5CCAD6;color:#5CCAD6}
.aide-icon[hidden]{display:none}
.aide-form{display:flex;gap:.5rem;padding:.8rem .9rem;background:#FFFFFF;border-bottom:1px solid #E2DCD3}
.aide-form input{flex:1 1 auto;min-width:0;min-height:var(--tap);padding:.65rem 1rem;font:inherit;font-size:1rem;background:#FFFFFF;color:#1A1919;border:1.5px solid #D3CBC0;border-radius:999px}
.aide-form input:focus{border-color:#0A5A64;outline-offset:1px}
.aide-send{flex:none;width:var(--tap);min-height:var(--tap);padding:0 !important;display:inline-flex;align-items:center;justify-content:center}
.aide-send:disabled{opacity:.5;cursor:default;transform:none;box-shadow:none}
.aide-thread{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;padding:1rem;display:flex;flex-direction:column;gap:.9rem}
.aide-thread>*{flex-shrink:0}
.aide-intro[hidden]{display:none}
.aide-intro p{margin:0 0 .85rem;font-size:.94rem;line-height:1.55;color:#403B38}
.aide-chips{display:flex;flex-wrap:wrap;gap:.4rem}
.aide-chips .ask-chip{min-height:40px;text-align:left}
.aide-exchanges{display:flex;flex-direction:column;gap:.9rem}
.aide-exchange{display:flex;flex-direction:column;gap:.6rem;padding-bottom:.9rem;border-bottom:1px dashed #D3CBC0}
.aide-exchange:last-child{padding-bottom:0;border-bottom:0}
.aide-exchange:not(.is-latest){opacity:.8}
.aide-exchange:not(.is-latest):hover{opacity:1}
.aide .ask-msg{font-size:.95rem}
.aide .ask-assistant.is-error{border-left-color:#C4231F}
.aide-sources{margin:.6rem 0 0;padding:.5rem 0 0;list-style:none;border-top:1px solid #E2DCD3;display:flex;flex-direction:column;gap:.3rem}
.aide-sources a{display:flex;gap:.45rem;align-items:baseline;font-size:.8rem;font-weight:500 !important;color:#403B38 !important;text-decoration:none}
.aide-sources a:hover{color:#07434B !important;text-decoration:underline}
.aide-sources span{flex:none;padding:0 .3rem;border-radius:5px;background:#E6F1F2;color:#07434B;font-family:var(--mono);font-size:.68rem;font-weight:700}
.aide-typing{display:inline-flex;gap:.3rem;padding:.35rem 0}
.aide-typing i{width:7px;height:7px;border-radius:999px;background:#0A5A64;animation:aide-typing 1.1s ease-in-out infinite}
.aide-typing i:nth-child(2){animation-delay:.15s}
.aide-typing i:nth-child(3){animation-delay:.3s}
.aide-callback{padding:.9rem;border:1px solid #D3CBC0;border-radius:14px;background:#FFFFFF}
.aide-callback[hidden],.aide-callback form[hidden],.aide-cb-status[hidden]{display:none}
.aide-cb-title{margin:0 0 .6rem;font-weight:800;font-size:1rem}
.aide-cb-grid{display:grid;gap:.5rem}
.aide-cb-grid input{min-height:var(--tap);padding:.6rem .85rem;font:inherit;font-size:.95rem;background:#FFFFFF;color:#1A1919;border:1.5px solid #D3CBC0;border-radius:12px}
.aide-cb-grid input:focus{border-color:#0A5A64;outline-offset:1px}
.aide-cb-go{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-top:.7rem}
.aide-cb-go .btn{padding:.7rem 1.15rem;font-size:.93rem}
.aide-cb-cancel{min-height:var(--tap);padding:0 .8rem;border:0;background:transparent;color:#07434B;font:inherit;font-weight:600;cursor:pointer}
.aide-cb-status{margin:.6rem 0 0;font-size:.9rem;line-height:1.45}
.aide-cb-status.is-ok{color:#166534;font-weight:600}
.aide-cb-status.is-err{color:#991B1B;font-weight:600}
.aide-foot{padding:.65rem .9rem .8rem;background:#EFEAE3;border-top:1px solid #E2DCD3}
.aide-ways{display:flex;flex-wrap:wrap;gap:.4rem}
.aide-way{display:inline-flex;align-items:center;min-height:var(--tap);padding:0 .75rem;border-radius:999px;border:1px solid #0A5A64;background:#FFFFFF;color:#07434B;font:inherit;font-size:.78rem;font-weight:700;text-decoration:none;white-space:nowrap;cursor:pointer}
@media (pointer:fine){.aide-way{min-height:36px}}
.aide-way:hover{background:#E6F1F2}
.aide-note{margin:.55rem 0 0;font-size:.75rem;line-height:1.45;color:#6B6560}
@media (max-width:39.99rem){
  .aide[data-open]{inset:0;align-items:stretch;gap:0}
  .aide[data-open] .aide-launch,.aide[data-open] .aide-hello{display:none}
  .aide-panel{width:100vw;height:100vh;height:100dvh;border-radius:0;padding-top:env(safe-area-inset-top);padding-bottom:env(safe-area-inset-bottom)}
  body[data-aide-open]{overflow:hidden}
}
@keyframes aide-in{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes aide-ring{0%{transform:scale(.85);opacity:.9}100%{transform:scale(1.35);opacity:0}}
@keyframes aide-hello{from{transform:scale(.6) translateY(10px);opacity:0}to{transform:none;opacity:1}}
@keyframes aide-panel{from{transform:translateY(14px) scale(.98);opacity:0}to{transform:none;opacity:1}}
@keyframes aide-typing{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:1;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){
  .aide-launch,.aide-avatar::after,.aide-hello,.aide-panel,.aide-typing i{animation:none !important}
  .aide-launch,.aide-avatar img{transition:none !important}
}

/* ---- The free scan: the shared widget (/scan-widget/widget.css, vendored
   from ~/site-kit/scan) and its report page, in this site's tokens — so it
   follows the section it sits in, light or dark. ---- */
.sw.sw--nwd,.sw-page.sw--nwd{
  --sw-font:var(--font);--sw-font-display:var(--font);--sw-font-mono:var(--mono);
  --sw-ink:var(--ink);--sw-ink-2:var(--ink-2,var(--ink));--sw-muted:var(--muted);
  --sw-surface:var(--paper);--sw-surface-2:var(--sunk);--sw-line:var(--rule);
  --sw-accent:var(--brand);--sw-accent-ink:#fff;
  --sw-input-bg:var(--paper);--sw-input-ink:var(--ink);--sw-input-line:var(--rule-2,var(--rule));
  --sw-radius:var(--r);--sw-radius-sm:8px;
  --sw-fail:var(--alert-ink,var(--alert));--sw-poor:var(--alert-ink,var(--alert));
  /* the status colors for a dark page: the shared defaults are for white and read 2.7-3.6:1 here */
  --sw-pass:var(--brand-ink);--sw-warn:var(--cta);--sw-info:var(--muted);
  --sw-strong:var(--brand-ink);--sw-solid:var(--brand);--sw-decent:var(--cta);--sw-weak:#FB923C;
  --sw-mark-ink:var(--paper);
  --sw-ring-track:var(--rule);
}
.sw--nwd .sw-go,.sw--nwd .sw-send{min-height:var(--tap,44px)}
.tool-card .sw--nwd{margin-top:1rem}
#scan-out.sw--nwd{margin-top:1.5rem}