/* Accessible Practice design system.
   Palette, type and surfaces follow the Outland Sight house style: cool
   clinical blue-grey ground, frosted white cards, one vivid blue accent.
   Severity colours are semantic and separate from the accent. */

:root{
  /* ground and surfaces */
  --paper:#eef1f6;
  --card:rgba(255,255,255,.62);
  --card-solid:#ffffff;
  --card-edge:rgba(255,255,255,.85);
  --well:rgba(255,255,255,.42);

  /* ink */
  --ink:#1c2a44;
  --body:#33415c;
  --muted:#4b5a73;
  --faint:#7c8aa3;

  /* accent */
  --blue:#2563eb;
  --blue-dk:#1d4fd0;
  --blue-soft:rgba(37,99,235,.09);
  --edge:rgba(28,42,68,.10);

  /* semantic severity, kept distinct from the accent */
  --crit:#b3261e;
  --crit-bg:#fdecea;
  --ser:#c2410c;
  --ser-bg:#fdf0e7;
  --mod:#a16207;
  --mod-bg:#fdf7e3;
  --min:#5b6875;
  --min-bg:#eef1f5;
  --good:#0f6b4f;
  --good-bg:#e6f4ee;

  /* elevation */
  --lift:0 8px 20px rgba(28,42,68,.08);
  --lift-lg:0 20px 40px rgba(28,42,68,.14);

  --display:"Space Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --text:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Consolas,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}

body{
  margin:0;
  color:var(--body);
  background:var(--paper);
  font-family:var(--text);
  font-size:17px;
  line-height:1.68;
  -webkit-font-smoothing:antialiased;
  position:relative;
  overflow-x:hidden;
}

/* Soft radial blooms, the signature of the house style. Fixed so they read as
   light in the room rather than decoration that scrolls past. */
body::before,body::after{
  content:"";position:fixed;z-index:-1;pointer-events:none;border-radius:50%;
}
body::before{
  width:1100px;height:1100px;top:-420px;left:-260px;
  background:radial-gradient(circle,rgba(158,193,238,.55) 0%,rgba(158,193,238,.26) 40%,rgba(158,193,238,0) 75%);
}
body::after{
  width:900px;height:900px;bottom:-380px;right:-220px;
  background:radial-gradient(circle,rgba(124,151,201,.34) 0%,rgba(124,151,201,.16) 40%,rgba(124,151,201,0) 75%);
}

/* Three widths, chosen by what the content is:
   .wrap        prose, held near 70 characters because that is what reads
   .wrap.wide   marketing sections, chrome, anything grid-shaped
   .wrap.mid    lists and results, wider than prose but still scannable */
.wrap{max-width:700px;margin:0 auto;padding:0 24px}
.wrap.mid{max-width:860px}
.wrap.wide{max-width:1120px}
/* Text inside a wide section still needs a reading measure. */
.measure{max-width:660px}
.measure.center{margin-left:auto;margin-right:auto}

h1,h2,h3,h4,.display,.brand,.pill,.btn,.chip,.stat b,th,.eyebrow,.num{font-family:var(--display)}
h1{font-size:clamp(30px,5vw,44px);line-height:1.12;letter-spacing:-.028em;font-weight:700;color:var(--ink);margin:0 0 16px;text-wrap:balance}
h2{font-size:clamp(21px,3.2vw,28px);line-height:1.2;letter-spacing:-.022em;font-weight:600;color:var(--ink);margin:0 0 14px;text-wrap:balance}
h3{font-size:17.5px;line-height:1.35;letter-spacing:-.012em;font-weight:600;color:var(--ink);margin:0 0 6px}
p{margin:0 0 18px}
strong{font-weight:600;color:var(--ink)}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
a:focus-visible,button:focus-visible,input:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:4px}
code{font-family:var(--mono);font-size:.86em;background:var(--blue-soft);color:var(--ink);padding:.12em .4em;border-radius:5px}
ul,ol{padding-left:22px}
li{margin-bottom:8px}
hr{border:0;border-top:1px solid var(--edge);margin:40px 0}

/* ---------- masthead: floating frosted pill ---------- */
.masthead{padding:20px 0 0}
.masthead .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{
  display:inline-flex;align-items:center;gap:9px;
  font-weight:700;font-size:17px;letter-spacing:-.022em;color:var(--ink);
}
.brand:hover{text-decoration:none}
.brand span{color:var(--blue)}
.brand svg{flex:none}
.pill{
  display:flex;gap:4px;align-items:center;
  background:rgba(255,255,255,.55);border:1px solid var(--card-edge);
  border-radius:9999px;padding:5px;box-shadow:var(--lift);
  backdrop-filter:blur(10px);
}
.pill a{
  font-size:14px;font-weight:500;color:var(--muted);
  padding:7px 15px;border-radius:9999px;
}
.pill a:hover{color:var(--ink);background:rgba(255,255,255,.75);text-decoration:none}
.pill a[aria-current]{color:var(--blue);background:#fff}

/* ---------- sections ---------- */
section{padding:52px 0}
.eyebrow{font-size:13px;font-weight:600;color:var(--blue);margin:0 0 10px;letter-spacing:0}
.lede{font-size:19.5px;line-height:1.58;color:var(--body);margin-bottom:26px}
.cap{font-size:14.5px;color:var(--muted);margin:12px 0 0;line-height:1.6}

/* ---------- surfaces ---------- */
.card{
  background:var(--card);border:1px solid var(--card-edge);border-radius:16px;
  padding:24px;box-shadow:var(--lift);backdrop-filter:blur(10px);
}
.card.solid{background:var(--card-solid)}
.note{
  background:var(--well);border:1px solid var(--card-edge);border-left:3px solid var(--blue);
  border-radius:4px 14px 14px 4px;padding:18px 20px;margin:24px 0;backdrop-filter:blur(6px);
}
.note.alert{border-left-color:var(--crit);background:rgba(253,236,234,.72)}
.note.good{border-left-color:var(--good);background:rgba(230,244,238,.72)}
.note p:last-child{margin-bottom:0}
.note h3{margin-bottom:8px}

/* ---------- buttons ---------- */
.btn{
  display:inline-block;text-align:center;font-weight:600;font-size:15.5px;
  padding:13px 26px;border-radius:9999px;border:1px solid var(--blue);
  background:var(--blue);color:#fff;cursor:pointer;
  box-shadow:0 6px 16px rgba(37,99,235,.22);
}
.btn:hover{background:var(--blue-dk);border-color:var(--blue-dk);color:#fff;text-decoration:none}
.btn.ghost{background:rgba(255,255,255,.7);color:var(--blue);box-shadow:var(--lift)}
.btn.ghost:hover{background:#fff;color:var(--blue-dk)}
.btn.block{display:block;width:100%}

/* ---------- forms ---------- */
label{display:block;font-size:12.5px;font-weight:600;color:var(--muted);margin-bottom:6px;font-family:var(--display)}
input{
  width:100%;font-family:var(--text);font-size:15.5px;padding:12px 14px;color:var(--ink);
  background:#fff;border:1px solid rgba(28,42,68,.16);border-radius:10px;
}
input::placeholder{color:var(--faint)}
input:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px var(--blue-soft)}
.fields{display:grid;gap:12px;grid-template-columns:1fr 1fr}
.fields .full{grid-column:1/-1}
.fine{font-size:12.5px;color:var(--faint);line-height:1.55;margin:12px 0 0}

/* ---------- ledger: label/value rows, reads like a chart ---------- */
.ledger{margin:22px 0 4px;border-top:1px solid rgba(28,42,68,.22)}
.ledger div{
  display:flex;gap:18px;justify-content:space-between;align-items:baseline;
  padding:13px 2px;border-bottom:1px solid var(--edge);font-size:15.5px;
}
.ledger .k{color:var(--body);max-width:62%}
.ledger .v{font-weight:600;color:var(--ink);text-align:right;white-space:nowrap;font-family:var(--display)}
.ledger .v.hot{color:var(--crit)}

/* ---------- tables ---------- */
.tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;font-size:14.5px}
th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--edge);vertical-align:top}
th{font-size:12px;font-weight:600;color:var(--muted);letter-spacing:.02em}
td.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600;color:var(--ink)}
tbody tr:last-child td{border-bottom:0}

/* ---------- severity ---------- */
.chip{
  display:inline-block;font-size:11.5px;font-weight:600;padding:3px 10px;
  border-radius:9999px;white-space:nowrap;
}
.chip.critical{background:var(--crit-bg);color:var(--crit)}
.chip.serious{background:var(--ser-bg);color:var(--ser)}
.chip.moderate{background:var(--mod-bg);color:var(--mod)}
.chip.minor{background:var(--min-bg);color:var(--min)}
.chip.neutral{background:var(--blue-soft);color:var(--blue)}

.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:24px 0}
.stat{
  background:var(--card);border:1px solid var(--card-edge);border-radius:14px;
  padding:15px 16px;box-shadow:var(--lift);
}
.stat b{display:block;font-size:26px;font-weight:700;letter-spacing:-.025em;line-height:1.1;color:var(--ink)}
.stat span{font-size:11.5px;color:var(--muted);font-weight:500}
.stat.critical b{color:var(--crit)}
.stat.serious b{color:var(--ser)}
.stat.moderate b{color:var(--mod)}
.stat.minor b{color:var(--min)}

/* ---------- issue blocks ---------- */
.issue{
  background:var(--card);border:1px solid var(--card-edge);border-radius:14px;
  padding:19px 21px;margin:12px 0;box-shadow:var(--lift);border-left:4px solid var(--min);
}
.issue.critical{border-left-color:var(--crit)}
.issue.serious{border-left-color:var(--ser)}
.issue.moderate{border-left-color:var(--mod)}
.issue.minor{border-left-color:var(--min)}
.issue-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px}
.issue p{margin:0 0 8px;font-size:16px}
.issue .meta{margin:0;font-size:13px;color:var(--faint)}

/* ---------- numbered sequence ---------- */
ol.steps{list-style:none;padding-left:0;counter-reset:s;margin:26px 0}
ol.steps li{
  counter-increment:s;position:relative;padding:0 0 24px 48px;
  border-left:2px solid var(--edge);margin-left:15px;
}
ol.steps li:last-child{border-left-color:transparent;padding-bottom:0}
ol.steps li::before{
  content:counter(s);position:absolute;left:-16px;top:-3px;width:30px;height:30px;
  border-radius:50%;background:var(--blue);color:#fff;font-family:var(--display);
  font-size:13.5px;font-weight:600;display:grid;place-items:center;
  box-shadow:0 4px 10px rgba(37,99,235,.28);
}
ol.steps h3{margin-bottom:3px}
ol.steps p{margin:0;color:var(--muted);font-size:16px}

/* ---------- checklist ---------- */
ul.check{list-style:none;padding:0;margin:20px 0}
ul.check li{
  position:relative;padding:9px 0 9px 28px;border-bottom:1px solid var(--edge);font-size:15.5px;
}
ul.check li::before{
  content:"";position:absolute;left:2px;top:15px;width:12px;height:12px;
  border:1.5px solid var(--faint);border-radius:3px;
}

/* ---------- pricing ---------- */
.plans{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:26px 0 10px}
.plan{
  background:var(--card);border:1px solid var(--card-edge);border-radius:16px;
  padding:24px;display:flex;flex-direction:column;box-shadow:var(--lift);
}
.plan.lead{border:2px solid var(--blue);box-shadow:var(--lift-lg);background:rgba(255,255,255,.78)}
.plan h3{font-size:16px;margin-bottom:2px}
.plan .price{font-family:var(--display);font-size:34px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--ink);margin:12px 0 2px}
.plan .per{font-size:13.5px;color:var(--muted);margin-bottom:16px}
.plan ul{margin:0 0 22px;padding-left:20px;font-size:15.5px;line-height:1.58;flex:1}
.plan li{margin-bottom:7px}
.plan .alt{font-size:13px;color:var(--muted);text-align:center;margin:11px 0 0}

/* ---------- footer ---------- */
footer{
  border-top:1px solid var(--edge);margin-top:40px;padding:32px 0 64px;
  font-size:13.5px;color:var(--muted);line-height:1.65;
}
footer p{margin:0 0 10px;max-width:660px}
footer a{color:var(--muted);text-decoration:underline}
footer a:hover{color:var(--blue)}

@media (max-width:1180px){
  .wrap.wide{max-width:960px}
}
@media (max-width:660px){
  body{font-size:16.5px}
  .fields{grid-template-columns:1fr}
  .plans{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .pill{display:none}
  section{padding:38px 0}
  body::before{width:640px;height:640px;top:-260px;left:-200px}
  body::after{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}
@media print{
  body{background:#fff}
  body::before,body::after{display:none}
  .pill,.btn{display:none}
  .card,.issue,.stat,.plan{box-shadow:none;background:#fff;backdrop-filter:none}
}

/* ---------- compatibility aliases ----------
   Earlier pages were written with their own class names. Aliasing them keeps
   one source of truth for the design without rewriting every page. */
.kicker{font-family:var(--display);font-size:13px;font-weight:600;color:var(--blue);margin:0 0 10px}
.standfirst{font-size:19.5px;line-height:1.58;color:var(--body);margin-bottom:26px}
.callout{
  background:var(--well);border:1px solid var(--card-edge);border-left:3px solid var(--blue);
  border-radius:4px 14px 14px 4px;padding:18px 20px;margin:24px 0;backdrop-filter:blur(6px);
}
.callout.warn{border-left-color:var(--crit);background:rgba(253,236,234,.72)}
.callout p:last-child{margin-bottom:0}
.callout h3{margin-top:0;margin-bottom:8px}
.box{
  background:var(--well);border:1px solid var(--card-edge);border-left:3px solid var(--blue);
  border-radius:4px 14px 14px 4px;padding:18px 20px;margin:22px 0;
}
.box p:last-child{margin-bottom:0}
.toc{
  background:var(--card);border:1px solid var(--card-edge);border-radius:16px;
  padding:20px 24px;margin:28px 0;box-shadow:var(--lift);
}
.toc h3{margin:0 0 10px;font-size:13px;color:var(--muted)}
.toc ol{margin:0;padding-left:20px;font-size:16px}
.toc li{margin-bottom:5px}
.byline{font-size:13.5px;color:var(--faint);border-top:1px solid var(--edge);
  border-bottom:1px solid var(--edge);padding:12px 0;margin-bottom:34px}
.cta{
  background:rgba(255,255,255,.78);border:2px solid var(--blue);border-radius:16px;
  padding:26px;margin:44px 0 0;box-shadow:var(--lift-lg);
}
.cta h3{margin:0 0 8px;font-size:19px}
.cta p{margin:0 0 18px;font-size:16.5px}
.updated{font-size:14px;color:var(--muted);margin-bottom:34px}
ol.road{list-style:none;padding-left:0;counter-reset:s;margin:26px 0}
ol.road li{counter-increment:s;position:relative;padding:0 0 24px 48px;
  border-left:2px solid var(--edge);margin-left:15px}
ol.road li:last-child{border-left-color:transparent;padding-bottom:0}
ol.road li::before{content:counter(s);position:absolute;left:-16px;top:-3px;width:30px;height:30px;
  border-radius:50%;background:var(--blue);color:#fff;font-family:var(--display);
  font-size:13.5px;font-weight:600;display:grid;place-items:center;box-shadow:0 4px 10px rgba(37,99,235,.28)}
ol.road h3{margin-bottom:3px}
ol.road p{margin:0;color:var(--muted);font-size:16px}
.sev{display:inline-block;font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:9999px;white-space:nowrap;font-family:var(--display)}
.sev.critical,.sev.c{background:var(--crit-bg);color:var(--crit)}
.sev.serious,.sev.s{background:var(--ser-bg);color:var(--ser)}
.sev.moderate,.sev.m{background:var(--mod-bg);color:var(--mod)}
.sev.minor{background:var(--min-bg);color:var(--min)}
.impact{margin:0 0 8px;font-size:16px}
.meta{margin:0;font-size:13px;color:var(--faint)}
.offer{background:rgba(255,255,255,.78);border:2px solid var(--blue);border-radius:16px;
  padding:26px;margin:40px 0 0;box-shadow:var(--lift-lg)}
.offer h2{margin:0 0 10px;font-size:21px}
.offer ul{margin:0 0 20px;padding-left:20px;font-size:16px}
.sub{font-size:15.5px;color:var(--muted);margin-bottom:30px}
.btn2{display:inline-block;font-weight:600;font-size:15px;padding:11px 22px;border-radius:9999px;
  background:rgba(255,255,255,.7);color:var(--blue);border:1px solid var(--blue);box-shadow:var(--lift);font-family:var(--display)}
.btn2:hover{background:var(--blue);color:#fff;text-decoration:none}
.tick{display:flex;align-items:center;gap:11px;font-family:var(--display);font-size:14px;
  font-weight:600;color:var(--good);margin-bottom:20px}
.price{font-family:var(--display);font-size:14px;color:var(--muted);margin:12px 0 0}

/* Pages without a hero need the masthead to sit off the content. */
.masthead{padding:20px 0 22px}
main > .wrap > .hero:first-child{padding-top:52px}
article{padding-top:44px}

/* kbd, used in the do-it-yourself article */
kbd{font-family:var(--mono);font-size:.85em;background:#fff;border:1px solid rgba(28,42,68,.18);
  border-bottom-width:2px;border-radius:5px;padding:.1em .4em;color:var(--ink);white-space:nowrap}
article{max-width:none}
article h2{margin-top:44px}
article h3{margin-top:28px;font-size:17px}