/* site/lp/lp.css — promova-style landing layer for /lp/v2 pages only.
   Load order: design-system/styles.css → shell.css → lp.css (this file).
   Overrides type tokens + adds pastel section backgrounds + softer shape
   language. Never edits design-system/ or shell.css tokens directly. */

/* ── Fonts — Pair B: Plus Jakarta Sans (display) + Inter (text).
   Both are served by Google Fonts as a single variable-range file per
   subset (confirmed while vendoring — one URL covers 700–800 / 400–600),
   same convention as the DS's own Bricolage Grotesque / Hanken Grotesk
   faces in design-system/themes/indigo-amber/fonts.css. ─────────────── */
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('assets/fonts/plus-jakarta-sans-latin.woff2') format('woff2');
  font-weight: 700 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Plus Jakarta Sans';
  src: url('assets/fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2');
  font-weight: 700 800;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-latin.woff2') format('woff2');
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('assets/fonts/inter-latin-ext.woff2') format('woff2');
  font-weight: 400 600;
  font-display: swap;
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --font-display: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-text:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;

  /* ── Pastel section backgrounds — derived from the brand ramp, per
     spec §6.2. Curated hues mixed with a touch of --brand so they read
     as "on-system" tints rather than arbitrary pastels. ──────────────── */
  --lp-block-indigo:   var(--brand-tint);
  --lp-block-peach:    color-mix(in srgb, #FBEADC 90%, var(--brand) 6%);
  --lp-block-mint:     color-mix(in srgb, #E1F3EA 90%, var(--brand) 6%);
  --lp-block-lavender: color-mix(in srgb, #EDEAF9 90%, var(--brand) 6%);
  --lp-block-cream:    var(--paper);
}

.lp-block--indigo   { background: var(--lp-block-indigo); }
.lp-block--peach     { background: var(--lp-block-peach); }
.lp-block--mint      { background: var(--lp-block-mint); }
.lp-block--lavender  { background: var(--lp-block-lavender); }
.lp-block--cream     { background: var(--lp-block-cream); }

/* Safety net against any absolutely-positioned decorative element (e.g.
   Comparison's .lp-callout stickers) pushing the page into horizontal
   scroll on narrow viewports — never clips visible in-flow content. */
.lp-page { overflow-x: hidden; }

/* ── Promova look: softer, bigger radii + floatier shadows ─────────────── */
.lp-page .wo-card,
.lp-page .wo-plancard,
.lp-page .site-phonemock,
.lp-page .lp-phone-frame {
  border-radius: var(--r-2xl);
}
.lp-page .wo-card, .lp-page .wo-plancard { box-shadow: var(--shadow-card); }

/* ── Real-screen phone frame — app-screens/*.png are pre-rendered from the
   live prototype with the iPhone bezel/Dynamic Island/home-indicator
   already baked in (see watchover-context's store-screenshots/device-frame.html),
   so this is just an <img>: no separate frame asset, no inset/object-fit
   math, no aspect-ratio mismatch possible — the frame and the screen are
   captured together, guaranteed to match. Reused at every real-screenshot
   call site (Hero, Comparison, How It Works, Features, Kid-approved). */
.lp-phone-frame {
  width: 100%;
  max-width: 240px;
}
.lp-phone-frame img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(var(--shadow-pop));
}

/* Modifier for the one remaining *illustration* (not a real captured
   screen) — restores the old photoreal chrome-keyed frame overlay so a
   plain image can still be dressed up as a phone mockup. */
.lp-phone-frame--illustration {
  position: relative;
  aspect-ratio: 619 / 1244;
  box-shadow: var(--shadow-pop);
  background: var(--ink);
  border-radius: var(--r-2xl);
}
.lp-phone-frame--illustration img {
  position: absolute;
  inset: 1.85% 4.36% 2.25% 4.52%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6%;
  z-index: 1;
  filter: none;
}
.lp-phone-frame--illustration::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url('v2/assets/frame/iphone-frame.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}

/* ── How It Works: scroll-driven step switching ─────────────────────────
   .site-howstage pins (sticky) while .site-howtrack's 4 zones scroll past
   beneath it; JS (index.html inline script) drives which step is active
   via IntersectionObserver. Purely additive — .site-stepper/.site-phonemock
   markup and their existing CSS are untouched. ────────────────────────── */
.site-howscroll { position: relative; }
.site-howstage {
  position: sticky;
  top: var(--howstage-top, 0px); /* set at runtime from the nav's real height */
  z-index: 1;
  padding-block: var(--sp-6);
  background: inherit;
}
.site-howtrack { display: flex; flex-direction: column; }
.site-howtrack__zone {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.site-howtrack__num {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: clamp(64px, 12vw, 120px);
  color: color-mix(in srgb, var(--brand) 60%, transparent);
  opacity: 0.12;
  line-height: 1;
  user-select: none;
}

/* ── Minimal footer (spec row 14 — Privacy · Terms · © only) ───────────── */
.lp-footer { display: flex; flex-direction: column; align-items: center; gap: var(--sp-4); text-align: center; padding-block: var(--sp-8); }
.lp-footer__links { display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: center; }
.lp-footer__links a { color: var(--text-muted); text-decoration: none; font-size: var(--fs-sm); }
.lp-footer__links a:hover { color: var(--brand); }
.lp-footer__copy { color: var(--text-faint); font-size: var(--fs-caption); }

/* ── Hero social proof — placeholder/test data, see spec ────────────────
   docs/superpowers/specs/2026-07-09-hero-proof-problem-split-design.md */
.lp-socialproof {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-3);
  margin-top: var(--sp-2);
}
.lp-socialproof__avatars { display: flex; align-items: center; }
.lp-socialproof__avatars .wo-avatar {
  margin-left: calc(-1 * var(--sp-2));
  border: 2px solid var(--lp-block-indigo);
}
.lp-socialproof__avatars .wo-avatar:first-child { margin-left: 0; }
.lp-socialproof__caption { color: var(--text-muted); font-size: var(--fs-sm); }

/* ── Comparison section — reused phone-frame wrapper for both columns ── */
.lp-phone-frame-wrap { position: relative; width: 100%; max-width: 240px; }

/* Callout badges overlaid on both Comparison columns. Negative tl/mr/bl
   offsets intentionally push the pill past .lp-phone-frame-wrap's edges
   (floating "sticker" look) — tightened further below 420px and backed
   by .lp-baftcol's own padding + a page-level overflow-x safety net so
   they can't push the page into horizontal scroll on narrow viewports. */
.lp-callout {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-1) var(--sp-3) var(--sp-1) var(--sp-1);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-card);
  white-space: nowrap;
  z-index: 2;
}
.lp-callout--danger { background: var(--danger-50); color: var(--danger-700); }
.lp-callout--success { background: var(--success-50); color: var(--success-700); }
.lp-callout__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-6);
  height: var(--sp-6);
  border-radius: var(--r-pill);
  background: var(--surface-card);
  flex-shrink: 0;
  font-size: var(--fs-sm);
  line-height: 1;
}
.lp-callout--danger .lp-callout__icon { color: var(--danger-700); }
.lp-callout--success .lp-callout__icon { color: var(--success-700); }
.lp-callout__text { font-size: var(--fs-sm); font-weight: var(--w-bold); }
/* tl/bl float mostly OUTSIDE the frame (peeking over the top/bottom edge) —
   the real screenshot now fills the frame edge-to-edge (no letterbox), so a
   badge sitting *inside* the frame here would cover real UI text (status
   bar / bottom nav) instead of blank space. */
.lp-callout--tl { top: calc(-1 * var(--sp-4)); left: calc(-1 * var(--sp-4)); }
.lp-callout--mr { top: 45%; right: calc(-1 * var(--sp-6)); }
.lp-callout--bl { bottom: calc(-1 * var(--sp-6)); left: calc(-1 * var(--sp-4)); }
@media (max-width: 560px) {
  .lp-callout--mr { right: calc(-1 * var(--sp-2)); }
  .lp-callout--tl, .lp-callout--bl { left: calc(-1 * var(--sp-2)); }
}
@media (max-width: 420px) {
  .lp-callout--mr { right: calc(-1 * var(--sp-1)); }
  .lp-callout--tl, .lp-callout--bl { left: calc(-1 * var(--sp-1)); }
}
/* Float motion (shares Hero's lp-herocallout-float keyframe below) on all
   breakpoints; prefers-reduced-motion turns it off further down. */
.lp-callout { animation: lp-herocallout-float 4s ease-in-out infinite; }
.lp-callout--tl { animation-delay: 0s; }
.lp-callout--mr { animation-delay: 0.9s; }
.lp-callout--bl { animation-delay: 1.8s; }

/* ── Comparison band — two labeled phone-frame columns ─────────────────── */
/* row-gap only matters when the columns stack (mobile): the pills hang
   past the frame edges (-sp-4/-sp-6), so the stacked columns need extra
   vertical room or the bottom pill lands on the next column's label. */
.lp-compare-grid { position: relative; row-gap: var(--sp-16); }
.lp-versus {
  display: none;
}
@media (min-width: 760px) {
  .lp-versus {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--sp-12);
    height: var(--sp-12);
    border-radius: var(--r-pill);
    background: linear-gradient(135deg, var(--danger-50) 0%, var(--danger-50) 45%, var(--success-50) 55%, var(--success-50) 100%);
    border: 3px solid var(--surface-card);
    box-shadow: var(--shadow-card);
    font-size: var(--fs-sm);
    font-weight: var(--w-bold);
    color: var(--text-body);
    z-index: 4;
  }
}
.lp-baftcol {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding-inline: var(--sp-4);
}
.lp-baftcol__label { font-weight: var(--w-bold); font-size: var(--fs-sm); color: var(--text-muted); }
.lp-baftcol__label--brand { color: var(--brand-strong); }

/* Comparison-only: promote the shared .lp-baftcol__label into a colored
   pill chip with an icon prefix, reinforcing the red/green YouTube-vs-Us
   language. Scoped to .lp-compare-grid so Features' reuse of the same
   label class (plain colored text, no background) stays untouched. */
.lp-compare-grid .lp-baftcol__label {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--danger-700);
  background: var(--danger-50);
  padding: var(--sp-1) var(--sp-4);
  border-radius: var(--r-pill);
}
.lp-compare-grid .lp-baftcol__label .wo-icon { width: var(--sp-4); height: var(--sp-4); }
/* Extra label→frame distance: the tl pill hangs sp-4 above the frame, so
   the default sp-4 column gap lands it right on top of the label chip. */
.lp-compare-grid .lp-baftcol { gap: var(--sp-8); }
.lp-compare-grid .lp-baftcol__label--brand { color: var(--success-700); background: var(--success-50); }

/* ── Why-comparison table — brand wordmark in the Vidling column ─────── */
/* Mirrors .site-brand__wm (shell.css): display font, black "Vid",
   amber "ling". In the table head it replaces the uppercase caption
   style; in the stacked mobile rows it replaces the plain data-label
   ::before, which can't render a two-color wordmark. */
.lp-compare-wm { font-family: var(--font-display); font-weight: var(--w-bold); letter-spacing: -0.02em; color: var(--text-body); }
.lp-compare-wm .tube { color: var(--accent-strong); }
.site-compare thead .site-compare__brand-col { text-transform: none; font-size: var(--fs-sm); letter-spacing: normal; }
.site-compare td .lp-compare-wm { display: none; }
@media (max-width: 759px) {
  .site-compare td.site-compare__brand-col::before { content: none; }
  .site-compare td .lp-compare-wm { display: inline; }
  /* the brand-tint highlight sat flush against the text */
  .site-compare td.site-compare__brand-col { padding-inline: var(--sp-3); border-radius: var(--r-md); }
}

/* ── How It Works — real screenshot per step ───────────────────────────── */
.site-howstage .lp-phone-frame { max-width: 190px; }
.lp-howmock__caption {
  max-width: 260px;
  text-align: center;
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-base);
}

/* ── Kid-approved topic chips — force 2 rows instead of one long row ──── */
.lp-topicschips { max-width: 480px; }

/* ── Kid-approved feature pillars — tighter on mobile only. .wo-pillar/
   .site-ico are shared DS components (also used on site/index.html,
   site/lp/core/index.html) — every override is scoped via .lp-kidpillars
   so other pages/breakpoints are untouched. ─────────────────────────── */
@media (max-width: 759px) {
  .lp-kidpillars { gap: var(--sp-3); }
  .lp-kidpillars .wo-pillar { gap: var(--sp-2); }
  .lp-kidpillars .site-ico { width: var(--sp-10); height: var(--sp-10); }
  .lp-kidpillars .site-ico .wo-icon { width: var(--sp-5); height: var(--sp-5); }
}

/* ── Hero — two-column split (text | phone+photo visual) ───────────────
   Reference: competitor hero layout shared 2026-07-10. Left column reuses
   the existing .site-hero type styles; right column reuses .lp-phone-frame
   and .lp-scene-frame, overlapped, with small floating status callouts. */
.lp-herosplit {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-10);
  align-items: center;
}
.lp-hl-amber { color: var(--accent-strong); }

/* Hero's secondary "See how it works" button is gone. Two things kept
   "Get the app" from going full-width, both left alone since they're
   shared with Final CTA's own single button (out of scope here):
   shell.css's .site-hero__cta .wo-btn{width:auto}, AND .site-hero's own
   align-items:center, which shrinks .site-hero__cta (a column-flex child)
   to its content width regardless of the button's own width. Scope both
   overrides to the Hero section specifically via #top-hero. */
#top-hero .site-hero__cta { align-self: stretch; }
#hero-cta { width: 100%; max-width: 360px; }

.lp-herovisual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-8);
}
.lp-herovisual__phone { max-width: 200px; }
.lp-herovisual__photo {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 4 / 5;
  border-radius: var(--r-2xl);
  overflow: hidden;
  box-shadow: var(--shadow-pop);
  background: linear-gradient(155deg, var(--brand) 0%, var(--accent) 100%);
}
.lp-herovisual__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }

.lp-herocallout {
  position: absolute;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
  white-space: nowrap;
  z-index: 3;
}
.lp-herocallout__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sp-8);
  height: var(--sp-8);
  border-radius: var(--r-pill);
  flex-shrink: 0;
}
.lp-herocallout__icon .wo-icon { width: var(--sp-5); height: var(--sp-5); }
.lp-herocallout--success .lp-herocallout__icon { background: var(--success-50); color: var(--success-700); }
.lp-herocallout--danger  .lp-herocallout__icon { background: var(--danger-50);  color: var(--danger-700); }
.lp-herocallout--neutral .lp-herocallout__icon { background: var(--brand-tint); color: var(--brand-strong); }
.lp-herocallout--warn    .lp-herocallout__icon { background: var(--warning-50); color: var(--warning-700); }
.lp-herocallout__text { display: flex; flex-direction: column; line-height: 1.25; text-align: left; }
.lp-herocallout__label { font-size: var(--fs-caption); color: var(--text-muted); }
.lp-herocallout__value { font-size: var(--fs-sm); font-weight: var(--w-bold); color: var(--text-body); }

.lp-herocallout--1 { top: 4%; right: 2%; }
.lp-herocallout--2 { top: 40%; right: -4%; }
.lp-herocallout--3 { bottom: 10%; right: 4%; }
.lp-herocallout--4 { bottom: -4%; left: 2%; }

@keyframes lp-herocallout-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.lp-herocallout {
  animation: lp-herocallout-float 4s ease-in-out infinite;
}
.lp-herocallout--1 { animation-delay: 0s; }
.lp-herocallout--2 { animation-delay: 0.9s; }
.lp-herocallout--3 { animation-delay: 1.8s; }
.lp-herocallout--4 { animation-delay: 2.7s; }

@media (prefers-reduced-motion: reduce) {
  .lp-herocallout, .lp-callout { animation: none; }
}

@media (max-width: 640px) {
  .lp-herocallout { display: none; }
  .lp-herovisual__photo { display: none; }
}

@media (min-width: 760px) {
  .lp-herovisual { flex-direction: row; justify-content: center; }
  .lp-herovisual__phone { z-index: 2; margin-right: calc(-1 * var(--sp-12)); margin-top: var(--sp-10); }
}

@media (min-width: 900px) {
  .lp-herosplit { grid-template-columns: 1.05fr 1fr; }
  .lp-herosplit .site-hero { text-align: left; align-items: flex-start; }
  .lp-herosplit .site-hero__cta { justify-content: flex-start; }
  .lp-herosplit .lp-socialproof { justify-content: flex-start; }
  /* Bigger lifestyle photo on desktop, where the 2-col grid gives it real
     room; the photo carries the visual (it keeps its width, the phone
     absorbs any flex shrink as a supporting detail). */
  .lp-herovisual__photo { max-width: 460px; }
  .lp-herovisual__phone { max-width: 170px; flex-shrink: 0; margin-right: calc(-1 * var(--sp-16)); }
}

/* ── Features — "VS": real complaints (the problem) paired with our
   solution, always left → right. Overrides shell.css's left/right zigzag
   (.site-featureblock:nth-child(even)), which suits generic alternating
   rows but not a fixed problem→solution order. Each block stacks two real
   quotes — one Reddit parent quote (wiki/quizzes/communication-angles.md,
   r/parenting sentiment research) and one competitor App Store review
   (wiki/market/competitors.md) — matched by topic to the feature that
   answers them. ─────────────────────────────────────────────────────── */
.lp-featureblock--concern .site-featureblock__solution {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-6);
}
/* shell.css centers .site-featureblock__body's text on mobile and only
   switches to left-aligned at the 760px row breakpoint below. The VS
   layout wants the brand row / heading / copy flush left at every width
   instead, matching .lp-concernstack's own left-aligned title+quotes. */
.lp-featureblock--concern .site-featureblock__body { align-items: flex-start; text-align: left; }
/* shell.css's .site-featureblock__visual{flex:1} assumes it's a row-level
   flex item sharing width with __body — here it's nested one level
   deeper inside __solution's column, where flex:1 only governs the
   (vertical) main axis. Cross-axis (width) then shrinks-to-fit, and since
   its only child (.lp-phone-frame) sizes itself via width:100%, that
   collapses to 0 in the indeterminate shrink-to-fit context. Force a
   definite width so it can resolve normally at every breakpoint. */
.lp-featureblock--concern .site-featureblock__visual { width: 100%; }
@media (min-width: 760px) {
  .lp-featureblock--concern.site-featureblock,
  .lp-featureblock--concern.site-featureblock:nth-child(even) { flex-direction: row; align-items: flex-start; }
  .lp-featureblock--concern .site-featureblock__solution { flex: 1; align-items: flex-start; }
  .lp-featureblock--concern .lp-concernstack { margin-top: var(--sp-2); }
}

/* Each block becomes its own card with an alternating tint (instead of a
   thin divider line) so consecutive problem→solution pairs read as
   distinct, self-contained units. */
.lp-featureblock--concern {
  padding-inline: var(--sp-6);
  border-radius: var(--r-2xl);
  border-bottom: none;
  margin-block: var(--sp-4);
}
.lp-featureblock--concern:nth-child(odd)  { background: var(--surface-card); }
.lp-featureblock--concern:nth-child(even) { background: var(--brand-tint); }

.lp-featuresolution__brand { display: flex; align-items: center; gap: var(--sp-2); }
.lp-featuresolution__brand .site-logo { width: 22px; height: 22px; }

.lp-concernstack {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  width: 100%;
}
.lp-concernstack__brand { display: flex; align-items: center; gap: var(--sp-2); }
.lp-concernstack__badge {
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--danger-50);
  color: var(--danger-700);
}
.lp-concernstack__badge .wo-icon { width: 12px; height: 12px; }
.lp-concern {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  padding: var(--sp-6);
  border-radius: var(--r-2xl);
  background: var(--danger-50);
}
.lp-concern__mark {
  font-family: var(--font-display);
  font-weight: var(--w-bold);
  font-size: 40px;
  line-height: 0.5;
  color: color-mix(in srgb, var(--danger-500) 55%, transparent);
}
.lp-concern__quote {
  margin: 0;
  font-style: italic;
  color: var(--danger-700);
  line-height: var(--lh-base);
}
.lp-concern__source {
  font-size: var(--fs-caption);
  font-weight: var(--w-semibold);
  color: var(--text-muted);
}
.lp-concern--store { background: var(--warning-50); }
.lp-concern--store .lp-concern__quote { color: var(--warning-700); }
.lp-concern--store .lp-concern__mark { color: color-mix(in srgb, var(--warning-500) 55%, transparent); }

/* ── Pricing tier list — stacked "choose your plan" rows, replacing the
   earlier Monthly/Annual/Founding 3-card grid (paywall reference shared
   2026-07-13). Reuses .wo-plancard (border/radius/shadow/featured/tint
   tokens) but overrides its column layout to a horizontal row so each
   tier reads as name+desc on the left, price on the right, radio-selected
   via a hidden native <input> inside the <label>. ─────────────────────── */
.lp-tierlist {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: 480px;
  margin-inline: auto;
}
.lp-tierrow {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  cursor: pointer;
  position: relative;
}
.lp-tierrow__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.lp-tierrow__main { display: flex; flex-direction: column; gap: var(--sp-1); }
.lp-tierrow__name { font-weight: var(--w-bold); color: var(--text-body); }
.lp-tierrow__desc { font-size: var(--fs-sm); color: var(--text-muted); }
.lp-tierrow__price { text-align: right; flex-shrink: 0; }
.lp-tierrow__price .wo-num { font-family: var(--font-display); font-weight: var(--w-bold); font-size: var(--fs-h3); color: var(--brand-strong); }
.lp-tierrow__period { display: block; font-size: var(--fs-caption); color: var(--text-muted); }
.lp-tierrow__badge { position: absolute; top: calc(-1 * var(--sp-3)); left: var(--sp-5); }
.lp-tierrow--selected { border-color: var(--brand); background: var(--brand-tint); box-shadow: var(--shadow-lg); }

.lp-pricing-cta { max-width: 480px; margin: var(--sp-6) auto 0; }
.lp-trustpoint { text-align: center; color: var(--text-muted); font-size: var(--fs-sm); margin-top: var(--sp-3); }

.lp-guarantee {
  flex-direction: column;
  text-align: center;
  max-width: 480px;
  margin: var(--sp-8) auto 0;
}
.lp-guarantee__icon { font-size: var(--fs-h2); }

.lp-paymenticons {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-6);
}
.lp-paymenticons__icon { display: inline-flex; align-items: center; }
.lp-paymenticons__mastercard { gap: 2px; }

.lp-paymentaccepted { text-align: center; color: var(--success-700); font-size: var(--fs-sm); margin-top: var(--sp-3); }
.lp-paymentsafe { text-align: center; color: var(--text-muted); font-size: var(--fs-caption); margin-top: var(--sp-2); }