:root {
      --primary: #2C5DE2;
      --primary-hover: #2451CC;
      --dark: #0F172A;
      --dark-card: #1E293B;
      --surface: #F8FAFC;
      --success: #0E9586;
      --warning: #DB7706;
      --danger: #DC2828;
    }

    * { box-sizing: border-box; }

    /* ═══════════════════════════════════════════ */
    /* CINEMATIC SCROLL ANIMATION SYSTEM           */
    /* Inspired by WHOOP's scroll choreography     */
    /* ═══════════════════════════════════════════ */

    /* ═══════════════════════════════════════════ */
    /* NAV LOGO ENTRY ANIMATION                    */
    /* Logo slides in, text types out in header     */
    /* ═══════════════════════════════════════════ */

    .nav-logo-img {
      opacity: 0;
      transform: translateX(-30px) scale(0.7);
      transition: opacity 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
                  transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
    .nav-logo-img.entered {
      opacity: 1;
      transform: translateX(0) scale(1);
    }

    .nav-logo-text {
      overflow: hidden;
    }
    .nav-text-letter {
      display: inline-block;
      opacity: 0;
      transform: translateX(-4px);
      filter: blur(3px);
      transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), filter 0.25s ease;
    }
    .nav-text-letter.visible {
      opacity: 1;
      transform: translateX(0);
      filter: blur(0);
    }
    .nav-text-letter.space {
      width: 5px;
    }

    @media (prefers-reduced-motion: reduce) {
      .nav-logo-img { opacity: 1 !important; transform: none !important; transition: none !important; }
      .nav-text-letter { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
    }

    /* Lenis overrides */
    html.lenis, html.lenis body { height: auto; }
    .lenis.lenis-smooth { scroll-behavior: auto !important; }
    .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }

    /* Base reveal — all animated elements start hidden
       (no `filter` in will-change: forcing layerization on ~50 elements
        starves the compositor that the scroll-scrub set-pieces rely on) */
    /* Reveal — one quiet opacity fade. The per-variant transforms (fade-up,
       scale-up, slide, blur) and the [data-delay] stagger cascade were stripped
       (Rams #5 unobtrusive / #10 as-little-design): content is the figure, and
       motion recedes to a single unobtrusive fade as a section scrolls in. */
    [data-reveal] {
      opacity: 0;
      transition: opacity 0.55s ease;
    }
    [data-reveal="fade-up"],
    [data-reveal="fade-in"],
    [data-reveal="scale-up"],
    [data-reveal="slide-left"],
    [data-reveal="slide-right"],
    [data-reveal="blur-up"] {
      transform: none;
      filter: none;
    }
    [data-reveal].revealed { opacity: 1; }

    /* ── Line Reveal (the hero headline's single entrance — retained) ── */
    .line-reveal .line-wrap {
      overflow: hidden;
      display: block;
    }
    .line-reveal .line-inner {
      display: block;
      transform: translateY(105%);
      transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .line-reveal.revealed .line-inner {
      transform: translateY(0);
    }

    /* ── Counter (number count-up) ── */
    .counter-animate {
      opacity: 0;
      transition: opacity 0.6s ease;
    }
    .counter-animate.counted {
      opacity: 1;
    }

    /* Parallax layer helpers removed (Rams #5/#10 — scroll decoration). */

    /* ── Scroll progress bar ── */
    .scroll-progress {
      position: fixed;
      top: 0;
      left: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--primary), #60A5FA);
      z-index: 9999;
      transform-origin: left;
      transform: scaleX(0);
      transition: none;
    }

    /* ── Section overlap / depth (dark sections slightly overlap) ── */
    .section-overlap {
      position: relative;
      z-index: 2;
      margin-top: -48px;
      border-radius: 32px 32px 0 0;
    }
    .section-overlap-target {
      padding-bottom: 48px;
    }

    /* ── Hero cinematic entry ── */
    .hero-title-word {
      display: inline-block;
      opacity: 0;
      transform: translateY(30px);
      filter: blur(8px);
      transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                  transform 0.6s cubic-bezier(0.16, 1, 0.3, 1),
                  filter 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .hero-title-word.revealed {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }
    .hero-title-word em {
      font-style: italic;
    }

    /* Typographic craft — balance display headings so lines break evenly (no
       orphan last words on the 72px/48px heads); let body copy avoid orphans. */
    h1, h2, h3 { text-wrap: balance; }
    p { text-wrap: pretty; }

    /* Hero glow-orb pulse removed (Rams #5 — idle background animation). */

    /* Backward compat: keep .fade-up working for any missed elements */
    .fade-up {
      opacity: 0;
      transform: translateY(32px);
      transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .fade-up.visible {
      opacity: 1;
      transform: translateY(0);
    }
    .fade-up-delay-1 { transition-delay: 0.1s; }
    .fade-up-delay-2 { transition-delay: 0.2s; }
    .fade-up-delay-3 { transition-delay: 0.3s; }
    .fade-up-delay-4 { transition-delay: 0.4s; }
    .fade-up-delay-5 { transition-delay: 0.5s; }

    @media (prefers-reduced-motion: reduce) {
      [data-reveal], .fade-up, .hero-title-word, .counter-animate, .line-reveal .line-inner {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
        transition: none !important;
      }
      .line-reveal .line-inner { transform: translateY(0) !important; }
      .scroll-progress { display: none; }
      .glow-orb { animation: none; }
    }

    /* ═══════════════════════════════════════════ */
    /* SIGNUP MODAL — Premium Onboarding            */
    /* ═══════════════════════════════════════════ */

    .signup-overlay {
      position: fixed;
      inset: 0;
      z-index: 10000;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .signup-overlay.open {
      opacity: 1 !important;
      pointer-events: all !important;
    }
    .signup-backdrop {
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.6);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
    }
    .signup-modal {
      position: relative;
      width: 100%;
      max-width: 960px;
      max-height: 90vh;
      margin: 16px;
      border-radius: 24px;
      overflow: hidden;
      display: grid;
      grid-template-columns: 1fr;
      background: #0F172A;
      box-shadow:
        0 0 0 1px rgba(255,255,255,0.06),
        0 25px 80px -12px rgba(0,0,0,0.7),
        0 0 120px -40px rgba(44, 93, 226, 0.2);
      transform: translateY(24px) scale(0.97);
      transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @media (min-width: 768px) {
      .signup-modal { grid-template-columns: 1fr 1fr; }
    }
    .signup-overlay.open .signup-modal {
      transform: translateY(0) scale(1) !important;
    }

    /* Left panel — form */
    .signup-form-panel {
      padding: 40px 36px;
      display: flex;
      flex-direction: column;
      position: relative;
      overflow: hidden;
    }
    @media (min-width: 768px) {
      .signup-form-panel { padding: 48px 44px; }
    }
    /* Faint glow behind heading */
    .signup-form-panel::before {
      content: '';
      position: absolute;
      top: -120px;
      left: -80px;
      width: 320px;
      height: 320px;
      background: radial-gradient(circle, rgba(44,93,226,0.18) 0%, transparent 65%);
      filter: blur(10px);
      pointer-events: none;
    }
    .signup-form-panel > div { position: relative; z-index: 1; }

    /* Right panel — visual proof (luminous) */
    .signup-visual-panel {
      display: none;
      background:
        radial-gradient(120% 90% at 85% 8%, rgba(44,93,226,0.28) 0%, transparent 48%),
        radial-gradient(110% 80% at 8% 100%, rgba(14,149,134,0.20) 0%, transparent 52%),
        radial-gradient(90% 70% at 50% 50%, rgba(60,131,246,0.10) 0%, transparent 70%),
        linear-gradient(150deg, #15213b 0%, #0c1424 55%, #0f1b33 100%);
      padding: 44px 36px;
      position: relative;
      overflow: hidden;
      align-items: center;
      justify-content: center;
    }
    @media (min-width: 768px) {
      .signup-visual-panel { display: flex; }
    }
    /* Fine dot-grid texture */
    .signup-visual-panel::before {
      content: '';
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(255,255,255,0.05) 1px, transparent 1px);
      background-size: 22px 22px;
      mask-image: radial-gradient(circle at 50% 42%, #000 30%, transparent 78%);
      -webkit-mask-image: radial-gradient(circle at 50% 42%, #000 30%, transparent 78%);
      pointer-events: none;
    }
    /* Drifting aurora glow */
    .signup-visual-panel::after {
      content: '';
      position: absolute;
      top: -30%;
      right: -25%;
      width: 380px;
      height: 380px;
      background: radial-gradient(circle, rgba(44,93,226,0.35) 0%, transparent 62%);
      filter: blur(20px);
      pointer-events: none;
      animation: aurora-drift 12s ease-in-out infinite;
    }
    @keyframes aurora-drift {
      0%, 100% { transform: translate(0, 0) scale(1); opacity: 0.8; }
      50% { transform: translate(-40px, 50px) scale(1.18); opacity: 1; }
    }
    /* Glowing halo behind phone */
    .signup-phone-halo {
      position: absolute;
      top: 50%;
      left: 50%;
      width: 280px;
      height: 280px;
      transform: translate(-50%, -75%);
      background: radial-gradient(circle, rgba(60,131,246,0.30) 0%, transparent 60%);
      filter: blur(24px);
      pointer-events: none;
    }
    @media (prefers-reduced-motion: reduce) {
      .signup-visual-panel::after { animation: none; }
    }

    /* Form inputs */
    .signup-label {
      display: block;
      font-size: 12px;
      font-weight: 500;
      color: rgba(255,255,255,0.5);
      letter-spacing: 0.04em;
      text-transform: uppercase;
      margin-bottom: 6px;
    }
    /* Input with leading icon */
    .signup-field { position: relative; }
    .signup-field-icon {
      position: absolute;
      left: 15px;
      top: 50%;
      transform: translateY(-50%);
      color: rgba(255,255,255,0.3);
      pointer-events: none;
      transition: color 0.2s ease;
    }
    .signup-field:focus-within .signup-field-icon { color: var(--primary); }

    .signup-input {
      width: 100%;
      height: 50px;
      padding: 0 16px 0 44px;
      border-radius: 13px;
      border: 1px solid rgba(255,255,255,0.09);
      background: rgba(255,255,255,0.035);
      color: #fff;
      font-size: 15px;
      font-family: 'DM Sans', system-ui, sans-serif;
      outline: none;
      transition: border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    }
    .signup-input.no-icon { padding-left: 16px; }
    .signup-input::placeholder {
      color: rgba(255,255,255,0.22);
    }
    .signup-input:focus {
      border-color: var(--primary);
      background: rgba(44, 93, 226, 0.07);
      box-shadow: 0 0 0 4px rgba(44, 93, 226, 0.14);
    }
    .signup-btn {
      position: relative;
      width: 100%;
      height: 52px;
      border-radius: 14px;
      border: none;
      background: linear-gradient(180deg, #3D6BEA 0%, #2C5DE2 100%);
      color: #fff;
      font-size: 15px;
      font-weight: 600;
      font-family: 'DM Sans', system-ui, sans-serif;
      cursor: pointer;
      overflow: hidden;
      transition: transform 0.15s ease, box-shadow 0.25s ease, filter 0.2s ease;
      box-shadow: 0 6px 20px -6px rgba(44, 93, 226, 0.55), inset 0 1px 0 rgba(255,255,255,0.18);
    }
    /* Sheen sweep on hover */
    .signup-btn::after {
      content: '';
      position: absolute;
      top: 0;
      left: -120%;
      width: 60%;
      height: 100%;
      background: linear-gradient(100deg, transparent, rgba(255,255,255,0.25), transparent);
      transform: skewX(-18deg);
      transition: left 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .signup-btn:hover {
      transform: translateY(-1px);
      filter: brightness(1.06);
      box-shadow: 0 10px 28px -6px rgba(44, 93, 226, 0.65), inset 0 1px 0 rgba(255,255,255,0.22);
    }
    .signup-btn:hover::after { left: 130%; }
    .signup-btn:active { transform: translateY(0); }
    .signup-btn svg { transition: transform 0.25s ease; }
    .signup-btn:hover svg { transform: translateX(3px); }

    /* Role selection cards */
    .role-card {
      padding: 20px;
      border-radius: 16px;
      border: 1.5px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.03);
      cursor: pointer;
      transition: all 0.25s ease;
      display: flex;
      align-items: center;
      gap: 16px;
    }
    .role-card:hover {
      border-color: rgba(255,255,255,0.15);
      background: rgba(255,255,255,0.05);
    }
    .role-card.selected {
      border-color: var(--primary);
      background: rgba(44, 93, 226, 0.1);
      box-shadow: 0 0 0 3px rgba(44, 93, 226, 0.12);
    }
    .role-card-icon {
      width: 48px;
      height: 48px;
      border-radius: 14px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
    }

    /* Steps indicator */
    .step-indicator {
      display: flex;
      gap: 8px;
      margin-bottom: 32px;
    }
    .step-dot {
      height: 3px;
      border-radius: 3px;
      flex: 1;
      background: rgba(255,255,255,0.1);
      transition: background 0.4s ease;
    }
    .step-dot.active {
      background: var(--primary);
    }
    .step-dot.done {
      background: var(--success);
    }

    /* Close button */
    .signup-close {
      position: absolute;
      top: 16px;
      right: 16px;
      width: 36px;
      height: 36px;
      border-radius: 10px;
      border: none;
      background: rgba(255,255,255,0.06);
      color: rgba(255,255,255,0.4);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.2s ease, color 0.2s ease;
      z-index: 10;
    }
    .signup-close:hover {
      background: rgba(255,255,255,0.1);
      color: rgba(255,255,255,0.8);
    }

    /* Floating mini phone in visual panel */
    .signup-phone-float {
      width: 200px;
      border-radius: 28px;
      background: #000;
      padding: 8px;
      box-shadow: 0 20px 60px -15px rgba(0,0,0,0.6), 0 0 60px -20px rgba(44,93,226,0.2);
      transform: rotate(-4deg);
      transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .signup-phone-float .phone-screen-mini {
      width: 100%;
      aspect-ratio: 375/812;
      border-radius: 20px;
      overflow: hidden;
    }

    /* iPhone mockup */
    .phone-frame {
      position: relative;
      width: 280px;
      border-radius: 44px;
      background: linear-gradient(150deg, #34343a 0%, #0b0b0d 42%, #1a1a1f 100%);
      padding: 11px;
      /* Tight, grounded shadow — no wide side-bleed glow flanking the phone */
      box-shadow:
        0 1px 2px rgba(255,255,255,0.18),
        0 2px 6px rgba(0,0,0,0.4),
        0 22px 40px -26px rgba(0,0,0,0.55);
    }
    /* Thin chrome inner bezel highlight */
    .phone-frame::before {
      content: '';
      position: absolute;
      inset: 5px;
      border-radius: 36px;
      box-shadow: inset 0 0 0 1.5px rgba(255,255,255,0.06);
      pointer-events: none;
      z-index: 12;
    }
    .phone-screen {
      position: relative;
      width: 100%;
      /* Matches the real app screenshots (~0.55) so they fill the frame with no clipped content */
      aspect-ratio: 0.55;
      border-radius: 32px;
      overflow: hidden;
      background: #F1F5F9;
    }
    .phone-screen img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: top center;
    }
    /* Subtle glass sheen across the screen */
    .phone-screen::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(125deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0.02) 22%, rgba(255,255,255,0) 46%);
      pointer-events: none;
      z-index: 4;
    }
    /* iOS status bar + Dynamic Island (injected into each frame by site.js) */
    .phone-status {
      position: absolute;
      top: 11px; left: 11px; right: 11px;
      height: 33px;
      border-radius: 32px 32px 0 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 18px;
      background: rgba(248,250,252,0.40);
      backdrop-filter: blur(7px);
      -webkit-backdrop-filter: blur(7px);
      z-index: 8;
      pointer-events: none;
    }
    .phone-status-time { font-size: 11px; font-weight: 700; color: #0F172A; font-variant-numeric: tabular-nums; }
    .phone-status-icons { display: flex; align-items: center; gap: 5px; color: #0F172A; }
    .phone-status-icons svg { display: block; }
    .phone-status-island {
      position: absolute; top: 8px; left: 50%; transform: translateX(-50%);
      width: 84px; height: 25px; background: #000; border-radius: 14px; z-index: 9;
    }

    .phone-frame-sm {
      width: 220px;
      border-radius: 36px;
      padding: 9px;
    }
    .phone-frame-sm::before {
      inset: 4px;
      border-radius: 30px;
      width: auto; height: auto;
    }
    .phone-frame-sm .phone-status { top: 9px; left: 9px; right: 9px; height: 26px; border-radius: 26px 26px 0 0; padding: 0 13px; }
    .phone-frame-sm .phone-status-time { font-size: 9px; }
    .phone-frame-sm .phone-status-island { width: 62px; height: 18px; top: 7px; }
    .phone-frame-sm .phone-screen {
      border-radius: 26px;
    }

    /* Tour tab active */
    .tour-tab {
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .tour-tab.active {
      background: var(--primary);
      color: #fff;
      box-shadow: 0 4px 14px -3px rgba(44, 93, 226, 0.5);
    }

    /* Accordion item */
    .accordion-item {
      border-left: 3px solid transparent;
      transition: all 0.3s ease;
      cursor: pointer;
    }
    .accordion-item.active {
      border-left-color: var(--primary);
      background: rgba(44, 93, 226, 0.05);
    }
    .accordion-item .accordion-body {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
      opacity: 0;
    }
    .accordion-item.active .accordion-body {
      max-height: 200px;
      opacity: 1;
    }
    .accordion-item .accordion-number {
      color: #CBD5E1;
      transition: color 0.3s ease;
    }
    .accordion-item.active .accordion-number {
      color: var(--primary);
    }

    /* Nav — always has clear separation */
    nav#navbar {
      border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      background: rgba(15, 23, 42, 0.5);
      backdrop-filter: blur(16px);
      -webkit-backdrop-filter: blur(16px);
    }

    /* Nav scroll state — switches to light */
    .nav-scrolled {
      background: rgba(255, 255, 255, 0.92) !important;
      backdrop-filter: blur(16px) !important;
      -webkit-backdrop-filter: blur(16px) !important;
      border-bottom: 1px solid #E2E8F0 !important;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
    }

    /* Status dot pulse */
    @keyframes pulse-ring {
      0% { transform: scale(1); opacity: 0.5; }
      100% { transform: scale(1.8); opacity: 0; }
    }
    .status-pulse::after {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 50%;
      background: inherit;
      animation: pulse-ring 2s ease-out infinite;
    }

    /* Pricing toggle */
    .pricing-toggle-active {
      background: var(--primary);
      color: #fff;
      box-shadow: 0 2px 8px -2px rgba(44, 93, 226, 0.4);
    }

    /* ACWR gauge */
    .acwr-zone-safe { background: linear-gradient(90deg, #0E9586, #22D3EE); }
    .acwr-zone-optimal { background: linear-gradient(90deg, #22D3EE, #0E9586); }
    .acwr-zone-warning { background: linear-gradient(90deg, #DB7706, #F59E0B); }
    .acwr-zone-danger { background: linear-gradient(90deg, #DC2828, #EF4444); }

    /* Smooth phone transition */
    .phone-transition {
      transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* Hero phone float animation */
    @keyframes float {
      0%, 100% { transform: translateY(0); }
      50% { transform: translateY(-12px); }
    }
    .float-animation {
      animation: float 6s ease-in-out infinite;
    }
    .float-animation-delay { animation-delay: -2s; }
    .float-animation-delay-2 { animation-delay: -4s; }

    @media (prefers-reduced-motion: reduce) {
      .float-animation, .float-animation-delay, .float-animation-delay-2 {
        animation: none;
      }
    }

/* ===== Multi-page: active nav link ===== */
.nav-link.nav-active { color: #fff !important; }
.nav-link.nav-active::after {
  content: '';
  display: block;
  height: 2px;
  margin-top: 3px;
  border-radius: 2px;
  background: var(--primary);
}
/* When nav is on a light (scrolled) background, active stays readable */
.nav-scrolled .nav-link.nav-active { color: var(--primary) !important; }

/* ===== E2: Vercel-style grid texture for dark sections ===== */
section.bg-dark { position: relative; }
.aa-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.035) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.035) 1px, transparent 1px);
  background-size: 52px 52px;
  -webkit-mask-image: radial-gradient(ellipse 75% 55% at 50% 0%, #000 25%, transparent 72%);
          mask-image: radial-gradient(ellipse 75% 55% at 50% 0%, #000 25%, transparent 72%);
}
@media (prefers-reduced-motion: reduce) { .aa-grid { opacity: 0.8; } }

/* ===== D4: privacy consent banner ===== */
.aa-consent {
  position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 9998;
  max-width: 720px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: #0F172A; color: #E2E8F0;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 14px; padding: 14px 18px;
  box-shadow: 0 12px 40px -8px rgba(0,0,0,0.5);
  font-size: 13px; line-height: 1.5;
}
.aa-consent span { flex: 1 1 240px; }
.aa-consent-actions { display: flex; gap: 8px; }
.aa-consent button {
  height: 36px; padding: 0 16px; border-radius: 9px; font-size: 13px; font-weight: 600; cursor: pointer; border: none;
}
.aa-consent button[data-c="decline"] { background: transparent; color: #94A3B8; border: 1px solid rgba(255,255,255,0.15); }
.aa-consent button[data-c="accept"]  { background: #2C5DE2; color: #fff; }
.aa-consent button[data-c="accept"]:hover { background: #2451CC; }

/* ===== WHOOP-style frosted glass metric callouts floating over phones ===== */
.glass-callout {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: 16px;
  box-shadow: 0 18px 44px -14px rgba(0,0,0,0.55);
  padding: 11px 15px;
  z-index: 20;
}
@media (max-width: 1023px) { .glass-callout { display: none; } }

/* ════════════════ INTERACTION LAYER — premium scroll + pointer FX ════════════════ */

/* Count-up figures keep a stable width while animating */
[data-countup] { font-variant-numeric: tabular-nums; }

/* Parallax targets, magnetic buttons, and the cursor-following glow were removed
   (Rams #5 unobtrusive / #10 as-little-design — pointer-tracking decoration). */

/* Spotlight cards — the cursor-tracked radial glow was removed; a quiet, standard
   hover lift is retained as ordinary interactive feedback. */
.spotlight-card {
  position: relative;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.spotlight-card:hover { transform: translateY(-4px); }

/* Recovery-ring draw-in inside the hero glass callout */
.ring-anim circle.ring-val { stroke-dashoffset: 94; transition: stroke-dashoffset 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.25s; }
[data-reveal].revealed .ring-anim circle.ring-val { stroke-dashoffset: 26; }

@media (prefers-reduced-motion: reduce) {
  .magnetic { transform: none !important; transition: none !important; }
  .spotlight-card,
  .spotlight-card:hover { transform: none !important; transition: none !important; }
  .spotlight-card::after { display: none !important; }
  .cursor-glow-layer { display: none !important; }
  [data-parallax] { transform: none !important; }
  .ring-anim circle.ring-val { transition: none !important; stroke-dashoffset: 26 !important; }
}

/* ════════════════════════════════════════════════════════════════════════════
   CINEMATIC LAYER (Phase 0 tokens + S1 hero + S3 readiness showcase)
   ════════════════════════════════════════════════════════════════════════════ */
:root {
  --ease-standard: cubic-bezier(.2,.8,.2,1);
  --ease-enter: cubic-bezier(.16,1,.3,1);
  --ease-exit: cubic-bezier(.5,0,.75,0);
  --dur-fast: .18s; --dur-base: .32s; --dur-slow: .52s;
}

/* S1 living-aurora hero blobs removed (Rams #5 / #10 — idle, animated background
   decoration). The hero now rests on its solid bg-dark + the product imagery. */

/* ── S1: "before" — the charging underline ── */
.hero-before { position: relative; white-space: nowrap; }
.hero-before::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .04em; height: .085em;
  border-radius: 4px; background: linear-gradient(90deg, #2C5DE2, #5b8bff);
  transform: scaleX(0); transform-origin: left center;
  box-shadow: 0 0 18px rgba(44,93,226,.55);
}
#hero-headline.underline-go .hero-before::after { animation: underlineCharge .72s var(--ease-enter) forwards; }

@keyframes underlineCharge { to { transform: scaleX(1); } }

/* ── S3: readiness showcase (scroll-scrubbed Charge Column) ── */
#readiness .cc-fill-grp { filter: drop-shadow(0 0 22px rgba(16,185,129,.45)); }
.cc-caption { will-change: transform, opacity; }
.cc-chip { will-change: transform, opacity; }
.cc-progress-rail { position: absolute; }
.cc-progress-rail i { display: block; transition: background .3s var(--ease-standard), transform .3s var(--ease-standard); }
.cc-progress-rail i.is-on { background: #2C5DE2 !important; }
#readiness .cc-fill { transform-box: fill-box; transform-origin: bottom center; }
.cc-steps--js .cc-step { opacity: .32; transition: opacity .4s var(--ease-standard); }
.cc-steps--js .cc-step.is-active { opacity: 1; }
.cc-step-n { transition: background .35s var(--ease-standard), color .35s var(--ease-standard); }
.cc-step.is-active .cc-step-n { background: #2C5DE2 !important; color: #fff !important; }

@media (prefers-reduced-motion: reduce) {
  .aurora-blob { animation: none !important; }
  #hero-headline .hero-before::after { transform: scaleX(1) !important; animation: none !important; }
}

/* ── S2: A Day in the Life (pinned, morphing phone) ── */
.s2-phone { position: relative; width: 300px; height: 616px; border-radius: 46px; padding: 11px;
  background: linear-gradient(150deg,#34343a 0%,#0b0b0d 42%,#1a1a1f 100%);
  box-shadow: 0 2px 4px rgba(0,0,0,.5), 0 40px 80px -20px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.05), 0 30px 90px -24px rgba(44,93,226,.42); }
.s2-phone::before { content: ""; position: absolute; inset: 5px; border-radius: 41px; box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.07); z-index: 6; pointer-events: none; }
.s2-viewport { position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: #0F172A; }
.s2-island { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); width: 94px; height: 26px; background: #000; border-radius: 16px; z-index: 7; }
.s2-screen { position: absolute; inset: 0; opacity: 0; }
.s2-screen.s2-default { opacity: 1; }
.s2-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }
.s2--js .s2-cap { position: absolute; left: 0; right: 0; top: 0; }
.s2-cap { will-change: transform, opacity; }
.s2-alert { animation: s2pulse 1.7s ease-in-out infinite; }
@keyframes s2pulse { 0%,100% { box-shadow: 0 0 0 0 rgba(220,40,40,.5); } 50% { box-shadow: 0 0 0 11px rgba(220,40,40,0); } }
.s2-rail i { transition: background .3s var(--ease-standard); }
.s2-rail i.is-on { background: #2C5DE2 !important; }
@media (prefers-reduced-motion: reduce) { .s2-alert { animation: none !important; } }

/* ── S4: ACWR danger-zone chart ── */
.acwr-ping { transform-box: fill-box; transform-origin: center; animation: acwrPing 1.9s ease-out infinite; }
@keyframes acwrPing { 0% { transform: scale(1); opacity: .55; } 70%,100% { transform: scale(3.2); opacity: 0; } }
.acwr-alert { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) { .acwr-ping { animation: none !important; opacity: 0 !important; } }

/* ── Hero "phone fall" (Adaline-style pinned hero sequence) ── */
.gsap-owned { transition: none !important; animation: none !important; }
/* the callout's ring circle must follow the scrub crisply, not its own 1.2s transition */
.gsap-owned .ring-anim .ring-val { transition: none !important; }
.hero-ground {
  position: absolute; bottom: -30px; left: 50%; width: 360px; height: 58px;
  transform: translateX(-50%); pointer-events: none; z-index: 0; opacity: 0;
  background: radial-gradient(ellipse, rgba(0,0,0,.55), rgba(0,0,0,.18) 45%, transparent 72%);
}
.hero-impact-ring {
  position: absolute; bottom: -6px; left: 50%; width: 250px; height: 72px;
  margin-left: -125px; pointer-events: none; z-index: 1; opacity: 0;
  border: 2px solid rgba(86,132,255,.55); border-radius: 50%;
}
/* In-app notification chips: a desktop, full-motion-tier flourish only — they cascade in
   after the phone lands and dismiss before the end frame. Hidden everywhere else. */
.app-chips { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.app-chip {
  position: absolute; left: 6%; right: 6%; opacity: 0;
  display: flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.96);
  border-radius: 13px; padding: 9px 11px;
  box-shadow: 0 10px 26px rgba(15,23,42,.22);
  font-size: 11.5px; line-height: 1.3; color: #0F172A;
}
.app-chip svg { flex: none; }
.app-chip strong { font-weight: 600; }
@media (max-width: 1023px) { .app-chips { display: none; } }

/* ════════════════ S6 · Seamless page transitions (cross-document View Transitions) ════════════════ */
/* Progressive enhancement: Chromium morphs between pages; other browsers navigate normally. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: vtOut .34s cubic-bezier(.5,0,.75,0) both; }
::view-transition-new(root) { animation: vtIn .46s cubic-bezier(.16,1,.3,1) both; }
@keyframes vtOut { to { opacity: 0; transform: translateY(-10px) scale(.992); } }
@keyframes vtIn { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .001s; }
}

/* accessible keyboard focus — design-is audit #8 */
:where(a,button,[role="button"],input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid #2C5DE2;outline-offset:2px;border-radius:8px;
}
:focus:not(:focus-visible){outline:none}