/* ================================================================
   p-index.css · page styles for index.html (v5 "NIGHT SHIFT")
   Owned by the index 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 punch-in overlay below only displays once JS has added
   html.pi-on, so its first-frame styles never touch no-JS users.)
   Reference: ../V5-SPEC.md

   Sections, in page order
   0  punch-in intro overlay      6  03 / services (+ / or)
   1  hero (clock card, toast)    7  the tour (video player)
   2  caution-tape bands          8  04 / process conduit
   3  the night shift (pinned)    9  05 / comparison scan
   4  01 / the problem phone     10  06 / FAQ
   5  02 / the cost meter        11  CTA punch card
   ================================================================ */

/* ================================================================
   0. PUNCH-IN INTRO  (first visit per session; JS-gated)
   ================================================================ */
.pi{display:none}
.pi-on .pi{display:grid;place-items:center;position:fixed;inset:0;z-index:300;cursor:pointer;overflow:hidden;-webkit-tap-highlight-color:transparent}
.pi-bg{
  position:absolute;inset:0;
  background:
    radial-gradient(55% 45% at 50% 56%,rgba(255,107,26,.13),transparent 72%),
    linear-gradient(rgba(var(--steel),.05) 1px,transparent 1px) 0 0/48px 48px,
    linear-gradient(90deg,rgba(var(--steel),.05) 1px,transparent 1px) 0 0/48px 48px,
    #0a0f16;
}
.pi-stage{position:relative;z-index:1;display:grid;justify-items:center;width:min(300px,84vw)}
.pi-card{
  position:relative;z-index:1;width:150px;height:196px;margin-bottom:-114px;border-radius:6px;
  padding:11px 12px 10px;display:flex;flex-direction:column;gap:9px;color:#2a1d12;
  background:linear-gradient(180deg,#f4ecdd,#e4d8c2);box-shadow:0 12px 30px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.4);
  transform:translateY(-118px);
}
.pi-card-h{display:flex;justify-content:space-between;align-items:baseline;gap:6px;padding-bottom:6px;border-bottom:1px solid rgba(42,29,18,.28);
  font-family:var(--fm);font-size:.5rem;letter-spacing:1.4px;text-transform:uppercase;white-space:nowrap}
.pi-card-h b{font-weight:700}
.pi-card-h i{font-style:normal;opacity:.7}
.pi-stamp{align-self:flex-start;font-family:var(--fm);font-weight:700;font-size:.8rem;letter-spacing:1px;line-height:1.2;color:#d4470b;
  border:2px solid #d4470b;border-radius:4px;padding:3px 7px;transform:rotate(-6deg);opacity:0;white-space:nowrap}
.pi-card-rows{display:flex;flex-direction:column;gap:10px;margin-top:4px}
.pi-card-rows i{display:block;height:1px;background:rgba(42,29,18,.2)}
.pi-clock{
  position:relative;z-index:2;width:100%;height:168px;border-radius:16px;padding-top:16px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  background:linear-gradient(180deg,#1e2c3d,#121b27 42%,#0d141e);border:1px solid #33475f;
  box-shadow:0 30px 60px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.08),0 0 60px -20px rgba(255,107,26,.35);
}
.pi-slot{position:absolute;left:50%;top:-1px;width:176px;height:11px;transform:translateX(-50%);border-radius:0 0 7px 7px;
  background:#020407;box-shadow:inset 0 2px 4px rgba(0,0,0,.95),0 0 18px rgba(255,107,26,.28)}
.pi-disp{display:flex;align-items:baseline;gap:8px;padding:8px 14px 6px;border-radius:8px;background:#070b10;border:1px solid var(--line);
  font-family:var(--fm);font-weight:700;font-size:2.5rem;line-height:1;color:var(--neon-core);font-variant-numeric:tabular-nums;
  text-shadow:0 0 1px rgba(255,248,240,.9),0 0 8px rgba(255,150,70,.9),0 0 22px rgba(255,107,26,.65)}
.pi-disp b{font-weight:700}
.pi-disp small{font-size:.9rem;color:var(--orange2)}
.pi-lbl{font-family:var(--fm);font-size:.6rem;letter-spacing:3px;text-transform:uppercase;color:var(--mut)}
.pi-skip{position:absolute;left:0;right:0;bottom:22px;z-index:1;text-align:center;padding:0 16px;
  font-family:var(--fm);font-size:.64rem;letter-spacing:2.5px;text-transform:uppercase;color:var(--mut)}
.pi-skip-t{display:none}
@media (pointer:coarse){.pi-skip-f{display:none}.pi-skip-t{display:inline}}
.pi-wipe{position:absolute;inset:0;z-index:3;transform:scaleX(0);transform-origin:0 50%;
  background:repeating-linear-gradient(-45deg,#ff6b1a 0 34px,#e55a0d 34px 48px);box-shadow:0 0 60px rgba(255,107,26,.6)}
.pi .ot-sparks{z-index:2}
@media(min-width:1024px) and (min-height:700px){.pi-stage{scale:1.4}}

/* ================================================================
   1. HERO  (sparks canvas is injected by JS at z 0, .wrap sits at z 1)
   ================================================================ */
.hero{isolation:isolate}
.hero-bg{position:absolute;inset:0;z-index:-1;pointer-events:none;overflow:hidden}
.hero-bg i{position:absolute;display:block}
.hb-lamp{right:-14%;top:-38%;width:82%;height:136%;background:radial-gradient(closest-side,rgba(255,107,26,.18),rgba(255,107,26,.05) 58%,transparent 78%)}
.hb-grid{inset:0;background:repeating-radial-gradient(circle at 74% 47%,rgba(var(--steel),.07) 0 1px,transparent 1px 58px);
  -webkit-mask-image:radial-gradient(42% 60% at 74% 47%,#000 20%,transparent 75%);mask-image:radial-gradient(42% 60% at 74% 47%,#000 20%,transparent 75%)}
.hb-floor{left:0;right:0;bottom:0;height:36%;background:linear-gradient(180deg,transparent,rgba(255,107,26,.05))}
.hero-copy{min-width:0}
.hero-ctas{display:flex;flex-wrap:wrap;align-items:center;gap:14px 16px}
.hero-ctas .btn-lg{min-height:58px}
.hero-tour{min-height:58px;padding:12px 20px 12px 12px;gap:12px;font-size:.95rem}
.ht-ico{width:32px;height:32px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,107,26,.14);border:1px solid rgba(255,107,26,.5);box-shadow:0 0 14px rgba(255,107,26,.25)}
.ht-ico svg{width:13px;height:13px;fill:var(--orange);margin-left:2px}
.ht-len{font-family:var(--fm);font-size:.64rem;font-weight:700;letter-spacing:1.5px;color:var(--mut);border-left:1px solid var(--line2);padding-left:12px}
.hero-tour:hover .ht-len{color:var(--orange2)}
@media(max-width:520px){.hero-ctas > a{width:100%}}

/* clock card as a hero object: flow layout, the toast overlaps only the card's empty bottom band */
.hero .hero-vis{display:flex;flex-direction:column;align-items:center}
.cc-stage{position:relative;width:100%}
.hero .clockcard{padding:40px 30px 70px;overflow:visible}
.hero .clockcard svg{width:min(212px,56vw);overflow:visible}
.hero .clockcard .cc-cap{position:relative;z-index:1}
.cc-sweep{position:absolute;inset:0;border-radius:inherit;overflow:hidden;pointer-events:none}
.cc-sweep::before{content:"";position:absolute;top:-25%;bottom:-25%;left:0;width:40%;
  transform:translateX(var(--sx,-170%)) skewX(-14deg);
  background:linear-gradient(100deg,transparent,rgba(255,190,140,.07) 40%,rgba(255,236,220,.16) 50%,rgba(255,190,140,.07) 60%,transparent)}
.hero .toast{
  position:relative;left:0;top:0;bottom:auto;align-self:flex-start;
  width:min(356px,calc(100% + 38px));margin:-46px 0 0 -38px;padding:13px 18px 13px 14px;
}
.hero .toast .t-txt{min-width:0;flex:1}
.hero .toast .t-line{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hero .toast .t-ex{position:absolute;top:8px;right:10px;font-size:.6rem;line-height:1.2;letter-spacing:1.6px;text-transform:uppercase;color:var(--mut);
  border:1px solid rgba(147,163,181,.4);border-radius:4px;padding:2px 5px 1px}
.hero .toast .t-ico{position:relative}
.hero .toast .t-ico::after{content:"";position:absolute;inset:-1px;border-radius:inherit;border:1.5px solid rgba(74,222,128,.55);opacity:0;pointer-events:none}
@media(max-width:920px){
  .hero .hero-vis{margin:30px auto 0}
  .hero .toast{align-self:center;width:min(362px,calc(100% - 12px));margin:-46px auto 0;left:0;bottom:auto}
}
@media(max-width:430px){.hero .clockcard{padding:36px 22px 68px}}
/* short laptop screens (1280x720, 1024x768): the CTA row clears the fold, no cue under the buttons */
@media(min-width:921px) and (max-height:780px){
  .hero{padding-top:clamp(28px,5vh,44px)}
  .hero h1{font-size:min(var(--t-h1),10.6vh)}
  .hero .hero-copy > p{margin:18px 0 28px}
  .hero .scrollcue{display:none}
}
/* phones: pull the hero up so the clock face shows on the first screen */
@media(max-width:480px){
  .hero{padding-top:28px}
  .hero .kicker{font-size:.7rem;letter-spacing:1.3px;margin-bottom:14px;white-space:nowrap}
  .hero-grid{gap:20px}
  .hero .hero-vis{margin-top:8px}
}
@media(max-width:340px){.hero .kicker{white-space:normal}}
/* 360-wide phones: the longest example lead fits without an ellipsis */
@media(max-width:380px){.hero .toast{padding-right:10px}.hero .toast .t-line{letter-spacing:0}}

/* ================================================================
   2. CAUTION-TAPE BANDS  (two crossing strips; JS drives them by
   scroll velocity, plain CSS marquee when JS is off)
   ================================================================ */
.tapes{
  position:relative;display:grid;place-items:center;height:clamp(124px,13vw,170px);overflow:hidden;
  border-bottom:1px solid var(--line);
  background:radial-gradient(60% 120% at 50% 50%,rgba(255,107,26,.09),transparent 70%),#080c12;
}
.tband{grid-area:1/1;width:112%;position:relative;overflow:hidden;white-space:nowrap;padding:12px 0 11px;box-shadow:0 14px 34px rgba(0,0,0,.55)}
.tband::before,.tband::after{content:"";position:absolute;left:0;right:0;height:5px;z-index:1;
  background:repeating-linear-gradient(-45deg,#0a0f16 0 9px,var(--orange) 9px 18px)}
.tband::before{top:0}
.tband::after{bottom:0}
.tband.ta{z-index:2;background:linear-gradient(180deg,#ff7a2e,var(--orange) 50%,#f2600f);color:#140b05;transform:rotate(-2.3deg)}
.tband.ta::before,.tband.ta::after{background:repeating-linear-gradient(-45deg,#0a0f16 0 9px,#ffb27a 9px 18px)}
.tband.tb{z-index:1;background:#0e141c;color:var(--orange);transform:rotate(1.7deg)}
.ttrack{display:inline-block}
.ttrack span{display:inline-block;padding-top:5px;font-family:var(--fd);font-weight:800;text-transform:uppercase;
  font-size:clamp(.98rem,1.25vw,1.16rem);letter-spacing:.14em;line-height:1.25}
@media (prefers-reduced-motion: no-preference){
  .ttrack{animation:tick 52s linear infinite}
  .tb .ttrack{animation-direction:reverse;animation-duration:60s}
}
.ot-static .ttrack{animation:none}

/* ================================================================
   3. THE NIGHT SHIFT  (pinned scrub >=1024 wide; vertical <1024)
   final state (no-JS / reduced motion): dawn, 6:30 AM, every lead shown
   ================================================================ */
.nightshift{padding:0;background:#070b11;border-bottom:1px solid var(--line)}
.ns-pin{position:relative;padding:clamp(84px,9vw,120px) 0 clamp(150px,19vw,230px)}
.ns-sky{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.ns-layer{position:absolute;inset:0;display:block}
.ns-dusk{opacity:0;background:linear-gradient(180deg,#0a1018 0%,#18140f 36%,#45210e 66%,#a3410d 90%,#d9621a 100%)}
.ns-night{opacity:0;background:
  radial-gradient(260px 260px at 82% 16%,rgba(255,236,214,.07),transparent 70%),
  linear-gradient(180deg,#03060a 0%,#060a10 58%,#0a111b 100%)}
.ns-stars{opacity:0;background-image:
  radial-gradient(1.4px 1.4px at 8% 12%,#fff 50%,transparent 52%),radial-gradient(1px 1px at 17% 31%,#fff 50%,transparent 52%),
  radial-gradient(1.2px 1.2px at 27% 9%,#ffe9d6 50%,transparent 52%),radial-gradient(1px 1px at 36% 24%,#fff 50%,transparent 52%),
  radial-gradient(1.6px 1.6px at 47% 7%,#fff 50%,transparent 52%),radial-gradient(1px 1px at 55% 28%,#fff 50%,transparent 52%),
  radial-gradient(1.2px 1.2px at 63% 14%,#fff 50%,transparent 52%),radial-gradient(1px 1px at 71% 33%,#ffe9d6 50%,transparent 52%),
  radial-gradient(1.5px 1.5px at 79% 6%,#fff 50%,transparent 52%),radial-gradient(1px 1px at 88% 22%,#fff 50%,transparent 52%),
  radial-gradient(1.2px 1.2px at 94% 38%,#fff 50%,transparent 52%),radial-gradient(1px 1px at 4% 44%,#fff 50%,transparent 52%),
  radial-gradient(1px 1px at 22% 52%,#fff 50%,transparent 52%),radial-gradient(1.3px 1.3px at 42% 46%,#fff 50%,transparent 52%),
  radial-gradient(1px 1px at 58% 55%,#fff 50%,transparent 52%),radial-gradient(1px 1px at 84% 50%,#fff 50%,transparent 52%)}
.ns-dawn{opacity:1;background:linear-gradient(180deg,#0b131d 0%,#16212c 36%,#3a3430 62%,#9d5d38 85%,#dd8a4c 100%)}
.ns-town{position:absolute;left:0;bottom:0;width:100%;height:clamp(120px,16vw,200px);display:block}
/* phones: a fixed-aspect strip shifted so the lit shop sits inside the screen (the sky clips the rest) */
@media(max-width:560px){.ns-town{width:864px;max-width:none;left:min(0px,calc(50% - 190px))}}
.ns-wins .w{transition:opacity .4s ease}
/* the Overtime shop: neon sign board, half-raised roll-up door, warm light on the street */
.ns-sign{filter:drop-shadow(0 0 3px rgba(255,107,26,.95))}
.ns-signboard > rect{filter:drop-shadow(0 0 4px rgba(255,107,26,.8)) drop-shadow(0 0 12px rgba(255,107,26,.45))}
.ns-neon{font-family:var(--fd);font-weight:800;font-size:15px;letter-spacing:1.4px;fill:#ffe6d2;
  filter:drop-shadow(0 0 1.5px rgba(255,190,140,.95)) drop-shadow(0 0 5px rgba(255,107,26,.95)) drop-shadow(0 0 12px rgba(255,107,26,.55))}
.ns-door{filter:drop-shadow(0 0 14px rgba(255,138,61,.7))}
.ns-glow{mix-blend-mode:screen}

.ns-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:clamp(28px,3.6vw,56px);align-items:center}
.ns-col-a{display:flex;flex-direction:column;gap:clamp(20px,3vh,34px);min-width:0}
.ns-head .seclabel{margin-bottom:16px}
.ns-head h2{margin-bottom:12px}
.ns-sub{color:var(--mut);font-size:1.02rem;max-width:40ch}
.ns-clock{
  max-width:430px;padding:16px 20px 16px;border-radius:var(--r);border:1px solid var(--line2);
  background:linear-gradient(180deg,rgba(17,26,38,.9),rgba(10,16,25,.92));box-shadow:var(--sh-2),var(--sheen);
}
.ns-clock-top{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.ns-day{font-family:var(--fm);font-size:var(--t-label);font-weight:700;letter-spacing:3px;text-transform:uppercase;color:var(--mut)}
.ns-time{display:flex;align-items:baseline;gap:.22em;margin:10px 0 14px;font-family:var(--fm);font-weight:700;line-height:1;
  font-size:clamp(3rem,5.2vw,4.7rem);font-variant-numeric:tabular-nums;color:var(--neon-core);
  text-shadow:0 0 1px rgba(255,248,240,.9),0 0 10px rgba(255,150,70,.75),0 0 30px rgba(255,107,26,.45)}
.ns-hm{display:inline-block;font-weight:700}
.ns-z{opacity:.16;text-shadow:none}
.ns-ap{font-size:.36em;letter-spacing:2px;color:var(--orange2)}
.ns-rail{position:relative;height:6px;border-radius:4px;background:rgba(var(--steel),.12);margin:2px 5px 8px}
.ns-rail-fill{position:absolute;inset:0;border-radius:inherit;transform-origin:0 50%;
  background:linear-gradient(90deg,var(--ember),var(--orange) 70%,#ffd0aa);box-shadow:0 0 10px rgba(255,107,26,.55)}
.ns-mk{position:absolute;top:50%;left:calc(var(--at) * 100%);width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:var(--ok);box-shadow:0 0 0 3px #0e1622,0 0 10px var(--ok);transition:background-color .3s,box-shadow .3s}
.ns-mk-o{background:var(--orange);box-shadow:0 0 0 3px #0e1622,0 0 10px var(--orange)}
/* unlit until that lead lands (class added by JS, motion only) */
.ns-mk.dim{background:#2a3d55;box-shadow:0 0 0 3px #0e1622}
.ns-rail-lbl{display:flex;justify-content:space-between;font-family:var(--fm);font-size:.64rem;letter-spacing:1.5px;color:var(--mut)}
.ns-status{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-family:var(--fm);font-size:.64rem;font-weight:700;letter-spacing:1.2px;text-transform:uppercase}
.ns-status .on{display:inline-flex;align-items:center;gap:8px;color:var(--ok2)}
.ns-status .off{color:var(--mut)}

.ns-phone{--ns-pw:clamp(224px,calc((100vh - 170px) * .4615 + 20px),292px);width:var(--ns-pw)}
.ns-phone .frame-phone{--fp-w:var(--ns-pw)}
.nsc{position:absolute;inset:0;display:flex;flex-direction:column;background:linear-gradient(180deg,#0f1822,#0a1119)}
.nsc-head{display:flex;align-items:center;gap:8px;padding:50px 14px 10px;background:#0f1822;border-bottom:2px solid var(--orange)}
.nsc-head b{font-family:var(--fd);font-size:.98rem;letter-spacing:.5px;text-transform:uppercase;color:#fff}
.nsc-head span{margin-left:auto;font-family:var(--fm);font-size:.64rem;letter-spacing:1px;text-transform:uppercase;color:var(--mut)}
.nsc-view{position:relative;flex:1;overflow:hidden}
.nsc-log{position:absolute;left:0;right:0;bottom:0;display:flex;flex-direction:column;gap:6px;padding:10px 11px 10px}
.nsc-log > p{margin:0}
.nsc-msg{max-width:86%;padding:7px 10px;border-radius:11px;font-size:.68rem;line-height:1.42}
.nsc-msg.b{align-self:flex-start;background:#1e2d3d;color:#e8edf2;border-bottom-left-radius:3px}
.nsc-msg.u{align-self:flex-end;background:var(--orange);color:#160b04;font-weight:600;border-bottom-right-radius:3px}
.nsc-time{align-self:center;margin-top:6px!important;font-family:var(--fm);font-size:.64rem;letter-spacing:1.5px;color:var(--mut)}
.nsc-ok{align-self:center;font-family:var(--fm);font-size:.58rem;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--ok2);
  background:rgba(74,222,128,.1);border:1px solid rgba(74,222,128,.38);border-radius:999px;padding:4px 10px}
.nsc-note{align-self:stretch;text-align:center;font-size:.6rem;line-height:1.45;color:#7ee2a0;background:#1d3a25;border:1px solid #2b5537;border-radius:10px;padding:7px 9px}
.nsc-note .nw{white-space:nowrap}
.nsc-in{position:relative;z-index:1;display:flex;align-items:center;gap:8px;margin:2px 14px 16px;padding:6px 6px 6px 12px;border-radius:999px;background:#0b121b;border:1px solid var(--line);
  font-size:.62rem;color:#7d8da0}
.nsc-in i{margin-left:auto;width:20px;height:20px;border-radius:50%;background:var(--orange);flex:none}
/* bot typing indicator (JS-built, desktop phone) */
.nsc-typing{align-self:flex-start;display:flex;align-items:center;gap:4px;padding:9px 11px;margin:0;border-radius:11px;border-bottom-left-radius:3px;background:#1e2d3d}
.nsc-typing i,.nl-live i{display:block;width:5px;height:5px;border-radius:50%;background:#93a3b5}
@media (prefers-reduced-motion: no-preference){
  .nsc-typing i,.nl-live.on i{animation:nsDot 1s ease-in-out infinite}
  .nsc-typing i:nth-child(2),.nl-live.on i:nth-child(2){animation-delay:.16s}
  .nsc-typing i:nth-child(3),.nl-live.on i:nth-child(3){animation-delay:.32s}
  @keyframes nsDot{0%,60%,100%{opacity:.35;transform:none}30%{opacity:1;transform:translateY(-3px)}}
}

.ns-right{display:flex;flex-direction:column;gap:14px;min-width:0}
.ns-inbox{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 4px 2px;font-family:var(--fm);font-size:.64rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--mut)}
.ns-count{font-weight:700;color:var(--ok2);border:1px solid rgba(74,222,128,.35);background:rgba(74,222,128,.08);border-radius:var(--r-pill);padding:4px 10px;letter-spacing:1.5px;font-variant-numeric:tabular-nums}
.ns-leads{list-style:none;display:flex;flex-direction:column;gap:12px}
.ns-lead{position:relative;padding:13px 16px 13px 20px;border-radius:14px;border:1px solid var(--line2);
  background:linear-gradient(180deg,rgba(19,30,45,.95),rgba(12,19,30,.95));box-shadow:var(--sh-2),var(--sheen)}
.ns-lead::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:3px;border-radius:0 3px 3px 0;background:var(--ok);box-shadow:var(--glow-ok)}
.ns-lead.is-alert::before{background:var(--orange);box-shadow:var(--glow-sm)}
.nl-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.nl-top time{font-family:var(--fm);font-size:.8rem;font-weight:700;letter-spacing:1px;color:var(--orange2)}
.ns-lead h3{font-size:1.18rem;margin:5px 0 3px}
.ns-lead p{font-size:.86rem;line-height:1.45;color:var(--mut)}
.nl-out{display:block;margin-top:7px;font-family:var(--fm);font-size:.66rem;letter-spacing:.5px;color:var(--ok2)}
.is-alert .nl-out{color:var(--orange2)}
/* "bot is chatting" dots on the outcome row until the lead lands (JS-built, motion only) */
.nl-live{position:absolute;left:20px;bottom:18px;display:flex;align-items:center;gap:4px;pointer-events:none}
.nl-live i{background:var(--ok2)}
.is-alert .nl-live i{background:var(--orange2)}
/* the chat behind each lead (JS-built from the phone log; phones/tablets only, the desktop shows the phone) */
.nl-chat{display:flex;flex-direction:column;gap:6px;margin:11px 0 2px;padding:10px;border-radius:12px;background:rgba(5,9,14,.6);border:1px solid var(--line)}
.nl-chat > p{margin:0}
.nl-chat .nsc-msg{max-width:88%;font-size:.8rem;line-height:1.42;padding:7px 11px}
.nl-chat .nsc-note{font-size:.74rem;padding:8px 10px}
@media(min-width:1024px){.nl-chat{display:none}}
.ns-wake{display:grid;gap:5px;padding:15px 18px;border-radius:14px;border:1px solid rgba(255,162,94,.45);
  background:linear-gradient(135deg,rgba(255,162,94,.2),rgba(255,107,26,.06) 70%),rgba(11,17,26,.9);box-shadow:0 0 44px -12px rgba(255,162,94,.55),var(--sheen)}
.ns-wake time{font-family:var(--fm);font-size:.72rem;font-weight:700;letter-spacing:2px;color:var(--orange2)}
.ns-wake-t{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:clamp(1.45rem,2.1vw,1.95rem);line-height:1.04;color:#fff}
.ns-wake-s{font-family:var(--fm);font-size:.64rem;letter-spacing:1px;text-transform:uppercase;color:var(--ok2)}

/* pinned desktop stage: exactly one viewport tall, content centred */
.ns-pinned .ns-pin{min-height:100vh;display:flex;align-items:center;padding:76px 0 64px}
.ns-pinned .ns-grid{width:100%}

/* vertical version (<1024): one column, sticky clock, phone hidden */
@media(max-width:1023px){
  .ns-grid{display:flex;flex-direction:column;align-items:stretch;gap:20px}
  .ns-col-a,.ns-right{display:contents}
  .ns-phone{display:none}
  .ns-head{margin-bottom:4px}
  .ns-clock{max-width:none}
  .ns-time{font-size:clamp(2.4rem,9vw,3.4rem);margin:8px 0 12px}
  .ns-leads{gap:14px}
  .ns-lead,.ns-wake{max-width:620px}
}

/* slim time bar for the stacked version (built by JS, motion only): docks at the top, under the nav
   while the nav shows, so it never sits on top of the cards being read */
.ns-mini{position:fixed;left:0;right:0;top:0;z-index:45;margin:0 auto;width:min(560px,calc(100% - 32px));display:flex;align-items:center;gap:12px;
  padding:8px 16px 8px 14px;border-radius:var(--r-pill);background:rgba(9,14,21,.96);border:1px solid var(--line2);
  box-shadow:0 12px 30px rgba(0,0,0,.55),0 0 24px -8px rgba(255,107,26,.45);pointer-events:none;opacity:0;transform:translateY(-130%);
  transition:transform .5s var(--ease-io),opacity .3s ease}
.ns-mini.on{opacity:1;transform:translateY(calc(var(--nav-h,64px) + 8px))}
.ns-mini.on.nav-up{transform:translateY(8px)}
.ns-mini b{font-family:var(--fm);font-weight:700;font-size:1rem;font-variant-numeric:tabular-nums;color:var(--neon-core);white-space:nowrap;
  text-shadow:0 0 8px rgba(255,150,70,.7)}
.ns-mini i{position:relative;display:block;flex:1;min-width:40px;height:4px;border-radius:3px;overflow:hidden;background:rgba(var(--steel),.16)}
.ns-mini i i{position:absolute;inset:0;width:auto;height:auto;min-width:0;transform-origin:0 50%;background:linear-gradient(90deg,var(--ember),var(--orange),#ffd0aa)}
.ns-mini span{font-family:var(--fm);font-size:.62rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--mut);white-space:nowrap}
@media(max-width:350px){.ns-mini span{display:none}}
.ns-mini span{font-family:var(--fm);font-size:.62rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--mut);white-space:nowrap}

/* ================================================================
   4. 01 / THE PROBLEM  (phone that rings, missed-call stack)
   ================================================================ */
.prob-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:clamp(32px,5vw,80px);align-items:center;margin-bottom:clamp(36px,4.5vw,54px)}
.prob-copy .sub{margin-bottom:0}
.miss{display:flex;flex-direction:column;align-items:center;gap:14px;justify-self:center}
.miss-phone{--fp-w:250px;--fp-ar:9/16.6}
.miss-cap{font-family:var(--fm);font-size:.64rem;letter-spacing:2px;text-transform:uppercase;color:var(--mut)}
.mp{position:absolute;inset:0;display:flex;flex-direction:column;padding:50px 10px 16px;
  background:radial-gradient(120% 55% at 50% 100%,rgba(74,222,128,.08),transparent 60%),linear-gradient(180deg,#101a27,#0a1119)}
.mp-stack{list-style:none;display:flex;flex-direction:column;gap:6px}
.mp-stack li{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:7px 9px;border-radius:12px;
  background:rgba(30,45,61,.88);border:1px solid rgba(255,255,255,.05);box-shadow:0 6px 14px rgba(0,0,0,.3)}
.mp-ic{width:22px;height:22px;border-radius:7px;display:grid;place-items:center;background:rgba(248,113,113,.15);color:#fb8a8a}
.mp-ic svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.mp-stack b{font-size:.72rem;font-weight:700;color:#fff}
.mp-stack time{font-family:var(--fm);font-size:.56rem;color:var(--mut)}
.mp-call{margin-top:auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px}
.mp-ava{position:relative;width:60px;height:60px;margin-bottom:8px;border-radius:50%;display:grid;place-items:center;background:#1e2d3d;border:1px solid var(--line2)}
.mp-ava svg{width:28px;height:28px;fill:none;stroke:var(--mut);stroke-width:1.6;stroke-linecap:round}
.mp-ring{position:absolute;inset:-1px;border-radius:50%;border:1.5px solid rgba(74,222,128,.55);opacity:0;pointer-events:none}
.mp-who{font-family:var(--fd);font-size:1.12rem;letter-spacing:.5px;text-transform:uppercase}
.mp-sub{font-family:var(--fm);font-size:.56rem;letter-spacing:1px;color:var(--mut)}
.mp-btns{display:flex;gap:46px;margin-top:12px}
.mp-btns i{width:40px;height:40px;border-radius:50%;display:grid;place-items:center}
.mp-btns .no{background:#e5484d;box-shadow:0 0 14px rgba(229,72,77,.35)}
.mp-btns .yes{background:#22c55e;box-shadow:0 0 14px rgba(74,222,128,.4)}
.mp-btns .no svg{width:20px;height:20px;fill:#fff}
.mp-btns .yes svg{width:18px;height:18px;fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round}
/* smaller phone, same px content: a taller screen keeps the answer / decline buttons inside it */
@media(max-width:860px){.prob-grid{grid-template-columns:minmax(0,1fr)}.miss-phone{--fp-w:226px;--fp-ar:9/18.6}}
/* 01 stats: three short figures sit in one row on tablets (no orphan) */
@media(min-width:600px) and (max-width:1023px){.problem .stats{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ================================================================
   5. 02 / THE COST  (live "lost while you've been on this page" meter)
   ================================================================ */
.lost{
  margin-top:22px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:14px 30px;
  padding:18px 26px;border-radius:var(--r);border:1px solid rgba(255,107,26,.38);
  background:linear-gradient(90deg,rgba(255,107,26,.11),rgba(255,107,26,.02) 62%),#0d1420;
  box-shadow:var(--sheen),0 0 44px -18px rgba(255,107,26,.55);
}
.lost-k{display:flex;flex-direction:column;align-items:flex-start;gap:8px;min-width:0}
.lost-t{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:1.32rem;line-height:1.08}
.lost-v{font-family:var(--fm);font-weight:700;font-size:clamp(2.1rem,4.2vw,3.2rem);line-height:1;font-variant-numeric:tabular-nums;white-space:nowrap;
  color:var(--neon-core);text-shadow:0 0 1px rgba(255,248,240,.9),0 0 10px rgba(255,150,70,.75),0 0 28px rgba(255,107,26,.45)}
.lost-src{font-family:var(--fm);font-size:.66rem;line-height:1.7;letter-spacing:.4px;color:var(--mut);text-align:right}
.lost-src b{color:var(--orange2);font-weight:700}
@media(max-width:860px){.lost{grid-template-columns:minmax(0,1fr);padding:18px 20px}.lost-src{text-align:left}}
/* the three trade cards: 2 + 1 full-width on tablets, never an orphan with an empty half row */
@media(min-width:640px) and (max-width:1023px){.cost .grid3{grid-template-columns:repeat(2,minmax(0,1fr))}.cost .grid3 > .card:nth-child(3){grid-column:1 / -1}}
@media(min-width:1024px){.cost .grid3{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ================================================================
   6. 03 / SERVICES  (01 + 02 = 03 equation, operators in the flow)
   ================================================================ */
.eqgrid{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);gap:18px;align-items:stretch;counter-reset:cardn}
.eqgrid .card{display:flex;flex-direction:column}
.eqgrid .card p{flex:1}
.eq-op{align-self:center;justify-self:center;position:relative;z-index:2;width:46px;height:46px;border-radius:50%;display:grid;place-items:center;
  font-family:var(--fm);font-weight:700;font-size:1.5rem;line-height:1;color:var(--orange);background:var(--navy);border:1px solid var(--line2);
  box-shadow:0 0 24px rgba(255,107,26,.3),inset 0 0 12px rgba(255,107,26,.12)}
.eq-c{--wire-bg:linear-gradient(180deg,#16202d,#0e1520)}
.eq-c::after{transform:scaleX(1)}
.eq-c.unlit{background:linear-gradient(180deg,var(--panel),var(--panel2))!important;border:1px solid var(--line)!important;box-shadow:var(--sh-1),var(--sheen)!important;animation:none!important}
.eq-c.unlit::after{transform:scaleX(0)}
/* "or", not "=": the bundle is the alternative to buying both, not their sum */
.eq-or{font-size:.78rem;letter-spacing:1.5px;text-transform:uppercase;color:var(--orange2)}
@media(max-width:1100px){.eqgrid{grid-template-columns:minmax(0,1fr);gap:14px}.eq-op{width:42px;height:42px}}

/* ================================================================
   7. THE TOUR  (custom player; native controls once playing)
   ================================================================ */
.tour{background:radial-gradient(70% 55% at 50% 75%,rgba(255,107,26,.08),transparent 70%)}
.tp-frame{position:relative;border-radius:18px;overflow:hidden;background:#0b111a;border:1px solid var(--line2);
  box-shadow:var(--sh-3),0 0 0 1px rgba(0,0,0,.4),0 0 100px -34px rgba(255,107,26,.5)}
.tp-bar{display:flex;align-items:center;gap:7px;height:38px;padding:0 14px;background:linear-gradient(180deg,#162333,#111b28);border-bottom:1px solid var(--line)}
.tp-bar > i{width:10px;height:10px;border-radius:50%;background:var(--line2);flex:none}
.tp-bar > i:first-child{background:var(--orange);box-shadow:0 0 6px rgba(255,107,26,.6)}
.tp-url{margin-left:10px;flex:1;min-width:0;height:22px;border-radius:6px;background:#0a111a;border:1px solid var(--line);
  font:500 .68rem/20px var(--fm);color:var(--mut);padding:0 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tp-len{font-family:var(--fm);font-size:.62rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--mut);flex:none}
.tp-screen{position:relative;aspect-ratio:16/9;background:#05080c;overflow:hidden}
.tp-art{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;padding:20px;
  background:
    radial-gradient(50% 60% at 50% 50%,rgba(255,107,26,.16),transparent 70%),
    linear-gradient(rgba(var(--steel),.07) 1px,transparent 1px) 0 0/64px 64px,
    linear-gradient(90deg,rgba(var(--steel),.07) 1px,transparent 1px) 0 0/64px 64px,
    #070b11}
.tp-art-mark{width:clamp(44px,6vw,68px);height:auto;filter:drop-shadow(0 0 14px rgba(255,107,26,.55))}
.tp-art-t{font-family:var(--fd);font-weight:800;text-transform:uppercase;line-height:.9;font-size:clamp(2.6rem,8vw,6.2rem);letter-spacing:.02em;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,162,94,.6)}
.tp-art-s{font-family:var(--fm);font-size:clamp(.56rem,1.2vw,.72rem);letter-spacing:3px;text-transform:uppercase;color:var(--mut)}
.tp-video{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;background:transparent}
/* JS layer */
.tp-ov{position:absolute;inset:0;z-index:2;width:100%;display:flex;align-items:flex-end;justify-content:flex-start;gap:clamp(12px,2vw,20px);
  padding:clamp(14px,3vw,30px);border:0;cursor:pointer;color:inherit;font:inherit;text-align:left;
  background:transparent;transition:opacity .45s var(--ease-out),visibility .45s}
.tp-ov::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(16deg,rgba(5,8,12,.97) 0%,rgba(5,8,12,.88) 20%,rgba(5,8,12,.5) 36%,rgba(5,8,12,0) 56%)}
.tp-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.tp-play{position:relative;z-index:1;flex:none;width:clamp(50px,8vw,104px);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;
  background:var(--grad-hot);box-shadow:0 18px 44px -10px rgba(255,107,26,.75),0 0 0 6px rgba(255,107,26,.16);transition:transform .35s var(--ease-out)}
.tp-play svg{width:34%;height:auto;fill:#160b04;margin-left:7%}
.tp-play::before,.tp-play::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid rgba(255,140,60,.65);opacity:0;pointer-events:none}
.tp-ov:hover .tp-play,.tp-ov:focus-visible .tp-play{transform:scale(1.07)}
.tp-ov:focus-visible{outline:2px solid var(--orange2);outline-offset:-4px}
.tp-cap{position:relative;z-index:1;display:flex;flex-direction:column;gap:6px;padding-bottom:clamp(4px,1vw,10px)}
.tp-cap b{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:clamp(1.2rem,2.6vw,2.1rem);line-height:1;color:#fff;text-shadow:0 2px 14px rgba(0,0,0,.6)}
.tp-cap span{font-family:var(--fm);font-size:clamp(.56rem,1vw,.68rem);font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--orange2);white-space:nowrap}
.tp-soon{display:none;position:relative;z-index:1;flex-direction:column;align-items:center;gap:6px;padding:12px 20px;transform:rotate(-4deg);
  border:2px solid var(--orange);border-radius:8px;color:var(--orange2);background:rgba(10,15,22,.75);box-shadow:0 0 30px rgba(255,107,26,.25)}
.tp-soon b{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:clamp(1.3rem,3vw,2.2rem);line-height:1;letter-spacing:.04em}
.tp-soon span{font-family:var(--fm);font-size:.6rem;letter-spacing:2px;text-transform:uppercase;color:var(--mut)}
.tp.is-missing .tp-ov{cursor:default;align-items:center;justify-content:center}
.tp.is-missing .tp-play,.tp.is-missing .tp-cap{display:none}
.tp.is-missing .tp-soon{display:flex}
.tp.is-loading .tp-play svg{animation:none;opacity:.35}
.tp.is-playing .tp-ov{opacity:0;visibility:hidden;pointer-events:none}
.tp-chaps{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding-top:16px}
.tp-chaps button{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;cursor:pointer;
  font:600 .8rem/1 var(--fb);color:var(--txt);background:#0f1724;border:1px solid var(--line2);border-radius:var(--r-pill);padding:9px 14px 9px 11px;
  transition:border-color .2s,background-color .25s,color .2s,transform var(--d-fast) var(--ease-out)}
.tp-chaps button b{font-family:var(--fm);font-size:.66rem;font-weight:700;color:var(--orange2)}
.tp-chaps button:hover{border-color:var(--orange);color:#fff}
.tp-chaps button:active{transform:scale(.97)}
.tp-chaps button.on{background:var(--orange);border-color:var(--orange);color:#140b05;box-shadow:0 0 18px rgba(255,107,26,.4)}
.tp-chaps button.on b{color:#140b05}
@media(max-width:767px){
  .tp-chaps{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;margin-right:calc(var(--gutter) * -1);padding-right:var(--gutter)}
  .tp-chaps::-webkit-scrollbar{display:none}
  .tp-bar .tp-len{display:none}
}
@media (prefers-reduced-motion: no-preference){
  .tp-play::before{animation:tpPulse 2.2s var(--ease-out) infinite}
  .tp-play::after{animation:tpPulse 2.2s var(--ease-out) 1.1s infinite}
  @keyframes tpPulse{0%{transform:scale(1);opacity:.7}100%{transform:scale(1.75);opacity:0}}
  .tp.is-loading .tp-play svg{animation:tpBlink .8s steps(2) infinite}
  @keyframes tpBlink{50%{opacity:.1}}
}

/* ================================================================
   8. 04 / THE PROCESS  (conduit line through 4 steps)
   4-col grid >=1024 / vertical <1024, line fully drawn by default;
   JS scrubs it through the icons (no pin, nothing leaves the screen)
   ================================================================ */
.process .wrap{z-index:1}
.proc{position:relative;z-index:1}
.proc-track{position:relative;max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px}
.proc-line{position:absolute;z-index:2;top:27px;left:calc(var(--gutter) + 28px);width:calc((100% - 2 * var(--gutter) + 28px) * .75);height:2px;background:rgba(var(--steel),.13);border-radius:2px;display:block}
.proc-fill{position:absolute;inset:0;display:block;border-radius:inherit;transform-origin:0 50%;
  background:linear-gradient(90deg,var(--ember),var(--orange) 40%,var(--orange2));box-shadow:0 0 12px rgba(255,107,26,.65)}
.proc-head{position:absolute;top:50%;left:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;display:block;opacity:0;
  background:#fff4ea;box-shadow:0 0 6px 2px #ffb070,0 0 18px 6px rgba(255,107,26,.7)}
.proc-track{counter-reset:ps}
.pstep{position:relative;min-width:0;counter-increment:ps}
.ps-ico{position:relative;z-index:3;width:56px;height:56px;border-radius:16px;display:grid;place-items:center;margin-bottom:20px;
  --on:1;color:var(--orange);background:linear-gradient(180deg,#141f2e,#0d1420);border:1px solid rgba(255,107,26,.55);
  box-shadow:0 0 22px -4px rgba(255,107,26,calc(.45 * var(--on))),var(--sheen)}
.ps-ico svg{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.ps-n{display:block;margin-bottom:8px;font-family:var(--fm);font-size:.72rem;font-weight:700;letter-spacing:3px;color:var(--orange)}
.pstep h3{font-size:1.4rem;margin-bottom:8px}
.pstep p{color:var(--mut);font-size:.95rem;max-width:32ch}
@media(max-width:1023px){
  .proc-track{grid-template-columns:minmax(0,1fr);gap:34px}
  .pstep{display:grid;grid-template-columns:56px minmax(0,1fr);column-gap:20px;align-items:start}
  .ps-ico{grid-row:1 / span 3;margin-bottom:0}
  .ps-n{margin:4px 0 6px}
  .proc-line{top:28px;bottom:0;left:calc(var(--gutter) + 27px);width:2px;height:auto}
  .proc-fill{transform-origin:50% 0;background:linear-gradient(180deg,var(--ember),var(--orange) 40%,var(--orange2))}
  .proc-head{top:0;left:50%}
}
@media(min-width:1024px){
  .pstep{padding:28px 28px 30px;border-radius:18px;border:1px solid var(--line);overflow:hidden;
    background:linear-gradient(180deg,rgba(19,30,45,.94),rgba(12,19,30,.94));box-shadow:var(--sh-2),var(--sheen)}
  .pstep::before{content:"0" counter(ps);position:absolute;right:-4px;bottom:-30px;pointer-events:none;
    font-family:var(--fd);font-weight:800;font-size:7.6rem;line-height:1;color:transparent;-webkit-text-stroke:1.5px rgba(var(--steel),.1)}
  .proc-line{top:55px;left:calc(var(--gutter) + 56px)}
}

/* ================================================================
   9. 05 / THE COMPARISON  (scan line, column lights row by row)
   ================================================================ */
.cmp{position:relative}
.cmp-in{position:relative;min-width:640px}
.cmp .compare{min-width:0;overflow:visible}
.ck{width:15px;height:15px;margin-right:9px;vertical-align:-2px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.ck path{stroke-dasharray:20;stroke-dashoffset:0}
.cmp-scan{position:absolute;left:0;right:0;top:0;height:3px;opacity:0;pointer-events:none;display:block;
  background:linear-gradient(90deg,transparent,rgba(255,107,26,.65) 14%,#ffd6b8 50%,rgba(255,107,26,.65) 86%,transparent);
  box-shadow:0 0 18px 4px rgba(255,107,26,.42)}
.cmp-scan::after{content:"";position:absolute;left:0;right:0;bottom:3px;height:54px;background:linear-gradient(0deg,rgba(255,107,26,.13),transparent)}
/* <=720: each row becomes a card (row title, then every option with its label) so all three are always in view */
@media(max-width:720px){
  .tablewrap.cmp{overflow:visible;border:0;border-radius:0;box-shadow:none}
  .cmp-in{min-width:0}
  .cmp .compare{display:block;min-width:0;background:transparent;overflow:visible}
  .cmp .compare tbody{display:grid;gap:12px}
  .cmp .compare tr{display:block;padding:14px 14px 12px;border-radius:14px;border:1px solid var(--line);
    background:linear-gradient(180deg,var(--panel),var(--panel2));box-shadow:var(--sh-1),var(--sheen)}
  .cmp .compare tr:first-child{display:none}
  .cmp .compare td{display:flex;align-items:baseline;justify-content:flex-end;gap:10px;padding:9px 4px;border:0;border-top:1px dashed var(--line);
    font-size:.92rem;text-align:right;line-height:1.35}
  .cmp .compare td::before{content:attr(data-l);margin-right:auto;flex:none;max-width:50%;text-align:left;font-family:var(--fm);font-size:.66rem;font-weight:400;
    letter-spacing:1px;text-transform:uppercase;color:var(--mut)}
  .cmp .compare td:first-child{display:block;padding:0 4px 10px;border-top:0;text-align:left;font-family:var(--fd);font-size:1.15rem;font-weight:700;
    letter-spacing:.5px;text-transform:uppercase;color:var(--txt)}
  .cmp .compare td:first-child::before{content:none}
  .cmp .compare td.win{margin-top:4px;padding:10px;border-top:0;border-radius:10px;background:rgba(255,107,26,.1);box-shadow:inset 0 0 0 1px rgba(255,107,26,.38)}
  .cmp .compare td.win::before{color:var(--orange2)}
  .cmp .compare tr:hover td{background:transparent}
  .cmp .compare tr:hover td.win{background:rgba(255,107,26,.14)}
  .cmp .ck{flex:none;align-self:flex-start;margin:3px 0 0}
}
@media (prefers-reduced-motion: no-preference){
  .cmp .compare .win{transition:background-color .5s ease,color .5s ease,box-shadow .5s ease}
  .cmp .ck path{transition:stroke-dashoffset .55s var(--ease-out) .12s}
}
.cmp.cmp-dim tr:not(.on) td.win{color:var(--txt);font-weight:400;background:transparent;box-shadow:none}
.cmp.cmp-dim tr:not(.on) th.win{color:var(--txt);background:var(--panel3);box-shadow:none}
.cmp.cmp-dim tr:not(.on) .ck path{stroke-dashoffset:20}

/* ================================================================
   10. 06 / FAQ  (numbered, edge light, JS height animation)
   ================================================================ */
.faq{counter-reset:faq}
.faq details{counter-increment:faq;position:relative}
.faq details::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;z-index:1;background:var(--grad);transform:scaleY(0);transform-origin:50% 0;transition:transform .45s var(--ease-out)}
.faq details:hover::before,.faq details[open]::before{transform:scaleY(1)}
.faq summary{padding-left:62px;transition:color .2s,background-color .25s}
.faq summary::before{content:counter(faq,decimal-leading-zero);position:absolute;left:22px;top:20px;font-family:var(--fm);font-size:.72rem;font-weight:700;letter-spacing:1px;color:var(--orange);opacity:.7;transition:opacity .2s}
.faq summary:hover{background:rgba(255,107,26,.035)}
.faq details:hover summary::before,.faq details[open] summary::before{opacity:1}
.faq .ans{display:block;overflow:hidden}
.faq .ans > p{padding:0 24px 0 62px}
.faq details[open] .ans > p{padding-bottom:20px}
@media(max-width:560px){.faq summary{padding-left:52px}.faq summary::before{left:17px}.faq .ans > p{padding:0 20px 0 52px}}

/* ================================================================
   11. CTA  (punch card drops into a slot; ghost word fills)
   ================================================================ */
.cta .cta-ghost{--fill:100%;
  -webkit-text-stroke:1.5px rgba(255,107,26,.22);
  background-image:linear-gradient(0deg,rgba(184,70,10,.16) 0%,rgba(255,107,26,.13) calc(var(--fill) - 5%),rgba(255,170,110,.42) calc(var(--fill) - .8%),rgba(255,226,204,.6) var(--fill),transparent calc(var(--fill) + .4%));
  -webkit-background-clip:text;background-clip:text}
.punch{display:grid;justify-items:center;margin-top:4px}
.punch-card{
  position:relative;z-index:1;display:grid;gap:10px;width:min(520px,100%);padding:15px 22px 42px;border-radius:8px;text-align:left;color:#140b05;
  background:
    repeating-linear-gradient(180deg,transparent 0 23px,rgba(20,11,5,.07) 23px 24px),
    linear-gradient(160deg,#ffae6e,var(--orange) 42%,#f0600f);
  box-shadow:0 22px 48px -14px rgba(255,107,26,.7),inset 0 0 0 1px rgba(255,200,160,.45),inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .45s var(--ease-out),box-shadow .3s var(--ease-out);-webkit-tap-highlight-color:transparent;
}
.punch-card:focus-visible{outline-offset:5px}
.pc-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding-bottom:9px;border-bottom:1.5px dashed rgba(20,11,5,.38);
  font-family:var(--fm);font-size:.6rem;letter-spacing:2px;text-transform:uppercase;white-space:nowrap}
.pc-head b{font-weight:700}
.pc-head i{font-style:normal;opacity:.72;overflow:hidden;text-overflow:ellipsis}
.pc-main{display:flex;align-items:center;justify-content:space-between;gap:16px}
.pc-label{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:clamp(1.45rem,3.2vw,2.05rem);line-height:1;letter-spacing:.4px}
.pc-arrow{width:28px;height:28px;flex:none;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transition:transform .3s var(--ease-out)}
.pc-fields{display:flex;flex-wrap:wrap;gap:8px}
.pc-f{display:inline-flex;align-items:center;gap:8px;padding:4px 8px 4px 6px;border:1.5px solid rgba(20,11,5,.38);border-radius:5px;
  font-family:var(--fm);font-size:.62rem;letter-spacing:1.4px;text-transform:uppercase}
.pc-f i{font-style:normal;font-weight:700;background:rgba(20,11,5,.85);color:#ffb27a;border-radius:3px;padding:2px 5px}
.pc-f b{font-weight:700;min-width:7ch;display:inline-block}
.pc-in.is-stamped{color:#7a1d00}
.punch-slot{position:relative;z-index:2;width:min(570px,calc(100% + 16px));height:46px;margin-top:-22px;border-radius:10px;
  background:linear-gradient(180deg,#27384c,#131c28 52%,#0c131c);border:1px solid #34485f;
  box-shadow:0 18px 40px rgba(0,0,0,.55),inset 0 1px 0 rgba(255,255,255,.08)}
.ps-slit{position:absolute;left:5%;right:5%;top:3px;height:7px;border-radius:4px;display:block;background:#020407;
  box-shadow:inset 0 2px 3px rgba(0,0,0,.95),0 1px 0 rgba(255,255,255,.06)}
.ps-slit::after{content:"";position:absolute;inset:2px 12%;border-radius:3px;background:linear-gradient(90deg,transparent,rgba(255,107,26,.75),transparent);filter:blur(2px);opacity:.55;transition:opacity .3s}
.ps-lbl{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-family:var(--fm);font-size:.64rem;letter-spacing:3px;text-transform:uppercase;color:var(--mut)}
.punch:hover .ps-slit::after{opacity:1}
@media(max-width:560px){.cta .cta-ghost{top:calc(100% - 60px);font-size:21vw}}
@media (hover:hover) and (prefers-reduced-motion: no-preference){
  .punch-card:hover{transform:translateY(12px);box-shadow:0 12px 30px -12px rgba(255,107,26,.8),inset 0 0 0 1px rgba(255,200,160,.5),inset 0 1px 0 rgba(255,255,255,.35)}
  .punch-card:hover .pc-arrow{transform:translateX(4px)}
}