/* No blue tap flash on phones */
html { -webkit-tap-highlight-color: transparent; }
*, *::before, *::after { -webkit-tap-highlight-color: transparent; }

/* ============================================================================
   ClipAd — Landing page v3 (brand/advertiser homepage, rebuilt 2026-09-30)
   Pixel-matched to the "Website Builder" Figma Make export (1440px frame).
   Everything is scoped under .lp3-main so the shared site nav + footer
   (partials/nav, partials/footer) keep their own styles untouched.
   Values mirror the export's Tailwind utilities 1:1 — don't round them onto
   the marketing.css type/button scale, or the page drifts from the design.
   ========================================================================== */

body.lp3 { background: #f8f2ed; }


.lp3-main {
  --lp3-ink: #1f1f1f;
  --lp3-muted: #6f625b;
  --lp3-orange: #FF5900;
  --lp3-orange-hover: #D14900;
  --lp3-cream: #f8f2ed;
  --lp3-card: #fff7ef;
  --lp3-line: #e8d8cc;
  --lp3-black: #121212;
  --lp3-mulberry-dark: #43041F;
  --lp3-sans: var(--font-body);
  --lp3-season: var(--font-display);
  --lp3-ease: cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  background: var(--lp3-cream);
  line-height: 1.5;
}
.lp3-main :is(h1, h2, h3, p) { margin: 0; letter-spacing: normal; }
.lp3-main img { display: block; max-width: none; height: auto; }
.lp3-main section { flex-shrink: 0; width: 100%; }

/* Shared helpers */
.lp3-main .lp3-fill {
  position: absolute; inset: 0; width: 100%; height: 100%;
  max-width: none; object-fit: cover; pointer-events: none;
}
.lp3-main .lp3-crop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lp3-main .lp3-crop img { position: absolute; max-width: none; }

/* Buttons (design: px-7 py-4, 17px semibold, line-height inherits 1.5) */
.lp3-main .lp3-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--btn-md-h);
  padding: 0 var(--btn-md-px);
  border-radius: 9999px;
  background: var(--lp3-orange);
  font-size: var(--btn-md-fs);
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 150ms var(--lp3-ease);
}
.lp3-main .lp3-btn:hover { background: var(--lp3-orange-hover); }
.lp3-main .lp3-btn span {
  font-family: var(--lp3-sans);
  font-weight: 600;
  font-size: var(--btn-md-fs);
  line-height: 1;
  color: #fff;
  white-space: nowrap;
}
.lp3-main .lp3-btn.is-light { background: var(--lp3-card); border: 1px solid var(--lp3-line); }
.lp3-main .lp3-btn.is-light:hover { background: #f0e8df; }
.lp3-main .lp3-btn.is-light span { color: var(--lp3-ink); }
.lp3-main .lp3-btn.is-white { background: #fff; margin-top: 4px; }
.lp3-main .lp3-btn.is-white:hover { background: #f0e8df; }
.lp3-main .lp3-btn.is-white span { color: #121212; }
.lp3-main .lp3-btn.is-mulberry { background: var(--lp3-mulberry-dark); }
.lp3-main .lp3-btn.is-mulberry:hover { background: #5a0629; }

/* ============================================================================
   Hero
   ========================================================================== */
/* Hero fills the first screen: viewport minus the sticky site nav (65px).
   The phone image sits flush on the hero's bottom edge (no gap above the
   partners band) and takes about half the width; the copy is centred
   vertically in the other half. */
.lp3-hero {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  min-height: 528px;
  background: var(--lp3-cream);
}
.lp3-hero-phone {
  display: none;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 50%;
  height: calc(100% - 48px);
  pointer-events: none;
  user-select: none;
}
.lp3-hero-phone img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  max-width: none; object-fit: contain; object-position: left bottom;
}
/* Signature motif drawn around the hero copy (lp3-hero-motif.js sets its size
   and path). Outline only: 1px, muted grey, behind the text. */
.lp3-hero-copy { position: relative; }
.lp3-hero-copy > :not(.lp3-hero-motif) { position: relative; z-index: 1; }
.lp3-hero-motif {
  display: none;
  position: absolute;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
  stroke: none;   /* no outline: the shape is the fill */
}
.lp3-hero-motif :is(path, circle) { vector-effect: non-scaling-stroke; }
@media (min-width: 1024px) { .lp3-hero-motif.is-ready { display: block; } }
.lp3-hero-wrap {
  display: flex;
  justify-content: flex-start; /* copy hugs the image; wide screens add space on the right, not in the middle */
  width: 100%;
  padding: 48px 107px 48px 64px;
}
.lp3-hero-copy {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}
.lp3-main .lp3-hero-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--h1);
  line-height: var(--h1-lh);
  color: var(--lp3-ink);
}
.lp3-hero-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--lead);
  line-height: var(--lead-lh);
  max-width: 614px;
  color: var(--lp3-muted);
}
.lp3-hero-actions { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

@media (min-width: 1024px) {
  .lp3-hero { min-height: max(600px, calc(100vh - 65px)); min-height: max(600px, calc(100svh - 65px)); }
  .lp3-hero-phone { display: block; }
  .lp3-hero-wrap { padding-left: calc(50% + 32px); }
  .lp3-hero-copy { max-width: 657px; }
}

/* ============================================================================
   Media-partners band
   ========================================================================== */
.lp3-partners {
  position: relative;
  overflow: hidden;
  padding: 48px 0 64px;
  background: var(--lp3-black);
}
/* Each set ends with the same 60px gap that separates its logos, so sliding
   the track by half of it (-50% -> 0) loops with no seam; 4 copies keep the band full up to ~2600px wide. */
.lp3-partners-track { display: flex; width: max-content; animation: lp3-partners-left 60s linear infinite; }
.lp3-partners-set { display: flex; flex-shrink: 0; gap: 60px; align-items: center; padding-right: 60px; }
@keyframes lp3-partners-left { from { transform: translateX(0); } to { transform: translateX(-50%); } }
/* The logos' visible glyphs sit ~25px below the title (their boxes touch it);
   +20% of that is 5px. Selector is .lp3-main-scoped to beat the reset margin. */
.lp3-main .lp3-partners-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--micro);
  line-height: var(--micro-lh);
  position: relative;
  z-index: 11;
  margin: 0 0 14px;
  text-align: center;
  letter-spacing: 0.14em;
  color: rgba(255, 247, 239, 0.72);
}
.lp3-partners-fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 240px;
  z-index: 10;
  pointer-events: none;
}
.lp3-partners-fade.is-left { left: 0; background-image: linear-gradient(to right in oklab, var(--lp3-black) 0%, rgba(0, 0, 0, 0) 100%); }
.lp3-partners-fade.is-right { right: 0; background-image: linear-gradient(to left in oklab, var(--lp3-black) 0%, rgba(0, 0, 0, 0) 100%); }
.lp3-logo { position: relative; flex-shrink: 0; height: 78px; }
.lp3-logo.w-192 { width: 192px; }
.lp3-logo.w-208 { width: 208px; }
.lp3-logo.w-224 { width: 224px; }
.lp3-logo.is-square { width: 78px; }
.lp3-logo.is-square img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  max-width: none; object-fit: cover; pointer-events: none;
}
.lp3-logo-crop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.lp3-main .lp3-logo-crop img { position: absolute; left: 0; width: 100%; max-width: none; }

/* ============================================================================
   Intro
   ========================================================================== */
.lp3-intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  padding: 96px 64px 48px;
  background: #fff;
  text-align: center;
}
.lp3-main .lp3-intro-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--h2-sm);
  line-height: var(--h2-sm-lh);
  max-width: 486px;
  color: var(--lp3-orange);
}
.lp3-intro-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--lead);
  line-height: var(--lead-lh);
  max-width: 760px;
  color: var(--lp3-muted);
}

/* ============================================================================
   Video explainer
   ========================================================================== */
.lp3-video {
  display: flex;
  flex-direction: column;
  gap: 28px;
  align-items: center;
  /* --lp3-video-room is set by lp3-video-grow.js: half the extra height the
     box gains at full size, so the grown box never covers its neighbours. */
  padding: calc(48px + var(--lp3-video-room, 0px)) 64px calc(96px + var(--lp3-video-room, 0px));
  background: linear-gradient(to bottom, #ffffff 0%, #fff7ef 35%);
  scroll-margin-top: 24px;
}
.lp3-main .lp3-video-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--h2-sm);
  line-height: var(--h2-sm-lh);
  max-width: 820px;
  color: var(--lp3-ink);
  text-align: center;
}
.lp3-video-body {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--lead);
  line-height: var(--lead-lh);
  max-width: 680px;
  color: var(--lp3-muted);
  text-align: center;
}
.lp3-video-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 1140px;
  aspect-ratio: 16 / 9;   /* the whole video frame always shows, on every screen */
  padding: 0;
  border: 0;
  border-radius: 28px;
  transform-origin: 50% 50%;
  will-change: transform;
  background: none;   /* the thumbnail/video fill the box; a dark backdrop only showed as an outline at the rounded edges */
  cursor: pointer;
}
.lp3-video-play {
  position: relative;
  flex-shrink: 0;
  width: 88px;
  height: 88px;
  transition: scale 200ms var(--lp3-ease); /* never transition transform: the script sets it every frame */
}
.lp3-video-wrap { position: relative; width: 100%; max-width: 1140px; }
.lp3-video-box { position: relative; overflow: hidden; }
.lp3-video-el { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
/* The thumbnail sits over the video until it is really playing, so the box never
   shows the video's black first frame. lp3-video-play.js toggles .is-started. */
.lp3-video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; pointer-events: none; transition: opacity 400ms var(--lp3-ease); }
.lp3-video-box.is-started .lp3-video-poster { opacity: 0; }
.lp3-video-box .lp3-video-play { z-index: 1; transition: scale 200ms var(--lp3-ease), opacity 200ms var(--lp3-ease); }
.lp3-video-box.is-playing .lp3-video-play { opacity: 0; pointer-events: none; }
.lp3-video-box:hover .lp3-video-play { scale: 1.1; } /* `scale` so it stacks with the script's counter-scale transform */
/* Frosted, translucent circle with a white play icon; no border. */
.lp3-video-play {
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.11);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
          backdrop-filter: blur(14px) saturate(1.2);
}
.lp3-video-play svg { width: 40%; height: 40%; display: block; }

/* ============================================================================
   Campaign CTA (dark)
   ========================================================================== */
.lp3-campaign {
  display: flex;
  flex-direction: column;
  gap: 60px;
  align-items: center;
  justify-content: center;
  padding: 96px 64px;
  background: var(--lp3-black);
}
.lp3-campaign-art {
  position: relative;
  flex-shrink: 0;
  display: inline-grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  grid-template-rows: repeat(1, minmax(0, 1fr));
  place-items: start;
}
.lp3-campaign-visual { grid-column-start: 1; grid-row-start: 1; position: relative; width: 320px; height: 323px; }
.lp3-campaign-dot { grid-column-start: 1; grid-row-start: 1; position: relative; width: 56px; height: 56px; margin: 267px 0 0 263px; }
.lp3-main :is(.lp3-campaign-visual, .lp3-campaign-dot) img { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp3-campaign-copy { position: relative; z-index: 2; display: grid; width: 484px; max-width: 100%; overflow: hidden; }
/* Both panes share one grid cell (the box is as tall as the taller one);
   .is-callback slides text out left and the form in from the right. */
.lp3-campaign-pane {
  grid-area: 1 / 1;
  display: flex; flex-direction: column; gap: 30px; align-items: flex-start; justify-content: center;
  transition: transform .5s cubic-bezier(.22,.8,.24,1), opacity .35s ease;
}
.lp3-campaign-pane.is-form { gap: 14px; align-items: stretch; transform: translateX(100%); opacity: 0; }
.lp3-campaign-copy.is-callback .lp3-campaign-pane.is-text { transform: translateX(-100%); opacity: 0; }
.lp3-campaign-copy.is-callback .lp3-campaign-pane.is-form { transform: none; opacity: 1; }
.lp3-cb-form {
  display: flex; flex-direction: column; gap: 12px;
  padding: 32px; border-radius: 16px; background: #1f1f1f;
}
.lp3-cb-row { display: flex; gap: 12px; }
.lp3-cb-row .lp3-cb-input { flex: 1; min-width: 0; }
.lp3-cb-input {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--input);
  height: 58px; padding: 0 18px; border-radius: 10px;
  border: 1px solid transparent; background: rgba(255, 255, 255, 0.05); /* border shows only on focus */ color: #fff;
  transition: border-color .15s ease, background .15s ease;
}
.lp3-cb-input::placeholder { color: rgba(255, 247, 239, 0.5); }
.lp3-cb-input:focus { outline: none; border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.08); }
.lp3-cb-input[aria-invalid="true"] { border-color: #e5484d; }
.lp3-cb-submit {
  flex-shrink: 0; align-self: center; height: var(--btn-md-h); padding: 0 var(--btn-md-px); border: 0; border-radius: 9999px;
  background: var(--lp3-orange); color: #fff; cursor: pointer;
  font-family: var(--btn-font); font-weight: 600; font-size: var(--btn-md-fs);
  transition: background-color .15s ease;
}
.lp3-cb-submit:hover { background: var(--lp3-orange-hover); }
.lp3-cb-submit:disabled { opacity: .6; cursor: default; }
.lp3-cb-msg { font-family: var(--font-body); font-weight: 400; font-size: var(--small); line-height: var(--small-lh); min-height: 0; color: rgba(255, 247, 239, 0.7); }
.lp3-cb-msg:empty { display: none; }
.lp3-cb-msg.is-error { color: #ff8a8a; }
.lp3-cb-back {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--small);
  align-self: flex-start; padding: 4px 0; border: 0; background: none; cursor: pointer; color: rgba(255, 247, 239, 0.6);
}
.lp3-cb-back:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) { .lp3-campaign-pane { transition: none; } }
@media (max-width: 767px) {
  /* Stop the form growing past the screen, then park Submit on the right of Back. */
  .lp3-campaign-copy { grid-template-columns: minmax(0, 1fr); }
  .lp3-campaign-pane.is-form { position: relative; min-width: 0; }
  .lp3-cb-form { padding: 22px; min-width: 0; }
  .lp3-cb-input { width: 100%; min-width: 0; }
  .lp3-cb-submit { position: absolute; right: 0; bottom: 0; padding: 0 var(--btn-md-px); }
  .lp3-cb-back { min-height: 58px; padding: 0 12px 0 0; display: flex; align-items: center; }
}
/* Skip animation (lp3-campaign-bounce.js): the dot sits below the photo and
   the copy (z 1 vs 2), grows from its bottom edge, and drops fading
   breadcrumb dots into .lp3-campaign-trail. */
.lp3-campaign { position: relative; overflow: hidden; }
.lp3-campaign-visual { z-index: 2; } /* the ball passes behind the photo on its way home */
.lp3-campaign-dot { z-index: 1; transform-origin: 50% 100%; will-change: transform; }
.lp3-campaign-trail { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.lp3-campaign-crumb { position: absolute; border-radius: 50%; background: #2a2a2a; }
.lp3-campaign-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  max-width: 484px;
  color: #fff;
}
.lp3-main .lp3-campaign-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--h2-sm);
  line-height: var(--h2-sm-lh);
  color: #fff;
  white-space: nowrap;
}
.lp3-campaign-body { font-family: var(--font-body); font-weight: 400; font-size: var(--body); line-height: var(--body-lh); }
@media (min-width: 1024px) { .lp3-campaign { flex-direction: row; } }

/* ============================================================================
   Benefits
   ========================================================================== */
.lp3-benefits {
  display: flex;
  flex-direction: column;
  gap: 48px;
  align-items: center;
  padding: 96px 64px;
  background: #fff;
}
.lp3-main .lp3-benefits-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--h2);
  line-height: var(--h2-lh);
  color: var(--lp3-ink);
  text-align: center;
  white-space: nowrap;
}
.lp3-benefits-row {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: stretch;
  justify-content: center;
  width: 100%;
}
.lp3-benefit {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
  max-width: 400px;
}
.lp3-benefit.is-first { gap: 30px; }
.lp3-benefit-media {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 307px;
  padding: 32px;
  border-radius: 24px;
  overflow: hidden;
}
.lp3-benefit-art { position: relative; width: 100%; }
.lp3-benefit-art.is-reach { height: 240px; max-width: 356px; }
.lp3-benefit-art.is-trusted { aspect-ratio: 336 / 257; }
.lp3-benefit-art.is-track { height: 235px; max-width: 353px; }
.lp3-benefit-text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  flex: 1;
  width: 100%;
  padding: 10px 16px;
}
.lp3-main .lp3-benefit-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--h3);
  line-height: var(--h3-lh);
  color: var(--lp3-ink);
  white-space: nowrap;
}
.lp3-benefit-body { font-family: var(--font-body); font-weight: 400; font-size: var(--body); line-height: var(--body-lh); color: var(--lp3-muted); }
@media (min-width: 1024px) { .lp3-benefits-row { flex-direction: row; } }

/* ============================================================================
   How it works
   ========================================================================== */
/* .lp3-how-pin holds the whole section's look. By default it is a normal
   block. With .is-pinned (added by lp3-how-scroll.js on desktop), the section
   grows taller than the screen, the pin sticks to the top for that extra
   distance, and the script moves the steps up as the page scrolls.
   Keep `overflow` off .lp3-how itself — it would break the sticky pin. */
.lp3-how { position: relative; background: var(--lp3-card); }
.lp3-how-pin {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 56px;
  align-items: center;
  padding: 120px 64px;
}
.lp3-how.is-pinned { height: calc(100vh + var(--lp3-how-dist, 760px)); }
.lp3-how.is-pinned .lp3-how-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  justify-content: center;
  padding: 0 64px;
}
.lp3-how-texture {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  pointer-events: none;
}
/* how-texture.webp is stored pre-rotated 90deg, so a plain cover fill spans
   the whole section at any width (the export's rotated 1328x1440 box left
   bare edges on screens wider than 1440). */
.lp3-how-fade { position: absolute; left: 0; right: 0; height: 40%; pointer-events: none; }
.lp3-how-fade.is-top { top: 0; background-image: linear-gradient(in oklab, #fff 0%, rgba(0, 0, 0, 0) 100%); }
.lp3-how-fade.is-bottom { bottom: 0; background-image: linear-gradient(in oklab, rgba(0, 0, 0, 0) 0%, var(--lp3-card) 100%); }
.lp3-how-inner {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  max-width: 1312px;
}
.lp3-steps {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 24px;
  align-items: flex-start;
  width: 100%;
}
.lp3-main .lp3-steps-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--h2);
  line-height: var(--h2-lh);
  max-width: 572px;
  color: var(--lp3-ink);
}
.lp3-step {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  width: 100%;
  max-width: 555px;
  padding: 28px;
  border-radius: 24px;
}
.lp3-step-icon { position: relative; flex-shrink: 0; width: 44px; height: 44px; }
.lp3-main .lp3-step-icon > img { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp3-step-icon.is-4 { display: flex; align-items: center; justify-content: center; border-radius: 22px; }
.lp3-step-icon.is-4 > div { position: relative; width: 27.5px; height: 25px; }
.lp3-main .lp3-step-icon.is-4 img { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp3-main .lp3-step-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--h3);
  line-height: var(--h3-lh);
  color: var(--lp3-ink);
}
.lp3-step-body { font-family: var(--font-body); font-weight: 400; font-size: var(--body); line-height: var(--body-lh); color: var(--lp3-muted); }
.lp3-step-line { position: relative; width: 100%; max-width: 554px; height: 1px; }

/* Steps list. Default (phones, tablets, reduced motion): all 4 steps shown
   in a plain column, no line under the last one. */
.lp3-steps { position: relative; }
.lp3-steps-window { width: 100%; max-width: 555px; }
.lp3-step-unit { display: flex; flex-direction: column; gap: 24px; padding-bottom: 24px; }
.lp3-step-unit:last-child { padding-bottom: 0; }
.lp3-step-unit:last-child .lp3-step-line { display: none; }
.lp3-steps-blur { display: none; }

/* Pinned (desktop): the window covers the title area plus a 2-step-tall area
   below it (--lp3-steps-head = title height + 24px, set by the script). Steps
   rise up behind the title: a mask fades them out, and 4 stacked blur layers
   (no colour, strongest at the top) soften them first. */
/* The Talk to us button sits left-aligned under the steps; when pinned it gets its own 72px row so the scrolling window ends above it. */
.lp3-main .lp3-steps-cta { align-self: flex-start; margin-top: 8px; }
.lp3-how.is-pinned .lp3-steps { height: calc(var(--lp3-steps-head, 128px) + 506px + 72px); gap: 0; }
.lp3-how.is-pinned .lp3-steps-cta { position: absolute; left: 0; bottom: 0; margin-top: 0; z-index: 4; }
.lp3-how.is-pinned .lp3-steps-title { position: relative; z-index: 3; }
.lp3-how.is-pinned .lp3-steps-window {
  position: absolute;
  inset: 0 0 72px 0;
  max-width: 555px;
  overflow: hidden;
  padding-top: var(--lp3-steps-head, 128px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--lp3-steps-head, 128px) - 56px), #000 calc(var(--lp3-steps-head, 128px) + 56px), #000 calc(100% - 40px), transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0, transparent calc(var(--lp3-steps-head, 128px) - 56px), #000 calc(var(--lp3-steps-head, 128px) + 56px), #000 calc(100% - 40px), transparent 100%);
}
.lp3-how.is-pinned .lp3-steps-track { will-change: transform; }
.lp3-how.is-pinned .lp3-step-unit:last-child { padding-bottom: 24px; }
.lp3-how.is-pinned .lp3-step-unit:last-child .lp3-step-line { display: block; visibility: hidden; }
.lp3-how.is-pinned .lp3-steps-blur {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  max-width: 555px;
  height: calc(var(--lp3-steps-head, 128px) + 64px);
  z-index: 2;
  pointer-events: none;
}
.lp3-steps-blur > div { position: absolute; inset: 0; }
.lp3-steps-blur > div:nth-child(1) { -webkit-backdrop-filter: blur(1px); backdrop-filter: blur(1px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0%, #000 60%, transparent 100%); }
.lp3-steps-blur > div:nth-child(2) { -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 80%); mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 80%); }
.lp3-steps-blur > div:nth-child(3) { -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 60%); mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 60%); }
.lp3-steps-blur > div:nth-child(4) { -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 15%, transparent 40%); mask-image: linear-gradient(to bottom, #000 0%, #000 15%, transparent 40%); }
.lp3-step-line > div { position: absolute; inset: -1px 0 0 0; }
.lp3-main .lp3-step-line img { width: 100%; }
.lp3-how-visual {
  position: relative;
  flex-shrink: 0;
  width: 100%;
  height: 400px;
  border-radius: 24px;
  overflow: hidden;
}
.lp3-main .lp3-how-dash { border-radius: 24px; }
/* Step pictures stacked on top of each other; only .is-active shows.
   Cross-fade with a slight settle-in zoom. */
.lp3-how-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 600ms var(--lp3-ease), transform 900ms var(--lp3-ease);
}
.lp3-how-layer.is-active { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .lp3-how-layer { transition: none; } }
.lp3-how-card {
  position: absolute;
  top: 147px;
  left: 146px;
  width: 354px;
  height: 296px;
  border-radius: 30px;
  background: #f6e3d8;
  box-shadow: 0 4px 4px 0 rgba(0, 0, 0, 0.25);
}
.lp3-how-inset {
  position: absolute;
  left: 263.62px;
  top: 235.56px;
  width: 119px;
  height: 113px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp3-how-inset-rot { rotate: -90deg; }
.lp3-how-inset-rot > div { position: relative; width: 113px; height: 119px; }
@media (min-width: 1024px) {
  .lp3-how-inner { flex-direction: row; }
  .lp3-steps { max-width: 572px; }
  .lp3-how-visual { width: 646px; height: 590px; }
}

/* ============================================================================
   TV / digital band
   ========================================================================== */
.lp3-tv {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 88px 64px;
  background: var(--lp3-card);
}
.lp3-tv-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 1248px;
  border-radius: 32px;
  overflow: hidden;
  background: #fdf3d5;
}
.lp3-tv-media { position: relative; flex-shrink: 0; width: 100%; height: 287px; overflow: hidden; }
.lp3-main .lp3-tv-media img {
  position: absolute;
  left: 0.09%;
  top: -27.87%;
  width: 118.84%;
  height: 127.82%;
  max-width: none;
}
.lp3-tv-text {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
  flex: 1;
  min-width: 0;
  padding: 64px 48px;
}
.lp3-main .lp3-tv-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--h2-sm);
  line-height: var(--h2-sm-lh);
  color: var(--lp3-ink);
}
.lp3-tv-body { font-family: var(--font-body); font-weight: 400; font-size: var(--lead); line-height: var(--lead-lh); color: var(--lp3-muted); }
@media (min-width: 1024px) {
  .lp3-tv-card { flex-direction: row; }
  .lp3-tv-media { width: 463px; height: auto; }
}

/* ============================================================================
   Testimonial
   ========================================================================== */
.lp3-quote {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 96px 64px;
  background: var(--lp3-card);
}
.lp3-quote-card {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 1248px; /* same width as the TV / radio card below */
  height: 647px;     /* scaled with the width (562 x 1248/1084) */
  overflow: hidden;
}
/* Vertical marquee, moving top -> bottom. Each group carries its own 30px
   bottom padding (instead of a flex gap) so all 6 groups are identical and
   a -50% -> 0 translate loops without a seam. */
.lp3-quote-strip {
  flex-shrink: 0;
  width: 44px;
  height: 100%;
  overflow: hidden;
  background: var(--lp3-mulberry-dark);
}
.lp3-quote-strip-track { display: flex; flex-direction: column; align-items: center; animation: lp3-strip-down 14s linear infinite; }
@keyframes lp3-strip-down { from { transform: translateY(-50%); } to { transform: translateY(0); } }
.lp3-quote-strip-group { display: flex; flex-direction: column; gap: 30px; align-items: center; padding-bottom: 30px; }
.lp3-quote-label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13px;
  height: 188px;
  overflow: visible;
}
.lp3-quote-label > div { flex: none; rotate: -90deg; }
.lp3-quote-label p {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--body);
  line-height: 35px;
  width: 188px;
  color: #fff7ef;
}
.lp3-quote-mark { position: relative; display: flex; align-items: center; justify-content: center; width: 20.188px; height: 19.993px; }
.lp3-quote-mark > div { flex: none; rotate: -90deg; }
.lp3-quote-mark > div > div { position: relative; width: 19.993px; height: 20.188px; }
.lp3-main .lp3-quote-mark img { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp3-quote-photo { position: relative; flex-shrink: 0; width: 599px; height: 100%; overflow: hidden; }
.lp3-quote-stats {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  height: 100%;
  align-items: flex-start;
  justify-content: space-between;
  padding: 40px 64px;
  background: var(--lp3-mulberry-dark);
}
.lp3-quote-name, .lp3-quote-metric {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--h3);
  line-height: var(--h3-lh);
  color: #fff7ef;
}
.lp3-quote-figure { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.lp3-quote-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--stat);
  line-height: var(--stat-lh);
  color: var(--lp3-orange);
}
.lp3-quote-foot { display: flex; flex-direction: column; gap: 44px; align-items: flex-start; }
.lp3-quote-link { display: flex; gap: 10px; align-items: center; }
.lp3-quote-link a {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--body);
  line-height: var(--body-lh);
  color: #f6e3d8;
  text-decoration: underline;
  text-decoration-style: solid;
  text-underline-offset: 6px;
  white-space: nowrap;
  transition: opacity 150ms var(--lp3-ease);
}
.lp3-quote-link a:hover { opacity: 0.8; }
.lp3-quote-link span { position: relative; flex-shrink: 0; width: 8px; height: 8px; }
.lp3-main .lp3-quote-link img { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ============================================================================
   Hero phone box — the "Talk to us" button became a phone field + "Get started".
   Season Sans only (per request).
   ========================================================================== */
.lp3-hero-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  max-width: 460px;
  padding: 6px;
  border: 1px solid var(--lp3-line);
  border-radius: 9999px;
  background: var(--lp3-card);
  transition: border-color .15s ease, box-shadow .15s ease;
}
.lp3-hero-cta:focus-within { border-color: #d6bfae; box-shadow: 0 0 0 4px rgba(255,89,0, 0.12); }
.lp3-hero-cta-input {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: var(--input);
  flex: 1;
  min-width: 0;
  height: 46px;
  padding: 0 20px;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--lp3-ink);
}
.lp3-hero-cta-input::placeholder { color: rgba(111, 98, 91, 0.7); }
.lp3-hero-cta-btn {
  flex-shrink: 0;
  height: var(--btn-md-h);
  padding: 0 var(--btn-md-px);
  border: 0;
  border-radius: 9999px;
  background: var(--lp3-orange);
  cursor: pointer;
  font-family: var(--btn-font);
  font-weight: 600;
  font-size: var(--btn-md-fs);
  color: #fff;
  white-space: nowrap;
  transition: background-color .15s ease;
}
.lp3-hero-cta-btn:hover { background: var(--lp3-orange-hover); }
.lp3-hero-cta.is-invalid { border-color: #e5484d; box-shadow: 0 0 0 4px rgba(229, 72, 77, 0.10); }
.lp3-hero-cta-msg { font-family: var(--font-body); font-weight: 500; font-size: var(--small); line-height: var(--small-lh); margin: -10px 0 0 22px; color: #d93036; }
.lp3-hero-cta-msg[hidden] { display: none; }
.lp3-hero-actions { flex-direction: column; align-items: flex-start; }
.lp3-hero-watch {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--small);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
  color: var(--lp3-ink);
  text-decoration: none;
}
.lp3-hero-watch svg { width: 1em; height: 1em; /* circle = the text's own size (14px) */ flex-shrink: 0; transition: transform .2s ease; }
.lp3-hero-watch:hover { color: var(--lp3-orange); }
.lp3-hero-watch:hover svg { transform: scale(1.08); }
/* Desktop: Clipad orange, medium weight. */
@media (min-width: 1024px) {
  .lp3-hero-watch { color: var(--lp3-orange); font-weight: 500; }
  .lp3-hero-watch:hover { color: var(--lp3-orange-hover); }
}
@media (max-width: 767px) { .lp3-hero-watch { display: none; } }

/* ============================================================================
   /get-started page — dark, same card + fields as the campaign call-back form
   (.lp3-cb-*), Season Sans only. On success the form pane fades out and the
   thank-you pane fades in over it.
   ========================================================================== */
/* /get-started nav: "Have an account?" + an outlined white Sign in button (no fill,
   no focus highlight on click; keyboard focus keeps a ring). */
body.gs-body .nav-have-account { margin-right: 12px; font-family: var(--font-body); font-weight: 500; font-size: var(--nav-link); color: rgba(255, 255, 255, 0.72); white-space: nowrap; }
body.gs-body .site-nav .nav-cta .nav-signin-btn,
body.gs-body .site-nav .nav-cta .nav-signin-btn:hover,
body.gs-body .site-nav .nav-cta .nav-signin-btn:active {
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  box-shadow: none;
  transform: none;
}
body.gs-body .site-nav .nav-cta .nav-signin-btn:hover { background: rgba(255, 255, 255, 0.08); }
body.gs-body .site-nav .nav-cta .nav-signin-btn:focus:not(:focus-visible) { outline: none; box-shadow: none; }
@media (max-width: 640px) { body.gs-body .nav-have-account { display: none; } }
body.gs-body { background: #121212; } /* the strip behind the sticky nav is dark too */
.lp3-main.gs { background: var(--lp3-black); min-height: 100vh; }
.gs, .gs :is(input, button) { font-family: var(--font-body); }
.gs-wrap { display: flex; justify-content: center; align-items: center; min-height: 100vh; padding: 140px 24px 96px; }
.gs-card { position: relative; display: grid; width: 100%; max-width: 520px; }
.gs-pane { grid-area: 1 / 1; transition: opacity .45s ease, transform .55s cubic-bezier(.22,.8,.24,1); }
.lp3-main .gs-title { font-family: var(--font-display); font-weight: 600; font-size: var(--h2); line-height: var(--h2-lh); margin-bottom: 20px; color: #fff; }
.gs .gs-submit { margin-top: 12px; align-self: flex-end; }
.gs-done-pane {
  display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 14px;
  padding: 48px 32px; border-radius: 16px; background: #1f1f1f;
  opacity: 0; transform: translateY(16px); pointer-events: none;
}
.gs-check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%; background: var(--lp3-orange); color: #fff;
  transform: scale(.6); transition: transform .6s cubic-bezier(.34,1.56,.64,1) .15s;
}
.gs-check svg { width: 30px; height: 30px; }
.lp3-main .gs-done-title { font-family: var(--font-display); font-weight: 600; font-size: var(--h2-sm); line-height: var(--h2-sm-lh); color: #fff; }
.gs-done-body { font-family: var(--font-body); font-weight: 400; font-size: var(--lead); line-height: var(--lead-lh); color: rgba(255, 247, 239, 0.75); }
.gs-card.is-done .gs-form-pane { opacity: 0; transform: translateY(-16px); pointer-events: none; }
.gs-card.is-done .gs-done-pane { opacity: 1; transform: none; pointer-events: auto; }
.gs-card.is-done .gs-check { transform: scale(1); }
.gs-done-pane:focus { outline: none; }
@media (prefers-reduced-motion: reduce) { .gs-pane, .gs-check { transition: none; } }
@media (max-width: 767px) {
  .lp3-main.gs { min-height: 0; }
  .gs-wrap { min-height: 0; display: block; padding: 88px 16px 24px; }
  .lp3-main .gs-title { margin-bottom: 32px; }
  /* Submit sits outside the box, full width under it. */
  .gs .gs-submit { position: static; display: block; width: 50%; margin-top: 12px; padding: 0 22px; }
  .gs-card { grid-template-columns: minmax(0, 1fr); }
  .gs-pane { min-width: 0; }
}
@media (max-width: 767px) { .lp3-hero-cta { max-width: none; } .lp3-hero-cta-input { padding: 0 14px; } .lp3-hero-cta-btn { padding: 0 18px; } }

/* ============================================================================
   Final CTA
   ========================================================================== */
/* The copy is position:sticky inside the section: it starts 96px below the
   section top, then holds 96px below the viewport top as the page scrolls,
   so it travels down over the still background image until it meets the
   section's bottom padding. (No overflow on this section — it would break
   sticky.) */
.lp3-final {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  /* 66.67vw = the photo's 3:2 ratio, so on wide screens the section grows with
     it and cover never crops the top/bottom (table, cup, notebook). */
  min-height: max(965px, 66.67vw);
  padding: 164px 0 32px;
}
.lp3-final-scrim { position: absolute; inset: 0; background: rgba(18, 18, 18, 0.3); }
/* Top 30%: fades from the FAQ's #121212 to clear, so the two sections read as one. */
.lp3-final-scrim::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 30%;
  background: linear-gradient(to bottom, #121212 0%, rgba(18, 18, 18, 0) 100%);
}
/* Bottom 30%: fades from the footer's #141414 up to clear, so the page ends into the footer. */
.lp3-final-scrim::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 30%;
  background: linear-gradient(to top, #141414 0%, rgba(20, 20, 20, 0) 100%);
}
.lp3-final-stack {
  position: sticky;
  top: 128px;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
  width: 100%;
  max-width: 1000px;
  padding: 64px;
  border-radius: 36px;
}
.lp3-main .lp3-final-title {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--h2);
  line-height: var(--h2-lh);
  max-width: 598px;
  color: #fff;
  text-align: center;
}

/* ============================================================================
   Below the design's 1440 frame. Desktop (>=1024) stays 1:1 with the design;
   these only stop fixed-width parts from overflowing on tablets + phones.
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .lp3-quote-strip-track, .lp3-partners-track { animation: none; }
}

@media (max-width: 1023px) {
  .lp3-quote-card { flex-direction: column; height: auto; max-width: 560px; }
  .lp3-quote-strip { display: none; }
  .lp3-quote-photo { width: 100%; height: auto; aspect-ratio: 520 / 562; }
  .lp3-quote-stats { gap: 48px; }
  .lp3-benefit { max-width: 560px; align-self: center; width: 100%; }
}

/* Tablets and desktop: a plain 50% white overlay above the texture and fades, below the content (z 10). */
@media (min-width: 768px) {
  .lp3-how-pin::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.5);
  }
}

/* Phones only: frosted glass (50% see-through) over the steps section's colourful
   background, behind the text, so the copy stays readable. The pin's fades and
   texture sit below it (auto z); the content is z 10. */
@media (max-width: 767px) {
  .lp3-how-pin::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(18px) saturate(1.1);
            backdrop-filter: blur(18px) saturate(1.1);
  }
}

@media (max-width: 767px) {
  /* Phones: hero fills the first screen (minus the 65px sticky nav); copy on top,
     phone image after the input filling the rest, flush on the partners band. */
  .lp3-hero {
    flex-direction: column; align-items: stretch;
    min-height: calc(100vh - 65px); min-height: calc(100svh - 65px);
  }
  .lp3-hero-wrap { order: 1; padding: 24px 16px 0; }
  .lp3-hero-phone {
    display: block; order: 2; position: relative; flex: 1 1 auto;
    width: 100%; height: auto; min-height: 220px; margin-top: 8px;
  }
  .lp3-hero-phone img { object-position: center bottom; }
  /* Mesh gradient (peach / mulberry tint / mint, the benefits-section tints) behind the hand +
     phone: full strength at the bottom, fading to transparent toward the top. No overlay. */
  .lp3-hero-phone::before {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background:
      radial-gradient(70% 80% at 12% 100%, #f4c3a2 0%, rgba(244, 195, 162, 0) 70%),
      radial-gradient(70% 80% at 88% 100%, #EDB3CB 0%, rgba(237, 179, 203, 0) 70%),
      radial-gradient(60% 70% at 55% 100%, #bfe0d3 0%, rgba(191, 224, 211, 0) 70%),
      radial-gradient(90% 90% at 50% 110%, #f8dcc6 0%, rgba(248, 220, 198, 0) 80%);
    -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.75) 35%, transparent 100%);
            mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, 0.75) 35%, transparent 100%);
  }
  .lp3-hero-phone img { z-index: 1; }
  
  .lp3-partners { padding: 40px 0; }
  .lp3-partners-fade { width: 80px; }

  .lp3-intro { padding: 64px 16px 32px; }
  .lp3-video { padding: 32px 16px 64px; }
  .lp3-video-box { border-radius: 20px; }
  .lp3-video-play { width: 64px; height: 64px; }

  .lp3-campaign { padding: 64px 16px; gap: 40px; }
  .lp3-campaign-art { max-width: 100%; }
  .lp3-main .lp3-campaign-title { white-space: normal; }

  .lp3-benefits { padding: 64px 16px; gap: 32px; }
  .lp3-main .lp3-benefits-title { white-space: normal; }
  .lp3-main .lp3-benefit-title { white-space: normal; }
  .lp3-benefit-media { height: 260px; padding: 24px; }

  .lp3-how-pin { padding: 64px 16px; }
  .lp3-step { padding: 20px 0; }
  .lp3-how-visual { height: 340px; }
  .lp3-how-card { top: 60px; left: 50%; width: 260px; height: 220px; margin-left: -130px; }
  .lp3-how-inset { left: 50%; top: 113px; margin-left: -59.5px; }

  .lp3-tv { padding: 64px 16px; }
  .lp3-tv-card { border-radius: 24px; }
  .lp3-tv-media { height: 220px; }
  .lp3-tv-text { padding: 32px 24px 40px; }

  .lp3-quote { padding: 64px 16px; }
  .lp3-quote-stats { padding: 32px 24px; }

  .lp3-final { min-height: 560px; }
  .lp3-final-stack { padding: 48px 16px; }
}

/* ── Gradient text sweep (lp3-text-sweep.js) ─────────────────────────────── */
/* The real text stays in place (invisible, it only holds the layout and is what
   screen readers read). Two copies are painted over it with the same sweeping
   gradient: ::after is blurred and shows only at the very front of the band (the
   first two or three letters), ::before is sharp everywhere behind that. */
.gts.gts-ready {
  display: inline-block; position: relative;
  margin-right: -0.1em; padding-right: 0.1em;   /* keeps the last glyph's edge from clipping */
  color: transparent; -webkit-text-fill-color: transparent;
}
.gts.gts-ready::before, .gts.gts-ready::after {
  content: attr(data-text);
  content: attr(data-text) / "";
  position: absolute; left: 0; top: 0; right: 0;
  padding-right: 0.1em;
  text-align: inherit;
  background-image: linear-gradient(90deg,
    var(--gts-fg) 0, var(--gts-fg) 33.33%,
    /* band mix: deep mulberry 50%, deep orange, orange, white 10% (white = the leading tip) */
    #E8590C 36%, #E8590C 40%,
    #770737 45%, #770737 55.5%,
    #FF5900 57.5%, #FF5900 60%,
    #fff 63.3%,
    transparent 66.67%, transparent);
  background-size: 300% 100%;
  background-position: 100% 0;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  -webkit-mask-size: 300% 100%; mask-size: 300% 100%;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  pointer-events: none;
}
.gts.gts-ready::before {
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 61%, transparent 63%, transparent);
          mask-image: linear-gradient(90deg, #000 0, #000 61%, transparent 63%, transparent);
}
.gts.gts-ready::after {
  filter: blur(6px);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, transparent 61%, #000 63%, #000);
          mask-image: linear-gradient(90deg, transparent 0, transparent 61%, #000 63%, #000);
}
.gts.gts-in::before, .gts.gts-in::after { animation: gtsSweep 1.2s cubic-bezier(.4, 0, .2, 1) .1s both; }
@keyframes gtsSweep {
  from { background-position: 100% 0; -webkit-mask-position: 100% 0; mask-position: 100% 0; }
  to   { background-position: 0 0;    -webkit-mask-position: 0 0;    mask-position: 0 0; }
}

/* Step dividers as a scroll progress bar (lp3-how-scroll.js sets --f, 0 to 1).
   Only while the section is pinned; the static list keeps plain lines. */
.lp3-line-fill { display: none; }
.lp3-how.is-pinned .lp3-line-fill {
  display: block;
  position: absolute; left: 0; top: -0.5px; width: 100%; height: 2px;
  border-radius: 2px;
  background-image: linear-gradient(90deg, #FF5900 0%, #C60C5C 50%, #3fbf8f 100%);
  clip-path: inset(0 calc((1 - var(--f, 0)) * 100%) 0 0);
  pointer-events: none;
  transition: opacity .4s ease;
}
.lp3-how.is-pinned .lp3-line-fill.is-done { opacity: 0; }

/* Footer on the landing page only: same near-black as the portal sidebar */
body.lp3 .site-footer { background: #141414; }

/* ── Full-screen vertical version (phones only; lp3-video-fullscreen.js) ────
   The round full-screen button is gone: the main play button opens the layer on
   phones. The hidden element only carries the video + poster URLs. */
.lp3-video-fs { display: none; }
.lp3-vfs {
  position: fixed; inset: 0; z-index: 10000;
  display: none; align-items: center; justify-content: center;
  background: #121212;
}
.lp3-vfs.is-open { display: flex; }
.lp3-vfs-video { width: 100%; height: 100%; object-fit: contain; display: block; }   /* contain: nothing at the edges is cropped */
.lp3-vfs-close {
  position: absolute; z-index: 2;
  top: max(16px, env(safe-area-inset-top)); right: 16px;
  width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: rgba(255, 255, 255, 0.16);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
}
.lp3-vfs-close svg { width: 22px; height: 22px; display: block; }
.lp3-vfs-play {
  position: absolute; width: 76px; height: 76px; border-radius: 50%;
  display: grid; place-items: center; pointer-events: none;
  background: rgba(255, 255, 255, 0.14);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  opacity: 0; transition: opacity 200ms var(--lp3-ease);
}
.lp3-vfs-play svg { width: 40%; height: 40%; display: block; }
.lp3-vfs.is-paused .lp3-vfs-play { opacity: 1; }
body.lp3-vfs-open { overflow: hidden; }

/* Homepage FAQ uses the same dark as the rest of the page (the shared faq.css stays #0a0a0a for /pricing). */
body.lp3 .lp3-faq { background: #121212; }