/* The homepage (approved mock-up "round 6"), on the tokens and fonts site.css defines.
   A long page joined by one line: the hero and its form, three moments (build it, your crew signs on, send it to
   the builder) with picture and words side by side, the photo band, why builders send SWMS back, the FAQ, the
   sign-up form and the closing card.
   Every moment reads complete without script; the motion rules at the end apply only under html.js. */

:root {
  --line: #c5d8d6;
  --mark-off: #a9bdbb;
  --risk-l: #2e7d32;
  --risk-m: #f2c200;
  --risk-h: #ef7d00;
  --risk-e: #c62828;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  scroll-behavior: smooth;
}
.page-home {
  font-size: 1.0625rem;
  line-height: 1.55;
}
:where(.page-home) :is(h1, h2, h3, p) {
  margin: 0;
}
.page-home h1,
.page-home h2,
.page-home h3 {
  letter-spacing: -0.015em;
}
.page-home img {
  display: block;
}

.lp-icon {
  width: 1.25em;
  height: 1.25em;
  flex: none;
  fill: currentColor;
  vertical-align: -0.2em;
}
.lp-iso {
  width: 2em;
  height: 2em;
  flex: none;
}
.lp-tick {
  flex: none;
}
/* Times, numbers and references in the mono (its own name, so no site rule reaches the embedded sample SWMS). */
.lp-mono {
  font-family: var(--mono);
  font-variant-numeric: tabular-nums;
}

/* The highlighter: one phrase per block, marketing only. */
.lp-hl {
  position: relative;
  z-index: 0;
  display: inline-block;
}
.lp-hl::before {
  content: "";
  position: absolute;
  left: -0.05em;
  right: -0.08em;
  bottom: 0.06em;
  z-index: -1;
  height: 0.42em;
  border-radius: 0.06em;
  background: var(--hivis);
  transform: skew(-12deg) rotate(-1.5deg);
  transform-origin: left;
  animation: lp-sweep 450ms var(--ease) 200ms both;
}
.lp-hl-run .lp-hl:not(:last-child)::before {
  right: -0.3em;
}
@keyframes lp-sweep {
  from {
    transform: skew(-12deg) rotate(-1.5deg) scaleX(0);
  }
}

.lp-sec-h {
  font-size: clamp(2rem, 4.6vw, 3rem);
  line-height: 1.05;
}
.lp-lede {
  max-width: 56ch;
  margin-top: 0.9rem;
  font-size: 1.1875rem;
}
.lp-more {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  margin-top: 0.75rem;
  color: var(--deep);
  font-weight: 700;
  text-decoration-color: var(--teal);
  text-decoration-thickness: 2px;
}
.lp-more .lp-arrow {
  transition: transform 160ms var(--ease);
}
.lp-more:hover .lp-arrow {
  transform: translateX(0.2rem);
}
.lp-ticks {
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.55rem;
}
.lp-ticks li {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: 0.6rem;
  font-size: 1.0625rem;
}
.lp-ticks .lp-tick {
  width: 1.1rem;
  height: 1.1rem;
  margin-top: 0.25rem;
  color: var(--teal-text);
}

/* ---------- Hero: promise and form ---------- */
.lp-hero {
  padding-block: clamp(2rem, 4vw, 3.25rem) clamp(1rem, 2vw, 1.5rem);
}
.lp-hero h1 {
  max-width: 13.6em;
  font-size: clamp(2.6rem, 6.4vw, 5.25rem);
  line-height: 1.01;
  letter-spacing: -0.03em;
}
.lp-hero-row {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.5rem;
}
.lp-hero-row > p {
  max-width: 34ch;
  font-size: clamp(1.125rem, 1.6vw, 1.3125rem);
}

/* Both forms: a two-column grid on phones, the hero form a single row on wider screens. */
.lp-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  align-items: end;
}
.lp-form .field label {
  font-size: 0.9375rem;
}
.lp-form .field input,
.lp-form .field select {
  min-height: 3rem;
  border-color: var(--deep);
}
.lp-form .field [aria-invalid="true"] {
  border-width: 2px;
}
.lp-form .lp-f-wide,
.lp-form .cf-turnstile,
.lp-form .field-error,
.lp-form .form-check,
.lp-form .lp-form-submit,
.lp-form .lp-form-note {
  grid-column: 1 / -1;
}
.lp-form .lp-form-submit {
  justify-self: start;
  min-height: 2.9rem;
}
.lp-form-note {
  color: var(--muted);
  font-size: 0.9375rem;
}
.lp-form .form-check input {
  width: 1.3rem;
  height: 1.3rem;
  margin-top: 0.15rem;
}

/* ---------- What it does: three moments on one line ---------- */
.lp-process {
  padding-block: clamp(2.5rem, 5vw, 4rem) clamp(3rem, 6vw, 5rem);
}
.lp-steps-wrap {
  position: relative;
  margin-top: 2.5rem;
}
.lp-steps {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 3.5rem;
}
.lp-step {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.5rem;
}
.lp-step-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.lp-step-n {
  display: inline-grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 4px solid var(--deep);
  border-radius: 50%;
  background: var(--white);
  font: 900 1rem/1 var(--display);
  transition: background-color 300ms var(--ease), color 300ms var(--ease);
}
.lp-step.is-past .lp-step-n {
  background: var(--deep);
  color: var(--white);
}
.lp-step-copy h3 {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  line-height: 1.1;
}
.lp-step-copy h3 + p {
  max-width: 38ch;
  margin-top: 0.75rem;
  font-size: 1.1875rem;
}

/* The line: on the left edge on phones, with the numbers on it; down the centre on wide screens. */
.lp-steps::before {
  content: "";
  position: absolute;
  left: 1.25rem;
  top: 0;
  bottom: 0;
  width: 4px;
  margin-left: -2px;
  border-radius: 4px;
  background: var(--pale);
}
.lp-line-fill {
  display: none;
  position: absolute;
  left: 1.25rem;
  top: 0;
  z-index: 1;
  width: 4px;
  height: 0;
  margin-left: -2px;
  border-radius: 4px;
  background: var(--teal);
}
.js .lp-line-fill {
  display: block;
}
.lp-step {
  padding-left: 3rem;
}
.lp-step-copy {
  position: static;
}
.lp-step-meta .lp-step-n {
  position: absolute;
  left: 1.25rem;
  top: 0;
  z-index: 1;
  transform: translateX(-50%);
}

/* A scene: the photo of the moment, with what SWMS Link shows overlapping its lower corner. */
.lp-scene {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}
.lp-scene-photo {
  overflow: hidden;
  border-radius: var(--r-lg);
}
.lp-scene-photo img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  background: var(--pale);
}
.lp-scene-art {
  position: relative;
  justify-self: end;
  max-width: calc(100% - 1rem);
  margin: -4.5rem 0.75rem 0 0;
}
.lp-scene-art > * {
  max-width: 100%;
}

/* Where each photo is cropped from (no style attributes: the page's security policy forbids them). */
.lp-ph-in-the-van { object-position: 38% 50%; }
.lp-ph-phone-white-card { object-position: 50% 45%; }
.lp-ph-site-office { object-position: 45% 50%; }
.lp-ph-estate-morning { object-position: 50% 60%; }
.lp-ph-site-arrival { object-position: 66% 40%; }
.lp-ph-estate-sunrise { object-position: 50% 55%; }

/* ---------- The artefacts ---------- */

/* 1. The build board on a phone. */
.lp-phone {
  width: 15.5rem;
  padding: 0.5rem;
  border-radius: 2rem;
  background: var(--deep);
}
.lp-phone-screen {
  overflow: hidden;
  border-radius: 1.5rem;
  background: var(--white);
}
.lp-app-bar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.5rem;
  align-items: center;
  padding: 0.65rem 0.8rem;
  background: var(--deep);
  color: var(--white);
}
.lp-app-bar b {
  font: 800 0.9375rem/1.2 var(--display);
}
.lp-app-bar span {
  color: #bfe0de;
  font-size: 0.8125rem;
}
.lp-b-meter {
  display: grid;
  gap: 0.25rem;
  padding: 0.7rem 0.8rem 0.4rem;
}
.lp-b-track {
  height: 0.45rem;
  overflow: hidden;
  border-radius: 1rem;
  background: #d2e2e0;
}
.lp-b-track span {
  display: block;
  width: 56%;
  height: 100%;
  border-radius: 1rem;
  background: var(--teal);
}
.lp-b-meter small {
  color: var(--muted);
  font-size: 0.75rem;
  font-weight: 700;
}
.lp-board {
  margin: 0;
  padding: 0 0.45rem 0.6rem;
  list-style: none;
  display: grid;
  gap: 0.1rem;
}
.lp-board li {
  display: grid;
  grid-template-columns: 2rem 1fr 1.2rem;
  gap: 0.5rem;
  align-items: center;
  min-height: 2.35rem;
  padding: 0.15rem 0.35rem;
  border: 2px solid transparent;
  border-radius: 0.5rem;
}
.lp-b-tile {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 0.45rem;
  background: var(--pale);
}
.lp-b-tile .lp-icon {
  width: 1.15rem;
  height: 1.15rem;
}
.lp-b-tile .lp-iso {
  width: 1.85rem;
  height: 1.85rem;
}
.lp-b-tile:has(.lp-iso) {
  background: none;
}
.lp-b-name {
  display: grid;
  min-width: 0;
  line-height: 1.2;
}
.lp-b-name b {
  font-size: 0.8125rem;
}
.lp-b-name small {
  overflow: hidden;
  color: var(--muted);
  font-size: 0.6875rem;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.lp-b-mark {
  display: grid;
  place-items: center;
  width: 1.2rem;
  height: 1.2rem;
  border: 2px solid var(--mark-off);
  border-radius: 50%;
}
.lp-b-mark .lp-icon {
  width: 0.85rem;
  height: 0.85rem;
}
.lp-b-done .lp-b-name small {
  color: var(--teal-text);
  font-weight: 700;
}
.lp-b-done .lp-b-mark {
  border-color: var(--deep);
  background: var(--teal);
}
.lp-b-now {
  border-color: var(--teal);
  background: var(--pale);
}
.lp-b-now .lp-b-mark {
  border-color: var(--deep);
  border-style: dashed;
}

/* The finalised first page. */
.lp-a4 {
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: 3px;
  background: var(--white);
  font-size: 0.75rem;
  line-height: 1.35;
}
.lp-a4-band {
  height: 0.45rem;
  background: var(--teal);
}
.lp-a4-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.6rem;
  align-items: center;
  padding: 0.75rem 0.9rem 0.6rem;
  border-bottom: 1px solid var(--rule);
}
.lp-a4-logo {
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.3rem;
  background: #1d3b53;
  color: var(--white);
  font: 800 0.8rem/1 var(--display);
}
.lp-a4-head b {
  display: block;
  font: 800 0.95rem/1.2 var(--display);
}
.lp-a4-head small {
  color: var(--muted);
  font-size: 0.7rem;
}
.lp-final {
  padding: 0.15rem 0.5rem;
  border: 1.5px solid var(--deep);
  font: 800 0.75rem/1.2 var(--display);
  letter-spacing: 0.04em;
  transform: rotate(-4deg);
}
.lp-a4-title {
  margin: 0.65rem 0.9rem 0.4rem;
  padding: 0.3rem 0.55rem;
  background: var(--teal);
  font: 800 0.75rem/1.3 var(--display);
}
.lp-a4-hrcw {
  margin: 0 0.9rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 0.35rem;
}
.lp-a4-hrcw li {
  display: grid;
  grid-template-columns: 1.6rem 1rem 1fr;
  gap: 0.4rem;
  align-items: center;
}
.lp-a4-hrcw .lp-iso {
  width: 1.6rem;
  height: 1.6rem;
}
.lp-a4-hrcw .lp-off,
.lp-a4-ppe .lp-off {
  color: var(--muted);
}
.lp-a4-hrcw .lp-off .lp-iso,
.lp-a4-ppe .lp-off .lp-iso {
  filter: grayscale(1);
  opacity: 0.3;
}
.lp-box {
  display: grid;
  place-items: center;
  width: 0.95rem;
  height: 0.95rem;
  border: 1.5px solid var(--deep);
}
.lp-box .lp-tick {
  width: 0.7rem;
  height: 0.7rem;
}
.lp-a4-ppe {
  margin: 0 0.9rem;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.3rem;
  font-size: 0.66rem;
  text-align: center;
}
.lp-a4-ppe li {
  display: grid;
  justify-items: center;
  gap: 0.15rem;
}
.lp-a4-ppe .lp-iso {
  width: 2rem;
  height: 2rem;
}
.lp-a4-risk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  margin: 0.75rem 0.9rem 0.85rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rule);
}
.lp-a4-risk b {
  margin-right: 0.3rem;
}
/* Risk is always a word and a score; the colour only repeats it. */
.lp-risk {
  display: inline-block;
  padding: 0.05em 0.4em;
  border-radius: 0.25em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.lp-risk-l {
  background: var(--risk-l);
  color: var(--white);
}
.lp-risk-m {
  background: var(--risk-m);
  color: var(--deep);
}
.lp-risk-h {
  background: var(--risk-h);
  color: var(--deep);
}
.lp-risk-e {
  background: var(--risk-e);
  color: var(--white);
}

/* Cards: the register and the delivery record. */
.lp-card {
  width: 23rem;
  padding: 1rem 1.1rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  background: var(--white);
  font-variant-numeric: tabular-nums;
}
.lp-card-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
  padding-bottom: 0.65rem;
  border-bottom: 4px solid var(--teal);
}
.lp-card-head .lp-icon {
  width: 1.4rem;
  height: 1.4rem;
  color: var(--teal-text);
}
.lp-card-head b {
  font: 800 1rem/1.3 var(--display);
}
.lp-card-head .lp-mono {
  margin-left: auto;
  color: var(--muted);
  font-size: 0.8125rem;
}
.lp-art-register table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.875rem;
}
.lp-art-register th {
  padding: 0.35rem 0.4rem 0.35rem 0;
  color: var(--muted);
  font-size: 0.75rem;
  text-align: left;
}
.lp-art-register td {
  padding: 0.45rem 0.4rem 0.45rem 0;
  border-top: 1px solid var(--line);
  white-space: nowrap;
}
.lp-count {
  margin-top: 0.6rem;
  color: var(--muted);
  font-size: 0.875rem;
}
.lp-count b {
  color: var(--deep);
}
.lp-art-receipt {
  width: 22rem;
}
.lp-log {
  margin: 0;
  padding: 0;
  list-style: none;
}
.lp-log li {
  display: grid;
  grid-template-columns: 1.3rem 4.6rem 1fr;
  gap: 0.6rem;
  align-items: center;
  padding: 0.6rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.9375rem;
}
.lp-log li:first-child {
  border-top: 0;
}
.lp-log .lp-icon {
  width: 1.3rem;
  height: 1.3rem;
  color: var(--teal-text);
}
.lp-log .lp-mono {
  color: var(--muted);
  font-size: 0.875rem;
}
.lp-log .lp-done {
  margin-inline: -0.6rem;
  padding-inline: 0.6rem;
  border-radius: var(--r-md);
  border-top-color: transparent;
  background: var(--pale);
}
.lp-log .lp-done .lp-icon {
  color: var(--deep);
}

/* Moment 1: the build board with the finished first page behind its lower corner. */
.lp-stack {
  display: grid;
  justify-items: start;
}
.lp-stack-page {
  position: relative;
  z-index: 0;
  width: min(19rem, 100%);
}
.lp-stack-page .lp-a4 {
  box-shadow: 0 0.4rem 1.2rem rgba(4, 48, 47, 0.12);
}
.lp-stack-phone {
  position: relative;
  z-index: 1;
  justify-self: end;
  margin: -6rem 0 0;
}

/* Moment 2: the worker's phone and the supervisor's register, the largest artefacts on the page. */
.lp-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1.25rem;
  justify-items: start;
}
.lp-pair .lp-phone {
  width: min(17rem, 100%);
  justify-self: end;
}
.lp-pair .lp-card {
  width: min(24rem, 100%);
}
.lp-ws-field {
  display: grid;
  gap: 0.15rem;
  margin: 0.55rem 0.8rem 0;
}
.lp-ws-field small {
  color: var(--muted);
  font-size: 0.6875rem;
  font-weight: 700;
}
.lp-ws-field span {
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--deep);
  border-radius: 0.4rem;
  font-size: 0.875rem;
}
.lp-ws-h {
  margin: 0.7rem 0.8rem 0.2rem;
  font: 800 0.8125rem/1.2 var(--display);
}
.lp-ws {
  display: grid;
  gap: 0.1rem;
  margin: 0 0.45rem;
  padding: 0;
  list-style: none;
}
.lp-ws li {
  display: grid;
  grid-template-columns: 1fr 1.2rem;
  gap: 0.5rem;
  align-items: center;
  min-height: 2.1rem;
  padding: 0.15rem 0.35rem;
  font-size: 0.8125rem;
  line-height: 1.25;
}
.lp-sign {
  display: block;
  margin: 0.8rem 0.8rem 0.9rem;
  padding: 0.8rem;
  border: 2px solid var(--teal);
  border-radius: 0.6rem;
  background: var(--teal);
  color: var(--deep);
  font: 800 1.0625rem/1.2 var(--display);
  text-align: center;
  transition: background-color 400ms var(--ease), color 400ms var(--ease);
}
@media (min-width: 80rem) {
  .lp-stack {
    grid-template-columns: auto auto;
  }
  .lp-stack-phone {
    align-self: start;
    margin: 3rem 0 0 -4rem;
  }
}

/* ---------- Band, why, FAQ, sign-up, close ---------- */
.lp-band {
  position: relative;
  margin: 0;
}
.lp-band-img {
  width: 100%;
  height: clamp(16rem, 36vw, 32rem);
  object-fit: cover;
}
.lp-band-card {
  position: relative;
  max-width: 30rem;
  margin: -3rem 1rem 0;
  padding: 1.5rem 1.4rem 1.6rem;
  border-top: 0.6rem solid var(--teal);
  border-radius: var(--r-sm);
  background: var(--white);
}
.lp-band-card h2 {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  line-height: 1.08;
}
.lp-band-card p {
  margin-top: 0.7rem;
}

.lp-why {
  padding-block: clamp(4rem, 8vw, 6rem);
  background: var(--pale);
}
.lp-why-grid {
  display: grid;
  gap: 2.5rem;
  align-items: center;
}
.lp-why-img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
}
.lp-swap {
  display: grid;
  gap: 1.5rem;
  margin-top: 1.75rem;
}
.lp-swap h3 {
  padding-top: 0.8rem;
  border-top: 0.375rem solid var(--deep);
  font-size: 1.25rem;
}
.lp-swap .lp-old h3 {
  border-top-color: var(--rule);
}
.lp-swap ul {
  margin: 0.4rem 0 0;
  padding: 0;
  list-style: none;
}
.lp-swap li {
  display: grid;
  grid-template-columns: 1.3rem 1fr;
  gap: 0.6rem;
  padding: 0.6rem 0;
  border-top: 1px solid var(--rule);
}
.lp-swap li:first-child {
  border-top: 0;
}
.lp-swap .lp-icon {
  width: 1.3rem;
  height: 1.3rem;
  color: var(--teal-text);
}
.lp-swap .lp-old li,
.lp-swap .lp-old .lp-icon {
  color: var(--muted);
}

.lp-faq-sec {
  padding-block: clamp(4rem, 8vw, 6rem);
}
.lp-faq-grid {
  display: grid;
  gap: 2rem;
  align-items: start;
}
.lp-faq-more {
  margin-top: 1rem;
}
.lp-faq-item {
  padding: 1.1rem 0;
  border-top: 1px solid var(--rule);
}
.lp-faq-item:first-child {
  border-top: 0.375rem solid var(--deep);
}
.lp-faq-item h3 {
  font-size: 1.25rem;
  line-height: 1.2;
}
.lp-faq-item p {
  max-width: 62ch;
  margin-top: 0.5rem;
}

.lp-signup {
  padding-block: clamp(4rem, 8vw, 6rem);
  background: var(--pale);
}
.lp-signup-grid {
  display: grid;
  gap: 2rem;
  align-items: start;
}
.lp-signup-card {
  padding: 1.5rem 1.25rem;
  border-radius: var(--r-lg);
  background: var(--white);
}

.lp-close {
  position: relative;
}
.lp-close-img {
  width: 100%;
  height: clamp(18rem, 38vw, 34rem);
  object-fit: cover;
}
.lp-close-card {
  position: relative;
  max-width: 34rem;
  margin: -4rem 1rem 0;
  padding: 1.75rem 1.5rem;
  border-radius: var(--r-sm);
  background: var(--deep);
  color: var(--white);
}
.lp-close-card p {
  margin-bottom: 1.25rem;
  font: 800 clamp(1.6rem, 3.4vw, 2.5rem) / 1.08 var(--display);
  letter-spacing: -0.015em;
}
.page-home .site-footer {
  margin-top: 3rem;
}

/* ---------- Wider screens ---------- */
@media (min-width: 40rem) {
  .lp-hero-form {
    grid-template-columns: 1.4fr 1fr 0.8fr;
  }
  .lp-hero-form .lp-f-wide {
    grid-column: auto;
  }
  .lp-swap {
    grid-template-columns: 1fr 1fr;
  }
  .lp-band-card {
    position: absolute;
    left: var(--gutter);
    bottom: 2rem;
    margin: 0;
  }
  .lp-close-card {
    position: absolute;
    left: var(--gutter);
    bottom: 2.5rem;
    margin: 0;
  }
  /* Between phones and wide screens: the line stays on the left, with room for the scene beside the words. */
  .lp-scene-art {
    margin-top: -6rem;
  }
}

@media (min-width: 64rem) {
  .lp-hero-row {
    grid-template-columns: 5fr 7fr;
    gap: 3rem;
    margin-top: 2rem;
  }
  .lp-hero-row > p {
    padding-top: 1.75rem;
  }
  .lp-why-grid {
    grid-template-columns: 5fr 7fr;
    gap: 4rem;
  }
  .lp-faq-grid,
  .lp-signup-grid {
    grid-template-columns: 5fr 7fr;
    gap: 4rem;
  }
  .lp-signup-card {
    padding: 2rem;
  }

  /* One line down the middle joins the three moments; each moment's number sits on it. The photo and the words take
     the two halves and swap sides each moment. */
  .lp-steps {
    gap: clamp(4rem, 7vw, 6rem);
  }
  .lp-steps::before,
  .lp-line-fill {
    left: 50%;
  }
  .lp-step {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 7rem;
    align-items: center;
    padding-left: 0;
  }
  .lp-step-meta .lp-step-n {
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
  .lp-step:nth-child(even) .lp-step-media {
    order: 2;
  }
  .lp-scene {
    grid-template-areas: "s";
  }
  .lp-scene-photo {
    grid-area: s;
    align-self: start;
    width: 84%;
    margin-bottom: 3rem;
  }
  .lp-scene-art {
    grid-area: s;
    align-self: end;
    justify-self: end;
    max-width: 100%;
    margin: 7rem 0 0;
  }
  .lp-step-big .lp-scene-art {
    margin-top: 5rem;
  }
  .lp-step-big .lp-scene-photo {
    margin-bottom: 1rem;
  }
  .lp-step:nth-child(even) .lp-scene-photo {
    justify-self: end;
  }
  .lp-step:nth-child(even) .lp-scene-art {
    justify-self: start;
  }
}

/* ---------- Motion. home.js marks each moving part .lp-r with its delay and adds .is-in when the moment is fully in
   view; .is-on on the scene lands the card and settles the photo. Without script nothing here applies. ---------- */
.js .lp-r {
  transition: opacity 300ms var(--ease), transform 400ms var(--ease), background-color 300ms var(--ease), outline-color 300ms var(--ease), border-color 300ms var(--ease);
}
.js .lp-r:not(.is-in) {
  opacity: 0.15;
  transform: translateY(0.5rem);
}
/* Parts that stay in place and change state instead of rising in. */
.js .lp-b-done.lp-r:not(.is-in),
.js .lp-b-now.lp-r:not(.is-in),
.js .lp-b-track.lp-r:not(.is-in),
.js .lp-a4-hrcw .lp-r:not(.is-in),
.js .lp-a4-ppe .lp-r:not(.is-in),
.js .lp-sign.lp-r:not(.is-in) {
  opacity: 1;
  transform: none;
}
.js .lp-b-done.lp-r:not(.is-in) .lp-b-mark {
  border-color: var(--mark-off);
  background: transparent;
}
.js .lp-b-done.lp-r .lp-b-mark svg {
  transition: opacity 250ms var(--ease);
}
.js .lp-b-done.lp-r:not(.is-in) .lp-b-mark svg {
  opacity: 0;
}
.js .lp-b-done.lp-r:not(.is-in) small {
  color: var(--muted);
  font-weight: 400;
}
.js .lp-b-track span {
  transition: width 500ms var(--ease);
}
.js .lp-b-track.lp-r:not(.is-in) span {
  width: 12%;
}
.js .lp-b-now.lp-r:not(.is-in) {
  border-color: transparent;
  background: transparent;
}
.js .lp-a4-hrcw .lp-r:not(.is-in) .lp-box svg {
  opacity: 0;
}
.js .lp-a4-ppe .lp-r:not(.is-in) .lp-iso {
  filter: grayscale(1);
  opacity: 0.3;
}
.js .lp-final.lp-r:not(.is-in) {
  opacity: 0;
  transform: rotate(-12deg) scale(1.6);
}
.js .lp-sign.lp-r:not(.is-in) {
  background: var(--white);
  color: var(--teal-text);
}
.js .lp-scene-art {
  transition: transform 700ms var(--ease), opacity 500ms var(--ease);
}
.js .lp-scene:not(.is-on) .lp-scene-art {
  opacity: 0.2;
  transform: translateY(2.5rem);
}
.js .lp-scene-photo img {
  transform: scale(1.08);
  transform-origin: 50% 40%;
  transition: transform 1.4s var(--ease);
}
.js .lp-scene.is-on .lp-scene-photo img {
  transform: none;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .lp-hl::before {
    animation: none;
  }
  .lp-step-n,
  .lp-sign,
  .lp-more .lp-arrow,
  .js .lp-r,
  .js .lp-scene-art,
  .js .lp-scene-photo img,
  .js .lp-b-track span,
  .js .lp-b-done.lp-r .lp-b-mark svg {
    transition: none;
  }
  .js .lp-scene-photo img {
    transform: none;
  }
}