/* Scoped to the initial creator picker; generation stages keep their layout. */
.start-credit-layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; width: 100%; max-width: 80rem; margin: 0 auto; align-items: start; }
.start-credit-creators { min-width: 0; }
#step-1-panel .start-credit-creators .photo-entry-main { width: 100%; max-width: none; margin: 0; }
.start-credit-offer { display: grid; gap: .75rem; min-width: 0; padding: 1.125rem; border: 1px solid var(--customer-border, #424c45); border-radius: 1rem; background: var(--customer-page, #191c1b); }
.credit-offer-eyebrow { margin: 0 0 .375rem; color: var(--customer-muted, #bebfb5); font-size: .6875rem; line-height: 1.4; }
.start-credit-offer h2 { margin: 0; color: var(--customer-text, #f3f0e8); font: 600 1.375rem/1.2 'Outfit', ui-sans-serif, sans-serif; letter-spacing: -.02em; }
.start-credit-price { margin: .5rem 0 0; color: var(--customer-accent, #a6ceb2); font-size: 1.125rem; font-weight: 700; }
.start-credit-description, .start-credit-scope { margin: 0; color: var(--customer-muted, #bebfb5); font-size: .75rem; line-height: 1.55; }
.start-credit-benefits { display: grid; gap: .625rem; margin: 0; padding: .25rem 0 .25rem 1rem; color: var(--customer-text, #f3f0e8); font-size: .75rem; line-height: 1.5; list-style: disc; }
.start-credit-scope { font-size: .6875rem; }
.credit-offer-paused { margin: 0; color: #e2cba4; font-size: .75rem; line-height: 1.5; }
.start-credit-link { display: flex; gap: .75rem; align-items: center; justify-content: space-between; min-height: 2.75rem; color: var(--customer-accent, #a6ceb2); font-size: .8125rem; font-weight: 700; text-decoration: underline; text-underline-offset: .2rem; }
.start-credit-link:focus-visible, .credit-store a:focus-visible, .credit-store button:focus-visible { outline: 2px solid var(--customer-accent, #a6ceb2); outline-offset: 4px; }
@media (min-width: 1200px) {
  .start-credit-layout:has(.start-credit-offer) { grid-template-columns: 16rem minmax(0, 1fr); gap: 1.25rem; }
  #step-1-panel .start-credit-layout:has(.start-credit-offer) .photo-entry-main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1600px) { #step-1-panel .start-credit-layout:has(.start-credit-offer) .photo-entry-main { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 1199px) {
  .start-credit-offer { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .375rem 1rem; padding: .875rem 1rem; }
  .start-credit-offer-heading { position: relative; padding-right: 2rem; grid-column: 1; }
  .start-credit-offer h2 { font-size: 1.125rem; }
  .credit-offer-eyebrow, .start-credit-benefits, .start-credit-scope { display: none; }
  .start-credit-description { grid-column: 1 / -1; }
  .start-credit-offer .credit-offer-paused { grid-column: 1 / -1; font-size: .6875rem; }
  .start-credit-link { grid-column: 2; grid-row: 1; min-height: 2.5rem; font-size: .75rem; }
  .start-credit-price { margin-top: .25rem; font-size: .875rem; }
}
@media (max-width: 359px) { .start-credit-offer { padding: .75rem; gap: .375rem .5rem; } .start-credit-link { font-size: .6875rem; gap: .375rem; } }

/* The landing page explains the pack without changing checkout semantics. */
.credit-store { max-width: 70rem; margin: 0 auto; padding: 2.5rem 1.25rem; color: var(--customer-text, #f3f0e8); }
.credit-store-header { margin: .5rem 0 2rem; text-align: center; }
.credit-store-header h1 { margin: 0; font: 600 clamp(1.75rem, 4vw, 2.5rem)/1.15 'Outfit', ui-sans-serif, sans-serif; letter-spacing: -.025em; }
.credit-store-lead { max-width: 42rem; margin: .75rem auto 0; color: var(--customer-muted, #bebfb5); font-size: .9375rem; line-height: 1.6; }
.credit-store-return { flex-shrink: 0; display: inline-flex; align-items: center; min-height: 2.75rem; font-size: .8125rem; font-weight: 650; }
.credit-store-main { display: grid; gap: 2rem; align-items: start; }
.credit-pack { width: 100%; max-width: 28rem; justify-self: center; text-align: center; padding: 1.75rem; border: 1px solid #647d6c; border-radius: 1rem; background: linear-gradient(135deg, rgb(166 206 178 / .1), rgb(166 206 178 / .02)); }
.credit-pack h2 { margin: 0; font: 600 1.75rem/1.2 'Outfit', ui-sans-serif, sans-serif; }
.credit-pack-price { margin: 1rem 0 0; color: var(--customer-accent, #a6ceb2); font-size: 2rem; font-weight: 750; line-height: 1.2; }
.credit-store-small { margin: .625rem 0 0; color: var(--customer-muted, #bebfb5); font-size: .75rem; line-height: 1.6; }
.credit-pack-purchase { margin-top: 1.25rem; }
.credit-pack-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 3rem; padding: .75rem 1rem; border: 1px solid transparent; border-radius: .75rem; background: var(--customer-accent, #a6ceb2); color: #19271f; font-size: .875rem; font-weight: 750; }
.credit-pack-button:disabled { cursor: not-allowed; border-color: var(--customer-border, #424c45); background: var(--customer-raised, #2d3430); color: var(--customer-muted, #bebfb5); }
.credit-pack .credit-offer-paused { margin-top: .75rem; }
.credit-store-benefits h2, .credit-store-usage h2 { margin: 0; font-size: 1.125rem; line-height: 1.4; font-weight: 700; }
.credit-benefit-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1rem 0 0; padding: 0; list-style: none; }
.credit-benefit-grid li { padding: 1.25rem 1rem; border: 1px solid var(--customer-border, #424c45); border-radius: .875rem; text-align: center; }
.credit-benefit-grid h3 { margin: 0; font-size: .875rem; line-height: 1.5; font-weight: 650; }
.credit-benefit-grid p { margin: .375rem 0 0; color: var(--customer-muted, #bebfb5); font-size: .8125rem; line-height: 1.6; }
.credit-store-usage { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--customer-border, #424c45); }
.credit-usage-scroll { margin-top: 1rem; overflow-x: auto; }
.credit-usage-table { width: 100%; border-collapse: collapse; text-align: left; font-size: .8125rem; }
.credit-usage-table th, .credit-usage-table td { padding: .875rem .625rem; border-bottom: 1px solid var(--customer-border, #424c45); line-height: 1.5; }
.credit-usage-table thead th { color: var(--customer-muted, #bebfb5); font-size: .75rem; font-weight: 500; }
.credit-usage-table tbody th { font-weight: 600; }
.credit-store-balance { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: .625rem 1.25rem; margin-top: 1.5rem; padding: 1rem 1.25rem; border: 1px solid var(--customer-border, #424c45); border-radius: .875rem; }
.credit-store-balance h2 { margin: 0; font-size: .875rem; font-weight: 650; }
.credit-store-balance p { margin: .25rem 0 0; font-size: .8125rem; color: var(--customer-muted, #bebfb5); }
.credit-store a { color: var(--customer-accent, #a6ceb2); }
.credit-store-balance a, .credit-store-notes a { text-decoration: underline; text-underline-offset: .2rem; }
.credit-store-notes { display: flex; justify-content: center; flex-wrap: wrap; gap: .75rem 1.5rem; font-size: .75rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--customer-border, #424c45); }
.credit-store-notes p { margin: 0; color: var(--customer-muted, #bebfb5); font-size: .75rem; line-height: 1.6; }
.credit-store-notice { margin: 0 0 1.25rem; padding: .875rem 1rem; border: 1px solid var(--customer-border, #424c45); border-radius: .75rem; color: var(--customer-muted, #bebfb5); font-size: .8125rem; line-height: 1.5; }
@media (max-width: 599px) { .credit-store { padding: 1.5rem 1rem; } .credit-store-header { display: block; } .credit-store-return { margin-top: .5rem; } .credit-pack { padding: 1.25rem; } .credit-benefit-grid { gap: 1rem; } .credit-usage-table th, .credit-usage-table td { padding-inline: .375rem; } }

/* Shared, compact benefit badges and direct purchase action. */
.start-credit-offer-heading { position: relative; padding-right: 0; }
.credit-detail-preview { margin: 0; overflow: hidden; border: 1px solid rgb(166 206 178 / .12); border-radius: .75rem; background: #18201c; }
.credit-detail-preview img { display: block; width: 100%; height: auto; }
.credit-detail-preview figcaption { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .375rem; width: 100%; margin-inline: auto; padding: .5rem .375rem .625rem; text-align: center; color: var(--customer-muted, #bebfb5); font-size: .6875rem; line-height: 1.4; }
.credit-detail-preview figcaption strong { color: var(--customer-accent, #a6ceb2); font-weight: 650; }
.credit-info-link { position: absolute; right: -.375rem; top: -.375rem; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; color: var(--customer-muted, #bebfb5); }
.credit-info-link svg { width: 1.25rem; height: 1.25rem; }
.credit-info-link:hover { color: var(--customer-accent, #a6ceb2); background: rgb(166 206 178 / .08); }
.credit-perk-badges { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; list-style: none; }
.credit-perk-badges li { display: inline-flex; align-items: center; gap: .375rem; padding: .4rem .625rem; border: 1px solid rgb(166 206 178 / .22); border-radius: .5rem; background: rgb(166 206 178 / .06); color: var(--customer-text, #f3f0e8); font-size: .75rem; font-weight: 550; line-height: 1.35; }
.credit-perk-badges li span { color: var(--customer-accent, #a6ceb2); }
.credit-info-link:focus-visible, .credit-pack-button:focus-visible { outline: 2px solid var(--customer-accent, #a6ceb2); outline-offset: 4px; }
.credit-pack-button { position: relative; isolation: isolate; overflow: hidden; gap: .75rem; text-decoration: none; cursor: pointer; transition: box-shadow .2s, background .2s; }
.credit-pack-button:hover:not(:disabled) { box-shadow: 0 0 1.25rem rgb(166 206 178 / .22); background: #bfddc7; }
.credit-buy-glimmer::after { content: ''; position: absolute; z-index: -1; inset: -75% auto -75% -60%; width: 35%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .4), transparent); transform: skewX(-20deg); animation: credit-button-glimmer 5s ease-in-out infinite; pointer-events: none; }
@keyframes credit-button-glimmer { 0%, 65% { left: -60%; } 90%, 100% { left: 140%; } }
.credit-pack-icon, .credit-benefit-icon { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: .875rem; border: 1px solid rgb(166 206 178 / .2); border-radius: .875rem; background: rgb(166 206 178 / .08); color: var(--customer-accent, #a6ceb2); font-size: 1.5rem; }
.credit-pack-badges { justify-content: center; }
.credit-pack .credit-pack-price { font-size: 2.75rem; margin: 1.25rem 0; letter-spacing: -.03em; }
.credit-pack-tax { font-size: .6875rem; }
.credit-store .credit-pack-button { color: #19271f; }
.credit-store-return { gap: .5rem; }
.credit-store-usage summary { color: var(--customer-muted, #bebfb5); font-size: .8125rem; font-weight: 600; cursor: pointer; }
.credit-store-balance { justify-content: center; }
@media (prefers-reduced-motion: reduce) { .credit-buy-glimmer::after { animation: none; display: none; } .credit-pack-button { transition: none; } }
@media (max-width: 1199px) { .start-credit-offer .credit-perk-badges { grid-column: 1 / -1; } .start-credit-offer > .credit-pack-button { grid-column: 2; grid-row: 1; width: auto; min-width: 8rem; } }
@media (max-width: 599px) { .credit-benefit-grid { grid-template-columns: minmax(0, 1fr); gap: .75rem; } .credit-benefit-grid li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: .25rem .875rem; text-align: left; padding: 1rem; } .credit-benefit-icon { grid-row: 1 / 3; margin: 0; } .credit-benefit-grid h3, .credit-benefit-grid p { margin: 0; } }
@media (max-width: 399px) { .start-credit-offer { grid-template-columns: minmax(0, 1fr); } .start-credit-offer > .credit-pack-button { grid-column: 1; grid-row: auto; width: 100%; } }
@media (max-width: 1199px) { .start-credit-offer-heading { padding-right: 0; } .credit-detail-preview { grid-column: 1 / -1; } .credit-detail-preview img, .credit-detail-preview figcaption { max-width: 18rem; margin-inline: auto; } }
@media (max-width: 599px) { .start-credit-offer { grid-template-columns: minmax(0, 1fr); gap: .875rem; } .start-credit-offer > .credit-pack-button { grid-column: 1; grid-row: auto; width: 100%; } }

/* Published prices and balance-aware pack copy retain the existing card style. */
.start-credit-offer { grid-template-columns: minmax(0, 1fr); }
.start-credit-offer-heading { display: flex; align-items: start; justify-content: space-between; gap: .625rem; grid-column: 1 / -1; }
.start-credit-offer-heading h2 { flex: 1; min-width: 0; padding-top: .125rem; font-size: 1.125rem; }
.start-credit-price-badges { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; gap: .375rem; }
.start-credit-price-badges .start-credit-price { margin: 0; line-height: 1.2; font-size: 1.125rem; white-space: nowrap; }
.credit-savings-badge { display: inline-flex; align-items: center; border: 1px solid rgb(166 206 178 / .28); border-radius: 999px; background: rgb(166 206 178 / .1); color: var(--customer-accent, #a6ceb2); padding: .25rem .5rem; font-size: .625rem; line-height: 1.3; font-weight: 700; white-space: nowrap; }
.start-credit-offer > .credit-perk-badges, .start-credit-offer > .credit-detail-preview, .start-credit-offer > .start-credit-description { grid-column: 1 / -1; }
.start-credit-offer .credit-perk-badges li { max-width: 100%; border-radius: 999px; font-size: .6875rem; }
.start-credit-offer .credit-perk-badges li span { flex-shrink: 0; }
.start-credit-offer > .credit-pack-button { grid-column: 1 / -1; grid-row: auto; width: 100%; min-width: 0; font-size: .8125rem; line-height: 1.4; text-align: center; }
.start-credit-offer > .credit-pack-button > span:last-child { flex-shrink: 0; }
.credit-pack .credit-pack-price { margin-bottom: .375rem; }
.credit-pack-unit { margin: 0 0 .75rem; color: var(--customer-muted, #bebfb5); font-size: .8125rem; }
.credit-pack-features { display: grid; gap: .875rem; margin: 1.5rem 0 0; padding-left: 1.125rem; list-style: disc; text-align: left; font-size: .8125rem; line-height: 1.5; }
.credit-pack-features small { display: block; margin-top: .25rem; color: var(--customer-muted, #bebfb5); font-size: .6875rem; }
.credit-store-benefits > h2 { margin-bottom: 1.25rem; font: 600 1.375rem/1.3 'Outfit', ui-sans-serif, sans-serif; }
.credit-benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 1200px) { .start-credit-layout:has(.start-credit-offer) { grid-template-columns: 18rem minmax(0, 1fr); } }
@media (max-width: 599px) { .credit-benefit-grid { grid-template-columns: minmax(0, 1fr); } }