/* ============================================================
   Northward — hi-fi visual system
   ============================================================ */

:root {
  --cream: #F5EFE3;
  --cream-2: #EFE8D8;
  --cream-3: #E8E0CC;
  --ink: #0F1E3D;          /* deep navy — matches the logotype */
  --ink-2: #1A2A50;
  --ink-soft: #4A5878;
  --ink-ghost: #8892AB;
  --brass: #B38A3A;
  --brass-soft: #C9A557;
  --line: rgba(15, 30, 61, 0.12);
  --line-strong: rgba(15, 30, 61, 0.22);
  --glass-stroke: rgba(255, 255, 255, 0.55);
  --glass-stroke-dark: rgba(15, 30, 61, 0.18);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'ss01', 'ss02', 'cv11';
}

/* overflow-x on <html> turns the ROOT into a nested scroll box — that is what
   was killing momentum and making the page feel stuck. `clip` on <body> only
   suppresses sideways overflow without creating any scroll container. */
body { font-size: 16px; line-height: 1.55; overflow-x: clip; }

/* ---------- type scale ---------- */
.display {
  font-family: 'Cormorant Garamond', 'Times New Roman', serif;
  font-weight: 500;
  letter-spacing: -0.022em;
  color: var(--ink);
  line-height: 0.98;
}
.display-italic { font-style: italic; font-weight: 400; }

/* Small caps / labels — DM Sans tracked, NOT mono */
.eyebrow {
  font-family: 'DM Sans', sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--brass);
  font-weight: 500;
}
.label-sm {
  font-family: 'DM Sans', sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  font-weight: 500;
  font-feature-settings: 'ss01', 'cv11';
}

.body {
  font-family: 'DM Sans', sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink-soft);
  letter-spacing: -0.005em;
}

.caption {
  font-family: 'DM Sans', sans-serif;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-ghost);
  letter-spacing: 0.01em;
}

/* ---------- liquid glass ---------- */
.glass {
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.55);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.45),
    inset 0 -1px 0 rgba(255, 255, 255, 0.12),
    0 20px 60px -20px rgba(15, 30, 61, 0.22);
}
.glass-dark {
  background: rgba(245, 239, 227, 0.42);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    0 20px 60px -20px rgba(15, 30, 61, 0.18);
}
.glass-tight {
  background: rgba(255, 255, 255, 0.55);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.75),
    0 10px 40px -12px rgba(15, 30, 61, 0.18);
}

/* ---------- scrollbars (subtle) ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: rgba(15,30,61,0.16); border-radius: 10px; border: 2px solid var(--cream); }
::-webkit-scrollbar-thumb:hover { background: rgba(15,30,61,0.28); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 24px;
  border-radius: 999px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1), box-shadow 220ms, background 220ms, color 220ms;
  white-space: nowrap;
  border: 1px solid transparent;
}
.btn-primary {
  background: var(--ink);
  color: var(--cream);
  box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 12px 30px -8px rgba(15,30,61,0.45);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.12) inset, 0 18px 38px -10px rgba(15,30,61,0.55); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover { background: rgba(15,30,61,0.04); }
.btn-light {
  background: rgba(255,255,255,0.9);
  color: var(--ink);
  border: 1px solid rgba(255,255,255,0.8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.btn-light:hover { background: rgba(255,255,255,1); transform: translateY(-1px); }
.btn svg { width: 14px; height: 14px; }

/* ---------- entrance animations ---------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 900ms cubic-bezier(.2,.7,.2,1), transform 900ms cubic-bezier(.2,.7,.2,1);
  transition-delay: var(--rd, 0ms);
}
.reveal.in { opacity: 1; transform: none; }

.reveal-fade {
  opacity: 0;
  transition: opacity 1200ms ease;
  transition-delay: var(--rd, 0ms);
}
.reveal-fade.in { opacity: 1; }

/* ---------- marquee (hero sub motion) ---------- */
@keyframes floatY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes drawLine { to { stroke-dashoffset: 0; } }
@keyframes pulseDot { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.25); opacity: 0.6; } }
@keyframes typingDot { 0%,60%,100% { opacity: 0.2; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
@keyframes bubbleIn {
  0%   { opacity: 0; transform: translateY(6px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* fine divider */
.rule { height: 1px; background: var(--line); width: 100%; }

/* ============================================================
   MORE MOTION
   ============================================================ */
@keyframes shimmerX {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes priceFlip {
  0%   { transform: translateY(0) rotateX(0); opacity: 1; }
  35%  { transform: translateY(-6px) rotateX(60deg); opacity: 0; }
  65%  { transform: translateY(6px) rotateX(-60deg); opacity: 0; }
  100% { transform: translateY(0) rotateX(0); opacity: 1; }
}
@keyframes notifSlideIn {
  from { opacity: 0; transform: translateY(-14px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes pillGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201,165,87,0.55); }
  50%      { box-shadow: 0 0 0 10px rgba(201,165,87,0); }
}
@keyframes scoreCountUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes liveDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.85); }
}

/* Shimmer accent (used on annual savings + featured pill) */
.shimmer {
  background: linear-gradient(90deg,
    rgba(201,165,87,0.08) 0%,
    rgba(201,165,87,0.30) 50%,
    rgba(201,165,87,0.08) 100%);
  background-size: 200% 100%;
  animation: shimmerX 3.6s ease-in-out infinite;
}

/* Price flip transition */
.price-flip { animation: priceFlip 480ms cubic-bezier(.2,.7,.2,1); }

/* Hide scrollbar on horizontal carousels */
.no-scrollbar { scrollbar-width: none; -ms-overflow-style: none; }
.no-scrollbar::-webkit-scrollbar { display: none; }

/* Snap carousel base */
.snap-x {
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}
.snap-card { scroll-snap-align: start; }

/* ============================================================
   RESPONSIVE — tablet (≤960px)
   ============================================================ */
@media (max-width: 960px) {
  body { font-size: 15px; }

  /* Section padding compresses on small screens */
  section { padding-left: 32px !important; padding-right: 32px !important; }

  /* Most 2/3-column grids → single column on tablet */
  .nw-pricing-bottom-grid,
  .nw-privacy-grid,
  .nw-pathway-summary { grid-template-columns: 1fr !important; }

  /* Pricing cards stack at tablet */
  .nw-pricing-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
  .nw-pricing-grid > * { transform: none !important; }

  /* Patient stories: stack on tablet */
  .nw-stories-grid { grid-template-columns: 1fr !important; }

  /* Science: credibility band wraps */
  .nw-stat-quad { grid-template-columns: 1fr 1fr !important; gap: 24px !important; }
  .nw-stat-quad > * { border-left: none !important; padding-left: 0 !important; }

  /* Creyos sim: window stacks above metrics */
  .nw-creyos-sim { grid-template-columns: 1fr !important; gap: 32px !important; }

  /* How-It-Works steps vertical */
  .nw-howitworks-steps { grid-template-columns: 1fr !important; gap: 36px !important; }

  /* Hero glass card → stack */
  .nw-hero-glass {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
    padding: 18px 20px !important;
  }
  .nw-hero-glass .nw-hero-glass-divider {
    border-right: none !important;
    padding-right: 0 !important;
    padding-bottom: 12px !important;
    border-bottom: 1px solid rgba(255,255,255,0.18);
  }

  /* Final CTA stacks */
  .nw-final-cta { grid-template-columns: 1fr !important; padding: 56px 32px !important; gap: 28px !important; }
  .nw-final-cta > div:last-child { align-items: flex-start !important; }
  .nw-final-cta .btn { width: 100% !important; }

  /* Footer columns */
  .nw-footer-grid { grid-template-columns: 1fr 1fr !important; gap: 32px !important; }
}

/* ============================================================
   RESPONSIVE — small tablet / large phone (≤768px)
   ============================================================ */
@media (max-width: 768px) {
  /* Hide desktop nav entirely; show mobile nav */
  .nw-nav-desktop-wrap { display: none !important; }
  .nw-nav-mobile { display: flex !important; }
  .nw-nav-drawer { display: block !important; }

  /* Hero text scaling + button full-width */
  .nw-hero h1 { font-size: clamp(44px, 10.5vw, 72px) !important; line-height: 0.98 !important; letter-spacing: -0.022em !important; }
  .nw-hero-ctas { width: 100%; }
  .nw-hero-ctas .btn { width: 100% !important; min-height: 48px; }

  /* Trust dots stack with cleaner spacing */
  .nw-trust-dots { gap: 14px !important; row-gap: 10px !important; }
  .nw-trust-dots > div { font-size: 12px !important; }

  /* Scroll indicator hidden on mobile — hero is no longer fixed-100vh so it would
     float between content. */
  .nw-scroll-indicator { display: none !important; }

  /* MOBILE HERO LAYOUT FIX
     Desktop puts the glass card absolute over the video. On mobile that forces a
     huge padding-bottom on the content, which pushes the headline UP into the nav.
     Instead: let the hero grow naturally, content flows top-down beneath the nav,
     glass card flows AFTER the trust dots (still inside the hero, still over the video).

     Padding-top uses `env(safe-area-inset-top)` so notched iPhones (where the status
     bar eats 47–59px of viewport) still get enough clearance below the fixed nav.
     The fixed nav sits at top:0 and is ~58px tall; we leave a generous 64px below it. */
  .nw-hero {
    height: auto !important;
    min-height: 100vh !important;
  }
  .nw-hero-content {
    padding-top: calc(env(safe-area-inset-top, 0px) + 124px) !important;
    padding-right: 22px !important;
    padding-bottom: 32px !important;
    padding-left: 22px !important;
    justify-content: flex-start !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .nw-hero-glass-wrap {
    position: relative !important;
    left: auto !important; right: auto !important; bottom: auto !important;
    margin: 28px 20px 32px !important;
  }

  /* Headlines scale down */
  h2.display, .display { letter-spacing: -0.02em !important; }
  section h2.display { font-size: clamp(38px, 8.5vw, 64px) !important; line-height: 1 !important; }

  /* Body type */
  .body, p.body { font-size: 16px !important; }

  /* Section padding */
  section { padding-left: 20px !important; padding-right: 20px !important; padding-top: 96px !important; padding-bottom: 96px !important; }

  /* Comparison table → stacked card list */
  .nw-compare-row.nw-compare-head { display: none !important; }
  .nw-compare-row {
    display: block !important;
    padding: 16px 18px !important;
    border-bottom: 1px solid var(--line) !important;
  }
  .nw-compare-row > div {
    padding: 6px 0 !important;
    border-left: none !important;
    background: transparent !important;
    font-size: 14px !important;
  }
  .nw-compare-row > div:nth-child(1) {
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--brass) !important;
    font-weight: 500 !important;
    padding-bottom: 2px !important;
  }
  .nw-compare-row > div:nth-child(2) {
    color: var(--ink-soft) !important;
    text-decoration: line-through;
    text-decoration-color: rgba(15,30,61,0.22);
  }
  .nw-compare-row > div:nth-child(3) {
    color: var(--ink) !important;
    font-weight: 500 !important;
    border-left: 2px solid var(--brass) !important;
    padding-left: 12px !important;
    margin-top: 6px;
  }

  /* Cadence table → stacked card list */
  .nw-cadence-row.nw-cadence-head { display: none !important; }
  .nw-cadence-row {
    display: block !important;
    padding: 18px 20px !important;
    border-left: none !important;
  }
  .nw-cadence-row > div {
    padding: 4px 0 !important;
    border-left: none !important;
    font-size: 14px !important;
  }
  .nw-cadence-row > div:nth-child(1) {
    font-size: 11px !important;
    letter-spacing: 0.18em !important;
    text-transform: uppercase !important;
    color: var(--brass) !important;
    font-weight: 600 !important;
  }
  .nw-cadence-row > div:nth-child(2),
  .nw-cadence-row > div:nth-child(3) {
    color: var(--ink) !important;
  }
  .nw-cadence-row > div:nth-child(4) {
    text-align: left !important;
    padding: 4px 0 !important;
  }

  /* Symptom cards: one (almost) at a time */
  [data-card] {
    flex: 0 0 calc(100vw - 56px) !important;
    max-width: 360px;
    min-height: 380px !important;
  }

  /* Carousel arrows: 44+ px tap target */
  .nw-recognize-controls button { width: 48px !important; height: 48px !important; }

  /* Pathway: stack two summary tiles */
  .nw-pathway-summary { grid-template-columns: 1fr !important; gap: 14px !important; }

  /* Phones: horizontal scroll */
  .nw-phone-row {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    padding: 0 20px 24px !important;
    margin: 48px -20px 0 !important;
    gap: 18px !important;
    justify-content: flex-start !important;
  }
  .nw-phone-row > * {
    flex: 0 0 auto;
    scroll-snap-align: center;
    margin-top: 0 !important;
  }
  .nw-phone-row::-webkit-scrollbar { display: none; }

  /* Footer: single column */
  .nw-footer-grid { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* Footer legal links wrap */
  footer a { word-break: break-word; }

  /* Tap targets — all buttons */
  .btn { min-height: 44px; }

  /* Pricing toggle full-width */
  .nw-pricing-grid + * .btn { width: 100% !important; }
}

/* ============================================================
   RESPONSIVE — phone (≤480px)
   ============================================================ */
@media (max-width: 480px) {
  /* Tighter section padding */
  section { padding-left: 16px !important; padding-right: 16px !important; padding-top: 80px !important; padding-bottom: 80px !important; }

  /* Hero headline + sub */
  .nw-hero h1 { font-size: clamp(44px, 12.5vw, 68px) !important; }

  /* Trust dots — vertical stack */
  .nw-trust-dots {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }

  /* Hero glass — already relative-flow on mobile from the 768px rule; just tweak padding */
  .nw-hero-glass-wrap { margin: 24px 16px 28px !important; }
  .nw-hero-glass { padding: 16px 18px !important; }
  .nw-hero-glass > a { width: 100%; justify-content: center; }

  /* Section h2 */
  section h2.display { font-size: clamp(34px, 9vw, 52px) !important; }

  /* Body min 15px */
  .body, p.body { font-size: 15px !important; line-height: 1.6 !important; }

  /* Pricing cards padding tightens */
  .nw-pricing-grid > div { padding: 32px 24px 28px !important; }
  .nw-pricing-grid .btn { width: 100% !important; }

  /* Stat triple → 1 col */
  .nw-stat-triple { grid-template-columns: 1fr !important; max-width: 100% !important; }

  /* Stat quad → 1 col */
  .nw-stat-quad { grid-template-columns: 1fr !important; gap: 18px !important; }

  /* FAQ size */
  .nw-faq-q { font-size: 18px !important; padding: 22px 0 !important; }

  /* Final CTA padding */
  .nw-final-cta { padding: 48px 24px !important; }
  .nw-final-cta h3.display { font-size: clamp(34px, 9vw, 52px) !important; }

  /* Footer copy */
  footer { padding: 60px 20px 32px !important; }

  /* Pricing month1 + HSA padding */
  .nw-pricing-bottom-grid > div { padding: 28px 22px !important; }

  /* Limited-enrollment compact card — keep the numeral+copy row tight on mobile */
  .nw-enrollment-callout { padding: 24px 22px !important; }
  .nw-enrollment-callout > div > div:first-child {
    padding-right: 16px !important;
  }

  /* Month 1 explainer table: tighter columns, center the numeric cells so they read
     as a real comparison table on narrow screens. */
  .nw-month1-table > div { grid-template-columns: 1.3fr 1fr 1.1fr !important; }
  .nw-month1-table > div > div { padding: 12px 10px !important; font-size: 13px !important; }
  .nw-month1-table > div > div:nth-child(1) { padding-left: 14px !important; }
  .nw-month1-table > div > div:nth-child(2),
  .nw-month1-table > div > div:nth-child(3) { text-align: center !important; }
  .nw-month1-table > div:first-child > div { font-size: 9px !important; letter-spacing: 0.18em !important; padding: 12px 8px !important; }
  .nw-month1-table > div:first-child > div:nth-child(1) { padding-left: 14px !important; }

  /* Recognize section */
  #approach { padding-top: 100px !important; padding-bottom: 80px !important; }
  #approach .nw-recognize-head,
  #approach .nw-recognize-controls { padding-left: 16px !important; padding-right: 16px !important; }

  /* Privacy bullets size */
  .nw-privacy-grid ul span { font-size: 15px !important; }

  /* Patient stories card padding */
  .nw-stories-grid article { padding: 28px 24px 24px !important; }
}

/* ============================================================
   Mobile nav — defaults (overridden by display:none on desktop)
   ============================================================ */
.nw-nav-mobile { display: none; }
.nw-nav-drawer { display: none; }

/* Anchor smoothness is handled in JS per-click so wheel scrolling stays 1:1 native */

/* Images & video should never overflow */
img, video, svg { max-width: 100%; height: auto; }
video { height: auto; }

/* Reduce motion for sensitive users */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; animation-iteration-count: 1 !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}



/* ============================================================
   SCROLL & TOUCH — native, nothing intercepted, nothing nested
   ============================================================ */
html { scroll-padding-top: 96px; -webkit-text-size-adjust: 100%; }
a, button, [role="button"], summary { -webkit-tap-highlight-color: transparent; }

/* Reveals are a fast fade-up, not a 900ms drift. A slow reveal reads as lag
   when you scroll past it. */
.reveal { transition-duration: 420ms !important; transform: translateY(16px); }
.reveal-fade { transition-duration: 420ms !important; }
.reveal, .reveal-fade { transition-delay: 0ms !important; }

@media (max-width: 768px) {
  /* Backdrop blur on stacked panels is the biggest paint cost on phone GPUs. */
  .glass, .glass-dark, .glass-tight, .btn-light {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .glass { background: rgba(255,255,255,0.82) !important; }
  .glass-dark { background: rgba(245,239,227,0.9) !important; }
  .glass-tight { background: rgba(255,255,255,0.88) !important; }
  .btn-light { background: rgba(255,255,255,0.95) !important; }
  /* Hero card specifically: reinstate a light blur + boost opacity for legibility over the mountain image */
  .nw-hero-glass-wrap .glass {
    background: rgba(252, 249, 244, 0.93) !important;
    -webkit-backdrop-filter: blur(20px) saturate(1.5) !important;
    backdrop-filter: blur(20px) saturate(1.5) !important;
    box-shadow: 0 20px 60px -20px rgba(15, 30, 61, 0.28), inset 0 1px 0 rgba(255,255,255,0.8) !important;
  }
  /* Override cream/gold inline text colors → dark ink so text is readable on the opaque card */
  .nw-hero-glass-wrap .nw-hero-glass,
  .nw-hero-glass-wrap .nw-hero-glass * {
    color: #1f1a14 !important;
  }
  .nw-hero-glass-wrap .nw-hero-glass .label-sm {
    color: rgba(31, 26, 20, 0.5) !important;
  }
  .nw-hero-glass-wrap .nw-hero-glass a {
    color: #7a5e18 !important; /* readable dark gold for the Begin link */
  }
  .nw-hero-glass-wrap .nw-hero-glass .nw-hero-glass-divider {
    border-bottom-color: rgba(31, 26, 20, 0.15) !important;
    border-right-color: rgba(31, 26, 20, 0.15) !important;
  }
  .reveal { transition-duration: 300ms !important; transform: translateY(10px); }
  .reveal-fade { transition-duration: 300ms !important; }
  .btn, a.btn, button { min-height: 44px; }
}
@media (hover: none) {
  .btn { transition: background 160ms, color 160ms; }
  .btn:hover, a:hover, button:hover { transform: none !important; }
}