:root{
  color-scheme:dark;
  --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}
/* Read by screen readers, never shown: "opens in a new tab" after an outside link. */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.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:19px;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:11px}
.wordmark span{color:var(--platinum);font-size:11px;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:28px;width:auto;flex:none;margin-top:-3px}
/* A phone keeps the name and the Menu button on one row. */
@media(max-width:420px){.wordmark{font-size:16px;gap:9px}.wordmark-mark{height:24px}}
@media(max-width:370px){.wordmark{font-size:15px}.wordmark-mark{height:22px}}

/* 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:13.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'}
/* Tools: three stages of four, two to a row, so twelve tools take the
   height of six. The numbers keep the flow's order readable. */
.nav-menu nav:has(.nav-tools[open]){min-width:min(356px,calc(100vw - 34px));max-width:min(356px,calc(100vw - 34px))}
.nav-count{font-size:10.5px;color:var(--accent);border:1px solid rgba(61,245,160,.35);padding:1px 6px;margin-left:auto;margin-right:2px;line-height:1.5}
/* The header button's 60vw cap is for the closed menu; a group header
   inside the open panel spans the panel, so its arrow sits at the edge. */
.nav-menu .nav-group summary{max-width:none}
.nav-menu .nav-tools summary{justify-content:flex-start}
.nav-menu .nav-tools summary::after{margin-left:8px}
.nav-tools .nav-group-items > a{color:var(--white)}
.nav-tools .nav-group-items > a::after{content:' \2192';color:var(--accent)}
.nav-stage{border-bottom:1px solid var(--rule);padding:10px 12px 12px 18px}
.nav-stage:last-child{border-bottom:0}
.nav-stage-l{display:block;font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--graphite);margin:0 0 6px 12px}
.nav-stage-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px}
.nav-group-items .nav-stage-grid a{display:flex;gap:7px;align-items:baseline;padding:7px 8px 7px 12px;border:0;font-size:12.5px;line-height:1.3;color:var(--platinum)}
.nav-stage-grid a .num{font-size:9.5px;color:var(--accent-dim);flex:none}
.nav-group-items .nav-stage-grid a:hover{color:var(--white);background:var(--panel)}
.nav-group-items .nav-stage-grid a[aria-current="page"]{color:var(--accent)}
.nav-group-items .nav-stage-grid a[aria-current="page"]::before{content:none}

@media(max-width:640px){
  .head-in{padding:14px 20px;gap:12px}
}
}
@media print{.nav-menu,.head-nav{display:none}}

/* Header links on a wide screen. The Tools dropdown keeps the Menu button's
   look; the full Menu (.nav-compact) takes over below 1400px, where the
   links and the full site name no longer fit on one row (measured: the
   row needs 1304px of content at the header's type sizes). */
.head-nav,.nav-tools-menu{display:none}
.head-nav{align-items:center;gap:2px;margin-left:auto;min-width:0}
.head-nav > a,.hn-group > summary{display:flex;align-items:center;gap:7px;padding:10px 9px;font-family:var(--display);font-size:14px;font-weight:600;
  letter-spacing:.01em;color:var(--steel);white-space:nowrap;border-bottom:1px solid transparent;transition:color .18s ease,border-color .18s ease}
.head-nav > a:hover,.hn-group > summary:hover,.hn-group[open] > summary{color:var(--white)}
.head-nav > a[aria-current="page"],.hn-group.is-current > summary{color:var(--white);border-bottom-color:var(--accent)}
.hn-group{position:relative}
.hn-group > summary{list-style:none;cursor:pointer;user-select:none}
.hn-group > summary::-webkit-details-marker{display:none}
.hn-group > summary::after{content:'';width:6px;height:6px;border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);
  transform:rotate(45deg);transition:transform .18s ease;margin-top:-3px}
.hn-group[open] > summary::after{transform:rotate(-135deg);margin-top:3px}
.hn-panel{position:absolute;top:calc(100% + 12px);left:0;min-width:250px;background:var(--panel-deep);border:1px solid var(--platinum);
  display:flex;flex-direction:column;z-index:50}
.hn-panel a{padding:13px 18px;font-family:var(--display);font-size:14px;font-weight:600;letter-spacing:.01em;color:var(--steel);border-bottom:1px solid var(--rule)}
.hn-panel a:last-child{border-bottom:0}
.hn-panel a:hover{color:var(--white);background:var(--panel)}
.hn-panel a[aria-current="page"]{color:var(--accent)}
.hn-panel a[aria-current="page"]::before{content:'\2014\00a0'}
.head-nav a:focus-visible,.hn-group > summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.nav-tools-menu summary .nav-count{margin-left:0}
.nav-tools-menu nav{min-width:min(356px,calc(100vw - 34px));max-width:min(356px,calc(100vw - 34px))}
.nav-tools-menu .nav-group-items > a{color:var(--white)}
.nav-tools-menu .nav-group-items > a::after{content:' \2192';color:var(--accent)}
.ss-btn ~ .nav-compact{margin-left:0}
.nav-menu summary .nm-menu{display:none}
/* On a phone the current page's name can crowd the wordmark off the row, so
   the button reads Menu there. */
@media(max-width:480px){
  .ss-btn ~ .nav-compact{margin-left:auto}
  .nav-menu summary .nm-cur{display:none}
  .nav-menu summary .nm-menu{display:inline}
}
@media(min-width:1400px){
  .head-in{max-width:1480px;flex-wrap:nowrap;gap:16px}
  .head-nav{display:flex}
  .head-nav + .ss-btn{margin-left:4px}
  .nav-tools-menu{display:block;margin-left:0}
  .nav-tools-menu summary{padding:10px 14px}
  .nav-compact{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:rgba(255,255,255,.38);color:var(--white)}
.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}
.cards.four{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:1040px){.cards.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.cards.four{grid-template-columns:1fr}}
/* Five: three across, then two wider, on desktop. */
.cards.five{grid-template-columns:repeat(6,minmax(0,1fr))}
.cards.five>*{grid-column:span 2}
.cards.five>:nth-child(n+4){grid-column:span 3}
@media (max-width:1040px){.cards.five{grid-template-columns:repeat(2,minmax(0,1fr))}.cards.five>*,.cards.five>:nth-child(n+4){grid-column:auto}.cards.five>:last-child{grid-column:1 / -1}}
@media (max-width:600px){.cards.five{grid-template-columns:1fr}.cards.five>:last-child{grid-column:auto}}
.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 .lbl a{font-size:inherit;letter-spacing:inherit;color:inherit}
.foot-col .lbl a:hover{color:var(--accent)}
.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}
.foot-mark{display:flex;align-items:center;gap:14px}
/* Desktop: every column on one row across the whole width, so Connect and
   Legal sit beside the rest rather than under them. */
@media(min-width:1100px){
  .foot-in{max-width:none;padding:0 clamp(28px,4vw,64px);grid-template-columns:minmax(230px,1.3fr) repeat(5,minmax(0,1fr));gap:36px}
  .foot-base{max-width:none;margin-left:clamp(28px,4vw,64px);margin-right:clamp(28px,4vw,64px);padding-left:0;padding-right:0}
}
@media(min-width:641px) and (max-width:1099px){
  .foot-in{grid-template-columns:repeat(3,minmax(0,1fr))}
  .foot-in > .foot-col:first-child{grid-column:1 / -1}
  .foot-in > .foot-col:first-child p{max-width:60ch}
}
/* Phone: two columns, the description across both. */
@media(max-width:640px){
  .site-foot{padding:48px 0 26px}
  .foot-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 18px}
  .foot-in > .foot-col:first-child{grid-column:1 / -1}
  .foot-col{gap:8px}
  .foot-col a{font-size:13px;line-height:1.4}
  .foot-base{margin-top:36px;flex-direction:column;gap:12px}
}

/* ---- 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)}
.ap-consent-required{margin-bottom:8px;border-left:2px solid var(--accent)}
.ap-consent-optional{margin-top:0}
.ap-consent a{color:var(--accent);text-decoration:underline}

/* 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);display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;border-bottom:1px solid var(--rule);font-size:13px}
.wp-progress-total{font-family:var(--mono);font-size:12px;letter-spacing:.06em}
.wp-pnav{display:flex;flex-wrap:wrap;gap:6px;flex:1}
.wp-pchip{background:var(--panel-deep);border:1px solid var(--rule);color:var(--steel);font-size:12px;padding:5px 9px;cursor:pointer;min-height:30px}
.wp-pchip:hover{color:var(--white);border-color:var(--steel)}
.wp-pchip.done{color:var(--accent);border-color:rgba(61,245,160,.5)}
.wp-next{font-size:12.5px}
.wp-restored{border-left:2px solid var(--accent);padding:8px 12px;margin:0 0 14px;background:var(--panel-deep);font-size:13.5px;color:var(--platinum)}
.wp-flash{outline:2px solid var(--accent);outline-offset:6px;transition:outline-color .6s ease}
.wp-comments textarea{width:100%;min-height:120px;resize:vertical;background:var(--ink);border:1px solid var(--rule);color:var(--white);padding:12px 14px;font:inherit;font-size:15px;line-height:1.5}
.wp-comments textarea:focus{outline:none;border-color:var(--accent)}
.wp-comments .ap-consent{margin-top:10px}
@media (max-width:640px){.wp-pnav{order:3;flex-basis:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:2px}.wp-pchip{flex:0 0 auto}}

/* Workplace Audit intro page */
.wp-intro-sec{margin-top:30px;max-width:64ch}
.wp-intro-sec h3{font-size:17px;color:var(--white);margin:0 0 8px}
.wp-intro-sec p{font-size:15px;line-height:1.7;color:var(--steel);margin:0}
.wp-intro-not{border-left:2px solid var(--accent);padding:14px 18px;background:var(--panel-deep)}
.wp-intro-not h3{color:var(--accent)}
.wp-intro .ap-nav{margin-top:36px}

/* Legal pages (layout after mashmancg.com) */
.legal-updated{margin:10px 0 18px;color:var(--accent);font-size:13px;letter-spacing:.02em}
.legal h2{font-size:21px;margin:40px 0 12px;padding-top:6px}
.legal h2:first-child{margin-top:0}
.legal-list{padding-left:20px;margin:0}
.legal-list li{margin:0 0 14px;line-height:1.7}
.legal-list li::marker{color:var(--accent)}
/* Workplace outcomes grid */
.wp-outcomes{margin-top:26px}
.wp-outcomes h3{font-size:16.5px}
/* Print contrast for results: labels and small text near-black, buttons off
   the page (they do nothing on paper). */
@media print{
  #audit-app .lbl,#audit-app .nilstate,#audit-app span:not(.ipr-marker-v){color:#1A1A1A !important}
  #audit-app .ipr-marker-v{color:#fff !important}
  #audit-app .btn{display:none !important}
}
@media print{
  /* Baseline for paper: near-black text everywhere. Deliberate accents
     (green bands and labels, red constraints) are set with !important in
     the kit, so they keep their color. */
  body *:not(.ipr-marker-v){color:#1A1A1A}
  a{color:#0B7A4B}
}

/* ================= Motion and depth ================= */
.hero{position:relative;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;top:-35%;right:-15%;width:80vmax;height:80vmax;background:radial-gradient(circle at center,rgba(61,245,160,.13),transparent 58%);z-index:-1;pointer-events:none;animation:ip-drift 20s ease-in-out infinite alternate}
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(ellipse at 75% 30%,#000 5%,transparent 68%);mask-image:radial-gradient(ellipse at 75% 30%,#000 5%,transparent 68%)}
@keyframes ip-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(-9%,7%) scale(1.14)}}
.hero-mark{position:absolute;right:5%;top:50%;width:min(32vw,430px);height:auto;transform:translateY(-50%);z-index:-1;pointer-events:none}
.hero-mark .g{fill:none;stroke:rgba(255,255,255,.09);stroke-width:1}
.hero-mark .s{fill:rgba(61,245,160,.09);stroke:var(--accent);stroke-width:1.8;stroke-dasharray:1400;stroke-dashoffset:1400;animation:ip-draw 2.6s .35s cubic-bezier(.2,.8,.2,1) forwards;filter:drop-shadow(0 0 12px rgba(61,245,160,.35))}
.hero-mark circle{fill:var(--accent);opacity:0;animation:ip-pop .5s ease forwards}
@keyframes ip-draw{to{stroke-dashoffset:0}}
@keyframes ip-pop{to{opacity:1}}
@media(max-width:980px){.hero-mark{display:none}}
/* staggered entrance for grids and lists */
.js-reveal .reveal > *{transition:opacity .55s ease,transform .55s cubic-bezier(.2,.8,.2,1)}
.js-reveal .reveal:not(.in) > *{opacity:0;transform:translateY(18px)}
.js-reveal .reveal.in > *:nth-child(2){transition-delay:.06s}.js-reveal .reveal.in > *:nth-child(3){transition-delay:.12s}
.js-reveal .reveal.in > *:nth-child(4){transition-delay:.18s}.js-reveal .reveal.in > *:nth-child(5){transition-delay:.24s}
.js-reveal .reveal.in > *:nth-child(6){transition-delay:.3s}.js-reveal .reveal.in > *:nth-child(n+7){transition-delay:.36s}
/* lift on hover */
.card,.pillar,.wp-grid>div,.tiers tr{transition:transform .25s ease,box-shadow .25s ease,background .25s ease}
.card:hover,.pillar:hover,.wp-grid>div:hover{transform:translateY(-3px);box-shadow:0 14px 34px rgba(0,0,0,.55),inset 0 0 0 1px rgba(61,245,160,.4)}
.btn.solid{position:relative;overflow:hidden}
.btn.solid::after{content:"";position:absolute;top:0;left:-60%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-18deg);transition:left .6s ease}
.btn.solid:hover::after{left:130%}
/* reading progress on long pages */
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:100%;transform-origin:0 50%;transform:scaleX(0);background:var(--accent);box-shadow:0 0 10px rgba(61,245,160,.6);z-index:300;pointer-events:none}
@media(prefers-reduced-motion:reduce){
  .hero::before,.hero-mark .s,.hero-mark circle,.btn.solid::after{animation:none;transition:none}
  .hero-mark .s{stroke-dashoffset:0}.hero-mark circle{opacity:1}
  .js-reveal .reveal:not(.in) > *{opacity:1;transform:none}
  .card:hover,.pillar:hover,.wp-grid>div:hover{transform:none}
}
@media print{.hero::before,.hero::after,.hero-mark,.scroll-progress{display:none}}

/* Identity Quest logo and gallery */
.iq-logo{display:block;height:72px;width:auto;margin:0 0 20px}
.iq-shot{margin:24px 0 0}
.iq-shot img{display:block;width:100%;height:auto;border:1px solid var(--rule);box-shadow:0 18px 50px rgba(0,0,0,.55)}
.iq-shot-narrow{max-width:460px}
.iq-shot figcaption{margin-top:10px;font-size:13.5px;color:var(--steel);line-height:1.6}

/* Client logo on the Workplace Audit */
/* The co-brand header: logo | Workplace Audit, with MCG. No box behind the
   logo: logo-kit.js trims it, removes a flat background, and swaps a dark
   logo for its white version, so it sits on the page like the MCG mark does. */
.wp-lockup{display:flex;align-items:center;gap:20px;margin:0 0 30px;padding:0 0 22px;border-bottom:1px solid var(--rule)}
.wp-lockup-logo{display:flex;align-items:center;min-height:40px;flex:0 0 auto;max-width:48%}
.wp-lockup-logo img{display:block;width:auto;height:auto;max-height:48px;max-width:100%;object-fit:contain}
.wp-lockup-logo:not(.square){width:200px}
.wp-lockup-logo.square img{max-height:60px;max-width:90px}
.wp-lockup-logo.tile img{border:1px solid var(--rule)}
.wp-lockup-logo.name{font-family:var(--display);font-size:20px;font-weight:700;letter-spacing:-.01em;color:var(--white)}
.wp-lockup-rule{width:1px;align-self:stretch;min-height:36px;background:var(--rule)}
.wp-lockup-text{display:flex;flex-direction:column;gap:4px;min-width:0}
.wp-lockup-kind{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.wp-lockup-by{font-size:12.5px;color:var(--steel)}
@media (max-width:520px){.wp-lockup{gap:14px}.wp-lockup-logo:not(.square){width:44%}.wp-lockup-logo img{max-height:40px}.wp-lockup-logo.square img{max-height:52px}}
/* The cover on a Workplace Audit link: the company's logo, large, crisp,
   and whole, centered on a quiet panel, with what this is beneath it. */
.wp-cover{position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:20px;text-align:center;
  margin:0 0 34px;padding:clamp(36px,6vw,64px) clamp(20px,4vw,40px) clamp(28px,4vw,40px);border:1px solid var(--rule);
  background:radial-gradient(ellipse 70% 90% at 50% 0%,rgba(61,245,160,.10),transparent 65%),var(--panel-deep)}
.wp-cover[hidden]{display:none}
.wp-cover::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--rule) 1px,transparent 1px),linear-gradient(90deg,var(--rule) 1px,transparent 1px);background-size:48px 48px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 30%,#000,transparent 70%);mask-image:radial-gradient(ellipse at 50% 30%,#000,transparent 70%)}
.wp-cover > *{position:relative}
.wp-cover-logo{display:flex;align-items:center;justify-content:center;max-width:100%}
.wp-cover-logo img{display:block;width:auto;height:auto;max-width:min(420px,100%);max-height:clamp(64px,11vw,112px);object-fit:contain}
.wp-cover-logo.square img{max-height:clamp(88px,14vw,148px);max-width:min(220px,100%)}
.wp-cover-logo.tile img{border:1px solid var(--rule)}
.wp-cover-logo.name{font-family:var(--display);font-size:clamp(28px,4.4vw,46px);font-weight:800;letter-spacing:-.02em;color:var(--white);line-height:1.1}
.wp-cover-meta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px 12px;margin:0;font-size:13px;color:var(--steel)}
.wp-cover-kind{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.wp-cover-sep{width:4px;height:4px;background:var(--rule-strong,#3A3B3E);transform:rotate(45deg)}
@media(max-width:520px){.wp-cover-meta{flex-direction:column;gap:6px}.wp-cover-sep{display:none}}
/* A private client page: the mark alone in the header, legal links alone in the footer. */
.site-head-bare .head-in{justify-content:center}
.site-foot-bare{padding:30px 0 26px;border-top:1px solid var(--rule)}
.site-foot-bare .foot-base{margin-top:0;border-top:0;padding-top:0;align-items:center}
.foot-legal{display:flex;gap:18px}
.foot-legal a{color:var(--steel)}
.foot-legal a:hover{color:var(--accent)}
@media print{.wp-cover{border:0;background:none}.wp-cover::before{display:none}.wp-lockup-logo img{filter:none}}

/* --------------------------------------------------------- name generator
   /generator/: questions, results, shortlist, and the lock-in dialog. The
   same panels, rules, and accent as the Brand Audit. */
.ng-band{padding-top:48px}
.ng-tabs{display:flex;gap:1px;margin-bottom:28px;border-bottom:1px solid var(--rule)}
.ng-tabs [role="tab"]{background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:14px 22px;font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}
.ng-tabs [role="tab"][aria-selected="true"]{color:var(--white);border-bottom-color:var(--accent)}
.ng-tabs [role="tab"]:hover{color:var(--white)}
.ng-form{display:flex;flex-direction:column;gap:18px}
.ng-set{border:1px solid var(--rule);background:var(--panel-deep);margin:0;padding:24px 24px 8px;min-width:0}
.ng-set legend{font-family:var(--display);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--white);padding:0 10px;margin-left:-10px}
.ng-n{color:var(--accent);margin-right:6px}
.ng-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 20px}
.ng-field{margin:0 0 20px}
.ng-field > label,.ng-q{display:block;font-size:14px;color:var(--platinum);margin-bottom:8px;font-weight:400}
.ng-opt{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--graphite);margin-left:6px}
.ng-help{font-size:13px;color:var(--graphite);margin:8px 0 0;line-height:1.55}
.ng-hint-live{font-size:12.5px;color:var(--accent);margin:6px 0 0;min-height:1em}
.ng-chips{display:flex;flex-wrap:wrap;gap:8px}
.ng-chip{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;background:var(--ink);border:1px solid var(--rule);color:var(--steel);font-size:13.5px;min-height:40px;transition:background .15s ease,border-color .15s ease,color .15s ease}
.ng-chip:hover{border-color:var(--steel);color:var(--white)}
.ng-chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--ink)}
.ng-sw{width:14px;height:14px;border:1px solid rgba(255,255,255,.25);flex:none}
.ng-radios{display:flex;flex-wrap:wrap;gap:8px 22px}
.ng-radios label{display:inline-flex;align-items:center;gap:8px;font-size:14.5px;color:var(--platinum);cursor:pointer}
.ng-radios input,.ng-consent input{width:16px;height:16px;margin:0;accent-color:var(--accent)}
.ng-submit{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.ng-submit .fine{margin:0}
.ng-results{margin-top:44px}
.ng-results-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--rule);padding-bottom:16px;margin-bottom:18px}
.ng-results-head h2{font-size:30px;margin:0 0 6px}
.ng-results-head .fine{margin:0}
.ng-force{font-size:14px;color:var(--platinum)}
.ng-force b{color:var(--accent);font-weight:600}
.ng-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.ng-card{border:1px solid var(--rule);background:var(--panel-deep);padding:20px 22px 18px;display:flex;flex-direction:column}
.ng-card.is-locked{border-color:var(--accent)}
.ng-card-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.ng-style{font-family:var(--display);font-size:10px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent)}
.ng-pal{display:flex;gap:4px}
.ng-pal i{width:12px;height:12px;border:1px solid rgba(255,255,255,.2)}
.ng-name{font-size:25px;line-height:1.15;letter-spacing:-.02em;margin:0 0 8px;font-weight:700;overflow-wrap:anywhere}
.ng-line{color:var(--platinum);font-size:15px;line-height:1.55;margin:0 0 10px}
.ng-why{font-size:12.5px;color:var(--graphite);line-height:1.55;margin:0 0 14px}
.ng-why-lbl{color:var(--steel)}
/* each word of a name is a way in: tap to build around it */
.ng-word{background:none;border:0;padding:0;margin:0;font:inherit;color:inherit;letter-spacing:inherit;cursor:pointer;border-bottom:1px dashed transparent;transition:border-color .15s ease,color .15s ease}
.ng-word:hover,.ng-word:focus-visible{color:var(--accent);border-bottom-color:var(--accent);outline:none}
/* the name read as a position */
.ng-pos{margin:0 0 14px;padding:12px 0 0;border-top:1px solid var(--rule);display:grid;gap:8px}
.ng-pos-row{display:grid;grid-template-columns:78px 1fr;gap:10px;align-items:baseline}
.ng-pos dt{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.ng-pos dd{margin:0;font-size:13.5px;color:var(--white);line-height:1.45}
.ng-pos-sub{display:block;color:var(--steel);font-size:12.5px;margin-top:2px}
.ng-fit{margin:2px 0 0;font-size:12px;font-family:var(--mono);letter-spacing:.06em}
.ng-fit.yes{color:var(--accent)}
.ng-fit.no{color:#E0A93B}
.ng-set-position{border-color:rgba(61,245,160,.35)}
.ng-lede{color:var(--platinum);font-size:14.5px;max-width:70ch;margin:0 0 16px}
.ng-chips-position .ng-chip{min-height:44px}
.ng-gift{color:var(--platinum);border-left:2px solid var(--accent);padding-left:10px}
.ng-auto{margin:0 0 10px}
/* the word finder */
.ng-finder{border:1px solid var(--rule);background:var(--ink);padding:16px 16px 6px;margin:0 0 18px}
.ng-finder-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:10px}
.ng-finder-head input{flex:1;min-width:200px}
.ng-standout-head{justify-content:space-between;margin-top:6px}
.ng-wordlist{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:6px;min-height:6px}
.ng-wchip{display:inline-flex;border:1px solid var(--rule);background:var(--panel-deep)}
.ng-wchip button{background:none;border:0;color:var(--platinum);font-size:13px;padding:7px 10px;cursor:pointer;min-height:36px}
.ng-wchip .ng-wgo{border-left:1px solid var(--rule);color:var(--accent);padding:7px 10px}
.ng-wchip button:hover,.ng-wchip button:focus-visible{background:rgba(61,245,160,.1);color:var(--white);outline:none}
.ng-wchip.added{border-color:var(--accent)}
.ng-wchip.added .ng-wadd{color:var(--accent)}
.ng-wnone{color:var(--steel);font-size:13px;padding:4px 0}
.ng-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto}
.ng-actions .btn{padding:10px 14px;font-size:11px}
.ng-actions .btn[disabled]{opacity:1;background:var(--accent);border-color:var(--accent);color:var(--ink)}
.ng-link{background:none;border:0;padding:0;color:var(--accent);font-size:13px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ng-shortlist{margin-top:28px;border:1px solid var(--rule);padding:20px 22px}
.ng-shortlist h3{font-size:16px;margin:0 0 4px}
.ng-shortlist ul{list-style:none;margin:10px 0 0;padding:0}
.ng-shortlist li{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:10px 0;border-top:1px solid var(--rule)}
.ng-sl-name{font-family:var(--display);font-weight:600;color:var(--white);margin-right:auto}
.ng-sl-kind{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--graphite)}
.ng-dialog{background:var(--ink);color:var(--white);border:1px solid var(--rule);border-top:3px solid var(--accent);padding:30px 30px 24px;max-width:720px;width:calc(100vw - 32px);max-height:calc(100dvh - 32px);overflow:auto}
.ng-dialog::backdrop{background:rgba(0,0,0,.72)}
.ng-dialog h2{font-size:30px;margin:0 0 8px;overflow-wrap:anywhere}
.ng-dialog-x{float:right;margin:-8px -6px 0 0}
.ng-checks{list-style:none;margin:18px 0 22px;padding:0}
.ng-check{border-top:1px solid var(--rule);padding:14px 0}
.ng-check-head{display:flex;gap:12px;align-items:flex-start;cursor:pointer}
.ng-check-head input{width:18px;height:18px;margin:3px 0 0;flex:none;accent-color:var(--accent)}
.ng-check-head b{display:block;font-family:var(--display);font-weight:600;font-size:15px;color:var(--white)}
.ng-check-text{display:block;font-size:13.5px;color:var(--steel);line-height:1.55;margin-top:3px}
.ng-check-links{display:flex;flex-wrap:wrap;gap:8px 16px;margin:10px 0 0 30px}
.ng-check-links a{color:var(--accent);font-size:13.5px;text-decoration:underline;text-underline-offset:3px}
.ng-consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--platinum);margin:0 0 18px;line-height:1.5}
.ng-consent input{margin-top:2px;flex:none}
.ng-dialog-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px}
#ng-lock-tally{color:var(--accent)}
@media (max-width:760px){
  .ng-grid,.ng-list{grid-template-columns:1fr}
  .ng-set{padding:20px 16px 4px}
  .ng-tabs [role="tab"]{flex:1;padding:14px 8px}
  .ng-dialog{padding:24px 18px 20px}
  .ng-dialog h2,.ng-results-head h2{font-size:24px}
  .ng-check-links{margin-left:0}
}

/* Site search: the header button (search.js opens the dialog, styled in search.css). */
:root{--ss-accent:var(--accent);--ss-rule:var(--rule);--ss-panel:var(--panel);--ss-deep:var(--panel-deep);--ss-muted:var(--steel)}
.ss-btn{display:inline-flex;align-items:center;justify-content:center;flex:none;width:40px;height:40px;margin:0 0 0 auto;padding:0;
  background:transparent;border:1px solid var(--rule);border-radius:0;color:var(--platinum);cursor:pointer;transition:border-color .18s ease,color .18s ease}
.ss-btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.ss-btn:hover,.ss-btn:focus-visible{border-color:var(--accent);color:var(--white)}
.ss-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.ss-btn + .nav-menu{margin-left:0}
@media print{.ss-btn{display:none}}
/* On a phone the header row has no room to spare, so search moves into the
   top of the menu there and the header looks exactly as it did. */
.nav-menu nav .nav-search{display:none}
@media(max-width:480px){
  .ss-btn{display:none}
  .ss-btn + .nav-menu{margin-left:auto}
  .nav-menu nav .nav-search{display:flex;align-items:center;gap:10px;width:100%;margin:0;padding:14px 18px;background:transparent;
    border:0;border-bottom:1px solid var(--rule);color:var(--white);font-family:var(--display);font-size:13.5px;font-weight:600;
    letter-spacing:.01em;text-align:left;cursor:pointer}
  .nav-menu nav .nav-search svg{width:15px;height:15px;fill:none;stroke:var(--accent);stroke-width:1.8;stroke-linecap:round}
  .nav-menu nav .nav-search:hover{background:var(--panel)}
}

/* ---------------------------------------------------------------- /mcg/
   Four pillars, one per purpose of content, rise as the story scrolls and
   close into one seamless image (mcg-page.js sets data-stage 0 to 5). */
.mg-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin:28px 0 26px;max-width:880px}
.mg-facts div{background:var(--ink);padding:14px 16px}
.mg-facts dt{font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--steel);margin-bottom:4px}
.mg-facts dd{margin:0;color:var(--white);font-weight:500}
.mg-story{padding-top:40px;padding-bottom:40px}
.mg-story-in{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:56px;align-items:start}
/* overflow-x:hidden on the page stops position:sticky, so this page (only)
   clips instead, and keeps the header scrolling away as it does everywhere. */
html.mg-page,html.mg-page body{overflow-x:clip}
html.mg-page .site-head{position:relative}
.mg-stage{position:sticky;top:40px;height:calc(100vh - 150px);max-height:660px;min-height:420px;display:flex;flex-direction:column;justify-content:center;align-items:center;min-width:0}
.mg-build{--gap:26px;--w:64px;display:flex;flex-direction:column;align-items:center;width:100%}
.mg-cols{display:flex;align-items:flex-end;gap:var(--gap);height:340px;transition:gap .9s cubic-bezier(.22,1,.36,1)}
.mg-col{position:relative;width:var(--w);height:100%;display:flex;flex-direction:column;justify-content:flex-end}
.mg-slice{position:relative;display:block;flex:1;background-color:var(--panel);border:1px solid var(--rule);
  background-image:var(--mg-img);background-repeat:no-repeat;background-size:calc(var(--w) * 4) auto;background-origin:border-box;background-clip:border-box;
  transform-origin:50% 100%;transition:transform .9s cubic-bezier(.22,1,.36,1),border-color .6s ease,background-color .6s ease,opacity .6s ease}
.mg-col[data-n="1"] .mg-slice{background-position:0 50%}
.mg-col[data-n="2"] .mg-slice{background-position:calc(var(--w) * -1) 50%}
.mg-col[data-n="3"] .mg-slice{background-position:calc(var(--w) * -2) 50%}
.mg-col[data-n="4"] .mg-slice{background-position:calc(var(--w) * -3) 50%}
.mg-slice::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,0) 60%,rgba(10,10,10,.55));pointer-events:none}
.mg-col-l{position:absolute;left:50%;bottom:-30px;transform:translateX(-50%);font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);white-space:nowrap;transition:color .4s ease,opacity .5s ease}
.mg-lintel{height:34px;width:calc(var(--w) * 4 + var(--gap) * 3 + 24px);border:1px solid var(--rule);background:var(--panel);display:flex;align-items:center;justify-content:center;margin-bottom:8px;
  transition:width .9s cubic-bezier(.22,1,.36,1),opacity .6s ease,transform .9s cubic-bezier(.22,1,.36,1),border-color .6s ease}
.mg-lintel span{font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--platinum);white-space:nowrap}
.mg-base{display:flex;flex-direction:column;align-items:center;margin-top:44px;gap:0}
.mg-base i{display:block;height:8px;border:1px solid var(--rule);border-top:0;background:var(--panel);transition:width .9s cubic-bezier(.22,1,.36,1)}
.mg-base i:first-child{width:calc(var(--w) * 4 + var(--gap) * 3 + 40px);border-top:1px solid var(--rule)}
.mg-base i:last-child{width:calc(var(--w) * 4 + var(--gap) * 3 + 64px)}
.mg-caption{margin:26px 0 0;height:20px;position:relative;width:100%;text-align:center;font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.mg-caption span{position:absolute;left:0;right:0;transition:opacity .5s ease,transform .5s ease}
.mg-cap-a{color:var(--steel)}
.mg-cap-b{color:var(--accent)}
/* The finished structure: gaps closed, the mark whole. (Also the default without script.) */
.mg-stage[data-stage="5"] .mg-build{--gap:0px}
.mg-stage[data-stage="5"] .mg-slice{border-color:transparent;background-color:#101012}
.mg-stage[data-stage="5"] .mg-col-l{opacity:0}
.mg-stage[data-stage="5"] .mg-lintel{border-color:var(--accent)}
.mg-stage[data-stage="5"] .mg-lintel span{color:var(--white)}
.mg-cap-a{opacity:0;transform:translateY(-6px)}
.mg-stage[data-stage="5"] .mg-cap-b{opacity:1}
/* Before the end, with script: pillars wait low, and rise one per step. */
.mg-js .mg-stage:not([data-stage="5"]) .mg-cap-a{opacity:1;transform:none}
.mg-js .mg-stage:not([data-stage="5"]) .mg-cap-b{opacity:0;transform:translateY(6px)}
.mg-js .mg-stage .mg-slice{transform:scaleY(.06);opacity:.5}
.mg-js .mg-stage:not([data-stage="5"]) .mg-lintel{opacity:0;transform:translateY(-18px)}
.mg-js .mg-stage[data-stage="1"] .mg-col:nth-child(-n+1) .mg-slice,
.mg-js .mg-stage[data-stage="2"] .mg-col:nth-child(-n+2) .mg-slice,
.mg-js .mg-stage[data-stage="3"] .mg-col:nth-child(-n+3) .mg-slice,
.mg-js .mg-stage[data-stage="4"] .mg-col .mg-slice,
.mg-js .mg-stage[data-stage="5"] .mg-col .mg-slice{transform:none;opacity:1}
.mg-js .mg-stage[data-stage="1"] .mg-col[data-n="1"] .mg-col-l,
.mg-js .mg-stage[data-stage="2"] .mg-col[data-n="2"] .mg-col-l,
.mg-js .mg-stage[data-stage="3"] .mg-col[data-n="3"] .mg-col-l,
.mg-js .mg-stage[data-stage="4"] .mg-col[data-n="4"] .mg-col-l{color:var(--accent)}
.mg-js .mg-stage[data-stage="1"] .mg-col[data-n="1"] .mg-slice,
.mg-js .mg-stage[data-stage="2"] .mg-col[data-n="2"] .mg-slice,
.mg-js .mg-stage[data-stage="3"] .mg-col[data-n="3"] .mg-slice,
.mg-js .mg-stage[data-stage="4"] .mg-col[data-n="4"] .mg-slice{border-color:var(--accent)}
.mg-steps{min-width:0}
.mg-step{min-height:72vh;display:flex;flex-direction:column;justify-content:center;padding:40px 0;border-top:1px solid var(--rule)}
.mg-step:first-child{border-top:0}
.mg-js .mg-step{opacity:.8;transition:opacity .5s ease}
.mg-js .mg-step.is-on{opacity:1}
.mg-step h3{font-size:clamp(24px,2.6vw,32px);margin:6px 0 14px}
.mg-step p{color:var(--platinum);max-width:56ch}
.mg-step-n{font-family:var(--mono);color:var(--accent);margin-right:6px}
.mg-links{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.mg-links a{display:inline-block;padding:8px 12px;border:1px solid var(--rule);font-family:var(--display);font-size:12px;font-weight:600;color:var(--white);text-decoration:none}
.mg-links a:hover{border-color:var(--accent);color:var(--accent)}
.mg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}
.mg-grid>div{border:1px solid var(--rule);background:var(--ink);padding:24px 22px;display:flex;flex-direction:column}
.mg-grid h3{margin:0 0 10px}
.mg-grid p{color:var(--steel);margin:0 0 14px}
.mg-grid .more{margin-top:auto}
@media(max-width:900px){
  .mg-facts{grid-template-columns:1fr 1fr}
  .mg-story-in{grid-template-columns:1fr;gap:0}
  .mg-stage{top:0;height:auto;min-height:0;max-height:none;padding:18px 0 14px;background:var(--ink);border-bottom:1px solid var(--rule);z-index:5}
  .mg-build{--gap:18px;--w:48px}
  .mg-cols{height:170px}
  .mg-lintel{height:24px}.mg-lintel span{font-size:8px;letter-spacing:.18em}
  .mg-base{margin-top:34px}
  .mg-col-l{font-size:8px;letter-spacing:.1em;bottom:-22px}
  .mg-caption{margin-top:12px}
  .mg-step{min-height:60vh}
  .mg-grid{grid-template-columns:1fr}
}

/* home: the tour. The copy beside the video on wide screens, above it on
   narrow ones. The poster is the video's first frame, so play starts exactly
   where the picture already is. No rounded corners, no shadows: the green glow
   is the only light. */
.hero-tour{padding:72px 0 64px}
.tour-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:44px;align-items:center}
.hero-tour h1{font-size:clamp(36px,3.5vw,50px);overflow-wrap:anywhere}
.hero-tour .lead{font-size:17px}
.tour{margin:0;position:relative;min-width:0}
.tour::before{content:"";position:absolute;inset:-12% -8%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at center,rgba(61,245,160,.14),transparent 62%)}
.tour-frame{position:relative;aspect-ratio:16/9;background:var(--ink);border:1px solid var(--rule)}
.tour-frame::after{content:"";position:absolute;inset:-1px;border:1px solid rgba(61,245,160,.35);pointer-events:none}
.tour-video{display:block;width:100%;height:100%;object-fit:cover;background:var(--ink)}
.tour-play{position:absolute;inset:0;width:100%;height:100%;background:none;border:0;padding:0;cursor:pointer;color:var(--white)}
.tour-play:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.tour-play-lbl{position:absolute;right:5%;bottom:8%;display:flex;align-items:center;gap:14px;padding:0 20px 0 0;background:rgba(10,10,10,.82);border:1px solid rgba(61,245,160,.55);font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;transition:border-color .18s ease,background .18s ease}
.tour-play-lbl::before{content:"";width:58px;height:58px;flex:none;background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6 4l11 6-11 6z' fill='%230A0A0A'/%3E%3C/svg%3E") center/22px no-repeat}
.tour-play-lbl .num{margin-left:12px;color:var(--accent);letter-spacing:.08em}
.tour-play:hover .tour-play-lbl{background:rgba(10,10,10,.95);border-color:var(--accent)}
.tour-play-icon{display:none}
.tour.is-playing .tour-play{display:none}
.tour figcaption{display:flex;flex-wrap:wrap;gap:6px 18px;justify-content:space-between;align-items:baseline;margin-top:14px}
.tour-transcript summary{cursor:pointer;font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--platinum)}
.tour-transcript summary:hover{color:var(--accent)}
.tour-transcript[open]{flex-basis:100%}
.tour-transcript-body{margin-top:14px;max-height:320px;overflow:auto;padding:18px 20px;border:1px solid var(--rule);background:var(--panel-deep);font-size:15px;color:var(--platinum)}
.tour-transcript-body{scrollbar-width:thin;scrollbar-color:#3A3B3E var(--panel-deep)}
.tour-transcript-body::-webkit-scrollbar{width:10px}
.tour-transcript-body::-webkit-scrollbar-track{background:var(--panel-deep)}
.tour-transcript-body::-webkit-scrollbar-thumb{background:#3A3B3E;border:2px solid var(--panel-deep)}
.tour-transcript-body::-webkit-scrollbar-thumb:hover{background:var(--accent-dim)}
.tour-transcript-body p:last-child{margin-bottom:0}
@media(max-width:980px){.tour-grid{grid-template-columns:1fr;gap:36px}.hero-tour{padding:52px 0 48px}}
@media(max-width:560px){.tour-play-lbl{gap:0;padding:0 14px 0 0;right:4%;bottom:6%}.tour-play-txt{display:none}.tour-play-lbl::before{width:44px;height:44px;background-size:18px}}
@media(prefers-reduced-motion:reduce){.tour-play-lbl{transition:none}}

/* home: the five-pillar pentagon beside The Five Pillars. It draws itself when
   it scrolls into view (site.js adds .in); without JavaScript, or with reduced
   motion, it is simply drawn. */
.pillars-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:40px;align-items:center;margin-bottom:34px}
.pillars-head .intro{margin-bottom:0}
.pillar-mark{display:block;width:100%;max-width:560px;height:auto;justify-self:end;overflow:visible}
.pillar-mark .g{fill:none;stroke:rgba(255,255,255,.1);stroke-width:1}
.pillar-mark .s{fill:rgba(61,245,160,.09);stroke:var(--accent);stroke-width:1.8;filter:drop-shadow(0 0 12px rgba(61,245,160,.35))}
.pillar-mark circle{fill:var(--accent)}
.pillar-mark text{font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;fill:var(--platinum)}
.pillar-mark text .n{fill:var(--accent)}
html.js-reveal .pillar-mark .s{stroke-dasharray:1400;stroke-dashoffset:1400}
html.js-reveal .pillar-mark circle,html.js-reveal .pillar-mark text{opacity:0}
html.js-reveal .pillar-mark.in .s{animation:ip-draw 2.6s .2s cubic-bezier(.2,.8,.2,1) forwards}
html.js-reveal .pillar-mark.in circle{animation:ip-pop .5s ease forwards}
html.js-reveal .pillar-mark.in text{animation:ip-pop .8s 1.2s ease forwards}
@media(max-width:860px){.pillars-head{grid-template-columns:1fr;gap:18px}.pillar-mark{justify-self:center;max-width:460px}}
/* on a phone the names would run off the screen: the numbers remain, matching the numbered pillars below */
@media(max-width:560px){.pillar-mark text .t{display:none}.pillar-mark text{font-size:22px;letter-spacing:.08em}}
@media(prefers-reduced-motion:reduce){html.js-reveal .pillar-mark .s{stroke-dashoffset:0;animation:none}html.js-reveal .pillar-mark circle,html.js-reveal .pillar-mark text{opacity:1;animation:none}}
@media print{.pillar-mark{display:none}}

/* ------------------------------------------------------------ home: what it is
   The definition first, then the split, then the comparison. */
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
a.ul{color:var(--white);text-decoration:underline;text-decoration-color:rgba(61,245,160,.55);text-underline-offset:3px}
a.ul:hover{text-decoration-color:var(--accent)}
.ip-what-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:start}
.ip-def{margin-top:22px;font-family:var(--display);font-weight:500;font-size:clamp(18px,1.9vw,22px);line-height:1.5;letter-spacing:-.01em;color:var(--white);border-left:2px solid var(--accent);padding-left:22px}
.ip-def dfn{font-style:normal;color:var(--accent)}
.ip-facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin:30px 0 4px}
.ip-facts>div{background:var(--ink);padding:16px 16px 14px;display:flex;flex-direction:column;gap:4px}
.ip-facts .num{font-size:24px;color:var(--white);line-height:1.1}
.ip-facts .fine{font-size:12px;line-height:1.4}
.dfn-card{background:var(--panel-deep);border:1px solid var(--rule);border-top:2px solid var(--accent);padding:28px 26px 22px;position:relative}
.dfn-card .lbl{color:var(--accent)}
.dfn-h{font-size:22px;margin:12px 0 14px}
.dfn-short{font-family:var(--display);font-size:17.5px;line-height:1.55;font-weight:500;color:var(--white);letter-spacing:-.005em}
.dfn-short dfn{font-style:normal}
.dfn-short b{color:var(--accent);font-weight:700}
.dfn-also{font-size:14.5px;color:var(--steel);line-height:1.7}
.dfn-more{border-top:1px solid var(--rule);padding-top:12px;margin-top:4px}
.dfn-more summary{cursor:pointer;font-family:var(--display);font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--platinum);list-style:none}
.dfn-more summary::-webkit-details-marker{display:none}
.dfn-more summary::before{content:'+ ';color:var(--accent);font-family:var(--mono)}
.dfn-more[open] summary::before{content:'\2212 '}
.dfn-more blockquote{margin:14px 0 4px;padding:0 0 0 16px;border-left:1px solid var(--platinum)}
.dfn-more blockquote p{font-size:14.5px;color:var(--platinum);line-height:1.75;margin-bottom:10px}
.dfn-more cite{font-style:normal;font-size:12px;color:var(--graphite)}
.dfn-note{margin:14px 0 0}

/* PERSONAL || BRAND */
.pb-split{display:grid;grid-template-columns:minmax(0,1fr) 64px minmax(0,1fr);margin-top:34px;border:1px solid var(--rule);background:var(--panel-deep)}
.pb-side{padding:26px 26px 22px}
.pb-h{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border-bottom:1px solid var(--rule);padding-bottom:12px;margin-bottom:6px}
.pb-k{font-family:var(--display);font-weight:800;font-size:clamp(22px,2.6vw,30px);letter-spacing:.14em;text-transform:uppercase}
.pb-personal .pb-k{color:var(--white)}
.pb-brand .pb-k{color:var(--white)}
.pb-brand{text-align:right}
.pb-brand .pb-h{flex-direction:row-reverse}
.pb-side ul{list-style:none;margin:0;padding:0}
.pb-side li{padding:9px 0;border-bottom:1px solid var(--rule);color:var(--platinum);font-size:15px}
.pb-side li:last-child{border-bottom:0}
.pb-seam{display:flex;align-items:center;justify-content:center;position:relative;background:linear-gradient(180deg,transparent,rgba(61,245,160,.08),transparent)}
.pb-seam::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:1px;background:linear-gradient(180deg,transparent,var(--accent),transparent)}
.pb-seam span{position:relative;background:var(--ink);border:1px solid var(--accent);color:var(--accent);font-family:var(--mono);font-weight:500;font-size:15px;padding:8px 9px;line-height:1}
.pb-example{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--rule);border:1px solid var(--rule);border-top:0}
.pb-ex{background:var(--ink);padding:20px 26px}
.pb-ex p{margin:10px 0 0;font-family:var(--display);font-size:16.5px;line-height:1.5;color:var(--steel)}
.pb-ex .fine{font-family:var(--body);font-size:13px}
.pb-ex-on{background:linear-gradient(90deg,rgba(61,245,160,.06),transparent 70%),var(--ink)}
.pb-ex-on .lbl{color:var(--accent)}
.pb-ex-on p{color:var(--white)}
#personal-brand > .wrap > .intro:last-child{margin-top:28px}

/* conventional against Identity Positioning */
.vs{width:100%;border-collapse:collapse;margin-top:34px;font-size:15px;border:1px solid var(--rule)}
.vs th,.vs td{text-align:left;vertical-align:top;padding:18px 20px;border-bottom:1px solid var(--rule);line-height:1.6}
.vs thead th{font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--graphite);background:var(--panel-deep)}
.vs thead th.vs-ip{color:var(--accent)}
.vs tbody th{font-family:var(--display);font-weight:600;font-size:15px;color:var(--white);width:24%}
.vs tbody td{color:var(--steel);width:36%}
.vs tbody td:last-child{color:var(--white);background:linear-gradient(90deg,rgba(61,245,160,.05),transparent);border-left:2px solid var(--accent)}
.vs tbody tr:last-child th,.vs tbody tr:last-child td{border-bottom:0}
.vs-foot{margin-top:16px}
.cards.six{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:1040px){.cards.six{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.cards.six{grid-template-columns:1fr}}
@media (max-width:900px){
  .ip-what-grid{grid-template-columns:1fr;gap:36px}
  .ip-facts{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .pb-split{grid-template-columns:1fr}
  .pb-seam{height:44px;background:none}
  .pb-seam::before{top:50%;bottom:auto;left:0;right:0;width:auto;height:1px;background:linear-gradient(90deg,transparent,var(--accent),transparent)}
  .pb-brand{text-align:left}
  .pb-brand .pb-h{flex-direction:row}
  .pb-example{grid-template-columns:1fr}
  .vs thead{display:none}
  .vs,.vs tbody,.vs tr,.vs th,.vs td{display:block;width:100%}
  .vs tr{border-bottom:1px solid var(--rule);padding:16px 0}
  .vs tbody tr:last-child{border-bottom:0}
  .vs tbody th{width:auto;padding:0 18px 10px;border:0}
  .vs tbody td{width:auto;padding:10px 18px;border:0}
  .vs tbody td::before{content:attr(data-k);display:block;font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--graphite);margin-bottom:4px}
  .vs tbody td:last-child{border-left:2px solid var(--accent);margin:0 0 0 18px;width:calc(100% - 18px)}
  .vs tbody td:last-child::before{color:var(--accent)}
}

/* ---------------------------------------- /what-is-identity-positioning/ */
.paper.wi{max-width:780px}
.paper.wi h2{max-width:30ch}
.paper.wi > p,.paper.wi > ul,.paper.wi > ol{max-width:68ch}
.wi-by{margin-top:18px}
.wi-dfn{border:1px solid var(--rule);border-left:2px solid var(--accent);background:var(--panel-deep);padding:22px 24px 6px;margin:0 0 26px}
.wi-dfn .lbl{color:var(--accent)}
.paper .wi-dfn p{font-family:var(--display);font-weight:500;font-size:19px;line-height:1.55;color:var(--white);margin:10px 0 18px}
.wi-dfn dfn{font-style:normal;color:var(--accent)}
.paper .wi-parts li,.paper .wi-stages li,.paper .wi-pillars li,.paper .wi-tiers li{margin-bottom:12px}
.paper .wi-parts b,.paper .wi-stages b,.paper .wi-pillars b,.paper .wi-tiers b{color:var(--white);font-weight:600}
.wi-w{font-size:12px;color:var(--accent);border:1px solid rgba(61,245,160,.35);padding:0 5px;margin-left:4px}
.paper .wi-pillars{list-style:none;padding:0;border-top:1px solid var(--rule)}
.paper .wi-pillars li{padding:14px 0;margin:0;border-bottom:1px solid var(--rule);color:var(--steel);font-size:15.5px}
.paper .wi-pillars li b{font-family:var(--display);font-size:16.5px}
.wi-quote{margin:4px 0 26px;padding:6px 0 6px 22px;border-left:2px solid var(--accent)}
.paper .wi-quote p{font-family:var(--display);font-size:20px;line-height:1.5;font-weight:500;color:var(--white);margin:0 0 8px}
.wi-quote cite{font-style:normal;font-size:12.5px;color:var(--graphite)}
.paper .dfn-card{margin:0 0 28px}
.paper .dfn-card .dfn-short{font-size:17.5px;line-height:1.55;color:var(--white)}
.paper .dfn-card .dfn-also{font-size:14.5px;color:var(--steel);line-height:1.7}
.paper .dfn-card blockquote p{font-size:14.5px;color:var(--platinum);line-height:1.75}
.paper .dfn-card .dfn-note{font-size:13px;color:var(--graphite);margin:14px 0 0}
.paper .pb-split{margin:20px 0 0}
.paper .pb-side ul{padding:0;margin:0}
.paper .pb-side li{font-size:15px;color:var(--platinum);margin:0}
.paper .pb-ex p{font-size:16px;color:var(--steel);margin:10px 0 0}
.paper .pb-ex-on p{color:var(--white)}
.paper .pb-ex p.fine{font-family:var(--body);font-size:13px}
.paper .pb-example{margin-bottom:26px}
.paper .vs{margin:10px 0 0;font-size:14.5px}
.paper .faq{margin-top:12px}
.paper .faq-item p{font-size:15px;color:var(--steel)}
.paper .paper-end .cta-row{margin-top:20px}
@media (max-width:900px){.paper.wi{max-width:none}}

/* ----------------------------------------------- /identity-positioner/ */
.powered{display:inline-flex;align-items:center;gap:10px;margin:18px 0 0;padding:8px 14px;border:1px solid rgba(61,245,160,.45);background:rgba(61,245,160,.05);font-size:13.5px;color:var(--platinum)}
.powered b{color:var(--accent);font-family:var(--display);letter-spacing:.12em}
.powered-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 4px rgba(61,245,160,.15);animation:pos-pulse 2.8s ease-in-out infinite}
/* The live dot breathes: a slow pulse, so it reads as running, not blinking. */
@keyframes pos-pulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(61,245,160,.45)}50%{opacity:.55;box-shadow:0 0 0 7px rgba(61,245,160,0)}}
@media(prefers-reduced-motion:reduce){.powered-dot{animation:none}}
.isia-head{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:48px;align-items:end}
.isia-head .intro{margin:0}
.isia-figure{margin:40px 0 0;padding:26px 24px 20px;border:1px solid var(--rule);background:var(--ink);color:var(--steel)}
.isia-fig{display:block;width:100%;height:auto}
.isia-tall{display:none;max-width:360px;margin:0 auto}
.isia-fig .b{fill:var(--panel-deep);stroke:#3A3A40;stroke-width:1}
.isia-fig .b.pos{fill:rgba(61,245,160,.06);stroke:#3DF5A0}
.isia-fig .b.st{fill:#111114;stroke:rgba(61,245,160,.45)}
.isia-fig .b.out{fill:#111114;stroke:#3DF5A0}
.isia-fig .b.team{stroke-dasharray:4 4}
.isia-fig .eng{fill:rgba(61,245,160,.025);stroke:#3DF5A0;stroke-width:1.4}
.isia-fig text{font-family:var(--body);fill:#C8C5BE}
.isia-fig .t{font-family:var(--display);font-weight:700;font-size:14.5px;fill:#FFFFFF}
.isia-fig .n{font-family:var(--mono);font-size:11.5px;fill:#3DF5A0}
.isia-fig .s{font-size:12.5px;fill:#8E8B84}
.isia-fig .k{font-family:var(--display);font-weight:700;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;fill:#86837C}
.isia-fig .k.hi{fill:#3DF5A0}
.isia-fig .l{font-size:12px;fill:#C8C5BE}
.isia-fig .l.hi{fill:#3DF5A0}
.isia-fig .a{stroke:currentColor;stroke-width:1.3;fill:none}
.isia-fig .a.hi{stroke:#3DF5A0}
.isia-fig .a.dash{stroke-dasharray:5 4}
.isia-figure figcaption{margin-top:16px;max-width:78ch}
.isia-points{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:34px}
.isia-points>div{background:var(--ink);padding:24px 22px}
.isia-points .num{font-size:26px;color:var(--accent);line-height:1}
.isia-points h3{font-size:16px;margin:14px 0 10px}
.isia-points p{font-size:14px;color:var(--steel);line-height:1.65;margin:0}
.pos-faq-h{margin-top:56px}
.pos-hero .cta-row{margin-top:26px}
.pos-hero-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:40px;align-items:center}
.pos-globe{position:relative;width:100%;max-width:340px;aspect-ratio:1;justify-self:end}
.pos-globe canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
@media(max-width:900px){.pos-hero-grid{grid-template-columns:1fr;gap:12px}.pos-globe{order:-1;max-width:200px;justify-self:start;margin:-10px 0 0 -24px}}
/* Why ISIA exists, and how to say it */
.pos-system-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(32px,5vw,64px);align-items:center}
.pos-sys{list-style:none;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.pos-sys li{background:var(--panel-deep);padding:16px 16px 14px;position:relative}
.pos-sys li::before{content:'';position:absolute;top:-1px;left:0;width:32px;height:2px;background:var(--accent)}
.pos-sys b{display:block;font-family:var(--display);font-size:14px;color:var(--white);margin-bottom:6px}
.pos-sys span{font-size:13px;line-height:1.55;color:var(--steel)}
.pos-say{border:1px solid var(--accent-dim);background:radial-gradient(ellipse at 50% 0%,rgba(61,245,160,.10),transparent 70%),var(--ink);padding:26px 24px;text-align:center}
.pos-say .lbl{margin:0 0 14px}
.pos-say-word{margin:0;font-family:var(--display);font-size:clamp(40px,5vw,58px);font-weight:800;letter-spacing:.08em;color:var(--white);line-height:1}
.pos-say-sound{margin:14px 0 0;display:flex;justify-content:center;align-items:baseline;gap:10px;font-family:var(--display);font-size:24px;font-weight:700;color:var(--accent)}
.pos-say-sound span:first-child{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.pos-say-sound i{font-style:normal;color:var(--steel)}
.pos-say-ipa{margin:12px 0 0;font-size:13px;color:var(--steel)}
@media(max-width:900px){.pos-system-grid{grid-template-columns:1fr}.pos-say{max-width:420px}}
@media(max-width:560px){.pos-sys{grid-template-columns:1fr}}
/* Be told when it opens: centered, the form beneath its heading */
.pos-notify{text-align:center;margin:64px auto 0;padding:36px clamp(18px,4vw,40px) 30px;border:1px solid var(--rule);background:var(--panel-deep);max-width:620px}
.pos-notify .pos-faq-h{margin:0 auto}
.pos-notify .intro{margin-left:auto;margin-right:auto}
.pos-notify .signup{max-width:420px;margin:22px auto 0;text-align:left}
.pos-notify .signup .btn{width:100%}
.pos-notify .fine{text-align:center}
@media (max-width:980px){.isia-points{grid-template-columns:repeat(2,minmax(0,1fr))}.isia-head{grid-template-columns:1fr;gap:16px}}
@media (max-width:760px){.isia-wide{display:none}.isia-tall{display:block}.isia-figure{padding:18px 12px 14px}}
@media (max-width:520px){.isia-points{grid-template-columns:1fr}}

/* ---------------------------------------------------- /identity-quest/
   The page wears Identity Quest's own identity, black and gold, inside the
   site's header and footer: the game's tokens, scoped to .iqp. */
.iqp{--iq-gold:#F3C228;--iq-gold-txt:#E8B71C;--iq-gold-lt:#F8DC7E;--iq-gold-dim:#8C6E12;--iq-panel:#131314;--iq-panel-2:#0F0F10;--iq-line:#262729;--iq-fg:#F4F4F3;--iq-muted:#A2A4A7;--iq-bad:#e2564c;
  background:#0A0A0A;color:var(--iq-fg)}
.iqp h1,.iqp h2,.iqp h3{font-family:var(--display);letter-spacing:-.02em}
.iqp h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;line-height:1.1;margin:8px 0 0;max-width:24ch}
.iqp-band{padding:80px 0;border-bottom:1px solid var(--iq-line)}
.iqp-band.alt{background:linear-gradient(180deg,#0E0D0A,#0A0A0A 60%)}
.iqp-k{font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.24em;text-transform:uppercase;color:var(--iq-gold-txt);margin:0}
.iqp-intro{margin-top:18px;max-width:68ch;color:var(--iq-muted);font-size:16.5px;line-height:1.75}
.iqp-fine{font-size:13px;color:#8D8F92;line-height:1.6}
.iqp-a{color:var(--iq-fg);text-decoration:underline;text-decoration-color:var(--iq-gold);text-underline-offset:3px}
.iqp-btn{display:inline-flex;align-items:center;justify-content:center;background:var(--iq-gold);color:#0A0A0A;border:1px solid var(--iq-gold);padding:14px 22px;font-family:var(--display);font-weight:800;font-size:13px;letter-spacing:.06em;text-transform:uppercase;transition:background .15s ease,box-shadow .15s ease}
.iqp-btn:hover{background:var(--iq-gold-lt);box-shadow:0 10px 30px -10px rgba(243,194,40,.6)}
.iqp-btn.ghost{background:transparent;color:var(--iq-fg);border-color:#3A3B3E}
.iqp-btn.ghost:hover{border-color:var(--iq-gold);color:var(--iq-gold-lt);box-shadow:none}
.iqp-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}

/* hero */
.iqp-hero{position:relative;padding:72px 0 64px;border-bottom:1px solid var(--iq-line);overflow:hidden;
  background:radial-gradient(ellipse at 78% 10%,rgba(243,194,40,.16),transparent 55%),radial-gradient(ellipse at 0% 100%,rgba(243,194,40,.06),transparent 50%),#0A0A0A}
.iqp-hero::before{content:'';position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(255,255,255,.55) 1px,transparent 1.4px),radial-gradient(rgba(243,194,40,.5) 1px,transparent 1.4px);background-size:180px 180px,260px 260px;background-position:20px 40px,120px 90px;
  -webkit-mask-image:linear-gradient(180deg,#000,transparent 80%);mask-image:linear-gradient(180deg,#000,transparent 80%)}
.iqp-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:44px;align-items:center}
.iqp-logo{display:block;height:64px;width:auto;margin:0 0 18px}
.iqp-eyebrow{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--iq-gold-txt);margin:0 0 14px}
.iqp-hero h1{font-size:clamp(34px,3.6vw,50px);font-weight:800;line-height:1.05;margin:0}
.iqp-lead{margin-top:20px;font-size:17.5px;line-height:1.7;color:#C9CACC;max-width:52ch}
.iqp-chips{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.iqp-chips li{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--iq-gold-lt);border:1px solid rgba(243,194,40,.35);background:rgba(243,194,40,.06);padding:5px 10px}
.iqp-hero-shot{margin:0;border:1px solid #3A3B3E;background:#0A0A0A;box-shadow:0 40px 90px -30px rgba(0,0,0,.9),0 0 0 1px rgba(243,194,40,.12),0 30px 80px -40px rgba(243,194,40,.35);transform:perspective(1400px) rotateY(-4deg) rotateX(1deg);transform-origin:left center}
.iqp-hero-shot img{display:block;width:100%;height:auto}
.iqp-frame{display:flex;align-items:center;gap:6px;padding:8px 12px;border-bottom:1px solid var(--iq-line);background:#121213}
.iqp-frame span{width:8px;height:8px;border-radius:50%;background:#2E2F31}
.iqp-frame span:first-child{background:var(--iq-gold)}
.iqp-frame b{margin-left:10px;font-family:var(--body);font-weight:500;font-size:11.5px;color:#8D8F92;letter-spacing:.02em}

/* the gap + stats */
.iqp-gap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:start}
.iqp-gap p{color:var(--iq-muted);font-size:16.5px;line-height:1.75;margin:0 0 16px}
.iqp-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--iq-line);border:1px solid var(--iq-line);margin-top:44px}
.iqp-stats>div{background:var(--iq-panel);padding:22px 20px;display:flex;flex-direction:column;gap:6px;position:relative}
.iqp-stats>div::before{content:'';position:absolute;top:-1px;left:0;width:44px;height:2px;background:var(--iq-gold)}
.iqp-stats b{font-family:var(--display);font-weight:800;font-size:34px;color:var(--iq-gold);line-height:1}
.iqp-stats span{font-size:13.5px;color:var(--iq-muted);line-height:1.5}

/* annotated board */
.iqp-annot{position:relative;margin:34px 0 0;border:1px solid #3A3B3E;box-shadow:0 30px 70px -30px rgba(0,0,0,.9)}
.iqp-annot img{display:block;width:100%;height:auto}
.iqp-pin{position:absolute;width:26px;height:26px;border-radius:50%;background:var(--iq-gold);color:#0A0A0A;font-family:var(--display);font-weight:800;font-size:13px;display:grid;place-items:center;box-shadow:0 0 0 3px rgba(10,10,10,.85),0 0 0 6px rgba(243,194,40,.35),0 6px 18px rgba(0,0,0,.6);transform:translate(-50%,-50%)}
.iqp-legend{list-style:none;counter-reset:pin;padding:0;margin:26px 0 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1px;background:var(--iq-line);border:1px solid var(--iq-line)}
.iqp-legend li{counter-increment:pin;background:var(--iq-panel);padding:18px 18px 18px 52px;position:relative;font-size:14px;line-height:1.65;color:var(--iq-muted)}
.iqp-legend li::before{content:counter(pin);position:absolute;left:16px;top:17px;width:24px;height:24px;border-radius:50%;background:var(--iq-gold);color:#0A0A0A;font-family:var(--display);font-weight:800;font-size:12px;display:grid;place-items:center}
.iqp-legend b{color:var(--iq-fg);font-weight:600}

/* plan a week */
.iqp-plan-grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:48px;align-items:start}
.iqw{background:var(--iq-panel);border:1px solid var(--iq-line);border-top:2px solid var(--iq-gold);padding:20px}
.iqw-head{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:var(--iq-fg)}
.iqw-head span:last-child{font-family:var(--body);letter-spacing:0;text-transform:none;font-size:13px;color:var(--iq-muted)}
.iqw-head b{color:var(--iq-fg)}
.iqw-bar{height:8px;margin:12px 0 16px;background:repeating-linear-gradient(135deg,#1A1B1C 0 6px,#151516 6px 12px);border:1px solid var(--iq-line)}
.iqw-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--iq-gold-dim),var(--iq-gold));transition:width .25s ease}
.iqw-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.iqw-tile{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left;background:#0F0F10;border:1px solid var(--iq-line);padding:10px 11px;color:var(--iq-fg);font-family:var(--body);min-height:102px;transition:border-color .15s ease,background .15s ease,transform .1s ease}
.iqw-tile:hover:not(:disabled){border-color:var(--iq-gold-dim);background:#141311}
.iqw-tile:active:not(:disabled){transform:translateY(1px)}
.iqw-tile:disabled{opacity:.4;cursor:not-allowed}
.iqw-tile.on{border-color:var(--iq-gold-dim)}
.iqw-tile.faded{border-color:#5a3a1e}
.iqw-top{display:flex;justify-content:space-between;width:100%;align-items:center}
.iqw-ico{font-size:18px;line-height:1}
.iqw-n{font-family:var(--display);font-weight:800;font-size:13px;color:var(--iq-gold)}
.iqw-l{font-family:var(--display);font-weight:800;font-size:14.5px}
.iqw-c{font-family:var(--display);font-weight:700;font-size:12px;color:var(--iq-gold-txt)}
.iqw-pips{display:flex;gap:3px;min-height:5px;margin-top:2px}
.iqw-pips i{width:12px;height:4px;background:var(--iq-gold)}
.iqw-pips i.used{background:#3A3B3E}
.iqw-f{font-size:11.5px;color:#8D8F92}
.iqw-tile.faded .iqw-f{color:#E8A15C}
.iqw-read{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--iq-line);border:1px solid var(--iq-line);margin-top:14px}
.iqw-read>div{background:#0F0F10;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.iqw-lbl{font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:#8D8F92}
.iqw-read b{font-family:var(--display);font-weight:800;font-size:22px;color:var(--iq-fg)}
.iqw-odds{display:block;height:4px;background:#1E1F21}
.iqw-odds i{display:block;height:100%;width:0;background:var(--iq-gold);transition:width .25s ease}
.iqw-note{margin:14px 0 0;padding:12px 14px;border-left:2px solid var(--iq-gold);background:rgba(243,194,40,.05);font-size:14px;line-height:1.6;color:var(--iq-fg)}
.iqw-strain{margin:8px 0 0;font-size:12.5px;color:#E8A15C}
.iqw-foot{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px}
.iqw-check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--iq-muted);cursor:pointer}
.iqw-check input{width:16px;height:16px;padding:0;accent-color:#F3C228}
.iqw-mini{background:transparent;border:1px solid #3A3B3E;color:var(--iq-fg);font-family:var(--display);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:7px 12px;margin-left:6px}
.iqw-mini:hover{border-color:var(--iq-gold);color:var(--iq-gold-lt)}

/* screenshots */
.iqp-shot{margin:30px 0 0}
.iqp-shot img{display:block;width:100%;height:auto;border:1px solid #3A3B3E;box-shadow:0 26px 60px -30px rgba(0,0,0,.9)}
.iqp-shot figcaption{margin-top:10px;font-size:13.5px;color:#8D8F92;line-height:1.6;max-width:72ch}
.iqp-two{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.iqp-two-b{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);margin-top:12px}
.iqp-phone img{max-width:300px;margin:0 auto;border-radius:22px;border:6px solid #1E1F21}
.iqp-phone figcaption{text-align:center;margin-left:auto;margin-right:auto;max-width:300px}

/* features */
.iqp-feats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--iq-line);border:1px solid var(--iq-line);margin-top:34px}
.iqp-feat{background:var(--iq-panel);padding:22px 22px 20px;position:relative}
.iqp-feat::before{content:'';position:absolute;top:-1px;left:0;width:36px;height:2px;background:var(--iq-gold)}
.iqp-feat h3{font-size:16.5px;font-weight:800;margin:0 0 8px;color:var(--iq-fg)}
.iqp-feat p{margin:0;font-size:14px;line-height:1.65;color:var(--iq-muted)}

/* numbers */
.iqp-tablewrap{overflow-x:auto;margin-top:28px;border:1px solid var(--iq-line)}
.iqp-table{width:100%;border-collapse:collapse;font-size:14.5px;min-width:640px}
.iqp-table th,.iqp-table td{padding:13px 16px;border-bottom:1px solid var(--iq-line);text-align:right;white-space:nowrap}
.iqp-table th:first-child{text-align:left;white-space:normal}
.iqp-table thead th{font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#8D8F92;background:#0F0F10;white-space:normal;vertical-align:bottom}
.iqp-table tbody th{font-weight:600;color:var(--iq-fg)}
.iqp-table td{font-family:var(--display);font-weight:700;color:var(--iq-fg)}
.iqp-table td.iqp-never{color:#6D6F72;font-weight:500}
.iqp-table tr.iqp-best th,.iqp-table tr.iqp-best td{color:var(--iq-gold);background:rgba(243,194,40,.06)}
.iqp-table tr.iqp-best th{box-shadow:inset 2px 0 0 var(--iq-gold)}
.iqp-table tbody tr:last-child th,.iqp-table tbody tr:last-child td{border-bottom:0}
.iqp-lessons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 32px;margin-top:40px}
.iqp-lessons h3{font-size:17px;font-weight:800;margin:0 0 8px;color:var(--iq-gold-lt)}
.iqp-lessons p{margin:0;font-size:14.5px;line-height:1.7;color:var(--iq-muted)}

/* faq + final */
.iqp #iq-faq h2{max-width:none}
.iqp .faq-item{background:var(--iq-panel)}
.iqp details.faq-item summary::after{color:var(--iq-gold)}
.iqp details.faq-item summary:hover h3{color:var(--iq-gold-lt)}
.iqp .faq-item a{color:var(--iq-fg);text-decoration:underline;text-decoration-color:var(--iq-gold)}
.iqp-final{padding:56px 0;background:var(--iq-panel);border-top:2px solid var(--iq-gold);border-bottom:1px solid var(--iq-line)}
.iqp-final-in{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:24px;align-items:center}
.iqp-final h2{margin:0;font-size:clamp(24px,2.8vw,32px)}
.iqp-final p{margin:6px 0 0;color:var(--iq-muted)}
.iqp-final .iqp-cta{margin-top:0}

@media (max-width:980px){
  .iqp-hero-grid,.iqp-gap,.iqp-plan-grid{grid-template-columns:1fr}
  .iqp-hero-shot{transform:none}
  .iqp-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .iqp-feats,.iqp-lessons{grid-template-columns:repeat(2,minmax(0,1fr))}
  .iqp-final-in{grid-template-columns:1fr}
}
@media (max-width:640px){
  .iqp-band{padding:56px 0}
  .iqp-feats,.iqp-lessons,.iqp-two,.iqp-two-b{grid-template-columns:1fr}
  .iqw-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .iqp-pin{width:20px;height:20px;font-size:10.5px;box-shadow:0 0 0 2px rgba(243,194,40,.3)}
  .iqp-btn{width:100%}
}
@media (prefers-reduced-motion:reduce){.iqw-bar i,.iqw-odds i{transition:none}}
.iqp-legend li:last-child:nth-child(3n+2){grid-column:span 2}
@media (max-width:1040px){.iqp-legend li:last-child:nth-child(3n+2){grid-column:auto}}
.iqp-gap p.iqp-k{font-size:10.5px;line-height:1.5;color:var(--iq-gold-txt);margin:0}

/* Home: the flowing banner under the hero (flow_banner() in site_build.py). */
.ip-flow{overflow:hidden;border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);background:var(--ink);padding:clamp(16px,2vw,24px) 0}
.ip-flow-track{display:flex;width:max-content;animation:ip-flow 60s linear infinite}
.ip-flow:hover .ip-flow-track{animation-play-state:paused}
.ip-flow-set{display:flex;align-items:center;flex:none}
.ip-flow .w{font-family:var(--display);font-weight:800;font-size:clamp(26px,3.6vw,48px);line-height:1.15;letter-spacing:-.02em;white-space:nowrap;padding:0 .6em;color:var(--white)}
/* Outlined words: the outline is the letter's own shadow, one pixel out on
   every side, under a fill in the ground colour. -webkit-text-stroke traced
   every contour of the font, overlaps included, and drew lines through the
   letters (the T's bar, the A's crossbar). */
.ip-flow .w.o{color:var(--ink);text-shadow:1px 0 0 var(--platinum),-1px 0 0 var(--platinum),0 1px 0 var(--platinum),0 -1px 0 var(--platinum),1px 1px 0 var(--platinum),-1px -1px 0 var(--platinum),1px -1px 0 var(--platinum),-1px 1px 0 var(--platinum)}
.ip-flow i{flex:none;width:9px;height:9px;background:var(--accent);transform:rotate(45deg)}
@keyframes ip-flow{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ip-flow-track{animation:none}}
@media print{.ip-flow{display:none}}

/* --------------------------------------------------------- /for-companies/
   The Workplace Audit page. Final states are the default; the hidden start
   states apply only once companies.js has set html.cx-js, so the page reads
   in full with the script blocked or motion reduced. */
.cx-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin:44px 0 0;max-width:980px}
.cx-stats > div{background:var(--panel-deep);padding:20px 20px 18px;position:relative}
.cx-stats > div::before{content:'';position:absolute;top:-1px;left:0;width:40px;height:2px;background:var(--accent)}
.cx-stats dt{font-size:clamp(30px,3.4vw,42px);font-weight:500;color:var(--white);line-height:1}
.cx-stats dd{margin:10px 0 0;font-size:13px;line-height:1.55;color:var(--steel)}
@media(max-width:760px){.cx-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}

.cx-split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,64px);align-items:center}
.cx-split-r > :first-child{align-self:start}
@media(max-width:900px){.cx-split{grid-template-columns:1fr}}

/* The interpretation map */
.cx-map-wrap{border:1px solid var(--rule);background:radial-gradient(ellipse at 50% 50%,rgba(61,245,160,.07),transparent 65%),var(--panel-deep);padding:14px}
.cx-map{display:block;width:100%;height:auto;overflow:visible}
.cx-l1{stroke:#3A3B3E;stroke-width:1}
.cx-l2{stroke:var(--accent);stroke-width:1;stroke-dasharray:3 7;opacity:.55;animation:cx-run 3s linear infinite}
@keyframes cx-run{to{stroke-dashoffset:-40}}
.cx-emp{fill:var(--panel);stroke:var(--platinum);stroke-width:1.2}
.cx-core{fill:var(--ink);stroke:var(--accent);stroke-width:1.5}
.cx-core-glow{fill:rgba(61,245,160,.08);animation:cx-pulse 3.2s ease-in-out infinite;transform-origin:center;transform-box:fill-box}
@keyframes cx-pulse{50%{transform:scale(1.12);opacity:.5}}
.cx-core-t{font-family:var(--display);font-size:12px;font-weight:700;fill:var(--white);letter-spacing:.02em}
.cx-aud circle{fill:var(--accent)}
.cx-aud text{font-family:var(--display);font-size:11.5px;font-weight:600;fill:var(--platinum);letter-spacing:.06em;text-transform:uppercase}
html.cx-js .cx-map-wrap:not(.on) .cx-l1,html.cx-js .cx-map-wrap:not(.on) .cx-l2,html.cx-js .cx-map-wrap:not(.on) .cx-emp,html.cx-js .cx-map-wrap:not(.on) .cx-aud{opacity:0}
.cx-map-wrap .cx-l1,.cx-map-wrap .cx-emp,.cx-map-wrap .cx-aud{transition:opacity .8s ease}
.cx-map-wrap .cx-emp{transition-delay:.25s}.cx-map-wrap .cx-aud{transition-delay:.55s}
.cx-map-wrap .cx-l2{transition:opacity .8s ease .8s}

/* The engagement flow: a rail of numbered steps, the third one forking */
.cx-flow{list-style:none;padding:0;margin:34px 0 22px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;position:relative;counter-reset:none}
.cx-flow::before{content:'';position:absolute;top:19px;left:20px;right:20px;height:1px;background:var(--rule)}
.cx-flow::after{content:'';position:absolute;top:19px;left:20px;height:1px;width:calc(100% - 40px);background:linear-gradient(90deg,var(--accent),var(--accent-dim));transform-origin:left;transition:transform 1.6s cubic-bezier(.22,1,.36,1)}
html.cx-js .cx-flow:not(.on)::after{transform:scaleX(0)}
.cx-step{position:relative;padding-top:56px}
.cx-dot{position:absolute;top:0;left:0;width:40px;height:40px;display:grid;place-items:center;background:var(--ink);border:1px solid var(--accent);color:var(--accent);font-size:12.5px;z-index:1;transition:background .4s ease,color .4s ease,box-shadow .4s ease}
.cx-flow.on .cx-dot{background:var(--accent);color:var(--ink);box-shadow:0 0 0 6px rgba(61,245,160,.12)}
.cx-flow.on .cx-step:nth-child(2) .cx-dot{transition-delay:.3s}.cx-flow.on .cx-step:nth-child(3) .cx-dot{transition-delay:.6s}
.cx-flow.on .cx-step:nth-child(4) .cx-dot{transition-delay:.9s}.cx-flow.on .cx-step:nth-child(5) .cx-dot{transition-delay:1.2s}
.cx-opt .cx-dot{border-style:dashed}
.cx-flow.on .cx-opt .cx-dot{background:var(--ink);color:var(--accent);box-shadow:0 0 0 6px rgba(61,245,160,.08)}
.cx-step h3{font-size:16px;margin:0 0 8px;color:var(--white)}
.cx-step p{font-size:13.5px;line-height:1.6;color:var(--steel);margin:0}
.cx-branch{display:flex;flex-direction:column;gap:3px;border:1px solid var(--rule);border-left:2px solid var(--accent);background:var(--ink);padding:10px 12px;margin-top:8px}
.cx-branch b{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--white)}
.cx-branch span{font-size:13px;line-height:1.5;color:var(--steel)}
.cx-branch + .cx-branch{border-left-color:var(--platinum)}
@media(max-width:900px){
  .cx-flow{grid-template-columns:1fr;gap:0}
  .cx-flow::before,.cx-flow::after{top:20px;bottom:20px;left:19px;right:auto;width:1px;height:auto}
  .cx-flow::after{height:calc(100% - 40px);transform-origin:top}
  html.cx-js .cx-flow:not(.on)::after{transform:scaleY(0)}
  .cx-step{padding:0 0 26px 62px}
  .cx-step:last-child{padding-bottom:0}
}

/* The weights bar */
.cx-weights{display:flex;gap:2px;margin:28px 0 0;height:64px}
.cx-weights span{flex:0 0 var(--w);display:flex;flex-direction:column;justify-content:flex-end;padding:8px 10px;background:linear-gradient(180deg,rgba(61,245,160,.16),rgba(61,245,160,.04));border-top:2px solid var(--accent);
  font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.03em;color:var(--platinum);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:flex-basis 1.2s cubic-bezier(.22,1,.36,1)}
.cx-weights b{font-size:18px;font-weight:500;color:var(--white);line-height:1.1}
html.cx-js .cx-weights:not(.on) span{flex-basis:4%}
@media(max-width:640px){.cx-weights{height:auto;flex-direction:column;gap:4px}.cx-weights span{flex-basis:auto !important;width:calc(var(--w) * 3.4);flex-direction:row;justify-content:flex-start;align-items:baseline;gap:10px;transition:width 1.2s cubic-bezier(.22,1,.36,1)}html.cx-js .cx-weights:not(.on) span{width:12%}}

/* The sample leadership report */
.cx-report{margin:0;border:1px solid var(--platinum);background:var(--ink);box-shadow:0 30px 70px -30px rgba(0,0,0,.9)}
.cx-report-h{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--rule);background:var(--panel)}
.cx-report-h span:first-child{font-family:var(--display);font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--white)}
.cx-tag{font-family:var(--mono);font-size:10.5px;color:var(--steel)}
.cx-report-g{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:1px;background:var(--rule)}
.cx-cell{background:var(--ink);padding:16px}
.cx-k{font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--steel);margin:0 0 12px}
.cx-comp{display:flex;flex-direction:column;align-items:center;text-align:center}
.cx-ring{position:relative;width:120px;height:120px}
.cx-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.cx-ring-bg{fill:none;stroke:var(--rule);stroke-width:8}
.cx-ring-fg{fill:none;stroke:var(--accent);stroke-width:8;stroke-linecap:butt;stroke-dasharray:var(--c);stroke-dashoffset:var(--v);transition:stroke-dashoffset 1.4s cubic-bezier(.22,1,.36,1)}
html.cx-js .cx-report:not(.on) .cx-ring-fg{stroke-dashoffset:var(--c)}
.cx-ring b{position:absolute;inset:0;display:grid;place-items:center;font-size:32px;font-weight:500;color:var(--white)}
.cx-band{margin:10px 0 0;font-size:12.5px;color:var(--platinum)}
.cx-bar{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 26px;align-items:center;gap:10px;margin:0 0 9px}
.cx-bar-l{font-size:12px;color:var(--platinum);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cx-bar-t,.cx-rk-t{display:block;height:6px;background:var(--panel)}
.cx-bar-t i,.cx-rk-t i{display:block;height:100%;width:var(--w);background:var(--accent);transition:width 1.2s cubic-bezier(.22,1,.36,1) .2s}
.cx-bar-t.dim i{background:var(--platinum)}
html.cx-js .cx-report:not(.on) .cx-bar-t i,html.cx-js .cx-report:not(.on) .cx-rk-t i{width:0}
.cx-bar b,.cx-rk b{font-size:12px;font-weight:500;color:var(--white);text-align:right}
.cx-vs{grid-column:1 / 2}
.cx-rk{list-style:none;margin:0;padding:0}
.cx-rk li{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) 34px;align-items:center;gap:10px;margin:0 0 9px;font-size:12px;color:var(--platinum)}
.cx-rk-t i{background:#E2A04C}
@media(max-width:520px){.cx-report-g{grid-template-columns:1fr}.cx-vs{grid-column:auto}}

/* Who sees what */
.cx-matrix-wrap{overflow-x:auto;margin-top:28px;border:1px solid var(--rule)}
.cx-matrix{width:100%;border-collapse:collapse;min-width:620px;font-size:14px}
.cx-matrix th,.cx-matrix td{padding:14px 16px;border-bottom:1px solid var(--rule);text-align:left;vertical-align:middle}
.cx-matrix thead th{font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);background:var(--panel-deep)}
.cx-matrix tbody th{font-weight:600;color:var(--white)}
.cx-matrix td{color:var(--platinum)}
.cx-matrix td.y::before,.cx-matrix td.n::before{content:'';display:inline-block;width:8px;height:8px;margin-right:10px;vertical-align:1px}
.cx-matrix td.y::before{background:var(--accent)}
.cx-matrix td.n::before{border:1px solid #5A5A5E}
.cx-matrix td.n{color:var(--steel)}
.cx-matrix tbody tr{transition:background .2s ease}
.cx-matrix tbody tr:hover{background:var(--panel-deep)}

/* Six cards, three to a row, so no row is left with empty cells */
.wp-grid.cx-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:900px){.wp-grid.cx-3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.wp-grid.cx-3{grid-template-columns:1fr}}
/* What your organization gains: numbered */
.cx-gains .cx-gn{display:block;font-size:12px;color:var(--accent-dim);margin-bottom:12px}

/* Private speaking */
.cx-speakers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-top:30px}
.cx-speaker{display:grid;grid-template-columns:150px minmax(0,1fr);gap:22px;align-items:start;border:1px solid var(--rule);background:var(--panel-deep);padding:20px;transition:border-color .25s ease,transform .25s ease}
.cx-speaker:hover{border-color:var(--accent-dim);transform:translateY(-2px)}
.cx-speaker img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.cx-speaker:hover img{filter:grayscale(.2)}
.cx-speaker h3{font-size:19px;margin:2px 0 8px}
.cx-speaker p{font-size:14px;line-height:1.65;color:var(--steel);margin:0 0 12px}
.cx-role{font-family:var(--display);font-size:10px !important;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--accent) !important;margin:0 0 4px !important}
html.cx-js .cx-speaker:not(.on){opacity:0;transform:translateY(14px)}
.cx-speaker{transition:opacity .7s ease,transform .7s ease,border-color .25s ease}
.cx-speakers .cx-speaker:nth-child(2){transition-delay:.15s}
@media(max-width:900px){.cx-speakers{grid-template-columns:1fr}}
@media(max-width:480px){.cx-speaker{grid-template-columns:96px minmax(0,1fr);gap:16px;padding:16px}}
@media(prefers-reduced-motion:reduce){.cx-l2,.cx-core-glow{animation:none}}

/* ------------------------------------------------------------ /the-book/ */
.bk-hero{padding-bottom:64px}
.bk-hero-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(36px,6vw,80px);align-items:center}
.bk-hero h1{font-size:clamp(32px,4.2vw,54px);max-width:18ch}
.bk-cover{margin:0;position:relative;perspective:1400px}
.bk-cover::before{content:'';position:absolute;inset:8% -10% -6% -10%;background:radial-gradient(ellipse at 50% 55%,rgba(61,245,160,.18),transparent 65%);filter:blur(10px);z-index:0}
.bk-cover img{position:relative;z-index:1;display:block;width:100%;max-width:360px;height:auto;margin-left:auto;box-shadow:0 40px 80px -30px rgba(0,0,0,.95),0 0 0 1px rgba(255,255,255,.06);transform:rotateY(-12deg) rotateX(2deg);transform-origin:left center;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.bk-cover:hover img{transform:rotateY(-4deg) rotateX(0)}
.bk-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin:40px 0 0}
.bk-stats > div{background:var(--panel-deep);padding:16px 16px 14px;position:relative}
.bk-stats > div::before{content:'';position:absolute;top:-1px;left:0;width:34px;height:2px;background:var(--accent)}
.bk-stats dt{font-size:clamp(22px,2.4vw,30px);color:var(--white);line-height:1}
.bk-stats dd{margin:8px 0 0;font-size:12.5px;line-height:1.5;color:var(--steel)}
@media(max-width:900px){.bk-hero-grid{grid-template-columns:1fr}.bk-cover{order:-1;max-width:190px}.bk-cover img{margin:0;transform:none}.bk-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bk-two{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(32px,5vw,64px);align-items:center}
.bk-two > div:first-child h2{max-width:20ch}
@media(max-width:900px){.bk-two{grid-template-columns:1fr}}
.bk-quote{margin:0;padding:28px 0 28px 28px;border-left:2px solid var(--accent)}
.bk-quote p{font-family:var(--display);font-size:clamp(20px,2.2vw,27px);font-weight:600;line-height:1.35;color:var(--white);letter-spacing:-.01em;margin:0}
.bk-quote cite{display:block;margin-top:16px;font-style:normal;font-size:13px;color:var(--steel)}
.bk-quote-fw p{font-size:clamp(18px,1.9vw,23px)}
/* The chapters: one disclosure each, opening onto its subchapters */
.bk-chapters{margin-top:30px;border-top:1px solid var(--rule)}
.bk-ch{border-bottom:1px solid var(--rule)}
.bk-ch summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:64px minmax(0,1fr) auto 16px;gap:18px;align-items:center;padding:20px 4px;transition:background .2s ease}
.bk-ch summary::-webkit-details-marker{display:none}
.bk-ch summary::after{content:'';width:8px;height:8px;border-right:1.5px solid var(--accent);border-bottom:1.5px solid var(--accent);transform:rotate(45deg);transition:transform .2s ease;justify-self:center}
.bk-ch[open] summary::after{transform:rotate(-135deg)}
.bk-ch summary:hover{background:rgba(255,255,255,.02)}
.bk-ch summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.bk-n{font-size:22px;color:var(--accent)}
.bk-essay .bk-n{font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.bk-t{display:flex;flex-direction:column;gap:4px;min-width:0}
.bk-t b{font-family:var(--display);font-size:clamp(17px,1.8vw,20px);font-weight:700;color:var(--white)}
.bk-t span{font-size:13.5px;color:var(--steel);line-height:1.5}
.bk-c{font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);white-space:nowrap}
.bk-subs{list-style:none;margin:0 0 22px 82px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 28px}
.bk-subs li{display:flex;align-items:baseline;gap:12px;padding:9px 0;border-top:1px solid var(--rule);font-size:14px;color:var(--platinum);flex-wrap:wrap}
.bk-ref{flex:0 0 38px;font-size:12px;color:var(--accent-dim)}
.bk-tool{margin-left:auto;font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);border:1px solid rgba(61,245,160,.35);padding:2px 7px}
.bk-tool:hover{background:rgba(61,245,160,.08)}
@media(max-width:760px){.bk-ch summary{grid-template-columns:44px minmax(0,1fr) 16px;gap:12px}.bk-c{display:none}.bk-subs{margin-left:0;grid-template-columns:1fr}}
/* Where the book lives on this site */
.bk-maps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:30px}
.bk-map{display:flex;flex-direction:column;gap:8px;background:var(--panel-deep);padding:20px;color:inherit;position:relative;transition:background .2s ease}
.bk-map:hover{background:var(--panel)}
.bk-map .bk-map-ref{font-size:12px;color:var(--ink);background:var(--accent);align-self:flex-start;padding:2px 8px}
.bk-map b{font-family:var(--display);font-size:16px;color:var(--white)}
.bk-map span{font-size:13.5px;line-height:1.6;color:var(--steel)}
.bk-map em{margin-top:auto;padding-top:6px;font-style:normal;font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.bk-map em::after{content:' \2192'}
@media(max-width:900px){.bk-maps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.bk-maps{grid-template-columns:1fr}}
/* Acclaim */
.bk-acclaim{display:flex;flex-direction:column;gap:16px;margin-top:24px}
.bk-acclaim figure{margin:0;padding:16px 18px;border:1px solid var(--rule);background:var(--ink)}
.bk-acclaim blockquote{margin:0;font-size:15px;line-height:1.6;color:var(--platinum)}
.bk-acclaim figcaption{margin-top:10px;font-size:12.5px;color:var(--steel)}
.bk-acclaim figcaption b{display:block;color:var(--white);font-family:var(--display);font-size:13px}
/* Editions */
.bk-timeline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:30px;position:relative}
.bk-timeline::before{content:'';position:absolute;top:13px;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--rule),var(--accent))}
.bk-ed{position:relative;padding-top:40px}
.bk-ed::before{content:'';position:absolute;top:7px;left:0;width:13px;height:13px;background:var(--ink);border:1px solid var(--platinum);transform:rotate(45deg)}
.bk-ed-now::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 6px rgba(61,245,160,.12)}
.bk-ed-y{font-size:13px;color:var(--accent)}
.bk-ed h3{font-size:18px;margin:6px 0 8px}
.bk-ed p{font-size:14px;line-height:1.65;color:var(--steel);margin:0 0 8px}
@media(max-width:760px){.bk-timeline{grid-template-columns:1fr}.bk-timeline::before{top:0;bottom:0;left:6px;right:auto;width:1px;height:auto}.bk-ed{padding:0 0 0 34px}.bk-ed::before{top:4px}}
.bk-specs{margin:24px 0 0;border-top:1px solid var(--rule)}
.bk-specs > div{display:grid;grid-template-columns:120px minmax(0,1fr);gap:14px;padding:11px 0;border-bottom:1px solid var(--rule)}
.bk-specs dt{font-family:var(--display);font-size:10px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--steel);padding-top:3px}
.bk-specs dd{margin:0;font-size:14px;color:var(--white)}
.bk-two .retailers{margin-top:24px}

/* The Brand Audit result: the plan from ISIA, by time frame */
.ap-plan-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:20px}
.ap-plan-col{background:var(--panel-deep);padding:18px 18px 8px}
.ap-plan-col > .lbl{color:var(--accent);margin-bottom:12px}
.ap-plan-item{padding:0 0 14px;margin:0 0 14px;border-bottom:1px solid var(--rule)}
.ap-plan-item:last-child{border-bottom:0;margin-bottom:0}
.ap-plan-item b{display:block;font-family:var(--display);font-size:14.5px;color:var(--white);margin-bottom:6px}
.ap-plan-item p{font-size:14px;line-height:1.6;color:var(--platinum);margin:0 0 6px}
.ap-plan-habits{margin-top:18px}
.ap-plan-habits ul{margin:10px 0 0;padding-left:18px;color:var(--platinum);font-size:14.5px;line-height:1.8}

/* ------------------------------------------------------------- /f/<slug>
   Funnels (funnel-app.js). Each funnel sets its own accent (--fn-accent),
   ground (dark or light), alignment, width, and button style. */
.fn-root{--fn-accent:#3DF5A0;--fn-bg:#0A0A0A;--fn-panel:#131316;--fn-ink:#FFFFFF;--fn-body:#C8C5BE;--fn-dim:#8E8B84;--fn-line:#26262A;--fn-on-accent:#0A0A0A;
  background:var(--fn-bg);color:var(--fn-ink);min-height:calc(100vh - 80px)}
.fn-root[data-ground="light"]{--fn-bg:#F6F5F1;--fn-panel:#FFFFFF;--fn-ink:#0A0A0A;--fn-body:#2E2E33;--fn-dim:#5E5C57;--fn-line:#DDDAD2}
.fn-preview{background:#E2A04C;color:#0A0A0A;text-align:center;font-size:13px;font-weight:600;padding:9px 16px}
.fn-wrap{max-width:760px;margin:0 auto;padding:clamp(28px,5vw,56px) var(--gut) clamp(48px,7vw,88px)}
.fn-root[data-width="wide"] .fn-wrap{max-width:1040px}
.fn-root[data-align="center"] .fn-main{text-align:center}
.fn-root[data-align="center"] .fn-buttons{justify-content:center}
.fn-root[data-align="center"] .fn-bullets ul,.fn-root[data-align="center"] .fn-form{text-align:left;margin-left:auto;margin-right:auto}
.fn-brand{display:flex;align-items:center;gap:12px;margin:0 0 clamp(32px,5vw,56px);font-family:var(--display);font-weight:700;font-size:15px}
.fn-root[data-align="center"] .fn-brand{justify-content:center}
.fn-root[data-ground="light"] .fn-brand img{filter:invert(1)}
.fn-brand img{display:block;height:28px;width:auto}
.fn-main > * + *{margin-top:clamp(22px,3vw,32px)}
.fn-eyebrow{font-family:var(--display);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase;color:var(--fn-accent);margin:0 0 14px}
.fn-root[data-ground="light"] .fn-eyebrow{color:var(--fn-ink)}
.fn-hero h1,.fn-main > h1{font-family:var(--display);font-size:clamp(34px,5.4vw,58px);font-weight:800;line-height:1.05;letter-spacing:-.02em;margin:0;color:var(--fn-ink)}
.fn-lead{margin-top:18px;font-size:clamp(17px,1.8vw,20px);line-height:1.6;color:var(--fn-body)}
.fn-lead p,.fn-text p{margin:0 0 14px}
.fn-lead p:last-child,.fn-text p:last-child{margin-bottom:0}
.fn-h{font-family:var(--display);font-size:clamp(24px,3.2vw,34px);font-weight:800;line-height:1.15;margin:clamp(36px,5vw,52px) 0 0;color:var(--fn-ink)}
.fn-text{font-size:17px;line-height:1.75;color:var(--fn-body)}
.fn-rule{border:0;border-top:1px solid var(--fn-line);margin:clamp(34px,5vw,50px) 0}
.fn-quote{margin-left:0;margin-right:0;padding:6px 0 6px 22px;border-left:2px solid var(--fn-accent)}
.fn-root[data-align="center"] .fn-quote{border-left:0;padding-left:0}
.fn-quote blockquote{margin:0;font-family:var(--display);font-size:clamp(19px,2.2vw,24px);font-weight:600;line-height:1.4;color:var(--fn-ink)}
.fn-quote figcaption{margin-top:10px;font-size:14px;color:var(--fn-dim)}
.fn-bullets h3{font-family:var(--display);font-size:18px;margin:0 0 12px;color:var(--fn-ink)}
.fn-bullets ul{list-style:none;margin:0;padding:0;max-width:620px}
.fn-bullets li{position:relative;padding:10px 0 10px 28px;border-top:1px solid var(--fn-line);font-size:16.5px;line-height:1.6;color:var(--fn-body)}
.fn-bullets li::before{content:'';position:absolute;left:4px;top:19px;width:8px;height:8px;background:var(--fn-accent);transform:rotate(45deg)}
.fn-video{margin:0}
.fn-video video{display:block;width:100%;aspect-ratio:16/9;background:#000;border:1px solid var(--fn-line)}
.fn-video figcaption{margin-top:10px;font-size:14px;color:var(--fn-dim)}
.fn-buttons{display:flex;flex-wrap:wrap;gap:12px}
.fn-btn{display:inline-flex;align-items:center;justify-content:center;padding:15px 26px;font-family:var(--display);font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;border:1px solid var(--fn-accent);cursor:pointer;transition:filter .18s ease,background .18s ease,color .18s ease}
.fn-btn.is-primary{background:var(--fn-accent);color:var(--fn-on-accent)}
.fn-btn.is-primary:hover{filter:brightness(1.08)}
.fn-root[data-buttons="outline"] .fn-btn.is-primary{background:transparent;color:var(--fn-ink)}
.fn-root[data-buttons="outline"] .fn-btn.is-primary:hover{background:var(--fn-accent);color:var(--fn-on-accent)}
.fn-btn.is-secondary{background:transparent;color:var(--fn-ink);border-color:var(--fn-line)}
.fn-btn.is-secondary:hover{border-color:var(--fn-accent)}
.fn-btn:focus-visible{outline:2px solid var(--fn-accent);outline-offset:3px}
.fn-btn[disabled]{opacity:.6;cursor:progress}
.fn-capture{scroll-margin-top:24px;padding:clamp(22px,3vw,32px);border:1px solid var(--fn-line);border-top:2px solid var(--fn-accent);background:var(--fn-panel)}
.fn-capture h2{font-family:var(--display);font-size:clamp(22px,2.8vw,28px);font-weight:800;margin:0 0 10px;color:var(--fn-ink)}
.fn-form{display:flex;flex-direction:column;gap:8px;margin-top:16px;max-width:520px}
.fn-label{font-family:var(--display);font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--fn-dim);margin-top:8px}
.fn-form input,.fn-form textarea{width:100%;box-sizing:border-box;padding:13px 14px;font:inherit;font-size:16px;color:var(--fn-ink);background:var(--fn-bg);border:1px solid var(--fn-line);border-radius:0}
.fn-form input:focus,.fn-form textarea:focus{outline:none;border-color:var(--fn-accent)}
.fn-form .fn-btn{margin-top:14px;width:100%}
.fn-check{display:flex;gap:10px;align-items:flex-start;margin-top:12px;font-size:14px;line-height:1.5;color:var(--fn-body);cursor:pointer}
.fn-check input{width:18px;height:18px;margin-top:2px;flex:none;accent-color:var(--fn-accent)}
.fn-error{min-height:1.2em;margin:6px 0 0;color:#E8734A;font-size:14px;font-weight:600}
.fn-fine{margin:10px 0 0;font-size:12.5px;line-height:1.55;color:var(--fn-dim)}
.fn-hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
@media(max-width:560px){.fn-buttons .fn-btn{flex:1 1 100%}}

/* /respond/: a video inside a form, and a form's own confirmation */
.form-video{margin:22px 0}
.form-video video{display:block;width:100%;aspect-ratio:16/9;background:#000;border:1px solid var(--rule)}
.form-video figcaption{margin-top:8px;font-size:14px;color:var(--steel)}
.form-code-note{margin:6px 0 0;font-size:13px;color:var(--steel)}

/* A link that opens a new tab says so: the arrow, and "(opens in a new tab)" for screen readers. */
.ext{display:inline-block; margin-left:3px; font-size:.85em; opacity:.7; text-decoration:none;}

/* ---- interactive pieces (interact.js). Each starts hidden or plain and is
   switched on by the script, so the page reads in full without it. ---- */
.sc[hidden],.tp[hidden],.bd[hidden],.fl-bar[hidden],.gl-bar[hidden],.gl-none[hidden],
.gl-term[hidden],.rf[hidden],[data-filter-list] .tl-card[hidden],.px-panel[hidden]{display:none}
.chip{font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  background:transparent;color:var(--platinum);border:1px solid var(--rule);padding:9px 14px;line-height:1.2;
  transition:border-color .18s ease,color .18s ease,background .18s ease}
.chip:hover{border-color:var(--platinum);color:var(--white)}
.chip[aria-pressed="true"]{border-color:var(--accent);color:var(--accent);background:rgba(61,245,160,.06)}
.fl-bar{display:flex;flex-wrap:wrap;gap:8px;margin-top:28px}
.fl-bar + .tl-grid{margin-top:20px}
[data-filter-list] .tl-grid{background:transparent;border:0;padding:1px;gap:1px}
[data-filter-list] .tl-card{box-shadow:0 0 0 1px var(--rule)}
a.ul{color:var(--white);text-decoration:underline;text-decoration-color:rgba(61,245,160,.6);text-underline-offset:3px}
a.ul:hover{text-decoration-color:var(--accent)}

/* on this page: chips that follow the section being read */
.snav{position:sticky;top:0;z-index:30;background:rgba(10,10,10,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-bottom:1px solid var(--rule)}
.snav .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none;padding-top:10px;padding-bottom:10px}
.snav .wrap::-webkit-scrollbar{display:none}
.snav a{flex:none;font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--steel);padding:8px 12px;border:1px solid transparent;transition:color .18s ease,border-color .18s ease}
.snav a:hover{color:var(--white)}
.snav a[aria-current="true"]{color:var(--accent);border-color:rgba(61,245,160,.45)}
.wk section[id]{scroll-margin-top:var(--snav-top,130px)}
.wk .term{scroll-margin-top:var(--snav-top,130px)}

.wk-stats{display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:34px}
.wk-stats p{margin:0;display:flex;flex-direction:column}
.wk-stats b{font-size:34px;font-weight:500;color:var(--white);line-height:1.1}
.wk-stats span{font-family:var(--display);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--steel);margin-top:6px}

/* the self-check */
.sc{background:var(--panel-deep);border:1px solid var(--rule);padding:8px 24px 24px}
.sc form{margin:0}
.sc-item{border:0;border-bottom:1px solid var(--rule);margin:0;padding:18px 0}
.sc-item legend{padding:0;font-size:14.5px;line-height:1.55;color:var(--white);font-weight:400;float:left;width:100%;margin-bottom:12px}
.sc-opts{clear:both;display:flex;flex-wrap:wrap;gap:8px}
.sc-opt{position:relative;cursor:pointer}
.sc-opt input{position:absolute;opacity:0;width:1px;height:1px}
.sc-opt span{display:inline-block;font-family:var(--display);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--platinum);border:1px solid var(--rule);padding:8px 14px;transition:border-color .18s ease,color .18s ease,background .18s ease}
.sc-opt:hover span{border-color:var(--platinum)}
.sc-opt input:checked + span{border-color:var(--accent);color:var(--accent);background:rgba(61,245,160,.06)}
.sc-opt input:focus-visible + span{outline:2px solid var(--platinum);outline-offset:3px}
.sc-out{margin-top:20px}
.sc-hint{color:var(--steel);font-size:14px;margin:0}
.sc-card{border-left:3px solid var(--accent);padding:4px 0 4px 18px;animation:ix-up .35s ease}
.sc-k{font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--accent);margin-bottom:10px}
.sc-t{font-size:14.5px;color:var(--platinum);line-height:1.65;margin-bottom:12px}
.sc-t b{color:var(--white);font-weight:600}
.sc-note{font-size:13px;color:var(--graphite);margin:6px 0 16px}

/* the 4 Pillar Questions */
.pq{list-style:none;padding:0;margin:40px 0 0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.pq li{background:var(--panel-deep);padding:28px 24px;transition:background .2s ease}
.pq li:hover{background:var(--panel)}
.pq .num{font-size:12px;color:var(--accent)}
.pq h3{font-size:18px;margin:14px 0 10px}
.pq p{font-size:14px;color:var(--steel);line-height:1.65;margin:0}
@media(max-width:1040px){.pq{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.pq{grid-template-columns:1fr}}

/* the Five Pillars as tabs */
.px{margin-top:40px}
.px-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.px-pick{background:var(--ink);padding:18px 18px 16px;display:flex;flex-direction:column;gap:8px;color:var(--white);position:relative;transition:background .2s ease}
.px-pick:hover{background:var(--panel)}
.px-pick b{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:-.01em;line-height:1.25;min-height:2.5em}
.px-o{font-size:11px;color:var(--steel)}
.px-w,.pw{display:block;height:4px;background:var(--rule);overflow:hidden}
.px-w i,.pw i{display:block;height:100%;width:100%;background:var(--accent);transform-origin:left;transform:scaleX(var(--w,1));transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.px-wn{font-size:11.5px;color:var(--steel)}
.px-on .px-pick[aria-selected="true"]{background:var(--panel)}
.px-on .px-pick[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent)}
.px-on .px-pick[aria-selected="true"] .px-o{color:var(--accent)}
.px-panels{border:1px solid var(--rule);border-top:0}
.px-panel{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:48px;padding:34px 30px;background:var(--panel-deep);scroll-margin-top:var(--snav-top,130px)}
.px-panel + .px-panel{border-top:1px solid var(--rule)}
.px-on .px-panel{animation:ix-fade .3s ease}
.px-panel h3{font-size:28px;margin:12px 0 14px}
.px-thesis{font-size:16px;color:var(--platinum);line-height:1.7}
.px-tools{font-size:14.5px;color:var(--steel)}
.px-dims ol{list-style:none;padding:0;margin:16px 0 14px;counter-reset:dim}
.px-dims li{display:grid;grid-template-columns:minmax(0,1fr) 90px 44px;gap:14px;align-items:center;padding:11px 0;border-bottom:1px solid var(--rule);font-size:14px}
.px-dn{color:var(--white)}
.px-dw{height:4px;background:var(--rule);overflow:hidden}
.px-dw i{display:block;height:100%;background:var(--accent-dim);transform-origin:left;transform:scaleX(var(--w,1))}
.px-dv{font-size:12px;color:var(--steel);text-align:right}
.ix .px:not(.is-in) .px-w i{transform:scaleX(0)}
@media(max-width:900px){
  .px-row{grid-template-columns:1fr}
  .px-pick{display:grid;grid-template-columns:28px minmax(0,1fr) 64px 34px;align-items:center;gap:12px;padding:14px 16px}
  .px-pick b{min-height:0;font-size:14.5px}
  .px-wl{display:none}
  .px-wn{text-align:right}
  .px-on .px-pick[aria-selected="true"]::after{left:0;right:auto;top:0;bottom:0;width:3px;height:auto}
  .px-panel{grid-template-columns:1fr;gap:26px;padding:28px 22px}
}

/* the Hierarchy: now and aiming */
.tp{margin-top:30px}
.tp-row{margin-bottom:16px}
.tp-label{font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--platinum);margin-bottom:10px}
.tp-chips{display:flex;flex-wrap:wrap;gap:6px}
.tp-chip{background:transparent;color:var(--platinum);border:1px solid var(--rule);padding:7px 11px;font-size:12.5px;line-height:1.3;text-align:left;transition:border-color .18s ease,color .18s ease,background .18s ease}
.tp-chip .num{color:var(--steel);font-size:11px;margin-right:2px}
.tp-chip:hover{border-color:var(--platinum);color:var(--white)}
.tp-chip[aria-pressed="true"]{border-color:var(--accent);color:var(--white);background:rgba(61,245,160,.06)}
.tp-chip[aria-pressed="true"] .num{color:var(--accent)}
.tp-out{margin-top:20px}
.tp-hint{font-size:14px;color:var(--steel);margin:0}
.tp-card{border:1px solid var(--rule);border-left:3px solid var(--accent);background:var(--panel-deep);padding:18px 20px;animation:ix-up .3s ease}
.band.alt .tp-card{background:var(--ink)}
.tp-k{font-family:var(--mono);font-size:11.5px;color:var(--accent);margin:0 0 6px}
.tp-name{font-family:var(--display);font-weight:600;font-size:20px;margin:0 0 6px}
.tp-desc,.tp-next{font-size:14px;color:var(--platinum);line-height:1.65;margin:0 0 10px}
.tp-floor{font-family:var(--mono);font-size:12px;color:var(--steel);margin:0 0 10px}
.tp-note{font-size:13px;color:var(--graphite);margin:0}
.tier-row,.tiers tr{transition:background .25s ease,box-shadow .25s ease}
.tier-row.is-now,.tiers tr.is-now{box-shadow:inset 3px 0 0 var(--accent);background:rgba(61,245,160,.05)}
.tier-row.is-aim,.tiers tr.is-aim{box-shadow:inset 3px 0 0 var(--platinum);background:rgba(255,255,255,.04)}
.tier-row.is-between,.tiers tr.is-between{box-shadow:inset 3px 0 0 var(--rule)}
.tiers tr.is-now td:first-child,.tiers tr.is-aim td:first-child{padding-left:12px}
.tier-list{margin-top:0}
@media(min-width:821px){.wk #start .two > div:first-child{position:sticky;top:var(--snav-top,130px)}}

/* the band dial */
.bd{margin-top:36px;border:1px solid var(--rule);background:var(--panel-deep);padding:26px 26px 24px}
.bd-scale{position:relative;display:flex;gap:2px;height:36px}
.bd-seg{flex:var(--w) 1 0;background:var(--panel);color:var(--steel);font-family:var(--display);font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;overflow:hidden;white-space:nowrap;transition:background .25s ease,color .25s ease}
.bd-seg.on{background:rgba(61,245,160,.16);color:var(--accent)}
.bd-pin{position:absolute;top:-6px;bottom:-6px;width:2px;margin-left:-1px;background:var(--white);transition:left .15s ease;pointer-events:none}
.bd.is-capped .bd-pin{background:#F2726A}
.bd-ctrl{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:20px;align-items:center;margin-top:22px}
.bd-ctrl label{font-size:14px;color:var(--platinum);white-space:nowrap}
.bd-score{color:var(--white);font-size:15px}
.bd input[type="range"]{padding:0;border:0;background:transparent;accent-color:var(--accent);height:28px;overflow:visible}
.bd-capq{display:flex;align-items:center;gap:9px;cursor:pointer}
.bd-capq input{width:auto;accent-color:#F2726A}
.bd-capq span{white-space:normal;font-size:13px;color:var(--steel)}
.bd-out{margin-top:20px;border-top:1px solid var(--rule);padding-top:18px;min-height:96px}
.bd-label{font-family:var(--display);font-weight:600;font-size:20px;margin:0 0 6px}
.bd-sum{font-size:14.5px;color:var(--platinum);margin:0 0 8px;max-width:70ch}
.bd-cap{font-size:13.5px;color:#F2726A;margin:0;max-width:70ch}
@media(max-width:760px){.bd-ctrl{grid-template-columns:1fr;gap:12px}.bd-seg{font-size:0}.bd-seg.on{font-size:9px}}
.bd-cards{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:26px}
.bd-card{background:var(--ink);padding:22px 20px;border-top:3px solid transparent;transition:border-color .25s ease,background .25s ease}
.bd-card h3{font-size:17px;margin:8px 0 8px}
.bd-card p{font-size:13.5px;color:var(--steel);line-height:1.6;margin:0}
.bd-card.on{border-top-color:var(--accent);background:var(--panel)}
@media(max-width:1040px){.bd-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.bd-cards{grid-template-columns:1fr}}
.cap-note{margin-top:26px;border-left:3px solid #F2726A;padding:4px 0 4px 20px;max-width:78ch}
.cap-note p:last-child{font-size:14.5px;color:var(--platinum);margin:8px 0 0}

/* verification levels */
.vl{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule);margin-top:40px}
.vl-card{background:var(--panel-deep);padding:26px 22px}
.vl-card h3{font-size:18px;margin:12px 0 10px}
.vl-card p{font-size:14px;color:var(--steel);line-height:1.65}
.vl-card p.fine{font-size:13px;margin:0}
.vl-conf{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:12px;color:var(--accent);margin:0}
.vl-meter{display:inline-flex;gap:3px}
.vl-meter i{width:14px;height:6px;background:var(--rule)}
.vl-meter i.on{background:var(--accent)}
@media(max-width:1040px){.vl{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.vl{grid-template-columns:1fr}}

/* risk flags */
.rfs{list-style:none;padding:0;margin:22px 0 0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;padding:1px}
.rf{background:var(--ink);box-shadow:0 0 0 1px var(--rule);padding:22px 22px 18px;display:grid;grid-template-columns:78px minmax(0,1fr);gap:16px;animation:ix-fade .25s ease}
.rf b{font-family:var(--display);font-weight:600;font-size:15.5px}
.rf p{font-size:14px;color:var(--steel);line-height:1.6;margin:6px 0 0}
.rf p.fine{font-size:12.5px}
.rf-sev{align-self:start;font-family:var(--display);font-size:9.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;padding:5px 7px;border:1px solid;text-align:center}
.rf-critical{color:#F2726A;border-color:rgba(242,114,106,.55)}
.rf-high{color:#F3C228;border-color:rgba(243,194,40,.5)}
.rf-medium{color:var(--platinum);border-color:var(--rule)}
@media(max-width:820px){.rfs{grid-template-columns:1fr}}

/* the glossary */
.gl-bar{display:grid;grid-template-columns:minmax(220px,340px) minmax(0,1fr) auto;gap:14px 18px;align-items:center;margin-top:30px}
.gl-bar input{padding:11px 13px}
.gl-chips{display:flex;flex-wrap:wrap;gap:6px}
.gl-count{font-size:12px;color:var(--steel);margin:0;white-space:nowrap}
@media(max-width:900px){.gl-bar{grid-template-columns:1fr}}
.gl-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;padding:1px;margin:22px 0 0}
.gl-term{background:var(--ink);box-shadow:0 0 0 1px var(--rule);padding:22px 22px 18px;scroll-margin-top:var(--snav-top,130px)}
.gl-term dt{font-size:16.5px;margin-bottom:8px}
.gl-term dd{margin:0}
.gl-term p{font-size:14px;color:var(--steel);line-height:1.65;margin:0 0 10px}
.gl-cat{font-family:var(--display);font-size:9.5px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--graphite)}
.gl-term:target{box-shadow:inset 3px 0 0 var(--accent)}
.gl-none{margin-top:18px;color:var(--steel);font-size:14px}
@media(max-width:820px){.gl-list{grid-template-columns:1fr}}

/* home: each pillar's weight and a way in */
.pillar{display:flex;flex-direction:column}
.pillar > p:first-of-type{flex:1}
.pillar .pw{margin-top:20px}
.pillar .pw-n{font-size:12px;color:var(--steel);margin:8px 0 12px}
.pw-n .num{color:var(--white)}
.pillar-more{font-family:var(--display);font-size:10.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--platinum);align-self:flex-start;border-bottom:1px solid transparent;transition:color .18s ease,border-color .18s ease}
.pillar-more:hover{color:var(--accent);border-color:var(--accent)}
.js-reveal .pillars.reveal:not(.in) .pw i{transform:scaleX(0)}

@keyframes ix-up{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes ix-fade{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){
  .sc-card,.tp-card,.px-on .px-panel,.rf{animation:none}
  .px-w i,.pw i,.bd-pin{transition:none}
}
.ap-wiki-link{display:block;margin-top:10px;font-weight:600;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.iqp-dl{margin:0 0 10px;padding-left:18px}.iqp-dl li{margin:4px 0}.iqp-dl a{color:var(--iq-gold-txt)}
#media-kit .iqp-lessons a{color:var(--iq-gold-txt)}

/* Accessibility (October 9, 2026): links inside running text are underlined, not told apart by colour alone. */
main p a:not([class]){text-decoration:underline;text-underline-offset:3px}
.tl-when dt,.tl-when dd{display:inline;margin:0;font:inherit;color:inherit}