/* ============================================================
   HULP · Warm Editorial
   A premium personal-assistant service for Indian families.
   ============================================================ */

/* ---- Fonts ---- */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&family=Geist+Mono:wght@400;500&family=Archivo+Black&display=swap');

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  /* Surfaces — cool light paper */
  --canvas:        #F5F8FB;
  --surface:       #E9F1F8;
  --elevated:      #FFFFFF;
  --tint:          #D6E6F2;

  /* Ink / text */
  --ink:           #0A2030;
  --ink-2:         #39556A;
  --muted:         #566F7E;
  --inverse-bg:    #06283C;
  --inverse-text:  #EAF3F9;
  --inverse-muted: #9FB7C6;

  /* Accent: Hulp blue */
  --clay:          #004772;
  --clay-pressed:  #00344F;
  --clay-soft:     #D2E3F0;
  --clay-softer:   #E6F0F8;

  /* States (pill text meets AA on its soft bg) */
  --moss:          #1A6B54;
  --moss-soft:     #CDE9E0;
  --warning:       #8A5A06;
  --warning-soft:  #F6E6C8;
  --info:          #005A82;
  --info-soft:     #D2E7F4;

  /* Danger / error */
  --danger:        #A93123;
  --danger-soft:   #F6D9D4;

  /* Translucent accent wash (service-icon tiles on the dark band) + glow */
  --accent-wash:   rgba(74,134,184,0.20);
  --moss-glow:     color-mix(in srgb, var(--moss) 45%, transparent);

  /* Borders */
  --border-subtle: rgba(10,32,48,0.08);
  --border:        rgba(10,32,48,0.15);

  /* Radii */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-xl:  22px;
  --r-2xl: 28px;
  --r-pill: 999px;

  /* Shadows (cool-tinted) */
  --sh-sm:  0 1px 2px rgba(10,32,48,0.06), 0 1px 3px rgba(10,32,48,0.05);
  --sh-md:  0 6px 20px -6px rgba(10,32,48,0.12), 0 2px 6px rgba(10,32,48,0.06);
  --sh-lg:  0 28px 60px -20px rgba(10,32,48,0.28), 0 8px 20px -10px rgba(10,32,48,0.14);
  --sh-clay: 0 14px 34px -10px rgba(0,71,114,0.40);

  /* Type */
  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Themeable component tokens */
  --inverse-tint:     #0A3447;
  --accent-underline: var(--clay-soft);
  --nav-bg:           rgba(245,248,251,0.84);
  --nav-menu-bg:      rgba(245,248,251,0.97);
  --hero-glow-a:      var(--clay-soft);
  --hero-glow-b:      var(--clay-softer);
  --plan-featured-top: var(--clay-softer);
  --wordmark: #004772;   /* logo brand blue */
  /* category accents (how-it-works steps + mock dots) — deep on light (AA for the step number), vivid on dark */
  --c1: #1F6FA8; --c2: #0E7165; --c3: #277A4B; --c4: #9A6109;

  /* Layout */
  --maxw: 1180px;
  --gutter: 24px;
}

/* ============================================================
   THEMES — each redefines the token palette
   ============================================================ */

/* Dark mode — a faithful dark counterpart of the Hulp-blue light theme */
:root[data-theme="dark"] {
  --canvas: #08171F; --surface: #0E2531; --elevated: #143040; --tint: #1C3D4E;
  --ink: #E9F1F6; --ink-2: #B2C6D2; --muted: #88A1B0;
  --inverse-bg: #050F16; --inverse-text: #E9F1F6; --inverse-muted: #8DA3B2; --inverse-tint: #0C2230;
  /* brighter blue accent for legibility on dark; buttons use the darker --clay-pressed */
  --clay: #4F9BCB; --clay-pressed: #1F6FA8; --clay-soft: #CFE3F2; --clay-softer: #E6F0F8;
  --accent-underline: rgba(79,155,203,0.45);
  --wordmark: #FFFFFF;
  --c1: #5BA3D8; --c2: #3FBFB0; --c3: #6CC489; --c4: #E2A24E;
  /* glows/fills stay dark on the dark canvas */
  --hero-glow-a: rgba(0,71,114,0.34); --hero-glow-b: rgba(20,84,124,0.18);
  --plan-featured-top: color-mix(in srgb, var(--clay) 16%, var(--elevated));
  --accent-wash: rgba(79,155,203,0.20);
  /* state colors: light text on dark translucent tints */
  --moss: #6FB79A; --moss-soft: rgba(40,120,95,0.26);
  --warning: #E2A24E; --warning-soft: rgba(154,98,6,0.30);
  --info: #79BCE6; --info-soft: rgba(31,111,168,0.28);
  --danger: #E89684; --danger-soft: rgba(190,58,44,0.26);
  --border-subtle: rgba(233,241,246,0.10); --border: rgba(233,241,246,0.18);
  --sh-sm: 0 1px 2px rgba(0,0,0,0.30), 0 1px 3px rgba(0,0,0,0.24);
  --sh-md: 0 6px 20px -6px rgba(0,0,0,0.45), 0 2px 6px rgba(0,0,0,0.30);
  --sh-lg: 0 28px 60px -20px rgba(0,0,0,0.70), 0 8px 20px -10px rgba(0,0,0,0.45);
  --sh-clay: 0 14px 34px -10px rgba(0,71,114,0.55);
  --nav-bg: rgba(8,23,31,0.82); --nav-menu-bg: rgba(8,23,31,0.97);
}
/* dark: filled buttons use the darker blue so white labels clear AA (#fff on #1F6FA8 ≈ 4.6) */
:root[data-theme="dark"] .btn--primary,
:root[data-theme="dark"] .btn--clay,
:root[data-theme="dark"] .plan__badge { background: var(--clay-pressed); color: #fff; }
:root[data-theme="dark"] .btn--primary:hover,
:root[data-theme="dark"] .btn--clay:hover { background: #195C8C; }
/* dark: blue chips become dark tints with light text instead of pale stickers */
:root[data-theme="dark"] .pill--clay,
:root[data-theme="dark"] .wl-badge,
:root[data-theme="dark"] .toggle-save { background: rgba(79,155,203,0.20); color: #C5E2F4; }
:root[data-theme="dark"] .pricing__toggle button.is-active .toggle-save { background: rgba(197,226,244,0.16); color: #C5E2F4; }
/* dark: eyebrow uses the brighter accent so small mono text clears AA on the dark canvas */
:root[data-theme="dark"] .eyebrow { color: var(--clay); }

/* ============================================================
   RESET / BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }

body {
  margin: 0;
  font-family: var(--font-sans);
  background: var(--canvas);
  color: var(--ink);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

/* Subtle warm paper grain overlay */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
a, button, .btn, .faq-question, .theme-switch__btn { -webkit-tap-highlight-color: transparent; }

/* keyboard focus ring (not shown for mouse/touch) */
a:focus-visible, button:focus-visible, input:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--clay);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

h1, h2, h3, h4, h5 { margin: 0; font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; color: var(--ink); }
p { margin: 0; }

::selection { background: var(--clay-soft); color: var(--clay-pressed); }

/* ============================================================
   LAYOUT
   ============================================================ */
.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section { padding: 104px 0; position: relative; }

/* offset anchor jumps for the fixed nav */
[id] { scroll-margin-top: 88px; }

/* Eyebrow / mono label */
.eyebrow {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--clay-pressed);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.eyebrow::before {
  content: "";
  width: 14px; height: 1px;
  background: var(--clay);
  opacity: 0.7;
}
.eyebrow--center::before { display: none; }

/* Section header */
.section-header { max-width: 680px; margin: 0 0 56px; }
.section-header--center { margin-left: auto; margin-right: auto; text-align: center; }
.section-header h2 {
  font-size: clamp(2rem, 4.2vw, 3.1rem);
  margin: 18px 0 16px;
  letter-spacing: -0.035em;
}
.section-header p {
  font-size: 1.08rem;
  color: var(--ink-2);
  max-width: 560px;
}
.section-header--center p { margin-inline: auto; }

/* ============================================================
   WORDMARK
   ============================================================ */
/* App-matched wordmark: "hulp" in Archivo Black, theme-coloured */
.wordmark {
  font-family: 'Archivo Black', var(--font-sans);
  font-weight: 400;
  font-size: 1.46rem;
  letter-spacing: -0.03em;
  color: var(--wordmark);
  display: inline-flex;
  line-height: 1;
  user-select: none;
}
.wordmark--inverse { color: var(--inverse-text); }
/* Brand logo in the nav reads a touch larger than the wordmark default */
.nav__logo .wordmark { font-size: 1.78rem; }

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.005em;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  padding: 13px 24px;
  transition: transform .18s ease, box-shadow .25s ease, background .2s ease, color .2s ease;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }

.btn--primary {
  background: var(--inverse-bg);
  color: var(--inverse-text);
  box-shadow: var(--sh-md);
}
.btn--primary:hover { box-shadow: var(--sh-lg); transform: translateY(-2px); }

.btn--clay {
  background: var(--clay);
  color: #fff;
  box-shadow: var(--sh-clay);
}
.btn--clay:hover { background: var(--clay-pressed); transform: translateY(-2px); }

.btn--ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--border);
}
.btn--ghost:hover { background: var(--surface); border-color: var(--ink); }

.btn--lg { padding: 16px 30px; font-size: 1rem; }
.btn--sm { padding: 10px 18px; font-size: 0.88rem; }
.btn--block { width: 100%; }

.linkarrow {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  color: var(--ink);
  border-bottom: 1.5px solid transparent;
  padding-bottom: 2px;
  transition: border-color .2s ease, gap .2s ease;
}
.linkarrow:hover { border-color: var(--clay); gap: 11px; }

/* ============================================================
   NAVIGATION
   ============================================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  transition: background .3s ease, box-shadow .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
}
.nav--scrolled {
  background: var(--nav-bg);
  backdrop-filter: saturate(160%) blur(14px);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  border-bottom-color: var(--border-subtle);
  box-shadow: 0 1px 0 rgba(26,22,18,0.02);
}
.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 16px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav__links { display: flex; align-items: center; gap: 6px; }
.nav__link {
  font-size: 0.93rem;
  font-weight: 500;
  color: var(--ink-2);
  padding: 8px 14px;
  border-radius: var(--r-pill);
  transition: color .2s ease, background .2s ease;
}
.nav__link:hover { color: var(--ink); background: rgba(26,22,18,0.04); }
.nav__link--active { color: var(--ink); font-weight: 600; }
.nav__actions { display: flex; align-items: center; gap: 12px; }

.nav__mobile-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
}
.nav__mobile-toggle span {
  width: 22px; height: 2px;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease;
}
.nav__mobile-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__mobile-toggle.active span:nth-child(2) { opacity: 0; }
.nav__mobile-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.nav__mobile-menu {
  display: none;
  flex-direction: column;
  gap: 4px;
  padding: 8px var(--gutter) 28px;
  background: var(--nav-menu-bg);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-subtle);
}
.nav__mobile-menu.active { display: flex; }
.nav__mobile-menu .nav__link { padding: 16px 4px; font-size: 1.05rem; border-radius: 0; border-bottom: 1px solid var(--border-subtle); }
.nav__mobile-menu .btn { margin-top: 16px; justify-content: center; }

/* ---- Theme switch (segmented control) ---- */
.nav__right { display: flex; align-items: center; gap: 12px; }
.theme-switch {
  display: inline-flex;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-pill);
  padding: 3px;
  gap: 2px;
}
.theme-switch__btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: transparent;
  border: none;
  padding: 6px 11px;
  border-radius: var(--r-pill);
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.theme-switch__btn:hover { color: var(--ink); }
.theme-switch__btn[aria-pressed="true"] {
  background: var(--elevated);
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.theme-switch__icon { width: 15px; height: 15px; flex-shrink: 0; }
.theme-switch__label { line-height: 1; }

/* theme switch inside the mobile menu — labeled, full-width, declutters the top bar */
.nav__mobile-theme { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--border-subtle); }
.nav__mobile-theme-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}
.theme-switch--menu { display: flex; width: 100%; }
.theme-switch--menu .theme-switch__btn { flex: 1; justify-content: center; padding: 10px 8px; }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative;
  padding: 148px 0 96px;
  overflow: hidden;
}
.hero::after { /* warm tint field behind hero */
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(46% 60% at 88% 8%, var(--hero-glow-a) 0%, transparent 62%),
    radial-gradient(40% 50% at 6% 92%, var(--hero-glow-b) 0%, transparent 60%);
  opacity: 0.8;
  z-index: 0;
  pointer-events: none;
}
.hero__layout {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: start;
}
/* nudge the text column down so the headline optically centers against the card */
.hero__content { padding-top: 28px; }
.hero__headline {
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  letter-spacing: -0.04em;
  line-height: 1.02;
  margin: 22px 0 22px;
}
.hero__headline .accent { position: relative; white-space: nowrap; color: var(--ink); }
.hero__headline .accent::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.06em;
  height: 0.30em;
  background: var(--accent-underline);
  z-index: -1;
  border-radius: 2px;
}
.hero__sub {
  font-size: 1.18rem;
  color: var(--ink-2);
  max-width: 520px;
  margin-bottom: 34px;
}
.hero__actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }

.hero__proof {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 40px;
}
.avatars { display: flex; }
.avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  border: 2.5px solid var(--canvas);
  margin-left: -11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
  color: #fff;
}
.avatar:first-child { margin-left: 0; }
/* fixed blue-family trio — white initials stay legible in both modes */
.avatar--a { background: #004772; }
.avatar--b { background: #1A6B54; }
.avatar--c { background: #1F6FA8; }
.avatar--count {
  background: var(--tint);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 0.74rem;
}
.hero__proof-text { font-size: 0.92rem; color: var(--muted); max-width: 200px; line-height: 1.4; }

/* ---- Hero product visual ---- */
.hero__visual { position: relative; justify-self: center; width: 100%; max-width: 430px; }

/* ============================================================
   REFINEMENTS — video hero, PA pod, photo avatars, waitlist counter
   ============================================================ */
.hero__layout { align-items: center; }
.hero__content { padding-top: 0; }
.hero .app-demo { max-width: 330px; }

/* photo avatars (hero proof + waitlist foot) */
.avatars--photo .avatar--img {
  width: 40px; height: 40px; border-radius: 50%;
  border: 2.5px solid var(--canvas);
  margin-left: -12px; object-fit: cover; object-position: center 18%;
  background: var(--surface);
}
.avatars--photo .avatar--img:first-child { margin-left: 0; }
.hero__proof-text strong, .waitlist-cta__sub strong, .wl-spots strong {
  color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums;
}
.hero__proof-text { max-width: 280px; }

/* PA pod card */
.pod-card {
  background: var(--elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-2xl);
  padding: 24px 22px 16px;
  box-shadow: var(--sh-lg);
  width: 100%;
}
.pod-card__top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.pod-card__eyebrow { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.pod-card__status { display: inline-flex; align-items: center; gap: 7px; font-size: 0.8rem; font-weight: 600; color: var(--moss); }
.pod-card__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--moss); box-shadow: 0 0 0 3px var(--moss-soft); }
.pod-card__members { display: flex; justify-content: space-around; align-items: flex-end; gap: 6px; }
.pod-member { display: flex; flex-direction: column; align-items: center; gap: 7px; flex: 1; }
.pod-member__avatar { width: 62px; height: 62px; border-radius: 50%; overflow: hidden; border: 1.5px solid var(--border); background: var(--surface); }
.pod-member__avatar img { width: 100%; height: 132%; object-fit: cover; object-position: center top; display: block; }
.pod-member--lead .pod-member__avatar--lead { width: 84px; height: 84px; border: 3px solid var(--moss); box-shadow: 0 0 0 4px var(--moss-soft), var(--sh-md); }
.pod-member__name { font-weight: 700; font-size: 0.94rem; color: var(--ink); }
.pod-member--lead .pod-member__name { font-size: 1.02rem; }
.pod-member__role { font-family: var(--font-mono); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.pod-card__foot { display: flex; margin-top: 20px; border-top: 1px solid var(--border-subtle); padding-top: 4px; }
.pod-foot-btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 9px; padding: 12px 0; font-weight: 600; font-size: 0.92rem; color: var(--clay); }
.pod-foot-btn + .pod-foot-btn { border-left: 1px solid var(--border-subtle); }

/* live pulse — online dot + lead-PA green ring (evident in light AND dark) */
.pod-card__status { gap: 9px; }
.pod-card__dot {
  width: 9px; height: 9px;
  animation: podDotBlink 1.5s ease-in-out infinite, podDotRipple 1.7s ease-out infinite;
}
@keyframes podDotBlink { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.4); } }
@keyframes podDotRipple {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--moss) 60%, transparent); }
  75%  { box-shadow: 0 0 0 13px color-mix(in srgb, var(--moss) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--moss) 0%, transparent); }
}
.pod-member--lead .pod-member__avatar--lead {
  border-color: var(--moss);
  animation: podRingPulse 1.9s ease-in-out infinite;
}
@keyframes podRingPulse {
  0%   { box-shadow: 0 0 0 3px color-mix(in srgb, var(--moss) 70%, transparent), var(--sh-md); }
  70%  { box-shadow: 0 0 0 17px color-mix(in srgb, var(--moss) 0%, transparent), var(--sh-md); }
  100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--moss) 0%, transparent), var(--sh-md); }
}
@media (prefers-reduced-motion: reduce) {
  .pod-card__dot, .pod-member--lead .pod-member__avatar--lead { animation: none; }
}

/* Waitlist CTA section */
.waitlist-cta { background: var(--elevated); }
/* "How it works" takes the blue section tint; the waitlist goes white (above) for a clearer divide */
#how-it-works { background: var(--surface); }
.waitlist-cta__grid { display: grid; grid-template-columns: 1fr 0.92fr; gap: 56px; align-items: center; }
.waitlist-cta__copy h2 { font-size: clamp(2rem, 4vw, 2.9rem); letter-spacing: -0.035em; margin: 16px 0 14px; }
.waitlist-cta__sub { font-size: 1.1rem; color: var(--ink-2); margin-bottom: 24px; max-width: 460px; }
.waitlist-cta__form { justify-self: end; width: 100%; max-width: 446px; }

@media (max-width: 880px) {
  .hero__layout { grid-template-columns: 1fr; gap: 36px; }
  .hero .app-demo { max-width: 300px; }
  .waitlist-cta__grid { grid-template-columns: 1fr; gap: 32px; }
  .waitlist-cta__form { justify-self: stretch; }
}

/* Activity / "A day with Hulp" section */
.activity-sec__grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
/* Match the hero: copy in column 1, phone centered in column 2 */
.activity-sec__copy { grid-column: 1; grid-row: 1; max-width: 600px; }
.activity-sec__visual { grid-column: 2; grid-row: 1; justify-self: center; width: 100%; max-width: 330px; }
.activity-sec__copy h2 { font-size: clamp(1.9rem, 4vw, 3rem); letter-spacing: -0.035em; margin: 16px 0 14px; }
.activity-sec__copy p { font-size: 1.06rem; color: var(--ink-2); margin-bottom: 22px; max-width: 480px; }
.day-list { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.day-mini {
  display: flex; align-items: center; gap: 14px;
  background: var(--elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 13px 16px;
  box-shadow: var(--sh-sm);
}
.day-mini__time { font-family: var(--font-mono); font-size: 12px; color: var(--muted); width: 40px; flex-shrink: 0; }
.day-mini__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.day-mini__req { font-size: 0.96rem; font-weight: 600; color: var(--ink); }
.day-mini__res { font-size: 0.84rem; color: var(--muted); }
.day-mini .pill { flex-shrink: 0; }
@media (max-width: 880px) {
  .activity-sec__grid { grid-template-columns: 1fr; gap: 30px; }
  .activity-sec__copy { grid-column: 1; grid-row: auto; order: -1; }
  .activity-sec__visual { grid-column: 1; grid-row: auto; max-width: 300px; }
}

.app-shell {
  position: relative;
  z-index: 2;
  background: var(--elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-lg);
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.app-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 2px 4px 12px;
  border-bottom: 1px solid var(--border-subtle);
}
.app-topbar .wordmark { font-size: 1.18rem; }
.app-live {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--moss);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.app-live::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--moss);
  box-shadow: 0 0 0 0 var(--moss-glow);
  animation: pulse 2.2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 var(--moss-glow); }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* assistant bubble */
.app-bubble {
  background: var(--inverse-bg);
  color: var(--inverse-text);
  border-radius: 16px 16px 16px 5px;
  padding: 14px 16px;
  font-size: 0.92rem;
  line-height: 1.5;
  max-width: 92%;
}
.app-bubble__who {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--inverse-muted);
  display: block;
  margin-bottom: 6px;
}

/* request bundle card */
.bundle {
  background: var(--surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: 15px;
}
.bundle__eyebrow {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 4px;
}
.bundle__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}
.bundle__title { font-size: 1rem; font-weight: 700; }
.bundle__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-top: 1px solid var(--border-subtle);
}
.bundle__row:first-of-type { border-top: none; }
.dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.dot--moss { background: var(--moss); }
.dot--clay { background: var(--clay); }
.dot--warn { background: var(--warning); }
.dot--info { background: var(--info); }
.bundle__row-main { flex: 1; min-width: 0; }
.bundle__row-title { font-size: 0.88rem; font-weight: 600; }
.bundle__row-meta { font-size: 0.74rem; color: var(--muted); }
.bundle__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
  padding-top: 11px;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.74rem;
  color: var(--muted);
}
.bundle__open { color: var(--clay); font-weight: 600; }

/* status pill */
.pill {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 9px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.pill--moss { background: var(--moss-soft); color: var(--moss); }
.pill--clay { background: var(--clay-soft); color: var(--clay-pressed); }
.pill--warn { background: var(--warning-soft); color: var(--warning); }
.pill--info { background: var(--info-soft); color: var(--info); }
.pill--neutral { background: var(--tint); color: var(--ink-2); }

/* kept-items card (showcase right column) */
.keep-card {
  margin-top: 32px;
  background: var(--elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  padding: 18px 20px;
  max-width: 340px;
}
.keep-card__label {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 10px;
}
.keep-row { display: flex; align-items: center; gap: 10px; font-size: 0.88rem; color: var(--ink-2); padding: 5px 0; }
.keep-row svg { color: var(--moss); flex-shrink: 0; }

/* ============================================================
   PRODUCT SHOWCASE
   ============================================================ */
.showcase { background: var(--surface); }
.showcase__grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 56px;
  align-items: center;
}
/* Pod card on the left, copy on the right — same grid as the hero so the right
   column lines up with the hero video above. Copy is nudged to meet the video's
   left edge (the video is centered in its column, leaving a small inset). */
.showcase__visual { grid-column: 1; grid-row: 1; position: relative; width: 100%; max-width: 420px; justify-self: center; }
.showcase__text { grid-column: 2; grid-row: 1; padding-left: 40px; }
.app-demo { position: relative; width: 100%; max-width: 380px; margin: 0 auto; }
.app-demo__video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 30px;
  box-shadow: var(--sh-lg), 0 0 0 1px rgba(255,255,255,0.05);
}
/* The hero demo (webm) and Activity shot (png) are transparent — the phone
   carries its own frame + shadow, so drop the rectangular card shadow/radius. */
#appDemo, #activityShot { border-radius: 0; box-shadow: none; background: transparent; }
.showcase__text h2 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  letter-spacing: -0.035em;
  margin: 18px 0 18px;
}
.showcase__text p { font-size: 1.08rem; color: var(--ink-2); margin-bottom: 26px; max-width: 460px; }

/* ============================================================
   PROBLEM
   ============================================================ */
.problem { background: var(--surface); }
.problem__grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 56px;
  align-items: center;
}
.problem h2 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  letter-spacing: -0.035em;
}
.problem h2 em { font-style: normal; color: var(--clay); }
.problem p { font-size: 1.1rem; color: var(--ink-2); margin-top: 22px; max-width: 540px; }
.stat-block {
  background: var(--elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  padding: 40px 36px;
  box-shadow: var(--sh-md);
}
.stat-block__num {
  font-size: clamp(3.4rem, 8vw, 5rem);
  font-weight: 800;
  letter-spacing: -0.05em;
  color: var(--clay);
  line-height: 1;
}
.stat-block__label {
  font-family: var(--font-mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-top: 14px;
}
.stat-block__note { font-size: 0.92rem; color: var(--muted); margin-top: 18px; line-height: 1.5; }
.stat-weeks { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--border-subtle); }
.stat-weeks__bars { display: flex; gap: 8px; }
.stat-weeks__bar {
  flex: 1;
  height: 10px;
  border-radius: var(--r-pill);
  background: var(--tint);
}
.stat-weeks__bar.is-lost { background: var(--clay); }
.stat-weeks__cap {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: var(--ink-2);
  margin-top: 14px;
}

/* ============================================================
   HOW IT WORKS
   ============================================================ */
.hiw-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.hiw-step {
  background: var(--elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  padding: 28px 24px;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
}
/* connective flow between steps (desktop 4-col only) */
@media (min-width: 1025px) {
  .hiw-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 76px; right: -16px;
    width: 8px; height: 8px;
    border-top: 2px solid var(--muted);
    border-right: 2px solid var(--muted);
    transform: rotate(45deg);
    opacity: 0.5;
    z-index: 2;
  }
}
.hiw-step:hover { transform: translateY(-4px); box-shadow: var(--sh-md); }
.hiw-step__num {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--c, var(--clay));
  letter-spacing: 0.1em;
}
.hiw-step__icon {
  width: 46px; height: 46px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--c, var(--clay)) 16%, transparent);
  color: var(--c, var(--clay));
  display: flex; align-items: center; justify-content: center;
  margin: 16px 0 18px;
}
/* category accent per step */
.hiw-steps .hiw-step:nth-child(1) { --c: var(--c1); }
.hiw-steps .hiw-step:nth-child(2) { --c: var(--c2); }
.hiw-steps .hiw-step:nth-child(3) { --c: var(--c3); }
.hiw-steps .hiw-step:nth-child(4) { --c: var(--c4); }
.hiw-step__title { font-size: 1.12rem; margin-bottom: 10px; }
.hiw-step__desc { font-size: 0.93rem; color: var(--ink-2); }

/* ============================================================
   SERVICES
   ============================================================ */
.services { background: var(--inverse-bg); color: var(--inverse-text); }
.services .section-header h2 { color: var(--inverse-text); }
.services .section-header p { color: var(--inverse-muted); }
.services .eyebrow { color: var(--clay-soft); }
.services .eyebrow::before { background: var(--clay-soft); }

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(244,237,223,0.10);
  border: 1px solid rgba(244,237,223,0.10);
  border-radius: var(--r-xl);
  overflow: hidden;
}
.service {
  background: var(--inverse-bg);
  padding: 28px 24px;
  transition: background .25s ease;
}
.service:hover { background: var(--inverse-tint); }
.service__icon {
  width: 42px; height: 42px;
  border-radius: var(--r-md);
  background: color-mix(in srgb, var(--cat, #5BA3D8) 18%, transparent);
  color: var(--cat, #5BA3D8);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.service__icon svg { width: 22px; height: 22px; }
/* category colour variety — each service gets its own accent on the dark band */
.services-grid .service:nth-child(1) { --cat: #5BA3D8; } /* meals       — blue   */
.services-grid .service:nth-child(2) { --cat: #3FBFB0; } /* staff       — teal   */
.services-grid .service:nth-child(3) { --cat: #6CC489; } /* child       — green  */
.services-grid .service:nth-child(4) { --cat: #E2A24E; } /* travel      — amber  */
.services-grid .service:nth-child(5) { --cat: #EC8A72; } /* healthcare  — coral  */
.services-grid .service:nth-child(6) { --cat: #E27BAA; } /* payments    — pink   */
.services-grid .service:nth-child(7) { --cat: #A38BE6; } /* repairs     — violet */
.services-grid .service:nth-child(8) { --cat: #7C9AF0; } /* shopping    — indigo */
.service__num {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  color: var(--inverse-muted);
  float: right;
}
.service__title { font-size: 1.05rem; color: var(--inverse-text); margin-bottom: 9px; }
.service__desc { font-size: 0.86rem; color: var(--inverse-muted); line-height: 1.55; }

/* ============================================================
   A DAY WITH HULP
   ============================================================ */
.day-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.day-card {
  background: var(--elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  padding: 24px;
  box-shadow: var(--sh-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.day-card:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.day-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.day-card__time {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  color: var(--muted);
}
.day-card__req {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
  margin-bottom: 16px;
}
.day-card__result {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 0.9rem;
  color: var(--ink-2);
  padding-top: 14px;
  border-top: 1px solid var(--border-subtle);
}
.day-card__result svg { color: var(--moss); flex-shrink: 0; margin-top: 3px; }

/* ============================================================
   PRICING
   ============================================================ */
.pricing { background: var(--surface); }
.pricing__toggle-wrap { text-align: center; }
.pricing__toggle {
  display: inline-flex;
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 5px;
  margin: 0 auto 12px;
  gap: 4px;
}
.pricing__toggle button {
  border: none;
  background: transparent;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--ink-2);
  padding: 9px 22px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background .25s ease, color .25s ease;
}
.pricing__toggle button.is-active { background: var(--inverse-bg); color: var(--inverse-text); }
.toggle-save {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  background: var(--clay-soft);
  color: var(--clay-pressed);
  padding: 2px 7px;
  border-radius: var(--r-pill);
}
.pricing__toggle button.is-active .toggle-save { background: color-mix(in srgb, var(--clay-soft) 22%, transparent); color: var(--clay-soft); }

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  max-width: 880px;
  margin: 44px auto 0;
  align-items: stretch;
}
.plan {
  background: var(--elevated);
  border: 1px solid var(--border);
  border-radius: var(--r-2xl);
  padding: 36px 32px;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .25s ease, box-shadow .25s ease;
}
.plan--featured {
  border: 2px solid var(--clay);
  box-shadow: var(--sh-clay);
  background: linear-gradient(180deg, var(--plan-featured-top) 0%, var(--elevated) 22%);
}
.plan__badge {
  position: absolute;
  top: -13px; left: 32px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--clay);
  color: #fff;
  padding: 6px 13px;
  border-radius: var(--r-pill);
  box-shadow: var(--sh-clay);
}
.plan__name { font-size: 1.3rem; }
.plan__hours {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--clay);
  margin-top: 4px;
}
.plan__desc { font-size: 0.93rem; color: var(--ink-2); margin: 16px 0 24px; min-height: 44px; }
.plan__price { display: flex; align-items: baseline; gap: 6px; }
.plan__amount { font-size: 3rem; font-weight: 800; letter-spacing: -0.04em; color: var(--ink); }
.plan__per { font-size: 1rem; color: var(--muted); font-weight: 500; }
.plan__billing { font-size: 0.85rem; color: var(--muted); margin-top: 8px; min-height: 22px; }
.plan__cta { margin: 26px 0 24px; }
.plan__incl-label {
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.plan__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 11px; }
.plan__list li { display: flex; align-items: flex-start; gap: 10px; font-size: 0.9rem; color: var(--ink-2); }
.plan__list svg { color: var(--moss); flex-shrink: 0; margin-top: 3px; }

.pricing__note {
  text-align: center;
  font-size: 0.88rem;
  color: var(--muted);
  max-width: 540px;
  margin: 32px auto 0;
}

/* billing visibility (default annual) */
.show-monthly { display: none; }
.pricing[data-billing="monthly"] .show-monthly { display: inline; }
.pricing[data-billing="monthly"] .show-annual { display: none; }

/* ============================================================
   TRUST
   ============================================================ */
.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.trust-card {
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-xl);
  padding: 26px 24px;
  background: var(--elevated);
}
.trust-card__icon {
  width: 42px; height: 42px;
  border-radius: var(--r-md);
  background: var(--moss-soft);
  color: var(--moss);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 16px;
}
.trust-card h3 { font-size: 1.05rem; margin-bottom: 9px; }
.trust-card p { font-size: 0.9rem; color: var(--ink-2); }

/* ============================================================
   FAQ
   ============================================================ */
.faq { background: var(--surface); }
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-question {
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 24px 4px;
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--ink);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.faq-question svg { color: var(--clay); transition: transform .3s ease; flex-shrink: 0; }
.faq-item.open .faq-question svg { transform: rotate(180deg); }
.faq-question:active { background: var(--tint); }
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease, padding .35s ease;
  font-size: 0.98rem;
  color: var(--ink-2);
  line-height: 1.65;
}
.faq-item.open .faq-answer { max-height: 460px; padding: 0 4px 26px; }

/* ============================================================
   WAITLIST
   ============================================================ */
/* waitlist form, light (hero card) */
.waitlist-form { display: flex; flex-direction: column; gap: 12px; }
.waitlist-fields { display: flex; gap: 12px; flex-wrap: wrap; }
.waitlist-input {
  width: 100%;
  min-width: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 15px 16px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--ink);
  transition: border-color .2s ease, background .2s ease;
}
.waitlist-input::placeholder { color: var(--muted); }
.waitlist-input:focus { outline: none; border-color: var(--clay); background: var(--elevated); }
.waitlist-input.input--error { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }

.waitlist-phone-wrap { position: relative; display: flex; align-items: center; width: 100%; }
.waitlist-phone-prefix {
  position: absolute;
  left: 16px;
  font-size: 1rem;
  color: var(--muted);
  font-weight: 500;
  pointer-events: none;
}
.waitlist-input--phone { padding-left: 50px; }

.waitlist-error {
  font-size: 0.88rem;
  color: var(--danger);
  background: var(--danger-soft);
  border-radius: var(--r-sm);
  padding: 10px 14px;
}
.waitlist-success {
  display: none;
  align-items: center;
  gap: 9px;
  font-size: 0.92rem;
  color: var(--moss);
  background: var(--moss-soft);
  border-radius: var(--r-sm);
  padding: 12px 14px;
}
.waitlist-success.visible { display: flex; }

/* hero waitlist card */
.hero__form-wrap { justify-self: end; width: 100%; max-width: 446px; }
.waitlist-card {
  position: relative;
  background: var(--elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-2xl);
  box-shadow: var(--sh-lg);
  padding: 30px 30px 26px;
}
.waitlist-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}
.wl-badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--clay-pressed);
  background: var(--clay-soft);
  padding: 5px 11px 5px 9px;
  border-radius: var(--r-pill);
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.wl-badge__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--clay); }
.wl-spots {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}
.waitlist-card__title { font-size: 1.62rem; letter-spacing: -0.03em; line-height: 1.1; }
.waitlist-card__sub { font-size: 0.94rem; color: var(--ink-2); margin: 10px 0 22px; }

.wl-field { display: block; }
.wl-field__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}

.wl-perks {
  list-style: none;
  margin: 22px 0 0;
  padding: 22px 0 0;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.wl-perks li { display: flex; align-items: center; gap: 11px; font-size: 0.88rem; color: var(--ink-2); }
.wl-perks__ic {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--clay-soft);
  color: var(--clay-pressed);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.wl-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--border-subtle);
}
.wl-foot__text { font-size: 0.84rem; color: var(--muted); }

/* ============================================================
   STICKY MOBILE CTA
   ============================================================ */
.sticky-cta {
  display: none;
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 90;
  background: var(--elevated);
  border-top: 1px solid var(--border-subtle);
  box-shadow: 0 -10px 28px -12px rgba(0,0,0,0.10);
  padding: 10px 16px;
  padding-bottom: calc(10px + env(safe-area-inset-bottom));
  transform: translateY(110%);
  transition: transform .35s cubic-bezier(.2,.7,.3,1);
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  max-width: var(--maxw);
  margin: 0 auto;
}
.sticky-cta__text { display: flex; flex-direction: column; min-width: 0; flex: 1; line-height: 1.2; }
.sticky-cta__line1 { font-weight: 700; color: var(--ink); font-size: 0.94rem; }
.sticky-cta__line2 {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 3px;
}
.sticky-cta__btn { flex-shrink: 0; }
@media (max-width: 860px) { .sticky-cta { display: block; } }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--canvas); padding: 52px 0 32px; border-top: 1px solid var(--border-subtle); }
.footer__grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 32px;
  margin-bottom: 36px;
}
.footer__brand-desc { font-size: 0.92rem; color: var(--muted); max-width: 260px; margin-top: 14px; }
.footer__heading {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 16px;
}
.footer__link { display: block; font-size: 0.93rem; color: var(--ink-2); padding: 6px 0; transition: color .2s ease; }
.footer__link:hover { color: var(--clay); }
.footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 28px;
  border-top: 1px solid var(--border-subtle);
  font-size: 0.85rem;
  color: var(--muted);
  gap: 16px;
  flex-wrap: wrap;
}

/* ============================================================
   FADE-IN ANIMATIONS
   ============================================================ */
.fade-in { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.fade-in.visible { opacity: 1; transform: none; }
.fade-in-delay-1 { transition-delay: .08s; }
.fade-in-delay-2 { transition-delay: .16s; }
.fade-in-delay-3 { transition-delay: .24s; }
.fade-in-delay-4 { transition-delay: .32s; }

/* directional reveals for alternating image/text rows */
.fade-in-left, .fade-in-right {
  opacity: 0;
  transition: opacity .75s cubic-bezier(.2,.7,.3,1), transform .75s cubic-bezier(.2,.7,.3,1);
}
.fade-in-left  { transform: translateX(-30px); }
.fade-in-right { transform: translateX(30px); }
.fade-in-left.visible, .fade-in-right.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fade-in, .fade-in-left, .fade-in-right { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
  .app-live::before { animation: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1024px) {
  .hiw-steps { grid-template-columns: repeat(2, 1fr); }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .hero__layout { gap: 36px; }
}

@media (max-width: 860px) {
  .nav__links, .nav__cta, .nav__right .theme-switch { display: none; }
  .nav__mobile-toggle { display: flex; }

  /* tighter rhythm */
  .section { padding: 64px 0; }
  .hero { padding: 108px 0 56px; }
  .section-header { margin-bottom: 36px; }

  .hero__layout { grid-template-columns: 1fr; gap: 44px; }
  .hero__content { padding-top: 0; }
  .hero__sub { max-width: none; }
  .hero__form-wrap { justify-self: center; margin: 0 auto; }

  /* hero CTAs become ghost pill buttons for proper tap targets */
  .hero__actions { gap: 10px; flex-wrap: wrap; }
  .hero__actions .linkarrow {
    border: 1px solid var(--border);
    padding: 11px 18px;
    border-radius: var(--r-pill);
    font-size: 0.92rem;
  }
  .hero__actions .linkarrow:hover { border-color: var(--ink); background: var(--surface); gap: 7px; }

  /* waitlist card: drop bottom proof row, the hero proof above already covers it */
  .wl-foot { display: none; }
  .wl-perks { padding-bottom: 4px; }

  .showcase__grid { grid-template-columns: 1fr; gap: 36px; }
  .showcase__text { grid-column: 1; grid-row: auto; order: -1; padding-left: 0; }
  .showcase__visual { grid-column: 1; grid-row: auto; max-width: 380px; }

  /* vertical reveal on small screens, avoids horizontal shift */
  .fade-in-left, .fade-in-right { transform: translateY(22px); }

  .problem__grid { grid-template-columns: 1fr; gap: 32px; }
  .day-grid { grid-template-columns: 1fr; }
  .pricing-grid { grid-template-columns: 1fr; max-width: 460px; gap: 28px; }
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 560px) {
  :root { --gutter: 18px; }

  /* further tightening on phones */
  .section { padding: 56px 0; }
  .hero { padding: 96px 0 48px; }
  .section-header { margin-bottom: 28px; }

  /* thicker headline accent reads better on a phone */
  .hero__headline .accent::after { height: 0.36em; bottom: 0.04em; }

  /* larger billing save-chip for legibility/tap */
  .toggle-save { font-size: 0.66rem; padding: 3px 9px; }

  /* phones: single-column icon-left rows for text-heavy cards (readable, not cramped) */
  .hiw-steps { grid-template-columns: 1fr; }
  .services-grid, .trust-grid { grid-template-columns: 1fr; }

  .service, .trust-card {
    display: grid;
    grid-template-columns: 42px 1fr;
    column-gap: 14px;
    align-items: start;
    padding: 18px;
  }
  .service__num { display: none; }                /* drop decorative index on phones */
  .service__icon, .trust-card__icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: start;
    margin-bottom: 0;
  }
  .service__title, .trust-card h3 { grid-column: 2; margin-bottom: 4px; }
  .service__desc, .trust-card p { grid-column: 2; }
  .service__title { font-size: 1rem; }
  .service__desc { font-size: 0.86rem; }

  /* tighter showcase mock on mobile */
  .showcase__visual { max-width: 340px; }
  .app-shell { padding: 16px; }
  .keep-card { max-width: none; }

  /* tighter day cards (keep all 6 but denser) */
  .day-card { padding: 20px; }

  /* compact plan cards */
  .plan { padding: 28px 22px; }
  .plan__name { font-size: 1.2rem; }
  .plan__amount { font-size: 2.4rem; }
  .plan__list { gap: 9px; }
  .plan__list li { font-size: 0.86rem; }

  .waitlist-fields { flex-direction: column; }
  .waitlist-input, .waitlist-phone-wrap { min-width: 0; width: 100%; }

  /* drop the duplicate "120+ joined" in the card head (badge alone is enough) */
  .wl-spots { display: none; }

  /* tighter waitlist card on phones */
  .waitlist-card { padding: 26px 22px 22px; }
  .waitlist-card__title { font-size: 1.45rem; }

  .footer__grid { grid-template-columns: 1fr 1fr; gap: 28px 20px; }
  .footer__grid > :first-child { grid-column: 1 / -1; margin-bottom: 4px; }
  .footer__bottom { flex-direction: column; align-items: flex-start; gap: 8px; }

  /* leave room for the sticky CTA above the footer */
  .footer { padding-bottom: 96px; }
}

/* very narrow phones: services + trust fall back to 1 column */
@media (max-width: 370px) {
  .services-grid, .trust-grid { grid-template-columns: 1fr; }
}