/* =============================================================
   UPGRADE PAGE — /upgrade/
   -------------------------------------------------------------
   The sales page for the six $5 deep-dive tests and the $9
   e-book. Each test card carries its emotion's pastel as a top
   accent so the grid reads as the familiar six-color family.
   Design tokens come from global.css.
   ============================================================= */

.upgrade {
  padding: var(--space-lg) 0 var(--space-xl);
}

.upgrade__header {
  text-align: center;
  max-width:  720px;
  margin:     0 auto var(--space-lg);
}

.upgrade__subhead {
  color:      var(--color-text-muted);
  margin-top: var(--space-sm);
}

/* --- The six-card grid --- */

.upgrade__grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap:                   var(--space-md);
  margin-bottom:         var(--space-lg);
}

.upgrade-card {
  display:        flex;
  flex-direction: column;
  background:     var(--color-surface);
  border:         1px solid var(--color-border);
  border-top:     6px solid var(--color-border);   /* Recolored per emotion below */
  border-radius:  var(--radius-lg);
  padding:        var(--space-md);
}

.upgrade-card[data-emotion="anger"]      { border-top-color: var(--color-anger-deep); }
.upgrade-card[data-emotion="anxiety"]    { border-top-color: var(--color-anxiety-deep); }
.upgrade-card[data-emotion="excitement"] { border-top-color: var(--color-excitement-deep); }
.upgrade-card[data-emotion="overwhelm"]  { border-top-color: var(--color-overwhelm-deep); }
.upgrade-card[data-emotion="sadness"]    { border-top-color: var(--color-sadness-deep); }
.upgrade-card[data-emotion="shame"]      { border-top-color: var(--color-shame-deep); }

.upgrade-card__name {
  font-size:     var(--text-h4);
  margin-bottom: var(--space-xs);
}

.upgrade-card__desc {
  font-size:     var(--text-small);
  color:         var(--color-text-muted);
  margin-bottom: var(--space-md);
  flex-grow:     1;   /* Pushes the price row to the card bottom so all rows align */
}

.upgrade-card__row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-sm);
}

.upgrade-card__price {
  font-size:   var(--text-h3);
  font-weight: var(--font-weight-bold);
}

/* Price + "One-time payment" stacked on the left side of the row.
   The note clarifies the $5 is a single charge, not a subscription.
   <small> already gets the muted color + small size from global.css. */
.upgrade-card__price-group {
  display:        flex;
  flex-direction: column;
}

.upgrade-card__price-note {
  line-height: 1.2;
  white-space: nowrap;   /* Keep "One-time payment" on a single line */
}

.upgrade-card__buy {
  padding:   12px 26px;
  font-size: var(--text-small);
}

.upgrade-card__buy--soon,
.upgrade-card__buy:disabled {
  background: var(--color-border);
  color:      var(--color-text-muted);
  cursor:     default;
}

.upgrade-card__buy--soon:hover,
.upgrade-card__buy:disabled:hover {
  background: var(--color-border);   /* Cancel the coral→blue hover for dead buttons */
  color:      var(--color-text-muted);
}

/* --- E-book banner card --- */

.upgrade-ebook {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             var(--space-md);
  flex-wrap:       wrap;
  background:      var(--color-coral-pastel);
  border:          1px solid var(--color-coral);
  border-radius:   var(--radius-lg);
  padding:         var(--space-md);
  margin-bottom:   var(--space-lg);
}

.upgrade-ebook__main {
  flex:      1;
  min-width: 260px;
}

.upgrade-ebook__name {
  font-size:     var(--text-h3);
  margin-bottom: var(--space-xs);
}

.upgrade-ebook .upgrade-card__desc {
  margin-bottom: 0;
  color:         var(--color-text);
}

/* --- Trust note under everything --- */

.upgrade__note {
  font-size:  var(--text-small);
  color:      var(--color-text-muted);
  text-align: center;
  max-width:  640px;
  margin:     0 auto;
}