/* ===========================================================================
   siriusly.ai - public landing page (/).
   Built on the design system's website UI kit. Server-rendered: no React, no
   CDN scripts, so the marketing page paints without waiting on JavaScript.
   =========================================================================== */

/* The shared iris/star mark (tokens/base.css's body::after) is position:fixed,
   so it's pinned to the same spot on screen from the very first paint - on
   this page that put it inside the hero, visible before any scrolling. Kill
   it here and give the page its own copy instead (.lp-bg-star below),
   scroll-revealed via JS once the user reaches "Your content engine". */
body.lp-body::after { content: none; }

/* On body, not .lp-wrap: overflow-x here implicitly forces overflow-y to
   "auto" too (any axis not "visible" makes the other clip as well), and
   .lp-wrap sits below the navbar's own reserved space - clipping there cut
   off the hero's full-bleed video/fade wherever they extended up behind the
   navbar. body has nothing that needs to render above its own top edge, so
   the same guard is safe to move there. */
body.lp-body { overflow-x: hidden; }
.lp-section { max-width: var(--container-max); margin: 0 auto; padding: 0 var(--space-6); }

/* Fixed to the viewport (not any one section), so once revealed it stays put
   in the corner through every section below "Your content engine" - Actions,
   Andromeda, Pricing, the CTA - instead of scrolling away with its section.
   Reveal is a body class toggled by scroll position in extra_scripts. */
.lp-bg-star {
  position: fixed;
  z-index: -1;
  pointer-events: none;
  right: calc(var(--backdrop-iris-size) * -0.32);
  bottom: calc(var(--backdrop-iris-size) * -0.35);
  width: var(--backdrop-iris-size);
  height: var(--backdrop-iris-size);
  /* Base/fallback strength if JS never runs - extra_scripts drives the
     actual value as an inline style, scroll-linked between "why" and "how". */
  opacity: 0.28;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23D07E45' fill-opacity='.42' fill-rule='evenodd' d='M4 32a28 28 0 1 0 56 0a28 28 0 1 0-56 0ZM32 12L34.68 25.53L46.14 17.86L38.47 29.32L52 32L38.47 34.68L46.14 46.14L34.68 38.47L32 52L29.32 38.47L17.86 46.14L25.53 34.68L12 32L25.53 29.32L17.86 17.86L29.32 25.53Z'/%3E%3C/svg%3E") center / contain no-repeat;
}


/* ---------- Buttons (design system Button) ---------- */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  font-family: var(--font-body);
  font-weight: var(--weight-semibold);
  font-size: 15px;
  line-height: 1;
  height: 42px;
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--radius-control);
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: var(--transition-control);
}
.lp-btn:hover { text-decoration: none; }
.lp-btn.lg { height: 50px; padding: 0 24px; font-size: 16px; }
.lp-btn.primary {
  background: var(--color-primary);
  color: var(--text-on-brand);
  box-shadow: var(--shadow-brand);
}
.lp-btn.primary:hover {
  background: var(--color-primary-hover);
  color: var(--text-on-brand);
  transform: translateY(-1px);
}
.lp-btn.secondary {
  background: var(--surface-card);
  color: var(--text-strong);
  border-color: var(--border-default);
}
.lp-btn.secondary:hover { background: var(--surface-hover); border-color: var(--border-strong); color: var(--text-strong); }
.lp-btn.ghost { background: transparent; color: var(--text-body); }
.lp-btn.ghost:hover { background: var(--surface-hover); color: var(--text-strong); }
/* Sits on the CTA panel's bright gradient, so its own fill is dark in EITHER
   theme - which means the label has to be a fixed white, not --text-strong
   (that token flips to near-black in light mode, leaving black-on-black). */
.lp-btn.on-brand { background: var(--coal-950); color: var(--white); }
.lp-btn.on-brand:hover { background: var(--ink); color: var(--white); transform: translateY(-1px); }

/* ---------- Badge (design system Badge) ---------- */
.lp-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  font-weight: var(--weight-semibold);
  font-size: 12px;
  line-height: 1;
  padding: 6px 12px;
  border-radius: var(--radius-pill);
  letter-spacing: var(--tracking-tight);
  background: var(--color-primary-soft);
  color: var(--orange-300);
}
.lp-badge.accent { background: var(--color-accent); color: var(--text-on-brand); }

/* ---------- Hero ---------- */
/* The sticky pill nav (.sr-nav, navbar.css) still reserves its own 78px
   (16px margin + 62px pill height) in normal flow above this section. Pull
   the section up behind the nav - padding-top already pushes the actual
   content back down clear of the floating pill. Plain page background, same
   as studio - no video/fade here, that moved down to Actions below. */
.lp-hero { position: relative; margin-top: -78px; padding-top: var(--space-20); padding-bottom: var(--space-8); text-align: center; }
.lp-hero h1 {
  font-size: clamp(40px, 6.4vw, 66px);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tighter);
  margin: 22px auto 0;
  max-width: 820px;
  color: var(--text-strong);
}
.lp-hero .lead {
  font-size: clamp(16px, 2vw, 19px);
  line-height: 1.55;
  color: var(--text-body);
  margin: 22px auto 30px;
  max-width: 1020px;
}
/* Phone: the paragraph is the page's longest line of prose and cost five
   lines of a 390px screen, most of the room between the headline and the one
   thing this page asks for. The qualifiers go; the claim stays. */
@media (max-width: 520px) {
  .lp-hero .lead { margin: 16px auto 22px; }
  .lp-lead-long { display: none; }
}
.lp-hero-actions { display: flex; gap: var(--space-3); justify-content: center; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }

/* ---------- Hero URL field (the page's one call to action) ----------
   One pill holding icon + input + button, so the field and its button read as
   a single control rather than a form with a button parked next to it. The
   button keeps .lp-btn.primary, so it stays the same amber as every other
   primary on the page. */
.lp-hero-url {
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(560px, 100%);
  padding: 7px 7px 7px 18px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-lg);
  transition: var(--transition-control);
}
.lp-hero-url:focus-within { border-color: var(--color-primary); box-shadow: var(--ring-focus), var(--shadow-lg); }
/* --text-body, not --text-subtle: subtle is coal-500 in the dark theme, which
   on the field's own dark card reads as a smudge rather than an icon. Body is
   near-white there and still quiet in light. */
.lp-hero-url-icon { flex: none; color: var(--text-body); }
.lp-hero-url-input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  padding: 0;
  border: none;
  outline: none;
  background: none;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--text-strong);
}
.lp-hero-url-input::placeholder { color: var(--text-subtle); }
/* Chrome paints its own background and text colour into an autofilled field -
   pale blue in the light theme, and in dark a white slab with black text on
   what is meant to be a dark pill. Neither can be overridden by `background`;
   an inset shadow the size of the field is what actually covers it, and
   -webkit-text-fill-color is what actually recolours the text. The absurd
   transition delay is the standard trick for the moment of fill itself, which
   ignores both. */
.lp-hero-url-input:-webkit-autofill,
.lp-hero-url-input:-webkit-autofill:hover,
.lp-hero-url-input:-webkit-autofill:focus,
.lp-hero-url-input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text-strong);
  -webkit-box-shadow: 0 0 0 100px var(--surface-card) inset;
  box-shadow: 0 0 0 100px var(--surface-card) inset;
  caret-color: var(--text-strong);
  transition: background-color 100000s ease-in-out 0s;
}
/* Fully round, like the Product/Software toggle below the hero - not the
   softer --radius-control every other .lp-btn carries, which reads as a
   rectangle parked inside the pill of the field rather than part of it. */
.lp-hero-url-btn { flex: none; height: 44px; border-radius: var(--radius-pill); }
.lp-hero-url-btn:disabled { cursor: default; opacity: 0.75; }
.lp-hero-url-btn:disabled:hover { background: var(--color-primary); transform: none; }
.lp-hero-note { font-size: 13.5px; line-height: 1.5; color: var(--text-muted); margin: 14px auto 0; max-width: 520px; }
/* The terms link sits inside muted fine print, so it needs its own weight to
   read as a link at all - underlined rather than colored, which would pull
   more attention than a consent line should. */
.lp-hero-note a { color: var(--text-body); text-decoration: underline; text-underline-offset: 2px; }
.lp-hero-note a:hover { color: var(--color-primary); }
.lp-hero-error { font-size: 13.5px; line-height: 1.5; color: var(--status-danger); margin: 14px auto 0; max-width: 520px; }
.lp-hero-secondary { display: flex; gap: var(--space-3); justify-content: center; margin-top: 18px; }

/* Narrow phones: the button stays inside the field's pill, as it is on a wide
   screen. Stacked it read as a second, unrelated control - the point of the
   one-pill layout is that the field and its button are one thing - so what
   gives way instead is everything that is only decoration at this width: the
   link icon, then the button's padding, and finally (below 380px, where the
   placeholder would otherwise be squeezed out) the button's label, leaving a
   round arrow submit. The label is clipped rather than display:none'd so the
   button keeps its accessible name. */
@media (max-width: 520px) {
  .lp-hero-url { gap: 8px; padding: 6px 6px 6px 16px; }
  .lp-hero-url-icon { display: none; }
  .lp-hero-url-input { height: 44px; }
  .lp-hero-url-btn { height: 44px; padding: 0 18px; }
  .lp-hero-note-trial { display: block; }
}
@media (max-width: 380px) {
  .lp-hero-url { padding: 6px 6px 6px 14px; }
  .lp-hero-url-btn { position: relative; width: 44px; padding: 0; }
  .lp-hero-url-btn .lp-hero-cta-label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ---------- Hero reel showcase: source reel -> localized versions ---------- */
.lp-hero-diagram { max-width: 980px; margin: 52px auto 0; text-align: left; }
/* Example switch (Cosmetics / SaaS): a real sliding toggle, not two separate
   buttons - .lp-diagram-switch-thumb is one pill that slides behind whichever
   label is active. Picks which .lp-diagram-example is visible - see the
   reel-sync script, which also drives this from playback (each example
   advances to the next once its clips finish) and keeps .is-active/the
   thumb position in sync either way. */
.lp-diagram-switch { display: flex; justify-content: center; margin-bottom: var(--space-5); }
.lp-diagram-switch-track {
  position: relative;
  display: inline-flex;
  padding: 3px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
}
.lp-diagram-switch-thumb {
  position: absolute;
  top: 3px;
  bottom: 3px;
  left: 3px;
  width: calc(50% - 3px);
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  transition: transform 220ms var(--ease-standard);
}
.lp-diagram-switch-track[data-active="saas"] .lp-diagram-switch-thumb { transform: translateX(100%); }
.lp-diagram-switch-btn {
  position: relative;
  z-index: 1;
  /* Equal-width halves, fixed rather than flex:1 - .lp-diagram-switch-track
     is inline-flex (shrink-to-fit), which never gives flex-grow any spare
     space to distribute, so "Cosmetics" (longer) and "SaaS" would otherwise
     each just take their own content width and drift out of sync with the
     thumb's fixed 50% split. */
  width: 104px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-semibold);
  padding: 7px 0;
  border: none;
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color 160ms var(--ease-standard);
}
.lp-diagram-switch-btn:hover:not(.is-active) { color: var(--text-strong); }
.lp-diagram-switch-btn.is-active { color: var(--text-on-brand); }
.lp-diagram-labels { display: grid; grid-template-columns: 1fr 52px repeat(4, 1fr); gap: var(--space-4); align-items: center; margin-bottom: var(--space-4); }
.lp-diagram-label { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: var(--tracking-caps); text-transform: uppercase; white-space: nowrap; }
.lp-diagram-label.source { grid-column: 1; color: var(--color-primary); }
.lp-diagram-label.source .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-primary); flex: none; }
.lp-diagram-label.versions { grid-column: 3 / span 4; color: var(--text-body); flex-wrap: wrap; white-space: normal; }
.lp-diagram-row { display: grid; grid-template-columns: 1fr 52px repeat(4, 1fr); gap: var(--space-4); align-items: start; }
.lp-reel-tile {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
  color: #fff;
  text-align: left;
}
.lp-reel-source { box-shadow: 0 0 0 2px var(--color-primary), var(--shadow-lg); }
.lp-reel-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 320ms var(--ease-standard); }
.lp-reel-tile video.is-ready { opacity: 1; }
/* Staggered fade+scale+blur entrance played on each tile when the toggle
   switches examples (see switchTo in the reel-sync script). Two identical
   keyframes, alternated by name on every switch: re-assigning the same
   animation-name is a no-op, so a real restart needs a name that actually
   differs from the previous switch's. */
@keyframes lp-tile-in-a { from { opacity: 0; transform: translateY(14px) scale(.94); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes lp-tile-in-b { from { opacity: 0; transform: translateY(14px) scale(.94); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
.lp-reel-top { position: relative; z-index: 1; display: flex; align-items: flex-start; justify-content: space-between; }
.lp-reel-lang {
  background: rgba(10, 9, 8, 0.45);
  backdrop-filter: blur(6px);
  border-radius: var(--radius-pill);
  padding: 4px 10px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--weight-bold);
}
.lp-reel-label { position: relative; z-index: 1; font-size: 12.5px; font-weight: var(--weight-semibold); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5); }
.lp-diagram-arrow { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; height: 100%; }
.lp-diagram-arrow-tag { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-primary); text-align: center; line-height: 1.3; }
.lp-diagram-arrow-ring { width: 34px; height: 34px; flex: none; border-radius: 50%; border: 1px solid var(--color-primary); color: var(--color-primary); display: flex; align-items: center; justify-content: center; }
.lp-diagram-captions { display: grid; grid-template-columns: 1fr 52px repeat(4, 1fr); gap: var(--space-4); margin-top: var(--space-3); }
.lp-diagram-caption { font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }
.lp-diagram-caption.source { grid-column: 1; }
.lp-diagram-caption.versions { grid-column: 3 / span 4; }

/* Mobile crossfade (≤760px, see the Responsive block below): replaces the
   6-tile row entirely - source reel fixed on the left, one tile on the right
   cycling through every localized version. Videos crossfade rather than cut
   (see .lp-mobile-layer below), driven from the reel-sync script. */
.lp-mobile-diagram { display: none; }
.lp-mobile-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.lp-mobile-cycle { position: relative; aspect-ratio: 9 / 16; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); border: 1px solid var(--border-subtle); }
.lp-mobile-layer {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 12px;
  color: #fff;
  opacity: 0;
  transition: opacity 900ms cubic-bezier(.4, 0, .25, 1);
}
.lp-mobile-layer.is-active { opacity: 1; z-index: 1; }
.lp-mobile-layer video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lp-mobile-dots { display: flex; justify-content: flex-end; gap: 6px; margin-top: var(--space-3); }
.lp-mobile-dots span { width: 16px; height: 3px; border-radius: var(--radius-pill); background: var(--border-strong); transition: background 220ms var(--ease-standard); }
.lp-mobile-dots span.is-active { background: var(--color-primary); }
.lp-mobile-caption { margin-top: var(--space-3); font-size: 12.5px; line-height: 1.45; color: var(--text-muted); }

/* ---------- Logo strip ---------- */
.lp-strip {
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
  background: var(--surface-card);
}
.lp-strip-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 26px var(--space-6);
  display: flex;
  gap: 38px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.lp-strip .label {
  font-size: 13px;
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text-subtle);
}
.lp-strip .model {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 21px;
  color: var(--coal-600);
  letter-spacing: var(--tracking-tight);
}
/* Phone: at the desktop size the three names break 1 + 2 across two ragged
   rows. Giving the label a row of its own and stepping the names down puts
   them on one line instead, so the strip reads as a row of logos again. */
@media (max-width: 700px) {
  .lp-strip-inner { gap: 10px 16px; padding: 20px var(--space-4); }
  .lp-strip .label { flex: 0 0 100%; text-align: center; font-size: 11.5px; }
  .lp-strip .model { font-size: 16px; }
}

/* ---------- Why siriusly: your content engine ---------- */
.lp-usps-inner { max-width: var(--container-max); margin: 0 auto; padding: var(--space-20) var(--space-6) var(--space-10); }
.lp-usps-head { text-align: center; max-width: 660px; margin: 0 auto var(--space-10); }
.lp-usps-head h2 { font-size: clamp(26px, 3.6vw, 40px); letter-spacing: var(--tracking-tight); margin: 0; }
.lp-usps-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--space-8); align-items: center; }
.lp-usps-col { display: flex; flex-direction: column; gap: var(--space-6); }

.lp-usp-card { position: relative; padding: 4px 0; transition: border-color 200ms var(--ease-standard); }
.lp-usps-col.left .lp-usp-card { padding-right: 26px; border-right: 2px solid rgba(208, 126, 69, 0.3); text-align: right; }
.lp-usps-col.right .lp-usp-card { padding-left: 26px; border-left: 2px solid rgba(208, 126, 69, 0.3); text-align: left; }
.lp-usp-card:hover { border-color: var(--color-primary); }
.lp-usp-card::before,
.lp-usp-card::after { content: ""; position: absolute; top: 50%; }
.lp-usps-col.left .lp-usp-card::before { right: -30px; width: 30px; height: 1px; background: repeating-linear-gradient(90deg, var(--color-primary) 0 5px, transparent 5px 10px); opacity: 0.55; transition: opacity 200ms var(--ease-standard); }
.lp-usps-col.right .lp-usp-card::before { left: -30px; width: 30px; height: 1px; background: repeating-linear-gradient(90deg, var(--color-primary) 0 5px, transparent 5px 10px); opacity: 0.55; transition: opacity 200ms var(--ease-standard); }
.lp-usp-card:hover::before { opacity: 1; }
.lp-usps-col.left .lp-usp-card::after { right: -5px; margin-top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); }
.lp-usps-col.right .lp-usp-card::after { left: -5px; margin-top: -4px; width: 8px; height: 8px; border-radius: 50%; background: var(--color-primary); }

.lp-usp-top { display: flex; align-items: center; gap: 11px; margin-bottom: 8px; }
.lp-usps-col.left .lp-usp-top { flex-direction: row-reverse; }
.lp-usp-top svg { flex: none; color: var(--color-primary); }
.lp-usp-title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 18px; letter-spacing: var(--tracking-tight); color: var(--text-strong); text-wrap: balance; }
.lp-usp-card p { font-size: 14.5px; line-height: 1.55; color: var(--coal-300); margin: 0; }

/* iPhone frame playing the source reel full-screen. */
.lp-phone { position: relative; width: 266px; flex: none; aspect-ratio: 9 / 19.5; margin: 0 auto; border-radius: 44px; padding: 9px; background: linear-gradient(160deg, #4a453e, #1c1a17); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255, 247, 237, 0.08); }
.lp-phone-screen { position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: linear-gradient(160deg, #d07e45, #f7c955); }
.lp-phone-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 320ms var(--ease-standard); }
.lp-phone-video.is-ready { opacity: 1; }
.lp-phone-tapzone { position: absolute; inset: 0; border: none; background: transparent; cursor: pointer; padding: 0; }
.lp-phone-playicon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: rgba(10, 9, 8, 0.45);
  backdrop-filter: blur(10px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms var(--ease-standard);
}
.lp-phone.is-paused .lp-phone-playicon { opacity: 1; }
/* Static indicator - the video always plays muted, so there's no unmute
   affordance, just a permanent badge showing that state. */
.lp-phone-mute {
  position: absolute;
  top: 11px;
  right: 12px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(10, 9, 8, 0.42);
  backdrop-filter: blur(10px);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-phone-scrubwrap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 26px; background: linear-gradient(180deg, transparent, rgba(10, 9, 8, 0.7)); }
.lp-phone-scrub { position: relative; height: 22px; display: flex; align-items: center; cursor: pointer; }
.lp-phone-scrub .track { position: absolute; left: 0; right: 0; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.3); transition: height 140ms var(--ease-standard); }
.lp-phone-scrub .fill { position: absolute; left: 0; width: 0%; height: 4px; border-radius: 999px; background: #fff; transition: height 140ms var(--ease-standard); }
.lp-phone-scrub .knob { position: absolute; left: 0; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); transition: width 140ms var(--ease-standard), height 140ms var(--ease-standard); }
.lp-phone-scrub.is-dragging .track,
.lp-phone-scrub.is-dragging .fill { height: 6px; }
.lp-phone-scrub.is-dragging .knob { width: 15px; height: 15px; margin-left: -7.5px; }
.lp-phone-times { display: flex; justify-content: space-between; margin-top: 2px; font-family: var(--font-body); font-size: 10.5px; font-weight: var(--weight-semibold); color: rgba(255, 255, 255, 0.75); font-variant-numeric: tabular-nums; }
.lp-phone-notch { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); width: 88px; height: 26px; border-radius: 999px; background: #0a0908; }
.lp-phone-home { position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%); width: 104px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.65); }

/* ---------- How it works: the end-to-end tutorial ---------- */
.lp-tutorial { position: relative; padding-top: var(--space-20); padding-bottom: var(--space-20); }
.lp-tutorial-head { text-align: center; max-width: 700px; margin: 0 auto var(--space-8); }
.lp-tutorial-head h2 { font-size: clamp(26px, 3.6vw, 40px); letter-spacing: var(--tracking-tight); margin: 14px 0; }
.lp-tutorial-head p { font-size: 17px; line-height: 1.6; color: var(--text-muted); margin: 0; }
/* 16:9 shell around the YouTube embed - the iframe itself is absolutely
   positioned so the aspect ratio, not the iframe's own default 150px height,
   decides how tall the player is. */
.lp-tutorial-frame {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  /* The hairline is an inset OUTLINE, not a border: aspect-ratio sizes the
     border box, so a 1px border left the content box - and the iframe filling
     it - at 978x549.25 (1.7806) instead of 16/9, and the player letterboxes
     its 16:9 video inside whatever box it is handed. That 1.5px of leftover
     showed as a black hairline down both sides. An outline takes no layout
     space, so the box stays exactly 16/9. */
  outline: 1px solid var(--border-subtle);
  outline-offset: -1px;
  background: var(--coal-950);
  box-shadow: var(--shadow-lg);
}
/* Overscanned by 2px so sub-pixel rounding inside the player cannot bring that
   hairline back either: at 16/9 plus 4px on each axis the box is proportionally
   wider than the video, so the video fills it by width and the couple of pixels
   that spill past the top and bottom are clipped by the frame's own
   overflow: hidden. */
.lp-tutorial-frame iframe { position: absolute; inset: -2px; width: calc(100% + 4px); height: calc(100% + 4px); border: 0; }
.lp-tutorial-meta {
  max-width: 980px;
  margin: var(--space-4) auto 0;
  padding: 0 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.lp-tutorial-track { font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--text-muted); }
.lp-tutorial-channel { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: var(--weight-semibold); color: var(--text-body); text-decoration: none; }
.lp-tutorial-channel:hover { color: var(--text-strong); }
.lp-tutorial-channel svg { flex: none; color: var(--color-primary); }

/* ---------- Closing CTA ---------- */
.lp-cta { padding-bottom: var(--space-20); }
.lp-cta-panel {
  background: var(--gradient-signature);
  border-radius: var(--radius-2xl);
  padding: 60px var(--space-12);
  text-align: center;
  box-shadow: var(--shadow-brand);
}
.lp-cta-panel h2 {
  font-size: clamp(30px, 4.4vw, 46px);
  letter-spacing: -0.025em;
  margin: 0 0 14px;
  color: var(--coal-950);
}
.lp-cta-panel p { font-size: 18px; color: rgba(10, 9, 8, 0.72); margin: 0 auto 28px; max-width: 460px; }
.lp-cta-actions { display: flex; gap: var(--space-3); justify-content: center; align-items: center; flex-wrap: wrap; }
/* On the panel's bright gradient, the ghost button needs dark text/border
   instead of its usual light-on-dark-page treatment to stay readable. */
.lp-cta-panel .lp-btn.ghost { color: var(--coal-950); border-color: rgba(10, 9, 8, 0.35); }
.lp-cta-panel .lp-btn.ghost:hover { background: rgba(10, 9, 8, 0.08); color: var(--coal-950); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .lp-diagram-row { grid-template-columns: repeat(3, 1fr); }
  .lp-diagram-arrow { display: none; }
  .lp-diagram-labels { display: flex; flex-wrap: wrap; gap: var(--space-5); }
  .lp-diagram-label.versions { grid-column: auto; }
  .lp-diagram-captions { display: flex; flex-direction: column; gap: var(--space-2); }
  .lp-usps-grid { grid-template-columns: 1fr; }
  .lp-usps-col { align-items: center; }
  .lp-usps-col.left .lp-usp-card,
  .lp-usps-col.right .lp-usp-card { max-width: 420px; padding: 4px 0; border: none; text-align: center; }
  .lp-usps-col.left .lp-usp-top { flex-direction: row; }
  .lp-usp-card::before, .lp-usp-card::after { display: none; }
  .lp-phone { order: -1; margin-bottom: var(--space-4); }
}
/* Matches the nav's own collapse point (.sr-links, navbar.css) - below this
   the hero diagram switches from the 6-tile row to the mobile crossfade
   (.lp-mobile-diagram above) instead of just reflowing the same tiles. */
@media (max-width: 760px) {
  /* More clearance than desktop's padding-top under the sticky pill nav
     (.lp-hero's own -78px margin-top pulls it up behind that nav) - at
     phone widths the pill sits closer to the heading than on desktop. */
  .lp-hero { padding-top: 112px; }
  .lp-diagram-labels,
  .lp-diagram-row,
  .lp-diagram-captions { display: none; }
  .lp-mobile-diagram { display: block; }
  .lp-cta-panel { padding: 38px 22px; border-radius: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .lp-btn:hover { transform: none; }
}