/* Vague-Presence — design system
   Type: Tailwind default scale only. Spacing: token table only.
   Backgrounds: flat, from the approved dark set. */

:root {
  /* Backgrounds (approved set only) */
  --bg-deep: #000000;
  --bg: #181818;
  --surface: #1F1F1F;
  --surface-2: #272727;
  --line: #272727;
  --bg-warm: #131209;

  /* Text */
  --line-strong: #313131;
  --line-subtle: #1E1E1E;

  /* Text (Core 2.0 shades, lifted for contrast on dark) */
  --text: #F1F1F1;
  --text-muted: #9B9B9B;
  --text-dim: #7B7B7B;

  /* Accent (Core 2.0 primaries) */
  --accent: #2A85FF;
  --accent-ink: #FFFFFF;
  --live: #21C97A;
  --beta: #FF9D34;
  --danger: #FF381C;
  --violet: #7F5FFF;

  /* Depth (Core 2.0 dark widget shadow) */
  --shadow-widget:
    0 5px 1.5px -4px rgba(8, 8, 8, 0.5),
    0 6px 4px -4px rgba(8, 8, 8, 0.05);
  --shadow-depth:
    0 2.15px 0.5px -2px rgba(0, 0, 0, 0.25),
    0 6px 4px -4px rgba(8, 8, 8, 0.16),
    0 6px 13px 0 rgba(8, 8, 8, 0.12),
    0 24px 24px -16px rgba(8, 8, 8, 0.08),
    2px 4px 16px 0 rgba(253, 253, 253, 0.05) inset;
  --shadow-press: 0 2px 4px 1px rgba(18, 18, 18, 0.35) inset;

  /* Spacing tokens */
  --sp-0: 0;
  --sp-25: 2px;
  --sp-50: 4px;
  --sp-75: 8px;
  --sp-100: 12px;
  --sp-200: 16px;
  --sp-300: 24px;
  --sp-400: 32px;
  --sp-500: 40px;
  --sp-600: 48px;
  --sp-700: 64px;
  --sp-800: 80px;
  --sp-900: 96px;

  /* Radius (Tailwind) */
  --r-sm: 2px;
  --r: 4px;
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-2xl: 16px;
  --r-3xl: 24px;
  --r-full: 9999px;

  /* Motion */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur: 700ms;
  --dur-long: 800ms;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Geist", ui-sans-serif, system-ui, sans-serif;
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-wrap: pretty;
}

h1, h2, h3, h4 { margin: 0; font-weight: 600; text-wrap: balance; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r);
}

/* ---------- Type scale ---------- */
.t-xs   { font-size: 12px; line-height: 16px; }
.t-sm   { font-size: 14px; line-height: 20px; }
.t-base { font-size: 16px; line-height: 24px; }
.t-lg   { font-size: 18px; line-height: 28px; }
.t-xl   { font-size: 20px; line-height: 28px; }
.t-2xl  { font-size: 24px; line-height: 32px; }
.t-3xl  { font-size: 30px; line-height: 36px; }
.t-4xl  { font-size: 36px; line-height: 40px; }
.t-5xl  { font-size: 48px; line-height: 1; }
.t-6xl  { font-size: 60px; line-height: 1; }

.mono { font-family: "Geist Mono", ui-monospace, SFMono-Regular, monospace; }
.muted { color: var(--text-muted); }
.dim { color: var(--text-dim); }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding-left: var(--sp-300);
  padding-right: var(--sp-300);
}

section { padding-top: var(--sp-700); padding-bottom: var(--sp-700); }
@media (min-width: 768px) {
  section { padding-top: var(--sp-900); padding-bottom: var(--sp-900); }
}

.measure { max-width: 680px; }

.rule { height: 1px; background: var(--line); border: 0; margin: 0; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-75);
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-200);
}

.section-head { margin-bottom: var(--sp-600); }
.section-head h2 { font-size: 30px; line-height: 36px; }
@media (min-width: 768px) { .section-head h2 { font-size: 36px; line-height: 40px; } }
.section-head p { margin-top: var(--sp-200); color: var(--text-muted); max-width: 680px; font-size: 18px; line-height: 28px; }

/* ---------- Skip link ---------- */
.skip {
  position: absolute;
  left: var(--sp-300);
  top: var(--sp-300);
  transform: translateY(-200%);
  background: var(--text);
  color: var(--bg-deep);
  padding: var(--sp-75) var(--sp-100);
  border-radius: var(--r-lg);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  z-index: 100;
  transition: transform var(--dur) var(--ease);
}
.skip:focus { transform: translateY(0); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-75);
  padding: var(--sp-75) var(--sp-100);
  border-radius: var(--r-lg);
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform 200ms var(--ease);
}
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--text); color: var(--bg-deep); }
.btn-primary:hover { background: #D8D8D8; }

.btn-ghost { background: transparent; color: var(--text); border-color: var(--line); }
.btn-ghost:hover { background: var(--surface-2); }

.btn-sm { font-size: 14px; line-height: 20px; padding: var(--sp-75) var(--sp-100); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.44;
  cursor: not-allowed;
  pointer-events: none;
}

.link-quiet {
  color: var(--text-muted);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  border-bottom: 1px solid var(--line);
  padding-bottom: var(--sp-25);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.link-quiet:hover { color: var(--text); border-color: var(--text-muted); }

/* ---------- Island nav ---------- */
.nav-shell {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 60;
  display: flex;
  justify-content: center;
  pointer-events: none;
}

.island {
  pointer-events: auto;
  margin-top: var(--sp-300);
  width: max-content;
  max-width: calc(100vw - 32px);
  display: flex;
  align-items: center;
  gap: var(--sp-200);
  padding: var(--sp-75) var(--sp-100);
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: rgba(31, 31, 31, 0.72);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-75);
  font-size: 14px;
  line-height: 20px;
  font-weight: 600;
  padding-left: var(--sp-50);
}
.brand .mark { width: 20px; height: 20px; }

.nav-links { display: none; align-items: center; gap: var(--sp-50); }
@media (min-width: 900px) { .nav-links { display: flex; } }

.nav-links a {
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  color: var(--text-muted);
  padding: var(--sp-50) var(--sp-100);
  border-radius: var(--r-full);
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav-links a:hover { color: var(--text); background: var(--surface-2); }
.nav-links a[aria-current="true"] { color: var(--text); background: var(--surface-2); }

.nav-actions { display: flex; align-items: center; gap: var(--sp-75); }

/* Hamburger */
.burger {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: transparent;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}
@media (min-width: 900px) { .burger { display: none; } }
.burger:hover { background: var(--surface-2); }
.burger span {
  position: absolute;
  left: 50%;
  width: 14px;
  height: 1.5px;
  background: var(--text);
  border-radius: var(--r-full);
  transition: transform var(--dur) var(--ease), top var(--dur) var(--ease);
}
.burger span:nth-child(1) { top: 13px; transform: translateX(-50%); }
.burger span:nth-child(2) { top: 18px; transform: translateX(-50%); }
body.menu-open .burger span:nth-child(1) { top: 15.5px; transform: translateX(-50%) rotate(45deg); }
body.menu-open .burger span:nth-child(2) { top: 15.5px; transform: translateX(-50%) rotate(-45deg); }

/* Overlay */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(64px);
  -webkit-backdrop-filter: blur(64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-600) var(--sp-300);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
body.menu-open .overlay { opacity: 1; visibility: visible; }

.overlay-links li {
  overflow: hidden;
}
.overlay-links a {
  display: block;
  font-size: 36px;
  line-height: 40px;
  font-weight: 600;
  padding: var(--sp-100) 0;
  transform: translateY(48px);
  opacity: 0;
  transition: transform var(--dur-long) var(--ease), opacity var(--dur-long) var(--ease), color var(--dur) var(--ease);
}
.overlay-links a:hover { color: var(--accent); }
body.menu-open .overlay-links a { transform: translateY(0); opacity: 1; }
body.menu-open .overlay-links li:nth-child(1) a { transition-delay: 100ms; }
body.menu-open .overlay-links li:nth-child(2) a { transition-delay: 150ms; }
body.menu-open .overlay-links li:nth-child(3) a { transition-delay: 200ms; }
body.menu-open .overlay-links li:nth-child(4) a { transition-delay: 250ms; }
body.menu-open .overlay-links li:nth-child(5) a { transition-delay: 300ms; }

/* ---------- Hero ---------- */
.hero { padding-top: 128px; padding-bottom: var(--sp-700); }
@media (min-width: 768px) { .hero { padding-top: 176px; padding-bottom: var(--sp-900); } }

.hero h1 {
  max-width: 680px;
  font-size: 36px;
  line-height: 40px;
  background-image: linear-gradient(90deg, #FFFFFF 0%, #9B9B9B 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-bottom: var(--sp-50);
}
@media (min-width: 640px) { .hero h1 { font-size: 48px; line-height: 1; } }
@media (min-width: 1024px) { .hero h1 { font-size: 60px; line-height: 1; } }

.hero-sub {
  max-width: 680px;
  margin-top: var(--sp-300);
  color: var(--text-muted);
  font-size: 18px;
  line-height: 28px;
}

.hero-cta {
  margin-top: var(--sp-500);
  display: flex;
  align-items: center;
  gap: var(--sp-300);
  flex-wrap: wrap;
}

.proof-line {
  margin-top: var(--sp-300);
  display: flex;
  align-items: center;
  gap: var(--sp-100);
  flex-wrap: wrap;
  color: var(--text-dim);
  font-size: 14px;
  line-height: 20px;
}
.proof-line .dot { width: 3px; height: 3px; border-radius: var(--r-full); background: var(--text-dim); }

/* ---------- Hero visual ---------- */
.window {
  margin-top: var(--sp-700);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: var(--surface);
  padding: var(--sp-75);
  overflow: hidden;
}
.window-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-75);
  padding: var(--sp-75) var(--sp-100);
}
.window-bar .pip { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--line); }
.window-url {
  margin-left: var(--sp-75);
  font-size: 12px;
  line-height: 16px;
  color: var(--text-dim);
}
.window-body {
  border-radius: var(--r-lg); /* 16 outer - 8 gap = 8 */
  background: var(--bg);
  padding: var(--sp-300);
  display: grid;
  gap: var(--sp-200);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .window-body { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .window-body { grid-template-columns: repeat(4, 1fr); } }

.tile {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--surface);
  padding: var(--sp-200);
  display: flex;
  flex-direction: column;
  gap: var(--sp-100);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.tile:hover { background: var(--surface-2); transform: translateY(-2px); }
.tile .icon { width: 20px; height: 20px; color: var(--accent); }
.tile .bar { height: 4px; border-radius: var(--r-full); background: var(--surface-2); }
.tile .bar.short { width: 44%; }
.tile .bar.mid { width: 72%; }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: var(--sp-200); grid-template-columns: 1fr; }
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 640px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .grid-4 { grid-template-columns: repeat(4, 1fr); } }

.card {
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: var(--surface);
  padding: var(--sp-300);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.card:hover { background: var(--surface-2); border-color: #3D3D3D; }

a.card:hover { transform: translateY(-3px); }

.card h3 { font-size: 20px; line-height: 28px; margin-bottom: var(--sp-75); }
.card p { color: var(--text-muted); font-size: 14px; line-height: 20px; }

.card-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--r-lg); /* 16 - 8 gap */
  border: 1px solid var(--line);
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--sp-200);
  color: var(--accent);
}
.card-icon svg { width: 20px; height: 20px; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-50);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  padding: var(--sp-25) var(--sp-75);
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: var(--bg);
  color: var(--text-muted);
}
.badge .status { width: 6px; height: 6px; border-radius: var(--r-full); background: var(--text-dim); }
.badge.is-live .status { background: var(--live); }
.badge.is-live { color: var(--live); }
.badge.is-beta .status { background: var(--beta); }
.badge.is-beta { color: var(--beta); }

.app-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-200); }
.app-meta {
  margin-top: var(--sp-300);
  padding-top: var(--sp-200);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-100);
  font-size: 12px;
  line-height: 16px;
  color: var(--text-dim);
}
.app-meta .go { color: var(--text); display: inline-flex; align-items: center; gap: var(--sp-50); font-weight: 500; }

/* ---------- Benefits ---------- */
.benefit strong { display: block; font-size: 18px; line-height: 28px; font-weight: 600; margin-bottom: var(--sp-75); }

/* ---------- Steps ---------- */
.step-num {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: 12px;
  line-height: 16px;
  color: var(--accent);
  margin-bottom: var(--sp-200);
  display: block;
}

/* ---------- Tagline reveal ---------- */
.reveal-section { padding-top: var(--sp-900); padding-bottom: var(--sp-900); background: var(--bg-warm); }
@media (min-width: 768px) { .reveal-section { padding-top: 128px; padding-bottom: 128px; } }

.reveal-copy {
  max-width: 680px;
  font-size: 36px;
  line-height: 40px;
  font-weight: 600;
  text-wrap: balance;
}
@media (min-width: 768px) { .reveal-copy { font-size: 48px; line-height: 1; } }

.reveal-copy .w {
  color: rgba(255, 255, 255, 0.3);
  transition: color var(--dur-long) var(--ease);
  display: inline-block;
}
.reveal-copy .w.on { color: var(--text); }

/* ---------- Build log ---------- */
.log-item {
  display: flex;
  gap: var(--sp-300);
  padding: var(--sp-300) 0;
}
.log-date { font-size: 12px; line-height: 16px; color: var(--text-dim); min-width: 88px; padding-top: var(--sp-50); }
.log-body h3 { font-size: 16px; line-height: 24px; margin-bottom: var(--sp-50); }
.log-body p { font-size: 14px; line-height: 20px; color: var(--text-muted); }

/* ---------- Form ---------- */
.form-grid { display: grid; gap: var(--sp-200); }
.field { display: flex; flex-direction: column; gap: var(--sp-75); }
.field label { font-size: 14px; line-height: 20px; font-weight: 500; }

.input, .textarea, .select {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  line-height: 24px;
  color: var(--text);
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: var(--sp-100);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.textarea { min-height: 96px; resize: vertical; }
.input::placeholder, .textarea::placeholder { color: var(--text-dim); }
.input:hover, .textarea:hover, .select:hover { border-color: #3D3D3D; }
.input[aria-invalid="true"], .textarea[aria-invalid="true"] { border-color: var(--danger); }

.field-error {
  font-size: 12px;
  line-height: 16px;
  color: var(--danger);
  min-height: 16px;
}

.form-note { font-size: 12px; line-height: 16px; color: var(--text-dim); }

.form-status {
  font-size: 14px;
  line-height: 20px;
  color: var(--text-muted);
  min-height: 20px;
}

/* Skeleton loading */
.skeleton-row { display: grid; gap: var(--sp-75); }
.skeleton {
  height: 12px;
  border-radius: var(--r);
  background: var(--surface-2);
  animation: pulse 1600ms var(--ease) infinite;
}
.skeleton.w-60 { width: 60%; }
.skeleton.w-40 { width: 40%; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.44; } }

/* Empty state */
.empty {
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: var(--bg);
  padding: var(--sp-300);
  text-align: center;
}
.empty svg { width: 24px; height: 24px; color: var(--text-dim); margin: 0 auto var(--sp-100); }
.empty p { font-size: 14px; line-height: 20px; color: var(--text-muted); }

/* ---------- FAQ ---------- */
.faq-item {
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: var(--surface);
  padding: var(--sp-300);
  transition: background-color var(--dur) var(--ease);
}
.faq-item + .faq-item { margin-top: var(--sp-100); }
.faq-item[open] { background: var(--surface-2); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--sp-200);
  font-size: 16px;
  line-height: 24px;
  font-weight: 600;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg { width: 16px; height: 16px; flex: none; margin-top: var(--sp-50); color: var(--text-muted); transition: transform var(--dur) var(--ease); }
.faq-item[open] summary svg { transform: rotate(45deg); }
.faq-item p { margin-top: var(--sp-100); color: var(--text-muted); font-size: 14px; line-height: 20px; max-width: 680px; }

/* ---------- Final CTA ---------- */
.final {
  border: 1px solid var(--line);
  border-radius: var(--r-3xl);
  background: var(--surface);
  padding: var(--sp-500) var(--sp-300);
  text-align: center;
}
@media (min-width: 768px) { .final { padding: var(--sp-800) var(--sp-600); } }
.final h2 { font-size: 30px; line-height: 36px; max-width: 680px; margin: 0 auto; }
@media (min-width: 768px) { .final h2 { font-size: 36px; line-height: 40px; } }
.final p { margin: var(--sp-200) auto 0; max-width: 680px; color: var(--text-muted); font-size: 18px; line-height: 28px; }
.final .hero-cta { justify-content: center; }

/* ---------- Footer ---------- */
footer { border-top: 1px solid var(--line); padding-top: var(--sp-600); padding-bottom: var(--sp-600); }
.footer-grid { display: grid; gap: var(--sp-500); grid-template-columns: 1fr; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr 1fr; } }
.footer-col h4 { font-size: 12px; line-height: 16px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-dim); margin-bottom: var(--sp-200); font-weight: 500; }
.footer-col li + li { margin-top: var(--sp-75); }
.footer-col a { font-size: 14px; line-height: 20px; color: var(--text-muted); transition: color var(--dur) var(--ease); }
.footer-col a:hover { color: var(--text); }
.footer-bottom {
  margin-top: var(--sp-600);
  padding-top: var(--sp-300);
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-200);
  justify-content: space-between;
  font-size: 12px;
  line-height: 16px;
  color: var(--text-dim);
}

/* ---------- Cookie bar ---------- */
.cookie {
  position: fixed;
  left: var(--sp-300);
  right: var(--sp-300);
  bottom: var(--sp-300);
  z-index: 70;
  max-width: 560px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background: rgba(31, 31, 31, 0.92);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  padding: var(--sp-300);
  transform: translateY(24px);
  opacity: 0;
  visibility: hidden;
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.cookie.show { transform: translateY(0); opacity: 1; visibility: visible; }
.cookie p { font-size: 14px; line-height: 20px; color: var(--text-muted); }
.cookie .row { display: flex; gap: var(--sp-75); margin-top: var(--sp-200); flex-wrap: wrap; }

/* ---------- Scroll reveal ---------- */
.rise {
  opacity: 0;
  transform: translateY(64px);
  filter: blur(12px);
  transition: opacity var(--dur-long) var(--ease), transform var(--dur-long) var(--ease), filter var(--dur-long) var(--ease);
  will-change: opacity, transform;
}
.rise.in { opacity: 1; transform: translateY(0); filter: blur(0); }
.rise[data-delay="1"] { transition-delay: 100ms; }
.rise[data-delay="2"] { transition-delay: 150ms; }
.rise[data-delay="3"] { transition-delay: 200ms; }
.rise[data-delay="4"] { transition-delay: 250ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: 1ms !important; animation-duration: 1ms !important; }
  .rise { opacity: 1; transform: none; filter: none; }
  .reveal-copy .w { color: var(--text); }
}

/* ---------- Static pages ---------- */
.doc { padding-top: 160px; }
.doc h1 { font-size: 36px; line-height: 40px; margin-bottom: var(--sp-300); }
.doc h2 { font-size: 20px; line-height: 28px; margin-top: var(--sp-500); margin-bottom: var(--sp-100); }
.doc p, .doc li { color: var(--text-muted); font-size: 16px; line-height: 24px; max-width: 680px; }
.doc li { margin-top: var(--sp-75); padding-left: var(--sp-200); position: relative; }
.doc li::before { content: ""; position: absolute; left: 0; top: 10px; width: 4px; height: 4px; border-radius: 9999px; background: var(--text-dim); }
.doc p + p { margin-top: var(--sp-200); }


/* ================================================================
   Core 2.0 alignment
   Radii, depth and accent behaviour taken from the reference kit.
   Background values stay inside the approved dark set.
   ================================================================ */

/* Pill controls, as in the reference kit */
.btn { border-radius: var(--r-full); }
.btn-primary { background: var(--text); color: #101010; box-shadow: var(--shadow-widget); }
.btn-primary:hover { background: #FDFDFD; }
.btn-primary:active { box-shadow: var(--shadow-press); }
.btn-ghost { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow-widget); }
.btn-ghost:hover { background: var(--surface-2); border-color: var(--line-strong); }

/* Widgets: soft depth instead of a hard hairline */
.card,
.faq-item,
.final,
.window {
  border-color: var(--line);
  box-shadow: var(--shadow-widget);
}
.card, .faq-item { border-radius: var(--r-3xl); }
.card:hover { box-shadow: var(--shadow-depth); }
.window { border-radius: var(--r-3xl); }
.window-body { border-radius: var(--r-2xl); }   /* 24 outer, 8 gap */
.tile { border-radius: var(--r-xl); background: var(--surface-2); border-color: var(--line-strong); }
.tile:hover { background: #2E2E2E; }
.card-icon { border-radius: var(--r-xl); background: var(--surface-2); border-color: var(--line-strong); color: var(--accent); }
.island { border-radius: var(--r-full); box-shadow: var(--shadow-depth); }
.cookie { border-radius: var(--r-3xl); box-shadow: var(--shadow-depth); }
.empty { border-radius: var(--r-2xl); }
.input, .textarea, .select { border-radius: var(--r-xl); background: var(--bg-deep); }
.input:focus, .textarea:focus, .select:focus { box-shadow: var(--shadow-press); }
.badge { box-shadow: none; }

/* Accent behaviour */
.step-num { color: var(--accent); }
.tile .icon { color: var(--text-dim); }
.tile:nth-child(1) .icon { color: var(--accent); }
.tile:nth-child(2) .icon { color: var(--live); }
.tile:nth-child(3) .icon { color: var(--violet); }
.tile:nth-child(4) .icon { color: var(--beta); }
.grid-4 > .card:nth-child(1) .card-icon { color: var(--accent); }
.grid-4 > .card:nth-child(2) .card-icon { color: var(--live); }
.grid-4 > .card:nth-child(3) .card-icon { color: var(--violet); }
.grid-4 > .card:nth-child(4) .card-icon { color: var(--beta); }
#benefits .card-icon { color: var(--accent); }

.overlay-links a:hover { color: var(--accent); }
.link-quiet:hover { color: var(--text); border-color: var(--accent); }
.rule { background: var(--line); }

/* Layout fixes verified in browser */
.card { display: flex; flex-direction: column; }
.app-meta { margin-top: auto; padding-top: var(--sp-300); }
.tile .bar { display: block; background: var(--line-strong); }
.eyebrow .badge { text-transform: none; letter-spacing: 0; }
.benefit p, .card > p { margin-bottom: 0; }

/* Island nav on narrow screens */
.brand span, .island .btn { white-space: nowrap; }
@media (max-width: 479px) {
  .nav-actions .btn { display: none; }
  .island { gap: var(--sp-100); }
}

/* ---------- Empty slots, shown while nothing is published ---------- */
.card.ghost {
  background: transparent;
  border-style: dashed;
  border-color: var(--line-strong);
  box-shadow: none;
}
.card.ghost:hover { background: transparent; box-shadow: none; transform: none; }
.card.ghost h3 { color: var(--text-dim); }
.card.ghost p { color: var(--text-dim); }
.card.ghost .app-meta { color: var(--line-strong); }
.ghost-icon { background: transparent; border-style: dashed; color: var(--text-dim); }

.tile.ghost {
  background: transparent;
  border-style: dashed;
  border-color: var(--line-strong);
}
.tile.ghost:hover { background: transparent; }
.tile.ghost .icon { color: var(--text-dim); }
.tile.ghost .bar { background: var(--line); }

/* Icons sized through the sprite */
.card-icon svg, .empty svg, .faq-item summary svg, .tile .icon svg, .app-meta .go svg { width: 100%; height: 100%; }
.card-icon svg { width: 20px; height: 20px; }
.tile .icon svg { width: 20px; height: 20px; }
.empty svg { width: 24px; height: 24px; }
.faq-item summary svg { width: 16px; height: 16px; }
.app-meta .go svg { width: 14px; height: 14px; }

/* ================================================================
   Ambient colour wash
   A fixed, very low alpha violet and blue light behind everything.
   Surfaces go slightly translucent so the wash reads through the
   gutters instead of sitting on top of the content.
   ================================================================ */
:root {
  --wash-violet: rgba(127, 95, 255, 0.15);
  --wash-blue: rgba(42, 133, 255, 0.12);
  --wash-violet-soft: rgba(127, 95, 255, 0.08);
}

body { position: relative; }

#ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(68vw 56vh at 6% 4%, var(--wash-violet), transparent 66%),
    radial-gradient(58vw 48vh at 96% -2%, var(--wash-blue), transparent 64%),
    radial-gradient(80vw 55vh at 52% 100%, var(--wash-violet-soft), transparent 68%);
}

/* The shape field fades out toward the bottom of the viewport so the
   lower half of the page stays quiet under long-form copy. */
#bg-field {
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0.85;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 88%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 42%, transparent 88%);
}

@media (max-width: 639px) {
  /* Less of it on a phone, where the copy fills the whole width. */
  #bg-field { opacity: 0.55; }
}

.nav-shell, .overlay, .cookie { z-index: 60; }   /* already fixed; only lift them */
.nav-shell { z-index: 60; }
.overlay { z-index: 50; }
.cookie { z-index: 70; }
main, footer { position: relative; z-index: 1; }

/* Surfaces let the wash through */
.card, .faq-item, .final { background-color: rgba(31, 31, 31, 0.74); }
.card:hover, .faq-item[open] { background-color: rgba(39, 39, 39, 0.82); }
.card.ghost, .card.ghost:hover { background-color: transparent; }
.window { background-color: rgba(31, 31, 31, 0.62); }
.window-body { background-color: rgba(24, 24, 24, 0.66); }
.tile { background-color: rgba(39, 39, 39, 0.6); }
.tile:hover { background-color: rgba(46, 46, 46, 0.72); }
.tile.ghost, .tile.ghost:hover { background-color: transparent; }
.card-icon { background-color: rgba(39, 39, 39, 0.7); }
.ghost-icon { background-color: transparent; }
.empty { background-color: rgba(0, 0, 0, 0.28); }
.input, .textarea, .select { background-color: rgba(0, 0, 0, 0.34); }
.badge { background-color: rgba(0, 0, 0, 0.3); }

/* The tagline band carries the strongest tint on the page */
.reveal-section {
  background: var(--bg-deep);
  position: relative;
  overflow: hidden;
}
.reveal-section::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 130% at 18% 46%, rgba(127, 95, 255, 0.16), transparent 68%),
    radial-gradient(46% 110% at 84% 62%, rgba(42, 133, 255, 0.10), transparent 66%);
}
.reveal-section .wrap { position: relative; z-index: 1; }

/* A little extra light behind the two moments that matter */
.hero, #start { position: relative; }
.hero::before, #start::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.hero::before {
  background: radial-gradient(46% 62% at 24% 34%, rgba(127, 95, 255, 0.09), transparent 70%);
}
#start::before {
  background: radial-gradient(50% 80% at 50% 60%, rgba(42, 133, 255, 0.09), transparent 70%);
}
.hero .wrap, #start .wrap { position: relative; z-index: 1; }

/* ---------- Loading state for the app grid ---------- */
.skeleton-card { display: flex; flex-direction: column; gap: var(--sp-100); }
.skeleton-card .app-card-head { margin-bottom: var(--sp-100); }
.skeleton-card .app-meta { margin-top: auto; padding-top: var(--sp-300); }
.sk-icon { width: 40px; height: 40px; border-radius: var(--r-xl); }
.sk-pill { width: 56px; height: 20px; border-radius: var(--r-full); }
.sk-title { width: 52%; height: 20px; border-radius: var(--r); }

#apps-grid { transition: opacity 200ms cubic-bezier(0.23, 1, 0.32, 1); }
#apps-grid.is-loading { opacity: 0.72; }
.app-meta .go.is-locked { color: var(--text-muted); }
.app-meta .go.is-locked svg { width: 13px; height: 13px; }
#hero-cta svg, #final-cta svg { width: 16px; height: 16px; }

/* ================================================================
   Accounts
   Sign in dialog, the gated note field, and the signed in strip.
   ================================================================ */

/* Honeypot: present in the DOM for bots, invisible and unreachable for people */
.hp {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* Dialog */
.modal {
  border: 1px solid var(--line);
  border-radius: var(--r-3xl);
  background: var(--surface);
  background-color: rgba(31, 31, 31, 0.96);
  color: var(--text);
  padding: 0;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  box-shadow: var(--shadow-depth);
  margin: auto;
}
.modal::backdrop {
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}
.modal[open] { animation: modal-in var(--dur) var(--ease); }
@keyframes modal-in {
  from { opacity: 0; transform: translateY(16px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-card { position: relative; padding: var(--sp-400); }
.modal-close {
  position: absolute;
  top: var(--sp-200);
  right: var(--sp-200);
  width: 32px;
  height: 32px;
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.modal-close:hover { background: var(--surface-2); color: var(--text); }
.modal-close svg { width: 16px; height: 16px; transform: rotate(45deg); }

.modal .form-grid h2 { margin-bottom: 0; }
.modal .form-note .link-quiet { font-size: 12px; line-height: 16px; }
.modal .row { display: flex; gap: var(--sp-75); flex-wrap: wrap; }

/* Tabs */
.tabs {
  display: flex;
  gap: var(--sp-50);
  padding: var(--sp-50);
  border-radius: var(--r-full);
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.3);
  margin-bottom: var(--sp-300);
  margin-right: 44px;
}
.tab {
  flex: 1;
  font-family: inherit;
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  padding: var(--sp-50) var(--sp-100);
  border-radius: var(--r-full);
  border: 0;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.tab:hover { color: var(--text); }
.tab[aria-selected="true"] { background: var(--surface-2); color: var(--text); box-shadow: var(--shadow-widget); }

/* A button that reads like a quiet link, used inside form notes */
button.link-quiet {
  font-family: inherit;
  background: none;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 0 0 var(--sp-25);
  cursor: pointer;
}

/* The locked note field, shown to a signed out visitor */
.gate {
  display: flex;
  gap: var(--sp-200);
  align-items: flex-start;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-xl);
  background: rgba(0, 0, 0, 0.28);
  padding: var(--sp-200);
}
.gate > svg { width: 20px; height: 20px; flex: none; color: var(--text-dim); margin-top: var(--sp-25); }
.gate strong { display: block; font-size: 14px; line-height: 20px; font-weight: 600; }
.gate p { margin-top: var(--sp-50); font-size: 14px; line-height: 20px; color: var(--text-muted); }
.gate .row { display: flex; gap: var(--sp-75); flex-wrap: wrap; margin-top: var(--sp-200); }

/* Signed in strip at the top of the note form and in the account panel */
.signed-as {
  display: flex;
  align-items: center;
  gap: var(--sp-100);
  padding: var(--sp-100) var(--sp-200);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  background: rgba(0, 0, 0, 0.28);
}
.signed-as > .t-sm { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.signed-as strong { font-weight: 600; }
.avatar {
  width: 28px;
  height: 28px;
  flex: none;
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: 12px;
  line-height: 28px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
}

/* Nav account button holds its width while the label changes */
#nav-account { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 479px) {
  .nav-actions .btn { display: inline-flex; }
  .nav-actions .btn-primary { display: none; }
  #nav-account { max-width: 112px; }
}

/* Locked app cards */
.app-meta .go.is-gated { color: var(--text-muted); }
a.card.is-gated { cursor: pointer; }

/* Turnstile widget sits flush with the form fields */
.turnstile-slot { min-height: 0; }
.turnstile-slot iframe { border-radius: var(--r-lg); }

/* ---------- Admin page ---------- */
.admin-stats { display: grid; gap: var(--sp-200); grid-template-columns: repeat(3, 1fr); margin-bottom: var(--sp-500); }
@media (max-width: 639px) { .admin-stats { grid-template-columns: 1fr; } }
.stat { padding: var(--sp-300); }
.stat .num { display: block; font-size: 36px; line-height: 40px; font-weight: 600; }
.stat .lbl { display: block; margin-top: var(--sp-50); font-size: 12px; line-height: 16px; color: var(--text-muted); letter-spacing: 0.08em; text-transform: uppercase; }
.admin-head { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-200); flex-wrap: wrap; margin: var(--sp-500) 0 var(--sp-200); }
.admin-head h2 { font-size: 20px; line-height: 28px; }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r-2xl); background: rgba(31, 31, 31, 0.74); }
.table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 20px; }
.table th, .table td { text-align: left; vertical-align: top; padding: var(--sp-100) var(--sp-200); border-bottom: 1px solid var(--line); }
.table th { font-size: 12px; line-height: 16px; color: var(--text-dim); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.table td.note-cell { min-width: 280px; max-width: 520px; white-space: pre-wrap; overflow-wrap: anywhere; }
.table td.mono { font-size: 12px; line-height: 16px; color: var(--text-dim); white-space: nowrap; }
.table .empty-row td { color: var(--text-dim); text-align: center; padding: var(--sp-400); }