/* ===========================================================================
   Billing - pricing section, credits upsell, payment success.

   The pricing section's structure, the animated monthly/annual toggle, the
   cursor-follow card glow and the attention-pulse hint are ported from
   ../thesisai's landing.css (.pricing-section / .pc-*), then restyled onto
   siriusly's dark orange/black tokens. thesisai inverts its "Pro" card to dark
   on a light page; siriusly is already dark, so the featured card inverts the
   other way - a warm orange-lit surface against the coal cards.

   bl- classes below are the standalone billing pages (credits, success).
   =========================================================================== */

/* ---- Pricing section --------------------------------------------------- */
.pricing-section {
  width: 100%;
  padding: var(--space-24, 6rem) var(--space-8, 2rem) var(--space-20, 5rem);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.pricing-inner {
  width: 100%;
  /* 1160 rather than the design's 1080: three columns then leave each card
     ~327px of inner width, which is what keeps the price row on one line at
     the very top of Scale's slider ("$1,714.29 /month billed annually" needs
     319). Anything narrower and that one position wraps. */
  max-width: 1160px;
}
.pricing-head {
  text-align: center;
  margin-bottom: var(--space-12, 3rem);
}
.pricing-headline {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -0.022em;
  color: var(--text-strong, #fff);
  margin: 0 0 0.75rem;
}
.pricing-headline em {
  font-style: italic;
  font-weight: 400;
  /* Signature orange->gold, the same treatment the hero uses for brand moments */
  background: linear-gradient(100deg, var(--orange-400, #E29D6B), var(--gold-400, #F4B72E));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--gold-400, #F4B72E);
}
.pricing-subhead {
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--text-body, #D8D3C9);
  max-width: 40rem;
  margin: 0 auto;
}

/* Billing toggle */
.pricing-controls {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-12, 2.75rem);
}
.pc-toggle {
  display: inline-flex;
  align-items: center;
  position: relative;
  padding: 5px;
  border-radius: var(--radius-pill, 999px);
  background: var(--surface-card, #1C1A17);
  border: 1px solid var(--border-subtle, #262320);
  font-size: 0.94rem;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}
.pc-toggle button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.7rem 1.4rem;
  border: none;
  border-radius: var(--radius-pill, 999px);
  background: transparent;
  color: var(--text-muted, #8A8379);
  font: inherit;
  cursor: pointer;
  transition: color 180ms ease;
}
.pc-toggle button.active { color: var(--text-on-brand, #14120F); }
.pc-thumb {
  position: absolute;
  top: 5px;
  bottom: 5px;
  z-index: 0;
  border-radius: var(--radius-pill, 999px);
  background: var(--orange-500, #D07E45);
  box-shadow: 0 2px 8px rgba(208, 126, 69, 0.4);
  transition: left 240ms cubic-bezier(.2,.7,.2,1), width 240ms cubic-bezier(.2,.7,.2,1);
}
/* The one-time "this slides" nudge. It has to move toward the button the thumb
   is NOT on, so the direction follows whichever side the toggle opens on rather
   than being fixed: the pricing section sets --pc-hint-dx from that (see
   playHint in _pricing_section.html). The default here is the monthly default's
   direction - rightwards, since the thumb starts on the left-hand button.
   translateX, not left, so this never fights the left/width transition the
   thumb uses to actually move between buttons. */
.pc-thumb.pc-hint { animation: pcThumbHint 1.1s cubic-bezier(.2,.7,.2,1) 1; }
@keyframes pcThumbHint {
  0%   { transform: translateX(0); }
  35%  { transform: translateX(var(--pc-hint-dx, 42px)); }
  70%  { transform: translateX(0); }
  100% { transform: translateX(0); }
}
.pc-toggle.pc-attn { animation: pcTogglePulse 1.4s ease-out 3; }
@keyframes pcTogglePulse {
  0%   { box-shadow: 0 2px 10px rgba(0,0,0,0.3), 0 0 0 0 rgba(208,126,69,0.45); }
  60%  { box-shadow: 0 2px 10px rgba(0,0,0,0.3), 0 0 0 12px rgba(208,126,69,0); }
  100% { box-shadow: 0 2px 10px rgba(0,0,0,0.3), 0 0 0 0 rgba(208,126,69,0); }
}
@media (prefers-reduced-motion: reduce) {
  .pc-thumb.pc-hint, .pc-toggle.pc-attn { animation: none; }
  .pc-thumb { transition: none; }
}
.pc-save-badge {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 0.25rem 0.6rem;
  border-radius: var(--radius-pill, 999px);
  background: var(--gold-400, #F4B72E);
  color: var(--coal-950, #14120F);
}

/* ---- Plan cards ---------------------------------------------------------
   Three tiers side by side. Creator is the featured card and inverts to a warm
   orange-lit dark surface in both themes (see .pc-pro below), so its own ink is
   set explicitly rather than read off --text-*, which flips with the theme. */
.pc-plans {
  display: grid;
  /* Three across on a full row, but the track has a floor rather than being a
     bare 1fr: .pc-price-meta's annual line never wraps, so a column narrower
     than this would push "Billed $1,028.57/yr - cancel anytime" out past the
     card's edge. Below that the grid drops to two columns on its own, well
     before anything overflows. */
  grid-template-columns: repeat(auto-fit, minmax(21rem, 1fr));
  gap: 1.1rem;
  align-items: stretch;
}

.pc-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1.6rem 1.5rem 1.5rem;
  border-radius: var(--radius-card, 1rem);
  background: var(--surface-card, #1C1A17);
  border: 1px solid var(--border-subtle, #262320);
  box-shadow: var(--shadow-sm);
  transition: transform 320ms cubic-bezier(.2,.7,.2,1), box-shadow 320ms ease, border-color 320ms ease;
  will-change: transform;
}
.pc-card::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(208,126,69,0.14), transparent 55%);
  transition: opacity 320ms ease;
}
.pc-card > * { position: relative; z-index: 1; }
.pc-card:hover {
  transform: translateY(-6px);
  border-color: var(--border-strong, #4A453E);
  box-shadow: var(--shadow-lg);
}
.pc-card:hover::before { opacity: 1; }

/* Featured (Creator) card - warm orange-lit surface, dark in both themes */
.pc-card.pc-pro {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(208,126,69,0.12), transparent 60%),
    var(--coal-800, #262320);
  border-color: rgba(208,126,69,0.45);
  box-shadow: 0 28px 64px rgba(0,0,0,0.28);
}
.pc-card.pc-pro::before {
  background: radial-gradient(420px circle at var(--mx,50%) var(--my,0%), rgba(244,183,46,0.16), transparent 55%);
}
.pc-card.pc-pro:hover {
  border-color: rgba(244,183,46,0.55);
  box-shadow: 0 32px 72px rgba(0,0,0,0.34), 0 0 0 1px rgba(244,183,46,0.28);
}

/* Metered (Scale) card - the discount is real, so the card is called out too,
   just without taking the featured card's inverted surface. */
.pc-card[data-metered] { border-color: rgba(208,126,69,0.45); box-shadow: var(--shadow-md); }

.pc-badge {
  position: absolute;
  top: -0.7rem;
  left: 1.5rem;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.32rem 0.7rem;
  border-radius: var(--radius-pill, 999px);
  background: var(--gold-400, #F4B72E);
  color: var(--coal-950, #14120F);
}

.pc-card-tag {
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary-text, #EEB88F);
  margin: 0 0 0.4rem;
}
.pc-card.pc-pro .pc-card-tag { color: var(--orange-300, #EEB88F); }

.pc-tier-name {
  font-family: var(--font-display);
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: -0.015em;
  color: var(--text-strong, #fff);
}
.pc-card.pc-pro .pc-tier-name { color: var(--white, #fff); }

.pc-tagline {
  font-size: 0.85rem;
  line-height: 1.5;
  color: var(--text-muted, #8A8379);
  /* Two lines' worth, so the price rows line up across cards whose taglines
     wrap differently. */
  min-height: 2.55rem;
  margin: 0.35rem 0 1.15rem;
}
.pc-card.pc-pro .pc-tagline { color: var(--coal-400, #8A8379); }

/* Wraps as a row, never inside the period label (see .pc-period): on a card
   whose amount runs to "1,714.29" the label drops whole to the next line
   rather than breaking "/month billed annually" across two. */
.pc-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.3rem; }
.pc-symbol { font-size: 1.1rem; font-weight: 500; color: var(--text-muted, #8A8379); }
.pc-amount {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 2.6rem;
  line-height: 1;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--text-strong, #fff);
  transition: transform 320ms cubic-bezier(.2,.7,.2,1), letter-spacing 320ms ease;
}
.pc-card:hover .pc-amount { transform: translateY(-1px); letter-spacing: -0.032em; }
/* The annual label ("/month billed annually") stays on one line - a hair
   smaller than the monthly one would need to be, so it still fits beside the
   figure rather than being broken up. It is part of the price statement, not
   a footnote to it - "62.10" means nothing without it - so it is held to the
   same contrast as the struck figure in .pc-price-meta below rather than to
   the dimmest text token. */
.pc-period {
  align-self: center;
  white-space: nowrap;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--text-muted, #8A8379);
}
.pc-card.pc-pro .pc-symbol { color: var(--coal-400, #8A8379); }
.pc-card.pc-pro .pc-amount { color: var(--white, #fff); }
/* Matches .pc-card.pc-pro .pc-price-meta: on the dark card the subtle token
   is #5F5950, which all but disappears against the near-black surface. */
.pc-card.pc-pro .pc-period { color: var(--coal-300, #B4ADA2); }

.pc-price-meta {
  display: flex;
  align-items: center;
  /* One line, always. The annual form is the long one - "$95.24 Billed
     $1,028.57/yr - cancel anytime" - and at a third of a 1080px row it only
     clears the card's inner width in mono at this size, so the size is load
     bearing rather than taste. */
  flex-wrap: nowrap;
  white-space: nowrap;
  gap: 0.35rem;
  /* Reserved whether or not the strike is showing, so the monthly/annual
     toggle never shifts the card's layout under the cursor. */
  min-height: 1.1rem;
  margin: 0.45rem 0 1.15rem;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  color: var(--text-subtle, #5F5950);
}
.pc-strike { text-decoration: line-through; text-decoration-color: rgba(138,131,121,0.5); }
.pc-saved { color: var(--gold-600, #CE8A12); }
.pc-card.pc-pro .pc-price-meta { color: var(--coal-300, #B4ADA2); }
.pc-card.pc-pro .pc-strike { text-decoration-color: rgba(216,211,201,0.55); }
.pc-card.pc-pro .pc-saved { color: var(--gold-400, #F4B72E); }

/* Credits panel. Fixed plans state their allowance; Scale carries the slider
   that sets it, so both shapes are held to the same height and the cards below
   them stay aligned. */
.pc-credits {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.7rem 0.85rem;
  min-height: 5.6rem;
  border-radius: var(--radius-md, 0.625rem);
  background: var(--surface-sunken, #14120F);
  margin-bottom: 1.15rem;
  font-size: 0.8rem;
  color: var(--text-muted, #8A8379);
}
.pc-credits-value {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--color-primary, #D07E45);
}
.pc-card.pc-pro .pc-credits { background: rgba(255,255,255,0.06); color: var(--coal-400, #8A8379); }
.pc-card.pc-pro .pc-credits-value { color: var(--gold-400, #F4B72E); }

.pc-credits-slider {
  display: block;
  padding: 0.75rem 0.85rem 0.55rem;
  box-sizing: border-box;
}
.pc-credits-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.45rem;
}
.pc-credits-head label { cursor: pointer; }

.pc-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: var(--radius-pill, 999px);
  background: var(--border-default, #4A453E);
  outline: none;
  cursor: pointer;
}
.pc-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary, #D07E45);
  border: none;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.pc-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--color-primary, #D07E45);
  border: none;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}
.pc-slider:focus-visible::-webkit-slider-thumb,
.pc-slider:focus-visible::-moz-range-thumb { box-shadow: var(--ring-focus); }

.pc-ticks {
  display: flex;
  justify-content: space-between;
  margin-top: 0.3rem;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  color: var(--text-subtle, #5F5950);
}

.pc-features {
  list-style: none;
  padding: 0;
  /* flex:1 with justify-content:flex-end pins the CTA to the card's bottom edge
     across cards with differently sized perk lists. */
  margin: 0 0 1.35rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 0.6rem;
  flex: 1;
}
.pc-features li {
  display: flex;
  flex: none;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--text-body, #D8D3C9);
  transition: transform 220ms cubic-bezier(.2,.7,.2,1);
}
.pc-card:hover .pc-features li { transform: translateX(2px); }
.pc-card.pc-pro .pc-features li { color: var(--coal-200, #D8D3C9); }
.pc-check {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 1px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-soft, rgba(208,126,69,0.16));
  color: var(--color-primary-text, #EEB88F);
  transition: transform 220ms cubic-bezier(.2,.7,.2,1);
}
.pc-card.pc-pro .pc-check { background: rgba(244,183,46,0.18); color: var(--gold-400, #F4B72E); }
.pc-card:hover .pc-features li:hover .pc-check { transform: scale(1.15) rotate(-6deg); }

.pc-cta {
  margin-top: auto;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem 1.1rem;
  font: 600 0.9rem/1 var(--font-body);
  border-radius: var(--radius-md, 0.75rem);
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--border-strong, #4A453E);
  color: var(--text-strong, #fff);
  transition: background 200ms ease, border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.pc-cta:hover { background: var(--surface-hover, #34302B); border-color: var(--text-muted, #8A8379); }
.pc-card[data-metered] .pc-cta {
  background: var(--color-primary, #D07E45);
  border-color: var(--color-primary, #D07E45);
  color: var(--text-on-brand, #14120F);
}
.pc-card[data-metered] .pc-cta:hover { background: var(--color-primary-hover, #B4652F); }
.pc-cta-brand {
  background: var(--orange-500, #D07E45);
  border-color: var(--orange-500, #D07E45);
  color: var(--coal-950, #14120F);
}
.pc-cta-brand:hover {
  background: var(--orange-400, #E29D6B);
  border-color: var(--orange-400, #E29D6B);
  box-shadow: 0 8px 22px rgba(208,126,69,0.3);
}
.pc-cta[disabled] { opacity: 0.5; cursor: not-allowed; }
/* .pc-cta keeps the margin-top:auto, so button and note are pushed to the
   card's bottom as a pair and the three cards' buttons stay on one line. */
.pc-cta-note {
  margin: 0.55rem 0 0;
  text-align: center;
  font-size: 0.72rem;
  color: var(--text-muted, #8A8379);
}
/* Same reason .pc-period carries this override: on the near-black card the
   subtle token is #5F5950 and the line all but vanishes. */
.pc-card.pc-pro .pc-cta-note { color: var(--coal-300, #B4ADA2); }
/* The $1 trial's "what you get" line, between the button and the note above.
   Reads as the payoff rather than as fine print, so it takes the card's own
   accent instead of the muted token both neighbours use. */
.pc-trial-line {
  margin: 0.55rem 0 0;
  text-align: center;
  font-size: 0.76rem;
  font-weight: 500;
  color: var(--color-primary, #D07E45);
}
.pc-card.pc-pro .pc-trial-line { color: var(--gold-400, #F4B72E); }
.pc-trial-line + .pc-cta-note { margin-top: 0.3rem; }
.pc-arrow { transition: transform 180ms ease; }
.pc-cta:hover .pc-arrow { transform: translateX(3px); }

.pc-fine {
  margin: 1.5rem auto 0;
  text-align: center;
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-subtle, #5F5950);
}
.pc-fine a { color: var(--color-primary-text, #EEB88F); text-decoration: underline; text-underline-offset: 2px; }
.pc-fine a:hover { color: var(--color-primary, #D07E45); }

.pc-checkout-error {
  margin: 1rem auto 0;
  max-width: 32rem;
  text-align: center;
  font-size: 0.9rem;
  color: var(--color-danger, #E86A5A);
}

/* Invite gate - only rendered while checkout is invite-only. */
.pc-invite {
  margin: 2rem auto 0;
  max-width: 22rem;
  text-align: center;
}
.pc-invite label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-subtle, #5F5950);
  margin-bottom: 0.5rem;
}
.pc-invite input {
  width: 100%;
  padding: 0.7rem 0.9rem;
  border-radius: var(--radius-md, 0.625rem);
  border: 1px solid var(--border-default, #4A453E);
  background: var(--surface-card, #1C1A17);
  color: var(--text-strong, #fff);
  font: inherit;
  font-size: 0.92rem;
  text-align: center;
}
.pc-invite input::placeholder { color: var(--text-muted, #8A8379); }
.pc-invite input:focus {
  outline: none;
  border-color: var(--color-primary, #D07E45);
  box-shadow: var(--ring-focus);
}
.pc-invite-hint {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
  color: var(--text-subtle, #5F5950);
}

.pc-social-proof {
  margin-top: 3.5rem;
  padding: 1.4rem 0;
  border-top: 1px solid var(--border-subtle, #262320);
  border-bottom: 1px solid var(--border-subtle, #262320);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
}
.pc-sp-label {
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-subtle, #5F5950);
}
.pc-sp-logos { display: flex; align-items: center; gap: 2.25rem; flex-wrap: wrap; }
.pc-uni {
  font-family: var(--font-display);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text-muted, #8A8379);
  opacity: 0.8;
}

/* One column below the nav's own collapse point (navbar.css), rather than this
   section's previous 720px. */
@media (max-width: 760px) {
  .pricing-section { padding: 4.5rem 18px 3.5rem; }
  .pc-plans { grid-template-columns: 1fr; gap: 1.6rem; }
  .pc-card { padding: 1.5rem 1.25rem; }
  .pc-tagline { min-height: 0; }
  .pc-social-proof { flex-direction: column; gap: 1rem; }
}


/* ---- Payment success ----------------------------------------------------
   A spinner and nothing else - the page is a pixel-firing interstitial that
   redirects to the studio, not something anyone is meant to read. */
.bl-success {
  display: grid;
  place-items: center;
  min-height: 70vh;
  padding: var(--space-16, 4rem) var(--space-5, 1.5rem);
}

/* billing-page is this page alone: nothing below the spinner is worth reading
   in the two seconds before the redirect. */
body.billing-page .lp-footer { display: none; }

.bl-success-spinner {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  /* Tinted orange rather than --border-subtle, which is near-invisible against
     the light-theme page background. */
  border: 3px solid rgba(208, 126, 69, 0.22);
  border-top-color: var(--orange-500, #D07E45);
  animation: blSpin 0.8s linear infinite;
}

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


/* ---- Trial refused notice ----------------------------------------------
   The other branch of the same page (billing/payment_success.html): a repeat
   trial claim that trial_guard cancelled and refunded. It is the one state
   here anyone is meant to read, so it gets a card of its own rather than the
   bare centred text it used to be - sized to the sentence, not to the screen.

   Built entirely from tokens/*.css, so it flips with the theme like every
   other surface in the app. */
.bl-notice {
  width: min(34rem, 100%);
  padding: var(--space-8) var(--space-8) var(--space-6);
  text-align: left;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-md);
  animation: bl-notice-in var(--duration-slow) var(--ease-out) both;
}

@keyframes bl-notice-in {
  from { opacity: 0; transform: translateY(8px); }
}

.bl-notice-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: var(--space-5);
  border-radius: var(--radius-pill);
  background: var(--color-primary-soft);
  color: var(--color-primary-text);
}

.bl-notice-eyebrow {
  margin: 0 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-subtle);
}

.bl-notice-title {
  margin: 0 0 var(--space-3);
  font-family: var(--font-display);
  font-size: var(--text-heading-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--text-strong);
}

.bl-notice-body {
  margin: 0 0 var(--space-6);
  font-size: var(--text-body-md);
  line-height: var(--leading-relaxed);
  color: var(--text-body);
}

/* The refund, set as the receipt line it is: label, leader, amount, stamp.
   Mono throughout - the same face the account page uses for its meta labels -
   so the figure reads as a record of a transaction rather than a price being
   quoted back to someone who has just been told no. */
.bl-refund {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: baseline;
  gap: var(--space-2) var(--space-3);
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background: var(--surface-sunken);
}

.bl-refund-label {
  font-family: var(--font-mono);
  font-size: var(--text-caption);
  color: var(--text-muted);
}

/* Carries the free space between the line item and its amount, and draws the
   dotted rule across it - the leader does the column's job, not just a
   decoration sitting in it. */
.bl-refund-leader {
  align-self: center;
  border-bottom: 1px dotted var(--border-strong);
  opacity: 0.65;
}

.bl-refund-amount {
  font-family: var(--font-mono);
  font-size: var(--text-body-md);
  font-weight: var(--weight-bold);
  color: var(--text-strong);
}

.bl-refund-state {
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: var(--status-success-soft);
  color: var(--status-success);
  font-family: var(--font-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.bl-refund-note {
  grid-column: 1 / -1;
  margin: 0;
  font-size: var(--text-caption);
  line-height: var(--leading-normal);
  color: var(--text-muted);
}

.bl-notice-cta {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  padding: 11px 20px;
  border-radius: var(--radius-pill);
  background: var(--color-primary);
  color: var(--text-on-brand);
  font-size: var(--text-body-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: var(--transition-control);
}

.bl-notice-cta:hover {
  background: var(--color-primary-hover);
  color: var(--text-on-brand);
  transform: translateY(-1px);
}

.bl-notice-cta:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

.bl-notice-cta svg { transition: transform var(--duration-fast) var(--ease-standard); }
.bl-notice-cta:hover svg { transform: translateX(2px); }

@media (max-width: 30rem) {
  .bl-notice { padding: var(--space-6) var(--space-5); }
  /* The stamp drops under the line rather than squeezing the amount. */
  .bl-refund { grid-template-columns: auto 1fr auto; }
  .bl-refund-state { grid-column: 1 / -1; justify-self: start; }
  .bl-notice-cta { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .bl-notice { animation: none; }
  .bl-notice-cta:hover { transform: none; }
  .bl-notice-cta:hover svg { transform: none; }
}