/* ================================================================
   p-bundle.css · page styles for bundle.html (v5 "NIGHT SHIFT")
   Owned by the bundle page agent. Loaded right after style.css.
   Use the shared tokens/helpers from style.css; do not redefine
   nav, footer, buttons or other global chrome here.
   Rule: never hide content in CSS. Initial motion states are set by
   JS at runtime (OT / GSAP) so no-JS and reduced motion show all.
   The few display swaps below (.is-ringing / .is-typing) only switch
   between two labels of the same illustrative state, and the default
   (no JS) shows the final, answered state.
   Reference: ../V5-SPEC.md
   ================================================================ */

/* ================================================================
   HERO: copy left, "assembly rig" right (stacks at 920)
   ================================================================ */
.b-hero{padding-top:clamp(52px,8vh,92px);padding-bottom:clamp(64px,9vh,100px)}
.b-hero-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(36px,4.6vw,72px)}
.b-hero h1{font-size:clamp(2.7rem,5.5vw,5.3rem)}
@media(max-width:920px){
  .b-hero-grid{grid-template-columns:minmax(0,1fr);gap:clamp(40px,7vw,56px)}
  .b-hero h1{font-size:clamp(2.7rem,8.6vw,4.7rem)}
}
/* desktop: the hero owns the first screen. Content is centred above a
   100px band that stays clear for the floating demo launcher (bottom
   right), and the caution tape starts just below the fold. */
@media(min-width:921px){
  .b-hero{display:grid;align-content:center;min-height:calc(100vh - 73px);min-height:calc(100svh - 73px);padding-bottom:100px}
  .b-hero > .wrap{width:100%}
}
@media(min-width:921px) and (max-height:820px){.b-hero{padding-top:30px}}
/* phones: pull the rig up so its head (the chat chip) lands in the first screen */
@media(max-width:560px){
  .b-hero{padding-top:36px}
  .b-hero-grid{gap:30px}
  .b-hero-copy > p{margin-bottom:28px}
}
@media(max-width:440px){.b-hero-cta > a{flex:1 1 100%}}
/* .btn2 is notched with clip-path (style.css), which also clips its focus
   outline: on this page draw the keyboard ring inside the button instead */
.b-hero-cta .btn2:focus-visible,.b-plans .btn2:focus-visible{border-color:var(--orange2);color:var(--orange2);background-size:100% 100%;box-shadow:inset 0 0 0 2px rgba(255,162,94,.5)}
.b-hero-cta .btn2:focus-visible::before,.b-plans .btn2:focus-visible::before{background:var(--orange2)}
.b-hero-copy > p{max-width:600px}
.b-hero-cta{display:flex;flex-wrap:wrap;gap:12px 14px}

/* the rig: a blueprint workbench where the parts get bolted together */
.b-rig{
  position:relative;margin:0;width:100%;max-width:600px;justify-self:end;
  border:1px solid var(--line2);border-radius:var(--r-lg);padding:clamp(14px,1.7vw,22px);
  box-shadow:var(--sh-3),var(--sheen),0 0 0 1px rgba(0,0,0,.35);
}
.b-rig::before{ /* registration marks in the corners */
  content:"";position:absolute;inset:7px;pointer-events:none;border-radius:calc(var(--r-lg) - 6px);opacity:.6;
  --m:linear-gradient(var(--orange),var(--orange));
  background:
    var(--m) top left/14px 1.5px no-repeat,var(--m) top left/1.5px 14px no-repeat,
    var(--m) top right/14px 1.5px no-repeat,var(--m) top right/1.5px 14px no-repeat,
    var(--m) bottom left/14px 1.5px no-repeat,var(--m) bottom left/1.5px 14px no-repeat,
    var(--m) bottom right/14px 1.5px no-repeat,var(--m) bottom right/1.5px 14px no-repeat;
}
.b-rig::after{ /* shop light behind the bench */
  content:"";position:absolute;inset:-14% -10%;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(255,107,26,.15),rgba(255,107,26,.05) 55%,transparent);
}
@media(max-width:920px){.b-rig{justify-self:start;max-width:620px}}
/* .b-rig.is-muted (set by p-bundle.js while the real demo assistant is open): the rig dims to .5 via GSAP */

/* head = the figure caption: title + example-data note left, chat chip right */
.b-rig-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;margin-bottom:14px;min-height:44px;position:relative;z-index:3}
.b-rig-id{display:flex;flex-direction:column;gap:5px;min-width:0}
.b-rig-label{display:inline-flex;align-items:center;gap:8px;font-family:var(--fm);font-weight:700;font-size:.68rem;letter-spacing:2px;text-transform:uppercase;color:#c3cfdc;white-space:nowrap}
.b-rig-label svg{width:15px;height:15px;fill:var(--orange);filter:drop-shadow(0 0 6px rgba(255,107,26,.65));flex:none}
.b-rig-cap{display:block;padding-left:23px;font-family:var(--fm);font-size:.72rem;letter-spacing:1px;text-transform:uppercase;color:var(--mut);text-align:left;line-height:1.3}

/* new-chat chip (a visitor opens the chat on the site; the bot answers) */
.b-call{
  display:inline-flex;align-items:center;gap:10px;padding:5px 14px 5px 5px;border-radius:var(--r-pill);
  background:rgba(9,14,21,.9);border:1px solid rgba(74,222,128,.38);
  box-shadow:0 10px 28px rgba(0,0,0,.45),0 0 22px rgba(74,222,128,.08);
  transition:border-color .3s,box-shadow .3s;
}
.b-call-ico{position:relative;width:32px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none;background:rgba(74,222,128,.14);color:var(--ok);transition:background-color .3s,color .3s}
.b-call-ico svg{grid-area:1/1;width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.b-call-ico .b-ck{stroke-width:2.6}
.b-call-ico .b-dot{fill:currentColor;stroke:none}
.b-call .b-chat{display:none;width:17px;height:17px;stroke-width:1.9}
.b-ring{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--orange);opacity:0;pointer-events:none}
.b-call-txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.b-call-txt b{font-family:var(--fd);font-weight:700;font-size:.95rem;letter-spacing:.8px;text-transform:uppercase;color:var(--txt);white-space:nowrap}
.b-call-time{font-family:var(--fm);font-size:.64rem;letter-spacing:1px;color:var(--ok2);font-variant-numeric:tabular-nums;white-space:nowrap}
.b-call-in{display:none}
/* incoming state (class added by p-bundle.js while the new chat waits for an answer) */
.b-call.is-ringing{border-color:rgba(255,107,26,.6);box-shadow:0 10px 28px rgba(0,0,0,.45),0 0 26px rgba(255,107,26,.3)}
.b-call.is-ringing .b-call-ico{background:rgba(255,107,26,.16);color:var(--orange2)}
.b-call.is-ringing .b-chat{display:block}
.b-call.is-ringing .b-ck{display:none}
.b-call.is-ringing .b-call-in{display:inline}
.b-call.is-ringing .b-call-ok{display:none}
.b-call.is-ringing .b-call-time{color:var(--orange2)}
@media (prefers-reduced-motion: no-preference){
  .b-call.is-ringing .b-ring{animation:bRing 1.05s var(--ease-out) infinite}
  .b-call.is-ringing .b-ring + .b-ring{animation-delay:.42s}
  @keyframes bRing{0%{transform:scale(1);opacity:.85}100%{transform:scale(2.15);opacity:0}}
}

/* stage: browser + bot widget bolted together, owner's text bottom-left.
   Grid flow only; the bot overlaps the browser by a % of its own column. */
.b-rig{container-type:inline-size;container-name:rig}
.b-stage{position:relative;display:grid;grid-template-columns:minmax(0,1fr) clamp(232px,54%,300px);column-gap:14px;align-items:start}
.b-site{grid-column:1/-1;grid-row:1;width:88%}
.b-site .fb-bar{height:32px}
.b-wire{display:block;width:100%;height:100%}
.b-wire .w-bg{fill:#0c1420}
.b-wire .w-s{fill:#152233;stroke:rgba(148,178,214,.42);stroke-width:1.2}
.b-wire .w-nav,.b-wire .w-foot{fill:#0a111b}
.b-wire .w-drop{fill:var(--orange);stroke:var(--orange)}
.b-wire .w-bar{fill:rgba(148,178,214,.32)}
.b-wire .w-btn{fill:var(--orange);stroke:#ffa25e}
.b-wire .w-kick{fill:rgba(255,107,26,.85);stroke:var(--orange)}
.b-wire .w-h{fill:#dfe7f0;stroke:#dfe7f0}
.b-wire .w-p{fill:rgba(148,178,214,.36)}
.b-wire .w-img{fill:#111d2b}
.b-wire .w-x{fill:none;stroke:rgba(148,178,214,.2)}
.b-wire .w-sun{fill:rgba(255,107,26,.14);stroke:rgba(255,107,26,.7)}
.b-wire .w-wrench{fill:none;stroke:#ffa25e;stroke-width:1.6;stroke-linejoin:round}
.b-wire .w-tile{fill:#122030}
.b-wire .w-ico{fill:rgba(255,107,26,.18);stroke:var(--orange)}
.b-wire .w-t{font-family:var(--fd);font-weight:800;letter-spacing:1px}
.b-wire .w-logo{font-size:13.5px;fill:#eaf0f7}
.b-wire .w-btntx{font-family:var(--fb);font-size:7.6px;font-weight:800;letter-spacing:.6px;fill:#1a0d04;text-anchor:middle}
.b-wire .w-tl{font-size:10px;font-weight:700;fill:#cfd9e4;letter-spacing:.8px}

.b-bot{
  position:relative;z-index:2;grid-column:2;grid-row:2;margin-top:-54%;
  background:linear-gradient(180deg,#15212f,#0f1924);border:1px solid #2a3d55;border-radius:16px;overflow:hidden;
  box-shadow:0 26px 60px rgba(0,0,0,.62),0 0 0 1px rgba(0,0,0,.45),0 0 44px -12px rgba(255,107,26,.4);
  transition:box-shadow .5s var(--ease-out),border-color .5s;
}
.b-bot.is-welded{border-color:#ffc29a;box-shadow:0 26px 60px rgba(0,0,0,.62),0 0 0 1px rgba(255,162,94,.5),0 0 36px rgba(255,107,26,.75);transition-duration:.06s}
.b-bot-head{display:flex;align-items:center;gap:9px;padding:10px 14px;background:#0d1621;border-bottom:2px solid var(--orange)}
.b-bot-head b{font-family:var(--fd);font-weight:700;font-size:1rem;letter-spacing:.6px;text-transform:uppercase;color:#fff;white-space:nowrap}
.b-bot-st{margin-left:auto;font-family:var(--fm);font-size:.58rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--mut);white-space:nowrap}
.b-st-typing{display:none;align-items:center;gap:3px;color:var(--ok2)}
.b-st-typing i{width:4px;height:4px;border-radius:50%;background:currentColor;display:inline-block}
.b-bot.is-typing .b-st-on{display:none}
.b-bot.is-typing .b-st-typing{display:inline-flex}
@media (prefers-reduced-motion: no-preference){
  .b-bot.is-typing .b-st-typing i{animation:bDot 1s ease-in-out infinite}
  .b-bot.is-typing .b-st-typing i:nth-child(2){animation-delay:.15s}
  .b-bot.is-typing .b-st-typing i:nth-child(3){animation-delay:.3s}
  @keyframes bDot{0%,60%,100%{transform:translateY(0);opacity:.45}30%{transform:translateY(-3px);opacity:1}}
}
.b-log{display:flex;flex-direction:column;gap:7px;padding:12px}
/* .hero p styles every <p> in the hero: reset them for chat bubbles */
.b-bot .b-m{margin:0;max-width:86%;font-size:.78rem;line-height:1.42;padding:7px 11px;border-radius:11px;color:#e8edf2}
.b-bot .b-m.u{align-self:flex-end;background:var(--grad);color:#1a0d04;font-weight:600;border-bottom-right-radius:3px}
.b-bot .b-m.b{align-self:flex-start;background:#1e2d3d;border-bottom-left-radius:3px}
.b-booked{
  display:inline-flex;align-items:center;margin-left:3px;padding:1px 7px;border-radius:var(--r-pill);vertical-align:1px;white-space:nowrap;
  background:rgba(74,222,128,.14);border:1px solid rgba(74,222,128,.38);color:var(--ok);
  font-family:var(--fm);font-size:.6rem;font-weight:700;letter-spacing:.5px;
}
/* the owner's phone lights up: instant text card */
.b-note{
  grid-column:1;grid-row:2;align-self:end;position:relative;z-index:2;
  display:flex;align-items:center;gap:10px;padding:10px 12px;min-width:0;
  background:linear-gradient(180deg,#1f4029,#17311f);border:1px solid #2f6040;border-radius:14px;color:var(--ok2);
  /* --pile: earlier texts of the night stacked under the newest one (set by p-bundle.js) */
  --pile:0 0 0 0 transparent;
  box-shadow:var(--pile),0 18px 40px rgba(0,0,0,.5),0 0 26px rgba(74,222,128,.14);
  outline:0 solid transparent;
}
.b-note[data-pile="1"]{--pile:0 10px 0 -5px #17321f,0 10px 0 -4px #2b5839}
.b-note[data-pile="2"]{--pile:0 10px 0 -5px #17321f,0 10px 0 -4px #2b5839,0 20px 0 -10px #11271a,0 20px 0 -9px #224630}
.b-n-ico{width:30px;height:30px;border-radius:8px;background:rgba(74,222,128,.14);display:grid;place-items:center;flex:none}
.b-n-ico svg{width:16px;height:16px;fill:none;stroke:var(--ok);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.b-n-txt{display:flex;flex-direction:column;min-width:0;line-height:1.25}
.b-n-txt small{font-family:var(--fm);font-size:.55rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:rgba(126,226,160,.78);text-wrap:balance;margin-bottom:1px}
.b-n-txt .nw{white-space:nowrap}
.b-n-txt b{font-family:var(--fd);font-weight:700;font-size:.98rem;letter-spacing:.7px;text-transform:uppercase;color:#eafff0}
.b-n-txt > span{font-family:var(--fm);font-size:.64rem;color:var(--ok2)}
/* the pile peeks out below the note: keep that room inside the rig */
.b-stage{padding-bottom:4px}

@container rig (max-width: 499px){
  .b-stage{grid-template-columns:minmax(0,1fr)}
  .b-site{width:94%}
  .b-bot{grid-column:1;justify-self:end;width:86%;margin-top:-21%}
  .b-note{grid-column:1;grid-row:3;align-self:start;justify-self:start;margin-top:12px;width:min(92%,340px)}
  .b-rig-head{gap:8px 14px;margin-bottom:12px}
  .b-rig-id{gap:4px}
}
/* short desktop screens (1280x720, 1366x768): a tighter rig so the whole
   first screen holds it */
@media(min-width:921px) and (max-height:820px){
  .b-rig{padding:16px}
  .b-rig-head{margin-bottom:10px}
  .b-stage{padding-bottom:0}
}

/* ================================================================
   CAUTION TAPE strip between hero and pricing (marquee)
   ================================================================ */
.b-tape{position:relative;overflow-x:clip;padding:34px 0 28px;z-index:2}
/* the stripes live on their own layer so the whole tape can travel
   (one stripe period = 36px / cos 45deg = 50.9117px, so the loop is seamless) */
.b-tape .tape{--tape-h:46px;justify-content:flex-start;gap:0;background:var(--tape-b)}
.b-tape .tape::before{
  content:"";position:absolute;top:0;bottom:0;left:0;right:-52px;pointer-events:none;
  background:repeating-linear-gradient(-45deg,var(--tape-a) 0 18px,var(--tape-b) 18px 36px);
}
/* desktop: the tilted tape's raised right end (~2.1vw) stays below the fold */
@media(min-width:921px){.b-tape{padding-top:max(34px,calc(2.2vw + 8px))}}
.b-tape-track{position:relative;z-index:1;display:flex;flex:none;width:max-content}
.b-tape-track .tape-label{margin-right:64px}
/* p-bundle.js adds .is-run after the hero intro and only while the tape is on
   screen; it also sets --stripe-t so the stripes move at the labels' speed.
   No JS: the tape simply stands still. */
@media (prefers-reduced-motion: no-preference){
  .b-tape-track{animation:bTape 52s linear infinite paused}
  .b-tape .tape::before{animation:bStripe var(--stripe-t,2.1s) linear infinite paused}
  .b-tape.is-run .b-tape-track,.b-tape.is-run .tape::before{animation-play-state:running}
  @keyframes bTape{to{transform:translateX(-50%)}}
  @keyframes bStripe{to{transform:translateX(-50.9117px)}}
}
.ot-static .b-tape-track,.ot-static .b-tape .tape::before{animation:none}

/* ================================================================
   01 / PRICING: odometer prices, punched savings stamp, drawn checks
   ================================================================ */
.b-plans .price{font-variant-numeric:tabular-nums}
.b-plans .save{
  position:relative;transform:rotate(-2deg);border-radius:6px;
  text-transform:uppercase;letter-spacing:1px;font-size:.72rem;
  border:1.5px solid rgba(74,222,128,.6);
  box-shadow:inset 0 0 0 2px rgba(10,15,22,.85),inset 0 0 0 3px rgba(74,222,128,.22);
}
.b-ink{position:absolute;inset:-3px;border-radius:8px;border:2px solid var(--ok);pointer-events:none;opacity:0}
.b-plans.has-chk li::before{content:none}
.b-chk{position:absolute;left:1px;top:13.5px;width:17px;height:17px;fill:none;stroke:var(--orange);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(255,107,26,.5))}
.b-plans .plan.wire{--wire-bg:linear-gradient(180deg,#152234,var(--panel3))}

/* rolling digits (shared by prices + calculator readout) */
.b-odo{display:inline-flex;align-items:flex-start;line-height:1;white-space:nowrap;vertical-align:top}
.b-odo-c{display:inline-block;height:1em;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 87%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0,#000 13%,#000 87%,transparent 100%)}
.b-odo-s{display:block;transition-property:transform;transition-timing-function:var(--ease-out);transition-duration:.8s}
.b-odo-s > i{display:block;height:1em;line-height:1;font-style:normal;text-align:center}
.b-odo-x{display:inline-block;height:1em;line-height:1;white-space:pre}
/* while a price is rolling it glows hot, then settles to the gradient */
.b-roll{position:relative;display:inline-block;line-height:1}
.b-roll-g{visibility:hidden}
.b-roll .b-odo{position:absolute;left:0;top:0}
.price .b-roll .b-odo{color:#fff;-webkit-text-fill-color:#fff;filter:drop-shadow(0 0 10px rgba(255,107,26,.6))}
.mo .b-roll .b-odo{color:inherit;-webkit-text-fill-color:currentColor}

/* ================================================================
   02 / THE MATH: missed-job calculator
   ================================================================ */
.b-calc{
  position:relative;margin-top:clamp(56px,7vw,96px);border:1px solid var(--line2);border-radius:var(--r-xl);overflow:hidden;
  background:linear-gradient(180deg,rgba(20,31,46,.97),rgba(12,19,29,.98));box-shadow:var(--sh-3),var(--sheen);
}
.b-calc > .tape.thin{--tape-h:10px;box-shadow:none}
.b-calc-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 20px;padding:clamp(22px,3vw,34px) clamp(20px,3vw,40px) 0}
.b-calc-title{font-size:clamp(1.7rem,2.6vw,2.3rem);font-weight:800}
.b-calc-chip{white-space:normal}
.b-calc-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.08fr);gap:clamp(24px,3.4vw,48px);padding:clamp(16px,2.2vw,26px) clamp(20px,3vw,40px) clamp(24px,3vw,40px);align-items:start}
@media(max-width:900px){.b-calc-grid{grid-template-columns:1fr}}

.b-field{padding:18px 0 14px;border-bottom:1px dashed var(--line2)}
.b-field:first-child{padding-top:8px}
.b-field:last-child{border-bottom:0}
.b-field-top{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 16px}
.b-field label{font-weight:600;font-size:1rem;color:var(--txt);cursor:pointer}
.b-field output{font-family:var(--fm);font-weight:700;font-size:1.05rem;color:var(--orange2);white-space:nowrap;font-variant-numeric:tabular-nums}
.b-field output small{font-size:.7rem;font-weight:400;color:var(--mut);margin-left:6px}
.b-scale{display:flex;justify-content:space-between;margin-top:2px;font-family:var(--fm);font-size:.66rem;letter-spacing:1px;color:var(--mut)}

/* range = a fader on a mixing desk: orange fill, notched cap */
.b-range{-webkit-appearance:none;appearance:none;display:block;width:100%;height:32px;margin:10px 0 0;background:transparent;cursor:pointer;--p:50%}
.b-range:focus-visible{outline:none;box-shadow:none}
.b-range::-webkit-slider-runnable-track{
  height:8px;border-radius:8px;
  background:linear-gradient(90deg,var(--ember),var(--orange) var(--p),#172435 var(--p));
  box-shadow:inset 0 1px 3px rgba(0,0,0,.65),0 0 0 1px var(--line2);
}
.b-range::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;width:22px;height:30px;margin-top:-11px;border:0;border-radius:5px;
  background:linear-gradient(90deg,transparent 9px,rgba(20,11,5,.55) 9px 13px,transparent 13px),linear-gradient(180deg,#ffd6b8,#ff8a3d 45%,#e55a0d);
  box-shadow:0 0 0 2px #0a0f16,0 0 0 3px rgba(255,107,26,.65),0 0 18px rgba(255,107,26,.5),0 4px 10px rgba(0,0,0,.5);
  transition:transform .18s var(--ease-out),box-shadow .2s;
}
.b-range::-moz-range-track{height:8px;border-radius:8px;background:#172435;box-shadow:inset 0 1px 3px rgba(0,0,0,.65),0 0 0 1px var(--line2)}
.b-range::-moz-range-progress{height:8px;border-radius:8px;background:linear-gradient(90deg,var(--ember),var(--orange))}
.b-range::-moz-range-thumb{
  width:22px;height:30px;border:0;border-radius:5px;
  background:linear-gradient(90deg,transparent 9px,rgba(20,11,5,.55) 9px 13px,transparent 13px),linear-gradient(180deg,#ffd6b8,#ff8a3d 45%,#e55a0d);
  box-shadow:0 0 0 2px #0a0f16,0 0 0 3px rgba(255,107,26,.65),0 0 18px rgba(255,107,26,.5),0 4px 10px rgba(0,0,0,.5);
}
.b-range:active::-webkit-slider-thumb{transform:scale(1.08)}
.b-range:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 2px #0a0f16,0 0 0 5px var(--orange2),0 0 26px rgba(255,107,26,.85)}
.b-range:focus-visible::-moz-range-thumb{box-shadow:0 0 0 2px #0a0f16,0 0 0 5px var(--orange2),0 0 26px rgba(255,107,26,.85)}

/* readout: the punch-clock display */
.b-calc-out{
  position:relative;background:#070b11;border:1px solid var(--line);border-radius:var(--r);padding:clamp(18px,2.3vw,28px);
  box-shadow:inset 0 0 50px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.03),0 0 0 1px rgba(0,0,0,.4);
}
.b-calc-out::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.02) 0 1px,transparent 1px 3px)}
.b-ro-row{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:18px 24px}
@media(max-width:520px){.b-ro-row{grid-template-columns:1fr}}
.b-ro{min-width:0}
.b-ro-label{display:block;margin-bottom:10px;font-family:var(--fm);font-size:.66rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--mut)}
.b-ro-num{display:block;font-family:var(--fd);font-weight:800;font-size:clamp(2.3rem,3.6vw,3.4rem);line-height:1;color:var(--txt);font-variant-numeric:tabular-nums;white-space:nowrap}
.b-ro-hot .b-ro-num{color:var(--neon-core);filter:drop-shadow(0 0 1px rgba(255,248,240,.7)) drop-shadow(0 0 12px rgba(255,107,26,.55))}

.b-bars{display:grid;gap:14px;margin-top:clamp(22px,2.4vw,30px)}
.b-bar{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:7px 14px}
.b-bar span{min-width:0;font-family:var(--fm);font-size:.68rem;letter-spacing:.4px;color:var(--mut)}
.b-bar b{font-family:var(--fm);font-size:.84rem;color:var(--txt);font-variant-numeric:tabular-nums;white-space:nowrap}
.b-bar-lost b{color:var(--orange2)}
.b-bar i{grid-column:1/-1;position:relative;display:block;height:10px;border-radius:6px;overflow:hidden;background:#0e1722;box-shadow:inset 0 0 0 1px var(--line)}
.b-bar i::before{content:"";position:absolute;inset:0;border-radius:inherit;transform-origin:0 50%;transform:scaleX(var(--w,1));transition:transform .9s var(--ease-out)}
.b-bar-lost i::before{background:linear-gradient(90deg,var(--ember),var(--orange) 70%,#ffc59a);box-shadow:0 0 14px rgba(255,107,26,.6)}
.b-bar-crew i::before{background:linear-gradient(90deg,rgba(148,178,214,.32),rgba(148,178,214,.68))}
.b-vs{margin-top:20px;font-family:var(--fd);font-weight:700;font-size:1.3rem;letter-spacing:.5px;text-transform:uppercase;color:var(--txt);line-height:1.15}
.b-vs b{color:var(--orange);font-variant-numeric:tabular-nums;text-shadow:0 0 16px rgba(255,107,26,.45)}
.b-formula{margin-top:14px;padding-top:14px;border-top:1px dashed var(--line2);font-family:var(--fm);font-size:.72rem;line-height:1.8;letter-spacing:.2px;color:var(--mut);overflow-wrap:anywhere}

/* ================================================================
   CTA: the ghost word is an in-flow NEON SHOP SIGN above the heading:
   hollow letters drawn as glowing tubes (stroke + drop-shadow glow).
   p-bundle.js flickers it on (--lit 0 -> 1) as the section arrives,
   the last neon of the page after the hero headline. Lit by default.
   ================================================================ */
.b-cta .cta-ghost{
  position:relative;left:auto;top:auto;transform:none;z-index:0;
  display:flex;justify-content:center;margin:0 calc(-1 * var(--gutter)) .06em;
  font-size:clamp(4.6rem,14vw,12rem);line-height:.86;letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:2px #ffcfa8;
  filter:drop-shadow(0 0 2px rgba(255,170,110,.85)) drop-shadow(0 0 14px rgba(255,107,26,.5));
}
@supports (color:color-mix(in srgb,red 50%,blue)){
  .b-cta .cta-ghost{
    -webkit-text-stroke-color:color-mix(in srgb,#ffcfa8 calc(var(--lit,1)*100%),#3a2416);
    filter:drop-shadow(0 0 2px rgb(255 170 110/calc(var(--lit,1)*.85))) drop-shadow(0 0 14px rgb(255 107 26/calc(var(--lit,1)*.5)));
  }
}
@media(max-width:560px){.b-cta .cta-ghost{-webkit-text-stroke-width:1.5px}}
.b-cta h2{position:relative;z-index:1}
.b-cta p{text-wrap:balance}
/* the demo link balances on its own (never leaves the arrow alone on a line) */
.b-cta p a{display:inline-block;max-width:100%;text-wrap:balance;transition:text-shadow .25s}
.b-cta p a:hover{text-shadow:0 0 14px rgba(255,107,26,.6)}