/* Delegate site — design system.
   White ground, one navy accent, Inter only, 1px borders, small radii.
   No gradients, no shadows beyond a hairline, no decorative motion.
   Self-hosted font, zero external requests. */

@font-face{
  font-family:"Inter";
  src:url("/assets/inter-var.woff2") format("woff2");
  font-weight:300 700;
  font-display:swap;
  font-style:normal;
}

:root{
  /* ground */
  --white:#FFFFFF;
  --band:#F7F8F9;
  --wash:#F2F5F8;

  /* rules */
  --line:#E3E6E9;
  --line-strong:#D2D7DC;

  /* text */
  --ink:#111418;
  --body:#41474F;
  /* AAA on white (8.14:1), on the band (7.66:1) and on the wash (7.44:1).
     Was #6B737C, which passed AA at 4.81:1 but not AAA. --ink (18.47:1) and
     --body (9.38:1) already cleared AAA and are unchanged. */
  --meta:#4A5058;

  /* accent — the only colour on the site */
  --navy:#16314F;
  --navy-hi:#1F4368;

  /* disposition, used only where a disposition is shown */
  /* Darkened from #2F6B4F and #8A6410, which passed AA at 6.29:1 and 5.37:1
     but not AAA. These are not decoration: --review labels the marked month
     on the exposure chart in running-text size, and all three set the
     disposition chips, which are normal-size text for WCAG purposes. Hue
     unchanged; --fail already cleared AAA at 8.02:1. */
  --pass:#2B6349;
  --review:#73530D;
  --fail:#8C3232;

  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,
    Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --shell:1120px;
  --measure:41rem;
  --gutter:24px;

  --r:3px;
  --r-lg:4px;

  /* 17px base, ~1.28 ratio */
  --t-xs:.8125rem;
  --t-sm:.9375rem;
  --t-md:1rem;
  --t-lg:1.1875rem;
  --t-xl:1.5rem;
  --t-2xl:1.9375rem;
  --t-3xl:2.875rem;

  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:64px;
  --sp-9:88px; --sp-10:120px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{
  font-size:17px;
  -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{
  font-family:var(--sans);
  font-size:var(--t-md);
  line-height:1.65;
  color:var(--body);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  font-variant-numeric:tabular-nums lining-nums;
}

img,svg,video{max-width:100%;height:auto;display:block}

/* ---------------------------------------------------------------- type --- */

h1,h2,h3,h4{
  font-family:var(--sans);
  color:var(--ink);
  font-weight:600;
  letter-spacing:-.017em;
  line-height:1.18;
  text-wrap:balance;
}
h1{font-size:var(--t-3xl);letter-spacing:-.024em;line-height:1.1}
h2{font-size:var(--t-2xl);letter-spacing:-.02em}
h3{font-size:var(--t-lg);letter-spacing:-.012em;line-height:1.35}
h4{font-size:var(--t-md);letter-spacing:-.008em;line-height:1.45}

p{text-wrap:pretty}
p + p{margin-top:var(--sp-4)}

strong,b{font-weight:600;color:var(--ink)}

.label{
  font-size:var(--t-xs);
  font-weight:600;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--meta);
  display:block;
}

.lede{
  font-size:var(--t-lg);
  line-height:1.55;
  color:var(--body);
  max-width:var(--measure);
}

.fine{font-size:var(--t-sm);color:var(--meta);line-height:1.6}

.measure{max-width:var(--measure)}

/* --------------------------------------------------------------- links --- */

a{color:var(--navy);text-decoration:none}

.prose a,
a.link{
  color:var(--navy);
  text-decoration:underline;
  text-underline-offset:3px;
  text-decoration-thickness:1px;
  text-decoration-color:var(--line-strong);
  transition:text-decoration-color .12s ease;
}
.prose a:hover,
a.link:hover{text-decoration-color:var(--navy)}

/* a text link that reads as an action, with a hairline arrow */
.link-arrow{
  display:inline-flex;
  align-items:center;
  gap:var(--sp-2);
  color:var(--navy);
  font-weight:500;
  font-size:var(--t-md);
}
.link-arrow::after{
  content:"";
  width:14px;height:8px;
  flex:0 0 14px;
  background:currentColor;
  -webkit-mask:var(--arrow) no-repeat center/contain;
  mask:var(--arrow) no-repeat center/contain;
  transition:transform .14s ease;
}
:root{
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 8'%3E%3Cpath d='M0 4h12M9 1l3 3-3 3' fill='none' stroke='%23000' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
.link-arrow:hover::after{transform:translateX(2px)}

.skip{
  position:absolute;left:-9999px;top:0;
  background:var(--navy);color:#fff;
  padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r);
  font-size:var(--t-sm);font-weight:500;
  z-index:300;
}
.skip:focus{left:var(--sp-4);top:var(--sp-4)}

:focus-visible{
  outline:2px solid var(--navy);
  outline-offset:2px;
  border-radius:2px;
}

/* ------------------------------------------------------------- buttons --- */

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  font-family:inherit;font-size:var(--t-sm);font-weight:500;line-height:1;
  padding:12px 18px;
  border:1px solid transparent;
  border-radius:var(--r);
  cursor:pointer;
  text-align:center;
  transition:background-color .13s ease,border-color .13s ease,color .13s ease;
}
.btn-primary{background:var(--navy);color:#fff;border-color:var(--navy)}
.btn-primary:hover{background:var(--navy-hi);border-color:var(--navy-hi)}
.btn-secondary{background:#fff;color:var(--ink);border-color:var(--line-strong)}
.btn-secondary:hover{border-color:var(--meta);background:var(--band)}
.btn-sm{padding:9px 14px;font-size:var(--t-xs)}

/* ----------------------------------------------------------------- nav --- */

.nav{
  position:sticky;top:0;z-index:100;
  background:var(--white);
  border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:var(--shell);margin:0 auto;
  padding:0 var(--gutter);
  height:64px;
  display:flex;align-items:center;gap:var(--sp-6);
}
.brand{
  display:inline-flex;align-items:center;gap:9px;
  font-size:1.0625rem;font-weight:600;color:var(--ink);
  letter-spacing:-.018em;
  flex:0 0 auto;
}
.brand svg{width:19px;height:19px;color:var(--navy)}

.nav-links{
  display:flex;align-items:center;gap:var(--sp-1);
  margin-left:auto;
  list-style:none;
}
.nav-links > li{position:relative}
.nav-links a,
.nav-trigger{
  display:inline-flex;align-items:center;gap:5px;
  font-family:inherit;
  font-size:var(--t-sm);font-weight:450;
  color:var(--body);
  padding:8px 11px;
  border:0;background:none;cursor:pointer;
  border-radius:var(--r);
  line-height:1.4;
  transition:color .12s ease;
}
.nav-links a:hover,.nav-trigger:hover{color:var(--ink)}
.nav-links a.is-current{color:var(--ink);font-weight:550}

.nav-trigger svg{width:9px;height:9px;color:var(--meta);transition:transform .14s ease}
.nav-trigger[aria-expanded="true"] svg{transform:rotate(180deg)}

.nav-menu{
  position:absolute;top:calc(100% + 6px);left:0;
  min-width:326px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--sp-2);
  list-style:none;
  box-shadow:0 1px 2px rgba(17,20,24,.05);
}
.nav-menu[hidden]{display:none}
.nav-menu a{
  display:block;
  padding:9px 10px;
  border-radius:var(--r);
  font-size:var(--t-sm);
  color:var(--ink);
  font-weight:500;
}
.nav-menu a:hover{background:var(--band)}
.nav-menu .sep{
  margin-top:var(--sp-2);padding-top:var(--sp-2);
  border-top:1px solid var(--line);
}
.nav-menu .d{
  display:block;
  font-size:var(--t-xs);
  color:var(--meta);
  font-weight:400;
  line-height:1.45;
  margin-top:1px;
}
.nav-cta{flex:0 0 auto;margin-left:var(--sp-3)}

.nav-toggle{display:none}

@media(max-width:900px){
  .nav-in{gap:var(--sp-4)}
  .nav-links{
    display:none;
    position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#fff;
    border-bottom:1px solid var(--line);
    padding:var(--sp-3) var(--gutter) var(--sp-5);
    margin:0;
  }
  .nav-links.is-open{display:flex}
  .nav-links > li{border-top:1px solid var(--line)}
  .nav-links > li:first-child{border-top:0}
  .nav-links a,.nav-trigger{padding:13px 0;width:100%;font-size:var(--t-md)}
  .nav-trigger{justify-content:space-between}
  .nav-menu{
    position:static;border:0;box-shadow:none;padding:0 0 var(--sp-3) var(--sp-4);
    min-width:0;
  }
  .nav-cta{margin-left:auto}
  .nav-toggle{
    display:inline-flex;align-items:center;justify-content:center;
    width:36px;height:36px;
    border:1px solid var(--line-strong);border-radius:var(--r);
    background:#fff;cursor:pointer;color:var(--ink);
  }
  .nav-toggle svg{width:15px;height:15px}
}

/* ------------------------------------------------------------- layout --- */

.shell{max-width:var(--shell);margin:0 auto;padding:0 var(--gutter)}

.section{padding:var(--sp-9) 0}
.section--tight{padding:var(--sp-8) 0}
.section--band{background:var(--band);border-top:1px solid var(--line);
  border-bottom:1px solid var(--line)}
.section--ruled{border-top:1px solid var(--line)}

.section-head{max-width:var(--measure);margin-bottom:var(--sp-7)}
.section-head .label{margin-bottom:var(--sp-4)}
.section-head h2 + p{margin-top:var(--sp-4)}

@media(max-width:700px){
  .section{padding:var(--sp-8) 0}
  .section-head{margin-bottom:var(--sp-6)}
}

/* --------------------------------------------------------------- hero --- */

.hero{padding:var(--sp-10) 0 var(--sp-9)}
.hero h1{max-width:34ch}
.hero .lede{margin-top:var(--sp-5);font-size:var(--t-lg);max-width:45rem}
.hero-actions{
  display:flex;align-items:center;gap:var(--sp-5);
  margin-top:var(--sp-7);
  flex-wrap:wrap;
}
@media(max-width:700px){
  .hero{padding:var(--sp-8) 0 var(--sp-7)}
  h1{font-size:2.0625rem}
  h2{font-size:1.625rem}
}

/* -------------------------------------------------------------- steps --- */
/* Numbered, stepped, left-aligned. Deliberately not a row of cards. */

.steps{
  list-style:none;
  counter-reset:step;
  border-top:1px solid var(--line);
  max-width:52rem;
}
.steps > li{
  counter-increment:step;
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--sp-5);
  padding:var(--sp-6) 0;
  border-bottom:1px solid var(--line);
}
.steps > li::before{
  content:counter(step);
  font-size:var(--t-sm);
  font-weight:600;
  color:var(--navy);
  font-variant-numeric:tabular-nums;
  width:26px;height:26px;
  display:grid;place-items:center;
  border:1px solid var(--line-strong);
  border-radius:50%;
  margin-top:2px;
}
.steps h3{margin-bottom:var(--sp-2)}
.steps h2{
  font-size:var(--t-lg);letter-spacing:-.012em;line-height:1.35;
  margin-bottom:var(--sp-2);
}
.steps p{max-width:var(--measure)}
.steps .step-note{
  margin-top:var(--sp-3);
  font-size:var(--t-sm);
  color:var(--meta);
}
@media(max-width:600px){
  .steps > li{gap:var(--sp-4);padding:var(--sp-5) 0}
}

/* ---------------------------------------------------------- fact strip --- */
/* One horizontal band, hairline dividers. Not cards. */

/* Four across, and the fifth on its own full-width row underneath.
   It was five equal columns until the FCRA line was reworded and the last
   cell grew to two sentences: at 1440 that cell ran five lines deep beside
   four two-line cells, and a row of equal columns with one of them three
   times the height of the others reads like a mistake. Giving it the row it
   needs is also the one that carries the most weight. */
.facts{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:#fff;
  overflow:hidden;
}
.facts > div{
  padding:var(--sp-5);
  border-left:1px solid var(--line);
}
.facts > div:first-child{border-left:0}
.facts > div:last-child{
  grid-column:1 / -1;border-left:0;border-top:1px solid var(--line);
}
.facts > div:last-child dd{max-width:var(--measure)}
.facts dt{
  font-size:var(--t-sm);
  font-weight:600;
  color:var(--ink);
  line-height:1.35;
  margin-bottom:var(--sp-2);
}
.facts dd{font-size:var(--t-sm);color:var(--meta);line-height:1.5}
@media(max-width:1000px){
  .facts{grid-template-columns:repeat(2,1fr)}
  .facts > div{border-left:1px solid var(--line);border-top:1px solid var(--line)}
  .facts > div:nth-child(odd){border-left:0}
  .facts > div:nth-child(-n+2){border-top:0}
}
@media(max-width:560px){
  .facts{grid-template-columns:1fr}
  .facts > div{border-left:0;border-top:1px solid var(--line)}
  .facts > div:first-child{border-top:0}
}

/* --------------------------------------------------------- two-column --- */

.split{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:var(--sp-8);
  align-items:start;
}
.split--wide-left{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr)}
@media(max-width:860px){
  .split,.split--wide-left{grid-template-columns:1fr;gap:var(--sp-7)}
}

/* --------------------------------------------------------------- memo --- */
/* Typographic rendering of a findings-memo page. */

.memo{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:#fff;
  padding:var(--sp-6);
  font-size:var(--t-sm);
}
.memo-head{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-4);
  padding-bottom:var(--sp-4);
  border-bottom:1px solid var(--line);
  margin-bottom:var(--sp-2);
}
.memo-head .t{font-weight:600;color:var(--ink);font-size:var(--t-sm)}
.memo-head .m{font-family:var(--mono);font-size:var(--t-xs);color:var(--meta)}

.memo-row{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:var(--sp-4);
  align-items:start;
  padding:var(--sp-4) 0;
  border-bottom:1px solid var(--line);
}
.memo-row:last-child{border-bottom:0;padding-bottom:0}
.memo-row .id{
  font-family:var(--mono);font-size:var(--t-xs);
  color:var(--meta);margin-top:2px;
}
.memo-row .reason{color:var(--body);line-height:1.5}
.memo-row .code{
  font-family:var(--mono);font-size:var(--t-xs);
  color:var(--meta);display:block;margin-top:var(--sp-2);
  word-break:break-word;
}

.disp{
  display:inline-block;
  font-size:var(--t-xs);font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;
  padding:2px 7px;border-radius:2px;
  border:1px solid currentColor;
  line-height:1.5;
}
.disp-pass{color:var(--pass)}
.disp-review{color:var(--review)}
.disp-fail{color:var(--fail)}

/* --------------------------------------------------------------- list --- */

.plain{list-style:none;max-width:var(--measure)}
.plain > li{
  padding:var(--sp-4) 0;
  border-bottom:1px solid var(--line);
  line-height:1.55;
}
.plain > li:first-child{border-top:1px solid var(--line)}

.checks{list-style:none;max-width:var(--measure)}
.checks > li{
  position:relative;
  padding-left:var(--sp-6);
  margin-top:var(--sp-3);
  line-height:1.55;
}
.checks > li:first-child{margin-top:0}
.checks > li::before{
  content:"";
  position:absolute;left:0;top:.62em;
  width:11px;height:1px;
  background:var(--line-strong);
}

/* ------------------------------------------------------------ article --- */

.article{max-width:var(--measure)}
.article-meta{
  font-size:var(--t-xs);
  color:var(--meta);
  letter-spacing:.01em;
  margin-bottom:var(--sp-4);
}
.article-back{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:var(--t-sm);color:var(--meta);margin-bottom:var(--sp-5);
}
.article-back:hover{color:var(--navy)}

.prose{max-width:var(--measure)}
.prose > * + *{margin-top:var(--sp-4)}
.prose h2{
  font-size:var(--t-xl);
  margin-top:var(--sp-8);
  margin-bottom:var(--sp-4);
  letter-spacing:-.018em;
}
.prose h3{margin-top:var(--sp-6);margin-bottom:var(--sp-3)}
.prose p{line-height:1.72}
.prose ul,.prose ol{padding-left:var(--sp-5)}
.prose li{margin-top:var(--sp-2);line-height:1.65}
.prose blockquote{
  border-left:2px solid var(--line-strong);
  padding-left:var(--sp-5);
  color:var(--meta);
}
.prose em{font-style:italic}
.prose code{
  font-family:var(--mono);font-size:.88em;
  background:var(--band);border:1px solid var(--line);
  border-radius:2px;padding:1px 5px;
}
/* Editorial aside: series position, sourcing, or a standing disclaimer. */
.prose .note{
  font-size:var(--t-sm);
  color:var(--meta);
  background:var(--band);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--sp-4) var(--sp-5);
  line-height:1.6;
}
.prose .note a{color:var(--navy)}

/* -------------------------------------------------------- newsletter --- */

.subscribe{
  border-top:1px solid var(--line);
  margin-top:var(--sp-8);
  padding-top:var(--sp-6);
  max-width:var(--measure);
}
.subscribe h2{font-size:var(--t-lg);margin-bottom:var(--sp-3)}
.subscribe p{font-size:var(--t-sm);color:var(--meta)}
.nl-form{display:flex;gap:var(--sp-3);margin-top:var(--sp-4);flex-wrap:wrap}
.nl-form input[type=email]{
  flex:1;min-width:220px;
  font-family:inherit;font-size:var(--t-md);color:var(--ink);
  background:#fff;border:1px solid var(--line-strong);
  border-radius:var(--r);padding:10px 12px;
}
.nl-form input[type=email]:focus{
  outline:none;border-color:var(--navy);box-shadow:0 0 0 1px var(--navy);
}

/* -------------------------------------------------------------- notes --- */

.note-row{
  display:block;
  padding:var(--sp-5) 0;
  border-bottom:1px solid var(--line);
}
.note-row:first-of-type{border-top:1px solid var(--line)}
.note-row h3{margin-bottom:var(--sp-2)}
.note-row:hover h3{color:var(--navy)}
.note-row .m{font-size:var(--t-xs);color:var(--meta);margin-bottom:var(--sp-3)}
.note-row p{font-size:var(--t-sm);color:var(--meta);max-width:var(--measure)}

/* ------------------------------------------- burden note + ledger table --- */
/* The honest cost of a given control. Set apart, never hidden. */
.burden{
  margin-top:var(--sp-4);
  padding-left:var(--sp-4);
  border-left:2px solid var(--line-strong);
  font-size:var(--t-sm);
  color:var(--meta);
  line-height:1.55;
  max-width:var(--measure);
}
.burden b{color:var(--body);font-weight:600}

/* Two facing columns of fact. A table, deliberately, not a pair of cards. */
.ledger{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.ledger > div{padding:var(--sp-6)}
.ledger > div + div{border-left:1px solid var(--line);background:var(--band)}
.ledger h3{font-size:var(--t-md);margin-bottom:var(--sp-4)}
.ledger ul{list-style:none}
.ledger li{
  font-size:var(--t-sm);
  line-height:1.5;
  padding:var(--sp-3) 0;
  border-top:1px solid var(--line);
}
.ledger li:first-child{border-top:0;padding-top:0}
@media(max-width:760px){
  .ledger{grid-template-columns:1fr}
  .ledger > div + div{border-left:0;border-top:1px solid var(--line)}
  .ledger > div{padding:var(--sp-5)}
}

/* ------------------------------------------------------------ callout --- */

.callout{
  border-left:2px solid var(--navy);
  padding:var(--sp-1) 0 var(--sp-1) var(--sp-5);
  max-width:var(--measure);
}

.roadmap{
  max-width:var(--measure);
  font-size:var(--t-sm);
  color:var(--meta);
  padding-top:var(--sp-6);
  border-top:1px solid var(--line);
}

/* --------------------------------------------------------------- cta ---- */

.cta{
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  background:var(--wash);
  padding:var(--sp-8);
}
.cta h2{max-width:24ch}
.cta p{margin-top:var(--sp-4);max-width:var(--measure)}
.cta .hero-actions{margin-top:var(--sp-6)}
@media(max-width:700px){.cta{padding:var(--sp-6)}}

/* -------------------------------------------------------------- forms --- */

.form{max-width:32rem}
.field{margin-bottom:var(--sp-5)}
.field label{
  display:block;font-size:var(--t-sm);font-weight:500;
  color:var(--ink);margin-bottom:var(--sp-2);
}
.field input,.field textarea{
  width:100%;
  font-family:inherit;font-size:var(--t-md);color:var(--ink);
  background:#fff;
  border:1px solid var(--line-strong);
  border-radius:var(--r);
  padding:10px 12px;
  line-height:1.5;
}
.field textarea{min-height:110px;resize:vertical}
.field input:focus,.field textarea:focus{
  outline:none;border-color:var(--navy);box-shadow:0 0 0 1px var(--navy);
}
.field input::placeholder,.field textarea::placeholder{color:#9AA1A9}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ------------------------------------------------------------- footer --- */

.footer{
  border-top:1px solid var(--line);
  padding:var(--sp-8) 0 var(--sp-7);
  margin-top:var(--sp-9);
}
.footer-grid{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));
  gap:var(--sp-7);
}
.footer .brand{margin-bottom:var(--sp-4)}
.footer-about{font-size:var(--t-sm);color:var(--meta);max-width:30ch}
.footer-h{
  display:block;
  font-size:var(--t-xs);font-weight:600;letter-spacing:.09em;
  text-transform:uppercase;color:var(--meta);margin-bottom:var(--sp-4);
}
.footer ul{list-style:none}
.footer li{margin-bottom:var(--sp-3)}
.footer li a{font-size:var(--t-sm);color:var(--body)}
.footer li a:hover{color:var(--ink)}
.footer-base{
  margin-top:var(--sp-8);
  padding-top:var(--sp-5);
  border-top:1px solid var(--line);
  display:flex;justify-content:space-between;gap:var(--sp-5);
  flex-wrap:wrap;
  font-size:var(--t-xs);color:var(--meta);
}
.footer-base a{color:var(--meta)}
.footer-base a:hover{color:var(--body)}
@media(max-width:860px){
  .footer-grid{grid-template-columns:1fr 1fr;gap:var(--sp-6)}
  .footer-about{grid-column:1 / -1}
}
@media(max-width:520px){
  .footer-grid{grid-template-columns:1fr}
}

/* --------------------------------------------------------------- misc --- */

.u-mt-4{margin-top:var(--sp-4)}
.u-mt-5{margin-top:var(--sp-5)}
.u-mt-6{margin-top:var(--sp-6)}
.u-mt-7{margin-top:var(--sp-7)}
.u-mt-8{margin-top:var(--sp-8)}


/* ------------------------------------------------------------ explorer --- */
/* The Explorer shows real engine output on a simulated portfolio. The banner
   is sticky so the word "simulated" is on screen at every scroll position,
   at every width. */

.sim-banner{
  position:sticky;top:64px;z-index:90;
  background:var(--wash);
  border-bottom:1px solid var(--line);
  color:var(--navy);
  font-size:var(--t-xs);
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  text-align:center;
  padding:9px var(--gutter);
}
@media(max-width:900px){.sim-banner{top:64px}}

.js-only{display:none}
.js .js-only{display:block}
.js .nojs-only{display:none}

.stats-row{
  display:grid;grid-template-columns:repeat(4,1fr);
  border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;margin-bottom:var(--sp-5);
  /* The interactive stats row is filled by JS after the data loads. Reserve
     its height so the list below it does not jump. Matches the rendered
     height at each breakpoint. */
  min-height:90px;
}
@media(max-width:620px){.stats-row{min-height:178px}}
.stats-row .stat{padding:var(--sp-4) var(--sp-5);border-left:1px solid var(--line)}
.stats-row .stat:first-child{border-left:0}
.stats-row .n{font-size:var(--t-xl);font-weight:600;color:var(--ink);
  letter-spacing:-.02em;line-height:1.2;
  /* These figures count up from zero, so every digit has to occupy the same
     width or the label below it jitters for the whole 1.2 seconds. */
  font-variant-numeric:tabular-nums}
.stats-row .l{font-size:var(--t-xs);color:var(--meta);text-transform:uppercase;
  letter-spacing:.08em;font-weight:600;margin-top:2px}
.stats-row .stat.p .n{color:var(--pass)}
.stats-row .stat.r .n{color:var(--review)}
.stats-row .stat.f .n{color:var(--fail)}
@media(max-width:620px){
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .stats-row .stat:nth-child(odd){border-left:0}
  .stats-row .stat:nth-child(n+3){border-top:1px solid var(--line)}
}

.xcontrols{display:flex;gap:var(--sp-3);align-items:center;flex-wrap:wrap;
  margin-bottom:var(--sp-4)}
.tabs{display:inline-flex;border:1px solid var(--line-strong);border-radius:var(--r);
  overflow:hidden}
.tabs button{
  font-family:inherit;font-size:var(--t-sm);color:var(--body);
  background:#fff;border:0;border-left:1px solid var(--line);
  padding:8px 14px;cursor:pointer;
}
.tabs button:first-child{border-left:0}
.tabs button.on{background:var(--navy);color:#fff}
.xsearch{flex:1;min-width:200px}
.xsearch input{
  width:100%;font-family:inherit;font-size:var(--t-sm);color:var(--ink);
  background:#fff;border:1px solid var(--line-strong);border-radius:var(--r);
  padding:9px 12px;
}
.xsearch input:focus{outline:none;border-color:var(--navy);
  box-shadow:0 0 0 1px var(--navy)}

.xlayout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);
  gap:var(--sp-5);align-items:start}
@media(max-width:900px){.xlayout{grid-template-columns:1fr}}

.xlist{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
#rows{min-height:60vh}
.xhead{
  display:grid;grid-template-columns:1.2fr .8fr .9fr;gap:var(--sp-3);
  padding:10px var(--sp-4);background:var(--band);
  border-bottom:1px solid var(--line);
  font-size:var(--t-xs);font-weight:600;color:var(--meta);
  text-transform:uppercase;letter-spacing:.07em;
}
.xrow{
  display:grid;grid-template-columns:1.2fr .8fr .9fr;gap:var(--sp-3);
  align-items:center;width:100%;text-align:left;
  font-family:inherit;font-size:var(--t-sm);color:var(--body);
  background:#fff;border:0;border-top:1px solid var(--line);
  padding:10px var(--sp-4);cursor:pointer;
}
.xrow:first-child{border-top:0}
.xrow:hover{background:var(--band)}
.xrow.sel{background:var(--wash)}
.xrow .rid{font-family:var(--mono);font-size:var(--t-xs);color:var(--ink)}
.xrow .rmeta{font-family:var(--mono);font-size:var(--t-xs);color:var(--meta)}
.xpager{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:10px var(--sp-4);border-top:1px solid var(--line);
  background:var(--band);font-size:var(--t-xs);color:var(--meta);
}
.xpager button{
  font-family:inherit;font-size:var(--t-xs);color:var(--navy);
  background:#fff;border:1px solid var(--line-strong);border-radius:var(--r);
  padding:6px 12px;cursor:pointer;
}
.xpager button:disabled{color:var(--meta);cursor:default;opacity:.55}

.xdetail{
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:var(--sp-5);background:#fff;min-height:220px;
}
.xdetail .empty{color:var(--meta);font-size:var(--t-sm)}
.xdetail h3{font-family:var(--mono);font-weight:600}
.xtimeline{margin:var(--sp-4) 0;border:1px solid var(--line);
  border-radius:var(--r);padding:var(--sp-3);background:var(--band)}
.xsig{border-top:1px solid var(--line);padding:var(--sp-3) 0}
.xsig:first-of-type{border-top:0}
.xsig .sh{display:flex;justify-content:space-between;gap:var(--sp-3);
  align-items:baseline;margin-bottom:var(--sp-2)}
.xsig .sn{font-weight:600;color:var(--ink);font-size:var(--t-sm)}
.xsig .sd{font-family:var(--mono);font-size:var(--t-xs);color:var(--meta)}
.xsig p{font-size:var(--t-sm);color:var(--body);line-height:1.5}

.replay-strip{display:flex;flex-wrap:wrap;gap:4px;margin:var(--sp-3) 0}
.replay-dot{width:7px;height:7px;border-radius:50%;
  border:1px solid var(--line-strong);background:#fff}
.replay-dot.on{background:var(--fail);border-color:var(--fail)}
.replay-readout{font-size:var(--t-sm);color:var(--meta);min-height:1.5em}

.nojs-table{width:100%;border-collapse:collapse;font-size:var(--t-sm);
  border:1px solid var(--line);border-radius:var(--r-lg)}
.nojs-table th,.nojs-table td{text-align:left;padding:9px var(--sp-4);
  border-top:1px solid var(--line)}
.nojs-table th{background:var(--band);font-size:var(--t-xs);color:var(--meta);
  text-transform:uppercase;letter-spacing:.07em;border-top:0}
.mono{font-family:var(--mono);font-size:var(--t-xs)}
.muted{color:var(--meta)}
.table-scroll{overflow-x:auto}


/* ============================================================ dark hero ===
   The one dark surface on the site. Palantir register: a full-bleed navy
   band, a short headline, a single action. Everything below it is white.
   No gradient, no glow — depth comes from layered opaque panels. */

.hero-dark{
  background:var(--navy);
  color:#E8EDF4;
  padding:var(--sp-9) 0 var(--sp-8);
  overflow:hidden;
}
.hero-dark h1{
  color:#fff;
  font-size:3.5rem;
  line-height:1.06;
  letter-spacing:-.03em;
  max-width:14ch;
}
.hero-dark .lede{
  color:#B9C6D6;
  font-size:var(--t-lg);
  margin-top:var(--sp-5);
  max-width:46ch;
}
.hero-dark .label{color:#8FA3BA}
.hero-dark .hero-actions{margin-top:var(--sp-7)}

/* On navy the primary action inverts: white field, navy label. */
.btn-invert{background:#fff;color:var(--navy);border-color:#fff}
.btn-invert:hover{background:#E8EDF4;border-color:#E8EDF4}
.hero-dark .link-arrow{color:#B9C6D6}
.hero-dark .link-arrow:hover{color:#fff}

.hero-dark-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:var(--sp-8);
  align-items:center;
}
@media(max-width:980px){
  .hero-dark-grid{grid-template-columns:1fr;gap:var(--sp-8)}
  .hero-dark h1{font-size:2.5rem;max-width:18ch}
}
@media(max-width:560px){
  .hero-dark{padding:var(--sp-8) 0}
  .hero-dark h1{font-size:2.125rem}
  .hero-dark .lede{font-size:var(--t-md)}
}

/* ---- the memo, as a product screen ---- */
/* Three stacked planes. The two behind are opaque-on-navy panels, not blur
   and not glass; they read as depth because they are offset and darker. */

/* A flat product screen. No stacked planes, no shadow, no perspective —
   a single white surface with a hairline edge against the navy. */
.screen{position:relative}
.screen-face{
  background:#fff;
  border:1px solid rgba(255,255,255,.18);
  border-radius:var(--r-lg);
  overflow:hidden;
}
.screen-bar{
  display:flex;align-items:center;justify-content:space-between;
  padding:11px var(--sp-4);
  background:var(--band);
  border-bottom:1px solid var(--line);
}
.screen-bar .t{font-size:var(--t-xs);font-weight:600;color:var(--ink);
  letter-spacing:.01em}
.screen-bar .m{font-family:var(--mono);font-size:10px;color:var(--meta)}
.screen-body{padding:var(--sp-2) var(--sp-4) var(--sp-4)}

.screen-row{
  display:grid;grid-template-columns:auto 1fr;gap:var(--sp-3);
  align-items:start;
  padding:var(--sp-3) 0;
  border-bottom:1px solid var(--line);
}
.screen-row:last-child{border-bottom:0}
.screen-row .who{font-family:var(--mono);font-size:10px;color:var(--meta);
  display:block;margin-bottom:3px}
.screen-row .why{font-size:var(--t-xs);color:var(--body);line-height:1.45}
.screen-row .code{font-family:var(--mono);font-size:9.5px;color:var(--meta);
  display:block;margin-top:5px;word-break:break-word}
.screen-foot{
  padding:10px var(--sp-4);
  background:var(--band);
  border-top:1px solid var(--line);
  font-size:10px;color:var(--meta);
}

@media(max-width:560px){
  .screen-bar{flex-direction:column;align-items:flex-start;gap:3px}
  .screen-bar .m{font-size:9.5px}
  .screen-row .why{font-size:var(--t-sm)}
}
@media(max-width:980px){
  .screen{max-width:520px}
}


/* ---- nav over the dark band ---- */
/* Opaque navy at the top of a dark-hero page, white once scrolled past it.
   With JS off it stays navy, which is legible against white content too. */
body.nav-dark .nav{background:var(--navy);border-bottom-color:rgba(255,255,255,.12)}
body.nav-dark .nav .brand{color:#fff}
body.nav-dark .nav .brand svg{color:#fff}
body.nav-dark .nav-links a,
body.nav-dark .nav-trigger{color:#B9C6D6}
body.nav-dark .nav-links a:hover,
body.nav-dark .nav-trigger:hover{color:#fff}
body.nav-dark .nav-trigger svg{color:#8FA3BA}
body.nav-dark .nav-toggle{border-color:rgba(255,255,255,.28);background:transparent;color:#fff}
body.nav-dark .nav-cta{background:#fff;color:var(--navy);border-color:#fff}
body.nav-dark .nav-cta:hover{background:#E8EDF4;border-color:#E8EDF4}
body.nav-dark .nav-menu{background:#fff}
body.nav-dark .nav-menu a{color:var(--ink)}
body.nav-dark.nav-scrolled .nav{background:#fff;border-bottom-color:var(--line)}
body.nav-dark.nav-scrolled .nav .brand{color:var(--ink)}
body.nav-dark.nav-scrolled .nav .brand svg{color:var(--navy)}
body.nav-dark.nav-scrolled .nav-links a,
body.nav-dark.nav-scrolled .nav-trigger{color:var(--body)}
body.nav-dark.nav-scrolled .nav-links a:hover,
body.nav-dark.nav-scrolled .nav-trigger:hover{color:var(--ink)}
body.nav-dark.nav-scrolled .nav-toggle{border-color:var(--line-strong);color:var(--ink)}
body.nav-dark.nav-scrolled .nav-cta{background:var(--navy);color:#fff;border-color:var(--navy)}
@media(min-width:901px){
  body.nav-dark .nav,body.nav-dark .nav .brand,body.nav-dark .nav-links a,
  body.nav-dark .nav-trigger,body.nav-dark .nav-cta{transition:background-color .25s ease,color .25s ease,border-color .25s ease}
}

/* ===================================================================== v2 ===
   Hero depth, scroll reveals, the data-flow diagram, the exposure chart and
   the contact pill. Everything here degrades to a static, legible page with
   JS off and with prefers-reduced-motion set.
   ========================================================================= */

/* --- sticky translucent nav ---------------------------------------------- */
/* The nav is already sticky. Over the dark band it is navy-on-navy; once past
   it, it frosts over white content instead of sitting flat on it. */
.nav{
  background:rgba(255,255,255,.93);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
  backdrop-filter:saturate(180%) blur(12px);
}
@supports not (backdrop-filter:blur(1px)){
  .nav{background:var(--white)}
}
/* At the top of a dark hero the nav is part of the band, so it is solid: a
   translucent navy over white page ground washes out to grey and reads as a
   separate lighter strip above the hero rather than the top of it. Frosting
   only earns its keep once there is content moving underneath. */
body.nav-dark .nav{
  background:var(--navy);
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  border-bottom-color:transparent;
}
body.nav-dark.nav-scrolled .nav{
  background:rgba(255,255,255,.93);
  border-bottom-color:var(--line);
}
@supports not (backdrop-filter:blur(1px)){
  body.nav-dark.nav-scrolled .nav{background:var(--white)}
}

/* --- hero ---------------------------------------------------------------- */
.hero-copy{max-width:30rem}
.hero-fine{color:#8FA3BA;margin-top:var(--sp-6)}

/* --- the layered product screen ------------------------------------------ */
/* Three surfaces, offset and scaled, so the memo reads as an object with
   thickness rather than a screenshot pasted on a background. */
.screen-stack{position:relative;padding-top:20px}
.screen-layer{
  position:absolute;top:20px;
  /* The stack is padded 20px at the top to make room for the lifted layers, so
     a layer's own height is the face's height, not the padded box's. */
  height:calc(100% - 20px);border-radius:var(--r-lg);
  border:1px solid rgba(255,255,255,.11);
  background:rgba(255,255,255,.05);
  pointer-events:none;
}
/* Inset symmetrically and lifted, so the stack peeks evenly on both shoulders
   instead of listing to one side. */
.screen-layer--2{left:18px;right:18px;transform:translateY(-10px)}
.screen-layer--3{left:36px;right:36px;transform:translateY(-20px);opacity:.55}
.screen-face{
  position:relative;
  box-shadow:0 1px 0 rgba(255,255,255,.07) inset,
             0 18px 40px -12px rgba(0,0,0,.55),
             0 60px 90px -40px rgba(0,0,0,.45);
}
.screen-row .why{display:block}
.screen-row .code{display:inline-block;margin-top:6px}

/* --- scroll reveals ------------------------------------------------------ */
/* Opt-in: a section only hides itself when JS is present to reveal it, so the
   page is complete without scripting. */
.js .reveal{opacity:0;transform:translateY(14px);
  transition:opacity .5s ease,transform .5s ease}
.js .reveal.is-in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .reveal{opacity:1;transform:none;transition:none}
}

/* --- data-flow diagram --------------------------------------------------- */
.flow-wrap{margin:0 0 var(--sp-8)}
.flow-wrap figcaption{margin-top:var(--sp-5);max-width:var(--measure)}
/* Two figures, one diagram. The wide one keeps a 520px floor because its
   labels stop being readable below that, which on a phone meant a figure cut
   off at the right edge inside a scroller nobody could see was scrollable.
   The stacked variant carries the same four steps down the page instead, so
   the narrow screen gets a figure that fits rather than one it has to drag.
   Exactly one is displayed, so exactly one reaches the accessibility tree. */
.flow{width:100%;height:auto;display:block}
.flow--tall{display:none;max-width:340px;margin:0 auto}
.fx-box{fill:none;stroke:var(--line-strong);stroke-width:1;
  stroke-dasharray:4 4}
.fx-boundary{font-family:var(--sans);font-weight:600;fill:var(--meta);
  letter-spacing:.08em}
.fx-node rect{fill:var(--white);stroke:var(--line-strong);stroke-width:1}
.fx-node--solid rect{fill:var(--navy);stroke:var(--navy)}
.fx-node--solid .fx-t{fill:#fff}
.fx-node--solid .fx-s{fill:#AFC2D6}
.fx-t{font-family:var(--sans);font-weight:600;fill:var(--ink)}
.fx-s{font-family:var(--sans);font-weight:400;fill:var(--meta)}
.fx-arrow{stroke:var(--navy);stroke-width:1.5}
.fx-head{fill:var(--navy)}
/* The blocked outbound call is a load-bearing part of this figure, not a
   hairline rule, so it does not use --line-strong: at 1.6:1 on white the
   dashes were invisible and only the strike showed. #7A838E is 4.2:1,
   past the 3:1 WCAG asks of a graphical object. */
.fx-out{stroke:#7A838E;stroke-width:1.5;stroke-dasharray:3 3}
.fx-bar line{stroke:var(--fail);stroke-width:2}
.fx-out-t{font-family:var(--sans);font-weight:400;fill:var(--meta)}

/* Animated on scroll: nodes settle in sequence, arrows draw themselves. */
.js .reveal .fx-node:not(.fx-node--static){opacity:0;transform:translateY(8px)}
.js .reveal .fx-arrow{stroke-dasharray:24;stroke-dashoffset:24}
.js .reveal.is-in .fx-node{
  animation:fxIn .42s ease forwards;
  animation-delay:calc(.10s + var(--i) * .11s);
}
.js .reveal.is-in .fx-arrow{
  animation:fxDraw .3s ease forwards;
  animation-delay:calc(.26s + var(--i) * .11s);
}
@keyframes fxIn{to{opacity:1;transform:none}}
@keyframes fxDraw{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){
  .js .reveal .fx-node{opacity:1;transform:none}
  .js .reveal .fx-arrow{stroke-dasharray:none;stroke-dashoffset:0}
  .js .reveal.is-in .fx-node,.js .reveal.is-in .fx-arrow{animation:none}
}

/* The fact strip arrives item by item, left to right. Delays are on
   nth-child rather than a --i custom property, because unlike the figure
   nodes these items are hand-authored markup and should not have to carry an
   index that the stylesheet can work out for itself. Five items today on both
   strips; six covered, for headroom. */
.js .reveal .facts > div{opacity:0;transform:translateY(6px)}
.js .reveal.is-in .facts > div{animation:fxIn .42s ease forwards}
.js .reveal.is-in .facts > div:nth-child(1){animation-delay:.06s}
.js .reveal.is-in .facts > div:nth-child(2){animation-delay:.15s}
.js .reveal.is-in .facts > div:nth-child(3){animation-delay:.24s}
.js .reveal.is-in .facts > div:nth-child(4){animation-delay:.33s}
.js .reveal.is-in .facts > div:nth-child(5){animation-delay:.42s}
.js .reveal.is-in .facts > div:nth-child(6){animation-delay:.51s}
/* Same floor as the figures: the settled state, forced by the timer. */
.js .reveal.is-done .facts > div{animation:none;opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){
  .js .reveal .facts > div{opacity:1;transform:none}
  .js .reveal.is-in .facts > div{animation:none}
}

/* --- exposure chart ------------------------------------------------------ */
.chart-wrap{margin:0}
.chart-wrap figcaption{margin-top:var(--sp-5);max-width:var(--measure)}
.chart{width:100%;height:auto;display:block}
/* Same two-variant arrangement as the data-flow figure, for the same reason:
   SVG type is in user units, so the wide chart's 11-unit labels render at
   about 5px once its 720-unit viewBox is squeezed into a phone column. */
.chart--narrow{display:none;max-width:380px}
.cg{stroke:var(--line);stroke-width:1}
.ca{font-family:var(--sans);font-weight:400;fill:var(--meta)}
.cfill{fill:rgba(22,49,79,.06)}
.cline{fill:none;stroke:var(--navy);stroke-width:2;
  stroke-linejoin:round;stroke-linecap:round}
.cmark{stroke:var(--review);stroke-width:1.5;stroke-dasharray:3 3}
.cdot{fill:var(--review);stroke:var(--white);stroke-width:2}
.cmt{font-family:var(--sans);font-weight:600;fill:var(--review)}
/* The line draws itself once, left to right. */
.js .reveal .cline{stroke-dasharray:2400;stroke-dashoffset:2400}
.js .reveal .cfill,.js .reveal .cmark,
.js .reveal .cdot,.js .reveal .cmt{opacity:0}
.js .reveal.is-in .cline{animation:cDraw 1.1s ease forwards}
.js .reveal.is-in .cfill{animation:cFade .5s ease .5s forwards}
.js .reveal.is-in .cmark,.js .reveal.is-in .cdot,
.js .reveal.is-in .cmt{animation:cFade .4s ease .95s forwards}
@keyframes cDraw{to{stroke-dashoffset:0}}
@keyframes cFade{to{opacity:1}}
/* The settled state, forced by reveal.js a beat after the animations were due
   to finish. Everything above hides an element until a keyframe moves it, so
   if the animation timeline never advances the element never appears. This is
   the floor under that: where the animations ran, it is a no-op.
   `.cmark` keeps its own dasharray, because the marker line is meant to be
   dashed; only the two self-drawing paths get theirs cleared. */
.js .reveal.is-done .fx-node,
.js .reveal.is-done .cfill,
.js .reveal.is-done .cmark,
.js .reveal.is-done .cdot,
.js .reveal.is-done .cmt{animation:none;opacity:1;transform:none}
.js .reveal.is-done .fx-arrow,
.js .reveal.is-done .cline{
  animation:none;stroke-dasharray:none;stroke-dashoffset:0;
}

@media(prefers-reduced-motion:reduce){
  .js .reveal .cline{stroke-dasharray:none;stroke-dashoffset:0}
  .js .reveal .cfill,.js .reveal .cmark,
  .js .reveal .cdot,.js .reveal .cmt{opacity:1}
  .js .reveal.is-in .cline,.js .reveal.is-in .cfill,
  .js .reveal.is-in .cmark,.js .reveal.is-in .cdot,
  .js .reveal.is-in .cmt{animation:none}
}

/* --- steps beside a diagram ---------------------------------------------- */
/* A standalone class, not a modifier on `.steps`. `.steps > li` is a
   two-column grid with a numbered circle, and layering a modifier on top of it
   squeezed the copy into a sliver on narrow screens.
   Vertical, not a three-up. These steps carry real explanation now, including
   how the export is produced and how to verify the network claim, and a
   three-column grid turned that into three tall narrow columns of wildly
   uneven length. One column at a readable measure is what this much copy
   wants. */
.flow-steps{
  margin:0;padding:0;list-style:none;counter-reset:fs;
  border-top:1px solid var(--line);
}
.flow-steps li{
  counter-increment:fs;
  display:grid;grid-template-columns:auto 1fr;
  gap:var(--sp-5);
  padding:var(--sp-6) 0;
  border-bottom:1px solid var(--line);
}
/* The number, the heading and the paragraphs are all direct children of the
   li, so a bare two-column grid flowed them as [number, h3] then [p, p].
   Pin the number to the first cell and send every real child to column two,
   one row each. */
.flow-steps li > *{grid-column:2}
.flow-steps li::before{
  grid-column:1;grid-row:1;
  content:counter(fs);
  font-family:var(--mono);font-size:var(--t-sm);font-weight:600;
  color:var(--navy);font-variant-numeric:tabular-nums;
  width:28px;height:28px;display:grid;place-items:center;
  border:1px solid var(--line-strong);border-radius:50%;
  margin-top:2px;
}
.flow-steps h3{font-size:var(--t-lg);line-height:1.35;margin:0 0 var(--sp-4)}
.flow-steps p{margin:0;color:var(--body);max-width:var(--measure)}
.flow-steps p + p{margin-top:var(--sp-4)}
.flow-steps code{
  font-family:var(--mono);font-size:.875em;
  background:var(--wash);padding:1px 4px;border-radius:2px;
}

/* --- the contact pill ---------------------------------------------------- */
.pill{
  position:fixed;right:20px;bottom:20px;z-index:200;
  display:flex;align-items:stretch;gap:1px;
  border-radius:999px;overflow:hidden;
  background:var(--line);
  box-shadow:0 10px 28px -8px rgba(17,20,24,.28),
             0 2px 6px -2px rgba(17,20,24,.18);
}
.pill a{
  display:inline-flex;align-items:center;gap:7px;
  padding:11px 16px;background:var(--white);
  font:600 var(--t-sm)/1 var(--sans);color:var(--ink);
  text-decoration:none;white-space:nowrap;
}
.pill a:first-child{background:var(--navy);color:#fff}
.pill a:first-child:hover{background:var(--navy-hi)}
.pill a:last-child:hover{background:var(--band)}
.pill svg{flex:none}
.pill a:focus-visible{outline:2px solid var(--navy);outline-offset:-2px}
.pill-short{display:none}
@media(max-width:640px){
  .pill{right:10px;bottom:10px;left:10px}
  .pill a{flex:1;justify-content:center;padding:12px 8px}
  .pill a{font-size:var(--t-xs)}
  /* Both destinations keep a readable label on a phone; only the call label is
     shortened. An icon on its own does not say "email". */
  .pill-long{display:none}
  .pill-short{display:inline}
}
/* The pill is fixed, so the page needs room to scroll clear of it or it sits
   permanently on top of the last thing anyone reads. */
body{padding-bottom:0}
@media(max-width:640px){
  body{padding-bottom:64px}
}

/* --- responsive ---------------------------------------------------------- */
@media(max-width:900px){
  /* Stack the number above the heading rather than beside it. A single
     column of 1fr still spawns an implicit second column for anything asking
     for `grid-column:2`, so the children have to be moved back to column one
     explicitly; without that the text kept a 45px indent it cannot afford at
     375, and paragraphs wrapped every five words. */
  .flow-steps li{grid-template-columns:1fr;gap:0}
  .flow-steps li > *{grid-column:1}
  .flow-steps li::before{grid-column:1;grid-row:1;margin-bottom:var(--sp-4)}
  .screen-layer--2,.screen-layer--3{display:none}
  .screen-stack{padding-top:0}
}
@media(max-width:640px){
  .hero-copy{max-width:none}
  .flow--wide{display:none}
  .flow--tall{display:block}
  .chart--wide{display:none}
  .chart--narrow{display:block}
  /* The 420px floor and the scroller it needed are gone: they existed to keep
     the wide chart's labels legible on a phone, which is what the narrow
     variant now does properly. `min-width` also beat the variant's
     `max-width`, so leaving it in force-sized the narrow chart to 420 inside a
     327 column and clipped its last month off the right edge. */
}

/* --- shared figure language ---------------------------------------------- */
/* One vocabulary for every page figure, so a reader recognises a Delegate
   diagram across the site: white nodes, navy for the thing that acts, a dashed
   boundary for anything that must not be crossed, and the same two type sizes
   throughout. Sizes live in the SVG in user units so a figure scales whole. */
.fig{width:100%;height:auto;display:block}
.fig-wrap{margin:0}
.fig-wrap figcaption{margin-top:var(--sp-5);max-width:var(--measure);
  color:var(--meta);font-size:var(--t-sm)}
.fig-box{fill:none;stroke:var(--line-strong);stroke-width:1;stroke-dasharray:4 4}
.fig-node{fill:var(--white);stroke:var(--line-strong);stroke-width:1}
.fig-node--accent{fill:var(--navy);stroke:var(--navy)}
.fig-node--quiet{fill:var(--band);stroke:var(--line)}
.fig-t{font-family:var(--sans);font-weight:600;fill:var(--ink)}
.fig-t--inv{fill:#fff}
.fig-s{font-family:var(--sans);font-weight:400;fill:var(--meta)}
.fig-s--inv{fill:#AFC2D6}
.fig-k{font-family:var(--sans);font-weight:600;fill:var(--meta);
  letter-spacing:.08em}
.fig-line{stroke:var(--navy);stroke-width:1.5;fill:none}
.fig-line--quiet{stroke:var(--line-strong);stroke-width:1.5;fill:none}
.fig-line--dash{stroke:var(--line-strong);stroke-width:1.5;fill:none;
  stroke-dasharray:3 3}
.fig-head{fill:var(--navy)}
.fig-bar{stroke:var(--fail);stroke-width:2}
.fig-fill{fill:rgba(22,49,79,.07)}
.fig-pass{fill:var(--pass)}
.fig-review{fill:var(--review)}
.fig-fail{fill:var(--fail)}
.fig-dot{fill:var(--navy)}
.fig-dot--quiet{fill:var(--line-strong)}
/* Figures animate with the section that holds them, on the same terms. */
.js .reveal .fig-node:not(.fx-node--static),
.js .reveal .fig-row{opacity:0;transform:translateY(8px)}
.js .reveal.is-in .fig-node,.js .reveal.is-in .fig-row{
  animation:fxIn .42s ease forwards;
  animation-delay:calc(.08s + var(--i,0) * .09s)}
.js .reveal .fig-line,.js .reveal .fig-line--quiet{
  stroke-dasharray:600;stroke-dashoffset:600}
.js .reveal.is-in .fig-line,.js .reveal.is-in .fig-line--quiet{
  animation:fxDraw .9s ease .2s forwards}
@media(prefers-reduced-motion:reduce){
  .js .reveal .fig-node,.js .reveal .fig-row{opacity:1;transform:none}
  .js .reveal .fig-line,.js .reveal .fig-line--quiet{
    stroke-dasharray:none;stroke-dashoffset:0}
  .js .reveal.is-in .fig-node,.js .reveal.is-in .fig-row,
  .js .reveal.is-in .fig-line,.js .reveal.is-in .fig-line--quiet{animation:none}
}
@media(max-width:640px){
  .fig-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .fig{min-width:460px}
}

/* --- pill must not sit on the footer links ------------------------------- */
/* The footer is the one place on the page that is itself a set of links, so a
   floating pill parked over it costs more than it earns. It lifts out of the
   way while the footer is in view, and hides outright on a phone where the
   pill is full width and would cover the footer entirely. */
.pill{transition:opacity .22s ease,transform .22s ease}
body.footer-in-view .pill{
  opacity:0;transform:translateY(12px);pointer-events:none;
}
@media(prefers-reduced-motion:reduce){
  .pill{transition:none}
}