/* =========================================================
   TunnlAi Landing Page
   ========================================================= */
:root {
  --navy: #2D3459;
  --panel: #F2F6FC;
  --dark: #1C1C1D;
  --dark-card: #1F2228;
  --dark-input: #232B36;
  --muted: #999999;
  --muted-2: #92979E;
  --muted-3: #5D646D;
  --muted-light: #B7C4D6;
  --muted-lighter: #C8CDD4;
  --white: #FFFFFF;

  --maxw: 1280px;
  --pad: 96px;           /* gutter for full-width sections (features/footer/beta) */
  /* side-by-side text sits in a viewport half; margins ~17% of that half each side */
  --gutter: clamp(72px, 8.5vw, 200px);
  /* distance from the container's right content edge to the viewport edge,
     used to bleed the locked panel off the right of the screen */
  --bleed-right: max(var(--pad), calc(50vw - (var(--maxw) / 2) + var(--pad)));
  --radius: 16px;
  --ease: cubic-bezier(.4, 0, .2, 1);

  --nav-h: 70px;

  /* ---------- type scale ----------
     Limited to 3 headings + a hero display accent + 2 paragraph sizes + 1 UI size.
     The phone/chat mockup (.chatphone/.cp-*) is a faithful app screenshot and is
     intentionally excluded from this scale. */
  --fs-h1:      clamp(40px, 5vw, 64px);   /* hero title (marquee) */
  --fs-h2:      clamp(32px, 4.2vw, 48px); /* section headings */
  --fs-h3:      20px;                     /* card titles / small headings */
  --fs-lede:    clamp(22px, 2.5vw, 32px); /* hero subheadline (display accent) */
  --fs-body:    18px;                     /* primary paragraph */
  --fs-body-sm: 16px;                     /* secondary / meta text (shares the UI size) */
  --fs-ui:      16px;                     /* nav, buttons, tags, inputs */

  /* Shared phone/screenshot width across the hero, scrolly and mission sections.
     Scales with viewport HEIGHT so the phones fill the same proportion of the screen
     on any monitor instead of capping at a fixed px and floating on large displays;
     34vw caps them on narrow desktops. (Mobile layouts set their own widths.) */
  --phone-w: min(34vw, 54vh);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "DM Sans", system-ui, -apple-system, sans-serif;
  color: var(--navy);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding-inline: var(--pad);
}

.ico { width: 16px; height: 16px; flex: none; }

/* ---------- Shared type ---------- */
.section-title {
  font-size: var(--fs-h2);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--navy);
}
.section-title--light { color: var(--white); }

.section-sub {
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--muted-light);
  margin: 18px 0 0;
  max-width: 560px;
}

/* ---------- Tag / eyebrow ---------- */
.tag {
  display: inline-block;
  padding: 10px 16px;
  border-radius: 999px;
  border: 1px solid rgba(45, 52, 89, .16);
  font-size: var(--fs-ui);
  font-weight: 700;
  color: var(--muted-3);
  line-height: 1;
}
.tag--onDark {
  border-color: rgba(255, 255, 255, .16);
  color: var(--muted-lighter);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-ui);
  font-weight: 700;
  border-radius: 11px;
  padding: 0 20px;
  height: 48px;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), background .2s var(--ease);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary {
  background: var(--navy);
  color: var(--white);
}
.btn--primary:hover { box-shadow: 0 10px 24px rgba(45, 52, 89, .28); }
.btn--secondary {
  background: var(--white);
  color: var(--navy);
  border-color: rgba(45, 52, 89, .16);
}
.btn--secondary:hover { box-shadow: 0 8px 20px rgba(45, 52, 89, .12); }

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-h);
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid rgba(45, 52, 89, .06);
}
.nav__inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32px; /* logo 32px from the left, CTA 32px from the right */
}
.wordmark {
  display: inline-flex;
  align-items: center;
  color: var(--navy); /* drives the logo via currentColor */
}
.wordmark .logo { display: block; height: 20px; width: auto; }
.wordmark--light { color: var(--white); }

.nav__links {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 32px;
}
.nav__links a {
  font-size: var(--fs-ui);
  font-weight: 600;
  color: var(--navy);
  opacity: .8;
  transition: opacity .15s var(--ease);
}
.nav__links a:hover, .nav__links a.active { opacity: 1; }
.nav__cta { height: 48px; }

/* hamburger toggle (mobile only) */
.nav__toggle {
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  border-radius: 2px;
  background: var(--navy);
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
body.menu-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
body.menu-open .nav__toggle span:nth-child(2) { opacity: 0; }
body.menu-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* full-screen overlay menu */
.nav__overlay {
  position: fixed;
  top: var(--nav-h);
  left: 0;
  right: 0;
  bottom: 0;
  display: none; /* enabled on mobile */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 36px;
  background: var(--white);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s var(--ease), visibility .25s var(--ease);
  z-index: 90;
}
body.menu-open .nav__overlay { opacity: 1; visibility: visible; }
.nav__overlay-links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 32px;
}
.nav__overlay-links a {
  font-size: 28px;
  font-weight: 700;
  color: var(--navy);
  opacity: .9;
}
.nav__overlay-links a.active, .nav__overlay-links a:hover { opacity: 1; }
.nav__overlay-cta { height: 56px; font-size: var(--fs-body); padding: 0 32px; }

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  background: var(--white);
  padding: 0;
  overflow: hidden;
  /* fill the viewport below the sticky nav, leaving ~60px of the next section visible */
  min-height: calc(100vh - var(--nav-h) - 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* gray panel: right half of the viewport, anchored to the bottom, half height */
.hero__panel {
  position: absolute;
  left: 50%;
  right: 0;
  bottom: 0;
  height: 50%;
  background: var(--panel);
  z-index: 0;
}
.hero__inner {
  /* full-width; text is placed within the left half below */
  max-width: none;
  margin: 0;
  padding: 0;
  /* let the hero's viewport-based min-height govern; content centres within it */
  min-height: 0;
  position: relative;
  z-index: 1;
}
/* copy lives in the left half with ~17% gutters on each side */
.hero__copy {
  /* vertically centred within the hero by the flex container; no top bias */
  padding-top: 0;
  margin-left: var(--gutter);
}
/* body/margins stay proportional; the display title may extend wider (see below) */
.hero__title {
  font-size: var(--fs-h1);
  font-weight: 900;
  line-height: 1.0;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--navy);
  max-width: min(620px, calc(50vw - 2 * var(--gutter)));
}
/* at larger sizes let the headline break to two lines ("The Decision Engine" / "for Collectors") */
@media (min-width: 1200px) {
  .hero__title { max-width: 600px; }
}
.tm { font-size: .32em; font-weight: 700; vertical-align: super; }
.hero__lede {
  font-size: var(--fs-lede);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--navy);
  max-width: min(560px, calc(50vw - 2 * var(--gutter)));
  margin: 24px 0 0;
}
.hero__body {
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.5;
  color: var(--navy);
  max-width: min(480px, calc(50vw - 2 * var(--gutter)));
  margin: 34px 0 0;
}
.hero__actions { display: flex; gap: 14px; margin-top: 40px; }

/* hero image: two-layer parallax (slide1_phone + slide1_prompt).
   The phone fills 51.2% of the canvas and sits right-of-centre (57.9%), so scale up
   1.952x and offset to match the other screenshots: body 120px from top, centred in the right half */
.hero__figure {
  --pb: var(--phone-w); /* phone body width, matches the scrolly screenshots */
  position: absolute;
  width: calc(var(--pb) * 1.952);
  top: calc(10px - var(--pb) * 0.0617); /* body top → 80px from viewport (just below the nav) */
  left: 75%;
  transform: translateX(-57.89%);        /* body centre → 75% of viewport */
  z-index: 2;
  pointer-events: none;
}
.hero-back { display: block; width: 100%; height: auto; }
.hero-front { position: absolute; top: 0; left: 0; width: 100%; height: auto; }
.hero-back, .hero-front { will-change: transform; }

/* -------- initial-load entrance --------
   staggered fade-up for the nav + hero; the figure keeps its own translateX so it
   only fades (animating transform would fight the centring) */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.nav { animation: fadeIn .6s var(--ease) both; }
.hero__panel { animation: fadeIn 1s var(--ease) .05s both; }
.hero__title  { animation: fadeUp .7s var(--ease) .12s both; }
.hero__lede   { animation: fadeUp .7s var(--ease) .2s both; }
.hero__body   { animation: fadeUp .7s var(--ease) .28s both; }
.hero__actions{ animation: fadeUp .7s var(--ease) .4s both; }
.hero__figure { animation: fadeIn .9s var(--ease) .3s both; }

/* =========================================================
   FEATURES (dark)
   ========================================================= */
.features {
  background: var(--dark);
  color: var(--white);
  padding: 96px 0;
}
.features__head { text-align: center; display: flex; flex-direction: column; align-items: center; }
.features__head .tag { margin-bottom: 24px; }
.features__head .section-sub { text-align: center; }
/* staggered reveal on scroll-in: tag → title → subtitle */
.features__head .tag,
.features__head .section-title,
.features__head .section-sub {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.features__head.is-in .tag           { opacity: 1; transform: none; transition-delay: 0s; }
.features__head.is-in .section-title { opacity: 1; transform: none; transition-delay: .05s; }
.features__head.is-in .section-sub   { opacity: 1; transform: none; transition-delay: .1s; }

.feature-cards {
  list-style: none;
  margin: 56px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.fcard {
  position: relative;
  background: var(--dark-card);
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: var(--radius);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  /* icon sits directly above the text; cards size to content (grid stretches them to
     equal height per row) instead of a fixed min-height that spread the two apart */
  gap: 16px;
  /* revealed on scroll: cascade in left→right (see JS) */
  opacity: 0;
  transform: translateX(-22px);
  transition: opacity .42s var(--ease), transform .42s var(--ease);
}
.fcard.is-in { opacity: 1; transform: none; }
.feature-cards .fcard:nth-child(2) { transition-delay: .06s; }
.feature-cards .fcard:nth-child(3) { transition-delay: .12s; }
.feature-cards .fcard:nth-child(4) { transition-delay: .18s; }
.feature-cards .fcard:nth-child(5) { transition-delay: .24s; }
.fcard__icon { display: flex; align-items: center; }
.fcard__icon svg { height: 22.5px; width: auto; color: #4F7BC4; }
.fcard__text { display: flex; flex-direction: column; gap: 10px; }
.fcard__title {
  font-size: var(--fs-h3);
  font-weight: 700;
  color: var(--white);
  margin: 0;
  letter-spacing: -0.01em;
}
.fcard__label {
  font-size: var(--fs-body-sm);
  font-weight: 500;
  line-height: 1.4;
  color: var(--muted-light);
  margin: 0;
}

/* =========================================================
   SCROLLYTELLING
   ========================================================= */
.scrolly { position: relative; background: var(--white); }

/* -------- pinned viewport-wide layer -------- */
.scrolly__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 0;
  pointer-events: none;
  overflow: hidden; /* crop the screenshots to the pinned background area */
}

/* locked background: left edge at middle of viewport, extends to the right edge */
.scrolly__bg {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  right: 0;
  background: var(--panel);
}

/* vertical progress slider: left edge of viewport, nav bottom → viewport bottom */
.scrolly__rail {
  position: absolute;
  left: 0;
  top: var(--nav-h);
  bottom: 0;
  width: 5px;
  background: transparent; /* white page shows behind the unfilled portion */
  opacity: 0; /* hidden until the first slide is fully pinned (set by JS) */
  transition: opacity .25s ease;
}
.scrolly__rail-fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  border-radius: 0; /* square ends */
  background: var(--navy);
  transition: height .15s linear;
}

/* screenshots: 120px from top of viewport, centred in the right half */
.phone-stack {
  --pw: var(--phone-w); /* rendered phone width, shared by the parallax slide */
  position: absolute;
  top: 120px;
  left: 75%;
  transform: translateX(-50%);
  width: var(--pw);
}
.phone {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  opacity: 0;
  transition: opacity .55s var(--ease);
  filter: drop-shadow(0 24px 48px rgba(45, 52, 89, .16));
  will-change: opacity;
}
.phone.is-active { opacity: 1; }

/* two-layer parallax screenshot (Connect the whole hobby) */
/* the connect layers have a wider canvas (menu overflows left) with the phone at
   60.8% width; scale up 1.642x and offset so the phone matches the other screenshots */
.phone--parallax {
  width: calc(var(--pw) * 1.642);
  top: calc(var(--pw) * -0.2054);
  left: 50%;
  transform: translateX(-50%);
}
.phone--parallax .parallax-back { display: block; width: 100%; height: auto; }
.phone--parallax .parallax-front {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}

/* ============ LIVE CONVERSATIONAL-AI PHONE (scrolly slide 0) ============
   A real device built from DOM instead of a screenshot. The fixed 393×852
   "device" is scaled by JS (sizeChatPhone) to match --pw, so it renders
   exactly like the sibling screenshots (width:100%, height auto). */
.phone--chat { overflow: visible; }
.chatphone {
  --ink: #232B36; --muted: #5D646D; --line: #E7ECF3;
  --chip-border: #EAEEF4; --blue: #2F6BF7;
  --smooth: cubic-bezier(.22, 1, .36, 1);
  position: relative;
  width: 393px; height: 852px;
  background: var(--white);
  border-radius: 44px;
  overflow: hidden;
  display: flex; flex-direction: column;
  transform-origin: top left; /* JS sets transform: scale() */
  color: var(--navy);
  -webkit-font-smoothing: antialiased;
}
.chatphone * { box-sizing: border-box; }

.cp-statusbar { height: 52px; flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 14px 34px 0; font-size: 16px; font-weight: 600; }
.cp-icons { display: flex; align-items: center; gap: 7px; }
.cp-statusbar svg { display: block; }
.cp-appbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 8px 20px 14px; }
.cp-round { width: 44px; height: 44px; border-radius: 50%; background: var(--panel); display: flex; align-items: center; justify-content: center; }
.cp-mark { display: flex; align-items: center; justify-content: center; }
.cp-mark svg { width: 118px; height: auto; }
.cp-chat { flex: 1 1 auto; overflow: hidden; position: relative; padding: 8px 16px 0; }
.cp-scroll { display: flex; flex-direction: column; gap: 16px; transition: transform .65s var(--smooth); will-change: transform; }
.cp-composer { flex: 0 0 auto; padding: 12px 16px 26px; background: linear-gradient(to top, var(--white) 70%, rgba(255,255,255,0)); }
.cp-bar { display: flex; align-items: center; gap: 12px; background: var(--panel); border-radius: 22px; padding: 14px 18px; color: var(--muted); font-size: 16px; }
.cp-plus { font-size: 22px; font-weight: 400; color: var(--navy); line-height: 1; }

/* user prompt bubble — fades + rises in like an outgoing text message */
.chatphone .msg-user { align-self: flex-end; max-width: 88%; background: var(--navy); color: var(--white); font-size: 16px; font-weight: 500; line-height: 24px; padding: 16px 20px; border-radius: 24px; border-bottom-right-radius: 8px; transform-origin: 100% 100%; opacity: 0; transform: translateY(20px) scale(.94); transition: opacity .5s var(--smooth), transform .5s var(--smooth); }
.chatphone .msg-user.in { opacity: 1; transform: none; }

/* typing indicator */
.chatphone .typing { align-self: flex-start; display: flex; gap: 6px; padding: 14px 18px; background: var(--panel); border-radius: 20px; transform-origin: 0 100%; }
.chatphone .typing span { width: 8px; height: 8px; border-radius: 50%; background: #AAB1BD; animation: cp-blink 1.3s infinite ease-in-out; }
.chatphone .typing span:nth-child(2) { animation-delay: .18s; }
.chatphone .typing span:nth-child(3) { animation-delay: .36s; }
@keyframes cp-blink { 0%,80%,100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* AI response text (streamed word by word) */
.chatphone .resp-text { align-self: flex-start; font-size: 16px; font-weight: 600; line-height: 24px; color: var(--ink); }
.chatphone .resp-text .w { display: inline-block; opacity: 0; transform: translateY(5px); transition: opacity .32s var(--smooth), transform .32s var(--smooth); }
.chatphone .resp-text .w.in { opacity: 1; transform: none; }

/* AI section heading ("Card Details") */
.chatphone .section-head { align-self: stretch; display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.chatphone .section-head h3 { margin: 0; font-size: 24px; font-weight: 700; line-height: 32px; color: var(--navy); flex: 1; }
.chatphone .section-head .chev { width: 40px; height: 40px; border-radius: 12px; background: var(--panel); display: flex; align-items: center; justify-content: center; color: var(--navy); flex: 0 0 auto; }

/* data card (2 columns) */
.chatphone .datacard { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 16px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.chatphone .cell { display: flex; flex-direction: column; gap: 6px; padding: 0 4px; }
.chatphone .cell .label { font-size: 14px; font-weight: 700; line-height: 20px; color: var(--muted); }
.chatphone .cell .big { font-size: 18px; font-weight: 700; line-height: 24px; color: var(--navy); }
.chatphone .cell .sub { font-size: 14px; font-weight: 700; line-height: 20px; color: var(--muted); }
.chatphone .chip { align-self: flex-start; display: flex; align-items: center; gap: 8px; margin-top: 2px; padding: 6px 12px 6px 6px; background: var(--white); border: 1px solid var(--chip-border); border-radius: 12px; box-shadow: 0 2px 6px -2px rgba(29,37,71,.12); }
.chatphone .chip .av { width: 18px; height: 18px; border-radius: 50%; flex: 0 0 auto; object-fit: cover; display: block; background: #fff; box-shadow: inset 0 0 0 1px rgba(29,37,71,.08); }
.chatphone .chip .nm { font-size: 14px; font-weight: 700; line-height: 20px; color: var(--navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 96px; }
.chatphone .chip .nm .time { font-size: 12px; font-weight: 500; color: var(--muted); margin-left: 6px; }

/* base card (graded card image + T-Score + value) */
.chatphone .basecard { align-self: stretch; display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.chatphone .basecard .tscore { align-self: flex-start; display: flex; align-items: center; gap: 4px; background: #BFEAD4; color: #027C41; border-radius: 6px; padding: 3px 10px; font-size: 16px; font-weight: 900; line-height: 24px; }
.chatphone .basecard .tscore svg { width: 16px; height: 16px; }
.chatphone .card-img { width: 329px; max-width: 100%; height: auto; aspect-ratio: 987/1659; border-radius: 10px; display: block; align-self: center; box-shadow: 0 10px 30px -12px rgba(29,37,71,.3); }
.chatphone .card-info { display: flex; flex-direction: column; align-items: flex-start; margin-top: 10px; }
.chatphone .ci-name { font-size: 18px; font-weight: 900; line-height: 1.15; letter-spacing: -.01em; color: var(--navy); text-transform: uppercase; }
.chatphone .ci-sub { font-size: 15px; font-weight: 700; line-height: 1.3; color: var(--muted); margin-top: 3px; }
.chatphone .ci-price { font-size: 18px; font-weight: 900; line-height: 1.2; color: var(--navy); margin-top: 13px; }
.chatphone .ci-price .e { font-size: 12px; font-weight: 600; font-style: italic; color: var(--muted); margin-left: 2px; }
.chatphone .ci-change { display: flex; align-items: center; gap: 7px; margin-top: 6px; }
.chatphone .ci-arrow { width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%; background: #BFEAD4; color: #027C41; display: flex; align-items: center; justify-content: center; }
.chatphone .ci-arrow svg { width: 12px; height: 12px; }
.chatphone .ci-delta { font-size: 15px; font-weight: 900; color: #027C41; }
.chatphone .ci-time { font-size: 15px; font-weight: 700; color: var(--muted); }
.chatphone .ci-grade { margin-top: 14px; display: inline-flex; align-items: center; gap: 9px; background: #fff; border: 1px solid #C3181B; border-radius: 6px; padding: 4px 12px; font-size: 13px; font-weight: 500; line-height: 1; color: var(--navy); }
.chatphone .ci-grade b { font-weight: 800; }

/* reveal animation for response blocks */
.chatphone .reveal { opacity: 0; transform: translateY(16px) scale(.98); transition: opacity .55s var(--smooth), transform .55s var(--smooth); }
.chatphone .reveal.in { opacity: 1; transform: none; }
.parallax-back, .parallax-front { will-change: transform; }

/* -------- scrolling text (overlaps the pinned layer) -------- */
.scrolly__steps {
  position: relative;
  z-index: 1;
  max-width: none;
  margin: -100vh 0 0;   /* pull text up over the pinned layer */
  padding: 0;
}
.step {
  min-height: 92vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 20px;
  margin-left: var(--gutter);
  max-width: min(500px, calc(50vw - 2 * var(--gutter)));
}
/* first step has no preceding step to scroll out ahead of it, so it would otherwise
   sit already-centred (and above centre) the instant the section pins. Give it a top
   runway so it enters lower and rises into place as you scroll in. */
.scrolly__steps .step[data-index="0"] { justify-content: flex-start; padding-top: 62vh; }
/* staggered "wave" reveal: tag → title → copy rise and fade in when the step centres */
.step .tag,
.step__title,
.step__copy {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.step.is-active .tag        { opacity: 1; transform: none; transition-delay: 0s; }
.step.is-active .step__title { opacity: 1; transform: none; transition-delay: .05s; }
.step.is-active .step__copy  { opacity: 1; transform: none; transition-delay: .1s; }
/* JS-driven reveal (desktop): opacity is set per-frame from scroll position so the
   text stays fully visible until it is ~halfway out the top, rather than snapping off
   with the is-active class. Disable the transform/transition so JS has direct control. */
.scrolly.js-reveal .step .tag,
.scrolly.js-reveal .step__title,
.scrolly.js-reveal .step__copy { transform: none; transition: none; }
.step .tag { align-self: flex-start; }
.step__title {
  font-size: var(--fs-h2);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--navy);
}
.step__copy {
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.55;
  color: var(--navy);
  margin: 0;
  max-width: 460px;
}

/* =========================================================
   JOIN THE BETA (dark)
   ========================================================= */
.beta { background: var(--dark); color: var(--white); padding: 72px 0; }
.beta__inner { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
/* staggered reveal on scroll-in: heading then form */
.beta__inner .section-title,
.beta__inner .beta__form {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.beta__inner.is-in .section-title { opacity: 1; transform: none; transition-delay: 0s; }
.beta__inner.is-in .beta__form   { opacity: 1; transform: none; transition-delay: .08s; }
.beta__form {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 460px;
  background: var(--dark-input);
  border-radius: 32px;
  padding: 6px 6px 6px 22px;
}
.beta__input {
  flex: 1;
  border: none;
  background: transparent;
  color: var(--white);
  font: 500 var(--fs-ui) "DM Sans", sans-serif;
  outline: none;
}
.beta__input::placeholder { color: var(--muted-2); }
.beta__submit {
  flex: none;
  width: 48px;
  height: 48px;
  border: none;
  border-radius: 50%;
  background: var(--navy);
  color: var(--white);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform .15s var(--ease), background .2s var(--ease);
}
.beta__submit:hover { transform: translateY(-1px); background: #3a4275; }
.beta__submit:disabled { opacity: .5; cursor: not-allowed; transform: none; }
.beta__arrow { width: 14px; height: 13px; display: block; }
/* light variant — same form, restyled for the white hero background */
.beta__form--light { background: var(--panel); }
.beta__form--light .beta__input { color: var(--navy); }
.beta__form--light .beta__input::placeholder { color: var(--muted-3); }
/* hero placement: left-aligned under the copy, spacing matches the old button row */
.hero__form { margin-top: 40px; }
/* signup outcome messages inside the light hero need dark text, left-aligned */
.hero__copy .beta__success { color: var(--navy); text-align: left; margin: 40px 0 0; padding: 0; }
.hero__copy .beta__error { color: #C0392B; text-align: left; }
/* signup outcome messages — tuned for the dark section, not the light-page defaults */
.beta__success {
  color: var(--white);
  font: 600 var(--fs-body) "DM Sans", sans-serif;
  text-align: center;
  padding: 18px 0;
  max-width: 460px;
}
.beta__error {
  color: #FF9A9A;
  font: 500 var(--fs-body-sm) "DM Sans", sans-serif;
  text-align: center;
  padding: 10px 0 0;
  max-width: 460px;
}

/* =========================================================
   MISSION
   ========================================================= */
/* mirrors one scrolly slide, flipped: light panel + phone on the LEFT, text on the RIGHT */
.mission {
  position: relative;
  overflow: hidden;
  background: var(--white);
  min-height: 104vh;
  display: flex;
  align-items: center;
}
/* locked background: left edge → middle of viewport */
.mission__panel {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 50%;
  background: var(--panel);
  z-index: 0;
}
/* phone: centred in the left half; drifts on scroll (JS sets translate) */
.mission__phone {
  position: absolute;
  top: 72px;
  left: 25%;
  transform: translateX(-50%);
  width: var(--phone-w);
  height: auto;
  z-index: 1;
  filter: drop-shadow(0 24px 48px rgba(45, 52, 89, .16));
  will-change: translate;
}
.mission__inner { position: relative; z-index: 2; width: 100%; max-width: none; margin: 0; padding: 0; }
/* text sits in the right half with matching ~17% gutters */
.mission__copy {
  margin-left: auto;
  margin-right: var(--gutter);
  max-width: min(440px, calc(50vw - 2 * var(--gutter)));
}
.mission__copy .tag { margin-bottom: 20px; }
.mission__copy .section-title { margin-bottom: 22px; }
.mission__body p {
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.55;
  color: var(--navy);
  margin: 0 0 18px;
}
.mission__body p:last-child { margin-bottom: 0; }

/* =========================================================
   FOOTER
   ========================================================= */
.footer { background: var(--dark); color: var(--white); padding: 40px 0; }
.footer__inner {
  padding: 0 32px; /* match the nav's edge margins */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.footer__left { display: flex; align-items: center; gap: 20px; }
.footer__copy { font-size: var(--fs-body-sm); font-weight: 600; color: var(--muted-2); }
.footer__right { display: flex; align-items: center; gap: 20px; }
.footer__right { gap: 14px; }
.footer__social { color: var(--muted-light); opacity: .85; transition: opacity .15s var(--ease); }
.footer__social:hover { opacity: 1; }
.footer__social svg { display: block; width: 22px; height: 22px; }
.footer__mail { font-size: var(--fs-ui); font-weight: 600; color: var(--white); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .feature-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
  :root {
    --pad: 48px;
    /* mobile phone screenshots sit in a full-width gray band, sized by HEIGHT so every
       image (whatever its aspect) is cropped by the same ~15% at the bottom */
    --mphone-h: min(440px, 58vh);
    --mphone-top: 54px;              /* gray space above the phone inside the band */
    --mphone-band: calc(var(--mphone-h) * 0.85 + var(--mphone-top)); /* band height */
  }

  /* Hero stacks: text first, image below */
  .hero { overflow: visible; padding: 32px 0 0; display: flex; flex-direction: column; }
  .hero__panel { display: none; }
  .hero__inner { order: 1; padding: 0 var(--pad); min-height: 0; }
  .hero__copy { padding-top: 0; margin-left: 0; max-width: none; }
  .hero__title { max-width: none; }
  .hero__lede { max-width: 480px; } /* reset the desktop 50vw-gutter calc, which collapses to ~51px on phones */
  .hero__body { max-width: 480px; }
  .hero__figure {
    order: 2;
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 100vw;
    margin: 32px 0 0 calc(50% - 50vw);   /* full-bleed gray band */
    /* the phone BODY is only 51.1% of this mockup's width (rest is shadow padding), so
       size by the visible body width and let the padding overflow off the band edges */
    --hbody: min(340px, 80vw);           /* visible phone body width */
    --hero-gap: 84px;                    /* where the top of the phone sits in the band */
    height: calc(var(--hero-gap) + var(--hbody) * 1.35);
    overflow: hidden;
    background: var(--panel);
  }
  /* both layers sized so the body = --hbody, offset -57.9% to centre the body (it sits
     right-of-centre in the canvas), and pulled up by the 7.9%/2.18 top padding so the
     visible phone starts at --hero-gap; band crops the tall phone's bottom */
  .hero__figure .hero-back,
  .hero__figure .hero-front {
    position: absolute;
    top: calc(var(--hero-gap) - var(--hbody) * 0.2055);
    left: 50%;
    width: calc(var(--hbody) * 1.957);
    max-width: none;   /* let the shadow padding overflow the band instead of clamping */
    height: auto;
    transform: translateX(-57.9%) !important;
  }
  /* the prompt bubble (front layer) overhangs left of the phone and would clip off the
     viewport once the phone fills the band. Anchor it 16px from the viewport's left edge
     instead (its content starts 5.3% into the image), robust across widths. The phone /
     back layer stays centred and "perfectly positioned". */
  .hero__figure .hero-front {
    left: 0;
    transform: translateX(calc(16px - var(--hbody) * 0.1037)) !important;
  }

  /* Scrollytelling → simple stacked flow (no pinning) */
  .scrolly__pin { display: none; }
  .scrolly__steps { margin-top: 0; padding: 0 var(--pad); }
  .step {
    min-height: 0;
    opacity: 1;
    transform: none;
    margin-left: 0;
    max-width: none;
    padding: 48px 0 24px;
  }
  /* text stays visible on mobile (no per-step wave) */
  .step .tag, .step__title, .step__copy { opacity: 1; transform: none; transition: none; }
  /* the desktop first-step "runway" (padding-top: 62vh) has no place in the stacked
     mobile flow — it would leave ~62vh of dead space above the first step */
  .scrolly__steps .step[data-index="0"] { justify-content: center; padding-top: 48px; }
  /* inline phone rendered per-step on mobile: full-width gray band, phone centred and
     cropped ~15% at the bottom (top-anchored), mirroring the desktop crop */
  .step::after {
    content: "";
    display: block;
    width: 100vw;
    margin: 40px 0 0 calc(50% - 50vw);   /* full bleed, edge to edge */
    height: var(--mphone-band);
    background-color: var(--panel);
    background-image: var(--phone-src);
    background-repeat: no-repeat;
    background-position: center var(--mphone-top);
    background-size: auto var(--mphone-h);
  }
  /* Connect step layers the two parallax images (stacked, no parallax on mobile) */
  .step[data-index="4"]::after {
    background-image: var(--phone-front-src), var(--phone-src);
    background-position: center var(--mphone-top), center var(--mphone-top);
    background-size: auto var(--mphone-h), auto var(--mphone-h);
  }
  /* step 0: show the LIVE chat phone (with its scripted animation) instead of a static
     screenshot. JS moves .phone--chat into this band; it's sized/cropped like the others */
  .step[data-index="0"]::after { display: none; }
  .step0-chatband {
    position: relative;
    width: 100vw;
    margin: 40px 0 0 calc(50% - 50vw);
    height: var(--mphone-band);
    overflow: hidden;
    background: var(--panel);
  }
  .step0-chatband .phone--chat {
    position: absolute;
    top: var(--mphone-top);
    left: 50%;
    width: calc(var(--mphone-h) * 0.4613);   /* device scaled by JS to this width */
    transform: translateX(-50%);
    opacity: 1 !important;      /* always visible in the stacked flow (no pin cross-fade) */
    translate: none !important; /* ignore the desktop pinned-phone drift */
    filter: none;               /* the band provides the backing */
  }
  .step0-chatband .chatphone { transform-origin: top left; }

  /* Mission stacks: full-width gray band with the cropped phone above the text.
     The decorative panel becomes the band, carrying the phone as a cropped background
     (mirrors the .step::after pattern); the <img> is hidden on mobile. */
  .mission { display: block; min-height: 0; overflow: visible; padding: 40px var(--pad); }
  .mission__panel {
    display: block;
    position: relative;
    left: auto; right: auto; top: auto; bottom: auto;
    width: 100vw;
    margin: 0 0 28px calc(50% - 50vw);
    height: var(--mphone-band);
    background-color: var(--panel);
    background-image: url("assets/mockups/mission.png");
    background-repeat: no-repeat;
    background-position: center var(--mphone-top);
    background-size: auto var(--mphone-h);
  }
  .mission__phone { display: none; }
  .mission__copy { margin-left: 0; margin-right: 0; max-width: none; }

  .footer__inner { flex-direction: column; align-items: flex-start; }
}

/* nav collapses to the hamburger menu before the centred links can overlap the logo/CTA */
@media (max-width: 768px) {
  .nav__links { display: none; }
  .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .nav__overlay { display: flex; }
}

@media (max-width: 620px) {
  :root { --pad: 20px; }
  .feature-cards { grid-template-columns: 1fr; }
  /* cards simply fade up as each scrolls into view (no left→right stagger) */
  .fcard { transform: translateY(24px); }
  .feature-cards .fcard { transition-delay: 0s; }
  .hero__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn { justify-content: center; }
  .beta__form { padding: 6px 6px 6px 18px; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto; }
  .phone, .step, .scrolly__rail-fill { transition: none; }
  .nav, .hero__panel, .hero__title, .hero__lede, .hero__body, .hero__actions, .hero__figure { animation: none; }
  .fcard { opacity: 1 !important; transform: none !important; transition: none; }
  .step .tag, .step__title, .step__copy { opacity: 1 !important; transform: none !important; transition: none; }
  .beta__inner .section-title, .beta__inner .beta__form { opacity: 1 !important; transform: none !important; transition: none; }
  .features__head .tag, .features__head .section-title, .features__head .section-sub { opacity: 1 !important; transform: none !important; transition: none; }
  .chatphone .reveal, .chatphone .msg-user, .chatphone .resp-text .w, .chatphone .cp-scroll { transition: none; }
  .chatphone .typing span { animation: none; }
}