/* ═══════════════════════════════════════
   WoGL — World of GL
   wogl.io | worldofgl.com | mundogl.com
   hello@wogl.io | hola@mundogl.com

   Proprietary. All rights reserved.
   ═══════════════════════════════════════ */

/* Live package beats (live.js): a package's video, played from code. A frame drawn at a fixed size and scaled to
   its box, so the montage holds at any width: wide (1280 x 640, the line on the left, the device on the right)
   and tall for a phone (640 x 1000, the line on top, the device under it). The page's ocean runs behind; the device
   floats in 3D on its own perspective, turned toward the cursor, with the beam on its edge. Everything is scoped
   to .lv: the page's live demo phone uses .screen and .island too. */
.lv { position: absolute; inset: 0; overflow: hidden; isolation: isolate; }
/* The frame fits whole inside the box (live.js sets --s and the offsets that center it), floating on the page's
   ocean (ocean.js). */
.lv-frame { position: absolute; left: 0; top: 0; width: 1280px; height: 640px; transform-origin: 0 0; transform: translate(var(--ox, 0), var(--oy, 0)) scale(var(--s, 1)); }
.lv.tall .lv-frame { width: 640px; height: 1000px; }

/* A beat: its line and its device. Only the beat on screen is visible; live.js sets how far in it is. */
.lv-beat { position: absolute; inset: 0; visibility: hidden; mask-composite: intersect; -webkit-mask-composite: source-in; }
.lv-beat.on { visibility: visible; }
.lv-copy { position: absolute; left: 72px; top: 0; bottom: 0; width: 540px; display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.lv-beat.is-browser .lv-copy { width: 488px; }
.lv.tall .lv-copy { left: 48px; right: 48px; top: 60px; bottom: auto; width: auto; justify-content: flex-start; gap: 16px; }
.lv-copy small { font: 600 13px/1 var(--mono); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.lv-copy small .va { font-weight: 600; color: var(--gold); }
.lv-t { font: 600 54px/1.04 var(--sans); letter-spacing: -.02em; color: var(--text); }
.lv-t em { font-style: normal; color: var(--gold); }
.lv-copy ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 14px; }
.lv-copy li { display: flex; align-items: center; gap: 14px; font: 400 23px/1.25 var(--sans); color: var(--text); }
.lv-copy li i { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(232, 200, 154, .16); border: 1px solid rgba(232, 200, 154, .45); }
.lv-copy li svg { width: 13px; height: 13px; fill: none; stroke: var(--gold); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.lv.tall .lv-copy small { font-size: 17px; }
.lv.tall .lv-t { font-size: 52px; }
.lv.tall .lv-copy li { font-size: 26px; }
.lv.tall .lv-copy li i { width: 32px; height: 32px; }

/* The camera (live.js): the beat's content moves and scales as one; a close-up dims the rest, rings the detail in
   gold and brings its caption in. */
.lv-cam { position: absolute; inset: 0; transform-origin: 0 0; }
.lv-veil { position: absolute; inset: 0; background: rgba(8, 7, 6, .7); opacity: 0; pointer-events: none; }
.lv-ring { position: absolute; border-radius: 14px; border: 1.5px solid rgba(255, 232, 196, .9); box-shadow: 0 0 26px rgba(232, 200, 154, .35), inset 0 0 18px rgba(232, 200, 154, .12); opacity: 0; pointer-events: none; }
.lv-cap { position: absolute; left: 72px; top: 50%; width: 440px; transform: translateY(-50%); margin: 0; font: 600 50px/1.06 var(--sans); letter-spacing: -.02em; color: var(--text); opacity: 0; pointer-events: none; }
.lv-cap.top { top: 48px; width: 640px; transform: none; }
.lv-cap em { font-style: normal; color: var(--gold); }
.lv.tall .lv-cap { left: 48px; right: 48px; top: 56px; width: auto; transform: none; font-size: 52px; }

/* Where the device sits: its center, and a scale for the tall montage. */
.lv-pos { position: absolute; left: var(--cx); top: var(--cy); transform: translate(-50%, -50%) scale(var(--ds, 1)); }
.is-phone .lv-pos { --cx: 983px; --cy: 320px; --ds: .94; }   /* room under it for the float and the turn */
.is-browser .lv-pos { --cx: 900px; --cy: 320px; }
.is-card .lv-pos { --cx: 901px; --cy: 320px; }
.lv.tall .is-phone .lv-pos { --cx: 320px; --cy: 718px; --ds: .82; }
.lv.tall .is-browser .lv-pos { --cx: 320px; --cy: 690px; --ds: .94; }
.lv.tall .is-card .lv-pos { --cx: 320px; --cy: 690px; --ds: 1; }

/* The device in 3D: the rig holds the perspective, centered on the device, so it turns in place with true depth;
   inside, a float (up and down, in screen space), then the turn (live.js), then the device and, for the phone,
   layers of its metal frame behind the face that read as its edge. */
.lv-rig { position: relative; perspective: 1100px; perspective-origin: 50% 50%; }
.lv-bob { position: relative; transform-style: preserve-3d; animation: lv-bob 6.5s ease-in-out infinite; }
@keyframes lv-bob { 0%, 100% { transform: translateY(-8px); } 50% { transform: translateY(8px); } }
.lv-dev { position: relative; transform-style: preserve-3d; will-change: transform; }
.lv-edge { position: absolute; inset: 0; border-radius: 46px; background: linear-gradient(90deg, #2a2a30, #4a4950 50%, #2a2a30); }

/* Phone: the app is 390 x 844, shown at 260 px wide. */
.lv .phone { position: relative; width: 274px; height: 576.67px; padding: 7px; border-radius: 46px;
  background: linear-gradient(145deg, #4a4950 0%, #17171b 16%, #0c0c0f 60%, #2c2c32 100%);
  box-shadow: 0 0 0 1px #54535a, inset 0 0 0 1.5px #050506, 0 36px 44px -16px rgba(0, 0, 0, .85), 0 0 60px rgba(232, 200, 154, .07); }
.lv .phone .screen { position: relative; width: 260px; height: 562.67px; overflow: hidden; border-radius: 39px; background: #f7f1e8; }
.lv .island { position: absolute; z-index: 3; top: 8.3px; left: 50%; width: 80.6px; height: 23.4px; transform: translateX(-50%); border-radius: 999px; background: #000; }
.lv .shot { position: absolute; left: 0; top: 0; border: 0; transform-origin: 0 0; pointer-events: none; }
.lv .phone .shot { width: 390px; height: 844px; transform: scale(.66667); }
.lv .phone .shot[data-step="1"], .lv .phone .shot[data-step="2"] { transform: translateX(260px) scale(.66667); }
.lv-tap { position: absolute; z-index: 5; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; border: 3px solid var(--gold); background: rgba(232, 200, 154, .25); opacity: 0; pointer-events: none; }
.lv-sheen { position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; mix-blend-mode: screen;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0) 32%, rgba(255, 246, 230, .2) 46%, rgba(255, 255, 255, 0) 60%) calc(50% + var(--sx, 0) * 1%) 0 / 260% 100% no-repeat; }

/* Browser: a tab with the site's name and no address bar; the page is 1440 x 900, shown at 600 px wide. */
.lv .browser { position: relative; width: 600px; border-radius: 12px; overflow: hidden; background: #18120e;
  box-shadow: 0 0 0 1px rgba(232, 200, 154, .22), 0 40px 60px -24px rgba(0, 0, 0, .9), 0 0 80px rgba(232, 200, 154, .06); }
.lv .browser .tabs { display: flex; align-items: center; gap: 14px; height: 30px; padding: 0 12px; background: #1d1611; border-bottom: 1px solid rgba(232, 200, 154, .12); }
.lv .browser .dots { display: flex; gap: 6px; }
.lv .browser .dots i { width: 9px; height: 9px; border-radius: 50%; background: #3a2f27; }
.lv .browser .tab { display: flex; align-items: center; gap: 7px; height: 22px; margin-top: 8px; padding: 0 14px; border-radius: 7px 7px 0 0; background: #f7f1e8; color: #1f1812; font: 500 11px/22px var(--sans); }
.lv .browser .tab i { width: 9px; height: 9px; border-radius: 50%; background: #2b1f17; box-shadow: inset -3px -1px 0 #e8c89a; }
.lv .browser .screen { position: relative; width: 600px; height: 375px; overflow: hidden; background: #f7f1e8; }
.lv .browser .shot { width: 1440px; height: 900px; transform: scale(.41667); }

/* Card: a panel drawn here, for what has no screen (the design's styles, its two languages, a report). */
.lv .card { position: relative; width: 470px; padding: 34px 36px; border-radius: 22px; overflow: hidden;
  background: linear-gradient(180deg, rgba(29, 22, 17, .96), rgba(16, 12, 9, .96)); border: 1px solid var(--line-2); box-shadow: 0 30px 50px -24px rgba(0, 0, 0, .9); }
.lv .card h4 { margin: 0; font: 600 12px/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.lv .card hr { margin: 28px 0 24px; border: 0; border-top: 1px solid var(--line); }
.lv .card .sw { display: flex; gap: 18px; margin-top: 16px; }
.lv .card .sw span { display: grid; justify-items: start; gap: 8px; font: 500 15px/1 var(--sans); color: var(--text); }
.lv .card .sw i { width: 64px; height: 44px; border-radius: 10px; border: 1px solid var(--line-2); }
.lv .card .ty { display: grid; gap: 8px; margin-top: 14px; }
.lv .card .ty b { font: 600 34px/1.05 var(--sans); letter-spacing: -.02em; color: var(--text); }
.lv .card .ty span { font: 400 17px/1.3 var(--sans); color: var(--soft); }
.lv .card .ty small { margin-left: 10px; font: 500 12px/1 var(--mono); letter-spacing: .08em; color: var(--quiet); }
.lv .card .al { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.lv .card .al span, .lv .card .chip { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(244, 236, 225, .05); font: 500 15px/1 var(--mono); color: var(--text); }
/* A title in a dark frame, its words in gold (a fine light can cross them: live.js moves background-position from
   100%, the light off to the left, to 0, off to the right). */
.lv .mo { display: flex; align-items: flex-end; height: 196px; margin-top: 18px; padding: 26px 28px; border-radius: 14px;
  background: radial-gradient(120% 100% at 15% 0%, #3a2a1e 0%, #120d0a 70%); border: 1px solid var(--line); }
.lv .mo-t { font: 600 46px/1.04 var(--sans); letter-spacing: -.02em; color: var(--text); }
.lv .mo-t span, .lv .mo-t em { display: inline-block; }
.lv .mo-t em { font-style: normal; color: var(--gold);
  background: linear-gradient(100deg, var(--gold) 0 45%, #fff8ec 50%, var(--gold) 55% 100%) 100% 0 / 300% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
/* The two languages (Figma ready's added value): the language switch, a pill under the one shown; the title and the
   search result in both, one over the other, the second hidden until the switch (live.js, langs). */
.lv .langs { position: relative; display: flex; padding: 4px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(244, 236, 225, .04); }
.lv .langs b { position: relative; z-index: 1; padding: 7px 13px; font: 600 13px/1 var(--mono); letter-spacing: .12em; color: var(--quiet); }
.lv .langs b.on { color: var(--espresso); }
.lv .langs .pill { position: absolute; left: 0; top: 4px; bottom: 4px; width: 0; border-radius: 999px; background: var(--gold); box-shadow: 0 4px 14px rgba(232, 200, 154, .25); }
.lv .bi { display: grid; align-items: end; height: 170px; }
.lv .bi > *, .lv .serp > * { grid-area: 1 / 1; }
.lv .card [data-v="1"] { opacity: 0; }
.lv .serp { display: grid; margin-top: 16px; padding: 20px 22px; border-radius: 14px; border: 1px solid var(--line); background: rgba(244, 236, 225, .035); }
.lv .serp > div { display: grid; gap: 8px; }
.lv .serp small { font: 500 13px/1 var(--mono); letter-spacing: .04em; color: var(--quiet); }
.lv .serp b { font: 500 22px/1.2 var(--sans); letter-spacing: -.005em; color: #f1d9b5; }
.lv .serp span { font: 400 15px/1.45 var(--sans); color: var(--soft); }

/* The performance report: the band of frame times, measured. */
.lv .card p { margin: 10px 0 0; font: 400 16px/1.3 var(--sans); color: var(--quiet); }
.lv .card .head { display: flex; justify-content: space-between; align-items: center; }
.lv .card .band { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; }
.lv .card .band span { display: grid; gap: 8px; padding: 14px 12px; border-radius: 14px; background: rgba(244, 236, 225, .05); border: 1px solid var(--line); font: 500 12px/1 var(--mono); letter-spacing: .1em; color: var(--quiet); }
.lv .card .band b { font: 600 28px/1 var(--sans); letter-spacing: -.01em; color: var(--text); }
.lv .card .band b small { margin-left: 3px; font: 500 13px/1 var(--mono); color: var(--quiet); }
.lv .card ul { list-style: none; display: grid; gap: 16px; margin: 22px 0 0; padding: 0; }
.lv .card li { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: center; font: 400 19px/1.3 var(--sans); color: var(--text); }
.lv .card li i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: rgba(111, 191, 138, .16); }
.lv .card li svg { width: 14px; height: 14px; fill: none; stroke: #6fbf8a; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* The beam runs the device's edge while its beat is on. */
@property --lv-beam { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.lv-beam { position: absolute; inset: -1px; z-index: 6; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--lv-beam), rgba(232, 200, 154, 0) 0deg 250deg, rgba(232, 200, 154, .15) 290deg, rgba(255, 232, 196, .95) 335deg, rgba(232, 200, 154, 0) 352deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: lv-beam 5s linear infinite; }
@keyframes lv-beam { to { --lv-beam: 360deg; } }

/* The bars: one per beat, filling while it plays; a tap goes to that beat. Real size, under the frame's scale. */
.lv-bars { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: center; gap: 4px; }
.lv-bars button { width: 52px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; align-items: center; }
.lv-bars i { display: block; height: 3px; border-radius: 2px; background: rgba(244, 236, 225, .22); overflow: hidden; }
.lv-bars b { display: block; height: 100%; width: calc(var(--f, 0) * 100%); background: var(--gold); }

/* ── The custom apps (apps.js) ───────────────────────────────────────────────────────────────────────────
   Drawn screens (.ui, the CafeZama and ZamaPOS screens of the videos, ported from _gigs/fiverr/features.html with
   their own colors), a tablet on its stand and a laptop for the captures, the toast, the vibe-coded card and the sync
   beat with its three notifications beside the phone. */
.lv .ui { position: absolute; left: 0; top: 0; width: 390px; height: 844px; transform: scale(.66667); transform-origin: 0 0; overflow: hidden;
  --cream: #f7f1e8; --espresso: #2b1f17; --ink: #1f1812; --muted: rgba(31, 24, 18, .6); --hair: rgba(31, 24, 18, .1); --caramel: #a8733f;
  background: var(--cream); color: var(--ink); font-family: var(--sans); }
.lv .laptop .ui { width: 1100px; height: 688px; transform: scale(.52727); }
.lv .ui .status { display: flex; justify-content: space-between; padding: 18px 30px 0; font: 600 15px/1 var(--sans); }
.lv .ui .brand { font: 400 22px/1 var(--sans); } .lv .ui .brand b { font-weight: 700; }
.lv .ui .login {display: flex; flex-direction: column; height: 100%; padding: 0 30px 34px; }
.lv .ui .login .brand {margin-top: 120px; }
.lv .ui .login h3 {margin-top: 64px; font: 600 34px/1.1 var(--sans); }
.lv .ui .login p {margin-top: 10px; font: 400 17px/1.4 var(--sans); color: var(--muted); }
.lv .ui .btn {display: flex; align-items: center; justify-content: center; gap: 12px; height: 56px; border-radius: 16px; font: 600 17px/1 var(--sans); }
.lv .ui .btn.google {margin-top: 44px; background: #fff; border: 1.5px solid var(--hair); }
.lv .ui .btn.google b {display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--ink); font: 700 14px/1 var(--sans); }
.lv .ui .or {display: flex; align-items: center; gap: 12px; margin: 22px 0; font: 400 14px/1 var(--sans); color: var(--muted); }
.lv .ui .or::before, .lv .ui .or::after {content: ''; flex: 1; height: 1px; background: var(--hair); }
.lv .ui .field {display: flex; align-items: center; height: 56px; padding: 0 18px; border-radius: 16px; background: #fff; border: 1.5px solid var(--hair); font: 400 17px/1 var(--sans); color: var(--muted); }
.lv .ui .btn.dark {margin-top: 12px; background: var(--espresso); color: #f2dfc0; }
.lv .ui .fine {margin-top: auto; font: 400 13px/1.45 var(--sans); color: var(--muted); text-align: center; }
.lv .ui .fine u {color: var(--caramel); text-decoration-color: rgba(168, 115, 63, .5); }
.lv .ui .signed {position: absolute; left: 50%; top: 92px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px; background: var(--espresso); color: #f4ece1; font: 500 16px/1 var(--sans); white-space: nowrap; opacity: 0; }
.lv .ui .signed i {width: 22px; height: 22px; border-radius: 50%; background: #6fbf8a; }
.lv .ui .db {display: grid; grid-template-columns: 220px 1fr; height: 100%; font: 400 15px/1 var(--sans); }
.lv .ui .db aside {padding: 26px 18px; background: #efe6d8; border-right: 1px solid var(--hair); }
.lv .ui .db aside .brand {font-size: 18px; }
.lv .ui .db aside h4 {margin: 30px 0 10px; font: 600 11px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.lv .ui .tbl {display: flex; justify-content: space-between; padding: 11px 12px; border-radius: 10px; margin-bottom: 4px; }
.lv .ui .tbl.sel {background: #fff; font-weight: 600; box-shadow: 0 1px 0 var(--hair); }
.lv .ui .tbl span {font: 500 13px/1 var(--mono); color: var(--muted); }
.lv .ui .db main {padding: 24px 28px; overflow: hidden; }
.lv .ui .db header {display: flex; align-items: center; justify-content: space-between; }
.lv .ui .db header b {font: 600 24px/1 var(--sans); }
.lv .ui .lock {display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 999px; background: rgba(47, 122, 75, .12); color: #2f7a4b; font: 600 13px/1 var(--sans); }
.lv .ui .lock svg {width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.lv .ui .db table {width: 100%; margin-top: 20px; border-collapse: collapse; }
.lv .ui .db th {text-align: left; padding: 0 10px 12px; font: 600 11px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-bottom: 1px solid var(--hair); }
.lv .ui .db td {padding: 14px 10px; border-bottom: 1px solid var(--hair); }
.lv .ui .db td.mono {font: 500 14px/1 var(--mono); color: var(--muted); }
.lv .ui .order {padding: 0 26px; }
.lv .ui .order .brand {margin-top: 26px; }
.lv .ui .order h3 {margin-top: 34px; font: 600 28px/1.1 var(--sans); }
.lv .ui .item {display: flex; justify-content: space-between; align-items: center; margin-top: 22px; padding: 20px; border-radius: 18px; background: #fff; border: 1px solid var(--hair); font: 600 19px/1 var(--sans); }
.lv .ui .item small {display: block; margin-top: 8px; font: 400 15px/1 var(--sans); color: var(--muted); }
.lv .ui .slot {margin-top: 14px; padding: 18px 20px; border-radius: 16px; background: #efe3d0; font: 500 17px/1 var(--sans); }
.lv .ui .order .btn.dark {margin-top: 26px; }
.lv .ui .placed {margin-top: 16px; text-align: center; font: 600 16px/1 var(--sans); color: #2f7a4b; opacity: 0; }
.lv-extra .wires {position: absolute; left: 0; top: 0; width: 1280px; height: 769px; overflow: visible; pointer-events: none; }
.lv-extra .wires path {fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-dasharray: 3 5; }
.lv-extra .ping {position: absolute; left: 870px; width: 338px; min-width: 0; display: flex; gap: 14px; align-items: center; padding: 16px 18px; border-radius: 18px; background: rgba(24, 18, 13, .96); border: 1px solid var(--line-2); box-shadow: 0 18px 40px -16px rgba(0, 0, 0, .9); opacity: 0; }
.lv-extra .ping .who {display: grid; place-items: center; flex: none; width: 46px; height: 46px; border-radius: 14px; background: rgba(232, 200, 154, .14); }
.lv-extra .ping .who svg {width: 24px; height: 24px; fill: none; stroke: var(--gold); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.lv-extra .ping > div {min-width: 0; }
.lv-extra .ping b {display: block; font: 600 17px/1.2 var(--sans); color: var(--text); }
.lv-extra .ping span {display: block; margin-top: 4px; font: 400 15px/1.3 var(--sans); color: var(--soft); }
.lv-extra .ping em {font: 600 10px/1 var(--mono); font-style: normal; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.lv .ui .dash {padding: 0 26px; }
.lv .ui .dash .brand {margin-top: 26px; }
.lv .ui .dash h3 {margin-top: 30px; font: 600 30px/1.1 var(--sans); }
.lv .ui .dash p {margin-top: 8px; font: 400 16px/1 var(--sans); color: var(--muted); }
.lv .ui .big {display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin-top: 22px; }
.lv .ui .big b {font: 600 46px/1 var(--sans); }
.lv .ui .big span {white-space: nowrap; padding: 6px 10px; border-radius: 999px; background: rgba(47, 122, 75, .12); color: #2f7a4b; font: 600 15px/1 var(--sans); }
.lv .ui .chart {display: flex; align-items: flex-end; gap: 10px; height: 250px; margin-top: 26px; padding: 18px 16px 0; border-radius: 18px; background: #fff; border: 1px solid var(--hair); }
.lv .ui .chart i {flex: 1; border-radius: 8px 8px 3px 3px; background: #d9c3a3; transform-origin: 50% 100%; }
.lv .ui .chart i:last-child {background: var(--caramel); }
.lv .ui .weeks {display: flex; gap: 10px; padding: 8px 16px 0; font: 500 12px/1 var(--mono); color: var(--muted); }
.lv .ui .weeks span {flex: 1; text-align: center; }
.lv .ui .tops {margin-top: 22px; display: grid; gap: 10px; }
.lv .ui .tops div {display: flex; justify-content: space-between; padding: 14px 16px; border-radius: 14px; background: #fff; border: 1px solid var(--hair); font: 500 16px/1 var(--sans); }
.lv .ui .tops div span {color: var(--caramel); font-weight: 600; }
.lv .ui .regs {padding: 0 24px; }
.lv .ui .regs .brand {margin-top: 26px; }
.lv .ui .regs h3 {margin-top: 30px; font: 600 30px/1.1 var(--sans); }
.lv .ui .regs > p {margin-top: 8px; font: 400 16px/1.3 var(--sans); color: var(--muted); }
.lv .ui .reg {display: grid; grid-template-columns: 12px minmax(0, 1fr) auto; gap: 12px; align-items: center; margin-top: 12px; padding: 15px 14px; border-radius: 16px; background: #fff; border: 1px solid var(--hair); }
.lv .ui .reg .dot {width: 12px; height: 12px; border-radius: 50%; }
.lv .ui .dot.missing {background: #cf5a40; box-shadow: 0 0 0 4px rgba(207, 90, 64, .14); }
.lv .ui .dot.late {background: #dc9c34; box-shadow: 0 0 0 4px rgba(220, 156, 52, .16); }
.lv .ui .dot.on {background: #4f9a6a; box-shadow: 0 0 0 4px rgba(79, 154, 106, .14); }
.lv .ui .dot.new {background: #8c8178; box-shadow: 0 0 0 4px rgba(140, 129, 120, .14); }
.lv .ui .reg b {display: block; font: 600 17px/1.2 var(--sans); }
.lv .ui .reg small {display: block; margin-top: 4px; font: 400 14px/1.25 var(--sans); color: var(--muted); }
.lv .ui .reg .wa {height: 36px; padding: 0 12px; border-radius: 12px; background: var(--espresso); color: #f2dfc0; font: 600 13px/36px var(--sans); white-space: nowrap; }
.lv .ui .bubble {position: absolute; left: 24px; right: 24px; bottom: 34px; padding: 18px 18px 16px; border-radius: 18px; background: var(--espresso); color: #f4ece1; box-shadow: 0 20px 40px -14px rgba(0, 0, 0, .5); opacity: 0; }
.lv .ui .bubble small {display: block; font: 600 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #e8c89a; }
.lv .ui .bubble p {margin-top: 10px; font: 400 16px/1.4 var(--sans); }
/* A POS screen draws no status bar: it sits below the island, on its own background. */
.lv .phone.safe .screen { background: #f6f2ec; }
.lv .phone.safe .shot { transform: translateY(30.67px) scale(.66667); }
/* Tablet (the page is 1180 x 820) on its stand. */
.lv .tablet { position: relative; width: 602px; padding: 11px; border-radius: 25.5px; background: linear-gradient(160deg, #3a3940 0%, #121215 14%, #0b0b0e 70%, #2a2a30 100%);
  box-shadow: 0 0 0 1px #4f4e55, inset 0 0 0 1.5px #050506, 0 40px 50px -22px rgba(0, 0, 0, .85), 0 0 60px rgba(232, 200, 154, .07); }
.lv .tablet .screen { position: relative; width: 580px; height: 403.05px; overflow: hidden; border-radius: 14.5px; background: #f7f1e8; }
.lv .tablet .shot { width: 1180px; height: 820px; transform: scale(.49153); }
.lv .stand { position: relative; width: 220px; height: 50px; margin: 0 auto; }
.lv .stand::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 6px; width: 18%; transform: translateX(-50%); border-radius: 0 0 4px 4px; background: linear-gradient(90deg, #2c2b31, #58575e 50%, #2c2b31); }
.lv .stand::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 8px; border-radius: 6px; background: linear-gradient(180deg, #6c6b72, #2a292f); box-shadow: 0 12px 18px -6px rgba(0, 0, 0, .8); }
/* Laptop: the page is 1100 x 688 (laptop2: 1440 x 900); the base reaches 18 px past the lid on each side. */
.lv .laptop { position: relative; width: 598px; }
.lv .lid { position: relative; padding: 12px 9px 9px; border-radius: 14px 14px 4px 4px; background: #0c0c0f; box-shadow: 0 0 0 1px #44434a, inset 0 0 0 1px rgba(255, 255, 255, .06); }
.lv .lid .screen { position: relative; width: 580px; height: 362.76px; overflow: hidden; border-radius: 4px; background: #f7f1e8; }
.lv .laptop2 .lid .screen { height: 362.5px; }
.lv .laptop .shot { width: 1100px; height: 688px; transform: scale(.52727); }
.lv .laptop2 .shot { width: 1440px; height: 900px; transform: scale(.40278); }
.lv .deck { position: relative; height: 13px; margin: 0 -18px; border-radius: 2px 2px 16px 16px / 2px 2px 9px 9px;
  background: linear-gradient(180deg, #9a99a1 0%, #66656c 16%, #3c3b42 55%, #1c1b20 100%); box-shadow: 0 26px 30px -14px rgba(0, 0, 0, .9), 0 0 40px rgba(232, 200, 154, .06); }
.lv .deck::before { content: ''; position: absolute; left: 50%; top: 0; width: 16%; height: 38%; transform: translateX(-50%); border-radius: 0 0 8px 8px; background: linear-gradient(180deg, #232227, #4a494f); }
.is-tablet .lv-pos, .is-laptop .lv-pos, .is-laptop2 .lv-pos { --cx: 900px; --cy: 320px; }
.is-tablet .lv-copy, .is-laptop .lv-copy, .is-laptop2 .lv-copy { width: 488px; }
.lv.tall .is-tablet .lv-pos, .lv.tall .is-laptop .lv-pos, .lv.tall .is-laptop2 .lv-pos { --cx: 320px; --cy: 690px; --ds: .94; }
/* The toast under the device. */
.lv-toast { position: absolute; left: 50%; bottom: -30px; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 999px;
  background: rgba(20, 15, 11, .96); border: 1px solid var(--line-2); color: var(--text); font: 500 17px/1 var(--sans); white-space: nowrap; box-shadow: 0 14px 30px rgba(0, 0, 0, .55); opacity: 0; }
.lv-toast i { width: 22px; height: 22px; border-radius: 50%; background: #6fbf8a; }
/* The vibe-coded card: what it was built with, the bar from unfinished to live, and the fixes. */
.lv .card .tools { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.lv .card .tools span { padding: 9px 14px; border-radius: 999px; border: 1px solid var(--line-2); background: rgba(244, 236, 225, .05); font: 500 16px/1 var(--sans); color: var(--text); }
.lv .card .bar { position: relative; height: 12px; margin-top: 16px; border-radius: 999px; background: rgba(244, 236, 225, .1); overflow: hidden; }
.lv .card .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 60%; border-radius: inherit; background: linear-gradient(90deg, var(--caramel), var(--gold)); }
.lv .card .state { display: flex; justify-content: space-between; margin-top: 10px; font: 500 14px/1 var(--mono); color: var(--quiet); }
.lv .card .state b { color: var(--gold); font-weight: 600; }
/* The sync beat: a smaller phone beside the line and, to its right, the three places the order reaches. */
.is-sync .lv-copy { width: 440px; }
.is-sync .lv-pos { --cx: 650px; --cy: 320px; --ds: .82; }
.lv-extra { position: absolute; inset: 0; pointer-events: none; }
.lv-extra .wires { width: 1280px; height: 640px; }
.lv-extra .ping { left: 830px; }
.lv-extra .ping.n1 { top: 145px; } .lv-extra .ping.n2 { top: 275px; } .lv-extra .ping.n3 { top: 405px; }
.lv.tall .is-sync .lv-pos { --cx: 170px; --cy: 700px; --ds: .7; }
.lv.tall .lv-extra .wires { display: none; }
.lv.tall .lv-extra .ping { left: 300px; width: 310px; }
.lv.tall .lv-extra .ping.n1 { top: 520px; } .lv.tall .lv-extra .ping.n2 { top: 645px; } .lv.tall .lv-extra .ping.n3 { top: 770px; }
/* The drawn sign-in fills the screen under its status bar. */
.lv .ui .login { height: calc(100% - 33px); }
/* On a phone the vibe-coded question runs five lines, so its card sits lower and a little smaller. */
.lv.tall .b-ai .lv-pos { --cy: 752px; --ds: .9; }
.lv.tall .b-ai .lv-t { font-size: 46px; }
/* «Anytime.»: the last words of the growth line, in gold, arriving on their own (the camera closes in on them). */
.lv-copy .anytime { display: inline-block; margin-left: 8px; font-weight: 600; color: var(--gold); }

@media (prefers-reduced-motion: reduce) { .lv-bob, .lv-beam { animation: none; } }