/* ==========================================================================
   Impruvis campaign landing page
   ========================================================================== */

/* ── Fonts ──────────────────────────────────────────────────────────────── */

/*
 * The Aaux Next files carry a "-ro" suffix: stock Aaux Next reaches its Ț/ț
 * only through the legacy U+0162/U+0163 codepoints, so Romanian text — which
 * uses U+021A/U+021B — fell back to a system font for that one letter.
 * tools/patch-fonts.py adds the two cmap entries; nothing else differs.
 */

@font-face {
  font-family: "Aaux Next";
  src: url("../fonts/aauxnextmdwebfont-ro.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aaux Next";
  src: url("../fonts/aauxnextbdwebfont-ro.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Aaux Next";
  src: url("../fonts/AauxNextBlk-ro.otf") format("opentype");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Myriad Pro Cond";
  src: url("../fonts/MyriadPro-Cond.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* ── Tokens ─────────────────────────────────────────────────────────────── */

:root {
  --purple: #8b45a6;
  --purple-dark: #522972;
  --purple-darker: #401f5a;
  --pink: #e31664;

  --ink: var(--purple-dark);
  --placeholder: #b7b0bb;
  --text-on-dark: #fff;

  --font-display: "Aaux Next", "Segoe UI", system-ui, sans-serif;
  --font-myriad:
    "Myriad Pro Cond", "Aaux Next", "Segoe UI", system-ui, sans-serif;

  --disclaimer-bg: #fff;
  --disclaimer-text: #3f2e7c;

  /* Section backgrounds */
  --hero-grad: linear-gradient(180deg, #6f2c8f 0%, #5b2480 100%);
  --lavender: #efeaf7;
  --card: #fff;
  --rule: #d6c9e4;

  /* Every section shares one content column so the page reads as one grid. */
  --shell: 1180px;
  --gutter: clamp(18px, 4vw, 56px);
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-display);
  font-weight: 500;
  overflow-x: hidden;
  max-width: 100vw;
  background: #fff;
}

/* ==========================================================================
   Page layout — traced from the Figma exports

   Both design files are fixed-width compositions (1280 x 1999 desktop,
   428 x 2491 mobile). Rather than re-invent proportions, every size and
   position below is the design's own number expressed in `--u`: one design
   pixel. `--u` tracks the viewport, so the whole composition scales as one
   piece and stops growing once it reaches 1:1.

   Reading a value: `calc(74 * var(--u))` is "74px in the design file".
   ========================================================================== */

.page {
  --u: min(calc(100vw / 1280), 1.5px);
  width: 100%;
  overflow: hidden;
}

/*
 * Backgrounds stay full-bleed; the composition itself is a 1280-wide box that
 * centres once the viewport outgrows it (where --u has stopped at 1px).
 */
.hero__inner,
.mech__inner,
.benefits__inner,
.products__inner,
.claim__text,
.disclaimer {
  width: calc(1280 * var(--u));
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

/*
 * Taller than the purple field so the product line-up can hang past the
 * diagonal; the colour lives in .hero__bg, which is what actually gets clipped.
 */
.hero {
  position: relative;
  width: 100%;
  height: calc(400 * var(--u));
}

/* design: M0 0H1280V301.855L0 359V0Z */
.hero__bg {
  position: absolute;
  inset: 0 0 auto;
  height: calc(359 * var(--u));
  background: var(--purple-dark);
  clip-path: polygon(0 0, 100% 0, 100% 84.09%, 0 100%);
}

/*
 * Anchored left and allowed to run off the right edge. Only the height is fixed
 * — the width comes from the image's own ratio, so re-cropping the file needs no
 * change here.
 */
.hero__lineup {
  position: absolute;
  left: calc(800 * var(--u));
  top: calc(165 * var(--u));
  width: auto;
  height: calc(235 * var(--u));
}

.hero__inner {
  position: relative;
  height: 100%;
  overflow: hidden;
  color: #fff;
}

.hero__logo {
  position: absolute;
  left: calc(42 * var(--u));
  top: calc(22 * var(--u));
  display: block;
  width: calc(103 * var(--u));
  height: calc(17 * var(--u));
}

.hero__logo img {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__reg {
  position: absolute;
  left: calc(1086.28 * var(--u));
  top: calc(27 * var(--u));
  width: calc(169.526 * var(--u));
  height: calc(33.9614 * var(--u));
  border: calc(2 * var(--u)) solid #fff;
  border-radius: calc(8 * var(--u));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(13 * var(--u));
  letter-spacing: 0.02em;
  line-height: calc(30 * var(--u));
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
}

.hero__reg:hover {
  background: rgba(255, 255, 255, 0.14);
}

.hero__title {
  position: absolute;
  left: calc(44 * var(--u));
  top: calc(46 * var(--u));
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: calc(80 * var(--u));
  line-height: 1;
  letter-spacing: calc(-1 * var(--u));
  text-transform: uppercase;
  white-space: nowrap;
}

.hero__swoosh {
  position: absolute;
  left: calc(41 * var(--u));
  top: calc(149 * var(--u));
  width: calc(878 * var(--u));
  height: calc(18 * var(--u));
}

.hero__lead {
  position: absolute;
  left: calc(42 * var(--u));
  top: calc(172 * var(--u));
  margin: 0;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(24 * var(--u));
  line-height: 1.25;
}

.facts {
  position: absolute;
  left: 0;
  top: calc(224 * var(--u));
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The three columns are not evenly spaced in the design, so each is placed. */
.fact {
  position: absolute;
  top: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: calc(11 * var(--u));
  align-items: start;
}

.fact--1 {
  left: calc(41 * var(--u));
}
.fact--2 {
  left: calc(249 * var(--u));
}
.fact--3 {
  left: calc(517 * var(--u));
}

.fact__icon {
  grid-row: 1 / span 2;
  align-self: center;
  height: calc(70 * var(--u));
  width: auto;
}

.fact__label,
.fact__value {
  justify-self: start;
}

.fact__label {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: calc(19 * var(--u));
  line-height: calc(24 * var(--u));
  text-transform: uppercase;
  white-space: nowrap;
}

.fact__value {
  font-family: var(--font-display);
  font-size: calc(18 * var(--u));
  line-height: calc(21 * var(--u));
  white-space: nowrap;
}

/* ── Campaign mechanic ──────────────────────────────────────────────────── */

/*
 * Everything is placed against the design grid: the band mixes four unequal
 * columns, a dotted rule and two images that break out of it.
 */
.mech {
  position: relative;
  width: 100%;
  height: calc(191 * var(--u));
  background: #fff;
  color: var(--disclaimer-text);
}

.mech__inner {
  position: relative;
  height: 100%;
}

.mech__inner > * {
  position: absolute;
  margin: 0;
}

.mech__icon--cart {
  left: calc(55 * var(--u));
  top: calc(12 * var(--u));
  width: calc(48 * var(--u));
}
.mech__icon--globe {
  left: calc(55 * var(--u));
  top: calc(92 * var(--u));
  width: calc(48 * var(--u));
}
.mech__icon--gift {
  left: calc(446 * var(--u));
  top: calc(7 * var(--u));
  width: calc(49 * var(--u));
}

.mech__buy {
  left: calc(121.9 * var(--u));
  top: calc(-9 * var(--u));
  width: calc(300 * var(--u));
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(24 * var(--u));
  line-height: calc(26.6 * var(--u));
}

.mech__buy strong {
  font-weight: 900;
  text-transform: uppercase;
}

.mech__cta {
  left: calc(121 * var(--u));
  top: calc(91 * var(--u));
  width: calc(296.825 * var(--u));
  height: calc(46.5471 * var(--u));
  padding: 0;
  border: 0;
  border-radius: calc(8 * var(--u));
  background: var(--purple-dark);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(24 * var(--u));
  letter-spacing: 0.01em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s;

  /*
   * The label starts under the "C" of CUMPĂRĂ rather than centred in the
   * button, so the two lines of the mechanic read down the same edge. The
   * padding is the gap between the button box (121u) and that word (121.9u).
   */
  text-align: left;
  padding-left: calc(10 * var(--u));
}

.mech__cta:hover {
  background: var(--purple-darker);
}

.mech__guar {
  left: calc(505.4 * var(--u));
  top: calc(-9 * var(--u));
  width: calc(190 * var(--u));
  font-family: var(--font-display);
  font-weight: 900;
  font-size: calc(28 * var(--u));
  line-height: calc(35 * var(--u));
  text-transform: uppercase;
}

.mech__qty {
  left: calc(446 * var(--u));
  top: calc(88 * var(--u));
  width: calc(242 * var(--u));
  height: calc(50 * var(--u));
  border-radius: calc(8 * var(--u));
  background: var(--pink);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: calc(46 * var(--u));
  line-height: calc(50 * var(--u));
  text-align: center;
  text-transform: uppercase;
}

/* design: dashed 4px line, x=696, y 407→536 */
.mech__rule {
  left: calc(694 * var(--u));
  top: calc(7 * var(--u));
  width: calc(4 * var(--u));
  height: calc(129 * var(--u));
  background-image: radial-gradient(circle, var(--pink) 42%, transparent 44%);
  background-size: calc(4 * var(--u)) calc(12 * var(--u));
}

.mech__brand {
  left: calc(719 * var(--u));
  top: calc(8 * var(--u));
  color: var(--pink);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: calc(29.5 * var(--u));
  line-height: 1;
  white-space: nowrap;
}

.mech__variant {
  left: calc(718 * var(--u));
  top: calc(38 * var(--u));
  width: calc(185 * var(--u));
  color: var(--pink);
  font-family: var(--font-display);
  font-weight: 900;
  font-size: calc(41 * var(--u));
  line-height: calc(37 * var(--u));
}

/* Runs past the bottom of the band, over the claim strip. */
.mech__pack {
  left: calc(1037.96 * var(--u));
  top: calc(14.527 * var(--u));
  width: calc(254.043 * var(--u));
  height: calc(282.244 * var(--u));
  z-index: 2;
}

.mech__badge {
  left: calc(976.735 * var(--u));
  top: calc(-20 * var(--u));
  width: calc(98.79 * var(--u));
  height: calc(98.79 * var(--u));
  transform: rotate(2.16688deg);
  z-index: 3;
}

/* ── Claim strip ────────────────────────────────────────────────────────── */

/* design: linear gradient, #EF5694 to white, so the pack reads over the fade */
.claim {
  position: relative;
  width: 100%;
  height: calc(67 * var(--u));
  background: linear-gradient(90deg, #ef5694 0%, #ef5694 43.75%, #fff 100%);
}

.claim__text {
  margin: 0 auto;
  padding: 0 0 0 calc(58 * var(--u));
  color: #fff;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: calc(29 * var(--u));
  line-height: calc(67 * var(--u));
}

.claim__text strong {
  font-weight: 900;
}

/* ── Disclaimer ─────────────────────────────────────────────────────────── */

/* Narrower than the page: the column stops short of the prize pack above it. */
.disclaimer {
  height: calc(95 * var(--u));
  padding: calc(18 * var(--u)) calc(232 * var(--u)) calc(24 * var(--u))
    calc(56 * var(--u));
  background: var(--disclaimer-bg);
}

.disclaimer p {
  margin: 0;
  color: var(--disclaimer-text);
  font-family: var(--font-myriad);
  font-size: calc(10.4 * var(--u));
  line-height: calc(12.3 * var(--u));
  text-align: justify;
}

/* The Regulament link stays part of the paragraph — underlined, same colour. */
.disclaimer a {
  color: inherit;
  text-decoration: underline;
}

.reg-mobile {
  display: none;
}

/* ── Benefits ───────────────────────────────────────────────────────────── */

/* design: M0 753H1281V1336.65L0 1398L0 753Z, tinted purple at 10% */
.benefits {
  position: relative;
  width: 100%;
  height: calc(645 * var(--u));
  background: rgba(82, 41, 114, 0.1);
  clip-path: polygon(0 0, 100% 0, 100% 90.49%, 0 100%);
}

/* Straddles the top edge of the band. */
/*
 * Zero-height marker sitting exactly on the seam, so the disc can be hung across
 * it. It needs the z-index because .benefits is a later positioned sibling and
 * would otherwise paint its background over the disc.
 */
.seam {
  position: relative;
  z-index: 3;
  height: 0;
}

/* design: circle cx=640.5 cy=766.5 r=36.5, with the seam at y=753 */
.seam__disc {
  position: absolute;
  left: 50%;
  top: calc(-23 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(73 * var(--u));
  height: calc(73 * var(--u));
  margin-left: calc(-36.5 * var(--u));
  border-radius: 50%;
  background: #f8c1d9;
}

.seam__arrow {
  width: calc(32 * var(--u));
  animation: seam-bob 1.8s ease-in-out infinite;
}

/* A short nudge down and back — a scroll hint, not a bounce. */
@keyframes seam-bob {
  0%,
  100% {
    transform: translateY(calc(-4 * var(--u)));
  }
  50% {
    transform: translateY(calc(4 * var(--u)));
  }
}

.benefits__inner {
  position: relative;
  height: 100%;
  color: var(--purple-dark);
}

.benefits__title {
  position: absolute;
  left: 50%;
  top: calc(56 * var(--u));
  width: calc(560 * var(--u));
  margin: 0 0 0 calc(-280 * var(--u));
  font-family: var(--font-display);
  font-weight: 900;
  font-size: calc(31 * var(--u));
  line-height: calc(39.6 * var(--u));
  text-align: center;
  text-transform: uppercase;
}

.benefits__lead {
  position: absolute;
  left: 50%;
  top: calc(144 * var(--u));
  width: calc(930 * var(--u));
  margin: 0 0 0 calc(-465 * var(--u));
  font-family: var(--font-display);
  font-size: calc(19 * var(--u));
  line-height: calc(20.9 * var(--u));
  text-align: center;
}

.cards {
  position: absolute;
  left: 0;
  top: calc(292 * var(--u));
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

.card {
  position: absolute;
  top: 0;
  width: calc(320 * var(--u));
}

.card:nth-child(1) {
  left: calc(49 * var(--u));
}
.card:nth-child(2) {
  left: calc(486 * var(--u));
}
.card:nth-child(3) {
  left: calc(893 * var(--u));
}

.card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: calc(53 * var(--u));
  height: calc(42 * var(--u));
  border-radius: calc(5 * var(--u));
  background: var(--purple-dark);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: calc(30 * var(--u));
}

/* Sits on a tinted disc drawn here rather than baked into the icon file. */
.card__icon {
  position: absolute;
  left: calc(144 * var(--u));
  /* per-column offsets follow */
  top: calc(-43.5 * var(--u));
  width: calc(87 * var(--u));
  height: calc(87 * var(--u));
  border-radius: 50%;
  background: rgba(139, 69, 166, 0.12);
}

.card:nth-child(2) .card__icon {
  left: calc(159 * var(--u));
}
.card:nth-child(3) .card__icon {
  left: calc(139 * var(--u));
}

.card:nth-child(1) .card__num {
  width: calc(48 * var(--u));
}

.card__title {
  margin: calc(21 * var(--u)) 0 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: calc(30 * var(--u));
  line-height: calc(28 * var(--u));
  text-transform: uppercase;
}

.card__body {
  margin: calc(15 * var(--u)) 0 0;
  font-family: var(--font-display);
  font-size: calc(19 * var(--u));
  line-height: calc(21.5 * var(--u));
}

/* ── Product carousel ───────────────────────────────────────────────────── */

/*
 * The design only ever showed one product, but the real range has longer bullet
 * lists, so this section flows instead of being pinned to a fixed height: the
 * design height is the floor and taller slides push the CTA down.
 */
.products {
  position: relative;
  width: 100%;
  min-height: calc(601 * var(--u));
  padding-bottom: calc(60.26 * var(--u));
  background: #fff;
  color: var(--purple-dark);
}

.products__inner {
  position: relative;
  padding-top: calc(22 * var(--u));
}

.products__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: calc(33 * var(--u));
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
}

.carousel {
  position: relative;
  margin-top: calc(32.7 * var(--u));
}

/* Centred on the track, so they stay put however tall the slide is. */
.car-arrow {
  position: absolute;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(59 * var(--u));
  height: calc(59 * var(--u));
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--purple-dark);
  transform: translateY(-50%);
  cursor: pointer;
  transition: background-color 0.2s;
}

.car-arrow:hover {
  background: var(--purple-darker);
}

.car-arrow img {
  width: calc(31 * var(--u));
}

.car-arrow--prev {
  left: calc(166 * var(--u));
}
.car-arrow--next {
  left: calc(1055.6 * var(--u));
}
.car-arrow--next img {
  transform: scaleX(-1);
}

.slide {
  display: none;
  grid-template-columns: calc(355 * var(--u)) calc(327 * var(--u));
  column-gap: calc(29.6 * var(--u));
  align-items: start;
  justify-content: center;
}

.slide.is-active {
  display: grid;
}

.slide__copy {
  margin-top: calc(5 * var(--u));
}

.slide__name {
  width: max-content;
  margin: 0;
  font-family: var(--font-display);
  line-height: 1;
  white-space: nowrap;
}

.slide__brand {
  color: var(--pink);
  font-weight: 900;
  font-size: calc(24 * var(--u));
}

.slide__variant {
  margin-left: calc(6 * var(--u));
  font-weight: 700;
  font-size: calc(18.5 * var(--u));
}

.slide__kicker {
  margin: calc(12 * var(--u)) 0 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(20 * var(--u));
}

.slide__bullets {
  margin: calc(19 * var(--u)) 0 0;
  padding-left: calc(22 * var(--u));
  font-family: var(--font-display);
  font-size: calc(19 * var(--u));
  line-height: calc(20 * var(--u));
}

.slide__bullets li {
  margin-bottom: calc(14 * var(--u));
}

.slide__bullets li::marker {
  color: var(--purple-dark);
}

.slide__visual {
  width: calc(327 * var(--u));
  height: calc(363 * var(--u));
}

.slide__img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* No packshot supplied for this product yet. */
.slide__img:not([src]) {
  outline: 1px dashed rgba(139, 69, 166, 0.45);
  outline-offset: -1px;
  background: rgba(139, 69, 166, 0.06);
}

.products__cta {
  display: block;
  width: calc(378 * var(--u));
  height: calc(51.4286 * var(--u));
  margin: calc(35.3 * var(--u)) auto 0;
  border-radius: calc(25.7143 * var(--u));
  background: var(--purple-dark);
  color: #fff;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: calc(21 * var(--u));
  letter-spacing: 0.01em;
  line-height: calc(51.4286 * var(--u));
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  transition: background-color 0.2s;
}

.products__cta:hover {
  background: var(--purple-darker);
}

.products__cta[aria-disabled] {
  opacity: 0.45;
  pointer-events: none;
}

/* ── Modal shell ────────────────────────────────────────────────────────── */

/* The modal is a full white page, not a card floating on a scrim. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: flex;
  justify-content: center;
  overflow-y: auto;
  padding: 0;
  background: #fff;
}

.modal[hidden] {
  display: none;
}

/*
 * `margin: auto` centres the panel on both axes while still letting a tall form
 * scroll from its top — flex `align-items: center` would clip the overflow.
 */
.modal__content {
  position: relative;
  z-index: 1;
  width: min(860px, 100%);
  margin: auto;
  padding: 6rem 2rem 4rem;
}

.modal__close {
  position: absolute;
  top: 1.6rem;
  right: 2rem;
  z-index: 2;
  background: none;
  border: none;
  padding: 0.2rem;
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 700;
  line-height: 1;
  color: var(--purple-dark);
  cursor: pointer;
}

/* Pin the form's close button to the page corner, not the content column. */
.modal__content > .modal__close {
  position: fixed;
  top: 1.8rem;
  right: 2.5rem;
}

.modal__close--light {
  color: #fff;
}

/* ── Form ───────────────────────────────────────────────────────────────── */

/* Title stays on Aaux Next Black while the form body runs on Myriad Pro. */
.form-title {
  margin: 0 0 2.2rem;
  font-family: var(--font-display);
  font-weight: 900;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.1;
  letter-spacing: 0.01em;
  text-align: center;
  text-transform: uppercase;
  color: var(--purple-dark);
}

.step-lead {
  margin: -1.4rem 0 2rem;
  font-family: var(--font-myriad);
  font-size: 15px;
  text-align: center;
  color: var(--purple-dark);
}

.step-panel {
  display: none;
  flex-direction: column;
}

.step-panel.is-active {
  display: flex;
}

.step-panel[hidden] {
  display: none;
}

.form-row {
  display: grid;
  gap: 1rem 2.2rem;
  margin-bottom: 1.4rem;
}

.form-row--two {
  grid-template-columns: 1fr 1fr;
}

.form-row--narrow {
  width: 72%;
  margin-left: auto;
  margin-right: auto;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  min-width: 0;
}

/*
 * Only one Myriad weight is supplied, so 700 is a synthesised bold. Nudging the
 * size and tracking keeps the labels reading as heavy as the Aaux originals.
 */
.field label {
  padding-left: 1.2rem;
  font-family: var(--font-myriad);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: 0.015em;
  color: var(--purple-dark);
}

.field input {
  width: 100%;
  padding: 13px 22px;
  border: 3px solid var(--purple);
  border-radius: 999px;
  background: transparent;
  font-family: var(--font-myriad);
  font-weight: 400;
  font-size: 15px;
  color: var(--purple-dark);
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.field input::placeholder {
  color: var(--placeholder);
  font-weight: 400;
}

.field input:focus {
  border-color: var(--purple-dark);
  box-shadow: 0 0 0 3px rgba(139, 69, 166, 0.15);
}

.field input.error {
  border-color: var(--pink);
}

/* Keep the native date control on the same baseline as the text inputs. */
.field input[type="date"] {
  min-height: 51px;
}

.field input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.6;
}

/* ── Upload ─────────────────────────────────────────────────────────────── */

.upload-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 1.6rem 0 0.4rem;
}

.file-upload-input {
  position: absolute;
  width: 0.1px;
  height: 0.1px;
  opacity: 0;
  overflow: hidden;
  z-index: -1;
}

/* The upload button and its fine print stay on Aaux Next. */
#receipt-label {
  font-family: var(--font-display);
}

.upload-hint {
  width: 70%;
  margin: 1rem auto 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13.5px;
  line-height: 1.4;
  text-align: center;
  color: var(--purple-dark);
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
  display: inline-block;
  width: min(360px, 60%);
  padding: 14px 28px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--font-myriad);
  font-weight: 700;
  font-size: clamp(16px, 1.4vw, 21px);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition:
    background-color 0.2s,
    color 0.2s;
}

.btn--primary {
  background: var(--purple);
  border-color: var(--purple);
  color: #fff;
}

.btn--primary:hover {
  background: var(--purple-dark);
  border-color: var(--purple-dark);
}

.btn--dark {
  background: var(--purple-dark);
  border-color: var(--purple-dark);
  color: #fff;
}

.btn--dark:hover:not(:disabled) {
  background: var(--purple-darker);
  border-color: var(--purple-darker);
}

.btn--ghost {
  background: transparent;
  border-color: var(--purple);
  color: var(--purple-dark);
}

.btn--ghost:hover:not(:disabled) {
  background: rgba(139, 69, 166, 0.08);
}

.btn--submit {
  display: block;
  margin: 2.2rem auto 0;
}

.btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.btn--primary.error {
  border-color: var(--pink);
}

.actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 2.2rem;
}

.actions .btn {
  width: auto;
  min-width: 200px;
}

/* ── Checkboxes ─────────────────────────────────────────────────────────── */

.checks {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  width: 82%;
  margin: 1.8rem auto 0;
}

.check {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: start;
  gap: 0.9rem;
  cursor: pointer;
  user-select: none;
  font-family: var(--font-myriad);
  font-size: 14px;
  line-height: 1.35;
  color: var(--purple-dark);
}

.check input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.checkmark {
  position: relative;
  width: 28px;
  height: 28px;
  margin-top: -1px;
  border: 3px solid var(--purple);
  border-radius: 7px;
  flex-shrink: 0;
}

.checkmark::after {
  content: "";
  position: absolute;
  display: none;
  left: 8px;
  top: 2px;
  width: 6px;
  height: 14px;
  border: solid var(--purple-dark);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.check input:checked ~ .checkmark::after {
  display: block;
}

.check a {
  color: inherit;
  font-weight: 700;
  text-decoration: none;
}

.check a:hover {
  text-decoration: underline;
}

.check.error .checkmark {
  border-color: var(--pink);
}

/* ── Loader ─────────────────────────────────────────────────────────────── */

.loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 3rem 0 1rem;
  text-align: center;
  font-family: var(--font-myriad);
  font-weight: 700;
  color: var(--purple-dark);
}

.loader[hidden] {
  display: none;
}

.spinner {
  width: 44px;
  height: 44px;
  border: 4px solid rgba(139, 69, 166, 0.2);
  border-top-color: var(--purple);
  border-radius: 50%;
  animation: spin 0.9s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .spinner {
    animation-duration: 3s;
  }
  .button:hover {
    transform: none;
  }
  .seam__arrow {
    animation: none;
  }
}

/* ── Result modal ───────────────────────────────────────────────────────── */

.message-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(760px, 94vw);
  min-height: min(470px, 70vh);
  margin: auto;
  padding: 3rem 3.5rem;
  border-radius: 34px;
  text-align: center;
  color: #fff;
  background: var(--purple);
}

.message-card.is-error {
  background: var(--pink);
}

.message-card.is-success {
  background: var(--purple);
}

.message-text {
  margin: 0;
  font-weight: 700;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.5;
}

/* ── Mobile ─────────────────────────────────────────────────────────────── */

/*
 * "Mobile design.svg" is a separate 428 x 2491 composition, not a reflow of the
 * desktop one, so this block re-points `--u` at 428 and restates the positions
 * from that file. The cap keeps the column from ballooning on a tablet.
 */
@media (max-width: 1000px) {
  .page {
    --u: calc(100vw / 428);
  }

  .hero__inner,
  .mech__inner,
  .benefits__inner,
  .products__inner,
  .claim__text,
  .disclaimer {
    width: calc(428 * var(--u));
  }

  /* ── Hero ── */

  /* Height comes from the line-up below, so any re-crop just works. */
  .hero {
    height: auto;
  }

  .hero__inner {
    height: auto;
    padding-top: calc(257 * var(--u));
  }

  /* design: M0 0H428V340.67L0 385.5V0Z */
  .hero__bg {
    height: calc(385.5 * var(--u));
    clip-path: polygon(0 0, 100% 0, 100% 88.37%, 0 100%);
  }

  .hero__logo {
    left: 50%;
    top: calc(27 * var(--u));
    margin-left: calc(-51.5 * var(--u));
  }

  /* The Regulament pill moves out of the hero and under the disclaimer. */
  .hero__reg {
    display: none;
  }

  .hero__title {
    left: 0;
    top: calc(60 * var(--u));
    width: 100%;
    font-size: calc(50 * var(--u));
    line-height: calc(43 * var(--u));
    letter-spacing: calc(-0.5 * var(--u));
    text-align: center;
    white-space: normal;
  }

  .hero__swoosh {
    display: none;
  }

  .hero__lead {
    left: 0;
    top: calc(176 * var(--u));
    width: 100%;
    font-size: calc(13 * var(--u));
    text-align: center;
  }

  .facts {
    top: calc(216 * var(--u));
  }

  .fact--1 {
    left: calc(20 * var(--u));
  }
  .fact--2 {
    left: calc(127 * var(--u));
  }
  .fact--3 {
    left: calc(266 * var(--u));
  }

  .fact {
    column-gap: calc(6 * var(--u));
  }

  /* Fact 3 has a two-line value; keep its icon on the same baseline as the others. */
  .fact__icon {
    align-self: start;
    height: calc(33 * var(--u));
  }

  /* Sized so the nowrap label clears the next column's icon at every width. */
  .fact__label {
    font-size: calc(12.6 * var(--u));
    line-height: calc(19 * var(--u));
  }

  .fact__value {
    font-size: calc(11.5 * var(--u));
    line-height: calc(12.1 * var(--u));
  }

  /* Bleeds off both edges in the mobile composition. */
  /*
   * Full screen width and no wider, in flow at the bottom of the hero so it sets
   * the section's height. `height: auto` keeps the packshot's own proportions —
   * the design box was a different ratio and squashed it.
   */
  .hero__lineup {
    position: static;
    display: block;
    width: 100%;
    height: auto;
  }

  /* ── Mechanic ── */

  .mech {
    height: calc(357.124 * var(--u));
  }

  .mech__icon--cart {
    left: calc(32 * var(--u));
    top: calc(16 * var(--u));
    width: calc(39 * var(--u));
  }
  .mech__icon--globe {
    left: calc(33.5 * var(--u));
    top: calc(95 * var(--u));
    width: calc(39 * var(--u));
  }
  .mech__icon--gift {
    left: calc(31 * var(--u));
    top: calc(161 * var(--u));
    width: calc(38 * var(--u));
  }

  .mech__buy {
    left: calc(89.7 * var(--u));
    top: calc(8 * var(--u));
    width: calc(250 * var(--u));
    font-size: calc(19 * var(--u));
    line-height: calc(24.4 * var(--u));
  }

  .btn.mech__cta,
  .mech__cta {
    left: calc(89 * var(--u));
    top: calc(100 * var(--u));
    width: calc(244 * var(--u));
    height: calc(25 * var(--u));
    font-size: calc(15.5 * var(--u));
    padding-left: calc(10 * var(--u));
  }

  .mech__guar {
    left: calc(81 * var(--u));
    top: calc(157 * var(--u));
    width: calc(125 * var(--u));
    font-size: calc(18.5 * var(--u));
    line-height: calc(24.6 * var(--u));
  }

  .mech__qty {
    left: calc(31 * var(--u));
    top: calc(214.174 * var(--u));
    width: calc(171 * var(--u));
    height: calc(39.5 * var(--u));
    font-size: calc(30 * var(--u));
    line-height: calc(39.5 * var(--u));
  }

  .mech__rule {
    left: calc(211 * var(--u));
    top: calc(164.587 * var(--u));
    height: calc(88 * var(--u));
  }

  .mech__brand {
    left: calc(231.4 * var(--u));
    top: calc(158 * var(--u));
    font-size: calc(18 * var(--u));
  }

  .mech__variant {
    left: calc(231.4 * var(--u));
    top: calc(185 * var(--u));
    width: calc(160 * var(--u));
    font-size: calc(33 * var(--u));
    line-height: calc(31 * var(--u));
  }

  .mech__badge {
    left: calc(220.364 * var(--u));
    top: calc(271.802 * var(--u));
    width: calc(67.36 * var(--u));
    height: calc(67.36 * var(--u));
    transform: rotate(1.31236deg);
  }

  .mech__pack {
    left: calc(277.658 * var(--u));
    top: calc(289 * var(--u));
    width: calc(136.774 * var(--u));
    height: calc(151.957 * var(--u));
  }

  /* ── Claim strip ── */

  .claim {
    height: calc(34.36 * var(--u));
  }

  .claim__text {
    padding-left: calc(26.7 * var(--u));
    font-size: calc(13.5 * var(--u));
    line-height: calc(34.36 * var(--u));
  }

  /* ── Disclaimer + the repeated Regulament pill ── */

  /* The prize pack overhangs the top of this band, hence the deep top padding. */
  .disclaimer {
    height: calc(178.252 * var(--u));
    padding: calc(67.5 * var(--u)) calc(15 * var(--u)) 0 calc(22.9 * var(--u));
  }

  .disclaimer p {
    font-size: calc(9 * var(--u));
    line-height: calc(10.3 * var(--u));
  }

  .reg-mobile {
    display: block;
    width: calc(299.6 * var(--u));
    height: calc(43.95 * var(--u));
    margin: 0 auto calc(61.314 * var(--u));
    border: calc(3 * var(--u)) solid var(--purple-dark);
    border-radius: calc(21.98 * var(--u));
    color: var(--purple-dark);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: calc(17.5 * var(--u));
    letter-spacing: 0.02em;
    line-height: calc(38 * var(--u));
    text-align: center;
    text-decoration: none;
    text-transform: uppercase;
  }

  /* ── Benefits ── */

  /* design: M0 1093H428V2095.16L0 2134V1093Z */
  .benefits {
    height: calc(1041 * var(--u));
    clip-path: polygon(0 0, 100% 0, 100% 96.27%, 0 100%);
  }

  /* design: circle cx=215.5 cy=1089.5 r=31.5, with the seam at y=1093 */
  .seam__disc {
    top: calc(-35 * var(--u));
    width: calc(63 * var(--u));
    height: calc(63 * var(--u));
    margin-left: calc(-31.5 * var(--u));
  }

  .seam__arrow {
    width: calc(23 * var(--u));
  }

  .benefits__title {
    top: calc(48 * var(--u));
    width: calc(300 * var(--u));
    margin-left: calc(-150 * var(--u));
    font-size: calc(26 * var(--u));
    line-height: calc(28.8 * var(--u));
  }

  .benefits__lead {
    top: calc(143 * var(--u));
    width: calc(370 * var(--u));
    margin-left: calc(-185 * var(--u));
    font-size: calc(11.5 * var(--u));
    line-height: calc(13.4 * var(--u));
  }

  /* Stacked, each card's icon pinned to the right of its own block. */
  .cards {
    top: calc(234 * var(--u));
  }

  .card {
    width: calc(300 * var(--u));
  }

  .card:nth-child(1) {
    left: calc(36 * var(--u));
    top: 0;
  }
  .card:nth-child(2) {
    left: calc(34 * var(--u));
    top: calc(266 * var(--u));
  }
  .card:nth-child(3) {
    left: calc(33 * var(--u));
    top: calc(552 * var(--u));
  }

  .card__icon,
  .card:nth-child(2) .card__icon,
  .card:nth-child(3) .card__icon {
    left: calc(267 * var(--u));
    top: 0;
  }

  .card__title {
    margin-top: calc(23 * var(--u));
    font-size: calc(28 * var(--u));
    line-height: calc(29 * var(--u));
  }

  .card__body {
    margin-top: calc(14 * var(--u));
    font-size: calc(15.5 * var(--u));
    line-height: calc(18 * var(--u));
  }

  /* ── Products ── */

  .products {
    min-height: calc(357 * var(--u));
    padding-bottom: calc(45.13 * var(--u));
  }

  .products__inner {
    padding-top: calc(16 * var(--u));
  }

  .products__title {
    width: calc(270 * var(--u));
    margin: 0 auto;
    font-size: calc(20 * var(--u));
    line-height: calc(23.7 * var(--u));
  }

  .carousel {
    margin-top: calc(5.6 * var(--u));
  }

  .slide {
    grid-template-columns: calc(190 * var(--u)) calc(107 * var(--u));
    column-gap: calc(7.5 * var(--u));
  }

  .slide__copy {
    margin-top: 0;
  }

  /* brand and variant stack on their own lines here */
  .slide__name {
    width: auto;
    white-space: normal;
    line-height: calc(16 * var(--u));
  }

  .slide__brand {
    font-size: calc(14 * var(--u));
  }
  .slide__variant {
    display: block;
    margin-left: 0;
    font-size: calc(11.5 * var(--u));
  }

  .slide__kicker {
    margin-top: calc(9 * var(--u));
    font-size: calc(11 * var(--u));
  }

  .slide__bullets {
    margin-top: calc(11 * var(--u));
    padding-left: calc(12 * var(--u));
    font-size: calc(10.5 * var(--u));
    line-height: calc(12 * var(--u));
  }

  .slide__bullets li {
    margin-bottom: calc(6 * var(--u));
  }

  /* The packshot sits lower than the copy in the mobile composition. */
  .slide__visual {
    width: calc(107 * var(--u));
    height: calc(119 * var(--u));
    margin-top: calc(35.5 * var(--u));
  }

  .car-arrow {
    width: calc(42 * var(--u));
    height: calc(42 * var(--u));
  }

  .car-arrow img {
    width: calc(22 * var(--u));
  }

  .car-arrow--prev {
    left: calc(7 * var(--u));
  }
  .car-arrow--next {
    left: calc(384 * var(--u));
  }

  .products__cta {
    width: calc(201.072 * var(--u));
    height: calc(30.871 * var(--u));
    margin-top: calc(17.3 * var(--u));
    border-radius: calc(15.4356 * var(--u));
    font-size: calc(13 * var(--u));
    line-height: calc(30.871 * var(--u));
  }

  /* ── Entry form + modals ── */

  /*
   * The form is a plain document flow, not part of the traced composition, so
   * it uses rem rather than --u. Every row collapses to a single column.
   */
  .modal__content {
    padding: 5rem 1.5rem 3rem;
  }

  .modal__close,
  .modal__content > .modal__close {
    top: 1.1rem;
    right: 1.2rem;
    font-size: 2.2rem;
  }

  .form-row--two {
    grid-template-columns: 1fr;
  }

  .form-row--narrow,
  .checks,
  .upload-hint {
    width: 100%;
  }

  .btn {
    width: 100%;
  }

  /* Submit sits above "back", so the primary action is the one under the thumb. */
  .actions {
    flex-direction: column-reverse;
  }

  .actions .btn {
    width: 100%;
  }

  .message-card {
    width: 92vw;
    min-height: 60vh;
    padding: 2.5rem 1.8rem;
    border-radius: 24px;
  }
}