/* ============================================================
   RAD SYNC AGENCY — /level-up page-only styles
   Loaded AFTER styles.css and launch.css. Reuses the .pkg pricing
   card from launch.css; only adds what level-up needs:
   a 4-up pricing grid, a /mo price suffix, and the risk-reversal band.
   styles.css and launch.css stay untouched.
   ============================================================ */

/* Four-up pricing grid (reuses .pkg cards from launch.css).
   Double-class selector so it cleanly overrides launch.css's 3-up
   .pkgs rules regardless of source order. 4-up → 2-up → 1-up. */
.pkgs.pkgs--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; }
@media (max-width: 1080px) { .pkgs.pkgs--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 700px; margin-inline: auto; } }
@media (max-width: 600px)  { .pkgs.pkgs--4 { grid-template-columns: minmax(0, 1fr); max-width: 420px; margin-inline: auto; } }

/* Tighter padding for four-up; CTA wraps so a nowrap button can never
   force the narrow columns to overflow. */
.pkgs--4 .pkg { padding: clamp(22px, 2vw, 30px); }
.pkgs--4 .pkg__cta .btn { white-space: normal; font-size: 0.86rem; padding: 0.85em 0.9em; line-height: 1.2; }
/* keep the price (incl. "/mo") on one line + reserve name height so every
   tier's price block aligns and the dividers/features sit on the same line */
.pkgs--4 .pkg__amount { font-size: clamp(2.05rem, 3vw, 2.85rem); }
.pkgs--4 .pkg__name { min-height: 1.85em; }

/* Monthly price suffix (Growth Retainer) */
.pkg__per { font-family: var(--ff-body); font-size: 0.95rem; font-weight: 500; color: var(--text-2); align-self: flex-end; margin-bottom: 0.45em; }

/* ============================================================
   RISK REVERSAL — confident reassurance band
   ============================================================ */
.riskband {
  position: relative;
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
  padding: clamp(34px, 4.5vw, 60px);
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--card-bg) padding-box, linear-gradient(168deg, var(--signal), oklch(0.5 0.2 27 / 0.18) 60%) border-box;
  box-shadow: var(--card-shadow-2), 0 0 54px var(--signal-tint), var(--card-inset);
  overflow: hidden;
}
.riskband::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(80% 120% at 50% -10%, var(--signal-tint), transparent 60%);
  pointer-events: none;
}
.riskband__ic {
  position: relative; z-index: 1;
  width: 56px; height: 56px; margin: 0 auto 20px;
  display: grid; place-items: center;
  border-radius: 14px;
  color: var(--signal);
  background: var(--signal-tint);
  border: 1px solid var(--signal-tint-2);
}
.riskband__ic svg { width: 28px; height: 28px; }
.riskband__h {
  position: relative; z-index: 1;
  font-family: var(--ff-display);
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  line-height: 0.95; letter-spacing: 0.012em; text-transform: uppercase;
  color: var(--text);
}
.riskband__h .r { color: var(--signal); }
.riskband p {
  position: relative; z-index: 1;
  margin: 0.9em auto 0;
  max-width: 62ch;
  color: var(--text-2);
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.6;
}