/* Money surfaces: payout orders, the plan upgrade cards, and the Brand
   contact-sales panel. Split out of dashboard.css, which had grown past the
   line ceiling — see docs/IMPLEMENTATION.md §15. */

.order-list { display: flex; flex-direction: column; gap: 2px; }

.order-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}

.order-row:last-child { border-bottom: none; }
.order-amount { font-variant-numeric: tabular-nums; font-weight: 500; }

/* Plan & billing upgrade cards: compact, price beside the name, actions on
   one row — none of the landing page's fixed-height airiness. */
.upgrade-card { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 10px; }
.upgrade-card.is-current { border-color: var(--accent); background: var(--accent-soft); }

.upgrade-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.upgrade-name { font-size: 16px; font-weight: 600; display: inline-flex; align-items: center; gap: 9px; }
.upgrade-price { font-size: 26px; font-weight: 600; letter-spacing: -0.03em; white-space: nowrap; }
.upgrade-price span { font-size: 13px; font-weight: 400; color: var(--muted); letter-spacing: 0; }

/* flex:1 pushes the action row to the bottom, so both cards line up. */
.upgrade-blurb { font-size: 13.5px; color: var(--muted); line-height: 1.55; flex: 1; }
.upgrade-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* ── Brand has nothing left to buy, so this panel sells a conversation rather
   than a plan. The gold is the whisper-level brand tint from tokens.css — an
   ambient wash and an icon, never a button or a structural surface. ── */
.sales-panel {
  align-items: center;
  text-align: center;
  gap: 13px;
  padding: 44px 26px 46px;
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(120% 140% at 50% -25%, var(--brand-soft), transparent 62%),
    var(--surface);
}

.sales-medal {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: var(--r-pill);
  border: 1px solid var(--line);
  background: var(--bg-raised);
  color: var(--brand);
}

.sales-medal svg { width: 20px; height: 20px; }
.sales-title { font-size: 19px; font-weight: 600; letter-spacing: -0.02em; }
.sales-copy { max-width: 46ch; font-size: 14.5px; line-height: 1.6; color: var(--muted); }
.sales-cta { margin-top: 5px; }

@media (max-width: 560px) {
  .sales-panel { padding: 34px 18px 36px; }
  .sales-cta { width: 100%; }
}

/* ── Plan & billing: two upgrade cards, a little wider, centered ── */
.plan-grid--two {
  /* Capped near the landing card width: wide enough to breathe, never so
     wide the copy inside stops reading as a card. */
  grid-template-columns: repeat(2, minmax(280px, 390px));
  justify-content: center;
}
@media (max-width: 900px) {
  .plan-grid--two { grid-template-columns: 1fr; }
}