:root{
  --ink:#0A0A0A; --panel:#131316; --panel-deep:#0E0E11; --rule:#26262A;
  --white:#FFFFFF; --platinum:#C8C5BE; --steel:#8E8B84; --graphite:#86837C;
  /* The technical accent that separates this property from mashmancg.com.
     Used sparingly: active states, focus rings, data emphasis, the
     instrument's own signals. Never for body copy. Contrast against --ink
     is verified in validate.py. */
  --accent:#3DF5A0; --accent-dim:#1FA96B;
  --display:'Montserrat',system-ui,-apple-system,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;
  --gut:28px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html{overflow-x:hidden}
body{margin:0;overflow-x:hidden;max-width:100vw;background:var(--ink);color:var(--white);font-family:var(--body);font-weight:300;font-size:16px;line-height:1.75;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4,.dsp{font-family:var(--display);letter-spacing:-.025em;line-height:1.1;font-weight:600;margin:0}
p{margin:0 0 18px}
a{color:var(--platinum);text-decoration:none}
img{max-width:100%}
button,input,select,textarea{border-radius:0;font-family:var(--body)}
button{cursor:pointer}
input,textarea,select{background:var(--panel-deep);color:var(--white);border:1px solid var(--rule);padding:12px 13px;font-size:15px;width:100%}
input,textarea{overflow:hidden;text-overflow:ellipsis}
/* iOS and some Android browsers render an unstyled <select> with native
   OS chrome, which ignores the dark background and can make the control
   look empty. Reset native appearance and draw our own arrow instead. */
select{-webkit-appearance:none;appearance:none;padding-right:36px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%23C8C5BE' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:12px}
select option{background:var(--panel-deep);color:var(--white)}
input:focus,textarea:focus,select:focus,button:focus-visible,a:focus-visible{outline:2px solid var(--platinum);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;background:var(--platinum);color:var(--ink);padding:10px 16px;z-index:100}
.skip:focus{left:0}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.lbl{font-family:var(--display);font-size:10px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--platinum)}
.fine{color:var(--graphite);font-size:13px;line-height:1.65}
.wrap{max-width:1120px;margin:0 auto;padding:0 var(--gut)}
.wrap.narrow{max-width:760px}

/* head */
.site-head{border-bottom:1px solid var(--rule);position:sticky;top:0;background:var(--ink);z-index:40}
.head-in{max-width:1120px;margin:0 auto;padding:18px var(--gut);display:flex;gap:22px;align-items:center;flex-wrap:wrap;min-width:0}
.wordmark{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--white);
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:0 1 auto}
.wordmark span{color:var(--platinum);font-size:10px;vertical-align:super}

/* Navigation menu: a native <details> disclosure. Works with zero
   JavaScript, closes with Escape natively, and needs no positioning
   hacks for the panel since <details> handles it. */
/* Pushed hard to the right edge of the header. It was previously wrapped
   in an outer <nav>, so this margin applied to the wrapper instead of a
   flex child of .head-in and never took effect, leaving the menu crowded
   against the wordmark. */
.nav-menu{margin-left:auto;position:relative;flex:0 0 auto}
.nav-menu summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  -webkit-appearance:none;appearance:none;
  border:1px solid var(--rule);padding:10px 18px;font-family:var(--display);font-size:12.5px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--white);user-select:none;white-space:nowrap;max-width:60vw;
  overflow:hidden;text-overflow:ellipsis;transition:border-color .18s ease}
.nav-menu summary::-webkit-details-marker{display:none}
.nav-menu summary span{overflow:hidden;text-overflow:ellipsis;flex:0 1 auto}
.nav-menu summary::after{content:'';flex:0 0 auto;width:7px;height:7px;border-right:1.5px solid var(--accent);
  border-bottom:1.5px solid var(--accent);transform:rotate(45deg);transition:transform .18s ease;margin-top:-3px}
.nav-menu[open] summary::after{transform:rotate(-135deg);margin-top:3px}
.nav-menu summary:hover,.nav-menu[open] summary{border-color:var(--accent)}
.nav-menu nav{position:absolute;top:calc(100% + 8px);right:0;min-width:240px;
  max-width:min(320px,calc(100vw - 40px));background:var(--panel-deep);
  border:1px solid var(--platinum);display:flex;flex-direction:column;z-index:50}
.nav-menu nav a{padding:14px 18px;font-family:var(--display);font-size:13.5px;font-weight:600;
  letter-spacing:.01em;color:var(--steel);border-bottom:1px solid var(--rule)}
.nav-menu nav a:last-child{border-bottom:0}
.nav-menu nav a:hover{color:var(--white);background:var(--panel)}
.nav-menu nav a[aria-current="page"]{color:var(--accent)}
.nav-menu nav a[aria-current="page"]::before{content:'\2014\00a0'}
@media(max-width:640px){
  .head-in{padding:14px 20px;gap:12px}
}
}
@media print{.nav-menu{display:none}}

/* hero */
.hero{padding:92px 0 68px;border-bottom:1px solid var(--rule)}
.hero.tight{padding:64px 0 48px}
.eyebrow{font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--platinum);margin-bottom:22px}
h1{font-size:clamp(38px,6.2vw,74px);font-weight:700;max-width:16ch;letter-spacing:-.035em}
.hero.tight h1{font-size:clamp(31px,4.8vw,52px);max-width:20ch}
.lead{margin-top:26px;max-width:62ch;font-size:18px;color:var(--steel);line-height:1.65}
.cta-row{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
.btn{display:inline-block;border:1px solid var(--white);background:var(--white);color:var(--ink);padding:14px 26px;font-family:var(--display);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;transition:background .18s ease,border-color .18s ease,color .18s ease}
.btn:hover{background:var(--platinum);border-color:var(--platinum);color:var(--ink)}
.btn.solid{background:var(--white);border-color:var(--white);color:var(--ink)}
.btn.solid:hover{background:var(--platinum);border-color:var(--platinum)}
.btn.ghost{background:transparent;border-color:var(--rule);color:var(--steel)}
.btn.ghost:hover{background:transparent;border-color:var(--platinum);color:var(--platinum)}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.btn[disabled]:hover{background:var(--white);border-color:var(--white)}
@media(prefers-reduced-motion:reduce){.btn{transition:none}}

/* bands */
.band{padding:76px 0;border-bottom:1px solid var(--rule)}
.band.alt{background:var(--panel-deep)}
.band h2{font-size:clamp(25px,3.4vw,36px);max-width:22ch}
.intro{margin-top:20px;max-width:64ch;color:var(--steel);font-size:16px}
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
@media(max-width:820px){.two{grid-template-columns:1fr;gap:34px}.band{padding:54px 0}}

/* pillars */
.pillars{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:40px}
.pillar{background:var(--ink);padding:26px 22px}
.band.alt .pillar{background:var(--panel-deep)}
.pillar-n{font-size:11px;color:var(--platinum);letter-spacing:.1em}
.pillar h3{font-size:17px;margin:12px 0 10px}
.pillar p{font-size:13.5px;color:var(--graphite);line-height:1.6;margin:0}

/* tiers */
.tiers{width:100%;border-collapse:collapse;font-size:14px}
.tiers td{padding:13px 12px 13px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.tiers td.n{width:34px;color:var(--platinum);font-size:12px}
.tiers .dsp{font-size:15px}

/* cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:40px}
.card{background:var(--ink);padding:32px 26px;display:block;color:var(--white)}
.card:hover{background:var(--panel)}
.card h3{font-size:21px;margin:14px 0 12px}
.card p{font-size:14px;color:var(--steel);line-height:1.65;margin-bottom:18px}
.card .more{font-family:var(--display);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--platinum);font-weight:600}

/* status + forms */
.status{border:1px solid var(--platinum);padding:20px 22px;margin-bottom:46px}
.status p{margin:8px 0 0;font-size:14.5px}
.signup{margin-top:26px;max-width:440px;display:flex;flex-direction:column;gap:8px}
.signup .lbl{margin-top:12px}
.signup .btn{margin-top:18px;text-align:center}
.hp{position:absolute;left:-9999px}

/* legal */
.legal h2{font-size:21px;margin:44px 0 14px;max-width:none}
.legal h2:first-child{margin-top:0}
.legal p{font-size:15px;color:var(--steel);max-width:68ch}
.legal strong{color:var(--white);font-weight:500}
.legal a{border-bottom:1px solid var(--rule)}

/* paper */
.paper-layout{display:grid;grid-template-columns:230px 1fr;gap:60px;align-items:start}
@media(max-width:900px){.paper-layout{grid-template-columns:1fr;gap:30px}}
.paper-toc{position:sticky;top:92px;display:flex;flex-direction:column}
@media(max-width:900px){.paper-toc{position:static;border-bottom:1px solid var(--rule);padding-bottom:20px}}
.paper-toc a{font-size:12.5px;color:var(--steel);padding:7px 0;border-bottom:1px solid var(--rule);line-height:1.4}
.paper-toc a:hover{color:var(--white)}
.paper-toc .lbl{margin-bottom:10px}
.paper{max-width:68ch}
.paper p{font-size:17px;line-height:1.8;color:#E8E6E1;margin-bottom:22px}
.paper h2{font-size:26px;margin:52px 0 20px;padding-top:26px;border-top:1px solid var(--rule);scroll-margin-top:100px}
.paper ul{margin:0 0 24px;padding-left:20px}
.paper li{font-size:16.5px;line-height:1.7;color:#E8E6E1;margin-bottom:8px}
.preface{border-left:2px solid var(--platinum);padding:18px 0 18px 22px;margin-bottom:40px;background:var(--panel-deep)}
.preface p{font-size:15px;color:var(--steel);margin:10px 0 0;line-height:1.7}
.paper-end{margin-top:60px;border-top:1px solid var(--platinum);padding-top:24px}
.paper-end p{font-size:13px;color:var(--graphite);line-height:1.65;max-width:60ch}

/* audit app */
/* Keeps .wrap's horizontal gutter. Setting padding shorthand here
   previously zeroed the left and right sides, so every audit field ran
   edge to edge on mobile and the focus outline overflowed the viewport. */
#audit-app{padding:54px var(--gut) 96px}
.nilstate{border:1px solid var(--rule);padding:22px;color:var(--steel);font-size:15px}

/* foot */
.site-foot{padding:64px 0 30px}
.foot-in{max-width:1120px;margin:0 auto;padding:0 var(--gut);display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:38px}
.foot-col{display:flex;flex-direction:column;gap:9px}
.foot-col .lbl{margin-bottom:6px}
.foot-col a{font-size:13.5px;color:var(--steel)}
.foot-col a:hover{color:var(--white)}
.foot-col p{margin:0;max-width:32ch}
.foot-base{max-width:1120px;margin:46px auto 0;padding:22px var(--gut) 0;border-top:1px solid var(--rule);display:flex;gap:20px;justify-content:space-between;flex-wrap:wrap}

/* ---- audit app ---- */
.ap-step{max-width:800px}
.ap-progress{margin-bottom:34px}
.ap-track{height:2px;background:var(--rule);position:relative;margin-bottom:9px}
.ap-track i{position:absolute;left:0;top:0;bottom:0;background:var(--platinum);transition:width .4s cubic-bezier(.22,1,.36,1)}
.ap-field{margin-top:28px}
.ap-field .lbl{display:block;margin-bottom:8px}
.ap-q{border-top:1px solid var(--rule);padding:30px 0}
.ap-q:last-of-type{border-bottom:1px solid var(--rule)}
.ap-dim{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:var(--graphite);text-transform:uppercase;margin-bottom:12px}
.ap-qt{font-family:var(--display);font-weight:500;font-size:19px;line-height:1.35;letter-spacing:-.015em;max-width:54ch}
.ap-opts{margin-top:20px;display:flex;flex-direction:column;gap:1px}
.ap-opt{display:block;width:100%;text-align:left;padding:14px 16px;background:var(--panel-deep);border:1px solid transparent;color:var(--white);font-size:15px;line-height:1.55;font-weight:300}
.ap-opt:hover{background:var(--panel)}
.ap-opt[aria-pressed="true"]{border-color:var(--platinum);background:var(--panel)}
.ap-nav{display:flex;gap:12px;margin-top:40px;flex-wrap:wrap}
.ap-sec{margin-top:56px;border-top:1px solid var(--rule);padding-top:30px}
.ap-sec h3{font-size:22px}
.ap-slab{display:grid;grid-template-columns:minmax(150px,220px) 1fr;gap:40px;margin-top:24px;align-items:start}
@media(max-width:700px){.ap-slab{grid-template-columns:1fr;gap:20px}}
.ap-big{font-size:76px;line-height:.9;font-weight:500;letter-spacing:-.04em}
.ap-slab h2{font-size:30px}
.ap-cap{border:1px solid var(--platinum);padding:16px 18px;margin-top:20px}
.ap-cap p{margin:8px 0 0;font-size:14.5px}
.ap-prow{display:grid;grid-template-columns:1fr 62px;gap:16px;align-items:center;padding:15px 0;border-bottom:1px solid var(--rule)}
.ap-pname{font-family:var(--display);font-weight:500;font-size:15px;margin-bottom:9px}
.ap-meter{height:5px;background:var(--rule);position:relative}
.ap-meter i{position:absolute;left:0;top:0;bottom:0;background:var(--platinum)}
.ap-pscore{text-align:right;font-size:17px}
.ap-flag{border-left:2px solid var(--platinum);padding:16px 0 16px 18px;margin-bottom:10px;background:var(--panel-deep)}
.ap-flag.high,.ap-flag.medium{border-left-color:var(--steel)}
.ap-sev{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--platinum)}
.ap-flag.high .ap-sev,.ap-flag.medium .ap-sev{color:var(--steel)}
.ap-ftitle{font-family:var(--display);font-weight:600;font-size:16px;margin:6px 0 8px}
.ap-flag p{font-size:14.5px;margin:0 0 6px;color:#E8E6E1}
.ap-move{display:grid;grid-template-columns:34px 1fr;gap:18px;padding:22px 0;border-top:1px solid var(--rule)}
.ap-move:last-of-type{border-bottom:1px solid var(--rule)}
.ap-rank{font-size:13px;color:var(--platinum);padding-top:4px}
.ap-mtext{font-family:var(--display);font-weight:500;font-size:17px;line-height:1.45;letter-spacing:-.01em}
.ap-meta{margin-top:11px;display:flex;gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;color:var(--graphite)}
.ap-capture{border-top:1px solid var(--platinum)}
@media print{
  .site-head,.site-foot,.ap-nav,.ap-capture,.ap-share,.hero .lead,.hero .fine{display:none}
  body{background:#FFF;color:#0A0A0A}
  .ap-opt,.ap-flag{background:#FFF}
  .ap-meter{background:#DDD8CE}.ap-meter i{background:#0A0A0A}
  .ap-flag p,.ap-mtext{color:#0A0A0A}
  .fine,.intro{color:#3E3E3E}
  .ap-sec,.ap-move{page-break-inside:avoid}
}

/* ---- how scoring works ---- */
.flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:38px}
.flow-step{background:var(--ink);padding:26px 22px}
.band.alt .flow-step{background:var(--panel-deep)}
.flow-n{font-size:11px;color:var(--platinum);letter-spacing:.1em}
.flow-step h3{font-size:17px;margin:12px 0 10px}
.flow-step p{font-size:13.5px;color:var(--graphite);line-height:1.6;margin:0}
/* Separated cards rather than hairline-divided rows: at five bands the
   1px-gap treatment gave almost no separation between one band and the
   next, so they read as one continuous block. */
.band-grid{display:flex;flex-direction:column;gap:18px;margin-top:38px}
.band-card{background:var(--panel-deep);border:1px solid var(--rule);border-left:3px solid var(--accent);
  padding:30px 30px;scroll-margin-top:100px;transition:border-color .18s ease}
.band-card:hover{border-color:var(--rule);border-left-color:var(--accent)}
.band-range{font-family:var(--mono);font-size:12px;color:var(--accent);letter-spacing:.08em}
.band-card h3{font-size:25px;margin:8px 0 12px}
.band-sum{color:var(--steel);max-width:66ch;font-size:15px}
.band-rows{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px;margin-top:24px;padding-top:22px;border-top:1px solid var(--rule)}
.band-rows p{font-size:13.5px;color:var(--graphite);line-height:1.65;margin:8px 0 0}
table thead th.n{text-align:right}

/* ---- mode choice ---- */
.mode-choice{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);margin:32px 0}
@media(max-width:640px){.mode-choice{grid-template-columns:1fr}}
.mode-opt{background:var(--panel-deep);padding:26px 24px;text-align:left;color:var(--white);border:1px solid transparent;display:block;width:100%}
.mode-opt:hover{background:var(--panel)}
.mode-opt[aria-pressed="true"]{border-color:var(--platinum);background:var(--panel)}
.mode-opt .mode-n{font-family:var(--mono);font-size:11px;color:var(--platinum);letter-spacing:.08em}
.mode-opt h3{font-size:19px;margin:10px 0 8px}
.mode-opt p{font-size:13.5px;color:var(--graphite);line-height:1.6;margin:0}
.mode-opt .mode-time{margin-top:14px;font-family:var(--mono);font-size:10.5px;color:var(--steel)}

/* ---- interactivity ---- */
.ap-opt{transition:background .15s ease,border-color .15s ease,transform .15s ease}
.ap-opt:hover{transform:translateX(3px)}
.ap-opt[aria-pressed="true"]{transform:translateX(3px)}
.ap-q{transition:opacity .3s ease}
.ap-q.answered .ap-dim{color:var(--platinum)}
/* Content is visible by default. The fade-up only applies once JS has
   added .js-reveal to <html>, so a script failure can never leave a
   section invisible. */
.js-reveal .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
.js-reveal .reveal.in{opacity:1;transform:none}
.card,.pillar,.flow-step,.band-card{transition:background .2s ease}
.pillar:hover,.flow-step:hover{background:var(--panel)}
.ap-meter i,.ap-track i{transition:width .6s cubic-bezier(.22,1,.36,1)}
.ap-big{transition:opacity .4s ease}
.counted{animation:none}
@media(prefers-reduced-motion:reduce){
  .js-reveal .reveal{opacity:1;transform:none;transition:none}
  .ap-opt:hover,.ap-opt[aria-pressed="true"]{transform:none}
}
.ap-error{color:var(--white);font-size:13.5px;min-height:18px;margin-top:4px}
.read-bar{position:fixed;top:0;left:0;height:2px;width:0;background:var(--platinum);z-index:60;transition:width .1s linear}
.paper-toc a[aria-current="true"]{color:var(--white);border-bottom-color:var(--platinum)}

/* ---- FAQ (brand-audit page) ---- */
.faq{margin-top:32px;display:flex;flex-direction:column;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.faq-item{background:var(--panel-deep);padding:26px 24px}
.faq-item h3{font-size:17px;margin-bottom:10px}
.faq-item p{font-size:14.5px;color:var(--steel);line-height:1.7;margin:0}

/* ---- the book ---- */
.book-hero{display:grid;grid-template-columns:1fr 260px;gap:48px;align-items:start}
@media(max-width:760px){.book-hero{grid-template-columns:1fr;gap:28px}.book-hero img{max-width:220px;margin:0 auto}}
.book-cover{width:100%;height:auto;border:1px solid var(--rule)}
/* Each tile carries its own border rather than the container painting a
   background through 1px gaps. With seven retailers the old approach left
   the trailing cells of the last row showing as empty boxes. */
.retailers{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;margin-top:24px}
.retailers a{background:var(--panel-deep);border:1px solid var(--rule);padding:18px 20px;display:flex;flex-direction:column;gap:4px;color:var(--white);transition:border-color .18s ease,background .18s ease}
.retailers a:hover{background:var(--panel);border-color:var(--accent)}
.retailers a span:first-child{font-family:var(--display);font-weight:600;font-size:14.5px}

/* ---- what you need to know ---- */
.terms{display:flex;flex-direction:column;gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:32px}
.term{background:var(--ink);padding:20px 22px;display:grid;grid-template-columns:34px 1fr;gap:18px;scroll-margin-top:100px}
.band.alt .term{background:var(--panel-deep)}
.term-n{font-size:13px;color:var(--platinum);padding-top:2px}
.term .dsp{font-size:16px;margin-bottom:6px}
.term p{font-size:14px;color:var(--steel);line-height:1.65;margin:0;max-width:62ch}

/* ---- footer brand mark ---- */
.foot-mark{display:flex;align-items:center;gap:12px}
.foot-mark img{opacity:.85;flex:none}

/* ---- consent checkbox ---- */
.ap-consent{display:flex;align-items:flex-start;gap:11px;margin:6px 0 4px;cursor:pointer}
.ap-consent input[type="checkbox"]{width:auto;flex:none;margin-top:3px;accent-color:var(--platinum)}
.ap-consent span{font-size:13px;color:var(--steel);line-height:1.55}

/* ---- certificate (print-only) ---- */
.certificate-print{display:none}
@media print{
  @page{margin:8mm}
  body.printing-certificate > *:not(#main){display:none !important}
  body.printing-certificate #main > *:not(#audit-app){display:none !important}
  body.printing-certificate #audit-app > *:not(.ap-result){display:none !important}
  body.printing-certificate .ap-result > *:not(.certificate-print){display:none !important}
  body.printing-certificate .certificate-print{display:block !important}
  body.printing-certificate .cert-page{page-break-inside:avoid}
  body.printing-certificate{background:#FFF}
}
.cert-page{width:100%;max-width:680px;margin:0 auto;background:#0A0A0A;color:#FFF;padding:38px 48px;font-family:'Inter',sans-serif}
.cert-top{display:flex;align-items:center;gap:14px;margin-bottom:28px}
.cert-mark{width:40px;height:40px;flex:none}
.cert-brand{font-family:'Montserrat',sans-serif;font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:#C8C5BE}
.cert-badge{display:inline-flex;align-items:center;gap:8px;border:1px solid #C8C5BE;padding:6px 13px;margin-bottom:20px}
.cert-badge svg{width:13px;height:13px;flex:none}
.cert-badge span{font-family:'Montserrat',sans-serif;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase}
.cert-score{font-family:'JetBrains Mono',monospace;font-size:76px;font-weight:500;letter-spacing:-.03em;line-height:1}
.cert-band{font-family:'Montserrat',sans-serif;font-weight:700;font-size:22px;margin-top:6px}
.cert-name{color:#8E8B84;font-size:13px;margin-top:8px}
.cert-pillars{margin-top:22px;border-top:1px solid #26262A;padding-top:2px}
.cert-prow{display:flex;justify-content:space-between;align-items:center;padding:9px 0;border-bottom:1px solid #26262A}
.cert-prow .pn{font-size:13.5px;color:#8E8B84}
.cert-prow .pm{flex:1;height:5px;background:#26262A;margin:0 16px;position:relative}
.cert-prow .pm i{position:absolute;left:0;top:0;bottom:0;background:#C8C5BE}
.cert-prow .ps{font-family:'JetBrains Mono',monospace;font-size:13px;min-width:44px;text-align:right}
.cert-purpose{margin-top:20px;padding-top:16px;border-top:1px solid #C8C5BE}
.cert-purpose p{font-size:11.5px;color:#8E8B84;line-height:1.5;margin:0 0 6px}
.cert-cta{font-family:'Montserrat',sans-serif;font-weight:700;font-size:15px;margin:14px 0 3px}
.cert-url{font-size:12.5px;color:#8E8B84}
.cert-fine{margin-top:12px;font-size:9px;color:#5C584E;line-height:1.5}

/* ---- recognition / check list ----
   .check was used on the Book page's recognition lines but never had a
   rule, so the items rendered as plain stacked paragraphs with no
   separation, marker, or rhythm. */
.check{position:relative;padding:14px 0 14px 30px;margin:0;border-bottom:1px solid var(--rule);font-size:15px;line-height:1.6;color:#E8E6E1}
.check:first-of-type{border-top:1px solid var(--rule)}
.check:before{content:'';position:absolute;left:2px;top:21px;width:9px;height:9px;
  border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  transform:rotate(45deg) translateY(-2px)}
.check em{color:var(--white);font-style:italic}

/* ---- accent through the audit instrument ----
   The accent marks live instrument state: what you have selected, what
   is filling, what is complete. It is a signal colour, not decoration,
   so it appears on interaction and progress rather than on static text. */
.mode-opt[aria-pressed="true"]{border-color:var(--accent)}
.mode-opt[aria-pressed="true"] .mode-n{color:var(--accent)}
.mode-opt:hover{border-color:var(--rule)}

.ap-opt[aria-pressed="true"]{border-color:var(--accent)}
.ap-opt[aria-pressed="true"] .pts{color:var(--accent)}
.ap-q.answered .ap-dim{color:var(--accent)}

.ap-track i{background:var(--accent)}
.ap-meter i{background:var(--accent)}
.ap-big{color:var(--white)}
.ap-rank{color:var(--accent)}
.ap-sev{color:var(--accent)}
.ap-flag{border-left-color:var(--accent)}
.ap-flag.high,.ap-flag.medium{border-left-color:var(--steel)}

.ap-field input:focus,.ap-field select:focus,.signup input:focus{outline-color:var(--accent)}
.ap-consent input[type="checkbox"]{accent-color:var(--accent)}

/* Flow steps and pillar cards pick up the accent on their index marker */
.flow-n,.pillar-n{color:var(--accent)}
.term-n{color:var(--accent)}
.cert-badge svg circle,.cert-badge svg path{stroke:var(--accent)}

/* Print: the accent is a screen signal. On paper it becomes black so a
   printed report never depends on colour to be read. */
@media print{
  .ap-track i,.ap-meter i{background:#0A0A0A}
  .ap-rank,.ap-sev,.flow-n,.pillar-n,.term-n{color:#0A0A0A}
  .ap-flag{border-left-color:#0A0A0A}
}

/* ---- example report page ----
   Two columns: the report itself on the left exactly as it renders, and
   a plain-language annotation beside it. On narrow screens the
   annotation follows its section rather than being stranded. */
.xr-note{border-left:2px solid var(--accent);background:var(--panel-deep);padding:16px 20px;margin-bottom:38px}
.xr-note p{margin:6px 0 0;color:var(--steel);font-size:14.5px;max-width:70ch}
.xr-annotated{display:grid;grid-template-columns:1fr 300px;gap:40px;align-items:start;
  padding:32px 0;border-top:1px solid var(--rule)}
@media(max-width:860px){.xr-annotated{grid-template-columns:1fr;gap:20px}}
.xr-doc{min-width:0}
.xr-ann{background:var(--panel-deep);border:1px solid var(--rule);border-left:2px solid var(--accent);padding:18px 20px}
.xr-ann p{font-size:13.5px;color:var(--steel);line-height:1.65;margin:8px 0 0}
.xr-ann em{color:var(--white);font-style:italic}
.xr-big{font-size:68px;line-height:1;font-weight:500;letter-spacing:-.03em;margin-top:8px}
.xr-band{font-family:var(--display);font-weight:700;font-size:24px;margin-top:6px}
.xr-pillars{margin-top:14px}
.xr-prow{display:grid;grid-template-columns:200px 1fr 54px;gap:16px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--rule)}
@media(max-width:620px){.xr-prow{grid-template-columns:1fr 44px;gap:8px}.xr-prow .xr-meter{grid-column:1/-1}}
.xr-pname{font-family:var(--display);font-weight:600;font-size:14.5px}
.xr-meter{height:6px;background:var(--rule);position:relative}
.xr-meter i{position:absolute;left:0;top:0;bottom:0;background:var(--accent)}
.xr-pscore{text-align:right;font-size:15px}
.xr-flag{border-left:2px solid var(--accent);background:var(--panel-deep);padding:14px 0 14px 16px;margin-bottom:10px}
.xr-flag.high,.xr-flag.medium{border-left-color:var(--steel)}
.xr-flag p{font-size:14px;color:#E8E6E1;margin:0 0 6px;max-width:66ch}
.xr-sev{font-family:var(--mono);font-size:10px;letter-spacing:.12em;color:var(--accent)}
.xr-flag.high .xr-sev,.xr-flag.medium .xr-sev{color:var(--steel)}
.xr-move{display:grid;grid-template-columns:34px 1fr;gap:16px;padding:18px 0;border-top:1px solid var(--rule)}
.xr-rank{font-family:var(--mono);font-size:13px;color:var(--accent);padding-top:3px}
.xr-mtext{font-family:var(--display);font-weight:500;font-size:16px;line-height:1.45;max-width:62ch}
.xr-meta{margin-top:10px;display:flex;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:10.5px;color:var(--graphite)}


/* ---- mobile field polish ----
   Focus rings need room to draw. At narrow widths the offset is reduced
   so the ring sits inside the gutter rather than against the screen edge. */
@media(max-width:700px){
  input:focus,textarea:focus,select:focus{outline-offset:1px}
  .ap-field input,.ap-field select,.signup input{font-size:16px}
  .ap-opt{padding:13px 14px}
  .ap-qt{font-size:17px}
  .mode-opt{padding:20px 18px}
}

/* ---- social share row ---- */
.ap-social{margin-top:26px;padding-top:20px;border-top:1px solid var(--rule)}
.ap-social-row{display:flex;gap:10px;margin-top:12px;flex-wrap:wrap}
.ap-social-row .btn{padding:11px 18px;font-size:11.5px}
@media print{.ap-social{display:none}}