/* Lessen homepage v2 (Kene, Oct 20, 2026): Origin's structure in the Light
 * Room brand bible's material. Loads after home.css. One light per frame:
 * on Forest and Night it is a soft mint light from the top left, and every
 * glass edge is lit from that side. */

/* ================================================================ hero on Forest silk */
.lr-home .lr-hero2 { margin-top: calc(-1 * var(--nav-h)); }
.lr-forest { position: relative; isolation: isolate; overflow: hidden; color: #FFFFFF;
  --lx: 0px; --ly: 0px;
  background: linear-gradient(176deg, #17503A 0%, #0E3627 34%, #082419 66%, #03110B 100%); }
.lr-silk { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: .42; mix-blend-mode: screen; pointer-events: none; }
.lr-light { position: absolute; z-index: -1; left: -18vw; top: -42vw; width: 96vw; height: 96vw; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(168, 237, 196, .34), rgba(135, 204, 170, .14) 42%, rgba(63, 147, 110, .05) 64%, transparent 76%);
  transform: translate3d(var(--lx), var(--ly), 0); transition: transform 1.2s var(--ease); }
.lr-forest::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.lr-hero2-in { padding-top: calc(var(--nav-h) + clamp(56px, 7vw, 104px)); text-align: center; }
.lr-h1-night { color: #FFFFFF; }
.lr-h1-night .dim { color: rgba(233, 243, 238, .5); }
.lr-h1-night .lr-rot { color: #A8EDC4; }
.lr-forest .lr-lead { color: rgba(233, 243, 238, .74); margin-left: auto; margin-right: auto; }
.lr-btn-white { color: #0C0E0D; background: linear-gradient(180deg, #FFFFFF, #E4ECE8); box-shadow: inset 0 1px 0 #fff, 0 16px 36px -14px rgba(168, 237, 196, .55), 0 0 0 1px rgba(255, 255, 255, .4); }
.lr-btn-white:hover { box-shadow: inset 0 1px 0 #fff, 0 20px 44px -14px rgba(168, 237, 196, .7), 0 0 0 1px rgba(255, 255, 255, .5); }
.lr-btn-glass { color: #FFFFFF; background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .06)); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 0 0 1px rgba(255, 255, 255, .08), 0 12px 30px -16px rgba(0, 0, 0, .5); }
.lr-btn-glass:hover { background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08)); }

/* the exploded phone: its numbers drift out around it, and it leans toward the pointer */
.lr-stage2 { position: relative; height: clamp(600px, 50vw, 680px); margin-top: clamp(48px, 5vw, 72px); perspective: 1600px; --q: 1; --rx: 0deg; --ry: 0deg; }
.lr-stage2::before { content: ""; position: absolute; left: 50%; bottom: 34px; width: 520px; max-width: 90%; height: 90px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(closest-side, rgba(135, 204, 170, .28), transparent); pointer-events: none; }
.lr-stage2::after { content: ""; position: absolute; left: 50%; bottom: 76px; width: 340px; max-width: 70%; height: 1.5px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(168, 237, 196, .9), transparent); box-shadow: 0 0 16px rgba(135, 204, 170, .7); pointer-events: none; }
.lr-phone2 { position: absolute; left: 50%; top: 0; width: 300px; margin-left: -150px; transform: rotateX(var(--rx)) rotateY(var(--ry)); transform-style: preserve-3d; transition: transform .9s var(--ease); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 80px 120px -50px rgba(0, 0, 0, .85), 0 0 0 1px #000, -30px -30px 80px -40px rgba(168, 237, 196, .25); }
.lr-home-scr { position: absolute; inset: 52px 18px 16px; display: flex; flex-direction: column; color: #E9F3EE; text-align: left; }
.lr-home-scr .trust { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 10.5px; color: #A7B0AB; }
.lr-home-scr .trust b { width: 6px; height: 6px; border-radius: 50%; background: #87CCAA; box-shadow: 0 0 6px rgba(135, 204, 170, .8); }
.lr-home-scr .trust span { margin-left: auto; color: #8C9590; }
.lr-home-scr .k { margin-top: 20px; font-size: 11px; color: #8C9590; }
.lr-home-scr .big { font-weight: 300; font-size: 46px; letter-spacing: -.055em; line-height: 1; color: #87CCAA; margin-top: 6px; }
.lr-home-scr .big span { color: rgba(135, 204, 170, .45); }
.lr-home-scr .big em { font-style: normal; font-size: 20px; letter-spacing: -.02em; color: #E9F3EE; }
.lr-home-scr .sub { margin-top: 8px; font-size: 11px; line-height: 1.4; color: #A7B0AB; }
.lr-home-scr .pace { margin-top: 12px; height: 4px; border-radius: 4px; background: rgba(233, 243, 238, .1); overflow: hidden; }
.lr-home-scr .pace i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg, #3F936E, #87CCAA); }
.lr-home-scr .state { margin-top: 8px; font-size: 12px; color: #87CCAA; }
.lr-home-scr .tiles { margin-top: 14px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lr-home-scr .tiles div, .lr-home-scr .win { border-radius: 14px; padding: 10px 11px; background: linear-gradient(180deg, rgba(233, 243, 238, .08), rgba(233, 243, 238, .03)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.lr-home-scr .tiles span, .lr-home-scr .win span { display: block; font-size: 9.5px; color: #8C9590; }
.lr-home-scr .tiles b { display: block; font-weight: 300; font-size: 22px; letter-spacing: -.04em; color: #fff; margin-top: 2px; }
.lr-home-scr .tiles small, .lr-home-scr .win small { display: block; font-size: 9.5px; color: #8C9590; line-height: 1.35; margin-top: 2px; }
.lr-home-scr .win { margin-top: 8px; }
.lr-home-scr .win b { display: block; font-weight: 400; font-size: 13px; color: #fff; margin-top: 2px; }
.lr-home-scr .tabs { margin-top: auto; display: flex; justify-content: space-between; padding: 9px 10px; border-radius: 16px; background: rgba(233, 243, 238, .07); font-size: 9px; color: #8C9590; }
.lr-home-scr .tabs .on { color: #fff; }
.lr-float { position: absolute; z-index: 3; left: 50%; top: 42%; width: 224px; padding: 15px 17px 14px; border-radius: 20px; text-align: left;
  background: linear-gradient(135deg, rgba(255, 255, 255, .17), rgba(255, 255, 255, .05) 70%); -webkit-backdrop-filter: blur(22px) saturate(150%); backdrop-filter: blur(22px) saturate(150%);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .07), 0 30px 60px -30px rgba(0, 0, 0, .7);
  transform: translate(-50%, -50%) translate(calc(var(--fx) * var(--q)), calc(var(--fy) * var(--q))) scale(calc(.86 + .14 * var(--q)));
  opacity: calc(.1 + .9 * var(--q)); will-change: transform; }
.lr-float .k { display: block; font-size: 11.5px; color: rgba(233, 243, 238, .66); }
.lr-float b { display: block; margin-top: 5px; font-weight: 300; font-size: 28px; letter-spacing: -.045em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.lr-float b i { font-style: normal; color: rgba(233, 243, 238, .38); }
.lr-float small { display: block; margin-top: 6px; font-size: 12px; color: rgba(233, 243, 238, .6); }
.lr-stage-tag { position: absolute; right: 0; bottom: 0; color: rgba(233, 243, 238, .55) !important; }

/* trust strip: glass tiles that catch the light */
.lr-trust2 { padding-bottom: clamp(56px, 6vw, 88px); }
.lr-trust2 ul { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.lr-gt { position: relative; overflow: hidden; display: flex; align-items: center; gap: 14px; padding: 16px 18px; border-radius: 20px; text-align: left;
  background: linear-gradient(135deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .035) 70%); -webkit-backdrop-filter: blur(22px) saturate(140%); backdrop-filter: blur(22px) saturate(140%);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 24px 50px -32px rgba(0, 0, 0, .7); }
.lr-gt::before, .lr-adv::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .5s; background: radial-gradient(260px circle at var(--mx, 30%) var(--my, 0%), rgba(255, 255, 255, .14), transparent 60%); }
.lr-gt:hover::before, .lr-adv:hover::after { opacity: 1; }
.lr-gt .ic { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: linear-gradient(135deg, rgba(255, 255, 255, .16), rgba(255, 255, 255, .04)); box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .28), 0 8px 18px -10px rgba(0, 0, 0, .6); }
.lr-gt svg { width: 21px; height: 21px; fill: none; stroke: #E9F3EE; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lr-gt b { display: block; font-weight: 500; font-size: 15px; letter-spacing: -.015em; color: #fff; }
.lr-gt span:last-child { font-size: 13px; line-height: 1.35; color: rgba(233, 243, 238, .62); }
.lr-trust2-note { margin-top: 22px; text-align: center; font-size: 14.5px; color: rgba(233, 243, 238, .7); }

/* ================================================================ track every bet */
.lr-track { overflow: hidden; }
.lr-track-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.lr-track-head .lr-h2 { max-width: 14ch; }
.lr-rail-ctl { display: flex; gap: 10px; flex: none; }
.lr-arrow { width: 50px; height: 50px; border-radius: 50%; border: 0; display: grid; place-items: center; cursor: pointer; color: var(--ink); background: var(--mist); box-shadow: inset 0 1px 0 #fff, 0 6px 16px -10px rgba(12, 14, 13, .35); transition: background-color .25s, opacity .25s, transform .25s; }
.lr-arrow:hover { background: #E4ECE8; }
.lr-arrow:active { transform: scale(.96); }
.lr-arrow[disabled] { opacity: .35; cursor: default; }
.lr-arrow svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lr-rail { --edge: max(var(--gutter), calc((100vw - var(--wrap)) / 2 + var(--gutter))); margin-top: clamp(40px, 4.5vw, 64px); position: relative; }
.lr-rail::before, .lr-rail::after { content: ""; position: absolute; top: 0; bottom: 0; width: clamp(24px, 8vw, 140px); z-index: 2; pointer-events: none; transition: opacity .4s; }
.lr-rail::before { left: 0; background: linear-gradient(90deg, #fff, rgba(255, 255, 255, 0)); opacity: 0; }
.lr-rail::after { right: 0; background: linear-gradient(270deg, #fff, rgba(255, 255, 255, 0)); }
.lr-rail[data-moved]::before { opacity: 1; }
.lr-rail[data-end]::after { opacity: 0; }
.lr-cards { list-style: none; margin: 0; display: flex; gap: 16px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-left: var(--edge); padding: 6px var(--edge) 22px; scrollbar-width: none; cursor: grab; }
.lr-cards::-webkit-scrollbar { display: none; }
.lr-cards.drag { cursor: grabbing; scroll-snap-type: none; }
.lr-cards:focus-visible { outline: 2px solid var(--money); outline-offset: -2px; border-radius: 12px; }
.lr-card { position: relative; flex: none; width: clamp(290px, 27vw, 356px); scroll-snap-align: start; padding: 12px 12px 26px; border-radius: 30px; background: var(--mist); box-shadow: inset 0 1px 0 #fff; transform: perspective(1200px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease); user-select: none; -webkit-user-select: none; }
.lr-card h3 { margin: 22px 12px 0; font-weight: 400; font-size: 20px; line-height: 1.2; letter-spacing: -.025em; color: var(--ink); display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.lr-card > p { margin: 8px 12px 0; font-size: 15px; line-height: 1.5; color: var(--stone); }
.lr-soon { display: inline-flex; align-items: center; height: 22px; padding: 0 9px; border-radius: 999px; font-size: 11.5px; font-weight: 500; letter-spacing: 0; color: var(--money); background: var(--money-a); }
.pane { position: relative; overflow: hidden; height: 300px; padding: 18px; border-radius: 22px; color: #E9F3EE; font-size: 13px;
  background: radial-gradient(ellipse 90% 60% at 0% 0%, rgba(63, 147, 110, .28), transparent 70%), #0C110E;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 20px 40px -26px rgba(12, 14, 13, .6); }
.pane::after { content: ""; position: absolute; inset: -20%; pointer-events: none; transform: translateX(-110%) rotate(8deg);
  background: linear-gradient(100deg, transparent 38%, rgba(168, 237, 196, .07) 46%, rgba(255, 255, 255, .16) 50%, rgba(168, 237, 196, .07) 54%, transparent 62%); }
.lr-card.swept .pane::after { animation: lrSweep 1.6s var(--ease) both; }
@keyframes lrSweep { to { transform: translateX(110%) rotate(8deg); } }
.pane .ph { display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; color: #E9F3EE; }
.pane .dim, .pane .ph .dim { color: #8C9590; }
.pane .foot { position: absolute; left: 18px; right: 18px; bottom: 16px; font-size: 11.5px; color: #8C9590; }
.pane .foot b { display: block; font-weight: 400; font-size: 13px; color: #fff; margin-bottom: 2px; }
.feed ul { list-style: none; padding: 0; margin-top: 12px; }
.feed li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(233, 243, 238, .07); }
.feed i { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-style: normal; font-size: 9.5px; font-weight: 500; color: #A7B0AB; background: rgba(233, 243, 238, .06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.feed span { font-size: 12.5px; color: #fff; }
.feed span small, .feed b small { display: block; font-size: 10.5px; color: #8C9590; font-weight: 400; }
.feed b { font-weight: 400; font-size: 12.5px; text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.pot .ring { position: relative; width: 168px; height: 168px; margin: 18px auto 0; }
.pot svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.pot circle { fill: none; stroke: rgba(233, 243, 238, .08); stroke-width: 8; }
.pot circle.v { stroke: #87CCAA; stroke-linecap: round; stroke-dasharray: 0 100; filter: drop-shadow(0 0 5px rgba(135, 204, 170, .7)); transition: stroke-dasharray 1.4s var(--ease); }
.lr-card.swept .pot circle.v, .lr-reduce .pot circle.v { stroke-dasharray: var(--v) 100; }
.pot .ring div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.pot .ring b { font-weight: 300; font-size: 32px; letter-spacing: -.05em; color: #87CCAA; }
.pot .ring b i { font-style: normal; color: rgba(135, 204, 170, .45); }
.pot .ring small { font-size: 11px; color: #8C9590; }
.streak .day { margin-top: 26px; font-weight: 300; font-size: 64px; letter-spacing: -.06em; line-height: 1; color: #fff; }
.streak .saved { margin-top: 10px; font-size: 22px; font-weight: 300; letter-spacing: -.035em; color: #87CCAA; }
.streak .saved i { font-style: normal; color: rgba(135, 204, 170, .45); }
.streak .saved small { display: block; font-size: 11.5px; letter-spacing: 0; color: #8C9590; margin-top: 2px; }
.streak .week { position: absolute; left: 18px; right: 18px; bottom: 18px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.streak .week span { aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; font-size: 10px; color: #87CCAA; background: radial-gradient(circle at 34% 28%, rgba(168, 237, 196, .35), rgba(63, 147, 110, .18)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15); }
.streak .week .today { color: #0C110E; background: radial-gradient(circle at 34% 28%, #fff, #E9F3EE 40%, #A8EDC4); box-shadow: 0 0 12px rgba(168, 237, 196, .5); }
.mini-heat { margin-top: 16px; display: grid; grid-template-columns: repeat(24, 1fr); gap: 3px 0; }
.mini-heat i { aspect-ratio: 1; position: relative; }
.mini-heat i::before, .mini-heat i::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--c, rgba(233, 243, 238, .14)); border-radius: 1px; transform: translate(-50%, -50%) scale(var(--s, .5)); }
.mini-heat i::before { width: 72%; height: 1.4px; }
.mini-heat i::after { width: 1.4px; height: 72%; }
.mini-heat i.pk::before, .mini-heat i.pk::after { box-shadow: 0 0 8px #A8EDC4; }
.chase .tl { margin-top: 16px; }
.chase .row { display: grid; grid-template-columns: 56px 12px minmax(0, 1fr); gap: 10px; align-items: center; padding: 8px 0; font-size: 12.5px; }
.chase .row span { color: #8C9590; font-variant-numeric: tabular-nums; }
.chase .row i { width: 8px; height: 8px; border-radius: 50%; background: #E9F3EE; }
.chase .row b { font-weight: 400; color: #fff; }
.chase .loss i { background: #535A56; }
.chase .loss b { color: #A7B0AB; }
.chase .flag { position: relative; margin-top: 6px; padding: 4px 12px 12px; margin-left: -12px; margin-right: -6px; border-radius: 14px; background: rgba(239, 200, 118, .07); box-shadow: inset 0 0 0 1px rgba(239, 200, 118, .18); }
.chase .flag i { background: #EFC876; }
.chase .flag em { display: block; margin-top: 4px; font-style: normal; font-size: 11.5px; color: #EFC876; }
.group ul { list-style: none; padding: 0; margin-top: 14px; }
.group li { display: grid; grid-template-columns: 36px 1fr auto; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid rgba(233, 243, 238, .07); }
.group i { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 10.5px; color: #0C110E; background: radial-gradient(circle at 34% 28%, #fff, #E9F3EE 40%, #A7B0AB); }
.group li:first-child i { background: radial-gradient(circle at 34% 28%, #fff, #E9F3EE 40%, #87CCAA); }
.group span { font-size: 13px; color: #fff; }
.group b { font-weight: 500; font-size: 11px; padding: 5px 10px; border-radius: 999px; }
.group b.ok { color: #87CCAA; background: rgba(135, 204, 170, .12); }
.group b.near { color: #EFC876; background: rgba(239, 200, 118, .1); }
.live .live-dot { display: inline-flex; align-items: center; gap: 6px; color: #87CCAA; }
.live .live-dot::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #87CCAA; box-shadow: 0 0 8px rgba(135, 204, 170, .8); }
.live .open { margin-top: 16px; padding: 14px; border-radius: 16px; background: linear-gradient(180deg, rgba(233, 243, 238, .08), rgba(233, 243, 238, .03)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.live .open b { display: block; font-weight: 400; font-size: 18px; letter-spacing: -.02em; color: #fff; }
.live .open small { display: block; margin-top: 3px; font-size: 11.5px; color: #8C9590; }
.lr-card.soon .pane { opacity: .82; }
.lr-rail-bar { margin-top: 18px; height: 2px; border-radius: 2px; background: var(--ink-a); overflow: hidden; }
.lr-rail-bar i { display: block; height: 100%; width: 30%; border-radius: 2px; background: var(--money); transform: translateX(var(--bx, 0%)); }
.lr-track-tag { margin-top: 16px; }

/* ================================================================ always-on support */
.lr-support { text-align: left; }
.lr-crosses { position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: .9;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 11.5v5M11.5 14h5' stroke='%23E9F3EE' stroke-opacity='.07' stroke-width='1'/%3E%3C/svg%3E");
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 80%); mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000, transparent 80%); }
.lr-support::before { background: radial-gradient(ellipse 55% 45% at 22% 0%, rgba(22, 72, 50, .7), transparent 70%), radial-gradient(ellipse 60% 50% at 80% 100%, rgba(63, 147, 110, .18), transparent 70%) !important; }
.lr-pearl2 { display: block; width: 22px; height: 22px; margin: 0 auto 26px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff 0%, #F2F8F5 30%, #C9DAD2 72%, #8FA89B 100%); box-shadow: 0 0 18px rgba(135, 204, 170, .45), 0 0 0 0 rgba(168, 237, 196, 0); transition: box-shadow .9s var(--ease), transform .9s var(--ease); }
.lr-pearl2.on { transform: scale(1.12); box-shadow: 0 0 30px rgba(168, 237, 196, .75), 0 0 70px rgba(135, 204, 170, .35); }
.lr-support .lr-kicker { color: #87CCAA; }
.lr-h2-night { color: #535A56 !important; }
.lr-h2-night .w { color: #FFFFFF; }
.lr-support .lr-head.c .lr-body { margin-top: 20px; }
.lr-stack-wrap { margin: clamp(44px, 5vw, 64px) auto 0; width: min(470px, 100%); }
.lr-stack { list-style: none; padding: 0; position: relative; height: 360px; }
.lr-note { position: absolute; left: 0; right: 0; top: 0; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 14px 16px; border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .06) 70%); -webkit-backdrop-filter: blur(26px) saturate(160%); backdrop-filter: blur(26px) saturate(160%);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 24px 50px -26px rgba(0, 0, 0, .9);
  transition: transform .9s var(--ease), opacity .7s var(--ease), filter .7s var(--ease); transform-origin: 50% 0;
  --y: 0px; --s: 1; opacity: 1; filter: none; transform: translateY(var(--y)) scale(var(--s)); }
.lr-note[data-pos="wait"] { opacity: 0; filter: blur(12px); --y: -22px; --s: 1.03; }
.lr-note[data-pos="1"] { opacity: .62; --y: 16px; --s: .95; }
.lr-note[data-pos="2"] { opacity: .3; --y: 30px; --s: .9; }
.lr-note[data-pos="3"] { opacity: 0; --y: 40px; --s: .86; }
.lr-note .app { width: 38px; height: 38px; border-radius: 10px; background: #000 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-30 -30 168 144'%3E%3Crect width='48' height='24' rx='12' fill='%23E9F3EE'/%3E%3Crect x='30' y='30' width='48' height='24' rx='12' fill='%23E9F3EE'/%3E%3Crect x='60' y='60' width='48' height='24' rx='12' fill='%2387CCAA'/%3E%3C/svg%3E") center / 76% no-repeat; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
.lr-note .t b { display: block; font-weight: 500; font-size: 13.5px; color: #fff; }
.lr-note .t span { display: block; margin-top: 2px; font-size: 14.5px; line-height: 1.4; color: rgba(233, 243, 238, .86); }
.lr-note time { font-size: 11.5px; color: #8C9590; white-space: nowrap; padding-top: 1px; }
.lr-stack-note { margin-top: 18px; text-align: center; font-size: 13px; color: #8C9590; display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 12px; }
.lr-advice { margin-top: clamp(64px, 7vw, 96px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.lr-adv { position: relative; overflow: hidden; isolation: isolate; display: flex; flex-direction: column; padding: 26px 26px 24px; border-radius: 28px;
  background: linear-gradient(160deg, rgba(233, 243, 238, .085), rgba(233, 243, 238, .025) 70%); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(233, 243, 238, .05), 0 40px 80px -40px rgba(0, 0, 0, .9);
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease); }
/* the lens: under the pointer the cross field behind the glass bends and grows, like looking through thick glass */
.lr-adv::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0; transition: opacity .5s;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Cpath d='M14 11v6M11 14h6' stroke='%23A8EDC4' stroke-opacity='.28' stroke-width='1.1'/%3E%3C/svg%3E");
  background-size: 34px 34px; background-position: calc(var(--mx, 50%) * -.12) calc(var(--my, 50%) * -.12);
  -webkit-mask-image: radial-gradient(150px circle at var(--mx, 50%) var(--my, 50%), #000 0%, transparent 70%); mask-image: radial-gradient(150px circle at var(--mx, 50%) var(--my, 50%), #000 0%, transparent 70%); }
.lr-adv:hover::before { opacity: 1; }
.lr-adv .cat { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #8C9590; }
.lr-adv .cat i { width: 6px; height: 6px; border-radius: 50%; background: #87CCAA; }
.lr-adv h3 { margin-top: 14px; font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -.025em; color: #fff; }
.lr-adv > p { margin-top: 10px; font-size: 15px; line-height: 1.5; color: rgba(233, 243, 238, .7); }
.lr-adv .viz { margin: 24px 0 20px; height: 76px; position: relative; }
.viz.days { display: flex; align-items: flex-end; gap: 7px; padding-bottom: 18px; }
.viz.days span { flex: 1; height: var(--h); border-radius: 5px 5px 2px 2px; background: rgba(233, 243, 238, .12); }
.viz.days span.lit { background: linear-gradient(180deg, #A8EDC4, #3F936E); box-shadow: 0 0 18px rgba(135, 204, 170, .45); }
.viz em { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; font-style: normal; font-size: 10.5px; color: #535A56; word-spacing: 0; }
.viz.days em { letter-spacing: 0; justify-content: space-around; }
.viz.split { display: flex; gap: 4px; align-items: center; }
.viz.split span { height: 44px; width: var(--w); border-radius: 12px; display: flex; align-items: center; padding: 0 12px; font-size: 12px; white-space: nowrap; overflow: hidden; color: #8C9590; background: rgba(233, 243, 238, .07); }
.viz.split span.lit { color: #0C110E; font-weight: 500; background: linear-gradient(135deg, #A8EDC4, #87CCAA 50%, #3F936E); box-shadow: 0 0 22px rgba(135, 204, 170, .35); }
.viz.stair svg { width: 100%; height: 56px; overflow: visible; }
.viz.stair path { fill: none; stroke: #87CCAA; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.viz.stair path.glow { stroke: rgba(135, 204, 170, .3); stroke-width: 9; filter: blur(4px); }
.lr-plan-link { margin-top: auto; align-self: flex-start; font-size: 14.5px; color: #87CCAA !important; text-decoration: none; padding: 6px 0; border-bottom: 1px solid rgba(135, 204, 170, .35); transition: color .25s, border-color .25s; }
.lr-plan-link:hover { color: #A8EDC4 !important; border-color: #A8EDC4; }
.lr-later { margin-top: clamp(48px, 5vw, 72px); }
.lr-later-h { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 15px; color: #A7B0AB; }
.lr-night .lr-soon { color: #87CCAA; background: rgba(135, 204, 170, .12); }
.lr-later ul { list-style: none; padding: 0; margin-top: 18px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.lr-later li { padding: 15px 18px; border-radius: 18px; font-size: 14.5px; line-height: 1.45; color: rgba(233, 243, 238, .62); background: rgba(233, 243, 238, .03); box-shadow: inset 0 0 0 1px rgba(233, 243, 238, .08); }

/* ================================================================ responsive */
@media (max-width: 1040px) {
  .lr-stage2 { height: auto; padding-bottom: 40px; display: flex; flex-direction: column; align-items: center; gap: 12px; perspective: none; }
  .lr-phone2 { position: relative; left: auto; margin: 0 0 18px; transform: none !important; }
  .lr-float { position: relative; left: auto; top: auto; transform: none !important; opacity: 1 !important; width: min(420px, 100%); }
  .lr-stage2::before, .lr-stage2::after { display: none; }
  .lr-stage-tag { position: static; margin-top: 6px; }
  .lr-trust2 ul { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lr-advice { grid-template-columns: minmax(0, 1fr); max-width: 560px; margin-left: auto; margin-right: auto; }
}
@media (max-width: 640px) {
  .lr-phone2 { width: 272px; }
  .lr-trust2 ul { grid-template-columns: minmax(0, 1fr); }
  .lr-track-head { align-items: flex-start; flex-direction: column; }
  .lr-rail-ctl { display: none; }
  .lr-card { width: 84vw; }
  .lr-later ul { grid-template-columns: minmax(0, 1fr); }
  .lr-note .t span { font-size: 14px; }
  .lr-stack { height: 400px; }
}
@media (prefers-reduced-motion: reduce) {
  .lr-light, .lr-phone2, .lr-card, .lr-adv, .lr-note, .lr-pearl2 { transition: none !important; }
  .lr-card.swept .pane::after { animation: none; }
}

/* ---------------------------------------------------------------- round 1 fixes */
.lr-forest { background: radial-gradient(ellipse 80% 70% at 12% -8%, #2A7354 0%, rgba(42, 115, 84, 0) 62%), linear-gradient(172deg, #123F2D 0%, #0B2C1F 38%, #061D13 70%, #020C07 100%); }
.lr-light { left: -26vw; top: -52vw; background: radial-gradient(closest-side, rgba(190, 245, 214, .42), rgba(135, 204, 170, .17) 40%, rgba(63, 147, 110, .06) 62%, transparent 75%); }
.lr-silk { -webkit-mask-image: radial-gradient(ellipse 90% 80% at 20% 10%, #000 20%, rgba(0, 0, 0, .35) 70%, rgba(0, 0, 0, .15)); mask-image: radial-gradient(ellipse 90% 80% at 20% 10%, #000 20%, rgba(0, 0, 0, .35) 70%, rgba(0, 0, 0, .15)); }
.lr-home-scr .les { margin-top: 8px; display: flex; gap: 10px; align-items: flex-start; padding: 10px 11px; border-radius: 14px; background: linear-gradient(135deg, rgba(135, 204, 170, .12), rgba(135, 204, 170, .03)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); font-size: 10.5px; line-height: 1.4; color: #A7B0AB; }
.lr-home-scr .les i { flex: none; width: 16px; height: 16px; margin-top: 1px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff, #E9F3EE 35%, #A8EDC4); box-shadow: 0 0 10px rgba(168, 237, 196, .6); }
.lr-home-scr .les b { display: block; font-weight: 500; color: #fff; font-size: 11px; }
.lr-home-scr .tabs { margin-top: 10px; }
.lr-home-scr { bottom: 18px; }
.viz.days { padding-bottom: 0; height: 64px; margin-bottom: 6px !important; }
.viz-days-l { display: flex; gap: 7px; margin-bottom: 18px; }
.viz-days-l span { flex: 1; text-align: center; font-size: 10.5px; color: #535A56; }
.viz-days-l span:last-child { color: #87CCAA; }
.viz.stair { height: 76px; }
.viz.stair .end { position: absolute; right: 0; top: 41px; width: 11px; height: 11px; margin-right: -2px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff, #E9F3EE 40%, #A8EDC4); box-shadow: 0 0 14px rgba(168, 237, 196, .7); }
.lr-connect .lr-steps { margin-bottom: 0; }
@media (max-width: 1040px) {
  .lr-stage2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; max-width: 620px; margin-left: auto; margin-right: auto; justify-items: stretch; }
  .lr-phone2 { grid-column: 1 / -1; justify-self: center; }
  .lr-float { width: auto; padding: 13px 14px 12px; }
  .lr-float b { font-size: 24px; }
  .lr-stage-tag { grid-column: 1 / -1; justify-self: center; }
}
@media (max-width: 400px) { .lr-float b { font-size: 21px; } .lr-float small { font-size: 11px; } }

/* ================================================================ round 2 (Oct 20, 2026)
   The hero field is a real lit satin render (assets/lr/forest-silk.webp):
   folds shaded by one light from the top left, in the bible's Night set.
   A shade rests behind the words; the light pool sits over the lit corner. */
.lr-forest { background: #020A06 !important; }
.lr-forest::after { opacity: .05; }
.lr-silk-img { position: absolute; z-index: -3; inset: -3%; pointer-events: none; background: url("/assets/lr/forest-silk.webp") 30% 20% / cover no-repeat; opacity: .92; transform: translate3d(0, var(--sy, 0px), 0) scale(1.04); }
@media (max-width: 760px) { .lr-silk-img { background-image: url("/assets/lr/forest-silk-tall.webp"); background-position: 30% 0%; } }
@media (prefers-reduced-motion: no-preference) {
  .lr-silk-img { animation: lrSilk 38s ease-in-out infinite alternate; }
  .lr-forest.paused .lr-silk-img { animation-play-state: paused; }
}
@keyframes lrSilk { from { background-position: 28% 18%; } to { background-position: 36% 26%; } }
.lr-shade { position: absolute; z-index: -2; inset: 0; pointer-events: none;
  background:
    radial-gradient(ellipse 46% 30% at 50% 24%, rgba(1, 8, 5, .62), rgba(1, 8, 5, 0) 100%),
    radial-gradient(ellipse 70% 40% at 50% 66%, rgba(1, 8, 5, .5), rgba(1, 8, 5, 0) 100%),
    linear-gradient(180deg, rgba(2, 10, 6, .2) 0%, rgba(2, 10, 6, 0) 30%, rgba(2, 10, 6, .55) 78%, #020A06 100%); }
.lr-light { left: -30vw; top: -58vw; background: radial-gradient(closest-side, rgba(200, 248, 222, .26), rgba(135, 204, 170, .1) 42%, transparent 72%); mix-blend-mode: screen; }
.lr-silk { display: none; }

/* ---------------------------------------------------------------- the phone: the brand bible's Home */
.lr-home-scr { inset: 50px 16px 14px !important; align-items: stretch; }
.lr-home-scr .trust { justify-content: flex-start; font-size: 10.5px; color: #A7B0AB; }
.lr-home-scr .ring { position: relative; width: 168px; height: 168px; margin: 20px auto 0; }
.lr-home-scr .ring svg { width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.lr-home-scr .ring circle { fill: none; stroke-width: 10; }
.lr-home-scr .ring .trk { stroke: rgba(233, 243, 238, .07); }
.lr-home-scr .ring .arc { stroke-linecap: round; stroke-dasharray: 75.3 100; filter: drop-shadow(0 0 6px rgba(135, 204, 170, .55)); }
.lr-home-scr .ring div { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.lr-home-scr .ring b { font-weight: 300; font-size: 40px; letter-spacing: -.05em; line-height: 1; color: #fff; }
.lr-home-scr .ring small { margin-top: 6px; font-size: 11px; color: #A7B0AB; }
.lr-home-scr .days { margin-top: 12px; text-align: center; font-size: 11.5px; color: #A7B0AB; }
.lr-home-scr .steps { margin-top: 10px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; align-items: end; height: 42px; }
.lr-home-scr .steps span { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 5px; height: 100%; font-size: 8.5px; color: #8C9590; }
.lr-home-scr .steps i { display: block; width: 100%; height: 3px; border-radius: 3px; background: rgba(233, 243, 238, .12); }
.lr-home-scr .steps .d1 i { height: 26px; border-radius: 6px; background: linear-gradient(180deg, #A8EDC4, #3F936E); box-shadow: 0 0 10px rgba(135, 204, 170, .35); }
.lr-home-scr .steps .d2 i { height: 6px; background: linear-gradient(180deg, #A8EDC4, #87CCAA); }
.lr-home-scr .tonight { margin-top: 14px; padding: 12px 13px 13px; border-radius: 18px; background: linear-gradient(180deg, rgba(233, 243, 238, .08), rgba(233, 243, 238, .03)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(233, 243, 238, .05); }
.lr-home-scr .tonight span { display: block; font-size: 9.5px; color: #8C9590; }
.lr-home-scr .tonight b { display: block; margin-top: 3px; font-weight: 400; font-size: 13.5px; line-height: 1.3; letter-spacing: -.015em; color: #fff; }
.lr-home-scr .tonight em { display: inline-flex; margin-top: 10px; padding: 7px 12px; border-radius: 999px; font-style: normal; font-size: 10.5px; color: #0C0E0D; background: linear-gradient(180deg, #fff, #E4ECE8); box-shadow: inset 0 1px 0 #fff; }
.lr-home-scr .status { margin-top: 12px; display: flex; align-items: center; gap: 6px; font-size: 10.5px; color: #fff; }
.lr-home-scr .status i { width: 6px; height: 6px; border-radius: 50%; background: #E9F3EE; box-shadow: 0 0 6px rgba(233, 243, 238, .7); }
.lr-home-scr .status span { color: #8C9590; }
.lr-home-scr .tabbar { margin-top: auto; display: grid; grid-template-columns: repeat(5, 1fr); padding: 6px 4px; border-radius: 22px; background: linear-gradient(180deg, rgba(233, 243, 238, .1), rgba(233, 243, 238, .04)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(233, 243, 238, .06), 0 10px 24px -12px rgba(0, 0, 0, .8); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); }
.lr-home-scr .tabbar span { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 8px; color: #8C9590; padding-top: 2px; }
.lr-home-scr .tabbar svg { width: 30px; height: 26px; padding: 4px 7px; border-radius: 13px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; box-sizing: border-box; }
.lr-home-scr .tabbar .on { color: #fff; }
.lr-home-scr .tabbar .on svg { background: rgba(233, 243, 238, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2); }
.lr-home-scr .les, .lr-home-scr .tiles, .lr-home-scr .win, .lr-home-scr .tabs { display: none; }
@media (max-width: 640px) {
  .lr-home-scr .ring { width: 138px; height: 138px; margin-top: 14px; }
  .lr-home-scr .ring b { font-size: 33px; }
  .lr-home-scr .days { margin-top: 8px; }
  .lr-home-scr .steps { height: 34px; margin-top: 6px; }
  .lr-home-scr .steps .d1 i { height: 20px; }
  .lr-home-scr .tonight { margin-top: 10px; padding: 10px 11px 11px; }
  .lr-home-scr .tonight b { font-size: 12.5px; }
  .lr-home-scr .tonight em { margin-top: 8px; }
  .lr-home-scr .status { margin-top: 9px; }
}

/* ---------------------------------------------------------------- round 3 (Oct 20, 2026)
   No cards around the phone. The three promises sit under the buttons as
   small lit dots, the same way "Sample numbers" is marked. */
.lr-dots { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 26px; }
.lr-dots li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: rgba(233, 243, 238, .72); }
.lr-dots li::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #87CCAA; box-shadow: 0 0 8px rgba(135, 204, 170, .7); }
.lr-stage2 { height: clamp(640px, 46vw, 660px); }
.lr-stage-tag { right: auto; left: 50%; bottom: 8px; transform: translateX(-50%); }
.lr-hero2-foot { padding-bottom: clamp(56px, 6vw, 88px); }
.lr-hero2-foot .lr-trust2-note { margin-top: 18px; }
@media (max-width: 1040px) {
  .lr-stage2 { height: auto; display: flex; flex-direction: column; align-items: center; }
  .lr-stage-tag { transform: none; }
}
@media (max-width: 640px) { .lr-dots { gap: 8px 16px; margin-top: 22px; } .lr-dots li { font-size: 13px; gap: 7px; } }

/* ---------------------------------------------------------------- round 4: the satin moves (WebGL over the still) */
.lr-silk-gl { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 1.6s var(--ease); }
.lr-silk-gl.on { opacity: 1; }
.lr-silk-img:has(.lr-silk-gl.on) { animation: none; }

/* ================================================================ round 4: track on Night, a different motion per card */
.lr-track-night::before { background: radial-gradient(ellipse 50% 50% at 85% 0%, rgba(22, 72, 50, .6), transparent 70%), radial-gradient(ellipse 60% 50% at 10% 100%, rgba(63, 147, 110, .14), transparent 70%) !important; }
.lr-track-night .lr-track-head .lr-h2 { max-width: 16ch; }
.lr-track-night .lr-arrow { color: #fff; background: rgba(233, 243, 238, .08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(233, 243, 238, .06); }
.lr-track-night .lr-arrow:hover { background: rgba(233, 243, 238, .14); }
.lr-track-night .lr-rail::before { background: linear-gradient(90deg, #000, rgba(0, 0, 0, 0)); }
.lr-track-night .lr-rail::after { background: linear-gradient(270deg, #000, rgba(0, 0, 0, 0)); }
.lr-track-night .lr-card { background: linear-gradient(180deg, rgba(233, 243, 238, .06), rgba(233, 243, 238, .02)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(233, 243, 238, .05); }
.lr-track-night .lr-card h3 { color: #fff; }
.lr-track-night .lr-card > p { color: #A7B0AB; }
.lr-track-night .lr-rail-bar { background: rgba(233, 243, 238, .1); }
.lr-track-night .lr-rail-bar i { background: #87CCAA; }
.lr-track-night .lr-track-tag { color: #8C9590; }
.lr-track-night .pane { background: radial-gradient(ellipse 90% 60% at 0% 0%, rgba(63, 147, 110, .22), transparent 70%), #070C0A; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(233, 243, 238, .04); }
.lr-card .pane::after { display: none; }
.pane .ph, .pane .foot { position: relative; z-index: 2; }

/* 1 feed: new bets slide in at the top, the oldest leaves at the bottom */
.fx-feed .rows { list-style: none; padding: 0; margin-top: 10px; position: relative; height: 236px; overflow: hidden; }
.fx-feed .rows li { position: absolute; left: 0; right: 0; height: 56px; display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; border-top: 1px solid rgba(233, 243, 238, .07);
  transform: translateY(calc(var(--i) * 58px)); transition: transform .9s var(--ease), opacity .7s var(--ease), filter .7s var(--ease); }
.fx-feed .rows li.enter { opacity: 0; filter: blur(8px); transform: translateY(-40px) scale(.98); }
.fx-feed .rows li.leave { opacity: 0; transform: translateY(calc(var(--i) * 58px + 20px)); }
.fx-feed .rows li.new b { color: #A8EDC4; }
.fx-feed i { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; font-style: normal; font-size: 9.5px; font-weight: 500; color: #A7B0AB; background: rgba(233, 243, 238, .06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }
.fx-feed span { font-size: 12.5px; color: #fff; min-width: 0; }
.fx-feed small { display: block; font-size: 10.5px; color: #8C9590; font-weight: 400; }
.fx-feed b { font-weight: 400; font-size: 12.5px; text-align: right; color: #fff; font-variant-numeric: tabular-nums; transition: color 1.2s; }

/* 2 pot: each bet pours into the bar; the room left steps down */
.fx-pot .left { margin-top: 34px; display: flex; align-items: baseline; gap: 10px; }
.fx-pot .left b { font-weight: 300; font-size: 56px; letter-spacing: -.055em; line-height: 1; color: #87CCAA; transition: opacity .35s, transform .5s var(--ease); display: inline-block; }
.fx-pot .left b.swap { opacity: 0; transform: translateY(8px); }
.fx-pot .left span { font-size: 13px; color: #A7B0AB; }
.fx-pot .bar { position: relative; margin-top: 26px; height: 14px; border-radius: 14px; background: rgba(233, 243, 238, .07); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .6); overflow: hidden; }
.fx-pot .fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 14px; background: linear-gradient(90deg, #3F936E, #87CCAA 70%, #A8EDC4); transition: width 1.1s var(--ease); }
.fx-pot .fill::after { content: ""; position: absolute; right: 0; top: 2px; bottom: 2px; width: 3px; border-radius: 3px; background: #fff; opacity: .8; }
.fx-pot .cap { position: absolute; right: 0; top: -4px; bottom: -4px; width: 1.5px; background: rgba(233, 243, 238, .4); }
.fx-pot .wk { margin-top: 16px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.fx-pot .wk span { text-align: center; font-size: 10.5px; padding: 6px 0; border-radius: 9px; color: #535A56; background: rgba(233, 243, 238, .03); transition: color .5s, background-color .5s; }
.fx-pot .wk span.past { color: #A7B0AB; background: rgba(233, 243, 238, .06); }
.fx-pot .wk span.now { color: #0C110E; background: #E9F3EE; }
.fx-pot .foot { transition: opacity .4s; }
/* the weekly number as a dial (Kene, Oct 28, 2026): the arc is the room
   left, so it shortens as the week is bet; its colour runs ember to mint,
   so a nearly spent week shows only the warm end */
.fx-pot .dial { position: relative; width: min(236px, 84%); margin: 20px auto 0; }
.fx-pot .dial svg { display: block; width: 100%; overflow: visible; }
.fx-pot .dial .trk { fill: none; stroke: rgba(233, 243, 238, .08); stroke-width: 9; stroke-linecap: round; }
.fx-pot .dial .val { fill: none; stroke: url(#lrPotG); stroke-width: 9; stroke-linecap: round; stroke-dasharray: 100 100; transition: stroke-dasharray 1.1s var(--ease); filter: drop-shadow(0 0 6px rgba(135, 204, 170, .35)); }
.fx-pot .dial .pinr { transform-origin: 100px 104px; transform: rotate(180deg); transition: transform 1.1s var(--ease); }
.fx-pot .dial .pin { fill: #E9F3EE; filter: drop-shadow(0 0 6px rgba(168, 237, 196, .9)); }
.fx-pot .dial .left { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; flex-direction: column; align-items: center; gap: 6px; }
.fx-pot .dial .left b { font-size: 46px; color: #fff; }
.fx-pot .dial .left span { font-size: 12px; }

/* 3 streak: the day ticks forward; a bead walks down the stair */
.fx-streak .day { margin-top: 22px; display: flex; align-items: baseline; gap: 12px; }
.fx-streak .lbl { font-weight: 300; font-size: 30px; letter-spacing: -.04em; color: #8C9590; }
.fx-streak .num { position: relative; display: inline-block; height: 72px; overflow: hidden; }
.fx-streak .num span { display: block; font-weight: 300; font-size: 72px; line-height: 1; letter-spacing: -.06em; color: #fff; transition: transform .8s var(--ease), opacity .8s var(--ease); }
.fx-streak .num span.out { transform: translateY(-100%); opacity: 0; position: absolute; left: 0; top: 0; }
.fx-streak .num span.in { transform: translateY(100%); opacity: 0; }
.fx-streak .kept { margin-top: 8px; font-size: 15px; color: #87CCAA; transition: opacity .4s; }
.fx-streak .trail { position: absolute; left: 18px; right: 18px; bottom: 22px; height: 60px; }
.fx-streak .trail svg { width: 100%; height: 100%; overflow: visible; }
.fx-streak .trail path { fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.fx-streak .trail .base { stroke: rgba(233, 243, 238, .1); }
.fx-streak .trail .lit { stroke: #87CCAA; stroke-dasharray: var(--len, 400); stroke-dashoffset: var(--off, 400); transition: stroke-dashoffset 1s var(--ease); filter: drop-shadow(0 0 4px rgba(135, 204, 170, .7)); }
.fx-streak .trail i { position: absolute; left: 0; top: 0; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff, #E9F3EE 40%, #A8EDC4); box-shadow: 0 0 12px rgba(168, 237, 196, .8); transform: translate(var(--bx, 0px), var(--by, 0px)); transition: transform 1s var(--ease); }

/* 4 risk: a playhead walks the day; the window lights when it arrives */
.fx-risk .tl { position: relative; margin-top: 22px; height: 170px; }
.fx-risk .cols { position: absolute; left: 0; right: 0; top: 10px; bottom: 26px; display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; align-items: end; }
.fx-risk .cols i { display: block; height: var(--h); border-radius: 2px; background: rgba(233, 243, 238, .12); transform-origin: bottom; transform: scaleY(var(--g, 0)); transition: transform .9s var(--ease), background-color .6s, box-shadow .6s; }
.fx-risk .cols i.hot { background: rgba(135, 204, 170, .45); }
.fx-risk.lit .cols i.hot { background: #A8EDC4; box-shadow: 0 0 10px rgba(168, 237, 196, .55); }
.fx-risk .win { position: absolute; top: 0; bottom: 26px; left: calc(7 / 12 * 100%); width: calc(4 / 12 * 100%); border-radius: 10px; background: linear-gradient(180deg, rgba(135, 204, 170, .16), rgba(135, 204, 170, .03)); box-shadow: inset 0 0 0 1px rgba(135, 204, 170, .22); opacity: .25; transition: opacity .7s var(--ease); }
.fx-risk .win span { position: absolute; left: 8px; top: 7px; font-size: 10.5px; color: #A8EDC4; opacity: 0; transition: opacity .6s; white-space: nowrap; }
.fx-risk.lit .win { opacity: 1; }
.fx-risk.lit .win span { opacity: 1; }
.fx-risk .head { position: absolute; top: 0; bottom: 26px; left: 0; width: 1.5px; background: linear-gradient(180deg, transparent, #E9F3EE 30%, #E9F3EE 70%, transparent); transform: translateX(var(--hx, 0px)); opacity: .85; }
.fx-risk .hrs { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; font-size: 10px; color: #535A56; }
.fx-risk .foot { transition: opacity .5s; opacity: .5; }
.fx-risk.lit .foot { opacity: 1; }

/* 5 chase: the night is drawn bet by bet, then bracketed */
.fx-chase .seq { position: relative; margin-top: 18px; padding-right: 22px; }
.fx-chase .ev { display: grid; grid-template-columns: 52px minmax(0, 1fr) 40px; gap: 10px; align-items: center; height: 40px; font-size: 12px; opacity: 0; transform: translateX(-10px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.fx-chase .ev.on { opacity: 1; transform: none; }
.fx-chase .ev span { color: #8C9590; font-variant-numeric: tabular-nums; }
.fx-chase .ev b { font-weight: 400; color: #A7B0AB; height: 12px; position: relative; }
.fx-chase .ev.bet b { border-radius: 6px; background: rgba(233, 243, 238, .05); }
.fx-chase .ev.bet b i { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: 6px; background: linear-gradient(90deg, rgba(239, 200, 118, .5), #EFC876); transition: width .9s var(--ease); }
.fx-chase .ev.bet.on b i { width: var(--w); }
.fx-chase .ev em { font-style: normal; text-align: right; color: #fff; font-variant-numeric: tabular-nums; }
.fx-chase .ev.loss b { font-size: 12px; height: auto; }
.fx-chase .ev.loss em { color: #A7B0AB; }
.fx-chase .brace { position: absolute; right: 0; top: 44px; height: 116px; width: 12px; overflow: visible; }
.fx-chase .brace path { fill: none; stroke: #EFC876; stroke-width: 1.5; vector-effect: non-scaling-stroke; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset .9s var(--ease); }
.fx-chase .seq.flag .brace path { stroke-dashoffset: 0; }
.fx-chase .tag { margin-top: 14px; font-size: 12px; color: #EFC876; opacity: 0; transform: translateY(6px); transition: opacity .6s, transform .6s var(--ease); }
.fx-chase .seq.flag .tag { opacity: 1; transform: none; }

/* 6 group: a light travels between friends as each one checks in */
.fx-group .net { position: relative; margin-top: 10px; height: 200px; }
.fx-group svg { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 170px; overflow: visible; }
.fx-group .ln { fill: none; stroke: rgba(233, 243, 238, .14); stroke-width: 1.2; stroke-dasharray: 260; stroke-dashoffset: 260; transition: stroke-dashoffset 1.2s var(--ease); vector-effect: non-scaling-stroke; }
.fx-group.drawn .ln { stroke-dashoffset: 0; }
.fx-group .spark { position: absolute; left: 0; top: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff, #E9F3EE 40%, #A8EDC4); box-shadow: 0 0 14px rgba(168, 237, 196, .8); opacity: 0; transform: translate(var(--sx, 0px), var(--sy, 0px)); }
.fx-group .who { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px; transform: translate(-50%, -50%) scale(.6); opacity: 0; transition: transform .7s var(--ease), opacity .7s var(--ease); }
.fx-group.drawn .who { transform: translate(-50%, -50%) scale(1); opacity: 1; }
.fx-group .w0 { left: 50%; top: 20%; } .fx-group .w1 { left: 18.5%; top: 80%; } .fx-group .w2 { left: 81.5%; top: 80%; }
.fx-group .who b { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; font-weight: 500; font-size: 11px; color: #0C110E; background: radial-gradient(circle at 34% 28%, #fff, #E9F3EE 40%, #A7B0AB); box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .8); transition: box-shadow .6s; }
.fx-group .w0 b { background: radial-gradient(circle at 34% 28%, #fff, #E9F3EE 40%, #87CCAA); }
.fx-group .who.ping b { box-shadow: 0 0 0 4px rgba(168, 237, 196, .18), 0 0 22px rgba(168, 237, 196, .45); }
.fx-group .st { font-size: 10.5px; padding: 4px 9px; border-radius: 999px; white-space: nowrap; transition: opacity .5s; }
.fx-group .st.ok { color: #87CCAA; background: rgba(135, 204, 170, .12); }
.fx-group .st.near { color: #EFC876; background: rgba(239, 200, 118, .1); }
.fx-group .who:not(.seen) .st { opacity: .25; }

/* 7 live (coming soon): the game clock runs and the night's line scrolls */
.fx-live .clock { margin-top: 18px; }
.fx-live .q { display: grid; grid-template-columns: repeat(4, 1fr); font-size: 10.5px; color: #8C9590; }
.fx-live .track { margin-top: 8px; height: 4px; border-radius: 4px; background: rgba(233, 243, 238, .08); position: relative; }
.fx-live .track i { position: absolute; left: 0; top: 0; bottom: 0; width: var(--lw, 0%); border-radius: 4px; background: linear-gradient(90deg, #3F936E, #87CCAA); }
.fx-live .track i::after { content: ""; position: absolute; right: -4px; top: -3px; width: 10px; height: 10px; border-radius: 50%; background: #E9F3EE; box-shadow: 0 0 10px rgba(168, 237, 196, .7); }
.fx-live .open { margin-top: 18px; padding: 14px; border-radius: 16px; background: linear-gradient(180deg, rgba(233, 243, 238, .08), rgba(233, 243, 238, .03)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08); }
.fx-live .open b { display: block; font-weight: 400; font-size: 18px; letter-spacing: -.02em; color: #fff; }
.fx-live .open small { display: block; margin-top: 3px; font-size: 11.5px; color: #8C9590; }
.fx-live .wave { position: absolute; left: 18px; right: 18px; bottom: 16px; width: calc(100% - 36px); height: 70px; }

/* entrances: each card arrives its own way the first time it is seen */
.lr-card[data-fx] .pane > *:not(.ph) { transition: opacity .8s var(--ease), transform .8s var(--ease), filter .8s var(--ease); }
.lr-card[data-fx="pot"]:not(.seen) .bar { transform: scaleX(.2); transform-origin: left; opacity: 0; }
.lr-card[data-fx="pot"]:not(.seen) .left { opacity: 0; transform: translateY(14px); }
.lr-card[data-fx="streak"]:not(.seen) .day { opacity: 0; filter: blur(10px); }
.lr-card[data-fx="live"]:not(.seen) .open { opacity: 0; transform: translateY(18px); }
@media (prefers-reduced-motion: reduce) {
  .fx-feed .rows li, .fx-pot .fill, .fx-pot .dial .val, .fx-pot .dial .pinr, .fx-streak .num span, .fx-risk .cols i, .fx-chase .ev, .fx-group .who, .fx-group .ln { transition: none !important; }
}

/* ---------------------------------------------------------------- round 4: support */
.lr-les-dots { display: block; width: 210px; height: 210px; margin: -24px auto 6px; }
.lr-stack { height: auto; min-height: 120px; }
.lr-note[data-pos="1"] { opacity: .72; --y: 14px; --s: .955; filter: none; }
.lr-note[data-pos="2"] { opacity: .44; --y: 28px; --s: .91; filter: blur(.5px); }
.lr-note[data-pos="3"] { opacity: .2; --y: 42px; --s: .865; filter: blur(1px); }
.lr-note[data-pos="gone"] { opacity: 0; --y: 52px; --s: .82; filter: blur(3px); }
.lr-note[data-pos="wait"] { opacity: 0; --y: -26px; --s: 1.04; filter: blur(14px); }

/* ---------------------------------------------------------------- round 4 fixes */
.lr-track-night .pane .foot { position: absolute; z-index: 2; }
.fx-risk .tl { height: 150px; margin-top: 16px; }
.fx-group .net { height: 184px; }
.fx-group .w0 { top: 18%; } .fx-group .w1, .fx-group .w2 { top: 74%; }
.fx-pot .left { margin-top: 28px; }
/* notifications: solid frosted plates; the ones behind show only their edge */
.lr-note { background: linear-gradient(180deg, rgba(40, 48, 44, .96), rgba(26, 32, 29, .96)); -webkit-backdrop-filter: blur(26px) saturate(150%); backdrop-filter: blur(26px) saturate(150%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(255, 255, 255, .05), 0 24px 50px -26px rgba(0, 0, 0, .95); }
.lr-note > * { transition: opacity .5s var(--ease); }
.lr-note[data-pos="1"], .lr-note[data-pos="2"], .lr-note[data-pos="3"], .lr-note[data-pos="gone"] { filter: none; }
.lr-note[data-pos="1"] > *, .lr-note[data-pos="2"] > *, .lr-note[data-pos="3"] > *, .lr-note[data-pos="gone"] > * { opacity: 0; }
.lr-note[data-pos="1"] { opacity: .9; --y: 13px; --s: .95; }
.lr-note[data-pos="2"] { opacity: .7; --y: 25px; --s: .9; }
.lr-note[data-pos="3"] { opacity: .45; --y: 36px; --s: .85; }
.lr-note[data-pos="gone"] { opacity: 0; --y: 44px; --s: .8; }

/* ---------------------------------------------------------------- round 5: the slideshow's pause button
   A glass button beside the arrows. Its ring fills with mint as each
   card's 4.5 seconds run out; pressed, it rests and shows play. */
.lr-rail-ctl { align-items: center; }
.lr-ctl-gap { width: 6px; }
.lr-play { position: relative; width: 50px; height: 50px; border-radius: 50%; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer; color: #fff;
  background: rgba(233, 243, 238, .06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); transition: background-color .25s, transform .25s; }
.lr-play:hover { background: rgba(233, 243, 238, .12); }
.lr-play:active { transform: scale(.96); }
.lr-play .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible; }
.lr-play .ring circle { fill: none; stroke-width: 1.5; }
.lr-play .ring .trk { stroke: rgba(233, 243, 238, .12); }
.lr-play .ring .prg { stroke: #A8EDC4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; filter: drop-shadow(0 0 3px rgba(168, 237, 196, .6)); }
.lr-play.paused .ring .prg { stroke: rgba(233, 243, 238, .4); filter: none; }
.lr-play .ico { position: relative; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lr-play .play { display: none; }
.lr-play.paused .pause { display: none; }
.lr-play.paused .play { display: block; }
@media (max-width: 640px) {
  .lr-rail-ctl { display: flex !important; align-self: flex-start; margin-top: 4px; }
  .lr-rail-ctl .lr-arrow, .lr-ctl-gap { display: none; }
  .lr-play { width: 44px; height: 44px; }
}
.lr-rail-ctl .lr-play { margin-right: 4px; }
.lr-rail-foot { display: flex; align-items: center; gap: 14px; margin-top: 18px; }
.lr-rail-foot .lr-rail-bar { flex: 1; margin-top: 0; }
@media (max-width: 640px) {
  .lr-rail-ctl { display: none !important; }
  .lr-rail-foot .lr-play { width: 40px; height: 40px; flex: none; }
}

/* ---------------------------------------------------------------- round 6: hero buttons keep their size on phones */
@media (max-width: 640px) {
  .lr-hero2 .lr-ctas { flex-wrap: nowrap; gap: 10px; }
  .lr-hero2 .lr-ctas .lr-btn { flex: 0 0 auto; min-height: 48px; padding: 0 20px; font-size: 15px; }
  .lr-dots { flex-direction: column; align-items: center; gap: 8px; }
}
@media (max-width: 370px) { .lr-hero2 .lr-ctas .lr-btn { padding: 0 16px; font-size: 14.5px; } }
/* the plates behind take the front one's height, so the stack's edge is always even */
.lr-note { transition: transform .9s var(--ease), opacity .7s var(--ease), filter .7s var(--ease), height .6s var(--ease); }
.lr-note[data-pos="1"], .lr-note[data-pos="2"], .lr-note[data-pos="3"], .lr-note[data-pos="gone"] { height: var(--fh, auto); overflow: hidden; }

/* ---------------------------------------------------------------- round 7
   No backdrop-filter on the notes: a blur filter on the same element made
   the glass pop in at the end of each arrival. The plates are solid, so
   nothing changes visibly, and each arrival is now one smooth move. */
.lr-note { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; will-change: transform, opacity, filter; }
.lr-support-sub { max-width: 46ch !important; margin-left: auto; margin-right: auto; }
@media (min-width: 900px) { .lr-support-sub { max-width: none !important; white-space: nowrap; } }

/* ---------------------------------------------------------------- round 8: card 1, three books flow into Lessen */
.fx-connect .wires { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; overflow: visible; pointer-events: none; }
.fx-connect .wires path { fill: none; stroke-linecap: round; }
.fx-connect .wires .base { stroke: rgba(233, 243, 238, .12); stroke-width: 1.3; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); transition: stroke-dashoffset 1.2s var(--ease); }
.lr-card.seen .fx-connect .wires .base, .lr-reduce .fx-connect .wires .base { stroke-dashoffset: 0; }
.fx-connect .wires .glow { stroke: url(#lrWireGlow); stroke-width: 2; }
.fx-connect .pulse { fill: #E9F3EE; filter: drop-shadow(0 0 5px rgba(168, 237, 196, .95)); }
.fx-connect .books { position: relative; z-index: 2; margin-top: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.fx-connect .book { display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 6px 10px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(233, 243, 238, .09), rgba(233, 243, 238, .03)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), inset 0 0 0 1px rgba(233, 243, 238, .05), 0 12px 24px -16px rgba(0, 0, 0, .9);
  transition: box-shadow .5s var(--ease), transform .8s var(--ease), opacity .8s var(--ease); }
.lr-card:not(.seen) .fx-connect .book { opacity: 0; transform: translateY(-12px); }
.fx-connect .book:nth-child(2) { transition-delay: .1s; } .fx-connect .book:nth-child(3) { transition-delay: .2s; }
.fx-connect .book.send { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 0 0 1px rgba(168, 237, 196, .22), 0 12px 24px -16px rgba(0, 0, 0, .9); }
.fx-connect .mk { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: #0C110E; box-shadow: inset 0 0 0 1px rgba(233, 243, 238, .1); }
.fx-connect .mk svg { width: 20px; height: 20px; fill: none; stroke: #E9F3EE; stroke-width: 1.5; stroke-linejoin: round; }
.fx-connect .book b { font-weight: 400; font-size: 11px; color: #A7B0AB; }
.fx-connect .hub { position: absolute; z-index: 2; left: 50%; top: 186px; transform: translate(-50%, -50%); display: flex; flex-direction: column; align-items: center; gap: 8px; transition: transform .9s var(--ease) .35s, opacity .9s var(--ease) .35s; }
.lr-card:not(.seen) .fx-connect .hub { opacity: 0; transform: translate(-50%, -50%) scale(.85); }
.fx-connect .lm { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: radial-gradient(circle at 30% 25%, #17503A, #04130D 70%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(135, 204, 170, .18), 0 0 0 rgba(168, 237, 196, 0), 0 18px 30px -16px rgba(0, 0, 0, .9);
  transition: box-shadow .7s var(--ease); }
.fx-connect .lm svg { width: 34px; }
.fx-connect .hub.lit .lm { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(168, 237, 196, .4), 0 0 26px rgba(135, 204, 170, .35), 0 18px 30px -16px rgba(0, 0, 0, .9); }
.fx-connect .hub b { font-weight: 500; font-size: 12px; color: #fff; }
.fx-connect .foot { text-align: center; }
.fx-connect img.mk { width: 40px; height: 40px; border-radius: 11px; display: block; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 6px 14px -6px rgba(0, 0, 0, .9); background: none; }
.fx-connect .hub { top: 222px; }
.fx-connect .wires .base { stroke: rgba(233, 243, 238, .2); stroke-width: 1.5; }
.fx-connect .wires .glow { stroke-width: 2.2; }
/* streak: script moves the line and the bead together; no CSS transitions to drift */
.fx-streak .trail .lit { transition: none; stroke-dasharray: none; stroke-dashoffset: 0; }
.fx-streak .trail path { vector-effect: none; }
.fx-streak .trail i { transition: none; transform: translate(0, 0); margin: -6px 0 0 -6px; will-change: transform; }
/* risk: the window's label sits above the lit bars, never behind them */
.fx-risk .tl { margin-top: 38px; height: 140px; overflow: visible; }
.fx-risk .win { top: 0; }
.fx-risk .win span { top: -22px; left: 50%; transform: translateX(-50%); padding: 3px 9px; border-radius: 999px; font-size: 10.5px; color: #0C110E; background: #A8EDC4; box-shadow: 0 0 14px rgba(168, 237, 196, .35); }
.fx-risk .cols { top: 6px; }

/* ================================================================ round 9: Origin's three rows and the sharing film
   A near full-width grid: each row is one photo card that names what Lessen
   does and one dark card running that piece of the app; the sides swap each
   row. Headlines are Inter Tight Light with one Instrument Serif italic
   phrase, the bible's one serif word. */
.lr-bento { --gap: 14px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap); margin: clamp(72px, 8vw, 112px) calc(50% - min(700px, 50vw - 16px)) 0; }
.lr-bento > * { position: relative; overflow: hidden; border-radius: 20px; aspect-ratio: 1.08; min-height: 420px; }
.lr-photo { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 clamp(24px, 4vw, 56px); color: #fff; isolation: isolate;
  background: #04130D var(--img) center / cover no-repeat; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }
.lr-photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0) 38%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .28)); }
.lr-photo h3 { margin-top: 17%; font-weight: 300; font-size: clamp(40px, 4.2vw, 62px); line-height: 1.02; letter-spacing: -.045em; text-shadow: 0 2px 30px rgba(0, 0, 0, .25); }
.lr-photo h3 i, .lr-together h2 i { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; font-size: 1.04em; }
.lr-photo p { margin-top: auto; margin-bottom: 15%; max-width: 34ch; font-size: clamp(15px, 1.15vw, 17px); line-height: 1.45; color: rgba(255, 255, 255, .9); text-shadow: 0 1px 18px rgba(0, 0, 0, .3); }
.lr-ui { background: radial-gradient(ellipse 80% 60% at 30% 0%, rgba(22, 72, 50, .35), transparent 70%), #0A0E0C; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(233, 243, 238, .04); }
.lr-ui .lb { font-size: 9.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #8C9590; }
.lr-bento-tag { margin-top: 18px; color: #8C9590 !important; }

/* analyze: a row of the app's cards slides past, forever */
.ui-analyze .mq { position: absolute; left: 0; top: 50%; display: flex; width: max-content; transform: translate3d(0, -50%, 0); animation: lrMq 52s linear infinite; animation-play-state: paused;
  -webkit-mask-image: none; }
.ui-analyze::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, #0A0E0C 0%, rgba(10, 14, 12, 0) 16%, rgba(10, 14, 12, 0) 84%, #0A0E0C 100%); }
.lr-bento.run .mq, .lr-bento.run .mqv { animation-play-state: running; }
@keyframes lrMq { to { transform: translate3d(-50%, -50%, 0); } }
.mq-row { display: flex; gap: 12px; padding-right: 12px; align-items: center; }
.mc { flex: none; width: 222px; height: 206px; padding: 16px; border-radius: 16px; display: flex; flex-direction: column; background: linear-gradient(180deg, #121916, #0E1311); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .07), inset 0 0 0 1px rgba(233, 243, 238, .05), 0 20px 40px -24px rgba(0, 0, 0, .9); color: #fff; }
.mc .n { display: block; margin-top: 12px; font-weight: 300; font-size: 28px; letter-spacing: -.045em; line-height: 1; font-variant-numeric: tabular-nums; }
.mc .n i { font-style: normal; color: #535A56; }
.mc .sub { margin-top: auto; }
.mc .days { margin-top: 16px; display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.mc .days span { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 0; border-radius: 6px; font-size: 8.5px; color: #A7B0AB; background: rgba(233, 243, 238, .04); font-variant-numeric: tabular-nums; }
.mc .days em { font-style: normal; font-size: 8.5px; color: #6F7873; }
.mc .days .on { background: linear-gradient(180deg, rgba(135, 204, 170, .35), rgba(63, 147, 110, .3)); color: #fff; box-shadow: inset 0 0 0 1px rgba(168, 237, 196, .35); }
.mc .days .on em { color: #E9F3EE; }
.mc .kv { display: flex; justify-content: space-between; align-items: baseline; margin-top: 14px; font-size: 11.5px; color: #A7B0AB; }
.mc .kv b { font-weight: 400; font-size: 14px; color: #fff; }
.mc .kv em { font-style: normal; color: #6F7873; font-size: 11px; }
.mc .bar { margin-top: 10px; height: 5px; border-radius: 5px; background: rgba(233, 243, 238, .08); }
.mc .bar i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #3F936E, #A8EDC4); box-shadow: 0 0 8px rgba(135, 204, 170, .6); }
.mc .pill { margin-top: auto; align-self: flex-start; font-size: 10.5px; padding: 5px 9px; border-radius: 999px; }
.mc .pill.ok { color: #87CCAA; background: rgba(135, 204, 170, .1); box-shadow: inset 0 0 0 1px rgba(135, 204, 170, .18); }
.mc .bk { display: grid; grid-template-columns: 20px 1fr auto; align-items: center; gap: 9px; margin-top: 14px; font-size: 12px; color: #E9F3EE; }
.mc .bk img { width: 20px; height: 20px; border-radius: 6px; }
.mc .bk b { font-weight: 400; color: #A7B0AB; font-variant-numeric: tabular-nums; }
.mc .spark { width: 100%; height: 46px; margin-top: 14px; overflow: visible; }
.mc .spark path { fill: none; stroke: #87CCAA; stroke-width: 1.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px rgba(135, 204, 170, .6)); }
.mc .t { margin-top: 6px; font-size: 11.5px; color: #A7B0AB; }
.mc .t b { font-weight: 500; color: #EFC876; }
.mc .split { margin-top: 12px; height: 5px; border-radius: 5px; background: rgba(233, 243, 238, .08); }
.mc .split i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, #A97416, #EFC876); }

/* save: a check panel that turns over, and the checks rising behind it */
.ui-save .panel { position: absolute; z-index: 3; left: 50%; top: 21%; width: min(310px, 76%); height: 98px; transform: translateX(-50%); }
.ui-save .pp { position: absolute; inset: 0; padding: 14px 16px; border-radius: 16px; background: linear-gradient(160deg, rgba(63, 147, 110, .28), rgba(9, 40, 27, .55) 60%, rgba(10, 14, 12, .9)); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(135, 204, 170, .12), 0 24px 40px -20px rgba(0, 0, 0, .9);
  opacity: 0; filter: blur(8px); transform: scale(.98); transition: opacity .8s var(--ease), filter .8s var(--ease), transform .8s var(--ease); }
.ui-save .pp.on { opacity: 1; filter: none; transform: none; }
.ui-save .h { display: flex; align-items: center; gap: 9px; font-size: 13px; color: #fff; }
.ui-save .ic { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1px rgba(233, 243, 238, .4); }
.ui-save .ic svg { width: 12px; height: 12px; fill: none; stroke: #E9F3EE; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ui-save .seg { margin-top: 14px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.ui-save .seg i { height: 3px; border-radius: 3px; opacity: .3; }
.ui-save .seg i.on { opacity: 1; box-shadow: 0 0 8px currentColor; }
.ui-save .seg .e { background: #DE826A; color: #DE826A; } .ui-save .seg .a { background: #EFC876; color: #EFC876; } .ui-save .seg .m { background: #87CCAA; color: #87CCAA; }
.ui-save .ft { margin-top: 10px; display: flex; justify-content: space-between; font-size: 11px; color: #87CCAA; }
.ui-save .ft span:last-child { color: #A7B0AB; }
.ui-save .checks { position: absolute; z-index: 2; left: 0; right: 0; top: 30%; bottom: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, transparent 22%, #000 38%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, transparent 22%, #000 38%, #000 78%, transparent 100%); }
.mqv { animation: lrMqv 34s linear infinite; animation-play-state: paused; }
@keyframes lrMqv { to { transform: translate3d(0, -50%, 0); } }
.ui-save .mqv { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; align-items: center; }
.ui-save .mqv li { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 10px; padding: 7px 13px; border-radius: 999px; font-size: 12px; color: #E9F3EE; background: #121815; box-shadow: inset 0 0 0 1px rgba(233, 243, 238, .08); white-space: nowrap; }
.ui-save .mqv li::before { content: ""; width: 5px; height: 5px; border-radius: 50%; }
.ui-save .mqv li.ok::before { background: #87CCAA; box-shadow: 0 0 6px #87CCAA; }
.ui-save .mqv li.fix::before { background: #DE826A; box-shadow: 0 0 6px #DE826A; }
.ui-save .mqv li.watch::before { background: #EFC876; box-shadow: 0 0 6px #EFC876; }

/* guide: the score, Les's one line, and the moves rising beneath */
.ui-guide .gauge { position: absolute; z-index: 3; left: 50%; top: 9%; width: 190px; transform: translateX(-50%); text-align: center; }
.ui-guide .gauge svg { width: 100%; overflow: visible; }
.ui-guide .gauge .g { fill: none; stroke-width: 6; stroke-linecap: round; }
.ui-guide .gauge .e { stroke: #DE826A; } .ui-guide .gauge .a { stroke: #EFC876; } .ui-guide .gauge .a2 { stroke: #87CCAA; } .ui-guide .gauge .m { stroke: rgba(135, 204, 170, .18); }
.ui-guide .gauge .mark { fill: #E9F3EE; }
.ui-guide .gauge b { position: absolute; left: 0; right: 0; top: 46%; font-weight: 300; font-size: 40px; letter-spacing: -.04em; color: #fff; }
.ui-guide .gauge span { position: absolute; left: 0; right: 0; top: 86%; font-size: 9.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #8C9590; }
.ui-guide .sum { position: absolute; z-index: 3; left: 50%; top: 40%; width: min(360px, 82%); transform: translateX(-50%); padding: 13px 15px; border-radius: 14px; background: linear-gradient(180deg, #121916, #0E1311); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), inset 0 0 0 1px rgba(135, 204, 170, .1), 0 24px 40px -18px rgba(0, 0, 0, .95); }
.ui-guide .sum .h { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: #fff; }
.ui-guide .sum .pe { width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fff, #E9F3EE 35%, #A8EDC4); box-shadow: 0 0 10px rgba(168, 237, 196, .7); }
.ui-guide .sum p:last-child { margin-top: 6px; font-size: 12.5px; line-height: 1.45; color: #A7B0AB; }
.ui-guide .adv { position: absolute; z-index: 2; left: 50%; width: min(340px, 78%); transform: translateX(-50%); top: 52%; bottom: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 80%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 80%, transparent 100%); }
.ui-guide .mqv { animation-duration: 40s; }
.ui-guide .ac { margin-bottom: 10px; padding: 13px 14px 14px; border-radius: 13px; background: #0F1412; box-shadow: inset 0 0 0 1px rgba(233, 243, 238, .06); }
.ui-guide .ac .c { display: flex; align-items: center; gap: 7px; font-size: 9.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #8C9590; }
.ui-guide .ac .c svg { width: 13px; height: 13px; fill: none; stroke: #A7B0AB; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ui-guide .ac b { display: block; margin-top: 8px; font-weight: 500; font-size: 13.5px; color: #fff; letter-spacing: -.01em; }
.ui-guide .ac p { margin-top: 5px; font-size: 11.5px; line-height: 1.45; color: #A7B0AB; }
.ui-guide .ac .btn { display: block; margin-top: 11px; padding: 8px; border-radius: 8px; text-align: center; font-size: 11px; color: #E9F3EE; background: rgba(233, 243, 238, .07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06); }

/* the sharing film: Origin's "together" card, our light */
.lr-together-wrap { background: #000; padding: 0 16px clamp(72px, 8vw, 112px); }
.lr-together { position: relative; overflow: hidden; isolation: isolate; max-width: 1400px; margin: 0 auto; min-height: clamp(560px, 50vw, 720px); border-radius: 22px; display: grid; place-items: center; text-align: center; color: #fff; background: #04130D; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1); }
.lr-bokeh { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; }
.lr-together::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 46% 40% at 50% 46%, rgba(0, 0, 0, .38), rgba(0, 0, 0, 0) 100%); pointer-events: none; }
.lr-together .in { padding: 64px 24px; display: flex; flex-direction: column; align-items: center; }
.lr-together .who { display: flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: rgba(233, 243, 238, .82); }
.lr-together .who svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.lr-together h2 { margin-top: 26px; font-weight: 300; font-size: clamp(46px, 5.6vw, 84px); line-height: 1; letter-spacing: -.05em; text-shadow: 0 2px 40px rgba(0, 0, 0, .3); }
.lr-together h2 i { display: inline; }
.lr-together .sub { margin-top: 22px; max-width: 46ch; font-size: clamp(16px, 1.25vw, 18px); line-height: 1.5; color: rgba(255, 255, 255, .88); }
.lr-glass-btn { position: relative; overflow: hidden; isolation: isolate; margin-top: 30px; display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 16px 0 18px; border-radius: 8px; text-decoration: none; font: 500 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: #fff;
  background: rgba(10, 30, 21, .45); -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), inset 0 0 0 1px rgba(233, 243, 238, .1); transition: background-color .3s, transform .35s var(--ease); }
.lr-glass-btn:hover { background: rgba(10, 30, 21, .62); transform: translateY(-1.5px); }
.lr-glass-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease); }
.lr-glass-btn:hover svg { transform: translateX(3px); }
.lr-together .fine { margin-top: 14px; font-size: 12px; color: rgba(233, 243, 238, .7); }

@media (prefers-reduced-motion: reduce) { .mq, .mqv { animation: none !important; } .ui-save .pp { transition: none; } }

/* ================================================================ round 10
   The live cards are drawn on one fixed stage (660 by 611) and scaled to
   the card, so they look the same at every width. Below 992px the rows
   stack (see "responsive pairs" at the end of this file). */
.lr-ui .stage { position: absolute; left: 50%; top: 50%; width: 660px; height: 611px; transform: translate(-50%, -50%) scale(var(--k, 1)); transform-origin: 50% 50%; }
.lr-photo { container-type: inline-size; }
.lr-photo h3 { font-size: clamp(16px, 8.6cqi, 62px); }
.lr-photo p { font-size: clamp(10px, 2.5cqi, 17px); }

/* the score: one gauge, read to 83, with what the number means */
.ui-guide .gauge .trk { fill: none; stroke: rgba(233, 243, 238, .08); stroke-width: 7; stroke-linecap: round; }
.ui-guide .gauge .val { fill: none; stroke: url(#lrGauge); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 64 100; filter: drop-shadow(0 0 6px rgba(135, 204, 170, .35)); }
.ui-guide .gauge .pin { fill: #E9F3EE; filter: drop-shadow(0 0 6px rgba(168, 237, 196, .9)); }
.ui-guide .gauge em { position: absolute; left: 0; right: 0; top: 103%; font-style: normal; font-size: 11px; color: #87CCAA; }
.ui-guide .sum { top: 44%; }
.ui-guide .adv { top: 56%; }

/* coming soon: one quiet glass strip, live bets only */
.lr-soonbar { margin: 28px auto 0; max-width: 820px; display: grid; grid-template-columns: auto minmax(0, 1fr) 230px; align-items: center; gap: 20px; padding: 18px 22px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(233, 243, 238, .07), rgba(233, 243, 238, .025)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(233, 243, 238, .06), 0 30px 60px -36px rgba(0, 0, 0, .9); }
.lr-soonbar .lv { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(135, 204, 170, .08); box-shadow: inset 0 0 0 1px rgba(135, 204, 170, .2); }
.lr-soonbar .lv i { width: 8px; height: 8px; border-radius: 50%; background: #A8EDC4; box-shadow: 0 0 10px #87CCAA, 0 0 2px #fff; }
.lr-soonbar .k { font-size: 10.5px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: #87CCAA; }
.lr-soonbar .t { margin-top: 3px; font-size: 17px; letter-spacing: -.015em; color: #fff; }
.lr-soonbar .t span { color: #A7B0AB; }
.lr-soonbar .clk { display: grid; grid-template-columns: repeat(4, 1fr); row-gap: 8px; font-size: 10px; color: #6F7873; text-align: left; }
.lr-soonbar .clk .trk { grid-column: 1 / -1; position: relative; height: 3px; border-radius: 3px; background: rgba(233, 243, 238, .08); overflow: hidden; }
.lr-soonbar .clk .trk i { position: absolute; top: 0; bottom: 0; width: 34%; border-radius: 3px; background: linear-gradient(90deg, rgba(135, 204, 170, 0), #A8EDC4, rgba(135, 204, 170, 0)); animation: lrClk 4.8s linear infinite; }
@keyframes lrClk { from { transform: translateX(-110%); } to { transform: translateX(310%); } }
@media (max-width: 640px) {
  .lr-soonbar { grid-template-columns: auto minmax(0, 1fr); padding: 16px; gap: 14px; }
  .lr-soonbar .clk { grid-column: 1 / -1; }
  .lr-soonbar .t { font-size: 15.5px; }
}

/* the smart blocker and auto-save: a Day band */
.lr-hold { background: #fff; }
.lr-hold-grid { margin-top: clamp(40px, 5vw, 64px); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.lr-hc { padding: 12px 12px 28px; border-radius: 30px; background: var(--mist); box-shadow: inset 0 1px 0 #fff; }
.lr-hc .viz { position: relative; height: 320px; border-radius: 22px; overflow: hidden; display: grid; place-items: center;
  background: radial-gradient(ellipse 80% 70% at 20% 0%, rgba(135, 204, 170, .35), transparent 70%), linear-gradient(180deg, #FFFFFF, #EAF3EE); box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(12, 14, 13, .05); }
.lr-hc .lbl { margin: 24px 14px 0; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--money); }
.lr-hc h3 { margin: 8px 14px 0; font-weight: 400; font-size: clamp(22px, 2vw, 27px); letter-spacing: -.03em; line-height: 1.15; color: var(--ink); }
.lr-hc > p:last-child { margin: 10px 14px 0; max-width: 46ch; font-size: 15.5px; line-height: 1.5; color: var(--stone); }
.lr-hold-tag { margin-top: 18px; }
/* lock */
.ph-mini { position: relative; width: min(320px, 88%); padding: 18px; border-radius: 22px; background: rgba(255, 255, 255, .8); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(12, 14, 13, .05), 0 30px 50px -30px rgba(12, 14, 13, .35); overflow: hidden; }
.ph-mini .apps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; transition: filter .7s var(--ease), opacity .7s var(--ease); }
.ph-mini .apps span { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.ph-mini .apps img { width: 54px; height: 54px; border-radius: 14px; box-shadow: 0 8px 18px -8px rgba(12, 14, 13, .45); }
.ph-mini .apps b { font-weight: 400; font-size: 11px; color: var(--stone); }
.ph-mini .lpot { margin-top: 18px; }
.ph-mini .lpot p { display: flex; justify-content: space-between; font-size: 12px; color: var(--stone); }
.ph-mini .lpot b { font-weight: 500; color: var(--ink); transition: opacity .3s; }
.ph-mini .lpot b.swap { opacity: 0; }
.ph-mini .bar { margin-top: 8px; height: 6px; border-radius: 6px; background: rgba(12, 14, 13, .07); overflow: hidden; }
.ph-mini .bar i { display: block; height: 100%; width: 70%; border-radius: 6px; background: linear-gradient(90deg, var(--money-hi), var(--money)); transition: width 1s var(--ease), background .6s; }
.ph-mini.full .bar i { background: linear-gradient(90deg, #C2912F, var(--amber)); }
.ph-mini .sheet { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center;
  background: rgba(255, 255, 255, .62); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%);
  transform: translateY(104%); transition: transform .9s var(--ease); }
.ph-mini.locked .sheet { transform: none; }
.ph-mini.locked .apps { filter: blur(3px) saturate(.5); opacity: .55; }
.ph-mini .lk { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); box-shadow: 0 10px 20px -8px rgba(12, 14, 13, .6); margin-bottom: 8px; }
.ph-mini .lk svg { width: 20px; height: 20px; fill: none; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.ph-mini .sheet b { font-weight: 500; font-size: 16px; color: var(--ink); letter-spacing: -.015em; }
.ph-mini .sheet small { font-size: 12px; color: var(--stone); }
.ph-mini .sw { margin-top: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 6px; border-radius: 999px; font-size: 11.5px; color: var(--ink); background: #fff; box-shadow: 0 0 0 1px rgba(12, 14, 13, .08); }
.ph-mini .sw i { position: relative; width: 30px; height: 18px; border-radius: 999px; background: var(--money); }
.ph-mini .sw i::after { content: ""; position: absolute; right: 2px; top: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .3); }
/* save */
.acc { width: min(330px, 88%); padding: 14px; border-radius: 22px; background: rgba(255, 255, 255, .8); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(12, 14, 13, .05), 0 30px 50px -30px rgba(12, 14, 13, .35); }
.acc .row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 12px; border-radius: 15px; background: #fff; box-shadow: 0 0 0 1px rgba(12, 14, 13, .05); transition: box-shadow .6s var(--ease); }
.acc .ic { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; background: var(--mist); }
.acc .ic svg { width: 19px; height: 19px; fill: none; stroke: var(--ink); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.acc .nm { font-size: 13.5px; color: var(--ink); }
.acc .nm small { display: block; font-size: 11px; color: var(--stone); }
.acc b { font-weight: 400; font-size: 20px; letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; transition: opacity .3s; }
.acc b.swap { opacity: 0; }
.acc .row.sav.got { box-shadow: 0 0 0 1px rgba(16, 117, 80, .35), 0 12px 26px -14px rgba(16, 117, 80, .55); }
.acc .row.sav.got b { color: var(--money); }
.acc .flow { position: relative; height: 54px; }
.acc .flow::before { content: ""; position: absolute; left: 30px; top: 0; bottom: 0; width: 1.5px; background: repeating-linear-gradient(180deg, rgba(16, 117, 80, .35) 0 4px, transparent 4px 8px); }
.acc .flow i { position: absolute; left: 12px; top: -2px; padding: 4px 9px; border-radius: 999px; font-style: normal; font-size: 11.5px; font-weight: 500; color: #fff; background: linear-gradient(180deg, var(--money-hi), var(--money)); box-shadow: 0 8px 16px -8px rgba(16, 117, 80, .8);
  opacity: 0; transform: translateY(0); }
.acc .flow i.go { animation: lrDrop 1.3s var(--ease) both; }
@keyframes lrDrop { 0% { opacity: 0; transform: translateY(-6px) scale(.9); } 15% { opacity: 1; transform: translateY(0) scale(1); } 85% { opacity: 1; transform: translateY(34px); } 100% { opacity: 0; transform: translateY(42px) scale(.9); } }
.acc .rc { margin-top: 12px; text-align: center; font-size: 11.5px; color: var(--stone); transition: opacity .5s; opacity: 0; }
.acc .rc.on { opacity: 1; }
@media (max-width: 860px) { .lr-hold-grid { grid-template-columns: minmax(0, 1fr); } .lr-hc .viz { height: 290px; } }
@media (prefers-reduced-motion: reduce) { .lr-soonbar .clk .trk i { animation: none; left: 33%; } }

/* ================================================================ round 11 */
/* the three photo cards: the headline sits in the middle, the line stays at the foot */
/* (Oct 23, 2026) in the flow, not pinned: the auto margins centre the
   headline in the room above the line, and the card can only grow. */
.lr-photo { justify-content: flex-start; padding-top: 32px; padding-bottom: 9%; }
.lr-photo h3 { margin: auto 0 !important; padding: 0 6%; }
.lr-photo p { margin: 0 !important; width: 86%; max-width: 34ch; }

/* membership on Forest */
.lr-memf { --lx: 0px; --ly: 0px; }
.lr-memf-bg { position: absolute; z-index: -3; inset: -3%; pointer-events: none; background: url("/assets/lr/forest-silk.webp") 22% 30% / cover no-repeat; opacity: .85; }
@media (max-width: 760px) { .lr-memf-bg { background-image: url("/assets/lr/forest-silk-tall.webp"); background-position: 30% 0%; } }
@media (prefers-reduced-motion: no-preference) { .lr-memf-bg { animation: lrSilk 42s ease-in-out infinite alternate; } }
.lr-memf-shade { position: absolute; z-index: -2; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 50% 38% at 50% 22%, rgba(1, 8, 5, .6), rgba(1, 8, 5, 0)), radial-gradient(ellipse 46% 46% at 50% 66%, rgba(1, 8, 5, .55), rgba(1, 8, 5, 0)),
    linear-gradient(180deg, rgba(2, 10, 6, .55), rgba(2, 10, 6, .1) 26%, rgba(2, 10, 6, .2) 70%, rgba(2, 10, 6, .8)); }
.lr-memf .lr-kicker { color: #A8EDC4; }
.lr-memf .lr-h2 { color: #fff; }
.lr-memf .lr-h2 .m { color: #A8EDC4; }
/* the promise: one small lit line, the whole thing a link to the full terms */
.lr-promise-pill { position: relative; overflow: hidden; isolation: isolate; display: flex; align-items: center; gap: 14px; width: fit-content; max-width: 100%; margin: 30px auto 0; padding: 10px 12px 10px 10px; border-radius: 999px; text-decoration: none; color: #fff;
  background: linear-gradient(135deg, rgba(168, 237, 196, .16), rgba(255, 255, 255, .05) 70%); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 0 0 1px rgba(168, 237, 196, .28), 0 14px 34px -16px rgba(0, 0, 0, .7), 0 0 30px -10px rgba(135, 204, 170, .45);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.lr-promise-pill:hover { transform: translateY(-1.5px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 0 0 1px rgba(168, 237, 196, .4), 0 18px 40px -16px rgba(0, 0, 0, .75), 0 0 36px -8px rgba(135, 204, 170, .6); }
.lr-promise-pill::after { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .22), transparent); transform: skewX(-18deg); opacity: 0; }
.lr-promise-pill:hover::after { animation: lrShine 1.1s var(--ease) both; }
.lr-promise-pill .sh { flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle at 34% 28%, #fff, #E9F3EE 40%, #A8EDC4); box-shadow: 0 0 16px rgba(168, 237, 196, .6); }
.lr-promise-pill .sh svg { width: 18px; height: 18px; fill: none; stroke: #0C3A27; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lr-promise-pill .tx b { display: block; font-weight: 500; font-size: 15px; letter-spacing: -.01em; line-height: 1.25; }
.lr-promise-pill .tx small { display: block; margin-top: 2px; font-size: 12px; color: rgba(233, 243, 238, .66); }
.lr-promise-pill .go { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 13px; border-radius: 999px; font-size: 13px; color: #0C0E0D; background: linear-gradient(180deg, #fff, #E4ECE8); box-shadow: inset 0 1px 0 #fff; }
.lr-promise-pill .go svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease); }
.lr-promise-pill:hover .go svg { transform: translateX(3px); }
/* the price card, in glass */
.lr-memf-one { grid-template-columns: minmax(0, 1fr) !important; max-width: 520px; margin: 28px auto 0 !important; }
.lr-memf .lr-price { color: #fff; background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .04) 70%); -webkit-backdrop-filter: blur(24px) saturate(150%); backdrop-filter: blur(24px) saturate(150%);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .26), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 40px 80px -40px rgba(0, 0, 0, .9); }
.lr-memf .lr-price::before { background: radial-gradient(circle at var(--mx, 20%) var(--my, 0%), rgba(168, 237, 196, .18), transparent 45%); }
.lr-memf .lr-seg { background: rgba(0, 0, 0, .25); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .4); }
.lr-memf .lr-seg button { color: rgba(233, 243, 238, .72); }
.lr-memf .lr-seg button[aria-pressed="true"] { color: #0C0E0D; }
.lr-memf .lr-seg .pill { background: linear-gradient(180deg, #fff, #E4ECE8); box-shadow: inset 0 1px 0 #fff, 0 6px 16px -6px rgba(0, 0, 0, .5); }
.lr-memf .lr-amount b { color: #fff; }
.lr-memf .lr-amount span, .lr-memf .lr-amount-sub, .lr-memf .lr-bill { color: rgba(233, 243, 238, .7); }
.lr-memf .lr-inc li { color: #fff; }
.lr-memf .lr-inc svg { stroke: #A8EDC4; }
.lr-memf .lr-price .lr-btn { width: 100%; }
@media (max-width: 640px) {
  .lr-promise-pill { flex-wrap: wrap; border-radius: 22px; padding: 12px; gap: 12px; }
  .lr-promise-pill .tx { flex: 1 1 calc(100% - 52px); }
  .lr-promise-pill .go { flex: 1 1 100%; justify-content: center; }
}

/* ---------------------------------------------------------------- round 12: membership in the bible's Forest colorway
   linear-gradient(160deg, #164832, #3F936E 70%, #87CCAA), white type, glass on top. */
.lr-memf { background: linear-gradient(160deg, #164832 0%, #3F936E 70%, #87CCAA 100%) !important; }
.lr-memf-bg, .lr-memf-shade { display: none; }
.lr-memf::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(ellipse 60% 50% at 18% 0%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 70%); }
.lr-memf .lr-kicker { color: rgba(255, 255, 255, .82); }
.lr-memf .lr-h2 { color: rgba(255, 255, 255, .66); }
.lr-memf .lr-h2 .m { color: #fff; }
.lr-memf .lr-price { background: linear-gradient(160deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .07) 70%), rgba(12, 46, 31, .22);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .34), inset 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 80px -40px rgba(8, 36, 24, .75); }
.lr-memf .lr-amount span, .lr-memf .lr-amount-sub, .lr-memf .lr-bill { color: rgba(255, 255, 255, .8); }
.lr-memf .lr-inc svg { stroke: #fff; }
.lr-memf .lr-seg { background: rgba(8, 36, 24, .3); }
.lr-memf .lr-seg button { color: rgba(255, 255, 255, .82); }
.lr-promise-pill { background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08) 70%), rgba(12, 46, 31, .18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 0 0 1px rgba(255, 255, 255, .16), 0 14px 34px -16px rgba(8, 36, 24, .6); }
.lr-promise-pill:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .36), inset 0 0 0 1px rgba(255, 255, 255, .24), 0 18px 40px -16px rgba(8, 36, 24, .7); }
.lr-promise-pill .tx small { color: rgba(255, 255, 255, .75); }
.lr-promise-pill .sh { box-shadow: 0 6px 16px -6px rgba(8, 36, 24, .6); }
.lr-memf .lr-btn-white { box-shadow: inset 0 1px 0 #fff, 0 16px 36px -14px rgba(8, 36, 24, .6); }

/* ---------------------------------------------------------------- round 13 */
/* questions: the heading centered over the list */
.lr-faq { grid-template-columns: minmax(0, 1fr) !important; max-width: 860px; gap: clamp(36px, 4vw, 52px) !important; }
.lr-faq-head { position: static !important; text-align: center; }
.lr-faq-head .lr-body { margin-left: auto; margin-right: auto; }
#faq { padding-top: var(--section); }

/* coming soon: three cards */
.lr-hold-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.lr-hold-grid .lr-hc .viz { height: 300px; }
@media (max-width: 1100px) { .lr-hold-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lr-hold-grid > :last-child { grid-column: 1 / -1; } }
@media (max-width: 860px) { .lr-hold-grid { grid-template-columns: minmax(0, 1fr); } .lr-hold-grid > :last-child { grid-column: auto; } }
/* live bets card */
.lv-mini { width: min(310px, 88%); padding: 16px; border-radius: 22px; background: rgba(255, 255, 255, .82); box-shadow: inset 0 1px 0 #fff, 0 0 0 1px rgba(12, 14, 13, .05), 0 30px 50px -30px rgba(12, 14, 13, .35); }
.lv-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--stone); }
.lv-dot { display: inline-flex; align-items: center; gap: 6px; font-weight: 500; color: var(--money); }
.lv-dot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--money); box-shadow: 0 0 0 3px var(--money-a); }
.lv-clock { margin-top: 14px; }
.lv-clock .q { display: grid; grid-template-columns: repeat(4, 1fr); font-size: 10px; color: #8C918E; }
.lv-clock .trk { position: relative; margin-top: 7px; height: 5px; border-radius: 5px; background: rgba(12, 14, 13, .07); }
.lv-clock .trk i { position: absolute; left: 0; top: 0; bottom: 0; width: 58%; border-radius: 5px; background: linear-gradient(90deg, var(--money-hi), var(--money)); }
.lv-clock .trk i::after { content: ""; position: absolute; right: -5px; top: -3.5px; width: 12px; height: 12px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1px rgba(12, 14, 13, .12), 0 2px 6px rgba(12, 14, 13, .3); }
.lv-bets { margin-top: 14px; display: grid; gap: 8px; }
.lv-b { display: grid; grid-template-columns: 1fr auto; row-gap: 1px; padding: 10px 12px; border-radius: 13px; background: #fff; box-shadow: 0 0 0 1px rgba(12, 14, 13, .05); }
.lv-b span { font-size: 13px; color: var(--ink); }
.lv-b b { font-weight: 400; font-size: 14px; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }
.lv-b small { grid-column: 1 / -1; font-size: 11px; color: var(--money); }
.lv-sum { margin-top: 12px; display: flex; justify-content: space-between; font-size: 12px; color: var(--stone); }
.lv-sum b { font-weight: 500; color: var(--ink); }

/* ---------------------------------------------------------------- the logo is always straight on (Oct 20, 2026)
   The tilted glass stair looked like Adidas and is banned. */
.lr-fs3 { transform: none !important; transform-style: flat; aspect-ratio: 108 / 84; width: clamp(150px, 15vw, 220px); }
.lr-fs3 span { width: 44.44%; height: 28.57%; border-radius: 999px; transform: none !important; }
.lr-fs3 span:nth-child(1) { left: 0; top: 0; }
.lr-fs3 span:nth-child(2) { left: 27.78%; top: 35.71%; }
.lr-fs3 span:nth-child(3) { left: 55.56%; top: 71.43%; }
.lr-night .lr-fs3 span { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px rgba(255, 255, 255, .3), inset 0 -8px 14px -8px rgba(9, 40, 27, .6), 0 22px 30px -14px rgba(0, 0, 0, .9); }
.lr-night .lr-fs3.lit span:nth-child(3) { box-shadow: inset 0 2px 0 #fff, 0 0 60px rgba(135, 204, 170, .7), 0 0 20px rgba(168, 237, 196, .45), 0 22px 30px -14px rgba(0, 0, 0, .9); }

/* ---------------------------------------------------------------- round 14: the saving steps, in order */
.ui-save .panel { height: 132px; top: 17%; }
.ui-save .pp { padding: 14px 16px 13px; }
.ui-save .h { justify-content: flex-start; }
.ui-save .h .stp { margin-left: auto; font-size: 10.5px; color: #8C9590; }
.ui-save .pp .v { margin-top: 8px; font-weight: 300; font-size: 30px; letter-spacing: -.045em; line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.ui-save .pp[data-step="4"] .v { color: #A8EDC4; }
.ui-save .seg4 { margin-top: 11px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.ui-save .seg4 i { height: 3px; border-radius: 3px; background: rgba(233, 243, 238, .12); }
.ui-save .seg4 i.lit { background: #87CCAA; box-shadow: 0 0 8px rgba(135, 204, 170, .6); }
.ui-save .pp .ft { margin-top: 9px; font-size: 11px; color: #A7B0AB; display: block; }
.ui-save .checks { top: 36%; }

/* ---------------------------------------------------------------- round 14: the closing band */
.lr-final-mark { position: relative; height: clamp(150px, 15vw, 210px); display: grid; place-items: center; }
.lr-final-mark svg { width: clamp(108px, 10vw, 150px); overflow: visible; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, .8)); }
.lr-final-mark svg .land { filter: drop-shadow(0 0 16px rgba(135, 204, 170, .7)); }
.lr-final-mark .slit { position: absolute; left: 50%; bottom: 8%; width: min(420px, 70%); height: 1.5px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, rgba(233, 243, 238, .9) 30%, #fff 50%, rgba(233, 243, 238, .9) 70%, transparent); box-shadow: 0 0 16px 2px rgba(168, 237, 196, .6); }
.lr-final-art, .lr-final-art::after { display: none; }
.lr-final-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 32px; }
.lr-final-ctas .lr-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease); }
.lr-final-ctas .lr-btn:hover svg { transform: translateX(3px); }
.lr-final-note { margin-top: 16px; font-size: 13.5px; color: rgba(233, 243, 238, .62); }
@media (max-width: 640px) { .lr-final-ctas { flex-wrap: nowrap; gap: 10px; } .lr-final-ctas .lr-btn { flex: 0 1 auto; min-height: 48px; padding: 0 18px; font-size: 15px; } }
@media (max-width: 370px) { .lr-final-ctas .lr-btn { padding: 0 14px; font-size: 14px; } }

/* ---------------------------------------------------------------- round 15: the closing band in the Forest colorway
   The bible's "On forest" plate: #164832 to #3F936E to #87CCAA, white type,
   the logo in one color (white). */
.lr-final-forest { background: linear-gradient(160deg, #164832 0%, #3F936E 70%, #87CCAA 100%) !important; }
.lr-final-forest::before { background: radial-gradient(ellipse 60% 50% at 18% 0%, rgba(255, 255, 255, .12), rgba(255, 255, 255, 0) 70%) !important; }
.lr-final-forest .lr-final-mark svg { filter: drop-shadow(0 16px 28px rgba(8, 36, 24, .45)); }
.lr-final-forest .lr-final-mark svg .land { filter: none; }
.lr-final-forest .lr-final-mark .slit { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85) 30%, #fff 50%, rgba(255, 255, 255, .85) 70%, transparent); box-shadow: 0 0 14px 2px rgba(255, 255, 255, .35); }
.lr-final-forest .lr-h2 { color: rgba(255, 255, 255, .66) !important; }
.lr-final-forest .lr-h2 .m { color: #fff !important; }
.lr-final-forest .lr-body, .lr-final-forest .lr-final-note { color: rgba(255, 255, 255, .82) !important; }
.lr-final-forest .lr-btn-white { box-shadow: inset 0 1px 0 #fff, 0 16px 36px -14px rgba(8, 36, 24, .6); }
.lr-final-forest .lr-btn-glass { background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08)), rgba(12, 46, 31, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 0 0 1px rgba(255, 255, 255, .16), 0 12px 30px -16px rgba(8, 36, 24, .6); }

/* card: what each book costs you. Each book lights in turn: its bet bar
   fills, what came back fills inside it, and what it kept appears. */
.fx-books .bk-rows { margin-top: 16px; display: grid; gap: 10px; }
.fx-books .bk-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 11px; align-items: center; padding: 10px 11px; border-radius: 14px; background: rgba(233, 243, 238, .03); box-shadow: inset 0 0 0 1px rgba(233, 243, 238, .05); transition: background-color .6s, box-shadow .6s; }
.fx-books .bk-row.on { background: rgba(135, 204, 170, .07); box-shadow: inset 0 0 0 1px rgba(135, 204, 170, .22); }
.fx-books img { width: 34px; height: 34px; border-radius: 10px; }
.fx-books .bk-mid p { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; color: #fff; }
.fx-books .bk-mid b { font-weight: 400; }
.fx-books .bk-mid span { color: #8C9590; font-size: 11px; font-variant-numeric: tabular-nums; }
.fx-books .bk-bar { position: relative; margin-top: 7px; height: 5px; border-radius: 5px; background: rgba(233, 243, 238, .1); overflow: hidden; transform-origin: left; transform: scaleX(0); transition: transform .8s var(--ease); }
.fx-books .bk-bar .in { position: absolute; left: 0; top: 0; bottom: 0; width: var(--w); border-radius: 5px; background: linear-gradient(90deg, #3F936E, #87CCAA); transform-origin: left; transform: scaleX(0); transition: transform .9s var(--ease) .35s; }
.fx-books .bk-row.shown .bk-bar, .fx-books .bk-row.shown .bk-bar .in { transform: none; }
.fx-books em { font-style: normal; font-size: 13px; color: #EFC876; font-variant-numeric: tabular-nums; opacity: 0; transform: translateX(6px); transition: opacity .6s .8s, transform .6s var(--ease) .8s; }
.fx-books .bk-row.shown em { opacity: 1; transform: none; }

/* ---------------------------------------------------------------- round 16 */
/* the promise: one line under the billing line, the conditions one tap away */
.lr-promise-line { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .16); display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; color: rgba(255, 255, 255, .9); }
.lr-promise-line .sh { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .92); margin-top: 1px; }
.lr-promise-line .sh svg { width: 12px; height: 12px; fill: none; stroke: #0C3A27; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.lr-promise-line a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 3px; transition: text-decoration-color .25s; }
.lr-promise-line a:hover { text-decoration-color: #fff; }
.lr-promise-line b { font-weight: 600; }
.lr-memf .lr-mem { margin-top: clamp(36px, 4vw, 52px) !important; }
/* coming soon: a quiet pointer to the email list */
.lr-hold-foot { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 18px; }
.lr-hold-foot .lr-hold-tag { margin: 0; }
.lr-loop { display: inline-block; font-size: 15px; line-height: 1.5; color: var(--stone); text-decoration: none; }
.lr-loop b { font-weight: 500; color: var(--money); white-space: nowrap; }
.lr-loop svg { display: inline-block; vertical-align: -2px; margin-left: 6px; width: 15px; height: 15px; fill: none; stroke: var(--money); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease); }
@media (max-width: 640px) { .lr-hold-foot { flex-direction: column; align-items: flex-start; gap: 10px; } }
.lr-loop:hover svg { transform: translateY(3px); }
.lr-loop:hover b { text-decoration: underline; text-underline-offset: 3px; }
#lr-news { scroll-margin-top: calc(var(--nav-h) + 24px); }

/* ---------------------------------------------------------------- round 17 */
/* Origin study, round 2 (Oct 20, 2026): the laurel panel and logo row, "Your
   betting, understood.", Download, and the logo in place of Les's dots. */
.lr-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* the logo, front-facing glass: three slabs that step down into place as the
   section scrolls in (--k from 0 to 1, set by home.js); the landing glows */
.lr-mark { --k: 1; position: relative; display: block; width: 66px; height: 51px; margin: 0 auto 28px; }
.lr-mark i { position: absolute; width: 44.44%; height: 28.57%; border-radius: 999px; background: linear-gradient(135deg, #FFFFFF 0%, rgba(222, 247, 233, .92) 34%, rgba(160, 218, 189, .7) 70%, rgba(44, 118, 86, .75) 100%); box-shadow: inset 0 1.5px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, .35), inset -5px -6px 12px rgba(9, 40, 27, .3), 0 14px 22px -10px rgba(0, 0, 0, .85); }
.lr-mark i:nth-child(1) { left: 0; top: 0; }
.lr-mark i:nth-child(2) { left: 27.78%; top: 35.71%; transform: translate(calc(-62.5% * (1 - var(--k))), calc(-125% * (1 - var(--k)))); opacity: calc(.2 + .8 * var(--k)); }
.lr-mark i:nth-child(3) { left: 55.56%; top: 71.43%; transform: translate(calc(-125% * (1 - var(--k))), calc(-250% * (1 - var(--k)))); opacity: calc(.2 + .8 * var(--k)); background: linear-gradient(135deg, #FFFFFF 0%, #CFF3DE 30%, #87CCAA 62%, #2C7656 100%); box-shadow: inset 0 1.5px 0 #fff, 0 0 calc(30px * var(--k)) rgba(168, 237, 196, calc(.6 * var(--k))), 0 14px 22px -10px rgba(0, 0, 0, .85); }
.lr-mark.sm { width: 34px; height: 26px; margin: 0 auto; }
.lr-mark.sm i { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset -3px -4px 8px rgba(9, 40, 27, .45); }
.lr-support .lr-mark { margin-top: 4px; }

/* trust: a pale panel lit green from below, Origin's four laurels, and one grey row of books */
.lr-works { background: #fff; padding: clamp(14px, 2.2vw, 32px) 0 clamp(60px, 6.5vw, 96px); }
.lr-works-panel { position: relative; margin: 0 clamp(12px, 2.2vw, 32px); border-radius: 24px; overflow: hidden; isolation: isolate; text-align: center; padding: clamp(64px, 7vw, 100px) 0 clamp(64px, 7vw, 92px); background: linear-gradient(180deg, #FCFEFD 0%, #F1F7F4 48%, #D9EDE2 100%); box-shadow: inset 0 0 0 1px rgba(12, 14, 13, .06); }
.lr-works-glow { position: absolute; z-index: -1; left: -6%; right: -6%; bottom: -22%; height: 74%; pointer-events: none; background: radial-gradient(ellipse 22% 48% at 13% 78%, rgba(16, 117, 80, .55), transparent 70%), radial-gradient(ellipse 34% 56% at 50% 86%, rgba(135, 204, 170, .95), rgba(168, 237, 196, .55) 45%, transparent 75%), radial-gradient(ellipse 24% 50% at 87% 80%, rgba(63, 147, 110, .62), transparent 70%); filter: blur(34px); }
.lr-works .lr-h2 { max-width: 20ch; margin: 0 auto; }
.lr-works .lr-body { margin: 20px auto 0; max-width: 40ch; }
.lr-laurels { list-style: none; margin: clamp(34px, 4vw, 50px) auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px clamp(14px, 2.2vw, 30px); color: #0E4A31; }
.lr-lau { display: flex; align-items: center; gap: 5px; }
.lr-lau .br { flex: none; width: 21px; height: 64px; fill: currentColor; }
.lr-lau .br.r { transform: scaleX(-1); }
.lr-lau .in { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 112px; text-align: center; }
.lr-lau .top { height: 19px; display: flex; align-items: center; justify-content: center; }
.lr-lau .top svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.lr-lau .stars { font-size: 13px; letter-spacing: 2.5px; margin-right: -2.5px; }
.lr-lau .ser { font-family: var(--serif); font-style: italic; font-size: 18px; letter-spacing: -.01em; line-height: 1; }
.lr-lau .cap { font-size: 10.5px; font-weight: 500; letter-spacing: .15em; text-transform: uppercase; line-height: 1.4; }
.lr-laurels.on-dark { color: #FFFFFF; }
.lr-books { list-style: none; margin: clamp(40px, 4.4vw, 56px) auto 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 30px clamp(36px, 4.4vw, 64px); }
.lr-books li { display: flex; }
.lr-books .bk { display: block; height: var(--h); aspect-ratio: var(--ar); background: #A2A9A5; -webkit-mask: var(--m) center / contain no-repeat; mask: var(--m) center / contain no-repeat; transition: background .35s var(--ease); }
.lr-books li:hover .bk { background: #59605C; }
.bk.fd { --m: url(/assets/lr/wordmarks/fanduel.svg); --ar: 4.645; --h: 23px; }
.bk.dk { --m: url(/assets/lr/wordmarks/draftkings.svg); --ar: 1.973; --h: 38px; }
.bk.mgm { --m: url(/assets/lr/wordmarks/betmgm.svg); --ar: 5.946; --h: 17px; }
.bk.fan { --m: url(/assets/lr/wordmarks/fanatics.png); --ar: 4.675; --h: 23px; }
.bk.br { --m: url(/assets/lr/wordmarks/betrivers.png); --ar: 4.896; --h: 21px; }
.bk.kal { --m: url(/assets/lr/wordmarks/kalshi.svg); --ar: 3.416; --h: 25px; }
.lr-books-note { margin: 30px auto 0; text-align: center; font-size: 12px; color: #8C918E; }
@media (max-width: 640px) {
  .lr-books { gap: 26px 34px; max-width: 360px; }
  .lr-books li { width: calc(33.33% - 24px); justify-content: center; }
  .lr-books .bk { height: calc(var(--h) * .86); }
  .lr-laurels { gap: 18px 6px; }
  .lr-lau .in { min-width: 100px; }
}

/* Your betting, understood: a night panel, two green lights that turn as you scroll, Les on a phone */
.lr-und { background: #fff; padding: clamp(14px, 2.2vw, 32px) 0; }
.lr-und-panel { position: relative; isolation: isolate; overflow: hidden; margin: 0 clamp(12px, 2.2vw, 32px); border-radius: 24px; background: #000; color: #fff; text-align: center; padding-top: clamp(76px, 7.5vw, 104px); }
.lr-und .blob { position: absolute; z-index: -1; left: 50%; top: 50%; width: 100%; height: 34%; border-radius: 20%; background: linear-gradient(70deg, #0E6B47, #87CCAA 52%, #CFF3DE); filter: blur(52px); opacity: .9; transform: translate(-50%, -50%); will-change: transform; pointer-events: none; }
.lr-und-h { font-weight: 300; font-size: clamp(46px, 6.2vw, 88px); line-height: 1; letter-spacing: -.052em; color: #fff; }
.lr-und-h i { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; font-size: 1.04em; }
.lr-und-head p { margin: 22px auto 0; max-width: 36ch; font-size: clamp(16px, 1.2vw, 18px); line-height: 1.5; color: rgba(233, 243, 238, .62); }
.lr-und-phone { --pw: clamp(286px, 29vw, 410px); position: relative; height: calc(var(--pw) * 1.78); margin: clamp(40px, 4.4vw, 60px) auto 0; overflow: hidden; display: flex; justify-content: center; }
.lr-cphone { --w: var(--pw); flex: none; align-self: flex-start; }
.lr-cphone .lr-scr { background: radial-gradient(ellipse 130% 45% at 50% 0%, #0B2E21 0%, #030C08 50%, #000 80%); }
.chat { position: absolute; left: 14px; right: 14px; top: 46px; bottom: calc(var(--pw) * .3); display: flex; flex-direction: column; text-align: left; font-size: clamp(12.5px, calc(var(--pw) * .036), 14.5px); line-height: 1.45; color: #E9F3EE; letter-spacing: -.005em; }
.chat .ctop { flex: none; display: flex; align-items: center; justify-content: space-between; height: 34px; color: rgba(233, 243, 238, .7); }
.chat .ctop b { font-weight: 500; font-size: 13px; color: #fff; }
.chat .ctop svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.chat .ctop svg circle { fill: currentColor; stroke: none; }
.chat .hello { position: absolute; left: 0; right: 0; top: 34%; text-align: center; transition: opacity .55s var(--ease), transform .55s var(--ease); }
.chat .hello p { margin-top: 14px; font-family: var(--serif); font-size: 2em; line-height: 1.1; color: rgba(255, 255, 255, .92); letter-spacing: -.01em; }
.chat .hello.out { opacity: 0; transform: translateY(-12px); }
.chat .tv { position: relative; flex: 1; overflow: hidden; -webkit-mask: linear-gradient(180deg, transparent 0, #000 18px); mask: linear-gradient(180deg, transparent 0, #000 18px); }
.chat .thread { position: absolute; left: 0; right: 0; top: 0; padding-bottom: 8px; transition: transform .75s var(--ease); }
.chat [data-step] { display: none; }
.chat [data-step].on { display: block; animation: lrMsgIn .55s var(--ease) both; }
.chat .q.on { display: block; }
.chat .q { width: fit-content; max-width: 80%; margin: 14px 0 0 auto; padding: 8px 12px; border-radius: 14px 14px 4px 14px; background: #1D2421; color: #fff; }
.chat .a > * { animation: lrAnsIn .5s var(--ease) both; }
.chat .a > :nth-child(2) { animation-delay: .08s; } .chat .a > :nth-child(3) { animation-delay: .16s; } .chat .a > :nth-child(4) { animation-delay: .24s; }
.chat .a.on { animation: lrAnsIn .5s var(--ease) both; }
.chat .a p { margin-top: 12px; }
.chat .tbl { display: grid; grid-template-columns: 1.25fr 1fr 1fr; margin-top: 10px; font-size: .92em; }
.chat .tbl span { padding: 6px 0; border-bottom: 1px solid rgba(233, 243, 238, .08); color: #fff; }
.chat .tbl .h { color: rgba(233, 243, 238, .55); }
.chat .tbl .k { color: rgba(233, 243, 238, .72); }
.chat .sugg { display: inline-flex; margin-top: 10px; padding: 6px 11px; border-radius: 999px; font-size: 11.5px; color: #A8EDC4; background: rgba(168, 237, 196, .1); box-shadow: inset 0 0 0 1px rgba(168, 237, 196, .26); }
.chat .fb { display: flex; gap: 13px; margin-top: 10px; color: rgba(233, 243, 238, .42); }
.chat .fb svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.chat .goal { display: grid; grid-template-columns: 1fr auto; gap: 7px; margin-top: 10px; font-size: .92em; }
.chat .goal span { color: rgba(233, 243, 238, .72); }
.chat .goal b { font-weight: 500; }
.chat .goal i { grid-column: 1 / -1; height: 5px; border-radius: 3px; background: rgba(233, 243, 238, .1); overflow: hidden; }
.chat .goal em { display: block; width: 64%; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #3F936E, #A8EDC4); transform-origin: left; animation: lrGoal 1.3s var(--ease) .45s both; }
/* the lit edge that turns around the input while it is active */
@property --lr-ang { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.chat .ask { position: relative; isolation: isolate; flex: none; margin-top: 8px; padding: 10px 12px 9px; border-radius: 16px; background: #0B100D; box-shadow: inset 0 0 0 1px rgba(233, 243, 238, .1); transition: box-shadow .4s var(--ease); }
/* Oct 21: the input itself carries the green glow while Marcus types (it used to sit on a "reading your bets" box, which is gone: Les already has the bets). */
.chat .ask::before { content: ""; position: absolute; z-index: -1; inset: -1px; padding: 1px; border-radius: 17px; background: conic-gradient(from var(--lr-ang), #107550, #A8EDC4, #3F936E 40%, #E9F3EE 55%, #107550 75%, #87CCAA, #107550); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .35s var(--ease); animation: lrAng 2.6s linear infinite; pointer-events: none; }
.chat .ask::after { content: ""; position: absolute; z-index: -2; inset: -5px; border-radius: 20px; background: conic-gradient(from var(--lr-ang), rgba(16, 117, 80, 0), rgba(168, 237, 196, .5), rgba(63, 147, 110, .1) 45%, rgba(168, 237, 196, .36) 70%, rgba(16, 117, 80, 0)); filter: blur(9px); opacity: 0; transition: opacity .35s var(--ease); animation: lrAng 2.6s linear infinite; pointer-events: none; }
.chat .ask.live { box-shadow: inset 0 0 0 1px rgba(168, 237, 196, .2); }
.chat .ask.live::before, .chat .ask.live::after { opacity: 1; }
.chat .fld { position: relative; min-height: 18px; color: #fff; white-space: nowrap; overflow: hidden; }
.chat .ph { position: absolute; left: 4px; top: 0; color: rgba(233, 243, 238, .38); }
.chat .ph.off { visibility: hidden; }
.chat .caret { display: inline-block; width: 1.5px; height: 14px; margin-left: 1px; background: #A8EDC4; vertical-align: -2px; animation: lrBlink 1.05s steps(1) infinite; }
.chat .row { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.chat .conn { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px; border-radius: 999px; font-size: 10.5px; color: rgba(233, 243, 238, .62); background: rgba(233, 243, 238, .06); }
.chat .conn b { width: 6px; height: 6px; border-radius: 50%; background: #87CCAA; box-shadow: 0 0 6px #87CCAA; }
.chat .send { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: rgba(233, 243, 238, .12); transition: background .25s, transform .16s var(--ease), box-shadow .25s; }
.chat .send svg { width: 12px; height: 12px; fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chat .send.go { background: #A8EDC4; }
.chat .send.press { transform: scale(.82); background: #E9F3EE; box-shadow: 0 0 0 5px rgba(168, 237, 196, .18); }
.chat .send.go svg, .chat .send.press svg { stroke: #04130D; }
.chat .disc { flex: none; margin-top: 9px; text-align: center; font-size: 10px; color: rgba(233, 243, 238, .36); }
.chat.fade .tv, .chat.fade .hello { opacity: 0; transition: opacity .6s var(--ease); }
@keyframes lrMsgIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes lrAnsIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes lrAng { to { --lr-ang: 360deg; } }
@keyframes lrBlink { 50% { opacity: 0; } }
@keyframes lrGoal { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.lr-reduce .chat .ask::before, .lr-reduce .chat .ask::after, .lr-reduce .chat .caret, .lr-reduce .chat [data-step].on, .lr-reduce .chat .a > *, .lr-reduce .chat .goal em { animation: none; }

/* Download, Origin's closing section on Forest */
.lr-dl { position: relative; isolation: isolate; overflow: hidden; text-align: center; color: #fff; padding: clamp(112px, 12vw, 176px) 0 clamp(96px, 10vw, 150px); background: linear-gradient(160deg, #164832 0%, #3F936E 70%, #87CCAA 100%); }
.lr-dl-bg { position: absolute; z-index: -1; inset: 0; background: url(/assets/lr/forest-silk.webp) center / cover no-repeat; opacity: .5; mix-blend-mode: soft-light; }
.lr-dl::after { content: ""; position: absolute; z-index: -1; inset: 0; background: radial-gradient(ellipse 50% 46% at 50% 40%, rgba(255, 255, 255, .14), transparent 70%); pointer-events: none; }
.lr-dl-h { font-weight: 300; font-size: clamp(58px, 8.2vw, 120px); line-height: 1; letter-spacing: -.055em; color: #fff; text-shadow: 0 2px 40px rgba(8, 36, 24, .25); }
.lr-dl-h i { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; font-size: 1.04em; }
.lr-dl .lr-laurels { margin-top: clamp(24px, 2.8vw, 36px); }
.lr-dl .lr-final-ctas { margin-top: clamp(30px, 3.4vw, 44px); display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lr-dl .lr-btn-white svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.lr-dl .lr-btn-glass { background: linear-gradient(135deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08)), rgba(12, 46, 31, .18); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .32), inset 0 0 0 1px rgba(255, 255, 255, .16), 0 12px 30px -16px rgba(8, 36, 24, .6); }
.lr-dl .lr-final-note { margin-top: 18px; font-size: 13px; color: rgba(255, 255, 255, .78); }
.lr-dl .lr-final-note a { color: #fff; text-decoration: underline; text-decoration-color: rgba(255, 255, 255, .45); text-underline-offset: 3px; }
@media (max-width: 640px) { .lr-dl .lr-final-ctas .lr-btn { flex: 1 1 100%; } }
@media (max-width: 640px) {
  .lr-laurels { gap: 16px 4px; }
  .lr-lau { gap: 3px; }
  .lr-lau .br { width: 16px; height: 50px; }
  .lr-lau .in { min-width: 0; width: 112px; gap: 5px; }
  .lr-lau .cap { font-size: 9.5px; letter-spacing: .12em; }
  .lr-lau .ser { font-size: 16px; }
}

/* ---------------------------------------------------------------- round 18 */
/* the Forest ending: Download and the footer on one continuous field (Oct 20, 2026) */
.lr-forest-end { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: radial-gradient(ellipse 70% 38% at 70% 26%, rgba(135, 204, 170, .45), transparent 70%), linear-gradient(168deg, #164832 0%, #2E7A59 30%, #3F936E 46%, #2A7154 70%, #143F2C 100%); }
.lr-forest-end::before { content: ""; position: absolute; z-index: -1; inset: 0; background: url(/assets/lr/forest-silk-tall.webp) center top / cover no-repeat; opacity: .5; mix-blend-mode: soft-light; pointer-events: none; }
.lr-forest-end .lr-dl { background: transparent; }
.lr-forest-end .lr-dl-bg { display: none; }
.lr-forest-end .lr-foot { border-top: 0; padding-top: clamp(24px, 3vw, 40px); }
.lr-forest-end .lr-news { border-bottom-color: rgba(255, 255, 255, .16); padding: clamp(28px, 3vw, 40px); border: 0; border-radius: 24px; background: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05)); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 30px 60px -36px rgba(4, 30, 19, .7); }
.lr-forest-end .lr-news h3 { color: #fff; }
.lr-forest-end .lr-news-copy p { color: rgba(255, 255, 255, .78); }
.lr-forest-end .lr-news-form input { color: #fff; background: rgba(4, 30, 19, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22); }
.lr-forest-end .lr-news-form input::placeholder { color: rgba(255, 255, 255, .55); }
.lr-forest-end .lr-news-form input:focus { box-shadow: inset 0 0 0 2px #A8EDC4, 0 0 0 4px rgba(168, 237, 196, .18); }
.lr-forest-end .lr-news-form button { color: #0C0E0D; background: linear-gradient(180deg, #FFFFFF, #E4ECE8); box-shadow: inset 0 1px 0 #fff, 0 16px 36px -14px rgba(4, 30, 19, .55); }
.lr-forest-end .lr-news-form button:hover { box-shadow: inset 0 1px 0 #fff, 0 20px 40px -14px rgba(4, 30, 19, .65); }
.lr-forest-end .lr-news-fine { color: rgba(255, 255, 255, .62); }
.lr-forest-end .lr-news-fine a { color: #fff; }
.lr-forest-end .lr-news-status { color: #A8EDC4; }
.lr-forest-end .lr-news-status.err { color: #F6C2B5; }
.lr-forest-end .lr-news { margin-bottom: clamp(48px, 5vw, 64px); }
.lr-forest-end .lr-foot .lr-logo rect:not(:last-child) { fill: #FFFFFF; }
.lr-forest-end .lr-foot .lr-logo rect:last-child { fill: #A8EDC4; }
.lr-forest-end .lr-foot .lr-wm { color: #fff; }
.lr-forest-end .lr-foot .lr-wm .n { color: #A8EDC4; }
.lr-forest-end .lr-foot-brand p { color: rgba(255, 255, 255, .72); }
.lr-forest-end .lr-foot h4 { color: #fff; }
.lr-forest-end .lr-foot ul a { color: rgba(255, 255, 255, .7); transition: color .25s; }
.lr-forest-end .lr-foot ul a:hover { color: #fff; }
.lr-forest-end .lr-foot-help { color: rgba(255, 255, 255, .8); background: rgba(4, 30, 19, .26); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.lr-forest-end .lr-foot-help a { color: #fff; }
.lr-forest-end .lr-foot-bot { color: rgba(255, 255, 255, .58); }
.lr-forest-end .lr-foot a:focus-visible { outline-color: #A8EDC4; }
.lr-forest-end .lr-dl { padding-bottom: clamp(56px, 6vw, 88px); }

/* ---------------------------------------------------------------- round 19 */
/* Download buttons keep their own width on phones, side by side when they fit */
@media (max-width: 640px) {
  .lr-dl .lr-final-ctas .lr-btn { flex: 0 0 auto; padding: 0 22px; }
}
/* the trust section on Forest, top and bottom (Kene, Oct 20, 2026) */
.lr-forest-works { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: radial-gradient(ellipse 60% 40% at 20% 0%, rgba(255, 255, 255, .1), transparent 70%), linear-gradient(170deg, #164832 0%, #2E7A59 45%, #3F936E 75%, #5FAE88 100%); }
.lr-forest-works::before { content: ""; position: absolute; z-index: -1; inset: 0; background: url(/assets/lr/forest-silk.webp) center / cover no-repeat; opacity: .45; mix-blend-mode: soft-light; pointer-events: none; }
.lr-forest-works .lr-works-panel { background: linear-gradient(180deg, rgba(255, 255, 255, .12), rgba(255, 255, 255, .04)); -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 40px 80px -50px rgba(4, 30, 19, .7); }
.lr-forest-works .lr-works-glow { background: radial-gradient(ellipse 22% 48% at 13% 78%, rgba(168, 237, 196, .35), transparent 70%), radial-gradient(ellipse 34% 56% at 50% 86%, rgba(233, 243, 238, .4), rgba(168, 237, 196, .25) 45%, transparent 75%), radial-gradient(ellipse 24% 50% at 87% 80%, rgba(135, 204, 170, .35), transparent 70%); }
.lr-forest-works .lr-h2 { color: #fff; }
.lr-forest-works .lr-h2 .m { color: #A8EDC4; }
.lr-forest-works .lr-body { color: rgba(255, 255, 255, .8); }
.lr-forest-works .lr-laurels { color: #fff; }
.lr-forest-works .lr-books .bk { background: rgba(255, 255, 255, .78); }
.lr-forest-works .lr-books li:hover .bk { background: #fff; }
.lr-forest-works .lr-books-note { color: rgba(255, 255, 255, .6); }
.lr-books-groups { display: flex; justify-content: center; align-items: stretch; gap: clamp(28px, 4vw, 56px); margin-top: clamp(44px, 4.6vw, 60px); }
.lr-books-groups .lr-books { margin: 0; }
.lr-books-groups .grp { display: flex; flex-direction: column; align-items: center; gap: 22px; }
.lr-books-groups .grp.pm { padding-left: clamp(28px, 4vw, 56px); border-left: 1px solid rgba(255, 255, 255, .22); }
.lr-books-lab { font-size: 12px; font-weight: 500; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
@media (max-width: 900px) {
  .lr-books-groups { flex-direction: column; align-items: center; }
  .lr-books-groups .grp.pm { padding: 26px 0 0; border-left: 0; border-top: 1px solid rgba(255, 255, 255, .22); min-width: 200px; }
}

/* ---------------------------------------------------------------- round 20 */
.lr-books-more { margin-top: -8px; font-size: 13px; color: rgba(255, 255, 255, .62); letter-spacing: -.005em; }
/* the trust section's own light: a bright wash pouring in from the top right corner */
.lr-forest-works { background: radial-gradient(ellipse 38% 46% at 100% 0%, rgba(233, 255, 242, .55), rgba(168, 237, 196, .22) 38%, transparent 72%), radial-gradient(ellipse 70% 60% at 92% 6%, rgba(135, 204, 170, .32), transparent 70%), linear-gradient(200deg, #3F936E 0%, #2E7A59 38%, #1F5F44 70%, #164832 100%); }
.lr-forest-works::after { content: ""; position: absolute; z-index: -1; top: -20%; right: -10%; width: 70%; height: 90%; pointer-events: none; background: conic-gradient(from 200deg at 92% 8%, transparent 0deg, rgba(255, 255, 255, .16) 18deg, transparent 34deg, rgba(255, 255, 255, .1) 50deg, transparent 66deg); filter: blur(24px); mix-blend-mode: soft-light; }
.lr-forest-works .lr-works-panel { box-shadow: inset -1px 1px 0 rgba(255, 255, 255, .34), inset 0 0 0 1px rgba(255, 255, 255, .12), 0 40px 80px -50px rgba(4, 30, 19, .7); }
.lr-forest-works { background: radial-gradient(circle at 100% 0%, rgba(255, 255, 255, .85) 0, rgba(233, 255, 242, .6) 6%, rgba(168, 237, 196, .38) 18%, rgba(135, 204, 170, .16) 34%, transparent 55%), radial-gradient(ellipse 80% 70% at 96% 4%, rgba(135, 204, 170, .3), transparent 70%), linear-gradient(200deg, #3F936E 0%, #2E7A59 38%, #1F5F44 70%, #164832 100%); }
.lr-forest-works::after { top: 0; right: 0; width: 100%; height: 100%; background: conic-gradient(from 198deg at 100% 0%, transparent 0deg, rgba(255, 255, 255, .22) 10deg, transparent 20deg, rgba(255, 255, 255, .14) 30deg, transparent 40deg, rgba(255, 255, 255, .18) 52deg, transparent 64deg, rgba(255, 255, 255, .1) 74deg, transparent 86deg); -webkit-mask: radial-gradient(circle at 100% 0%, #000 0, rgba(0, 0, 0, .6) 35%, transparent 75%); mask: radial-gradient(circle at 100% 0%, #000 0, rgba(0, 0, 0, .6) 35%, transparent 75%); filter: blur(14px); mix-blend-mode: screen; }

/* ---------------------------------------------------------------- round 21 */
/* section feathering (Kene, Oct 20, 2026): no straight line between the hero
   and the trust section. The hero gets an empty band of --fx at the bottom,
   below all its text, and that band fades to nothing while the trust section
   slides up underneath it, so the two run together. The fade sits on the
   section itself, not on the drifting silk, so scrolling can't push it out. */
.lr-feather { --fx: clamp(150px, 17vw, 260px); z-index: 2; padding-bottom: var(--fx); -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - var(--fx)), rgba(0, 0, 0, .62) calc(100% - var(--fx) * .55), rgba(0, 0, 0, .2) calc(100% - var(--fx) * .2), transparent 100%); mask-image: linear-gradient(180deg, #000 calc(100% - var(--fx)), rgba(0, 0, 0, .62) calc(100% - var(--fx) * .55), rgba(0, 0, 0, .2) calc(100% - var(--fx) * .2), transparent 100%); }
.lr-feather + .lr-works { z-index: 1; margin-top: calc(-1 * clamp(150px, 17vw, 260px)); padding-top: calc(clamp(150px, 17vw, 260px) * .55); }

/* ---------------------------------------------------------------- round 22 */
/* Les, made of light: the logo in tiny lights, always becoming another kind of help */
.lr-les-morph { display: block; width: 260px; height: 200px; margin: -18px auto 4px; }
@media (max-width: 640px) { .lr-les-morph { width: 210px; height: 166px; margin-top: -10px; } }

/* ================================================================ hero, Origin replica (Kene, Oct 23, 2026)
 * Measured from useorigin.com's live hero (1440×900 and 390×844, GSAP source
 * read in the page): headline top 135, 96px/1.15 in two lines; one 16/24 line
 * 420 wide at 60% white, 24 below; one 48px button 24 below that; the phone
 * 48 below the button, 630 wide with 80/60 padding, its frame cut by the
 * bottom of the hero. Inside: a 48px glass tile, a 48/1.15 headline, and a
 * 466×248 card stack. Breakpoints follow Origin's: 991, 767, 479. */
.lr-hero2 .lr-hero2-in { padding-top: 135px; }
.lr-hx-title { max-width: none; margin: 0 auto; font-weight: 300; font-size: 96px; line-height: 1.15; letter-spacing: -.045em; }
.lr-hx-title .ln { display: block; white-space: nowrap; }
.lr-hx-title em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; font-size: 1.04em; padding-right: .04em; line-height: 1; }
.lr-hx-sub { max-width: 420px; margin: 24px auto 0; font-weight: 300; font-size: 16px; line-height: 24px; letter-spacing: 0; color: rgba(255, 255, 255, .6); text-wrap: balance; }
.lr-hx-btns { margin-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.lr-hx-start { display: inline-flex; align-items: center; gap: 4px; height: 48px; padding: 12px 18px; border-radius: 8px; box-sizing: border-box; text-decoration: none; white-space: nowrap;
  font: 500 12px/24px var(--sans); letter-spacing: .05em; text-transform: uppercase; color: #000; background: #FFFFFF; -webkit-tap-highlight-color: transparent; transition: background-color .2s; }
.lr-hx-start:hover { background: rgba(255, 255, 255, .86); }
.lr-hx-start:focus-visible { outline: 2px solid #A8EDC4; outline-offset: 3px; }
.lr-hx-start svg { width: 15px; height: 15px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
/* (Kene, Oct 25, 2026) the hero's two buttons. Get started stays white; See my breakdown, under it, is
   space black: a graphite-to-ink face, a hairline rim and a soft top light. On hover both lift 2px, their
   shadow deepens, a band of light passes across the face once, and the arrow steps forward. Transform and
   opacity only; still under reduced motion. */
.lr-hx-alt { position: relative; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 48px; padding: 12px 18px; border-radius: 8px; box-sizing: border-box; text-decoration: none; white-space: nowrap;
  font: 500 12px/24px var(--sans); letter-spacing: .05em; text-transform: uppercase; color: #F4F6F5;
  background: linear-gradient(180deg, #3A3D3C 0%, #1D201F 48%, #0B0C0C 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 0 0 1px rgba(255, 255, 255, .09), 0 10px 24px -12px rgba(0, 0, 0, .8);
  -webkit-tap-highlight-color: transparent; }
.lr-hx-btns .lr-hx-start { position: relative; overflow: hidden; box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .6); }
.lr-hx-btns .lr-hx-start, .lr-hx-btns .lr-hx-alt { min-width: 184px; justify-content: center;
  transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s cubic-bezier(.22, .61, .36, 1), background-color .2s; }
.lr-hx-btns .lr-hx-start::after, .lr-hx-btns .lr-hx-alt::after { content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 45%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent); transform: skewX(-18deg) translateX(0); opacity: 0; }
.lr-hx-btns .lr-hx-alt::after { background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .16), transparent); }
.lr-hx-btns .lr-hx-start svg { transition: transform .35s cubic-bezier(.22, .61, .36, 1); }
@media (hover: hover) {
  .lr-hx-btns .lr-hx-start:hover { transform: translateY(-2px); background: #FFFFFF; box-shadow: 0 16px 30px -14px rgba(0, 0, 0, .7), 0 0 0 1px rgba(255, 255, 255, .6); }
  .lr-hx-btns .lr-hx-alt:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), inset 0 0 0 1px rgba(255, 255, 255, .16), 0 18px 32px -14px rgba(0, 0, 0, .9); }
  .lr-hx-btns .lr-hx-start:hover svg { transform: translateX(3px); }
  .lr-hx-btns .lr-hx-start:hover::after, .lr-hx-btns .lr-hx-alt:hover::after { animation: lrHxSheen .8s cubic-bezier(.22, .61, .36, 1) forwards; }
}
.lr-hx-btns .lr-hx-start:active, .lr-hx-btns .lr-hx-alt:active { transform: translateY(0); transition-duration: .1s; }
.lr-hx-alt:focus-visible { outline: 2px solid #A8EDC4; outline-offset: 3px; }
@keyframes lrHxSheen { 0% { opacity: 0; transform: skewX(-18deg) translateX(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: skewX(-18deg) translateX(420%); } }
@media (prefers-reduced-motion: reduce) {
  .lr-hx-btns .lr-hx-start, .lr-hx-btns .lr-hx-alt, .lr-hx-btns .lr-hx-start svg { transition: none; }
  .lr-hx-btns .lr-hx-start:hover, .lr-hx-btns .lr-hx-alt:hover, .lr-hx-btns .lr-hx-start:hover svg { transform: none; }
  .lr-hx-btns .lr-hx-start:hover::after, .lr-hx-btns .lr-hx-alt:hover::after { animation: none; }
}

/* the phone stands still; only the cards move */
.lr-hx-phone { position: relative; z-index: 2; box-sizing: border-box; width: 100%; max-width: 630px; margin: 48px auto 0; padding: 112px 60px 80px; }
/* the frame is the site's one phone shell (.lr-phone, phone.css), as wide as this box;
   the wrapper reaches 12px past each side so the side buttons survive the fade mask */
.lr-hx-frame { position: absolute; left: -12px; right: -12px; top: 0; padding: 0 12px; pointer-events: none; }
.lr-hx-frame .lr-phone { --w: calc(100cqw + 2 * var(--hx-px, 60px)); }
.lr-hx-frame .lr-phone-scr { background: linear-gradient(160deg, #0D0F10 0%, #060707 35%, #030404 100%); }
.lr-hx-scr { position: relative; text-align: center; color: #FFFFFF; }
.lr-hx-head { margin: 16px auto 40px; max-width: 470px; font-weight: 300; font-size: 48px; line-height: 1.15; letter-spacing: -.04em; color: #FAFAFA; text-wrap: balance; }
.lr-hx-deck { display: flex; justify-content: center; }
.lr-hx-stack { position: relative; box-sizing: border-box; width: 100%; max-width: 484px; padding-right: 18px; height: 248px; }
.lr-hx-card { position: absolute; top: 0; left: 0; right: 18px; height: 248px; box-sizing: border-box; padding: 24px; display: flex; flex-direction: column; gap: 24px; overflow: hidden; text-align: left;
  border-radius: 24px; border: 1px solid rgba(255, 255, 255, .13); background-color: rgba(255, 255, 255, .07);
  background-image: radial-gradient(100% 58.12% at 100% 100%, rgba(135, 204, 170, .16) 0%, rgba(135, 204, 170, 0) 100%);
  -webkit-backdrop-filter: blur(24px); backdrop-filter: blur(24px); opacity: 0; will-change: transform, opacity; }
.lr-hx-card p { margin: 0; }
.lr-hx-card .cap { display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 500 15px/1.6 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .36); }
.lr-hx-card .cap em { display: inline-flex; align-items: center; gap: 4px; font-style: normal; font-size: 12px; letter-spacing: .08em; color: rgba(255, 255, 255, .6); }
.lr-hx-card .cap svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.lr-hx-card .ttl { font-weight: 300; font-size: 36px; line-height: 1.15; letter-spacing: -.035em; color: rgba(255, 255, 255, .82); text-wrap: balance; }
.lr-hx-card .dsc { font-weight: 300; font-size: 20px; line-height: 1.42; letter-spacing: -.01em; color: #FFFFFF; text-wrap: pretty; }
/* resting stack before the script runs, and the still state for reduced motion */
.lr-hx-card:nth-child(1) { opacity: 1; z-index: 3; }
.lr-hx-card:nth-child(2) { opacity: .4; z-index: 2; transform: translate(8px, 0) rotate(3deg); }
.lr-hx-card:nth-child(3) { opacity: .4; z-index: 1; transform: translate(3px, 0) rotate(-3deg); }

@media (max-width: 991px) {
  .lr-hero2 .lr-hero2-in { padding-top: 130px; }
  .lr-hx-title { font-size: 84px; }
  .lr-hx-phone { max-width: 560px; padding-top: 100px; padding-bottom: 70px; }
  .lr-hx-head { font-size: 38px; }
  .lr-hx-stack { padding-right: 0; }
  .lr-hx-card { right: 0; }
}
@media (max-width: 767px) {
  .lr-hero2 .lr-hero2-in { padding-top: 100px; }
  .lr-hx-title { font-size: 50px; }
  .lr-hx-sub { margin-top: 16px; }
  .lr-hx-btns { margin-top: 16px; }
  .lr-hx-phone { padding: 100px 50px 50px; }
  .lr-hx-stack, .lr-hx-card { height: 250px; }
  .lr-hx-card { gap: 14px; padding: 20px; }
  .lr-hx-card .cap { font-size: 12px; }
  .lr-hx-card .ttl { font-size: 30px; }
  .lr-hx-card .dsc { font-size: 16px; }
}
@media (max-width: 479px) {
  .lr-hero2 .lr-hero2-in { padding-top: 113px; padding-left: 16px; padding-right: 16px; }
  .lr-hx-title { font-size: 34px; }
  .lr-hx-sub { max-width: none; }
  .lr-hx-phone { width: calc(100% - 32px); margin-top: 38px; padding: 70px 30px 40px; }
  .lr-hx-head { margin-bottom: 30px; font-size: 30px; }
  .lr-hx-stack, .lr-hx-card { height: 248px; }
  .lr-hx-card { gap: 14px; padding: 16px; }
  .lr-hx-card .cap em { font-size: 10px; }
  .lr-hx-card .dsc { font-size: 15px; line-height: 1.42; }
}
/* behind the glass screen: let the silk read through, as Origin's sky does */
.lr-hero2 .lr-shade { background:
    radial-gradient(ellipse 46% 30% at 50% 24%, rgba(1, 8, 5, .45), rgba(1, 8, 5, 0) 100%),
    linear-gradient(180deg, rgba(2, 10, 6, .2) 0%, rgba(2, 10, 6, 0) 30%, rgba(2, 10, 6, .3) 72%, rgba(22, 72, 50, .9) 100%); }


/* The hero feathers into the next section again (Kene, Oct 23: no straight
 * seams). The fade also clips the phone softly. */

/* Les's mark: a pearl made of tiny lights (the "Les made of light" style),
 * drawn by home.js on a small canvas in a glass tile. Its points twinkle and
 * a faint scan passes over it every 6 s; still under reduced motion and
 * paused off screen. */
.lr-hx-ico { position: relative; width: 48px; height: 48px; margin: 0 auto; border-radius: 13px; display: grid; place-items: center; isolation: isolate;
  background: linear-gradient(155deg, rgba(255, 255, 255, .15) 0%, rgba(255, 255, 255, .05) 45%, rgba(255, 255, 255, .02) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 0 1px rgba(255, 255, 255, .1), inset 0 -1px 0 rgba(0, 0, 0, .25), 0 10px 24px -12px rgba(0, 0, 0, .6); }
.lr-hx-ico::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(168, 237, 196, .16), transparent 60%); }
.lr-hx-pearl { display: block; width: 30px; height: 30px; filter: drop-shadow(0 0 4px rgba(168, 237, 196, .35)); }
@media (max-width: 479px) { .lr-hx-ico { width: 44px; height: 44px; border-radius: 12px; } .lr-hx-pearl { width: 28px; height: 28px; } }


/* the phone's frame fades out by itself before the next panel, so its rails
 * never run behind that glass (the hero's own feather does the rest; the
 * falling card fades out in home.js) */
.lr-hx-frame { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 560px, transparent 735px); mask-image: linear-gradient(180deg, #000 0, #000 560px, transparent 735px); }
@media (max-width: 991px) { .lr-hx-frame { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 500px, transparent 660px); mask-image: linear-gradient(180deg, #000 0, #000 500px, transparent 660px); } }
@media (max-width: 479px) {
  .lr-hx-frame { -webkit-mask-image: linear-gradient(180deg, #000 0, #000 420px, transparent 545px); mask-image: linear-gradient(180deg, #000 0, #000 420px, transparent 545px); }
  .lr-hx-stack, .lr-hx-card { height: 226px; }
}

/* ---------------------------------------------------------------- hero fixes (Oct 23, 2026)
 * The rotating word was removed on Oct 25, 2026: the headline is now
 * "Bet on the game. Keep your paycheck." with the second line in the serif. */

/* the three cards that say what Les could save carry it in mint, top right */
.lr-hx-card .cap em.sv { color: rgba(168, 237, 196, .9); letter-spacing: .06em; }

/* The cards live in a window the size of the phone's glass: as wide as the
 * screen inside the bezel, starting just under the phone headline, clipped
 * (overflow: clip, which keeps the cards' frosted blur working; a mask here
 * would cut the blur off and let the back cards' words show through). A
 * falling card can never leave the screen sideways or touch the headline.
 * The window is drawn with negative margins, so the layout does not change.
 * --hx-px is the phone's side padding.
 * The falling card's own fade is a mask home.js moves with it. */
.lr-hx-phone { container-type: inline-size; --hx-px: 60px; --hx-gap: 40px; padding-left: var(--hx-px); padding-right: var(--hx-px); }
/* cqw is 1% of the phone's content width. The window's edge is the inner
 * edge of the bezel, just inside its black rim and highlight (23.5/630 of
 * the phone's full width), so a clipped card corner meets the bezel instead
 * of a straight line on the glass. */
.lr-hx-deck { --side: calc(var(--hx-px) * .92540 - 3.7302cqw); --top: calc(var(--hx-gap) - 6px);
  margin: calc(-1 * var(--top)) calc(-1 * var(--side)) -260px; padding: var(--top) var(--side) 260px; overflow: hidden; overflow: clip; }
@media (max-width: 767px) { .lr-hx-phone { --hx-px: 50px; } }
@media (max-width: 479px) { .lr-hx-phone { --hx-px: 30px; --hx-gap: 30px; } }
/* the shorter line about Les still sits on two lines, as Origin's does, so
 * the button and the phone keep Origin's spacing (button 452, phone 548) */
.lr-hx-sub { max-width: 440px; }
@media (max-width: 479px) { .lr-hx-sub { max-width: 330px; } }

/* ================================================================ responsive pairs (Oct 23, 2026)
   "We analyze everything", "We find ways to save", "We guide your next move":
   each photo card is followed in the page by the live card it describes, so
   anything that reads the page in order (a phone, a screen reader) gets the
   words first. On desktop the middle row is flipped by grid placement, never
   by order. Below 992px (iPad portrait and phones) each pair stacks: the
   words, then the live card, then a clear gap before the next pair. */
@media (min-width: 992px) {
  .lr-bento > .lr-photo--flip { grid-column: 2; grid-row: 2; }
  .lr-bento > .lr-photo--flip + .lr-ui { grid-column: 1; grid-row: 2; }
}
@media (max-width: 991px) {
  .lr-bento { grid-template-columns: minmax(0, 1fr); --gap: 12px; margin-left: 0; margin-right: 0; }
  .lr-bento > * { aspect-ratio: auto; min-height: 0; border-radius: 18px; }
  .lr-bento > .lr-photo:not(:first-child) { margin-top: 44px; }
  /* the words sit in the flow: the card grows with them, nothing is pinned over them */
  .lr-photo { justify-content: center; gap: 18px; min-height: 340px; padding: 64px 32px 56px; }
  .lr-photo h3 { margin: 0 !important; padding: 0; }
  .lr-photo p { width: auto; }
  .lr-photo h3 { font-size: clamp(40px, 8.2cqi, 60px); }
  .lr-photo p { max-width: 36ch; font-size: 16px; line-height: 1.5; }
  /* the live card keeps room for its whole loop */
  .lr-bento > .lr-ui { height: clamp(480px, 72vw, 611px); }
}
@media (max-width: 479px) {
  .lr-bento > .lr-photo:not(:first-child) { margin-top: 36px; }
  .lr-photo { min-height: 300px; padding: 56px 22px 48px; gap: 14px; }
  .lr-photo h3 { font-size: clamp(36px, 10.5cqi, 46px); }
  .lr-photo p { font-size: 15px; }
  /* taller, so the stage scales up and the demo's small print stays readable */
  .lr-bento > .lr-ui { height: clamp(480px, 135vw, 580px); }
}

/* ================================================================ hero deck, rebuilt (Oct 23, 2026)
   The cards flickered at their top edge and, now and then, at the bottom.
   Causes: (1) the deck clipped 6px above the cards, so the back cards'
   tilted corners kept crossing the clip line as they moved; (2) every card
   carried a backdrop-filter blur, which Chrome re-rasterises badly on
   rotated, animating, semi-transparent layers. Rebuilt:
   - the deck clips only the sides (to the glass inside the bezel) and the
     bottom; above the cards it never clips, so nothing can shave a corner;
   - the cards are a still glass surface painted with gradients, no
     backdrop-filter and no filter of any kind, each on its own layer;
   - only transform and opacity ever animate (home.js). */
.lr-hx-deck { margin-top: 0; padding-top: 0; overflow: visible;
  clip-path: inset(-400px 0 -200px 0); }
.lr-hx-card {
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; filter: none !important;
  -webkit-mask-image: none !important; mask-image: none !important;
  background-color: #1B2C25;
  background-image:
    linear-gradient(180deg, rgba(255, 255, 255, .085) 0%, rgba(255, 255, 255, .02) 46%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(100% 58% at 100% 100%, rgba(135, 204, 170, .16) 0%, rgba(135, 204, 170, 0) 100%);
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  transform-origin: 50% 50%; will-change: transform, opacity; contain: paint; }

/* ================================================================ deep black phone + entrance (Oct 23, 2026)
   Kene: the phone is a deep black device. The bezel is near-black graphite
   (index.html, #hxMoon) with one lit edge at the top left; the screen inside
   it is black glass (#hxScreen), so the silk no longer shows through it.
   The right-hand sheen is kept faint so the light reads from one side.
   The cards keep their own #1B2C25 surface. */
/* Les's tile sits on black now: a touch more light in its glass */
.lr-hx-ico { background: linear-gradient(155deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .07) 45%, rgba(255, 255, 255, .03) 100%), #121815; }

/* The entrance: headline, then the line under it, the button, and the phone
 * rising a little as it fades in. CSS only, and each animation runs
 * "backwards": it holds its first frame only during its delay and ends on
 * the element's own style, so the words are always there without the
 * script, after it, and in any screenshot taken once it has played.
 * Only opacity and transform, so nothing moves the layout. home.js starts
 * the turning word and the cards only after the phone has arrived.
 * With reduced motion there is no entrance at all. */
@keyframes lrHxRise { from { opacity: 0; transform: translate3d(0, 16px, 0); } }
@keyframes lrHxPhone { from { opacity: 0; transform: translate3d(0, 40px, 0); } }
.lr-hx-title { animation: lrHxRise .8s cubic-bezier(.22, .61, .36, 1) .1s backwards; }
.lr-hx-sub { animation: lrHxRise .7s cubic-bezier(.22, .61, .36, 1) .32s backwards; }
.lr-hx-btns { animation: lrHxRise .7s cubic-bezier(.22, .61, .36, 1) .48s backwards; }
.lr-hx-phone { animation: lrHxPhone .9s cubic-bezier(.22, .61, .36, 1) .62s backwards; }
@media (prefers-reduced-motion: reduce) {
  .lr-hx-title, .lr-hx-sub, .lr-hx-btns, .lr-hx-phone { animation: none; }
}

/* ================================================================ darker hero field (Oct 25, 2026)
   Kene: the mint headline and white text did not stand out on the lighter
   forest green. The silk stays, but it sits much darker, deep forest near
   black, so the words carry the light. One knob dims both the still image
   and the moving WebGL silk inside it; a wider shade rests behind the words.
   The silk still drifts (home.js); paused off screen, still under reduced
   motion. */
.lr-hero2 .lr-silk-img { opacity: .5; }
.lr-hero2 .lr-light { opacity: .5; }
.lr-hero2 .lr-shade { background:
    radial-gradient(ellipse 52% 34% at 50% 26%, rgba(1, 6, 4, .62), rgba(1, 6, 4, 0) 100%),
    linear-gradient(180deg, rgba(1, 7, 4, .35) 0%, rgba(1, 7, 4, .12) 30%, rgba(1, 7, 4, .32) 72%, rgba(10, 38, 26, .9) 100%); }

/* ---------------------------------------------------------------- Oct 26: the hero plays the forest film (as the Sharing card does) */
.lr-hero-film { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: 0; transition: opacity .8s; }
.lr-hero-film.on { opacity: 1; }
.lr-silk-img.has-film { animation: none; }