/* The membership price, wherever it is shown.
   Loaded by the homepage and by the signals page both, so one price in one
   config renders the same everywhere -- two copies of a number drift the
   first time one of them is edited. */

/* Two plans, side by side. A monthly price next to a yearly one is how
   somebody decides; behind a toggle it is a click in the way of a decision
   they had already made. */
.sg-plan__opt {
  display: grid; gap: 8px; justify-items: start;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-cards);
  background: var(--bg-card);
}
.sg-plan__opt.is-featured {
  border-color: var(--line-lift);
  background: linear-gradient(180deg, rgba(255,255,255,.035), var(--bg-card) 60%);
}
.sg-plan__opt-head { display: flex; align-items: center; gap: 10px; width: 100%; }
.sg-plan__opt-name {
  font-family: var(--mono); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--fg-3);
}
.sg-plan__tag {
  margin-inline-start: auto;
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 999px;
  color: var(--accent); border: 1px solid var(--accent-line);
}
/* The number a reader compares against a monthly plan, worked out for them
   rather than left as mental arithmetic mid-decision. */
.sg-plan__rate { margin: 0; font-size: 13px; color: var(--fg-dim); }
.sg-plan__opt .sg-plan__cta { margin-top: 4px; }
.sg-plan__opt .sg-plan__sub { font-size: 13px; }
@media (max-width: 720px) {
  .sg-plan__offer { border-inline-end: 0; border-bottom: 1px solid var(--line); }
}

.sg-plan__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sg-plan__price { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sg-plan__amt {
  font-size: clamp(30px, 3.4vw, 40px); font-weight: 510;
  letter-spacing: -.026em; line-height: 1;
  color: var(--fg); font-variant-numeric: tabular-nums;
}
.sg-plan__per { font-size: 15px; color: var(--fg-3); }
.sg-plan__sub { margin: 0; font-size: 15px; line-height: 1.6; color: var(--fg-3); max-width: 34ch; }
.sg-plan__cta { justify-self: start; }

/* On the homepage the plans sit in a row under the membership list. */
.plans {
  display: grid; gap: 14px; margin-top: clamp(26px, 3vw, 38px);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  max-width: 620px;
}
.plans .sg-plan__opt { background: rgba(0, 0, 0, .04); border-color: rgba(0, 0, 0, .12); }
.plans .sg-plan__opt.is-featured {
  background: linear-gradient(180deg, rgba(0,0,0,.06), rgba(0,0,0,.03) 60%);
  border-color: rgba(0, 0, 0, .22);
}
/* The membership section sits on the bone panel, where the room's own
   greys would vanish. */
.plans .sg-plan__opt-name, .plans .sg-plan__rate, .plans .sg-plan__sub { color: var(--color-ash); }
.plans .sg-plan__amt { color: var(--color-void); }
.plans .sg-plan__per { color: var(--color-ash); }
.plans .sg-plan__tag { color: var(--color-void); border-color: rgba(0,0,0,.3); }
/* .btn--ghost is light-on-dark, meant for the room's own black background --
   on the bone panel it goes near-invisible, so the non-featured plan's
   button gets bone-appropriate ink here instead of a new button variant. */
.plans .btn--ghost { color: var(--color-void); border-color: rgba(0,0,0,.28); }
.plans .btn--ghost:hover { color: var(--color-void); border-color: rgba(0,0,0,.42); background: rgba(0,0,0,.04); }