/* ==========================================================================
   Catwise Landing Page — Base shell (ticket 1a-w0-05)
   Brand strip, footer, sticky CTA bar, page container, reduced-motion guard.
   All values pull from tokens.css custom properties (no magic numbers).
   ========================================================================== */

/* --------------------------------------------------------------------------
   Reset + base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

html {
  -webkit-text-size-adjust: 100%;
  background-color: var(--color-background);
}

/* Prevent horizontal scroll from rotated patchwork / sticky visuals.
   Use `clip` on body only — `overflow: hidden` on html/body creates a
   scroll container which breaks `position: sticky` in Safari/Firefox. */
body { overflow-x: clip; }

body {
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  line-height: var(--leading-normal);
  color: var(--color-on-background);
  background-color: var(--color-background);
  /* Clear sticky CTA bar so footer content is never occluded. */
  padding-bottom: var(--space-3xl);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
}

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

/* --------------------------------------------------------------------------
   Page container — mobile-first, max 720px (per spec §1.2)
   -------------------------------------------------------------------------- */
.brand-strip__inner,
.page-main,
.site-footer__inner,
.sticky-cta__inner {
  width: 100%;
  max-width: 720px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
}

/* --------------------------------------------------------------------------
   Brand lockup (icon + Fredoka wordmark)
   Used in brand strip, footer, and (later) modal header — per spec §2.2.
   -------------------------------------------------------------------------- */
.brand-lockup {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.brand-lockup__icon {
  display: block;
  flex-shrink: 0;
}

.brand-lockup__icon--40 {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}

.brand-lockup__icon--32 {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.brand-lockup__wordmark {
  font-family: var(--font-display);
  font-weight: var(--weight-regular); /* Fredoka One ships at single weight */
  font-size: var(--text-title-lg);
  line-height: var(--leading-tight);
  color: var(--color-primary);
  letter-spacing: var(--tracking-normal);
}

/* --------------------------------------------------------------------------
   Brand strip (top of page; cream bg, no nav)
   -------------------------------------------------------------------------- */
.brand-strip {
  background-color: var(--color-background);
  border-bottom: 1px solid var(--color-border);
}

.brand-strip__inner {
  display: flex;
  align-items: center;
  min-height: var(--space-3xl);
  padding-top: var(--space-md);
  padding-bottom: var(--space-md);
}

/* --------------------------------------------------------------------------
   Main placeholder
   -------------------------------------------------------------------------- */
.page-main {
  /* Wave 1 fills this in. Intentionally empty for now. */
  min-height: var(--space-3xl);
}

/* --------------------------------------------------------------------------
   Footer — cream, contains ONLY: logo lockup + tagline + copyright + privacy
   link + contact email (per spec §9.2, AC-FT1).
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--color-background);
  border-top: 1px solid var(--color-border);
  /* 120px bottom padding to clear the sticky CTA bar — composed from tokens. */
  padding-bottom: calc(var(--space-3xl) + var(--space-3xl) + var(--space-xl));
  padding-top: var(--space-xl);
}

.site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
}

.brand-lockup--footer .brand-lockup__wordmark {
  font-size: var(--text-title-md);
}

.site-footer__tagline {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-normal);
  color: var(--color-on-background);
}

.site-footer__meta {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--color-muted);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.site-footer__sep {
  color: var(--color-muted);
}

.site-footer__link {
  color: var(--color-muted);
  text-decoration: underline;
  text-decoration-color: var(--color-border);
  text-underline-offset: 2px;
  transition: color var(--transition-fast);
}

.site-footer__link:hover,
.site-footer__link:focus-visible {
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   Sticky CTA bar — fixed bottom, full-width, blurred cream backdrop.
   HIDDEN by default via [data-hidden="true"]. Hero has its own inline
   sticky CTA anchor; this bar is reserved for scroll-triggered reveal
   in a later ticket (w2-05). Keep hidden on first paint to avoid two
   sticky CTAs on mobile.
   -------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-sticky);
  background-color: color-mix(in srgb, var(--color-background) 85%, transparent);
  -webkit-backdrop-filter: blur(var(--blur-backdrop));
  backdrop-filter: blur(var(--blur-backdrop));
  border-top: 1px solid var(--color-border);
  padding-top: var(--space-md);
  padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom));
  transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.sticky-cta[data-hidden="true"] {
  opacity: 0;
  pointer-events: none;
  transform: translateY(100%);
}

/* Mobile: sticky CTA bar is the ONE persistent CTA. Hero's inline CTA is
   hidden below (see .lp-hero__cta-anchor rule) and the sticky bar is shown
   from page load regardless of scroll position. */
@media (max-width: 719px) {
  .lp-hero__cta-anchor { display: none; }
  .sticky-cta[data-hidden="true"] {
    opacity: 1;
    pointer-events: auto;
    transform: none;
  }
}

.sticky-cta__inner {
  display: flex;
  align-items: center;
  justify-content: stretch;
  gap: var(--space-md);
}

.sticky-cta__lead-in {
  display: none; /* mobile: hidden — spec §1.3 ("Desktop adds…") */
  font-family: var(--font-display);
  font-size: var(--text-title-md);
  line-height: var(--leading-snug);
  color: var(--color-on-background);
}

.sticky-cta__button {
  flex: 1 1 auto;
  min-height: var(--space-3xl); /* 48px = AppSpacing.xxxl */
}

/* --------------------------------------------------------------------------
   Primary button (used by sticky CTA; consumed by future modal/hero tickets).
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  border: none;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-label-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  cursor: pointer;
  transition: background-color var(--transition-fast), transform var(--transition-fast);
  padding: var(--space-md) var(--space-xl);
}

.btn--primary {
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-sticker);
}

.btn--primary:hover {
  background-color: var(--color-primary-dark);
}

.btn--primary:focus-visible {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 2px;
}

.btn--primary:active {
  transform: translateY(1px);
  box-shadow: var(--shadow-none);
}

/* Prototype primary button — .btn-primary (single class) used in hero CTA
   anchor, CTA block, sticky bar. Same visual spec as .btn.btn--primary
   but with a full-width default. */
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  min-height: var(--space-3xl);
  border: none;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-label-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  cursor: pointer;
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  box-shadow: var(--shadow-sticker);
  padding: var(--space-md) var(--space-xl);
  transition: background-color var(--transition-fast), transform var(--transition-fast);
}
.btn-primary:hover { background-color: var(--color-primary-dark); }
.btn-primary:focus-visible { outline: 2px solid var(--color-primary-dark); outline-offset: 2px; }
.btn-primary:active { transform: translateY(1px); box-shadow: var(--shadow-none); }

/* --------------------------------------------------------------------------
   Signup Modal (ticket 1a-w2-01)
   Mobile (<760px): bottom-sheet. Desktop (>=760px): centered overlay.
   Hidden by default via [data-hidden="true"] on .modal-host.
   -------------------------------------------------------------------------- */
.modal-host {
  position: fixed;
  inset: 0;
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-end;          /* mobile default: bottom-sheet anchor */
  justify-content: center;
  pointer-events: auto;
}

.modal-host[data-hidden="true"] {
  display: none;
  pointer-events: none;
}

/* Body scroll lock (iOS Safari-safe pattern):
   JS captures window.scrollY, sets body.top = -scrollY, then this class
   pins the body so the page cannot scroll behind the modal. */
body.modal-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}

/* Backdrop */
.modal-backdrop {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(var(--blur-backdrop));
  backdrop-filter: blur(var(--blur-backdrop));
  z-index: var(--z-modal-backdrop);
  opacity: 0;
  transition: opacity 200ms ease-out;
}

.modal-host[data-state="opening"] .modal-backdrop,
.modal-host[data-state="open"] .modal-backdrop,
.modal-host[data-state="success"] .modal-backdrop,
.modal-host[data-state="submitting"] .modal-backdrop {
  opacity: 1;
}

/* Card — mobile bottom-sheet baseline */
.modal-card {
  position: relative;
  z-index: calc(var(--z-modal) + 1);
  width: 100%;
  max-width: 560px;
  max-height: 85vh;
  background-color: var(--color-background);
  border-radius: var(--radius-2xl) var(--radius-2xl) 0 0;
  box-shadow: var(--shadow-sticker-bold);
  padding: var(--space-lg) var(--space-xl)
           calc(var(--space-xl) + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  transform: translateY(100%);
  transition: transform 240ms ease-out;
  outline: none;                    /* focus shown on inputs, not the card */
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.modal-host[data-state="open"] .modal-card,
.modal-host[data-state="submitting"] .modal-card,
.modal-host[data-state="success"] .modal-card {
  transform: translateY(0);
}

/* Drag-handle pill — mobile only, decorative */
.modal-drag-handle {
  width: 36px;
  height: 4px;
  border-radius: var(--radius-full);
  background-color: var(--color-border);
  margin: 0 auto var(--space-sm);
  flex-shrink: 0;
}

/* Header */
.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-shrink: 0;
}

.modal-close {
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--color-muted);
  font-size: 22px;
  cursor: pointer;
  border-radius: var(--radius-full);
  flex-shrink: 0;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}

.modal-close:hover,
.modal-close:focus-visible {
  background-color: var(--color-surface-variant);
  color: var(--color-on-background);
}

.modal-close:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Title + sub */
.modal-title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-title-lg);
  line-height: var(--leading-tight);
  color: var(--color-on-background);
  margin: 0;
  flex: 1;
  min-width: 0;
}

/* Form */
.modal-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin: 0;
}

.modal-field {
  display: block;
}

.modal-email {
  display: block;
  width: 100%;
  height: 56px;
  padding: 0 var(--space-lg);
  font-family: var(--font-body);
  font-size: var(--text-body-lg);
  color: var(--color-on-background);
  background-color: var(--color-background);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-lg);
  outline: none;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  -webkit-appearance: none;
  appearance: none;
}

.modal-email::placeholder {
  color: var(--color-muted);
}

.modal-email:focus {
  border-color: var(--color-border-focused);
  box-shadow: 0 0 0 3px rgba(255, 159, 137, 0.18);
}

.modal-email[aria-invalid="true"] {
  border-color: var(--color-error);
}

.modal-error {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--color-error);
  line-height: var(--leading-normal);
}

.modal-error[hidden] {
  display: none;
}

/* --------------------------------------------------------------------------
   Intent chips (multi-select, capped at 3) — ticket 1a-w2-02 (spec §8)
   -------------------------------------------------------------------------- */
.modal-chips {
  /* Participates in .modal-form's flex column rhythm. */
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  /* Zero out default <fieldset> chrome. */
  margin: 0;
  padding: 0;
  border: 0;
  min-inline-size: 0;      /* lets the grid children wrap inside fieldset */
}

.modal-chips__kicker {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-body-sm);
  line-height: var(--leading-tight);
  color: var(--color-muted);
  margin: 0;
  letter-spacing: var(--tracking-normal);
}

.modal-chips__question {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-title-md);
  line-height: var(--leading-snug);
  color: var(--color-on-background);
  margin: 0;
}

.modal-chips__helper {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  line-height: var(--leading-normal);
  color: var(--color-muted);
  margin: 0 0 var(--space-xs) 0;
}

.modal-chips__grid {
  display: grid;
  grid-template-columns: 1fr;                         /* stacked on mobile */
  gap: var(--space-sm);
}

@media (min-width: 760px) {
  .modal-chips__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3-col desktop */
  }
}

.intent-chip {
  /* Pill-shaped toggle button. */
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;
  gap: var(--space-xs);
  min-height: 48px;                    /* tap target */
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  text-align: left;
  color: var(--color-on-background);
  background-color: var(--color-background);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-full);
  cursor: pointer;
  /* `transform` included so the selected 1.02 scale animates smoothly. */
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    color var(--transition-fast),
    transform var(--transition-fast);
  /* Avoid double-tap zoom flicker on iOS. */
  -webkit-tap-highlight-color: transparent;
  appearance: none;
  -webkit-appearance: none;
}

.intent-chip__icon {
  flex-shrink: 0;
  color: var(--color-muted);
  font-size: 18px;
  line-height: 1;
  transition: color var(--transition-fast);
}

.intent-chip__label {
  /* Let longer labels wrap inside the pill rather than overflow the grid. */
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
}

.intent-chip:hover {
  border-color: var(--color-primary);
}

.intent-chip:focus-visible {
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 2px;
}

/* Selected state (aria-pressed="true") — primary-light fill, salmon border,
   salmon icon, subtle 1.02 scale. */
.intent-chip[aria-pressed="true"] {
  background-color: var(--color-primary-light);
  border-color: var(--color-primary);
  color: var(--color-on-background);
  transform: scale(1.02);
}

.intent-chip[aria-pressed="true"] .intent-chip__icon {
  color: var(--color-primary);
}

/* Cap-reached disabled (aria-disabled="true") — visual only; chip stays
   focusable so screen readers announce the "dimmed/disabled" state (spec
   §8.7). Actual click no-op is handled in intent-chips.js. */
.intent-chip[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  /* Freeze hover so a hovered disabled chip doesn't still gain salmon border. */
  border-color: var(--color-border);
  background-color: var(--color-background);
  transform: none;
}

.intent-chip[aria-disabled="true"] .intent-chip__icon {
  color: var(--color-muted);
}

/* Reduced motion: drop the scale transform + instant color swaps. */
@media (prefers-reduced-motion: reduce) {
  .intent-chip,
  .intent-chip__icon {
    transition: none;
  }
  .intent-chip[aria-pressed="true"] {
    transform: none;
  }
}

.modal-submit {
  width: 100%;
  min-height: 56px;
}

.modal-submit[disabled] {
  opacity: 0.75;
  cursor: wait;
}

.modal-reassure {
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  color: var(--color-muted);
  text-align: center;
  margin: 0;
}

/* Form / Success crossfade.
   Per AC-M8: crossfade between form and success MUST be preserved even
   under prefers-reduced-motion. Only the open/close slide is suppressed. */
.modal-content {
  opacity: 1;
  transition: opacity 200ms ease;
}

.modal-content[hidden] {
  display: none !important;
}

.modal-host[data-submit="fading-out"] .modal-content--form {
  opacity: 0;
}

/* Success content layout */
.modal-content--success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
}

.modal-success__icon {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-full);
  background-color: var(--color-tag-health-bg);
  color: var(--color-success);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
}

.modal-success__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-display-md);
  line-height: var(--leading-tight);
  color: var(--color-on-background);
  margin: 0;
}

.modal-success__body {
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-normal);
  color: var(--color-muted);
  margin: 0;
  max-width: 360px;
}

.modal-success__close {
  background-color: var(--color-surface-variant);
  color: var(--color-on-background);
  box-shadow: none;
  margin-top: var(--space-sm);
}

.modal-success__close:hover {
  background-color: var(--color-border);
}

/* Drag-down visual follow (mobile) — JS writes --modal-drag-offset in px */
.modal-host[data-drag="active"] .modal-card {
  transition: none;
  transform: translateY(var(--modal-drag-offset, 0px));
}

/* Desktop (>=760px): centered overlay, scale+fade instead of slide-up */
@media (min-width: 760px) {
  .modal-host {
    align-items: center;
    padding: var(--space-xl);
  }

  .modal-card {
    max-width: 480px;
    max-height: 90vh;
    border-radius: var(--radius-2xl);
    padding: var(--space-xl);
    transform: scale(0.96);
    opacity: 0;
    transition:
      transform 200ms ease-out,
      opacity 200ms ease-out;
  }

  .modal-host[data-state="open"] .modal-card,
  .modal-host[data-state="submitting"] .modal-card,
  .modal-host[data-state="success"] .modal-card {
    transform: scale(1);
    opacity: 1;
  }

  /* Drag-to-dismiss is mobile only; desktop ignores the override */
  .modal-host[data-drag="active"] .modal-card {
    transition: none;
    transform: scale(1);
  }

  .modal-drag-handle {
    display: none;
  }
}

/* Reduced motion: no slide / no scale. Instant appear / disappear.
   BUT keep the form↔success content crossfade (AC-M8). */
@media (prefers-reduced-motion: reduce) {
  .modal-card,
  .modal-backdrop {
    transition: none !important;
  }

  .modal-host[data-state="open"] .modal-card,
  .modal-host[data-state="submitting"] .modal-card,
  .modal-host[data-state="success"] .modal-card {
    transform: none;
    opacity: 1;
  }

  .modal-backdrop {
    opacity: 1;
  }

  /* Preserve the 200ms form/success opacity fade deliberately. */
  .modal-content {
    transition: opacity 200ms ease;
  }
}

/* --------------------------------------------------------------------------
   <noscript> banner
   -------------------------------------------------------------------------- */
.noscript-banner {
  background-color: var(--color-warning);
  color: var(--color-on-background);
  padding: var(--space-md) var(--space-lg);
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--text-body-md);
}

.noscript-banner a {
  color: var(--color-on-background);
  text-decoration: underline;
}

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

/* Skip-link — keyboard/screen-reader shortcut to main content (WCAG 2.4.1).
   Hidden until keyboard focus reveals it; reveals as a salmon chip at
   top-left of the viewport. */
.skip-link {
  position: absolute;
  left: var(--space-md);
  top: -40px;
  z-index: calc(var(--z-modal) + 2);
  padding: var(--space-sm) var(--space-md);
  font-family: var(--font-body);
  font-weight: var(--weight-bold);
  font-size: var(--text-body-sm);
  color: var(--color-on-primary);
  background-color: var(--color-primary);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: top var(--transition-fast);
}
.skip-link:focus,
.skip-link:focus-visible {
  top: var(--space-md);
  outline: 2px solid var(--color-primary-dark);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Desktop (≥720px) shell adjustments
   -------------------------------------------------------------------------- */
@media (min-width: 720px) {
  .brand-strip__inner {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
    /* Align brand-strip content edge with hero/Section 2/etc. Match the
       same content band used by .lp-hero and #problem .lp-container
       (max-width ~1100px centered with 48px min side gutters). */
    max-width: none;
    padding-left: max(48px, calc(50% - 550px));
    padding-right: max(48px, calc(50% - 550px));
  }

  .site-footer__inner {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
  }

  /* Sticky CTA bar: desktop uses per-section inline CTAs instead of the
     floating bar. Hide it permanently at ≥720px. JS short-circuits in
     scroll-reveal.js so no listeners run on desktop. The `!important`
     beats any inline `style.display` set by initStickyBar on the
     waitlist-submitted short-circuit path. */
  .sticky-cta {
    display: none !important;
  }

  /* Footer no longer needs 120px bottom padding to clear a sticky bar
     that doesn't exist on desktop. Trim to match the rest of the band. */
  .site-footer {
    padding-bottom: var(--space-2xl);
  }

  .sticky-cta__lead-in {
    display: inline-flex;
  }

  .sticky-cta__button {
    flex: 0 0 auto;
  }
}

/* --------------------------------------------------------------------------
   Inline section CTA utility — per-section "Join the waitlist" buttons
   that appear on desktop only. Mobile (<760px) hides them so the sticky
   bar stays the single funnel.
   -------------------------------------------------------------------------- */
.lp-cta-inline {
  display: none;
}
@media (min-width: 760px) {
  .lp-cta-inline {
    display: block;
  }
}

/* ==========================================================================
   LANDING PAGE — PROTOTYPE PORT
   Ported verbatim from supabuilder/missions/.../landing-v1-b-screens.html
   Token swaps applied where brand tokens match. Literals kept with an
   inline comment where no token exists.
   ========================================================================== */

/* Shared container + section scaffolding */
.lp-container {
  width: 100%;
  max-width: 560px; /* prototype literal — matches prototype mobile container */
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

.lp-section {
  padding: 64px 0; /* prototype literal — no token */
  /* Full-bleed: break out of .page-main's max-width + side padding so
     the section background extends edge-to-edge. Inner .lp-container
     retains its own horizontal padding for content gutters. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}
.lp-section--compact { padding: var(--space-3xl) 0; }

.lp-bg-cream {
  background: linear-gradient(180deg, var(--color-background) 0%, #FFF0F5 100% /* prototype literal — no token */);
}
.lp-bg-surface-variant {
  background:
    linear-gradient(180deg, rgba(255, 245, 237, 0.7) 0%, rgba(255, 245, 237, 0.7) 100%),
    linear-gradient(180deg, var(--color-background) 0%, #FFF0F5 100% /* prototype literal — no token */);
}

/* =========================================================
   HERO
   ========================================================= */
.lp-hero {
  padding: 20px 0 0 0; /* prototype literal — no token */
  position: relative;
}
.lp-hero__copy {
  margin-bottom: 28px; /* prototype literal — no token */
}
.lp-hero__h1 {
  font-family: var(--font-display);
  font-size: 40px; /* prototype literal — no token */
  line-height: 1.1; /* prototype literal — no token */
  color: var(--color-on-background);
  margin: 0 0 18px 0; /* prototype literal — no token */
  letter-spacing: -0.5px; /* prototype literal — no token */
}
.lp-hero__sub {
  font-family: var(--font-body);
  font-size: 17px; /* prototype literal — no token */
  line-height: var(--leading-normal);
  color: var(--color-muted);
  margin: 0 0 28px 0; /* prototype literal — no token */
  max-width: 42ch;
}

/* Phone centered on the gradient, nothing around it */
.lp-hero__phone-stage {
  display: flex;
  justify-content: center;
  padding-bottom: 120px; /* prototype literal — no token */
  position: relative;
}

/* Hero pinned CTA — floats above the phone bottom at the fold */
.lp-hero__cta-anchor {
  position: sticky;
  bottom: 20px; /* prototype literal — no token */
  z-index: 4; /* prototype literal — no token */
  margin: -88px 0 0 0; /* prototype literal — no token */
  padding: 0 var(--space-xl);
  pointer-events: none;
}
.lp-hero__cta-anchor .btn-primary {
  pointer-events: auto;
  width: 100%;
}
.lp-hero__cta-reassure {
  pointer-events: none;
  margin-top: 10px; /* prototype literal — no token */
  text-align: center;
  font-size: var(--text-label-md);
  font-weight: var(--weight-bold);
  color: var(--color-muted);
  display: flex; align-items: center; justify-content: center; gap: 6px; /* prototype literal — no token */
}
.lp-hero__cta-reassure i { font-size: 14px; /* prototype literal — no token */ }

/* Desktop shows email field inline instead of button-only */
.lp-hero-cta__field { display: none; }

/* =========================================================
   PHONE FRAME (the core mock screen container)
   ========================================================= */
.phone {
  width: 248px; /* prototype literal — no token */
  height: 498px; /* prototype literal — no token */
  background: #1E1E1E; /* prototype literal — no token */
  border-radius: 34px; /* prototype literal — no token */
  padding: 6px; /* prototype literal — no token */
  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.16),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.05); /* prototype literal — no token */
  position: relative;
}
/* Hero phone is always the larger 300×608 size — mobile and desktop.
   Scrolly-section phones stay at the 248×498 base and scale up only on
   the ≥760px media query below. */
.lp-hero__phone-stage .phone {
  width: 300px;
  height: 608px;
}
.lp-hero__phone-stage .phone__notch {
  top: 16px;
  width: 84px;
  height: 22px;
}
.lp-hero__phone-stage .phone-statusbar {
  height: 40px;
  font-size: 12px;
}
.phone__notch {
  position: absolute;
  top: 14px; left: 50%; /* prototype literal — no token */
  transform: translateX(-50%);
  width: 70px; height: 18px; /* prototype literal — no token */
  background: #000; /* prototype literal — no token */
  border-radius: var(--radius-full);
  z-index: 5;
}
.phone__screen {
  width: 100%;
  height: 100%;
  background: var(--color-background);
  border-radius: 28px; /* prototype literal — no token */
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}
.phone--lift { transform: translateY(-12px); /* prototype literal — no token */ }

/* Status bar */
.phone-statusbar {
  height: 34px; /* prototype literal — no token */
  padding: 0 18px 0 24px; /* prototype literal — no token */
  display: flex; align-items: flex-end; justify-content: space-between;
  font-size: 10.5px; /* prototype literal — no token */
  font-weight: var(--weight-bold);
  color: var(--color-on-background);
  padding-bottom: 4px;
  flex-shrink: 0;
}
.phone-statusbar__right { display: flex; gap: 4px; align-items: center; }
.phone-statusbar__right i { font-size: 10px; /* prototype literal — no token */ }

/* =========================================================
   HOME SCREEN — .hs*
   ========================================================= */
.hs {
  flex: 1;
  overflow: hidden;
  padding: 12px 20px 4px; /* prototype literal — no token */
  display: flex;
  flex-direction: column;
  gap: 14px; /* prototype literal — no token */
}

.hs-header { display: flex; align-items: center; gap: 10px; /* prototype literal — no token */ }
.hs-header__avatar {
  position: relative;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: #FFD9C5; /* prototype literal — no token */
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.hs-header__avatar i { color: var(--color-primary-dark); font-size: 20px; /* prototype literal — no token */ }
.hs-header__avatar img {
  width: 100%; height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
}
.hs-header__avatar::after {
  content: '';
  position: absolute;
  bottom: -1px; right: -1px;
  width: 11px; height: 11px; /* prototype literal — no token */
  border-radius: 50%;
  background: var(--color-success);
  border: 2px solid var(--color-background);
}
.hs-header__name {
  flex: 1;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}
.hs-header__name-main {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.1;
  color: var(--color-on-background);
}
.hs-header__name-age {
  font-size: 9px; /* prototype literal — no token */
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
  margin-top: 1px;
}
.hs-header__actions { display: flex; gap: 6px; flex-shrink: 0; }
.hs-header__btn {
  width: 28px; height: 28px; border-radius: 50%; /* prototype literal — no token */
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  display: flex; align-items: center; justify-content: center;
}
.hs-header__btn i { font-size: 13px; /* prototype literal — no token */ }

/* Hero card — large avatar ring + status pill */
.hs-hero { display: flex; flex-direction: column; align-items: center; gap: var(--space-sm); padding: 4px 0 2px; }
.hs-hero__ring {
  width: 104px; height: 104px; /* prototype literal — no token */
  border-radius: 50%;
  background: rgba(255, 232, 163, 0.35); /* accent-yellow 20% — prototype literal */
  box-shadow: var(--shadow-soft);
  padding: 4px;
  display: flex; align-items: center; justify-content: center;
}
.hs-hero__avatar {
  width: 100%; height: 100%;
  border-radius: 50%;
  overflow: hidden;
  background:
    radial-gradient(circle at 35% 35%, #FFD9C5 0%, #E8876F 75%); /* prototype literal — no token */
  display: flex; align-items: center; justify-content: center;
  color: var(--color-on-primary);
  font-size: 44px; /* prototype literal — no token */
}
.hs-hero__avatar img {
  width: 100%; height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
}
.hs-hero__pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; /* prototype literal — no token */
  background: var(--color-surface);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-soft);
  font-family: var(--font-body);
  font-size: 11px; /* prototype literal — no token */
  font-weight: var(--weight-bold);
  color: var(--color-on-background);
}
.hs-hero__pill-dot {
  width: 7px; height: 7px; border-radius: 50%; /* prototype literal — no token */
  background: var(--color-success);
}

/* Section header — matches "Important Today" / "Recent Moments" */
.hs-section-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: var(--space-sm);
}
.hs-section-title {
  font-family: var(--font-body);
  font-size: 13px; /* prototype literal — no token */
  font-weight: var(--weight-extrabold);
  color: var(--color-on-background);
  letter-spacing: -0.2px;
}
.hs-section-aside { display: flex; align-items: center; gap: 6px; }
.hs-progress-bar {
  width: 56px; height: 4px; /* prototype literal — no token */
  background: var(--color-border);
  border-radius: 2px; overflow: hidden;
}
.hs-progress-bar__fill {
  height: 100%;
  width: 60%;
  background: var(--color-success);
  border-radius: 2px;
}
.hs-section-count {
  font-size: 9px; /* prototype literal — no token */
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
}
.hs-section-link {
  font-size: 10px; /* prototype literal — no token */
  font-weight: var(--weight-bold);
  color: var(--color-primary);
}

/* Important Today — task cards */
.hs-today { display: flex; flex-direction: column; gap: 6px; }
.hs-task-card {
  display: flex; align-items: center; gap: 10px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 8px 10px; /* prototype literal — no token */
}
.hs-task-card__check {
  width: 16px; height: 16px; border-radius: 50%; /* prototype literal — no token */
  border: 1.5px solid var(--color-border);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.hs-task-card__check--done {
  background: currentColor;
  border-color: currentColor;
}
.hs-task-card__check--done::after {
  content: ''; width: 4px; height: 7px;
  border: solid var(--color-on-primary); border-width: 0 1.3px 1.3px 0;
  transform: rotate(45deg);
}
.hs-task-card__label {
  flex: 1;
  font-family: var(--font-body);
  font-size: 11px; /* prototype literal — no token */
  font-weight: var(--weight-semibold);
  color: var(--color-on-background);
  line-height: 1.2;
}
.hs-task-card__label--done {
  text-decoration: line-through;
  color: var(--color-muted);
}
.hs-task-card__badge {
  font-size: 8px; /* prototype literal — no token */
  font-weight: var(--weight-semibold);
  padding: 2px 5px;
  border-radius: 4px;
  background: var(--color-surface-variant);
  color: var(--color-muted);
}
.hs-task-card__status {
  font-size: 9px; /* prototype literal — no token */
  font-weight: var(--weight-bold);
  color: var(--color-muted);
}
.hs-task-card__status--overdue { color: var(--color-error); }
.hs-task-card__status--done { color: var(--color-success); }

/* Recent Moments — horizontal scroll strip */
.hs-moments {
  display: flex; gap: var(--space-sm);
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.hs-moments::-webkit-scrollbar { display: none; }
.hs-moment {
  flex-shrink: 0;
  width: 88px; /* prototype literal — no token */
  display: flex; flex-direction: column; gap: 4px;
}
.hs-moment__thumb {
  width: 88px; height: 76px; /* prototype literal — no token */
  border-radius: var(--radius-md);
  background: var(--color-surface-variant);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  position: relative;
}
.hs-moment__thumb i {
  color: var(--color-muted);
  font-size: 22px;
}
.hs-moment__thumb--photo-1 {
  background: url('/assets/kitten/luna-sunbeam-nap.png') center/cover no-repeat;
}
.hs-moment__thumb--photo-2 {
  background: url('/assets/kitten/luna-zoomies.png') center/cover no-repeat;
}
.hs-moment__thumb--photo-3 {
  background: url('/assets/kitten/luna-vet-check.png') center/cover no-repeat;
}
.hs-moment__text {
  font-family: var(--font-body);
  font-size: 9px; /* prototype literal — no token */
  font-weight: var(--weight-semibold);
  color: var(--color-on-background);
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hs-moment__ts {
  font-size: 8px; /* prototype literal — no token */
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
}

/* Nugget card — personalised alert */
.hs-nugget {
  display: flex; align-items: flex-start; gap: 10px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 10px 12px; /* prototype literal — no token */
}
.hs-nugget__dot {
  width: 7px; height: 7px; border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}
.hs-nugget__body { flex: 1; min-width: 0; }
.hs-nugget__text {
  font-family: var(--font-body);
  font-size: 10.5px; /* prototype literal — no token */
  line-height: 1.35;
  color: var(--color-on-background);
}
.hs-nugget__area {
  font-size: 8.5px; /* prototype literal — no token */
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
  margin-top: 3px;
}

/* =========================================================
   BOTTOM NAV
   ========================================================= */
.nav-bar {
  margin: 6px 12px 10px;
  background: var(--color-surface);
  border-radius: 32px;
  box-shadow: var(--shadow-soft);
  padding: 8px 10px;
  display: flex; justify-content: space-between; align-items: flex-start;
  flex-shrink: 0;
  position: relative;
}
.nav-tab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  flex: 1;
}
.nav-tab__icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-on-primary);
  position: relative;
}
.nav-tab__icon i { font-size: 16px; }
.nav-tab__icon--home    { background: rgba(163, 216, 255, 0.35); box-shadow: 0 3px 0 rgba(163, 216, 255, 0.25); }
.nav-tab__icon--routine { background: rgba(255, 232, 163, 0.55); box-shadow: 0 3px 0 rgba(255, 232, 163, 0.25); }
.nav-tab__icon--life    { background: rgba(216, 180, 254, 0.45); box-shadow: 0 3px 0 rgba(216, 180, 254, 0.25); }
.nav-tab__icon--gpt     { background: rgba(255, 159, 137, 0.45); box-shadow: 0 3px 0 rgba(255, 159, 137, 0.25); }
.nav-tab--active .nav-tab__icon {
  border: 2px solid currentColor;
  box-shadow: none;
}
.nav-tab--active.nav-tab--home    { color: #3B82F6; /* prototype literal — no token */ }
.nav-tab--active.nav-tab--routine { color: #F59E0B; /* prototype literal — no token */ }
.nav-tab--active.nav-tab--life    { color: #8B5CF6; /* prototype literal — no token */ }
.nav-tab--active.nav-tab--gpt     { color: var(--color-primary); }
.nav-tab__label {
  font-family: var(--font-body);
  font-size: 7.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.5px;
  color: var(--color-on-background);
}
/* Raised center LOG FAB (salmon) */
.nav-fab {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  flex: 1;
}
.nav-fab__btn {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-on-primary);
  transform: translateY(-10px);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.10);
}
.nav-fab__btn i { font-size: 20px; }
.nav-fab__label {
  font-family: var(--font-body);
  font-size: 7.5px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.5px;
  color: var(--color-muted);
  transform: translateY(-8px);
}

/* =========================================================
   BLOCK 2 — PROBLEM
   ========================================================= */
.lp-problem__kicker {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--color-primary-dark);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.lp-problem__h2 {
  font-family: var(--font-display);
  font-size: 30px; /* prototype literal — no token */
  line-height: 1.15;
  margin: 0 0 16px 0;
  letter-spacing: -0.3px;
}
.lp-problem__sub {
  font-family: var(--font-body);
  font-size: 17px; /* matches .lp-hero__sub */
  line-height: var(--leading-normal);
  color: var(--color-muted);
  margin: 0 0 24px 0;
  max-width: 42ch;
}

/* =========================================================
   BLOCK 2 — Patchwork illustrations: YouTube, Reddit, blog
   ========================================================= */
.lp-patchwork {
  position: relative;
  margin: 24px -8px 0;
  min-height: 620px; /* prototype literal — no token */
}
.patch-card {
  position: absolute;
  background: var(--color-surface);
  border-radius: 14px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.10), 0 2px 6px rgba(0,0,0,0.06);
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: #202124; /* prototype literal — no token */
  width: 82%;
  max-width: 320px;
}

/* --- YouTube card --- */
.patch-card--youtube {
  top: 0; left: 4%;
  transform: rotate(-4deg);
  z-index: 3;
}
.yt-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(rgba(0,0,0,0.18), rgba(0,0,0,0.18)),
    url('/assets/cat-nail-trim-thumb.png') center / cover no-repeat,
    linear-gradient(135deg, #2B2B2B 0%, #555 50%, #2B2B2B 100%); /* fallback */
  display: flex; align-items: center; justify-content: center;
}
.yt-play {
  width: 56px; height: 40px;
  background: #FF0000; /* prototype literal — YouTube brand red */
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  z-index: 2;
}
.yt-play::after {
  content: '';
  width: 0; height: 0;
  border-left: 14px solid var(--color-surface);
  border-top: 9px solid transparent;
  border-bottom: 9px solid transparent;
  margin-left: 3px;
}
.yt-duration {
  position: absolute;
  right: 8px; bottom: 8px;
  background: rgba(0,0,0,0.85);
  color: var(--color-surface);
  font-size: 11px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 3px;
}
.yt-meta {
  display: flex; gap: 10px;
  padding: 12px 14px;
}
.yt-avatar {
  width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, #F59E0B, #F97316); /* prototype literal — YouTube avatar gradient */
}
.yt-body { flex: 1; min-width: 0; }
.yt-title {
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.3;
  color: #0F0F0F; /* prototype literal — no token */
  margin-bottom: 4px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.yt-channel {
  font-size: 11.5px;
  color: #606060; /* prototype literal — no token */
  line-height: 1.3;
}
.yt-stats {
  font-size: 11.5px;
  color: #606060; /* prototype literal — no token */
  line-height: 1.3;
}

/* --- Reddit card --- */
.patch-card--reddit {
  top: 190px; right: 0;
  transform: rotate(3.5deg);
  z-index: 2;
  padding: 12px 14px;
}
.rd-head {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px;
  color: #1A1A1B; /* prototype literal — no token */
  margin-bottom: 8px;
}
.rd-sub-icon {
  width: 20px; height: 20px; border-radius: 50%;
  background: #FF4500; /* prototype literal — Reddit brand orange */
  display: flex; align-items: center; justify-content: center;
  color: var(--color-surface);
  font-weight: 800;
  font-size: 11px;
  flex-shrink: 0;
}
.rd-sub-name { font-weight: 700; color: #1A1A1B; /* prototype literal — no token */ }
.rd-meta { color: #787C7E; /* prototype literal — no token */ }
.rd-dot { color: #787C7E; /* prototype literal — no token */ }
.rd-title {
  font-size: 14px;
  font-weight: 600;
  color: #1A1A1B; /* prototype literal — no token */
  line-height: 1.3;
  margin-bottom: 8px;
}
.rd-post-body {
  font-size: 12px;
  color: #1A1A1B; /* prototype literal — no token */
  line-height: 1.4;
  margin-bottom: 10px;
  opacity: 0.85;
}
.rd-bar {
  display: flex; gap: 14px;
  font-size: 11.5px;
  color: #787C7E; /* prototype literal — no token */
  font-weight: 600;
}
.rd-bar-item { display: flex; align-items: center; gap: 4px; }
.rd-vote-up {
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 6px solid #FF4500; /* prototype literal — Reddit brand orange */
}
.rd-comment-count { color: #FF4500; /* prototype literal — Reddit brand orange */ }

/* --- Blog article card --- */
.patch-card--blog {
  top: 290px; left: 10%;
  transform: rotate(-2deg);
  z-index: 1;
}
.blog-thumb {
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(180deg, rgba(255,249,242,0) 60%, rgba(255,249,242,0.7) 100%),
    linear-gradient(135deg, #D6E9FF 0%, #FFE8A3 50%, #FFD9C5 100%); /* prototype literal — blog hero gradient */
  position: relative;
}
.blog-thumb::before {
  content: '';
  position: absolute;
  right: 20%; bottom: 20%;
  width: 54px; height: 46px;
  background: rgba(255,255,255,0.55);
  border-radius: 50% 50% 35% 35% / 60% 60% 40% 40%;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.blog-body { padding: 12px 14px; }
.blog-pub {
  font-size: 10.5px;
  font-weight: 700;
  color: #6B7280; /* prototype literal — no token */
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 6px;
}
.blog-headline {
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 15px;
  font-weight: 700;
  color: #111827; /* prototype literal — no token */
  line-height: 1.25;
  margin-bottom: 8px;
}
.blog-meta {
  font-size: 11px;
  color: #9CA3AF; /* prototype literal — no token */
}

.lp-problem__closer {
  margin-top: var(--space-3xl);
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.4;
  opacity: 0.85;
  position: relative;
  z-index: 1;
}

/* =========================================================
   SCROLLYTELLING
   ========================================================= */
.scrolly {
  position: relative;
  /* Full-bleed: break out of .page-main's max-width so the sticky stage
     fills the full viewport width on desktop. Body has overflow-x: clip. */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background: linear-gradient(180deg, var(--color-background) 0%, #FFF0F5 100% /* prototype literal */);
}

/* PAIR — wraps the whole scrollytelling frame.
   Total scroll height = stage(100vh) + chapters(5 × 125vh) - 100vh overlap
   = 625vh. The sticky stage is pinned for the first 525vh of that; scroll
   progress inside the pinned range is mapped to the active chapter in
   scroll-reveal.js. Each chapter occupies ~105vh of pinned scroll, giving
   the user noticeably more dwell time per chapter than the prior 100vh
   sentinel (which worked out to ~80vh of pinned scroll each). */
.scrolly__pair {
  position: relative;
}

/* UNIFIED STICKY STAGE — the entire section (header + phone + text + dots)
   is pinned as one unit while invisible chapter triggers scroll behind it.
   This gives the "whole segment locks until all 5 slides play out" feel.
   Children are packed from the top (flex-start) so the text card sits
   right below the phone rather than drifting to the bottom of the viewport. */
.scrolly__stage {
  position: sticky;
  top: 0;
  height: 100vh;              /* fallback for browsers w/o dvh */
  height: 100dvh;             /* iOS Safari URL-bar safe (FF 109+, Safari 15.4+) */
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 48px 0 16px;       /* more top room so the header doesn't kiss the edge */
  background: linear-gradient(180deg,
    rgba(255, 249, 242, 0.98) 0%,
    rgba(255, 240, 245, 0.94) 60%,
    rgba(255, 240, 245, 0.92) 100%);
  pointer-events: none;
}

/* Header — top of the stage. Title + sub now change per chapter
   (driven by scroll-reveal.js). Kicker is desktop-only. */
.scrolly__header {
  flex: 0 0 auto;
  padding: 4px 20px 6px;
  text-align: center;
  width: 100%;
}
.scrolly__kicker {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--color-primary-dark);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 6px;
  transition: opacity 200ms ease;
}
.scrolly__header--fading .scrolly__kicker { opacity: 0; }
.scrolly__h2 {
  font-family: var(--font-display);
  font-size: 24px;
  line-height: 1.15;
  color: var(--color-on-background);
  margin: 0 0 6px 0;
  letter-spacing: -0.3px;
  transition: opacity 200ms ease;
}
.scrolly__sub {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
  margin: 0;
  transition: opacity 200ms ease;
}
.scrolly__header--fading .scrolly__h2,
.scrolly__header--fading .scrolly__sub { opacity: 0; }

/* Visual slot — natural height; does NOT stretch. position: relative so
   the mobile dots column anchors to it. */
.scrolly__visual {
  flex: 0 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 0;
  position: relative;
  pointer-events: none;
}
.scrolly__visual-inner {
  position: relative;
  width: 100%;
  max-width: 260px;
  /* Explicit height so .scrolly-visual (absolute, inset: 0) has a box. */
  height: 510px;
  margin: 0 auto;
  pointer-events: auto;
}
.scrolly-visual {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 260ms ease;
  pointer-events: none;
}
.scrolly-visual.is-active {
  opacity: 1;
  pointer-events: auto;
}

/* Dots — mobile shows the vertical column to the LEFT of the phone
   (communicates vertical scroll). Desktop variant lives inside the
   header and is styled in the desktop media block. */
.scrolly__dots--mobile {
  position: absolute;
  /* Phone is 260px wide, centered. Place dots 24px left of phone's left edge.
     max() guard keeps them on-screen on very narrow viewports. */
  left: max(8px, calc(50% - 130px - 24px));
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 4;
  pointer-events: none;
}
.scrolly__dots--desktop {
  display: none; /* shown in the desktop media block */
}
.scrolly-dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--color-border);
  transition: height 220ms ease, width 220ms ease, background 220ms ease;
}
/* Mobile active dot = tall vertical bar */
.scrolly__dots--mobile .scrolly-dot.is-active {
  width: 5px;
  height: 18px;
  background: var(--color-primary);
  border-radius: 3px;
}

/* Scroll-jacking has been removed. Users control their own scroll speed;
   scroll-reveal.js derives the active chapter from the pair's getBoundingClientRect
   each frame. Previous attempts (wheel/touch preventDefault, CSS scroll-snap)
   fought native momentum on iOS Safari and produced non-deterministic
   chapter activation — see that file for the full rationale. */

/* Invisible chapter triggers — provide the scroll distance.
   Negative margin pulls them up under the sticky stage so they occupy
   the same scroll range. Each chapter is 125vh tall (up from 100vh) to
   give each chapter more dwell time during faster scrolls. Total chapter
   stack height = 5 * 125vh = 625vh. */
.scrolly__chapters {
  position: relative;
  z-index: 1;
  margin-top: -100vh;
  pointer-events: none;
}
.scrolly-chapter {
  min-height: 125vh;
  pointer-events: none;
}

/* =========================================================
   CHAPTER 1 — Care Plans (cp-*)
   ========================================================= */
.cp {
  flex: 1;
  overflow: hidden;
  padding: 10px 14px 2px;
  display: flex; flex-direction: column; gap: 10px;
}
.cp-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 2px;
}
.cp-topbar__btn {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-muted);
}
.cp-topbar__btn i { font-size: 12px; }
.cp-topbar__title {
  font-family: var(--font-display);
  font-size: 14px;
}
.cp-hero {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 2px 0 4px;
}
.cp-hero__avatar {
  width: 56px; height: 56px; border-radius: 50%;
  overflow: hidden;
  background: #FFD9C5; /* prototype literal — no token */
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-soft);
}
.cp-hero__avatar i { color: var(--color-primary-dark); font-size: 28px; }
.cp-hero__avatar img {
  width: 100%; height: 100%;
  border-radius: inherit;
  object-fit: cover;
  display: block;
}
.cp-hero__name {
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.1;
}
.cp-hero__age {
  font-size: 9px;
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
}
.cp-section-title {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--color-on-background);
  padding: 0 2px;
}
.cp-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}
.cp-tile {
  background: var(--color-surface);
  border-radius: var(--radius-md);
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  padding: 7px 8px 6px;
  display: flex; flex-direction: column; gap: 3px;
}
.cp-tile__icon {
  width: 22px; height: 22px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.cp-tile__icon i { font-size: 11px; }
.cp-tile__name {
  font-family: var(--font-body);
  font-size: 8.5px;
  font-weight: var(--weight-extrabold);
  color: var(--color-on-background);
  line-height: 1.15;
}
.cp-tile__status {
  font-size: 7px;
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
  line-height: 1.2;
}
.cp-tile__status--active { color: var(--color-primary); }

/* =========================================================
   CHAPTER 2 — Routine (rt-*)
   ========================================================= */
.rt {
  flex: 1;
  overflow: hidden;
  padding: 10px 18px 2px;
  display: flex; flex-direction: column; gap: 10px;
}
.rt-header {
  display: flex; align-items: center; justify-content: space-between;
}
.rt-header__title {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.1;
}
.rt-header__avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: #FFD9C5; /* prototype literal — no token */
  display: flex; align-items: center; justify-content: center;
}
.rt-header__avatar i { color: var(--color-primary-dark); font-size: 13px; }

.rt-date-scroller {
  display: flex; gap: 4px; justify-content: space-between;
  padding: 2px 0;
}
.rt-day {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 4px 2px;
  border-radius: var(--radius-md);
}
.rt-day__dow { font-size: 8px; font-weight: var(--weight-bold); color: var(--color-muted); letter-spacing: 0.5px; }
.rt-day__num {
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: var(--weight-extrabold);
  color: var(--color-on-background);
}
.rt-day--today {
  background: var(--color-primary-light);
}
.rt-day--today .rt-day__dow { color: var(--color-primary-dark); }
.rt-day--today .rt-day__num { color: var(--color-primary-dark); }

.rt-bucket-label {
  font-family: var(--font-display);
  font-size: 11px;
  color: var(--color-muted);
  letter-spacing: 0.5px;
  margin: 4px 2px 2px;
}

.rt-task {
  display: flex; align-items: center; gap: 8px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 8px 9px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.rt-task--progressive { border-left: 3px solid; }
.rt-task__icon {
  width: 24px; height: 24px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.rt-task__icon i { font-size: 12px; }
.rt-task__body { flex: 1; min-width: 0; }
.rt-task__label {
  font-family: var(--font-body);
  font-size: 10.5px;
  font-weight: var(--weight-bold);
  color: var(--color-on-background);
  line-height: 1.2;
  margin-bottom: 2px;
}
.rt-task__label--done {
  text-decoration: line-through;
  color: var(--color-muted);
}
.rt-task__badges { display: flex; gap: 3px; flex-wrap: wrap; }
.rt-task__badge {
  font-size: 7.5px;
  font-weight: var(--weight-bold);
  padding: 1px 5px;
  border-radius: 4px;
}
.rt-task__check {
  width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid var(--color-border);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.rt-task__check--done { background: currentColor; border-color: currentColor; }
.rt-task__check--done::after {
  content: ''; width: 4px; height: 7px;
  border: solid var(--color-on-primary); border-width: 0 1.3px 1.3px 0;
  transform: rotate(45deg);
}

/* =========================================================
   CHAPTER 3 — CatGPT chat (gpt-*)
   ========================================================= */
.gpt {
  flex: 1;
  overflow: hidden;
  padding: 10px 14px 4px;
  display: flex; flex-direction: column; gap: 8px;
}
.gpt-header {
  display: flex; align-items: center; gap: 8px;
  padding: 2px 0 4px;
}
.gpt-header__avatar {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(216, 180, 254, 0.25);
  display: flex; align-items: center; justify-content: center;
}
.gpt-header__avatar i { color: #8B5CF6; /* prototype literal — no token */ font-size: 14px; }
.gpt-header__title { font-family: var(--font-display); font-size: 14px; }
.gpt-header__sub { font-size: 9px; color: var(--color-muted); font-weight: var(--weight-bold); }

.gpt-row { display: flex; align-items: flex-start; gap: 6px; }
.gpt-row--right { justify-content: flex-end; }
.gpt-row__avatar {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(216, 180, 254, 0.25);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.gpt-row__avatar i { color: #8B5CF6; /* prototype literal — no token */ font-size: 11px; }
.gpt-bubble {
  padding: 8px 10px;
  border-radius: 14px;
  font-size: 10.5px;
  line-height: 1.4;
  max-width: 82%;
}
.gpt-bubble--assistant {
  background: var(--color-surface);
  color: var(--color-on-background);
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.gpt-bubble--assistant strong {
  font-weight: var(--weight-extrabold);
  color: var(--color-primary-dark);
}
.gpt-bubble--user {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-bottom-right-radius: 4px;
}

.gpt-inputbar {
  margin-top: auto;
  display: flex; align-items: center; gap: 6px;
  padding: 8px 10px;
  background: var(--color-surface);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-soft);
}
.gpt-inputbar__ph {
  flex: 1;
  font-size: 10px;
  color: var(--color-muted);
  font-weight: var(--weight-semibold);
}
.gpt-inputbar__send {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-on-primary);
  display: flex; align-items: center; justify-content: center;
}
.gpt-inputbar__send i { font-size: 11px; }

/* =========================================================
   CHAPTER 4 — Life feed + widget (life-*, ios-widget*)
   ========================================================= */
.life {
  flex: 1;
  overflow: hidden;
  padding: 8px 12px 4px;
  display: flex; flex-direction: column; gap: 6px;
}
.life-header {
  font-family: var(--font-display);
  font-size: 15px;
  padding: 0 2px;
}

/* Date scroller — horizontal "All" pill + date chips */
.life-dates {
  display: flex;
  gap: 4px;
  overflow: hidden;
  padding: 2px 0;
  flex-shrink: 0;
}
.life-date {
  position: relative;
  flex-shrink: 0;
  width: 38px;
  height: 50px;
  border-radius: 12px;
  background: var(--color-surface);
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 1px;
}
.life-date--all { justify-content: center; }
.life-date--all span {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-bold);
  color: var(--color-muted);
}
.life-date__mon,
.life-date__dow {
  font-size: 7px;
  font-weight: var(--weight-bold);
  color: var(--color-muted);
  letter-spacing: 0.5px;
  line-height: 1;
}
.life-date__num {
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: var(--weight-extrabold);
  color: var(--color-on-background);
  line-height: 1.05;
}
.life-date--selected {
  background: #FFE8E0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.life-date--selected.life-date--all span,
.life-date--selected .life-date__mon,
.life-date--selected .life-date__dow { color: var(--color-primary); }
.life-date--selected .life-date__num { color: var(--color-primary-dark); }
.life-date__dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--color-primary);
  margin-top: 2px;
}

/* Filter chips — structural + fun-tag pills */
.life-filters {
  display: flex;
  gap: 4px;
  overflow: hidden;
  padding: 1px 0;
  flex-shrink: 0;
}
.life-filter {
  flex-shrink: 0;
  height: 22px;
  padding: 0 9px;
  border-radius: 99px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  font-family: var(--font-body);
  font-size: 9px;
  font-weight: var(--weight-bold);
  color: var(--color-on-background);
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}
.life-filter--active {
  background: var(--color-primary);
  color: var(--color-on-primary);
  border-color: var(--color-primary);
}
.life-filter--active i { font-size: 10px; }
.life-filter--fun {
  background: var(--color-surface-variant);
  border-color: transparent;
}

.life-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  padding: 8px;
  flex-shrink: 0;
}
.life-card__photo {
  aspect-ratio: 5 / 3;
  border-radius: 10px;
  margin-bottom: 6px;
  background-color: var(--color-surface-variant);
}
.life-card__photo--1 { background: url('/assets/kitten/luna-zoomies.png') center/cover no-repeat; }
.life-card__photo--2 { background: url('/assets/kitten/luna-vet-check.png') center/cover no-repeat; }
.life-card__caption {
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-semibold);
  color: var(--color-on-background);
  line-height: 1.3;
  margin-bottom: 6px;
}
.life-card__tags { display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; }
.life-card__tag {
  font-size: 8px; font-weight: var(--weight-bold);
  padding: 2px 6px; border-radius: var(--radius-full);
}
.life-card__footer {
  display: flex; align-items: center; gap: 6px;
  font-size: 9px;
  color: var(--color-muted);
  font-weight: var(--weight-semibold);
}
.life-card__footer i { font-size: 11px; }
.life-card__footer .life-card__author { color: var(--color-on-background); font-weight: var(--weight-bold); }
.life-card__footer .life-card__hearts { color: var(--color-primary); margin-left: auto; display: flex; align-items: center; gap: 3px; }

/* Floating iOS widget */
.scrolly-visual--widget-pair { /* marker class */ }
.ios-widget {
  position: absolute;
  top: -14px;
  right: -18px;
  width: 120px;
  height: 120px;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,0.18), 0 2px 6px rgba(0,0,0,0.08);
  background: url('/assets/kitten/luna-sunbeam-nap.png') center/cover no-repeat;
  transform: rotate(5deg);
  z-index: 3;
}
.ios-widget::before {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 70%;
  background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.65) 100%);
}
.ios-widget__cat {
  position: absolute;
  top: 6px; left: 8px;
  font-family: 'SF Pro Rounded', -apple-system, system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-surface);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.ios-widget__time {
  position: absolute;
  top: 6px; right: 8px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.ios-widget__text {
  position: absolute;
  left: 8px; right: 8px; bottom: 18px;
  font-family: 'SF Pro', -apple-system, system-ui, sans-serif;
  font-size: 10px;
  font-weight: 500;
  color: var(--color-surface);
  line-height: 1.2;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.ios-widget__author {
  position: absolute;
  left: 8px; bottom: 6px;
  font-size: 9px;
  color: rgba(255,255,255,0.8);
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}
.ios-widget__cat-glyph {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 52px;
  color: rgba(255,255,255,0.35);
}

/* =========================================================
   CHAPTER 5 — Medical Records (mr-*)
   Mirrors the app's medical_records_screen.dart: topbar →
   tabs → weight chart → vaccinations list.
   ========================================================= */
.mr {
  flex: 1;
  overflow: hidden;
  padding: 8px 12px 4px;
  display: flex; flex-direction: column; gap: 8px;
}

/* Topbar: back + title + action buttons */
.mr-topbar {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 0;
  flex-shrink: 0;
}
.mr-topbar__btn {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--color-surface);
  box-shadow: var(--shadow-soft);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mr-topbar__btn i { font-size: 12px; color: var(--color-on-background); }
.mr-topbar__title {
  flex: 1;
  font-family: var(--font-display);
  font-size: 15px;
  line-height: 1;
  color: var(--color-on-background);
  padding-left: 2px;
}

/* Tab bar */
.mr-tabs {
  display: flex; gap: 14px;
  border-bottom: 1.5px solid var(--color-border);
  padding: 0 2px;
  flex-shrink: 0;
}
.mr-tab {
  padding: 6px 0 8px;
  font-family: var(--font-body);
  font-size: 10px;
  font-weight: var(--weight-bold);
  color: var(--color-muted);
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px;
}
.mr-tab--active {
  color: var(--color-on-background);
  border-bottom-color: #10B981;
  font-weight: var(--weight-extrabold);
}

/* Weight chart section */
.mr-chart {
  display: flex; flex-direction: column; gap: 6px;
  flex-shrink: 0;
  padding: 2px 0;
}
.mr-chart__header {
  display: flex; align-items: center; justify-content: space-between;
}
.mr-chart__title {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--color-on-background);
}
.mr-chart__metric-toggle {
  display: flex;
  background: var(--color-surface-variant);
  border-radius: var(--radius-full);
  padding: 2px;
  gap: 1px;
}
.mr-chart__metric {
  font-size: 8px;
  font-weight: var(--weight-extrabold);
  padding: 3px 8px;
  border-radius: var(--radius-full);
  color: var(--color-muted);
}
.mr-chart__metric--active {
  background: #10B981;
  color: #fff;
}
.mr-chart__svg {
  width: 100%;
  height: 90px;
  display: block;
}
.mr-chart__x-axis {
  display: flex; justify-content: space-between;
  padding: 0 2px;
  font-size: 7.5px;
  font-weight: var(--weight-bold);
  color: var(--color-muted);
  letter-spacing: 0.3px;
}
.mr-chart__window {
  align-self: center;
  display: flex;
  background: var(--color-surface-variant);
  border-radius: var(--radius-full);
  padding: 2px;
  gap: 1px;
}
.mr-chart__win {
  font-size: 8px;
  font-weight: var(--weight-extrabold);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  color: var(--color-muted);
}
.mr-chart__win--active {
  background: #10B981;
  color: #fff;
}

/* Vaccinations section */
.mr-section-label {
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--color-on-background);
  margin-top: 4px;
  padding: 0 2px;
  flex-shrink: 0;
}
.mr-records { display: flex; flex-direction: column; gap: 6px; }
.mr-record {
  display: flex; align-items: center; gap: 10px;
  background: var(--color-surface);
  border-radius: var(--radius-md);
  padding: 9px 11px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}
.mr-record__icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.mr-record__icon i { font-size: 16px; }
.mr-record__body { flex: 1; min-width: 0; }
.mr-record__type {
  font-family: var(--font-body);
  font-size: 7.5px;
  font-weight: var(--weight-extrabold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  line-height: 1;
}
.mr-record__title {
  font-family: var(--font-body);
  font-size: 11px;
  font-weight: var(--weight-extrabold);
  color: var(--color-on-background);
  line-height: 1.2;
  margin-top: 2px;
}
.mr-record__meta {
  font-size: 9px;
  font-weight: var(--weight-semibold);
  color: var(--color-muted);
  margin-top: 2px;
}
.mr-record__chev { font-size: 11px; color: var(--color-muted); }

/* Per-type color tint (icon bg + type label) */
.mr-record--vax .mr-record__icon {
  background: rgba(16,185,129,0.14);
}
.mr-record--vax .mr-record__icon i { color: #10B981; }
.mr-record--vax .mr-record__type { color: #10B981; }
.mr-record--prev .mr-record__icon {
  background: rgba(245,158,11,0.14);
}
.mr-record--prev .mr-record__icon i { color: #F59E0B; }
.mr-record--prev .mr-record__type { color: #F59E0B; }


/* =========================================================
   Desktop breakpoint for ported prototype sections
   ---------------------------------------------------------
   Desktop revamp (2026-04-16): sections flip from vertical
   stacking to left/right 2-col layouts with per-section
   inline CTAs. Mobile styles above this block are untouched.
   ========================================================= */
@media (min-width: 760px) {
  .lp-container { max-width: 720px; padding: 0 var(--space-2xl); }
  .lp-section { padding: 96px 0; /* prototype literal */ }
  .lp-hero__h1 { font-size: 56px; /* prototype literal */ }
  .lp-hero__sub { font-size: 19px; /* prototype literal */ }
  .lp-problem__sub { font-size: 19px; }
  .lp-problem__h2 { font-size: 44px; /* prototype literal */ }

  .phone { width: 300px; height: 608px; /* prototype literal */ }
  .phone__notch { top: 16px; width: 84px; height: 22px; }
  .phone-statusbar { height: 40px; font-size: 12px; }

  /* =========================================================
     HERO — 2-col grid (copy + CTA left, phone right)
     Full-bleed gradient preserved on .lp-hero; content is
     centered via padding that clamps side gutters to 48px min
     and expands to center a 1100px content band on wide
     viewports. Email input is hidden on desktop (modal carries
     its own field); button sits directly under the subheading
     and is sized up for a landing hero.
     ========================================================= */
  .lp-hero {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "copy  phone"
      "cta   phone";
    column-gap: 56px;
    row-gap: 0;
    padding: 40px max(48px, calc(50% - 550px)) 80px;
  }
  .lp-hero__copy {
    grid-area: copy;
    /* .lp-container's max-width and padding — neutralize inside the grid
       cell so copy fills the left column. */
    max-width: none;
    padding: 0;
    margin-bottom: 0;
    /* Stick to the bottom of row 1 so it meets the CTA at the vertical
       midpoint of the hero (phone in right col dictates total height). */
    align-self: end;
  }
  .lp-hero__phone-stage {
    grid-area: phone;
    padding-bottom: 0;
    align-self: center;
  }
  .lp-hero__cta-anchor {
    grid-area: cta;
    position: static;
    margin: 20px 0 0 0;
    max-width: 320px;
    padding: 0;
    /* Stick to the top of row 2 so it meets the copy at the vertical
       midpoint — paired with .lp-hero__copy { align-self: end }. */
    align-self: start;
    /* Re-enable pointer-events on desktop — mobile sets none on the
       anchor so the sticky floats over a scrollable page, but desktop
       is a static inline form and every field needs to be clickable. */
    pointer-events: auto;
  }
  .lp-hero__cta-anchor .lp-hero-cta { pointer-events: auto; }
  /* Email input stays hidden on desktop — button opens modal, modal
     has its own email input. Keeps the hero CTA zone uncluttered. */
  .lp-hero__cta-anchor .lp-hero-cta__field { display: none; }
  /* All section CTA buttons on desktop share a single sizing block so
     the hero, Section 2 problem CTA, Section 3 scrolly outro, and
     Section 4 final CTA look identical (width 320, height 56, title-md
     label). Override individual per-section button rules elsewhere. */
  .lp-hero__cta-anchor .btn-primary,
  .lp-problem__cta .btn-primary,
  .scrolly__outro .btn-primary,
  .lp-final-cta__button {
    width: 320px;
    max-width: 100%;
    min-height: 56px;
    font-size: var(--text-title-md);
    padding-left: 28px;
    padding-right: 28px;
  }
  .lp-hero__cta-reassure { justify-content: flex-start; margin-top: 12px; }

  /* =========================================================
     PROBLEM — 2-col grid (text + CTA left, patchwork right)
     Scoped via #problem so other .lp-container uses stay at 720px.
     Uses the same content-band centering as hero (max(48px,
     calc(50% - 550px)) side padding) so text column aligns with
     hero/brand-strip left edge.
     ========================================================= */
  #problem .lp-container {
    max-width: none;
    margin: 0;
    padding: 0 max(48px, calc(50% - 550px));
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    grid-template-areas:
      "kicker    patchwork"
      "h2        patchwork"
      "sub       patchwork"
      "cta       patchwork";
    column-gap: 56px;
    row-gap: 14px;
    align-items: start;
  }
  #problem .lp-problem__kicker  { grid-area: kicker; }
  #problem .lp-problem__h2      { grid-area: h2; }
  #problem .lp-patchwork        { grid-area: patchwork; align-self: center; }
  #problem .lp-problem__sub     { grid-area: sub; }
  #problem .lp-problem__cta     { grid-area: cta; margin-top: 16px; }

  /* Patchwork — constrain within its grid cell; cards remain absolute
     inside .lp-patchwork (which is position: relative).
     Spread cards with more vertical stagger so the middle (Reddit)
     card doesn't get sandwiched behind YouTube+Blog. */
  .lp-patchwork { min-height: 500px; margin: 0; }
  .patch-card { max-width: 320px; width: 58%; }
  .patch-card--youtube { top: 0; left: 0; transform: rotate(-5deg); }
  .patch-card--reddit { top: 100px; left: 34%; transform: rotate(2deg); }
  .patch-card--blog { top: 200px; right: 0; left: auto; transform: rotate(-1.5deg); }

  /* =========================================================
     SCROLLYTELLING — sticky 2-col: phone left, header (eyebrow +
     chapter title + sub + dots) right. .scrolly__visual uses
     display: contents so .scrolly__visual-inner becomes a grid item.
     ========================================================= */
  .scrolly__stage {
    padding: 40px max(48px, calc(50% - 550px)) 32px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-template-areas:
      "visual  text"
      "visual  cta";
    column-gap: 64px;
    row-gap: 0;
    align-items: center;
  }
  /* Header now lives in the right column, replacing the old text card */
  .scrolly__header {
    grid-area: text;
    padding: 0;
    text-align: left;
    align-self: end;
    max-width: 520px;
  }
  .scrolly__h2 { font-size: 40px; line-height: 1.2; margin-bottom: 10px; }
  .scrolly__sub { font-size: 16px; }

  /* display: contents lets .scrolly__visual-inner participate in the
     parent grid directly. The mobile-dots variant inside is display:none
     on desktop, so it doesn't occupy a grid slot. */
  .scrolly__visual {
    display: contents;
  }
  .scrolly__visual-inner {
    grid-area: visual;
    justify-self: center;
    align-self: center;
    max-width: 320px;
    height: 620px;
  }

  /* Desktop dots — vertical, pinned to the right gutter of the stage.
     Stage is position: sticky (containing block), so absolute positioning
     puts the dots in the outer gutter without reserving grid space. */
  .scrolly__dots--mobile { display: none; }
  .scrolly__dots--desktop {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    position: absolute;
    top: 50%;
    right: max(16px, calc(50% - 600px));
    transform: translateY(-50%);
    margin-top: 0;
  }
  .scrolly__dots--desktop .scrolly-dot { width: 6px; height: 6px; }
  .scrolly__dots--desktop .scrolly-dot.is-active {
    width: 6px; height: 18px; border-radius: 3px;
  }

  /* Scrolly outro CTA — right column below the header block (grid-area: cta).
     Desktop-only via .lp-cta-inline. align-self: start meets .scrolly__header
     (align-self: end of row 1) at the vertical midpoint. */
  .scrolly__outro {
    grid-area: cta;
    justify-self: start;
    align-self: start;
    margin-top: 20px;
    padding: 0;
    /* Stage has pointer-events: none to let the page scroll through the
       sticky container; re-enable here so the CTA is clickable. */
    pointer-events: auto;
  }

  /* Chapter 4 widget — larger floating widget on desktop */
  .ios-widget { width: 150px; height: 150px; top: -20px; right: -28px; }
  .ios-widget__cat { font-size: 13px; }
  .ios-widget__text { font-size: 11px; }
  .ios-widget__cat-glyph { font-size: 68px; }
}

/* --------------------------------------------------------------------------
   SECTION 4 — Final CTA card (ticket 1a-w1-09)
   Full-bleed salmon band with a centered cream card. This is the only
   salmon-backed band on the page outside the modal submit button
   (functional-spec §6.1, AC-F1).
   -------------------------------------------------------------------------- */
.lp-final-cta {
  /* Full-bleed horizontally — break out of .page-main's max-width +
     side padding so the salmon band extends edge-to-edge. Body has
     overflow-x: clip. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background-color: var(--color-primary);
  padding: var(--space-3xl) var(--space-xl);
  display: flex;
  justify-content: center;
}

.lp-final-cta__inner {
  width: 100%;
  max-width: 520px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xl);
}

/* Logo lockup — white-on-salmon variant. Per functional-spec §2.2 this is
   the ONLY surface where the wordmark renders in white on a salmon
   background. Icon stays pixel-identical to the shipping app icon. */
.brand-lockup--on-salmon {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.brand-lockup--on-salmon .brand-lockup__wordmark {
  font-family: var(--font-display);
  font-size: var(--text-title-md);
  color: var(--color-on-primary); /* white */
  line-height: 1;
}

/* Icon treatment — round the square app-icon PNG inside the salmon
   lockup so it reads as a badge, not a cropped square. */
.brand-lockup--on-salmon .brand-lockup__icon {
  border-radius: 50%;
  object-fit: cover;
}

/* The cream card itself — heavy sticker shadow, rounded, centered. */
.lp-final-cta__card {
  width: 100%;
  background-color: var(--color-background); /* cream */
  border-radius: var(--radius-2xl);
  box-shadow: var(--shadow-sticker-bold);
  padding: var(--space-2xl) var(--space-xl);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
  text-align: center;
}

.lp-final-cta__h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--text-display-md);
  line-height: var(--leading-snug);
  color: var(--color-on-background);
}

.lp-final-cta__sub {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-md);
  line-height: var(--leading-normal);
  color: var(--color-muted);
  max-width: 38ch;
}

.lp-final-cta__button {
  min-height: var(--space-3xl); /* 48px tap target */
  padding-left: var(--space-2xl);
  padding-right: var(--space-2xl);
  margin-top: var(--space-sm);
}

.lp-final-cta__button[aria-disabled="true"] {
  cursor: default;
  opacity: 0.7;
  box-shadow: var(--shadow-none);
}

.lp-final-cta__button[aria-disabled="true"]:hover,
.lp-final-cta__button[aria-disabled="true"]:active {
  background-color: var(--color-primary); /* freeze hover/active */
  transform: none;
}

.lp-final-cta__button[aria-disabled="true"] [class*="ph-"] {
  font-size: 18px;
  line-height: 1;
}

/* Desktop treatment — 2-col inside cream card (heading+sub left, button
   right). Logo lockup stays centered above the card. Salmon band still
   full-bleed, card still centered. */
@media (min-width: 760px) {
  .lp-final-cta { padding: calc(var(--space-3xl) * 1.5) var(--space-xl); }
  .lp-final-cta__inner { max-width: 920px; }
  .lp-final-cta__card {
    padding: calc(var(--space-2xl) * 1.25) calc(var(--space-2xl) * 1.25);
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-areas:
      "h2   btn"
      "sub  btn";
    column-gap: 48px;
    row-gap: 14px;
    align-items: center;
    text-align: left;
  }
  .lp-final-cta__h2 {
    font-size: var(--text-display-lg);
    grid-area: h2;
  }
  .lp-final-cta__sub {
    grid-area: sub;
    max-width: 40ch;
  }
  .lp-final-cta__button {
    grid-area: btn;
    justify-self: end;
    margin-top: 0;
    /* width/height/font-size handled by the shared CTA-sizing rule
       earlier in this @media block. Do not override here. */
  }
}

/* Reveal transition for patchwork */
@media (prefers-reduced-motion: no-preference) {
  .lp-reveal { opacity: 0; transform: translateY(16px); transition: opacity 450ms ease, transform 450ms ease; }
  .lp-reveal.is-in { opacity: 1; transform: translateY(0); }
}

/* --------------------------------------------------------------------------
   Reduced motion guard — targeted, not global.
   The prototype does NOT use a blanket * { transition: 0 !important } rule.
   Scrolly crossfades and dot transitions are functional (content changes),
   not decorative — they must keep working under reduced motion.
   Only the reveal fade-in (Section 2 patchwork) is suppressed.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .lp-reveal { opacity: 1 !important; transform: none !important; }
  .lp-reveal.is-in { transition: none; }
}