/* GENERATED FILE - do not edit. Source: src/styles/. Rebuild: npm run build */
/* Flashbag - index page styles. Shared chrome lives in ../site.css. */

.ic-yellow-orange { background: #fbbf24; color: #f97316; }
/* Mode toggle + swap */
.hero-toggle {
  text-align: center;
  margin: 0 0 64px;
}
.mode-toggle {
  display: inline-flex;
  padding: 4px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 999px;
  gap: 2px;
  box-shadow: var(--shadow-sm);
}
.mode-toggle button {
  padding: 8px 18px;
  border-radius: 999px;
  border: none;
  background: transparent;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-2);
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
  letter-spacing: -0.005em;
}
.mode-toggle button:hover { color: var(--ink); }
.mode-toggle button.active {
  background: var(--ink);
  color: white;
}
.mode-toggle button.active:hover { color: white; }
body[data-mode="business"] [data-mode="personal"] { display: none !important; }
body[data-mode="personal"] [data-mode="business"] { display: none !important; }
/* Personal-mode color scheme */
body[data-mode="personal"] {
  --bg: #fdf3e8;
  --bg-warm: #f6e6d1;
  --white: #fbf5eb;
  --blue: #ea6a2b;
  --blue-2: #d15a1e;
  --blue-soft: #fce7d1;
  --border: #eadfce;
  --border-strong: #d9c4a5;
}
body[data-mode="personal"] header.nav {
  background: rgba(253, 243, 232, .88);
}
body[data-mode="personal"] .step:nth-child(1)::before {
  box-shadow: 0 6px 14px rgba(234, 106, 43, .28);
}
body[data-mode="personal"] .closer-card {
  background:
    radial-gradient(70% 100% at 100% 0%, rgba(251, 191, 36, .38) 0%, transparent 55%),
    radial-gradient(70% 100% at 0% 100%, rgba(249, 115, 22, .35) 0%, transparent 55%),
    linear-gradient(135deg, #ea6a2b 0%, #a83c0a 100%);
}
body[data-mode="personal"] .closer-card .btn { background: #ffffff; }
body[data-mode="personal"] .closer-card .btn:hover { background: #fff9f0; }
/* ---- HERO ---- */
.hero {
  padding: 88px 0 96px;
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 64px;
  align-items: center;
}
@media (max-width: 980px) {
  .hero { padding: 56px 0 72px; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-shot { order: -1; }
  .hero-toggle { margin-bottom: 32px; }
}
main h1 {
  font-size: clamp(40px, 4.9vw, 66px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0 0 24px;
  color: var(--ink);
}
/* Section H2 highlight - 30–48px font, tighter line-height compensation */
.h2-hl {
  background: linear-gradient(to bottom, transparent 55%, #fde047 55%);
  padding: 0 4px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
body[data-mode="personal"] .h1-hl,
body[data-mode="personal"] .h2-hl {
  background: linear-gradient(to bottom, transparent 52%, #ffb585 52%);
}
body[data-mode="personal"] .h2-hl {
  background: linear-gradient(to bottom, transparent 55%, #ffb585 55%);
}
.hero p.lede {
  font-size: 19px;
  color: var(--ink-2);
  max-width: 52ch;
  margin: 0 0 36px;
  line-height: 1.55;
}
.hero p.lede strong,
.spotlight-copy p strong,
.wide-header p strong { color: var(--ink); font-weight: 700; }
.hero-cta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.hero-mac {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-radius: 12px;
  background: var(--white);
  border: 1px solid var(--border);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.hero-mac svg {
  width: 22px; height: 22px;
  color: var(--ink);
}
.hero-mac .lines {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.3;
}
.hero-mac .primary { font-size: 13.5px; font-weight: 600; }
.hero-mac .secondary { font-size: 11.5px; color: var(--muted); font-weight: 500; }
.hero-shot {
  position: relative;
}
.hero-shot .frame {
  background: var(--white);
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  transform: rotate(0deg);
}
.hero-shot .frame img {
  width: 100%;
  display: block;
}
/* ---- SPOTLIGHT (memory) ---- */
.spotlight {
  padding: 96px 0;
  border-top: 1px solid var(--border);
}
.spotlight-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr);
  gap: 64px;
  align-items: center;
}
@media (max-width: 900px) {
  .spotlight { padding: 72px 0; }
  .spotlight-grid { grid-template-columns: 1fr; gap: 48px; }
}
.spotlight-copy h2 {
  font-size: clamp(32px, 4vw, 46px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0 0 20px;
  color: var(--ink);
  max-width: 14ch;
}
.spotlight-copy p {
  font-size: 18px;
  color: var(--ink-2);
  max-width: 44ch;
  margin: 0;
  line-height: 1.6;
}
.memory-card {
  background: var(--white);
  border-radius: 20px;
  border: 1px solid var(--border);
  padding: 8px;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.memory-inner { padding: 24px 24px 20px; }
.memory-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.memory-header .icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: var(--blue-soft);
  display: grid; place-items: center;
  font-size: 15px;
}
.memory-header .title {
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}
.memory-header .sub {
  font-size: 12px;
  color: var(--muted);
  font-weight: 500;
}
.memory-header .status {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
}
.memory-header .status .pulse {
  width: 8px; height: 8px; border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34, 197, 94, .18);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(34, 197, 94, .18); }
  50% { box-shadow: 0 0 0 7px rgba(34, 197, 94, .06); }
}
/* Two-panel body */
.memory-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding-top: 4px;
}
.memory-panels .panel { padding: 8px 0; }
.memory-panels .panel-transcripts { padding-right: 20px; }
.memory-panels .panel-facts { padding-left: 20px; border-left: 1px solid var(--border); }
@media (max-width: 620px) {
  .memory-panels { grid-template-columns: 1fr; }
  .memory-panels .panel-transcripts { padding-right: 0; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
  .memory-panels .panel-facts { padding-left: 0; padding-top: 20px; border-left: none; }
}
.panel-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 14px;
}
.panel-label .count {
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  background: var(--bg-warm);
  padding: 2px 8px;
  border-radius: 999px;
  letter-spacing: 0;
}
/* Transcripts */
.transcript-item {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
}
.transcript-item:last-of-type { border-bottom: none; }
.transcript-item .row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--ink);
}
.transcript-item .date {
  color: var(--muted);
  font-weight: 600;
  font-size: 12px;
  min-width: 28px;
}
.transcript-item .t-title {
  flex: 1;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--ink);
}
.transcript-item .wc {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.transcript-item.expanded {
  background: var(--bg);
  border-radius: 10px;
  padding: 12px 12px;
  margin: 0 -6px 6px;
  border-bottom: none;
}
.transcript-item.expanded .wc { color: var(--blue); font-weight: 700; }
.transcript-item.expanded .excerpt {
  margin-top: 10px;
  padding: 10px 12px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 12.5px;
  color: var(--ink-2);
  font-style: italic;
  line-height: 1.55;
}
.transcript-item.expanded .excerpt .marker {
  color: var(--muted);
  font-style: normal;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}
/* Facts */
.fact-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.fact-item:last-of-type { border-bottom: none; }
.fact-item .check {
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--blue-soft);
  color: var(--blue);
  display: grid; place-items: center;
  font-size: 10px;
  font-weight: 800;
  margin-top: 2px;
}
.fact-item .fact-text {
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.5;
}
.fact-item .meta {
  font-size: 11px;
  color: var(--muted);
  margin-top: 3px;
}
.fact-item.fresh {
  background: var(--yellow-soft);
  padding: 10px 10px;
  margin: 0 -6px 4px;
  border-radius: 8px;
  border-bottom: none;
}
.fact-item.fresh .check { background: var(--yellow); color: var(--ink); }
.fact-item.fresh + .fact-item { border-top: 1px solid var(--border); }
.fact-item .new-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--ink);
  color: white;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}
/* Panel footers */
.panel-foot {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
}
.panel-foot strong { color: var(--ink); font-weight: 700; display: block; margin-bottom: 2px; }
/* Reversed spotlight (visual left / copy right) */
.spotlight.alt .spotlight-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
}
.spotlight.alt .spotlight-copy h2 { max-width: 18ch; }
.spotlight.alt .spotlight-copy p { max-width: 46ch; }
#models .spotlight-copy p + p { margin-top: 1em; }
/* Models card */
.models-card {
  background: var(--white);
  border-radius: 20px;
  border: 1px solid var(--border);
  padding: 24px;
  box-shadow: var(--shadow-lg);
  max-width: 440px;
  margin: 0 auto;
}
.models-header {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
}
.models-header .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 4px rgba(249, 115, 22, .16);
}
.models-list { list-style: none; padding: 0; margin: 4px 0; }
.model {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 14px;
  padding: 12px 4px;
  align-items: center;
}
.model + .model { border-top: 1px solid var(--border); }
.model .ind {
  width: 28px; height: 28px;
  border-radius: 8px;
  background: var(--bg-warm);
  display: grid; place-items: center;
  color: white;
  flex-shrink: 0;
}
.model .ind svg { width: 16px; height: 16px; }
.model.brand-anthropic .ind { background: #d97757; }
.model.brand-openai .ind { background: #0b0b0b; }
.model.brand-openrouter .ind { background: #6366f1; }
.model.brand-local .ind { background: #334155; }
.model .name {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
}
.model .sub {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
  font-weight: 500;
}
.model.active {
  background: var(--blue-soft);
  padding: 14px 12px;
  margin: 4px -6px;
  border-radius: 10px;
}
.model.active + .model { border-top: none; }
.model.active .ind { background: var(--blue); color: white; }
.model.active .name { color: var(--blue); }
.model.active .sub { color: var(--blue); opacity: 0.85; }
.model.local .ind { background: transparent; font-size: 15px; }
.model .tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--yellow-soft);
  color: #a16207;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.05em;
  vertical-align: 1px;
}
.model .tag.soon {
  background: var(--bg-warm);
  color: var(--muted);
}
.models-divider {
  padding: 10px 4px 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  border-top: 1px solid var(--border);
  margin-top: 8px;
  text-align: center;
}
.model.soon .name { color: var(--ink-2); }
.model.soon .sub { color: var(--muted); }
.model.soon .ind { opacity: 0.55; }
.models-foot {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
}
.models-foot strong { color: var(--ink); font-weight: 700; display: block; margin-bottom: 2px; }
/* Wide-column section (centered header + full-width visual) */
.wide-header {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 56px;
}
.wide-header h2 {
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0 0 18px;
  color: var(--ink);
}
.wide-header p {
  font-size: 18px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}
/* Org chart - 3 levels: You → Departments → Agents */
.orgchart-wide {
  background: var(--white);
  border-radius: 22px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.orgchart-header {
  padding: 16px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.orgchart-header .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(0, 97, 255, .16);
}
.orgchart-header .badge {
  margin-left: auto;
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  background: var(--bg-warm);
  padding: 3px 10px;
  border-radius: 999px;
  letter-spacing: 0;
  text-transform: none;
}
.orgchart-body {
  padding: 40px 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}
/* You */
.you-node {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 22px 12px 12px;
  background: var(--blue);
  color: white;
  border-radius: 14px;
  box-shadow: 0 8px 20px rgba(0, 97, 255, .32);
}
.you-node .avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .18);
  display: grid; place-items: center;
  font-size: 18px;
}
.you-node .name { font-weight: 700; font-size: 15px; line-height: 1.15; }
.you-node .title { font-size: 12px; opacity: 0.85; margin-top: 2px; }
/* Vertical trunk from You */
.trunk {
  width: 2px;
  height: 40px;
  background: var(--border-strong);
}
/* Departments row */
.dept-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  width: 100%;
  position: relative;
  padding-top: 28px;
}
.dept-row::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc((100% - 48px) / 8);
  right: calc((100% - 48px) / 8);
  height: 2px;
  background: var(--border-strong);
}
.dept-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  position: relative;
}
.dept-card::before {
  content: '';
  position: absolute;
  top: -28px;
  left: 50%;
  width: 2px; height: 28px;
  background: var(--border-strong);
  transform: translateX(-50%);
}
.dept-head {
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--white);
  border-bottom: 1px solid var(--border);
  border-radius: 13px 13px 0 0;
}
.dept-head .icon {
  width: 28px; height: 28px;
  border-radius: 8px;
  display: grid; place-items: center;
  font-size: 14px;
  flex-shrink: 0;
}
.dept-head .name {
  font-weight: 700;
  font-size: 13.5px;
  color: var(--ink);
  letter-spacing: -0.01em;
}
.dept-head .count {
  margin-left: auto;
  font-size: 10.5px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.02em;
}
.dept-agents { padding: 6px 10px 10px; }
.agent-row {
  display: grid;
  grid-template-columns: 26px 1fr 8px;
  gap: 10px;
  padding: 8px 4px;
  align-items: center;
}
.agent-row + .agent-row { border-top: 1px solid var(--border); }
.agent-row .avatar {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--white);
  display: grid; place-items: center;
  font-size: 13px;
  border: 1px solid var(--border);
}
.agent-row .name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}
.agent-row .role {
  font-size: 10.5px;
  color: var(--muted);
  margin-top: 1px;
  font-weight: 500;
}
.agent-row .live {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, .16);
}
/* Bottom status pills */
.org-status {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 28px;
  padding: 20px 24px;
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.org-status span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink);
  padding: 5px 12px 5px 10px;
  background: var(--white);
  border-radius: 999px;
  border: 1px solid var(--border);
}
.org-status span::before {
  content: '✓';
  color: #16a34a;
  font-weight: 800;
  font-size: 11px;
}
/* Responsive */
@media (max-width: 900px) {
  .dept-row { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .dept-row::before { display: none; }
  .dept-card::before { display: none; }
  .trunk { display: none; }
  .orgchart-body { padding: 32px 20px 20px; gap: 20px; }
  .dept-row { padding-top: 0; }
}
@media (max-width: 500px) {
  .dept-row { grid-template-columns: 1fr; }
}
/* Tasks card */
.tasks-card {
  background: var(--white);
  border-radius: 20px;
  border: 1px solid var(--border);
  padding: 8px;
  box-shadow: var(--shadow-lg);
}
.tasks-inner { padding: 24px 24px 20px; }
.tasks-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-bottom: 18px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
}
.tasks-header .icon {
  width: 32px; height: 32px;
  border-radius: 9px;
  background: #fff1e6;
  color: var(--orange);
  display: grid; place-items: center;
  font-size: 15px;
}
.tasks-header .title { font-weight: 700; font-size: 15px; color: var(--ink); }
.tasks-header .sub { font-size: 12px; color: var(--muted); font-weight: 500; }
.tasks-header .status-tag {
  margin-left: auto;
  color: var(--muted);
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}
.tasks-header .status-tag .moon {
  width: 20px; height: 20px; border-radius: 50%;
  background: #1e293b;
  display: grid; place-items: center;
  font-size: 11px;
}
.tasks-list { padding: 4px 0; }
.task-item {
  display: grid;
  grid-template-columns: 22px 54px 1fr;
  gap: 14px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.task-item:last-of-type { border-bottom: none; }
.task-item .state {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px;
  font-weight: 800;
  margin-top: 2px;
  line-height: 1;
}
.task-item.done .state { background: #dcfce7; color: #16a34a; }
.task-item.progress .state { background: #fff1e6; color: var(--orange); }
.task-item.progress .state::after {
  content: '';
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--orange);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, .22);
  animation: taskpulse 1.6s ease-in-out infinite;
}
@keyframes taskpulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(249, 115, 22, .22); }
  50% { box-shadow: 0 0 0 6px rgba(249, 115, 22, .05); }
}
.task-item.scheduled .state {
  background: transparent;
  border: 1.5px dashed var(--border-strong);
  color: var(--muted);
}
.task-item .time {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  padding-top: 3px;
  letter-spacing: -0.01em;
}
.task-item.scheduled .time { color: var(--muted); font-weight: 600; }
.task-item .body .name {
  font-size: 13.5px;
  color: var(--ink);
  font-weight: 500;
  line-height: 1.45;
}
.task-item.scheduled .body .name { color: var(--ink-2); }
.task-item .body .meta {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 3px;
}
.task-item.progress .body .meta { color: var(--orange); font-weight: 600; }
.tasks-foot {
  margin-top: 12px;
  padding: 14px 4px 4px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.55;
}
.tasks-foot strong { color: var(--ink); font-weight: 700; display: block; margin-bottom: 2px; }
/* Gordon chat card */
.gordon-card {
  background: var(--white);
  border-radius: 20px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.gordon-header {
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}
.gordon-header .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--blue);
  box-shadow: 0 0 0 4px rgba(0, 97, 255, .16);
}
.gordon-header .live {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.gordon-header .live::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 2px rgba(34, 197, 94, .18);
}
.gordon-body {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.msg-row { display: flex; gap: 10px; }
.msg-row.user { justify-content: flex-end; }
.msg-row .msg-avatar {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--blue-soft);
  color: var(--blue);
  display: grid; place-items: center;
  font-size: 15px;
  flex-shrink: 0;
}
.msg-row.user .msg-body {
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 9px 14px;
  border-radius: 14px 14px 4px 14px;
  font-size: 13.5px;
  color: var(--ink);
  max-width: 82%;
  font-weight: 500;
}
.msg-row.gordon .msg-body {
  background: var(--blue-soft);
  color: var(--ink);
  padding: 11px 14px;
  border-radius: 14px 14px 14px 4px;
  font-size: 13.5px;
  max-width: 82%;
}
.msg-body .action {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 3px 0;
}
.msg-body .action::before {
  content: '✓';
  color: #16a34a;
  font-weight: 800;
  font-size: 12px;
}
.msg-body .action strong { color: var(--blue); font-weight: 700; }
.msg-body .meta {
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 8px;
  font-weight: 500;
}
.gordon-input {
  padding: 12px 16px 14px;
  border-top: 1px solid var(--border);
  background: var(--bg);
  display: flex;
  align-items: center;
  gap: 10px;
}
.gordon-input .placeholder {
  flex: 1;
  color: var(--muted);
  font-size: 13px;
}
.gordon-input .send {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--blue);
  color: white;
  display: grid; place-items: center;
  font-size: 14px;
  font-weight: 700;
}
/* Tokens dashboard */
.tokens-card {
  background: var(--white);
  border-radius: 22px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}
.tokens-header {
  padding: 20px 24px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.tokens-info { flex: 1; min-width: 220px; }
.tokens-period {
  font-size: 11px;
  color: var(--muted);
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.tokens-total {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.tokens-total .big {
  font-size: 28px;
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.tokens-total .label {
  font-size: 13px;
  color: var(--muted);
  font-weight: 500;
}
.tokens-total .cost {
  font-size: 18px;
  font-weight: 700;
  color: var(--blue);
  margin-left: 4px;
}
.tokens-detail {
  font-size: 12px;
  color: var(--muted);
  margin-top: 6px;
}
.tokens-filters {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.filter-group {
  display: inline-flex;
  background: var(--bg-warm);
  border-radius: 8px;
  padding: 3px;
}
.filter-group button {
  padding: 5px 12px;
  border: none;
  background: transparent;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  border-radius: 6px;
  cursor: default;
  font-family: inherit;
}
.filter-group button.active {
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 1px 3px rgba(15, 23, 42, .06);
}
.tokens-chart {
  padding: 28px 24px 16px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  height: 280px;
}
.chart-column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.chart-total {
  font-size: 11px;
  color: var(--ink);
  font-weight: 700;
  text-align: center;
  line-height: 1.3;
}
.chart-total .cost {
  color: var(--blue);
  font-weight: 700;
  display: block;
}
.chart-bar {
  flex: 1;
  width: 100%;
  background: var(--bg);
  border-radius: 10px;
  display: flex;
  flex-direction: column-reverse;
  overflow: hidden;
  min-height: 0;
}
.chart-bar .seg { width: 100%; }
.chart-label {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}
.tokens-legend {
  padding: 14px 24px 20px;
  border-top: 1px solid var(--border);
  display: flex;
  gap: 20px 24px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-2);
  font-weight: 500;
}
.tokens-legend .item { display: inline-flex; align-items: center; gap: 7px; }
.tokens-legend .swatch {
  width: 12px; height: 12px;
  border-radius: 3px;
}
@media (max-width: 700px) {
  .tokens-chart { padding: 20px 12px 12px; gap: 6px; height: 220px; }
  .chart-total { font-size: 10px; }
  .chart-label { font-size: 11px; }
}
/* Remote access (Tailscale) card */
.remote-card {
  background: var(--white);
  border-radius: 20px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-width: 520px;
  margin: 0 auto;
}
.remote-urlbar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #0b1e3f;
  color: #dbe4f5;
  font-size: 12.5px;
  font-family: 'SF Mono', ui-monospace, Menlo, monospace;
}
.remote-urlbar .lock {
  width: 14px; height: 14px; color: #7de88a;
  flex-shrink: 0;
}
.remote-urlbar .url { flex: 1; color: #ffffff; font-weight: 500; }
.remote-urlbar .priv {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 8px; border-radius: 999px;
  background: rgba(125, 232, 138, .12);
  color: #7de88a;
  font-family: 'Inter', sans-serif;
  font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.remote-urlbar .priv .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #7de88a; box-shadow: 0 0 0 3px rgba(125,232,138,.22);
}
.remote-body { padding: 24px 24px 20px; }
.remote-host {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px;
  background: linear-gradient(180deg, rgba(0,97,255,.05), rgba(0,97,255,.02));
  border: 1px solid rgba(0,97,255,.18);
  border-radius: 14px;
  margin-bottom: 4px;
}
.remote-host .host-icon {
  width: 44px; height: 44px;
  border-radius: 11px;
  background: var(--blue);
  color: white;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.remote-host .host-icon svg { width: 26px; height: 26px; }
.remote-host .host-info { flex: 1; min-width: 0; }
.remote-host .host-name {
  font-weight: 700; font-size: 14.5px; color: var(--ink);
}
.remote-host .host-status {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; color: var(--muted); margin-top: 3px; font-weight: 500;
}
.remote-host .host-status .live {
  width: 7px; height: 7px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 0 3px rgba(34,197,94,.2);
  animation: pulse 2s ease-in-out infinite;
}
.remote-host .host-badge {
  padding: 4px 10px; border-radius: 999px;
  background: var(--yellow-soft); color: #92400e;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.remote-mesh {
  display: block;
  width: 100%; height: 56px;
  margin: 2px 0 6px;
}
.remote-mesh path {
  stroke: #94a3b8;
  stroke-width: 1.2;
  stroke-dasharray: 4 4;
  fill: none;
  animation: dashflow 1.4s linear infinite;
}
@keyframes dashflow {
  to { stroke-dashoffset: -16; }
}
.remote-clients {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.client {
  padding: 14px 12px;
  border-radius: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  text-align: center;
  position: relative;
}
.client .live {
  position: absolute; top: 8px; right: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #22c55e; box-shadow: 0 0 0 2.5px rgba(34,197,94,.2);
}
.client .client-icon {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  margin: 0 auto 8px;
  color: var(--ink);
}
.client .client-icon svg { width: 32px; height: 32px; }
.client .client-name {
  font-size: 12.5px; font-weight: 700; color: var(--ink);
  line-height: 1.15;
}
.client .client-loc {
  font-size: 11px; color: var(--muted); margin-top: 3px;
  font-weight: 500;
}
.remote-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.ts-brand {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--ink); font-weight: 800; font-size: 14px;
  letter-spacing: -0.01em;
}
.ts-brand .ts-mark {
  width: 22px; height: 22px;
  display: grid; place-items: center;
  color: var(--ink);
}
.ts-brand .ts-mark svg { width: 100%; height: 100%; }
.ts-brand .ts-word { font-weight: 800; }
.remote-foot .note {
  font-size: 11.5px; color: var(--muted);
  font-weight: 500;
  display: inline-flex; align-items: center; gap: 6px;
}
.remote-foot .note .lock {
  width: 12px; height: 12px; color: #22c55e;
}
@media (max-width: 480px) {
  .remote-clients { grid-template-columns: 1fr; }
  .remote-mesh { height: 24px; }
}
/* ---- SECTIONS ---- */
.section {
  padding: 96px 0;
}
.section.tinted {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.section-head {
  max-width: 720px;
  margin: 0 auto 64px;
  text-align: center;
}
.section-head .eyebrow { margin-bottom: 20px; }
main h2 {
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.03em;
  font-weight: 800;
  margin: 0 0 16px;
  color: var(--ink);
}
.section-head p {
  color: var(--ink-2);
  font-size: 18px;
  margin: 0;
}
/* ---- USP GRID ---- */
.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
@media (max-width: 900px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 620px) {
  .grid { grid-template-columns: 1fr; }
}
.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px;
  transition: transform .2s ease, box-shadow .3s ease, border-color .2s ease;
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}
.card .icon {
  width: 44px; height: 44px;
  border-radius: 11px;
  display: grid; place-items: center;
  margin-bottom: 20px;
  font-size: 20px;
}
.card h3 {
  font-size: 20px;
  margin: 0 0 10px;
  letter-spacing: -0.01em;
  font-weight: 700;
  color: var(--ink);
}
.card p {
  color: var(--ink-2);
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
}
.icon.blue { background: var(--blue-soft); color: var(--blue); }
.icon.orange { background: #fff1e6; color: var(--orange); }
.icon.yellow { background: var(--yellow-soft); color: #a16207; }
/* ---- HOW IT WORKS ---- */
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  counter-reset: step;
}
@media (max-width: 780px) {
  .steps { grid-template-columns: 1fr; }
}
.step {
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: 36px 32px;
  border: 1px solid var(--border);
  position: relative;
}
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  top: -18px; left: 28px;
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--blue);
  color: white;
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 16px;
  box-shadow: 0 6px 14px rgba(0, 97, 255, .28);
}
.step:nth-child(2)::before { background: var(--orange); box-shadow: 0 6px 14px rgba(249, 115, 22, .28); }
.step:nth-child(3)::before { background: var(--yellow); color: var(--ink); box-shadow: 0 6px 14px rgba(251, 191, 36, .38); }
.step h3 {
  margin: 12px 0 10px;
  font-size: 20px;
  letter-spacing: -0.01em;
  font-weight: 700;
}
.step p {
  color: var(--ink-2);
  margin: 0;
  font-size: 15px;
}
/* ---- CLOSER ---- */
.closer { padding: 40px 0 96px; }
.closer-card {
  background:
    radial-gradient(70% 100% at 100% 0%, rgba(251, 191, 36, .35) 0%, transparent 55%),
    radial-gradient(70% 100% at 0% 100%, rgba(249, 115, 22, .32) 0%, transparent 55%),
    linear-gradient(135deg, #0061ff 0%, #003fb0 100%);
  border-radius: 28px;
  padding: 72px 48px;
  color: white;
  text-align: center;
  position: relative;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.closer-card h2 { color: white; margin: 0 0 16px; }
.closer-card p {
  color: rgba(255, 255, 255, .88);
  max-width: 56ch;
  margin: 0 auto 32px;
  font-size: 18px;
}
.closer-card .btn {
  background: var(--white);
  color: var(--ink) !important;
}
.closer-card .btn:hover { background: #f0eee9; }
.closer-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}
.closer-mac {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 18px;
  border-radius: 12px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  color: white;
}
.closer-mac svg {
  width: 22px; height: 22px;
  color: white;
  opacity: 0.95;
}
.closer-mac .lines {
  display: flex;
  flex-direction: column;
  text-align: left;
  line-height: 1.3;
}
.closer-mac .primary { font-size: 13.5px; font-weight: 600; }
.closer-mac .secondary { font-size: 11.5px; opacity: 0.72; font-weight: 500; }
/* ---- MOBILE OVERRIDES (kept last so specificity + source order both win) ---- */
@media (max-width: 900px) {
  /* All two-column spotlight sections stack on mobile (fixes Memory / Models / Tasks / Gordon / Remote) */
  .spotlight-grid,
    .spotlight.alt .spotlight-grid {
      grid-template-columns: 1fr !important;
      gap: 32px !important;
    }
  .spotlight { padding: 56px 0 !important; }
  .spotlight-copy h2,
    .spotlight.alt .spotlight-copy h2 { max-width: none; }
  .spotlight-copy p,
    .spotlight.alt .spotlight-copy p { max-width: none; }
  /* Cards inside spotlights: full width, no forced max-width */
  .memory-card, .models-card, .tasks-card, .gordon-card, .remote-card, .tokens-card {
      max-width: 100% !important;
    }
  /* Memory two-panel body: stack transcripts + facts */
  .memory-panels { grid-template-columns: 1fr !important; }
  .panel-transcripts { border-right: none !important; border-bottom: 1px solid var(--border); }
  /* Tokens dashboard: tighter chart on mobile */
  .tokens-chart { padding: 16px 8px 8px !important; height: 200px !important; gap: 4px !important; }
  .chart-total { font-size: 9.5px !important; }
  .chart-label { font-size: 10.5px !important; }
  .tokens-header { flex-wrap: wrap; gap: 16px !important; padding: 16px !important; }
  .tokens-total .big { font-size: 28px !important; }
  .tokens-legend { flex-wrap: wrap; gap: 10px 14px !important; padding: 14px 16px !important; font-size: 12px !important; }
  /* Remote card: stack all three clients, hide the mesh SVG (it doesn't make sense stacked) */
  .remote-clients { grid-template-columns: 1fr !important; gap: 8px !important; }
  .remote-mesh { display: none !important; }
  .remote-body { padding: 18px !important; }
  .remote-foot { padding: 14px 18px !important; flex-direction: column; align-items: flex-start !important; gap: 8px !important; }
  /* Clients aligned as a proper list: dot | icon | name/loc stacked */
  .client {
      display: grid !important;
      grid-template-columns: 10px 36px 1fr;
      grid-template-areas:
        "dot icon name"
        "dot icon loc";
      column-gap: 12px;
      row-gap: 2px;
      align-items: center;
      text-align: left !important;
      padding: 14px 16px !important;
    }
  .client .live {
      grid-area: dot;
      position: static !important;
      margin: 0 !important;
      align-self: center;
      width: 8px !important; height: 8px !important;
    }
  .client .client-icon {
      grid-area: icon;
      margin: 0 !important;
      width: 32px !important; height: 32px !important;
      align-self: center;
    }
  .client .client-icon svg { width: 28px !important; height: 28px !important; }
  .client .client-name {
      grid-area: name;
      align-self: end;
      text-align: left !important;
      line-height: 1.2;
    }
  .client .client-loc {
      grid-area: loc;
      align-self: start;
      text-align: left !important;
      margin-top: 0 !important;
      line-height: 1.3;
    }
  /* Host card mirrors the same left-aligned tidy layout */
  .remote-host { align-items: center; }
  .remote-host .host-info { min-width: 0; }
  .remote-host .host-name { line-height: 1.2; }
  /* Gordon chat card: full width, tighter */
  .gordon-card { padding: 16px !important; }
  .msg-body { max-width: 88% !important; }
  .msg-row { gap: 8px !important; }
  /* Org chart mobile - force single column so subordinates aren't cramped */
  .dept-row { grid-template-columns: 1fr !important; gap: 12px !important; }
  .dept-row::before { display: none !important; }
  .dept-card::before { display: none !important; }
  .dept-agents { padding: 12px !important; }
  .you-node { padding: 14px 20px !important; }
  .you-node::after { display: none !important; }
  .wide-header h2 { font-size: clamp(28px, 8vw, 40px) !important; }
  /* Section head heading sizes down a touch */
  main h2 { font-size: clamp(26px, 7.5vw, 40px) !important; }
  .spotlight-copy h2 { font-size: clamp(28px, 8vw, 40px) !important; }
}
@media (max-width: 560px) {
  .container { padding-left: 20px !important; padding-right: 20px !important; }
  main h1 { font-size: clamp(32px, 9vw, 48px) !important; }
  .plan-price .amount { font-size: 52px !important; }
}


    /* =========================================================
       HERO v2 - split headline / promise
       ========================================================= */
    .hero-split {
      display: grid;
      grid-template-columns: minmax(0, 1.14fr) minmax(0, .86fr);
      gap: 56px;
      align-items: start;
    }
    .hero-split h1 {
      font-size: clamp(38px, 4.3vw, 58px);
      line-height: 1.06;
      letter-spacing: -0.03em;
      margin: 0;
      text-wrap: balance;
    }
    .hero-split .hero-right { padding-top: 10px; }
    .hero-split p.lede { margin-bottom: 32px; }
    @media (max-width: 980px) {
      .hero-split { grid-template-columns: 1fr; gap: 28px; }
      .hero-split .hero-right { padding-top: 0; }
    }

    /* =========================================================
       LIVE SHOT - six real 3036×1556 captures of the app.
       Click the rail to change screen; panels with a scrollbar
       scroll for real. All geometry is % of the screenshot, all
       type scales from --u (rendered px per screenshot px).
       ========================================================= */
    .shot-wrap { padding: 28px 0 96px; }

    .shot {
      --u: 0.4;
      --z200:#E4E4E7; --z400:#A1A1AA; --z500:#71717A; --z700:#3F3F46; --z900:#18181B;
      --acc-yellow:#FDDD3D;
      position: relative;
      border-radius: 14px;
      overflow: hidden;
      background: #fff;
      border: 1px solid var(--z200);
      box-shadow: 0 40px 90px rgba(24,24,27,.14), 0 10px 24px rgba(24,24,27,.07);
      font-family: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    }
    .shot * { box-sizing: border-box; }

    /* macOS title bar */
    /* Everything here scales with --u (rendered px per screenshot px) so the
       chrome shrinks in step with the app inside it. Without this the 44px bar
       and 12px dots stay full size while the screenshot gets tiny, and the
       window reads as a giant title bar with a postage stamp under it. */
    .shot-bar {
      height: clamp(24px, calc(110px * var(--u)), 46px);
      display: flex; align-items: center;
      gap: clamp(4px, calc(20px * var(--u)), 8px);
      padding: 0 clamp(8px, calc(40px * var(--u)), 16px);
      background: #fff; border-bottom: 1px solid var(--z200);
      user-select: none;
    }
    .shot-bar i {
      width: clamp(6px, calc(30px * var(--u)), 12px);
      height: clamp(6px, calc(30px * var(--u)), 12px);
      border-radius: 50%; display: block; flex: none;
    }
    .shot-bar i.r { background: #F16C61; }
    .shot-bar i.y { background: #F6CA37; }
    .shot-bar i.g { background: #5FC263; }
    .shot-bar b {
      margin-left: clamp(8px, calc(45px * var(--u)), 18px);
      font-size: clamp(9.5px, calc(35px * var(--u)), 14px);
      font-weight: 600; color: var(--z900);
      letter-spacing: -0.01em;
    }

    /* Every capture is exactly 3036×1556, so switching screens shifts nothing.
       aspect-ratio guards against a collapsed stage if an image fails. */
    .shot-stage { position: relative; line-height: 0; aspect-ratio: 3036 / 1556; }
    .shot-img { width: 100%; height: auto; display: block; }
    .shot-img[hidden], .shot-layer[hidden] { display: none; }
    .shot-layer { position: absolute; inset: 0; }

    /* ---------- scrollable panels ---------- */
    /* Each strip is two captures stitched at a pixel-exact offset
       (chat list 1084px, agent detail 1194px) so the panel really
       scrolls instead of cross-fading between two states. */
    .sp {
      position: absolute; overflow-y: auto; overflow-x: hidden;
      overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
      background: #fff; z-index: 4;
      left: 5.731%; top: 4.370%; width: 16.798%; height: 95.630%;
    }
    .sp.sp-agents   { left: 22.596%; top: 0; width: 52.569%; height: 100%; background: #FAFAFA; }
    .sp.sp-settings { left: 5.731%;  top: 0; width: 94.269%; height: 100%; background: #FAFAFA; }
    /* The strip and its hotspots share this wrapper so that a hotspot's % top
       resolves against the full strip height (2740px), not the panel's visible
       height - otherwise everything below the fold lands in the wrong place. */
    .sp-inner { position: relative; }
    .sp img { width: 100%; height: auto; display: block; }
    .sp::-webkit-scrollbar { width: 7px; }
    .sp::-webkit-scrollbar-track { background: transparent; }
    .sp::-webkit-scrollbar-thumb { background: #D4D4D8; border-radius: 99px; }
    .sp:focus-visible { outline: 2px solid #0061ff; outline-offset: -2px; }

    /* ---------- hotspots ----------
       Invisible at rest. A faint outline appears on every hotspot while the
       pointer is anywhere over the window (so the structure is discoverable),
       and the one under the cursor fills in. A single staggered ripple plays
       the first time the artifact scrolls into view. */
    .hs {
      position: absolute; border-radius: calc(var(--u) * 20px);
      cursor: help; z-index: 8; background: transparent; padding: 0;
      border: 1px solid transparent;
      transition: background .18s ease, border-color .18s ease;
      -webkit-appearance: none; appearance: none;
    }
    .hs.go { cursor: pointer; }

    /* pointer is somewhere on the window: hint that things are hoverable */
    .shot:hover .hs { border-color: rgba(0, 97, 255, .16); }

    /* pointer is on this one */
    .shot:hover .hs:hover, .hs.on {
      background: rgba(0, 97, 255, .07);
      border-color: rgba(0, 97, 255, .38);
    }
    .hs:focus-visible { outline: 2px solid #0061ff; outline-offset: 2px; }

    /* one-time attract ripple, staggered by --i */
    .shot.attract .hs {
      animation: hs-attract 1s ease both;
      animation-delay: calc(var(--i, 0) * 55ms);
    }
    @keyframes hs-attract {
      0%   { border-color: transparent;              background: transparent; }
      35%  { border-color: rgba(0, 97, 255, .42);    background: rgba(0, 97, 255, .07); }
      100% { border-color: transparent;              background: transparent; }
    }

    .hs-tip {
      position: absolute; z-index: 40; width: min(288px, 64vw);
      background: var(--z900); color: #fff; border-radius: 10px;
      padding: 12px 15px; font-size: 13.5px; line-height: 1.5;
      box-shadow: 0 16px 40px rgba(24,24,27,.28);
      opacity: 0; visibility: hidden; transform: translateY(4px);
      transition: opacity .16s ease, transform .16s ease, visibility .16s;
      pointer-events: none;
    }
    .hs-tip.show { opacity: 1; visibility: visible; transform: translateY(0); }
    .hs-tip strong { display: block; font-size: 13px; font-weight: 700; margin-bottom: 4px; color: #fff; }
    .hs-tip span { color: #D4D4D8; }

    /* ---------- animated conversation (chat screen) ----------
       The chat panel starts at x=686 (divider at 684), NOT at the
       composer box's left border at 1104 - getting that wrong left
       the old conversation visible down the left edge. */
    .shot-thread {
      position: absolute;
      left: 22.596%; top: 7.584%; width: 77.404%; height: 79.113%;
      background: #FAFAFA; z-index: 3; overflow: hidden;
      padding: calc(var(--u) * 52px) calc(var(--u) * 60px) calc(var(--u) * 30px);
      display: flex; flex-direction: column; justify-content: flex-end;
      line-height: 1.55;
    }
    .shot-thread .inner { width: 100%; }
    .st-day {
      text-align: center; color: var(--z400);
      margin: 0 0 calc(var(--u) * 32px); font-size: calc(var(--u) * 26px);
    }
    .st-userline {
      display: flex; align-items: center; justify-content: flex-end;
      gap: calc(var(--u) * 20px); margin-bottom: calc(var(--u) * 16px);
      font-size: calc(var(--u) * 28px); color: var(--z900); font-weight: 600;
    }
    .st-userline em { font-style: normal; color: var(--z400); font-weight: 400; }
    .st-userline .av {
      width: calc(var(--u) * 60px); height: calc(var(--u) * 60px);
      border-radius: 50%; background: var(--z900); color: #fff;
      display: grid; place-items: center;
      font-size: calc(var(--u) * 22px); font-weight: 600;
    }
    .st-bubble {
      margin: 0 0 calc(var(--u) * 44px) auto; max-width: 74%; width: fit-content;
      background: var(--z900); color: #fff; border-radius: calc(var(--u) * 32px);
      padding: calc(var(--u) * 22px) calc(var(--u) * 36px);
      font-size: calc(var(--u) * 30px);
    }
    .st-aline {
      display: flex; align-items: center; gap: calc(var(--u) * 20px);
      margin-bottom: calc(var(--u) * 20px);
      font-size: calc(var(--u) * 30px); font-weight: 600; color: var(--z900);
    }
    .st-aline .av {
      width: calc(var(--u) * 60px); height: calc(var(--u) * 60px);
      border-radius: 50%; background: linear-gradient(160deg,#FDD835 0%,#F5942E 100%);
      display: grid; place-items: center; font-size: calc(var(--u) * 30px);
    }
    .st-aline em {
      font-style: normal; color: var(--z400); font-weight: 400;
      font-size: calc(var(--u) * 26px);
    }
    .st-card {
      background: #fff; border: calc(var(--u) * 4px) solid var(--acc-yellow);
      border-radius: calc(var(--u) * 24px);
      padding: calc(var(--u) * 32px) calc(var(--u) * 40px);
      font-size: calc(var(--u) * 30px); color: var(--z700); line-height: 1.62;
      max-width: 86%;
    }
    .st-card p { margin: 0 0 calc(var(--u) * 22px); }
    .st-card p:last-child { margin-bottom: 0; }
    .st-card strong { color: var(--z900); font-weight: 700; }
    .st-card ul { margin: 0 0 calc(var(--u) * 22px); padding-left: calc(var(--u) * 44px); }
    .st-card li { margin-bottom: calc(var(--u) * 8px); }
    .st-caret {
      display: inline-block; width: calc(var(--u) * 4px); height: calc(var(--u) * 30px);
      background: var(--z900); vertical-align: text-bottom; margin-left: 2px;
      animation: st-blink 1s step-end infinite;
    }
    @keyframes st-blink { 0%,100%{opacity:1} 50%{opacity:0} }
    .st-fade { opacity: 0; transition: opacity .3s ease; }
    .st-fade.in { opacity: 1; }
    .shot-thread .inner.out { opacity: 0; transition: opacity .45s ease; }

    .shot-type {
      position: absolute;
      left: 39.855%; top: 89.203%; width: 45.455%; height: 5.784%;
      background: #FAFAFA; z-index: 4;
      display: flex; align-items: center;
      font-size: calc(var(--u) * 30px); color: var(--z900);
      overflow: hidden; white-space: nowrap; line-height: 1.4;
    }
    .shot-type.placeholder { color: var(--z400); }

    @media (max-width: 760px) {
      .hs-tip { width: min(240px, 74vw); font-size: 12.5px; padding: 10px 12px; }
    }
    @media (prefers-reduced-motion: reduce) {
      .st-caret { animation: none; }
      .shot.attract .hs { animation: none; }
      .st-fade, .shot-thread .inner.out, .sp-hint { transition: none; }
    }