/* ==========================================================================
   Soltar Landing Page — Design Tokens
   Sourced from theme.ts (main app). See flagged notes below for values that
   don't have an exact match to the Figma coming-soon design.
   ========================================================================== */

:root {
  /* ---- Neutrals ---- */
  --color-beige: #f2f0ec;
  --color-black: #1a1a1a;
  --color-brown: #e3dfd8;
  --color-white: #ffffff;

  /* ---- Accents ---- */
  --color-red: #ae4d25;
  --color-coral: #ffb293;
  --color-green: #3a6353;
  --color-light-green: #54d7a5;
  --color-blue: #37507c;

  /* ---- Transparent / overlay variants (from theme.ts) ---- */
  --color-beige-transparent: rgba(242, 240, 236, 0.1);
  --color-beige-underline: rgba(242, 240, 236, 0.6);
  --color-black-transparent: rgba(26, 26, 26, 0.07);
  --color-black-overlay: rgba(26, 26, 26, 0.5);
  --color-blue-transparent: rgba(55, 80, 124, 0.1);
  --color-blue-overlay: rgba(55, 80, 124, 0.5);
  --color-red-tint: rgba(174, 77, 37, 0.1);
  --color-green-tint: rgba(58, 99, 83, 0.1);

  /* ---- Fonts ---- */
  --font-serif: 'Playfair Display', serif;
  --font-sans: 'Inter', sans-serif;

  /* ---- Font weights ---- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 700;

  /* ---- Radius ---- */
  --radius-card: 8px;
  --radius-pill: 14px;
}

/* ==========================================================================
   NOTE: theme.ts is the confirmed source of truth for all color values.
   The earlier PDF export (Landing_Page_-_Coming_Soon.pdf) showed shifted
   hex values due to color changes on export — --color-red (#ae4d25) is the
   correct hero background, --color-blue (#37507c) is the correct phone
   mockup chat screen color. Do not reference the PDF's colors going forward.

   STILL OPEN: theme.ts's fontSizes (micro: 9px, tiny: 10px, eyebrow: 11px,
   label: 12px) are small uppercase-label sizes used inside app components —
   none cover a headline/body type scale. Landing page hero, subheading, and
   body copy sizes are NOT yet defined here and will need new values flagged
   and added once we lock in the type scale from Figma directly.
   ========================================================================== */

/* ==========================================================================
   Landing Page — Type Scale
   Pulled directly from Figma frame 4913:17656 (flagged with Elsa before
   adding). Added incrementally as each section is built.
   ========================================================================== */
:root {
  --font-size-nav: 15px; /* nav links, CTA text, email placeholder — nudged down slightly from Figma's 16px, per Elsa's review */

  /* Hero headline: 80px in Figma. Clamped for mobile — Figma has no mobile
     frame, so the fluid range below is my own responsive interpretation,
     not a sourced value. Desktop size (max bound) stays at the original
     80px, matching Figma exactly — only the mobile size (min bound) is
     nudged down further, per Elsa's review. */
  --font-size-hero: clamp(2rem, 8vw, 5rem);

  /* Subheading: 20px in Figma, same clamping approach. Desktop size (max
     bound) stays at the original 20px — mobile size (min bound) nudged
     back up slightly from 13px, per Elsa's review. */
  --font-size-subheading: clamp(0.9375rem, 3vw, 1.25rem);

  /* Small-caps eyebrow label ("LAUNCHING SOON..."): 11px in Figma. Nudged
     down slightly, per Elsa's review. */
  --font-size-eyebrow: 10px;

  /* Phone mockup type scale — all rounded to whole px from Figma's exact
     (non-round) exported values, since sub-pixel figures aren't meaningful
     design intent at this size. */
  --font-size-phone-title: 28px;  /* "Record or type your first message." — 28.338px in Figma */
  --font-size-phone-header: 13px; /* "Start chatting!" — 13.28px in Figma */
  --font-size-phone-meta: 8px;    /* date / type / end labels — 7.97px in Figma */
  --font-size-phone-label: 10px;  /* "Speak" / "Or use prompts" — 9.74px in Figma */
  --font-size-phone-bubble: 12px; /* chat bubble text — 11.76px in Figma. Used as the base for the tappable prompt buttons; the live conversation's sent bubble sizes up further, see .phone__message--user .phone__bubble */

  /* Added for the scripted chat interaction (Figma frames 4256:594 and
     4915:22690, both a 402px-wide reference — scaled to our 328px card at
     the same ~0.816 ratio used throughout this component). Flagging both
     as new: neither an Inter-serif-mix like this nor this label size
     existed in the type scale before. */
  --font-size-phone-marta: 19px;      /* Marta's reply text, Playfair Display — 17px in Figma; sized up further, per Elsa's review, so the live 2-message conversation fills more of the screen */
  --font-size-phone-chat-label: 11px; /* "— Marta" / "— Tú" labels — 11px in Figma; sized up to match, per Elsa's review (was scaled down to 9px) */
}

/* ==========================================================================
   Base / Reset
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-red);
  color: var(--color-beige);
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  overflow-x: hidden;
  /* Without these, Chrome/Firefox render Inter noticeably heavier than
     Figma does at small sizes (e.g. the chat bubble text), even though the
     weight itself is already regular (400) — this brings rendering closer
     to Figma's rasterization rather than changing any actual weight value. */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: inherit;
  text-decoration: none;
}

.page {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
  padding-bottom: 65px; /* decreased 15px, per Elsa's review — was 80px */
}

/* ==========================================================================
   Nav
   ========================================================================== */
.nav {
  position: relative;
  z-index: 10;
  padding: 24px clamp(20px, 5.5vw, 80px) 0;
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* No flex-wrap here — it used to wrap organically at any width where the
     content didn't fit, which (above the 600px breakpoint below) produced
     an ugly left-aligned second row instead of the intentional centered
     stack. Wrapping is now only ever enabled together with that centered
     treatment, at the wider breakpoint further down. */
  row-gap: 16px;
  max-width: 1440px;
  margin: 0 auto;
}

.nav__right {
  display: flex;
  align-items: center;
  gap: 4px; /* tightened from 8px, per Elsa's review */
  flex-wrap: wrap;
}

.nav__links {
  display: flex;
  align-items: center;
}

.nav__link,
.nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 20px;
  border-radius: 999px; /* true stadium pill — see radius note below */
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--font-size-nav);
  color: var(--color-beige);
  white-space: nowrap;
}

.nav__link {
  position: relative;
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 20px;
  right: 20px;
  bottom: 10px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s ease;
}

.nav__link:hover::after,
.nav__link:focus-visible::after {
  transform: scaleX(1);
}

.nav__cta {
  background: var(--color-beige-transparent);
  transition: background-color 0.25s ease, color 0.25s ease;
}

.nav__cta:hover,
.nav__cta:focus-visible {
  background: var(--color-beige);
  color: var(--color-red);
}

.nav__cta-icon {
  width: 24px;
  height: 20px;
  transform: rotate(90deg); /* source icon points up; Figma rotates it to point right */
}

/* Elsa: --radius-pill (14px) doesn't reproduce a true pill at this element's
   ~52px height — Figma uses 74px (functionally a full stadium). Using 999px
   directly per your call in the pill-radius question; --radius-pill is left
   untouched for other components. */

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  max-width: 940px;
  margin: 96px auto 0;
  padding: 0 24px;
  text-align: center;
}

.hero__headline {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: var(--weight-regular);
  font-size: var(--font-size-hero);
  line-height: 1.2;
  color: var(--color-white);
}

.hero__headline em {
  font-style: italic;
  font-family: var(--font-serif);
  color: var(--color-brown);
  text-decoration-line: underline;
  text-decoration-color: currentColor;
  text-decoration-thickness: 1.5%;
  text-underline-position: from-font;
}

.hero__subheading {
  margin: 0;
  max-width: 548px;
  font-family: var(--font-sans);
  font-weight: var(--weight-regular);
  font-size: var(--font-size-subheading);
  line-height: 1.4;
  color: var(--color-white);
}

/* ==========================================================================
   Waitlist / Email Capture
   ========================================================================== */
.waitlist {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  width: 100%;
  max-width: 458px;
}

.waitlist__label-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 21px;
  width: 100%;
}

.waitlist__line {
  flex: 1 0 0;
  min-width: 16px;
  height: 1px;
  background: var(--color-beige-transparent);
}

.waitlist__label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-eyebrow);
  letter-spacing: 0.66px;
  text-transform: uppercase;
  color: var(--color-beige);
  white-space: nowrap;
}

.waitlist__form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 14px 20px;
  background: var(--color-beige-transparent);
  border: 1px solid var(--color-beige);
  border-radius: 999px; /* true stadium pill, same call as the nav CTA */
}

.waitlist__input {
  flex: 1;
  min-width: 0;
  border: none;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--font-size-nav);
  color: var(--color-beige);
  outline: none;
}

.waitlist__input::placeholder {
  /* --color-beige-underline is rgba(242,240,236,0.6) — its name is unrelated,
     but the value happens to exactly match Figma's 60%-opacity placeholder
     text, so reusing it rather than adding a new rgba value. */
  color: var(--color-beige-underline);
}

.waitlist__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}

.waitlist__submit img {
  width: 24px;
  height: 24px;
  transform: rotate(90deg); /* same up-pointing source icon as the nav CTA */
}

.waitlist__submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.waitlist__message {
  min-height: 20px;
  margin: 0;
  font-family: var(--font-sans);
  font-size: 13px; /* functional UI text, not depicted in Figma; nudged down with the rest of the page's text */
  color: var(--color-beige);
}

.waitlist__message--error {
  /* --color-coral is an existing theme.ts token not called out in the brief's
     list for this page; using it here as the error accent since it's already
     part of the palette rather than introducing a new hex value. */
  color: var(--color-coral);
}

.waitlist__success {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-nav);
  color: var(--color-beige);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==========================================================================
   Phone Mockup + Decorative Wordmark ("scene")
   Figma's updated frame is now tall enough (1575px at 1440 width) that
   neither element is cropped anymore — both render at full size, and the
   page is meant to scroll to reach them. That scroll is used to drive a
   grow-in effect (see script.js): both start at a smaller scale and reach
   their true Figma size exactly when the phone is vertically centered in
   the viewport, driven by a shared --scale-phone / --scale-wordmark custom
   property. Sizes below are updated to Figma's latest export (previously
   356px-wide phone / 2123px-wide wordmark; now 328px / 1749px).
   ========================================================================== */
.phone-scene {
  position: relative;
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: calc(clamp(16px, 3vw, 40px) - 25px); /* decreased another 15px, per Elsa's review — was clamp(48px, 8vw, 96px), then -10px */
}

.phone-frame-wrap {
  width: min(328px, 82vw);
  transform: scale(var(--scale-phone, 0.6));
  transform-origin: center;
  will-change: transform;
}

.phone {
  display: flex;
  flex-direction: column;
  width: 100%;
  aspect-ratio: 328 / 713;
  background: var(--color-blue);
  border-radius: 33px; /* new value, not in original token list — rounded from Figma's 32.632px */
  overflow: hidden;
  padding-top: 24px;
}

.phone__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 24px 8px; /* horizontal padding matched to .phone__body's 24px, per Elsa's review */
  border-bottom: 1px solid var(--color-beige-transparent);
}

.phone__back-icon {
  transform: rotate(-90deg); /* source icon points up; rotated to point left, like the nav arrow rotates to point right */
}

.phone__header-meta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.phone__header-title {
  margin: 0;
  font-family: var(--font-serif);
  font-size: var(--font-size-phone-header);
  /* Figma's own export applies text-box-trim to this line, which removes
     the extra half-leading space a 1.5 line-height normally adds above/below
     a single line of text — that's what was making the title-to-date gap
     look too large. Using a tighter line-height here reproduces the same
     visual result without depending on that not-yet-universally-supported
     CSS property. */
  line-height: 1.1;
  color: var(--color-beige);
  white-space: nowrap;
}

.phone__header-date {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-phone-meta);
  letter-spacing: 0.75px;
  color: var(--color-beige);
  opacity: 0.6;
  white-space: nowrap;
}

.phone__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px 24px; /* horizontal padding increased from 13px, per Elsa's review */
  min-height: 0;
}

.phone__prompts-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 26px;
  width: 100%;
  transition: opacity 0.3s ease;
}

.phone__prompts-block.is-hiding {
  opacity: 0;
}

/* The [display:flex] above beats the browser's own [hidden]{display:none}
   rule, since author styles always win over the UA stylesheet regardless
   of specificity — without this, the hidden attribute silently did
   nothing and the conversation just appeared stacked below the still-
   visible prompts instead of replacing them. */
.phone__prompts-block[hidden],
.phone__conversation[hidden] {
  display: none;
}

.phone__lang-tabs {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: -12px; /* .phone__prompts-block's own 26px gap is wider than Figma's tabs-to-heading spacing; pulled in slightly rather than overriding the shared gap */
}

.phone__lang-tab {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-weight: var(--weight-medium); /* matches Figma; an explicit exception to the sitewide regular-weight default, per Elsa's review */
  font-size: 10px;
  line-height: 1.5;
  color: var(--color-beige);
  opacity: 0.5; /* new value — not one of the 0.6/0.1 opacities already used elsewhere in this component, flagging per Elsa's instructions */
  transition: opacity 0.2s ease;
}

.phone__lang-tab.is-active {
  opacity: 1;
}

.phone__lang-tab:focus-visible {
  /* Now genuinely keyboard-focusable (the mockup is no longer aria-hidden),
     so the muted opacity-only hover treatment isn't enough of a focus
     indicator on its own. */
  outline: 1px solid var(--color-beige);
  outline-offset: 3px;
}

.phone__lang-tab:not(.is-active):hover,
.phone__lang-tab:not(.is-active):focus-visible {
  opacity: 0.8;
}

.phone__prompt {
  margin: 0;
  /* No max-width here on purpose: the <br> in the markup already forces the
     exact 2-line break Figma shows. A 230px max-width (Figma's text-box
     width for the whole unbroken string) was narrower than "your first
     message." on its own, wrapping that line again into 3 lines total. */
  font-family: var(--font-serif);
  font-size: var(--font-size-phone-title);
  line-height: 1.1;
  color: var(--color-beige);
  text-align: center;
}

.phone__divider-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 100%;
}

.phone__divider-line {
  flex: 1;
  height: 1px;
  background: var(--color-beige-transparent);
}

.phone__divider-text {
  font-family: var(--font-sans);
  font-size: var(--font-size-phone-label);
  letter-spacing: 0.61px;
  text-transform: uppercase;
  color: var(--color-beige);
  opacity: 0.6;
  white-space: nowrap;
}

.phone__prompt-list {
  display: flex;
  flex-direction: column;
  align-items: center; /* centered, not left-aligned — corrected per Elsa's review */
  gap: 8px;
  width: 100%;
}

.phone__bubble {
  margin: 0;
  max-width: 85%; /* Figma's chat bubbles wrap onto multiple lines for longer text — nowrap only fit the old fixed 3-line demo content */
  padding: 10px 11px;
  background: var(--color-beige-transparent);
  border-radius: 10px 0 10px 10px; /* new value, not in original token list — rounded from Figma's 9.789px; top-right left sharp for the chat-tail shape */
  font-family: var(--font-sans);
  font-weight: var(--weight-regular); /* explicit — Figma specifies Inter Regular here */
  font-size: var(--font-size-phone-bubble);
  line-height: 1.5;
  color: var(--color-beige);
  text-align: left;
}

.phone__prompt-button {
  border: none;
  cursor: pointer;
  text-align: center; /* .phone__bubble defaults to left-aligned for the sent-message case; the tappable prompts read better centered, per Elsa's review */
  /* Entrance is staggered per-button (below); box-shadow keeps its own
     fast, non-staggered transition for hover/focus. */
  opacity: 0;
  transform: translateY(16px);
  transition: box-shadow 0.2s ease, opacity 0.5s ease, transform 0.5s ease;
}

.phone__prompt-button:hover,
.phone__prompt-button:focus-visible {
  box-shadow: inset 0 0 0 1px var(--color-beige);
}

/* Toggled by an IntersectionObserver in script.js on the shared
   #phone-prompt-list container — repeats every time the prompts scroll
   in/out of view (not a one-shot reveal), so scrolling away and back
   re-triggers it. Each button gets a slightly later delay than the last
   so they animate in one after another instead of all at once; hiding
   (class removed) has no delay, so they fade out together. */
.phone__prompt-list.is-visible .phone__prompt-button {
  opacity: 1;
  transform: translateY(0);
}

/* transition-delay (a lone shorthand) would apply to every transitionable
   property on the element, including box-shadow on hover — that's what
   was making hover feel delayed on buttons 2 and 3. Setting the full
   transition list per button instead keeps box-shadow's delay at 0
   always, only staggering opacity/transform. */
.phone__prompt-list.is-visible .phone__prompt-button:nth-child(1) {
  transition: box-shadow 0.2s ease, opacity 0.5s ease, transform 0.5s ease;
}

.phone__prompt-list.is-visible .phone__prompt-button:nth-child(2) {
  transition: box-shadow 0.2s ease, opacity 0.5s ease 0.12s, transform 0.5s ease 0.12s;
}

.phone__prompt-list.is-visible .phone__prompt-button:nth-child(3) {
  transition: box-shadow 0.2s ease, opacity 0.5s ease 0.24s, transform 0.5s ease 0.24s;
}

@media (prefers-reduced-motion: reduce) {
  .phone__prompt-button {
    opacity: 1;
    transform: none;
    transition: box-shadow 0.2s ease;
  }
}

.phone__conversation {
  display: flex;
  flex-direction: column;
  gap: 20px; /* Figma's 16px gap between message groups; opened up further, per Elsa's review, to match the larger conversation text */
  width: 100%;
}

.phone__message {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 94%; /* widened from 85%, per Elsa's review */
  animation: phone-message-in 0.35s ease;
}

@keyframes phone-message-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .phone__message {
    animation: none;
  }
}

.phone__message--user {
  align-self: flex-end;
  align-items: flex-end;
}

.phone__message--marta {
  align-self: flex-start;
  align-items: flex-start;
}

.phone__message--user .phone__bubble {
  max-width: 100%; /* constrained by .phone__message already */
  font-size: 15px; /* per Elsa's review */
}

.phone__message-label {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--font-size-phone-chat-label);
  letter-spacing: 0.75px;
  text-transform: uppercase;
  color: var(--color-beige);
  opacity: 0.6;
  white-space: nowrap;
}

.phone__marta-text {
  margin: 0;
  /* Plain text on the phone background, no bubble, no underline, no play
     icon, no translate/save actions — per Elsa's explicit visual spec,
     a deliberate simplification from the fuller Figma reference. */
  font-family: var(--font-serif);
  font-size: var(--font-size-phone-marta);
  line-height: 1.5;
  color: var(--color-beige);
  text-align: left;
}

.speak-bar {
  display: flex;
  align-items: flex-end;
  width: 100%;
}

.speak-bar__segment {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  height: 65px;
  padding: 5px 10px 10px;
  font-family: var(--font-sans);
  font-size: var(--font-size-phone-meta);
  letter-spacing: 0.75px;
  text-transform: uppercase;
  white-space: nowrap;
}

.speak-bar__segment--type {
  background: var(--color-beige);
  color: var(--color-blue);
  border-top-left-radius: 7px; /* new value, not in original token list — rounded from Figma's 6.526px */
}

.speak-bar__segment--end {
  background: var(--color-brown);
  color: black; /* Figma's literal fill, not the --color-black token (#1a1a1a) — flagging the mismatch, but the difference is imperceptible at 60% opacity and this size */
  border: none;
  border-top-right-radius: 7px;
  cursor: default;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.speak-bar__segment--end svg,
.speak-bar__segment--end span {
  /* Figma applies opacity-60 to the icon and text individually, not the
     segment — opacity on the whole segment was also dimming the brown
     background, which should stay fully opaque. */
  opacity: 0.6;
  transition: opacity 0.3s ease;
}

/* Active state: matches Figma's "Chat" reference (a live conversation),
   as opposed to the muted brown/60%-opacity look of the empty/welcome
   state ("Chat - Empty") built earlier — red background, full opacity,
   beige icon/text via currentColor. Toggled once a reply has fully
   arrived; clicking it while active resets the mockup. */
.speak-bar__segment--end.is-active {
  background: var(--color-black); /* was --color-red, which blended into the page background, per Elsa's review */
  color: var(--color-beige);
  cursor: pointer;
}

.speak-bar__segment--end:focus-visible {
  /* Only reachable when enabled (disabled buttons never receive focus), so
     no need to gate this on .is-active. */
  outline: 1px solid var(--color-beige);
  outline-offset: -4px;
}

.speak-bar__segment--end:disabled {
  cursor: default;
}

.speak-bar__segment--end.is-active svg,
.speak-bar__segment--end.is-active span {
  opacity: 1;
}

.speak-bar__segment--speak {
  position: relative;
  flex: 1.24; /* matches Figma's wider middle segment (126px vs 101px sides) */
  height: 86px;
  /* Figma top-anchors the FAB+label group (no padding) so it pokes up
     above the shared bottom line — the beige backdrop below is a separate,
     bottom-anchored layer (::before), not something this group sits inside. */
  padding: 0;
  justify-content: flex-start;
  gap: 10px;
}

.speak-bar__segment--speak::before {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 65px;
  background: var(--color-beige-transparent);
}

.speak-bar__fab {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 39px;
  height: 39px;
  background: var(--color-beige);
  border-radius: 50%;
}

.speak-bar__speak-label {
  position: relative;
  z-index: 1;
  font-size: var(--font-size-phone-label);
  color: var(--color-beige);
}

.bg-wordmark {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  width: 120vw; /* decreased slightly from 122vw, per Elsa's review */
  max-width: 2050px;
  transform: translate(calc(-50% + 3.8vw), -50%) scale(var(--scale-wordmark, 0.7));
  transform-origin: center;
  pointer-events: none;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .phone-frame-wrap,
  .bg-wordmark {
    transform: none !important;
  }
}

@media (max-width: 600px) {
  .page {
    padding-bottom: 45px; /* decreased another 15px, per Elsa's review — was 60px */
  }

  .nav__logo img {
    width: 60px; /* decreased from 79px, per Elsa's review — height follows via aspect-ratio */
    height: auto;
  }

  .phone-frame-wrap {
    width: min(280px, 78vw);
  }

  .phone__body,
  .phone__header {
    padding-left: 20px; /* mobile-only, per Elsa's review — base (desktop) stays 24px */
    padding-right: 20px;
  }

  .phone__prompt {
    /* Desktop's 28px, combined with the <br> forcing a break after "type",
       left "your first message." too wide for the narrower mobile card,
       wrapping onto a 3rd line. Sized down so it fits back on 2 — nudged
       back up slightly, per Elsa's review, now that mobile padding
       dropped to 20px and freed up a bit more width. */
    font-size: 22px;
  }

  .phone__message--user .phone__bubble {
    font-size: 14px; /* mobile-only, per Elsa's review — desktop stays 15px */
  }

  .phone__marta-text {
    font-size: 17px; /* mobile-only, per Elsa's review — desktop stays 19px */
  }

  .hero {
    gap: 32px;
    margin-top: 36px; /* decreased further on mobile, per Elsa's review — was 52px */
  }

  .phone-scene {
    margin-top: 0; /* increased 15px on mobile, per Elsa's review — was -15px */
  }

  .waitlist__label {
    white-space: normal;
  }
}

/* Tablet range: narrower than desktop's 96px gap between the nav and the
   hero heading looks better here, but not as tight as the 36px used below
   the 600px mobile breakpoint. */
@media (min-width: 601px) and (max-width: 1024px) {
  .hero {
    margin-top: 64px;
  }
}

/* Nav's stacked/centered layout gets its own, wider breakpoint — the nav
   content stops fitting on one row well before the 600px breakpoint above,
   so this needs to kick in earlier to avoid the in-between state where
   .nav__right would otherwise still be wrapping without the centering. */
@media (max-width: 900px) {
  .nav {
    padding-top: 20px;
  }

  .nav__inner {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
  }

  .nav__right {
    width: 100%;
    justify-content: center;
  }
}

/* Same width range (≤900px) covers both a portrait phone (~375px) and a
   landscape one (~650-900px) — the latter has plenty of room for the
   original/larger sizing to still fit on one line, so only portrait needs
   the more aggressive shrink. */
@media (max-width: 900px) and (orientation: landscape) {
  .nav__right {
    flex-wrap: nowrap;
  }

  .nav__link,
  .nav__cta {
    padding: 10px 14px;
    font-size: 13px;
  }
}

@media (max-width: 900px) and (orientation: portrait) {
  .nav {
    /* Narrower than the desktop clamp (~20.6px at this width) to claw back
       a bit more horizontal room for the one-line nav row below. */
    padding-left: 14px;
    padding-right: 14px;
  }

  .nav__right {
    /* Keep links + CTA on one line rather than letting the CTA wrap onto
       its own row below. */
    flex-wrap: nowrap;
    gap: 3px;
  }

  .phone-frame-wrap {
    width: min(270px, 74vw); /* increased back up from 240px, per Elsa's review */
  }
}

/* Narrow phone portrait only — a tablet in portrait (e.g. iPad, ~768-820px)
   has plenty of width and doesn't need sizing this aggressive; that range
   is handled separately below with the same sizing landscape already uses. */
@media (max-width: 600px) and (orientation: portrait) {
  .nav__link,
  .nav__cta {
    padding: 7px 10px;
    font-size: 12px; /* mobile-only adjustment, not a Figma value — sized back up from 10px, per Elsa's review, while still fitting one line */
    gap: 4px;
  }

  .nav__cta-icon {
    width: 16px;
    height: 13px;
  }

  .nav__link::after {
    /* Matches the 8px padding above — the desktop 20px inset would sit
       outside this much smaller pill. */
    left: 8px;
    right: 8px;
    bottom: 6px;
  }
}

/* Tablet portrait: too much width for the phone-portrait sizing above to
   make sense — uses the same larger sizing as landscape instead, per
   Elsa's review. */
@media (min-width: 601px) and (max-width: 900px) and (orientation: portrait) {
  .nav__link,
  .nav__cta {
    padding: 10px 14px;
    font-size: 13px;
  }
}