/*! HTML5 Boilerplate v9.0.1 | MIT License | https://html5boilerplate.com/ */

/* main.css 3.0.0 | MIT License | https://github.com/h5bp/main.css#readme */
/*
 * What follows is the result of much research on cross-browser styling.
 * Credit left inline and big thanks to Nicolas Gallagher, Jonathan Neal,
 * Kroc Camen, and the H5BP dev community and team.
 */

/* ==========================================================================
   Base styles: opinionated defaults
   ========================================================================== */

html {
  color: #222;
  font-size: 1em;
  line-height: 1.4;
}

/*
 * Remove text-shadow in selection highlight:
 * https://twitter.com/miketaylr/status/12228805301
 *
 * Customize the background color to match your design.
 */

::-moz-selection {
  background: #b3d4fc;
  text-shadow: none;
}

::selection {
  background: #b3d4fc;
  text-shadow: none;
}

/*
 * A better looking default horizontal rule
 */

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

/*
 * Remove the gap between audio, canvas, iframes,
 * images, videos and the bottom of their containers:
 * https://github.com/h5bp/html5-boilerplate/issues/440
 */

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

/*
 * Remove default fieldset styles.
 */

fieldset {
  border: 0;
  margin: 0;
  padding: 0;
}

/*
 * Allow only vertical resizing of textareas.
 */

textarea {
  resize: vertical;
}

/* ==========================================================================
   Author's custom styles — Jarli marketing site
   ========================================================================== */

:root {
  --teal: #1B4F5C;
  --slate: #2D5986;
  --gold: #C49A3C;
  --gold-hover: #d2a94a;
  --sage: #7A9E8E;
  --offwhite: #F6F3EE;
  --lightgold: #F5EDD8;
  --charcoal: #2C2925;
  --card-border: #E8E2D6;
  --card: #FFFFFF;

  /* Dark surfaces. Two shades on purpose: --nearblack is the page-level dark band,
     --charcoal (above) is the app's real screen surface, so anything drawn as a phone
     sits on charcoal and the band behind it is near-black. --bezel is the app's darkest
     surface, used only for device frames. --muted-dark is the app's audited `mutedDark`
     (constants/colours.ts) — reuse it rather than inventing another grey. */
  --nearblack: #26231F;
  --bezel: #15130f;
  --muted-dark: #9d968a;

  /* Dark-surface card conventions, lifted from the product. */
  --glass: rgba(255, 255, 255, 0.05);
  --glass-border: rgba(255, 255, 255, 0.12);
  --glass-border-soft: rgba(255, 255, 255, 0.09);
  --gold-glass: rgba(196, 154, 60, 0.12);
  --sage-fill: rgba(122, 158, 142, 0.10);
  --control-border: rgba(255, 255, 255, 0.42);
  --font-display: 'Playfair Display', Georgia, serif;
  --font-body: 'Source Serif 4', Georgia, serif;
  --font-ui: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

html {
  scroll-behavior: smooth;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--offwhite);
  color: var(--charcoal);
  font-size: 16px;
  line-height: 1.4;
}

body {
  font-family: var(--font-body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

::selection {
  background: var(--lightgold);
  text-shadow: none;
}

img,
svg {
  vertical-align: middle;
}

h1, h2, h3 {
  text-wrap: pretty;
}

.container {
  max-width: 1160px;
  margin: 0 auto;
  padding-left: 40px;
  padding-right: 40px;
}

/* ---- Shared typography ---- */
.body {
  font-size: 19px;
  line-height: 1.75;
  margin: 0;
  color: var(--charcoal);
  text-wrap: pretty;
}

.body-strong {
  font-weight: 500;
}

.eyebrow {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
}

.eyebrow-gold {
  color: var(--gold);
}

.section-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 42px;
  line-height: 1.15;
  margin: 12px 0 16px 0;
}

.section-title-sm {
  font-size: 38px;
}

.section-title-light {
  color: var(--offwhite);
}

.section-head {
  margin-bottom: 64px;
}

.section-intro {
  font-size: 19px;
  line-height: 1.6;
  margin: 0;
  max-width: 620px;
  color: var(--charcoal);
  opacity: 0.85;
}

.section-intro-light {
  color: var(--offwhite);
  max-width: 600px;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ui);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  border: none;
  cursor: pointer;
  border-radius: 999px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}

.btn-gold {
  background: var(--gold);
  color: var(--charcoal);
}

.btn-gold:hover {
  background: var(--gold-hover);
}

/* Slate-blue solid button — the "Open Jarli" / launch-app action. */
.btn-blue {
  background: var(--slate);
  color: #fff;
}

.btn-blue:hover {
  background: #34659a;
}

.btn .arrow {
  font-size: 19px;
  line-height: 1;
}

.btn-nav {
  font-size: 15px;
  padding: 10px 20px;
}

.btn-nav:hover {
  transform: translateY(-2px);
}

.btn-lg {
  font-size: 17px;
  padding: 16px 32px;
  box-shadow: 0 10px 30px rgba(196, 154, 60, 0.35);
}

.btn-lg:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 36px rgba(196, 154, 60, 0.45);
}

.btn-md {
  font-size: 16px;
  padding: 14px 28px;
  box-shadow: 0 10px 26px rgba(196, 154, 60, 0.3);
}

.btn-md:hover {
  transform: translateY(-3px);
}

.btn-ghost {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  color: var(--slate);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
  border: 1.5px solid var(--slate);
  border-radius: 999px;
  padding: 10px 22px;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.btn-ghost:hover {
  background: var(--slate);
  color: var(--offwhite);
}

/* ---- Focus + skip link ----
   Most of the page is now a dark band, so make the focus ring explicit rather than
   trusting each browser's default to stay legible on #26231F and #2C2925. */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--gold);
  color: var(--charcoal);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
  padding: 12px 20px;
  border-radius: 0 0 10px 0;
  text-decoration: none;
}
.skip-link:focus {
  left: 0;
}

/* ---- Keyframes ---- */
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}
@keyframes drift {
  0%, 100% { transform: translateY(0) translateX(0); opacity: 0.5; }
  50% { transform: translateY(-22px) translateX(8px); opacity: 0.9; }
}
@keyframes dotPulse {
  0%, 100% { opacity: 0.25; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}
@keyframes wiggle {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-6deg); }
  75% { transform: rotate(6deg); }
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes chipIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ---- Typing dots ---- */
/* Gold, not teal: every typing indicator now sits inside a dark phone screen. */
.dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  animation: dotPulse 1.3s ease-in-out infinite;
}
.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }
.dot-sm { width: 5px; height: 5px; }

/* ============ 1. HERO ============ */
.hero {
  position: relative;
  overflow: hidden;
  background: var(--nearblack);
  color: var(--offwhite);
}

.hero .hex {
  position: absolute;
}
.hex-1 { top: 140px; left: 6%; animation: drift 7s ease-in-out infinite; }
.hex-2 { top: 420px; left: 12%; animation: drift 9s ease-in-out 1.2s infinite; }
.hex-3 { top: 120px; right: 8%; animation: drift 8s ease-in-out 0.6s infinite; }

.hero-glow {
  position: absolute;
  top: -180px;
  right: -180px;
  width: 560px;
  height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 154, 60, 0.14) 0%, rgba(196, 154, 60, 0) 70%);
}

.nav {
  max-width: 1160px;
  margin: 0 auto;
  padding: 26px 40px 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 2;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}

.brand-word {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.02em;
  color: var(--offwhite);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 32px;
  font-family: var(--font-ui);
  font-size: 15px;
}

.nav-link {
  color: var(--offwhite);
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.nav-link:hover { opacity: 1; }

.hero-grid {
  max-width: 1160px;
  margin: 0 auto;
  padding: 96px 40px 150px 40px;
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: 60px;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.hero-headline {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 60px;
  line-height: 1.12;
  margin: 0;
  color: var(--offwhite);
}

.hero-sub {
  font-size: 21px;
  line-height: 1.6;
  margin: 0;
  color: var(--offwhite);
  opacity: 0.88;
  max-width: 540px;
  text-wrap: pretty;
}

.hero-cta-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 8px;
}

.hero-note {
  font-family: var(--font-ui);
  font-size: 14px;
  opacity: 0.7;
}

/* ---- Hero phone: the Thread home screen ----
   Content classes only; the frame comes from .device / .device-hero. Sizes and
   colours track app/screens/tabs/Thread.tsx. */
.thread-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 18px;
}
.thread-brand {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 14px;
  color: var(--offwhite);
}
/* Muted grey in the app, not an accent link. */
.thread-past {
  margin-left: auto;
  font-family: var(--font-ui);
  font-size: 11px;
  color: rgba(246, 243, 238, 0.5);
}

.thread-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 15px;
  padding: 0 22px;
}
.thread-owl { animation: chipIn 0.6s ease 0.3s backwards; }
.thread-greet {
  margin: 0;
  font-family: var(--font-ui);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--offwhite);
  animation: chipIn 0.6s ease 0.5s backwards;
}

.thread-week {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(196, 154, 60, 0.45);
  animation: chipIn 0.6s ease 0.8s backwards;
}
.thread-week-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}
.thread-week-text {
  font-family: var(--font-ui);
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--offwhite);
}
.thread-week-chev {
  margin-left: auto;
  font-size: 12px;
  color: rgba(246, 243, 238, 0.4);
}

.thread-chips {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Neutral outline, NOT sage — the app comments these as "neutral outlined chips".
   Sage appears only on the hint suffix below. */
.thread-chip {
  align-self: flex-start;
  padding: 9px 14px;
  border-radius: 18px;
  border: 1px solid var(--control-border);
  font-family: var(--font-ui);
  font-size: 12.5px;
  color: var(--offwhite);
}
.thread-chip-hint {
  color: var(--sage);
  font-weight: 600;
}
.thread-chips .thread-chip:nth-child(1) { animation: chipIn 0.5s ease 1.1s backwards; }
.thread-chips .thread-chip:nth-child(2) { animation: chipIn 0.5s ease 1.35s backwards; }
.thread-chips .thread-chip:nth-child(3) { animation: chipIn 0.5s ease 1.6s backwards; }

.thread-tabs {
  display: flex;
  justify-content: center;
  gap: 40px;
  padding: 6px 0 16px 0;
}
.thread-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-family: var(--font-ui);
  font-size: 10px;
  color: rgba(246, 243, 238, 0.42);
}
.thread-tab.is-on {
  color: var(--sage);
  font-weight: 700;
}
.thread-tab-icon {
  font-size: 14px;
  line-height: 1;
}

.wave {
  display: block;
  width: 100%;
  height: 70px;
  margin-bottom: -1px;
}

/* ============ 1b. TWO DOORS ============ */
.two-doors {
  padding-top: 70px;
  padding-bottom: 10px;
}
.two-doors-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.door-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 34px 34px 30px 34px;
  text-decoration: none;
  color: var(--charcoal);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.door-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 44px rgba(27, 79, 92, 0.12);
}
.door-eyebrow {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--slate);
}
.door-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 27px;
  color: var(--teal);
}
.door-body {
  font-size: 16.5px;
  line-height: 1.65;
  margin: 0;
  opacity: 0.85;
  text-wrap: pretty;
}
.door-link {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
  /* Warm Gold on white is 2.6:1. This is the card's only affordance text, so it uses
     the darker gold that clears AA; the gold accent still reads as gold. */
  color: #8a6a1f;
  margin-top: 4px;
}

/* ============ 2. PROBLEM ============ */
.problem {
  padding-top: 90px;
  padding-bottom: 90px;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 80px;
  align-items: start;
}

.problem-copy {
  max-width: 660px;
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.problem-lead {
  font-family: var(--font-display);
  font-size: 34px;
  line-height: 1.35;
  margin: 0;
  text-wrap: pretty;
}

.problem-stats {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding-top: 10px;
}

.stat-tile {
  background: var(--lightgold);
  border-radius: 14px;
  padding: 24px 26px;
  transition: transform 0.25s ease;
}
.stat-tile:hover { transform: translateY(-4px); }

.stat-figure {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 42px;
  letter-spacing: -0.01em;
  color: var(--teal);
  display: block;
}

.stat-label {
  font-family: var(--font-ui);
  font-size: 14px;
  opacity: 0.75;
  line-height: 1.5;
  display: block;
  margin-top: 4px;
}

/* ============ 3. HOW IT WORKS ============ */
.how {
  background: var(--lightgold);
  position: relative;
}
.how .container {
  padding-top: 100px;
  padding-bottom: 100px;
}

.how-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}

.how-card {
  background: var(--offwhite);
  border-radius: 18px;
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.how-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(27, 79, 92, 0.12);
}

.how-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.how-icon-wiggle:hover { animation: wiggle 0.5s ease; }

.how-title {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 18px;
  margin: 0;
}

.how-body {
  font-size: 15.5px;
  line-height: 1.65;
  margin: 0;
  color: var(--charcoal);
  opacity: 0.85;
  text-wrap: pretty;
}

/* ============ 3b. THREE SURFACES ============ */
/* Charcoal, not near-black: this band is the app's own screen surface, so the phones
   sitting on it read as the same material. */
.surfaces {
  background: var(--charcoal);
  color: var(--offwhite);
  position: relative;
}
.surfaces .container {
  padding-top: 100px;
  padding-bottom: 90px;
}
/* auto-fit, not repeat(3, 1fr): the phones are a fixed 250px, so a 1fr column cannot
   shrink below them and three of them overflow anything narrower than ~900px — the
   band would break in the gap between the desktop layout and the 760px collapse.
   auto-fit drops to two columns and then one on its own. */
.surfaces-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 36px;
}
.surface {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.surface-copy {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.surface-title {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 17px;
}
.surface-title-thread { color: var(--sage); }
.surface-title-plan { color: var(--gold); }
.surface-title-profile { color: var(--offwhite); }
.surface-body {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.65;
  opacity: 0.85;
}
.surfaces-close {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 20px;
  line-height: 1.6;
  margin: 60px auto 0 auto;
  max-width: 620px;
  text-align: center;
  opacity: 0.9;
}

/* Shared dark-surface card: the pace/field/note tiles and the price cards are all
   the same primitive at different radii. */
.glass-card {
  background: var(--glass);
  border: 1px solid var(--glass-border-soft);
  border-radius: 11px;
}

/* ---- Mini-phone compaction: the base .device is 250px, so the Thread content
   written for the 312px hero needs a step down. ---- */
.device-mini .device-screen { padding: 18px 14px 12px 14px; gap: 10px; }
.device-mini .thread-head { padding: 0; }
.device-mini .thread-brand { font-size: 12px; }
.device-mini .thread-past { font-size: 9.5px; }
.device-mini .thread-body { padding: 0; gap: 11px; }
.device-mini .thread-greet { font-size: 16.5px; }
.device-mini .thread-chip { font-size: 11px; padding: 8px 12px; }
.device-mini .screen-input { padding: 0; }
.device-mini .screen-input-field { font-size: 11px; padding: 8px 12px; }

/* ---- Plan screen ---- */
.pl-screen {
  padding: 18px 16px 12px 16px;
  gap: 10px;
  font-family: var(--font-ui);
}
.pl-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  max-width: 100%;
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass);
  font-size: 10px;
  font-weight: 600;
  color: var(--offwhite);
  white-space: nowrap;
  overflow: hidden;
}
.pl-switch-chev { color: rgba(246, 243, 238, 0.45); }
.pl-greet {
  margin: 2px 0 4px 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--offwhite);
}
.pl-week {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 13px;
}
.pl-week-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sage);
}
.pl-week-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--offwhite);
}
.pl-week-meta {
  font-size: 10.5px;
  color: var(--muted-dark);
}
.pl-cta {
  align-self: flex-start;
  margin-top: 8px;
  padding: 7px 16px;
  border-radius: 999px;
  background: var(--gold);
  color: var(--charcoal);
  font-size: 11px;
  font-weight: 700;
}
.pl-ahead {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 4px;
}
.pl-ahead-title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(246, 243, 238, 0.75);
}
.pl-ahead-qual {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 10.5px;
  color: var(--muted-dark);
}
.pl-checkin {
  font-size: 10.5px;
  color: rgba(246, 243, 238, 0.6);
  padding-top: 10px;
  border-top: 1px solid var(--glass-border-soft);
}
.pl-progress {
  margin-top: auto;
  font-size: 11px;
  font-weight: 600;
  color: var(--sage);
}

/* ---- "What I remember" screen (behind Profile) ---- */
.rm-screen {
  padding: 18px 16px 12px 16px;
  gap: 8px;
  font-family: var(--font-ui);
}
.rm-back {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: var(--muted-dark);
}
.rm-title {
  margin: 2px 0 0 0;
  font-size: 18px;
  font-weight: 700;
  color: var(--offwhite);
}
.rm-intro {
  margin: 0 0 4px 0;
  font-size: 10.5px;
  line-height: 1.45;
  color: var(--muted-dark);
}
.rm-note {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 11px;
}
.rm-note-cat {
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--sage);
}
.rm-note-text {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--offwhite);
}
.rm-note-remove {
  align-self: flex-end;
  font-size: 9.5px;
  font-weight: 600;
  color: var(--gold);
}

/* ============ 4. DEMO CHAT ============ */
.demo {
  padding-top: 110px;
  padding-bottom: 30px;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 50px;
  align-items: center;
}

.demo-copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.demo-copy .body { max-width: 460px; opacity: 0.85; }

/* Segmented conversation toggle */
.chat-toggle {
  display: flex;
  gap: 8px;
  background: var(--lightgold);
  border-radius: 999px;
  padding: 5px;
  align-self: flex-start;
}
.chat-toggle-btn {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  border: none;
  border-radius: 999px;
  padding: 9px 20px;
  cursor: pointer;
  background: transparent;
  color: var(--charcoal);
  transition: background 0.2s ease, color 0.2s ease;
}
.chat-toggle-btn.is-active {
  background: var(--teal);
  color: var(--offwhite);
}

/* ---- Phone mockups (shared) --------------------------------------------------
   One frame, four sizes. Everything that differs between the hero phone, the three
   surface phones, this demo phone and the stores phone is a custom property, so the
   bezel and screen rules are written exactly once.

   All of them render the app's DARK theme now — that is what the app actually looks
   like — so the .screen-* chrome below is dark by default rather than carrying a
   light variant. Anything with a hard-coded charcoal-on-offwhite here was the old
   light-theme mockup.

   NOTE the inner radius tracks the outer via calc() so the corners stay concentric
   whatever size a modifier picks. */
.device {
  --dev-w: 250px;
  --dev-pad: 8px;
  --dev-r: 36px;
  --dev-screen-h: 460px;
  --dev-shadow: 0 24px 50px rgba(0, 0, 0, 0.45);

  justify-self: center;
  width: var(--dev-w);
  max-width: 100%;
  margin-inline: auto;
  background: var(--bezel);
  border-radius: var(--dev-r);
  padding: var(--dev-pad);
  box-shadow: var(--dev-shadow);
}
.device-screen {
  height: var(--dev-screen-h);
  border-radius: calc(var(--dev-r) - var(--dev-pad));
  background: var(--charcoal);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: var(--offwhite);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  /* THE SCROLL TRAP. A phone screen is a fixed-height box whose content overflows, so
     it is a scroll container: put a cursor or a finger over it and the wheel/swipe goes
     to the mockup instead of the page. `overscroll-behavior: contain` on .chat-body then
     stops the gesture chaining back out, so the page freezes entirely.
     This was previously fixed for touch only — @media (hover:none) and (pointer:coarse) —
     which left every desktop mouse trapped over the demo. It is not pointer-specific, so
     neither is the fix.
     Safe unconditionally because a mockup is a picture: every "button", "chip" and "tab"
     inside a phone is a span, and the only real controls (the demo's mode toggle and its
     replay button) live OUTSIDE the frame. The demo's JS auto-scroll is unaffected —
     scrollTo() does not need pointer events. */
  pointer-events: none;
}

.device-hero {
  --dev-w: 312px;
  --dev-pad: 10px;
  --dev-r: 44px;
  --dev-screen-h: 620px;
  --dev-shadow: 0 34px 80px rgba(0, 0, 0, 0.4);
  animation: floaty 8s ease-in-out infinite;
}
.device-demo {
  --dev-w: 330px;
  --dev-pad: 14px;
  --dev-r: 46px;
  --dev-screen-h: 560px;
  --dev-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
}
/* 486px = the old .phone's 510px outer height minus its 12px padding, so the stores
   phone keeps exactly the proportions it had. */
.device-stores {
  --dev-w: 250px;
  --dev-pad: 12px;
  --dev-r: 40px;
  --dev-screen-h: 486px;
  --dev-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
  animation: floaty 7s ease-in-out infinite;
}
/* .device-mini needs no modifier — it IS the base size. It is still written in the
   markup so all four read symmetrically. */

/* No notch rule here on purpose. The v6 design drew one, but a notch is the iPhone
   sensor housing, and Apple's marketing guidelines name it as a detail a generic
   device illustration must not carry. The frame reads fine without it. */

.chat-body {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* The bubble grammar is the product's: Jarli = gold outline, the user = sage outline
   over a 10% sage fill, both transparent-filled with cream text.
   These four class NAMES are built as string literals in js/app.js — the demo chat
   constructs them at runtime — so they can be re-themed but never renamed. */
.chat-msg {
  max-width: 82%;
  color: var(--offwhite);
  padding: 11px 14px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.5;
  animation: msgIn 0.35s ease;
}
.chat-msg-jarli {
  align-self: flex-start;
  border: 1px solid var(--gold);
  border-radius: 16px 16px 16px 5px;
}
.chat-msg-user {
  align-self: flex-end;
  border: 1px solid var(--sage);
  background: var(--sage-fill);
  border-radius: 16px 16px 5px 16px;
}
.chat-typing {
  align-self: flex-start;
  border: 1px solid var(--gold);
  border-radius: 16px 16px 16px 5px;
  padding: 12px 15px;
  display: flex;
  gap: 5px;
  align-items: center;
  animation: msgIn 0.25s ease;
}
.chat-typing .dot { width: 6px; height: 6px; }

/* Shared app-screen chrome: status bar, progress dots, input bar */
.screen-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 4px 20px;
  font-family: var(--font-ui);
}
.screen-time {
  font-size: 13px;
  font-weight: 700;
  color: var(--offwhite);
}
.screen-menu {
  font-size: 15px;
  color: rgba(246, 243, 238, 0.6);
  letter-spacing: 1px;
}
.screen-progress {
  display: flex;
  gap: 6px;
  justify-content: center;
  padding: 4px 0 8px 0;
}
.screen-progress span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--offwhite);
  opacity: 0.2;
}
.screen-progress .on {
  background: var(--sage);
  opacity: 1;
}
.screen-input {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 14px 14px;
}
.screen-input-field {
  flex: 1;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 20px;
  padding: 11px 16px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.45);
  white-space: nowrap;
  overflow: hidden;
}
/* Cream circle, teal glyph — the app's dark-theme send button, and one of the few
   places teal survives as an accent. */
.screen-send {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--offwhite);
  color: var(--teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  line-height: 1;
  flex-shrink: 0;
}

/* ============ 4b. WHEN LIFE CHANGES ============ */
.changes {
  background: var(--nearblack);
  color: var(--offwhite);
  position: relative;
  overflow: hidden;
}
.changes-hex {
  position: absolute;
  top: 80px;
  right: 8%;
  animation: drift 8s ease-in-out infinite;
}
.changes-grid {
  display: grid;
  /* minmax(0, …) on both tracks so neither can be forced wider than its share. */
  grid-template-columns: minmax(0, 1fr) minmax(0, 460px);
  gap: 70px;
  align-items: center;
  padding-top: 100px;
  padding-bottom: 100px;
  position: relative;
  z-index: 1;
}
.changes-copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.changes-copy .section-intro-light { max-width: 480px; }
.changes-bubbles {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 460px;
}
/* The bubble pair reuses the demo chat's classes rather than growing a second
   bubble vocabulary; only the size differs. */
.changes-bubbles .chat-msg {
  max-width: 100%;
  font-size: 14.5px;
  animation: none;
}
.changes-note {
  font-family: var(--font-body);
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  margin: 6px 0 0 0;
  opacity: 0.9;
}

.changes-receipt {
  justify-self: center;
  width: 100%;
  max-width: 430px;
}
.receipt {
  background: var(--charcoal);
  border: 1px solid var(--glass-border);
  border-radius: 22px;
  padding: 24px 22px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.35);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.receipt .chat-msg {
  max-width: 100%;
  font-size: 14px;
  animation: none;
}
.receipt-card {
  background: var(--glass);
  border: 1px solid var(--gold);
  border-radius: 14px;
  padding: 15px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.receipt-label {
  font-family: var(--font-ui);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gold);
}
.receipt-rows {
  display: flex;
  flex-direction: column;
  gap: 11px;
}
.receipt-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
/* The app labels these rows in plain UI type from a closed vocabulary — Situation,
   Circumstances, Timeline, Urgency, Time available, Constraints. Not monospace, and
   not dotted field paths: there are none. */
.receipt-field {
  font-family: var(--font-ui);
  font-size: 10.5px;
  color: var(--muted-dark);
}
/* nowrap + a flexible "after" cell, so a long new value wraps inside its own column
   instead of pushing the whole row and orphaning the arrow on the line above. */
.receipt-diff {
  display: flex;
  flex-wrap: nowrap;
  align-items: baseline;
  gap: 7px;
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.4;
}
.receipt-before {
  flex-shrink: 0;
  color: rgba(246, 243, 238, 0.45);
  text-decoration: line-through;
}
.receipt-arrow { flex-shrink: 0; }
.receipt-after { flex: 1; }
.receipt-arrow { color: var(--gold); }
.receipt-after {
  color: var(--offwhite);
  font-weight: 600;
}
.receipt-actions {
  display: flex;
  gap: 10px;
  margin-top: 1px;
}
.receipt-confirm {
  flex: 1;
  text-align: center;
  background: var(--sage);
  color: var(--charcoal);
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 13px;
  border-radius: 9px;
  padding: 9px 0;
}
.receipt-edit {
  flex: 0 0 auto;
  text-align: center;
  border: 1px solid rgba(246, 243, 238, 0.45);
  color: var(--offwhite);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 13px;
  border-radius: 9px;
  padding: 9px 22px;
}

/* ============ 5. GROUNDED ============ */
.grounded {
  padding-top: 80px;
  padding-bottom: 30px;
}

.grounded-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 24px;
  padding: 56px 56px 48px 56px;
  position: relative;
  overflow: hidden;
}

.grounded-glow {
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 154, 60, 0.1) 0%, rgba(196, 154, 60, 0) 70%);
}

.grounded-card .section-title { max-width: 640px; }
.grounded-intro {
  font-size: 18px;
  line-height: 1.7;
  margin: 0 0 40px 0;
  max-width: 620px;
  opacity: 0.85;
}

.grounded-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 40px;
}

.grounded-col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.grounded-col-title {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 16px;
  color: var(--teal);
}
.grounded-col-body {
  font-size: 15.5px;
  line-height: 1.65;
  margin: 0;
  opacity: 0.85;
  text-wrap: pretty;
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  border-top: 1px solid var(--card-border);
  padding-top: 28px;
}
.chips-label {
  font-family: var(--font-ui);
  font-size: 13px;
  opacity: 0.75;
  margin-right: 8px;
}
.chip {
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  background: var(--lightgold);
  border-radius: 999px;
  padding: 7px 14px;
}
.chip-check {
  background: transparent;
  /* Soft Sage as TEXT on white is 3.0:1 — fine for the border, not for the label. */
  color: #4a6b5c;
  border: 1.5px solid var(--sage);
  padding: 6px 14px;
}

/* ============ 6. NOT A SCORE ============ */
.not-score {
  padding-top: 70px;
  padding-bottom: 20px;
}
.not-score-inner {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
}
.not-score-quote {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: 500;
  font-size: 38px;
  line-height: 1.5;
  margin: 0;
  color: var(--teal);
  text-wrap: pretty;
}
.not-score-sub {
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
  opacity: 0.8;
  max-width: 520px;
  text-wrap: pretty;
}

/* ============ 7. WHO IT'S FOR ============ */
.who {
  padding-top: 110px;
  padding-bottom: 110px;
}
.who-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 32px;
}
.who-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 20px;
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.who-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 44px rgba(27, 79, 92, 0.12);
}
.who-quote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 21px;
  line-height: 1.5;
  margin: 0;
  color: var(--teal);
}
.who-body {
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
  opacity: 0.88;
  text-wrap: pretty;
}

/* ============ 7b. LEVEL UP (UPSKILLER) ============ */
.upskill {
  background: var(--lightgold);
}
.upskill .container {
  padding-top: 100px;
  padding-bottom: 100px;
}
.upskill .section-intro {
  max-width: 640px;
}
.upskill-states {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 56px;
}
.upskill-state {
  background: var(--offwhite);
  border-radius: 18px;
  padding: 32px 30px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.upskill-state-title {
  font-family: var(--font-ui);
  font-weight: 700;
  font-size: 17px;
  color: var(--teal);
}
.upskill-state-body {
  font-size: 16px;
  line-height: 1.7;
  margin: 0;
  opacity: 0.85;
  text-wrap: pretty;
}
.upskill-flow {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 56px;
  font-family: var(--font-ui);
}
.flow-pill {
  font-weight: 600;
  font-size: 15px;
  background: var(--teal);
  color: var(--offwhite);
  border-radius: 999px;
  padding: 10px 22px;
}
.flow-pill-end {
  background: var(--gold);
  color: var(--charcoal);
}
.flow-arrow {
  color: var(--gold);
  font-size: 18px;
}
.upskill-plans-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 26px;
  margin: 0 0 28px 0;
}
.upskill-plans {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.plan-card {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.plan-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 40px rgba(27, 79, 92, 0.1);
}
.plan-route {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 15px;
  color: var(--slate);
}
.plan-body {
  font-size: 15.5px;
  line-height: 1.65;
  margin: 0;
  opacity: 0.85;
  text-wrap: pretty;
}
.plan-tags {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}
.plan-tag {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 500;
  background: var(--lightgold);
  border-radius: 999px;
  padding: 5px 12px;
}

/* ============ 8. PRICING ============ */
.pricing {
  background: var(--nearblack);
  position: relative;
  overflow: hidden;
}
.pricing .container {
  padding-top: 100px;
  padding-bottom: 100px;
}
.pricing-hex {
  position: absolute;
  top: 80px;
  right: 7%;
  animation: drift 8s ease-in-out infinite;
}
.price-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  align-items: stretch;
  max-width: 720px;
  margin: 0 auto;
}
/* Dark glass on the near-black band, per the v6 dark-surface conventions: a 5%
   white fill over a 12% white hairline. The card CONTENT is unchanged — only the
   surface it sits on. */
.price-card {
  background: var(--glass);
  border: 1px solid var(--glass-border);
  color: var(--offwhite);
  border-radius: 20px;
  padding: 38px 34px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  transition: transform 0.25s ease;
}
.price-card:hover { transform: translateY(-6px); }

.price-card-featured {
  background: var(--gold-glass);
  border: 2px solid var(--gold);
  position: relative;
  transform: scale(1.03);
}
.price-card-featured:hover { transform: scale(1.03) translateY(-6px); }

.price-badge {
  position: absolute;
  top: -13px;
  left: 34px;
  background: var(--gold);
  color: var(--charcoal);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: 999px;
}
.price-tier {
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  /* Slate reads as a smudge on near-black; sage is the product's label colour on
     dark surfaces and clears contrast comfortably. */
  color: var(--sage);
}
.price-amount {
  display: flex;
  align-items: baseline;
  gap: 6px;
}
.price-num {
  font-family: var(--font-display);
  font-size: 46px;
}
.price-per {
  font-family: var(--font-ui);
  font-size: 15px;
  opacity: 0.7;
}
.price-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 16px;
  line-height: 1.5;
}
.feat {
  display: flex;
  gap: 10px;
}
.tick {
  color: var(--sage);
  font-weight: 600;
}
.price-foot {
  font-family: var(--font-ui);
  font-size: 14px;
  margin: auto 0 0 0;
  opacity: 0.7;
}

/* ============ 9. ABOUT ============ */
.about {
  padding-top: 100px;
  padding-bottom: 100px;
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 40px;
  align-items: start;
}
.about-owl {
  margin-top: 8px;
  animation: floaty 6s ease-in-out infinite;
}
.about-copy {
  max-width: 660px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ============ 10. APP STORES ============ */
.stores {
  background: var(--lightgold);
}
.stores-grid {
  padding-top: 90px;
  padding-bottom: 90px;
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 80px;
  align-items: center;
}
.stores-copy {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.stores-copy .body { max-width: 480px; opacity: 0.85; }

.badges {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
}
.badge {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--charcoal);
  color: var(--offwhite);
  border-radius: 10px;
  padding: 10px 18px;
  /* Never squeeze. Flex items shrink by default, and the stores section keeps its
     two-column layout down to 760px — so on a tablet the copy column got narrow
     enough to compress all three badges until "Android app" broke across two lines
     and each badge became three lines tall. With shrinking off they wrap to a new
     row instead, which is what .badges' flex-wrap is for. */
  flex-shrink: 0;
}
/* The not-yet-shipped ones read as quieter, but by de-saturating the SURFACE rather
   than by fading the whole element. The old `opacity: 0.55` dropped the label to
   3.4:1 — under AA for text a user has to read to know what is and isn't available. */
.badge-soon {
  background: #4a453e;
  color: var(--offwhite);
}
.badge-text {
  display: flex;
  flex-direction: column;
  font-family: var(--font-ui);
  line-height: 1.2;
}
/* A badge label is a fixed phrase; never let it break mid-phrase. */
.badge-small { font-size: 10px; white-space: nowrap; }
.badge-big { font-size: 16px; font-weight: 600; white-space: nowrap; }

/* LIVE badges link somewhere; the coming-soon ones do not. One shared affordance, one
   accent each, so the two live surfaces stay distinguishable at a glance.
   Both accents are MEASURED against --offwhite, because .badge-small is 10px — small text
   under WCAG, so it needs 4.5:1 and not the 3:1 large text gets away with. Slate is 6.58:1
   and teal 8.18:1. Gold would have been the obvious "primary" pick and is 2.36:1: it is a
   fill for charcoal text, never for off-white. */
.badge-web,
.badge-play {
  text-decoration: none;
  cursor: pointer;
}
.badge-web:hover,
.badge-play:hover { transform: translateY(-2px); }
.badge-web { background: var(--slate); }
.badge-play { background: var(--teal); }

.stores-copy .btn-md { align-self: flex-start; margin-top: 10px; }

/* Frame comes from .device / .device-stores; only the chat body and the compaction
   of the shared chrome are local to this phone. */
.phone-chat {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 10px 12px;
  overflow: hidden;
}
.phone-chat .chat-msg {
  font-size: 12px;
  max-width: 90%;
  padding: 8px 11px;
  line-height: 1.45;
}
.device-stores .screen-status { padding: 14px 16px 2px 16px; }
.device-stores .screen-time { font-size: 12px; }
.device-stores .screen-menu { font-size: 14px; }
.device-stores .screen-input { padding: 6px 10px 12px 10px; gap: 8px; }
.device-stores .screen-input-field { font-size: 11px; padding: 9px 12px; }
.device-stores .screen-send { width: 34px; height: 34px; font-size: 15px; }

/* ============ 11. WAITLIST / FOOTER ============ */
.waitlist {
  background: var(--nearblack);
  color: var(--offwhite);
  position: relative;
  overflow: hidden;
}
.waitlist .container {
  padding-top: 100px;
  padding-bottom: 60px;
}
.waitlist-hex {
  position: absolute;
  top: 90px;
  right: 12%;
  animation: drift 8s ease-in-out infinite;
}
.waitlist-copy {
  max-width: 580px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.waitlist-copy .body { color: var(--offwhite); opacity: 0.85; }

.waitlist-success {
  background: var(--sage);
  color: var(--charcoal);
  border-radius: 12px;
  padding: 18px 22px;
  font-family: var(--font-ui);
  font-size: 16px;
}

.waitlist-form {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 6px;
}
.waitlist-input {
  flex: 1;
  font-family: var(--font-ui);
  font-size: 16px;
  padding: 14px 16px;
  border-radius: 10px;
  border: 1px solid rgba(246, 243, 238, 0.3);
  background: rgba(246, 243, 238, 0.08);
  color: var(--offwhite);
  outline: none;
  transition: border-color 0.2s ease;
}
.waitlist-input::placeholder { color: rgba(246, 243, 238, 0.6); }
.waitlist-input:focus { border-color: var(--gold); }
.waitlist-input-email { flex: 1.4; }
/* Message field: full-width row of its own, below name + email. */
.waitlist-textarea { flex: 0 0 100%; min-height: 104px; line-height: 1.5; resize: vertical; }
.waitlist-turnstile { flex: 0 0 100%; min-height: 65px; }
.waitlist-form .btn { padding: 14px 28px; font-size: 16px; }
.waitlist-form .btn:hover { transform: translateY(-2px); }
.waitlist-form .btn:disabled { background: var(--gold); cursor: default; transform: none; }

.waitlist-hp {
  display: none;
}

.waitlist-error {
  font-family: var(--font-ui);
  font-size: 14px;
  line-height: 1.6;
  margin: 12px 0 0 0;
  color: var(--lightgold);
}
.waitlist-error a {
  color: var(--gold);
  text-decoration: underline;
}

.footer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 90px;
  padding-top: 28px;
  border-top: 1px solid rgba(246, 243, 238, 0.15);
}
.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.footer-tagline {
  font-family: var(--font-ui);
  font-size: 14px;
  opacity: 0.7;
}
.footer-meta {
  display: flex;
  align-items: center;
  gap: 22px;
}
.footer-email,
.footer-link {
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--offwhite);
  text-decoration: none;
  opacity: 0.7;
  transition: opacity 0.2s ease, color 0.2s ease;
}
.footer-email:hover,
.footer-link:hover {
  opacity: 1;
  color: var(--gold);
}
.footer-copy {
  font-family: var(--font-ui);
  font-size: 13px;
  opacity: 0.5;
}
/* Trademark attribution for referential use of the Google Play name. Same treatment as
   .footer-copy, and 0.5 is the floor rather than a taste call: off-white at 0.5 over
   --nearblack composites to #8e8b87, which is 4.61:1 — just over AA for 13px text. Any
   fainter and a legal line stops being legible, which defeats the point of carrying it. */
.footer-trademark {
  font-family: var(--font-ui);
  font-size: 13px;
  opacity: 0.5;
  margin-top: 18px;
}

/* ---- Scroll reveal ---- */
.reveal-init {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-in {
  opacity: 1;
  transform: translateY(0);
}

/* ============ RESPONSIVE (mobile < 760px) ============ */
@media (max-width: 760px) {
  .container { padding-left: 20px; padding-right: 20px; }
  .nav { padding-left: 20px; padding-right: 20px; }
  .nav-links { gap: 0; }
  .nav-link { display: none; }
  /* Nav CTAs don't fit beside the brand on narrow screens — the waitlist/web
     CTAs live in the hero and stores sections instead. */
  .btn-nav { display: none; }

  .section-title { font-size: 30px; }
  .section-title-sm { font-size: 28px; }
  .not-score-quote { font-size: 28px; }
  .section-head { margin-bottom: 48px; }

  /* minmax(0, …) on every stacked track, NOT plain 1fr. A 1fr track has an automatic
     minimum of min-content, so it cannot shrink below a fixed-width child — which is
     what pushed the document wider than the viewport at 320px. With the track free to
     shrink, .device's own `max-width: 100%` does the rest: each phone keeps its desktop
     width and sits centred with page gutters, and only narrows on viewports too small
     to hold it. Do NOT "fix" this by making the frames fluid — that stretches a phone
     to the full column and the proportions stop reading as a phone. */
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    gap: 40px;
    padding: 72px 20px 120px 20px;
  }
  .hero-headline { font-size: 40px; }
  .device-hero { --dev-screen-h: 560px; }

  .problem {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .how-grid { grid-template-columns: minmax(0, 1fr); }

  .demo {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    justify-items: center;
  }

  .surfaces-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .surfaces-close { margin-top: 40px; }

  .changes-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }
  .changes-bubbles { max-width: 100%; }
  .receipt { padding: 20px 16px; }
  /* Too narrow to keep before → after on one line; give the new value its own row. */
  .receipt-diff { flex-wrap: wrap; }
  .receipt-after { flex: 1 1 100%; }

  .grounded-card { padding: 32px 24px; }
  .grounded-cols { grid-template-columns: 1fr; }

  .who-grid { grid-template-columns: 1fr; }
  .two-doors-grid { grid-template-columns: 1fr; }
  .upskill-states { grid-template-columns: 1fr; }
  .upskill-plans { grid-template-columns: 1fr; }
  .price-grid { grid-template-columns: 1fr; }
  .price-card-featured,
  .price-card-featured:hover { transform: none; }

  .about {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .stores-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }


  .footer-bar {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
}

/* The nav is fluid below 1160px but the section layout only collapses at 760, so there is
   a band in between where five links plus the brand and the CTA run out of room and wrap
   into the wordmark. Drop the links early — the CTA is the only one that has to survive,
   and every destination is still reachable by scrolling. */
@media (max-width: 1000px) {
  .nav-link { display: none; }
}

/* Narrow phones: shrink the longest CTA so it stays on one line */
@media (max-width: 360px) {
  .stores-copy .btn-md {
    font-size: 14px;
    padding: 12px 22px;
  }
}

/* (see the .device-screen pointer-events rule in section 4 — the scroll trap is fixed
   for every pointer type, not only coarse ones) */

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    /* Collapsing duration alone is not enough. `chipIn` is authored with a delay and
       `backwards` fill, so the element renders at its `from` state (opacity 0) for the
       whole delay — a flash of invisible content on exactly the machines that asked for
       less motion. Same for the reveal transitions, whose delay app.js sets inline. */
    animation-delay: 0s !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   Helper classes
   ========================================================================== */

/*
 * Hide visually and from screen readers
 */

.hidden,
[hidden] {
  display: none !important;
}

/*
 * Hide only visually, but have it available for screen readers:
 * https://snook.ca/archives/html_and_css/hiding-content-for-accessibility
 *
 * 1. For long content, line feeds are not interpreted as spaces and small width
 *    causes content to wrap 1 word per line:
 *    https://medium.com/@jessebeach/beware-smushed-off-screen-accessible-text-5952a4c2cbfe
 */

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

/*
 * Extends the .visually-hidden class to allow the element
 * to be focusable when navigated to via the keyboard:
 * https://www.drupal.org/node/897638
 */

.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  white-space: inherit;
  width: auto;
}

/*
 * Hide visually and from screen readers, but maintain layout
 */

.invisible {
  visibility: hidden;
}

/*
 * Clearfix: contain floats
 *
 * The use of `table` rather than `block` is only necessary if using
 * `::before` to contain the top-margins of child elements.
 */

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}

.clearfix::after {
  clear: both;
}

/* ==========================================================================
   EXAMPLE Media Queries for Responsive Design.
   These examples override the primary ('mobile first') styles.
   Modify as content requires.
   ========================================================================== */

@media only screen and (min-width: 35em) {
  /* Style adjustments for viewports that meet the condition */
}

@media print,
  (-webkit-min-device-pixel-ratio: 1.25),
  (min-resolution: 1.25dppx),
  (min-resolution: 120dpi) {
  /* Style adjustments for high resolution devices */
}

/* ==========================================================================
   Print styles.
   Inlined to avoid the additional HTTP request:
   https://www.phpied.com/delay-loading-your-print-css/
   ========================================================================== */

@media print {
  *,
  *::before,
  *::after {
    background: #fff !important;
    color: #000 !important;
    /* Black prints faster */
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
  a:visited {
    text-decoration: underline;
  }

  a[href]::after {
    content: " (" attr(href) ")";
  }

  abbr[title]::after {
    content: " (" attr(title) ")";
  }

  /*
   * Don't show links that are fragment identifiers,
   * or use the `javascript:` pseudo protocol
   */
  a[href^="#"]::after,
  a[href^="javascript:"]::after {
    content: "";
  }

  pre {
    white-space: pre-wrap !important;
  }

  pre,
  blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  tr,
  img {
    page-break-inside: avoid;
  }

  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
  h3 {
    page-break-after: avoid;
  }
}

/* Subscription facts under the pricing grid (currency, renewal, cancellation, seller).
   Centred beneath both cards rather than inside one — it applies to the paid tier but reads as
   a footnote to the section. Kept small and low-contrast so it informs without competing with
   the cards. See the comment in index.html for why the wording must not drift from the Terms. */
.price-terms {
  margin: 28px auto 0;
  max-width: 640px;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 14px;
  opacity: 0.7;
}