/* ==========================================================================
   3RR Game — download.css
   Page-specific layout for download.html: QR hero, relay stepper with a
   baton pass between steps, requirement/permission split and help band.
   ========================================================================== */

/* ------------------------------------------------------------- 1. hero */
.dl-hero {
  position: relative;
  padding-block: 0 clamp(3rem, 7vw, 5rem);
  overflow: hidden;
  background: var(--color-bg-base);
}

.dl-hero > .wrap { position: relative; z-index: 1; }

.dl-hero__inner {
  display: grid;
  gap: clamp(2.5rem, 6vw, 3.5rem);
  align-items: center;
  padding-top: clamp(1rem, 3vw, 2rem);
}

.dl-hero h1 { margin-bottom: var(--space-md); }
.dl-hero .lead { max-width: 54ch; }
.dl-hero__ctas { margin-block: var(--space-lg); }

@media (min-width: 1200px) {
  .dl-hero__inner { grid-template-columns: 1.1fr 0.9fr; gap: clamp(3rem, 5vw, 5rem); }
  .dl-hero__visual { transform: translateX(4%); }
}

/* ------------------------------------------------------- 3. relay stepper */
.stepper__row {
  display: grid;
  gap: var(--space-lg);
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}

.stepper__step {
  position: relative;
  padding: 1.6rem 1.5rem;
  background: var(--color-surface-card);
  clip-path: var(--clip-angle-panel);
  box-shadow: var(--shadow-card);
  transition: transform var(--dur-mid) var(--ease-snap), box-shadow var(--dur-mid) var(--ease-out);
}
.stepper__step:hover { transform: translateY(-5px); box-shadow: var(--shadow-card-hover); }
.stepper__step h3 { font-size: 1.15rem; margin-bottom: 0.5rem; }
.stepper__step p { font-size: var(--fs-sm); }

.stepper__num {
  display: inline-grid;
  place-items: center;
  width: 52px; height: 52px;
  margin-bottom: 0.9rem;
  background: linear-gradient(125deg, var(--color-sapphire-deep), var(--color-sapphire-block-light));
  clip-path: polygon(16% 0, 100% 0, 84% 100%, 0 100%);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  color: #fff;
  box-shadow: 0 8px 18px rgba(30, 79, 216, 0.26);
}

.stepper__hint {
  margin-top: 0.6rem !important;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--color-border-strong);
  font-size: var(--fs-xs) !important;
  color: var(--color-text-tertiary) !important;
}

/* the baton pass between steps */
.stepper__baton {
  position: absolute;
  right: 50%;
  bottom: -34px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 34px; height: 34px;
  transform: translateX(50%) rotate(90deg);
  background: var(--color-bg-base);
  color: var(--color-sapphire-block);
  clip-path: polygon(18% 0, 100% 0, 82% 100%, 0 100%);
  box-shadow: inset 0 0 0 2px var(--color-border-strong);
}
.stepper__baton svg { width: 17px; height: 17px; }

@media (min-width: 768px) {
  .stepper__row { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2.5rem; }
  .stepper__baton { right: -2.5rem; bottom: auto; top: 50%; transform: translate(50%, -50%) rotate(0deg); }
  .stepper__step:nth-child(2n) .stepper__baton { right: 50%; bottom: -34px; top: auto; transform: translateX(50%) rotate(90deg); }
}

@media (min-width: 1200px) {
  .stepper__row { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 2.25rem; }
  .stepper__baton,
  .stepper__step:nth-child(2n) .stepper__baton {
    right: -2.25rem; bottom: auto; top: 50%;
    transform: translate(50%, -50%) rotate(0deg);
  }
  .stepper__step:nth-child(4n) .stepper__baton { display: none; }

  /* alternating lift so the row reads as a relay, not a plain grid */
  .stepper__step:nth-child(odd) { transform: translateY(-14px); }
  .stepper__step:nth-child(odd):hover { transform: translateY(-19px); }
}

/* --------------------------------------------------- 4. requirement split */
.dl-split { display: grid; gap: var(--space-lg); }

.dl-split__panel {
  padding: clamp(1.35rem, 3.4vw, 2rem);
  background: var(--color-surface-card);
  clip-path: var(--clip-angle-panel);
  box-shadow: var(--shadow-card);
}
.dl-split__panel h3 { font-size: 1.25rem; margin-bottom: var(--space-md); }

.dl-note { margin-top: var(--space-md); font-size: var(--fs-xs); color: var(--color-text-tertiary); }

.perm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.9rem; }
.perm-list li {
  position: relative;
  margin: 0;
  padding-left: 1.75rem;
}
.perm-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.45em;
  width: 11px; height: 11px;
  background: linear-gradient(125deg, var(--color-sapphire-block), var(--color-cyan-scoreboard));
  transform: skewX(-24deg);
}
.perm-list strong {
  display: block;
  font-family: var(--font-display);
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--color-navy-ink);
}
.perm-list span {
  display: block;
  margin-top: 0.15rem;
  font-size: var(--fs-sm);
  color: var(--color-text-secondary);
  line-height: 1.65;
}

@media (min-width: 1200px) { .dl-split { grid-template-columns: 0.95fr 1.05fr; gap: var(--space-xl); } }

/* ------------------------------------------------------- 5. update cols */
.dl-cols h2 { font-size: var(--fs-display-md); }
.dl-cols .btn-row { margin-top: var(--space-md); }

/* --------------------------------------------------------- 6. help band */
.dl-help {
  display: grid;
  gap: var(--space-md);
  align-items: center;
  padding: clamp(1.5rem, 4vw, 2.25rem);
  background: var(--color-surface-card);
  clip-path: var(--clip-angle-panel);
  box-shadow: var(--shadow-card);
}
.dl-help h2 { font-size: var(--fs-display-sm); margin-bottom: 0.35rem; }
.dl-help p { font-size: var(--fs-sm); margin: 0; }

@media (min-width: 768px) { .dl-help { grid-template-columns: 1.4fr auto; } }

/* --------------------------------------------------- 7. sticky CTA offset */
body { padding-bottom: 0; }

@media (max-width: 1199px) {
  .footer__bottom { padding-bottom: calc(var(--space-lg) + 68px); }
}

/* -------------------------------------------- 8. angled-surface shadow pass */
.stepper__step {
  box-shadow: none;
  filter: var(--drop-card);
  transition: transform var(--dur-mid) var(--ease-snap), filter var(--dur-mid) var(--ease-out);
}
.stepper__step:hover { box-shadow: none; filter: var(--drop-card-hover); }
.stepper__num { box-shadow: none; filter: var(--drop-btn); }
.stepper__baton { box-shadow: inset 0 0 0 2px var(--color-border-strong); filter: var(--drop-soft); }
.dl-split__panel { box-shadow: none; filter: var(--drop-card); }
.dl-help { box-shadow: none; filter: var(--drop-card); }

/* ------------------------------- 9. stepper: card clipped, baton outside it */
.stepper__step {
  position: relative;
  padding: 0;
  background: none;
  clip-path: none;
  box-shadow: none;
  filter: none;
}
.stepper__step:hover { box-shadow: none; filter: none; }

.stepper__card {
  height: 100%;
  padding: 1.6rem 1.5rem;
  background: var(--color-surface-card);
  clip-path: var(--clip-angle-panel);
  filter: var(--drop-card);
  transition: transform var(--dur-mid) var(--ease-snap), filter var(--dur-mid) var(--ease-out);
}
.stepper__step:hover .stepper__card { transform: translateY(-5px); filter: var(--drop-card-hover); }

@media (min-width: 1200px) {
  .stepper__step:nth-child(odd) { transform: none; }
  .stepper__step:nth-child(odd) .stepper__card { transform: translateY(-14px); }
  .stepper__step:nth-child(odd):hover .stepper__card { transform: translateY(-19px); }
}

/* ---------------------------------------- 10. baton pass, centred in the gap */
.stepper__baton {
  right: auto;
  left: 100%;
  top: 50%;
  bottom: auto;
  width: 40px;
  height: 40px;
  transform: translate(calc(1.125rem - 50%), -50%);
  background: linear-gradient(125deg, var(--color-sapphire-block), var(--color-cyan-scoreboard));
  color: #fff;
  box-shadow: none;
  filter: var(--drop-soft);
}
.stepper__baton svg { width: 19px; height: 19px; }

@media (max-width: 767px) {
  .stepper__baton {
    left: 50%;
    top: auto;
    bottom: -20px;
    transform: translate(-50%, 0) rotate(90deg);
  }
}

@media (min-width: 768px) and (max-width: 1199px) {
  .stepper__baton { transform: translate(calc(1.25rem - 50%), -50%); }
  .stepper__step:nth-child(2n) .stepper__baton {
    left: 50%;
    top: auto;
    bottom: -20px;
    right: auto;
    transform: translate(-50%, 0) rotate(90deg);
  }
}

@media (min-width: 1200px) {
  .stepper__step:nth-child(2n) .stepper__baton {
    left: 100%;
    top: 50%;
    bottom: auto;
    right: auto;
    transform: translate(calc(1.125rem - 50%), -50%);
  }
}

.stepper__card,
.dl-split__panel,
.dl-help { box-shadow: inset 0 0 0 1px var(--color-border-soft); }