/* ==========================================================================
   THE GENESYS - plans and pricing (rebuilt)

   Pairs with templates/subscription-not-logged.php in THIS theme, which
   shadows the parent's file of the same name.

   Unlike assets/css/pricing.css - which restyles the parent template and has
   to prefix every rule with `body.gns-pricing` to out-specify ~980 lines of
   inline <style> - this is ordinary CSS against markup we own. Nothing here
   needs !important or a body-level prefix.

   pricing.css stays: genesys_redesign_is_pricing_screen() also matches the
   `subscription` page, which still renders the parent's templates/subscription.php.

   Built on the --gns-* tokens in tokens.css. Card language matches the landing
   page's pricing section so the two read as one system.
   ========================================================================== */

.gns-plans {
  background: var(--gns-bg);
  color: var(--gns-text);
  font-family: var(--gns-font);
  padding: 72px 24px 96px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* ------------------------------------------------------------------ head --- */
.gns-plans__head {
  max-width: 720px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.gns-plans__eyebrow {
  font: 500 10.5px var(--gns-font-mono);
  letter-spacing: .2em;
  color: var(--gns-secondary);
}
.gns-plans__title {
  margin: 0;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 1.08;
  letter-spacing: -.04em;
  font-weight: 500;
  color: var(--gns-text);
}
.gns-plans__intro {
  font-size: 15px;
  line-height: 1.65;
  color: var(--gns-secondary);
  text-wrap: pretty;
}
.gns-plans__intro p { margin: 0 0 10px; }
.gns-plans__intro p:last-child { margin-bottom: 0; }

/* ----------------------------------------------------------------- cycle --- */
.gns-plans__cycle {
  display: flex;
  gap: 5px;
  padding: 5px;
  margin: 40px 0 28px;
  border-radius: var(--gns-r-pill);
  background: rgba(255, 255, 255, .05);
  border: 1px solid var(--gns-border);
}
.gns-plans__cycle-opt { cursor: pointer; }
.gns-plans__cycle-opt input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.gns-plans__cycle-opt span {
  display: block;
  padding: 9px 22px;
  border-radius: var(--gns-r-pill);
  font-size: 13px;
  color: var(--gns-secondary-2);
}
.gns-plans__cycle-opt input:checked + span {
  background: var(--gns-text);
  color: var(--gns-bg);
  font-weight: 700;
}
/* The real input is off-screen, so focus has to be drawn on the label. */
.gns-plans__cycle-opt input:focus-visible + span {
  outline: 2px solid var(--gns-cyan);
  outline-offset: 2px;
}

/* ----------------------------------------------------------------- cards --- */
.gns-plans__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 18px;
  width: 100%;
  max-width: 1040px;
}
.gns-plans__card {
  position: relative;
  width: 320px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 28px 26px;
  border-radius: var(--gns-r-panel);
  background: var(--gns-card);
  border: 1px solid var(--gns-border);
}
.gns-plans__card.is-recommended {
  border-color: var(--gns-cyan);
  box-shadow: var(--gns-glow-card);
}
.gns-plans__badge {
  position: absolute;
  top: -11px;
  left: 26px;
  height: 22px;
  padding: 0 11px;
  border-radius: var(--gns-r-pill);
  background: var(--gns-gradient);
  color: var(--gns-on-accent);
  display: flex;
  align-items: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .06em;
}
.gns-plans__name {
  margin: 0;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--gns-text);
}
.gns-plans__subtitle {
  margin: 0;
  font: 500 10px var(--gns-font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gns-muted);
}
.gns-plans__price {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-top: 6px;
}
.gns-plans__amount {
  font-size: 38px;
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--gns-text);
}
/* WooCommerce wraps prices in <span class="woocommerce-Price-amount"><bdi>;
   inherit keeps them on the colour set above instead of a stray default. */
.gns-plans__amount span,
.gns-plans__amount bdi,
.gns-plans__was span,
.gns-plans__was bdi { color: inherit; }
.gns-plans__per {
  font-size: 13.5px;
  color: var(--gns-secondary);
}
.gns-plans__was {
  margin: -6px 0 0;
  font-size: 13px;
  color: var(--gns-muted);
}
.gns-plans__desc {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gns-secondary);
  text-wrap: pretty;
}

.gns-plans__feats {
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
  font-size: 12.5px;
  color: var(--gns-body);
}
.gns-plans__feats li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.gns-plans__feats li::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--gns-cyan);
}
.gns-plans__feats li:first-child { color: var(--gns-text); font-weight: 700; }
.gns-plans__feats li:first-child::before { background: var(--gns-gradient); }

.gns-plans__foot {
  margin-top: auto;
  padding-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.gns-plans__note {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--gns-muted);
}
.gns-plans__note a { color: var(--gns-cyan-ink); text-decoration: none; }
.gns-plans__note a:hover { text-decoration: underline; }

.gns-plans__cta {
  height: 46px;
  border-radius: var(--gns-r-pill);
  border: 1px solid var(--gns-border-heavy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13.5px;
  color: var(--gns-text);
  text-decoration: none;
  transition: border-color .15s ease, background-color .15s ease;
}
.gns-plans__cta:hover {
  border-color: var(--gns-cyan);
  background: var(--gns-cyan-tint);
  color: var(--gns-text);
}
.gns-plans__cta.is-primary {
  background: var(--gns-gradient);
  color: var(--gns-on-accent);
  border: 0;
}
.gns-plans__cta.is-primary:hover { color: var(--gns-bg); }

/* ---------------------------------------------------------------- prose --- */
.gns-plans__shipping {
  margin: 28px 0 0;
  font-size: 12.5px;
  color: var(--gns-secondary);
  text-align: center;
}
.gns-plans__shipping b { color: var(--gns-text); }

.gns-plans__empty {
  margin: 48px 0;
  padding: 28px 32px;
  border-radius: var(--gns-r-panel);
  border: 1px dashed var(--gns-border-heavy);
  color: var(--gns-secondary);
  font-size: 14px;
  text-align: center;
}
.gns-plans__empty p { margin: 0; }

.gns-plans__info {
  width: 100%;
  max-width: 720px;
  margin-top: 64px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.gns-plans__section-title {
  margin: 0;
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -.03em;
  color: var(--gns-text);
}
.gns-plans__prose {
  font-size: 14px;
  line-height: 1.7;
  color: var(--gns-body);
  text-wrap: pretty;
}
.gns-plans__prose p { margin: 0 0 12px; }
.gns-plans__prose p:last-child { margin-bottom: 0; }
.gns-plans__prose a { color: var(--gns-cyan-ink); }

.gns-plans__hermes {
  margin: 56px 0 0;
  max-width: 620px;
  text-align: center;
  font-size: 13px;
  line-height: 1.6;
  color: var(--gns-secondary);
}

/* ----------------------------------------------------------- responsive --- */
@media (max-width: 760px) {
  .gns-plans { padding: 48px 18px 72px; }
  .gns-plans__card { width: 100%; max-width: 360px; }
  .gns-plans__grid { gap: 22px; }
}