/* ==========================================================================
   Neuro Support — Visual treatments for Phase 2 Tracks, Block Cadence,
   and Pro/Max comparison.
   Drops into services.html / index.html. Uses existing tokens only.
   ========================================================================== */

/* ---------- Shared: section eyebrow / headings (already in style.css —
   redeclared here so component fragments render standalone in the canvas) */

.t-section {
  background: var(--void);
  color: var(--mist);
  padding: var(--s-9) var(--s-6);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
}

.t-container { max-width: var(--container); margin: 0 auto; }

.t-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--s-4);
}
.t-eyebrow::before {
  content: "";
  width: 22px;
  height: 1px;
  background: currentColor;
}

.t-section h2 {
  font-family: var(--font-heading);
  color: var(--paper);
  font-size: var(--step-4);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.15;
  margin: 0 0 var(--s-4);
  text-wrap: balance;
}
.t-section .t-lede {
  color: var(--mist);
  font-size: var(--step-1);
  max-width: 640px;
  margin: 0 0 var(--s-7);
  text-wrap: pretty;
}

.t-section h3 {
  font-family: var(--font-heading);
  color: var(--paper);
  font-size: var(--step-2);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0;
}

/* ============================================================
   P1 · DIRECTION A — Three tracks, equal weight, status-led.
   Active card uses signal border + tinted header strip.
   Coming-soon cards use desaturated chrome + a "preview" badge,
   not opacity (which makes them feel broken instead of pending).
   ============================================================ */

.tracks-a {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5);
  margin-top: var(--s-7);
}
@media (max-width: 960px) {
  .tracks-a { grid-template-columns: 1fr; }
}

.track-card {
  background: var(--void-2);
  border: 1px solid var(--void-3);
  border-radius: var(--r);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.track-card:hover { transform: translateY(-3px); }

.track-card__head {
  padding: var(--s-5) var(--s-6) var(--s-4);
  border-bottom: 1px solid var(--void-3);
  position: relative;
}

.track-card__index {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--mist-muted);
  letter-spacing: 0.12em;
  display: block;
  margin-bottom: var(--s-3);
}
.track-card--active .track-card__index { color: var(--signal); }

.track-card__title {
  font-family: var(--font-heading);
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--paper);
  letter-spacing: -0.02em;
  margin: 0 0 var(--s-2);
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--s-3);
}

.track-card__sub {
  color: var(--mist-muted);
  font-size: var(--step--1);
  margin: 0;
  line-height: 1.5;
}

.track-card__body {
  padding: var(--s-5) var(--s-6) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  flex: 1;
}

.track-card__price {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  font-family: var(--font-heading);
  font-size: var(--step-3);
  font-weight: 600;
  color: var(--paper);
  letter-spacing: -0.02em;
}
.track-card__price small {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--mist-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.track-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.track-card__list li {
  position: relative;
  padding-left: 22px;
  color: var(--mist);
  font-size: var(--step-0);
  line-height: 1.55;
  margin: 0;
}
.track-card__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 14px;
  height: 2px;
  background: var(--signal);
}
.track-card--coming .track-card__list li::before { background: var(--mist-faint); }

.track-card__cta {
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px dashed var(--void-3);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
}

.t-btn {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--step-0);
  border-radius: 999px;
  padding: 12px 22px;
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s var(--ease);
}
/* Double-class specificity (0,2,0) so these beat `.section--dark a` (0,1,1)
   from style.css without needing !important. */
.t-btn.t-btn--primary {
  background: var(--signal);
  color: var(--paper);
}
.t-btn.t-btn--primary:hover {
  background: var(--signal-2);
  color: var(--paper);
}
.t-btn.t-btn--ghost {
  background: transparent;
  color: var(--mist);
  border-color: rgba(255,255,255,0.18);
}
.t-btn.t-btn--ghost:hover {
  border-color: var(--signal);
  color: var(--signal);
}
.t-btn--sm { padding: 8px 16px; font-size: var(--step--1); }

/* Status pill — replaces "opacity" treatment which makes coming-soon cards
   read as disabled. Each state has its own visible language. */
.track-status {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.track-status--active {
  background: var(--signal-ghost);
  color: var(--signal);
  border: 1px solid rgba(232,113,58,0.4);
}
.track-status--active::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--signal);
  box-shadow: 0 0 0 0 rgba(232,113,58,0.6);
  animation: t-pulse 2.4s var(--ease) infinite;
}
@keyframes t-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(232,113,58,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(232,113,58,0); }
  100% { box-shadow: 0 0 0 0 rgba(232,113,58,0); }
}
.track-status--preview {
  background: rgba(255,255,255,0.04);
  color: var(--mist);
  border: 1px solid var(--mist-faint);
}
@media (prefers-reduced-motion: reduce) {
  .track-status--active::before { animation: none; }
}

/* Active card visual lift */
.track-card--active {
  border-color: var(--signal);
  box-shadow: 0 0 0 1px var(--signal), 0 24px 50px -28px rgba(232,113,58,0.35);
}
.track-card--active .track-card__head {
  background: linear-gradient(180deg, rgba(232,113,58,0.10) 0%, rgba(232,113,58,0.02) 100%);
  border-bottom-color: rgba(232,113,58,0.25);
}

/* Coming-soon card chrome */
.track-card--coming .track-card__head {
  background: rgba(255,255,255,0.02);
}
.track-card--coming .track-card__title { color: var(--mist); }
.track-card--coming .track-card__price { color: var(--mist); }
.track-card--coming .track-card__price small { color: var(--mist-muted); }

/* "Notify me" inline form on coming-soon cards */
.track-notify {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mist-muted);
}

/* ============================================================
   P1 · DIRECTION B — Active panel as hero, previews as a quieter
   row underneath. Hierarchy is unambiguous: the page is selling
   the one bookable thing; the previews are a roadmap, not a menu.
   ============================================================ */

.tracks-b {
  display: flex;
  flex-direction: column;
  gap: var(--s-7);
  margin-top: var(--s-7);
}

.tracks-b__hero {
  background: var(--void-2);
  border: 1px solid var(--signal);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  position: relative;
}
@media (max-width: 900px) {
  .tracks-b__hero { grid-template-columns: 1fr; }
}

.tracks-b__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 80% at 0% 0%, rgba(232,113,58,0.14), transparent 70%);
  pointer-events: none;
}

.tracks-b__hero-content {
  padding: var(--s-7) var(--s-7) var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  position: relative;
}
.tracks-b__hero-content .track-status { align-self: flex-start; }

.tracks-b__hero-title {
  font-family: var(--font-heading);
  font-size: var(--step-4);
  font-weight: 600;
  letter-spacing: -0.025em;
  color: var(--paper);
  margin: 0;
  line-height: 1.1;
}

.tracks-b__hero-sub {
  color: var(--mist);
  font-size: var(--step-1);
  margin: 0;
  max-width: 36ch;
  text-wrap: pretty;
}

.tracks-b__hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-5);
  font-family: var(--font-mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mist-muted);
  border-top: 1px solid var(--void-3);
  padding-top: var(--s-4);
  margin-top: var(--s-3);
}
.tracks-b__hero-meta strong {
  color: var(--paper);
  font-weight: 500;
}

.tracks-b__hero-actions {
  display: flex;
  gap: var(--s-3);
  margin-top: var(--s-3);
  flex-wrap: wrap;
}

.tracks-b__hero-detail {
  background: rgba(0,0,0,0.25);
  border-left: 1px solid var(--void-3);
  padding: var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  position: relative;
}
@media (max-width: 900px) {
  .tracks-b__hero-detail {
    border-left: none;
    border-top: 1px solid var(--void-3);
  }
}

.tracks-b__hero-detail h4 {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0 0 var(--s-2);
}

.tracks-b__hero-detail ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}
.tracks-b__hero-detail li {
  position: relative;
  padding-left: 22px;
  color: var(--mist);
  font-size: var(--step-0);
  line-height: 1.55;
  margin: 0;
}
.tracks-b__hero-detail li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 14px;
  height: 2px;
  background: var(--signal);
}

/* Roadmap row */
.tracks-b__roadmap-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist-muted);
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-bottom: var(--s-4);
}
.tracks-b__roadmap-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--void-3);
}

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

.roadmap-card {
  background: transparent;
  border: 1px solid var(--void-3);
  border-radius: var(--r);
  padding: var(--s-5) var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  transition: border-color 0.25s var(--ease), background 0.25s var(--ease);
}
.roadmap-card:hover {
  border-color: var(--mist-faint);
  background: rgba(255,255,255,0.02);
}

.roadmap-card__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
}
.roadmap-card__name {
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-weight: 600;
  color: var(--paper);
  letter-spacing: -0.015em;
  margin: 0;
}
.roadmap-card__sub {
  font-size: var(--step--1);
  color: var(--mist-muted);
  margin: 0;
  line-height: 1.5;
}

/* ============================================================
   P2 · BLOCK CADENCE — heartbeat
   Two blocks of 8 sessions, an opt-in pulse between, then the
   next block (or a quiet ending). Inline, not page-dominating.
   ============================================================ */

.cadence {
  background: var(--void-2);
  border: 1px solid var(--void-3);
  border-radius: var(--r);
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
  font-family: var(--font-body);
}
.cadence--light {
  background: var(--paper-2);
  border-color: var(--paper-3);
  color: var(--ink-2);
}

.cadence__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.cadence__title {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--signal);
  margin: 0;
}
.cadence__caption {
  font-size: var(--step--1);
  color: var(--mist-muted);
  margin: 0;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.cadence--light .cadence__caption { color: var(--ink-muted); }

/* The track itself */
.cadence__track {
  position: relative;
  height: 96px;
  display: flex;
  align-items: center;
  gap: 0;
}

.cadence__rail {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--void-3);
  transform: translateY(-50%);
}
.cadence--light .cadence__rail { background: var(--paper-3); }

/* Block: a row of 8 sessions */
.cadence-block {
  position: relative;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 0 var(--s-3);
}
.cadence-block__sessions {
  display: flex;
  align-items: center;
  z-index: 1;
  /* Spread the 8 dots across the block's full width so each dot reads as one
     of the 8 Sessions in the 2-month block, instead of clustering as a small
     island in the centre. */
  width: 100%;
  justify-content: space-between;
  padding: 0 4px;
}
.cadence-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--signal);
}
.cadence--light .cadence-dot { background: var(--signal); }
.cadence-block--future .cadence-dot { background: var(--void-3); }
.cadence--light .cadence-block--future .cadence-dot { background: var(--paper-4); }

.cadence-block__label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist-muted);
  white-space: nowrap;
}
.cadence-block__label strong {
  color: var(--paper);
  font-weight: 500;
  display: block;
  font-size: 0.72rem;
}
.cadence--light .cadence-block__label { color: var(--ink-muted); }
.cadence--light .cadence-block__label strong { color: var(--ink); }

/* The opt-in beat between blocks */
.cadence-beat {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 2;
  padding: 0 var(--s-2);
}
.cadence-beat__pulse {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  background: var(--signal);
  position: relative;
  box-shadow: 0 0 0 0 rgba(232,113,58,0.55);
}
.cadence-beat__pulse::before,
.cadence-beat__pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 1.5px solid var(--signal);
  opacity: 0;
}

/* Animated variant */
.cadence--animated .cadence-beat__pulse {
  animation: t-beat 4s var(--ease) infinite;
}
.cadence--animated .cadence-beat__pulse::before {
  animation: t-ring 4s var(--ease) infinite;
}
.cadence--animated .cadence-beat__pulse::after {
  animation: t-ring 4s var(--ease) infinite;
  animation-delay: 0.45s;
}
.cadence--animated .cadence-block--future .cadence-dot {
  animation: t-dot-fill 4s var(--ease) infinite;
}
.cadence--animated .cadence-block--future .cadence-dot:nth-child(1) { animation-delay: 0.0s; }
.cadence--animated .cadence-block--future .cadence-dot:nth-child(2) { animation-delay: 0.06s; }
.cadence--animated .cadence-block--future .cadence-dot:nth-child(3) { animation-delay: 0.12s; }
.cadence--animated .cadence-block--future .cadence-dot:nth-child(4) { animation-delay: 0.18s; }
.cadence--animated .cadence-block--future .cadence-dot:nth-child(5) { animation-delay: 0.24s; }
.cadence--animated .cadence-block--future .cadence-dot:nth-child(6) { animation-delay: 0.30s; }
.cadence--animated .cadence-block--future .cadence-dot:nth-child(7) { animation-delay: 0.36s; }
.cadence--animated .cadence-block--future .cadence-dot:nth-child(8) { animation-delay: 0.42s; }

@keyframes t-beat {
  0%, 30%      { transform: scale(1);    box-shadow: 0 0 0 0 rgba(232,113,58,0.55); }
  40%          { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(232,113,58,0); }
  50%, 100%    { transform: scale(1);    box-shadow: 0 0 0 0 rgba(232,113,58,0); }
}
@keyframes t-ring {
  0%, 30% { opacity: 0; transform: scale(1); }
  40%     { opacity: 0.9; transform: scale(1); }
  70%     { opacity: 0; transform: scale(2.2); }
  100%    { opacity: 0; transform: scale(2.2); }
}
@keyframes t-dot-fill {
  0%, 50%   { background: var(--void-3); }
  60%, 100% { background: var(--signal); }
}
.cadence--light.cadence--animated .cadence-block--future .cadence-dot {
  animation-name: t-dot-fill-light;
}
@keyframes t-dot-fill-light {
  0%, 50%   { background: var(--paper-4); }
  60%, 100% { background: var(--signal); }
}

@media (prefers-reduced-motion: reduce) {
  .cadence--animated .cadence-beat__pulse,
  .cadence--animated .cadence-beat__pulse::before,
  .cadence--animated .cadence-beat__pulse::after,
  .cadence--animated .cadence-block--future .cadence-dot {
    animation: none !important;
  }
}

.cadence-beat__label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal);
  white-space: nowrap;
  text-align: center;
}
.cadence-beat__label small {
  display: block;
  color: var(--mist-muted);
  font-size: 0.62rem;
  margin-top: 2px;
  letter-spacing: 0.08em;
}
.cadence--light .cadence-beat__label small { color: var(--ink-muted); }

.cadence__legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-5);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mist-muted);
  border-top: 1px solid var(--void-3);
  padding-top: var(--s-4);
}
.cadence--light .cadence__legend {
  color: var(--ink-muted);
  border-top-color: var(--paper-3);
}
.cadence__legend span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.cadence__legend .swatch {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--signal);
}
.cadence__legend .swatch--future {
  background: var(--void-3);
}
.cadence--light .cadence__legend .swatch--future { background: var(--paper-4); }

/* ============================================================
   P3 · PRO vs MAX — split card, glanceable, fits inside a track
   ============================================================ */

.promax {
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--void-3);
  border-radius: var(--r);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  position: relative;
  font-family: var(--font-body);
}
.promax::before {
  content: "$1,499";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  background: var(--void-2);
  border: 1px solid var(--void-3);
  color: var(--paper);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--step--1);
  padding: 4px 10px;
  border-radius: 999px;
  z-index: 2;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

.promax__col {
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  position: relative;
}
.promax__col + .promax__col {
  border-left: 1px solid var(--void-3);
}

.promax__tier {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--mist-muted);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
}

.promax__name {
  font-family: var(--font-heading);
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--paper);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1;
  /* Centre the headline so the seam-floating $1,499 pill never collides
     with the digit. Keeps "8 vs 4" reading as a balanced comparison. */
  text-align: center;
}

.promax__rows {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px var(--s-3);
  align-items: baseline;
  margin-top: var(--s-2);
  font-size: var(--step--1);
}
.promax__rows dt {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist-muted);
  white-space: nowrap;
}
.promax__rows dd {
  margin: 0;
  color: var(--mist);
  font-weight: 500;
  font-size: var(--step-0);
  line-height: 1.3;
}
.promax__rows dd strong {
  color: var(--paper);
  font-weight: 600;
}

.promax__tag {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal);
  border: 1px solid rgba(232,113,58,0.35);
  background: var(--signal-ghost);
  padding: 3px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.promax__bar {
  height: 4px;
  border-radius: 999px;
  background: var(--void-3);
  overflow: hidden;
  position: relative;
  margin-top: 4px;
}
.promax__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--fill, 100%);
  background: var(--signal);
  border-radius: inherit;
}

.promax__hint {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mist-muted);
  margin: 0;
}

/* Light variant for use on paper backgrounds */
.promax--light {
  background: var(--paper);
  border-color: var(--paper-3);
}
.promax--light::before {
  background: var(--paper-2);
  border-color: var(--paper-3);
  color: var(--ink);
}
.promax--light .promax__col + .promax__col { border-left-color: var(--paper-3); }
.promax--light .promax__name { color: var(--ink); }
.promax--light .promax__rows dd { color: var(--ink-2); }
.promax--light .promax__rows dd strong { color: var(--ink); }
.promax--light .promax__rows dt,
.promax--light .promax__tier,
.promax--light .promax__hint { color: var(--ink-muted); }
.promax--light .promax__bar { background: var(--paper-3); }

@media (max-width: 480px) {
  .promax { grid-template-columns: 1fr; }
  .promax__col + .promax__col {
    border-left: none;
    border-top: 1px solid var(--void-3);
  }
  .promax--light .promax__col + .promax__col { border-top-color: var(--paper-3); }
  .promax::before {
    top: 50%;
  }
}

/* ============================================================
   P3.5 · Digit-pairing variants
   Two directions for resolving the "8" / "4" ambiguity and the
   COMPUTE-pill-over-sessions-count semantic mismatch.
   Both reuse .promax shell; only digit treatment changes.
   ============================================================ */

/* DIRECTION A — Unit label under the digit.
   Lever pill stays at top as tier-character chip. The digit
   gains a small "Sessions" caption underneath, glued by tight
   line-height so the pair reads as one unit. Both columns get
   "Sessions" because both digits are sessions. */
.promax--dpa .promax__name {
  margin-bottom: 2px;
}
.promax__unit {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mist-muted);
  margin: 0;
  line-height: 1;
  text-align: center;
}
.promax--light .promax__unit { color: var(--ink-muted); }

/* DIRECTION B — Restructured headline.
   Top label collapses to PRO / MAX (sole tier indicator, no
   competing orange chip). Headline becomes a baseline-aligned
   digit + unit pair on one line. Tier character (session-heavy
   / compute-heavy) survives in the .promax__hint footer. */
.promax--dpb .promax__tier {
  color: var(--paper);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
}
.promax--dpb.promax--light .promax__tier { color: var(--ink); }
.promax--dpb .promax__tier .promax__tag {
  background: transparent;
  border-color: var(--mist-faint);
  color: var(--mist-muted);
}
.promax--light.promax--dpb .promax__tier .promax__tag {
  border-color: var(--paper-3);
  color: var(--ink-muted);
}

.promax__headline {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 8px;
  margin: 0;
  line-height: 1;
}
.promax__headline-num {
  font-family: var(--font-heading);
  font-size: var(--step-3);
  font-weight: 600;
  color: var(--paper);
  letter-spacing: -0.025em;
  line-height: 1;
}
.promax--light .promax__headline-num { color: var(--ink); }
.promax__headline-unit {
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-weight: 500;
  color: var(--mist);
  letter-spacing: -0.01em;
  line-height: 1;
}
.promax--light .promax__headline-unit { color: var(--ink-2); }

/* DPB · Dual-bar trade-off block.
   Two stacked bars per column (Sessions, Compute) with mono caps labels
   to the left. Reads as a paired contrast: Pro is full Sessions / short
   Compute, Max is short Sessions / full Compute. */
.promax--dpb .promax__bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: var(--s-2);
}
.promax--dpb .promax__bar-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  align-items: center;
  gap: var(--s-3);
}
.promax--dpb .promax__bar-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mist-muted);
  white-space: nowrap;
  margin: 0;
  line-height: 1;
}
.promax--light.promax--dpb .promax__bar-label { color: var(--ink-muted); }
.promax--dpb .promax__bar { margin-top: 0; }