/* Layout: a storyboard drawn as a set of construction-document sheets.
   Large current sheet + notes column, title block under it, filmstrip of all sheets below.
   Deliberately one light "drawing paper" world, so every colour is set explicitly. */
:root{
  --paper:#F4F6F8; --sheet:#FCFDFE; --ink:#1B3FA8; --navy:#0B1D3A; --brass:#B08A3E; --gold:#C9A24A;
  --slate:#4B5263; --mist:#A9B4CC; --rule:#D9DEE8; --rule-2:#C3CBDA; --wash:#E8EDF7;
  --f-display:"Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-body:"Inter", "Helvetica Neue", Arial, system-ui, sans-serif;
  --f-mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  color-scheme:light;
}
*{box-sizing:border-box}
body{background:var(--paper);color:var(--navy);font-family:var(--f-body);font-size:15px;line-height:1.55;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:22px 56px}
.wrap{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
.wrap > *{min-width:0}
header.top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-bottom:1px solid var(--rule-2);padding-bottom:14px}
.logo{display:flex;align-items:center;gap:16px}
.logo svg{height:clamp(76px,10vw,128px);width:auto}
.logo .tag{font:600 10.5px/1 var(--f-body);letter-spacing:.42em;color:var(--slate);text-transform:uppercase;border-left:1px solid var(--rule-2);padding-left:16px}
.doc-id{font:500 11.5px/1.4 var(--f-mono);color:var(--slate);text-align:right}
.menu{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.menu a{color:var(--navy);text-decoration:none;font:500 14px/1 var(--f-body)}
.menu a:not(.btn):hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
a.logo{text-decoration:none;color:inherit}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:600 14px/1 var(--f-body);padding:11px 16px;border:1px solid var(--navy);color:var(--navy);background:transparent;text-decoration:none;cursor:pointer}
.btn.primary{background:var(--navy);color:#fff}
.btn.primary:hover{background:var(--ink);border-color:var(--ink)}
.btn:not(.primary):hover{background:#fff}
.btn.big{padding:15px 20px;font-size:15px}
.menu a.btn.primary{color:#fff}
a:focus-visible,.btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.eyebrow{display:block;font:500 12px/1.3 var(--f-mono);color:var(--brass);letter-spacing:.06em;text-transform:uppercase}
.intro{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:40px;align-items:end;padding-block:18px 8px}
.intro-copy{display:grid;gap:16px}
.ctas{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.proofs{list-style:none;margin:0;padding:0;display:grid;border-top:2px solid var(--navy)}
.proofs li{display:grid;gap:2px;padding:12px 0;border-bottom:1px solid var(--rule-2)}
.proofs b{font:650 16px/1.2 var(--f-display);font-stretch:95%}
.proofs span{color:var(--slate);font-size:14px}
.minibar{position:fixed;inset:0 0 auto;z-index:20;background:rgba(252,253,254,.96);border-bottom:1px solid var(--rule-2);transform:translateY(-110%);transition:transform .25s ease;padding-top:env(safe-area-inset-top,0px);padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.minibar.on{transform:none}
.minibar-in{max-width:1200px;margin:0 auto;display:flex;align-items:center;gap:16px;padding-block:8px}
.logo-sm svg{height:34px;width:auto;display:block}
.mb-links{display:flex;gap:18px;margin-right:auto;margin-left:8px}
.mb-links a{color:var(--navy);text-decoration:none;font:500 13.5px var(--f-body)}
.mb-links a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.bridge{margin:40px 0 0;padding:26px 0;border-top:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);font:500 clamp(20px,2.4vw,28px)/1.3 var(--f-display);font-stretch:95%;max-width:900px;text-wrap:balance}
.bridge span{color:var(--slate)}
.sec-head{display:grid;gap:8px;max-width:760px}
.sec-head h2{font:650 clamp(24px,3vw,36px)/1.08 var(--f-display);font-stretch:90%;margin:0;letter-spacing:-.01em;text-wrap:balance}
.sec-head p{margin:0;color:var(--slate);font-size:16px;max-width:62ch}
.sec{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;padding-top:44px;border-top:1px solid var(--rule-2);margin-top:12px}
.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--rule-2);border-left:1px solid var(--rule-2)}
.tile{display:grid;gap:6px;align-content:start;padding:18px;border-right:1px solid var(--rule-2);border-bottom:1px solid var(--rule-2);text-decoration:none;color:var(--navy);background:var(--sheet);min-width:0}
.tile:hover{background:#fff}
.tile:hover h3{color:var(--ink)}
.tile .tn{font:500 11.5px var(--f-mono);color:var(--brass)}
.tile h3{margin:0;font:650 19px/1.15 var(--f-display);font-stretch:92%}
.tile p{margin:0;color:var(--slate);font-size:14.5px}
.tile.home{background:var(--wash)}
.rules{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
.rules div{border-top:2px solid var(--navy);padding-top:12px;display:grid;gap:6px;align-content:start;min-width:0}
.rules h3{margin:0;font:650 17px/1.2 var(--f-display);font-stretch:95%}
.rules p{margin:0;color:var(--slate);font-size:14.5px}
.about-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:start}
.about-grid > p{margin:0;font-size:17px;line-height:1.6;max-width:62ch}
.facts{margin:0;display:grid;border-top:2px solid var(--navy)}
.facts div{display:grid;grid-template-columns:110px minmax(0,1fr);gap:10px;padding:10px 0;border-bottom:1px solid var(--rule-2)}
.facts dt{font:600 9.5px/1.6 var(--f-display);font-stretch:110%;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.facts dd{margin:0;font:500 13.5px/1.45 var(--f-mono)}
.book{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start;background:var(--navy);color:#fff;border:0;padding:36px;margin-top:40px}
.book h2{color:#fff;font:650 clamp(24px,3vw,36px)/1.08 var(--f-display);font-stretch:90%;margin:8px 0 10px}
.book p{color:#C9D2E4;margin:0;font-size:16px}
.book .eyebrow{color:var(--gold)}
.book-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;min-width:0}
.book-form .f{display:grid;gap:6px;min-width:0}
.book-form label{font:600 9.5px/1.2 var(--f-display);font-stretch:110%;letter-spacing:.14em;text-transform:uppercase;color:#C9D2E4}
.book-form input,.book-form select{min-width:0;max-width:100%;font:500 15px var(--f-body);padding:11px 12px;border:1px solid #3A4E78;background:#0F2547;color:#fff;width:100%}
.book-form input:focus-visible,.book-form select:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.book-form .btn.primary{grid-column:1/-1;background:var(--gold);border-color:var(--gold);color:var(--navy)}
.book-form .btn.primary:hover{background:#fff;border-color:#fff}
.form-msg{grid-column:1/-1;min-height:1.4em;font:500 13px var(--f-mono);color:var(--gold)!important}
.site-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px 40px;align-items:start;padding-top:28px;border-top:1px solid var(--rule-2)}
.site-foot svg{height:56px;width:auto;display:block}
.site-foot p{margin:6px 0 0;color:var(--slate);font-size:13.5px}
.site-foot nav{display:flex;gap:18px;flex-wrap:wrap}
.site-foot nav a{color:var(--navy);font-size:14px}
.site-foot .copy{grid-column:1/-1;font:500 12px var(--f-mono)}
.watch{font:500 13.5px var(--f-mono);color:var(--ink);text-decoration:none;justify-self:start}
.watch:hover{text-decoration:underline;text-underline-offset:4px}
.tile .more{font:500 12px var(--f-mono);color:var(--ink);margin-top:6px}
.tile.on{background:#fff;box-shadow:inset 0 -3px 0 var(--brass)}
.ind-panel:empty{display:none}
.ind-panel{border:1px solid var(--rule-2);border-top:0;background:#fff;padding:22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px;margin-top:-22px}
.ind-panel h3{grid-column:1/-1;margin:0;font:650 22px/1.1 var(--f-display);font-stretch:90%}
.ind-panel h4{margin:0 0 8px;font:600 9.5px/1.2 var(--f-display);font-stretch:110%;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.ind-panel ul{margin:0;padding-left:18px;color:var(--navy);font-size:14.5px;display:grid;gap:4px}
.ind-panel .subj{font:500 14px/1.5 var(--f-mono);color:var(--brass)}
.ind-panel .btn{grid-column:1/-1;justify-self:start}
.ind-panel .seo{grid-column:1/-1;margin:0;color:var(--slate);font-size:12.5px}
.tbc{font:500 12px/1.4 var(--f-mono)!important;color:var(--brass)!important;border:1px dashed var(--brass);padding:6px 9px;margin:0;justify-self:start;display:inline-block}
.report{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start;background:var(--wash);border:1px solid var(--rule-2);padding:36px}
.report h2{font:650 clamp(24px,3vw,36px)/1.08 var(--f-display);font-stretch:90%;margin:8px 0 10px}
.report-copy{display:grid;gap:12px;align-content:start}
.report-copy p{margin:0;color:var(--slate);font-size:16px}
.ticks{margin:0;padding:0;list-style:none;display:grid;gap:6px}
.ticks li{padding-left:22px;position:relative}
.ticks li::before{content:"";position:absolute;left:2px;top:.45em;width:9px;height:5px;border-left:2px solid var(--brass);border-bottom:2px solid var(--brass);transform:rotate(-45deg)}
.report-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-width:0;gap:14px;background:#fff;border:1px solid var(--rule-2);padding:20px}
.report-form .f{display:grid;gap:6px;min-width:0}
.report-form .wide{grid-column:1/-1}
.report-form label{font:600 9.5px/1.2 var(--f-display);font-stretch:110%;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.report-form input,.report-form select{min-width:0;max-width:100%;font:500 15px var(--f-body);padding:11px 12px;border:1px solid var(--rule-2);background:var(--sheet);color:var(--navy);width:100%}
.report-form input:focus-visible,.report-form select:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.report-form .fine{margin:0;color:var(--slate);font-size:12.5px}
.report-form .form-msg{color:var(--ink)!important}
.stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--navy)}
.stats div{padding:16px 16px 16px 0;display:grid;gap:4px;border-bottom:1px solid var(--rule-2)}
.stats b{font:650 40px/1 var(--f-display);font-stretch:85%;font-variant-numeric:tabular-nums}
.stats .tbc-n{color:var(--mist)}
.stats span{color:var(--slate);font-size:14px}
.faq{display:grid;border-top:2px solid var(--navy);max-width:860px}
.qa{border-bottom:1px solid var(--rule-2)}
.qa summary{cursor:pointer;list-style:none;padding:16px 36px 16px 0;font:650 18px/1.3 var(--f-display);font-stretch:95%;position:relative}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:6px;top:14px;font:400 22px/1 var(--f-mono);color:var(--brass)}
.qa[open] summary::after{content:"–"}
.qa summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.qa p{margin:0 0 16px;color:var(--slate);max-width:68ch}
.id-issued{opacity:0;transition:opacity .5s}
.id-issued.on{opacity:1}
.intro h1{font:650 clamp(30px,4.2vw,52px)/1.02 var(--f-display);font-stretch:88%;letter-spacing:-.015em;margin:0;text-wrap:balance}
.intro p{margin:0;color:var(--slate);font-size:16.5px;max-width:52ch}

/* Board */
.board{display:grid;grid-template-columns:minmax(0,1fr) 330px;border:1px solid var(--rule-2);background:var(--sheet)}
.drawing{position:relative;border-right:1px solid var(--rule-2);min-width:0}
.drawing svg{display:block;width:100%;height:auto}
.titleblock{display:grid;grid-template-columns:1.3fr .7fr 1.1fr 1fr 112px;border-top:1px solid var(--rule-2)}
.keyplan svg{display:block;width:100%;height:auto;margin-top:3px}
.titleblock div{padding:8px 12px;border-left:1px solid var(--rule);min-width:0}
.titleblock div:first-child{border-left:0}
.titleblock span{display:block;font:600 9.5px/1.2 var(--f-display);font-stretch:110%;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.titleblock b{display:block;font:500 13px/1.35 var(--f-mono);color:var(--navy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.notes{display:flex;flex-direction:column;gap:18px;padding:22px 22px 18px;min-width:0}
.notes .num{font:500 12px/1 var(--f-mono);color:var(--brass);letter-spacing:.06em}
.notes h2{font:650 30px/1.05 var(--f-display);font-stretch:90%;margin:6px 0 0;letter-spacing:-.01em}
.notes p{margin:0;color:var(--slate);font-size:15.5px}
.later{align-self:flex-start;font:500 11.5px/1 var(--f-mono);color:var(--brass);border:1px dashed var(--brass);padding:6px 9px}
.sys{display:grid;gap:5px}
.sys span{font:600 9.5px/1.2 var(--f-display);font-stretch:110%;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.sys{opacity:.8}
.sys code{font:400 11.5px/1.5 var(--f-mono);color:var(--ink);padding:2px 0 2px 9px;border-left:1px solid var(--mist);overflow-wrap:anywhere}
.blink{animation:blinkc 1s steps(1) infinite}
@keyframes blinkc{50%{opacity:0}}
.pulse{fill:none;stroke:var(--brass);stroke-width:1.2;transform-box:fill-box;transform-origin:center;animation:pulse 2.2s ease-out infinite}
@keyframes pulse{from{transform:scale(1);opacity:.9}to{transform:scale(3.2);opacity:0}}
.role-rot{transform-box:fill-box;transform-origin:center}
.role-rot.flip{animation:flip .16s cubic-bezier(.6,0,.4,1) forwards}
@keyframes flip{to{transform:scaleY(0);opacity:.2}}
.var{fill:var(--ink)!important}
.scanline{fill:var(--brass);opacity:0}
.anim .scanline{animation:scan 1.6s cubic-bezier(.5,0,.5,1) forwards;animation-delay:1.3s}
@keyframes scan{0%{opacity:.0;transform:translateY(0)}10%{opacity:.55}90%{opacity:.35}100%{opacity:0;transform:translateY(438px)}}
.check{border-top:2px solid var(--navy);padding-top:10px;display:grid;gap:4px}
.check span{font:600 9.5px/1.2 var(--f-display);font-stretch:110%;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.check b{font:500 15px/1.45 var(--f-body);color:var(--navy)}
.try{display:grid;gap:6px}
.try label{font:600 9.5px/1.2 var(--f-display);font-stretch:110%;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.try input{font:500 15px var(--f-mono);border:1px solid var(--rule-2);background:#fff;color:var(--navy);padding:9px 10px;width:100%}
.try input:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.nav{margin-top:auto;display:flex;gap:8px;align-items:center}
.nav button{font:600 13px/1 var(--f-body);border:1px solid var(--rule-2);background:#fff;color:var(--navy);padding:10px 13px;cursor:pointer}
.nav button.primary{background:var(--navy);border-color:var(--navy);color:#fff}
.nav .count{margin-left:auto;font:500 12px var(--f-mono);color:var(--slate);font-variant-numeric:tabular-nums}
button:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* Filmstrip */
.strip-wrap{overflow-x:auto}
.strip{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(9,minmax(112px,1fr));gap:10px;min-width:1060px}
.strip button{display:grid;gap:6px;text-align:left;background:none;border:0;padding:0;cursor:pointer;color:var(--slate);width:100%}
.strip .thumb{border:1px solid var(--rule-2);background:var(--sheet);position:relative;overflow:hidden}
.strip .thumb svg{display:block;width:100%;height:auto}
.strip .thumb i{position:absolute;left:0;bottom:0;height:3px;width:0;background:var(--brass)}
.strip .cap{font:500 11.5px/1.25 var(--f-mono);display:flex;gap:6px}
.strip .cap em{font-style:normal;color:var(--brass)}
.strip button.now .thumb{border-color:var(--navy);box-shadow:0 0 0 1px var(--navy)}
.strip button.now .cap{color:var(--navy)}
.strip button:hover .thumb{border-color:var(--ink)}
.foot{color:var(--slate);font-size:13px;margin:0}

/* SVG drawing language */
.ln{fill:none;stroke:var(--ink);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ln.thin{stroke-width:.8;stroke:var(--mist)}
.ln.dash{stroke-dasharray:5 4}
.ln.br{stroke:var(--brass)}
.ln.heavy{stroke-width:2.2;stroke:var(--navy)}
.fillw{fill:var(--wash)} .fillb{fill:var(--brass)} .filln{fill:var(--navy)}
.hatch{fill:url(#hatch)} .hatchb{fill:url(#hatchb)}
.tx{font-family:var(--f-body);font-size:13px;fill:var(--navy)}
.tx.s{font-size:11px;fill:var(--slate)}
.mono{font-family:var(--f-mono);font-size:13px;fill:var(--navy)}
.mono.s{font-size:11px;fill:var(--slate)}
.mono.ink{fill:var(--ink)} .mono.br{fill:var(--brass)} .mono.w{fill:#fff}
.lab{font-family:var(--f-display);font-weight:600;font-size:10px;letter-spacing:.14em;fill:var(--slate);text-transform:uppercase}
.lab.br{fill:var(--brass)}
.ttl{font-family:var(--f-display);font-weight:650;font-size:16px;fill:var(--navy)}
.zone{font-family:var(--f-mono);font-size:9px;fill:var(--mist)}
.dot{fill:var(--brass)}

/* Motion: line work draws on, then annotations appear. Thumbnails stay static. */
.anim .ln{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.1s cubic-bezier(.5,0,.2,1) forwards;animation-delay:var(--d,0s)}
.anim .ln.dash{stroke-dasharray:5 4;stroke-dashoffset:0;opacity:0;animation:fade .5s forwards;animation-delay:calc(var(--d,0s) + .3s)}
.anim .fx{opacity:0;animation:fade .45s ease-out forwards;animation-delay:var(--d,.9s)}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fade{to{opacity:1}}
.caret::after{content:"▌";fill:var(--brass)}

@media (max-width:960px){
  .board{grid-template-columns:minmax(0,1fr)}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rules{grid-template-columns:repeat(2,minmax(0,1fr))}
  .about-grid,.book,.report{grid-template-columns:minmax(0,1fr)}
  .ind-panel{grid-template-columns:minmax(0,1fr)}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .menu a:not(.btn){display:none}
  .drawing{border-right:0;border-bottom:1px solid var(--rule-2)}
  .intro{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .titleblock{grid-template-columns:1fr 1fr}
  .titleblock div:nth-child(3){border-left:0}
  .titleblock div:nth-child(n+3){border-top:1px solid var(--rule)}
  .logo .tag,.doc-id,.keyplan{display:none}
  .tiles,.rules,.book-form,.report-form{grid-template-columns:minmax(0,1fr)}
  .report{padding:22px 16px}
  .book{padding:24px 18px}
  .mb-links{display:none}
  .site-foot{grid-template-columns:minmax(0,1fr)}
  .notes h2{font-size:26px}
}
@media (prefers-reduced-motion:reduce){
  .anim .ln,.anim .fx{animation:none!important;stroke-dashoffset:0;opacity:1}
  .pulse,.blink,.anim .scanline{animation:none!important}
}

/* Compare: a navy drawing sheet; "them" column switches, PEIQ column stays */
.cmp{background-color:var(--navy);color:#fff;border-top:0;padding:44px clamp(18px,4vw,44px) 40px;
  background-image:linear-gradient(rgba(169,180,204,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(169,180,204,.07) 1px,transparent 1px);background-size:24px 24px}
.cmp .sec-head h2{color:#fff}
.cmp .sec-head p{color:var(--mist)}
.cmp .eyebrow{color:var(--gold)}
.cmp-pick{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.cmp-pick > span{font:600 9.5px/1.2 var(--f-display);font-stretch:110%;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);margin-right:6px}
.cmp-pick button{font:500 13.5px/1.2 var(--f-body);color:#fff;background:transparent;border:1px solid rgba(169,180,204,.45);padding:10px 14px;cursor:pointer}
.cmp-pick button:hover{border-color:#fff}
.cmp-pick button[aria-pressed="true"]{background:#fff;color:var(--navy);border-color:#fff}
.cmp-pick button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.cmp-t{display:grid;border-top:1px solid rgba(169,180,204,.35)}
.cmp-r{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1fr) minmax(0,1.2fr);border-bottom:1px solid rgba(169,180,204,.2)}
.cmp-r > *{padding:14px 18px 14px 0;min-width:0}
.cmp-k{font:600 9.5px/1.5 var(--f-display);font-stretch:110%;letter-spacing:.14em;text-transform:uppercase;color:var(--mist);padding-top:17px!important}
.cmp-c{color:var(--mist);font-size:14.5px}
.cmp-p{position:relative;color:#fff;font-size:15px;font-weight:500;padding-left:18px!important;background:rgba(201,162,74,.08)}
.cmp-p::before{content:"";position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--brass);transform-origin:top;transition:transform .5s cubic-bezier(.5,0,.2,1);transition-delay:calc(var(--i,0)*70ms + .15s)}
.cmp-h .cmp-c,.cmp-h .cmp-p{font:500 12px/1.3 var(--f-mono);letter-spacing:.06em;text-transform:uppercase}
.cmp-h .cmp-c{color:#fff}
.cmp-h .cmp-p{color:var(--gold)}
.cmp[data-o="hire"] .cmp-c:not([data-o="hire"]),.cmp[data-o="agency"] .cmp-c:not([data-o="agency"]),.cmp[data-o="tool"] .cmp-c:not([data-o="tool"]){display:none}
.cmp.swap .cmp-c{animation:cmpIn .42s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(var(--i,0)*45ms)}
@keyframes cmpIn{from{opacity:0;transform:translateY(6px)}}
.cmp-r{transition:opacity .5s ease-out,transform .5s ease-out;transition-delay:calc(var(--i,0)*70ms)}
.cmp.pre .cmp-r{opacity:0;transform:translateY(8px)}
.cmp.pre .cmp-p::before{transform:scaleY(0)}
.cmp-note{margin:0;font:500 clamp(17px,1.8vw,21px)/1.35 var(--f-display);font-stretch:95%;color:#fff;max-width:760px;text-wrap:balance}
.cmp-note span{color:var(--mist)}
@media (max-width:560px){
  .cmp{padding:30px 16px 28px}
  .cmp-r{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .cmp-k{grid-column:1/-1;padding-bottom:0!important}
  .cmp-h .cmp-k{display:none}
  .cmp-r > *{padding-right:12px}
  .cmp-p{padding-left:12px!important}
}
@media (prefers-reduced-motion:reduce){
  .cmp.swap .cmp-c{animation:none}
  .cmp-r,.cmp-p::before{transition:none}
}

/* Compare map: 2x2 positioning, zones not dots */
.cmp-map{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:36px;align-items:center;padding-bottom:8px}
.cmp-map svg{width:100%;max-width:600px;height:auto;display:block;overflow:visible}
.cmp-map .pf{fill:rgba(255,255,255,.02);stroke:rgba(169,180,204,.45);stroke-width:1}
.cmp-map .mid{stroke:rgba(169,180,204,.3);stroke-width:1;stroke-dasharray:4 4}
.cmp-map .ql{font:500 11px var(--f-mono);fill:rgba(169,180,204,.75)}
.cmp-map .ae{font:400 12px var(--f-body);fill:var(--mist)}
.cmp-map .at{font:600 13px var(--f-body);fill:#fff}
.cmp-map .z{cursor:pointer;outline:none}
.cmp-map .z ellipse{fill:rgba(169,180,204,.1);stroke:rgba(169,180,204,.6);stroke-width:1.2;transition:fill .25s,stroke .25s}
.cmp-map .z .zl{font:500 13.5px var(--f-body);fill:#fff;pointer-events:none}
.cmp-map .z:hover ellipse,.cmp-map .z.on ellipse{fill:rgba(255,255,255,.16);stroke:#fff;stroke-width:2}
.cmp-map .z:focus-visible ellipse{stroke:var(--gold);stroke-width:2}
.cmp-map .zp ellipse{fill:rgba(201,162,74,.12);stroke:var(--gold);stroke-dasharray:5 4}
.cmp-map .zp:hover ellipse,.cmp-map .zp.on ellipse{fill:rgba(201,162,74,.22);stroke:var(--gold)}
.cmp-map .zlp{font:700 15px var(--f-display)!important;fill:var(--gold)!important;letter-spacing:.04em}
.cmp-map .dotp{fill:var(--gold);stroke:var(--navy);stroke-width:2}
.cmp-map .z,.cmp-map .zp .dotp{transition:opacity .6s ease-out,transform .6s cubic-bezier(.2,.7,.2,1);transform-box:fill-box;transform-origin:center}
.cmp.pre .cmp-map .z{opacity:0;transform:scale(.85)}
.cmp-map .z[data-z="hire"]{transition-delay:.1s}.cmp-map .z[data-z="agency"]{transition-delay:.2s}.cmp-map .z[data-z="peiq"]{transition-delay:.45s}
.map-key{display:grid;gap:14px;align-content:start}
.map-key h3{margin:0;font:650 20px/1.15 var(--f-display);font-stretch:92%;color:#fff}
.mk-note{margin:0;min-height:4.6em;padding:12px 14px;border-left:2px solid var(--gold);background:rgba(255,255,255,.05);color:#fff;font-size:15px}
.map-key ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.map-key li{color:var(--mist);font-size:14px}
.map-key li b{color:#fff;font-weight:600}
.mk-hint{margin:0;font:500 11.5px var(--f-mono);color:var(--gold)}
@media (max-width:960px){ .cmp-map{grid-template-columns:minmax(0,1fr);gap:20px} .cmp-map svg{margin-inline:auto} }
@media (prefers-reduced-motion:reduce){ .cmp-map .z{transition:none} }
.cmp-map .iring{fill:var(--navy);stroke:var(--gold);stroke-width:1.6}
.stats small{color:var(--slate);font-size:12.5px;opacity:.85}
.case-src{margin:0;color:var(--slate);font-size:13px;max-width:80ch}

/* Benchmarks: grey band = typical range, blue mark = Superior */
.bench{display:grid;gap:4px;margin-top:10px;border-top:1px solid var(--rule-2);padding-top:22px}
.bench-head{display:grid;gap:6px;max-width:760px;margin-bottom:10px}
.bench-head h3{margin:0;font:650 22px/1.15 var(--f-display);font-stretch:90%}
.bench-head p{margin:0;color:var(--slate);font-size:15px}
.bm{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.2fr);gap:28px;align-items:center;padding:16px 0;border-bottom:1px solid var(--rule)}
.bm-k{display:grid;gap:2px}
.bm-k b{font:650 17px/1.2 var(--f-display);font-stretch:95%}
.bm-k span{color:var(--slate);font-size:13.5px}
.bm-plot{padding:30px 0 0}
.bm-track{position:relative;height:12px;background:var(--rule);border-radius:2px}
.bm-track .band{position:absolute;top:0;bottom:0;background:var(--mist);border-radius:2px}
.bm-track .band.lite{background:var(--rule-2)}
.bm-track .mk{position:absolute;top:-7px;bottom:-7px;left:var(--v);width:4px;margin-left:-2px;background:var(--ink);border-radius:2px;box-shadow:0 0 0 2px var(--paper);transition:left .9s cubic-bezier(.2,.7,.2,1)}
.bm-track .mk em{position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);white-space:nowrap;font:600 13px/1 var(--f-body);font-style:normal;color:var(--ink)}
.bm-track .mk.r em{left:auto;right:0;transform:none}
.bm-track .mk.l em{left:0;transform:none}
.bm-labs{position:relative;height:30px;margin-top:6px}
.bm-labs .bl{position:absolute;top:0;font:500 11.5px/1.25 var(--f-mono);color:var(--slate);white-space:nowrap}
.bm-labs .bl.lite{top:15px;color:var(--slate);opacity:.8}
.bm-labs .bl.end{right:0;left:auto!important;color:var(--mist)}
.bench.pre .bm-track .mk{left:0}
.bench-care{margin:14px 0 0;color:var(--slate);font-size:13.5px;max-width:80ch;padding:12px 14px;background:var(--wash);border-left:2px solid var(--brass)}
.bench-care b{color:var(--navy)}
@media (max-width:760px){ .bm{grid-template-columns:minmax(0,1fr);gap:4px} }
@media (prefers-reduced-motion:reduce){ .bm-track .mk{transition:none} }

/* ---- multi-page site additions ---- */
main{display:grid;grid-template-columns:minmax(0,1fr);gap:26px}
main > *{min-width:0}
.skip{position:absolute;left:-9999px;top:8px;background:var(--navy);color:#fff;padding:8px 12px;z-index:50}
.skip:focus{left:16px}
.menu a.lang{font:600 12px var(--f-mono);letter-spacing:.06em;border:1px solid var(--rule-2);padding:6px 8px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fine a{color:inherit}
.ind-panel .seo a{color:var(--ink)}
.crumbs{font:500 12px/1.4 var(--f-mono);color:var(--slate);display:flex;gap:8px;flex-wrap:wrap}
.crumbs a{color:var(--slate)}
.page-hero{display:grid;gap:14px;padding-block:14px 6px;max-width:880px}
.page-hero h1{font:650 clamp(30px,4.2vw,50px)/1.04 var(--f-display);font-stretch:88%;letter-spacing:-.015em;margin:0;text-wrap:balance}
.page-hero .lead{margin:0;color:var(--slate);font-size:17px;max-width:64ch}
.page-hero .ctas{display:flex;gap:10px;flex-wrap:wrap}
.answer{border-left:2px solid var(--brass);background:var(--wash);padding:14px 16px;margin:0;font-size:16px;max-width:780px}
.answer b{display:block;font:600 9.5px/1.2 var(--f-display);font-stretch:110%;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);margin-bottom:6px}
.prose{max-width:760px;font-size:16.5px;line-height:1.65}
.prose h2{font:650 clamp(22px,2.6vw,30px)/1.12 var(--f-display);font-stretch:90%;margin:34px 0 10px;letter-spacing:-.005em}
.prose h3{font:650 19px/1.2 var(--f-display);font-stretch:95%;margin:22px 0 6px}
.prose p,.prose ul,.prose ol{margin:0 0 14px}
.prose li{margin-bottom:4px}
.prose a{color:var(--ink)}
.prose table{border-collapse:collapse;width:100%;font-size:14.5px;margin:6px 0 18px;display:block;overflow-x:auto}
.prose th,.prose td{border-bottom:1px solid var(--rule-2);padding:9px 12px 9px 0;text-align:left;vertical-align:top}
.prose th{font:600 10.5px/1.3 var(--f-display);font-stretch:110%;letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}
.meta-line{font:500 12px var(--f-mono);color:var(--slate)}
.cols3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.cols2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.card{border-top:2px solid var(--navy);padding-top:12px;display:grid;gap:8px;align-content:start;min-width:0}
.card h3{margin:0;font:650 18px/1.2 var(--f-display);font-stretch:95%}
.card h3 a{color:inherit;text-decoration:none}
.card h3 a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.card p,.card li{color:var(--slate);font-size:14.5px;margin:0}
.card ul{margin:0;padding-left:18px;display:grid;gap:4px}
.card .more{font:500 12px var(--f-mono);color:var(--ink);text-decoration:none}
.subj-line{font:500 16px/1.5 var(--f-mono);color:var(--brass);margin:0}
.vs{border-top:2px solid var(--navy);display:grid}
.vs-r{display:grid;grid-template-columns:minmax(0,.6fr) minmax(0,1fr) minmax(0,1fr);border-bottom:1px solid var(--rule-2)}
.vs-r > *{padding:13px 16px 13px 0;min-width:0;font-size:15px}
.vs-r .k{font:600 9.5px/1.5 var(--f-display);font-stretch:110%;letter-spacing:.14em;text-transform:uppercase;color:var(--slate);padding-top:16px}
.vs-r .o{color:var(--slate)}
.vs-r .p{color:var(--navy);font-weight:500;padding-left:14px;border-left:2px solid var(--brass)}
.vs-h > *{font:500 12px/1.3 var(--f-mono)!important;letter-spacing:.06em;text-transform:uppercase;color:var(--slate)}
.vs-h .p{color:var(--brass)!important}
.cta-band{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;background:var(--navy);color:#fff;padding:26px clamp(18px,4vw,36px)}
.cta-band p{margin:0;font:600 clamp(19px,2.2vw,24px)/1.25 var(--f-display);font-stretch:95%;max-width:44ch}
.cta-band .btn{border-color:#fff;color:#fff}
.cta-band .btn.primary{background:#fff;color:var(--navy)}
.legal{max-width:760px;font-size:15.5px;line-height:1.65}
.legal h2{font:650 21px/1.2 var(--f-display);margin:28px 0 8px}
.legal p,.legal ul{margin:0 0 12px}
.legal a{color:var(--ink)}
.site-foot{grid-template-columns:minmax(0,.8fr) minmax(0,2.2fr)!important;gap:26px 40px}
.foot-brand p{max-width:30ch}
.foot-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px}
.foot-cols nav{display:grid;gap:7px;align-content:start}
.foot-cols h4{margin:0 0 4px;font:600 9.5px/1.2 var(--f-display);font-stretch:110%;letter-spacing:.14em;text-transform:uppercase;color:var(--slate)}
.foot-cols .h4b{margin-top:12px}
.foot-cols a{color:var(--navy);font-size:13.5px;text-decoration:none}
.foot-cols a:hover{color:var(--ink);text-decoration:underline}
.foot-fr{display:flex;gap:16px;flex-wrap:wrap}
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:20px;counter-reset:s}
.steps li{border-top:2px solid var(--navy);padding-top:12px;display:grid;gap:6px;align-content:start;counter-increment:s}
.steps li::before{content:"0" counter(s);font:500 11.5px var(--f-mono);color:var(--brass)}
.steps h3{margin:0;font:650 17px/1.2 var(--f-display);font-stretch:95%}
.steps p{margin:0;color:var(--slate);font-size:14.5px}
@media (max-width:960px){
  .cols3,.steps{grid-template-columns:minmax(0,1fr)}
  .cols2{grid-template-columns:minmax(0,1fr)}
  .foot-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
  .site-foot{grid-template-columns:minmax(0,1fr)!important}
  .vs-r{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .vs-r .k{grid-column:1/-1;padding-bottom:0}
  .vs-h .k{display:none}
  .menu a.lang{display:inline-block}
}