/* ============================================================
   AI SOLAR BOSS · PPA homepage layer (on top of Carbon & Flare)
   ============================================================ */

.hot{color:var(--amber)}
.mono{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase}

/* ---------- Act 1 · Roof scrub ---------- */
.roof-hero{position:relative;height:320vh;height:320svh}
.roof-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.roof-canvas{position:absolute;inset:0;width:100%;height:100%}
.roof-copy{position:relative;height:100%;z-index:2;pointer-events:none}
.roof-line{position:absolute;left:0;right:0;transition:opacity .35s var(--ease-out),transform .5s var(--ease-out)}
.roof-line.off{opacity:0;transform:translateY(-18px)}
.roof-line.off.below{transform:translateY(18px)}
.roof-line--a{top:clamp(6.5rem,16vh,9.5rem);max-width:min(44rem,92vw);pointer-events:auto}
.roof-line--a.off{pointer-events:none}
.roof-title{font-size:clamp(2.6rem,5.7vw,5.3rem);line-height:.98;letter-spacing:-.025em;margin:1.1rem 0 1.4rem}
.roof-lead{max-width:30em;color:rgba(242,237,227,.8)}
.roof-ctas{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.roof-line--b,.roof-line--c{
  bottom:clamp(7rem,22vh,13rem);max-width:min(30rem,88vw);
  font-family:var(--font-display);font-weight:500;font-size:clamp(1.7rem,3.4vw,2.9rem);line-height:1.08;letter-spacing:-.015em;
}
.roof-line--b em,.roof-line--c em{font-style:normal;color:var(--amber)}
.roof-hud{
  position:absolute;z-index:3;right:clamp(1rem,4vw,3rem);bottom:clamp(1.2rem,4vh,2.4rem);
  display:flex;gap:clamp(1rem,3vw,2.6rem);
  padding:.9rem 1.2rem;border:1px solid var(--line);border-radius:12px;
  background:rgba(11,12,14,.55);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.roof-hud dt{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.2em;text-transform:uppercase;color:var(--cream-faint)}
.roof-hud dd{font-family:var(--font-display);font-size:clamp(1.15rem,2vw,1.6rem);font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- Act 2 · Why now ---------- */
.whynow{border-top:1px solid var(--line)}
.whynow-title{max-width:16em;margin-bottom:clamp(2.5rem,7vh,4.5rem)}
.ledger{list-style:none;border-top:1px solid var(--line)}
.ledger-row{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);align-items:center;gap:clamp(1.2rem,4vw,4rem);
  padding-block:clamp(1.6rem,4vh,2.6rem);border-bottom:1px solid var(--line);
}
.ledger-row--flip .ledger-num{order:2;text-align:right}
.ledger-num{
  font-family:var(--font-display);font-weight:600;line-height:.9;letter-spacing:-.03em;
  font-size:clamp(3.6rem,10vw,8.5rem);color:var(--cream);
}
.ledger-num small{font-size:.38em;color:var(--amber);margin-left:.12em;letter-spacing:0}
.ledger-row p{font-size:var(--fs-lead);line-height:1.5;color:var(--cream-dim);max-width:24em}
.ledger-row--flip p{justify-self:start}
.ledger-row:not(.ledger-row--flip) p{justify-self:end}

/* ---------- Act 3 · Bill splitter ---------- */
.splitter{
  background:
    radial-gradient(60rem 30rem at 85% 0%,rgba(255,179,0,.09),transparent 60%),
    var(--carbon-2);
  border-block:1px solid var(--line);
}
.split-head{display:grid;grid-template-columns:auto minmax(0,30rem);align-items:end;justify-content:space-between;gap:2rem;margin-bottom:clamp(2.2rem,6vh,3.6rem)}
.split-head .h1{line-height:.92}
.split-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:start}

.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;padding:.35rem;border:1px solid var(--line);border-radius:14px;background:rgba(0,0,0,.25)}
.seg button{
  padding:.75rem .4rem;border-radius:10px;font-weight:600;font-size:.98rem;line-height:1.2;color:var(--cream-dim);
  transition:background .25s var(--ease-out),color .25s var(--ease-out);
}
.seg button small{display:block;font-family:var(--font-mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;font-weight:400;opacity:.75;margin-top:.2rem}
.seg button:hover{color:var(--cream)}
.seg button[aria-checked="true"]{background:var(--amber);color:var(--carbon)}

.bill-control{margin-top:1.8rem}
.bill-label{display:block;font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:.18em;text-transform:uppercase;color:var(--cream-faint)}
.bill-out{display:block;font-family:var(--font-display);font-weight:600;font-size:clamp(2.6rem,5.5vw,4.4rem);line-height:1.05;letter-spacing:-.02em;margin:.35rem 0 .9rem;font-variant-numeric:tabular-nums}
.bill-ticks{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.72rem;color:var(--cream-faint);margin-top:.5rem}

input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:44px;background:transparent;cursor:pointer;--pct:50%}
input[type=range]::-webkit-slider-runnable-track{height:6px;border-radius:6px;background:linear-gradient(90deg,var(--amber) var(--pct),rgba(242,237,227,.14) var(--pct))}
input[type=range]::-moz-range-track{height:6px;border-radius:6px;background:rgba(242,237,227,.14)}
input[type=range]::-moz-range-progress{height:6px;border-radius:6px;background:var(--amber)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:30px;height:30px;margin-top:-12px;border-radius:50%;background:var(--cream);border:6px solid var(--amber);box-shadow:0 6px 18px rgba(0,0,0,.45)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--cream);border:6px solid var(--amber)}
input[type=range]:focus-visible{outline:2px solid var(--amber);outline-offset:4px;border-radius:8px}

.receipt{
  position:relative;margin-top:1.8rem;padding:1.4rem 1.4rem 0;border-radius:14px 14px 0 0;
  background:var(--cream);color:var(--ink);
  box-shadow:0 30px 60px -30px rgba(0,0,0,.7);
}
.receipt-top{display:flex;justify-content:space-between;gap:1rem;color:var(--ink-dim)}
.receipt-top span:last-child{color:var(--ink);font-weight:500}
.receipt-bar{display:flex;height:16px;border-radius:5px;overflow:hidden;margin:1rem 0 1.1rem;background:var(--line-ink)}
.rb{display:block;height:100%;transition:flex-basis .45s var(--ease-out)}
.rb-grid,.sw-grid{background:#3B3F47}
.rb-us,.sw-us{background:#5A88C9}
.rb-keep,.sw-keep{background:var(--amber)}
.sw{display:inline-block;width:.75rem;height:.75rem;border-radius:3px;flex:none;margin-top:.35rem}
.receipt-lines{list-style:none}
.receipt-lines li{display:flex;gap:.8rem;align-items:flex-start;padding:.75rem 0;border-top:1px solid var(--line-ink)}
.receipt-lines span{flex:1;line-height:1.35;color:var(--ink)}
.receipt-lines small{display:block;font-size:.8rem;color:var(--ink-dim)}
.receipt-lines b,.tear-inner b{font-family:var(--font-display);font-weight:600;font-size:1.25rem;font-variant-numeric:tabular-nums;white-space:nowrap}

/* The tear: "yours to keep" rips off the bottom of the receipt */
.receipt-tear{
  position:relative;margin:0 -1.4rem;padding:1.15rem 1.4rem 1.3rem;
  background:var(--amber);color:var(--carbon);
  transform-origin:12% 0;transition:transform .7s var(--ease-expo);
}
.receipt-tear::before{ /* perforation */
  content:"";position:absolute;left:0;right:0;top:-6px;height:12px;
  background:radial-gradient(circle at 6px 6px,var(--carbon-2) 4.5px,transparent 5px) 0 0/18px 12px repeat-x;
}
.receipt-tear.torn{transform:translateY(14px) rotate(-2.2deg)}
.tear-inner{display:flex;justify-content:space-between;align-items:center;gap:1rem;font-weight:600}
.tear-inner span{display:flex;gap:.6rem;align-items:center}
.tear-inner .sw-keep{background:var(--carbon);margin:0}
.tear-inner b{font-size:clamp(1.6rem,3vw,2.2rem)}

.mini-roof{position:relative;aspect-ratio:16/10;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:#0d1118}
.mini-roof canvas{position:absolute;inset:0;width:100%;height:100%}
.mini-tag{position:absolute;left:1rem;bottom:1rem;padding:.45rem .7rem;border-radius:8px;background:rgba(11,12,14,.72);color:var(--cream)}
.mini-tag span{color:var(--amber)}
.split-stats{display:grid;grid-template-columns:1fr 1fr;margin-top:1.2rem;border-top:1px solid var(--line)}
.split-stats>div{padding:1rem 0;border-bottom:1px solid var(--line)}
.split-stats>div:nth-child(2){padding-left:1.2rem;border-left:1px solid var(--line)}
.split-stats .wide{grid-column:1/-1}
.split-stats dt{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;color:var(--cream-faint)}
.split-stats dd{font-family:var(--font-display);font-weight:600;font-size:clamp(1.5rem,2.6vw,2.1rem);font-variant-numeric:tabular-nums;margin-top:.2rem}
.split-stats dd.hot{font-size:clamp(2.2rem,4.4vw,3.4rem);line-height:1}
.split-stats dd.small{font-family:var(--font-body);font-weight:400;font-size:1rem;color:var(--cream-dim)}
.split-note{margin-top:1rem;font-size:.9rem;color:var(--cream-dim);border-left:2px solid var(--amber);padding-left:.8rem}
.split-cta{margin-top:1.4rem;width:100%;justify-content:center}

/* ---------- Act 4 · The deal ---------- */
.deal-flow{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(4rem,9vw,8rem)}
.deal-lines{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.deal-lines path{fill:none;stroke:var(--ink);stroke-width:2;stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset 1.4s var(--ease-out);vector-effect:non-scaling-stroke}
.deal-lines path.ret{stroke:#B96A00;stroke-dasharray:6 7;stroke-dashoffset:0;opacity:0;transition:opacity 1s .9s}
.deal-flow.in .deal-lines path{stroke-dashoffset:0}
.deal-flow.in .deal-lines path.ret{opacity:1}
.deal-lines text{font-family:var(--font-mono);font-size:13px;letter-spacing:.08em;fill:#8a4f00;opacity:0;transition:opacity .8s 1.1s}
.deal-flow.in .deal-lines text{opacity:1}
.pulse{fill:var(--ember);opacity:0;transition:opacity .6s 1.2s}
.pulse--ret{fill:#B96A00}
.deal-flow.in .pulse{opacity:1}
.deal-node{position:relative;z-index:1;padding:1.6rem;border-radius:var(--radius);background:#fff;border:1px solid var(--line-ink);box-shadow:0 18px 40px -28px rgba(0,0,0,.35)}
.deal-node--us{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.deal-node.deal-node--us ul{color:rgba(242,237,227,.78)}
.deal-node--us .deal-kicker{color:var(--amber)}
.deal-node--you{outline:3px solid var(--amber);outline-offset:-3px}
.deal-kicker{display:block;color:#8a4f00;font-size:.72rem;margin-bottom:.8rem}
.deal-node .h3{margin-bottom:.9rem}
.deal-node ul{list-style:none;display:grid;gap:.55rem;font-size:.98rem;line-height:1.45;color:var(--ink-dim)}
.deal-node li{padding-left:1.1rem;position:relative}
.deal-node li::before{content:"";position:absolute;left:0;top:.62em;width:.45rem;height:2px;background:currentColor;opacity:.55}
.deal-foot{margin-top:2.6rem;max-width:46rem;font-size:.95rem;color:var(--ink-dim)}

/* ---------- Act 5 · Roofs rail ---------- */
.roofs{position:relative;height:var(--rail-h,300vh)}
.roofs-stage{position:sticky;top:0;height:100vh;height:100svh;display:flex;flex-direction:column;justify-content:center;overflow:hidden;padding-block:5rem 2rem}
.roofs-head{display:flex;justify-content:space-between;align-items:end;gap:2rem;margin-bottom:2.4rem}
.roofs-head .lead{max-width:24rem;font-size:1rem}
.roofs-track{display:flex;gap:1.25rem;padding-inline:max(4vw,calc((100vw - 1240px)/2));will-change:transform}
.roof-card{
  position:relative;flex:0 0 clamp(17rem,26vw,21rem);display:flex;flex-direction:column;
  padding:1.4rem;border-radius:var(--radius);background:var(--carbon-2);border:1px solid var(--line);
}
.roof-card--flag{border-color:rgba(255,179,0,.55);background:linear-gradient(180deg,rgba(255,179,0,.08),var(--carbon-2) 40%)}
.rc-badge{position:absolute;top:-.7rem;right:1rem;padding:.3rem .6rem;border-radius:6px;background:var(--amber);color:var(--carbon);font-size:.66rem}
.rc-top{display:flex;justify-content:space-between;align-items:baseline;color:var(--cream-faint)}
.rc-size{font-family:var(--font-display);font-weight:600;font-size:1.9rem;color:var(--cream)}
.rc-array{
  --n:12;height:5.2rem;margin:1rem 0 1.1rem;border-radius:8px;
  background:
    linear-gradient(rgba(11,12,14,.0),rgba(11,12,14,0)),
    repeating-linear-gradient(90deg,#15233a 0 9px,rgba(190,205,225,.2) 9px 10px),
    #2b2f36;
  background-size:calc(var(--n) * 1%) 100%,calc(var(--n) * 1%) 100%,100% 100%;
  background-repeat:no-repeat;
  box-shadow:inset 0 0 0 1px var(--line);
}
.roof-card dl{display:grid;grid-template-columns:1fr 1fr;gap:.9rem 1rem;margin-bottom:1.3rem}
.roof-card dt{font-family:var(--font-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-faint)}
.roof-card dd{font-weight:600;font-size:1.08rem}
.roof-card dd small{font-weight:400;color:var(--cream-dim)}
.roof-card dl div:last-child{grid-column:1/-1}
.roof-card dl div:last-child dd{font-family:var(--font-display);font-size:2rem}
.rc-try{margin-top:auto;justify-content:center}
.roof-card--end{justify-content:center;gap:1rem;background:transparent;border-style:dashed}
.roof-card--end p:not(.h3){color:var(--cream-dim)}
.roof-card--end .btn{align-self:flex-start}
.roofs-note{margin-top:1.6rem;max-width:none}

/* ---------- Act 6 · Promises ---------- */
.promises-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(2rem,6vw,6rem);align-items:start}
.promises-head{position:sticky;top:7rem}
.promises-head .lead{margin-top:1.4rem}
.promise-list{list-style:none;counter-reset:p}
.promise-list li{
  counter-increment:p;position:relative;padding:1.4rem 0 1.4rem 4.2rem;border-top:1px solid var(--line);
  font-size:var(--fs-lead);line-height:1.5;color:var(--cream-dim);
}
.promise-list li::before{content:counter(p,decimal-leading-zero);position:absolute;left:0;top:1.55rem;font-family:var(--font-mono);font-size:.8rem;color:var(--amber);letter-spacing:.1em}
.promise-list b{color:var(--cream);font-weight:600}

/* ---------- Act 7 · Engineer ---------- */
.eng-grid{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(2rem,6vw,5.5rem);align-items:center}
.eng-card{
  padding:2rem;border-radius:var(--radius);background:var(--ink);color:var(--cream);
  box-shadow:0 30px 60px -36px rgba(0,0,0,.55);transform:rotate(-1.5deg);
}
.eng-card .mono{color:var(--amber)}
.eng-card .eng-name{color:var(--cream);font-family:var(--font-display);font-weight:600;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.05;margin:.8rem 0 1.4rem}
.eng-creds{list-style:none;display:grid;gap:.5rem;font-size:.95rem;color:rgba(242,237,227,.75)}
.eng-creds li{padding-top:.5rem;border-top:1px solid rgba(242,237,227,.14)}
.eng-copy .h2{margin-bottom:1.3rem}
.eng-cred-line{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.eng-copy .btn-row{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.eng-ghost{border-color:var(--line-ink);color:var(--ink)}
.eng-ghost:hover{border-color:#8a4f00;color:#8a4f00}

/* ---------- Act 8 · Capital ---------- */
.capital{border-top:1px solid var(--line);background:linear-gradient(90deg,rgba(255,179,0,.07),transparent 55%)}
.capital-inner{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:1rem 3rem;align-items:center;padding-block:2.6rem}
.capital-inner p{color:var(--cream-dim);max-width:42rem}
.capital-fine{grid-column:2/-1;font-family:var(--font-mono);font-size:.72rem;color:var(--cream-faint)!important}

/* ---------- Mobile dock CTA ---------- */
.dock-cta{display:none}

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .split-head{grid-template-columns:1fr}
  .split-grid{grid-template-columns:1fr}
  .deal-flow{grid-template-columns:1fr;gap:1.2rem}
  .deal-lines{display:none}
  .deal-node--us{margin-inline:1.2rem}
  .promises-grid,.eng-grid{grid-template-columns:1fr}
  .promises-head{position:static}
  .capital-inner{grid-template-columns:1fr}
  .capital-fine{grid-column:auto}

  /* Rail becomes a native swipe on touch-size screens */
  .roofs{height:auto}
  .roofs-stage{position:static;height:auto;padding-block:var(--section-pad)}
  .roofs-head{flex-direction:column;align-items:flex-start}
  .roofs-track{overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;transform:none!important;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .roofs-track::-webkit-scrollbar{display:none}
  .roof-card{scroll-snap-align:center;flex-basis:min(82vw,20rem)}
}
@media (max-width: 720px){
  .roof-hero{height:260vh;height:260svh}
  .roof-line--a{top:5.6rem}
  .roof-lead{font-size:1rem}
  .roof-ctas .btn-lg{padding:1rem 1.4rem;font-size:.98rem}
  .roof-line--b,.roof-line--c{top:6.5rem;bottom:auto}
  .roof-hud{left:4vw;right:4vw;justify-content:space-between;bottom:5.2rem;padding:.7rem .9rem}
  .ledger-row,.ledger-row--flip{grid-template-columns:1fr;gap:.6rem}
  .ledger-row--flip .ledger-num{order:0;text-align:left}
  .ledger-row p,.ledger-row--flip p{justify-self:start}
  .receipt{padding:1.1rem 1.1rem 0}
  .receipt-tear{margin:0 -1.1rem;padding-inline:1.1rem}
  .tear-inner{flex-direction:column;align-items:flex-start;gap:.3rem}
  .promise-list li{padding-left:3rem}
  .dock-cta{
    display:flex;justify-content:center;gap:.5rem;position:fixed;z-index:60;left:4vw;right:4vw;bottom:max(1rem,env(safe-area-inset-bottom));
    padding:1rem;border-radius:999px;background:var(--amber);color:var(--carbon);font-weight:600;
    box-shadow:0 14px 30px -10px rgba(0,0,0,.7);transform:translateY(160%);transition:transform .45s var(--ease-out);
  }
  .dock-cta.show{transform:none}
}

/* ---------- Reduced motion / no-JS ---------- */
@media (prefers-reduced-motion: reduce){
  .roof-hero{height:auto}
  .roof-stage{position:relative;height:100vh;height:100svh}
  .roof-line--b,.roof-line--c{display:none}
  .roofs{height:auto}
  .roofs-stage{position:static;height:auto;padding-block:var(--section-pad)}
  .roofs-track{overflow-x:auto;scroll-snap-type:x mandatory}
  .receipt-tear,.rb,.roof-line{transition:none}
  .deal-lines path{transition:none;stroke-dashoffset:0}
}
html:not(.js) .roof-hero{height:auto}
html:not(.js) .roof-stage{position:relative}
html:not(.js) .roof-line--b,html:not(.js) .roof-line--c{display:none}
