/*
  The home page: hero, statement band, three steps, board lengths, pictures,
  printables, who it's for and the closing band.
  The tilted boards and floating stickers are decoration on screen only.
*/
.nz-lead {
  margin: 0 0 32px;
  max-width: 420px;
  font-size: var(--nz-text-lead);
}

/* ---------- Hero ---------- */
.nz-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--nz-space-7);
  padding-top: var(--nz-space-6);
  padding-bottom: 80px;
}

.nz-hero-text {
  flex: 1 1 460px;
  min-width: 0;
}

.nz-hero-text .nz-display {
  margin: 22px 0 24px;
}

/* The stage: a gently floating A4 board and one still message sticker. */
.nz-stage {
  position: relative;
  flex: none;
}

.nz-stage .nz-stage-board {
  position: absolute;
  width: calc(var(--nz-page-width) * var(--nz-stage-scale));
}

.nz-hero-stage {
  width: 560px;
  height: 600px;
}

.nz-hero-stage .nz-stage-board {
  left: 100px;
  top: 20px;
  transform: rotate(-6deg);
}

/* One slow drift settles back into place without resetting the board. */
.nz-hero-stage .nz-stage-board {
  animation: nz-paper-drift var(--nz-hero-drift-duration) ease-in-out 1;
}
@keyframes nz-paper-drift {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 calc(-1 * var(--nz-hero-drift-distance)); }
}
.nz-arriving-sticker {
  animation: nz-place-sticker var(--nz-hero-sticker-duration) ease-out both;
}
.is-arrival-1 { animation-delay: var(--nz-hero-arrival-1); }
.is-arrival-2 { animation-delay: var(--nz-hero-arrival-2); }
.is-arrival-3 { animation-delay: var(--nz-hero-arrival-3); }
.is-arrival-4 { animation-delay: var(--nz-hero-arrival-4); }
@keyframes nz-place-sticker {
  from { opacity: 0; translate: 0 calc(-1 * var(--nz-hero-sticker-lift)); }
  to { opacity: 1; translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  .nz-hero-stage .nz-stage-board, .nz-arriving-sticker { animation: none; }
}

/* Floating label stickers (also used by the builder; defined again here for the home page). */
.nz-float-sticker {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  border-radius: var(--nz-sticker-radius);
  box-shadow: var(--nz-shadow-sticker);
  font-family: var(--nz-font-display);
  font-size: var(--nz-text-h3);
  line-height: 1.05;
  color: var(--nz-color-text);
}

.nz-float-sticker svg {
  width: 26px;
  height: 26px;
  flex: none;
}

.nz-float-sticker em {
  color: inherit;
}

.nz-float-sticker.is-small-step {
  left: 10px;
  top: 430px;
  transform: rotate(-8deg);
  background: var(--nz-lilac);
}

/* ---------- Statement band with the promo film ---------- */
/* Terracotta band under the hero: the three short rules on the left, the film on the right. */
.nz-statement {
  background: var(--nz-color-accent);
  color: var(--nz-color-on-accent);
}

.nz-statement-inner {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: center;
  gap: var(--nz-space-8);
  padding-top: var(--nz-space-9);
  padding-bottom: var(--nz-space-9);
}

.nz-statement ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--nz-space-5);
  font-family: var(--nz-font-display);
  font-size: var(--nz-text-h3-large);
  line-height: 1.15;
}

/* A cream round sticker with a tick before each rule, like a sticker on the board. */
.nz-statement li {
  display: flex;
  align-items: center;
  gap: var(--nz-space-4);
}

.nz-statement li::before {
  content: "";
  flex: none;
  width: var(--nz-space-7);
  height: var(--nz-space-7);
  border-radius: var(--nz-radius-pill);
  background: var(--nz-color-on-accent) url("../brand/tick.svg") center / 58% no-repeat;
  box-shadow: var(--nz-shadow-sticker);
}

.nz-video {
  margin: 0;
}

.nz-video-frame {
  position: relative;
  border-radius: var(--nz-radius-card);
  overflow: hidden;
  box-shadow: var(--nz-shadow-on-dark);
  background: var(--nz-color-surface);
}

.nz-video video {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
}

/* Play button over the still picture, low in the frame so it never covers the slogan.
   The browser buttons appear after the first press. */
.nz-video-play {
  position: absolute;
  left: 50%;
  bottom: var(--nz-space-6);
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: var(--nz-space-2);
  padding: var(--nz-space-3) var(--nz-space-5) var(--nz-space-3) var(--nz-space-4);
  border: 0;
  border-radius: var(--nz-radius-pill);
  background: var(--nz-color-accent);
  color: var(--nz-color-on-accent);
  box-shadow: var(--nz-shadow-primary);
  font-family: var(--nz-font-text);
  font-size: var(--nz-text-button);
  font-weight: var(--nz-weight-bold);
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.15s ease;
}

.nz-video-play[hidden] {
  display: none;
}

.nz-video-play:hover {
  background: var(--nz-color-accent-pressed);
}

.nz-video-play:focus-visible {
  outline: 3px solid var(--nz-color-text);
  outline-offset: 3px;
}

.nz-video-play svg {
  width: var(--nz-space-5);
  height: var(--nz-space-5);
  fill: currentColor;
}

.nz-video figcaption {
  margin-top: var(--nz-space-4);
  font-size: var(--nz-text-small);
}

/* ---------- Sections ---------- */
.nz-section {
  padding-top: 112px;
  padding-bottom: 120px;
}

.nz-section-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: var(--nz-space-7);
  flex-wrap: wrap;
  margin-bottom: 56px;
}

.nz-section-head .nz-h1 {
  margin: 18px 0 0;
}

.nz-section-head > p {
  margin: 0;
  max-width: 380px;
}

/* For a long headline: the text goes under it, on one wide line. */
.nz-section-head.is-wide-lead > p {
  max-width: none;
}

/* ---------- Four steps ---------- */
.nz-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--nz-space-6);
}

.nz-steps li {
  padding-top: 28px;
}

.nz-steps .nz-step-number {
  display: block;
  font-size: var(--nz-text-display);
  /* Georgia draws 3 lower than 1 and 2 by default; this keeps all numbers on one line. */
  font-variant-numeric: lining-nums;
}

.nz-steps .nz-h3 {
  margin: 16px 0 10px;
  font-size: var(--nz-text-h3-large);
}

.nz-steps p {
  margin: 0;
}

/* ---------- Board lengths ---------- */
.nz-lengths {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 64px;
  padding-top: 100px;
  padding-bottom: 100px;
}

.nz-lengths-stage {
  width: 440px;
  height: 620px;
}

.nz-lengths-stage .nz-stage-board {
  left: 20px;
  top: 20px;
  transform: rotate(-5deg);
}

.nz-stage-blob {
  position: absolute;
  left: -40px;
  top: 120px;
  width: 420px;
  height: 420px;
  border-radius: 50%;
  background: var(--nz-terracotta-light);
}

.nz-lengths-text {
  flex: 1 1 420px;
  min-width: 0;
}

.nz-lengths-text .nz-h1 {
  margin: 18px 0;
}

.nz-lengths-text > p {
  margin: 0 0 28px;
  max-width: 460px;
}

.nz-marks {
  display: flex;
  gap: var(--nz-space-4);
  margin-top: 36px;
  flex-wrap: wrap;
}

.nz-marks figure {
  margin: 0;
  width: 128px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: var(--nz-text-caption);
}

.nz-mark-field {
  position: relative;
  height: 90px;
  border: 1.5px solid var(--nz-frame);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.nz-mark-number {
  position: absolute;
  top: -8px;
  left: 8px;
  padding: 0 4px;
  background: var(--nz-color-paper);
  font-size: var(--nz-text-caption);
  font-weight: var(--nz-weight-bold);
  line-height: 1.4;
}

.nz-mark-label {
  width: 76%;
  height: 44px;
  background: var(--nz-white);
  box-shadow: var(--nz-shadow-label);
  transform: rotate(-4deg);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: var(--nz-text-caption);
  font-weight: var(--nz-weight-bold);
  line-height: 1.1;
}

.nz-mark-dot {
  width: 66px;
  height: 66px;
  border-radius: 50%;
  background: var(--nz-peach);
}

.nz-mark-tick {
  width: 52px;
  height: 52px;
  color: var(--nz-ink);
}

/* ---------- Pictures ---------- */
/* An endless, slow line of pictures that moves to the left. The list is there twice
   (home.js adds the copy), so moving it by half its width brings it back to the start without a jump.
   Each picture stands on a white floor with a soft reflection under it.
   The pictures go behind a sharp edge, like behind a curtain. It stops while the mouse is over it. */
.nz-picture-carousel {
  overflow: hidden;
  /* Room for the reflections. */
  padding-bottom: calc(var(--nz-carousel-picture) * 0.35);
}

.nz-picture-track {
  display: flex;
  align-items: flex-end;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
  animation: nz-carousel var(--nz-carousel-loop) linear infinite;
}

.nz-picture-carousel:hover .nz-picture-track {
  animation-play-state: paused;
}

/* Space after every picture (not "gap"), so both halves of the track are exactly equal. */
.nz-picture-track li {
  flex: none;
  position: relative;
  margin-right: var(--nz-space-6);
}

.nz-picture-track img {
  width: var(--nz-carousel-picture);
  height: auto;
  display: block;
}

/* The mirror copy under the picture (home.js adds it). It hangs below the picture without
   taking space, is turned upside down, and fades out: only the part near the picture shows.
   The gradient sets only how see-through the copy is, not a colour. */
.nz-picture-track .nz-picture-reflection {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  transform: scaleY(-1);
  -webkit-mask-image: linear-gradient(transparent 65%, rgb(0 0 0 / 0.22));
  mask-image: linear-gradient(transparent 65%, rgb(0 0 0 / 0.22));
  pointer-events: none;
}

@keyframes nz-carousel {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Less motion: the line stands still and can be scrolled by hand, without the copy. */
@media (prefers-reduced-motion: reduce) {
  .nz-picture-carousel {
    overflow-x: auto;
  }

  .nz-picture-track {
    animation: none;
  }

  .nz-picture-track [aria-hidden="true"] {
    display: none;
  }
}

/* ---------- Printables ---------- */
.nz-printables {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--nz-space-7);
  text-align: center;
}

.nz-printables li,
.nz-printable-link {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nz-printable-link {
  color: inherit;
  text-decoration: none;
}

.nz-printable-link:hover .nz-h3 {
  text-decoration: underline;
  text-underline-offset: 6px;
}

.nz-printables-more {
  margin: 64px 0 0;
  text-align: center;
}

.nz-printables .nz-h3 {
  margin: 32px 0 6px;
  font-size: var(--nz-text-h3-large);
}

.nz-printables p {
  margin: 0;
  font-size: var(--nz-text-small);
}

/* The real list previews (see printables.js), tilted like sheets on a table. */
.nz-printables .nz-sheet-frame {
  width: 250px;
  box-shadow: var(--nz-shadow-on-dark);
  transform: rotate(-3deg);
  transition: transform 0.2s;
}

.nz-printables li:nth-child(2) .nz-sheet-frame {
  transform: rotate(2deg);
}

.nz-printables li:nth-child(3) .nz-sheet-frame {
  transform: rotate(-2deg);
}

.nz-printables li:hover .nz-sheet-frame {
  transform: rotate(0deg) translateY(-4px);
}

/* ---------- Who it's for ---------- */
.nz-for-whom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--nz-space-7);
  padding-top: 100px;
  padding-bottom: 100px;
}

.nz-for-whom > div {
  flex: 1 1 560px;
  max-width: 680px;
}

.nz-for-whom .nz-h2 {
  margin: 18px 0 24px;
}

.nz-for-whom p {
  margin: 0;
}

.nz-for-whom-link {
  margin-top: var(--nz-space-4);
}

.nz-for-whom img {
  width: 240px;
  height: auto;
  display: block;
}

/* ---------- Closing ---------- */
.nz-closing {
  position: relative;
  overflow: hidden;
}

.nz-closing::before,
.nz-closing::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid var(--nz-cream-on-dark);
  opacity: 0.25;
}

.nz-closing::before {
  right: -60px;
  top: -120px;
  width: 420px;
  height: 420px;
}

.nz-closing::after {
  right: -140px;
  top: -200px;
  width: 580px;
  height: 580px;
  opacity: 0.18;
}

.nz-closing .nz-container {
  position: relative;
  padding-top: 110px;
  padding-bottom: 110px;
}

.nz-closing .nz-h1 {
  margin: 0 0 40px;
  max-width: 760px;
}

/* ---------- Laptop, smaller ---------- */
@media (max-width: 1100px) {
  .nz-hero-stage {
    margin: 0 auto;
  }

  /* Four steps in two rows of two on tablets. */
  .nz-steps {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ---------- Phones ---------- */
@media (max-width: 859px) {
  .nz-hero {
    padding-top: 40px;
    padding-bottom: 48px;
    gap: 32px;
  }

  .nz-hero-text {
    flex-basis: 100%;
  }

  /* The board and one still message sticker. */
  .nz-hero-stage {
    width: 100%;
    max-width: 358px;
    height: 430px;
  }

  .nz-hero-stage .nz-stage-board {
    left: 50%;
    top: 24px;
    width: 260px;
    margin-left: -130px;
  }

  .nz-float-sticker {
    padding: 10px 14px;
    font-size: var(--nz-text-body);
  }

/* Sits on the empty fields, so the final reward band stays readable. */
  .nz-float-sticker.is-small-step {
    left: 0;
    top: 250px;
  }

  /* Phones: the three rules first, the film under them, full width. */
  .nz-statement-inner {
    grid-template-columns: 1fr;
    gap: var(--nz-space-6);
    padding-top: var(--nz-space-7);
    padding-bottom: var(--nz-space-7);
  }

  .nz-statement ul {
    gap: var(--nz-space-3);
    font-size: var(--nz-text-h3);
  }

  .nz-statement li::before {
    width: var(--nz-space-6);
    height: var(--nz-space-6);
  }

  .nz-video-play {
    bottom: var(--nz-space-3);
    padding: var(--nz-space-2) var(--nz-space-4) var(--nz-space-2) var(--nz-space-3);
    font-size: var(--nz-text-small);
  }

  .nz-section {
    padding-top: 64px;
    padding-bottom: 72px;
  }

  .nz-section-head {
    gap: var(--nz-space-4);
    margin-bottom: 32px;
  }

  /* Shorter page on phones: each step is a number on the left and the text on the right. */
  .nz-steps {
    grid-template-columns: 1fr;
    gap: var(--nz-space-5);
  }

  .nz-steps li {
    display: grid;
    grid-template-columns: var(--nz-space-7) 1fr;
    column-gap: var(--nz-space-3);
    padding-top: 0;
  }

  .nz-steps .nz-step-number {
    grid-row: span 2;
    font-size: var(--nz-text-step-number);
  }

  .nz-steps .nz-h3 {
    margin: 4px 0 6px;
    font-size: var(--nz-text-h3);
  }

  /* The three sheets sit in one row that you swipe; the next sheet peeks in from the right. */
  .nz-printables {
    display: flex;
    gap: var(--nz-space-5);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: 0 calc(var(--nz-gutter-phone) * -1);
    padding: var(--nz-space-4) var(--nz-gutter-phone) var(--nz-space-5);
  }

  .nz-printables li {
    flex: 0 0 230px;
    scroll-snap-align: center;
  }

  .nz-printables .nz-sheet-frame {
    width: 200px;
  }

  .nz-printables .nz-h3 {
    margin-top: var(--nz-space-5);
    font-size: var(--nz-text-h3);
  }

  .nz-printables-more {
    margin-top: var(--nz-space-6);
  }

  .nz-lengths {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 32px;
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .nz-lengths-text {
    flex-basis: auto;
  }

  .nz-lengths-stage {
    width: 100%;
    max-width: 358px;
    height: 420px;
    margin: 0 auto;
  }

  .nz-lengths-stage .nz-stage-board {
    left: 50%;
    width: 260px;
    margin-left: -130px;
  }

  .nz-stage-blob {
    left: 0;
    top: 80px;
    width: 300px;
    height: 300px;
  }

  .nz-marks figure {
    width: calc((100% - 32px) / 3);
  }

  .nz-picture-carousel {
    padding-bottom: calc(var(--nz-carousel-picture-phone) * 0.35);
  }

  .nz-picture-track img {
    width: var(--nz-carousel-picture-phone);
  }

  .nz-for-whom {
    padding-top: 64px;
    padding-bottom: 64px;
  }

  .nz-for-whom > div {
    flex-basis: 100%;
  }

  .nz-for-whom img {
    width: 160px;
  }

  .nz-closing .nz-container {
    padding-top: 72px;
    padding-bottom: 72px;
  }
}