/* ── RESET ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
img, svg { display: block; max-width: 100%; }

/* ── TOKENS ── */
:root {
  /* near-black charcoal backgrounds — neutral, no navy cast */
  --bg:           #08090b;
  --bg-mid:       #0c0d10;
  --bg-card:      #0f1014;
  --bg-raised:    #131418;
  --bg-dash:      #0a0b0e;

  --border:       rgba(255, 255, 255, 0.09);
  --border-mid:   rgba(255, 255, 255, 0.14);
  --border-strong:rgba(255, 255, 255, 0.22);

  /* muted amber / gold */
  --amber:        #d8973a;
  --amber-bright: #e8aa48;
  --amber-dim:    #a07424;
  --amber-glow:   rgba(216, 151, 58, 0.32);
  --amber-soft:   rgba(216, 151, 58, 0.10);

  /* electric blue — particles / system lines only */
  --blue:         #4aa3ff;
  --blue-dim:     #2c6fb8;

  /* off-white typography, neutral dim grey labels */
  --text-bright:  #f3f3f1;
  --text:         #c8c8c5;
  --text-muted:   #7a7a78;
  --text-dim:     #525250;

  --status:       #4ade80;
  --status-glow:  rgba(74, 222, 128, 0.45);

  --font-display: 'Anton', 'Impact', 'Helvetica Neue', sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:    'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;

  --max-width:    1200px;
  --rad-xs:       2px;
  --rad-sm:       4px;

  /* fixed .site-nav: keep in sync with nav padding + one/two-row layout */
  --site-nav-h:   5.5rem;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--site-nav-h);
  background: #070d18;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  padding-top: var(--site-nav-h);
}

a { color: inherit; text-decoration: none; transition: color 0.15s; }

::selection { background: var(--amber); color: #0a0a0a; }

code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  color: var(--amber);
  background: var(--amber-soft);
  padding: 0.05em 0.35em;
  border-radius: var(--rad-xs);
}

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

/* ── BACKGROUND GRID ── */
.grid-bg {
  position: fixed;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  z-index: 0;
  mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.85), rgba(0,0,0,0.35) 70%, transparent 100%);
}

/* subtle film grain overlay — fixed-position SVG noise, no extra HTTP request */
.grid-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

body > * { position: relative; z-index: 1; }

/* ── SKIP LINK ── */
.skip-link {
  position: absolute;
  left: 1rem;
  top: -3rem;
  z-index: 1000;
  padding: 0.6rem 1rem;
  background: var(--amber);
  color: #0a0a0a;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-radius: var(--rad-sm);
  transition: top 0.15s ease;
}
.skip-link:focus {
  top: calc(var(--site-nav-h) + 0.5rem);
  outline: 2px solid var(--amber-bright);
  outline-offset: 2px;
}

/* ── NAV ── */
.site-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.1rem 2rem;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
}

.nav-brand-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  line-height: 1;
}

.nav-brand {
  color: var(--text-bright);
  display: inline-block;
  line-height: 1;
}

.nav-brand-mark {
  font-family: var(--font-display);
  font-size: 1.45rem;
  letter-spacing: 0.06em;
  color: var(--amber);
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.nav-brand-dot {
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber-glow);
  margin-left: 0.18em;
  vertical-align: top;
  margin-top: 0.05em;
}

.nav-brand-byline {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  white-space: nowrap;
  display: inline-flex;
  align-items: baseline;
  gap: 0.35em;
  line-height: 1;
}

.nav-brand-by {
  color: var(--text-muted);
}

.nav-brand-sub {
  color: var(--text-muted);
  border-bottom: 1px dotted transparent;
}
.nav-brand-sub:hover { color: var(--amber); border-bottom-color: var(--amber); }

.nav-links {
  display: flex;
  gap: 2.4rem;
  align-items: center;
}

.nav-links a {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  text-transform: uppercase;
  position: relative;
  padding: 0.3rem 0;
}

.nav-links a:hover { color: var(--text-bright); }

.nav-link-accent { color: var(--amber) !important; }
.nav-link-accent:hover { color: var(--amber-bright) !important; }

.nav-link-disabled { opacity: 0.45; pointer-events: none; }

.nav-status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--status);
  box-shadow: 0 0 8px var(--status-glow);
  animation: status-pulse 2.4s ease-in-out infinite;
}

@keyframes status-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 8px var(--status-glow); }
  50% { opacity: 0.5; box-shadow: 0 0 14px var(--status-glow); }
}

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.85rem 1.4rem;
  border-radius: var(--rad-xs);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  border: 1px solid transparent;
  white-space: nowrap;
}

.btn .arrow { display: inline-block; transition: transform 0.18s ease; }
.btn:hover .arrow { transform: translateX(3px); }

.btn-primary {
  background: var(--amber);
  color: #0a0a0a;
  border-color: var(--amber);
  box-shadow: 0 0 0 0 var(--amber-glow);
}
.btn-primary:hover {
  background: var(--amber-bright);
  border-color: var(--amber-bright);
  box-shadow: 0 6px 24px var(--amber-glow);
  transform: translateY(-1px);
}
.btn-primary:disabled { opacity: 0.55; cursor: not-allowed; transform: none; }

.btn-ghost {
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-ghost:hover {
  border-color: var(--amber);
  color: var(--amber);
  background: var(--amber-soft);
}

.btn-lg {
  padding: 1.05rem 1.8rem;
  font-size: 0.78rem;
}

/* ── HERO ── */
.hero {
  padding: 5rem 2rem 6rem;
  position: relative;
}

.hero-grid {
  max-width: var(--max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.25fr);
  gap: 3rem;
  align-items: center;
}

.hero-kicker {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  color: var(--amber);
  margin-bottom: 1.6rem;
  text-transform: uppercase;
}

.hero-title {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 6.8vw, 5.6rem);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 0.96;
  color: var(--text-bright);
  margin-bottom: 2rem;
  text-transform: uppercase;
}

.hero-sub {
  color: var(--text-muted);
  font-size: 1rem;
  line-height: 1.7;
  max-width: 32rem;
  margin-bottom: 2.4rem;
}

.hero-actions {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
}

/* hero visual: square stage so the funnel fits the column without stretching */
.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  width: min(100%, clamp(360px, 52vw, 600px));
  max-width: 100%;
  aspect-ratio: 1;
  height: auto;
  min-width: 0;
  margin-inline: auto;
}

.hero-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--amber);
}

/* ── ambient glow behind the well image ── */
.hero-glow {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 50% 58%, var(--amber-glow), transparent 38%),
    radial-gradient(circle at 50% 40%, rgba(74, 163, 255, 0.07), transparent 60%);
  pointer-events: none;
}

/* ── faint horizontal scanlines for terminal/CRT feel ── */
.hero-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.02) 0 1px,
    transparent 1px 3px
  );
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* ── hero image: memory gravity well ── */
.hero-well-img {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  user-select: none;
  pointer-events: none;
}

/* stage corner tags: HIVEMIND (top) + MODEL (bottom), centred */
.callout-tag {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 600;
  border: 1px solid var(--border-strong);
  padding: 0.3rem 0.6rem;
  border-radius: var(--rad-xs);
  background: rgba(8, 9, 11, 0.85);
  z-index: 2;
}

.callout-hivemind {
  top: 12%;
  color: var(--amber);
  border-color: var(--amber);
}

.callout-model {
  bottom: 12%;
  color: var(--status);
  border-color: var(--status);
}

/* vertical stack of labels overlaid on the RIGHT side of the image */
.hero-callouts {
  position: absolute;
  top: 50%;
  right: 1.5rem;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: space-around;
  gap: 1.85rem;
  z-index: 3;
  pointer-events: none;
}

.callout {
  position: relative;
  --leader-len: 2rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.hero-callouts .callout:nth-child(1) { --leader-len: 3rem; }
.hero-callouts .callout:nth-child(2) { --leader-len: 7rem; }
.hero-callouts .callout:nth-child(3) { --leader-len: 8rem; }
.hero-callouts .callout:nth-child(4) { --leader-len: 8rem; }
.hero-callouts .callout:nth-child(5) { --leader-len: 7rem; }

.callout-label {
  display: block;
  color: var(--text-bright);
  font-weight: 600;
  letter-spacing: 0.14em;
  white-space: normal;
  max-width: 9.5rem;
  line-height: 1.35;
  text-align: right;
  text-shadow: 0 0 12px rgba(8, 9, 11, 0.9);
}

/* leader line extending LEFT from each label into the image */
.callout::before {
  content: "";
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  width: var(--leader-len);
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong) 30%, var(--border-strong));
}
.callout::after {
  content: "";
  position: absolute;
  right: calc(100% + var(--leader-len) - 0.3rem);
  top: 50%;
  transform: translateY(-50%);
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background: var(--amber);
  box-shadow: 0 0 6px var(--amber-glow);
}

/* ── RIBBON ── */
.ribbon {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 0.85rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.012);
}

.ribbon-text { color: var(--amber); }
.ribbon-meta { color: var(--text-dim); font-size: 0.62rem; letter-spacing: 0.16em; }

/* ribbons that act as inter-section dividers — quieter than the lead ribbon */
.ribbon-mid {
  padding: 0.65rem 2rem;
  background: rgba(255, 255, 255, 0.018);
  border-top-color: var(--border);
  border-bottom-color: var(--border);
}
.ribbon-mid .ribbon-text {
  color: var(--text-muted);
}
.ribbon-mid .ribbon-text::first-letter {
  color: var(--amber);
}

/* ── BAND (section) ── */
.band {
  padding: 3.5rem 0;
  border-bottom: 1px solid var(--border-mid);
}

.band:last-of-type { border-bottom: 0; }

.band .container {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 2.5rem;
  align-items: start;
}

.band-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  color: var(--amber);
  text-transform: uppercase;
  line-height: 1.5;
  white-space: nowrap;
}

.band-sub {
  display: inline-block;
  margin-top: 0.4rem;
  color: var(--text-muted);
  font-weight: 400;
  letter-spacing: 0.16em;
}

/* ── PROBLEM ── */
/* Triptych: every cell stretches to the tallest column so the
   vertical dividers are all the same length. Padding is identical
   on every cell so the dividers are equidistant from the text on
   both sides. */
.problem-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
}

.problem-stmt {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  font-weight: 400;
  letter-spacing: 0.015em;
  line-height: 1.1;
  color: var(--text-bright);
  text-transform: uppercase;
  margin: 0;
  padding: 0 1.75rem;
  border-left: 1px solid var(--border-mid);
  text-wrap: balance;
  align-self: stretch;
}
.problem-stmt:first-child {
  border-left: 0;
  padding-left: 0;
}
.problem-stmt:last-child {
  padding-right: 0;
}

.amber { color: var(--amber); }

/* ── STACK ── */
.stack-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  list-style: none;
  position: relative;
}

.stack-step {
  display: grid;
  grid-template-rows: 14px 56px auto auto;
  row-gap: 0.85rem;
  padding: 0 1.4rem;
  border-left: 1px solid var(--border);
  position: relative;
  z-index: 1;
}
.stack-step:first-child { padding-left: 0; border-left: 0; }
.stack-step:last-child  { padding-right: 0; }

/* arrow connector sits on the divider, aligned vertically with the icon row */
.stack-step + .stack-step::before {
  content: "→";
  position: absolute;
  left: 0;
  top: calc(14px + 0.85rem + 28px);
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  color: var(--amber);
  background: var(--bg);
  padding: 2px 4px;
  line-height: 1;
  z-index: 2;
}

.step-num {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--amber);
  line-height: 1;
  align-self: start;
}

.step-icon {
  width: 44px;
  height: 44px;
  color: var(--amber-bright);
  margin: 0;
  filter: drop-shadow(0 0 6px var(--amber-glow));
  align-self: start;
}

.stack-step h3 {
  font-family: var(--font-mono);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--text-bright);
  text-transform: uppercase;
  line-height: 1;
}

.stack-step p {
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

/* ── DASHBOARD (proof artifact) ── */
.dashboard {
  background: var(--bg-dash);
  border: 1px solid var(--border-mid);
  border-radius: var(--rad-sm);
  font-family: var(--font-mono);
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.4);
}

.dash-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.85rem 1.1rem;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.dash-title { color: var(--text-bright); font-weight: 700; }
.dash-meta { color: var(--text-muted); }
.dash-spacer { flex: 1; }
.dash-task { color: var(--text-muted); }

.dash-action {
  background: transparent;
  border: 1px solid var(--border-strong);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  padding: 0.4rem 0.7rem;
  border-radius: var(--rad-xs);
  cursor: pointer;
  transition: all 0.15s;
  text-transform: uppercase;
}
.dash-action:hover { border-color: var(--amber); color: var(--amber); }
.dash-action-icon { padding: 0.4rem 0.55rem; font-size: 0.8rem; }

.dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) minmax(0, 1fr) minmax(0, 1fr);
  gap: 0;
}

.dash-col {
  padding: 1.1rem 1.2rem;
  border-right: 1px solid var(--border);
}
.dash-col:last-child { border-right: 0; }

.dash-col h4 {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}
.dash-h4-sub { color: var(--text-dim); margin-left: 0.3em; font-weight: 400; }
.dash-h4-spaced { margin-top: 1.5rem; }

.kv {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.6rem;
  font-size: 0.72rem;
}
.kv dt { color: var(--text-muted); font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.15rem; }
.kv dd {
  color: var(--text-bright);
  /* Long identifiers (WorkOS ULIDs) wrap instead of running through the
     column padding into the divider. */
  overflow-wrap: anywhere;
  min-width: 0;
}

.mem-list, .receipt-list, .ref-list {
  list-style: none;
  display: grid;
  gap: 0.7rem;
}

.mem-list li, .receipt-list li {
  border-left: 2px solid var(--amber-soft);
  padding: 0.45rem 0.7rem;
  background: rgba(255, 255, 255, 0.012);
}
.mem-list li:hover, .receipt-list li:hover { border-left-color: var(--amber); background: rgba(255, 255, 255, 0.025); }

.mem-head {
  display: flex;
  gap: 0.4rem;
  align-items: baseline;
  font-size: 0.65rem;
  margin-bottom: 0.25rem;
}
.mem-id { color: var(--amber); letter-spacing: 0.06em; }
.mem-age { color: var(--text-dim); letter-spacing: 0.04em; }

.mem-list p, .receipt-list p {
  font-size: 0.72rem;
  line-height: 1.55;
  color: var(--text);
  font-family: var(--font-body);
}

.mem-more {
  margin-top: 0.7rem;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}

.ref-list li {
  display: grid;
  grid-template-columns: 5.5rem minmax(0, 1fr) auto;
  gap: 0.5rem;
  align-items: baseline;
  font-size: 0.7rem;
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border);
}
.ref-list li:last-child { border-bottom: 0; }
.ref-id { color: var(--amber); letter-spacing: 0.04em; }
.ref-title { color: var(--text); font-family: var(--font-body); font-size: 0.72rem; }
.ref-ver { color: var(--text-dim); font-size: 0.62rem; }

.dash-footer {
  display: flex;
  align-items: center;
  gap: 1.4rem;
  padding: 0.75rem 1.1rem;
  border-top: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.015);
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.dash-footer strong { color: var(--text-bright); font-weight: 600; }
.dash-footer .ok { color: var(--status); }
.dash-footer-right { margin-left: auto; color: var(--text-dim); }

/* ── RAW JSON DRAWER ── */
.raw-json {
  margin: 0;
  padding: 1rem 1.2rem;
  background: #050a13;
  border-top: 1px solid var(--border);
  color: #b6c2d4;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  line-height: 1.55;
  overflow-x: auto;
  max-height: 22rem;
  overflow-y: auto;
}
.raw-json code {
  background: transparent;
  color: inherit;
  padding: 0;
  font-size: inherit;
  white-space: pre;
}

/* ── WHY ── */
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1rem;
}

.why-card {
  background: var(--bg-card);
  border: 1px solid var(--border-mid);
  border-radius: var(--rad-sm);
  padding: 1.5rem 1.4rem 1.3rem;
  /* col 1: icon, col 2: heading + body content                       */
  /* row 1: icon + heading inline                                     */
  /* row 2: description (1fr fills remaining height)                  */
  /* row 3: tag pinned to bottom                                      */
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  column-gap: 0.85rem;
  row-gap: 0.95rem;
  transition: border-color 0.2s, transform 0.2s;
}

.why-card:hover {
  border-color: var(--amber);
  transform: translateY(-2px);
}

.why-icon {
  grid-column: 1;
  grid-row: 1;
  width: 24px;
  height: 24px;
  color: var(--amber);
  align-self: center;
}

.why-card h3 {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--text-bright);
  text-transform: uppercase;
  line-height: 1.25;
  margin: 0;
}

.why-card p {
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0;
}

.why-card p:not(.why-tag) {
  grid-column: 1 / -1;
  grid-row: 2;
}

.why-card p.why-tag {
  grid-column: 1 / -1;
  grid-row: 3;
  padding-top: 0.85rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  color: var(--amber);
  text-transform: uppercase;
  margin: 0;
}

/* ── CTA ── */
.band-cta {
  padding: 4rem 0 4.5rem;
  background: rgba(216, 151, 58, 0.02);
  position: relative;
  overflow: hidden;
}

/* subtle horizon: a quiet glow at the bottom-right corner suggesting the
   hive still humming beneath the page */
.band-cta::before {
  content: "";
  position: absolute;
  bottom: -40%;
  right: -10%;
  width: 70%;
  height: 100%;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 30% at 50% 100%, rgba(216, 151, 58, 0.18), transparent 60%),
    radial-gradient(ellipse 80% 18% at 50% 102%, rgba(216, 151, 58, 0.32), transparent 70%);
  z-index: 0;
}
.band-cta::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-strong) 30%, var(--amber) 75%, var(--amber-bright) 92%, transparent);
  opacity: 0.5;
}
.band-cta .container { position: relative; z-index: 1; }

.cta-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.cta-title {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--text-bright);
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}

.cta-sub {
  color: var(--text-muted);
  font-size: 0.95rem;
  max-width: 30rem;
}

/* ── FOOTER ── */
.site-footer {
  padding: 0 0 2.25rem;
  border-top: 1px solid var(--border-mid);
  background: var(--bg);
}

.footer-inner {
  margin-top: 2rem;
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.3fr) auto;
  column-gap: 2.5rem;
  row-gap: 1.5rem;
  align-items: start;
}

.footer-brand { display: flex; flex-direction: column; gap: 0.55rem; }

.footer-mark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  color: var(--amber);
}

.footer-tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  text-transform: uppercase;
}

.footer-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.55rem 1.4rem;
  align-self: center;
}

.footer-links a {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  text-transform: uppercase;
  transition: color 0.18s;
}
.footer-links a:hover { color: var(--text-bright); }
.footer-links a.nav-link-disabled { opacity: 0.55; pointer-events: none; }

.footer-social {
  display: flex;
  gap: 0.6rem;
  align-self: center;
}
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid var(--border-mid);
  border-radius: 4px;
  color: var(--text-muted);
  transition: color 0.18s, border-color 0.18s, background 0.18s;
}
.footer-social a svg { width: 14px; height: 14px; display: block; }
.footer-social a:hover {
  color: var(--amber);
  border-color: var(--amber);
  background: rgba(216, 151, 58, 0.06);
}

.footer-meta {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding-top: 1.25rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.footer-coord { opacity: 0.7; }

/* ── MODAL ── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  opacity: 0;
  transition: opacity 0.18s ease;
}
.modal[hidden] { display: none; }
.modal.is-open { opacity: 1; }

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modal-dialog {
  position: relative;
  background: var(--bg-card);
  border: 1px solid var(--border-strong);
  border-radius: var(--rad-sm);
  padding: 2.4rem 2.2rem 2rem;
  width: 100%;
  max-width: 28rem;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--amber-soft);
  transform: translateY(8px);
  transition: transform 0.18s ease;
}
.modal.is-open .modal-dialog { transform: translateY(0); }

.modal-close {
  position: absolute;
  top: 0.6rem;
  right: 0.8rem;
  background: transparent;
  border: 0;
  color: var(--text-muted);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 0.2rem 0.55rem;
  line-height: 1;
  border-radius: var(--rad-xs);
}
.modal-close:hover { color: var(--amber); background: var(--amber-soft); }

.modal-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.18em;
  color: var(--amber);
  text-transform: uppercase;
  margin-bottom: 0.8rem;
}

.modal-title {
  font-family: var(--font-display);
  font-size: 2.4rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1;
  color: var(--text-bright);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}

.modal-sub {
  color: var(--text-muted);
  font-size: 0.88rem;
  line-height: 1.55;
  margin-bottom: 1.4rem;
}

.waitlist-form {
  display: flex;
  gap: 0.6rem;
  flex-direction: column;
}

.waitlist-form input {
  background: var(--bg);
  border: 1px solid var(--border-strong);
  border-radius: var(--rad-xs);
  padding: 0.85rem 1rem;
  color: var(--text-bright);
  font-family: var(--font-body);
  font-size: 0.95rem;
  outline: none;
  transition: border-color 0.15s;
}
.waitlist-form input:focus { border-color: var(--amber); box-shadow: 0 0 0 3px var(--amber-soft); }
.waitlist-form input::placeholder { color: var(--text-dim); }

.waitlist-form .btn { justify-content: center; padding: 0.95rem 1.2rem; }

.form-msg {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  margin-top: 0.9rem;
  min-height: 1.2em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.form-msg-ok { color: var(--status); }
.form-msg-err { color: var(--amber); }

body.modal-open { overflow: hidden; }

/* ── APP DASHBOARD (logged-in workspace) ── */
.dash-hero {
  padding: 2.5rem 2rem 1.5rem;
}

.dash-hero-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
}

.dash-hero-title {
  font-size: clamp(2.4rem, 5.5vw, 4.4rem);
  margin-bottom: 1.2rem;
}

.dash-alerts-wrap {
  padding-bottom: 0.5rem;
}

.band-tight {
  padding: 2rem 0 2.5rem;
  border-bottom: 0;
}

.band-container-stack {
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 2rem;
}

.nav-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.85rem;
  flex-shrink: 0;
}

/* Plain links in the actions slot (SIGN IN / DASHBOARD) match nav typography. */
.nav-actions > a {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.3rem 0;
}

.nav-user {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  max-width: 16rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-actions form { margin: 0; }

.btn-sm {
  padding: 0.55rem 0.95rem;
  font-size: 0.65rem;
}

.dash-grid-account {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dash-panel-body {
  padding: 1.1rem 1.2rem 1.25rem;
}

.dash-panel-note {
  font-size: 0.82rem;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 1rem;
  max-width: 62ch;
}

.dash-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 0.72rem;
}

.dash-table th,
.dash-table td {
  text-align: left;
  padding: 0.7rem 0.55rem;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.dash-table th {
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-dim);
  font-weight: 600;
}

.dash-table td code {
  font-size: 0.85em;
}

.dash-table tbody tr:last-child td {
  border-bottom: 0;
}

.dash-key-form {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem;
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
}

.dash-input {
  flex: 1 1 220px;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border-strong);
  color: var(--text-bright);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  padding: 0.75rem 0.85rem;
  border-radius: var(--rad-xs);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.dash-input::placeholder { color: var(--text-dim); }

.dash-input:focus {
  outline: none;
  border-color: var(--amber);
  box-shadow: 0 0 0 3px var(--amber-soft);
}

.dash-key-reveal {
  margin: 0;
  padding: 0.95rem 1.1rem;
  border-bottom: 1px solid var(--border);
  background: rgba(216, 151, 58, 0.06);
  font-size: 0.78rem;
  line-height: 1.6;
  color: var(--text);
}

.dash-key-reveal-note {
  margin: 0.35rem 0 0.75rem;
  color: var(--text-muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

.key-cell {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}

.key-masked {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--border);
  padding: 0.35rem 0.55rem;
  border-radius: var(--rad-xs);
  user-select: none;
}

.key-copy-btn {
  padding: 0.35rem 0.55rem;
  font-size: 0.58rem;
  flex-shrink: 0;
}

.key-copy-btn-done {
  border-color: var(--status);
  color: var(--status);
}

.dash-key-reveal .key-cell {
  margin-top: 0.15rem;
}

.dash-alert {
  border: 1px solid rgba(216, 151, 58, 0.35);
  background: var(--amber-soft);
  color: var(--text);
  padding: 0.85rem 1rem;
  border-radius: var(--rad-sm);
  font-size: 0.82rem;
  line-height: 1.55;
  margin-bottom: 1.25rem;
}

.dash-alert-error {
  border-color: rgba(201, 79, 79, 0.45);
  background: rgba(201, 79, 79, 0.08);
}

.plan-ok {
  color: var(--status);
  font-weight: 600;
  letter-spacing: 0.06em;
}

.hidden { display: none !important; }

.dash-preview-badge {
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--amber);
  border: 1px solid rgba(216, 151, 58, 0.45);
  background: var(--amber-soft);
  padding: 0.28rem 0.45rem;
  border-radius: var(--rad-xs);
}

.dash-preview-banner {
  border: 1px dashed rgba(216, 151, 58, 0.45);
  background: rgba(216, 151, 58, 0.06);
  color: var(--text-muted);
  padding: 0.75rem 1rem;
  border-radius: var(--rad-sm);
  font-size: 0.82rem;
  line-height: 1.55;
  margin-bottom: 1.25rem;
}

.dash-preview-banner strong {
  color: var(--amber-bright);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .band .container { grid-template-columns: 140px minmax(0, 1fr); gap: 2rem; }
  .band-container-stack { grid-template-columns: 140px minmax(0, 1fr); }
  .dash-grid { grid-template-columns: 1fr 1fr; }
  .dash-grid-account { grid-template-columns: 1fr 1fr; }
  .dash-col:nth-child(n+3) { border-top: 1px solid var(--border); }
  .dash-col:nth-child(2n) { border-right: 0; }
}

@media (max-width: 900px) {
  .footer-inner { grid-template-columns: 1fr 1fr; }
  .footer-social { grid-column: 2; justify-self: end; }
  .hero-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero-visual { width: min(100%, 420px); aspect-ratio: 1; height: auto; }
  .hero-callouts { gap: 1.45rem; right: 1rem; }
  .callout { font-size: 0.58rem; }
  .band .container { grid-template-columns: 1fr; gap: 1.25rem; }
  .band-container-stack { grid-template-columns: 1fr; gap: 1.25rem; }
  .band-label { position: static; }
  .stack-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 2.4rem; column-gap: 1.5rem; }
  .stack-step { padding: 0; border-left: 0; }
  .stack-step + .stack-step::before,
  .stack-step:nth-child(4)::before { display: none; }
  .problem-grid { gap: 1.5rem; }
  .problem-stmt { padding: 0; border-left: 0; }
  .dash-grid { grid-template-columns: 1fr; }
  .dash-col { border-right: 0; border-bottom: 1px solid var(--border); }
  .dash-col:nth-child(3) { grid-column: auto; border-top: 0; }
  .dash-col:last-child { border-bottom: 0; }
  .why-grid { grid-template-columns: 1fr; }
  .problem-grid { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (max-width: 720px) {
  :root { --site-nav-h: 8rem; }
  .site-nav { flex-wrap: wrap; padding: 0.85rem 1.25rem; gap: 1rem; }
  .nav-links { gap: 1.2rem; order: 3; flex-basis: 100%; justify-content: flex-start; }
  .nav-actions { order: 2; margin-left: auto; }
  .nav-user { max-width: 10rem; }
  .hero { padding: 3rem 1.25rem 4rem; }
  .container { padding: 0 1.25rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { justify-content: center; }
  .hero-visual { width: min(100%, 360px); aspect-ratio: 1; height: auto; }
  .stack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
  .dash-header { flex-wrap: wrap; }
  .ribbon { padding: 0.75rem 1.25rem; font-size: 0.6rem; }
  .cta-row { flex-direction: column; align-items: flex-start; }
  .footer-inner { grid-template-columns: 1fr; gap: 1.5rem; }
  .footer-links { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer-meta { flex-direction: column; align-items: flex-start; }
  .modal-title { font-size: 1.9rem; }
  .modal-dialog { padding: 1.8rem 1.5rem 1.5rem; }
  .callout { font-size: 0.55rem; max-width: 11rem; }
}

@media (max-width: 480px) {
  .stack-grid { grid-template-columns: 1fr; }
}

/* ── WORKOS WIDGETS (dashboard island) ── */
.workos-nav-org {
  min-width: 0;
  max-width: 14rem;
}

.workos-user-menu-mount {
  position: relative;
}

.dash-user-menu {
  position: relative;
}

.dash-user-menu-trigger {
  list-style: none;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
  background: rgba(255, 255, 255, 0.02);
  padding: 0.55rem 0.95rem;
  user-select: none;
}

.dash-user-menu-trigger::-webkit-details-marker { display: none; }

.dash-user-menu-trigger:hover,
.dash-user-menu[open] .dash-user-menu-trigger {
  border-color: var(--amber);
  color: var(--amber);
}

.dash-user-menu-panel {
  position: absolute;
  right: 0;
  top: calc(100% + 0.45rem);
  z-index: 40;
  min-width: min(22rem, 92vw);
  max-width: 26rem;
  padding: 0.85rem;
  border: 1px solid var(--border);
  background: var(--surface);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
}

.dash-widgets-panel {
  margin-top: 1rem;
}

.workos-widget-host {
  --color-background: #08090b;
}

.dash-preview-mode .workos-live-only {
  display: none;
}

.dash-preview-mode .workos-nav-org:empty {
  display: none;
}

/* Radix / WorkOS inside Hivemind chrome */
.workos-widget-host .rt-BaseCard,
.workos-widget-host .woswidgets-card {
  background: rgba(255, 255, 255, 0.02);
  border-color: var(--border);
}

.workos-widget-host .rt-Text,
.workos-widget-host .woswidgets-text {
  color: var(--text-muted);
}

/* The global `img, svg { max-width: 100% }` reset collapses icon widths
   inside content-sized widget buttons (the button sizes from the icon,
   the icon caps at the button — resolving to 0). Exempt widget SVGs,
   including portaled dropdown/popover content. */
.workos-widget-host svg,
[data-radix-popper-content-wrapper] svg {
  max-width: none;
}

/* Row-action icon buttons (e.g. the per-key ⋯ menu with Revoke) were
   invisible: the icon inherits currentColor, which lands near-black on
   the dark theme. Give them the muted/amber treatment. */
.workos-widget-host .rt-IconButton {
  color: var(--text-muted);
  opacity: 1;
}

.workos-widget-host .rt-IconButton:hover,
.workos-widget-host .rt-IconButton[data-state='open'] {
  color: var(--amber);
}

.nav-actions .woswidgets-button,
.nav-actions .rt-Button {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Radix portals (dropdowns/popovers) must clear the fixed .site-nav (z 50). */
[data-radix-popper-content-wrapper] {
  z-index: 60 !important;
}

/* Radix scroll-locks the body while a menu is open; reserving the scrollbar
   gutter stops the page from shifting when the scrollbar disappears. */
html {
  scrollbar-gutter: stable;
}

/* react-remove-scroll (Radix scroll lock) zeroes body padding while a menu
   is open, wiping the fixed-nav compensation and jolting the page up by the
   nav height. Re-assert it with higher specificity than the injected rule. */
html body[data-scroll-locked] {
  padding-top: var(--site-nav-h) !important;
}

/* The sessions widget needs more room than the old 22rem panel. */
.dash-user-menu-panel {
  min-width: min(30rem, 94vw);
  max-width: 34rem;
}

/* Placeholder shown while the profile widget is unmounted (personal
   details stay out of the DOM until SHOW DETAILS mounts the widget). */
.dash-profile-hidden {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 1.2rem 0;
  margin: 0;
}

/* SHOW IDS toggle in the account overview header. */
.dash-reveal {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: transparent;
  border: 1px solid var(--border);
  padding: 0.3rem 0.7rem;
  cursor: pointer;
  margin-right: 0.6rem;
}

.dash-reveal:hover,
.dash-reveal[aria-pressed='true'] {
  color: var(--amber);
  border-color: var(--amber);
}

/* Widget panels are grid children of .band-container-stack (label rail +
   content). Auto-placement drops the second panel into the 180px rail
   column; pin them to the last (content) column at every breakpoint. */
.band-container-stack > .dash-widgets-panel {
  grid-column: -2 / -1;
}

/* Widget islands fill their mounts and never collapse to min-content. */
.workos-widget-host .radix-themes {
  width: 100%;
  min-width: 0;
}
.workos-widget-host .rt-Flex,
.workos-widget-host .rt-Box {
  min-width: 0;
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  html { scroll-behavior: auto; }
}