/* ==========================================================================
   HIRE WELL SCREENING SOLUTIONS — design system
   "Aperture" — built from the geometry of the HW mark: a split ring, opened.

   The mark is a circle broken into two arcs with a gap. That gap is the whole
   idea: an open boundary where a record enters, is verified, and leaves. Arcs,
   rings and orbital geometry carry the system; the logo blue is the signature.
   ========================================================================== */

/* ---------- typefaces (self-hosted, OFL, latin subset) ---------- */
@font-face{font-family:"Sora";font-style:normal;font-display:swap;font-weight:100 800;
  src:url("/assets/fonts/sora-var.woff2") format("woff2-variations")}
@font-face{font-family:"Inter";font-style:normal;font-display:swap;font-weight:100 900;
  src:url("/assets/fonts/inter-var.woff2") format("woff2-variations")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-display:swap;font-weight:100 800;
  src:url("/assets/fonts/jbmono-var.woff2") format("woff2-variations")}

:root{
  /* ---- brand blue, anchored to the logo ---- */
  --blue-50:#EEF5FE;  --blue-100:#D9E9FD; --blue-200:#B6D6FB; --blue-300:#7FC0F9;
  --blue-400:#49A2F6;                       /* THE LOGO BLUE — accent on dark, the mark itself */
  --blue-500:#1E82E8; --blue-600:#0B66CF;   /* action on light: 5.50:1 on white */
  --blue-700:#0A57B0; --blue-800:#08468E;  --blue-900:#082F5F;

  /* ---- neutrals: black, white, deep charcoal ---- */
  --ink-950:#070A0E; --ink-900:#0C0F14; --ink-800:#131822; --ink-700:#1C2230; --ink-600:#28303F;
  --slate-600:#4A5568; --slate-500:#667085; --slate-400:#98A2B3; --slate-300:#B7C0CD;
  --line-200:#E4E7EC; --line-100:#EEF1F5;
  --paper-50:#F7F9FC; --paper-25:#FBFCFE; --white:#FFFFFF;

  /* ---- functional ---- */
  --ok-600:#12805C; --ok-50:#E8F6F1;
  --warn-700:#9A5B00;
  --err-600:#C62F2F; --err-700:#A11F1F; --err-50:#FDF0F0; --err-200:#F3CFCF;

  /* ---- type ---- */
  --display:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,"SF Mono",Menlo,monospace;

  /* ---- elevation: soft, blue-tinted, enterprise ---- */
  --e1:0 1px 2px rgba(12,15,20,.05), 0 1px 3px rgba(12,15,20,.04);
  --e2:0 2px 6px rgba(12,15,20,.05), 0 10px 24px rgba(12,15,20,.07);
  --e3:0 4px 10px rgba(12,15,20,.06), 0 24px 56px rgba(10,50,110,.13);
  --glow:0 0 0 1px rgba(73,162,246,.28), 0 12px 40px rgba(11,102,207,.18);

  --r-sm:6px; --r-md:10px; --r-lg:16px; --r-xl:24px;
  --gutter:32px; --maxw:1240px; --maxw-wide:1400px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{margin:0; background:var(--white); color:var(--ink-900);
  font-family:var(--body); font-size:17px; line-height:1.6; letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
img,svg{max-width:100%}
a{color:var(--blue-600)}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important; scroll-behavior:auto!important}
}

.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter)}
.wrap-wide{max-width:var(--maxw-wide); margin:0 auto; padding:0 var(--gutter)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:16px; top:16px; z-index:200; background:var(--white); color:var(--ink-900);
  padding:12px 18px; border-radius:var(--r-sm); box-shadow:var(--e2); font-weight:600}

/* ==========================================================================
   TYPE SCALE
   ========================================================================== */
.t-d1,.t-d2,.t-d3{font-family:var(--display); font-weight:600; margin:0; letter-spacing:-.03em}
.t-d1{font-size:clamp(34px,5.0vw,60px); line-height:1.06}
.t-d2{font-size:clamp(28px,3.6vw,44px); line-height:1.10}
.t-d3{font-size:clamp(23px,2.4vw,31px); line-height:1.18; letter-spacing:-.024em}
.t-h4{font-family:var(--display); font-weight:600; font-size:19px; line-height:1.32;
  letter-spacing:-.018em; margin:0}
.t-lead{font-size:clamp(17px,1.35vw,20px); line-height:1.58; color:var(--slate-600); margin:0}
.t-body{font-size:17px; line-height:1.65; margin:0}
.t-sm{font-size:15px; line-height:1.6; color:var(--slate-600); margin:0}
.t-xs{font-size:13.5px; line-height:1.55; color:var(--slate-500); margin:0}
.measure-20{max-width:20ch} .measure-28{max-width:28ch}
.measure-46{max-width:46ch} .measure-64{max-width:64ch}
.t-data{font-family:var(--mono); font-size:14px; font-variant-numeric:tabular-nums; letter-spacing:-.01em}

/* eyebrow: mono label preceded by the split-ring glyph */
.eyebrow{display:inline-flex; align-items:center; gap:10px; margin:0 0 18px;
  font-family:var(--mono); font-weight:500; font-size:12.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--blue-600)}
.eyebrow::before{content:""; width:13px; height:13px; flex:none; border-radius:50%;
  border:2px solid currentColor; border-right-color:transparent; border-top-color:transparent;
  transform:rotate(-45deg)}

/* dark-surface text */
.on-dark{color:var(--white)}
.on-dark .t-lead,.on-dark .t-sm{color:var(--slate-300)}
.on-dark .t-xs{color:var(--slate-400)}
.on-dark .eyebrow{color:var(--blue-400)}
.on-dark a{color:var(--blue-300)}

/* ==========================================================================
   SECTIONS
   ========================================================================== */
section{padding:clamp(64px,7vw,116px) 0}
.s-white{background:var(--white)}
.s-paper{background:var(--paper-50)}
.s-ink{background:var(--ink-900); color:var(--white)}
.s-ink-deep{background:var(--ink-950); color:var(--white)}

/* arc rule — the divider, a shallow blue arc instead of a straight hairline */
.arcrule{display:block; width:100%; height:2px; border:0; margin:0;
  background:linear-gradient(90deg,transparent,var(--blue-200) 22%,var(--blue-400) 50%,var(--blue-200) 78%,transparent);
  opacity:.7}

/* gradient wash used sparingly on light sections */
.wash{position:relative; overflow:hidden}
.wash::before{content:""; position:absolute; inset:auto -10% 40% 45%; height:640px; z-index:0;
  background:radial-gradient(60% 60% at 60% 40%, rgba(73,162,246,.16), rgba(73,162,246,0) 70%);
  pointer-events:none}
.wash > *{position:relative; z-index:1}

/* ==========================================================================
   HEADER
   ========================================================================== */
.hdr{position:sticky; top:0; z-index:80; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--line-200)}
.hdr-in{display:flex; align-items:center; gap:28px; height:76px}
.brand{display:flex; align-items:center; gap:12px; text-decoration:none; flex:none; min-height:44px}
.brand img{width:38px; height:38px; display:block}
.brand .wm{font-family:var(--display); font-weight:600; font-size:16.5px; letter-spacing:-.024em;
  color:var(--ink-900); line-height:1.1; white-space:nowrap}
.brand .wm span{display:block; font-family:var(--mono); font-weight:400; font-size:9.5px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--slate-500); margin-top:3px}
.nav{display:flex; align-items:center; gap:4px; margin-left:auto}
.nav a{position:relative; font-size:15px; font-weight:500; color:var(--slate-600);
  text-decoration:none; padding:10px 13px; border-radius:var(--r-sm); min-height:44px;
  display:inline-flex; align-items:center; transition:color .16s ease, background .16s ease}
.nav a:hover{color:var(--ink-900); background:var(--blue-50)}
.nav a[aria-current="page"]{color:var(--blue-700); background:var(--blue-50)}
.hdr-cta{flex:none}
.hdr-mob{display:none; margin-left:auto; align-items:center; gap:10px}
@media (max-width:1099px){
  .nav,.hdr .hdr-cta{display:none}
  .hdr-mob{display:flex}
  .hdr{position:static}
}

/* mobile nav — <details> disclosure, no JavaScript */
.mnav{position:relative}
.mnav>summary{list-style:none; cursor:pointer; min-height:44px}
.mnav>summary::-webkit-details-marker{display:none}
.mnav>summary::after{content:""; display:inline-block; margin-left:9px; width:8px; height:8px;
  border-right:2px solid currentColor; border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px)}
.mnav[open]>summary::after{transform:rotate(-135deg) translateY(-1px)}
.mnav-panel{position:absolute; right:0; top:calc(100% + 12px); z-index:120; width:min(84vw,290px);
  background:var(--white); border:1px solid var(--line-200); border-radius:var(--r-md);
  box-shadow:var(--e3); padding:8px; display:grid; gap:2px}
.mnav-panel a{display:flex; align-items:center; min-height:46px; padding:0 14px;
  font-size:15.5px; font-weight:500; color:var(--ink-800); text-decoration:none; border-radius:var(--r-sm)}
.mnav-panel a:hover,.mnav-panel a[aria-current="page"]{background:var(--blue-50); color:var(--blue-700)}
.mnav-panel .sep{height:1px; background:var(--line-200); margin:6px 4px}

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--body); font-weight:600; font-size:15.5px; line-height:1;
  padding:15px 22px; min-height:48px; border-radius:var(--r-sm); border:1px solid transparent;
  text-decoration:none; cursor:pointer; white-space:nowrap;
  transition:background .16s ease, color .16s ease, box-shadow .16s ease, transform .16s ease}
.btn-sm{padding:11px 16px; min-height:44px; font-size:14.5px}
.btn-primary{background:var(--blue-600); color:var(--white); box-shadow:var(--e1)}
.btn-primary:hover{background:var(--blue-700); box-shadow:var(--e2); transform:translateY(-1px)}
.btn-secondary{background:var(--white); color:var(--ink-900); border-color:var(--line-200); box-shadow:var(--e1)}
.btn-secondary:hover{border-color:var(--blue-300); color:var(--blue-700)}
.btn-ghost{background:transparent; color:var(--blue-600); padding-left:0; padding-right:0; min-height:44px}
.btn-ghost::after{content:""; width:16px; height:9px; flex:none;
  background:currentColor; -webkit-mask:var(--arrow) center/contain no-repeat; mask:var(--arrow) center/contain no-repeat;
  transition:transform .16s ease}
.btn-ghost:hover::after{transform:translateX(4px)}
:root{--arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 9'%3E%3Cpath d='M0 4h13M9.5.5 13.5 4.5 9.5 8.5' fill='none' stroke='%23000' stroke-width='1.6'/%3E%3C/svg%3E")}
.on-dark .btn-secondary,.s-ink .btn-secondary,.s-ink-deep .btn-secondary{
  background:transparent; color:var(--white); border-color:rgba(255,255,255,.26); box-shadow:none}
.on-dark .btn-secondary:hover,.s-ink .btn-secondary:hover{background:rgba(255,255,255,.07); border-color:var(--blue-400); color:var(--white)}
.on-dark .btn-ghost,.s-ink .btn-ghost{color:var(--blue-300)}
.btns{display:flex; gap:14px; flex-wrap:wrap; align-items:center}
:focus-visible{outline:3px solid var(--blue-500); outline-offset:2px; border-radius:3px}
.s-ink :focus-visible,.s-ink-deep :focus-visible,.on-dark :focus-visible{outline-color:var(--blue-300)}

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{position:relative; overflow:hidden; background:
  radial-gradient(120% 90% at 82% 8%, rgba(73,162,246,.20), rgba(73,162,246,0) 58%),
  linear-gradient(180deg,var(--white) 0%,var(--paper-50) 100%)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(32px,4vw,64px); align-items:center; padding:clamp(34px,3.4vw,56px) 0 clamp(48px,5vw,84px)}
.hero-copy{position:relative; z-index:2}
.hero-art{position:relative; z-index:1}
.hero-art svg{display:block; width:100%; height:auto}
@media (max-width:1023px){
  .hero-grid{grid-template-columns:minmax(0,1fr); gap:36px; padding:40px 0 56px}
  .hero-art{order:2}
}

/* slow orbital motion on the hero ring, disabled under reduced motion */
@keyframes hw-spin{to{transform:rotate(360deg)}}
.orbit{transform-origin:center; animation:hw-spin 46s linear infinite}
.orbit-rev{transform-origin:center; animation:hw-spin 68s linear infinite reverse}

/* ==========================================================================
   CREDENTIAL STRIP — approved facts only, never fabricated logos
   ========================================================================== */
.creds{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;
  background:var(--line-200); border-top:1px solid var(--line-200); border-bottom:1px solid var(--line-200)}
.creds .c{background:var(--white); padding:24px 26px; display:flex; flex-direction:column; gap:7px}
.creds .k{font-family:var(--display); font-weight:600; font-size:16px; letter-spacing:-.018em; color:var(--ink-900)}
.creds .v{font-size:13.5px; line-height:1.5; color:var(--slate-500)}
@media (max-width:899px){.creds{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:479px){.creds{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   CARDS
   ========================================================================== */
.grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px}
.grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:26px}
.grid-4{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px}
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px,5vw,72px); align-items:center}
.split-a{grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr)}
@media (max-width:1023px){
  .grid-3,.grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .split,.split-a{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:699px){.grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)}}

.card{position:relative; background:var(--white); border:1px solid var(--line-200);
  border-radius:var(--r-lg); padding:30px 28px; box-shadow:var(--e1); overflow:hidden;
  transition:box-shadow .18s ease, transform .18s ease, border-color .18s ease}
.card::before{content:""; position:absolute; top:0; left:28px; right:28px; height:2px;
  background:linear-gradient(90deg,var(--blue-400),var(--blue-600)); opacity:0;
  transition:opacity .18s ease}
a.card,.card-link{display:block; text-decoration:none; color:inherit}
a.card:hover,.card:hover{box-shadow:var(--e2); transform:translateY(-2px); border-color:var(--blue-200)}
a.card:hover::before,.card:hover::before{opacity:1}
.card .t-h4{margin-bottom:10px}
.card-ico{width:44px; height:44px; margin-bottom:18px; display:block}
.card.on-ink{background:var(--ink-800); border-color:var(--ink-600); color:var(--white); box-shadow:none}
.card.on-ink .t-sm{color:var(--slate-300)}

/* ==========================================================================
   PROCESS — arc-numbered steps
   ========================================================================== */
.steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; background:var(--ink-700);
  border:1px solid var(--ink-700); border-radius:var(--r-lg); overflow:hidden}
.steps .st{background:var(--ink-900); padding:28px 26px 30px; position:relative}
.steps .st .n{display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px;
  border-radius:50%; border:1.5px solid var(--blue-400); border-right-color:transparent;
  font-family:var(--mono); font-size:12.5px; font-weight:500; color:var(--blue-400); margin-bottom:16px}
.steps .st h3{font-family:var(--display); font-weight:600; font-size:17.5px; letter-spacing:-.018em;
  margin:0 0 9px; color:var(--white)}
.steps .st p{margin:0; font-size:14.5px; line-height:1.6; color:var(--slate-300)}
@media (max-width:899px){.steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:599px){.steps{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   SPEC LIST — label/value rows
   ========================================================================== */
.speclist{list-style:none; margin:0; padding:0; border-top:1px solid var(--line-200)}
.speclist li{display:grid; grid-template-columns:minmax(150px,210px) 1fr; gap:20px;
  padding:20px 0; border-bottom:1px solid var(--line-200)}
.speclist dt,.speclist .k{font-family:var(--mono); font-size:12px; letter-spacing:.09em;
  text-transform:uppercase; color:var(--blue-700); margin:0}
.speclist .v{font-size:16px; line-height:1.6; color:var(--ink-800)}
.on-dark .speclist{border-color:var(--ink-600)}
.on-dark .speclist li{border-color:var(--ink-600)}
.on-dark .speclist .k{color:var(--blue-400)}
.on-dark .speclist .v{color:var(--slate-300)}
@media (max-width:699px){.speclist li{grid-template-columns:minmax(0,1fr); gap:7px}}

/* ==========================================================================
   COVERAGE TABLE
   ========================================================================== */
.tblwrap{border:1px solid var(--line-200); border-radius:var(--r-lg); overflow:hidden; background:var(--white)}
table.cov{width:100%; border-collapse:collapse; font-size:14.5px}
table.cov caption{text-align:left; padding:18px 20px; border-bottom:1px solid var(--line-200);
  font-size:14px; color:var(--slate-600)}
table.cov th{font-family:var(--mono); font-weight:500; font-size:11px; letter-spacing:.09em;
  text-transform:uppercase; text-align:left; color:var(--slate-600); background:var(--paper-50);
  padding:13px 18px; border-bottom:1px solid var(--line-200); white-space:nowrap}
table.cov td{padding:15px 18px; border-bottom:1px solid var(--line-100); vertical-align:middle}
table.cov tbody tr:last-child td{border-bottom:0}
table.cov tbody tr:hover{background:var(--blue-50)}
table.cov .num{font-family:var(--mono); font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap}
table.cov th.num{text-align:right}
table.cov .j{font-weight:600}
table.cov .j span{display:block; font-family:var(--mono); font-size:11px; letter-spacing:.07em;
  text-transform:uppercase; color:var(--slate-500); margin-top:3px; font-weight:400}
.covcards{display:none; gap:14px}
@media (max-width:899px){.tblwrap{display:none} .covcards{display:grid}}

/* method pill */
.pill{display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:999px;
  background:var(--blue-50); border:1px solid var(--blue-100); color:var(--blue-800);
  font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; white-space:nowrap}
.pill.alt{background:var(--paper-50); border-color:var(--line-200); color:var(--slate-600)}
.pill svg{flex:none}

/* ==========================================================================
   SPECIMEN GUARD — only ever rendered on the gated preview route
   ========================================================================== */
.spec-bar{background:var(--warn-700); color:#fff; padding:11px 0}
.spec-bar p{margin:0; font-family:var(--mono); font-size:12px; letter-spacing:.05em;
  text-transform:uppercase; display:flex; gap:16px; flex-wrap:wrap; align-items:center}
.spec-wrap{position:relative; isolation:isolate}
.spec-wrap::after{content:"SPECIMEN — NOT PRODUCTION DATA"; position:absolute; z-index:3; top:0; right:0;
  font-family:var(--mono); font-weight:500; font-size:10px; letter-spacing:.12em;
  padding:5px 10px; border-radius:0 var(--r-lg) 0 var(--r-sm); background:var(--warn-700); color:#fff}
.spec-wrap table.cov caption{padding-right:280px}

/* ==========================================================================
   FORMS
   ========================================================================== */
.field{display:flex; flex-direction:column; gap:8px; margin-bottom:20px}
.field label{font-size:14px; font-weight:600; color:var(--ink-800)}
.field .hint{font-size:13px; color:var(--slate-500); font-weight:400}
.field input,.field select,.field textarea{
  font-family:var(--body); font-size:16px; padding:13px 15px; min-height:48px; width:100%;
  border:1px solid var(--line-200); border-radius:var(--r-sm); background:var(--white);
  color:var(--ink-900); transition:border-color .16s ease, box-shadow .16s ease}
.field textarea{min-height:120px; resize:vertical; line-height:1.6}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--blue-500); box-shadow:0 0 0 4px rgba(30,130,232,.14); outline:none}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],.field select[aria-invalid="true"]{
  border-color:var(--err-600); background:var(--err-50)}
.fielderr{font-size:13.5px; font-weight:500; color:var(--err-700)}
.form2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:0 20px}
@media (max-width:699px){.form2{grid-template-columns:minmax(0,1fr)}}
.hp{position:absolute!important; width:1px; height:1px; overflow:hidden; clip-path:inset(50%);
  white-space:nowrap; border:0; padding:0; margin:-1px}
.formcard{background:var(--white); border:1px solid var(--line-200); border-radius:var(--r-lg);
  padding:clamp(24px,3vw,36px); box-shadow:var(--e2)}
.alert{border-radius:var(--r-md); padding:20px 22px; margin-bottom:26px; border:1px solid}
.alert p{margin:0}
.alert p+p{margin-top:9px; font-size:15px}
.alert .t{font-family:var(--display); font-weight:600; font-size:17px; letter-spacing:-.018em}
.alert-ok{background:var(--ok-50); border-color:#9ED6C2; color:#0A5741}
.alert-ok .t{color:var(--ok-600)}
.alert-err{background:var(--err-50); border-color:var(--err-200); color:var(--err-700)}
.alert-err .t{color:var(--err-700)}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.ftr{background:var(--ink-950); color:var(--slate-300); padding:72px 0 32px}
.ftr-grid{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:40px}
.ftr h2{font-family:var(--mono); font-size:11.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--white); margin:0 0 16px; font-weight:500}
.ftr ul{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.ftr ul a{display:block; padding:6px 0; min-height:24px; color:var(--slate-300);
  text-decoration:none; font-size:15px}
.ftr ul a:hover{color:var(--white); text-decoration:underline}
.ftr .brand .wm{color:var(--white)}
.ftr .brand .wm span{color:var(--slate-400)}
.ftr address{font-style:normal; font-size:14.5px; line-height:1.7; color:var(--slate-400); margin-top:18px}
.ftr address a{color:var(--blue-300); text-decoration:none}
.ftr address a:hover{text-decoration:underline}
.ftr-base{margin-top:52px; padding-top:26px; border-top:1px solid var(--ink-700);
  display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap;
  font-size:13.5px; color:var(--slate-400)}
@media (max-width:899px){.ftr-grid{grid-template-columns:1fr 1fr; gap:34px}}
@media (max-width:519px){.ftr-grid{grid-template-columns:minmax(0,1fr)}}

/* ==========================================================================
   MOBILE STICKY CTA — the single sticky element on mobile
   ========================================================================== */
.mcta{display:none}
@media (max-width:1099px){
  .mcta{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:90; gap:10px;
    padding:11px 16px calc(11px + env(safe-area-inset-bottom));
    background:rgba(255,255,255,.96); backdrop-filter:blur(10px); border-top:1px solid var(--line-200)}
  .mcta .btn{flex:1}
  body{padding-bottom:80px}
}

/* ==========================================================================
   PROSE (legal pages)
   ========================================================================== */
.prose{max-width:68ch}
.prose h2{font-family:var(--display); font-weight:600; font-size:24px; letter-spacing:-.022em; margin:44px 0 14px}
.prose h2:first-child{margin-top:0}
.prose h3{font-family:var(--display); font-weight:600; font-size:19px; margin:28px 0 10px}
.prose p,.prose li{font-size:16.5px; line-height:1.7}
.prose ul,.prose ol{padding-left:22px; margin:14px 0}
.prose li{margin-bottom:8px}
.toc{background:var(--paper-50); border:1px solid var(--line-200); border-radius:var(--r-lg); padding:24px}
.toc ul{list-style:none; margin:0; padding:0; display:grid; gap:4px}
.toc a{display:block; padding:6px 0; min-height:24px; font-size:15px; text-decoration:none}
.toc a:hover{text-decoration:underline}

/* ==========================================================================
   ERROR PAGES
   ========================================================================== */
.errpage{min-height:58vh; display:flex; align-items:center}
.errcode{font-family:var(--mono); font-size:13px; letter-spacing:.18em; color:var(--blue-400)}

/* ---------- utilities ---------- */
.mt-0{margin-top:0} .mb-0{margin-bottom:0}
.center{text-align:center; margin-left:auto; margin-right:auto}
.stack-sm > * + *{margin-top:12px}
.stack > * + *{margin-top:22px}
.sec-head{margin-bottom:clamp(34px,4vw,52px)}
.sec-head.row{display:flex; justify-content:space-between; align-items:flex-end; gap:32px; flex-wrap:wrap}

/* ==========================================================================
   MOBILE HEADER FIT — sized from measurement, not guesswork.
   At 375px the header measured 498px of content against 311px usable, so the
   brand and the controls both compress. Thresholds below are the measured
   points at which each element stops fitting.
   ========================================================================== */
@media (max-width:639px){
  :root{--gutter:20px}
}
@media (max-width:1099px){
  .hdr-in{gap:12px; height:70px}
}
@media (max-width:479px){
  .brand .wm span{display:none}
  .hdr-mob .btn,.mnav>summary{padding:11px 13px; font-size:14px}
  .hdr-mob{gap:8px}
}
@media (max-width:389px){
  /* the mark carries the brand; the wordmark stays available to screen readers */
  .hdr .brand .wm{position:absolute; width:1px; height:1px; overflow:hidden;
    clip-path:inset(50%); white-space:nowrap; margin:-1px; padding:0; border:0}
}

/* target size (WCAG 2.5.8): the footer email link measured 17px tall */
.ftr address a{display:inline-block; padding:4px 0; min-height:24px}

/* target size: breadcrumb and standalone mailto links measured 16-20px tall */
nav[aria-label="Breadcrumb"] a,
.speclist .v a,
.prose a[href^="mailto:"],
p a[href^="mailto:"]{display:inline-block; padding:3px 0; min-height:24px}