/* WHAT I DO, "The Tickets" (homepage section styles; from the offers-2 prototype)
   ------------------------------------------------------------------
   Price-first: the offers are three printed cinema tickets laid on the
   counter, each a different stock.
     00  light card stock, ink print, cobalt stub   — the €500 test video
     01  cobalt stock, paper print                  — Short-Form Program
     02  ink stock, paper print, cobalt-light       — Cinematic Productions
   Every ticket is die-cut: two side notches and a row of punched holes
   make a real perforation (CSS masks, so the table shows through and
   the drop shadow follows the cut). The stub below it carries the
   action and starts to tear on hover / keyboard focus.

   Progressive enhancement: the default CSS is the finished counter.
   The 01 tier punch is three real radio buttons; :has() rolls the
   price digit, the per-video price and the struck standard rate
   without JS (offers.js mirrors the choice into --t). Hidden
   entrance states live only under .offers2--armed, which offers.js
   adds when motion is allowed. Motion is transform / opacity /
   clip-path only. Every class is prefixed offers2 so motion.js never
   touches this section. Layout is language-proof: the same CSS sets
   the English markup and the Finnish one (fi/index.html:
   "1 500 €" with the sign after the figure, longer stub copy that
   drops the button under it).
   ------------------------------------------------------------------ */

.offers2 {
  --o2-paper: var(--paper, #f0ece3);
  --o2-ink: var(--ink, #14110c);
  --o2-cobalt: var(--cobalt, #2b34ff);
  --o2-cobalt-light: var(--cobalt-light, #7a83ff);
  --o2-stock: #fbf8f2;                             /* fresh card stock, a shade off the page */
  --o2-ease: var(--ease, cubic-bezier(0.16, 1, 0.3, 1));
  --o2-snap: cubic-bezier(0.3, 1.45, 0.45, 1);     /* mechanical counter: a hair of overshoot */
  --o2-deal: cubic-bezier(0.2, 1.12, 0.32, 1);     /* a ticket landing on the counter */
  --o2-gap: clamp(16px, 1.7vw, 24px);

  position: relative;
  padding: clamp(56px, 7vw, 112px) 0 clamp(96px, 11vw, 168px);
  color: var(--o2-ink);
  overflow-x: clip;                                 /* tilted tickets never cause a sideways scroll */
}
.offers2 ::selection { background: var(--o2-cobalt); color: var(--o2-paper); }

.offers2__inner {
  max-width: var(--maxw, 1320px);
  margin: 0 auto;
  padding: 0 var(--gutter, 24px);
}

.offers2-sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ================================================================
   HEAD
   ================================================================ */
.offers2__label {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.74rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--o2-cobalt);
}
/* the label mark is a tiny die-cut ticket */
.offers2__label-mark {
  flex: 0 0 auto;
  width: 22px;
  height: 13px;
  background: var(--o2-cobalt);
  border-radius: 2px;
  -webkit-mask:
    radial-gradient(circle at 0 50%, #0000 3.5px, #000 4px) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, #0000 3.5px, #000 4px) 100% 0 / 51% 100% no-repeat;
          mask:
    radial-gradient(circle at 0 50%, #0000 3.5px, #000 4px) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, #0000 3.5px, #000 4px) 100% 0 / 51% 100% no-repeat;
}
.offers2__label::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--line, rgba(20, 17, 12, 0.14));
}
.offers2__title {
  margin: clamp(18px, 2.2vw, 30px) 0 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 76%;
  font-size: clamp(2.9rem, 7.4vw, 7.4rem);
  line-height: 0.88;
  letter-spacing: -0.035em;
  text-wrap: balance;
}
.offers2__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 1000px) {
  .offers2__head {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    grid-template-areas: "label label" "title lede";
    column-gap: clamp(28px, 3.4vw, 56px);
    align-items: end;
  }
  .offers2__label { grid-area: label; }
  .offers2__title { grid-area: title; }
  .offers2__lede { grid-area: lede; justify-self: end; margin-bottom: 0.45em; max-width: 21ch; }
}
.offers2__lede {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: clamp(16px, 1.8vw, 24px) 0 0;
  font-family: var(--font-display);
  font-weight: 560;
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: var(--ink-soft, #3a342b);
}
.offers2__lede::before {
  content: "";
  flex: 0 0 auto;
  width: clamp(28px, 3vw, 44px);
  height: 2px;
  background: var(--o2-cobalt);
}

/* ================================================================
   THE ROW — three tickets on the counter
   ================================================================ */
/* Boxy stock: each ticket is only as tall as its print needs. The 00
   ticket is wide enough to carry its stamp beside the price, 02 sets
   its price and fares side by side (see the @container rules). */
.offers2__row {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.42fr) minmax(0, 1.22fr);
  column-gap: var(--o2-gap);
  align-items: start;
  margin-top: clamp(40px, 4.6vw, 68px);
}
.offers2-tkt--start  { margin-top: clamp(32px, 4.4vw, 72px); }    /* the small one lands lower */
.offers2-tkt--cinema { margin-top: clamp(4px, 0.8vw, 12px); }

/* ---------- per-stock palette ---------- */
.offers2-tkt--start {
  --stock: var(--o2-stock);
  --print: var(--o2-ink);
  --soft: #5f584d;                                   /* 6.4:1 on the stock */
  --accent: var(--o2-cobalt);
  --rule: rgba(20, 17, 12, 0.18);
  --stub-stock: var(--o2-cobalt);
  --stub-print: var(--o2-paper);
  --grain-op: 0.55;
  --grain-blend: multiply;
  --r: -2.6deg;
  --tear: 3.2deg;
  --deal: -9deg;
  --d: 0s;
}
.offers2-tkt--program {
  --stock: var(--o2-cobalt);
  --print: var(--o2-paper);
  --soft: var(--o2-paper);                           /* no tints on cobalt: paper is 5.9:1, tints fail */
  --accent: var(--o2-paper);
  --rule: rgba(240, 236, 227, 0.34);
  --stub-stock: var(--o2-cobalt);
  --stub-print: var(--o2-paper);
  --grain-op: 0.3;
  --grain-blend: overlay;
  --r: 0deg;
  --tear: 1.5deg;
  --deal: 4deg;
  --d: 0.12s;
}
.offers2-tkt--cinema {
  --stock: var(--o2-ink);
  --print: var(--o2-paper);
  --soft: #b8b0a3;                                   /* 8.6:1 on ink */
  --accent: var(--o2-cobalt-light);                  /* 5.8:1 on ink */
  --rule: rgba(240, 236, 227, 0.2);
  --stub-stock: var(--o2-ink);
  --stub-print: var(--o2-paper);
  --grain-op: 0.4;
  --grain-blend: screen;
  --r: 1.5deg;
  --tear: 1.7deg;
  --deal: 10deg;
  --d: 0.24s;
}

/* ---------- the ticket ---------- */
.offers2-tkt {
  position: relative;
  min-width: 0;
  container-type: inline-size;                       /* all inner sizes scale with the ticket (cqi) */
}
.offers2-tkt__card {
  --pad: clamp(16px, 5.6cqi, 28px);
  --n: clamp(10px, 3.1cqi, 15px);                    /* side-notch radius */
  --h: 2.7px;                                         /* punched-hole radius */
  --p: 11px;                                          /* hole pitch */
  --rad: 7px;
  position: relative;
  transform: rotate(var(--r));
  filter:
    drop-shadow(0 1px 1px rgba(20, 17, 12, 0.16))
    drop-shadow(0 16px 22px rgba(20, 17, 12, 0.14));
  transition: transform 0.7s var(--o2-ease), filter 0.7s var(--o2-ease);
}

/* The body: everything above the perforation. Three mask layers are
   intersected: left notch, right notch, and a row of half-holes along
   the bottom edge. The stub carries the mirror image, so the two halves
   meet as full round holes. Without mask-composite support the layers
   add up to "no cut" — a plain rectangle, never a broken one. */
.offers2-tkt__body {
  --cut-l: radial-gradient(circle at 0 100%, #0000 var(--n), #000 calc(var(--n) + 0.5px));
  --cut-r: radial-gradient(circle at 100% 100%, #0000 var(--n), #000 calc(var(--n) + 0.5px));
  --holes: radial-gradient(circle at 50% 100%, #0000 var(--h), #000 calc(var(--h) + 0.5px));
  position: relative;
  isolation: isolate;
  padding: var(--pad) var(--pad) calc(var(--pad) + 4px);
  background: var(--stock);
  color: var(--print);
  border-radius: var(--rad) var(--rad) 0 0;
  -webkit-mask-image: var(--cut-l), var(--cut-r), var(--holes);
  -webkit-mask-size: 100% 100%, 100% 100%, var(--p) 100%;
  -webkit-mask-repeat: no-repeat, no-repeat, repeat-x;
  -webkit-mask-position: 0 0, 0 0, 50% 0;
  -webkit-mask-composite: source-in;
          mask-image: var(--cut-l), var(--cut-r), var(--holes);
          mask-size: 100% 100%, 100% 100%, var(--p) 100%;
          mask-repeat: no-repeat, no-repeat, repeat-x;
          mask-position: 0 0, 0 0, 50% 0;
          mask-composite: intersect;
}
/* stock texture, under the print so type stays crisp */
.offers2-tkt__body::before,
.offers2-tkt__tear::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 140px 140px;
  opacity: var(--grain-op);
  mix-blend-mode: var(--grain-blend);
}

/* ---------- stub (hover zone stays put; the paper inside it tears) ---------- */
.offers2-tkt__stub { position: relative; }
.offers2-tkt__tear {
  --cut-l: radial-gradient(circle at 0 0, #0000 var(--n), #000 calc(var(--n) + 0.5px));
  --cut-r: radial-gradient(circle at 100% 0, #0000 var(--n), #000 calc(var(--n) + 0.5px));
  --holes: radial-gradient(circle at 50% 0, #0000 var(--h), #000 calc(var(--h) + 0.5px));
  position: relative;
  isolation: isolate;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 14px;
  padding: calc(var(--pad) * 0.5 + 6px) var(--pad) calc(var(--pad) * 0.5 + 3px);
  background: var(--stub-stock);
  color: var(--stub-print);
  border-radius: 0 0 var(--rad) var(--rad);
  transform-origin: 0 0;
  transition: transform 0.55s var(--o2-snap);
  -webkit-mask-image: var(--cut-l), var(--cut-r), var(--holes);
  -webkit-mask-size: 100% 100%, 100% 100%, var(--p) 100%;
  -webkit-mask-repeat: no-repeat, no-repeat, repeat-x;
  -webkit-mask-position: 0 0, 0 0, 50% 0;
  -webkit-mask-composite: source-in;
          mask-image: var(--cut-l), var(--cut-r), var(--holes);
          mask-size: 100% 100%, 100% 100%, var(--p) 100%;
          mask-repeat: no-repeat, no-repeat, repeat-x;
          mask-position: 0 0, 0 0, 50% 0;
          mask-composite: intersect;
}
/* the 01 stub is the same cobalt as its body: a hairline of ink printed
   along the tear so the two parts still read as two */
.offers2-tkt--program .offers2-tkt__tear,
.offers2-tkt--cinema .offers2-tkt__tear {
  box-shadow: inset 0 1px 0 var(--rule);
}

/* ---------- rail: the ticket's name (Test screening / Season pass / Premiere) · No. ---------- */
.offers2-tkt__rail {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 clamp(10px, 3cqi, 16px);
  padding-bottom: 10px;
  border-bottom: 1px solid var(--rule);
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.offers2-tkt__rail span:first-child {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 80%;
  font-size: 0.92rem;
  letter-spacing: 0.1em;
}

.offers2-tkt__slate {
  margin: 0 0 8px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--soft);
}
.offers2-tkt__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 780;
  font-stretch: 84%;
  font-size: clamp(1.45rem, 7cqi, 2.3rem);
  line-height: 0.96;
  letter-spacing: -0.022em;
  text-wrap: balance;
}

/* ---------- prices ---------- */
.offers2-tkt__price {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: 10px;
  margin: 0;
}
.offers2-tkt__num {
  display: inline-flex;
  align-items: flex-start;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 76%;
  line-height: 1;
  letter-spacing: -0.024em;
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: "kern" 1, "tnum" 1, "lnum" 1;
  white-space: nowrap;
  margin: -0.07em 0 -0.12em -0.03em;                /* trim the line box to the figures */
}
.offers2-tkt__num > span { display: block; line-height: 1; }
/* the currency sign is set like a price tag: smaller, riding the cap
   line, with its own air (works before the figure in EN, after it in FI) */
.offers2-tkt__num > .offers2-tkt__cur {
  font-size: 0.56em;
  line-height: 1;
  letter-spacing: 0;
  margin: 0.1em 0.07em 0 0;
}
.offers2-tkt__num > .offers2-tkt__cur:last-child { margin: 0.1em 0 0 0.1em; }
/* the tabular "1" on the counter carries its own side bearing */
.offers2-tkt__price--roll .offers2-tkt__num > .offers2-tkt__cur:first-child { margin-right: 0; }
.offers2-tkt__terms,
.offers2-tkt__unit,
.offers2-tkt__from,
.offers2-tkt__kind {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* 00: the price fills the ticket (beside the stamp once there is room) */
.offers2-tkt__price--solo { margin-top: clamp(12px, 4cqi, 18px); row-gap: 8px; }
.offers2-tkt__price--solo .offers2-tkt__num { font-size: min(6.4rem, 40cqi); }
.offers2-tkt__price--solo .offers2-tkt__terms { flex-basis: 100%; }

/* 01: rolling price */
.offers2-tkt__price--roll { grid-area: price; row-gap: 6px; }
.offers2-tkt__price--roll .offers2-tkt__num { font-size: min(6rem, 17.5cqi); }
.offers2-tkt__unit { padding-bottom: 0.2em; }

/* 02: from … (the kind drops under the figure when a language runs long) */
.offers2-tkt__price--from { margin-top: clamp(14px, 4.4cqi, 20px); row-gap: 8px; }
.offers2-tkt__price--from .offers2-tkt__num { font-size: min(5.6rem, 19cqi); }
.offers2-tkt__kind { flex: 1 1 8ch; max-width: 14ch; padding-bottom: 0.2em; color: var(--soft); }
.offers2-tkt__from { padding-bottom: 0.2em; }

/* The roll: a clipped window over a strip of values. --t (0/1/2) picks
   the row; the thousands digit is the only figure that changes, so it
   rolls like a mechanical counter while ",500" stays printed. */
.offers2-roll {
  display: block;
  height: 1em;
  overflow: hidden;
}
.offers2-roll__strip {
  display: block;
  transform: translate3d(0, calc(var(--t, 0) * -1em), 0);
  transition: transform 0.62s var(--o2-snap);
}
.offers2-roll__strip > span { display: block; height: 1em; line-height: 1; }
.offers2-roll--line { display: inline-block; height: 1.3em; vertical-align: bottom; }
.offers2-roll--line .offers2-roll__strip { transform: translate3d(0, calc(var(--t, 0) * -1.3em), 0); }
.offers2-roll--line .offers2-roll__strip > span { height: 1.3em; line-height: 1.3; white-space: nowrap; }

/* no-JS: the checked radio drives --t (offers.js sets it inline too).
   Separate rules on purpose: an unsupported :has() must not take any
   other selector down with it. */
.offers2-tkt--program:has(.offers2-tier__input[value="1"]:checked) { --t: 1; }
.offers2-tkt--program:has(.offers2-tier__input[value="2"]:checked) { --t: 2; }

/* ---------- 01 deck: picture | price, per-video, tier punch ---------- */
/* the phone column is sized to the ticket (cqi) so the picture and the
   price column come out about the same height: no dead band under either */
.offers2-tkt__deck {
  display: grid;
  grid-template-columns: clamp(92px, 25cqi, 148px) minmax(0, 1fr);
  grid-template-areas:
    "pic price"
    "pic per"
    "pic deal"
    "pic ."
    "pic tier";
  grid-template-rows: auto auto auto minmax(12px, 1fr) auto;
  column-gap: clamp(14px, 4.6cqi, 24px);
  margin: clamp(14px, 3.6cqi, 20px) 0 clamp(16px, 4.2cqi, 22px);
}
.offers2-tkt__phone {
  grid-area: pic;
  position: relative;
  aspect-ratio: 9 / 16;
  align-self: start;
  border-radius: clamp(10px, 3cqi, 16px);
  overflow: hidden;
  background: #0d0b08;
  box-shadow:
    0 0 0 3px var(--o2-ink),
    0 14px 26px rgba(20, 17, 12, 0.34);
}
.offers2-tkt__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.offers2-tkt__tag {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 4px 6px;
  border-radius: 3px;
  background: rgba(20, 17, 12, 0.62);
  color: var(--o2-paper);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.12em;
  pointer-events: none;
}

/* play / pause: a 44px hit area around a small chip */
.offers2-tkt__pp {
  position: absolute;
  right: 2px;
  bottom: 2px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--o2-paper);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.offers2-tkt__pp[hidden] { display: none; }
.offers2-tkt__pp:focus-visible { outline: 2px solid var(--o2-paper); outline-offset: -4px; border-radius: 50%; }
.offers2-tkt__pp-ico {
  position: relative;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: rgba(20, 17, 12, 0.62);
}
.offers2-tkt__pp-ico::before,
.offers2-tkt__pp-ico::after {
  content: "";
  position: absolute;
  top: 8px;
  width: 3px;
  height: 10px;
  background: currentColor;
}
.offers2-tkt__pp-ico::before { left: 9px; }
.offers2-tkt__pp-ico::after { left: 14px; }
.offers2-tkt__pp.is-paused .offers2-tkt__pp-ico::after { display: none; }
.offers2-tkt__pp.is-paused .offers2-tkt__pp-ico::before {
  left: 10px;
  top: 8px;
  width: 8px;
  height: 10px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.offers2-tkt__per {
  grid-area: per;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 2px 10px;
  margin: clamp(8px, 2.2cqi, 10px) 0 0;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.offers2-tkt__vat {
  font-size: 0.64rem;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

/* founding rate: a small die-cut paper chip with the struck standard
   rate (it rolls with the tier) beside it, the terms on the line below */
.offers2-tkt__deal {
  grid-area: deal;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  margin: clamp(10px, 3cqi, 14px) 0 0;
  font-family: var(--font-mono);
  font-weight: 500;
}
.offers2-tkt__badge {
  display: inline-block;
  flex: 0 0 auto;
  margin: 0;
  padding: 5px 11px 4px;
  background: var(--o2-paper);
  color: var(--o2-cobalt);
  font-size: 0.6rem;
  line-height: 1.2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  -webkit-mask:
    radial-gradient(circle at 0 50%, #0000 3.5px, #000 4px) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, #0000 3.5px, #000 4px) 100% 0 / 51% 100% no-repeat;
          mask:
    radial-gradient(circle at 0 50%, #0000 3.5px, #000 4px) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, #0000 3.5px, #000 4px) 100% 0 / 51% 100% no-repeat;
}
.offers2-tkt__was {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  column-gap: 8px;
  margin: 0;
  font-size: 0.64rem;
  line-height: 1.3;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.offers2-tkt__strike {
  position: relative;
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  text-transform: none;
}
.offers2-tkt__strike::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  top: 52%;
  height: 1.5px;
  background: currentColor;
  transform-origin: 0 50%;
  transition: transform 0.5s var(--o2-ease);
}
/* two terms, each with the ticket's square bullet, so a wrap never
   strands a separator at the end of a line */
.offers2-tkt__lock {
  display: flex;
  flex: 1 0 100%;
  flex-wrap: wrap;
  gap: 2px 14px;
  margin: 0;
  font-size: 0.6rem;
  line-height: 1.4;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.offers2-tkt__lock > span {
  position: relative;
  min-width: 0;
  padding-left: 11px;
}
.offers2-tkt__lock > span::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 5px;
  height: 5px;
  background: currentColor;
}

/* tier switch: three punch targets; the chosen one is punched through
   (a paper disc = the counter showing through the cobalt) */
.offers2-tier {
  grid-area: tier;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}
.offers2-tier__legend {
  float: left;                                       /* keeps the legend out of the fieldset border slot */
  width: 100%;
  margin: 0 0 8px;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 0.64rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.offers2-tier__opts {
  clear: both;
  display: flex;
  gap: clamp(6px, 2.2cqi, 12px);
}
.offers2-tier__opt {
  position: relative;
  display: block;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.offers2-tier__input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.offers2-tier__punch {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: clamp(44px, 10.5cqi, 52px);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1.5px dashed currentColor;
  font-family: var(--font-display);
  font-weight: 760;
  font-stretch: 86%;
  font-size: clamp(1rem, 4cqi, 1.25rem);
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
  transition: color 0.25s linear, border-color 0.25s linear;
}
.offers2-tier__punch::before {
  content: "";
  position: absolute;
  inset: -1.5px;
  z-index: -1;
  border-radius: 50%;
  background: var(--o2-paper);
  box-shadow: inset 0 2px 4px rgba(20, 17, 12, 0.28);   /* the lip of a punched hole */
  transform: scale(0);
  transition: transform 0.42s var(--o2-snap);
}
.offers2-tier__opt:hover .offers2-tier__punch { border-style: solid; }
.offers2-tier__input:checked + .offers2-tier__punch {
  color: var(--o2-cobalt);
  border-style: solid;
  border-color: var(--o2-paper);
}
.offers2-tier__input:checked + .offers2-tier__punch::before { transform: scale(1); }
.offers2-tier__input:focus-visible + .offers2-tier__punch {
  outline: 2px solid var(--o2-paper);
  outline-offset: 4px;
}

/* ---------- list ---------- */
.offers2-tkt__list {
  display: grid;
  gap: 5px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-display);
  font-weight: 450;
  font-size: 0.875rem;
  line-height: 1.38;
  text-wrap: pretty;
}
.offers2-tkt__list li {
  position: relative;
  padding-left: 17px;
}
.offers2-tkt__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 7px;
  height: 7px;
  background: var(--accent);
}
/* ---------- 00 specifics: stamp + credit ---------- */
.offers2-tkt__stamp {
  display: inline-block;
  margin: 2px 0 12px -3px;
  padding: 3px;
  border: 2px solid currentColor;
  border-radius: 4px;
  color: var(--o2-cobalt);
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: 78%;
  font-size: clamp(1rem, 7.6cqi, 1.3rem);
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transform: rotate(-7deg);
  transform-origin: 20% 60%;
  mix-blend-mode: multiply;                          /* ink sits in the stock, not on it */
  /* rubber-stamp bite: a speckle mask so the ink misses the paper in places */
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='s' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 4.2 0 0 0 -1'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23s)'/%3E%3C/svg%3E");
  -webkit-mask-size: 120px 120px;
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='s' x='0' y='0'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 4.2 0 0 0 -1'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23s)'/%3E%3C/svg%3E");
          mask-size: 120px 120px;
}
.offers2-tkt__stamp-in {
  display: block;
  padding: 6px 9px 5px;
  border: 1px solid currentColor;
  border-radius: 2px;
}
.offers2-tkt--start .offers2-tkt__list { margin-top: clamp(12px, 4.4cqi, 16px); }
/* the credit is fine print under a dashed rule, not a box */
.offers2-tkt__credit {
  margin: 12px 0 0;
  padding-top: 9px;
  border-top: 1px dashed var(--rule);
  color: var(--o2-cobalt);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.02em;
  text-wrap: pretty;
}

/* Wide enough for both (every width but the tight 3-up just above 1000px):
   the stamp comes down beside the price as a square two-line stamp and
   gives its own row back. The grid only re-seats it; source order (and
   so the reading order) is unchanged. */
@container (min-width: 236px) {
  .offers2-tkt--start .offers2-tkt__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "rail" "slate" "title" "price" "list" "credit";
  }
  .offers2-tkt--start .offers2-tkt__rail   { grid-area: rail; }
  .offers2-tkt--start .offers2-tkt__slate  { grid-area: slate; }
  .offers2-tkt--start .offers2-tkt__title  { grid-area: title; }
  .offers2-tkt--start .offers2-tkt__price  { grid-area: price; }
  .offers2-tkt--start .offers2-tkt__list   { grid-area: list; }
  .offers2-tkt--start .offers2-tkt__credit { grid-area: credit; }
  .offers2-tkt__price--solo .offers2-tkt__num { font-size: min(6.4rem, 29cqi); }
  .offers2-tkt--start .offers2-tkt__stamp {
    grid-area: price;
    justify-self: end;
    align-self: start;
    z-index: 1;
    margin: calc(clamp(12px, 4cqi, 18px) + 3px) -2px 0 0;
    padding: 2px;
    font-size: clamp(0.9rem, 5.6cqi, 1.1rem);
  }
  .offers2-tkt--start .offers2-tkt__stamp-in {
    width: min-content;
    padding: 6px 8px 5px;
    line-height: 1.05;
    text-align: center;
  }
}

/* Landscape stock (only where 00 spans the whole row, 1000-1179px): the
   price block on the left, what's included on the right, so the ticket
   reads wide and short instead of a narrow strip. */
@container (min-width: 560px) {
  .offers2-tkt--start .offers2-tkt__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-areas:
      "rail  rail"
      "slate list"
      "title list"
      "price credit";
    column-gap: clamp(28px, 6cqi, 56px);
    align-items: start;
  }
  .offers2-tkt--start .offers2-tkt__list { margin-top: 0; align-self: start; }
  .offers2-tkt--start .offers2-tkt__credit { align-self: end; margin-top: 0; }
  .offers2-tkt__price--solo .offers2-tkt__num { font-size: min(6.4rem, 15cqi); }
}

/* ---------- 02 specifics: 16:9 screen + fare list ---------- */
.offers2-tkt__screen {
  position: relative;
  margin: 0 calc(-1 * var(--pad));
}
.offers2-tkt__scope {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #0d0b08;
}
.offers2-tkt__scope .offers2-tkt__video { object-position: 50% 58%; }
.offers2-tkt__titling {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: clamp(28px, 9cqi, 44px) var(--pad) clamp(12px, 3.4cqi, 16px);
  background: linear-gradient(180deg, rgba(20, 17, 12, 0) 0%, rgba(20, 17, 12, 0.72) 48%, rgba(20, 17, 12, 0.94) 100%);
  pointer-events: none;
}
.offers2-tkt__titling .offers2-tkt__slate { color: var(--o2-paper); margin-bottom: 6px; }
.offers2-tkt--cinema .offers2-tkt__tag { top: 12px; left: auto; right: 48px; }
.offers2-tkt--cinema .offers2-tkt__pp { top: 2px; bottom: auto; right: 2px; }

.offers2-tkt__fares {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin: clamp(12px, 3.6cqi, 16px) 0 clamp(14px, 4cqi, 18px);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
/* two fare cells, like the price boxes on a ticket */
.offers2-tkt__fare {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  padding: 10px 0 11px;
}
.offers2-tkt__fare + .offers2-tkt__fare {
  padding-left: clamp(12px, 4cqi, 18px);
  border-left: 1px dashed var(--rule);
}
.offers2-tkt__fare dt {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--soft);
}
.offers2-tkt__fare dd {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 760;
  font-stretch: 84%;
  font-size: clamp(1.02rem, 4.6cqi, 1.3rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--accent);
}

/* Wide enough (desktop 3-up, tablet): the price tag and the fare table
   sit side by side under the picture, one band instead of two. */
@container (min-width: 340px) {
  .offers2-tkt--cinema .offers2-tkt__body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "rail rail" "screen screen" "price fares" "list list";
    column-gap: clamp(16px, 4.4cqi, 24px);
  }
  .offers2-tkt--cinema .offers2-tkt__rail   { grid-area: rail; }
  .offers2-tkt--cinema .offers2-tkt__screen { grid-area: screen; }
  .offers2-tkt--cinema .offers2-tkt__list   { grid-area: list; }
  /* the tag stacks: from / figure / kind, so its column is the figure's width */
  .offers2-tkt--cinema .offers2-tkt__price {
    grid-area: price;
    display: grid;
    justify-items: start;
    align-content: start;
    row-gap: 7px;
    margin: clamp(14px, 4cqi, 18px) 0 clamp(14px, 4cqi, 18px);
  }
  .offers2-tkt--cinema .offers2-tkt__from,
  .offers2-tkt--cinema .offers2-tkt__kind { padding-bottom: 0; }
  .offers2-tkt--cinema .offers2-tkt__fares {
    grid-area: fares;
    grid-template-columns: minmax(0, 1fr);
    align-content: center;
    margin: clamp(14px, 4cqi, 18px) 0 clamp(14px, 4cqi, 18px);
    padding-left: clamp(14px, 4cqi, 20px);
    border: 0;
    border-left: 1px dashed var(--rule);
  }
  .offers2-tkt--cinema .offers2-tkt__fare { padding: 0 0 10px; }
  .offers2-tkt--cinema .offers2-tkt__fare + .offers2-tkt__fare {
    padding: 10px 0 0;
    border-left: 0;
    border-top: 1px dashed var(--rule);
  }
  .offers2-tkt--cinema .offers2-tkt__list {
    padding-top: clamp(12px, 3.6cqi, 16px);
    border-top: 1px solid var(--rule);
  }
}

/* ---------- stub content ---------- */
/* the stub text keeps its headline on one line; when a language runs
   long the button drops under it instead of squeezing it */
.offers2-tkt__stub-text { flex: 1 1 11rem; }
.offers2-tkt__teaser,
.offers2-tkt__stub-text > .offers2-tkt__go { white-space: nowrap; }
.offers2-tkt__stub-text > .offers2-tkt__go + .offers2-tkt__fine { margin-top: 0; }
.offers2-tkt__teaser {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 780;
  font-stretch: 84%;
  font-size: clamp(1.05rem, 4.6cqi, 1.4rem);
  line-height: 1.05;
  letter-spacing: -0.01em;
}
.offers2-tkt__fine {
  margin: 6px 0 0;
  font-family: var(--font-mono);
  font-size: 0.6rem;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

/* text-link CTA (00 fills its whole stub, 02 sits beside Full pricing) */
.offers2-tkt__go {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-family: var(--font-display);
  font-weight: 780;
  font-stretch: 86%;
  font-size: clamp(1.05rem, 4.6cqi, 1.35rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
  text-decoration-color: transparent;
  transition: text-decoration-color 0.25s linear;
}
.offers2-tkt__go:hover { text-decoration-color: currentColor; }
.offers2-tkt__go:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.offers2-tkt__arrow {
  display: inline-block;
  transition: transform 0.45s var(--o2-ease);
}
.offers2-tkt__go:hover .offers2-tkt__arrow { transform: translateX(5px); }
.offers2-tkt__tear--link { padding: 0; }
.offers2-tkt__go--solo {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 0;
  padding: calc(var(--pad) * 0.5 + 8px) var(--pad) calc(var(--pad) * 0.5 + 5px);
  text-decoration: none;
}
.offers2-tkt__go-text { display: block; min-width: 0; }
.offers2-tkt__go-sub {
  display: block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 500;
  font-stretch: 100%;
  line-height: 1.2;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.offers2-tkt__go--solo:hover { text-decoration: none; }
.offers2-tkt__go--solo:focus-visible { outline-offset: -8px; }
.offers2-tkt__go--solo .offers2-tkt__arrow {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--o2-paper);
  color: var(--o2-cobalt);
  font-size: 1.1rem;
}

/* "Full pricing": a mini ticket (the notched fill is a pseudo, so the
   focus ring is never masked away) */
.offers2-tkt__full {
  -webkit-appearance: none;
          appearance: none;
  position: relative;
  isolation: isolate;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 0 15px 0 17px;
  border: 0;
  border-radius: 4px;
  background: none;
  color: var(--o2-cobalt);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.offers2-tkt__full--ghost { color: var(--o2-ink); }
.offers2-tkt__full::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: 4px;
  background: var(--o2-paper);
  -webkit-mask:
    radial-gradient(circle at 0 50%, #0000 5px, #000 5.5px) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, #0000 5px, #000 5.5px) 100% 0 / 51% 100% no-repeat;
          mask:
    radial-gradient(circle at 0 50%, #0000 5px, #000 5.5px) 0 0 / 51% 100% no-repeat,
    radial-gradient(circle at 100% 50%, #0000 5px, #000 5.5px) 100% 0 / 51% 100% no-repeat;
  transition: transform 0.4s var(--o2-snap), background-color 0.25s linear;
}
.offers2-tkt__full:hover::before { transform: scale(1.04); background: #fffdf8; }
.offers2-tkt__full:focus-visible { outline: 2px solid var(--o2-paper); outline-offset: 3px; }
.offers2-tkt__plus {
  position: relative;
  width: 10px;
  height: 10px;
}
.offers2-tkt__plus::before,
.offers2-tkt__plus::after {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 10px;
  height: 2px;
  background: currentColor;
  transition: transform 0.4s var(--o2-ease);
}
.offers2-tkt__plus::after { transform: rotate(90deg); }
.offers2-tkt__full:hover .offers2-tkt__plus::after { transform: rotate(180deg); }

/* ================================================================
   INTERACTION (fine pointer): the ticket lifts and squares up; the
   stub starts to tear along the perforation. Keyboard focus in the
   stub tears it too, so the affordance isn't mouse-only.
   ================================================================ */
@media (prefers-reduced-motion: no-preference) {
  .offers2-tkt__stub:focus-within .offers2-tkt__tear { transform: rotate(var(--tear)) translate3d(0, 3px, 0); }
}
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .offers2-tkt__card:hover {
    transform: translate3d(0, -8px, 0) rotate(0deg);
    filter:
      drop-shadow(0 2px 2px rgba(20, 17, 12, 0.14))
      drop-shadow(0 28px 34px rgba(20, 17, 12, 0.18));
  }
  .offers2-tkt__stub:hover .offers2-tkt__tear { transform: rotate(var(--tear)) translate3d(0, 3px, 0); }
}

/* ================================================================
   TABLET: one column, the tickets stacked like a fanned hand
   ================================================================ */
/* 1000-1179px: three across leaves 00 a narrow strip, so it takes the
   whole first row as landscape stock and 01 + 02 share the second. */
@media (min-width: 1000px) and (max-width: 1179px) {
  .offers2__row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    row-gap: clamp(36px, 4vw, 52px);
  }
  .offers2-tkt--start {
    grid-column: 1 / -1;
    width: min(100%, 820px);
    justify-self: start;
    margin-top: 0;
  }
  .offers2-tkt--start .offers2-tkt__card { --r: -1.4deg; }
  .offers2-tkt--cinema { margin-top: clamp(18px, 2.4vw, 28px); }
}

@media (max-width: 999px) {
  .offers2__row {
    grid-template-columns: minmax(0, 1fr);
    row-gap: clamp(28px, 5vw, 48px);
    max-width: 620px;
    margin-left: auto;
    margin-right: auto;
  }
  .offers2-tkt--start,
  .offers2-tkt--cinema { margin-top: 0; }
  .offers2-tkt--start { width: min(100%, 440px); justify-self: start; }
  .offers2-tkt--start  .offers2-tkt__card { --r: -1.8deg; }
  .offers2-tkt--cinema .offers2-tkt__card { --r: 1.1deg; }
}

/* ================================================================
   PHONE
   ================================================================ */
@media (max-width: 700px) {
  .offers2 { padding: 64px 0 104px; }
  .offers2__title { font-size: clamp(2.7rem, 13.4vw, 4rem); line-height: 0.9; }
  .offers2__row { row-gap: 30px; margin-top: 36px; }
  .offers2-tkt--start { width: 100%; }
  .offers2-tkt--start  .offers2-tkt__card { --r: -1.2deg; }
  .offers2-tkt--cinema .offers2-tkt__card { --r: 0.8deg; }

  /* 01: the price takes the full width; picture beside per-video + punch */
  .offers2-tkt__deck {
    grid-template-columns: minmax(0, 34fr) minmax(0, 66fr);
    grid-template-areas:
      "price price"
      "pic   per"
      "pic   deal"
      "pic   ."
      "pic   tier";
    grid-template-rows: auto auto auto minmax(10px, 1fr) auto;
  }
  .offers2-tkt__price--roll { margin-bottom: 12px; }
  .offers2-tkt__price--roll .offers2-tkt__num { font-size: min(6.6rem, 24cqi); }
  .offers2-tkt__per { margin-top: 0; }
  .offers2-tier__opts { gap: 6px; }
  .offers2-tier__punch { width: 44px; }
  .offers2-tkt__price--solo .offers2-tkt__num { font-size: min(7rem, 31cqi); }
}

/* ================================================================
   ENTRANCE (only once offers.js arms the section; never under
   reduced motion). The tickets are dealt onto the counter one by one;
   then 00 is stamped, 02's letterbox opens, 01's punch targets pop.
   ================================================================ */
@media (prefers-reduced-motion: no-preference) {
  .offers2--armed .offers2__label,
  .offers2--armed .offers2__title,
  .offers2--armed .offers2__lede {
    opacity: 0;
    transform: translate3d(0, 0.3em, 0);
    transition: opacity 0.7s var(--o2-ease), transform 1s var(--o2-ease);
  }
  .offers2--armed .offers2__label { transform: translate3d(0, 12px, 0); }
  .offers2--armed .offers2__head.is-in .offers2__label,
  .offers2--armed .offers2__head.is-in .offers2__title,
  .offers2--armed .offers2__head.is-in .offers2__lede { opacity: 1; transform: none; }
  .offers2--armed .offers2__head.is-in .offers2__title { transition-delay: 0.08s; }
  .offers2--armed .offers2__head.is-in .offers2__lede { transition-delay: 0.2s; }
  .offers2--armed .offers2__label::after {
    transform: scaleX(0);
    transform-origin: 0 50%;
    transition: transform 1s var(--o2-ease) 0.1s;
  }
  .offers2--armed .offers2__head.is-in .offers2__label::after { transform: none; }

  /* dealt */
  .offers2--armed .offers2-tkt {
    opacity: 0;
    transform: translate3d(0, 110px, 0) rotate(var(--deal));
    transition:
      opacity 0.45s linear var(--d),
      transform 1.15s var(--o2-deal) var(--d);
  }
  .offers2--armed .offers2-tkt.is-in { opacity: 1; transform: none; }

  /* 00: the stamp slams down after the ticket lands */
  .offers2--armed .offers2-tkt__stamp {
    opacity: 0;
    transform: rotate(-13deg) scale(1.9);
    transition:
      opacity 0.08s linear 0.78s,
      transform 0.3s cubic-bezier(0.55, 0, 0.85, 0.35) 0.78s;
  }
  .offers2--armed .offers2-tkt.is-in .offers2-tkt__stamp { opacity: 1; transform: rotate(-7deg); }

  /* 02: the letterbox opens behind the title */
  .offers2--armed .offers2-tkt__scope {
    clip-path: inset(50% 0 50% 0);
    transition: clip-path 1.1s var(--o2-ease) 0.7s;
  }
  .offers2--armed .offers2-tkt.is-in .offers2-tkt__scope { clip-path: inset(0 0 0 0); }

  /* 01: the three punch targets pop in, the chosen one gets punched */
  .offers2--armed .offers2-tier__opt {
    opacity: 0;
    transform: scale(0.5);
    transition: opacity 0.3s linear, transform 0.5s var(--o2-snap);
  }
  .offers2--armed .offers2-tkt.is-in .offers2-tier__opt { opacity: 1; transform: none; }
  .offers2--armed .offers2-tkt.is-in .offers2-tier__opt:nth-child(1) { transition-delay: 0.7s; }
  .offers2--armed .offers2-tkt.is-in .offers2-tier__opt:nth-child(2) { transition-delay: 0.8s; }
  .offers2--armed .offers2-tkt.is-in .offers2-tier__opt:nth-child(3) { transition-delay: 0.9s; }
  .offers2--armed .offers2-tkt:not(.is-in) .offers2-tier__punch::before { transform: scale(0); }
  .offers2--armed .offers2-tkt.is-in .offers2-tier__input:checked + .offers2-tier__punch::before { transition-delay: 1.05s; }
  .offers2--armed .offers2-tkt.is-in.offers2-tkt--settled .offers2-tier__input:checked + .offers2-tier__punch::before { transition-delay: 0s; }

  /* 01: the standard rate is struck through once the punch lands */
  .offers2--armed .offers2-tkt:not(.is-in) .offers2-tkt__strike::after { transform: scaleX(0); }
  .offers2--armed .offers2-tkt.is-in .offers2-tkt__strike::after { transition-delay: 1.25s; }
}

/* ================================================================
   REDUCED MOTION: the finished counter, no movement at all
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .offers2-tkt__card,
  .offers2-tkt__tear,
  .offers2-roll__strip,
  .offers2-tier__punch,
  .offers2-tier__punch::before,
  .offers2-tkt__full::before,
  .offers2-tkt__strike::after,
  .offers2-tkt__plus::before,
  .offers2-tkt__plus::after,
  .offers2-tkt__arrow { transition: none; }
}

/* keep the cobalt viewfinder dot visible over the cobalt program ticket */
body:has(.offers2-tkt--program:hover) .vf__dot { box-shadow: 0 0 0 1.5px var(--paper, #f0ece3); }
#start-small { scroll-margin-top: 96px; }