:root {
    /* Palette tuned to match trumprx.gov tones */
    --bg: #E0DDCF;
    --bg-alt: #d5d2c2;
    --fg: #333334;
    --fg-secondary: #5a5a5b;
    --muted: #888889;
    --accent: #2d5a3d;
    --accent-hover: #377049;
    --border: #c9c5b5;
    --white: #ECEADD;
    --serif: 'Instrument Serif', Georgia, serif;
    --sans: 'DM Sans', system-ui, sans-serif;
    --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --frame-margin: clamp(12px, 2vw, 24px);
    --frame-radius: clamp(24px, 3vw, 40px);
  }

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

  html { background: var(--bg); }

  body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--sans);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
  }

  ::selection { background: var(--accent); color: white; }

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

  /* ---- NAV ---- */
  .nav {
    position: fixed;
    top: var(--frame-margin); left: 0; right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px clamp(28px, 5vw, 56px);
    transition: top 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                left 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                right 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.4s ease,
                box-shadow 0.4s ease,
                padding 0.4s ease;
  }

  .nav.scrolled {
    top: 12px;
    left: 16px;
    right: 16px;
    background: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(20px) saturate(1.4);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    border-radius: 100px;
    padding: 12px clamp(20px, 3vw, 32px);
    box-shadow: 0 2px 20px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
  }

  /* Adaptive theme — nav floats over a dark section, invert colors */
  .nav.scrolled.nav-theme-dark,
  .nav.nav-static.nav-theme-dark {
    background: rgba(26, 24, 21, 0.5);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(255, 255, 255, 0.06);
  }
  .nav.scrolled.nav-theme-dark .nav-wordmark,
  .nav.nav-static.nav-theme-dark .nav-wordmark { color: #fff; }
  .nav.scrolled.nav-theme-dark .nav-link,
  .nav.nav-static.nav-theme-dark .nav-link { color: rgba(255, 255, 255, 0.78); }
  .nav.scrolled.nav-theme-dark .nav-link:hover,
  .nav.nav-static.nav-theme-dark .nav-link:hover { color: #fff; }
  .nav.scrolled.nav-theme-dark .nav-btn,
  .nav.nav-static.nav-theme-dark .nav-btn {
    background: #fff;
    color: var(--fg);
    border-color: #fff;
  }
  .nav.scrolled.nav-theme-dark .nav-btn:hover,
  .nav.nav-static.nav-theme-dark .nav-btn:hover { background: rgba(255, 255, 255, 0.92); }

  .nav.scrolled .nav-link { color: var(--fg-secondary); }
  .nav.scrolled .nav-link:hover { color: var(--fg); }

  .nav-wordmark {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--sans);
    font-size: 16px;
    font-weight: 500;
    color: white;
    letter-spacing: -0.01em;
    transition: color 0.4s;
  }
  .nav-logo {
    width: 22px;
    height: 22px;
    object-fit: contain;
    /* The shipped logo.png is dark; invert to white over the green hero */
    filter: brightness(0) invert(1);
    transition: filter 0.4s;
  }
  /* On the cream pill (scrolled / static states) — show the dark logo */
  .nav.scrolled .nav-logo,
  .nav.nav-static .nav-logo { filter: none; }
  /* Over a dark section while scrolled — keep the logo white */
  .nav.scrolled.nav-theme-dark .nav-logo,
  .nav.nav-static.nav-theme-dark .nav-logo { filter: brightness(0) invert(1); }

  .nav.scrolled .nav-wordmark { color: var(--fg); }

  .nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
  }

  .nav-link {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255,255,255,0.8);
    transition: color 0.3s;
    letter-spacing: 0.01em;
  }

  .nav.scrolled .nav-link { color: var(--muted); }
  .nav-link:hover { color: white; }
  .nav.scrolled .nav-link:hover { color: var(--fg); }

  .nav-btn {
    padding: 8px 20px;
    font-size: 13px;
    font-weight: 500;
    font-family: var(--sans);
    color: white;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.25);
    border-radius: 100px;
    transition: all 0.3s;
    backdrop-filter: blur(6px);
  }

  .nav.scrolled .nav-btn {
    background: var(--accent);
    border-color: var(--accent);
    color: white;
    backdrop-filter: none;
  }

  .nav-btn:hover { background: rgba(255,255,255,0.2); }
  .nav.scrolled .nav-btn:hover { background: var(--accent-hover); }

  /* ---- HAMBURGER TOGGLE ---- */
  .nav-toggle {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 0;
    cursor: pointer;
    position: relative;
    padding: 0;
    margin-left: auto;
    margin-right: 8px;
  }
  .nav-toggle span {
    display: block;
    position: absolute;
    left: 9px;
    width: 22px;
    height: 1.6px;
    background: #fff;
    border-radius: 2px;
    transition: top 0.3s var(--ease-out), transform 0.3s var(--ease-out),
                opacity 0.2s, background 0.3s;
  }
  .nav-toggle span:nth-child(1) { top: 14px; }
  .nav-toggle span:nth-child(2) { top: 19px; }
  .nav-toggle span:nth-child(3) { top: 24px; }

  /* Bars adopt nav-text color in scrolled / static / dark-theme modes */
  .nav.scrolled .nav-toggle span,
  .nav.nav-static .nav-toggle span { background: var(--fg); }
  .nav.scrolled.nav-theme-dark .nav-toggle span,
  .nav.nav-static.nav-theme-dark .nav-toggle span { background: #fff; }

  /* X state */
  .nav-toggle.is-active span:nth-child(1) { top: 19px; transform: rotate(45deg); }
  .nav-toggle.is-active span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-active span:nth-child(3) { top: 19px; transform: rotate(-45deg); }

  @media (max-width: 760px) {
    .nav-links { display: none; }
    .nav-toggle { display: inline-flex; }
  }

  /* On narrow viewports keep the CTA visible alongside the hamburger,
     just compact it a little so wordmark + button + toggle all fit. */
  @media (max-width: 460px) {
    .nav-btn { padding: 7px 14px; font-size: 12.5px; }
    .nav-toggle { margin-right: 0; }
  }

  /* ---- MOBILE DRAWER ---- */
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 12, 9, 0.45);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s var(--ease-out);
    z-index: 90;
  }
  .nav-backdrop.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .nav-drawer {
    position: fixed;
    top: 0;
    right: 0;
    height: 100vh;
    height: 100dvh;
    width: min(86vw, 360px);
    background: var(--bg);
    z-index: 95;
    transform: translateX(100%);
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    padding: clamp(96px, 18vw, 120px) clamp(28px, 7vw, 44px) clamp(28px, 5vw, 40px);
    display: flex;
    flex-direction: column;
    box-shadow: -20px 0 60px rgba(0, 0, 0, 0.18);
    overflow-y: auto;
  }
  .nav-drawer.is-open { transform: translateX(0); }

  .nav-drawer-links {
    display: flex;
    flex-direction: column;
  }

  .nav-drawer-link {
    display: block;
    padding: 18px 0;
    font-family: var(--serif);
    font-size: clamp(26px, 6vw, 32px);
    font-weight: 400;
    color: var(--fg);
    letter-spacing: -0.015em;
    line-height: 1.1;
    border-bottom: 1px solid var(--border);
    transition: color 0.2s;
  }
  .nav-drawer-link:hover { color: var(--accent); }

  .nav-drawer-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 28px;
    padding: 14px 28px;
    background: var(--accent);
    color: #fff;
    border-radius: 100px;
    font-family: var(--sans);
    font-size: 15px;
    font-weight: 500;
    transition: background 0.3s;
    align-self: flex-start;
  }
  .nav-drawer-cta:hover { background: var(--accent-hover); color: #fff; }

  /* When drawer is open, freeze body scroll */
  body.nav-open { overflow: hidden; }

  /* ---- HERO ---- */
  .hero {
    position: relative;
    height: calc(100vh - 2 * var(--frame-margin));
    height: calc(100dvh - 2 * var(--frame-margin));
    min-height: calc(580px - 2 * var(--frame-margin));
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: var(--frame-margin);
    border-radius: var(--frame-radius);
  }

  .hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 115%;
    object-fit: cover;
    object-position: center 60%;
    transform-origin: center 60%;
    will-change: transform;
  }

  .hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
      rgba(0,0,0,0.18) 0%,
      rgba(0,0,0,0.04) 40%,
      rgba(0,0,0,0.3) 100%);
  }

  .hero-body {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 0 24px;
    max-width: 800px;
    will-change: transform, opacity;
  }

  .hero-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin-bottom: 24px;
    padding: 6px 16px;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 100px;
  }

  .hero h1 {
    font-family: var(--serif);
    font-weight: 400;
    font-size: clamp(2.6rem, 5.8vw, 4.6rem);
    line-height: 1.06;
    color: white;
    letter-spacing: -0.025em;
  }

  .hero-sub {
    font-size: clamp(0.92rem, 1.3vw, 1.05rem);
    font-weight: 400;
    color: rgba(255,255,255,0.95);
    margin-top: 20px;
    line-height: 1.6;
    max-width: 480px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 0 20px rgba(0,0,0,0.4), 0 0 40px rgba(0,0,0,0.2), 0 1px 3px rgba(0,0,0,0.3);
  }

  .hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 32px;
    padding: 14px 32px;
    font-size: 14px;
    font-weight: 500;
    font-family: var(--sans);
    color: var(--fg);
    background: white;
    border-radius: 100px;
    transition: transform 0.2s, box-shadow 0.3s;
    box-shadow: 0 2px 16px rgba(0,0,0,0.1);
  }

  .hero-cta:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(0,0,0,0.15);
  }

  .hero-cta svg {
    width: 14px;
    height: 14px;
    transition: transform 0.2s;
  }

  .hero-cta:hover svg { transform: translateX(2px); }

  .hero-scroll {
    position: absolute;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
  }

  .hero-scroll-line {
    display: block;
    width: 1px;
    height: 48px;
    background: linear-gradient(180deg, rgba(255,255,255,0.5), transparent);
    animation: pulse 2.4s ease-in-out infinite;
    transform-origin: top;
  }

  @keyframes pulse {
    0% { transform: scaleY(0); opacity: 0; }
    30% { opacity: 1; }
    100% { transform: scaleY(1); opacity: 0; }
  }

  /* ---- PITCH (scroll reveal) ---- */
  .pitch-scroll {
    position: relative;
    height: 260vh;
  }

  .pitch {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(24px, 8vw, 120px);
  }

  .pitch-inner {
    max-width: 920px;
    text-align: center;
  }

  .pitch-heading {
    font-family: var(--serif);
    font-size: clamp(2rem, 4.4vw, 3.2rem);
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1.08;
    color: var(--fg);
    margin-bottom: clamp(28px, 4vw, 44px);
    /* Initial state — JS animates opacity + translateY based on scroll */
    opacity: 0;
    transform: translateY(240px);
    will-change: transform, opacity;
  }

  .pitch-text {
    font-family: var(--serif);
    font-size: clamp(1.6rem, 3.4vw, 2.6rem);
    line-height: 1.35;
    letter-spacing: -0.012em;
    /* Initial state — body starts small, JS scales it up as user scrolls */
    transform: scale(0.5);
    transform-origin: top center;
    will-change: transform;
  }

  .pitch-text .pw {
    color: var(--border);
    transition: color 0.4s var(--ease);
  }

  .pitch-text .pw.lit { color: var(--fg); }
  .pitch-text .pw.lit-accent { color: var(--accent); font-style: italic; }

  /* ---- METRICS BAR ---- */
  .metrics {
    padding: clamp(48px, 6vw, 72px) clamp(24px, 6vw, 80px);
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  .metrics-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: clamp(24px, 3vw, 48px);
    max-width: 960px;
    margin: 0 auto;
    text-align: center;
  }

  .metric {
    opacity: 0;
    transform: translateY(16px);
  }

  .metric.visible {
    animation: fadeUp 0.7s var(--ease-out) forwards;
  }

  .metric:nth-child(2).visible { animation-delay: 0.08s; }
  .metric:nth-child(3).visible { animation-delay: 0.16s; }
  .metric:nth-child(4).visible { animation-delay: 0.24s; }

  .metric-value {
    font-family: var(--serif);
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    color: var(--accent);
    line-height: 1;
    letter-spacing: -0.02em;
  }

  .metric-label {
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
    margin-top: 8px;
    line-height: 1.4;
    letter-spacing: 0.01em;
  }

  @media (max-width: 600px) {
    .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  }

  /* ---- STEPS (homepage) ---- */
  .steps {
    padding: clamp(48px, 8vw, 100px) clamp(24px, 6vw, 80px) clamp(40px, 6vw, 80px);
    max-width: 800px;
    margin: 0 auto;
  }

  .steps-header {
    text-align: center;
    margin-bottom: clamp(48px, 6vw, 72px);
  }

  .steps-heading {
    font-family: var(--serif);
    font-size: clamp(1.8rem, 3.2vw, 2.6rem);
    font-weight: 400;
    color: var(--fg);
    letter-spacing: -0.02em;
    line-height: 1.15;
  }

  .steps-row {
    display: flex;
    gap: clamp(24px, 4vw, 48px);
    padding: clamp(32px, 4vw, 48px) 0;
    border-top: 1px solid var(--border);
    opacity: 0;
    transform: translateY(20px);
  }

  .steps-row:last-child {
    border-bottom: 1px solid var(--border);
  }

  .steps-row.visible {
    animation: fadeUp 0.8s var(--ease-out) forwards;
  }

  .steps-row-num {
    font-family: var(--serif);
    font-size: clamp(2.4rem, 4vw, 3.2rem);
    color: var(--accent);
    line-height: 1;
    flex-shrink: 0;
    width: 64px;
    letter-spacing: -0.02em;
  }

  .steps-row-body h3 {
    font-family: var(--serif);
    font-size: clamp(1.2rem, 1.8vw, 1.5rem);
    font-weight: 400;
    color: var(--fg);
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin-bottom: 10px;
  }

  .steps-row-body p {
    font-size: clamp(0.88rem, 1.1vw, 0.95rem);
    font-weight: 300;
    color: var(--fg-secondary);
    line-height: 1.7;
    max-width: 520px;
  }

  .device-logos {
    display: inline-flex;
    align-items: center;
    vertical-align: middle;
    margin-left: 6px;
  }

  .device-card {
    width: 28px;
    height: 28px;
    min-width: 28px;
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 4px;
    border: 1px solid var(--border);
    overflow: hidden;
    position: relative;
  }

  .device-card:first-child {
    margin-left: 0;
  }

  .device-card img {
    width: 16px;
    height: 16px;
    object-fit: contain;
  }

  @media (max-width: 520px) {
    .steps-row { flex-direction: column; gap: 12px; }
    .steps-row-num { width: auto; }
    .device-logos { margin-left: 0; margin-top: 8px; }
  }

  .how-card-desc {
    font-size: clamp(0.84rem, 1vw, 0.9rem);
    font-weight: 300;
    color: var(--fg-secondary);
    line-height: 1.7;
  }

  @media (max-width: 768px) {
    .how-cards { grid-template-columns: 1fr; max-width: 480px; }
    .how-card:nth-child(2).visible,
    .how-card:nth-child(3).visible { animation-delay: 0s; }
  }

  /* ---- SPLIT SECTION ---- */
  .split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 4vw, 56px);
    align-items: center;
    padding: clamp(32px, 5vw, 64px) clamp(24px, 4vw, 48px);
    max-width: 1120px;
    margin: 0 auto;
  }

  .split-img {
    overflow: hidden;
    position: relative;
    border-radius: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-alt);
  }

  .split-img img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    box-shadow: 0 8px 40px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.04);
    transition: transform 6s var(--ease);
  }

  .split-img-cover {
    height: clamp(360px, 38vw, 480px);
  }

  .split-img-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    border-radius: 24px;
  }

  .split-img:hover img {
    transform: scale(1.03);
  }

  .split-body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: clamp(32px, 4vw, 56px) clamp(24px, 3vw, 48px);
  }

  .split-eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent);
    margin-bottom: 16px;
  }

  .split-heading {
    font-family: var(--serif);
    font-size: clamp(1.6rem, 2.8vw, 2.2rem);
    font-weight: 400;
    color: var(--fg);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 18px;
  }

  .split-desc {
    font-size: clamp(0.88rem, 1.1vw, 0.95rem);
    font-weight: 300;
    color: var(--fg-secondary);
    line-height: 1.75;
    max-width: 420px;
  }

  .split-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 24px;
    font-size: 13px;
    font-weight: 500;
    color: var(--accent);
    transition: gap 0.2s;
  }

  .split-link:hover { gap: 10px; }

  .split-link svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
  }

  @media (max-width: 768px) {
    .split { grid-template-columns: 1fr; padding: clamp(16px, 3vw, 24px); }
    .split.reverse .split-img { order: -1; }
  }

  /* ---- CTA / WAITLIST ---- */
  .cta-section {
    padding: clamp(120px, 16vw, 220px) clamp(24px, 8vw, 120px);
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: var(--fg);
    background-image:
      linear-gradient(180deg, rgba(10, 8, 6, 0.55) 0%, rgba(10, 8, 6, 0.78) 100%),
      url('/cta-bg.gif');
    background-size: cover, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    color: white;
    overflow: hidden;
    margin: 0 var(--frame-margin);
    border-radius: var(--frame-radius);
  }

  .cta-glow {
    position: absolute;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(45, 90, 61, 0.15) 0%, transparent 65%);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
  }

  .cta-heading {
    font-family: var(--serif);
    font-size: clamp(2.2rem, 4.5vw, 3.6rem);
    font-weight: 400;
    letter-spacing: -0.025em;
    line-height: 1.08;
    max-width: 560px;
    position: relative;
    opacity: 0;
  }

  .cta-heading.visible {
    animation: fadeUp 0.8s var(--ease-out) forwards;
  }

  .cta-sub {
    font-size: clamp(0.9rem, 1.2vw, 1rem);
    font-weight: 300;
    color: rgba(255,255,255,0.5);
    margin-top: 20px;
    position: relative;
    opacity: 0;
    letter-spacing: 0.01em;
  }

  .cta-sub.visible {
    animation: fadeUp 0.7s var(--ease-out) 0.1s forwards;
  }

  .cta-form {
    display: flex;
    gap: 0;
    margin-top: 48px;
    width: 100%;
    max-width: 480px;
    position: relative;
    opacity: 0;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 100px;
    padding: 5px 5px 5px 8px;
  }

  .cta-form.visible {
    animation: fadeUp 0.7s var(--ease-out) 0.2s forwards;
  }

  .cta-input {
    flex: 1;
    padding: 12px 18px;
    border: none;
    border-radius: 100px;
    background: transparent;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 400;
    color: white;
    outline: none;
  }

  .cta-input::placeholder { color: rgba(255,255,255,0.3); font-weight: 300; }

  .cta-btn {
    padding: 12px 28px;
    background: var(--accent);
    color: white;
    border: none;
    border-radius: 100px;
    font-family: var(--sans);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.3s;
    white-space: nowrap;
    flex-shrink: 0;
  }

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

  .cta-btn-link {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    padding: 14px 42px;
    font-size: 15px;
    margin-top: 8px;
    min-width: 180px;
  }

  @media (max-width: 520px) {
    .cta-form { flex-direction: column; border-radius: 16px; padding: 8px; }
    .cta-btn { width: 100%; border-radius: 100px; }
    .cta-input { padding: 12px 16px; }
  }

  .cta-msg {
    font-size: 14px;
    font-weight: 500;
    margin-top: 14px;
    min-height: 20px;
  }

  /* ---- FOOTER (simple) ---- */
  .footer {
    padding: 40px clamp(24px, 6vw, 80px) 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-top: 1px solid var(--border);
  }

  .footer-left {
    font-size: 12px;
    font-weight: 300;
    color: var(--muted);
    letter-spacing: 0.02em;
  }

  .footer-right {
    display: flex;
    gap: 24px;
  }

  .footer-link {
    font-size: 12px;
    font-weight: 400;
    color: var(--muted);
    transition: color 0.2s;
  }

  .footer-link:hover { color: var(--fg); }

  @media (max-width: 520px) {
    .footer { flex-direction: column; gap: 16px; text-align: center; }
  }

  /* ---- BIG FOOTER (homepage) ---- */
  .big-footer {
    padding: clamp(80px, 12vw, 140px) clamp(24px, 6vw, 80px) clamp(48px, 6vw, 64px);
    text-align: center;
    overflow: hidden;
  }

  .big-footer-wordmark {
    font-family: var(--serif);
    font-size: clamp(4rem, 12vw, 10rem);
    font-weight: 400;
    color: var(--border);
    line-height: 0.9;
    letter-spacing: -0.03em;
    margin-bottom: clamp(32px, 4vw, 48px);
    white-space: nowrap;
  }

  .big-footer-links {
    display: flex;
    justify-content: center;
    gap: clamp(20px, 3vw, 36px);
    flex-wrap: wrap;
    margin-bottom: 24px;
  }

  .big-footer-links a {
    font-size: 13px;
    font-weight: 400;
    color: var(--muted);
    transition: color 0.2s;
  }

  .big-footer-links a:hover {
    color: var(--fg);
  }

  .big-footer-copy {
    font-size: 12px;
    font-weight: 300;
    color: var(--muted);
    letter-spacing: 0.02em;
  }

  .big-footer-disclaimer {
    font-size: 11px;
    font-weight: 300;
    color: var(--muted);
    letter-spacing: 0.01em;
    line-height: 1.65;
    max-width: 720px;
    margin: 12px auto 0;
    opacity: 0.75;
  }

  /* ---- ANIMATIONS ---- */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }

  [data-anim] { opacity: 0; transform: translateY(20px); }
  [data-anim].visible { animation: fadeUp 0.8s var(--ease-out) forwards; }
  [data-delay="1"].visible { animation-delay: 0.1s !important; }
  [data-delay="2"].visible { animation-delay: 0.2s !important; }

/* ---- SUBPAGE NAV (always scrolled look) ---- */
.nav.nav-static {
  top: 12px;
  left: 16px;
  right: 16px;
  background: rgba(255, 255, 255, 0.45);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-radius: 100px;
  padding: 12px clamp(20px, 3vw, 32px);
  box-shadow: 0 2px 20px rgba(0,0,0,0.06), 0 0 0 1px rgba(0,0,0,0.04);
}
.nav.nav-static .nav-wordmark { color: var(--fg); }
.nav.nav-static .nav-link { color: var(--fg-secondary); }
.nav.nav-static .nav-link:hover { color: var(--fg); }
.nav.nav-static .nav-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
  backdrop-filter: none;
}
.nav.nav-static .nav-btn:hover { background: var(--accent-hover); }

/* ---- PAGE HERO (smaller, for subpages) ---- */
.page-hero {
  padding: clamp(140px, 18vw, 220px) clamp(24px, 8vw, 120px) clamp(80px, 10vw, 140px);
  text-align: center;
  max-width: 860px;
  margin: 0 auto;
  position: relative;
}

.page-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  height: 100%;
  background: linear-gradient(180deg, var(--bg-alt) 0%, var(--bg) 100%);
  z-index: -1;
}

.page-hero + .split {
  margin-top: -40px;
}

.page-hero + .split.reverse {
  margin-top: -40px;
}

.page-hero-eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

.page-hero h1 {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(2.6rem, 5.5vw, 4rem);
  line-height: 1.08;
  color: var(--fg);
  letter-spacing: -0.025em;
}


.page-hero p,
.page-hero .page-hero-desc {
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  font-weight: 300;
  color: var(--fg-secondary);
  margin-top: 24px;
  line-height: 1.7;
  max-width: 560px;
  margin-left: auto;
  margin-right: auto;
}

/* ---- CONTENT SECTIONS ---- */
.content-section {
  padding: clamp(64px, 10vw, 120px) clamp(24px, 6vw, 80px);
}

.content-section .inner {
  max-width: 960px;
  margin: 0 auto;
}

.content-section.alt {
  background: var(--bg-alt);
}

.content-heading {
  font-family: var(--serif);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 400;
  color: var(--fg);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: 16px;
}

.content-text {
  font-size: clamp(0.88rem, 1.1vw, 0.95rem);
  font-weight: 300;
  color: var(--fg-secondary);
  line-height: 1.75;
  max-width: 640px;
}

/* Feature grid (for subpages) */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2vw, 24px);
  margin-top: 40px;
}

.feature-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-top: 3px solid var(--border);
  border-radius: 20px;
  padding: clamp(32px, 3.5vw, 48px) clamp(28px, 3vw, 36px);
  transition: border-color 0.4s, box-shadow 0.4s, transform 0.3s;
  position: relative;
}

.feature-card:hover {
  border-top-color: var(--accent);
  box-shadow: 0 12px 40px rgba(45, 90, 61, 0.08);
  transform: translateY(-3px);
}

.feature-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: rgba(45, 90, 61, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  transition: background 0.3s;
}

.feature-card:hover .feature-card-icon {
  background: rgba(45, 90, 61, 0.1);
}

.feature-card-icon svg {
  width: 26px;
  height: 26px;
  stroke: var(--accent);
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.feature-card-title,
.feature-card h3 {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.5vw, 1.3rem);
  font-weight: 400;
  color: var(--fg);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.feature-card-desc,
.feature-card p {
  font-size: clamp(0.84rem, 1vw, 0.9rem);
  font-weight: 300;
  color: var(--fg-secondary);
  line-height: 1.75;
}

@media (max-width: 640px) {
  .feature-grid { grid-template-columns: 1fr; }
}

/* ---- FULL-WIDTH IMAGE BREAK ---- */
.img-break {
  width: 100%;
  height: clamp(300px, 40vw, 500px);
  overflow: hidden;
  position: relative;
}

.img-break img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

.img-break-tall {
  height: clamp(400px, 50vw, 600px);
}

/* ---- PAGE HERO WITH IMAGE ---- */
.page-hero-img {
  width: 100%;
  height: clamp(280px, 35vw, 420px);
  overflow: hidden;
  margin-bottom: clamp(48px, 6vw, 80px);
}

.page-hero-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
}

/* ---- INFO ROWS (replaces feature cards) ---- */
.info-rows {
  margin-top: clamp(32px, 4vw, 48px);
}

.info-row {
  display: flex;
  gap: clamp(24px, 4vw, 56px);
  padding: clamp(28px, 3.5vw, 40px) 0;
  border-top: 1px solid var(--border);
  opacity: 0;
  transform: translateY(16px);
}

.info-row:last-child {
  border-bottom: 1px solid var(--border);
}

.info-row.visible {
  animation: fadeUp 0.7s var(--ease-out) forwards;
}

.info-row h3 {
  font-family: var(--serif);
  font-size: clamp(1.15rem, 1.6vw, 1.35rem);
  font-weight: 400;
  color: var(--fg);
  letter-spacing: -0.01em;
  line-height: 1.25;
  flex-shrink: 0;
  width: clamp(160px, 22vw, 240px);
}

.info-row p {
  font-size: clamp(0.88rem, 1.1vw, 0.95rem);
  font-weight: 300;
  color: var(--fg-secondary);
  line-height: 1.75;
  flex: 1;
}

@media (max-width: 640px) {
  .info-row {
    flex-direction: column;
    gap: 8px;
  }
  .info-row h3 { width: auto; }
}

/* ---- LEGAL PAGES ---- */
.legal-body {
  padding: clamp(140px, 16vw, 180px) clamp(24px, 6vw, 80px) clamp(80px, 10vw, 120px);
  max-width: 720px;
  margin: 0 auto;
}

.legal-body h1 {
  font-family: var(--serif);
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 400;
  color: var(--fg);
  letter-spacing: -0.02em;
  margin-bottom: 8px;
}

.legal-body .legal-updated {
  font-size: 13px;
  font-weight: 300;
  color: var(--muted);
  margin-bottom: 48px;
}

.legal-body h2 {
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.8vw, 1.4rem);
  font-weight: 400;
  color: var(--fg);
  margin-top: 40px;
  margin-bottom: 12px;
}

.legal-body p {
  font-size: 14px;
  font-weight: 300;
  color: var(--fg-secondary);
  line-height: 1.8;
  margin-bottom: 16px;
}

.legal-body ul {
  font-size: 14px;
  font-weight: 300;
  color: var(--fg-secondary);
  line-height: 1.8;
  margin-bottom: 16px;
  padding-left: 20px;
}

.legal-body li {
  margin-bottom: 6px;
}

/* ---- CONTACT FORM ---- */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 480px;
}

.contact-form input,
.contact-form textarea {
  padding: 14px 20px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--white);
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 400;
  color: var(--fg);
  outline: none;
  transition: border-color 0.3s;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--muted);
  font-weight: 300;
}

.contact-form input:focus,
.contact-form textarea:focus {
  border-color: var(--accent);
}

.contact-form textarea {
  min-height: 140px;
  resize: vertical;
}

.contact-form button {
  align-self: flex-start;
  padding: 14px 32px;
  background: var(--accent);
  color: white;
  border: none;
  border-radius: 100px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.3s;
}

.contact-form button:hover {
  background: var(--accent-hover);
}

/* ---- EYEBROW (shared) ---- */
.eyebrow {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 16px;
}

/* ---- SECTION HEADING ---- */
.section-heading {
  font-family: var(--serif);
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 400;
  color: var(--fg);
  letter-spacing: -0.02em;
  line-height: 1.15;
  margin-bottom: clamp(40px, 6vw, 64px);
}

/* ---- CONTENT BODY ---- */
.content-body {
  max-width: 640px;
}

.content-body p {
  font-size: clamp(0.88rem, 1.1vw, 0.95rem);
  font-weight: 300;
  color: var(--fg-secondary);
  line-height: 1.8;
  margin-bottom: 20px;
}

.content-body p:last-child {
  margin-bottom: 0;
}

/* ---- DISCLAIMER ---- */
.disclaimer {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(8px, 2vw, 16px) 0;
}

.disclaimer-heading {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 12px;
}

.disclaimer p {
  font-size: clamp(0.88rem, 1.1vw, 0.95rem);
  font-weight: 300;
  color: var(--fg-secondary);
  line-height: 1.75;
}

/* Steps list for subpages */
.steps-list {
  display: flex;
  flex-direction: column;
  gap: 48px;
  margin-top: 48px;
  max-width: 640px;
}

.step-item,
.step {
  display: flex;
  gap: 24px;
}

.step-number {
  font-family: var(--serif);
  font-size: 32px;
  color: var(--accent);
  line-height: 1;
  flex-shrink: 0;
  width: 40px;
}

.step-content h2,
.step-content h3 {
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.5vw, 1.25rem);
  font-weight: 400;
  color: var(--fg);
  margin-bottom: 8px;
}

.step-content p {
  font-size: clamp(0.84rem, 1vw, 0.9rem);
  font-weight: 300;
  color: var(--fg-secondary);
  line-height: 1.7;
}

.step-content a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s;
}

.step-content a:hover {
  color: var(--accent-hover);
}

/* Devices list */
.devices {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 24px;
}

.device-tag {
  padding: 8px 20px;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 400;
  color: var(--fg-secondary);
  background: var(--white);
}


/* Section 4 — FAQ accordion */
.faq-section {
  padding: clamp(96px, 12vw, 160px) clamp(20px, 5vw, 48px);
}
.faq-inner {
  max-width: 820px;
  margin: 0 auto;
}
.faq-heading {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.06;
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 72px);
  color: var(--fg);
}
.faq-list {
  border-top: 1px solid var(--border);
}
.faq-item {
  border-bottom: 1px solid var(--border);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: clamp(20px, 2.4vw, 28px) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  font-family: var(--serif);
  font-size: clamp(20px, 2.1vw, 26px);
  font-weight: 400;
  color: var(--fg);
  letter-spacing: -0.01em;
  user-select: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-toggle {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--fg);
  transition: transform 0.3s var(--ease-out),
              background 0.3s var(--ease-out),
              color 0.3s var(--ease-out);
}
.faq-toggle svg { width: 14px; height: 14px; }
.faq-item[open] .faq-toggle {
  transform: rotate(45deg);
  background: var(--fg);
  color: var(--white);
}
.faq-body {
  padding: 0 0 clamp(20px, 2.4vw, 28px);
  max-width: 720px;
}
.faq-body p {
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.7;
  color: var(--fg-secondary);
}

@media (max-width: 768px) {
  .faq-item summary { font-size: 19px; gap: 16px; }
  .faq-toggle { width: 28px; height: 28px; }
  .faq-toggle svg { width: 12px; height: 12px; }
}

/* ==========================================================
   HOMEPAGE VISUAL ADDITIONS
   Hero stage + spillover bubbles, full-bleed silhouettes
   (contain + warm bg), browser-frame dashboards, alternating
   component rows, large 100+ stat callout.
   ========================================================== */

/* iMessage bubbles (recreated in CSS, no phone frame).
   Standard iOS tail: a colored ::before extends past the corner, then a
   bg-colored ::after with a rounded inner radius "bites" a curve out of it,
   leaving the swooping tail shape. */
.coach-bubble,
.user-bubble {
  border-radius: 18px;
  padding: 12px 16px;
  max-width: 360px;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', system-ui, sans-serif;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  word-wrap: break-word;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  position: relative;
}
.coach-bubble { background: #3A3A3C; color: #fff; align-self: flex-start; }
.user-bubble  { background: #007AFF; color: #fff; align-self: flex-end;  }

/* Received-message tail (bottom-left, gray) */
.coach-bubble::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: -7px;
  height: 17px;
  width: 20px;
  background: #3A3A3C;
  border-bottom-right-radius: 16px 14px;
}
.coach-bubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -26px;
  width: 26px;
  height: 17px;
  background: var(--white);
  border-bottom-right-radius: 10px;
}

/* Sent-message tail (bottom-right, blue) */
.user-bubble::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: -7px;
  height: 17px;
  width: 20px;
  background: #007AFF;
  border-bottom-left-radius: 16px 14px;
}
.user-bubble::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: -26px;
  width: 26px;
  height: 17px;
  background: var(--white);
  border-bottom-left-radius: 10px;
}

.bubble-tilt-left  { transform: rotate(-1.8deg); }
.bubble-tilt-right { transform: rotate(2deg); }

.bubble-cluster {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
}
.bubble-cluster-large { gap: 18px; }

/* Full-bleed cinematic image bands — thin and wide, not dominant. */
.full-bleed-image {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  height: 400px;
  overflow: hidden;
  background-color: #C44518;
}
.full-bleed-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
@media (max-width: 768px) {
  .full-bleed-image { height: 280px; }
}

/* Section 3: components — each step is its own viewport-tall card.
   Cards are sticky-pinned at top:0 so as the user scrolls, the next
   card slides up and covers the previous one (Superpower-style stack).
   The user feels like they're sitting still while content swaps in. */
.components {
  padding: clamp(60px, 8vw, 100px) clamp(16px, 4vw, 48px) clamp(80px, 10vw, 140px);
  max-width: 1280px;
  margin: 0 auto;
}
.components-header {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 64px);
}
.component-row {
  position: sticky;
  top: clamp(80px, 10vh, 120px);
  /* Fill the rest of the viewport below the nav offset, so the next card
     in the stack does not peek up from the bottom while this one is still
     pinned. With the previous 76vh height there was a ~24vh gap at the
     bottom where card N+1 was visible underneath card N's bottom edge. */
  min-height: calc(100vh - clamp(80px, 10vh, 120px));
  min-height: calc(100dvh - clamp(80px, 10vh, 120px));
  display: grid;
  grid-template-columns: 1.2fr 0.85fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
  margin: 0;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: clamp(20px, 2.4vw, 32px);
  padding: clamp(36px, 5vw, 72px) clamp(28px, 5vw, 64px);
  box-shadow: 0 -16px 40px rgba(26, 24, 21, 0.08);
}
.component-row.reverse { grid-template-columns: 0.85fr 1.2fr; }
.component-row:last-child { margin-bottom: 0; }
.component-row.reverse .component-visual { order: 2; }
.component-row.reverse .component-text   { order: 1; }

.component-text { max-width: 480px; }
.component-num {
  display: inline-block;
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 36px);
  color: var(--muted);
  line-height: 1;
  margin-bottom: 16px;
  letter-spacing: -0.02em;
}
.component-text h3 {
  font-family: var(--serif);
  font-size: clamp(28px, 3.4vw, 38px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--fg);
  margin-bottom: 16px;
}
.component-text p {
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.6;
  color: var(--fg-secondary);
}

@media (max-width: 768px) {
  /* Keep the sticky-stack behaviour on mobile so each card visually
     covers the previous one. Cards stack to a single column and content
     is compressed so everything fits within the pinned viewport. */
  .component-row,
  .component-row.reverse {
    position: sticky;
    top: 16px;
    /* Match the viewport-fill behaviour from desktop: card occupies the
       full visible area below its top offset so the next card cannot
       peek up from the bottom while this one is still pinned. */
    min-height: calc(100vh - 16px);
    min-height: calc(100dvh - 16px);
    grid-template-columns: 1fr;
    gap: 24px;
    margin-bottom: 0;
    padding: 28px 20px;
    border-radius: 18px;
  }
  .component-row.reverse .component-visual,
  .component-row.reverse .component-text { order: 0; }
  .component-text h3 { font-size: 26px; line-height: 1.1; }
  .component-text p { font-size: 14.5px; line-height: 1.55; }

  /* Bloodwork — tighten so the stat + long bubble fit in viewport */
  .bloodwork-visual { gap: 22px; padding: 4px 0; }
  .stat-callout-number { font-size: 60px; }
  .stat-callout-label  { font-size: 10px; letter-spacing: 0.18em; margin-top: 8px; }
  .bloodwork-visual .coach-bubble {
    font-size: 12.5px;
    line-height: 1.45;
    padding: 9px 13px;
    max-width: none;
  }

  /* Care-team image — cap height so card 1 also fits */
  .care-team-card { max-width: 320px; }

  /* Logo orbit — already responsive but make sure it doesn't dominate */
  .logo-orbit { max-width: 280px; }
}

/* Browser frame for dashboard screenshots */
.browser-frame {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.06);
}
.browser-frame-bar {
  background: #F0F0F0;
  height: 32px;
  padding: 0 14px;
  display: flex;
  gap: 8px;
  align-items: center;
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}
.browser-frame-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: inline-block;
}
.browser-frame-dot.red    { background: #FF5F57; }
.browser-frame-dot.yellow { background: #FEBC2E; }
.browser-frame-dot.green  { background: #28C840; }
.browser-frame-body {
  padding: 12px;
}
.browser-frame img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .browser-frame { width: 90%; margin: 0 auto; }
  .browser-frame-body { padding: 10px; }
}

/* Bloodwork visual (component 02) — generous breathing room around the
   100+ stat so it feels intentional, not crowded. */
.bloodwork-visual {
  display: flex;
  flex-direction: column;
  gap: 60px;
  padding: 16px 8px;
}
.stat-callout {
  font-family: var(--serif);
  text-align: center;
  line-height: 1;
}
.stat-callout-number {
  display: block;
  font-size: clamp(64px, 11vw, 120px);
  font-weight: 400;
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: var(--fg);
}
.stat-callout-label {
  display: block;
  font-family: var(--sans);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--muted);
  margin-top: 16px;
  font-weight: 500;
}
@media (max-width: 768px) {
  .bloodwork-visual { gap: 40px; }
  .stat-callout-label { font-size: 11px; letter-spacing: 0.2em; margin-top: 12px; }
}

/* Component 01 — Care Team card (replaces provider dashboard).
   The image already has its own white card background and shadow,
   so we just give it a soft outer rounded clip + drop shadow. */
.care-team-card {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.12);
  background: #fff;
}
.care-team-card img {
  width: 100%;
  height: auto;
  display: block;
}

/* Component 03 — Wearable orbit. A wheel of brand-logo discs rotates
   around a centered Pymander mark; each logo counter-rotates so the
   wordmarks stay upright while the wheel spins. */
.logo-orbit {
  --orbit-radius: 170px;
  --orbit-item: 80px;
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  max-width: 460px;
  margin: 0 auto;
}
.logo-orbit-track {
  position: absolute;
  inset: 0;
  animation: orbit-spin 40s linear infinite;
}
.logo-orbit-item {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--orbit-item);
  height: var(--orbit-item);
  margin: calc(var(--orbit-item) * -0.5);  /* center on parent's centerpoint */
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  /* Place each item on the circle: rotate to angle, push outward by radius */
  transform: rotate(var(--angle)) translateY(calc(var(--orbit-radius) * -1));
}
.logo-orbit-item img {
  max-width: 60%;
  max-height: 52%;
  object-fit: contain;
  /* Counter-rotate to keep logo upright as the wheel spins */
  animation: orbit-counter-spin 40s linear infinite;
}
.logo-orbit-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 96px;
  height: 96px;
  margin: -48px;
  border-radius: 50%;
  background: var(--fg);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.22);
}
.logo-orbit-center img {
  width: 56%;
  height: 56%;
  object-fit: contain;
  filter: brightness(0) invert(1);  /* render Pymander mark in white */
}

@keyframes orbit-spin         { to { transform: rotate(360deg); } }
@keyframes orbit-counter-spin { to { transform: rotate(-360deg); } }

@media (max-width: 768px) {
  .logo-orbit {
    --orbit-radius: 115px;
    --orbit-item: 60px;
    max-width: 320px;
  }
  .logo-orbit-item img { max-width: 64%; max-height: 54%; }
  .logo-orbit-center { width: 76px; height: 76px; margin: -38px; }
}

@media (prefers-reduced-motion: reduce) {
  .logo-orbit-track,
  .logo-orbit-item img { animation: none; }
}

/* AI Coach bubble cluster (component 04) — tighter sizing/spacing */
.component-row .bubble-cluster-large {
  gap: 12px;
  align-items: stretch;
  max-width: 360px;
  margin: 0 auto;
}
.component-row .bubble-cluster-large .coach-bubble,
.component-row .bubble-cluster-large .user-bubble {
  max-width: 320px;
  font-size: 14px;
  padding: 11px 15px;
}

/* Component 05 — Prescription Fulfillment.
   Scene layout: large centered serif headline with the NAD+ vial
   floating behind it and pills/vials scattered at the corners.
   Inspired by the TrumpRx-style "scattered apothecary" composition. */
.component-row.scene,
.component-row.scene.reverse {
  grid-template-columns: 1fr;
  text-align: center;
  position: relative;
  overflow: hidden;
  padding: clamp(72px, 10vw, 140px) clamp(24px, 5vw, 64px);
}

.component-row.scene .component-text {
  position: relative;
  z-index: 3;
  max-width: 920px;
  margin: 0 auto;
  text-align: center;
  display: block;
}
.component-row.scene .component-num {
  display: block;
  margin-bottom: 20px;
  text-align: center;
}
.component-row.scene .component-text h3 {
  font-size: clamp(2.6rem, 6.4vw, 5rem);
  line-height: 1.02;
  letter-spacing: -0.025em;
  margin-bottom: 28px;
}
.component-row.scene .component-text p {
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  line-height: 1.55;
  max-width: 580px;
  margin: 0 auto;
  color: var(--fg-secondary);
}

/* Scattered pieces */
.scene-vial,
.scene-pill {
  position: absolute;
  pointer-events: none;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.18));
  z-index: 1;
}
.scene-vial {
  width: clamp(70px, 8vw, 110px);
  bottom: 10%;
  left: 5%;
  transform: rotate(-4deg);
  z-index: 1;
  /* Tucked into the bottom-left corner with breathing room from pills */
}
.scene-pill-pink {
  width: clamp(60px, 7.5vw, 110px);
  top: 16%;
  left: 9%;
  transform: rotate(-12deg);
}
.scene-pill-terra {
  width: clamp(55px, 6.5vw, 95px);
  top: 18%;
  right: 11%;
  transform: rotate(15deg);
}
.scene-pill-sage {
  width: clamp(70px, 8.5vw, 125px);
  bottom: 16%;
  right: 9%;
  transform: rotate(8deg);
}

@media (max-width: 768px) {
  .component-row.scene {
    padding: 56px 22px 64px;
    min-height: 480px;  /* Give the scattered pieces room without blocking text */
  }
  .component-row.scene .component-text h3 {
    font-size: clamp(1.8rem, 7vw, 2.4rem);
  }
  .component-row.scene .component-text p {
    font-size: 14px;
    max-width: 360px;
  }
  .scene-vial      { width: 60px; bottom: 6%; left: 4%; }
  .scene-pill-pink  { top: 5%;  left: 5%;   width: 46px; }
  .scene-pill-terra { top: 6%;  right: 5%;  width: 40px; }
  .scene-pill-sage  { bottom: 7%; right: 5%; width: 52px; }
}

/* Reveal animation for the new image elements */
.full-bleed-image {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
.full-bleed-image.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Component cards are sticky-stacked — no per-card reveal animation,
   the natural sticky behaviour produces the slide-up coverage. */