/* PostRocket v2 home: "Dusk to booked" (BRIEF-v2.md). Builds on scrollcraft.css (tokens, reset) and fb.css
   (brand tokens, header, footer, ad mockups, phones). Conversion first: the form lives in the first screen. */

.v2 { --v2-ink-deep: #1d1640; --v2-wrap: 74rem; background: var(--sc-canvas); }

/* ---------------------------------------------------------- header over the dusk video --- */
.v2 .fb-header {
  position: fixed; left: 0; right: 0; top: 0;
  transition: background-color 240ms var(--sc-ease-out), border-color 240ms var(--sc-ease-out);
}
html:not(.fb-menu-open) .v2:not(.v2-solid) .fb-header { background: transparent; border-bottom-color: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
html:not(.fb-menu-open) .v2:not(.v2-solid) .fb-header .fb-logo span,
html:not(.fb-menu-open) .v2:not(.v2-solid) .fb-header__nav a:not(.fb-btn) { color: #fff; }
html:not(.fb-menu-open) .v2:not(.v2-solid) .fb-header .fb-logo__body { fill: var(--pr-lav); }
html:not(.fb-menu-open) .v2:not(.v2-solid) .fb-header .fb-logo__fins { fill: var(--pr-coral); }
html:not(.fb-menu-open) .v2:not(.v2-solid) .fb-menu { background: rgb(255 255 255 / 0.12); color: #fff; border-color: rgb(255 255 255 / 0.32); }

/* ------------------------------------------------------------------------- shared ------- */
.v2-wrap { max-width: var(--v2-wrap); margin: 0 auto; padding: 0 var(--sc-gutter); }
.v2-eyebrow { margin: 0 0 0.8rem; font: 800 0.75rem/1.2 var(--sc-font-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pr-purple-strong); }
.v2-h1 { margin: 0; font: 800 clamp(2.7rem, 1.3rem + 4.6vw, 5.8rem)/0.98 var(--sc-font-display); letter-spacing: -0.035em; color: #fff; text-wrap: balance; }
.v2-h2 { margin: 0; font: 800 clamp(2rem, 1.2rem + 2.8vw, 3.8rem)/1.02 var(--sc-font-display); letter-spacing: -0.03em; color: var(--pr-ink); text-wrap: balance; }
.v2-line { display: block; }
.v2-accent { color: var(--pr-lav); }
.v2-accent-ink { color: var(--pr-purple-strong); }
.v2-label { display: inline-block; margin: 0; padding: 0.38rem 0.85rem 0.34rem; border-radius: 999px; background: var(--pr-butter); color: var(--pr-ink); font: 800 0.75rem/1.2 var(--sc-font-text); white-space: nowrap; }
.v2-link { color: var(--pr-purple-strong); font-weight: 800; }

/* the dusk scenes: poster first, video fades in over it */
.v2-media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--v2-ink-deep); }
.v2-media__poster, .v2-media__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%; }
.v2-media__video { opacity: 0; transition: opacity 700ms ease; }
.v2-media__video.is-playing { opacity: 1; }
.v2-media__shade { position: absolute; inset: 0; }

/* ------------------------------------------------------------------------ 1 · hero ------ */
.v2-hero { position: relative; isolation: isolate; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; color: #fff; }
.v2-hero .v2-media__shade {
  background:
    linear-gradient(180deg, rgb(20 15 50 / 0.6) 0%, rgb(20 15 50 / 0) 20%),
    linear-gradient(90deg, rgb(29 22 64 / 0.95) 0%, rgb(29 22 64 / 0.84) 34%, rgb(29 22 64 / 0.38) 62%, rgb(29 22 64 / 0.06) 82%),
    linear-gradient(180deg, rgb(29 22 64 / 0) 78%, rgb(29 22 64 / 0.5) 100%);
}
.v2-hero__inner {
  width: 100%; max-width: 80rem; margin: 0 auto;
  padding: calc(var(--fb-header-h) + 2.5rem) var(--sc-gutter) 3.5rem;
  display: grid; grid-template-columns: minmax(0, 35rem) minmax(0, 1fr); gap: 3rem; align-items: center;
}
.v2-kicker {
  display: inline-flex; align-items: center; gap: 0.5em; margin: 0 0 1rem; padding: 0.45em 0.95em 0.4em;
  border-radius: 999px; background: rgb(255 255 255 / 0.1); border: 1px solid rgb(255 255 255 / 0.22);
  font: 800 0.72rem/1.2 var(--sc-font-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pr-lav);
}
.v2-kicker span { color: var(--pr-mint); }
.v2-hero__sub { margin: 1.1rem 0 1.5rem; max-width: 34ch; font: 600 clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem)/1.5 var(--sc-font-text); color: var(--pr-lavText, #e4dcff); }
.v2-hero__sub b { color: #fff; }
.v2-trust { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem 1.3rem; margin: 1.1rem 0 0; padding: 0; font: 700 0.92rem/1.3 var(--sc-font-text); color: #e4dcff; }
.v2-trust li { display: inline-flex; align-items: center; gap: 0.45rem; }
.v2-trust li::before { content: "\2713"; display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--pr-mint); color: var(--pr-ink); font-size: 0.72rem; font-weight: 900; }

/* the 3 example ads, floating at 3 depths (pointer moves them on desktop) */
/* a diagonal cascade: each card covers only the photo corner of the one before, so every headline reads */
.v2-cards { position: relative; width: 100%; max-width: 34rem; justify-self: end; height: min(34rem, 70svh); }
.v2-card {
  position: absolute; margin: 0; width: 41%;
  transform: translate3d(calc(var(--mx, 0) * var(--d, 1) * 16px), calc(var(--my, 0) * var(--d, 1) * 16px), 0) rotate(var(--r, 0deg));
}
.v2-card img { width: 100%; height: auto; border-radius: 18px; box-shadow: 0 0 0 4px rgb(255 255 255 / 0.92), 0 34px 60px -22px rgb(10 6 30 / 0.75); }
.v2-card figcaption {
  position: absolute; top: -0.8rem; left: -0.6rem; display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.36rem 0.75rem 0.32rem;
  border-radius: 999px; background: var(--pr-butter); color: var(--pr-ink); font: 800 0.74rem/1 var(--sc-font-text); letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: 0 8px 18px -8px rgb(10 6 30 / 0.6);
}
.v2-card figcaption b { font-family: var(--sc-font-display); }
.v2-card--pain  { left: 0;     top: 2%;  z-index: 1; --r: -4deg; --d: 0.6; }
.v2-card--proof { left: 29.5%; top: 18%; z-index: 2; --r: 0deg;  --d: 0.8; }
.v2-card--offer { left: 59%;   top: 34%; z-index: 3; --r: 4deg;  --d: 1; }
.v2-cards .v2-label { position: absolute; left: 0; bottom: 0; }

/* -------------------------------------------------------------------------- the form ---- */
.v2-form { display: grid; gap: 0.9rem; max-width: 35rem; }
.v2-form__step1, .v2-form__step2 { display: grid; gap: 0.9rem; }
.v2-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.v2-field { display: grid; gap: 0.35rem; min-width: 0; margin: 0; }
.v2-field > span, .v2-choice legend { font: 800 0.72rem/1.2 var(--sc-font-text); letter-spacing: 0.08em; text-transform: uppercase; color: #d9d2f5; padding: 0; }
.v2-field > span small { text-transform: none; letter-spacing: 0; font-weight: 700; color: #b9b3dd; }
.v2-field input {
  width: 100%; min-height: 3.25rem; padding: 0 1rem; border-radius: 14px;
  border: 1.5px solid rgb(255 255 255 / 0.4); background: #fff; color: var(--pr-ink); font-size: 1rem;
}
.v2-field input::placeholder { color: #7d7ba3; }
.v2-field input:focus-visible { outline: 3px solid var(--pr-lav); outline-offset: 2px; }
.v2-field input[aria-invalid="true"] { border-color: #ff8a80; box-shadow: 0 0 0 3px rgb(255 138 128 / 0.4); }
.v2-form__go { min-height: 3.6rem; font-size: 1.15rem; }
.v2-form .fb-form__status { color: #fff; }
.v2-form .fb-form__status.is-error { color: #ffc4bd; }
.v2-form__fine { margin: 0; font-size: 0.78rem; line-height: 1.5; color: #b9b3dd; }
.v2-form__fine a { color: #fff; }
.v2-form__nice { margin: 0; font: 800 1.1rem/1.35 var(--sc-font-display); color: #fff; outline: none; }
.v2-form__nice small { font: 600 0.9rem var(--sc-font-text); color: #b9b3dd; }
.v2-choice { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0; padding: 0; border: 0; min-width: 0; }
.v2-choice legend { width: 100%; margin-bottom: 0.45rem; }
.v2-choice label { position: relative; }
.v2-choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.v2-choice span {
  display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1.05rem; border-radius: 999px;
  border: 1.5px solid rgb(255 255 255 / 0.38); color: #fff; font: 800 0.95rem/1 var(--sc-font-text);
  transition: background-color 160ms var(--sc-ease-out), color 160ms var(--sc-ease-out);
}
.v2-choice input:checked + span { background: var(--pr-lav); border-color: var(--pr-lav); color: var(--pr-ink); }
.v2-choice input:focus-visible + span { outline: 3px solid var(--pr-lav); outline-offset: 2px; }
.v2-check { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.92rem; line-height: 1.4; color: #e4dcff; cursor: pointer; }
.v2-check input { flex: none; width: 1.15rem; height: 1.15rem; margin: 0.12rem 0 0; accent-color: var(--pr-lav); }
.v2-form__send { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1.3rem; }
.v2-skip { padding: 0.6rem 0; border: 0; background: none; color: #fff; font: 800 1rem/1 var(--sc-font-text); text-decoration: underline; text-underline-offset: 0.25em; cursor: pointer; }
.v2-form .cf-turnstile { min-height: 0; }
/* two steps once JavaScript runs; without it, everything shows and posts in one go */
.v2-js .v2-form__step2 { display: none; }
.v2-js .v2-form.is-step2 .v2-form__step2 { display: grid; animation: v2-rise 380ms var(--sc-ease-out) both; }
.v2-js .v2-form.is-step2 .v2-form__go { display: none; }
.v2-js .v2-form.is-step2 .v2-form__row:first-child input { background: rgb(255 255 255 / 0.9); }

/* -------------------------------------------------------------------- pinned scenes ----- */
.v2-pin { position: relative; height: var(--v2-len, 240svh); }
.v2-pin__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

/* 2 · before / after */
.v2-ba { --v2-len: 230svh; background: var(--sc-canvas); }
.v2 .v2-ba .v2-pin__stage {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 23rem); grid-template-rows: none; gap: 4rem; align-items: center;
  max-width: 70rem; margin: 0 auto; padding: calc(var(--fb-header-h) + 1.5rem) var(--sc-gutter) 2rem;
}
.v2-ba__list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 0.3rem; }
.v2-ba__list li { padding: 0.75rem 1rem; border-radius: 14px; color: var(--pr-muted); font: 600 1.05rem/1.4 var(--sc-font-text); transition: background-color 220ms var(--sc-ease-out), color 220ms var(--sc-ease-out), box-shadow 220ms var(--sc-ease-out); }
.v2-ba__list li b { display: inline-block; min-width: 4.8rem; font: 800 0.78rem/1 var(--sc-font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--pr-faint); }
.v2-ba__list li.is-on { background: #fff; color: var(--pr-ink); box-shadow: var(--fb-clay); }
.v2-ba__list li.is-on b { color: var(--pr-purple-strong); }
.v2-ba__list li.is-done b { color: #2f9e78; }
.v2-ba__now { display: none; }
.v2-ba__frame { position: relative; width: min(21rem, 100%); justify-self: center; }
.v2-ba__ad { width: 100%; }
.v2-ba__ad .fb-post__text { min-height: 4.2em; }
.v2-ba__ad--new { position: absolute; inset: 0; clip-path: inset(0 calc(100% - var(--v2-wipe, 0%)) 0 0); }
.v2-ba__edge {
  position: absolute; top: -1rem; bottom: -1rem; left: var(--v2-wipe, 0%); width: 3px; translate: -1.5px 0; border-radius: 3px;
  background: var(--pr-purple-strong); box-shadow: 0 0 0 5px rgb(106 79 214 / 0.18); opacity: var(--v2-edge, 0);
}
.v2-tag { position: absolute; top: -0.85rem; right: -0.7rem; padding: 0.4rem 0.8rem 0.36rem; border-radius: 999px; font: 800 0.8rem/1 var(--sc-font-text); box-shadow: 0 8px 18px -8px rgb(43 42 94 / 0.5); }
.v2-tag--old { background: var(--pr-coral-tint); color: var(--pr-coral-ink); }
.v2-tag--new { background: var(--pr-mint); color: var(--pr-ink); }
.v2-ba__label { position: absolute; left: 50%; bottom: 1.2rem; translate: -50% 0; }

/* 3 · the feed test */
.v2-feed { --v2-len: 300svh; background: var(--pr-theme); }
.v2-feed .v2-pin__stage { display: grid; align-content: center; justify-items: center; gap: 1.4rem; padding: calc(var(--fb-header-h) + 1rem) 14px 1.5rem; text-align: center; }
.v2-feed__phones { display: flex; justify-content: center; gap: clamp(1rem, 5vw, 5rem); }
.v2-feed__col { display: grid; justify-items: center; gap: 0.7rem; }
.v2-feed__cap { margin: 0; font: 800 0.8rem/1 var(--sc-font-text); letter-spacing: 0.1em; text-transform: uppercase; color: var(--pr-muted); }
.v2-feed__cap--ours { color: var(--pr-purple-strong); }
.v2 .v2-feed .fb-phone { width: min(16rem, 40vw, calc((100svh - 14rem) * 9 / 18.5)); }

/* ----------------------------------------------------------------------- 4 · inbox ------ */
.v2-inbox { padding: clamp(4.5rem, 9vw, 8rem) 0; background: var(--sc-canvas); }
.v2-inbox__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 29rem); gap: 4rem; align-items: start; }
.v2-inbox__copy { position: sticky; top: calc(var(--fb-header-h) + 3rem); }
.v2-ticks { list-style: none; margin: 1.6rem 0 2rem; padding: 0; display: grid; gap: 1rem; max-width: 34rem; }
.v2-ticks li { position: relative; padding-left: 2.1rem; font-size: 1.05rem; line-height: 1.5; color: var(--pr-muted); }
.v2-ticks li b { color: var(--pr-ink); }
.v2-ticks li::before { content: "\2713"; position: absolute; left: 0; top: 0.1rem; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--pr-mint); color: var(--pr-ink); font-size: 0.8rem; font-weight: 900; }
.v2-mail { position: relative; margin: 0; overflow: hidden; border-radius: 22px; background: #fff; border: 1px solid var(--pr-line); box-shadow: 0 4px 10px rgb(43 42 94 / 0.08), 0 40px 80px -30px rgb(43 42 94 / 0.5); }
.v2-mail__bar { display: flex; gap: 6px; padding: 11px 14px; background: var(--pr-lav-tint); }
.v2-mail__bar i { width: 10px; height: 10px; border-radius: 50%; background: #d9cff7; }
.v2-mail__head { padding: 12px 18px; border-bottom: 1px solid var(--pr-line); font: 600 0.85rem/1.45 var(--sc-font-text); color: var(--pr-muted); }
.v2-mail__head b { color: var(--pr-ink); }
.v2-mail__head span { font-weight: 800; font-size: 1rem; color: var(--pr-ink); }
.v2-mail img { display: block; width: 100%; height: auto; }

/* ----------------------------------------------------------------------- 5 · price ------ */
.v2-price { padding: clamp(4.5rem, 9vw, 8rem) 0 clamp(6rem, 12vw, 10rem); background: var(--pr-theme); }
.v2-price__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
.v2-ladder { list-style: none; margin: 1.6rem 0 1rem; padding: 0; display: grid; gap: 0.6rem; max-width: 36rem; }
.v2-ladder li { display: grid; grid-template-columns: 1fr auto; gap: 0.2rem 1rem; padding: 1rem 1.2rem; background: #fff; border: 1px solid var(--pr-line); border-radius: 16px; }
.v2-ladder span { font: 800 1.15rem/1.2 var(--sc-font-display); letter-spacing: -0.015em; }
.v2-ladder b { font: 800 1.35rem/1 var(--sc-font-display); letter-spacing: -0.03em; text-align: right; }
.v2-ladder small { grid-column: 1 / -1; color: var(--pr-muted); font-size: 0.9rem; line-height: 1.4; }
.v2-ladder .is-free { background: var(--pr-lav-tint); border-color: var(--pr-line-strong); }
.v2-ladder .is-free b { color: var(--pr-purple-strong); }
.v2-compare { margin: 0 0 0.6rem; font-size: 0.98rem; line-height: 1.5; color: var(--pr-muted); max-width: 36rem; }
.v2-compare b { color: var(--pr-ink); }
.v2-compare span { display: block; font-size: 0.8rem; }
.v2-faq { padding-top: 2.6rem; }

/* ----------------------------------------------------------------------- 6 · close ------ */
.v2-close { position: relative; isolation: isolate; color: #fff; padding: clamp(7rem, 14vw, 11rem) 0 clamp(4rem, 8vw, 6rem); }
.v2-close .v2-media__shade {
  background: linear-gradient(180deg, var(--pr-theme) 0%, rgb(246 242 255 / 0) 16%, rgb(29 22 64 / 0.35) 32%, rgb(29 22 64 / 0.86) 60%, #2b2a5e 100%);
}
.v2-close__inner { max-width: 40rem; margin: 0 auto; padding: 0 var(--sc-gutter); display: grid; gap: 1.6rem; }
.v2-close__title { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.6rem); }
.v2-close__alt { margin: 0; color: #e4dcff; }
.v2-close__alt a { color: #fff; font-weight: 800; }
.v2 .fb-sitefoot { padding-top: var(--sc-7); }

/* ------------------------------------------------------------------ phone sticky bar --- */
.v2-sticky { display: none; }

/* ------------------------------------------------------------------------- motion ------ */
[data-v2-reveal] { transition: opacity 700ms var(--sc-ease-out), translate 700ms var(--sc-ease-out); }
.v2-js [data-v2-reveal]:not(.is-in) { opacity: 0; translate: 0 32px; }
@keyframes v2-rise { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0 0; } }
@keyframes v2-card-in { from { opacity: 0; scale: 0.9; } to { opacity: 1; scale: 1; } }
@keyframes v2-float { from { translate: 0 0; } to { translate: 0 -10px; } }
@media (prefers-reduced-motion: no-preference) {
  .v2-js .v2-hero .v2-kicker { animation: v2-rise 700ms var(--sc-ease-out) both; }
  .v2-js .v2-hero .v2-line:nth-child(1) { animation: v2-rise 700ms 90ms var(--sc-ease-out) both; }
  .v2-js .v2-hero .v2-line:nth-child(2) { animation: v2-rise 700ms 170ms var(--sc-ease-out) both; }
  .v2-js .v2-hero__sub { animation: v2-rise 700ms 260ms var(--sc-ease-out) both; }
  .v2-js .v2-hero .v2-form, .v2-js .v2-hero .v2-trust { animation: v2-rise 700ms 340ms var(--sc-ease-out) both; }
  .v2-js .v2-card { animation: v2-card-in 900ms 300ms var(--sc-ease-out) both, v2-float 7s 1.2s ease-in-out infinite alternate; }
  .v2-js .v2-card--proof { animation-delay: 420ms, 2s; }
  .v2-js .v2-card--offer { animation-delay: 520ms, 2.6s; }
}

/* ------------------------------------------------------------------------- phones ------ */
@media (max-width: 760px) {
  .v2-hero { display: block; min-height: 0; }
  .v2-hero .v2-media__poster, .v2-hero .v2-media__video { height: 62%; object-position: 50% 40%; }
  .v2-hero .v2-media__shade { background: linear-gradient(180deg, rgb(20 15 50 / 0.45) 0%, rgb(29 22 64 / 0.25) 16%, rgb(29 22 64 / 0.86) 40%, #1d1640 60%); }
  .v2-hero__inner { grid-template-columns: 1fr; gap: 1.6rem; padding: calc(var(--fb-header-h) + 22vh) 14px 1.6rem; }
  .v2-h1 { font-size: clamp(2.5rem, 1.7rem + 4.4vw, 3.3rem); }
  .v2-hero__sub { margin: 0.8rem 0 1.2rem; font-size: 1.02rem; }
  .v2-form__row { grid-template-columns: 1fr; gap: 0.6rem; }
  .v2-form__go { min-height: 3.5rem; }
  .v2-trust { font-size: 0.85rem; gap: 0.35rem 1rem; }
  .v2-cards { height: 21rem; max-width: none; justify-self: stretch; }
  .v2-card { transform: rotate(var(--r, 0deg)); }
  .v2-card figcaption { font-size: 0.66rem; top: -0.6rem; left: -0.35rem; }

  .v2-ba { --v2-len: 200svh; }
  .v2 .v2-ba .v2-pin__stage { grid-template-columns: 1fr; gap: 1rem; align-content: center; padding: calc(var(--fb-header-h) + 0.8rem) 14px 1rem; }
  .v2-ba__copy .v2-h2 { font-size: 1.85rem; }
  .v2-ba__list { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-top: 0.9rem; }
  .v2-ba__list li { padding: 0; font-size: 0; }
  .v2-ba__list li b { min-width: 0; padding: 0.45rem 0.7rem; border-radius: 999px; background: #fff; border: 1px solid var(--pr-line); font-size: 0.72rem; }
  .v2-ba__list li.is-on { background: none; box-shadow: none; }
  .v2-ba__list li.is-on b { background: var(--pr-purple-strong); border-color: var(--pr-purple-strong); color: #fff; }
  .v2-ba__now { display: block; min-height: 2.8em; margin: 0.7rem 0 0; font: 700 1rem/1.4 var(--sc-font-text); color: var(--pr-ink); }
  .v2-ba__frame { width: min(15.5rem, 64vw); }
  .v2-ba__label { bottom: 5.4rem; }
  .v2-ba__frame { width: min(14.5rem, 60vw); }

  .v2-feed { --v2-len: 240svh; }
  .v2-feed__title { font-size: 1.85rem; }
  .v2 .v2-feed .fb-phone { width: min(42vw, calc((100svh - 13rem) * 9 / 18.5)); }

  .v2-inbox__grid, .v2-price__grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .v2-inbox__copy { position: static; }
  .v2-faq { padding-top: 0; }
  .v2-close__inner { padding: 0 14px; }

  .v2-sticky {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: flex; align-items: center; gap: 0.8rem;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: rgb(251 250 255 / 0.95);
    -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--pr-line);
    translate: 0 110%; transition: translate 260ms var(--sc-ease-out);
  }
  .v2-sticky .fb-btn { flex: none; min-height: 2.9rem; padding: 0 1.3rem; font-size: 1rem; }
  .v2-sticky span { font: 700 0.8rem/1.3 var(--sc-font-text); color: var(--pr-muted); }
  .v2.v2-show-sticky .v2-sticky { translate: 0 0; }
}

/* ----------------------------------------------------------------- reduced motion ------- */
@media (prefers-reduced-motion: reduce) {
  .v2-pin { height: auto; }
  .v2-pin__stage { position: relative; height: auto; overflow: visible; padding-block: 5rem 4rem; }
  .v2-ba__frame { width: min(40rem, 100%); display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
  .v2-ba__ad--new { position: relative; clip-path: none; }
  .v2-ba__edge { display: none; }
  .v2-ba__label { position: static; translate: none; justify-self: center; }
  .v2-media__video { display: none; }
  .v2-sticky { transition: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .v2-ba__frame { grid-template-columns: 1fr; width: min(17rem, 100%); }
}
/* short phones: keep the button in the first screen */
@media (max-width: 760px) and (max-height: 720px) {
  .v2-hero__inner { padding-top: calc(var(--fb-header-h) + 7vh); gap: 1.2rem; }
  .v2-hero .v2-media__poster, .v2-hero .v2-media__video { height: 46%; }
  .v2-kicker { display: none; }
  .v2-h1 { font-size: 2.3rem; }
  .v2-hero__sub { margin: 0.5rem 0 0.9rem; font-size: 0.95rem; line-height: 1.42; }
  .v2-form { gap: 0.6rem; }
  .v2-field { gap: 0.2rem; }
  .v2-field input { min-height: 2.9rem; }
  .v2-form__go { min-height: 3.1rem; }
}

/* ---------------------------------------------- hero ads: a slow, tilted 3D carousel (v2.js) ------- */
.v2-cards.is-3d { perspective: 1100px; perspective-origin: 50% 35%; }
.v2-cards.is-3d .v2-card {
  left: 50%; top: 45%; width: clamp(8.2rem, 42%, 15.5rem); translate: -50% -50%;
  cursor: pointer; will-change: transform, filter; transform-origin: 50% 60%;
}
.v2-cards.is-3d .v2-card img { transition: box-shadow 300ms var(--sc-ease-out); }
.v2-cards.is-3d .v2-card.is-focus img { box-shadow: 0 0 0 4px #ffffff, 0 0 0 9px rgb(205 189 246 / 0.35), 0 44px 80px -24px rgb(10 6 30 / 0.85); }
.v2-cards.is-3d .v2-card:focus-visible { outline: none; }
.v2-cards.is-3d .v2-card:focus-visible img { box-shadow: 0 0 0 4px #ffffff, 0 0 0 9px var(--pr-lav); }
.v2-cards.is-3d .v2-label { left: 50%; translate: -50% 0; }
@media (prefers-reduced-motion: no-preference) {
  .v2-js .v2-cards.is-3d .v2-card { animation: v2-card-in 900ms 250ms var(--sc-ease-out) both; }
}
/* medium screens (tablets, small laptops): give the carousel a real column */
@media (min-width: 761px) and (max-width: 1100px) {
  .v2-hero__inner { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: 1.5rem; }
  .v2-cards { height: min(30rem, 62svh); }
}

/* =================================================== inner pages (Examples, Pricing) in the home page style === */
.v2-pagehero { min-height: min(46rem, 90svh); }
.v2-cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.4rem; }
.v2-link-light { color: #fff; font: 800 1rem/1 var(--sc-font-text); text-decoration: underline; text-underline-offset: 0.3em; text-decoration-color: rgb(255 255 255 / 0.5); }
@media (hover: hover) and (pointer: fine) { .v2-link-light:hover { text-decoration-color: var(--pr-lav); } }
.v2-pagehero .v2-trust { margin-top: 1.3rem; }

/* glass price card in the Pricing hero */
.v2-pricecard {
  justify-self: end; width: min(26rem, 100%); padding: 1.5rem 1.5rem 1.3rem; border-radius: 24px;
  background: rgb(29 22 64 / 0.62); border: 1px solid rgb(255 255 255 / 0.18);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 40px 80px -30px rgb(10 6 30 / 0.8);
}
.v2-pricecard__t { margin: 0 0 0.8rem; font: 800 0.75rem/1 var(--sc-font-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pr-lav); }
.v2-pricecard ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.v2-pricecard li { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.75rem 0.2rem; border-bottom: 1px solid rgb(255 255 255 / 0.12); }
.v2-pricecard li span { font: 700 1rem/1.2 var(--sc-font-text); color: #e4dcff; }
.v2-pricecard li b { font: 800 1.45rem/1 var(--sc-font-display); letter-spacing: -0.02em; color: #fff; }
.v2-pricecard li.is-free b { color: var(--pr-mint); }
.v2-pricecard__f { margin: 0.9rem 0 0; font-size: 0.85rem; line-height: 1.45; color: #cfc7f0; }

/* sections */
.v2-sec { padding: clamp(4.5rem, 9vw, 7.5rem) 0; background: var(--sc-canvas); }
.v2-sec--tint { background: var(--pr-theme); }
.v2-chip { display: inline-flex; align-items: center; gap: 0.45em; margin: 0 0 0.8rem; padding: 0.4em 0.85em 0.36em; border-radius: 999px; background: var(--pr-lav-tint); color: var(--pr-ink); font: 800 0.72rem/1.2 var(--sc-font-text); letter-spacing: 0.06em; text-transform: uppercase; }
.v2-chip::before { content: ""; width: 0.45rem; height: 0.45rem; border-radius: 50%; background: var(--pr-purple); }
.v2-fine { margin: 1.6rem 0 0; font-size: 0.85rem; line-height: 1.5; color: var(--pr-muted); max-width: 60ch; }
.v2-ticks--sm { margin: 0; gap: 0.7rem; }
.v2-ticks--sm li { font-size: 0.98rem; padding-left: 1.9rem; }
.v2-ticks--sm li::before { width: 1.25rem; height: 1.25rem; font-size: 0.72rem; }

/* Examples: gallery */
.v2-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem; margin-top: 2.2rem; }
.v2-ex {
  display: grid; grid-template-columns: minmax(0, 14.5rem) minmax(0, 1fr); gap: 1.6rem; align-items: center;
  padding: 1.4rem; background: #fff; border: 1px solid var(--pr-line); border-radius: 26px; box-shadow: var(--fb-clay);
  transition: translate 300ms var(--sc-ease-out), box-shadow 300ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .v2-ex:hover { translate: 0 -4px; box-shadow: 0 1px 0 rgb(255 255 255 / 0.7) inset, 0 26px 50px -24px rgb(43 42 94 / 0.45); } }
.v2-ex__ad .fb-post--card { width: 100%; }
.v2-ex__title { margin: 0 0 0.9rem; font: 800 clamp(1.25rem, 1rem + 0.7vw, 1.6rem)/1.1 var(--sc-font-display); letter-spacing: -0.02em; color: var(--pr-ink); }

/* Examples: what we fix */
.v2-fixes { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1rem; margin-top: 2.2rem; }
.v2-fix { display: grid; align-content: start; gap: 0.7rem; padding: 1.2rem; background: #fff; border: 1px solid var(--pr-line); border-radius: 20px; }
.v2-fix__tag { margin: 0; font: 800 1.15rem/1 var(--sc-font-display); letter-spacing: -0.01em; color: var(--pr-purple-strong); }
.v2-fix p { margin: 0; font-size: 0.95rem; line-height: 1.45; }
.v2-fix span { display: block; margin-bottom: 0.25rem; font: 800 0.68rem/1.2 var(--sc-font-text); letter-spacing: 0.1em; text-transform: uppercase; }
.v2-fix__before { color: var(--pr-muted); }
.v2-fix__before span { color: var(--pr-coral-ink); }
.v2-fix__after { padding-top: 0.7rem; border-top: 1px dashed var(--pr-line-strong); font-weight: 700; color: var(--pr-ink); }
.v2-fix__after span { color: #1f7a5c; }

/* Examples: landing page note */
.v2-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2.2rem; }
.v2-note { padding: 1.4rem; background: var(--pr-lav-tint); border-radius: 20px; }
.v2-note__t { margin: 0 0 0.5rem; font: 800 1.25rem/1.1 var(--sc-font-display); color: var(--pr-ink); }
.v2-note p:last-child { margin: 0; color: var(--pr-muted); line-height: 1.55; }

/* Pricing: plans */
.v2-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin-top: 2.2rem; align-items: stretch; }
.v2-tier {
  display: grid; grid-template-rows: auto auto auto auto 1fr auto auto; gap: 0.5rem; padding: 1.5rem 1.4rem 1.4rem;
  background: #fff; border: 1px solid var(--pr-line); border-radius: 26px; box-shadow: var(--fb-clay);
  transition: translate 300ms var(--sc-ease-out), box-shadow 300ms var(--sc-ease-out);
}
@media (hover: hover) and (pointer: fine) { .v2-tier:hover { translate: 0 -4px; box-shadow: 0 1px 0 rgb(255 255 255 / 0.7) inset, 0 26px 50px -24px rgb(43 42 94 / 0.45); } }
.v2-tier.is-free { background: linear-gradient(180deg, #2e2560, #3a2f7a); border-color: #4a3f8f; color: #fff; }
.v2-tier__badge { justify-self: start; margin: 0 0 0.3rem; padding: 0.38em 0.8em 0.34em; border-radius: 999px; background: var(--pr-butter); color: var(--pr-ink); font: 800 0.7rem/1.2 var(--sc-font-text); }
.v2-tier__badge--free { background: var(--pr-mint); }
.v2-tier__name { margin: 0; font: 800 1.3rem/1.1 var(--sc-font-display); letter-spacing: -0.02em; color: inherit; }
.v2-tier__price { margin: 0; font: 800 2.4rem/1 var(--sc-font-display); letter-spacing: -0.04em; color: var(--pr-purple-strong); }
.v2-tier.is-free .v2-tier__price { color: var(--pr-mint); }
.v2-tier__sub { margin: 0 0 0.6rem; font-size: 0.88rem; line-height: 1.4; color: var(--pr-muted); }
.v2-tier.is-free .v2-tier__sub, .v2-tier.is-free .v2-tier__best, .v2-tier.is-free .v2-ticks li { color: #e4dcff; }
.v2-tier.is-free .v2-ticks li b { color: #fff; }
.v2-tier__best { margin: 0.6rem 0 0; padding-top: 0.8rem; border-top: 1px solid var(--pr-line); font-size: 0.9rem; line-height: 1.45; color: var(--pr-muted); }
.v2-tier.is-free .v2-tier__best { border-top-color: rgb(255 255 255 / 0.16); }
.v2-tier__best b { color: inherit; }
.v2-tier__note { margin: 0.4rem 0 0; font-size: 0.82rem; line-height: 1.4; color: var(--pr-muted); }
.v2-tier .fb-btn { margin-top: 0.6rem; }

/* Pricing: the usual way vs ours */
.v2-vs { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1rem; margin-top: 2.2rem; }
.v2-vs > article { padding: 1.8rem; border-radius: 26px; }
.v2-vs__usual { background: #fff; border: 1px solid var(--pr-line); }
.v2-vs__ours { background: linear-gradient(180deg, #2e2560, #3a2f7a); color: #fff; }
.v2-vs__label { margin: 0 0 0.8rem; font: 800 0.75rem/1 var(--sc-font-text); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pr-muted); }
.v2-vs__ours .v2-vs__label { color: var(--pr-lav); }
.v2-vs__n { margin: 0; font: 800 clamp(2rem, 1.4rem + 2vw, 3rem)/1 var(--sc-font-display); letter-spacing: -0.035em; color: var(--pr-muted); }
.v2-vs__usual p:not(.v2-vs__label):not(.v2-vs__n):not(.v2-fine) { margin: 0.6rem 0 0; color: var(--pr-ink); }
.v2-vs__ours .v2-ticks { margin: 0; }
.v2-vs__ours .v2-ticks li { color: #fff; }

/* Pricing: steps */
.v2-steps { list-style: none; counter-reset: s; margin: 2.2rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.v2-steps li { counter-increment: s; position: relative; padding: 3.6rem 1.3rem 1.3rem; background: #fff; border: 1px solid var(--pr-line); border-radius: 22px; color: var(--pr-muted); line-height: 1.5; }
.v2-steps li::before { content: counter(s); position: absolute; left: 1.3rem; top: 1.2rem; width: 1.9rem; height: 1.9rem; display: grid; place-items: center; border-radius: 50%; background: var(--pr-lav-tint); color: var(--pr-purple-strong); font: 800 1rem/1 var(--sc-font-display); }
.v2-steps li b { color: var(--pr-ink); }

/* Pricing: questions */
.v2-faqwrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: 3rem; align-items: start; }
.v2-faq__aside { margin: 1rem 0 0; color: var(--pr-muted); line-height: 1.5; }

/* closing scene lede */
.v2-close__lede { margin: -0.6rem 0 0; max-width: 40ch; font-size: 1.05rem; line-height: 1.5; color: #e4dcff; }

@media (max-width: 1100px) {
  .v2-tiers { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-fixes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-gallery { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .v2-pagehero { min-height: 0; }
  .v2-pricecard { justify-self: stretch; width: 100%; }
  .v2-ex { grid-template-columns: 1fr; justify-items: center; padding: 1.2rem 1rem; }
  .v2-ex__ad { width: min(17rem, 100%); }
  .v2-ex__body { width: 100%; }
  .v2-tiers, .v2-fixes, .v2-notes, .v2-steps, .v2-vs, .v2-faqwrap { grid-template-columns: 1fr; }
  .v2-faqwrap { gap: 1.2rem; }
  .v2-wrap { padding: 0 14px; }
}
@media (max-width: 760px) {
  .v2-ex .fb-post--card { width: 100%; font-size: 0.82rem; }
  .v2-ex .fb-post--card .fb-post__head { padding: var(--sc-3) var(--sc-3) var(--sc-2); }
  .v2-ex .fb-post--card .fb-post__head b, .v2-ex .fb-post--card .fb-post__head small { font-size: 0.8rem; }
  .v2-ex .fb-post--card .fb-avatar { width: 2.1rem; height: 2.1rem; font-size: 1rem; }
  .v2-ex .fb-post--card .fb-post__text { padding: 0 var(--sc-3) var(--sc-2); }
  .v2-ex .fb-post--card .fb-overlay__hook { font-size: 1.45rem; }
  .v2-ex .fb-post--card .fb-overlay__logo, .v2-ex .fb-post--card .fb-overlay__slot { font-size: 0.62rem; }
  .v2-ex .fb-post--card .fb-overlay__call { font-size: 1rem; }
  .v2-ex .fb-post--card .fb-post__foot { padding: var(--sc-2) var(--sc-3); font-size: 0.72rem; }
}