/* Force dark scheme — prevents iOS Safari / embedded webviews from
   auto-inverting or rendering backgrounds with light defaults */
:root { color-scheme: dark; }
html { background-color: #0a0a12 !important; }
body { background-color: #0a0a12 !important; }
/* ═══ DESIGN TOKENS ═══ */
:root {
  --ink: #0a0a12; --ink-2: #151520; --ink-3: #1f1f2e; --ink-4: #2a2a3e;
  --text: #f5f2ec; --text-muted: #8c8a9e; --text-faint: #4a4860;
  --pink: #ff5e84; --purple: #a855f7; --mint: #22e6a8; --mint-deep: #0fb88a;
  --amber: #fbbf24; --teal: #00d4d6; --rose: #ef4444;
  --grad: linear-gradient(90deg, #ff5e84 0%, #a855f7 100%);
  --grad-wide: linear-gradient(90deg, #ff5e84 0%, #a855f7 50%, #22e6a8 100%);
  --grad-hero: linear-gradient(90deg, #ff5e84 0%, #d946ef 35%, #a855f7 70%, #ff5e84 100%);
  --grad-mint: linear-gradient(135deg, #22e6a8 0%, #0fb88a 100%);
  --grad-team: linear-gradient(135deg, #a855f7 0%, #00d4d6 100%);
  --glow-pink: 0 0 40px rgba(255,94,132,0.35);
  --glow-mint: 0 0 40px rgba(34,230,168,0.35);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body {
  background: var(--ink); color: var(--text);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden; min-height: 100vh;
}
/* When a flow-mode stage is active, body needs to scroll naturally */
body.flow-active { overflow-y: auto; }
/* Hide the top-bar's brand on the app stage — brand moves into the tab nav */
body.app-active .top-bar { display: none; }
/* App stage has no top padding — tab bar IS the top chrome */
body.app-active .stage.flow-mode { padding-top: 0; padding-left: 0; padding-right: 0; }
body.app-active .app-shell { padding: 0 24px 40px; }
body { position: relative; }
body::before {
  content: ''; position: fixed; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><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.03 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  opacity: 0.4; pointer-events: none; z-index: 1;
  /* NOTE: mix-blend-mode removed — on mobile Safari, 'overlay' mode with
     a transparent noise texture can cause the underlying page to render
     as white. The noise is subtle enough without blending. */
}
.ambient-glow { position: fixed; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(120px); pointer-events: none; z-index: 0; opacity: 0.25; }
.ambient-glow.g1 { background: radial-gradient(circle, var(--pink) 0%, transparent 60%); top: -20vmax; left: -20vmax; animation: drift1 25s ease-in-out infinite; }
.ambient-glow.g2 { background: radial-gradient(circle, var(--purple) 0%, transparent 60%); bottom: -20vmax; right: -20vmax; animation: drift2 30s ease-in-out infinite; }
.ambient-glow.g3 { background: radial-gradient(circle, var(--mint) 0%, transparent 60%); top: 40%; left: 60%; opacity: 0.12; animation: drift3 40s ease-in-out infinite; }
@keyframes drift1 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(10vw,5vh); } }
@keyframes drift2 { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-8vw,-10vh); } }
@keyframes drift3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-15vw,10vh) scale(1.2); } }

/* Stage layout — two modes:
   (1) .stage — default: fixed + flex-centred. Good for short content (hero, Qs).
   (2) .stage.flow-mode — normal document flow, scrolls from the top.
       Used for tall content like the confirmation page. */
.stage {
  position: fixed; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 40px 24px;
  z-index: 10;
  opacity: 0; pointer-events: none;
  transition: opacity 0.5s cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
}
.stage.active { opacity: 1; pointer-events: auto; }

/* Flow mode — for content-heavy stages that need to scroll naturally from the top */
.stage.flow-mode {
  position: absolute;
  inset: 0 0 auto 0;
  min-height: 100vh;
  justify-content: flex-start;
  padding: 96px 24px 60px;
}
.stage.flow-mode:not(.active) {
  display: none;
}

/* Top bar */
.top-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 32px;
  background: transparent;
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  pointer-events: none;
}
.top-bar > * { pointer-events: auto; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text); }
.brand-logo { height: 32px; width: auto; display: block; flex-shrink: 0; }
.brand-divider { display: none; }
.brand-event {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  white-space: nowrap;
  line-height: 1;
  /* The AutoEvent SVG has whitespace above and below the wordmark glyphs;
     the chip's text caps sit higher than the wordmark's optical centre.
     Push the chip down a hair to align visually. */
  padding-top: 3px;
}
/* Legacy brand-mark + brand-text — kept for any view that still renders them.
   The top-bar uses .brand-logo / .brand-divider / .brand-event now. */
.brand-mark { width: 28px; height: 28px; border-radius: 8px; background: var(--grad); position: relative; box-shadow: var(--glow-pink); flex-shrink: 0; }
.brand-mark::after { content: ''; position: absolute; inset: 4px; background: var(--ink); border-radius: 4px; }
.brand-mark::before { content: ''; position: absolute; inset: 8px; background: var(--grad); border-radius: 2px; z-index: 1; }
.brand-text { font-family: 'Fraunces', serif; font-size: 18px; font-weight: 500; letter-spacing: -0.01em; }
.brand-text em { font-style: italic; font-variation-settings: 'SOFT' 60; color: var(--text-muted); }
.progress-indicator { display: none; gap: 6px; align-items: center; }
.progress-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ink-3); transition: all 0.4s cubic-bezier(.4,0,.2,1); }
.progress-dot.done { background: var(--mint); box-shadow: 0 0 8px rgba(34,230,168,0.6); }
.progress-dot.current { background: var(--pink); box-shadow: 0 0 10px rgba(255,94,132,0.7); width: 24px; border-radius: 3px; }
.top-bar-right {
  display: flex;
  align-items: center;
  gap: 22px;
}
.top-bar-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s;
}
.top-bar-link:hover { color: var(--mint); }
.login-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  box-sizing: border-box;
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08) 0%, rgba(255,255,255,0.03) 50%, rgba(255,255,255,0.06) 100%),
    rgba(15,18,28,0.50);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 100px;
  padding: 0 22px 0 18px;
  text-decoration: none;
  cursor: pointer;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(255,255,255,0.04),
    0 6px 22px rgba(0,0,0,0.30);
  transition: border-color 0.2s, background 0.2s, transform 0.2s, box-shadow 0.2s;
  white-space: nowrap;
}
.login-btn svg {
  color: var(--text);
  opacity: 0.92;
  transition: transform 0.2s, opacity 0.2s;
}
.login-btn:hover {
  border-color: rgba(255,255,255,0.40);
  background:
    linear-gradient(135deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0.05) 50%, rgba(255,255,255,0.10) 100%),
    rgba(15,18,28,0.55);
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.18),
    inset 0 -1px 0 rgba(255,255,255,0.05),
    0 10px 30px rgba(0,0,0,0.35);
}
.login-btn:hover svg {
  opacity: 1;
  transform: translateX(2px);
}
.login-overlay { position: fixed; inset: 0; background: rgba(10,10,18,0.7); backdrop-filter: blur(4px); z-index: 1000; display: flex; align-items: flex-start; justify-content: flex-end; padding: 72px 24px 0; }
.login-overlay[hidden] { display: none; }
.login-card { background: var(--surface); border: 1px solid var(--ink-3); border-radius: 14px; padding: 28px; width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 16px; }
.login-card-title { font-family: 'Fraunces', serif; font-size: 20px; color: var(--text); font-weight: 600; margin: 0; }
.login-card-sub { font-size: 13.5px; color: var(--text-muted); margin: 0; line-height: 1.5; }
.login-card-input { background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 8px; padding: 11px 14px; font-size: 14px; color: var(--text); font-family: inherit; width: 100%; box-sizing: border-box; }
.login-card-input:focus { outline: none; border-color: var(--mint); }
.login-card-actions { display: flex; gap: 10px; align-items: center; }
.login-card-submit { background: var(--grad); border: none; border-radius: 8px; padding: 11px 20px; font-size: 14px; font-weight: 600; color: #fff; font-family: inherit; cursor: pointer; flex: 1; }
.login-card-cancel { background: none; border: none; font-size: 13px; color: var(--text-muted); cursor: pointer; font-family: inherit; padding: 0; }
.login-card-cancel:hover { color: var(--text); }
.login-card-msg { font-size: 13px; line-height: 1.5; margin: 0; }
.login-card-msg.success { color: var(--mint); }
.login-card-msg.error { color: var(--pink); }

/* Hero */
.hero-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 28px; padding: 8px 16px; border: 1px solid var(--ink-3); border-radius: 100px; background: rgba(255,255,255,0.02); backdrop-filter: blur(10px); }
.hero-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px var(--mint); animation: pulse 2s ease-in-out infinite; }

.hero-brand-lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  margin-bottom: 36px;
}
.hero-brand-wordmark {
  position: relative;
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(15px, 1.6vw, 17px);
  font-weight: 700;
  letter-spacing: 0.22em;
  line-height: 1;
  color: var(--mint);
  text-align: center;
  text-transform: uppercase;
  min-height: 40px;
  box-sizing: border-box;
  padding: 0 26px;
  border: 1px solid rgba(34,230,168,0.25);
  border-radius: 100px;
  background:
    linear-gradient(135deg, rgba(34,230,168,0.10) 0%, rgba(255,255,255,0.04) 50%, rgba(168,85,247,0.08) 100%),
    rgba(15,18,28,0.55);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.10),
    inset 0 -1px 0 rgba(255,255,255,0.04),
    0 8px 28px rgba(0,0,0,0.35),
    0 0 24px rgba(34,230,168,0.10);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.hero-brand-wordmark em {
  font-style: normal;
  color: var(--mint);
  font-weight: 700;
}
.hero-brand-free {
  color: var(--text);
  font-weight: 700;
}
.hero-feature-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--text-muted);
}
.hero-feature-strip-dot {
  color: var(--mint);
  opacity: 0.6;
}
@media (max-width: 640px) {
  .hero-feature-strip { font-size: 10px; gap: 6px 10px; letter-spacing: 0.16em; margin-top: 12px; }
}
.hero-brand-dot {
  display: inline-block;
  color: var(--text-faint);
  font-style: normal;
  font-weight: 400;
  letter-spacing: 0;
}
.hero-brand-joining {
  margin-top: 16px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mint);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
@media (max-width: 600px) {
  .hero-brand-lockup { margin-bottom: 28px; }
  .hero-brand-wordmark { font-size: 12px; letter-spacing: 0.18em; padding: 0 18px; gap: 10px; min-height: 38px; }
  .login-btn { font-size: 13px; padding: 0 18px 0 14px; gap: 8px; min-height: 38px; }
  .login-btn svg { width: 14px; height: 14px; }
  .hero-brand-joining { font-size: 10px; letter-spacing: 0.18em; margin-top: 12px; }
}
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(1.3); } }
.hero-title { font-family: 'Fraunces', serif; font-size: clamp(42px,7vw,84px); font-weight: 400; line-height: 1.02; letter-spacing: -0.025em; text-align: center; max-width: 980px; margin-bottom: 32px; font-variation-settings: 'SOFT' 30; text-wrap: balance; color: var(--text); }
.hero-title em { font-style: italic; font-variation-settings: 'SOFT' 80; background: var(--grad-hero); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradient-shift 8s ease-in-out infinite; }
@keyframes gradient-shift { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.hero-sub { font-size: clamp(17px,2vw,21px); color: var(--text-muted); text-align: center; max-width: 560px; line-height: 1.55; margin-bottom: 36px; font-weight: 400; text-wrap: pretty; }
.hero-sub strong { color: var(--text); font-weight: 600; }
.cta-primary { position: relative; display: inline-flex; align-items: center; gap: 14px; background: var(--grad); color: white; font-family: 'IBM Plex Sans', sans-serif; font-size: 18px; font-weight: 700; padding: 20px 36px; border: none; border-radius: 14px; cursor: pointer; letter-spacing: -0.01em; box-shadow: var(--glow-pink), 0 10px 30px rgba(0,0,0,0.3); transition: transform 0.2s cubic-bezier(.4,0,.2,1), box-shadow 0.2s; overflow: hidden; z-index: 1; }
.cta-secs { font-weight: 500; opacity: 0.75; font-size: 0.92em; letter-spacing: 0; margin-left: -4px; }
.cta-primary::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,transparent,rgba(255,255,255,0.25),transparent); transform: translateX(-100%); transition: transform 0.6s cubic-bezier(.4,0,.2,1); z-index: -1; }
.cta-primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 0 60px rgba(255,94,132,0.5), 0 15px 40px rgba(0,0,0,0.4); }
.cta-primary:hover::before { transform: translateX(100%); }
.cta-primary:active { transform: translateY(0) scale(0.99); }
.cta-primary svg { transition: transform 0.2s; }
.cta-primary:hover svg { transform: translateX(4px); }
.hero-footnote { margin-top: 28px; font-size: 15px; color: var(--mint); font-weight: 600; display: flex; gap: 32px; flex-wrap: wrap; justify-content: center; }
.hero-footnote span { display: flex; align-items: center; gap: 10px; }
.hero-footnote svg { width: 18px; height: 18px; color: var(--mint); flex-shrink: 0; }

/* Questions */
.q-container { width: 100%; max-width: 720px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.q-number { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; display: flex; align-items: center; gap: 12px; }
.q-progress { display: flex; gap: 4px; flex: 1; max-width: 140px; }
.q-progress-seg { flex: 1; height: 4px; background: rgba(255,255,255,0.14); border-radius: 2px; transition: background 0.4s, box-shadow 0.4s; }
.q-progress-seg.done { background: var(--grad); }
.q-progress-seg.current { background: var(--grad); box-shadow: 0 0 10px rgba(255,94,132,0.45); }
.q-title { font-family: 'Fraunces', serif; font-size: clamp(32px,5vw,52px); font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; color: var(--text); font-variation-settings: 'SOFT' 40; }
.q-title em { font-style: italic; font-variation-settings: 'SOFT' 90; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.q-title .optional-tag {
  display: inline-block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-faint);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  vertical-align: middle;
  margin-left: 12px;
  padding: 4px 10px;
  border: 1px solid var(--ink-3);
  border-radius: 100px;
  background: var(--ink-2);
  font-style: normal;
}
.q-sub { font-size: 16px; color: var(--text-muted); max-width: 540px; }

.options { display: flex; flex-direction: column; gap: 12px; }
.option { display: flex; align-items: center; gap: 16px; padding: 20px 24px; background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 14px; cursor: pointer; transition: all 0.2s cubic-bezier(.4,0,.2,1); color: var(--text); font-size: 17px; font-weight: 500; text-align: left; font-family: inherit; width: 100%; }
.option:hover { border-color: var(--pink); background: rgba(255,94,132,0.06); transform: translateX(4px); }
.option.selected { border-color: var(--mint); background: rgba(34,230,168,0.08); box-shadow: var(--glow-mint); }
.option-letter { font-family: 'JetBrains Mono', monospace; font-size: 12px; width: 26px; height: 26px; border-radius: 6px; background: var(--ink); border: 1px solid var(--ink-3); display: flex; align-items: center; justify-content: center; color: var(--text-muted); flex-shrink: 0; transition: all 0.2s; }
.option:hover .option-letter { border-color: var(--pink); color: var(--pink); }
.option.selected .option-letter { border-color: var(--mint); color: var(--mint); background: rgba(34,230,168,0.1); }
.option-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--ink);
  border: 1px solid var(--ink-3);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: all 0.2s;
}
.option-icon svg { width: 22px; height: 22px; }
.option:hover .option-icon { border-color: var(--pink); color: var(--pink); background: rgba(255,94,132,0.06); }
.option.selected .option-icon {
  border-color: var(--mint);
  color: var(--mint);
  background: rgba(34,230,168,0.14);
  box-shadow: 0 0 22px rgba(34,230,168,0.30);
}
.option-label { flex: 1; }
.option-hint { font-size: 13px; color: var(--text-muted); font-weight: 400; margin-top: 2px; }
.option-check { width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--ink-3); display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: all 0.2s; }
.option.selected .option-check { border-color: var(--mint); background: var(--mint); }
.option.selected .option-check svg { opacity: 1; transform: scale(1); }
.option-check svg { opacity: 0; transform: scale(0.6); transition: all 0.2s cubic-bezier(.4,0,.2,1); color: var(--ink); }

/* Time-slot grid — 3-column tile layout (Wed / Thu × AM / PM / Full) */
.time-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  max-width: 720px;
}
.time-tile {
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 14px;
  padding: 18px 18px 16px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(.4,0,.2,1);
  text-align: left;
  font-family: inherit;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 8px;
  position: relative;
}
.time-tile:hover {
  border-color: var(--pink);
  background: rgba(255,94,132,0.06);
  transform: translateY(-2px);
}
.time-tile.selected {
  border-color: var(--mint);
  background: rgba(34,230,168,0.08);
  box-shadow: var(--glow-mint);
}
.time-tile-daypill {
  display: inline-block;
  align-self: flex-start;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mint);
  background: rgba(34,230,168,0.14);
  padding: 4px 9px;
  border-radius: 5px;
  line-height: 1;
}
.time-tile.selected .time-tile-daypill {
  color: var(--ink);
  background: var(--mint);
}
.time-tile-period {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.1;
  margin-top: 2px;
}
.time-tile-hours {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 2px;
}
.time-tile::after {
  content: '';
  position: absolute;
  top: 12px;
  right: 12px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--ink-3);
  transition: all 0.2s cubic-bezier(.4,0,.2,1);
}
.time-tile.selected::after {
  background: var(--mint);
  border-color: var(--mint);
  box-shadow: 0 0 8px rgba(34,230,168,0.6);
}
.time-tile.selected::before {
  content: '';
  position: absolute;
  top: 16px;
  right: 16px;
  width: 8px;
  height: 4px;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(-45deg);
  z-index: 2;
}
@media (max-width: 720px) {
  .time-grid { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(3, auto); grid-auto-flow: column; gap: 10px; }
  .time-tile { padding: 14px 14px 12px; }
  .time-tile-period { font-size: 18px; }
  .time-tile-hours { font-size: 12px; }
  .time-tile-daypill { font-size: 9px; padding: 3px 7px; }
}

/* Tag pills (role + problem prompts + quirk prompts) */
.tag-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.tag-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 18px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 100px;
  color: var(--text);
  font-family: inherit; font-size: 15px; font-weight: 500;
  cursor: pointer; transition: all 0.15s;
}
.tag-pill:hover { border-color: var(--pink); background: rgba(255,94,132,0.06); transform: translateY(-1px); }
.tag-pill.selected { border-color: var(--mint); background: rgba(34,230,168,0.1); color: var(--mint); box-shadow: var(--glow-mint); }
.tag-pill.selected::before { content: '✓'; font-size: 12px; }

/* ═══ CHUNK 1 FIX: "Stuck? Try" now prominent ═══ */
.prompt-section {
  margin-top: 20px;
  padding: 18px;
  background: rgba(34,230,168,0.04);
  border: 1px dashed rgba(34,230,168,0.3);
  border-radius: 14px;
}
.prompt-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.prompt-section-header-label {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
}
.prompt-section-header-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.prompt-chip {
  font-family: inherit; font-size: 13px;
  padding: 8px 14px;
  background: var(--ink-2);
  border: 1px solid rgba(34,230,168,0.3);
  color: var(--text);
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.15s;
  font-weight: 500;
}
.prompt-chip:hover { background: rgba(34,230,168,0.1); border-color: var(--mint); color: var(--mint); transform: translateY(-1px); }
.prompt-chip.added { background: rgba(34,230,168,0.15); border-color: var(--mint); color: var(--mint); }
.prompt-chip.added::before { content: '✓ '; font-weight: 700; }

/* Chunk 18: Mobile/desktop copy toggles */
.mobile-only { display: none; }
.desktop-only { display: inline; }

/* Chunk 17: Mobile-optimised onboarding — sticky CTA bar + smaller chips */
@media (max-width: 640px) {
  /* Utility: show one version of copy per viewport */
  .mobile-only { display: inline; }
  .desktop-only { display: none; }
  /* Slightly smaller title so the textarea is closer to the fold */
  .q-title { font-size: clamp(26px, 6vw, 34px); }
  .q-sub { font-size: 14px; }
  /* Shorter textarea on mobile so tags are visible without scrolling */
  .text-input { min-height: 80px; font-size: 16px; padding: 14px 16px; }
  /* Tighten section padding + margins so chips sit close to the textarea */
  .prompt-section {
    margin-top: 10px;
    padding: 12px;
  }
  .prompt-section-header { margin-bottom: 10px; gap: 8px; }
  .prompt-section-header-label { font-size: 13px; line-height: 1.3; }
  .prompt-section-header-hint { font-size: 9px; }
  /* Smaller prompt chips so at least 2 fit per row on phones */
  .prompt-chip {
    font-size: 12px;
    padding: 5px 10px;
  }
  .tag-grid { gap: 6px; }
  /* Tighten the char-count meta line */
  .input-meta { margin-top: 4px; font-size: 10px; }
  /* Pin q-actions to the bottom of the viewport on mobile — full-bleed */
  .stage.flow-mode .q-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 20px 24px;
    background: linear-gradient(180deg, rgba(10,10,18,0) 0%, var(--ink) 30%, var(--ink) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    margin-top: 0;
    z-index: 50;
    justify-content: space-between;
    gap: 12px;
  }
  .stage.flow-mode .q-actions .btn-next {
    flex: 1;
    justify-content: center;
    padding: 14px 22px;
    font-size: 15px;
  }
  .stage.flow-mode .q-actions .btn-back {
    font-size: 13px;
    padding: 10px 14px;
  }
  /* Hide the keyboard shortcut hint on mobile — no keyboard */
  .stage.flow-mode .q-actions .keybind { display: none; }
  /* Give the q-container breathing room at the bottom so sticky bar doesn't cover content */
  .stage.flow-mode .q-container {
    padding-bottom: 100px;
  }
}

.text-input-wrap { background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 14px; padding: 0; transition: all 0.2s; }
.text-input-wrap:focus-within { border-color: var(--pink); box-shadow: 0 0 0 4px rgba(255,94,132,0.12); }
.text-input { width: 100%; background: transparent; border: none; color: var(--text); font-family: 'IBM Plex Sans', sans-serif; font-size: 18px; padding: 22px 22px 22px 22px; outline: none; line-height: 1.5; resize: none; min-height: 120px; display: block; box-sizing: border-box; }
.text-input.short { min-height: 64px; }
.text-input::placeholder { color: var(--text-faint); }

.text-input-hint { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--text-faint); letter-spacing: 0.08em; text-transform: uppercase; margin-top: 8px; display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.char-progress { flex: 1; max-width: 180px; height: 3px; background: var(--ink-3); border-radius: 100px; overflow: hidden; position: relative; }
.char-progress-fill { height: 100%; width: 0; background: var(--amber); border-radius: 100px; transition: width 0.3s cubic-bezier(.4,0,.2,1), background 0.3s; }
.char-progress-fill.ok { background: var(--mint); }
.text-input-hint .count.ok { color: var(--mint); }
.min-note { color: var(--text-muted); font-size: 10px; }
.min-note.ok { color: var(--mint); }

.q-actions { display: flex; align-items: center; gap: 16px; margin-top: 16px; flex-wrap: wrap; }

/* Pin q-actions to the bottom of the viewport on all screens when in flow-mode.
   Uses position: fixed (not sticky) because flow-mode stages are absolute-positioned
   with no scroll container — sticky has nothing to anchor to. Fixed always works. */
.stage.flow-mode .q-actions {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 18px 32px 22px;
  background: linear-gradient(180deg, rgba(10,10,18,0) 0%, rgba(10,10,18,0.92) 30%, var(--ink) 100%);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  margin-top: 0;
  z-index: 30;
  max-width: none;
  justify-content: center;
  gap: 16px;
}
/* Give the scrolling content room so the fixed bar doesn't cover the last item */
.stage.flow-mode .q-container {
  padding-bottom: 110px;
}
.btn-next { background: var(--grad); color: white; font-family: inherit; font-size: 16px; font-weight: 700; padding: 16px 32px; border: none; border-radius: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; transition: all 0.2s; box-shadow: 0 8px 24px rgba(255,94,132,0.35); }
.btn-next:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 0 40px rgba(255,94,132,0.5), 0 10px 30px rgba(0,0,0,0.3); }
.btn-next:disabled { opacity: 0.4; cursor: not-allowed; box-shadow: none; }
.btn-next .keybind { font-family: 'JetBrains Mono', monospace; font-size: 10px; padding: 3px 6px; background: rgba(255,255,255,0.18); border-radius: 4px; letter-spacing: 0.05em; }
.btn-skip { background: transparent; border: 1px solid var(--ink-3); color: var(--text-muted); font-family: inherit; font-size: 14px; padding: 14px 20px; border-radius: 10px; cursor: pointer; transition: all 0.15s; }
.btn-skip:hover { border-color: var(--ink-4); color: var(--text); }
.btn-back { background: none; border: none; color: var(--text-muted); font-family: inherit; font-size: 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px; border-radius: 8px; transition: color 0.15s; }
.btn-back:hover { color: var(--text); }

/* Reveal */
.reveal-container { width: 100%; max-width: 900px; text-align: center; position: relative; }
.reveal-status { font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mint); margin-bottom: 16px; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 20px; }
.reveal-status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 12px var(--mint); animation: pulse 1s ease-in-out infinite; }
.reveal-title { font-family: 'Fraunces', serif; font-size: clamp(32px,5vw,52px); font-weight: 400; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 40px; font-variation-settings: 'SOFT' 60; }
.reveal-title em { font-style: italic; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ticker-window { height: 240px; position: relative; overflow: hidden; margin-bottom: 36px; mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 20%, black 80%, transparent 100%); }
.ticker-track { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 10px; animation: ticker-scroll 6s linear infinite; }
@keyframes ticker-scroll { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } }
.ticker-item { display: grid; grid-template-columns: auto 1fr auto auto; gap: 16px; align-items: center; padding: 14px 20px; background: var(--ink-2); border: 1px solid var(--ink-3); border-radius: 10px; text-align: left; font-size: 14px; }
.ticker-theatre { font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.1em; color: var(--text-muted); text-transform: uppercase; }
.ticker-title { color: var(--text); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ticker-speaker { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.ticker-score { font-family: 'JetBrains Mono', monospace; font-size: 11px; padding: 3px 8px; border-radius: 100px; background: rgba(34,230,168,0.1); color: var(--mint); border: 1px solid rgba(34,230,168,0.25); white-space: nowrap; }
.ticker-score.mid { background: rgba(251,191,36,0.1); color: var(--amber); border-color: rgba(251,191,36,0.25); }
.ticker-score.low { background: rgba(255,255,255,0.04); color: var(--text-muted); border-color: var(--ink-3); }
.scan-bar { height: 3px; width: 100%; background: var(--ink-3); border-radius: 100px; overflow: hidden; margin-bottom: 24px; position: relative; }
.scan-bar-fill { height: 100%; width: 0; background: var(--grad-wide); border-radius: 100px; transition: width 3s cubic-bezier(.25,.1,.25,1); box-shadow: 0 0 16px rgba(255,94,132,0.6); }
.scan-stats { display: flex; justify-content: center; gap: 40px; font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.scan-stat strong { display: block; font-size: 24px; font-family: 'Fraunces', serif; font-weight: 400; color: var(--text); margin-bottom: 4px; font-variation-settings: 'SOFT' 50; }

/* ═══ CHUNK 1 NEW: Auto-selection confirmation screen ═══ */
.confirm-container {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}
.confirm-header {
  text-align: center;
  margin-bottom: 36px;
}
.confirm-eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: 'JetBrains Mono', monospace; font-size: 11px;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 20px; padding: 8px 16px;
  border: 1px solid rgba(34,230,168,0.3);
  border-radius: 100px;
  background: rgba(34,230,168,0.06);
}
.confirm-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(38px,5.5vw,60px);
  font-weight: 400; line-height: 1.0;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
  font-variation-settings: 'SOFT' 50;
}
.confirm-title em {
  font-style: italic;
  font-variation-settings: 'SOFT' 90;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.confirm-sub {
  font-size: 17px;
  color: var(--text-muted);
  max-width: 580px;
  margin: 0 auto;
  line-height: 1.55;
}
.confirm-sub strong { color: var(--text); font-weight: 600; }

.confirm-summary-pills {
  display: flex; justify-content: center; gap: 10px;
  flex-wrap: wrap; margin: 28px 0 8px;
}
.confirm-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 100px;
  font-size: 13px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text);
}
.confirm-pill strong {
  font-family: 'Fraunces', serif;
  font-size: 17px; font-weight: 500;
  color: var(--text);
}
.confirm-pill.mint {
  border-color: rgba(34,230,168,0.35);
  background: rgba(34,230,168,0.06);
}
.confirm-pill.mint strong { color: var(--mint); }
.confirm-pill.pink {
  border-color: rgba(255,94,132,0.35);
  background: rgba(255,94,132,0.06);
}
.confirm-pill.pink strong { color: var(--pink); }

/* The preview: mini cards showing what's been auto-ticked */
.confirm-preview-section {
  margin-top: 32px;
  padding: 24px;
  background: linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
  border: 1px solid var(--ink-3);
  border-radius: 20px;
}
.confirm-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink-3);
  gap: 14px;
  flex-wrap: wrap;
}
.confirm-preview-title {
  font-family: 'Fraunces', serif;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.confirm-preview-title svg {
  width: 20px; height: 20px;
  color: var(--mint);
}
.confirm-preview-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.mini-item-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mini-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  background: rgba(34,230,168,0.035);
  border: 1px solid rgba(34,230,168,0.12);
  border-radius: 8px;
  opacity: 0;
  transform: translateY(4px);
  animation: mini-slide-in 0.35s cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes mini-slide-in {
  to { opacity: 1; transform: translateY(0); }
}
/* Preview checkmark — smaller, subtler, NOT a checkbox */
.mini-tick {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(34,230,168,0.15);
  border: 1px solid rgba(34,230,168,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mini-tick svg { width: 9px; height: 9px; color: var(--mint); opacity: 1; }
.mini-body { min-width: 0; }
.mini-title {
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mini-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mini-meta .type-pill {
  display: inline-block;
  padding: 1px 6px;
  margin-right: 6px;
  border-radius: 100px;
  border: 1px solid var(--ink-3);
  background: var(--ink);
}
.mini-meta .type-pill.session {
  color: var(--mint);
  border-color: rgba(34,230,168,0.25);
  background: rgba(34,230,168,0.06);
}
.mini-meta .type-pill.booth {
  color: var(--purple);
  border-color: rgba(168,85,247,0.25);
  background: rgba(168,85,247,0.06);
}

.confirm-cta-row {
  margin-top: 32px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
.continue-btn {
  width: 100%;
  max-width: 520px;
  padding: 22px 32px;
  background: var(--grad);
  color: white;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  transition: all 0.2s;
  box-shadow: var(--glow-pink), 0 12px 40px rgba(255,94,132,0.3);
  position: relative;
  overflow: hidden;
}
.continue-btn::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);
  transform: translateX(-100%); transition: transform 0.7s;
}
.continue-btn:hover::before { transform: translateX(100%); }
.continue-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 60px rgba(255,94,132,0.5), 0 16px 50px rgba(0,0,0,0.4);
}
.continue-btn svg { transition: transform 0.2s; }
.continue-btn:hover svg { transform: translateX(4px); }

.confirm-secondary {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  padding: 8px 14px;
  transition: color 0.15s;
}
.confirm-secondary:hover { color: var(--text); }

.footer-micro {
  text-align: center;
  padding: 40px 24px 40px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-faint);
}
.footer-micro a { color: var(--text-muted); text-decoration: none; }
.footer-micro a:hover { color: var(--text); }

.toast {
  position: fixed; bottom: 24px; left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ink-2);
  border: 1px solid var(--mint);
  color: var(--text);
  padding: 12px 18px;
  border-radius: 12px;
  font-size: 14px;
  z-index: 200;
  opacity: 0;
  transition: all 0.3s cubic-bezier(.4,0,.2,1);
  box-shadow: 0 10px 40px rgba(0,0,0,0.4);
  pointer-events: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast svg { color: var(--mint); }

/* ═══════════════════════════════════════════════════════════════
   APP SHELL (Chunk 2)
   ═══════════════════════════════════════════════════════════════ */
.app-shell {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
}

/* Tab bar — two-row layout: brand row, then tabs row */
.app-tabs {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(10,10,18,0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ink-3);
  /* Extend visually beyond the app-shell max-width */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 0;
  margin-bottom: 32px;
}
.app-tabs-inner {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  flex-direction: column;
}
/* Row 1: brand */
.app-tabs-brand-row {
  display: flex;
  align-items: center;
  padding: 10px 0 10px;
  border-bottom: 1px solid var(--ink-3);
}
.app-tabs-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: var(--text);
}
.app-tabs-brand .brand-mark {
  width: 28px; height: 28px; border-radius: 8px;
  background: var(--grad); position: relative;
  box-shadow: var(--glow-pink); flex-shrink: 0;
}
.app-tabs-brand .brand-mark::after {
  content: ''; position: absolute; inset: 4px; background: var(--ink); border-radius: 4px;
}
.app-tabs-brand .brand-mark::before {
  content: ''; position: absolute; inset: 8px; background: var(--grad); border-radius: 2px; z-index: 1;
}
.app-tabs-brand-text {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.app-tabs-brand-text em {
  font-style: italic;
  color: var(--text-muted);
  font-variation-settings: 'SOFT' 60;
}
/* Row 2: tabs, distributed */
.app-tabs-row {
  display: flex;
  gap: 6px;
  padding: 12px 0;
  overflow-x: auto;
  scrollbar-width: none;
  align-items: center;
}
.app-tabs-row::-webkit-scrollbar { display: none; }
/* "Brought to you by" strip — sits directly under the app's tab nav.
   Discreet treatment; XU Magazine + Workiro are the co-production
   credit on every page of the app, but shouldn't pull focus from the
   actual plan content below. */
.app-sponsors-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 12px 24px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--ink-3);
  flex-wrap: wrap;
}
.app-sponsors-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
}
.app-sponsors-strip a {
  display: inline-flex;
  align-items: center;
  opacity: 0.75;
  transition: opacity 0.18s;
  text-decoration: none;
}
.app-sponsors-strip a:hover { opacity: 1; }
.app-sponsors-strip img {
  height: 20px;
  width: auto;
  display: block;
}
.app-sponsors-divider {
  width: 1px;
  height: 16px;
  background: var(--ink-3);
}
@media (max-width: 640px) {
  .app-sponsors-strip { gap: 12px; padding: 10px 16px; }
  .app-sponsors-strip img { height: 16px; }
  .app-sponsors-label { font-size: 9px; letter-spacing: 0.14em; }
}
/* Individual tabs — distribute to fill, bigger tap targets */
.app-tab {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 12px 20px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  flex: 1;
  justify-content: center;
  min-width: 0;
}
.app-tab:hover {
  background: var(--ink-3);
  border-color: var(--ink-4);
  transform: translateY(-1px);
}
.app-tab.active {
  color: var(--ink);
  background: var(--text);
  border-color: var(--text);
  box-shadow: 0 4px 16px rgba(245,242,236,0.15);
  font-weight: 600;
}
.app-tab.active svg { stroke-width: 2.5; }
.app-tab svg { width: 17px; height: 17px; flex-shrink: 0; }
.app-tab .tab-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 100px;
  background: var(--ink-3);
  color: var(--text-muted);
  letter-spacing: 0.05em;
}
.app-tab.active .tab-badge {
  background: var(--mint);
  color: var(--ink);
  box-shadow: 0 0 8px rgba(34,230,168,0.5);
}
.app-tab.coming-soon {
  position: relative;
}
.app-tab.coming-soon::after {
  content: 'Soon';
  position: absolute;
  top: -4px; right: -4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 100px;
  background: var(--pink);
  color: white;
  letter-spacing: 0.05em;
}
/* Brand on the left inside the tab bar */

/* Tab content wrapper */
.plan-tab-content {
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 32px 80px;
}

/* App header inside each tab */
.app-header {
  margin-bottom: 24px;
}
.app-header-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 20px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.app-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(32px, 4.5vw, 44px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variation-settings: 'SOFT' 50;
}
.app-title em {
  font-style: italic;
  font-variation-settings: 'SOFT' 90;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.app-sub {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.55;
  max-width: 620px;
}

/* Inline edit links below the Checklist subtitle — secondary affordance.
   Dialled back from mint to muted so the AI match feels primary, not
   something the user is being told to fix. */
.app-header-edit-links {
  display: flex;
  align-items: center;
  gap: 2px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.app-header-edit-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 8px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px;
  transition: all 0.15s;
}
.app-header-edit-link:hover {
  color: var(--mint);
  background: rgba(34,230,168,0.06);
}
.app-header-edit-link svg { opacity: 0.6; }
.app-header-edit-link:hover svg { opacity: 1; }
.app-header-edit-dot {
  color: var(--text-faint);
  font-size: 12px;
}

/* Summary pills row (re-used from confirm screen) */
.app-pills {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.app-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 100px;
  font-size: 12px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.app-pill strong {
  font-family: 'Fraunces', serif;
  font-size: 14px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
  text-transform: none;
}
.app-pill.mint strong { color: var(--mint); }
.app-pill.pink strong { color: var(--pink); }
.app-pill.purple strong { color: var(--purple); }

/* Chunk 10: clickable pill (acts as button) */
button.app-pill {
  font-family: 'JetBrains Mono', monospace;
  cursor: pointer;
  transition: all 0.15s;
}
button.app-pill.clickable:hover {
  transform: translateY(-1px);
}
button.app-pill.mint.clickable:hover {
  border-color: rgba(34,230,168,0.4);
  background: rgba(34,230,168,0.06);
}
button.app-pill.purple.clickable:hover {
  border-color: rgba(168,85,247,0.4);
  background: rgba(168,85,247,0.06);
}

/* Section within a tab */
.app-section {
  margin-bottom: 36px;
}
.app-section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ink-3);
  flex-wrap: wrap;
}
.app-section-title {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}
.app-section-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.app-section-add {
  background: linear-gradient(135deg, rgba(34,230,168,0.12), rgba(34,230,168,0.04));
  border: 1.5px solid rgba(34,230,168,0.45);
  color: var(--mint);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.18s;
  box-shadow: 0 0 0 rgba(34,230,168,0);
}
.app-section-add:hover {
  border-color: var(--mint);
  background: linear-gradient(135deg, rgba(34,230,168,0.2), rgba(34,230,168,0.1));
  box-shadow: 0 0 18px rgba(34,230,168,0.3);
  transform: translateY(-1px);
}
.app-section-add svg { width: 15px; height: 15px; stroke-width: 2.8; }

/* Session card — cleaner, app-shell version */
.plan-session {
  display: grid;
  grid-template-columns: 30px auto 1fr;
  gap: 16px;
  padding: 18px 20px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 14px;
  margin-bottom: 10px;
  align-items: start;
  transition: all 0.15s;
  position: relative;
}
.plan-session:hover {
  border-color: var(--ink-4);
}
.plan-session.selected {
  border-color: rgba(34,230,168,0.3);
  background: linear-gradient(135deg, var(--ink-2) 0%, rgba(34,230,168,0.03) 100%);
}
.plan-session:not(.selected) {
  opacity: 0.55;
}
.plan-check {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 1.5px solid var(--ink-3);
  background: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  transition: all 0.15s;
  flex-shrink: 0;
}
.plan-check:hover { border-color: var(--mint); }
.plan-session.selected .plan-check {
  background: var(--mint);
  border-color: var(--mint);
  box-shadow: 0 0 12px rgba(34,230,168,0.4);
}
.plan-check svg {
  width: 13px;
  height: 13px;
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.15s;
}
.plan-session.selected .plan-check svg { opacity: 1; }
.plan-session-time {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: var(--text-muted);
  padding-top: 4px;
  white-space: nowrap;
}
.plan-session-time strong {
  display: block;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
}
.plan-session-body { min-width: 0; }
.plan-session-meta {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.plan-session-chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 100px;
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  border: 1px solid var(--ink-3);
}
.plan-session-chip.cpd {
  color: var(--mint);
  background: rgba(34,230,168,0.08);
  border-color: rgba(34,230,168,0.25);
  font-weight: 600;
}
.plan-session-chip.ai-pick {
  color: var(--amber);
  background: rgba(251,191,36,0.08);
  border-color: rgba(251,191,36,0.25);
  font-weight: 600;
}
.plan-session-title {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 6px;
  font-variation-settings: 'SOFT' 30;
}
.plan-session-speaker {
  font-size: 13px;
  color: var(--text-muted);
}
.plan-session-speaker strong { color: var(--text); font-weight: 500; }

/* Booth card */
.plan-booth {
  display: grid;
  grid-template-columns: 30px 48px 1fr auto;
  gap: 14px;
  padding: 16px 18px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 14px;
  margin-bottom: 10px;
  align-items: center;
  transition: all 0.15s;
}
.plan-booth.selected {
  border-color: rgba(168,85,247,0.3);
  background: linear-gradient(135deg, var(--ink-2) 0%, rgba(168,85,247,0.03) 100%);
}
.plan-booth:not(.selected) { opacity: 0.55; }
.plan-booth.workiro {
  border-color: rgba(168,85,247,0.35);
  background: linear-gradient(135deg, var(--ink-2) 0%, rgba(168,85,247,0.05) 100%);
}
.plan-booth-check {
  width: 24px;
  height: 24px;
  border-radius: 7px;
  border: 1.5px solid var(--ink-3);
  background: var(--ink);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}
.plan-booth-check:hover { border-color: var(--purple); }
.plan-booth.selected .plan-booth-check {
  background: var(--purple);
  border-color: var(--purple);
  box-shadow: 0 0 12px rgba(168,85,247,0.4);
}
.plan-booth-check svg {
  width: 13px; height: 13px; color: white;
  opacity: 0; transition: opacity 0.15s;
}
.plan-booth.selected .plan-booth-check svg { opacity: 1; }
.plan-booth-logo {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--ink-3), var(--ink-4));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 600;
  color: var(--text);
}
.plan-booth.workiro .plan-booth-logo {
  background: var(--grad);
  color: white;
  box-shadow: 0 0 16px rgba(255,94,132,0.25);
}
.plan-booth-body { min-width: 0; }
.plan-booth-top {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 3px;
  flex-wrap: wrap;
}
.plan-booth-name {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
}
.plan-booth-stand {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 100px;
  background: rgba(255,255,255,0.04);
  color: var(--text-muted);
  border: 1px solid var(--ink-3);
}
.plan-booth-hostpill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 100px;
  background: rgba(168,85,247,0.12);
  color: var(--purple);
  border: 1px solid rgba(168,85,247,0.3);
  font-weight: 700;
}
.plan-booth-desc {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.45;
}

/* Empty state for when nothing's ticked in a section */
.plan-empty {
  padding: 30px;
  text-align: center;
  background: var(--ink-2);
  border: 1px dashed var(--ink-3);
  border-radius: 14px;
  color: var(--text-muted);
  font-size: 14px;
}

/* ═══ SEARCH OVERLAY ═══ */
.search-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10,10,18,0.88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 300;
  display: none;
  flex-direction: column;
  padding: 60px 24px 40px;
  overflow-y: auto;
}
.search-overlay.open { display: flex; }
.search-overlay-inner {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
}
.search-overlay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.search-overlay-title {
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.search-overlay-title em {
  font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.search-close {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  color: var(--text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.search-close:hover { border-color: var(--pink); color: var(--pink); }
.search-input-wrap {
  position: relative;
  margin-bottom: 20px;
}
.search-input {
  width: 100%;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 14px;
  padding: 18px 20px 18px 52px;
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  outline: none;
  transition: all 0.2s;
}
.search-input:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 4px rgba(255,94,132,0.12);
}
.search-input::placeholder { color: var(--text-faint); }
.search-input-icon {
  position: absolute;
  left: 18px; top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  width: 20px;
  height: 20px;
  pointer-events: none;
}
.search-results {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.search-result {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 14px 16px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 12px;
  align-items: center;
  transition: all 0.15s;
}
.search-result:hover { border-color: var(--ink-4); }
.search-result.already-added { opacity: 0.55; }
.search-result-body { min-width: 0; }
.search-result-title {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 4px;
  line-height: 1.3;
}
.search-result-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.search-add-btn {
  padding: 9px 14px;
  background: var(--mint);
  color: var(--ink);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}
.search-add-btn:hover { background: var(--mint-deep); }
.search-add-btn.added {
  background: var(--ink-3);
  color: var(--text-muted);
  cursor: default;
}
.search-empty {
  padding: 40px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}

/* ═══ TURN C — PLAN EDITOR ═══ */

/* Entry point on the Checklist — two clean buttons that replaced the sprawling
   inline "Edit your own schedule" sections. */
.plan-editor-entry {
  margin-top: 56px;
  padding: 20px 22px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 14px;
}
.plan-editor-entry-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 12px;
  font-weight: 600;
}
.plan-editor-entry-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.plan-editor-entry-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: transparent;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: -0.01em;
}
/* Sessions variant — mint stroke */
.plan-editor-entry-btn.variant-sessions {
  border: 1.5px solid rgba(34,230,168,0.55);
  color: var(--mint);
  box-shadow: 0 0 0 0 rgba(34,230,168,0);
}
.plan-editor-entry-btn.variant-sessions:hover {
  border-color: var(--mint);
  background: rgba(34,230,168,0.08);
  box-shadow: 0 0 20px rgba(34,230,168,0.25);
  transform: translateY(-1px);
}
.plan-editor-entry-btn.variant-sessions svg { color: var(--mint); }
/* Booths variant — purple stroke */
.plan-editor-entry-btn.variant-booths {
  border: 1.5px solid rgba(168,85,247,0.55);
  color: #d9b8ff;
}
.plan-editor-entry-btn.variant-booths:hover {
  border-color: var(--purple);
  background: rgba(168,85,247,0.08);
  box-shadow: 0 0 20px rgba(168,85,247,0.25);
  transform: translateY(-1px);
}
.plan-editor-entry-btn.variant-booths svg { color: #d9b8ff; }
/* Count pill — sits inside the button, tinted to match variant */
.plan-editor-entry-count {
  margin-left: 4px;
  padding: 2px 9px;
  background: rgba(255,255,255,0.06);
  border-radius: 100px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
}
.plan-editor-entry-btn.variant-sessions .plan-editor-entry-count {
  background: rgba(34,230,168,0.12);
  color: var(--mint);
}
.plan-editor-entry-btn.variant-booths .plan-editor-entry-count {
  background: rgba(168,85,247,0.14);
  color: #d9b8ff;
}

/* Plan Editor overlay — reuses .search-overlay base styles with a few overrides */
.plan-editor-overlay .search-overlay-title em {
  background: linear-gradient(90deg, #ff5e84 0%, #a855f7 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.plan-editor-sub {
  margin-top: 4px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Filter chips: problem tags + day */
.plan-editor-filters {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}
.editor-filter-group {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.editor-filter-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  margin-right: 4px;
}
.editor-filter-label-ai {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--mint);
  text-shadow: 0 0 12px rgba(34,230,168,0.15);
}
.editor-filter-label-ai svg {
  color: var(--mint);
  flex-shrink: 0;
}
.editor-filter-chip {
  padding: 6px 13px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 100px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.editor-filter-chip:hover {
  border-color: var(--ink-4);
  color: var(--text);
}
.editor-filter-chip.active {
  background: rgba(34,230,168,0.14);
  border-color: rgba(34,230,168,0.5);
  color: var(--mint);
}
.editor-filter-clear {
  padding: 4px 10px;
  background: transparent;
  border: none;
  color: var(--text-faint);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  text-decoration: underline;
  margin-left: 2px;
}
.editor-filter-clear:hover { color: var(--text); }

/* "+ N more filters" button — reveals unpicked category chips inline.
   Dashed amber border signals these are ad-hoc/optional filters. */
.editor-filter-more-btn {
  padding: 6px 13px;
  background: transparent;
  border: 1px dashed rgba(251,191,36,0.4);
  border-radius: 100px;
  color: var(--amber);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.editor-filter-more-btn:hover {
  border-color: var(--amber);
  border-style: solid;
  background: rgba(251,191,36,0.08);
}
/* Chips for unpicked categories — dashed border to echo the "+" button styling */
.editor-filter-chip.variant-more {
  border-style: dashed;
  border-color: rgba(251,191,36,0.35);
  color: var(--amber);
  background: transparent;
}
.editor-filter-chip.variant-more:hover {
  background: rgba(251,191,36,0.08);
  border-color: var(--amber);
  border-style: solid;
}
.editor-filter-chip.variant-more.active {
  background: rgba(251,191,36,0.14);
  border-color: var(--amber);
  border-style: solid;
  color: var(--amber);
}
/* Hide link — subtle, returns the "+ more filters" button */
.editor-filter-more-hide {
  padding: 4px 10px;
  background: transparent;
  border: none;
  color: var(--text-faint);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
  text-decoration: underline;
  margin-left: 2px;
}
.editor-filter-more-hide:hover { color: var(--text); }
/* The expanded row when "+ more filters" is clicked — slightly indented */
.editor-filter-group.editor-filter-more-row {
  margin-top: -4px;
  opacity: 0.95;
}

/* Results area */
.plan-editor-results {
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Time slot group */
.editor-day-divider {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 24px 4px 10px;
  border-bottom: 1px solid var(--ink-3);
  margin: 6px 0 8px;
}
.editor-day-divider:first-child {
  padding-top: 4px;
}
.editor-day-divider-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mint);
  text-shadow: 0 0 14px rgba(34,230,168,0.2);
}
.editor-day-divider-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.editor-day-divider-line {
  flex: 1;
  height: 1px;
}
.editor-slot {
  border: 1px solid var(--ink-3);
  border-radius: 14px;
  background: var(--ink-2);
  overflow: hidden;
  transition: all 0.15s;
}
.editor-slot.has-clash {
  border-color: rgba(251,191,36,0.28);
}
.editor-slot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  background: linear-gradient(90deg, rgba(255,255,255,0.04) 0%, rgba(255,255,255,0.01) 100%);
  border-bottom: 1px solid var(--ink-3);
  gap: 12px;
  flex-wrap: wrap;
  position: relative;
}
.editor-slot-head::after {
  /* Subtle mint underline so each slot head reads as a clear section divider */
  content: '';
  position: absolute;
  left: 22px;
  bottom: -1px;
  width: 56px;
  height: 2px;
  background: linear-gradient(90deg, var(--mint) 0%, transparent 100%);
  opacity: 0.4;
}
.editor-slot.has-clash .editor-slot-head {
  border-bottom-color: rgba(251,191,36,0.28);
}
.editor-slot-time {
  display: flex;
  align-items: baseline;
  gap: 12px;
}
.editor-slot-time strong {
  font-family: 'JetBrains Mono', monospace;
  color: var(--text);
  font-size: 26px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-shadow: 0 0 24px rgba(34,230,168,0.18);
  line-height: 1;
}
.editor-slot-day {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 9px;
  background: var(--ink-3);
  border-radius: 100px;
  font-weight: 700;
}

/* Day divider — separates Day 1 / Day 2 groups in the Plan Editor.
   Prominent serif day label + date, with a line filling the remaining width.
   Makes the wall of time-slots scannable. */
.editor-day-divider {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 6px 0 14px;
  padding-top: 4px;
}
.editor-day-divider:not(:first-child) {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--ink-3);
}
.editor-day-divider-num {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  font-style: italic;
}
.editor-day-divider-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
}
.editor-day-divider-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--ink-3) 0%, transparent 100%);
  align-self: center;
  margin-left: 4px;
}
.editor-clash-warning {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px;
  background: transparent;
  border: 1px dashed rgba(251,191,36,0.35);
  border-radius: 100px;
  color: var(--amber);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.editor-clash-warning svg { flex-shrink: 0; }
.editor-slot-rows {
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.editor-booth-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Row card inside the editor */
.editor-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 14px;
  padding: 14px 16px;
  background: var(--ink);
  border: 1px solid var(--ink-3);
  border-radius: 10px;
  align-items: center;
  transition: all 0.15s;
}
.editor-row:hover {
  border-color: var(--ink-4);
}
.editor-row.in-plan {
  border-color: rgba(34,230,168,0.35);
  background: rgba(34,230,168,0.03);
}
.editor-row-main { min-width: 0; }
.editor-row-title {
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  line-height: 1.3;
  margin-bottom: 4px;
}
.editor-row-meta {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.editor-row-speaker { color: var(--text-faint); }
.editor-row-blurb {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 8px;
}
.editor-row-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}

/* Actions column — toggle + optional "Keep this one" button, stacked */
.editor-row-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: center;
}

/* "Keep this one" button — appears when a row is in a clashed slot.
   Amber to match the clash warning banner; subtle until hovered. */
.editor-row-keep-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(251,191,36,0.12);
  border: 1px solid rgba(251,191,36,0.45);
  border-radius: 8px;
  color: var(--amber);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.editor-row-keep-btn:hover {
  background: rgba(251,191,36,0.22);
  border-color: var(--amber);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(251,191,36,0.2);
}

/* Rows that are part of a clash get an amber left-border to make them visually
   distinct from non-clashing in-plan rows. The slot's amber glow is already
   telling the story — this just connects the dots to each offender. */
.editor-row.is-clashing {
  box-shadow: inset 2px 0 0 0 rgba(251,191,36,0.5);
}

/* The toggle button: "Add to plan" / "In your plan" */
.editor-row-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 15px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  align-self: center;
}
.editor-row-toggle.out {
  background: var(--ink);
  border: 1px solid var(--ink-4);
  color: var(--text);
}
.editor-row-toggle.out:hover {
  background: var(--mint);
  border-color: var(--mint);
  color: #0d1614;
}
.editor-row-toggle.out:hover svg { color: #0d1614; }
.editor-row-toggle.in {
  background: rgba(34,230,168,0.14);
  border: 1px solid rgba(34,230,168,0.4);
  color: var(--mint);
}
.editor-row-toggle.in:hover {
  background: rgba(255,94,132,0.14);
  border-color: rgba(255,94,132,0.4);
  color: var(--pink);
}
.editor-row-toggle.in:hover svg { color: var(--pink); }

@media (max-width: 640px) {
  .editor-row {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .editor-row-actions {
    flex-direction: row;
    align-self: flex-start;
    flex-wrap: wrap;
  }
  .editor-row-toggle {
    align-self: flex-start;
  }
  .editor-slot-head { padding: 10px 12px; }
  .editor-clash-warning { font-size: 10px; padding: 3px 8px; }
}

/* ═══ TURN E3 — WORKIRO HOSTS STRIP ═══
   Workiro uses the normal booth row now. We just prepend a small "Hosts"
   strip to signal we built the app — same chrome, adds booth notes + rating,
   stops it looking like a CTA. */

.checklist-row.is-host {
  border-color: rgba(168,85,247,0.38);
  box-shadow: 0 0 0 1px rgba(168,85,247,0.14) inset, 0 0 22px rgba(168,85,247,0.08);
}
/* Workiro host booth — small integrations row. Each vendor name is a real
   link to its workiro.com integration page. Tasteful — shouldn't dominate
   the booth card, just adds context + discovery for anyone curious. */
.checklist-host-integrations {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  padding: 8px 12px;
  background: rgba(168,85,247,0.05);
  border: 1px solid rgba(168,85,247,0.22);
  border-radius: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.02em;
}
.checklist-host-integrations-label {
  color: var(--text-muted);
  font-weight: 600;
  margin-right: 2px;
}
.checklist-host-integration-link {
  color: #d9b8ff;
  text-decoration: none;
  font-weight: 700;
  transition: color 0.12s;
  border-bottom: 1px dashed rgba(168,85,247,0.3);
  padding-bottom: 1px;
}
.checklist-host-integration-link:hover {
  color: #e8c5ff;
  border-bottom-color: var(--purple);
}
.checklist-host-integrations-dot {
  color: var(--text-faint);
}
.checklist-host-integration-more {
  margin-left: 4px;
  color: var(--mint);
  text-decoration: none;
  font-weight: 700;
  transition: gap 0.12s, color 0.12s;
}
.checklist-host-integration-more:hover {
  color: #2ff0b4;
}

.checklist-row-host-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 16px;
  background: linear-gradient(90deg, rgba(168,85,247,0.16) 0%, rgba(168,85,247,0.04) 100%);
  border-bottom: 1px solid rgba(168,85,247,0.32);
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.checklist-row-host-strip::before {
  /* Soft ambient purple bloom behind the badge — adds depth without animation noise */
  content: '';
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 180px;
  height: 180px;
  background: radial-gradient(circle, rgba(168,85,247,0.18) 0%, transparent 60%);
  pointer-events: none;
}
.checklist-row-host-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #d9b8ff;
  position: relative;
  z-index: 1;
}
/* Animated star — gentle rotate + glow pulse so it subtly draws the eye
   without being flashy. 4s cycle matches "alive but tasteful". */
.checklist-row-host-star {
  width: 14px;
  height: 14px;
  color: #e8c5ff;
  flex-shrink: 0;
  animation: hostStarPulse 4s ease-in-out infinite;
  filter: drop-shadow(0 0 4px rgba(168,85,247,0.6));
}
@keyframes hostStarPulse {
  0%, 100% {
    transform: rotate(0deg) scale(1);
    filter: drop-shadow(0 0 4px rgba(168,85,247,0.6));
  }
  50% {
    transform: rotate(16deg) scale(1.12);
    filter: drop-shadow(0 0 10px rgba(168,85,247,0.95));
  }
}
.checklist-row-host-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--mint);
  text-decoration: none;
  transition: gap 0.12s, color 0.12s;
  position: relative;
  z-index: 1;
}
.checklist-row-host-link:hover {
  color: #2ff0b4;
  gap: 7px;
}

/* Gap-fill cards inside the day's session list — surfaces booth opportunities
   during tea/lunch/long gaps. Purple accent so it visually differs from
   sessions without being loud. */
.checklist-gap-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 13px 18px;
  margin: 14px 0;
  background: linear-gradient(135deg, rgba(168,85,247,0.06) 0%, rgba(217,70,239,0.04) 100%);
  border: 1px dashed rgba(168,85,247,0.4);
  border-radius: 10px;
  flex-wrap: wrap;
}
.checklist-gap-main {
  flex: 1;
  min-width: 200px;
}
.checklist-gap-time {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #d9b8ff;
  font-weight: 600;
  margin-bottom: 4px;
  text-transform: uppercase;
}
.checklist-gap-time strong {
  color: #e8d4ff;
  font-weight: 700;
  letter-spacing: 0.08em;
}
.checklist-gap-body {
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
}
.checklist-gap-body strong {
  color: #e8d4ff;
  font-weight: 600;
}
.checklist-gap-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: transparent;
  border: 1px solid rgba(168,85,247,0.5);
  border-radius: 100px;
  color: #d9b8ff;
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.checklist-gap-cta:hover {
  background: rgba(168,85,247,0.12);
  border-color: rgba(168,85,247,0.8);
  color: #f0e0ff;
}

/* Theme-browse boxes — alternative way to find what's relevant, grouped
   around the user's own onboarding problems. Sits below the Plan Editor entry. */
.theme-browse {
  margin-top: 32px;
  padding: 24px 22px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 14px;
}
.theme-browse-head {
  margin-bottom: 16px;
}
.theme-browse-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 10px;
  text-shadow: 0 0 12px rgba(34,230,168,0.15);
}
.theme-browse-eyebrow svg { color: var(--mint); }
.theme-browse-label {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 6px;
  line-height: 1.2;
}
.theme-browse-label em {
  font-style: italic;
  background: linear-gradient(90deg, var(--mint) 0%, var(--purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.theme-browse-sub {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 56ch;
}
.theme-browse-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.theme-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  background: var(--ink);
  border: 1px solid var(--ink-3);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: all 0.15s;
  font-family: inherit;
}
.theme-box:hover {
  border-color: rgba(168,85,247,0.5);
  background: rgba(168,85,247,0.03);
  transform: translateY(-1px);
}
.theme-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.theme-box-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
}
.theme-box-arrow {
  color: var(--text-faint);
  transition: color 0.15s, transform 0.15s;
  flex-shrink: 0;
}
.theme-box:hover .theme-box-arrow {
  color: #d9b8ff;
  transform: translateX(2px);
}
.theme-box-stats {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.theme-box-stats strong {
  color: var(--text);
  font-weight: 700;
  font-size: 13px;
}
.theme-box-dot {
  color: var(--text-faint);
}

/* ═══ TEAM TAB ═══ */
/* Chunk 12: Bottom launch-bar CTAs */
.launch-bar {
  width: 100%;
  max-width: 1080px;
  margin: 120px auto 20px;
  padding: 0 24px;
}
.launch-bar-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.launch-bar-inner.single {
  grid-template-columns: 1fr;
  max-width: 560px;
  margin: 0 auto;
}
.launch-bar-inner.single .launch-card {
  text-align: center;
  align-items: center;
}
.launch-bar-inner.single .launch-card-eyebrow {
  margin-left: auto;
  margin-right: auto;
}
.launch-bar-inner.single .launch-card-btn {
  align-self: center;
}
@media (max-width: 780px) {
  .launch-bar-inner { grid-template-columns: 1fr; gap: 16px; }
}
.launch-card {
  padding: 30px 28px 26px;
  border-radius: 18px;
  border: 1px solid var(--ink-3);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.launch-card.webinar-card {
  background: linear-gradient(160deg, rgba(34,230,168,0.04) 0%, var(--ink-2) 100%);
  border-left: 3px solid var(--mint);
}
.launch-card.plan-card {
  background: linear-gradient(160deg, rgba(255,94,132,0.06) 0%, rgba(168,85,247,0.04) 100%);
  border: 1px solid rgba(168,85,247,0.3);
}
.launch-card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  margin-bottom: 18px;
}
.launch-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.launch-eyebrow-dot.webinar-dot {
  background: var(--mint);
  box-shadow: 0 0 10px var(--mint);
  animation: magic-pulse 2.2s ease-in-out infinite;
}
.launch-eyebrow-dot.plan-dot {
  background: var(--pink);
  box-shadow: 0 0 10px var(--pink);
}
.launch-card.webinar-card .launch-card-eyebrow { color: var(--mint); }
.launch-card.plan-card .launch-card-eyebrow { color: var(--pink); }
.launch-card-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--text);
  margin: 0 0 16px;
  font-variation-settings: 'SOFT' 40;
}
.launch-card-title em {
  font-style: italic;
}
.launch-card.webinar-card .launch-card-title em { color: var(--mint); }
.launch-card.plan-card .launch-card-title em {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.launch-card-body {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 24px;
  max-width: 48ch;
  flex: 1;
}
.launch-card-body strong {
  color: var(--text);
  font-weight: 600;
}
.launch-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 20px 36px;
  border-radius: 14px;
  font-family: inherit;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: transform 0.2s, box-shadow 0.2s;
  align-self: flex-start;
}
/* Webinar CTA: mint outlined — clearly different from the pink/purple gradient */
.launch-card-btn.webinar-btn {
  background: var(--ink);
  color: var(--mint);
  border: 2px solid var(--mint);
  box-shadow: 0 0 0 rgba(34,230,168,0);
}
.launch-card-btn.webinar-btn:hover {
  background: rgba(34,230,168,0.08);
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(34,230,168,0.22);
}
/* Plan CTA: full pink/purple gradient — same treatment as hero primary */
.launch-card-btn.plan-btn {
  background: var(--grad);
  color: white;
  box-shadow: var(--glow-pink), 0 6px 20px rgba(0,0,0,0.3);
}
.launch-card-btn.plan-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--glow-pink), 0 10px 28px rgba(0,0,0,0.35);
}
.launch-card-note {
  margin-top: 12px;
  font-size: 12.5px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
}

/* ═══════════════════════════════════════════════════════════════
   END launch-bar
   ═══════════════════════════════════════════════════════════════ */

/* AI synthesis block — one paragraph summary above the cards */
.team-synthesis {
  padding: 28px 30px 26px;
  margin-bottom: 32px;
  background: linear-gradient(135deg, rgba(168,85,247,0.06) 0%, rgba(0,212,214,0.04) 100%);
  border: 1px solid rgba(168,85,247,0.2);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.team-synthesis::before {
  content: '';
  position: absolute;
  top: -40%; right: -15%;
  width: 60%; height: 160%;
  background: radial-gradient(circle, rgba(168,85,247,0.1) 0%, transparent 55%);
  pointer-events: none;
}
.team-synthesis > * { position: relative; z-index: 1; }
.team-synthesis-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--purple);
  font-weight: 700;
  margin-bottom: 14px;
}
.team-synthesis-label svg { width: 14px; height: 14px; }
.team-synthesis-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(26px, 3.6vw, 34px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 14px;
}
.team-synthesis-title em {
  font-style: italic;
  background: linear-gradient(90deg, var(--purple), var(--teal));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.team-synthesis-body {
  font-size: 15.5px;
  line-height: 1.65;
  color: var(--text);
}
.team-synthesis-body strong {
  color: var(--text);
  font-weight: 600;
}

/* Chunk 14: Gamified intel blocks */
.team-synthesis-lede {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 22px;
  max-width: 640px;
}
.intel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 780px) {
  .intel-grid { grid-template-columns: 1fr; }
}
.intel-block {
  padding: 18px 20px 20px;
  background: rgba(255,255,255,0.02);
  /* Left tone-border only — avoids catching ambient gradient on the right edge */
  border: none;
  border-left: 3px solid var(--ink-3);
  border-radius: 12px;
  transition: transform 0.15s, background 0.15s;
}
.intel-block:hover { transform: translateY(-1px); background: rgba(255,255,255,0.035); }
.intel-block.tone-pink { border-left-color: var(--pink); }
.intel-block.tone-purple { border-left-color: var(--purple); }
.intel-block.tone-amber { border-left-color: var(--amber); }
.intel-block.tone-mint { border-left-color: var(--mint); }
.intel-block-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 10px;
}
.intel-block.tone-pink .intel-block-label { color: var(--pink); }
.intel-block.tone-purple .intel-block-label { color: var(--purple); }
.intel-block.tone-amber .intel-block-label { color: var(--amber); }
.intel-block.tone-mint .intel-block-label { color: var(--mint); }
.intel-block-headline {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--text);
  margin-bottom: 8px;
}
.intel-block-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
}
.intel-block-body strong {
  color: var(--text);
  font-weight: 600;
}

/* Chunk 15: Solo-to-team upgrade CTA */
.solo-upgrade-cta {
  margin-top: 32px;
  padding: 28px 28px 26px;
  background: linear-gradient(135deg, rgba(255,94,132,0.08) 0%, rgba(168,85,247,0.06) 100%);
  border: 1px solid rgba(255,94,132,0.3);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.solo-upgrade-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pink);
  font-weight: 700;
  margin-bottom: 12px;
}
.solo-upgrade-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 10px var(--pink);
  animation: magic-pulse 2.2s ease-in-out infinite;
}
.solo-upgrade-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(22px, 2.8vw, 28px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 12px;
}
.solo-upgrade-title em {
  font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.solo-upgrade-body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 20px;
  max-width: 680px;
}
.solo-upgrade-body strong {
  color: var(--text);
  font-weight: 600;
}
.solo-upgrade-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  background: var(--grad);
  color: white;
  font-family: inherit;
  font-size: 14.5px;
  font-weight: 700;
  border-radius: 11px;
  border: none;
  cursor: pointer;
  transition: all 0.18s;
  box-shadow: var(--glow-pink);
}
.solo-upgrade-btn:hover {
  transform: translateY(-1px);
  box-shadow: var(--glow-pink), 0 8px 24px rgba(255,94,132,0.3);
}

/* Invite footer */
.team-invite-foot {
  margin-top: 36px;
  padding: 22px 24px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.team-invite-foot-text { flex: 1; min-width: 220px; }
.team-invite-btn {
  background: var(--grad);
  border: none;
  color: white;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 18px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s;
  box-shadow: 0 6px 20px rgba(255,94,132,0.3);
}
.team-invite-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(255,94,132,0.4);
}
.team-invite-btn svg { width: 15px; height: 15px; }

/* Teammate cards — expanded profile view */
.teammate-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 14px;
  margin-bottom: 36px;
}
.teammate {
  padding: 20px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 16px;
  transition: all 0.15s;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.teammate.me {
  border-color: rgba(34,230,168,0.3);
  background: linear-gradient(135deg, var(--ink-2) 0%, rgba(34,230,168,0.03) 100%);
}
.teammate-top {
  display: flex;
  align-items: center;
  gap: 12px;
}
.teammate-avatar {
  width: 46px; height: 46px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
  border: 2px solid var(--ink-3);
}
.teammate-avatar.t1 { background: linear-gradient(135deg, rgba(255,94,132,0.4), rgba(168,85,247,0.4)); color: var(--pink); }
.teammate-avatar.t2 { background: linear-gradient(135deg, rgba(168,85,247,0.4), rgba(0,212,214,0.4)); color: var(--purple); }
.teammate-avatar.t3 { background: linear-gradient(135deg, rgba(0,212,214,0.4), rgba(34,230,168,0.4)); color: var(--teal); }
.teammate-avatar.t4 { background: linear-gradient(135deg, rgba(251,191,36,0.4), rgba(255,94,132,0.4)); color: var(--amber); }
.teammate-info { flex: 1; min-width: 0; }
.teammate-name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.teammate-name {
  font-family: 'Fraunces', serif;
  font-size: 19px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
}
.teammate-you-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 2px 7px;
  border-radius: 100px;
  background: var(--mint);
  color: var(--ink);
  font-weight: 700;
}
.teammate-role {
  font-size: 12.5px;
  color: var(--text-muted);
  margin-top: 2px;
}

/* Mission: the full problem quote */
.teammate-mission {
  background: rgba(0,0,0,0.22);
  border-radius: 10px;
  padding: 12px 14px;
  border-left: 3px solid var(--pink);
}
.teammate-mission-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 6px;
  font-weight: 600;
}
.teammate-mission-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.55;
  font-style: italic;
}

/* Evaluating / quirks blocks */
.teammate-meta-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.teammate-meta-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.teammate-meta-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.teammate-meta-pill {
  font-size: 11px;
  padding: 4px 9px;
  border-radius: 100px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--ink-3);
  color: var(--text);
  white-space: nowrap;
}
.teammate-meta-pill.cat {
  background: rgba(168,85,247,0.08);
  border-color: rgba(168,85,247,0.25);
  color: var(--purple);
}
.teammate-meta-pill.quirk {
  background: rgba(0,212,214,0.08);
  border-color: rgba(0,212,214,0.25);
  color: var(--teal);
}

.teammate-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding-top: 12px;
  border-top: 1px solid var(--ink-3);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.teammate-footer-stats { display: flex; gap: 12px; }
.teammate-footer-stats strong {
  color: var(--text);
  font-size: 12px;
}
.teammate-footer-joined {
  color: var(--text-faint);
  text-align: right;
}
.teammate-remove-btn {
  display: flex; align-items: center; gap: 5px;
  width: 100%; justify-content: center;
  margin-top: 4px;
  padding: 6px 10px;
  background: transparent;
  border: 1px solid rgba(239,68,68,0.2);
  border-radius: 6px;
  color: var(--text-faint);
  font-size: 11px; font-weight: 500; letter-spacing: 0.02em;
  cursor: pointer; transition: all 0.15s;
}
.teammate-remove-btn:hover {
  border-color: rgba(239,68,68,0.6);
  color: #ef4444;
  background: rgba(239,68,68,0.06);
}

/* Overlap warning banner */
.overlap-warnings {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 28px;
}
.overlap-warning {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background: rgba(251,191,36,0.06);
  border: 1px solid rgba(251,191,36,0.25);
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
}
.overlap-warning svg {
  width: 18px;
  height: 18px;
  color: var(--amber);
  flex-shrink: 0;
}
.overlap-warning-body strong {
  color: var(--amber);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 2px;
}
.overlap-warning-body span { color: var(--text); }
.overlap-warning-action {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 12px;
  padding: 7px 12px;
  border-radius: 8px;
  background: rgba(251,191,36,0.1);
  border: 1px solid rgba(251,191,36,0.3);
  color: var(--amber);
  cursor: pointer;
  white-space: nowrap;
  font-weight: 600;
}
.overlap-warning-action:hover { background: rgba(251,191,36,0.18); }

/* Shared checklist — with attribution */
.checklist {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.checklist-row {
  display: flex;
  flex-direction: column;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 10px;
  transition: all 0.15s;
  overflow: hidden;
}
.checklist-row:hover { border-color: var(--ink-4); }
.checklist-row.attended {
  background: rgba(34,230,168,0.04);
  border-color: rgba(34,230,168,0.22);
}
.checklist-row.rated {
  background: rgba(255,94,132,0.04);
  border-color: rgba(255,94,132,0.22);
}
.checklist-row-main {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: flex-start;
  padding: 11px 16px;
}
/* Chunk 11: tick + time stacked vertically in first column */
.checklist-row-leftcol {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-top: 1px;
}
.checklist-row-right {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
  padding-top: 4px;
}

/* At narrower widths, stack the right-side cluster below the title so
   the title column has room to breathe */
@media (max-width: 780px) {
  .checklist-row-main {
    grid-template-columns: auto 1fr;
    grid-template-areas:
      "left title"
      ".    right";
    row-gap: 10px;
  }
  .checklist-row-main > .checklist-row-leftcol { grid-area: left; }
  .checklist-row-main > .checklist-main { grid-area: title; }
  .checklist-row-main > .checklist-row-right {
    grid-area: right;
    justify-content: flex-start;
    padding-left: 0;
  }
}

/* Prominent time/stand block — now sits below the tick */
.checklist-time-block {
  flex-shrink: 0;
  min-width: 54px;
  padding: 5px 8px;
  text-align: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--ink-3);
  border-radius: 7px;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1.1;
}
.checklist-time-block.booth {
  background: rgba(168,85,247,0.06);
  border-color: rgba(168,85,247,0.2);
}
.checklist-time-main {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
}
.checklist-time-block.booth .checklist-time-main {
  font-size: 15px;
  color: var(--purple);
}
.checklist-time-sub {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
  letter-spacing: 0.06em;
}
.checklist-time-top {
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--purple);
  opacity: 0.7;
  font-weight: 600;
  margin-bottom: 2px;
}
.checklist-row.attended .checklist-time-block {
  opacity: 0.55;
}

/* Chunk 14: Anchor-section headers for unified scroll checklist */
.checklist-anchor-section {
  scroll-margin-top: 80px;
}
.checklist-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink-3);
  flex-wrap: wrap;
}
.checklist-section-title {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--text);
}
.checklist-section-title svg {
  color: var(--mint);
}
#booths-anchor .checklist-section-title svg {
  color: var(--purple);
}
.checklist-section-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}

/* Contextual Edit button inside section header — sits next to the count.
   Mint for sessions, purple for booths. Small stroke-only. */
.checklist-section-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}
.checklist-section-edit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: transparent;
  border-radius: 100px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: -0.005em;
}
.checklist-section-edit.variant-sessions {
  border: 1px solid rgba(34,230,168,0.45);
  color: var(--mint);
}
.checklist-section-edit.variant-sessions:hover {
  border-color: var(--mint);
  background: rgba(34,230,168,0.08);
  box-shadow: 0 0 14px rgba(34,230,168,0.18);
}
.checklist-section-edit.variant-booths {
  border: 1px solid rgba(168,85,247,0.45);
  color: #d9b8ff;
}
.checklist-section-edit.variant-booths:hover {
  border-color: var(--purple);
  background: rgba(168,85,247,0.08);
  box-shadow: 0 0 14px rgba(168,85,247,0.18);
}
.checklist-section-edit svg { opacity: 0.85; }

/* Workiro soft link under booths list */
.checklist-workiro-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-muted);
  background: rgba(255,255,255,0.02);
  border: 1px dashed var(--ink-3);
  border-radius: 100px;
  text-decoration: none;
  transition: all 0.15s;
}
.checklist-workiro-link:hover {
  color: var(--pink);
  border-color: rgba(255,94,132,0.35);
  background: rgba(255,94,132,0.05);
}

/* Chunk 18: Green neon webinar card at bottom of checklist */
.checklist-webinar-card {
  margin-top: 48px;
  padding: 0;
  background: linear-gradient(135deg, rgba(34,230,168,0.08) 0%, rgba(0,212,214,0.06) 100%);
  border: 1px solid rgba(34,230,168,0.35);
  border-radius: 16px;
  box-shadow: 0 0 40px rgba(34,230,168,0.15), inset 0 0 0 1px rgba(34,230,168,0.08);
  overflow: hidden;
  position: relative;
}
.checklist-webinar-card::before {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 60%; height: 200%;
  background: radial-gradient(circle, rgba(34,230,168,0.12) 0%, transparent 55%);
  pointer-events: none;
  filter: blur(30px);
}
.checklist-webinar-card-inner {
  position: relative;
  padding: 26px 28px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 24px;
  align-items: center;
}
@media (max-width: 720px) {
  .checklist-webinar-card-inner {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 22px 22px 24px;
  }
}
.checklist-webinar-card-left {
  min-width: 0;
}
.checklist-webinar-card-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint);
  font-weight: 700;
  margin-bottom: 12px;
}
.checklist-webinar-card-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 10px var(--mint), 0 0 18px var(--mint);
  animation: magic-pulse 2.2s ease-in-out infinite;
}
.checklist-webinar-card-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(20px, 2.4vw, 24px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 10px;
}
.checklist-webinar-card-title em {
  font-style: italic;
  color: var(--mint);
}
.checklist-webinar-card-body {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
  margin: 0 0 16px;
}
.checklist-webinar-card-body strong { color: var(--text); font-weight: 600; }
.checklist-webinar-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  background: var(--mint);
  color: var(--ink);
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.18s;
  box-shadow: 0 0 24px rgba(34,230,168,0.4);
}
.checklist-webinar-card-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 28px rgba(34,230,168,0.55);
}

/* Right side — panellist photos */
.checklist-webinar-card-right {
  text-align: center;
}
.checklist-webinar-panellists {
  display: flex;
  justify-content: center;
  align-items: center;
}
.checklist-webinar-panellist {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--ink-3);
  border: 2.5px solid var(--ink-2);
  overflow: hidden;
  margin-left: -10px;
  transition: transform 0.2s;
}
.checklist-webinar-panellist:first-child { margin-left: 0; }
.checklist-webinar-panellist:hover {
  transform: translateY(-2px) scale(1.08);
  z-index: 2;
}
.checklist-webinar-panellist img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.checklist-webinar-panellists-label {
  margin-top: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}

/* Chunk 8: checklist tab switcher + teammate filter */
.checklist-controls {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}
.checklist-type-tabs {
  display: inline-flex;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 12px;
  padding: 4px;
  align-self: flex-start;
}
.checklist-type-tab {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  background: transparent;
  border: none;
  border-radius: 8px;
  color: var(--text);
  opacity: 0.72;
  font-family: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}
.checklist-type-tab:hover {
  opacity: 1;
  background: rgba(255,255,255,0.03);
}
.checklist-type-tab.active {
  background: var(--ink-4);
  color: var(--text);
  opacity: 1;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
}
.checklist-type-tab-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 2px 7px;
  background: rgba(255,255,255,0.05);
  border-radius: 100px;
  color: var(--text-muted);
  font-weight: 600;
}
.checklist-type-tab.active .checklist-type-tab-count {
  background: var(--grad);
  color: white;
}

/* Teammate filter pills */
.checklist-filter-pills {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.checklist-filter-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 4px;
}
.checklist-filter-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 11px 5px 5px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 100px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12.5px;
  cursor: pointer;
  transition: all 0.15s;
}
.checklist-filter-pill:hover {
  border-color: var(--ink-4);
  color: var(--text);
}
.checklist-filter-pill.active {
  background: rgba(168,85,247,0.12);
  border-color: rgba(168,85,247,0.4);
  color: var(--text);
}
.checklist-filter-pill.me.active {
  background: rgba(34,230,168,0.12);
  border-color: rgba(34,230,168,0.4);
}
/* "Everyone" pill has no avatar, give it more left padding */
.checklist-filter-pill:first-of-type {
  padding-left: 14px;
}
.mini-av.inline-av {
  width: 20px;
  height: 20px;
  font-size: 9px;
}

/* Chunk 11: Teammate notes (expandable) */
.checklist-team-notes {
  border-top: 1px dashed var(--ink-3);
  padding: 0;
  background: rgba(255,255,255,0.015);
}
.checklist-team-notes-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px 10px 92px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  user-select: none;
  transition: color 0.15s, background 0.15s;
}
.checklist-team-notes-summary::-webkit-details-marker { display: none; }
.checklist-team-notes-summary:hover {
  color: var(--text);
  background: rgba(255,255,255,0.02);
}
.checklist-team-notes-summary strong {
  color: var(--mint);
  font-weight: 700;
  font-size: 13px;
  font-family: 'Fraunces', serif;
  letter-spacing: 0;
  text-transform: none;
}
.checklist-team-notes-chevron {
  margin-left: auto;
  font-size: 12px;
  color: var(--text-muted);
  transition: transform 0.2s;
}
.checklist-team-notes[open] .checklist-team-notes-chevron {
  transform: rotate(180deg);
}
.checklist-team-notes-body {
  padding: 6px 16px 14px 92px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.checklist-team-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.checklist-team-note-main { flex: 1; min-width: 0; }
.checklist-team-note-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.checklist-team-note-head strong {
  font-size: 13px;
  color: var(--text);
  font-weight: 600;
}
.checklist-team-note-meta {
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.checklist-team-note-meta .fire-row.sm { vertical-align: middle; }
.checklist-team-note-text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* Responsive: on mobile, reduce the padding-left so notes aren't cramped */
@media (max-width: 780px) {
  .checklist-team-notes-summary { padding-left: 16px; }
  .checklist-team-notes-body { padding-left: 16px; }
}

/* Chunk 10: "why matched" tags (sessions) — simplified 2-colour palette.
   Mint and purple are reserved for sessions/booths as entity colours.
   Tags use amber (AI-driven matches) and pink (session content signals) so
   they feel distinct from "in your plan" mint / "booth" purple. */
.checklist-why-header {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--amber);
  margin-top: 10px;
  margin-bottom: 6px;
}
.checklist-why-header svg { color: var(--amber); }
.checklist-why-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.checklist-why-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 9px;
  border-radius: 100px;
  font-family: inherit;
  font-size: 11.5px;
  letter-spacing: -0.005em;
  font-weight: 600;
  white-space: nowrap;
  transition: all 0.15s;
}
/* AI-match tags — all amber. Category, problem, role all share the same
   visual so the reader sees ONE colour for "why we picked this". */
.checklist-why-tag.why-category,
.checklist-why-tag.why-problem,
.checklist-why-tag.why-role {
  color: var(--amber);
  background: rgba(251,191,36,0.08);
  border: 1px solid rgba(251,191,36,0.32);
}
.checklist-why-tag.why-category::before,
.checklist-why-tag.why-problem::before,
.checklist-why-tag.why-role::before {
  content: '';
  width: 10px;
  height: 10px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fbbf24'><path d='M12 2L14 10L22 12L14 14L12 22L10 14L2 12L10 10Z'/></svg>");
  background-size: contain;
  background-repeat: no-repeat;
  flex-shrink: 0;
}
.checklist-row.attended .checklist-why-tags,
.checklist-row.attended .checklist-why-header { opacity: 0.4; }

/* Turn E2: Strong-alternative session suggestions. Appears under a session
   you've picked if another session at the same time also matches your
   onboarding. Amber AI accent to match the "Why AI picked this" tag palette. */
.checklist-alternatives {
  margin-top: 12px;
  padding: 10px 12px 8px;
  background: rgba(251,191,36,0.04);
  border: 1px dashed rgba(251,191,36,0.28);
  border-radius: 10px;
}
.checklist-alternatives-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 6px;
}
.checklist-alternatives-label svg { color: var(--amber); }
.checklist-alternative-card {
  padding: 10px 12px;
  margin-top: 6px;
  background: rgba(251,191,36,0.03);
  border: 1px solid rgba(251,191,36,0.18);
  border-radius: 8px;
  transition: background 0.15s;
}
.checklist-alternative-card:hover {
  background: rgba(251,191,36,0.06);
}
.checklist-alternative-body {
  margin-bottom: 10px;
}
.checklist-alternative-title {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.35;
  font-weight: 600;
}
.checklist-alternative-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  line-height: 1.4;
  margin-top: 3px;
}
.checklist-alternative-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.checklist-alternative-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 100px;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: -0.005em;
}
.checklist-alternative-btn.swap {
  color: var(--amber);
  border: 1px solid rgba(251,191,36,0.45);
  background: rgba(251,191,36,0.08);
}
.checklist-alternative-btn.swap:hover {
  background: var(--amber);
  border-color: var(--amber);
  color: #2a2005;
  box-shadow: 0 0 16px rgba(251,191,36,0.3);
}
.checklist-alternative-btn.dismiss {
  color: var(--text-muted);
  border: 1px solid var(--ink-4);
  background: transparent;
}
.checklist-alternative-btn.dismiss:hover {
  color: var(--text);
  border-color: var(--text-muted);
  background: rgba(255,255,255,0.04);
}

/* Day labels (extracted from inline styles) */
.checklist-day-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 18px 0 10px;
}
.checklist-day-label:first-child { margin-top: 4px; }

/* Intro paragraph for booths view */
.checklist-intro {
  font-size: 13px;
  color: var(--text-muted);
  margin-bottom: 14px;
  line-height: 1.55;
}

/* Filtered-out rows are hidden entirely — keeps the list clean as teams scale.
   Was previously dimmed, but on larger teams this led to long muted lists that
   still took up space. Now filtering actually filters. */
.checklist-row.filtered-out {
  display: none;
}

/* Inline fire-rating buttons — always visible on every row */
.row-rate-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.row-team-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.row-rate-caption {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 500;
  white-space: nowrap;
}
.row-rate-inline {
  display: inline-flex;
  gap: 2px;
  align-items: center;
  padding: 3px;
  background: rgba(0,0,0,0.15);
  border: 1px solid var(--ink-3);
  border-radius: 100px;
}
.row-fire-btn {
  background: transparent;
  border: none;
  padding: 5px 7px;
  cursor: pointer;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  line-height: 1;
  color: var(--ink-4);
}
.row-fire-btn .flame-icon {
  transition: all 0.2s cubic-bezier(.4,0,.2,1);
}
.row-fire-btn:hover .flame-icon {
  transform: scale(1.1);
}
.row-fire-btn.lit {
  color: var(--pink);
}
.row-fire-btn.lit .flame-icon {
  transform: scale(1.08);
}
.row-fire-btn.lit:hover .flame-icon {
  transform: scale(1.15);
}

/* Heat badge — shows team's aggregate rating on a session */
.heat-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 10px;
  background: rgba(255,94,132,0.08);
  border: 1px solid rgba(255,94,132,0.2);
  border-radius: 100px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--pink);
  letter-spacing: 0.02em;
}
.heat-count {
  font-weight: 600;
  opacity: 0.95;
  font-size: 11px;
}
.heat-count-sub {
  color: var(--text-muted);
  font-weight: 400;
  font-size: 9.5px;
  letter-spacing: 0.04em;
}

/* Flame icon — SVG replacement for 🔥 emoji (consistent across platforms) */
.flame-icon {
  display: inline-block;
  transition: all 0.2s cubic-bezier(.4,0,.2,1);
  vertical-align: middle;
}
.flame-icon.lit {
  color: var(--pink);
  filter: drop-shadow(0 0 6px rgba(255,94,132,0.4));
}
.flame-icon.dim {
  color: var(--ink-4);
  opacity: 0.6;
}

/* Fire glyph — utility class used elsewhere (debrief, team tab, etc.) */
.fire-glyph {
  display: inline-block;
  line-height: 1;
  transition: all 0.2s cubic-bezier(.4,0,.2,1);
}
.fire-glyph.lit {
  filter: none;
  opacity: 1;
}
.fire-glyph.dim {
  filter: grayscale(1) brightness(0.55);
  opacity: 0.4;
}
.fire-row {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}
.fire-row .fire-glyph {
  font-size: 14px;
}
.fire-row.sm .fire-glyph {
  font-size: 11px;
}

/* Chunk 14: all-lit 3-flame micro-animation — subtle pulse + staggered flicker.
   Applied wherever renderFires(3, ...) is called (hot cards, team heat, individual ratings). */
@keyframes flame-flicker-sm {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(255,94,132,0.5)); }
  50% { filter: drop-shadow(0 0 8px rgba(255,94,132,0.9)) drop-shadow(0 0 2px rgba(255,180,90,0.5)); }
}
.fire-row.all-lit .flame-icon.lit {
  animation: flame-flicker-sm 1.6s ease-in-out infinite;
}
.fire-row.all-lit .flame-icon.lit:nth-child(2) { animation-delay: 0.2s; }
.fire-row.all-lit .flame-icon.lit:nth-child(3) { animation-delay: 0.45s; }

/* In the debrief hot-cards, amplify the animation for extra flair */
.debrief-hot-card .fire-row.all-lit .flame-icon.lit {
  animation: flame-flicker-lg 1.8s ease-in-out infinite;
}
@keyframes flame-flicker-lg {
  0%, 100% {
    filter: drop-shadow(0 0 4px rgba(255,94,132,0.6));
    transform: scale(1);
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(255,94,132,1)) drop-shadow(0 0 4px rgba(255,180,90,0.7));
    transform: scale(1.08);
  }
}

/* Session description blurb — small muted text under title, 1-2 lines.
   Explains what the session is about without stepping on Accountex's own programme. */
.checklist-main-blurb {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-top: 4px;
  max-width: 62ch;
}

/* ═══ TURN B — Note panel: three states (idle / editing / saved) ═══ */

.checklist-note-panel {
  padding: 10px 16px 12px 92px; /* aligns with title after stacked tick+time leftcol */
  border-top: 1px dashed var(--ink-3);
}
@media (max-width: 780px) {
  .checklist-note-panel { padding-left: 16px; }
}

/* --- IDLE state: quiet "Add a note" prompt, always visible --- */
.checklist-note-panel.idle {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 10px;
  padding-bottom: 10px;
}
.note-add-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px 7px 10px;
  background: transparent;
  border: 1px dashed var(--ink-4);
  border-radius: 100px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.note-add-btn:hover {
  border-color: var(--mint);
  border-style: solid;
  color: var(--mint);
  background: rgba(34,230,168,0.04);
}
.note-add-btn svg { color: inherit; }
.note-add-hint {
  font-size: 11.5px;
  color: var(--text-faint);
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.04em;
}

/* --- EDITING state: textarea with starter chips + Save/Cancel --- */
.checklist-note-panel.editing {
  background: rgba(34,230,168,0.025);
  border-top: 1px solid rgba(34,230,168,0.25);
  padding-top: 14px;
  padding-bottom: 14px;
}
.note-edit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}
.note-edit-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--mint);
  text-transform: uppercase;
}
.note-starter-chips {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.note-starter-chip {
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  background: var(--ink);
  border: 1px solid var(--ink-3);
  border-radius: 100px;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.note-starter-chip:hover {
  border-color: var(--mint);
  color: var(--mint);
  background: rgba(34,230,168,0.05);
}

.rate-panel-note {
  width: 100%;
  min-height: 64px;
  padding: 10px 12px;
  background: var(--ink);
  border: 1px solid var(--ink-3);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size: 13px;
  line-height: 1.5;
  resize: vertical;
  transition: border-color 0.15s;
  box-sizing: border-box;
}
.rate-panel-note:focus {
  outline: none;
  border-color: var(--mint);
  box-shadow: 0 0 0 3px rgba(34,230,168,0.1);
}
.rate-panel-note::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}

.note-edit-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
  gap: 12px;
  flex-wrap: wrap;
}
.note-edit-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-faint);
}
.note-edit-buttons {
  display: flex;
  gap: 8px;
}
.note-edit-btn {
  padding: 7px 14px;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: all 0.15s;
}
.note-edit-btn.cancel {
  background: transparent;
  border: 1px solid var(--ink-3);
  color: var(--text-muted);
}
.note-edit-btn.cancel:hover {
  border-color: var(--ink-4);
  color: var(--text);
}
.note-edit-btn.save {
  background: var(--mint);
  border: 1px solid var(--mint);
  color: #0d1614;
  box-shadow: 0 2px 10px rgba(34,230,168,0.25);
}
.note-edit-btn.save:hover {
  background: #2ff0b4;
  border-color: #2ff0b4;
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(34,230,168,0.4);
}
.note-edit-btn.save svg { color: #0d1614; }

/* --- SAVED state: static note text + edit button --- */
.checklist-note-panel.saved {
  background: rgba(34,230,168,0.015);
  border-top-color: rgba(34,230,168,0.18);
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-top: 11px;
  padding-bottom: 11px;
}
.note-saved-body {
  flex: 1;
  min-width: 0;
}
.note-saved-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--mint);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.note-saved-text {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  word-wrap: break-word;
}
.note-saved-edit-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: transparent;
  border: 1px solid var(--ink-3);
  border-radius: 100px;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.note-saved-edit-btn:hover {
  border-color: var(--mint);
  color: var(--mint);
  background: rgba(34,230,168,0.04);
}
.checklist-box {
  width: 28px; height: 28px;
  border-radius: 7px;
  border: 2px solid var(--ink-3);
  background: var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
  cursor: pointer;
}
.checklist-box:hover { border-color: var(--mint); background: rgba(34,230,168,0.06); }
.checklist-row.attended .checklist-box {
  background: var(--mint);
  border-color: var(--mint);
}
.checklist-box svg {
  width: 12px; height: 12px;
  color: var(--ink);
  opacity: 0;
  transition: opacity 0.15s;
}
.checklist-row.attended .checklist-box svg { opacity: 1; }
.checklist-main { min-width: 0; padding-top: 2px; }
.checklist-main-title {
  font-size: 17.5px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.checklist-row.attended .checklist-main-title {
  text-decoration: line-through;
  text-decoration-color: rgba(245,242,236,0.4);
  color: var(--text-muted);
}
/* Type label — green for sessions, pink-purple for booths */
.checklist-type-label {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 2px 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  font-weight: 600;
  border-radius: 4px;
  text-transform: uppercase;
}
.checklist-type-label.session {
  background: rgba(34,230,168,0.12);
  color: var(--mint);
  border: 1px solid rgba(34,230,168,0.25);
}
.checklist-type-label.booth {
  background: rgba(168,85,247,0.12);
  color: var(--purple);
  border: 1px solid rgba(168,85,247,0.25);
}
.checklist-row.attended .checklist-type-label {
  text-decoration: none;
  opacity: 0.55;
}
.checklist-main-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 4px;
}
.checklist-main-meta-signal {
  color: var(--mint);
  font-weight: 600;
}
.checklist-avatars {
  display: flex;
  align-items: center;
  min-height: 30px;
  padding: 1px 0;
}
.mini-av {
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  border: 2px solid var(--ink-2);
  margin-left: -6px;
  flex-shrink: 0;
}
.mini-av:first-child { margin-left: 0; }
.mini-av.t1 { background: linear-gradient(135deg, rgba(255,94,132,0.5), rgba(168,85,247,0.5)); color: var(--pink); }
.mini-av.t2 { background: linear-gradient(135deg, rgba(168,85,247,0.5), rgba(0,212,214,0.5)); color: var(--purple); }
.mini-av.t3 { background: linear-gradient(135deg, rgba(0,212,214,0.5), rgba(34,230,168,0.5)); color: var(--teal); }
.mini-av.t4 { background: linear-gradient(135deg, rgba(251,191,36,0.5), rgba(255,94,132,0.5)); color: var(--amber); }

/* ═══════════════════════════════════════════════════════════════
   CHUNK 3: INSIGHTS / MAP / DEBRIEF
   ═══════════════════════════════════════════════════════════════ */

/* ─── INSIGHTS TAB ─── */
.insights-modes {
  display: flex;
  gap: 6px;
  padding: 6px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 14px;
  margin-bottom: 24px;
  max-width: 520px;
}
.insights-mode {
  flex: 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 14px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.15s;
  line-height: 1.1;
}
.insights-mode:hover { color: var(--text); }
.insights-mode.active {
  background: var(--grad);
  color: white;
  box-shadow: 0 4px 14px rgba(255,94,132,0.3);
  font-weight: 600;
}
.insights-mode .mode-label { display: block; font-size: 13px; }
.insights-mode .mode-sub {
  display: block;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-top: 1px;
}
.insights-mode.active .mode-sub { opacity: 0.85; }

/* Pre-event briefing cards */
.brief-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 32px;
}
.brief-card {
  padding: 20px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.brief-card-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pink);
  font-weight: 700;
}
.brief-card-title {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--text);
}
.brief-card-body {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
}
.brief-card-body strong { color: var(--text); font-weight: 600; }

/* Running insights (during mode) */
.running-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 32px;
}
.running-stat {
  padding: 18px 20px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 14px;
  position: relative;
  overflow: hidden;
}
.running-stat::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 3px; height: 100%;
  background: var(--mint);
}
.running-stat.pink::before { background: var(--pink); }
.running-stat.amber::before { background: var(--amber); }
.running-stat.purple::before { background: var(--purple); }
.running-stat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.running-stat-value {
  font-family: 'Fraunces', serif;
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
  color: var(--text);
  font-variation-settings: 'SOFT' 40;
  margin-bottom: 4px;
}
.running-stat-value em {
  font-style: italic;
  color: var(--mint);
}
.running-stat.pink .running-stat-value em { color: var(--pink); }
.running-stat.amber .running-stat-value em { color: var(--amber); }
.running-stat.purple .running-stat-value em { color: var(--purple); }
.running-stat-sub {
  font-size: 11.5px;
  color: var(--text-muted);
  line-height: 1.35;
}

/* Live notes feed */
.notes-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.note-feed-item {
  display: grid;
  grid-template-columns: 36px 1fr auto;
  gap: 14px;
  padding: 14px 16px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 12px;
  align-items: start;
  transition: all 0.15s;
}
.note-feed-item:hover { border-color: var(--ink-4); }
.note-feed-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  border: 1.5px solid var(--ink-3);
  flex-shrink: 0;
}
.note-feed-avatar.t1 { background: linear-gradient(135deg, rgba(255,94,132,0.4), rgba(168,85,247,0.4)); color: var(--pink); }
.note-feed-avatar.t2 { background: linear-gradient(135deg, rgba(168,85,247,0.4), rgba(0,212,214,0.4)); color: var(--purple); }
.note-feed-avatar.t3 { background: linear-gradient(135deg, rgba(0,212,214,0.4), rgba(34,230,168,0.4)); color: var(--teal); }
.note-feed-avatar.t4 { background: linear-gradient(135deg, rgba(251,191,36,0.4), rgba(255,94,132,0.4)); color: var(--amber); }
.note-feed-body { min-width: 0; }
.note-feed-attrib {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}
.note-feed-attrib strong { color: var(--text); }
.note-feed-text {
  font-size: 14px;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 6px;
}
.note-feed-context {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-faint);
  text-transform: uppercase;
}
.note-feed-sentiment {
  padding: 3px 9px;
  border-radius: 100px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 700;
  white-space: nowrap;
  align-self: start;
}
.note-feed-sentiment.positive {
  background: rgba(34,230,168,0.1);
  color: var(--mint);
  border: 1px solid rgba(34,230,168,0.25);
}
.note-feed-sentiment.mixed {
  background: rgba(251,191,36,0.08);
  color: var(--amber);
  border: 1px solid rgba(251,191,36,0.25);
}
.note-feed-sentiment.negative {
  background: rgba(239,68,68,0.08);
  color: var(--rose);
  border: 1px solid rgba(239,68,68,0.25);
}

/* Post-event mode — vendor rankings, action items */
.vendor-rank {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  padding: 18px 20px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 14px;
  margin-bottom: 10px;
  align-items: start;
}
.vendor-rank.top { border-color: rgba(34,230,168,0.3); background: linear-gradient(135deg, var(--ink-2) 0%, rgba(34,230,168,0.03) 100%); }
.vendor-rank-num {
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1;
  color: var(--text-muted);
  font-variation-settings: 'SOFT' 40;
  min-width: 46px;
}
.vendor-rank-num.first { color: var(--mint); }
.vendor-rank-num.second { color: var(--amber); }
.vendor-rank-body { min-width: 0; }
.vendor-rank-name {
  font-family: 'Fraunces', serif;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--text);
  margin-bottom: 6px;
}
.vendor-rank-summary {
  font-size: 13.5px;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 10px;
}
.vendor-rank-quotes {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--ink-3);
}
.vendor-quote {
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: 10px;
  align-items: start;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.5;
  padding: 2px 0;
}
.vendor-quote em { font-style: italic; color: var(--text); }
.vendor-rank-score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  padding: 4px 9px;
  border-radius: 100px;
  background: rgba(34,230,168,0.1);
  color: var(--mint);
  border: 1px solid rgba(34,230,168,0.25);
  font-weight: 700;
  white-space: nowrap;
  align-self: start;
}

/* Action items */
.action-item-list { display: flex; flex-direction: column; gap: 8px; }
.action-item {
  display: grid;
  grid-template-columns: 22px 1fr auto;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(251,191,36,0.04);
  border: 1px solid rgba(251,191,36,0.2);
  border-radius: 10px;
  border-left: 3px solid var(--amber);
  align-items: center;
}
.action-item-check {
  width: 20px; height: 20px;
  border-radius: 5px;
  border: 1.5px solid rgba(251,191,36,0.5);
  background: rgba(0,0,0,0.2);
  cursor: pointer;
  flex-shrink: 0;
}
.action-item-title {
  font-size: 13.5px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.4;
}
.action-item-owner {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.05em;
  color: var(--text-muted);
  padding: 4px 10px 4px 4px;
  background: rgba(0,0,0,0.3);
  border-radius: 100px;
}
.action-item-when {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--amber);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ─── MAP TAB ─── */
.map-container {
  position: relative;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 24px;
}
/* ═══ CPD TAB ═══ */
.cpd-my-card {
  background: linear-gradient(135deg, rgba(168,85,247,0.06) 0%, rgba(34,230,168,0.04) 100%);
  border: 1px solid rgba(168,85,247,0.18);
  border-radius: 16px;
  padding: 28px 26px;
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.cpd-my-card-top { }
.cpd-my-card-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.cpd-my-card-hours {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.cpd-my-card-hours-num {
  font-family: 'Fraunces', serif;
  font-size: 64px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variation-settings: 'SOFT' 40;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cpd-my-card-hours-unit {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-style: italic;
  color: var(--text-muted);
  font-variation-settings: 'SOFT' 80;
}
.cpd-my-card-meta {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}
.cpd-download-btn {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: var(--grad);
  color: white;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  box-shadow: 0 8px 24px rgba(255,94,132,0.35);
  letter-spacing: -0.01em;
}
.cpd-download-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 40px rgba(255,94,132,0.5), 0 10px 30px rgba(0,0,0,0.3);
}
.cpd-download-btn svg { color: white; }

.cpd-team-section {
  margin-bottom: 28px;
  padding: 20px 22px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 14px;
}
.cpd-team-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--ink-3);
  gap: 14px;
  flex-wrap: wrap;
}
.cpd-team-header-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.cpd-team-header-totals {
  font-size: 13px;
  color: var(--text-muted);
}
.cpd-team-header-totals strong { color: var(--text); font-weight: 600; }
.cpd-team-list { display: flex; flex-direction: column; gap: 8px; }
.cpd-team-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: var(--ink);
  border: 1px solid var(--ink-3);
  border-radius: 10px;
}
.cpd-team-row.me {
  border-color: rgba(34,230,168,0.25);
  background: rgba(34,230,168,0.03);
}
.cpd-team-row-main { min-width: 0; }
.cpd-team-row-name {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
}
.me-pill {
  display: inline-block;
  padding: 1px 6px;
  background: rgba(34,230,168,0.12);
  color: var(--mint);
  border-radius: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.cpd-team-row-meta {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 2px;
}
.cpd-team-row-hours {
  font-family: 'Fraunces', serif;
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.cpd-team-row-hours strong {
  font-size: 22px;
  font-weight: 400;
  color: var(--text);
  letter-spacing: -0.01em;
}
.cpd-team-row-hours span {
  font-size: 11px;
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.cpd-footnote {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 16px 18px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--ink-3);
  border-radius: 10px;
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.55;
}
.cpd-footnote svg {
  flex-shrink: 0;
  color: var(--text-muted);
  margin-top: 2px;
}

.map-svg-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, #0e0e1c 0%, #14142a 100%);
  position: relative;
}
.map-svg { width: 100%; height: 100%; display: block; }
.map-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 14px 20px;
  background: var(--ink);
  border-top: 1px solid var(--ink-3);
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.map-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.map-legend-dot {
  width: 10px; height: 10px; border-radius: 50%;
  flex-shrink: 0;
}
.map-legend-dot.hot { background: var(--pink); box-shadow: 0 0 8px rgba(255,94,132,0.7); }
.map-legend-dot.warm { background: var(--amber); box-shadow: 0 0 6px rgba(251,191,36,0.6); }
.map-legend-dot.cold { background: var(--text-faint); }
.map-legend-dot.teammate { background: var(--teal); box-shadow: 0 0 8px rgba(0,212,214,0.7); }

/* Map teammate sidebar */
.map-sidebar {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
  margin-top: 24px;
}
.map-sidebar-card {
  padding: 14px 16px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.map-sidebar-card.me { border-color: rgba(34,230,168,0.3); background: rgba(34,230,168,0.03); }
.map-sidebar-avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  border: 1.5px solid var(--ink-3);
  flex-shrink: 0;
}
.map-sidebar-avatar.t1 { background: linear-gradient(135deg, rgba(255,94,132,0.4), rgba(168,85,247,0.4)); color: var(--pink); }
.map-sidebar-avatar.t2 { background: linear-gradient(135deg, rgba(168,85,247,0.4), rgba(0,212,214,0.4)); color: var(--purple); }
.map-sidebar-avatar.t3 { background: linear-gradient(135deg, rgba(0,212,214,0.4), rgba(34,230,168,0.4)); color: var(--teal); }
.map-sidebar-avatar.t4 { background: linear-gradient(135deg, rgba(251,191,36,0.4), rgba(255,94,132,0.4)); color: var(--amber); }
.map-sidebar-body { flex: 1; min-width: 0; }
.map-sidebar-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 2px;
}
.map-sidebar-status {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
.map-sidebar-status strong { color: var(--mint); }

/* ─── DEBRIEF TAB ─── */

/* Debrief explainer — decodes 'debrief' for first-time users */
.debrief-explainer {
  margin-bottom: 28px;
  padding: 22px 24px;
  background: linear-gradient(135deg, rgba(168,85,247,0.05) 0%, rgba(34,230,168,0.03) 100%);
  border: 1px solid rgba(168,85,247,0.18);
  border-radius: 16px;
}
.debrief-explainer-body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 14px;
}
.debrief-explainer-body strong {
  color: var(--text);
  font-weight: 600;
}
.debrief-explainer-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 14px;
  border-top: 1px solid rgba(168,85,247,0.15);
}
.debrief-explainer-step {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}
.debrief-explainer-num {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(168,85,247,0.12);
  border: 1px solid rgba(168,85,247,0.25);
  color: var(--purple);
  border-radius: 50%;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 600;
}

/* Hot sessions list — ranked by team rating */
.debrief-hot-list { display: flex; flex-direction: column; gap: 12px; }

/* Chunk 12: hot cards with inline team notes */
.debrief-hot-card {
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 12px;
  overflow: hidden;
  transition: border-color 0.15s;
}
.debrief-hot-card:hover {
  border-color: rgba(255,94,132,0.3);
}
.debrief-hot-card.booth:hover {
  border-color: rgba(168,85,247,0.3);
}
.debrief-hot-card-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
}
.debrief-hot-notes {
  padding: 12px 16px 14px;
  border-top: 1px dashed var(--ink-3);
  background: rgba(255,255,255,0.015);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.debrief-hot-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.debrief-hot-note-body {
  flex: 1;
  min-width: 0;
}
.debrief-hot-note-head {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
  font-size: 12.5px;
}
.debrief-hot-note-head strong {
  color: var(--text);
  font-weight: 600;
}
.debrief-hot-note-vendor {
  color: var(--text-muted);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
}
.debrief-hot-note-text {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
}

/* Legacy hot row — kept for any callers still using the old class */
.debrief-hot-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 12px;
  transition: all 0.15s;
}
.debrief-hot-row:hover {
  border-color: rgba(255,94,132,0.25);
}
.debrief-hot-row.booth:hover {
  border-color: rgba(168,85,247,0.3);
}
.debrief-hot-rank {
  font-family: 'Fraunces', serif;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.03em;
  font-variation-settings: 'SOFT' 80;
  font-style: italic;
  width: 44px;
  text-align: center;
  background: linear-gradient(135deg, var(--pink) 0%, var(--purple) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1;
  position: relative;
}
.debrief-hot-card:not(:first-child) .debrief-hot-rank {
  /* Ranks 2+ still pink but dimmer */
  opacity: 0.75;
}
.debrief-hot-card:nth-child(n+4) .debrief-hot-rank {
  /* Ranks 4+ fade to muted */
  opacity: 0.55;
}
.debrief-hot-main { min-width: 0; }
.debrief-hot-title {
  font-size: 14px;
  color: var(--text);
  font-weight: 500;
  line-height: 1.4;
  margin-bottom: 3px;
}
.debrief-hot-meta {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.4;
}
.debrief-hot-rating {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}
.debrief-hot-count {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* Empty state (no ratings yet) */
.debrief-empty {
  padding: 28px 24px;
  background: var(--ink-2);
  border: 1px dashed var(--ink-3);
  border-radius: 12px;
  color: var(--text-muted);
  font-size: 13.5px;
  line-height: 1.55;
  text-align: center;
}

/* Top vendors list */
.debrief-vendor-list { display: flex; flex-direction: column; gap: 8px; }
.debrief-vendor-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 12px;
}
.debrief-vendor-rank {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 400;
  color: var(--text-muted);
  font-variation-settings: 'SOFT' 80;
  font-style: italic;
  width: 36px;
  text-align: center;
}
.debrief-vendor-main { min-width: 0; }
.debrief-vendor-name {
  font-family: 'Fraunces', serif;
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 3px;
}
.debrief-vendor-meta {
  font-size: 12.5px;
  color: var(--text-muted);
  line-height: 1.4;
}
.debrief-vendor-avatars {
  display: flex;
  gap: -4px;
  align-items: center;
}
.debrief-vendor-avatars .mini-av {
  margin-left: -6px;
  border: 2px solid var(--ink-2);
}
.debrief-vendor-avatars .mini-av:first-child { margin-left: 0; }

/* AI themes — leveled up to match the Team AI ambient treatment.
   Single wrapper with gradient + radial glow, mono label, serif gradient title,
   then a grid of tone-coloured intel-block-style cards. */
.debrief-themes-wrap {
  padding: 30px 32px 32px;
  margin-bottom: 32px;
  background: linear-gradient(135deg, rgba(168,85,247,0.06) 0%, rgba(34,230,168,0.04) 100%);
  border: 1px solid rgba(168,85,247,0.2);
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.debrief-themes-wrap::before {
  content: '';
  position: absolute;
  top: -30%; right: -10%;
  width: 50%; height: 140%;
  background: radial-gradient(circle, rgba(168,85,247,0.1) 0%, transparent 55%);
  pointer-events: none;
}
.debrief-themes-wrap::after {
  content: '';
  position: absolute;
  bottom: -40%; left: -10%;
  width: 45%; height: 120%;
  background: radial-gradient(circle, rgba(34,230,168,0.06) 0%, transparent 55%);
  pointer-events: none;
}
.debrief-themes-wrap > * { position: relative; z-index: 1; }
.debrief-themes-wrap.empty { padding-bottom: 30px; }

.debrief-themes-head { margin-bottom: 24px; max-width: 720px; }
.debrief-themes-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--purple);
  font-weight: 700;
  margin-bottom: 14px;
}
.debrief-themes-label svg { width: 14px; height: 14px; }
.debrief-themes-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(24px, 3.4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 12px;
}
.debrief-themes-title em {
  font-style: italic;
  background: linear-gradient(90deg, var(--purple), var(--mint));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.debrief-themes-lede {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0;
}

/* Grid of intel-block-style theme cards */
.debrief-themes-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
}
.debrief-theme-card {
  padding: 18px 20px 16px;
  background: rgba(255,255,255,0.02);
  /* Only a left tone-border; no other borders — avoids catching the ambient
     gradient unevenly and rendering a visible right-edge seam on some screens. */
  border: none;
  border-left: 3px solid var(--ink-3);
  border-radius: 12px;
  transition: transform 0.15s, background 0.15s;
  display: flex;
  flex-direction: column;
}
.debrief-theme-card:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.035);
}
.debrief-theme-card.tone-pink   { border-left-color: var(--pink); }
.debrief-theme-card.tone-purple { border-left-color: var(--purple); }
.debrief-theme-card.tone-mint   { border-left-color: var(--mint); }
.debrief-theme-card.tone-amber  { border-left-color: var(--amber); }

.debrief-theme-card-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 10px;
}
.debrief-theme-card.tone-pink   .debrief-theme-card-label { color: var(--pink); }
.debrief-theme-card.tone-purple .debrief-theme-card-label { color: var(--purple); }
.debrief-theme-card.tone-mint   .debrief-theme-card-label { color: var(--mint); }
.debrief-theme-card.tone-amber  .debrief-theme-card-label { color: var(--amber); }

.debrief-theme-card-title {
  font-family: 'Fraunces', serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.28;
  color: var(--text);
  margin-bottom: 10px;
}
.debrief-theme-card-body {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
  flex: 1;
}
.debrief-theme-card-body em {
  font-style: italic;
  color: var(--text);
}
.debrief-theme-card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--ink-3);
}
.debrief-theme-card-foot .mini-av { margin: 0; }
.debrief-theme-card-foot-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

@media (max-width: 640px) {
  .debrief-themes-wrap { padding: 22px 20px 24px; }
  .debrief-themes-grid { grid-template-columns: 1fr; }
}

/* Existing debrief hero (left in case referenced elsewhere, but no longer used in new markup) */
.debrief-hero {
  padding: 24px;
  margin-bottom: 28px;
  background: linear-gradient(135deg, var(--ink-2) 0%, rgba(168,85,247,0.04) 100%);
  border: 1px solid var(--ink-3);
  border-radius: 18px;
}
.debrief-hero-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--purple);
  margin-bottom: 10px;
  font-weight: 700;
}
.debrief-hero-title {
  font-family: 'Fraunces', serif;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
  font-variation-settings: 'SOFT' 40;
}
.debrief-hero-body {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 680px;
}
.debrief-hero-body strong { color: var(--text); }

/* Debrief section headers */
.team-section-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  margin-bottom: 14px;
}
.team-section-eyebrow.tone-pink   { color: var(--pink); }
.team-section-eyebrow.tone-purple { color: var(--purple); }
.team-section-eyebrow.tone-mint   { color: var(--mint); }
.team-section-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(26px, 3.6vw, 34px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--text);
  margin: 0 0 14px;
}
.team-section-title em {
  font-style: italic;
  color: var(--text);
}
.team-section-lede {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 18px;
  max-width: 640px;
}
.team-section-lede strong { color: var(--text); font-weight: 600; }

/* Email drafter */
.email-draft {
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 16px;
}
.email-draft-header {
  padding: 14px 18px;
  background: rgba(0,0,0,0.3);
  border-bottom: 1px solid var(--ink-3);
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.email-draft-row {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 10px;
  align-items: baseline;
  font-size: 13px;
}
.email-draft-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
}
.email-draft-value { color: var(--text); }
.email-draft-body {
  padding: 20px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
  background: transparent;
  border: none;
  width: 100%;
  min-height: 340px;
  resize: vertical;
  outline: none;
  font-family: inherit;
}
.email-draft-body:focus { background: rgba(255,94,132,0.02); }

.debrief-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 32px;
}
.debrief-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.debrief-btn.primary {
  background: var(--grad);
  color: white;
  border: none;
  box-shadow: 0 6px 20px rgba(255,94,132,0.3);
}
.debrief-btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(255,94,132,0.4);
}
.debrief-btn.secondary {
  background: var(--ink-2);
  color: var(--text);
  border: 1px solid var(--ink-3);
}
.debrief-btn.secondary:hover {
  border-color: var(--text-muted);
  background: var(--ink-3);
}
.debrief-btn svg { width: 15px; height: 15px; }

/* ═══ CHUNK 9: Workiro + TaxReady value CTAs (Debrief footer) ═══ */
.workiro-cta {
  padding: 32px 28px 30px;
  background: linear-gradient(180deg, var(--ink-2) 0%, var(--ink) 100%);
  border: 1px solid var(--ink-3);
  border-top: 2px solid transparent;
  background-image:
    linear-gradient(180deg, var(--ink-2), var(--ink)),
    var(--grad);
  background-origin: border-box;
  background-clip: padding-box, border-box;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}
.workiro-cta::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--grad);
  opacity: 0.9;
}
.workiro-cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.workiro-cta-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pink);
  box-shadow: 0 0 10px rgba(255,94,132,0.6);
}
.workiro-cta-headline {
  font-family: 'Fraunces', serif;
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--text);
  margin-bottom: 16px;
}
.workiro-cta-headline em {
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-style: italic;
  font-weight: 500;
}
.workiro-cta-body {
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 22px;
  max-width: 720px;
}
.workiro-cta-body strong {
  color: var(--text);
  font-weight: 600;
}
.workiro-cta-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.workiro-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.15s;
  cursor: pointer;
  border: none;
}
.workiro-cta-btn.primary {
  background: var(--text);
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
.workiro-cta-btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.4);
  background: #fff;
  color: var(--ink);
}
.workiro-cta-btn.secondary {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--ink-3);
}
.workiro-cta-btn.secondary:hover {
  border-color: var(--text-muted);
  background: var(--ink-2);
}
.workiro-cta-note {
  font-size: 13px;
  color: var(--text-muted);
  margin-left: 4px;
}
.workiro-cta-note strong { color: var(--text); font-weight: 600; }

.workiro-cta-simple {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 28px;
  align-items: center;
  padding: 28px;
}
.workiro-cta-simple .workiro-cta-headline {
  margin-bottom: 18px;
  font-size: clamp(20px, 2.6vw, 26px);
}
.workiro-cta-visual { position: relative; z-index: 1; }
.workiro-cta-visual svg { width: 100%; height: auto; display: block; }
.workiro-cta-content { position: relative; z-index: 1; }
@media (max-width: 700px) {
  .workiro-cta-simple { grid-template-columns: 1fr; gap: 20px; padding: 24px; }
  .workiro-cta-visual { max-width: 220px; margin: 0 auto; }
}

/* TaxReady CTA — subtle teal accent (matching TaxReady brand), not overwrought */
.taxready-cta {
  margin-top: 8px;
}
.taxready-cta-inner {
  padding: 32px 30px 30px;
  border-top: 2px solid #00B1B2;
  background: linear-gradient(180deg, rgba(0,177,178,0.04) 0%, transparent 100%);
  border-radius: 0 0 14px 14px;
}
.taxready-cta-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 28px;
  align-items: center;
}
@media (max-width: 780px) {
  .taxready-cta-grid { grid-template-columns: 1fr; gap: 24px; }
  .taxready-cta-visual { order: -1; }
}
.taxready-cta-copy { min-width: 0; }
.taxready-cta-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.taxready-map-svg {
  width: 100%;
  max-width: 260px;
  display: block;
}
.taxready-cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #00B1B2;
  font-weight: 700;
  margin-bottom: 14px;
}
.taxready-cta-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00B1B2;
  box-shadow: 0 0 8px #00B1B2;
}
.taxready-cta-headline {
  font-family: 'Fraunces', serif;
  font-size: clamp(22px, 2.8vw, 30px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
  margin-bottom: 14px;
}
.taxready-cta-headline em {
  font-style: italic;
  color: #00B1B2;
}
.taxready-cta-body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin-bottom: 20px;
}
.taxready-cta-body strong { color: var(--text); font-weight: 600; }
.taxready-cta-stack {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.taxready-cta-or {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  color: #00B1B2;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.taxready-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #00B1B2;
  color: #0a0a12;
  font-size: 14px;
  font-weight: 700;
  border-radius: 10px;
  text-decoration: none;
  transition: all 0.15s;
  box-shadow: 0 0 24px rgba(0,177,178,0.25);
}
.taxready-cta-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 30px rgba(0,177,178,0.4);
}
.taxready-cta-featured {
  font-size: 12px;
  color: var(--text-muted);
}

/* Chunk 14: Booth illustration under map */
.taxready-booth-illus {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 18px;
  background: linear-gradient(135deg, rgba(0,177,178,0.1), rgba(34,230,168,0.08));
  border: 1px solid rgba(0,177,178,0.35);
  border-radius: 12px;
  max-width: 200px;
  text-align: center;
}
.taxready-booth-top {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #22e6a8;
}
.taxready-booth-desc {
  font-size: 13px;
  color: var(--text);
  line-height: 1.4;
}
.taxready-booth-desc strong { color: #22e6a8; font-weight: 700; }

/* ═══════════════════════════════════════════════════════════════
   Chunk 15: TaxReady CTA v2 — rebuilt for Team tab bottom
   ═══════════════════════════════════════════════════════════════ */
.taxready-cta-v2 {
  margin-top: 48px;
  padding: 32px 28px 26px;
  background: linear-gradient(180deg, rgba(0,177,178,0.05) 0%, transparent 100%);
  border: 1px solid var(--ink-3);
  border-top: 2px solid #00B1B2;
  border-radius: 16px;
}
.taxready-cta-v2-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #00B1B2;
  font-weight: 700;
  margin-bottom: 14px;
}
.taxready-cta-v2-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00B1B2;
  box-shadow: 0 0 8px #00B1B2;
}
.taxready-cta-v2-headline {
  font-family: 'Fraunces', serif;
  font-size: clamp(24px, 3.2vw, 32px);
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--text);
  margin: 0 0 14px;
}
.taxready-cta-v2-headline em {
  font-style: italic;
  color: #00B1B2;
}
.taxready-cta-v2-body {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 0 26px;
  max-width: 720px;
}
.taxready-cta-v2-body strong {
  color: var(--text);
  font-weight: 600;
}

/* Side-by-side map + booth card */
.taxready-cta-v2-visual-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 20px;
  align-items: stretch;
  margin-bottom: 24px;
}
@media (max-width: 720px) {
  .taxready-cta-v2-visual-row {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}
.taxready-cta-v2-map {
  background: rgba(0,0,0,0.25);
  border: 1px solid var(--ink-3);
  border-radius: 12px;
  padding: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
}
.taxready-cta-v2-map svg {
  width: 100%;
  height: auto;
  display: block;
  max-height: 280px;
}

/* Booth card — clear offer promise */
.taxready-cta-v2-booth {
  background: linear-gradient(160deg, rgba(34,230,168,0.08) 0%, rgba(0,177,178,0.06) 100%);
  border: 1.5px solid rgba(34,230,168,0.35);
  border-radius: 12px;
  padding: 20px 22px 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.taxready-cta-v2-booth-top {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--mint);
  margin-bottom: 8px;
}
.taxready-cta-v2-booth-bignum {
  font-family: 'Fraunces', serif;
  font-size: 38px;
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
  margin-bottom: 8px;
  font-variation-settings: 'SOFT' 50;
}
.taxready-cta-v2-booth-desc {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  margin-bottom: 14px;
}
.taxready-cta-v2-booth-tick-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-top: 12px;
  border-top: 1px dashed rgba(34,230,168,0.25);
}
.taxready-cta-v2-booth-tick {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: var(--text);
  font-weight: 500;
}

/* Primary CTA + footer */
.taxready-cta-v2-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 13px 24px;
  background: #00B1B2;
  color: #0a0a12;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  border-radius: 11px;
  text-decoration: none;
  transition: all 0.18s;
  box-shadow: 0 0 26px rgba(0,177,178,0.28);
}
.taxready-cta-v2-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 32px rgba(0,177,178,0.42);
}
.taxready-cta-v2-foot {
  margin-top: 14px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}
.taxready-cta-v2-foot strong {
  color: var(--text);
  font-weight: 700;
}
.taxready-cta-v2-foot a {
  color: #EC008C;
  text-decoration: none;
  font-weight: 600;
}
.taxready-cta-v2-foot a:hover {
  text-decoration: underline;
}

/* CPD export rows */
.cpd-export-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cpd-export-row {
  display: grid;
  grid-template-columns: 36px 1fr auto auto;
  gap: 14px;
  align-items: center;
  padding: 12px 14px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 10px;
}
.cpd-export-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  border: 1.5px solid var(--ink-3);
  flex-shrink: 0;
}
.cpd-export-avatar.t1 { background: linear-gradient(135deg, rgba(255,94,132,0.4), rgba(168,85,247,0.4)); color: var(--pink); }
.cpd-export-avatar.t2 { background: linear-gradient(135deg, rgba(168,85,247,0.4), rgba(0,212,214,0.4)); color: var(--purple); }
.cpd-export-avatar.t3 { background: linear-gradient(135deg, rgba(0,212,214,0.4), rgba(34,230,168,0.4)); color: var(--teal); }
.cpd-export-avatar.t4 { background: linear-gradient(135deg, rgba(251,191,36,0.4), rgba(255,94,132,0.4)); color: var(--amber); }
.cpd-export-name {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--text);
}
.cpd-export-hours {
  font-family: 'Fraunces', serif;
  font-size: 20px;
  font-weight: 500;
  color: var(--mint);
  font-variation-settings: 'SOFT' 40;
  min-width: 64px;
  text-align: right;
}
.cpd-export-btn {
  padding: 7px 12px;
  background: var(--ink);
  border: 1px solid var(--ink-3);
  color: var(--text);
  font-family: inherit;
  font-size: 12px;
  font-weight: 500;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.cpd-export-btn:hover {
  border-color: var(--mint);
  color: var(--mint);
  background: rgba(34,230,168,0.05);
}
.placeholder-tab {
  padding: 60px 32px;
  text-align: center;
  background: var(--ink-2);
  border: 1px dashed var(--ink-3);
  border-radius: 20px;
}
.placeholder-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pink);
  margin-bottom: 20px;
  padding: 8px 16px;
  border: 1px solid rgba(255,94,132,0.3);
  border-radius: 100px;
  background: rgba(255,94,132,0.06);
}
.placeholder-title {
  font-family: 'Fraunces', serif;
  font-size: 32px;
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  font-variation-settings: 'SOFT' 50;
}
.placeholder-title em {
  font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.placeholder-sub {
  font-size: 15px;
  color: var(--text-muted);
  max-width: 480px;
  margin: 0 auto 24px;
  line-height: 1.55;
}
.placeholder-preview-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 440px;
  margin: 0 auto;
  text-align: left;
}
.placeholder-preview-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(0,0,0,0.2);
  border: 1px solid var(--ink-3);
  border-radius: 10px;
  font-size: 13px;
  color: var(--text-muted);
}
.placeholder-preview-item svg {
  width: 16px;
  height: 16px;
  color: var(--mint);
  flex-shrink: 0;
}
.placeholder-preview-item strong { color: var(--text); }

/* ═══════════════════════════════════════════════════════════════
   CHUNK 4: SAVE STEP + LOGIN MODAL + INVITE + FIXED CTAs
   ═══════════════════════════════════════════════════════════════ */

/* Save step (stage 75) */
.save-container {
  width: 100%;
  max-width: 620px;
  margin: 0 auto;
}
.save-inner {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.save-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint);
  padding: 8px 16px;
  border: 1px solid rgba(34,230,168,0.3);
  border-radius: 100px;
  background: rgba(34,230,168,0.06);
  align-self: flex-start;
  margin-bottom: 4px;
}
.save-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(34px, 5.5vw, 56px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.02em;
  font-variation-settings: 'SOFT' 50;
  margin: 0;
}
.save-title em {
  font-style: italic;
  font-variation-settings: 'SOFT' 90;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.save-sub {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  text-align: left;
  max-width: 560px;
  margin: 0 0 24px;
}
.save-sub strong { color: var(--text); font-weight: 600; }

/* Unlock strip — compact horizontal row, replaces the heavy three-card version */
.save-unlock-strip {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-start;
  margin: 0 0 32px;
  max-width: 560px;
}
.save-unlock-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 100px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
}
.save-unlock-chip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
}
.save-unlock-chip.tint-pink .save-unlock-chip-icon { color: var(--pink); background: rgba(255,94,132,0.14); }
.save-unlock-chip.tint-purple .save-unlock-chip-icon { color: var(--purple); background: rgba(168,85,247,0.14); }
.save-unlock-chip.tint-mint .save-unlock-chip-icon { color: var(--mint); background: rgba(34,230,168,0.14); }

/* Legacy unlock card CSS kept as no-op for backwards compat (will be removed) */
.save-unlock-cards { display: none; }

/* Form label that introduces the 3 fields */
.save-form-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
  text-align: center;
}

.save-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-top: 8px;
}
.save-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.save-row-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 520px) {
  .save-row-split { grid-template-columns: 1fr; }
}
.save-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
}
.save-required { color: var(--pink); }
.save-optional {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.1em;
  padding: 2px 7px;
  border-radius: 100px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  color: var(--text-faint);
  text-transform: uppercase;
}
.save-input {
  width: 100%;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 12px;
  padding: 15px 18px;
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  outline: none;
  transition: all 0.15s;
}
.save-input:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 4px rgba(255,94,132,0.12);
}
.save-input::placeholder { color: var(--text-faint); }
.save-input-error { border-color: rgba(239,68,68,0.6) !important; box-shadow: 0 0 0 4px rgba(239,68,68,0.12) !important; }
.save-hint {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 2px;
}
.save-error {
  font-size: 12px;
  color: #ff7a8c;
  line-height: 1.45;
  padding-top: 2px;
  min-height: 0;
}
.save-error:empty { padding-top: 0; }

/* ── Opt-in checkbox card on the save form ──────────────────────
   Clickable card that toggles the hidden checkbox. Subtle mint hint
   when unchecked (inviting), celebrated mint glow when checked. */
.opt-in-card {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 20px;
  margin: 0 0 8px;
  background:
    linear-gradient(135deg, rgba(34,230,168,0.04) 0%, rgba(34,230,168,0.02) 100%),
    var(--ink-2);
  border: 1.5px solid rgba(34,230,168,0.30);
  border-radius: 14px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s, transform 0.15s;
  position: relative;
  overflow: hidden;
  user-select: none;
}
.opt-in-card:hover {
  border-color: rgba(34,230,168,0.55);
  background:
    linear-gradient(135deg, rgba(34,230,168,0.08) 0%, rgba(34,230,168,0.04) 100%),
    var(--ink-2);
  box-shadow: 0 0 22px rgba(34,230,168,0.14);
  transform: translateY(-1px);
}
.opt-in-checkbox {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.opt-in-check-visual {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: var(--ink);
  border: 1.5px solid rgba(34,230,168,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
  transition: all 0.2s;
}
.opt-in-check-visual svg {
  width: 16px;
  height: 16px;
  color: var(--ink);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s, transform 0.2s cubic-bezier(.4,0,.2,1);
}
.opt-in-checkbox:checked + .opt-in-check-visual {
  background: var(--mint);
  border-color: var(--mint);
  box-shadow: 0 0 14px rgba(34,230,168,0.45);
}
.opt-in-checkbox:checked + .opt-in-check-visual svg {
  opacity: 1;
  transform: scale(1);
}
.opt-in-card:has(.opt-in-checkbox:checked) {
  border-color: var(--mint);
  background:
    linear-gradient(135deg, rgba(34,230,168,0.10) 0%, rgba(34,230,168,0.04) 100%),
    var(--ink-2);
  box-shadow: 0 0 28px rgba(34,230,168,0.22);
}
/* Focus ring for keyboard accessibility */
.opt-in-checkbox:focus-visible + .opt-in-check-visual {
  outline: 2px solid var(--mint);
  outline-offset: 3px;
}
.opt-in-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.opt-in-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.005em;
  line-height: 1.35;
}
.opt-in-icon {
  flex-shrink: 0;
  display: inline-flex;
  width: 18px;
  height: 18px;
  color: var(--mint);
}
.opt-in-icon svg { width: 18px; height: 18px; }
.opt-in-sub {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
}
.opt-in-sub strong { color: var(--text); font-weight: 600; }

@media (max-width: 640px) {
  .opt-in-card { padding: 16px 16px; gap: 12px; }
  .opt-in-title { font-size: 15px; }
  .opt-in-sub { font-size: 13px; }
}

.save-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  margin-top: 12px;
}
.save-cta {
  width: 100%;
  max-width: 520px;
  justify-content: center;
}
.save-trust {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  line-height: 1.5;
}
.save-trust svg { color: var(--text-muted); flex-shrink: 0; }
.save-trust-link {
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: rgba(255,255,255,0.18);
  text-underline-offset: 3px;
  transition: color 0.15s;
}
.save-trust-link:hover { color: var(--mint); text-decoration-color: var(--mint); }

.magic-link-icon {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(34,230,168,0.15), rgba(34,230,168,0.04));
  border: 1.5px solid rgba(34,230,168,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  color: var(--mint);
  animation: magic-pulse 2.2s ease-in-out infinite;
  box-shadow: 0 0 40px rgba(34,230,168,0.2);
}
@keyframes magic-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 0 30px rgba(34,230,168,0.2); }
  50% { transform: scale(1.04); box-shadow: 0 0 50px rgba(34,230,168,0.4); }
}

/* ═══ CHUNK 10: Install-as-app strip (mobile only) ═══ */
.install-strip {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 14px;
  margin: 0 -24px;
  background: rgba(34,230,168,0.06);
  border-bottom: 1px solid rgba(34,230,168,0.2);
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.4;
}
.install-strip-icon {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(34,230,168,0.12);
  color: var(--mint);
  display: flex;
  align-items: center;
  justify-content: center;
}
.install-strip-body {
  flex: 1;
  min-width: 0;
}
.install-strip-body strong { color: var(--text); font-weight: 600; }
.install-strip-dismiss {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  background: transparent;
  border: none;
  color: var(--text-muted);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.install-strip-dismiss:hover { background: var(--ink-3); color: var(--text); }
@media (max-width: 640px) {
  .install-strip { margin: 0 -14px; padding: 10px 14px; font-size: 12px; }
}

/* ═══ CHUNK 10: Rebuilt magic-link confirmation screen ═══ */
.magic-confirm {
  max-width: 560px;
  margin: 0 auto;
  padding: 12px 0 48px;
  text-align: center;
}
/* Big mail icon — the visual punch that sells "go check your inbox" */
.magic-email-hero-icon {
  width: 88px;
  height: 88px;
  border-radius: 22px;
  margin: 28px auto 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, rgba(34,230,168,0.14) 0%, rgba(34,230,168,0.06) 100%);
  border: 1px solid rgba(34,230,168,0.35);
  color: var(--mint);
  box-shadow: 0 0 36px rgba(34,230,168,0.20), inset 0 1px 0 rgba(255,255,255,0.06);
  animation: magic-email-pulse 2.4s ease-in-out infinite;
}
.magic-email-hero-icon svg { width: 44px; height: 44px; }
@keyframes magic-email-pulse {
  0%, 100% { box-shadow: 0 0 36px rgba(34,230,168,0.20), inset 0 1px 0 rgba(255,255,255,0.06); transform: scale(1); }
  50% { box-shadow: 0 0 52px rgba(34,230,168,0.32), inset 0 1px 0 rgba(255,255,255,0.06); transform: scale(1.02); }
}
/* Steps card — what to do, no save/flag wording */
.magic-action-card {
  margin: 28px auto 24px;
  padding: 24px 22px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  text-align: left;
}
.magic-action-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.magic-action-step-num {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--grad);
  color: white;
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(255,94,132,0.3);
}
.magic-action-step-body { flex: 1; min-width: 0; padding-top: 3px; }
.magic-action-step-head {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}
.magic-action-step-sub {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}
.magic-action-step-sub strong { color: var(--text); font-weight: 600; }
.magic-action-step-sub em { font-style: italic; color: var(--mint); font-weight: 600; }
/* Spam / junk reminder card */
/* "Add to contacts" pro tip — sits above the junk-folder reminder.
   Mint-tinted to feel like a positive opt-in, not an alert. */
.magic-contacts-tip {
  margin: 0 auto 14px;
  padding: 14px 18px;
  background: rgba(34,230,168,0.06);
  border: 1px solid rgba(34,230,168,0.30);
  border-radius: 12px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
}
.magic-contacts-tip-icon {
  flex-shrink: 0;
  color: var(--mint);
  margin-top: 1px;
}
.magic-contacts-tip-text {
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-muted);
}
.magic-contacts-tip-text strong { color: var(--text); font-weight: 700; }
.magic-spam-card {
  margin: 0 auto 28px;
  padding: 16px 18px;
  background: rgba(251,191,36,0.06);
  border: 1px solid rgba(251,191,36,0.30);
  border-radius: 12px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  text-align: left;
}
.magic-spam-card-icon {
  flex-shrink: 0;
  color: var(--amber);
  margin-top: 1px;
}
.magic-spam-card-text {
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-muted);
}
.magic-spam-card-text strong { color: var(--text); font-weight: 700; display: block; margin-bottom: 4px; }
.magic-spam-card-text em { font-style: normal; color: var(--text); font-weight: 600; }
/* Future-login reminder — points at /login/ */
.magic-future-note {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-muted);
  text-align: center;
  margin: 0 auto;
  max-width: 440px;
}
.magic-future-note a { color: var(--mint); font-weight: 600; text-decoration: none; }
.magic-future-note a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .magic-email-hero-icon { width: 76px; height: 76px; margin: 20px auto 20px; }
  .magic-email-hero-icon svg { width: 36px; height: 36px; }
  .magic-action-card { padding: 20px 18px; gap: 16px; }
  .magic-action-step-head { font-size: 15px; }
  .magic-action-step-sub { font-size: 13.5px; }
}
.magic-confirm-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 16px;
  background: rgba(34,230,168,0.06);
  border: 1px solid rgba(34,230,168,0.25);
  border-radius: 100px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 22px;
}
.magic-confirm-eyebrow-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 10px var(--mint);
  animation: magic-pulse 2.2s ease-in-out infinite;
}
.magic-confirm-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(34px, 5.5vw, 50px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--text);
  margin: 0 auto 18px;
  font-variation-settings: 'SOFT' 30;
  text-wrap: balance;
}
.magic-confirm-title em {
  font-style: italic;
  font-variation-settings: 'SOFT' 80;
  background: var(--grad-hero);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradient-shift 8s ease-in-out infinite;
}
.magic-confirm-sub {
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
  margin: 0 auto 8px;
  max-width: 480px;
}
.magic-confirm-sub strong { color: var(--text); font-weight: 600; }
.magic-confirm-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 18px 28px;
  background: var(--grad);
  color: white;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  border: none;
  border-radius: 14px;
  cursor: pointer;
  letter-spacing: -0.01em;
  box-shadow: var(--glow-pink), 0 10px 30px rgba(0,0,0,0.3);
  transition: transform 0.2s, box-shadow 0.2s;
}
.magic-confirm-cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--glow-pink), 0 14px 38px rgba(0,0,0,0.35);
}
.magic-confirm-cta-note {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 12px;
  margin-bottom: 24px;
}

.magic-install-card {
  padding: 22px 22px 20px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-left: 3px solid var(--mint);
  border-radius: 12px;
}
.magic-install-eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mint);
  margin-bottom: 14px;
  font-weight: 600;
}
.magic-install-steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.magic-install-steps li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.magic-install-step-num {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--mint);
  color: var(--ink);
  font-family: 'Fraunces', serif;
  font-size: 16px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 14px rgba(34,230,168,0.4);
}
.magic-install-step-body { flex: 1; min-width: 0; padding-top: 2px; }
.magic-install-step-head {
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  margin-bottom: 4px;
}
.magic-install-step-sub {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text-muted);
}
.magic-install-step-sub strong { color: var(--text); font-weight: 600; }

/* Chunk 18: Email call-out below the 3 steps — neon green email icon */
.magic-email-callout {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 14px 18px;
  background: rgba(34,230,168,0.08);
  border: 1px solid rgba(34,230,168,0.35);
  border-radius: 12px;
}
.magic-email-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(34,230,168,0.2), rgba(0,212,214,0.15));
  border: 1px solid rgba(34,230,168,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--mint);
  flex-shrink: 0;
  box-shadow: 0 0 20px rgba(34,230,168,0.25);
  animation: magic-pulse 2.2s ease-in-out infinite;
}
.magic-email-text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text);
}
.magic-email-text strong {
  color: var(--mint);
  font-weight: 700;
}

/* Chunk 18: Panellists strip */
.magic-panellists {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px dashed var(--ink-3);
  text-align: center;
}
.magic-panellists-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
  font-weight: 600;
}
.magic-panellists-row {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
}
.magic-panellist {
  text-align: center;
}
.magic-panellist-photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ink-3);
  border: 2px solid var(--ink-2);
  overflow: hidden;
  margin: 0 auto 4px;
}
.magic-panellist-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.magic-panellist-name {
  font-family: 'Fraunces', serif;
  font-size: 11px;
  color: var(--text-muted);
}

/* Confirm screen: fixed-bottom CTA */
.confirm-fixed-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  padding: 16px 24px 20px;
  background: linear-gradient(to top, rgba(10,10,18,0.98) 0%, rgba(10,10,18,0.95) 70%, transparent 100%);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: 1px solid var(--ink-3);
}
.confirm-fixed-cta-inner {
  max-width: 520px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}
.confirm-fixed-cta .continue-btn {
  width: 100%;
}
.confirm-fixed-cta-hint {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-faint);
  text-align: center;
}

/* Log-back-in button on hero */
.login-back-btn {
  background: transparent;
  border: 1px solid var(--ink-3);
  color: var(--text);
  font-family: inherit;
  font-size: 14px;
  padding: 10px 18px;
  border-radius: 10px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s;
}
.login-back-btn:hover {
  border-color: var(--mint);
  color: var(--mint);
  background: rgba(34,230,168,0.05);
}

/* Log-back-in modal */
.login-modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-modal.open {
  display: flex;
  animation: modal-fade-in 0.2s ease-out;
}
@keyframes modal-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
.login-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,10,18,0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.login-modal-panel {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 440px;
  padding: 32px 28px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 20px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.5);
  animation: modal-slide-up 0.25s cubic-bezier(.4,0,.2,1);
}
@keyframes modal-slide-up {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.login-modal-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 36px; height: 36px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid var(--ink-3);
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.login-modal-close:hover {
  border-color: var(--pink);
  color: var(--pink);
}
.login-modal-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mint);
  padding: 6px 12px;
  border: 1px solid rgba(34,230,168,0.3);
  border-radius: 100px;
  background: rgba(34,230,168,0.06);
  margin-bottom: 16px;
}
.login-modal-title {
  font-family: 'Fraunces', serif;
  font-size: 28px;
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.02em;
  margin-bottom: 10px;
  font-variation-settings: 'SOFT' 50;
}
.login-modal-title em {
  font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.login-modal-sub {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.55;
}
.login-result-success {
  margin-top: 16px;
  padding: 14px 16px;
  background: rgba(34,230,168,0.06);
  border: 1px solid rgba(34,230,168,0.25);
  border-radius: 12px;
}
.login-demo-btn {
  margin-top: 14px;
  width: 100%;
  padding: 10px 14px;
  background: var(--ink);
  border: 1px dashed var(--ink-4);
  color: var(--text-muted);
  font-family: inherit;
  font-size: 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
}
.login-demo-btn:hover {
  color: var(--text);
  border-color: var(--text-muted);
}

/* Team invite block (prominent within Team tab) */
.team-invite-hero {
  padding: 24px 28px;
  margin: 0 0 28px;
  background: linear-gradient(135deg, rgba(255,94,132,0.06) 0%, rgba(168,85,247,0.08) 100%);
  border: 1px solid rgba(168,85,247,0.25);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
}
.team-invite-hero::before {
  content: '';
  position: absolute;
  top: -30%; right: -15%;
  width: 55%; height: 160%;
  background: radial-gradient(circle, rgba(255,94,132,0.12) 0%, transparent 55%);
  pointer-events: none;
}
.team-invite-hero-inner { position: relative; z-index: 1; }
.team-invite-hero-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pink);
  font-weight: 700;
  margin-bottom: 10px;
}
.team-invite-hero-title {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 6px;
  font-variation-settings: 'SOFT' 40;
}
.team-invite-hero-title em {
  font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.team-invite-hero-sub {
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.55;
  margin-bottom: 14px;
  max-width: 600px;
}
/* Email invite form */
.team-invite-form { margin-top: 18px; }
.team-invite-input-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: stretch;
}
.team-invite-email-input {
  background: rgba(0,0,0,0.35);
  border: 1px solid var(--ink-3);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13.5px;
  color: var(--text);
  width: 100%;
  transition: border-color 0.2s;
}
.team-invite-email-input::placeholder { color: var(--text-faint); }
.team-invite-email-input:focus { outline: none; border-color: var(--pink); }
.team-invite-send-btn {
  padding: 12px 18px;
  background: var(--grad);
  color: white;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(255,94,132,0.3);
}
.team-invite-send-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 22px rgba(255,94,132,0.4); }
.team-invite-send-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.team-invite-status {
  margin-top: 10px;
  font-size: 13px;
  min-height: 20px;
}
.team-invite-status.success { color: var(--mint); }
.team-invite-status.error   { color: var(--pink); }

/* Join team prompt banner */
.team-join-prompt {
  position: sticky;
  top: 0;
  z-index: 60;
  background: linear-gradient(135deg, rgba(168,85,247,0.18) 0%, rgba(255,94,132,0.14) 100%);
  border-bottom: 1px solid rgba(168,85,247,0.35);
  backdrop-filter: blur(10px);
  padding: 14px 28px;
}
.team-join-prompt-inner {
  max-width: 784px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.team-join-prompt-text {
  font-size: 14px;
  color: var(--text);
  line-height: 1.45;
}
.team-join-prompt-text strong { font-weight: 600; }
.team-join-prompt-text em { font-style: italic; color: #d9b8ff; }
.team-join-prompt-actions { display: flex; gap: 10px; flex-shrink: 0; }
.team-join-accept-btn {
  padding: 9px 18px;
  background: var(--grad);
  color: white;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.team-join-accept-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(255,94,132,0.35); }
.team-join-accept-btn:disabled { opacity: 0.6; cursor: not-allowed; transform: none; }
.team-join-decline-btn {
  padding: 9px 14px;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.15);
  color: var(--text-muted);
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.team-join-decline-btn:hover { border-color: var(--text-muted); color: var(--text); }

/* ═══════════════════════════════════════════════════════════════
   CHUNK 4c: How-it-works strip + Panellists strip + complementarity line
   ═══════════════════════════════════════════════════════════════ */

/* Complementarity line — sits under the CTA, clarifies our position vs Accountex app */
.hero-complementarity {
  margin-top: 48px;
  padding-top: 28px;
  border-top: 1px solid var(--ink-3);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-align: center;
  max-width: 480px;
  line-height: 1.65;
  text-transform: none;
}
.hero-complementarity strong { color: var(--text); font-weight: 600; }

/* How-it-works three-card strip */
.how-it-works {
  margin: 130px auto 0;
  max-width: 1080px;
  width: 100%;
  padding: 0 24px;
}
.how-it-works-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
  margin-bottom: 18px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.how-it-works-label::before, .how-it-works-label::after {
  content: '';
  flex: 1;
  max-width: 80px;
  height: 1px;
  background: var(--ink-3);
}
.how-it-works-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: center;
  margin-bottom: 48px;
  font-variation-settings: 'SOFT' 40;
}
.how-it-works-title em {
  font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hiw-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.hiw-card {
  padding: 28px 24px;
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 18px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: all 0.2s;
  text-align: left;
  align-items: flex-start;
}
.hiw-card:hover {
  border-color: var(--ink-4);
  transform: translateY(-3px);
}
.hiw-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
}
.hiw-card-stage {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 700;
  line-height: 1;
}
.hiw-card.before .hiw-card-stage { color: var(--pink); }
.hiw-card.during .hiw-card-stage { color: var(--teal); }
.hiw-card.after .hiw-card-stage { color: var(--mint); }
.hiw-card-icon {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--ink-3);
  flex-shrink: 0;
}
.hiw-card.before .hiw-card-icon { color: var(--pink); border-color: rgba(255,94,132,0.3); background: rgba(255,94,132,0.06); box-shadow: 0 0 24px rgba(255,94,132,0.12); }
.hiw-card.during .hiw-card-icon { color: var(--teal); border-color: rgba(0,212,214,0.3); background: rgba(0,212,214,0.06); box-shadow: 0 0 24px rgba(0,212,214,0.12); }
.hiw-card.after .hiw-card-icon { color: var(--mint); border-color: rgba(34,230,168,0.3); background: rgba(34,230,168,0.06); box-shadow: 0 0 24px rgba(34,230,168,0.12); }
.hiw-card-icon svg { width: 26px; height: 26px; }
.hiw-card-title {
  font-family: 'Fraunces', serif;
  font-size: 23px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  font-variation-settings: 'SOFT' 50;
  color: var(--text);
}
.hiw-card-body {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 42ch;
}
.hiw-card-body strong { color: var(--text); font-weight: 600; }

/* Panellists strip — Francesca / Robyn / Rachel as heroes, Alex as host */
.panellists {
  margin: 90px auto 0;
  max-width: 1080px;
  width: 100%;
  padding: 48px 28px 40px;
  background: linear-gradient(135deg, rgba(168,85,247,0.04) 0%, rgba(255,94,132,0.04) 100%);
  border: 1px solid var(--ink-3);
  border-radius: 24px;
  position: relative;
  overflow: hidden;
}
.panellists::before {
  content: '';
  position: absolute;
  top: -30%; left: -10%;
  width: 50%; height: 160%;
  background: radial-gradient(circle, rgba(168,85,247,0.08) 0%, transparent 55%);
  pointer-events: none;
}
.panellists-inner { position: relative; z-index: 1; }
.panellists-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  text-align: center;
  margin-bottom: 16px;
}
.panellists-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(30px, 4vw, 42px);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.02em;
  text-align: center;
  margin: 0 auto 10px;
  max-width: 26ch;
  font-variation-settings: 'SOFT' 40;
  text-wrap: balance;
}
.panellists-title em {
  font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.panellists-sub {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.6;
  text-align: center;
  max-width: 56ch;
  margin: 0 auto 40px;
}
.panellists-sub strong { color: var(--text); }
.panellists-sub-link {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(168,85,247,0.5);
  text-underline-offset: 3px;
  text-decoration-thickness: 1.5px;
  transition: all 0.15s;
}
.panellists-sub-link:hover {
  text-decoration-color: var(--purple);
  color: var(--purple);
}
.panellists-sub-link strong { color: inherit; }

/* Register for webinar CTA */
.panellists-register {
  margin-top: 24px;
  text-align: center;
  margin-bottom: 40px;
}
.webinar-countdown {
  display: flex;
  width: fit-content;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  margin: 0 auto 22px;
  border-radius: 100px;
  background: rgba(255,94,132,0.10);
  border: 1px solid rgba(255,94,132,0.35);
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--pink);
  box-shadow: 0 0 24px rgba(255,94,132,0.15);
}
.webinar-countdown-label {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 11px;
  color: var(--pink);
  opacity: 0.85;
}
.webinar-countdown-value {
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.webinar-countdown.live {
  background: rgba(34,230,168,0.10);
  border-color: rgba(34,230,168,0.45);
  color: var(--mint);
  box-shadow: 0 0 24px rgba(34,230,168,0.20);
  animation: webinar-live-pulse 1.6s ease-in-out infinite;
}
.webinar-countdown.live .webinar-countdown-label,
.webinar-countdown.live .webinar-countdown-value {
  color: var(--mint);
  opacity: 1;
}
.webinar-countdown.ended {
  background: rgba(168,85,247,0.08);
  border-color: rgba(168,85,247,0.3);
  color: var(--purple);
  box-shadow: none;
}
.webinar-countdown.ended .webinar-countdown-label,
.webinar-countdown.ended .webinar-countdown-value {
  color: var(--purple);
  opacity: 1;
}
@keyframes webinar-live-pulse {
  0%, 100% { box-shadow: 0 0 24px rgba(34,230,168,0.20); }
  50% { box-shadow: 0 0 32px rgba(34,230,168,0.45); }
}
.panellists-register-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 24px;
  background: var(--ink);
  color: var(--mint);
  text-decoration: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  border-radius: 12px;
  border: 2px solid var(--mint);
  box-shadow: 0 0 24px rgba(34,230,168,0.15);
  transition: all 0.2s;
}
.panellists-register-btn:hover {
  transform: translateY(-2px);
  background: rgba(34,230,168,0.08);
  box-shadow: 0 10px 28px rgba(34,230,168,0.3);
}
.panellists-register-note {
  margin-top: 14px;
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
}

.panellists-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-bottom: 40px;
}
.panellist-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 28px 22px 28px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--ink-3);
  border-radius: 20px;
  transition: all 0.2s;
}
.panellist-card:hover {
  transform: translateY(-3px);
  border-color: rgba(168,85,247,0.3);
}
.panellist-photo {
  width: 128px;
  height: 128px;
  border-radius: 50%;
  background: var(--ink-3);
  border: 2px solid var(--ink-3);
  margin-bottom: 20px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 6px 28px rgba(0,0,0,0.25);
}
.panellist-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.panellist-name {
  font-family: 'Fraunces', serif;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin-bottom: 6px;
  font-variation-settings: 'SOFT' 60;
}
.panellist-role {
  font-size: 14.5px;
  color: var(--text-muted);
  line-height: 1.5;
  font-weight: 500;
}
.panellist-role strong { color: var(--text); font-weight: 600; }

/* Host (Alex) — sits below panellists with a separator */
.panellists-host {
  padding-top: 36px;
  margin-top: 8px;
  border-top: 1px dashed var(--ink-3);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
}
.panellists-host-photo {
  width: 72px; height: 72px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid var(--ink-3);
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  flex-shrink: 0;
}
.panellists-host-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.panellists-host-text {
  text-align: left;
}
.panellists-host-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.panellists-host-name {
  font-family: 'Fraunces', serif;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.015em;
  font-variation-settings: 'SOFT' 60;
}
.panellists-host-role {
  font-size: 13.5px;
  color: var(--text-muted);
  margin-top: 2px;
  font-weight: 500;
}

@media (max-width: 640px) {
  .top-bar { padding: 10px 18px; }
  .brand { gap: 10px; }
  .brand-logo { height: 26px; }
  .brand-event { font-size: 10px; letter-spacing: 0.14em; padding-top: 2px; }
  .top-bar-right { gap: 14px; }
  .top-bar-link { display: none; }
  .stage { padding: 70px 20px 40px; }
  .stage.flow-mode { padding: 96px 18px 40px; }
  /* App stage on mobile: no top gap (the tab bar IS the top chrome), no horizontal
     padding (the app-shell handles horizontal spacing). This closes the dead space
     above the install-strip that made the page look shoved down the screen. */
  body.app-active .stage.flow-mode { padding: 0 0 40px; }
  .hero-title { font-size: 42px; }
  .q-title { font-size: 30px; }
  .option { padding: 16px 18px; font-size: 15px; }
  .confirm-preview-section { padding: 16px; }
  /* Mobile two-row tab nav */
  .app-tabs-inner { padding: 0 14px; }
  .app-tabs-brand-row { padding: 12px 0 10px; }
  .app-tabs-brand-text { font-size: 15px; }
  .app-tabs-row {
    padding: 10px 0 12px;
    gap: 4px;
    /* Right-edge fade: signals more tabs are hidden off-screen */
    -webkit-mask-image: linear-gradient(to right, black calc(100% - 52px), transparent 100%);
    mask-image: linear-gradient(to right, black calc(100% - 52px), transparent 100%);
    /* Thin scrollbar for Android */
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.18) transparent;
  }
  .app-tabs-row::-webkit-scrollbar { display: block; height: 2px; }
  .app-tabs-row::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.2); border-radius: 1px; }
  .app-tab { padding: 9px 12px; font-size: 13px; flex: 0 0 auto; }
  .app-tab .tab-badge { font-size: 9px; padding: 1px 5px; }
  /* Tighter horizontal padding on mobile — was 18px, now 14px — gives content
     roughly 8px more room on each side (16px total). Matters most in dense
     content like session cards, theme grids, and the Plan Editor rows. */
  body.app-active .app-shell { padding: 0 14px 40px; }
  .plan-session { grid-template-columns: 24px auto 1fr; gap: 12px; padding: 14px 14px; }
  .plan-booth { grid-template-columns: 24px 40px 1fr; gap: 12px; padding: 14px 14px; }
  .plan-booth-desc { grid-column: 1 / -1; }
  .search-overlay { padding: 40px 18px 24px; }
  .teammate-grid { grid-template-columns: 1fr; }
  .placeholder-tab { padding: 40px 20px; }
  .placeholder-title { font-size: 24px; }
  .team-synthesis { padding: 16px 18px; }
  .team-synthesis-body { font-size: 14px; }
  .team-invite-foot { flex-direction: column; align-items: flex-start; padding: 18px; }
  .team-invite-btn { width: 100%; justify-content: center; }
  /* Chunk 4 mobile tweaks */
  .save-inner { gap: 18px; }
  .save-title { font-size: 32px; }
  .login-modal-panel { padding: 24px 20px; }
  .login-modal-title { font-size: 22px; }
  .plan-tab-content { padding: 0 16px 80px; }
  .intel-grid { grid-template-columns: 1fr; }
  .team-invite-hero { padding: 18px 20px; }
  .team-invite-input-row { grid-template-columns: 1fr; }
  .team-invite-send-btn { justify-content: center; }
  .team-join-prompt { padding: 12px 16px; }
  .team-join-prompt-inner { flex-direction: column; align-items: flex-start; }
  .confirm-fixed-cta { padding: 12px 16px 16px; }
  /* Chunk 4c mobile tweaks */
  .hiw-cards { grid-template-columns: 1fr; gap: 14px; }
  .hiw-card { padding: 22px 16px; }
  .how-it-works { margin-top: 96px; padding: 0 12px; }
  .how-it-works-title { font-size: 26px; margin-bottom: 32px; }
  .panellists { margin-top: 60px; padding: 32px 20px 28px; border-radius: 18px; }
  .panellists-grid { grid-template-columns: 1fr; gap: 14px; }
  .panellists-title { font-size: 28px; }
  .panellist-photo { width: 104px; height: 104px; margin-bottom: 16px; }
  .panellist-name { font-size: 20px; }
  .panellist-role { font-size: 13.5px; }
  .panellists-host { flex-direction: column; text-align: center; gap: 12px; padding-top: 28px; }
  .panellists-host-text { text-align: center; }
  .panellists-host-photo { width: 64px; height: 64px; }
  .hero-footnote { font-size: 14px; gap: 20px; margin-top: 24px; }
}

@media (max-width: 380px) {
  .brand-event { display: none; }
}

/* Solo invite nudge chip — appears on checklist when not in a team */
.solo-nudge-chip {
  display: inline-flex;
  align-items: stretch;
  gap: 0;
  margin-top: 14px;
  border: 1px solid rgba(0,229,178,0.35);
  border-radius: 8px;
  background: transparent;
  transition: all 0.18s;
  max-width: 100%;
}
.solo-nudge-chip:hover {
  background: rgba(0,229,178,0.06);
  border-color: rgba(0,229,178,0.5);
}
.solo-nudge-chip-body {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  font-size: 13px;
  background: transparent;
  border: none;
  color: var(--text);
  cursor: pointer;
  text-align: left;
  line-height: 1.4;
  transition: transform 0.15s;
}
.solo-nudge-chip-body:hover { transform: translateX(2px); }
.solo-nudge-chip-body strong { color: var(--mint); font-weight: 700; }
.solo-nudge-chip-body svg { color: var(--mint); flex-shrink: 0; opacity: 0.8; }
.solo-nudge-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mint);
  flex-shrink: 0;
  animation: pulse 2.4s ease-in-out infinite;
}
.solo-nudge-text { flex: 1; min-width: 0; }
.solo-nudge-chip-dismiss {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  background: transparent;
  border: none;
  border-left: 1px solid rgba(0,229,178,0.18);
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  flex-shrink: 0;
}
.solo-nudge-chip-dismiss:hover { color: var(--text); background: rgba(255,255,255,0.06); }

/* Avatar initials chip inside filter pills (team mode) */
.filter-pill-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(168,85,247,0.25);
  font-size: 9px;
  font-weight: 700;
  color: #d9b8ff;
  flex-shrink: 0;
}
.checklist-filter-pill.me .filter-pill-av {
  background: rgba(0,229,178,0.2);
  color: var(--mint);
}

/* Swap button displayed under the session time block */
.checklist-time-swap {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 5px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--mint);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  opacity: 0.75;
  transition: opacity 0.15s;
  text-transform: uppercase;
}
.checklist-time-swap:hover { opacity: 1; }
.checklist-time-swap svg { flex-shrink: 0; }
.checklist-remove-btn { display: flex; align-items: center; gap: 4px; background: none; border: none; padding: 4px 0; font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); cursor: pointer; opacity: 0; transition: opacity 0.15s, color 0.15s; margin-top: 6px; }
.checklist-row:hover .checklist-remove-btn { opacity: 1; }
.checklist-remove-btn:hover { color: var(--pink); }

/* Slot-swap modal */
.slot-swap-modal .login-modal-panel { max-height: 80vh; overflow-y: auto; }
.slot-swap-list { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.slot-swap-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--ink-3);
  border-radius: 10px;
}
.slot-swap-row.already-in-plan { opacity: 0.45; }
.slot-swap-row-main { flex: 1; min-width: 0; }
.slot-swap-row-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  margin-bottom: 2px;
}
.slot-swap-row-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  color: var(--text-muted);
  letter-spacing: 0.04em;
}
.slot-swap-match-tag, .slot-swap-already-tag {
  display: inline-block;
  margin-top: 5px;
  padding: 2px 8px;
  border-radius: 100px;
  font-size: 11px;
  font-weight: 600;
}
.slot-swap-match-tag { background: rgba(0,229,178,0.1); color: var(--mint); }
.slot-swap-already-tag { background: rgba(255,255,255,0.06); color: var(--text-muted); }
.slot-swap-row-btn {
  flex-shrink: 0;
  padding: 7px 14px;
  background: var(--mint);
  color: #0a1a12;
  border: none;
  border-radius: 8px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.slot-swap-row-btn:hover { opacity: 0.88; }
.slot-swap-row-btn.disabled { background: rgba(255,255,255,0.08); color: var(--text-muted); cursor: default; }

/* ── Sponsors footer ("Brought to you by") ──────────────────────── */
.sponsors-footer {
  padding: 64px 32px 64px;
  max-width: 784px;
  margin: 90px auto 0;
  text-align: center;
}
.sponsors-footer-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mint);
  text-align: center;
  margin-bottom: 20px;
}
.sponsors-footer-heading {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: clamp(30px, 4vw, 42px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  font-variation-settings: 'SOFT' 40;
  color: var(--text);
  margin: 0 0 32px;
  text-wrap: balance;
}
.sponsors-footer-heading em {
  font-style: italic;
  font-variation-settings: 'SOFT' 80;
  background: var(--grad-hero);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradient-shift 8s ease-in-out infinite;
}
.sponsors-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  text-align: left;
}
.sponsor-card {
  background: var(--ink-2);
  border: 1px solid var(--ink-3);
  border-radius: 18px;
  padding: 40px 32px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
}
.sponsor-card-logo {
  min-height: 96px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 12px;
}
.sponsor-card-logo img {
  width: auto;
  max-width: 100%;
  max-height: 96px;
  height: auto;
  object-fit: contain;
}
.xu-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.xu-logo-circle {
  width: 48px;
  height: 48px;
  background: #e91288;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  color: white;
  flex-shrink: 0;
  letter-spacing: -0.02em;
}
.xu-logo-word {
  font-size: 24px;
  font-weight: 400;
  color: var(--text);
}
.workiro-wm {
  display: flex;
  flex-direction: column;
}
.workiro-wm-row {
  font-size: 30px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.04em;
  line-height: 1.1;
}
.workiro-wm-accent {
  display: inline-block;
  position: relative;
}
.workiro-wm-accent::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 14px;
  height: 3px;
  background: var(--mint);
  border-radius: 2px;
}
.workiro-wm-sub {
  font-size: 13px;
  color: var(--purple);
  margin-top: 5px;
  letter-spacing: 0.02em;
}
.sponsor-card-desc {
  font-size: 16px;
  font-style: italic;
  color: var(--text);
  line-height: 1.6;
  margin: 0;
  max-width: 36ch;
  flex: 1;
}
.sponsor-card-link {
  font-size: 15px;
  font-weight: 500;
  color: var(--mint);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.sponsor-card-link:hover { opacity: 0.8; }
@media (max-width: 600px) {
  .sponsors-footer { padding: 48px 20px 48px; margin-top: 60px; }
  .sponsors-footer-heading { font-size: 28px; margin-bottom: 24px; }
  .sponsors-grid { grid-template-columns: 1fr; }
  .sponsor-card { padding: 32px 24px 26px; gap: 18px; }
  .sponsor-card-logo { min-height: 80px; }
  .sponsor-card-logo img { max-height: 80px; }
}

/* ── Page footer (Free · Built by Workiro · Privacy & terms) ────── */
.hero-page-footer {
  margin-top: 60px;
  padding: 28px 24px 36px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-faint);
  border-top: 1px solid var(--ink-3);
  width: 100%;
  max-width: 1100px;
  box-sizing: border-box;
}
.hero-page-footer a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s;
}
.hero-page-footer a:hover { color: var(--mint); }

/* ── Compact sponsors strip (above hero banner) ─────────────────── */
.sponsors-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-bottom: 28px;
}

.sponsors-strip-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mint);
}

.sponsors-strip-logos {
  display: flex;
  align-items: center;
  gap: 28px;
}

.sponsor-img {
  height: 28px;
  width: auto;
  object-fit: contain;
  opacity: 0.85;
}

.workiro-img {
  height: 22px;
}

/* ── Dedicated login page (/login/) ─────────────────────────────── */
.login-page {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 120px 24px 32px;
}
.login-page-sponsors {
  margin-top: 48px;
}
.login-page-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 480px;
}
.login-page-title {
  font-family: 'Fraunces', serif;
  font-size: clamp(36px, 5.5vw, 56px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 24px 0 16px;
  font-variation-settings: 'SOFT' 30;
  text-wrap: balance;
  color: var(--text);
}
.login-page-title em {
  font-style: italic;
  font-variation-settings: 'SOFT' 80;
  background: var(--grad-hero);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: gradient-shift 8s ease-in-out infinite;
  white-space: nowrap;
}
.login-page-sub {
  font-size: 17px;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 auto 28px;
  max-width: 44ch;
}
.login-page-sub strong {
  color: var(--text);
  font-weight: 600;
}
.login-page-invite-banner {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  margin-bottom: 24px;
  background: rgba(168,85,247,0.10);
  border: 1px solid rgba(168,85,247,0.35);
  border-radius: 100px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text);
}
.login-page-invite-banner svg {
  color: var(--purple);
  flex-shrink: 0;
}
.login-page-form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 420px;
  margin: 0 0 16px;
}
.login-page-input-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 700;
  text-align: center;
  margin-bottom: 2px;
}
.login-page-input-wrap {
  position: relative;
  width: 100%;
}
.login-page-input-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-muted);
  pointer-events: none;
  transition: color 0.2s;
}
.login-page-input {
  width: 100%;
  padding: 18px 20px 18px 50px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.16);
  border-radius: 14px;
  color: var(--text);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.005em;
  box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 4px 16px rgba(0,0,0,0.18);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.login-page-input::placeholder {
  color: var(--text-muted);
  opacity: 0.7;
}
.login-page-input:hover {
  border-color: rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.06);
}
.login-page-input:focus {
  outline: none;
  border-color: var(--mint);
  background: rgba(34,230,168,0.04);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 4px rgba(34,230,168,0.18);
}
.login-page-input:focus + .login-page-input-icon,
.login-page-input-wrap:focus-within .login-page-input-icon {
  color: var(--mint);
}
.login-page-submit {
  width: 100%;
  justify-content: center;
}
.login-page-msg {
  margin: 0 auto 20px;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 14.5px;
  line-height: 1.55;
  text-align: center;
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
}
.login-page-msg.success {
  background: rgba(34,230,168,0.10);
  border: 1px solid rgba(34,230,168,0.35);
  color: var(--text);
}
.login-page-msg.error {
  background: rgba(239,68,68,0.10);
  border: 1px solid rgba(239,68,68,0.35);
  color: var(--text);
}
.login-page-msg a {
  color: var(--mint);
  font-weight: 600;
  text-decoration: none;
}
.login-page-msg a:hover { opacity: 0.8; }
/* Resend prompt — appears 60s after a successful submit if the user
   hasn't received the email. Mint-outlined button matches the page's
   green accent semantics (positive recovery action). */
.login-page-resend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: -10px auto 16px;
  padding: 12px 18px;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--ink-3);
  border-radius: 12px;
  font-size: 13.5px;
  color: var(--text-muted);
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
  flex-wrap: wrap;
}
.login-page-resend-label { line-height: 1.5; }
.login-page-resend-btn {
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  background: transparent;
  border: 1.5px solid var(--mint);
  color: var(--mint);
  padding: 6px 16px;
  border-radius: 100px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
  white-space: nowrap;
}
.login-page-resend-btn:hover:not(:disabled) {
  background: rgba(34,230,168,0.10);
}
.login-page-resend-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  border-color: var(--ink-4);
  color: var(--text-muted);
}
.login-page-footnote {
  margin-top: 8px;
}
.login-page-divider {
  width: 100%;
  max-width: 320px;
  height: 1px;
  background: var(--ink-3);
  margin: 44px auto 28px;
}
.login-page-secondary {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 100%;
  max-width: 420px;
}
.login-page-secondary-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14.5px;
  color: var(--text-muted);
}
.login-page-secondary-link {
  color: var(--mint);
  text-decoration: none;
  font-weight: 600;
  transition: opacity 0.15s;
}
.login-page-secondary-link:hover { opacity: 0.8; }

@media (max-width: 640px) {
  .login-page { padding: 96px 18px 48px; }
  .login-page-title { font-size: 32px; }
  .login-page-sub { font-size: 16px; }
  .login-page-input { font-size: 16px; padding: 16px 18px; }
  .login-page-divider { margin: 36px auto 24px; }
}