/* hc-dark.css: Hawkcrest Cyber site-wide DARK theme (all 43 pages). Design: Web: UI/UX Designer, 2026-10-17.
   Load LAST on every page, after styles.css, home.css (home only) and any tool CSS:
     <link rel="stylesheet" href="/hc-dark.css?v=1">   and   <body class="hc ...">
   It (1) defines the new tokens, (2) remaps the legacy styles.css / home.css variables to them so existing rules
   turn calm-dark automatically, (3) overrides the hard-coded light colors in home.css and the "hacker" bits in styles.css.
   Optional light theme: <body class="hc" data-theme="light">. All pairs are checked in dark-theme-handoff.md (WCAG 2.2 AA). */

/* ---------- 1. Tokens ---------- */
:root{
  --hc-bg:#0b1626;          /* page base (deep navy) */
  --hc-surface:#12233a;     /* cards, bands */
  --hc-surface-2:#18304d;   /* raised / hover / table head */
  --hc-hero:#0f2740;        /* hero + footer band */
  --hc-border:#2a4263;      /* decorative dividers only */
  --hc-border-strong:#7089ab;/* inputs, outline buttons, chips (>=3:1) */
  --hc-heading:#ffffff;
  --hc-text:#e5e9f0;
  --hc-muted:#a9b8cc;
  --hc-primary:#60a5fa;     /* button fill */
  --hc-primary-hover:#93c5fd;
  --hc-on-primary:#0b1626;  /* text on primary */
  --hc-link:#93c5fd;
  --hc-link-hover:#bfdbfe;
  --hc-accent:#fbbf24;      /* amber: badges, "Best place to start" */
  --hc-accent-bg:#3a2a07;
  --hc-brand:#ff8a80;       /* logo word "Cyber" on dark */
  --hc-focus:#fcd34d;
  --hc-success:#4ade80; --hc-success-bg:#0f3324;
  --hc-danger:#f87171;  --hc-danger-bg:#3d1620;
  --hc-info:#7dd3fc;    --hc-info-bg:#0c2a40;
  --hc-shadow:0 1px 2px rgb(0 0 0/.3),0 8px 24px rgb(0 0 0/.25);
  --hc-font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --hc-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --hc-r-sm:8px;--hc-r-md:12px;--hc-r-lg:16px;
  --hc-measure:68ch;
  /* type scale (all templates) */
  --hc-fs-body:1.0625rem;  /* 17px */
  --hc-fs-sm:.9375rem;     /* 15px */
  --hc-fs-h1:clamp(2rem,1.4rem + 2.6vw,3rem);      /* 32-48 */
  --hc-fs-h2:clamp(1.625rem,1.2rem + 1.6vw,2rem);  /* 26-32 */
  --hc-fs-h3:1.375rem; --hc-fs-h4:1.125rem;

  /* legacy styles.css variables -> new palette */
  --bg:var(--hc-bg);--panel:var(--hc-surface);--line:var(--hc-border);--txt:var(--hc-text);--hi:var(--hc-heading);
  --red:var(--hc-primary);--cyan:var(--hc-primary);
  /* home.css variables -> new palette */
  --navy:var(--hc-hero);--primary:var(--hc-primary);--primary-hover:var(--hc-primary-hover);--accent:var(--hc-accent);
  --accent-soft:var(--hc-accent-bg);--muted:var(--hc-muted);--border-strong:var(--hc-border-strong);--focus:var(--hc-focus);
  --shadow-sm:var(--hc-shadow);--shadow-lg:0 12px 32px rgb(0 0 0/.35);
  color-scheme:dark;
}
body.hc[data-theme="light"]{
  --hc-bg:#ffffff;--hc-surface:#f8fafc;--hc-surface-2:#eef2f7;--hc-hero:#0f2740;--hc-border:#cbd5e1;--hc-border-strong:#64748b;
  --hc-heading:#0f172a;--hc-text:#1e293b;--hc-muted:#475569;--hc-primary:#1d4ed8;--hc-primary-hover:#1e40af;--hc-on-primary:#ffffff;
  --hc-link:#1d4ed8;--hc-link-hover:#1e40af;--hc-accent:#92400e;--hc-accent-bg:#fef3c7;--hc-brand:#b42318;--hc-focus:#2563eb;
  --hc-success:#166534;--hc-success-bg:#e7f6ec;--hc-danger:#b91c1c;--hc-danger-bg:#fdecec;--hc-info:#075985;--hc-info-bg:#e0f2fe;
  --hc-shadow:0 1px 2px rgb(15 23 42/.06),0 8px 24px rgb(15 23 42/.08);color-scheme:light;
}

/* ---------- 2. Base + type (every template) ---------- */
html body.hc{background:var(--hc-bg);color:var(--hc-text);font-family:var(--hc-font);font-size:var(--hc-fs-body);line-height:1.6}
html{scroll-padding-top:80px}
body.hc section,body.hc .alt,body.hc .subhero,body.hc .assess,body.hc .cta,body.hc .blogtop,body.hc .post{background:var(--hc-bg);border-color:var(--hc-border)}
body.hc section.alt,body.hc .home section.alt,body.hc.home section.alt,body.hc .ms,body.hc .cta{background:var(--hc-surface)}
body.hc h1,body.hc h2,body.hc h3,body.hc h4{color:var(--hc-heading);font-family:var(--hc-font);letter-spacing:-.01em;line-height:1.2}
body.hc h1{font-size:var(--hc-fs-h1);font-weight:800}
body.hc h2{font-size:var(--hc-fs-h2)}
body.hc h3{font-size:var(--hc-fs-h3)}
body.hc h4{font-size:var(--hc-fs-h4)}
body.hc strong,body.hc b{color:var(--hc-heading)}
body.hc p,body.hc li{color:inherit}
body.hc a{color:var(--hc-link);text-underline-offset:3px}
body.hc a:hover{color:var(--hc-link-hover)}
body.hc .lead{color:var(--hc-text);font-size:1.125rem;max-width:var(--hc-measure)}
body.hc .muted,body.hc .fine,body.hc .privacy,body.hc time,body.hc .req{color:var(--hc-muted);font-family:var(--hc-font)}
/* calm, not "hacker": no mono labels, no // prefixes, no counters, no radar */
body.hc .eyebrow{font-family:var(--hc-font);text-transform:none;letter-spacing:.04em;font-size:var(--hc-fs-sm);font-weight:600;color:var(--hc-link)}
body.hc .eyebrow:before{content:none}
body.hc .grid article:before,body.hc .linkcard h3 a:after{content:none}
body.hc .radar,body.hc .radar img{animation:none}
body.hc .kind,body.hc .stats span,body.hc .herotag,body.hc .namestory,body.hc .chips span{font-family:var(--hc-font)}
body.hc ::selection{background:#1e3a8a;color:#fff}

/* ---------- 3. Focus, skip link ---------- */
body.hc :focus-visible{outline:3px solid var(--hc-focus);outline-offset:3px}
body.hc .hero :focus-visible,body.hc footer :focus-visible{outline-color:var(--hc-focus)}
body.hc .skip{position:absolute;left:8px;top:-60px;z-index:60;background:var(--hc-surface);color:var(--hc-link);border:2px solid var(--hc-link);border-radius:var(--hc-r-sm);padding:12px 16px;font-weight:600}
body.hc .skip:focus{top:8px}

/* ---------- 4. Shared header (partial in handoff §4) ---------- */
body.hc .nav{position:sticky;top:0;z-index:30;background:rgb(11 22 38/.94);backdrop-filter:blur(8px);border-bottom:1px solid var(--hc-border)}
body.hc .navin{min-height:68px}
body.hc .brand{color:var(--hc-heading);letter-spacing:.04em;min-height:44px}
body.hc .brand span{color:var(--hc-brand)}
body.hc .brand img{height:32px;width:auto;background:none;filter:brightness(0) invert(1)}
body.hc .nav nav a{color:var(--hc-text);font-family:var(--hc-font);font-size:1rem;font-weight:500;padding:12px;margin-left:4px;min-height:44px;display:inline-flex;align-items:center}
body.hc .nav nav a:hover,body.hc .nav nav a[aria-current="page"]{color:var(--hc-heading);box-shadow:inset 0 -2px 0 var(--hc-primary)}
body.hc .nav nav a.navbtn,body.hc .nav nav a.btn{color:var(--hc-on-primary)!important;box-shadow:none;margin-left:12px}
body.hc .nav .menu{color:var(--hc-heading);background:transparent;border:1px solid var(--hc-border-strong);border-radius:var(--hc-r-sm);min-height:48px}
@media(max-width:900px){
 body.hc .nav,body.hc.navopen .nav{background:var(--hc-bg);box-shadow:none}
 body.hc .nav nav{background:var(--hc-bg);border-bottom:1px solid var(--hc-border);box-shadow:0 12px 24px rgb(0 0 0/.4)}
 body.hc .nav nav a{display:flex;min-height:48px;padding:12px 24px;margin:0;border-top:1px solid var(--hc-border)}
 body.hc .nav nav a.navbtn{margin:16px 24px 8px;justify-content:center}
}

/* ---------- 5. Buttons (one style everywhere) ---------- */
body.hc .btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:12px 20px;border-radius:var(--hc-r-sm);border:2px solid var(--hc-primary);background:var(--hc-primary);color:var(--hc-on-primary)!important;font-family:var(--hc-font);font-weight:600;font-size:1rem;line-height:1.3;text-decoration:none;text-align:center;transition:background .15s,border-color .15s}
body.hc .btn:hover{background:var(--hc-primary-hover);border-color:var(--hc-primary-hover);color:var(--hc-on-primary)!important}
body.hc .btn.ghost,body.hc .btn.alt,body.hc .gtools .btn.ghost{background:transparent;border-color:var(--hc-primary);color:var(--hc-link)!important}
body.hc .btn.ghost:hover{background:rgb(96 165 250/.12);color:var(--hc-link-hover)!important}
body.hc .btn.sm{min-height:44px;padding:8px 16px}
body.hc .btn[disabled],body.hc .btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed}
/* hero buttons: same primary style as everywhere (no white button on dark) */
body.hc .hero .ctas .btn{background:var(--hc-primary);border-color:var(--hc-primary);color:var(--hc-on-primary)!important}
body.hc .hero .ctas .btn:hover{background:var(--hc-primary-hover);border-color:var(--hc-primary-hover)}
body.hc .hero .ctas .btn.ghost{background:transparent;color:var(--hc-heading)!important;border-color:var(--hc-border-strong)}
body.hc .hero .ctas .btn.ghost:hover{border-color:var(--hc-primary);background:rgb(96 165 250/.12)}
body.hc .linkbtn{color:var(--hc-link)}

/* ---------- 6. Cards / panels / chips / badges ---------- */
body.hc .card,body.hc .offer,body.hc .mcard,body.hc .herocard,body.hc .pcard,body.hc .msgrid div,body.hc .grid article,body.hc .deliv,body.hc .pfhome .deliv,
body.hc .nlbox,body.hc .postcta,body.hc .gtopic,body.hc .grelated,body.hc .l1card,body.hc .l1result,body.hc .sckcta,body.hc .thanks,body.hc .gnavy{
  background:var(--hc-surface);color:var(--hc-text);border:1px solid var(--hc-border);border-radius:var(--hc-r-md);box-shadow:none}
body.hc .pcard:hover,body.hc .grid article:hover,body.hc a.gcard:hover .gtopic{background:var(--hc-surface-2);transform:none}
body.hc .offer.featured{border:2px solid var(--hc-primary)}
body.hc .herocard{border-top:6px solid var(--hc-primary);border-radius:var(--hc-r-lg);box-shadow:0 12px 32px rgb(0 0 0/.35)}
body.hc .card,body.hc .nlbox,body.hc .pfhome .deliv,body.hc .deliv,body.hc .l1card{border-left:4px solid var(--hc-primary)}
body.hc .thanks{border-left:4px solid var(--hc-success)}
body.hc .grid{background:transparent;border:0;gap:16px}
body.hc .incl{background:var(--hc-info-bg);border:1px solid #1f4d70;border-radius:var(--hc-r-md)}
body.hc .offer p,body.hc .mcard .also,body.hc .pcard p,body.hc .sublead,body.hc .svclinks,body.hc .price .pnote{color:var(--hc-muted)}
body.hc .price .amt,body.hc .price .pnote.big{color:var(--hc-heading)}
body.hc .badge{background:var(--hc-accent-bg);color:var(--hc-accent);border:1px solid var(--hc-accent);border-radius:999px}
body.hc .kind,body.hc .pcard .kind{color:var(--hc-accent);border:1px solid var(--hc-accent);border-radius:999px;text-transform:none;letter-spacing:0;font-size:.8125rem;font-weight:600;opacity:1}
body.hc .chips span{background:transparent;color:var(--hc-heading);border:1px solid var(--hc-border-strong);border-radius:999px}
body.hc .ic{stroke:var(--hc-success)}
body.hc .pcard .more,body.hc .seeall a{color:var(--hc-link)}
body.hc .founder img{border:3px solid var(--hc-surface);box-shadow:0 0 0 1px var(--hc-border),0 12px 32px rgb(0 0 0/.35)}
body.hc .founder span{color:var(--hc-muted)}
body.hc .namestory{border-left:3px solid var(--hc-primary);color:var(--hc-text);background:var(--hc-surface);padding:16px 20px;border-radius:0 var(--hc-r-md) var(--hc-r-md) 0}
body.hc .gcallout{background:var(--hc-accent-bg);border-color:var(--hc-accent)}
body.hc .gcallout p{color:var(--hc-text)}

/* ---------- 7. Home specifics (home.css had hard-coded #fff) ---------- */
body.hc.home,body.hc.home section,body.hc.home .truststrip,body.hc.home section.truststrip{background:var(--hc-bg)}
body.hc.home .hero{background:var(--hc-hero);color:var(--hc-text)}
body.hc.home .hero h1{color:var(--hc-heading)}
body.hc.home .hero .eyebrow{color:#bfdbfe}
body.hc.home .hero .lead,body.hc.home .hero .msline,body.hc.home .herotxt .herotag{color:var(--hc-text)}
body.hc.home .hero .msline a{color:var(--hc-link)}
body.hc.home .trust b{color:var(--hc-heading)}
body.hc.home .truststrip{border-bottom:1px solid var(--hc-border)}
body.hc.home .sticky-cta{background:var(--hc-bg);border-top:1px solid var(--hc-border);box-shadow:0 -6px 16px rgb(0 0 0/.4)}

/* ---------- 8. Forms + states (home request form, newsletter, tools) ---------- */
body.hc label,body.hc .fgrid label,body.hc .nl-form label{color:var(--hc-heading);font-family:var(--hc-font);text-transform:none;letter-spacing:0;font-weight:600;font-size:var(--hc-fs-sm)}
body.hc input,body.hc select,body.hc textarea,body.hc .nl-form input,body.hc .sckform input{background:var(--hc-bg);color:var(--hc-heading);border:1px solid var(--hc-border-strong);border-radius:var(--hc-r-sm);min-height:48px;font:inherit;font-size:1rem}
body.hc textarea{min-height:120px}
body.hc input::placeholder,body.hc textarea::placeholder{color:#8a9bb3}
body.hc input:focus,body.hc select:focus,body.hc textarea:focus{outline:3px solid var(--hc-focus);outline-offset:2px;border-color:var(--hc-primary)}
body.hc .err,body.hc input.err,body.hc .nl-form input.err,body.hc [aria-invalid="true"]{border:2px solid var(--hc-danger)!important}
body.hc .field-error{color:var(--hc-danger);font-size:var(--hc-fs-sm);margin-top:4px}
body.hc #formstatus.bad,body.hc .nl-status.bad{color:var(--hc-danger)}
body.hc #formstatus.ok,body.hc .nl-status.ok{color:var(--hc-success)}
body.hc #formstatus.bad,body.hc #formstatus.ok{padding:12px 16px;border-radius:var(--hc-r-sm)}
body.hc #formstatus.bad{background:var(--hc-danger-bg);border:1px solid var(--hc-danger)}
body.hc #formstatus.ok{background:var(--hc-success-bg);border:1px solid var(--hc-success)}
body.hc button[type="submit"][disabled]{opacity:.6}

/* ---------- 9. Subpage hero (services, privacy, blog, guides, tools, 404, newsletter) ---------- */
body.hc .subhero{background:var(--hc-hero);padding:96px 0 48px;border-bottom:1px solid var(--hc-border)}
body.hc .subhero h1{font-size:var(--hc-fs-h1);max-width:22ch}
body.hc .subhero .lead,body.hc .subhero p{color:var(--hc-text)}
body.hc .blogtop,body.hc .post{padding:96px 0 64px}
@media(max-width:600px){body.hc .subhero{padding:48px 0 32px}body.hc .blogtop,body.hc .post{padding:48px 0 48px}}

/* ---------- 10. Long-form reading: article, guides, privacy ---------- */
body.hc .prose{font-size:1.125rem;line-height:1.75;max-width:70ch;color:var(--hc-text)}
body.hc .post .wrap.narrow,body.hc .wrap.narrow{max-width:760px}
body.hc .prose h2{font-size:1.625rem;margin-top:2em}
body.hc .prose h3{font-size:1.25rem;margin-top:1.6em}
body.hc .prose a{color:var(--hc-link);text-decoration:underline}
body.hc .prose img,body.hc .post .cover{border:1px solid var(--hc-border);border-radius:var(--hc-r-md)}
body.hc .prose figcaption{color:var(--hc-muted);font-size:var(--hc-fs-sm);margin-top:6px}
body.hc .prose blockquote{background:var(--hc-surface);border-left:4px solid var(--hc-primary);border-radius:0 var(--hc-r-md) var(--hc-r-md) 0;padding:16px 20px;margin:24px 0;opacity:1;color:var(--hc-text)}
body.hc .prose hr{border:0;border-top:1px solid var(--hc-border);margin:40px 0}
body.hc .prose code,body.hc code{font-family:var(--hc-mono);font-size:.9em;background:var(--hc-surface-2);color:#e2e8f0;border:1px solid var(--hc-border);border-radius:6px;padding:.1em .4em}
body.hc .prose pre,body.hc pre{background:#081120;border:1px solid var(--hc-border);border-radius:var(--hc-r-md);padding:16px;overflow:auto;font-size:.9375rem;line-height:1.5}
body.hc .prose pre code,body.hc pre code{background:none;border:0;padding:0}
body.hc .prose table,body.hc .gbody table{width:100%;border-collapse:collapse;margin:20px 0;font-size:1rem}
body.hc .prose th,body.hc .prose td,body.hc .gbody th,body.hc .gbody td{border:1px solid var(--hc-border);padding:10px 12px;text-align:left;vertical-align:top;color:var(--hc-text)}
body.hc .prose th,body.hc .gbody th{background:var(--hc-surface-2);color:var(--hc-heading)}
body.hc .prose tbody tr:nth-child(even),body.hc .gbody tbody tr:nth-child(even){background:rgb(255 255 255/.02)}
body.hc .prose ul,body.hc .prose ol{padding-left:1.4em}
body.hc .prose li{margin:.4em 0}
body.hc .prose li::marker{color:var(--hc-muted)}
/* tables scroll on phones instead of breaking the layout */
@media(max-width:600px){body.hc .prose table{display:block;overflow-x:auto}}
/* privacy: long-form legal text */
body.hc.page-privacy .prose{font-size:1.0625rem}
body.hc.page-privacy .prose h2{font-size:1.375rem;margin-top:1.8em}

/* ---------- 11. Tools (PolicyForge doc preview stays a dark "document card") ---------- */
body.hc .pf-doc,body.hc .pf-box{background:var(--hc-surface);color:var(--hc-text);border:1px solid var(--hc-border)}
body.hc .pf-table th{background:var(--hc-surface-2);color:var(--hc-heading)}
body.hc .pf-table th,body.hc .pf-table td{border-color:var(--hc-border)}
body.hc .pf-stmt.needs{background:var(--hc-accent-bg);color:var(--hc-text)}
body.hc mark,body.hc mark.confirm{background:#fde68a;color:#1f2937}

/* ---------- 12. Shared footer (partial in handoff §4) ---------- */
body.hc footer{background:var(--hc-hero);color:var(--hc-text);text-align:left;font-family:var(--hc-font);font-size:var(--hc-fs-sm);padding:48px 0 32px;border-top:1px solid var(--hc-border)}
body.hc footer a{color:var(--hc-text);text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
body.hc footer a:hover{color:var(--hc-heading);text-decoration:underline}
body.hc footer .fh{font-size:1rem;font-weight:700;color:var(--hc-heading)!important;margin:0 0 4px}
body.hc .fgrid4{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:32px}
body.hc .fcol ul{list-style:none;margin:0;padding:0}
body.hc .fname{display:flex;align-items:center;gap:10px;font-weight:800;letter-spacing:.04em;color:var(--hc-heading);margin:0 0 8px}
body.hc .fname span{color:var(--hc-brand)}
body.hc .fname img{height:32px;width:auto;filter:brightness(0) invert(1)}
body.hc .fbrand p{margin:0 0 4px;color:var(--hc-muted)}
@media(max-width:900px){body.hc .fgrid4{grid-template-columns:1fr 1fr}}
@media(max-width:600px){body.hc .fgrid4{grid-template-columns:1fr;gap:16px}}

/* ---------- 13. Motion ---------- */
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}body.hc *{transition:none!important;animation:none!important}}
/* print stays black-on-white (styles.css print rules already do this) */
@media print{html body.hc{background:#fff;color:#000}}

/* ---------- Builder fixes (2026-10-17): no sideways scroll at 390px ---------- */
body.hc ol.gsteps{grid-template-columns:minmax(0,1fr)}
body.hc ol.gsteps>li{min-width:0;overflow-wrap:anywhere}
body.hc fieldset{min-width:0}
body.hc select{max-width:100%}
body.hc .gdraft,body.hc .subhero .gdraft{background:var(--hc-accent);color:#0b1626}

/* ===== hc-dark review patch (UI/UX, 2026-10-17). Append to the END of hc-dark.css. ===== */

html:has(body.hc){color-scheme:dark}  /* native radios, checkboxes, selects and scrollbars render dark */

/* M1. Radios and checkboxes: the shared input rule (min-height:48px, border, bg) plus sck.css
   `.sckform input{flex:1 1 260px}` turned every radio and checkbox into a 290x48 blob. Restore native controls. */
body.hc input[type=radio],body.hc input[type=checkbox],
body.hc .sckform input[type=radio],body.hc .sckform input[type=checkbox],
body.hc .pf-form input[type=checkbox],body.hc .nl-form input[type=checkbox]{
  flex:0 0 auto;width:22px;height:22px;min-height:0;min-width:0;padding:0;margin:0;
  border:0;background:none;border-radius:0;accent-color:var(--hc-primary);cursor:pointer}
body.hc .gchk input{width:28px;height:28px}             /* guide step checkboxes keep their larger size */
body.hc .sckopts{display:flex;flex-wrap:wrap;gap:8px 12px}
body.hc .sckopts label,body.hc .sckform label:has(> input[type=checkbox]),body.hc .pf-checks label,body.hc label.chk,body.hc .irpopts label{
  display:inline-flex;align-items:center;justify-content:flex-start;gap:10px;width:auto;
  min-height:48px;padding:0 14px;border:1px solid var(--hc-border);border-radius:var(--hc-r-sm);
  background:var(--hc-surface);color:var(--hc-text);font-weight:500;text-align:left;cursor:pointer}
body.hc .sckopts label:has(input:checked),body.hc label.chk:has(input:checked),body.hc .irpopts label:has(input:checked),body.hc .sckform label:has(> input[type=checkbox]:checked){
  border-color:var(--hc-primary);background:var(--hc-surface-2);color:var(--hc-heading)}
body.hc .sckopts label:has(input:focus-visible),body.hc label.chk:has(input:focus-visible),body.hc .irpopts label:has(input:focus-visible){outline:3px solid var(--hc-focus);outline-offset:2px}
body.hc .pf-checks{gap:8px}
@media (max-width:600px){ body.hc .sckopts label{flex:1 1 100%} body.hc .pf-checks label{flex:1 1 100%} }

/* M2. Semantic "bad" colors: --red was remapped to the primary blue, so error banners became
   white-on-light-blue (2.5:1, fails AA) and "No" tags look like links. */
body.hc .l1banner{border-radius:var(--hc-r-sm);font-size:1.125rem}
body.hc .l1banner.bad{background:var(--hc-danger-bg);color:#fecaca;border:1px solid var(--hc-danger)}   /* 10.88:1 */
body.hc .l1banner.ok{background:var(--hc-success-bg);color:#bbf7d0;border:1px solid var(--hc-success)} /* 11.41:1 */
body.hc .l1tag-no{border-color:var(--hc-danger);color:#fca5a5}
body.hc .bad,body.hc #pf-status.bad,body.hc .edcstatus.bad,body.hc .nl-status.bad,body.hc #pf-view-status.bad{color:var(--hc-danger)}

/* M3. No code-style labels anywhere (tone): replace the leftover JetBrains Mono metadata. */
body.hc .byline,body.hc .orig,body.hc .pcard time,body.hc .tag,body.hc .kind,body.hc .toc-h,body.hc .ck-id,
body.hc .gtime,body.hc .gdiff,body.hc .gnum,body.hc .gcard .gmeta .gtime,body.hc .gcard .gmeta .gdiff,
body.hc .l1prog,body.hc .l1tag,body.hc .pf-mock,body.hc .pf-draft,body.hc .herotag,body.hc .muted{
  font-family:var(--hc-font);letter-spacing:0;text-transform:none}
body.hc .byline,body.hc .orig,body.hc .pcard time{font-size:.9375rem;color:var(--hc-muted)}
body.hc .orig a,body.hc .back{color:var(--hc-link)}
body.hc .tag{color:var(--hc-link);font-size:inherit}
body.hc .toc-h{font-size:.9375rem;font-weight:700;color:var(--hc-heading)}
body.hc .gtime,body.hc .gdiff,body.hc .l1tag{font-size:.875rem;border-radius:999px;padding:4px 12px;border-color:var(--hc-border-strong);color:var(--hc-text)}
body.hc .gcard .gtime,body.hc .gdiff-easy{border-color:var(--hc-success);color:var(--hc-success)}
body.hc .gnum{font-size:.875rem;font-weight:700;color:var(--hc-muted)}
body.hc .l1prog{font-size:.9375rem;color:var(--hc-muted)}
body.hc .edcraw dd{font-family:var(--hc-mono)}  /* raw DNS records may stay mono: real code */

/* M4. PolicyForge result: statement IDs were #11203a on dark (invisible) and wrapped "AUP-/1". */
body.hc .pf-stmt{grid-template-columns:auto 1fr;gap:12px;border-radius:var(--hc-r-sm)}
body.hc .pf-stmt .sid{color:var(--hc-muted);white-space:nowrap;font-weight:700}
body.hc .pf-stmt.needs .sid{color:var(--hc-accent)}
body.hc .pf-draft{color:var(--hc-accent);font-size:.875rem;font-weight:700}
body.hc .pf-mock{display:block;margin:0 0 16px;padding:10px 14px;border:1px solid var(--hc-info);border-radius:var(--hc-r-sm);background:var(--hc-info-bg);color:var(--hc-info)}

/* M5. Reading width on service/offer pages: intro and body copy ran 1071px wide at 1280. */
body.hc .subhero p,body.hc main section p{max-width:68ch}
body.hc main .linkcard p,body.hc main .offer p,body.hc main [class*=card] p{max-width:none}

/* N1. One secondary button style site-wide (the hero ghost is correct; others used link-blue on a primary-blue border). */
body.hc .btn.ghost{color:var(--hc-heading);border:2px solid var(--hc-border-strong);background:transparent}
body.hc .btn.ghost:hover{border-color:var(--hc-primary-hover);color:var(--hc-heading);background:var(--hc-surface-2)}
body.hc .l1a[aria-pressed=true]{background:var(--hc-primary);color:var(--hc-on-primary);border-color:var(--hc-primary)}
/* N2. "Clear checkmarks" text button: 48px target. */
body.hc .l1back{min-height:48px;padding:0 12px;border-radius:var(--hc-r-sm)}
/* N3. Article images: soften bright/white diagrams on the dark page. */
body.hc .post img,body.hc .prose img,body.hc .pcard img{border-radius:var(--hc-r-md);border:1px solid var(--hc-border)}

/* M6. 320px reflow (WCAG 1.4.10): 42 of 43 pages scroll sideways by 15px at 320 because the
   header Menu button shrinks below its label ("Menu" spills to x=335). The blog index also overflows
   (.pgrid minmax(320px)) and PolicyForge does too (fieldset padding + select). Home is fine. */
body.hc #menubtn,body.hc .menu{flex:0 0 auto}
@media (max-width:374px){
  body.hc header .wrap,body.hc header.nav .wrap{padding-left:12px;padding-right:12px;gap:8px}
  body.hc header .brand{font-size:.95rem;gap:6px;letter-spacing:.02em;min-width:0}
  body.hc header .brand img{width:28px;height:28px}
  body.hc #menubtn{padding:0 10px;gap:6px}
}
body.hc .pgrid{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
body.hc .pcard{min-width:0}
body.hc .pf-form label,body.hc .pf-form .full,body.hc .pf-form select{min-width:0;max-width:100%}
@media (max-width:480px){ body.hc .pf-form fieldset{padding:16px} }
/* M3 follow-up: the page rule .prose ol.checklist .ck-id (0,3,1) outranked body.hc .ck-id, so CMMC checklist IDs stayed JetBrains Mono. */
body.hc .prose ol.checklist .ck-id{font-family:var(--hc-font);letter-spacing:0}

/* v2 polish (dark-review.md P2/P3) */
body.hc .irpopts{gap:8px}
@media (max-width:600px){ body.hc .irpopts label{flex:1 1 100%} }
body.hc .pf-checks input[type=checkbox]{width:20px;height:20px;flex:0 0 20px}