/*
 * Primorly landing page — styles
 * ==============================
 * Reuses the app design tokens (spacing / weights / text-size scale) from
 * ../src/styles/tokens.css. The --lp-* palette below is scoped to this page
 * so it never fights the dark token defaults. The marketing accent is a
 * violet matching the hero mockup — distinct from the app's primary blue
 * (--button-bg-primary), which is kept ONLY inside the device chrome.
 */

:root {
  color-scheme: light;
  --lp-bg: hsl(0, 0%, 97%);
  --lp-ink: hsl(0, 0%, 8%);
  --lp-ink-soft: hsl(0, 0%, 24%);
  --lp-accent: hsl(240, 100%, 70%);
  --lp-accent-strong: hsl(240, 100%, 63%);

  /* Side whitespace controls:
     --lp-gutter   : minimum side padding at every width (the hard floor).
     --lp-contentw : max width of the iPad column. Lower it = more side whitespace
                     around the iPad.
     --lp-hero-maxw: max width of the big heading only — wider than the iPad so
                     the long one-line title has room and doesn't wrap.
     --lp-maxw     : max width of the wider nav row only. */
  --lp-gutter: clamp(1.25rem, 6vw, 5rem);
  --lp-contentw: 1000px;
  --lp-hero-maxw: 1360px;
  --lp-maxw: 1200px;

  /* two brand colors, applied as soft glows over the warm base.
     The last alpha value (0.30) is the glow opacity — tune per glow. */
  --lp-glow-warm: hsla(0, 0%, 90%, 0.30);
  --lp-glow-cool: hsla(229, 100%, 75%, 0.30);
  /* hero-only warm glow — a real warm yellow (hue 58), unlike the grey
     --lp-glow-warm used by the inner content panels */
  --lp-glow-hero-warm: hsla(58, 0%, 95%, 0.40);

  /* device (dark app chrome) */
  --lp-d-bezel: #111114;
  --lp-d-panel: hsl(0, 0%, 15%);
  --lp-d-text: #faf9f5;
  --lp-d-muted: hsl(0, 0%, 58%);
  --lp-d-border: hsl(0, 0%, 22%);
  --lp-d-blue: hsl(229, 100%, 66%);
  --lp-d-blue-soft: hsl(229, 100%, 70%);
  --lp-d-green: hsl(116, 45%, 45%);
  --lp-d-xp: hsl(47, 90%, 60%);

  /* ── Typography roles ──
     Each bundles font-family + size + weight + line-height as a single `font`
     shorthand, so a role retunes in ONE place. Apply with `font: var(--type-…)`.
     The `font` shorthand resets line-height (included here) but NOT
     letter-spacing / color — those stay on the component rule.
     Shorthand order: <weight> <size>/<line-height> <family>. */
  --type-hero: var(--weight-semibold) clamp(2.6rem, 5.5vw, 5rem)/1.06 'Aleo', serif;
  --type-title-desc: var(--weight-normal) clamp(1rem, 1.5vw, 1.2rem)/1.6 'Inter', sans-serif;
  --type-subheading: var(--weight-semibold) clamp(1.75rem, 4vw, 2.6rem)/1.18 'Aleo', serif;
  --type-card-title: var(--weight-semibold) var(--ts-xl)/1.3 'Aleo', sans-serif;
  --type-card-desc: var(--weight-normal) var(--ts-sm)/1.6 'Inter', sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  background: var(--lp-bg);
}

/* anchor links (nav + footer) glide to their section; disabled for users who
   prefer reduced motion */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--lp-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  position: relative;
  overflow-x: hidden;
  min-height: 100vh;
  background: var(--lp-bg);
}

/* Gradient wash scoped to the hero block only (heading + device mockup).
   Two LINEAR layers that overlap in the middle so the colour flows smoothly
   across the block: warm yellow fades DOWN from the top, cool periwinkle
   fades UP from the bottom, blending across the centre. Transparent tails
   let the page's --lp-bg show through past the hero. */
.lp-hero-bg {
  background:
    linear-gradient(180deg, var(--lp-glow-hero-warm) 0%, transparent 60%),
    linear-gradient(0deg, var(--lp-glow-cool) 0%, transparent 60%);
}

/* ===== Nav ===== */
.lp-nav {
  max-width: var(--lp-maxw);
  margin: 0 auto;
  padding: var(--space-7) var(--lp-gutter);
  /* 3-column grid: the two side columns are equal (1fr), so the middle
     `auto` column (the links) is centered on screen no matter how wide the
     logo or "Log in" button are. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-5);
}

.lp-brand {
  justify-self: start;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: var(--weight-bold);
  font-size: var(--ts-xl);
  color: var(--lp-ink);
  text-decoration: none;
}

/* Full Primorly wordmark (P mark + "Primorly"), light-mode PNG */
.lp-brand__logo {
  height: 38px;
  width: auto;
  display: block;
}

.lp-nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-15);
}

.lp-nav__link {
  color: var(--lp-ink-soft);
  text-decoration: none;
  font-size: var(--ts-sm);
  font-weight: var(--weight-medium);
  transition: color .15s ease;
}

.lp-nav__link:hover {
  color: var(--lp-accent);
}

.lp-login {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  font-family: inherit;
  font-size: var(--ts-base);
  font-weight: var(--weight-semibold);
  line-height: 1;
  text-decoration: none;
  color: var(--lp-accent);
  background: transparent;
  border: 1.5px solid var(--lp-accent);
  border-radius: 999px;
  padding: var(--space-2) var(--space-5);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.lp-login:hover {
  background: var(--lp-accent);
  color: #fff;
}

/* ===== Hero ===== */
.lp-hero {
  max-width: var(--lp-hero-maxw);
  margin: 0 auto;
  padding: var(--space-15) var(--lp-gutter) 0;
  text-align: center;
}

.lp-h1 {
  /* hero heading — notionally the loudest element (--type-hero) */
  font: var(--type-hero);
  letter-spacing: -0.01em;
  color: var(--lp-ink);
}

.lp-accent {
  color: var(--lp-accent);
}

/* rotating track word — typewriter effect via JS (see script.js).
   Its own block so it drops to a second line with a controllable gap. */
.lp-h1__rotate {
  display: block;
  margin-top: var(--space-5);
  /* ~20px gap below "to learn" — change to retune */
}

.lp-rotator {
  color: var(--lp-accent);
}

/* blinking type cursor that trails the word */
.lp-type-caret {
  display: inline-block;
  width: 3px;
  height: 0.82em;
  margin-left: 6px;
  vertical-align: -0.04em;
  background: var(--lp-accent);
  border-radius: 1px;
  animation: lpTypeCaret 1s step-end infinite;
}

@keyframes lpTypeCaret {
  50% {
    opacity: 0;
  }
}

/* hero description — sits close to the heading (--type-title-desc) */
.lp-sub {
  font: var(--type-title-desc);
  color: var(--lp-ink-soft);
  max-width: 720px;
  margin: var(--space-7) auto 0;
}

/* CTA is a decision point — more breathing room above it */
.lp-cta {
  font-family: inherit;
  font-size: var(--ts-md);
  font-weight: var(--weight-semibold);
  color: #fff;
  background: var(--lp-accent);
  border: none;
  border-radius: 999px;
  padding: var(--space-4) var(--space-10);
  margin-top: var(--space-10);
  cursor: pointer;
  box-shadow: 0 10px 24px -8px hsla(240, 100%, 55%, 0.5);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.lp-cta:hover {
  background: var(--lp-accent-strong);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -8px hsla(240, 100%, 55%, 0.55);
}

.lp-cta:active {
  transform: translateY(0);
}

/* ===== Device (iPad) ===== */
.lp-device-wrap {
  max-width: var(--lp-contentw);
  margin: var(--space-25) auto 0;
  padding: 0 var(--lp-gutter) var(--space-25);
  display: flex;
  justify-content: center;
}

.lp-device {
  width: min(1180px, 100%);
  background: var(--lp-d-bezel);
  border-radius: 30px;
  padding: 14px;
  box-shadow:
    0 2px 0 hsla(0, 0%, 100%, 0.04) inset,
    0 40px 80px -30px hsla(240, 60%, 40%, 0.4),
    0 20px 50px -20px hsla(0, 0%, 0%, 0.35);
}

/* the "screen" — the chat panel */
.lp-screen {
  display: flex;
  background: var(--lp-d-panel);
  border-radius: 18px;
  overflow: hidden;
  height: 560px;
  color: var(--lp-d-text);
  font-size: 12px;
}

/* ── Chat panel ── */
.lp-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.lp-chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  flex-shrink: 0;
}

.lp-topic-title {
  font-size: 12px;
  color: var(--lp-d-muted);
  white-space: nowrap;
}

.lp-subcount {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid var(--lp-d-border);
  border-radius: 7px;
  padding: 5px 9px;
  font-size: 11px;
  color: var(--lp-d-muted);
  white-space: nowrap;
}

.lp-progress {
  flex: 1;
  height: 4px;
  background: hsl(0, 0%, 30%);
  border-radius: 2px;
  overflow: hidden;
  min-width: 40px;
}

.lp-progress__fill {
  height: 100%;
  width: 66%;
  /* 2/3 complete */
  background: var(--lp-d-green);
  border-radius: 2px;
}

.lp-progress-count {
  font-size: 11px;
  color: var(--lp-d-muted);
  white-space: nowrap;
}

.lp-wave {
  display: flex;
  align-items: center;
  gap: 2px;
  height: 16px;
}

.lp-wave span {
  width: 2.5px;
  height: 4px;
  background: var(--lp-d-muted);
  border-radius: 2px;
}

.lp-wave.is-active span {
  animation: lpWave 0.9s ease-in-out infinite;
}

.lp-wave.is-active span:nth-child(2) {
  animation-delay: .15s;
}

.lp-wave.is-active span:nth-child(3) {
  animation-delay: .3s;
}

.lp-wave.is-active span:nth-child(4) {
  animation-delay: .45s;
}

@keyframes lpWave {

  0%,
  100% {
    height: 4px;
  }

  50% {
    height: 15px;
  }
}

.lp-mute {
  color: var(--lp-d-muted);
  display: flex;
}

/* XP pill in the chat header */
.lp-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  border: 1px solid var(--lp-d-border);
  border-radius: 8px;
  padding: 6px 10px;
  color: var(--lp-d-muted);
  white-space: nowrap;
}

.lp-pill--xp {
  color: var(--lp-d-xp);
  border-color: hsla(47, 90%, 60%, 0.4);
  background: hsla(47, 90%, 60%, 0.08);
  font-weight: 600;
}

/* messages */
.lp-messages {
  flex: 1;
  /* NOT user-scrollable — overflow:hidden still allows programmatic
     scrollTop (the loop auto-scrolls to the latest message), but the wheel/
     drag are blocked so the mockup can't be scrolled by hand. */
  overflow: hidden;
  scroll-behavior: smooth;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.lp-msg {
  display: flex;
  gap: 10px;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .35s ease, transform .35s ease;
}

.lp-msg.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.lp-msg--user {
  justify-content: flex-end;
}

.lp-msg--user .lp-bubble {
  background: hsl(0, 0%, 20%);
  border-radius: 14px 14px 4px 14px;
  max-width: 70%;
}

.lp-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: hsl(0, 0%, 22%);
  object-fit: cover;
}

.lp-ai-body {
  min-width: 0;
}

.lp-bubble {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--lp-d-text);
  padding: 9px 13px;
}

.lp-msg--ai .lp-bubble {
  padding-left: 0;
}

.lp-typing {
  display: none;
  align-items: center;
  gap: 4px;
  padding-left: 40px;
}

.lp-typing.is-visible {
  display: flex;
}

.lp-typing span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lp-d-muted);
  animation: lpBlink 1.2s infinite ease-in-out;
}

.lp-typing span:nth-child(2) {
  animation-delay: .2s;
}

.lp-typing span:nth-child(3) {
  animation-delay: .4s;
}

@keyframes lpBlink {

  0%,
  80%,
  100% {
    opacity: .3;
    transform: translateY(0);
  }

  40% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

/* streaming caret */
.lp-caret {
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--lp-d-blue-soft);
  margin-left: 1px;
  vertical-align: text-bottom;
  animation: lpCaret 0.9s step-end infinite;
}

@keyframes lpCaret {
  50% {
    opacity: 0;
  }
}

.lp-caret.is-hidden {
  display: none;
}

/* ── Agent-framework diagram (inline SVG) ── */
.lp-diagram {
  margin-top: 12px;
  max-width: 470px;
  background: hsl(0, 0%, 12%);
  border: 1px solid var(--lp-d-border);
  border-radius: 12px;
  padding: 10px 12px 6px;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .4s ease, transform .4s ease;
}

/* diagram leads the opening bubble (image first) — no gap above it */
.lp-diagram:first-child {
  margin-top: 0;
  margin-bottom: 10px;
}

.lp-diagram.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.lp-diagram__cap {
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--lp-d-muted);
  margin-bottom: 2px;
}

.lp-diagram svg {
  width: 100%;
  height: auto;
  display: block;
}

.lp-node {
  transform-box: fill-box;
  transform-origin: center;
  opacity: 0;
  transform: scale(.82);
}

.lp-diagram.is-visible .lp-node {
  animation: lpNodePop .4s cubic-bezier(.2, .9, .3, 1.2) forwards;
}

.lp-diagram.is-visible .lp-node:nth-of-type(1) {
  animation-delay: .05s;
}

.lp-diagram.is-visible .lp-node:nth-of-type(2) {
  animation-delay: .18s;
}

.lp-diagram.is-visible .lp-node:nth-of-type(3) {
  animation-delay: .42s;
}

.lp-diagram.is-visible .lp-node:nth-of-type(4) {
  animation-delay: .54s;
}

.lp-diagram.is-visible .lp-node:nth-of-type(5) {
  animation-delay: .66s;
}

@keyframes lpNodePop {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.lp-edge {
  stroke-dasharray: 220;
  stroke-dashoffset: 220;
}

.lp-diagram.is-visible .lp-edge {
  animation: lpEdgeDraw .5s ease forwards;
}

.lp-diagram.is-visible .lp-edge:nth-of-type(1) {
  animation-delay: .30s;
}

.lp-diagram.is-visible .lp-edge:nth-of-type(2) {
  animation-delay: .78s;
}

.lp-diagram.is-visible .lp-edge:nth-of-type(3) {
  animation-delay: .88s;
}

.lp-diagram.is-visible .lp-edge:nth-of-type(4) {
  animation-delay: .98s;
}

.lp-diagram.is-visible .lp-edge:nth-of-type(5) {
  animation-delay: 1.12s;
}

@keyframes lpEdgeDraw {
  to {
    stroke-dashoffset: 0;
  }
}

/* core node gets a soft breathing glow once settled */
.lp-diagram.is-visible .lp-node--core rect {
  animation: lpCorePulse 2.6s ease-in-out 1.2s infinite;
}

@keyframes lpCorePulse {

  0%,
  100% {
    filter: drop-shadow(0 0 0 hsla(229, 100%, 70%, 0));
  }

  50% {
    filter: drop-shadow(0 0 6px hsla(229, 100%, 70%, 0.55));
  }
}

/* input bar */
.lp-input {
  flex-shrink: 0;
  padding: 12px 18px 16px;
}

.lp-input__pill {
  display: flex;
  align-items: flex-end;
  /* send button stays at the bottom as text grows */
  gap: 10px;
  background: hsl(0, 0%, 18%);
  border-radius: 20px;
  /* rounded-rect (not full pill) so multi-line looks right */
  padding: 8px 8px 8px 16px;
}

.lp-input__ph {
  flex: 1;
  min-width: 0;
  /* let the flex item shrink so text wraps instead of clipping */
  font-size: 12px;
  line-height: 1.45;
  color: var(--lp-d-muted);
  overflow-wrap: break-word;
  /* wrap long text -> the input area grows taller */
  align-self: center;
  /* single-line text stays vertically centered */
}

/* while the student "types", the field reads as entered text + a blink caret */
.lp-input__ph.is-typing {
  color: var(--lp-d-text);
}

.lp-input__ph.is-typing::after {
  content: '';
  display: inline-block;
  width: 1.5px;
  height: 1em;
  margin-left: 1px;
  vertical-align: -0.15em;
  background: var(--lp-d-blue-soft);
  animation: lpCaret 0.9s step-end infinite;
  /* reuses the streaming-caret keyframes */
}

.lp-send {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--lp-d-blue);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

/* pulse when the message is "sent" */
.lp-send.is-pulse {
  animation: lpSendPulse .3s ease;
}

@keyframes lpSendPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.18);
  }
}

/* ===== "Ask anything" section — full-bleed white band, centered copy ===== */
.lp-ask {
  /* full-width white band that overrides the page's gradient wash */
  background: hsl(0, 0%, 100%);
  padding: var(--space-25) var(--lp-gutter);
  text-align: center;
}

.lp-ask__inner {
  max-width: 900px;
  margin: 0 auto;
}

/* subheading scale — smaller than the hero h1, still the Aleo accent title */
.lp-ask__title {
  font: var(--type-subheading);
  letter-spacing: -0.01em;
  color: var(--lp-accent);
}

/* body copy mirrors the hero description (.lp-sub) exactly */
.lp-ask__lead {
  font: var(--type-title-desc);
  color: var(--lp-ink-soft);
  max-width: 720px;
  margin: var(--space-7) auto 0;
}

/* ── decorative animated question bar (JS typewriter) ── */
.lp-ask__bar {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  max-width: 560px;
  margin: var(--space-10) auto 0;
  padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
  background: hsl(0, 0%, 100%);
  border: 1px solid var(--lp-accent);
  border-radius: var(--radius-pill);
  box-shadow: 0 4px 14px hsla(240, 100%, 70%, 0.2), 0 1px 2px hsla(240, 100%, 70%, 0.10);
  text-align: left;
}

.lp-ask__text {
  flex: 1;
  min-width: 0;
  font-size: var(--ts-sm);
  line-height: 1.45;
  color: var(--lp-ink-soft);
  /* wrap long questions onto more lines instead of clipping on narrow screens */
  overflow-wrap: break-word;
}

/* decorative send button — matches the marketing accent, not clickable */
.lp-ask__send {
  display: grid;
  place-items: center;
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-pill);
  background: var(--lp-accent);
}

/* ===== Shared: 3-col card titles ===== */

/* Worn by the card titles in How learning works · Specialized tracks · Where
   Primorly takes you. The clamp shrinks long titles onto one line at narrow
   3-col widths, topping out at 1.5rem (= --ts-xl); the single-column
   breakpoint under Responsive drops it. Sections add their own margin-top. */
.lp-gridcard-title {
  font: var(--type-card-title);
  font-size: clamp(1rem, 1.85vw, 1.5rem);
  color: var(--lp-accent);
}

/* ===== "How learning works" — gradient panel + 3 animated cards ===== */
.lp-how {
  background: hsl(0, 0%, 100%);
  padding: var(--space-15) var(--lp-gutter) var(--space-25);
}

/* Contained gradient panel — same warm-top / cool-bottom structure as the
   hero body wash, but bounded inside this rounded card on the white band. */
.lp-how__panel {
  /* wider than the shared --lp-maxw (1200px) so the 3 cards get more room */
  max-width: 1320px;
  margin: 0 auto;
  border-radius: 32px;
  padding: var(--space-25) var(--space-10) var(--space-15);
  text-align: center;
  background:
    linear-gradient(180deg, var(--lp-glow-warm) 0%, transparent 55%),
    linear-gradient(0deg, var(--lp-glow-cool) 0%, transparent 55%),
    hsl(0, 0%, 100%);
}

/* subheading scale — matches .lp-ask__title */
.lp-how__title {
  font: var(--type-subheading);
  letter-spacing: -0.01em;
  color: var(--lp-accent);
}

/* body copy mirrors the hero description (.lp-sub) exactly */
.lp-how__sub {
  font: var(--type-title-desc);
  color: var(--lp-ink-soft);
  max-width: 720px;
  margin: var(--space-7) auto 0;
}

/* ── Card grid ── */
.lp-how__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
  margin-top: var(--space-15);
  text-align: left;
}

.lp-howcard {
  display: flex;
  flex-direction: column;
  background: hsl(0, 0%, 100%);
  border-radius: 20px;
  padding: var(--space-4);
  box-shadow:
    0 12px 32px -14px hsla(240, 45%, 30%, 0.22),
    0 2px 6px -3px hsla(0, 0%, 0%, 0.1);
}

/* dark graphic panel at the top of each card (the app-chrome look) */
.lp-howcard__viz {
  position: relative;
  height: 232px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--lp-d-panel);
  color: var(--lp-d-text);
  flex-shrink: 0;
}

.lp-howcard__body {
  padding: var(--space-5) var(--space-2) var(--space-2);
}

/* stage label (First / Then / At your pace) */
.lp-howcard__eyebrow {
  display: block;
  font-size: var(--ts-sm);
  font-weight: var(--weight-bold);
  color: var(--lp-ink);
}

.lp-howcard__title {
  margin-top: var(--space-3);
}

.lp-howcard__text {
  margin-top: var(--space-4);
  font: var(--type-card-desc);
  color: var(--lp-ink-soft);
}

/* ── Card 1 viz: track picker ── */
.lp-viz-track {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 14px;
  padding: 22px 26px;
}

.lp-track-pill {
  padding: 12px;
  border-radius: 999px;
  background: hsl(0, 0%, 38%);
  color: #fff;
  font-size: 13.5px;
  font-weight: var(--weight-semibold);
  text-align: center;
  transition: background .25s ease, transform .15s ease;
}

.lp-track-pill--target.is-selected {
  background: var(--lp-accent);
}

.lp-track-pill.is-click {
  transform: scale(.97);
}

/* the fake cursor — animated via transform (see script.js) */
.lp-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 1px 2px hsla(0, 0%, 0%, 0.5));
  /* position driven by the --cursor-xy custom property set in script.js, so the
     .is-click scale below can compose with it (no inline transform to override) */
  transform: var(--cursor-xy, translate(0, 0));
  transition: transform .9s cubic-bezier(.5, .05, .2, 1);
  pointer-events: none;
  z-index: 3;
}

.lp-cursor.is-click {
  transform: var(--cursor-xy) scale(.82);
}

/* ── Card 2 viz: instructor chat ── */
.lp-viz-chat {
  display: flex;
  align-items: flex-start;
  padding: 18px;
}

.lp-howbubble {
  max-width: 94%;
  padding: 12px 14px;
  border-radius: 14px;
  background: hsl(0, 0%, 33%);
  color: var(--lp-d-text);
  font-size: 13px;
  line-height: 1.55;
}

/* typing dots, standalone bubble (no avatar) */
.lp-howdots {
  display: inline-flex;
  gap: 5px;
  padding: 13px 15px;
}

.lp-howdots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--lp-d-muted);
  animation: lpBlink 1.2s infinite ease-in-out;
}

.lp-howdots span:nth-child(2) {
  animation-delay: .2s;
}

.lp-howdots span:nth-child(3) {
  animation-delay: .4s;
}

/* ── Card 3 viz: object detection ── */
.lp-viz-detect {
  display: flex;
  align-items: center;
  justify-content: center;
}

.lp-detect-emoji {
  font-size: 92px;
  line-height: 1;
  filter: drop-shadow(0 6px 14px hsla(0, 0%, 0%, 0.4));
}

.lp-detect-box {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  border: 2.5px solid var(--lp-accent);
  border-radius: 8px;
  transform: translate(-50%, -50%) scale(1.15);
  opacity: 0;
  transition: opacity .3s ease, transform .35s cubic-bezier(.2, .9, .3, 1.2);
}

.lp-detect-box.is-on {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.lp-detect-label {
  position: absolute;
  top: -14px;
  left: -2px;
  padding: 2px 8px;
  border-radius: 5px;
  background: var(--lp-accent);
  color: #fff;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

/* sweeping scan bar that runs before the box locks on */
.lp-detect-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 44px;
  background: linear-gradient(180deg, transparent, hsla(240, 100%, 70%, 0.28), transparent);
  opacity: 0;
  z-index: 2;
}

.lp-detect-scan.is-scanning {
  animation: lpScan 1.1s ease-in-out;
}

@keyframes lpScan {
  0% {
    opacity: .9;
    transform: translateY(0);
  }

  100% {
    opacity: .9;
    transform: translateY(188px);
  }
}

/* ===== "Not another video library" — comparison ===== */
.lp-compare {
  background: hsl(0, 0%, 100%);
  padding: var(--space-15) var(--lp-gutter) var(--space-25);
  text-align: center;
}

.lp-compare__inner {
  max-width: var(--lp-maxw);
  margin: 0 auto;
}

.lp-compare__title {
  font: var(--type-subheading);
  letter-spacing: -0.01em;
  color: var(--lp-accent);
}

.lp-compare__sub {
  font: var(--type-title-desc);
  color: var(--lp-ink-soft);
  max-width: 720px;
  margin: var(--space-7) auto 0;
}

/* two columns; the cards are their own group, so a wide gap above them */
.lp-compare__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-7);
  margin-top: var(--space-25);
  text-align: left;
}

.lp-vs {
  background: hsl(0, 0%, 100%);
  border-radius: 22px;
  padding: var(--space-10);
}

/* Primorly column is the hero of the comparison — violet border + soft glow */
.lp-vs--primorly {
  border: 2px solid var(--lp-accent);
  box-shadow: 0 22px 50px -26px hsla(240, 100%, 60%, 0.45);
}

.lp-vs--others {
  border: 1.5px solid hsl(0, 0%, 82%);
}

/* card title sits apart from the list below it (its own group) */
.lp-vs__title {
  font: var(--type-card-title);
  margin-bottom: var(--space-7);
}

.lp-vs--primorly .lp-vs__title {
  color: var(--lp-accent);
}

.lp-vs--others .lp-vs__title {
  color: hsl(0, 0%, 50%);
}

/* list rows are one group — evenly, closely spaced */
.lp-vs__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  list-style: none;
}

.lp-vs__list li {
  position: relative;
  padding-left: var(--space-7);
  font: var(--type-card-desc);
}

/* ✓ / ✗ marker pinned to the first line of each row */
.lp-vs__list li::before {
  position: absolute;
  left: 0;
  top: 0;
  font-weight: var(--weight-bold);
}

.lp-vs--primorly .lp-vs__list li {
  color: var(--lp-ink);
}

.lp-vs--primorly .lp-vs__list li::before {
  content: '✓';
  color: var(--lp-accent);
}

.lp-vs--others .lp-vs__list li {
  color: hsl(0, 0%, 46%);
}

.lp-vs--others .lp-vs__list li::before {
  content: '✗';
  color: hsl(0, 0%, 60%);
}

/* ===== "Specialized tracks" — gradient panel + track cards ===== */
.lp-tracks {
  background: hsl(0, 0%, 100%);
  padding: var(--space-15) var(--lp-gutter) var(--space-25);
}

.lp-tracks__panel {
  /* wider than the shared --lp-maxw (1200px) so the 3 cards get more room */
  max-width: 1320px;
  margin: 0 auto;
  border-radius: 32px;
  padding: var(--space-25) var(--space-10) var(--space-15);
  text-align: center;
  background:
    linear-gradient(180deg, var(--lp-glow-warm) 0%, transparent 55%),
    linear-gradient(0deg, var(--lp-glow-cool) 0%, transparent 55%),
    hsl(0, 0%, 100%);
}

.lp-tracks__title {
  font: var(--type-subheading);
  letter-spacing: -0.01em;
  color: var(--lp-accent);
}

.lp-tracks__sub {
  font: var(--type-title-desc);
  color: var(--lp-ink-soft);
  max-width: 720px;
  margin: var(--space-7) auto 0;
}

.lp-tracks__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
  margin-top: var(--space-15);
  text-align: left;
}

.lp-track {
  display: flex;
  flex-direction: column;
  background: hsl(0, 0%, 100%);
  border-radius: 20px;
  padding: var(--space-4);
  box-shadow:
    0 12px 32px -14px hsla(240, 45%, 30%, 0.22),
    0 2px 6px -3px hsla(0, 0%, 0%, 0.1);
}

/* animated graphic panel — mid-grey per spec */
.lp-track__viz {
  position: relative;
  height: 200px;
  border-radius: 14px;
  overflow: hidden;
  background: hsl(0, 0%, 10%);
}

.lp-track__viz svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* title sits just under the image (same group) */
.lp-track__title {
  margin-top: var(--space-5);
}

.lp-track__desc {
  margin-top: var(--space-3);
  font: var(--type-card-desc);
  color: var(--lp-ink-soft);
}

.lp-track__rule {
  margin-top: var(--space-5);
  height: 1px;
  border: none;
  background: hsl(0, 0%, 85%);
}

.lp-track__label {
  margin-top: var(--space-4);
  font-size: var(--ts-sm);
  font-weight: var(--weight-bold);
  color: var(--lp-ink);
}

/* course list — its own tight group */
.lp-track__courses {
  margin-top: var(--space-3);
  padding-left: var(--space-5);
}

.lp-track__courses li {
  font: var(--type-card-desc);
  color: var(--lp-ink-soft);
  margin-bottom: var(--space-2);
}

.lp-track__courses li:last-child {
  margin-bottom: 0;
}

/* ── Card 1 viz: clustering (dots pop in one-by-one, then a labeled ring) ── */
.lp-cdot {
  opacity: 0;
  transform: scale(0);
  transform-box: fill-box;
  transform-origin: center;
  fill: var(--c);
}

.lp-viz-cluster.is-on .lp-cdot {
  animation: lpNodePop .32s cubic-bezier(.2, .9, .3, 1.2) forwards;
}

/* one-after-another reveal — dots are interleaved A/B/C in the markup */
.lp-viz-cluster.is-on .lp-cdot:nth-of-type(1) {
  animation-delay: .08s;
}

.lp-viz-cluster.is-on .lp-cdot:nth-of-type(2) {
  animation-delay: .20s;
}

.lp-viz-cluster.is-on .lp-cdot:nth-of-type(3) {
  animation-delay: .32s;
}

.lp-viz-cluster.is-on .lp-cdot:nth-of-type(4) {
  animation-delay: .44s;
}

.lp-viz-cluster.is-on .lp-cdot:nth-of-type(5) {
  animation-delay: .56s;
}

.lp-viz-cluster.is-on .lp-cdot:nth-of-type(6) {
  animation-delay: .68s;
}

.lp-viz-cluster.is-on .lp-cdot:nth-of-type(7) {
  animation-delay: .80s;
}

.lp-viz-cluster.is-on .lp-cdot:nth-of-type(8) {
  animation-delay: .92s;
}

.lp-viz-cluster.is-on .lp-cdot:nth-of-type(9) {
  animation-delay: 1.04s;
}

.lp-viz-cluster.is-on .lp-cdot:nth-of-type(10) {
  animation-delay: 1.16s;
}

.lp-viz-cluster.is-on .lp-cdot:nth-of-type(11) {
  animation-delay: 1.28s;
}

.lp-viz-cluster.is-on .lp-cdot:nth-of-type(12) {
  animation-delay: 1.40s;
}

/* ring around the violet cluster — draws after the dots are all in */
.lp-ring {
  fill: none;
  stroke: hsl(255, 100%, 72%);
  stroke-width: 2.5;
  stroke-dasharray: 189;
  /* 2π·30 */
  stroke-dashoffset: 189;
}

.lp-viz-cluster.is-on .lp-ring {
  animation: lpEdgeDraw .7s ease 1.85s forwards;
}

/* label above the ring — fades in just after the ring closes */
.lp-ringlabel {
  opacity: 0;
  transform: scale(.9);
  transform-box: fill-box;
  transform-origin: center;
}

.lp-viz-cluster.is-on .lp-ringlabel {
  animation: lpNodePop .4s cubic-bezier(.2, .9, .3, 1.2) 2.45s forwards;
}

/* ── Card 2 viz: car braking for a detected person ── */
.lp-car {
  transform: translateX(-195px);
  transform-box: fill-box;
}

.lp-viz-car.is-on .lp-car {
  /* ease-out reads as decelerating → braking */
  animation: lpCarDrive 2.2s cubic-bezier(.15, .7, .25, 1) forwards;
}

@keyframes lpCarDrive {
  to {
    transform: translateX(0);
  }
}

.lp-person {
  opacity: 0;
  transform: translateY(6px);
  transform-box: fill-box;
}

.lp-viz-car.is-on .lp-person {
  animation: lpPersonIn .5s ease .9s forwards;
}

@keyframes lpPersonIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.lp-detwrap {
  opacity: 0;
  transform: scale(1.15);
  transform-box: fill-box;
  transform-origin: center;
}

.lp-viz-car.is-on .lp-detwrap {
  animation: lpNodePop .4s cubic-bezier(.2, .9, .3, 1.2) 1.4s forwards;
}

.lp-brake {
  opacity: .2;
}

.lp-viz-car.is-on .lp-brake {
  animation: lpBrakeGlow 1s ease 1.5s forwards;
}

@keyframes lpBrakeGlow {
  0% {
    opacity: .2;
    filter: none;
  }

  45% {
    opacity: 1;
    filter: drop-shadow(0 0 5px hsl(0, 90%, 55%));
  }

  100% {
    opacity: 1;
    filter: drop-shadow(0 0 5px hsl(0, 90%, 55%));
  }
}

/* ── Card 3 viz: email-summary chatbot ── */
.lp-viz-email {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 18px;
}

.lp-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--lp-d-muted);
}

.lp-spinner {
  width: 13px;
  height: 13px;
  border: 2px solid hsla(0, 0%, 100%, 0.22);
  border-top-color: hsl(240, 100%, 72%);
  border-radius: 50%;
  animation: lpSpin .7s linear infinite;
}

@keyframes lpSpin {
  to {
    transform: rotate(360deg);
  }
}

/* ===== "Build a portfolio" — floating project cloud ===== */
.lp-portfolio {
  background: hsl(0, 0%, 100%);
  padding: var(--space-15) var(--lp-gutter) var(--space-40);
  text-align: center;
}

.lp-portfolio__inner {
  max-width: var(--lp-maxw);
  margin: 0 auto;
}

.lp-portfolio__title {
  font: var(--type-subheading);
  letter-spacing: -0.01em;
  color: var(--lp-accent);
}

.lp-portfolio__desc {
  font: var(--type-title-desc);
  color: var(--lp-ink-soft);
  max-width: 720px;
  margin: var(--space-7) auto 0;
}

/* Brick wall: alternating 4/3-brick rows are auto-centred, so each shorter row
   straddles the joints of the row above (running bond). Rows overlap via a
   negative margin so a cell tucks over the joint below it. Masks to a fade at
   the bottom, so the lower courses read as emerging. */
.lp-portfolio__wall {
  --brick-w: 216px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  margin: var(--space-15) auto 0;
  -webkit-mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 45%, transparent 100%);
}

.lp-brick-row {
  display: flex;
  gap: var(--space-4);
}

/* running bond, but with clear whitespace between courses (no overlap) */
.lp-brick-row+.lp-brick-row {
  margin-top: var(--space-4);
}

/* uniform-width brick; soft per-track shadow gives the floating feel */
.lp-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--brick-w);
  padding: var(--space-2) var(--space-4);
  border-radius: 999px;
  border: 1px solid;
  background: #fff;
  color: var(--lp-ink);
  font-family: 'Inter', sans-serif;
  font-size: var(--ts-sm);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* per-track tint — faded bg + light border + a soft matching shadow */
.lp-chip--ds {
  background: hsl(40, 100%, 98%);
  border-color: hsl(40, 55%, 87%);
  box-shadow: 0 6px 14px -8px hsla(40, 70%, 45%, 0.22), 0 1px 3px -1px hsla(0, 0%, 0%, 0.06);
}

.lp-chip--ml {
  background: hsl(172, 45%, 97%);
  border-color: hsl(172, 30%, 84%);
  box-shadow: 0 6px 14px -8px hsla(172, 45%, 38%, 0.22), 0 1px 3px -1px hsla(0, 0%, 0%, 0.06);
}

.lp-chip--ai {
  background: hsl(245, 100%, 99%);
  border-color: hsl(245, 65%, 92%);
  box-shadow: 0 6px 14px -8px hsla(245, 70%, 55%, 0.24), 0 1px 3px -1px hsla(0, 0%, 0%, 0.06);
}

/* Phones: keep the brick wall but smaller — narrower bricks, smaller wrapping
   text, and only 10 projects (the rest carry .lp-chip--m-hide). */
@media (max-width: 720px) {
  .lp-portfolio__wall {
    --brick-w: clamp(140px, 43vw, 220px);
  }

  .lp-brick-row {
    gap: var(--space-2);
  }

  .lp-brick-row+.lp-brick-row {
    margin-top: var(--space-2);
  }

  .lp-chip {
    padding: var(--space-2) var(--space-3);
    font-size: var(--ts-xs);
    line-height: 1.3;
    white-space: normal;
    text-align: center;
  }

  .lp-chip--m-hide {
    display: none;
  }
}

/* ===== "Where Primorly takes you" — role cards in a gradient panel ===== */
.lp-roles {
  background: hsl(0, 0%, 100%);
  padding: var(--space-15) var(--lp-gutter) var(--space-25);
}

.lp-roles__panel {
  /* wider than the shared --lp-maxw (1200px) so the 3 cards get more room */
  max-width: 1320px;
  margin: 0 auto;
  border-radius: 32px;
  padding: var(--space-25) var(--space-10) var(--space-15);
  text-align: center;
  background:
    linear-gradient(180deg, var(--lp-glow-warm) 0%, transparent 55%),
    linear-gradient(0deg, var(--lp-glow-cool) 0%, transparent 55%),
    hsl(0, 0%, 100%);
}

.lp-roles__title {
  font: var(--type-subheading);
  letter-spacing: -0.01em;
  color: var(--lp-accent);
}

.lp-roles__sub {
  font: var(--type-title-desc);
  color: var(--lp-ink-soft);
  max-width: 720px;
  margin: var(--space-7) auto 0;
}

.lp-roles__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
  margin-top: var(--space-15);
  text-align: left;
}

.lp-role {
  background: hsl(0, 0%, 100%);
  border-radius: 20px;
  padding: var(--space-7);
  box-shadow:
    0 12px 32px -14px hsla(240, 45%, 30%, 0.22),
    0 2px 6px -3px hsla(0, 0%, 0%, 0.1);
}

/* the "If you want…" line — its own group under the title */
.lp-role__when {
  margin-top: var(--space-4);
  font-family: 'Inter', sans-serif;
  font-weight: var(--weight-medium);
  font-size: var(--ts-sm);
  color: var(--lp-ink);
}

.lp-role__rule {
  margin-top: var(--space-4);
  height: 1px;
  border: none;
  background: hsl(0, 0%, 85%);
}

.lp-role__list {
  margin-top: var(--space-5);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.lp-role__list li {
  font: var(--type-card-desc);
  color: var(--lp-ink-soft);
}

/* ===== Pricing ===== */
.lp-pricing {
  background: hsl(0, 0%, 100%);
  padding: var(--space-15) var(--lp-gutter) var(--space-40);
}

.lp-pricing__inner {
  max-width: var(--lp-maxw);
  margin: 0 auto;
}

.lp-pricing__title {
  font: var(--type-subheading);
  letter-spacing: -0.01em;
  color: var(--lp-accent);
  text-align: center;
}

.lp-pricing__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-7);
  margin-top: var(--space-15);
  align-items: stretch;
}

.lp-plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: hsl(0, 0%, 100%);
  border: 1px solid hsl(0, 0%, 88%);
  border-radius: 24px;
  padding: var(--space-7);
  box-shadow: 0 12px 34px -18px hsla(240, 40%, 30%, 0.18);
}

/* featured plan — violet border, lift, badge */
.lp-plan--featured {
  border: 2px solid var(--lp-accent);
  transform: translateY(-10px);
  box-shadow: 0 24px 50px -22px hsla(240, 100%, 60%, 0.4);
}

.lp-plan__badge {
  position: absolute;
  top: -13px;
  left: 50%;
  transform: translateX(-50%);
  padding: var(--space-1) var(--space-4);
  border-radius: 999px;
  background: var(--lp-accent);
  color: #fff;
  font-size: var(--ts-xs);
  font-weight: var(--weight-bold);
  white-space: nowrap;
}

.lp-plan__name {
  font: var(--type-card-title);
  color: var(--lp-accent);
}

/* tagline sits tight under the plan name */
.lp-plan__tag {
  margin-top: var(--space-2);
  font-family: 'Inter', sans-serif;
  font-size: var(--ts-sm);
  font-weight: var(--weight-medium);
  color: var(--lp-ink-soft);
}

/* price is its own group — clear air above it */
.lp-plan__price {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-7);
}

.lp-plan__old {
  font-size: var(--ts-2xl);
  font-weight: var(--weight-bold);
  color: hsl(0, 0%, 65%);
  text-decoration: line-through;
}

.lp-plan__now {
  font-size: var(--ts-3xl);
  font-weight: var(--weight-bold);
  color: var(--lp-ink);
  line-height: 1;
}

.lp-plan__per {
  display: flex;
  flex-direction: column;
  font-size: var(--ts-sm);
  line-height: 1.3;
  color: var(--lp-ink-soft);
}

.lp-plan__per strong {
  font-weight: var(--weight-bold);
  color: var(--lp-ink);
}

/* feature list — one group; violet lines flag what's special to the plan */
.lp-plan__features {
  margin-top: var(--space-7);
  margin-bottom: var(--space-10);
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.lp-plan__features li {
  font-family: 'Inter', sans-serif;
  font-size: var(--ts-sm);
  color: var(--lp-ink-soft);
}

/* a plan's standout features — emphasised by weight, not colour */
.lp-plan__features li.lp-feat--hi {
  font-weight: var(--weight-semibold);
}

/* CTA pinned to the card bottom so all three align */
.lp-plan__cta {
  margin-top: auto;
  width: 100%;
  padding: var(--space-4);
  border: none;
  border-radius: 999px;
  background: var(--lp-accent);
  color: #fff;
  font-family: inherit;
  font-size: var(--ts-base);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  transition: background .15s ease;
}

.lp-plan__cta:hover {
  background: var(--lp-accent-strong);
}

/* ===== FAQ ===== */
.lp-faq {
  background: hsl(0, 0%, 100%);
  padding: var(--space-15) var(--lp-gutter) var(--space-40);
}

/* two columns: heading block left, accordion right */
.lp-faq__inner {
  max-width: var(--lp-maxw);
  margin: 0 auto;
  display: grid;
  /* wider left column so the heading stays on one line */
  grid-template-columns: 1fr 1.2fr;
  gap: var(--space-25);
  align-items: start;
}

.lp-faq__title {
  font: var(--type-subheading);
  letter-spacing: -0.01em;
  color: var(--lp-accent);
}

.lp-faq__sub {
  font: var(--type-title-desc);
  color: var(--lp-ink-soft);
  margin-top: var(--space-5);
}

/* each Q&A is a native <details>; a divider sits under every item */
.lp-faq__item {
  border-bottom: 1px solid hsl(0, 0%, 85%);
}

.lp-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) 0;
  cursor: pointer;
  list-style: none;
  font-family: 'Inter', sans-serif;
  font-size: var(--ts-base);
  font-weight: var(--weight-semibold);
  color: var(--lp-ink-soft);
}

/* hide the native disclosure triangle */
.lp-faq__q::-webkit-details-marker {
  display: none;
}

/* Lucide plus — rotates 45° into an ✕ when the item is open */
.lp-faq__icon {
  flex-shrink: 0;
  color: var(--lp-ink-soft);
  transition: transform .2s ease;
}

.lp-faq__item[open] .lp-faq__icon {
  transform: rotate(45deg);
}

.lp-faq__a {
  margin: 0;
  padding-bottom: var(--space-5);
  font-family: 'Inter', sans-serif;
  font-size: var(--ts-sm);
  line-height: 1.6;
  color: var(--lp-ink-soft);
  max-width: 62ch;
}

/* ===== Final CTA — gradient panel on white ===== */
.lp-cta-final {
  background: hsl(0, 0%, 100%);
  padding: var(--space-15) var(--lp-gutter) var(--space-25);
}

.lp-cta-final__panel {
  max-width: var(--lp-maxw);
  margin: 0 auto;
  border-radius: 32px;
  padding: var(--space-40) var(--space-15);
  text-align: center;
  background:
    linear-gradient(180deg, var(--lp-glow-warm) 0%, transparent 55%),
    linear-gradient(0deg, var(--lp-glow-cool) 0%, transparent 55%),
    hsl(0, 0%, 100%);
}

.lp-cta-final__title {
  font: var(--type-hero);
  letter-spacing: -0.01em;
  color: var(--lp-accent);
}

.lp-cta-final__sub {
  font: var(--type-title-desc);
  color: var(--lp-ink-soft);
  max-width: 640px;
  margin: var(--space-5) auto 0;
}

/* ===== Footer ===== */
.lp-footer {
  /* --lp-glow-warm is translucent; layer it over solid white so the footer
     reads as a clean neutral grey (no tint from the body gradient behind it) */
  background: linear-gradient(var(--lp-glow-warm), var(--lp-glow-warm)), #fff;
  padding: var(--space-25) var(--space-10) var(--space-15);
  text-align: left;
  color: var(--lp-ink-soft);
  font-size: var(--ts-sm);
}

.lp-footer__inner {
  max-width: var(--lp-maxw);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-15);
}

.lp-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lp-footer__logo {
  height: 72px;
  width: auto;
  display: block;
}

.lp-footer__copy {
  margin-top: var(--space-3);
  color: var(--lp-ink-soft);
}

/* right side: links and the "Get in touch" block share one row.
   flex-end so the email (bottom of the 2-line block) lands on the links' line.
   wrap so a tight row drops "Get in touch" below the links FIRST (links stay on
   one line); only when the links alone overflow do THEY wrap too. */
.lp-footer__right {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-15);
}

.lp-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3) var(--space-15);
}

.lp-footer__links a {
  color: var(--lp-ink-soft);
  text-decoration: none;
  font-size: var(--ts-sm);
  transition: color .15s ease;
}

.lp-footer__links a:hover {
  color: var(--lp-accent);
}

.lp-footer__contact {
  color: var(--lp-ink-soft);
}

.lp-footer__contact strong {
  display: block;
  font-weight: var(--weight-bold);
}

.lp-footer__contact a {
  display: block;
  margin-top: var(--space-2);
  color: var(--lp-ink-soft);
  text-decoration: none;
  transition: color .15s ease;
}

.lp-footer__contact a:hover {
  color: var(--lp-accent);
}

/* ===== Responsive ===== */
@media (max-width: 900px) {
  .lp-how__cards {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }

  .lp-pricing__cards {
    grid-template-columns: 1fr;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }

  /* no lift when stacked — avoids overlapping the card above */
  .lp-plan--featured {
    transform: none;
  }

  /* FAQ: heading stacks above the accordion */
  .lp-faq__inner {
    grid-template-columns: 1fr;
    gap: var(--space-10);
  }

  .lp-roles__cards {
    grid-template-columns: 1fr;
    max-width: 460px;
    margin-left: auto;
    margin-right: auto;
  }

  .lp-compare__cards {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin-left: auto;
    margin-right: auto;
  }

  .lp-tracks__cards {
    grid-template-columns: 1fr;
    max-width: 440px;
    margin-left: auto;
    margin-right: auto;
  }

  /* single-column: card is full-width, so drop the 3-col shrink clamp and
     restore full title size for proper hierarchy over the 14px description */
  .lp-gridcard-title {
    font-size: var(--ts-xl);
  }
}

/* Phones: tighten the gradient panels to a ~20px side inset so the cards and
   text get much more width. */
@media (max-width: 640px) {

  .lp-how,
  .lp-tracks,
  .lp-roles,
  .lp-cta-final {
    padding-left: var(--space-2);
    padding-right: var(--space-2);
  }

  .lp-how__panel,
  .lp-tracks__panel,
  .lp-roles__panel {
    padding: var(--space-15) var(--space-3) var(--space-10);
    border-radius: 20px;
  }

  .lp-cta-final__panel {
    padding: var(--space-25) var(--space-3);
    border-radius: 20px;
  }

  .lp-how__cards,
  .lp-tracks__cards,
  .lp-roles__cards {
    max-width: none;
  }
}

@media (max-width: 860px) {
  .lp-nav__links {
    gap: var(--space-5);
  }

  .lp-screen {
    height: 460px;
  }

  .lp-ask {
    padding: var(--space-25) var(--lp-gutter);
  }
}

@media (max-width: 620px) {
  .lp-nav {
    padding: var(--space-5);
  }

  /* footer: logo-on-top stack — center everything (logo, copy, links, contact) */
  .lp-footer__inner {
    flex-direction: column;
    align-items: center;
    gap: var(--space-15);
  }

  .lp-footer__right {
    flex-direction: column;
    align-items: center;
    gap: var(--space-15);
    width: 100%;
  }

  .lp-footer__contact {
    text-align: center;
  }

  /* links become a centered 2-column grid above the "Get in touch" block */
  .lp-footer__links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-5) var(--space-15);
    justify-items: center;
  }

  .lp-nav__links .lp-nav__link {
    display: none;
  }

  .lp-device {
    padding: 10px;
    border-radius: 22px;
  }

  .lp-screen {
    height: 420px;
  }

  .lp-diagram {
    max-width: 100%;
  }

  /* Cramped header on phones — drop the subtopic count + progress bar so the
     XP pill and topic title have room. */
  .lp-subcount,
  .lp-progress,
  .lp-progress-count {
    display: none;
  }
}

/* Respect reduced-motion: script.js renders a static finished chat instead of looping */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

/* ===== Waitlist modal ===== */
/* Opened by every "Start learning" CTA (hero, final CTA, 3 pricing cards).
   White card on a dimmed backdrop, matching the mockup; reuses the --lp-accent
   pill CTA. Pop-in: JS unhides, then adds .is-open one frame later so the card
   transitions from the start state below. */
.lp-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--lp-gutter);
}

/* beats the UA [hidden]{display:none} which .lp-modal's display:flex would override */
.lp-modal[hidden] {
  display: none;
}

.lp-modal__backdrop {
  position: absolute;
  inset: 0;
  background: hsla(0, 0%, 8%, 0.45);
  opacity: 0;
  transition: opacity .2s ease;
}

.lp-modal__card {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: #fff;
  border-radius: 24px;
  padding: var(--space-10);
  text-align: center;
  box-shadow: 0 30px 60px -20px hsla(240, 40%, 20%, 0.35);
  opacity: 0;
  transform: translateY(8px) scale(0.96);
  transition: opacity .22s ease, transform .22s cubic-bezier(.2, .8, .2, 1);
}

.lp-modal.is-open .lp-modal__backdrop {
  opacity: 1;
}

.lp-modal.is-open .lp-modal__card {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.lp-modal__close {
  position: absolute;
  top: var(--space-4);
  right: var(--space-4);
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--lp-ink-soft);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.lp-modal__close:hover {
  background: hsl(0, 0%, 94%);
  color: var(--lp-ink);
}

/* title↔text tight (one idea); text↔button wide (the button is the action) */
.lp-modal__title {
  font: var(--type-card-title);
  color: var(--lp-accent);
  margin: var(--space-5) 0 var(--space-4);
}

.lp-modal__text {
  font-size: var(--ts-base);
  line-height: 1.5;
  color: var(--lp-ink-soft);
  max-width: 46ch;
  margin: 0 auto var(--space-15);
}

.lp-modal__cta {
  display: block;
  width: 100%;
  padding: var(--space-4);
  border-radius: 999px;
  background: var(--lp-accent);
  color: #fff;
  font-family: inherit;
  font-size: var(--ts-md);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  box-shadow: 0 10px 24px -8px hsla(240, 100%, 55%, 0.5);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}

.lp-modal__cta:hover {
  background: var(--lp-accent-strong);
  transform: translateY(-1px);
  box-shadow: 0 14px 30px -8px hsla(240, 100%, 55%, 0.55);
}

.lp-modal__cta:active {
  transform: translateY(0);
}