/* ============================================================================
   Landing v4 — "plain daylight" (2026-07-17)

   Replaces landing-v3.css + screening-room-core.css. Same DOM, new skin:
   the cinema conceit is gone (Aadil: "who would actually convert on this").
   Audience: small-business owners worldwide, on phones, often non-native
   English. Light, high-contrast, app-simple; ONE action color; sentence case;
   the real sample videos are the design. Film decorations (.l3-slate,
   .l3-sprocket, timecodes) are hidden, not removed — the DOM contract with
   e2e + page JS stays intact.
   ========================================================================== */

:root {
  --v4-paper: #fafaf8;
  --v4-card: #ffffff;
  --v4-ink: #191926;
  --v4-muted: #5f5e75;
  --v4-line: #e8e7f0;
  --v4-accent: #6c4cf1;
  --v4-accent-ink: #ffffff;
  --v4-tint: #f0edfd;
  --v4-good: #1b9e4b;
  --v4-r: 16px;
  --v4-shadow: 0 1px 2px rgba(25, 25, 38, .05), 0 8px 28px -12px rgba(25, 25, 38, .12);
  --v4-font: 'Plus Jakarta Sans', -apple-system, 'Segoe UI', Roboto, sans-serif;
}

html { scroll-behavior: smooth; }
body.mtv-body {
  background: var(--v4-paper);
  color: var(--v4-ink);
  font-family: var(--v4-font);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ---- film decorations: gone ---- */
.l3-slate, .l3-sprocket, .l3-index, .l3-screen-bar .tc, [data-timecode] { display: none !important; }

/* ---- topbar ---- */
.mtv-topbar { position: sticky; top: 0; z-index: 50; background: rgba(250, 250, 248, .92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--v4-line); }
.mtv-topbar-inner { max-width: 1080px; margin: 0 auto; padding: 12px 18px; display: flex; align-items: center; gap: 16px; }
.l3-brand { display: flex; flex-direction: column; gap: 1px; text-decoration: none; color: var(--v4-ink); }
.l3-brand .mark { font-weight: 800; font-size: 17px; letter-spacing: -.02em; }
.l3-brand .mark em { font-style: normal; color: var(--v4-accent); }
.l3-brand .est { font-size: 10.5px; color: var(--v4-muted); }
.l3-nav { margin-left: auto; display: inline-flex; align-items: center; gap: 16px; }
.l3-nav a { color: var(--v4-muted); font-size: 14px; font-weight: 600; text-decoration: none; }
.l3-nav a:hover { color: var(--v4-ink); }

/* ---- buttons ---- */
.l3-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 22px; border-radius: 12px; font: 700 15px/1 var(--v4-font); text-decoration: none; cursor: pointer; border: 0; transition: transform .12s ease, box-shadow .12s ease, background .12s ease; }
.l3-btn-primary { background: var(--v4-accent); color: var(--v4-accent-ink) !important; box-shadow: 0 8px 20px -8px rgba(108, 76, 241, .55); }
.l3-btn-primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(108, 76, 241, .6); }
.l3-btn-ghost { background: transparent; color: var(--v4-ink); border: 1.5px solid var(--v4-line); }
.l3-btn-ghost:hover { border-color: var(--v4-accent); color: var(--v4-accent); }
.l3-btn-block { width: 100%; }
.l3-nav .l3-btn-primary { padding: 10px 16px; font-size: 13.5px; border-radius: 10px; }

/* ---- layout primitives ---- */
.l3-container { max-width: 1080px; margin: 0 auto; padding: 0 18px; }
.l3-section { padding: 56px 0; }
.l3-section-title { font-size: clamp(1.6rem, 3.4vw, 2.3rem); font-weight: 800; letter-spacing: -.025em; line-height: 1.15; margin: 0 0 10px; }
.l3-section-title em { font-style: normal; color: var(--v4-accent); }
.l3-section-sub { color: var(--v4-muted); font-size: 15.5px; max-width: 620px; margin: 0 0 28px; }
.l3-reveal { opacity: 1; transform: none; } /* always visible — no scroll gymnastics */
.l3-skip { position: absolute; left: -9999px; }
.l3-skip:focus { position: fixed; left: 12px; top: 12px; background: var(--v4-card); padding: 10px 14px; border-radius: 8px; z-index: 99; }

/* ---- hero ---- */
.l3-hero { max-width: 1080px; margin: 0 auto; padding: 40px 18px 20px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.l3-eyebrow { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--v4-accent); background: var(--v4-tint); border-radius: 999px; padding: 7px 14px; margin: 0 0 16px; }
.l3-title { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 800; letter-spacing: -.03em; line-height: 1.08; margin: 0 0 12px; }
.l3-title em { font-style: normal; color: var(--v4-accent); }
.l2-sub { color: var(--v4-muted); font-size: 16.5px; margin: 0 0 20px; max-width: 480px; }

.l3-dealchips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.l3-dealchip { display: inline-flex; align-items: center; font-size: 12px; font-weight: 700; color: var(--v4-ink); background: var(--v4-tint); border-radius: 999px; padding: 6px 12px 6px 10px; }
.l3-dealchip::before { content: "✓"; color: var(--v4-good); font-weight: 800; margin-right: 5px; }

/* one action, dead simple (2026-07-22 beat-sheet addendum): no composer,
   no secondary CTA — just the button and a one-line trust note. */
.l3-hero-cta { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; margin-top: 4px; }
.l3-btn-hero { padding: 16px 28px; font-size: 16px; }
.l3-cta-note { font-size: 12px; color: var(--v4-muted); margin: 0; }

/* the real-video side */
.l3-hero-screen { position: sticky; top: 76px; }
.l3-screenbox { background: var(--v4-card); border: 1px solid var(--v4-line); border-radius: var(--v4-r); box-shadow: var(--v4-shadow); overflow: hidden; }
.l3-screen-bar { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-size: 11.5px; font-weight: 700; color: var(--v4-muted); border-bottom: 1px solid var(--v4-line); }
.l3-screen-bar .rec { color: var(--v4-good); }
.l3-screen-bar .rec::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--v4-good); margin-right: 6px; vertical-align: 1px; }
.l3-screen-bar .spacer { flex: 1; }
.l3-screen { background: #000; aspect-ratio: 16 / 9; }
.l3-screen video { display: block; width: 100%; height: 100%; object-fit: cover; }
.l3-receipt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; padding: 12px 14px; font-size: 12.5px; }
.l3-receipt .k { font-weight: 800; color: var(--v4-accent); white-space: nowrap; }
.l3-receipt .prompt { color: var(--v4-muted); font-style: italic; }
.l3-receipt .cost { color: var(--v4-muted); font-weight: 700; margin-left: auto; white-space: nowrap; }
.l3-receipt-source { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--v4-line); background: var(--v4-paper); border-radius: 8px; padding: 4px 8px; font: 600 11.5px var(--v4-font); color: var(--v4-ink); cursor: pointer; }
.l3-receipt-source img { width: 22px; height: 22px; border-radius: 5px; object-fit: cover; }
.l3-receipt-source[hidden] { display: none; }

/* ---- marquee → quiet trust strip ---- */
.l3-marquee { overflow: hidden; border-block: 1px solid var(--v4-line); background: var(--v4-card); padding: 12px 0; margin-top: 26px; }
.l3-marquee-track { display: flex; gap: 12px; width: max-content; animation: v4-marquee 38s linear infinite; }
.l3-marquee-item { white-space: nowrap; font-size: 12.5px; font-weight: 600; color: var(--v4-muted); background: var(--v4-paper); border: 1px solid var(--v4-line); border-radius: 999px; padding: 6px 14px; }
@keyframes v4-marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .l3-marquee-track { animation: none; } }

/* ---- examples grid ---- */
.l3-proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.l3-clip { text-align: left; background: var(--v4-card); border: 1px solid var(--v4-line); border-radius: var(--v4-r); overflow: hidden; cursor: pointer; padding: 0; transition: transform .14s ease, box-shadow .14s ease; }
.l3-clip:hover { transform: translateY(-2px); box-shadow: var(--v4-shadow); }
.l3-clip-frame { position: relative; display: block; aspect-ratio: 16 / 9; background: #000; }
.l3-clip-frame img, .l3-clip-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.l3-clip-frame video { opacity: 0; transition: opacity .2s; }
.l3-clip:hover .l3-clip-frame video { opacity: 1; }
.l3-clip-tc { position: absolute; z-index: 2; left: 10px; top: 10px; background: rgba(255,255,255,.92); color: var(--v4-ink); border-radius: 7px; padding: 3px 9px; font: 700 10.5px var(--v4-font); }
.l3-clip-tc .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--v4-good); margin-right: 5px; vertical-align: 1px; }
.l3-clip-prompt { display: block; padding: 12px 14px; font-size: 13px; color: var(--v4-muted); font-style: italic; line-height: 1.5; }
.l3-proof-note { margin-top: 18px; font-size: 14px; color: var(--v4-muted); }
.l3-proof-note a { color: var(--v4-accent); font-weight: 700; text-decoration: none; }

/* ---- lightbox ---- */
.l3-lightbox { position: fixed; inset: 0; z-index: 90; background: rgba(20, 19, 32, .78); display: flex; align-items: center; justify-content: center; padding: 20px; }
.l3-lightbox[hidden] { display: none; }
.l3-lightbox-stage { max-width: 860px; width: 100%; background: var(--v4-card); border-radius: var(--v4-r); overflow: hidden; box-shadow: 0 30px 80px -20px rgba(0,0,0,.5); }
.l3-lightbox-stage video { display: block; width: 100%; background: #000; }
.l3-lightbox-caption { padding: 14px 16px; font-size: 13.5px; color: var(--v4-muted); font-style: italic; }
.l3-lightbox-close { position: absolute; top: 18px; right: 18px; background: var(--v4-card); border: 0; border-radius: 50%; width: 40px; height: 40px; font-size: 18px; cursor: pointer; }
.l3-lightbox .l3-btn { margin: 0 16px 16px; }

/* ---- how it works ---- */
.l3-method { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.l3-step { background: var(--v4-card); border: 1px solid var(--v4-line); border-radius: var(--v4-r); padding: 20px; }
.l3-step .n { width: 30px; height: 30px; border-radius: 50%; background: var(--v4-tint); color: var(--v4-accent); font-weight: 800; font-size: 13.5px; display: grid; place-items: center; margin-bottom: 12px; }
.l3-step h3 { margin: 0 0 6px; font-size: 16.5px; font-weight: 800; letter-spacing: -.01em; }
.l3-step p { margin: 0; color: var(--v4-muted); font-size: 14px; }
.l3-step .meta { margin-top: 12px; font-size: 12.5px; color: var(--v4-ink); background: var(--v4-paper); border: 1px solid var(--v4-line); border-radius: 8px; padding: 7px 10px; display: inline-block; }
.l3-step .meta b { color: var(--v4-accent); }

/* ---- offers ---- */
.l3-offers { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 16px; align-items: start; }
.l3-offer { position: relative; background: var(--v4-card); border: 1.5px solid var(--v4-line); border-radius: var(--v4-r); padding: 22px 20px; display: flex; flex-direction: column; gap: 10px; }
.l3-offer.is-selected, .l3-offer-hero { border-color: var(--v4-accent); box-shadow: 0 12px 34px -16px rgba(108, 76, 241, .35); }
.l3-offer .badge { position: absolute; top: -11px; left: 18px; background: var(--v4-accent); color: #fff; font: 800 10.5px var(--v4-font); letter-spacing: .04em; text-transform: uppercase; border-radius: 999px; padding: 4px 11px; }
.l3-offer .admit { font-size: 11.5px; font-weight: 700; color: var(--v4-muted); text-transform: uppercase; letter-spacing: .05em; }
.l3-offer .name { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.l3-offer .amount { font-size: 30px; font-weight: 800; letter-spacing: -.03em; }
.l3-offer .amount .per { font-size: 13px; font-weight: 600; color: var(--v4-muted); letter-spacing: 0; }
.l3-offer .perf { display: none; }
.l3-offer .pitch { margin: 0; color: var(--v4-muted); font-size: 13.5px; }
.l3-offer ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 7px; }
.l3-offer ul li { font-size: 13.5px; padding-left: 22px; position: relative; }
.l3-offer ul li::before { content: "✓"; position: absolute; left: 0; color: var(--v4-good); font-weight: 800; }
.l3-offer-trust { margin: 0; font-size: 11.5px; color: var(--v4-muted); text-align: center; }
.l3-offers-note { margin-top: 18px; font-size: 13.5px; color: var(--v4-muted); }
.l3-offers-note a { color: var(--v4-accent); font-weight: 700; text-decoration: none; }

/* compact kit row (below the two main offer cards) */
.l3-kits-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 14px; }
.l3-kits-row-label { font-size: 13px; font-weight: 700; color: var(--v4-muted); margin-right: 2px; }
.l3-offer-compact { flex: 1 1 220px; flex-direction: row; align-items: center; gap: 12px; padding: 12px 16px; }
.l3-offer-compact .name { font-size: 14px; margin: 0; }
.l3-offer-compact .amount { font-size: 16px; margin-left: auto; white-space: nowrap; }
.l3-offer-compact .l3-btn { padding: 8px 14px; font-size: 13px; white-space: nowrap; }

/* ---- who it's for ---- */
.l3-regulars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.l3-regular { background: var(--v4-card); border: 1px solid var(--v4-line); border-radius: var(--v4-r); padding: 18px; color: inherit; text-decoration: none; display: block; }
.l3-regular:hover { border-color: var(--v4-accent); }
.l3-regular .meta { margin-top: 12px; font-size: 12.5px; color: var(--v4-muted); }
.l3-regular .meta b { color: var(--v4-accent); }
.l3-regular h3 { margin: 0 0 6px; font-size: 15px; font-weight: 800; }
.l3-regular p { margin: 0; color: var(--v4-muted); font-size: 13px; }
.l3-regulars-kit-note { margin-top: 14px; font-size: 13.5px; color: var(--v4-muted); }
.l3-regulars-kit-note a { color: var(--v4-accent); font-weight: 700; text-decoration: none; }
.l3-cast-col { display: contents; }

/* ---- FAQ ---- */
.l3-faq { max-width: 720px; }
.l3-faq-item { border-bottom: 1px solid var(--v4-line); }
.l3-faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 2px; background: none; border: 0; font: 700 15px var(--v4-font); color: var(--v4-ink); text-align: left; cursor: pointer; }
.l3-faq-q .ind { color: var(--v4-accent); font-weight: 800; }
.l3-faq-a { overflow: hidden; max-height: 0; transition: max-height .25s ease; }
.l3-faq-item.open .l3-faq-a { max-height: 400px; }
.l3-faq-a p { margin: 0 0 16px; color: var(--v4-muted); font-size: 14px; max-width: 640px; }

/* ---- footer ---- */
.l3-footer { border-top: 1px solid var(--v4-line); background: var(--v4-card); margin-top: 40px; }
.l3-footer-cta { text-align: center; padding: 48px 18px 8px; }
.l3-footer-cta h3 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 14px; }
.l3-footer-cast { max-width: 1080px; margin: 0 auto; padding: 30px 18px 40px; display: flex; flex-wrap: wrap; gap: 10px 22px; justify-content: center; font-size: 13px; }
.l3-footer-cast a { color: var(--v4-muted); text-decoration: none; }
.l3-footer-cast a:hover { color: var(--v4-accent); }

/* ---- responsive ---- */
@media (max-width: 860px) {
  .l3-hero { grid-template-columns: 1fr; padding-top: 26px; gap: 24px; }
  .l3-hero-screen { position: static; order: 2; }
  .l3-hero-copy { order: 1; }
  .l3-proof-grid, .l3-method, .l3-offers { grid-template-columns: 1fr; }
  .l3-regulars { grid-template-columns: 1fr 1fr; }
  .l3-section { padding: 40px 0; }
  .l3-brand .est { display: none; }

  .l3-kits-row { flex-direction: column; align-items: stretch; }
  .l3-offer-compact { flex: 1 1 auto; }
}