/* cntr — shared styles */
@import url('https://fonts.googleapis.com/css2?family=Geist:wght@300;400;500;600;700;800&family=Geist+Mono:wght@400;500;600&display=swap');

:root{
  --bg: #F4F6FA;
  --bg-2: #E8EDF5;
  --bg-3: #DAE2EE;
  --ink: #0F1A2E;
  --ink-2: #2A3548;
  --muted: #6B7585;
  --line: #0F1A2E;
  --line-soft: rgba(15,26,46,0.10);
  --line-softer: rgba(15,26,46,0.06);
  --accent: #4A86F7;                       /* app primary blue */
  --accent-ink: #FFFFFF;                   /* white text on blue */
  --accent-soft: rgba(74,134,247,0.14);    /* light blue tint */
  --success: #22C55E;                      /* app confirm green */
  --success-ink: #FFFFFF;
  --danger: #E84855;                       /* app destructive red */
  --sand: #DAE2EE;
  --card: #FFFFFF;
  --shadow-sm: 0 1px 2px rgba(15,26,46,0.04), 0 1px 1px rgba(15,26,46,0.03);
  --shadow-md: 0 12px 30px -12px rgba(15,26,46,0.18), 0 4px 8px -4px rgba(15,26,46,0.08);
  --shadow-lg: 0 30px 60px -20px rgba(15,26,46,0.22), 0 10px 20px -10px rgba(15,26,46,0.10);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-pill: 999px;
  --container: 1200px;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background: var(--bg);
  color: var(--ink);
  font-family: 'Geist', system-ui, -apple-system, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a{color:inherit; text-decoration:none}
img,svg{display:block; max-width:100%}

.container{ max-width: var(--container); margin: 0 auto; padding: 0 24px; }

/* ============ NAV ============ */
.nav{
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line-softer);
}
.nav-inner{
  display:flex; align-items:center; justify-content:space-between;
  height: 64px;
}
.brand{
  display:flex; align-items:center; gap:10px;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-weight: 600; letter-spacing: -0.01em;
  font-size: 18px;
}
.brand-mark{
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--ink); color: var(--accent);
  display:grid; place-items:center;
  font-family: 'Geist Mono', monospace; font-weight: 700; font-size: 13px;
  letter-spacing: -0.04em;
}
.nav-links{ display:flex; align-items:center; gap: 28px; }
.nav-links a{
  font-size: 14px; color: var(--ink-2);
  transition: color .15s ease;
}
.nav-links a:hover{ color: var(--ink); }
.nav-cta-mobile{ display: none; }
.nav-burger{
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 4px;
  background: transparent;
  border: 1px solid var(--line-soft);
  border-radius: 10px;
  padding: 0;
  cursor: pointer;
}
.nav-burger span{
  display: block; width: 18px; height: 2px;
  background: var(--ink); border-radius: 2px;
  transition: transform .2s ease, opacity .15s ease;
}
.nav-burger[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-burger[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nav-burger[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 760px){
  .btn.nav-cta-desktop{ display: none; }
  .nav-burger{ display: inline-flex; }
  .nav-links{
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line-softer);
    padding: 4px 24px 16px;
  }
  .nav-links a{
    padding: 14px 0;
    font-size: 16px;
    color: var(--ink);
    border-top: 1px solid var(--line-softer);
  }
  .nav-links a:first-child{ border-top: 0; }
  .nav-cta-mobile{
    display: block;
    margin-top: 12px;
    padding: 14px 18px !important;
    border: 0 !important;
    border-radius: var(--radius-pill);
    background: var(--ink);
    color: #fff !important;
    text-align: center;
    font-weight: 500;
  }
  .nav.open .nav-links{ display: flex; }
}
.btn{
  display:inline-flex; align-items:center; gap:8px;
  padding: 10px 18px; border-radius: var(--radius-pill);
  font-size: 14px; font-weight: 500;
  transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
  cursor: pointer; border: 1px solid transparent;
  white-space: nowrap;
}
.btn-primary{ background: var(--ink); color: #fff; }
.btn-primary:hover{ transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn-accent{ background: var(--accent); color: var(--accent-ink); font-weight:600; }
.btn-accent:hover{ transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(74,134,247,0.55); }
.btn-ghost{ background: transparent; color: var(--ink); border: 1px solid var(--line-soft); }
.btn-ghost:hover{ border-color: var(--ink); }

/* ============ TYPOGRAPHY ============ */
h1,h2,h3,h4{ font-weight: 600; letter-spacing: -0.025em; line-height: 1.05; margin: 0; }
.eyebrow{
  font-family: 'Geist Mono', monospace;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--muted);
  display: inline-flex; align-items:center; gap:8px;
}
.eyebrow::before{
  content:""; width:6px; height:6px; border-radius:50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(74,134,247,0.22);
}
.h-display{ font-size: clamp(44px, 5.2vw, 76px); font-weight: 600; letter-spacing: -0.04em; line-height: 1.02; }
.h-section{ font-size: clamp(32px, 4.4vw, 56px); font-weight: 600; letter-spacing: -0.03em; }
.lede{ font-size: clamp(17px, 1.4vw, 20px); color: var(--ink-2); line-height: 1.5; max-width: 56ch; }

/* ============ HERO ============ */
.hero{
  padding: clamp(48px, 8vw, 96px) 0 clamp(48px, 8vw, 80px);
  position: relative; overflow: hidden;
}
.hero-grid{
  display:grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
@media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; } }

.hero h1 .accent-word{
  display:inline-block; padding: 0 .12em;
  background: linear-gradient(180deg, transparent 60%, var(--accent) 60%);
}
.hero-meta{
  display:flex; flex-wrap: wrap; gap: 28px; margin-top: 36px;
  font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--muted);
  text-transform: uppercase; letter-spacing: .08em;
}
.hero-meta strong{ color: var(--ink); font-weight: 500; }

.hero-cta{ display:flex; gap:12px; margin-top: 28px; flex-wrap: wrap; }

/* App Store badge */
.appstore-badge{
  display: inline-block;
  line-height: 0;
  transition: transform .15s ease, filter .15s ease;
}
.appstore-badge img{
  display: block;
  height: 54px;
  width: auto;
}
.appstore-badge:hover{
  transform: translateY(-1px);
  filter: drop-shadow(0 8px 16px rgba(0,0,0,0.18));
}

/* ============ PHONE MOCK ============ */
.phone{
  width: 320px; height: 660px;
  background: var(--ink);
  border-radius: 46px;
  padding: 12px;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.phone::before{
  content:""; position:absolute; top: 22px; left: 50%; transform: translateX(-50%);
  width: 110px; height: 28px; background: #000; border-radius: 999px; z-index: 3;
}
.phone-screen{
  position:relative; overflow:hidden; width: 100%; height: 100%;
  border-radius: 36px; background: var(--bg);
  display:flex; flex-direction: column;
}
.phone-status{
  display:flex; justify-content: space-between; align-items:center;
  padding: 14px 28px 6px;
  font-family: 'Geist Mono', monospace; font-size: 13px; font-weight: 600;
}
.phone-status .right{ display:flex; gap:6px; align-items:center; }
.dot-bar{ display:inline-block; width: 16px; height: 10px; border: 1.5px solid var(--ink); border-radius: 3px; position: relative; }
.dot-bar::after{ content:""; position:absolute; inset: 1.5px; background: var(--ink); border-radius: 1px; width: 70%; }

/* App header inside phone */
.app-header{
  padding: 20px 22px 14px; border-bottom: 1px solid var(--line-softer);
  display:flex; align-items:center; justify-content: space-between;
}
.app-header .title{ font-family: 'Geist Mono', monospace; font-size: 20px; font-weight: 600; letter-spacing:-.02em }
.app-header .subtitle{ font-size: 11px; color: var(--muted); letter-spacing:.06em; text-transform: uppercase; font-family: 'Geist Mono', monospace; margin-top: 2px;}
.app-avatar{ width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: var(--accent); display:grid; place-items:center; font-family:'Geist Mono', monospace; font-size:12px; font-weight:600;}

/* Chat */
.chat{ flex:1; padding: 18px 16px; display:flex; flex-direction: column; gap: 10px; overflow: hidden; }
.bubble{
  max-width: 78%;
  padding: 10px 14px; border-radius: 18px;
  font-size: 14px; line-height: 1.4;
}
.bubble.user{ align-self:flex-end; background: var(--ink); color:#fff; border-bottom-right-radius: 6px; }
.bubble.ai{ align-self:flex-start; background: var(--bg-2); color: var(--ink); border-bottom-left-radius: 6px; }
.bubble.confirm{
  align-self: flex-start;
  background: var(--success); color: var(--success-ink);
  border-bottom-left-radius: 6px;
  font-weight: 600;
  display:flex; gap:8px; align-items:flex-start;
}
.bubble small{ display:block; font-family:'Geist Mono', monospace; font-size:10px; opacity:.7; margin-top:4px; letter-spacing:.04em; text-transform: uppercase; }

.composer{
  margin: 0 14px 18px; padding: 10px 14px;
  background: var(--card); border: 1px solid var(--line-softer);
  border-radius: 22px; display:flex; align-items:center; gap:10px;
  font-size: 13px; color: var(--muted);
  box-shadow: var(--shadow-sm);
}
.composer .send{ margin-left:auto; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); display:grid; place-items:center; }

.tabbar{
  display:flex; justify-content: space-around; padding: 12px 24px 28px;
  border-top: 1px solid var(--line-softer);
  background: color-mix(in oklab, var(--bg) 90%, transparent);
}
.tab{ display:flex; flex-direction:column; align-items:center; gap:4px; font-family:'Geist Mono', monospace; font-size: 10px; letter-spacing:.08em; text-transform: uppercase; color: var(--muted); }
.tab.active{ color: var(--ink); }
.tab .icon{ width: 22px; height: 22px; display:grid; place-items:center; border-radius:6px; }
.tab.active .icon{ background: var(--ink); color: var(--accent); }

/* ============ PHOTO BAND ============ */
.photo-band{
  display: block;
  margin: 0;
  padding: 0 !important;
  height: clamp(360px, 42vw, 560px);
  min-height: 360px;
  position: relative;
  overflow: hidden;
  background: var(--ink);
  border-top: 1px solid var(--line-softer);
  border-bottom: 1px solid var(--line-softer);
}
.photo-band .strip{
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  grid-template-rows: 1fr;
  gap: 4px;
  background: var(--ink);
}
@media (max-width: 760px){
  .photo-band{ height: clamp(280px, 60vw, 420px); min-height: 280px; }
  .photo-band .strip{ grid-template-columns: 1.6fr 1fr; }
  .photo-band .strip > *:nth-child(3){ display:none; }
}
.photo-band figure{
  margin: 0;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  filter: saturate(1.05) contrast(1.02);
}
.photo-band figure::after{
  content:""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(15,26,46,.65));
  pointer-events: none;
}
.photo-band figcaption{
  position: absolute; left: 20px; right: 20px; bottom: 18px;
  font-family: 'Geist Mono', monospace; font-size: 11px;
  letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.92);
  z-index: 2;
  display: flex; align-items: center; gap: 10px;
}
.photo-band figcaption::before{
  content:""; width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent);
}
.photo-band .overlay-quote{
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  pointer-events: none;
}
.photo-band .overlay-quote h3{
  color: #fff;
  font-size: clamp(28px, 4.4vw, 64px);
  font-weight: 500;
  letter-spacing: -.03em;
  line-height: 1.05;
  text-align: center;
  max-width: 18ch;
  text-wrap: balance;
  text-shadow: 0 2px 30px rgba(0,0,0,.35);
}
.photo-band .overlay-quote h3 em{
  font-style: normal;
  background: linear-gradient(180deg, transparent 60%, var(--accent) 60%);
  padding: 0 .12em;
  color: #fff;
}

/* Hero side photo */
.hero-photo{
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 22%;
  background-size: cover; background-position: center;
  filter: saturate(1.05) contrast(1.02);
  pointer-events: none;
}
.hero-photo::after{
  content:""; position:absolute; inset: 0;
  background: linear-gradient(90deg, var(--bg) 0%, transparent 40%, transparent 100%);
}
@media (max-width: 1100px){ .hero-photo{ display: none; } }

/* ============ MARQUEE ============ */
.marquee{
  border-top: 1px solid var(--line-softer);
  border-bottom: 1px solid var(--line-softer);
  background: var(--bg);
  overflow: hidden;
  padding: 22px 0;
}
.marquee-track{
  display:flex; gap: 56px; align-items:center;
  font-family: 'Geist Mono', monospace; font-size: 13px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
  white-space: nowrap;
  animation: scroll 38s linear infinite;
}
.marquee-track span{ display:inline-flex; align-items:center; gap: 56px; }
.marquee-track .pill{ padding: 4px 14px; border:1px solid var(--line-soft); border-radius: 999px; }
.marquee-track .star{ color: var(--accent); }
@keyframes scroll{
  from{ transform: translateX(0); }
  to{ transform: translateX(-50%); }
}

/* ============ SECTIONS ============ */
section{ padding: clamp(64px, 9vw, 120px) 0; }

.section-head{ display:grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; margin-bottom: 56px; }
@media (max-width: 760px){ .section-head{ grid-template-columns: 1fr; } }
.section-head .h-section{ max-width: 18ch; }
.section-head .desc{ max-width: 40ch; color: var(--muted); }

/* Feature grid */
.features{
  display:grid; grid-template-columns: repeat(12, 1fr); gap: 16px;
}
.feature{
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 28px;
  border: 1px solid var(--line-softer);
  display:flex; flex-direction: column; gap: 16px;
  min-height: 300px;
  position: relative;
  transition: transform .2s ease, box-shadow .2s ease;
}
.feature:hover{ transform: translateY(-2px); box-shadow: var(--shadow-md); }
.feature .num{ font-family:'Geist Mono', monospace; font-size: 11px; color: var(--muted); letter-spacing: .1em; }
.feature h3{ font-size: 22px; line-height: 1.15; letter-spacing: -.02em; max-width: 16ch; }
.feature p{ color: var(--muted); font-size: 15px; margin: 0; }
.feature .demo{ margin-top: auto; }
.f-1{ grid-column: span 7; background: var(--ink); color: #fff; }
.f-1 h3, .f-1 p{ color: rgba(255,255,255,.92); }
.f-1 .num{ color: rgba(255,255,255,.5); }
.f-2{ grid-column: span 5; }
.f-3{ grid-column: span 4; }
.f-4{ grid-column: span 4; background: var(--accent); color: var(--accent-ink); border-color: transparent;}
.f-4 .num{ color: var(--accent-ink); opacity: .7; }
.f-4 p{ color: var(--accent-ink); opacity: .85; }
.f-5{ grid-column: span 4; }
@media (max-width: 900px){
  .f-1,.f-2,.f-3,.f-4,.f-5{ grid-column: span 12; }
}

/* Inline mini chat demo for feature card */
.mini-chat{ display:flex; flex-direction: column; gap:6px; }
.mini-chat .bubble{ font-size: 12px; padding: 8px 12px; border-radius: 14px; max-width: 90%; }
.mini-chat .bubble.user{ background: rgba(255,255,255,.08); color:#fff; align-self:flex-end; }
.f-1 .mini-chat .bubble.ai{ background: rgba(255,255,255,.06); color: rgba(255,255,255,.85); }
.f-1 .mini-chat .bubble.confirm{ background: var(--success); color: var(--success-ink); }

/* Mini progress demo */
.mini-progress{
  display:flex; flex-direction: column; gap: 8px; padding: 14px 14px 16px;
  background: var(--bg-2); border-radius: 14px;
  font-family: 'Geist Mono', monospace; font-size: 11px;
}
.mini-progress .row{ display:flex; justify-content:space-between; gap: 12px; align-items: baseline; }
.mini-progress .row span:first-child{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini-progress .row .v{ font-weight: 600; color: var(--ink); white-space: nowrap; flex-shrink: 0; }
.mini-progress .bar{ height: 4px; background: var(--bg-3); border-radius: 4px; position: relative; overflow:hidden;}
.mini-progress .bar::after{ content:""; position:absolute; inset:0; background: var(--ink); transform-origin: left; }
.mini-progress .bar.b1::after{ width: 40%; }
.mini-progress .bar.b2::after{ width: 65%; }
.mini-progress .bar.b3::after{ width: 88%; }

/* Equipment memory chip */
.chips{ display:flex; flex-wrap: wrap; gap: 6px; }
.chip{
  font-family:'Geist Mono', monospace; font-size: 11px;
  padding: 5px 10px; background: var(--bg-2); border-radius: 999px;
  border: 1px solid var(--line-softer);
}
.f-4 .chip{ background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.28); color: #fff; }

/* ============ HOW IT WORKS ============ */
.steps{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 800px){ .steps{ grid-template-columns: 1fr; } }
.step{
  border-top: 1px solid var(--line);
  padding-top: 28px;
  display:flex; flex-direction:column; gap:14px;
}
.step .num{
  font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: .1em;
  color: var(--ink);
}
.step h3{ font-size: 28px; line-height: 1.05; max-width: 14ch; }
.step p{ color: var(--muted); margin: 0; max-width: 36ch; }

/* ============ SCREENSHOTS STRIP ============ */
.shots{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 8px 0 24px;
}
.shot{
  display: flex; flex-direction: column; gap: 12px;
  min-width: 0;
}
@media (max-width: 900px){
  .shots{
    display: flex;
    grid-template-columns: none;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: thin;
  }
  .shot{
    flex: 0 0 260px;
    scroll-snap-align: start;
  }
}
.shots::-webkit-scrollbar{ height: 6px; }
.shots::-webkit-scrollbar-thumb{ background: var(--line-soft); border-radius: 999px; }
.shot-frame{
  aspect-ratio: 9/19.5;
  border-radius: 28px;
  background: var(--card);
  border: 1px solid var(--line-soft);
  position: relative; overflow: hidden;
  box-shadow: var(--shadow-md);
}
.phone-screen .screen-img,
.shot-frame .screen-img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: top center;
  display: block; z-index: 2;
}
.shot-frame .stripe{
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(135deg, var(--bg-2) 0 12px, transparent 12px 24px);
  opacity: .6;
}
.shot-frame .label{
  position: absolute; left: 16px; right: 16px; top: 16px;
  font-family: 'Geist Mono', monospace; font-size: 10px;
  color: var(--muted); letter-spacing: .08em; text-transform: uppercase;
}
.shot-frame .placeholder-tag{
  position:absolute; left: 16px; right: 16px; bottom: 16px;
  background: var(--ink); color: var(--accent);
  font-family:'Geist Mono', monospace; font-size: 11px;
  padding: 8px 12px; border-radius: 8px; line-height: 1.3;
}
.shot .caption{ font-family:'Geist Mono', monospace; font-size:11px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.shot .headline{ font-size: 18px; line-height: 1.2; letter-spacing: -.01em; }

/* ============ FAQ ============ */
.faq{ display:flex; flex-direction: column; }
.faq details{
  border-top: 1px solid var(--line-softer);
  padding: 24px 0;
}
.faq details:last-child{ border-bottom: 1px solid var(--line-softer); }
.faq summary{
  list-style: none;
  display:flex; justify-content: space-between; align-items: center;
  cursor: pointer;
  font-size: clamp(20px, 2vw, 26px); font-weight: 500; letter-spacing: -.02em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary .plus{ width: 28px; height: 28px; border-radius: 50%; background: var(--bg-2); display:grid; place-items:center; transition: transform .25s ease, background .25s ease; }
.faq details[open] summary .plus{ transform: rotate(45deg); background: var(--accent); }
.faq .answer{ margin-top: 14px; max-width: 64ch; color: var(--muted); }

/* ============ CTA ============ */
.cta-band{
  background: var(--ink); color: #fff;
  border-radius: var(--radius-lg);
  padding: clamp(40px, 6vw, 80px);
  display:grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center;
  position: relative; overflow: hidden;
}
@media (max-width: 800px){ .cta-band{ grid-template-columns: 1fr; } }
.cta-band h2{ font-size: clamp(36px, 5vw, 72px); letter-spacing: -.03em; max-width: 14ch; }
.cta-band h2 em{ font-style: normal; color: var(--accent); }
.cta-band p{ color: rgba(255,255,255,.7); max-width: 38ch; margin: 16px 0 28px; }
.cta-band .badge-wrap{ display:flex; flex-direction: column; gap: 14px; align-items:flex-start; justify-self: end;}
@media (max-width: 800px){ .cta-band .badge-wrap{ justify-self: start; } }
.cta-band .stat{ font-family:'Geist Mono', monospace; font-size: 11px; color: rgba(255,255,255,.5); letter-spacing: .1em; text-transform: uppercase; }

/* ============ WAITLIST ============ */
.waitlist-section{
  padding: clamp(56px, 8vw, 96px) 0;
  background: var(--bg-2);
  border-top: 1px solid var(--line-softer);
  border-bottom: 1px solid var(--line-softer);
}
.waitlist-card{
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 40px;
  align-items: center;
  background: var(--card);
  border: 1px solid var(--line-softer);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 5vw, 56px);
  box-shadow: var(--shadow-md);
}
@media (max-width: 800px){ .waitlist-card{ grid-template-columns: 1fr; } }
.waitlist-card p{ color: var(--ink-2); margin-top: 14px; max-width: 44ch; }
.waitlist-form{
  display: flex; gap: 8px; flex-wrap: wrap;
  width: 100%;
}
.waitlist-form input[type="email"]{
  flex: 1 1 220px;
  min-width: 0;
  padding: 14px 18px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-soft);
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.waitlist-form input[type="email"]::placeholder{ color: var(--muted); }
.waitlist-form input[type="email"]:focus{
  border-color: var(--ink);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.waitlist-form button{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 14px 22px;
  border-radius: var(--radius-pill);
  background: var(--ink);
  color: #fff;
  font-family: inherit;
  font-weight: 600;
  font-size: 14px;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .15s ease, box-shadow .15s ease;
}
.waitlist-form button:hover{ transform: translateY(-1px); box-shadow: var(--shadow-md); }
.waitlist-form button:active{ transform: translateY(0); }

/* ============ FOOTER ============ */
footer{
  padding: 64px 0 40px;
  border-top: 1px solid var(--line-softer);
}
.foot-grid{ display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 800px){ .foot-grid{ grid-template-columns: 1fr 1fr; } }
.foot-grid h4{ font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); font-weight: 500; margin-bottom: 16px; }
.foot-grid ul{ list-style: none; padding: 0; margin: 0; display:flex; flex-direction: column; gap: 10px; }
.foot-grid a{ font-size: 14px; color: var(--ink-2); }
.foot-grid a:hover{ color: var(--ink); }
.foot-bottom{ display:flex; justify-content: space-between; align-items:center; margin-top: 56px; padding-top: 24px; border-top: 1px solid var(--line-softer); font-family:'Geist Mono', monospace; font-size: 11px; color: var(--muted); letter-spacing:.06em; text-transform: uppercase; }
.foot-tagline{ font-family:'Geist', sans-serif; font-size: 16px; color: var(--ink-2); max-width: 36ch; margin-top: 16px; text-transform: none; letter-spacing: -.01em; }

/* ============ DOC PAGES ============ */
.doc{
  max-width: 760px; margin: 0 auto;
  padding: clamp(48px, 8vw, 96px) 24px clamp(64px, 9vw, 120px);
}
.doc .eyebrow{ margin-bottom: 14px; }
.doc h1{ font-size: clamp(40px, 5vw, 64px); letter-spacing: -.03em; line-height: 1.05; margin-bottom: 12px;}
.doc .meta{ font-family:'Geist Mono', monospace; font-size: 12px; color: var(--muted); letter-spacing:.06em; text-transform: uppercase; margin-bottom: 48px; padding-bottom: 24px; border-bottom: 1px solid var(--line-softer);}
.doc h2{ font-size: 24px; letter-spacing: -.02em; margin-top: 48px; margin-bottom: 14px; }
.doc h3{ font-size: 18px; margin-top: 28px; margin-bottom: 8px; font-weight: 600;}
.doc p, .doc li{ color: var(--ink-2); font-size: 16px; line-height: 1.7; }
.doc ul{ padding-left: 22px; }
.doc ul li{ margin-bottom: 6px; }
.doc a{ color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: var(--line-soft); }
.doc a:hover{ text-decoration-color: var(--ink); }
.doc strong{ color: var(--ink); font-weight: 600; }
.doc .callout{
  margin: 32px 0; padding: 20px 24px; background: var(--bg-2); border-radius: var(--radius);
  font-size: 15px; color: var(--ink-2);
  border-left: 3px solid var(--accent);
}
.doc .toc{
  margin: 24px 0 48px; padding: 20px; background: var(--card); border: 1px solid var(--line-softer); border-radius: var(--radius);
}
.doc .toc h4{ font-family:'Geist Mono', monospace; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; font-weight:500; }
.doc .toc ol{ margin: 0; padding-left: 20px; columns: 2; column-gap: 32px; }
.doc .toc a{ font-size: 14px; text-decoration: none; }
@media (max-width: 600px){ .doc .toc ol{ columns: 1; } }

/* Support / Contact specifics */
.support-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 32px 0 56px; }
@media (max-width: 720px){ .support-grid{ grid-template-columns: 1fr; } }
.support-card{
  background: var(--card); border: 1px solid var(--line-softer); border-radius: var(--radius-lg);
  padding: 24px; display:flex; flex-direction: column; gap: 8px;
}
.support-card .icon{
  width: 36px; height: 36px; border-radius: 10px; background: var(--bg-2);
  display:grid; place-items:center; margin-bottom: 8px;
  font-family:'Geist Mono', monospace; font-size: 14px; font-weight: 600;
}
.support-card h3{ font-size: 16px; letter-spacing:-.01em;}
.support-card p{ font-size: 14px; color: var(--muted); margin: 0;}
.support-card a{ font-family:'Geist Mono', monospace; font-size: 13px; margin-top: auto; padding-top: 12px; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--line-soft); }
.support-card a:hover{ text-decoration-color: var(--ink); }

.contact-form{
  display:flex; flex-direction: column; gap: 16px;
  background: var(--card); border: 1px solid var(--line-softer); border-radius: var(--radius-lg);
  padding: 32px; margin-top: 32px;
}
.contact-form label{ font-family:'Geist Mono', monospace; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.contact-form input, .contact-form textarea, .contact-form select{
  border: 1px solid var(--line-soft); border-radius: 10px; padding: 12px 14px;
  font: inherit; background: var(--bg); color: var(--ink);
  width: 100%; outline: none;
  transition: border-color .15s ease;
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus{ border-color: var(--ink); }
.contact-form textarea{ min-height: 140px; resize: vertical; }
.contact-form .row{ display:flex; flex-direction: column; gap: 8px; }
.contact-form .submit{ align-self: flex-start; margin-top: 8px; }

/* utility */
.hr{ border:none; height:1px; background: var(--line-softer); margin: 0; }
.fade-in{ animation: fadeIn .8s ease both; }
@keyframes fadeIn{ from{ opacity: 0; transform: translateY(8px);} to{ opacity:1; transform: none;} }