/* ============================================================
   Orbit Deals · real-styles.css
   v0.4 · Carousel-aligned pivot.

   Lifts tokens from /design/v0.4-carousel-aligned.html verbatim:
   saturated atmospheric sky gradient body, cloud horizon, orbital
   rings, glass cards on sky, white cards on cloud, two ink palettes.

   Legacy token names (--surface, --ink-900, --orbit-blue, etc.) are
   remapped to v0.4 equivalents so existing markup pivots without
   per-file rewrites. New code should reference --sky-*, --cloud-*,
   --ink-on-sky, --ink-on-cloud, --glass directly.
   ============================================================ */

/* === FONTS ============================================================== */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Inter+Tight:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&family=Instrument+Serif:ital@0;1&display=swap");


/* === DESIGN TOKENS ====================================================== */
:root {
  /* ---- SKY · saturated atmospheric blue (v0.4 verbatim) ---- */
  --sky-deep:   #2E7DCD;
  --sky-mid:    #4F9DE0;
  --sky-light:  #8BC4EE;
  --cloud-top:  #C8E2F4;
  --cloud:      #E8F2FB;
  --cloud-hi:   #FFFFFF;

  /* ---- GLASS · translucent surfaces over the sky ---- */
  --glass:        rgba(255, 255, 255, 0.18);
  --glass-soft:   rgba(255, 255, 255, 0.10);
  --glass-strong: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(255, 255, 255, 0.25);

  /* ---- INK · two palettes, one for sky, one for cloud ---- */
  --ink-on-sky:        #FFFFFF;
  --ink-on-sky-soft:   rgba(255, 255, 255, 0.85);
  --ink-on-sky-muted:  rgba(255, 255, 255, 0.65);
  --ink-emphasis:      #1A4080;       /* earned deep blue for emph spans */
  --ink-on-cloud:      #1F3D6B;       /* deep navy on white/cloud cards */
  --ink-on-cloud-soft: #4A6991;

  /* ---- ORBIT BRAND BLUE (locked, used on cloud surfaces) ---- */
  --orbit-blue:       #1A4080;
  --orbit-blue-hover: #15336B;
  --orbit-blue-deep:  #0D2050;
  --orbit-blue-tint:  #E7EEFA;

  /* ---- WARM ACCENT (sun, reserved for celebrations) ---- */
  --sun:        #F5C879;
  --sun-soft:   #FCEED8;
  --rose:       #F2B5B0;

  /* ---- SEMANTIC ---- */
  --accent-success: #7AC9A4;
  --accent-warning: #F5C879;
  --accent-error:   #F08585;
  --accent-violet:  #7170FF;

  /* ---- LEGACY TOKEN REMAPS · keep old markup compiling ----
     These point at v0.4 surfaces and inks. Anything in section files
     that still says --surface or --ink-900 now picks up the sky
     direction without per-file edits. */
  --surface:        transparent;       /* page bg comes from gradient on body */
  --surface-raised: #FFFFFF;           /* cloud cards stay white */
  --surface-sunken: var(--cloud);
  --surface-muted:  var(--cloud);
  --paper:          #FFFFFF;

  /* Ink scale, remapped for content over cloud / white cards */
  --ink-900: var(--ink-on-cloud);
  --ink-800: var(--ink-on-cloud);
  --ink-700: var(--ink-on-cloud-soft);
  --ink-500: var(--ink-on-cloud-soft);
  --ink-300: rgba(31, 61, 107, 0.18);
  --ink-100: rgba(31, 61, 107, 0.08);

  /* Cream aliases that some old classes still reference */
  --orbit-cream:        #FFFFFF;
  --orbit-cream-soft:   var(--cloud);
  --orbit-cream-deep:   var(--ink-100);
  --orbit-blue-ink:     var(--orbit-blue-deep);

  /* ---- GRADIENTS · v0.4 verbatim ---- */
  --grad-sky: linear-gradient(180deg,
    var(--sky-deep) 0%,
    var(--sky-mid) 35%,
    var(--sky-light) 70%,
    var(--cloud-top) 88%,
    var(--cloud) 100%);
  --grad-cloud-bottom: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    var(--cloud-hi) 100%);
  --gradient-hero-atmosphere: transparent;   /* sky on body handles it */
  --gradient-fade-bottom: linear-gradient(180deg, transparent 0%, var(--cloud) 100%);
  --gradient-text-blue:
    linear-gradient(135deg, var(--ink-emphasis) 0%, var(--orbit-blue-deep) 100%);

  /* ---- TYPOGRAPHY ----
     Inter Tight for display/headings, Inter for body, JetBrains Mono
     for numerics. Instrument Serif kept for pain numerals only.
     Sizes tuned DOWN from v0.4 proof (display 76px) for landing-page
     rhythm where multiple sections must fit a 900px-tall viewport. */
  --font-body:    "Inter", ui-sans-serif, system-ui, -apple-system,
                  "Segoe UI", sans-serif;
  --font-display: "Inter Tight", "Inter", ui-sans-serif, system-ui, sans-serif;
  --font-mono:    "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
                  Monaco, Consolas, monospace;
  --font-serif:   "Instrument Serif", Georgia, serif;

  /* Display size tightened to ~60px desktop (was 76px in proof) so
     hero + subhead + CTA + deal row fits a 900-tall viewport. */
  --fs-display: clamp(2.25rem, 3.6vw + 1rem, 3.875rem);   /* 36-62 */
  --fs-h1:      clamp(1.875rem, 2.4vw + 0.75rem, 2.75rem); /* 30-44 */
  --fs-h2:      clamp(1.5rem, 1.6vw + 0.75rem, 2rem);     /* 24-32 */
  --fs-h3:      clamp(1.25rem, 1vw + 0.5rem, 1.5rem);     /* 20-24 */
  --fs-h4:      1.125rem;
  --fs-lead:    clamp(1rem, 0.35vw + 0.9rem, 1.125rem);   /* 16-18 */
  --fs-body:    1rem;
  --fs-sm:      0.875rem;
  --fs-xs:      0.75rem;

  --lh-tight: 1.04;
  --lh-snug:  1.18;
  --lh-base:  1.55;
  --lh-loose: 1.7;

  --tracking-tight:   -0.028em;
  --tracking-snug:    -0.015em;
  --tracking-base:     0;
  --tracking-wide:     0.04em;
  --tracking-eyebrow:  0.18em;

  /* ---- SPACING · 8-based ---- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-7:  32px;   /* alias */
  --space-8:  32px;
  --space-9:  48px;   /* alias */
  --space-10: 40px;
  --space-11: 64px;   /* alias */
  --space-12: 48px;
  --space-13: 80px;   /* alias */
  --space-16: 64px;
  --space-20: 72px;   /* tightened from 80, helps viewport-fit */
  --space-24: 96px;
  --space-0:  0;

  /* ---- RADII ---- */
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 9999px;

  /* ---- SHADOWS · cool, tuned to navy ink on cloud ---- */
  --shadow-1:
    0 1px 3px rgba(31, 61, 107, 0.04),
    0 1px 2px rgba(31, 61, 107, 0.03);
  --shadow-2:
    0 4px 16px rgba(31, 61, 107, 0.08),
    0 1px 3px rgba(31, 61, 107, 0.04);
  --shadow-3:
    0 8px 32px rgba(31, 61, 107, 0.12),
    0 2px 6px rgba(31, 61, 107, 0.06);

  --shadow-card:  var(--shadow-2);
  --shadow-panel: var(--shadow-1);
  --shadow-hero:  var(--shadow-3);
  --shadow-hairline: inset 0 0 0 1px rgba(31, 61, 107, 0.08);

  --shadow-button:
    0 4px 20px rgba(255, 255, 255, 0.3),
    0 1px 2px rgba(31, 61, 107, 0.10);
  --shadow-button-hover:
    0 6px 28px rgba(255, 255, 255, 0.4),
    0 2px 4px rgba(31, 61, 107, 0.12);

  --shadow-focus-ring:
    0 0 0 4px rgba(255, 255, 255, 0.35),
    0 0 0 5px var(--ink-emphasis);

  /* ---- MOTION ---- */
  --ease-out:        cubic-bezier(0.2, 0, 0, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out-quart:  cubic-bezier(0.2, 1, 0.4, 1);
  --ease-snap:       var(--ease-out-quart);

  --duration-fast: 150ms;
  --duration-base: 240ms;
  --duration-slow: 320ms;
  --duration-deliberate: 560ms;

  /* ---- CONTAINER (canonical, Mercury-tight) ---- */
  --container-max: 1120px;       /* default desktop column */
  --container-wide: 1200px;      /* hero, bento, how-it-works (2-col stages) */
  --container-narrow: 880px;     /* pain editorial, inside-Orbit */
  --container-tight: 720px;      /* CTA card, FAQ — feels intentional */
}


/* === BASE =============================================================== */
* { box-sizing: border-box; }

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

body {
  background: var(--sky-mid);
  color: var(--ink-on-sky);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-base);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11", "tnum";
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  color: var(--ink-on-sky);
  margin: 0;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 600;
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); }
h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: var(--tracking-snug); }
h4 { font-size: var(--fs-h4); line-height: 1.3; }

.display {
  font-family: var(--font-display);
  font-size: var(--fs-display);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  font-weight: 600;
  color: var(--ink-on-sky);
}
.display .emph,
.display .accent { color: var(--ink-emphasis); font-weight: 700; }

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-on-sky-muted);
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-on-sky-soft);
}

.mono {
  font-family: var(--font-mono);
  font-feature-settings: "tnum" 1;
}


/* === SKY ATMOSPHERE ELEMENTS (cloud horizon, orbital rings) ============= */
/* Sky gradient as a fixed full-viewport layer behind everything.
   Using a separate div instead of body bg avoids the
   background-attachment: fixed repaint bugs in some engines. */
.sky-bg-fixed {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: var(--grad-sky);
}

.sky-bg-rings {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  overflow: hidden;
}
.sky-bg-rings .ring {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.sky-bg-rings .ring-1 { width: 1600px; height: 1600px; top: -800px; right: -400px; }
.sky-bg-rings .ring-2 { width: 2200px; height: 2200px; top: -1100px; right: -700px; border-color: rgba(255, 255, 255, 0.08); }

.cloud-horizon-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 200px;
  background: var(--grad-cloud-bottom);
  pointer-events: none;
  z-index: -1;
}
.cloud-horizon-fixed::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 800px 120px at 30% 70%, rgba(255,255,255,0.85), transparent 50%),
    radial-gradient(ellipse 600px 100px at 70% 60%, rgba(255,255,255,0.7), transparent 50%),
    radial-gradient(ellipse 1000px 140px at 50% 90%, rgba(255,255,255,0.95), transparent 60%);
  filter: blur(4px);
}


/* === LAYOUT · canonical container with proper padding ==================== */
.real-container {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: 24px;
}
@media (min-width: 768px)  { .real-container { padding-inline: 40px; } }
@media (min-width: 1024px) { .real-container { padding-inline: 64px; } }
@media (min-width: 1440px) { .real-container { padding-inline: 80px; } }

/* per-section width modifiers */
.real-container.is-wide   { max-width: var(--container-wide); }
.real-container.is-narrow { max-width: var(--container-narrow); }
.real-container.is-tight  { max-width: var(--container-tight); }

.real-section {
  padding-block: clamp(56px, 6vw, 88px);
  position: relative;
}


/* === BUTTONS ============================================================ */
.real-button-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 var(--space-6);
  border: 0;
  border-radius: var(--radius-full);
  background: #fff;
  color: var(--ink-emphasis);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-button);
  transition:
    background var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    transform var(--duration-fast) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}
.real-button-primary:hover {
  box-shadow: var(--shadow-button-hover);
  transform: translateY(-1px);
}
.real-button-primary:active { transform: translateY(0); }
.real-button-primary:focus-visible { outline: none; box-shadow: var(--shadow-focus-ring); }

.real-button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: 44px;
  padding: 0 var(--space-6);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-full);
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  color: var(--ink-on-sky);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  font-weight: 500;
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-out);
  text-decoration: none;
  white-space: nowrap;
}
.real-button-secondary:hover { background: rgba(255, 255, 255, 0.28); transform: translateY(-1px); }

.real-button-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 36px;
  padding: 0 var(--space-4);
  background: transparent;
  color: var(--ink-on-sky-soft);
  border: 0;
  border-radius: var(--radius-full);
  font-weight: 500;
  font-size: var(--fs-sm);
  cursor: pointer;
  transition: background var(--duration-base) var(--ease-out);
}
.real-button-ghost:hover { background: rgba(255,255,255,0.10); color: var(--ink-on-sky); }


/* === CARDS · cloud variant (white card on sky) =========================== */
.real-card {
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  box-shadow: var(--shadow-2);
  border: 1px solid rgba(31, 61, 107, 0.06);
  color: var(--ink-on-cloud);
  transition:
    transform var(--duration-base) var(--ease-out-quart),
    box-shadow var(--duration-base) var(--ease-out-quart);
}
.real-card h1, .real-card h2, .real-card h3, .real-card h4 { color: var(--ink-on-cloud); }
.real-card p { color: var(--ink-on-cloud-soft); }
.real-card-hover:hover { transform: translateY(-3px); box-shadow: var(--shadow-3); }

.real-feature-tile {
  background: var(--surface-raised);
  border-radius: var(--radius-lg);
  padding: var(--space-8);
  border: 1px solid rgba(31, 61, 107, 0.06);
  box-shadow: var(--shadow-1);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  color: var(--ink-on-cloud);
}
.real-feature-tile h3 { font-size: var(--fs-h4); margin-bottom: var(--space-1); color: var(--ink-on-cloud); }
.real-feature-tile p  { color: var(--ink-on-cloud-soft); line-height: var(--lh-base); margin: 0; }


/* === GLASS CARD (over sky) =============================================== */
.real-glass-card {
  background: var(--glass);
  backdrop-filter: blur(40px);
  -webkit-backdrop-filter: blur(40px);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-12);
  color: var(--ink-on-sky);
}


/* === HERO BACKDROP · transparent so sky shows through =================== */
.real-hero-bg {
  background: transparent;
  position: relative;
  overflow: visible;
}
.real-hero-bg::after { display: none; }

.real-text-gradient {
  color: var(--ink-emphasis);
  background: none;
  -webkit-text-fill-color: var(--ink-emphasis);
}


/* === PILL · glass on sky ================================================ */
.real-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  height: 30px;
  padding: 0 var(--space-4);
  border-radius: var(--radius-full);
  background: var(--glass);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--glass-border);
  color: var(--ink-on-sky);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: var(--tracking-wide);
}


/* === MOTION LIBRARY ===================================================== */
@keyframes lift-in {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes slide-up-fade {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes fade-in {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes soft-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}
@keyframes marquee-scroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.motion-fade-in       { animation: fade-in var(--duration-slow) var(--ease-out) both; }
.motion-lift-in       { animation: lift-in var(--duration-slow) var(--ease-out-quart) both; }
.motion-slide-up-fade { animation: slide-up-fade var(--duration-base) var(--ease-out-quart) both; }
.motion-soft-pulse    { animation: soft-pulse 2.4s var(--ease-in-out) infinite; }
.motion-stagger > *   { animation-delay: calc(var(--i, 0) * 80ms); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}


/* === VENDOR LOGO STRIP =================================================== */
.vendor-strip {
  padding-block: var(--space-10) var(--space-8);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.vendor-strip-eyebrow {
  display: block;
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-mono, "JetBrains Mono", monospace);
  font-size: 0.6875rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
}
.vendor-strip-caption {
  text-align: center;
  color: var(--ink-on-sky);
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 0.6vw + 0.875rem, 1.25rem);
  font-weight: 500;
  margin-bottom: var(--space-7);
  letter-spacing: -0.01em;
}
.vendor-strip-track-wrap {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 8%, #000 92%, transparent 100%);
}
.vendor-strip-track {
  display: flex;
  align-items: center;
  gap: var(--space-12);
  width: max-content;
}
.vendor-strip-track .vendor-mark {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(1.25rem, 0.6vw + 1.1rem, 1.5rem);
  color: var(--ink-on-sky-soft);
  opacity: 0.82;
  white-space: nowrap;
  letter-spacing: -0.015em;
  transition: opacity var(--duration-base) var(--ease-out), color var(--duration-base) var(--ease-out);
}
.vendor-strip-track .vendor-mark:hover { opacity: 1; color: var(--ink-on-sky); }
@media (min-width: 768px) {
  .vendor-strip-track { animation: marquee-scroll 50s linear infinite; }
  .vendor-strip-track:hover { animation-play-state: paused; }
}
@media (max-width: 767px) {
  .vendor-strip-track { animation: marquee-scroll 36s linear infinite; gap: var(--space-8); }
}


/* === ON-CLOUD SECTION WRAP ==============================================
   When a section needs to sit on the white cloud-floor (FAQ, dense bento
   panels, footer-adjacent CTA), wrap it in .on-cloud. Switches the ink
   palette to navy and gives it a white-ish surface so the sky reads as
   sky and the work-surface reads as work-surface. */
.on-cloud {
  background: #fff;
  color: var(--ink-on-cloud);
  position: relative;
  z-index: 1;
}
.on-cloud h1, .on-cloud h2, .on-cloud h3, .on-cloud h4 { color: var(--ink-on-cloud); }
.on-cloud .lead,
.on-cloud p { color: var(--ink-on-cloud-soft); }
.on-cloud .eyebrow { color: var(--ink-on-cloud-soft); }
.on-cloud .real-button-primary {
  background: var(--ink-emphasis);
  color: #fff;
  box-shadow: 0 4px 20px rgba(26, 64, 128, 0.25);
}
.on-cloud .real-button-primary:hover { background: var(--orbit-blue-deep); }
.on-cloud .real-button-secondary {
  background: #fff;
  border-color: rgba(31, 61, 107, 0.12);
  color: var(--ink-on-cloud);
  backdrop-filter: none;
}
.on-cloud .real-pill {
  background: rgba(31, 61, 107, 0.06);
  border-color: rgba(31, 61, 107, 0.08);
  color: var(--ink-on-cloud);
  backdrop-filter: none;
}