/* Top-level container holding checkout UI.  Inter is loaded with
   weights 400/500/600/700 in checkout.ejs so descendants pick the
   weight they need for type hierarchy without per-element font-family
   declarations. */
.checkout-form-card {
  padding: 13px;
  background: #f8faf7;
  box-shadow:
    0px 2px 4px rgba(58, 68, 69, 0.08),
    0px 4px 12px rgba(58, 68, 69, 0.12);
  display: flex;
  flex-direction: column;
  gap: 20px;
  border-radius: 8px;
  font-family: 'Inter', sans-serif;
  color: #1b5035;
}

/* Horizontally-scrolling carousel in CSS. */
.carousel {
  display: flex;
  gap: 4vw;
  container-type: inline-size;
  scrollbar-width: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  anchor-name: --carousel;
  align-items: center;
  margin: 0;
  padding: 0;
}

/* Three-column grid: back button anchors col 1, pager always sits
   centered in col 2, col 3 is an empty phantom that balances col 1
   so the pager stays centered regardless of whether the back button
   is `display: none` (step 1) or visible (steps 2/3).  Explicit
   grid-column assignments below prevent auto-placement from
   re-flowing the pager into col 1 when the back button collapses. */
.carousel-controls-container {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  container-type: inline-size;
}

.carousel-control {
  background-color: rgb(221, 227, 223);
  color: rgb(108, 121, 147);
  width: 36px;
  height: 36px;
  outline: none;
  border: none;
  border-radius: 50%;
  transition: all 0.3s ease;
  display: flex;
  justify-content: center;
  align-items: center;
}

.carousel-back-button {
  grid-column: 1;
  justify-self: start;
}

.carousel-pager {
  grid-column: 2;
}

.carousel-back-button:hover:not([disabled]) {
  filter: brightness(50%);
}

.carousel-back-button:disabled {
  filter: brightness(150%);
  filter: contrast(50%);
  cursor: not-allowed;
}

/* Collapses the controls row entirely when nothing in it is visible
   (e.g. step 1, where the back button is hidden and only the dot
   pager remains — keeping `visibility: hidden` would have reserved
   ~36px of back-button placeholder height). */
.carousel-control-hidden {
  display: none;
}

.carousel-control-removed {
  display: none;
}

.carousel-pager-item {
  font-size: 16px;
  font-family: 'Inter', sans-serif;
}

.carousel-pager {
  display: flex;
  gap: 8px;
}

.carousel-pager-item-current {
  color: #fee;
  background-color: #2c8658;
}

.carousel-item {
  list-style-type: none;
  flex: 0 0 100%;
  scroll-snap-align: center;
}

.checkout-input-container {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 1.25rem;
}

/* Stack name and email on phones so each input keeps the form's
   full width (~300-360px in typical iframe embeds), which gives
   long localized labels — e.g. pt_BR's "E-mail (para recibo e
   atualizações)" — room to render without being clipped against
   the right edge of a half-width input.  Switch to side-by-side
   on wider embeds where each half-width slot is still ~350px+. */
.checkout-input-row {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@container (min-width: 600px) {
  .checkout-input-row {
    flex-direction: row;
  }
}

.checkout-input-group {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  /* Establishes this element as a containment context so descendants
     can use `cqi` units to scale with the input's own width — not
     the viewport width, which can be much larger when the inputs
     are stacked side-by-side in a narrow embed. */
  container-type: inline-size;
}

/* Person / envelope glyphs that sit inside the name and email fields.
   Vertically centered against the input's fixed 52px height (26px =
   half), not the group's, so trailing in-flow content — the
   email-suggestion hint — can grow the group without dragging the
   icon below the input's center.  Color matches the resting label
   tone; the parent `:focus-within` selector below brightens icon and
   border together when the user is editing. */
.checkout-input-icon {
  position: absolute;
  top: 26px;
  left: 0.875rem;
  transform: translateY(-50%);
  color: #739281;
  pointer-events: none;
  transition: color 0.2s ease;
}

.checkout-input-group:focus-within .checkout-input-icon {
  color: #2c8658;
}

/* Floating-label pattern: the label sits centered over the empty
   input so it doubles as a placeholder (paired with the centered
   icon), then animates up to a compact caption when the input is
   focused or non-empty.  Detection uses `:placeholder-shown`, which
   works because every input below carries `placeholder=" "` (a
   single space) so the pseudo-class flips on the first character
   typed and the label rides up.

   `left: calc(2.625rem + 1px)` aligns the label's left edge with
   where the input's text rendering actually starts: the input has
   `padding-left: 2.625rem` plus a 1px border, so its content edge
   is 1px right of the input-group's box.

   Font-size in both states is a `clamp()` so the longest label
   ("Email (for receipt & updates)") scales down on narrow viewports
   without needing an ellipsis.  Both name and email inputs share
   this class so they always render at the same size. */
.checkout-input-label {
  position: absolute;
  /* 26px = half the input's fixed 52px height — anchored to the input
     rather than `50%` of the group for the same reason as the icon. */
  top: 26px;
  left: calc(2.625rem + 1px);
  transform: translateY(-50%);
  font-size: clamp(8px, 5cqi, 16px);
  color: #739281;
  pointer-events: none;
  white-space: nowrap;
  transition:
    top 0.15s ease,
    transform 0.15s ease,
    font-size 0.15s ease,
    color 0.15s ease;
}

.checkout-input-field:focus + .checkout-input-label,
.checkout-input-field:not(:placeholder-shown) + .checkout-input-label {
  top: 0.4rem;
  transform: translateY(0);
  font-size: clamp(8px, 3.75cqi, 12px);
}

.checkout-input-field:focus + .checkout-input-label {
  color: #2c8658;
}

.checkout-input-field {
  width: 100%;
  padding: 1.1rem 0.75rem 0 2.625rem; /* Extra top padding for the floated label, left padding for the icon */
  border: 1px solid #ccc;
  border-radius: 6px;
  font-size: 16px;
  background: white;
  height: 52px;
  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
  box-sizing: border-box;
}

.checkout-input-field:focus {
  outline: none;
  border-color: #2c8658;
  box-shadow: 0 0 0 3px rgba(44, 134, 88, 0.1);
}

/* Font size matches the compact `.checkout-input-label` state so the
   hint reads as a caption under the email field rather than body text. */
.email-suggestion {
  display: block;
  background: none;
  border: none;
  padding: 0.25cqi 0;
  font-family: 'Inter', sans-serif;
  font-size: clamp(8px, 3.75cqi, 12px);
  color: #2c8658;
  text-decoration: underline;
  cursor: pointer;
  text-align: left;
}

/* `display: block` above outranks the UA stylesheet's
   `[hidden] { display: none }`, so the attribute alone can't hide
   the button (same pitfall as `.sliding-scale-card-info[hidden]`). */
.email-suggestion[hidden] {
  display: none;
}

.checkout-session-container {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: stretch;
  gap: 18px;
}

.line-items-container {
  font-weight: 400;
  font-size: 14px;
  color: #1b5035;
  font-family: 'Inter', sans-serif;
}

.checkout-button-container {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-direction: column;
  /* Mirror the segmented-control's `margin-top: 10px` so the CTA gets
     the same breathing room above it as the Monthly/Yearly toggle —
     the form reads symmetrically and the CTA feels anchored rather
     than crowded against the price cards. */
  margin-top: 10px;
}

/* Secondary links (currency, billing help) sit on a single row below
   the subscribe CTA at normal widths and wrap to two rows on narrow
   carousels.  Kept smaller than the surrounding form text so they
   don't compete with the CTA. */
.checkout-secondary-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  /* Horizontal spacing is handled by the `.actions-separator` middots,
     so only carry a row gap for when the line wraps on narrow widths. */
  gap: 6px 8px;
}

.actions-separator {
  color: #888;
  font-size: 12px;
  user-select: none;
}

/* When a sibling is hidden, suppress the immediately-following separator
   so the row doesn't show an orphan leading/trailing middot. */
.checkout-secondary-actions [hidden] + .actions-separator {
  display: none;
}

/* Discount-code row: chip when applied, expanded input when the user
   clicks the "Use a discount code" link. The link itself now lives in
   `.checkout-secondary-actions` above; this row only holds the chip
   and the input. */
.discount-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.discount-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 16px;
  background: #e8f3ee;
  color: #1a5035;
  font-size: 14px;
  font-weight: 500;
}

.discount-chip[hidden] {
  display: none;
}

.discount-chip-remove {
  background: none;
  border: none;
  color: #1a5035;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  padding: 0 2px;
}

/* Inline link in the secondary-actions row. Matches the visual
   weight of `.billing-help-link` / `.currency-options-link`. */
.discount-have-code {
  background: none;
  border: none;
  cursor: pointer;
  color: #2c8658;
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  text-decoration: underline;
  padding: 0;
}

.discount-have-code[hidden] {
  display: none;
}

.discount-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.discount-input-row[hidden] {
  display: none;
}

/* Wraps the input + a hidden sizing ghost in a 1×1 grid so both
   occupy the same cell. The ghost contains the placeholder text and
   determines the grid cell's intrinsic width; the input stretches to
   fill it. Result: the input width tracks the placeholder per locale
   and stays stable as the user types. */
.discount-input-sizer {
  display: inline-grid;
}

.discount-input-sizer-ghost,
.discount-input-row input {
  grid-area: 1 / 1;
}

.discount-input-sizer-ghost {
  visibility: hidden;
  pointer-events: none;
  white-space: pre;
  /* Match the input's box (padding + border + font) so the rendered
     placeholder width inside the input lines up with the ghost's
     intrinsic width. The border is transparent so the ghost doesn't
     bleed visually. */
  padding: 4px 8px;
  border: 1px solid transparent;
  font-size: 14px;
}

.discount-input-row input {
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  text-transform: uppercase;
  /* Fill the sizer grid cell so the input width = ghost width. */
  width: 100%;
  box-sizing: border-box;
}

/* `text-transform: uppercase` on the input would also upper-case the
   placeholder, which reads as shouty for an empty field. Override on
   the placeholder pseudo so only the user-typed value is upper-cased. */
.discount-input-row input::placeholder {
  text-transform: none;
}

.discount-input-row button {
  padding: 4px 12px;
  border: 1px solid #1a5035;
  border-radius: 4px;
  background: #1a5035;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
}

.discount-input-row button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.discount-error {
  color: #c0392b;
  font-size: 12px;
  margin: 0;
  flex-basis: 100%;
  text-align: center;
}

/* Struck original price next to a larger discounted price. Applied
   server-side via window.__DISCOUNT__ — the client mutates the same
   spans on currency change and on typed-input apply. */
.price-original {
  font-size: 0.6em;
  color: #888;
  margin-right: 6px;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-skip-ink: none;
}

/* The discounted price spans (#monthly-price, #yearly-price, and the
   sliding-scale tier amount) wrap an optional .price-original sibling
   plus the discounted text. Setting these to inline-flex with
   align-items: center makes both the smaller strikethrough span and
   the larger discounted text behave as flex items, which the parent
   `align-items: center` flex container then centers vertically — same
   mechanism that already aligns the /month interval label. */
#monthly-price,
#yearly-price,
.sliding-scale-card-amount {
  display: inline-flex;
  align-items: center;
}

/* Region-specific greeting rendered below the subscribe CTA when the
   visitor's IP matches a configured entry in PROMOTIONS_GEO_BLURBS
   (e.g. the Kamaʻāina blurb for US-HI). Server-side rendered with
   pre-parsed bold marks. */
.geo-blurb {
  margin-top: 12px;
  text-align: center;
  color: #1a5035;
  font-size: 14px;
  line-height: 1.45;
  max-width: 640px;
}

.geo-blurb-line {
  margin: 0;
}

.geo-blurb-line + .geo-blurb-line {
  margin-top: 4px;
}

.geo-blurb-line strong {
  font-weight: 600;
}

/* "Draft" badge rendered above the blurb when the underlying Sanity
   document is from the drafts pool. Only ever surfaces in dev/staging
   (production doesn't stream drafts), so the styling is loud on
   purpose — makes it obvious to internal reviewers that the message
   isn't yet live. */
.geo-blurb-draft-badge {
  display: inline-block;
  margin-bottom: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  background-color: #fef3c7;
  color: #92400e;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

@container (max-width: 600px) {
  .payment-reassurance {
    flex-direction: row;
  }
}

.checkout-button {
  padding: clamp(12px, 2.5vw, 16px) clamp(20px, 5vw, 32px);
  border-radius: 100px;
  border: none;
  font-size: clamp(16px, 6vw, 24px);
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  min-height: 48px;
  width: clamp(33vw, 100%, 500px);
  box-sizing: border-box;
}

.checkout-button:hover {
  filter: brightness(70%);
}

.checkout-button:disabled {
  filter: brightness(150%);
  filter: contrast(50%);
  cursor: not-allowed;
}

.primary-checkout-button {
  background: #ef7047;
  border: 2px solid #ef7047;
  color: white;
  font-weight: 600;
  gap: 2vw;
}

.secondary-checkout-button {
  background-color: rgb(231, 237, 233);
  border: 2px solid rgb(44, 134, 88);
  color: #2c8658;
  font-weight: 500;
  gap: 2vw;
}

.checkout-button-text {
  /* Animate fade to 0 opacity over 0.2 seconds when adding `checkout-loading`. */
  transition: all 0.2s;
}

/* Add `checkout-loading` to show a spinning loading indicator on a `checkout-button`. */
.checkout-loading .checkout-button-text {
  visibility: hidden;
  opacity: 0;
}

.checkout-loading::after {
  content: '';
  /* Lay out the spinner on top of its closest `position: relative` parent. */
  position: absolute;
  width: 16px;
  height: 16px;
  border: 4px solid transparent;
  border-radius: 50%;
  border-top-color: #ffffff;
  animation: rotating 1s ease infinite;
}

@keyframes rotating {
  from {
    transform: rotate(0turn);
  }

  to {
    transform: rotate(1turn);
  }
}

.error-message {
  background-color: #fee;
  border: 1px solid #fcc;
  color: #c33;
  padding: 10px;
  border-radius: 4px;
  margin-bottom: 20px;
}

.checkout-checkbox {
  transition: all 0.3s ease;
}

.gift-checkbox-label {
  color: #1b5035;
  font-family: 'Inter', sans-serif;
  font-size: clamp(12px, 4vw, 18px);
}

/* Gift Subscription Checkbox */
.checkbox-group {
  display: flex;
  align-items: center;
  gap: 0.3em;
}

.checkbox-label {
  font-size: 16px;
  color: #1b5035;
  font-weight: 500;
  cursor: pointer;
}

.checkbox-group input[type='checkbox'] {
  width: 20px;
  height: 20px;
  /* Flex items shrink by default, so the checkbox's rendered size
     would vary with its sibling label's natural text width. */
  flex-shrink: 0;
  accent-color: #1b5035;
  margin-right: 6px;
}

.checkbox-group input[type='checkbox']:focus {
  outline: 2px solid #2c8658;
  outline-offset: 2px;
}

/* The flex rule above beats the UA's `[hidden] { display: none }`
   (same pitfall as `.email-suggestion[hidden]`), so restate it for the
   conditionally-shown fractional-contribution consent group. */
.checkbox-group[hidden] {
  display: none;
}

/* Groups the consent checkboxes into one visually distinct box —
   NY GBL § 527-a asks for renewal terms "clearly and conspicuously
   set off from the surrounding text".  Palette matches
   .recipient-section (slightly darker than the card's #f8faf7). */
.consent-box {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px 14px;
  background: #f0f7f3;
  border: 1px solid #b2ab93;
  border-radius: 8px;
}

/* Recipient Section */
.recipient-section {
  background: #f0f7f3;
  border: 1px solid #b2ab93;
  border-radius: 8px;
  padding: 20px 16px 10px 16px;
  margin-bottom: 1rem;
  margin-top: 0.5rem;
  box-shadow: 0 2px 8px rgba(27, 80, 53, 0.06);
  transition: background 0.3s;
}

.gift-details-header {
  font-size: clamp(14px, 6vw, 24px);
  color: #1b5035;
  font-weight: 600;
  text-align: center;
}

.recipient-header {
  font-size: clamp(12px, 4.5vw, 20px);
  color: #1b5035;
  font-weight: 600;
  margin: 18px 0 10px 0;
}

/* Radio group for subscription length */
.radio-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.subscription-length-label {
  font-size: 15px;
  color: #1b5035;
  font-weight: 500;
}

.radio-options {
  display: flex;
  align-items: center;
  gap: 18px;
}

.radio-option {
  display: flex;
  align-items: center;
  gap: 6px;
}

.radio-label {
  font-size: clamp(12px, 3.5vw, 18px);
  color: #1b5035;
  font-weight: 400;
  cursor: pointer;
}

.radio-option input[type='radio'] {
  accent-color: #1b5035;
  /* Disable browser built-in margin */
  margin: 0;
}

.radio-option input[type='radio']:focus {
  outline: 2px solid #2c8658;
  outline-offset: 2px;
}

.checkbox-group {
  display: flex;
  gap: 6px;
}

/* Recipient input fields */
.recipient-section .checkout-input-group {
  margin-bottom: 0.8rem;
}

.recipient-section .checkout-input-field {
  background: #fff;
  border: 1px solid #b2ab93;
}

.recipient-section .checkout-input-label {
  color: #739281;
}

/* Pager labels */
.carousel-pager-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: auto;
  height: auto;
  border-radius: 0;
  background-color: transparent;
}

.carousel-pager-item.carousel-control-removed {
  display: none;
}

/* Dot-style pager indicator.  Hollow by default, solid green when
   the parent carries `.carousel-pager-item-current`.  The element
   is purely decorative — its sibling `.pager-label` carries the
   step name for screen readers, so the span is rendered empty in
   the EJS template and marked `aria-hidden`. */
.pager-number {
  width: 8px;
  height: 8px;
  background-color: transparent;
  border: 1.5px solid rgb(108, 121, 147);
  border-radius: 50%;
  transition: all 0.3s ease;
}

.carousel-pager-item-current .pager-number {
  background-color: #2c8658;
  border-color: #2c8658;
}

.pager-label {
  font-size: 11px;
  font-weight: 400;
  white-space: nowrap;
  color: rgb(108, 121, 147);
}

/* On phones the labels are still part of the accessibility tree —
   visually-hidden via the standard sr-only clip pattern, but the
   step name ("Your Info" / "Gift Details" / "Payment") is still
   announced to assistive tech.  Desktop keeps the visible label
   sitting under each dot. */
@container (max-width: 600px) {
  .pager-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
}

.carousel-pager-item-current .pager-label {
  color: #2c8658;
  font-weight: 500;
}

.payment-reassurance {
  display: flex;
  align-items: center;
  text-align: center;
  justify-content: center;
  font-size: 14px;
  color: #1b5035;
  gap: 12px;
  font-family: 'Inter', sans-serif;
  flex-direction: column;
}

.secure-payment-icon {
  flex: none;
}

.secure-payment-text {
  flex: initial;
}

.centered-icon-with-text {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex-shrink: 0;
}

.payment-reassurance svg {
  flex-shrink: 0;
  color: #2c8658;
}

.payment-reassurance span {
  flex-shrink: 0;
}

.stripe-badge {
  height: 24px;
  width: auto;
  vertical-align: middle;
}

.terms-of-service-label {
  font-size: 14px;
  color: #1b5035;
  font-family: 'Inter', sans-serif;
  line-height: 1.4;
  font-size: clamp(10px, 12px, 20px);
}

.savings-badge {
  background-color: #2c8658;
  color: white;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: clamp(10px, 5vw, 12px);
  font-weight: 600;
  margin-left: 8px;
}

.price-cards-container {
  display: flex;
  gap: 16px;
}

.payment-interval-card-label {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.payment-interval-card-label input[type='radio'] {
  display: none;
}

.price-card {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  border: 2px solid #dde3df;
  border-radius: 10px;
  padding: clamp(16px, 4vw, 24px) clamp(12px, 3vw, 20px);
  cursor: pointer;
  transition: all 0.3s ease;
  background: white;
  position: relative;
  text-align: center;
}

.payment-interval-card-label:hover .price-card {
  border-color: #2c8658;
  box-shadow: 0 2px 8px rgba(44, 134, 88, 0.2);
}

.payment-interval-card-input:checked + .price-card {
  border-color: #2c8658;
  background-color: #f0f8f4;
  box-shadow: 0 2px 12px rgba(44, 134, 88, 0.3);
}

.price-card-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #2c8658;
  color: white;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: clamp(10px, 4vw, 12px);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.price-card-header {
  font-size: clamp(14px, 6vw, 20px);
  font-weight: 600;
  color: #1b5035;
  margin-bottom: 4px;
}

.price-card-price {
  font-size: clamp(16px, 6vw, 32px);
  font-weight: 700;
  color: #2c8658;
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  flex-wrap: wrap;
}

.price-card-interval {
  font-size: 16px;
  font-weight: 400;
  color: #6c7993;
}

.price-card-savings {
  background-color: #2c8658;
  color: white;
  padding: 2px 6px;
  margin: 0 0 0 4px;
  border-radius: 4px;
  font-size: clamp(9px, 2vw, 11px);
  font-weight: 600;
  font-family: 'Inter', sans-serif;
  white-space: nowrap;
}

.price-card div:last-child {
  font-size: 14px;
  color: #1b5035;
  font-family: 'Inter', sans-serif;
  margin-top: 0;
}

.billing-help-link,
.billing-help-spacer {
  font-size: 12px;
  font-family: 'Inter', sans-serif;
}

.billing-help-link {
  color: #2c8658;
  text-decoration: underline;
  cursor: pointer;
  text-align: center;
}

.billing-help-spacer {
  text-align: center;
  justify-content: center;
}

.currency-options-link {
  color: #2c8658;
  text-decoration: underline;
  cursor: pointer;
}

.currency-selector-container {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.currency-selector-hidden {
  display: none;
}

.currency-selector-label {
  font-size: 12px;
  color: #1b5035;
  font-family: 'Inter', sans-serif;
}

.currency-selector {
  font-size: 12px;
  font-family: 'Inter', sans-serif;
  padding: 4px 8px;
  border: 1px solid #ccc;
  border-radius: 6px;
  color: #1b5035;
  background: white;
  cursor: pointer;
}

/* ---------- Sliding-scale amount selector ---------- */

.sliding-scale-container {
  display: flex;
  flex-direction: column;
  /* Tight gap so the cards sit close to the segmented control they
     belong to.  The cards' own 16px top padding (for the "Most
     popular" ribbon's overhang) supplies additional visual
     breathing room below the toggle. */
  gap: 8px;
  min-width: 0;
}

/* Segmented control wrapping the Monthly/Yearly radios.  Only the
   outer pill carries a border; selecting a segment fills it with
   solid green and dims the unselected segment to muted text on the
   container's pale tint, so the two segments read as one control
   rather than as two outlined buttons. */
.sliding-scale-interval-toggle {
  display: inline-flex;
  align-self: center;
  background: #eef7f1;
  border: 1px solid #d5e5dc;
  border-radius: 999px;
  padding: 4px;
  gap: 0;
  /* Give the "Best value" badge enough vertical room to overhang the
     yearly label without being clipped by an ancestor's padding. */
  margin-top: 10px;
}

.sliding-scale-interval-toggle input[type='radio'] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sliding-scale-interval-label {
  position: relative;
  padding: 8px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #4a6b5a;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition:
    background-color 120ms ease-in-out,
    color 120ms ease-in-out,
    box-shadow 120ms ease-in-out;
  user-select: none;
  /* Floor the label width so the absolute-positioned "Best value"
     badge on the yearly tab always sits inside the tab's horizontal
     extent — without this, short translations (e.g. "Año" in
     Spanish) would be narrower than the badge and it would overhang
     into the monthly tab's space. */
  min-width: 110px;
  text-align: center;
}

.sliding-scale-interval-toggle input[type='radio']:focus-visible + .sliding-scale-interval-label {
  outline: 2px solid #2c8658;
  outline-offset: 2px;
}

/* Anchored to the yearly label's top edge so it overhangs the
   interval-toggle pill, matching the .sliding-scale-card-ribbon
   pattern.  Uppercase + letter-spacing + the selected-card border
   color tie it into the rest of the sliding-scale visual language.

   When the yearly tab is selected its background fills with the same
   #2c8658 green, which would otherwise make the badge melt into the
   tab.  The :checked override below flips the badge to a light fill
   with a green outline so it reads as a distinct sticker above the
   selected pill. Outline (not border) is used to avoid a layout shift
   between the two states. */
.sliding-scale-interval-best-value-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  padding: 1px 8px;
  background: #2c8658;
  color: white;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 999px;
  white-space: nowrap;
  /* Transparent outline reserves a transitionable channel so the
     selected-state color change animates smoothly. */
  outline: 1px solid transparent;
  transition:
    background-color 120ms ease-in-out,
    color 120ms ease-in-out,
    outline-color 120ms ease-in-out;
}

.sliding-scale-interval-toggle
  input[type='radio']:checked
  + .sliding-scale-interval-label
  .sliding-scale-interval-best-value-badge {
  background: white;
  color: #2c8658;
  outline-color: #2c8658;
}

.sliding-scale-interval-toggle input[type='radio']:checked + .sliding-scale-interval-label {
  background: #2c8658;
  color: white;
  box-shadow: 0 1px 3px rgba(27, 80, 53, 0.25);
}

.sliding-scale-cards {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  gap: 12px;
  min-width: 0;
  /* `overflow: auto hidden` gives us horizontal scroll (for the card
     carousel) with explicit vertical clipping.  Without the explicit
     hidden, `overflow-x: auto` is promoted to `overflow: auto auto`
     per the spec — and if an ancestor constrains this element's
     height, the implicit vertical overflow becomes a real scrollbar
     the user can drag around. */
  overflow: auto hidden;
  /* Contain horizontal overscroll within the card carousel so a
     swipe past the leftmost or rightmost card doesn't rubber-band
     and reveal empty space outside the carousel's content. */
  overscroll-behavior-x: contain;
  /* Breathing room for the card ribbon's top overhang and the
     bonus badge's downward growth.  The badge font's `clamp(8px,
     6cqi, 11px)` keeps English on a single line across the
     common embed widths, but very narrow phones or longer
     localized strings (Japanese) can still wrap to two lines —
     budget enough bottom padding for that worst case (~24px
     below the card) plus the selected-card focus outline (4px). */
  padding: 16px 2px 28px;
  margin: 0;
  list-style: none;
  scroll-snap-type: x mandatory;
  /* Match the container's horizontal padding so the first card's
     start-aligned snap position resolves to `scrollLeft: 0`.
     Without this, the snap rests at `scrollLeft = padding-left`
     and the "scroll back" arrow's `scrollLeft <= 1` disable check
     never trips at the leftmost position (the rightmost works
     because the last card's snap is unreachable, so it rests at
     the true max `scrollWidth - clientWidth`). */
  scroll-padding-inline: 2px;
  scrollbar-width: none;
  scroll-behavior: smooth;
  /* Progressive enhancement: Chrome/Edge 129+ honor `scroll-start-inline`
     and position the scroller at the middle of its content on load, which
     — because the default-selected tier is configured to be the middle
     preset — shows the default roughly centered in 3-up layouts and in
     the left column of 2-up / 1-up layouts without any JS.  Browsers
     that don't support this fall through to the matching scrollIntoView
     call in checkout.ts. */
  scroll-start-inline: center;
  /* Tell the browser to auto-generate a pagination marker group after
     the scroll container. */
  scroll-marker-group: after;
}
.sliding-scale-cards::-webkit-scrollbar {
  display: none;
}

/* Browser-generated pagination dots (Chrome 135+).  Safari/Firefox
   users simply see no dots; the fallback arrow buttons (wired up in
   `src/client/checkout.ts`) still let them navigate the carousel.  We
   deliberately skip `::scroll-button` here: those pseudos are rendered
   *inside* the scroll container, which would overlap the cards — the
   flex-wrapper-with-sibling-arrows pattern below gives a nicer layout
   in every browser. */
.sliding-scale-cards::scroll-marker-group {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 8px;
}
.sliding-scale-card-item::scroll-marker {
  content: '';
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d5e5dc;
  border: none;
  cursor: pointer;
  transition: background-color 120ms ease-in-out;
}
.sliding-scale-card-item::scroll-marker:target-current {
  background: #2c8658;
}

/* Interval toggle drives which card list is visible.  Wrapper is a
   flex row so the fallback prev/next arrows sit beside the scrolling
   card list rather than floating over it. */
.sliding-scale-scroll-wrapper {
  display: flex;
  /* Stretch so the inner cards list (the unmarked flex child)
     fills the wrapper's height — combined with the grid stack
     on `.sliding-scale-cards-stack`, this propagates the taller
     interval's height down into the cards themselves so monthly
     and yearly cards stay the same size on toggle.  Arrows opt
     out via their own `align-self: center`. */
  align-items: stretch;
  /* No `gap` here: a `cqi`-based gap on this element would resolve
     against the nearest *ancestor* query container (the carousel),
     not the wrapper itself.  Instead, the spacing between arrows
     and the cards list is set via margins on the arrow buttons
     (`.sliding-scale-fallback-arrow-prev` / `-next` below), which
     are children of this wrapper and therefore correctly query
     the wrapper's own width via this element's `container-type`. */
  position: relative;
  /* `container-type: inline-size` gives this element inline-size
     containment (so the 4 preset cards' intrinsic min-content doesn't
     bubble up and widen the ancestor `.checkout-form-card`) AND makes
     it a container-query root so the card count scales with the
     wrapper's width via `@container` rules below. */
  container-type: inline-size;
  min-width: 0;
  max-width: 100%;
}

/* Stack the month and year scroll-wrappers in the same grid cell so
   the cell sizes to whichever list is taller.  The inactive list is
   hidden with `visibility: hidden` instead of `display: none` so it
   still consumes layout — toggling intervals no longer reflows the
   form below.  Both wrappers retain their `display: flex` layout
   from the base rule above. */
.sliding-scale-cards-stack {
  display: grid;
  grid-template-columns: 1fr;
  min-width: 0;
}

.sliding-scale-cards-stack > .sliding-scale-scroll-wrapper {
  grid-column: 1;
  grid-row: 1;
}

.sliding-scale-scroll-wrapper-year {
  visibility: hidden;
}
.sliding-scale-container:has(#payment-interval-year:checked) .sliding-scale-scroll-wrapper-month {
  visibility: hidden;
}
.sliding-scale-container:has(#payment-interval-year:checked) .sliding-scale-scroll-wrapper-year {
  visibility: visible;
}

/* Pager buttons used in every browser.  Placed alongside the scroll
   container via the flex-wrapper above so they sit outside the card
   area rather than over it. */
.sliding-scale-fallback-arrow {
  flex: 0 0 auto;
  align-self: center;
  /* Arrows shrink with the wrapper's width so cards have room to
     breathe on narrow embeds (phones) — the wrapper carries the
     `container-type: inline-size` that `cqi` reads.  Minimum size
     is floored at 32px on phones so the buttons stay comfortably
     tappable (Apple's 44px guideline is the desktop ceiling). */
  width: clamp(32px, 9cqi, 44px);
  height: clamp(32px, 9cqi, 44px);
  border: 1px solid #d5e5dc;
  border-radius: 50%;
  background: white;
  color: #1b5035;
  font-size: clamp(16px, 6cqi, 24px);
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background-color 120ms ease-in-out,
    border-color 120ms ease-in-out,
    opacity 120ms ease-in-out;
}
.sliding-scale-fallback-arrow:hover:not(:disabled) {
  background: #eef7f1;
  border-color: #2c8658;
}
.sliding-scale-fallback-arrow:disabled {
  opacity: 0.3;
  cursor: default;
}

/* Spacing between arrows and the cards list, set as logical margins
   on the arrow buttons rather than a `gap` on the wrapper.  Because
   the buttons are children of the wrapper (which carries
   `container-type: inline-size`), their `cqi` here resolves against
   the wrapper's own width — unlike a `gap` declared on the wrapper
   itself, which would resolve against the wrapper's nearest ancestor
   query container (the carousel) instead. */
.sliding-scale-fallback-arrow-prev {
  margin-inline-end: clamp(2px, 1.5cqi, 8px);
}
.sliding-scale-fallback-arrow-next {
  margin-inline-start: clamp(2px, 1.5cqi, 8px);
}

.sliding-scale-card-item {
  /* 3 cards visible by default; overridden by the container-query
     rules below so the count drops to 2 or 1 on narrower wrappers. */
  flex: 0 0 calc((100% - 24px) / 3);
  /* Align snap points with the container's start so the default
     `scrollIntoView()` lands on a snap position.  Using `center` here
     means programmatic scrolls that use `inline: 'nearest'` won't
     land on the snap point unless the card was already near center. */
  scroll-snap-align: start;
  list-style: none;
  /* Lets the bonus badge inside scale via cqi against the card's
     own width — at 2-up / 1-up breakpoints the card narrows and
     the badge's text + horizontal padding shrink so it stays
     within the card's bounds instead of overhanging into adjacent
     cards or being clipped at the carousel's edge. */
  container-type: inline-size;
}

@container (max-width: 560px) {
  .sliding-scale-card-item {
    flex-basis: calc((100% - 12px) / 2);
  }

  /* Phones get a tighter bottom budget than desktop's 28px: the
     bonus-badge auto-fit (`fitAllSlidingScaleBonusBadges` in
     checkout.ts) shrinks each badge to a single line at narrow
     wrapper widths, so the worst-case two-line reservation isn't
     needed.  16px leaves room for one badge line (~14px below the
     card) — the selected-card focus outline only renders for
     keyboard `:focus-visible`, which touch users don't trigger,
     so we don't need to budget that 4px on phones. */
  .sliding-scale-cards {
    padding-bottom: 16px;
  }

  /* Pull the Subscribe CTA closer to the price cards on phones.
     The CTA's base 10px top margin compounds with the
     .checkout-input-container's 1.25rem flex gap to 30px on
     desktop — visually disconnected from the cards on phones.
     Zeroing the top margin here leaves only the flex gap, which —
     combined with the cards' 16px bottom padding (housing the
     bonus-badge overhang on the yearly tab) — gives ~22px of
     breathing room between the badges and the Subscribe button.
     Scoped to the sliding-scale step via `:has` so the gift-
     recipient and payment steps keep their original spacing. */
  .checkout-input-container:has(> .sliding-scale-container) > .checkout-button-container {
    margin-top: 0;
  }
}

/* iPhone-class embed widths (wrapper ~280-320px) used to fall under
   the previous 360px threshold and collapse to a single card, which
   wasted the available room.  Push the threshold down so 2-up holds
   through phone widths; 1-up still kicks in for very narrow embeds
   (sidebar widgets etc.) where two cards would be unreadably small. */
@container (max-width: 240px) {
  .sliding-scale-card-item {
    flex-basis: 100%;
  }
}

.sliding-scale-card-label {
  display: block;
  cursor: pointer;
  /* Stretch the label to fill its `<li>`.  Flex `align-items: stretch`
     on `.sliding-scale-cards` makes all items the tallest item's
     height, but without this the label (and the .sliding-scale-card
     inside it) would only be tall enough for its own content — so
     badge-less cards would show a shorter visual box than badged
     ones.  `height: 100%` lets the box grow to match. */
  height: 100%;
}

.sliding-scale-card-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.sliding-scale-card {
  border: 1px solid #d5e5dc;
  border-radius: 12px;
  /* Vertical padding scales with viewport so cards breathe on desktop
     without looking lanky on phones; horizontal scales similarly but
     stays more modest to keep prices centered in narrow preset widths. */
  padding: clamp(20px, 4vw, 40px) clamp(14px, 2.5vw, 20px);
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: relative;
  /* Grow to fill the label (which fills the `<li>`), so cards without
     bonus badges render the same visual height as cards with them. */
  height: 100%;
  box-sizing: border-box;
  transition:
    border-color 120ms ease-in-out,
    box-shadow 120ms ease-in-out,
    transform 120ms ease-in-out;
  text-align: center;
}

.sliding-scale-card-label:hover .sliding-scale-card {
  border-color: #2c8658;
}

.sliding-scale-card-input:checked + .sliding-scale-card {
  border-color: #2c8658;
  box-shadow: 0 0 0 2px #2c8658 inset;
}

.sliding-scale-card-input:focus-visible + .sliding-scale-card {
  outline: 2px solid #2c8658;
  outline-offset: 2px;
}

.sliding-scale-card-ribbon {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: #2c8658;
  color: white;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  letter-spacing: 0.02em;
  /* Keep the badge on a single line even when the card is narrow
     (e.g. the 2-up and 1-up container-query breakpoints).  The badge
     is already designed to overhang the card horizontally (centered
     via translateX(-50%) with top: -10px), so letting it bleed past
     the card edges is the intended behavior. */
  white-space: nowrap;
}

.sliding-scale-card-amount-row {
  display: flex;
  /* `center` (vs the earlier `baseline`) puts the smaller "/month"
     suffix at the vertical midpoint of the price digits instead of
     aligning it to the digit baseline, which looked bottom-heavy
     against the tall clamp-sized price. */
  align-items: center;
  justify-content: center;
  gap: 0;
  /* Long localized prices — e.g. pt_BR's "R$ 1,5 mil /ano" — can
     out-grow the card.  Wrap so the interval suffix moves to its
     own line under the price instead of overflowing the card to
     the left/right. */
  flex-wrap: wrap;
  row-gap: 2px;
}

/* Card-relative `cqi` (via `container-type: inline-size` on
   `.sliding-scale-card-item`) keeps the price legible without
   bleeding past the card's own bounds at any breakpoint.  The
   previous `vw` formula read from the host viewport, so on a wide
   browser with a narrow embedded iframe the font would peg at its
   max and overflow the card. */
.sliding-scale-card-amount {
  font-size: clamp(20px, 14cqi, 42px);
  font-weight: 700;
  color: #2c8658;
}

.sliding-scale-card-interval {
  font-size: clamp(12px, 4cqi, 16px);
  color: #4a6b5a;
}

.sliding-scale-card-equivalent {
  font-size: clamp(12px, 4cqi, 16px);
  color: #4a6b5a;
  line-height: 1.3;
}

/* Mirror of .sliding-scale-card-ribbon but anchored at the bottom
   edge so it reads as a sticker pinned to the card.  Absolute
   positioning keeps the card's main content (price, tree copy)
   centered the same way on every card — badged or not — so the
   default `[hidden] { display: none }` behavior is exactly what we
   want for the empty state.

   The badge is top-anchored (rather than `bottom: -10px`) so when a
   long localized label — e.g. Japanese "🌳 年間2本のボーナスツリー" —
   wraps to a second line, the extra height extends *downward* below
   the card.  Bottom-anchoring would have pushed the wrapped text
   up into the card's content area instead.  `max-width: 100%` plus
   `white-space: normal` lets the text wrap inside the card's
   horizontal bounds rather than overflowing into the carousel
   gutter. */
.sliding-scale-card-bonus-badge {
  position: absolute;
  top: 100%;
  margin-top: -4px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 100%;
  box-sizing: border-box;
  /* Font + horizontal padding scale with the parent card's width
     (via the `container-type: inline-size` on .sliding-scale-card-item)
     so the badge stays inside the card at every card count instead
     of overhanging into adjacent cards or getting clipped at the
     carousel edges on phones. */
  padding: 3px 8px;
  background: #eef6f1;
  color: #2c8658;
  /* Reasonable no-JS fallback.  `fitAllSlidingScaleBonusBadges` in
     checkout.ts overrides `font-size` (and `white-space`) at runtime
     to shrink each badge until it fits its own card on a single
     line — pure-CSS scaling can't compensate for per-language /
     per-platform glyph width differences, so the auto-fit is what
     actually makes the badge reliably single-line. */
  font-size: 10px;
  font-weight: 500;
  text-align: center;
  /* Fixed corner radius — `border-radius: 999px` produced
     extreme semicircular ends once the badge wrapped to two
     lines, which made the pill read as a vertical capsule with
     the curves bigger than the text. */
  border-radius: 10px;
  line-height: 1.2;
  white-space: normal;
  /* Transparent outline reserves a transitionable channel so the
     selected-state outline below animates in/out without a layout
     shift, matching the BEST VALUE badge's pattern. */
  outline: 1px solid transparent;
  transition: outline-color 120ms ease-in-out;
}

.sliding-scale-card-input:checked + .sliding-scale-card .sliding-scale-card-bonus-badge {
  outline-color: #2c8658;
}

/* ---- TREE-336: credits-explainer popover -------------------- */

/* (i) info button rendered inline at the end of the tree-
   equivalent copy on cards whose ~N trees / year text needs
   the math explanation.  Stays inline-block so it sits next
   to the equivalent text without breaking the existing card
   centering. */
.sliding-scale-card-info {
  appearance: none;
  background: transparent;
  border: none;
  /* Padding around the glyph expands the hit target to ~32px square
     (18px icon + 7px padding on each side) — well above the 24x24
     threshold flagged by accessibility audits — without changing the
     visible icon's centering inside the equivalent-text row. */
  padding: 7px;
  margin-left: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  line-height: 1;
  opacity: 0.75;
  transition: opacity 120ms ease;
}
/* `display: inline-flex` above outranks the UA stylesheet's
   `[hidden] { display: none }` at the same specificity, so without
   this override the (i) buttons rendered on every card regardless
   of the EJS template's `hidden` attribute.  Add the class selector
   to the attribute selector here to win the cascade and keep the
   button hidden when `showInfoIcon` is false. */
.sliding-scale-card-info[hidden] {
  display: none;
}

.sliding-scale-card-info:hover,
.sliding-scale-card-info:focus-visible {
  opacity: 1;
}

/* Until a card is selected, treat its (i) as decorative for pointer
   input: `pointer-events: none` lets taps fall through to the
   surrounding label so the radio activates first, and the dimmed
   opacity signals the icon isn't the primary action.  Once the card
   is selected the rule above no longer matches and the (i) becomes
   tappable again — so users still get one-tap access to the credits
   popover on their chosen tier, but can't summon it by accident
   while browsing through prices.  Keyboard activation still works
   on any focused (i) because `pointer-events` doesn't gate Enter. */
.sliding-scale-card-input:not(:checked) + .sliding-scale-card .sliding-scale-card-info {
  pointer-events: none;
  opacity: 0.35;
}
.sliding-scale-card-info-icon {
  display: inline-block;
  width: 18px;
  height: 18px;
}

/* The popover element.  Visual styling only — positioning is
   handled by CSS Anchor Positioning in modern browsers (see the
   `@supports` block below), with a graceful fallback to the
   default `popover="auto"` rendering (top-layer, centered in
   viewport) for browsers that don't yet support it.
   `setupCreditsPopover()` only writes an inline `max-width` to
   cap by the device screen width — useful when the host page
   embeds the iframe wider than the device. */
.sliding-scale-credits-popover {
  max-width: min(340px, 92vw);
  padding: 16px 18px;
  border: 1px solid #d5e5dc;
  border-radius: 10px;
  background: white;
  color: #1b5035;
  font-family: 'Inter', sans-serif;
  box-shadow:
    0 4px 16px rgba(58, 68, 69, 0.16),
    0 2px 4px rgba(58, 68, 69, 0.08);
}

/* CSS Anchor Positioning (Chrome 125+ / Safari 26+): the
   browser uses the `popovertarget` invoker as the implicit
   anchor and places the popover directly below it.  If that
   would overflow the viewport, position-try-fallbacks shifts
   to the alternates (flipping vertically, then horizontally). */
@supports (position-area: bottom) {
  .sliding-scale-credits-popover {
    position-area: bottom;
    position-try-fallbacks: flip-block, flip-inline;
    margin-block-start: 12px;
  }
}

/* Backdrop pseudo-element rendered behind the popover while
   it's in the top layer.  A subtle blur draws the eye to the
   popover content without making the checkout feel modal —
   no color tint, since the popover is informational, not a
   confirmation prompt. */
.sliding-scale-credits-popover::backdrop {
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.sliding-scale-credits-popover-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
}
.sliding-scale-credits-popover-body {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.45;
  color: #4a6b5a;
}

/* Math block — accent background, tabular nums for clean digit
   alignment.  The fraction is an inline-block stack of two
   centered lines with a CSS border between them; result line
   sits below. */
.sliding-scale-credits-popover-math {
  margin: 0;
  padding: 10px 12px;
  background: #eef6f1;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #1b5035;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.sliding-scale-credits-popover-math-fraction {
  display: inline-block;
  text-align: center;
}
/* Math row: fraction on the left, "× 12 months" multiplier on
   the right, vertically aligned to the divider line (the
   geometric middle of the fraction).  Wraps at narrow popover
   widths so the multiplier drops below the fraction rather than
   overflowing horizontally. */
.sliding-scale-credits-popover-math-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.sliding-scale-credits-popover-math-multiplier {
  white-space: nowrap;
  font-size: 12.5px;
}
.sliding-scale-credits-popover-math-numerator {
  padding: 0 8px 3px;
  border-bottom: 1px solid currentColor;
  white-space: nowrap;
}
.sliding-scale-credits-popover-math-denominator {
  padding: 3px 8px 0;
  white-space: nowrap;
}
.sliding-scale-credits-popover-math-result {
  display: block;
  margin-top: 6px;
  font-weight: 600;
}

/* Carry-over line.  Italic + smaller + muted to read as a
   footnote-style trailing remark below the math block. */
.sliding-scale-credits-popover-carryover {
  margin: 6px 0 0;
  font-size: 11.5px;
  color: #4a6b5a;
  font-style: italic;
  text-align: center;
}