@font-face { font-family: "Barlow Condensed"; src: url("/fonts/barlow-condensed-700-latin.woff2") format("woff2"); font-weight: 700; font-display: swap; }

/* Keep the Studio's gold finish while giving the offer and benefits room to breathe. */
:root {
  color-scheme: dark;
  --studio-black: oklch(14% 0.008 195);
  --studio-deep: oklch(18% 0.012 190);
  --paper: oklch(94% 0.012 95);
  --cyan: oklch(82% 0.16 205);
  --amber: oklch(79% 0.15 83);
  --page: var(--studio-deep);
  --surface: oklch(22% 0.013 190);
  --ink: var(--paper);
  --muted: oklch(73% 0.014 190);
  --line: oklch(36% 0.014 190);
  --line-soft: oklch(30% 0.013 190);
  --accent: var(--cyan);
  --accent-hover: oklch(88% 0.12 205);
  --accent-ink: var(--studio-black);
  --success: oklch(78% 0.15 150);
  --error: oklch(78% 0.14 24);
  --focus: var(--amber);
}

body {
  background-color: var(--page);
  background-image:
    repeating-radial-gradient(ellipse 110% 80% at 50% -22%, transparent 0 62px, oklch(22% 0.012 190) 64px 78px, transparent 80px 116px),
    linear-gradient(180deg, oklch(18% 0.012 190), oklch(13% 0.008 190));
}
.user-nav { border-bottom-color: var(--line-soft); background: var(--studio-black); }
.user-nav .brand img { border-radius: 6px; }
.account-footer { background: var(--studio-black); }

.pricing-main { display: block; min-height: auto; width: min(100%, 59rem); margin: 0 auto; padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: 4rem; }
.pricing-heading { margin-bottom: 2.5rem; text-align: center; }
.pricing-heading .state-kicker { color: var(--muted); font: 700 .8125rem/1.4 "Barlow Condensed", sans-serif; letter-spacing: .16em; }
.pricing-heading h1 { margin: .75rem auto 0; font: 400 clamp(1.75rem, 3.5vw, 2.625rem)/1.2 "Bowlby One SC", sans-serif; }
.pricing-heading h1 span { color: var(--amber); }

.plan-grid { display: grid; gap: 1.5rem; }
.plan { min-width: 0; }
.plan-top { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem; }
.plan h2 { font: 700 1.75rem/1.2 "Barlow Condensed", sans-serif; letter-spacing: .04em; text-transform: uppercase; }
.plan-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .625rem; font-variant-numeric: tabular-nums; }
.plan-price span { color: var(--muted); font: 500 .875rem/1.5 "DM Sans", sans-serif; letter-spacing: 0; }
.plan-footnote { color: var(--muted); font-size: .8125rem; line-height: 1.6; }

.plan-pro {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  grid-template-rows: 1fr auto;
  grid-template-areas: "summary benefits" "purchase benefits";
  border: 1px solid oklch(80% 0.14 84);
  border-radius: 14px;
  background-color: oklch(27% 0.055 78);
  background-image:
    radial-gradient(100% 110% at 15% 0%, oklch(79% 0.15 83 / .28), transparent 75%),
    repeating-linear-gradient(-45deg, transparent 0 9px, oklch(86% 0.1 82 / .055) 9px 10px);
  box-shadow: 0 5px 0 oklch(8% 0.008 190), 0 0 0 6px oklch(79% 0.15 83 / .07), 0 30px 95px -28px oklch(79% 0.15 83 / .55);
}
.plan-summary { grid-area: summary; padding: 2.25rem 2.25rem 1.5rem; }
.plan-pro h2 { color: var(--amber); }
.plan-caption { border: 1px solid oklch(79% 0.15 83 / .28); border-radius: 999px; padding: .25rem .625rem; color: oklch(90% 0.08 85); background: oklch(79% 0.15 83 / .09); font: 700 .75rem/1.4 "Barlow Condensed", sans-serif; letter-spacing: .08em; }
.plan-pro .plan-price { margin-top: 1.25rem; color: var(--paper); font: 700 3.5rem/1.1 "DM Sans", sans-serif; letter-spacing: -.04em; }
.plan-pro .plan-price span { color: oklch(86% 0.05 82); }
.plan-purchase { grid-area: purchase; padding: 0 2.25rem 2.25rem; }
.plan-pro .plan-action { display: flex; width: 100%; justify-content: center; gap: .75rem; min-height: 3.75rem; border: 1px solid oklch(92% 0.1 88); border-radius: 6px; padding: .875rem 1.125rem; color: oklch(36% 0.075 65); background: var(--amber); font-size: 1.375rem; font-weight: 700; line-height: 1.25; box-shadow: 0 3px 0 oklch(52% 0.12 68), 0 12px 28px -10px oklch(79% 0.15 83 / .55), inset 0 1px 0 oklch(97% 0.05 90 / .7); transition: background-color 160ms ease, transform 160ms ease; }
.plan-pro .plan-action span { min-width: 0; overflow-wrap: anywhere; }
.plan-action svg { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; }
.plan-pro .plan-action svg { width: 1.375rem; height: 1.375rem; }
.plan-purchase .plan-footnote { margin-top: 1rem; color: oklch(86% 0.05 82); }
.plan-pro .plan-action:disabled { opacity: .65; cursor: wait; }

.plan-benefits { grid-area: benefits; min-width: 0; border-left: 1px solid oklch(79% 0.15 83 / .22); padding: 2.25rem; }
.pro-benefit { display: flex; align-items: flex-start; gap: .875rem; }
.pro-benefit > svg { flex: 0 0 auto; width: 1.75rem; height: 1.75rem; margin-top: .125rem; color: var(--amber); }
.pro-benefit h3 { max-width: 17ch; font-size: 1.375rem; font-weight: 700; line-height: 1.35; }
.shared-benefits { margin-top: 1.5rem; border-top: 1px solid oklch(79% 0.15 83 / .22); padding-top: 1.5rem; }
.shared-benefits > h3 { margin-bottom: 1rem; color: oklch(84% 0.055 82); font-size: .8125rem; font-weight: 500; line-height: 1.5; }
.plan-features { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.plan-features li { display: flex; align-items: flex-start; gap: .875rem; min-width: 0; }
.plan-features svg { flex: 0 0 auto; width: 1.125rem; height: 1.125rem; margin-top: .1875rem; color: var(--amber); }
.plan-features span { font-size: .9375rem; font-weight: 500; }

.plan-free { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; padding: 1.25rem .25rem; }
.plan-free .plan-top { gap: .625rem; }
.plan-free h2 { font-size: 1.125rem; }
.plan-free .plan-price { font-size: 1.125rem; font-weight: 700; gap: .25rem; }
.plan-free .plan-price span { font-size: .8125rem; }
.free-allowance { flex: 1 1 17rem; font-size: .875rem; }
.free-allowance p { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: .125rem .375rem; max-width: 100%; border: 1px solid oklch(77% 0.1 50 / .25); border-radius: 5px; padding: .5rem .75rem; color: var(--muted); background: oklch(70% 0.1 50 / .08); }
.free-allowance .free-limit-label { color: oklch(83% 0.1 50); font-weight: 700; }
.free-allowance strong { color: oklch(83% 0.1 50); font-size: 1rem; font-weight: 700; }
.plan-free .plan-action { display: inline-flex; align-items: center; gap: .5rem; min-height: 2.75rem; color: var(--paper); font-size: .875rem; text-decoration: underline; text-decoration-color: var(--line); text-underline-offset: 4px; }
.pricing-feedback { margin-top: .5rem; }
.pricing-feedback:empty { display: none; }
.credits-section { scroll-margin-top: 28px; margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--line); }
.credits-section:focus { outline: none; }
.credits-heading { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.25rem; margin-bottom: 1.5rem; }
.credits-heading h2 { font-size: 1.5rem; line-height: 1.3; font-weight: 700; }
.credits-heading p { margin-top: .5rem; color: var(--muted); font-size: .875rem; }
.credits-free { flex: none; padding: .5rem .75rem; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--muted); font-size: .8125rem; }
.credits-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.credits-pack { min-width: 0; padding: 1.5rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.credits-pack h3 { font-size: 1.125rem; font-weight: 600; }
.credits-price { display: flex; align-items: baseline; gap: .5rem; margin: 1rem 0 1.5rem; font-variant-numeric: tabular-nums; }
.credits-price strong { font-size: 2.5rem; font-weight: 600; letter-spacing: 0; line-height: 1.2; }
.credits-price span { color: var(--muted); font-size: .8125rem; }
.credits-pack button { width: 100%; min-height: 44px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); color: var(--studio-black); font: 600 .875rem 'DM Sans', sans-serif; cursor: pointer; }
.credits-pack button:hover:not(:disabled) { opacity: .85; }
.credits-pack button:disabled { background: transparent; color: var(--muted); cursor: wait; }
.credits-section .pricing-message { margin-top: 1rem; color: var(--muted); font-size: .875rem; }
.credits-section .pricing-message:empty { display: none; }
.credits-section .pricing-message[data-state="error"] { color: var(--error); }
.credits-section .pricing-message[data-state="success"] { color: var(--success); }
.credits-return { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: .75rem; }
.credits-return button { padding: .5rem .75rem; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--paper); cursor: pointer; }
.credits-return a { color: var(--paper); font-size: .875rem; text-underline-offset: 4px; }

@media (hover: hover) {
  .plan-pro .plan-action:hover { background: oklch(84% 0.14 83); border-color: oklch(95% 0.075 88); transform: translateY(-1px); }
  .plan-free .plan-action:hover { color: var(--amber); text-decoration-color: currentColor; }
}

@media (max-width: 44rem) {
  .credits-heading { flex-direction: column; gap: 1rem; }
  .plan-pro { grid-template-columns: minmax(0, 1fr); grid-template-areas: "summary" "benefits" "purchase"; grid-template-rows: auto; }
  .plan-summary { padding: 1.75rem 1.75rem 1.5rem; }
  .plan-pro .plan-price { margin-top: 1rem; font-size: 3rem; }
  .plan-benefits { margin: 0 1.75rem; border-top: 1px solid oklch(79% 0.15 83 / .22); border-left: 0; padding: 1.5rem 0; }
  .pro-benefit h3 { max-width: none; font-size: 1.25rem; }
  .plan-purchase { padding: 0 1.75rem 1.75rem; }
  .plan-free { column-gap: 1.5rem; }
  .free-allowance { flex-basis: calc(100% - 13rem); }
}
@media (max-width: 600px) {
  .user-nav .brand-name { white-space: normal; }
}
@media (max-width: 25rem) {
  .credits-plans { grid-template-columns: 1fr; }
  .pricing-main { padding-inline: 1rem; }
  .pricing-heading { margin-bottom: 1.75rem; }
  .plan-summary { padding: 1.5rem 1.25rem 1.25rem; }
  .plan-benefits { margin-inline: 1.25rem; }
  .plan-purchase { padding: 0 1.25rem 1.5rem; }
  .plan-pro .plan-price { font-size: 2.75rem; }
  .plan-free { gap: .75rem 1rem; }
  .free-allowance { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .plan-pro .plan-action, .plan-pro .plan-action:hover { transition: none; transform: none; }
}