/* ============ GLOBAL ============ */
:root{
  /* Base */
  --bg:#EEF2F6;          /* dark silver page background */
  --surface:#FFFFFF;     /* cards/panels stay crisp white */
  --fg:#0B1220;          /* darker blue for text */
  --muted:#475569;
  --muted-2:#667085;

  /* Brand */
  --primary:#F97316;     /* fox orange */
  --primary-600:#EA580C; /* hover/active */
  --accent:#F59E0B;

  /* Deep navy accent (for tints/hero) */
  --navy:#0E1B2A;

  /* FX */
  --ring:#f973164d;
  --radius:16px;
  --shadow:0 14px 34px rgba(11,18,32,.12);

  --space-1:.5rem; --space-2:.75rem; --space-3:1rem; --space-4:1.5rem; --space-6:2rem; --space-8:3rem; 
  --max-w:1120px;
}
/* Manual theme override via data-theme set by JS */
:root[data-theme="dark"]{
  /* same palette you use in the @media dark block */
  --bg:#0a0f18;
  --fg:#e6eefc;
  --muted:#a6b2c9;
  --muted-2:#94a3b8;
  --surface:#111827;
  --navy:#0A1626;
  --ring:#f973164d;
  --shadow:0 12px 32px rgba(0,0,0,.45);
  color-scheme: dark; /* native controls */
}
:root[data-theme="light"]{
  color-scheme: light;
}


@media (prefers-color-scheme: dark){
  :root{
    --bg:#0a0f18; 
    --surface:#111827;
    --fg:#e6eefc;
    --muted:#a6b2c9;
    --muted-2:#94a3b8;
    --navy:#0A1626;
    --ring:#f973164d;
    --shadow:0 12px 32px rgba(0,0,0,.45);
  }
}


html, body { height: 100% }
h1,h2,h3{ line-height:1.25; margin:0 0 .5rem }
h2{ font-size: clamp(1.3rem, 2.8vw, 2rem) }
h3{ font-size: clamp(1.05rem, 2.2vw, 1.25rem) }
.muted{ color: var(--muted-2) }
.section{ padding-block: clamp(2rem, 7vw, 5rem); background: var(--bg) }
.section__head{ margin-block-end: 1.25rem }

/* helpers you were using elsewhere */
.container{ max-width: var(--max-w); margin-inline:auto; padding-inline: var(--space-3); }
:focus-visible{ outline: 3px solid var(--ring); outline-offset: 2px; }
img{ max-inline-size:100%; block-size:auto; vertical-align:middle }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ============ CARDS / GRID ============ */
.cards{ display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem }
.card{
  background: var(--surface); border:1px solid color-mix(in oklab, var(--fg) 12%, transparent);
  border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow);
}
@media (max-width: 1024px){ .cards{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 640px){ .cards{ grid-template-columns: 1fr; } }

/* ============ FEATURES GRID ============ */
.grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:1rem }
.feature{
  background: var(--bg); border:1px solid color-mix(in oklab, var(--fg) 10%, transparent);
  border-radius: var(--radius); padding: 1rem; display:grid; gap:.35rem; box-shadow: var(--shadow)
}
.feature .icon{ inline-size:40px; block-size:40px; display:grid; place-items:center; background:color-mix(in oklab, var(--primary) 10%, transparent); color:var(--primary); border-radius:10px }
@media (max-width: 1024px){ .grid{ grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 640px){ .grid{ grid-template-columns: 1fr; } }

/* ============ HOW ============ */
.steps{ display:grid; grid-template-columns: repeat(3, 1fr); gap:1rem; padding:0; margin:0; list-style:none }
.step{ background: var(--surface); border:1px solid color-mix(in oklab, var(--fg) 12%, transparent); border-radius: var(--radius); padding:1rem; display:grid; gap:.35rem; box-shadow: var(--shadow) }
.step__media{ inline-size:100%; aspect-ratio: 16 / 10; background: color-mix(in oklab, var(--fg) 8%, transparent); border-radius:12px; overflow:hidden; }
.step__media img{ inline-size:100%; block-size:100%; object-fit:cover }
@media (max-width: 1024px){ .steps{ grid-template-columns: 1fr 1fr } }
@media (max-width: 640px){ .steps{ grid-template-columns: 1fr } }

/* ============ TABLE ============ */
.table-wrap{ overflow:auto; border:1px solid color-mix(in oklab, var(--fg) 12%, transparent); border-radius:12px }
.compare{ inline-size:100%; border-collapse: collapse; background:var(--bg) }
.compare th, .compare td{ padding:.8rem 1rem; border-block-start:1px solid color-mix(in oklab, var(--fg) 10%, transparent) }
.compare thead th{ position:sticky; inset-block-start:0; background: var(--surface); text-align: start }
/* === Column separators for the #compare table === */
.compare { border-collapse: separate; border-spacing: 0; }

.compare th:not(:last-child),
.compare td:not(:last-child) {
  border-inline-end: 1px solid color-mix(in oklab, var(--fg) 14%, transparent);
}

.compare thead th {
  border-block-end: 1px solid color-mix(in oklab, var(--fg) 18%, transparent);
}

/* ============ PRICING ============ */
.pricing-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:1rem }
.price-card{ background: var(--surface); border:1px solid color-mix(in oklab, var(--fg) 12%, transparent); border-radius: var(--radius); padding:1rem; box-shadow: var(--shadow) }
.price-card.highlight{ outline: 2px solid color-mix(in oklab, var(--primary) 30%, transparent) }
.price-card ul{ margin: .5rem 0 0; padding-inline-start: 1.1rem }

/* ============ WAITLIST FORM ============ */
.wl{ display:grid; gap:.75rem; max-inline-size:680px }
.wl__row{ display:grid; grid-template-columns:1fr 1fr; gap:.75rem }
.field{ display:grid; gap:.35rem }
.field input{
  padding:.7rem .8rem; border:1px solid color-mix(in oklab, var(--fg) 18%, transparent);
  border-radius:10px; background: var(--bg); color: var(--fg);
}
.check{ display:flex; align-items:center; gap:.5rem }
.form-msg{ min-block-size:1.25rem; color: var(--muted-2) }
@media (max-width:640px){ .wl__row{ grid-template-columns:1fr } }

/* ============ ACCORDION ============ */
.accordion{ display:grid; gap:.5rem }
.acc{ border:1px solid color-mix(in oklab, var(--fg) 12%, transparent); border-radius:12px; background:var(--bg) }
.acc__btn{
  inline-size:100%; text-align:start; background:transparent; border:0; padding: .9rem 1rem; font: inherit; cursor:pointer;
}
.acc__panel{ padding: 0 1rem 1rem }

/* ============ FOOTER ============ */
.site-footer{ border-block-start:1px solid color-mix(in oklab, var(--fg) 12%, transparent); padding-block: var(--space-6); background: var(--bg) }
.footer__grid{ display:grid; grid-template-columns: 2fr 2fr; gap:1rem; align-items:start }
.foot__links{ display:flex; flex-wrap:wrap; gap:.6rem }
.foot__brand{ display:grid; gap:.5rem }
@media (max-width: 820px){ .footer__grid{ grid-template-columns:1fr } }

/* ============ MOBILE NAV ============ */
.mobile-nav[hidden]{ display:none }
.mobile-nav{ position:fixed; inset:0; background: color-mix(in oklab, var(--bg) 70%, black); backdrop-filter: blur(8px); z-index: 1000; }
.mobile-nav__inner{ background: var(--bg); margin-block: 10vh; border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); display:grid; gap:.5rem }
.m-link{ padding:.7rem .8rem; border-radius: 10px; background: var(--surface); border:1px solid color-mix(in oklab, var(--fg) 12%, transparent) }
.row{ display:flex; align-items:center; justify-content:space-between }

/* ============ HERO — Static 3-shot collage (no horizontal scroll) ============ */

/* Center collage under hero copy (place AFTER your .shot-trio/.shot rules) */
.hero .shot-trio{
  grid-column: 1 / -1;           /* span both hero columns */
  justify-self: center;          /* center horizontally */
  margin-block-start: clamp(.25rem, 1.2vw, .75rem);
  position: relative;            /* anchor for absolute children */
}

/* You dropped left/top earlier—add them so transforms center correctly */
.shot.s1, .shot.s2, .shot.s3{
  left: 50%;
  top: 50%;
}

/* Keep collage under copy on smaller screens */
@media (max-width: 980px){
  .hero__inner{ grid-template-columns: 1fr; } /* collapse hero grid */
  .hero .shot-trio{ grid-column: 1; }
}

/* Optional: hide the grey placeholder block on the right */
.mock{ display: none; }

.shot-trio{
  --spread: clamp(120px, 18vw, 240px);
  --w: clamp(190px, 26vw, 360px);              /* bigger phones */
  min-block-size: calc(var(--w) * 1.78 + 48px);/* more height => no cut */
}
/* phone frame + animation plumbing */
.shot{
  position: absolute;
  inline-size: var(--w);
  aspect-ratio: 9 / 16;
  padding: clamp(8px, 1.1vw, 14px);
  border-radius: calc(var(--radius) + 10px);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: linear-gradient(180deg,#f8fafc,#eef2f7);

  /* NEW: animatable placement + micro motion */
  --x:-50%; --y:-50%; --r:0deg;
  --bob:0px; --tilt:0deg;
  transform: translate(var(--x), var(--y)) rotate(var(--r))
             translateY(var(--bob)) rotate(var(--tilt));
  will-change: transform;
  opacity: 0; /* will fade to 1 with .is-in */
}

@media (prefers-color-scheme: dark){
  .shot{ background: linear-gradient(180deg,#0f172a,#0b1220); }
}
.shot img{ inline-size:100%; block-size:100%; object-fit:contain; display:block; background:#e9eef6; border-radius: calc(var(--radius) - 2px); }

/* Center */
/* Center (using variables so animation doesn’t fight layout) */
.shot.s1{ --x: calc(-50% - var(--spread)); --y:-46%; --r:-3.5deg; }
.shot.s2{ --x: -50%;                     --y:-50%; --r: 0deg;     }
.shot.s3{ --x: calc(-50% + var(--spread)); --y:-46%; --r: 3.5deg; }

/* Fade-in when flagged from JS */
.shot.is-in{ opacity:1; transition: opacity .6s ease; }


/* RTL: mirror the fan direction */
:dir(rtl) .shot.s1{ transform:translate(calc(-50% + var(--spread)),-46%) rotate( 3.5deg) }
:dir(rtl) .shot.s3{ transform:translate(calc(-50% - var(--spread)),-46%) rotate(-3.5deg) }

/* Tablet */
@media (max-width: 820px){
  .shot-trio{ --spread: clamp(80px, 14vw, 160px); --w: clamp(140px, 28vw, 220px) }
  .shot.s1{ transform:translate(calc(-50% - var(--spread)),-44%) rotate(-5deg) }
  .shot.s3{ transform:translate(calc(-50% + var(--spread)),-44%) rotate(5deg) }
  :dir(rtl) .shot.s1{ transform:translate(calc(-50% + var(--spread)),-44%) rotate(5deg) }
  :dir(rtl) .shot.s3{ transform:translate(calc(-50% - var(--spread)),-44%) rotate(-5deg) }
}
/* Small phones */
@media (max-width: 480px){
  .shot-trio{ --spread: clamp(56px, 22vw, 110px); --w: clamp(120px, 38vw, 180px); min-block-size: clamp(280px, 78vw, 420px) }
  .shot.s1{ transform:translate(calc(-50% - var(--spread)),-44%) rotate(-4deg) }
  .shot.s3{ transform:translate(calc(-50% + var(--spread)),-44%) rotate(4deg) }
  :dir(rtl) .shot.s1{ transform:translate(calc(-50% + var(--spread)),-44%) rotate(4deg) }
  :dir(rtl) .shot.s3{ transform:translate(calc(-50% - var(--spread)),-44%) rotate(-4deg) }
}
/* Ultra-narrow fallback: stack (still no horizontal scroll) */
@media (max-width: 360px){
  .shot-trio{ display:grid; gap:.5rem; min-block-size:auto; grid-template-columns:1fr }
  .shot{ position:relative; transform:none; inline-size:100% }
}

/* ============ UTILS ============ */
[hidden]{ display:none !important }
.dir-rtl{ direction: rtl }

/* Right-side hero photo box (extra) */
.hero-media-box{
  grid-column: 2;
  grid-row: 1;
  align-self: start;
  inline-size: 100%;
  aspect-ratio: 4 / 3;                   /* change to 3/2 or 9/16 if you prefer */
  background: var(--surface);
  border: 1px solid color-mix(in oklab, var(--fg) 14%, transparent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
  position: relative;
}
.hero-media-box img{
  width: 100%;
  height: 100%;
  object-fit: cover;                      /* use "contain" if you want full image without crop */
  display: block;
}
/* soft brand glow */
.hero-media-box::after{
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    radial-gradient(520px 320px at 88% -12%,
      color-mix(in oklab, var(--primary) 12%, transparent),
      transparent 70%);
}

/* Stack on mobile, stays below text */
@media (max-width: 980px){
  .hero-media-box{
    grid-column: 1;
    grid-row: auto;
    margin-block-start: 1rem;
  }
}

/* Center the entire comparison section */
#compare .section__head{
  text-align: center;
}

/* Keep the table narrower and centered */
#compare .table-wrap{
  max-width: 960px;        /* tweak: 800–1040px if you want */
  margin-inline: auto;     /* centers it */
}

/* Center all table text */
#compare .compare th,
#compare .compare td{
  text-align: center;
}

/* Animatable custom properties */
@property --bob  { syntax: "<length>"; inherits: false; initial-value: 0px; }
@property --tilt { syntax: "<angle>";  inherits: false; initial-value: 0deg; }

/* Gentle float + micro tilt */
@keyframes floatCard {
  0%,100% { --bob: 0px;  --tilt: 0deg;  }
  50%     { --bob:-10px; --tilt: 1.2deg;}
}

/* Run the animation (staggers for variety) */
.shot{ animation: floatCard 6.5s ease-in-out infinite; }
.shot.s1{ animation-delay: .2s; }
.shot.s2{ animation-delay: .8s; }
.shot.s3{ animation-delay: .5s; }

/* Hover lift (desktop only) */
@media (hover:hover){
  .shot:hover{ --bob:-14px; --tilt: 2deg; transition: transform .25s ease; }
}

/* Respect reduced motion (your global rule also covers this) */
@media (prefers-reduced-motion: reduce){
  .shot{ animation: none; }
}
/* ===== Intro / Loading overlay ===== */
.intro{
  position: fixed; inset: 0; z-index: 2000;
  display: grid; place-items: center;
  color: var(--fg);
  background:
    radial-gradient(1200px 560px at 85% -10%,
      color-mix(in oklab, var(--primary) 12%, transparent), transparent 60%),
    linear-gradient(180deg,
      color-mix(in oklab, var(--navy, #0E1B2A) 22%, var(--bg)),
      var(--bg));
  transition: opacity .4s ease, visibility .4s ease;
}
body.is-intro{ overflow: hidden; }

.intro__card{
  text-align: center;
  padding: 1.25rem 1.5rem;
  background: color-mix(in oklab, var(--bg) 70%, transparent);
  border: 1px solid color-mix(in oklab, var(--fg) 14%, transparent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.intro__logo{
  inline-size: 72px; block-size: 72px;
  display: block; margin-inline: auto;
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.intro__brand{ margin: .6rem 0 .25rem; }
.intro__tag{ margin: 0; color: var(--muted-2); }

.intro__bar{
  inline-size: 160px; block-size: 4px;
  margin: 12px auto 0;
  background: color-mix(in oklab, var(--fg) 12%, transparent);
  border-radius: 999px; overflow: hidden; position: relative;
}
.intro__bar::after{
  content: "";
  position: absolute; inset-block: 0; inset-inline-start: 0;
  inline-size: 40%; block-size: 100%;
  background: var(--primary);
  border-radius: inherit;
  animation: introBar 1.4s ease-in-out infinite;
}

.intro__skip{
  margin-top: .75rem;
  padding: .4rem .8rem;
  border-radius: 999px;
  background: transparent;
  color: var(--fg);
  border: 1px solid color-mix(in oklab, var(--fg) 20%, transparent);
  cursor: pointer;
}

@keyframes introBar{
  0%   { transform: translateX(-10%); width: 35%; }
  50%  { transform: translateX(45%);  width: 70%; }
  100% { transform: translateX(110%); width: 35%; }
}

.intro.is-done{ opacity: 0; visibility: hidden; }

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .intro__bar::after{ animation: none; }
  .intro{ transition: none; }
}

/* Bigger + responsive intro card */
.intro__card{
  width: min(92vw, 720px);                 /* grows up to 720px, fits small screens */
  padding: clamp(1rem, 3.2vw, 2rem) clamp(1.1rem, 4vw, 2.25rem);
}

/* Scale logo and text with viewport */
.intro__logo{
  inline-size: clamp(64px, 10vw, 96px);
  block-size: clamp(64px, 10vw, 96px);
}

.intro__brand{ font-size: clamp(1.15rem, 3.2vw, 1.9rem); }
.intro__tag{   font-size: clamp(.95rem, 2.2vw, 1.15rem); }

/* Wider progress bar */
.intro__bar{
  inline-size: min(64vw, 360px);
  block-size: 5px;
}

/* On very large screens, allow an even wider card */
@media (min-width: 1280px){
  .intro__card{ width: min(56vw, 840px); }
}
.site-footer .disclaimer{
  display:block;
  margin-top:.5rem;
  font-size:.85rem;
  opacity:.85;
}