/* ============================================================
   VANISH MODE — SHARED DESIGN SYSTEM
   Single source of truth for tokens, reset, typography, buttons,
   fields, tags, nav and footer — used by every public page so the
   site reads as one product instead of a pile of one-off styles.
   Page-specific components stay in each page's own <style> block.
   ============================================================ */

:root{
  --paper:      #f6f3ec;
  --paper-2:    #efe9db;
  --paper-3:    #e6dfcd;
  --surface:    #fffdf8;
  --ink:        #15181b;
  --ink-2:      #4a4f55;
  --ink-3:      #5c6065;
  --line:       rgba(21,24,27,0.13);
  --line-2:     rgba(21,24,27,0.24);
  --graphite:   #15181b;
  --graphite-2: #1f2327;
  --on-graphite:      #f6f3ec;
  --on-graphite-dim:  rgba(246,243,236,0.62);
  --on-graphite-line: rgba(246,243,236,0.16);
  --signal:     #a13c22;
  --signal-ink: #7c2e19;
  --signal-tint:#f2e3dd;
  --ok:         #2f6b4f;
  --ok-tint:    #e2ece6;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --mono: 'DM Mono', ui-monospace, SFMono-Regular, monospace;
  --radius: 3px;
  --radius-lg: 6px;
  --wrap: 1120px;
}
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
[hidden]{ display:none !important; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
body{
  font-family:var(--sans);
  background:var(--paper);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  overflow-x:hidden;
}
::selection{ background:var(--signal-tint); color:var(--signal-ink); }
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font:inherit; }

.skip-link{
  position:absolute; left:12px; top:-48px; z-index:1000;
  background:var(--ink); color:var(--paper); padding:10px 16px;
  border-radius:var(--radius); font-size:13px; font-weight:600;
  text-decoration:none; transition:top .15s;
}
.skip-link:focus{ top:12px; }

:focus-visible{ outline:2px solid var(--signal); outline-offset:2px; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 24px; }
section{ position:relative; }

/* ── Typographic primitives ── */
.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--mono); font-size:11.5px; font-weight:500;
  letter-spacing:.14em; text-transform:uppercase;
  color:var(--signal-ink);
}
.eyebrow::before{ content:''; width:14px; height:1px; background:currentColor; }
section.on-dark .eyebrow{ color:#e0a892; }

.h2{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(1.7rem, 3.4vw, 2.6rem);
  letter-spacing:-0.025em; line-height:1.15;
  max-width:720px;
}
.lede{
  font-size:clamp(1rem, 1.6vw, 1.15rem);
  color:var(--ink-2); line-height:1.7; max-width:560px;
}
section.on-dark .lede{ color:var(--on-graphite-dim); }
.center{ text-align:center; margin-left:auto; margin-right:auto; }

.section-head{ margin-bottom:44px; }
.section-pad{ padding:88px 0; }
.rule-top{ border-top:1px solid var(--line); }
section.on-dark{ background:var(--graphite); color:var(--on-graphite); }
section.on-dark .rule-top{ border-top:1px solid var(--on-graphite-line); }
section.section-paper-2{ background:var(--paper-2); }

/* ── Buttons & fields ── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--sans); font-weight:700; font-size:15px;
  padding:14px 26px; border-radius:var(--radius);
  border:1px solid transparent; cursor:pointer; text-decoration:none;
  transition:background .15s,border-color .15s,color .15s,transform .1s;
  min-height:48px; line-height:1.2;
}
.btn--primary{ background:var(--ink); color:var(--paper); }
.btn--primary:hover{ background:#000; }
section.on-dark .btn--primary{ background:var(--paper); color:var(--ink); }
section.on-dark .btn--primary:hover{ background:#fff; }
.btn--signal{ background:var(--signal); color:#fff; }
.btn--signal:hover{ background:var(--signal-ink); }
.btn--ghost{ background:transparent; color:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ border-color:var(--ink); }
section.on-dark .btn--ghost{ color:var(--on-graphite); border-color:var(--on-graphite-line); }
section.on-dark .btn--ghost:hover{ border-color:var(--on-graphite); }
.btn--block{ width:100%; }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.5; cursor:not-allowed; transform:none; }

.field{
  width:100%; background:var(--surface); border:1.5px solid var(--line-2);
  border-radius:var(--radius); padding:13px 14px; font-family:var(--sans);
  font-size:15.5px; color:var(--ink); outline:none; min-height:48px;
  transition:border-color .15s;
}
.field::placeholder{ color:var(--ink-3); }
.field:focus{ border-color:var(--ink); }
section.on-dark .field{ background:rgba(246,243,236,0.06); border-color:var(--on-graphite-line); color:var(--on-graphite); }
section.on-dark .field::placeholder{ color:rgba(246,243,236,0.4); }
section.on-dark .field:focus{ border-color:var(--on-graphite); }

.tag{
  display:inline-flex; align-items:center; gap:5px;
  font-family:var(--mono); font-size:11px; font-weight:500;
  letter-spacing:.05em; text-transform:uppercase;
  padding:3px 8px; border-radius:2px; white-space:nowrap;
}
.tag--exposed{ background:var(--signal-tint); color:var(--signal-ink); }
.tag--ok{ background:var(--ok-tint); color:var(--ok); }
.tag--pending{ background:var(--paper-3); color:var(--ink-2); }
section.on-dark .tag--pending{ background:rgba(246,243,236,0.08); color:var(--on-graphite-dim); }

/* ============================================================
   NAV
   ============================================================ */
nav{
  position:sticky; top:0; z-index:100;
  display:flex; align-items:center; gap:8px;
  height:60px; padding:0 24px;
  background:var(--graphite); color:var(--on-graphite);
  border-bottom:1px solid var(--on-graphite-line);
}
.nav-brand{ display:flex; align-items:center; gap:9px; text-decoration:none; }
.nav-mark{
  width:20px; height:20px; border:1.5px solid var(--on-graphite);
  display:flex; align-items:center; justify-content:center;
  font-family:var(--mono); font-size:11px; font-weight:500; color:var(--on-graphite);
}
.nav-name{ font-weight:700; font-size:14.5px; letter-spacing:.02em; color:var(--on-graphite); }
.nav-links{ display:flex; align-items:center; gap:26px; margin-left:36px; }
.nav-links a{
  font-size:13.5px; font-weight:500; color:var(--on-graphite-dim);
  text-decoration:none; transition:color .15s;
}
.nav-links a:hover{ color:var(--on-graphite); }
.nav-right{ display:flex; align-items:center; gap:14px; margin-left:auto; }
.nav-signin{ font-size:13.5px; font-weight:600; color:var(--on-graphite-dim); text-decoration:none; }
.nav-signin:hover{ color:var(--on-graphite); }
.nav-cta{
  background:var(--paper); color:var(--ink); font-weight:700; font-size:13.5px;
  padding:9px 16px; border-radius:var(--radius); text-decoration:none;
  white-space:nowrap;
}
.nav-cta:hover{ background:#fff; }
@media (max-width:860px){ .nav-links{ display:none; } }
@media (max-width:480px){ .nav-cta{ display:none; } }

/* ============================================================
   FOOTER
   ============================================================ */
footer{
  background:var(--graphite); color:var(--on-graphite-dim);
  padding:40px 24px; display:flex; align-items:center; justify-content:space-between;
  flex-wrap:wrap; gap:16px;
}
.footer-brand{ display:flex; align-items:center; gap:9px; text-decoration:none; }
.footer-links{ display:flex; gap:22px; flex-wrap:wrap; }
.footer-links a{ font-size:13px; color:var(--on-graphite-dim); text-decoration:none; }
.footer-links a:hover{ color:var(--on-graphite); }
.footer-copy{ font-size:12px; color:rgba(246,243,236,0.55); }

/* ── scroll reveal (respects reduced motion) ── */
.reveal{ opacity:0; transform:translateY(16px); transition:opacity .5s ease, transform .5s ease; }
.reveal.visible{ opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce){ .reveal{ opacity:1; transform:none; transition:none; } }

/* ============================================================
   FAQ ACCORDION (native <details> — homepage, referral page)
   ============================================================ */
.faq{ max-width:720px; margin:0 auto; border-top:1px solid var(--line); }
.faq details{ border-bottom:1px solid var(--line); padding:18px 0; }
.faq summary{
  cursor:pointer; font-weight:700; font-size:15.5px; list-style:none;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:'+'; font-family:var(--mono); font-size:18px; color:var(--ink-3); flex-shrink:0; }
.faq details[open] summary::after{ content:'\2013'; }
.faq p{ font-size:14.5px; color:var(--ink-2); line-height:1.75; margin-top:12px; max-width:640px; }

/* ============================================================
   STATS STRIP (3-up metric row — homepage, referral page)
   ============================================================ */
.stats-strip{
  display:grid; grid-template-columns:repeat(3,1fr);
  border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;
}
.stats-strip div{ padding:30px 20px; text-align:center; border-left:1px solid var(--line); }
.stats-strip div:first-child{ border-left:none; }
.stats-n{ font-family:var(--sans); font-weight:800; font-size:clamp(1.7rem,3vw,2.3rem); letter-spacing:-0.02em; }
.stats-l{ font-family:var(--mono); font-size:11.5px; color:var(--ink-3); margin-top:6px; letter-spacing:.02em; }
@media (max-width:640px){ .stats-strip{ grid-template-columns:1fr; } .stats-strip div{ border-left:none; border-top:1px solid var(--line); } .stats-strip div:first-child{ border-top:none; } }

/* ============================================================
   FINAL CTA (repeated end-of-page action block)
   ============================================================ */
.final-cta{ padding:88px 0 100px; }
.final-cta__inner{ max-width:640px; margin:0 auto; }
.final-cta h2{ text-align:center; margin-bottom:34px; }

/* ============================================================
   LONG-FORM DOCUMENT PAGES (privacy / terms / legal center)
   A "card" here is a hairline-divided content block, not a
   rounded-shadow SaaS card — consistent with the homepage's
   restrained visual language.
   ============================================================ */
.doc-hero{ padding:56px 0 40px; }
.doc-hero .eyebrow{ margin-bottom:16px; }
.doc-hero h1{
  font-family:var(--sans); font-weight:800;
  font-size:clamp(1.8rem, 3.6vw, 2.75rem);
  letter-spacing:-0.03em; line-height:1.1; margin-bottom:10px;
}
.doc-hero .meta{ font-family:var(--mono); font-size:12.5px; color:var(--ink-3); }
.doc-hero .meta a{ color:var(--signal-ink); text-decoration:underline; }

.doc-tabs{ display:flex; flex-wrap:wrap; gap:8px; padding:24px 0; border-top:1px solid var(--line); }
.doc-tab{
  background:var(--surface); border:1px solid var(--line-2); border-radius:var(--radius);
  padding:9px 16px; font-family:var(--sans); font-size:13.5px; font-weight:700;
  color:var(--ink-2); cursor:pointer; transition:background .15s,color .15s;
}
.doc-tab:hover{ color:var(--ink); }
.doc-tab[aria-pressed="true"]{ background:var(--ink); color:var(--paper); border-color:var(--ink); }

.doc-section{ display:none; }
.doc-section.visible{ display:block; }

.doc-card{ padding:26px 0; border-top:1px solid var(--line); }
.doc-card:first-child{ border-top:none; padding-top:8px; }
.doc-card.highlight{ border-left:2px solid var(--signal); padding-left:20px; }
.doc-card h2{
  font-family:var(--sans); font-weight:800; font-size:17px; letter-spacing:-0.01em;
  margin-bottom:14px;
}
.doc-card h3{ font-family:var(--sans); font-weight:700; font-size:14.5px; margin:16px 0 8px; }
.doc-card p{ font-size:14.5px; color:var(--ink-2); line-height:1.75; margin-bottom:12px; }
.doc-card ul, .doc-card ol{ padding-left:20px; margin-bottom:12px; }
.doc-card li{ font-size:14.5px; color:var(--ink-2); line-height:1.7; margin-bottom:6px; }
.doc-card a{ color:var(--signal-ink); text-decoration:underline; }
.doc-card strong{ color:var(--ink); }
.doc-card em{ color:var(--signal-ink); font-style:normal; font-weight:600; }

.doc-callout{
  background:var(--paper-2); border-left:2px solid var(--signal);
  padding:14px 18px; margin:14px 0; font-size:13.5px; color:var(--ink-2); line-height:1.7;
}

.doc-table{ width:100%; border-collapse:collapse; margin-bottom:14px; font-size:13.5px; }
.doc-table th, .doc-table td{ padding:10px 14px; text-align:left; border-top:1px solid var(--line); vertical-align:top; }
.doc-table thead th{ border-top:none; font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-3); font-weight:500; }
.doc-table td.yes{ color:var(--ok); font-weight:700; }
.doc-table td.no{ color:var(--signal-ink); font-weight:700; }

.doc-sec-list{ display:flex; flex-direction:column; }
.doc-sec-item{ display:flex; gap:14px; padding:16px 0; border-top:1px solid var(--line); }
.doc-sec-item:first-child{ border-top:none; }
.doc-sec-num{ font-family:var(--mono); font-size:11px; color:var(--signal-ink); flex-shrink:0; padding-top:2px; }
.doc-sec-title{ font-size:14px; font-weight:700; margin-bottom:4px; }
.doc-sec-desc{ font-size:13.5px; color:var(--ink-2); line-height:1.65; }

@media (max-width:640px){
  .doc-table thead{ display:none; }
  .doc-table, .doc-table tbody, .doc-table tr, .doc-table td{ display:block; width:100%; }
  .doc-table tr{ border-top:1px solid var(--line); padding:10px 0; }
  .doc-table td{ border-top:none; padding:3px 0; }
  .doc-table td::before{ content:attr(data-label); font-family:var(--mono); font-size:10px; text-transform:uppercase; color:var(--ink-3); display:block; }
}