/* THE LANE v5 (test page /lane): a scroll-driven product tour of the real services.
   Loads AFTER activly.css and its trims; everything is scoped to .ln / .ln-* / .lns so it cannot disturb the shared site CSS.
   One DOM, two renderings of ONE story:
   1. live   (html.ln-live, >= 900px wide and >= 620px tall): a sticky stage. lane.js writes ONE smoothed progress value (--p) and, per scene,
             --in / --out / --t (entry, exit, dwell). Devices are real HTML (phone, tablet, windows) authored at final size and only
             ever moved/rotated/scaled DOWN; no filter, no backdrop-filter, no WebGL. A thin gold line draws itself across the stage.
   2. static (no JS / reduced motion / paused / narrow screens): the same scenes as tidy stacked blocks, the same device frames,
             a short gold thread between scenes. This is also the lighter vertical stepper used under 900px.
   Legibility rule: every block of running text sits on a SOLID panel (--pn); nothing ever draws behind a letter.
   Colours come from the activly.css tokens (--gold, --cta, --ink ...). */
.wrap{overflow-x:clip;--ink-3:#66627f}
.ln-skip{position:absolute;left:12px;top:-60px;z-index:200;background:#fff;color:var(--ink);padding:10px 16px;border-radius:10px;font-weight:800;text-decoration:none}
.ln-skip:focus{top:10px}
.ln a:focus-visible,.ln button:focus-visible,.ln-skip:focus-visible{outline:3px solid var(--gold);outline-offset:3px;border-radius:10px}
.ln-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ln{--pn:var(--brand-deep);--pnl:rgba(255,255,255,.22);--capi:#fff;--capp:#e4ebff;--capk:var(--gold);--gx:max(22px,calc((100% - var(--maxw,1120px))/2 + 22px));--dir:1;--cx:64%;position:relative;color:#fff;background:var(--brand-deep)}
html[dir=rtl] .ln{--dir:-1;--cx:36%}
.ln h1,.ln h2{margin:0}
.ln-pin{position:relative;background:var(--dots),var(--hero-grad);background-size:18px 18px,cover}
.ln-bgl,.ln-line,.ln-dot,.ln-cue{display:none}
.ln-ctl{display:none}
.ln-ctl a,.ln-ctl button{font:inherit;font-size:13px;font-weight:800;color:#fff;background:var(--pn);border:1.5px solid rgba(255,255,255,.7);border-radius:999px;padding:9px 15px;cursor:pointer;text-decoration:none;line-height:1.2}
.ln-ctl a:hover,.ln-ctl button:hover{border-color:var(--gold);color:var(--gold)}
.ln-ctl .ln-pp-b,.ln-ctl button[aria-pressed=true] .ln-pp-a{display:none}
.ln-ctl button[aria-pressed=true] .ln-pp-b{display:inline}
html.ln-js .ln-ctl{display:flex;order:-1;justify-content:flex-end;gap:8px;align-items:center;padding:8px 16px;background:var(--pn)}
html.ln-js .ln-pin{display:flex;flex-direction:column}
html.ln-js .ln-pin>.lns{width:100%}

/* ---------- hero: the home-page hero, verbatim (styled by activly.css + hero-merge.css) ---------- */
.ln-heroin{position:relative}
.ln .ln-hero{background:none}
.ln .trust{color:#fff}
.ln .trust b{color:#fff}
.ln .btn-primary{background:var(--cta);color:var(--cta-ink);box-shadow:0 12px 26px -12px var(--cta)}
.ln .btn-ghost{border-color:rgba(255,255,255,.7);color:#fff}
.ln .btn-ghost:hover{border-color:#fff;color:var(--gold)}

/* ---------- scene captions (solid panels) ---------- */
.lns-cap{background:var(--pn);border:1px solid var(--pnl);border-inline-start:5px solid var(--gold);border-radius:18px;padding:18px 22px 20px;box-shadow:0 26px 60px -30px rgba(0,0,0,.8)}
.lns-cap .d-k{display:block;font-size:12.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--capk)}
.lns-cap h2{margin-top:8px;font-size:clamp(25px,2.4vw,36px);line-height:1.08;letter-spacing:-.03em;color:var(--capi);text-wrap:balance}
.lns-cap p{margin:10px 0 0;font-size:16.5px;line-height:1.5;color:var(--capp)}
.lns-cap p.d-cap{margin:0;font-size:clamp(24px,2.6vw,38px);font-weight:800;line-height:1.08;letter-spacing:-.03em;color:var(--capi);text-wrap:balance}

/* light scenes: the home page's own light palette (--bg / --brand-soft) so the journey alternates blue / light */
.lns-l{--pn:#fff;--pnl:var(--line);--capi:var(--ink);--capp:var(--ink-2);--capk:var(--brand);color:var(--ink)}
.lns-l .lns-cap{box-shadow:0 26px 60px -34px rgba(22,48,110,.45)}
.lns-l .d-win,.lns-l .d-tb,.lns-l .d-toast,.lns-l .d-cert{outline:1px solid rgba(29,58,143,.14)}
.lns-l .d-ph .d-sd.d-out{background:#fff;color:var(--ink);border-color:var(--line)}

/* ---------- device frames (real HTML) ---------- */
.d-dv{font-size:15px;color:var(--ink);text-align:start;position:relative;min-width:0}
.d-sd{display:inline-block;flex:none;font-size:.72em;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#3d4468;background:#e8edfb;border-radius:999px;padding:.35em .85em;white-space:nowrap}
.d-ic{flex:none;width:2.3em;height:2.3em;border-radius:.7em;display:grid;place-items:center;font-weight:800;font-size:1em;background:var(--gold);color:var(--cta-ink)}
.d-ic.d-b{background:#1e3a8a;color:#fff}
.d-ic.d-g{background:#0b7a3b;color:#fff}
.d-in{font-weight:800;letter-spacing:.02em}
.d-pill{flex:none;font-size:.82em;font-weight:800;border-radius:999px;padding:.35em .9em;white-space:nowrap}
.d-pill.d-ok{background:#dff5e7;color:#075e2e}
.d-pill.d-go{background:#1f3f9e;color:#fff}
.d-tk{flex:none;width:1.7em;height:1.7em;border-radius:50%;display:grid;place-items:center;font-size:.9em;font-weight:900;background:#0b7a3b;color:#fff}
.d-tk.d-w{background:#b45309}
.d-win{background:#fff;border-radius:1em;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.7) inset,0 3px 6px rgba(5,14,44,.25),0 30px 56px -18px rgba(5,14,44,.65),0 70px 110px -40px rgba(0,0,0,.7)}
.d-win-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.3em .4em;padding:.7em 1em;background:#eceff9;border-bottom:1px solid #dbe1f2}
.d-win-bar i{flex:none;width:.7em;height:.7em;border-radius:50%;background:#c3cbe3}
.d-win-bar i:first-child{background:#ff8a80}.d-win-bar i:nth-child(2){background:#ffcf5c}.d-win-bar i:nth-child(3){background:#69d391}
.d-win-bar b{flex:1;min-width:0;margin-inline-start:.6em;font-size:.95em;color:var(--ink);min-width:5em}
.d-win-body{padding:1.1em 1.2em 1.25em}
.d-lbl{margin:1.1em 0 .5em;font-size:.8em;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#4a4763}
.d-kp{display:grid;grid-template-columns:repeat(auto-fit,minmax(7.2em,1fr));gap:.7em}
.d-kp div{background:#f1f4fc;border-radius:.9em;padding:.8em .9em;min-width:0}
.d-kp span{display:block;font-size:.76em;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#4a4763;line-height:1.25;overflow-wrap:anywhere}
.d-kp b{display:block;margin-top:.2em;font-size:2em;letter-spacing:-.03em;line-height:1.1;font-variant-numeric:tabular-nums}
.d-bars{display:flex;align-items:flex-end;gap:.8em;height:12em}
.d-bars div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;min-width:0}
.d-bars b{font-size:.82em;font-variant-numeric:tabular-nums;margin-bottom:.25em;white-space:nowrap}
.d-bars i{display:block;width:100%;height:calc(var(--v)*.082em);border-radius:.6em .6em .25em .25em;background:linear-gradient(180deg,var(--gold),#e59a00);transform-origin:50% 100%}
.d-bars span{margin-top:.4em;font-size:.82em;font-weight:700;color:#4a4763}
.d-rows{list-style:none;margin:0;padding:0;display:grid;gap:.6em}
.d-rows li{display:flex;align-items:center;gap:.75em;background:#f1f4fc;border-radius:.85em;padding:.65em .8em;font-weight:700;line-height:1.25}
.d-rows li>div{flex:1;min-width:0}
.d-rows li.d-al{background:#fff1d6}
.d-rows b{display:block;font-size:1em}
.d-rows li>b.d-in{flex:1;display:block}
.d-rows small{display:block;font-size:.86em;font-weight:700;color:var(--ink-2);margin-top:.1em}
.d-rows li>small{margin:0}
.d-rows .d-tk+b{flex:none}
.d-rows.d-tight li{padding:.5em .7em}
.d-rows.d-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.d-rows.d-two li{flex-wrap:wrap}
.d-rows code{font:inherit;font-weight:800;letter-spacing:.04em}
.d-amt{font-style:normal;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
.d-amt.d-up{color:#075e2e}
.d-split{display:grid;grid-template-columns:1fr 1fr;gap:.6em;margin-top:.8em}
.d-mini{background:#eef3ff;border-radius:.85em;padding:.7em .8em}
.d-mini.d-ok{background:#dff5e7}
.d-mini span{display:block;font-size:.78em;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:#4a4763}
.d-mini b{display:block;font-size:1.6em;letter-spacing:-.02em;line-height:1.15}
.d-tbl{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.d-tbl th,.d-tbl td{padding:.6em .4em;text-align:end;border-bottom:1px solid #e3e8f6;font-weight:700}
.d-tbl th:first-child,.d-tbl thead th{text-align:start}
.d-tbl thead th{font-size:.78em;letter-spacing:.04em;text-transform:uppercase;color:#4a4763}
.d-tbl .d-tot th,.d-tbl .d-tot td{border-bottom:0;font-size:1.1em;font-weight:800;color:var(--ink)}
.d-chat{display:grid;gap:.6em;align-content:start;min-height:9em}
.d-bub{margin:0;max-width:82%;padding:.65em .9em;border-radius:1em;font-weight:600;line-height:1.35}
.d-bub.d-them{background:#eef1fa;border-end-start-radius:.3em}
.d-bub.d-me{justify-self:end;background:#1f3f9e;color:#fff;border-end-end-radius:.3em}
.d-post{margin:0;font-weight:800;font-size:1.05em;line-height:1.3;background:#fff6d2;border-radius:.85em;padding:.9em 1em}
.d-stars{margin:0;font-size:1.7em;letter-spacing:.08em;color:#c77700;line-height:1.1}
.d-rtxt{background:#fff;margin:.4em 0 0;font-weight:700;line-height:1.35}
.d-course{margin:0 0 .7em;font-weight:800;font-size:1.05em;line-height:1.3}
.d-prog{height:.7em;border-radius:99px;background:#e3e8f6;overflow:hidden;margin-bottom:.9em}
.d-prog i{display:block;height:100%;width:100%;background:linear-gradient(90deg,var(--gold),#e59a00);transform-origin:0 50%}
.d-sites{list-style:none;margin:0;padding:0;display:grid;gap:.55em}
.d-sites li{display:grid;grid-template-columns:6.5em 1fr;align-items:center;gap:.7em;font-weight:800}
.d-sites i{display:block;height:1em;width:calc(var(--v)*1%);border-radius:.4em;background:linear-gradient(90deg,#2f56c9,#6ea4f5);transform-origin:0 50%}
/* toast / certificate / moments */
.d-toast{display:flex;align-items:center;gap:.75em;width:max-content;max-width:100%;background:#fff;border-radius:1.1em;padding:.75em 1.1em .75em .75em;box-shadow:0 3px 6px rgba(5,14,44,.2),0 26px 50px -18px rgba(0,0,0,.7)}
.d-toast b{display:block;font-size:1em;line-height:1.2}
.d-toast small{display:block;font-size:.86em;color:var(--ink-2);font-weight:700}
.d-cert{background:#fffdf4;border-radius:.9em;padding:1.3em 1.4em 1.2em;text-align:center;border:.35em double #d9a826;box-shadow:0 3px 6px rgba(5,14,44,.2),0 30px 56px -18px rgba(0,0,0,.7)}
.d-cert p{margin:0}
.d-cert .d-cv{font-size:.8em;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#6b4a00}
.d-cert .d-cn{margin:.5em 0;font-size:1.7em;font-weight:800;letter-spacing:.02em}
.d-cert .d-cc{display:inline-block;font-weight:800;color:#075e2e;background:#dff5e7;border-radius:99px;padding:.3em .9em}
.d-cert .d-sd{display:block;width:max-content;margin:.9em auto 0}
.d-moments{background:var(--pn);border:1px solid var(--pnl);border-radius:1em;padding:.8em;box-shadow:0 3px 6px rgba(5,14,44,.3),0 30px 56px -18px rgba(0,0,0,.7)}
.d-mh{margin:0 0 .6em;display:flex;align-items:center;justify-content:space-between;gap:.6em;color:#fff}
.d-mh b{font-size:.95em}
.d-mg{display:grid;grid-template-columns:1fr 1fr;gap:.6em}
.d-mg img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:.7em}
/* phone */
.d-ph{width:min(100%,calc(var(--w)*1em));aspect-ratio:.485;border-radius:3.1em;padding:.55em;background:linear-gradient(145deg,#3a4574,#0a0e24 45%,#232c58);box-shadow:0 0 0 1.5px #5a6696,0 2px 4px rgba(0,0,0,.4),0 50px 90px -30px rgba(0,0,0,.8),0 0 90px -20px rgba(245,184,31,.4)}
.d-ph .d-isl{position:absolute;z-index:3;left:50%;top:1.15em;width:28%;height:1.5em;margin-left:-14%;border-radius:99px;background:#05071a}
.d-scr{position:relative;height:100%;border-radius:2.6em;overflow:hidden;background:linear-gradient(180deg,#dbe5ff,#eef2ff 40%,#f7f8ff);display:flex;flex-direction:column;padding:.8em .9em .9em;font-size:.9em}
.d-stat{display:flex;justify-content:space-between;font-weight:800;font-size:.85em;padding:.2em .9em 0;color:#1b2145}
.d-bcard{margin-top:2.2em;background:#fff;border-radius:1.1em;padding:.9em;box-shadow:0 12px 26px -12px rgba(5,14,44,.5)}
.d-bcard.d-sm{margin-top:.6em;padding:.7em .9em}
.d-bcard b{display:block;font-size:1.25em;letter-spacing:-.02em}
.d-bcard small{display:block;font-size:.95em;color:var(--ink-2);margin-top:.15em;font-weight:600}
.d-bcard small em{font-style:normal;font-weight:800;color:#075e2e}
.d-cta{margin-top:.8em;background:var(--cta);color:var(--cta-ink);text-align:center;font-weight:800;border-radius:999px;padding:.6em .4em;font-size:1.05em}
.d-scr .d-h{margin:2.2em 0 0;font-weight:800;font-size:1.15em}
.d-seq{display:grid;gap:.5em;margin-top:.7em}
.d-sq{display:flex;align-items:center;gap:.65em;background:#fff;border-radius:1em;padding:.5em .65em;box-shadow:0 10px 22px -12px rgba(5,14,44,.6)}
.d-sq .d-ic{width:2.1em;height:2.1em}
.d-sq>div{flex:1;min-width:0}
.d-sq b{display:block;font-size:.98em;line-height:1.2}
.d-sq small,.d-sq code{display:block;font:inherit;font-size:.86em;color:var(--ink-2);font-weight:700;margin-top:.1em}
.d-sq code{letter-spacing:.04em;font-weight:800}
.d-sq em{font-style:normal;font-weight:800;color:#075e2e;white-space:nowrap}
.d-sq.d-wl{background:#eef3ff}
.d-sq.d-pay{background:#fff6d2}
.d-sp{flex:1}
.d-tabs{display:flex;justify-content:space-around;background:rgba(255,255,255,.95);border-radius:1.3em;padding:.6em 0;font-weight:700;font-size:.92em}
.d-tabs .d-on{color:var(--indigo-deep,#2254b3)}
.d-clk{position:relative;margin-top:.7em;display:grid}
.d-clk span{grid-area:1/1}
.d-clk .d-a{display:none}
.d-ph .d-sd.d-out{position:absolute;left:50%;top:calc(100% + .6em);transform:translateX(-50%);background:var(--pn);color:#fff;border:1px solid var(--pnl)}
/* tablet */
.d-tb{width:min(100%,calc(var(--w)*1em));aspect-ratio:1.5;border-radius:2em;padding:.9em;background:linear-gradient(145deg,#3a4574,#0a0e24 45%,#232c58);box-shadow:0 0 0 1.5px #5a6696,0 50px 90px -30px rgba(0,0,0,.8),0 0 90px -20px rgba(245,184,31,.35)}
.d-tb-in{height:100%;border-radius:1.2em;background:#fff;padding:1.1em 1.3em;display:flex;flex-direction:column;gap:.8em;overflow:hidden}
.d-tb-in header{display:flex;justify-content:space-between;align-items:center;gap:.6em}
.d-tb-in header b{font-size:1.1em}
.d-tb-top{display:flex;justify-content:space-between;align-items:center;gap:.6em;flex-wrap:wrap}
.d-big{margin:0;font-size:2.1em;font-weight:800;letter-spacing:-.03em;line-height:1.1}
.d-big span+span{font-size:.55em;letter-spacing:0}
.d-coll{display:flex;align-items:center;gap:.7em;background:#dff5e7;border-radius:.85em;padding:.6em .8em;font-weight:800}

/* reveal helpers: final state by default (static / paused / reduced motion) */
.d-rv{opacity:1}

/* ---------- static / stepper layout (default; live mode overrides) ---------- */
.lns{position:relative;max-width:var(--maxw,1120px);margin:0 auto;padding:62px 22px 8px;display:grid;gap:26px;grid-template-columns:minmax(0,1fr)}
.lns+.lns::before{content:"";position:absolute;left:50%;top:6px;width:3px;height:44px;margin-left:-1.5px;border-radius:3px;background:linear-gradient(var(--gold),rgba(245,184,31,.15))}
.lns0{max-width:none;padding:0;display:block}
.lns-l{background:var(--bg);box-shadow:0 0 0 100vmax var(--bg);clip-path:inset(0 -100vmax)}
.lns-dev{display:flex;flex-wrap:wrap;gap:30px 26px;justify-content:center;align-items:flex-start;padding-bottom:34px}
.lns-dev .d-dv{width:min(100%,calc(var(--w)*1em))}
.lns-dev .d-dv.d-ph{width:min(100%,calc(var(--w)*1em));max-width:300px}
.lns-dev .d-toast{width:max-content}
.lns-dev .d-ph{order:-1}
.d-ses{position:relative;aspect-ratio:1600/1073;border-radius:22px;overflow:hidden;box-shadow:0 30px 70px -30px rgba(0,0,0,.8)}
.d-ses img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.d-ses .d-sbar{position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--gold)}
.lns3 .lns-cap.d-solo{margin-top:0}
.lns11{max-width:var(--maxw,1120px);display:block}
.ln-end{position:relative;margin-top:30px;padding:48px 22px 58px;text-align:center;border-radius:26px;background:radial-gradient(70% 45% at 50% 130%,rgba(245,184,31,.28),transparent 70%),var(--dots),var(--hero-grad);background-size:auto,18px 18px,cover;isolation:isolate;overflow:hidden}
.ln-end h2{font-size:clamp(34px,5vw,64px);letter-spacing:-.03em;line-height:1.04;color:var(--gold)}
.ln-ul{display:block;width:min(420px,70%);height:4px;margin:14px auto 0;border-radius:4px;background:var(--gold);transform-origin:50% 50%}
.ln-end .hero-cta,.ln-end .trust{justify-content:center}
.ln-kick{margin:20px 0 0;font-size:clamp(18px,1.7vw,22px);font-weight:700;color:var(--gold);background:var(--pn);border-radius:999px;padding:6px 18px;display:inline-block}
.ln-all{margin-top:26px;width:100%}
.ln-all>p{margin:0 0 12px;font-size:13px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#c9d8ff}
.ln-all ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;grid-template-columns:1fr;text-align:start}
.ln-all li{background:var(--pn);border:1.5px solid rgba(255,255,255,.4);border-radius:14px}
.ln-all a{display:block;padding:12px 16px 2px;color:#fff;font-weight:800;font-size:16px;line-height:1.25;text-decoration:none}
.ln-all small{display:block;padding:0 16px 12px;font-size:14px;font-weight:500;line-height:1.35;color:#d7e0fb}
.ln-all li:hover,.ln-all li:focus-within{border-color:var(--gold);background:#fff6d2}
.ln-all li:hover a,.ln-all li:focus-within a{color:#1d1400}
.ln-all li:hover small,.ln-all li:focus-within small{color:#4a3a00}
@media(min-width:640px){.ln-all ul{grid-template-columns:repeat(2,1fr)}}
@media(min-width:900px){
  .lns{grid-template-columns:minmax(0,.78fr) minmax(0,1.3fr);gap:44px;align-items:center;padding-top:74px}
  .lns3,.lns11,.lns0{display:block}
  .lns0{padding:0}
  .lns-dev{padding-bottom:0;font-size:15px}
  .ln-all ul{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
  .lns{padding:50px 16px 4px}
  .lns-cap{padding:15px 17px 17px}
  .ln-end{padding:38px 16px 48px;border-radius:20px}
  .lns-dev{font-size:14.5px}
}
@media(max-width:899px){
  html.ln-js.ln-anim .lns:not(.lns0){opacity:0;transform:perspective(900px) translate3d(0,36px,-140px) rotateX(16deg);transform-origin:50% 0;transition:opacity .7s,transform .8s cubic-bezier(.2,.7,.2,1)}
  html.ln-js.ln-anim .lns.lns-in{opacity:1;transform:none}
  html.ln-js.ln-anim .lns:not(.lns-in) .d-ph{transform:perspective(900px) rotateY(-28deg) translateZ(-60px)}
  html.ln-js.ln-anim .lns .d-ph{transition:transform 1s cubic-bezier(.2,.7,.2,1) .15s}
  html.ln-js.ln-anim .lns:not(.lns-in) .d-win,html.ln-js.ln-anim .lns:not(.lns-in) .d-tb{transform:perspective(900px) rotateY(18deg) translateZ(-50px)}
  html.ln-js.ln-anim .lns .d-win,html.ln-js.ln-anim .lns .d-tb{transition:transform 1s cubic-bezier(.2,.7,.2,1) .1s}
}

/* ---------- 1. LIVE stage ---------- */
@media(min-width:900px) and (min-height:620px){
html.ln-live{--u:clamp(11px,min(1.111vw,calc((100svh - var(--nh,66px)) * .0192)),18px)}
html.ln-live .ln{height:1100svh}
html.ln-live .ln-pin{display:block;position:sticky;top:var(--nh,66px);height:calc(100svh - var(--nh,66px));min-height:540px;overflow:hidden;contain:paint}
html.ln-live .ln-bgl,html.ln-live .ln-line,html.ln-live .ln-dot{display:block}
html.ln-live .ln-ctl{position:absolute;z-index:30;right:16px;top:12px;bottom:auto;order:0;padding:0;background:none}
html.ln-live .ln-bgl{position:absolute;inset:0;pointer-events:none}
html.ln-live .ln-bgl i{position:absolute;width:62vw;height:62vw;max-width:980px;max-height:980px;border-radius:50%;will-change:transform}
html.ln-live .ln-bgl .d-g1{left:-12%;top:-30%;background:radial-gradient(closest-side,rgba(70,110,230,.26),transparent);transform:translate3d(calc(var(--p,0)*38vw),calc(var(--p,0)*30vh),0)}
html.ln-live .ln-bgl .d-g2{right:-18%;bottom:-40%;background:radial-gradient(closest-side,rgba(245,184,31,.15),transparent);transform:translate3d(calc(var(--p,0)*-46vw),calc(var(--p,0)*-24vh),0)}
html.ln-live .ln-line{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;opacity:calc(1 - var(--fin,0))}
html[dir=rtl].ln-live .ln-line{transform:scaleX(-1)}
html.ln-live .ln-gl,html.ln-live .ln-gp{fill:none;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:calc(1 - var(--dr,0.001))}
html.ln-live .ln-gp{stroke:var(--gold);stroke-width:2.5;opacity:.95}
html.ln-live .ln-gl{stroke:var(--gold);stroke-width:12;opacity:.1}
html.ln-live .ln-lite .ln-gl{display:none}
html.ln-live .ln-dot{position:absolute;left:0;top:0;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#ffe08a;box-shadow:0 0 0 5px rgba(245,184,31,.28),0 0 22px 6px rgba(245,184,31,.55);will-change:transform;opacity:calc(1 - var(--fin,0))}
html.ln-live .ln-cue{display:block;position:absolute;z-index:30;left:50%;bottom:20px;transform:translateX(-50%);font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:#c9d8ff;opacity:calc(1 - var(--p,0)*30)}

html.ln-live .lns{position:absolute;inset:0;max-width:none;margin:0;padding:0;display:block;--in:1;--out:0;--t:.5;pointer-events:none}
html.ln-live .lns::before{display:none}
html.ln-live .lns-l::before{display:block;content:"";position:absolute;inset:0;z-index:-1;margin:0;width:auto;height:auto;border-radius:0;
  background:radial-gradient(56% 70% at 82% 6%,rgba(47,107,216,.20),transparent 70%),radial-gradient(40% 50% at 6% 100%,rgba(245,184,31,.16),transparent 70%),linear-gradient(180deg,var(--bg),var(--brand-soft));
  opacity:calc(clamp(0,(var(--in) - .4)*2.2,1)*(1 - var(--out)))}
html.ln-live .lns-l{box-shadow:none;clip-path:none;background:none}
html.ln-live .lns{isolation:isolate}
html.ln-live .lns.lns-off{opacity:0}
html.ln-live .lns.lns-off *{pointer-events:none!important}
html.ln-live .lns a,html.ln-live .lns button{pointer-events:auto}
html.ln-live .lns-dev{position:absolute;inset:0;display:block;padding:0;perspective:1700px;perspective-origin:calc(70% + (var(--t) - .5)*34%) calc(48% - (var(--t) - .5)*14%)}
html[dir=rtl].ln-live .lns-dev{perspective-origin:calc(30% - (var(--t) - .5)*34%) calc(48% - (var(--t) - .5)*14%)}
html.ln-live .d-dv{position:absolute;left:calc(var(--cx) + var(--dx)*var(--dir)*var(--u));top:calc(50% + var(--dy)*var(--u));width:calc(var(--w)*var(--u));font-size:var(--u);backface-visibility:hidden;will-change:transform,opacity;
  transform:translate(-50%,-50%)
    translate3d(calc(((1 - var(--in))*var(--x0,0) + var(--out)*var(--x1,-4) + (var(--t) - .5)*var(--xt,0))*var(--u)*var(--dir) + (1 - var(--in))*var(--ox,0px)),calc(((1 - var(--in))*var(--y0,10) + var(--out)*var(--y1,-7) + (var(--t) - .5)*var(--par,0))*var(--u) + (1 - var(--in))*var(--oy,0px)),calc((var(--z,0) + (1 - var(--in))*var(--z0,-46) + var(--out)*var(--z1,34) + (var(--t) - .5)*var(--zt,0))*var(--u)))
    rotateX(calc(var(--rx,0deg) + (1 - var(--in))*var(--rx0,20deg) + var(--out)*-14deg + (var(--t) - .5)*var(--spx,5deg)))
    rotateY(calc((var(--ry,0deg) + (1 - var(--in))*var(--ry0,-18deg) + (var(--t) - .5)*var(--spin,16deg) + var(--out)*24deg)*var(--dir)))
    rotateZ(calc((1 - var(--in))*var(--rz0,0deg) + var(--out)*var(--rz1,-3deg)))
    scale(calc(1 - (1 - var(--in))*(1 - var(--s0,.86)) - var(--out)*.06));
  opacity:calc(min(1,var(--in)*2.6 + var(--o0,0))*(1 - var(--out)*1.15))}
html.ln-live .d-dv{pointer-events:auto}
html.ln-live .d-dv.d-ph{width:calc(var(--w)*var(--u));max-width:none;--rz0:10deg;--z0:-70;--z1:46}
html.ln-live .d-dv.d-tb{width:calc(var(--w)*var(--u));max-width:none}
html.ln-live .d-toast{width:max-content;--z:14;--z0:-30;--zt:10;--s0:.7}
/* in-device reveals follow the scene's dwell progress */
html.ln-live .d-rv{opacity:clamp(0,(var(--t) - var(--at,.3))*8,1);transform:translateY(calc((1 - clamp(0,(var(--t) - var(--at,.3))*8,1))*.9em))}
html.ln-live .d-bars i{transform:scaleY(clamp(0,(var(--t) - .12 - var(--i)*.06)*5,1))}
html.ln-live .d-sites i{transform:scaleX(clamp(0,(var(--t) - .5)*4,1))}
html.ln-live .d-prog i{transform:scaleX(clamp(0,(var(--t) - .15)*2.2,1))}
html.ln-live .d-clk .d-a{display:block;opacity:clamp(0,1 - (var(--t) - .45)*8,1)}
html.ln-live .d-clk .d-b{opacity:clamp(0,(var(--t) - .5)*8,1)}
html.ln-live .d-ph .d-sd.d-out{top:auto;bottom:calc(100% + .5em)}

/* captions */
html.ln-live .lns-cap{position:absolute;inset-inline-start:var(--gx);top:50%;width:min(410px,34vw);margin:0;
  transform:translate3d(calc((1 - var(--in))*-34px*var(--dir)),-50%,0);opacity:calc(clamp(0,(var(--in) - .45)*3,1)*clamp(0,1 - var(--out)*3.4,1))}
html.ln-live .lns-cap.d-solo{top:auto;bottom:7%;transform:translate3d(calc((1 - var(--in))*-34px*var(--dir)),0,0);width:min(560px,50vw)}
html.ln-live .lns1 .lns-cap{opacity:calc(clamp(0,(var(--in) - .8)*5,1)*clamp(0,1 - var(--out)*3.4,1))}

/* 0 · hero: the home hero in the stage. It first pans like a normal page (--hp), then its dashboard hands over to the
   journey's dashboard window (same spot, same tilt) while the copy, phone and photo fly off in depth. */
html.ln-live .lns0{--in:1}
html.ln-live .ln-heroin{position:absolute;left:0;right:0;top:0;transform:translate3d(0,calc(var(--hp,0)*-1px),0);will-change:transform}
html.ln-live .ln-heroin .demo-banner{position:relative;opacity:clamp(0,1 - var(--out)*2.4,1)}
html.ln-live .ln-hero{background:none;padding-bottom:40px;overflow:visible}
html.ln-live .ln-hero::before{display:none}
html.ln-live .ln-hero .hero-grid>:first-child{transform-origin:0 50%;transform:perspective(1400px) translate3d(calc(var(--out)*-110px*var(--dir)),0,calc(var(--out)*-260px)) rotateY(calc(var(--out)*30deg*var(--dir)));opacity:clamp(0,1 - var(--out)*1.7,1)}
html.ln-live .ln-hero .hero-col .chips{transform-origin:0 50%;transform:perspective(1400px) translate3d(calc(var(--out)*-110px*var(--dir)),calc(var(--out)*40px),calc(var(--out)*-200px)) rotateY(calc(var(--out)*30deg*var(--dir)));opacity:clamp(0,1 - var(--out)*1.9,1)}
html.ln-live .ln-hero .hv{perspective:1400px;transform-style:preserve-3d}
html.ln-live .ln-hero .hv-dash{transform-origin:50% 50%;transform:rotateY(calc((var(--t) - .1)*-18deg*var(--dir))) rotateX(calc((var(--t) - .1)*4deg));opacity:clamp(0,1 - (var(--out) - .08)*5,1);will-change:transform}
html.ln-live .ln-hero .hv-stage{transform-origin:20% 60%;transform:translate3d(calc(var(--out)*-30vw*var(--dir)),calc(var(--out)*14vh),calc(var(--out)*-420px)) rotateY(calc(var(--out)*-52deg*var(--dir) + (var(--t) - .1)*-8deg)) rotateX(calc(var(--out)*10deg)) rotateZ(calc(var(--out)*-8deg));opacity:clamp(0,1 - var(--out)*1.35,1);will-change:transform,opacity}
html.ln-live .ln-hero .hv-glow{opacity:clamp(0,1 - var(--out)*2,1)}
html.ln-live .lns0 a,html.ln-live .lns0 button{pointer-events:auto}
html.ln-live .lns0.lns-off .hv-dash{visibility:hidden}

/* the shared element: first dashboard window starts where the hero dashboard is (--ox/--oy/--s0 are measured by lane.js) */
html.ln-live .lns1 .d-dv[data-ln-shared]{--rz0:0deg;--rz1:-3deg;--spin:10deg;opacity:calc(clamp(0,(var(--in) - .08)*5,1)*(1 - var(--out)*1.15))}

/* a floor plane in the stage: gives every scene the same ground to float over */
html.ln-live .ln-bgl .d-gr{position:absolute;left:-30%;right:-30%;bottom:0;height:75%;transform:perspective(620px) rotateX(64deg);transform-origin:50% 100%;overflow:hidden;
  -webkit-mask-image:linear-gradient(to top,#000 10%,transparent 92%);mask-image:linear-gradient(to top,#000 10%,transparent 92%);opacity:.38}
html.ln-live .ln-bgl .d-gr b{position:absolute;left:0;right:0;top:-80px;bottom:0;display:block;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.55) 0 2px,transparent 2px 80px),repeating-linear-gradient(90deg,rgba(255,255,255,.4) 0 2px,transparent 2px 120px);
  transform:translate3d(0,calc(mod(var(--p,0)*5200px,80px)),0)}

/* 3 · the real session: sharp, full-bleed, nothing scaled up */
html.ln-live .d-ses{position:absolute;inset:0;border-radius:0;box-shadow:none;aspect-ratio:auto;opacity:calc(clamp(0,var(--in)*1.5,1)*(1 - var(--out)));background:#07102f}
html.ln-live .d-ses img{inset:0;left:-20px;width:calc(100% + 40px);transform:translate3d(calc((var(--t) - .5)*-18px),0,0);will-change:transform}
html.ln-live .d-ses .d-sbar{transform-origin:0 50%;transform:scaleX(clamp(0,(var(--t) - .1)*1.6,1))}
html[dir=rtl].ln-live .d-ses .d-sbar{transform-origin:100% 50%}

/* 11 · close */
html.ln-live .lns11{opacity:clamp(0,var(--in)*2,1)}
html.ln-live .ln-end{position:absolute;inset:0;margin:0;padding:0 22px;border-radius:0;background:none;display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:none;overflow:visible;transform:translate3d(0,calc((1 - var(--in))*28px),0)}
html.ln-live .ln-end>*{pointer-events:auto}
html.ln-live .ln-end h2{font-size:clamp(34px,4.6vw,66px);text-shadow:none;background:var(--pn);border:1px solid var(--pnl);border-radius:20px;padding:.12em .5em .16em}
html.ln-live .ln-ul{transform:scaleX(clamp(0,(var(--in) - .3)*1.8,1))}
html.ln-live .ln-end .hero-cta{margin-top:18px}
html.ln-live .ln-end .btn-ghost{background:var(--pn)}
html.ln-live .ln-kick{margin-top:16px}
html.ln-live .ln-end .trust{margin-top:12px;background:var(--pn);border-radius:999px;padding:7px 18px}
html.ln-live .ln-all{max-width:1080px;margin-top:20px}
html.ln-live .ln-all>p{display:inline-block;background:var(--pn);border-radius:999px;padding:5px 14px;margin-bottom:10px}
html.ln-live .ln-all ul{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
html.ln-live .ln-all li{position:relative;border-radius:999px}
html.ln-live .ln-all a{padding:8px 14px;font-size:14.5px;font-weight:700}
html.ln-live .ln-all small{display:none;position:absolute;left:50%;bottom:calc(100% + 8px);width:max-content;max-width:270px;transform:translateX(calc(-50% + var(--nx,0px)));background:#fff;color:var(--ink);padding:9px 13px;border-radius:12px;font-size:13.5px;font-weight:600;text-align:center;z-index:5;box-shadow:0 14px 30px -10px rgba(0,0,0,.6)}
html.ln-live .ln-all li:hover small,html.ln-live .ln-all li:focus-within small{display:block;color:var(--ink)}
}
@media(prefers-reduced-motion:reduce){
  html.ln-js:not(.ln-anim) .lns,html.ln-js:not(.ln-anim) .ln-end{transition:none}
}
html.ln-measure .ln-heroin,html.ln-measure .ln-hero .hv-dash,html.ln-measure .ln-hero .hv-stage{transform:none!important}

/* fanned panels behind the dashboard: they spread apart in depth as the scene dwells */
html.ln-live .d-ghost{pointer-events:none;display:block}
.d-ghost .d-win-body{padding:.8em 1em 1em}
.d-ghost .d-rows li{min-height:2.6em}
.d-ghost .d-rows li i{display:block;flex:1;height:.7em;border-radius:99px;background:#dfe6f8}
.d-ghost .d-rows li i+i{flex:none;width:3.4em;background:#fde9a6}
@media(min-width:900px){
  html.ln-live .d-ghost{--w:30;--z0:-60;opacity:calc(clamp(0,(var(--in) - .55)*3,1)*(1 - var(--out)*1.15))}
  html.ln-live .d-ghost.d-g-a{--dx:-17;--dy:-9;--z:-26;--zt:-34;--xt:-14;--ry:-20deg;--spin:-26deg;--rx:4deg;--x0:-6;--y0:8;--ry0:-40deg}
  html.ln-live .d-ghost.d-g-b{--dx:18;--dy:12;--z:-18;--zt:-26;--xt:12;--ry:-26deg;--spin:-20deg;--rx:-3deg;--x0:6;--y0:-8;--ry0:-44deg}
}
.d-ghost{display:none}
.lns.lns0{padding:0}
.ln-end .ln-kick{display:block;width:fit-content;max-width:100%;margin:30px auto 0;text-align:center}

/* owner 13 Oct: no per-window 'Sample data' tags; one footnote instead */
.d-sd,.hv-sample,.wrap .hv-sample{display:none!important}
.ln-note{margin:1.2em 0 0;font-size:.8rem;opacity:.7}