/* ===========================================================================
   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); }
.lp-btn.on-brand { background: var(--coal-950); color: var(--text-strong); }
.lp-btn.on-brand:hover { background: var(--ink); color: var(--text-strong); 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;
}
.lp-hero-actions { display: flex; gap: var(--space-3); justify-content: center; align-items: center; flex-wrap: wrap; margin-bottom: 14px; }
.lp-hero-note { font-size: var(--text-body-sm); color: var(--text-subtle); }

/* ---------- 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; }

/* ---------- 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 .brand {
  font-family: var(--font-display);
  font-weight: var(--weight-bold);
  font-size: 21px;
  color: var(--coal-600);
  letter-spacing: var(--tracking-tight);
}

/* ---------- 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: 14px 0 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); }

/* ---------- Actions: the creator's on-camera direction ---------- */
.lp-actions { position: relative; padding-top: var(--space-20); padding-bottom: var(--space-20); }
.lp-actions-head { text-align: center; max-width: 700px; margin: 0 auto var(--space-10); }
.lp-actions-head h2 { font-size: clamp(26px, 3.6vw, 40px); letter-spacing: var(--tracking-tight); margin: 14px 0 14px; }
.lp-actions-head p { font-size: 17px; line-height: 1.6; color: var(--text-muted); margin: 0; }
.lp-action-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-3); }
.lp-action-row {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 66px;
  padding: 0 16px;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-subtle);
  background: var(--surface-card);
}
.lp-action-row.recommended, .lp-action-row.selected { border-color: var(--color-primary); }
.lp-action-check {
  width: 24px;
  height: 24px;
  flex: none;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--text-on-brand);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-action-num {
  width: 30px;
  height: 30px;
  flex: none;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--text-on-brand);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-weight: var(--weight-bold);
  font-size: 13px;
}
.lp-action-icon {
  width: 38px;
  height: 38px;
  flex: none;
  border-radius: var(--radius-sm);
  background: var(--color-primary-soft);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lp-action-text { flex: 1; min-width: 0; }
.lp-action-title-row { display: flex; align-items: center; gap: 9px; flex-wrap: nowrap; }
.lp-action-title { flex: 0 1 auto; min-width: 0; font-family: var(--font-display); font-weight: var(--weight-bold); font-size: 16px; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-action-title-row .lp-badge { flex: none; }
.lp-action-desc { display: block; font-size: 14px; line-height: 1.5; color: var(--text-muted); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 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); }
}
@media (max-width: 680px) {
  /* .sr-links already collapses at 760px in the nav's own media query */
  .lp-hero { padding-top: var(--space-12); }
  .lp-diagram-row { grid-template-columns: repeat(2, 1fr); }
  .lp-action-row { height: auto; flex-wrap: wrap; padding: 14px 16px; }
  .lp-cta-panel { padding: 40px var(--space-5); }
}
@media (prefers-reduced-motion: reduce) {
  .lp-btn:hover { transform: none; }
}