/* ============================================================
   House system. Derived by measuring toptier.relats.com:
   near-black ground, bone type, ONE accent used sparingly,
   a strict scale at -0.05em tracking, mono for every label.
   Each site supplies only --accent and --ink in its theme file.
   ============================================================ */
:root{
  --bone:#EAE4DF; --mute:#8b8784; --dim:#b9b4b0;
  --line:rgba(255,255,255,.13);
  --t-jumbo:clamp(3rem,9.5vw,8.5rem);
  --t-xl:clamp(2.2rem,5vw,4.4rem);
  --t-lg:clamp(1.6rem,3vw,2.7rem);
  --tr:-.05em;
  /* Set per site in the theme file. Defaults here only so the base is valid
     on its own. */
  --f-disp:Manrope,system-ui,sans-serif;
  --f-body:Manrope,system-ui,-apple-system,sans-serif;
  --f-mono:var(--f-mono);
  --tr-lab:.14em;
  --gut:clamp(1.25rem,4vw,4.5rem);
  --max:1480px;
  --r:18px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--bone);overflow-x:hidden;
  font:400 1.0625rem/1.65 var(--f-body);
  -webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0 0 .5em;font-family:var(--f-disp);font-weight:800;
  letter-spacing:var(--tr);line-height:1.02}
h1{font-size:var(--t-jumbo);line-height:.94}
h2{font-size:var(--t-xl)}
h3{font-size:clamp(1.05rem,1rem + .35vw,1.25rem);font-weight:700;letter-spacing:-.02em;line-height:1.25}
p{margin:0 0 1em;color:var(--dim)}
a{color:var(--accent);text-underline-offset:3px}
.wrap{width:100%;max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.pn-eyebrow,.mono{font:500 .7rem/1.5 var(--f-mono);letter-spacing:var(--tr-lab);
  text-transform:uppercase;color:var(--accent);margin:0 0 1.3rem;display:block}
.pn-lede{font-size:clamp(1.05rem,.98rem + .5vw,1.3rem);color:#cfcac6;max-width:50ch}
section{padding-block:clamp(4rem,11vh,9rem);position:relative}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:300;background:var(--bone);color:#111;padding:.75rem 1rem;border-radius:6px}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px}


/* ---------- loader ---------- */
#load{position:fixed;inset:0;z-index:999;background:var(--ink);display:grid;place-items:center}
#load .pc{font:800 clamp(3.5rem,13vw,10rem)/1 var(--f-disp);letter-spacing:var(--tr);color:var(--ink2)}
#load .bar{position:absolute;left:0;bottom:0;height:2px;background:var(--accent);width:0}

/* ---------- webgl signal field ---------- */
#gl{position:fixed;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen}
#gl canvas{display:block;width:100%;height:100%}
#pn-heroshot{position:fixed;inset:0;z-index:0;overflow:hidden}
#pn-heroshot img{width:100%;height:100%;object-fit:cover;object-position:58% 32%;
  filter:grayscale(.5) contrast(1.08) brightness(.6)}
#pn-heroshot::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,var(--ink) 4%,rgba(0,0,0,.9) 32%,rgba(0,0,0,.4) 64%,rgba(0,0,0,.7) 100%)}
main{position:relative;z-index:2}

/* ---------- header ---------- */
.head{position:fixed;top:1rem;left:50%;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:.3rem;padding:.3rem;border-radius:999px;
  background:rgba(14,14,16,.93);backdrop-filter:blur(22px) saturate(1.3);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.09);max-width:calc(100vw - 1.5rem)}
.logo{display:flex;flex-direction:column;line-height:1.05;padding:.45rem .95rem;
  text-decoration:none;color:var(--bone)}
.logo b{font-weight:800;font-size:.9rem;letter-spacing:-.02em;white-space:nowrap}
.logo i{font-style:normal;white-space:nowrap;font-size:.53rem;letter-spacing:.15em;color:var(--mute);text-transform:uppercase}
.nav{display:flex;gap:.2rem}
.nav a{text-decoration:none;color:var(--bone);font-size:.85rem;font-weight:500;
  padding:.7rem .95rem;border-radius:999px;white-space:nowrap}
.nav a:hover{background:rgba(255,255,255,.09)}
.pn-hcall{display:inline-flex;align-items:center;gap:.4rem;background:var(--accent);
  color:var(--accent-ink);text-decoration:none;font-weight:800;padding:.72rem 1.1rem;
  border-radius:999px;font-size:.86rem;white-space:nowrap}
.pn-burger{display:none;background:transparent;border:0;color:var(--bone);font:inherit;
  font-weight:600;font-size:.85rem;padding:.7rem .9rem;border-radius:999px;cursor:pointer}
@media (max-width:1180px){
  .pn-burger{display:inline-flex}
  .pn-navband{position:fixed;inset:5rem 1rem auto;background:rgba(18,18,20,.97);
    backdrop-filter:blur(18px);border-radius:var(--r);padding:.5rem;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.1)}
  .pn-navband[hidden]{display:none}
  .nav{flex-direction:column}
  .nav a{padding:.95rem 1.1rem}
}
@media (min-width:1181px){.pn-burger{display:none}.pn-navband{display:block!important}}

/* ---------- hero ---------- */
.hero{min-height:100svh;display:grid;align-content:center;padding-block:7rem 4rem}
.hero .pill{display:inline-block;font:500 .68rem/1.5 var(--f-mono);letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin-bottom:1.8rem}
.hero h1{max-width:15ch;text-wrap:balance}
.hero .sub{font-size:clamp(1.05rem,.95rem + .55vw,1.4rem);font-weight:500;color:#cfcac6;
  max-width:36ch;margin:1.6rem 0 0;line-height:1.35}
.pn-cta-row{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:2.3rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  background:var(--accent);color:var(--accent-ink);text-decoration:none;font-weight:800;
  font-size:.98rem;padding:1.1rem 1.8rem;border-radius:999px;border:0;cursor:pointer;
  min-height:54px;transition:transform .18s}
.btn:hover{transform:translateY(-2px);color:var(--accent-ink)}
.pn-btn-2,.pn-btn-3{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 1px rgba(255,255,255,.24)}
.pn-btn-2:hover,.pn-btn-3:hover{background:rgba(255,255,255,.07);color:var(--bone)}
.hero-shot{display:none}
@media (max-width:760px){
  #pn-heroshot{position:absolute;height:62svh;inset:0 0 auto}
  .hero{padding-top:calc(62svh + 2rem);min-height:0;padding-bottom:3rem}
  .hero h1{max-width:none}
}

/* ---------- trust strip ---------- */
.pn-badges{border-block:1px solid var(--line)}
.pn-badges ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr))}
.pn-badges li{padding:1.6rem 1.2rem;border-left:1px solid var(--line);display:flex;
  flex-direction:column;gap:.35rem}
.pn-badges li:first-child{border-left:0}
.pn-badges .pn-badgenum{font-weight:800;font-size:clamp(1.8rem,3.4vw,2.8rem);letter-spacing:var(--tr);
  line-height:.95;color:var(--bone)}
.pn-badges .pn-stars{color:var(--accent);font-size:1.1rem;letter-spacing:2px;line-height:1.3}
.pn-badges .pn-badgelab{font:500 .66rem/1.4 var(--f-mono);letter-spacing:var(--tr-lab);
  text-transform:uppercase;color:var(--bone)}
.pn-badges .pn-badgesub{font-size:.8rem;color:var(--mute);line-height:1.4}
@media (max-width:640px){.pn-badges li{border-left:0;border-top:1px solid var(--line)}
  .pn-badges li:first-child{border-top:0}}

/* ---------- blocks ---------- */
.band{background:var(--ink2)}
.pn-s-dark{background:var(--ink)}
.pn-s-brand{background:var(--bone);color:#141414}
.pn-s-brand h2,.pn-s-brand h3,.pn-s-brand b{color:#141414}
.pn-s-brand p,.pn-s-brand .pn-lede{color:#4d4a47}
.pn-s-brand .pn-eyebrow,.pn-s-brand .mono{color:#141414}
.pn-s-brand .pn-btn-2{color:#141414;box-shadow:inset 0 0 0 1px rgba(0,0,0,.28)}
.pn-s-brand .pn-btn-2:hover{background:rgba(0,0,0,.06);color:#141414}
.pn-s-brand .pn-closer-pts svg{color:#141414}
.pn-s-brand .pn-fnote{color:#6c6866}
/* A problems grid inside a brand-tone section inherited the dark card
   background from .pn-sign while .pn-s-brand flipped the heading to near-black,
   which left the headings invisible. On the red flags page that hid the
   emergency signs. Specificity here beats both the base and every theme. */
.pn-s-brand .pn-signs{background:none;border:0;border-radius:0;overflow:visible;
  gap:clamp(.7rem,1.4vw,1.1rem)}
.pn-s-brand .pn-sign{background:#F6F2EF;border:1px solid rgba(0,0,0,.15);border-radius:var(--r)}
.pn-s-brand .pn-sign h3{color:#141414}
.pn-s-brand .pn-sign p{color:#4d4a47}
.pn-s-brand .exp div{border-color:rgba(0,0,0,.16)}
.pn-s-brand .exp svg{color:#141414}

.pn-steps{display:grid;gap:clamp(1.5rem,3vw,3rem);grid-template-columns:repeat(3,1fr);margin-top:3rem}
.pn-step .n{font:500 .68rem/1 var(--f-mono);letter-spacing:.16em;color:var(--accent);
  display:block;margin-bottom:1rem}
.pn-step-img{width:100%;object-fit:cover;object-position:50% 30%;border-radius:var(--r);margin-bottom:1.2rem;
  filter:grayscale(.3) contrast(1.05)}
@media (max-width:820px){.pn-steps{grid-template-columns:1fr}}

.pn-signs{display:grid;gap:1px;grid-template-columns:repeat(3,1fr);margin-top:3rem;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.pn-sign{background:var(--ink);padding:1.7rem 1.5rem}
.pn-sign h3{margin-bottom:.5rem}
.pn-sign p{font-size:.95rem;margin:0;color:var(--mute)}
@media (max-width:900px){.pn-signs{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.pn-signs{grid-template-columns:1fr}}

.exp{display:grid;margin-top:2.5rem;border-top:1px solid var(--line)}
.exp div{display:grid;grid-template-columns:auto 1fr;gap:1.1rem;padding:1.4rem 0;
  border-bottom:1px solid var(--line);align-items:start}
.exp svg{width:20px;height:20px;color:var(--accent);margin-top:4px}
.exp b{display:block;margin-bottom:.2rem}
.exp span{color:var(--mute);font-size:.97rem}

/* full bleed feature */
.pn-splitfeat{padding:0;display:grid;grid-template-columns:1fr 1fr;align-items:stretch}
.pn-panel-img{background-size:cover;background-position:center 30%;min-height:clamp(340px,44vw,640px);
  filter:grayscale(.4) contrast(1.06)}
.pn-panel-body{display:flex;align-items:center;padding:clamp(3rem,6vw,6rem) clamp(1.3rem,4.4vw,4.5rem)}
.pn-panel-in{width:100%;max-width:38rem}
.pn-splitfeat.pn-flip .pn-panel-img{order:2}
.pn-splitfeat.pn-flip .pn-panel-body{justify-content:flex-end}
@media (max-width:900px){.pn-splitfeat{grid-template-columns:1fr}
  .pn-splitfeat.pn-flip .pn-panel-img{order:0}.pn-splitfeat .pn-panel-body{justify-content:flex-start}
  .pn-panel-img{min-height:clamp(260px,56vw,380px)}}
.pn-closer-pts{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:.8rem}
.pn-closer-pts li{display:flex;gap:.7rem;align-items:flex-start}
.pn-closer-pts svg{width:19px;height:19px;color:var(--accent);flex:none;margin-top:4px}

/* video, vertical phone footage */
.pn-vidband{display:grid;grid-template-columns:1fr .62fr;gap:clamp(2rem,5vw,5rem);align-items:center}
.pn-vidshell{position:relative;border-radius:var(--r);overflow:hidden;background:#000;
  box-shadow:0 30px 80px rgba(0,0,0,.55)}
.pn-vidplayer{width:100%;aspect-ratio:9/16;max-height:72vh;object-fit:cover;display:block;background:#000}
@media (max-width:900px){.pn-vidband{grid-template-columns:1fr}.pn-vidplayer{max-height:none}}

/* reviews */
.pn-quotehead{display:flex;align-items:flex-end;justify-content:space-between;gap:1.2rem 2rem;flex-wrap:wrap}
.pn-quotetools{display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap}
.pn-quotemeta{display:flex;align-items:center;gap:.6rem;font-size:.9rem;color:var(--mute)}
.pn-quotemeta b{color:var(--bone);font-size:1.7rem;font-weight:800;letter-spacing:var(--tr);line-height:1}
.pn-quotemeta .pn-stars{color:var(--accent);letter-spacing:1px}
.pn-quotenav{display:flex;gap:.5rem}
.pn-quote-rnav{width:46px;height:46px;border-radius:50%;border:0;box-shadow:inset 0 0 0 1px var(--line);
  background:transparent;color:var(--bone);font-size:1.3rem;line-height:1;cursor:pointer;
  display:grid;place-items:center;font-family:inherit;padding:0 0 3px}
.pn-quote-rnav:hover:not(:disabled){background:var(--accent);color:var(--accent-ink)}
.pn-quote-rnav:disabled{opacity:.3;cursor:default}
.pn-quoterail{display:grid;grid-auto-flow:column;gap:1.1rem;overflow-x:auto;
  scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:2rem .2rem .3rem;
  margin-inline:-.2rem;grid-auto-columns:86%;scrollbar-width:none}
.pn-quoterail::-webkit-scrollbar{display:none}
@media (min-width:700px){.pn-quoterail{grid-auto-columns:calc((100% - 1.1rem)/2)}}
@media (min-width:1100px){.pn-quoterail{grid-auto-columns:calc((100% - 2.2rem)/3)}}
.pn-quote{scroll-snap-align:start;margin:0;border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;background:var(--ink2);
  box-shadow:inset 0 0 0 1px var(--line)}
.pn-quotepic{position:relative;margin:0;line-height:0}
.pn-quotepic img{width:100%;object-fit:cover;object-position:50% 28%;filter:grayscale(.35) contrast(1.05)}
.pn-quotetag{position:absolute;left:.8rem;bottom:.8rem;background:rgba(10,10,10,.82);
  backdrop-filter:blur(6px);color:var(--bone);font:500 .62rem/1.3 var(--f-mono);
  letter-spacing:.12em;text-transform:uppercase;padding:.42rem .75rem;border-radius:999px}
.pn-quotebody{padding:1.5rem 1.4rem;display:flex;flex-direction:column;flex:1}
.pn-quotebody .pn-stars{color:var(--accent);letter-spacing:2px;font-size:.95rem;margin-bottom:.7rem;line-height:1}
.pn-quotebody blockquote{margin:0 0 1.2rem;font-size:1rem;line-height:1.6;color:var(--bone)}
.pn-quotewho{display:flex;align-items:center;gap:.7rem;margin-top:auto}
.pn-avatar{width:40px;height:40px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--accent);color:var(--accent-ink);font-weight:800;font-size:.95rem}
.pn-quotewho cite{font-style:normal;font-weight:700;font-size:.92rem;display:block;color:var(--bone)}
.pn-quotewhen{font-size:.75rem;color:var(--mute)}
.pn-quote .qm{display:block;font-size:3.4rem;line-height:.7;color:var(--accent);opacity:.3;margin-bottom:.5rem}
.pn-quotedots{display:flex;justify-content:center;gap:.4rem;margin-top:1.4rem;flex-wrap:wrap}
.pn-quotedots button{width:8px;height:8px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.22);cursor:pointer;transition:width .18s,background .18s}
.pn-quotedots button[aria-current="true"]{background:var(--accent);width:24px;border-radius:999px}
.pn-quotenote{margin:1.4rem 0 0;font-size:.8rem;color:var(--mute);max-width:72ch;line-height:1.55}

/* faq */
.faq{border-top:1px solid var(--line);margin-top:2.5rem}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:1.3rem 2.5rem 1.3rem 0;font-weight:700;position:relative;
  list-style:none;min-height:54px;display:flex;align-items:center;letter-spacing:-.02em;
  font-size:1.05rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:.25rem;top:50%;transform:translateY(-50%);
  font-size:1.5rem;font-weight:400;color:var(--accent)}
.faq details[open] summary::after{content:"\2212"}
.faq .pn-ans{padding:0 0 1.5rem;color:var(--mute);max-width:70ch}
.faq .pn-ans p{color:var(--mute)}

/* closing block */
.pn-closer{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(1.8rem,4vw,3.5rem);align-items:center}
.pn-closer-rev .pn-closer-fig{order:2}
.pn-closer-fig{margin:0}
.pn-closer-fig img{width:100%;border-radius:var(--r);object-fit:cover;object-position:50% 28%;
  filter:grayscale(.3) contrast(1.05)}
@media (max-width:900px){.pn-closer{grid-template-columns:1fr}.pn-closer-rev .pn-closer-fig{order:0}}
.pn-fnote{font-size:.85rem;color:var(--mute);margin:1rem 0 0}

/* footer */
.foot{background:var(--ink2);color:var(--mute);padding-block:clamp(3rem,6vw,5rem) 2rem;
  font-size:.92rem;border-top:1px solid var(--line)}
.foot a{color:var(--bone);text-decoration:none}
.foot a:hover{color:var(--accent)}
.foot h2{color:var(--bone);font-size:.68rem;font-family:var(--f-mono);font-weight:500;
  letter-spacing:var(--tr-lab);text-transform:uppercase;margin-bottom:1rem}
.pn-fg{display:grid;gap:2.2rem;grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:.55rem}
.pn-disc{margin-top:2.5rem;padding-top:1.4rem;border-top:1px solid var(--line);
  font-size:.78rem;color:#6e6a67;max-width:92ch;line-height:1.65}

/* score modal */
.pn-modalask{position:fixed;inset:0;z-index:400;background:rgba(5,5,6,.82);backdrop-filter:blur(6px);
  display:none;align-items:flex-start;justify-content:center;
  padding:clamp(.7rem,3vw,2.4rem);overflow-y:auto}
.pn-modalask[data-open]{display:flex}
.pn-modal{background:var(--ink2);border-radius:var(--r);width:min(640px,100%);margin:auto;
  overflow:hidden;box-shadow:inset 0 0 0 1px var(--line),0 40px 100px rgba(0,0,0,.6)}
.pn-modalhead{display:flex;align-items:flex-start;gap:1rem;padding:1.5rem 1.5rem 1.2rem}
.pn-modalhead h2{color:var(--bone);margin:0 0 .3rem;font-size:1.3rem;letter-spacing:-.03em}
.pn-modalhead p{margin:0;font-size:.85rem;color:var(--mute);line-height:1.45}
.pn-modalclose{margin-left:auto;flex:none;width:40px;height:40px;border-radius:50%;border:0;
  cursor:pointer;background:rgba(255,255,255,.1);color:var(--bone);font-size:1.3rem;
  display:grid;place-items:center;font-family:inherit;padding:0 0 2px}
.pn-modalclose:hover{background:rgba(255,255,255,.2)}
.pn-modalprog{height:2px;background:rgba(255,255,255,.12)}
.pn-modalprog i{display:block;height:100%;background:var(--accent);transition:width .25s}
.pn-modalbody{padding:1.6rem 1.5rem 1.8rem}
.pn-modalq{margin:0 0 1.3rem;font-size:1.15rem;font-weight:700;line-height:1.35;color:var(--bone);
  letter-spacing:-.02em}
.pn-modalopts{display:grid;gap:.6rem;margin:0;padding:0;list-style:none}
.pn-modalopts button{width:100%;text-align:left;font:inherit;font-size:1rem;cursor:pointer;
  background:transparent;box-shadow:inset 0 0 0 1px var(--line);border:0;border-radius:12px;
  padding:1rem 1.1rem;color:var(--bone);min-height:54px;line-height:1.35}
.pn-modalopts button:hover{box-shadow:inset 0 0 0 1px var(--accent);background:rgba(255,255,255,.04)}
.pn-modalfoot{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-top:1.4rem;
  font:500 .68rem/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.pn-modalback{background:none;border:0;font:inherit;color:var(--mute);text-decoration:underline;
  cursor:pointer;padding:.4rem 0;min-height:44px}
.pn-modalres{text-align:center}
.pn-modalres .pn-gauge{margin:0 auto 1.2rem;width:118px;height:118px;position:relative}
.pn-modalres .pn-gauge svg{width:118px;height:118px}
.pn-modalres .pn-gauge span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:2.4rem;font-weight:800;color:var(--bone);padding-bottom:16px;letter-spacing:var(--tr)}
.pn-modalres .pn-gauge small{position:absolute;left:0;right:0;bottom:28px;text-align:center;
  font:500 .55rem/1 var(--f-mono);letter-spacing:.1em;color:var(--mute)}
.pn-modalres h3{font-size:1.35rem;margin-bottom:.6rem;color:var(--bone)}
.pn-modalres .pn-rtext{color:var(--mute);max-width:48ch;margin-inline:auto;font-size:.98rem}
.pn-modalres .pn-cta-row{justify-content:center;margin-top:1.6rem}
.pn-modaldims{display:grid;gap:.75rem;margin:1.8rem 0 0;text-align:left}
.pn-dim{display:grid;grid-template-columns:1fr 92px 32px;gap:.7rem;align-items:center}
.pn-dim b{font-size:.84rem;font-weight:600;color:var(--bone)}
.bar{height:6px;background:rgba(255,255,255,.12);border-radius:999px;overflow:hidden}
.bar i{display:block;height:100%;border-radius:999px}
.pn-dim u{text-decoration:none;font-weight:800;font-size:.95rem;text-align:right}
.pn-modaldisc{margin:1.6rem 0 0;font-size:.74rem;color:#6e6a67;line-height:1.6;
  border-top:1px solid var(--line);padding-top:1.1rem;text-align:left}
@media (max-width:560px){.pn-dim{grid-template-columns:1fr 60px 30px}}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  #gl{display:none}
}
/* ============================================================
   PINCHED NERVE PASCO — "clinical dossier"
   Diagnostic blue. Hairline rules everywhere, a boxed grid, and
   a numbered three-across that reads like a protocol. Someone
   with a pinched nerve wants to know what is going to be done
   and in what order, so this one is the most structured of the
   three. Loaded after the base, so everything here is an override.
   ============================================================ */
:root{
  --accent:#4DA3FF; --accent-ink:#021326; --ink:#0e1114; --ink2:#161a1f;
  --r:10px;
  --line:rgba(140,180,230,.17);
  --max:1380px;
  --t-jumbo:clamp(2.9rem,8.4vw,7.2rem);
  /* IBM Plex. Drawn for technical documentation and it reads that way, which
     is the right register for a page about where a nerve is compressed. */
  --f-disp:'IBM Plex Sans',system-ui,sans-serif;
  --f-body:'IBM Plex Sans',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;
  --tr:-.03em;
  --tr-lab:.12em;
}
h1,h2,h3{font-weight:600}
body{font-size:1.04rem;line-height:1.6}

/* Square-shouldered bar, flush to the top, with a rule under it. */
.head{top:0;border-radius:0;max-width:none;width:100%;left:0;transform:none;
  justify-content:center;padding:.4rem clamp(1rem,3vw,2rem);
  background:rgba(10,13,16,.95);
  box-shadow:inset 0 -1px 0 var(--line)}
.head .logo{margin-right:auto}
.pn-hcall{border-radius:6px}
.nav a{font-size:.88rem;letter-spacing:-.01em}
@media (max-width:1180px){.pn-navband{inset:3.9rem .75rem auto;border-radius:10px}}

.hero{min-height:98svh}
.hero h1{max-width:14ch}
.btn{border-radius:6px}

/* Every figure in its own cell, ruled on all sides. */
.pn-badges li{padding:1.5rem 1.4rem}

/* Protocol grid: numbered, ruled, equal weight. */
.pn-steps{grid-template-columns:repeat(3,1fr);gap:1px;margin-top:3rem;
  background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.pn-step{background:var(--ink);padding:1.6rem 1.5rem 1.9rem;display:flex;flex-direction:column}
.pn-step .pn-step-img{border-radius:6px;margin-bottom:1.3rem;filter:grayscale(.45) contrast(1.1)}
.pn-step .n{order:-1;font-size:.64rem;margin:0 0 .9rem;
  padding-bottom:.6rem;border-bottom:1px solid var(--line)}
.pn-step h3{font-size:1.14rem}
.pn-step p{font-size:.95rem;color:var(--mute);margin:0}
@media (max-width:820px){.pn-steps{grid-template-columns:1fr}}

.pn-signs{border-radius:10px}
.pn-sign{padding:1.6rem 1.5rem}

/* Three to a rail is the base behaviour. Only the card treatment differs:
   the body is ruled off from the photograph. */
.pn-quote{border-radius:10px}
.pn-quote .pn-quotebody{border-top:1px solid var(--line)}
.pn-quotepic img{filter:grayscale(.45) contrast(1.08)}
.pn-quote blockquote{font-size:1rem;line-height:1.58}

.pn-splitfeat{grid-template-columns:1fr 1fr}
.pn-panel-img{filter:grayscale(.5) contrast(1.1)}
.exp div{padding:1.25rem 0}