/* ================================================================
   p-chatbot.css · page styles for chatbot.html (v5 "NIGHT SHIFT")
   Owned by the chatbot 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.
   Reference: ../V5-SPEC.md

   Sections
   1. Hero: copy + "after hours" phone performance + owner text card
      (a lock-screen banner on the phone under 1180px, set by JS)
   2. 01 Pricing: tiers with level meters, level-up conduits, live wire
   3. 02 Live demo: work-order hints + job-site console around the bot
   4. 03 ROI: caution tape, 9-month punch bar
   5. CTA: molten "24/7" ghost
   ================================================================ */

/* ================================================================
   1. HERO
   ================================================================ */
.cb-hero .hero-grid{align-items:center}
@media(min-width:1180px){.cb-hero .hero-grid{grid-template-columns:minmax(0,1fr) 556px}}
.cb-hero p{margin-bottom:30px}
.cb-actions{display:flex;flex-wrap:wrap;gap:14px;align-items:center}

/* stage = phone + owner card: stacked and centered, side by side once the hero is two columns */
.cb-stage{--cbw:300px;width:100%;max-width:600px;justify-self:center;position:relative;z-index:1}
.cb-stage-in{position:relative;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:18px}
@media(min-width:1180px){
  .cb-stage-in{grid-template-columns:minmax(0,232px) var(--cbw);align-items:end;justify-content:center;gap:24px}
  .cb-owner{order:-1;margin-bottom:118px}
}
/* short laptop screens (1280x720, 1366x768, 1024x768): smaller phone + headline so the
   CTA row and the whole phone sit above the fold */
@media(min-width:920px) and (max-height:820px){
  .cb-stage{--cbw:252px}
  .cb-hero{padding-top:clamp(34px,5vh,48px);padding-bottom:clamp(44px,7vh,64px)}
  .cb-hero h1{font-size:clamp(3rem,5.6vw,4.5rem)}
  .cb-hero p{margin:18px 0 26px}
  .cb-hero .kicker{margin-bottom:14px}
}
@media(min-width:1180px) and (max-height:820px){
  .cb-hero .hero-grid{grid-template-columns:minmax(0,1fr) 520px}
  .cb-owner{margin-bottom:96px}
}

.cb-phone-wrap{position:relative;margin:0;display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.cb-phone{--fp-w:var(--cbw);position:relative;z-index:1;width:var(--fp-w);max-width:100%}
.cb-cap{position:relative;z-index:1;font-family:var(--fm);font-size:var(--t-micro);letter-spacing:2.5px;text-transform:uppercase;color:var(--mut)}

/* "always listening" rings + shop-light glow behind the phone */
.cb-rings{position:absolute;left:50%;top:46%;width:0;height:0;z-index:0;pointer-events:none}
.cb-rings::before{content:"";position:absolute;left:-310px;top:-310px;width:620px;height:620px;border-radius:50%;
  background:radial-gradient(closest-side,rgba(255,107,26,.22),rgba(255,107,26,.07) 52%,transparent 100%)}
.cb-rings i{position:absolute;left:-250px;top:-250px;width:500px;height:500px;border-radius:50%;border:1px solid rgba(255,107,26,.16)}
.cb-rings i:nth-child(2){transform:scale(.78);border-color:rgba(255,107,26,.12)}
.cb-rings i:nth-child(3){transform:scale(.56);border-style:dashed;border-color:rgba(var(--steel),.14)}

/* phone screen: a tiny chat app */
.cb-app{position:absolute;inset:0;display:flex;flex-direction:column;font-family:var(--fb);color:var(--txt);
  background:radial-gradient(120% 55% at 50% 0%,rgba(255,107,26,.1),transparent 62%),linear-gradient(180deg,#0e1622,#0a0f16)}
.cb-status{flex:none;height:44px;display:flex;align-items:center;justify-content:space-between;padding:4px 22px 0 28px;
  font-size:.74rem;font-weight:700;letter-spacing:.2px}
.cb-icons{display:flex;align-items:center;gap:6px}
.cb-sig{display:flex;align-items:flex-end;gap:1.5px;height:9px}
.cb-sig b{display:block;width:3px;background:var(--txt);border-radius:1px}
.cb-sig b:nth-child(1){height:3px}.cb-sig b:nth-child(2){height:5px}.cb-sig b:nth-child(3){height:7px}.cb-sig b:nth-child(4){height:9px}
.cb-bat{position:relative;display:block;width:20px;height:10px;border:1px solid rgba(234,240,247,.55);border-radius:3px}
.cb-bat::before{content:"";position:absolute;inset:1.5px;right:5px;border-radius:1px;background:var(--txt)}
.cb-bat::after{content:"";position:absolute;right:-3px;top:2.5px;width:2px;height:3px;border-radius:0 1px 1px 0;background:rgba(234,240,247,.55)}
.cb-apphead{flex:none;display:flex;align-items:center;gap:10px;padding:4px 14px 10px;border-bottom:1px solid rgba(var(--steel),.1)}
.cb-av{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--grad);box-shadow:0 0 14px rgba(255,107,26,.45)}
.cb-av svg{width:17px;height:17px;fill:#160b04}
.cb-who{display:flex;flex-direction:column;min-width:0;line-height:1.15}
.cb-who b{font-family:var(--fd);font-weight:800;text-transform:uppercase;letter-spacing:.6px;font-size:1rem}
.cb-who small{display:flex;align-items:center;gap:6px;margin-top:3px;font-family:var(--fm);font-size:.6rem;letter-spacing:.5px;color:var(--ok2)}
.cb-who .led{width:6px;height:6px}

.cb-chat{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:10px 11px 8px;
  overflow-anchor:none}   /* rows grow bottom-up: scroll anchoring must never pick a bubble and drag the page along */
.cb-chat-in{display:flex;flex-direction:column;gap:7px}
.cb-row{display:flex}
.cb-row.is-user{justify-content:flex-end}
.cb-b{max-width:86%;padding:8px 12px 9px;border-radius:14px;font-size:.8rem;line-height:1.42;
  scale:var(--s,1);translate:0 var(--ty,0px);transform-origin:0 100%}
.is-user > .cb-b{transform-origin:100% 100%}
.is-bot > .cb-b{background:#1c2a3c;border:1px solid rgba(var(--steel),.1);border-bottom-left-radius:4px}
.is-user > .cb-b{background:var(--grad);color:#160b04;font-weight:500;border-bottom-right-radius:4px}
.cb-dots{display:flex;align-items:center;gap:4px;padding:10px 12px}
.cb-dots i{display:block;width:5px;height:5px;border-radius:50%;background:var(--mut)}

/* booked confirmation */
.cb-booked{flex:1;display:flex;align-items:flex-start;gap:10px;padding:9px 11px;border-radius:13px;
  background:linear-gradient(180deg,rgba(29,58,37,.96),rgba(17,36,25,.96));border:1px solid rgba(74,222,128,.45);
  box-shadow:0 0 22px -6px rgba(74,222,128,.42)}
.cb-ck{width:26px;height:26px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--ok);box-shadow:0 0 12px rgba(74,222,128,.6)}
.cb-ck svg{width:15px;height:15px;fill:none;stroke:#0b2414;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.cb-bk{display:flex;flex-direction:column;min-width:0;line-height:1.3;font-size:.76rem;color:#cfe9d8}
.cb-bk b{font-family:var(--fd);font-weight:800;text-transform:uppercase;letter-spacing:1.2px;font-size:.95rem;color:var(--ok)}
.cb-bk .mono{font-size:.64rem;letter-spacing:.3px;color:var(--ok2);margin-top:2px}

/* fake input bar (decorative) */
.cb-input{flex:none;display:flex;align-items:center;gap:8px;padding:6px 11px 16px}
.cb-field{flex:1;min-width:0;height:34px;display:flex;align-items:center;
  padding:0 13px;border-radius:17px;background:#0a111a;border:1px solid var(--line2);font-size:.74rem}
.cb-fx{flex:1;min-width:0;display:flex;align-items:center;overflow:hidden;white-space:nowrap}
.cb-field.is-typing{border-color:rgba(255,107,26,.55)}
.cb-field.ovf .cb-fx{justify-content:flex-end;-webkit-mask-image:linear-gradient(90deg,transparent,#000 18px);mask-image:linear-gradient(90deg,transparent,#000 18px)}
.cb-field.is-typing .cb-ph{display:none}
.cb-ph{color:var(--dim)}
.cb-typed{color:var(--txt)}
.cb-field.is-typing .cb-typed::after{content:"";display:inline-block;width:1.5px;height:1.05em;margin-left:1px;vertical-align:-2px;background:var(--orange)}
.cb-send{scale:var(--s,1);width:34px;height:34px;flex:none;border-radius:50%;display:grid;place-items:center;background:var(--grad);box-shadow:0 0 12px rgba(255,107,26,.4)}
.cb-send svg{width:16px;height:16px;fill:none;stroke:#160b04;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

/* the owner's phone gets the text */
.cb-owner{position:relative;z-index:2;width:100%;max-width:300px;translate:var(--ox,0px) var(--oy,0px);display:flex;flex-direction:column;gap:3px;
  padding:14px 16px 15px;border-radius:16px;
  background:linear-gradient(180deg,rgba(24,42,32,.97),rgba(14,26,21,.97));border:1px solid rgba(74,222,128,.4);
  box-shadow:var(--sh-2),0 0 34px -8px rgba(74,222,128,.35),var(--sheen)}
.cb-owner-top{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.cb-owner-ico{width:28px;height:28px;flex:none;border-radius:9px;display:grid;place-items:center;background:rgba(74,222,128,.15)}
.cb-owner-ico svg{width:16px;height:16px;fill:none;stroke:var(--ok);stroke-width:2;stroke-linecap:round}
.cb-owner-lbl{font-family:var(--fm);font-size:.6rem;font-weight:700;line-height:1.3;letter-spacing:1.2px;text-transform:uppercase;color:var(--ok2)}
.cb-owner-now{margin-left:auto;align-self:flex-start;font-family:var(--fm);font-size:.6rem;color:#7fae90}
.cb-owner b{font-family:var(--fd);font-weight:800;text-transform:uppercase;letter-spacing:.8px;font-size:1.3rem;line-height:1.05;color:#fff}
.cb-owner > span{font-size:.82rem;line-height:1.45;color:#c4e0cd}

/* thread history between loops (JS only): "New chat" divider, older rows dimmed by JS */
.cb-sep{display:flex;align-items:center;gap:8px;padding:3px 4px;font-family:var(--fm);font-size:.56rem;font-weight:700;line-height:1.4;
  letter-spacing:1.6px;text-transform:uppercase;color:var(--dim)}
.cb-sep::before,.cb-sep::after{content:"";flex:1;height:1px;background:rgba(var(--steel),.16)}

/* under 1180px (JS adds .is-banner while motion runs): the owner's text drops over the
   top of the phone screen like a lock-screen notification, just under the island */
.cb-stage.is-banner .cb-owner{position:absolute;top:50px;left:50%;z-index:3;max-width:none;
  width:calc(min(var(--cbw),100%) - 24px);margin-left:calc(min(var(--cbw),100%) / -2 + 12px);
  padding:10px 12px 11px;gap:1px;border-radius:15px;
  box-shadow:0 18px 34px -12px rgba(0,0,0,.8),0 0 30px -8px rgba(74,222,128,.42),var(--sheen)}
.cb-stage.is-banner .cb-owner-top{gap:7px;margin-bottom:5px}
.cb-stage.is-banner .cb-owner-ico{width:22px;height:22px;border-radius:7px}
.cb-stage.is-banner .cb-owner-ico svg{width:13px;height:13px}
.cb-stage.is-banner .cb-owner-lbl{font-size:.55rem;letter-spacing:.7px}
.cb-stage.is-banner .cb-owner-now{font-size:.55rem}
.cb-stage.is-banner .cb-owner b{font-size:1.06rem}
.cb-stage.is-banner .cb-owner > span{font-size:.72rem;line-height:1.38}

@media (prefers-reduced-motion: no-preference){
  .cb-rings i{animation:cbRing 7.5s cubic-bezier(.2,.6,.35,1) infinite;opacity:0}
  .cb-rings i:nth-child(2){animation-delay:2.5s}
  .cb-rings i:nth-child(3){animation-delay:5s}
  @keyframes cbRing{0%{transform:scale(.42);opacity:0}18%{opacity:1}100%{transform:scale(1.12);opacity:0}}
  .cb-stage.is-paused .cb-rings i,.cb-stage.is-paused .cb-dots i{animation-play-state:paused}
  html.ot-static .cb-rings i{animation:none;opacity:1}
  .cb-dots i{animation:cbDot 1.1s ease-in-out infinite}
  .cb-dots i:nth-child(2){animation-delay:.16s}.cb-dots i:nth-child(3){animation-delay:.32s}
  @keyframes cbDot{0%,60%,100%{transform:none;opacity:.45}30%{transform:translateY(-3px);opacity:1}}
  .cb-field.is-typing .cb-typed::after{animation:blink 1s steps(1) infinite}
  .cb-booked.ping{animation:cbPing 1.3s ease-out 2}
  @keyframes cbPing{0%{box-shadow:0 0 0 0 rgba(74,222,128,.6),0 0 22px -6px rgba(74,222,128,.42)}100%{box-shadow:0 0 0 10px rgba(74,222,128,0),0 0 22px -6px rgba(74,222,128,.42)}}
  .cb-owner.buzz{animation:cbOwnerGlow 1.6s ease-out}
  @keyframes cbOwnerGlow{0%{box-shadow:var(--sh-2),0 0 0 0 rgba(74,222,128,.55),0 0 60px -4px rgba(74,222,128,.6),var(--sheen)}100%{box-shadow:var(--sh-2),0 0 0 16px rgba(74,222,128,0),0 0 34px -8px rgba(74,222,128,.35),var(--sheen)}}
  .cb-owner.buzz .cb-owner-ico{animation:cbIco .5s linear 2}
  @keyframes cbIco{20%{transform:rotate(-14deg)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(5deg)}}
}

/* ================================================================
   2. 01 PRICING · level meters, conduits, live wire
   ================================================================ */
.tiers.cb-tiers{grid-template-columns:minmax(0,620px);justify-content:center;gap:0;align-items:stretch}
@media(min-width:1080px){.tiers.cb-tiers{grid-template-columns:minmax(0,1fr) 44px minmax(0,1fr) 44px minmax(0,1fr);justify-content:stretch}}
@media(min-width:1080px) and (max-width:1239px){.cb-tiers .tier{padding:34px 26px}}

/* level row: label + 3-segment meter + a power line running to the card edge */
.cb-lvrow{--run:1;display:flex;align-items:center;gap:10px;height:20px}
.cb-meter{display:inline-flex;gap:3px;flex:none}
.cb-meter i{position:relative;display:block;width:15px;height:7px;border-radius:2px;background:var(--line2);overflow:hidden}
.cb-meter i.on::before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--grad-hot);
  box-shadow:0 0 8px rgba(255,107,26,.8);transform:scaleX(var(--f,1));transform-origin:0 50%}
.cb-lvrow::after{content:"";flex:1;height:2px;margin-right:-32px;
  background:linear-gradient(90deg,var(--orange),rgba(255,107,26,.55));box-shadow:0 0 8px rgba(255,107,26,.5);
  transform:scaleX(var(--run));transform-origin:0 50%}
.tier[data-lv="3"] .cb-lvrow::after{display:none}
@media(min-width:1080px) and (max-width:1239px){.cb-lvrow::after{margin-right:-26px}}
@media(max-width:1079.98px){.cb-lvrow::after{display:none}}

/* conduit between tiers: horizontal at meter height (desktop), vertical when stacked */
.cb-link{position:relative;height:58px;display:flex;align-items:center;padding-left:64px}
.cb-link::before,.cb-link i{content:"";position:absolute;left:46px;top:0;bottom:0;width:2px;border-radius:2px}
.cb-link::before{background:var(--line2)}
.cb-link i{display:block;background:linear-gradient(180deg,var(--orange),var(--orange2));box-shadow:0 0 10px rgba(255,107,26,.65);transform-origin:50% 0}
.cb-link b{position:relative;font-family:var(--fm);font-size:var(--t-micro);font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--orange2);border:1px solid rgba(255,107,26,.4);background:rgba(255,107,26,.07);border-radius:var(--r-pill);padding:5px 11px}
@media(min-width:1080px){
  .cb-link{height:auto;padding:0;display:block}
  .cb-link::before,.cb-link i{left:0;right:0;top:46px;bottom:auto;width:auto;height:2px;transform-origin:0 50%}
  .cb-link i{background:linear-gradient(90deg,rgba(255,107,26,.55),var(--orange))}
  .cb-link b{position:absolute;left:50%;top:46px;width:9px;height:9px;padding:0;margin:-4.5px 0 0 -4.5px;font-size:0;
    border:0;border-radius:50%;background:#fff1e3;box-shadow:0 0 6px 2px rgba(255,150,70,.9),0 0 16px 4px rgba(255,107,26,.6)}
}
@media(min-width:1080px) and (max-width:1239px){.cb-link::before,.cb-link i,.cb-link b{top:44px}}

/* drawn check marks replace the ::before glyphs */
.cb-tiers .tier li::before,.cb-tiers .tier li.plus::before{content:none}
.cb-tiers li{padding-left:32px}
.cb-tiers li .ck{position:absolute;left:1px;top:13px;width:17px;height:17px;fill:none;stroke:var(--orange);stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;filter:drop-shadow(0 0 4px rgba(255,107,26,.45));overflow:visible}
.cb-tiers .tier.featured{--wire-bg:linear-gradient(180deg,#1a2536,var(--panel3))}
.cb-tiers .tier .btn,.cb-tiers .tier .btn2{width:100%}
@media (prefers-reduced-motion: no-preference){
  .cb-tiers .tier.wire.cb-ignite{animation-name:wireSpin,cbIgnite;animation-duration:4.8s,1.4s;animation-timing-function:linear,var(--ease-out);animation-iteration-count:infinite,1}
  .cb-tiers .tier.wire.cb-off{animation-play-state:paused}
  @keyframes cbIgnite{0%{box-shadow:0 0 0 1px rgba(255,180,120,.6),0 0 90px 6px rgba(255,107,26,.6),var(--sh-2)}100%{box-shadow:var(--glow),var(--sh-2)}}
}

/* ================================================================
   3. 02 LIVE DEMO · work-order hints + job-site console
   ================================================================ */
.cb-bench{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;max-width:680px;margin:0 auto}
@media(min-width:1024px){.cb-bench{grid-template-columns:minmax(260px,330px) minmax(0,700px);max-width:none;justify-content:space-between;align-items:center;gap:clamp(36px,4.5vw,72px)}}

.cb-tries{display:flex;flex-direction:column;gap:14px}
.cb-tries-h{display:inline-flex;align-items:center;gap:10px;font-family:var(--fm);font-size:var(--t-label);font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--orange2)}
.cb-try-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(min-width:1024px){.cb-try-list{grid-template-columns:minmax(0,1fr)}}
@media(max-width:359px){.cb-try-list{grid-template-columns:minmax(0,1fr)}}
.cb-try{-webkit-appearance:none;appearance:none;display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;cursor:pointer;
  padding:14px 14px 15px;border-radius:var(--r-sm);color:var(--txt);font:inherit;
  background:linear-gradient(180deg,var(--panel),var(--panel2));border:1px solid var(--line);box-shadow:var(--sh-1),var(--sheen);
  transition:border-color .25s,transform .3s var(--ease-out),box-shadow .25s;-webkit-tap-highlight-color:transparent}
.cb-try-n{flex:none;font-family:var(--fm);font-size:.7rem;font-weight:700;line-height:1.6;letter-spacing:1px;color:var(--orange)}
.cb-try-t{display:flex;flex-direction:column;gap:3px;min-width:0}
.cb-try-t b{font-family:var(--fd);font-weight:800;text-transform:uppercase;letter-spacing:.6px;font-size:1.1rem;line-height:1.1}
.cb-try-t span{font-size:.85rem;line-height:1.4;color:var(--mut)}
.cb-try.is-book{border-color:rgba(74,222,128,.32)}
.cb-try.is-book .cb-try-n{color:var(--ok)}
.cb-try:active{transform:scale(.98)}
.cb-try.used .cb-try-n::after{content:" ✓";color:var(--ok)}
@media (prefers-reduced-motion: no-preference){
  .cb-try.cb-nudge{animation:cbNudge 1.1s var(--ease-out) .45s 2}
  @keyframes cbNudge{0%{border-color:rgba(74,222,128,.95);box-shadow:0 0 0 0 rgba(74,222,128,.5),0 0 26px -6px rgba(74,222,128,.6),var(--sheen)}
    100%{box-shadow:0 0 0 12px rgba(74,222,128,0),var(--sh-1),var(--sheen)}}
}
@media(hover:hover){
  .cb-try:hover{border-color:rgba(255,107,26,.6);transform:translateX(4px);box-shadow:0 0 26px -8px rgba(255,107,26,.55),var(--sheen)}
  .cb-try.is-book:hover{border-color:rgba(74,222,128,.6);box-shadow:0 0 26px -8px rgba(74,222,128,.5),var(--sheen)}
}
@media(max-width:1023.98px){.cb-try{padding:12px 12px 13px;gap:10px}.cb-try-t b{font-size:1rem}.cb-try-t span{font-size:.8rem}}

/* rugged job-site console around the chat */
.cb-console{position:relative;padding:10px 12px 12px;border-radius:26px;
  background:linear-gradient(180deg,#1b2839,#101824 34%,#0c131d);border:1px solid var(--line2);
  box-shadow:0 0 0 1px rgba(0,0,0,.45),0 0 130px -30px rgba(255,107,26,.5),var(--sh-3),inset 0 1px 0 rgba(255,255,255,.07);
  transition:box-shadow .6s ease}
.cb-bezel{display:flex;align-items:center;justify-content:space-between;padding:2px 6px 10px 4px}
.cb-plate{display:inline-flex;align-items:center;gap:8px;font-family:var(--fm);font-size:var(--t-micro);font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  color:var(--ok2);padding:5px 11px;border-radius:var(--r-pill);border:1px solid rgba(74,222,128,.3);background:rgba(74,222,128,.06)}
.cb-screws{display:flex;gap:9px}
.cb-screws i{position:relative;display:block;width:10px;height:10px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#62789a,#1a2636 72%);box-shadow:inset 0 0 0 1px rgba(0,0,0,.55),0 1px 0 rgba(255,255,255,.05)}
.cb-screws i::after{content:"";position:absolute;left:2px;right:2px;top:4.5px;height:1px;background:rgba(0,0,0,.65);transform:rotate(-35deg)}
.cb-screws i:last-child::after{transform:rotate(25deg)}
.cb-tape-edge{margin:12px 4px 0;border-radius:3px;box-shadow:none}
.cb-console.is-booked{box-shadow:0 0 0 1px rgba(74,222,128,.35),0 0 130px -26px rgba(74,222,128,.55),var(--sh-3),inset 0 1px 0 rgba(255,255,255,.07)}

.cb-console .chatbox{max-width:none;margin:0;position:relative;z-index:1;overflow:hidden;border-radius:16px;
  background:linear-gradient(180deg,#111a26,#0d1520);border:1px solid var(--line);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}
.chathead{position:relative;display:flex;align-items:center;gap:12px;padding:14px 18px;background:linear-gradient(180deg,#172435,#121c2a)}
.chathead::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,rgba(255,107,26,.15),var(--orange) 30%,#ffb27a 50%,var(--orange) 70%,rgba(255,107,26,.15));box-shadow:0 0 10px rgba(255,107,26,.6)}
.chathead .dot{width:10px;height:10px;flex:none;border-radius:50%;background:var(--ok);box-shadow:0 0 8px var(--ok)}
.chathead b{font-family:var(--fd);font-weight:800;text-transform:uppercase;letter-spacing:1px;font-size:1.2rem;white-space:nowrap}
.chathead > span:not(.dot){margin-left:auto;text-align:right;font-family:var(--fm);font-size:.64rem;line-height:1.35;letter-spacing:1px;text-transform:uppercase;color:var(--mut)}
.chatlog{height:clamp(340px,50vh,430px);overflow-y:auto;padding:18px 18px 12px;display:flex;flex-direction:column;gap:10px}
.typing{display:none}
.chips{padding:2px 16px 12px}
.chatin{display:flex;gap:10px;padding:12px;border-top:1px solid var(--line);background:rgba(8,12,18,.55)}
.chatin input{flex:1;min-width:0;background:#0a111a;border:1px solid var(--line2);border-radius:12px;padding:13px 16px;
  color:var(--txt);font:500 .95rem var(--fb);outline:none;transition:border-color .2s,box-shadow .2s}
.chatin input::placeholder{color:#6b7d93}
.chatin input:focus{border-color:var(--orange);box-shadow:0 0 0 3px rgba(255,107,26,.18)}
.chatin button{flex:none;border:0;border-radius:12px;padding:0 22px;cursor:pointer;color:#160b04;font:800 .86rem var(--fb);letter-spacing:.6px;text-transform:uppercase;
  background:linear-gradient(135deg,#ffa25e,var(--orange) 55%,#f2600f);box-shadow:0 6px 18px -8px rgba(255,107,26,.7);transition:filter .2s,transform .15s}
.chatin button:hover{filter:brightness(1.08)}
.chatin button:active{transform:scale(.96)}
@media(pointer:coarse){.chatin input{font-size:16px}}
@media(max-width:560px){
  .cb-console{padding:8px 8px 10px;border-radius:22px}
  .chathead{padding:12px 14px;gap:10px}
  .chathead b{font-size:1.08rem}
  .chathead > span:not(.dot){font-size:.62rem;letter-spacing:.4px;max-width:12.5em;text-wrap:balance}
  .chatlog{padding:14px 12px 10px}
  .chips{padding:2px 12px 10px}
  .chatin{padding:10px;gap:8px}
  .chatin input{padding:12px 13px}
  .chatin button{padding:0 16px}
}

/* owner-text card (bot-demo.js markup) on this page: the "now" stamp never breaks mid-word */
#clog .ch-msg.notify .nt-now,#ovt-log .ch-msg.notify .nt-now{flex:none;white-space:nowrap}
#clog .ch-msg.notify .nt-head > span:nth-child(2),#ovt-log .ch-msg.notify .nt-head > span:nth-child(2){min-width:0}
@media(max-width:380px){#clog .ch-msg.notify .nt-head,#ovt-log .ch-msg.notify .nt-head{letter-spacing:1px}}

/* JS off: the log shows the bot's greeting (pre-rendered, cleared by the init script) and the
   input bar only appears once the bot is live (.cb-live), so nothing reads as broken */
#clog .cb-greet{align-self:flex-start;max-width:86%;padding:10px 14px;border-radius:15px;border-bottom-left-radius:4px;
  font-size:.92rem;line-height:1.5;color:#e8eef5;background:linear-gradient(180deg,#1f2e40,#1a2737);border:1px solid rgba(var(--steel),.1)}
.cb-console:not(.cb-live) .chatlog{height:auto}
.cb-console:not(.cb-live) .chatin{display:none}

/* floating launcher (bot-demo.js) yields while the inline console or the hero phone is on screen
   (fallback for when bot-demo.js has no is-tucked system of its own; see p-chatbot.js fabYield) */
html #ovt-fab{transition:transform .3s var(--ease-out),opacity .25s ease,visibility 0s}
html.cb-demo-live #ovt-fab:not(.is-open){opacity:0;visibility:hidden;pointer-events:none;transform:scale(.6) translateY(12px);
  transition:transform .3s var(--ease-out),opacity .25s ease,visibility 0s linear .3s}

/* ================================================================
   4. 03 ROI · caution tape + 9-month punch bar
   ================================================================ */
.cb-roi{padding-top:calc(var(--sec) + 34px)}
@media(min-width:700px) and (max-width:1179.98px){.cb-roi .roi{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cb-tape{position:absolute;top:18px;left:0;z-index:2}
.cb-tape > span{font-size:.82rem}
.cb-months{display:grid;grid-template-columns:repeat(9,minmax(0,1fr));gap:4px;margin-top:20px;max-width:330px}
.cb-months i{position:relative;display:block;height:26px;overflow:hidden;border-radius:4px;border:1px solid rgba(255,107,26,.35);
  background:rgba(var(--steel),.05);font-style:normal;font-family:var(--fm);font-size:.58rem;font-weight:700;line-height:24px;text-align:center;color:#2a1306}
.cb-months i::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--grad-hot);box-shadow:inset 0 1px 0 rgba(255,255,255,.35);
  transform:scaleY(var(--f,1));transform-origin:50% 100%}
.cb-months i{isolation:isolate}
.cb-mcap{display:block;margin-top:10px;font-family:var(--fm);font-size:.66rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--orange2)}

/* ================================================================
   5. CTA · molten "24/7" ghost (final state filled, kept dim behind the headline)
   ================================================================ */
.cta .cta-ghost{--fill:100%;
  background-image:linear-gradient(0deg,rgba(110,42,6,.34) 0%,rgba(184,70,10,.24) calc(var(--fill)*.45),rgba(255,107,26,.2) calc(var(--fill)*.85),rgba(255,178,122,.34) calc(var(--fill) - 1.5%),transparent calc(var(--fill) + .5%));
  -webkit-background-clip:text;background-clip:text;-webkit-text-stroke-color:rgba(255,107,26,.22)}
@media(max-width:560px){.cta .cta-ghost{top:54px}}