/* Curbstar site styles. Brand: OmniPotential Energy Partners (Electric brand guide 01).
   Primary: navy #001E53, blue #0083C8, white. Secondary: orange #EF4A09, amber #F6A00B, mist #F8F8F8.
   Type: Gotham Bold per the guide. Montserrat is the free web stand-in; Gotham is used first if installed. */
:root{
  --navy:#001E53; --navy-2:#062C70; --blue:#0083C8; --orange:#EF4A09; --amber:#F6A00B; --white:#FFFFFF; --mist:#F8F8F8;
  --bg:var(--white); --surface:var(--white); --tint:#F1F4F9; --ink:var(--navy); --muted:#4A5872; --rule:#DCE1E8; --accent:var(--blue);
  --card-shadow:0 1px 2px rgba(0,30,83,.06),0 12px 32px -18px rgba(0,30,83,.28);
  --grad:linear-gradient(200deg,var(--orange) 0%,var(--orange) 38%,#F27A0A 72%,var(--amber) 100%);
  --nav-h:76px;
  box-sizing:border-box;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#00153B;--surface:var(--navy);--tint:#001A48;--ink:#F2F5FA;--muted:#A9B6CC;--rule:#1C3668;--accent:#3FB0EC;--card-shadow:0 0 0 1px #1C3668}
}
:root[data-theme="dark"]{--bg:#00153B;--surface:var(--navy);--tint:#001A48;--ink:#F2F5FA;--muted:#A9B6CC;--rule:#1C3668;--accent:#3FB0EC;--card-shadow:0 0 0 1px #1C3668}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:var(--nav-h)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Gotham","Montserrat","Helvetica Neue",Arial,sans-serif;font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom,0px)}
svg{display:block;max-width:100%}
a{color:inherit}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:4px}
.wrap{width:min(1180px,100% - 2.5rem);margin-inline:auto}
.measure{max-width:62ch}
.mark{width:44px;height:44px;flex:none}
.skip{position:absolute;left:-9999px;background:var(--navy);color:#fff;padding:.7rem 1rem;border-radius:0 0 8px 0;z-index:100}
.skip:focus{left:0;top:0}

/* ---------------------------------------------------------------- buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;text-decoration:none;font-weight:700;font-size:.95rem;letter-spacing:.01em;
  padding:.9rem 1.5rem;border-radius:999px;border:2px solid transparent;cursor:pointer;font-family:inherit;
  transition:background-color .15s ease,transform .15s ease,color .15s ease,box-shadow .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-orange{background:var(--orange);color:#fff;box-shadow:0 8px 20px -10px rgba(239,74,9,.8)}
.btn-orange:hover{background:#FF5A17}
.btn-navy{background:var(--navy);color:#fff;box-shadow:0 8px 20px -10px rgba(0,30,83,.9)}
.btn-navy:hover{background:var(--navy-2)}
.btn-ghost{border-color:currentColor}
.btn-ghost:hover{background:rgba(255,255,255,.16)}
.textlink{font-weight:700;color:var(--accent);text-decoration:none;display:inline-flex;align-items:center;gap:.4rem}
.textlink::after{content:"\2192";transition:transform .15s ease}
.textlink:hover::after{transform:translateX(3px)}

/* -------------------------------------------------------------------- nav */
.nav{position:fixed;top:0;left:0;right:0;z-index:50;padding-top:env(safe-area-inset-top,0px);transition:background-color .25s ease,box-shadow .25s ease}
.nav.solid{background:var(--navy);box-shadow:0 6px 24px -14px rgba(0,0,0,.6)}
.nav .bar{height:var(--nav-h);display:flex;align-items:center;justify-content:space-between;gap:1rem;color:#fff}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;line-height:1.05;white-space:nowrap}
.brand b{display:block;font-weight:800;font-size:1.3rem;letter-spacing:-.01em}
.brand small{display:block;font-weight:700;font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;opacity:.9;margin-top:.2rem}
.menu{display:flex;align-items:center;gap:.25rem;list-style:none;margin:0 0 0 auto;padding:0}
.menu > li{position:relative}
.menu > li > a,.menu > li > button{
  font:inherit;font-weight:700;font-size:.92rem;color:#fff;background:none;border:0;cursor:pointer;
  padding:.6rem .8rem;border-radius:8px;text-decoration:none;display:flex;align-items:center;gap:.4rem}
.menu > li > a:hover,.menu > li > button:hover{background:rgba(255,255,255,.14)}
.menu [aria-current="page"]{box-shadow:inset 0 -3px 0 var(--amber)}
.nav.solid .menu [aria-current="page"]{box-shadow:inset 0 -3px 0 var(--orange)}
.caret{width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translate(-2px,-2px);transition:transform .2s ease}
[aria-expanded="true"] .caret{transform:rotate(225deg) translate(-1px,-1px)}
.drop{position:absolute;top:calc(100% + .5rem);left:0;min-width:270px;background:#fff;color:var(--navy);
  border-radius:14px;padding:.5rem;box-shadow:0 24px 50px -20px rgba(0,20,60,.55);display:none;list-style:none;margin:0;border-top:4px solid var(--orange)}
.drop.open{display:block}
.drop a{display:block;padding:.65rem .8rem;border-radius:9px;text-decoration:none;font-weight:700;font-size:.93rem}
.drop a:hover{background:var(--mist);color:var(--orange)}
/* On the orange hero the CTA goes navy so it doesn't disappear; once the bar turns navy it goes orange. */
.nav-cta{margin-left:.6rem;background:var(--navy);box-shadow:none}
.nav-cta:hover{background:var(--navy-2)}
.nav.solid .nav-cta{background:var(--orange)}
.nav.solid .nav-cta:hover{background:#FF5A17}
.burger{display:none;background:none;border:0;cursor:pointer;padding:.6rem;border-radius:8px}
.burger span{display:block;width:24px;height:2px;background:#fff;margin:5px 0;transition:transform .2s ease,opacity .2s ease}
.nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .burger span:nth-child(2){opacity:0}
.nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media (max-width:1100px){
  .menu,.nav-cta{display:none}
  .burger{display:block}
  .nav.open{background:var(--navy);max-height:100dvh;overflow-y:auto}
  .panel{display:none;padding:0 0 2rem}
  .nav.open .panel{display:block}
  .panel ul{list-style:none;margin:0;padding:0}
  .panel > ul > li{border-top:1px solid rgba(255,255,255,.16)}
  .panel a{display:block;color:#fff;text-decoration:none;font-weight:700;padding:.9rem 0}
  .panel .sub{padding-left:1rem;padding-bottom:.6rem}
  .panel .sub a{font-weight:500;padding:.45rem 0;opacity:.88;font-size:.98rem}
  .panel .btn{margin-top:1.4rem;display:flex}
}
@media (min-width:1101px){.panel{display:none}}

/* ------------------------------------------------------------------- hero */
/* The brand's signature: master logo on the orange-to-amber gradient. */
.hero{position:relative;background:var(--grad);color:#fff;overflow:hidden;
  padding:calc(var(--nav-h) + env(safe-area-inset-top,0px) + clamp(2.5rem,6vw,4.5rem)) 0 0}
.hero::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(60% 80% at 82% 45%,rgba(255,255,255,.18),rgba(255,255,255,0) 70%)}
.hero > .wrap{position:relative;z-index:1;padding-bottom:clamp(4rem,9vw,6.5rem);
  display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:3rem;align-items:start}
.hero > .wrap > *{grid-column:1;max-width:640px}
.hero > .wrap > .hero-mark{grid-column:2;grid-row:1 / span 6;align-self:center;width:clamp(240px,28vw,380px);height:auto;margin-top:-1rem;
  filter:drop-shadow(0 18px 30px rgba(120,30,0,.28))}
.eyebrow{justify-self:start;display:inline-block;font-weight:800;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;margin:0 0 1.1rem;
  color:#fff;background:rgba(0,30,83,.9);padding:.4rem .75rem;border-radius:6px}
.hero h1{margin:0;font-weight:900;line-height:1.04;letter-spacing:-.025em;font-size:clamp(2.3rem,5vw,3.9rem);max-width:15ch;
  text-shadow:0 2px 20px rgba(140,40,0,.18)}
.hero .sub{margin:1.3rem 0 0;font-size:clamp(1.05rem,1.45vw,1.2rem);font-weight:500;line-height:1.6;max-width:44ch;color:var(--navy)}
.hero .actions{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
.hero .btn-ghost{color:#fff}
@media (max-width:900px){
  .hero > .wrap{display:block}
  .hero > .wrap > .hero-mark{display:none}
}
/* Photo heroes: add class="hero photo" once real images exist in assets/img/. */
.hero.photo{background-image:linear-gradient(200deg,rgba(239,74,9,.86),rgba(246,160,11,.74)),var(--hero-photo);background-size:cover;background-position:center}

.hero-facts{position:relative;z-index:1;background:var(--navy);border-top:4px solid var(--blue)}
.hero-facts ul{list-style:none;margin:0;padding:1.4rem 0;display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.hero-facts li{display:flex;flex-direction:column;padding-left:1rem;border-left:3px solid var(--amber)}
.hero-facts b{font-size:1.2rem;font-weight:800;letter-spacing:-.01em}
.hero-facts span{font-size:.9rem;opacity:.8}
@media (max-width:700px){.hero-facts ul{grid-template-columns:1fr;gap:1rem}}

/* --------------------------------------------------------------- sections */
section{padding:clamp(3.5rem,8vw,6rem) 0}
section.tint{background:var(--tint)}
h2{font-weight:800;font-size:clamp(1.75rem,3.1vw,2.5rem);line-height:1.12;letter-spacing:-.02em;margin:0 0 1.2rem;max-width:22ch}
h2::before{content:"";display:block;width:48px;height:5px;border-radius:3px;background:var(--grad);margin-bottom:1.1rem}
.close h2::before{display:none}
h3{font-weight:800;font-size:1.15rem;line-height:1.3;margin:0 0 .5rem;letter-spacing:-.005em}
p{margin:0 0 1rem}
.lede{font-size:1.14rem;color:var(--muted)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}
@media (max-width:820px){.two{grid-template-columns:1fr;gap:1.5rem}}
.split{display:grid;grid-template-columns:.9fr 1.1fr;gap:3.5rem;align-items:start}
@media (max-width:900px){.split{grid-template-columns:1fr;gap:1.5rem}}
.body-text p{color:var(--muted)}
.body-text strong{color:var(--ink)}
.body-text > p:first-child{font-size:1.12rem}
ul.ticks{list-style:none;margin:1.1rem 0 0;padding:0}
ul.ticks li{margin:.55rem 0;color:var(--muted);padding-left:1.7rem;position:relative}
ul.ticks li::before{content:"";position:absolute;left:0;top:.35em;width:1.05rem;height:1.05rem;border-radius:50%;
  background:var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.5 2.5L12 5.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat}

.cards{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;list-style:none;margin:2.5rem 0 0;padding:0}
@media (max-width:760px){.cards{grid-template-columns:1fr}}
.cards li{background:var(--surface);border-radius:16px;padding:1.6rem 1.7rem 1.7rem;box-shadow:var(--card-shadow);border-top:4px solid var(--blue);
  transition:transform .2s ease,box-shadow .2s ease}
.cards li:nth-child(4n+2),.cards li:nth-child(4n+3){border-top-color:var(--orange)}
.cards p{color:var(--muted);margin:0}
.cards h3 a{text-decoration:none}
.cards li:has(a):hover{transform:translateY(-3px)}
.cards h3 a::after{content:" \2192";color:var(--orange)}
section:not(.tint) .cards li{background:var(--tint);box-shadow:none}

.ways{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:2.5rem}
.ways > div{background:var(--surface);border-radius:18px;padding:2rem 2.2rem 2.2rem;box-shadow:var(--card-shadow);border-top:6px solid var(--blue)}
.ways > div + div{border-top-color:var(--orange)}
@media (max-width:820px){.ways{grid-template-columns:1fr}}
.ways h3{font-size:1.45rem}
.who{font-weight:800;font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin:0 0 .5rem}
.who.warm{color:var(--orange)}
.ways > div > p:not(.who){color:var(--muted)}

dl.specs{margin:0;display:grid;grid-template-columns:auto 1fr;background:var(--surface);border-radius:18px;padding:.6rem 1.8rem;box-shadow:var(--card-shadow)}
section:not(.tint) dl.specs{background:var(--tint);box-shadow:none}
dl.specs dt,dl.specs dd{padding:1.05rem 0;border-bottom:1px solid var(--rule);margin:0}
dl.specs dt:last-of-type,dl.specs dd:last-of-type{border-bottom:0}
dl.specs dt{font-weight:800;padding-right:2rem;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);padding-top:1.25rem}
dl.specs dd{color:var(--ink)}
@media (max-width:560px){dl.specs{grid-template-columns:1fr;padding:.4rem 1.2rem}dl.specs dt{border-bottom:0;padding-bottom:.1rem}dl.specs dd{padding-top:0}}

ol.steps{list-style:none;counter-reset:s;margin:2.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:1.5rem;position:relative}
ol.steps li{counter-increment:s;position:relative;padding-top:4rem}
ol.steps li::before{content:counter(s);position:absolute;top:0;left:0;width:3rem;height:3rem;border-radius:50%;display:grid;place-items:center;
  background:var(--navy);color:#fff;font-weight:800;font-size:1.1rem;box-shadow:0 0 0 6px var(--bg);z-index:1}
section.tint ol.steps li::before{box-shadow:0 0 0 6px var(--tint)}
ol.steps li::after{content:"";position:absolute;top:1.45rem;left:3rem;right:-1.5rem;height:3px;background:linear-gradient(90deg,var(--blue),rgba(0,131,200,.25))}
ol.steps li:last-child::after{display:none}
ol.steps li:last-child::before{background:var(--orange)}
ol.steps p{color:var(--muted);font-size:.97rem;margin:0}
@media (max-width:960px){ol.steps{grid-template-columns:1fr 1fr}ol.steps li::after{display:none}}
@media (max-width:560px){ol.steps{grid-template-columns:1fr}}
ol.steps[style*="grid-template-columns"] li::after{display:none}

.faq{border-top:1px solid var(--rule);margin-top:2rem}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;font-weight:700;padding:1.15rem 0;list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-weight:800;color:var(--orange);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"\2212"}
.faq p{color:var(--muted);margin:0 0 1.15rem}

.draft{background:rgba(246,160,11,.14);border-left:4px solid var(--amber);padding:1rem 1.25rem;border-radius:0 10px 10px 0;font-size:.95rem;color:var(--ink)}

/* ------------------------------------------------------------------ forms */
form.stack{display:grid;gap:1.1rem;max-width:36rem;background:var(--surface);padding:2rem;border-radius:18px;box-shadow:var(--card-shadow);border-top:6px solid var(--orange)}
form.stack label{display:block;font-weight:700;font-size:.92rem;margin-bottom:.35rem}
form.stack input,form.stack select,form.stack textarea{
  font:inherit;width:100%;padding:.8rem .9rem;border-radius:10px;border:2px solid var(--rule);
  background:var(--bg);color:var(--ink)}
form.stack input:focus,form.stack select:focus,form.stack textarea:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 4px rgba(0,131,200,.15)}
form.stack .row{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem}
@media (max-width:620px){form.stack{padding:1.3rem}form.stack .row{grid-template-columns:1fr}}
.hint{color:var(--muted);font-size:.88rem;margin:.35rem 0 0}

/* ------------------------------------------------------------- close/foot */
.bar-rule{height:6px;background:linear-gradient(90deg,var(--blue),var(--orange),var(--amber))}
.close{background:var(--navy);color:#fff;position:relative;overflow:hidden}
.close .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:2rem;position:relative;z-index:1}
.close h2{color:#fff;margin-bottom:.6rem}
.close p{opacity:.85;max-width:46ch;margin:0}
.ghostmark{position:absolute;right:-60px;top:50%;transform:translateY(-50%);width:420px;height:420px;opacity:.07;color:#fff;z-index:0}
footer{background:#00153B;color:#fff}
footer .cols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:2rem;padding:3.5rem 0 2.5rem}
@media (max-width:900px){footer .cols{grid-template-columns:1fr 1fr}}
@media (max-width:520px){footer .cols{grid-template-columns:1fr}}
footer h4{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .9rem;font-weight:800;color:var(--amber)}
footer ul{list-style:none;margin:0;padding:0}
footer li{margin:.4rem 0}
footer a{text-decoration:none;font-size:.95rem;opacity:.8}
footer a:hover{opacity:1;text-decoration:underline;text-underline-offset:4px}
footer .legal{border-top:1px solid rgba(255,255,255,.15);padding:1.3rem 0 2.5rem;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:.88rem;opacity:.72}
footer .legal a{opacity:.72}

.flow{stroke-dasharray:6 14;animation:flow 1.1s linear infinite}
@keyframes flow{to{stroke-dashoffset:-20}}
.led{animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.flow,.led{animation:none}.btn:hover,.cards li:has(a):hover{transform:none}}

/* --------------------------------------------------- buyer-first additions */
.hero-facts ul{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){.hero-facts ul{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.hero-facts ul{grid-template-columns:1fr}}

/* Side-by-side wiring diagrams */
.dias{display:grid;grid-template-columns:1fr 1fr;gap:1.5rem;margin-top:3rem}
@media (max-width:820px){.dias{grid-template-columns:1fr}}
.dia{margin:0;background:var(--tint);border-radius:18px;padding:1.4rem 1.4rem 1.2rem;border-top:6px solid var(--orange);color:var(--ink)}
.dia.good{border-top-color:var(--blue)}
section.tint .dia{background:var(--surface);box-shadow:var(--card-shadow)}
.dia svg{width:100%;height:auto}
.dia figcaption{font-size:.95rem;color:var(--muted);margin-top:.8rem}
.dia figcaption b{color:var(--ink)}
.d-ground{fill:var(--rule);opacity:.55}
.d-lot{fill:none;stroke:var(--muted);stroke-width:1.5;stroke-dasharray:5 5;opacity:.6}
.d-xfmr{fill:#4A5872}
.d-bldg{fill:var(--surface);stroke:var(--ink);stroke-width:2.5}
.d-bldg.quiet{stroke:var(--muted);stroke-dasharray:6 5;opacity:.7}
.d-hot{fill:var(--orange)}
.d-ped{fill:var(--navy);stroke:var(--blue);stroke-width:2}
:root[data-theme="dark"] .d-ped{fill:#0A3A86}
.d-ped-other{fill:#8A96AA}
.d-meter{fill:none;stroke:#fff;stroke-width:2.5}
.d-wire{fill:none;stroke:var(--ink);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.d-long{stroke:var(--orange);stroke-dasharray:10 7}
.d-short{stroke:var(--blue)}
.dia text{font-family:inherit;font-weight:700;font-size:13px;fill:var(--ink)}
.dia .d-small{font-size:12px;font-weight:600;fill:var(--muted)}
.dia .d-label{font-size:15px;font-weight:800}
.dia .d-inv{fill:#fff;font-size:13px}
.d-tag text{fill:#fff;font-size:12.5px;font-weight:800}
.d-tag.hot rect{fill:var(--orange)}
.d-tag.cool rect{fill:var(--blue)}

/* Cost comparison table */
.table-card{background:var(--surface);border-radius:18px;box-shadow:var(--card-shadow);overflow-x:auto;margin-top:1.5rem}
section:not(.tint) .table-card{box-shadow:0 0 0 1px var(--rule)}
table.compare{width:100%;border-collapse:collapse;font-size:.98rem;min-width:520px}
table.compare th,table.compare td{padding:.95rem 1.2rem;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
table.compare tbody tr:last-child th,table.compare tbody tr:last-child td{border-bottom:0}
table.compare thead th{font-weight:800;font-size:1rem;vertical-align:bottom;border-bottom:2px solid var(--rule)}
table.compare thead small{display:block;font-weight:600;font-size:.78rem;color:var(--muted);letter-spacing:.02em;margin-top:.15rem}
table.compare thead th.cs{color:#fff;background:var(--navy);border-bottom-color:var(--navy)}
table.compare thead th.cs small{color:rgba(255,255,255,.75)}
table.compare tbody th{font-weight:600;color:var(--muted)}
table.compare td.cs{background:rgba(0,131,200,.07);font-weight:700;color:var(--ink)}
table.compare tr.hl td.cs{color:var(--blue)}
table.compare tr.hl td:not(.cs){color:var(--orange);font-weight:700}
:root[data-theme="dark"] table.compare tr.hl td.cs{color:var(--accent)}
table.compare tbody th b{color:var(--ink)}
.fine{font-size:.85rem;color:var(--muted);margin-top:1rem;max-width:80ch}
.fine a{color:var(--accent)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.driver-note{font-size:.92rem;color:var(--muted);margin-top:2rem;padding-top:1rem;border-top:1px solid var(--rule)}
.driver-note a{color:var(--accent);font-weight:700}
.split > .faq{margin-top:0}
.two > *,.split > *{min-width:0}
table.compare tr.total th,table.compare tr.total td{font-size:1.12rem;padding-top:1.2rem;padding-bottom:1.2rem;border-top:2px solid var(--ink)}
@media (max-width:600px){
  table.compare{min-width:0;font-size:.84rem}
  table.compare th,table.compare td{padding:.7rem .55rem}
  table.compare thead th{font-size:.86rem}
  table.compare thead small{font-size:.68rem}
  table.compare tr.total th,table.compare tr.total td{font-size:.95rem}
  .dia{padding:1rem .8rem .9rem}
}
.btn-lg{font-size:1.05rem;padding:1.05rem 1.9rem}

/* ---------------------------------------------------------------- parallax
   Quiet depth only. Scroll-driven CSS where supported, a tiny JS fallback in
   site.js elsewhere, and nothing at all for people who ask for reduced motion. */
section:has(.dias){overflow-x:clip}
@media (prefers-reduced-motion:no-preference){
  @supports (animation-timeline:scroll()){
    .hero > .wrap > .hero-mark{animation:px-hero linear both;animation-timeline:scroll(root);animation-range:0 90vh}
    .dias .dia{animation:px-in-left linear both;animation-timeline:view();animation-range:entry 0% cover 38%}
    .dias .dia.good{animation-name:px-in-right}
    .ghostmark{animation:px-ghost linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  }
  html.px-js .hero > .wrap > .hero-mark{transform:translate3d(0,var(--px-hero,0px),0) scale(var(--px-scale,1));opacity:var(--px-op,1);will-change:transform}
  html.px-js .ghostmark{transform:translateY(calc(-50% + var(--px-ghost,0px))) rotate(var(--px-rot,0deg))}
  html.px-js .dias .dia{transition:transform .9s cubic-bezier(.2,.7,.2,1),opacity .9s ease}
  html.px-js .dias .dia:not(.px-seen){opacity:0;transform:translateX(-56px)}
  html.px-js .dias .dia.good:not(.px-seen){transform:translateX(56px)}
}
@keyframes px-hero{to{transform:translate3d(0,140px,0) scale(.9);opacity:.55}}
@keyframes px-in-left{from{opacity:0;transform:translateX(-56px)}to{opacity:1;transform:none}}
@keyframes px-in-right{from{opacity:0;transform:translateX(56px)}to{opacity:1;transform:none}}
@keyframes px-ghost{from{transform:translateY(-20%) rotate(-6deg)}to{transform:translateY(-80%) rotate(6deg)}}

/* ------------------------------------------------ one hero size, every page
   Every hero is the same height. Copy has to fit: headline max 3 lines and
   subhead max 3 lines on desktop (run check_heroes.py). Shorter copy centers. */
:root{--hero-body:549px}
.hero > .wrap{min-height:var(--hero-body);align-content:center}
.hero > .wrap > *:not(.hero-mark){align-self:start}
@media (max-width:900px){:root{--hero-body:583px}}

/* ------------------------------------------- compact hero (2/3 height) */
.hero{padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 1.75rem)}
.hero > .wrap{padding-bottom:2.5rem;column-gap:2.5rem}
.hero > .wrap > *{max-width:720px}
.hero > .wrap > .hero-mark{width:clamp(200px,20vw,270px);margin-top:0}
.eyebrow{margin-bottom:.8rem;font-size:.72rem;padding:.32rem .65rem}
.hero h1{font-size:clamp(2rem,3.6vw,3rem);line-height:1.06;max-width:22ch}
.hero .sub{margin-top:.9rem;font-size:clamp(1rem,1.25vw,1.08rem);line-height:1.55;max-width:60ch}
.hero .actions{margin-top:1.3rem}
.hero .btn{padding:.75rem 1.3rem}
.hero .btn-lg{padding:.85rem 1.6rem;font-size:1rem}
@media (max-width:900px){
  .hero{padding-top:calc(var(--nav-h) + env(safe-area-inset-top,0px) + 1rem)}
  .hero > .wrap{padding-bottom:2rem}
  .hero h1{font-size:clamp(1.75rem,7.4vw,2.3rem)}
  .hero .sub{font-size:.98rem;line-height:1.5}
  .hero .actions{gap:.6rem}
  .hero .btn{padding:.7rem 1.1rem;font-size:.9rem}
  .hero .btn-lg{padding:.75rem 1.2rem;font-size:.95rem}
}
:root{--hero-body:361px}
@media (max-width:900px){:root{--hero-body:376px}}

/* ---------------------------------------------------------------- partners */
.quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2rem}
@media (max-width:900px){.quotes{grid-template-columns:1fr}}
.quote{margin:0;background:var(--tint);border-radius:18px;padding:1.8rem 1.8rem 1.6rem;border-top:6px solid var(--orange);display:flex;flex-direction:column;justify-content:space-between;gap:1.4rem}
.quote blockquote{margin:0;font-size:1.12rem;line-height:1.55;font-weight:500;color:var(--ink);position:relative}
.quote blockquote::before{content:"\201C";display:block;font-size:3.4rem;line-height:.8;font-weight:900;color:var(--orange);margin-bottom:.2rem}
.quote blockquote p{margin:0}
.quote figcaption b{display:block;font-weight:800}
.quote figcaption span{font-size:.9rem;color:var(--muted)}
.quote:nth-child(2){border-top-color:var(--blue)}
.quote:nth-child(2) blockquote::before{color:var(--blue)}
.partners .who{margin-bottom:.4rem}
.draft-slot{outline:2px dashed rgba(246,160,11,.7);outline-offset:-2px}
.draft-slot blockquote,.draft-slot h3,.draft-slot figcaption b{color:var(--muted)}
.quotes.two-up{grid-template-columns:repeat(2,1fr)}
@media (max-width:900px){.quotes.two-up{grid-template-columns:1fr}}
.quote-top{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.logo-plate{display:block;background:#fff;border-radius:12px;padding:.6rem;height:96px;width:auto;box-shadow:0 0 0 1px var(--rule)}
.logo-plate.wide{height:72px;max-width:100%}
.saved{margin:0;background:var(--navy);color:#fff;border-radius:999px;padding:.5rem 1rem;font-size:.88rem;font-weight:600}
.saved b{color:var(--amber);font-weight:900;font-size:1.05rem}
.quote blockquote{font-size:1.08rem}
.quote figcaption b{font-size:1.02rem}
.quote-top{flex-direction:column;align-items:flex-start;justify-content:flex-start}
.quote-top .logo-plate{height:84px}
.quote-top .logo-plate.wide{height:84px}
/* compact customer cards: square logo tile, name + savings beside it, quote below */
.quotes.two-up .quote{padding:1.3rem 1.4rem 1.4rem;gap:1rem;justify-content:flex-start;border-top-width:5px}
.quote-head{display:flex;align-items:center;gap:1rem}
.logo-tile{flex:none;width:72px;height:72px;background:#fff;border-radius:12px;padding:6px;object-fit:contain;box-shadow:0 0 0 1px var(--rule)}
.quote-head .co{margin:0 0 .35rem;font-weight:800;font-size:1rem;line-height:1.25;color:var(--ink)}
.quote-head .saved{display:inline-block;padding:.3rem .75rem;font-size:.8rem}
.quote-head .saved b{font-size:.92rem}
.quotes.two-up .quote blockquote{font-size:.98rem;line-height:1.6}
.quotes.two-up .quote blockquote::before{font-size:2.4rem;margin-bottom:0}
@media (max-width:600px){.logo-tile{width:60px;height:60px}.quote-head{gap:.8rem}.quote-head .saved{border-radius:10px;font-size:.76rem}}

/* ------------------------------------------------------------------- team */
.profile{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:3rem;align-items:start;margin-top:2rem}
@media (max-width:820px){.profile{grid-template-columns:1fr;gap:1.6rem}}
.profile-photo{width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;border-radius:20px;border-bottom:6px solid var(--orange);box-shadow:var(--card-shadow)}
@media (max-width:820px){.profile-photo{max-width:260px}}
.profile-name{font-size:clamp(1.6rem,2.6vw,2.1rem);font-weight:900;letter-spacing:-.02em;margin:0 0 .9rem}
.creds{list-style:none;margin:0 0 1.6rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.creds li{background:var(--tint);border-radius:999px;padding:.4rem .85rem;font-size:.86rem;font-weight:700;color:var(--ink)}
.founder-quote{margin:0 0 1.2rem;padding:1.3rem 1.5rem;background:var(--tint);border-left:5px solid var(--blue);border-radius:0 16px 16px 0}
.fq-head{margin:0 0 .7rem;font-weight:800;color:var(--orange);font-size:1.05rem}
.founder-quote blockquote{margin:0;font-style:italic;color:var(--ink);line-height:1.65}
.founder-quote blockquote p{margin:0 0 .8rem}
.founder-quote blockquote p:last-child{margin:0}
.founder-quote strong{color:var(--blue);font-style:italic}
.profile-more{color:var(--muted);margin:0}
@media (max-width:600px){.creds li{border-radius:10px}}
.profile{grid-template-columns:minmax(200px,300px) 1fr;align-items:center;gap:2.5rem}
.bio{color:var(--muted);font-size:1.05rem;line-height:1.7;margin:0 0 1rem;max-width:62ch}
.bio:last-child{margin-bottom:0}
.team .founder-quote{margin:2.5rem 0 0}
.founder-quote figcaption{margin-top:.8rem;font-weight:800;color:var(--ink);font-size:.92rem}
.founder-quote figcaption::before{content:"~ "}
@media (max-width:820px){.profile{grid-template-columns:1fr;gap:1.4rem;align-items:start}}

/* ------------------------------------------------ hero image (Curbstar pedestal)
   The pedestal is a transparent cutout, flush with the bottom, laid over the brand
   gradient, sized to the hero below the nav and aligned to the content's right edge. Below 1101px the photo would sit
   behind the headline, so those widths keep the plain brand gradient. */
@media (min-width:1101px){
  .hero{background:url("img/hero/curbstar-pedestal-flush.webp") right max(1.25rem, calc((100% - 1180px) / 2)) bottom 0 / auto calc(100% - var(--nav-h) - 10px) no-repeat, var(--grad)}
  .hero::before{display:none}
  .hero > .wrap > .hero-mark{display:none}
  .hero > .wrap > *:not(.hero-mark){max-width:min(720px,calc(100vw - 520px))}
}

/* ------------------------------------------------------------ brand lockup
   Curbstar wordmark with "by OmniPotential" underneath. Blue wordmark while the nav
   sits on the orange hero; white once the bar turns navy, in the open phone menu,
   and in the footer, where the blue would disappear. */
.brand{flex-direction:column;align-items:flex-start;gap:.28rem;line-height:1}
.brand-logo{display:flex;align-items:flex-start}
.brand-logo img{display:block;height:28px;width:auto}
.brand-logo sup{font-size:.6rem;font-weight:700;line-height:1;margin-left:2px;color:#fff;opacity:.9}
.brand small{margin-top:0;padding-left:2px;font-size:.6rem;letter-spacing:.16em}
.logo-white{display:none!important}
.nav.solid .logo-blue,.nav.open .logo-blue,footer .logo-blue{display:none!important}
.nav.solid .logo-white,.nav.open .logo-white,footer .logo-white{display:block!important}
footer .brand-logo img{height:30px}
@media (max-width:600px){.brand-logo img{height:24px}}

/* --------------------------------------------------------------- hardware */
.hw-intro{align-items:center}
.exploded{margin:0;background:#fff;border-radius:18px;padding:1.2rem;box-shadow:var(--card-shadow);text-align:center}
.exploded img{max-width:100%;height:auto;max-height:520px;width:auto;display:inline-block}
.exploded figcaption{font-size:.9rem;color:#4A5872;margin-top:.6rem}
.spec-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.25rem;margin-top:2rem}
@media (max-width:820px){.spec-grid{grid-template-columns:1fr}}
.spec-card{background:var(--surface);border-radius:18px;padding:1.4rem 1.6rem 1rem;box-shadow:var(--card-shadow);border-top:5px solid var(--blue)}
.spec-card:nth-child(4n+2),.spec-card:nth-child(4n+3){border-top-color:var(--orange)}
.spec-card.wide{grid-column:1 / -1}
.spec-card h3{margin:0 0 .4rem}
dl.specs.plain,section:not(.tint) dl.specs.plain{background:none;box-shadow:none;padding:0;border-radius:0}
dl.specs.plain dt{font-size:.72rem;padding-top:1rem}
dl.specs.plain dd{font-size:.97rem}
.spec-card.wide dl.specs.plain{grid-template-columns:auto 1fr}
.template-fig{margin:0;background:var(--tint);border-radius:18px;padding:1.4rem}
.template-fig svg{width:100%;height:auto}
.tp-pad{fill:#fff;stroke:var(--navy);stroke-width:3}
.tp-hole{fill:none;stroke:var(--navy);stroke-width:3}
.tp-bond{fill:none;stroke:var(--orange);stroke-width:3}
.tp-stub{fill:none;stroke:var(--blue);stroke-width:3.5}
.tp-lead{fill:none;stroke:var(--muted);stroke-width:1.5}
.tp-label{font-family:inherit;font-size:13px;font-weight:700;fill:var(--ink)}
.tp-dim{stroke:var(--muted);stroke-width:1.2;stroke-dasharray:4 4}
.tp-dimt{font-family:inherit;font-size:12px;font-weight:700;fill:var(--muted)}

/* compare page: building-fed and Curbstar infographics side by side */
.info-fig{margin:0;width:100%;border-radius:14px;overflow:hidden;box-shadow:var(--card-shadow)}
.info-fig img{display:block;width:100%;height:auto}

.allin-note{margin:1.25rem 0 0;font-size:1.05rem;color:var(--navy,#001E53)}
table.compare .row-sub{display:block;font-style:italic;font-weight:400;font-size:.8rem;color:var(--muted);margin-top:.2rem}

/* home: features and benefits side by side */
.fb-head{max-width:760px}
.fb-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:1.75rem;margin-top:2.25rem;align-items:stretch}
.fb-col{display:flex;flex-direction:column}
.fb-title{margin:0 0 .8rem;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.fb-col dl.specs{flex:1}
ul.benefits{flex:1;list-style:none;margin:0;padding:1rem 1.8rem;background:var(--navy,#001E53);color:#fff;border-radius:18px;box-shadow:var(--card-shadow);display:flex;flex-direction:column}
ul.benefits li{flex:1;display:flex;align-items:center;gap:1rem;font-weight:700;font-size:1.2rem;line-height:1.3;padding:.9rem 0;border-bottom:1px solid rgba(255,255,255,.14)}
ul.benefits li:last-child{border-bottom:0}
.bn-ico{flex:0 0 40px;height:40px;border-radius:50%;background:var(--orange,#EF4A09);display:grid;place-items:center}
.bn-ico svg{width:22px;height:22px;color:#fff}
.fb-cta{margin-top:2rem}
@media (max-width:900px){.fb-grid{grid-template-columns:1fr}ul.benefits li{font-size:1.08rem}}
ol.steps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr}
@media (max-width:960px){ol.steps{grid-auto-flow:row;grid-template-columns:1fr 1fr}}
@media (max-width:560px){ol.steps{grid-template-columns:1fr}}
.nav::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:6px;background:linear-gradient(90deg,var(--blue),var(--orange),var(--amber));pointer-events:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) main .btn-navy{background:#fff;color:var(--navy);box-shadow:0 8px 20px -12px rgba(0,0,0,.7)}:root:not([data-theme="light"]) main .btn-navy:hover{background:#E6EEF8}}
:root[data-theme="dark"] main .btn-navy{background:#fff;color:var(--navy);box-shadow:0 8px 20px -12px rgba(0,0,0,.7)}:root[data-theme="dark"] main .btn-navy:hover{background:#E6EEF8}
.quotes-more{margin:1.5rem 0 0}.quotes-more a{color:var(--accent);font-weight:700}
section.tint .quote{background:var(--surface);box-shadow:var(--card-shadow)}
.more-link a{color:var(--accent);font-weight:700}
.faq-groups{display:flex;flex-direction:column;gap:2.25rem}
.faq-h{margin:0 0 .4rem;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.foot-contact{font-style:normal;font-size:.95rem;line-height:1.7;margin-top:1rem;opacity:.9}.foot-contact b{font-weight:700}.foot-contact a{color:var(--amber);opacity:1}
.hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.inlink{color:var(--accent);font-weight:700}
.menu > li > a,.menu > li > button,.nav-cta{white-space:nowrap}

/* contact: one form, topic chips, proposal fields revealed on demand */
form.stack fieldset.topics{border:0;margin:0;padding:0;min-width:0}
form.stack fieldset.topics legend{font-weight:700;font-size:.92rem;margin-bottom:.6rem;padding:0}
.chips{display:flex;flex-wrap:wrap;gap:.5rem}
form.stack .chip{margin:0;font-weight:600;font-size:.88rem;cursor:pointer}
form.stack .chip input{position:absolute;opacity:0;width:1px;height:1px}
.chip span{display:inline-block;padding:.5rem .85rem;border-radius:999px;border:1.5px solid var(--rule);color:var(--ink);transition:background .15s,border-color .15s,color .15s}
.chip:hover span{border-color:var(--blue)}
.chip input:checked + span{background:var(--navy);border-color:var(--navy);color:#fff}
.chip input:focus-visible + span{box-shadow:0 0 0 4px rgba(0,131,200,.25)}
.stack-inner{display:grid;gap:1.1rem;padding:1.2rem;border-radius:14px;background:var(--tint)}
.stack-inner[hidden]{display:none}
.group-note{margin:0;font-weight:800;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;color:var(--accent)}
.opt{font-weight:500;color:var(--muted)}
.aside-h{margin:2rem 0 0;font-size:1.05rem}
ol.steps.vert{grid-auto-flow:row;grid-template-columns:1fr;gap:1.6rem;margin-top:1.2rem}ol.steps.vert li::after{display:none}.inlink{white-space:nowrap}
#c-topic:invalid{color:var(--muted)}#c-topic option{color:var(--ink)}
.btn.is-sending{cursor:progress;opacity:.9;display:inline-flex;align-items:center;gap:.6rem}
.btn .spin{width:1.05em;height:1.05em;border-radius:50%;border:2.5px solid rgba(255,255,255,.35);border-top-color:#fff;animation:spin .8s linear infinite;flex:0 0 auto}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.btn .spin{animation-duration:2.4s}}
table.compare.opts td{color:var(--ink)}
table.compare.opts thead th{color:var(--ink)}
table.compare.opts tr.opt-cta td{padding-top:1.3rem;padding-bottom:1.3rem}
table.compare.opts tr.opt-cta .btn{margin:0 1rem .5rem 0}
table.compare.opts .more{display:inline-block;font-size:.92rem}
@media (max-width:620px){table.compare.opts tr.opt-cta .btn{padding:.6rem .9rem;font-size:.8rem}}
table.compare.opts tr.rev-head th{background:var(--tint);color:var(--accent);font-size:.78rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;padding-top:.7rem;padding-bottom:.7rem}
table.compare.opts td b{font-weight:800}
table.compare.opts .ln{display:block}table.compare.opts .ln + .ln{margin-top:.35rem}
.legal h2{margin-top:0}.legal h3{margin:2.2rem 0 .6rem;font-size:1.2rem}.legal h4{margin:1.6rem 0 .4rem;font-size:1rem}.legal p,.legal li{color:var(--ink);line-height:1.65}.legal ul{padding-left:1.3rem}
.quotes.two-up .quote{overflow:hidden}
.quote-photo{display:block;width:calc(100% + 2.8rem);max-width:none;height:auto;aspect-ratio:4/3;object-fit:cover;margin:-1.3rem -1.4rem 0;border-radius:0}
.nav .brand-logo img{height:42px}.nav .brand small{font-size:.7rem}.nav .brand-logo sup{font-size:.7rem}
@media (max-width:600px){.nav .brand-logo img{height:30px}.nav .brand small{font-size:.6rem}}
.quotes.stacked{grid-template-columns:1fr;max-width:980px}
.quotes.stacked .quote{display:grid;grid-template-columns:300px 1fr;padding:0;gap:0}
.quotes.stacked .quote-photo{width:100%;height:100%;min-height:230px;margin:0;aspect-ratio:auto;object-fit:cover}
.quotes.stacked .quote-body{padding:1.3rem 1.6rem 1.4rem;display:flex;flex-direction:column;gap:1rem}
@media (max-width:700px){.quotes.stacked .quote{grid-template-columns:1fr}.quotes.stacked .quote-photo{height:auto;min-height:0;aspect-ratio:16/9}}
.nav-actions{display:flex;align-items:center;gap:.6rem}
.nav-actions .nav-cta{margin-left:0}
.nav-drivers{background:transparent;color:#fff;border:2px solid #fff;box-shadow:none;white-space:nowrap}
.nav-drivers:hover{background:#fff;color:var(--navy)}
.nav-drivers[aria-current="page"]{background:#fff;color:var(--navy)}
@media (max-width:1100px){.nav-drivers{padding:.45rem 1rem;font-size:.88rem}}
@media (max-width:700px){.steps[style]{grid-template-columns:1fr!important}}
.nav .wrap.bar{width:min(1260px,100% - 2.5rem)}
@media (min-width:1101px){
  .menu{margin:0;gap:0}
  .menu > li > a,.menu > li > button{font-size:clamp(.86rem,calc(.32vw + 10.2px),.92rem);padding-left:clamp(5px,calc(2vw - 16px),13px);padding-right:clamp(5px,calc(2vw - 16px),13px)}
  .nav-actions{gap:clamp(8px,calc(1.2vw - 4px),12px)}
  .nav-drivers,.nav-actions .nav-cta{font-size:clamp(.88rem,calc(.25vw + 11px),.95rem);padding-left:clamp(14px,calc(2vw - 8px),24px);padding-right:clamp(14px,calc(2vw - 8px),24px)}
}
table.compare.opts{table-layout:fixed}
table.compare.opts tr > :first-child{width:22%}
@media (max-width:620px){table.compare.opts tr > :first-child{width:28%}}
.fb-head.with-photo{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:2.5rem;align-items:center;max-width:none}
.fb-photo{margin:0;max-width:400px;justify-self:end;width:100%}
.fb-photo img{display:block;width:100%;height:auto;border-radius:16px;box-shadow:0 18px 40px -22px rgba(0,20,60,.45)}
.fb-photo figcaption{margin-top:.6rem;font-size:.85rem;color:var(--muted);font-weight:600}
@media (max-width:860px){.fb-head.with-photo{grid-template-columns:1fr;gap:1.5rem}.fb-photo{max-width:460px}}
div.benefits{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}
@media (max-width:760px){div.benefits{grid-template-columns:1fr}}
.benefit{background:var(--surface);border-radius:18px;padding:1.5rem 1.6rem 1.6rem;box-shadow:var(--card-shadow);border-top:5px solid var(--orange)}
section:not(.tint) .benefit{background:var(--tint);box-shadow:none}
.benefit:nth-child(4n+2),.benefit:nth-child(4n+3){border-top-color:var(--blue)}
.benefit h3{margin:0 0 .55rem;font-size:1.15rem;line-height:1.3;color:var(--ink)}
.benefit p{margin:0;color:var(--ink);line-height:1.6}
.anatomy{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:3.5rem;align-items:center}
.anatomy-img{margin:0;background:#fff;border-radius:18px;padding:1rem;box-shadow:var(--card-shadow)}
.anatomy-img img{display:block;width:100%;height:auto}
.anatomy .lede{margin-bottom:1.4rem}
.anatomy-list{list-style:none;margin:0;padding:0;counter-reset:a;display:grid;gap:.75rem}
.anatomy-list li{counter-increment:a;display:grid;grid-template-columns:2rem 1fr;column-gap:.85rem;align-items:start;color:var(--ink)}
.anatomy-list li::before{content:counter(a);grid-row:span 2;width:2rem;height:2rem;border-radius:50%;background:#111;color:#fff;font-weight:800;font-size:.95rem;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 2px #fff,0 0 0 3px #111}
.anatomy-list b{font-weight:800;line-height:2rem}
.anatomy-list span{grid-column:2;color:var(--muted);font-size:.95rem;line-height:1.5}
@media (max-width:820px){.anatomy{grid-template-columns:1fr;gap:2rem}.anatomy-img{max-width:300px;margin-inline:auto}}
.anatomy-diagram{margin-top:2rem}
.ad-svg{display:block;width:100%;height:auto;max-width:1100px;margin-inline:auto;overflow:visible}
.ad-line{fill:none;stroke:var(--orange);stroke-width:4;stroke-linejoin:round}
.ad-end{fill:var(--orange)}
.ad-slot{display:flex;align-items:center;height:100%;width:100%}
.ad-bubble{display:flex;align-items:flex-start;gap:18px;background:var(--surface);border-radius:20px;padding:20px 26px;box-shadow:0 2px 4px rgba(0,30,83,.08),0 18px 40px -20px rgba(0,30,83,.35);border:2px solid var(--rule);max-width:100%;box-sizing:border-box;font-family:inherit}
section.tint .ad-bubble{background:var(--surface)}
section:not(.tint) .ad-bubble{background:var(--tint)}
.ad-num{flex:none;width:52px;height:52px;border-radius:50%;background:#111;color:#fff;font-weight:800;font-size:28px;display:flex;align-items:center;justify-content:center;box-shadow:0 0 0 3px #fff,0 0 0 5px #111}
.ad-txt{display:flex;flex-direction:column;gap:6px;padding-top:6px}
.ad-txt b{font-size:36px;line-height:1.25;font-weight:800;color:var(--ink)}
.ad-sub{font-size:27px;line-height:1.4;color:var(--muted)}
.anatomy-mobile{display:none;margin-top:2rem}
@media (max-width:900px){.anatomy-diagram{display:none}.anatomy-mobile{display:grid}}