/* The home page: a short page with real 3D — live author pages as a stack
   that turns with the pointer, tiles that tilt, steps that rise in as they
   scroll in, two ribbons crossing the last block. Plain CSS 3D, no library.
   Pointer- and scroll-driven values come from public/landing-v3.js as custom
   properties; without it (or with reduced motion) the page is flat. Hover looks
   are only for a real pointer: on a touch screen they would stay stuck after a tap. */

.lx { --lx-line: rgba(255, 255, 255, 0.1); --lx-muted: #b2aeae; --lx-card: #0e0e0f; overflow-x: clip; }
.lx section { position: relative; }

/* ── Buttons: a key with depth — it sits on its own edge and presses down ── */
.lx-btn { --edge: 6px; position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px; height: 54px; padding: 0 26px; border-radius: 14px; border: 0; background: #f4f4f4; color: #070707; font: 600 14px var(--sans); letter-spacing: -0.02em; text-decoration: none; white-space: nowrap; box-shadow: 0 var(--edge) 0 #8d8b93, 0 calc(var(--edge) + 14px) 26px rgba(0, 0, 0, 0.55); transform: translateY(0); transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease; }
/* The key sinks when hovered and pressed. An invisible strip above it keeps
   the pointer over the button while it moves down: otherwise a pointer near
   its top edge falls off, the hover flickers on and off, and a press there
   ends outside the button and doesn't count as a click. */
.lx-btn::after, .lx-key::after { content: ''; position: absolute; left: 0; right: 0; top: calc(var(--edge) * -1 - 2px); bottom: 0; }
.lx-btn:active { transform: translateY(var(--edge)); box-shadow: 0 0 0 #8d8b93, 0 4px 10px rgba(0, 0, 0, 0.5); }
.lx-btn:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.lx-btn-arrow { display: grid; place-items: center; width: 22px; height: 22px; transition: transform 0.2s ease; }
.lx-btn-arrow .icon { width: 18px; height: 18px; }
.lx-btn-ghost { background: #19191b; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 var(--edge) 0 #050505, 0 calc(var(--edge) + 14px) 26px rgba(0, 0, 0, 0.5); }
.lx-btn-ghost:active { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 0 0 #050505, 0 4px 10px rgba(0, 0, 0, 0.5); }
.lx-btn-lg { --edge: 8px; height: 66px; padding: 0 34px; border-radius: 18px; font-size: 17px; }

/* ── Hero ── */
.lx-hero { position: relative; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; gap: 24px; max-width: 1240px; min-height: calc(100vh - 95px); min-height: calc(100svh - 95px); margin: 0 auto; padding: 32px 32px 48px; isolation: isolate; }
/* the first screen is a screen of its own: a line across the whole window under it */
.lx-hero::after { content: ''; position: absolute; left: 50%; bottom: 0; width: 100vw; height: 1px; background: rgba(255, 255, 255, 0.12); transform: translateX(-50%); }
.lx-hero-copy { position: relative; z-index: 1; }
/* out of sight, the live pages in the stack are not drawn (visibility, not
   display: taking them out of the layout and back cost a visible hitch) */
.lx-hero.is-away .lx-card iframe { visibility: hidden; }
/* the name: solid letters with one soft shadow, each rising into place (quickly: it is the first thing seen) */
.lx-title { margin: 0 0 0 -0.04em; display: flex; perspective: 900px; font-family: var(--sans); font-weight: 800; font-size: clamp(80px, 11vw, 176px); line-height: 0.95; letter-spacing: -0.075em; color: #f4f4f4; }
.lx-letter { display: inline-block; transform-origin: 50% 100%; animation: lxLetter 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; animation-delay: calc(var(--i) * 50ms); text-shadow: 0 10px 30px rgba(0, 0, 0, 0.55); }
@keyframes lxLetter { from { opacity: 0.2; transform: rotateX(-80deg) translateY(18%); } to { opacity: 1; transform: none; } }
.lx-tagline { max-width: 560px; margin: 30px 0 0; font-size: clamp(22px, 2.1vw, 30px); font-weight: 600; line-height: 1.2; letter-spacing: -0.05em; color: #f4f4f4; }
.lx-lead { max-width: 480px; margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: #c9c7cf; letter-spacing: -0.02em; }
.lx-note { max-width: 480px; margin: 18px 0 0; font-size: 13px; line-height: 1.55; color: #a9a7b0; }
.lx-note a { color: #fff; text-underline-offset: 3px; }
/* text for screen readers and search engines only */
.lx-sr { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.lx-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 30px; padding-bottom: 6px; }

/* The stack: real author pages as cards fanned out in depth — the front one
   whole, the next two behind it, up and to the right. The front one goes to the
   back on a click or an arrow. The script turns the whole stack toward the
   pointer and lets it settle back when the pointer leaves (--rx / --ry). */
.lx-stage { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 30px; perspective: 2200px; }
.lx-scene { --rx: 4deg; --ry: -10deg; --pw: var(--fit-w, 300px); position: relative; width: var(--pw); aspect-ratio: 390 / 844; transform-style: preserve-3d; transform: rotateX(var(--rx)) rotateY(var(--ry)); }
.lx-card { --s: var(--fit-s, calc(300 / 390)); position: absolute; inset: 0; overflow: hidden; border-radius: 30px; background: #0b0b0c; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 30px 60px rgba(0, 0, 0, 0.55); transform: translate3d(calc(var(--pos) * 38px), calc(var(--pos) * -26px), calc(var(--pos) * -90px)) rotateZ(calc(var(--pos) * 4deg)); opacity: calc(1 - var(--pos) * 0.22); transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.5s ease; }
.lx-card { will-change: transform, opacity; }
.lx-card.is-front { cursor: pointer; }
.lx-card[style*="--pos: 3"] { opacity: 0; pointer-events: none; }
/* the front page swings out to the left before it settles at the back */
.lx-card.is-leaving { transform: translate3d(-75%, 6%, 60px) rotateY(28deg) rotateZ(-10deg); opacity: 0.4; transition-duration: 0.36s, 0.36s, 0.36s; }
.lx-card iframe { position: absolute; left: 0; top: 0; width: 390px; height: 844px; border: 0; transform: scale(var(--s)); transform-origin: 0 0; pointer-events: none; background: #0a0a0a; }
/* the cards further back are darker (a layer, cheaper than a filter), and a little glass on each */
.lx-card::before { content: ''; position: absolute; inset: 0; z-index: 2; background: #000; opacity: calc(var(--pos) * 0.2); transition: opacity 0.5s ease; pointer-events: none; }
.lx-card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, rgba(255, 255, 255, 0.06), transparent 40%); pointer-events: none; }
.lx-floor { position: absolute; left: 4%; right: -10%; bottom: -50px; height: 110px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, 0.75), transparent); transform: rotateX(90deg) translateZ(-40px); }
/* while a page in the stack loads */
.lx-screen-wait { position: absolute; z-index: 1; left: 50%; top: 50%; width: 28px; height: 28px; margin: -14px 0 0 -14px; border: 2px solid rgba(255, 255, 255, 0.15); border-top-color: #fff; border-radius: 50%; animation: lxSpin 0.8s linear infinite; }
@keyframes lxSpin { to { transform: rotate(360deg); } }
.lx-screen-logo { position: absolute; left: 50%; top: 50%; width: 52%; transform: translate(-50%, -50%); }
.lx-chip { z-index: 5; position: absolute; left: -64px; bottom: 12%; padding: 11px 16px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.22); background: rgba(16, 16, 17, 0.94); font: 12px var(--mono); white-space: nowrap; transform: translateZ(90px); box-shadow: 0 20px 34px rgba(0, 0, 0, 0.55); }

/* under the stack: the arrows with the count, and a way to open the page itself */
.lx-switch { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 14px; padding-bottom: 6px; }
.lx-switch-nav { display: flex; align-items: center; gap: 12px; }
.lx-switch-count { min-width: 44px; font: 12px var(--mono); letter-spacing: 0.06em; color: var(--lx-muted); text-align: center; white-space: nowrap; }
.lx-key { --edge: 4px; position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 12px; background: #19191b; color: #fff; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 var(--edge) 0 #050505, 0 calc(var(--edge) + 12px) 22px rgba(0, 0, 0, 0.5); transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.15s ease; }
.lx-key:active { transform: translateY(4px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 0 0 #050505, 0 4px 10px rgba(0, 0, 0, 0.5); }
.lx-key:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
.lx-key .icon { width: 16px; height: 16px; }
.lx-flip { transform: scaleX(-1); }
.lx-btn-xs { --edge: 4px; height: 44px; padding: 0 18px; gap: 8px; border-radius: 12px; font-size: 12px; }
.lx-btn-xs .icon { width: 12px; height: 12px; }

/* ── Statement: words light up as the block scrolls through ── */
.lx-statement { max-width: 1240px; margin: 0 auto; padding: 110px 32px 110px; }
.lx-statement-text { max-width: 900px; margin: 0; font-size: clamp(28px, 3.4vw, 44px); font-weight: 600; line-height: 1.15; letter-spacing: -0.05em; }
.lx-word { display: inline-block; opacity: calc(0.35 + var(--w, 1) * 0.65); transition: opacity 0.2s linear; }

/* ── The editor: a real picture of it, lying back and rising upright as it
   scrolls in (--u from the script, 1 = upright) ── */
.lx-sec-title { margin: 0 0 18px; font-size: clamp(28px, 3.4vw, 46px); font-weight: 600; letter-spacing: -0.06em; line-height: 1.05; }
.lx-sec-lead { max-width: 560px; margin: 0 0 44px; font-size: 15px; line-height: 1.6; color: var(--lx-muted); }
.lx-editor { max-width: 1240px; margin: 0 auto; padding: 0 32px 130px; scroll-margin-top: 90px; }
.lx-shot { --u: 1; position: relative; isolation: isolate; }
/* a soft light behind the screen that comes up as it stands upright */
.lx-shot::before { content: ''; position: absolute; z-index: -1; left: -10%; right: -10%; top: 8%; height: 104%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); opacity: var(--u); will-change: opacity; pointer-events: none; }
/* the perspective sits on the picture: it only reaches the picture's own children */
.lx-shot picture { display: block; perspective: 1400px; perspective-origin: 50% 0%; }
.lx-narrow-only { display: none; }
.lx-phone-bar, .lx-phone-btn { display: none; }
.lx-shot-note { display: none; margin: 16px 0 0; font: 11px var(--mono); letter-spacing: 0.06em; text-align: center; color: #9a98a2; }
.lx-shot img { backface-visibility: hidden; display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.12), 0 50px 100px rgba(0, 0, 0, 0.6); transform-origin: 50% 100%; transform: translateY(calc((1 - var(--u)) * 48px)) rotateX(calc((1 - var(--u)) * 34deg)) scale(calc(0.88 + var(--u) * 0.12)); will-change: transform; }
.lx-points { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 56px 0 0; padding: 0; list-style: none; }
.lx-points li { padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.16); }
.lx-points h3 { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.05em; }
.lx-points p { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--lx-muted); }

/* ── Steps: one line through three points, drawn as the block scrolls in (--t) ── */
.lx-how { max-width: 1240px; margin: 0 auto; padding: 0 32px 130px; scroll-margin-top: 90px; }
.lx-how .lx-sec-title { margin-bottom: 48px; text-align: center; }
.lx-timeline { --t: 1; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
/* from the first point to the last: each point is in the middle of its column */
.lx-timeline::before, .lx-timeline::after { content: ''; position: absolute; left: calc((100% - 64px) / 6); right: calc((100% - 64px) / 6); top: 22px; height: 1px; transform-origin: 0 50%; }
.lx-timeline::before { background: rgba(255, 255, 255, 0.12); }
.lx-timeline::after { background: #fff; transform: scaleX(var(--t)); }
.lx-tl-step { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; }
.lx-tl-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #070707; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); font: 600 15px var(--sans); color: #fff; }
.lx-tl-step h3 { margin: 26px 0 0; font-size: 24px; font-weight: 600; letter-spacing: -0.05em; }
.lx-tl-step p { margin: 10px 0 0; max-width: 280px; font-size: 14px; line-height: 1.6; color: var(--lx-muted); }

/* ── Questions: one line each, the answer opens under it ── */
.lx-faq { max-width: 1240px; margin: 0 auto; padding: 0 32px 130px; }
.lx-faq .lx-sec-title { margin-bottom: 28px; text-align: center; }
.lx-faq-list { max-width: 860px; margin: 0 auto; border-top: 1px solid rgba(255, 255, 255, 0.12); }
.lx-faq-item { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.lx-faq-item summary { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; padding: 14px 0; font-size: 17px; font-weight: 600; letter-spacing: -0.03em; list-style: none; cursor: pointer; }
.lx-faq-item summary::-webkit-details-marker { display: none; }
.lx-faq-item summary:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 4px; }
.lx-faq-sign { position: relative; flex: none; width: 14px; height: 14px; }
.lx-faq-sign::before, .lx-faq-sign::after { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px; margin-top: -0.75px; background: #fff; transition: transform 0.25s ease; }
.lx-faq-sign::after { transform: rotate(90deg); }
.lx-faq-item[open] .lx-faq-sign::after { transform: rotate(0deg); }
.lx-faq-item p { max-width: 640px; margin: 0; padding: 0 0 22px; font-size: 15px; line-height: 1.6; color: var(--lx-muted); }

/* ── Final: two ribbons cross behind the words, one light, one dark ── */
.lx-final { position: relative; display: grid; place-items: center; min-height: 720px; padding: 120px 32px; overflow: hidden; border-top: 1px solid var(--lx-line); text-align: center; perspective: 1000px; }
.lx-ribbons { position: absolute; inset: 0; display: grid; place-items: center; transform-style: preserve-3d; pointer-events: none; }
.lx-ribbon { position: absolute; left: -18%; right: -18%; overflow: hidden; }
.lx-ribbon-a { background: #f2f2f2; color: #0b0b0b; transform: translateY(-235px) rotateX(var(--fx, 24deg)) rotateZ(-5deg); }
.lx-ribbon-b { background: #111113; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.75); border-block: 1px solid rgba(255, 255, 255, 0.18); transform: translateY(235px) rotateX(calc(var(--fx, 24deg) * -1)) rotateZ(4deg); }
.lx-ribbon-track { will-change: transform; display: flex; width: max-content; padding: 16px 0; font: 700 clamp(30px, 4.4vw, 56px) / 1 var(--sans); letter-spacing: -0.03em; white-space: nowrap; animation: lxRun 40s linear infinite; }
.lx-ribbon-b .lx-ribbon-track { animation-direction: reverse; animation-duration: 55s; }
/* the ribbons run only while the block is on screen */
.lx-final:not(.is-on) .lx-ribbon-track { animation-play-state: paused; }
.lx-ribbon-track span { flex: none; }
@keyframes lxRun { to { transform: translateX(-50%); } }
.lx-final-body { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding: 20px; }
.lx-final h2 { margin: 0; font-size: clamp(36px, 5.2vw, 72px); font-weight: 600; line-height: 1.02; letter-spacing: -0.08em; text-shadow: 0 6px 30px rgba(0, 0, 0, 0.9); }
.lx-final h2 em { font-style: normal; color: #8a8892; }
.lx-final-body > p { margin: 18px 0 34px; font-size: 15px; color: var(--lx-muted); }
.lx-final-body > .lx-note { margin: 22px 0 0; }

/* ── Tablet and phone ── */
@media (max-width: 980px) {
  .lx-hero { grid-template-columns: minmax(0, 1fr); gap: 40px; min-height: 0; padding: 20px 20px 64px; }
  .lx-title { font-size: clamp(80px, 25vw, 168px); }
  .lx-statement { padding: 72px 20px 80px; }
  .lx-editor, .lx-how, .lx-faq { padding: 0 20px 90px; }
  .lx-points { gap: 22px; }
}
@media (max-width: 560px) {
  .lx-scene { --pw: 228px; }
  .lx-card { --s: calc(228 / 390); border-radius: 24px; transform: translate3d(calc(var(--pos) * 24px), calc(var(--pos) * -18px), calc(var(--pos) * -70px)) rotateZ(calc(var(--pos) * 3deg)); }
  .lx-chip { left: -22px; bottom: 7%; padding: 9px 12px; font-size: 10px; }
  .lx-switch { gap: 10px; }
  .lx-switch-count { min-width: 34px; }
  .lx-actions .lx-btn { width: 100%; }
  .lx-final { min-height: 680px; padding: 90px 16px; }
  .lx-final-body { padding: 20px 0; width: 100%; }
  .lx-btn-lg { width: 100%; max-width: 340px; white-space: normal; text-align: left; }
  .lx-ribbon-a { transform: translateY(-245px) rotateX(var(--fx, 24deg)) rotateZ(-6deg); }
  .lx-ribbon-b { transform: translateY(245px) rotateX(calc(var(--fx, 24deg) * -1)) rotateZ(5deg); }
  .lx-ribbon-track { font-size: 30px; padding: 12px 0; }
  .lx-btn-lg { height: 58px; padding: 0 26px; font-size: 15px; }
}

/* ── Phone: everything in one column, a little tighter ── */
@media (max-width: 760px) {
  .lx-hero { padding-top: 40px; gap: 44px; }
  .lx-lead { font-size: 16px; }
  .lx-statement-text { font-size: clamp(24px, 6.8vw, 30px); }
  .lx-switch { flex-wrap: nowrap; }
  .lx-sec-title { font-size: 30px; }
  .lx-sec-lead { margin-bottom: 28px; }
  /* the editor as it looks on a phone, in a phone's body, standing straight */
  .lx-phone { position: relative; width: min(100%, 270px); margin: 0 auto; padding: 9px; border-radius: 42px; background: linear-gradient(145deg, #2a2a2d, #121214 40%, #1c1c1f); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16), 0 30px 60px rgba(0, 0, 0, 0.6); }
  /* the screen: room for the status bar on top and the button below; the picture keeps its full width */
  .lx-shot picture { padding: 40px 0 62px; border-radius: 33px; background: #070707; overflow: hidden; perspective: none; }
  .lx-shot img { width: 100%; height: auto; aspect-ratio: 780 / 1420; border-radius: 0; box-shadow: none; transform: none; opacity: 1; }
  /* a status bar like a real phone's: time, the island, signal, Wi-Fi and battery */
  .lx-phone-bar { display: flex; align-items: center; justify-content: space-between; position: absolute; top: 18px; left: 9px; right: 9px; height: 24px; padding: 0 22px 0 30px; color: #f4f4f4; }
  .lx-phone-time { font: 600 12px/1 var(--sans); letter-spacing: -0.02em; }
  .lx-phone-island { position: absolute; left: 50%; top: 1px; width: 74px; height: 22px; margin-left: -37px; border-radius: 12px; background: #000; }
  .lx-phone-icons { display: block; width: 52px; height: auto; }
  .lx-phone-btn { display: inline-flex; align-items: center; gap: 7px; position: absolute; left: 50%; bottom: 32px; transform: translateX(-50%); height: 28px; padding: 0 13px; border-radius: 999px; background: #161616; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 8px 20px rgba(0, 0, 0, 0.6); font: 600 10.5px var(--sans); letter-spacing: -0.02em; color: #fff; white-space: nowrap; }
  .lx-phone-btn { gap: 6px; }
  .lx-phone-btn::before { content: ''; width: 9px; height: 7px; border: 1.3px solid currentColor; border-radius: 2px; }
  /* the home bar under it */
  .lx-phone-btn::after { content: ''; position: absolute; left: 50%; top: 41px; width: 86px; height: 4px; margin-left: -43px; border-radius: 2px; background: rgba(255, 255, 255, 0.55); }
  .lx-shot-note { display: block; }
  .lx-shot::before { display: none; }
  .lx-wide-only { display: none; }
  .lx-narrow-only { display: inline; }
  .lx-points { grid-template-columns: minmax(0, 1fr); margin-top: 36px; }
  /* the line runs down the left, from each point to the next */
  .lx-timeline { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .lx-timeline::before, .lx-timeline::after { display: none; }
  .lx-tl-step { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 18px; align-items: start; text-align: left; }
  .lx-tl-step:not(:last-child)::before, .lx-tl-step:not(:last-child)::after { content: ''; position: absolute; left: 21.5px; top: 44px; bottom: -30px; width: 1px; transform-origin: 50% 0; }
  .lx-tl-step:not(:last-child)::before { background: rgba(255, 255, 255, 0.12); }
  .lx-tl-step:not(:last-child)::after { background: #fff; transform: scaleY(clamp(0, calc(var(--t) * 3 - var(--k)), 1)); }
  .lx-tl-dot { grid-row: span 2; }
  .lx-tl-step h3 { margin: 9px 0 0; font-size: 21px; }
  .lx-faq-item summary { font-size: 16px; }
  .lx-final h2 { font-size: clamp(32px, 9.4vw, 46px); }
}

/* ── Reduced motion: flat and still ── */
@media (prefers-reduced-motion: reduce) {
  .lx-letter, .lx-ribbon-track, .lx-screen-wait { animation: none; }
  .lx-card, .lx-card::before, .lx-faq-sign::before, .lx-faq-sign::after { transition: none; }
  .lx-card.is-leaving { transform: none; opacity: 0; }
  .lx-scene, .lx-shot img { transform: none; transition: none; }
  .lx-shot img { opacity: 1; }
  .lx-timeline::after, .lx-tl-step::after { transform: none !important; }
  .lx-word { opacity: 1; }
}

/* hover looks: only where there is a real pointer */
@media (hover: hover) {
  .lx-btn:hover { background: #fff; transform: translateY(2px); box-shadow: 0 calc(var(--edge) - 2px) 0 #8d8b93, 0 calc(var(--edge) + 8px) 20px rgba(0, 0, 0, 0.5); }
  .lx-btn:hover .lx-btn-arrow { transform: translateX(4px); }
  .lx-btn-ghost:hover { background: #222225; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 calc(var(--edge) - 2px) 0 #050505, 0 calc(var(--edge) + 8px) 20px rgba(0, 0, 0, 0.5); }
  .lx-key:hover { background: #222225; transform: translateY(2px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28), 0 2px 0 #050505, 0 8px 16px rgba(0, 0, 0, 0.5); }
  .lx-faq-item summary:hover .lx-faq-sign::before, .lx-faq-item summary:hover .lx-faq-sign::after { background: #b2aeae; }
}