/* ─── Launch simulator · homepage hero ────────────────────────────────────
   A scripted, real-UI walkthrough: choose a plan → create a course →
   connect a domain → start selling. Studio + learn UI mirror the live demo.
   Everything is prefixed .lx-* so nothing leaks into the rest of the page.
   ──────────────────────────────────────────────────────────────────────── */
.lx{position:relative; margin-top:52px;}
.lx *,.lx *::before,.lx *::after{box-sizing:border-box;}

/* Chapters */
.lx-chapters{display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:14px;}
.lx-ch{appearance:none; font:inherit; text-align:left; color:inherit; cursor:pointer; position:relative; padding:13px 16px 15px; border-radius:14px; background:rgba(255,255,255,.5); border:1px solid var(--line-2); transition:background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease), transform .3s var(--ease); overflow:hidden;}
.lx-ch:hover{background:#fff; transform:translateY(-1px);}
.lx-ch:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(197,139,67,.35);}
.lx-ch .k{display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:10px; letter-spacing:.16em; color:var(--ink-3); font-weight:700; text-transform:uppercase;}
.lx-ch .k i{width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-style:normal; background:var(--surface-3); color:var(--ink-3); font-size:9.5px; letter-spacing:0; transition:background .3s, color .3s;}
.lx-ch .t{display:block; font-weight:700; font-size:16px; color:var(--ink-2); margin-top:8px; letter-spacing:-.01em;}
.lx-ch .s{display:block; font-size:12.5px; color:var(--ink-3); margin-top:3px; line-height:1.4;}
.lx-ch .bar{position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--line);}
.lx-ch .bar i{display:block; height:100%; width:0; background:var(--accent-grad);}
.lx-ch.on{background:#fff; border-color:var(--accent-line); box-shadow:var(--sh-2);}
.lx-ch.on .t{color:var(--ink-1);}
.lx-ch.on .k{color:var(--accent-deep);}
.lx-ch.on .k i{background:var(--accent-grad); color:#2A1B07;}
.lx-ch.done .k i{background:var(--positive-soft); color:var(--positive);}

/* Viewport + stage (JS scales the fixed-size stage to fit) */
.lx-viewport{position:relative; width:100%; height:640px;}
.lx-stage{position:absolute; left:0; top:0; width:1000px; height:640px; transform-origin:0 0; font-family:var(--ui); color:var(--ink-1); font-size:13px; line-height:1.45; letter-spacing:-.005em; -webkit-user-select:none; user-select:none;}
.lx-win{position:absolute; inset:0; border-radius:16px; background:var(--bg); border:1px solid var(--line-2); box-shadow:0 60px 120px -40px rgba(38,28,14,.38), 0 18px 40px -18px rgba(38,28,14,.22), inset 0 1px 0 rgba(255,255,255,.6); overflow:hidden; display:flex; flex-direction:column;}
.lx-bar{height:40px; flex:none; display:flex; align-items:center; gap:7px; padding:0 14px; background:#EFEAE1; border-bottom:1px solid var(--line-2);}
.lx-bar .d{width:11px; height:11px; border-radius:50%; background:#DDD4C6; flex:none;}
.lx-bar .d:nth-child(1){background:#E3A294;} .lx-bar .d:nth-child(2){background:#E6C88F;} .lx-bar .d:nth-child(3){background:#A9C99A;}
.lx-url{margin:0 auto; display:flex; align-items:center; gap:7px; height:26px; padding:0 16px; min-width:340px; justify-content:center; border-radius:8px; background:#fff; border:1px solid var(--line); font-family:var(--mono); font-size:11.5px; color:var(--ink-2); white-space:nowrap; overflow:hidden;}
.lx-url svg{width:12px; height:12px; color:var(--positive); flex:none;}
.lx-url.chg{animation:lxUrl .6s var(--ease);}
@keyframes lxUrl{0%{background:var(--accent-soft); box-shadow:0 0 0 3px rgba(197,139,67,.2);}100%{background:#fff; box-shadow:none;}}
.lx-sample{font-family:var(--mono); font-size:9px; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-3); white-space:nowrap;}
.lx-body{position:relative; flex:1; display:flex; min-height:0;}

/* Studio shell */
.lx-side{width:214px; flex:none; background:#15110D; background-image:radial-gradient(260px 200px at 0 0, rgba(197,139,67,.12), transparent 70%); color:rgba(250,248,244,.7); padding:16px 12px 14px; display:flex; flex-direction:column; gap:1px;}
.lx-brand{display:flex; align-items:center; gap:9px; padding:2px 6px 12px;}
.lx-brand img{width:26px; height:26px; border-radius:7px;}
.lx-brand b{font-family:var(--display); font-style:italic; font-weight:400; font-size:19px; color:#FAF8F4; letter-spacing:-.3px;}
.lx-brand sup{font-family:var(--mono); font-size:7px; letter-spacing:.2em; color:#E0A95C; margin-left:2px;}
.lx-sec{font-family:var(--mono); font-size:8.5px; letter-spacing:.24em; color:rgba(250,248,244,.36); padding:12px 10px 5px; text-transform:uppercase;}
.lx-nav{display:flex; align-items:center; gap:10px; padding:7px 10px; border-radius:9px; font-size:12.5px; font-weight:500; transition:background .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease);}
.lx-nav svg{width:15px; height:15px; flex:none;}
.lx-nav em{margin-left:auto; font-style:normal; font-family:var(--mono); font-size:9px; padding:1px 6px; border-radius:5px; background:rgba(255,255,255,.08); color:rgba(250,248,244,.7);}
.lx-nav.on{background:linear-gradient(90deg, rgba(197,139,67,.3), rgba(197,139,67,.12)); color:#FAF8F4; box-shadow:inset 0 0 0 1px rgba(224,169,92,.3);}
.lx-plan{margin-top:auto; padding:11px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.09); background:rgba(255,255,255,.035); transition:border-color .5s, background .5s;}
.lx-plan .k{font-family:var(--mono); font-size:8.5px; letter-spacing:.2em; color:#E0A95C; text-transform:uppercase;}
.lx-plan .v{font-size:11.5px; color:rgba(250,248,244,.86); margin-top:3px; line-height:1.4;}
.lx-plan .b{height:3px; border-radius:3px; background:rgba(255,255,255,.08); margin-top:8px; overflow:hidden;}
.lx-plan .b i{display:block; height:100%; width:0; background:linear-gradient(90deg,#E0A95C,#C58B43); transition:width 1s var(--ease);}
.lx-plan.on{border-color:rgba(224,169,92,.35); background:rgba(197,139,67,.08);}
.lx-plan.on .b i{width:100%;}
.lx-me{display:flex; gap:9px; align-items:center; padding:11px 4px 0; margin-top:10px; border-top:1px solid rgba(255,255,255,.08);}
.lx-me div b{display:block; color:#FAF8F4; font-size:12px; font-weight:600;}
.lx-me div span{display:block; font-family:var(--mono); font-size:8px; letter-spacing:.14em; color:rgba(250,248,244,.42);}
.lx-av{width:30px; height:30px; border-radius:50%; background:var(--accent-grad); color:#2A1B07; display:grid; place-items:center; font-weight:700; font-size:10.5px; flex:none; box-shadow:inset 0 0 0 2px rgba(255,255,255,.25);}
.lx-main{flex:1; min-width:0; display:flex; flex-direction:column; background:var(--bg); background-image:radial-gradient(640px 340px at 100% 0, rgba(197,139,67,.08), transparent 60%);}
.lx-top{height:56px; flex:none; display:flex; align-items:center; gap:9px; padding:0 22px; border-bottom:1px solid var(--line);}
.lx-tbrand{display:none; align-items:center; gap:8px;}
.lx-tbrand img{width:24px; height:24px; border-radius:7px;}
.lx-tbrand b{font-family:var(--display); font-style:italic; font-weight:400; font-size:18px;}
.lx-search{flex:1; max-width:360px; height:34px; display:flex; align-items:center; gap:8px; padding:0 12px; border-radius:10px; background:#fff; border:1px solid var(--line-2); color:var(--ink-3); font-size:12px; white-space:nowrap; overflow:hidden;}
.lx-search svg{width:14px; height:14px; flex:none;}
.lx-kbd{margin-left:auto; font-family:var(--mono); font-size:9.5px; padding:2px 6px; border-radius:5px; border:1px solid var(--line-2); color:var(--ink-3);}
.lx-grow{flex:1;}
.lx-ib{width:34px; height:34px; border-radius:10px; border:1px solid var(--line-2); background:#fff; display:grid; place-items:center; position:relative; flex:none;}
.lx-ib svg{width:15px; height:15px;}
.lx-ib.dot::after{content:''; position:absolute; top:7px; right:8px; width:6px; height:6px; border-radius:50%; background:var(--accent); box-shadow:0 0 0 2px #fff;}
.lx-golive{height:34px; padding:0 13px; border-radius:10px; background:#15110D; color:#FAF8F4; font-weight:700; font-size:12px; display:flex; align-items:center; gap:7px; flex:none;}
.lx-golive svg{width:14px; height:14px; color:#E0A95C;}
.lx-view{flex:1; min-height:0; padding:22px 26px; position:relative; overflow:hidden;}
.lx-view.in > *:not(.lx-scrim):not(.lx-drawer){animation:lxIn .6s var(--ease) both;}
.lx-view.in > *:nth-child(2){animation-delay:.05s;} .lx-view.in > *:nth-child(3){animation-delay:.1s;} .lx-view.in > *:nth-child(4){animation-delay:.15s;}
@keyframes lxIn{from{opacity:0; transform:translateY(12px);}to{opacity:1; transform:none;}}

/* Shared in-app primitives */
.lx svg.i{fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round;}
.lx-eb{display:flex; align-items:center; gap:8px; font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-3); font-weight:700;}
.lx-eb::before{content:''; width:14px; height:1px; background:var(--accent);}
.lx-h{font-family:var(--display); font-style:italic; font-weight:400; font-size:34px; line-height:1.04; letter-spacing:-.7px; margin:7px 0 4px;}
.lx-h4{font-family:var(--display); font-style:italic; font-weight:400; font-size:25px; line-height:1.1; letter-spacing:-.4px; margin:6px 0 12px;}
.lx-p{color:var(--ink-3); font-size:12.5px; margin:0;}
.lx-head{display:flex; align-items:flex-end; justify-content:space-between; gap:16px;}
.lx-card{background:#fff; border:1px solid var(--line-2); border-radius:16px; padding:16px 18px; box-shadow:var(--sh-1);}
.lx-lbl{display:block; font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); font-weight:700; margin-bottom:6px;}
.lx .mt{margin-top:14px;}
.lx-in{height:36px; border:1px solid var(--line-2); border-radius:10px; display:flex; align-items:center; gap:6px; padding:0 12px; font-size:13px; font-weight:500; background:var(--bg); transition:border-color .3s, box-shadow .3s, background .3s; white-space:nowrap; overflow:hidden;}
.lx-in.focus{border-color:var(--accent); box-shadow:0 0 0 3px rgba(197,139,67,.16); background:#fff;}
.lx-in .pre,.lx-in .cur{color:var(--ink-3); font-family:var(--mono); font-size:12px;}
.lx .ph{color:var(--ink-4); font-weight:400;}
.lx .caret::after{content:''; display:inline-block; width:1.5px; height:15px; margin-left:1px; background:var(--accent-deep); vertical-align:-3px; animation:lxBlink 1s steps(1) infinite;}
@keyframes lxBlink{50%{opacity:0;}}
.lx-btn{height:36px; padding:0 14px; border-radius:10px; display:flex; align-items:center; justify-content:center; gap:7px; font-weight:700; font-size:12.5px; border:1px solid var(--line-2); background:#fff; color:var(--ink-1); transition:transform .15s var(--ease), background .3s, box-shadow .3s, border-color .3s; white-space:nowrap;}
.lx-btn svg{width:14px; height:14px;}
.lx-btn.dark{background:#15110D; color:#FAF8F4; border-color:#15110D;}
.lx-btn.acc{background:var(--accent-grad); color:#2A1B07; border:0; box-shadow:0 8px 18px -6px rgba(197,139,67,.6), inset 0 1px 0 rgba(255,255,255,.3);}
.lx-btn.ok{background:var(--positive); color:#fff; border-color:var(--positive); box-shadow:none;}
.lx-btn.hov{box-shadow:0 0 0 3px rgba(197,139,67,.18);}
.lx .press{transform:scale(.95) !important;}
.lx-spin{width:13px; height:13px; border-radius:50%; border:2px solid currentColor; border-right-color:transparent; opacity:.8; animation:lxSpin .7s linear infinite; flex:none;}
@keyframes lxSpin{to{transform:rotate(360deg);}}
.lx-pm{display:grid; grid-template-columns:repeat(3,1fr); gap:8px;}
.lx-pm span{border:1px solid var(--line-2); border-radius:10px; padding:9px 6px; text-align:center; font-size:11.5px; font-weight:600; color:var(--ink-2); background:#fff;}
.lx-pm span.on{border-color:var(--accent); background:var(--accent-soft); color:var(--accent-deep);}
.lx-row{display:flex; justify-content:space-between; gap:12px; font-size:12px; padding:9px 0; border-bottom:1px dashed var(--line-2); color:var(--ink-2);}
.lx-row b{font-family:var(--mono); font-weight:500; color:var(--ink-1); font-feature-settings:"tnum";}
.lx-row.tot{border-bottom:0; font-weight:700; color:var(--ink-1); padding-top:12px;}
.lx-row.tot b{font-weight:700; font-size:13px;}
.lx-fine{font-size:10.5px; color:var(--ink-3); margin:10px 0 0; text-align:center;}
.lx-scrim{position:absolute; inset:0; background:rgba(21,17,13,.22); opacity:0; transition:opacity .45s var(--ease); z-index:4; pointer-events:none;}
.lx-scrim.on{opacity:1;}
.lx-okw{display:flex; flex-direction:column; align-items:center; text-align:center; animation:lxIn .5s var(--ease) both;}
.lx-okc{width:62px; height:62px; border-radius:50%; background:var(--positive-soft); color:var(--positive); display:grid; place-items:center; margin:6px auto 4px; animation:lxPop .6s cubic-bezier(.34,1.56,.64,1) both;}
.lx-okc svg{width:28px; height:28px; stroke-width:2.4;}
.lx-okc path{stroke-dasharray:30; stroke-dashoffset:30; animation:lxDraw .5s .25s var(--ease) forwards;}
@keyframes lxPop{from{transform:scale(.4); opacity:0;}to{transform:none; opacity:1;}}
@keyframes lxDraw{to{stroke-dashoffset:0;}}
.lx-okw .lx-row{width:100%;}

/* Scene 1 · plans */
.lx-plans{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:18px;}
.lx-pl{background:#fff; border:1px solid var(--line-2); border-radius:16px; padding:18px; box-shadow:var(--sh-1); transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s var(--ease); position:relative;}
.lx-pl .n{display:flex; align-items:center; justify-content:space-between; font-weight:700; font-size:14px;}
.lx-pl .n span{font-family:var(--mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-deep); background:var(--accent-soft); padding:3px 7px; border-radius:5px; font-weight:700;}
.lx-pl .pr{font-family:var(--display); font-style:italic; font-size:34px; line-height:1; margin:12px 0 0; letter-spacing:-.5px;}
.lx-pl .pr small{font-family:var(--ui); font-style:normal; font-size:11.5px; color:var(--ink-3); letter-spacing:0;}
.lx-pl .fee{display:inline-block; font-family:var(--mono); font-size:10px; color:var(--accent-deep); background:var(--accent-soft); padding:3px 8px; border-radius:6px; margin-top:10px;}
.lx-pl ul{list-style:none; padding:0; margin:14px 0 16px; display:grid; gap:7px; font-size:11.5px; color:var(--ink-2);}
.lx-pl li{display:flex; gap:7px; align-items:center;}
.lx-pl li svg{width:13px; height:13px; color:var(--positive); stroke-width:2.4; flex:none;}
.lx-pl.hov{transform:translateY(-3px); box-shadow:var(--sh-2);}
.lx-pl.sel{border-color:var(--accent); box-shadow:0 0 0 3px rgba(197,139,67,.2), var(--sh-3); transform:translateY(-5px);}
.lx-drawer{position:absolute; top:0; right:0; bottom:0; width:340px; background:#fff; border-left:1px solid var(--line-2); box-shadow:none; transform:translateX(106%); transition:transform .65s var(--ease), box-shadow .65s var(--ease); padding:22px; display:flex; flex-direction:column; z-index:5;}
.lx-drawer.on{transform:none; box-shadow:-30px 0 60px -30px rgba(38,28,14,.35);}
.lx-dw{display:flex; flex-direction:column; height:100%;}
.lx-dw .lx-pay{margin-top:auto;}

/* Scene 2 · course */
.lx-status{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; padding:5px 10px; border-radius:999px; background:var(--surface-3); color:var(--ink-3); font-weight:700; transition:background .4s, color .4s;}
.lx-status::before{content:''; width:6px; height:6px; border-radius:50%; background:currentColor;}
.lx-status.ok{background:var(--positive-soft); color:var(--positive);}
.lx-cgrid{display:grid; grid-template-columns:1.4fr 1fr; gap:16px; margin-top:14px;}
.lx-form{padding:14px 18px 16px;}
.lx-chips{display:flex; gap:6px; flex-wrap:wrap;}
.lx-chip{padding:5px 11px; border-radius:999px; border:1px solid var(--line-2); font-size:11.5px; font-weight:600; background:#fff; color:var(--ink-2); transition:background .3s, color .3s, border-color .3s;}
.lx-chip.on{background:#15110D; color:#FAF8F4; border-color:#15110D;}
.lx-drop{border:1.5px dashed var(--accent-line); border-radius:12px; padding:8px 10px; background:rgba(245,232,210,.22); min-height:46px; transition:background .3s, border-color .3s;}
.lx-drop.hov{background:rgba(245,232,210,.55); border-color:var(--accent);}
.lx-dropz{display:flex; align-items:center; justify-content:center; gap:8px; height:28px; font-size:12px; color:var(--ink-3);}
.lx-dropz svg{width:15px; height:15px; color:var(--accent-deep);}
.lx-dropz u{color:var(--accent-deep); text-decoration:none; font-weight:600;}
.lx-file{display:grid; grid-template-columns:26px 1fr auto; gap:10px; align-items:center; padding:5px 2px; animation:lxIn .45s var(--ease) both;}
.lx-file .ic{width:26px; height:26px; border-radius:7px; background:var(--accent-soft); color:var(--accent-deep); display:grid; place-items:center;}
.lx-file .ic svg{width:13px; height:13px;}
.lx-file .nm{font-size:11.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.lx-file .pb{height:3px; border-radius:3px; background:var(--surface-3); margin-top:4px; overflow:hidden;}
.lx-file .pb i{display:block; height:100%; width:0; background:var(--accent-grad); transition:width 1.1s cubic-bezier(.4,.1,.3,1);}
.lx-file .st{font-family:var(--mono); font-size:9.5px; color:var(--ink-3); white-space:nowrap;}
.lx-file .st.ok{color:var(--positive);}
.lx-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
.lx-tg{display:flex; align-items:center; justify-content:space-between; gap:10px; font-size:12px; font-weight:600; color:var(--ink-2); padding:10px 12px; border-radius:10px; background:var(--bg); border:1px solid var(--line);}
.lx-sw{width:34px; height:20px; border-radius:999px; background:var(--surface-3); position:relative; transition:background .35s var(--ease); flex:none; box-shadow:inset 0 0 0 1px var(--line-2);}
.lx-sw::after{content:''; position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); transition:left .35s var(--ease);}
.lx-sw.on{background:var(--positive); box-shadow:none;}
.lx-sw.on::after{left:16px;}
.lx-pvcard{display:flex; flex-direction:column;}
.lx-pv{border:1px solid var(--line-2); border-radius:14px; overflow:hidden; background:#fff; margin-bottom:12px; box-shadow:var(--sh-2);}
.lx-pv .th{position:relative; height:132px; padding:14px; background:radial-gradient(220px 140px at 85% 10%, rgba(224,169,92,.45), transparent 70%), linear-gradient(135deg,#2A2017,#15110D); display:flex; flex-direction:column; justify-content:flex-end; overflow:hidden;}
.lx-pv .th::before{content:''; position:absolute; right:-20px; top:-20px; width:120px; height:120px; border-radius:50%; border:1px solid rgba(245,216,174,.18); box-shadow:0 0 0 18px rgba(245,216,174,.04), 0 0 0 36px rgba(245,216,174,.03);}
.lx-pv .tg{position:absolute; top:12px; left:12px; font-family:var(--mono); font-size:8.5px; letter-spacing:.14em; text-transform:uppercase; color:#F5D8AE; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); padding:3px 7px; border-radius:5px;}
.lx-pv .tt{position:relative; font-family:var(--display); font-style:italic; font-size:21px; line-height:1.08; color:#F5D8AE; min-height:23px;}
.lx-pv .bd{padding:12px 14px 14px;}
.lx-pv .bd b{display:block; font-size:13px; font-weight:700; min-height:19px;}
.lx-pv .bd > span{display:block; font-size:11px; color:var(--ink-3); margin-top:2px;}
.lx-pv .prr{display:flex; justify-content:space-between; align-items:center; margin-top:10px; padding-top:10px; border-top:1px solid var(--line);}
.lx-pv .prr span{font-family:var(--mono); font-size:10px; color:var(--ink-3);}
.lx-pv .prr b{font-family:var(--display); font-style:italic; font-weight:400; font-size:22px; line-height:1; color:var(--accent-deep); min-height:0;}
.lx-pvcard .lx-btn{margin-top:auto;}

/* Scene 3 · domain */
.lx-dgrid{display:grid; grid-template-columns:1.05fr 1fr; gap:16px; margin-top:16px;}
.lx-dom{display:flex; gap:8px;}
.lx-dom .lx-in{flex:1;}
.lx-cks{display:grid; gap:4px; margin-top:16px;}
.lx-ck{display:flex; gap:12px; align-items:center; padding:10px 12px; border-radius:12px; border:1px solid transparent; transition:background .4s, border-color .4s, opacity .4s; opacity:.55;}
.lx-ck .o{width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line-strong); display:grid; place-items:center; flex:none; color:var(--accent-deep); transition:background .3s, border-color .3s;}
.lx-ck .o svg{width:12px; height:12px; stroke-width:2.8; color:#fff;}
.lx-ck b{display:block; font-size:12.5px; font-weight:700;}
.lx-ck span{display:block; font-size:11px; color:var(--ink-3); font-family:var(--mono);}
.lx-ck.run{opacity:1; background:var(--bg); border-color:var(--line);}
.lx-ck.run .o{border-color:transparent;}
.lx-ck.ok{opacity:1;}
.lx-ck.ok .o{background:var(--positive); border-color:var(--positive); animation:lxPop .45s cubic-bezier(.34,1.56,.64,1);}
.lx-mini{padding:0; overflow:hidden; display:flex; flex-direction:column;}
.lx-mbar{display:flex; align-items:center; gap:5px; height:30px; padding:0 10px; background:var(--surface-2); border-bottom:1px solid var(--line);}
.lx-mbar i{width:7px; height:7px; border-radius:50%; background:var(--line-strong);}
.lx-murl{margin:0 auto; display:flex; align-items:center; gap:5px; font-family:var(--mono); font-size:10px; color:var(--ink-2); background:#fff; border:1px solid var(--line); border-radius:6px; padding:3px 12px; transition:background .4s;}
.lx-murl svg{width:10px; height:10px; color:var(--ink-4); transition:color .4s;}
.lx-murl.ok{animation:lxUrl .7s var(--ease);}
.lx-murl.ok svg{color:var(--positive);}
.lx-msite{flex:1; padding:14px; background:#FBFAF7;}
.lx-mhd{display:flex; align-items:center; gap:8px; font-size:12px; font-weight:700;}
.lx-mhd .m{width:22px; height:22px; border-radius:6px; background:#15110D; color:#F5D8AE; display:grid; place-items:center; font-family:var(--display); font-style:italic; font-size:14px; font-weight:400;}
.lx-mhd nav{margin-left:auto; display:flex; gap:10px; font-size:10px; font-weight:500; color:var(--ink-3);}
.lx-mhero{margin-top:14px; font-family:var(--display); font-style:italic; font-size:26px; line-height:1.02; letter-spacing:-.4px;}
.lx-mhero em{color:var(--accent-deep);}
.lx-msub{font-size:11px; color:var(--ink-3); margin-top:6px;}
.lx-mcard{margin-top:14px; display:grid; grid-template-columns:64px 1fr auto; gap:10px; align-items:center; padding:8px; border-radius:12px; background:#fff; border:1px solid var(--line-2);}
.lx-mcard .t{height:44px; border-radius:8px; background:radial-gradient(60px 40px at 80% 0, rgba(224,169,92,.5), transparent 70%), linear-gradient(135deg,#2A2017,#15110D);}
.lx-mcard b{display:block; font-size:11px;}
.lx-mcard span{font-size:9.5px; color:var(--ink-3);}
.lx-mcard .p{font-family:var(--display); font-style:italic; font-size:17px; color:var(--accent-deep);}

/* Scene 4a · student learn site (educator's own domain) */
.lx-learn{position:absolute; inset:0; background:#FBFAF7; display:flex; transform:translateX(102%); transition:transform .85s var(--ease), box-shadow .85s var(--ease); z-index:8; box-shadow:none;}
.lx-learn.on{transform:none; box-shadow:-40px 0 80px -30px rgba(38,28,14,.4);}
.lx-lside{width:196px; flex:none; border-right:1px solid var(--line); padding:14px 10px; background:#fff; display:flex; flex-direction:column; gap:1px;}
.lx-lbrand{display:flex; gap:9px; align-items:center; padding:4px 8px 14px;}
.lx-lmono{width:28px; height:28px; border-radius:8px; background:#15110D; color:#F5D8AE; display:grid; place-items:center; font-family:var(--display); font-style:italic; font-size:17px; flex:none;}
.lx-lbrand b{font-size:14px; font-weight:700; letter-spacing:-.01em;}
.lx-lnav{display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:9px; font-size:12.5px; color:var(--ink-2);}
.lx-lnav svg{width:15px; height:15px; flex:none;}
.lx-lnav.on{background:var(--accent-soft); color:var(--accent-deep); font-weight:600;}
.lx-lhr{height:1px; background:var(--line); margin:8px 6px;}
.lx-lmentor{margin-top:auto; display:flex; gap:9px; align-items:center; padding:10px; border-radius:12px; border:1px solid var(--line-2);}
.lx-lmentor div b{display:block; font-size:12px;}
.lx-lmentor div span{display:block; font-size:10px; color:var(--ink-3);}
.lx-lmain{flex:1; min-width:0; display:flex; flex-direction:column;}
.lx-ltop{height:56px; flex:none; display:flex; align-items:center; gap:10px; padding:0 22px; border-bottom:1px solid var(--line); background:rgba(255,255,255,.6);}
.lx-lchip{display:flex; align-items:center; gap:6px; height:30px; padding:0 12px; border-radius:999px; border:1px solid var(--line-2); font-size:11.5px; font-weight:600; background:#fff;}
.lx-lchip svg{width:13px; height:13px; color:var(--accent-deep);}
.lx-lbody{padding:18px 22px; flex:1; min-height:0;}
.lx-tabs{display:flex; gap:7px; margin-bottom:14px;}
.lx-tabs span{padding:6px 13px; border-radius:999px; border:1px solid var(--line-2); font-size:11.5px; font-weight:600; background:#fff;}
.lx-tabs span.on{background:#15110D; color:#FAF8F4; border-color:#15110D;}
.lx-lhero{border-radius:18px; background:radial-gradient(360px 220px at 88% 0%, rgba(224,169,92,.28), transparent 70%), linear-gradient(135deg,#221A12,#15110D 60%); color:#FAF8F4; padding:22px 24px; display:grid; grid-template-columns:1fr 250px; gap:22px; align-items:center; position:relative; overflow:hidden;}
.lx-leb{font-family:var(--mono); font-size:9.5px; letter-spacing:.18em; text-transform:uppercase; color:#E0A95C; display:flex; align-items:center; gap:7px;}
.lx-leb::before{content:''; width:6px; height:6px; border-radius:50%; background:#E0A95C; box-shadow:0 0 0 3px rgba(224,169,92,.2);}
.lx-lhero h4{font-family:var(--display); font-style:italic; font-weight:400; font-size:31px; line-height:1.04; letter-spacing:-.5px; color:#F5D8AE; margin:10px 0 14px;}
.lx-lby{display:flex; align-items:center; gap:9px;}
.lx-lby div b{display:block; font-size:12.5px;}
.lx-lby div span{display:block; font-size:10.5px; color:rgba(250,248,244,.6);}
.lx-lmeta{display:flex; gap:6px; margin-top:14px; flex-wrap:wrap;}
.lx-lmeta span{font-family:var(--mono); font-size:9.5px; padding:4px 8px; border-radius:6px; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); color:rgba(250,248,244,.8);}
.lx-buy{background:#fff; color:var(--ink-1); border-radius:14px; padding:16px; box-shadow:0 20px 40px -20px rgba(0,0,0,.5);}
.lx-buy .pr{font-family:var(--display); font-style:italic; font-size:34px; line-height:1;}
.lx-buy .s{display:block; font-size:11px; color:var(--ink-3); margin:4px 0 12px;}
.lx-buy .s2{display:flex; align-items:center; justify-content:center; gap:5px; font-size:10px; color:var(--ink-3); margin-top:9px;}
.lx-buy .s2 svg{width:11px; height:11px;}
.lx-lsec{margin-top:16px;}
.lx-less{display:grid; grid-template-columns:30px 1fr auto; gap:12px; align-items:center; padding:9px 12px; border-radius:12px; background:#fff; border:1px solid var(--line); margin-top:7px;}
.lx-less .pl{width:30px; height:30px; border-radius:9px; background:var(--accent-soft); color:var(--accent-deep); display:grid; place-items:center;}
.lx-less .pl svg{width:13px; height:13px;}
.lx-less b{font-size:12.5px; font-weight:600;}
.lx-less span{font-family:var(--mono); font-size:10px; color:var(--ink-3);}
.lx-modal{position:absolute; left:50%; top:50%; width:320px; transform:translate(-50%,-44%) scale(.96); opacity:0; transition:transform .5s var(--ease), opacity .4s var(--ease); background:#fff; border-radius:18px; box-shadow:0 40px 80px -24px rgba(21,17,13,.5); padding:20px; z-index:10; pointer-events:none;}
.lx-modal.on{transform:translate(-50%,-50%); opacity:1;}
.lx-mamt{font-family:var(--display); font-style:italic; font-size:40px; line-height:1; margin:8px 0 4px;}

/* Scene 4b · studio dashboard after the sale */
.lx-seg{display:flex; gap:2px; padding:3px; border-radius:10px; background:var(--surface-3);}
.lx-seg span{font-family:var(--mono); font-size:10.5px; padding:5px 10px; border-radius:7px; color:var(--ink-3);}
.lx-seg span.on{background:#fff; color:var(--ink-1); box-shadow:var(--sh-1); font-weight:700;}
.lx-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:16px;}
.lx-kpi{background:#fff; border:1px solid var(--line-2); border-radius:14px; padding:13px 15px; box-shadow:var(--sh-1); transition:box-shadow .4s, border-color .4s;}
.lx-kpi .k{font-family:var(--mono); font-size:9px; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-3); font-weight:700;}
.lx-kpi .v{font-family:var(--display); font-style:italic; font-size:30px; line-height:1; margin-top:10px; letter-spacing:-.5px; font-feature-settings:"tnum"; white-space:nowrap;}
.lx-kpi .d{display:inline-block; margin-top:8px; font-family:var(--mono); font-size:9.5px; padding:2px 7px; border-radius:5px; background:var(--surface-2); color:var(--ink-3);}
.lx-kpi.hl{border-color:var(--accent-line); box-shadow:0 0 0 3px rgba(197,139,67,.12), var(--sh-1);}
.lx-kpi.hl .d{background:var(--positive-soft); color:var(--positive);}
.lx-kpi.acc .v{color:var(--accent-deep);}
.lx-dg2{display:grid; grid-template-columns:1.25fr 1fr; gap:12px; margin-top:12px;}
.lx-dg2 .hd{display:flex; justify-content:space-between; align-items:center; margin-bottom:8px;}
.lx-dg2 .hd b{font-size:13px;}
.lx-dg2 .hd span{font-family:var(--mono); font-size:10px; color:var(--ink-3);}
.lx-chart svg{width:100%; height:180px; display:block; overflow:visible;}
.lx-chart .gl{stroke:var(--line); stroke-width:1;}
.lx-chart .ln{fill:none; stroke:var(--accent); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1s var(--ease);}
.lx-chart .ar{fill:url(#lxGrad); opacity:0; transition:opacity 1s var(--ease);}
.lx-livep{display:inline-flex; align-items:center; gap:5px; color:var(--positive) !important;}
.lx-livep::before{content:''; width:6px; height:6px; border-radius:50%; background:var(--positive); animation:lxPulse 1.6s infinite;}
@keyframes lxPulse{0%{box-shadow:0 0 0 0 rgba(47,143,78,.5);}100%{box-shadow:0 0 0 7px rgba(47,143,78,0);}}
.lx-ords{overflow:hidden;}
.lx-empty{font-size:11.5px; color:var(--ink-3); padding:24px 0; text-align:center;}
.lx-ord{display:grid; grid-template-columns:28px 1fr auto; gap:10px; align-items:center; padding:8px 0; border-bottom:1px solid var(--line); animation:lxOrd .55s var(--ease) both;}
.lx-ord:last-child{border-bottom:0;}
.lx-ord .lx-av{width:28px; height:28px; font-size:9.5px; background:var(--surface-3); color:var(--ink-2); box-shadow:none;}
.lx-ord div b{display:block; font-size:12px; font-weight:600;}
.lx-ord div span{display:block; font-size:10px; color:var(--ink-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.lx-ord .a{font-family:var(--mono); font-size:11.5px; color:var(--positive); font-weight:700;}
@keyframes lxOrd{from{opacity:0; transform:translateY(-10px); background:var(--accent-soft);}to{opacity:1; transform:none; background:transparent;}}

/* Cursor, ripple, toasts, end card */
.lx-cursor{position:absolute; left:0; top:0; width:24px; height:24px; z-index:40; pointer-events:none; opacity:0; transition-property:transform, opacity; transition-duration:.7s, .3s; transition-timing-function:cubic-bezier(.55,.05,.2,1), ease; will-change:transform; filter:drop-shadow(0 4px 6px rgba(21,17,13,.3));}
.lx-cursor.show{opacity:1;}
.lx-cursor svg{width:24px; height:24px; transition:transform .12s; transform-origin:4px 3px;}
.lx-cursor.dn svg{transform:scale(.82);}
.lx-rip{position:absolute; width:36px; height:36px; margin:-15px 0 0 -15px; border-radius:50%; border:2px solid var(--accent); background:rgba(197,139,67,.12); z-index:39; pointer-events:none; animation:lxRip .6s ease-out forwards;}
@keyframes lxRip{from{transform:scale(.3); opacity:1;}to{transform:scale(1.5); opacity:0;}}
.lx-toasts{position:absolute; right:18px; bottom:18px; z-index:30; display:flex; flex-direction:column; gap:8px; align-items:flex-end; pointer-events:none;}
.lx-toast{display:flex; gap:11px; align-items:center; padding:10px 16px 10px 10px; background:rgba(21,17,13,.94); color:#FAF8F4; border-radius:13px; box-shadow:0 20px 40px -12px rgba(21,17,13,.5), inset 0 1px 0 rgba(255,255,255,.06); font-size:12px; animation:lxToast .55s cubic-bezier(.34,1.4,.64,1) both; max-width:330px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);}
.lx-toast .ti{width:30px; height:30px; border-radius:9px; background:rgba(224,169,92,.16); color:#E0A95C; display:grid; place-items:center; flex:none;}
.lx-toast .ti svg{width:15px; height:15px;}
.lx-toast.g .ti{background:rgba(47,143,78,.22); color:#7BD097;}
.lx-toast b{display:block; font-weight:700; font-size:12.5px;}
.lx-toast span{display:block; color:rgba(250,248,244,.64); font-size:11px;}
.lx-toast.out{animation:lxToastOut .4s var(--ease) forwards;}
@keyframes lxToast{from{opacity:0; transform:translateY(14px) scale(.96);}to{opacity:1; transform:none;}}
@keyframes lxToastOut{to{opacity:0; transform:translateX(20px);}}
.lx-end{position:absolute; inset:0; z-index:50; display:grid; place-items:center; background:rgba(250,248,244,.74); -webkit-backdrop-filter:blur(7px) saturate(140%); backdrop-filter:blur(7px) saturate(140%); opacity:0; pointer-events:none; transition:opacity .6s var(--ease);}
.lx-end.on{opacity:1; pointer-events:auto;}
.lx-endc{text-align:center; max-width:560px; padding:0 24px; transform:translateY(12px); transition:transform .7s var(--ease);}
.lx-end.on .lx-endc{transform:none;}
.lx-endc .lx-eb{justify-content:center;}
.lx-endc .lx-eb::before{display:none;}
.lx-endc h3{font-family:var(--display); font-style:italic; font-weight:400; font-size:48px; line-height:1.02; letter-spacing:-.9px; margin:12px 0 10px;}
.lx-endc h3 em{color:var(--accent-deep);}
.lx-endc p{color:var(--ink-2); font-size:14.5px; margin:0 0 22px;}
.lx-endc .acts{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
.lx-endc .btn{font-size:14px;}

/* Controls under the stage */
.lx-foot{display:flex; align-items:center; gap:14px; margin-top:16px;}
.lx-play{appearance:none; border:0; cursor:pointer; width:40px; height:40px; border-radius:50%; background:#15110D; color:#FAF8F4; display:grid; place-items:center; flex:none; box-shadow:var(--sh-2); transition:transform .2s var(--ease);}
.lx-play:hover{transform:scale(1.06);}
.lx-play:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(197,139,67,.4);}
.lx-play svg{width:15px; height:15px;}
.lx-play .pa{display:block;} .lx-play .pl{display:none;}
.lx-play[aria-pressed="true"] .pa{display:none;} .lx-play[aria-pressed="true"] .pl{display:block;}
.lx-cap{flex:1; font-size:15px; color:var(--ink-2); line-height:1.5; min-height:42px; display:flex; align-items:center;}
.lx-cap span{animation:lxIn .5s var(--ease) both;}
.lx-cap b{color:var(--ink-1);}
.lx-note{font-family:var(--mono); font-size:10px; letter-spacing:.08em; color:var(--ink-3); white-space:nowrap;}

/* Compact stage (phones / small tablets) — same scenes, single column */
.lx[data-mode="compact"] .lx-side,
.lx[data-mode="compact"] .lx-lside,
.lx[data-mode="compact"] .lx-sample,
.lx[data-mode="compact"] .lx-search,
.lx[data-mode="compact"] .lx-golive,
.lx[data-mode="compact"] .lx-pvcard,
.lx[data-mode="compact"] .lx-mini,
.lx[data-mode="compact"] .lx-chart,
.lx[data-mode="compact"] .lx-seg,
.lx[data-mode="compact"] .lx-lsec,
.lx[data-mode="compact"] .lx-tabs,
.lx[data-mode="compact"] .lx-pl ul{display:none;}
.lx[data-mode="compact"] .lx-tbrand{display:flex;}
.lx[data-mode="compact"] .lx-url{min-width:0; flex:1; margin:0 0 0 8px; font-size:11px; padding:0 10px;}
.lx[data-mode="compact"] .lx-top{padding:0 14px;}
.lx[data-mode="compact"] .lx-view{padding:18px 16px;}
.lx[data-mode="compact"] .lx-h{font-size:29px;}
.lx[data-mode="compact"] .lx-plans{grid-template-columns:1fr; gap:10px; margin-top:14px;}
.lx[data-mode="compact"] .lx-pl{padding:14px 16px; display:grid; grid-template-columns:1fr auto; align-items:center; gap:4px 12px;}
.lx[data-mode="compact"] .lx-pl .n{grid-column:1 / -1;}
.lx[data-mode="compact"] .lx-pl .pr{font-size:28px; margin-top:4px;}
.lx[data-mode="compact"] .lx-pl .fee{margin-top:0; grid-column:1; justify-self:start;}
.lx[data-mode="compact"] .lx-pl .lx-btn{grid-column:2; grid-row:2 / span 2;}
.lx[data-mode="compact"] .lx-drawer{width:auto; left:0; top:auto; height:86%; border-left:0; border-radius:20px 20px 0 0; transform:translateY(106%); box-shadow:none;}
.lx[data-mode="compact"] .lx-drawer.on{transform:none; box-shadow:0 -30px 60px -30px rgba(38,28,14,.35);}
.lx[data-mode="compact"] .lx-cgrid,
.lx[data-mode="compact"] .lx-dgrid,
.lx[data-mode="compact"] .lx-dg2{grid-template-columns:1fr;}
.lx[data-mode="compact"] .lx-head{align-items:flex-start;}
.lx[data-mode="compact"] .lx-cpub{display:flex !important; margin-top:12px;}
.lx[data-mode="compact"] .lx-lbody{padding:14px;}
.lx[data-mode="compact"] .lx-ltop{padding:0 14px;}
.lx[data-mode="compact"] .lx-lbrandm{display:flex !important;}
.lx[data-mode="compact"] .lx-lhero{grid-template-columns:1fr; padding:18px; gap:16px;}
.lx[data-mode="compact"] .lx-lhero h4{font-size:27px;}
.lx[data-mode="compact"] .lx-modal{width:auto; left:14px; right:14px; top:auto; bottom:14px; transform:translateY(30px); }
.lx[data-mode="compact"] .lx-modal.on{transform:none;}
.lx[data-mode="compact"] .lx-kpis{grid-template-columns:1fr 1fr; gap:10px;}
.lx[data-mode="compact"] .lx-kpi .v{font-size:25px;}
.lx[data-mode="compact"] .lx-toasts{left:12px; right:12px; bottom:12px; align-items:stretch;}
.lx[data-mode="compact"] .lx-toast{max-width:none;}
.lx[data-mode="compact"] .lx-endc h3{font-size:38px;}
.lx-cpub,.lx-lbrandm{display:none !important;}

@media (max-width:760px){
  .lx{margin-top:36px;}
  .lx-chapters{gap:6px;}
  .lx-ch{padding:10px 10px 12px; border-radius:12px;}
  .lx-ch .s{display:none;}
  .lx-ch .t{font-size:12px; margin-top:6px; line-height:1.25;}
  .lx-ch .k{font-size:0; letter-spacing:0;}
  .lx-ch .k i{font-size:9.5px;}
  .lx-foot{flex-wrap:wrap; gap:10px 12px;}
  .lx-cap{font-size:13px; flex-basis:calc(100% - 56px);}
  .lx-note{width:100%;}
}
@media (prefers-reduced-motion:reduce){
  .lx-cursor,.lx-rip{display:none !important;}
}
.lx-cgrid > *,.lx-dgrid > *,.lx-dg2 > *,.lx-plans > *,.lx-kpis > *,.lx-2 > *,.lx-lhero > *{min-width:0;}
.lx-ord .a{white-space:nowrap;}
.lx-tg span:first-child{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.lx-file > div{min-width:0;}

/* ─── Student-facing theme ────────────────────────────────────────────────
   Everything a student sees (the educator's own website, its checkout, the
   domain preview and the "student preview" card) wears the sample academy's
   own blue brand, so it reads instantly as a different site from the ochre
   studio. This is the educator's white-label colour, not an AllCoaching one. */
.lx{--st:#2F5BD3; --st-deep:#1D3F99; --st-soft:#E8EEFC; --st-line:#C9D6F6; --st-ink:#0B1430;}
.lx-url.st{background:#EEF3FF; border-color:var(--st-line); color:var(--st-deep);}
.lx-url.st svg{color:var(--st);}
.lx-learn{background:#F6F8FE;}
.lx-learn::after{content:'Student view · the academy\2019s own website'; position:absolute; right:14px; bottom:14px; z-index:9; font-family:var(--mono); font-size:9.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:#fff; background:var(--st); padding:6px 11px; border-radius:999px; box-shadow:0 10px 24px -10px rgba(29,63,153,.7);}
.lx-learn .lx-lmono,.lx-mhd .m{background:linear-gradient(135deg,#4A78EA,var(--st-deep)); color:#fff;}
.lx-learn .lx-lnav.on{background:var(--st-soft); color:var(--st-deep);}
.lx-learn .lx-lchip svg{color:var(--st);}
.lx-learn .lx-tabs span.on{background:var(--st-deep); border-color:var(--st-deep);}
.lx-learn .lx-lhero{background:radial-gradient(360px 220px at 88% 0%, rgba(110,150,255,.38), transparent 70%), linear-gradient(135deg,#16295E,#0B1430 62%);}
.lx-learn .lx-leb{color:#9DBBFF;}
.lx-learn .lx-leb::before{background:#9DBBFF; box-shadow:0 0 0 3px rgba(157,187,255,.22);}
.lx-learn .lx-lhero h4{color:#E6EDFF;}
.lx-learn .lx-av{background:linear-gradient(135deg,#7FA2F5,var(--st)); color:#fff;}
.lx-learn .lx-buy .pr{color:var(--st-ink);}
.lx-learn .lx-btn.acc{background:linear-gradient(135deg,#4F7DEE,var(--st) 55%,var(--st-deep)); color:#fff; box-shadow:0 10px 20px -8px rgba(47,91,211,.6), inset 0 1px 0 rgba(255,255,255,.25);}
.lx-learn .lx-pm span.on{border-color:var(--st); background:var(--st-soft); color:var(--st-deep);}
.lx-learn .lx-in.focus{border-color:var(--st); box-shadow:0 0 0 3px rgba(47,91,211,.16);}
.lx-learn .lx-eb::before{background:var(--st);}
.lx-learn .caret::after{background:var(--st-deep);}
.lx-learn .lx-less .pl{background:var(--st-soft); color:var(--st);}
.lx-msite{background:#F6F8FE;}
.lx-mhero em{color:var(--st);}
.lx-mcard .t{background:radial-gradient(60px 40px at 80% 0, rgba(110,150,255,.55), transparent 70%), linear-gradient(135deg,#16295E,#0B1430);}
.lx-mcard .p{color:var(--st);}
.lx-pv .th{background:radial-gradient(220px 140px at 85% 10%, rgba(110,150,255,.5), transparent 70%), linear-gradient(135deg,#16295E,#0B1430);}
.lx-pv .th::before{border-color:rgba(200,215,255,.2); box-shadow:0 0 0 18px rgba(200,215,255,.05), 0 0 0 36px rgba(200,215,255,.03);}
.lx-pv .tg{color:#CFDDFF;}
.lx-pv .tt{color:#E6EDFF;}
.lx-pv .prr b{color:var(--st);}

/* Google sign-in (scene 1 opener) */
.lx-login{position:absolute; inset:0; z-index:12; display:grid; place-items:center; background:var(--bg); background-image:radial-gradient(520px 320px at 50% 0%, rgba(197,139,67,.14), transparent 70%); opacity:0; pointer-events:none; transition:opacity .45s var(--ease);}
.lx-login.on{opacity:1;}
.lx-lgc{transition:opacity .3s var(--ease), transform .3s var(--ease); width:360px; text-align:center; padding:30px 30px 24px; background:#fff; border:1px solid var(--line-2); border-radius:20px; box-shadow:var(--sh-3);}
.lx-lgb{display:flex; align-items:center; justify-content:center; gap:9px;}
.lx-lgb img{width:30px; height:30px; border-radius:8px;}
.lx-lgb b{font-family:var(--display); font-style:italic; font-weight:400; font-size:22px;}
.lx-lgb sup{font-family:var(--mono); font-size:7.5px; letter-spacing:.2em; color:var(--accent-deep);}
.lx-lgc .lx-h{margin:18px 0 6px; font-size:30px;}
.lx-gbtn{margin-top:20px; height:44px; border-radius:12px; border:1px solid var(--line-strong); background:#fff; display:flex; align-items:center; justify-content:center; gap:10px; font-weight:700; font-size:14px; color:#1f1f1f; box-shadow:var(--sh-1); transition:transform .15s var(--ease), box-shadow .3s;}
.lx-gbtn svg{width:19px; height:19px;}
.lx-gbtn.hov{box-shadow:0 0 0 3px rgba(66,133,244,.18);}
.lx-gpop{position:absolute; top:50%; left:50%; width:330px; transform:translate(-50%,-44%) scale(.96); opacity:0; transition:transform .45s var(--ease), opacity .35s var(--ease); background:#fff; border-radius:16px; box-shadow:0 30px 70px -20px rgba(21,17,13,.45), 0 0 0 1px rgba(0,0,0,.06); padding:20px 18px 12px; text-align:left;}
.lx-gpop.on{transform:translate(-50%,-50%); opacity:1;}
.lx-login.pop .lx-lgc{opacity:0; transform:scale(.97);}
.lx-gpop .gh{display:flex; align-items:center; gap:8px; font-size:12px; color:#444; padding-bottom:12px; border-bottom:1px solid #eee;}
.lx-gpop .gh svg{width:16px; height:16px;}
.lx-gpop h4{margin:14px 0 2px; font-size:19px; font-weight:500; color:#1f1f1f;}
.lx-gpop p{margin:0 0 12px; font-size:12px; color:#555;}
.lx-gpop .acct{display:flex; align-items:center; gap:11px; padding:10px 8px; border-top:1px solid #eee; border-radius:8px; transition:background .2s;}
.lx-gpop .acct.hov{background:#F1F4FB;}
.lx-gpop .acct b{display:block; font-size:13px; font-weight:600; color:#1f1f1f;}
.lx-gpop .acct span:not(.lx-av){display:block; font-size:11.5px; color:#555;}
.lx-gpop .acct.alt .lx-av{background:#F1F3F4; color:#555; box-shadow:none;}
.lx-gpop .acct.busy{background:#E8F0FE;}
.lx-gtag{margin-left:auto; display:inline-flex; align-items:center; gap:5px; font-size:10.5px; font-weight:600; color:var(--ink-3);}
.lx-gtag svg{width:13px; height:13px;}

/* Single-offer pages: one plan card, centred */
.lx-plans.one{grid-template-columns:minmax(0,360px); justify-content:center;}

/* Fast-forward / next controls */
.lx-ctl{appearance:none; border:1px solid var(--line-2); cursor:pointer; height:40px; padding:0 14px; border-radius:999px; background:#fff; color:var(--ink-1); display:inline-flex; align-items:center; gap:7px; font:700 12.5px var(--ui); flex:none; box-shadow:var(--sh-1); transition:background .2s, color .2s, border-color .2s, transform .2s var(--ease);}
.lx-ctl:hover{transform:translateY(-1px);}
.lx-ctl:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(197,139,67,.4);}
.lx-ctl svg{width:14px; height:14px;}
.lx-ctl[aria-pressed="true"]{background:#15110D; color:#FAF8F4; border-color:#15110D;}