/* ==================================================================
   Pricing — kwizzbit/pricing (whole-file segment)
   Faithful slice of /HTML/pricing.html. Globals (reset/body/font-face/:root)
   dropped; tokens canonical (theme.json). Full-bleed via the .kwb-segment wrapper.
   ================================================================== */

.pricing {
  background: #FCF0E6;
  padding-block: 8.5rem 9.5rem;
  overflow-x: clip;
}

.pricing__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: clamp(1rem, 4vw, 3rem);
}

/* --- Header --- */

.pricing__header {
  margin-bottom: 1.5rem;
  width: calc(4 * 268px + 3 * 1rem);
  margin-inline: auto;
}

.pricing__title {
  font-family: 'Roobert Semimono', ui-monospace, 'SF Mono', Menlo, monospace;
  font-weight: 400;
  font-size: 4.5rem;
  line-height: 0.889;
  letter-spacing: -0.10764em;
  color: #1D0B09;
  margin-bottom: 0.875rem;
}
.pricing__title-accent { color: #FF3623; }
.pricing__title-emoji {
  display: inline-block;
  font-size: 3.5rem;
  line-height: 1;
  vertical-align: middle;
  margin-left: 0.1em;
}

.pricing__subtitle {
  font-family: 'Roobert', system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.8125rem;
  color: #1D0B09;
  opacity: 0.45;
  margin-top: 0.875rem;
}

/* --- Social proof --- */

.pricing__social {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  margin-top: 2rem;
}
.pricing__social-label {
  font-family: 'Roobert', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.875rem;
  color: #1D0B09;
}
.pricing__logos {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 614px;
}
.pricing__logos svg {
  flex-shrink: 0;
  display: block;
}

.pricing__meta-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: calc(4 * 268px + 3 * 1rem);
  margin-inline: auto;
  margin-bottom: 1.5rem;
}

/* --- Billing toggle --- */

.pricing__controls {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex-shrink: 0;
}
.pricing__billing-label {
  font-family: 'Roobert', system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.9375rem;
  color: #1D0B09;
}
.pricing__billing-label strong { font-weight: 700; }

.pricing__toggle {
  position: relative;
  width: 44px;
  height: 24px;
  cursor: pointer;
  flex-shrink: 0;
}
.pricing__toggle input {
  opacity: 0; width: 0; height: 0; position: absolute;
}
.pricing__toggle-track {
  position: absolute;
  inset: 0;
  background: rgba(71,56,51,0.18);
  border-radius: 0;
  transition: background 180ms ease;
}
.pricing__toggle input:checked ~ .pricing__toggle-track {
  background: linear-gradient(to right, #FF6F5F, #FF3623);
}
.pricing__toggle-thumb {
  position: absolute;
  top: 3px; left: 3px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 0;
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.pricing__toggle input:checked ~ .pricing__toggle-thumb { transform: translateX(20px); }

/* Annual toggle swap */
/* annual removed */

/* ============================================================
   CARD GRID — subgrid for perfect horizontal alignment
   
   The outer grid stretches all 4 cards to equal height.
   Each card is itself a grid with 6 named rows:
     [name] [tagline] [price] [cta] [features] [footer]
   
   subgrid propagates the row tracks from the outer grid
   across all cards, so every zone snaps to a shared baseline.

   Fallback (non-subgrid browsers): cards stretch to equal
   height via align-items:stretch; flex column + margin-top:auto
   on footer still anchors it to the bottom.
   ============================================================ */

.pricing__grid {
  display: grid;
  grid-template-columns: repeat(4, 268px);
  gap: 0 1rem;
  align-items: stretch;
  width: calc(4 * 268px + 3 * 1rem);
  margin-inline: auto;
}

.plan-card {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 0.5px solid #D7BAAF;
  border-radius: 0;
  padding: 1.75rem 1.5rem 1.75rem;
  position: relative;
  min-height: 680px;
  box-shadow: 0 20px 50px rgba(255,54,35,0.10);
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}

@media (hover: hover) {
  .plan-card:hover {
    transform: translateY(-6px);
  }
}

/* Card colour variants */
.plan-card--free {
  background: #F5E8DC;
  min-height: auto !important;
  box-shadow: none;
  border: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25'%3E%3Crect width='100%25' height='100%25' fill='none' stroke='%23B69C92' stroke-width='1' stroke-dasharray='5%2C5' stroke-dashoffset='0'/%3E%3C/svg%3E");
  background-size: 100% 100%;
}
.plan-card--featured   {
  border: none;
  isolation: isolate;
}
.plan-card--gameshow   { border: none; }
.plan-card--enterprise { background: #ffffff; border: none; }

/* --- Animated gradient border — Pro card --- */

@property --border-angle {
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

@keyframes border-spin-ccw {
  to { --border-angle: -360deg; }
}

.plan-card--featured::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: 0;
  background: conic-gradient(
    from var(--border-angle),
    #FD4631 0%,
    #FD4631 60%,
    #FFCB2B 75%,
    #FD4631 90%,
    #FD4631 100%
  );
  animation: border-spin-ccw 5s linear infinite;
}

.plan-card--featured::after {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: #ffffff;
}

/*
  Each direct child of .plan-card maps to one of the 6 row tracks.
  We don't need to declare grid-row on children — they auto-place
  into each track in source order. But we DO want the features list
  to fill its 1fr track, so we let it stretch naturally.
*/

/* --- Plan name --- */

.plan-card__name-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding-bottom: 0.5rem;
  align-self: start;
  flex-wrap: nowrap;
}
.plan-card__name-row .plan-card__name {
  padding-bottom: 0;
}
.plan-card__name {
  font-family: 'Roobert Semimono', ui-monospace, monospace;
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: -0.091em;
  color: #1D0B09;
  padding-bottom: 0.5rem;
  align-self: start;
  -webkit-text-stroke: 0.3px currentColor;
}
.plan-card--featured .plan-card__name,
.plan-card--gameshow .plan-card__name,
.plan-card--enterprise .plan-card__name {
  background: linear-gradient(to right, #FF3623 0%, #FF3623 50%, #FFA174 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: transparent;
  padding-right: 0.15em;
}

/* Popular badge */
.plan-card__badge--trial {
  border-color: #C7C3C2;
  color: #C7C3C2;
  -webkit-text-fill-color: #C7C3C2;
}
.pricing--annual .plan-card__badge--trial {
  display: none;
}
.plan-card__badge {
  -webkit-text-fill-color: #FF3623;
  background: none;
  background-clip: unset;
  -webkit-background-clip: unset;
  display: inline-flex;
  align-items: center;
  padding: 0.25rem 0.625rem;
  border: 1px solid #C7C3C2;
  border-radius: 0;
  font-family: 'Roobert', system-ui, sans-serif;
  font-weight: 400;
  font-size: 0.75rem;
  color: #FF3623;
  letter-spacing: 0;
  margin-left: 6px;
  vertical-align: middle;
  line-height: 1;
}

/* --- Tagline --- */

.plan-card__tagline {
  font-family: 'Roobert', system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.875rem;
  line-height: 1.412;
  color: #473531;
  padding-bottom: 1.25rem;
  min-height: calc(3 * 0.875rem * 1.412 + 1.25rem);
  max-width: 196px;
}


/* --- Price block --- */

.plan-card__price-block {
  padding-bottom: 1.125rem;
  align-self: start;
}
.plan-card__price {
  font-family: 'Roobert Semimono', ui-monospace, monospace;
  font-weight: 400;
  font-size: 2.375rem;
  line-height: 1;
  letter-spacing: -0.06em;
  color: #1D0B09;
  display: flex;
  align-items: flex-start;
}
.plan-card__price-symbol {
  font-family: 'Roobert Semimono', ui-monospace, monospace;
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: -0.04em;
  align-self: flex-end;
  margin-bottom: 0.1em;
}
.plan-card__price-dash {
  font-family: 'Roobert', system-ui, sans-serif;
  font-weight: 400;
  font-size: 2.375rem;
  line-height: 1;
  letter-spacing: -0.06em;
}
.plan-card__price-unit {
  font-family: 'Roobert', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.75rem;
  color: #1D0B09;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: 3px;
  margin-top: 4px;
  align-self: flex-start;
}
.plan-card__price-period {
  font-family: 'Roobert', system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.8125rem;
  color: #1D0B09;
  margin-top: 0.2rem;
}
/* Pence sit smaller and on the baseline, matching the currency symbol's
   treatment on the other side of the figure. Written by pricing.js, and only
   present when the localised price actually has pence. */
.plan-card__price-pence {
  font-family: 'Roobert Semimono', ui-monospace, monospace;
  font-weight: 400;
  font-size: 1.375rem;
  line-height: 1;
  letter-spacing: -0.04em;
  align-self: flex-end;
  margin-bottom: 0.1em;
  margin-left: -0.04em;
}

/* Trial small print lives in a pinpointer rather than a permanent line, so the
   card keeps its shape. Same component as the feature tips further down the
   card. The copy sits in its own span because pricing.js rewrites that for
   currency, and must not touch the pinpointer beside it. */
/* Compound selector on purpose: the base .plan-card__feature-tip rule carries
   margin-left:-0.1rem and is declared further down this file, so a single-class
   override would lose on source order at equal specificity. */
.plan-card__feature-tip.plan-card__trial-tip {
  margin-left: 0.375rem;
  vertical-align: -0.15em;
}

/* The trial line runs the full inner width of the card with nothing to spare,
   so the gap above is borrowed from the card's own right padding rather than
   taken from the line. The card does not get any wider, the line simply reaches
   a little further into the padding it already has. */
.plan-card__price-period--trial {
  margin-right: -0.75rem;
}

/* The tooltip is meant to sit over the card to its right. Both cards are
   position:relative with no z-index, so paint order falls back to DOM order
   and the later card can win. Lifting the whole card while its tip is showing
   puts the tooltip above its neighbour without touching the tooltip itself. */
.plan-card:has(.plan-card__feature-tip[data-tip].is-open) { z-index: 400; }
@media (hover: hover) {
  .plan-card:has(.plan-card__feature-tip[data-tip]:hover) { z-index: 400; }
}

.plan-card--enterprise .plan-card__price         { color: #1D0B09; }
.plan-card--enterprise .plan-card__price-unit    { color: #1D0B09; }
.plan-card--enterprise .plan-card__price-period  { color: #1D0B09; }

/* --- CTA --- */

.plan-card__cta {
  display: inline-block;
  width: 196px;
  padding: 0.6875rem 1rem;
  text-align: center;
  font-family: 'Roobert', system-ui, sans-serif;
  font-weight: 700;
  font-size: 0.875rem;
  color: #fff;
  text-decoration: none;
  border: none;
  cursor: pointer;
  border-radius: 0;
  transition: transform 160ms ease, opacity 160ms ease;
  margin-bottom: 0;
  letter-spacing: 0.005em;
  align-self: start;
}
@media (hover: hover) { .plan-card__cta:hover { transform: translateY(-1px); } }
.plan-card__cta:active { transform: translateY(1px); }

.plan-card__cta--free {
  background: #FFFFFF;
  border: 1px solid #D1C6C2;
  color: #1D0B09;
}
@media (hover: hover) { .plan-card__cta--free:hover { border-color: #B0A6A1; } }
.plan-card__cta--free:active { border-color: #B0A6A1; }

.plan-card__cta--primary {
  background: linear-gradient(to right, #FF3623, #FF6F5F);
  box-shadow: 0 4px 14px rgba(255,74,43,0.28);
}
@media (hover: hover) { .plan-card__cta--primary:hover { background: linear-gradient(to right, #D82A18, #E85040); } }
.plan-card__cta--primary:active { background: linear-gradient(to right, #D82A18, #E85040); }

.plan-card__cta--enterprise {
  background: linear-gradient(to right, #1D0B09, #3E1916);
  color: #fff;
}
@media (hover: hover) { .plan-card__cta--enterprise:hover {
  background: linear-gradient(to right, #0D0504, #2A100E);
} }
.plan-card__cta--enterprise:active {
  background: linear-gradient(to right, #0D0504, #2A100E);
}

/* --- Feature list — fills the 1fr track --- */

.plan-card__cta-wrap {
  align-self: start;
  padding-bottom: 1.125rem;
}
.plan-card__divider {
  width: 196px;
  height: 0;
  border: none;
  border-top: 0.5px solid rgba(71,56,51,0.12);
  margin: 0 0 17px 0;
}
.plan-card__features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
  align-content: start;
  padding-bottom: 2.1875rem;
}
.plan-card__feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Roobert', system-ui, sans-serif;
  font-weight: 600;
  font-size: 0.8125rem;
  line-height: 1;
  color: #1D0B09;
}
.plan-card--enterprise .plan-card__feature { color: #1D0B09; }

.plan-card__tick {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  line-height: 0;
}
.plan-card__feature-tip {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  margin-left: -0.1rem;
  line-height: 0;
  cursor: help;
  opacity: 0.7;
}
.plan-card__feature-tip svg {
  display: block;
}
.plan-card--enterprise .plan-card__feature-tip {
  border-color: rgba(71,56,51,0.22);
  color: rgba(71,56,51,0.42);
}
.plan-card__feature em { font-style: normal; color: #FF3623; }

/* --- Footer blurb --- */

.plan-card__footer {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding-top: 0;
  margin-top: auto;
}

.plan-card__avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  display: block;
}
.plan-card__avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.plan-card__footer-text {
  font-family: 'Roobert', system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 16px;
  color: #1D0B09;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.plan-card__footer-text strong { font-weight: 700; color: #1D0B09; }

/* ============================================================
   SUBGRID FALLBACK — browsers without subgrid support
   (Safari < 16, Chrome < 117)
   Cards become flex columns; footer is pushed to bottom.
   Rows won't perfectly align but cards will be equal height.
   ============================================================ */

/* subgrid fallback removed — flex column used throughout */

/* ============================================================
   TABLET — 2×2 grid (≤1023px)
   Two separate grids of 2, each row shares subgrid tracks.
   ============================================================ */

@media (max-width: 1023px) {
  .pricing { padding-block: 7rem 7.5rem; }

  .pricing__title { font-size: 3.25rem; line-height: 3rem; }

  .pricing__grid {
    grid-template-columns: repeat(2, minmax(0, 268px));
    row-gap: 1rem;
    width: auto;
    max-width: calc(2 * 268px + 1rem);
    margin-inline: auto;
  }





  .pricing__meta-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    width: auto;
    max-width: calc(2 * 268px + 1rem);
    margin-inline: auto;
  }
  .pricing__header {
    max-width: calc(2 * 268px + 1rem);
    width: auto;
    margin-inline: auto;
  }
  /* logos ticker handles mobile layout */
}

/* ============================================================
   MOBILE — single column (≤640px)
   Each card is standalone — no cross-card alignment needed.
   ============================================================ */

@media (max-width: 640px) {
  .pricing { padding-block: 4.25rem 6.5rem; }
  .pricing__meta-row { gap: 1.25rem; }

  .pricing__title {
    font-size: clamp(1.875rem, 10.13vw, 2.375rem);
    line-height: 0.8421;
    letter-spacing: -0.10763em;
    width: min(8.5em, 88vw);
    overflow: visible;
  }
  .pricing__title--desktop-br { display: none; }
  .pricing__title-emoji { font-size: 2rem; }

  .pricing__grid {
    grid-template-columns: 1fr;
    row-gap: 1rem;
  }

  .plan-card {
    padding: 1.5rem 1.25rem 1rem;
    min-height: auto !important;
  }
  .plan-card--free { order: 4; }
  .plan-card__footer { padding-top: 0; }
  /* 'Best for … hosts' smallprint — narrow the text block so it reads as
     a compact blurb rather than spanning the full remaining card width */
  .plan-card__footer-text { max-width: 180px; }
  .plan-card--free { min-height: auto !important; }
  .plan-card__features { padding-bottom: 25px; }
  .plan-card__tagline { font-size: 0.9375rem; }
}

/* ============================================================
   SCROLL REVEAL — matches site-wide spec
   ============================================================ */

.pricing__header,
.pricing__meta-row,
.pricing__grid {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}
.pricing__meta-row { transition-delay: 0.08s; }
.pricing__grid     { transition-delay: 0.16s; }

.pricing .is-visible {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

@media (prefers-reduced-motion: reduce) {
  .pricing__header,
  .pricing__meta-row,
  .pricing__grid { opacity: 1; transform: none; transition: none; }
}

/* --- Handshake float overlay --- */

.pricing__title {
  position: relative;
}
.pricing__title--desktop-br { display: inline; }

.pricing__title-anchor {
  position: relative;
  display: inline-block;
  width: 0;
  overflow: visible;
}

.pricing__title-handshake {
  display: block;
  position: absolute;
  bottom: calc(-0.1em - 50px);
  left: calc(0.1em - 50px);
  width: 130px;
  height: 130px;
  animation: hs-float 4s ease-in-out infinite;
  will-change: transform;
  pointer-events: none;
}

.pricing__title-handshake img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

@keyframes hs-float {
  0%   { transform: translateY(0px) rotate(-2deg); }
  30%  { transform: translateY(-8px) rotate(1deg); }
  60%  { transform: translateY(-4px) rotate(-1deg); }
  100% { transform: translateY(0px) rotate(-2deg); }
}

@media (max-width: 640px) {
  /* Handshake repositioned for mobile single-column title */
  .pricing__title-handshake {
    width: 71px;
    height: 71px;
    bottom: calc(-0.1em - 25px);
    left: calc(0.1em - 50px + 20px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .pricing__title-handshake {
    animation: none;
  }
}

/* ── Mobile logo ticker ── */

/* Desktop + tablet: static flex row, hide duplicate track */
.pricing__logos {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  max-width: 614px;
}
.pricing__logos-ticker {
  display: contents;
}
.pricing__logos-track:last-child {
  display: none;
}
.pricing__logos-track {
  display: contents;
}

/* Mobile only: animated ticker */
@media (max-width: 640px) {
  .pricing__logos {
    overflow: hidden;
    max-width: 100vw;
    width: 100vw;
    margin-left: calc(-1 * clamp(1rem, 4vw, 3rem));
    gap: 0;
    position: relative;
  }
  .pricing__logos::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 48px;
    background: linear-gradient(to right, #FCF0E6, transparent);
    z-index: 1;
    pointer-events: none;
  }
  .pricing__logos-ticker {
    display: flex;
    flex-wrap: nowrap;
    width: max-content;
    animation: logo-ticker 40s linear infinite;
  }
  .pricing__logos-track {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding-right: 1.25rem;
    flex-shrink: 0;
  }
  .pricing__logos-track:last-child {
    display: flex;
  }
  @keyframes logo-ticker {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
}
@media (max-width: 640px) and (prefers-reduced-motion: reduce) {
  .pricing__logos-ticker { animation: none; }
}

/* ── Feature tip tooltips — nav dropdown style ── */
.plan-card__feature-tip[data-tip] {
  position: relative;
  cursor: pointer;
  opacity: 1;
}
.plan-card__tip-modal {
  display: none;
  position: absolute;
  bottom: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%);
  min-width: 200px;
  max-width: 240px;
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(100px);
  -webkit-backdrop-filter: blur(100px);
  box-shadow: 2px 2px 0px rgba(253,106,97,0.20), 0px 20px 50px rgba(255,54,35,0.20);
  padding: 0.625rem 0.75rem;
  z-index: 300;
  pointer-events: none;
  font-family: 'Roobert', system-ui, sans-serif;
  font-weight: 500;
  font-size: 0.75rem;
  line-height: 1.5;
  color: #1D0B09;
  text-align: left;
  white-space: normal;
  border-radius: 0;
}

@media (hover: hover) {
  .plan-card__feature-tip[data-tip]:hover .plan-card__tip-modal {
    display: block;
  }
}
.plan-card__feature-tip[data-tip].is-open .plan-card__tip-modal {
  display: block;
}
.plan-card {
  overflow: visible !important;
}

/* ============================================================
   OFFER MODE — .pricing--offer  (/pricing/?offer=game-show)
   Landing state for the 75%-off CTAs. The three non-trial plans
   recede but stay readable (they provide the price comparison);
   the Game-show card takes over the animated conic border that
   the Popular card wears in the standard view. The class is
   applied by pricing.js; without it this whole block is inert.
   ============================================================ */

.pricing--offer .plan-card {
  transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1), opacity 240ms ease;
}

.pricing--offer .plan-card--free,
.pricing--offer .plan-card--featured,
.pricing--offer .plan-card--enterprise {
  opacity: 0.5;
  box-shadow: none;
}
@media (hover: hover) {
  .pricing--offer .plan-card--free:hover,
  .pricing--offer .plan-card--featured:hover,
  .pricing--offer .plan-card--enterprise:hover {
    transform: none;
    opacity: 0.85;
  }
}

/* Pro's spinning border stands down while the card is receded */
.pricing--offer .plan-card--featured::before {
  animation: none;
  background: #E3D5CA;
}

/* Game-show takes the spotlight */
.pricing--offer .plan-card--gameshow {
  isolation: isolate;
}
.pricing--offer .plan-card--gameshow::before {
  content: '';
  position: absolute;
  inset: -1px;
  z-index: -1;
  border-radius: 0;
  background: conic-gradient(
    from var(--border-angle),
    #FD4631 0%,
    #FD4631 60%,
    #FFCB2B 75%,
    #FD4631 90%,
    #FD4631 100%
  );
  animation: border-spin-ccw 5s linear infinite;
}
.pricing--offer .plan-card--gameshow::after {
  content: '';
  position: absolute;
  inset: 1px;
  z-index: -1;
  background: #ffffff;
}

/* On a phone the highlighted card leads the stack */
@media (max-width: 640px) {
  .pricing--offer .plan-card--gameshow { order: -1; }
}