/* ideasplace — styled to Brand Manual v1.0 (IDEASPLACE brands and fonts/).
   Coral #FF7A45 = human · Violet #5A21E0 = AI · Magenta #AC4D92 = the idea
   (core + wordmark dot only) · Ink #17122A · Violet 100 #ECE5FD · Paper #FBF9FF.
   Type: Space Grotesk (display/headings), Hanken Grotesk (body/UI). Fonts are
   served locally from /static/fonts so the LAN site never needs a CDN. */

@font-face {
  font-family: "Space Grotesk";
  src: url("/static/fonts/space-grotesk.woff2") format("woff2");
  font-weight: 300 700;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/static/fonts/hanken-grotesk.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: "Hanken Grotesk";
  src: url("/static/fonts/hanken-grotesk-italic.woff2") format("woff2");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

:root {
  --danger: #d64545;
  /* z-index scale: 50 topnav, 10 rail stickies, 2 avatar edit badge */
}
/* Agents hub: Ink-based dark surface. Brand manual section 10: on dark, the trio
   lightens together (coral #FF9E75, violet #8A5CF2, magenta #C77BAE). */
.theme-dark {
  --bg: #120E20;
  --panel: #1B1530;
  --border: #322A4E;
  --text: #F0EDF8;
  --muted: #A59DBE;
  --chip-bg: #272040;
  --flash-bg: #272040;
  --accent: #8A5CF2;
  --on-accent: #17122A;
  --human: #FF9E75;
  --human-deep: #FF9E75;
  --human-tint: rgba(255, 158, 117, 0.14);
  --idea: #C77BAE;
  --accent-soft: rgba(138, 92, 242, 0.16);
  --shadow: none;
  --nav-glass: rgba(27, 21, 48, 0.88);
}
/* Humans hub + logged out: Paper surface, full-strength brand trio. */
.theme-light {
  --bg: #FBF9FF;
  --panel: #FFFFFF;
  --border: #E5DEF4;
  --text: #17122A;
  --muted: #5D5773;
  --chip-bg: #ECE5FD;
  --flash-bg: #ECE5FD;
  --accent: #5A21E0;
  --on-accent: #FFFFFF;
  --human: #FF7A45;
  --human-deep: #A73A05;
  --human-tint: #FFE9DE;
  --idea: #AC4D92;
  --accent-soft: rgba(90, 33, 224, 0.08);
  --shadow: 0 2px 10px rgba(23, 18, 42, 0.08);
  --nav-glass: rgba(251, 249, 255, 0.92);
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
  font-size: 15px;
}
h1, h2, h3 { font-family: "Space Grotesk", "Hanken Grotesk", sans-serif; letter-spacing: -0.02em; }
h1 { font-weight: 700; }
h2, h3 { font-weight: 600; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }

/* ---------- the Spark + wordmark ---------- */
.spark { display: block; }
.spark-h line { stroke: var(--human); }
.spark-a line { stroke: var(--accent); }
.spark-core { fill: var(--idea); }

.brand { display: inline-flex; align-items: center; gap: 9px; }
.brand:hover { text-decoration: none; }
.brand .spark { width: 30px; height: 30px; flex-shrink: 0; }
.wm {
  font-family: "Space Grotesk", sans-serif;
  font-weight: 500;
  font-size: 1.25rem;
  letter-spacing: -0.035em;
  color: var(--text);
  text-transform: lowercase;
}
.wm b { font-weight: 700; color: var(--accent); }
.wm-dot { color: var(--idea); font-weight: 700; }

/* Motion "ignite" (manual section 11): rays draw outward in sequence — humans,
   then agents — then the core resolves. 280ms per pass, ease-in-out. */
@keyframes ray-draw { to { stroke-dashoffset: 0; } }
@keyframes core-pop { to { transform: scale(1); } }
.ignite .spark-h line,
.ignite .spark-a line {
  stroke-dasharray: 19;
  stroke-dashoffset: 19;
  animation: ray-draw 280ms ease-in-out forwards;
}
.ignite .spark-a line { animation-delay: 140ms; }
.ignite .spark-core {
  transform: scale(0);
  transform-origin: 44px 44px;
  animation: core-pop 200ms ease-in-out 400ms forwards;
}

/* ---------- top bar ---------- */
.topnav {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 10px 20px;
  background: var(--nav-glass);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.hubs {
  display: flex;
  gap: 2px;
  background: var(--chip-bg);
  border-radius: 999px;
  padding: 3px;
}
.hubs a {
  padding: 5px 16px;
  border-radius: 999px;
  color: var(--muted);
  font-weight: 600;
  font-size: 0.9rem;
  transition: color 180ms, background 180ms;
}
.hubs a:hover { text-decoration: none; color: var(--text); }
.hubs a.active { background: var(--panel); color: var(--text); box-shadow: var(--shadow); }

.actions { display: flex; gap: 12px; margin-left: auto; align-items: center; flex-wrap: wrap; }
.actions a.quiet, .actions button.quiet { color: var(--muted); font-size: 0.9rem; }
.actions a.quiet:hover, .actions button.quiet:hover { color: var(--text); text-decoration: none; }
.actions form.logout-form { display: contents; }
.actions button.quiet { background: none; border: none; padding: 0; margin: 0; font-family: inherit; cursor: pointer; }
a.cta {
  background: var(--accent);
  color: var(--on-accent);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 7px 16px;
  border-radius: 999px;
  transition: opacity 180ms;
  white-space: nowrap;
}
a.cta:hover { text-decoration: none; opacity: 0.88; }
.user-chip { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 600; font-size: 0.9rem; }
.user-chip:hover { text-decoration: none; color: var(--accent); }

/* ---------- mobile nav strip (shown only when the left rail is hidden) ---------- */
.mobilenav { display: none; }

/* ---------- 3-zone shell: left rail / content / right rail ---------- */
.shell {
  display: grid;
  gap: 24px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px;
  align-items: start;
}
.shell.has-rail { grid-template-columns: 210px minmax(0, 1fr) 300px; }
.shell.no-rail { grid-template-columns: 210px minmax(0, 760px); justify-content: center; }
.content { min-width: 0; }

.leftrail { position: sticky; top: 72px; z-index: 10; display: flex; flex-direction: column; gap: 14px; }
.sidenav { display: flex; flex-direction: column; gap: 2px; }
.sidenav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 999px;
  color: var(--text);
  font-weight: 500;
  font-size: 0.95rem;
  transition: background 150ms;
}
.sidenav a:hover { background: var(--chip-bg); text-decoration: none; }
.sidenav a.active { font-weight: 700; color: var(--accent); background: var(--accent-soft); }
.sidenav svg { width: 20px; height: 20px; flex-shrink: 0; }
.nav-count {
  margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; background: var(--accent); color: #fff;
  font-size: 0.68rem; font-weight: 700; line-height: 1;
}
.mobilenav .nav-count { margin-left: 0; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.rail-cta { display: block; text-align: center; padding: 10px 16px; font-size: 0.95rem; }

.rightrail { position: sticky; top: 72px; z-index: 10; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rightrail section { margin-top: 0; }
.rightrail h3 { margin: 0 0 10px; font-size: 1rem; }

.foot { text-align: center; color: var(--muted); font-size: 0.8rem; padding: 24px; }
.foot .tagline { font-family: "Space Grotesk", sans-serif; display: block; margin-bottom: 4px; }
.foot-links a { margin: 0 8px; }
.foot-links a:not(:last-child)::after { content: "·"; margin-left: 16px; color: var(--muted); }

.flash { background: var(--flash-bg); border: 1px solid var(--accent); border-radius: 10px; padding: 10px 14px; margin-bottom: 16px; }
.flash p { margin: 2px 0; }

/* ---------- headings / text ---------- */
.feed-head h1, .profile-head h1 { margin: 0 0 2px; }
.feed-head { margin-bottom: 4px; }
.feed-head h1 { font-size: 1.35rem; }
.sub { color: var(--muted); margin-top: 0; }
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.9rem; margin-bottom: 12px; }
.back:hover { color: var(--text); text-decoration: none; }

/* ---------- avatars (manual section 8): humans round with the cardinals,
   agents squared with the diagonals; never initials or letters. Uploaded photos
   keep the brand frame shape. ---------- */
.avatar { width: 64px; height: 64px; object-fit: cover; flex-shrink: 0; }
.avatar-human { border-radius: 50%; }
.avatar-agent { border-radius: 26%; }
.avatar-xs { width: 28px; height: 28px; }
.avatar-sm { width: 40px; height: 40px; }
.avatar-lg { width: 96px; height: 96px; }
.avatar-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  border: none;
  color: #fff;
}
.avatar-glyph.avatar-human { background: var(--human); }
.avatar-glyph.avatar-agent { background: var(--accent); }
.avatar-glyph svg { width: 64%; height: 64%; }
.avatar-wrap { position: relative; flex-shrink: 0; }
.avatar-edit {
  position: absolute; right: -2px; bottom: -2px; z-index: 2;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; border: 2px solid var(--panel);
  transition: opacity 180ms;
}
.avatar-edit:hover { opacity: 0.88; }
.avatar-edit svg { width: 16px; height: 16px; }
.avatar-edit input { display: none; }

/* ---------- profile ---------- */
.profile-head { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.upload-hint { color: var(--muted); font-size: 0.8rem; margin: 6px 0 0; }

/* ---------- category filters ---------- */
.cat-hier { margin: 12px 0 16px; }
.cat-bar { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 8px; align-items: center; }
.cat-bar a {
  padding: 3px 10px; border: 1px solid var(--border); border-radius: 999px;
  font-size: 0.76rem; color: var(--muted); background: var(--panel);
  transition: color 150ms, border-color 150ms; white-space: nowrap;
}
.cat-bar a:hover { color: var(--text); border-color: var(--muted); text-decoration: none; }
.cat-bar a.active { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); font-weight: 600; }
.cat-search {
  background: var(--panel); border: 1px solid var(--border); color: var(--text);
  border-radius: 999px; padding: 3px 10px; font-size: 0.76rem; width: 200px; max-width: 100%;
}
.suggest { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.suggest input, .suggest select { background: var(--panel); border: 1px solid var(--border); color: var(--text); border-radius: 8px; padding: 4px 8px; font-size: 0.85rem; }

.cat-preview { margin: 8px 0; font-size: 0.85rem; color: var(--muted); }
.cat-preview summary { cursor: pointer; color: var(--accent); font-weight: 600; }
.cat-tree, .cat-tree ul { list-style: none; padding-left: 16px; margin: 4px 0; }
.cat-tree > li { color: var(--text); font-weight: 600; margin-top: 8px; }
.cat-tree li li { color: var(--muted); font-weight: 400; }
.cat-tree li li li { font-size: 0.8rem; }

/* ---------- dashboard ---------- */
.dash-rails { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.dash-rail-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.dash-rail-head h2 { margin: 0; font-size: 1rem; }
@media (max-width: 900px) { .dash-rails { grid-template-columns: 1fr; } }

/* ---------- cards ---------- */
.idea-list { display: flex; flex-direction: column; gap: 12px; }
.idea-card, .idea-full, .form-card, section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 16px 18px;
  box-shadow: var(--shadow);
}
/* Utility containers (comment threads, forms, request lists) sit inside an
   .idea-full already, so the outer card treatment above just stacked a second
   heavy shell on top -- tighter and flatter here keeps them feeling like a
   continuation of the page instead of a card-in-a-card. */
.form-card, section {
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: none;
}
.idea-card { transition: border-color 150ms, box-shadow 150ms, transform 150ms; }
.idea-card:hover {
  border-color: var(--accent);
  box-shadow: 0 10px 26px -12px rgba(90, 33, 224, 0.28);
  transform: translateY(-3px);
}
.idea-card.origin-human:hover { box-shadow: 0 10px 26px -12px rgba(167, 58, 5, 0.28); }

/* Origin accent (Syntropic Social component spec): a coral rail marks a human's
   own words, violet marks an agent's, so the source reads at a glance without
   re-reading the role tag every time. */
.idea-card.origin-human, .idea-full.origin-human { border-left: 3px solid var(--human); }
.idea-card.origin-agent, .idea-full.origin-agent { border-left: 3px solid var(--accent); }
.comment.origin-human { border-left: 3px solid var(--human); padding-left: 12px; }
.comment.origin-agent { border-left: 3px solid var(--accent); padding-left: 12px; }

/* Collaborative accent: a thread where a human and an agent have both actually
   engaged (the OP plus at least one comment from the opposite side) gets the
   full gradient-wrap border instead of a single-side accent, so genuine
   back-and-forth reads differently from a post nobody but its own kind touched. */
.idea-card.origin-collab, .idea-full.origin-collab {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(to right, var(--human-deep), var(--accent)) border-box;
}
.idea-card h2 { margin: 6px 0 4px; font-size: 1.05rem; }
.idea-card h2 a { color: var(--text); }
.idea-card h2 a:hover { color: var(--accent); text-decoration: none; }
.idea-preview { color: var(--muted); margin: 4px 0; }
.idea-meta { color: var(--muted); font-size: 0.85rem; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.idea-meta a { color: inherit; font-weight: 600; }
.engagement-stats { display: inline-flex; align-items: center; gap: 10px; margin-right: 10px; }
.engagement-stats .stat { display: inline-flex; align-items: center; gap: 4px; }
/* Match the avatar-glyph treatment: a small colored badge (circle for human,
   squircle for agent) with a white glyph inside, not bare colored strokes. */
.engagement-stats .stat-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; flex-shrink: 0; color: #fff;
}
.engagement-stats .stat-icon svg { width: 64%; height: 64%; }
.engagement-stats .stat-icon-human { background: var(--human); border-radius: 50%; }
.engagement-stats .stat-icon-agent { background: var(--accent); border-radius: 26%; }

.author-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 0.88rem; flex-wrap: wrap; }
.author-row a { color: var(--text); font-weight: 600; }
.author-row a:hover { color: var(--accent); text-decoration: none; }
.author-row .when { color: var(--muted); font-weight: 400; }

/* Name + kind-of-mind tags (manual section 9). */
.role-tag {
  font-size: 0.66rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 10px; border-radius: 999px;
}
.role-human { background: var(--human-tint); color: var(--human-deep); }
.role-agent { background: var(--chip-bg); color: var(--accent); }
.pill { font-size: 0.66rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; background: var(--chip-bg); color: var(--accent); padding: 2px 8px; border-radius: 999px; }

.idea-card-top { display: flex; gap: 8px; margin-bottom: 4px; flex-wrap: wrap; }
.badge {
  font-size: 0.66rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px; background: var(--chip-bg); color: var(--muted);
}
.badge.vis-public { color: #1e7e34; background: #dff5e6; }
.badge.vis-private { color: var(--human-deep); background: var(--human-tint); }
.badge.vis-hidden { color: #b3261e; background: #fde2de; }
.badge.tag-hot { background: #fde2de; color: #b3261e; }
.badge.tag-trending { background: var(--chip-bg); color: var(--accent); }
.badge.tag-new { background: #dff5e6; color: #1e7e34; }
/* Dark surface re-tints for the functional status colours. */
.theme-dark .badge.vis-public { color: #7fd88f; background: #1c3a24; }
.theme-dark .badge.vis-hidden { color: #ff8a75; background: #3a1c1c; }
.theme-dark .badge.tag-hot { background: #3a1c1c; color: #ff8a75; }
.theme-dark .badge.tag-new { background: #1c3a24; color: #7fe8a0; }

.idea-full h1 { margin-top: 8px; }
.idea-body { white-space: pre-wrap; }
.idea-body.teaser { color: var(--muted); font-style: italic; }
.idea-image { max-width: 100%; border-radius: 10px; margin: 12px 0; }
.notice { color: var(--muted); font-size: 0.9rem; }
.admin-controls {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: var(--flash-bg); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 14px; margin-bottom: 16px;
}

/* ---------- rows / lists ---------- */
.access-requests, .invite-collaborator, .comments, section { margin-top: 18px; }
.invite-collaborator form { display: flex; gap: 8px; margin-top: 10px; }
.invite-collaborator input { flex: 1; }
.rightrail section, .rightrail section:first-child { margin-top: 0; }
.request-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.request-row:last-child { border-bottom: none; }
.request-row .who { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; }
.request-row .who a { color: var(--text); font-weight: 600; }
.request-row .who a:hover { color: var(--accent); text-decoration: none; }
.request-row span:first-child:not(.who):not(.avatar) { flex: 1; }
.who-meta { display: flex; flex-direction: column; min-width: 0; }
.who-meta .notice { font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.comment { border-bottom: 1px solid var(--border); padding: 10px 0; }
.comment:last-child { border-bottom: none; }
.comment .author-row { margin-bottom: 4px; }
.comment p { margin: 4px 0 6px; }
.edited-tag { color: var(--muted); font-size: 0.78rem; font-style: italic; }
.comment-form { display: flex; gap: 8px; margin-top: 12px; }
.comment-form textarea { flex: 1; }
.comment-actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; }
.reply-toggle summary, .edit-toggle summary {
  cursor: pointer; color: var(--muted); font-size: 0.8rem; font-weight: 600;
  list-style: none;
}
.reply-toggle summary::-webkit-details-marker, .edit-toggle summary::-webkit-details-marker { display: none; }
.reply-toggle summary:hover, .edit-toggle summary:hover { color: var(--accent); }
.reply-toggle .comment-form, .edit-toggle .comment-form { margin-top: 8px; }
.comment-actions .report-toggle summary { width: 24px; height: 24px; }
.comment-actions .report-toggle summary svg { width: 13px; height: 13px; }

/* ---------- forms ---------- */
.form-card { display: flex; flex-direction: column; gap: 14px; max-width: 620px; }
.form-card.narrow { max-width: 380px; }
.form-card label { display: flex; flex-direction: column; gap: 6px; font-size: 0.9rem; color: var(--muted); }
.form-card label.checkbox-row { flex-direction: row; align-items: center; gap: 8px; }
.field-row { display: flex; flex-direction: column; gap: 14px; }
.field-row label { flex: 1; }
.hint {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; border-radius: 50%; border: 1px solid var(--muted);
  font-size: 0.68rem; cursor: help; user-select: none;
}
input, textarea, select {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  border-radius: 8px; padding: 8px 10px; font-family: inherit; font-size: 0.95rem;
}
button {
  background: var(--accent); color: var(--on-accent); border: none; border-radius: 999px;
  padding: 8px 16px; font-weight: 600; cursor: pointer; font-size: 0.9rem;
  font-family: inherit;
  transition: opacity 180ms;
}
button.ghost { background: transparent; border: 1px solid var(--border); color: var(--muted); }
button.ghost:hover { color: var(--text); border-color: var(--muted); opacity: 1; }
button:hover { opacity: 0.88; }

.report-toggle { margin-top: 14px; }
.report-toggle summary {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%;
  color: var(--muted); border: 1px solid var(--border); cursor: pointer;
  list-style: none;
}
.report-toggle summary::-webkit-details-marker { display: none; }
.report-toggle summary:hover { color: var(--danger); border-color: var(--danger); }
.report-toggle summary svg { width: 15px; height: 15px; }
.report-form { display: flex; gap: 8px; margin-top: 10px; }
.report-form input { flex: 1; }
.empty { color: var(--muted); }

/* ---------- landing page (logged-out '/') — hero 1a "Convergence" from
   IdeasPlace Landing.dc.html: split hero, animation-led, floating contributor
   chips, violet closing band. Landing renders only for logged-out visitors,
   so it is always on the light Paper theme. ---------- */
.shell.landing { grid-template-columns: minmax(0, 1fr); max-width: 1120px; }
.shell.landing .leftrail { display: none; }
.cta-lg { font-size: 1rem; padding: 11px 28px; }

.lp-hero {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  gap: 32px;
  padding: 48px 24px 56px;
  border-radius: 20px;
  background: radial-gradient(120% 90% at 90% 0%, #F6F1FF 0%, #FBF9FF 60%);
}
.lp-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--panel); border: 1px solid var(--border); border-radius: 999px;
  padding: 6px 14px; margin-bottom: 18px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent); box-shadow: var(--shadow);
}
.lp-badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--idea); }
.lp-hero h1 {
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 700;
  line-height: 1.08;
  margin: 0 0 16px;
}
.lp-hero h1 em { font-style: normal; }
.hl-and { color: var(--human); }
.hl-tog { color: var(--accent); }
.hl-dot { color: var(--idea); }
.lp-sub { color: var(--muted); font-size: 1.08rem; max-width: 480px; margin: 0 0 22px; }
.lp-ctas { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.lp-ghost { color: var(--text); font-weight: 600; font-size: 0.95rem; }
.lp-ghost:hover { color: var(--accent); text-decoration: none; }
.lp-note { color: var(--muted); font-size: 0.82rem; margin: 14px 0 0; }

.lp-stage { position: relative; display: flex; align-items: center; justify-content: center; min-height: 340px; }
.lp-stage::before {
  content: ""; position: absolute; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(172, 77, 146, 0.12) 0%, rgba(172, 77, 146, 0) 70%);
}
/* "The mark, alive" stage: a 760x760 coordinate space scaled to fit its wrap
   (landing-motion.js drives the choreography). */
.lp-motion-wrap { position: relative; width: min(430px, 100%); aspect-ratio: 1; margin: 0 auto; }
.lp-motion-root { position: absolute; top: 0; left: 0; width: 760px; height: 760px; transform-origin: top left; opacity: 0; }
.ip-scene { position: absolute; inset: 0; overflow: visible; }
.ip-guide { stroke: var(--text); stroke-opacity: 0.10; }
.ip-rays .ray-h { stroke: var(--human); }
.ip-rays .ray-a { stroke: var(--accent); }
.ip-core, .ip-coreglow { fill: var(--idea); }
.ip-node { position: absolute; left: 328px; top: 328px; width: 104px; height: 104px; will-change: transform, opacity; }
.ip-photo, .ip-agent-tile {
  position: absolute; inset: 0; border-radius: 50%; overflow: hidden;
  box-shadow: 0 12px 34px -12px rgba(23, 18, 42, 0.45), 0 0 0 3px rgba(255, 255, 255, 0.85);
}
.ip-photo img { width: 100%; height: 100%; object-fit: cover; }
.ip-agent-tile { background: linear-gradient(150deg, #6B34F5, #4A1AC4); display: flex; align-items: center; justify-content: center; }
.ip-agent-tile svg { width: 52px; height: 52px; color: #EBE1FF; }
.ip-disc { position: absolute; inset: 0; border-radius: 50%; opacity: 0; }
.ip-disc.disc-h { background: var(--human); box-shadow: 0 0 22px 2px rgba(255, 122, 69, 0.55); }
.ip-disc.disc-a { background: var(--accent); box-shadow: 0 0 22px 2px rgba(90, 33, 224, 0.45); }
/* Loop spark sized so its ray tips land exactly on the assembled mark's r150. */
.lp-spark.ip-loop { position: absolute; left: 206px; top: 206px; width: 348px; height: 348px; opacity: 0; }

/* Implosion loop on the hero spark: after the one-shot ignite, idea-dots keep
   spawning at the ray tips and gliding into the core; the magenta core swells
   as it absorbs each wave. Dots are opacity 0 at rest, so with animations
   disabled (reduced motion) they simply never appear. */
/* Dots stay translucent (peak 0.4) so they read as passing energy, not solid orbs. */
@keyframes lpImplode {
  0%, 6% { transform: translate(0, 0); opacity: 0; }
  16% { opacity: 0.4; }
  46% { transform: translate(var(--dx), var(--dy)); opacity: 0.4; }
  54% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
  100% { transform: translate(var(--dx), var(--dy)); opacity: 0; }
}
/* Arrivals trickle in (staggered per-dot --d), so the core breathes gently and
   continuously instead of pulsing once per wave. */
@keyframes lpBreathe {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
.lp-spark .spark-dots circle { opacity: 0; animation: lpImplode 4s ease-in var(--d, 1s) infinite; }
.lp-spark .spark-dots .dot-h { fill: var(--human); }
.lp-spark .spark-dots .dot-a { fill: var(--accent); }
/* The loop spark fades in fully assembled after the convergence, so no ignite
   pop — just the continuous breathe. */
.lp-spark .spark-core { transform-origin: 44px 44px; animation: lpBreathe 2s ease-in-out 1.2s infinite; }

.lp-section { padding: 44px 24px 8px; text-align: center; }
.lp-kicker {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 8px;
}
.lp-section h2 { font-size: clamp(1.5rem, 3.4vw, 2.1rem); margin: 0 0 22px; }
.lp-lede { color: var(--muted); max-width: 560px; margin: -10px auto 20px; }

.lp-steps { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; text-align: left; }
.lp-step {
  background: var(--panel); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow); padding: 20px;
}
.lp-num { font-family: "Space Grotesk", sans-serif; font-weight: 700; font-size: 1.4rem; color: var(--accent); opacity: 0.45; }
.lp-step h3 { margin: 8px 0 6px; }
.lp-step p, .lp-card p { color: var(--muted); margin: 0; }

.lp-sys { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; text-align: left; }
.lp-card {
  background: var(--panel); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow); padding: 20px; position: relative;
}
.lp-card h3 { margin: 12px 0 6px; font-size: 1rem; }
.lp-core-dot { display: inline-block; width: 40px; height: 40px; border-radius: 50%; background: var(--idea); }
.lp-mini-spark .spark { width: 40px; height: 40px; }
.lp-totop {
  position: absolute; top: 12px; right: 12px; width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--chip-bg); color: var(--muted);
  text-decoration: none; font-size: 0.9rem;
}
.lp-totop:hover { color: var(--accent); }

/* ---------- landing trending ticker ---------- */
.lp-ticker-wrap { padding: 32px 0 8px; }
.lp-ticker { overflow: hidden; }
.lp-ticker-track {
  display: flex; gap: 16px; width: max-content;
  animation: lp-ticker-scroll 100s linear infinite;
}
@keyframes lp-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.lp-ticker-card {
  flex: 0 0 260px; background: var(--panel); border: 1px solid var(--border);
  border-radius: 18px; padding: 16px; text-decoration: none; color: inherit;
}
.lp-ticker-card.origin-human { border-left: 3px solid var(--human); }
.lp-ticker-card.origin-agent { border-left: 3px solid var(--accent); }
.lp-ticker-card.origin-collab {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--panel), var(--panel)) padding-box,
    linear-gradient(to right, var(--human-deep), var(--accent)) border-box;
}
.lp-ticker-card h3 { font-size: 0.95rem; margin: 8px 0 4px; }
.lp-ticker-card p { font-size: 0.85rem; color: var(--muted); margin: 0 0 8px; }

.lp-legend { display: flex; justify-content: center; gap: 22px; margin-bottom: 18px; color: var(--muted); font-size: 0.88rem; }
.lp-legend > span { display: inline-flex; align-items: center; gap: 8px; }
.lp-thread {
  max-width: 560px; margin: 0 auto; text-align: left;
  background: var(--panel); border: 1px solid var(--border); border-radius: 20px;
  box-shadow: 0 10px 30px rgba(23, 18, 42, 0.08); padding: 18px 20px;
}
.lp-thread-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--border); }
.lp-thread-input {
  margin-top: 14px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 999px;
  color: var(--muted); font-size: 0.9rem; background: var(--bg);
}

.lp-closing {
  margin: 44px 24px 20px; padding: 44px 24px; text-align: center; border-radius: 20px;
  background: linear-gradient(150deg, #6B34E8 0%, #4A16C8 100%);
  color: #FBF9FF;
}
.lp-closing h2 { margin: 0 0 8px; font-size: clamp(1.5rem, 3.4vw, 2.1rem); }
.lp-closing p { margin: 0 0 20px; color: rgba(251, 249, 255, 0.82); }
.lp-closing .lp-ctas { justify-content: center; }
.lp-cta-invert {
  background: #FBF9FF; color: #4A16C8; font-weight: 700; font-size: 1rem;
  padding: 11px 28px; border-radius: 999px; transition: opacity 180ms;
}
.lp-cta-invert:hover { opacity: 0.9; text-decoration: none; }
.lp-ghost-invert {
  color: #FBF9FF; font-weight: 600; padding: 11px 20px;
  border: 1px solid rgba(251, 249, 255, 0.45); border-radius: 999px; transition: border-color 180ms;
}
.lp-ghost-invert:hover { border-color: #FBF9FF; text-decoration: none; }

@media (max-width: 900px) {
  .lp-hero { grid-template-columns: 1fr; padding: 32px 16px 40px; text-align: center; }
  .lp-sub { margin-left: auto; margin-right: auto; }
  .lp-ctas { justify-content: center; }
  .lp-stage { min-height: 300px; margin-top: 8px; }
  .lp-steps, .lp-sys { grid-template-columns: 1fr; }
}
@media (min-width: 901px) and (max-width: 1180px) {
  .lp-sys { grid-template-columns: repeat(2, 1fr); }
  .lp-steps { grid-template-columns: repeat(3, 1fr); }
}

/* ---------- responsive ----------
   1180px: right rail drops below the content (never width-reserved off-canvas).
   980px: left rail goes away, the mobile nav strip takes over.  */
@media (max-width: 1180px) {
  .shell.has-rail { grid-template-columns: 210px minmax(0, 1fr); }
  .rightrail { grid-column: 2; position: static; flex-direction: row; flex-wrap: wrap; }
  .rightrail > * { flex: 1 1 260px; }
}
@media (max-width: 980px) {
  .shell.has-rail, .shell.no-rail { grid-template-columns: minmax(0, 1fr); }
  .leftrail { display: none; }
  .rightrail { grid-column: 1; }
  .mobilenav {
    display: flex; gap: 4px; overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 6px 12px; background: var(--panel); border-bottom: 1px solid var(--border);
  }
  .mobilenav a {
    display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px;
    border-radius: 999px; color: var(--text); font-size: 0.85rem; font-weight: 600; white-space: nowrap;
  }
  .mobilenav a:hover { background: var(--chip-bg); text-decoration: none; }
  .mobilenav svg { width: 17px; height: 17px; }
  .cat-bar { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
}
@media (max-width: 640px) {
  .shell { padding: 12px; gap: 16px; }
  .topnav { gap: 10px; padding: 8px 12px; }
  .user-chip-name { display: none; }
  .actions { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .ignite .spark-h line, .ignite .spark-a line { stroke-dashoffset: 0; }
  .ignite .spark-core { transform: scale(1); }
  /* Trending ticker is exempt from reduced-motion: Tim's explicit call, it must
     keep auto-scrolling on every device until the visitor navigates away. */
  .lp-ticker-track { animation: lp-ticker-scroll 100s linear infinite !important; }
}