/* ==========================================================================
   KC AI SEO

   The brief: sell generative engine optimization to Kansas City owner-operators
   — plumbers, lawyers, dentists, shop owners — who already own a website. They
   are not developers, and the page has to read as though a person wrote it for
   them. The product is evidence: counted checks, named assistants, a citation
   rate that moves.

   Four rules hold the system together:
     1. LEFT EDGE. Body copy, headings and figures share one left edge per column.
        Centred text is reserved for genuinely symmetric elements and nothing else.
     2. ASYMMETRY. A section leads with its headline and the ~40-word extractive
        answer beside it, then the evidence below.
     3. NEAR-MONOCHROME. Mild white ground, off-black text. Spruce appears only on
        things you can click. Figures are set in ink — size and weight carry them.
     4. NO MONOSPACE OUTSIDE <code>. An earlier revision set every label, figure
        and table header in JetBrains Mono. Monospace reads as code, and the whole
        page read as a machine readout rather than as writing. Uppercase tracking
        stays at or under .07em for the same reason.

   Structure is information: section numbers appear only on step-by-step pages,
   where the order is a real sequence. Elsewhere a bare "01" is noise.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */
:root{
  /* Mild white ground, off-black text. The page is near-monochrome on purpose:
     colour appears only where it carries meaning — a link, a button, a control.
     An earlier version spent colour on every figure and label, which read as a
     machine readout rather than as something written for a person. */
  --paper:#FCFBF9;
  --surface:#FFFFFF;
  --surface-2:#F4F1EA00;      /* transparent by default; set per-band */
  --sunk:#F5F3EF;
  --border:#E7E4DD;
  --border-strong:#D2CEC5;
  --ink:#1B1A17;
  --ink-2:#2E2C28;
  --muted:#6B6861;
  --faint:#9B978E;

  /* Brand: deep spruce, reserved for things you can click. */
  --brand:#14544A;
  --brand-ink:#0D3E36;
  /* Link colour is lighter than the brand so an inline link is visibly a link.
     Contrast on the mild-white ground is ~5.4:1. */
  --link:#0F6B57;
  --brand-wash:#EBF1EF;
  --on-brand:#FFFFFF;

  /* Figures are set in ink, not in an accent. Size and weight carry them. */
  --figure:#1B1A17;
  --figure-wash:#F5F3EF;
  --rule:#C9C4B8;             /* hairline marks: eyebrow ticks, answer rules */

  /* Inverted bands */
  --dark:#1B1A17;
  --dark-2:#26241F;
  --dark-border:#38352E;
  --dark-ink:#FAF9F6;
  --dark-muted:#A8A399;

  --radius:10px;
  --radius-lg:16px;
  --hair:1px solid var(--border);

  /* Spacing. Tight inside a group, large between groups — that contrast is the rhythm. */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px;
  --s6:32px; --s7:48px; --s8:64px; --s9:96px;
  --gap-section:clamp(56px,6.2vw,92px);

  --container:1200px;
  --measure:34em;           /* ~68 characters at the serif body size */

  --sans:"Instrument Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  --shadow-sm:0 1px 2px rgba(26,24,20,.05);
  --shadow:0 1px 3px rgba(26,24,20,.06),0 8px 24px -12px rgba(26,24,20,.14);
  --shadow-lg:0 2px 6px rgba(26,24,20,.07),0 24px 56px -20px rgba(26,24,20,.22);
  /* Single committed theme. This site does NOT follow the OS dark-mode setting:
     the owner specified a mild-white ground with off-black text, and a visitor whose
     machine is in dark mode was being served a near-black page instead — the exact
     opposite of the brief. color-scheme is pinned so form controls stay light too. */
  color-scheme:light only;
}


/* --- 2. Base ------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;min-width: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;transition-duration:.01ms!important}
}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font:400 18px/1.62 var(--serif);
  overflow-x:clip;overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
  font-variant-numeric:oldstyle-nums;
}
h1,h2,h3,h4,.sans{font-family:var(--sans);font-variant-numeric:lining-nums tabular-nums}
h1,h2,h3,h4{color:var(--ink);margin:0;text-wrap:balance;letter-spacing:-.021em;font-weight:600}
h1{font-size:clamp(38px,5.4vw,64px);line-height:1.04;letter-spacing:-.033em;font-weight:700}
h2{font-size:clamp(25px,2.7vw,34px);line-height:1.14}
h3{font-size:clamp(18px,1.5vw,21px);line-height:1.28}
p{margin:0 0 var(--s4)}
p:last-child{margin-bottom:0}
a{color:var(--link);text-decoration:underline;
  text-decoration-color:color-mix(in srgb,var(--link) 38%,transparent);
  text-decoration-thickness:1.5px;text-underline-offset:.17em}
a:hover{color:var(--brand-ink);text-decoration-color:currentColor}

/* Navigation, cards and buttons are links too, but they are not inline citations —
   they keep their own affordance and must not pick up the prose underline. */
.site-head a,.site-foot a,.brand,.btn,.skip,.crumbs a,.hublist a,.railnav a,
.faq summary a,.stickycta a{text-decoration:none}
.site-head nav a,.head-tel,.brand,.crumbs a{color:inherit}
.site-foot a{color:var(--dark-ink)}
.site-foot a:hover{color:var(--brand-ink);text-decoration:underline}
.hublist a{color:inherit}
.invert a:not(.btn){color:var(--brand-ink)}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px;border-radius:3px}
img{max-width:100%;height:auto}
strong,b{font-weight:600;color:var(--ink)}
code{font:500 .88em/1.5 var(--mono);background:var(--sunk);border:var(--hair);
  border-radius:4px;padding:.12em .36em}
hr{border:0;border-top:var(--hair);margin:var(--s7) 0}
.skip{position:absolute;left:-9999px;top:0;background:var(--brand);color:var(--on-brand);
  padding:var(--s3) var(--s4);z-index:200;border-radius:0 0 var(--radius) 0}
.skip:focus{left:0}

/* --- 3. Layout primitives ------------------------------------------------ */
.wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.band{border-top:var(--hair)}
.sec+.sec{border-top:var(--hair)}
.band--brand{background:var(--brand-wash);border-color:color-mix(in srgb,var(--brand) 18%,transparent)}
.sec{padding-block:var(--gap-section)}
.sec--tight{padding-block:clamp(28px,3.4vw,44px)}

/* Section head: number, headline, and the extractive answer beside it.
   An earlier version put the headline in a narrow sticky column beside the body.
   It looked composed on short sections and opened 400-700px of dead gutter on long
   ones, so the headline now sits above the evidence and the asymmetry lives inside
   the head itself. */
.sechead{margin-bottom:clamp(28px,3.6vw,48px)}
.sechead__top{display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr);align-items:start}
@media (min-width:880px){
  .sechead__top{grid-template-columns:minmax(0,1fr) minmax(0,1.12fr);
    gap:clamp(32px,4.5vw,72px)}
}
.sechead h2{max-width:16ch}

/* Body flow. Prose holds a reading measure; evidence blocks are allowed to run wider,
   because a six-column table squeezed to 34em is unreadable. */
.flow{display:grid;gap:var(--s5);justify-items:start}
.flow>*{width:100%;max-width:var(--measure)}
.flow>.table-wrap,.flow>.cards,.flow>.steps,.flow>.figures{max-width:min(100%,960px)}
.flow>.deflist{max-width:min(100%,800px)}
.prose{max-width:var(--measure)}
.prose p{margin-bottom:var(--s4)}

/* Eyebrow. Mono + uppercase + a tick rule. Signals "this is a labelled part". */
.eyebrow{display:flex;align-items:center;gap:var(--s3);
  font:600 12px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;
  color:var(--muted);margin:0 0 var(--s4)}
.eyebrow::before{content:"";width:16px;height:1px;background:var(--rule);flex:none}
.eyebrow--plain::before{display:none}

/* --- 4. Header ----------------------------------------------------------- */
.site-head{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:saturate(1.6) blur(12px);border-bottom:var(--hair)}
.head-in{display:flex;align-items:center;gap:var(--s5);min-height:64px;
  width:100%;max-width:var(--container);margin-inline:auto;padding-inline:clamp(16px,4vw,32px)}
.brand{font:700 18px/1 var(--sans);letter-spacing:-.02em;color:var(--ink);
  text-decoration:none;flex:none;display:inline-flex;align-items:center;gap:.4em}
.brand::before{content:"";width:10px;height:10px;border-radius:2px;background:var(--brand);
  box-shadow:0 0 0 3px var(--brand-wash)}
.brand span{color:var(--brand)}
.site-head nav{margin-left:auto}
.site-head nav ul{display:flex;gap:var(--s5);list-style:none;margin:0;padding:0}
.site-head nav a{font:500 14.5px/1 var(--sans);color:var(--ink-2);text-decoration:none;
  padding:var(--s2) 0;display:inline-block}
.site-head nav a:hover,.site-head nav a[aria-current]{color:var(--brand)}
.head-cta{flex:none}
.nav-toggle{display:none}
.head-tel{font:500 14.5px/1 var(--sans);color:var(--muted);text-decoration:none;flex:none}
.head-tel:hover{color:var(--brand)}

@media (max-width:899px){
  .site-head nav{position:absolute;left:0;right:0;top:100%;background:var(--surface);
    border-bottom:var(--hair);box-shadow:var(--shadow);display:none;margin:0}
  .site-head nav.open{display:block}
  .site-head nav ul{flex-direction:column;gap:0;padding:var(--s2) clamp(16px,4vw,32px) var(--s4)}
  .site-head nav li+li{border-top:var(--hair)}
  .site-head nav a{display:block;padding:var(--s4) 0;font-size:16px}
  .nav-toggle{display:inline-flex;align-items:center;gap:var(--s2);margin-left:auto;
    font:500 14px/1 var(--sans);background:none;border:var(--hair);border-radius:var(--radius);
    padding:var(--s3) var(--s4);color:var(--ink);cursor:pointer}
  .head-tel{display:none}
  .head-cta{display:none}
}

/* --- 5. Buttons ---------------------------------------------------------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  font:600 15px/1 var(--sans);letter-spacing:-.006em;
  padding:14px 22px;border-radius:var(--radius);border:1px solid transparent;
  text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,color .15s;
  white-space:nowrap}
.btn--primary{background:var(--brand);color:var(--on-brand);box-shadow:var(--shadow-sm)}
.btn--primary:hover{background:var(--brand-ink);color:var(--on-brand)}
.btn--ghost{background:var(--surface);color:var(--ink);border-color:var(--border-strong)}
.btn--ghost:hover{border-color:var(--ink);color:var(--ink)}
.btn--sm{padding:9px 15px;font-size:13.5px}
.btn--wide{width:100%}
.btn-row{display:flex;flex-wrap:wrap;gap:var(--s3);align-items:center}

/* --- 6. Hero ------------------------------------------------------------- */
.hero{padding-block:clamp(40px,5.5vw,76px) clamp(28px,3.4vw,44px);position:relative}
/* A faint engineering grid. Texture, not decoration — it reads as measured paper. */
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),
                   linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(ellipse 70% 55% at 25% 0%,#000 0%,transparent 70%);
  opacity:.32}
.hero .wrap{position:relative}
.hero__grid{display:grid;gap:clamp(32px,4vw,56px);align-items:start;
  grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){.hero__grid{grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)}}
.hero h1{margin-bottom:var(--s5);max-width:15ch}
.hero__lede{font-size:clamp(18px,1.55vw,20.5px);line-height:1.6;color:var(--ink-2);
  max-width:38em;margin-bottom:var(--s6)}
.hero__lede strong{color:var(--ink)}
.hero .btn-row{margin-bottom:var(--s5)}
.hero__note{font:400 14px/1.55 var(--sans);color:var(--muted);max-width:46ch;margin:0}
.locus{display:inline-flex;align-items:center;gap:var(--s3);margin-bottom:var(--s5);
  font:500 13px/1 var(--sans);letter-spacing:.01em;
  color:var(--ink-2);background:var(--surface);border:var(--hair);
  border-radius:100px;padding:8px 14px 8px 10px;box-shadow:var(--shadow-sm)}
.locus b{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--brand)}
.locus span{color:var(--muted)}

/* --- 7. The readout panel — the hero's instrument ------------------------ */
.readout{background:var(--surface);border:var(--hair);border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);overflow:hidden}
.readout__bar{display:flex;align-items:center;gap:var(--s3);padding:12px var(--s5);
  border-bottom:var(--hair);background:var(--sunk)}
.readout__bar span{font:600 12px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted)}
.readout__bar .live{margin-left:auto;color:var(--ink);font-weight:600}
.readout__body{padding:var(--s5);background:var(--sunk)}
.readout__rows{display:grid;gap:var(--s2)}
.rowitem{display:grid;grid-template-columns:22px minmax(0,1fr) auto;align-items:center;
  gap:var(--s3);padding:11px var(--s4);border:var(--hair);border-radius:var(--radius);
  background:var(--surface)}
.rowitem__k{width:22px;height:22px;border-radius:5px;background:var(--ink);color:var(--paper);
  font:600 11px/22px var(--sans);text-align:center;flex:none}
.rowitem__n{font:500 14.5px/1.3 var(--sans);color:var(--ink)}
.rowitem__v{font:500 13px/1 var(--sans);color:var(--muted);white-space:nowrap}
.rowitem__v[data-cadence="weekly"]{color:var(--brand)}
.readout__foot{display:flex;align-items:baseline;gap:var(--s3);padding:var(--s4) var(--s5);
  border-top:var(--hair);background:var(--sunk)}
.readout__foot b{font:700 16px/1 var(--sans);color:var(--ink)}
.readout__foot span{font:400 13px/1.45 var(--sans);color:var(--ink-2)}

/* --- 8. Figures ---------------------------------------------------------- */
.figures{display:grid;gap:0;grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),1fr));
  border-top:2px solid var(--ink)}
.figure{padding:var(--s5) var(--s5) var(--s5) 0;border-top:0}
.figure+.figure{border-left:var(--hair);padding-left:var(--s5)}
@media (max-width:719px){
  .figures{grid-template-columns:1fr}
  .figure+.figure{border-left:0;border-top:var(--hair);padding-left:0}
}
.figure__v{display:block;font:700 clamp(36px,4.2vw,50px)/1 var(--sans);
  letter-spacing:-.035em;color:var(--figure);margin-bottom:var(--s3);
  font-variant-numeric:lining-nums tabular-nums}
.figure__u{display:block;font:600 12.5px/1.3 var(--sans);letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink);margin-bottom:var(--s3)}
.figure__c{font:400 14.5px/1.5 var(--sans);color:var(--ink-2);margin:0}

/* --- 9. The extractive answer ------------------------------------------- */
/* Every section opens with a ~40-word answer. It is the thing an assistant lifts,
   so it is set apart from the prose that follows rather than buried in it. */
.answer{font:500 clamp(17px,1.35vw,19px)/1.54 var(--sans);color:var(--ink);
  letter-spacing:-.012em;margin:0 0 var(--s5);padding-left:var(--s5);
  border-left:2px solid var(--rule);max-width:44em}
.sechead__top .answer{margin-bottom:0}

/* --- 10. Cards ----------------------------------------------------------- */
.cards{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr))}
.card{background:var(--surface);border:var(--hair);border-radius:var(--radius);
  padding:var(--s5);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:var(--s3)}
.card h3{font-size:17px;line-height:1.3}
.card p{font-size:15.5px;line-height:1.58;color:var(--ink-2);margin:0}
.card__k{font:600 12px/1 var(--sans);letter-spacing:.06em;color:var(--muted);
  text-transform:uppercase}

/* --- 11. Steps ----------------------------------------------------------- */
/* Numbering is earned here: audit -> repair -> configure -> monitor is a real
   sequence, and the connecting rule encodes that it runs in order. */
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0;counter-reset:step}
.step{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--s5);
  padding-bottom:var(--s6);position:relative}
.step:last-child{padding-bottom:0}
.step__n{counter-increment:step;position:relative;z-index:1;
  width:38px;height:38px;border-radius:50%;flex:none;
  background:var(--surface);border:1.5px solid var(--ink);color:var(--ink);
  font:700 14px/35px var(--sans);text-align:center}
.step__n::before{content:counter(step,decimal-leading-zero)}
.step:not(:last-child)::before{content:"";position:absolute;left:18.5px;top:38px;bottom:8px;
  width:1px;background:var(--border-strong)}
.step h3{margin-bottom:var(--s3)}
.step p{font-size:16px;color:var(--ink-2);margin:0}
.step__meta{font:600 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin-bottom:var(--s2);display:block}
@media (min-width:760px){
  .steps--inline{grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:var(--s5)}
  .steps--inline .step{grid-template-columns:minmax(0,1fr);gap:var(--s4);padding-bottom:0}
  .steps--inline .step:not(:last-child)::before{left:0;right:0;top:18.5px;bottom:auto;
    width:auto;height:1px;transform:translateX(38px)}
}

/* --- 12. Lists ----------------------------------------------------------- */
.deflist{list-style:none;margin:0;padding:0;display:grid;gap:0}
.deflist li{padding:var(--s4) 0;border-top:var(--hair);display:grid;gap:var(--s2)}
.deflist li:first-child{border-top:0;padding-top:0}
.deflist b{font:600 15px/1.4 var(--sans);color:var(--ink);letter-spacing:-.01em}
.deflist p,.deflist span{font-size:16px;color:var(--ink-2);margin:0;line-height:1.58}
.bullets{margin:0;padding-left:1.15em}
.bullets li{margin-bottom:var(--s3);color:var(--ink-2)}
.bullets li::marker{color:var(--faint)}

/* --- 13. Tables ---------------------------------------------------------- */
.table-wrap{overflow-x:auto;border:var(--hair);border-radius:var(--radius);background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:560px;
  font:400 15px/1.5 var(--sans);font-variant-numeric:lining-nums tabular-nums}
thead th{text-align:left;font:600 12.5px/1.35 var(--sans);letter-spacing:.05em;
  text-transform:uppercase;color:var(--muted);padding:var(--s4) var(--s4);
  border-bottom:1px solid var(--border-strong);white-space:nowrap;vertical-align:bottom}
tbody td{padding:var(--s4);border-top:var(--hair);color:var(--ink-2);vertical-align:top}
tbody tr:hover td{background:var(--sunk)}
tbody td:first-child{color:var(--ink);font-weight:500}

/* --- 14. FAQ ------------------------------------------------------------- */
.faq{display:grid;gap:0;border-top:var(--hair)}
.faq details{border-bottom:var(--hair)}
.faq summary{display:flex;gap:var(--s4);align-items:flex-start;justify-content:space-between;
  cursor:pointer;list-style:none;padding:var(--s5) 0;
  font:600 17px/1.42 var(--sans);letter-spacing:-.013em;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:11px;height:11px;margin-top:6px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .18s}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq summary:hover{color:var(--brand)}
.faq__a{padding:0 var(--s6) var(--s5) 0;color:var(--ink-2);font-size:16.5px;max-width:var(--measure)}
.faq__a p{margin-bottom:var(--s3)}

/* --- 15. Inverted CTA band ---------------------------------------------- */
.invert{background:var(--dark);color:var(--dark-ink);border:0}
.invert h2,.invert h3{color:var(--dark-ink)}
.invert p{color:var(--dark-muted)}
.invert .eyebrow{color:var(--dark-muted)}
.invert a:not(.btn){color:var(--brand-ink)}
.invert .btn--primary{background:var(--brand);color:var(--on-brand)}
.invert .btn--primary:hover{background:var(--brand-ink);color:var(--on-brand)}
.invert .btn--ghost{background:transparent;color:var(--dark-ink);border-color:var(--dark-border)}
.invert .btn--ghost:hover{border-color:var(--dark-ink)}
.invert .figure__c{color:var(--dark-muted)}
.invert .figures{border-top-color:var(--dark-border)}
.invert .figure+.figure{border-left-color:var(--dark-border)}
.cta-band{display:grid;gap:var(--s6);align-items:center;
  grid-template-columns:minmax(0,1fr)}
@media (min-width:860px){.cta-band{grid-template-columns:minmax(0,1fr) auto;gap:clamp(40px,5vw,72px)}}
.cta-band h2{max-width:18ch;margin-bottom:var(--s4)}
.cta-band p{max-width:46ch;margin:0}

/* --- 16. Sources --------------------------------------------------------- */
.sources{font-size:15px;color:var(--ink-2);border-top:var(--hair);padding-top:var(--s5)}
.sources h2{font-size:13px;font-family:var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);font-weight:600;margin-bottom:var(--s4)}
.sources li{margin-bottom:var(--s3)}

/* --- 17. Forms ----------------------------------------------------------- */
/* Forms are visible on /contact/ only. Everywhere else the same markup is
   carried inside a <dialog> opened by a CTA. */
.field{display:grid;gap:var(--s2);margin-bottom:var(--s4)}
.field label{font:600 14px/1.3 var(--sans);color:var(--ink)}
.field .hint{font-weight:400;color:var(--faint)}
input,select,textarea{
  font:400 16px/1.4 var(--sans);color:var(--ink);background:var(--surface);
  border:1px solid var(--border-strong);border-radius:var(--radius);
  padding:12px var(--s4);width:100%;transition:border-color .15s,box-shadow .15s}
textarea{min-height:110px;resize:vertical}
input:focus,select:focus,textarea:focus{outline:0;border-color:var(--brand);
  box-shadow:0 0 0 3px var(--brand-wash)}
input::placeholder{color:var(--faint)}
.grid2{display:grid;gap:var(--s4);grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){.grid2{grid-template-columns:1fr 1fr}}
.formcard{background:var(--surface);border:var(--hair);border-radius:var(--radius-lg);
  padding:clamp(20px,3vw,32px);box-shadow:var(--shadow)}
.formcard h2{font-size:22px;margin-bottom:var(--s2)}
.formcard>p{font-size:15.5px;color:var(--ink-2);margin-bottom:var(--s5)}
.trust{font:400 13.5px/1.55 var(--sans);color:var(--muted);margin:var(--s4) 0 0}

/* --- 18. Dialog ---------------------------------------------------------- */
dialog.modal{width:min(560px,calc(100vw - 32px));padding:0;border:var(--hair);
  border-radius:var(--radius-lg);background:var(--surface);color:var(--ink);
  box-shadow:var(--shadow-lg);margin:auto}
dialog.modal::backdrop{background:rgba(20,32,29,.52);backdrop-filter:blur(3px)}
.modal__head{display:flex;align-items:flex-start;gap:var(--s4);
  padding:var(--s5) var(--s5) 0}
.modal__head h2{font-size:21px;margin:0}
.modal__head p{font-size:15px;color:var(--muted);margin:var(--s2) 0 0}
.modal__x{margin-left:auto;flex:none;background:none;border:var(--hair);border-radius:var(--radius);
  width:34px;height:34px;font-size:18px;line-height:1;color:var(--muted);cursor:pointer}
.modal__x:hover{color:var(--ink);border-color:var(--border-strong)}
.modal form{padding:var(--s5)}
/* The form must be reachable with JavaScript off, so the dialog is never the only path. */
.nojs-note{font:400 13px/1.5 var(--sans);color:var(--muted);margin:var(--s3) 0 0}

/* --- 19. Footer ---------------------------------------------------------- */
.site-foot{background:var(--dark);color:var(--dark-muted);padding-block:var(--s8) var(--s6);
  font-family:var(--sans);font-size:15px}
.foot-grid{display:grid;gap:var(--s7);grid-template-columns:repeat(auto-fit,minmax(min(100%,170px),1fr));
  padding-bottom:var(--s7);border-bottom:1px solid var(--dark-border)}
.site-foot h2{font:600 12px/1 var(--sans);letter-spacing:.07em;text-transform:uppercase;
  color:var(--dark-muted);margin:0 0 var(--s4)}
.site-foot ul{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.site-foot a{color:var(--dark-ink);text-decoration:none;font-size:15px}
.site-foot a:hover{color:var(--brand-ink);text-decoration:underline}
.colophon{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);align-items:baseline;
  padding-top:var(--s6);font-size:14px;color:var(--dark-muted);margin:0}
.colophon strong{color:var(--dark-ink);font-weight:600}
.colophon a{color:var(--dark-ink)}

/* --- 21. Filter and compare controls ------------------------------------ */
/* Zero JavaScript. Every state's sentence ships in the raw HTML and is revealed
   by :has(), so the control reduces the set for a reader AND stays fully readable
   to an extractor that never runs a script. */
.control{background:var(--surface);border:var(--hair);border-radius:var(--radius-lg);
  padding:var(--s5);box-shadow:var(--shadow-sm);margin-bottom:var(--s6)}
.control fieldset{border:0;margin:0;padding:0}
.control legend{font:600 12.5px/1 var(--sans);letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted);padding:0;margin-bottom:var(--s4)}
.opts{display:flex;flex-wrap:wrap;gap:var(--s2)}
.opts input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.opts label{display:inline-flex;align-items:center;gap:var(--s2);cursor:pointer;
  font:500 14px/1 var(--sans);color:var(--ink-2);background:var(--surface);
  border:1px solid var(--border-strong);border-radius:100px;padding:9px 15px;
  transition:background .14s,border-color .14s,color .14s}
.opts label:hover{border-color:var(--ink)}
.opts input:checked+label{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.opts input:focus-visible+label{outline:2px solid var(--brand);outline-offset:3px}
.states{margin:var(--s4) 0 0;min-height:1.5em}
.states>p{display:none;margin:0;font:600 15px/1.5 var(--sans);color:var(--ink)}
.control-note{font:400 13.5px/1.5 var(--sans);color:var(--muted);margin:var(--s3) 0 0}

/* Compare: three priced units. Deselecting everything restores the full set
   rather than emptying the page. */
.cmp:has(#u1:checked):has(#u2:checked):has(#u3:checked) .st-111,
.cmp:has(#u1:checked):has(#u2:checked):not(:has(#u3:checked)) .st-110,
.cmp:has(#u1:checked):not(:has(#u2:checked)):has(#u3:checked) .st-101,
.cmp:not(:has(#u1:checked)):has(#u2:checked):has(#u3:checked) .st-011,
.cmp:has(#u1:checked):not(:has(#u2:checked)):not(:has(#u3:checked)) .st-100,
.cmp:not(:has(#u1:checked)):has(#u2:checked):not(:has(#u3:checked)) .st-010,
.cmp:not(:has(#u1:checked)):not(:has(#u2:checked)):has(#u3:checked) .st-001,
.cmp:not(:has(.opts input:checked)) .st-000{display:block}
.cmp:has(.opts input:checked):not(:has(#u1:checked)) [data-unit="1"],
.cmp:has(.opts input:checked):not(:has(#u2:checked)) [data-unit="2"],
.cmp:has(.opts input:checked):not(:has(#u3:checked)) [data-unit="3"]{display:none}

/* Filter: one rule per option. Selecting an option hides every record outside it. */
.flt .states>p{display:none}
.flt:not(:has(.opts input:checked)) .st-all,
.flt:has(#f-all:checked) .st-all{display:block}

/* --- 20. Utilities ------------------------------------------------------- */
.lede{font-size:clamp(17px,1.4vw,19px);color:var(--ink-2);max-width:42em}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.stack>*+*{margin-top:var(--s5)}
.mt0{margin-top:0}

/* The CTA is a one-button form (see CtaButton.astro) — it must lay out as a button. */
.cta-form{display:contents}
.btn-row .cta-form{display:block}

/* --- 22. Breadcrumb ------------------------------------------------------ */
/* Orientation in words. A reader landing from an assistant's citation needs to
   know which part of the site they are in before they read the headline. */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2);
  font:500 14px/1.4 var(--sans);color:var(--muted);margin:0 0 var(--s4)}
.crumbs a{color:var(--muted);text-decoration:none}
.crumbs a:hover{color:var(--brand);text-decoration:underline}
.crumbs span[aria-hidden]{color:var(--faint)}
.crumbs>span:last-child{color:var(--ink);font-weight:600}

/* --- 23. Hub listings ---------------------------------------------------- */
.hublist{list-style:none;margin:0;padding:0;display:grid;gap:0;max-width:min(100%,820px)}
.hublist li{padding:var(--s5) 0;border-top:var(--hair)}
.hublist li:first-child{border-top:0;padding-top:0}
.hublist a{text-decoration:none;display:inline-block}
.hublist h3{margin:0 0 var(--s2);color:var(--ink);font-size:19px}
.hublist a:hover h3{color:var(--brand)}
.hublist p{margin:0;font-size:16px;line-height:1.55;color:var(--ink-2);max-width:62ch}
.hubgroup+.hubgroup{margin-top:var(--s8)}
.hubgroup>.eyebrow{margin-bottom:var(--s2)}
.hubgroup>h2{margin-bottom:var(--s3)}
.hubgroup>p.lede{margin-bottom:var(--s5)}

/* --- 24. Page body ------------------------------------------------------- */
/* One column. Prose was previously capped at 34em inside a 1200px container, which
   left half the desktop viewport empty down the whole page; the column is now sized
   to the measure and centred, so the remaining space falls evenly on both sides
   instead of pooling on the right. */
.pagebody{width:100%;max-width:768px;margin-inline:auto}
.pagebody__main{min-width:0}
.pagebody__main .sec{padding-block:clamp(40px,4.4vw,64px)}
.pagebody__main .flow>*{max-width:none}
.pagebody__main .prose{max-width:none}
.pagebody__main .sechead h2{max-width:22ch}
@media (min-width:880px){
  .pagebody__main .sechead__top{grid-template-columns:minmax(0,1fr);gap:var(--s4)}
}

/* Offer block. Sits once inside the article, between the opening sections and the
   closing call to action. */
.offerbar{display:grid;gap:var(--s5);margin:clamp(32px,3.6vw,48px) 0;
  background:var(--surface);border:1px solid var(--border-strong);
  border-radius:var(--radius-lg);padding:var(--s5);box-shadow:var(--shadow-sm)}
@media (min-width:720px){
  .offerbar{grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto;align-items:center;
    gap:clamp(24px,3vw,40px);padding:var(--s5) var(--s6)}
}
.offerbar__tag{font:600 12px/1 var(--sans);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);margin:0 0 var(--s2)}
.offerbar__price{margin:0;font-family:var(--sans);display:grid;gap:2px}
.offerbar__price strong{font-size:34px;line-height:1;letter-spacing:-.035em;color:var(--ink)}
.offerbar__price span{font-size:13.5px;color:var(--ink-2)}
.offerbar__list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.offerbar__list li{font:400 14.5px/1.4 var(--sans);color:var(--ink-2);
  display:grid;grid-template-columns:26px minmax(0,1fr);gap:var(--s2);align-items:baseline}
.offerbar__list b{font:700 15px/1.4 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.offerbar__act{display:grid;gap:var(--s2);justify-items:start}
@media (min-width:720px){.offerbar__act{justify-items:center}}
.offerbar__call{margin:0;font:400 13.5px/1.4 var(--sans);color:var(--muted)}

/* --- 25. Mobile conversion bar ------------------------------------------ */
.stickycta{display:none}
@media (max-width:1039px){
  .stickycta{display:block;position:fixed;left:0;right:0;bottom:0;z-index:90;
    background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(10px);
    border-top:1px solid var(--border-strong);
    padding:10px clamp(16px,4vw,32px) calc(10px + env(safe-area-inset-bottom,0px))}
  .stickycta__in{display:flex;align-items:center;gap:var(--s3);
    max-width:var(--container);margin-inline:auto}
  .stickycta__txt{display:grid;margin-right:auto;min-width:0}
  .stickycta__txt b{font:700 15px/1.2 var(--sans);color:var(--ink)}
  .stickycta__txt span{font:400 12.5px/1.2 var(--sans);color:var(--muted)}
  body{padding-bottom:68px}
}

/* A section marked wide breaks out of the main column and spans the rail too, so a
   card grid gets three columns instead of being squeezed into a reading measure. */
@media (min-width:1040px){
  /* A card grid escapes the reading column out to the container width. */
  .pagebody__main .sec--wide{width:min(100vw - 2 * clamp(16px,4vw,32px), var(--container));
    margin-inline:calc((768px - min(100vw - 2 * clamp(16px,4vw,32px), var(--container))) / 2)}
}
.pagebody__main .sec--wide .cards{grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
@media (min-width:1040px){
  /* Six services divide 3+3 rather than 4+2, so no row is left half-empty. */
  .pagebody__main .sec--wide .cards{grid-template-columns:repeat(3,minmax(0,1fr))}
}
.card{gap:var(--s2)}
.card h3{font-size:17.5px;letter-spacing:-.015em}
.card p{font-size:15px}