:root {
  --midnight: #14162b;
  --midnight-2: #1d2040;
  --paper: #f3f0fa;
  --ink: #1b1d36;
  --iris: #8e7cff;
  --sky: #6ea8fe;
  --mint: #4fd6b0;
  --amber: #ffc56b;
  --rule: rgba(27, 29, 54, 0.14);
  --soft: rgba(27, 29, 54, 0.66);
  --display: "Bricolage Grotesque", "Arial Narrow", system-ui, sans-serif;
  --text: "Atkinson Hyperlegible Next", "Atkinson Hyperlegible", system-ui, sans-serif;
  --measure: 62ch;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1.0625rem/1.6 var(--text);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(1120px, 100% - 3rem); margin-inline: auto; }

h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.02; margin: 0; }
h1 { font-size: clamp(2.5rem, 5.1vw, 4rem); font-variation-settings: "wdth" 88; }
h1 span { display: block; }
h2 { font-size: clamp(2rem, 4vw, 3.05rem); font-variation-settings: "wdth" 90; }
h3 { font-size: 1.3rem; line-height: 1.2; letter-spacing: -0.01em; }
p { margin: 0; max-width: var(--measure); text-wrap: pretty; }
h1, h2, h3, .intro, blockquote p { text-wrap: balance; }

/* ---------- buttons ---------- */

.button {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.8rem 1.25rem;
  border-radius: 999px;
  border: 2px solid transparent;
  font: 700 1rem/1 var(--text);
  text-decoration: none;
  transition: transform 0.12s ease, background 0.12s ease;
}
.button:active { transform: translateY(1px); }
.button.solid { background: var(--paper); color: var(--midnight); }
.button.solid:hover { background: #fff; }
.button.outline { border-color: rgba(243, 240, 250, 0.45); color: var(--paper); }
.button.outline:hover { background: rgba(243, 240, 250, 0.1); }
.button.dark { background: var(--midnight); color: var(--paper); }
.button.dark:hover { background: var(--midnight-2); }
.button.small { padding: 0.55rem 1rem; font-size: 0.95rem; }
.button svg { width: 1.1em; height: 1.1em; fill: currentColor; }

/* ---------- the stage: header and hero ---------- */

.stage {
  position: relative;
  background:
    radial-gradient(60rem 30rem at 85% 0%, rgba(142, 124, 255, 0.28), transparent 60%),
    radial-gradient(40rem 26rem at 0% 100%, rgba(110, 168, 254, 0.18), transparent 60%),
    var(--midnight);
  color: var(--paper);
  padding: 0.6rem 0 clamp(3rem, 8vw, 6rem);
  overflow: clip;
}
/* Two soft lights that drift slowly behind the hero. */
.stage::before, .stage::after { content: ""; position: absolute; z-index: 0; width: 42rem; aspect-ratio: 1; border-radius: 50%; filter: blur(90px); opacity: 0.5; pointer-events: none; }
.stage::before { top: -18rem; right: -8rem; background: var(--iris); animation: float-a 18s ease-in-out infinite alternate; }
.stage::after { bottom: -26rem; left: -14rem; background: var(--sky); opacity: 0.3; animation: float-b 22s ease-in-out infinite alternate; }
@keyframes float-a { to { transform: translate(-9rem, 5rem) scale(1.15); } }
@keyframes float-b { to { transform: translate(8rem, -4rem) scale(0.9); } }
.stage > * { position: relative; z-index: 1; }

.site-head { display: flex; align-items: center; gap: 1.5rem; padding: 1.25rem 0; }
.stage > .site-head { position: sticky; top: 0.6rem; z-index: 20; padding: 0.75rem 1rem; border-radius: 999px; border: 1px solid transparent; transition: background 0.3s, border-color 0.3s, box-shadow 0.3s; }
.stage > .site-head.scrolled { background: rgba(20, 22, 43, 0.78); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4); border-color: rgba(243, 240, 250, 0.14); box-shadow: 0 12px 30px -16px rgba(0, 0, 0, 0.7); }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; font: 700 1.2rem/1 var(--display); text-decoration: none; }
.brand img { width: 34px; height: 34px; }
.site-head nav { display: flex; align-items: center; gap: 1.5rem; margin-left: auto; }
.site-head nav a { text-decoration: none; opacity: 0.82; }
.site-head nav a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 0.3em; }

.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; padding-top: clamp(2rem, 6vw, 4.5rem); }
.hero-copy p { font-size: 1.2rem; line-height: 1.5; margin-top: 1.4rem; max-width: 34ch; color: rgba(243, 240, 250, 0.86); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }
.hero-note { margin-top: 1rem; font-size: 0.95rem; color: rgba(243, 240, 250, 0.7); }
.proof { list-style: none; display: grid; gap: 0.5rem; margin: 2.25rem 0 0; padding: 1.4rem 0 0; border-top: 1px solid rgba(243, 240, 250, 0.16); color: rgba(243, 240, 250, 0.72); }
.proof strong { color: var(--paper); }
.hero-copy > * { animation: rise 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.hero-copy > :nth-child(2) { animation-delay: 0.08s; }
.hero-copy > :nth-child(3) { animation-delay: 0.16s; }
.hero-copy > :nth-child(4) { animation-delay: 0.24s; }
.hero-copy > :nth-child(5) { animation-delay: 0.32s; }
.scene { animation: rise 1.1s 0.2s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes rise { from { opacity: 0; transform: translateY(22px); } }

/* The scene: a video call with the overlay floating over it. */
.scene { position: relative; padding: 0 0 5.5rem 0; }
.call { background: #e9e6f4; border-radius: 16px; padding: 0.8rem; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.55); }
.call-bar { display: flex; gap: 0.4rem; padding: 0.15rem 0.2rem 0.7rem; }
.call-bar i { width: 0.7rem; height: 0.7rem; border-radius: 50%; background: #c9c4dc; }
.tiles { display: grid; grid-template-columns: 1.6fr 1fr; gap: 0.6rem; }
.tile { position: relative; aspect-ratio: 4 / 3; border-radius: 10px; background: linear-gradient(160deg, #cfd6f6, #b9b2e6); overflow: hidden; }
.tile.you { background: linear-gradient(160deg, #c8eee2, #a9d9d6); }
.tile::before { content: ""; position: absolute; left: 50%; bottom: -18%; width: 54%; aspect-ratio: 1; border-radius: 50% 50% 12% 12%; background: rgba(27, 29, 54, 0.2); transform: translateX(-50%); }
.tile::after { content: ""; position: absolute; left: 50%; top: 24%; width: 24%; aspect-ratio: 1; border-radius: 50%; background: rgba(27, 29, 54, 0.26); transform: translateX(-50%); }
.tile span { position: absolute; left: 0.5rem; bottom: 0.45rem; z-index: 1; padding: 0.1rem 0.5rem; border-radius: 6px; background: rgba(27, 29, 54, 0.7); color: #fff; font-size: 0.78rem; }
.tile { transition: outline-color 0.3s; outline: 3px solid transparent; }
.tile.talking { outline-color: var(--iris); }
/* A small level meter that moves while the interviewer is speaking. */
.bars { position: absolute; right: 0.55rem; bottom: 0.5rem; z-index: 1; display: flex; align-items: flex-end; gap: 3px; height: 1rem; opacity: 0; transition: opacity 0.3s; }
.tile.talking .bars { opacity: 1; }
.bars i { width: 3px; height: 100%; border-radius: 2px; background: var(--midnight); transform-origin: bottom; animation: level 0.9s ease-in-out infinite; }
.bars i:nth-child(2) { animation-delay: -0.3s; }
.bars i:nth-child(3) { animation-delay: -0.6s; }
.bars i:nth-child(4) { animation-delay: -0.15s; }
.bars i:nth-child(5) { animation-delay: -0.45s; }
@keyframes level { 0%, 100% { transform: scaleY(0.25); } 50% { transform: scaleY(1); } }

.overlay {
  position: absolute;
  right: -0.75rem;
  bottom: 0;
  z-index: 2;
  width: min(27rem, 92%);
  border-radius: 14px;
  background: #14162b;
  border: 1px solid rgba(243, 240, 250, 0.16);
  box-shadow: 0 24px 50px -12px rgba(0, 0, 0, 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  color: #eceef2;
  font-size: 0.92rem;
  line-height: 1.45;
  transform: translate(var(--drift-x, 0), var(--drift-y, 0));
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.overlay-bar { display: flex; align-items: center; gap: 0.5rem; padding: 0.55rem 0.75rem; border-bottom: 1px solid rgba(243, 240, 250, 0.12); font-weight: 700; }
.overlay-bar img { width: 20px; height: 20px; }
.live { margin-left: auto; display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.1rem 0.6rem; border: 1px solid rgba(126, 231, 135, 0.45); border-radius: 999px; color: #7ee787; font-size: 0.78rem; font-weight: 400; }
.live::before { content: ""; width: 0.4rem; height: 0.4rem; border-radius: 50%; background: currentColor; }
.overlay-body { padding: 0.75rem; min-height: 13.2rem; }
.heard { margin: 0 0 0.6rem; padding: 0.5rem 0.7rem; border-left: 3px solid var(--iris); border-radius: 8px; background: rgba(142, 124, 255, 0.14); max-width: none; }
.heard.listening { color: #b7a9ff; font-size: 0.86rem; background: none; border-color: transparent; padding-left: 0; }
.answer { margin: 0; padding-left: 0.75rem; border-left: 3px solid var(--amber); max-width: none; }
.answer strong { color: var(--amber); }
.answer .lead { font-weight: 700; font-size: 1.02rem; display: block; margin-bottom: 0.35rem; }
.answer ul { margin: 0; padding-left: 1.1rem; }
.answer li::marker { color: var(--amber); }
.caret { display: inline-block; width: 0.5em; height: 1em; margin-left: 2px; vertical-align: -0.15em; background: var(--amber); animation: blink 0.9s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- the questions it hears ---------- */

.heard-everywhere { margin-top: clamp(3.5rem, 8vw, 6rem); overflow: hidden; }
.heard-everywhere > p { font: 700 clamp(1.5rem, 3vw, 2.2rem)/1.15 var(--display); letter-spacing: -0.015em; max-width: none; padding-bottom: 2rem; }
.marquee { display: flex; overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee + .marquee { margin-top: 0.8rem; }
.track { display: flex; gap: 0.8rem; padding-right: 0.8rem; flex: none; animation: slide 46s linear infinite; }
.marquee.reverse .track { animation-direction: reverse; animation-duration: 54s; }
.marquee:hover .track { animation-play-state: paused; }
.track span { flex: none; padding: 0.65rem 1.1rem; border-radius: 999px; border: 1px solid rgba(243, 240, 250, 0.2); background: rgba(243, 240, 250, 0.05); font-size: 1.05rem; white-space: nowrap; }
.marquee.reverse .track span { border-color: rgba(142, 124, 255, 0.5); color: #cfc6ff; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- the pull quote ---------- */

.pull { background: var(--midnight); color: var(--paper); padding: clamp(4rem, 9vw, 7rem) 0; position: relative; overflow: clip; }
.pull::before { content: "“"; position: absolute; top: -0.18em; left: max(1rem, calc(50% - 600px)); font: 700 clamp(14rem, 30vw, 26rem)/1 var(--display); color: rgba(142, 124, 255, 0.2); pointer-events: none; }
.pull blockquote { margin-block: 0; position: relative; }
.pull blockquote p { font: 700 clamp(1.8rem, 4vw, 3.1rem)/1.12 var(--display); letter-spacing: -0.02em; max-width: 22ch; font-variation-settings: "wdth" 90; }
.pull blockquote footer { margin-top: 1.5rem; color: rgba(243, 240, 250, 0.65); }

/* ---------- things that settle into place when scrolled to ---------- */

.will-reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--order, 0) * 90ms); }
.will-reveal.in { opacity: 1; transform: none; }
.tier.featured.will-reveal.in { transform: translateY(-14px); }

/* The screenshot grows to full size as it comes up the screen. */
@supports (animation-timeline: view()) {
  .zoom .frames { animation: grow linear both; animation-timeline: view(); animation-range: entry 0% cover 38%; }
  @keyframes grow { from { transform: translateY(40px) scale(0.86); opacity: 0.35; } }
}

/* ---------- sections on paper ---------- */

.band { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.band + .band { border-top: 1px solid var(--rule); }
.band > .wrap > h2 { max-width: 18ch; }
.band .intro { margin-top: 1rem; font-size: 1.15rem; color: var(--soft); }

.steps { list-style: none; margin: 2.75rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; counter-reset: step; }
.steps li { counter-increment: step; padding-top: 1.1rem; border-top: 3px solid var(--ink); }
.steps li::before { content: counter(step); display: block; font: 700 3.2rem/1 var(--display); color: var(--iris); margin-bottom: 0.8rem; font-variation-settings: "wdth" 80; }
.steps p { margin-top: 0.5rem; color: var(--soft); }

.facts { margin: 2.5rem 0 0; }
.facts div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 2rem; padding: 1.5rem 0; border-top: 1px solid var(--rule); }
.facts div:last-child { border-bottom: 1px solid var(--rule); }
.facts dt { font: 700 1.5rem/1.15 var(--display); letter-spacing: -0.015em; }
.facts dd { margin: 0; color: var(--soft); }

/* A tour of the app: the pictures are stacked and cross-fade; the labels
   underneath choose one, and the current label fills as its turn runs out. */
.tour { margin: 3.5rem 0 0; }
.frames { position: relative; aspect-ratio: 2240 / 1400; border-radius: 16px; background: var(--midnight); box-shadow: 0 40px 80px -36px rgba(27, 29, 54, 0.7), 0 0 0 1px rgba(27, 29, 54, 0.12); overflow: hidden; }
.frames img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.035); transition: opacity 0.7s ease, transform 1.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.frames img.on { opacity: 1; transform: none; }
.tour figcaption { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 1.25rem; }
.tour button { position: relative; display: grid; gap: 0.2rem; padding: 1rem 0 0; border: none; border-top: 3px solid var(--rule); background: none; color: var(--soft); font: inherit; text-align: left; cursor: pointer; transition: color 0.2s; }
.tour button strong { font: 700 1.15rem/1.2 var(--display); color: var(--ink); opacity: 0.55; transition: opacity 0.2s; }
.tour button span { font-size: 0.95rem; line-height: 1.4; }
.tour button:hover strong, .tour button.on strong { opacity: 1; }
.tour button::before { content: ""; position: absolute; top: -3px; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--sky), var(--iris)); }
.tour button.on::before { width: 100%; }
.tour.playing button.on::before { animation: fill var(--turn-length, 5.5s) linear both; }
.tour.playing:hover button.on::before, .tour.playing:focus-within button.on::before { animation-play-state: paused; }
@keyframes fill { from { width: 0; } to { width: 100%; } }

/* ---------- pricing ---------- */

.pricing { background: linear-gradient(180deg, var(--paper), #e9e4f8); }
.pricing > .wrap > h2 { max-width: 16ch; }
.tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; align-items: stretch; margin-top: 3rem; }
.tier { position: relative; display: flex; flex-direction: column; padding: 1.75rem 1.6rem 1.6rem; border-radius: 22px; background: #fff; border: 1px solid var(--rule); transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s; }
.tier:hover { transform: translateY(-4px); box-shadow: 0 24px 40px -24px rgba(27, 29, 54, 0.45); }
.tier h3 { font-size: 1.5rem; }
.tier .cost { margin-top: 0.9rem; color: var(--soft); }
.tier .cost span { font: 700 3.6rem/1 var(--display); font-variation-settings: "wdth" 82; letter-spacing: -0.03em; color: var(--ink); margin-right: 0.2rem; }
.tier .per { margin-top: 0.5rem; font-weight: 700; color: var(--iris); }
.tier ul { list-style: none; margin: 1.4rem 0 1.75rem; padding: 1.3rem 0 0; border-top: 1px solid var(--rule); display: grid; gap: 0.7rem; flex: 1; align-content: start; }
.tier li { display: grid; grid-template-columns: 1.25rem 1fr; gap: 0.6rem; line-height: 1.4; }
.tier li svg { width: 1.25rem; height: 1.25rem; margin-top: 0.1rem; fill: none; stroke: var(--iris); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.tier .button { justify-content: center; }
.button.line { border-color: var(--ink); color: var(--ink); }
.button.line:hover { background: var(--ink); color: var(--paper); }

/* Pro is the one on the dark stage, lifted above the others, with a slowly turning edge of light. */
.tier.featured { background: var(--midnight); color: var(--paper); border-color: transparent; transform: translateY(-14px); box-shadow: 0 34px 60px -28px rgba(20, 22, 43, 0.8); isolation: isolate; }
.tier.featured:hover { transform: translateY(-18px); }
.tier.featured::before { content: ""; position: absolute; inset: -2px; z-index: -2; border-radius: 24px; background: conic-gradient(from var(--turn, 0deg), var(--iris), var(--sky), var(--mint), var(--amber), var(--iris)); animation: turn 7s linear infinite; }
.tier.featured::after { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: 22px; background: radial-gradient(22rem 14rem at 80% 0%, rgba(142, 124, 255, 0.35), transparent 65%), var(--midnight); }
@property --turn { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes turn { to { --turn: 360deg; } }
.tier.featured .cost { color: rgba(243, 240, 250, 0.7); }
.tier.featured .cost span { color: #fff; }
.tier.featured .per { color: var(--amber); }
.tier.featured ul { border-color: rgba(243, 240, 250, 0.18); }
.tier.featured li svg { stroke: var(--mint); }
.flag { position: absolute; top: 1.5rem; right: 1.4rem; padding: 0.3rem 0.75rem; border-radius: 999px; background: var(--amber); color: var(--midnight); font-size: 0.82rem; font-weight: 700; }
.button.glow { background: linear-gradient(120deg, var(--sky), var(--iris)); color: var(--midnight); box-shadow: 0 10px 30px -8px rgba(142, 124, 255, 0.9); }
.button.glow:hover { box-shadow: 0 14px 36px -6px rgba(142, 124, 255, 1); transform: translateY(-1px); }
.plans-note { margin-top: 2.25rem; color: var(--soft); }

/* ---------- download and questions ---------- */

.get { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; margin-top: 2rem; }
.get small { flex-basis: 100%; color: var(--soft); font-size: 0.95rem; }

.questions { margin-top: 2.25rem; max-width: 46rem; }
.questions details { border-top: 1px solid var(--rule); }
.questions details:last-child { border-bottom: 1px solid var(--rule); }
.questions summary { cursor: pointer; padding: 1.15rem 2.25rem 1.15rem 0; font: 700 1.2rem/1.25 var(--display); list-style: none; position: relative; }
.questions summary::-webkit-details-marker { display: none; }
.questions summary::after { content: "+"; position: absolute; right: 0.25rem; top: 0.9rem; font: 400 1.6rem/1 var(--text); color: var(--iris); }
.questions details[open] summary::after { content: "–"; }
.questions p { padding: 0 0 1.3rem; color: var(--soft); }
.questions summary { transition: color 0.2s; }
.questions summary:hover { color: var(--iris); }
/* Answers ease open where the browser supports it. */
@supports (interpolate-size: allow-keywords) {
  .questions { interpolate-size: allow-keywords; }
  .questions details::details-content { height: 0; overflow: clip; transition: height 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), content-visibility 0.35s allow-discrete; }
  .questions details[open]::details-content { height: auto; }
}

/* ---------- footer ---------- */

.site-foot { background: var(--midnight); color: rgba(243, 240, 250, 0.78); padding: 2.5rem 0; font-size: 0.95rem; }
.site-foot .wrap { display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; align-items: center; }
.site-foot .brand { color: var(--paper); margin-right: auto; }
.site-foot a:not(.brand) { text-underline-offset: 0.3em; }
.site-foot .rights { flex-basis: 100%; max-width: none; margin-top: 0.75rem; padding-top: 1.25rem; border-top: 1px solid rgba(243, 240, 250, 0.14); font-size: 0.88rem; color: rgba(243, 240, 250, 0.55); }

/* ---------- plain pages: privacy, terms, after payment ---------- */

.page-head { background: var(--midnight); color: var(--paper); }
.page-head .title { padding: clamp(2rem, 6vw, 4rem) 0 clamp(2.5rem, 6vw, 4rem); }
.page-head .title p { margin-top: 1rem; color: rgba(243, 240, 250, 0.75); }
.prose { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.prose h2 { font-size: 1.7rem; margin: 2.75rem 0 0.75rem; line-height: 1.1; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul { max-width: var(--measure); margin: 0 0 1rem; }
.prose ul { padding-left: 1.2rem; }
.prose li { margin-bottom: 0.4rem; }
.draft { max-width: var(--measure); margin-bottom: 2.5rem; padding: 1rem 1.2rem; border-left: 4px solid var(--amber); background: rgba(255, 197, 107, 0.2); border-radius: 0 10px 10px 0; }

/* ---------- signing in: the stage on the left, the form on paper on the right ---------- */

.entry { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
.entry.single { grid-template-columns: 1fr; }
.entry-stage { display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; padding: clamp(1.5rem, 4vw, 3rem); color: var(--paper); background: radial-gradient(40rem 26rem at 20% 10%, rgba(142, 124, 255, 0.4), transparent 60%), radial-gradient(34rem 24rem at 90% 100%, rgba(110, 168, 254, 0.25), transparent 60%), var(--midnight); }
.entry-pitch h1 { font-size: clamp(2.2rem, 4.4vw, 3.6rem); max-width: 12ch; }
.entry-pitch ul { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 0.75rem; font-size: 1.1rem; color: rgba(243, 240, 250, 0.85); }
.entry-pitch li { padding-left: 1.6rem; position: relative; }
.entry-pitch li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.7rem; height: 0.7rem; border-radius: 50%; background: var(--mint); }
.entry-stage .small { color: rgba(243, 240, 250, 0.7); }
.entry-form { display: grid; place-items: center; padding: clamp(1.5rem, 4vw, 3rem); }
.entry-card { width: min(27rem, 100%); display: grid; gap: 1rem; }
.entry-card h2 { font-size: 2.1rem; }
.entry-card .lede { color: var(--soft); }
.entry-card form { display: grid; gap: 0.6rem; }
.entry-card label { font-size: 0.95rem; color: var(--soft); }
.entry-card input { font: inherit; padding: 0.85rem 1rem; border-radius: 12px; border: 1.5px solid var(--rule); background: #fff; color: var(--ink); }
.entry-card input:focus { outline: 3px solid var(--sky); outline-offset: 1px; border-color: transparent; }
.entry-card .button { justify-content: center; cursor: pointer; }
.switch { display: grid; grid-template-columns: 1fr 1fr; padding: 4px; border-radius: 999px; background: rgba(27, 29, 54, 0.08); }
.switch button { padding: 0.6rem; border: none; border-radius: 999px; background: none; font: 700 0.98rem var(--text); color: var(--soft); cursor: pointer; transition: background 0.2s, color 0.2s; }
.switch button[aria-selected="true"] { background: var(--ink); color: var(--paper); }
.small { font-size: 0.9rem; color: var(--soft); }
.link { border: none; background: none; padding: 0; font: inherit; color: var(--iris); cursor: pointer; text-decoration: underline; text-underline-offset: 0.25em; justify-self: start; }
.notice { font-size: 0.98rem; padding: 0.7rem 0.9rem; border-radius: 10px; background: rgba(110, 168, 254, 0.16); }
.notice.bad { background: rgba(255, 123, 114, 0.18); color: #9b2c25; }
.code { font: 700 2.4rem/1 var(--display); letter-spacing: 0.08em; text-align: center; padding: 1.1rem; border-radius: 14px; background: var(--midnight); color: var(--amber); }
button.button { border: 2px solid transparent; cursor: pointer; }
button.button.line { border-color: var(--ink); background: none; }
.button:disabled { opacity: 0.5; cursor: default; }

/* ---------- the dashboard ---------- */

.dash-head { background: var(--midnight); color: var(--paper); }
.dash-head .wrap { display: flex; align-items: center; gap: 1rem; padding: 1rem 0; }
.dash-head .who { margin-left: auto; color: rgba(243, 240, 250, 0.75); overflow: hidden; text-overflow: ellipsis; }
.dash-head .button.line { border-color: rgba(243, 240, 250, 0.45); color: var(--paper); }
.dash-head .button.line:hover { background: rgba(243, 240, 250, 0.12); }
.loading { padding: 4rem 0; color: var(--soft); }
.dash-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(1.5rem, 4vw, 3.5rem); padding: clamp(2rem, 5vw, 4rem) 0; align-items: start; }
.dash h2 { font-size: 1.5rem; margin-bottom: 0.9rem; }

/* Time left is what the product sells, so it is the largest thing on the page. */
.time-card { background: var(--midnight); color: var(--paper); border-radius: 26px; padding: clamp(1.5rem, 3vw, 2.25rem); background-image: radial-gradient(26rem 16rem at 100% 0%, rgba(142, 124, 255, 0.4), transparent 65%); }
.time-label { color: rgba(243, 240, 250, 0.75); }
.big-time { font: 700 clamp(3.2rem, 8vw, 5.6rem)/0.95 var(--display); letter-spacing: -0.03em; font-variation-settings: "wdth" 80; margin-top: 0.4rem; }
.hours { position: relative; height: 14px; margin-top: 1.5rem; border-radius: 7px; background: rgba(243, 240, 250, 0.14); overflow: hidden; }
.hours i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--mint), var(--sky), var(--iris)); transition: width 0.9s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hours::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / var(--parts, 1) - 2px), var(--midnight) calc(100% / var(--parts, 1) - 2px), var(--midnight) calc(100% / var(--parts, 1))); }
.of { margin-top: 0.6rem; color: rgba(243, 240, 250, 0.7); }
.time-card .facts-list { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid rgba(243, 240, 250, 0.16); display: grid; gap: 0.5rem; }
.facts-list div { display: flex; justify-content: space-between; gap: 1rem; }
.facts-list dt { color: rgba(243, 240, 250, 0.7); }
.facts-list dd { margin: 0; font-weight: 700; text-align: right; }

.plan-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.1rem 0; border-top: 1px solid var(--rule); }
.plan-row:last-child { border-bottom: 1px solid var(--rule); }
.plan-row strong { font: 700 1.3rem var(--display); }
.plan-row .price { margin-left: 0.6rem; color: var(--soft); }
.plan-row p { margin-top: 0.15rem; color: var(--soft); font-size: 0.98rem; }
.plan-row.is-current strong { color: var(--iris); }
.current { flex: none; padding: 0.35rem 0.8rem; border-radius: 999px; background: rgba(142, 124, 255, 0.16); color: #5b47d6; font-weight: 700; font-size: 0.9rem; }
.plan-row .button { flex: none; }
.plan-list .notice { margin-top: 1rem; }
.plan-list .small { margin-top: 1rem; max-width: none; }
.dash-side { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; padding-top: 2.5rem; border-top: 1px solid var(--rule); }
.dash-side p { color: var(--soft); }
.row { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.9rem; }

/* Sign-in card: fixed space for the words so switching modes keeps everything in place. */
.entry-card { align-content: start; min-height: 30rem; }
.entry-card .lede { min-height: 3.2em; }
.entry-pitch h1 { min-height: 3.15em; }
.entry-card h2, .entry-card .lede, .entry-pitch h1, #send { transition: opacity 0.18s ease; }
.entry-card.swapping h2, .entry-card.swapping .lede, .entry-card.swapping #send, body:has(.swapping) .entry-pitch h1 { opacity: 0; }
.code-label { color: var(--soft); }

/* One box per digit. They arrive one after another, each digit pops in, a
   wave runs across while checking, then they turn green in turn. */
.otp { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 0.45rem; }
.otp input { width: 100%; aspect-ratio: 3 / 4; padding: 0; text-align: center; font: 700 1.6rem var(--display); border-radius: 12px; border: 1.5px solid var(--rule); background: #fff; color: var(--ink); caret-color: var(--iris); transition: border-color 0.2s, background 0.3s, color 0.3s, transform 0.2s; }
.otp input:nth-child(4) { margin-right: 0.5rem; }
.otp input:focus { outline: none; border-color: var(--iris); box-shadow: 0 0 0 4px rgba(142, 124, 255, 0.22); }
.otp input.filled { border-color: var(--ink); }
.otp.arrive input { animation: arrive 0.45s cubic-bezier(0.2, 0.8, 0.2, 1.2) both; animation-delay: calc(var(--i) * 45ms); }
.otp input.pop { animation: pop 0.22s ease; }
.otp.checking input { animation: wave 0.9s ease-in-out infinite; animation-delay: calc(var(--i) * 70ms); border-color: var(--iris); }
.otp.correct input { background: var(--mint); border-color: var(--mint); color: var(--midnight); transition-delay: calc(var(--i) * 55ms); }
.otp.wrong { animation: shake 0.45s; }
.otp.wrong input { border-color: var(--danger); color: var(--danger); }
@keyframes arrive { from { opacity: 0; transform: translateY(14px) scale(0.9); } }
@keyframes pop { 50% { transform: scale(1.12); } }
@keyframes wave { 50% { transform: translateY(-6px); } }
@keyframes shake { 20%, 60% { transform: translateX(-8px); } 40%, 80% { transform: translateX(8px); } }
.switch, .entry-card > h2, .entry-card > .lede, #email-form { transition: opacity 0.3s; }
.entry-card.done-state > :not(.welcome):not(.brand) { display: none; }
.welcome { display: grid; justify-items: center; text-align: center; gap: 0.6rem; padding: 3rem 0; }
.welcome svg { width: 84px; height: 84px; fill: none; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.welcome circle { stroke: var(--mint); stroke-dasharray: 151; stroke-dashoffset: 151; animation: draw 0.6s ease-out forwards; }
.welcome path { stroke: var(--midnight); stroke-dasharray: 40; stroke-dashoffset: 40; animation: draw 0.35s 0.5s ease-out forwards; }
.welcome h2 { animation: rise 0.5s 0.6s both; }
.welcome p { color: var(--soft); animation: rise 0.5s 0.75s both; }
@keyframes draw { to { stroke-dashoffset: 0; } }

/* ---------- signed-in pages: header with a profile menu ---------- */
.dash-head nav { display: flex; gap: 1.5rem; margin-left: 2rem; }
.dash-head nav a { text-decoration: none; color: rgba(243, 240, 250, 0.7); padding: 0.3rem 0; border-bottom: 2px solid transparent; }
.dash-head nav a[aria-current="page"], .dash-head nav a:hover { color: var(--paper); border-color: var(--iris); }
.profile { position: relative; margin-left: auto; }
.avatar { width: 40px; height: 40px; border-radius: 50%; border: 2px solid rgba(243, 240, 250, 0.3); background: linear-gradient(135deg, var(--sky), var(--iris)); color: var(--midnight); font: 700 1.05rem var(--display); cursor: pointer; display: inline-grid; place-items: center; }
.avatar.big { width: 64px; height: 64px; font-size: 1.6rem; flex: none; }
.menu { position: absolute; right: 0; top: calc(100% + 0.6rem); z-index: 30; width: 15rem; padding: 0.5rem; border-radius: 16px; background: #fff; color: var(--ink); box-shadow: 0 24px 50px -20px rgba(20, 22, 43, 0.6); display: grid; animation: rise 0.2s ease-out; }
.menu-email { padding: 0.5rem 0.75rem 0.7rem; margin-bottom: 0.3rem; border-bottom: 1px solid var(--rule); color: var(--soft); font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; }
.menu a, .menu button { padding: 0.6rem 0.75rem; border-radius: 10px; text-decoration: none; border: none; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.menu a:hover, .menu button:hover { background: rgba(142, 124, 255, 0.12); }
.menu button { color: #b3261e; }

.dash-main { padding: clamp(1.75rem, 4vw, 3rem) 0 4rem; display: grid; gap: 1.5rem; }
.dash-main.narrow { max-width: 50rem; }
.hello { font-size: clamp(2rem, 4vw, 2.8rem); }
.sub { color: var(--soft); }
.dash-top { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 1.5rem; }
.time-foot { margin-top: 1.25rem; color: rgba(243, 240, 250, 0.75); }
.time-foot a { color: var(--paper); }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.stat { padding: 1.25rem; border-radius: 20px; background: #fff; border: 1px solid var(--rule); display: grid; align-content: space-between; gap: 0.3rem; }
.stat-label { color: var(--soft); font-size: 0.95rem; }
.stat-value { font: 700 clamp(1.7rem, 3vw, 2.3rem)/1.05 var(--display); letter-spacing: -0.02em; }
.stat-note { color: var(--soft); font-size: 0.85rem; }
.chart-card { padding: 1.5rem; border-radius: 22px; background: #fff; border: 1px solid var(--rule); }
.chart-card h2 { font-size: 1.3rem; margin-bottom: 1rem; }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; }
.chart-head p { color: var(--soft); }
.columns { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 0.5rem; height: 12rem; align-items: end; }
.column { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 0.4rem; }
.column .fill { width: 100%; height: var(--h); min-height: 3px; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--iris), var(--sky)); transform-origin: bottom; animation: grow-up 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: calc(var(--i) * 35ms); }
.column:hover .fill { background: linear-gradient(180deg, var(--amber), var(--iris)); }
.column .day { font-size: 0.8rem; color: var(--soft); }
@keyframes grow-up { from { transform: scaleY(0); } }
.empty-chart { grid-column: 1 / -1; align-self: center; text-align: center; color: var(--soft); max-width: none; }
.dash-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.share { margin-bottom: 0.9rem; }
.share p { display: flex; justify-content: space-between; max-width: none; margin-bottom: 0.35rem; }
.share div { height: 10px; border-radius: 5px; background: rgba(27, 29, 54, 0.08); overflow: hidden; }
.share i { display: block; height: 100%; border-radius: 5px; background: linear-gradient(90deg, var(--mint), var(--sky)); }
.clock svg { display: block; width: min(15rem, 100%); margin: 0 auto; }
.clock line { stroke: rgba(27, 29, 54, 0.12); stroke-width: 5; stroke-linecap: round; }
.clock line.on { stroke: var(--iris); }
.clock text { text-anchor: middle; font: 700 22px var(--display); fill: var(--ink); }
.clock text.sub { font: 400 11px var(--text); fill: var(--soft); }
.billing-card { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.5rem; border-radius: 22px; background: #fff; border: 1px solid var(--rule); }
.billing-card h2 { font-size: 1.3rem; }
.billing-card p { color: var(--soft); margin-top: 0.3rem; }
.profile-top { display: flex; align-items: center; gap: 1.25rem; }
.profile-top .hello { font-size: clamp(1.4rem, 3vw, 2rem); word-break: break-all; }
.settings-list { display: grid; border-radius: 22px; background: #fff; border: 1px solid var(--rule); }
.settings-list > div { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.25rem 1.5rem; }
.settings-list > div + div { border-top: 1px solid var(--rule); }
.settings-list h2 { font-size: 1.15rem; }
.settings-list p { color: var(--soft); margin-top: 0.2rem; }
.settings-list .row { margin: 0; flex: none; }
.billing-card .button, .settings-list .button, .plan-row .button { white-space: nowrap; flex: none; }
.button.danger { border-color: #b3261e !important; color: #b3261e; }
@media (max-width: 820px) {
  .dash-top, .dash-pair, .stats { grid-template-columns: 1fr; }
  .dash-head nav { display: none; }
  .settings-list > div, .billing-card { flex-direction: column; align-items: flex-start; }
}

.notice.good { background: rgba(79, 214, 176, 0.22); color: #0d5e47; }
.start-steps { padding: 1.5rem; border-radius: 22px; background: linear-gradient(135deg, rgba(110, 168, 254, 0.18), rgba(142, 124, 255, 0.18)); border: 1px solid rgba(142, 124, 255, 0.3); }
.start-steps h2 { font-size: 1.3rem; }
.start-steps ol { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; counter-reset: s; }
.start-steps li { counter-increment: s; display: grid; gap: 0.2rem; }
.start-steps li::before { content: counter(s); width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; background: var(--midnight); color: var(--paper); font: 700 1rem var(--display); margin-bottom: 0.4rem; }
.start-steps span { color: var(--soft); font-size: 0.95rem; }
@media (max-width: 820px) { .start-steps ol { grid-template-columns: 1fr; } }
dialog#confirm { width: min(30rem, calc(100% - 2rem)); padding: 1.75rem; border: none; border-radius: 22px; background: var(--paper); color: var(--ink); box-shadow: 0 40px 80px -30px rgba(20, 22, 43, 0.7); }
dialog#confirm::backdrop { background: rgba(20, 22, 43, 0.55); backdrop-filter: blur(3px); }
dialog#confirm h2 { font-size: 1.6rem; }
dialog#confirm p { margin-top: 0.75rem; color: var(--soft); }
dialog#confirm .row { justify-content: flex-end; margin-top: 1.5rem; }
dialog#confirm[open] { animation: rise 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }

@media (max-width: 820px) {
  .entry { grid-template-columns: 1fr; }
  .entry-stage { min-height: auto; }
  .entry-pitch ul { display: none; }
  .dash-grid, .dash-side { grid-template-columns: 1fr; }
  .plan-row { flex-wrap: wrap; }
}

.done { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(50rem 30rem at 50% 0%, rgba(142, 124, 255, 0.3), transparent 60%), var(--midnight); color: var(--paper); text-align: left; padding: 2rem; }
.done div { max-width: 30rem; }
.done img { width: 64px; height: 64px; margin-bottom: 1.5rem; }
.done p { margin-top: 1rem; font-size: 1.15rem; color: rgba(243, 240, 250, 0.82); }

/* ---------- smaller screens ---------- */

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: 1fr; }
  .tier.featured, .tier.featured:hover, .tier.featured.will-reveal.in { transform: none; }
  .pull blockquote p { font-size: 1.7rem; }
  .tour figcaption { grid-template-columns: 1fr; gap: 0.25rem; }
  .tour button span { display: none; }
  .tour button { padding: 0.7rem 0; }
  .hero-copy p { max-width: 40ch; }
  /* On a narrow screen the overlay sits below the call, overlapping its lower edge. */
  .scene { padding-bottom: 0; }
  .overlay { position: relative; right: auto; width: auto; margin: -4.5rem 0 0 1.5rem; }
  .steps { grid-template-columns: 1fr; gap: 1.75rem; }
  .facts div { grid-template-columns: 1fr; gap: 0.5rem; }
  .site-head nav a:not(.button) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .stage::before, .stage::after, .track, .tier.featured::before, .bars i, .hero-copy > *, .scene, .zoom .frames { animation: none; }
  .frames img { transition: none; transform: none; }
  .marquee { overflow-x: auto; }
  .overlay { transform: none; }
  .caret { display: none; }
  .button { transition: none; }
}