/* ============================================================================
   SEASON MODE — the sale skin.

   This file is only downloaded while a campaign is running. Nothing in it is
   loaded on a normal day, so none of it can affect the ordinary site.

   Every rule is scoped to html.sc-cmp. That is deliberate, and it is what
   makes "switch it off and everything goes back" true rather than hopeful:
   drop the class and not one of these rules can match anything.

   WHAT IS AND IS NOT HERE
   -----------------------
   The dark sections are NOT in this file. skycore-2026.css already carries a
   full dark theme under .x-dark, and the campaign simply puts that class on
   more sections. What is here is only the three things that theme does not
   already do:

     1. the scrolling strip across the top, which is new
     2. repainting the dark sections from violet to near-black
     3. the handful of places still hardcoded light that would otherwise sit
        as white boxes in the middle of a dark page

   Keeping it to that is why this is short. Most of the work was already done
   and tested months ago.
   ========================================================================= */


/* ---------------------------------------------------------------------------
   1. THE TICKER
   ------------------------------------------------------------------------ */

html.sc-cmp {
  /* A CONSTANT, and it has to stay one.

     The promo bar measures its own height at runtime because its text wraps
     on a narrow phone. This cannot wrap - it is a single line that scrolls
     sideways - so its height is known in advance and needs no measuring.

     Do not point this at a measured value. Pairing a reserve with something
     that reads back from the thing it is reserving for is how the promo bar
     once inflated itself to 290px. */
  --sc-cmp-tick-h: 38px;

  /* Fallbacks. The real values are written into the page by the engine from
     campaign.php, so these only apply if someone loads this file directly. */
  --sc-cmp-tick-bg: #FF3B5C;
  --sc-cmp-tick-ink: #fff;
  --sc-cmp-tick-speed: 40s;
}

html.sc-cmp .sc-cmp-tick {
  position: fixed;
  inset: 0 0 auto 0;
  /* Above the promo bar (1001), below the mobile menu panel (9990). */
  z-index: 1002;
  height: var(--sc-cmp-tick-h);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--sc-cmp-tick-bg);
  color: var(--sc-cmp-tick-ink);
  font-family: var(--sc-font, inherit);
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .01em;
  /* The strip is decoration that moves. Nothing in it is clickable, and
     letting a drag-select start inside a moving element is unpleasant. */
  user-select: none;
  -webkit-user-select: none;
}

/* Two identical runs side by side. The track slides exactly half its own
   width, so at the moment the animation resets, the second copy is sitting
   precisely where the first began - the loop has no seam. */
html.sc-cmp .sc-cmp-tick-track {
  display: flex;
  flex: none;
  width: max-content;
  animation: sc-cmp-marquee var(--sc-cmp-tick-speed) linear infinite;
  will-change: transform;
}
html.sc-cmp .sc-cmp-tick-run {
  display: flex;
  flex: none;
  align-items: center;
}
html.sc-cmp .sc-cmp-tick-item,
html.sc-cmp .sc-cmp-tick-sep {
  flex: none;
  white-space: nowrap;
  padding: 0 22px;
}
html.sc-cmp .sc-cmp-tick-sep { opacity: .55; font-weight: 400; }

@keyframes sc-cmp-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

/* Sideways motion that never stops is exactly what this setting exists for.
   The words still matter, so the strip stays and only the movement goes -
   it becomes a plain centred line instead of disappearing. */
@media (prefers-reduced-motion: reduce) {
  html.sc-cmp .sc-cmp-tick-track { animation: none; }
  html.sc-cmp .sc-cmp-tick { justify-content: center; }
  html.sc-cmp .sc-cmp-tick-run[aria-hidden="true"] { display: none; }
}

/* A preview is forced on by ?campaign=preview whatever the dates say, so it
   has to be impossible to mistake for the live strip. */
html.sc-cmp .sc-cmp-tick[data-preview]::after {
  content: "PREVIEW";
  position: absolute; right: 0; top: 0; bottom: 0;
  display: flex; align-items: center;
  padding: 0 12px;
  background: rgba(0,0,0,.55);
  font-size: 10px; font-weight: 700; letter-spacing: .14em;
}


/* ---------------------------------------------------------------------------
   2. MAKING ROOM FOR IT

   .header is position:absolute at top:0 and the promo bar is fixed at 0, so
   anything added above them has to push both down and pad the body by the
   same amount. The promo bar already does this for itself; these rules stack
   the ticker on top of whatever it has already reserved.

   The !important on each padding-top is load-bearing: header.php resets bare
   `body` with `padding-top: 0 !important` to keep Google Translate out, and
   that flattens our reserve unless we outrank it. The long version of this is
   in the docblock above sc_promo_styles() in partials/promo-bar.php. */

html.sc-cmp-tick-on body            { padding-top: var(--sc-cmp-tick-h) !important; }
html.sc-cmp-tick-on .header         { top: var(--sc-cmp-tick-h) !important; }

/* Both running at once - the usual arrangement during a sale. The promo bar
   has already reserved its own height, so these add the strip on top of it
   rather than replacing it. */
html.sc-cmp-tick-on.has-promo .sc-promo { top: var(--sc-cmp-tick-h) !important; }
html.sc-cmp-tick-on.has-promo body      { padding-top: calc(var(--sc-cmp-tick-h) + var(--sc-promo-h)) !important; }
html.sc-cmp-tick-on.has-promo .header   { top: calc(var(--sc-cmp-tick-h) + var(--sc-promo-h)) !important; }

@media (max-width: 767px) {
  html.sc-cmp { --sc-cmp-tick-h: 34px; }
  html.sc-cmp .sc-cmp-tick { font-size: 12.5px; }
  html.sc-cmp .sc-cmp-tick-item,
  html.sc-cmp .sc-cmp-tick-sep { padding: 0 15px; }
}


/* ---------------------------------------------------------------------------
   3. REPAINTING THE DARK SECTIONS

   The normal dark section is a deep violet built from two radial gradients
   over #130A31. That reads as "our brand at night", which is right most of
   the year and wrong for Black Friday - the whole point of the season is
   that the page goes properly black.

   So the same three-layer construction is kept, with the violet swapped for
   the campaign ground and the light sources tinted with the sale colour.
   Keeping the construction rather than flattening it to one colour is what
   stops the sections going dead - the depth is what made them look lit.
   ------------------------------------------------------------------------ */

html.sc-cmp-dark .sx .x-sec.x-dark {
  background:
    radial-gradient(ellipse 90% 80% at 14% 0%,
      color-mix(in srgb, var(--sc-cmp-accent, #FF3B5C) var(--sc-cmp-glow, 10%), var(--sc-cmp-ground, #050309)), transparent 58%),
    radial-gradient(ellipse 70% 60% at 92% 100%,
      var(--sc-cmp-ground-2, #15101D), transparent 60%),
    var(--sc-cmp-ground, #050309);
}

/* The hero is the same material as the dark sections by design - the two are
   meant to read as one surface - so it has to be repainted with them. */
html.sc-cmp-dark .sx .x-hero {
  background:
    radial-gradient(ellipse 90% 70% at 18% 0%,
      color-mix(in srgb, var(--sc-cmp-accent, #FF3B5C) var(--sc-cmp-glow, 10%), var(--sc-cmp-ground, #050309)), transparent 60%),
    radial-gradient(ellipse 80% 70% at 88% 100%,
      var(--sc-cmp-ground-2, #15101D), transparent 62%),
    var(--sc-cmp-ground, #050309);
}

/* color-mix is recent. Without it the first gradient stop is dropped and the
   section falls back to flat black - still correct, just less lit - so the
   page never breaks, it only loses a little depth. */
@supports not (background: color-mix(in srgb, red 20%, blue)) {
  html.sc-cmp-dark .sx .x-sec.x-dark,
  html.sc-cmp-dark .sx .x-hero {
    background: var(--sc-cmp-ground, #050309);
  }
}


/* ---------------------------------------------------------------------------
   4. THE LIGHT PATCHES

   main.css and pages.css predate the token system and hardcode their
   backgrounds, so a few components stay white when everything around them
   goes dark. These are the ones that actually land inside a darkened
   section; a white card on a black page is the single most obvious way for
   a seasonal skin to look broken.

   Each is written as a translucent white rather than a fixed grey, so it
   picks up whatever ground colour campaign.php is set to instead of needing
   its own value per campaign.
   ------------------------------------------------------------------------ */

html.sc-cmp-dark .sx .x-sec.x-dark .x-card,
html.sc-cmp-dark .sx .x-sec.x-dark .x-box,
html.sc-cmp-dark .sx .x-sec.x-dark .x-panel {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.10);
  box-shadow: none;
}

/* Inputs keep a visible edge: a search field that vanishes into the page is
   the one thing people will try to click first. */
html.sc-cmp-dark .sx .x-sec.x-dark input[type="text"],
html.sc-cmp-dark .sx .x-sec.x-dark input[type="search"],
html.sc-cmp-dark .sx .x-sec.x-dark input[type="email"] {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
  color: #fff;
}
html.sc-cmp-dark .sx .x-sec.x-dark input::placeholder { color: rgba(255,255,255,.45); }


/* ---------------------------------------------------------------------------
   5. THE SALE COLOUR WHERE IT NEEDS HELP

   Most of the site follows --sc-primary and --x-brand, which the engine has
   already repointed at the sale colour, so buttons and prices turn red on
   their own. These are the few that do not.
   ------------------------------------------------------------------------ */

html.sc-cmp .sx .x-tier.popular {
  border-color: var(--sc-cmp-accent, #FF3B5C);
}
html.sc-cmp .sx .x-tier-badge {
  background: var(--sc-cmp-accent, #FF3B5C);
  color: #fff;
}

/* Focus rings are drawn from the brand colour in places and would otherwise
   stay purple on a red page - a small thing, but it is the sort of detail
   that gives away a skin applied only to the obvious parts. */
html.sc-cmp :focus-visible {
  outline-color: var(--sc-cmp-accent, #FF3B5C);
}


/* ---------------------------------------------------------------------------
   6. THE CAMPAIGN HERO

   Only on the homepage, only while the sale runs. It replaces the usual
   heading and lead; everything below it on the page is untouched.

   The shape is deliberately top-heavy: a small pill, then the season in very
   large type, then the number as the loudest object on the screen, then the
   offer in plain words. A visitor who reads nothing but the second and third
   lines still leaves knowing what the sale is and how big it is.
   ------------------------------------------------------------------------ */

html.sc-cmp .sc-cmp-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* The season, named once and quietly, so the headline does not have to. */
html.sc-cmp .sc-cmp-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  margin: 0 0 18px;
  padding: 6px 15px;
  border-radius: 100px;
  background: color-mix(in srgb, var(--sc-cmp-accent, #FF3B5C) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--sc-cmp-accent, #FF3B5C) 42%, transparent);
  color: #fff;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}

html.sc-cmp .sc-cmp-hero-h1 {
  margin: 0;
  color: #fff;
  /* Tighter than the usual display setting. Two or three short words set
     this large need the leading pulled in or they drift apart. */
  line-height: .98;
  letter-spacing: -.02em;
  text-wrap: balance;
}

html.sc-cmp .sc-cmp-hero-lead {
  margin: 22px auto 0;
  max-width: 50ch;
}

html.sc-cmp .sc-cmp-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  margin: 26px 0 0;
  padding: 0 34px;
  border-radius: 100px;
  background: #fff;
  color: #14131C;
  font-size: 16px;
  font-weight: 700;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
/* White, not red. The badge above it is already the sale colour at full
   strength, and two red objects this close argue with each other - the button
   stops reading as the thing to press. */
html.sc-cmp .sc-cmp-hero-cta:hover,
html.sc-cmp .sc-cmp-hero-cta:focus {
  color: #14131C;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
html.sc-cmp .sc-cmp-hero-cta:focus-visible {
  outline: 3px solid var(--sc-cmp-accent, #FF3B5C);
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  html.sc-cmp .sc-cmp-hero-cta { transition: none; }
  html.sc-cmp .sc-cmp-hero-cta:hover { transform: none; }
}

@media (max-width: 767px) {
  html.sc-cmp .sc-cmp-hero-eyebrow { margin-bottom: 14px; font-size: 11.5px; }
  html.sc-cmp .sc-cmp-hero-badge { margin-top: 16px; padding: 8px 18px 10px; border-radius: 12px; gap: 8px; }
  html.sc-cmp .sc-cmp-hero-badge-sm { font-size: 13px; }
  html.sc-cmp .sc-cmp-hero-lead { margin-top: 18px; }
  html.sc-cmp .sc-cmp-hero-cta { margin-top: 22px; min-height: 48px; width: 100%; max-width: 320px; }
}


/* ---------------------------------------------------------------------------
   7. SALE PRICING ON THE PLAN CARDS

   The old price, the new price, and a flag in the corner. Applied to every
   plan on every product page from the one percentage in campaign.php.
   ------------------------------------------------------------------------ */

/* The old price sits ABOVE the new one, not beside it. Side by side, the eye
   reads them as a range ("$12 to $6") rather than as a reduction, and on a
   narrow card the pair wraps into something worse than either. */
html.sc-cmp .sx .x-tier-price.is-sale {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
html.sc-cmp .sx .x-tier-price.is-sale .x-tier-was {
  display: block;
  margin-bottom: 2px;
  color: rgba(255,255,255,.42);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
}
/* The strike is its own element so the line stays put when the currency
   script rewrites the text inside it. A line-through on the span would be
   redrawn to whatever width the converted figure happens to be - which is
   correct, but it flickers as the number changes under it. */
html.sc-cmp .sx .x-tier-price.is-sale .x-tier-was {
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(255,255,255,.4);
}
/* /mo has to come back onto the sale price's line after the column flip. */
html.sc-cmp .sx .x-tier-price.is-sale .n { display: inline; }
html.sc-cmp .sx .x-tier-price.is-sale .p { display: inline; }

/* A light card needs the opposite ink - this is the 'dark => off' case,
   where the sale colour runs on the normal white site. */
html.sc-cmp:not(.sc-cmp-dark) .sx .x-tier-price.is-sale .x-tier-was { color: #8A8999; }
html.sc-cmp:not(.sc-cmp-dark) .sx .x-tier-price.is-sale .x-tier-was { text-decoration-color: #A9A8B5; }

/* THE FLAG.

   Drawn from --sc-cmp-off, which the engine writes from the one percentage
   in campaign.php, so the number is never duplicated into the stylesheet.

   :has() keeps it off the cards that carry no price - the "Bigger than
   this?" card at the end of the shared row is advice, not a plan, and a
   "50% off" flag on it would be nonsense. */
/* The flag is absolutely positioned, so it costs no layout - which means
   the card must be told to leave room or the plan name renders underneath
   it. 46px clears the 14px offset plus the pill. */
html.sc-cmp .sx .x-tier:has(.x-tier-price.is-sale) { padding-top: 46px; }

html.sc-cmp .sx .x-tier:has(.x-tier-price.is-sale)::after {
  content: var(--sc-cmp-off, "");
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 5px 11px;
  border-radius: 100px;
  background: var(--sc-cmp-accent, #FF3B5C);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .01em;
  white-space: nowrap;
  pointer-events: none;
}

/* The "Most popular" tag already sits at the top of the card, on the left.
   Nudged down so the two read as a row rather than one crowding the other. */
html.sc-cmp .sx .x-tier:has(.x-tier-price.is-sale) .x-tier-badge { top: 14px; }

@media (max-width: 480px) {
  html.sc-cmp .sx .x-tier:has(.x-tier-price.is-sale)::after {
    top: 10px; right: 10px; padding: 4px 9px; font-size: 11px;
  }
}


/* ---------------------------------------------------------------------------
   8. THE HOMEPAGE'S OWN CARDS

   The product pages came out clean: .x-dark already covers every component
   they use. The homepage did not, because it carries bespoke cards written
   before that theme existed, which hardcode `background: #fff`. They sat as
   white slabs on a black page.

   These were found by asking the browser which elements inside a .x-dark
   section still computed to a light background, not by guessing - an earlier
   pass guessed .x-card / .x-box / .x-panel and matched nothing at all.
   scratchpad/find-light.mjs re-runs that check.

   THE TOKENS ARE REDECLARED ON THE CARD ITSELF, and that is the whole trick.
   These components colour their text with var(--x-ink) and var(--x-muted).
   Custom properties inherit, so redefining them here flips every heading,
   label and caption inside the card at once - including the ones nobody
   enumerated. Overriding each text rule by hand would have meant finding all
   of them, and missing one leaves dark grey text on a dark card.
   ------------------------------------------------------------------------ */

html.sc-cmp-dark .sx .x-dark .x-plan,
html.sc-cmp-dark .sx .x-dark .x-vcard,
html.sc-cmp-dark .sx .x-dark .x-run-card,
html.sc-cmp-dark .sx .x-dark .x-fp-card,
html.sc-cmp-dark .sx .x-dark .x-fi,
html.sc-cmp-dark .sx .x-dark .x-all,
html.sc-cmp-dark .sx .x-dark .x-fd-bar {
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: none !important;

  --x-ink:    #ffffff;
  --x-body:   #C6BFE2;
  --x-muted:  #A79FC4;
  --x-line:   rgba(255,255,255,.12);
  --x-ground: rgba(255,255,255,.06);
  --x-white:  rgba(255,255,255,.06);
  color: #C6BFE2;
}

/* The highlighted plan keeps its ring, in the sale colour rather than the
   site purple, so "most chosen" still reads at a glance on a dark row. */
html.sc-cmp-dark .sx .x-dark .x-plan.pop {
  border-color: var(--sc-cmp-accent, #FF3B5C) !important;
  box-shadow: 0 0 0 1px var(--sc-cmp-accent, #FF3B5C),
              0 18px 48px rgba(0,0,0,.45) !important;
}

/* Tints that are not white and so are not caught by the block above. */
html.sc-cmp-dark .sx .x-dark .x-run-card.accent { background: rgba(255,255,255,.075) !important; }
html.sc-cmp-dark .sx .x-dark .x-run-card.accent .x-run-ico { background: rgba(255,255,255,.12) !important; }
html.sc-cmp-dark .sx .x-dark .x-fi-bar  { background: rgba(255,255,255,.12) !important; }
html.sc-cmp-dark .sx .x-dark .x-renew   { background: rgba(255,255,255,.07) !important; color: #C6BFE2; }
html.sc-cmp-dark .sx .x-dark .x-renew svg { opacity: .9; }

/* The back face of a flip card is a separate surface and has to be darkened
   on its own, or the card is correct until somebody turns it over. */
html.sc-cmp-dark .sx .x-dark .x-vcard.back { background: rgba(255,255,255,.07) !important; }

/* THE SALE FLAG, on the homepage cards too.

   .x-tag ("Most chosen") already sits at top:-11px left:28px on this card,
   so the flag goes right and the card gains headroom for both. */
html.sc-cmp .sx .x-plan:has(.x-price.is-sale) { padding-top: 48px; }
html.sc-cmp .sx .x-plan:has(.x-price.is-sale) .x-tag { top: 16px; left: 28px; }
html.sc-cmp .sx .x-plan:has(.x-price.is-sale)::after {
  content: var(--sc-cmp-off, "");
  position: absolute;
  top: 16px;
  right: 28px;
  padding: 5px 11px;
  border-radius: 100px;
  background: var(--sc-cmp-accent, #FF3B5C);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  white-space: nowrap;
  pointer-events: none;
}

/* Same stacked treatment as the product pages. */
html.sc-cmp .sx .x-price.is-sale {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
html.sc-cmp .sx .x-price.is-sale .x-tier-was {
  display: block;
  margin-bottom: 2px;
  color: rgba(255,255,255,.42);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(255,255,255,.4);
}
html.sc-cmp .sx .x-price.is-sale .n,
html.sc-cmp .sx .x-price.is-sale .p { display: inline; }

/* The old yearly figure sits inline before the new one, so it needs the
   strike but not the block treatment above. */
html.sc-cmp .sx .x-plan-year .x-tier-was {
  margin: 0 4px 0 0;
  opacity: .55;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}

@media (max-width: 480px) {
  html.sc-cmp .sx .x-plan:has(.x-price.is-sale)::after { right: 20px; padding: 4px 9px; font-size: 11px; }
  html.sc-cmp .sx .x-plan:has(.x-price.is-sale) .x-tag { left: 20px; }
}

/* Small spec chips inside the bento boxes ("Varnish cache", "LiteSpeed
   ready"). Found by find-light.mjs after the card pass - they are bare spans
   with no class of their own, which is exactly the kind of thing a selector
   written from memory never covers. */
html.sc-cmp-dark .sx .x-dark .x-mini span {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.14) !important;
  color: #C6BFE2 !important;
}


/* ---------------------------------------------------------------------------
   9. THE HEADER ONCE THE PAGE HAS SCROLLED

   Normally the bar starts transparent over the hero and turns solid white as
   the hero clears it. On a black page that white slab arrives like a light
   being switched on, and the logo flips to black with it.

   So the solid state is restyled rather than disabled: the bar still becomes
   opaque on scroll, which is what makes the nav readable over content - it
   just becomes opaque in the campaign's colours.
   ------------------------------------------------------------------------ */

html.sc-cmp-dark body.x-nav-solid .header {
  background: color-mix(in srgb, var(--sc-cmp-ground, #050309) 92%, #fff) !important;
  border-bottom-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.05), 0 8px 28px rgba(0,0,0,.45) !important;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  html.sc-cmp-dark body.x-nav-solid .header { background: #0E0B16 !important; }
}

/* The logo is inverted to black for the white bar. Undo that - on a dark bar
   it would be a black mark on a black ground. */
html.sc-cmp-dark body.x-nav-solid .header .navbar-brand img { filter: none !important; }

/* Nav links go to ink for the white bar; they have to come back to white. */
html.sc-cmp-dark body.x-nav-solid .header .nabbar-nav .mainmenu > li > a,
html.sc-cmp-dark body.x-nav-solid .header .nabbar-nav .mainmenu > li > a span {
  color: #fff !important;
}

/* The Login button's text is forced to ink for the white bar, at six classes
   and !important (skycore-2026.css:450). On the campaign's dark bar that is
   near-black on near-black - the pill rendered as an empty outline. Adding
   the campaign class makes seven, which is the whole reason this selector is
   as long as it is. */
html.sc-cmp-dark body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li > a.login,
html.sc-cmp-dark body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li > a.login span,
html.sc-cmp-dark body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li > a.login i {
  color: #fff !important;
}
html.sc-cmp-dark body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li > a.login {
  border-color: rgba(255,255,255,.22) !important;
  background: rgba(255,255,255,.06) !important;
}
html.sc-cmp-dark body.x-nav-solid .header .main-header .nabbar-nav .mainmenu > li > a.login:hover {
  background: rgba(255,255,255,.13) !important;
  border-color: rgba(255,255,255,.38) !important;
}

/* Same trap for the mobile bar's Login, which flips to ink on scroll too. */
html.sc-cmp-dark body.x-nav-solid .sc-m-login {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.22) !important;
  color: #fff !important;
}

/* The scroll-to-top button hardcodes the site purple as a gradient rather
   than reading a token (header.php:436), so the token swap never reached it
   and it floated over a red page in the old colour. */
html.sc-cmp .scroll-top {
  background: linear-gradient(135deg,
    var(--sc-cmp-accent, #FF3B5C) 0%,
    color-mix(in srgb, var(--sc-cmp-accent, #FF3B5C) 70%, #000) 100%) !important;
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
  html.sc-cmp .scroll-top { background: var(--sc-cmp-accent, #FF3B5C) !important; }
}


/* ---------------------------------------------------------------------------
   10. LIGHT SURFACES THAT ARE NOT SECTIONS

   The section filter darkens <section class="x-sec">. These are not sections,
   so nothing reached them and they stayed white on a black page.

   Found by widening find-light.mjs to scan the whole document instead of only
   the insides of darkened sections - which is how the logo band went unnoticed
   through two passes. Buttons and chips that are deliberately white are left
   alone; white on dark is their design, not a miss.
   ------------------------------------------------------------------------ */

/* The "Built on" band. A <div class="x-logos">, tinted with --x-ground. */
html.sc-cmp-dark .sx .x-logos {
  background: color-mix(in srgb, var(--sc-cmp-ground, #050309) 88%, #fff) !important;
  box-shadow: none !important;
}
html.sc-cmp-dark .sx .x-logos .x-trust-group + .x-trust-group {
  border-top-color: rgba(255,255,255,.10) !important;
}
/* The partner marks are dark-on-light artwork. Inverting is wrong - several
   are coloured - so they are lifted instead, which is what the rest of the
   site already does for logos on its dark footer. */
html.sc-cmp-dark .sx .x-logos .x-marks img {
  filter: brightness(0) invert(1) !important;
  opacity: .62;
}

/* The page wrapper itself. Normally hidden behind opaque sections, so it only
   shows as a white seam between them - which is exactly the kind of thing
   that looks like a rendering fault rather than a design. */
html.sc-cmp-dark .sx { background: var(--sc-cmp-ground, #050309) !important; }

/* The domain-suggestion form card. */
html.sc-cmp-dark .sc-ai-form-card,
html.sc-cmp-dark .sc-ai-form-card-inner {
  background: rgba(255,255,255,.045) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: none !important;
  color: #C6BFE2;
}
html.sc-cmp-dark .sc-ai-input-wrap {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.14) !important;
}
html.sc-cmp-dark .sc-ai-input-wrap input { color: #fff !important; }
html.sc-cmp-dark .sc-ai-input-wrap input::placeholder { color: rgba(255,255,255,.45) !important; }

@supports not (background: color-mix(in srgb, red 50%, blue)) {
  html.sc-cmp-dark .sx .x-logos { background: #0E0B14 !important; }
}


/* ---------------------------------------------------------------------------
   11. THE REDESIGNED HERO

   The first version was a season in huge type with the percentage in a filled
   slab under it. That is the arrangement every large host is running this
   month, and side by side ours was recognisably the same page.

   What changed, and why:

     - the OFFER leads, not the date. "Save 50% on every hosting plan" is the
       reason to stay; "Black Friday" is only the excuse for it, so it moves
       to a small line above.
     - the number sits inside the sentence, coloured rather than boxed. One
       statement instead of a headline wearing a sticker.
     - the coupon gets a ticket of its own. Nothing in the checkout tells
       anybody the code exists, so the page has to - and a torn ticket is a
       different object from the pills already on the page.
   ------------------------------------------------------------------------ */

html.sc-cmp .sc-cmp-hero-eyebrow {
  gap: 8px;
  background: color-mix(in srgb, var(--sc-cmp-accent, #FF3B5C) 14%, transparent);
  border-color: color-mix(in srgb, var(--sc-cmp-accent, #FF3B5C) 40%, transparent);
  letter-spacing: .1em;
}
/* A live dot. It says "now" in a way the words cannot, and it is the only
   thing moving in the hero - which is the point of putting it here rather
   than animating the headline. */
html.sc-cmp .sc-cmp-hero-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--sc-cmp-accent, #FF3B5C);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--sc-cmp-accent, #FF3B5C) 70%, transparent);
  animation: sc-cmp-pulse 2.2s ease-out infinite;
}
@keyframes sc-cmp-pulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sc-cmp-accent, #FF3B5C) 65%, transparent); }
  70%  { box-shadow: 0 0 0 9px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  html.sc-cmp .sc-cmp-hero-dot { animation: none; }
}

/* The second line is set smaller and lighter so the eye lands on the number
   first and reads the qualifier after, rather than meeting two equal lines. */
html.sc-cmp .sc-cmp-hero-h1b { color: var(--sc-cmp-accent, #FF3B5C); }
html.sc-cmp .sc-cmp-hero-h1c {
  display: block;
  margin-top: .06em;
  font-size: .46em;
  font-weight: 600;
  letter-spacing: -.005em;
  color: #C6BFE2;
}

/* ---- the coupon ticket ---- */

html.sc-cmp .sc-cmp-ticket {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
  margin: 30px 0 0;
  padding: 16px 30px 15px;
  border-radius: 12px;
  background: rgba(255,255,255,.05);
  /* Dashed, like a tear line. A solid edge here made it read as one more
     card, which the page already has plenty of. */
  border: 1.5px dashed color-mix(in srgb, var(--sc-cmp-accent, #FF3B5C) 52%, transparent);
}

/* The notches. Two small circles bitten out of the left and right edges,
   painted in the hero's own ground so they read as holes rather than dots.
   This is what makes it a ticket instead of a dashed box. */
html.sc-cmp .sc-cmp-ticket::before,
html.sc-cmp .sc-cmp-ticket::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 16px; height: 16px;
  margin-top: -8px;
  border-radius: 50%;
  background: var(--sc-cmp-ground, #050309);
}
html.sc-cmp .sc-cmp-ticket::before { left: -9px; }
html.sc-cmp .sc-cmp-ticket::after  { right: -9px; }

html.sc-cmp .sc-cmp-ticket-l {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: #A79FC4;
}

html.sc-cmp .sc-cmp-ticket-code {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  /* Monospace, because a coupon is a thing to be transcribed and the
     letterforms have to be unambiguous - O against 0 especially. */
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: .13em;
  line-height: 1.1;
  cursor: pointer;
}
html.sc-cmp .sc-cmp-ticket-i {
  display: inline-flex;
  opacity: .5;
  transition: opacity .18s ease;
}
html.sc-cmp .sc-cmp-ticket-code:hover .sc-cmp-ticket-i { opacity: 1; }
html.sc-cmp .sc-cmp-ticket-code:focus-visible {
  outline: 2px solid var(--sc-cmp-accent, #FF3B5C);
  outline-offset: 5px;
  border-radius: 4px;
}

/* The tick replaces the copy icon in place, so the ticket does not change
   width at the moment of being clicked. */
html.sc-cmp .sc-cmp-ticket-ok {
  display: none;
  color: #3EE08D;
}
html.sc-cmp .sc-cmp-ticket-code.is-copied .sc-cmp-ticket-i { display: none; }
html.sc-cmp .sc-cmp-ticket-code.is-copied .sc-cmp-ticket-ok { display: inline-flex; }

html.sc-cmp .sc-cmp-ticket-n {
  font-size: 12.5px;
  color: #8E86AB;
}

@media (max-width: 767px) {
  html.sc-cmp .sc-cmp-ticket { margin-top: 24px; padding: 14px 24px 13px; }
  html.sc-cmp .sc-cmp-ticket-code { font-size: 23px; gap: 9px; }
  html.sc-cmp .sc-cmp-ticket-l { font-size: 10.5px; }
  html.sc-cmp .sc-cmp-ticket-n { font-size: 11.5px; }
  html.sc-cmp .sc-cmp-hero-h1c { font-size: .5em; }
}



/* ---------------------------------------------------------------------------
   12. THE PRIZE WHEEL

   Opens once, lands on the prize, then folds away into the gift button in the
   corner - which is the part that actually matters. On the big hosts the panel
   shows once and the code is gone on the next page load; here the button keeps
   it for the rest of the sale.

   THE DISC IS BIGGER THAN THE WINDOW IT SITS IN
   ---------------------------------------------
   Only its top arc is visible. The stage crops it and the footer panel sits
   over the rest. The first build showed a whole circle floating in the middle
   of a box, which read as a widget dropped into a page; cropping it makes the
   panel feel built around the wheel. It also keeps the panel short - the
   earlier version overflowed its own height and grew a scrollbar.
   ------------------------------------------------------------------------ */

html.sc-cmp.sc-wheel-open { overflow: hidden; }

html.sc-cmp .sc-wheel {
  position: fixed;
  inset: 0;
  /* Under the chat launcher, over everything else of ours. */
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
html.sc-cmp .sc-wheel[hidden] { display: none; }

html.sc-cmp .sc-wheel-back {
  position: absolute;
  inset: 0;
  background: rgba(4, 2, 8, .72);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

html.sc-cmp .sc-wheel-box {
  position: relative;
  width: 100%;
  max-width: 404px;
  max-height: calc(100vh - 40px);
  overflow: hidden auto;
  border-radius: 22px;
  background: var(--sc-cmp-ground, #050309);
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
  text-align: center;
  animation: sc-wheel-in .28s cubic-bezier(.2,.8,.3,1) both;
}
/* If it does have to scroll - a short laptop window, a phone in landscape -
   the bar should not be the browser's default slab down the side of a dark
   panel. */
html.sc-cmp .sc-wheel-box { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.22) transparent; }
html.sc-cmp .sc-wheel-box::-webkit-scrollbar { width: 6px; }
html.sc-cmp .sc-wheel-box::-webkit-scrollbar-track { background: transparent; }
html.sc-cmp .sc-wheel-box::-webkit-scrollbar-thumb { background: rgba(255,255,255,.22); border-radius: 3px; }

@keyframes sc-wheel-in {
  from { opacity: 0; transform: translateY(14px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

html.sc-cmp .sc-wheel-head { padding: 26px 26px 0; }

html.sc-cmp .sc-wheel-x {
  position: absolute; top: 14px; right: 14px;
  z-index: 3;
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  border: 0; border-radius: 50%;
  background: rgba(255,255,255,.1);
  color: #fff;
  cursor: pointer;
}
html.sc-cmp .sc-wheel-x:hover { background: rgba(255,255,255,.2); }

html.sc-cmp .sc-wheel-tag {
  display: inline-flex; align-items: center;
  margin: 24px 0 12px; padding: 6px 13px;
  border-radius: 100px;
  background: var(--sc-cmp-accent, #FF3B5C);
  color: #fff;
  font-size: 11.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase;
}

html.sc-cmp .sc-wheel-title {
  margin: 0 22px 7px;
  color: #fff;
  font-size: 28px; font-weight: 700; line-height: 1.12;
  letter-spacing: -.02em;
}
html.sc-cmp .sc-wheel-intro {
  margin: 0 26px 2px;
  color: #BBB2D6;
  font-size: 14.5px; line-height: 1.5;
}
/* The near-miss line. Coloured, because it has to read as a result rather
   than as the same instruction repeated. */
html.sc-cmp .sc-wheel-intro.is-retry {
  color: var(--sc-cmp-accent, #FF3B5C);
  font-weight: 600;
}

/* ---- the disc, cropped ---- */

html.sc-cmp .sc-wheel-stage {
  position: relative;
  /* Shorter than the disc is tall. This is the crop. */
  height: 176px;
  margin: 14px 0 -26px;
  overflow: hidden;
}

html.sc-cmp .sc-wheel-pin {
  position: absolute; top: 2px; left: 50%;
  z-index: 3;
  width: 0; height: 0;
  margin-left: -11px;
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-top: 17px solid #fff;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.6));
}

/* Segments as a conic-gradient rather than drawn shapes: no canvas, no
   images, and it stays sharp at any size. The wedges are cosmetic - the
   prize is decided in script, not by where it stops. */
html.sc-cmp .sc-wheel-disc {
  position: absolute;
  top: 16px; left: 50%;
  width: 300px; height: 300px;
  margin-left: -150px;
  border-radius: 50%;
  border: 8px solid #0B0712;
  box-shadow: 0 0 0 2px rgba(255,255,255,.1), 0 20px 50px rgba(0,0,0,.55);
  background: conic-gradient(
    var(--sc-cmp-accent, #FF3B5C)      0deg  45deg,
    rgba(255,255,255,.09)             45deg  90deg,
    var(--sc-cmp-accent, #FF3B5C)     90deg 135deg,
    rgba(255,255,255,.09)            135deg 180deg,
    var(--sc-cmp-accent, #FF3B5C)    180deg 225deg,
    rgba(255,255,255,.09)            225deg 270deg,
    var(--sc-cmp-accent, #FF3B5C)    270deg 315deg,
    rgba(255,255,255,.09)            315deg 360deg);
  transform: rotate(0deg);
}
html.sc-cmp .sc-wheel-seg {
  position: absolute; top: 50%; left: 50%;
  width: 50%; height: 1px;
  transform-origin: 0 50%;
  transform: rotate(calc(var(--i) * 45deg));
  background: rgba(255,255,255,.14);
}

/* An icon per other segment, pushed out from the hub along its own spoke.
   The counter-rotation on the inner element keeps the icon upright at rest
   instead of lying on its side. */
html.sc-cmp .sc-wheel-mark {
  position: absolute; top: 50%; left: 50%;
  width: 50%; height: 0;
  transform-origin: 0 50%;
  transform: rotate(calc(var(--i) * 45deg + 22.5deg));
}
html.sc-cmp .sc-wheel-mark-in {
  position: absolute;
  right: 16px; top: -18px;
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px;
  border-radius: 11px;
  /* Dark tile on a coloured wedge. */
  background: rgba(0,0,0,.32);
  color: #fff;
  transform: rotate(calc(var(--i) * -45deg - 22.5deg));
}
/* Light tile on a dark wedge. One fixed tile colour vanishes on half the
   wheel, which is what left four segments looking empty. */
html.sc-cmp .sc-wheel-mark.on-dark .sc-wheel-mark-in {
  background: rgba(255,255,255,.13);
  color: rgba(255,255,255,.92);
}

html.sc-cmp .sc-wheel-hub {
  position: absolute; top: 50%; left: 50%;
  width: 54px; height: 54px;
  margin: -27px 0 0 -27px;
  border-radius: 50%;
  background: #0B0712;
  border: 2px solid rgba(255,255,255,.16);
}

/* Softens the cut where the disc disappears behind the footer, so it reads
   as the wheel continuing rather than as a circle with its bottom sliced
   off. */
html.sc-cmp .sc-wheel-fade {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 62px;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--sc-cmp-ground, #050309) 86%);
}

/* ---- the result ---- */

/* THE RESULT CARRIES ITS OWN GROUND, and it has to.

   The stage is pulled up by a negative margin so the footer overlaps the
   disc - that overlap is what crops the wheel. The result sits in the
   same overlap, so without a background of its own the winning line
   rendered straight over the spinning segments and was unreadable
   against them.

   Giving it the panel ground makes it cover the wheel the way the footer
   does, and the two read as one panel rising over the disc. */
html.sc-cmp .sc-wheel-result {
  position: relative;
  z-index: 2;
  padding: 16px 26px 0;
  background: var(--sc-cmp-ground, #050309);
}
html.sc-cmp .sc-wheel-result[hidden] { display: none; }
html.sc-cmp .sc-wheel-won {
  margin: 0 0 13px;
  color: #fff;
  font-size: 19px; font-weight: 700; line-height: 1.3;
}
html.sc-cmp .sc-wheel-usel {
  display: block; margin-bottom: 8px;
  color: #A79FC4;
  font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase;
}
html.sc-cmp .sc-wheel-code {
  display: inline-flex; align-items: center; gap: 11px;
  padding: 11px 20px;
  border: 1.5px dashed color-mix(in srgb, var(--sc-cmp-accent, #FF3B5C) 55%, transparent);
  border-radius: 11px;
  background: rgba(255,255,255,.05);
  color: #fff;
  font-family: SFMono-Regular, Consolas, Menlo, monospace;
  font-size: 23px; font-weight: 700; letter-spacing: .12em;
  cursor: pointer;
}
html.sc-cmp .sc-wheel-copy { opacity: .5; display: inline-flex; }
html.sc-cmp .sc-wheel-code:hover .sc-wheel-copy { opacity: 1; }
html.sc-cmp .sc-wheel-ok { display: none; color: #3EE08D; }
html.sc-cmp .sc-wheel-code.is-copied .sc-wheel-copy { display: none; }
html.sc-cmp .sc-wheel-code.is-copied .sc-wheel-ok { display: inline-flex; }

/* ---- the footer panel, sitting over the disc ---- */

html.sc-cmp .sc-wheel-foot {
  position: relative;
  z-index: 2;
  padding: 16px 26px 20px;
  /* Its own ground, so the buttons never sit on a moving background. */
  background: var(--sc-cmp-ground, #050309);
}

html.sc-cmp .sc-wheel-acts { display: flex; flex-direction: column; gap: 9px; }
html.sc-cmp .sc-wheel-acts[hidden] { display: none; }
html.sc-cmp .sc-wheel-go {
  min-height: 50px;
  border: 0; border-radius: 12px;
  background: var(--sc-cmp-accent, #FF3B5C);
  color: #fff;
  font-size: 16px; font-weight: 700;
  cursor: pointer;
  transition: filter .18s ease;
}
html.sc-cmp .sc-wheel-go:hover { filter: brightness(1.1); }
html.sc-cmp .sc-wheel-go:disabled { opacity: .55; cursor: default; }
html.sc-cmp .sc-wheel-later {
  min-height: 44px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  background: transparent;
  color: #C6BFE2;
  font-size: 14.5px; font-weight: 600;
  cursor: pointer;
}
html.sc-cmp .sc-wheel-later:hover { background: rgba(255,255,255,.06); color: #fff; }

html.sc-cmp .sc-wheel-terms {
  margin: 13px 0 0;
  color: #7E769B;
  font-size: 11.5px; line-height: 1.5;
}


/* ---- the rules, as a second page of the same panel -----------------------

   Not a link away to a terms page. Somebody checking what a coupon covers is
   halfway to using it, and sending them to another page is where that stops.
   The panel turns the page instead, and a back arrow returns them to the
   wheel exactly where they were.
   ---------------------------------------------------------------------- */

html.sc-cmp .sc-wheel-view[hidden] { display: none; }

/* The link in the small print. A button styled as a link, because it turns
   a page rather than going anywhere - see the note in campaign-mode.php. */
html.sc-cmp .sc-wheel-rules-open {
  padding: 0;
  border: 0;
  background: none;
  color: #C6BFE2;
  font: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
html.sc-cmp .sc-wheel-rules-open:hover { color: #fff; }
html.sc-cmp .sc-wheel-rules-open:focus-visible {
  outline: 2px solid var(--sc-cmp-accent, #FF3B5C);
  outline-offset: 3px;
  border-radius: 3px;
}

html.sc-cmp .sc-wheel-rules {
  padding: 24px 26px 20px;
  text-align: left;
}

/* The arrow and the heading are one control. Two separate things - a small
   arrow and a title beside it - leaves people hunting for the hit area, and
   the title is the obvious thing to press. */
html.sc-cmp .sc-wheel-rback {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 0;
  border: 0;
  background: none;
  color: #fff;
  font-family: inherit;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
  cursor: pointer;
}
html.sc-cmp .sc-wheel-rback svg { flex: none; opacity: .7; }
html.sc-cmp .sc-wheel-rback:hover svg { opacity: 1; }
html.sc-cmp .sc-wheel-rback:focus-visible {
  outline: 2px solid var(--sc-cmp-accent, #FF3B5C);
  outline-offset: 4px;
  border-radius: 6px;
}

html.sc-cmp .sc-wheel-rlist {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
html.sc-cmp .sc-wheel-rlist li {
  position: relative;
  padding-left: 18px;
  color: #BBB2D6;
  font-size: 13.5px;
  line-height: 1.55;
}
/* A dot rather than a disc bullet, so the indent is predictable and the
   marker does not change size with the text. */
html.sc-cmp .sc-wheel-rlist li::before {
  content: "";
  position: absolute;
  left: 2px; top: 8px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--sc-cmp-accent, #FF3B5C);
}
/* The first rule is the condition most likely to be argued about later, so
   it is the one that is not allowed to read as small print. */
html.sc-cmp .sc-wheel-rlist li:first-child { color: #fff; font-weight: 500; }

html.sc-cmp .sc-wheel-rfoot { margin-top: 20px; }
html.sc-cmp .sc-wheel-rfoot .sc-wheel-later { width: 100%; }

@media (max-width: 600px) {
  html.sc-cmp .sc-wheel-rules { padding: 20px 22px 16px; }
  html.sc-cmp .sc-wheel-rfoot { padding-bottom: env(safe-area-inset-bottom, 0px); }
}

/* ---- the gift button that stays behind ---- */

html.sc-cmp .sc-wheel-gift {
  position: fixed;
  /* BOTTOM LEFT. The scroll-to-top button and the chat launcher both live
     bottom right; a third thing there would cover one of them. */
  left: 22px;
  /* Lifts clear of the cookie bar when one is showing. The bar measures
     itself and publishes --sc-ck-h; with no bar the fallback is 0 and
     this is just bottom: 22px. */
  bottom: calc(var(--sc-ck-h, 0px) + 22px);
  z-index: 10040;
  transition: bottom .28s ease;
  display: inline-flex; align-items: center; justify-content: center;
  width: 50px; height: 50px;
  padding: 0;
  border: 0; border-radius: 50%;
  background: var(--sc-cmp-accent, #FF3B5C);
  color: #fff;
  box-shadow: 0 8px 26px rgba(0,0,0,.42);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease;
}

/* WITH A RING it needs to be bigger: the words live in the margin between
   the icon and the edge, so the circle has to grow to make that margin. */
html.sc-cmp .sc-wheel-gift.has-ring { width: 78px; height: 78px; }

html.sc-cmp .sc-wheel-gift-ring {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  /* Set by the script from the scroll position. Declared here so the ring
     has a sane value before any scrolling has happened. */
  transform: rotate(0deg);
}
html.sc-cmp .sc-wheel-gift-ringt {
  fill: #fff;
  font-family: var(--sc-font, inherit);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
html.sc-cmp .sc-wheel-gift-ico { display: inline-flex; }


/* ---- the nudge ----------------------------------------------------------

   A hop every five seconds, but ONLY while the button still has something
   unopened in it. The moment the code has been seen the pip goes and this
   goes with it, because there is nothing left to tell that person - which is
   the difference between a nudge and a nag.

   The movement lives at the END of the cycle: four and a half seconds of
   stillness, then a short double hop. A bounce that runs for most of its
   cycle reads as a thing that is broken rather than a thing asking to be
   pressed.

   It scales very slightly as it rises. Pure vertical movement at this size
   reads as a glitch; a touch of scale makes it read as weight.
   ---------------------------------------------------------------------- */

@keyframes sc-wheel-nudge {
  0%, 86%, 100% { transform: translateY(0)    scale(1); }
  89%           { transform: translateY(-10px) scale(1.05); }
  92%           { transform: translateY(0)    scale(.97); }
  95%           { transform: translateY(-4px) scale(1.01); }
  98%           { transform: translateY(0)    scale(1); }
}

html.sc-cmp .sc-wheel-gift.can-nudge.has-pip {
  animation: sc-wheel-nudge 5s ease-in-out infinite;
}

/* Hands off while the pointer is on it: the hover lift and this animation
   both write transform, and the animation wins, so without this the button
   would ignore the hover and keep hopping under the cursor. */
html.sc-cmp .sc-wheel-gift.can-nudge.has-pip:hover,
html.sc-cmp .sc-wheel-gift.can-nudge.has-pip:focus-visible {
  animation-play-state: paused;
}

/* Nothing to attract attention to while the panel is already open, and a
   button hopping behind a dimmed overlay just looks like a fault. */
html.sc-cmp.sc-wheel-open .sc-wheel-gift.can-nudge.has-pip { animation: none; }

@media (prefers-reduced-motion: reduce) {
  html.sc-cmp .sc-wheel-gift.can-nudge.has-pip { animation: none; }
}

/* The pip sits ON the ring on the larger button, where it reads as a
   blemish on the text rather than a badge. Tucked to the edge instead. */
html.sc-cmp .sc-wheel-gift.has-ring .sc-wheel-gift-pip {
  top: 6px; right: 6px;
  width: 13px; height: 13px;
  border-width: 2.5px;
}

/* A ring that turns with the scroll is motion the viewer did not ask for.
   The script checks this too and stops driving it, but the declaration
   stays so the ring is never left mid-turn. */
@media (prefers-reduced-motion: reduce) {
  html.sc-cmp .sc-wheel-gift-ring { transform: rotate(0deg) !important; }
}
html.sc-cmp .sc-wheel-gift[hidden] { display: none; }
html.sc-cmp .sc-wheel-gift:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.5); }
html.sc-cmp .sc-wheel-gift:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

/* The dot means there is something here you have not opened. It is removed
   once the code has been copied, because after that it is just a red dot. */
html.sc-cmp .sc-wheel-gift-pip { display: none; }
html.sc-cmp .sc-wheel-gift.has-pip .sc-wheel-gift-pip {
  display: block;
  position: absolute; top: 3px; right: 3px;
  width: 11px; height: 11px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--sc-cmp-accent, #FF3B5C);
}

@media (prefers-reduced-motion: reduce) {
  html.sc-cmp .sc-wheel-box,
  html.sc-cmp .sc-wheel-gift { animation: none; transition: none; }
  html.sc-cmp .sc-wheel-gift:hover { transform: none; }
}

/* ---------------------------------------------------------------------------
   ON A PHONE IT IS A BOTTOM SHEET

   A centred box on a phone wastes both edges and puts the buttons in the
   middle of the screen, where a thumb has to reach for them. A sheet rises
   from the bottom, uses the full width, and leaves the actions exactly where
   the hand already is.
   ------------------------------------------------------------------------ */
@media (max-width: 600px) {
  html.sc-cmp .sc-wheel {
    align-items: flex-end;
    padding: 0;
  }
  html.sc-cmp .sc-wheel-box {
    max-width: none;
    /* Never the whole screen: the strip of page left showing above the sheet
       is what tells somebody this is a layer over the site rather than a new
       one, and it is also what they tap to dismiss. */
    max-height: 92vh;
    border-radius: 22px 22px 0 0;
    border-bottom: 0;
    animation: sc-wheel-up .3s cubic-bezier(.2,.8,.3,1) both;
  }
  @keyframes sc-wheel-up {
    from { transform: translateY(100%); }
    to   { transform: none; }
  }
  /* The grab handle. It does not drag - it is there because a sheet without
     one reads as a panel that got stuck to the bottom of the screen. */
  html.sc-cmp .sc-wheel-box::before {
    content: "";
    position: sticky; top: 0; z-index: 4;
    display: block;
    width: 38px; height: 4px;
    margin: 10px auto 0;
    border-radius: 100px;
    background: rgba(255,255,255,.26);
  }
  html.sc-cmp .sc-wheel-tag { margin-top: 16px; }
  html.sc-cmp .sc-wheel-x { top: 10px; right: 12px; }
  html.sc-cmp .sc-wheel-title { font-size: 26px; }
  html.sc-cmp .sc-wheel-stage { height: 164px; }
  /* Room for the home indicator on a phone with no physical button. */
  html.sc-cmp .sc-wheel-foot { padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)); }

  @media (prefers-reduced-motion: reduce) {
    html.sc-cmp .sc-wheel-box { animation: none; }
  }
}

@media (max-width: 380px) {
  html.sc-cmp .sc-wheel-title { font-size: 23px; }
  html.sc-cmp .sc-wheel-stage { height: 148px; }
  html.sc-cmp .sc-wheel-code { font-size: 20px; }
  html.sc-cmp .sc-wheel-gift { left: 16px; bottom: 16px; width: 46px; height: 46px; }
  html.sc-cmp .sc-wheel-gift.has-ring { width: 68px; height: 68px; }
  html.sc-cmp .sc-wheel-gift-ringt { font-size: 11px; }
}