/* ------------------------------------------------------------------
   pricing.css: the plan cards, one look everywhere.

   The cards are rendered by lib/pricing-display.js into any
   [data-rocode-pricing] mount: the landing page, the account page and the
   quota modal in chat. Each page used to style them with its own sheet, so
   the account page laid four cards out as three plus one and the chat modal
   shrank them. These rules are scoped to the mount and carry their own
   tokens (copied from landing.css), so the surrounding page's stylesheet
   cannot change them. Columns follow the mount's own width, not the window,
   so a card grid inside a modal behaves like the one on the landing page.
   ------------------------------------------------------------------ */

[data-rocode-pricing] {
  --pr-bg: #120b1f;
  --pr-card: #1a102c; --pr-card-top: #211538;
  --pr-surface: #241a3a; --pr-surface-hover: #2e2148; --pr-surface-down: #382a58;
  --pr-line: rgba(207,195,224,.14); --pr-line-ui: #6f6489; --pr-line-ui-hover: #9b8fb6;
  --pr-edge: rgba(207,195,224,.10);
  --pr-text: #f6f1ff; --pr-text-2: #cfc3e0; --pr-text-3: #b7abc8;
  --pr-violet: #a78bfa;
  --pr-fill: #8b5cf6; --pr-fill-hover: #a78bfa; --pr-fill-down: #7c3aed; --pr-on-fill: #f6f1ff;
  --pr-ok: #6BE08A;
  --pr-disabled-bg: #261c3d; --pr-disabled-text: #a89cbd;
  --pr-radius: 18px; --pr-radius-pill: 999px;
  --pr-shadow: 0 24px 60px -18px rgba(0,0,0,.78), 0 2px 8px rgba(0,0,0,.34);
  --pr-card-shadow: inset 0 1px 0 var(--pr-edge), var(--pr-shadow);
  --pr-dur: .16s; --pr-ease: cubic-bezier(.22,.61,.36,1);
  --pr-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Helvetica Neue", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  container-type: inline-size;
  display: flex; flex-direction: column; align-items: center; gap: 28px;
  width: 100%; min-height: 480px;
  font-family: var(--pr-font);
  color: var(--pr-text);
  text-align: left;
}

[data-rocode-pricing] h2.section-title { margin: 0; text-align: center; font-size: clamp(1.6rem, 2.4vw, 2.1rem); font-weight: 600; letter-spacing: -0.02em; color: var(--pr-text); }
[data-rocode-pricing] .section-subtitle { margin: -12px 0 0; max-width: 520px; text-align: center; font-size: 18px; line-height: 1.55; color: var(--pr-text-2); }

/* ---- monthly / annual toggle ---- */
[data-rocode-pricing] .billing-toggle-row { display: flex; justify-content: center; }
[data-rocode-pricing] .billing-toggle-row[hidden] { display: none; }
[data-rocode-pricing] .segmented-toggle { display: inline-flex; gap: 4px; padding: 4px; border-radius: var(--pr-radius-pill); background: var(--pr-surface); border: 1px solid var(--pr-line-ui); }
[data-rocode-pricing] .segmented-toggle-btn {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 6px 18px; margin: 0;
  border: 0; border-radius: var(--pr-radius-pill); background: transparent; color: var(--pr-text-2);
  font: inherit; font-size: 15px; font-weight: 500; cursor: pointer; box-shadow: none; text-transform: none; letter-spacing: 0;
  transition: background-color var(--pr-dur) var(--pr-ease), color var(--pr-dur) var(--pr-ease);
}
[data-rocode-pricing] .segmented-toggle-btn::before, [data-rocode-pricing] .segmented-toggle-btn::after { display: none; }
[data-rocode-pricing] .segmented-toggle-btn:hover { color: var(--pr-text); background: transparent; }
[data-rocode-pricing] .segmented-toggle-btn.is-active { background: var(--pr-surface-down); color: var(--pr-text); box-shadow: inset 0 0 0 1px var(--pr-violet); }
[data-rocode-pricing] .segmented-toggle-btn:focus-visible { outline: 2px solid var(--pr-violet); outline-offset: 3px; }
[data-rocode-pricing] .segmented-toggle-btn--with-badge { padding-right: 8px; }
[data-rocode-pricing] .annual-save-badge {
  display: inline-flex; align-items: center; min-height: 24px; padding: 2px 9px; border-radius: var(--pr-radius-pill);
  background: var(--pr-ok); color: #0E0E12; font-size: 13px; font-weight: 600; letter-spacing: 0; white-space: nowrap; text-transform: none;
}

/* ---- the grid: four across, two, then one, by the mount's width ---- */
[data-rocode-pricing] .pricing-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px;
  width: 100%; margin: 0; align-items: stretch; justify-items: stretch; padding-top: 12px;
}
@container (max-width: 980px) {
  [data-rocode-pricing] .pricing-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 560px) {
  [data-rocode-pricing] .pricing-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  [data-rocode-pricing] .pricing-grid > .pricing-card { padding: 28px 22px 24px; }
}

/* ---- a card ---- */
[data-rocode-pricing] .pricing-grid > .pricing-card {
  position: relative; display: flex; flex-direction: column; align-items: stretch;
  width: 100%; max-width: none; height: 100%; margin: 0; padding: 32px 28px 28px;
  background: linear-gradient(180deg, var(--pr-card-top) 0, var(--pr-card) 120px), var(--pr-card);
  border: 1px solid var(--pr-line); border-radius: var(--pr-radius); box-shadow: var(--pr-card-shadow);
  backdrop-filter: none; -webkit-backdrop-filter: none;
  text-align: left; transform: none; transition: none;
}
/* Hover changes light, never position: the border warms up and a soft violet
   glow settles under the card. */
[data-rocode-pricing] .pricing-grid > .pricing-card {
  transition: border-color .26s var(--pr-ease), box-shadow .26s var(--pr-ease), background-color .26s var(--pr-ease);
}
[data-rocode-pricing] .pricing-grid > .pricing-card:hover {
  transform: none;
  border-color: rgba(167, 139, 250, .42);
  box-shadow: inset 0 1px 0 var(--pr-edge), 0 0 0 1px rgba(167, 139, 250, .10), 0 28px 70px -22px rgba(139, 92, 246, .45), 0 2px 8px rgba(0, 0, 0, .34);
}
[data-rocode-pricing] .pricing-grid > .pricing-card.pro { border-color: var(--pr-violet); box-shadow: var(--pr-card-shadow); }
[data-rocode-pricing] .pricing-grid > .pricing-card.pro:hover {
  border-color: var(--pr-violet);
  box-shadow: inset 0 1px 0 var(--pr-edge), 0 0 0 1px rgba(167, 139, 250, .22), 0 28px 70px -20px rgba(139, 92, 246, .6), 0 2px 8px rgba(0, 0, 0, .34);
}
/* Flat pages zero every CSS transition (motion.css) so JS springs can own
   motion; these cards have no spring any more, so give them their fade back. */
html.oracle-spring-ui [data-rocode-pricing] .pricing-grid > .pricing-card {
  transition-duration: .26s !important;
  transition-delay: 0s !important;
}

[data-rocode-pricing] .popular-tag {
  position: absolute; top: -14px; left: 50%; transform: translateX(-50%); margin: 0;
  padding: 4px 12px; border-radius: var(--pr-radius-pill); background: var(--pr-fill); color: #fff;
  font-size: 13px; font-weight: 600; letter-spacing: .02em; text-transform: none; white-space: nowrap; box-shadow: none;
}

[data-rocode-pricing] .plan-header { width: 100%; margin: 0; padding: 0 0 20px; border-bottom: 1px solid var(--pr-line); text-align: left; }
[data-rocode-pricing] .pricing-card h3 { margin: 0; font-family: inherit; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--pr-text-2); }
[data-rocode-pricing] .price {
  display: flex; flex-wrap: nowrap; align-items: baseline; justify-content: flex-start; gap: 6px; margin: 10px 0 0;
  font-family: inherit; font-size: clamp(2rem, 2.6cqw, 2.75rem); font-weight: 600; letter-spacing: -0.02em; line-height: 1.1;
  white-space: nowrap; color: var(--pr-text); font-variant-numeric: tabular-nums;
}
[data-rocode-pricing] .price .period { font-size: 15px; font-weight: 500; letter-spacing: 0; color: var(--pr-text-2); }
[data-rocode-pricing] .plan-annual-subtext { margin: 6px 0 0; font-size: 13px; color: var(--pr-text-3); }
[data-rocode-pricing] .pricing-tax-note { margin: 18px 0 0; text-align: center; font-size: 13px; line-height: 1.5; color: var(--pr-text-3); }
[data-rocode-pricing] .plan-description { margin: 12px 0 0; font-size: 15px; line-height: 1.5; color: var(--pr-text-2); }

[data-rocode-pricing] .features-list {
  flex-grow: 1; display: grid; align-content: start; gap: 10px; width: 100%; margin: 0; padding: 20px 0 24px;
  list-style: none; text-align: left;
}
[data-rocode-pricing] .features-list li {
  display: flex; align-items: flex-start; justify-content: flex-start; gap: 10px; width: auto; max-width: none; margin: 0;
  font-size: 15px; line-height: 1.45; color: var(--pr-text);
}
[data-rocode-pricing] .check { flex: none; color: var(--pr-ok); font-weight: 600; line-height: 1.45; }
[data-rocode-pricing] .feature-text { font-weight: 400; }
[data-rocode-pricing] strong.feature-text { font-weight: 600; }

/* ---- the button, the landing page's .btn ---- */
[data-rocode-pricing] .pricing-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 48px; margin: auto 0 0; padding: 12px 20px;
  border: 1px solid transparent; border-radius: 12px;
  font: inherit; font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: 0; text-decoration: none; text-align: center; text-transform: none;
  cursor: pointer; box-shadow: none; transform: none;
  --rc-btn-tilt-deg: 0;
  transition: background-color .22s var(--pr-ease), color .22s var(--pr-ease), border-color .22s var(--pr-ease), box-shadow .22s var(--pr-ease), transform .16s var(--pr-ease);
}
[data-rocode-pricing] .pricing-cta::before, [data-rocode-pricing] .pricing-cta::after { display: none; }
[data-rocode-pricing] .pricing-cta .rc-btn-face { display: contents; }
/* Primary: a quiet top highlight, and on hover the fill brightens and a violet
   glow settles under it. Press dips the fill and sinks the highlight. */
/* !important throughout: style.css paints every <button> through a (0,8,1)
   selector (background transparent, box-shadow none) on the app pages, and
   motion.css nulls transition-property there. The landing page has neither. */
[data-rocode-pricing] .pricing-cta.btn-primary, [data-rocode-pricing] .pricing-cta.btn-primary:focus {
  background: linear-gradient(180deg, #9a72ff 0%, var(--pr-fill) 100%) !important; color: var(--pr-on-fill) !important; border-color: transparent !important; font-size: 17px; font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 1px 2px rgba(0, 0, 0, .28) !important;
}
[data-rocode-pricing] .pricing-cta.btn-primary:hover {
  background: linear-gradient(180deg, #ab8cff 0%, #9468f8 100%) !important; color: #fff !important; border-color: transparent !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 14px 34px -12px rgba(139, 92, 246, .8), 0 1px 2px rgba(0, 0, 0, .28) !important;
}
[data-rocode-pricing] .pricing-cta.btn-primary:active {
  background: var(--pr-fill-down) !important; box-shadow: inset 0 2px 6px rgba(0, 0, 0, .3) !important; transform: scale(.985) !important;
}
/* Secondary: neutral at rest, violet-tinted on hover. */
[data-rocode-pricing] .pricing-cta.btn-secondary, [data-rocode-pricing] .pricing-cta.btn-secondary:focus { background: var(--pr-surface) !important; color: var(--pr-text) !important; border-color: var(--pr-line-ui) !important; box-shadow: none !important; font-weight: 500; }
[data-rocode-pricing] .pricing-cta.btn-secondary:hover {
  background: rgba(139, 92, 246, .12) !important; border-color: rgba(167, 139, 250, .6) !important; color: #fff !important;
  box-shadow: 0 0 0 1px rgba(167, 139, 250, .12), 0 12px 28px -14px rgba(139, 92, 246, .55) !important;
}
[data-rocode-pricing] .pricing-cta.btn-secondary:active { background: var(--pr-surface-down) !important; box-shadow: none !important; transform: scale(.985) !important; }
[data-rocode-pricing] .pricing-cta.rc-btn-tilting, [data-rocode-pricing] .pricing-cta:hover { transform: none !important; }
[data-rocode-pricing] .pricing-cta.btn-primary:active, [data-rocode-pricing] .pricing-cta.btn-secondary:active { transform: scale(.985) !important; }
/* Flat pages null CSS transitions for their JS springs; these buttons have none. */
/* animations.css declares a (0,8,1) !important transition on every <button>;
   the page ids outrank it. */
#account-page [data-rocode-pricing] .pricing-cta,
#chat-page [data-rocode-pricing] .pricing-cta,
html.oracle-spring-ui [data-rocode-pricing] .pricing-cta {
  transition-property: background-color, background-image, color, border-color, box-shadow, transform !important;
  transition-duration: .22s !important;
  transition-timing-function: var(--pr-ease) !important;
  transition-delay: 0s !important;
}
[data-rocode-pricing] .pricing-cta:focus-visible { outline: 2px solid var(--pr-violet); outline-offset: 3px; }
[data-rocode-pricing] .pricing-cta[aria-disabled="true"], [data-rocode-pricing] .pricing-cta:disabled,
[data-rocode-pricing] .pricing-cta[aria-disabled="true"]:hover, [data-rocode-pricing] .pricing-cta:disabled:hover {
  background: var(--pr-disabled-bg) !important; color: var(--pr-disabled-text) !important; border-color: transparent !important; box-shadow: none !important; cursor: default; pointer-events: none; opacity: 1;
}

/* Header, features and button share rows across the four cards, so the
   "billed annually" line on paid cards cannot push their buttons out of line
   with Starter's. Flex above is the fallback for engines without subgrid. */
@supports (grid-template-rows: subgrid) {
  [data-rocode-pricing] .pricing-grid > .pricing-card { display: grid; grid-template-rows: subgrid; grid-row: span 3; height: auto; }
  [data-rocode-pricing] .pricing-cta { align-self: end; margin-top: 0; }
}

/* ---- the quota modal in chat: chat-landing.css styles these cards with an id
   selector, so the same rules are restated here with one to win. The mount is
   about 1000px wide, which keeps four across (the container rule above). ---- */
#chat-page .limit-modal-pricing-section [data-rocode-pricing] { min-height: 0; gap: 20px; }
#chat-page .limit-modal-pricing-section [data-rocode-pricing] .pricing-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; padding-top: 16px; }
#chat-page .limit-modal-pricing-section [data-rocode-pricing] .pricing-grid > .pricing-card {
  padding: 28px 22px 24px;
  background: linear-gradient(180deg, var(--pr-card-top) 0, var(--pr-card) 120px), var(--pr-card);
  border: 1px solid var(--pr-line); border-radius: var(--pr-radius); box-shadow: var(--pr-card-shadow);
}
#chat-page .limit-modal-pricing-section [data-rocode-pricing] .pricing-grid > .pricing-card.pro { border-color: var(--pr-violet); }
#chat-page .limit-modal-pricing-section [data-rocode-pricing] .popular-tag { font-size: 13px; letter-spacing: .02em; }
#chat-page .limit-modal-pricing-section [data-rocode-pricing] .plan-header { margin: 0; padding: 0 0 20px; }
#chat-page .limit-modal-pricing-section [data-rocode-pricing] .pricing-card h3 { margin: 0; font-size: 18px; }
#chat-page .limit-modal-pricing-section [data-rocode-pricing] .price { font-size: clamp(1.8rem, 2.4cqw, 2.4rem); font-weight: 600; letter-spacing: -0.02em; }
#chat-page .limit-modal-pricing-section [data-rocode-pricing] .price .period { font-size: 15px; }
#chat-page .limit-modal-pricing-section [data-rocode-pricing] .plan-annual-subtext { font-size: 13px; }
#chat-page .limit-modal-pricing-section [data-rocode-pricing] .features-list li { font-size: 14.5px; }
#chat-page [data-rocode-pricing] .pricing-cta.btn-primary, #chat-page [data-rocode-pricing] .pricing-cta.btn-primary:focus { background: linear-gradient(180deg, #9a72ff 0%, var(--pr-fill) 100%); color: var(--pr-on-fill); border-color: transparent; }
#chat-page [data-rocode-pricing] .pricing-cta.btn-primary:hover { background: linear-gradient(180deg, #ab8cff 0%, #9468f8 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .24), 0 14px 34px -12px rgba(139, 92, 246, .8), 0 1px 2px rgba(0, 0, 0, .28); }
#chat-page [data-rocode-pricing] .pricing-cta.btn-secondary, #chat-page [data-rocode-pricing] .pricing-cta.btn-secondary:focus { background: var(--pr-surface); color: var(--pr-text); border-color: var(--pr-line-ui); }
#chat-page [data-rocode-pricing] .pricing-cta.btn-secondary:hover { background: rgba(139, 92, 246, .12); border-color: rgba(167, 139, 250, .6); color: #fff; }
#chat-page [data-rocode-pricing] .pricing-cta[aria-disabled="true"], #chat-page [data-rocode-pricing] .pricing-cta:disabled { background: var(--pr-disabled-bg); color: var(--pr-disabled-text); border-color: transparent; }

/* ---- reveal + price switch: opacity only ---- */
@keyframes pr-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes pr-flip { from { opacity: .3; } to { opacity: 1; } }

[data-rocode-pricing][data-pr-reveal="pending"] .billing-toggle-row,
[data-rocode-pricing][data-pr-reveal="pending"] .pricing-card,
[data-rocode-pricing][data-pr-reveal="pending"] .pricing-tax-note { opacity: 0; }

[data-rocode-pricing][data-pr-reveal="in"] .billing-toggle-row { animation: pr-fade-in .55s ease-out both; }
[data-rocode-pricing][data-pr-reveal="in"] .pricing-card { animation: pr-fade-in .75s cubic-bezier(.22, .61, .36, 1) both; }
[data-rocode-pricing][data-pr-reveal="in"] .pricing-card:nth-child(2) { animation-delay: .09s; }
[data-rocode-pricing][data-pr-reveal="in"] .pricing-card:nth-child(3) { animation-delay: .18s; }
[data-rocode-pricing][data-pr-reveal="in"] .pricing-card:nth-child(4) { animation-delay: .27s; }
[data-rocode-pricing][data-pr-reveal="in"] .pricing-tax-note { animation: pr-fade-in .6s ease-out .36s both; }

[data-rocode-pricing] .price .pr-flip { animation: pr-flip .32s ease-out; }

@media (prefers-reduced-motion: reduce) {
  [data-rocode-pricing][data-pr-reveal="pending"] .billing-toggle-row,
  [data-rocode-pricing][data-pr-reveal="pending"] .pricing-card,
  [data-rocode-pricing][data-pr-reveal="pending"] .pricing-tax-note { opacity: 1; }
  [data-rocode-pricing] .billing-toggle-row,
  [data-rocode-pricing] .pricing-card,
  [data-rocode-pricing] .pricing-tax-note,
  [data-rocode-pricing] .price .pr-flip { animation: none !important; }
  [data-rocode-pricing] .pricing-grid > .pricing-card { transition: none; }
}