/* ============================================================
   Founders Circle panel on /upgrade. PAGE CHROME only - the plate
   the offer sits on, and nothing that describes the cosmetic itself.

   The badge inside it (.founder-badge / -word / -num) is NOT redefined
   here: it belongs to the style pack wwwroot/styles/founder/style.css,
   which is served to every page through styles/chronos-styles.css. The
   panel and a member's profile therefore wear the same badge, and a
   restyle of the pack moves both. Keep it that way - a second copy here
   would drift the moment the pack is retouched.

   Loaded after 25-store.css so it can lean on .plan-cost / .plan-need /
   .plan-pay from the upgrade card without fighting them.

   v0.9.5.0: this file used to carry the whole /upgrade board as well
   (.upgrade-page-card, .upgrade-tiers, .tier-card*, .tier-ribbon,
   .tier-perks, .tier-current-chip, .tier-price*, .upgrade-stack,
   .topup-year-badge). That board was rebuilt without capsules and now
   lives in 33-upgrade-plans.css, which loads right after this file. Only
   the Founders panel is left here, which is what the file always claimed
   to be. The panel no longer sits inside a card: it is a direct child of
   .upgrade-shell, so the shell's own gap owns the spacing around it.
   ============================================================ */
.founders-offer {
  margin: 0;
  padding: 16px 18px;
  border-radius: 14px;
  /* Machined titanium, the same cold non-colour the pack trades on: this is the
     one product on the page that does not compete on saturation. */
  background: linear-gradient(150deg, #1a1d23 0%, #0e1013 100%);
  border: 1px solid rgba(206, 212, 221, 0.32);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 6px 18px rgba(0, 0, 0, 0.28);
  text-align: center;
}
.founders-offer-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.founders-offer-title {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #eef1f6;
}
/* The panel paints its own dark plate, so the page's .muted grey would sink into
   it - these restate the tone against this background only. .plan-short is the
   new board's muted one-liner; .plan-cost / .plan-need are the old names, kept
   so the panel is styled whichever the markup uses. */
.founders-offer .founders-offer-perk.muted,
.founders-offer .founders-offer-left.muted,
.founders-offer .plan-short,
.founders-offer .plan-cost.muted,
.founders-offer .plan-need.muted {
  color: #a8b0bc;
}
.founders-offer-perk {
  margin: 0 auto 10px;
  max-width: 46ch;
  font-size: 0.86rem;
  line-height: 1.45;
}
.founders-offer-left {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
/* A member has nothing to buy - the seat number replaces the price and the button. */
.founders-offer-owned {
  font-family: "SF Mono", "Cascadia Mono", ui-monospace, monospace;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #f4f7fb;
}
/* Shorthand, not margin-top: the UA sheet's `form { margin-block-end: 1em }`
   survives a margin-top-only rule and leaves 16px of dead space under the band. */
.founders-offer form {
  margin: 10px 0 0;
}

/* No capsules on this page (see 33-upgrade-plans.css). The join button inherits
   .btn-primary from 08-auth.css, which is a pill, so square it back off here and
   give it the same 44px target as every other control on the board. The panel is
   the only place on /upgrade where an 08-auth button survives. The radius reads
   33's token so a change to the page's control shape moves this button too; the
   literal is the fallback for any surface that does not declare the token. */
.founders-offer .btn-primary,
.founders-offer .plan-pay,
.founders-offer .plan-btn {
  min-height: 44px;
  border-radius: var(--u-radius-sm, 10px);
}

/* The panel paints its own near-black plate in BOTH themes, so the violet focus
   ring lands on #1a1d23 whatever the page theme is - 2.96:1, under the 3:1 that
   SC 1.4.11 wants for a non-text indicator, and violet-on-violet-on-black on the
   primary. This is the one control on the page whose ring cannot be fixed by a
   theme rule, because its background does not follow the theme. */
.founders-offer .btn-primary:focus-visible,
.founders-offer .plan-pay:focus-visible,
.founders-offer .plan-btn:focus-visible {
  outline-color: #c4a3fb;
}

/* The panel is a band inside a shell that reaches 2500px on an 8K monitor. Its
   own copy is already capped at 46ch; the button must not stretch to match the
   plate, or a single "Join" grows into a runway.

   margin-inline is what actually centres it. The panel uses text-align: center,
   which only centres INLINE boxes - and since v0.9.5 the button is .plan-btn,
   which is display: flex. A narrower block box does not centre, it hugs the left
   edge, which is exactly how this rendered until the auto margins were added. */
.founders-offer form .btn-primary,
.founders-offer form .plan-pay,
.founders-offer form .plan-btn {
  width: min(320px, 100%);
  margin-inline: auto;
}