/* ============================================================
   Early-access page — one screen, two halves.
   Left: the story, on deep navy. Right: the ask, on cloud.
   Type: Cabinet Grotesk (display) + Switzer (text) + JetBrains Mono.
   ============================================================ */

:root {
  color-scheme: light;

  --navy-950: #001828;
  --navy-900: #002338;
  --navy-800: #00324d;
  --navy-700: #014a6e;
  --navy-400: #3f7390;
  --navy-300: #7aa3bd;
  --navy-200: #a9c4d5;
  --navy-100: #dbe6f0;
  --navy-50: #eef3f8;

  --cyan-50: #ecfbff;
  --cyan-100: #d2f4fb;
  --cyan-200: #a6e8f5;
  --cyan-300: #5ad0e8;
  --cyan-400: #2bb8d6;
  --cyan-500: #009fc3;
  --cyan-600: #0086a8;
  --cyan-700: #016c89;

  --cloud: #f6f8fc;
  --mist: #eef3f8;
  --line: #e2e9f1;
  --ink: #0a0f17;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --rose-600: #e11d48;
  --emerald-600: #059669;

  --font-display: 'Cabinet Grotesk', 'Switzer', system-ui, sans-serif;
  --font-sans: 'Switzer', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --shadow-float: 0 4px 10px rgba(8, 38, 61, 0.06), 0 40px 80px -32px rgba(8, 38, 61, 0.26);
  --shadow-card: 0 1px 2px rgba(8, 38, 61, 0.04), 0 12px 28px -14px rgba(8, 38, 61, 0.16);
  --shadow-navy: 0 10px 26px -10px rgba(0, 50, 77, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.12);

  --stage-w: 720px;
  --stage-h: 420px;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-feature-settings: 'ss01', 'cv01', 'cv03';
  color: var(--navy-900);
  background: var(--cloud);
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}

::selection {
  background: rgba(0, 159, 195, 0.22);
}

img {
  max-width: 100%;
  display: block;
}

/* ───────────────────────── Layout ───────────────────────── */

.page {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(400px, 0.95fr);
  min-height: 100vh;
  min-height: 100dvh;
}

/* ───────────────────────── Left: the story ───────────────────────── */

.story {
  position: relative;
  color: #fff;
  background: linear-gradient(160deg, var(--navy-900) 0%, var(--navy-950) 70%);
  isolation: isolate;
  overflow: hidden;
}
.story::before {
  /* dotted grid */
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.075) 1px, transparent 1.6px);
  background-size: 22px 22px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.35) 60%, transparent);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.35) 60%, transparent);
  z-index: -1;
}
.story::after {
  /* the cyan glow */
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(52% 40% at 18% -4%, rgba(0, 159, 195, 0.34) 0%, rgba(0, 159, 195, 0) 70%),
    radial-gradient(40% 36% at 88% 104%, rgba(0, 159, 195, 0.14) 0%, rgba(0, 159, 195, 0) 70%);
  z-index: -1;
}

.story__inner {
  padding: 28px 56px 36px;
}

.story__top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.mark {
  display: inline-grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  color: var(--cyan-400);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.story__head {
  margin-top: 24px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan-300);
}
.eyebrow::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  box-shadow: 0 0 0 4px rgba(0, 159, 195, 0.16);
}
.eyebrow--ink {
  color: var(--cyan-600);
}

.headline {
  margin: 14px 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 2.9vw, 41px);
  line-height: 1.06;
  letter-spacing: -0.024em;
  color: #fff;
  max-width: 15.5em;
}
.headline .w {
  display: inline-block;
  will-change: transform, opacity;
}
.headline .w--accent {
  color: var(--cyan-300);
}

.lede {
  margin: 12px 0 0;
  max-width: 600px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--navy-200);
}

/* ───────────────────────── The stage ───────────────────────── */

.stage {
  position: relative;
  margin-top: 22px;
  height: var(--stage-h);
}

/* Drawn at a fixed design size, then scaled to the column width from JS — so the
   composition inside never reflows, on any screen. */
.frame {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--stage-w);
  height: var(--stage-h);
  transform-origin: top left;
  border-radius: 18px;
  background: #fff;
  color: var(--navy-900);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 1px 0 rgba(255, 255, 255, 0.2) inset,
    0 30px 80px -30px rgba(0, 0, 0, 0.65),
    0 60px 120px -40px rgba(0, 159, 195, 0.25);
  overflow: hidden;
  font-family: var(--font-sans);
}

.frame__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 14px;
  background: var(--mist);
  border-bottom: 1px solid var(--line);
}
.frame__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #cbd9e6;
}
.frame__url {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: 12px;
  height: 20px;
  padding: 0 10px;
  min-width: 190px;
  border-radius: 999px;
  background: #fff;
  border: 1px solid var(--line);
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--navy-400);
}

.frame__body {
  position: relative;
  height: calc(var(--stage-h) - 34px);
  background: var(--cloud);
  background-image: radial-gradient(circle at 1px 1px, rgba(0, 50, 77, 0.05) 1px, transparent 0);
  background-size: 22px 22px;
}

/* Which scene is on is a class, toggled from the playhead; the crossfade is CSS. */
.scene {
  position: absolute;
  inset: 0;
  padding: 22px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(16px) scale(0.985);
  transition:
    opacity 0.4s ease-in,
    transform 0s linear 0.4s,
    visibility 0s linear 0.4s;
  will-change: transform, opacity;
}
.scene.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 0.55s var(--ease-out),
    transform 0.55s var(--ease-out),
    visibility 0s;
}

/* skeleton bars shared by the scenes */
.bar {
  display: block;
  height: 10px;
  border-radius: 4px;
  background: var(--navy-100);
  margin-bottom: 6px;
}
.bar--thin {
  height: 6px;
  background: var(--line);
}

/* ── Scene 1: reading the site ── */

.scene--read {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 236px;
  gap: 18px;
}

.site {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.site__nav {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 6px 12px;
  margin: -4px -6px 14px;
  border-bottom: 1px solid var(--line);
  border-radius: 8px 8px 0 0;
}
.site__logo {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--navy-800);
}
.site__brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
}
.site__links {
  margin-left: auto;
  display: flex;
  gap: 8px;
}
.site__links i {
  width: 26px;
  height: 6px;
  border-radius: 3px;
  background: var(--navy-100);
}
.site__hero {
  padding: 6px 8px 14px;
  margin: 0 -8px;
  border-radius: 10px;
}
.site__h1 .bar:first-child {
  background: var(--navy-200);
}
.site__p {
  margin-top: 12px;
}
.site__cta {
  display: inline-block;
  margin-top: 10px;
  width: 84px;
  height: 22px;
  border-radius: 999px;
  background: var(--navy-800);
}
.site__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 12px;
}
.site__card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: #fff;
}
.site__ico {
  display: block;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: var(--cyan-50);
  border: 1px solid var(--cyan-100);
}
.site__t {
  display: block;
  margin: 8px 0 6px;
  font-size: 11px;
  font-weight: 600;
}
.site__card .bar {
  margin-bottom: 0;
}

/* a region lights up as the scan passes it: --lit is tweened 0→1→0 */
.lit-target {
  --lit: 0;
  box-shadow:
    0 0 0 2px rgba(0, 159, 195, calc(var(--lit) * 0.55)),
    0 10px 26px -10px rgba(0, 159, 195, calc(var(--lit) * 0.6));
  background-color: rgba(236, 251, 255, var(--lit));
}

/* The scan, the notes and the tags rest hidden: the scene's timeline brings each
   in at its moment, and the frame fades in before the loop starts. */
.scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  opacity: 0;
  visibility: hidden;
  background: linear-gradient(90deg, transparent 0%, var(--cyan-500) 18%, var(--cyan-300) 50%, var(--cyan-500) 82%, transparent 100%);
  box-shadow: 0 0 18px 4px rgba(0, 159, 195, 0.35);
  will-change: transform;
}
.scan::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -70px;
  height: 70px;
  background: linear-gradient(180deg, rgba(0, 159, 195, 0) 0%, rgba(0, 159, 195, 0.12) 100%);
}
.scan__label {
  position: absolute;
  right: 10px;
  top: -10px;
  padding: 3px 7px 2px;
  border-radius: 999px;
  border: 1px solid var(--cyan-200);
  background: #fff;
  color: var(--cyan-600);
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1;
}
.scan__label::after {
  content: '';
  display: inline-block;
  margin-left: 4px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cyan-500);
  animation: blink 1s steps(2) infinite;
}

.notes {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 14px 14px 12px;
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
}
.notes__title {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan-600);
}
.notes__list {
  list-style: none;
  margin: 6px 0 0;
  padding: 0;
}
.note {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
  opacity: 0;
  visibility: hidden;
}
.note__k {
  font-size: 11px;
  color: var(--slate-500);
}
.note__v {
  font-size: 12.5px;
  font-weight: 600;
}
.note--offers {
  border-bottom: 0;
}
.note--offers .note__v {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}
.tag {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 6px;
  border: 1px solid var(--cyan-200);
  background: var(--cyan-50);
  color: var(--cyan-700);
  font-style: normal;
  font-size: 11px;
  font-weight: 600;
  opacity: 0;
  visibility: hidden;
}
.notes__foot {
  margin-top: auto;
  padding-top: 10px;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11.5px;
  color: var(--slate-500);
  opacity: 0;
  visibility: hidden;
}
.tick {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ecfdf5;
  color: var(--emerald-600);
}
.tick svg {
  width: 10px;
  height: 10px;
}
.tick path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

/* ── Scene 2: asking the assistants ── */

.chat {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  box-shadow: var(--shadow-card);
}
.chat__engines {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: #fafcfe;
}
.eng {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--slate-500);
  font-size: 11px;
  font-weight: 600;
}
.eng img {
  width: 14px;
  height: 14px;
}
.eng i {
  font-style: normal;
}
.eng__done {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #10b981;
  opacity: 0;
  transform: scale(0);
}
.chat__thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px 6px;
  overflow: hidden;
}
.msg {
  font-size: 12px;
  line-height: 1.45;
}
.msg--user {
  align-self: flex-end;
  max-width: 78%;
  padding: 8px 12px;
  border-radius: 14px 14px 4px 14px;
  background: var(--navy-800);
  color: #fff;
  font-weight: 500;
  box-shadow: var(--shadow-navy);
}
.caret {
  display: inline-block;
  width: 1.5px;
  height: 12px;
  margin-left: 2px;
  vertical-align: -2px;
  background: var(--cyan-300);
  animation: blink 1s steps(2) infinite;
}
.msg--ai {
  position: relative;
  align-self: flex-start;
  max-width: 94%;
  min-height: 38px;
  padding: 10px 12px;
  border-radius: 14px 14px 14px 4px;
  border: 1px solid var(--line);
  background: var(--cloud);
}
.typing {
  position: absolute;
  left: 12px;
  top: 12px;
  display: flex;
  gap: 4px;
  align-items: center;
  height: 14px;
}
.typing i {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--slate-400);
  animation: bounce 1s ease-in-out infinite;
}
.typing i:nth-child(2) {
  animation-delay: 0.15s;
}
.typing i:nth-child(3) {
  animation-delay: 0.3s;
}
.answer__intro {
  margin: 0 0 6px;
  color: var(--slate-600);
}
.answer__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ans {
  --hit: 0;
  position: relative;
  line-height: 1.45;
}
.ans__n {
  display: inline-block;
  min-width: 16px;
  color: var(--slate-500);
}
.ans::before {
  content: '';
  position: absolute;
  left: -6px;
  right: -8px;
  top: -2px;
  bottom: -2px;
  border-radius: 6px;
  background: linear-gradient(90deg, rgba(0, 159, 195, calc(var(--hit) * 0.16)), rgba(0, 159, 195, 0));
  pointer-events: none;
}
.ans__name {
  font-weight: 700;
}
.ans--you .ans__name {
  color: var(--cyan-700);
}
.ans__tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--cyan-500);
  color: #fff;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 1px;
  transform: scale(0);
  opacity: 0;
}
.chat__tally {
  display: flex;
  gap: 22px;
  padding: 10px 16px;
  border-top: 1px solid var(--line);
  background: #fafcfe;
}
.tally {
  display: flex;
  align-items: baseline;
  gap: 7px;
  font-size: 11.5px;
  color: var(--slate-500);
}
.tally b {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  line-height: 1;
  color: var(--navy-900);
  font-variant-numeric: tabular-nums;
}
.tally--you b {
  color: var(--cyan-600);
}

/* ── Scene 3: the ranking ── */

.dash {
  height: 100%;
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  padding: 16px 18px;
  box-shadow: var(--shadow-card);
}
.dash__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.dash__eyebrow {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan-600);
}
.dash__title {
  margin-top: 3px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.01em;
}
.dash__period {
  flex: none;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--cloud);
  font-size: 11px;
  font-weight: 600;
  color: var(--slate-500);
}
.dash__body {
  flex: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 210px;
  gap: 22px;
  padding-top: 14px;
}
.ranks {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 11px;
}
.rank {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) 40px;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.rank__name {
  font-weight: 600;
  white-space: nowrap;
}
.rank__name em {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 5px;
  border-radius: 999px;
  background: var(--cyan-50);
  color: var(--cyan-700);
  font-style: normal;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.rank__track {
  display: block;
  height: 10px;
  border-radius: 999px;
  background: var(--navy-50);
  overflow: hidden;
}
.rank__fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: var(--navy-200);
  transform-origin: left center;
  transform: scaleX(0);
}
.rank--you .rank__fill {
  background: linear-gradient(90deg, var(--cyan-500), var(--cyan-400));
  box-shadow: 0 0 14px rgba(0, 159, 195, 0.45);
}
.rank__pct {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ranks__foot {
  margin-top: 2px;
  font-size: 10.5px;
  color: var(--slate-400);
}
.side {
  display: flex;
  flex-direction: column;
  padding-left: 20px;
  border-left: 1px solid var(--line);
}
.side__title {
  margin-bottom: 6px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--slate-400);
}
.side__row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  font-size: 11.5px;
  font-weight: 500;
  color: var(--navy-800);
}
.side__row img {
  width: 14px;
  height: 14px;
}
.side__pct {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--navy-900);
  font-variant-numeric: tabular-nums;
}
.trend {
  position: relative;
  margin-top: auto;
  padding-top: 10px;
}
.trend svg {
  display: block;
  width: 100%;
  height: 46px;
  overflow: visible;
}
.trend__line {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.trend__area {
  opacity: 0;
}
.trend__delta {
  position: absolute;
  right: 0;
  top: -4px;
  padding: 2px 7px;
  border-radius: 999px;
  border: 1px solid #a7f3d0;
  background: #ecfdf5;
  color: #047857;
  font-size: 10.5px;
  font-weight: 700;
  opacity: 0;
  transform: scale(0.8);
}

/* ───────────────────────── The steps ───────────────────────── */

.steps {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
/* The active step is lit and a touch larger; its top border is the loading bar
   that runs for as long as its scene plays. */
.step {
  opacity: 0.5;
  transform: scale(1);
  transform-origin: left top;
  transition:
    opacity 0.45s var(--ease-out),
    transform 0.6s var(--ease-out);
}
.step.is-active {
  opacity: 1;
  transform: scale(1.04);
}
.step__btn {
  all: unset;
  display: block;
  width: 100%;
  position: relative;
  padding-top: 18px;
  cursor: pointer;
  text-align: left;
  border-radius: 8px;
  -webkit-tap-highlight-color: transparent;
}
.step__btn:focus-visible {
  outline: 2px solid var(--cyan-300);
  outline-offset: 6px;
}
.step__track {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  overflow: hidden;
  transition: background-color 0.45s var(--ease-out);
}
.step.is-active .step__track {
  background: rgba(255, 255, 255, 0.2);
}
.step__fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--cyan-500), var(--cyan-300));
  box-shadow: 0 0 12px rgba(43, 184, 214, 0.9);
  transform-origin: left center;
  transform: scaleX(0);
}
.step__num {
  display: block;
  margin-bottom: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--cyan-300);
}
.step__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16.5px;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #fff;
}
.step__body {
  display: block;
  margin-top: 6px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--navy-200);
}

/* ───────────────────────── Right: the ask ───────────────────────── */

.ask {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 40px;
  background-color: var(--cloud);
  background-image: radial-gradient(circle at 1px 1px, rgba(0, 50, 77, 0.06) 1px, transparent 0);
  background-size: 22px 22px;
  isolation: isolate;
}
/* a soft cyan pool behind the card, so the eye lands on the form first */
.ask::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(46% 42% at 50% 48%, rgba(0, 159, 195, 0.16) 0%, rgba(0, 159, 195, 0) 100%);
  z-index: -1;
}
.ask__inner {
  position: relative;
  width: 100%;
  max-width: 472px;
}

.card {
  position: relative;
  border-radius: 24px;
  border: 1px solid rgba(0, 159, 195, 0.28);
  background: #fff;
  padding: 34px 36px 28px;
  box-shadow:
    0 0 0 6px rgba(0, 159, 195, 0.07),
    0 4px 10px rgba(8, 38, 61, 0.06),
    0 40px 80px -32px rgba(0, 86, 120, 0.4);
}

.slots {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 0 12px;
}
.slots__row {
  display: inline-flex;
  gap: 5px;
}
.slots__row i {
  width: 22px;
  height: 8px;
  border-radius: 999px;
  border: 1.5px solid var(--cyan-400);
  background: rgba(0, 159, 195, 0.1);
}
/* yes / no questions */
.ask-q {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.ask-q .label {
  padding: 0;
  margin-bottom: 7px;
  font-weight: 600;
  line-height: 1.35;
}
.seg {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--cloud);
}
.seg input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.seg label {
  display: block;
  padding: 8px 10px;
  border-radius: 9px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: var(--slate-500);
  cursor: pointer;
  transition:
    background-color 0.25s var(--ease-out),
    color 0.25s var(--ease-out),
    box-shadow 0.25s var(--ease-out),
    transform 0.18s var(--ease-out);
}
.seg label:hover {
  color: var(--navy-800);
}
.seg label:active {
  transform: scale(0.97);
}
.seg input:checked + label {
  background: #fff;
  color: var(--navy-900);
  box-shadow: var(--shadow-card);
}
.seg input:focus-visible + label {
  outline: 2px solid var(--cyan-400);
  outline-offset: 1px;
}
.ask-q.is-invalid .seg {
  border-color: #fda4af;
  box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.08);
}
.card__head {
  margin-bottom: 24px;
}
.card__title {
  margin: 12px 0 8px;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 27px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--navy-900);
}
.card__sub {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--slate-600);
}

.fields {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.fields__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.field {
  position: relative;
}
.label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy-900);
}
.label__opt {
  margin-left: 4px;
  font-weight: 500;
  color: var(--slate-400);
}
.input {
  display: block;
  width: 100%;
  padding: 11px 14px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  font: inherit;
  font-size: 15px;
  color: var(--navy-900);
  transition:
    border-color 0.25s var(--ease-out),
    box-shadow 0.25s var(--ease-out);
}
.input::placeholder {
  color: var(--slate-400);
}
.input:focus {
  outline: none;
  border-color: var(--cyan-400);
  box-shadow: 0 0 0 4px rgba(0, 159, 195, 0.12);
}
.field.is-invalid .input {
  border-color: #fda4af;
  box-shadow: 0 0 0 4px rgba(225, 29, 72, 0.08);
}
.field__err {
  display: block;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--rose-600);
}
.field__err:empty {
  display: none;
}
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
  opacity: 0;
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  margin-top: 22px;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  background: var(--cyan-500);
  color: #fff;
  font: inherit;
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0.005em;
  cursor: pointer;
  box-shadow: 0 12px 30px -10px rgba(0, 159, 195, 0.75), inset 0 1px 0 0 rgba(255, 255, 255, 0.28);
  transition:
    background-color 0.3s var(--ease-out),
    box-shadow 0.3s var(--ease-out),
    transform 0.18s var(--ease-out);
}
.btn:hover {
  background: var(--cyan-600);
  transform: translateY(-1px);
  box-shadow: 0 16px 34px -10px rgba(0, 159, 195, 0.85), inset 0 1px 0 0 rgba(255, 255, 255, 0.28);
}
.btn:active {
  transform: translateY(1px) scale(0.985);
}
.btn:focus-visible {
  outline: 2px solid var(--cyan-400);
  outline-offset: 3px;
}
.btn__icon {
  display: inline-grid;
  place-items: center;
  transition: transform 0.3s var(--ease-out);
}
.btn:hover .btn__icon {
  transform: translateX(3px);
}
.btn__spinner {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  opacity: 0;
  animation: spin 0.8s linear infinite;
}
.btn.is-loading {
  pointer-events: none;
}
.btn.is-loading .btn__label,
.btn.is-loading .btn__icon {
  opacity: 0;
}
.btn.is-loading .btn__spinner {
  opacity: 1;
}

.fine {
  margin: 14px 0 0;
  text-align: center;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--slate-500);
}
.form__error {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #fecdd3;
  background: #fff1f2;
  color: #be123c;
  font-size: 13px;
  line-height: 1.4;
}

.card--done {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 36px 44px;
}
.card--done[hidden] {
  display: none;
}

/* ───────────────────────── Phones: the following call to action ───────────────────────── */

.cta-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(246, 248, 252, 0.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
  transform: translateY(0);
  transition:
    transform 0.4s var(--ease-out),
    opacity 0.3s var(--ease-out);
}
.cta-bar[hidden] {
  display: block;
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}
.btn--bar {
  margin-top: 0;
  height: 48px;
}
@media (min-width: 1024px) {
  .cta-bar {
    display: none;
  }
}
.done__ring {
  display: inline-grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-bottom: 18px;
  color: var(--cyan-500);
}
.done__circle,
.done__check {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.card--done .card__title {
  margin-top: 0;
}

/* ───────────────────────── Keyframes ───────────────────────── */

@keyframes blink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
}
@keyframes bounce {
  0%,
  100% {
    transform: translateY(0);
    opacity: 0.55;
  }
  50% {
    transform: translateY(-3px);
    opacity: 1;
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ───────────────────────── Responsive ───────────────────────── */

/* Side by side with the form, the story is capped at the frame's width (so the
   whole of it sits above the fold) and centered in its column, the way the form
   is centered in its own. Auto margins fall to zero should the story ever be
   taller than the column, so it would clip at the bottom rather than the top. */
@media (min-width: 1024px) {
  .story {
    display: flex;
  }
  .story__inner {
    box-sizing: content-box; /* the cap is the content width; the padding sits outside it */
    width: 100%;
    max-width: 612px;
    margin: auto;
  }
}

/* Shorter windows (laptops, 125% scaling): the story tightens up, then gives up
   the step descriptions, then the lede — the stage itself is shrunk from JS to
   whatever height is left. A 1080px-tall window is untouched. */
@media (min-width: 1024px) and (max-height: 960px) {
  .story__inner {
    padding: 22px 56px 28px;
  }
  .mark {
    width: 38px;
    height: 38px;
    border-radius: 12px;
  }
  .story__head {
    margin-top: 18px;
  }
  .headline {
    font-size: clamp(30px, 2.6vw, 36px);
    margin-top: 10px;
  }
  .lede {
    margin-top: 10px;
    font-size: 15px;
  }
  .stage {
    margin-top: 16px;
  }
  .steps {
    margin-top: 14px;
  }
  .step__body {
    font-size: 13px;
  }
}
@media (min-width: 1024px) and (max-height: 820px) {
  .step__body {
    display: none;
  }
}
@media (min-width: 1024px) and (max-height: 720px) {
  .lede {
    display: none;
  }
}

@media (max-width: 1180px) {
  .story__inner {
    padding: 36px 40px 48px;
  }
  .ask {
    padding: 40px 28px;
  }
  .page {
    grid-template-columns: minmax(0, 1.3fr) minmax(360px, 0.9fr);
  }
}

@media (max-width: 1023px) {
  .page {
    grid-template-columns: minmax(0, 1fr);
  }
  .story__inner {
    max-width: 760px;
    margin: 0 auto;
    padding: 28px 20px 36px;
  }
  .story__head {
    margin-top: 28px;
  }
  /* no animation, no pictures, no steps and no lede on small screens: the lion
     and the headline, then the form */
  .stage,
  .steps,
  .lede {
    display: none;
  }
  .ask {
    padding: 36px 20px 96px;
  }
  .card {
    padding: 30px 26px 26px;
  }
}

@media (max-width: 639px) {
  /* iOS zooms into fields smaller than 16px and never zooms back out */
  .input {
    font-size: 16px;
  }
  .card__title {
    font-size: 25px;
  }
  /* A narrower composition for the stage, so the scaled-down text stays legible:
     the side panels go, the engine chips keep only their logos. */
  .frame {
    width: 420px;
  }
  .scene {
    padding: 16px;
  }
  .scene--read {
    grid-template-columns: minmax(0, 1fr);
  }
  .notes {
    display: none;
  }
  .dash__body {
    grid-template-columns: minmax(0, 1fr);
  }
  .side {
    display: none;
  }
  .eng {
    padding: 4px 6px;
  }
  .eng i {
    display: none;
  }
  .msg--user {
    max-width: 92%;
  }
  .msg--ai {
    max-width: 100%;
  }
}

@media (max-width: 400px) {
  .fields__row {
    grid-template-columns: 1fr;
  }
  .card {
    padding: 26px 20px 22px;
  }
}

/* The stage keeps playing under reduced motion (it is the page's content); only
   the decorative hover motion goes. */
@media (prefers-reduced-motion: reduce) {
  .btn,
  .btn__icon,
  .input {
    transition: none;
  }
}