/* ═══════════════════════════════════════════════
   BeeQuill — marketing site
   ═══════════════════════════════════════════════ */

:root {
  --ink:        #0D0B0A;
  --ink-2:      #171311;
  --panel:      #1F1A17;
  --line:       rgba(255,255,255,.08);
  --txt:        #F9F6F0;
  --txt-dim:    #B0A499;
  --txt-faint:  #70665D;

  --accent:     #D4654A;
  --accent-2:   #F59E0B;
  --cyan:       #5B8A72;
  --green:      #34D399;
  --amber:      #F59E0B;

  --grad: linear-gradient(110deg, #D4654A 0%, #F59E0B 60%, #E08468 100%);

  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px;
  --maxw: 1200px;
  --ease: cubic-bezier(.22,.61,.36,1);

  --font-head: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; background-color: #0D0B0A; }

body {
  font-family: var(--font-body);
  background: transparent;
  color: var(--txt);
  overflow-x: hidden;
  line-height: 1.6;
}

code { font-family: var(--font-mono); font-size: .86em; background: rgba(100,181,255,.12); color: var(--accent); padding: .12em .4em; border-radius: 6px; }

h1,h2,h3,h4,h5,h6 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

p, li, blockquote, .capture-lede, .persona-quote {
  text-wrap: pretty;
  overflow-wrap: break-word;
  word-break: break-word;
}

.feat, .step, .persona-stage, .persona-preview-box, .lead-card, .cta-inner, .download-modal-card, .plat-item {
  contain: layout paint;
  overflow: hidden;
}

.grad-text {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}

/* ── aurora backdrop ─────────────────────────── */
.aurora {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: radial-gradient(ellipse 80% 60% at 50% -10%, #16203e 0%, transparent 60%), #0D0B0A;
}

main, footer, .hero, .features, .steps, .personas, .pricing-section, .about-section, .principles, .roadmap, .faq-wrap, .capture, .lead-gen, .cta, .privacy-wrap, .terms-wrap {
  position: relative;
  z-index: 1;
}
.blob { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; will-change: transform; }
.blob-1 { width: 540px; height: 540px; background: #2c5cff; top: -160px; left: -120px; animation: float1 22s var(--ease) infinite; }
.blob-2 { width: 460px; height: 460px; background: #7b3bff; top: 28%; right: -140px; animation: float2 26s var(--ease) infinite; }
.blob-3 { width: 420px; height: 420px; background: #0fb6c9; top: 64%; left: 18%; animation: float3 30s var(--ease) infinite; opacity: .4; }
@keyframes float1 { 50% { transform: translate(120px,80px) scale(1.15); } }
@keyframes float2 { 50% { transform: translate(-100px,120px) scale(1.1); } }
@keyframes float3 { 50% { transform: translate(80px,-90px) scale(1.2); } }

.grid-overlay { position: absolute; inset: 0; background-image:
  linear-gradient(var(--line) 1px, transparent 1px),
  linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 0%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 30%, #000 0%, transparent 80%);
  opacity: .5; }
.noise { position: absolute; inset: 0; opacity: .035; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* ── nav ─────────────────────────────────────── */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 100%;
  max-width: 100%;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px clamp(20px, 5vw, 48px);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0px;
  backdrop-filter: blur(0px);
  -webkit-backdrop-filter: blur(0px);
  box-shadow: none;
  transition: max-width .4s cubic-bezier(0.4, 0, 0.2, 1),
              width .4s cubic-bezier(0.4, 0, 0.2, 1),
              top .4s cubic-bezier(0.4, 0, 0.2, 1),
              padding .4s cubic-bezier(0.4, 0, 0.2, 1),
              border-radius .4s cubic-bezier(0.4, 0, 0.2, 1),
              background-color .4s cubic-bezier(0.4, 0, 0.2, 1),
              border-color .4s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow .4s cubic-bezier(0.4, 0, 0.2, 1),
              backdrop-filter .4s cubic-bezier(0.4, 0, 0.2, 1),
              -webkit-backdrop-filter .4s cubic-bezier(0.4, 0, 0.2, 1);
}

.subpage .nav,
.nav.scrolled {
  top: 14px;
  width: calc(100% - 32px);
  max-width: min(1040px, calc(100% - 32px));
  padding: 8px 16px 8px 14px;
  border-radius: 999px;
  background-color: rgba(13, 11, 10, 0.88);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.85),
              0 4px 12px -2px rgba(0, 0, 0, 0.4),
              inset 0 1px 0 0 rgba(255, 255, 255, 0.12);
}

.subpage .nav .btn-sm,
.nav.scrolled .btn-sm {
  padding: 7px 16px;
  font-size: .85rem;
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--txt); font-weight: 700; flex-shrink: 0; }
.brand-icon-img { width: 28px; height: 28px; border-radius: 7px; object-fit: contain; display: block; }
.brand-mark { display: grid; place-items: center; color: var(--accent); }
.brand-word { font-family: var(--font-head); font-size: 1.15rem; letter-spacing: -.01em; }
.nav-links { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.nav-links a {
  color: var(--txt-dim);
  text-decoration: none;
  font-size: .88rem;
  font-weight: 500;
  padding: 6px 14px;
  border-radius: 999px;
  border: 1px solid transparent;
  transition: color .2s var(--ease), background-color .2s var(--ease), border-color .2s var(--ease), box-shadow .2s var(--ease);
  position: relative;
  white-space: nowrap;
}
.nav-links a:hover {
  color: var(--txt);
  background: rgba(255, 255, 255, 0.06);
}
.nav-links a.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.15);
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, 0.4), inset 0 1px 0 0 rgba(255, 255, 255, 0.18);
  font-weight: 600;
}

/* ── inline icons ────────────────────────────── */
.ic { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.85; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.ic-sm { width: 16px; height: 16px; }
.tile { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; flex-shrink: 0; }
.tile .ic { width: 22px; height: 22px; }
.tile-blue { background: rgba(100,181,255,.16); color: var(--accent); border: 1px solid rgba(100,181,255,.24); }
.tile-violet { background: rgba(139,123,255,.16); color: var(--accent-2); border: 1px solid rgba(139,123,255,.24); }
.tile-green { background: rgba(52,211,153,.16); color: var(--green); border: 1px solid rgba(52,211,153,.24); }
.tile-amber { background: rgba(245,158,11,.16); color: var(--amber); border: 1px solid rgba(245,158,11,.24); }

/* ── buttons ─────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-head); font-weight: 600; text-decoration: none; border-radius: 999px; cursor: pointer; transition: transform .25s var(--ease), box-shadow .3s var(--ease), background .3s; border: 1px solid transparent; white-space: nowrap; }
.btn-sm { padding: 9px 18px; font-size: .9rem; }
.btn-lg { padding: 15px 30px; font-size: 1.04rem; }
.btn-primary { background: var(--grad); background-size: 180% 180%; color: #07101f; box-shadow: 0 8px 30px -8px rgba(100,181,255,.6); animation: shimmer 6s linear infinite; }
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 16px 44px -10px rgba(100,181,255,.75); }
@keyframes shimmer { 50% { background-position: 100% 50%; } }
.btn-ghost { background: rgba(255,255,255,.04); color: var(--txt); border-color: var(--line); }
.btn-ghost:hover { transform: translateY(-3px); background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.2); }

/* ── hero ────────────────────────────────────── */
.hero { max-width: var(--maxw); margin: 0 auto; padding: clamp(130px,16vh,190px) clamp(20px,5vw,48px) 80px; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px,5vw,64px); align-items: center; }
.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--accent); background: rgba(100,181,255,.1); border: 1px solid rgba(100,181,255,.22); padding: 7px 14px; border-radius: 999px; margin-bottom: 26px; }
.eyebrow-dark { color: var(--accent-2); background: rgba(139,123,255,.1); border-color: rgba(139,123,255,.22); }
.dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 0 rgba(52,211,153,.6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 8px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
.hero-title { font-size: clamp(2.6rem,5.6vw,4.4rem); font-weight: 800; margin-bottom: 24px; }
.hero-sub { font-size: clamp(1.05rem,1.6vw,1.28rem); color: var(--txt-dim); max-width: 33ch; margin-bottom: 34px; }
.hero-sub strong { color: var(--txt); font-weight: 600; }
.hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }
.hero-cta.center { justify-content: center; }
.hero-trust { display: flex; gap: 20px; flex-wrap: wrap; margin-top: 30px; color: var(--txt-faint); font-size: .9rem; font-weight: 500; }
.hero-trust span { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust .ic { color: var(--green); }

/* ── app mockup ──────────────────────────────── */
.hero-app { position: relative; perspective: 1800px; }
.app-window { position: relative; z-index: 2; border-radius: var(--r-lg); overflow: hidden; background: var(--ink-2); border: 1px solid var(--line); box-shadow: 0 40px 90px -30px rgba(0,0,0,.8), 0 0 0 1px rgba(255,255,255,.03) inset; transform: rotateY(-9deg) rotateX(4deg); transform-style: preserve-3d; transition: transform .6s var(--ease); }
.hero-app:hover .app-window { transform: rotateY(-4deg) rotateX(2deg); }
.app-glow { position: absolute; inset: 8% 6%; background: var(--grad); filter: blur(70px); opacity: .35; z-index: 1; border-radius: 50%; }
.app-chrome { display: flex; align-items: center; gap: 7px; padding: 11px 14px; background: rgba(255,255,255,.03); border-bottom: 1px solid var(--line); }
.tl { width: 11px; height: 11px; border-radius: 50%; } .tl-r{background:#ff5f57}.tl-y{background:#febc2e}.tl-g{background:#28c840}
.app-chrome-title { margin-left: auto; margin-right: auto; font-size: .78rem; color: var(--txt-faint); font-family: var(--font-head); }
.app-body { display: grid; grid-template-columns: 132px 1fr 150px; min-height: 340px; font-size: .72rem; }
.app-side { background: rgba(0,0,0,.25); border-right: 1px solid var(--line); padding: 12px 10px; display: flex; flex-direction: column; gap: 10px; }
.side-pill { display: inline-flex; align-items: center; gap: 5px; font-size: .6rem; color: var(--green); background: rgba(52,211,153,.1); padding: 4px 7px; border-radius: 999px; font-weight: 600; }
.dot-priv { width: 6px; height: 6px; border-radius: 50%; background: var(--green); }
.side-new { background: var(--grad); color: #07101f; border: none; border-radius: 8px; padding: 7px; font-weight: 700; font-size: .68rem; font-family: var(--font-head); cursor: pointer; }
.side-nav { display: flex; flex-direction: column; gap: 2px; }
.sn { padding: 5px 8px; border-radius: 6px; color: var(--txt-dim); } .sn.active { background: rgba(100,181,255,.12); color: var(--accent); }
.side-list { display: flex; flex-direction: column; gap: 3px; margin-top: 6px; border-top: 1px solid var(--line); padding-top: 10px; }
.side-item { display: flex; align-items: center; gap: 6px; padding: 5px 7px; border-radius: 6px; color: var(--txt-dim); }
.side-item.active { background: rgba(255,255,255,.05); color: var(--txt); }
.fdot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.app-main { padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.app-tabs { display: flex; gap: 4px; }
.tab { padding: 4px 10px; border-radius: 6px; color: var(--txt-faint); font-weight: 600; } .tab.active { background: rgba(100,181,255,.14); color: var(--accent); }
.app-h { font-size: 1rem; }
.app-note p { color: var(--txt-dim); margin-bottom: 3px; }
.app-note strong { color: var(--txt); }
.typed { overflow: hidden; white-space: nowrap; border-right: 1.5px solid transparent; }
.enhance-bar { margin-top: auto; display: flex; align-items: center; gap: 6px; font-size: .64rem; color: var(--accent); background: rgba(100,181,255,.08); border: 1px solid rgba(100,181,255,.18); border-radius: 8px; padding: 7px 9px; }
.enhance-bar em { color: var(--txt); font-style: normal; font-weight: 600; }
.spark { color: var(--accent); } .spark-green { color: var(--green); }
.enhance-prog { margin-left: auto; width: 40px; height: 4px; background: rgba(255,255,255,.1); border-radius: 999px; overflow: hidden; }
.enhance-prog span { display: block; height: 100%; width: 30%; background: var(--grad); border-radius: 999px; animation: prog 2.4s var(--ease) infinite; }
@keyframes prog { 0%{width:8%}50%{width:92%}100%{width:8%} }
.app-rail { background: rgba(0,0,0,.25); border-left: 1px solid var(--line); padding: 12px 10px; display: flex; flex-direction: column; gap: 7px; }
.rail-h { font-size: .6rem; text-transform: uppercase; letter-spacing: .06em; color: var(--txt-faint); font-weight: 700; }
.bubble { font-size: .64rem; padding: 6px 8px; border-radius: 8px; line-height: 1.35; }
.bubble span { display: block; font-size: .52rem; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 2px; font-weight: 700; }
.bubble.me { background: rgba(100,181,255,.1); } .bubble.me span { color: var(--accent); }
.bubble.them { background: rgba(255,255,255,.05); } .bubble.them span { color: var(--txt-faint); }
.bubble.typing { display: flex; align-items: center; gap: 4px; }
.bubble.typing i { width: 4px; height: 4px; border-radius: 50%; background: var(--txt-faint); animation: blink 1.4s infinite; }
.bubble.typing i:nth-child(3){animation-delay:.2s}.bubble.typing i:nth-child(4){animation-delay:.4s}
@keyframes blink { 0%,60%,100%{opacity:.3}30%{opacity:1} }

/* ── marquee ─────────────────────────────────── */
.marquee-wrap { max-width: var(--maxw); margin: 40px auto; padding: 0 clamp(20px,5vw,48px); }
.marquee-label { text-align: center; color: var(--txt-faint); font-size: .82rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; margin-bottom: 22px; }
.marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.marquee-track { display: flex; gap: 56px; width: max-content; animation: scroll 28s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { font-family: var(--font-head); font-weight: 600; font-size: 1.25rem; color: var(--txt-faint); transition: color .3s; white-space: nowrap; }
.marquee-track span:hover { color: var(--accent); }
@keyframes scroll { to { transform: translateX(-50%); } }

/* ── sections shared ─────────────────────────── */
.section-head { text-align: center; max-width: 720px; margin: 0 auto 60px; }
.section-head h2 { font-size: clamp(2rem,4vw,3.1rem); }
.features, .capture, .split, .compare { max-width: var(--maxw); margin: 0 auto; padding: clamp(80px,12vh,140px) clamp(20px,5vw,48px); }

/* ── feature grid ────────────────────────────── */
.feature-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.feat { background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.01)); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 30px 28px; transition: transform .4s var(--ease), border-color .4s, box-shadow .4s; position: relative; overflow: hidden; }
.feat::before { content: ''; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(100,181,255,.12), transparent 45%); opacity: 0; transition: opacity .4s; }
.feat:hover { transform: translateY(-6px); border-color: rgba(100,181,255,.3); box-shadow: 0 26px 60px -28px rgba(100,181,255,.4); }
.feat:hover::before { opacity: 1; }
.feat-icon { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 18px; background: linear-gradient(150deg, rgba(100,181,255,.18), rgba(139,123,255,.1)); border: 1px solid rgba(100,181,255,.22); color: var(--accent); }
.feat-icon .ic { width: 26px; height: 26px; }
.feat h3 { font-size: 1.28rem; margin-bottom: 10px; }
.feat p { color: var(--txt-dim); font-size: .98rem; }
.feat code { font-size: .8em; }

/* ── capture steps ───────────────────────────── */
.capture-head { text-align: center; max-width: 700px; margin: 0 auto 64px; }
.capture-head h2 { font-size: clamp(2rem,4vw,3.1rem); margin-bottom: 18px; }
.capture-lede { color: var(--txt-dim); font-size: 1.1rem; }
.steps { display: grid; grid-template-columns: repeat(4,1fr); gap: 20px; counter-reset: s; }
.step { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 28px 22px; position: relative; transition: transform .4s var(--ease), border-color .4s; }
.step:hover { transform: translateY(-5px); border-color: rgba(139,123,255,.35); }
.step-n { font-family: var(--font-head); font-weight: 800; font-size: 2.4rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; display: block; margin-bottom: 14px; opacity: .9; }
.step h3 { font-size: 1.12rem; margin-bottom: 9px; }
.step p { color: var(--txt-dim); font-size: .92rem; }

/* ── split cards ─────────────────────────────── */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.glass { background: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,.015)); backdrop-filter: blur(12px); border: 1px solid var(--line); border-radius: var(--r-lg); }
.split-card { padding: 40px 36px; transition: transform .4s var(--ease); }
.split-card:hover { transform: translateY(-5px); }
.split-card h3 { font-size: 1.55rem; margin-bottom: 14px; display: flex; align-items: center; gap: 10px; }
.split-card > p { color: var(--txt-dim); margin-bottom: 22px; }
.check { list-style: none; display: flex; flex-direction: column; gap: 11px; }
.check li { position: relative; padding-left: 28px; color: var(--txt); font-size: .98rem; }
.check li::before { content: '\2713'; position: absolute; left: 0; top: -1px; width: 19px; height: 19px; display: grid; place-items: center; border-radius: 50%; background: rgba(100,181,255,.16); color: var(--accent); font-size: .7rem; font-weight: 700; }
.check-green li::before { background: rgba(52,211,153,.16); color: var(--green); }

/* ── comparison table ────────────────────────── */
/* The comparison table is six columns wide and cannot usefully reflow. Without a
   scroll container it pushed the whole document to 937px on a 375px phone, so
   every section on the page scrolled sideways. It scrolls inside its own box
   instead; `min-width` keeps the columns readable rather than crushed, and
   `overscroll-behavior-x` stops the swipe escaping to the page underneath. */
.table-wrap {
  /* 880px was too narrow for six columns: the table's min-content width is 917px,
     so it was clipped at every desktop size. Before the scroll container existed
     it overflowed the page instead, which is how it went unnoticed. The page's own
     content column is 1200px, so the table gets the same budget and fits with room
     to spare. */
  max-width: var(--maxw);
  margin: 0 auto;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}
/* Below ~1000px the columns can no longer hold their text, so the wrapper scrolls
   rather than the page. min-width keeps the columns readable while it does. */
.table-wrap .cmp { min-width: 700px; }
.cmp { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; }
.cmp th, .cmp td { padding: 16px 22px; text-align: left; border-bottom: 1px solid var(--line); }
/* After the base rule on purpose — same specificity, so the later one wins.
   Tighter cells let the six columns survive to a narrower viewport before the
   wrapper has to scroll. */
@media (max-width: 1100px) {
  .cmp th, .cmp td { padding: 14px 13px; }
}
.cmp thead th { font-family: var(--font-head); font-size: .82rem; text-transform: uppercase; letter-spacing: .05em; color: var(--txt-faint); background: rgba(255,255,255,.02); }
.cmp th.us, .cmp td.us { background: rgba(100,181,255,.06); }
.cmp thead th.us { color: var(--accent); }
.cmp td { color: var(--txt-dim); font-size: .96rem; }
.cmp td:first-child { color: var(--txt); font-weight: 500; }
.cmp .y { color: var(--green); font-weight: 600; } .cmp .n { color: var(--txt-faint); }
.cmp .muted { color: var(--amber); opacity: .85; }
.cmp td.us.y { color: var(--green); font-weight: 700; }
.cmp tbody tr:last-child td { border-bottom: none; }
.cmp tr.hl td:first-child { color: var(--accent); font-weight: 600; }
.cmp tbody tr { transition: background .2s; } .cmp tbody tr:hover td { background: rgba(255,255,255,.03); } .cmp tbody tr:hover td.us { background: rgba(100,181,255,.1); }
.cmp-note { color: var(--txt-faint); font-size: .9rem; margin-top: 22px; text-align: center; max-width: 60ch; margin-inline: auto; }

/* ── final CTA ───────────────────────────────── */
.cta-final { max-width: var(--maxw); margin: 0 auto; padding: 40px clamp(20px,5vw,48px) 100px; }
.cta-inner { padding: clamp(48px,8vw,90px) 40px; text-align: center; position: relative; overflow: hidden; }
.cta-inner::before { content: ''; position: absolute; inset: -2px; background: var(--grad); opacity: .08; z-index: -1; }
.cta-inner h2 { font-size: clamp(2.2rem,5vw,3.6rem); margin-bottom: 18px; }
.cta-inner > p { color: var(--txt-dim); font-size: 1.15rem; margin-bottom: 34px; }

/* ── footer ──────────────────────────────────── */
.footer { border-top: 1px solid var(--line); padding: 64px clamp(20px,5vw,48px) 40px; }
.foot-grid { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 40px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.foot-brand .brand { margin-bottom: 14px; }
.foot-tag { color: var(--txt-dim); font-size: .94rem; line-height: 1.5; }
.foot-col h4 { font-family: var(--font-head); font-size: .82rem; text-transform: uppercase; letter-spacing: .06em; color: var(--txt-faint); margin-bottom: 14px; font-weight: 600; }
.foot-col a { display: block; color: var(--txt-dim); text-decoration: none; font-size: .94rem; margin-bottom: 9px; transition: color .2s; }
.foot-col a:hover { color: var(--accent); }
.foot-fine { max-width: var(--maxw); margin: 24px auto 0; color: var(--txt-faint); font-size: .84rem; text-align: center; }

/* ── subpage hero ────────────────────────────── */
.subpage main { padding-top: 40px; }
.page-hero { max-width: var(--maxw); margin: 0 auto; padding: clamp(130px,18vh,200px) clamp(20px,5vw,48px) clamp(40px,7vh,70px); text-align: center; }
.page-hero .eyebrow { margin-inline: auto; }
.page-title { font-size: clamp(2.6rem,6vw,4.6rem); font-weight: 800; margin-bottom: 22px; }
.page-sub { color: var(--txt-dim); font-size: clamp(1.05rem,1.7vw,1.3rem); max-width: 60ch; margin: 0 auto; }

/* ── pricing ─────────────────────────────────── */
.pricing { max-width: var(--maxw); margin: 0 auto; padding: 20px clamp(20px,5vw,48px) clamp(60px,9vh,100px); }
.price-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 22px; align-items: start; }
.price-card { padding: 34px 30px; position: relative; transition: transform .4s var(--ease), border-color .4s; display: flex; flex-direction: column; }
.price-card:hover { transform: translateY(-6px); }
.price-card.featured { border-color: rgba(100,181,255,.4); box-shadow: 0 30px 70px -30px rgba(100,181,255,.5); }
.price-card.featured::before { content: ''; position: absolute; inset: -1px; border-radius: var(--r-lg); padding: 1px; background: var(--grad); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: .6; pointer-events: none; }
.ribbon { position: absolute; top: -12px; right: 24px; background: var(--grad); color: #07101f; font-family: var(--font-head); font-weight: 700; font-size: .72rem; padding: 5px 13px; border-radius: 999px; letter-spacing: .02em; }
.price-head h3 { font-size: 1.5rem; display: flex; align-items: center; gap: 10px; }
.soon { font-size: .62rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--amber); background: rgba(245,158,11,.14); border: 1px solid rgba(245,158,11,.28); padding: 3px 8px; border-radius: 999px; }
.price-blurb { color: var(--txt-dim); font-size: .96rem; margin-top: 6px; }
.price-amt { display: flex; align-items: baseline; gap: 8px; margin: 22px 0; }
.price-amt .amt { font-family: var(--font-head); font-size: 3rem; font-weight: 800; line-height: 1; }
.price-amt .per { color: var(--txt-faint); font-size: .95rem; }
.btn-block { width: 100%; }
.price-list { margin-top: 26px; }
.price-list li { font-size: .94rem; }
.price-foot { text-align: center; color: var(--txt-faint); font-size: .92rem; margin-top: 34px; max-width: 56ch; margin-inline: auto; }

/* ── FAQ ─────────────────────────────────────── */
.faq { max-width: 800px; margin: 0 auto; padding: clamp(60px,10vh,120px) clamp(20px,5vw,48px); }
.faq-list { display: flex; flex-direction: column; gap: 14px; }
.faq-item { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-md); padding: 4px 24px; transition: border-color .3s; }
.faq-item[open] { border-color: rgba(100,181,255,.3); }
.faq-item summary { list-style: none; cursor: pointer; padding: 18px 0; font-family: var(--font-head); font-weight: 600; font-size: 1.08rem; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-x { position: relative; width: 16px; height: 16px; flex-shrink: 0; }
.faq-x::before, .faq-x::after { content: ''; position: absolute; background: var(--accent); border-radius: 2px; transition: transform .3s var(--ease); }
.faq-x::before { top: 7px; left: 0; width: 16px; height: 2px; }
.faq-x::after { left: 7px; top: 0; width: 2px; height: 16px; }
.faq-item[open] .faq-x::after { transform: rotate(90deg); opacity: 0; }
.faq-item p { color: var(--txt-dim); padding: 0 0 20px; font-size: .98rem; max-width: 64ch; }

/* ── about: mission ──────────────────────────── */
.about-mission { max-width: var(--maxw); margin: 0 auto; padding: clamp(40px,7vh,80px) clamp(20px,5vw,48px); }
.mission-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(32px,5vw,64px); align-items: center; }
.mission-copy h2 { font-size: clamp(1.9rem,3.6vw,2.8rem); margin-bottom: 20px; }
.mission-copy p { color: var(--txt-dim); margin-bottom: 16px; font-size: 1.04rem; }
.stats { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.stat { padding: 28px 24px; text-align: center; }
.stat-n { display: block; font-family: var(--font-head); font-weight: 800; font-size: 2.4rem; background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.stat-l { color: var(--txt-dim); font-size: .9rem; }

/* ── about: principles ───────────────────────── */
.principles { max-width: var(--maxw); margin: 0 auto; padding: clamp(60px,10vh,120px) clamp(20px,5vw,48px); }
.principle-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 22px; }
.principle {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 30px 28px;
  background: linear-gradient(160deg, rgba(255,255,255,.05), rgba(255,255,255,.01));
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  transition: transform .4s var(--ease), border-color .4s;
}
.principle:hover {
  transform: translateY(-5px);
  border-color: rgba(255,255,255,.18);
}
.principle h3 {
  font-size: 1.28rem;
  margin: 0;
  line-height: 1.35;
  color: var(--txt);
}
.principle p {
  color: var(--txt-dim);
  font-size: .98rem;
  line-height: 1.6;
  margin: 0;
}
.about-section {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(60px, 9vh, 110px) clamp(20px, 5vw, 48px);
}
.about-section .mission-grid {
  margin-top: 36px;
}
.principle-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 20px;
  margin-top: 24px;
}
.p-num {
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--accent);
  opacity: 0.85;
}

/* ── about: roadmap timeline ─────────────────── */
.roadmap { max-width: 780px; margin: 0 auto; padding: clamp(40px,7vh,80px) clamp(20px,5vw,48px) clamp(60px,9vh,100px); }
.timeline { position: relative; padding-left: 36px; }
.timeline::before { content: ''; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--accent), var(--accent-2), transparent); opacity: .4; }
.tl-item { position: relative; margin-bottom: 22px; }
.tl-dot { position: absolute; left: -33px; top: 22px; width: 14px; height: 14px; border-radius: 50%; background: var(--ink); border: 2px solid var(--txt-faint); }
.tl-item.done .tl-dot { background: var(--green); border-color: var(--green); box-shadow: 0 0 0 4px rgba(52,211,153,.18); }
.tl-item:nth-child(2) .tl-dot { background: var(--accent); border-color: var(--accent); box-shadow: 0 0 0 4px rgba(100,181,255,.18); }
.tl-body { padding: 22px 26px; transition: transform .4s var(--ease); }
.tl-body:hover { transform: translateX(5px); }
.tl-tag { display: inline-block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--txt-faint); background: rgba(255,255,255,.06); padding: 4px 10px; border-radius: 999px; margin-bottom: 10px; }
.tl-tag.tag-done { color: var(--green); background: rgba(52,211,153,.14); }
.tl-tag.tag-now { color: var(--accent); background: rgba(100,181,255,.14); }
.tl-body h3 { font-size: 1.2rem; margin-bottom: 7px; }
.tl-body p { color: var(--txt-dim); font-size: .96rem; }

/* ── reveal animation ────────────────────────── */
.reveal { opacity: 0; transform: translateY(34px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: translateY(0); }
/* ── nav hamburger & mobile drawer ─────────── */
.nav-actions { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 28px;
  height: 20px;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  z-index: 102;
}
.nav-hamburger span {
  display: block;
  height: 2px;
  width: 100%;
  background: var(--txt);
  border-radius: 2px;
  transition: all .2s var(--ease);
}

.mobile-drawer {
  position: fixed;
  top: 0;
  right: -100%;
  width: 85%;
  max-width: 380px;
  height: 100vh;
  background: var(--ink-2);
  border-left: 1px solid var(--line);
  z-index: 1000;
  display: flex;
  flex-direction: column;
  padding: 24px;
  transition: right .3s var(--ease);
  box-shadow: -10px 0 30px rgba(0,0,0,0.5);
}
.mobile-drawer.open { right: 0; }

.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(4px);
  z-index: 999;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.drawer-overlay.open { opacity: 1; pointer-events: auto; }

.drawer-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}
.drawer-close {
  background: transparent;
  border: none;
  color: var(--txt-dim);
  font-size: 28px;
  cursor: pointer;
  line-height: 1;
}
.drawer-links {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 24px;
}
.drawer-links a {
  color: var(--txt);
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 600;
  padding: 6px 0;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.drawer-footer {
  margin-top: auto;
  padding-top: 24px;
}

/* ── lead capture waitlist ────────────────── */
.lead-capture-section {
  max-width: var(--maxw);
  margin: 60px auto 40px;
  padding: 0 24px;
}
.lead-card {
  padding: 48px 36px;
  text-align: center;
  border-radius: var(--r-xl);
  background: linear-gradient(135deg, rgba(31,26,23,.9) 0%, rgba(13,11,10,.95) 100%);
  border: 1px solid rgba(212,101,74,.25);
  box-shadow: 0 16px 40px rgba(0,0,0,.4);
}
.lead-card h2 { font-size: clamp(1.8rem, 3.5vw, 2.5rem); margin-bottom: 12px; }
.lead-card p { color: var(--txt-dim); max-width: 540px; margin: 0 auto 24px; font-size: 1.05rem; }
.lead-form {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(13, 11, 10, 0.85);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  max-width: 540px;
  margin: 0 auto 16px;
  padding: 6px 8px 6px 22px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.lead-form:focus-within {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(212, 101, 74, 0.22), 0 8px 32px rgba(0, 0, 0, 0.5);
}
.lead-input {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--txt);
  font-family: var(--font-body);
  font-size: 1rem;
  padding: 10px 12px 10px 0;
}
.lead-input::placeholder {
  color: var(--txt-faint);
}
.lead-btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 13px 26px; /* Generous 26px horizontal padding ensures text never bleeds into pill curve */
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  white-space: nowrap;
  letter-spacing: 0.01em;
  transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 16px rgba(212, 101, 74, 0.4);
}
.lead-btn:hover {
  background: #e07257;
  transform: translateY(-1px);
  box-shadow: 0 6px 22px rgba(212, 101, 74, 0.55);
}
.lead-btn:active {
  transform: translateY(0);
}
.lead-arrow {
  display: inline-block;
  transition: transform 0.2s ease;
}
.lead-btn:hover .lead-arrow {
  transform: translateX(3px);
}
.lead-success-msg {
  color: var(--green);
  font-weight: 600;
  font-size: 1.05rem;
  margin: 16px 0;
}
.lead-disclaimer {
  font-size: 0.88rem;
  color: var(--txt-faint);
  margin: 0;
}

@media (max-width: 580px) {
  .lead-form {
    flex-direction: column;
    border-radius: var(--r-md);
    padding: 12px;
    gap: 10px;
  }
  .lead-input {
    width: 100%;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: var(--r-sm);
  }
  .lead-btn {
    width: 100%;
    padding: 12px 20px;
  }
}

/* ── 4-tier pricing grid ───────────────────── */
.pricing-page {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: clamp(120px, 16vh, 180px) clamp(20px, 5vw, 48px) 80px;
}

/* Embedded pricing keeps the same visual system, without pretending to be a new page. */
.pricing-section.pricing-page {
  max-width: none;
  padding-top: clamp(72px, 11vh, 120px);
  padding-bottom: clamp(72px, 11vh, 120px);
  scroll-margin-top: 96px;
}

.pricing-hero {
  text-align: center;
  max-width: 820px;
  margin: 0 auto 36px;
}

.pricing-hero .eyebrow {
  margin-inline: auto;
  margin-bottom: 20px;
}

.pricing-hero h1,
.pricing-hero h2 {
  font-size: clamp(2.4rem, 5.2vw, 3.8rem);
  font-weight: 800;
  margin-bottom: 16px;
  line-height: 1.15;
}

.pricing-sub {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  color: var(--txt-dim);
  max-width: 58ch;
  margin: 0 auto;
}

.pricing-switcher-wrap {
  display: flex;
  justify-content: center;
  margin: 32px 0 40px;
}
.pricing-switcher {
  display: inline-flex;
  align-items: center;
  background: var(--ink-2);
  padding: 6px;
  border-radius: 99px;
  border: 1px solid var(--line);
  gap: 6px;
}
.switch-btn {
  padding: 8px 18px;
  border-radius: 99px;
  border: none;
  background: transparent;
  color: var(--txt-dim);
  font-family: var(--font-head);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .2s;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.switch-btn.active {
  background: var(--panel);
  color: var(--txt);
  box-shadow: 0 4px 12px rgba(0,0,0,.3);
}
.badge-save {
  font-size: .75rem;
  background: var(--green);
  color: #000;
  padding: 2px 8px;
  border-radius: 99px;
  font-weight: 700;
}

.pricing-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
  align-items: stretch;
}

/* Three cards go 3 -> 2 -> 1.

   This used to jump straight from 3 to 1 at 900px, on the reasoning that a
   two-column step leaves the third card alone on its own row and reads as a
   layout bug. The orphan is real; dropping to one column is the wrong cure. It
   made 901px render three 241px columns and 900px render one 762px column —
   cramped on one side of a single pixel, and acres of empty space on the other,
   which is what the owner reported.

   The orphan is fixed instead of avoided: in the two-column band the last tier
   spans the full width. Team Hives is the "coming soon" card with no price and
   no buy button, so a wide quiet band under the two purchasable tiers reads as
   deliberate hierarchy rather than a card that failed to wrap.

   3 -> 2 moves to 1000px because below that the three columns are already too
   narrow (272px at 1000px, 241px at 901px). */
@media (max-width: 1000px) {
  .pricing-tier-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pricing-tier-grid .pricing-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .pricing-tier-grid {
    grid-template-columns: 1fr;
  }
}
.pricing-card {
  position: relative;
  padding: 32px 26px;
  border-radius: var(--r-lg);
  background: var(--panel);
  border: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  transition: transform .2s, border-color .2s;
}
.pricing-card:hover { transform: translateY(-4px); border-color: rgba(212,101,74,.3); }
.pricing-card.featured {
  border: 2px solid var(--accent);
  box-shadow: 0 8px 32px rgba(212,101,74,.2);
  background: linear-gradient(180deg, rgba(31,26,23,1) 0%, rgba(23,19,17,1) 100%);
}
.card-ribbon {
  position: absolute;
  top: -12px;
  left: 24px;
  background: var(--accent);
  color: #FFF;
  font-size: .75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 3px 12px;
  border-radius: 99px;
}
.card-tier { font-family: var(--font-head); font-size: 1.4rem; font-weight: 700; margin-bottom: 6px; }
.card-desc { font-size: .9rem; color: var(--txt-dim); min-height: 44px; margin-bottom: 20px; line-height: 1.4; }
.card-price { display: flex; align-items: baseline; gap: 4px; }
.card-price .currency { font-size: 1.4rem; font-weight: 700; }
.card-price .amt { font-family: var(--font-head); font-size: 2.8rem; font-weight: 800; color: var(--txt); }
.card-price .period { font-size: .9rem; color: var(--txt-dim); }
.price-subtext { font-size: .85rem; color: var(--amber); margin-top: 4px; margin-bottom: 24px; }
.card-feats { list-style: none; padding: 0; margin: 0 0 32px; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; }
.card-feats li { font-size: .92rem; color: var(--txt); display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; }
.card-feats .chk { color: var(--green); font-weight: 700; }
.card-btn { width: 100%; text-align: center; justify-content: center; padding: 12px; border-radius: var(--r-sm); }

/* ── Team Hives: not on sale yet, so the card collects interest ──────────── */
.card-price .amt-soon { font-size: 1.5rem; letter-spacing: -0.01em; }
.tier-flag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid rgba(245, 158, 11, .35);
  background: rgba(245, 158, 11, .12);
  color: var(--amber);
  font-family: var(--font-body);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.team-interest { margin-top: auto; }
.team-interest-row { display: flex; gap: 8px; margin-bottom: 10px; }
.team-interest-email, .team-interest-seats {
  padding: 11px 12px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .25);
  color: var(--txt);
  font-family: var(--font-body);
  font-size: .88rem;
  min-width: 0;
}
.team-interest-email { flex: 1 1 auto; width: 100%; }
.team-interest-seats { flex: 0 0 78px; }
.team-interest-email:focus, .team-interest-seats:focus { outline: none; border-color: var(--accent); }
.team-interest-email::placeholder, .team-interest-seats::placeholder { color: var(--txt-faint); }
.team-interest-btn[disabled] { opacity: .6; cursor: progress; }
.team-interest-note { min-height: 18px; margin: 10px 0 0; font-size: .82rem; color: var(--txt-dim); }
.team-interest-note.ok { color: var(--green); }
.team-interest-note.error { color: var(--accent); }

/* ── guarantee banner ───────────────────────── */
.guarantee-section { max-width: var(--maxw); margin: 40px auto; padding: 0 24px; }
.guarantee-card {
  display: flex;
  gap: 20px;
  align-items: center;
  padding: 24px 30px;
  background: rgba(91,138,114,.08);
  border: 1px solid rgba(91,138,114,.25);
  border-radius: var(--r-lg);
}
.guarantee-icon { flex-shrink: 0; }
.guarantee-body h3 { font-size: 1.2rem; margin-bottom: 6px; color: var(--txt); }
.guarantee-body p { font-size: .95rem; color: var(--txt-dim); line-height: 1.5; margin: 0; }

/* ── FAQ grid ──────────────────────────────── */
/* Keeps the FAQ as its own anchored stop while preserving the pricing-to-story rhythm. */
.pricing-faq { max-width: var(--maxw); margin: 60px auto; padding: 0 24px; scroll-margin-top: 96px; }
.faq-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(400px, 1fr)); gap: 20px; margin-top: 36px; }
.faq-card { padding: 28px; border-radius: var(--r-md); background: var(--panel); border: 1px solid var(--line); }
.faq-card h3,
.faq-card h4 { font-size: 1.15rem; margin-bottom: 10px; color: var(--txt); }
.faq-card p { font-size: .95rem; color: var(--txt-dim); line-height: 1.5; }

/* ── legal pages ────────────────────────────── */
.legal-page { max-width: 860px; margin: 120px auto 60px; padding: 0 24px; }
.legal-hero { text-align: center; margin-bottom: 40px; }
.legal-hero h1 { font-size: clamp(2rem, 4vw, 3rem); margin: 12px 0; }
.legal-updated { font-size: .95rem; color: var(--txt-dim); }
.legal-content { display: flex; flex-direction: column; gap: 32px; }
.legal-card { padding: 40px 36px; border-radius: var(--r-lg); background: var(--panel); border: 1px solid var(--line); }
.legal-card h2 { font-size: 1.35rem; margin: 32px 0 12px; color: var(--txt); }
.legal-card h2:first-of-type { margin-top: 0; }
.legal-card p, .legal-card li { font-size: 1rem; color: var(--txt-dim); line-height: 1.6; margin-bottom: 14px; }
.legal-card ul { padding-left: 20px; margin-bottom: 20px; }
.legal-table-wrap { overflow-x: auto; margin: 24px 0; }

/* ── Personas Carousel ─────────────────────── */
.personas-section {
  max-width: var(--maxw);
  margin: 100px auto 40px;
  padding: 0 24px;
}
.persona-carousel-wrapper {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.persona-tabs {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding-bottom: 8px;
  scrollbar-width: none;
}
.persona-tabs::-webkit-scrollbar { display: none; }
.persona-tab {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: var(--r-md);
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--txt-dim);
  font-family: var(--font-head);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.25s var(--ease);
}
.persona-tab:hover {
  color: var(--txt);
  border-color: rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.06);
}
.persona-tab.active {
  color: #FFFFFF;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 4px 20px rgba(212, 101, 74, 0.4);
}
.persona-tab .tab-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.ic-tab {
  width: 18px;
  height: 18px;
  stroke: currentColor;
}

.persona-stage {
  border-radius: var(--r-lg);
  background: var(--panel);
  border: 1px solid var(--line);
  padding: 36px 40px;
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 36px;
  align-items: center;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
  position: relative;
  overflow: hidden;
}
.persona-info { display: flex; flex-direction: column; gap: 16px; }
.persona-role-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  border-radius: 20px;
  background: rgba(212, 101, 74, 0.15);
  color: var(--accent);
  font-size: 0.85rem;
  font-weight: 700;
  width: fit-content;
  border: 1px solid rgba(212, 101, 74, 0.3);
}
.persona-headline { font-size: 1.6rem; color: var(--txt); line-height: 1.25; }
.persona-quote {
  font-size: 1.05rem;
  color: var(--txt-dim);
  line-height: 1.6;
  border-left: 3px solid var(--accent);
  padding-left: 16px;
  margin: 8px 0;
  font-style: italic;
}
.persona-author { font-size: 0.9rem; color: var(--txt-faint); font-weight: 500; }
.persona-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.persona-pill-tag {
  font-size: 0.82rem;
  padding: 6px 12px;
  border-radius: var(--r-sm);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--line);
  color: var(--txt);
  font-weight: 500;
}

.persona-preview-box {
  background: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  box-shadow: inset 0 2px 8px rgba(0,0,0,0.5);
}
.persona-preview-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}
.persona-preview-title { font-family: var(--font-head); font-weight: 700; font-size: 0.95rem; color: var(--txt); }
.persona-preview-status { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--green); }
.persona-preview-body { font-family: var(--font-body); font-size: 0.88rem; color: var(--txt-dim); line-height: 1.5; }
.persona-preview-body h5 { color: var(--txt); margin: 8px 0 4px; font-size: 0.92rem; }
.persona-preview-body ul { padding-left: 18px; margin-bottom: 8px; }
.persona-preview-body li { margin-bottom: 4px; }

/* ── Smart OS Download Modal ───────────────── */
.download-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(16px);
  display: none;
  place-items: center;
  padding: 20px;
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.download-modal-overlay.open {
  display: grid;
  opacity: 1;
}
.download-modal-card {
  width: 100%;
  max-width: 540px;
  max-height: min(720px, calc(100dvh - 40px));
  background: var(--panel);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: var(--r-lg);
  padding: 28px;
  position: relative;
  overflow: auto;
  box-shadow: 0 24px 64px rgba(0,0,0,0.58), inset 0 1px 0 rgba(255,255,255,0.06);
  animation: modalPop 0.24s var(--ease);
}
@keyframes modalPop {
  from { transform: scale(0.94) translateY(12px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
.modal-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: none;
  border: none;
  color: var(--txt-dim);
  font-size: 1.8rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px;
}
.modal-close-btn:hover { color: #FFFFFF; }
.download-modal-header { margin: 2px 0 24px; }
.download-modal-header .brand { gap: 8px; margin-bottom: 22px; }
.download-modal-header .brand-word { font-size: 1rem; }
.download-modal-header h3 { font-size: 1.7rem; color: var(--txt); margin: 0 0 5px; }
.modal-sub { font-size: 0.92rem; color: var(--txt-dim); }

.detected-os-card {
  background: rgba(212, 101, 74, 0.08);
  border: 1px solid rgba(212, 101, 74, 0.32);
  border-radius: var(--r-md);
  padding: 22px;
  margin-bottom: 12px;
}
.detected-badge {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
  font-weight: 700;
  display: block;
  margin-bottom: 4px;
}
.detected-os-info h4 { font-size: 1.25rem; color: var(--txt); margin-bottom: 4px; }
.detected-os-info p { font-size: 0.88rem; color: var(--txt-dim); max-width: 44ch; }
.detected-os-card .btn { width: 100%; margin-top: 20px; min-height: 52px; }

.other-downloads {
  border-bottom: 1px solid var(--line);
  margin-bottom: 16px;
}
.other-downloads summary {
  color: var(--txt-dim);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  list-style: none;
  padding: 16px 2px;
}
.other-downloads summary::-webkit-details-marker { display: none; }
.other-downloads summary::after { content: '+'; float: right; color: var(--accent); font-size: 1.2rem; font-weight: 400; line-height: .8; }
.other-downloads[open] summary { color: var(--txt); }
.other-downloads[open] summary::after { content: '−'; }

.all-platforms-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  padding-bottom: 14px;
}
.plat-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 2px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.plat-item:first-child { border-top: 0; }
.plat-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--accent);
}
.ic-plat {
  width: 22px;
  height: 22px;
}
.plat-meta { display: flex; flex-direction: column; flex-grow: 1; }
.plat-meta strong { font-size: 0.9rem; color: var(--txt); }
.plat-meta span { font-size: 0.78rem; color: var(--txt-dim); }
.plat-btn { flex-shrink: 0; font-size: 0.8rem; padding: 6px 10px; cursor: pointer; box-shadow: none; }

.modal-integrity-footer {
  padding: 2px 0 0;
  font-size: 0.78rem;
  color: var(--txt-dim);
}

/* ── Multi-Platform Ecosystem Roadmap ────────── */
.roadmap-section {
  max-width: var(--maxw);
  margin: 100px auto 40px;
  padding: 0 24px;
}
.roadmap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
}
.roadmap-card {
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  position: relative;
  border-radius: var(--r-lg);
  transition: transform 0.25s var(--ease), border-color 0.25s var(--ease);
}
.roadmap-card:hover {
  transform: translateY(-4px);
  border-color: rgba(255, 255, 255, 0.2);
}
.roadmap-card.current {
  border-color: rgba(212, 101, 74, 0.4);
  background: linear-gradient(180deg, rgba(212, 101, 74, 0.08) 0%, rgba(28, 23, 20, 0.7) 100%);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.35);
}
.roadmap-badge {
  align-self: flex-start;
  padding: 4px 10px;
  border-radius: 100px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 20px;
}
.roadmap-badge.available {
  background: rgba(91, 138, 114, 0.2);
  color: #6EE7B7;
  border: 1px solid rgba(91, 138, 114, 0.4);
}
.roadmap-badge.upcoming {
  background: rgba(255, 255, 255, 0.06);
  color: var(--txt-dim);
  border: 1px solid var(--line);
}
.roadmap-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent);
  margin-bottom: 16px;
}
.roadmap-icon svg {
  width: 22px;
  height: 22px;
}
.roadmap-card h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--txt);
  margin-bottom: 4px;
}
.roadmap-platform {
  font-size: 0.82rem;
  color: var(--accent);
  font-weight: 600;
  margin-bottom: 20px;
}
.roadmap-features {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.roadmap-features li {
  font-size: 0.85rem;
  color: var(--txt-dim);
  line-height: 1.45;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.roadmap-features .chk {
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
}
.roadmap-card .card-btn {
  width: 100%;
  text-align: center;
  justify-content: center;
}

@media (max-width: 860px) {
  .persona-stage { grid-template-columns: 1fr; }
  .all-platforms-grid { grid-template-columns: 1fr; }
  .detected-os-card { flex-direction: column; align-items: flex-start; }
  .roadmap-grid { grid-template-columns: 1fr; }
}

/* ── responsive ──────────────────────────────── */
@media (max-width: 940px) {
  .hero { grid-template-columns: 1fr; }
  .hero-vis { order: -1; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-2 { grid-template-columns: 1fr; }
  .hero-actions { flex-direction: column; }
  .hero-actions .btn { width: 100%; justify-content: center; }
  .nav-links { display: none; }
  .nav-hamburger { display: block; }
  .price-grid { grid-template-columns: 1fr; }
}

/* ── Private Beta Banner & Early Access Modal ── */
.beta-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(212, 101, 74, 0.12);
  border: 1px solid rgba(212, 101, 74, 0.35);
  color: var(--accent);
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 20px;
}

.beta-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent);
  animation: pulse-dot 2s infinite ease-in-out;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.85); }
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(7, 10, 20, 0.82);
  backdrop-filter: blur(16px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.modal-overlay.active {
  opacity: 1;
  pointer-events: auto;
}

.early-access-modal {
  background: #1C1714;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 20px;
  max-width: 520px;
  width: 100%;
  padding: 36px;
  position: relative;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.8), 0 0 0 1px rgba(212, 101, 74, 0.2);
  transform: translateY(20px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.modal-overlay.active .early-access-modal {
  transform: translateY(0) scale(1);
}

.modal-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  background: transparent;
  border: none;
  color: var(--txt-dim);
  font-size: 24px;
  cursor: pointer;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  transition: all 0.2s;
}

.modal-close-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: var(--txt);
}

.modal-header {
  text-align: center;
  margin-bottom: 24px;
}

.modal-header h3 {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--txt);
  margin-top: 12px;
  margin-bottom: 8px;
}

.modal-header p {
  color: var(--txt-dim);
  font-size: 0.95rem;
  line-height: 1.5;
}

.waitlist-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

.waitlist-input {
  width: 100%;
  background: #2A2320;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 14px 16px;
  color: var(--txt);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.2s;
}

.waitlist-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(212, 101, 74, 0.25);
}

.token-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0;
  color: var(--txt-faint);
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.token-divider::before,
.token-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}

.token-form {
  display: flex;
  gap: 10px;
}

.token-form input {
  flex: 1;
  background: #2A2320;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px 14px;
  color: var(--txt);
  font-size: 0.88rem;
  font-family: var(--font-mono);
  outline: none;
}

.token-form input:focus {
  border-color: var(--accent);
}

.waitlist-success {
  background: rgba(91, 138, 114, 0.15);
  border: 1px solid rgba(91, 138, 114, 0.35);
  color: #72B895;
  padding: 14px 18px;
  border-radius: 10px;
  font-size: 0.92rem;
  text-align: center;
  display: none;
  margin-bottom: 16px;
}

/* ── Download Toast Notification ────────────── */
.download-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #2A2320;
  border: 1px solid rgba(212, 101, 74, 0.4);
  box-shadow: 0 20px 50px -10px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05);
  padding: 16px 20px;
  border-radius: 14px;
  z-index: 2000;
  display: flex;
  align-items: center;
  gap: 14px;
  transform: translateY(100px);
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.download-toast.show {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.download-toast-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: rgba(212, 101, 74, 0.15);
  color: var(--accent);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}

.download-toast-body h4 {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--txt);
  margin-bottom: 2px;
}

.download-toast-body p {
  font-size: 0.8rem;
  color: var(--txt-dim);
}
@media (max-width: 940px) {
  .hero { grid-template-columns: 1fr; }
  .hero-app { order: -1; max-width: 540px; }
  .app-window { transform: none; }
  .hero-app:hover .app-window { transform: none; }
  .feature-grid { grid-template-columns: repeat(2,1fr); }
  .steps { grid-template-columns: repeat(2,1fr); }
  .split { grid-template-columns: 1fr; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .mission-grid { grid-template-columns: 1fr; }
  .principle-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; }
  .faq-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .feature-grid, .steps { grid-template-columns: 1fr; }
  .hero-sub { max-width: none; }
  .app-body { grid-template-columns: 1fr; }
  .app-side, .app-rail { display: none; }
  .stats { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
  .principle { flex-direction: column; gap: 14px; }
  .guarantee-card { flex-direction: column; align-items: flex-start; }
}

/* ── reduced motion ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .blob { animation: none; }
}

/* ── mobile: touch targets ───────────────────────
   The marketing site is the only surface phone users can reach — the desktop app
   runs on laptops and desktops only — so it has to be usable with a thumb.
   Measured at 375/390/412px: the hamburger was 20px tall, the drawer close 28px,
   the brand link 29px and the header CTA 32px, all under the 44px minimum a
   finger needs. Sizes are raised rather than the whole layout rebuilt, because
   the layout already reflows correctly at these widths. */
@media (max-width: 940px) {
  .nav-hamburger {
    width: 44px;
    height: 44px;
    padding: 12px 8px;
    box-sizing: border-box;
    justify-content: space-around;
  }
  .drawer-close {
    min-width: 44px;
    min-height: 44px;
    display: grid;
    place-items: center;
    line-height: 1;
  }
  .nav .brand { min-height: 44px; display: flex; align-items: center; }
  .nav-actions .btn-sm { min-height: 44px; padding-inline: 18px; }
  .drawer-links a { min-height: 44px; display: flex; align-items: center; }
  .footer a { display: inline-flex; align-items: center; min-height: 44px; }
  /* Pricing card CTAs and the billing switcher landed at 42px and 34px. */
  .card-btn, .pricing-card .btn { min-height: 44px; }
  .switch-btn { min-height: 44px; }
  /* Download / early-access modal: the close affordance and the invite-code
     submit. Both sit inside a modal a phone user has to dismiss by touch. */
  .modal-close-btn { min-width: 44px; min-height: 44px; display: grid; place-items: center; }
  .modal-body .btn-sm, .token-form .btn-sm { min-height: 44px; }
}

/* `.side-new` and the other controls inside `.app-window` are a static picture of
   the desktop app, not controls. They are deliberately left small; raising them
   would distort the mockup to satisfy a rule that does not apply to it. */
/* Pre-release status and creator links. */
.hero > * { min-width: 0; }
.hero .app-window { max-width: 100%; overflow: hidden; }
.launch-notice { margin: 100px auto 0; max-width: 1120px; padding: 18px 24px; border: 1px solid #584236; border-radius: 12px; line-height: 1.8; text-align: center; }
.launch-notice a, .launch-author a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.launch-author { padding: 24px; text-align: center; line-height: 1.8; }
@media (max-width: 600px) { .launch-notice { margin: 90px 16px 0; padding: 16px; } }