/* The Pricing and marketing screen: price option cards, panels and verdict lines.
   Tokens and shared components come from sim.css; every rule is scoped under .sim. */

.sim .sim-pricing__intro { margin: 2px 0 14px; }
.sim .sim-pricing__after { margin-top: 12px; }
.sim .sim-pricing__problems:empty { display: none; }
.sim .sim-pricing__problems { margin-top: 10px; color: var(--sim-accent-hover); }
.sim .sim-pricing__caveat { margin-top: 12px; }

/* Price option cards: stack when the column is narrow. */
.sim .sim-pricing__cards { display: flex; flex-wrap: wrap; gap: 16px; }
.sim .sim-pricing__card {
  flex: 1 1 240px;
  min-width: 0;
  padding: 16px 18px;
  background: var(--sim-card);
  border: 1px solid var(--sim-border);
  border-radius: var(--sim-radius);
}
.sim .sim-pricing__card--current { border: 2px solid var(--sim-accent); padding: 15px 17px; }
.sim .sim-pricing__label { font-size: 13px; color: var(--sim-muted); }
.sim .sim-pricing__card--current .sim-pricing__label { color: var(--sim-accent); font-weight: 600; }
.sim .sim-pricing__prices { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 6px 0 12px; }
.sim .sim-pricing__price { font-family: var(--sim-font-head); font-weight: 700; font-size: 24px; }
.sim .sim-pricing__per { color: var(--sim-muted); font-size: 14px; }
.sim .sim-pricing__bar { height: 10px; border-radius: 5px; background: var(--sim-border); }
.sim .sim-pricing__bar-fill {
  width: calc(var(--share, 0) * 100%);
  height: 10px;
  border-radius: 5px;
  background: var(--sim-mid);
}
.sim .sim-pricing__card--current .sim-pricing__bar-fill { background: var(--sim-accent); }
.sim .sim-pricing__result { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; margin-top: 8px; }
.sim .sim-pricing__result span { color: var(--sim-muted); }
.sim .sim-pricing__reference { margin-top: 4px; font-size: 13px; color: var(--sim-muted); }

/* Panels beside each other when there is room, stacked when not. The 420 px basis is only
   for panels inside the wrapping row (.sim-layout); a panel in a column keeps its height. */
.sim .sim-pricing__panel { min-width: 0; }
.sim .sim-layout > .sim-pricing__panel { flex: 1 1 420px; }
.sim .sim-pricing__scenario { margin: 0 0 14px; }

.sim .sim-pricing__verdicts { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.sim .sim-pricing__verdict,
.sim .sim-pricing__verdicts p {
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--sim-raised);
  font-size: 14px;
}
.sim .sim-pricing__panel > .sim-pricing__verdict { margin-top: 14px; }
.sim .sim-pricing__verdict:empty { display: none; }
.sim .sim-pricing__after:empty { display: none; }

/* The four sliders: side by side when there is room, one column when not; a value never wraps. */
.sim .sim-pricing__sliders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: 14px 28px;
}
.sim .sim-pricing__sliders .sim-slider { min-width: 0; }
.sim .sim-pricing__sliders .sim-slider__value { flex: 0 0 auto; white-space: nowrap; }