/* ==========================================================================
   TRAICE — Light UI (Apple-style) with subtle blues
   One-file drop-in: header/footer aligned, footer visible, logo sized
   ========================================================================== */

/* ---------- Theme ---------- */
:root{
  --bg: #fbfbfd;
  --surface: #ffffff;
  --text: #0b1220;
  --muted: #5f6b7a;
  --border: #e6e8ee;
  --shadow: 0 10px 30px rgba(16,24,40,.06);

  --primary: #0a84ff;
  --primary-600: #0077ee;
  --primary-50: #eef5ff;

  --radius: 14px;
}

/* ---------- Base ---------- */
*{ box-sizing:border-box }
html, body{ height:100% }
body{
  min-height:100svh;
  margin:0;
  display:flex;
  flex-direction:column;
  background:var(--bg);
  color:var(--text);
  font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Text",
               "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img{ max-width:100%; display:block }  /* no height override; respects element/inline attrs */
a{ color:inherit; text-decoration:none }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); border:0;
}

/* Decorative background */
.bg{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(800px 600px at 90% -10%, rgba(10,132,255,.10), transparent 60%),
    radial-gradient(600px 420px at -10% 20%, rgba(10,132,255,.12), transparent 55%),
    linear-gradient(#ffffff, #fbfbfd);
}

/* ---------- Typography/sections ---------- */
.content{ position:relative; z-index:1; flex:1 0 auto; }
.section{
  padding: clamp(40px, 7vw, 96px) clamp(16px, 5vw, 72px);
  max-width: 1200px; margin-inline:auto;
}
.section__head{ margin-bottom: 20px }
h1,h2,h3{ margin:0 0 .6rem; letter-spacing:-.01em }
h1{ font-size: clamp(32px, 6vw, 60px); line-height:1.05 }
h2{ font-size: clamp(22px, 3.2vw, 32px) }
h3{ font-size: clamp(18px, 2.2vw, 22px) }
.lead{ font-size: clamp(16px, 2.2vw, 20px); color: var(--muted); max-width: 60ch }
.muted{ color: var(--muted) }

/* ---------- Buttons ---------- */
.btn{
  --b: 1px;
  display:inline-flex; align-items:center; justify-content:center;
  gap:.5rem; padding:.8rem 1.05rem; border-radius:12px; font-weight:600; line-height:1;
  border: var(--b) solid transparent; transition: transform .08s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
  box-shadow: 0 1px 1px rgba(10,132,255,.06);
  will-change: transform;
}
.btn:active{ transform: translateY(1px) }
.btn-sm{ padding:.55rem .75rem; font-weight:600 }
.btn-primary{ background:var(--primary); color:#fff }
.btn-primary:hover{ background:var(--primary-600) }
.btn-ghost{ background:transparent; border-color:var(--border) }
.btn-ghost:hover{ background:#fff; box-shadow: var(--shadow) }

/* ==========================================================================
   Header (scoped so it never affects the footer)
   ========================================================================== */
.site-header{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:12px clamp(16px, 5vw, 72px);     /* aligns with footer and sections */
  backdrop-filter: saturate(180%) blur(10px);
  background: rgba(255,255,255,.72);
  border-bottom:1px solid var(--border);
}
.brand{ display:flex; align-items:center; gap:10px }
.brand__img{ height:36px; width:auto; }    /* fixed logo size everywhere */

/* Header nav (desktop) */
.site-header nav{ display:flex; align-items:center }
.site-header nav ul{ display:flex; gap:22px; list-style:none; padding:0; margin:0 }
.site-header nav a{ opacity:.9 }
.site-header nav a:hover{ opacity:1;  color: var(--primary-600); }

/* Header nav (mobile) */
.nav-toggle{
  display:none; position:relative; width:42px; height:42px; border:none;
  background:transparent; color:var(--text); cursor:pointer;
}
.nav-toggle__bar, .nav-toggle__bar::before, .nav-toggle__bar::after{
  position:absolute; left:11px; right:11px; height:2px; background:currentColor; content:"";
}
.nav-toggle__bar{ top:20px }
.nav-toggle__bar::before{ top:-8px }
.nav-toggle__bar::after{ top:8px }

@media (max-width: 860px){
  .nav-toggle{ display:block }
  .site-header nav{
    position:fixed; inset:auto 0 0 0; top:60px; display:block;
    background:#fff; padding:18px 16px; border-top:1px solid var(--border);
    transform: translateY(-8px); opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  .site-header nav.open{ opacity:1; pointer-events:auto; transform:none }
  .site-header nav ul{ flex-direction:column; gap:14px }
}

/* ==========================================================================
   Hero (unchanged structure)
   ========================================================================== */
.hero{
  display:grid; grid-template-columns: 1.05fr .95fr; align-items:center; gap: clamp(16px, 5vw, 48px);
  padding: clamp(36px, 8vw, 88px) clamp(16px, 5vw, 72px);
  max-width: 1300px; margin-inline:auto;
}
.hero__cta{ display:flex; gap:12px; margin:22px 0 6px }
.hero__bullets{ display:flex; gap:18px; flex-wrap:wrap; padding:0; margin:18px 0 0; list-style:none; color:var(--muted) }
.hero__visual{ justify-self:end; width:100%; max-width:520px; }
@media (max-width: 980px){
  .hero{ grid-template-columns: 1fr; text-align:left }
  .hero__visual{ order:-1; justify-self:start; max-width: 420px }
}

/* ==========================================================================
   Cards / Notes / FAQ
   ========================================================================== */
.note{
  background: var(--surface); border:1px solid var(--border);
  padding: clamp(16px, 3vw, 24px); border-radius: var(--radius); margin: 18px 0 28px;
  box-shadow: var(--shadow);
}
.note blockquote{ margin:0 0 10px; color:#0b1220; font-style:italic }

.pillars{ display:grid; grid-template-columns: repeat(3,1fr); gap:16px }
.card{
  background: var(--surface); border:1px solid var(--border);
  padding: 18px; border-radius: var(--radius); min-height: 140px; box-shadow: var(--shadow);
}
@media (max-width: 900px){ .pillars{ grid-template-columns:1fr } }

.faq .faq-item{
  background: var(--surface); border:1px solid var(--border); border-radius: var(--radius);
  padding: 14px 16px; margin:10px 0; box-shadow: var(--shadow);
}
.faq summary{ cursor:pointer; font-weight:700 }
.faq p{ margin:.6rem 0 0 }

/* ==========================================================================
   Modal (waitlist)
   ========================================================================== */
.modal{ position:fixed; inset:0; display:grid; place-items:center;
  background:rgba(10, 18, 32, .35); backdrop-filter:blur(8px);
  transition:opacity .15s ease,visibility .15s ease; z-index:9999;
}
.modal[aria-hidden="true"]{ opacity:0; visibility:hidden; pointer-events:none; }
.modal-card{
  width:min(92vw,680px); background:var(--surface);
  border:1px solid var(--border); border-radius:20px;
  box-shadow: 0 20px 60px rgba(16,24,40,.14); padding:22px;
}
.header{ display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.modal-title{ margin:0; font-size:20px }
.icon-btn{ background:transparent; border:0; color:var(--muted); font-size:26px; line-height:1; cursor:pointer; }

form{ display:grid; gap:12px; margin-top:6px; }
label{ font-size:13px; color:var(--muted); }
input{
  width:100%; padding:12px; border-radius:12px;
  border:1px solid var(--border); background:#fff; color:var(--text);
  box-shadow: inset 0 1px 0 rgba(16,24,40,.04);
}
input:focus{ outline:2px solid var(--primary-50); border-color:#b9d6ff; box-shadow:0 0 0 4px rgba(10,132,255,.12) }
#referral{text-transform:uppercase; letter-spacing:.08em;}
small.help{ color:#d93025; min-height:16px; display:block; }

/* Stepper + Chips (unchanged logic) */
.steps{ display:flex; gap:8px; margin:4px 0 8px; }
.dot{ width:8px; height:8px; border-radius:50%; background:#d5e4ff; }
.dot.active{ background:var(--primary); }
.step{ display:none; }
.step.active{ display:block; animation:fade .16s ease; }
@keyframes fade{ from{opacity:.6; transform:translateY(4px)} to{opacity:1; transform:none} }

.chips{ display:flex; gap:8px; flex-wrap:wrap; }
.chip{
  appearance:none; border:1px solid #d8e1ef; background:#f4f7fb; color:var(--text);
  border-radius:999px; padding:8px 12px; cursor:pointer; font-size:14px; line-height:1;
  transition:transform .06s ease, background .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.chip:active{ transform: translateY(1px); }
.chip:focus-visible{ outline:2px solid var(--primary-50); box-shadow:0 0 0 3px rgba(10,132,255,.12); }
.chip[aria-pressed="true"]{ background:#e8f1ff; color:#0b1220; border-color:#b9d6ff; }
.chip:not([aria-pressed="true"]):hover{ background:#eef3fa; border-color:#cbd6e7; }

/* ==========================================================================
   Footer (aligned with header; guaranteed visible)
   ========================================================================== */
.site-footer{
  position: relative; z-index: 40;                 /* above any overlays */
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap;
  padding:24px clamp(16px, 5vw, 72px);             /* aligns edges with header & sections */
  margin-top:auto;
  background:#ffffff;
  border-top:1px solid var(--border);
}

/* If your footer nav still uses class="nav", make it static here */
.site-footer .nav{
  position: static; inset:auto; transform:none; opacity:1; pointer-events:auto;
  background: transparent; border:0;
}

/* Left: logo + copyright tight together */
.footer-left{
  display:flex; align-items:center; gap:10px; min-width:0;
}
.copyright{ margin:0; color:var(--text); white-space:nowrap; }

/* Right: footer links */
.footer-links ul,
.site-footer .nav ul{
  display:flex; gap:14px; padding:0; margin:0; list-style:none;
}
.footer-links a,
.site-footer .nav a{ color: var(--muted); text-decoration:none; }
.footer-links a:hover,
.site-footer .nav a:hover{ color: var(--text); }

/* CTA link style */
.footer-links .link-cta,
.site-footer .nav [data-open-modal]{
  text-underline-offset: 3px;
  cursor: pointer;
}
.footer-links .link-cta:hover,
.site-footer .nav [data-open-modal]:hover{
  color: var(--primary-600);
  text-decoration-thickness: 2px;
}

/* Mobile footer wrap */
@media (max-width: 860px){
  .site-footer{ align-items:flex-start; }
  .footer-left{ width:100%; margin-bottom:6px; }
  .footer-links ul, .site-footer .nav ul{ flex-wrap:wrap; gap:10px; }
}

/* ---------- Motion prefs ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}
/* ==== Mobile nav overlay (fix: visible, scrollable, above page) ==== */
@media (max-width: 860px){
  .site-header{ --header-h: 60px; } /* fallback; JS will update */

  .site-header .nav{
    position: fixed;
    z-index: 1200;                 /* above content */
    left: 0; right: 0;
    top: var(--header-h, 60px);
    height: calc(100dvh - var(--header-h, 60px));
    overflow: auto;
    background: #fff;
    border-top: 1px solid var(--border);
    padding: 16px clamp(16px, 5vw, 32px) 24px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: transform .2s ease, opacity .2s ease;
  }
  .site-header .nav ul{ flex-direction: column; gap: 14px; }

  .site-header .nav.open{
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* ==== Footer (stable wrapping on narrow screens) ==== */
.site-footer{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 24px clamp(16px, 5vw, 72px);
  background: #fff;
  border-top: 1px solid var(--border);
}
.footer-left{ display:flex; align-items:center; gap:10px; min-width:0; }
.brand__img{ height:36px; width:auto; }

.footer-links{ width:auto; }
.footer-links ul{
  display:flex; gap:14px; padding:0; margin:0; list-style:none; flex-wrap:wrap;
}
.footer-links a{ text-decoration:none; color: var(--muted); }
.footer-links a:hover{ color: var(--text); }

@media (max-width: 860px){
  .footer-left{ width:100%; margin-bottom:6px; }
  .footer-links{ width:100%; }
  .footer-links ul{ gap:10px; }
}
/* === Teaser dock (in hero right column) === */
.teaser-dock{
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.teaser-dock video{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.teaser-dock__play{
  position: absolute;
  inset: auto 12px 12px auto;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.9);
  border-radius: 999px;
  padding: 8px 12px;
  cursor: pointer;
  font-weight: 700;
}

/* Make the right column a bit wider to show the dock cleanly */
.hero__visual{ max-width: 620px; }

/* Stack nicely on mobile */
@media (max-width: 980px){
  .hero .hero__visual{ order: 2 !important; margin-top:12px; max-width: 100%; }
}

/* === Teaser overlay === */
.teaser-overlay{
  position: fixed;
  inset: 0;
  display: none;               /* toggled with [aria-hidden] */
  align-items: center;
  justify-content: center;
  padding: 16px;
  padding-left: calc(16px + env(safe-area-inset-left));
  padding-right: calc(16px + env(safe-area-inset-right));
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
  background: rgba(8,12,26,.72);
  backdrop-filter: blur(6px);
  z-index: 8000;               /* below your waitlist modal (likely ~9999) */
}
.teaser-overlay[aria-hidden="false"]{ display: flex; }

.teaser-overlay__stage{
  position: relative;
  background: #000;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--border);
  width: 100%;
  height: calc(100dvh - 120px);
  max-height: none;
  aspect-ratio: 16/9;
  box-shadow: 0 20px 80px rgba(0,0,0,.35);
}
.teaser-overlay__stage > video{
  width: 100%; height: 100%; object-fit: contain; background:#000;
}

/* Modes */
.teaser-overlay.half .teaser-overlay__stage{
  width: min(1200px, 92vw);
  height: 50vh;
  aspect-ratio: auto;
}
.teaser-overlay.full .teaser-overlay__stage{
  width: 100%;
  height: 100%;
  border-radius: 0;
  border: none;
}

/* Controls */
.teaser-overlay__controls{
  position: fixed;
  right: 16px; top: 16px;
  display: flex; gap: 8px;
}
.teaser-btn{
  appearance: none;
  border: 1px solid var(--border);
  background: rgba(255,255,255,.9);
  border-radius: 10px;
  padding: 6px 10px;
  cursor: pointer;
  font-weight: 700;
}
.share{
  appearance:none;
  border:1px solid rgba(0,0,0,.08);
  background:#f7f9fc;
  border-radius:10px;
  color:inherit;
  padding:6px 10px;
  cursor:pointer;
}
.share:hover{ background:#eef3fa; }