/* ══════════════════════════════════════════════════════════════════════
 * Offer page (coupon campaign, 2026-10-09)
 * The coupon ticket and countdown (page hero + closing CTA), the sticky
 * offer bar, the savings calculator (ic-v3-offer-plans), the claim steps
 * (ic-v3-offer-steps) and the feature tabs (ic-v3-offer-tabs).
 * ═════════════════════════════════════════════════════════════════════ */

/* A landing page for paid traffic keeps one way forward: the top menu
 * goes, the logo and the sign-in buttons stay. */
body:has(.icv3-ticket--hero) .ic-live-nav,
body:has(.icv3-ticket--hero) .ic-live-header__hamburger { display: none; }
body:has(.icv3-ticket--hero) .ic-live-header__actions { grid-column: 3; }

/* The offer hero has no breadcrumb, so the eyebrow takes its place below
 * the header. The drifting shapes sit above the content site-wide; here
 * they would land on the code and the buttons, so this page goes without. */
body:has(.icv3-ticket--hero) .icv3-field { display: none; }
.icv3-phero__copy > .icv3-eyebrow:first-child { margin-top: 40px; }
@media (max-width: 991.98px) {
  .icv3-phero__copy > .icv3-eyebrow:first-child { margin-top: 8px; }
  /* Paid traffic on a phone: the code and the button come first, then the
   * explanation, then the picture. */
  .icv3-phero:has(.icv3-ticket--hero) .icv3-phero__offer { order: 4; }
  .icv3-phero:has(.icv3-ticket--hero) .icv3-phero__actions { order: 5; }
  .icv3-phero:has(.icv3-ticket--hero) .icv3-phero__lead { order: 6; }
  .icv3-phero:has(.icv3-ticket--hero) .icv3-phero__badges { order: 7; }
  .icv3-phero:has(.icv3-ticket--hero) .icv3-phero__visual { order: 8; margin-top: 1rem; }
  .icv3-phero__inner:has(.icv3-ticket--hero) { gap: 1.15rem; }
  .icv3-phero .icv3-ticket--hero { margin: 4px 0; }
}

/* ── Coupon ticket ─────────────────────────────────────────────────── */
.icv3-ticket {
  --notch: 11px;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  width: min(560px, 100%);
  margin: 4px 0 26px;
  border-radius: 18px;
  background: #fff;
  color: var(--v3-ink-strong);
  box-shadow: 0 24px 48px -20px rgba(15, 10, 80, 0.55), 0 2px 0 rgba(255, 255, 255, 0.4) inset;
  text-align: left;
  /* Two half-circle bites where the stub tears off. */
  -webkit-mask: radial-gradient(circle var(--notch) at var(--tear) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--notch) at var(--tear) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
          mask: radial-gradient(circle var(--notch) at var(--tear) 0, #0000 98%, #000) top / 100% 51% no-repeat,
                radial-gradient(circle var(--notch) at var(--tear) 100%, #0000 98%, #000) bottom / 100% 51% no-repeat;
  --tear: calc(100% - 178px);
}

/* An offer with no end date: no tear-off stub, so no bites either. */
.icv3-ticket--plain { grid-template-columns: minmax(0, 1fr); -webkit-mask: none; mask: none; }

.icv3-ticket__main { min-width: 0; padding: 18px 20px 16px 22px; }

.icv3-ticket__label {
  margin: 0 0 9px;
  color: var(--v3-violet);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.icv3-ticket__code { display: flex; align-items: stretch; gap: 8px; }

.icv3-ticket__chars {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
  padding: 8px 14px;
  border: 2px dashed rgba(73, 65, 227, 0.45);
  border-radius: 11px;
  background: #f5f4ff;
  color: var(--v3-violet);
  font-family: var(--font-display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 800;
  letter-spacing: 0.16em;
  line-height: 1.1;
  user-select: all;
}

.icv3-ticket__copy {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 16px;
  border: 0;
  border-radius: 11px;
  background: var(--v3-violet);
  color: #fff;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 650;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--v3-dur) var(--v3-ease), translate var(--v3-dur) var(--v3-ease-out), box-shadow var(--v3-dur) var(--v3-ease);
}
.icv3-ticket__copy svg { width: 17px; height: 17px; }
.icv3-ticket__copy:hover { translate: 0 -1px; box-shadow: 0 10px 22px rgba(73, 65, 227, 0.35); }
.icv3-ticket__copy:focus-visible { outline: 3px solid rgba(73, 65, 227, 0.4); outline-offset: 2px; }
.icv3-ticket__copy.is-copied { background: var(--v3-mint); }

.icv3-ticket__note {
  margin: 10px 0 0;
  color: var(--v3-body);
  font-size: 13.5px;
  line-height: 1.45;
}

.icv3-ticket__stub {
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 6px;
  width: 178px;
  box-sizing: border-box;
  padding: 16px 14px;
  border-radius: 0 18px 18px 0;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(124, 92, 255, 0.18), transparent 70%),
    #f3f2ff;
  text-align: center;
}
.icv3-ticket__stub::before {
  content: "";
  position: absolute;
  inset: 14px auto 14px 0;
  border-left: 2px dashed rgba(73, 65, 227, 0.28);
}

.icv3-ticket__ends,
.icv3-ticket__date {
  margin: 0;
  color: var(--v3-body);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.icv3-ticket__ends { color: var(--v3-red); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }

.icv3-countdown { display: flex; gap: 5px; margin: 0; }
.icv3-countdown span { display: grid; justify-items: center; min-width: 32px; }
.icv3-countdown b {
  display: block;
  min-width: 32px;
  padding: 5px 0 4px;
  border-radius: 8px;
  background: var(--v3-ink-strong);
  color: #fff;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  text-align: center;
}
.icv3-countdown small { margin-top: 3px; color: var(--v3-muted); font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; }

.icv3-ticket__ended { display: none; margin: 0; color: var(--v3-ink-strong); font-weight: 700; }
.icv3-ticket.is-ended .icv3-ticket__ended { display: block; }
.icv3-ticket.is-ended .icv3-countdown,
.icv3-ticket.is-ended .icv3-ticket__ends,
.icv3-ticket.is-ended .icv3-ticket__date,
.icv3-ticket.is-ended .icv3-ticket__copy { display: none; }
.icv3-ticket.is-ended .icv3-ticket__chars { text-decoration: line-through; opacity: 0.55; }

/* Closing CTA: centred in the gradient panel. */
.icv3-ticket--cta { margin: 22px auto 6px; }
@media (min-width: 992px) {
  .icv3-cta__copy .icv3-ticket--cta { margin-left: 0; }
}

@media (max-width: 575.98px) {
  .icv3-ticket { grid-template-columns: minmax(0, 1fr); -webkit-mask: none; mask: none; }
  .icv3-ticket__stub { width: auto; border-radius: 0 0 18px 18px; grid-template-columns: auto auto; justify-content: center; column-gap: 12px; }
  .icv3-ticket__stub::before { inset: 0 14px auto; border-left: 0; border-top: 2px dashed rgba(73, 65, 227, 0.28); }
  .icv3-ticket__stub { padding: 12px 14px; }
  .icv3-ticket__ends { max-width: 9ch; line-height: 1.25; text-align: left; }
  .icv3-ticket__date { display: none; }
  .icv3-ticket__main { padding: 16px 16px 14px; }
  .icv3-ticket__copy span { display: none; }
  .icv3-ticket__copy { padding: 0 14px; }
}

/* ── Sticky offer bar ──────────────────────────────────────────────── */
.icv3-offerbar {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 1100;
  /* Clear of the support chat bubble in the bottom-right corner. */
  width: min(820px, calc(100% - 200px));
  padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
  translate: -50% 130%;
  transition: translate 520ms var(--v3-ease-out);
  pointer-events: none;
}
.icv3-offerbar.is-shown { translate: -50% 0; pointer-events: auto; }

.icv3-offerbar__inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 10px 20px;
  border-radius: 18px;
  background: rgba(22, 20, 58, 0.94);
  color: #fff;
  box-shadow: 0 20px 44px -12px rgba(15, 10, 60, 0.55);
  -webkit-backdrop-filter: blur(10px);
          backdrop-filter: blur(10px);
}

.icv3-offerbar__text { flex: 1; display: grid; min-width: 0; margin: 0; line-height: 1.25; }
.icv3-offerbar__text b { font-family: var(--font-display); font-size: 15px; }
.icv3-offerbar__time { color: rgba(255, 255, 255, 0.7); font-size: 12.5px; font-variant-numeric: tabular-nums; }

.icv3-offerbar__code {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  border: 1.5px dashed rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.12em;
  cursor: pointer;
}
.icv3-offerbar__code small { color: #b8b4ff; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; }
.icv3-offerbar__code.is-copied { border-color: var(--v3-mint); }
.icv3-offerbar__code.is-copied small { color: #7ef0c9; }

.icv3-offerbar__cta.ic-live-button { min-height: 0; padding: 12px 20px; font-size: 14px; white-space: nowrap; }

@media (max-width: 767.98px) {
  .icv3-offerbar { left: 10px; width: calc(100% - 96px); translate: 0 130%; }
  .icv3-offerbar.is-shown { translate: 0 0; }
  .icv3-offerbar__text { display: none; }
  .icv3-offerbar__inner { justify-content: space-between; }
}
@media (max-width: 575.98px) {
  .icv3-offerbar__inner { gap: 8px; padding: 8px 8px 8px 14px; }
  .icv3-offerbar__text b { font-size: 13px; }
  .icv3-offerbar__time { font-size: 11px; }
  .icv3-offerbar__code { padding: 8px 9px; font-size: 13px; }
  .icv3-offerbar__code small { display: none; }
  .icv3-offerbar__cta.ic-live-button { padding: 11px 14px; font-size: 13px; }
}
/* Keep the footer's last lines clear of the bar. */
body.has-offerbar { padding-bottom: 86px; }

/* ── Savings calculator ────────────────────────────────────────────── */
.icv3-oplans { padding-block: clamp(4.5rem, 8vw, 7rem); background: linear-gradient(180deg, #fff 0%, #f6f5ff 100%); }

.icv3-oplans__controls {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 14px 28px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto clamp(2.25rem, 4vw, 3rem);
  padding: 12px 22px;
  border: 1px solid var(--v3-line);
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(17, 20, 79, 0.06);
}

.icv3-oplans__cur { display: inline-flex; gap: 4px; margin: 0; padding: 4px; border: 0; border-radius: 99px; background: #f1f0fb; }
.icv3-oplans__cur input { position: absolute; opacity: 0; pointer-events: none; }
.icv3-oplans__cur label {
  padding: 7px 16px;
  border-radius: 99px;
  color: var(--v3-body);
  font-family: var(--font-display);
  font-size: 13.5px;
  font-weight: 650;
  cursor: pointer;
  transition: background var(--v3-dur) var(--v3-ease), color var(--v3-dur) var(--v3-ease);
}
.icv3-oplans__cur input:checked + label { background: var(--v3-violet); color: #fff; box-shadow: 0 6px 14px rgba(73, 65, 227, 0.3); }
.icv3-oplans__cur input:focus-visible + label { outline: 3px solid rgba(73, 65, 227, 0.35); outline-offset: 2px; }

.icv3-oplans__list {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  margin: 0;
  padding: 16px 0 0;
  list-style: none;
}
@media (max-width: 1199.98px) { .icv3-oplans__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 575.98px) { .icv3-oplans__list { grid-template-columns: minmax(0, 1fr); } }

.icv3-oplan {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px 24px 26px;
  border: 1px solid var(--v3-line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(17, 20, 79, 0.05);
  cursor: pointer;
  transition: translate var(--v3-dur-slow) var(--v3-ease-out), box-shadow var(--v3-dur-slow) var(--v3-ease), border-color var(--v3-dur) var(--v3-ease);
}
.icv3-oplan:hover { translate: 0 -5px; border-color: rgba(73, 65, 227, 0.36); box-shadow: var(--v3-shadow-lift); }
.icv3-oplan:focus-visible { outline: 3px solid rgba(73, 65, 227, 0.35); outline-offset: 3px; }
.icv3-oplan.is-selected {
  border-color: transparent;
  background: radial-gradient(120% 90% at 50% 0%, rgba(73, 65, 227, 0.08), rgba(73, 65, 227, 0) 62%), #fff;
  box-shadow: 0 0 0 2px var(--v3-violet), 0 26px 52px rgba(73, 65, 227, 0.2);
}

.icv3-oplan__badge {
  position: absolute;
  top: -13px;
  left: 50%;
  translate: -50% 0;
  margin: 0;
  padding: 7px 16px;
  border-radius: 99px;
  background: linear-gradient(135deg, var(--v3-violet-deep), var(--v3-blue));
  color: #fff;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(73, 65, 227, 0.32);
}

.icv3-oplan__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.icv3-oplan__name { margin: 0; color: var(--v3-violet); font-family: var(--font-display); font-size: 15px; font-weight: 800; letter-spacing: 0.12em; }
.icv3-oplan__code {
  padding: 4px 9px;
  border-radius: 99px;
  background: #e5f8ed;
  color: #1c9d5a;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
}
.icv3-oplan__tagline { margin: 6px 0 0; color: var(--v3-body); font-size: 14px; line-height: 1.45; }

.icv3-oplan__price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; margin: 18px 0 4px; }
.icv3-oplan__now { color: var(--v3-ink-strong); font-family: var(--font-display); font-size: clamp(34px, 3vw, 42px); font-weight: 800; letter-spacing: -1.2px; line-height: 1; font-variant-numeric: tabular-nums; }
.icv3-oplan__per { color: var(--v3-body); font-size: 14px; }
.icv3-oplan__was { color: #a3a5b5; font-size: 16px; font-weight: 600; text-decoration-thickness: 2px; text-decoration-color: rgba(248, 1, 52, 0.7); }

.icv3-oplan__billed { margin: 0; color: var(--v3-body); font-size: 13.5px; line-height: 1.5; }
.icv3-oplan__billed b { color: var(--v3-ink-strong); }
.icv3-oplan__tax { display: block; color: var(--v3-muted); font-size: 12px; }
.icv3-oplan__tax:empty { display: none; }

.icv3-oplan__keep {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 14px 0 0;
  padding: 9px 12px;
  border-radius: 11px;
  background: #e9f9f2;
  color: #157a4d;
  font-size: 13.5px;
  line-height: 1.3;
}
.icv3-oplan__keep svg { flex: none; width: 18px; height: 18px; }

.icv3-oplan__features { display: grid; gap: 9px; margin: 18px 0 22px; padding: 0; list-style: none; }
.icv3-oplan__features li { display: flex; gap: 9px; color: var(--v3-ink); font-size: 14px; line-height: 1.4; }
.icv3-oplan__features svg { flex: none; width: 17px; height: 17px; margin-top: 1px; color: var(--v3-mint); }
/* Add-ons under the features: "+" in the brand violet, price in bold. */
.icv3-oplan__extras-label { margin: -8px 0 10px; color: var(--v3-muted); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; }
.icv3-oplan__features.icv3-oplan__extras { margin-top: 0; }
.icv3-oplan__extras svg { color: var(--v3-violet); }
.icv3-oplan__extras b { color: var(--v3-ink-strong); font-weight: 600; white-space: nowrap; }

.icv3-oplan__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: auto;
  padding: 14px 18px;
  border: 1px solid rgba(73, 65, 227, 0.28);
  border-radius: 99px;
  background: #fff;
  color: var(--v3-violet);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
  transition: background var(--v3-dur) var(--v3-ease), color var(--v3-dur) var(--v3-ease), box-shadow var(--v3-dur) var(--v3-ease), translate var(--v3-dur) var(--v3-ease-out);
}
.icv3-oplan__cta svg { width: 18px; height: 18px; }
.icv3-oplan__cta:hover,
.icv3-oplan__cta:focus-visible,
.icv3-oplan.is-selected .icv3-oplan__cta { border-color: transparent; background: var(--v3-red); color: #fff; box-shadow: 0 12px 26px rgba(248, 1, 52, 0.28); }
.icv3-oplan__cta:hover { translate: 0 -2px; }

.icv3-oplans__assure {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 12px;
  max-width: 1160px;
  margin: clamp(2rem, 4vw, 2.75rem) auto 0;
  padding: 0;
  list-style: none;
}
.icv3-oplans__assure li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px 9px 10px;
  border: 1px solid var(--v3-line);
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 8px 20px rgba(17, 20, 79, 0.05);
  color: var(--v3-ink-strong);
  font-size: 14.5px;
  font-weight: 600;
}
.icv3-oplans__assure svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: #e5f8ed; color: #1c9d5a; }

.icv3-oplans__foot { position: relative; z-index: 1; max-width: 760px; margin: 22px auto 0; color: var(--v3-body); font-size: 13.5px; line-height: 1.6; text-align: center; }


/* ── Claim steps ───────────────────────────────────────────────────── */
.icv3-osteps { padding-block: clamp(4.5rem, 8vw, 7rem); }

.icv3-osteps__stage {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  align-items: center;
  gap: clamp(1.75rem, 4vw, 4rem);
}
@media (max-width: 991.98px) {
  .icv3-osteps__stage { grid-template-columns: minmax(0, 1fr); }
  .icv3-osteps__step.is-active { translate: none; }
}

.icv3-osteps__list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }

.icv3-osteps__step {
  position: relative;
  display: flex;
  gap: 16px;
  width: 100%;
  padding: 18px 20px;
  overflow: hidden;
  border: 1px solid var(--v3-line);
  border-radius: 18px;
  background: #fff;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--v3-dur) var(--v3-ease), box-shadow var(--v3-dur) var(--v3-ease), translate var(--v3-dur) var(--v3-ease-out);
}
.icv3-osteps__step:hover { border-color: rgba(73, 65, 227, 0.35); }
.icv3-osteps__step:focus-visible { outline: 3px solid rgba(73, 65, 227, 0.35); outline-offset: 2px; }
.icv3-osteps__step.is-active { border-color: transparent; box-shadow: 0 0 0 2px var(--v3-violet), 0 20px 40px rgba(73, 65, 227, 0.16); translate: 6px 0; }

.icv3-osteps__num {
  display: grid;
  place-items: center;
  flex: none;
  width: 38px;
  height: 38px;
  border-radius: 12px;
  background: #ebeafe;
  color: var(--v3-violet);
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  transition: background var(--v3-dur) var(--v3-ease), color var(--v3-dur) var(--v3-ease);
}
.icv3-osteps__step.is-active .icv3-osteps__num { background: var(--v3-violet); color: #fff; }
.icv3-osteps__step.is-done .icv3-osteps__num { background: #e5f8ed; color: #1c9d5a; }

.icv3-osteps__txt { display: grid; gap: 4px; }
.icv3-osteps__txt b { color: var(--v3-ink-strong); font-family: var(--font-display); font-size: 17px; }
.icv3-osteps__txt span { color: var(--v3-body); font-size: 14.5px; line-height: 1.5; }

.icv3-osteps__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--v3-violet), var(--v3-blue)); }
.icv3-osteps__stage.is-auto .icv3-osteps__step.is-active .icv3-osteps__bar { animation: icv3-fill 4200ms linear forwards; }
@keyframes icv3-fill { to { width: 100%; } }

.icv3-osteps__window {
  position: relative;
  overflow: hidden;
  border-radius: 18px;
  background: #f6f6fb;
  box-shadow: 0 0 0 1px rgba(17, 20, 79, 0.06), var(--v3-shadow-shot);
}
.icv3-osteps__window::before {
  content: "";
  position: absolute;
  inset: 40px -20% -30%;
  background: radial-gradient(50% 50% at 50% 40%, rgba(124, 92, 255, 0.22), transparent 70%);
}
.icv3-osteps__chrome { position: relative; display: flex; align-items: center; gap: 7px; padding: 12px 16px; border-bottom: 1px solid #ebebf3; background: #fff; }
.icv3-osteps__chrome i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.icv3-osteps__chrome i:nth-child(2) { background: #febc2e; }
.icv3-osteps__chrome i:nth-child(3) { background: #28c840; }
.icv3-osteps__chrome span { margin-left: 10px; padding: 4px 14px; border-radius: 99px; background: #f1f1f6; color: var(--v3-muted); font-size: 12px; }

.icv3-osteps__screens { position: relative; display: grid; padding: clamp(18px, 3vw, 34px); }
.icv3-osteps__screen {
  grid-area: 1 / 1;
  box-sizing: border-box;
  width: min(380px, 100%);
  margin: 0 auto;
  padding: 22px 22px 20px;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 18px 40px -16px rgba(17, 20, 79, 0.25);
  opacity: 0;
  visibility: hidden;
  translate: 0 14px;
  transition: opacity 420ms var(--v3-ease), translate 520ms var(--v3-ease-out), visibility 0s linear 420ms;
}
.icv3-osteps__stage[data-step="0"] [data-screen="0"],
.icv3-osteps__stage[data-step="1"] [data-screen="1"],
.icv3-osteps__stage[data-step="2"] [data-screen="2"] { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0s; }

.icv3-mock__title { margin: 0 0 12px; color: var(--v3-ink-strong); font-family: var(--font-display); font-size: 17px; font-weight: 700; }
.icv3-mock__pill { display: inline-block; margin: 0 0 14px; padding: 5px 11px; border-radius: 99px; font-size: 12px; font-weight: 700; }
.icv3-mock__pill--pri { background: #ebeafe; color: var(--v3-violet); }
.icv3-mock__field { display: grid; gap: 4px; margin-bottom: 10px; }
.icv3-mock__field small { color: var(--v3-muted); font-size: 11.5px; font-weight: 600; }
.icv3-mock__field span { padding: 9px 12px; border: 1px solid #e3e4ee; border-radius: 9px; color: var(--v3-ink); font-size: 13.5px; }
.icv3-mock__btn { margin: 14px 0 0; padding: 11px 0; border-radius: 10px; background: var(--v3-violet); color: #fff; font-family: var(--font-display); font-size: 14px; font-weight: 650; text-align: center; }
.icv3-mock__ok { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 12px 0 0; color: #1c9d5a; font-size: 12.5px; font-weight: 600; }
.icv3-mock__ok svg { width: 15px; height: 15px; }

.icv3-mock__switch { display: inline-flex; gap: 3px; margin: 0 0 14px; padding: 3px; border-radius: 99px; background: #f1f0fb; font-size: 12.5px; font-weight: 650; }
.icv3-mock__switch span { padding: 6px 14px; border-radius: 99px; color: var(--v3-body); }
.icv3-mock__switch .is-on { background: var(--v3-violet); color: #fff; }
.icv3-mock__plans { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.icv3-mock__plans li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid #e7e8f0; border-radius: 11px; font-size: 13.5px; }
.icv3-mock__plans li i { width: 14px; height: 14px; border: 2px solid #c9cad8; border-radius: 50%; }
.icv3-mock__plans li b { flex: 1; color: var(--v3-ink-strong); letter-spacing: 0.06em; }
.icv3-mock__plans li span { color: var(--v3-body); font-variant-numeric: tabular-nums; }
.icv3-mock__plans li.is-on { border-color: var(--v3-violet); background: #f6f5ff; box-shadow: 0 0 0 1px var(--v3-violet); }
.icv3-mock__plans li.is-on i { border: 4px solid var(--v3-violet); }

.icv3-mock__label { margin: 0 0 6px; color: var(--v3-muted); font-size: 11.5px; font-weight: 600; }
.icv3-mock__coupon { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; padding: 9px 12px; border: 2px dashed rgba(73, 65, 227, 0.45); border-radius: 10px; background: #f5f4ff; }
.icv3-mock__typed {
  overflow: hidden;
  width: calc(var(--n) * 1.05ch + 2px);
  border-right: 2px solid var(--v3-violet);
  color: var(--v3-violet);
  font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: 0.05ch;
  white-space: nowrap;
}
.icv3-mock__applied { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; padding: 4px 9px; border-radius: 99px; background: #e5f8ed; color: #1c9d5a; font-size: 12px; }
.icv3-mock__applied svg { width: 13px; height: 13px; }
.icv3-mock__lines p { display: flex; justify-content: space-between; gap: 10px; margin: 0; padding: 8px 0; border-top: 1px solid #f0f1f5; color: var(--v3-body); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.icv3-mock__off { color: #ea5455 !important; }
.icv3-mock__total { color: var(--v3-ink-strong) !important; font-weight: 700; }
.icv3-mock__total s { color: #a3a5b5; font-weight: 500; }
.icv3-mock__total b { font-size: 16px; }

/* Checkout plays out: the code types in, it applies, the total drops. */
.icv3-osteps__screen.is-playing .icv3-mock__typed { animation: icv3-type calc(var(--n, 6) * 120ms) steps(var(--n, 6), end) 250ms both, icv3-caret 700ms step-end 4; }
.icv3-osteps__screen.is-playing .icv3-mock__applied { animation: icv3-pop 420ms var(--v3-ease-out) 1250ms both; }
.icv3-osteps__screen.is-playing .icv3-mock__off { animation: icv3-rise 420ms var(--v3-ease-out) 1450ms both; }
.icv3-osteps__screen.is-playing .icv3-mock__total s { animation: icv3-rise 300ms var(--v3-ease-out) 1700ms both; }
.icv3-osteps__screen.is-playing .icv3-mock__total b { animation: icv3-pop 460ms var(--v3-ease-out) 1800ms both; }
.icv3-osteps__screen.is-playing .icv3-mock__plans li.is-on { animation: icv3-pop 460ms var(--v3-ease-out) 400ms both; }
@keyframes icv3-type { from { width: 0; } }
@keyframes icv3-caret { 50% { border-right-color: transparent; } }
@keyframes icv3-pop { from { opacity: 0; scale: 0.85; } }
@keyframes icv3-rise { from { opacity: 0; translate: 0 6px; } }

.icv3-osteps__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 24px; margin-top: clamp(2rem, 4vw, 3rem); text-align: center; }
.icv3-osteps__foot p { max-width: 52ch; margin: 0; color: var(--v3-ink-strong); font-size: 15.5px; font-weight: 600; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .icv3-osteps__screen,
  .icv3-osteps__screen * { animation: none !important; transition: none !important; }
}

/* ── Feature tabs ──────────────────────────────────────────────────── */
.icv3-otabs { padding-block: clamp(4.5rem, 8vw, 7rem); background: linear-gradient(180deg, #f6f5ff 0%, #fff 100%); }

.icv3-otabs__list {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 8px;
  width: fit-content;
  max-width: 100%;
  margin: 0 auto clamp(1.75rem, 3vw, 2.5rem);
  padding: 6px;
  overflow-x: auto;
  border-radius: 99px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--v3-line), 0 10px 28px rgba(17, 20, 79, 0.06);
  scrollbar-width: none;
}
.icv3-otabs__list::-webkit-scrollbar { display: none; }

.icv3-otabs__tab {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 7px;
  padding: 10px 18px;
  overflow: hidden;
  border-radius: 99px;
  color: var(--v3-body);
  font-family: var(--font-display);
  font-size: 14.5px;
  font-weight: 650;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--v3-dur) var(--v3-ease), color var(--v3-dur) var(--v3-ease);
}
.icv3-otabs__tab:hover { color: var(--v3-violet); }
.icv3-otabs__tab.is-active { background: var(--v3-violet); color: #fff; box-shadow: 0 8px 18px rgba(73, 65, 227, 0.3); }
.icv3-otabs__tab:focus-visible { outline: 3px solid rgba(73, 65, 227, 0.35); outline-offset: 2px; }
.icv3-otabs__tab em { padding: 2px 7px; border-radius: 99px; background: #e5f8ed; color: #1c9d5a; font-size: 10px; font-style: normal; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; }
.icv3-otabs__tab.is-active em { background: rgba(255, 255, 255, 0.2); color: #fff; }
.icv3-otabs__timer { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: rgba(255, 255, 255, 0.65); }
.icv3-otabs__ui.is-auto .icv3-otabs__tab.is-active .icv3-otabs__timer { animation: icv3-fill 7000ms linear forwards; }

.icv3-otabs__panel {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  align-items: center;
  gap: clamp(1.75rem, 4vw, 4rem);
}
.icv3-otabs__panel[hidden] { display: none; }
.icv3-otabs__panel.is-active .icv3-otabs__copy { animation: icv3-rise 520ms var(--v3-ease-out) both; }
@media (max-width: 991.98px) {
  .icv3-otabs__panel { grid-template-columns: minmax(0, 1fr); }
  .icv3-otabs__shot { order: -1; }
  .icv3-otabs__list { justify-content: flex-start; }
}

.icv3-otabs__copy h3 { margin: 0 0 12px; color: var(--v3-ink-strong); font-family: var(--font-display); font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.6px; line-height: 1.2; text-wrap: balance; }
.icv3-otabs__copy p { margin: 0 0 18px; color: var(--v3-body); font-size: 16px; line-height: 1.65; }
.icv3-otabs__copy ul { display: grid; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }
.icv3-otabs__copy li { display: flex; gap: 10px; color: var(--v3-ink); font-size: 15px; line-height: 1.45; }
.icv3-otabs__copy li svg { flex: none; width: 19px; height: 19px; color: var(--v3-mint); }
.icv3-otabs__more { display: inline-flex; align-items: center; gap: 6px; color: var(--v3-violet); font-family: var(--font-display); font-weight: 650; text-decoration: none; }
.icv3-otabs__more svg { width: 18px; height: 18px; transition: translate var(--v3-dur) var(--v3-ease-out); }
.icv3-otabs__more:hover svg { translate: 3px 0; }

.icv3-otabs__shot { position: relative; margin: 0; }
.icv3-otabs__blob {
  position: absolute;
  inset: 8% 4% 2%;
  z-index: -1;
  border-radius: 40% 60% 55% 45% / 50% 45% 55% 50%;
  background: linear-gradient(135deg, rgba(124, 92, 255, 0.28), rgba(54, 94, 241, 0.18));
  filter: blur(6px);
}
.icv3-otabs__shot .icv3-layers,
.icv3-otabs__shot > img { display: block; width: 100%; height: auto; }

/* Mobile: the landing hero carries the ticket, so tighten the copy above it. */
@media (max-width: 575.98px) {
  .icv3-phero:has(.icv3-ticket--hero) h1 { font-size: clamp(30px, 8.6vw, 38px); }
}