/* Public pages stylesheet: home (/), /audit, /signup, /privacy, /terms, /status.
   NOT the panel: public/index.html and the portal use /app.css ("Slate & ocean").
   Look (operator 2026-10-25, palette v2): our own identity, nothing navy or orange.
   Dark sections in deep green-slate ink, light sections on warm paper, a teal /
   sea-green accent, alternating full-bleed sections, Poppins headings, Open Sans
   body. Amber appears only as the HIGH severity colour (status, not brand).
   Hex values live in :root only. Fonts are self-hosted, latin subset, SIL OFL 1.1
   (licences in /fonts). The CSP is font-src 'self', so nothing is fetched from a font CDN.

   Contrast (WCAG 2.1, checked 2026-10-25; see SOC-HQ hq/reports/2026-10-25-developer-ui.md):
   Two accent tones, because no single teal passes both ways: white on #0F8F7E is only 4.00.
   Light surfaces: buttons #0C7D6E with white text 5.03 (hover #0B6E61, 6.15).
   Dark ink #12302A: headline accent, buttons, step numbers and the ladder highlight use
   mint #4FD1BA (7.53; ink text on mint 7.53). Body #CFDDD7 on ink 10.11, soft #A9C2B9 7.49,
   white on ink 14.17. Ink text #12302A on paper #F6F4EE 12.88. Accent-ink eyebrows #0B6E61
   on paper 5.59 / paper-2 #EFEBE1 5.16 / white 6.15 / our-column wash #E3F2EE 5.33.
   Muted #4F5D58 on white 6.91 / paper 6.28 / paper-2 5.80. Placeholder #6A746F on white
   4.84; field border #7F8A85 on white 3.57. HIGH badge #8A5A00 on #FBF1DC 5.28.
   Focus rings: ink on light surfaces, mint on ink. */

@font-face{font-family:'Poppins';font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/poppins-600.woff2) format('woff2')}
@font-face{font-family:'Poppins';font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/poppins-700.woff2) format('woff2')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400;font-display:swap;
  src:url(/fonts/open-sans-400.woff2) format('woff2')}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/open-sans-600.woff2) format('woff2')}
/* Metric-matched fallbacks: while the webfont loads, Arial is resized to the same
   box so the swap does not move the layout. */
@font-face{font-family:'Poppins Fallback';src:local('Arial'),local('ArialMT');
  ascent-override:93.62%;descent-override:31.21%;line-gap-override:8.92%;size-adjust:112.16%}
@font-face{font-family:'Open Sans Fallback';src:local('Arial'),local('ArialMT');
  ascent-override:101.65%;descent-override:27.86%;line-gap-override:0%;size-adjust:105.48%}

:root{
  --deep:#12302A; --deep-2:#1B3F37; --deep-line:#2E5A50; --on-dark:#CFDDD7; --on-dark-soft:#A9C2B9;
  --white:#FFFFFF; --paper:#F6F4EE; --paper-2:#EFEBE1; --line:#E4E0D6; --field:#7F8A85; --placeholder:#6A746F;
  --ink:#12302A; --ink-soft:#4F5D58; --accent-ink:#0B6E61;
  --accent:#0C7D6E; --accent-hover:#0B6E61; --accent-wash:#E3F2EE; --brand:#0F8F7E;
  --mint:#4FD1BA; --mint-hover:#7ADDCB; --dot-grey:#5E7069;
  --glow:0 4px 12px rgba(15,143,126,.28); --lift:0 12px 32px rgba(18,48,42,.16);
  /* severity words (the panel's four) and report details */
  --crit:#B42318; --crit-bg:#FBEDEB; --high:#8A5A00; --high-bg:#FBF1DC;
  --med:#3E5C76; --med-bg:#EDF1F5; --low:#57534E; --low-bg:#F1EEE8;
  --ok-ink:#2F6B3B; --ok-bg:#E8F3EA; --ok-edge:#B9DBC0; --danger-bg:#FBEDEB; --danger-edge:#F1C4BE;
  --fix-bg:#F3F1EA; --marker:#FFF1B8; --btn-off:#ECE9E1; --btn-off-ink:#59635F;
  --head:'Poppins','Poppins Fallback',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --sans:'Open Sans','Open Sans Fallback',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --r:20px; --r-btn:11px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}}
body{background:var(--deep);color:var(--ink);font:400 16px/1.65 var(--sans);overflow-x:hidden}
a{color:var(--ink);text-underline-offset:.2em;text-decoration-thickness:1px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--deep);outline-offset:3px;border-radius:4px}
.dark :focus-visible,body>footer :focus-visible{outline-color:var(--mint)}
.dark .card :focus-visible{outline-color:var(--deep)}
b,strong{font-weight:600}
.mono{font-family:var(--mono)}
.small{font-size:14px;line-height:1.6}
.soft{color:var(--ink-soft)}
.hide{display:none}
.skip{position:absolute;left:-9999px}
.skip:focus{left:16px;top:8px;background:var(--white);color:var(--deep);padding:8px 12px;z-index:30;border-radius:8px}

.wrap{max-width:1040px;margin:0 auto;padding:0 20px}
.measure{max-width:66ch}

h1,h2,h3{font-family:var(--head);font-weight:700;color:var(--ink)}
h1{font-size:36px;line-height:1.1;letter-spacing:-.6px}
h2{font-size:30px;line-height:1.2;letter-spacing:-.3px;margin-bottom:14px}
h3{font-size:19px;line-height:1.35;font-weight:600}
@media(min-width:760px){h1{font-size:52px;letter-spacing:-1.2px;line-height:1.07} h2{font-size:40px;line-height:1.16;letter-spacing:-.4px}}
@media(min-width:1040px){h1{font-size:58px} h2{font-size:44px}}

/* ── Sections: full-bleed bands, alternating ── */
.band{padding:64px 0}
@media(min-width:760px){.band{padding:96px 0}}
.dark{background:var(--deep);color:var(--on-dark)}
.dark h1,.dark h2,.dark h3{color:var(--white)}
.dark a:not(.btn){color:var(--white)}
.grey{background:var(--paper)}
.green{background:var(--paper-2)}
.eyebrow{display:block;font:600 12.5px/1.4 var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);margin-bottom:12px}
.dark .eyebrow{color:var(--mint)}
.dark .card .eyebrow{color:var(--accent-ink)}
.lede{font-size:18px;line-height:1.7;color:var(--ink-soft);margin-bottom:30px;max-width:62ch}
@media(min-width:760px){.lede{font-size:19px}}
.dark .lede{color:var(--on-dark)}
.after{margin-top:18px;max-width:66ch}
.source{margin-top:14px;font-size:13px;line-height:1.6;color:var(--ink-soft);max-width:80ch}
.dark .source{color:var(--on-dark-soft)}

/* ── Top nav: sticky, white ── */
.top{position:sticky;top:0;z-index:20;background:var(--white);border-bottom:1px solid var(--line)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:68px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.brand svg{flex:none;width:32px;height:32px}
.brand b{display:block;font:700 18px/1.15 var(--head);letter-spacing:-.2px}
.brand .by{display:block;font-size:12.5px;line-height:1.3;color:var(--ink-soft)}
@media(max-width:400px){.brand .by{display:none}}
.navlinks{display:none;align-items:center;gap:26px;font-size:15px}
.navlinks a:not(.btn){text-decoration:none;color:var(--ink);font-weight:600}
.navlinks a:not(.btn):hover{text-decoration:underline}
@media(min-width:900px){.navlinks{display:flex} .menu{display:none}}
/* Mobile: a native <details> menu, so it opens with no script and is announced
   as expanded / collapsed by screen readers. */
.menu{position:relative}
.menu summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:10px;
  font:600 15px/1 var(--head);color:var(--ink);border:1.5px solid var(--ink);border-radius:var(--r-btn);padding:11px 14px}
.menu summary::-webkit-details-marker{display:none}
.menu summary .bars{width:16px;height:2px;background:currentColor;position:relative}
.menu summary .bars::before,.menu summary .bars::after{content:"";position:absolute;left:0;width:16px;height:2px;background:currentColor}
.menu summary .bars::before{top:-5px} .menu summary .bars::after{top:5px}
.menu[open] summary .bars{background:transparent}
.menu[open] summary .bars::before{top:0;transform:rotate(45deg)}
.menu[open] summary .bars::after{top:0;transform:rotate(-45deg)}
.menu nav{position:absolute;right:0;top:calc(100% + 10px);width:min(280px,calc(100vw - 40px));background:var(--white);
  border:1px solid var(--line);border-radius:16px;padding:10px;box-shadow:var(--lift)}
.menu nav a:not(.btn){display:block;padding:11px 12px;border-radius:10px;text-decoration:none;font-weight:600;color:var(--ink)}
.menu nav a:not(.btn):hover{background:var(--paper)}
.menu nav .btn{display:block;margin-top:8px}

/* ── Buttons, fields ── */
.btn{display:inline-block;background:var(--accent);color:var(--white);border:0;border-radius:var(--r-btn);
  font:600 16px/1.2 var(--head);padding:14px 22px;text-decoration:none;cursor:pointer;box-shadow:var(--glow);text-align:center}
.btn:hover{background:var(--accent-hover);color:var(--white)}
/* On the dark ink the light-surface teal is only 2.82 against the band, so buttons
   switch to mint with ink text (7.53). Cards on dark are white, so they keep teal. */
.dark .btn:not(.ghost):not(.line),body>footer .btn:not(.ghost):not(.line){background:var(--mint);color:var(--deep)}
.dark .btn:not(.ghost):not(.line):hover,body>footer .btn:not(.ghost):not(.line):hover{background:var(--mint-hover);color:var(--deep)}
.dark .card .btn:not(.ghost):not(.line){background:var(--accent);color:var(--white)}
.dark .card .btn:not(.ghost):not(.line):hover{background:var(--accent-hover);color:var(--white)}
.btn:disabled{opacity:.6;cursor:wait}
.btn.sm{font-size:14.5px;padding:10px 16px}
.btn.ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1.5px var(--on-dark)}
.btn.ghost:hover{background:var(--deep-2);color:var(--white)}
.btn.line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.line:hover{background:var(--white);color:var(--ink)}
input,textarea{font:400 16px/1.4 var(--sans);color:var(--ink);background:var(--white);
  border:1px solid var(--field);border-radius:var(--r-btn);padding:12px 14px;width:100%}
input[type=checkbox]{width:auto}
input::placeholder,textarea::placeholder{color:var(--placeholder)}
.check label{display:block;font-weight:600;font-size:15px;margin-bottom:8px}
.dark .check label{color:var(--white)}
.check .row{display:flex;gap:10px;max-width:580px}
.check input{flex:1;min-width:0;font:400 17px var(--mono)}
@media(max-width:480px){.check .row{flex-direction:column} .check .btn{width:100%}}
.buttons{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin-top:26px}

/* ── Cards ── */
.card{background:var(--white);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:30px}
@media(max-width:480px){.card{padding:22px 18px}}
.dark .card a:not(.btn){color:var(--ink)}
.dark .card h2,.dark .card h3{color:var(--ink)}

/* ── Hero ── */
.hero{padding:56px 0 72px}
@media(min-width:760px){.hero{padding:88px 0 104px}}
.hero .wrap{display:grid;gap:44px}
@media(min-width:940px){.hero .wrap{grid-template-columns:minmax(0,1.32fr) minmax(0,.9fr);gap:48px;align-items:center}}
.badge{display:inline-flex;align-items:center;gap:9px;font:600 13.5px/1.3 var(--head);color:var(--white);
  border:1px solid var(--deep-line);background:var(--deep-2);border-radius:999px;padding:7px 14px 7px 12px;margin-bottom:24px}
.badge .dot{width:9px;height:9px;border-radius:50%;background:var(--mint);flex:none}
@media (prefers-reduced-motion:no-preference){.badge .dot{animation:pulse 2.4s ease-in-out infinite}}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(79,209,186,.55)}50%{box-shadow:0 0 0 6px rgba(79,209,186,0)}}
.hero h1 .accent{display:block;color:var(--mint)}
@media(min-width:1040px){.hero h1{font-size:54px}}
@media(min-width:900px){#example .split>div:first-child{position:sticky;top:100px}}
.hero .sub{margin:22px 0 30px;font-size:18px;line-height:1.7;color:var(--on-dark);max-width:36em}
@media(min-width:760px){.hero .sub{font-size:19px}}
.hero .fine{margin-top:14px;color:var(--on-dark-soft);max-width:36em}
.hero .alt{margin-top:22px}
.chips{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.chips li{font-size:13.5px;line-height:1.3;color:var(--on-dark);border:1px solid var(--deep-line);border-radius:999px;padding:6px 12px}
.diagram{margin:0}
.diagram svg{display:block;width:100%;max-width:420px;height:auto;margin:0 auto}
.diagram text{font-family:var(--sans)}
@media(max-width:939px){.diagram svg{max-width:340px}}

/* ── Two-column split used by several sections ── */
.split{display:grid;gap:36px}
@media(min-width:900px){.split{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px;align-items:start}
  .split.even{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* ── The example report: a white card ── */
.sheet{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  padding:26px 18px 22px;font-size:15px;line-height:1.55}
@media(min-width:560px){.sheet{padding:30px}}
.stampmark{position:absolute;top:16px;right:16px;font:600 11.5px/1 var(--head);letter-spacing:.14em;
  color:var(--crit);border:1.5px solid var(--crit);border-radius:6px;padding:6px 8px 5px;background:var(--white)}
.sheet .grade{display:flex;gap:14px;align-items:center;padding-right:130px;min-height:52px}
.sheet .grade .g{font:700 40px/1 var(--head);color:var(--high);width:44px;text-align:center}
.sheet .grade .d{font-weight:600;font-size:15.5px;overflow-wrap:anywhere}
.sheet .grade .t{font:400 13px var(--mono);color:var(--ink-soft)}
@media(max-width:420px){.sheet .grade{padding-right:0;padding-top:30px} .sheet .grade .d{font-size:14px}}
.sheet .headline{margin-top:18px;border-left:3px solid var(--high);padding:12px 12px 12px 14px;background:var(--high-bg);border-radius:0 12px 12px 0}
.sheet .ttl{font-weight:600;margin-top:6px}
.sheet .det{color:var(--ink-soft);font-size:14px;margin-top:3px}
.hl{background:var(--marker);box-shadow:0 0 0 2px var(--marker);color:var(--ink)}
.note{font:600 14.5px/1.45 var(--head);color:var(--crit);margin:14px 0 0;padding-left:14px;border-left:2px solid var(--crit)}
.fakebtn{display:inline-block;margin-top:14px;background:var(--btn-off);color:var(--btn-off-ink);
  font:600 13.5px/1 var(--head);padding:11px 14px;border-radius:var(--r-btn);cursor:default;user-select:none}
.sheet .sh{font:600 12px var(--head);letter-spacing:.14em;text-transform:uppercase;color:var(--accent-ink);
  margin:24px 0 8px;padding-top:16px;border-top:1px solid var(--line)}
.sheet .f{padding:12px 0 14px}
.sheet .f+.f{border-top:1px solid var(--line)}
.sheet .fix{margin-top:9px;background:var(--fix-bg);border-radius:10px;padding:9px 12px;font-size:13.5px;color:var(--ink)}
.sheet .fix b{font:600 11px var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--ok-ink);margin-right:6px}
.more{display:none;font:400 13px var(--mono);color:var(--ink-soft);padding-top:8px}
@media(max-width:759px){.sheet .f.extra{display:none} .more{display:block}}
.ticks{list-style:none;font-size:14px;color:var(--ink-soft);display:grid;gap:5px}
.ticks li{padding-left:22px;position:relative}
.ticks li::before{position:absolute;left:0;font:600 14px var(--mono)}
.ticks.ok li::before{content:"\2713";color:var(--ok-ink)}
.ticks.unk li::before{content:"?";color:var(--ink-soft)}
.caption{margin-top:14px;font-size:14px;color:var(--ink-soft)}

/* Severity words */
.tag{display:inline-block;font:600 11px/1 var(--head);letter-spacing:.08em;text-transform:uppercase;
  padding:5px 8px 4px;border-radius:6px}
.tag.Critical{color:var(--crit);background:var(--crit-bg)}
.tag.High{color:var(--high);background:var(--high-bg)}
.tag.Medium{color:var(--med);background:var(--med-bg)}
.tag.Low{color:var(--low);background:var(--low-bg)}

/* ── Tables in a rounded white card ── */
.tablecard{background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.ruled{width:100%;border-collapse:collapse;font-size:15.5px}
.ruled th,.ruled td{text-align:left;vertical-align:top;padding:15px 18px;border-top:1px solid var(--line)}
.ruled thead th{font:600 12px var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
  border-top:0;background:var(--white);border-bottom:1px solid var(--line)}
.ruled tbody tr:first-child th,.ruled tbody tr:first-child td{border-top:0}
.ruled tbody th{font-weight:600}
.ruled .when{font-family:var(--mono);font-size:14px;white-space:nowrap}
.ruled .us{background:var(--accent-wash)}
.ruled .price{font-family:var(--mono);text-align:right;white-space:nowrap}
.ruled .price b{font:700 18px var(--head)}
/* Under 760px each row becomes a small block, labelled from data-label: no sideways scroll */
@media(max-width:759px){
  .ruled,.ruled tbody,.ruled tr,.ruled th,.ruled td{display:block;width:100%}
  .ruled thead{position:absolute;left:-9999px}
  .ruled tr{border-top:1px solid var(--line);padding:16px 18px}
  .ruled tbody tr:first-child{border-top:0}
  .ruled th,.ruled td{border:0;padding:2px 0}
  .ruled td[data-label]::before{content:attr(data-label);display:block;font:600 11px var(--head);
    letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin-top:10px}
  .ruled .when,.ruled .price{white-space:normal;text-align:left}
  .ruled td.us{border-left:3px solid var(--accent);padding:2px 0 4px 10px;margin-top:6px;border-radius:0 8px 8px 0}
}

/* ── How it works: step cards + the ladder ── */
.howto{list-style:none;counter-reset:s;display:grid;gap:14px}
.howto li{counter-increment:s;display:grid;grid-template-columns:40px minmax(0,1fr);gap:16px;align-items:start}
.howto li::before{content:counter(s);display:flex;align-items:center;justify-content:center;width:40px;height:40px;
  border-radius:12px;background:var(--mint);color:var(--deep);font:700 18px/1 var(--head)}
.ladder{list-style:none;display:grid;gap:12px}
.ladder li{font:600 15.5px/1.35 var(--head);padding:16px 20px;border-radius:14px;background:var(--deep-2);
  color:var(--white);border:1px solid var(--deep-line)}
.ladder li:nth-child(2){margin-left:6%} .ladder li:nth-child(3){margin-left:12%}
.ladder li:last-child{margin-left:18%;background:var(--mint);color:var(--deep);border-color:var(--mint);box-shadow:var(--glow)}
.ladder small{display:block;font:400 13.5px/1.45 var(--sans);color:var(--on-dark);margin-top:3px}
.ladder li:last-child small{color:var(--deep)}
.ladder-cap{margin-top:14px;font-size:13.5px;color:var(--on-dark-soft)}

/* ── The founder's letter ── */
.letter{max-width:760px}
@media(min-width:760px){.letter{padding:44px 52px}}
.letterhead{display:flex;gap:18px;align-items:center;padding-bottom:20px;margin-bottom:24px;border-bottom:1px solid var(--line)}
.letterhead img{width:112px;height:112px;border-radius:16px;object-fit:cover}
.letterhead .who b{display:block;font:700 21px var(--head)}
.letterhead .who span{display:block;font-size:15px;color:var(--ink-soft)}
.letterhead .who span+span{font-size:14px}
.letter p{font-size:17px;line-height:1.7;margin-bottom:16px}
.letter p.sig{font:600 19px var(--head);margin:24px 0 0}
.record{margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.letter .record p{font-size:15px;line-height:1.6}
.letter .record .rec{font-weight:600;margin-bottom:4px}
.letter .record .rec-note{color:var(--ink-soft);margin-bottom:14px}
.record blockquote{border-left:3px solid var(--accent);padding:2px 0 2px 14px;margin:0 0 14px}
.letter .record blockquote p{font-size:16px;font-style:italic;margin:0 0 4px}
.record blockquote footer{font:400 13px var(--mono);color:var(--ink-soft)}

/* ── Lists, FAQ ── */
.plain{list-style:none;max-width:70ch}
.plain li{padding:11px 0 11px 22px;border-bottom:1px solid var(--line);position:relative}
.plain li:last-child{border-bottom:0}
.plain li::before{content:"";position:absolute;left:2px;top:21px;width:8px;height:8px;border-radius:50%;background:var(--brand)}
.limits{list-style:none;display:grid;gap:14px}
@media(min-width:760px){.limits{grid-template-columns:1fr 1fr}}
.limits li{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:20px 22px}
.faq{max-width:820px;display:grid;gap:12px}
.faq details{background:var(--white);border:1px solid var(--line);border-radius:16px}
.faq summary{cursor:pointer;list-style:none;padding:18px 54px 18px 22px;font:600 16.5px/1.4 var(--head);position:relative;border-radius:16px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:20px;top:16px;font:400 24px/1 var(--head);color:var(--accent-ink)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 22px 20px;max-width:66ch}

/* ── Build and fix (on dark ink) ── */
.build p+p{margin-top:14px}
.build aside p{margin-top:10px;color:var(--ink-soft);font-size:15px}

/* ── Last call ── */
.last h2{max-width:18em}
.last .check{margin-top:26px}

/* ── Footer (dark ink) ── */
body>footer{background:var(--deep);color:var(--on-dark);border-top:1px solid var(--deep-line);padding:48px 0 56px;font-size:14px;line-height:1.75}
body>footer a{color:var(--white)}
body>footer p{margin-bottom:10px;max-width:76ch}
body>footer .links a{margin-right:16px;white-space:nowrap;display:inline-block}
body>footer .fbrand{display:flex;align-items:center;gap:10px;color:var(--white);font:700 17px var(--head);margin-bottom:14px}
body>footer .fbrand svg{width:28px;height:28px;flex:none}

/* ── Document pages: privacy, terms, status ── */
.pagehead{padding:56px 0 52px}
@media(min-width:760px){.pagehead{padding:80px 0 72px}}
.pagehead .lede{margin-bottom:0}
.doc .card{max-width:820px}
.doc h2{font-size:24px;line-height:1.3;margin:36px 0 10px;letter-spacing:-.2px}
@media(min-width:760px){.doc h2{font-size:26px}}
.doc .card>h2:first-child{margin-top:0}
.plain.numbered{counter-reset:n}
.plain.numbered li{counter-increment:n;padding-left:30px}
.plain.numbered li::before{content:counter(n) ".";background:none;width:auto;height:auto;top:11px;left:0;
  font:600 15px/1.65 var(--head);color:var(--accent-ink)}
.doc .card p+p{margin-top:12px}
.doc .card .plain+p{margin-top:12px}
.care{margin-top:22px;border-left:4px solid var(--accent)}
.care p+p{margin-top:10px}
.pagehead h1+.lede{margin-top:18px}
[id]{scroll-margin-top:88px}