/* Public landing page ("lp-"). Loaded after app.css, only on the marketing pages. Light by default, dark when chosen. */

.lp {
  --lp-bg: #F6F7FB;
  --lp-surface: #FFFFFF;
  --lp-ink: #0B1020;
  --lp-ink-text: #FFFFFF;
  --lp-muted: #566079;
  --lp-line: #E4E8F1;
  --lp-accent: #00C3FF;          /* the admin can change these two from Homepage → Page details */
  --lp-accent-ink: #04222A;
  --lp-cyan: var(--lp-accent);
  --lp-violet: #7C5CFF;
  --lp-pink: #FF6AD5;
  --lp-tint-0: #DDF5FF;
  --lp-tint-1: #ECE6FF;
  --lp-tint-2: #FFE5F3;
  --lp-tint-3: #DFF7E8;
  --lp-eyebrow-bg: #DDF5FF;
  --lp-eyebrow-fg: #00709A;
  --lp-shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 12px 40px -12px rgba(30, 41, 90, 0.18);
  --lp-nav-bg: rgba(255, 255, 255, 0.82);
  background: var(--lp-bg);
  color: var(--lp-ink);
  font-family: 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  overflow-x: hidden;
}
html:not([data-theme="light"]) .lp {
  --lp-bg: #090C13;
  --lp-surface: #121724;
  --lp-ink: #F4F6FB;
  --lp-ink-text: #0B1020;
  --lp-muted: #98A2BA;
  --lp-line: #232A3B;
  --lp-tint-0: #0C2A38;
  --lp-tint-1: #211B40;
  --lp-tint-2: #35182C;
  --lp-tint-3: #10291E;
  --lp-eyebrow-bg: #0C2A38;
  --lp-eyebrow-fg: #5FD8FF;
  --lp-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 18px 50px -14px rgba(0, 0, 0, 0.6);
  --lp-nav-bg: rgba(18, 23, 36, 0.82);
}
html, body.lp { background: var(--lp-bg); }
.lp h1, .lp h2, .lp h3 { font-family: 'Clash Display', 'General Sans', sans-serif; font-weight: 700; color: var(--lp-ink); }
.lp a { color: inherit; }
.lp-mono { font-family: 'JetBrains Mono', ui-monospace, monospace; }

/* ---------------------------------------------------------------- buttons */
.lp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px; border: 1.5px solid transparent;
  font: 600 15px/1 'General Sans', sans-serif; letter-spacing: -0.005em; white-space: nowrap;
  cursor: pointer; text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.lp-btn:hover { transform: translateY(-1px); }
.lp-btn-lg { padding: 17px 30px; font-size: 17px; }
.lp-btn-ink { background: var(--lp-ink); color: var(--lp-ink-text) !important; box-shadow: 0 10px 28px -10px rgba(11, 16, 32, 0.55); }
.lp-btn-cyan { background: var(--lp-accent); color: var(--lp-accent-ink) !important; }
.lp-btn-cyan:hover { filter: brightness(1.08); box-shadow: 0 8px 24px -8px color-mix(in srgb, var(--lp-accent) 70%, transparent); }
.lp-btn-line { background: transparent; border-color: var(--lp-line); color: var(--lp-ink) !important; }
.lp-btn-line:hover { border-color: var(--lp-ink); }
.lp-btn-ghost { background: color-mix(in srgb, var(--lp-ink) 8%, transparent); color: var(--lp-ink) !important; }
.lp-btn-ghost:hover { background: color-mix(in srgb, var(--lp-ink) 14%, transparent); }
.lp-btn-white { background: #fff; color: #1b1340 !important; box-shadow: 0 14px 34px -12px rgba(20, 10, 80, 0.55); }
.lp-btn-glass { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.38); color: #fff !important; }
.lp-btn-glass:hover { background: rgba(255, 255, 255, 0.26); }

/* ---------------------------------------------------------------- top: announcement + floating nav */
.lp-top { position: sticky; top: 0; z-index: 60; padding: 12px 16px 0; pointer-events: none; }
.lp-top > * { pointer-events: auto; }
.lp-announce {
  max-width: 1180px; margin: 0 auto 10px; padding: 10px 16px; border-radius: 14px; text-align: center;
  background: var(--lp-accent); color: var(--lp-accent-ink); font-size: 14px; font-weight: 600;
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
.lp-announce a { color: var(--lp-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.lp-nav-wrap { max-width: 1180px; margin: 0 auto; }
.lp-nav {
  position: relative; display: flex; align-items: center; gap: 22px; padding: 9px 12px 9px 20px; border-radius: 22px;
  border: 1.5px solid transparent;
  background: linear-gradient(var(--lp-nav-bg), var(--lp-nav-bg)) padding-box, linear-gradient(90deg, #00C3FF, #7C5CFF 55%, #FF6AD5) border-box;
  -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: 0 10px 34px -14px rgba(30, 41, 90, 0.35);
}
.lp-nav .brand { flex-shrink: 0; gap: 9px; color: var(--lp-ink); }
.lp .brand-word b { color: var(--lp-ink); }
.lp-links { display: flex; align-items: center; gap: 4px; margin-left: 10px; flex: 1; }
.lp-links a { padding: 9px 14px; border-radius: 12px; font-weight: 500; font-size: 15px; color: var(--lp-ink); }
.lp-links a:hover { background: color-mix(in srgb, var(--lp-ink) 7%, transparent); }
.lp-links-sep, .lp-links-narrow { display: none; }
.lp-nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.lp-nav-cta, .lp-nav-signin { padding: 11px 18px; }
.lp .theme-toggle { color: var(--lp-ink); border-color: var(--lp-line); background: transparent; }
.lp .nav-burger { display: none; color: var(--lp-ink); border-color: var(--lp-line); background: transparent; }

/* ---------------------------------------------------------------- hero */
.lp-hero { position: relative; padding: 78px 20px 20px; text-align: center; overflow: hidden; }
.lp-hero-glow {
  position: absolute; inset: 0 -10% auto -10%; height: 640px; pointer-events: none; z-index: 0;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 28%, #000 62%, transparent); mask-image: linear-gradient(180deg, transparent, #000 28%, #000 62%, transparent);
  background:
    radial-gradient(40% 60% at 18% 20%, rgba(0, 195, 255, 0.22), transparent 70%),
    radial-gradient(38% 55% at 82% 14%, rgba(124, 92, 255, 0.2), transparent 70%),
    radial-gradient(30% 50% at 55% 55%, rgba(255, 106, 213, 0.13), transparent 70%);
}
.lp-hero-copy { position: relative; z-index: 1; max-width: 1020px; margin: 0 auto; }
.lp-badge {
  display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: 999px;
  background: var(--lp-surface); border: 1px solid var(--lp-line); font-size: 14px; font-weight: 500; color: var(--lp-muted);
  box-shadow: var(--lp-shadow); margin-bottom: 26px;
}
.lp-hero h1 { font-size: clamp(44px, 7.6vw, 96px); line-height: 0.98; letter-spacing: -0.045em; margin: 0 auto 24px; max-width: 980px; }
.lp .grad { background: linear-gradient(95deg, #00B4F0, #7C5CFF 55%, #FF52C8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.lp-sub { font-size: clamp(17px, 2vw, 21px); line-height: 1.55; color: var(--lp-muted); max-width: 680px; margin: 0 auto 34px; }
.lp-hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.lp-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 8px 22px; justify-content: center; margin: 26px 0 0; padding: 0; font-size: 14.5px; color: var(--lp-muted); }
.lp-trust li { display: inline-flex; align-items: center; gap: 7px; }
.lp-trust svg { width: 17px; height: 17px; color: #14B86B; flex-shrink: 0; }

/* the character strip */
.lp-stage {
  position: relative; z-index: 1; max-width: 1180px; margin: 64px auto 0; padding: 0 0 0;
  display: flex; align-items: flex-end; justify-content: center; gap: 16px;
  -webkit-mask-image: linear-gradient(180deg, #000 82%, transparent); mask-image: linear-gradient(180deg, #000 82%, transparent);
}
.lp-ch { position: relative; flex: 1 1 0; min-width: 0; border-radius: 30px; overflow: hidden; aspect-ratio: 3 / 4.2; animation: lp-float 7s ease-in-out infinite; }
.lp-ch > svg { position: absolute; left: 8%; bottom: -2%; width: 84%; height: auto; display: block; }
.lp-ch-1 { background: linear-gradient(160deg, #A8E8FF, #4D7BFF); max-height: 360px; animation-delay: -1s; }
.lp-ch-2 { background: linear-gradient(160deg, #FFC2E8, #8E6BFF); max-height: 420px; animation-delay: -3s; }
.lp-ch-4 { background: linear-gradient(160deg, #2B3A8F, #6A3DF0 70%, #B04DE0); max-height: 420px; animation-delay: -2s; }
.lp-ch-5 { background: linear-gradient(160deg, #FFE08A, #FF7AAE); max-height: 360px; animation-delay: -4s; }
.lp-ch-live {
  flex: 1.25 1 0; max-height: 500px; background: linear-gradient(165deg, #151b29, #0b0f18); animation: none;
  border: 2px solid transparent;
  background: linear-gradient(165deg, #151b29, #0b0f18) padding-box, linear-gradient(160deg, #00C3FF, #7C5CFF, #FF6AD5) border-box;
  box-shadow: 0 40px 90px -24px rgba(124, 92, 255, 0.55);
}
.lp-tagpill {
  position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; color: #fff;
  background: rgba(10, 13, 20, 0.5); border: 1px solid rgba(255, 255, 255, 0.22); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.lp-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 28px 28px; }
.lp-layer { position: absolute; inset: 0; }
.lp-layer > svg { position: absolute; left: 8%; bottom: -2%; width: 84%; height: auto; display: block; }
.lp-layer-char { clip-path: inset(0 100% 0 0); animation: lp-wipe 7s ease-in-out infinite alternate; }
.lp-scan { position: absolute; top: 0; bottom: 0; left: 0; width: 2px; background: linear-gradient(180deg, transparent, #00C3FF 20%, #7C5CFF 80%, transparent); box-shadow: 0 0 22px 2px rgba(0, 195, 255, .7); animation: lp-scan 7s ease-in-out infinite alternate; }
.lp-hud { position: absolute; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: 12px; color: #fff; }
.lp-hud-top { top: 12px; } .lp-hud-bottom { bottom: 12px; }
.lp-hud-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; background: rgba(10, 13, 20, .62); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); font-weight: 600; white-space: nowrap; }
@keyframes lp-wipe { 0%, 8% { clip-path: inset(0 100% 0 0); } 92%, 100% { clip-path: inset(0 0 0 0); } }
@keyframes lp-scan { 0%, 8% { left: 0; } 92%, 100% { left: 100%; } }
@keyframes lp-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

/* "made for" strip */
.lp-aud { display: flex; align-items: center; gap: 22px; max-width: 1180px; margin: 6px auto 0; padding: 26px 20px; }
.lp-aud-label { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--lp-muted); white-space: nowrap; }
.lp-aud-viewport { overflow: hidden; flex: 1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.lp-aud-track { display: flex; gap: 12px; width: max-content; animation: lp-marquee 40s linear infinite; }
.lp-aud-item { white-space: nowrap; padding: 9px 18px; border-radius: 999px; background: var(--lp-surface); border: 1px solid var(--lp-line); color: var(--lp-ink); font-size: 14.5px; font-weight: 500; }
@keyframes lp-marquee { to { transform: translateX(calc(-50% - 6px)); } }

/* ---------------------------------------------------------------- sections */
.lp-sec { max-width: 1180px; margin: 150px auto 0; padding: 0 20px; scroll-margin-top: 90px; }
.lp-sec-head { text-align: center; margin-bottom: 56px; }
.lp-eyebrow { display: inline-block; padding: 7px 14px; border-radius: 10px; background: var(--lp-eyebrow-bg); color: var(--lp-eyebrow-fg); font-size: 13.5px; font-weight: 600; margin-bottom: 20px; }
.lp-sec-head h2 { font-size: clamp(34px, 5.2vw, 62px); line-height: 1.02; letter-spacing: -0.04em; margin: 0 auto 18px; max-width: 880px; }
.lp-lead { color: var(--lp-muted); font-size: clamp(16px, 1.8vw, 19px); line-height: 1.55; max-width: 640px; margin: 0 auto; }
.lp-center { text-align: center; margin-top: 40px; }

/* steps */
.lp-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: s; }
.lp-step { position: relative; padding: 32px; border-radius: 30px; background: var(--lp-surface); border: 1px solid var(--lp-line); box-shadow: var(--lp-shadow); }
.lp-step-num { font: 700 64px/1 'Clash Display', sans-serif; letter-spacing: -0.05em; background: linear-gradient(135deg, #00B4F0, #7C5CFF 60%, #FF52C8); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 26px; }
.lp-step-icon { position: absolute; top: 28px; right: 28px; width: 46px; height: 46px; border-radius: 15px; display: grid; place-items: center; background: var(--lp-tint-0); }
.lp-step-icon svg { width: 23px; height: 23px; stroke: var(--lp-eyebrow-fg); }
.lp-step h3 { font-size: 23px; letter-spacing: -0.02em; margin: 0 0 8px; }
.lp-step p { margin: 0; color: var(--lp-muted); font-size: 16px; line-height: 1.55; }
.lp-step:nth-child(2) .lp-step-icon { background: var(--lp-tint-1); } .lp-step:nth-child(3) .lp-step-icon { background: var(--lp-tint-2); }

/* bento feature cards */
.lp-bento { display: grid; gap: 18px; }
.lp-bento-2 { grid-template-columns: repeat(2, 1fr); }
.lp-bento-3 { grid-template-columns: repeat(3, 1fr); }
.lp-bento-odd .lp-feat:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; }
.lp-feat { border-radius: 34px; padding: 14px 14px 34px; background: var(--lp-surface); border: 1px solid var(--lp-line); box-shadow: var(--lp-shadow); transition: transform .25s ease; }
.lp-feat:hover { transform: translateY(-4px); }
.lp-feat-art { border-radius: 24px; overflow: hidden; aspect-ratio: 16 / 10.5; display: grid; place-items: center; position: relative; }
.lp-tint-0 .lp-feat-art { background: var(--lp-tint-0); } .lp-tint-1 .lp-feat-art { background: var(--lp-tint-1); }
.lp-tint-2 .lp-feat-art { background: var(--lp-tint-2); } .lp-tint-3 .lp-feat-art { background: var(--lp-tint-3); }
.lp-feat-copy { padding: 26px 18px 0; }
.lp-feat h3 { font-size: 28px; letter-spacing: -0.03em; margin: 0 0 10px; }
.lp-feat p { margin: 0 0 16px; color: var(--lp-muted); font-size: 16.5px; line-height: 1.55; }
.lp-more { font-weight: 600; font-size: 15px; color: var(--lp-ink); border-bottom: 2px solid var(--lp-cyan); padding-bottom: 2px; }
.lp-more:hover { color: var(--lp-eyebrow-fg); }

/* product mock-ups inside the cards */
.lp-art { width: 86%; font-size: 13px; color: #0B1020; }
.lp-win { background: #0d1220; border-radius: 18px; overflow: hidden; box-shadow: 0 24px 50px -18px rgba(10, 14, 40, .55); border: 1px solid rgba(255, 255, 255, .08); }
.lp-win-bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; color: #fff; font-size: 11.5px; font-weight: 600; }
.lp-win-bar i { width: 9px; height: 9px; border-radius: 50%; background: #3a4258; }
.lp-win-live { margin-left: auto; display: inline-flex; gap: 6px; align-items: center; } .lp-win-live b { width: 7px; height: 7px; border-radius: 50%; background: #FF4D5E; }
.lp-win-time { opacity: .75; font-family: 'JetBrains Mono', monospace; }
.lp-win-body { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 150px; }
.lp-split { position: relative; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.lp-split svg { width: 78%; height: auto; max-height: 100%; position: relative; z-index: 1; }
.lp-split span { position: absolute; left: 8px; top: 8px; z-index: 2; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, .5); color: #fff; font-size: 10.5px; font-weight: 600; }
.lp-split-raw { background: #1a2033; } .lp-split-new { background: linear-gradient(160deg, #FFB3E1, #7C5CFF); }
.lp-split-handle { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; background: #fff; transform: translateX(-1px); z-index: 3; }
.lp-split-handle em { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; background: #fff; color: #0B1020; display: grid; place-items: center; font-style: normal; font-size: 14px; box-shadow: 0 4px 14px rgba(0,0,0,.35); }
.lp-win-foot { display: flex; justify-content: space-between; padding: 10px 12px; }
.lp-chip { padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.1); color: #fff; font-size: 11px; font-weight: 600; }
.lp-art-edit { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.lp-prompt { background: #fff; border-radius: 14px; padding: 12px 14px; font-weight: 600; box-shadow: 0 10px 26px -12px rgba(30, 20, 90, .35); }
.lp-spark { color: #7C5CFF; margin-right: 6px; }
.lp-ba { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.lp-ba-img { position: relative; height: 118px; border-radius: 14px; overflow: hidden; }
.lp-ba-img span { position: absolute; left: 8px; top: 8px; padding: 3px 9px; border-radius: 999px; background: rgba(0,0,0,.5); color: #fff; font-size: 10.5px; font-weight: 600; z-index: 2; }
.lp-ba-before { background: linear-gradient(180deg, #8d98b4, #5f6985); }
.lp-ba-after { background: linear-gradient(180deg, #FFB067 0%, #FF6AA3 55%, #7C5CFF 100%); }
.lp-sun { position: absolute; left: 50%; bottom: 30px; width: 44px; height: 44px; margin-left: -22px; border-radius: 50%; background: #FFE08A; box-shadow: 0 0 34px 8px rgba(255, 224, 138, .6); }
.lp-hill { position: absolute; left: -10%; right: -10%; bottom: -34px; height: 70px; border-radius: 50%; background: #3b2a8f; }
.lp-done { align-self: flex-start; background: #14B86B; color: #fff; padding: 6px 12px; border-radius: 999px; font-weight: 600; font-size: 12.5px; }
.lp-art-video .lp-frames { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.lp-frame { height: 112px; border-radius: 12px; position: relative; overflow: hidden; background: linear-gradient(170deg, #9be7ff, #6a7cff); }
.lp-frame i { position: absolute; bottom: 14px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(255,255,255,.35); }
.lp-frame.f1 i { left: 12%; } .lp-frame.f2 i { left: 34%; bottom: 24px; } .lp-frame.f3 i { left: 56%; bottom: 34px; } .lp-frame.f4 i { left: 70%; bottom: 20px; }
.lp-frame.f2 { background: linear-gradient(170deg, #b4a2ff, #ff8ad4); } .lp-frame.f3 { background: linear-gradient(170deg, #ffd48a, #ff7aae); } .lp-frame.f4 { background: linear-gradient(170deg, #8bf0c0, #3aa0ff); }
.lp-scrub { display: flex; align-items: center; gap: 10px; margin-top: 12px; background: #fff; border-radius: 14px; padding: 10px 14px; box-shadow: 0 10px 26px -12px rgba(30, 20, 90, .35); }
.lp-play { width: 30px; height: 30px; border-radius: 50%; background: #0B1020; color: #fff; display: grid; place-items: center; font-size: 10px; }
.lp-track { flex: 1; height: 6px; border-radius: 3px; background: #E4E8F1; overflow: hidden; } .lp-track b { display: block; height: 100%; width: 62%; border-radius: 3px; background: linear-gradient(90deg, #00C3FF, #7C5CFF); }
.lp-art-voice { display: flex; flex-direction: column; gap: 10px; }
.lp-row { background: #fff; border-radius: 16px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 10px 26px -12px rgba(10, 60, 40, .3); }
.lp-tag { font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #566079; } .lp-tag-b { color: #0f9d58; }
.lp-wave { display: flex; align-items: center; justify-content: space-between; height: 38px; }
.lp-wave i { flex: 0 0 5px; border-radius: 3px; background: #B9C2D8; animation: lp-bars 1.6s ease-in-out infinite; transform-origin: center; }
.lp-wave-b i { background: linear-gradient(180deg, #14B86B, #00C3FF); }
@keyframes lp-bars { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(.55); } }
.lp-arrow { text-align: center; font-size: 18px; color: #0f9d58; line-height: 1; }
.lp-script { font-size: 12.5px; color: #3a4258; background: rgba(255,255,255,.6); border-radius: 12px; padding: 9px 12px; }
.lp-art-meter { background: #0d1220; border-radius: 18px; padding: 20px; color: #fff; box-shadow: 0 24px 50px -18px rgba(10, 14, 40, .55); }
.lp-meter-num { font-size: 44px; font-weight: 700; letter-spacing: -0.03em; } .lp-meter-num small { font-size: 16px; opacity: .6; margin-left: 4px; }
.lp-art-meter svg { width: 100%; height: auto; margin: 6px 0 4px; } .lp-meter-sub { font-size: 12.5px; opacity: .7; }
.lp-art-generic { display: grid; place-items: center; }
.lp-gen-icon { width: 96px; height: 96px; border-radius: 30px; display: grid; place-items: center; background: linear-gradient(135deg, #00C3FF, #7C5CFF); color: #fff; font-size: 38px; }
.lp-gen-icon svg { width: 44px; height: 44px; stroke: #fff; }

/* pricing */
.lp-rates { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; }
.lp-rate { position: relative; padding: 32px 28px; border-radius: 30px; background: var(--lp-surface); border: 1px solid var(--lp-line); box-shadow: var(--lp-shadow); }
.lp-rate-label { color: var(--lp-muted); font-size: 15px; font-weight: 600; }
.lp-rate-price { font: 700 52px/1.05 'Clash Display', sans-serif; letter-spacing: -0.045em; margin: 12px 0 4px; }
.lp-rate-unit { color: var(--lp-muted); font-size: 14.5px; }
.lp-rate-hot { color: #fff; border-color: transparent; background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.2), transparent 55%), linear-gradient(140deg, #00A9E8, #6B4CF0 65%, #B04DE0); }
.lp-rate-hot .lp-rate-label, .lp-rate-hot .lp-rate-unit { color: rgba(255, 255, 255, .85); }
.lp-rate-flag { position: absolute; top: 18px; right: 18px; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,.22); font-size: 12px; font-weight: 700; }

/* faq */
.lp-sec-faq { display: grid; grid-template-columns: 5fr 7fr; gap: 56px; align-items: start; }
.lp-sec-faq .lp-sec-head { text-align: left; margin: 0; position: sticky; top: 110px; }
.lp-sec-faq .lp-sec-head h2 { margin-left: 0; font-size: clamp(34px, 4.4vw, 54px); }
.lp-sec-faq .lp-lead { margin-left: 0; }
.lp-faq { display: flex; flex-direction: column; gap: 12px; }
.lp-faq details { border-radius: 22px; background: var(--lp-surface); border: 1px solid var(--lp-line); padding: 0 26px; transition: box-shadow .2s ease; }
.lp-faq details[open] { box-shadow: var(--lp-shadow); }
.lp-faq summary { cursor: pointer; list-style: none; padding: 22px 0; font: 600 18px/1.35 'General Sans', sans-serif; display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.lp-faq summary::-webkit-details-marker { display: none; }
.lp-faq summary::after { content: '+'; flex-shrink: 0; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--lp-tint-0); color: var(--lp-eyebrow-fg); font-size: 20px; font-weight: 500; }
.lp-faq details[open] summary::after { content: '–'; }
.lp-faq details p { margin: 0 0 24px; color: var(--lp-muted); font-size: 16px; line-height: 1.65; }
.lp-textblock { max-width: 720px; margin: 0 auto; color: var(--lp-muted); font-size: 17.5px; line-height: 1.75; }

/* closing call to action */
.lp-sec-cta { margin-top: 150px; }
.lp-cta { position: relative; overflow: hidden; text-align: center; padding: 96px 28px; border-radius: 44px; color: #fff;
  background: radial-gradient(90% 120% at 10% 0%, rgba(255,255,255,.26), transparent 55%), linear-gradient(135deg, #00A9E8, #6B4CF0 58%, #C04DD8); }
.lp-cta h2 { color: #fff; font-size: clamp(36px, 6vw, 72px); line-height: 1; letter-spacing: -0.045em; max-width: 780px; margin: 0 auto 16px; position: relative; }
.lp-cta .grad { background: none; color: #fff; text-decoration: underline; text-decoration-thickness: 4px; text-underline-offset: 8px; }
.lp-cta p { color: rgba(255,255,255,.9); font-size: 19px; max-width: 520px; margin: 0 auto 32px; position: relative; }
.lp-cta-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; position: relative; }
.lp-cta-shape { position: absolute; border-radius: 40% 60% 55% 45% / 45% 40% 60% 55%; background: rgba(255,255,255,.14); }
.lp-cta-shape-1 { width: 380px; height: 380px; left: -120px; bottom: -170px; transform: rotate(18deg); }
.lp-cta-shape-2 { width: 300px; height: 300px; right: -90px; top: -120px; transform: rotate(-24deg); }

/* footer */
.lp-foot { max-width: 1180px; margin: 140px auto 0; padding: 0 20px 36px; }
.lp-foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; padding: 56px 0 44px; border-top: 1px solid var(--lp-line); }
.lp-foot-brand p { color: var(--lp-muted); max-width: 320px; margin: 16px 0 0; line-height: 1.6; }
.lp-foot h4 { font: 600 13px/1 'General Sans', sans-serif; text-transform: uppercase; letter-spacing: .08em; color: var(--lp-muted); margin: 0 0 18px; }
.lp-foot-grid a.brand { display: flex; margin: 0; }
.lp-foot-grid a:not(.brand) { display: block; color: var(--lp-ink); margin: 0 0 12px; font-weight: 500; }
.lp-foot-grid > div:not(.lp-foot-brand) a:hover { color: var(--lp-eyebrow-fg); }
.lp-foot-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 24px; border-top: 1px solid var(--lp-line); color: var(--lp-muted); font-size: 14px; }

/* scroll reveal (only when the script has switched it on) */
.lp-js .lp-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease var(--d, 0ms), transform .7s cubic-bezier(.2,.7,.2,1) var(--d, 0ms); }
.lp-js .lp-reveal.in { opacity: 1; transform: none; }

@media (max-width: 1000px) {
  .lp-links { display: none; position: absolute; left: 0; right: 0; top: calc(100% + 8px); flex-direction: column; align-items: stretch; gap: 2px; padding: 12px; margin: 0; border-radius: 20px; background: var(--lp-surface); border: 1px solid var(--lp-line); box-shadow: var(--lp-shadow); }
  .lp-links.open { display: flex; }
  .lp-links a { padding: 13px 14px; }
  .lp-links-sep { display: block; height: 1px; background: var(--lp-line); margin: 6px 0; }
  .lp-links-narrow { display: block; }
  .lp-links-primary { background: var(--lp-accent); color: var(--lp-accent-ink) !important; text-align: center; font-weight: 600; }
  .lp .nav-burger { display: inline-flex; }
  .lp-nav-signin { display: none; }
  .lp-nav-actions .lp-nav-cta { display: none; }
}
@media (max-width: 860px) {
  .lp-hero { padding-top: 54px; }
  .lp-stage { gap: 10px; margin-top: 44px; }
  .lp-ch-1, .lp-ch-5 { display: none; }
  .lp-steps, .lp-bento-2, .lp-bento-3 { grid-template-columns: 1fr; }
  .lp-bento-odd .lp-feat:last-child { display: block; }
  .lp-sec { margin-top: 100px; }
  .lp-sec-head { margin-bottom: 38px; }
  .lp-sec-faq { grid-template-columns: 1fr; gap: 30px; }
  .lp-sec-faq .lp-sec-head { position: static; text-align: center; }
  .lp-sec-faq .lp-sec-head h2, .lp-sec-faq .lp-lead { margin-left: auto; }
  .lp-aud { flex-direction: column; gap: 12px; align-items: stretch; }
  .lp-aud-label { text-align: center; }
  .lp-cta { padding: 64px 22px; border-radius: 34px; }
  .lp-foot-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
  .lp-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .lp-top { padding: 8px 10px 0; }
  .lp-nav { padding: 7px 8px 7px 14px; gap: 10px; }
  .lp-hero { padding-left: 16px; padding-right: 16px; }
  .lp-hero-actions .lp-btn-lg { width: 100%; }
  .lp-ch-2, .lp-ch-4 { flex: .8 1 0; }
  .lp-ch-live { flex: 1.15 1 0; }
  .lp-tagpill { font-size: 11px; padding: 4px 9px; left: 8px; bottom: 8px; }
  .lp-hud { left: 8px; right: 8px; font-size: 10.5px; } .lp-hud-pill { padding: 4px 8px; }
  .lp-hud-bottom .lp-hud-pill:first-child { display: none; }
  .lp-feat h3 { font-size: 24px; } .lp-rate-price { font-size: 44px; }
  .lp-win-body { height: 120px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-ch, .lp-layer-char, .lp-scan, .lp-aud-track, .lp-wave i, .lp .live-dot { animation: none !important; }
  .lp-layer-char { clip-path: inset(0 0 0 50%); } .lp-scan { left: 50%; }
  .lp-btn, .lp-feat { transition: none; }
}

/* ---------------------------------------------------------------- real photos and video */
.lp-ch > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; left: 0; bottom: 0; }
.lp-ch:not(.lp-ch-live)::after { content: ''; position: absolute; inset: 55% 0 0; background: linear-gradient(180deg, transparent, rgba(8, 10, 24, .6)); pointer-events: none; }
.lp-ch-1, .lp-ch-2, .lp-ch-4, .lp-ch-5 { background: #1a2036; }
.lp-live-video, .lp-layer > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; left: 0; bottom: 0; }
.lp-layer { background: #1a2036; }
.lp-ch-live .lp-hud { z-index: 3; } .lp-scan { z-index: 2; }
.lp-hud-ref img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; margin: -2px 2px -2px -4px; }
.lp-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #1a2036; }
.lp-split-raw .lp-video, .lp-split-new img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-win-body { height: 190px; }
.lp-ba-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-ba-img { height: 150px; }
.lp-art-video { display: flex; align-items: center; justify-content: center; gap: 12px; width: 92%; height: 92%; }
.lp-still { position: relative; width: 26%; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; transform: rotate(-4deg); box-shadow: 0 14px 30px -12px rgba(30, 20, 90, .5); flex-shrink: 0; }
.lp-still img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lp-still span { position: absolute; left: 6px; bottom: 6px; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: 10.5px; font-weight: 600; }
.lp-then { font-size: 22px; color: #7C5CFF; font-weight: 700; }
.lp-clip { position: relative; height: 100%; aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; box-shadow: 0 22px 44px -16px rgba(10, 14, 40, .6); flex-shrink: 0; }
.lp-clip-ui { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 12px; background: rgba(10, 13, 20, .6); color: #fff; font-size: 11px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.lp-clip-ui .lp-play { width: 22px; height: 22px; background: #fff; color: #0B1020; font-size: 8px; }
.lp-clip-ui .lp-track { background: rgba(255,255,255,.3); }
.lp-art-voice { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 14px; width: 92%; height: 92%; }
.lp-clip-mic { height: 100%; }
.lp-voice-ui { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.lp-cta-photos { position: absolute; top: 50%; display: flex; gap: 12px; transform: translateY(-50%); }
.lp-cta-photos img { width: 120px; height: 170px; object-fit: cover; border-radius: 22px; border: 3px solid rgba(255,255,255,.7); box-shadow: 0 20px 40px -14px rgba(10, 5, 60, .6); }
.lp-cta-photos-l { left: 28px; } .lp-cta-photos-l img:nth-child(1) { transform: rotate(-8deg) translateY(-14px); } .lp-cta-photos-l img:nth-child(2) { transform: rotate(5deg) translateY(22px); }
.lp-cta-photos-r { right: 28px; } .lp-cta-photos-r img:nth-child(1) { transform: rotate(7deg) translateY(-18px); } .lp-cta-photos-r img:nth-child(2) { transform: rotate(-5deg) translateY(20px); }
@media (max-width: 1100px) { .lp-cta-photos { display: none; } }
@media (max-width: 560px) { .lp-win-body { height: 150px; } .lp-ba-img { height: 120px; } }
.lp-art-video, .lp-art-voice { position: absolute; inset: 6% 5%; width: auto; height: auto; }
.lp-clip video { position: absolute; inset: 0; }
.lp-stage { -webkit-mask-image: linear-gradient(180deg, #000 93%, transparent); mask-image: linear-gradient(180deg, #000 93%, transparent); }
@media (max-width: 700px) { .lp-feat-art { aspect-ratio: auto; min-height: 280px; } .lp-art-video, .lp-art-voice { inset: 5%; } .lp-art { width: 92%; } }

/* ---------------------------------------------------------------- phones: a much shorter page */
@media (max-width: 700px) {
  .lp-hero { padding-bottom: 8px; }
  .lp-stage { margin-top: 32px; }
  .lp-aud { padding: 14px 16px 0; }
  .lp-sec { margin-top: 52px; padding: 0 16px; }
  .lp-sec-head { margin-bottom: 22px; }
  .lp-sec-head h2 { font-size: 30px; margin-bottom: 10px; }
  .lp-eyebrow { margin-bottom: 12px; padding: 5px 11px; font-size: 12.5px; }
  .lp-lead { font-size: 15.5px; }

  .lp-steps { gap: 10px; }
  .lp-step { display: grid; grid-template-columns: 56px 1fr; column-gap: 12px; align-items: start; padding: 16px 18px; border-radius: 22px; }
  .lp-step-num { grid-row: span 2; font-size: 40px; margin: 0; }
  .lp-step-icon { display: none; }
  .lp-step h3 { font-size: 18px; margin: 0 0 2px; }
  .lp-step p { font-size: 14.5px; }

  .lp-bento { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; margin: 0 -16px; padding: 4px 16px 14px; scrollbar-width: none; }
  .lp-bento::-webkit-scrollbar { display: none; }
  .lp-feat, .lp-bento-odd .lp-feat:last-child { flex: 0 0 84%; scroll-snap-align: center; display: block; padding: 10px 10px 20px; border-radius: 28px; }
  .lp-feat-art { min-height: 0; aspect-ratio: 4 / 3.4; border-radius: 20px; }
  .lp-feat-copy { padding: 16px 10px 0; }
  .lp-feat h3 { font-size: 22px; margin-bottom: 6px; }
  .lp-feat p { font-size: 14.5px; margin-bottom: 10px; }
  .lp-win-body { height: 120px; } .lp-win-bar { padding: 7px 10px; } .lp-win-foot { padding: 7px 10px; }
  .lp-ba-img { height: 100px; } .lp-prompt { padding: 9px 11px; font-size: 12px; }
  .lp-art-edit { gap: 8px; }

  .lp-rates { grid-template-columns: 1fr 1fr; gap: 10px; }
  .lp-rate { padding: 16px 16px 18px; border-radius: 22px; }
  .lp-rate-price { font-size: 32px; margin: 6px 0 2px; } .lp-rate-label { font-size: 13.5px; } .lp-rate-unit { font-size: 12.5px; }
  .lp-rate-flag { top: 10px; right: 10px; padding: 3px 8px; font-size: 10.5px; }
  .lp-center { margin-top: 22px; }

  .lp-faq { gap: 8px; }
  .lp-faq details { padding: 0 18px; border-radius: 18px; }
  .lp-faq summary { padding: 15px 0; font-size: 15.5px; }
  .lp-faq details p { margin-bottom: 16px; font-size: 14.5px; }

  .lp-sec-cta { margin-top: 52px; }
  .lp-cta { padding: 40px 18px; border-radius: 28px; }
  .lp-cta h2 { font-size: 32px; } .lp-cta p { font-size: 15.5px; margin-bottom: 20px; }

  .lp-foot { margin-top: 56px; padding-bottom: 22px; }
  .lp-foot-grid { grid-template-columns: 1fr 1fr; gap: 6px 20px; padding: 28px 0 18px; }
  .lp-foot-grid > div:nth-child(2) { display: none; }
  .lp-foot-brand p { margin-top: 10px; font-size: 14px; }
  .lp-foot h4 { margin-bottom: 10px; } .lp-foot-grid a:not(.brand) { margin-bottom: 8px; font-size: 14.5px; }
  .lp-foot-bottom { padding-top: 16px; font-size: 13px; }
}

/* credit packages + what a credit buys */
.lp-rate-unit strong { color: inherit; font-weight: 700; }
.lp-rate-per { margin-top: 10px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); font-size: 13px; color: var(--lp-muted); }
.lp-rate-hot .lp-rate-per { color: rgba(255, 255, 255, .8); }
.lp-costs { margin-top: 28px; padding: 22px 26px; border-radius: 26px; background: var(--lp-surface); border: 1px dashed var(--lp-line); }
.lp-costs-title { font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--lp-muted); margin-bottom: 14px; }
.lp-costs-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.lp-cost { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 16px; background: var(--lp-bg); }
.lp-cost span { font-size: 14px; color: var(--lp-muted); font-weight: 500; }
.lp-cost strong { font: 700 20px/1.2 'Clash Display', sans-serif; letter-spacing: -.02em; }
.lp-cost em { font-style: normal; font-size: 12.5px; color: var(--lp-muted); }
@media (max-width: 700px) {
  .lp-costs { padding: 16px; border-radius: 22px; margin-top: 18px; }
  .lp-costs-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .lp-cost { padding: 10px 12px; } .lp-cost strong { font-size: 17px; }
  .lp-rate-per { font-size: 11.5px; margin-top: 8px; padding-top: 8px; }
}

/* highlights ("Why us") */
.lp-highlights { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.lp-hl { padding: 28px 24px 30px; border-radius: 28px; background: var(--lp-surface); border: 1px solid var(--lp-line); box-shadow: var(--lp-shadow); }
.lp-hl-icon { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; margin-bottom: 22px; }
.lp-hl.lp-tint-0 .lp-hl-icon { background: var(--lp-tint-0); } .lp-hl.lp-tint-1 .lp-hl-icon { background: var(--lp-tint-1); }
.lp-hl.lp-tint-2 .lp-hl-icon { background: var(--lp-tint-2); } .lp-hl.lp-tint-3 .lp-hl-icon { background: var(--lp-tint-3); }
.lp-hl-icon svg { width: 24px; height: 24px; stroke: var(--lp-ink); }
.lp-hl-value { font: 700 34px/1.05 'Clash Display', sans-serif; letter-spacing: -0.04em; margin-bottom: 10px; }
.lp-hl p { margin: 0; color: var(--lp-muted); font-size: 15.5px; line-height: 1.55; }
@media (max-width: 1000px) { .lp-highlights { grid-template-columns: 1fr 1fr; } }
@media (max-width: 700px) {
  .lp-highlights { gap: 10px; }
  .lp-hl { padding: 16px 16px 18px; border-radius: 22px; }
  .lp-hl-icon { width: 38px; height: 38px; border-radius: 12px; margin-bottom: 12px; } .lp-hl-icon svg { width: 19px; height: 19px; }
  .lp-hl-value { font-size: 22px; margin-bottom: 6px; } .lp-hl p { font-size: 13px; line-height: 1.45; }
}

/* footer with a Legal column, and the legal pages */
.lp-foot-grid { grid-template-columns: 2fr 1fr 1fr 1fr 1fr; }
.lp-legal { max-width: 780px; margin: 70px auto 0; padding: 0 20px; }
.lp-legal-nav { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 28px; }
.lp-legal-nav a { padding: 8px 15px; border-radius: 999px; border: 1px solid var(--lp-line); background: var(--lp-surface); font-size: 14px; font-weight: 500; color: var(--lp-ink); }
.lp-legal-nav a.active { background: var(--lp-ink); color: var(--lp-ink-text); border-color: var(--lp-ink); }
.lp-legal h1 { font-size: clamp(34px, 5vw, 52px); letter-spacing: -0.04em; margin: 0 0 6px; }
.lp-legal-date { color: var(--lp-muted); margin: 0 0 34px; }
.lp-legal h2 { font-size: 22px; letter-spacing: -0.02em; margin: 34px 0 10px; }
.lp-legal p { color: var(--lp-muted); font-size: 16.5px; line-height: 1.75; margin: 0 0 14px; }
@media (max-width: 860px) { .lp-foot-grid { grid-template-columns: 1fr 1fr; } .lp-legal { margin-top: 40px; } }
@media (max-width: 700px) { .lp-foot-grid > div:nth-child(2) { display: none; } }

/* report-abuse form (public) */
.lp-report { display: flex; flex-direction: column; gap: 18px; margin-top: 8px; }
.lp-report label { display: flex; flex-direction: column; gap: 7px; font-weight: 600; font-size: 14.5px; color: var(--lp-ink); }
.lp-report select, .lp-report textarea, .lp-report input[type="text"], .lp-report input[type="email"] { padding: 13px 15px; border-radius: 14px; border: 1px solid var(--lp-line); background: var(--lp-surface); color: var(--lp-ink); font: 400 15.5px 'General Sans', sans-serif; }
.lp-report button { align-self: flex-start; }
.lp-report-note { margin: 0; padding: 12px 15px; border-radius: 12px; background: var(--lp-tint-0); color: var(--lp-ink) !important; font-size: 14.5px !important; }

/* a picture the admin uploaded in place of a built-in card mock-up */
.lp-art-photo { position: absolute; inset: 0; width: 100%; }
.lp-art-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }