:root{--navy:#102033;--blue:#1d4ed8;--gold:#f4b942;--sky:#eaf4ff;--teal:#0f8f82;
--muted:#5b6472;--ground:#f6f8fb;--line:#e3e9f2;--r:20px}
*{box-sizing:border-box}
body{margin:0;font:16px/1.6 Manrope,-apple-system,sans-serif;color:var(--navy);background:var(--ground)}
a{color:var(--blue);text-decoration:none}a:hover{text-decoration:underline}
main{max-width:1060px;margin:0 auto;padding:26px 20px 60px}
h1{font-weight:800;letter-spacing:-.02em;font-size:clamp(1.7rem,3.6vw,2.5rem);margin:.2em 0}
h2{font-weight:800;font-size:1.15rem;margin:0 0 .7em}
h3{font-weight:700;font-size:1rem;margin:0 0 .4em}
.tiny{font-size:.8rem;color:var(--muted)}
.trustnudge{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-size:.92rem;font-weight:600}
.trustnudge a{font-weight:800}
.sub{color:var(--muted)}
/* header / footer */
.top{position:sticky;top:0;z-index:9;background:rgba(255,255,255,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.bar{max-width:1060px;margin:0 auto;padding-left:20px;padding-right:20px}
.top .bar{display:flex;align-items:center;gap:18px;padding-top:12px;padding-bottom:12px}
.brand{display:inline-flex;align-items:center;gap:8px;font-weight:800;letter-spacing:-.015em;font-size:1.12rem}
.brand:hover{text-decoration:none}
.brand .ws{color:var(--navy)}.brand .pc{color:var(--blue)}
.mark{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;
background:var(--navy);color:var(--gold);font-weight:800;margin-right:6px}
.mark.sm{width:22px;height:22px;border-radius:7px;font-size:.8rem}
.sitenav{margin-left:auto;display:flex;align-items:center;gap:20px}
.sitenav a{color:var(--muted);font-weight:600;font-size:.9rem}
.sitenav a:hover{color:var(--navy);text-decoration:none}
.navcta{background:var(--blue);color:#fff!important;padding:9px 16px;border-radius:10px}
.navcta:hover{background:#1741b8;text-decoration:none}
/* "For trusts" needs to read as an action, not a plain nav link, without competing with the
   primary blue CTA - an outline button sitting right next to it does that. */
.navcta-ghost{background:transparent;color:var(--blue)!important;border:1.5px solid var(--blue)}
.navcta-ghost:hover{background:var(--sky);text-decoration:none}
footer{background:var(--navy);color:#cfd8e6;font-size:.85rem}
footer .bar{padding-top:24px;padding-bottom:24px}
footer a{color:var(--gold)}
.fbrand{color:#e6edf5;font-weight:800}.fbrand b{color:var(--gold)}
.ftiny{display:block;margin-top:6px;color:#9fb2c8;font-size:.8rem}
.plans{width:100%;border-collapse:collapse;font-size:.93rem;margin-top:6px}
.plans th,.plans td{padding:11px 14px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.plans thead th{border-bottom:2px solid var(--line);font-weight:800;color:var(--navy)}
.plans thead th.p{width:150px;text-align:center}
.plans .planlabel{font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700}
.plans td.c{text-align:center;width:150px}
.plans .yes{color:var(--teal);font-weight:800}
.plans .no{color:#c3ccd8}
.plans tbody tr:hover{background:#fafcff}
.mobmenu{display:none;margin-left:auto;position:relative}
.mobmenu summary{list-style:none;cursor:pointer;font-weight:700;font-size:.9rem;color:var(--navy);padding:8px 13px;border:1px solid var(--line);border-radius:10px;background:#fff}
.mobmenu summary::-webkit-details-marker{display:none}
.mobpanel{position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px;box-shadow:0 8px 24px rgba(16,32,51,.12);display:flex;flex-direction:column;gap:2px;min-width:190px;z-index:20}
.mobpanel a{padding:10px 12px;border-radius:8px;color:var(--navy);font-weight:600;font-size:.92rem}
.mobpanel a:hover{background:var(--sky);text-decoration:none}
.mobpanel .navcta{color:#fff!important;margin-top:4px;text-align:center}
.mobpanel .navcta-ghost{color:var(--blue)!important;background:#fff;margin-top:4px;text-align:center}
@media(max-width:720px){.sitenav{display:none}.mobmenu{display:block}}
/* hero */
.hero{background:#fff;border:1px solid var(--line);color:var(--navy);border-radius:var(--r);
padding:44px 40px;margin-bottom:22px}
.hero h1{color:var(--navy)}
.hero .sub{color:#5b6472;max-width:640px}
.eyebrow{color:var(--gold);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.75rem}
.hero .eyebrow{color:var(--blue)}
.hero .tiny{color:#7a8699}
/* panels / cards */
.panel{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;
margin-bottom:18px;box-shadow:0 1px 2px rgba(16,32,51,.04)}
.panel.band{background:var(--sky)}
.panel.center{text-align:center;padding:60px 26px}
.panel.wide{overflow-x:auto}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.card{background:var(--ground);border:1px solid var(--line);border-radius:14px;padding:16px 18px}
.card p{margin:.3em 0 0;font-size:.9rem;color:var(--muted)}
/* forms */
.scanform{display:flex;gap:10px;margin:18px 0 6px;max-width:620px;flex-wrap:wrap}
.scanform input{flex:1;min-width:0;padding:13px 16px;border-radius:12px;border:1px solid var(--line);font:inherit}
/* The trust form carries two inputs plus the button, which cram into one 620px row (the
   placeholders truncate and the button wraps to two lines). Give the trust field its own
   row and let the optional website share the next one with the button.
   MUST stay inside min-width:761px: below that .scanform flips to flex-direction:column
   (see the max-width:760px block), where flex-basis sizes HEIGHT, so a px basis here
   turns the input into a tall box. */
@media(min-width:761px){
  .scanform.trustform{max-width:680px}
  .scanform.trustform input[name="trust"]{flex:1 1 100%}
  .scanform.trustform input[name="trust_url"]{flex:1 1 240px}
}
.btn-primary{background:var(--blue);color:#fff;border:0;border-radius:12px;padding:13px 22px;
font:inherit;font-weight:700;cursor:pointer;white-space:nowrap}
.btn-primary:hover{background:#1741b8}
.btn-ghost{display:inline-block;border:1px solid var(--line);border-radius:12px;padding:10px 18px;
background:#fff;font-weight:700}
#suggest{max-width:620px}
#suggest .sg{background:#fff;border:1px solid var(--line);border-radius:10px;padding:9px 12px;
margin-top:6px;cursor:pointer;font-size:.9rem;color:var(--navy)}
#suggest .sg:hover{background:var(--sky)}
#suggest .sg .t{color:var(--muted);font-size:.78rem}
/* report */
.phead{margin:8px 0 16px}
.scorebar{margin-top:10px;font-weight:700}
.score{display:inline-block;padding:4px 14px;border-radius:999px;color:#fff;margin-right:8px}
.score.ok{background:var(--teal)}.score.bad{background:#c2410c}.score.na{background:var(--muted)}
.pill{display:inline-block;padding:2px 10px;border-radius:999px;font-size:.72rem;font-weight:800}
.pill.ok{background:#e0f5ef;color:var(--teal)}
.pill.warn{background:#fdf1dc;color:#a16207}
.pill.miss{background:#fde8e8;color:#b91c1c}
.pill.unverified{background:#fdf1dc;color:#a16207}
.pill.weak{background:#fff;color:#a16207;border:1.5px solid #f0c46a;cursor:help}
.pill.na{background:#eef1f5;color:var(--muted)}
.pill.trust{background:var(--sky);color:var(--blue);margin-left:6px;font-size:.65rem;vertical-align:middle}
.covline{color:var(--muted);margin:2px 0 0}
.sitebanner{background:#fdf1dc;color:#7c4a03;border:1px solid #f0c46a;border-radius:12px;
padding:12px 16px;margin:10px 0;font-size:.88rem;font-weight:600}
table.rag{width:100%;border-collapse:collapse}
table.rag td{padding:10px 8px;border-top:1px solid var(--line);vertical-align:top;font-size:.92rem}
table.rag td.st{width:92px}
table.rag td.ev{width:230px;font-size:.8rem}
.find{font-size:.8rem;color:var(--teal);margin-top:3px}
.find.bad{color:#b45309;font-weight:600}
.warnhelp{color:#a16207;margin-top:3px}
/* matrix */
table.matrix{border-collapse:collapse;font-size:.85rem;min-width:820px}
table.matrix th{font-size:.68rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);
padding:6px;border-bottom:2px solid var(--line);text-align:center}
table.matrix td{padding:7px 6px;border-bottom:1px solid var(--line);text-align:center}
table.matrix td.sn{text-align:left;min-width:230px}
.c-ok{color:var(--teal);font-weight:800}
.c-weak{color:#a16207;font-weight:800}
.c-warn{color:#a16207;font-weight:800}
.c-miss{color:#b91c1c;font-weight:800}
.c-unverified{color:#a16207}
.c-na{color:#b6c0cd}
.list{list-style:none;margin:0;padding:0}
.list li{padding:8px 0;border-bottom:1px solid var(--line)}
.list li:last-child{border:0}
.spin{width:34px;height:34px;border:4px solid var(--line);border-top-color:var(--blue);
border-radius:50%;margin:22px auto;animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
/* paywall (signup / checkout) - 2026-07-12 */
.panel.cta{text-align:center}
.panel.cta .btn-primary{display:inline-block;margin-top:10px;background:var(--gold);color:var(--navy)}
.panel.cta .btn-primary:hover{background:#e0a52e}
.modetabs{display:flex;gap:8px;margin-bottom:16px;max-width:420px}
.modetabs button{flex:1;padding:11px 14px;border-radius:12px;border:1px solid var(--line);
background:#fff;font:inherit;font-weight:700;cursor:pointer;color:var(--muted)}
.modetabs button.active{background:var(--navy);color:#fff;border-color:var(--navy)}
.formrow{margin:14px 0;max-width:420px}
.formrow label{display:block;font-size:.8rem;font-weight:700;color:var(--muted);margin-bottom:5px}
.formrow input,.formrow textarea{width:100%;padding:13px 16px;border-radius:12px;border:1px solid var(--line);font:inherit}
.formrow textarea{resize:vertical}
.tieropt{display:block;border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:8px;
cursor:pointer;font-size:.9rem;font-weight:400;color:var(--navy);background:#fff}
.tieropt:hover{border-color:var(--blue)}
.tieropt input{width:auto;margin-right:9px;vertical-align:middle}
.tieropt:has(input:checked){border-color:var(--blue);background:var(--sky);box-shadow:inset 0 0 0 1px var(--blue)}
.tieropt b{font-weight:800}
.pricebox{background:var(--sky);border:1px solid var(--line);border-radius:14px;
padding:14px 18px;margin:16px 0;font-weight:700;color:var(--navy);max-width:420px}
.pricebox .amt{color:var(--blue);font-size:1.35rem;margin-right:8px}
.errbanner{background:#fde8e8;color:#b91c1c;border:1px solid #f3b7b7;border-radius:12px;
padding:10px 16px;margin:0 0 14px;font-size:.88rem;font-weight:600}
.okbanner{background:#e7f6f2;color:#0b6b60;border:1px solid #a8ded4;border-radius:12px;
padding:10px 16px;margin:0 0 14px;font-size:.88rem;font-weight:600}
/* re-check rows (workspace) - keep the action column tight against the state text */
.rechecks td{vertical-align:middle}
.rechecks td:last-child{width:130px;text-align:right}
/* MAT compliance workspace - 2026-07-13 */
.wshead{background:#fff;border-bottom:1px solid var(--line);padding:22px 0;margin-bottom:8px}
.wshead .eyebrow{color:var(--blue)}
.wshead h1{margin:.15em 0}
.wsfilters{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin-bottom:14px}
.wsfilters label{font-size:.7rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.wsfilters select{display:block;margin-top:4px;padding:8px 10px;border:1px solid var(--line);border-radius:9px;font:inherit;background:#fff;min-width:132px}
.wsactions{margin-left:auto;display:flex;gap:8px;align-items:flex-end}
.wssum{background:var(--sky);border:1px solid var(--line);border-radius:10px;padding:9px 14px;font-size:.9rem;margin-bottom:16px;color:var(--navy)}
.wsgroup{margin-bottom:20px}
.wsgroup h3{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:1rem;border-bottom:2px solid var(--line);padding-bottom:6px;margin:0 0 2px}
.wscount{font-size:.74rem;font-weight:600;color:var(--muted);white-space:nowrap}
.wsrow{display:flex;align-items:center;gap:12px;padding:9px 6px;border-bottom:1px solid var(--line);cursor:pointer;flex-wrap:wrap}
.wsrow:hover{background:#fafcff}
.wsname{flex:1 1 auto;font-size:.92rem;color:var(--navy)}
.wslevel{flex:0 0 auto;font-size:.66rem;text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.wsdetail{display:none;flex:1 1 100%;font-size:.82rem;color:var(--muted);padding:6px 0 2px 4px}
.wsrow.open .wsdetail{display:block}
.wssrc{margin-bottom:3px}
.wsev a{color:var(--blue)}
.ws-eff{flex:0 0 auto}
.wsedit{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;margin-top:10px;padding-top:8px;border-top:1px dashed var(--line)}
.wsedit label{font-size:.66rem;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.02em;display:flex;flex-direction:column;gap:3px}
.wsedit select,.wsedit input{font:inherit;font-weight:400;text-transform:none;color:var(--navy);padding:7px 9px;border:1px solid var(--line);border-radius:8px;background:#fff}
.wsedit input{min-width:170px}
.ws-saved{font-size:.75rem;color:var(--teal);font-weight:700}
.wsupd{font-size:.72rem;color:var(--muted)}
.pill.st-not_present{background:#fde8e8;color:#b91c1c}
.pill.st-in_draft{background:#fdf1dc;color:#a16207}
.pill.st-awaiting{background:#fef3c7;color:#92600e}
.pill.st-approved{background:#e0eaff;color:#1d4ed8}
.pill.st-published{background:#e0f5ef;color:var(--teal)}
.pill.st-na{background:#eef1f5;color:var(--muted)}
/* Stage 3-5: docs, central, provisioning - 2026-07-14 */
.wsdocs{margin-top:8px;font-size:.82rem}
.wsdoc{display:inline-block;background:#fff;border:1px solid var(--line);border-radius:8px;padding:3px 9px;margin:2px 4px 2px 0}
.ws-upbtn{display:inline-block;border:1px solid var(--line);border-radius:8px;padding:4px 10px;background:#fff;font-weight:700;font-size:.78rem;color:var(--blue);cursor:pointer}
.ws-upbtn input{display:none}
.wscen{margin-top:8px;font-size:.8rem;font-weight:600;color:var(--blue);background:var(--sky);border:1px solid var(--line);border-radius:8px;padding:6px 10px;display:inline-block}
.wsedit.ro{color:var(--muted);font-size:.85rem;display:block}
.wscenl{flex-direction:row!important;align-items:center;gap:6px!important;text-transform:uppercase}
.wsinline{display:inline-flex;gap:6px;align-items:center}
.wsinline input[type=email]{padding:7px 9px;border:1px solid var(--line);border-radius:8px;font:inherit;min-width:200px}
.credbanner{background:#e0f5ef;border:1px solid #b7e3d4;color:#0b5c50;border-radius:12px;padding:12px 16px;margin:0 0 14px;font-size:.9rem}
.credbanner code{background:#fff;border:1px solid var(--line);border-radius:6px;padding:2px 7px}
@media print{.top,.wsfilters,.wsactions,footer{display:none!important}.wsdetail{display:block!important}.wsrow{cursor:auto}.wshead{border:0}}
@media(max-width:760px){.grid3{grid-template-columns:1fr}.hero{padding:30px 22px}.scanform{flex-direction:column}.wsactions{margin-left:0;width:100%}}
/* signup two-column checkout - 2026-07-14 */
.signupgrid{display:grid;grid-template-columns:440px minmax(0,1fr);gap:22px;align-items:start;margin-bottom:18px}
.signupgrid>.panel{margin-bottom:0}
.signupform h2{margin-bottom:2px}
.signupform .lead{margin:0 0 14px}
.infocol{display:flex;flex-direction:column;gap:18px}
.infocol .panel{margin-bottom:0}
.infocol .card+.card{margin-top:10px}
.infocol .whatcheck{margin-top:12px}
.tierhead{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:2px}
.tierhead h3{margin:0}
.tierhead .price{color:var(--blue);font-weight:800;font-size:.82rem;white-space:nowrap}
.steps{list-style:none;margin:0;padding:0;counter-reset:step}
.steps li{position:relative;padding:9px 0 9px 40px;font-size:.9rem;border-bottom:1px solid var(--line)}
.steps li:last-child{border:0;padding-bottom:0}
.steps li::before{counter-increment:step;content:counter(step);position:absolute;left:0;top:7px;width:26px;height:26px;border-radius:50%;background:var(--navy);color:#fff;font-weight:800;font-size:.8rem;display:grid;place-items:center}
@media(max-width:820px){.signupgrid{grid-template-columns:1fr}}
/* review-count scoreboard (free scan summary). NB the .score-* classes also exist in the
   report stylesheet inlined into /examples/* - these are the site-side equivalents, kept
   visually consistent with them but scoped to the app's own pages. */
.scoreboard{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.scoreboard-2{grid-template-columns:repeat(2,1fr)}
.score-card{background:var(--ground);border:1px solid var(--line);border-radius:var(--r);padding:20px 18px;text-align:center}
.score-card-warn{background:#fff8ec;border-color:#f0d9a8}
.score-num{font-size:2.6rem;font-weight:800;line-height:1;color:var(--navy);letter-spacing:-.02em}
.score-card-warn .score-num{color:#a86a00}
.score-den{font-size:1.1rem;font-weight:700;color:var(--muted)}
.score-label{margin-top:8px;font-weight:800;font-size:.9rem;color:var(--navy)}
.score-note{margin-top:6px;font-size:.75rem;color:var(--muted);line-height:1.4}
@media(max-width:760px){.scoreboard{grid-template-columns:1fr}}
/* sample report cards (/examples) */
.samples{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:14px}
.samplecard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;
display:flex;flex-direction:column}
.samplecard:hover{border-color:var(--blue);box-shadow:0 4px 14px rgba(29,78,216,.08)}
.samplecard .planlabel{display:inline-block;font-size:.68rem;text-transform:uppercase;letter-spacing:.04em;
color:var(--blue);font-weight:800;background:var(--sky);border-radius:999px;padding:4px 10px;margin-bottom:10px;align-self:flex-start}
.samplecard h3{font-size:1.1rem;margin-bottom:.2em}
.samplecard p{font-size:.9rem;color:var(--muted);margin:.35em 0}
.samplecard .samplemeta{font-weight:800;color:var(--navy);font-size:.9rem;margin-bottom:.6em}
.samplecard p:last-child{margin-top:auto;padding-top:14px}
@media(max-width:820px){.samples{grid-template-columns:1fr}}
/* ===== Surfaces v2 (2026-07-17) - policy audit page, group headlines/req/history, row
   feedback, admin schedules. Additive only - reuses existing tokens/classes throughout
   (pill/panel/rag/scoreboard/btn-ghost/wsinline), no v1 selector's rule is changed. ===== */
/* .rag tables gain a header row on the new audit/history/req pages - no v1 .rag table uses
   <th>, so this is new territory, not a restyle of any existing table. */
table.rag th{padding:8px;border-bottom:2px solid var(--line);text-align:left;font-size:.68rem;
text-transform:uppercase;letter-spacing:.03em;color:var(--muted)}
.audittable td:last-child{width:64px;text-align:right;white-space:nowrap}
/* Document audit page: red "next review" date + pill when overdue - reuses the existing
   miss-red already used by .pill.miss / .c-miss rather than a new colour. */
.auditoverdue{color:#b91c1c;font-weight:700}
/* Per-row thumbs feedback control (POST /feedback) */
.fbform{display:inline-flex;gap:4px;margin:0}
.fbvote{background:#fff;border:1px solid var(--line);border-radius:8px;padding:3px 7px;
cursor:pointer;font-size:.85rem;line-height:1}
.fbvote:hover{background:var(--sky);border-color:var(--blue)}
/* Group headline strip (4-up variant of the existing .scoreboard/.score-card) */
.scoreboard-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:900px){.scoreboard-4{grid-template-columns:repeat(2,1fr)}}