/* MirrorPartners: public shell (header/footer) and the landing page.
   Dark ground, brushed gold and warm white. Loaded on every public page;
   landing styles are scoped under .lp, the palette lives here (not in app.css). */

:root {
  --lp-bg: #0b0a08;
  --lp-bg2: #0f0d0a;
  --lp-bg3: #070605;
  --lp-sf: #15120e;
  --lp-sf2: #1b1712;
  --lp-sf3: #241e15;
  --lp-cell: rgba(255, 246, 225, .028);
  --lp-ln: rgba(212, 175, 95, .16);
  --lp-ln2: rgba(212, 175, 95, .28);
  --lp-ln3: rgba(212, 175, 95, .5);
  --lp-tx: #f6f1e7;
  --lp-tx2: #ddd5c6;
  --lp-mu: #b9b0a0;
  --lp-fa: #8f8778;
  --lp-g1: #f7e9c6;
  --lp-g2: #ecd08e;
  --lp-g3: #d4a752;
  --lp-g4: #b8883a;
  --lp-g5: #a5772b;
  --lp-on-gold: #1a1309;
  --lp-neg: #e07b65;
  --lp-gold: linear-gradient(135deg, #f7e9c6 0%, #ecd08e 28%, #d4a752 62%, #b8883a 100%);
  --lp-gold-v: linear-gradient(180deg, #f8e8bf 0%, #e9c880 42%, #cf9f4c 100%);
  --lp-gold-text: linear-gradient(100deg, #b8883a 0%, #d4a752 16%, #f7e9c6 30%, #ecd08e 42%, #c99a48 58%, #f2dca6 76%, #c3913f 90%, #b8883a 100%);
  --lp-brush: repeating-linear-gradient(180deg, rgba(255, 255, 255, .07) 0 1px, rgba(0, 0, 0, .06) 1px 2px, transparent 2px 4px);
  --lp-ease: cubic-bezier(.22, 1, .36, 1);
  --lp-sh1: inset 0 1px 0 rgba(247, 233, 198, .05), 0 18px 40px -26px rgba(0, 0, 0, .9);
  --lp-sh2: inset 0 1px 0 rgba(247, 233, 198, .06), 0 40px 80px -40px rgba(0, 0, 0, .95), 0 0 0 1px rgba(0, 0, 0, .4);
}

/* ================================================================ shell */
.pub-skip { position: absolute; left: 12px; top: -60px; z-index: 100; padding: .6rem 1rem; border-radius: 10px; background: var(--lp-g2); color: var(--lp-on-gold); font-weight: 650; }
.pub-skip:focus { top: 12px; text-decoration: none; }

.pub-header { position: sticky; top: 0; z-index: 50; padding: 12px 32px 0; pointer-events: none; }
.pub-header-in {
  pointer-events: auto; position: relative; max-width: 1240px; margin: 0 auto; height: 62px;
  display: flex; align-items: center; gap: 12px; padding: 0 10px 0 16px;
  border-radius: 18px; background: rgba(16, 13, 10, .72);
  -webkit-backdrop-filter: saturate(1.4) blur(18px); backdrop-filter: saturate(1.4) blur(18px);
  border: 1px solid var(--lp-ln);
  box-shadow: inset 0 1px 0 rgba(247, 233, 198, .06), 0 20px 40px -24px rgba(0, 0, 0, .9);
  transition: background .3s, border-color .3s;
}
.pub-header-in::before { content: ""; position: absolute; left: 18%; right: 18%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(236, 208, 142, .55), transparent); }
.pub-header.is-scrolled .pub-header-in { background: rgba(12, 10, 8, .88); border-color: var(--lp-ln2); }
.pub-brand { display: inline-flex; align-items: center; gap: 11px; flex: none; color: var(--lp-tx); }
.pub-brand:hover { text-decoration: none; }
.pub-logo { display: block; width: 40px; height: auto; aspect-ratio: 1188 / 850; flex: none; filter: drop-shadow(0 2px 8px rgba(212, 167, 82, .25)); overflow: visible; }
.pub-glint { animation: pub-glint 9s ease-in-out 1.5s infinite; }
.pub-name { font-size: 17px; font-weight: 640; letter-spacing: -.025em; color: var(--lp-tx); }
.pub-name b { font-weight: 640; background: var(--lp-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pub-anchors { display: flex; gap: 2px; margin: 0 auto; }
.pub-anchors a { padding: 8px 12px; border-radius: 10px; color: var(--lp-mu); font-size: 14.5px; font-weight: 500; transition: background .2s, color .2s; }
.pub-anchors a:hover { background: rgba(212, 175, 95, .08); color: var(--lp-g1); text-decoration: none; }
.pub-nav { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.pub-anchors + .pub-nav { margin-left: 0; }
.pub-btn { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 12px; font-size: 14.5px; font-weight: 600; white-space: nowrap; transition: background .2s, border-color .2s, color .2s, box-shadow .2s; }
.pub-btn:hover { text-decoration: none; }
.pub-btn .icon { width: 16px; height: 16px; }
.pub-btn-gold { color: var(--lp-on-gold); background: var(--lp-gold-v); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 8px 22px -10px rgba(212, 167, 82, .7); }
.pub-btn-gold:hover { color: var(--lp-on-gold); filter: brightness(1.06); }
.pub-btn-line { color: var(--lp-g1); border: 1px solid var(--lp-ln3); background: rgba(212, 175, 95, .05); }
.pub-btn-line:hover { color: var(--lp-g1); background: rgba(212, 175, 95, .13); border-color: var(--lp-g3); }
.pub-btn-ghost { color: var(--lp-tx2); }
.pub-btn-ghost:hover { background: rgba(212, 175, 95, .08); color: var(--lp-g1); }
.pub-header .lang-switch, .pub-footer .lang-switch { border: 1px solid var(--lp-ln); border-radius: 10px; padding: 3px; background: rgba(0, 0, 0, .25); }
.pub-header .lang-switch a, .pub-footer .lang-switch a { padding: .2rem .5rem; border-radius: 7px; font-size: .74rem; font-weight: 650; color: var(--lp-fa); }
.pub-header .lang-switch a:hover, .pub-footer .lang-switch a:hover { color: var(--lp-tx); }
.pub-header .lang-switch a.active, .pub-footer .lang-switch a.active { background: rgba(212, 175, 95, .16); color: var(--lp-g1); }

.pub-footer { position: relative; overflow: hidden; background: #080706; border-top: 1px solid var(--lp-ln); padding-top: 56px; color: var(--lp-fa); }
.pub-footer::before { content: ""; position: absolute; left: 50%; top: -1px; width: min(640px, 80%); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(236, 208, 142, .6), transparent); }
.pub-footer-in { max-width: 1304px; margin: 0 auto; padding: 0 32px; }
.pub-footer-top { display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; }
.pub-legal { display: flex; gap: 6px; flex-wrap: wrap; }
.pub-legal a { padding: 6px 12px; border-radius: 10px; color: var(--lp-tx2); font-weight: 520; font-size: 14.5px; }
.pub-legal a:hover { background: rgba(212, 175, 95, .08); color: var(--lp-g1); text-decoration: none; }
.pub-footer .disclaimer { max-width: 780px; margin: 22px 0 28px; font-size: 13.5px; line-height: 1.65; color: var(--lp-fa); }
.pub-footer-base { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 0; border-top: 1px solid rgba(212, 175, 95, .1); font-size: 13.5px; }
.pub-wordmark { position: relative; margin-top: 18px; text-align: center; user-select: none; line-height: .8; font-weight: 720; letter-spacing: -.065em; font-size: clamp(54px, 13.2vw, 196px); white-space: nowrap; }
.pub-wordmark span { display: block; padding: 0 .04em; background: linear-gradient(180deg, rgba(236, 208, 142, .2) 0%, rgba(212, 167, 82, .05) 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pub-wordmark .pub-wordmark-r { transform: scaleY(-1); height: .32em; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; opacity: .6; -webkit-mask-image: linear-gradient(0deg, #000, transparent 90%); mask-image: linear-gradient(0deg, #000, transparent 90%); }

/* ================================================================ landing */
.lp-body { background: var(--lp-bg); }
html:has(.lp) { scroll-behavior: smooth; }
.lp { overflow-x: clip; color: var(--lp-tx); background: var(--lp-bg); }
.lp [id] { scroll-margin-top: 84px; }
.lp-wrap { width: 100%; max-width: 1304px; margin: 0 auto; padding: 0 32px; }
.lp a { color: var(--lp-g2); }
.lp .icon { stroke-width: 1.7; }
.lp-flash { position: relative; z-index: 3; margin-top: -54px; margin-bottom: 36px; }
.lp-flash .notice { background: rgba(23, 20, 15, .88); border-color: var(--lp-ln2); color: var(--lp-tx2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lp-flash .notice .icon { color: var(--lp-g2); }
/* app.css zeroes the side padding of legal pages; keep the phone gutter in the public shell. */
main > .legal.container { padding-left: 16px; padding-right: 16px; }

/* ---- shared type ---- */
.lp-h1 { margin: 0; font-size: clamp(42px, 6.2vw, 94px); line-height: .98; letter-spacing: -.052em; font-weight: 620; color: var(--lp-tx); }
.lp-h2 { margin: 0 0 20px; font-size: clamp(36px, 4.6vw, 68px); line-height: 1.02; letter-spacing: -.045em; font-weight: 600; color: var(--lp-tx); text-wrap: balance; }
.lp-lead { margin: 0; max-width: 34em; font-size: clamp(16.5px, 1.25vw, 19px); line-height: 1.6; color: var(--lp-mu); text-wrap: pretty; }
.lp-gold-text { background-image: var(--lp-brush), var(--lp-gold-text); background-size: 100% 100%, 260% 100%; background-position: 0 0, 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; animation: lp-sheen 9s ease-in-out infinite; }
.lp-kicker { display: inline-flex; align-items: center; gap: 14px; margin: 0 0 24px; font: 600 12px/1 var(--font); letter-spacing: .24em; text-transform: uppercase; color: var(--lp-g3); }
.lp-kicker-n { display: inline-flex; align-items: center; gap: 14px; color: var(--lp-g2); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.lp-kicker-n::after { content: ""; width: 28px; height: 1px; background: linear-gradient(90deg, var(--lp-g3), transparent); }
.lp-head { max-width: 780px; margin-bottom: clamp(40px, 5vw, 72px); }
.lp-head-wide { max-width: 900px; }
.lp-head-row { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, max-content); align-items: end; gap: 28px 56px; }
.lp-head-row > div { max-width: 780px; }
.lp-head-row .lp-h2 { margin-bottom: 0; }
.lp-head-row > .lp-lead { max-width: 23em; padding-bottom: 6px; }
.lp-sub { margin: 14px 0 0; font-size: 14.5px; color: var(--lp-fa); }
.lp-sub a { color: var(--lp-g2); font-weight: 600; }
.lp-mono { font-family: var(--mono); }

.lp-tags { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lp-tags li { display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 14px 0 11px; border-radius: 12px; background: rgba(27, 23, 18, .7); border: 1px solid var(--lp-ln); font-size: 14px; font-weight: 520; color: var(--lp-tx2); white-space: nowrap; }
.lp-tags .icon { width: 16px; height: 16px; color: var(--lp-g3); }
.lp-tags-end { margin: 0; padding-bottom: 6px; justify-content: flex-end; max-width: 470px; }

/* ---- buttons + invite form ---- */
.lp-btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 20px; border: 0; border-radius: 13px; font: 650 15.5px/1 var(--font); cursor: pointer; white-space: nowrap; transition: transform .25s var(--lp-ease), box-shadow .25s, filter .25s; }
.lp .lp-btn:hover { text-decoration: none; }
.lp-btn .icon { width: 18px; height: 18px; stroke-width: 2; transition: transform .3s var(--lp-ease); }
.lp-btn:hover .icon { transform: translateX(3px); }
.lp-btn:active { transform: scale(.97); }
.lp .lp-btn-primary { color: var(--lp-on-gold); background: var(--lp-gold-v); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), inset 0 -1px 0 rgba(110, 72, 18, .35), 0 12px 30px -12px rgba(212, 167, 82, .7); }
.lp-btn-primary:hover { filter: brightness(1.06); }
.lp-btn-primary::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 45%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .7), transparent); transform: skewX(-20deg); animation: lp-btn-sheen 7s ease-in-out 2.4s infinite; }
.lp-btn-lg { height: 56px; padding: 0 26px; font-size: 16.5px; border-radius: 15px; }

.lp-code { position: relative; display: flex; align-items: center; gap: 4px; max-width: 470px; padding: 6px; border-radius: 19px; background: rgba(21, 18, 14, .85); border: 1px solid var(--lp-ln2); box-shadow: inset 0 1px 0 rgba(247, 233, 198, .05), 0 24px 50px -28px rgba(0, 0, 0, .9); transition: border-color .25s, box-shadow .25s; }
.lp-code:focus-within { border-color: rgba(236, 208, 142, .7); box-shadow: 0 0 0 4px rgba(212, 167, 82, .16), 0 24px 50px -28px rgba(0, 0, 0, .9); }
.lp-code-ic { display: grid; place-items: center; width: 38px; flex: none; color: var(--lp-g3); }
.lp-code input[type=text] { flex: 1; min-width: 0; width: auto; min-height: 48px; padding: 0 4px; border: 0; border-radius: 10px; background: transparent; color: var(--lp-g1); font: 600 16px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; box-shadow: none; caret-color: var(--lp-g2); }
.lp-code input[type=text]:focus { outline: none; box-shadow: none; border: 0; background: transparent; }
.lp-code input::placeholder { font-family: var(--font); font-weight: 450; letter-spacing: 0; text-transform: none; color: var(--lp-fa); }
.lp-code .lp-btn { flex: none; }
.lp-code-dark { background: rgba(10, 8, 6, .6); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* ---- generic panels ---- */
.lp-panel, .lp-card, .lp-chat, .lp-receipt { position: relative; }
.lp-panel::before, .lp-card::before, .lp-chat::before, .lp-receipt::before, .lp-score-panel::before, .lp-stage::before { content: ""; position: absolute; z-index: 1; left: 12%; right: 12%; top: -1px; height: 1px; background: linear-gradient(90deg, transparent, rgba(236, 208, 142, .5), transparent); pointer-events: none; }
.lp-panel { min-width: 0; padding: 24px; border-radius: 26px; background: linear-gradient(180deg, #16130e 0%, #100e0a 100%); border: 1px solid var(--lp-ln); box-shadow: var(--lp-sh1); }
.lp-panel-h { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.lp-panel-h-sm { margin-bottom: 16px; }
.lp-ic { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: linear-gradient(180deg, rgba(236, 208, 142, .16), rgba(212, 167, 82, .05)); border: 1px solid var(--lp-ln2); color: var(--lp-g2); }
.lp-ic .icon { width: 19px; height: 19px; }
.lp-ex { margin-left: auto; flex: none; padding: 4px 10px; border-radius: 999px; border: 1px dashed var(--lp-ln2); font-size: 11.5px; font-weight: 560; color: var(--lp-fa); white-space: nowrap; }
.lp-card-t { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.lp-card-t b { font-size: 15px; font-weight: 620; color: var(--lp-tx); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-card-t small { font-size: 12.5px; color: var(--lp-fa); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ================================================================ hero */
.lp-hero { position: relative; isolation: isolate; margin-top: -74px; padding: 150px 0 92px; }
.lp-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: radial-gradient(1100px 620px at 78% -8%, rgba(212, 167, 82, .17), transparent 62%), radial-gradient(900px 520px at 4% 36%, rgba(184, 136, 58, .08), transparent 62%), linear-gradient(180deg, #0d0b08 0%, #0b0a08 70%, #0b0a08 100%); }
.lp-hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(212, 175, 95, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(212, 175, 95, .07) 1px, transparent 1px); background-size: 64px 64px; background-position: center top; -webkit-mask-image: radial-gradient(ellipse 70% 52% at 50% 24%, #000 8%, transparent 72%); mask-image: radial-gradient(ellipse 70% 52% at 50% 24%, #000 8%, transparent 72%); }
.lp-orb { position: absolute; border-radius: 50%; animation: lp-drift 20s ease-in-out infinite alternate; }
.lp-orb-1 { width: 640px; height: 640px; right: -180px; top: -260px; background: radial-gradient(circle, rgba(236, 208, 142, .18), transparent 66%); }
.lp-orb-2 { width: 520px; height: 520px; left: -240px; top: 200px; background: radial-gradient(circle, rgba(184, 136, 58, .12), transparent 66%); animation-duration: 25s; animation-direction: alternate-reverse; }
.lp-orb-3 { width: 1000px; height: 560px; left: 50%; bottom: -170px; margin-left: -500px; background: radial-gradient(ellipse, rgba(212, 167, 82, .2), transparent 68%); animation-duration: 28s; }

.lp-hero-top { display: grid; grid-template-columns: minmax(0, 1.68fr) minmax(0, 1fr); gap: 32px 48px; align-items: end; }
.lp-pill { display: inline-flex; align-items: center; gap: 9px; height: 34px; margin: 0 0 30px; padding: 0 15px 0 12px; border-radius: 999px; background: rgba(21, 18, 14, .75); border: 1px solid var(--lp-ln2); font-size: 13px; font-weight: 520; letter-spacing: .01em; color: var(--lp-tx2); }
.lp-pill .icon { width: 15px; height: 15px; color: var(--lp-g2); }
.lp-h1-line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.lp-h1-line > span { display: inline-block; }
.lp-h1-reflect { display: block; height: .36em; overflow: hidden; margin-top: .03em; -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .26), transparent 85%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .26), transparent 85%); pointer-events: none; user-select: none; }
.lp-h1-reflect > span { display: inline-block; transform: scaleY(-1); transform-origin: 50% 50%; margin-top: -.47em; filter: blur(1.4px); }
.lp-hero-side { padding-bottom: 30px; }
.lp-hero-side .lp-lead { margin-bottom: 26px; max-width: 30em; }

/* stage */
.lp-stage-wrap { position: relative; margin-top: 56px; }
.lp-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 128px minmax(0, 1fr); padding: 20px; border-radius: 34px; background: linear-gradient(180deg, rgba(29, 25, 18, .72), rgba(14, 12, 9, .6)); border: 1px solid var(--lp-ln2); box-shadow: inset 0 1px 0 rgba(247, 233, 198, .07), 0 60px 120px -50px rgba(0, 0, 0, .95), 0 0 120px -40px rgba(212, 167, 82, .3); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.lp-card { display: flex; flex-direction: column; min-width: 0; padding: 18px 18px 14px; border-radius: 24px; background: linear-gradient(180deg, #17140f, #110f0b); border: 1px solid var(--lp-ln); box-shadow: var(--lp-sh1); }
.lp-card-h { display: flex; align-items: center; gap: 12px; }
.lp-av { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--lp-gold-v); color: var(--lp-on-gold); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 6px 16px -8px rgba(212, 167, 82, .7); }
.lp-av .icon { width: 19px; height: 19px; stroke-width: 2; }
.lp-av-you { background: rgba(212, 175, 95, .08); border: 1px solid var(--lp-ln2); color: var(--lp-g2); box-shadow: none; }
.lp-score-chip { display: flex; align-items: center; gap: 8px; padding: 4px 4px 4px 10px; border-radius: 12px; background: rgba(212, 175, 95, .07); border: 1px solid var(--lp-ln2); flex: none; }
.lp-score-chip small { font-size: 11px; font-weight: 600; letter-spacing: .02em; color: var(--lp-g2); }
.lp-score-chip b { display: grid; place-items: center; min-width: 36px; height: 30px; padding: 0 6px; border-radius: 9px; background: var(--lp-gold-v); color: var(--lp-on-gold); font-size: 15px; font-weight: 720; }
.lp-status { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; flex: none; border-radius: 999px; background: rgba(212, 175, 95, .07); border: 1px solid var(--lp-ln2); color: var(--lp-g2); font-size: 12.5px; font-weight: 600; }
.lp-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--lp-g2); box-shadow: 0 0 10px rgba(236, 208, 142, .8); animation: lp-breathe 2.2s ease-in-out infinite; }
.lp-chart { margin: 14px -2px 6px; }
.lp-chart svg { width: 100%; height: auto; overflow: visible; }
.lp-chart-grid path { fill: none; stroke: rgba(212, 175, 95, .08); stroke-width: 1; }
.lp-line { fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; filter: drop-shadow(0 0 6px rgba(212, 167, 82, .45)); animation: lp-draw 1.9s var(--lp-ease) .55s forwards; }
.lp-line-2 { stroke: #ecd08e; stroke-opacity: .7; stroke-width: 2.6; filter: none; animation-delay: 1.15s; }
.lp-area { opacity: 0; animation: lp-fade 1.2s ease 1.5s forwards; }
.lp-area-2 { animation-delay: 2.1s; }
.lp-marks circle { fill: #0f0d0a; stroke: var(--lp-g2); stroke-width: 2.5; transform-box: fill-box; transform-origin: center; transform: scale(0); animation: lp-pop .5s var(--lp-ease) forwards; animation-delay: calc(1.25s + var(--k) * .22s); }
.lp-marks-2 circle { stroke: #c9a663; animation-delay: calc(1.85s + var(--k) * .22s); }
.lp-trades { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 12px; border-top: 1px dashed rgba(212, 175, 95, .16); }
.lp-trades-l { font-size: 11px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--lp-fa); white-space: nowrap; }
.lp-trade-slot { position: relative; flex: 1; min-width: 0; height: 32px; }
.lp-trade { position: absolute; right: 0; top: 0; height: 32px; display: inline-flex; align-items: center; gap: 8px; padding: 0 11px 0 4px; border-radius: 10px; background: #1d1912; border: 1px solid var(--lp-ln2); box-shadow: 0 8px 18px -10px rgba(0, 0, 0, .8); font-size: 13px; font-weight: 520; color: var(--lp-tx2); white-space: nowrap; opacity: 0; animation: lp-trade 9s var(--lp-ease) infinite both; }
.lp-trade em { font-style: normal; font-size: 10.5px; font-weight: 720; letter-spacing: .08em; text-transform: uppercase; padding: 4px 8px; border-radius: 7px; }
.lp-trade em.buy { background: var(--lp-gold-v); color: var(--lp-on-gold); }
.lp-trade em.sell { background: var(--lp-tx); color: var(--lp-on-gold); }
.lp-trade em.close { background: transparent; color: var(--lp-g2); box-shadow: inset 0 0 0 1px var(--lp-ln3); }
.lp-trade b { font-weight: 620; color: var(--lp-tx); font-variant-numeric: tabular-nums; }
.lp-trade .icon { width: 15px; height: 15px; color: var(--lp-g2); stroke-width: 2.4; }
.lp-src .lp-tr-1 { animation-delay: 2.6s; }
.lp-src .lp-tr-2 { animation-delay: 5.6s; }
.lp-src .lp-tr-3 { animation-delay: 8.6s; }
.lp-dst .lp-tr-1 { animation-delay: 3.5s; }
.lp-dst .lp-tr-2 { animation-delay: 6.5s; }
.lp-dst .lp-tr-3 { animation-delay: 9.5s; }

.lp-mirror { position: relative; }
.lp-mirror-pane { position: absolute; top: 4%; bottom: 4%; left: 50%; width: 12px; margin-left: -6px; overflow: hidden; border-radius: 12px; background: linear-gradient(180deg, rgba(236, 208, 142, 0), rgba(236, 208, 142, .5) 22%, rgba(184, 136, 58, .55) 78%, rgba(236, 208, 142, 0)); box-shadow: 0 0 40px rgba(212, 167, 82, .35); }
.lp-mirror-pane::before { content: ""; position: absolute; inset: 0 3px; border-radius: 6px; background: linear-gradient(180deg, transparent, rgba(255, 246, 220, .8) 50%, transparent); opacity: .5; }
.lp-mirror-gloss { position: absolute; left: 0; right: 0; height: 34%; background: linear-gradient(180deg, transparent, #fffaf0, transparent); animation: lp-gloss 3s ease-in-out 2.4s infinite both; }
.lp-beam { position: absolute; left: -20px; right: -20px; top: 50%; height: 2px; margin-top: -1px; background: repeating-linear-gradient(90deg, rgba(212, 175, 95, .45) 0 6px, transparent 6px 12px); }
.lp-beam i { position: absolute; top: 50%; left: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--lp-g1); box-shadow: 0 0 0 3px rgba(212, 167, 82, .25), 0 0 22px 6px rgba(236, 208, 142, .55); opacity: 0; animation: lp-beam 3s var(--lp-ease) 2.75s infinite both; }
.lp-mirror-label { position: absolute; left: 50%; top: calc(50% + 22px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; width: 120px; text-align: center; font-size: 11.5px; font-weight: 600; letter-spacing: .02em; color: var(--lp-g2); line-height: 1.25; }
.lp-mirror-label .icon { width: 34px; height: 34px; padding: 8px; margin-top: -55px; margin-bottom: 26px; border-radius: 50%; background: #15120e; border: 1px solid var(--lp-ln3); box-shadow: 0 0 20px -4px rgba(212, 167, 82, .5); color: var(--lp-g1); }
.lp-mirror-label span { padding: 3px 8px; border-radius: 8px; background: rgba(11, 10, 8, .85); }

.lp-float { position: absolute; z-index: 2; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 12px; border-radius: 18px; background: rgba(23, 20, 15, .88); border: 1px solid var(--lp-ln2); box-shadow: inset 0 1px 0 rgba(247, 233, 198, .07), 0 30px 60px -24px rgba(0, 0, 0, .95); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: lp-float-in 1s var(--lp-ease) both, lp-bob 7s ease-in-out infinite alternate; }
.lp-float > span:last-child { display: flex; flex-direction: column; line-height: 1.3; }
.lp-float b { font-size: 14px; font-weight: 620; color: var(--lp-tx); white-space: nowrap; }
.lp-float small { font-size: 12.5px; color: var(--lp-fa); white-space: nowrap; }
.lp-float-ic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--lp-gold-v); color: var(--lp-on-gold); }
.lp-float-ic .icon { stroke-width: 2; }
.lp-mini-bar { display: block; width: 130px; height: 5px; margin-top: 7px; border-radius: 3px; background: rgba(255, 255, 255, .07); overflow: hidden; }
.lp-mini-bar i { display: block; height: 100%; width: 66%; border-radius: 3px; background: linear-gradient(90deg, #b8883a, #f7e9c6); transform-origin: left; animation: lp-grow 1.4s var(--lp-ease) 1.6s both; }
.lp-float-1 { left: -30px; top: -38px; animation-delay: 1.3s, 0s; }
.lp-float-2 { right: -26px; bottom: -34px; animation-delay: 1.6s, -3.5s; }
.lp-float-big { display: flex; align-items: flex-start; font-size: 36px; font-weight: 720; letter-spacing: -.05em; line-height: 1; background: var(--lp-gold); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-float-big span:first-child { font-size: .55em; margin: .1em .04em 0 0; }

/* ---- hero load (CSS only, plays without JS) ---- */
.lp-load { animation: lp-up 1s var(--lp-ease) both; animation-delay: calc(var(--d) * 110ms + 80ms); }
.lp-load-up { animation: lp-rise 1.15s var(--lp-ease) both; animation-delay: calc(var(--d) * 110ms + 80ms); }
.lp-load-up.lp-gold-text { animation: lp-rise 1.15s var(--lp-ease) both, lp-sheen 9s ease-in-out infinite; animation-delay: calc(var(--d) * 110ms + 80ms), 1.6s; }
.lp-load-fade { animation: lp-fade-in 1.6s ease both; animation-delay: calc(var(--d) * 110ms + 250ms); }
.lp-load-fade.lp-gold-text { animation: lp-fade-in 1.6s ease both, lp-sheen 9s ease-in-out infinite; animation-delay: calc(var(--d) * 110ms + 250ms), 1.6s; }
.lp-load-stage { animation: lp-stage-in 1.4s var(--lp-ease) .45s both; }

/* ================================================================ marquee */
.lp-marquee { position: relative; overflow: hidden; padding: 22px 0; border-top: 1px solid rgba(212, 175, 95, .1); border-bottom: 1px solid rgba(212, 175, 95, .1); background: #0d0b08; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.lp-marquee-track { display: flex; width: max-content; animation: lp-marquee 60s linear infinite; }
.lp-marquee:hover .lp-marquee-track { animation-play-state: paused; }
.lp-marquee-row { display: flex; gap: 12px; margin: 0; padding: 0 12px 0 0; list-style: none; }
.lp-marquee-row li { display: inline-flex; align-items: center; gap: 10px; height: 46px; padding: 0 20px 0 14px; border-radius: 14px; background: linear-gradient(180deg, #17140f, #120f0b); border: 1px solid var(--lp-ln); font-size: 15px; font-weight: 560; color: var(--lp-tx2); white-space: nowrap; }
.lp-marquee-row .icon { width: 19px; height: 19px; color: var(--lp-g3); }

/* ================================================================ sections */
.lp-sec { position: relative; padding: clamp(84px, 10.5vw, 156px) 0; }
.lp-sec::before { content: ""; position: absolute; left: 50%; top: 0; width: min(680px, 76%); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(212, 175, 95, .45), transparent); }
.lp-sec::after { content: ""; position: absolute; left: 50%; top: 0; width: 7px; height: 7px; margin: -3.5px 0 0 -3.5px; transform: rotate(45deg); background: var(--lp-gold); box-shadow: 0 0 14px rgba(236, 208, 142, .6); }
.lp-how::before, .lp-how::after { display: none; }

/* ---- how it works ---- */
.lp-how-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
.lp-how .lp-head { margin-bottom: 32px; }
.lp-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-width: 520px; }
.lp-steps button { position: relative; width: 100%; display: grid; grid-template-columns: 52px minmax(0, 1fr); align-items: center; gap: 12px; padding: 20px 22px; overflow: hidden; border-radius: 20px; border: 1px solid transparent; background: transparent; color: var(--lp-fa); font: inherit; text-align: left; cursor: pointer; transition: background .35s, border-color .35s, box-shadow .35s, color .35s; }
.lp-steps button:hover { background: rgba(212, 175, 95, .04); color: var(--lp-mu); }
.lp-steps button.is-active { background: linear-gradient(180deg, #19150f, #120f0b); border-color: var(--lp-ln2); box-shadow: inset 0 1px 0 rgba(247, 233, 198, .06), 0 30px 60px -36px rgba(0, 0, 0, .9); color: var(--lp-tx); }
.lp-steps-n { font: 600 14px/1 var(--font); letter-spacing: .08em; color: var(--lp-fa); font-variant-numeric: tabular-nums; transition: color .35s; }
.lp-steps button.is-active .lp-steps-n { color: var(--lp-g2); }
.lp-steps-t { font-size: clamp(18px, 1.55vw, 22px); font-weight: 600; letter-spacing: -.025em; }
.lp-steps-bar { position: absolute; left: 22px; right: 22px; bottom: 0; height: 2px; }
.lp-steps-bar i { display: block; width: 0; height: 100%; border-radius: 2px; background: linear-gradient(90deg, #b8883a, #f7e9c6); box-shadow: 0 0 10px rgba(236, 208, 142, .5); }
.lp-steps button.is-active .lp-steps-bar i { width: 100%; transition: width var(--dur, 0ms) linear; }

.lp-phone-wrap { position: relative; display: grid; place-items: center; padding: 10px 0; }
.lp-phone-glow { position: absolute; left: 50%; top: 50%; width: 600px; height: 600px; max-width: 100%; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(212, 167, 82, .26), rgba(184, 136, 58, .08) 45%, transparent 68%); }
.lp-phone { position: relative; width: 340px; height: 680px; overflow: hidden; border-radius: 56px; border: 11px solid #050403; background: #0e0c09; box-shadow: 0 0 0 1px rgba(236, 208, 142, .45), 0 0 0 3px #0b0a08, 0 0 0 4px rgba(212, 175, 95, .2), 0 70px 120px -50px rgba(0, 0, 0, 1), 0 0 100px -30px rgba(212, 167, 82, .35); }
.lp-phone-bar { position: absolute; top: 0; left: 0; right: 0; z-index: 3; height: 46px; display: flex; align-items: center; justify-content: space-between; padding: 0 26px 0 30px; font-size: 13.5px; font-weight: 600; color: var(--lp-tx); }
.lp-notch { position: absolute; left: 50%; top: 10px; width: 96px; height: 28px; margin-left: -48px; border-radius: 16px; background: #000; }
.lp-phone-sig { display: flex; align-items: flex-end; gap: 2px; height: 11px; }
.lp-phone-sig i { width: 3px; border-radius: 1px; background: var(--lp-tx); }
.lp-phone-sig i:nth-child(1) { height: 5px; }
.lp-phone-sig i:nth-child(2) { height: 8px; }
.lp-phone-sig i:nth-child(3) { height: 11px; }
.lp-screens { position: absolute; top: 46px; bottom: 0; left: 0; width: 300%; display: flex; transform: translateX(calc(var(--s) * -100% / 3)); transition: transform .85s var(--lp-ease), opacity .35s ease; }
.is-fading .lp-screens { opacity: 0; }
.lp-screen { position: relative; width: calc(100% / 3); height: 100%; display: flex; flex-direction: column; padding: 12px 20px 20px; }
.lp-s-title { margin: 6px 0 2px; font-size: 22px; font-weight: 640; letter-spacing: -.035em; color: var(--lp-tx); }
.lp-s-sub { margin: 0 0 18px; font-size: 13px; color: var(--lp-fa); }
.lp-s-sub b { color: var(--lp-g2); font-weight: 650; }
.lp-s-brand .pub-logo { width: 58px; margin: 18px 0 16px; }
.lp-s-field small, .lp-s-skel small { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 560; color: var(--lp-mu); }
.lp-s-input { display: flex; align-items: center; height: 52px; padding: 0 14px; border-radius: 14px; background: #17140f; border: 1px solid rgba(236, 208, 142, .65); box-shadow: 0 0 0 4px rgba(212, 167, 82, .12); font: 650 17px/1 var(--mono); letter-spacing: .14em; color: var(--lp-g1); }
.lp-caret { width: 2px; height: 22px; margin-left: 2px; background: var(--lp-g2); animation: lp-blink 1s steps(1) infinite; }
.lp-s-valid { display: inline-flex; align-items: center; gap: 6px; width: fit-content; height: 30px; margin-top: 12px; padding: 0 12px 0 8px; border-radius: 999px; background: rgba(212, 175, 95, .12); color: var(--lp-g2); font-size: 12.5px; font-weight: 600; opacity: 0; transform: translateY(6px) scale(.95); transition: opacity .4s, transform .5s var(--lp-ease); }
.lp-s-valid .icon { width: 15px; height: 15px; stroke-width: 2.6; }
.is-valid .lp-s-valid { opacity: 1; transform: none; }
.lp-s-skel { display: grid; gap: 6px; margin-top: 14px; }
.lp-s-skel small { margin: 8px 0 0; }
.lp-s-skel i { display: block; height: 46px; border-radius: 14px; background: #15120e; border: 1px solid var(--lp-ln); }
.lp-s-btn { display: grid; place-items: center; height: 50px; margin-top: auto; border-radius: 14px; background: var(--lp-gold-v); color: var(--lp-on-gold); font-size: 15px; font-weight: 650; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 12px 24px -12px rgba(212, 167, 82, .7); transition: transform .2s var(--lp-ease), filter .2s; }
.is-pressed-1 .lp-s-invite .lp-s-btn, .is-pressed-2 [data-start] { transform: scale(.95); filter: brightness(1.12); }
.lp-s-cards { display: grid; gap: 10px; }
.lp-s-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 16px; background: #15120e; border: 1px solid var(--lp-ln); transition: border-color .35s, box-shadow .35s, transform .45s var(--lp-ease); }
.is-picked [data-pick] { border-color: rgba(236, 208, 142, .7); box-shadow: 0 0 0 4px rgba(212, 167, 82, .12), 0 16px 30px -16px rgba(212, 167, 82, .5); transform: scale(1.025); }
.lp-s-grade { display: grid; place-items: center; width: 40px; height: 40px; flex: none; border-radius: 12px; font-size: 15px; font-weight: 720; }
.lp-s-grade.g-a { background: var(--lp-gold-v); color: var(--lp-on-gold); }
.lp-s-grade.g-b { background: rgba(212, 175, 95, .1); border: 1px solid var(--lp-ln2); color: var(--lp-g2); }
.lp-s-card-t { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.3; }
.lp-s-card-t b { font-size: 14.5px; font-weight: 620; color: var(--lp-tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-s-card-t small { font-size: 12px; color: var(--lp-fa); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-s-tick { display: grid; place-items: center; width: 24px; height: 24px; flex: none; margin-left: auto; border-radius: 50%; border: 1.5px solid var(--lp-ln2); color: transparent; transition: background .3s, border-color .3s, color .3s; }
.lp-s-tick .icon { width: 14px; height: 14px; stroke-width: 2.8; }
.is-picked [data-pick] .lp-s-tick { background: var(--lp-gold-v); border-color: var(--lp-g3); color: var(--lp-on-gold); }
.lp-s-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lp-s-done-badge { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px 0 7px; border-radius: 999px; background: var(--lp-gold-v); color: var(--lp-on-gold); font-size: 12px; font-weight: 650; opacity: 0; transform: scale(.7); transition: opacity .3s, transform .5s var(--lp-ease); }
.lp-s-done-badge .icon { width: 13px; height: 13px; stroke-width: 2.8; }
.is-complete .lp-s-done-badge { opacity: 1; transform: none; }
.lp-s-check .lp-s-sub { margin-bottom: 10px; }
.lp-s-progress { display: block; height: 6px; margin-bottom: 14px; overflow: hidden; border-radius: 3px; background: rgba(255, 255, 255, .07); }
.lp-s-progress i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #b8883a, #f7e9c6); transition: width .6s var(--lp-ease); }
.lp-s-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lp-s-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: #15120e; border: 1px solid rgba(212, 175, 95, .12); font-size: 13.5px; font-weight: 520; line-height: 1.3; color: var(--lp-tx2); transition: border-color .3s, box-shadow .3s, color .3s; }
.lp-s-lbl { flex: 1; min-width: 0; }
.lp-s-dot { display: grid; place-items: center; width: 22px; height: 22px; flex: none; border-radius: 50%; border: 1.5px solid var(--lp-ln2); color: transparent; transition: background .3s, border-color .3s, color .3s; }
.lp-s-dot .icon { width: 13px; height: 13px; stroke-width: 3; }
.lp-s-list li.is-done { color: var(--lp-fa); }
.lp-s-list li.is-done .lp-s-dot { background: var(--lp-gold-v); border-color: var(--lp-g3); color: var(--lp-on-gold); animation: lp-tick .5s var(--lp-ease); }
.lp-s-list li.is-now { border-color: rgba(236, 208, 142, .55); box-shadow: 0 0 0 3px rgba(212, 167, 82, .1); color: var(--lp-tx); }
.lp-s-list li.is-now .lp-s-dot { border-color: var(--lp-g2); }
.lp-s-media { display: none; width: 100%; gap: 6px; padding-left: 32px; }
.lp-s-list li.is-now > .lp-s-media { display: flex; animation: lp-up .5s var(--lp-ease) both; }
.lp-s-shot, .lp-s-vid { display: grid; place-items: center; width: 52px; height: 38px; border-radius: 9px; background: #221d15; color: var(--lp-g3); }
.lp-s-vid { background: #000; color: var(--lp-g1); border: 1px solid var(--lp-ln); }
.lp-s-vid .icon { width: 14px; height: 14px; fill: currentColor; }
.lp-s-shot .icon { width: 17px; height: 17px; }
.lp-s-open { display: inline-flex; align-items: center; gap: 5px; height: 38px; margin-left: auto; padding: 0 11px; border-radius: 10px; background: var(--lp-gold-v); color: var(--lp-on-gold); font-size: 12.5px; font-weight: 650; white-space: nowrap; }
.lp-s-open .icon { width: 14px; height: 14px; stroke-width: 2.2; }
.lp-s-stuck { display: inline-flex; align-items: center; gap: 7px; align-self: center; height: 38px; margin-top: auto; padding: 0 14px; border-radius: 12px; border: 1px solid var(--lp-ln2); background: #15120e; color: var(--lp-tx2); font-size: 13px; font-weight: 600; transition: transform .2s var(--lp-ease), background .2s, border-color .2s, color .2s; }
.lp-s-stuck .icon { width: 16px; height: 16px; color: var(--lp-g2); }
.is-stuck .lp-s-stuck { transform: scale(.93); background: rgba(212, 175, 95, .14); border-color: var(--lp-g3); color: var(--lp-g1); }
.lp-s-toast { position: absolute; left: 14px; right: 14px; bottom: 16px; display: flex; align-items: center; gap: 12px; padding: 14px; border-radius: 18px; background: var(--lp-tx); color: var(--lp-on-gold); box-shadow: 0 24px 40px -14px rgba(0, 0, 0, .9); opacity: 0; transform: translateY(130%); transition: transform .55s var(--lp-ease), opacity .3s; }
.is-toast .lp-s-toast { opacity: 1; transform: none; }
.lp-s-toast-ic { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 12px; background: var(--lp-gold-v); }
.lp-s-toast b { display: block; font-size: 14px; font-weight: 650; }
.lp-s-toast small { font-size: 12px; color: #6a5d45; }

/* ---- the vault: MirrorScore ---- */
.lp-dark { overflow: hidden; isolation: isolate; background: var(--lp-bg3); color: var(--lp-tx); }
.lp-dark-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.lp-dark-bg::after, .lp-cta-bg::after { content: ""; position: absolute; inset: 0; opacity: .06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.lp-dark-glow { position: absolute; left: 50%; top: -300px; width: 1300px; height: 900px; margin-left: -650px; background: radial-gradient(ellipse at center, rgba(212, 167, 82, .3), rgba(184, 136, 58, .1) 40%, transparent 68%); animation: lp-glow 12s ease-in-out infinite alternate; }
.lp-dark-lines { position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(212, 175, 95, .05) 1px, transparent 1px); background-size: 108px 100%; background-position: center; -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent); mask-image: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent); }
.lp-score .lp-head { text-align: center; margin-left: auto; margin-right: auto; }
.lp-score .lp-lead { margin: 0 auto; }
.lp-score-stage { transform-origin: 50% 0; transform: perspective(1800px) rotateX(calc(var(--tilt, 0) * 16deg)) scale(calc(1 - var(--tilt, 0) * .06)); will-change: transform; }
.lp-score-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 16px; padding: 16px; border-radius: 34px; background: linear-gradient(180deg, rgba(36, 30, 21, .55), rgba(16, 13, 10, .4)); border: 1px solid var(--lp-ln2); box-shadow: inset 0 1px 0 rgba(247, 233, 198, .08), 0 80px 140px -50px rgba(0, 0, 0, 1), 0 0 140px -50px rgba(212, 167, 82, .45); }
.lp-sc, .lp-rank { min-width: 0; padding: 24px; border-radius: 24px; background: rgba(8, 7, 5, .82); border: 1px solid rgba(212, 175, 95, .12); }
.lp-sc { display: flex; flex-direction: column; }
.lp-sc-top { display: flex; align-items: center; gap: 12px; }
.lp-sc-state { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 12px; flex: none; border-radius: 999px; background: rgba(212, 175, 95, .06); border: 1px solid var(--lp-ln); color: var(--lp-tx2); font-size: 12.5px; font-weight: 560; }
.lp-sc-state i { width: 7px; height: 7px; border-radius: 50%; background: var(--lp-g2); box-shadow: 0 0 8px rgba(236, 208, 142, .7); }
.lp-sc-a { display: none; }
.is-pending .lp-sc-a { display: inline; }
.is-pending .lp-sc-b { display: none; }
.is-pending .lp-sc-state i { background: var(--lp-fa); box-shadow: none; animation: lp-breathe .8s ease-in-out infinite; }
.lp-sc-body { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 32px; align-items: center; margin: 24px 0 22px; }
.lp-gauge { position: relative; width: 210px; aspect-ratio: 1; }
.lp-gauge svg { width: 100%; height: 100%; transform: rotate(135deg); overflow: visible; }
.lp-gauge circle { fill: none; stroke-width: 13; stroke-linecap: round; }
.lp-gauge-trk { stroke: rgba(212, 175, 95, .09); stroke-dasharray: 75 100; }
.lp-gauge-val { stroke-dasharray: 66 100; filter: drop-shadow(0 0 10px rgba(236, 208, 142, .5)); transition: stroke-dasharray 1.7s var(--lp-ease); }
.is-pending:not(.is-computing) .lp-gauge-val { stroke-dasharray: 0 100; opacity: 0; transition: none; }
.lp-gauge-in { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.lp-gauge-in b { font-size: 76px; line-height: 1; font-weight: 700; letter-spacing: -.06em; font-variant-numeric: tabular-nums; background: linear-gradient(180deg, #fbf3dc 10%, #ecd08e 55%, #c3913f 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding: 0 .04em; }
.lp-gauge-in small { margin-top: 8px; font-size: 10.5px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--lp-g3); }
.is-graded .lp-gauge-in b { animation: lp-grade-pop .7s var(--lp-ease); }
.lp-factors { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.lp-factors li { display: grid; grid-template-columns: minmax(96px, 128px) minmax(0, 1fr) 30px; align-items: center; gap: 12px; font-size: 13.5px; color: var(--lp-mu); }
.lp-factors li > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-factors i { display: block; height: 6px; overflow: hidden; border-radius: 3px; background: rgba(212, 175, 95, .09); }
.lp-factors i b { display: block; width: calc(var(--v) * 100%); height: 100%; border-radius: 3px; background: linear-gradient(90deg, #8f6a2c, #d4a752 55%, #f7e9c6); transform-origin: left; transition: transform 1.1s var(--lp-ease) calc(var(--k) * .14s); }
.is-pending:not(.is-computing) .lp-factors i b { transform: scaleX(0); transition: none; }
.lp-factors em { font-style: normal; font-size: 13px; font-weight: 700; text-align: right; }
.lp-factors em.g-a { color: var(--lp-g1); }
.lp-factors em.g-b { color: var(--lp-g3); }
.lp-factors .lp-factor-flags { grid-template-columns: minmax(96px, 128px) minmax(0, 1fr); padding-top: 12px; border-top: 1px solid rgba(212, 175, 95, .1); }
.lp-ok { display: inline-flex; align-items: center; gap: 6px; font-style: normal; color: var(--lp-g2) !important; font-weight: 560 !important; text-align: left !important; }
.lp-ok .icon { width: 15px; height: 15px; stroke-width: 2.4; }
.lp-sc-scale { margin-top: auto; padding: 4px 4px 0; }
.lp-sc-bar { position: relative; display: block; height: 6px; margin-top: 30px; border-radius: 3px; background: linear-gradient(90deg, #a8463a 0%, #b9783f 36%, #d4a752 68%, #f7e9c6 100%); }
.lp-sc-bar i { position: absolute; top: 50%; left: calc(var(--at) * 100%); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--lp-g1); box-shadow: 0 0 0 4px rgba(212, 167, 82, .3), 0 0 18px rgba(236, 208, 142, .7); transition: left 1.7s var(--lp-ease); }
.lp-sc-bar b { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translateX(-50%); padding: 3px 8px; border-radius: 8px; background: var(--lp-gold-v); color: var(--lp-on-gold); font-size: 12px; font-weight: 720; white-space: nowrap; }
.is-pending:not(.is-computing) .lp-sc-bar i { left: 0; transition: none; }
.is-pending .lp-sc-bar b { opacity: 0; }
.lp-sc-ends { display: flex; justify-content: space-between; margin-top: 12px; font: 600 11.5px var(--font); letter-spacing: .1em; color: var(--lp-fa); }
.lp-rank-h { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.lp-rank-h b { font-size: 15px; font-weight: 620; color: var(--lp-tx); }
.lp-rank-h small { padding: 3px 10px; border-radius: 999px; border: 1px dashed var(--lp-ln2); font-size: 11.5px; font-weight: 560; color: var(--lp-fa); }
.lp-rank-body { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; --rh: 62px; --rg: 10px; }
.lp-rank-nums { list-style: none; margin: 0; padding: 0; display: grid; grid-auto-rows: var(--rh); gap: var(--rg); }
.lp-rank-nums li { display: grid; place-items: center; font: 600 13px var(--font); color: var(--lp-g4); font-variant-numeric: tabular-nums; }
.lp-rank-rows { position: relative; height: calc(5 * var(--rh) + 4 * var(--rg)); }
.lp-rrow { position: absolute; left: 0; right: 0; top: 0; height: var(--rh); display: flex; align-items: center; gap: 12px; padding: 0 10px 0 16px; border-radius: 16px; background: #120f0b; border: 1px solid rgba(212, 175, 95, .1); transform: translateY(calc(var(--pos) * (var(--rh) + var(--rg)))); transition: transform 1s var(--lp-ease), background .4s; }
.lp-rrow[data-final="0"] { z-index: 1; background: linear-gradient(90deg, rgba(212, 167, 82, .2), rgba(212, 167, 82, .04)), #120f0b; border-color: rgba(236, 208, 142, .4); }
.lp-rrow-t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.lp-rrow-t b { font-size: 14.5px; font-weight: 600; color: var(--lp-tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-rrow-t small { font-size: 12px; color: var(--lp-fa); }
.lp-flag { display: inline-flex; align-items: center; gap: 5px; color: #ec9a86 !important; font-weight: 560; }
.lp-flag .icon { width: 13px; height: 13px; }
.lp-rgrade { display: grid; place-items: center; min-width: 46px; height: 38px; margin-left: auto; padding: 0 8px; flex: none; border-radius: 12px; font-size: 16px; font-weight: 720; transition: color .4s, background .4s; }
.lp-rgrade.g-a { background: var(--lp-gold-v); color: var(--lp-on-gold); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), 0 0 24px -6px rgba(236, 208, 142, .7); }
.lp-rgrade.g-b { background: rgba(212, 175, 95, .12); color: var(--lp-g2); }
.lp-rgrade.g-c { background: rgba(185, 120, 63, .16); color: #d9a06a; }
.lp-rgrade.g-f { background: rgba(224, 123, 101, .14); color: #ec9a86; }
.is-pending .lp-rgrade { color: transparent; background: linear-gradient(90deg, rgba(212, 175, 95, .05), rgba(212, 175, 95, .16), rgba(212, 175, 95, .05)); background-size: 200% 100%; box-shadow: none; animation: lp-shimmer 1.2s linear infinite; }

/* ---- downside: stress test + member results ---- */
.lp-down-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 20px; }
.lp-stress-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 20px; }
.lp-stress-in > span { min-width: 0; padding: 10px 14px; border-radius: 14px; background: var(--lp-cell); border: 1px solid rgba(212, 175, 95, .1); }
.lp-stress-in small { display: block; font-size: 11.5px; color: var(--lp-fa); }
.lp-stress-in b { display: block; font-size: 15px; font-weight: 620; color: var(--lp-tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-fan-box { position: relative; height: 270px; }
.lp-fan { width: 100%; height: 100%; overflow: visible; }
.lp-fan-grid path { fill: none; stroke: rgba(212, 175, 95, .07); stroke-width: 1; vector-effect: non-scaling-stroke; }
.lp-fan-edge { fill: none; stroke: var(--lp-g3); stroke-width: 1.4; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.lp-fan-edge-lo { stroke: var(--lp-neg); opacity: .8; }
.lp-fan-med { fill: none; stroke: var(--lp-g1); stroke-width: 3; stroke-linecap: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 6px rgba(236, 208, 142, .5)); }
.lp-fan-dep { stroke: var(--lp-tx); stroke-width: 1.2; stroke-dasharray: 6 6; opacity: .35; vector-effect: non-scaling-stroke; }
.lp-fan-data { clip-path: inset(0 0 0 0); transition: clip-path 2.2s var(--lp-ease) .2s; }
.lp-js .lp-stress:not(.is-in) .lp-fan-data { clip-path: inset(0 100% 0 0); }
.lp-fan-lab, .lp-fan-dep-lab { position: absolute; transform: translateY(-50%); padding: 4px 9px; border-radius: 8px; font-size: 12px; font-weight: 620; white-space: nowrap; transition: opacity .6s 1.8s; }
.lp-js .lp-stress:not(.is-in) .lp-fan-lab { opacity: 0; }
.lp-fan-lab { right: 8px; background: #17140f; border: 1px solid var(--lp-ln2); box-shadow: 0 10px 20px -12px rgba(0, 0, 0, .9); }
.lp-fan-lab-hi { top: 12.7%; color: var(--lp-g2); transform: translateY(-15%); }
.lp-fan-lab-mid { top: 49.9%; color: var(--lp-tx); }
.lp-fan-lab-lo { top: 77.1%; color: #ec9a86; transform: translateY(-85%); }
.lp-fan-dep-lab { left: 8px; top: 59.2%; transform: translateY(-130%); padding: 0; color: var(--lp-fa); font-weight: 560; }
.lp-fan-scrub { position: absolute; top: 0; bottom: 0; left: 0; width: 0; opacity: 0; }
.lp-fan-scrub i { position: absolute; left: -6px; top: 59.2%; width: 12px; height: 12px; margin-top: -6px; border-radius: 50%; background: var(--lp-g1); box-shadow: 0 0 0 4px rgba(212, 167, 82, .25), 0 0 16px rgba(236, 208, 142, .8); }
.lp-stress.is-in .lp-fan-scrub { animation: lp-scrub 7s ease-in-out 2.6s infinite; }
.lp-stress.is-in .lp-fan-scrub i { animation: lp-scrub-dot 7s ease-in-out 2.6s infinite; }
.lp-fan-axis { display: flex; justify-content: space-between; margin-top: 10px; font-size: 12px; color: var(--lp-fa); font-weight: 520; }

.lp-results { display: flex; flex-direction: column; }
.lp-dots { --ys: 12.5px; position: relative; flex: 1; min-height: 280px; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); padding: 0 0 28px 34px; }
.lp-dots-zero { position: absolute; left: 34px; right: 0; top: calc((100% - 28px) / 2); border-top: 1px dashed rgba(212, 175, 95, .3); }
.lp-dots-zero small { position: absolute; left: -34px; top: -9px; font-size: 11px; color: var(--lp-fa); font-weight: 560; }
.lp-dots-col { position: relative; }
.lp-dots-col i { position: absolute; left: 50%; top: 50%; width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%; transform: translate(calc(var(--x) * 1px), calc(var(--y) * var(--ys) * -1)); transition: transform .9s var(--lp-ease), opacity .5s; transition-delay: calc(var(--c) * 90ms + var(--k) * 35ms); }
.lp-dots-col i.pos { background: radial-gradient(circle at 35% 30%, #f7e9c6, #d4a752 60%, #a5772b); box-shadow: 0 0 0 2px #110f0b; }
.lp-dots-col i.neg { background: #d9705b; box-shadow: 0 0 0 2px #110f0b; }
.lp-js .lp-results:not(.is-in) .lp-dots-col i { opacity: 0; transform: translate(calc(var(--x) * 1px), -140px); }
.lp-dots-med { position: absolute; left: 50%; top: 50%; width: 40px; height: 2px; margin: -1px 0 0 -20px; border-radius: 2px; background: var(--lp-tx); box-shadow: 0 0 8px rgba(246, 241, 231, .5); transform: translateY(calc(var(--y) * var(--ys) * -1)); transition: opacity .5s 1.2s; }
.lp-js .lp-results:not(.is-in) .lp-dots-med { opacity: 0; }
.lp-dots-col small { position: absolute; left: 0; right: 0; bottom: -26px; text-align: center; font-size: 12px; color: var(--lp-fa); font-weight: 520; }
.lp-results-f { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(212, 175, 95, .1); }
.lp-legend { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: var(--lp-mu); font-weight: 520; }
.lp-legend i { width: 10px; height: 10px; border-radius: 50%; }
.lp-legend i.pos { background: var(--lp-g3); }
.lp-legend i.neg { background: #d9705b; }
.lp-legend i.med { width: 16px; height: 2px; border-radius: 2px; background: var(--lp-tx); }
.lp-log { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; height: 34px; padding: 0 12px; border-radius: 10px; border: 1px solid var(--lp-ln3); color: var(--lp-g1); font-size: 12.5px; font-weight: 600; }
.lp-log .icon { width: 15px; height: 15px; }

/* ---- markets ---- */
.lp-markets { background: var(--lp-bg2); }
.lp-mk { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 20px; }
.lp-mk-cond { grid-row: span 2; }
.lp-mk-head, .lp-mk-rows li { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(70px, 110px) 116px 128px; align-items: center; gap: 16px; }
.lp-mk-head { padding: 0 12px 10px; border-bottom: 1px solid rgba(212, 175, 95, .12); font-size: 10.5px; font-weight: 620; letter-spacing: .14em; text-transform: uppercase; color: var(--lp-fa); }
.lp-mk-rows { list-style: none; margin: 0; padding: 0; }
.lp-mk-rows li { position: relative; padding: 13px 12px; border-bottom: 1px solid rgba(212, 175, 95, .07); border-radius: 12px; transition: background .5s, opacity .6s var(--lp-ease), transform .7s var(--lp-ease); transition-delay: 0s, calc(var(--k) * 70ms), calc(var(--k) * 70ms); }
.lp-mk-rows li:last-child { border-bottom: 0; }
.lp-mk-rows li.is-hot { background: rgba(212, 175, 95, .07); }
.lp-js .lp-mk:not(.is-in) .lp-mk-rows li { opacity: 0; transform: translateX(-14px); }
.lp-mk-name { min-width: 0; }
.lp-mk-name b { display: block; font-size: 15px; font-weight: 620; color: var(--lp-tx); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-mk-name small { display: block; font-size: 12.5px; color: var(--lp-fa); }
.lp-mk-spark { width: 100%; height: 28px; overflow: visible; }
.lp-mk-spark path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.5s var(--lp-ease) calc(.3s + var(--k) * .12s); }
.lp-js .lp-mk:not(.is-in) .lp-mk-spark path { stroke-dashoffset: 1; }
.lp-mk-up path { stroke: var(--lp-g2); }
.lp-mk-down path { stroke: var(--lp-neg); }
.lp-mk-side path { stroke: var(--lp-fa); }
.lp-trend { display: inline-flex; align-items: center; gap: 6px; width: fit-content; height: 28px; padding: 0 10px 0 8px; border-radius: 8px; font-size: 12.5px; font-weight: 620; white-space: nowrap; }
.lp-trend .icon { width: 14px; height: 14px; stroke-width: 2.2; }
.lp-trend-up { background: rgba(212, 175, 95, .12); color: var(--lp-g2); }
.lp-trend-down { background: rgba(224, 123, 101, .12); color: #ec9a86; }
.lp-trend-side { background: rgba(185, 176, 160, .09); color: var(--lp-mu); }
.lp-vol { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lp-vol small { font-size: 12.5px; color: var(--lp-mu); font-weight: 520; white-space: nowrap; }
.lp-vol-bars { display: flex; align-items: flex-end; gap: 3px; height: 16px; }
.lp-vol-bars i { width: 5px; border-radius: 2px; background: rgba(212, 175, 95, .12); transition: background .4s; transition-delay: calc(var(--k) * 70ms + .5s); }
.lp-vol-bars i:nth-child(1) { height: 6px; }
.lp-vol-bars i:nth-child(2) { height: 8.5px; }
.lp-vol-bars i:nth-child(3) { height: 11px; }
.lp-vol-bars i:nth-child(4) { height: 13.5px; }
.lp-vol-bars i:nth-child(5) { height: 16px; }
.lp-vol-1 i:nth-child(-n+1), .lp-vol-2 i:nth-child(-n+2), .lp-vol-3 i:nth-child(-n+3), .lp-vol-4 i:nth-child(-n+4) { background: var(--lp-g3); }
.lp-js .lp-mk:not(.is-in) .lp-vol-bars i { background: rgba(212, 175, 95, .12); }

.lp-cal-day { margin: 0 0 8px; font-size: 10.5px; font-weight: 640; letter-spacing: .16em; text-transform: uppercase; color: var(--lp-fa); }
.lp-cal { list-style: none; margin: 0 0 16px; padding: 0; display: grid; gap: 6px; }
.lp-cal:last-child { margin-bottom: 0; }
.lp-cal li { display: grid; grid-template-columns: 44px 42px minmax(0, 1fr) auto; align-items: center; gap: 4px 10px; padding: 10px 12px; border-radius: 13px; background: var(--lp-cell); border: 1px solid rgba(212, 175, 95, .09); font-size: 13.5px; }
.lp-cal li.is-next { background: rgba(212, 175, 95, .06); border-color: rgba(236, 208, 142, .4); box-shadow: 0 0 30px -12px rgba(212, 167, 82, .5); }
.lp-cal time { font: 600 13px var(--mono); color: var(--lp-tx); }
.lp-ccy { padding: 3px 0; border-radius: 6px; background: var(--lp-tx); color: var(--lp-on-gold); font: 700 10.5px var(--mono); letter-spacing: .04em; text-align: center; }
.lp-ccy-eur { background: var(--lp-gold-v); }
.lp-cal-ev { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 520; color: var(--lp-tx2); }
.lp-impact { display: flex; gap: 2px; }
.lp-impact i { width: 4px; height: 14px; border-radius: 2px; background: rgba(212, 175, 95, .14); }
.lp-imp-3 i { background: var(--lp-neg); }
.lp-imp-2 i:nth-child(-n+2) { background: var(--lp-g3); }
.lp-count { grid-column: 3 / -1; font: 600 12px var(--mono); color: var(--lp-g2); }
.lp-news { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.lp-news li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; background: var(--lp-cell); border: 1px solid rgba(212, 175, 95, .09); }
.lp-news-t { font-size: 13.5px; font-weight: 520; line-height: 1.38; color: var(--lp-tx2); }
.lp-senti { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 620; white-space: nowrap; }
.lp-senti i { position: relative; width: 26px; height: 6px; overflow: hidden; border-radius: 3px; background: rgba(212, 175, 95, .12); }
.lp-senti i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--s) * 100%); border-radius: 3px; background: currentColor; transform-origin: left; transition: transform 1s var(--lp-ease) calc(.6s + var(--k) * .15s); }
.lp-js .lp-mk:not(.is-in) .lp-senti i::after { transform: scaleX(0); }
.lp-senti-pos { color: var(--lp-g2); }
.lp-senti-neg { color: #ec9a86; }
.lp-senti-neu { color: var(--lp-mu); }

/* ---- academy ---- */
.lp-bento { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr) minmax(0, 1fr); gap: 20px; }
.lp-panel.lp-lessons { grid-row: span 2; display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.lp-dd { grid-column: span 2; }
.lp-lesson-hero { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--lp-ln); background: radial-gradient(120% 90% at 85% 0%, rgba(236, 208, 142, .3), transparent 55%), linear-gradient(140deg, #120f0a 0%, #2a2113 55%, #5a4520 100%); }
.lp-lesson-hero > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp-lesson-hero > svg path { fill: none; stroke: rgba(247, 233, 198, .6); stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.lp-lesson-hero > svg path.b { stroke: rgba(212, 175, 95, .3); }
.lp-play { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; width: 66px; height: 66px; margin: -33px 0 0 -33px; border-radius: 50%; background: var(--lp-gold-v); color: var(--lp-on-gold); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 0 8px rgba(212, 167, 82, .14), 0 18px 40px rgba(0, 0, 0, .6); transition: transform .4s var(--lp-ease); }
.lp-play .icon { width: 24px; height: 24px; margin-left: 3px; fill: currentColor; }
.lp-lessons:hover .lp-play { transform: scale(1.08); }
.lp-lesson-tag, .lp-lesson-time { position: absolute; top: 16px; display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 9px; background: rgba(0, 0, 0, .4); border: 1px solid rgba(236, 208, 142, .25); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--lp-g1); font-size: 12.5px; font-weight: 600; }
.lp-lesson-tag { left: 16px; }
.lp-lesson-time { right: 16px; }
.lp-lesson-time .icon { width: 14px; height: 14px; }
.lp-lesson-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.lp-lesson-title { font-size: 21px; font-weight: 620; letter-spacing: -.03em; color: var(--lp-tx); }
.lp-lesson-prog { display: block; height: 5px; margin: 12px 0 18px; overflow: hidden; border-radius: 3px; background: rgba(212, 175, 95, .1); }
.lp-lesson-prog::after { content: ""; display: block; width: 45%; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #b8883a, #f7e9c6); transform-origin: left; transition: transform 1.6s var(--lp-ease) .4s; }
.lp-js .lp-lessons:not(.is-in) .lp-lesson-prog::after { transform: scaleX(0); }
.lp-lesson-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.lp-lesson-list li { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 11px; font-size: 14px; font-weight: 520; color: var(--lp-fa); }
.lp-lesson-list .icon { width: 16px; height: 16px; flex: none; }
.lp-lesson-list li.is-done { color: var(--lp-mu); }
.lp-lesson-list li.is-done .icon { color: var(--lp-g3); stroke-width: 2.4; }
.lp-lesson-list li.is-now { background: rgba(212, 175, 95, .08); color: var(--lp-tx); }
.lp-lesson-list li.is-now .icon { color: var(--lp-g2); fill: currentColor; }
.lp-gloss { display: flex; flex-direction: column; }
.lp-gloss-search { display: flex; align-items: center; gap: 8px; height: 40px; margin-bottom: 18px; padding: 0 12px; border-radius: 12px; background: var(--lp-cell); border: 1px solid var(--lp-ln); color: var(--lp-fa); font-size: 13.5px; }
.lp-gloss-search .icon { width: 16px; height: 16px; color: var(--lp-g3); }
.lp-gloss-search kbd { margin-left: auto; padding: 1px 6px; border-radius: 5px; border: 1px solid var(--lp-ln2); background: transparent; font: 600 11px var(--mono); color: var(--lp-mu); }
.lp-gloss-stage { position: relative; flex: 1; min-height: 122px; }
.lp-term { position: absolute; inset: 0; opacity: 0; transform: translateY(18px); transition: opacity .45s, transform .7s var(--lp-ease); }
.lp-term.is-on { opacity: 1; transform: none; }
.lp-term b { display: block; margin-bottom: 8px; font-size: 32px; font-weight: 620; letter-spacing: -.04em; color: var(--lp-tx); }
.lp-term p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--lp-mu); }
.lp-gloss-dots { display: flex; gap: 6px; margin-top: 12px; }
.lp-gloss-dots i { width: 6px; height: 6px; border-radius: 3px; background: rgba(212, 175, 95, .2); transition: width .45s var(--lp-ease), background .45s; }
.lp-gloss-dots i.is-on { width: 22px; background: var(--lp-g2); }
.lp-calc { display: flex; flex-direction: column; }
.lp-calc-in { display: grid; gap: 6px; margin: 0; }
.lp-calc-in > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 12px; border-radius: 12px; background: var(--lp-cell); border: 1px solid rgba(212, 175, 95, .1); font-size: 13.5px; }
.lp-calc-in dt { color: var(--lp-fa); white-space: nowrap; }
.lp-calc-in dd { margin: 0; font-weight: 620; color: var(--lp-tx); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lp-calc-in dd small { font-weight: 500; color: var(--lp-fa); }
.lp-calc-in dd.is-flip, .lp-calc-out b.is-flip { animation: lp-flip .5s var(--lp-ease); }
.lp-calc-out { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-top: auto; padding: 14px 16px; border-radius: 16px; background: var(--lp-gold-v); color: var(--lp-on-gold); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 16px 34px -16px rgba(212, 167, 82, .7); }
.lp-calc-out::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-20deg); animation: lp-btn-sheen 8s ease-in-out 3s infinite; }
.lp-calc-in + .lp-calc-out { margin-top: 10px; }
.lp-calc-out small { font-size: 12.5px; font-weight: 600; color: rgba(26, 19, 9, .7); }
.lp-calc-out b { display: inline-block; font-size: 28px; font-weight: 720; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.lp-dd-rows { --sc: 82%; list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 12px; }
.lp-dd-rows li { display: grid; grid-template-columns: minmax(0, 1fr) 30px minmax(0, 1fr); align-items: center; gap: 8px; }
.lp-dd-l, .lp-dd-g { position: relative; height: 36px; }
.lp-dd-l i, .lp-dd-g i { position: absolute; top: 0; bottom: 0; transition: transform 1.1s var(--lp-ease) calc(.2s + var(--k) * .15s); }
.lp-dd-l i { right: 0; width: calc(var(--l) * var(--sc)); border-radius: 10px 4px 4px 10px; background: linear-gradient(270deg, rgba(224, 123, 101, .45), rgba(224, 123, 101, .12)); transform-origin: right; }
.lp-dd-g i { left: 0; width: calc(var(--g) * var(--sc)); border-radius: 4px 10px 10px 4px; background: linear-gradient(90deg, rgba(212, 167, 82, .55), rgba(236, 208, 142, .14)); transform-origin: left; }
.lp-js .lp-dd:not(.is-in) .lp-dd-l i, .lp-js .lp-dd:not(.is-in) .lp-dd-g i { transform: scaleX(0); }
.lp-dd-l em, .lp-dd-g em { position: absolute; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lp-dd-l em { right: calc(var(--l) * var(--sc) + 10px); color: #ec9a86; }
.lp-dd-g em { left: calc(var(--g) * var(--sc) + 10px); color: var(--lp-g2); }
.lp-dd-mid { display: grid; place-items: center; color: var(--lp-fa); }
.lp-dd-mid .icon { width: 16px; height: 16px; }
.lp-dd-axis { display: grid; grid-template-columns: 1fr 30px 1fr; gap: 8px; margin-top: 12px; font-size: 10.5px; font-weight: 620; letter-spacing: .14em; text-transform: uppercase; color: var(--lp-fa); }
.lp-dd-axis span:first-child { text-align: right; }
.lp-dd-axis span:last-child { grid-column: 3; }

/* ---- community ---- */
.lp-comm { background: var(--lp-bg2); }
.lp-comm-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.lp-chat { display: grid; grid-template-columns: 208px minmax(0, 1fr); min-width: 0; overflow: hidden; border-radius: 26px; background: #110f0b; border: 1px solid var(--lp-ln); box-shadow: var(--lp-sh2); }
.lp-chat-side { display: flex; flex-direction: column; gap: 2px; padding: 18px 12px; background: #0d0b08; border-right: 1px solid rgba(212, 175, 95, .1); }
.lp-chat-side small { margin: 4px 10px 6px; font-size: 10.5px; font-weight: 640; letter-spacing: .16em; text-transform: uppercase; color: var(--lp-fa); }
.lp-chat-side small:not(:first-child) { margin-top: 18px; }
.lp-chat-side span { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; font-size: 14px; font-weight: 520; color: var(--lp-fa); white-space: nowrap; overflow: hidden; }
.lp-chat-side span .icon { width: 15px; height: 15px; flex: none; }
.lp-chat-side span.is-on { background: rgba(212, 175, 95, .09); color: var(--lp-tx); box-shadow: inset 0 0 0 1px rgba(212, 175, 95, .16); }
.lp-chat-side span.is-on .icon { color: var(--lp-g2); }
.lp-unread { width: 7px; height: 7px; margin-left: auto; flex: none; border-radius: 50%; background: var(--lp-g2); box-shadow: 0 0 8px rgba(236, 208, 142, .7); }
.lp-chat-main { display: flex; flex-direction: column; min-width: 0; }
.lp-chat-h { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid rgba(212, 175, 95, .1); }
.lp-chat-h b { display: inline-flex; align-items: center; gap: 6px; font-weight: 620; color: var(--lp-tx); min-width: 0; }
.lp-chat-h b .icon { width: 16px; height: 16px; color: var(--lp-g2); }
.lp-chat-tag { padding: 3px 9px; border-radius: 999px; background: rgba(212, 175, 95, .1); color: var(--lp-g2); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.lp-chat-log { flex: 1; min-height: 360px; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; padding: 20px 22px; }
.lp-msg { display: flex; gap: 12px; }
.lp-msg.is-hidden { display: none; }
.lp-msg.is-new { animation: lp-msg-in .6s var(--lp-ease) both; }
.lp-msg > div { min-width: 0; }
.lp-msg-av { display: grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 12px; background: #221d15; border: 1px solid var(--lp-ln); color: var(--lp-g2); font-size: 14px; font-weight: 650; }
.lp-msg-av-staff { background: #17140f; border-color: var(--lp-ln2); }
.lp-msg-av-staff .pub-logo { width: 24px; filter: none; }
.lp-msg-m { display: flex; align-items: center; gap: 8px; margin: 0 0 2px; font-size: 12.5px; color: var(--lp-fa); }
.lp-msg-m b { font-size: 14px; font-weight: 620; color: var(--lp-tx); }
.lp-staff { padding: 2px 6px; border-radius: 5px; background: rgba(212, 175, 95, .12); color: var(--lp-g2); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.lp-msg-t { margin: 0; font-size: 14.5px; line-height: 1.45; color: var(--lp-tx2); }
.lp-typing { display: none; align-items: center; gap: 12px; padding-left: 48px; }
.lp-typing.is-on { display: flex; animation: lp-msg-in .4s var(--lp-ease) both; }
.lp-typing-dots { display: inline-flex; gap: 4px; padding: 12px 14px; border-radius: 14px; background: #1b1712; border: 1px solid rgba(212, 175, 95, .1); }
.lp-typing-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--lp-g3); animation: lp-typing 1.2s ease-in-out infinite; }
.lp-typing-dots i:nth-child(2) { animation-delay: .15s; }
.lp-typing-dots i:nth-child(3) { animation-delay: .3s; }
.lp-chat-in { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 50px; margin: 0 16px 16px; padding: 0 6px 0 16px; border-radius: 14px; background: #0d0b08; border: 1px solid var(--lp-ln); color: var(--lp-fa); font-size: 14px; }
.lp-chat-in > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-chat-send { display: grid; place-items: center; width: 38px; height: 38px; flex: none; border-radius: 11px; background: var(--lp-gold-v); color: var(--lp-on-gold); }
.lp-chat-send .icon { width: 17px; height: 17px; stroke-width: 2; }
.lp-comm-side { display: grid; grid-auto-rows: 1fr; gap: 14px; min-width: 0; }
.lp-mini { display: flex; align-items: center; gap: 14px; padding: 18px; border-radius: 22px; }
.lp-mini .lp-card-t small { margin-bottom: 2px; font-size: 10.5px; font-weight: 640; letter-spacing: .14em; text-transform: uppercase; color: var(--lp-g4); }
.lp-mini .lp-card-t b { font-size: 15px; }
.lp-date { display: grid; place-content: center; width: 48px; height: 48px; flex: none; border-radius: 14px; background: var(--lp-gold-v); color: var(--lp-on-gold); text-align: center; line-height: 1.15; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5); }
.lp-date small { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(26, 19, 9, .7); }
.lp-date b { font-size: 13.5px; font-weight: 700; }
.lp-mini-btn { display: grid; place-items: center; width: 38px; height: 38px; flex: none; margin-left: auto; border-radius: 11px; border: 1px solid var(--lp-ln2); color: var(--lp-g2); }
.lp-mini-btn .icon { width: 17px; height: 17px; }
.lp-mini .lp-mono { font-size: 13px !important; font-weight: 520 !important; color: var(--lp-tx2) !important; }
.lp-replied { display: inline-flex; align-items: center; gap: 5px; flex: none; margin-left: auto; padding: 5px 9px; border-radius: 8px; background: rgba(212, 175, 95, .12); color: var(--lp-g2); font-size: 12px; font-weight: 620; white-space: nowrap; }
.lp-replied .icon { width: 14px; height: 14px; stroke-width: 2.6; }

/* ---- €0 ---- */
.lp-free { overflow: hidden; }
.lp-free-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 56px; align-items: center; }
.lp-zero { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; }
.lp-zero::before { content: ""; position: absolute; left: 50%; top: 42%; z-index: -1; width: 130%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(circle, rgba(212, 167, 82, .26), rgba(184, 136, 58, .08) 42%, transparent 68%); }
.lp-zero-num { display: flex; align-items: flex-start; font-size: clamp(180px, 25vw, 360px); font-weight: 700; line-height: .8; letter-spacing: -.07em; padding-right: .06em; background-image: var(--lp-brush), var(--lp-gold-text); background-size: 100% 100%, 260% 100%; background-position: 0 0, 100% 0; -webkit-background-clip: text; background-clip: text; color: transparent; animation: lp-sheen 9s ease-in-out 1s infinite; }
.lp-zero-e { margin: .08em .02em 0 0; font-size: .4em; letter-spacing: 0; }
.lp-zero-reflect { font-size: clamp(180px, 25vw, 360px); height: .3em; overflow: hidden; margin-top: .03em; -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .32), transparent 95%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .32), transparent 95%); }
.lp-zero-reflect > .lp-zero-num { font-size: 1em; transform: scaleY(-1); filter: blur(1.2px); }
.lp-free .lp-head { margin-bottom: 32px; }
.lp-receipt { max-width: 580px; padding: 26px 26px 22px; border-radius: 26px; background: linear-gradient(180deg, #17140f, #100e0a); border: 1px solid var(--lp-ln2); box-shadow: var(--lp-sh2); }
.lp-receipt-h { margin: 0 0 6px; font: 600 11px var(--font); letter-spacing: .2em; text-transform: uppercase; color: var(--lp-g3); }
.lp-receipt ul { list-style: none; margin: 0; padding: 0; }
.lp-receipt li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px dashed rgba(212, 175, 95, .18); font-size: 15px; color: var(--lp-tx2); transition: opacity .6s, transform .7s var(--lp-ease); transition-delay: calc(var(--k) * 110ms + .1s); }
.lp-receipt li b { font-size: 16px; font-weight: 700; color: var(--lp-g2); font-variant-numeric: tabular-nums; }
.lp-js .lp-receipt:not(.is-in) li { opacity: 0; transform: translateX(16px); }
.lp-flow { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr) auto; align-items: start; gap: 6px; margin: 22px 0 18px; }
.lp-flow-node { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--lp-tx2); text-align: center; }
.lp-flow-node .icon { width: 46px; height: 46px; padding: 12px; border-radius: 15px; background: rgba(212, 175, 95, .07); border: 1px solid var(--lp-ln2); color: var(--lp-g2); }
.lp-flow-logo { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 15px; background: #0d0b08; border: 1px solid var(--lp-ln3); box-shadow: 0 0 24px -8px rgba(212, 167, 82, .6); }
.lp-flow-logo .pub-logo { width: 30px; filter: none; }
.lp-flow-edge { display: flex; flex-direction: column; align-items: center; gap: 6px; padding-top: 4px; min-width: 0; }
.lp-flow-edge small { font-size: 11.5px; color: var(--lp-fa); white-space: nowrap; }
.lp-flow-edge i { position: relative; display: block; width: 100%; height: 2px; background: repeating-linear-gradient(90deg, rgba(212, 175, 95, .35) 0 5px, transparent 5px 10px); }
.lp-flow-edge i::after { content: ""; position: absolute; top: -3px; left: 0; width: 8px; height: 8px; border-radius: 50%; background: var(--lp-g1); box-shadow: 0 0 10px rgba(236, 208, 142, .8); animation: lp-flow 2.6s ease-in-out infinite; }
.lp-flow-edge-2 i { background: repeating-linear-gradient(90deg, rgba(236, 208, 142, .7) 0 5px, transparent 5px 10px); }
.lp-flow-edge-2 i::after { animation-delay: 1.3s; }
.lp-receipt-f { margin: 0; padding-top: 14px; border-top: 1px solid rgba(212, 175, 95, .12); font-size: 13px; line-height: 1.5; color: var(--lp-fa); }

/* ---- CTA ---- */
.lp-cta { position: relative; overflow: hidden; isolation: isolate; padding: clamp(96px, 12vw, 168px) 0 clamp(48px, 6vw, 72px); background: radial-gradient(85% 70% at 50% 0%, #2b2212 0%, #15110b 46%, #080706 100%); color: var(--lp-tx); text-align: center; border-top: 1px solid var(--lp-ln); }
.lp-cta-bg { position: absolute; inset: 0; z-index: -1; }
.lp-cta-bg span { position: absolute; border-radius: 50%; }
.lp-cta-a { width: 1100px; height: 640px; left: 50%; top: -340px; margin-left: -550px; background: radial-gradient(ellipse, rgba(236, 208, 142, .3), transparent 64%); animation: lp-drift 16s ease-in-out infinite alternate; }
.lp-cta-b { width: 760px; height: 760px; right: -320px; bottom: -480px; background: radial-gradient(circle, rgba(212, 167, 82, .22), transparent 62%); animation: lp-drift 21s ease-in-out infinite alternate-reverse; }
.lp-cta-c { width: 680px; height: 680px; left: -340px; bottom: -400px; background: radial-gradient(circle, rgba(184, 136, 58, .2), transparent 62%); animation: lp-drift 19s ease-in-out infinite alternate; }
.lp-cta-lines { inset: 0; border-radius: 0 !important; background-image: radial-gradient(rgba(236, 208, 142, .16) 1px, transparent 1.2px); background-size: 26px 26px; -webkit-mask-image: radial-gradient(ellipse 55% 65% at 50% 45%, #000, transparent 75%); mask-image: radial-gradient(ellipse 55% 65% at 50% 45%, #000, transparent 75%); }
.lp-cta-in { display: flex; flex-direction: column; align-items: center; }
.lp-cta-h { color: var(--lp-tx); font-size: clamp(44px, 7.2vw, 112px); margin-bottom: 0; }
.lp-cta-reflect { display: block; height: .3em; margin: .02em 0 14px; overflow: hidden; font-size: clamp(44px, 7.2vw, 112px); font-weight: 600; letter-spacing: -.045em; line-height: 1.02; color: var(--lp-g2); -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, .2), transparent 85%); mask-image: linear-gradient(180deg, rgba(0, 0, 0, .2), transparent 85%); pointer-events: none; user-select: none; }
.lp-cta-reflect > span { display: inline-block; transform: scaleY(-1); margin-top: -.5em; filter: blur(1.5px); text-wrap: balance; }
.lp-cta .lp-lead { margin: 0 auto 34px; color: var(--lp-mu); }
.lp-cta .lp-code { margin: 0 auto; width: min(100%, 520px); max-width: none; }
.lp-cta .lp-sub { color: var(--lp-fa); }
.lp-cta .lp-sub a { color: var(--lp-g1); text-decoration: underline; text-decoration-color: rgba(236, 208, 142, .4); text-underline-offset: 3px; }
.lp-risk { display: flex; align-items: flex-start; gap: 14px; max-width: 780px; margin-top: 72px; padding: 18px 20px; border-radius: 18px; background: rgba(21, 18, 14, .7); border: 1px solid var(--lp-ln); text-align: left; }
.lp-risk .icon { width: 20px; height: 20px; flex: none; margin-top: 1px; color: var(--lp-g2); }
.lp-risk p { margin: 0; font-size: 14px; line-height: 1.6; color: var(--lp-mu); }
.lp-risk b { color: var(--lp-tx); }
.lp-risk a { color: var(--lp-g1); font-weight: 600; text-decoration: underline; text-decoration-color: rgba(236, 208, 142, .4); text-underline-offset: 3px; }

/* ================================================================ scroll reveals (JS adds .lp-js) */
.lp-js [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--lp-ease), transform 1.05s var(--lp-ease); transition-delay: calc(var(--d, 0) * 90ms); }
.lp-js [data-reveal].is-in { opacity: 1; transform: none; }
.lp-js [data-split] .lp-w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.lp-js [data-split] .lp-w > span { display: inline-block; transform: translateY(108%); transition: transform 1.05s var(--lp-ease); transition-delay: calc(var(--i) * 45ms); }
.lp-js [data-split].is-in .lp-w > span { transform: none; }

/* ================================================================ keyframes */
@keyframes lp-draw { to { stroke-dashoffset: 0; } }
@keyframes lp-fade { to { opacity: 1; } }
@keyframes lp-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lp-pop { from { transform: scale(0); } 70% { transform: scale(1.25); } to { transform: scale(1); } }
@keyframes lp-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes lp-rise { from { transform: translateY(108%); } to { transform: none; } }
@keyframes lp-stage-in { from { opacity: 0; transform: translateY(48px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes lp-float-in { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes lp-bob { from { translate: 0 0; } to { translate: 0 -10px; } }
@keyframes lp-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(40px, 30px) scale(1.08); } }
@keyframes lp-glow { from { opacity: .75; transform: scale(1); } to { opacity: 1; transform: scale(1.06); } }
@keyframes lp-sheen { 0% { background-position: 0 0, 100% 0; } 55%, 100% { background-position: 0 0, 0% 0; } }
@keyframes lp-btn-sheen { 0%, 72% { left: -60%; } 100% { left: 130%; } }
@keyframes pub-glint { 0%, 74% { transform: translateX(0); } 100% { transform: translateX(1500px); } }
@keyframes lp-trade { 0% { opacity: 0; transform: translateY(10px) scale(.96); } 4%, 29% { opacity: 1; transform: none; } 33%, 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes lp-beam { 0% { left: 0; opacity: 0; } 4% { opacity: 1; } 26% { left: 100%; opacity: 1; } 30%, 100% { left: 100%; opacity: 0; } }
@keyframes lp-gloss { 0% { top: -34%; } 45%, 100% { top: 100%; } }
@keyframes lp-gloss-x { 0% { left: -34%; } 45%, 100% { left: 100%; } }
@keyframes lp-beam-y { 0% { top: 0; opacity: 0; } 4% { opacity: 1; } 26% { top: 100%; opacity: 1; } 30%, 100% { top: 100%; opacity: 0; } }
@keyframes lp-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes lp-grow { from { transform: scaleX(0); } to { transform: none; } }
@keyframes lp-marquee { to { transform: translateX(-50%); } }
@keyframes lp-blink { 50% { opacity: 0; } }
@keyframes lp-tick { from { transform: scale(.4); } 60% { transform: scale(1.18); } to { transform: none; } }
@keyframes lp-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }
@keyframes lp-grade-pop { from { transform: scale(.82); filter: brightness(1.6); } to { transform: none; filter: none; } }
@keyframes lp-scrub { 0% { left: 0; opacity: 0; } 8% { opacity: 1; } 80% { left: 100%; opacity: 1; } 88%, 100% { left: 100%; opacity: 0; } }
@keyframes lp-scrub-dot { 0% { top: 59.2%; } 80%, 100% { top: 49.9%; } }
@keyframes lp-msg-in { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes lp-typing { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes lp-flow { 0% { left: 0; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { left: calc(100% - 8px); opacity: 0; } }
@keyframes lp-flip { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ================================================================ responsive */
@media (max-width: 1360px) {
  .lp-float-1 { left: -12px; }
  .lp-float-2 { right: -12px; }
}

@media (max-width: 1180px) {
  .pub-anchors { display: none; }
  .pub-anchors + .pub-nav { margin-left: auto; }
  .lp-hero-top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .lp-h1 { font-size: clamp(42px, 8.2vw, 92px); }
  .lp-hero-side { padding-bottom: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px 40px; align-items: end; }
  .lp-hero-side .lp-lead { margin: 0; }
  .lp-mk-head, .lp-mk-rows li { grid-template-columns: minmax(0, 1.1fr) minmax(60px, 90px) 108px 116px; gap: 12px; }
}

@media (max-width: 1000px) {
  .lp-how-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
  .lp-steps { max-width: none; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .lp-steps button { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 16px 18px; align-content: start; height: 100%; }
  .lp-steps-bar { left: 18px; right: 18px; }
  .lp-score-panel { grid-template-columns: minmax(0, 1fr); }
  .lp-down-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-mk { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lp-mk-cond { grid-row: auto; grid-column: 1 / -1; }
  .lp-bento { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .lp-panel.lp-lessons { grid-row: span 2; }
  .lp-dd { grid-column: 1 / -1; }
  .lp-comm-grid { grid-template-columns: minmax(0, 1fr); }
  .lp-comm-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: auto; }
  .lp-free-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .lp-zero-num, .lp-zero-reflect { font-size: clamp(150px, 34vw, 280px); }
  .lp-head-row { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .lp-tags-end { justify-content: flex-start; max-width: none; }
}

@media (max-width: 900px) {
  .lp-h1 { font-size: clamp(40px, 9vw, 80px); }
  .lp-hero-side { grid-template-columns: minmax(0, 1fr); gap: 22px; max-width: 600px; }
  .lp-stage { grid-template-columns: minmax(0, 1fr) 84px minmax(0, 1fr); padding: 14px; }
  .lp-card { padding: 14px 14px 12px; }
  .lp-trades-l, .lp-score-chip small, .lp-mirror-label span { display: none; }
  .lp-mirror-label { top: 50%; transform: translate(-50%, -50%); }
  .lp-mirror-label .icon { margin: 0; }
  .lp-trade { font-size: 12.5px; }
}

@media (max-width: 760px) {
  .lp-stage-wrap { margin-top: 40px; }
  .lp-stage { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 86px auto; padding: 12px; border-radius: 28px; }
  .lp-card { padding: 14px 14px 12px; border-radius: 20px; }
  .lp-mirror-pane { top: 50%; bottom: auto; left: 6%; right: 6%; width: auto; height: 10px; margin: -5px 0 0; background: linear-gradient(90deg, rgba(236, 208, 142, 0), rgba(236, 208, 142, .5) 25%, rgba(184, 136, 58, .55) 75%, rgba(236, 208, 142, 0)); }
  .lp-mirror-pane::before { inset: 3px 0; background: linear-gradient(90deg, transparent, rgba(255, 246, 220, .8) 50%, transparent); }
  .lp-mirror-gloss { top: 0; bottom: 0; left: auto; right: auto; width: 34%; height: auto; background: linear-gradient(90deg, transparent, #fffaf0, transparent); animation-name: lp-gloss-x; }
  .lp-beam { left: 50%; right: auto; top: -14px; bottom: -14px; width: 2px; height: auto; margin: 0 0 0 -1px; background: repeating-linear-gradient(180deg, rgba(212, 175, 95, .45) 0 6px, transparent 6px 12px); }
  .lp-beam i { left: 50%; top: 0; animation-name: lp-beam-y; }
  .lp-mirror-label { top: 50%; left: 50%; width: auto; flex-direction: row; gap: 8px; transform: translate(-50%, -50%); white-space: nowrap; }
  .lp-mirror-label .icon { margin: 0; width: 32px; height: 32px; padding: 7px; }
  .lp-mirror-label span { display: inline; background: #0f0d0a; border: 1px solid var(--lp-ln2); }

  .pub-header { padding: 10px 12px 0; }
  .pub-header-in { height: 56px; padding: 0 8px 0 12px; gap: 8px; border-radius: 16px; }
  .pub-logo { width: 36px; }
  .pub-name { font-size: 16px; }
  .pub-hide-sm { display: none; }
  .pub-btn { height: 38px; padding: 0 13px; font-size: 14px; }
  .pub-footer { padding-top: 40px; }
  .pub-footer-in { padding: 0 16px; }
  .pub-footer-top { flex-direction: column; align-items: flex-start; }
  .pub-legal { margin-left: -12px; }

  .lp-wrap { padding: 0 16px; }
  .lp-hero { margin-top: -66px; padding: 112px 0 56px; }
  .lp-flash { margin-top: -26px; margin-bottom: 24px; }
  .lp-hero-grid { background-size: 44px 44px; }
  .lp-pill { margin-bottom: 22px; font-size: 12.5px; height: 32px; }
  .lp-trades-l { display: none; }
  .lp-trade-slot { height: 30px; }
  .lp-trade { left: 0; right: auto; height: 30px; font-size: 12.5px; }
  .lp-float { padding: 9px 14px 9px 9px; gap: 10px; border-radius: 15px; }
  .lp-float-ic { width: 34px; height: 34px; border-radius: 10px; }
  .lp-float b { font-size: 13px; }
  .lp-float small { font-size: 11.5px; }
  .lp-mini-bar { width: 96px; }
  .lp-float-1 { left: auto; right: -4px; top: -30px; }
  .lp-float-2 { display: none; }
  .lp-float-big { font-size: 30px; }

  .lp-marquee { padding: 16px 0; }
  .lp-marquee-row li { height: 40px; font-size: 14px; padding: 0 16px 0 12px; }

  .lp-sec { padding: 76px 0; }
  .lp-head { margin-bottom: 36px; }
  .lp-kicker { margin-bottom: 18px; font-size: 11px; letter-spacing: .2em; }
  .lp-tags li { height: 34px; font-size: 13px; padding: 0 12px 0 10px; }

  .lp-steps { gap: 6px; }
  .lp-steps button { padding: 14px 12px 16px; border-radius: 16px; }
  .lp-steps-t { font-size: 14.5px; letter-spacing: -.01em; line-height: 1.25; }
  .lp-steps-n { font-size: 12px; }
  .lp-steps-bar { left: 12px; right: 12px; }
  .lp-phone { width: 304px; height: 620px; border-radius: 50px; border-width: 10px; }
  .lp-screen { padding: 10px 16px 16px; }
  .lp-s-title { font-size: 20px; }
  .lp-s-list li { padding: 9px 10px; font-size: 13px; }

  .lp-score-panel { padding: 10px; border-radius: 26px; gap: 10px; }
  .lp-sc, .lp-rank { padding: 18px 16px; border-radius: 20px; }
  .lp-sc-body { grid-template-columns: minmax(0, 1fr); gap: 22px; justify-items: center; }
  .lp-gauge { width: 190px; }
  .lp-gauge-in b { font-size: 68px; }
  .lp-factors { width: 100%; }
  .lp-factors li { grid-template-columns: minmax(0, 118px) minmax(0, 1fr) 28px; gap: 10px; font-size: 13px; }
  .lp-factors .lp-factor-flags { grid-template-columns: minmax(0, 118px) minmax(0, 1fr); }
  .lp-rank-body { --rh: 56px; --rg: 8px; grid-template-columns: 16px minmax(0, 1fr); gap: 8px; }
  .lp-rrow { padding: 0 8px 0 12px; border-radius: 14px; }
  .lp-rgrade { min-width: 42px; height: 36px; }
  .lp-score-stage { transform: perspective(1200px) rotateX(calc(var(--tilt, 0) * 9deg)) scale(calc(1 - var(--tilt, 0) * .03)); }

  .lp-panel { padding: 18px; border-radius: 22px; }
  .lp-panel.lp-lessons { padding: 0; }
  .lp-panel-h .lp-card-t small, .lp-mini .lp-card-t b { white-space: normal; }
  .lp-stress-in { gap: 6px; }
  .lp-stress-in > span { padding: 8px 10px; border-radius: 12px; }
  .lp-stress-in b { font-size: 13.5px; }
  .lp-fan-box { height: 220px; }
  .lp-dots { --ys: 11px; min-height: 250px; padding-left: 28px; }
  .lp-dots-zero { left: 28px; }
  .lp-dots-zero small { left: -28px; }
  .lp-dots-col i { width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px; transform: translate(calc(var(--x) * .55px), calc(var(--y) * var(--ys) * -1)); }
  .lp-dots-med { width: 24px; margin-left: -12px; }
  .lp-log { margin-left: 0; }

  .lp-mk { grid-template-columns: minmax(0, 1fr); }
  .lp-mk-head, .lp-mk-rows li { grid-template-columns: minmax(0, 1fr) auto 66px; gap: 10px; }
  .lp-mk-head { padding: 0 6px 10px; }
  .lp-mk-rows li { padding: 12px 6px; }
  .lp-mk-sp, .lp-mk-spark { display: none; }
  .lp-vol { flex-direction: column; align-items: flex-start; gap: 4px; }
  .lp-vol small { font-size: 11.5px; }
  .lp-cal li { grid-template-columns: 42px 40px minmax(0, 1fr) auto; padding: 10px; gap: 4px 8px; font-size: 13px; }

  .lp-bento { grid-template-columns: minmax(0, 1fr); }
  .lp-panel.lp-lessons { grid-row: auto; }
  .lp-dd { grid-column: auto; }
  .lp-dd-rows { --sc: 62%; }
  .lp-term b { font-size: 28px; }
  .lp-dd-rows li, .lp-dd-axis { grid-template-columns: minmax(0, 1fr) 22px minmax(0, 1fr); gap: 6px; }
  .lp-dd-l em, .lp-dd-g em { font-size: 13px; }

  .lp-chat { grid-template-columns: minmax(0, 1fr); border-radius: 22px; }
  .lp-chat-side { display: none; }
  .lp-chat-h { padding: 14px 16px; }
  .lp-chat-log { min-height: 452px; padding: 18px 16px; gap: 14px; }
  .lp-msg-t { font-size: 14px; }
  .lp-chat-in { margin: 0 12px 12px; }
  .lp-comm-side { grid-template-columns: minmax(0, 1fr); }
  .lp-mini { padding: 14px; border-radius: 20px; }

  .lp-receipt { padding: 20px 18px 18px; border-radius: 22px; }
  .lp-flow { gap: 4px; }
  .lp-flow-node { font-size: 11.5px; }
  .lp-flow-node .icon, .lp-flow-logo { width: 40px; height: 40px; }
  .lp-flow-node .icon { padding: 10px; border-radius: 13px; }
  .lp-flow-logo { border-radius: 13px; }
  .lp-flow-logo .pub-logo { width: 26px; }
  .lp-flow-edge small { font-size: 10.5px; }

  .lp-cta { text-align: left; }
  .lp-cta-in { align-items: stretch; }
  .lp-cta .lp-lead { margin: 0 0 28px; }
  .lp-risk { margin-top: 48px; padding: 16px; }
}

@media (max-width: 420px) {
  .lp-h1 { font-size: clamp(38px, 11.4vw, 46px); }
  .lp-h1:lang(nl) { font-size: clamp(36px, 10.5vw, 44px); }
  .lp-stress-in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-stress-in > span:nth-child(2) { display: none; }
  .lp-code { padding: 5px; border-radius: 17px; }
  .lp-code-ic { width: 30px; }
  .lp-code .lp-btn { height: 46px; padding: 0 14px; font-size: 15px; gap: 6px; }
  .lp-code input[type=text] { min-height: 46px; font-size: 15px; letter-spacing: .08em; }
  .lp-card-h { gap: 10px; }
  .lp-av { width: 36px; height: 36px; border-radius: 11px; }
  .lp-score-chip { padding: 3px; }
  .lp-status { padding: 0 10px; }
  .lp-steps-t { font-size: 13.5px; }
  .lp-flow-edge small { white-space: normal; text-align: center; line-height: 1.2; }
}

@media (max-width: 374px) {
  .pub-header .pub-name { display: none; }
}

/* ================================================================ reduced motion */
@media (prefers-reduced-motion: reduce) {
  html:has(.lp) { scroll-behavior: auto; }
  .lp *, .lp *::before, .lp *::after { animation-duration: 1ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0s !important; }
  .pub-glint { animation: none !important; }
  .lp-trade { animation: none !important; opacity: 0; }
  .lp-tr-1 { opacity: 1; }
  .lp-beam i, .lp-mirror-gloss, .lp-fan-scrub, .lp-flow-edge i::after, .lp-btn-primary::after, .lp-calc-out::after { display: none; }
  .lp-gold-text, .lp-zero-num { animation: none !important; background-position: 0 0, 40% 0; }
  .lp-float { animation: none !important; }
  .lp-marquee { -webkit-mask-image: none; mask-image: none; }
  .lp-marquee-track { width: auto; animation: none !important; justify-content: center; padding: 0 16px; }
  .lp-marquee-row { flex-wrap: wrap; justify-content: center; gap: 8px; padding: 0; }
  .lp-marquee-row[aria-hidden] { display: none; }
  .lp-score-stage { transform: none !important; }
}