/* ============================================================
   Treatment B — light-terminal container. A reusable "window" panel that
   breaks up the dark sections with an engineered, on-brand look. Applied first
   to the Outcomes "before → after" block, rendered as a diff. Brand tokens come
   from colors.css / typography.css (loaded before this file).
   ============================================================ */
.term-panel{
  max-width:820px;
  margin-inline:auto;
  background:var(--panel);
  border:1px solid var(--panel-edge);
  border-radius:var(--r-md, 12px);
  overflow:hidden;
  box-shadow:0 24px 60px -28px rgba(5, 10, 25, .85);
  text-align:left;
}
.term-panel__bar{
  display:flex;
  align-items:center;
  gap:12px;
  padding:11px 16px;
  background:#E4EAF3;
  border-bottom:1px solid var(--panel-chip-edge);
}
.term-panel__dots{ display:flex; gap:7px; }
.term-panel__dots i{ width:11px; height:11px; border-radius:50%; display:block; }
.term-panel__dots i:nth-child(1){ background:#e6a3a0; }
.term-panel__dots i:nth-child(2){ background:#e7c9a0; }
.term-panel__dots i:nth-child(3){ background:#9fcbb0; }
.term-panel__file{
  font-family:var(--font-mono);
  font-size:12.5px;
  letter-spacing:.02em;
  /* 4.54:1 on the --panel-bar fill. Tight — do not darken that bar without
     re-measuring this pairing. */
  color:var(--text-muted);
  font-weight:500;
}
.term-panel__body{ padding:18px 20px 20px; }

/* The Outcomes before→after rows, re-cast as diff lines on the light ground.
   Overrides the dark-section .ba styling (higher specificity via .term-panel). */
.term-panel .ba{ max-width:none; margin:0; gap:2px; }
.term-panel .ba-row{
  grid-template-columns:1fr;
  align-items:start;
  gap:5px;
  padding:12px 12px;
  border:0;
  border-radius:8px;
  background:transparent;
  font-family:var(--font-mono);
  font-size:14px;
  line-height:1.45;
}
.term-panel .ba-row + .ba-row{ border-top:1px solid var(--panel-rule); }
.term-panel .ba-row__arrow{ display:none; }
.term-panel .ba-row__from,
.term-panel .ba-row__to{ position:relative; padding-left:22px; }
/* The struck side of the diff stays subordinate to the green '+' line, but it
   is real content text — #8a93a8 measured 2.74:1 on --panel. 4.88:1 here, with
   the weight difference carrying the emphasis instead of the contrast. */
.term-panel .ba-row__from{ color:var(--text-muted); }
.term-panel .ba-row__from::before{ content:"-"; position:absolute; left:7px; top:0; color:#cc7a76; font-weight:700; }
.term-panel .ba-row__to{ color:var(--green-ink, #0b7a50); font-weight:600; }
.term-panel .ba-row__to::before{ content:"+"; position:absolute; left:7px; top:0; color:var(--green, #17b87a); font-weight:700; }
/* The diff reads clearly without the dark-theme strikethrough sweep. */
.term-panel .ba-row__from::after{ display:none; }

@media (max-width:640px){
  .term-panel__body{ padding:14px 14px 16px; }
  .term-panel .ba-row{ font-size:13px; }
}

/* ---- Extended: the Fit section as a terminal "compatibility check" ----
   #fit is pulled into the deep-navy world (page.css §"who it's for"), so a
   light panel here breaks up the dark. Scoped under #fit to outrank the
   id-level dark overrides. Pass/fail glyphs only reinforce the column
   headings, which still carry the meaning on their own. */
#fit .term-panel__body{ padding:20px 22px 22px; }
#fit .term-panel .fit{ gap:32px; }

/* ---- Mid-funnel CTA after the Outcomes payoff (on the dark section) ---- */