: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;
  display:inline-flex;align-items:center;gap:9px}
.wordmark span{color:var(--platinum);font-size:10px;vertical-align:super}
/* flex align-items:center centers the mark's full bounding box, but the
   mark's own visual weight sits lower within that box (the sparkle at
   top reads much lighter than the bold "iP" body beneath it), so a
   purely geometric center leaves it looking low against the text next
   to it. Small manual nudge upward to compensate. */
.wordmark-mark{height:22px;width:auto;flex:none;margin-top:-2px}

/* 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'}

/* A group is a second, nested <details> -- expands in place with no
   JavaScript, same as the outer menu, for the same reason. */
.nav-group{border-bottom:1px solid var(--rule)}
.nav-group:last-child{border-bottom:0}
/* Selector qualified with .nav-menu, not just .nav-group, because
   .nav-menu summary above is a descendant selector: it matches ANY
   <summary> nested inside .nav-menu, at any depth, this one included.
   Without the extra specificity here, that rule's uppercase transform,
   border, and open-state green border-color all leak through onto
   every group header regardless of its own state -- stacked boxes,
   shouting group names, exactly the two things this was reported as. */
.nav-menu .nav-group summary{list-style:none;cursor:pointer;-webkit-appearance:none;appearance:none;
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:14px 18px;font-family:var(--display);font-size:13.5px;font-weight:600;
  letter-spacing:.01em;text-transform:none;color:var(--steel);user-select:none;
  border:none;background:none}
.nav-group summary::-webkit-details-marker{display:none}
.nav-menu .nav-group summary:hover{color:var(--white);background:var(--panel);border:none}
.nav-menu .nav-group summary::after{content:'';flex:0 0 auto;width:6px;height:6px;
  border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  border-top:none;border-left:none;
  transform:rotate(45deg);transition:transform .18s ease;margin-top:-2px}
.nav-group[open] summary::after{transform:rotate(-135deg);margin-top:2px}
.nav-group-items{display:flex;flex-direction:column;background:var(--ink)}
.nav-group-items a{padding:12px 18px 12px 30px;font-family:var(--display);font-size:13px;
  font-weight:500;letter-spacing:.01em;color:var(--steel);border-bottom:1px solid var(--rule)}
.nav-group-items a:last-child{border-bottom:0}
.nav-group-items a:hover{color:var(--white);background:var(--panel)}
.nav-group-items a[aria-current="page"]{color:var(--accent)}
.nav-group-items 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(--accent);border-color:var(--accent);color:var(--ink)}
.btn.solid{background:var(--white);border-color:var(--white);color:var(--ink)}
.btn.solid:hover{background:var(--accent);border-color:var(--accent)}
.btn.ghost{background:transparent;border-color:var(--rule);color:var(--steel)}
.btn.ghost:hover{background:transparent;border-color:var(--accent);color:var(--accent)}
.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(--accent)}
.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(--accent);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(--accent)}
.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}
/* Fixed to the left edge of the viewport for the duration of the pillar
   steps, rather than living inline at the top of the scrolling content
   the way the old .ap-progress/.ap-track did. */
.ap-progress-fixed{position:fixed;left:0;top:0;bottom:0;width:5px;z-index:40;background:var(--rule)}
.ap-progress-fixed i{position:absolute;left:0;top:0;width:100%;height:0;background:var(--accent);transition:height .4s cubic-bezier(.22,1,.36,1)}
.ap-progress-badge{position:fixed;left:16px;bottom:16px;z-index:40;background:var(--panel-deep);
  border:1px solid var(--rule);padding:8px 12px;font-family:var(--mono);font-size:11px;
  color:var(--steel);letter-spacing:.04em;white-space:nowrap}
@media(max-width:640px){.ap-progress-badge{left:10px;bottom:10px;padding:6px 10px;font-size:10px}}
@media print{.ap-progress-fixed,.ap-progress-badge{display:none}}
/* Profession, collected as chips from a fixed list instead of free text,
   joined into the same single string the rest of the system already
   expects (narrative prompt, dashboard, CSV export) -- only how it's
   collected changed, not what's stored. */
.ap-multiselect{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ms-opt{padding:9px 14px;background:var(--panel-deep);border:1px solid var(--rule);color:var(--steel);font-size:13px;cursor:pointer;transition:background .15s ease,border-color .15s ease,color .15s ease}
.ms-opt[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.ap-multiselect + input{margin-top:12px}
/* A survey's multi-select question (form-app.js) -- plain checkboxes,
   not chips, since "which of these apply" reads more naturally as a
   checklist than as toggleable pills. */
.form-check{display:flex;align-items:center;gap:8px;padding:8px 0;font-size:14.5px;color:var(--platinum);cursor:pointer}
.form-check input{margin:0}

.ap-prefill{border:1px solid var(--rule);border-left:2px solid var(--accent);background:var(--panel-deep);padding:16px 18px;margin:14px 0 6px}
.ap-prefill p{margin:0 0 14px;font-size:14px;color:var(--platinum);line-height:1.6}
.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)}

/* Where you stand vs. where you're aiming: two distinct columns, not
   one line, so the gap between them reads as its own fact. */
.ap-hierarchy{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:20px}
@media(max-width:620px){.ap-hierarchy{grid-template-columns:1fr}}
.ap-hcol{border:1px solid var(--rule);background:var(--panel-deep);padding:18px 20px}
.ap-htier{font-size:19px;margin-top:8px}

/* The AI-written diagnosis. Loads in after the rest of the report, so
   it starts as a plain placeholder line and is replaced in place. */
.ap-narrative-body p{font-size:14.5px;color:#E8E6E1;line-height:1.75;margin:0 0 14px}
.ap-narrative-body p:last-child{margin-bottom:0}

/* The private, 14-day report link. A left accent instead of a full
   callout box, so it reads as related to the section above it (the
   diagnosis) rather than as a fourth unrelated card. */
.ap-private-link{border-left:2px solid var(--accent);padding-left:20px}

@media print{
  .site-head,.site-foot,.ap-nav,.ap-capture,.ap-share,.ap-private-link,.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-hcol{background:#FFF;border-color:#DDD8CE}
  .ap-narrative-body p{color:#0A0A0A}
  .ap-sec,.ap-move,.ap-hcol{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)}
/* The locked Complete card is a div, not a button -- only the Unlock
   control inside it is actually clickable, so it shouldn't pick up the
   button hover/press styling the way a real mode-opt does. */
.mode-locked{cursor:default}
.mode-locked:hover{background:var(--panel-deep)}
.mode-unlock{display:flex;gap:8px;margin-top:16px}
.mode-unlock input{flex:1;min-width:0;background:var(--ink);border:1px solid var(--rule);color:var(--white);
  font-family:var(--mono);font-size:13px;letter-spacing:.04em;text-transform:uppercase;padding:9px 10px}
.mode-unlock .btn{padding:9px 16px;font-size:11px}
.mode-locked > .fine{margin-top:8px;color:var(--graphite)}

/* ---- 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{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(--accent);border-bottom-color:var(--accent)}

/* ---- 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}
/* Printing/saving-as-PDF a page with no page-break rules at all splits a
   Q&A box mid-paragraph wherever the page boundary happens to fall.
   Keep each entry whole, and don't strand a heading at the bottom of a
   page with its answer pushed to the next one. */
@media print{
  .faq-item{page-break-inside:avoid}
  .faq-item h3{page-break-after:avoid}
}

/* ---- 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-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-meter i{background:#0A0A0A}
  .ap-rank,.ap-sev,.flow-n,.pillar-n,.term-n{color:#0A0A0A}
  .ap-flag{border-left-color:#0A0A0A}
}

/* Print letterhead: invisible on screen, the only branded thing at the
   top of a printed or saved-as-PDF report -- the normal site header is
   deliberately hidden when printing, so without this a printed report
   carried no identification of the firm at all. */
.print-letterhead{display:none}
@media print{
  .print-letterhead{display:flex;align-items:center;gap:16px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid #DDD8CE}
  .print-letterhead img{height:34px;width:auto;flex:none}
  .pl-name{font-family:'Montserrat',sans-serif;font-weight:700;font-size:14px;color:#0A0A0A}
  .pl-sub{font-family:'Montserrat',sans-serif;font-size:11px;color:#5C584E;margin-top:2px}
}

/* ---- 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)}

/* Same page-break gap as the FAQ, on the example report page's own
   repeating components -- a risk flag or a priority move splitting
   across a page boundary reads just as badly as the FAQ box did. */
@media print{
  .xr-flag,.xr-move,.xr-prow,.xr-ann,.xr-note,.band-card{page-break-inside:avoid}
}


/* ---- 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}}

/* Exact manifesto reference under each audit question */
.ap-ref{font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;color:var(--graphite);margin:-2px 0 10px}

/* Consent now sits under name/email on the first page */
.ap-consent-intake{margin:14px 0 30px;padding:12px 14px;border:1px solid var(--rule);background:var(--panel-deep)}

/* Collapsible FAQ (native <details>; answers stay in the HTML for crawlers) */
details.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px}
details.faq-item summary::-webkit-details-marker{display:none}
details.faq-item summary h3{margin:0;font-size:17px}
details.faq-item summary::after{content:"+";font-family:var(--mono);font-size:18px;color:var(--accent);flex:none}
details.faq-item[open] summary::after{content:"\2212"}
details.faq-item[open] summary{margin-bottom:12px}
details.faq-item summary:hover h3{color:var(--accent)}
/* Referral code request form */
.request-form textarea{width:100%;background:var(--panel-deep);border:1px solid var(--rule);color:var(--white);font-family:inherit;font-size:15px;padding:12px 14px;resize:vertical;margin-bottom:18px}
.request-form textarea:focus{outline:2px solid var(--accent);outline-offset:1px}
.request-form .optional{text-transform:none;letter-spacing:0;color:var(--graphite)}
/* Identity Quest: headings had almost no air between them and body copy */
.iq-body h2{margin:56px 0 16px}
.iq-body h2:first-child{margin-top:0}
.iq-body .faq{margin-top:20px}
.iq-figure{margin:22px 0 0}
.iq-figure img{width:100%;height:auto;max-width:720px;display:block;border:1px solid var(--rule)}
.iq-figure figcaption{margin-top:10px}

/* Benchmark percentiles on the result screen */
.ap-bench-row{display:grid;grid-template-columns:minmax(120px,210px) 1fr 52px;gap:14px;align-items:center;margin:10px 0}
.ap-bench-name{font-size:13.5px;color:var(--platinum)}
.ap-bench-bar{height:6px;background:var(--rule);position:relative}
.ap-bench-bar i{position:absolute;left:0;top:0;bottom:0;background:var(--accent)}
.ap-bench-pct{text-align:right;font-size:13px;color:var(--accent)}
@media print{.ap-bench-bar i{background:#0A0A0A}.ap-bench-pct{color:#0A0A0A}}

/* For Companies / Workplace Audit */
.brand-lockup{display:flex;align-items:center;gap:18px;margin-bottom:26px}
.brand-lockup img{height:48px;width:auto}
.brand-lockup img:first-child{height:60px}
.wp-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:26px}
.wp-grid > div{background:var(--panel-deep);padding:22px 22px}
.wp-grid h3{font-size:16px;margin:0 0 8px;color:var(--accent)}
.wp-grid p{font-size:14px;color:var(--steel);line-height:1.65;margin:0}
.wp-steps{list-style:none;counter-reset:wp;padding:0;margin:26px 0}
.wp-steps li{counter-increment:wp;position:relative;padding:0 0 26px 54px;border-left:1px solid var(--rule);margin-left:14px}
.wp-steps li::before{content:counter(wp,decimal-leading-zero);position:absolute;left:-15px;top:0;width:30px;height:30px;background:var(--ink);border:1px solid var(--accent);color:var(--accent);font-family:var(--mono);font-size:11px;display:flex;align-items:center;justify-content:center}
.wp-steps h3{font-size:17px;margin:4px 0 6px}
.wp-steps p{font-size:14.5px;color:var(--steel);line-height:1.65;margin:0}
.request-form select{width:100%;margin-bottom:18px}
.wp-pillar{margin-top:40px}
.wp-pillar > h3{font-size:18px;color:var(--accent);margin:0 0 12px}
.wp-progress{position:sticky;top:0;background:var(--ink);padding:10px 0;z-index:5;color:var(--accent)}