/* V6.45 — Before/after showcase. CSP-safe (no inline styles). Uses site.css tokens. */
.ba{overflow-x:clip}
.ba .glow--a{top:4%}
.ba__head{max-width:62rem;margin-inline:auto;text-align:center}
.ba__head .eyebrow{justify-content:center}
.ba__head h2{margin-bottom:1.3rem}
.ba__head .lede{margin-inline:auto;margin-bottom:0}

/* Stage: slider left, phones right */
.ba__grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(1.4rem,3vw,2.6rem);align-items:center;margin-top:clamp(2.2rem,5vw,3.8rem)}

/* Compare slider */
.ba__stage{--p:50%;position:relative;min-width:0;border-radius:var(--r);padding:10px;background:linear-gradient(160deg,rgba(255,255,255,.12),rgba(255,255,255,.03));border:1px solid var(--line);box-shadow:0 50px 120px -50px #000,0 0 90px -30px rgba(246,147,29,.45),inset 0 1px 0 rgba(255,255,255,.18)}
.ba__chrome{display:flex;align-items:center;gap:.45rem;padding:.35rem .6rem .7rem;color:var(--dim);font-size:.78rem;font-weight:600;letter-spacing:.04em}
.ba__chrome i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.2)}
.ba__chrome i:nth-child(1){background:#ff6a5f}.ba__chrome i:nth-child(2){background:#f0b429}.ba__chrome i:nth-child(3){background:#3fcf8e}
.ba__chrome span{min-width:0;margin-left:.6rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ba__view{position:relative;aspect-ratio:800/737;overflow:hidden;border-radius:calc(var(--r) - 8px);background:#000;user-select:none;-webkit-user-select:none}
.ba__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;max-width:none;pointer-events:none}
.ba__before{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--p)) 0 0);-webkit-clip-path:inset(0 calc(100% - var(--p)) 0 0)}
.ba__before .ba__img{filter:saturate(.7) contrast(.95)}
.ba__tag{position:absolute;top:14px;z-index:3;padding:.4rem .75rem;border-radius:10px;font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ba__tag--before{left:14px;background:rgba(20,20,22,.78);color:#e8e4dc;border:1px solid rgba(255,255,255,.22)}
.ba__tag--after{right:14px;background:linear-gradient(135deg,var(--orange),var(--ember));color:#120800;box-shadow:0 8px 28px -8px rgba(246,147,29,.9)}
.ba__line{position:absolute;top:0;bottom:0;left:var(--p);width:2px;margin-left:-1px;z-index:4;background:linear-gradient(180deg,transparent,#fff 12%,#fff 88%,transparent);box-shadow:0 0 22px 2px rgba(255,190,110,.75);pointer-events:none}
.ba__knob{position:absolute;top:50%;left:50%;width:56px;height:56px;margin:-28px 0 0 -28px;display:grid;place-items:center;border-radius:18px;background:linear-gradient(135deg,var(--orange),var(--ember));color:#120800;box-shadow:0 12px 40px -6px rgba(246,147,29,.95),inset 0 1px 0 rgba(255,255,255,.5)}
.ba__knob svg{width:30px;height:30px}
.ba__knob::before{content:"";position:absolute;inset:-9px;border-radius:24px;border:1.5px solid rgba(255,190,110,.55);animation:baPulse 2.4s var(--ease) infinite}
@keyframes baPulse{0%{transform:scale(.88);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.ba__range{position:absolute;inset:0;z-index:5;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y;-webkit-appearance:none;appearance:none}
.ba__view:has(.ba__range:focus-visible) .ba__knob{outline:3px solid var(--gold);outline-offset:4px}
.ba__hint{display:flex;align-items:center;justify-content:center;gap:.6rem;padding:.8rem .5rem .35rem;color:var(--mute);font-size:.88rem;font-weight:600}
.ba__hint svg{width:1.1em;height:1.1em;color:var(--gold)}

/* Phones */
.ba__phones{display:grid;grid-template-columns:1fr 1fr;gap:clamp(.8rem,2vw,1.4rem);align-items:end}
.ba__phone{margin:0;text-align:center}
.ba__bezel{position:relative;padding:7px;border-radius:30px;background:#0a0a0c;border:1px solid rgba(255,255,255,.22);box-shadow:0 40px 90px -40px #000,inset 0 1px 0 rgba(255,255,255,.18)}
.ba__bezel img{width:100%;aspect-ratio:375/812;object-fit:cover;border-radius:23px;max-width:none}
.ba__phone--before .ba__bezel{opacity:.82;transform:rotate(-2.2deg) scale(.96);filter:saturate(.75)}
.ba__phone--after .ba__bezel{border-color:rgba(246,147,29,.65);box-shadow:0 50px 100px -40px #000,0 0 70px -10px rgba(246,147,29,.7),inset 0 1px 0 rgba(255,255,255,.3);animation:baFloat 6s ease-in-out infinite}
@keyframes baFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.ba__phone figcaption{margin-top:1rem;font-size:.9rem;line-height:1.4;color:var(--mute)}
.ba__phone figcaption b{display:block;margin-bottom:.15rem;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.ba__phone--after figcaption b{color:var(--gold)}

/* What changed */
.ba__sub{margin:clamp(3rem,6vw,5rem) 0 clamp(1.4rem,3vw,2.2rem);text-align:center}
.ba__sub .eyebrow{justify-content:center}
.ba__sub h3{font-size:clamp(1.9rem,3.4vw,3rem)}
.ba__changes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(.9rem,1.6vw,1.4rem)}
.ba__ch{padding:clamp(1.4rem,2vw,1.9rem);display:flex;flex-direction:column;gap:1rem}
.ba__ch h4{font-family:var(--serif);font-size:clamp(1.4rem,1.7vw,1.7rem);line-height:1.1;color:var(--ink)}
.ba__row{margin:0;padding-left:1rem;font-size:.97rem;line-height:1.5;border-left:2px solid var(--line);color:var(--dim)}
.ba__row span{display:block;margin-bottom:.2rem;font-size:.72rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.ba__row--a{border-left-color:var(--orange);color:var(--ink)}
.ba__row--a span{color:var(--gold)}

/* Closing statement + CTA */
.ba__state{max-width:54rem;margin:clamp(3rem,6vw,5rem) auto 0;text-align:center;font-family:var(--serif);font-size:clamp(1.9rem,4vw,3.4rem);line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
.ba__cta{position:relative;margin-top:clamp(2rem,4vw,3rem);display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:clamp(1.4rem,3vw,3rem);align-items:center;padding:clamp(1.8rem,4vw,3.4rem);border-color:rgba(246,147,29,.45);background:linear-gradient(150deg,rgba(246,147,29,.16),rgba(255,255,255,.03) 55%);overflow:hidden}
.ba__cta::before{content:"";position:absolute;width:420px;height:420px;right:-120px;top:-160px;border-radius:50%;background:radial-gradient(circle,rgba(246,147,29,.5),transparent 65%);filter:blur(60px);pointer-events:none}
.ba__cta>*{position:relative}
.ba__cta .eyebrow{margin-bottom:1rem}
.ba__cta h3{font-size:clamp(2rem,3.6vw,3.2rem);margin-bottom:1rem}
.ba__cta p{margin:0;color:var(--mute);font-size:1.05rem;line-height:1.6}
.ba__act{display:flex;flex-direction:column;gap:.8rem}
.ba__act .btn{width:100%;min-height:62px;font-size:1.08rem}
.ba__note{font-size:.88rem;color:var(--dim);text-align:center}
.ba__cred{margin:clamp(1.4rem,3vw,2rem) auto 0;max-width:46rem;text-align:center;font-size:.82rem;line-height:1.55;color:var(--dim)}

@media(max-width:1100px){
  .ba__grid{grid-template-columns:minmax(0,1fr)}
  .ba__phones{max-width:34rem;margin-inline:auto;width:100%}
  .ba__changes{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .ba__cta{grid-template-columns:minmax(0,1fr)}
  .ba__changes{grid-template-columns:minmax(0,1fr)}
  .ba__chrome span{font-size:.72rem}
  .ba__knob{width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:15px}
  .ba__knob svg{width:26px;height:26px}
  .ba__stage{padding:7px}
}
@media(prefers-reduced-motion:reduce){
  .ba__knob::before,.ba__phone--after .ba__bezel{animation:none}
}

/* V6.46 — "Walk through both sites" call-out + full-screen viewer */
.ba__walk{max-width:74rem;margin:clamp(2.4rem,5vw,4rem) auto 0;text-align:center}
.ba__walkk{margin:0 0 .6rem;color:var(--gold);font-size:.8rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.ba__walk h3{font-size:clamp(2.1rem,4.2vw,3.6rem);margin-bottom:.8rem}
.ba__walk>p:not(.ba__walkk){margin:0 auto 1.4rem;max-width:40rem;color:var(--mute)}
.ba__walkb{display:flex;flex-wrap:wrap;gap:.8rem;justify-content:center}

html.sx-open{overflow:hidden}
.sx{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:#07070a;color:var(--ink);overflow:hidden}
.sx[open]{display:flex;flex-direction:column}
.sx::backdrop{background:#000}
.sx__bar{display:flex;align-items:center;justify-content:space-between;gap:.8rem;padding:.7rem clamp(.7rem,2vw,1.2rem);border-bottom:1px solid var(--line);background:rgba(255,255,255,.04);flex:none}
.sx__tabs{display:flex;gap:.35rem;padding:.3rem;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.05)}
.sx__t,.sx__b{min-height:44px;padding:.5rem 1rem;border:1px solid transparent;border-radius:11px;background:transparent;color:var(--mute);font:700 .92rem var(--sans);cursor:pointer;transition:background .25s,color .25s,border-color .25s}
.sx__t:hover,.sx__b:hover{color:var(--ink)}
.sx__t[aria-pressed="true"]{background:linear-gradient(135deg,var(--orange),var(--ember));color:#120800}
.sx__tools{display:flex;gap:.5rem}
.sx__b{border-color:var(--line)}
.sx__b[aria-pressed="true"]{border-color:var(--orange);color:var(--gold)}
.sx__t:focus-visible,.sx__b:focus-visible,.sx__go:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.sx__stage{flex:1;min-height:0;display:flex;gap:clamp(.6rem,1.4vw,1.1rem);padding:clamp(.6rem,1.4vw,1.1rem)}
.sx__pane{flex:1;min-width:0;display:none;flex-direction:column;gap:.5rem}
.sx[data-mode="before"] .sx__pane[data-pane="before"],.sx[data-mode="after"] .sx__pane[data-pane="after"],.sx[data-mode="both"] .sx__pane{display:flex}
.sx__lab{display:none;margin:0;color:var(--dim);font-size:.74rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase}
.sx[data-mode="both"] .sx__lab{display:block}
.sx__pane[data-pane="after"] .sx__lab{color:var(--gold)}
.sx__box{position:relative;flex:1;min-height:0;overflow:hidden;border-radius:16px;border:1px solid var(--line);background:#fff;box-shadow:0 30px 80px -40px #000}
.sx__pane[data-pane="after"] .sx__box{border-color:rgba(246,147,29,.6);box-shadow:0 30px 80px -40px #000,0 0 60px -20px rgba(246,147,29,.6)}
.sx__f{position:absolute;top:0;left:0;width:100%;height:100%;border:0;background:#fff}
/* Phone view: a real phone shows the 2012 page zoomed out from a 980 px desktop layout, so we do the same */
.sx[data-dev="phone"] .sx__box{width:min(390px,100%);margin-inline:auto;flex:1;border-radius:36px;border:9px solid #0a0a0c;outline:1px solid rgba(255,255,255,.25)}
.sx[data-dev="phone"] .sx__f[data-f="before"],.sx[data-narrow="1"] .sx__f[data-f="before"]{width:980px;height:calc(100% / var(--sc,.4));transform:scale(var(--sc,.4));transform-origin:0 0}
.sx[data-fit="1"] .sx__f{width:1280px;height:calc(100% / var(--sc2,.5));transform:scale(var(--sc2,.5));transform-origin:0 0}
.sx__cta{margin:0;padding:.7rem 1rem;flex:none;text-align:center;font-size:.95rem;color:var(--mute);border-top:1px solid var(--line);background:rgba(255,255,255,.04)}
.sx__go{margin-left:.4rem;color:var(--gold);font-weight:800;text-underline-offset:4px}
.sx__sm{display:none}
@media(max-width:899px){
  .sx__lg{display:none}.sx__sm{display:inline}
  .sx__tabs{flex:1}
  /* V6.48: on phones and small tablets, "both" stacks the two sites top and bottom, scrolling together. */
  .sx[data-mode="both"] .sx__stage{flex-direction:column;gap:.35rem}
  .sx[data-mode="both"] .sx__pane{flex:1 1 0;min-height:0;gap:.3rem}
  .sx[data-mode="both"] .sx__lab{font-size:.68rem}
  .sx[data-mode="both"] .sx__box{border-radius:12px}
  .sx__t{flex:1;padding:.5rem .4rem}
}
@media(max-width:700px){
  .sx__dev{display:none}
  .sx__b.sx__x{padding:.5rem .8rem}
  .sx__stage{padding:.4rem}
  .sx__cta{font-size:.85rem}
}

/* V6.47 portal: two live windows pulled toward a glowing core */
.pt{--mx:0;--my:0;position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(.6rem,2.2vw,2rem);margin:clamp(1.8rem,4vw,3rem) auto clamp(1.6rem,3vw,2.2rem);perspective:1700px;text-align:left}
.pt::before{content:"";position:absolute;left:6%;right:6%;top:50%;height:2px;margin-top:-1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.5) 20%,var(--orange) 50%,rgba(255,255,255,.5) 80%,transparent);box-shadow:0 0 36px 6px rgba(246,147,29,.55);opacity:.7;pointer-events:none;animation:ptBeam 4s ease-in-out infinite}
@keyframes ptBeam{0%,100%{opacity:.35}50%{opacity:.9}}
.pt__win{position:relative;z-index:1;min-width:0;padding:8px;border-radius:var(--r);background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.03));border:1px solid var(--line);box-shadow:0 60px 110px -50px #000;transform-style:preserve-3d;transition:transform .7s var(--ease),filter .7s var(--ease),box-shadow .7s var(--ease)}
.pt__win--b{transform:rotateY(calc(15deg + var(--mx)*-5deg)) rotateX(calc(var(--my)*4deg)) scale(.93);filter:saturate(.65) brightness(.82)}
.pt__win--a{transform:rotateY(calc(-15deg + var(--mx)*-5deg)) rotateX(calc(var(--my)*4deg)) scale(.97);border-color:rgba(246,147,29,.6);box-shadow:0 60px 110px -50px #000,0 0 90px -14px rgba(246,147,29,.65),inset 0 1px 0 rgba(255,255,255,.25)}
.pt__win:hover,.pt__win:focus-within{transform:rotateY(0) rotateX(0) translateY(-8px) scale(1.03);filter:none;z-index:2}
.pt__win--a:hover,.pt__win--a:focus-within{box-shadow:0 70px 120px -50px #000,0 0 120px -10px rgba(246,147,29,.9),inset 0 1px 0 rgba(255,255,255,.3)}
.pt__bar{display:flex;align-items:center;gap:.4rem;padding:.2rem .5rem .6rem;color:var(--dim);font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.pt__bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22)}
.pt__bar i:nth-child(1){background:#ff6a5f}.pt__bar i:nth-child(2){background:#f0b429}.pt__bar i:nth-child(3){background:#3fcf8e}
.pt__bar span{margin-left:.5rem;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pt__live{margin-left:auto;display:inline-flex;align-items:center;gap:.4rem;color:var(--gold);font-size:.7rem;letter-spacing:.16em}
.pt__live::before{content:"";width:8px;height:8px;border-radius:50%;background:#3fcf8e;box-shadow:0 0 0 0 rgba(63,207,142,.7);animation:ptLive 1.8s infinite}
@keyframes ptLive{70%{box-shadow:0 0 0 9px rgba(63,207,142,0)}100%{box-shadow:0 0 0 0 rgba(63,207,142,0)}}
.pt__view{position:relative;aspect-ratio:16/11;overflow:hidden;border-radius:calc(var(--r) - 8px);background:#000}
.pt__view img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:top}
.pt__view iframe{position:absolute;left:0;top:0;width:1280px;height:calc(100% / var(--sc,.4));border:0;transform:scale(var(--sc,.4));transform-origin:0 0;pointer-events:none;opacity:0;transition:opacity .9s var(--ease);background:#fff}
.pt__view iframe.is-live{opacity:1}
.pt__view::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.22) 50%,transparent 60%);transform:translateX(-120%);animation:ptSheen 5.5s var(--ease) infinite}
.pt__win--a .pt__view::after{animation-delay:1.4s}
@keyframes ptSheen{0%,55%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
.pt__win .ba__tag{top:48px;pointer-events:none}
.pt__cue{position:absolute;left:50%;bottom:22px;z-index:2;transform:translate(-50%,8px);padding:.6rem 1rem;border-radius:12px;background:rgba(10,10,12,.78);border:1px solid rgba(255,255,255,.24);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:#fff;font-size:.82rem;font-weight:700;letter-spacing:.04em;white-space:nowrap;opacity:.9;pointer-events:none;transition:transform .5s var(--ease),opacity .5s}
.pt__win--a .pt__cue{background:linear-gradient(135deg,var(--orange),var(--ember));border-color:transparent;color:#120800}
.pt__win:hover .pt__cue,.pt__win:focus-within .pt__cue{transform:translate(-50%,-4px);opacity:1}
.pt__hit{position:absolute;inset:0;z-index:3;margin:0;padding:0;border:0;border-radius:var(--r);background:transparent;cursor:pointer}
.pt__core{position:relative;z-index:4;display:grid;justify-items:center;gap:.9rem;text-align:center}
.pt__orb{position:relative;width:104px;height:104px;display:grid;place-items:center;margin:0;padding:0;border:0;border-radius:32px;cursor:pointer;color:#120800;background:linear-gradient(135deg,var(--orange),var(--ember));box-shadow:0 20px 60px -10px rgba(246,147,29,.95),inset 0 1px 0 rgba(255,255,255,.55);transition:transform .45s var(--ease)}
.pt__orb svg{width:44px;height:44px}
.pt__orb::before,.pt__orb::after{content:"";position:absolute;inset:-12px;border-radius:42px;border:1.5px solid rgba(255,190,110,.6);animation:baPulse 2.6s var(--ease) infinite}
.pt__orb::after{animation-delay:1.3s}
.pt__orb:hover,.pt__orb:focus-visible{transform:scale(1.1) rotate(-4deg)}
.pt__go{max-width:9.5rem;font-family:var(--serif);font-size:1.35rem;line-height:1.1;color:var(--ink)}
@media(max-width:1000px){
  .pt__orb{width:84px;height:84px;border-radius:26px}
  .pt__orb svg{width:36px;height:36px}
  .pt__go{font-size:1.15rem;max-width:7rem}
  .pt__bar span{font-size:.68rem}
}
@media(max-width:760px){
  .pt{grid-template-columns:minmax(0,1fr);gap:1.1rem;perspective:none}
  .pt::before{left:50%;right:auto;top:6%;bottom:6%;width:2px;height:auto;margin:0}
  .pt__win--b{transform:rotate(-1.4deg) scale(.98)}
  .pt__win--a{transform:rotate(1.2deg)}
  .pt__win:hover,.pt__win:focus-within{transform:none}
  .pt__core{grid-template-columns:auto 1fr;justify-items:start;align-items:center;text-align:left;gap:1rem;padding:.2rem .4rem}
  .pt__go{max-width:none;font-size:1.3rem}
  .pt__cue{bottom:14px}
}
@media(prefers-reduced-motion:reduce){
  .pt::before,.pt__live::before,.pt__orb::before,.pt__orb::after,.pt__view::after{animation:none}
  .pt__win{transition:none}
}