/**
 * RetailFix Core — Sales / Upgrade Modal styles
 * Shared across every product page, alongside sales-modal.js.
 *
 * Colours are literals rather than var(): these render in both Suite and
 * Content Studio, which define different custom properties.
 */

/* ── Ported from suite-styles.css ────────────────────────────────────────
 * Suite's colour custom properties are resolved to literals here, since
 * Content Studio defines none of them. --font-* stay as var(). */
.pill-btn {
  font-size: 14px;
  font-weight: 800;
  font-family: var(--font-sans);
  cursor: pointer;
  border: none;
  border-radius: 999px;
  padding: 11px 26px;
}

.pill-btn-primary {
  background: linear-gradient(90deg, #bb0016, #e1272b);
  color: #fff;
}

.pill-btn-ghost {
  color: #bb0016;
  background: #fff;
  border: 1.5px solid #f0d2cb;
}

.pill-btn-white {
  color: #bb0016;
  background: #fff;
}

.overlay {
  z-index: 1000;
  background: #1c1b1b8c;
  justify-content: center;
  align-items: center;
  padding: 20px;
  display: none;
  position: fixed;
  inset: 0;
}

.overlay.show {
  display: flex;
}

.modal {
  background: #fff;
  border-radius: 24px;
  width: 100%;
  max-width: 440px;
  max-height: 90vh;
  /* Narrow sides so the comparison chart, add-ons, total and button use the
     full width. Everything above them re-adds the 18px below, so the header
     stays where it was. */
  padding: 32px 14px;
  overflow-y: auto;
}
.modal-head,
.modal .price-line,
.modal p.sub,
.modal .sub-note,
.modal .discount-sub {
  padding-left: 18px;
  padding-right: 18px;
}

/* Wraps .modal (not inside it) so the discount sticker can bleed off the
 * modal's corner without being clipped by .modal's own overflow-y:auto. */
.modal-sticker-wrap {
  position: relative;
  width: 100%;
  max-width: 440px;
}

/* Sticker anchor. A sibling of .modal rather than a descendant, so it
 * escapes .modal's overflow clipping; a JS scroll listener tracks
 * scrollTop via translateY. The drop-shadow lives here rather than on
 * .discount-sticker, whose clip-path would clip the filter away. Also the
 * perspective source, since on body it would never reach here. */
.discount-sticker-anchor {
  position: absolute;
  /* A real box, not a 0x0 point: the string and tag inside are absolutely
     positioned and add no size, and the scroll handler measures this box to
     work out how far the tag has risen.
     440x320, offset so its origin sits 280px left and 40px above the attach
     point; .discount-sticker-string re-adds that offset. Wide enough that
     the tag stays inside it at full wind — the mask only covers this box,
     so anything blown past its left edge would go uncut. */
  width: 440px;
  height: 320px;
  top: -30px;
  right: -150px;
  z-index: 5;
  pointer-events: none;
  perspective: 700px;

  /* The scroll handler's mask needs sizing to this box. */
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  filter: drop-shadow(0 6px 10px #00000085) !important;
  animation: rf-sticker-shadow-sway 13s linear infinite;
}

/* Layer 1 — the thread and the tag together, carrying the macro swing.
 * Longer and slower than the tag's own loop so the two never line up. */
/* Carries the scroll movement and the wind. Separate from the anchor so the
   anchor's mask stays aligned to the modal rather than rotating with the
   tag. Pivots on the thread's top end, in the anchor box's coordinates —
   the string re-adds the same 80/40 offset. */
.discount-sticker-wind {
  position: absolute;
  inset: 0;
  transform-origin: 280px 40px;
  /* No transition: the transform would animate on the compositor while the
     mask position lands immediately, so under a fast scroll the tag renders
     where the mask isn't expecting it and the thread leaks past the cut.
     The wind is already eased in JS, so nothing is lost. */
}

.discount-sticker-string {
  position: absolute;
  /* Cancels the anchor box's 80/40 offset, putting the top of the thread
     back on the modal's upper-right corner. */
  top: 40px;
  left: 280px;
  width: 0;
  height: 56px;
  transform-origin: top center;
  animation: rf-sticker-swing 7s ease-in-out infinite alternate;
}
.discount-sticker-thread {
  position: absolute;
  top: 0;
  left: -12px;
  overflow: visible;
  /* Above the tag's z-index: 5, so the string reads as passing in front of
     the card rather than disappearing behind it at the eyelet. */
  z-index: 6;
}
@keyframes rf-sticker-swing {
  0% {
    transform: rotate(-7deg) rotateY(-8deg);
  }
  40% {
    transform: rotate(4deg) rotateY(10deg) rotateX(4deg);
  }
  100% {
    transform: rotate(9deg) rotateY(14deg);
  }
}

/* Corner sticker — sale-tag silhouette via clip-path, notch and hole on the
 * left. pointer-events:none so it can't block the nearby close button. */
/* Layer 2 — the tag, a separate object from the string above it. Turned a
 * quarter turn so it hangs like a real price tag, wedge and hole at the
 * top. The 90deg lives in the keyframes because an animation's transform
 * replaces a static one. Its loop is a different length from the string's
 * so the two read as a tag hanging from a line, not one object. */
.discount-sticker {
  position: absolute;
  top: 27px;
  left: -16px;
  width: 138px;
  height: 58px;
  background: #bb0016;
  clip-path: polygon(20% 0%, 100% 0%, 100% 100%, 20% 100%, 0% 50%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 16px;
  z-index: 5;
  pointer-events: none;
  /* The eyelet. Everything pivots on the hole, as it would in life —
     12px in plus its own 4px radius. */
  transform-origin: 16px 29px;
  animation: rf-sticker-flutter 5.5s ease-in-out infinite alternate;
}
@keyframes rf-sticker-flutter {
  0% {
    transform: rotate(94deg) rotateY(6deg);
  }
  45% {
    transform: rotate(88deg) rotateY(-4deg) rotateX(5deg);
  }
  100% {
    transform: rotate(85deg) rotateY(-9deg);
  }
}

/* Both loops off for anyone who asked for less motion. */
@media (prefers-reduced-motion: reduce) {
  .discount-sticker-anchor,
  .discount-sticker-string,
  .discount-sticker {
    animation: none;
  }
}
@keyframes rf-sticker-shadow-sway {
  0% {
    filter: drop-shadow(0 6px 10px #00000085);
  }
  3% {
    filter: drop-shadow(-2px 7px 11px #00000085);
  }
  7% {
    filter: drop-shadow(3px 8px 12px #00000085);
  }
  11% {
    filter: drop-shadow(-1px 6px 10px #00000085);
  }
  15%,
  62% {
    filter: drop-shadow(0 6px 10px #00000085);
  }
  68% {
    filter: drop-shadow(4px 9px 13px #00000085);
  }
  74% {
    filter: drop-shadow(-2px 7px 11px #00000085);
  }
  79% {
    filter: drop-shadow(2px 8px 11px #00000085);
  }
  85%,
  100% {
    filter: drop-shadow(0 6px 10px #00000085);
  }
}

/* Eyelet, sitting near the point where a real tag's hole is punched. */
.discount-sticker::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fff;
}

.discount-sticker-text {
  color: #fff;
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

/* Icon, text and close button are direct children. The icon and title are
   one unit; only the close button is pushed away. */
.modal-head {
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  display: flex;
}
.modal-head .modal-head-text {
  margin-right: auto;
}
/* Aligned to the top of the row, not centred on the title. */
.modal-head .close-x {
  align-self: flex-start;
}

.modal-head-icon {
  background: #fbe9e5;
  width: 56px;
  height: 56px;
  color: #bb0016;
  border-radius: 50px;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  display: inline-flex;
}

.close-x {
  background: #fbe9e5;
  cursor: pointer;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  color: #bb0016;
  border: none;
  border-radius: 50%;
  font-size: 16px;
}

.price-line {
  color: #bb0016;
  margin: 8px 0 6px;
  font-size: 32px;
  font-weight: 900;
}

.price-line span {
  color: #78716c;
  font-size: 14px;
  font-weight: 600;
}

.modal p.sub {
  color: #78716c;
  margin-bottom: 22px;
  font-size: 13.5px;
  line-height: 1.55;
}

.bundle-box {
  background: #fcf9f8;
  border: 1.5px dashed #f0d2cb;
  border-radius: 16px;
  margin-bottom: 22px;
  padding: 16px;
}

.bundle-box h4 {
  font-family: var(--font-mono);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #bb0016;
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 700;
}

.bundle-item {
  border-top: 1px solid #f0d2cb;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  font-size: 14px;
  display: flex;
}

.bundle-item:first-of-type {
  border-top: none;
}

.bundle-item input {
  width: 17px;
  height: 17px;
  accent-color: #bb0016;
}

.bundle-item .b-name {
  flex: 1;
  font-weight: 600;
}

.bundle-item .b-price {
  color: #78716c;
  font-size: 13px;
  font-family: var(--font-mono);
}

.btn-block {
  width: 100%;
  padding: 14px;
}

.modal-head-text {
  flex-direction: column;
  gap: 2px;
  display: flex;
}

.modal-head-eyebrow {
  color: #bb0016;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 600;
}

.modal-head-name {
  color: #bb0016;
  font-family: "Dongle", sans-serif; /* Content Studio's own --font-display resolves to a broken "Inherit" placeholder, not a real font — matching how other existing Content Studio rules already hardcode Dongle directly rather than relying on that variable. */
  font-size: 44px;
  font-weight: 800;
  line-height: 0.5;
  margin-top: 2px;
}

.price-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
}

.price-line-original {
  color: #78716c;
  font-size: 18px;
  font-weight: 700;
  text-decoration: line-through;
  margin-left: 10px;
}

.discount-sub {
  color: #bb0016;
  font-size: 16px;
  line-height: 1.2;
  font-weight: 700;
  margin: 0 0 10px;
}

/* Smaller variant for the disclaimer notes under a price, so they read as
 * a footnote rather than a headline-adjacent callout. */
.discount-sub-sm {
  font-size: 11px;
  font-weight: 600;
}

.rf-include-mine-pill .rf-switch {
  margin-left: 4px;
  background: var(--color-outline-variant);
}

.rf-filter-toggle-btn-active.rf-include-mine-pill .rf-switch {
  background: rgb(255 255 255 / 35%);
}

.rf-filter-toggle-btn-active.rf-include-mine-pill .rf-switch:checked {
  background: #fff;
}

.rf-filter-toggle-btn-active.rf-include-mine-pill .rf-switch::after {
  background: var(--color-primary);
}

/* Sales modal checkout button, stuck to the bottom of .modal's scroll area.
   Sticky only engages on overflow. The halo hides content scrolling past the
   pill's rounded ends. */
.modal > .btn-block {
  position: sticky;
  bottom: 0;
  /* Above anything in the content that sets its own layer, like the founder
     box's text, so nothing scrolls over the button. */
  z-index: 2;
  /* Clear of the total block above. The white halo extends ~18px past the
     button on every side to mask content scrolling behind it. */
  margin-top: 26px;
  box-shadow:
    0 0 0 10px #fff,
    0 -8px 12px 8px #fff;
}

/* Shared pill toggle, ported from suite-styles.css — Suite and Content
   Studio are separate builds sharing no code. Styles the checkbox itself,
   so it stays focusable and accessible. */
.rf-switch {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 24px;
  margin: 0;
  border: none;
  border-radius: 9999px;
  background: var(--color-outline-variant);
  cursor: pointer;
  transition:
    background 0.18s ease,
    opacity 0.18s ease;
}

.rf-switch::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px #00000040;
  transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rf-switch:checked {
  background: var(--color-primary);
}

.rf-switch:checked::after {
  transform: translateX(18px);
}

.rf-switch:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.rf-switch-sm {
  width: 32px;
  height: 18px;
}

.rf-switch-sm::after {
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
}

.rf-switch-sm:checked::after {
  transform: translateX(14px);
}

/* Free vs Pro comparison. Three columns: label, free allowance, Pro one.
   Colours are literals, as in the ported block above. */
.rf-plan-compare {
  margin: 18px 0 4px;
  border: 1px solid #f0e4e1;
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}

.rf-plan-compare .rf-plan-row {
  display: grid;
  grid-template-columns: 1fr 72px 92px;
  align-items: center;
  gap: 8px;
  padding: 9px 14px;
  font-family: var(--font-sans, sans-serif);
  font-size: 12.5px;
  border-bottom: 1px solid #f7efed;
}

.rf-plan-compare .rf-plan-row:last-child {
  border-bottom: none;
}

.rf-plan-head {
  background: #fcf9f8;
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #78716c;
}

.rf-plan-label {
  color: #1c1917;
  font-weight: 700;
}

.rf-plan-free {
  color: #78716c;
  font-weight: 700;
  text-align: center;
}

/* Nothing on the free tier — muted rather than a red cross, which would
   read as an error next to the things they do get. */
.rf-plan-no {
  color: #c7bdb9;
}

.rf-plan-pro {
  color: #bb0016;
  font-weight: 800;
  text-align: center;
}
@media (max-width: 480px) {
  .rf-plan-compare .rf-plan-row {
    grid-template-columns: 1fr 58px 76px;
    padding: 8px 11px;
    font-size: 12px;
  }
}
@supports not selector(::-webkit-scrollbar) {
  .modal {
    scrollbar-width: thin;
    scrollbar-color: var(--color-outline-variant, #e6bdb9) transparent;
  }
}

.modal::-webkit-scrollbar {
  width: 6px;
}

.modal::-webkit-scrollbar-track {
  background: transparent;
  /* Stops short of both corners so the bar never runs into the 24px
     radius. Padding wouldn't do this — a scrollbar sits on the container's
     outer edge, outside the padding box. */
  margin: 26px 0;
}

/* No stepper buttons at either end. */
.modal::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

.modal::-webkit-scrollbar-thumb {
  background: var(--color-outline-variant, #e6bdb9);
  border-radius: 999px;
}

.modal::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary, #bb0016);
}

/* Above the Preview tab, which uses Tailwind's z-[9999]. */
.overlay {
  z-index: 10000;
}

/* Scroll hint arrow. Sticky rather than fixed so it rides just above the
   checkout button as the content scrolls beneath it. The bob is timed to
   the JS flick loop — 260ms down, 140 settle, 420 back, 1500 rest. */
.rf-scroll-hint {
  position: sticky;
  bottom: 88px;
  z-index: 3;
  display: flex;
  justify-content: center;
  height: 0;
  pointer-events: none;
  color: var(--color-primary, #bb0016);
  animation: rf-scroll-hint-in 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rf-scroll-hint svg {
  filter: drop-shadow(0 2px 6px rgb(255 255 255 / 90%));
  animation: rf-scroll-hint-bob 0.53s ease-in-out infinite;
}
@keyframes rf-scroll-hint-in {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes rf-scroll-hint-bob {
  0% { transform: translateY(0); }
  43% { transform: translateY(7px); }
  100% { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .rf-scroll-hint,
  .rf-scroll-hint svg {
    animation: none;
  }
}
@media (min-width: 620px) {
  .modal {
    max-width: 540px;
  }
}

/* Extends the checkout button's halo ~50px below, so content can't be seen
   sliding through the gap to the modal's bottom edge. */
.modal > .btn-block {
  /* Translucent above and to the sides, solid below. The downward layer has
     to stay opaque — that's what stops content showing in the gap between
     the button and the modal's bottom edge. */
  box-shadow:
    0 0 0 10px rgb(255 255 255 / 55%),
    0 -10px 16px 10px rgb(255 255 255 / 70%),
    0 6px 0 8px rgb(255 255 255 / 85%),
    0 20px 0 18px #fff,
    /* Blurred, so the band dissolves instead of ending on a hard line —
       a zero-blur shadow has a hard edge wherever its spread stops. */
    0 30px 20px 12px rgb(255 255 255 / 80%);
}

/* ── Sales modal: add-ons, bundle sticker, total ──────────────────────────
   Rows carry a product icon and the shared toggle instead of a checkbox,
   which makes them shorter and matches Settings. */
.bundle-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.b-icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.b-icon-pro { color: var(--color-primary, #bb0016); }

.b-icon-zeroclick { color: #b45309; }

.b-icon-reviewbooster { color: #ca8a04; }

.b-icon-geoapp { color: var(--color-primary, #bb0016); }

.bundle-item .b-price {
  margin-left: auto;
  margin-right: 14px;
}

/* .bundle-item input above sizes the old checkbox at 17x17, which was
   squashing the toggle — restated here so it keeps the shared size. */
.bundle-item .rf-switch {
  flex-shrink: 0;
  width: 32px;
  height: 18px;
}

.bundle-item .rf-switch::after {
  width: 14px;
  height: 14px;
}

.bundle-item input:disabled {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

/* Small note under the product description. */
.sub-note {
  margin: 6px 0 0;
  font-family: var(--font-sans, sans-serif);
}

.sub-note p {
  margin: 0;
  font-size: 11px;
  line-height: 1.5;
  color: #a8a29e;
}

/* Replaces the old full-width bundle banner — a small tag instead. */
.bundle-sticker {
  display: flex;
  width: fit-content;
  align-items: baseline;
  gap: 7px;
  margin: 16px auto 14px;
  padding: 10px 20px;
  border-radius: 999px;
  background: linear-gradient(135deg, #bb0016, #e0431f);
  color: #fff;
  box-shadow: 0 4px 12px rgb(187 0 22 / 28%);
}

/* Same press as the New Scrape button (active:scale-97 transition-all). */
.bundle-sticker,
.modal > .btn-block {
  border: none;
  cursor: pointer;
  transition: all 0.15s ease;
}

.bundle-sticker:active,
.modal > .btn-block:active {
  transform: scale(0.97);
}

.bundle-sticker-price {
  font-family: inherit;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.01em;
}

.bundle-sticker-price sup {
  font-size: 9px;
  top: -0.5em;
}

.bundle-sticker-label {
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.85;
}

/* One element in both states — unlocking restyles it in place rather than
   swapping in a differently shaped block, which is what made it feel
   blocky when it appeared. */
.bundle-total {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 14px;
  padding: 16px 20px;
  border-radius: 14px;
  background: transparent;
  color: #1c1917;
  transition:
    background 0.35s ease,
    color 0.35s ease,
    box-shadow 0.35s ease;
}

.bundle-total-figure {
  font-family: inherit;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: -0.01em;
  /* Fixed-width digits so $147 and $59 line up on the same right edge
     rather than drifting by a fraction of a character. */
  font-variant-numeric: tabular-nums;
  /* Needed for ::first-letter below to take effect on a span. */
  display: inline-block;
}
/* The currency sign set smaller and raised, the way a price is actually
   typeset. Costs no markup — it's the first character either way. */
.bundle-total-figure::first-letter {
  font-size: 0.58em;
  font-weight: 800;
  vertical-align: 0.42em;
  margin-right: 1px;
  opacity: 0.85;
}

.bundle-total-figure sup {
  font-size: 10px;
  top: -0.6em;
}

.bundle-total-save {
  align-self: flex-end;
  display: inline-block;
  margin-top: 8px;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 800;
  letter-spacing: 0.01em;
}

/* Where the founding rates end up, not a price being charged today. */
.bundle-total-destination {
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.55;
  text-align: left;
  text-wrap: balance;
  margin-top: 8px;
  opacity: 0.92;
}

/* Unlocked state. */
.bundle-total-unlocked {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  padding: 22px 22px 20px;
  background: linear-gradient(135deg, #bb0016, #e0431f);
  color: #fff;
  /* Three layers: a hairline top edge catching the light, a soft inner
     darkening at the foot so the card has thickness, and the drop shadow
     lifting it off the modal. */
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 28%),
    inset 0 -18px 26px -18px rgb(0 0 0 / 22%),
    0 10px 26px rgb(187 0 22 / 32%);
}
/* Light source at the top left, matching the 135deg gradient underneath.
   Keeps the flat fill from reading as a solid rectangle. */
.bundle-total-unlocked::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    120% 90% at 12% -10%,
    rgb(255 255 255 / 20%),
    transparent 60%
  );
}
/* Everything sits above that wash. */
.bundle-total-unlocked > * {
  position: relative;
}
.bundle-total-unlocked .bundle-total-figure {
  font-weight: 900;
  letter-spacing: -0.025em;
  /* Slight lift off the label baseline so the number reads first. */
  text-shadow: 0 1px 0 rgb(0 0 0 / 8%);
}
.bundle-total-unlocked .bundle-total-save {
  background: #ffffff1f;
  color: #fff;
  /* A rim rather than a flat tint — reads as a token sitting on the card
     instead of a lighter patch of it. */
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 26%),
    inset 0 1px 0 rgb(255 255 255 / 18%);
  text-shadow: 0 1px 1px rgb(0 0 0 / 12%);
}
/* .rf-scroll-hint sets display:flex, which beats the hidden attribute — so
   the arrow showed permanently instead of only during a hint. */
.rf-scroll-hint[hidden] {
  display: none;
}

/* The comparison table runs wider than everything above it, so side padding
   comes off the modal and is put back on the head, price and text. The
   sticky button and sticker anchor both key off .modal being the scroller. */
.modal {
  padding-left: 14px;
  padding-right: 14px;
}
/* The sticky button keeps its own full width, so its halo still covers the
   modal edge to edge. */
.modal > .btn-block {
  margin-left: 4px;
  margin-right: 4px;
  width: calc(100% - 8px);
}

/* The payoff figure — the headline of the whole modal. */
.bundle-total-unlocked .bundle-total-figure {
  font-size: 38px;
  line-height: 1.05;
}
.bundle-total-unlocked .bundle-total-figure sup {
  font-size: 15px;
}
/* Divider rather than a floating line — separates what's charged from what
   it becomes, and stops the destination sentence reading as another figure. */
/* Divider sits under the chip, not on it, so the rule spans the full card
   and separates what's charged from what it becomes. */
.bundle-total-unlocked .bundle-total-destination {
  position: relative;
  margin-top: 16px;
  padding-top: 16px;
  opacity: 1;
  color: #ffffffcf;
}
/* Drawn rather than a border so it can fade out at both ends. A hard rule
   edge to edge cut the card in two; this reads as a seam. */
.bundle-total-unlocked .bundle-total-destination::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgb(255 255 255 / 34%) 18%,
    rgb(255 255 255 / 34%) 82%,
    transparent
  );
}

/* Figures on the right, reassurance on the left. Splitting them lets the
   label sit against its own amount instead of being pushed across the card
   by margin-right:auto, which is what made the two feel unrelated. */
.bundle-total-main {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}
.bundle-total-figures {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 0;
}
.bundle-total-assure {
  list-style: none;
  margin: 0;
  padding: 0 0 3px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.bundle-total-assure li {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.25;
  color: #78716c;
}
/* Tick drawn in CSS rather than an inline SVG per item. */
.bundle-total-assure li::before {
  content: "";
  flex-shrink: 0;
  width: 13px;
  height: 7px;
  border-left: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-radius: 1px;
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0.9;
}
.bundle-total-unlocked .bundle-total-assure li {
  color: #ffffffc4;
}

@media (max-width: 420px) {
  /* Stacked, reassurance under the figures — on a narrow card the two
     columns squeeze the amounts. */
  .bundle-total-main {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 14px;
  }
  .bundle-total-assure {
    padding-bottom: 0;
  }
}

/* One headline figure with the terms as a line beneath it. Two labelled
   rows made the recurring charge compete with what's actually being
   charged today; this keeps both legible with a clear order. */
.bundle-total-headline {
  font-size: 34px;
  line-height: 1.05;
}
.bundle-total-unlocked .bundle-total-headline {
  font-size: 40px;
}
.bundle-total-caption {
  margin-top: 4px;
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #78716c;
  text-align: right;
}
.bundle-total-unlocked .bundle-total-caption {
  color: #ffffffc9;
}

/**
 * Checkout pane. Replaces the Continue button in place, leaving what they're
 * buying visible above it.
 */
.rf-checkout-pane {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #eee;
}
.rf-checkout-heading {
  font-size: 11.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: #78716c;
  margin-bottom: 12px;
}
/* Stripe's iframe. Its styling comes from the Stripe dashboard. */
.rf-checkout-element {
  min-height: 44px;
  margin-bottom: 14px;
}
.rf-checkout-error {
  color: #bb0016;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 10px;
}
.rf-checkout-error:empty {
  display: none;
  margin-bottom: 0;
}
.rf-checkout-back {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px;
  border: none;
  background: none;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  color: #78716c;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rf-checkout-back:hover {
  color: #1c1917;
  text-decoration: underline;
}
.btn-block:disabled,
.btn-block.is-off {
  opacity: 0.65;
  cursor: default;
}

/* Held while Stripe's webhook catches up. */
.rf-checkout-wait {
  padding: 26px 0 18px;
  text-align: center;
}
.rf-checkout-spinner {
  width: 30px;
  height: 30px;
  margin: 0 auto 14px;
  border: 3px solid #f2e6e3;
  border-top-color: #bb0016;
  border-radius: 50%;
  animation: rf-checkout-spin 0.7s linear infinite;
}
@keyframes rf-checkout-spin {
  to {
    transform: rotate(360deg);
  }
}
.rf-checkout-wait-title {
  font-size: 16px;
  font-weight: 800;
  color: #1c1917;
}
.rf-checkout-wait-sub {
  margin-top: 4px;
  font-size: 13.5px;
  color: #78716c;
}
@media (prefers-reduced-motion: reduce) {
  .rf-checkout-spinner {
    animation: none;
  }
}

/* Locked once checkout starts: the session's line items are fixed, so a
   toggle flipped now wouldn't be charged. */
.bundle-box.is-locked {
  opacity: 0.55;
  pointer-events: none;
}

/* What's being bought, restated inside the payment pane: the pane makes the
   modal taller, so the bundle box above scrolls out of view. */
.rf-checkout-items {
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}
.rf-checkout-items li {
  position: relative;
  padding: 5px 0 5px 22px;
  font-size: 14px;
  font-weight: 700;
  color: #1c1917;
}
.rf-checkout-items li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 9px;
  height: 5px;
  border-left: 2px solid #bb0016;
  border-bottom: 2px solid #bb0016;
  transform: rotate(-45deg);
}
.rf-checkout-pane .rf-checkout-heading + .rf-checkout-items + .rf-checkout-heading {
  padding-top: 14px;
  border-top: 1px solid #eee;
}

/* Add-on box while it sits inside the payment pane. */
.bundle-box.in-checkout {
  margin: 0 0 18px;
}
.rf-checkout-rebuilding {
  padding: 22px 0;
  text-align: center;
}

/* Monthly or founder, for Studio Pro. Two cards side by side; the one
   that's on carries the brand red. */
.rf-plan-choices {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 0 6px;
}
.rf-plan-choice {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 14px;
  border: 1.5px solid #f0d2cb;
  border-radius: 14px;
  background: #fff;
  font: inherit;
  font-family: var(--font-sans, sans-serif);
  text-align: left;
  color: #1c1917;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  -webkit-tap-highlight-color: transparent;
}
.rf-plan-choice:hover {
  border-color: #e6bdb9;
}
.rf-plan-choice.is-on {
  border-color: #bb0016;
  background: #fdf4f2;
  box-shadow: 0 0 0 1px #bb0016;
}
.rf-plan-choice-name {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: #78716c;
}
.rf-plan-choice.is-on .rf-plan-choice-name {
  color: #bb0016;
}
.rf-plan-choice-price {
  font-size: 22px;
  font-weight: 900;
  line-height: 1.15;
  color: #1c1917;
}
.rf-plan-choice-price span {
  font-size: 12.5px;
  font-weight: 600;
  color: #78716c;
}
.rf-plan-choice-note {
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.3;
  color: #78716c;
}
.rf-plan-choice-founder .rf-plan-choice-note {
  color: #bb0016;
  font-weight: 700;
}

/* What a founder gets. */
.rf-founder-perks {
  margin: 14px 0 0;
  padding: 14px 16px;
  border: 1.5px dashed #f0d2cb;
  border-radius: 16px;
  background: #fcf9f8;
  font-family: var(--font-sans, sans-serif);
}
.rf-founder-perks-title {
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #bb0016;
}
.rf-founder-perks ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rf-founder-perks li {
  position: relative;
  padding-left: 20px;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.35;
  color: #1c1917;
}
.rf-founder-perks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 5px;
  width: 9px;
  height: 5px;
  border-left: 2px solid #bb0016;
  border-bottom: 2px solid #bb0016;
  transform: rotate(-45deg);
}
.rf-founder-perks-note {
  margin-top: 10px;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.4;
  color: #78716c;
}
@media (max-width: 380px) {
  .rf-plan-choice {
    padding: 10px 11px;
  }
  .rf-plan-choice-price {
    font-size: 19px;
  }
}

/* Three plans side by side for a launched app: founder, monthly, yearly. */
.rf-plan-choices-3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 420px) {
  .rf-plan-choices-3 {
    grid-template-columns: 1fr;
  }
}

/* An add-on row with Studio Pro's plan buttons under it. */
.bundle-item-wrap {
  border-top: 1px solid #f0d2cb;
}
.bundle-item-wrap:first-of-type {
  border-top: none;
}
.bundle-item-wrap .bundle-item {
  border-top: none;
}
.rf-addon-plans {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: -2px 0 10px 26px;
}
.rf-addon-plan {
  padding: 5px 11px;
  border: 1.5px solid #f0d2cb;
  border-radius: 999px;
  background: #fff;
  font: inherit;
  font-family: var(--font-sans, sans-serif);
  font-size: 12px;
  font-weight: 700;
  color: #78716c;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.rf-addon-plan.is-on {
  border-color: #bb0016;
  background: #fdf4f2;
  color: #bb0016;
}

/* One line per product above the amount due today. */
.rf-total-lines {
  list-style: none;
  margin: 0 0 14px;
  padding: 0 0 12px;
  border-bottom: 1px solid #f0e4e1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rf-total-line {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-sans, sans-serif);
  font-size: 13.5px;
}
.rf-total-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}
.rf-total-name {
  font-weight: 700;
  color: #1c1917;
}
.rf-total-price {
  font-weight: 800;
  color: #1c1917;
  text-align: right;
  white-space: nowrap;
}
.rf-total-sub {
  font-size: 11.5px;
  font-weight: 600;
  color: #78716c;
}

/* Studio Pro's regular price, crossed out before the price paid. */
.rf-was {
  color: #a8a29e;
  font-size: 0.6em;
  font-weight: 700;
  text-decoration: line-through;
  margin-right: 0.3em;
}
.bundle-item .b-price .rf-was {
  font-size: 0.9em;
}

/* Short labels stay on one line: when the assurances and the figure don't
   fit side by side, the figure moves under them instead of squeezing both. */
.bundle-total-main {
  flex-wrap: wrap;
  row-gap: 12px;
}
.bundle-total-assure li,
.bundle-total-caption,
.rf-plan-choice-name,
.rf-plan-choice-price,
.rf-addon-plan,
.bundle-item .b-price {
  white-space: nowrap;
}
.bundle-total-figures {
  flex-shrink: 0;
  margin-left: auto;
}

/* A launched app's three plans: founder across the top, monthly and yearly
   side by side under it, so no card is too narrow for its note. */
.rf-plan-choices-3 {
  grid-template-columns: 1fr 1fr;
}
.rf-plan-choices-3 .rf-plan-choice-founder {
  grid-column: 1 / -1;
}

/* Two-line titles get room between the lines instead of overlapping. */
.modal-head-name {
  line-height: 0.8;
}

@media (max-width: 420px) {
  /* Plans stacked on a phone, so notes stay on one line. */
  .rf-plan-choices,
  .rf-plan-choices-3 {
    grid-template-columns: 1fr;
  }
  .modal-head-name {
    font-size: 34px;
  }
  /* Add-on rows: the price goes under the name, so neither is squeezed. */
  .bundle-item {
    display: grid;
    grid-template-columns: 16px 1fr auto;
    column-gap: 10px;
    row-gap: 2px;
    align-items: center;
  }
  .bundle-item .b-icon { grid-column: 1; grid-row: 1; }
  .bundle-item .b-name { grid-column: 2; grid-row: 1; white-space: nowrap; }
  .bundle-item .b-price { grid-column: 2; grid-row: 2; margin: 0; font-size: 12px; }
  .bundle-item .rf-switch { grid-column: 3; grid-row: 1 / span 2; }
  .rf-addon-plans {
    margin-left: 26px;
  }
  .rf-plan-compare .rf-plan-row {
    grid-template-columns: 1fr 50px 74px;
    font-size: 11.5px;
  }
}
@media (max-width: 420px) {
  /* More of a small screen for the window itself. */
  .overlay {
    padding: 10px;
  }
  .rf-founder-perks {
    padding: 12px 14px;
  }
  .rf-founder-perks li {
    font-size: 12.5px;
  }
}
@media (max-width: 380px) {
  .modal-head-name {
    font-size: 30px;
  }
}

/* Even line breaks in the window's text. */
.modal p.sub,
.sub-note p,
.rf-founder-perks li,
.rf-founder-perks-note {
  text-wrap: balance;
}

/* The founder box carries the crown, large and faint in its corner. */
.rf-founder-perks-crown {
  position: relative;
  overflow: hidden;
}
.rf-founder-perks-crown > :not(.rf-perks-watermark) {
  position: relative;
  z-index: 1;
}
.rf-perks-watermark {
  position: absolute;
  right: -26px;
  bottom: -30px;
  width: 150px;
  height: 150px;
  color: #bb0016;
  opacity: 0.07;
  transform: rotate(-14deg);
  pointer-events: none;
}

/* Store apps window: a small note under an app's name, and Studio Pro's
   next charge under the amount due today. */
.rf-app-row .b-name {
  display: flex;
  flex-direction: column;
}
.rf-app-note {
  font-size: 11.5px;
  font-weight: 600;
  color: #78716c;
  line-height: 1.3;
}
.rf-app-row input:disabled {
  opacity: 0.5;
}
.rf-total-next {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #f0e4e1;
  font-family: var(--font-sans, sans-serif);
  font-size: 12.5px;
  font-weight: 600;
  color: #44403c;
  text-wrap: pretty;
}
.rf-switch-error {
  padding: 10px 12px;
  border-radius: 10px;
  background: #fdecea;
  color: #bb0016;
  font-size: 13px;
  font-weight: 600;
}
/* A long name breaks evenly rather than leaving one word on its own. */
.modal-head-name {
  text-wrap: balance;
}

/* Confirmation, shown for a few seconds before the Suite takes over. */
.rf-checkout-success {
  padding: 8px 0 4px;
  text-align: center;
}
.rf-checkout-success-icon {
  width: 56px;
  height: 56px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: #e8f5ee;
  color: #15803d;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rf-checkout-success-title {
  font-size: 20px;
  font-weight: 800;
  color: #1c1917;
  margin-bottom: 4px;
}
.rf-checkout-success-sub {
  font-size: 13px;
  color: #78716c;
}
.rf-checkout-success-lines {
  list-style: none;
  margin: 22px 0 0;
  padding: 0 0 12px;
  border-bottom: 1px solid #f0e4e1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.rf-checkout-success-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 20px;
  padding-top: 12px;
}
.rf-checkout-success-label {
  font-size: 13.5px;
  font-weight: 800;
  color: #1c1917;
}
.rf-checkout-success-figure {
  font-size: 20px;
  font-weight: 900;
  color: #bb0016;
  font-variant-numeric: tabular-nums;
}
.rf-checkout-success-redirect {
  text-align: center;
  font-size: 13px;
  color: #78716c;
  margin-bottom: 10px;
}
.rf-checkout-success-track {
  height: 4px;
  border-radius: 999px;
  background: #f2eae8;
  overflow: hidden;
}
.rf-checkout-success-bar {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #bb0016, #e1272b);
}
/* No countdown animation, so the bar reads as full rather than stuck. */
@media (prefers-reduced-motion: reduce) {
  .rf-checkout-success-bar {
    width: 100% !important;
    transition: none !important;
  }
}
/* The payment step's Pay button stays at the bottom of the window, like the
   checkout button it replaces. The pane draws no box of its own, so the
   button sticks to the window rather than only within the pane; its top
   rule and spacing move to the pane's first part. */
.modal > .rf-checkout-pane {
  display: contents;
}
.modal > .rf-checkout-pane > :first-child {
  display: block;
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid #eee;
}
.modal > .rf-checkout-pane > .rf-checkout-pay {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: 26px;
  margin-left: 4px;
  margin-right: 4px;
  width: calc(100% - 8px);
  box-shadow:
    0 0 0 10px #fff,
    0 -8px 12px 8px #fff;
}

/* A fade above the button while there's more to scroll under it. */
.modal > .btn-block::before {
  content: "";
  position: absolute;
  left: -18px;
  right: -18px;
  bottom: calc(100% + 1px);
  height: 56px;
  background: linear-gradient(to bottom, rgb(255 255 255 / 0), #fff);
  pointer-events: none;
  transition: opacity 0.2s ease;
}
.modal.is-end > .btn-block::before {
  opacity: 0;
}

/* ── Agency enquiry ───────────────────────────────────────────────────────
 * The line above the checkout button, and the form it opens. */
.rf-ent-plain {
  margin: 18px 0 0;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.5;
  color: #57534e;
  font-family: var(--font-sans);
  text-wrap: balance;
}
.rf-ent-plain a {
  color: #bb0016;
  font-weight: 800;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.rf-ent-overlay {
  position: fixed;
  inset: 0;
  z-index: 100002;
  background: rgb(28 25 23 / 45%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  box-sizing: border-box;
  font-family: var(--font-sans, "Hanken Grotesk", ui-sans-serif, system-ui, sans-serif);
  color: #1c1917;
}
.rf-ent-card {
  position: relative;
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 24px;
  box-shadow: 0 24px 70px rgb(0 0 0 / 25%);
  padding: 30px 28px 26px;
  box-sizing: border-box;
}
.rf-ent-x {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: #f6f1ef;
  color: #57534e;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.rf-ent-title { margin: 0 0 8px; padding-right: 40px; font-size: 24px; font-weight: 800; line-height: 1.2; text-wrap: balance; }
.rf-ent-sub { margin: 0 0 18px; font-size: 14.5px; line-height: 1.5; color: #57534e; text-wrap: pretty; }
.rf-ent-note { margin: -6px 0 14px; font-size: 12.5px; color: #78716c; }
.rf-ent-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.rf-ent-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }
.rf-ent-field > span { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: #57534e; }
.rf-ent-field em { font-style: normal; font-weight: 500; text-transform: none; letter-spacing: 0; color: #a8a29e; }
.rf-ent-input {
  width: 100%;
  height: 48px;
  box-sizing: border-box;
  border: 1px solid #e7dcda;
  border-radius: 12px;
  padding: 0 14px;
  font: inherit;
  font-size: 16px;
  color: #1c1917;
  background: #fff;
  outline: none;
}
.rf-ent-input:focus { border-color: #bb0016; box-shadow: 0 0 0 3px #bb00161a; }
.rf-ent-ta { height: 88px; padding-top: 12px; resize: vertical; line-height: 1.45; }
.rf-ent-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rf-ent-chip {
  padding: 9px 15px;
  border-radius: 999px;
  border: 1.5px solid #eadad7;
  background: #fff;
  color: #44403c;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}
.rf-ent-chip[aria-pressed="true"] { border-color: #bb0016; background: #fdf0ef; color: #bb0016; }
.rf-ent-chip:focus-visible { outline: 3px solid #bb001640; outline-offset: 2px; }
.rf-ent-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.rf-ent-err { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; background: #fff1f1; border: 1px solid #fecaca; color: #b91c1c; font-size: 13.5px; }
.rf-ent-err[hidden] { display: none; }
.rf-ent-ty { text-align: center; padding: 10px 4px 4px; }
.rf-ent-ty-ic { width: 64px; height: 64px; margin: 4px auto 14px; border-radius: 50%; background: #e8f7ee; color: #15803d; display: grid; place-items: center; }
.rf-ent-ty h2 { margin: 0 0 6px; font-size: 22px; font-weight: 800; }
.rf-ent-ty p { margin: 0 auto 18px; max-width: 340px; font-size: 14.5px; line-height: 1.5; color: #57534e; text-wrap: pretty; }
.rf-ent-ty .rf-ent-sub2 { font-size: 13px; color: #78716c; margin: 10px auto 0; }
@media (max-width: 520px) {
  .rf-ent-card { padding: 24px 18px 20px; border-radius: 20px; }
  .rf-ent-two { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .rf-ent-title { font-size: 21px; }
}
/* Phones: the three tools in one even row, so none sits alone on a line. */
@media (max-width: 520px) {
  .rf-ent-chips[data-name="tools"] { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .rf-ent-chips[data-name="tools"] .rf-ent-chip { padding: 9px 8px; border-radius: 16px; line-height: 1.25; text-wrap: balance; }
}