/* acquiror.ai shared stylesheet. Plain CSS on the shared brand tokens; no framework.
   The :root block between the markers is materialized from brand/v2/tokens.css by
   infra/sync-brand-into-site.sh. Do not edit it here. */
/* brand:tokens:start */
:root{
  /* palette */
  --ink:#06101F;
  --navy:#0A1A33;
  --surface:#0F2140;
  --surface-2:#132A4E;
  --hairline:#1E3960;
  --emerald:#18C98C;
  --teal:#2FE0C0;
  --gold:#D7B981;
  --cloud:#F4F7FB;
  --muted:#9FB4CC;
  --muted-2:#6E83A0;
  /* accessible green TEXT on light/tonal surfaces.
     --emerald (#18C98C) is the accent green for dark surfaces and FAILS WCAG AA as
     text on light (~2.0:1 on --cloud). Use --on-tonal for emerald-colored text on a
     light surface: --emerald-700 #0B7A52 = 4.99:1 on --cloud, 5.36:1 on white (AA). */
  --emerald-700:#0B7A52;
  --on-tonal:var(--emerald-700);
  /* shape + motion */
  --radius:16px;
  --maxw:1120px;
  --ease:cubic-bezier(.16,1,.3,1);

  /* namespaced aliases (use these in new/product code) */
  --acq-ink:var(--ink);
  --acq-navy:var(--navy);
  --acq-surface:var(--surface);
  --acq-surface-2:var(--surface-2);
  --acq-hairline:var(--hairline);
  --acq-emerald:var(--emerald);
  --acq-emerald-700:var(--emerald-700);
  --acq-on-tonal:var(--on-tonal);
  --acq-teal:var(--teal);
  --acq-gold:var(--gold);
  --acq-cloud:var(--cloud);
  --acq-muted:var(--muted);
  --acq-muted-2:var(--muted-2);
  --acq-radius:var(--radius);
  --acq-maxw:var(--maxw);
  --acq-ease:var(--ease);

  /* type */
  --acq-font-display:'Space Grotesk',system-ui,-apple-system,sans-serif;
  --acq-font-body:'Inter',system-ui,-apple-system,sans-serif;
}
/* brand:tokens:end */

/* The brand fonts, served from this site (#156). Space Grotesk and Inter, OFL, the variable WOFF2
   files Google Fonts serves, copied unchanged from brand/v2/fonts/. Latin and Latin Extended
   subsets; font-display:swap shows the fallback at once and swaps the face in when it arrives. */
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/assets/space-grotesk-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(/assets/space-grotesk-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/assets/inter-latin.woff2) format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Inter';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/assets/inter-latin-ext.woff2) format('woff2');
  unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* Semantic tokens. The brand bundle is a palette; these map it per colour scheme.
   Muted text uses the AA-corrected shades the product uses (the brand --muted-2
   fails WCAG AA as text): #5b6d8a on light, #8093ab on dark. */
:root{
  --bg:var(--cloud);
  --bg-raised:#fff;
  --fg:var(--ink);
  --fg-2:#51617a;
  --fg-muted:#5b6d8a;
  --rule:#cbd5e6;
  --rule-strong:var(--ink);
  --accent:var(--emerald-700);
  --btn-bg:var(--emerald);
  --btn-fg:var(--ink);
  --focus:var(--focus-ring,#0B7A52);
  --gutter:16px;
  --step--1:.875rem;
  --step-0:1rem;
  --step-1:1.1875rem;
  --step-2:1.5rem;
  --step-3:clamp(1.625rem,1.2rem + 1.9vw,2.375rem);
  --step-4:clamp(2.125rem,1.15rem + 4.3vw,4.125rem);
}
@media (prefers-color-scheme:dark){
  :root{
    --bg:var(--ink);
    --bg-raised:var(--navy);
    --fg:var(--cloud);
    --fg-2:var(--muted);
    --fg-muted:#8093ab;
    --rule:var(--hairline);
    --rule-strong:var(--cloud);
    --accent:var(--emerald);
    --focus:var(--focus-ring,#2FE0C0);
  }
}
@media (min-width:700px){:root{--gutter:32px}}

/* Depth, bands, glow and motion. Components compose these; nothing below defines its own shadow,
   gradient or duration. Champagne (--figure) is for numerals on a dark band only: on a light
   surface it is 1.75:1. */
:root{
  --elev-1:0 1px 2px rgb(6 16 31 / .06),0 1px 1px rgb(6 16 31 / .04);
  --elev-2:0 2px 4px rgb(6 16 31 / .05),0 10px 28px rgb(10 26 51 / .09);
  --elev-3:0 4px 10px rgb(6 16 31 / .06),0 24px 56px rgb(10 26 51 / .16);
  --tint:#EDF2F9;
  --tint-accent:#E3F5EE;
  --hover-wash:rgb(6 16 31 / .05);
  --band-bg:var(--ink);
  --band-fg:var(--cloud);
  --band-fg-2:var(--muted);
  --band-rule:var(--hairline);
  --figure:var(--gold);
  --grad-cta:linear-gradient(135deg,var(--emerald),var(--teal));
  --glow:radial-gradient(60% 55% at 78% 0%,rgb(47 224 192 / .20),transparent 70%),radial-gradient(55% 60% at 8% 100%,rgb(24 201 140 / .13),transparent 70%);
  --dur-1:120ms;
  --dur-2:240ms;
  --dur-3:640ms;
}
@media (prefers-color-scheme:dark){
  :root{
    --elev-1:0 1px 2px rgb(0 0 0 / .35),inset 0 1px 0 rgb(159 180 204 / .06);
    --elev-2:0 2px 6px rgb(0 0 0 / .35),0 12px 32px rgb(0 0 0 / .35),inset 0 1px 0 rgb(159 180 204 / .08);
    --elev-3:0 4px 12px rgb(0 0 0 / .4),0 28px 64px rgb(0 0 0 / .5),inset 0 1px 0 rgb(159 180 204 / .10);
    --tint:var(--surface);
    --tint-accent:#0E2B36;
    --hover-wash:rgb(159 180 204 / .12);
    --band-bg:var(--navy);
  }
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:var(--acq-font-body);
  font-size:var(--step-0);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3{font-family:var(--acq-font-display);font-weight:600;line-height:1.15;letter-spacing:-.02em;margin:0;text-wrap:balance}
p,ul,ol,dl,dd{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--accent);text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:2px}
[hidden]{display:none !important}

.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}

.skip-link{position:absolute;left:var(--gutter);top:-4rem;z-index:20;background:var(--bg-raised);color:var(--fg);padding:.6rem 1rem;border:2px solid var(--focus)}
.skip-link:focus{top:.5rem}
/* main takes focus only from the skip link and from script (tabindex="-1", never a Tab stop), so it
   draws no ring. Chrome treats focus moved after a key press as :focus-visible, hence plain :focus. */
#main:focus{outline:none}

.staging-note{background:var(--gold);color:var(--ink);font-size:var(--step--1);padding:.5rem var(--gutter);text-align:center}

/* ---------- buttons and links ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:.65rem 1.25rem;
  font:600 var(--step-0)/1.2 var(--acq-font-body);
  border-radius:8px;border:1.5px solid transparent;text-decoration:none;cursor:pointer;
}
/* The primary button is the brand gradient. It is 160% wide so hover can slide it, and ink text is
   8.9:1 on the emerald end and 11.4:1 on the teal end. */
.btn-primary{background:var(--btn-bg) var(--grad-cta) 0 0 / 160% 100%;color:var(--btn-fg);box-shadow:var(--elev-1)}
.btn-primary:hover{background-position:100% 0;box-shadow:var(--elev-2)}
.btn-quiet{background:transparent;color:var(--fg);border-color:var(--fg-muted)}
.btn-quiet:hover{border-color:var(--fg);background:var(--hover-wash)}
.text-link{font-weight:600}
.cta-row{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.cta-micro{margin-top:.875rem;font-size:var(--step--1);color:var(--fg-muted)}
.cta-micro + .cta-micro{margin-top:.25rem}

/* ---------- header ---------- */
/* The header stays in view while the page scrolls. --header-h is its height with the phone menu
   closed; in-page links and other sticky elements offset by it. */
:root{--header-h:60px}
html{scroll-padding-top:calc(var(--header-h) + 1rem)}
.site-header{position:sticky;top:0;z-index:15;border-bottom:1px solid var(--rule);background:var(--bg)}
.site-header-bar{display:flex;align-items:center;gap:1.5rem;min-height:calc(var(--header-h) - 1px);flex-wrap:wrap}
.wordmark{display:inline-flex;align-items:center;gap:.6rem;font:600 1.25rem/1 var(--acq-font-display);letter-spacing:-.02em;color:var(--fg);text-decoration:none;padding-block:.5rem}
.wordmark-mark{display:grid;place-items:center;width:32px;height:32px;border-radius:8px;background:var(--emerald)}
.wordmark-mark svg{display:block}
.site-nav{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;flex:1}
.site-nav-list{display:flex;align-items:center;gap:.25rem}
.site-nav-list > li{position:relative}
.site-nav-list a,.nav-menu > summary{
  display:block;padding:.6rem .75rem;color:var(--fg);text-decoration:none;font-weight:500;font-size:.9375rem;border-radius:6px;
}
.site-nav-list a:hover,.nav-menu > summary:hover{color:var(--accent)}
/* The current page (and the dropdown that holds it): heavier and underlined, not colour alone. */
.site-nav-list a[aria-current="page"],.site-nav-list a.is-current,.nav-menu > summary.is-current{font-weight:600;text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:.45em}
.nav-menu > summary{cursor:pointer;list-style:none}
.nav-menu > summary::-webkit-details-marker{display:none}
.nav-menu > summary::after{content:"";display:inline-block;width:.42em;height:.42em;margin-left:.5em;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-.2em) rotate(45deg)}
.nav-menu[open] > summary::after{transform:translateY(.05em) rotate(-135deg)}
.nav-menu > ul{position:absolute;left:0;top:100%;z-index:10;min-width:16rem;padding:.5rem;background:var(--bg-raised);border:1px solid var(--rule);border-radius:10px;box-shadow:var(--elev-3)}
.site-nav-actions{display:flex;align-items:center;gap:.5rem}
.site-nav-actions .btn{min-height:40px;padding:.5rem 1rem;font-size:.9375rem}
.nav-toggle{display:none}

@media (max-width:899px){
  :root{--header-h:56px}
  .site-header-bar{justify-content:space-between;gap:.75rem;padding-block:.3125rem}
  .site-nav{flex-basis:100%;flex-direction:column;align-items:stretch;gap:.5rem;padding-bottom:.75rem}
  .site-nav-list{flex-direction:column;align-items:stretch;gap:0}
  .nav-menu > ul{position:static;border:0;box-shadow:none;background:transparent;padding:0 0 .25rem .75rem;min-width:0}
  .site-nav-actions{flex-wrap:wrap;padding-top:.5rem;border-top:1px solid var(--rule)}
  .js-nav .nav-toggle{display:inline-flex;align-items:center;min-height:44px;padding:.5rem .9rem;background:transparent;color:var(--fg);border:1.5px solid var(--fg-muted);border-radius:8px;font:600 .9375rem/1 var(--acq-font-body);cursor:pointer}
  .js-nav .site-nav{display:none}
  .js-nav .site-nav.is-open{display:flex}
  /* An open menu taller than the screen scrolls inside the header instead of being cut off. */
  .site-nav{max-height:calc(100dvh - var(--header-h) - 1.5rem);overflow-y:auto;overscroll-behavior:contain}
}

.breadcrumbs{padding-block:.5rem;font-size:var(--step--1)}
.breadcrumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:0 .5rem}
/* In-page navigation links (breadcrumbs, "On this page" lists) are 32px targets or larger (#156);
   the padding replaces spacing the list used to carry, so the layout keeps its density. */
.breadcrumbs li{display:flex;align-items:center;min-height:32px}
.breadcrumbs a{display:inline-flex;align-items:center;min-width:32px;min-height:32px;padding-block:.25rem}
.breadcrumbs li + li::before{content:"›";margin-right:.5rem;color:var(--fg-muted)}

/* ---------- page sections ---------- */
.section{padding-block:clamp(3.5rem,8vw,6.5rem)}
/* A raised section is a tinted plane, so it reads as a different layer from the page. */
.section-raised{background:var(--tint);border-block:1px solid var(--rule)}
.section-raised .formula,.section-raised .shot img{box-shadow:var(--elev-1)}
.section h2{font-size:var(--step-3);max-width:24ch}
/* A heading's subtitle: the aside sits on its own line under the title. */
.h-sub{display:block;margin-top:.4rem;font:400 max(1rem,.6em)/1.35 var(--acq-font-body);letter-spacing:0;color:var(--fg-2);text-wrap:pretty}
.h-sub::first-letter{text-transform:uppercase}
.section h2 + *{margin-top:2rem}
.prose-block p{max-width:66ch;color:var(--fg-2);font-size:var(--step-1);line-height:1.6}
.prose-block p + p{margin-top:1.1rem}
.lede{max-width:66ch;color:var(--fg-2);font-size:var(--step-1)}

.hero{padding-block:clamp(3.5rem,9vw,7.5rem) clamp(3rem,7vw,5.5rem)}
.hero-audience{font-weight:600;color:var(--accent);margin-bottom:1.25rem}
.hero h1{font-size:var(--step-4);line-height:1.04;letter-spacing:-.035em;max-width:21ch}
.hero-sub{margin-top:1.75rem;max-width:60ch;font-size:clamp(1.0625rem,1rem + .4vw,1.3125rem);color:var(--fg-2);line-height:1.55}

/* Home hero: an ink band with the glow, copy on the left and the triangulation card on the right.
   The band re-points the text tokens the way .final-cta does, so every component inside inherits
   light-on-dark without its own rules. */
.hero-lit,.band-ink{
  --fg:var(--cloud);--fg-2:var(--muted);--fg-muted:#8093ab;--rule:var(--hairline);--hover-wash:rgb(159 180 204 / .12);--accent:var(--emerald);--focus:var(--focus-ring,#2FE0C0);
  background:var(--band-bg);color:var(--fg);
}
.hero-lit{
  background:var(--glow),var(--band-bg);
  padding-block:clamp(2.5rem,5vw,4.5rem) clamp(3rem,6vw,5rem);
}
.hero-lit h1{font-size:clamp(2.125rem,1.1rem + 2.7vw,3.25rem);max-width:23ch}
.hero-lit .hero-sub{max-width:54ch}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(2rem,5vw,4.5rem);align-items:center}
@media (max-width:959px){.hero-grid{grid-template-columns:minmax(0,1fr)}}
.shot-stage{padding-block:0 clamp(2.5rem,5vw,4rem);margin-top:calc(clamp(1.5rem,3vw,2.5rem) * -1)}
.shot-stage .shot{margin:0;position:relative}
.shot-stage .shot img{box-shadow:var(--elev-3)}

.tri{margin:0;max-width:31rem;justify-self:end;width:100%}
@media (max-width:959px){.tri{justify-self:start}}
.tri-card{padding:1.5rem 1.5rem 1.25rem;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:var(--elev-3)}
.tri-title{font:600 var(--step-1)/1.25 var(--acq-font-display);letter-spacing:-.015em;color:var(--cloud)}
.tri-chart{--off:9rem;position:relative;display:grid;gap:1.35rem;margin-top:1.5rem;padding-bottom:2.5rem}
.tri-row{position:relative;z-index:1;display:grid;grid-template-columns:8.25rem minmax(0,1fr);column-gap:.75rem;align-items:center}
.tri-label{font-size:.8125rem;line-height:1.3;color:var(--muted)}
.tri-track{position:relative;display:block;height:.75rem;border-radius:999px;background:rgb(159 180 204 / .14)}
.tri-bar{position:absolute;top:0;bottom:0;border-radius:999px;background:var(--grad-cta);transform-origin:left center}
.tri-row:nth-of-type(1) .tri-bar{left:26%;width:50%}
.tri-row:nth-of-type(2) .tri-bar{left:40%;width:46%}
.tri-row:nth-of-type(3) .tri-bar{left:14%;width:44%}
/* The overlap of the three bars (40% to 58%) is the concluded range. */
.tri-band{position:absolute;z-index:0;top:-.6rem;bottom:2.1rem;left:calc(var(--off) + (100% - var(--off)) * .40);width:calc((100% - var(--off)) * .18);border:1.5px solid var(--figure);border-radius:10px;background:rgb(215 185 129 / .10);transform-origin:center bottom}
.tri-band-label{position:absolute;right:0;top:100%;margin-top:.45rem;white-space:nowrap;font-size:.8125rem;font-weight:600;color:var(--figure)}
.tri-result{margin-top:.25rem;padding-top:1rem;border-top:1px solid var(--hairline);display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;color:var(--muted);font-size:var(--step--1)}
.tri-stat{font:600 clamp(1.75rem,1.2rem + 1.4vw,2.25rem)/1 var(--acq-font-display);letter-spacing:-.03em;color:var(--figure);font-variant-numeric:tabular-nums}
.tri figcaption{margin-top:.6rem;font-size:var(--step--1);color:var(--fg-muted)}

/* Proof bar: four facts set as one ruled ledger row. */
/* Home bands. Ink: re-pointed tokens above, champagne figures. Emerald: ink text only (ink on emerald
   is about 9:1; the accent, focus and link colours are re-pointed to ink there because emerald-700
   on emerald fails). Tint and tint-accent are quiet planes that lift white or mint tiles. */
.band-emerald{
  --fg:var(--ink);--fg-2:var(--ink);--fg-muted:var(--ink);--rule:rgb(6 16 31 / .32);--accent:var(--ink);--focus:var(--ink);
  background:var(--grad-cta);color:var(--ink);
}
.band-tint{background:var(--tint);border-block:1px solid var(--rule)}
.band-tint-accent{background:var(--tint-accent);border-block:1px solid var(--rule)}
.fig{font-family:var(--acq-font-display);font-weight:600;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.band-ink .fig{color:var(--figure)}

.proof{padding-block:clamp(2rem,4.5vw,3.5rem)}
.proof-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.proof-list li{padding:.25rem 1.25rem .25rem 0;font-size:.9375rem;line-height:1.45}
.proof-list li + li{padding-left:1.5rem;border-left:1px solid var(--rule)}
.proof-list strong{display:block;margin-bottom:.35rem;font:600 var(--step-1)/1.15 var(--acq-font-display);letter-spacing:-.015em}
.proof-list .fig{font-size:clamp(2.5rem,1.6rem + 2.6vw,3.75rem);line-height:1}

/* The deal loop is a real sequence, so it is numbered. */
.loop{counter-reset:step;border-bottom:1px solid var(--rule)}
.loop > li{
  counter-increment:step;
  display:grid;grid-template-columns:4.5rem minmax(0,1fr) minmax(0,1.7fr);column-gap:2rem;
  grid-template-areas:"n title copy" "n title links";
  padding-block:1.75rem;border-top:1px solid var(--rule);
}
.loop > li::before{content:counter(step);grid-area:n;font:500 clamp(2.5rem,2rem + 1.6vw,3.25rem)/1 var(--acq-font-display);letter-spacing:-.04em;color:var(--figure);font-variant-numeric:tabular-nums}
@media (min-width:1025px){
  .loop > li{grid-template-columns:7rem minmax(0,1fr) minmax(0,1.7fr);padding-block:2.25rem}
  .loop > li::before{font-size:5.25rem;align-self:start;position:sticky;top:calc(var(--header-h) + 1.5rem)}
}
.loop h3{grid-area:title;font-size:var(--step-2)}
.loop p{grid-area:copy;color:var(--fg-2);max-width:62ch}
.loop .loop-links{grid-area:links;margin-top:.75rem;display:flex;flex-wrap:wrap;gap:.25rem 1.25rem;font-weight:600;font-size:.9375rem}
.loop .loop-links span{color:var(--fg-muted);font-weight:500}

.pillars{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.25rem}
.pillars li{padding:1.25rem 1.25rem 1.5rem;background:var(--tint-accent);border:1px solid var(--rule);border-top:3px solid var(--accent);border-radius:var(--radius);box-shadow:var(--elev-1)}
.pillars h2{font-size:var(--step-1);max-width:none;letter-spacing:-.015em}
.pillars h2 + p{margin-top:.75rem;color:var(--fg-2);font-size:.9375rem}

.modules-fold{margin-top:2rem}
.modules-fold summary{cursor:pointer;padding:.85rem 1.1rem;background:var(--bg-raised);border:1px solid var(--rule);border-radius:10px;font:600 var(--step-0)/1.3 var(--acq-font-display);box-shadow:var(--elev-1)}
.modules-fold[open] summary{margin-bottom:1.25rem}
.modules{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:3rem;border-bottom:1px solid var(--rule)}
.modules > div{display:grid;grid-template-columns:10.5rem minmax(0,1fr);gap:1rem;padding-block:1rem;border-top:1px solid var(--rule)}
.modules dt{font:600 var(--step-0)/1.35 var(--acq-font-display)}
.modules dt a{color:var(--fg)}
.modules dt a:hover{color:var(--accent)}
/* A module without its own page yet is plain text: lighter, so it does not read as a dead link. */
.modules dt span{font-weight:500;color:var(--fg-2)}
.modules dd{color:var(--fg-2);font-size:.9375rem;line-height:1.5}

.audience-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.25rem}
.audience-list li{padding:1.25rem 1.5rem 1.4rem;background:var(--bg-raised);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--elev-1)}
.audience-list li:first-child{grid-column:1 / -1;box-shadow:var(--elev-2);border-top:3px solid var(--accent)}
.audience-list h3{font-size:var(--step-1)}
.audience-list li:first-child h3{font-size:var(--step-2)}
.audience-list h3 a{color:var(--fg)}
.audience-list h3 a:hover{color:var(--accent)}
.audience-list p{margin-top:.4rem;color:var(--fg-2);font-size:.9375rem;max-width:60ch}

.price-anchor{margin-top:2rem;max-width:none;font-size:var(--step-1);color:var(--fg-2)}
.price-anchor .fig{display:block;margin-top:.25rem;font-size:clamp(2.25rem,1.2rem + 4vw,4.5rem);line-height:1.05;color:var(--figure)}
.price-anchor + .lede{margin-top:1rem}
.plan-teasers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-block:2rem 1.5rem}
.plan-teasers li{padding:1.1rem 1.25rem 1.25rem;background:var(--surface);border:1px solid var(--hairline);border-radius:var(--radius);box-shadow:var(--elev-2)}
.plan-teasers strong{display:block;font:600 var(--step-1)/1.2 var(--acq-font-display);letter-spacing:-.015em;color:var(--cloud)}
.plan-teasers span{display:block;margin-top:.35rem;color:var(--muted);font-variant-numeric:tabular-nums}

.security-strip{padding-block:2rem}
.security-strip ul{display:flex;flex-wrap:wrap;gap:.5rem 0;font-size:.9375rem;color:var(--fg-2)}
.security-strip li{padding-right:1.25rem;margin-right:1.25rem;border-right:1px solid var(--rule)}
.security-strip li:last-child{border-right:0;margin-right:0;padding-right:0}
.security-strip p{margin-top:1rem}

.objection{border-top:1px solid var(--rule);max-width:66ch}
.objection:last-of-type{border-bottom:1px solid var(--rule)}
.objection summary{cursor:pointer;padding-block:1.1rem;font:600 var(--step-1)/1.3 var(--acq-font-display)}
.objection p{padding-bottom:1.25rem;font-size:var(--step-0)}
.faq-more{margin-top:1.25rem}
.faq-more a{display:inline-block;min-height:32px;padding-block:.25rem}

/* ---------- pricing ---------- */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
/* Inner-page header: the same ink band and glow as the home hero, shorter. Legal pages do not use it. */
.hero-compact{
  --fg:var(--cloud);--fg-2:var(--muted);--fg-muted:#8093ab;--rule:var(--hairline);--hover-wash:rgb(159 180 204 / .12);--accent:var(--emerald);--focus:var(--focus-ring,#2FE0C0);
  background:var(--glow),var(--band-bg);color:var(--fg);
  padding-block:clamp(2rem,5vw,4rem) clamp(2rem,4.5vw,3.25rem);
}
.hero-compact + .section,.hero-compact + .calc,.hero-compact + .contact{padding-top:clamp(2.5rem,5vw,4rem)}
.hero-compact h1{font-size:var(--step-3);line-height:1.12;letter-spacing:-.025em;max-width:30ch}
.hero-lead{display:grid;grid-template-columns:clamp(9rem,18vw,15rem) minmax(0,1fr);gap:clamp(1.5rem,4vw,3rem);align-items:center}
.hero-portrait{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:50%;border:1px solid var(--rule);background:var(--bg-raised)}
@media (max-width:699px){.hero-lead{grid-template-columns:1fr}.hero-portrait{width:7.5rem}}
.pricing{padding-top:0}

.billing-toggle{display:inline-flex;flex-wrap:wrap;align-items:center;gap:.25rem;margin:0 0 .75rem;padding:.25rem;border:1px solid var(--rule);border-radius:10px;background:var(--bg-raised);box-shadow:var(--elev-1)}
.billing-toggle legend{float:left;padding:0 .75rem 0 .5rem;font-size:var(--step--1);color:var(--fg-muted)}
.billing-toggle label{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.4rem .9rem;border-radius:7px;font-weight:600;cursor:pointer}
.billing-toggle label:has(input:checked){background:var(--fg);color:var(--bg)}
.billing-toggle label:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.billing-toggle input{accent-color:var(--accent)}
.save-badge{font-size:var(--step--1);font-weight:600;color:var(--accent)}
.billing-note{margin-bottom:2rem;font-size:var(--step--1);color:var(--fg-muted)}
.billing-toggle + .plans{margin-top:1.25rem}
.billing-toggle label:has(input:checked) .save-badge{color:inherit}

/* Plans are four ruled columns of one ledger, not four boxes. */
.plans{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--rule-strong)}
.plan{position:relative;display:flex;flex-direction:column;padding:2.5rem 1.25rem 3.25rem 0}
.plan + .plan{padding-left:1.25rem;border-left:1px solid var(--rule)}
.plan-lead{background:var(--tint-accent);box-shadow:inset 0 4px 0 var(--accent),var(--elev-2)}
.plan h3{font-size:var(--step-2)}
.plan-flag{position:absolute;top:.85rem;font-size:var(--step--1);font-weight:600;color:var(--accent)}
.plan-for{margin-top:.6rem;color:var(--fg-2);font-size:.9375rem;min-height:6.4em}
.plan-price{margin-top:.5rem;font-variant-numeric:tabular-nums}
.plan-price strong{font:600 var(--step-2)/1.1 var(--acq-font-display);letter-spacing:-.02em}
.plan-price .per{color:var(--fg-2)}
.plan-price .terms{display:block;font-size:var(--step--1);color:var(--fg-2)}
/* Side by side, the annual terms reserve the same height in every card, so a card whose
   terms run a line longer does not push what follows out of line with its neighbours. */
@media (min-width:640px){.price-annual .terms{min-height:4.8em}}
/* The toggle picks which price leads; the other stays readable beneath it. */
.pricing:has(#bill-monthly:checked) .price-monthly strong,
.pricing:has(#bill-annual:checked) .price-annual strong{font-size:clamp(2.25rem,1.6rem + 1.6vw,2.875rem)}
.pricing:has(#bill-annual:checked) .price-annual{order:-1}
.plan-prices{display:flex;flex-direction:column}
.plan-limits{margin-top:1.25rem;padding-block:.9rem;border-block:1px solid var(--rule);font-size:.9375rem;font-variant-numeric:tabular-nums}
.plan-limits li + li{margin-top:.2rem}
.plan-includes-label{margin-top:1rem;font-weight:600;font-size:.9375rem}
.plan-includes{margin-top:.5rem;font-size:.9375rem;color:var(--fg-2)}
.plan-includes li{padding-left:1.1rem;position:relative}
.plan-includes li + li{margin-top:.35rem}
.plan-includes li::before{content:"";position:absolute;left:0;top:.6em;width:.45rem;height:2px;background:var(--accent)}
.plan-delivers{margin-top:.9rem;font-size:.9375rem;color:var(--fg)}
.plan-excludes{margin-top:.9rem;font-size:var(--step--1);color:var(--fg-muted)}
.plan-actions{position:relative;margin-top:auto;padding-top:1.5rem;display:flex;flex-wrap:wrap;align-items:center;gap:.75rem 1rem}
/* A second link sits under the button without taking a row, so every card's button stays on one line across the grid. */
.plan-actions .text-link{position:absolute;left:0;top:calc(100% + .6rem)}
.plans-note{margin-top:1.75rem;max-width:72ch;color:var(--fg-2)}

.anchors,.compare{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.anchors{max-width:52rem;margin-bottom:2rem}
.anchors th,.anchors td,.compare th,.compare td{padding:.8rem 1rem .8rem 0;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.anchors thead th,.compare thead th{border-bottom:2px solid var(--rule-strong);font:600 var(--step-0)/1.3 var(--acq-font-display)}
.anchors tbody th,.compare tbody th{font-weight:400;color:var(--fg-2)}
.anchors td{font-weight:600}
.anchors caption{caption-side:top;padding-bottom:.6rem;text-align:left;font-size:var(--step--1);color:var(--fg-2)}
.table-scroll{position:relative;overflow-x:auto}
.table-text{max-width:56rem}
.table-text tbody th{font-weight:600;color:var(--fg)}
.table-text td{font-weight:400;color:var(--fg-2)}
@media (max-width:640px){
  .table-text thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .table-text tr{display:block;padding-block:.9rem;border-bottom:1px solid var(--rule)}
  .table-text tbody th,.table-text td{display:block;padding:.2rem 0;border:0}
  .table-text td::before{content:attr(data-label);display:block;margin-top:.35rem;font:600 var(--step--1)/1.3 var(--acq-font-display);color:var(--fg)}
}
.compare{min-width:40rem}
.compare thead td{border-bottom:2px solid var(--rule-strong)}
.compare td,.compare thead th{width:14%;text-align:center;padding-right:0}
.compare .yes{color:var(--accent);font-weight:700}
.compare .no{color:var(--fg-muted)}
.compare .h-sub{margin-top:.15rem;font-size:.8125rem;color:var(--fg-muted)}
/* The row labels stay put while the plan columns scroll sideways. */
.compare tbody th,.compare thead td{position:sticky;left:0;z-index:1;background:var(--bg)}
/* A shadow on the right edge says there are more columns; it is covered once the table is scrolled to the end. */
.compare-scroll{
  background:
    linear-gradient(to left,var(--bg) 40%,transparent) right / 3rem 100% no-repeat local,
    linear-gradient(to left,rgb(6 16 31 / .22),transparent) right / 1rem 100% no-repeat scroll;
}
@media (prefers-color-scheme:dark){
  .compare-scroll{
    background:
      linear-gradient(to left,var(--bg) 40%,transparent) right / 3rem 100% no-repeat local,
      linear-gradient(to left,rgb(159 180 204 / .28),transparent) right / 1rem 100% no-repeat scroll;
  }
}

.billing-facts{max-width:52rem}
.billing-facts > div{display:grid;grid-template-columns:8rem minmax(0,1fr);gap:1rem;padding-block:1rem;border-top:1px solid var(--rule)}
.billing-facts dt{font:600 var(--step-0)/1.4 var(--acq-font-display)}
.billing-facts dd{color:var(--fg-2)}

/* The glossary (/resources/glossary): a jump list of categories, then term and definition rows. */
.glossary-index{padding-block:1.5rem;border-bottom:1px solid var(--rule)}
.glossary-index ul{display:flex;flex-wrap:wrap;gap:.6rem 1.75rem;font-weight:600}
.glossary-terms{max-width:56rem;border-bottom:1px solid var(--rule)}
.glossary-terms > div{display:grid;grid-template-columns:13rem minmax(0,1fr);gap:1rem;padding-block:1.1rem;border-top:1px solid var(--rule);scroll-margin-top:5rem}
.glossary-terms dt{font:600 var(--step-0)/1.4 var(--acq-font-display)}
.glossary-terms dd{color:var(--fg-2);line-height:1.55}
.glossary-terms dd p + p{margin-top:.4rem}
.glossary-terms .glossary-expansion{color:var(--fg);font-weight:500}
@media (max-width:640px){.glossary-terms > div{grid-template-columns:minmax(0,1fr);gap:.35rem}}
.objection + .cta-row,[data-placeholder] + .cta-row{margin-top:2.5rem}

@media (max-width:1099px){
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plan:nth-child(odd){padding-left:0;border-left:0}
  .plan:nth-child(n+3){border-top:2px solid var(--rule-strong)}
  .plan-for{min-height:4.8em}
}
@media (max-width:639px){
  .plans{grid-template-columns:minmax(0,1fr)}
  .plan{padding-left:0 !important;border-left:0 !important;padding-right:0}
  .plan + .plan{border-top:2px solid var(--rule-strong)}
  .plan-for{min-height:0}
  /* Narrower label column, so two whole plan columns fit beside it on a phone. */
  .compare{table-layout:fixed;min-width:34rem;font-size:.875rem}
  .compare tbody th,.compare thead td{width:8.5rem;padding-right:.75rem}
  .compare td,.compare thead th{width:auto}
  .billing-toggle{display:flex}
  .billing-toggle legend{float:none;width:100%;padding:.25rem .5rem}
  .billing-facts > div{grid-template-columns:minmax(0,1fr);gap:.25rem}
}

/* ---------- product pages ---------- */
.feature-steps,.feature-list{max-width:72ch}
.feature-steps{counter-reset:step}
.feature-steps > li{counter-increment:step;display:grid;grid-template-columns:2.75rem minmax(0,1fr);padding-block:1.1rem;border-top:1px solid var(--rule);color:var(--fg-2)}
.feature-steps > li::before{content:counter(step);font:600 var(--step-2)/1.1 var(--acq-font-display);color:var(--accent);font-variant-numeric:tabular-nums}
.feature-steps strong,.feature-list strong{color:var(--fg);font-weight:600}
.feature-list > li{position:relative;padding:.9rem 0 .9rem 1.4rem;border-top:1px solid var(--rule);color:var(--fg-2)}
.feature-list > li::before{content:"";position:absolute;left:0;top:1.6em;width:.6rem;height:2px;background:var(--accent)}
.feature-section .prose-block + *,.feature-section * + .prose-block,.feature-section * + .callout{margin-top:1.75rem}
.formula{max-width:72ch;padding:1.25rem 1.5rem;border-left:4px solid var(--accent);background:var(--bg-raised);font:500 var(--step-1)/1.7 var(--acq-font-display);font-variant-numeric:tabular-nums}
.section-raised .formula{background:var(--bg)}
.callout{max-width:66ch;padding-left:1.25rem;border-left:4px solid var(--accent);font-size:var(--step-1);line-height:1.55}
.related ul{display:flex;flex-wrap:wrap;gap:.75rem 2rem;font-weight:600}
.related{padding-block:clamp(2.5rem,5vw,4rem);border-top:1px solid var(--rule)}

.shot{margin:2.75rem 0 0}
.shot img{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:10px;background:var(--bg-raised);box-shadow:var(--elev-2)}
.feature-section .shot{padding:clamp(.75rem,2vw,1.5rem);background:var(--tint);border-radius:var(--radius)}
.section-raised.feature-section .shot{background:var(--bg)}
.shot figcaption{margin-top:.6rem;font-size:var(--step--1);color:var(--fg-muted)}

/* The closing band is the dark brand surface in both schemes. */
.final-cta{
  --fg:var(--cloud);--fg-2:var(--muted);--fg-muted:#8093ab;--hover-wash:rgb(159 180 204 / .12);--focus:var(--focus-ring,#2FE0C0);
  background:var(--glow),var(--ink);color:var(--fg);padding-block:clamp(4rem,9vw,7rem);
}
.final-cta h2{font-size:var(--step-3);max-width:22ch}
.final-cta h2 + p{margin-top:1.25rem;max-width:58ch;color:var(--fg-2);font-size:var(--step-1)}
@media (prefers-color-scheme:dark){.final-cta{background:var(--glow),var(--navy);border-top:1px solid var(--hairline)}}

/* ---------- footer ---------- */
.site-footer{padding-block:3.5rem 2.5rem;background:var(--bg);border-top:1px solid var(--rule);font-size:.9375rem}
.footer-columns{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2rem}
@media (min-width:700px){.footer-columns{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (min-width:1024px){.footer-columns{grid-template-columns:repeat(5,minmax(0,1fr))}}
.footer-stack > * + *{margin-top:1.75rem}
/* Five groups leave Legal alone on the last row of a two- or three-column grid, so below 1024px it
   takes two columns and splits its list in two. */
@media (max-width:1023px){
  .footer-legal-links{grid-column:span 2}
  .footer-legal-links ul{columns:2;column-gap:2rem}
  .footer-legal-links li{break-inside:avoid}
}
.footer-columns h2{font:600 var(--step-0)/1.3 var(--acq-font-display);letter-spacing:0;margin-bottom:.6rem}
/* Every footer link is a 32px target or larger (#156). */
.footer-columns a{display:inline-block;min-width:32px;min-height:32px;padding-block:.3rem;color:var(--fg-2);text-decoration:none}
.footer-columns a:hover{color:var(--accent);text-decoration:underline}
.footer-legal{margin-top:2.5rem;padding-top:1.5rem;border-top:1px solid var(--rule);color:var(--fg-muted);font-size:var(--step--1)}

/* The consent bar (#156) is placed where it covers none of the hero's text, its calls to action or
   the footnote under them. Phones (below 600px): a strip in the page flow under the header, which
   covers nothing (a bar docked to the bottom of a phone screen sits on the hero's footnote or
   button). 600 to 959px, where the hero is one column: a slim strip docked to the bottom edge, the
   sentence beside the buttons. From 960px the hero has two columns: a compact card in the
   bottom-right corner, narrower than the right column and short enough to sit under the graphic. */
.consent-bar{
  position:fixed;inset:auto 0 0 0;z-index:30;
  display:flex;flex-wrap:wrap;align-items:center;gap:.5rem 1rem;
  padding:.5rem var(--gutter) calc(.5rem + env(safe-area-inset-bottom));
  background:var(--bg-raised);color:var(--fg);border-top:1px solid var(--rule);box-shadow:0 -8px 24px rgb(6 16 31 / .16);
}
/* Shown only while <html> has consent-ask, which the head script sets before the first paint (#177),
   so the bar is laid out from the start instead of arriving with site.js and pushing main down. */
html:not(.consent-ask) .consent-bar{display:none}
.consent-bar p{flex:1 1 24rem;font-size:.8125rem;line-height:1.4;color:var(--fg-2)}
.consent-actions{display:flex;gap:.5rem}
.consent-actions .btn{min-height:40px;padding:.4rem 1rem;font-size:.875rem}
@media (max-width:599px){
  .consent-bar{position:static;padding-block:.625rem;border-top:0;border-bottom:1px solid var(--rule);box-shadow:none}
  .consent-actions{flex:1}
  .consent-actions .btn{flex:1}
}
@media (min-width:960px){
  .consent-bar{
    inset:auto 1rem 1rem auto;width:clamp(24rem,40vw,26rem);
    padding:.75rem 1rem;border:1px solid var(--rule);border-radius:12px;box-shadow:var(--elev-3);
  }
  .consent-bar p{flex-basis:100%}
  .consent-actions{margin-left:auto}
}
/* While the bar shows, the page keeps room under the footer so its last line can scroll clear. */
body{padding-bottom:var(--consent-space,0px)}

@media (max-width:899px){
  .proof-list,.plan-teasers{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof-list{row-gap:1.5rem}
  .proof-list li:nth-child(odd){padding-left:0;border-left:0}
  .pillars{grid-template-columns:repeat(2,minmax(0,1fr))}
  .modules{grid-template-columns:minmax(0,1fr)}
  .audience-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .loop > li{grid-template-columns:3.5rem minmax(0,1fr);grid-template-areas:"n title" "n copy" "n links";column-gap:1rem}
  .loop p{margin-top:.6rem}
}
@media (max-width:559px){
  .proof-list,.plan-teasers,.pillars,.audience-list{grid-template-columns:minmax(0,1fr)}
  .proof-list li,.plan-teasers li{padding-left:0 !important;border-left:0 !important}
  .proof-list li + li,.plan-teasers li + li{border-top:1px solid var(--rule)}
  .modules > div{grid-template-columns:minmax(0,1fr);gap:.25rem}
  .cta-row .btn{flex:1 1 100%}
  .security-strip ul{flex-direction:column}
  .security-strip li{border-right:0;margin-right:0;padding-right:0}
}


/* ---------- guides ---------- */
.guide-layout{display:grid;gap:2.5rem;padding-block:1rem clamp(3rem,7vw,5rem)}
.guide-toc{align-self:start;padding:1.25rem 1.5rem;background:var(--bg-raised);border:1px solid var(--rule);border-radius:10px;box-shadow:var(--elev-1)}
.guide-toc h2{font:600 var(--step--1)/1.3 var(--acq-font-body);letter-spacing:.08em;text-transform:uppercase;color:var(--fg-muted)}
.guide-toc ol{margin-top:.75rem;padding-left:1.4rem;list-style:decimal;color:var(--fg-muted);font-size:.9375rem}
.guide-toc li{margin-block:.1rem}
.guide-toc a{display:block;min-height:32px;padding-block:.25rem}
.guide-body{min-width:0}
.guide-body h2{font-size:var(--step-2);margin-block:2.75rem 1rem;max-width:32ch}
.guide-body h3{font-size:var(--step-1);margin-block:2rem .75rem}
.guide-body p,.guide-body ul,.guide-body ol{max-width:70ch}
.guide-body p,.guide-body ul,.guide-body ol,.guide-body .formula,.guide-body .callout,.guide-body .table-scroll{margin-block:1rem}
.guide-body ul,.guide-body ol{padding-left:1.4rem}
.guide-body ul{list-style:disc}
.guide-body ol{list-style:decimal}
.guide-body li{margin-block:.5rem}
.guide-body .callout{font-size:var(--step-0)}
.guide-body .callout p{margin:0}
.guide-body .formula{font-size:var(--step-0)}
.guide-body table{width:100%;max-width:52rem;border-collapse:collapse;font-size:.9375rem}
.guide-body th,.guide-body td{padding:.7rem .9rem .7rem 0;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.guide-body thead th{border-bottom:2px solid var(--rule-strong);font-weight:600}
.guide-body td:first-child{font-weight:600}
.guide-note{max-width:70ch;margin-block:1.75rem;padding:1rem 1.25rem;border:1px solid var(--rule);border-radius:10px;font-size:var(--step--1);color:var(--fg-2)}
.guide-note b{color:var(--fg)}
@media (min-width:960px){
  .guide-layout{grid-template-columns:15rem minmax(0,1fr);gap:3.5rem}
  .guide-toc{position:sticky;top:calc(var(--header-h) + 1.5rem)}
}
.section h2 + .guide-list{margin-top:1.5rem}
.article-byline{margin-top:1.25rem;font-size:var(--step--1);color:var(--fg-muted)}
.guide-body blockquote{max-width:66ch;margin:1rem 0;padding-left:1.25rem;border-left:4px solid var(--accent)}
.guide-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 2.5rem}
.guide-list li{padding-block:1.5rem;border-top:2px solid var(--rule-strong)}
.guide-list h3{font-size:var(--step-2);max-width:none}
.guide-list h3 a{color:var(--fg)}
.guide-list h3 a:hover{color:var(--accent)}
.guide-list h3 + p{margin-top:.75rem;color:var(--fg-2)}
.guide-kicker{font-weight:600;font-size:var(--step--1);color:var(--accent);margin-bottom:.5rem}
.guide-date{margin-top:1rem;font-size:var(--step--1);color:var(--fg-muted)}
@media (max-width:899px){.guide-list{grid-template-columns:minmax(0,1fr)}}

/* ---------- Legal documents (/legal/*): Markdown rendered unedited ---------- */
.legal{padding-block:clamp(1.5rem,4vw,3rem) clamp(3.5rem,8vw,6rem)}
.legal h1{font-size:var(--step-3);max-width:24ch;margin-block:1.5rem}
.legal h2{font-size:var(--step-2);margin-block:2.75rem 1rem;max-width:40ch}
.legal h3{font-size:var(--step-1);margin-block:2rem .75rem;max-width:48ch}
.legal p,.legal ul,.legal ol,.legal blockquote{max-width:74ch}
.legal p,.legal ul,.legal ol{margin-block:.9rem}
.legal ul,.legal ol{padding-left:1.4rem}
.legal ul{list-style:disc}
.legal ol{list-style:decimal}
.legal li{margin-block:.4rem}
.legal a{overflow-wrap:anywhere}
.legal blockquote{margin:1rem 0;padding:.25rem 0 .25rem 1.25rem;border-left:4px solid var(--accent);color:var(--fg-2)}
.legal hr{margin-block:2.5rem;border:0;border-top:1px solid var(--rule)}
.legal .table-scroll{margin-block:1.5rem}
.legal table{width:100%;min-width:44rem;border-collapse:collapse;font-size:.9375rem}
.legal th,.legal td{padding:.7rem .9rem .7rem 0;border-bottom:1px solid var(--rule);text-align:left;vertical-align:top}
.legal th{border-bottom:2px solid var(--rule-strong);font-weight:600}
.legal .placeholder{background:var(--gold);color:var(--ink);padding:0 .25rem}
/* "On this page" on a legal document: collapsed on phones, opened by site.js on wide screens. */
.legal-toc{max-width:74ch;margin-block:1.5rem 2rem;padding:.25rem 1.25rem;background:var(--bg-raised);border:1px solid var(--rule);border-radius:10px}
.legal-toc summary{cursor:pointer;padding-block:.75rem;font:600 var(--step-0)/1.3 var(--acq-font-display)}
.legal-toc ol{margin-block:0 1rem;columns:2 16rem;column-gap:2.5rem;list-style:none;padding-left:0}
.legal-toc li{break-inside:avoid;margin-block:0;padding-block:.05rem}
.legal-toc a{display:inline-block;min-width:32px;min-height:32px;padding-block:.25rem}

/* ---------- forms (calculator, contact) ---------- */
.form{max-width:34rem}
.form-lead{margin-top:.75rem;color:var(--fg-2)}
.field{margin:1.25rem 0 0;padding:0;border:0;min-width:0}
.field label,.field legend{display:block;padding:0;font-weight:600;margin-bottom:.4rem}
.field label span,.field legend span{font-weight:400;color:var(--fg-muted)}
.field input[type=text],.field input[type=email],.field select,.field textarea{
  width:100%;min-height:44px;padding:.6rem .75rem;
  font:inherit;color:var(--fg);background:var(--bg-raised);
  border:1.5px solid var(--fg-muted);border-radius:8px;
}
.field textarea{min-height:8rem;resize:vertical}
/* The browser's own placeholder grey is 3.8:1 on the dark field; the muted text token is 4.5:1 or more in both schemes. */
.field ::placeholder{color:var(--fg-muted);opacity:1}
/* Safari keeps its own pop-up button unless the native look is switched off, so the arrow is drawn here. */
.field select{
  -webkit-appearance:none;appearance:none;padding-right:2.5rem;text-overflow:ellipsis;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%235b6d8a' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .9rem center;background-size:12px 8px;
}
@media (prefers-color-scheme:dark){.field select{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%238093ab' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5 6 6l4.5-4.5'/%3E%3C/svg%3E")}}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--focus);outline-offset:1px;border-color:var(--fg)}
.field-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 1rem}
/* Side by side, labels start level and so do the fields, even when one label wraps. */
.field-pair > .field{display:flex;flex-direction:column}
.field-pair > .field > label{margin-bottom:auto;padding-bottom:.4rem}
.choice label{display:flex;align-items:center;gap:.5rem;font-weight:500;min-height:44px;margin:0}
.choice input,.check input{width:1.15rem;height:1.15rem;accent-color:var(--accent);flex:none}
.check{display:flex;align-items:flex-start;gap:.65rem;margin-top:1.5rem}
.check input{margin-top:.2rem}
.hint{margin-top:.4rem;font-size:var(--step--1);color:var(--fg-muted)}
.form-error{margin-top:1rem;font-weight:600;color:#b3261e}
.form-error:empty{display:none}
.form-error a{color:inherit}
@media (prefers-color-scheme:dark){.form-error{color:#ffb4ab}}
.form-actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.5rem}
.form button[disabled]{opacity:.6;cursor:progress}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.cf-turnstile{margin-top:1.25rem}
@media (max-width:479px){.field-pair{grid-template-columns:1fr}}

/* ---------- valuation calculator ---------- */
.calc{padding-top:0}
.calc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:3rem 4rem;align-items:start}
.calc-result{padding:1.75rem;background:var(--tint-accent);border:1px solid var(--rule);border-top:4px solid var(--accent);box-shadow:var(--elev-2)}
.calc-empty{color:var(--fg);font-size:var(--step-1);line-height:1.5}
.calc-range{margin-top:.75rem;font:600 var(--step-4)/1.05 var(--acq-font-display);letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.calc-figures{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-block:1.5rem;border-top:1px solid var(--rule)}
.calc-figures div{padding:.8rem .75rem .8rem 0;border-bottom:1px solid var(--rule)}
.calc-figures dt{font-size:var(--step--1);color:var(--fg-muted)}
.calc-figures dd{font-weight:600;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.calc-result h3{font-size:var(--step-1);margin-bottom:.5rem}
.calc-disclaimer{margin-top:1.25rem;font-size:var(--step-0)}
.calc-next{margin-top:2rem;padding-top:1.75rem;border-top:1px solid var(--rule)}
.calc-next .cta-row{margin-top:1rem}
@media (max-width:899px){.calc-grid{grid-template-columns:1fr}}
/* The result stays beside the form while the visitor scrolls down to the button. */
@media (min-width:900px){.calc-result{position:sticky;top:calc(var(--header-h) + 1.5rem)}}
@media (max-width:479px){.calc-figures{grid-template-columns:1fr 1fr}.calc-result{padding:1.25rem}}

.not-found .feature-list{margin-top:2rem;max-width:30rem}

/* ---------- contact ---------- */
.contact{padding-top:0}
.contact-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:3rem 5rem;align-items:start}
.contact h2{font-size:var(--step-2)}
.contact aside .feature-list{margin-top:1.25rem}
.contact-success p{margin-top:1rem;max-width:60ch;font-size:var(--step-1);line-height:1.55}
.contact-success{padding:1.75rem;background:var(--tint-accent);border:1px solid var(--rule);border-top:4px solid var(--accent);border-radius:var(--radius);box-shadow:var(--elev-2)}
.contact-success:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* Email capture (#163): the block on /resources and in each article, and the exports form on /product.
   Nothing renders after load, so the page does not move; the bot check stays out of sight unless Cloudflare asks. */
.capture-panel{max-width:44rem;padding:1.75rem;background:var(--tint);border:1px solid var(--rule);border-top:4px solid var(--accent);border-radius:var(--radius);scroll-margin-top:calc(var(--header-h) + 1rem)}
.capture-panel > h2{margin:0}
.capture-copy{margin-top:.75rem;max-width:60ch}
.capture-panel .form{margin-top:.5rem}
.capture-turnstile:not(:empty){margin-top:1rem}
.capture-done{margin-top:1.25rem}
.capture-done:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.capture-done p{max-width:60ch}
.capture-files{margin-top:1.25rem}
.capture-after{margin-top:1.5rem}
.export-list{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.export-list a{font-weight:600}
.export-detail{display:block;margin-top:.15rem;color:var(--fg-muted);font-size:var(--step--1)}
.export-caption{margin-top:1rem;color:var(--fg-muted);font-size:var(--step--1)}
@media (max-width:479px){.capture-panel{padding:1.25rem}}
@media (max-width:899px){.contact-grid{grid-template-columns:1fr}}

/* ---------- motion ----------
   Everything that moves is here and nothing moves under prefers-reduced-motion: reduce. Hover and
   press feedback answers the visitor's action. site.js adds .reveal-pending to a [data-reveal]
   element that starts below the first screen and .is-in when it arrives; an element that starts
   in view, or any element without script, is simply shown. */
@media (prefers-reduced-motion:no-preference){
  .btn{transition:transform var(--dur-1) var(--ease),box-shadow var(--dur-2) var(--ease),background-position var(--dur-3) var(--ease),background-color var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
  .btn:hover{transform:translateY(-1px)}
  .btn:active{transform:translateY(0);box-shadow:none;transition-duration:60ms}
  a,.site-nav-list a,.nav-menu > summary{transition:color var(--dur-2) var(--ease)}
  /* The one load moment: the three bars draw in, then the concluded range lands around them. */
  .tri-bar{animation:tri-draw 900ms var(--ease) both;animation-delay:calc(220ms + var(--i,0) * 140ms)}
  .tri-row:nth-of-type(2) .tri-bar{--i:1}
  .tri-row:nth-of-type(3) .tri-bar{--i:2}
  .tri-band{animation:tri-land 700ms var(--ease) 900ms both}
  @keyframes tri-draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  @keyframes tri-land{from{opacity:0;transform:scaleY(.7)}to{opacity:1;transform:none}}
  .reveal-pending{opacity:0;transform:translateY(14px)}
  .reveal-pending.is-in{opacity:1;transform:none;transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease)}
  /* In the deal loop the row stays put; only its numeral arrives. */
  .loop > li.reveal-pending{opacity:1;transform:none}
  .loop > li.reveal-pending::before{opacity:0;transform:translateY(14px)}
  .loop > li.reveal-pending.is-in::before{opacity:1;transform:none;transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease)}
  .audience-list li,.pillars li{transition:box-shadow var(--dur-2) var(--ease)}
  .audience-list li:hover,.pillars li:hover{box-shadow:var(--elev-2)}
}

/* ---------- diagrams (#161) ----------
   The inline SVG diagrams from src/partials/diagrams.mjs and the range card from signature.mjs.
   Their colours are tokens set on the figure itself, so a figure inside an ink band picks up the
   band's re-pointed --accent and surfaces. Text contrast: gold #8A6A2E is 5.0:1 on white and red
   #B23A30 is 5.9:1; on navy, #F2857A is 7.0:1 and gold is the band's champagne. Bars that carry
   meaning are at least 3:1 against their surface. */
.dg,.range-card{
  --dg-card:var(--bg-raised);--dg-file:var(--tint);--dg-pill:var(--tint-accent);
  --dg-gold:#8A6A2E;--dg-up:var(--accent);--dg-up-2:#2E9A72;--dg-down:#B23A30;
  --rc-track:#E3E9F2;--rc-a:#0B7A52;--rc-b:#159E70;
}
@media (prefers-color-scheme:dark){
  .dg,.range-card{--dg-gold:var(--gold);--dg-up-2:#7FE3BD;--dg-down:#F2857A;--rc-track:rgb(159 180 204 / .14);--rc-a:var(--emerald);--rc-b:var(--teal)}
}
.band-ink .dg,.hero-lit .dg{--dg-card:var(--surface);--dg-file:var(--surface);--dg-pill:rgb(24 201 140 / .14);--dg-gold:var(--gold);--dg-up-2:#7FE3BD;--dg-down:#F2857A}
.dg{margin:2.5rem 0 0}
.section h2 + .dg{margin-top:2rem}
.dg-svg{display:block;width:100%;height:auto;font-family:var(--acq-font-body);font-size:13px;overflow:visible}
.dg .dg-tall{display:none;max-width:30rem}
@media (max-width:899px){.dg .dg-wide{display:none}.dg .dg-tall{display:block}}
.dg figcaption,.range-card figcaption{margin-top:.75rem;max-width:66ch;font-size:var(--step--1);color:var(--fg-muted)}
.dg-loop + .loop{margin-top:2.5rem}
.dg-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(1.5rem,4vw,3.5rem);align-items:start}
.dg-pair .dg-svg{max-width:26rem}
@media (max-width:699px){.dg-pair{grid-template-columns:minmax(0,1fr)}}
.dg-dscr{max-width:34rem}
.dg-node rect{fill:var(--dg-card);stroke:var(--rule);stroke-width:1}
a.dg-node:hover rect{stroke:var(--accent);stroke-width:2}
a.dg-node:focus{outline:none}
a.dg-node:focus-visible rect{stroke:var(--focus);stroke-width:3}
.dg-node-title{font:600 15px var(--acq-font-display);letter-spacing:-.01em;fill:var(--fg)}
.dg-small-title{font-size:14px}
.dg-node-sub{font-size:13px;fill:var(--fg-2)}
.dg-panel-title{font:600 18px var(--acq-font-display);letter-spacing:-.015em;fill:var(--fg)}
.dg-file path{fill:var(--dg-file);stroke:var(--rule)}
.dg-file-sub{font-size:12px}
.dg-edge{fill:none;stroke:var(--fg-muted);stroke-width:1.6}
.dg-edge-return{stroke-dasharray:6 5}
.dg-edge-dotted{stroke-dasharray:1.5 4;stroke-linecap:round;stroke-width:2}
.dg-arrowhead{fill:var(--fg-muted)}
.dg-edge-label{font-size:12px;fill:var(--fg-2)}
.dg-typed{font-style:italic}
.dg-broken{color:var(--dg-down)}
.dg-broken path{stroke:currentColor}
.dg-chip rect{fill:var(--emerald)}
.dg-chip text{font-size:11px;font-weight:600;fill:var(--ink)}
.dg-gate rect{fill:var(--dg-pill)}
.dg-gate text{font-size:12px;font-weight:600;fill:var(--accent)}
.dg-lock{color:var(--dg-gold)}
.dg-lock-on-gate{color:var(--accent)}
.dg-lock path{stroke:currentColor}
.dg-lock rect{fill:currentColor}
.dg-grid{stroke:var(--rule);stroke-width:1}
.dg-baseline{stroke:var(--fg-muted);stroke-width:1.2}
.dg-axis{font-size:12px;fill:var(--fg-muted);font-variant-numeric:tabular-nums}
.dg-axis-title{font-weight:600}
.dg-divider{stroke:var(--fg-muted);stroke-width:1;stroke-dasharray:3 3}
.dg-connector{stroke:var(--fg-muted);stroke-width:1}
.dg-bar-label{font-size:12px;fill:var(--fg-2)}
.dg-value{font-size:13px;font-weight:600;fill:var(--fg);font-variant-numeric:tabular-nums}
.dg-value-total{fill:var(--dg-gold)}
.dg-value-below{font-weight:700;fill:var(--dg-down)}
.dg-bar-total rect{fill:var(--dg-gold)}
.dg-bar-runrate-total rect{fill-opacity:.55;stroke:var(--dg-gold);stroke-width:1.5}
.dg-bar-up rect{fill:var(--dg-up)}
.dg-bar-down rect{fill:var(--dg-down)}
.dg-bar-runrate rect{fill:var(--dg-up-2)}
.dg-bar-excluded rect{fill:none;stroke:var(--fg-muted);stroke-width:1.5;stroke-dasharray:4 3}
.dg-bar-shortcut rect{fill:var(--fg-muted)}
.dg-struck{text-decoration:line-through}
.dg-headline{font:600 22px var(--acq-font-display);letter-spacing:-.02em;fill:var(--fg)}
.dg-kicker{font-size:14px;fill:var(--fg-2)}
.dg-source{font-size:11.5px;fill:var(--fg-muted)}
.dg-floor{stroke:var(--fg);stroke-width:1.5;stroke-dasharray:5 4}
.dg-floor-label{font-size:12px;font-weight:600;fill:var(--fg)}
/* The ledger rule: tabular figures, a hairline above a total, a double rule under the final one. */
.dg-ledger{font-size:13.5px;fill:var(--fg)}
.dg-ledger-figure{font-variant-numeric:tabular-nums}
.dg-ledger-total{font-weight:700}
.dg-rule{stroke:var(--fg);stroke-width:1}

/* The range card: the signature element. */
.range-card{margin:2.5rem 0 0;max-width:31rem}
.range-card-body{padding:1.25rem 1.25rem 1rem;background:var(--dg-card);border:1px solid var(--rule);border-radius:var(--radius);box-shadow:var(--elev-2)}
.range-card-title{font:600 var(--step-1)/1.25 var(--acq-font-display);letter-spacing:-.015em}
.rc-svg{display:block;width:100%;height:auto;margin-top:.25rem;font-family:var(--acq-font-body);overflow:visible}
.rc-label{font-size:13px;fill:var(--fg-2)}
.rc-track{fill:var(--rc-track)}
.rc-stop-a{stop-color:var(--rc-a)}
.rc-stop-b{stop-color:var(--rc-b)}
.rc-band{fill:var(--dg-gold);fill-opacity:.1;stroke:var(--dg-gold);stroke-width:1.5}
.rc-band-label{font-size:13px;font-weight:600;fill:var(--dg-gold)}
.rc-tick{stroke:var(--fg-muted)}
.rc-tick-label{font-size:12px;fill:var(--fg-muted);font-variant-numeric:tabular-nums}

/* ---------- product-page illustrations (#217) ----------
   The drawings in src/partials/illustrations.mjs, on the same tokens as the diagrams above. Text on
   a filled pill: white on emerald-700 (#0B7A52) is 5.4:1 and on red (#B23A30) 5.9:1; in the dark
   scheme the pills take the brand emerald and salmon with ink text, 9:1 and 8:1. */
.dg{--dg-on-up:#fff;--dg-on-down:#fff}
@media (prefers-color-scheme:dark){.dg{--dg-on-up:var(--ink);--dg-on-down:var(--ink)}}
.band-ink .dg,.hero-lit .dg,.hero-compact .dg{--dg-on-up:var(--ink);--dg-on-down:var(--ink)}
/* A drawn figure in the inner-page header sits on the ink band, so it takes the band's surfaces. */
.hero-compact .dg{--dg-card:var(--surface);--dg-file:var(--surface-2);--dg-pill:rgb(24 201 140 / .14);--dg-gold:var(--gold);--dg-up-2:#7FE3BD;--dg-down:#F2857A;margin-top:2.75rem}
.hero-compact .dg figcaption{color:var(--fg-2)}
.dg-formula-line{font-size:17px;font-variant-numeric:tabular-nums}
.dg-seg-label{font-size:12.5px;fill:var(--fg-2)}
.dg-legend{font-size:12px;fill:var(--fg-2)}
.dg-seg-a rect{fill:var(--dg-up)}
.dg-seg-b rect{fill:var(--dg-up-2)}
.dg-seg-out rect{fill:var(--dg-file);stroke:var(--fg-muted);stroke-width:1.2}
.dg-seg-gold rect{fill:var(--dg-gold);fill-opacity:.16;stroke:var(--dg-gold);stroke-width:1.5}
.dg-seg-risk rect{stroke:var(--dg-down);stroke-width:2.5}
.dg-gold-text{fill:var(--dg-gold);font-weight:600}
.dg-risk-text{fill:var(--dg-down);font-weight:600}
.dg-bracket{fill:none;stroke:var(--fg-muted);stroke-width:1.2}
.dg-bracket-label{font-weight:600;fill:var(--fg)}
.dg-step rect{fill:var(--dg-card);stroke:var(--rule)}
.dg-step-dashed rect{fill:none;stroke:var(--fg-muted);stroke-dasharray:5 4}
.dg-step-record rect{fill:var(--dg-file)}
.dg-step-title{font:600 14px var(--acq-font-display);letter-spacing:-.01em;fill:var(--fg)}
.dg-step-sub{font-size:12.5px;fill:var(--fg-2)}
.dg-pill rect{fill:var(--dg-pill)}
.dg-pill-text{font:600 13px var(--acq-font-display);fill:var(--fg)}
.dg-pill-plain rect{fill:var(--dg-card);stroke:var(--rule)}
.dg-pill-up rect{fill:var(--dg-up)}
.dg-pill-up .dg-pill-text{fill:var(--dg-on-up)}
.dg-pill-down rect{fill:var(--dg-down)}
.dg-pill-down .dg-pill-text{fill:var(--dg-on-down)}
.dg-frame rect{fill:var(--dg-file);stroke:var(--rule)}
.dg-bubble-q rect{fill:var(--dg-pill)}
.dg-bubble-a rect{fill:var(--dg-card);stroke:var(--rule)}
.dg-bubble-text{font-size:14.5px;fill:var(--fg)}
.dg-bubble-lead{font-weight:600}
.dg-bubble-a .dg-chip rect{fill:var(--emerald);stroke:none}
.dg-chip-source text{font-size:12px}
.dg-chat{max-width:56rem}
/* The chat frame keeps its wide drawing down to 700 px (it still reads at 0.8 scale); under that
   the tall drawing takes over with the usual 30rem cap, so the bubble text never balloons. */
@media (min-width:700px) and (max-width:899px){.dg-chat .dg-wide{display:block}.dg-chat .dg-tall{display:none}}
.dg-ccc .dg-wide,.dg-rev .dg-wide{max-width:48rem}
/* The sixteen file types, as chips grouped by kind. */
.ft{display:grid;grid-template-columns:repeat(auto-fit,minmax(15rem,1fr));gap:1rem;margin-top:2rem;max-width:72ch}
.ft-group{padding:1rem 1.1rem 1.1rem;background:var(--bg-raised);border:1px solid var(--rule);border-radius:var(--radius)}
.section-raised .ft-group{background:var(--bg)}
.ft-label{font:600 var(--step-0)/1.3 var(--acq-font-display);letter-spacing:-.01em}
.ft-chips{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.7rem}
.ft-chips li{padding:.18rem .62rem;border-radius:999px;background:var(--tint-accent);color:var(--fg);font-size:.8rem;font-weight:600;line-height:1.5}
.ft-detected .ft-chips li{background:transparent;border:1.5px solid var(--accent)}
.ft-refused .ft-chips li{background:transparent;border:1.5px dashed var(--fg-muted);color:var(--fg-2);font-weight:500}
.ft-note{margin-top:.7rem;font-size:var(--step--1);line-height:1.45;color:var(--fg-muted)}

/* Annotated product screenshots: the numbers on the image, listed in the caption. */
.shot-annotated{max-width:46rem}
.shot-annotated.shot-wide{max-width:none}
.shot-narrow{max-width:36rem}
.shot-notes{display:grid;gap:.35rem;margin-top:.6rem;counter-reset:note}
.shot-notes li{counter-increment:note;display:flex;gap:.55rem;align-items:baseline;color:var(--fg-2)}
.shot-notes li::before{content:counter(note);flex:none;display:inline-grid;place-items:center;width:1.3rem;height:1.3rem;border-radius:50%;background:var(--emerald);color:var(--ink);font-weight:700;font-size:.75rem;line-height:1}

/* The captioned portrait on /product/ai: the caption sits under the circle at its bottom right. It is
   the only label: the image carries none (#202), so the caption has to stay at every width. */
.portrait-figure{margin:0}
.portrait-figure .hero-portrait{width:100%}
.portrait-caption{margin-top:.4rem;text-align:right;font-size:var(--step--1);line-height:1.3;color:var(--fg-muted)}
@media (max-width:699px){.portrait-figure{width:7.5rem}}

/* The two-line author box under every article (content package 08, "Author box"), and the founder's
   photograph wherever it is shown. The photograph is a circle with a 1px rule border, which gives it
   an edge on the light and the dark page alike. */
.founder-photo{display:block;border-radius:50%;border:1px solid var(--rule);background:var(--bg-raised);object-fit:cover}
.author-box{display:flex;align-items:center;gap:1rem;max-width:70ch;margin-top:3rem;padding:1rem 1.25rem;border:1px solid var(--rule);border-radius:10px;font-size:var(--step--1);color:var(--fg-2)}
.author-box-photo{flex:none;display:block;width:64px;height:64px}
.author-box strong{color:var(--fg)}
.guide-body .author-box p,.author-box p{max-width:none;margin:0}
.author-box p + p{margin-top:.35rem}

/* The founder on /about ("Why this exists") and the line beside the contact form ("The person who
   reads this"). Both stay hidden until the founder approves their wording; the photograph is added
   to either only when it exists. */
/* The two people on /about share a row; each card stacks its photo above its text. The LinkedIn mark
   sits to the right of the photo, its glyph on the circle's bottom edge: the 40px hit area is 9px
   taller than the 22px glyph on each side, so the link is pulled down by that much. */
.people-row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2.5rem clamp(2rem,5vw,4rem);align-items:start}
.people-row .person p + p{margin-top:1rem}
.person-head{display:flex;align-items:flex-end;gap:.5rem;margin-bottom:1.25rem}
.person-link{display:inline-flex;align-items:center;justify-content:center;min-width:40px;min-height:40px;margin-bottom:-9px;color:var(--fg-muted);border-radius:6px}
.person-link:hover{color:var(--accent)}
@media (max-width:899px){.people-row{grid-template-columns:minmax(0,1fr)}}
.founder-intro{display:grid;grid-template-columns:minmax(0,1fr);gap:1.25rem 2rem;align-items:start;max-width:56rem}
.founder-intro.has-photo{grid-template-columns:auto minmax(0,1fr)}
.founder-intro p + p{margin-top:1rem}
.founder-name{font-size:var(--step-1)}
/* Umplify's wordmark beside the Company paragraphs on /about; the file is 132 by 54. */
.company-logo{display:block;width:10rem;margin-top:.1rem}
.company-logo img{display:block;width:100%;height:auto}
/* Vera beside her introduction on the home page, at the same scale as the founder's headshot. */
.vera-intro .portrait-figure{width:7.5rem}
@media (max-width:699px){.founder-intro.has-photo{grid-template-columns:minmax(0,1fr)}}
.contact-reader{display:flex;align-items:center;gap:1rem}
.contact-reader-photo{flex:none;display:block;width:80px;height:80px}
.contact-reader p{max-width:30ch}
@media (min-width:900px){
  .contact-grid.has-reader{grid-template-rows:auto 1fr}
  .contact-grid.has-reader .contact-main{grid-column:1;grid-row:1 / span 2}
  .contact-grid.has-reader .contact-reader{grid-column:2;grid-row:1}
  .contact-grid.has-reader aside{grid-column:2;grid-row:2}
}