/* ============================================================
   Foyer v2 — dark shell, violet accent.
   Violet has exactly two sanctioned meanings: brand (wordmark, CTA)
   and "a human must decide" (pending badge, approve). Nothing else.
   The warm peach exists once, as ambient floor light. Never on a component.
   ============================================================ */
:root {
  --page:   #08070C;
  --text:   #F2F1F6;
  --text-2: #A8A4B8;
  --text-3: #736F82;
  --hair:   rgba(255,255,255,0.09);
  --fill:   rgba(255,255,255,0.028);

  --violet:   #6C5CE7;
  --violet-2: #9B8BF5;
  --peach:    #E9B78E;

  --ok: #4FB286;
  --glow: 0 20px 48px -18px rgba(108,92,231,0.55);
}

* { box-sizing: border-box; }
html, body { overflow-x: clip; }

body {
  margin: 0; min-height: 100svh;
  font-family: "Karla", ui-sans-serif, system-ui, sans-serif;
  font-weight: 300; font-size: 15px; line-height: 1.68;
  color: var(--text-2); background: var(--page);
  -webkit-font-smoothing: antialiased;
}

/* ---------- ambient light: violet core, warm at the floor ---------- */
.glowfield { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.glowfield i { position: absolute; display: block; border-radius: 50%; filter: blur(90px); }
.g1 { width: 62vw; height: 62vw; left: -14vw; bottom: -26vw;
      background: radial-gradient(circle, rgba(108,92,231,0.58), transparent 68%); }
.g2 { width: 46vw; height: 46vw; left: 26vw; bottom: -30vw;
      background: radial-gradient(circle, rgba(233,183,142,0.34), transparent 66%); }
.g3 { width: 40vw; height: 40vw; right: -12vw; top: 4vh;
      background: radial-gradient(circle, rgba(108,92,231,0.20), transparent 70%); }

/* ---------- grain ----------
   Inline SVG turbulence as a data URI: no image file, no request. It sits
   above the glow so the light gets textured too, otherwise the gradients
   read as flat digital washes. */
/* Dot grid: a separate layer from the grain, on normal blend. Overlay would
   erase the dots exactly where they should read clearest — in the darks.
   A 26px cell with a 1px dot stays a texture rather than becoming a pattern. */
.dots {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(255,255,255,0.032) 0.5px, transparent 0.6px);
  background-size: 9px 9px;
  /* fade the grid out toward the top so the nav stays clean */
  mask-image: linear-gradient(to bottom, transparent 4%, #000 38%, #000 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 4%, #000 38%, #000 100%);
}

.grain {
  position: fixed; inset: 0; z-index: 2; pointer-events: none;
  opacity: 0.34; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 180px 180px;
}

/* ---------- nav ---------- */
.nav {
  position: relative; z-index: 5;
  display: flex; align-items: center; gap: 28px;
  padding: 22px clamp(22px, 5vw, 60px);
  max-width: 1320px; margin: 0 auto;
}
.wordmark {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: "Inter", sans-serif; font-weight: 600; font-size: 17px;
  letter-spacing: -0.024em; color: var(--text); text-decoration: none;
  margin-right: auto;
}
.mark {
  width: 28px; height: 28px; border-radius: 8px; flex: 0 0 28px;
  display: grid; place-items: center; color: #fff;
  background: linear-gradient(145deg, var(--violet), var(--violet-2));
  box-shadow: 0 8px 18px -9px rgba(108,92,231,0.85),
              inset 0 1px 0 rgba(255,255,255,0.38);
}
.navlinks { display: flex; gap: 26px; }
.navlinks a {
  font-size: 14px; color: var(--text-2); text-decoration: none;
  transition: color .18s ease;
}
.navlinks a:hover { color: var(--text); }

.cta {
  font-family: "Inter", sans-serif; font-weight: 500; font-size: 13px;
  letter-spacing: -0.006em; color: #fff; text-decoration: none; white-space: nowrap;
  padding: 8px 16px; border-radius: 9px;
  border: 1px solid rgba(255,255,255,0.16);
  background: linear-gradient(145deg, var(--violet), #5A49DC);
  box-shadow: var(--glow), inset 0 1px 0 rgba(255,255,255,0.3);
  transition: transform .18s ease;
}
.cta:hover { transform: translateY(-1px); }

@media (max-width: 1000px) { .navlinks { display: none; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }
:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 2px; border-radius: 6px; }

/* ============================================================
   HERO — copy left, live panel right (panel comes next step)
   ============================================================ */
.hero {
  position: relative; z-index: 4;
  max-width: 1320px; margin: 0 auto;
  padding: clamp(28px, 5vw, 64px) clamp(22px, 5vw, 60px) clamp(72px, 9vw, 120px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 390px);
  gap: clamp(36px, 5vw, 76px); align-items: start;
}
.hero-copy { min-width: 0; }

h1, h2 {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  color: var(--text); margin: 0;
}
h2 { text-wrap: balance; }
h1 {
  font-weight: 500; letter-spacing: -0.042em;
  font-size: clamp(37px, 5.6vw, 72px); line-height: 1.05;
  max-width: min(100%, 15ch);
}
/* the manual break is load-bearing at desktop; on narrow screens let it go */
@media (max-width: 620px) {
  h1 { text-wrap: pretty; }
  h1 br { display: none; }
}

/* the one place violet touches type: the second clause of the headline */
.tint {
  display: inline-block;
  background: linear-gradient(104deg, var(--violet-2) 8%, var(--violet) 92%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead {
  font-size: clamp(15px, 1.3vw, 16.5px); line-height: 1.72;
  color: var(--text-2); max-width: min(100%, 52ch); margin: 20px 0 0;
  text-wrap: pretty;
}

/* a live status line instead of a tracked-out caps eyebrow */
.status-line {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--text-3); margin-bottom: 22px;
}
.pulse {
  width: 6px; height: 6px; border-radius: 50%; background: var(--ok);
  box-shadow: 0 0 0 3px rgba(79,178,134,0.16);
}

.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 32px; }
.ghost {
  font-family: "Inter", sans-serif; font-weight: 500; font-size: 14px;
  color: var(--text); text-decoration: none;
  padding: 11px 21px; border-radius: 11px;
  border: 1px solid var(--hair); background: var(--fill);
  transition: border-color .18s ease, transform .18s ease;
}
.ghost:hover { border-color: rgba(255,255,255,0.22); transform: translateY(-1px); }

@media (max-width: 1000px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  h1 { max-width: min(100%, 24ch); }
}

/* ============================================================
   THE PANEL
   The shell is dark because Foyer is infrastructure — it runs in the
   background. The panel is light because what's inside it is the product:
   a neighbour's question, a donor's name, words going out in the
   nonprofit's voice. Light surface = human content.
   ============================================================ */
.panel {
  width: 100%; max-width: 390px; justify-self: end;
  margin-top: 42px;
  background: #FFFFFF; border-radius: 30px;
  box-shadow: 0 40px 90px -40px rgba(0,0,0,0.9),
              0 8px 30px -12px rgba(108,92,231,0.28);
  overflow: hidden; display: flex; flex-direction: column;
  height: 528px; min-width: 0;
}

.panel-head {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px; border-bottom: 1px solid #EDEAF2;
}
.who {
  width: 36px; height: 36px; border-radius: 11px; flex: 0 0 36px;
  display: grid; place-items: center;
  background: linear-gradient(145deg, #F0EDF9, #E8E4F4);
  font-family: "Inter", sans-serif; font-weight: 600; font-size: 12px;
  color: #6B6480;
}
.panel-head strong {
  display: block; font-family: "Inter", sans-serif; font-weight: 600;
  font-size: 14px; letter-spacing: -0.016em; color: #16141C;
}
.sub {
  font-size: 12.5px; color: #8B8598;
  display: inline-flex; align-items: center; gap: 6px;
}

.thread {
  flex: 1; min-width: 0; overflow-y: auto;
  padding: 18px; display: flex; flex-direction: column; gap: 12px;
}
.thread::-webkit-scrollbar { width: 6px; }
.thread::-webkit-scrollbar-thumb { background: #E4E0EC; border-radius: 3px; }

.msg { max-width: 85%; min-width: 0; }
.msg p, .msg ul {
  margin: 0; padding: 11px 14px; border-radius: 16px;
  font-size: 14px; line-height: 1.58; overflow-wrap: anywhere;
}
.msg.them > * { background: #F4F2F8; color: #565064; border-bottom-left-radius: 6px; }
.msg.me { align-self: flex-end; }
.msg.me > * { background: #16141C; color: #F6F5FA; border-bottom-right-radius: 6px; }
.msg > * + * { margin-top: 6px; }
.msg strong { font-weight: 600; color: #16141C; }
.msg.me strong { color: #fff; }

.msg ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.msg li { position: relative; padding-left: 15px; }
.msg li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--violet);
}

/* a queued draft reads differently from an answer — it hasn't happened yet */
.held {
  margin-top: 8px; padding: 12px 15px; border-radius: 13px;
  background: rgba(108,92,231,0.07); border: 1px solid rgba(108,92,231,0.22);
  font-size: 13.5px; line-height: 1.55; color: #5B5470;
  display: flex; gap: 9px; align-items: flex-start;
}
.held svg { flex: 0 0 15px; margin-top: 3px; color: var(--violet); }

.typing p { display: inline-flex; gap: 4px; align-items: center; }
.typing span {
  width: 5px; height: 5px; border-radius: 50%; background: #B4AFC2;
  animation: blink 1.3s infinite;
}
.typing span:nth-child(2) { animation-delay: .18s; }
.typing span:nth-child(3) { animation-delay: .36s; }
@keyframes blink { 0%,60%,100% { opacity:.28 } 30% { opacity:1 } }

.composer {
  display: flex; gap: 9px; padding: 13px 14px;
  border-top: 1px solid #EDEAF2; background: #fff;
}
.composer input {
  flex: 1; min-width: 0; font-family: inherit; font-size: 14.5px; font-weight: 400;
  color: #16141C; background: #F4F2F8;
  border: 1px solid transparent; border-radius: 999px; padding: 12px 19px;
  outline: none; transition: border-color .18s ease, background .18s ease;
}
.composer input::placeholder { color: #9B95A8; }
.composer input:focus { border-color: rgba(108,92,231,0.4); background: #fff; }
.composer button {
  width: 40px; height: 40px; flex: 0 0 40px; border: none; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer; color: #fff;
  background: linear-gradient(145deg, var(--violet), #5A49DC);
  box-shadow: 0 10px 22px -12px rgba(108,92,231,0.9),
              inset 0 1px 0 rgba(255,255,255,0.32);
  transition: transform .18s ease, opacity .18s ease;
}
.composer button:hover { transform: translateY(-1px); }
.composer button:disabled { opacity: .4; cursor: default; transform: none; }

/* suggestion chips — makes the demo repeatable without typing on camera */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 28px; max-width: 52ch; }
.chips button {
  font-family: inherit; font-size: 13px; font-weight: 400;
  color: var(--text-2); text-align: left; cursor: pointer;
  background: var(--fill); border: 1px solid var(--hair);
  border-radius: 999px; padding: 8px 15px;
  transition: color .18s ease, border-color .18s ease, transform .18s ease;
}
.chips button:hover {
  color: var(--text); border-color: rgba(255,255,255,0.2); transform: translateY(-1px);
}

@media (max-width: 1000px) { .panel { order: -1; justify-self: start; margin-top: 0; height: 520px; } }
@media (max-width: 560px) { .panel { height: 440px; border-radius: 18px; } }

/* ============================================================
   ADMIN
   The queue is the whole argument of the product, so the pending card is
   the one place on this page that carries weight. Everything else is quiet.
   ============================================================ */
.admin {
  position: relative; z-index: 4;
  max-width: 900px; margin: 0 auto;
  padding: clamp(24px, 4vw, 48px) clamp(22px, 5vw, 60px) clamp(80px, 9vw, 120px);
}
.admin-head { margin-bottom: 48px; }
.admin-head h1 {
  font-size: clamp(32px, 4vw, 50px); max-width: min(100%, 20ch);
}

.block { margin-bottom: 60px; }
.block:last-child { margin-bottom: 0; }
.block-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px; margin-bottom: 18px;
}
h2 {
  font-weight: 500; letter-spacing: -0.026em;
  font-size: clamp(20px, 2.2vw, 25px); line-height: 1.16;
}
.hint { font-size: 13px; color: var(--text-3); }
.count {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 12px;
  padding: 4px 12px; border-radius: 999px;
  background: rgba(108,92,231,0.14); color: var(--violet-2);
  border: 1px solid rgba(108,92,231,0.3);
}

.card {
  background: var(--fill); border: 1px solid var(--hair);
  border-radius: 18px; padding: 25px; margin-bottom: 16px;
}
/* violet's second meaning: a human has to decide this */
.card.pending {
  background: linear-gradient(150deg, rgba(108,92,231,0.11), rgba(108,92,231,0.03));
  border-color: rgba(108,92,231,0.34);
  box-shadow: 0 20px 48px -22px rgba(108,92,231,0.5),
              inset 0 1px 0 rgba(255,255,255,0.12);
}
.card-top {
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; margin-bottom: 16px;
}
.id {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11.5px;
  color: var(--text-3);
}
.badge { font-size: 12px; font-weight: 500; padding: 3px 11px; border-radius: 999px; }
.badge.pending  { background: rgba(108,92,231,0.16); color: var(--violet-2); }
.badge.approved { background: rgba(79,178,134,0.14); color: var(--ok); }
.badge.rejected { background: rgba(217,105,92,0.14); color: #D9695C; }

/* the reasoning sits ABOVE the draft — it's why the draft exists */
.why {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 14px 16px; margin-bottom: 16px;
  background: rgba(255,255,255,0.035); border: 1px solid var(--hair);
  border-radius: 12px; font-size: 14px; line-height: 1.62; color: var(--text-2);
}
.why svg { flex: 0 0 15px; margin-top: 4px; color: var(--violet-2); }

/* the draft goes out in the nonprofit's name, so it gets the light surface —
   it reads as the message itself, not as data about a message */
.draft {
  padding: 17px 19px; border-radius: 13px; margin-bottom: 18px;
  background: #FFFFFF; color: #565064;
  font-size: 14.5px; line-height: 1.64;
}

.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.pill {
  font-family: "Inter", sans-serif; font-weight: 500; font-size: 14px;
  padding: 11px 22px; border-radius: 11px; cursor: pointer;
  border: 1px solid transparent;
  transition: transform .18s ease, border-color .18s ease;
}
.pill:hover { transform: translateY(-1px); }
.pill.go {
  color: #fff; background: linear-gradient(145deg, var(--violet), #5A49DC);
  border-color: rgba(255,255,255,0.16);
  box-shadow: var(--glow), inset 0 1px 0 rgba(255,255,255,0.3);
}
.pill.no { color: var(--text); background: var(--fill); border-color: var(--hair); }
.pill.no:hover { border-color: rgba(255,255,255,0.24); }

/* an empty queue is the product working, not a failure — say so */
.empty {
  padding: 28px; text-align: center; font-size: 14px; color: var(--text-3);
  border: 1px dashed var(--hair); border-radius: 15px; margin: 0;
}

.log {
  border: 1px solid var(--hair); border-radius: 16px;
  background: var(--fill); overflow: hidden;
}
.row {
  display: grid; grid-template-columns: minmax(0, 132px) minmax(0, 1fr);
  gap: 20px; padding: 16px 21px; border-bottom: 1px solid var(--hair);
}
.row:last-child { border-bottom: none; }
.when {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11.5px;
  color: var(--text-3); min-width: 0;
}
.what { min-width: 0; font-size: 14px; color: var(--text-2); }
.what strong {
  display: block; font-family: "Inter", sans-serif; font-weight: 500;
  font-size: 14.5px; color: var(--text); letter-spacing: -0.01em;
}
.actor {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px;
  color: var(--text-3); margin-top: 3px;
}

@media (max-width: 560px) { .row { grid-template-columns: minmax(0, 1fr); gap: 5px; } }

/* ============================================================
   SECTIONS
   The glowfield is fixed, so bands can't alternate hard backgrounds.
   Each band carries a faint wash instead — enough tonal seam to separate
   them without a divider line.
   ============================================================ */
.band {
  position: relative; z-index: 4;
  padding: clamp(76px, 9vw, 132px) clamp(22px, 5vw, 60px);
}
.band.tinted {
  background: rgba(255,255,255,0.014);
  border-top: 1px solid var(--hair);
  border-bottom: 1px solid var(--hair);
}
.band-inner { max-width: 1160px; margin: 0 auto; }
.band-head { max-width: none; margin-bottom: clamp(40px, 4.5vw, 60px); }
.band-head .lead { max-width: min(100%, 52ch); }

.band h2 {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-weight: 500; letter-spacing: -0.038em;
  font-size: clamp(30px, 4.4vw, 58px); line-height: 1.06;
  color: var(--text); margin: 0; max-width: none;
  text-wrap: balance;
}
.band h3 {
  font-family: "Inter", ui-sans-serif, system-ui, sans-serif;
  font-weight: 500; letter-spacing: -0.018em;
  font-size: 19px; line-height: 1.24; color: var(--text); margin: 0;
}

/* ---------- card grid ---------- */
.duo {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 18px;
}

/* Glass card: a low-alpha white wash, not a solid panel, so the glowfield
   reads through it. The inset top-edge highlight is what sells the glass —
   without it the card reads flat. */
.tile {
  min-width: 0; padding: 28px; border-radius: 18px;
  background: linear-gradient(150deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018));
  border: 1px solid var(--hair);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 24px 56px -32px rgba(0,0,0,0.8),
              inset 0 1px 0 rgba(255,255,255,0.09);
}
.tile-icon {
  width: 44px; height: 44px; border-radius: 13px;
  display: grid; place-items: center; margin-bottom: 20px;
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  color: var(--text-2);
}
.tile h3 { margin-bottom: 10px; }
.tile p { margin: 0; font-size: 14.5px; line-height: 1.68; color: var(--text-2); }
.tile p + p { margin-top: 12px; }

/* a stated fact from the real demo data, not an invented statistic */
.evidence {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--hair);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px; line-height: 1.6; color: var(--text-3);
}

/* ---------- scroll reveal ---------- */
.reveal {
  opacity: 0; transform: translateY(24px) scale(0.99);
  transition: opacity .7s cubic-bezier(.22,1,.36,1) var(--d, 0ms),
              transform .7s cubic-bezier(.22,1,.36,1) var(--d, 0ms);
}
.reveal.seen { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
}

/* ---------- numbered flow ----------
   A real sequence, so it gets numbers. Step 3 is the only one that carries
   the accent, because it's the only one where a human enters the loop. */
.flow { display: flex; flex-direction: column; gap: 14px; }

.step {
  display: grid; grid-template-columns: 46px minmax(0, 1fr);
  gap: 22px; align-items: start;
  padding: 26px 28px; border-radius: 18px;
  background: linear-gradient(150deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018));
  border: 1px solid var(--hair);
  backdrop-filter: blur(18px) saturate(140%);
  box-shadow: 0 24px 56px -32px rgba(0,0,0,0.8),
              inset 0 1px 0 rgba(255,255,255,0.09);
}
.step-n {
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center;
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 14px;
  color: var(--text-3);
  background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
}
.step h3 { margin-bottom: 9px; }
.step p { margin: 0; font-size: 14.5px; line-height: 1.68; color: var(--text-2); }

/* the gate: the one step where a human decides, so the one step in violet */
.step.gate {
  background: linear-gradient(150deg, rgba(108,92,231,0.13), rgba(108,92,231,0.035));
  border-color: rgba(108,92,231,0.34);
  box-shadow: 0 24px 60px -30px rgba(108,92,231,0.55),
              inset 0 1px 0 rgba(255,255,255,0.12);
}
.step.gate .step-n {
  color: #fff; border-color: rgba(255,255,255,0.2);
  background: linear-gradient(145deg, var(--accent, #6C5CE7), #5A49DC);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.3);
}

/* the tool names each agent actually has — concrete beats adjectives */
.tools {
  display: flex; flex-wrap: wrap; gap: 7px; margin-top: 14px;
}
.tools code {
  font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11.5px;
  color: var(--text-3); padding: 5px 11px; border-radius: 7px;
  background: rgba(255,255,255,0.04); border: 1px solid var(--hair);
}

@media (max-width: 620px) {
  .step { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 22px; }
}

/* ============================================================
   TRIO — three glass cards, each showing the surface it describes.
   The mock is the argument; the copy underneath is the caption.
   ============================================================ */
.trio {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr));
  gap: 18px;
}
.slab {
  display: flex; flex-direction: column; min-width: 0;
  border-radius: 20px; padding: 26px;
  background: linear-gradient(155deg, rgba(255,255,255,0.05), rgba(255,255,255,0.014));
  border: 1px solid var(--hair);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 28px 64px -34px rgba(0,0,0,0.85),
              inset 0 1px 0 rgba(255,255,255,0.1);
}
/* the mock sits in its own well so it reads as a screen, not decoration */
.stage {
  flex: 1; min-height: 268px; margin-bottom: 26px;
  display: flex; flex-direction: column; gap: 9px; justify-content: center;
}
.slab-label {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 11px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: 0.04em; color: var(--text-3);
}
.slab-label svg { color: var(--text-3); }
.slab p {
  margin: 0; font-size: 14.5px; line-height: 1.66; color: var(--text-2);
}

/* ---- mock primitives ---- */
.m-bubble {
  font-size: 12.5px; line-height: 1.5; padding: 10px 13px; border-radius: 13px;
  background: rgba(255,255,255,0.055); border: 1px solid rgba(255,255,255,0.07);
  color: var(--text-2); max-width: 88%;
}
.m-bubble.me {
  align-self: flex-end; background: rgba(255,255,255,0.11); color: var(--text);
  border-bottom-right-radius: 5px;
}
.m-bubble.them { border-bottom-left-radius: 5px; }

.m-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 14px; border-radius: 12px;
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.07);
  font-size: 12.5px; color: var(--text-2);
}
.m-row b { font-weight: 500; color: var(--text); }
.m-meta {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px; color: var(--text-3); white-space: nowrap;
}
.m-row.flagged {
  background: rgba(108,92,231,0.11); border-color: rgba(108,92,231,0.3);
}
.m-row.flagged .m-meta { color: var(--accent-2); }

.m-card {
  padding: 14px; border-radius: 13px;
  background: rgba(108,92,231,0.11); border: 1px solid rgba(108,92,231,0.32);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
}
.m-why {
  font-size: 11.5px; line-height: 1.5; color: var(--text-3);
  padding-bottom: 11px; margin-bottom: 11px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
}
.m-draft { font-size: 12.5px; line-height: 1.55; color: var(--text-2); }
.m-btns { display: flex; gap: 7px; margin-top: 13px; }
.m-btn {
  font-family: "Inter", sans-serif; font-size: 11.5px; font-weight: 500;
  padding: 7px 14px; border-radius: 8px; color: #fff;
  background: linear-gradient(145deg, var(--accent, #6C5CE7), #5A49DC);
}
.m-btn.ghost {
  background: rgba(255,255,255,0.05); color: var(--text-2);
  border: 1px solid var(--hair);
}

.m-log {
  padding: 11px 13px; border-radius: 11px;
  background: rgba(255,255,255,0.032); border: 1px solid rgba(255,255,255,0.06);
}
.m-log b {
  display: block; font-family: "Inter", sans-serif; font-weight: 500;
  font-size: 12.5px; color: var(--text); margin-bottom: 3px;
}
.m-log span { font-size: 11.5px; line-height: 1.5; color: var(--text-3); }
.m-log .m-meta { display: block; margin-top: 5px; }

/* ============================================================
   HERO PANEL — dark glass override
   Matches the trio mocks exactly (same gradient, blur and bubble alphas),
   so the live panel and the illustrated ones read as one system.
   Appended last so these win over the light-panel rules above.
   ============================================================ */
.panel {
  background: linear-gradient(155deg, rgba(255,255,255,0.05), rgba(255,255,255,0.014));
  border: 1px solid var(--hair);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 40px 90px -40px rgba(0,0,0,0.9),
              0 8px 34px -14px rgba(108,92,231,0.34),
              inset 0 1px 0 rgba(255,255,255,0.1);
}

.panel-head { border-bottom: 1px solid rgba(255,255,255,0.075); }
.panel-head strong { color: var(--text); }
.sub { color: var(--text-3); }
.who {
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
  color: var(--text-2);
}

.thread::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); }

.msg.them > * {
  background: rgba(255,255,255,0.055);
  border: 1px solid rgba(255,255,255,0.07);
  color: var(--text-2);
}
.msg.me > * {
  background: rgba(255,255,255,0.11);
  border: 1px solid rgba(255,255,255,0.09);
  color: var(--text);
}
.msg strong, .msg.me strong { color: var(--text); }
.msg li::before { background: var(--accent-2); }

.typing span { background: rgba(255,255,255,0.4); }

.composer {
  background: transparent;
  border-top: 1px solid rgba(255,255,255,0.075);
}
.composer input {
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.07);
  color: var(--text);
}
.composer input::placeholder { color: var(--text-3); }
.composer input:focus {
  background: rgba(255,255,255,0.07);
  border-color: rgba(108,92,231,0.5);
}

/* ============================================================
   TRUST — the argument section. Wider measure, quieter furniture,
   one pull-quote carrying the outside evidence.
   ============================================================ */
.argument {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px);
  gap: clamp(36px, 5vw, 72px); align-items: start;
}
.argument p {
  font-size: clamp(15.5px, 1.35vw, 17px); line-height: 1.74;
  color: var(--text-2); margin: 0 0 20px; max-width: 56ch;
}
.argument p:last-child { margin-bottom: 0; }
.argument strong { color: var(--text); font-weight: 400; }

/* the source card: evidence from outside the project, so it looks like a
   citation rather than a testimonial */
.source {
  padding: 26px; border-radius: 18px;
  background: linear-gradient(155deg, rgba(255,255,255,0.05), rgba(255,255,255,0.014));
  border: 1px solid var(--hair);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 28px 64px -34px rgba(0,0,0,0.85),
              inset 0 1px 0 rgba(255,255,255,0.1);
}
.source-tag {
  display: block; margin-bottom: 16px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.05em; color: var(--text-3);
}
.source blockquote {
  margin: 0 0 18px; font-size: 15px; line-height: 1.66; color: var(--text);
}
.source cite {
  display: block; font-style: normal; font-size: 13px; line-height: 1.6;
  color: var(--text-3);
}
.source a {
  color: var(--accent-2); text-decoration: none;
  border-bottom: 1px solid rgba(155,139,245,0.3);
}
.source a:hover { border-bottom-color: var(--accent-2); }

/* two claims, each with the mechanism that backs it */
.claims { display: grid; gap: 14px; margin-top: 44px; }
.claim {
  display: grid; grid-template-columns: 20px minmax(0, 1fr);
  gap: 16px; align-items: start;
  padding: 20px 22px; border-radius: 15px;
  background: rgba(255,255,255,0.028); border: 1px solid var(--hair);
}
.claim svg { margin-top: 3px; color: var(--accent-2); }
.claim b {
  display: block; font-family: "Inter", sans-serif; font-weight: 500;
  font-size: 15px; color: var(--text); margin-bottom: 5px;
  letter-spacing: -0.012em;
}
.claim span { font-size: 14px; line-height: 1.64; color: var(--text-2); }

@media (max-width: 900px) {
  .argument { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   CENTERED BAND — eyebrow, headline, subhead, then a split below
   ============================================================ */
.center-head { text-align: center; margin-bottom: clamp(44px, 5vw, 70px); }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11.5px; letter-spacing: 0.06em; color: var(--text-3);
}
.eyebrow::before {
  content: ""; width: 22px; height: 11px; border-radius: 999px;
  background: rgba(255,255,255,0.07); border: 1px solid var(--hair);
}
.center-head h2 { margin: 0 auto; max-width: 20ch; }
.center-head .lead {
  margin: 18px auto 0; max-width: 48ch; text-align: center;
}

.split {
  display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr);
  gap: clamp(36px, 5vw, 76px); align-items: start;
}

/* the tall visual card — the artifact itself, not an illustration */
.showcase {
  border-radius: 20px; padding: 24px; min-width: 0;
  display: flex; flex-direction: column; gap: 10px;
  background: linear-gradient(155deg, rgba(255,255,255,0.05), rgba(255,255,255,0.014));
  border: 1px solid var(--hair);
  backdrop-filter: blur(20px) saturate(140%);
  box-shadow: 0 28px 64px -34px rgba(0,0,0,0.85),
              inset 0 1px 0 rgba(255,255,255,0.1);
}
.showcase-top {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 16px; margin-bottom: 6px;
  border-bottom: 1px solid rgba(255,255,255,0.075);
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; letter-spacing: 0.05em; color: var(--text-3);
}

.split-copy p {
  font-size: clamp(15.5px, 1.35vw, 17px); line-height: 1.72;
  color: var(--text-2); margin: 0 0 34px; max-width: 48ch;
}
.split-copy strong { color: var(--text); font-weight: 400; }

.points { display: grid; gap: 26px; margin-bottom: 34px; }
.point {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 15px;
  align-items: start;
}
.point svg { margin-top: 3px; color: var(--text-2); }
.point b {
  display: block; font-family: "Inter", sans-serif; font-weight: 500;
  font-size: 16px; letter-spacing: -0.014em; color: var(--text); margin-bottom: 6px;
}
.point span { font-size: 14.5px; line-height: 1.66; color: var(--text-2); }

@media (max-width: 900px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .center-head h2 { max-width: 100%; }
}

/* ---------- alignment pass ----------
   One left edge for the whole right column: intro paragraph, point titles and
   point descriptions all start at the same x. The icon sits inline with its
   title rather than in its own grid track, which was creating a second edge. */
.split { align-items: stretch; }
.showcase { justify-content: flex-start; }

.split-copy { display: flex; flex-direction: column; }

.point { display: block; }
.point-head {
  display: flex; align-items: center; gap: 11px; margin-bottom: 8px;
}
.point-head svg { flex: 0 0 auto; margin-top: 0; color: var(--text-2); }
.point-head b { margin-bottom: 0; }
.point span { display: block; }

/* button drops to the bottom so it lines up with the base of the log card */
.split-copy > .ghost { margin-top: auto; align-self: flex-start; }
.points { margin-bottom: 34px; }

/* ---------- reference-tight typography ----------
   No mid-paragraph emphasis: the reference holds one weight through the prose
   and lets the point titles carry all the hierarchy. Descriptions indent under
   their title, not under the icon — the icon column is a margin, not an edge.
   Narrow measure so nothing runs past three lines. */
.split-copy p {
  font-size: 16.5px; line-height: 1.62; max-width: 38ch; margin-bottom: 44px;
}
.split-copy strong { color: inherit; font-weight: inherit; }

.points { gap: 30px; margin-bottom: 40px; }
.point {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 14px;
  align-items: start;
}
.point-head { display: contents; }          /* undo the inline-title change */
.point svg { margin-top: 2px; }
.point b {
  font-size: 16.5px; line-height: 1.4; margin-bottom: 4px;
  letter-spacing: -0.012em;
}
.point span {
  display: block; font-size: 15px; line-height: 1.58;
  color: var(--text-3); max-width: 34ch;
}

/* ============================================================
   CLOSING + FOOTER
   ============================================================ */
.closing { text-align: center; }
.closing h2 { margin: 0 auto 20px; max-width: 18ch; }
.closing .lead { margin: 0 auto 34px; max-width: 46ch; }
.closing-actions {
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}

.foot {
  position: relative; z-index: 4;
  border-top: 1px solid var(--hair);
  padding: 34px clamp(22px, 5vw, 60px);
}
.foot-inner {
  max-width: 1160px; margin: 0 auto;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.foot .wordmark { margin-right: auto; font-size: 15px; }
.foot .mark { width: 24px; height: 24px; flex: 0 0 24px; border-radius: 7px; }
.foot-links { display: flex; gap: 22px; flex-wrap: wrap; }
.foot-links a {
  font-size: 13.5px; color: var(--text-3); text-decoration: none;
  transition: color .18s ease;
}
.foot-links a:hover { color: var(--text); }
.foot-note {
  max-width: 1160px; margin: 22px auto 0;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px; line-height: 1.7; color: var(--text-3);
}

/* ---------- brand mark ----------
   The glyph carries the brand now, so the tile behind it steps back to plain
   glass. A violet tile under a violet glyph would double the accent inside
   one 28px square. */
.mark {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.14);
  color: var(--violet-2);
  padding: 5px;
}
.mark svg { width: 100%; height: 100%; display: block; }
.foot .mark { padding: 4px; }