/* ============================================================================
   Talmaara landing — the "living video" landing.
   The animated intro (lp-intro.css/.js) is the full-bleed centerpiece and
   autoplays once the page has loaded. Supporting sections below reuse the
   shared components in lp-hero-mock.css. Design tokens come from head.php.
   This file is self-contained and scoped to the landing front page.
   ========================================================================== */

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
.v2-page { background: var(--bg-light, #0b1018); color: var(--text-light, #EDE9DF); }
.v2-page main { display: block; }

/* ── HERO: the living demo, full-bleed ──────────────────────────────────── */
.v2-hero {
  position: relative; overflow: hidden; container-type: inline-size;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: clamp(0.9rem, 2vh, 1.6rem);
  padding: clamp(4.5rem, 9vh, 7rem) 1.2rem clamp(2rem, 5vh, 3.5rem);
  background: radial-gradient(120% 100% at 50% 26%, #0e2138 0%, #081320 55%, #060d17 100%);
  text-align: center;
}
/* full-bleed starfield — the element carries .lp-intro-sky too, so it inherits
   the shared drift/twinkle; container-type on the hero makes cqi = hero width */
.v2-hero .v2-sky { position: absolute; inset: -6%; z-index: 0; pointer-events: none; }
.v2-hero > *:not(.v2-sky) { position: relative; z-index: 1; }
/* gentle vignette so overlaid text always reads */
.v2-hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(4,9,16,0.55) 100%);
}

/* headline overlaid on the scene (NB: cap width in px/vw, not ch — ch here is
   measured in the small inherited font and would collapse the title) */
.v2-hero-head { max-width: min(900px, 92vw); }
.v2-hero-head h1 {
  font-family: 'EB Garamond', Georgia, serif; font-weight: 400;
  font-size: clamp(2.2rem, 5.4vw, 4.3rem); line-height: 1.04; letter-spacing: -0.02em;
  margin: 0; color: #F3EFE6; text-shadow: 0 2px 44px rgba(0,0,0,0.55);
}
.v2-hero-head h1 em { font-style: italic; color: var(--accent-primary, #00B3FF); }
.v2-hero-sub {
  margin: 1rem auto 0; max-width: 56ch;
  font-family: 'EB Garamond', Georgia, serif; font-size: clamp(1.04rem, 2.1vw, 1.32rem);
  line-height: 1.5; color: rgba(237,233,223,0.62);
}

/* the demo — borderless & transparent so it blends into the starfield */
.v2-hero .lp-intro {
  width: min(960px, 82vw); max-width: none; margin: 0 auto;
  border-radius: 14px; box-shadow: none; isolation: isolate;
  overflow: visible;   /* let the living content spill past the frame instead of clipping */
}
.v2-hero .lp-intro-stage { background: transparent; overflow: visible; }
.v2-hero .lp-intro-stage > .lp-intro-sky { display: none; }  /* hero supplies the stars */
/* smaller window so the subtitles + controls sit in a clear band below the content, not over it */
.v2-hero .lpi-window { width: 67%; }
/* poster + play button shows until clicked (plays with sound on the first click) */
.v2-hero .lp-intro-poster { background: rgba(6,12,22,0.45); border-radius: 14px; }

/* in-video opening title card (the headline is part of the "video") */
.lpi-title { display: flex; flex-direction: column; align-items: center; gap: 2cqi; text-align: center; padding: 0 6cqi; will-change: transform; }
.lpi-title-mark { width: 8.5cqi; height: 8.5cqi; color: var(--intro-ink, #EDE9DF); filter: drop-shadow(0 0 5cqi rgba(0,179,255,.35)); }
.lpi-title-mark svg { width: 100%; height: 100%; display: block; }
.lpi-title-h { font-family: 'EB Garamond', Georgia, serif; font-weight: 400; font-size: 7cqi; line-height: 1.04; letter-spacing: -0.02em; margin: 0; color: #F3EFE6; }
.lpi-title-h em { font-style: italic; color: var(--intro-accent, #00B3FF); }
.lpi-title-sub { font-family: 'EB Garamond', Georgia, serif; font-size: 2.5cqi; line-height: 1.45; margin: 0; max-width: 62cqi; color: rgba(237,233,223,0.6); }

/* minimal "canvas" controls — small round bubbles bottom-right; auto-hide when the pointer is idle */
.v2-hero .lp-intro-bar {
  position: absolute; left: auto; right: 1.6cqi; bottom: 2cqi; width: auto;
  background: none; padding: 0; gap: 1.3cqi; z-index: 5;
  opacity: 0; transform: translateY(0.6cqi); transition: opacity .3s ease, transform .3s ease;
}
.v2-hero .lp-intro-time { display: none; }
/* reveal controls on pointer activity, and whenever paused / ended */
.v2-hero .lp-intro.controls-on .lp-intro-bar,
.v2-hero .lp-intro.is-paused .lp-intro-bar,
.v2-hero .lp-intro.is-ended .lp-intro-bar { opacity: 1; transform: none; }
.v2-hero .lp-intro-toggle, .v2-hero .lp-intro-cc, .v2-hero .lp-intro-sound {
  width: 4.2cqi; height: 4.2cqi; min-width: 32px; min-height: 32px; border-radius: 50%;
  background: rgba(10,18,30,0.5); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  border: 1px solid rgba(255,255,255,0.14); box-shadow: none; color: #EDE9DF;
  display: grid; place-items: center; transition: background .15s ease, opacity .15s ease, border-color .15s ease;
}
.v2-hero .lp-intro-toggle:hover, .v2-hero .lp-intro-cc:hover, .v2-hero .lp-intro-sound:hover { background: rgba(22,34,50,0.72); }
.v2-hero .lp-intro-toggle svg, .v2-hero .lp-intro-cc svg, .v2-hero .lp-intro-sound svg { width: 46%; height: 46%; }
.v2-hero .lp-intro-cc.is-off, .v2-hero .lp-intro-sound.is-off { opacity: 0.5; }

/* thin inline scrub line at the very bottom edge of the frame */
.v2-hero .lp-intro-scrub {
  display: block; position: absolute; left: 0; right: 0; bottom: 0; width: 100%;
  height: 0.5cqi; min-height: 3px; margin: 0; padding: 0; -webkit-appearance: none; appearance: none;
  background: linear-gradient(to right, var(--intro-accent) var(--p, 0%), rgba(255,255,255,0.13) var(--p, 0%));
  border-radius: 999px; cursor: pointer; z-index: 5;
  opacity: 0; transition: opacity .3s ease, height .15s ease;
}
.v2-hero .lp-intro.controls-on .lp-intro-scrub,
.v2-hero .lp-intro.is-paused .lp-intro-scrub,
.v2-hero .lp-intro.is-ended .lp-intro-scrub { opacity: 1; }
.v2-hero .lp-intro-scrub:hover { height: 0.9cqi; }
.v2-hero .lp-intro-scrub::-webkit-slider-thumb {
  -webkit-appearance: none; width: 1.4cqi; height: 1.4cqi; min-width: 10px; min-height: 10px;
  border-radius: 50%; background: var(--intro-accent); border: none; box-shadow: 0 0 0.8cqi rgba(0,179,255,.6);
  opacity: 0; transition: opacity .15s ease;
}
.v2-hero .lp-intro-scrub:hover::-webkit-slider-thumb { opacity: 1; }
.v2-hero .lp-intro-scrub::-moz-range-thumb {
  width: 1.4cqi; height: 1.4cqi; border-radius: 50%; background: var(--intro-accent); border: none; opacity: 0;
}
.v2-hero .lp-intro-scrub:hover::-moz-range-thumb { opacity: 1; }

/* hero CTA + scroll cue */
.v2-hero-cta { display: flex; gap: 0.8rem; align-items: center; justify-content: center; flex-wrap: wrap; }
.v2-btn {
  min-height: 52px; display: inline-flex; align-items: center; justify-content: center;
  padding: 0 2.2rem; border-radius: 999px; font-family: 'Inter', sans-serif; font-weight: 700;
  font-size: 1rem; text-decoration: none; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, opacity .16s, background .16s;
}
.v2-btn-primary { background: var(--accent-primary, #00B3FF); color: var(--btn-on-accent, #08121d);
  box-shadow: 0 10px 38px color-mix(in srgb, var(--accent-primary, #00B3FF) 30%, transparent); }
.v2-btn-primary:hover { transform: translateY(-2.5px); box-shadow: 0 16px 50px color-mix(in srgb, var(--accent-primary, #00B3FF) 42%, transparent); }
.v2-btn-ghost { color: #EDE9DF; border: 1px solid rgba(255,255,255,0.22); background: rgba(255,255,255,0.05); }
.v2-btn-ghost:hover { background: rgba(255,255,255,0.1); }
.v2-scrollcue { color: rgba(237,233,223,0.4); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; font-family: 'Inter', sans-serif; }

/* ── SHARED SECTION LABEL (ported) ──────────────────────────────────────── */
.lp-label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  color: var(--accent-primary); font-size: 0.67rem; font-weight: 800;
  letter-spacing: 0.26em; text-transform: uppercase; margin-bottom: 1rem;
}
.lp-label::before { content: ""; display: block; width: 18px; height: 1.5px; background: currentColor; opacity: 0.55; }

/* ── FEATURES (ported panels; .lp-feature-stage + .lp-contrast are shared) ── */
.lp-features { background: color-mix(in srgb, var(--bg-light) 55%, var(--card-bg-light)); padding: 4.75rem 1.5rem 4.5rem; }
.lp-features-inner { width: min(1100px, 100%); margin: 0 auto; }
.lp-features-head { text-align: center; margin-bottom: 3.25rem; }
.lp-features h2 {
  font-family: 'EB Garamond', Georgia, serif; font-weight: 400;
  font-size: clamp(2.3rem, 5.5vw, 4rem); line-height: 1.08; letter-spacing: -0.015em; margin: 0;
}
.lp-features h2 em { color: var(--accent-primary); font-style: italic; }
.lp-feature-panel {
  display: grid; grid-template-columns: 5fr 4fr; gap: clamp(2.5rem, 5vw, 5.5rem);
  align-items: center; margin-bottom: 4.5rem;
}
.lp-feature-panel:last-of-type { margin-bottom: 0; }
.lp-fp-flip { direction: rtl; }
.lp-fp-flip > * { direction: ltr; }
.lp-feature-num { font-size: 0.67rem; font-weight: 800; letter-spacing: 0.24em; text-transform: uppercase; color: var(--accent-primary); opacity: 0.65; margin-bottom: 0.85rem; }
.lp-feature-text h3 { font-family: 'EB Garamond', Georgia, serif; font-weight: 400; font-size: clamp(2rem, 3.8vw, 3rem); line-height: 1.1; letter-spacing: -0.01em; margin: 0 0 1.1rem; }
.lp-feature-text p { color: color-mix(in srgb, var(--text-light) 58%, transparent); font-family: 'EB Garamond', Georgia, serif; font-size: clamp(1.08rem, 1.8vw, 1.22rem); line-height: 1.68; margin: 0 0 1.5rem; }
.lp-feature-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.55rem; }
.lp-feature-bullets li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.87rem; font-weight: 600; color: color-mix(in srgb, var(--text-light) 70%, transparent); }
.lp-feature-bullets li::before { content: "✦"; color: var(--accent-primary); font-size: 0.6rem; flex: 0 0 auto; margin-top: 0.22rem; opacity: 0.75; }

/* ── FINALE / NEWSLETTER CTA (ported) ───────────────────────────────────── */
.lp-finale { background: #050d18; padding: 5rem 1.5rem 5.5rem; text-align: center; position: relative; overflow: hidden; }
.lp-finale::before {
  content: ""; position: absolute; width: 800px; height: 800px; left: 50%; top: 50%;
  transform: translate(-50%, -50%); pointer-events: none;
  background: radial-gradient(circle at center, rgba(0,179,255,0.1) 0%, rgba(0,179,255,0.03) 40%, transparent 65%);
}
.lp-finale-inner { position: relative; z-index: 1; width: min(620px, 100%); margin: 0 auto; }
.lp-finale .lp-label { color: rgba(0,179,255,0.85); }
.lp-finale .lp-label::before { background: rgba(0,179,255,0.85); }
.lp-finale h2 { font-family: 'EB Garamond', Georgia, serif; font-weight: 400; font-size: clamp(2.6rem, 6.5vw, 4.6rem); line-height: 1.04; letter-spacing: -0.015em; color: #EDE9DF; margin: 0 0 1.1rem; }
.lp-finale h2 em { color: rgba(0,179,255,0.9); font-style: italic; }
.lp-finale-sub { color: rgba(237,233,223,0.52); font-family: 'EB Garamond', Georgia, serif; font-size: clamp(1.1rem, 2vw, 1.24rem); line-height: 1.66; margin: 0 0 3rem; }
.lp-meter-wrap { width: min(380px, 100%); margin: 0 auto 3rem; }
.lp-meter { height: 7px; border-radius: 999px; overflow: hidden; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.1); }
.lp-meter span { display: block; height: 100%; background: var(--accent-primary); border-radius: 999px; transition: width 1s ease; }
.lp-meter-label { display: flex; justify-content: space-between; gap: 1rem; margin-top: 0.55rem; color: rgba(237,233,223,0.38); font-size: 0.73rem; font-weight: 700; }
.lp-divider { display: flex; align-items: center; gap: 0.9rem; margin: 1.75rem 0; color: rgba(237,233,223,0.3); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; }
.lp-divider::before, .lp-divider::after { content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.1); }
.lp-nl-form { display: flex; gap: 0.6rem; }
.lp-nl-input { flex: 1; min-height: 52px; padding: 0 1.1rem; border-radius: 10px; border: 1.5px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.07); color: #EDE9DF; font-family: 'Inter', sans-serif; font-size: 0.93rem; outline: none; transition: border-color 0.16s; }
.lp-nl-input:focus { border-color: rgba(0,179,255,0.6); }
.lp-nl-input::placeholder { color: rgba(237,233,223,0.3); }
.lp-nl-btn { min-height: 52px; padding: 0 1.5rem; border-radius: 10px; background: var(--accent-primary); color: var(--btn-on-accent); border: 1px solid var(--accent-primary); font-family: 'Inter', sans-serif; font-size: 0.93rem; font-weight: 800; cursor: pointer; white-space: nowrap; transition: opacity 0.15s, transform 0.15s; }
.lp-nl-btn:hover { opacity: 0.88; transform: translateY(-1px); }
.lp-nl-btn:disabled { opacity: 0.55; cursor: default; transform: none; }
.lp-finale-cta { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; padding: 0 2.1rem; border-radius: 10px; font-size: 1rem; font-weight: 800; text-decoration: none; white-space: nowrap; background: var(--accent-primary); color: var(--btn-on-accent); border: 1px solid var(--accent-primary); box-shadow: 0 6px 28px color-mix(in srgb, var(--accent-primary) 22%, transparent); transition: transform 0.16s ease, box-shadow 0.16s ease, opacity 0.16s; }
.lp-finale-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 40px color-mix(in srgb, var(--accent-primary) 32%, transparent); opacity: 0.92; }
.lp-finale-note { margin-top: 1.1rem; color: rgba(237,233,223,0.32); font-size: 0.79rem; font-weight: 500; }
.lp-finale-note a { color: rgba(0,179,255,0.8); text-decoration: none; }
.lp-finale-note a:hover { color: rgba(0,179,255,1); text-decoration: underline; }
.lp-nl-success { text-align: center; padding: 0.5rem 0; animation: lp-up 0.45s ease both; }
.lp-nl-success-icon { font-size: 2.6rem; line-height: 1; margin-bottom: 1.1rem; display: block; color: #EDE9DF; }
.lp-nl-success h3 { font-family: 'EB Garamond', Georgia, serif; font-weight: 400; font-size: clamp(1.8rem, 4vw, 2.8rem); line-height: 1.1; color: #EDE9DF; margin: 0 0 0.85rem; }
.lp-nl-success-body { font-family: 'EB Garamond', Georgia, serif; font-size: clamp(1.05rem, 2vw, 1.2rem); line-height: 1.68; color: rgba(237,233,223,0.55); margin: 0 0 0.5rem; }
.lp-nl-success-body strong { color: rgba(0,179,255,0.85); font-weight: 600; }
.lp-nl-success-hint { font-size: 0.8rem; font-weight: 500; color: rgba(237,233,223,0.28); margin: 0; }

/* ── FOOTER ──────────────────────────────────────────────────────────────
   Footer styles now live in includes/lp-foot.php (self-contained, shared by
   every public page). Do not redefine .lp-footer* here. */

/* ── SCROLL REVEAL (ported) ─────────────────────────────────────────────── */
.lp-reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.58s ease, transform 0.58s ease; }
.lp-reveal.is-visible { opacity: 1; transform: none; }
.lp-reveal-d1 { transition-delay: 0.08s; }
.lp-reveal-d2 { transition-delay: 0.18s; }
.lp-reveal-d3 { transition-delay: 0.28s; }
@keyframes lp-up { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* hero entrance */
.v2-hero-head, .v2-hero .lp-intro, .v2-hero-cta, .v2-scrollcue { animation: lp-up 0.7s ease both; }
.v2-hero .lp-intro { animation-delay: 0.12s; }
.v2-hero-cta { animation-delay: 0.22s; }
.v2-scrollcue { animation-delay: 0.3s; }

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .lp-feature-panel { grid-template-columns: 1fr; gap: 2.25rem; }
  .lp-fp-flip { direction: ltr; }
}
@media (max-width: 620px) {
  .lp-nl-form { flex-direction: column; }
  .lp-nl-btn { width: 100%; }
}

/* ── MOBILE: reorient the whole demo for a vertical screen ───────────────────
   The app window content is cqi-based (scales with the window), and the sidebar
   is already a vertical icon strip — so we flip the frame + window to portrait
   and let the scenes reflow, instead of shrinking a 16:9 box. */
@media (max-width: 760px) {
  .v2-hero .lp-intro { width: 94vw; }
  .v2-hero .lp-intro-stage { aspect-ratio: 10 / 14; }   /* tall, vertical-native frame */

  /* the app window goes portrait and fills the frame */
  .v2-hero .lpi-window { width: 99%; }
  .v2-hero .tmw { aspect-ratio: 5 / 7; }
  .v2-hero .tmw-top { height: 8cqi; gap: 2.4cqi; padding: 0 3.4cqi; }
  .v2-hero .tmw-logo { width: 4cqi; height: 4cqi; }
  .v2-hero .tmw-crumb { font-size: 2.7cqi; gap: 1.6cqi; }
  .v2-hero .tmw-top-search { display: none; }            /* no room on a phone */
  .v2-hero .tmw-side { width: 11cqi; padding: 3.4cqi 0; gap: 2.4cqi; }
  .v2-hero .tmw-nav-item, .v2-hero .tmw-nav-ind { width: 7.2cqi; height: 7.2cqi; }
  .v2-hero .tmw-nav-item .ic, .v2-hero .tmw-nav-logo svg { width: 4.6cqi; height: 4.6cqi; }

  /* captions: large + in the lower band */
  .v2-hero .lp-cap-line { font-size: 4.4cqi; line-height: 1.3; }
  .v2-hero .lp-intro-caps { bottom: 4.5%; padding: 0 6%; }

  /* touch-sized controls */
  .v2-hero .lp-intro-toggle, .v2-hero .lp-intro-cc, .v2-hero .lp-intro-sound {
    width: 8.4cqi; height: 8.4cqi; min-width: 38px; min-height: 38px;
  }
  .v2-hero .lp-intro-bar { right: 3cqi; bottom: 3.4cqi; gap: 2.6cqi; }
  .v2-hero .lp-intro-scrub { height: 1cqi; }

  /* end card scaled up for the portrait frame */
  .v2-hero .lpi-close .lpi-mark { width: 26cqi; height: 26cqi; }
  .v2-hero .lpi-wordmark { font-size: 10cqi; margin-top: 4cqi; }
  .v2-hero .lpi-tagline { font-size: 4cqi; }
  .v2-hero .lpi-close-btn { font-size: 3.6cqi; padding: 2.8cqi 6.4cqi; margin-top: 3cqi; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-reveal, .v2-hero-head, .v2-hero .lp-intro, .v2-hero-cta, .v2-scrollcue { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}

/* ── RESOLVED HERO ───────────────────────────────────────────────────────────
   When the intro ends the video fades and the hero settles into a real split
   landing layout (value copy + a Start-free card); one replay icon re-runs it. */
.v2-hero .v2-resolved {
  position: absolute; inset: 0; z-index: 3;
  display: flex; flex-direction: column;
  padding: clamp(5rem, 10vh, 7.5rem) clamp(1.5rem, 5vw, 5rem) clamp(1.6rem, 4vh, 2.6rem);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .7s ease, visibility 0s linear .7s;
}
/* revealed when the engine sets .is-ended — via the mirrored class OR :has() (no-JS fallback) */
.v2-hero.intro-ended .v2-resolved,
.v2-hero:has(.lp-intro.is-ended) .v2-resolved {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity .7s ease, visibility 0s;
}
/* choreographed "land into the hero": the video recedes & fades, then the copy glides in
   from the left and the card deals in from the right (scale + glow bloom); controls settle last */
.v2r-copy { transform: translateX(-2.6rem); transition: transform .95s cubic-bezier(.2,.9,.3,1); }
.v2r-card { transform: translateX(2.8rem) scale(.92); transition: transform .95s cubic-bezier(.2,.9,.3,1); }
.v2r-card-glow { opacity: 0; transition: opacity 1.1s ease; }
.v2r-foot { opacity: 0; transition: opacity .7s ease; }
.v2-hero.intro-ended .v2r-copy,
.v2-hero:has(.lp-intro.is-ended) .v2r-copy { transform: none; transition-delay: .2s; }
.v2-hero.intro-ended .v2r-card,
.v2-hero:has(.lp-intro.is-ended) .v2r-card { transform: none; transition-delay: .36s; }
.v2-hero.intro-ended .v2r-card-glow,
.v2-hero:has(.lp-intro.is-ended) .v2r-card-glow { opacity: 1; transition-delay: .45s; }
.v2-hero.intro-ended .v2r-foot,
.v2-hero:has(.lp-intro.is-ended) .v2r-foot { opacity: 1; transition-delay: .5s; }
.v2-hero.intro-ended .lp-intro,
.v2-hero:has(.lp-intro.is-ended) .lp-intro { opacity: 0; pointer-events: none; animation: none; transform: translateY(-2.5%) scale(.955); transition: opacity .5s ease, transform .85s cubic-bezier(.38,.02,.24,1); }
.v2-hero.intro-ended .v2-scrollcue,
.v2-hero:has(.lp-intro.is-ended) .v2-scrollcue { opacity: 0; pointer-events: none; animation: none; }

.v2r-inner {
  flex: 1; width: 100%; max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 5rem);
  align-items: center;
}
.v2r-copy { text-align: left; }
.v2r-pill {
  display: inline-flex; align-items: center; gap: 0.55rem;
  font-family: 'Inter', sans-serif; font-size: 0.72rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase; color: #7fcaff;
  border: 1px solid rgba(0,179,255,0.32); border-radius: 999px;
  padding: 0.45rem 0.95rem; margin-bottom: 1.6rem; background: rgba(0,179,255,0.06);
}
.v2r-dot { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #35d07f; box-shadow: 0 0 8px rgba(53,208,127,0.8); }
.v2r-head {
  font-family: 'EB Garamond', Georgia, serif; font-weight: 400;
  font-size: clamp(2.4rem, 5.4vw, 4.4rem); line-height: 1.02; letter-spacing: -0.02em;
  margin: 0; color: #F3EFE6;
}
.v2r-head em { font-style: italic; color: var(--accent-primary, #00B3FF); }
.v2r-sub {
  margin: 1.2rem 0 0; max-width: 30rem;
  font-family: 'EB Garamond', Georgia, serif; font-size: clamp(1.05rem, 2vw, 1.32rem);
  line-height: 1.5; color: rgba(237,233,223,0.64);
}
.v2r-trust {
  margin: 1.5rem 0 0; display: inline-flex; align-items: center; gap: 0.5rem;
  font-family: 'Inter', sans-serif; font-size: 0.86rem; color: rgba(237,233,223,0.5);
}
.v2r-check { color: #35d07f; font-weight: 700; }

/* the featured Start-free card */
.v2r-card {
  position: relative; justify-self: end; width: min(360px, 100%);
  background: linear-gradient(160deg, #0d2d52 0%, #0a2240 70%, #091c34 100%);
  border: 1px solid rgba(0,179,255,0.5); border-radius: 18px;
  padding: 1.9rem 1.8rem 1.7rem;
  box-shadow: 0 0 0 1px rgba(0,179,255,0.18), 0 24px 70px -20px rgba(0,179,255,0.4);
}
.v2r-card-glow {
  position: absolute; inset: -1px; border-radius: 18px; pointer-events: none; z-index: 0;
  background: radial-gradient(120% 80% at 50% 0%, rgba(0,179,255,0.16), transparent 60%);
}
.v2r-card > *:not(.v2r-card-glow) { position: relative; z-index: 1; }
.v2r-card-eyebrow {
  display: inline-block; font-family: 'Inter', sans-serif; font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.16em; text-transform: uppercase; color: #7fcaff;
}
.v2r-card-name { font-family: 'EB Garamond', Georgia, serif; font-size: 2rem; color: #F3EFE6; margin-top: 0.2rem; }
.v2r-card-price { display: flex; align-items: baseline; gap: 0.5rem; margin: 0.3rem 0 1.2rem; }
.v2r-amt { font-family: 'Inter', sans-serif; font-size: 2.6rem; font-weight: 800; color: #fff; line-height: 1; }
.v2r-per { font-family: 'Inter', sans-serif; font-size: 0.9rem; color: rgba(237,233,223,0.5); }
.v2r-card-cta {
  display: block; text-align: center; text-decoration: none;
  font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1rem;
  color: #08121d; background: var(--accent-primary, #00B3FF);
  border-radius: 999px; padding: 0.85rem 1rem;
  box-shadow: 0 10px 30px -8px rgba(0,179,255,0.6); transition: transform .15s ease, box-shadow .15s ease;
}
.v2r-card-cta:hover { transform: translateY(-1.5px); box-shadow: 0 16px 40px -8px rgba(0,179,255,0.7); }
.v2r-card-seats { text-align: center; margin-top: 0.7rem; font-family: 'Inter', sans-serif; font-size: 0.78rem; color: rgba(127,202,255,0.85); }
.v2r-card-divider { height: 1px; background: rgba(255,255,255,0.1); margin: 1.3rem 0 1.1rem; }
.v2r-card-feats { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; }
.v2r-card-feats li { display: flex; align-items: center; gap: 0.6rem; font-family: 'Inter', sans-serif; font-size: 0.92rem; color: rgba(237,233,223,0.82); }
.v2r-feat-ic { color: #35d07f; font-weight: 700; flex: 0 0 auto; }
.v2r-card-all { display: inline-block; margin-top: 1.2rem; font-family: 'Inter', sans-serif; font-size: 0.84rem; color: #7fcaff; text-decoration: none; }
.v2r-card-all:hover { color: #aedcff; }

.v2r-foot { position: relative; display: flex; align-items: center; justify-content: center; margin-top: 1rem; }
.v2-replay {
  position: absolute; right: 0; bottom: 0; width: 3rem; height: 3rem; border-radius: 50%;
  display: grid; place-items: center; color: #EDE9DF; text-decoration: none;
  background: rgba(10,18,30,0.5); border: 1px solid rgba(255,255,255,0.14);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px);
  transition: background .15s ease, transform .25s ease;
}
.v2-replay:hover { background: rgba(22,34,50,0.72); transform: rotate(-40deg); }
.v2-replay svg { width: 48%; height: 48%; }
.v2r-scrollcue { font-family: 'Inter', sans-serif; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(237,233,223,0.4); }

@media (max-width: 860px) {
  .v2-hero .v2-resolved { overflow-y: auto; padding-top: clamp(4.5rem, 8vh, 6rem); padding-bottom: 1.4rem; }
  .v2r-inner { grid-template-columns: 1fr; gap: 1.6rem; justify-items: center; text-align: center; align-content: center; }
  .v2r-copy { text-align: center; }
  .v2r-sub { margin-left: auto; margin-right: auto; }
  .v2r-pill { margin-bottom: 1.1rem; }
  .v2r-card { justify-self: center; }
  .v2r-foot { margin-top: 1.2rem; }
}
@media (prefers-reduced-motion: reduce) {
  .v2-hero .v2-resolved { transition: opacity .2s ease !important; }
  .v2r-copy, .v2r-card { transform: none !important; transition: none !important; }
  .v2r-card-glow, .v2r-foot { opacity: 1 !important; transition: none !important; }
  .v2-hero.intro-ended .lp-intro, .v2-hero:has(.lp-intro.is-ended) .lp-intro { transform: none !important; }
}

/* ── POSTER (unplayed state) ─────────────────────────────────────────────────
   A finished-looking hero with a mysterious "press play" panel where the Start-free
   card will later land. Replaces the bare play button; hides once playback starts. */
.v2-hero .lp-intro-poster { display: none; }   /* the engine's bare overlay — replaced by .v2-poster */
.v2-hero .v2-poster {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column;
  padding: clamp(5rem, 10vh, 7.5rem) clamp(1.5rem, 5vw, 5rem) clamp(1.6rem, 4vh, 2.6rem);
  transition: opacity .5s ease, transform .5s ease;
}
.v2-hero:has(.lp-intro.is-playing) .v2-poster,
.v2-hero:has(.lp-intro.is-ended) .v2-poster {
  opacity: 0; visibility: hidden; pointer-events: none; transform: scale(1.015);
  transition: opacity .5s ease, transform .5s ease, visibility 0s linear .5s;
}
.v2p-inner {
  flex: 1; width: 100%; max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
.v2p-copy { text-align: left; }
.v2p-play {
  position: relative; justify-self: end; width: min(360px, 100%);
  display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
  padding: 2.8rem 1.8rem; border-radius: 18px; cursor: pointer; overflow: hidden;
  -webkit-appearance: none; appearance: none; text-align: center;
  background: linear-gradient(160deg, rgba(13,45,82,0.5), rgba(9,28,52,0.62));
  border: 1px solid rgba(0,179,255,0.26);
  box-shadow: 0 24px 70px -26px rgba(0,179,255,0.32);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  font-family: 'Inter', sans-serif; color: #EDE9DF;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.v2p-play:hover { transform: translateY(-3px); border-color: rgba(0,179,255,0.5); box-shadow: 0 32px 84px -26px rgba(0,179,255,0.5); }
.v2p-play-glow { position: absolute; left: 0; right: 0; top: -25%; height: 75%; pointer-events: none;
  background: radial-gradient(55% 60% at 50% 0%, rgba(0,179,255,0.22), transparent 70%); }
.v2p-play-ring {
  position: relative; width: 5.2rem; height: 5.2rem; border-radius: 50%;
  display: grid; place-items: center; color: #08121d;
  background: var(--accent-primary, #00B3FF);
  box-shadow: 0 0 0 0.55rem rgba(0,179,255,0.12), 0 12px 36px -8px rgba(0,179,255,0.65);
  animation: v2p-pulse 2.8s ease-in-out infinite;
}
.v2p-play-ring svg { width: 44%; height: 44%; margin-left: 8%; }
@keyframes v2p-pulse {
  0%,100% { box-shadow: 0 0 0 0.5rem rgba(0,179,255,0.12), 0 12px 36px -8px rgba(0,179,255,0.6); }
  50%     { box-shadow: 0 0 0 0.95rem rgba(0,179,255,0.04), 0 16px 46px -8px rgba(0,179,255,0.9); }
}
.v2p-play-label { position: relative; font-size: 1.08rem; font-weight: 700; }
.v2p-play-sub   { position: relative; font-size: 0.82rem; color: rgba(237,233,223,0.55); }
.v2p-scrollcue  { text-align: center; font-family: 'Inter', sans-serif; font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(237,233,223,0.4); margin-top: 1rem; }
@media (max-width: 860px) {
  .v2-hero .v2-poster { overflow-y: auto; }
  .v2p-inner { grid-template-columns: 1fr; gap: 1.8rem; justify-items: center; text-align: center; align-content: center; }
  .v2p-copy { text-align: center; }
  .v2p-copy .v2r-sub { margin-left: auto; margin-right: auto; }
  .v2p-play { justify-self: center; }
}
@media (prefers-reduced-motion: reduce) {
  .v2p-play-ring { animation: none !important; }
  .v2-hero .v2-poster { transition: opacity .2s ease !important; transform: none !important; }
}