/* The discount popup: six designs, each its own composition (src/views/site/promo.js). Loaded only on pages where
   a discount popup is live, and on the admin's discount page for the previews - it is not part of site.min.css.
   Everything is built from the site's own tokens (base.css) and the same shapes the homepage uses (the dark
   gradient card, the proof numbers, the priced packs), so a card reads as Sellhelm, not as a bolt-on. The
   percentage is shown once per card; the rest sells - and every price is shown in every country's money at once,
   with a claim link for each country under the button. */

/* ---- the dialog and its backdrop ---- */
.promo { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(6, 9, 20, .55); backdrop-filter: blur(3px); opacity: 0; transition: opacity .22s ease; }
.promo.promo-in { opacity: 1; }
.promo[hidden] { display: none; }
body.promo-open { overflow: hidden; }
/* Never a scrollbar on a card, in either direction (Craig, 28 Sept 2026): the card clips, and the phone rules
   further down keep every design short enough to fit a phone screen whole. */
.promo-card { position: relative; width: min(100%, 560px); overflow: hidden; border-radius: 26px; transform: translateY(14px) scale(.98); transition: transform .26s cubic-bezier(.2, .8, .2, 1); box-shadow: 0 40px 90px -30px rgba(0, 0, 20, .7); }
.promo-in .promo-card { transform: none; }
.promo-close { position: absolute; top: 14px; right: 14px; z-index: 2; width: 36px; height: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .12); color: #fff; display: grid; place-items: center; cursor: pointer; transition: background .15s; }
.promo-close:hover { background: rgba(255, 255, 255, .22); }
.promo-close:focus-visible, .promo-copy:focus-visible, .promo-no:focus-visible, .promo-claim-alt:focus-visible { outline: 2px solid var(--cobalt); outline-offset: 2px; }

/* ---- the two palettes: dark (the homepage's .sturdy gradient) and light (its white cards) ---- */
.promo-t-spotlight .promo-card, .promo-t-countdown .promo-card, .promo-t-fullscreen .promo-card {
  background: radial-gradient(ellipse 60% 70% at 88% 0%, rgba(105, 92, 255, .32), transparent 70%), radial-gradient(ellipse 50% 60% at 0% 100%, rgba(61, 123, 255, .2), transparent 70%), #080c1a; color: #cfd8f3; border: 1px solid rgba(255, 255, 255, .1);
}
.promo-t-ticket .promo-card, .promo-t-corner .promo-card, .promo-t-compare .promo-card { background: #fff; color: var(--text); border: 1px solid var(--line); }
.promo-t-ticket .promo-close, .promo-t-corner .promo-close, .promo-t-compare .promo-close { background: var(--paper); color: var(--text); }
.promo-t-ticket .promo-close:hover, .promo-t-corner .promo-close:hover, .promo-t-compare .promo-close:hover { background: #e6ebf7; }

/* ---- shared parts (their light-palette look; the dark palette restyles them further down) ---- */
.promo-body { padding: 26px 28px 24px; }
.promo-visual { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px 28px 6px; }
.promo-pct { display: inline-flex; align-items: baseline; gap: 6px; line-height: 1; letter-spacing: -.04em; color: #fff; }
.promo-pct b { font: 800 clamp(56px, 12vw, 84px)/1 var(--font-display); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.promo-pct span { font: 700 clamp(18px, 4vw, 24px)/1 var(--font-display); text-transform: uppercase; letter-spacing: .04em; color: #8db2ff; }
/* The same number as a small pill, for the designs that lead with something else. */
.promo-pct-inline { gap: 3px; padding: 5px 9px; border-radius: 999px; background: var(--green-bg); color: var(--green-text); letter-spacing: 0; vertical-align: middle; }
.promo-pct-inline b { font: 800 13px/1 var(--font); background: none; -webkit-background-clip: initial; background-clip: initial; color: inherit; letter-spacing: -.01em; }
.promo-pct-inline span { font: 700 11px/1 var(--font); letter-spacing: .02em; color: inherit; }
.promo-eyebrow { margin: 0 0 10px; display: flex; align-items: center; gap: 10px; font: 700 11.5px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cobalt); }
.promo-sep { width: 1px; height: 14px; background: currentColor; opacity: .35; }
.promo-h { margin: 0 0 10px; font: 700 clamp(22px, 3vw, 30px)/1.15 var(--font-display); letter-spacing: -.03em; color: var(--text); }
.promo-p { margin: 0 0 18px; font-size: 15.5px; line-height: 1.55; color: var(--muted); }
.promo-flag { display: inline-block; width: 20px; height: 10px; border-radius: 2px; overflow: hidden; flex: none; box-shadow: 0 0 0 1px rgba(0, 0, 0, .12); vertical-align: -1px; }
.promo-flag svg { display: block; width: 100%; height: 100%; }
.promo-code { display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 14px; border: 1px dashed #b9c9f5; background: var(--paper); margin-bottom: 16px; color: var(--text); }
.promo-code-label { font: 600 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint-text); }
.promo-code-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 700 20px/1 var(--mono); letter-spacing: .12em; color: var(--cobalt); }
.promo-copy { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line-2); background: #fff; color: var(--text); font: 600 13px var(--font); cursor: pointer; transition: background .15s, border-color .15s; }
.promo-copy:hover { border-color: var(--cobalt); color: var(--cobalt); }
.promo-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.promo-cta { flex: 1; min-width: 200px; justify-content: center; }
.promo-no { background: none; border: 0; padding: 8px 4px; font: 500 14px var(--font); color: var(--muted); cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.promo-no:hover { color: var(--text); }
/* The other country's claim, on its own line under the button: its flag, the question, the link - plain words,
   never a second big button fighting the first. */
.promo-alt { margin: 12px 0 0; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 14px; line-height: 1.4; color: var(--muted); }
.promo-claim-alt { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: var(--blue); text-decoration: none; }
.promo-claim-alt i { font-style: normal; transition: transform .15s; }
.promo-claim-alt:hover { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.promo-claim-alt:hover i { transform: translateX(3px); }
.promo-fine { margin: 16px 0 0; display: flex; align-items: flex-start; gap: 8px; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.promo-fine svg { flex: none; color: var(--green); margin-top: 1px; }
.promo-inline { display: flex; gap: 10px; align-items: stretch; }
.promo-inline .promo-code { flex: 1; margin: 0; }
.promo-inline .promo-cta { flex: none; min-width: 0; height: auto; padding-inline: 20px; }
.promo-now { font: 700 17px var(--font-display); letter-spacing: -.02em; color: var(--text); }
.promo-prices s, .promo-strip s { color: var(--faint-text); text-decoration-color: var(--red); text-decoration-thickness: 1.5px; }

/* The three packs, a column per country: flag and marketplace at the head of each column, and in every cell the
   old price struck through over today's. Two countries today; a third column is one more line here. */
.promo-prices { margin: 0 0 18px; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: #fff; }
.promo-prices-head, .promo-prices-row { display: grid; grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, 1fr)); align-items: center; gap: 10px; padding: 10px 14px; }
.promo-prices[data-cols="3"] .promo-prices-head, .promo-prices[data-cols="3"] .promo-prices-row { grid-template-columns: minmax(0, 1fr) repeat(3, minmax(0, 1fr)); }
.promo-prices-head { padding: 9px 14px; background: var(--paper); border-bottom: 1px solid var(--line); font: 700 11px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint-text); }
.promo-prices-cur { display: inline-flex; align-items: center; gap: 7px; justify-self: end; white-space: nowrap; }
.promo-prices-cur.is-here { color: var(--cobalt); }
.promo-prices-row + .promo-prices-row { border-top: 1px solid var(--line); }
.promo-prices-row.is-best { background: var(--blue-bg); }
.promo-prices-name { font-weight: 650; font-size: 14.5px; color: var(--text); }
.promo-prices-name small { display: block; font-weight: 500; font-size: 12px; color: var(--faint-text); margin-top: 1px; }
.promo-prices-cell { display: grid; justify-items: end; gap: 1px; text-align: right; font-size: 12.5px; }

/* Solo, big, in every country's money side by side. */
.promo-strip { margin: 0 0 16px; }
.promo-strip-label { display: block; margin-bottom: 8px; font: 700 11.5px/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint-text); }
.promo-strip-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.promo-pp { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "flag cur" "was was" "now now"; column-gap: 7px; padding: 10px 12px 11px; border-radius: 12px; border: 1px solid var(--line); background: var(--paper); }
.promo-pp.is-here { border-color: #b9c9f5; background: var(--blue-bg); }
.promo-pp .promo-flag { grid-area: flag; align-self: center; }
.promo-pp-cur { grid-area: cur; font: 700 11px/1.2 var(--mono); letter-spacing: .06em; text-transform: uppercase; color: var(--faint-text); align-self: center; }
.promo-pp s { grid-area: was; margin-top: 8px; font-size: 13px; }
.promo-pp .promo-now { grid-area: now; font-size: 26px; letter-spacing: -.035em; line-height: 1.1; }

.promo-proof { list-style: none; margin: 0; padding: 18px 28px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; border-top: 1px solid rgba(255, 255, 255, .1); }
.promo-proof li { display: grid; gap: 2px; }
.promo-proof b { font: 700 clamp(22px, 3vw, 30px)/1 var(--font-display); letter-spacing: -.03em; color: #fff; }
.promo-proof span { font-size: 12.5px; line-height: 1.35; color: #a8b5dc; }
.promo-clock { display: flex; gap: 10px; padding: 12px 16px; border-radius: 14px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); }
.promo-clock > span { display: grid; justify-items: center; gap: 4px; min-width: 52px; }
.promo-clock b { font: 700 30px/1 var(--mono); letter-spacing: -.02em; color: #fff; }
.promo-clock i { font: 600 10px/1 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #8db2ff; font-style: normal; }
.promo-compare { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 6px; }
.promo-compare li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; align-items: baseline; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.promo-compare li.is-us { background: linear-gradient(170deg, #0a0f1f, #141b46); border-color: transparent; color: #fff; }
.promo-compare-name { font-weight: 650; font-size: 15px; }
.promo-compare-price { display: flex; align-items: baseline; gap: 6px; justify-self: end; flex-wrap: wrap; justify-content: flex-end; }
.promo-compare-price b, .promo-compare-price .promo-now { font: 700 20px var(--font-display); letter-spacing: -.02em; color: inherit; text-align: right; }
.promo-compare-price i { font: 500 12px var(--font); font-style: normal; color: #a3b3e6; }
.promo-compare-price small { font-size: 12px; color: var(--faint-text); }
.promo-compare li.is-us .promo-compare-price small { color: #a3b3e6; }
.promo-compare-note { grid-column: 1 / -1; font-size: 12.5px; color: var(--muted); }
.promo-compare li.is-us .promo-compare-note { color: #5be3a9; font-weight: 600; }

@media (max-width: 480px) {
  .promo { padding: 12px; }
  .promo-body { padding: 18px 18px 16px; }
  .promo-visual { padding: 30px 20px 2px; }
  .promo-h { margin-bottom: 8px; }
  .promo-p { font-size: 14.5px; margin-bottom: 14px; }
  .promo-code { margin-bottom: 12px; }
  .promo-alt { margin-top: 10px; font-size: 13.5px; }
  .promo-fine { margin-top: 12px; }
  .promo-clock { gap: 6px; padding: 10px 12px; } .promo-clock > span { min-width: 44px; } .promo-clock b { font-size: 24px; }
  .promo-inline { flex-direction: column; } .promo-inline .promo-cta { width: 100%; height: 48px; }
  .promo-code { gap: 8px; padding: 8px 8px 8px 12px; } .promo-code-label { white-space: nowrap; font-size: 10.5px; } .promo-code-value { font-size: 17px; letter-spacing: .08em; } .promo-copy { padding: 0 10px; flex: none; }
  .promo-prices-head, .promo-prices-row { padding: 9px 10px; gap: 6px; }
  .promo-best { display: none; }
  .promo-prices-cur { font-size: 10px; gap: 5px; }
  .promo-prices-name { font-size: 13.5px; }
  .promo-strip-pair { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }
  .promo-pp { padding: 8px 10px 9px; }
  .promo-pp .promo-now { font-size: 22px; }
  .promo-strip { margin-bottom: 12px; }
  .promo-prices { margin-bottom: 14px; }
}
/* A short screen (a small phone, a laptop with the browser bar open): the small print and the standing paragraph
   go before anything a visitor needs - the prices, the code, the button - so the card still fits whole. */
@media (max-height: 720px) and (max-width: 480px) { .promo-fine, .promo-p { display: none; } }
@media (max-height: 640px) { .promo-fine { display: none; } .promo-visual { padding-top: 22px; } .promo-pct b { font-size: 48px; } }

/* ---- the dark palette's versions of the shared parts ---- */
.promo-t-spotlight .promo-h, .promo-t-countdown .promo-h, .promo-t-fullscreen .promo-h { color: #fff; }
.promo-t-spotlight .promo-p, .promo-t-countdown .promo-p, .promo-t-fullscreen .promo-p { color: #b6c2e6; }
.promo-t-spotlight .promo-eyebrow, .promo-t-countdown .promo-eyebrow, .promo-t-fullscreen .promo-eyebrow { color: #8db2ff; }
.promo-t-spotlight .promo-code, .promo-t-countdown .promo-code, .promo-t-fullscreen .promo-code { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .28); color: #fff; }
.promo-t-spotlight .promo-code-label, .promo-t-countdown .promo-code-label, .promo-t-fullscreen .promo-code-label { color: rgba(255, 255, 255, .55); }
.promo-t-spotlight .promo-code-value, .promo-t-countdown .promo-code-value, .promo-t-fullscreen .promo-code-value { color: #fff; }
.promo-t-spotlight .promo-copy, .promo-t-countdown .promo-copy, .promo-t-fullscreen .promo-copy { background: transparent; border-color: rgba(255, 255, 255, .3); color: #fff; }
.promo-t-spotlight .promo-copy:hover, .promo-t-countdown .promo-copy:hover, .promo-t-fullscreen .promo-copy:hover { background: rgba(255, 255, 255, .1); border-color: #fff; color: #fff; }
.promo-t-spotlight .promo-no, .promo-t-countdown .promo-no, .promo-t-fullscreen .promo-no { color: #a8b5dc; }
.promo-t-spotlight .promo-no:hover, .promo-t-countdown .promo-no:hover, .promo-t-fullscreen .promo-no:hover { color: #fff; }
.promo-t-spotlight .promo-fine, .promo-t-countdown .promo-fine, .promo-t-fullscreen .promo-fine, .promo-t-spotlight .promo-alt, .promo-t-countdown .promo-alt, .promo-t-fullscreen .promo-alt { color: #a8b5dc; }
.promo-t-spotlight .promo-claim-alt, .promo-t-countdown .promo-claim-alt, .promo-t-fullscreen .promo-claim-alt { color: #8db2ff; }
.promo-t-spotlight .promo-claim-alt:hover, .promo-t-countdown .promo-claim-alt:hover, .promo-t-fullscreen .promo-claim-alt:hover { color: #fff; }
.promo-t-countdown .promo-pct-inline { background: rgba(52, 211, 153, .16); color: #6ee7b7; }
.promo-t-spotlight .promo-flag, .promo-t-countdown .promo-flag, .promo-t-fullscreen .promo-flag { box-shadow: 0 0 0 1px rgba(255, 255, 255, .35); }
.promo-t-spotlight .promo-strip-label, .promo-t-countdown .promo-strip-label, .promo-t-fullscreen .promo-strip-label, .promo-t-spotlight .promo-pp-cur, .promo-t-countdown .promo-pp-cur, .promo-t-fullscreen .promo-pp-cur { color: #a3b3e6; }
.promo-t-spotlight .promo-pp, .promo-t-countdown .promo-pp, .promo-t-fullscreen .promo-pp { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .12); }
.promo-t-spotlight .promo-pp.is-here, .promo-t-countdown .promo-pp.is-here, .promo-t-fullscreen .promo-pp.is-here { background: rgba(61, 123, 255, .16); border-color: rgba(141, 178, 255, .45); }
.promo-t-spotlight .promo-now, .promo-t-countdown .promo-now, .promo-t-fullscreen .promo-now { color: #fff; }
.promo-t-spotlight s, .promo-t-countdown s, .promo-t-fullscreen .promo-strip s, .promo-t-fullscreen .promo-prices s { color: #8a97c0; }
.promo-t-fullscreen .promo-prices { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); }
.promo-t-fullscreen .promo-prices-head { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .1); color: #a3b3e6; }
.promo-t-fullscreen .promo-prices-cur.is-here { color: #8db2ff; }
.promo-t-fullscreen .promo-prices-row + .promo-prices-row { border-color: rgba(255, 255, 255, .1); }
.promo-t-fullscreen .promo-prices-row.is-best { background: rgba(61, 123, 255, .14); }
.promo-t-fullscreen .promo-prices-name { color: #fff; }
.promo-t-fullscreen .promo-prices-name small { color: #a8b5dc; }

/* ---- 1. Spotlight ---- */
.promo-t-spotlight .promo-body { padding-top: 18px; }

/* ---- 2. Ticket: the code on a tear-off ticket, then all three packs ---- */
.promo-t-ticket .promo-body { padding-top: 30px; }
.promo-t-ticket .promo-ticket { position: relative; margin: 0 -28px 18px; padding: 16px 28px; background: var(--paper); border-top: 1px dashed #b9c9f5; border-bottom: 1px dashed #b9c9f5; }
.promo-t-ticket .promo-ticket::before, .promo-t-ticket .promo-ticket::after { content: ''; position: absolute; top: 50%; width: 22px; height: 22px; border-radius: 50%; background: #fff; border: 1px solid var(--line); transform: translateY(-50%); }
.promo-t-ticket .promo-ticket::before { left: -12px; } .promo-t-ticket .promo-ticket::after { right: -12px; }
.promo-t-ticket .promo-ticket .promo-code { margin: 0; background: #fff; border-style: solid; border-color: var(--line-2); }
@media (max-width: 480px) { .promo-t-ticket .promo-ticket { margin-inline: -20px; padding-inline: 20px; } }

/* ---- 3. Countdown: the clock is the hero ---- */
.promo-t-countdown .promo-visual { padding: 36px 28px 4px; }
.promo-t-countdown .promo-body { padding-top: 16px; }
.promo-t-countdown .promo-eyebrow { color: #f6b26b; }

/* ---- 4. Corner card: bottom-right, with the Solo price before and after ---- */
.promo-t-corner { align-items: flex-end; justify-content: flex-end; padding: 20px; background: none; backdrop-filter: none; pointer-events: none; }
.promo-t-corner .promo-card { pointer-events: auto; width: min(100%, 380px); border-radius: 20px; box-shadow: 0 30px 60px -24px rgba(20, 30, 90, .4); transform: translateY(16px); }
.promo-t-corner.promo-in .promo-card { transform: none; }
.promo-t-corner .promo-body { padding: 22px 22px 20px; }
.promo-t-corner .promo-h { font-size: 19px; }
.promo-t-corner .promo-strip { margin-bottom: 12px; }
.promo-t-corner .promo-strip-pair { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 6px; }
.promo-t-corner .promo-pp { padding: 8px 10px 9px; }
.promo-t-corner .promo-pp .promo-now { font-size: 22px; }
.promo-t-corner .promo-code { padding: 8px 8px 8px 14px; margin-bottom: 12px; }
.promo-t-corner .promo-code-value { font-size: 17px; }
.promo-t-corner .promo-close { width: 30px; height: 30px; }
.promo-t-corner .promo-cta { min-width: 0; height: 40px; font-size: 14.5px; }
.promo-t-corner .promo-alt { margin-top: 10px; font-size: 13px; }
@media (max-width: 480px) { .promo-t-corner .promo-code-label { display: none; } }

/* ---- 5. Full screen: the whole viewport, every pack repriced, the proof underneath ---- */
.promo-t-fullscreen { padding: 0; background: #080c1a; backdrop-filter: none; }
.promo-t-fullscreen .promo-card { width: 100%; max-width: none; height: 100%; border-radius: 0; border: 0; box-shadow: none; display: grid; grid-template-rows: auto minmax(0, 1fr) auto; align-content: center; }
/* On a phone the whole-screen card keeps to the screen: the number smaller, the standing paragraph and the proof
   row gone, the price table tight - never a scroll (Craig, 28 Sept 2026). */
@media (max-width: 480px) {
  .promo-t-fullscreen .promo-visual { padding: 44px 20px 0; }
  .promo-t-fullscreen .promo-pct b { font-size: 60px; }
  .promo-t-fullscreen .promo-p, .promo-t-fullscreen .promo-proof { display: none; }
  .promo-t-fullscreen .promo-body { padding: 4px 18px 16px; }
  .promo-t-fullscreen .promo-cta { min-width: 0; width: 100%; }
}
.promo-t-fullscreen .promo-visual { padding: clamp(28px, 5vh, 56px) 28px 0; }
.promo-t-fullscreen .promo-pct b { font-size: clamp(72px, 14vw, 120px); }
.promo-t-fullscreen .promo-body { max-width: 640px; width: 100%; margin: 0 auto; padding: 8px 28px 24px; text-align: center; }
.promo-t-fullscreen .promo-eyebrow, .promo-t-fullscreen .promo-actions, .promo-t-fullscreen .promo-alt { justify-content: center; }
.promo-t-fullscreen .promo-h { font-size: clamp(26px, 4vw, 40px); }
.promo-t-fullscreen .promo-prices { text-align: left; }
.promo-t-fullscreen .promo-code { max-width: 380px; margin-inline: auto; }
.promo-t-fullscreen .promo-cta { flex: none; min-width: 260px; }
.promo-t-fullscreen .promo-proof { max-width: 720px; width: 100%; margin: 0 auto; text-align: center; }
.promo-t-fullscreen .promo-proof li { justify-items: center; }
.promo-t-fullscreen .promo-close { top: 24px; right: 24px; width: 42px; height: 42px; }

/* ---- 6. Compare: one payment against the subscription tools ---- */
.promo-t-compare .promo-card { width: min(100%, 540px); }
.promo-t-compare .promo-body { padding: 30px 28px 24px; }
.promo-t-compare .promo-h { font-size: 24px; margin-bottom: 16px; }
@media (max-width: 480px) { .promo-compare li { grid-template-columns: minmax(0, 1fr); gap: 2px; padding: 10px 12px; } .promo-compare-price { justify-self: start; justify-content: flex-start; } .promo-compare { margin-bottom: 14px; } }

/* ---- the admin's previews: shown inline, no backdrop, nothing clickable ---- */
.promo-preview { position: static; inset: auto; display: block; padding: 0; background: none; backdrop-filter: none; opacity: 1; pointer-events: none; }
.promo-preview .promo-card { transform: none; margin: 0 auto; max-height: none; overflow: hidden; box-shadow: 0 24px 60px -30px rgba(0, 0, 20, .45); }
.promo-preview.promo-t-corner { display: flex; justify-content: flex-end; }
/* Full screen fills the real viewport, so in the small preview box it gets fixed, contained sizes rather than the
   zoom trick the other cards use (see admin.css) - otherwise only a sliver of it fits. */
.promo-preview.promo-t-fullscreen { display: flex; height: 100%; }
.promo-preview.promo-t-fullscreen .promo-card { width: 100%; height: 100%; overflow: hidden; grid-template-rows: auto auto auto; }
.promo-preview.promo-t-fullscreen .promo-visual { padding: 14px 16px 0; }
.promo-preview.promo-t-fullscreen .promo-pct b { font-size: 36px; }
.promo-preview.promo-t-fullscreen .promo-pct span { font-size: 12px; }
.promo-preview.promo-t-fullscreen .promo-body { padding: 4px 16px 10px; }
.promo-preview.promo-t-fullscreen .promo-eyebrow { font-size: 9px; margin-bottom: 4px; }
.promo-preview.promo-t-fullscreen .promo-h { font-size: 14px; margin-bottom: 4px; }
.promo-preview.promo-t-fullscreen .promo-p, .promo-preview.promo-t-fullscreen .promo-alt, .promo-preview.promo-t-fullscreen .promo-no { display: none; }
.promo-preview.promo-t-fullscreen .promo-prices { margin-bottom: 8px; border-radius: 8px; }
.promo-preview.promo-t-fullscreen .promo-prices-head, .promo-preview.promo-t-fullscreen .promo-prices-row { padding: 3px 8px; gap: 6px; }
.promo-preview.promo-t-fullscreen .promo-prices-head { font-size: 7px; }
.promo-preview.promo-t-fullscreen .promo-prices-name { font-size: 10px; }
.promo-preview.promo-t-fullscreen .promo-prices-name small { display: none; }
.promo-preview.promo-t-fullscreen .promo-prices-cell { font-size: 9px; gap: 0; }
.promo-preview.promo-t-fullscreen .promo-flag { width: 12px; height: 6px; }
.promo-preview.promo-t-fullscreen .promo-now { font-size: 11px; }
.promo-preview.promo-t-fullscreen .promo-code { padding: 4px 4px 4px 8px; margin-bottom: 8px; gap: 6px; max-width: 220px; }
.promo-preview.promo-t-fullscreen .promo-code-label { font-size: 8px; }
.promo-preview.promo-t-fullscreen .promo-code-value { font-size: 12px; }
.promo-preview.promo-t-fullscreen .promo-copy { height: 20px; font-size: 10px; padding: 0 6px; gap: 3px; }
.promo-preview.promo-t-fullscreen .promo-copy svg { width: 10px; height: 10px; }
.promo-preview.promo-t-fullscreen .promo-cta { min-width: 0; height: 28px; font-size: 11.5px; }
.promo-preview.promo-t-fullscreen .promo-proof { padding: 8px 16px 10px; gap: 6px; }
.promo-preview.promo-t-fullscreen .promo-proof b { font-size: 15px; }
.promo-preview.promo-t-fullscreen .promo-proof span { font-size: 9px; }
.promo-preview.promo-t-fullscreen .promo-close { width: 24px; height: 24px; top: 8px; right: 8px; }
.promo-preview.promo-t-fullscreen .promo-close svg { width: 12px; height: 12px; }