/* Photo-capacity plans: shared by public pricing and the signed-in studio. */
.subscription-workspace main { padding: var(--space-9); }
.studio-app .subscription-hero { display: grid; grid-template-columns: 1fr minmax(260px, .42fr); align-items: end; gap: var(--space-9); padding: var(--space-2) 0 var(--space-9); }
.studio-app .subscription-hero .event-back { margin: var(--space-7); }
.studio-app .subscription-hero h1 { margin: 0; color: #30263d; font-size: clamp(43px, 5.2vw, 68px); letter-spacing: -2px; line-height: 1.04; }
.studio-app .subscription-hero h1 em { font-style: normal; background: linear-gradient(90deg, #6a3eac, #bd5ac7, #d59276); -webkit-background-clip: text; background-clip: text; color: transparent; }
.studio-app .subscription-hero > div > p:last-child { max-width: 635px; margin: var(--space-5) 0 0; color: #786e81; font-size: 14px; line-height: 1.65; }
.studio-app .subscription-mode { display: flex; align-items: flex-start; gap: var(--space-3); border: 1px solid #e3d9eb; border-radius: var(--space-4); padding: var(--space-5); background: #fff; box-shadow: 0 10px 24px #3920540a; }
.studio-app .subscription-mode .service-dot { margin: var(--space-1); }
.studio-app .subscription-mode div { display: grid; gap: var(--space-2); }
.studio-app .subscription-mode b { color: #4a3d56; font-size: 12px; }
.studio-app .subscription-mode small { color: #867b90; font-size: 10px; line-height: 1.5; }
.studio-app .subscription-mode.is-test { border-color: #d7e6da; background: #fbfffc; }

.studio-app .subscription-usage { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-8); align-items: center; margin: var(--space-8); border: 1px solid #e2d9ea; border-radius: var(--space-5); padding: var(--space-7) var(--space-7); background: linear-gradient(120deg, #f1e8f9, #fff 66%); box-shadow: 0 12px 27px #3920540a; }
.studio-app .subscription-usage .eyebrow { margin: var(--space-3); }
.studio-app .subscription-usage h2 { margin: 0; color: #3a2f45; font-size: 28px; letter-spacing:-.75px; }
.studio-app .subscription-usage h2 span { margin: var(--space-2); color: #876b9f; font-size: 13px; font-weight:700; letter-spacing: 0; text-transform: uppercase; }
.studio-app .subscription-usage-copy > p:last-child { max-width: 600px; margin: var(--space-3) 0 0; color: #776c80; font-size: 12px; line-height: 1.62; }
.studio-app .subscription-meter { display: grid; gap: var(--space-3); }
.studio-app .subscription-meter-label { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); color: #675a74; font-size: 11px; }
.studio-app .subscription-meter-label b { color: #7045a5; font-size: 11px; }
.studio-app .subscription-meter-track { height: 10px; overflow: hidden; border-radius: var(--space-12); background: #e7ddec; }
.studio-app .subscription-meter-track i { display: block; height: 100%; min-width: 0; border-radius: inherit; background: linear-gradient(90deg, #7044aa, #bd62bd); transition: width 260ms ease; }
.studio-app .subscription-meter small { color: #82768b; font-size: 10px; line-height: 1.45; }
.studio-app .subscription-notice { margin: -var(--space-5) 0 var(--space-7); border: 1px solid #ece0bd; border-radius: var(--space-3); padding: var(--space-3) var(--space-4); background: #fffdf5; color: #7c6a42; font-size: 11px; line-height: 1.5; }

.studio-app .subscription-plan-section { padding: 0 0 var(--space-9); }
.studio-app .subscription-section-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-7); margin: var(--space-5); }
.studio-app .subscription-section-heading .eyebrow { margin: var(--space-3); }
.studio-app .subscription-section-heading h2 { margin: 0; color: #3a2f45; font-size: 29px; letter-spacing:-.75px; }
.studio-app .subscription-section-heading > p { max-width: 245px; margin: 0 0 var(--space-1); color: #827789; font-size: 11px; line-height: 1.55; text-align: right; }
.studio-app .subscription-plan-grid { display: grid; gap: var(--space-4); }
.studio-app .subscription-plan-grid--annual { grid-template-columns: repeat(5, 1fr); }
.studio-app .subscription-plan-grid--quarterly { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 480px; }
.studio-app .subscription-plan { position: relative; display: flex; min-width: 0; flex-direction: column; border: 1px solid #e5ddea; border-radius: var(--space-4); padding: var(--space-5); background: #fff; box-shadow: 0 10px 22px #39205408; }
.studio-app .subscription-plan.is-featured { border-color: #8d5db5; box-shadow: 0 14px 29px #7045a51c; }
.studio-app .subscription-plan-tag { position: absolute; top: -10px; right: 15px; border-radius: var(--space-12); padding: var(--space-2) var(--space-2); background: #7448a9; color: #fff; font-size: 8px; font-weight:800; letter-spacing: .3px; }
.studio-app .subscription-plan > p { margin: 0; color: #86649c; font-size: 9px; font-weight:800; letter-spacing: 1px; text-transform: uppercase; }
.studio-app .subscription-plan h3 { margin: var(--space-3) 0 var(--space-2); color: #40334c; font-size: 20px; letter-spacing:-.5px; }
.studio-app .subscription-plan > b { color: #30263d; font-size: 25px; letter-spacing: -.9px; }
.studio-app .subscription-plan > small { margin: var(--space-1); color: #918596; font-size: 10px; }
.studio-app .subscription-plan ul { display: grid; gap: var(--space-2); min-height: 108px; margin: var(--space-5) 0 var(--space-5); padding: 0; color: #756a7f; font-size: 10px; line-height: 1.4; list-style: none; }
.studio-app .subscription-plan li::before { margin: var(--space-2); color: #6aaf80; content: "✓"; font-weight:800; }
.studio-app .subscription-plan form { margin: auto; }
.studio-app .subscription-plan button { display: inline-flex; width: 100%; min-height: 40px; align-items: center; justify-content: space-between; border: 0; border-radius: var(--space-3); padding: 0 var(--space-3) 0 var(--space-4); background: #7448a9; color: #fff; cursor: pointer; font: inherit; font-size: 10px; font-weight:800; }
.studio-app .subscription-plan button span { display: grid; width: 18px; height: 18px; place-items: center; border: 1px solid #cbb1e2; border-radius: 50%; }
.studio-app .subscription-plan button:disabled { background: #ddd5e3; color: #8e8396; cursor: not-allowed; }
.studio-app .subscription-plan button:disabled span { border-color: #beb4c6; }

.studio-app .subscription-history { display: grid; grid-template-columns: .75fr 1.25fr; gap: var(--space-9); border-top: 1px solid #e5ddea; padding: var(--space-8); }
.studio-app .subscription-history .eyebrow { margin: var(--space-3); }
.studio-app .subscription-history h2 { margin: 0; color: #3a2f45; font-size: 29px; letter-spacing:-.75px; }
.studio-app .subscription-history > div:first-child > p:last-child { max-width: 360px; margin: var(--space-3) 0 0; color: #817689; font-size: 11px; line-height: 1.6; }
.studio-app .subscription-history-table { overflow: hidden; border: 1px solid #e5ddea; border-radius: var(--space-4); background: #fff; }
.studio-app .subscription-history-row { display: grid; grid-template-columns: 1fr 1.5fr 1fr .75fr; gap: var(--space-3); align-items: center; min-height: 47px; padding: 0 var(--space-4); border-top: 1px solid #eee8f1; color: #655a70; font-size: 10px; }
.studio-app .subscription-history-head { min-height: 38px; border: 0; background: #faf8fc; color: #93889a; font-size: 9px; font-weight:800; letter-spacing:.4px; text-transform: uppercase; }
.studio-app .subscription-history-row span:last-child { text-align: right; }
.studio-app .subscription-history-row .status-paid { color: #4d9565; font-weight:800; }
.studio-app .subscription-history-row .status-created { color: #79628e; font-weight:800; }
.studio-app .subscription-history-row .status-failed { color: #ad5d67; font-weight:800; }
.studio-app .subscription-history-empty { margin: 0; padding: var(--space-7) var(--space-4); color: #918697; font-size: 11px; }

.studio-app .checkout-stage { display: grid; min-height: 600px; place-items: center; }
.studio-app .checkout-card { width: min(470px, 100%); border: 1px solid #e3d9eb; border-radius: var(--space-5); padding: var(--space-8); background: #fff; box-shadow: 0 20px 45px #3a20540e; }
.studio-app .checkout-icon { display: grid; width: 42px; height: 42px; place-items: center; margin: var(--space-5); border-radius: var(--space-3); background: #eee4f8; color: #7448a9; font-size: 19px; font-weight:800; }
.studio-app .checkout-card .eyebrow { margin: var(--space-3); }
.studio-app .checkout-card h1 { margin: 0; color: #382d44; font-size: 31px; letter-spacing:-.75px; }
.studio-app .checkout-card > p { margin: var(--space-3) 0 0; color: #7c7186; font-size: 12px; line-height: 1.6; }
.studio-app .checkout-card dl { display: grid; gap: 0; margin: var(--space-6) 0; border: 1px solid #e8e0ee; border-radius: var(--space-3); overflow: hidden; }
.studio-app .checkout-card dl div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-3) var(--space-4); border-top: 1px solid #eee8f2; }
.studio-app .checkout-card dl div:first-child { border-top: 0; }
.studio-app .checkout-card dt { color: #8c8193; font-size: 10px; }
.studio-app .checkout-card dd { margin: 0; color: #51445e; font-size: 10px; font-weight:700; text-align: right; }

.pricing-site { min-height: 100vh; background: linear-gradient(180deg, #fbfaff, #f4eff9 64%, #fbfafd); color: #30263d; }
.pricing-main { width: min(var(--container), calc(100vw - var(--gutter) * 2)); margin: 0 auto; padding: var(--space-12) 0 var(--space-11); }
.pricing-site .ls-nav { width: min(var(--container), calc(100vw - var(--gutter) * 2)); }
.pricing-hero { max-width: 760px; padding: var(--space-6) 0 var(--space-11); }
.pricing-hero .ls-kicker { margin: var(--space-5); }
.pricing-hero h1 { margin: 0; color: #30263d; font-size: clamp(48px, 6vw, 78px); letter-spacing: -2.55px; line-height: 1.01; }
.pricing-hero h1 em { font-style: normal; background: linear-gradient(90deg, #6a3eac, #bd5ac7, #d59276); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pricing-hero > p { max-width: 630px; margin: var(--space-6) 0 var(--space-7); color: #746a7d; font-size: 16px; line-height: 1.7; }
.public-plan-section { padding: 0 0 var(--space-10); }
.public-plan-heading { display: flex; align-items: end; justify-content: space-between; gap: var(--space-7); margin: var(--space-5); }
.public-plan-heading .ls-kicker { margin: var(--space-3); }
.public-plan-heading h2 { margin: 0; color: #3a2f45; font-size: 33px; letter-spacing: -1px; }
.public-plan-heading > p { max-width: 250px; margin: 0 0 var(--space-1); color: #817689; font-size: 12px; line-height: 1.55; text-align: right; }
.public-plan-grid { display: grid; gap: var(--space-4); }
.public-plan-grid--annual { grid-template-columns: repeat(5, 1fr); }
.public-plan-grid--quarterly { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 480px; }
.public-plan { position: relative; display: flex; flex-direction: column; min-width: 0; border: 1px solid #e5ddea; border-radius: var(--space-4); padding: var(--space-6); background: #fff; box-shadow: 0 11px 25px #39205409; }
.public-plan.is-featured { border-color: #8d5db5; box-shadow: 0 15px 31px #7045a51c; }
.public-plan > span { position: absolute; top: -10px; right: 14px; border-radius: var(--space-12); padding: var(--space-2) var(--space-3); background: #7448a9; color: #fff; font-size: 8px; font-weight:800; }
.public-plan > p { margin: 0; color: #86649c; font-size: 9px; font-weight:800; letter-spacing: 1px; text-transform: uppercase; }
.public-plan h3 { margin: var(--space-3) 0 var(--space-2); color: #40334c; font-size: 21px; letter-spacing:-.5px; }
.public-plan > b { color: #30263d; font-size: 27px; letter-spacing: -1px; }
.public-plan > small { margin: var(--space-1); color: #918596; font-size: 10px; }
.public-plan ul { display: grid; gap: var(--space-2); min-height: 100px; margin: var(--space-5) 0; padding: 0; color: #756a7f; font-size: 10px; line-height: 1.4; list-style: none; }
.public-plan li::before { margin: var(--space-2); color: #6aaf80; content: "✓"; font-weight:800; }
.public-plan a { margin: auto; color: #7045a4; font-size: 11px; font-weight:800; text-decoration: none; }
.pricing-note { display: flex; align-items: center; gap: var(--space-3); max-width: 700px; margin: var(--space-2) auto 0; border: 1px solid #e4dcea; border-radius: var(--space-4); padding: var(--space-4) var(--space-4); background: #fffdfd; color: #776c80; font-size: 11px; line-height: 1.55; }
.pricing-note span { display: grid; width: 22px; height: 22px; flex: 0 0 22px; place-items: center; border-radius: 50%; background: #e8f5ec; color: #4e9165; font-size: 11px; font-weight:800; }
.pricing-note p { margin: 0; }
.pricing-footer { width: min(var(--container), calc(100vw - var(--gutter) * 2)); margin: 0 auto; border-top: 1px solid #e6dfeb; padding: var(--space-7) 0 var(--space-8); color: #968c9f; font: 11px/1.6 Inter, ui-sans-serif, system-ui, sans-serif; text-align: center; }
.pricing-footer a { color: #7650a9; text-decoration: none; }

@media (max-width: 1080px) {
  .studio-app .subscription-plan-grid--annual, .public-plan-grid--annual { grid-template-columns: repeat(3, 1fr); }
  .studio-app .subscription-plan-grid--annual .subscription-plan:nth-child(n+4), .public-plan-grid--annual .public-plan:nth-child(n+4) { grid-column: span 1; }
}
@media (max-width: 760px) {
  .studio-app .subscription-hero, .studio-app .subscription-usage, .studio-app .subscription-history { grid-template-columns: 1fr; gap: var(--space-6); }
  .studio-app .subscription-hero { padding: var(--space-8); }
  .studio-app .subscription-plan-grid--annual, .public-plan-grid--annual { grid-template-columns: repeat(2, 1fr); }
  .studio-app .subscription-section-heading, .public-plan-heading { align-items: start; flex-direction: column; gap: var(--space-3); }
  .studio-app .subscription-section-heading > p, .public-plan-heading > p { max-width: none; text-align: left; }
  .pricing-main { padding: var(--space-10); }
  .pricing-hero { padding: var(--space-10); }
}
@media (max-width: 540px) {
  .subscription-workspace main { padding: var(--space-8); }
  .studio-app .subscription-hero h1 { font-size: clamp(39px, 10.5vw, 48px); letter-spacing:-1px; }
  .studio-app .subscription-usage { gap: var(--space-5); padding: var(--space-6) var(--space-5); }
  .studio-app .subscription-usage h2 { font-size: 25px; }
  .studio-app .subscription-plan-grid--annual, .studio-app .subscription-plan-grid--quarterly, .public-plan-grid--annual, .public-plan-grid--quarterly { grid-template-columns: 1fr; max-width: none; }
  .studio-app .subscription-plan-section { padding: var(--space-8); }
  .studio-app .subscription-history-row { grid-template-columns: 1fr 1.3fr .9fr; min-height: 53px; padding: 0 var(--space-3); }
  .studio-app .subscription-history-row span:nth-child(2) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .studio-app .subscription-history-row span:nth-child(4) { display: none; }
  .studio-app .checkout-stage { min-height: calc(100vh - 205px); }
  .studio-app .checkout-card { padding: var(--space-7) var(--space-6); }
  .pricing-site .ls-desktop-nav { display: none; }
  .pricing-site .ls-nav { height: var(--header-h-sm); }
  .pricing-site .ls-brand-lockup > span { display: none; }
  .pricing-main { width: min(91vw, 520px); padding: var(--space-9) 0 var(--space-10); }
  .pricing-hero h1 { font-size: clamp(42px, 11.4vw, 56px); letter-spacing:-1.5px; }
  .pricing-hero > p { margin: var(--space-5); font-size: 14px; }
  .public-plan-heading h2 { font-size: 28px; }
  .public-plan-section { padding: var(--space-8); }
}

/* Test mode banner for wallet and subscription pages */

.test-mode-banner {
  margin: 0 0 var(--space-7);
  border: 1px solid #e3d9eb;
  border-radius: var(--space-4);
  padding: var(--space-4) var(--space-4);
  background: linear-gradient(120deg, #f6edff, #fff 70%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
}

.test-mode-banner .eyebrow {
  margin: 0 0 var(--space-2);
}

.test-mode-banner p {
  margin: 0;
  color: #4a3d56;
  font-size: 12px;
}

.test-mode-banner form {
  margin: 0;
}

/* Keep subscription content on the same column grid as the rest of Studio. */
.subscription-workspace main {
  padding-inline: 0;
}

.studio-app .subscription-usage,
.studio-app .subscription-section-heading,
.studio-app .subscription-history,
.public-plan-heading {
  margin-inline: 0;
}

.studio-app .subscription-history {
  padding-inline: 0;
}

@media (max-width: 760px) {
  .studio-app .subscription-hero,
  .pricing-hero {
    padding-inline: 0;
  }

  .pricing-main {
    padding-inline: 0;
  }
}

@media (max-width: 540px) {
  .subscription-workspace main,
  .studio-app .subscription-plan-section,
  .public-plan-section {
    padding-inline: 0;
  }
}

/* Keep billing headings clear and comparable to the rest of the site. */
.studio-app .subscription-hero h1 {
  font-size: clamp(36px, 3.8vw, 52px);
  letter-spacing: -1.6px;
  line-height: 1.06;
}

.pricing-hero h1 {
  font-size: clamp(40px, 3.9vw, 56px);
  letter-spacing: -2px;
  line-height: 1.05;
}

@media (max-width: 600px) {
  .studio-app .subscription-hero h1 {
    font-size: clamp(32px, 8.6vw, 38px);
    letter-spacing: -1px;
  }

  .pricing-hero h1 {
    font-size: clamp(34px, 9.2vw, 40px);
    letter-spacing: -1.2px;
  }
}