/* -----------------------------------------------------------------------------
   dashboard.html, page-specific layout only. Tokens and shared components
   (kicker, section__h, section__intro, chips, halo--*, chart-*, dash-*,
   stat-countup, reveal) live in styles.css sections 23 to 27. This file exists
   so the page's own stylesheet link resolves; dashboard.html reuses the
   generic .section { margin-top: var(--sect) } rhythm on every section here,
   so no page-specific vertical-rhythm override is needed (contrast cario.css,
   whose section names are not already ".section"-classed).
   -------------------------------------------------------------------------- */

/* Shared classes this page uses (.dash-*, .stats, .chart-*, .stat-countup,
   .work-card, .work__grid, .halo--*) are styled in styles.css. Below: only the
   Data-products menu bits specific to this page (a real photo inside a work-card,
   the status label, and the coming-soon placeholder card). */

.prod__grid { margin-top: var(--s-7); }

/* Cario card: a real photo fills the work-card visual (home cards use SVG faces). */
.prod-card__photo {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-card);
}

/* Product status label (mono, above the name). */
.prod-card__status {
  display: inline-block;
  margin-top: var(--s-5);
  margin-bottom: var(--s-2);
  font: 400 var(--fs-label) var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.prod-card__status--live { color: var(--accent-deep); }
.prod-card__status--soon { color: var(--ink-2); }

/* Coming-soon card: a calm dashed placeholder instead of a photo. */
.prod-card__soonvis {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  border: 1px dashed var(--line-strong);
  border-radius: var(--r-card);
  background: var(--bg-elev);
}
.prod-card__soonmark {
  font: 400 var(--fs-label) var(--font-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* The line that points down to Cario's live data. */
.prod-note { margin-top: var(--s-7); }

/* -----------------------------------------------------------------------------
   Flagship band (2026-07 fleet review): Cario full-width, photo + pitch +
   real mini-figures + waitlist CTA. The coming-soon card is retired to a line.
   -------------------------------------------------------------------------- */
.prod-flag {
  display: grid;
  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
  gap: var(--s-7);
  align-items: center;
  margin-top: var(--s-7);
}
.prod-flag__vis { display: block; }
.prod-flag__figs {
  list-style: none;
  margin: var(--s-5) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
}
.prod-flag__figs li {
  font: 400 var(--fs-small) var(--font-mono);
  color: var(--ink-2);
}
.prod-flag__figs b { font-weight: 500; color: var(--ink); }
.prod-flag__actions {
  margin-top: var(--s-6);
  display: flex;
  align-items: center;
  gap: var(--s-6);
}
@media (max-width: 760px) {
  .prod-flag { grid-template-columns: 1fr; gap: var(--s-5); }
}

/* LIVE badge above the studio panel. */
.dash-live {
  margin-top: var(--s-4);
  font: 400 var(--fs-label) var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--accent-deep);
}
.dash-live__dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  margin-right: 0.5rem;
  vertical-align: 1px;
}

/* Chapter index under the studio intro. */
.dash-index {
  margin-top: var(--s-4);
  font: 400 var(--fs-small) var(--font-mono);
}
.dash-index a { color: var(--ink-2); text-decoration: none; }
.dash-index a:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.dash-index .sep { color: var(--line-strong); margin: 0 0.6rem; }

/* Quiet mid-scroll conversion line (identical wording each time). */
.dash-microcta { margin-top: var(--s-6); }
.dash-microcta .link { color: var(--accent-deep); }

/* Client bridge above the footer. */
.dash-bridge__line {
  font-size: var(--fs-lead);
  line-height: 1.65;
  color: var(--ink-2);
  max-width: 46rem;
}

/* -----------------------------------------------------------------------------
   Mobile chart legibility (fleet finding W3: 11-13px SVG text rendered ~4.5-6px).
   CSS font-size beats the SVG presentation attribute, so one rule scales all
   chart text up on small screens; panel padding shrinks to buy render width.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .chart text { font-size: 17px; }
  .dash-studio__panel { padding: var(--s-4) var(--s-3); }
  .dash-chart__panel { padding: var(--s-3) var(--s-2); }
}

/* Flagship art (the dissolving car): transparent video over the page paper. */
.prod-flag__art {
  display: block;
  width: 100%;
  height: auto;
}
.prod-flag__sub {
  margin-top: var(--s-4);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-2);
  max-width: 32rem;
}