/* ============================================================
   ONE COMPONENT, THREE OFFERS

   The thing that went back on the referral page when the offer was asked
   for again. Not the old banner: one card whose three states the business
   can swap month to month. Plain credit with a progress track, a milestone
   reward at the end of the track, or a raffle where every referral is an
   entry. Same frame, same track, same button, so a customer who has seen
   one has seen all three.

   It is rebuilt here in the site's own type rather than screenshotted,
   because the argument is that it is ONE component, and three screenshots
   would say the opposite. The segmented control switches state. The button
   on the card is the send: each tap is one friend claiming a box, and the
   track fills, rolls over, unlocks or adds an entry depending on the state.

   Colour comes from the page tokens except the card ground and the fill
   green, which are the product's. Nothing here loads anything.
   ============================================================ */

.cs-offer {
  --offer-card: #ffffff;
  --offer-well: #f4f2ef;
  --offer-ink: #111111;
  --offer-fill: #2e9e5b;
  --offer-fill-soft: rgba(46, 158, 91, 0.16);
  --offer-track: rgba(0, 0, 0, 0.12);
  margin-block: clamp(48px, 6vw, 96px);
}

.dark-mode .cs-offer {
  --offer-card: #1f1f1e;
  --offer-well: #2a2a28;
  --offer-ink: #f2f0ec;
  --offer-track: rgba(255, 255, 255, 0.16);
  --offer-fill-soft: rgba(46, 158, 91, 0.22);
}

/* ---- the switch: three states, one selected ---- */
.cs-offer-switch {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin: 0 auto 22px;
  padding: 4px;
  width: max-content;
  max-width: 100%;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-family: var(--font-sans);
}

.cs-offer-switch button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text-muted);
  font: 600 12px/1 var(--font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 10px 16px;
  border-radius: 999px;
  cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease;
}

.cs-offer-switch button:hover { color: var(--text-hover); }

.cs-offer-switch button[aria-pressed='true'] {
  background: var(--text-primary);
  color: var(--bg-cream);
}

.dark-mode .cs-offer-switch button[aria-pressed='true'] {
  background: var(--text-primary);
  color: var(--bg-dark);
}

/* ---- the card ---- */
.cs-offer-card {
  position: relative;
  width: min(100%, 560px);
  margin-inline: auto;
  padding: 28px 28px 24px;
  background: var(--offer-card);
  color: var(--offer-ink);
  border: 1px solid var(--rule);
  border-radius: 20px;
  font-family: var(--font-sans);
  box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.35);
}

.dark-mode .cs-offer-card { box-shadow: 0 24px 60px -30px rgba(0, 0, 0, 0.8); }

/* hero slot: only the reward and raffle states have one. It collapses to
   nothing on the plain offer rather than leaving a hole. */
.cs-offer-hero {
  position: relative;
  display: none;
  height: 240px;
  margin: -4px 0 22px;
  border-radius: 14px;
  background: var(--offer-well);
  overflow: hidden;
}

.cs-offer[data-state='reward'] .cs-offer-hero,
.cs-offer[data-state='raffle'] .cs-offer-hero { display: block; }

.cs-offer-hero img,
.cs-offer-hero video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* the ring film belongs to the reward, the pitch to the raffle */
.cs-offer[data-state='raffle'] .cs-offer-hero video,
.cs-offer[data-state='reward'] .cs-offer-hero img { display: none; }

/* the arrival zoom in styles-sidebar.css is for photographs, not a card's
   art: the frame is scaled and reset by the figure, and a 5% zoom on a
   flat illustration only softens it */
.cs-fx .cs-body .pv-fig.cs-offer img,
.cs-fx .cs-body .pv-fig.cs-offer video { transform: none; transition: none; }

.cs-offer-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 7px 10px;
  border-radius: 8px;
  background: #fff6dc;
  color: #4a3a00;
  font: 600 12px/1 var(--font-sans);
  display: none;
}

.cs-offer[data-state='raffle'] .cs-offer-badge { display: block; }

.cs-offer-title {
  font: 700 clamp(22px, 2.4vw, 28px)/1.15 var(--font-sans);
  letter-spacing: -0.015em;
  margin: 0 0 6px;
  text-wrap: balance;
}

.cs-offer-sub {
  margin: 0 0 26px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--text-muted);
}

/* ---- the track ---- */
.cs-offer-track {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 0 6px 22px;
}

.cs-offer-track::before,
.cs-offer-track::after {
  content: '';
  position: absolute;
  top: 13px;
  left: calc(100% / 6);
  right: calc(100% / 6);
  height: 3px;
  border-radius: 2px;
}

.cs-offer-track::before { background: var(--offer-track); }

/* the fill is a scaleX of the rail between the first and last node, driven
   by --offer-p (0, 0.5, 1). Composited, and it can be interrupted. */
.cs-offer-track::after {
  background: var(--offer-fill);
  transform: scaleX(var(--offer-p, 0));
  transform-origin: 0 50%;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.cs-offer-node {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  font-size: 14px;
  line-height: 1.35;
}

.cs-offer-node b {
  display: block;
  font-weight: 500;
}

.cs-offer-node small {
  display: block;
  font-size: 14px;
  color: var(--text-muted);
}

.cs-offer-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 3px solid var(--offer-track);
  background: var(--offer-card);
  display: grid;
  place-items: center;
  transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.cs-offer-dot svg {
  width: 14px;
  height: 14px;
  stroke: #fff;
  stroke-width: 3;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.2s ease 0.15s, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) 0.15s;
}

.cs-offer-node.is-done .cs-offer-dot {
  background: var(--offer-fill);
  border-color: var(--offer-fill);
}

.cs-offer-node.is-done .cs-offer-dot svg { opacity: 1; transform: none; }

.cs-offer-node.is-just-done .cs-offer-dot { transform: scale(1.18); }

/* raffle state has no track: entries, not milestones */
.cs-offer[data-state='raffle'] .cs-offer-track { display: none; }

/* ---- how it works ---- */
.cs-offer-how {
  padding: 16px 18px;
  border-radius: 12px;
  background: var(--offer-well);
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.5;
}

.cs-offer-how b {
  display: block;
  font-weight: 700;
  margin-bottom: 4px;
}

.cs-offer[data-state='bau'] .cs-offer-how { display: none; }

/* ---- the button: the send ---- */
.cs-offer-cta {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 52px;
  padding: 0 20px;
  border: 0;
  border-radius: 12px;
  background: var(--offer-ink);
  color: var(--offer-card);
  font: 600 16px/1 var(--font-sans);
  cursor: pointer;
  transition: transform 0.1s ease-out, opacity 0.15s ease;
}

.cs-offer-cta:active { transform: scale(0.98); }
.cs-offer-cta svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.cs-offer-foot {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  margin-top: 14px;
  font-size: 12.5px;
  color: var(--text-muted);
}

.cs-offer-foot u { text-decoration: underline; text-underline-offset: 2px; }
.cs-offer-foot b { font-weight: 500; color: var(--offer-ink); }

.cs-offer[data-state='bau'] .cs-offer-foot { display: none; }
/* the claimed count belongs to the reward: a raffle has winners, not stock */
.cs-offer[data-state='raffle'] .cs-offer-foot b { display: none; }

/* the caption under the card keeps the site's figure caption but centred
   under a card narrower than the stage */
.cs-offer .pv-fig-cap {
  margin-inline: auto;
  text-align: center;
  max-width: 60ch;
}

@media (max-width: 620px) {
  .cs-offer-card { padding: 22px 18px 18px; border-radius: 16px; }
  .cs-offer-hero { height: 160px; }
  .cs-offer-switch button { padding: 9px 12px; font-size: 11px; }
  .cs-offer-node { font-size: 13px; }
  .cs-offer-node small { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .cs-offer-track::after,
  .cs-offer-dot,
  .cs-offer-dot svg,
  .cs-offer-cta { transition: none; }
}

/* the "try it" cue in the caption's number line, same as the other
   touchable figures on the page */
.cs-offer-tag {
  display: inline-block;
  margin-left: 10px;
  padding: 2px 7px 3px;
  border: 1px solid var(--rule);
  border-radius: 999px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  vertical-align: 2px;
}