/* ==========================================================================
   Ripper.bot — Account surfaces (/login, /signup, /account)
   Shares the cosmic frame from app.css. Adds card + form + history-list
   primitives. Marion headings, Inter body, white primary CTAs, gold rare.
   See docs/design.md §12.
   ========================================================================== */

/* Auth pages run the cinematic shell as a flow document, not a flex-centered
   single-screen. Centering is done at the .auth-card level so the page can
   scroll on mobile when the keyboard opens. */

body.is-auth-page {
  min-height: 100vh;
}

body.is-auth-page .app-shell,
.app-shell--auth {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding:
    max(56px, calc(env(safe-area-inset-top, 0px) + 48px))
    max(24px, calc(env(safe-area-inset-right, 0px) + 18px))
    max(96px, calc(env(safe-area-inset-bottom, 0px) + 72px))
    max(24px, calc(env(safe-area-inset-left, 0px) + 18px));
}

/* Site header styles live in site.css (loaded on every page) so the
   header on / and the legal pages renders correctly — auth.css is only
   loaded on /login, /signup, /account. */

/* ---------- Auth card (login / signup) ---------- */

.auth-card {
  position: relative;
  z-index: 2;
  width: min(100%, 26rem);
  padding: 36px 32px 32px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background:
    radial-gradient(120% 60% at 50% -20%, rgba(215, 188, 124, 0.10), transparent 55%),
    linear-gradient(180deg, #0d0d10 0%, #08080b 100%);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.03) inset,
    0 40px 120px rgba(0, 0, 0, 0.6),
    0 0 60px rgba(215, 188, 124, 0.04);
  animation: authCardIn 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes authCardIn {
  from {
    opacity: 0;
    transform: translateY(12px) scale(0.985);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .auth-card,
  .account {
    animation: none;
  }
}

.auth-card__title {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;
  line-height: 1.06;
  letter-spacing: -0.022em;
  color: #ffffff;
}

.auth-card__subtitle {
  margin: 0 0 24px;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.55;
}

.auth-card__alt {
  margin: 18px 0 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-body);
  font-size: 0.825rem;
}

/* Inbox-confirmation hint line. Closer to .lead-modal__hint on the home
   modal so the same "spam folder" message has consistent typography across
   the product. */
.auth-card__hint {
  margin: 14px 0 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.55;
  letter-spacing: 0.005em;
}

/* The auth-card title gets a programmatic focus on inbox-confirmation
   for screen-reader arrival. Suppress the visible focus ring there so the
   page doesn't paint a halo on every render — keyboard users still get
   the ring via :focus-visible. */
.auth-card__title:focus { outline: none; }
.auth-card__title:focus-visible {
  outline: 2px solid rgba(215, 188, 124, 0.45);
  outline-offset: 6px;
  border-radius: 4px;
}

.auth-card__alt a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 6px;
  margin-block: -14px;
  color: var(--accent-gold-soft);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color 160ms ease, text-decoration-thickness 160ms ease;
}

.auth-card__alt a:hover {
  color: var(--accent-gold);
  text-decoration-thickness: 2px;
}

.auth-card__divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 18px 0;
  color: rgba(255, 255, 255, 0.3);
  font-family: var(--font-body);
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
}

.auth-card__divider::before,
.auth-card__divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}

/* ---------- Scanner-safe magic-link interstitial ---------- */

.auth-continue {
  text-align: center;
}

.auth-continue__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 56px;
  margin: 0 auto 18px;
  opacity: 0.92;
  filter: drop-shadow(0 18px 40px rgba(215, 188, 124, 0.12));
}

.auth-continue__mark img {
  width: 64px;
  height: auto;
}

.auth-continue__eyebrow {
  margin: 0 0 12px;
  color: var(--accent-gold-soft);
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.auth-continue__email {
  display: inline-flex;
  max-width: 100%;
  margin: -6px auto 20px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.035);
  color: rgba(255, 255, 255, 0.66);
  font-family: var(--font-body);
  font-size: 0.78rem;
  line-height: 1.3;
  word-break: break-word;
}

.auth-continue__form {
  margin: 0;
}

.auth-continue__submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
}

.auth-continue__link {
  color: #111111;
}

/* ---------- Form primitives shared with the lead modal ---------- */

.auth-form__field {
  position: relative;
  display: block;
  margin-bottom: 12px;
}

.auth-form__field-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(255, 255, 255, 0.42);
  pointer-events: none;
  transition: color 160ms ease;
}

.auth-form__field:focus-within .auth-form__field-icon {
  color: rgba(255, 255, 255, 0.78);
}

.auth-form__input {
  width: 100%;
  padding: 14px 16px 14px 44px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: #0a0a0d;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.2;
  transition: border-color 160ms ease, background 160ms ease;
}

.auth-form__input::placeholder {
  color: rgba(255, 255, 255, 0.3);
}

.auth-form__input:hover {
  border-color: rgba(255, 255, 255, 0.12);
}

.auth-form__input:focus {
  border-color: rgba(215, 188, 124, 0.32);
  background: #0c0c10;
  box-shadow:
    0 0 0 3px rgba(215, 188, 124, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.03);
  outline: none;
}

.auth-form__input[aria-invalid="true"] {
  border-color: rgba(248, 113, 113, 0.55);
}

.auth-form__error {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.22);
  color: #fca5a5;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  line-height: 1.45;
}

.auth-form__error[hidden] {
  display: none;
}

.auth-form__error svg {
  flex: 0 0 auto;
}

/* Primary submit — same gradient-on-white treatment as the lead modal CTA. */
.auth-form__submit {
  width: 100%;
  margin-top: 6px;
  padding: 15px 22px;
  border-radius: 12px;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.1;
  color: #111111;
  background: linear-gradient(180deg, #ffffff 0%, #ededf0 100%);
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    inset 0 -1px 0 rgba(0, 0, 0, 0.06),
    0 10px 24px rgba(0, 0, 0, 0.3),
    0 4px 10px rgba(0, 0, 0, 0.12);
  transition: transform 140ms ease, opacity 140ms ease;
  cursor: pointer;
}

.auth-form__submit:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    inset 0 -1px 0 rgba(0, 0, 0, 0.08),
    0 14px 32px rgba(0, 0, 0, 0.38),
    0 6px 16px rgba(0, 0, 0, 0.16);
}

.auth-form__submit:disabled {
  cursor: not-allowed;
  opacity: 0.65;
}

/* Keyboard focus ring — visible only via keyboard, never on click. The
   :focus-visible polyfill on the white CTA uses a gold halo (matches
   .account__title:focus-visible below) so the brand accent does the work
   of signaling focus without an OS-default blue outline. */
.auth-form__submit:focus-visible {
  outline: 2px solid rgba(215, 188, 124, 0.6);
  outline-offset: 3px;
}

/* Google — outlined treatment so the white primary stays primary. */
.auth-form__google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  padding: 13px 22px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.92);
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 140ms ease;
}

.auth-form__google:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.22);
  transform: translateY(-1px);
}

.auth-form__google:focus-visible {
  outline: 2px solid rgba(215, 188, 124, 0.6);
  outline-offset: 3px;
}

.auth-form__google-glyph {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

@media (max-width: 640px) {
  .auth-card {
    padding: 30px 22px 26px;
    border-radius: 22px;
    width: 100%;
  }
  .auth-card__title {
    font-size: 1.7rem;
  }
  .auth-form__input {
    font-size: 16px; /* iOS: prevent input zoom */
  }
}

/* ==========================================================================
   /account — header + downloads history
   ========================================================================== */

.account {
  position: relative;
  z-index: 2;
  width: min(100%, 760px);
  margin: 0 auto;
  padding: clamp(52px, 8vh, 86px) 24px 72px;
  display: flex;
  flex-direction: column;
  animation: authCardIn 700ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.account__header { order: 1; }
#historySection { order: 3; }
.balance-card { order: 2; }
.credits-section { order: 4; }

.account[data-history="empty"] #historySection { order: 3; }
.account[data-history="empty"] .balance-card { order: 2; }
.account[data-credits="low"] .balance-card { order: 2; }
.account[data-credits="low"] #historySection { order: 3; }

/* --- Header --- */

.account__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-bottom: 32px;
  padding-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.account__heading {
  display: block;
  min-width: 0;
}

.account__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex: 0 0 auto;
}

.account__eyebrow {
  display: block;
  margin: 0 0 8px;
  color: var(--accent-gold-soft);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.account__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.4rem, 6vw, 3.5rem);
  line-height: 0.96;
  letter-spacing: -0.025em;
  color: #ffffff;
}

/* Suppress the visible focus ring when JS programmatically focuses the
   title (for screen-reader arrival). Keyboard users still get the ring
   via :focus-visible. Without this, every page load painted a thick
   white outline around "Your rips". */
.account__title:focus {
  outline: none;
}
.account__title:focus-visible {
  outline: 2px solid rgba(215, 188, 124, 0.45);
  outline-offset: 6px;
  border-radius: 4px;
}

.account__sub {
  margin: 14px 0 0;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.4;
  letter-spacing: 0.005em;
}

.account__email {
  color: rgba(255, 255, 255, 0.78);
  word-break: break-all;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

.account__sub-dot {
  opacity: 0.4;
  flex: 0 0 auto;
}

/* Tally is muted white. Earlier gold treatment pushed the on-page gold
   count past the design.md §2 "≤3 instances" rule when combined with the
   eyebrow + ready pill + group label. White lets the email and tally
   read as "data-about-you" rather than "decorative brand surface." */
.account__tally {
  color: rgba(255, 255, 255, 0.5);
  font-feature-settings: "tnum" 1;
}

/* Sign-out — quieter than a chrome button. The pill border only appears
   on hover so the rest state doesn't compete with the title. */
.account__new-rip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px 16px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff 0%, #ededf0 100%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: #111111;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 650;
  letter-spacing: 0.005em;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
  white-space: nowrap;
}

.account__new-rip:hover {
  transform: translateY(-1px);
  background: linear-gradient(180deg, #ffffff 0%, #f6f2e1 100%);
  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.34);
}

.account__new-rip:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.72);
  outline-offset: 3px;
}

.account__signout {
  /* Was flex-start, which aligned the button to the top of the title block
     (i.e., even with the gold "Your account" eyebrow). Center-align so the
     button reads as paired with the title baseline, not an annotation on
     the eyebrow. */
  align-self: center;
  min-height: 44px;
  padding: 8px 14px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-body);
  font-size: 0.825rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
  flex: 0 0 auto;
}

.account__signout:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.account__signout:disabled {
  cursor: progress;
  opacity: 0.6;
}

/* --- History wrapper + date groups --- */

.history {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

.history[hidden] {
  display: none;
}

.history__group {
  display: block;
}

/* Group label trails a faint horizontal line so the page reads as
   discrete chapters instead of a single fluid stack. The line uses
   a hairline gold-soft fade — present, never loud. */
.history__group-label {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 4px 18px;
  color: var(--accent-gold-soft);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* The trailing rule used to fade gold; we mute it to white so the
   on-page gold count stays under the design.md §2 ceiling. The label
   text itself stays gold-soft so the chapter eyebrow still reads as
   on-brand. */
.history__group-label::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0.1) 0%,
    rgba(255, 255, 255, 0.04) 50%,
    rgba(255, 255, 255, 0) 100%
  );
}

.history__group-items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* --- Row --- */

/* Per-row backdrop-filter was applied to every list item — on a long
   list (50+ rows) iOS scroll stuttered. Move the blur to the parent
   wrapper so a single composited layer absorbs the cost; rows still
   read correctly because the rgba background does the heavy lifting. */
.history__group-items {
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-radius: 16px;
}

.history__item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 16px 24px;
  padding: 20px 24px 20px 26px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.02) 0%, rgba(255, 255, 255, 0) 100%),
    rgba(12, 12, 16, 0.66);
  transition:
    border-color 200ms ease,
    background 200ms ease,
    transform 160ms ease;
  overflow: hidden;
}

.history__item:hover {
  border-color: rgba(215, 188, 124, 0.22);
  background:
    linear-gradient(180deg, rgba(215, 188, 124, 0.045) 0%, rgba(255, 255, 255, 0) 100%),
    rgba(12, 12, 16, 0.78);
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.22);
}

.history__item:focus-within {
  border-color: rgba(215, 188, 124, 0.32);
}

/* Expired rows are muted but still readable. */
.history__item[data-expired="true"] {
  opacity: 0.62;
}

.history__item[data-expired="true"]:hover {
  opacity: 0.88;
}

.history__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

/* Host owns the top line alone now — pill moved down into the meta row
   so the row reads like an editorial entry: title → kicker → byline. */
.history__host {
  display: block;
  margin: 0;
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -0.008em;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.history__url {
  display: block;
  margin: 5px 0 0;
  /* 0.42 was at the ragged edge of WCAG AA for small text on the row's
     dark surface. 0.5 gives ~6:1 contrast against #0c0c10 with margin. */
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
  transition: color 160ms ease;
}

a.history__url:hover {
  color: rgba(255, 255, 255, 0.78);
}

/* Meta line: pill · time · size · assets · expires. Wrap-aware. */
.history__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 13px;
  color: rgba(255, 255, 255, 0.46);
  font-family: var(--font-body);
  font-size: 0.75rem;
  letter-spacing: 0.005em;
}

.history__meta time,
.history__meta-num {
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

.history__meta-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.24);
  flex: 0 0 auto;
}

.history__expires--soon {
  color: rgba(215, 188, 124, 0.78);
}

.history__expires--expired {
  color: rgba(255, 255, 255, 0.36);
  font-style: italic;
}

/* --- Status pill --- */

.history__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  flex: 0 0 auto;
}

.history__pill[data-state="ready"] {
  background: rgba(215, 188, 124, 0.12);
  border: 1px solid rgba(215, 188, 124, 0.28);
  /* Full --accent-gold (not -soft) for ≥4.5:1 contrast on this
     gold-tinted background at 0.68rem caps text size. */
  color: var(--accent-gold);
}

.history__pill[data-state="expired"] {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.5);
}

.history__pill[data-state="pending"],
.history__pill[data-state="rendering"],
.history__pill[data-state="bundling"] {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.78);
}

.history__pill[data-state="failed"] {
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.28);
  color: #fca5a5;
}

.history__pill-pulse {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
  animation: pulse 1.6s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 0.35; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1.15); }
}

@media (prefers-reduced-motion: reduce) {
  .history__pill-pulse {
    animation: none;
    opacity: 0.7;
  }
  /* The 200ms hover transition + translateY on .history__item exceeds
     the design.md §7 ≤180ms exemption for hover transitions. Strip
     transform under reduced-motion; keep border-color + background so
     the affordance still communicates without movement. */
  .history__item {
    transition: border-color 160ms ease, background 160ms ease;
  }
  .history__item:hover {
    transform: none;
  }
  .history__item::before {
    transition: background 160ms ease;
  }
}

/* --- Per-row action --- */

.history__action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 9px 16px;
  border-radius: 10px;
  background: linear-gradient(180deg, #ffffff 0%, #ededf0 100%);
  color: #111111;
  font-family: var(--font-body);
  font-size: 0.84rem;
  font-weight: 500;
  letter-spacing: 0.005em;
  text-decoration: none;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 6px 14px rgba(0, 0, 0, 0.22);
  transition: transform 140ms ease;
  cursor: pointer;
  flex: 0 0 auto;
  white-space: nowrap;
}

.history__action:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 10px 22px rgba(0, 0, 0, 0.32);
}

.history__action--ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: none;
}

.history__action--ghost:hover {
  background: rgba(255, 255, 255, 0.04);
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.24);
  box-shadow: none;
  transform: translateY(-1px);
}

.history__action svg {
  flex: 0 0 auto;
}

/* Resend-button state visuals. Lives on the same .history__action so the
 * "Email link" button never jumps geometry between states — only fill,
 * border, and copy change. The :disabled rule keeps the hover-lift from
 * tugging the row when the button is locked. */
.history__action[data-state='sending'],
.history__action[data-state='sent'],
.history__action[data-state='expired'] {
  cursor: default;
  transform: none !important;
}
.history__action[data-state='sent'] {
  background: linear-gradient(180deg, #1a160d 0%, #14110a 100%);
  color: #e2c78a;
  border: 1px solid rgba(215, 188, 124, 0.3);
  box-shadow: none;
}
.history__action[data-state='sending'] {
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: none;
}
.history__action[data-state='expired'] {
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: none;
}
.history__action[data-state='error'] {
  background: linear-gradient(180deg, #ffffff 0%, #ededf0 100%);
  color: #111111;
  border: 1px solid rgba(255, 92, 92, 0.5);
}

/* --- Mobile rules --- */

@media (max-width: 640px) {
  .account {
    padding: 92px 18px 72px;
  }
  .account__header {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding-bottom: 22px;
    margin-bottom: 32px;
  }
  .account__actions {
    align-self: stretch;
    width: 100%;
    justify-content: space-between;
  }
  .account__new-rip {
    flex: 1 1 auto;
  }
  .account__signout {
    align-self: center;
  }
  .history {
    gap: 28px;
  }
  .history__item {
    grid-template-columns: 1fr;
    gap: 14px;
    padding: 16px 18px 16px 20px;
  }
  .history__item::before {
    top: 12px;
    bottom: 12px;
  }
  .history__action {
    justify-self: stretch;
    text-align: center;
    justify-content: center;
  }
  .history__host {
    font-size: 0.98rem;
  }
}

/* ==========================================================================
   /account states — loading / empty / error
   Wrapped in a single .history-state primitive so the [hidden] attribute is
   honored. The previous .history-empty/.history-loading/.history-error rules
   set display:flex, which silently overrode the user-agent stylesheet's
   [hidden]{display:none} and stacked all three states on top of each other.
   ========================================================================== */

.history-state {
  margin-top: 8px;
  padding: 64px 32px 56px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.07);
  background:
    radial-gradient(140% 80% at 50% -20%, rgba(215, 188, 124, 0.10), transparent 60%),
    linear-gradient(180deg, rgba(13, 13, 16, 0.74) 0%, rgba(8, 8, 11, 0.7) 100%);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.32);
}

/* The actual fix: explicit [hidden] selector wins because the user-agent
   stylesheet's [hidden] uses default specificity, but our class-based
   display:flex above wins by author-style precedence. !important here
   is the cleanest one-line fix. */
.history-state[hidden] {
  display: none !important;
}

.history-state__glyph {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 6px;
  border-radius: 14px;
  background:
    radial-gradient(80% 80% at 30% 20%, rgba(215, 188, 124, 0.16), transparent 60%),
    rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(215, 188, 124, 0.18);
  color: var(--accent-gold-soft);
}

.history-state__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.6rem, 3.4vw, 2rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #ffffff;
}

.history-state__copy {
  margin: 0;
  max-width: 32rem;
  color: rgba(255, 255, 255, 0.6);
  font-family: var(--font-body);
  font-size: 0.92rem;
  line-height: 1.6;
}

.history-state__copy strong {
  color: #ffffff;
  font-weight: 500;
}

/* Spinner for the loading variant — gold-soft arc on a faint track,
   matches the download-page spinner so users learn one motion vocabulary. */
.history-state__spinner {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.08);
  border-top-color: var(--accent-gold-soft);
  animation: historySpin 1.1s linear infinite;
  margin-bottom: 6px;
}

@keyframes historySpin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .history-state__spinner { animation: none; }
}

/* CTA — primary (white) for empty, ghost for error retry. */
.history-state__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 12px 22px;
  border-radius: 11px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms ease, background 160ms ease,
    border-color 160ms ease, color 160ms ease;
}

.history-state__cta--primary {
  background: linear-gradient(180deg, #ffffff 0%, #ededf0 100%);
  color: #111111;
  border: 1px solid rgba(255, 255, 255, 0.6);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.92),
    0 8px 20px rgba(0, 0, 0, 0.28);
}

.history-state__cta--primary:hover {
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 1),
    0 12px 28px rgba(0, 0, 0, 0.38);
}

.history-state__cta--ghost {
  background: transparent;
  color: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.16);
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  letter-spacing: 0.005em;
}

.history-state__cta--ghost:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.28);
  color: #ffffff;
}

.history-state__cta svg {
  flex: 0 0 auto;
  opacity: 0.72;
}

@media (max-width: 640px) {
  .history-state {
    padding: 48px 22px 44px;
    border-radius: 18px;
  }
  .history-state__cta {
    font-size: 0.95rem;
  }
  .history-state__cta--primary {
    width: 100%;
    justify-content: center;
  }
}

/* ==========================================================================
   /account — balance card + credit history
   ========================================================================== */

.balance-card {
  position: relative;
  margin: 0 0 34px;
  padding: 26px 28px 24px;
  border-radius: 20px;
  border: 1px solid rgba(215, 188, 124, 0.22);
  background:
    radial-gradient(120% 85% at 88% -22%, rgba(215, 188, 124, 0.18), transparent 58%),
    radial-gradient(90% 80% at 8% 0%, rgba(255, 255, 255, 0.08), transparent 52%),
    linear-gradient(180deg, rgba(13, 13, 16, 0.78) 0%, rgba(8, 8, 11, 0.74) 100%);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.025) inset;
  overflow: hidden;
}

.balance-card[data-state="loading"] .balance-card__count-num {
  color: rgba(255, 255, 255, 0.32);
}

.balance-card[data-tone="low"] {
  border-color: rgba(248, 113, 113, 0.28);
}

.balance-card__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.balance-card__primary {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.balance-card__label {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-gold-soft);
}

.balance-card__count {
  display: inline-flex;
  align-items: baseline;
  gap: 10px;
  color: #ffffff;
  font-family: var(--font-display);
  letter-spacing: -0.022em;
  line-height: 1;
}

.balance-card__count-num {
  font-size: clamp(2.6rem, 6vw, 3.5rem);
  font-feature-settings: "tnum" 1;
}

.balance-card__count-unit {
  font-family: var(--font-body);
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.5);
  letter-spacing: 0.005em;
}

.balance-card[data-tone="low"] .balance-card__count-num {
  color: #fca5a5;
}

.balance-card[data-tone="lifetime"] {
  border-color: rgba(215, 188, 124, 0.36);
}

.balance-card[data-tone="lifetime"] .balance-card__count-num {
  color: var(--accent-gold, #d7bc7c);
}

.balance-card__sub {
  margin: 0;
  color: rgba(255, 255, 255, 0.54);
  font-family: var(--font-body);
  font-size: 0.86rem;
  letter-spacing: 0.005em;
  line-height: 1.45;
}

.balance-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 20px;
  border-radius: 12px;
  background: #ffffff;
  border: 1px solid #ffffff;
  color: #070709;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 650;
  letter-spacing: 0.005em;
  cursor: pointer;
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.34);
  transition: background 160ms ease, border-color 160ms ease, transform 140ms ease, box-shadow 160ms ease;
}

.balance-card__cta:hover {
  background: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.9);
  color: #050505;
  transform: translateY(-1px);
  box-shadow: 0 20px 42px rgba(0, 0, 0, 0.42);
}

.balance-card__cta[data-state="unavailable"] {
  border-color: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.68);
}

.balance-card__cta[data-state="unavailable"]:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.18);
}

.balance-card__cta[data-state="checking"] {
  cursor: progress;
  opacity: 0.78;
}

.balance-card__cta:focus-visible {
  outline: 2px solid rgba(215, 188, 124, 0.6);
  outline-offset: 3px;
}

.balance-card__cta svg {
  flex: 0 0 auto;
  opacity: 0.78;
}

@media (max-width: 640px) {
  .balance-card {
    padding: 22px 22px 20px;
    margin-bottom: 28px;
  }
  .balance-card__inner {
    gap: 16px;
  }
  .balance-card__cta {
    width: 100%;
    justify-content: center;
  }
}

/* --- Credits section (ledger list) --- */

.credits-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.credits-section[hidden] {
  display: none;
}

.credits-section__summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  min-height: 44px;
  cursor: pointer;
  border-radius: 12px;
  padding: 4px 2px;
}

.credits-section__summary::-webkit-details-marker {
  display: none;
}

.credits-section__summary-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.credits-section__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.25rem, 3vw, 1.45rem);
  letter-spacing: 0;
  line-height: 1.1;
  color: #ffffff;
}

.credits-section__sub {
  margin: 0;
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-body);
  font-size: 0.82rem;
  letter-spacing: 0.005em;
  line-height: 1.45;
}

.credits-section__summary-action {
  flex: 0 0 auto;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.025);
  color: rgba(255, 255, 255, 0.66);
  font-family: var(--font-body);
  font-size: 0;
  font-weight: 500;
}

.credits-section__summary-action::before {
  content: "Show ledger";
  font-size: 0.76rem;
}

.credits-section[open] .credits-section__summary-action::before {
  content: "Hide ledger";
}

.credits-section__summary:hover .credits-section__summary-action {
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.86);
}

.credits-section__summary:focus-visible {
  outline: 2px solid rgba(215, 188, 124, 0.52);
  outline-offset: 4px;
}

.ledger {
  list-style: none;
  margin: 22px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(12, 12, 16, 0.6);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  overflow: hidden;
}

.ledger[hidden] {
  display: none;
}

.ledger__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: background 160ms ease;
}

.ledger__item:last-child {
  border-bottom: 0;
}

.ledger__item:hover {
  background: rgba(255, 255, 255, 0.025);
}

.ledger__main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ledger__reason {
  color: #ffffff;
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.ledger__note {
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 28rem;
}

.ledger__note--muted {
  color: rgba(255, 255, 255, 0.38);
}

.ledger__time {
  margin-top: 2px;
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.01em;
  font-feature-settings: "tnum" 1;
}

.ledger__delta-block {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex: 0 0 auto;
}

.ledger__delta {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: #ffffff;
  font-feature-settings: "tnum" 1;
  line-height: 1.05;
}

.ledger__item[data-sign="pos"] .ledger__delta {
  color: var(--accent-gold);
}

.ledger__item[data-sign="neg"] .ledger__delta {
  color: rgba(255, 255, 255, 0.78);
}

.ledger__balance {
  color: rgba(255, 255, 255, 0.42);
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.02em;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}

.ledger__balance strong {
  color: rgba(255, 255, 255, 0.72);
  font-weight: 500;
}

.credits-section__pager {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  padding: 4px 6px;
}

.credits-section__pager[hidden] {
  display: none;
}

.credits-section__pager-label {
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-feature-settings: "tnum" 1;
}

.credits-section__pager-btn {
  min-height: 44px;
  padding: 7px 14px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.78);
  font-family: var(--font-body);
  font-size: 0.78rem;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease, opacity 160ms ease;
}

.credits-section__pager-btn:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.18);
  color: #ffffff;
}

.credits-section__pager-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.credits-section__empty {
  margin: 16px 0 0;
  padding: 18px 22px;
  border-radius: 12px;
  border: 1px dashed rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.5);
  font-family: var(--font-body);
  font-size: 0.86rem;
  text-align: center;
}

@media (max-width: 640px) {
  .credits-section__summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }
  .ledger__item {
    padding: 14px 18px;
  }
  .ledger__note {
    max-width: 16rem;
  }
}

/* --- Inline account notice (post-purchase) --- */

.account__notice {
  order: 2;
  margin: 0 0 22px;
  padding: 12px 18px;
  border-radius: 11px;
  font-family: var(--font-body);
  font-size: 0.88rem;
  letter-spacing: 0.005em;
  border: 1px solid rgba(215, 188, 124, 0.32);
  background: rgba(215, 188, 124, 0.08);
  color: var(--accent-gold);
}

.account__notice[data-tone="warn"] {
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.78);
}

.account__notice[data-tone="fail"] {
  border-color: rgba(248, 113, 113, 0.32);
  background: rgba(248, 113, 113, 0.06);
  color: #fca5a5;
}

/* --- Buy modal --- */

.buy-modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding:
    max(24px, calc(env(safe-area-inset-top, 0px) + 16px))
    max(24px, calc(env(safe-area-inset-right, 0px) + 16px))
    max(24px, calc(env(safe-area-inset-bottom, 0px) + 16px))
    max(24px, calc(env(safe-area-inset-left, 0px) + 16px));
}

.buy-modal[hidden] {
  display: none;
}

.buy-modal__backdrop {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(78% 70% at 54% 14%, rgba(215, 188, 124, 0.09), transparent 62%),
    rgba(2, 2, 4, 0.74);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
  cursor: pointer;
  animation: buyBackdropIn 360ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.buy-modal__panel {
  position: relative;
  width: min(100%, 62rem);
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 48px);
  overflow-y: auto;
  padding: clamp(26px, 4vw, 38px);
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.115);
  background:
    radial-gradient(90% 55% at 18% -12%, rgba(215, 188, 124, 0.13), transparent 62%),
    radial-gradient(78% 70% at 100% 0%, rgba(255, 255, 255, 0.045), transparent 56%),
    linear-gradient(180deg, rgba(16, 15, 13, 0.98) 0%, rgba(7, 7, 8, 0.99) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 34px 90px rgba(0, 0, 0, 0.58),
    0 0 0 1px rgba(5, 5, 5, 0.6);
  animation: buyPanelIn 460ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

.buy-modal__panel::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(215, 188, 124, 0.28), transparent);
  pointer-events: none;
}

@keyframes buyBackdropIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes buyPanelIn {
  from { opacity: 0; transform: translateY(14px) scale(0.982); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .buy-modal__backdrop, .buy-modal__panel { animation: none; }
}

.buy-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.62);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
    background 180ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 180ms cubic-bezier(0.16, 1, 0.3, 1),
    color 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.buy-modal__close:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.075);
  border-color: rgba(255, 255, 255, 0.14);
  color: rgba(255, 255, 255, 0.96);
}
.buy-modal__close:active {
  transform: translateY(0) scale(0.98);
}

.buy-modal__eyebrow {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  margin: 0 0 12px;
  padding: 0 11px;
  border-radius: 999px;
  border: 1px solid rgba(215, 188, 124, 0.22);
  background: rgba(215, 188, 124, 0.055);
  color: rgba(215, 188, 124, 0.84);
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.buy-modal__title {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(1.9rem, 4vw, 2.65rem);
  letter-spacing: 0;
  line-height: 0.98;
  color: rgba(255, 255, 255, 0.96);
}

.buy-modal__title:focus {
  outline: none;
}

.buy-modal__sub {
  max-width: 42rem;
  margin: 0 0 26px;
  color: rgba(255, 255, 255, 0.58);
  font-family: var(--font-body);
  font-size: 0.94rem;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.buy-modal__status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 20px;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.68);
  font-family: var(--font-body);
  font-size: 0.82rem;
  line-height: 1.45;
}

.buy-modal__status[hidden] {
  display: none;
}

.buy-modal__status:empty {
  display: none;
}

.buy-modal__status[data-tone="success"] {
  border-color: rgba(74, 222, 128, 0.26);
  background: rgba(74, 222, 128, 0.07);
  color: rgba(187, 247, 208, 0.92);
}

.buy-modal__status[data-tone="warn"] {
  border-color: rgba(215, 188, 124, 0.26);
  background: rgba(215, 188, 124, 0.07);
  color: rgba(236, 219, 178, 0.9);
}

.buy-modal__status-action {
  flex: 0 0 auto;
  min-height: 44px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05);
  color: rgba(255, 255, 255, 0.9);
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 180ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 180ms cubic-bezier(0.16, 1, 0.3, 1),
    background 180ms cubic-bezier(0.16, 1, 0.3, 1);
}

.buy-modal__status-action:hover {
  border-color: rgba(215, 188, 124, 0.3);
  background: rgba(215, 188, 124, 0.08);
  transform: translateY(-1px);
}

.buy-modal__packs {
  list-style: none;
  margin: 0 0 14px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.buy-modal__pack-button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #ffffff;
  text-align: left;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, transform 140ms ease;
}

.buy-modal__pack-button:hover:not(:disabled) {
  background: rgba(215, 188, 124, 0.05);
  border-color: rgba(215, 188, 124, 0.24);
  transform: translateY(-1px);
}

.buy-modal__pack-button:focus-visible {
  outline: 2px solid rgba(215, 188, 124, 0.6);
  outline-offset: 2px;
}

.buy-modal__pack-button:disabled {
  opacity: 0.55;
  cursor: progress;
}

.buy-modal__pack-label {
  font-family: var(--font-body);
  font-size: 0.96rem;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.buy-modal__pack-meta {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  text-align: right;
  flex: 0 0 auto;
}

.buy-modal__pack-credits {
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.005em;
}

.buy-modal__pack-price {
  color: var(--accent-gold);
  font-family: var(--font-display);
  font-size: 1.05rem;
  letter-spacing: -0.005em;
  font-feature-settings: "tnum" 1;
}

.buy-modal__loading {
  list-style: none;
  padding: 16px 18px;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-body);
  font-size: 0.86rem;
}

.buy-modal__error {
  margin: 8px 0 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(248, 113, 113, 0.08);
  border: 1px solid rgba(248, 113, 113, 0.22);
  color: #fca5a5;
  font-family: var(--font-body);
  font-size: 0.8125rem;
}

.buy-modal__error[hidden] {
  display: none;
}

.buy-modal__hint {
  margin: 14px 0 0;
  text-align: center;
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-body);
  font-size: 0.76rem;
  line-height: 1.5;
}

/* QA checkout — private admin surface for low-dollar live payment tests.
   Uses the account page shell so the signed-in identity and payment flow
   stay exactly the same as production. */
.qa-checkout {
  max-width: min(100% - 40px, 980px);
}

.qa-checkout .account__header {
  order: 1;
}

.qa-checkout__panel {
  order: 2;
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  background:
    radial-gradient(80% 60% at 16% 0%, rgba(215, 188, 124, 0.10), transparent 58%),
    linear-gradient(180deg, rgba(16, 15, 14, 0.92), rgba(7, 7, 8, 0.96));
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 26px 70px rgba(0, 0, 0, 0.42);
  padding: clamp(20px, 4vw, 34px);
}

.qa-checkout__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.qa-checkout__grid:has(.qa-checkout__empty) {
  grid-template-columns: 1fr;
}

.qa-checkout__card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-height: 280px;
  padding: 20px;
  border-radius: 18px;
  border: 1px solid rgba(255, 255, 255, 0.085);
  background: rgba(255, 255, 255, 0.026);
}

.qa-checkout__name {
  margin: 0;
  color: #fff;
  font-family: var(--font-display);
  font-size: 1.65rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.015em;
}

.qa-checkout__copy {
  min-height: 44px;
  margin: 0;
  color: rgba(255, 255, 255, 0.56);
  font-family: var(--font-body);
  font-size: 0.84rem;
  line-height: 1.55;
}

.qa-checkout__price {
  margin-top: auto;
  color: #fff;
  font-family: var(--font-display);
  font-size: 2.2rem;
  line-height: 1;
  font-feature-settings: "tnum" 1;
}

.qa-checkout__saved-card {
  margin: 0;
  border-radius: 10px;
  border: 1px solid rgba(215, 188, 124, 0.34);
  background: rgba(215, 188, 124, 0.09);
  color: rgba(255, 244, 215, 0.9);
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 750;
  line-height: 1.35;
}

.qa-checkout__button {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(255, 255, 255, 0.62);
  border-radius: 13px;
  background: linear-gradient(180deg, #fff 0%, #ececef 100%);
  color: #111;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 650;
  cursor: pointer;
}

.qa-checkout__button--secondary {
  border-color: rgba(215, 188, 124, 0.34);
  background: rgba(255, 255, 255, 0.035);
  color: #f6e7bf;
}

.qa-checkout__button:disabled {
  cursor: wait;
  opacity: 0.72;
}

.qa-checkout__button--setup {
  width: auto;
  min-width: 180px;
  margin-top: 8px;
  padding-inline: 18px;
}

.qa-checkout__empty {
  margin: 0;
  width: 100%;
  min-height: 260px;
  justify-content: center;
}

.qa-recovery {
  display: grid;
  gap: 1rem;
}

.qa-recovery__summary {
  display: grid;
  gap: 1rem;
}

.qa-recovery__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: 0.75rem;
  margin: 0;
}

.qa-recovery__facts div {
  padding: 0.85rem;
  border: 1px solid rgba(215, 188, 124, 0.22);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.035);
}

.qa-recovery__facts dt {
  color: rgba(215, 188, 124, 0.72);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.qa-recovery__facts dd {
  margin: 0.35rem 0 0;
  color: rgba(255, 255, 255, 0.86);
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}

.qa-recovery__counts,
.qa-recovery__signals {
  margin: 0;
  color: rgba(255, 255, 255, 0.56);
  font-size: 0.8rem;
  overflow-wrap: anywhere;
}

.qa-recovery__candidates {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

.qa-recovery__section-title {
  margin: 0.5rem 0 0;
  color: rgba(255, 255, 255, 0.82);
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 650;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.qa-recovery__candidate {
  min-width: 0;
}

.qa-recovery__details {
  color: rgba(255, 255, 255, 0.62);
  font-size: 0.75rem;
}

.qa-recovery__details summary {
  cursor: pointer;
}

.qa-recovery__details pre {
  max-height: 16rem;
  overflow: auto;
  margin: 0.65rem 0 0;
  padding: 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.32);
  color: rgba(255, 255, 255, 0.78);
  font-size: 0.7rem;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 640px) {
  .qa-checkout {
    max-width: min(100% - 20px, 980px);
  }

  .qa-checkout__grid {
    grid-template-columns: 1fr;
  }

  .qa-checkout__card {
    min-height: 0;
  }

  .buy-modal__panel {
    padding: 26px 20px 22px;
    border-radius: 22px;
  }
  .buy-modal__pack-button {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .buy-modal__pack-meta {
    text-align: left;
  }
}

/* --- Pricing table (Thirdweb CheckoutWidget grid) ---
   Rendered by the React bundle at /js/checkout-widget.bundle.js. The
   bundle injects one <CheckoutWidget> per pack stripped down to JUST
   its action button; the editorial chrome around it (image, title,
   description, price) is ours, owned by `<PricingCard>` in
   src/checkout-widget/index.tsx.

   Composition: editorial specimen card — header image at the top of
   each card (rounded, dark-tinted), Marion serif name, Inter rips
   subtitle, Inter body description, hairline divider, then the price
   block sits at the foot next to the white CTA. The lifetime pack is
   the featured artifact: 4% scale-up on desktop, gold hairline
   border, gold radial wash from the top edge, pack badge in
   the top-right corner, and a gold-tinted price treatment.

   Scoped under .pricing-table* so it doesn't leak into the buy-modal__
   namespace. */

.pricing-table-host {
  display: block;
  margin: 4px 0 14px;
}

.pricing-table {
  display: grid;
  gap: 18px;
  /* Desktop default: always 3 packs in one row. The buy-modal panel is
     `min(100%, 64rem)` ≈ 1024px wide. The featured (lifetime) card
     scales up by 4% so we leave headroom on the row by aligning items
     to the end (cards naturally grow downward, the lifted lifetime
     card extends slightly above the others). */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  padding: 22px 4px 8px;
}

.pricing-table__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px 18px 22px;
  border-radius: 18px;
  background:
    radial-gradient(120% 70% at 50% -8%, rgba(255, 255, 255, 0.025), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.018) 0%, rgba(255, 255, 255, 0) 100%),
    #0b0b0e;
  border: 1px solid rgba(255, 255, 255, 0.07);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.025) inset;
  transition: border-color 240ms ease-out, transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Featured (lifetime) — gold-tinted hairline border, gold radial wash,
   stronger inner shadow, and a 4% scale-up. The badge floats in the
   top-right corner. Gold appears 3 times here (border, wash, badge,
   price tint) — at the upper limit of the "rare gold" rule, which
   matches the editorial intent: this is the artifact under glass. */
.pricing-table__card[data-pack-featured="true"] {
  border-color: rgba(215, 188, 124, 0.35);
  background:
    radial-gradient(140% 90% at 50% -12%, rgba(215, 188, 124, 0.10), transparent 62%),
    linear-gradient(180deg, rgba(215, 188, 124, 0.025) 0%, rgba(255, 255, 255, 0) 60%),
    #0b0a08;
  box-shadow:
    0 1px 0 rgba(215, 188, 124, 0.10) inset,
    0 28px 64px -28px rgba(215, 188, 124, 0.14);
  transform: translateY(-6px) scale(1.04);
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .pricing-table__card { transition: none; }
  .pricing-table__card[data-pack-featured="true"] {
    transform: none;
  }
}

/* Pack badge — small, calm, gold-on-tinted-gold. Sits in the
   top-right of the featured card, slightly outside the padding box so
   it reads as a tag pinned to the card. */
.pricing-table__badge {
  position: absolute;
  top: -10px;
  right: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 11px 5px 9px;
  border-radius: 999px;
  background: linear-gradient(180deg, #1a1610 0%, #14110b 100%);
  border: 1px solid rgba(215, 188, 124, 0.45);
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.4), 0 8px 22px -10px rgba(215, 188, 124, 0.55);
  color: var(--accent-gold, #d7bc7c);
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pricing-table__badge-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 10px;
  height: 10px;
  line-height: 1;
  color: var(--accent-gold, #d7bc7c);
}
.pricing-table__badge-mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* Header image — the existing /img/checkout/pack-*.jpg artwork
   reframed as a 16:10 panoramic plate. Gold-warmed border on featured
   to echo the badge. */
.pricing-table__media {
  position: relative;
  margin: 0;
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  background: #050505;
  border: 1px solid rgba(255, 255, 255, 0.05);
}
.pricing-table__card[data-pack-featured="true"] .pricing-table__media {
  border-color: rgba(215, 188, 124, 0.18);
}
.pricing-table__media-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Calm the hero image down a touch — the existing pack images run
     hot with the gold filaments, which competes with the chrome. */
  filter: saturate(0.95) brightness(0.94);
}

.pricing-table__head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 0;
}

.pricing-table__name {
  margin: 0;
  font-family: var(--font-display, 'Iowan Old Style', 'Palatino', Georgia, serif);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.1;
  letter-spacing: -0.012em;
  color: #ffffff;
}
.pricing-table__card[data-pack-featured="true"] .pricing-table__name {
  font-size: 1.65rem;
}

/* "20 rips · $0.60 each" — the editorial tag under the title.
   Lifetime skips this line (subtitle handled by the description). */
.pricing-table__rips {
  margin: 0;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(215, 188, 124, 0.62);
}

.pricing-table__copy {
  margin: 6px 0 0;
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-size: 0.83rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.55);
}

/* Hairline — the editorial beat between content and decision. */
.pricing-table__divider {
  margin: 6px 0 2px;
  border: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.10) 50%,
    transparent 100%
  );
}
.pricing-table__card[data-pack-featured="true"] .pricing-table__divider {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(215, 188, 124, 0.28) 50%,
    transparent 100%
  );
}

/* Price + action footer. mt: auto pushes it to the bottom of the
   card so 3 cards with different copy lengths bottom-align cleanly. */
.pricing-table__foot {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: auto;
}

.pricing-table__price-block {
  display: flex;
  flex-direction: column;
  gap: 2px;
  align-items: flex-start;
}
.pricing-table__price {
  font-family: var(--font-display, 'Iowan Old Style', 'Palatino', Georgia, serif);
  font-weight: 400;
  font-size: 2.25rem;
  line-height: 0.95;
  letter-spacing: -0.018em;
  color: #ffffff;
}
.pricing-table__card[data-pack-featured="true"] .pricing-table__price {
  font-size: 2.55rem;
  color: var(--accent-gold, #d7bc7c);
}
.pricing-table__price-note {
  font-family: var(--font-body, 'Inter', system-ui, sans-serif);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.40);
}

/* The Thirdweb widget always renders a full payment-summary card
   (image, title, description, price, network, button). We pass
   metadata so it stays in compact mode, then hide the duplicated
   chrome via the brand-scrubber + this CSS so only the action
   button shows through. */
.pricing-table__widget {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

/* IMPORTANT: scope all widget-internal styling to the initial
   product-card screen only via [data-card-screen="initial"]. The
   widget swaps screens in place (product card -> payment method
   selection -> wallet connect -> processing -> success); a global
   reset like `*:not(button) { border: 0; background: transparent }`
   reaches into every screen and nukes the legitimate borders
   on the Connect Wallet / Onramp option buttons (verified visually
   — see the broken payment-method selection screen in the user's
   2026-05-09 screenshot). The wrapper screen detector below sets
   `data-card-screen` based on whether the rendered DOM looks like
   the product card, so these rules only fire there. */

/* Widget's duplicated header image — we render our own
   .pricing-table__media above. Only on the initial product-card
   screen (the .tw-header-image / [class*=header-image] div is
   specific to the product card; payment-flow screens don't render
   it, so this rule is also de-facto scoped — but we keep the
   data attr guard for explicitness). */
.pricing-table__widget[data-card-screen="initial"] img,
.pricing-table__widget[data-card-screen="initial"] .tw-header-image,
.pricing-table__widget[data-card-screen="initial"] [class*="header-image"] {
  display: none !important;
}

/* Hide <hr> separators on the initial screen. Dashed-border DIV
   hairlines (Thirdweb uses these between Price/Network/USDC rows
   and they're styled via Emotion classes, not inline `style=`)
   are hidden by the brand-scrubber's `hideHairlineDividers()` JS
   pass — see src/checkout-widget/brand-scrubber.ts. */
.pricing-table__widget[data-card-screen="initial"] hr {
  display: none !important;
}

/* Strip the widget's outer card frame on the initial screen only —
   the rounded background + border that wraps the now-empty
   product-card content area. Direct-child only, so flow-screen
   styling is untouched. */
.pricing-table__widget[data-card-screen="initial"] > div {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Collapse padding / margin / gap / min-height on the now-empty
   widget descendants so the action button doesn't sit inside a
   tall empty rectangle. The widget's grandchildren (the rows that
   used to hold Price/Network/USDC/Base) still carry vertical
   padding from Thirdweb's emotion CSS — without this rule the
   card has ~150–250px of empty vertical space between the price
   block and the button. Excludes `button` so the action CTA
   keeps its own padding/min-height/min-width. */
.pricing-table__widget[data-card-screen="initial"] *:not(button) {
  padding: 0 !important;
  margin: 0 !important;
  gap: 0 !important;
  min-height: 0 !important;
}

/* Thirdweb's inter-section spacers are <div style="height: 16px;
   flex-shrink: 0"> blocks placed between the now-hidden Price /
   Network / USDC rows. They have no children and no text, but the
   inline height keeps them in the layout. :empty targets them
   precisely; collapsing them removes the residual ~150px of
   vertical space between the price block and the action button. */
.pricing-table__widget[data-card-screen="initial"] div:empty {
  height: 0 !important;
  min-height: 0 !important;
  flex: 0 0 0 !important;
}

/* Style the action button on the initial product-card screen to
   match Ripper's primary CTA — white fill, dark canvas text. The
   `[data-card-screen="initial"]` guard keeps these rules off the
   payment-method selection screen's buttons (Connect Wallet,
   Onramp), which need Thirdweb's default styling to stay legible. */
.pricing-table__widget[data-card-screen="initial"] button {
  width: 100% !important;
  min-height: 54px !important;
  padding: 0 20px !important;
  border-radius: 15px !important;
  font-family: var(--font-body) !important;
  font-size: 0.95rem !important;
  font-weight: 650 !important;
  letter-spacing: -0.005em !important;
  background: linear-gradient(180deg, #f8f4ec 0%, #ece5d8 100%) !important;
  color: #050505 !important;
  border: 0 !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px rgba(0, 0, 0, 0.35) !important;
  transition: transform 160ms ease,
              background 160ms ease !important;
}

.pricing-table__widget[data-card-screen="initial"] button:hover {
  background: linear-gradient(180deg, #fffaf0 0%, #f4ead8 100%) !important;
  transform: translateY(-1px) !important;
}

.pricing-table__widget[data-card-screen="initial"] .pricing-table__secondary-button {
  margin-top: 10px !important;
  min-height: 46px !important;
  background: transparent !important;
  color: rgba(255, 244, 215, 0.86) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  box-shadow: none !important;
}

.pricing-table__widget[data-card-screen="initial"] .pricing-table__secondary-button:hover {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(215, 188, 124, 0.46) !important;
}

.pricing-table__widget[data-card-screen="initial"] button:active {
  transform: translateY(0) scale(0.985) !important;
}

.pricing-table__widget[data-card-screen="initial"] button:focus-visible {
  outline: 2px solid var(--c-gold, #d7bc7c) !important;
  outline-offset: 3px !important;
}

/* Featured card gets a subtle gold-tinted button — the eye should
   land here, but we don't loud-yellow-fill it (that breaks the
   "white = primary action" hierarchy across the rest of the app). */
.pricing-table__card[data-pack-featured="true"] .pricing-table__widget[data-card-screen="initial"] button,
.pricing-checkout[data-featured="true"] .pricing-table__widget[data-card-screen="initial"] button {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.72),
    0 14px 36px rgba(215, 188, 124, 0.16),
    0 12px 34px rgba(0, 0, 0, 0.38) !important;
}

.pricing-table__card[data-pack-featured="true"] .pricing-table__widget[data-card-screen="initial"] .pricing-table__secondary-button,
.pricing-checkout[data-featured="true"] .pricing-table__widget[data-card-screen="initial"] .pricing-table__secondary-button {
  box-shadow: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .pricing-table__widget[data-card-screen="initial"] button {
    transition: none !important;
  }
  .pricing-table__widget[data-card-screen="initial"] button:hover {
    transform: none !important;
  }
}

/* Once a buyer chooses a pack, the Thirdweb widget expands from a single
   CTA into an in-card payment flow. Keep that as one focused checkout
   surface instead of leaving the other product cards in a lopsided grid. */
.pricing-table:has(.pricing-table__widget[data-card-screen="flow"]) {
  grid-template-columns: minmax(0, min(100%, 28rem));
  justify-content: center;
  align-items: start;
  padding-top: 18px;
}

.pricing-table:has(.pricing-table__widget[data-card-screen="flow"])
  .pricing-table__card:not(:has(.pricing-table__widget[data-card-screen="flow"])) {
  display: none;
}

.pricing-table__card:has(.pricing-table__widget[data-card-screen="flow"]) {
  width: min(100%, 28rem);
  justify-self: center;
  transform: none;
}

.pricing-table__card:has(.pricing-table__widget[data-card-screen="flow"]) .pricing-table__media,
.pricing-table__card:has(.pricing-table__widget[data-card-screen="flow"]) .pricing-table__copy,
.pricing-table__card:has(.pricing-table__widget[data-card-screen="flow"]) .pricing-table__rips {
  display: none;
}

.pricing-table__card:has(.pricing-table__widget[data-card-screen="flow"]) .pricing-table__head {
  margin-top: 0;
}

.pricing-table__card:has(.pricing-table__widget[data-card-screen="flow"]) .pricing-table__foot {
  gap: 12px;
}

.pricing-table__card:has(.pricing-table__widget[data-card-screen="flow"]) .pricing-table__price {
  font-size: 2rem;
}

.pricing-table__loading,
.pricing-table__error,
.pricing-table__empty {
  margin: 0;
  padding: 22px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.095);
  background:
    radial-gradient(100% 70% at 50% -20%, rgba(215, 188, 124, 0.07), transparent 62%),
    rgba(255, 255, 255, 0.025);
  text-align: center;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-body);
  font-size: 0.86rem;
  line-height: 1.5;
}

.pricing-table__loading {
  display: grid;
  grid-template-columns: minmax(14rem, 0.42fr) minmax(0, 0.58fr);
  gap: 12px 18px;
  min-height: 270px;
  text-align: left;
}

.pricing-table__loading-head,
.pricing-table__loading-row,
.pricing-table__loading-panel {
  display: block;
  border-radius: 14px;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.105) 42%, rgba(255, 255, 255, 0.045) 76%);
  background-size: 220% 100%;
  animation: pricingSkeleton 1.25s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.pricing-table__loading-head {
  height: 52px;
}

.pricing-table__loading-row {
  grid-column: 1;
  height: 68px;
}

.pricing-table__loading-panel {
  grid-column: 2;
  grid-row: 1 / 4;
  min-height: 220px;
}

@keyframes pricingSkeleton {
  from { background-position: 100% 0; }
  to { background-position: -120% 0; }
}

.pricing-table__error {
  border-color: rgba(248, 113, 113, 0.22);
  background: rgba(248, 113, 113, 0.06);
  color: #fca5a5;
}

@media (max-width: 720px) {
  .pricing-table__loading {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .pricing-table__loading-panel {
    grid-column: 1;
    grid-row: auto;
    min-height: 180px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-table__loading-head,
  .pricing-table__loading-row,
  .pricing-table__loading-panel {
    animation: none;
  }
}

/* Tablet — drop to 2 columns. The featured card keeps its scale so
   the user's eye still lands on it; it spans both columns at this
   width to avoid an awkward "lifetime alone on row 2" layout. */
@media (max-width: 960px) {
  .pricing-table {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
  }
  .pricing-table__card[data-pack-featured="true"] {
    grid-column: 1 / -1;
    transform: none;
  }
  .pricing-table__card[data-pack-featured="true"] .pricing-table__media {
    aspect-ratio: 21 / 8;
  }
  .pricing-table__card[data-pack-featured="true"] .pricing-table__foot {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
  }
  .pricing-table__card[data-pack-featured="true"] .pricing-table__widget {
    flex: 0 1 320px;
    min-width: 240px;
  }
  .pricing-table__card[data-pack-featured="true"] .pricing-table__price-block {
    flex: 1 1 auto;
  }
}

/* Phone — single column. Drop the lifetime scale-up + side-by-side
   foot; reads better stacked at narrow widths. */
@media (max-width: 720px) {
  .pricing-table {
    grid-template-columns: 1fr;
    padding: 16px 0 0;
    gap: 22px;
  }
  .pricing-table__card[data-pack-featured="true"] {
    transform: none;
    grid-column: auto;
  }
  .pricing-table__card[data-pack-featured="true"] .pricing-table__foot {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .pricing-table__card[data-pack-featured="true"] .pricing-table__widget {
    min-width: 0;
  }
  .pricing-table__card[data-pack-featured="true"] .pricing-table__media {
    aspect-ratio: 16 / 9;
  }
  .pricing-table__name {
    font-size: 1.4rem;
  }
  .pricing-table__card[data-pack-featured="true"] .pricing-table__name {
    font-size: 1.5rem;
  }
}

/* Compact purchase sheet used by the current Thirdweb bundle. The older
   .pricing-table card-grid rules above remain for cached bundles. */
.pricing-chooser {
  display: grid;
  grid-template-columns: minmax(16.5rem, 0.82fr) minmax(0, 1.18fr);
  align-items: stretch;
  gap: clamp(16px, 2.4vw, 28px);
  padding: 2px;
}

.pricing-chooser__rail,
.pricing-checkout {
  min-width: 0;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.095);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055);
}

.pricing-chooser__rail {
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.014)),
    rgba(8, 8, 10, 0.72);
}

.pricing-chooser__rail-head {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.pricing-chooser__eyebrow,
.pricing-checkout__eyebrow,
.pricing-checkout__rips,
.pricing-checkout__badge,
.pricing-chooser__badge {
  font-family: var(--font-body);
  font-size: 0.66rem;
  font-weight: 650;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.pricing-chooser__eyebrow,
.pricing-checkout__eyebrow {
  color: rgba(215, 188, 124, 0.78);
}

.pricing-chooser__rail-copy {
  max-width: 22rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.52);
  font-family: var(--font-body);
  font-size: 0.84rem;
  line-height: 1.55;
}

.pricing-chooser__options {
  min-width: 0;
  min-inline-size: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0;
  margin: 0;
  border: 0;
}

.pricing-chooser__option {
  position: relative;
  min-width: 0;
  width: 100%;
  min-height: 82px;
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto;
  align-items: center;
  gap: 13px;
  padding: 14px 15px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.075);
  background: rgba(255, 255, 255, 0.025);
  color: rgba(255, 255, 255, 0.76);
  text-align: left;
  cursor: pointer;
  overflow: hidden;
  transition:
    transform 220ms cubic-bezier(0.16, 1, 0.3, 1),
    border-color 220ms cubic-bezier(0.16, 1, 0.3, 1),
    background 220ms cubic-bezier(0.16, 1, 0.3, 1),
    color 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.pricing-chooser__option::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(80% 120% at 0% 0%, rgba(215, 188, 124, 0.12), transparent 55%);
  opacity: 0;
  transition: opacity 220ms cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
}

.pricing-chooser__radio {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}

.pricing-chooser__mark {
  position: relative;
  z-index: 1;
  width: 11px;
  height: 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.018);
}

.pricing-chooser__option:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.04);
  color: rgba(255, 255, 255, 0.95);
}

.pricing-chooser__option:hover::before,
.pricing-chooser__option[data-selected="true"]::before {
  opacity: 1;
}

.pricing-chooser__option:has(.pricing-chooser__radio:focus-visible) {
  outline: 2px solid rgba(215, 188, 124, 0.62);
  outline-offset: 3px;
}

.pricing-chooser__option[data-selected="true"] {
  border-color: rgba(215, 188, 124, 0.38);
  background: rgba(215, 188, 124, 0.075);
  color: rgba(255, 255, 255, 0.96);
}

.pricing-chooser__option[data-selected="true"] .pricing-chooser__mark {
  border-color: rgba(215, 188, 124, 0.94);
  background: var(--accent-gold, #d7bc7c);
  box-shadow: 0 0 0 4px rgba(215, 188, 124, 0.12);
}

.pricing-chooser__option-main {
  position: relative;
  z-index: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.pricing-chooser__name-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.pricing-chooser__option-name {
  min-width: 0;
  color: rgba(255, 255, 255, 0.94);
  font-family: var(--font-body);
  font-size: 0.94rem;
  font-weight: 650;
  letter-spacing: -0.004em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pricing-chooser__badge,
.pricing-checkout__badge {
  flex: 0 0 auto;
  padding: 4px 7px 3px;
  border-radius: 999px;
  border: 1px solid rgba(215, 188, 124, 0.25);
  background: rgba(215, 188, 124, 0.07);
  color: rgba(215, 188, 124, 0.86);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
}

.pricing-chooser__option-copy {
  color: rgba(255, 255, 255, 0.50);
  font-family: var(--font-body);
  font-size: 0.80rem;
  line-height: 1.42;
  overflow-wrap: anywhere;
}

.pricing-chooser__option-price {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  color: rgba(255, 255, 255, 0.90);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 650;
  font-feature-settings: "tnum" 1;
}

.pricing-checkout {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: clamp(20px, 3vw, 26px);
  background:
    radial-gradient(105% 72% at 100% -10%, rgba(215, 188, 124, 0.105), transparent 64%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.012)),
    rgba(9, 9, 11, 0.86);
}

.pricing-checkout[data-featured="true"] {
  border-color: rgba(215, 188, 124, 0.24);
}

.pricing-checkout__summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 10px 22px;
  align-items: start;
}

.pricing-checkout__topline {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.pricing-checkout__name {
  min-width: 0;
  margin: 0;
  color: rgba(255, 255, 255, 0.97);
  font-family: var(--font-display, 'Iowan Old Style', 'Palatino', Georgia, serif);
  font-size: clamp(1.7rem, 3vw, 2.35rem);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.008em;
}

.pricing-checkout__rips {
  grid-column: 1 / -1;
  margin: -2px 0 0;
  color: rgba(215, 188, 124, 0.62);
}

.pricing-checkout .pricing-table__copy {
  grid-column: 1 / -1;
  max-width: 52ch;
  margin-top: 2px;
  overflow-wrap: anywhere;
}

.pricing-checkout__facts {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 6px 0 0;
  padding: 1px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.075);
  overflow: hidden;
}

.pricing-checkout__fact {
  min-width: 0;
  padding: 12px 13px;
  background: rgba(5, 5, 5, 0.46);
}

.pricing-checkout__fact dt {
  margin: 0 0 5px;
  color: rgba(255, 255, 255, 0.40);
  font-family: var(--font-body);
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.pricing-checkout__fact dd {
  margin: 0;
  color: rgba(255, 255, 255, 0.90);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pricing-checkout .pricing-table__price-block {
  grid-column: 2;
  grid-row: 2 / 5;
  align-items: flex-end;
  text-align: right;
}

.pricing-checkout .pricing-table__price {
  font-size: clamp(2.25rem, 5vw, 3.3rem);
  color: rgba(255, 255, 255, 0.97);
}

.pricing-checkout[data-featured="true"] .pricing-table__price {
  color: var(--accent-gold, #d7bc7c);
}

.pricing-checkout__action {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.pricing-checkout__trust {
  margin: 0;
  color: rgba(255, 255, 255, 0.54);
  font-family: var(--font-body);
  font-size: 0.83rem;
  line-height: 1.48;
}

.pricing-checkout__email-warning {
  border: 1px solid rgba(215, 188, 124, 0.5);
  border-radius: 8px;
  padding: 12px 14px;
  background: rgba(215, 188, 124, 0.11);
  color: rgba(255, 244, 215, 0.98);
  font-size: 0.88rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pricing-checkout .pricing-table__widget {
  margin-top: 0;
}

.pricing-checkout .pricing-table__widget[data-card-screen="flow"] {
  margin-top: 0;
}

@media (max-width: 900px) {
  .pricing-chooser {
    grid-template-columns: 1fr;
  }
  .pricing-chooser__rail {
    padding: 16px;
  }
  .pricing-chooser__options {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  }
  .pricing-chooser__option {
    grid-template-columns: 12px minmax(0, 1fr);
    align-items: start;
  }
  .pricing-chooser__option-price {
    grid-column: 2;
    justify-self: start;
  }
}

@media (max-width: 640px) {
  .buy-modal {
    align-items: flex-end;
    padding: 16px 0 0;
    padding-bottom: 0;
  }
  .buy-modal__panel {
    width: calc(100vw - 20px);
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 16px);
    overflow-x: hidden;
    padding: 24px 16px max(18px, env(safe-area-inset-bottom));
    border-radius: 24px 24px 0 0;
  }
  .buy-modal__panel::after {
    content: '';
    position: absolute;
    top: 9px;
    left: 50%;
    width: 38px;
    height: 4px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
    transform: translateX(-50%);
  }
  .buy-modal__close {
    top: 14px;
    right: 12px;
  }
  .buy-modal__eyebrow {
    min-height: 23px;
    margin-bottom: 8px;
    padding-inline: 9px;
    font-size: 0.58rem;
    letter-spacing: 0.13em;
  }
  .buy-modal__title {
    font-size: clamp(1.6rem, 8vw, 1.95rem);
  }
  .buy-modal__sub {
    margin-bottom: 16px;
    padding-right: 38px;
    font-size: 0.86rem;
    line-height: 1.5;
  }
  .buy-modal__status {
    align-items: stretch;
    flex-direction: column;
  }
  .buy-modal__status-action {
    width: 100%;
    justify-content: center;
  }
  .pricing-chooser__options {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .pricing-chooser__rail {
    gap: 12px;
    padding: 14px;
    border-radius: 19px;
  }
  .pricing-chooser__rail-copy {
    font-size: 0.80rem;
    line-height: 1.45;
  }
  .pricing-chooser__option {
    min-height: 68px;
    gap: 10px;
    padding: 11px 12px;
    border-radius: 14px;
  }
  .pricing-chooser__name-row {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .pricing-chooser__option-name {
    font-size: 0.88rem;
    white-space: normal;
  }
  .pricing-chooser__option-copy,
  .pricing-checkout__trust {
    font-size: 0.80rem;
    line-height: 1.42;
  }
  .pricing-chooser__option-price {
    font-size: 0.94rem;
  }
  .pricing-checkout {
    gap: 12px;
    padding: 16px;
    border-radius: 20px;
  }
  .pricing-checkout__summary {
    grid-template-columns: 1fr;
    gap: 8px;
  }
  .pricing-checkout__topline {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }
  .pricing-checkout__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 2px;
  }
  .pricing-checkout__fact {
    padding: 10px 9px;
  }
  .pricing-checkout__fact dt {
    font-size: 0.56rem;
    letter-spacing: 0.11em;
  }
  .pricing-checkout__fact dd {
    font-size: 0.78rem;
  }
  .pricing-checkout .pricing-table__copy {
    display: none;
  }
  .pricing-checkout .pricing-table__price-block {
    grid-column: 1;
    grid-row: auto;
    align-items: flex-start;
    text-align: left;
  }
  .pricing-checkout__action {
    gap: 9px;
    padding-top: 12px;
  }
  .pricing-table__widget[data-card-screen="initial"] button {
    min-height: 50px !important;
  }
}

/* Out-of-credits inline pricing surface — shown on the home page when
   a signed-in user runs out of credits mid-flow. The .out-of-credits
   panel itself lives in app.css; these are the pieces unique to the
   inline-pricing variant. */
.out-of-credits__pricing {
  /* The OOC panel auto-widens when this block is visible (see
     `.out-of-credits:has(.out-of-credits__pricing:not([hidden]))` in
     app.css). Inline-pricing-on-home uses the same 3-up grid as the
     /account modal — same media-query breakpoints flow through. */
  width: 100%;
  margin-top: 8px;
}
.out-of-credits__pricing[hidden] { display: none; }

.out-of-credits__copy--quiet {
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.82rem;
  margin: 0;
}

.out-of-credits__cancel {
  margin-top: 4px;
  padding: 8px 14px;
  background: transparent;
  border: 0;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-body);
  font-size: 0.82rem;
  cursor: pointer;
  letter-spacing: 0.01em;
  transition: color 160ms ease;
}
.out-of-credits__cancel:hover {
  color: #ffffff;
}
.out-of-credits__cancel:focus-visible {
  outline: 2px solid rgba(215, 188, 124, 0.6);
  outline-offset: 2px;
  border-radius: 6px;
}

/* `.visually-hidden` is defined in app.css (used for input labels in the
   lead modal). The live-region status announcer injected at runtime by
   account.js reuses that class — no duplicate rule needed here. */