/* ============================================================
   GOOOD Cabin Review Platform — design tokens + base + components
   ------------------------------------------------------------
   Source of truth for all visual rules. Tokens in :root.
   Cache-bump via ?v=N when this file changes.
   ============================================================ */

:root {
  /* surfaces */
  --bg:              #0a0a0a;
  --surface-1:       #1a1a1a;  /* cards, panels, sidebar bg */
  --surface-2:       #222222;  /* badges, inline bars, action squares */
  --surface-3:       #333333;  /* version badge bg, dashed border */
  --divider-strong:  #222222;
  --divider:         #1a1a1a;
  --divider-faint:   #151515;

  /* text scale */
  --text-1:  #ffffff;
  --text-2:  #cccccc;
  --text-3:  #aaaaaa;
  --text-4:  #888888;
  --text-5:  #666666;
  --text-6:  #555555;
  --text-7:  #444444;
  --text-8:  #333333;

  /* accent (monochromatic — only signal colors) */
  --accent:     #ffffff;
  --recording:  #ff3b30;

  /* attention bars (data viz) */
  --bar-high:  #e8e8e8;
  --bar-mid:   #888888;
  --bar-low:   #555555;
  --bar-base:  #444444;
  --bar-other: #333333;

  /* radii */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;

  /* type */
  --font-display: 'Inter Tight', 'Inter', system-ui, sans-serif;
  --font-sans:    'Inter', 'Helvetica Neue', Arial, sans-serif;
  --font-mono:    'JetBrains Mono', 'Monaco', 'Consolas', monospace;
  --label-letter-spacing: 2px;
  --brand-letter-spacing: -0.3px;

  /* spacing scale (multiples of 4) */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 20px;
  --s-6: 24px;
  --s-7: 28px;
  --s-8: 32px;
  --s-10: 40px;
  --s-12: 48px;
  --s-16: 64px;
  --s-20: 80px;
  --s-24: 96px;

  /* motion */
  --t-fast:   0.2s ease;
  --t-medium: 0.6s ease;

  /* layout */
  --max-w-text: 1200px;   /* readable max width for content tabs */
  --max-w-wide: 1400px;   /* wide layouts (hero, card grids) */
  --pad-x:      40px;     /* horizontal page padding desktop */
  --header-h:   88px;     /* sticky header height */
}

/* ============================================================
   reset / base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

html { background: var(--bg); }
body {
  background: var(--bg);
  color: var(--text-1);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  font-feature-settings: 'cv11', 'ss01';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; }
img { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
table { border-collapse: collapse; width: 100%; }

/* italic kill — per project guard (handoff: monochromatic, restrained) */
em, i, cite, dfn, var, address { font-style: normal; }

/* ============================================================
   page chrome — header + tab nav
   ============================================================ */

.page-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-bottom: 1px solid var(--divider);
}

.brand-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s-2) var(--pad-x);
}

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}
.brand-logo {
  height: 96px;
  width: auto;
  display: block;
  margin: -20px 0;  /* outdent so the bigger logo doesn't grow the chrome */
  opacity: 0.95;
  transition: opacity var(--t-fast);
}
.brand:hover .brand-logo { opacity: 1; }

.brand-pill {
  background: var(--surface-1);
  border-radius: var(--r-md);
  padding: 6px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.4px;
  color: var(--text-4);
}
.brand-pill strong { color: var(--text-1); font-weight: 600; letter-spacing: 0.2px; margin-left: var(--s-1); }

.tabs {
  display: flex;
  gap: 0;
  padding: 0 var(--pad-x);
  border-top: 1px solid var(--divider-faint);
}

.tab-btn {
  padding: 14px 24px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-6);
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
  letter-spacing: 0.3px;
}
.tab-btn:hover { color: var(--text-3); }
.tab-btn.active {
  color: var(--text-1);
  border-bottom-color: var(--text-1);
}

/* ============================================================
   tab content shells
   ============================================================ */

.tab-content { display: none; }
.tab-content.active { display: block; }

.tab-section {
  max-width: var(--max-w-text);
  margin: 0 auto;
  padding: var(--s-6) var(--pad-x) var(--s-12);
}
.tab-section--wide { max-width: var(--max-w-wide); }
.tab-section--full { max-width: none; padding-left: 0; padding-right: 0; }

/* ============================================================
   typography utilities
   ============================================================ */

.eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--label-letter-spacing);
  color: var(--text-6);
  font-weight: 500;
}

h1, h2, h3 { font-family: var(--font-display); font-weight: 600; margin: 0; }
h1 { font-size: 56px; letter-spacing: -1.8px; line-height: 1.05; }
h2 { font-size: 32px; letter-spacing: -0.9px; line-height: 1.15; }
h3 { font-size: 20px; letter-spacing: -0.4px; line-height: 1.3; font-weight: 600; }

p { margin: 0; color: var(--text-2); }
.lede { font-size: 16px; line-height: 1.7; color: var(--text-3); max-width: 720px; }

/* ============================================================
   Tab 1 — Il Prodotto
   ============================================================ */

.hero {
  margin: 0 auto var(--s-5);
  max-width: var(--max-w-wide);
  padding: var(--s-10) var(--pad-x) 0;
}

.hero__image-frame {
  width: 100%;
  height: clamp(260px, 34vh, 360px);
  border-radius: var(--r-lg);
  overflow: hidden;
  margin-top: var(--s-7);
}
.hero__image-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

.hero__title-row { display: flex; flex-direction: column; gap: var(--s-2); margin-bottom: var(--s-8); }
.hero__subtitle { font-family: var(--font-display); font-size: 20px; color: var(--text-4); font-weight: 300; }

.hero__intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-12);
  margin-top: var(--s-10);
}
.hero__intro p { font-size: 16px; line-height: 1.65; color: var(--text-2); }

@media (max-width: 900px) {
  .hero__intro { grid-template-columns: 1fr; gap: var(--s-6); }
  h1 { font-size: 36px; }
}

.features {
  margin-top: var(--s-16);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--s-10);
}

.feature-group__title {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.1px;
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--divider-strong);
}

/* ============================================================
   Tab 1 — concept block stack (3 vertical full-width cards)
   ============================================================ */

.concept-stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.concept-block {
  background: var(--surface-1);
  border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-8);
  cursor: pointer;
  transition: background var(--t-fast);
}
.concept-block:hover { background: #1d1d1d; }
.concept-block__title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.8px;
  line-height: 1.15;
  margin: 0 0 var(--s-3);
}
.concept-block__desc {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-2);
  max-width: 820px;
  margin: 0;
}
.concept-block__details {
  margin-top: var(--s-4);
  border-top: 1px solid var(--divider-strong);
  padding-top: var(--s-3);
}

.evolution-note {
  margin-top: var(--s-6);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-5);
  line-height: 1.55;
  max-width: 720px;
  padding-top: var(--s-4);
  border-top: 1px solid var(--divider-faint);
}

@media (max-width: 700px) {
  .concept-block { padding: var(--s-5) var(--s-5); }
  .concept-block__title { font-size: 24px; letter-spacing: -0.5px; }
}

/* ============================================================
   Native <details> / <summary> — site-wide collapsible
   ============================================================ */

details summary {
  cursor: pointer;
  list-style: none;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: var(--text-3);
  padding: var(--s-2) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: color var(--t-fast);
}
details summary::-webkit-details-marker { display: none; }
details summary::after {
  content: '+';
  font-family: var(--font-mono);
  font-size: 22px;
  font-weight: 400;
  color: var(--text-4);
  transition: color var(--t-fast);
  line-height: 1;
}
details[open] summary::after { content: '−'; color: var(--text-1); }
details summary:hover { color: var(--text-1); }
details summary:hover::after { color: var(--text-1); }

details ul {
  list-style: none;
  margin: var(--s-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
details ul li {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
  padding-left: var(--s-5);
  position: relative;
}
details ul li::before {
  content: '·';
  position: absolute;
  left: 4px;
  top: -4px;
  color: var(--text-3);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

.feature-group__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.feature-group__list li {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-3);
  padding-left: var(--s-4);
  position: relative;
}
.feature-group__list li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--text-6);
}

/* ============================================================
   Tab 2 — In Azione
   ============================================================ */

.action-stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-24);
}

.action-card {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: var(--s-10);
  align-items: center;
}
.action-card--reverse { grid-template-columns: 1fr 1.6fr; }
.action-card--reverse .action-card__media { order: 2; }
.action-card--reverse .action-card__text  { order: 1; }

.action-card__media {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-1);
  aspect-ratio: 16 / 7;
}
.action-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Card 2 — auto cross-fade between two states (JS-driven) */
.action-card__media--swap img { transition: opacity 0.8s ease; }
.action-card__media--swap .img-alt {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.action-card__media--swap.is-flipped .img-base { opacity: 0; }
.action-card__media--swap.is-flipped .img-alt  { opacity: 1; }

.action-card__text {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}
.action-card__title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 600;
  letter-spacing: -0.8px;
  line-height: 1.2;
  margin: 0;
}
.action-card__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-2);
}

@media (max-width: 900px) {
  .action-card, .action-card--reverse {
    grid-template-columns: 1fr;
    gap: var(--s-6);
  }
  .action-card--reverse .action-card__media { order: 0; }
  .action-card--reverse .action-card__text  { order: 1; }
  .action-card__title { font-size: 22px; }
}

/* ============================================================
   Tab 3 — Dashboard
   ------------------------------------------------------------
   Vanilla port of cabin_dashboard_mockup.jsx + handoff enhancements
   (real heatmap image, comment detail panel, large version badges,
   viewpoint thumbnails, conversational notes).
   ============================================================ */

.dashboard {
  display: flex;
  min-height: 720px;
  border-top: 1px solid var(--divider);
}

/* sidebar -- sessions */
.dash-sidebar {
  width: 280px;
  flex-shrink: 0;
  padding: var(--s-5) 0;
  border-right: 1px solid var(--divider);
}
.dash-sidebar__heading {
  padding: 0 var(--s-5) var(--s-4);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--label-letter-spacing);
  color: var(--text-6);
}
.session-item {
  padding: var(--s-3) var(--s-5);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: background var(--t-fast), border-color var(--t-fast);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.session-item:hover { background: rgba(255,255,255,0.02); }
.session-item.active {
  background: var(--surface-1);
  border-left-color: var(--text-1);
}
.session-item__meta { flex: 1; min-width: 0; }
.session-item__date { font-family: var(--font-display); font-size: 14px; font-weight: 500; letter-spacing: -0.1px; }
.session-item.active .session-item__date { font-weight: 600; }
.session-item__sub { font-family: var(--font-mono); font-size: 11px; color: var(--text-6); letter-spacing: 0.2px; margin-top: 2px; }
.session-item__reviewer { font-family: var(--font-mono); font-size: 10px; color: var(--text-7); letter-spacing: 0.3px; margin-top: 2px; }

/* version badge (large) */
.version-badge {
  background: var(--surface-3);
  color: var(--text-1);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.version-badge--lg {
  font-size: 13px;
  padding: 6px 14px;
  font-weight: 600;
  letter-spacing: 0.4px;
}

/* main pane */
.dash-main {
  flex: 1;
  padding: var(--s-8);
  overflow: auto;
  min-width: 0;
}
.session-header { margin-bottom: var(--s-6); }
.session-header__top { display: flex; align-items: center; gap: var(--s-3); }
.session-header h2 { font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: -0.6px; margin-top: 4px; }
.session-header__sub { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.3px; color: var(--text-6); margin-top: 2px; }

.stat-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2);
  margin-bottom: var(--s-5);
}
.stat-card {
  background: var(--surface-1);
  border-radius: var(--r-md);
  padding: var(--s-3) var(--s-4);
  min-width: 0;
}
.stat-card__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-5);
  text-transform: uppercase;
  letter-spacing: var(--label-letter-spacing);
  margin-bottom: var(--s-1);
}
.stat-card__value {
  color: var(--text-1);
  font-family: var(--font-display);
  font-size: 26px;
  font-weight: 600;
  letter-spacing: -0.6px;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.stat-card__sub { color: var(--text-6); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.3px; margin-top: 2px; }

.dash-split {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--s-3);
  margin-bottom: var(--s-5);
}
.dash-panel {
  background: var(--surface-1);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  min-height: 240px;
}
.dash-panel--heatmap {
  display: flex;
  flex-direction: column;
}
.dash-panel--heatmap .heatmap-frame {
  margin-top: auto;
  margin-bottom: auto;
}
.dash-panel__heading {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--text-6);
  text-transform: uppercase;
  letter-spacing: var(--label-letter-spacing);
  margin-bottom: var(--s-4);
}

/* heatmap panel — cover, shorter mask, image fills the frame */
.heatmap-frame {
  position: relative;
  height: clamp(195px, 27vh, 260px);
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
}
.heatmap-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}

/* attention by object — bars (compact, pct prominent) */
.attn-row { margin-bottom: var(--s-3); }
.attn-row:last-child { margin-bottom: 0; }
.attn-row__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
}
.attn-row__name {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-2);
}
.attn-row__pct {
  font-family: var(--font-mono);
  font-size: 16px;
  color: var(--text-1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}
.attn-bar-wrap {
  background: var(--surface-2);
  border-radius: var(--r-xs);
  height: 4px;
  margin-top: 6px;
  overflow: hidden;
}
.attn-bar {
  height: 100%;
  background: var(--bar-base);
  transition: width var(--t-medium);
}
.attn-row__sub {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-7);
  margin-top: 4px;
  letter-spacing: 0.4px;
}

/* sub-tabs bar */
.subtabs {
  display: flex;
  gap: 0;
  margin-bottom: var(--s-5);
  border-bottom: 1px solid var(--divider-strong);
}
.subtab-btn {
  padding: 10px 20px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-6);
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
  letter-spacing: 0.3px;
}
.subtab-btn:hover { color: var(--text-3); }
.subtab-btn.active {
  color: var(--text-1);
  border-bottom-color: var(--text-1);
}

/* sub-tab panes */
.subtab-pane { display: none; }
.subtab-pane.active { display: block; }

/* Comments list */
.comment-row {
  position: relative;
  display: flex;
  gap: var(--s-4);
  padding: var(--s-4) 0 var(--s-4) var(--s-4);
  border-bottom: 1px solid var(--divider-faint);
  cursor: pointer;
  transition: background var(--t-fast);
}
.comment-row:hover { background: rgba(255,255,255,0.02); }
.comment-row.selected {
  background: rgba(255,255,255,0.03);
}

/* first-comment pulse — invites first interaction, stops after click.
   Highlights the entire row (background + soft outline + left bar) on a
   slow loop so the affordance is unmistakable. */
.comment-row--pulse {
  border-radius: var(--r-md);
  animation: comment-pulse 2.6s ease-in-out infinite;
}
.comment-row--pulse::before {
  content: '';
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 3px;
  background: var(--text-1);
  border-radius: 1px;
  animation: comment-pulse-bar 2.6s ease-in-out infinite;
}
@keyframes comment-pulse {
  0%, 100% {
    background: transparent;
    box-shadow: inset 0 0 0 1px transparent;
  }
  50% {
    background: rgba(255, 255, 255, 0.08);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18);
  }
}
@keyframes comment-pulse-bar {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}
.comment-row__time {
  color: var(--text-8);
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  width: 50px;
  flex-shrink: 0;
  padding-top: 2px;
}
.comment-row__thumb {
  width: 80px;
  height: 60px;
  border-radius: var(--r-sm);
  background:
    linear-gradient(135deg, #1f1f1f 0%, #141414 100%);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
}
.comment-row__thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 30% 60%, rgba(255,255,255,0.05) 0%, transparent 60%);
}
.comment-row__body { flex: 1; min-width: 0; }
.comment-row__meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--text-5);
  margin-bottom: var(--s-1);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}
.comment-row__lang {
  padding: 1px 6px;
  background: var(--surface-2);
  border-radius: var(--r-xs);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.6px;
  color: var(--text-6);
}
.comment-row__text {
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-2);
}
.comment-row__actions {
  flex-shrink: 0;
  display: flex;
  gap: var(--s-2);
  align-items: flex-start;
}
.icon-btn {
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--text-3);
}

/* Interactions list */
.interaction-row {
  display: flex;
  gap: var(--s-4);
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--divider-faint);
  align-items: center;
}
.interaction-row__time {
  color: var(--text-8);
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  width: 50px;
  flex-shrink: 0;
}
.interaction-row__type {
  padding: 2px 10px;
  background: var(--surface-1);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--text-5);
  flex-shrink: 0;
  min-width: 90px;
  text-align: center;
}
.interaction-row__detail { font-family: var(--font-sans); font-size: 13px; color: var(--text-3); }

/* Designer notes — conversational thread */
.note-card {
  background: var(--surface-1);
  border-radius: var(--r-lg);
  padding: var(--s-5);
  margin-bottom: var(--s-3);
}
.note-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--text-6);
  margin-bottom: var(--s-3);
}
.note-line {
  display: flex;
  gap: var(--s-3);
  margin-bottom: var(--s-3);
}
.note-line:last-child { margin-bottom: 0; }
.note-line--reply { margin-left: var(--s-4); }
.note-line__bar {
  width: 4px;
  border-radius: 2px;
  flex-shrink: 0;
  align-self: stretch;
}
.note-line--designer .note-line__bar { background: var(--bar-base); }
.note-line--reply    .note-line__bar { background: var(--accent); }
.note-line__body { flex: 1; }
.note-line__role {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.5px;
  color: var(--text-5);
  margin-bottom: var(--s-1);
}
.note-line__text {
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.5;
}
.note-line--reply .note-line__text { color: var(--text-2); }

/* Version trends — horizontal stacked bars, header with legend top-right */

.trends-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin-bottom: var(--s-6);
}
.trends-title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.4px;
  color: var(--text-1);
  margin: 0;
}
.trends-caption {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--text-5);
  margin: 4px 0 0;
}

.trends-legend {
  display: flex;
  gap: var(--s-4);
  flex-wrap: wrap;
  align-items: center;
}
.trends-legend__item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-4);
}
.trends-legend__swatch {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.trends-rows {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.trend-row {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--s-5);
  align-items: center;
}
.trend-row__label {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.4px;
  color: var(--text-1);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.trend-row__bar {
  display: flex;
  height: 48px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-2);
}
.trend-seg {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--s-3);
  font-family: var(--font-mono);
  transition: flex var(--t-medium);
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.trend-seg__pct {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  white-space: nowrap;
}
.trend-seg__name {
  font-size: 9px;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  opacity: 0.7;
  white-space: nowrap;
  margin-top: 2px;
}

.trend-seg--seat     { background: var(--bar-high);  color: var(--bg); }
.trend-seg--overhead { background: var(--bar-mid);   color: var(--bg); }
.trend-seg--window   { background: var(--bar-low);   color: var(--text-1); }
.trend-seg--other    { background: var(--bar-other); color: var(--text-2); }

/* Comment detail slide-over panel */
.comment-detail {
  position: fixed;
  top: 0;
  right: 0;
  width: 480px;
  max-width: 95vw;
  height: 100vh;
  background: var(--bg);
  border-left: 1px solid var(--divider-strong);
  z-index: 50;
  transform: translateX(100%);
  transition: transform 0.28s ease;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.comment-detail.open { transform: translateX(0); }

.comment-detail__header {
  padding: var(--s-5) var(--s-6);
  border-bottom: 1px solid var(--divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.comment-detail__close {
  width: 32px;
  height: 32px;
  border-radius: var(--r-sm);
  background: var(--surface-1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-3);
  font-size: 16px;
}

.comment-detail__viewpoint {
  margin: var(--s-5) var(--s-6);
  max-height: 320px;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--surface-1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.comment-detail__viewpoint img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

.comment-detail__body {
  padding: 0 var(--s-6) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}
.detail-section__label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--label-letter-spacing);
  color: var(--text-6);
  margin-bottom: var(--s-2);
}
.detail-object { font-family: var(--font-display); font-size: 18px; font-weight: 600; letter-spacing: -0.4px; color: var(--text-1); }
.detail-timestamp { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.3px; color: var(--text-5); margin-top: 2px; }

.waveform {
  height: 56px;
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0 var(--s-2);
}
.waveform__bar {
  flex: 1;
  background: var(--text-4);
  border-radius: 1px;
  min-height: 4px;
}

.detail-transcript {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  color: var(--text-2);
}
.detail-reply {
  background: var(--surface-1);
  border-radius: var(--r-md);
  padding: var(--s-4) var(--s-5);
  font-size: 13px;
  color: var(--text-3);
  line-height: 1.5;
  border-left: 3px solid var(--accent);
}

.scrim {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  backdrop-filter: blur(4px);
  z-index: 49;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease;
}
.scrim.open { opacity: 1; pointer-events: auto; }

/* dashboard responsive */
@media (max-width: 1100px) {
  .dashboard { flex-direction: column; }
  .dash-sidebar { width: 100%; border-right: 0; border-bottom: 1px solid var(--divider); }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .dash-split { grid-template-columns: 1fr; }
  .trends-row { grid-template-columns: 1fr; }
}

/* ============================================================
   Tab 4 — Setup & Costs
   ------------------------------------------------------------
   Summary table (top, TL;DR) → 2 tier cards side-by-side →
   Hardware + Content updates meta-cards → footer note.
   ============================================================ */

.tab-section--costs {
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

.summary-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--s-4);
  margin-bottom: var(--s-5);
  table-layout: fixed;
}
.summary-table th:first-child,
.summary-table td:first-child { width: 32%; }
.summary-table th,
.summary-table td { width: 34%; }

.summary-table thead th {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--label-letter-spacing);
  color: var(--text-6);
  padding: var(--s-3) var(--s-4);
  text-align: left;
  border-bottom: 1px solid var(--divider-strong);
}
.summary-table tbody td {
  padding: var(--s-4) var(--s-4);
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--text-2);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.1px;
  border-bottom: 1px solid var(--divider-faint);
}
.summary-table tbody td:first-child {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-5);
}

/* Subtotal row (Development) — bold but soft, between line items and Hardware/Management/Content */
.summary-table tbody tr.summary-row--subtotal td {
  background: rgba(255, 255, 255, 0.025);
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 700;
  color: var(--text-1);
  letter-spacing: -0.2px;
  border-top: 1px solid var(--text-7);
  border-bottom: 1px solid var(--text-7);
  font-variant-numeric: tabular-nums;
}
.summary-table tbody tr.summary-row--subtotal td:first-child {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.1px;
  text-transform: none;
  color: var(--text-2);
}

/* Total row — visually accented, tight vertical spacing */
.summary-table tfoot td {
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 700;
  color: var(--text-1);
  background: rgba(255, 255, 255, 0.05);
  border-top: 1px solid var(--text-6);
  border-bottom: 1px solid var(--divider-strong);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.3px;
}
.summary-table tfoot td:first-child {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.6px;
  text-transform: none;
  color: var(--text-1);
}


.summary-table__note {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--text-5);
  margin: var(--s-2) 0 0;
  text-align: right;
}

.tier-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
}
@media (max-width: 900px) {
  .tier-grid { grid-template-columns: 1fr; }
}

.tier-card {
  background: var(--surface-1);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-7);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: background var(--t-fast);
}
.tier-card:hover { background: #1d1d1d; }
.tier-card--full {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 60%),
    var(--surface-1);
  outline: 1px solid var(--divider-strong);
}
.tier-card__name {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.5px;
  margin: var(--s-1) 0 var(--s-1);
  line-height: 1.15;
}
.tier-card__subtitle {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.1px;
  color: var(--text-5);
  margin: 0 0 var(--s-4);
  line-height: 1.3;
}
.tier-card__price {
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--text-1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.2px;
}
.tier-card__timeline {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-5);
  letter-spacing: 0.3px;
  margin-top: var(--s-1);
}
.tier-card__details {
  margin-top: var(--s-4);
  border-top: 1px solid var(--divider-strong);
  padding-top: var(--s-3);
}
.tier-card__inherit {
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-4);
  margin: var(--s-3) 0 var(--s-4);
  font-style: normal;
}

/* Tier card description (paragraph at top of "What's included") */
.tier-description {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-2);
  margin: var(--s-2) 0 var(--s-5);
  padding-bottom: var(--s-4);
  border-bottom: 1px solid var(--divider-faint);
}

/* Feature clusters within a tier card */
.tier-cluster {
  margin-bottom: var(--s-5);
}
.tier-cluster:last-child { margin-bottom: 0; }
.tier-cluster__label {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: var(--text-4);
  margin-bottom: var(--s-3);
}
.tier-cluster ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.tier-cluster ul li {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-2);
  padding-left: var(--s-5);
  position: relative;
}
.tier-cluster ul li::before {
  content: '·';
  position: absolute;
  left: 4px;
  top: -4px;
  color: var(--text-3);
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}

/* Empty cluster (Intelligence in Base) — dimmed, single line */
.tier-cluster--empty .tier-cluster__label {
  color: var(--text-7);
}
.tier-cluster__none {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.4px;
  color: var(--text-6);
  margin: 0;
  padding-left: 0;
}

.meta-card {
  background: var(--surface-1);
  border-radius: var(--r-lg);
  padding: var(--s-5) var(--s-7);
}
.meta-card__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.4px;
  margin: var(--s-1) 0 var(--s-1);
}
.meta-card__desc {
  font-family: var(--font-sans);
  font-size: 14px;
  color: var(--text-4);
  line-height: 1.55;
  margin: 0;
  max-width: 720px;
}
.meta-card__details {
  margin-top: var(--s-3);
  border-top: 1px solid var(--divider-strong);
  padding-top: var(--s-2);
}

.hw-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: var(--s-3);
}
.hw-table td {
  padding: var(--s-3) 0;
  border-bottom: 1px solid var(--divider-faint);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-3);
  vertical-align: top;
}
.hw-table td:first-child {
  width: 35%;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--text-5);
  padding-right: var(--s-5);
}

.cost-footer {
  margin-top: var(--s-3);
  font-family: var(--font-sans);
  font-size: 13px;
  color: var(--text-5);
  line-height: 1.6;
  max-width: 720px;
  padding-top: var(--s-5);
  border-top: 1px solid var(--divider-faint);
}

/* ============================================================
   Tab 5 — Cloud Evolution (3-step timeline, scaled weight)
   ============================================================ */

.evolution-stack {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin-top: var(--s-8);
}

.evolution-step {
  background: var(--surface-1);
  border-radius: var(--r-lg);
  padding: var(--s-6) var(--s-7);
}
.evolution-step__eyebrow {
  display: block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: var(--label-letter-spacing);
  text-transform: uppercase;
  color: var(--text-5);
  margin-bottom: var(--s-2);
}
.evolution-step__title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 600;
  letter-spacing: -0.5px;
  line-height: 1.15;
  margin: 0 0 var(--s-3);
  color: var(--text-1);
}
.evolution-step__body {
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
  max-width: 820px;
}

/* Weight scaling: Now > When > Future */
.evolution-step--now {
  outline: 1px solid var(--divider-strong);
}
.evolution-step--now .evolution-step__eyebrow { color: var(--text-1); }
.evolution-step--now .evolution-step__body    { color: var(--text-2); }

.evolution-step--soon .evolution-step__body { color: var(--text-3); }
.evolution-step--soon .evolution-step__title { color: var(--text-1); }

.evolution-step--future {
  background: transparent;
  outline: 1px solid var(--divider);
}
.evolution-step--future .evolution-step__title { color: var(--text-3); font-weight: 500; }
.evolution-step--future .evolution-step__body  { color: var(--text-5); }

.evolution-footer {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 1px solid var(--divider-faint);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.3px;
  color: var(--text-5);
  line-height: 1.6;
  max-width: 720px;
}

.cloud-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  margin-top: var(--s-8);
  padding: var(--s-3) var(--s-6);
  background: var(--surface-1);
  border: 1px solid var(--divider-strong);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-1);
  text-decoration: none;
  transition: background var(--t-fast), border-color var(--t-fast), transform var(--t-fast);
}
.cloud-cta:hover {
  background: var(--surface-2);
  border-color: var(--text-5);
}
.cloud-cta:hover span { transform: translateX(2px); }
.cloud-cta span { transition: transform var(--t-fast); display: inline-block; }

/* ============================================================
   Legacy cost-table (kept for backwards compatibility, unused
   by current Tab 4. Safe to remove in a future cleanup pass.)
   ============================================================ */

.cost-table {
  margin-top: var(--s-8);
  border-top: 1px solid var(--divider-strong);
}
.cost-table__row {
  display: grid;
  grid-template-columns: 2fr 1fr 1.5fr;
  gap: var(--s-6);
  padding: var(--s-5) 0;
  border-bottom: 1px solid var(--divider-strong);
  align-items: baseline;
}
.cost-table__row--header {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: var(--label-letter-spacing);
  color: var(--text-6);
  padding: var(--s-3) 0;
}
.cost-table__component { font-family: var(--font-display); font-size: 16px; color: var(--text-1); font-weight: 600; letter-spacing: -0.3px; }
.cost-table__type { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.5px; color: var(--text-4); }
.cost-table__cost { font-family: var(--font-mono); font-size: 15px; color: var(--text-2); font-weight: 500; font-variant-numeric: tabular-nums; letter-spacing: -0.1px; text-align: right; }

.cost-note {
  margin-top: var(--s-6);
  font-size: 13px;
  color: var(--text-5);
  font-style: normal;
  max-width: 720px;
}

@media (max-width: 700px) {
  .cost-table__row { grid-template-columns: 1fr; gap: var(--s-2); }
  .cost-table__cost { text-align: left; }
}