/* ============ Hero ============ */
.hero {
  padding-top: 88px;
  padding-bottom: 40px;
  text-align: center;
  position: relative;
  isolation: isolate;
  min-height: calc(100vh - 76px);
  min-height: calc(100svh - 76px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 40px;
  padding-bottom: 72px;
}
/* ---- Hero: 1:1 with Figma "1.hero" (1440 × 1024 below the header) ---- */
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: max(100vw, var(--vw));
  transform: translateX(-50%);
  background: linear-gradient(180deg, #ffffff 0px, var(--bg) 924px);
  z-index: -2;
}
/* Figma "1.hero" › Rectangle 2: a 1132 × 723 pill, white rim, lime inner glow (design 40% opacity, halved here).
   The ASCII wordmark (painted later) shows through it. */
.hero-glow {
  --gs: 0.5;
  position: absolute;
  inset: 16px 8px;
  z-index: -1;
  border: 1px solid #fff;
  border-radius: 48px;
  background: rgba(254, 255, 235, 0.24);
  box-shadow:
    inset calc(4px * var(--gs)) calc(4px * var(--gs)) calc(113px * var(--gs)) calc(47px * var(--gs))
      #e9fe8a,
    0 calc(4px * var(--gs)) calc(100px * var(--gs)) rgba(173, 192, 92, 0.43);
  opacity: 0.2;
  pointer-events: none;
}
@media (min-width: 761px) {
  /* centred 50px above the middle of the hero, as in the design */
  .hero-glow {
    --gs: var(--ds, 1);
    inset: auto;
    top: calc(50% - 50px * var(--ds, 1));
    left: 50%;
    width: min(1132px * var(--ds, 1), 100vw - 48px);
    height: min(723px * var(--ds, 1), 100% - 32px);
    border-radius: 999px;
    transform: translate(-50%, -50%);
  }
}
.hero .hero-signup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 56px;
}
.hero .waitlist-form {
  margin: 0;
  width: 460px;
  max-width: 100%;
  height: 58px;
  padding: 5px;
  border-radius: 42px;
  border: 1px solid #e4e0d3;
  box-shadow: none;
  /* design "Monsora / AI Aura": lime → sky → violet wash with a white centre */
  background: #fff url("./landing-ai-aura.svg") center / 100% 100% no-repeat;
}
.hero .waitlist-form .wl-field input {
  padding-left: 18px;
}
/* focused: the input's fill (and the tinted focus halo) go transparent — only the outline stays */
.hero .waitlist-form {
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease,
    background-color 0.2s ease;
}
/* header "Join Waitlist": jump to the hero email field and highlight it */
@keyframes wlFlash {
  0% {
    box-shadow: 0 0 0 0 rgba(86, 76, 224, 0.55);
  }
  60% {
    box-shadow: 0 0 0 10px rgba(86, 76, 224, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(86, 76, 224, 0);
  }
}
.hero .waitlist-form.wl-flash {
  animation: wlFlash 1s ease-out 2;
  border-color: var(--accent) !important;
}

.hero .waitlist-form:focus-within {
  background: transparent;
  box-shadow: none;
}
/* rounded wrapper around the hero form */
.hero .sd-border-beam {
  position: relative;
  display: inline-flex;
  border-radius: 42px;
}
.hero .hero-note {
  margin-top: 0;
  font-size: 13px;
  line-height: 1.5;
  color: #9a9689;
  min-height: 1.5em;
}
.hero .waitlist-form + .hero-note,
.hero .sd-border-beam + .hero-note {
  margin-top: 0;
}
.hm-prompt {
  text-align: left;
}
.hero-media {
  display: none;
}
/* The desktop choreography (hero collage, screen 2, fly-in) runs from 761px. Below 1200px its
   fixed Figma sizes are multiplied by --ds (window width / 1200, set by landing-bootstrap.js),
   so a narrower window shows the same composition, scaled down. */
@media (min-width: 761px) {
  .hero {
    height: calc(100vh - 77px);
    height: calc(100svh - 77px);
    min-height: calc(620px * var(--ds, 1));
    display: block;
    padding: 0;
  } /* fills the window; copy centred in it */
  .hero h1 {
    position: absolute;
    top: calc(50% - 168px * var(--ds, 1));
    left: 50%;
    transform: translateX(-50%);
    width: min(1040px, 100% - 48px);
    max-width: none;
    margin: 0;
  }
  .hero .hero-signup {
    position: absolute;
    top: calc(50% + 77px * var(--ds, 1));
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
  }
  .hero-media {
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    width: 1440px;
    height: 960px;
    margin-left: -720px;
    transform: scale(var(--hs, 1));
    transform-origin: top center;
    pointer-events: none;
    z-index: 0;
  }
  .hero h1,
  .hero .hero-signup {
    z-index: 1;
  }
  .hm {
    position: absolute;
    display: block;
  }
  /* screen-2 layout from Figma "2. Why now (web)" (render bounds; the cards sit 30px lower on screen 2) */
  .hm-video {
    left: 895px;
    top: 32px;
    width: 263.28px;
    height: 173.87px;
  }
  .hm-cover {
    left: 80.2px;
    top: 135.2px;
    width: 275.38px;
    height: 307.66px;
  }
  .hm-stone {
    left: 209px;
    top: 206px;
    width: 163px;
    height: 209px;
  }
  .hm-blue {
    left: 493px;
    top: 519px;
    width: 253.33px;
    height: 142.5px;
  }
  .hm-prompt {
    left: 1000px;
    top: 457px;
    width: 327.62px;
    height: 259.03px;
  }
  .hm-prompt img {
    position: absolute;
    inset: 0;
  }
  .hm-prompt-veil {
    position: absolute;
    left: 0;
    top: 0;
    width: 307.2px;
    height: 157.9px;
    border-radius: 31.6px;
    background: rgba(255, 255, 255, 0.7);
  }
  .hm-prompt-title {
    position: absolute;
    left: 20.6px;
    top: 9.7px;
    margin: 0;
    font: 600 37px/50.88px var(--sans);
    color: #000;
    white-space: nowrap;
    letter-spacing: 0;
  }
  .hm-prompt-body {
    position: absolute;
    left: 21.9px;
    top: 63.1px;
    width: 263.5px;
    margin: 0;
    font: 400 14.57px/1.37 var(--sans);
    color: rgba(0, 0, 0, 0.6);
  }
}
.pin-screen {
  padding: 72px 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}
@media (min-width: 761px) {
  .pin-screen {
    height: calc(960px * var(--ds, 1));
    padding: 0 24px calc(360px * var(--ds, 1));
    box-sizing: border-box;
    position: relative;
  }
  .pin-wrap {
    margin-top: calc(-114px * var(--ds, 1));
    position: relative;
  }
} /* copy sits 120px higher; pulled up toward the hero */
/* screen 2 holds in place for a while (--hold of scroll) before the images fly into the folder */
@media (min-width: 761px) {
  html.fly-on .pin-wrap {
    height: calc(960px * var(--ds, 1) + var(--hold, 0px));
  }
  html.fly-on .pin-screen {
    position: sticky;
    top: max(77px, calc(50vh - 324px * var(--ds, 1)));
  } /* held with the content group centred in the window */
}
.pin-copy {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (min-width: 761px) {
  /* Leave room for the image columns; override the base width above. */
  .pin-copy {
    max-width: min(560px, max(360px, 46vw));
  }
}
.pin-copy h2 {
  margin-top: 14px;
  font-size: clamp(26px, 3.4vw, 38px);
}
.pin-copy p {
  margin-top: 16px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--ink-soft);
}
.blank-screen {
  height: 900px;
  padding: 0;
  position: relative;
}
.folder-stage {
  position: relative;
  height: 900px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.capsule-folder {
  transform-origin: center center;
}
.capsule-copy {
  max-width: 480px;
  margin: 0 auto;
  padding: 0 24px 64px;
  text-align: center;
}
.capsule-copy h2 {
  margin-top: 14px;
  font-size: clamp(26px, 3.4vw, 38px);
}
.capsule-copy p {
  margin-top: 16px;
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-soft);
}
.blank-screen {
  height: auto;
}
.folder-stage {
  flex-direction: column;
  height: auto;
  padding-block: 64px;
}
@media (min-width: 761px) {
  html.fly-on .blank-screen {
    height: 2100px;
  }
  html.fly-on .folder-stage {
    position: sticky;
    top: calc(50vh - 450px);
    height: 900px;
    padding: 0;
    flex-direction: row;
  }
  html.fly-on .capsule-copy {
    position: absolute;
    top: 50%;
    left: calc(50% + 90px * var(--ds, 1));
    width: calc(430px * var(--ds, 1));
    max-width: none;
    margin: 0;
    padding: 0;
    text-align: left;
    transform: translate(40px, -50%);
    opacity: 0;
    pointer-events: none;
  }
  html.fly-on .capsule-copy.shown {
    pointer-events: auto;
  }
}
/* Capsule folder — Figma frame "1.1" › Capsule · Xtep 160X (visible bounds 692 × 380) */
.capsule-folder {
  position: relative;
  width: 692.26px;
  height: 545px;
  flex: none;
}
.cf-back {
  position: absolute;
  left: 31.35px;
  top: 106px;
  width: 629.57px;
  height: 407.52px;
  z-index: 1;
  background: #e2e2e2;
  border-radius: 62.7px;
  box-shadow: 0 5.2px 26.1px rgba(0, 0, 0, 0.05);
}
.cf-contents {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.fc {
  position: absolute;
  width: 261.23px;
  height: 334.38px;
  transform-origin: center center;
  will-change: transform, width, height;
}
.fc > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 24px;
  display: block;
}
.fc > img.fc-art {
  object-fit: cover;
  border-radius: 16px;
  opacity: 0;
  pointer-events: none;
}
html.fly-on .fc > img.fc-art {
  opacity: 1;
}
html.fly-on .fc > img:not(.fc-art) {
  opacity: 0;
}
.fc-label {
  position: absolute;
  left: 0;
  top: 0;
  width: 261px;
  height: 130px;
  transform-origin: top left;
  display: none;
} /* text overlays removed */
.cf-select {
  position: absolute;
  left: 595.61px;
  top: 33.96px;
  width: 52.25px;
  height: 52.25px;
}
.cf-select svg {
  display: block;
  width: 100%;
  height: 100%;
}
.cf-front {
  position: absolute;
  left: 0;
  top: 252.29px;
  width: 692.26px;
  height: 292.58px;
  z-index: 10;
}
.cf-glass {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: 62.7px;
  border: 2.61px solid #ffffff;
  background: rgba(255, 255, 255, 0.5);
  box-shadow: 0 10.45px 20.9px rgba(0, 0, 0, 0.1);
  -webkit-backdrop-filter: blur(52.25px);
  backdrop-filter: blur(52.25px);
}
.cf-badge {
  position: absolute;
  left: 39.18px;
  top: 33.96px;
  padding: 2.61px 13.06px;
  border-radius: 15.67px;
  background: #15130f;
  font: 400 31.35px/47.02px var(--sans);
  color: #ffffff;
  white-space: nowrap;
}
.cf-title {
  position: absolute;
  left: 39.18px;
  top: 96.66px;
  margin: 0;
  font: 500 41.8px/57.47px var(--sans);
  color: #1d1c1b;
  white-space: nowrap;
  letter-spacing: 0;
}
.cf-meta {
  position: absolute;
  left: 39.18px;
  top: 164.58px;
  display: flex;
  align-items: center;
  gap: 10.45px;
  font: 400 31.35px/47.02px var(--sans);
  color: #5c5957;
  white-space: nowrap;
}
.cf-icon,
.cf-star svg {
  display: block;
}
.cf-icon svg {
  display: block;
  width: 41.8px;
  height: 41.8px;
}
.cf-star {
  position: absolute;
  left: 574.71px;
  top: 169.8px;
  width: 83.59px;
  height: 83.59px;
  border-radius: 50%;
  background: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cf-star svg {
  width: 40px;
  height: 40px;
  overflow: visible;
}
/* the Capsule gets favourited as its description slides in (landing-capsule.js sets .starred).
   Star and motion follow the useAnimations "star" (MIT, react-useanimations 2.10.0): the outline dips
   to 90% while the fill grows from 50% and fades in over 10 frames at 30fps; it ends solid ink. */
.cf-star-line,
.cf-star-fill {
  transform-box: view-box;
  transform-origin: 12px 11.51px;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cf-star-line {
  fill: none;
  stroke: #5c5957;
  transition: stroke 0.27s ease 0.07s;
}
.cf-star-fill {
  fill: #15130f;
  stroke: #15130f;
  opacity: 0;
  scale: 0.5;
  transition:
    opacity 0.17s ease 0.07s,
    scale 0.27s cubic-bezier(0.333, 0, 0.667, 1) 0.07s;
}
.capsule-folder.starred .cf-star-line,
html:not(.fly-on) .cf-star-line {
  stroke: #15130f;
}
.capsule-folder.starred .cf-star-fill,
html:not(.fly-on) .cf-star-fill {
  opacity: 1;
  scale: 1;
}
.capsule-folder.starred .cf-star-line {
  animation: starDip 0.33s cubic-bezier(0.333, 0, 0.667, 1);
}
@keyframes starDip {
  50% {
    scale: 0.9;
  }
}
@media (prefers-reduced-motion: reduce) {
  .cf-star-line,
  .cf-star-fill {
    transition: none;
    animation: none !important;
  }
}
/* without the fly-in (reduced motion, or no script) the folder is a static illustration below
     1200px, scaled and with its layout box collapsed to the scaled size so nothing overlaps */
@media (max-width: 1199px) {
  html:not(.fly-on) .capsule-folder {
    --fs: 0.8;
    transform: scale(var(--fs));
    margin: calc((var(--fs) - 1) * 272.5px) calc((var(--fs) - 1) * 346.13px);
  }
  /* the folder's glass front ends flush with its box: keep the copy clear of it */
  html:not(.fly-on) .capsule-copy {
    margin-top: 48px;
  }
}
@media (max-width: 760px) {
  .capsule-folder {
    --fs: 0.5;
  }
}
/* while the fly-in is active, the hero's own images are replaced by the flying cards */
html.fly-on .hero-media .hm {
  visibility: hidden;
}
@media (max-width: 400px) {
  .capsule-folder {
    --fs: 0.46;
  }
}
@media (max-width: 340px) {
  .capsule-folder {
    --fs: 0.42;
  }
}
.ascii-bg {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--vw);
  height: 100%;
  transform: translateX(-50%);
  z-index: -1;
  pointer-events: none;
  display: block;
}
.hero h1 {
  font-size: clamp(34px, 5.6vw, 70px);
  line-height: 1;
  font-weight: 800;
  max-width: 1040px;
  margin: 0 auto;
}
/* design: Display/H1 — Manrope ExtraBold 60px, −1.2px tracking (scaled with the composition below 1200px) */
@media (min-width: 761px) {
  .hero h1 {
    font-size: calc(60px * var(--ds, 1));
    letter-spacing: -0.02em;
  }
}
.hero-note {
  margin-top: 16px;
  font-size: 13px;
  color: var(--ink-faint);
}