/* Growth Plans, UI Layouts / 21st.dev. Original TSX preserved in referencias/growth-plans. */
.join-page .growth-plans{background:#fff;color:#0a0a0a;padding:72px 0;font:400 16px/24px ui-sans-serif,system-ui,sans-serif}
.growth-plans .growth-container{max-width:1152px;margin:auto;padding:0 24px;text-align:center}
.site-unified .join-page .growth-plans h2{font:600 36px/40px ui-sans-serif,system-ui,sans-serif;letter-spacing:-.025em;margin:0 0 8px;text-wrap:balance}
.growth-plans .growth-intro{color:#525252;margin:0 0 24px;text-wrap:pretty}
.growth-plans .growth-profiles {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
  max-width: 960px;
  margin: 0 auto 32px;
  text-align: left;
}
.growth-plans .growth-profiles article {
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  padding: 20px;
  background: #fafafa;
}
.growth-plans .growth-profiles p {
  margin: 8px 0 0;
  color: #525252;
  font-size: 14px;
  line-height: 1.55;
}
.growth-plans .growth-profiles a {
  display: inline-block;
  margin-top: 12px;
  color: #0868cf;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}
@media (max-width: 767px) {
  .growth-plans .growth-profiles {
    grid-template-columns: 1fr;
    gap: 12px;
    max-width: 520px;
  }
}
.growth-plans .growth-billing{display:flex;justify-content:center;gap:4px;width:fit-content;margin:0 auto 12px;padding:4px;background:#f5f5f5;border:1px solid #e5e5e5;border-radius:8px;color:#525252;font-size:14px;line-height:20px}
.growth-plans .growth-billing label{position:relative;cursor:pointer}
.growth-plans .growth-billing input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.growth-plans .growth-billing span{display:grid;place-items:center;min-width:88px;min-height:44px;padding:4px 12px;border-radius:5px}
.growth-plans .growth-billing input:checked + span{background:#171717;color:#fff}
.growth-plans .growth-billing input:focus-visible + span{outline:2px solid #0868cf;outline-offset:2px}
.growth-plans .growth-billing-note{color:#525252;font-size:14px;line-height:20px;margin:0 auto 32px;max-width:54ch}
.growth-plans .growth-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;align-items:stretch;max-width:800px;margin:auto}
.growth-plans .growth-card{background:#f5f5f5;border:1px solid #e5e5e5;border-radius:8px;padding:32px;display:flex;flex-direction:column;text-align:left;min-width:0;transition:box-shadow .2s}
.growth-plans .growth-featured{background:#0868cf;color:#fff;border-color:transparent;transform:none;box-shadow:none;z-index:1}
.growth-plans .growth-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 8px;
  margin: 0 0 32px;
}
.growth-plans .growth-top p { grid-column: 1 / -1; }
.growth-plans .growth-savings {
  display: grid;
  justify-items: center;
  justify-self: end;
  padding: 5px 10px;
  border-radius: 999px;
  background: #e3effc;
  color: #10365c;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
}
.growth-plans .growth-savings strong {
  white-space: nowrap;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.site-unified .join-page .growth-plans h3{font:700 18px/28px ui-sans-serif,system-ui,sans-serif;letter-spacing:0;margin:0;color:inherit;text-wrap:initial}
.growth-plans .growth-top p{font-size:14px;line-height:20px;color:#737373;margin:0}
.growth-plans .growth-featured .growth-top p{color:#ffffff99}
.growth-plans .growth-pricing {
  flex: 1;
  margin-bottom: 24px;
}
.growth-plans .growth-price{display:flex;align-items:baseline;gap:4px;white-space:nowrap}
.growth-plans .growth-currency{font-size:24px;font-weight:500;color:#737373}
.growth-plans .growth-price strong{font-size:48px;line-height:1;font-weight:700;letter-spacing:-.025em;font-variant-numeric:lining-nums tabular-nums}
.growth-plans .growth-price [data-period]{font-size:14px;color:#737373}
.growth-plans .growth-featured :is(.growth-currency,[data-period]){color:#ffffff99}
.growth-plans .growth-cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:56px;margin-bottom:40px;border:1px solid #e5e5e5;border-radius:10px;padding:8px 16px;background:#fff;color:#0a0a0a;font-size:14px;line-height:20px;font-weight:500;text-decoration:none;box-shadow:0 1px 2px #0001;transition:box-shadow .2s,background .2s}
.growth-plans .growth-cta:hover{box-shadow:0 10px 15px -3px #0002}
.growth-plans .growth-featured .growth-cta{color:#fff;background:#ffffff1a;border-color:#fff3;padding:16px}
.growth-plans .growth-featured .growth-cta:hover{background:#fff3}
.growth-plans .growth-features{padding:32px 0 0;margin:0;list-style:none;border-top:1px solid #e5e5e5;display:flex;flex-direction:column;gap:16px;color:#737373;font-size:14px;line-height:20px}
.growth-plans .growth-featured .growth-features{border-color:#fff3;color:#fffc}
.growth-plans .growth-features li{display:flex;align-items:center;gap:12px;margin:0;padding:0}
.growth-plans .growth-features svg{height:16px;width:16px;flex-shrink:0}
.growth-plans .growth-payment{font-size:12px;line-height:20px;margin:24px 0 0;padding-top:16px;color:#737373}
.growth-plans .growth-featured .growth-payment{color:#ffffff99}
.join-page :is(.join-heroStat,.join-trajectoryGrid) strong{font-weight:700;letter-spacing:.005em;font-variant-numeric:lining-nums tabular-nums}
.join-page .join-heroStats{gap:40px;margin-top:56px}
@media(max-width:1023px){.growth-plans .growth-grid{grid-template-columns:1fr;gap:24px;max-width:520px}.growth-plans .growth-featured{transform:none}.growth-plans .growth-top{min-height:0}}
@media(max-width:639px){.join-page .growth-plans{padding:48px 0}.growth-plans .growth-container{padding:0 24px}.growth-plans .growth-card{padding:32px}.join-page .join-heroStats{gap:32px 24px;margin-top:40px}}
@media(max-width:359px){.growth-plans .growth-container{padding:0 16px}.growth-plans .growth-card{padding:24px}.growth-plans .growth-price strong{font-size:44px}}
@media(prefers-reduced-motion:reduce){.growth-plans *{transition:none!important;animation:none!important}}

/* Equal cards in both layouts; annual payment notes share the bottom baseline. */
.growth-plans .growth-card{height:100%}
.growth-plans .growth-grid{grid-auto-rows:1fr}
.growth-plans .growth-payment{margin-top:auto;padding-top:40px}

/* Review: source-sized two-card composition, five concise features per plan. */
.growth-plans .growth-grid{max-width:608px;gap:16px}
.growth-plans .growth-top{min-height:48px}
.growth-plans .growth-common-note{max-width:64ch;margin:24px auto 0;font-size:12px;line-height:20px;color:#737373}
.growth-plans .growth-common-note a{color:#0868cf;text-underline-offset:3px}
@media(max-width:1023px){.growth-plans .growth-grid{max-width:none}.growth-plans .growth-top{min-height:48px}}

/* Match reference preview width; retain equal plan dimensions. */
.growth-plans .growth-featured{background:#0a0a0a}
@media(max-width:1023px){.growth-plans .growth-grid{max-width:344px;margin-inline:auto}}

.growth-plans .growth-cta:disabled {
  cursor: not-allowed;
  opacity: .65;
  box-shadow: none;
}