/* ============================================================================
   ClipAd — Landing Page v2 (in-progress rebuild, preview at /landing-v2)
   Scoped entirely under .lp2 so it never touches the live homepage (home.css)
   or any other marketing page. Source: Landing Page Documentation/LANDING_PAGE.md
   ========================================================================== */

.lp2 {
  --lp2-cream: #f2f2ec;
  --lp2-charcoal: #141414;
  --lp2-orange: #da682a;
  --lp2-orange-warm: #f1844a;
  --lp2-teal: #004643;
  --lp2-green: #1bc28d;
  --lp2-muted: #6d6d6a;
  --lp2-cream-warm: #ffedd5;
  --lp2-border-ring: #f3e1c9;
  --lp2-divider: #d9d9d9;
  /* Brand/advertiser suite (clipad-brand-guidelines.md §6.2, re-locked 2026-08-19).
     Deep is the primary accent (buttons, active states); Bright is for
     purple text/icons on a dark surface; Dark is a computed hover/pressed
     stage (~62% of Deep) also pressed into service on /brands as the suite's
     "full dark section" background — Purple's own Deep (#8D75E6) is a
     mid-tone, unlike Teal's Deep which is already near-black, so it can't
     carry small body text at AA contrast the way the Media House suite's
     teal sections do; Dark can (7.62:1 with white/cream text). */
  --lp2-purple: #8d75e6;
  --lp2-purple-bright: #b8a5ff;
  --lp2-purple-dark: #57498f;
  --lp2-purple-tint: rgba(141, 117, 230, 0.12);
  background: var(--lp2-cream);
}

.lp2-main { background: var(--lp2-cream); }

.lp2 .lp2-heading {
  font-family: 'Season Sans', 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  color: var(--lp2-charcoal);
  line-height: normal;
  margin: 0;
}
.lp2 .lp2-body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  color: var(--lp2-muted);
  line-height: 1.5;
  margin: 0;
}
.lp2 .lp2-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  padding: 0 30px;
  background: var(--lp2-orange);
  border-radius: 100px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  font-family: 'Season Sans', 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 24px;
  color: #fff;
  white-space: nowrap;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.lp2 .lp2-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(218, 104, 42, 0.3); }

/* homepage primary CTA ("Start for free") — 25% smaller than the shared
   .lp2-btn base, which other pages (for-media-houses, pricing plan cards)
   still use at full/their own size */
.lp2-hero .lp2-btn,
.lp2-campaign-cta .lp2-btn,
.lp2-closing .lp2-btn,
.lp2-mh-cta .lp2-btn {
  height: 52.5px;
  padding: 0 22.5px;
  font-size: 18px;
}

/* Generic secondary button — dark outline on a light surface. First used by
   .lp2-plan-cta.is-ghost (pricing cards); generalized onto the shared
   .lp2-btn here so any page can pair a primary lp2-btn with a secondary
   action without inventing a new button per page. */
.lp2 .lp2-btn.is-ghost {
  background: transparent;
  color: var(--lp2-charcoal);
  border: 2px solid var(--lp2-charcoal);
}
.lp2 .lp2-btn.is-ghost:hover {
  background: var(--lp2-charcoal);
  color: var(--lp2-cream);
  box-shadow: none;
}
/* Inverse — light outline on a dark/saturated fill (e.g. a purple CTA band). */
.lp2 .lp2-btn.is-ghost-light {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.55);
}
.lp2 .lp2-btn.is-ghost-light:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: #fff;
  box-shadow: none;
}

.lp2 .lp2-link {
  display: inline-flex;
  align-items: center;
  gap: 15px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  font-size: 22px;
  color: var(--lp2-orange);
  text-decoration: none;
  transition: color 180ms ease;
}
.lp2 .lp2-link:hover { color: var(--lp2-orange); }
.lp2 .lp2-link svg { flex-shrink: 0; color: inherit; transition: transform 180ms ease; }
.lp2 .lp2-link:hover svg { transform: translateX(4px); }

.lp2 .lp2-container {
  width: 100%;
  max-width: 1227px;
  margin: 0 auto;
  padding: 0 32px;
}

/* ============================================================================
   Section 1 — Hero
   ========================================================================== */
.lp2-hero {
  background: var(--lp2-cream);
  padding: 113px 16px 45px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.lp2-hero-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
  max-width: 853px;
}
.lp2-hero-headline {
  font-size: 70px;
  text-align: center;
  max-width: 657px;
}
.lp2-hero-sub {
  font-size: 20px;
  max-width: 657px;
  text-align: center;
  color: rgba(20, 20, 20, 0.6);
  letter-spacing: -0.28px;
  line-height: 1.3;
}

/* ============================================================================
   Section 2 — Product Feature Card (Clipad Studio)
   ========================================================================== */
/* Pinned two-view panel (Calendly-style): a tall scroll track holds a sticky
   100vh stage. Scroll progress 1 expands the gradient card from its inset
   rounded box to full-bleed; progress 2 cross-fades view 1 → view 2 IN PLACE.
   Driven by public/js/lp2-studio-scroll.js. */
.lp2-studio-card {
  position: relative;
  height: 250vh;
  background: var(--lp2-cream);
}
.lp2-studio-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.lp2-studio-card-outer {
  position: absolute;
  inset: 0;
  /* the clip is what "grows" — animating clip-path avoids per-frame layout,
     and it clips the children (stage + dots) for free */
  clip-path: inset(var(--lp2-inset-y, 0px) var(--lp2-inset-x, 0px) round var(--lp2-radius, 60px));
  will-change: clip-path;
}
/* Two stacked backgrounds — one per view — that cross-fade together with the
   copy, and drift gently right-to-left across the whole pin. The extra 120px
   of width is the drift budget, so no edge is ever exposed. */
.lp2-studio-card-bg {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  /* 140px of over-width for a 120px drift, so the trailing edge keeps 20px of
     slack. max-width:none is load-bearing — marketing.css sets a global
     img{max-width:100%} that would otherwise cap this back to the frame and
     expose a gap on the right as the image drifts. */
  width: calc(100% + 140px);
  max-width: none;
  object-fit: cover;
  opacity: 0;
  will-change: transform, opacity;
}
.lp2-studio-card-bg.is-1 { opacity: 0.3; }

/* the stage stays put at its natural size while the card grows around it */
.lp2-studio-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1052px;
  max-width: calc(100vw - 64px);
  height: 465px;
}
.lp2-studio-view {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  will-change: opacity, transform;
}
.lp2-studio-view.is-current { opacity: 1; visibility: visible; }

.lp2-studio-card-inner {
  height: 100%;
  background: var(--lp2-cream);
  border-radius: 40px;
  /* lifts the tile off the gradient behind it */
  box-shadow: 0 24px 60px rgba(20, 20, 20, 0.10), 0 2px 8px rgba(20, 20, 20, 0.04);
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
  padding: 0 60px;
}
.lp2-studio-card-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 15px;
  max-width: 410px;
}
.lp2-studio-card-label { font-size: 20px; }
.lp2-studio-card-headline { font-size: 48px; }
/* forces "Reach audiences / at scale" onto exactly 2 lines on mobile
   (see lp2-studio-card.ejs); a no-op on desktop, where natural wrapping
   in the wider copy column is unchanged */
.lp2-break-mobile { display: none; }
.lp2-studio-card-body { font-size: 16px; }
.lp2-studio-card-copy .lp2-link { font-size: 16px; }
.lp2-studio-card-shot-wrap {
  position: relative;
  justify-self: end;
  width: 516px;
  max-width: 100%;
  aspect-ratio: 516 / 372;
}
/* The orange block peeking out top-left behind the screenshot — depth layer
   from the Figma export's masked "Rectangle 11" (516x372, rx25). */
.lp2-studio-card-shot-depth {
  position: absolute;
  inset: 0;
  background: var(--lp2-orange-warm);
  border-radius: 25px;
}
.lp2-studio-card-shot {
  position: absolute;
  left: 11.6%;
  top: 9.9%;
  width: 88.4%;
  height: 90.1%;
  /* diagonal rounding only (top-left + bottom-right), matching the source */
  border-radius: 25px 0 25px 0;
  overflow: hidden;
}
.lp2-studio-card-shot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* anchor the crop to the source screenshot's left edge so the dashboard's
     nav sidebar stays visible, instead of the default centered crop losing
     it off the left; .lp2-studio-card-shot's own overflow:hidden still masks
     everything, so this can't spill past the card's rounded frame */
  object-position: left top;
  /* 2x zoom, anchored at the same left/top corner as object-position so the
     dashboard nav stays put instead of zooming from the image's centre.
     2.4 = the base 2x plus a further 20% zoom requested on top of it. */
  transform: scale(2.4);
  transform-origin: left top;
}
/* view 2 — the peach gradient carries its own rounding, and the creator is a
   transparent cut-out so it gets no radius, no shadow and no clipping */
.lp2-studio-v2-gradient {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lp2-studio-v2-creator {
  position: absolute;
  left: 11.6%;
  top: 9.9%;
  width: 88.4%;
  height: 90.1%;
  object-fit: contain;
}

.lp2-studio-card-dots {
  position: absolute;
  bottom: calc(100% + 24px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 5px;
}
.lp2-studio-card-dots button {
  display: block;
  width: 16.25px;
  height: 16.25px;
  padding: 0;
  border-radius: 999px;
  border: 1.5px solid var(--lp2-cream);
  cursor: pointer;
  opacity: 0.4;
  transition: width 260ms ease, opacity 260ms ease;
}
/* Active pill is ~2.5x the resting dot's width — inactive stays a plain dot. */
.lp2-studio-card-dots button.is-active { width: 40.6px; opacity: 1; }
.lp2-studio-card-dots button:nth-child(1) { background: var(--lp2-teal); }
.lp2-studio-card-dots button:nth-child(2) { background: var(--lp2-orange); }

/* No pin when motion is reduced — the panel renders at its collapsed size and
   the dots switch views instantly. */
@media (prefers-reduced-motion: reduce) {
  .lp2-studio-card { height: auto; padding: 90px 16px; display: flex; justify-content: center; }
  .lp2-studio-pin { position: static; height: auto; width: 100%; max-width: 1227px; }
  .lp2-studio-card-outer { position: relative; inset: auto; height: 690px; clip-path: none; border-radius: 60px; overflow: hidden; }
  .lp2-studio-card-bg { width: 100%; max-width: 100%; }
}

/* ============================================================================
   Section 3 — Campaign Overview CTA
   ========================================================================== */
.lp2-campaign-cta {
  background: var(--lp2-cream);
  padding: 90px 30px;
  display: flex;
  justify-content: center;
}
.lp2-campaign-cta-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
}
.lp2-campaign-cta-headline { font-size: 64px; max-width: 669px; }
.lp2-campaign-cta-body { font-size: 18px; max-width: 750px; }

/* ============================================================================
   Section 4 — Workflow Steps (dark teal)
   ========================================================================== */
/* Accordion of five steps: one is open (450x650 white card), the rest are
   collapsed pills. The SAME image serves both states — full-bleed inside the
   pill, then it travels to the inset slot at the bottom of the open card.
   Driven by public/js/lp2-workflow.js. */
.lp2-workflow {
  background: var(--lp2-teal);
  padding: 90px 32px;
  display: flex;
  justify-content: center;
}
.lp2-workflow-row {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: center;
  max-width: 1280px;
  width: 100%;
  flex-wrap: nowrap;
}

.lp2-step {
  position: relative;
  flex: 0 1 auto;
  min-width: 0;
  width: clamp(70px, 9.5vw, 182px);
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  text-align: left;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: width 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lp2-step.is-active { width: min(450px, 36vw); cursor: default; }
.lp2-step:focus-visible { outline: 2px solid var(--lp2-cream-warm); outline-offset: 6px; border-radius: 24px; }

/* the label lives OUTSIDE the card (so it can sit above the pill) and slides
   down into the card as the step opens */
.lp2-step-label {
  position: absolute;
  z-index: 3;
  top: -34px;
  left: 0;
  width: 100%;
  text-align: center;
  font-family: 'Season Sans', 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--lp2-cream-warm);
  pointer-events: none;
  transition: top 620ms cubic-bezier(0.22, 1, 0.36, 1),
              left 620ms cubic-bezier(0.22, 1, 0.36, 1),
              width 620ms cubic-bezier(0.22, 1, 0.36, 1),
              color 400ms ease;
}
.lp2-step.is-active .lp2-step-label {
  top: 30px;
  left: 22.5px;
  width: calc(100% - 45px);
  text-align: left;
  color: var(--lp2-charcoal);
}

.lp2-step-card {
  position: relative;
  display: block;
  height: 449px;
  background: #fff;
  border-radius: 80px;
  overflow: hidden;
  transition: height 620ms cubic-bezier(0.22, 1, 0.36, 1),
              border-radius 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
/* the staggered pill heights are positional, so the row keeps its rhythm
   whichever step happens to be open */
.lp2-step:nth-child(1) .lp2-step-card,
.lp2-step:nth-child(5) .lp2-step-card { height: 350px; }
.lp2-step.is-active .lp2-step-card { height: 650px; border-radius: 22.5px; }

.lp2-step-copy {
  position: absolute;
  z-index: 1;
  left: 22.5px;
  right: 22.5px;
  top: 78px;
  display: flex;
  flex-direction: column;
  gap: 25px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}
.lp2-step.is-active .lp2-step-copy { opacity: 1; transition-delay: 220ms; }
.lp2-step-sub {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  font-size: 22px;
  line-height: 1.3;
  color: var(--lp2-muted);
}
.lp2-step-body {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.4;
  color: var(--lp2-muted);
}

.lp2-step-mesh {
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  bottom: 0;
  height: 397px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 420ms ease;
}
.lp2-step.is-active .lp2-step-mesh { opacity: 1; }
.lp2-step-mesh img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
  /* fades in from transparent (top) so it blends into the white card above */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 55%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 55%);
}

/* collapsed = fills the pill; active = the inset slot at the card's bottom */
.lp2-step-media {
  position: absolute;
  z-index: 3;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  border-radius: 80px;
  overflow: hidden;
  transition: left 620ms cubic-bezier(0.22, 1, 0.36, 1),
              right 620ms cubic-bezier(0.22, 1, 0.36, 1),
              top 620ms cubic-bezier(0.22, 1, 0.36, 1),
              bottom 620ms cubic-bezier(0.22, 1, 0.36, 1),
              border-radius 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lp2-step.is-active .lp2-step-media {
  left: 102px;
  right: 102px;
  top: 392px;
  bottom: 39px;
  border-radius: 25px;
}
.lp2-step-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.lp2-step-media::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 12px solid var(--lp2-border-ring);
  pointer-events: none;
  transition: border-width 620ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lp2-step.is-active .lp2-step-media::after { border-width: 10px; }

/* hover affordance on the closed pills only */
.lp2-step:not(.is-active):hover .lp2-step-media { transform: translateY(-4px); }
.lp2-step:not(.is-active) .lp2-step-media { transition: left 620ms cubic-bezier(0.22, 1, 0.36, 1), right 620ms cubic-bezier(0.22, 1, 0.36, 1), top 620ms cubic-bezier(0.22, 1, 0.36, 1), bottom 620ms cubic-bezier(0.22, 1, 0.36, 1), border-radius 620ms cubic-bezier(0.22, 1, 0.36, 1), transform 260ms ease; }

@media (prefers-reduced-motion: reduce) {
  .lp2-step,
  .lp2-step-label,
  .lp2-step-card,
  .lp2-step-copy,
  .lp2-step-mesh,
  .lp2-step-media,
  .lp2-step-media::after { transition: none; }
}

/* ============================================================================
   Section 5 — Clipad Studio Deep Dive
   ========================================================================== */
.lp2-deepdive {
  background: var(--lp2-cream);
  padding: 90px 32px 0;
  display: flex;
  justify-content: center;
}
.lp2-deepdive-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 60px;
  width: 100%;
  max-width: 1227px;
  flex-wrap: wrap;
}
.lp2-deepdive-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
  width: 100%;
  max-width: 513px;
}
.lp2-deepdive-label { font-size: 24px; }
.lp2-deepdive-headline { font-size: 48px; }
.lp2-deepdive-intro,
.lp2-deepdive-point { font-size: 16px; }
.lp2-deepdive-copy .lp2-link { font-size: 16px; }
.lp2-deepdive-divider { width: 100%; height: 1px; background: var(--lp2-divider); border: none; margin: 0; }

.lp2-deepdive-visual {
  position: relative;
  width: 610px;
  height: 610px;
  max-width: 100%;
  border-radius: 60px;
  background: var(--lp2-green);
  overflow: hidden;
  flex-shrink: 0;
}
.lp2-deepdive-card {
  position: absolute;
  left: -34px;
  top: 155px;
  width: 679px;
  max-width: calc(100% + 68px);
  background: #fff;
  border-radius: 40.5px;
  padding: 21px 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 33px;
  box-shadow: 10px 0 15px rgba(0, 0, 0, 0.25);
}
.lp2-logo-row { display: flex; gap: 37px; align-items: center; }
.lp2-logo-row span { display: block; width: 23.6px; height: 25.6px; background: var(--lp2-charcoal); }
.lp2-thumb-row { display: flex; gap: 13.5px; align-items: center; }
.lp2-thumb-row img { display: block; height: 141px; width: 214.65px; object-fit: cover; border-radius: 6.75px; }
.lp2-thumb-row img:last-child { width: 175.5px; }

/* ============================================================================
   Section 6 — Feature Carousel (orange bg)
   ========================================================================== */
/* The orange "band" is an inset rounded card (1227px wide, rx90) that floats
   on the cream page — NOT a full-bleed color section — matching the source's
   absolutely-positioned Rectangle behind the carousel content. */
/* The orange "band" is an inset rounded card (1227px wide, rx90) that floats
   on the cream page — NOT a full-bleed color section — matching the source's
   absolutely-positioned Rectangle behind the carousel content. */
.lp2-carousel {
  background: var(--lp2-cream);
  padding: 180px 32px 90px;
  display: flex;
  justify-content: center;
}
.lp2-carousel-band {
  width: 100%;
  max-width: 1227px;
  border-radius: 90px;
  background: var(--lp2-orange-warm);
  padding: 60px 0;
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.lp2-carousel-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
}
.lp2 .lp2-carousel-headline {
  font-size: 48px;
  color: var(--lp2-cream);
  text-align: center;
  max-width: 513px;
}

/* ---- carousel mechanics -------------------------------------------------- */
.lp2-carousel-viewport {
  position: relative;
  width: 100%;
  max-width: 1226.667px;
  height: 466px;
  overflow: hidden;
  cursor: grab;
  touch-action: pan-y;
}
.lp2-carousel-viewport.is-dragging { cursor: grabbing; }
.lp2-carousel-track {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  gap: 50px;
  will-change: transform;
}
.lp2-carousel-track img { -webkit-user-drag: none; user-select: none; }

.lp2-carousel-card {
  flex: 0 0 auto;
  width: 937px;
  height: 466px;
  background: #fff;
  border-radius: 60px;
  padding: 30px 30px 30px 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.lp2-carousel-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 30px;
  width: 395px;
  flex-shrink: 0;
}
.lp2-carousel-title { font-size: 24px; }
.lp2-carousel-body { font-size: 22px; }

/* Every card's illustration is a 393x406 stage; children are absolutely
   placed to the exact Figma offsets. */
.lp2-carousel-visual {
  position: relative;
  width: 393px;
  height: 406px;
  flex-shrink: 0;
}
.lp2-cv-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 30px;
  pointer-events: none;
}
.lp2-cv-bg.is-o50 { opacity: 0.5; }
.lp2-cv-bg.is-o60 { opacity: 0.6; }
.lp2-cv-bg.is-o70 { opacity: 0.7; }
.lp2-cv-bg.is-flip-y { transform: scaleY(-1); }

/* --- Card 1 --- */
.lp2-c1-portrait {
  position: absolute;
  left: 38.17px;
  top: 31px;
  width: 230px;
  height: 344px;
  border-radius: 15px;
  object-fit: cover;
}
.lp2-c1-filmstrip {
  position: absolute;
  left: 95px;
  top: 276px;
  width: 283px;
}
.lp2-c1-filmstrip img { display: block; width: 100%; height: auto; border-radius: 8px; }

/* --- Card 2 --- */
.lp2-c2-blur {
  position: absolute;
  left: 50px;
  top: 52px;
  width: 294px;
  height: 305px;
  border-radius: 30px;
  background: rgba(20, 20, 20, 0.2);
  backdrop-filter: blur(25px);
  -webkit-backdrop-filter: blur(25px);
}
.lp2-c2-phone {
  position: absolute;
  left: 75px;
  top: 73px;
  width: 243px;
  height: 263px;
  border-radius: 25px;
  background: linear-gradient(219.38deg, #fff 16.574%, #cdcdcd 46.497%, #dedede 68.844%, #fff 91.571%);
}
.lp2-c2-avatar {
  position: absolute;
  left: 144.16px;
  top: 103px;
  width: 36.96px;
  height: 36.96px;
}
.lp2-c2-social {
  position: absolute;
  left: 136px;
  top: 264.41px;
  width: 53.183px;
  height: 41.376px;
}
/* "Group 13" — the trust/reach chain drawn inside the phone. Every offset is
   the Figma value plus the Group5 origin (136, 103); the shield/megaphone SVGs
   are inset by half their 2.88 stroke so the box lines up with the artboard. */
.lp2-c2-shield {
  position: absolute;
  left: 148.48px;
  top: 185.32px;
  width: 28.4807px;
  height: 34.5498px;
}
.lp2-c2-megaphone {
  position: absolute;
  left: 227.2px;
  top: 187.24px;
  width: 31.68px;
  height: 30.4063px;
}
/* connectors: each fades AWAY from the shield, matching the source gradients */
.lp2-c2-line-v1 {
  position: absolute;
  left: 162.4px;
  top: 145.48px;
  width: 0.48px;
  height: 32.4px;
  background: linear-gradient(to bottom, rgba(20, 20, 20, 0) 0%, rgba(20, 20, 20, 0) 27%, rgba(20, 20, 20, 0.73) 100%);
}
.lp2-c2-line-v2 {
  position: absolute;
  left: 162.4px;
  top: 233.8px;
  width: 0.48px;
  height: 36px;
  background: linear-gradient(to bottom, rgba(20, 20, 20, 0.73) 0%, rgba(20, 20, 20, 0) 73%);
}
.lp2-c2-line-h {
  position: absolute;
  left: 186.4px;
  top: 202.6px;
  width: 36px;
  height: 0.48px;
  background: linear-gradient(to right, rgba(20, 20, 20, 1) 0%, rgba(20, 20, 20, 0) 100%);
}

/* --- Card 3 --- */
.lp2-c3-panel {
  position: absolute;
  left: 38px;
  top: 74px;
  width: 318px;
  height: 258px;
  background: #fff;
  border-radius: 25px;
}
.lp2-c3-dot {
  position: absolute;
  left: 93px;
  width: 14px;
  height: 14px;
  border-radius: 25px;
  background: var(--lp2-charcoal);
  border: 0.5px solid var(--lp2-charcoal);
}
/* the 120px connector, drawn as a vertical gradient that fades downward */
.lp2-c3-line {
  position: absolute;
  left: 100px;
  top: 148px;
  width: 1px;
  height: 120px;
  background: linear-gradient(to bottom, var(--lp2-charcoal), rgba(20, 20, 20, 0));
}
.lp2-c3-step {
  position: absolute;
  left: 121px;
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  color: rgba(20, 20, 20, 0.5);
  white-space: nowrap;
}
.lp2-c3-step.is-on { font-weight: 500; color: var(--lp2-charcoal); }
/* Staggered reveal: each connector "line" (dot + label, plus the button and
   the trailing gradient on the first) rises into place, one after the next.
   Last line lands at 900 + 700 = 1600ms, inside the 2s budget. */
.lp2-c3-anim {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease-out,
              transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}
.lp2-carousel-card.is-revealed .lp2-c3-anim {
  opacity: 1;
  transform: none;
}
/* delays live only on the revealed state, so leaving the card resets instantly
   instead of un-staggering back out */
.lp2-carousel-card.is-revealed .lp2-c3-anim[data-line="2"] { transition-delay: 450ms; }
.lp2-carousel-card.is-revealed .lp2-c3-anim[data-line="3"] { transition-delay: 900ms; }

@media (prefers-reduced-motion: reduce) {
  .lp2-c3-anim { opacity: 1; transform: none; transition: none; }
}

.lp2-c3-btn {
  position: absolute;
  left: 238px;
  top: 138px;
  width: 63px;
  height: 20px;
  border-radius: 5px;
  background: var(--lp2-charcoal);
  color: var(--lp2-cream);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 10px;
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* --- Card 4 — the glide strip (translates 0 → -400px over 5s, looping) --- */
.lp2-c4-glide {
  position: absolute;
  left: 0;
  top: 166px;
  width: 393px;
  height: 75px;
  overflow: hidden;
}
.lp2-c4-glide-row {
  position: absolute;
  top: 0;
  display: flex;
  gap: 13px;
  align-items: center;
  animation: lp2Glide 5s linear infinite;
}
.lp2-c4-glide-row:nth-child(1) { left: 0; }
.lp2-c4-glide-row:nth-child(2) { left: 400px; }
.lp2-c4-glide-row::before {
  content: '';
  /* 16 bars, 12px wide with 13px gaps, drawn as one repeating strip */
  width: 387px;
  height: 75px;
  flex: 0 0 auto;
  background-image: repeating-linear-gradient(to right,
    rgba(20, 20, 20, 0.1) 0 12px,
    transparent 12px 25px);
  -webkit-mask-image: repeating-linear-gradient(to right, #000 0 12px, transparent 12px 25px);
  mask-image: repeating-linear-gradient(to right, #000 0 12px, transparent 12px 25px);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
@keyframes lp2Glide {
  from { transform: translateX(0); }
  to { transform: translateX(-400px); }
}
@media (prefers-reduced-motion: reduce) {
  .lp2-c4-glide-row { animation: none; }
}
.lp2-c4-photo {
  position: absolute;
  left: 46px;
  top: 51px;
  width: 323px;
  height: 304px;
  overflow: hidden;
  pointer-events: none;
}
.lp2-c4-photo img {
  position: absolute;
  left: -69.35%;
  top: -16.08%;
  width: 173.52%;
  height: 122.73%;
  max-width: none;
}

/* ---- dots ---- */
.lp2-carousel-dots { display: flex; align-items: center; gap: 10px; }
.lp2-carousel-dots button {
  display: block;
  width: 10px;
  height: 10px;
  padding: 0;
  border: none;
  border-radius: 18.75px;
  background: var(--lp2-cream);
  opacity: 0.5;
  cursor: pointer;
  transition: width 300ms ease, opacity 300ms ease, background-color 300ms ease;
}
.lp2-carousel-dots button.is-active { width: 30px; background: #fff; opacity: 1; }

/* ============================================================================
   Section 7 — Closing CTA footer
   ========================================================================== */
.lp2-closing {
  position: relative;
  height: 1065px;
  display: flex;
  justify-content: center;
  /* flex-start is load-bearing: the default `stretch` would size the sticky
     stack to the full 1065px, leaving it zero travel room so it could never
     pin. At natural height it has ~800px of room to stay put while the photo
     scrolls past. */
  align-items: flex-start;
  padding-top: 180px;
  padding-bottom: 90px;
}
/* Background lives on its own layer (not directly on .lp2-closing) so the
   desktop zoom below can scale+clip it without touching .lp2-closing itself
   — that box must stay untransformed/overflow:visible because it's the
   containing block .lp2-closing-stack sticks to; putting overflow:hidden or
   a transform on it directly would risk breaking the pin. .lp2-closing-bg
   is the clip window (matches the section box exactly); its ::before is the
   actual image and is the thing that scales. */
.lp2-closing-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.lp2-closing-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  /* plain (non-fixed) background — it scrolls behind the pinned headline */
  background-image: url('/images/landing-v2/closing-cta-bg.png');
  background-size: cover;
  background-position: center;
}
.lp2-closing-scrim {
  position: absolute;
  inset: 0;
  background: rgba(20, 20, 20, 0.2);
}
/* Pinned 180px below the viewport top (like riverside.com's closing CTA) —
   it stays put in the viewport while the tall section's photo scrolls past
   underneath, until the section runs out and the footer scrolls up over it. */
.lp2-closing-stack {
  position: sticky;
  top: 180px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 100%;
  max-width: 761px;
  padding: 0 32px;
}
.lp2 .lp2-closing-headline {
  font-size: 64px;
  color: var(--lp2-cream);
  text-align: center;
  margin: 0;
}
/* Desktop-only 20% zoom. transform-origin defaults to center, matching this
   layer's background-position:center, so the scale expands outward from the
   same point the image is already centered on — the human figure doesn't
   shift, the crop just tightens around it. Mobile (<=960px, same boundary
   the rest of this section's mobile overrides use) stays unzoomed. */
@media (min-width: 961px) {
  .lp2-closing-bg::before { transform: scale(1.2); }
}

/* ============================================================================
   Responsive
   ========================================================================== */
@media (max-width: 960px) {
  .lp2-hero { padding-top: 70px; }
  .lp2-hero-headline { font-size: 42px; }
  .lp2-hero-sub { font-size: 16px; }
  .lp2-campaign-cta-body { font-size: 16px; }
  .lp2-studio-card-inner { grid-template-columns: 1fr; padding: 40px 30px; gap: 30px; }
  /* was mistakenly targeting .lp2-studio-card-shot (the inset screenshot,
     meant to stay at its 88.4% width so the orange depth card peeks out
     top-left) instead of the wrap — that forced the screenshot to 100%
     width, blowing it past the orange card's right/bottom edge */
  .lp2-studio-card-shot-wrap { justify-self: start; width: 100%; }
  .lp2-studio-card-dots { position: static; margin-top: 20px; }
  .lp2-campaign-cta-headline { font-size: 38px; }
  .lp2-step-activate { width: 100%; max-width: 450px; height: auto; min-height: 480px; }
  .lp2-deepdive-row { flex-direction: column; align-items: center; }
  .lp2-deepdive-copy { max-width: 100%; }
  .lp2-deepdive-visual { width: 100%; max-width: 610px; height: auto; aspect-ratio: 1 / 1; border-radius: 30px; }
  /* the deep-dive card is hand-positioned in desktop px (left/top/width tuned
     for a 610px square) — left/top/width switch to % of that same square so
     they stay proportionally placed at any mobile width; everything nested
     inside (padding/gap/radii/logo squares/thumbnails) is scaled by a single
     ~0.51 factor (measured square width at 375px / 610px desktop square) so
     the whole card shrinks together instead of spilling past its frame */
  .lp2-deepdive-card {
    left: -5.57%;
    top: 25.4%;
    width: 111.31%;
    max-width: none;
    border-radius: 30px;
    padding: 11px 0;
    gap: 17px;
    box-shadow: 5px 0 8px rgba(0, 0, 0, 0.25);
  }
  .lp2-logo-row { gap: 19px; }
  .lp2-logo-row span { width: 12px; height: 13px; }
  .lp2-thumb-row { gap: 7px; }
  .lp2-thumb-row img { height: 72px; width: 109px; border-radius: 3.5px; }
  .lp2-thumb-row img:last-child { width: 89.5px; }
  .lp2-deepdive-headline { font-size: 44px; }
  /* .lp2 prefix matches the base rules' specificity (.lp2 .lp2-carousel-headline
     / .lp2 .lp2-closing-headline) — without it these two overrides silently
     lost to the base 48px/64px on every viewport, mobile included */
  .lp2 .lp2-carousel-headline { font-size: 32px; }
  .lp2-carousel-card { padding: 30px; justify-content: center; }
  .lp2 .lp2-closing-headline { font-size: 38px; }
  .lp2-break-mobile { display: inline; }
  .lp2-studio-card-headline { font-size: 40px; }
  /* "Reach audiences" alone needs ~11px more than the copy column's width at
     this font size — bleed the headline slightly past the card's own side
     padding so it fits without shrinking the font further. .lp2 prefix
     matches (beats) the base .lp2 .lp2-heading{margin:0} rule's specificity,
     which otherwise silently wins and keeps this at 0. */
  .lp2 .lp2-studio-card-headline {
    margin-left: -8px;
    margin-right: -8px;
  }
  /* label/body/link line up with the headline's bled-left edge (the
     headline alone shifts -8px so "Reach audiences" fits on one line —
     without matching that here, these three sit 8px to its right) */
  .lp2 .lp2-studio-card-label,
  .lp2 .lp2-studio-card-body,
  .lp2-studio-card-copy .lp2-link {
    margin-left: -8px;
  }
  .lp2-studio-card-copy .lp2-link { font-size: 14px; }
}

/* Closing headline must always break to exactly 2 lines ("Your content's
   great." / "Unlock More Value" — see the <br> in lp2-closing.ejs). At the
   960px breakpoint's 38px size + 32px side padding, each line's natural
   width (344px / 315px) outgrows a narrow phone's available space below
   ~408px viewport width, so a mid-line wrap gets forced in — 4 lines
   instead of 2. Below 480px, shrink the font and tighten the side padding
   just enough that both lines clear even a 320px-wide phone (iPhone SE)
   with margin to spare. */
@media (max-width: 480px) {
  .lp2-closing-stack { padding: 0 20px; }
  .lp2 .lp2-closing-headline { font-size: 30px; }
}

/* ---- mobile: static Studio/Creator card, edge-to-edge, no scroll-jack ----
   Below 768px the pinned expand/cross-fade (lp2-studio-scroll.js) is turned
   off entirely — see the isMobile branch in that file, which mirrors the
   prefers-reduced-motion path but auto-cycles the two views on a timer
   instead of requiring a click. The card itself drops the desktop GUTTER
   inset so it runs flush to the section's own side padding. */
@media (max-width: 768px) {
  /* tighten heading line spacing platform-wide on mobile — 59px measured
     gap at 48px font-size felt loose; ratio 52/48 (~1.083) applied to
     every .lp2-heading regardless of its own font-size */
  .lp2 .lp2-heading { line-height: 1.0833; }

  .lp2-studio-card { height: auto; padding: 60px 16px; }
  .lp2-studio-pin { position: static; height: auto; width: 100%; max-width: none; }
  .lp2-studio-card-outer {
    position: relative;
    inset: auto;
    /* fixed so the container doesn't resize switching between Studio/Creator
       (their content heights differ by ~24px) — tall enough for the taller
       of the two (Creator, measured ~600px); overflow:hidden clips the rare
       case content still overflows, instead of growing the box */
    height: 600px;
    clip-path: none;
    border-radius: 32px;
    overflow: hidden;
  }
  /* the decorative peach card-behind-a-card layer is a desktop-only depth
     cue — with the card static/stacked on mobile it just reads as clutter
     peeking above the real card, so it's dropped entirely */
  .lp2-studio-card-bg { display: none; }
  .lp2-studio-stage {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100%;
    max-width: 100%;
    height: auto;
  }
  .lp2-studio-view {
    position: relative;
    inset: auto;
    opacity: 0;
    visibility: hidden;
    display: none;
  }
  .lp2-studio-view.is-current {
    opacity: 1;
    visibility: visible;
    display: block;
  }
  .lp2-studio-card-inner {
    grid-template-columns: 1fr;
    height: auto;
    padding: 32px 24px;
    gap: 24px;
    border-radius: 28px;
    /* the fixed-height outer container (600px) leaves empty space below a
       shorter view's content — previously invisible when the outer hugged
       the inner tightly, this box-shadow now shows through as a grey haze
       in that gap */
    box-shadow: none;
  }
  .lp2-studio-card-copy { max-width: 100%; }
  .lp2-studio-card-body { font-size: 14px; }
  .lp2-studio-card-shot-wrap { justify-self: stretch; width: 100%; }
  /* overlaid on top of the card, centered — dots are 1.5x smaller
     (16.25px -> ~10.83px) to sit unobtrusively over the content */
  .lp2-studio-card-dots {
    position: absolute;
    top: 16px;
    /* flush with the card's text left edge (16px = stage's own inset) */
    left: 16px;
    bottom: auto;
    transform: none;
    margin: 0;
    z-index: 2;
  }
  .lp2-studio-card-dots button {
    width: 10.83px;
    height: 10.83px;
    border-radius: 999px;
  }
  .lp2-studio-card-dots button.is-active { width: 27px; }

  /* ---- workflow accordion -> single stacked card + dots ----
     All 5 .lp2-step buttons share one grid cell (crossfade in place, no
     pill-to-card width/position sliding); only the active one is
     interactive. The row's own layout (copy positioned by top/left/right,
     media by left/right/top/bottom) is dropped for a plain flex column so
     it sizes to real content instead of the desktop's fixed 650px card. */
  .lp2-workflow { flex-direction: column; align-items: center; padding: 60px 16px; }
  .lp2-workflow-row {
    display: grid;
    width: 100%;
    max-width: 450px;
    /* the desktop rule's align-items:center leaves each stacked .lp2-step
       sized to its own content and just centred in the row's track — needs
       stretch so every card shares the tallest one's full height */
    align-items: stretch;
    /* horizontal swipes advance the card (lp2-workflow.js); vertical page
       scroll still passes through untouched */
    touch-action: pan-y;
  }
  .lp2-step {
    grid-column: 1;
    grid-row: 1;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity 500ms ease;
  }
  /* overrides the desktop .lp2-step.is-active{width:min(450px,36vw)} rule,
     which otherwise still wins here (same specificity, declared later
     doesn't help since it's a separate, higher-priority selector match) */
  .lp2-step.is-active { width: 100%; opacity: 1; pointer-events: auto; }
  /* the label used to float outside the card (desktop only); now it's the
     first child inside .lp2-step-card (see lp2-workflow.ejs) so it reads as
     the card's title, ahead of the sub/body copy. Both selectors are
     repeated here to beat .lp2-step.is-active .lp2-step-label's higher
     specificity (which otherwise still wins and keeps it absolutely
     positioned/floating). */
  .lp2-step-label,
  .lp2-step.is-active .lp2-step-label {
    display: block;
    position: static;
    top: auto;
    left: auto;
    width: auto;
    text-align: left;
    color: var(--lp2-charcoal);
    margin: 0;
  }
  /* .lp2-step is a grid item and stretches to the row's height (the tallest
     of the 5 cards, since they're all stacked in the same grid cell) — the
     card itself needs height:100% (not auto) to actually fill that
     stretched box, so every card is the same height regardless of its own
     copy length. */
  .lp2-step-card,
  .lp2-step.is-active .lp2-step-card,
  .lp2-step:nth-child(1) .lp2-step-card,
  .lp2-step:nth-child(5) .lp2-step-card {
    position: static;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 32px 24px 24px;
    border-radius: 28px;
  }
  .lp2-step-copy {
    position: static;
    opacity: 1;
    pointer-events: none;
    transition: none;
    /* halves the title-to-description gap (card's own gap:20px, label to
       copy) without touching the copy-to-image gap below it */
    margin-top: -10px;
  }
  .lp2-step-sub { font-size: 18px; }
  .lp2-step-body { font-size: 14px; }
  .lp2-step-mesh { display: none; }
  .lp2-step-media,
  .lp2-step.is-active .lp2-step-media {
    position: relative;
    inset: auto;
    left: auto;
    right: auto;
    top: auto;
    bottom: auto;
    width: 100%;
    aspect-ratio: 4 / 3;
    height: auto;
    border-radius: 20px;
    transition: none;
    /* pushes the image to the card's bottom padding — cards are now a
       uniform height (see .lp2-step-card above), so a shorter card's extra
       space collapses onto this gap instead of stranding the image mid-card */
    margin-top: auto;
  }
  .lp2-step-media::after { border-width: 10px; }
  .lp2-step:not(.is-active):hover .lp2-step-media { transform: none; }

  .lp2-workflow-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
  }
  .lp2-workflow-dots button {
    width: 8px;
    height: 8px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: var(--lp2-cream-warm);
    opacity: 0.4;
    cursor: pointer;
    transition: opacity 260ms ease, transform 260ms ease;
  }
  .lp2-workflow-dots button.is-active { opacity: 1; transform: scale(1.25); }

  /* ---- carousel: orange band goes full-bleed (ignores the section's own
     side padding — it IS the section background now), each card becomes a
     single full-width stacked slide (visual on top, copy below). The JS
     (lp2-carousel.js) measures real offsetWidth/offsetLeft at runtime, so
     it adapts to these sizes with no code changes. ---- */
  .lp2-carousel { padding: 100px 0 0; }
  .lp2-carousel-band { border-radius: 0; padding: 48px 16px; }
  .lp2-carousel-viewport { height: 560px; }
  .lp2-carousel-track { gap: 16px; }
  .lp2-carousel-card {
    width: calc(100vw - 32px);
    height: 560px;
    padding: 24px;
    border-radius: 30px;
    overflow: hidden;
    /* copy is the first DOM child (for a11y/reading order — it names the
       feature before the decorative art) but column-reverse renders the
       LAST child (the visual) first, putting the image on top with no
       markup change. justify-content:flex-end pins both to the TOP here
       (main-start is the visual bottom under column-reverse), so any
       leftover space from a shorter card's copy collects as a plain white
       gap at the card's bottom instead of shifting the image down. */
    flex-direction: column-reverse;
    justify-content: flex-end;
    gap: 20px;
  }
  .lp2-carousel-copy { width: 100%; gap: 12px; }
  .lp2-carousel-title { font-size: 20px; }
  .lp2-carousel-body { font-size: 16px; }
  .lp2-carousel-visual {
    transform: scale(0.75);
    transform-origin: top center;
    margin-bottom: calc(-406px * 0.25);
  }
}
@media (min-width: 769px) {
  .lp2-workflow-dots { display: none; }
}

/* ============================================================================
   PRICING PAGE (/pricing-v2) — built on the same lp2 tokens/components
   ========================================================================== */

/* ---- hero ---- */
.lp2-phero {
  background: var(--lp2-cream);
  padding: 150px 32px 60px;
  display: flex;
  justify-content: center;
}
.lp2-phero-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  width: 100%;
  max-width: 760px;
  text-align: center;
}
.lp2-phero-label { font-size: 20px; }
.lp2 .lp2-phero-headline { font-size: 64px; line-height: 1.05; }
.lp2-phero-sub { font-size: 18px; max-width: 640px; }

/* ---- plan cards ---- */
.lp2-plans {
  background: var(--lp2-cream);
  padding: 30px 32px 90px;
  display: flex;
  justify-content: center;
}
.lp2-plans-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px;
  width: 100%;
  max-width: 1100px;
  align-items: start;
}
.lp2-plan {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 40px;
  padding: 48px 44px;
  box-shadow: 0 24px 60px rgba(20, 20, 20, 0.06);
}
/* Studio is the paid tier, so it carries the accent ring + a deeper lift */
.lp2-plan.is-featured {
  border: 2px solid var(--lp2-orange-warm);
  box-shadow: 0 28px 70px rgba(218, 104, 42, 0.16);
}
.lp2-plan-head { display: flex; flex-direction: column; gap: 12px; }
.lp2-plan-name-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.lp2-plan-name { font-size: 24px; }
.lp2-plan-tag {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--lp2-teal);
  background: rgba(0, 70, 67, 0.10);
  border-radius: 100px;
  padding: 5px 12px;
}
.lp2-plan-price { display: flex; align-items: baseline; gap: 8px; margin: 4px 0 0; }
.lp2-plan-amount {
  font-family: 'Season Sans', 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 44px;
  color: var(--lp2-charcoal);
}
.lp2-plan-period {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  font-size: 18px;
  color: var(--lp2-muted);
}
.lp2-plan-note {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--lp2-orange);
  margin: 0;
}
.lp2-plan-desc { font-size: 16px; }
.lp2-plan-rule { border: none; height: 1px; background: var(--lp2-divider); margin: 32px 0 24px; }
.lp2-plan-subhead {
  font-family: 'Season Sans', 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--lp2-charcoal);
  margin: 0 0 16px;
}
.lp2-plan-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.lp2-plan-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.45;
  color: var(--lp2-muted);
}
.lp2-plan-check { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; color: var(--lp2-orange); }
.lp2-plan.is-featured .lp2-plan-check { color: var(--lp2-teal); }
.lp2-plan-best { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--lp2-divider); }
.lp2-plan-best-copy { font-size: 16px; }
/* pushed to the card's foot, with a fixed gap above it (was margin-top:auto,
   which collapses to 0 on an unconstrained-height flex column) */
.lp2 .lp2-plan-cta {
  margin-top: 32px;
  align-self: flex-start;
  height: 47px;
  padding: 0 20px;
  gap: 8px;
  font-size: 18px;
}
.lp2 .lp2-plan-cta svg { width: 12px; height: 9px; }
/* Full label by default; two shorter fallbacks swap in as the viewport
   narrows, so the button never wraps or overflows its card. */
.lp2-cta-short, .lp2-cta-tiny { display: none; }
.lp2-plan-cta svg { flex-shrink: 0; transition: transform 180ms ease; }
.lp2-plan-cta:hover svg { transform: translateX(4px); }
.lp2-plan-cta.is-ghost {
  background: transparent;
  color: var(--lp2-charcoal);
  border: 2px solid var(--lp2-charcoal);
}
.lp2-plan-cta.is-ghost:hover {
  background: var(--lp2-charcoal);
  color: var(--lp2-cream);
  box-shadow: none;
}

/* ---- Studio-only billing toggle + inline checkout ---- */
.lp2-plan-toggle {
  display: inline-flex;
  gap: 4px;
  background: rgba(20, 20, 20, 0.06);
  border-radius: 100px;
  padding: 4px;
  width: fit-content;
}
.lp2-plan-toggle-opt {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 14px;
  color: var(--lp2-muted);
  background: transparent;
  border: none;
  border-radius: 100px;
  padding: 8px 16px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lp2-plan-toggle-opt.is-active {
  background: #fff;
  color: var(--lp2-charcoal);
  box-shadow: 0 1px 3px rgba(20, 20, 20, 0.10);
}
.lp2-plan-toggle-badge {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 11px;
  color: #fff;
  background: var(--lp2-green);
  border-radius: 100px;
  padding: 2px 7px;
}
.lp2-plan-billed-note {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  font-size: 14px;
  color: var(--lp2-muted);
  margin: 0;
}

/* ---- how the pricing works (teal) ---- */
.lp2-pmodel {
  background: var(--lp2-teal);
  padding: 90px 32px;
  display: flex;
  justify-content: center;
}
.lp2-pmodel-inner { width: 100%; max-width: 900px; text-align: center; }
.lp2 .lp2-pmodel-headline { font-size: 48px; color: var(--lp2-cream); }
.lp2-pmodel-lead {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  font-size: 18px;
  line-height: 1.5;
  color: var(--lp2-cream-warm);
  max-width: 640px;
  margin: 30px auto 20px;
}
/* One real <table>: visible strokes only, no fill — it sits on the same
   teal as the section, so separation comes entirely from the 1px lines.
   Row 1 = the two pricing parts, side by side; row 2 = the Example,
   spanning both columns via colspan. Corner radius is 20px — half the old
   standalone Example card's 40px, per the request to halve it. */
/* border-collapse:collapse paints straddling half-outside the table's box —
   overflow:hidden (needed for the rounded corners) was clipping that outer
   half clean away, so only the internal divider lines ever showed. Separate
   model + explicit per-side borders (each shared line owned by ONE cell, not
   both) fixes it: the outer 2px now renders normally, inside the box. */
.lp2-pmodel-table {
  width: 100%;
  margin: 0 auto;
  border-collapse: separate;
  border-spacing: 0;
  border: 2px solid var(--lp2-cream-warm);
  border-radius: 20px;
  overflow: hidden;
  table-layout: fixed;
}
.lp2-pmodel-cell {
  border: none;
  padding: 36px 40px;
  text-align: left;
  vertical-align: top;
}
.lp2-pmodel-cell--pay {
  border-right: 2px solid var(--lp2-cream-warm);
  border-bottom: 2px solid var(--lp2-cream-warm);
}
.lp2-pmodel-cell--share { border-bottom: 2px solid var(--lp2-cream-warm); }
/* GH₵ stacks above the number at half its size — a currency mark, not a
   competing figure. The 25% side has no unit to split, so it's just the
   one big value span; an empty placeholder keeps both amounts on the same
   baseline. */
.lp2-pmodel-figure {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0 0 14px;
}
.lp2-pmodel-currency {
  font-family: 'Season Sans', 'Plus Jakarta Sans', sans-serif;
  font-weight: 700;
  font-size: 21px;
  line-height: 1.2;
  color: var(--lp2-cream-warm);
}
.lp2-pmodel-value {
  font-family: 'Season Sans', 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 84px;
  line-height: 1;
  color: #fff;
}
.lp2-pmodel-part-copy {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.45;
  color: var(--lp2-cream-warm);
  margin: 0;
}
/* the "+" is decorative, drawn on the shared border between the two top
   cells rather than living in its own column */
.lp2-pmodel-cell--share { position: relative; }
.lp2-pmodel-cell--share::before {
  content: '+';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--lp2-teal);
  font-family: 'Season Sans', 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 26px;
  color: var(--lp2-orange-warm);
}

.lp2-pexample-label {
  font-family: 'Season Sans', 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: #fff;
  margin: 0 0 8px;
}
.lp2-pexample-intro {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  font-size: 16px;
  color: var(--lp2-cream-warm);
  margin: 0 0 24px;
}
.lp2-pexample-rows { margin: 0; display: flex; flex-direction: column; }
.lp2-pexample-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 20px;
  padding: 14px 0;
  border-bottom: 2px solid var(--lp2-cream-warm);
}
.lp2-pexample-row dt,
.lp2-pexample-row dd {
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 16px;
}
.lp2-pexample-row dt { font-weight: 500; color: var(--lp2-cream-warm); }
.lp2-pexample-row dd { font-weight: 600; color: #fff; }
/* the line the reader actually cares about — orange reads clearly on teal,
   where the old teal-on-teal treatment would have vanished */
.lp2-pexample-row.is-keep dt,
.lp2-pexample-row.is-keep dd { color: var(--lp2-orange-warm); font-weight: 600; }
/* gap to the closing sentence, halved from 24px per the request */
.lp2-pexample-total {
  margin: 12px 0 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 1.5;
  color: var(--lp2-cream-warm);
}
.lp2-pexample-total strong { font-weight: 700; color: #fff; }

/* ---- one platform ---- */
.lp2-pplatform {
  background: var(--lp2-cream);
  padding: 90px 32px;
  display: flex;
  justify-content: center;
}
.lp2-pplatform-inner { width: 100%; max-width: 1227px; text-align: center; }
.lp2-pplatform-headline { font-size: 48px; }
.lp2-pplatform-grid {
  margin-top: 48px;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 24px;
}
.lp2-pstep { text-align: left; }
.lp2-pstep-thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 182 / 240;
  border-radius: 60px;
  overflow: hidden;
  margin-bottom: 20px;
}
.lp2-pstep-thumb img { width: 100%; height: 100%; object-fit: cover; }
.lp2-pstep-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 60px;
  border: 10px solid var(--lp2-border-ring);
  pointer-events: none;
}
.lp2-pstep-label { font-size: 20px; margin-bottom: 8px; }
.lp2-pstep-copy { font-size: 15px; }

/* ---- FAQ ---- */
.lp2-pfaq {
  background: var(--lp2-cream);
  padding: 0 32px 120px;
  display: flex;
  justify-content: center;
}
.lp2-pfaq-inner { width: 100%; max-width: 820px; }
.lp2 .lp2-pfaq-headline { font-size: 48px; text-align: center; margin-bottom: 56px; }
.lp2-pfaq-list { display: flex; flex-direction: column; }
.lp2-pfaq-item { border-top: 1px solid var(--lp2-divider); }
/* no line directly under the headline — the gap above is the separation */
.lp2-pfaq-item:first-child { border-top: none; }
.lp2-pfaq-item:last-child { border-bottom: 1px solid var(--lp2-divider); }
.lp2-pfaq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 26px 0;
}
.lp2-pfaq-item summary::-webkit-details-marker { display: none; }
.lp2-pfaq-q {
  font-family: 'Season Sans', 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 20px;
  color: var(--lp2-charcoal);
}
/* CSS-drawn +/− so there's no icon dependency */
.lp2-pfaq-mark {
  position: relative;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}
.lp2-pfaq-mark::before,
.lp2-pfaq-mark::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  background: var(--lp2-orange);
  transform: translate(-50%, -50%);
  transition: opacity 200ms ease, transform 200ms ease;
}
.lp2-pfaq-mark::before { width: 16px; height: 2px; }
.lp2-pfaq-mark::after { width: 2px; height: 16px; }
.lp2-pfaq-item[open] .lp2-pfaq-mark::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
.lp2-pfaq-a { font-size: 16px; padding: 0 44px 26px 0; margin: 0; }

/* ---- responsive ---- */
@media (max-width: 1024px) {
  .lp2-pplatform-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .lp2-phero { padding-top: 120px; }
  /* .lp2 prefix matches the base rule's specificity (.lp2 .lp2-phero-headline)
     — without it this override silently lost to the base 64px on mobile
     (excluded from the header font-size reduction — this is the page's hero) */
  .lp2 .lp2-phero-headline { font-size: 38px; }
  .lp2-phero-label { font-size: 18px; }
  .lp2-phero-sub { font-size: 16px; }
  .lp2-plans-grid { grid-template-columns: minmax(0, 1fr); }
  .lp2-plan { padding: 36px 28px; }
  .lp2-plan-name { font-size: 18px; }
  .lp2-plan-amount { font-size: 36px; }
  /* first fallback: still fits down to ~370px */
  .lp2-cta-full { display: none; }
  .lp2-cta-short { display: inline; }
  .lp2 .lp2-plan-cta { margin-top: 28px; font-size: 16px; }
  /* .lp2 prefix on all three matches (or exceeds) each base rule's
     specificity — .lp2-pfaq-headline's base is .lp2 .lp2-pfaq-headline
     (2 classes), so the bare 1-class version here was silently losing */
  .lp2 .lp2-pmodel-headline,
  .lp2 .lp2-pplatform-headline,
  .lp2 .lp2-pfaq-headline { font-size: 30px; }
  .lp2-pmodel-table { display: block; border: none; }
  .lp2-pmodel-table tbody, .lp2-pmodel-table tr { display: block; }
  .lp2-pmodel-cell, .lp2-pmodel-cell--example {
    display: block;
    width: auto !important;
    border: 2px solid var(--lp2-cream-warm);
    border-radius: 20px;
    padding: 28px 22px;
    margin-bottom: 16px;
  }
  .lp2-pmodel-cell--share::before { left: 50%; top: -16px; transform: translate(-50%, -50%); }
  .lp2-pmodel-value { font-size: 56px; }
  .lp2-pexample-row { flex-direction: column; gap: 4px; }
  .lp2-pplatform-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp2-pfaq-q { font-size: 17px; }
}

@media (max-width: 370px) {
  .lp2-cta-short { display: none; }
  .lp2-cta-tiny { display: inline; }
}

/* ============================================================================
   MEDIA HOUSES PAGE (/for-media-houses) — restyled on the lp2 system
   ========================================================================== */

/* shared bits */
.lp2 .lp2-mh-eyebrow {
  font-size: 16px;
  color: var(--lp2-orange);
  margin: 0;
}
.lp2 .lp2-mh-sec.is-teal .lp2-mh-eyebrow { color: var(--lp2-orange-warm); }

/* ---- hero ---- */
.lp2-mh-hero {
  background: var(--lp2-cream);
  padding: 150px 32px 90px;
  display: flex;
  justify-content: center;
}
.lp2-mh-hero-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  width: 100%;
  max-width: 860px;
  text-align: center;
}
.lp2 .lp2-mh-h1 { font-size: 64px; line-height: 1.05; max-width: 780px; }
.lp2-mh-lead { font-size: 18px; max-width: 760px; }
.lp2-mh-note { font-size: 15px; max-width: 620px; }

/* ---- sections ---- */
.lp2-mh-sec {
  background: var(--lp2-cream);
  padding: 90px 32px;
  display: flex;
  justify-content: center;
}
.lp2-mh-sec.is-teal { background: var(--lp2-teal); }
.lp2-mh-inner { width: 100%; max-width: 1227px; }
.lp2-mh-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.lp2 .lp2-mh-h2 { font-size: 48px; line-height: 1.1; }
.lp2 .lp2-mh-sec.is-teal .lp2-mh-h2 { color: var(--lp2-cream); }
.lp2-mh-sub { font-size: 18px; }

/* ---- feature cards ---- */
.lp2-mh-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 30px;
}
.lp2-mh-card {
  background: #fff;
  border-radius: 40px;
  padding: 40px 36px;
  box-shadow: 0 24px 60px rgba(20, 20, 20, 0.06);
}
/* icon sits in a soft tinted tile, matching the pill/chip language elsewhere */
.lp2-mh-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--lp2-cream-warm);
  color: var(--lp2-orange);
  margin-bottom: 26px;
}
.lp2-mh-ico svg { width: 26px; height: 26px; }
.lp2 .lp2-mh-card-title { font-size: 20px; margin-bottom: 12px; line-height: 1.3; }
.lp2-mh-card-copy { font-size: 16px; }

/* ---- workflow rows (teal) ---- */
.lp2-mh-rows {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
}
.lp2-mh-row {
  border: 2px solid var(--lp2-cream-warm);
  border-radius: 20px;
  padding: 34px 32px;
}
.lp2 .lp2-mh-row-title { font-size: 20px; color: #fff; margin-bottom: 12px; line-height: 1.3; }
.lp2-mh-row-copy {
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  color: var(--lp2-cream-warm);
  margin: 0;
}

/* ---- closing CTA ---- */
.lp2-mh-cta {
  background: var(--lp2-cream);
  padding: 90px 32px 120px;
  display: flex;
  justify-content: center;
}
.lp2-mh-cta-band {
  width: 100%;
  max-width: 1227px;
  background: var(--lp2-orange-warm);
  border-radius: 90px;
  padding: 96px 40px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.lp2 .lp2-mh-cta-headline { font-size: 48px; line-height: 1.1; color: var(--lp2-cream); max-width: 760px; }
/* light button variant — the orange default would vanish on the orange band */
.lp2 .lp2-btn.is-light { background: var(--lp2-cream); color: var(--lp2-charcoal); }
.lp2 .lp2-btn.is-light:hover { box-shadow: 0 10px 24px rgba(20, 20, 20, 0.18); }

/* ---- responsive ---- */
@media (max-width: 1024px) {
  .lp2-mh-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .lp2-mh-hero { padding: 120px 24px 60px; }
  .lp2 .lp2-mh-h1 { font-size: 40px; }
  .lp2-mh-lead { font-size: 16px; }
  .lp2-mh-sec { padding: 60px 24px; }
  .lp2 .lp2-mh-h2 { font-size: 32px; }
  .lp2-mh-head { margin-bottom: 36px; }
  .lp2-mh-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .lp2-mh-card { padding: 30px 26px; border-radius: 30px; }
  .lp2-mh-rows { grid-template-columns: minmax(0, 1fr); }
  .lp2-mh-cta { padding: 60px 24px 80px; }
  .lp2-mh-cta-band { border-radius: 40px; padding: 60px 26px; }
  .lp2 .lp2-mh-cta-headline { font-size: 30px; }
}

/* ============================================================================
   BRANDS PAGE (/brands) — restyled on the lp2 system, Purple/Brand suite
   Reuses the shared .lp2-mh-* section/hero/grid/card/cta scaffolding built
   for /for-media-houses (same visual system, different suite colour) and
   adds a handful of brand-page-only components for content shapes that
   scaffold didn't already cover — a two-up "choice" card, a centered
   statement band, numbered steps, and a check-marked list.
   ========================================================================== */

/* Dark full-bleed section — the purple sibling of .lp2-mh-sec.is-teal.
   Uses --lp2-purple-dark, not the suite's own Deep, so body-weight text on
   it clears AA (see the --lp2-purple-dark root comment). */
.lp2-mh-sec.is-purple { background: var(--lp2-purple-dark); }
.lp2 .lp2-mh-sec.is-purple .lp2-mh-h2 { color: var(--lp2-cream); }
.lp2 .lp2-mh-sec.is-purple .lp2-mh-eyebrow { color: var(--lp2-purple-bright); }
.lp2-mh-sec.is-purple .lp2-mh-sub { color: rgba(242, 242, 236, 0.78); }

/* Purple icon tile for the "Everything you need" 5-card grid — scoped to
   this page only (.lp2-brands wraps <main>) so /for-media-houses' own
   .lp2-mh-ico (orange) is untouched. */
.lp2-brands .lp2-mh-ico { background: var(--lp2-purple-tint); color: var(--lp2-purple); }
/* eyebrow labels on light sections; .is-purple's own eyebrow rule (higher
   specificity, --lp2-purple-bright) still wins on the dark sections */
.lp2-brands .lp2-mh-eyebrow { color: var(--lp2-purple); }

/* Primary button fill — purple, not the master-brand orange, on this page
   only. Text stays white per clipad-brand-guidelines.md §6.2/v1.3 (the
   documented, deliberate override: white on Deep Purple fails the strict
   4.5:1 body-text ratio at 3.61:1 but is kept anyway for button legibility
   consistency across every suite). is-light/is-ghost/is-ghost-light already
   define their own fill and must not be caught by this. */
.lp2-brands .lp2-btn:not(.is-light):not(.is-ghost):not(.is-ghost-light) { background: var(--lp2-purple); }
.lp2-brands .lp2-btn:not(.is-light):not(.is-ghost):not(.is-ghost-light):hover { box-shadow: 0 10px 24px rgba(141, 117, 230, 0.35); }

/* Hero button row — two CTAs side by side, wraps on narrow screens. */
.lp2-br-btnrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; justify-content: center; }

/* ---- "Reach through the right voices" — Studio vs Creator choice cards ---- */
.lp2-br-choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.lp2-br-choice-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: #fff;
  border-radius: 40px;
  padding: 44px 40px;
  box-shadow: 0 24px 60px rgba(20, 20, 20, 0.06);
  text-decoration: none;
  transition: transform 180ms ease, box-shadow 180ms ease;
}
.lp2-br-choice-card:hover { transform: translateY(-4px); box-shadow: 0 30px 70px rgba(20, 20, 20, 0.1); }
.lp2-br-choice-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 18px;
  background: var(--lp2-purple-tint);
  color: var(--lp2-purple);
  margin-bottom: 26px;
}
.lp2-br-choice-ico svg { width: 26px; height: 26px; }
.lp2 .lp2-br-choice-label { font-size: 16px; color: var(--lp2-purple); margin-bottom: 10px; }
.lp2 .lp2-br-choice-title { font-size: 26px; line-height: 1.25; margin-bottom: 12px; }
.lp2-br-choice-body { font-size: 16px; margin-bottom: 24px; }
.lp2-br-choice-tag {
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--lp2-purple-tint);
  color: var(--lp2-purple-dark);
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
}

/* ---- centered statement band (used inside a .is-purple .lp2-mh-sec) ---- */
.lp2-br-statement {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.lp2 .lp2-br-statement-headline { font-size: 44px; line-height: 1.15; color: var(--lp2-cream); }
.lp2-br-statement-body { font-size: 18px; color: rgba(242, 242, 236, 0.82); }
.lp2-br-statement-note { font-size: 16px; color: var(--lp2-purple-bright); font-weight: 600; }

/* ---- "From brief to live campaign" — 4 numbered steps ---- */
.lp2-br-steps-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px; }
.lp2-br-step { display: flex; flex-direction: column; gap: 10px; }
.lp2 .lp2-br-step-num { font-size: 38px; font-weight: 700; color: var(--lp2-purple); line-height: 1; }
.lp2 .lp2-br-step-title { font-size: 19px; line-height: 1.3; }
.lp2-br-step-body { font-size: 15.5px; }

/* ---- "Know where your brand appeared" — check-marked list ---- */
.lp2-br-checklist-wrap { max-width: 900px; margin: 0 auto; }
.lp2-br-checklist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 32px; margin-top: 8px; }
.lp2-br-check-item {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: 17px;
  color: var(--lp2-cream);
}
.lp2-br-check-ico {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--lp2-purple-bright);
  color: var(--lp2-purple-dark);
}
.lp2-br-check-ico svg { width: 12px; height: 12px; }
.lp2-br-checklist-note { margin-top: 32px; font-size: 15.5px; color: rgba(242, 242, 236, 0.78); text-align: center; }

/* ---- closing CTA — purple (Deep) variant ---- */
.lp2-mh-cta-band.is-purple { background: var(--lp2-purple); }
/* Deep Purple: white passes only at "large text" contrast (3:1, not 4.5:1) —
   per clipad-brand-guidelines.md §6.2, so the headline (48px) is safe in
   white but the smaller supporting line below it uses dark text instead. */
.lp2-br-cta-sub { font-size: 17px; color: rgba(20, 20, 20, 0.78); max-width: 640px; }

/* ---- responsive ---- */
@media (max-width: 860px) {
  .lp2-br-choice-grid { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .lp2-br-choice-card { padding: 32px 28px; border-radius: 30px; }
  .lp2 .lp2-br-statement-headline { font-size: 30px; }
  .lp2-br-statement-body { font-size: 16px; }
  .lp2-br-steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 20px; }
  .lp2-br-checklist { grid-template-columns: minmax(0, 1fr); }
}