@font-face {
  font-family: Polysans;
  src: url("../fonts/PolySansTrial-Slim.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Polysans;
  src: url("../fonts/PolySansTrial-Median.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Polysans;
  src: url("../fonts/PolySansTrial-Neutral.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Polysans;
  src: url("../fonts/PolySansTrial-Bulky.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: Mangogrotesque;
  src: url("../fonts/MangoGrotesque-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --check-light-blue: #e3f2f4;
  --check-black: #000;
  --section-padding: 80px;
  --check-white: white;
  --check-green: #014f3a;
  --check-yellow: #fccf00;
  --check-blue: #004fe3;
  --check-orange: orange;
  --check-faded-blue: #f2f7f6;
}

body {
  background-color: var(--check-light-blue);
  color: var(--check-black);
  font-family: Polysans, Arial, sans-serif;
  font-size: 14px;
  line-height: 20px;
}

p {
  letter-spacing: 0;
  margin-bottom: 0;
  font-size: 16px;
  font-weight: 300;
  line-height: 130%;
}

.c-nav {
  pointer-events: none;
  background-color: #0000;
  width: 100%;
  padding-top: 40px;
  padding-bottom: 40px;
  position: absolute;
  inset: 0% 0% auto;
}

.c-container {
  width: 100%;
  max-width: 1500px;
  margin-left: auto;
  margin-right: auto;
}

.body {
  background-color: var(--check-black);
}

.nav-inner {
  padding-right: var(--section-padding);
  padding-left: var(--section-padding);
  justify-content: space-between;
  align-items: center;
  display: flex;
}

.nav-logo {
  pointer-events: auto;
}

.hero-section {
  aspect-ratio: auto;
  background-color: #cbab84;
  position: relative;
  overflow: hidden;
}

.hero-inner {
  z-index: 6;
  width: 100%;
  height: 90vh;
  max-height: 835px;
  padding-top: 130px;
  padding-right: var(--section-padding);
  padding-left: var(--section-padding);
  flex-flow: column;
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
  position: relative;
}

.hero-upper {
  pointer-events: auto;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.hero-heading {
  color: var(--check-white);
  font-family: Mangogrotesque, Arial, sans-serif;
  font-size: 96px;
  line-height: 85%;
}

.hero-heading_holder {
  text-transform: uppercase;
  width: 476px;
}

.hero-top {
  z-index: 2;
  background-image: url("../images/wood.jpg");
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  min-height: 825px;
  position: relative;
}

.hero-below {
  background-image: url("../images/wood-inverted.jpg");
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  top: -4px;
}

.hero-lower {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  pointer-events: auto;
  border: 1px solid #fff6;
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  padding: 24px;
  display: flex;
}

.c-button {
  background-color: var(--check-black);
  color: #fff;
  letter-spacing: 0;
  justify-content: center;
  align-items: center;
  height: 50px;
  padding: 18px 15px;
  font-size: 18px;
  line-height: 140%;
  text-decoration: none;
  display: flex;
}

.c-button.cc-white {
  background-color: var(--check-white);
  color: var(--check-black);
}

.c-button.cc-green {
  background-color: var(--check-green);
}

.mat-img_holder {
  z-index: 3;
  transform-origin: 0 0;
  width: 100%;
  position: absolute;
  top: 0%;
  left: 0%;
  transform: translate(449px, 339px) rotate(-26.21deg);
}

.c-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.hero-text_holder {
  z-index: 4;
  pointer-events: none;
  position: absolute;
  inset: 0% 0% auto;
}

.ipad-img_holder {
  z-index: 3;
  transform-origin: 0 100%;
  width: 100%;
  position: absolute;
  inset: 0% auto auto 0%;
  transform: scale(0.6) translate(60%, -146%) rotate(-26.21deg);
}

.file-img_holder {
  z-index: 3;
  transform-origin: 0 100%;
  width: 100%;
  position: absolute;
  inset: 0% auto auto 0%;
  transform: scale(0.7) translate(110%, -74%) rotate(-11.82deg);
}

.receipt-img_holder {
  z-index: 3;
  transform-origin: 0 0;
  width: 100%;
  position: absolute;
  inset: 0% auto auto 0%;
  transform: scale(0.1) translate(780%, 310%) rotate(-79.95deg);
}

.phone-img_holder {
  z-index: 3;
  transform-origin: 0 0;
  width: 100%;
  position: absolute;
  inset: 0% auto auto 0%;
  transform: scale(0.3) translate(229%, 94%) rotate(-54.8deg);
}

.pen-img_holder {
  z-index: 3;
  transform-origin: 0 0;
  width: 100%;
  position: absolute;
  inset: 0% auto auto 0%;
  transform: scale(0.05) translate(750%, 90%) rotate(51.31deg);
}

.hero-below_holder {
  padding: 130px var(--section-padding) 80px;
}

.paper-img_holder {
  grid-template-columns: 1fr;
}

.papersheet-head {
  text-transform: uppercase;
  font-family: Mangogrotesque, Arial, sans-serif;
  font-size: 64px;
  line-height: 85%;
}

.paper-sheet {
  position: relative;
  top: -50px;
}

.paper-sheet_content {
  z-index: 7;
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  flex-flow: column;
  padding: 6.7% 7% 7%;
  display: flex;
  position: relative;
}

.paper-sheet_body {
  font-size: 16px;
}

.evidence-holder {
  grid-template-rows: auto;
  grid-template-columns: 1fr 1fr 1fr;
  grid-auto-columns: 1fr;
  display: grid;
}

.first-evidence {
  position: relative;
}

/* A flex column rather than a grid: grid rows never shrink below their
   content, so when the caps' width-scaled heights outgrew the text-driven
   box on wide screens the torn bottom edge overflowed onto the content
   below. Flex lets the caps compress a little in that case (the torn edge
   flattens slightly) while the box itself stays exactly text-sized. */
.evidence_imageholder {
  z-index: 1;
  flex-flow: column;
  display: flex;
  position: absolute;
  inset: 0;
}

/* The caps size themselves from their aspect-ratio but may shrink to fit
   (min-height: 0 lifts flexbox's content floor); the middles fill whatever
   height remains between them. */
.evidence-img_top,
.evidence-img_bottom,
.secondevidence-img_top,
.secondevidence-img_bottom,
.thirdevidence-img_top,
.thirdevidence-img_bottom {
  min-height: 0;
}

.evidence-img_middle,
.secondevidence-img_middle,
.thirdevidence-img_middle {
  flex: 1 1 0px;
  min-height: 0;
}

.footer-bottom_cta {
  color: #00000080;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 50%;
  font-size: 20px;
  font-weight: 300;
  line-height: 120%;
  display: flex;
}

.footer-bottom {
  color: #000;
  background-color: #fff;
  width: 100%;
  padding-top: 50px;
}

.footer {
  z-index: 7;
  background-color: var(--check-green);
  color: #fff;
  background-image: url("../images/footer-wave_1footer-wave.webp");
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: 100%;
  position: relative;
}

.footer-text_wrapper {
  max-width: 445px;
  font-size: 20px;
  font-weight: 300;
  line-height: 120%;
}

.footer-inner {
  padding: 80px var(--section-padding);
}

.uc-h0 {
  letter-spacing: -2px;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Mangogrotesque, Arial, sans-serif;
  font-size: 140px;
  font-weight: 400;
  line-height: 85%;
}

.uc-h0.cc-capitalized {
  text-transform: uppercase;
  font-size: 160px;
}

.footer-title_wrapper {
  width: 59%;
  max-width: 1280px;
  margin-bottom: 60px;
}

.footer-bottom_title {
  width: 50%;
}

.uc-h2 {
  color: var(--check-black);
  letter-spacing: 0;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Mangogrotesque, Arial, sans-serif;
  font-size: 88px;
  font-weight: 400;
  line-height: 100%;
}

.footer-cta_wrapper {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  margin-top: 30px;
  display: flex;
}

.approach-block {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  border-bottom: 0.5px solid #fff;
  justify-content: space-between;
  align-items: flex-start;
  width: 855px;
  max-width: 67%;
  margin-top: 40px;
  padding-bottom: 40px;
  padding-right: 24px;
  font-size: 20px;
  font-weight: 300;
  line-height: 120%;
  display: flex;
}

.approach-block_header {
  letter-spacing: 0;
  text-transform: none;
  font-family: Polysans, Arial, sans-serif;
  font-size: 56px;
  font-weight: 400;
  line-height: 100%;
}

.approach-block_header-inner {
  max-width: 8ch;
}

.approach-text {
  max-width: 380px;
}

.approach-title {
  opacity: 0.5;
  letter-spacing: 0;
  text-transform: none;
  border-bottom: 0.5px solid #fff;
  width: 100%;
  padding-bottom: 24px;
  font-size: 24px;
  line-height: 140%;
}

.footer-model {
  width: 305px;
  height: 400px;
  position: absolute;
  inset: -20px 30px auto auto;
}

.footer-arrow {
  background-image: url("../images/down-arrow.svg");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  width: 85px;
  height: 76px;
}

.footer-bottom_copyright {
  color: #00000080;
  justify-content: space-between;
  align-items: center;
  padding-left: 50px;
  padding-right: 50px;
  font-size: 16px;
  font-weight: 300;
  line-height: 120%;
  display: flex;
}

.footer-bottom_inner {
  grid-column-gap: 80px;
  grid-row-gap: 80px;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-bottom: 82px;
  padding-left: 50px;
  padding-right: 50px;
  display: flex;
}

.footer-subtitle_wrapper {
  justify-content: space-between;
  align-items: center;
  margin-bottom: 80px;
  display: flex;
}

.footer-approach_wrapper {
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 100%;
  margin-bottom: 73px;
  display: flex;
  position: relative;
}

.evidence-pen_write {
  width: 60%;
}

/* 15-20.png is a longer string drawn with shorter glyphs (283x60 vs
   271x78 and 246x75), so at the shared 60% holder width its handwriting
   renders visibly smaller than its neighbours and the note looks
   top-cramped. A wider holder brings its glyph height level with theirs. */
.second-evidence .evidence-pen_write {
  width: 80%;
}

/* The img's width="271" attribute would otherwise cap it below the wider
   holder. */
.second-evidence .evidence-pen_write img {
  width: 100%;
  height: auto;
}

.evidence-bodytext {
  width: 92%;
  font-size: 16px;
  font-weight: 300;
}

.evidence-textholder {
  z-index: 2;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  flex-flow: column;
  padding: 16% 10% 22%;
  display: flex;
  position: relative;
}

.second-evidence,
.third-evidence {
  position: relative;
}

/* evidence-2's paper is drawn narrower inside its SVG than its siblings'
   (inset ~8% per side vs their ~3-4%), so the shared 10% side padding —
   measured from the BOX edge, not the visible paper edge — left the text
   nearly touching the pink paper. The extra 5% lands the text the same
   visual distance from the paper edge as on the other two notes. */
.second-evidence .evidence-textholder {
  padding-left: 15%;
  padding-right: 15%;
}

.evidence-cta_holder {
  justify-content: space-between;
  align-items: center;
  margin-top: 16px;
  display: flex;
}

.evidence-cta_lhs {
  width: 50%;
}

.paper-img_top {
  aspect-ratio: 1294 / 96;
  background-image: url("../images/paper-top.png");
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
}

.paper-img_middle {
  background-image: url("../images/paper-middle.png");
  background-position: 50% 0;
  background-repeat: repeat-y;
  background-size: 100%;
  width: 100%;
  height: 100%;
}

.paper-img_bottom {
  aspect-ratio: 1294 / 69;
  background-image: url("../images/paper-bottom.png");
  background-position: 50% 100%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
}

.evidence-img_middle {
  background-image: url("../images/evidence-1-middle.svg");
  background-position: 50% 0;
  background-repeat: repeat-y;
  background-size: 100%;
  width: 100%;
  height: 100%;
}

.evidence-img_top {
  aspect-ratio: 387 / 160;
  background-image: url("../images/evidence-1-top.svg");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
}

.evidence-img_bottom {
  aspect-ratio: 387 / 102;
  background-image: url("../images/evidence-1-bottom.svg");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
}

.secondevidence-img_top {
  aspect-ratio: 369 / 174;
  background-image: url("../images/evidence-2-top.svg");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
}

.secondevidence-img_middle {
  background-image: url("../images/evidence-2-middle.svg");
  background-position: 50% 0;
  background-repeat: repeat-y;
  background-size: 100%;
  width: 100%;
  height: 100%;
}

.secondevidence-img_bottom {
  aspect-ratio: 369 / 116;
  background-image: url("../images/evidence-2-bottom.svg");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
}

.thirdevidence-img_top {
  aspect-ratio: 400 / 152;
  background-image: url("../images/evidence-3-top.svg");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
}

.thirdevidence-img_middle {
  background-image: url("../images/evidence-3-middle.svg");
  background-position: 50% 0;
  background-repeat: repeat-y;
  background-size: 100%;
  width: 100%;
  height: 100%;
}

.thirdevidence-img_bottom {
  aspect-ratio: 400 / 106;
  background-image: url("../images/evidence-3-bottom.svg");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 100%;
}

.paper-sheet_headholder {
  width: 43%;
}

.need-section {
  background-image: url("../images/wood.jpg");
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  height: 100vh;
  margin-top: -5px;
  position: relative;
  overflow: hidden;
}

.need-inner {
  padding: 80px var(--section-padding);
}

.need-text_holder {
  z-index: 6;
  justify-content: space-between;
  align-items: center;
  display: flex;
  position: relative;
}

.need-text_lhs {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 35%;
  display: flex;
}

.need-text_rhs {
  width: 50%;
}

.div-block-2 {
  background-color: var(--check-yellow);
  padding-top: 40px;
  padding-bottom: 40px;
}

.text-block {
  color: var(--check-black);
}

.needtext_head {
  color: var(--check-white);
  text-transform: uppercase;
  font-family: Mangogrotesque, Arial, sans-serif;
  font-size: 72px;
  line-height: 85%;
}

.need-animation_holder {
  aspect-ratio: 2880 / 1800;
  width: 100%;
  position: absolute;
  inset: auto 0% 0%;
}

.need-texthead_holder {
  z-index: 1;
  position: relative;
}

.lottie-animation {
  width: 100%;
  height: 100%;
}

.need-text_rider {
  color: var(--check-white);
  font-size: 18px;
}

.help-section {
  background-image: url("../images/wood-inverted.jpg");
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  /* Establishes a stacking context so the z-index:5/6/7 children inside this
     section (.help-header, .help-cta and the recording player) are sealed
     into it rather than competing in the root context.

     Without this they were resolved against .future-holder (z-index 6) and
     .white-overlay_holder (8) in the NEXT section, which on a phone paints
     while this section is still on screen: the future section's pin makes it
     position:fixed at the top of the viewport, and with both sections at
     z-index:auto the help section's higher-numbered children drew straight
     over the pinned future content. The two sections read as one overlapping
     mess for the height of this section's overhang.

     z-index:1 rather than 0 so this section still sits above the plain
     background layers of its own neighbours. */
  z-index: 1;
  /* The section's children are what overhang, not the box itself, but the
     isolate above only fixes the PAINT order. This keeps the section's own
     content from spilling past its box in the first place. */
  isolation: isolate;
}

.need-anim_mobile {
  display: none;
}

.page-wrapper {
  display: block;
}

.page-loader {
  z-index: 1001;
  background-color: var(--check-black);
  justify-content: center;
  align-items: center;
  display: flex;
  position: fixed;
  inset: 0;
}

/* Set by the loader script the moment the fade finishes. Display, not just
   opacity: a fixed, full-viewport element left in the flow keeps swallowing
   pointer events over the whole page even at opacity 0. */
.page-loader.is-done {
  display: none;
}

/* The progress line runs pin-to-pin across the three sticky notes. It is a
   single element positioned and rotated by the script against the measured
   pin centres, so it stays registered when the stickies re-flow or the
   viewport changes. transform-origin is the left end because that is the
   point it grows from. */
.loader-progress_line {
  transform-origin: 0 50%;
  background-color: #b0411e;
  height: 1.92px;
  position: absolute;
  top: 0;
  left: 0;
  /* scaleX is the progress; the script only ever writes the X scale. */
  transform: scaleX(0);
}

/* The stickies sit inside this, so the line is positioned against it. */
.load-sticky_holder {
  position: relative;
}

/* The line draws over the sticky notes, so it reads as one continuous stroke
   running across all three rather than being interrupted by each note. The
   pins stay above it, so it still passes under the pin heads it connects. */
.loader-progress_line {
  z-index: 2;
}

.first-sticky,
.second-sticky,
.third-sticky {
  z-index: 1;
}

.pin-holder {
  z-index: 3;
}

.page-loader_inner {
  padding-right: var(--section-padding);
  padding-left: var(--section-padding);
  grid-column-gap: 50px;
  grid-row-gap: 50px;
  flex-flow: column;
  display: flex;
}

.load-sticky_holder {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.first-sticky {
  background-color: #ffcbb0;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  display: flex;
  position: relative;
}

.loding-holder {
  justify-content: space-between;
  align-items: flex-start;
  display: flex;
}

.loading-text,
.loading-number {
  color: var(--check-white);
  text-transform: uppercase;
  font-size: 20px;
}

/* 0%–99% sits at half strength; full opacity and colour only land at 100%. */
.loading-number {
  opacity: 0.5;
  transition:
    color 0.3s ease,
    opacity 0.3s ease;
}

.loading-number.is-complete {
  color: #fccf00;
  opacity: 1;
}

/* Sound hint pinned to the bottom of the loading screen. `.is-on` is written
   by the background-music script on the first click/tap/key press — the same
   gesture that unlocks autoplay — swapping the muted speaker for the live one
   and the invitation for a confirmation. */
.loader-sound_hint {
  grid-column-gap: 12px;
  grid-row-gap: 12px;
  color: var(--check-white);
  background-color: #ffffff14;
  border-radius: 4px;
  justify-content: flex-start;
  align-items: center;
  max-width: calc(100% - 40px);
  padding: 14px 22px;
  font-size: 18px;
  display: flex;
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
}

.loader-sound_hint .hint-icon {
  flex-shrink: 0;
  display: flex;
}

/* Exactly one of the two speaker icons is visible, muted until `.is-on`. */
.loader-sound_hint .hint-icon_on,
.loader-sound_hint.is-on .hint-icon_off {
  display: none;
}

.loader-sound_hint.is-on .hint-icon_on {
  display: flex;
}

@media screen and (max-width: 479px) {
  .loader-sound_hint {
    width: calc(100% - 32px);
    padding: 12px 16px;
    font-size: 16px;
    bottom: 24px;
  }
}

.pin-holder {
  width: 20%;
  position: absolute;
  top: -10px;
  left: -8px;
}

.second-sticky {
  background-color: #aed9e0;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  display: flex;
  position: relative;
  transform: rotate(-0.61deg);
}

.third-sticky {
  background-color: #fefdf1;
  justify-content: center;
  align-items: center;
  width: 200px;
  height: 200px;
  display: flex;
  position: relative;
  transform: rotate(-0.61deg);
}

.sticky-content_holder {
  width: 60%;
}

.help-holder {
  padding: 80px var(--section-padding);
  grid-column-gap: 40px;
  grid-row-gap: 40px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.help-header {
  z-index: 6;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: center;
  width: 57%;
  display: flex;
  position: relative;
}

.help-head_text {
  color: var(--check-white);
  text-align: center;
  text-transform: uppercase;
  font-family: Mangogrotesque, Arial, sans-serif;
  font-size: 80px;
  line-height: 85%;
}

.help-rider_text {
  color: var(--check-white);
  text-align: center;
  font-family: Polysans, Arial, sans-serif;
  font-size: 18px;
  line-height: 140%;
}

.help-headbody_holder {
  width: 80%;
}

.recording-holder {
  z-index: 1;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  border: 1px solid #ffffff80;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 40px 40px 0;
  display: flex;
  position: relative;
  overflow: hidden;
}

.recording-lhs {
  grid-column-gap: 24px;
  grid-row-gap: 24px;
  flex-flow: column;
  width: 50%;
  padding-bottom: 40px;
  display: flex;
}

.recoding-meta {
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.recording-lhs_pause {
  display: none;
}

.now-playing_text,
.dot {
  color: var(--check-yellow);
  font-size: 16px;
}

.current-playing_index {
  opacity: 1;
  color: var(--check-white);
}

.recording-index_holder {
  color: var(--check-white);
  justify-content: flex-start;
  align-items: center;
  font-size: 16px;
  display: flex;
}

.index-slash,
.total-recording_index {
  opacity: 0.3;
}

.recording-quote {
  color: var(--check-white);
  font-size: 40px;
  line-height: 130%;
}

.recording-info {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  color: var(--check-white);
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.recording-text {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: column;
  display: flex;
}

.recording-wave {
  grid-column-gap: 20px;
  grid-row-gap: 20px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.recording-waveform {
  position: relative;
}

.c-play-head {
  position: absolute;
  inset: -20% auto auto 0%;
}

.recording-lhs_mute {
  display: none;
}

.recording-rhs {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 50%;
  display: flex;
  position: relative;
  bottom: -40px;
}

.radio-ui_button {
  background-color: #0000;
}

.play-ui_btn {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  color: var(--check-white);
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.ui-audio_controller {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
}

.c-mute {
  display: none;
}

.pause-ui_btn,
.prev-ui_btn,
.next-ui_btn,
.muteunmute-ui_btn {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  color: var(--check-white);
  justify-content: flex-start;
  align-items: center;
  text-decoration: none;
  display: flex;
}

.cassete-default {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.cassette-holder {
  width: 70%;
  position: relative;
}

.cassete-play,
.cassete-prev,
.cassete-next,
.cassete-unmute,
.cassete-pause {
  object-fit: cover;
  width: 100%;
  height: 100%;
  display: none;
}

.div-block-4 {
  position: absolute;
}

.shadow-holder {
  z-index: 5;
  pointer-events: none;
  mix-blend-mode: multiply;
  position: fixed;
  inset: 0%;
  opacity: 1;
  visibility: visible;
  transition:
    opacity 0.6s ease,
    visibility 0s linear 0s;
}

/* The shadow is a full-viewport multiply layer, so it dims .future-section's
   black stage the whole way through the pin. It fades out as the section
   comes up and back in on the way out; the class is written by the shadow
   fade script in js/script.js.

   visibility, not display: display cannot be transitioned, so switching it
   would cut the fade off on its first frame. Instead visibility is delayed by
   the length of the fade on the way out and switched immediately on the way
   in, which keeps the element out of hit-testing and off the accessibility
   tree once it is invisible without touching the opacity animation. */
.shadow-holder.is-hidden {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.6s ease,
    visibility 0s linear 0.6s;
}

@media (prefers-reduced-motion: reduce) {
  .shadow-holder {
    transition: none;
  }

  .shadow-holder.is-hidden {
    transition: none;
  }
}

.paragraph-text {
  font-size: 16px;
  font-weight: 300;
}

.c-bgmusic {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  pointer-events: auto;
  cursor: pointer;
  background-color: #ffffff0d;
  justify-content: flex-start;
  align-items: center;
  padding: 12px;
  display: flex;
}

/* Background-music toggle: exactly one of the two speaker icons is visible.
   `.is-muted` is written by the background-music script in js/script.js. */
.c-bgmusic .bgm-on,
.c-bgmusic.is-muted .bgm-off {
  display: flex;
}

.c-bgmusic .bgm-off,
.c-bgmusic.is-muted .bgm-on {
  display: none;
}

.text-block-2 {
  color: var(--check-white);
  text-transform: uppercase;
}

.help-cta {
  z-index: 1;
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  justify-content: flex-start;
  align-items: center;
  display: flex;
  position: relative;
}

.dark-backdrop {
  z-index: 0;
  background-image: linear-gradient(0deg, #000 23%, #0000);
  position: absolute;
  inset: 0%;
}

.future-section {
  background-color: var(--check-black);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  height: 100vh;
  /* An iPad in landscape is wide enough for this desktop layout, but its vh
     is measured with the browser chrome retracted — taller than what is on
     screen — which pushed the paragraph under the fold. svh is the actually
     visible height, and on real desktops the two are identical. */
  height: 100svh;
  display: flex;
  position: relative;
  /* Its own stacking context, for the same reason as .help-section above: the
     overlay layers inside it (.future-holder at 6, .white-overlay_holder at 8,
     the sea at 9) are sealed in here rather than resolved against whatever
     numbered children the neighbouring sections happen to carry.

     Above .help-section's 1, so that when the pin makes this section fixed at
     the top of the viewport it covers the previous section outright instead of
     being drawn through by it. */
  z-index: 2;
  isolation: isolate;
  /* The zoom phase leaves .tv-scaler scaled well past the viewport and never
     scales it back — it just ends up hidden behind the white card. A scaled
     element still counts toward the page's scrollable overflow, so without a
     clip the whole document gains a horizontal scrollbar from here down.
     `clip` rather than `hidden` so the section cannot become a scroll
     container that focus jumps could silently pan — same seal the 991px
     block applies. */
  overflow: hidden;
  overflow: clip;
}

.future-holder {
  z-index: 6;
  width: 100%;
  max-width: 1500px;
  padding-right: var(--section-padding);
  padding-left: var(--section-padding);
  pointer-events: none;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  display: flex;
  position: absolute;
}

.future-header {
  pointer-events: auto;
  justify-content: center;
  align-items: center;
  width: 24%;
  /* 24% of the holder is the two-line lockup's width on a full desktop, but
     below ~1350px it shrinks past what "THE INTERFACE" needs and the heading
     breaks into four lines. That tall header then eats the monitor's height
     budget in .tv-holder and skews its centring shift. The floor keeps the
     two-line wrap all the way down to the 992px breakpoint. */
  min-width: 330px;
  display: flex;
}

.text-block-3 {
  color: var(--check-white);
}

.future-head_text {
  color: var(--check-white);
  text-align: center;
  text-transform: uppercase;
  font-family: Mangogrotesque, Arial, sans-serif;
  font-size: 80px;
  line-height: 85%;
  display: flex;
}

.uc-h0-copy {
  letter-spacing: -2px;
  margin-top: 0;
  margin-bottom: 0;
  font-family: Polysans, Arial, sans-serif;
  font-size: 120px;
  font-weight: 400;
  line-height: 85%;
}

.uc-h0-copy.cc-capitalized {
  text-transform: uppercase;
  font-size: 160px;
}

.tv-inner {
  justify-content: center;
  align-items: center;
  display: flex;
}

/* Wraps both videos so the zoom phase scales them as a single unit while
   .tv-inner fades out on its own. Width shrinks to the video rather than
   filling the row, so .tv-screen's percentage inset is measured against the
   monitor itself and not against empty space beside it. */
.tv-scaler {
  width: auto;
  max-width: 100%;
  position: relative;
  transform-origin: 50% 50%;
  will-change: transform;
}

.tv-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The screen cut-out inside the monitor footage. Tune these four values
   against the artwork; the zoom phase reads --screen-width to work out how
   far the comp video must grow to fill the frame. */
.tv-holder {
  /* Measured off desktop_turntable.mp4. This monitor is nearly bezel-less,
     so the screen fills far more of the frame than the previous one did —
     re-measure these whenever the monitor clip changes. */
  /* --screen-top: 5.5%;
  --screen-left: 3.9%;
  --screen-width: 89.8%;
  --screen-height: 87%; */

  --screen-top: 8%;
  --screen-left: 13.1%;
  --screen-width: 73%;
  --screen-height: 61%;
}

.tv-screen {
  position: absolute;
  top: var(--screen-top);
  left: var(--screen-left);
  width: var(--screen-width);
  height: var(--screen-height);
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  border-radius: 7px;
}

.tv-screen_video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.future-paragraph_text {
  color: var(--check-white);
  font-size: 16px;
}

.future-paragraph_holder {
  pointer-events: auto;
  width: 29%;
  /* Hidden until the scroll timeline reveals it; set here so there is no
     flash of the paragraph before GSAP initialises. */
  opacity: 0;
}

.future-text_inner {
  flex-flow: column;
  justify-content: space-between;
  /* Left-aligned in the stylesheet; the scroll timeline slides the children
     from visually-centred to here, since align-items cannot be tweened. */
  align-items: flex-start;
  width: 100%;
  height: 90vh;
  /* svh for the same reason as .future-section: the visible height, not the
     chrome-retracted one, so the paragraph stays above the fold on tablets. */
  height: 90svh;
  max-height: 835px;
  display: flex;
}

.video {
  /* Height-led so .tv-holder's height decides the monitor's size; the width
     follows from the ratio. Matches desktop_turntable.mp4 (1524x1080) — if
     the clip is swapped again this must match its real dimensions, or
     object-fit: cover silently crops the footage. */
  height: 100%;
  aspect-ratio: 1524 / 1080;
  max-width: 100%;
}

.tv-holder {
  padding-right: var(--section-padding);
  padding-left: var(--section-padding);
  justify-content: center;
  align-items: center;
  display: flex;
  /* The monitor has to clear the header above it and the paragraph below it,
     both of which live in the absolutely-positioned .future-holder overlay.
     .future-text_inner is 90vh (capped at 835px) with the two text blocks
     pushed to its ends, so the free space between them is that height minus
     each block, minus a gap at top and bottom. --tv-gap is that breathing
     room; raise it to push the monitor further from the text. */
  --tv-gap: 32px;
  height: calc(
    min(90vh, 835px) - var(--future-header-h, 100px) -
      var(--future-paragraph-h, 110px) - (var(--tv-gap) * 2)
  );
  /* Mirrors .future-text_inner's 90svh so the monitor is sized against the
     same gap the text actually leaves on tablets; identical on desktops.
     Kept as a second declaration so pre-svh browsers use the line above. */
  height: calc(
    min(90svh, 835px) - var(--future-header-h, 100px) -
      var(--future-paragraph-h, 110px) - (var(--tv-gap) * 2)
  );
  /* The section centres this box on the viewport, but the gap it has to sit
     in is not centred there: the header and paragraph differ in height, so
     the free space is pushed toward the shorter one by half the difference.
     Shifting by that amount leaves an equal margin above and below. */
  transform: translateY(
    calc((var(--future-header-h, 100px) - var(--future-paragraph-h, 110px)) / 2)
  );
}

/* Height-led sizing: the holder's height above is the constraint, and the
   video derives its width from that height via its aspect ratio. Every link
   in the chain must pass the height down, or the video reverts to being
   width-led and overflows into the text. */
.tv-scaler {
  height: 100%;
  /* WebKit (every iPad browser) computes this box's shrink-to-fit width as
     zero: the width is meant to come from .video's aspect-ratio times its
     percentage height, but that chain cannot be resolved during intrinsic
     sizing, so the whole monitor collapsed to a 0-wide box in landscape on
     iPads while Blink on desktop resolved it fine. Declaring the same ratio
     here gives the box a width of its own — its height is definite — which
     every engine resolves identically. Must match .video's ratio. */
  aspect-ratio: 1524 / 1080;
}

.tv-inner {
  width: 100%;
  height: 100%;
}

/* Sits above the videos and is revealed by the scroll timeline, so it is a
   full-bleed positioning layer rather than an in-flow block. It stays
   transparent: only .white-overlay-bg inside it is white, so the panel reads
   as a card on the section's black rather than flooding the viewport. */
.white-overlay_holder {
  z-index: 8;
  padding-right: var(--section-padding);
  padding-left: var(--section-padding);
  justify-content: center;
  align-items: center;
  display: flex;
  position: absolute;
  inset: 0%;
  opacity: 0;
  pointer-events: none;
}

.white-overlay-bg {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  background-color: #fff;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 90vh;
  /* svh, as elsewhere in this section: the card must fit the height that is
     actually visible on a tablet, not the chrome-retracted viewport. */
  height: 90svh;
  padding: 20px 80px;
  display: flex;
  /* Establishes the stacking context its children layer within. The scroll
     timeline rounds the corners as the heading rises, and overflow is
     clipped so the inner content follows that radius. */
  position: relative;
  overflow: hidden;
}

.whiteoverlay-heading_text {
  text-align: center;
  font-size: 32px;
  line-height: 140%;
  padding-top: 48px;
  padding-bottom: 48px;
}

.whiteoverlay-textholder {
  width: 50%;
  z-index: 2;
  position: relative;
  /* The scroll timeline slides this from the card's centre to its top as the
     experience cards come in. */
  will-change: transform;
}

/* The future section's sea. It sits at the end of .future-section, outside
   .c-container, so it spans the full viewport and rises from below the
   section rather than from inside the white card. The shared .sea-holder
   rule is display:none and comes later in this file, so this selector is
   doubled up to outrank it regardless of order. */
.sea-holder.future-sea {
  /* Above the white card, which is z-index 8 on .white-overlay_holder. */
  z-index: 9;
  display: block;
  /* The shared rule's `height: 20%` collapsed to nothing here, so the
     height is stated outright against the section. Sized so the crest comes
     to rest near the card's lower edge rather than over its content. */
  height: 15%;
  /* inset:auto 0 0 from the shared rule pins it to the section's bottom
     edge, which is where it comes to rest. The start offset is set by the
     scroll timeline rather than here: a CSS transform on top of GSAP's
     yPercent double-offset it and left the sea permanently out of view. */
  pointer-events: none;
  will-change: transform;
}

.sea-holder {
  background-image: url("../images/sea.png");
  background-position: 50% 0;
  background-size: 100% 100%;
  height: 20%;
  position: absolute;
  inset: auto 0% 0%;
  /* Normally display block */
  display: none;
}

.experienc-section {
  grid-column-gap: 16px;
  grid-row-gap: 16px;
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: 100%;
  /* Revealed by the scroll timeline; display:flex rather than the shared
     display:none so it can be animated rather than toggled. Absolutely
     placed so it claims no flex space — the heading must sit genuinely
     centred until the reveal begins.

     --cards-top is where the heading comes to rest (the card's top padding
     plus the heading's own height); the cards are then centred in whatever
     is left below it. That keeps them tucked up under the heading rather
     than pinned to the card's foot, so they need not meet the sea. */
  display: flex;
  z-index: 2;
  position: absolute;
  left: 80px;
  right: 80px;
  /* Anchored below the heading and left to take its own height, rather than
     stretched to the card's foot: stretching kept the group's lower edge on
     the card's bottom, where the sea then washed over it. */
  top: var(--cards-top, 160px);
  width: auto;
  opacity: 0;
  will-change: transform, opacity;
}

.experience-section_card {
  border: 1px solid;
  /* --slide-bg is rewritten per slide alongside --slide-accent. The bg image
     over it is RGBA, so this tint shows through it. Transitioned below so the
     wash changes on the same beat as the artwork's dissolve. */
  --slide-bg: #e3f2f4;
  background-color: var(--slide-bg);
  background-image: url("../images/experience-bg.png");
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: cover;
  /* --slide-accent is rewritten by the slide cycler as the scroll moves from
     one experience card to the next; the gradient is built from it so the
     border and the indicator always share one source of truth. The rgb()
     form with a separate alpha lets the transparent stop be derived from the
     same value instead of hard-coding a second colour per slide. */
  --slide-accent: 0, 79, 227;
  /* The gradient border is drawn by the ::after below rather than by
     border-image: border-image ignores border-radius outright and squared
     the card's corners off. The border itself is left transparent so it
     still reserves the same 1px of space the design asks for. */
  border-color: transparent;
  border-radius: 20px;
  justify-content: space-between;
  align-items: center;
  width: 90%;
  min-height: 52vh;
  padding: 80px 40px;
  display: flex;
  /* The ::after that paints the border is positioned against this. */
  position: relative;
  /* Matches the 0.5s image/copy cross-fade so the whole card changes as one. */
  transition: background-color 0.5s ease;
}

/* The slide's gradient border. Painted as a masked ring on a pseudo-element
   so the rounded corners survive — border-image drops border-radius and
   leaves the card square. The gradient fills the element, and the mask
   punches out everything but a 1px inset ring, so only the border shows.

   The gradient is not transitioned: two gradients cannot be interpolated, so
   the swap is covered by fading this layer out and back in instead, which
   matches the dissolve the images and copy use. */
.experience-section_card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(
    180deg,
    rgba(var(--slide-accent), 0) 10.67%,
    rgb(var(--slide-accent)) 100%
  );
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  /* Purely decorative, and it covers the whole card. */
  pointer-events: none;
}

.indicator-holder {
  grid-column-gap: 8px;
  grid-row-gap: 8px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.indicator-item {
  background-color: #e4e3e3;
  border-radius: 4px;
  width: 8px;
  height: 15px;
  /* The active pip grows and takes the slide's colour; both are animated so
     the change reads as the same dissolve the images and copy use. */
  transition:
    height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 0.45s ease;
}

/* The pips are controls, not just a read-out: the cycler wires each one to
   scroll the deck to its slide, so an inactive pip grows a little under the
   cursor to say it can be pressed. */
.indicator-item:hover {
  background-color: #cfcece;
}

.indicator-item:focus-visible {
  outline: 2px solid rgb(var(--slide-accent, 0, 79, 227));
  outline-offset: 3px;
}

.indicator-item.active-indicator {
  /* Inherited from .experience-section_card's --slide-accent so the pip
     tracks the border without a second table of colours. */
  background-color: rgb(var(--slide-accent, 0, 79, 227));
  height: 40px;
}

.experience-img_holer {
  width: 50%;
  /* The image slides are stacked on top of one another so one can dissolve
     into the next. The first stays in flow to give the holder a height; the
     cycler then publishes --slides-h, the tallest slide's height, so a taller
     slide later in the deck does not overflow the box the first one sized. */
  position: relative;
  min-height: var(--slides-h, 0px);
}

.experience-text_holder {
  flex-flow: column;
  justify-content: center;
  align-items: flex-start;
  width: 40%;
  font-size: 24px;
  font-weight: 300;
  line-height: 120%;
  display: flex;
  /* Same stacking treatment as the images, so the copy cross-fades in place
     rather than the block changing height as lines are swapped. The copy
     varies from two words to two lines, so the holder is held at the tallest
     of them and every slide is centred inside that. */
  position: relative;
  min-height: var(--slides-h, 0px);
}

/* Slide stacking, applied by the cycler once it takes over. Until then the
   original uc-hide markup stands, so the section still reads correctly with
   JavaScript off. Every slide but the first is lifted out of flow and laid
   over it; the first stays in flow to give the holder its height. */
.experience-img_holer.is-stacked > *,
.experience-text_holder.is-stacked > .experience-text {
  position: absolute;
  inset: 0;
  opacity: 0;
  /* Hidden slides must not swallow clicks or be read out mid-fade. */
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.experience-img_holer.is-stacked > .is-slide-flow,
.experience-text_holder.is-stacked > .is-slide-flow {
  position: relative;
  inset: auto;
  /* The stacked slides are inset to the holder's full box, so they are as
     wide as the holder. The in-flow one would otherwise shrink-wrap its
     artwork and end up narrower — which matters because the rider overlays
     inside each slide are sized and placed in PERCENTAGES of the slide, so a
     narrower slide renders its rider at roughly half the size and in the
     wrong spot. Matching the width keeps every slide's composition identical. */
  width: 100%;
  height: 100%;
}

/* The phone artwork is narrower than the holder's half of the card, so each
   slide centres itself horizontally. The in-flow one needs the holder to do
   it; the stacked ones, being inset to the holder's full box, centre
   themselves. Without this the images sat hard against the left edge. */
.experience-img_holer.is-stacked {
  display: flex;
  justify-content: center;
  align-items: center;
}

.experience-img_holer.is-stacked > * {
  justify-content: center;
  align-items: center;
}

.experience-img_holer.is-stacked > .is-slide-active,
.experience-text_holder.is-stacked > .is-slide-active {
  opacity: 1;
  pointer-events: auto;
}

/* The text slides are centred as a group in the holder, so an out-of-flow
   one has to centre itself against the holder's box to sit where the
   in-flow one did. */
.experience-text_holder.is-stacked > .experience-text {
  display: flex;
  flex-flow: column;
  justify-content: center;
}

/* The cycler drives visibility through opacity, so the original display
   toggle has to stop applying to the slides it owns. */
.experience-img_holer.is-stacked > .uc-hide,
.experience-text_holder.is-stacked > .experience-text.uc-hide {
  display: flex;
}

@media (prefers-reduced-motion: reduce) {
  .experience-img_holer.is-stacked > *,
  .experience-text_holder.is-stacked > .experience-text,
  .indicator-item,
  .experience-section_card {
    transition: none;
  }
}

.experience-phone_img {
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.blue-rider_img {
  width: 60%;
  position: absolute;
  inset: 28% auto auto 43%;
  /* The six rider PNGs have quite different aspect ratios (0.90 to 1.34), and
     with only a width set each one resolved its own height — so the narrowest
     (blue, 267x285) rendered ~90px taller than orange or purple and spilled
     out of the frame. Fixing the height makes every overlay occupy the same
     box; the `contain` on .c-img below then scales each image to fit inside
     it rather than cropping to fill. */
  height: 62%;
}

.yellowexperience-phone_img {
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.yellowexperience-phone_img.uc-hide,
.experience-text.uc-hide {
  display: none;
}

.greenexperience-phone_img {
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.greenexperience-phone_img.uc-hide {
  display: none;
}

.orangeexperience-phone_img {
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.orangeexperience-phone_img.uc-hide {
  display: none;
}

.purpleexperience-phone_img {
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.purpleexperience-phone_img.uc-hide {
  display: none;
}

.purple-rider_img {
  width: 60%;
  position: absolute;
  inset: 28% auto auto 43%;
  /* The six rider PNGs have quite different aspect ratios (0.90 to 1.34), and
     with only a width set each one resolved its own height — so the narrowest
     (blue, 267x285) rendered ~90px taller than orange or purple and spilled
     out of the frame. Fixing the height makes every overlay occupy the same
     box; the `contain` on .c-img below then scales each image to fit inside
     it rather than cropping to fill. */
  height: 62%;
}

.pinkexperience-phone_img-copy {
  justify-content: center;
  align-items: center;
  display: flex;
  position: relative;
}

.pinkexperience-phone_img-copy.uc-hide {
  display: none;
}

/* The rider artwork is a composed overlay, not a photograph to be cropped:
   it has to sit whole inside its box. .c-img is object-fit: cover globally,
   which cropped the taller riders, so it is overridden here only. */
.blue-rider_img > .c-img,
.purple-rider_img > .c-img,
.pink-rider_img > .c-img {
  object-fit: contain;
  object-position: 50% 0;
}

.pink-rider_img {
  width: 60%;
  position: absolute;
  inset: 28% auto auto 43%;
  /* The six rider PNGs have quite different aspect ratios (0.90 to 1.34), and
     with only a width set each one resolved its own height — so the narrowest
     (blue, 267x285) rendered ~90px taller than orange or purple and spilled
     out of the frame. Fixing the height makes every overlay occupy the same
     box; the `contain` on .c-img below then scales each image to fit inside
     it rather than cropping to fill. */
  height: 62%;
}

/* The closing beat of the future section. The card has grown to fill the
   viewport by this point, so both of these are positioned against it rather
   than sitting in its centred flex flow: the text column holds the lower
   left, and the money artwork spans the full width behind it.

   Both start hidden and are revealed by the scroll timeline; they are
   display:flex/block rather than display:none so they can be animated. */
.dictate-holder {
  z-index: 3;
  justify-content: space-between;
  align-items: flex-end;
  display: flex;
  position: absolute;
  inset: auto 0 0;
  /* The holder is positioned against the section, not .c-container, so on
     screens wider than the container the plain section padding would leave
     the copy further out than everything else. The second calc term is the
     container's own gutter (it is max-width: 1500px, centered), so the copy
     lines up with the container edge once the screen outgrows it. */
  padding-left: max(var(--section-padding), calc((100% - 1500px) / 2));
  padding-right: max(var(--section-padding), calc((100% - 1500px) / 2));
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.dictate-lhs {
  grid-column-gap: 32px;
  grid-row-gap: 32px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  /* Narrow enough that the heading breaks after "THE", matching the design's
     two-line lockup rather than running as one long line. */
  width: 40%;
  /* Clears the sea, which stands 15% of the section at the card's foot. The
     copy has to sit above its crest or the body and button are swallowed. */
  padding-bottom: 37vh;
  display: flex;
}

.dictate-body {
  max-width: 34ch;
}

/* The money artwork. It is a sibling of .sea-holder at the section level,
   NOT a child of the white card, so it shares the sea's coordinate space and
   the two line up exactly.

   z-index 9 matches the sea's, and it comes first in source order, so the
   sea paints over it — the artwork's foot is hidden behind the crest and it
   reads as rising out of the water. The sea stands 15% of the section at the
   foot; this is taller so the artwork clears it and is seen above the line. */
.dictate-money {
  z-index: 9;
  position: absolute;
  inset: auto 0 auto;
  left: 0;
  right: 0;
  width: 100%;

  background-image: url("../images/moon-pay.png");
  background-repeat: no-repeat;
  /* The artwork spans the full viewport width, so the width binds and the
     height follows the image's aspect. The box is sized to that same aspect
     below, so the notes at the top are never clipped and never smeared. */
  background-size: 100% auto;
  /* The box fits the image exactly (aspect-ratio below), so this anchor has
     no slack to work with — `bottom` further down is the height knob. */
  background-position: 50% 100%;
  /* moon-pay.png's own proportions: full-bleed wide, the box grows exactly
     tall enough to show the whole artwork. */
  aspect-ratio: 1440 / 612;

  /* --- The knob for how far the artwork stands out of the water. ---
     0% rests its base on the section's bottom edge. NEGATIVE values sink it
     below the edge so the sea hides more of it; positive values lift it so
     more clears the crest. */
  bottom: -5%;

  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

.dictate-heading {
  text-transform: uppercase;
  font-family: Mangogrotesque, Arial, sans-serif;
  font-size: 80px;
  line-height: 85%;
}

@media screen and (min-width: 1920px) {
  .mat-img_holder {
    transform: translate(620px, 500px) rotate(-26.21deg);
  }

  .ipad-img_holder {
    transform: scale(0.6) translate(70%, -145%) rotate(-26.21deg);
  }

  .file-img_holder {
    transform: scale(0.7) translate(120%, -76%) rotate(-11.82deg);
  }

  .pen-img_holder {
    transform: scale(0.05) translate(490%, 90%) rotate(51.31deg);
  }

  .hero-below_holder {
    padding-top: 210px;
  }

  .c-container {
    max-width: 1740px;
  }

  /* Tracks the wider container above, same alignment as the base rule. */
  .dictate-holder {
    padding-left: max(var(--section-padding), calc((100% - 1740px) / 2));
    padding-right: max(var(--section-padding), calc((100% - 1740px) / 2));
  }

  .second-evidence .evidence-textholder {
    padding-left: 16%;
    padding-right: 16%;
  }

  .help-header {
    width: 49%;
  }

  .need-text_lhs {
    width: 25%;
  }

  .need-text_rhs {
    width: 33%;
  }

  .paper-sheet {
    top: auto;
  }

  .page-loader {
    display: flex;
  }

  .page-loader.is-done {
    display: none;
  }
}

@media screen and (max-width: 991px) {
  body {
    --check-light-blue: #e3f2f4;
    --section-padding: 30px;
    --check-white: white;
    --check-green: #014f3a;
    --check-yellow: #fccf00;
    --check-blue: #004fe3;
    --check-orange: orange;
    --check-faded-blue: #f2f7f6;
  }

  .mat-img_holder {
    transform: translate(290px, 390px) rotate(-26.21deg);
  }

  .file-img_holder {
    transform: scale(0.6) translate(130%, -90%) rotate(-14deg);
  }

  .receipt-img_holder {
    transform: scale(0.1) translate(780%, 465%) rotate(-79.95deg);
  }

  .phone-img_holder {
    transform: scale(0.3) translate(229%, 150%) rotate(-54.8deg);
  }

  .pen-img_holder {
    transform: scale(0.05) translate(650%, 120%) rotate(51.31deg);
  }

  .paper-sheet {
    top: -30px;
  }

  .evidence-holder {
    grid-template-columns: 1fr 1fr 1fr;
  }

  .footer-bottom_cta {
    width: 100%;
  }

  .footer-text_wrapper {
    max-width: 50%;
    font-size: 16px;
  }

  .uc-h0,
  .uc-h0.cc-capitalized {
    font-size: 100px;
  }

  .footer-bottom_title {
    width: 100%;
  }

  .approach-block {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
  }

  .footer-model {
    width: 250px;
    height: 400px;
    right: 0;
  }

  .footer-bottom_inner {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }

  .paper-sheet_headholder {
    width: 77%;
  }

  .need-section {
    height: auto;
  }

  .need-text_rhs {
    width: 50%;
  }

  .need-animation_holder {
    display: none;
  }

  .need-anim_mobile {
    grid-column-gap: 16px;
    grid-row-gap: 16px;
    flex-flow: column;
    grid-template-rows: auto auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    justify-content: flex-start;
    place-items: center stretch;
    margin-bottom: 60px;
    display: grid;
  }

  .help-header {
    width: 70%;
  }

  .recording-holder {
    flex-flow: column;
  }

  .recording-lhs,
  .recording-rhs {
    width: 100%;
  }

  .future-header {
    width: 40%;
  }

  .uc-h0-copy,
  .uc-h0-copy.cc-capitalized {
    font-size: 100px;
  }
}

@media screen and (max-width: 767px) {
  .need-inner {
    padding-top: 40px;
  }

  .need-text_holder {
    flex-flow: column;
    align-items: flex-start;
  }

  .hero-below_holder {
    padding-bottom: 40px;
  }

  .shadow-holder {
    display: none;
  }

  .help-cta {
    flex-direction: column;
    align-items: stretch;
  }

  .help-cta .c-button {
    width: 100%;
  }

  .help-cta .c-button.cc-white {
    order: -1;
  }

  body {
    --check-light-blue: #e3f2f4;
    --section-padding: 30px;
    --check-white: white;
    --check-green: #014f3a;
    --check-yellow: #fccf00;
    --check-blue: #004fe3;
    --check-orange: orange;
    --check-faded-blue: #f2f7f6;
  }

  .hero-top {
    height: 100svh;
    min-height: 750px;
    max-height: none;
  }

  .file-img_holder {
    transform: scale(0.6) translate(130%, -80%) rotate(-14deg);
  }

  .pen-img_holder {
    transform: scale(0.05) translate(650%, 150%) rotate(51.31deg);
  }

  .evidence-holder {
    grid-template-columns: 1fr 1fr;
  }

  .footer-bottom_cta {
    font-size: 18px;
  }

  .footer-bottom {
    padding-top: 30px;
  }

  .footer {
    background-size: auto 300px;
  }

  .footer-text_wrapper {
    max-width: none;
    font-size: 18px;
    line-height: 120%;
  }

  .footer-inner {
    padding-top: 50px;
    padding-bottom: 100px;
  }

  .uc-h0 {
    font-size: 80px;
  }

  .footer-title_wrapper {
    width: 80%;
    margin-bottom: 50px;
  }

  .footer-bottom_title {
    margin-bottom: 50px;
  }

  .footer-logo {
    margin-bottom: 24px;
  }

  .footer-cta_wrapper {
    justify-content: flex-start;
    align-items: flex-start;
    margin-top: 40px;
  }

  .approach-block {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    width: 100%;
    max-width: none;
    margin-top: 30px;
  }

  .approach-block_header {
    font-size: 30px;
  }

  .approach-block_header-inner {
    max-width: none;
  }

  .approach-text {
    max-width: 340px;
    font-size: 18px;
  }

  .footer-model {
    height: 300px;
    top: -80px;
  }

  .footer-arrow {
    width: 56px;
    height: 50px;
  }

  .footer-bottom_copyright {
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    padding-left: 30px;
    padding-right: 30px;
    font-size: 14px;
  }

  .footer-bottom_inner {
    margin-bottom: 60px;
    padding-left: 30px;
    padding-right: 30px;
    display: block;
  }

  .footer-subtitle_wrapper {
    grid-column-gap: 40px;
    grid-row-gap: 40px;
    flex-flow: column-reverse;
    justify-content: flex-end;
    align-items: flex-start;
    margin-bottom: 50px;
  }

  .footer-approach_wrapper {
    margin-bottom: 40px;
  }

  .paper-sheet_headholder {
    width: 92%;
  }

  .need-text_holder {
    flex-flow: column;
  }

  .need-text_lhs {
    width: 80%;
  }

  .need-text_rhs,
  .help-header {
    width: 100%;
  }

  .future-header {
    width: 50%;
  }

  .uc-h0-copy {
    font-size: 80px;
  }
}

@media screen and (max-width: 479px) {
  .hero-heading {
    font-size: 63px;
  }

  .hero-heading_holder {
    width: 100%;
  }

  .mat-img_holder {
    transform: scale(2.2) translate(25px, 169px) rotate(-26.21deg);
  }

  .ipad-img_holder {
    transform: scale(0.6) translate(83%, -125%) rotate(-26.21deg);
  }

  .file-img_holder {
    transform: scale(0.7) translate(120%, 31%) rotate(20deg);
  }

  .receipt-img_holder {
    transform: scale(0.1) translate(750%, 850%) rotate(-79.95deg);
  }

  .phone-img_holder {
    transform: scale(0.3) translate(229%, 300%) rotate(-54.8deg);
  }

  .pen-img_holder {
    transform: scale(0.05) translate(340%, 290%) rotate(51.31deg);
  }

  .papersheet-head {
    font-size: 56px;
  }

  .paper-sheet {
    top: -10px;
  }

  .evidence-holder {
    grid-template-columns: 1fr;
  }

  .uc-h0 {
    font-size: 70px;
  }

  .footer-title_wrapper {
    width: 100%;
  }

  .uc-h2 {
    font-size: 50px;
  }

  .footer-cta_wrapper {
    flex-flow: column;
    align-items: stretch;
  }

  .footer-model {
    width: 150px;
    height: 150px;
  }

  .evidence-cta_holder {
    grid-column-gap: 24px;
    grid-row-gap: 24px;
    flex-flow: column;
    justify-content: space-between;
    align-items: flex-start;
  }

  .evidence-cta_lhs,
  .paper-sheet_headholder,
  .need-text_lhs {
    width: 100%;
  }

  .needtext_head {
    font-size: 56px;
  }

  .need-anim_mobile {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
  }

  .page-loader {
    display: flex;
  }

  .page-loader.is-done {
    display: none;
  }

  .first-sticky,
  .second-sticky,
  .third-sticky {
    width: 100px;
    height: 150px;
  }

  .sticky-content_holder {
    width: 80%;
  }

  .help-header {
    width: 100%;
  }

  .help-head_text {
    font-size: 56px;
  }

  .recording-holder {
    padding-left: 20px;
    padding-right: 20px;
  }

  .recording-lhs {
    padding-bottom: 0;
  }

  .recording-quote {
    font-size: 30px;
  }

  .recording-rhs {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }

  .recording-wave {
    width: 100%;
    min-width: 0;
  }

  .recording-waveform {
    flex: 1;
    min-width: 0;
  }

  .recording-waveform .c-waveform svg {
    width: 100%;
    height: auto;
    display: block;
  }

  .recording-waveform .c-play-head {
    inset: 50% auto auto 0%;
    margin-top: -14px;
  }

  .recording-waveform .c-play-head svg {
    height: 28px;
    width: auto;
    display: block;
  }

  .play-ui_btn {
    justify-content: center;
    align-items: center;
  }

  .ui-audio_controller {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
    grid-template-rows: auto;
    grid-template-columns: 1fr 1fr;
    grid-auto-columns: 1fr;
    width: 100%;
    display: grid;
  }

  .pause-ui_btn,
  .prev-ui_btn,
  .next-ui_btn,
  .muteunmute-ui_btn {
    justify-content: center;
    align-items: center;
  }

  .cassette-holder {
    width: 100%;
  }

  .future-header {
    width: 90%;
  }

  .uc-h0-copy {
    font-size: 70px;
  }
}

@font-face {
  font-family: "Polysans";
  src: url("../fonts/PolySansTrial-Slim.otf") format("opentype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Polysans";
  src: url("../fonts/PolySansTrial-Median.otf") format("opentype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Polysans";
  src: url("../fonts/PolySansTrial-Neutral.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Polysans";
  src: url("../fonts/PolySansTrial-Bulky.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Mangogrotesque";
  src: url("../fonts/MangoGrotesque-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================================
   Future section — mobile (<= 991px)

   The desktop sequence is a landscape composition: the text slides from
   centred to left-aligned beside a wide monitor, and the white card meets the
   comp video on its HEIGHT. None of that survives a portrait viewport, so the
   whole section is re-laid-out here rather than scaled down.

   The mobile beats, matching the reference frames:
     1. header centred at the top, monitor centred, paragraph centred below
     2. the monitor footage scrubs, the comp video takes its screen
     3. the comp video zooms past the frame and fills the viewport
     4. the white card takes over with the experience deck

   The text stays CENTRED throughout — there is no slide-to-left phase on
   mobile, so .future-text_inner keeps align-items:center and the timeline
   only fades and lifts the paragraph.
   ========================================================================== */
@media screen and (max-width: 991px) {
  /* dvh rather than svh: svh is fixed at the URL-bar-visible height, so once
     the bar collapsed mid-scroll the pinned section fell short of the screen
     and its bottom-anchored layers (the sea, the money artwork) floated up
     off the visual bottom, exposing what lay below the section's edge. dvh
     tracks the live viewport, keeping the section's foot on the screen's foot
     whatever the chrome is doing; svh stays as the fallback where dvh is
     unsupported.

     The clip seals the same seam from the other side: the money artwork
     begins its rise pushed below the section's bottom edge (yPercent 60), and
     without clipping that overhang painted into whatever gap the chrome
     opened. `clip` rather than `hidden` so the section cannot become a
     scroll container that focus jumps could silently pan. */
  .future-section {
    height: 100svh;
    height: 100dvh;
    overflow: hidden;
    overflow: clip;
  }

  /* Centred for the whole sequence, and given the section's real height so
     the three stacked blocks are distributed against what is on screen. */
  /* The text and the monitor are two independent layers: this block is the
     absolutely-positioned .future-holder overlay, while the monitor lives in
     .c-container underneath it. So the gap between the header and the
     paragraph is what the monitor has to fit into, exactly as on desktop —
     space-between opens that gap, and .tv-holder below is sized to it from
     the measured heights the script publishes. Anything else (space-evenly,
     say) closes the gap and the monitor lands on top of the copy. */
  .future-text_inner {
    align-items: center;
    justify-content: space-between;
    /* Short of the full viewport so the lockup and the paragraph sit inside
       the safe area rather than against the very edges. */
    height: 88svh;
    max-height: none;
  }

  /* The desktop widths (24% / 29%) are a landscape measure. In portrait the
     copy needs most of the column, capped so the lines still break like the
     reference rather than running edge to edge on a tablet. */
  /* Narrow enough that the lockup breaks after "INTERFACE" into the two-line
     shape the design asks for, rather than running "THE INTERFACE OF THE" as
     one line and orphaning "FUTURE" underneath. */
  .future-header {
    width: 100%;
    max-width: 300px;
    /* The desktop floor (330px) would beat the 300px cap here — min-width
       wins over max-width — and defeat the deliberate two-line break. */
    min-width: 0;
  }

  /* .future-head_text is display:flex in the base stylesheet, so the copy is
     laid out as a single flex line and runs straight past the header's width
     instead of wrapping into the two-line lockup. Switched to a block here so
     the text wraps at the 300px above, which is what breaks it after
     "INTERFACE". */
  .future-head_text {
    display: block;
    font-size: 56px;
  }

  .future-paragraph_holder {
    width: 100%;
    max-width: 330px;
  }

  .future-paragraph_text {
    text-align: center;
    font-size: 17px;
    line-height: 145%;
  }

  /* Portrait screen inset. The monitor is the same clip, but it is drawn much
     smaller here, so the hand-tuned desktop fractions are kept — they describe
     the footage, not the viewport — and only the corner radius is eased down
     to match the smaller draw. */
  .tv-screen {
    border-radius: 4px;
  }

  /* Height-led sizing collapses in portrait: the monitor's 1524/1080 ratio
     means a height-driven box is far wider than the viewport. Width-led
     instead, so the monitor spans the column and takes whatever height its
     ratio gives it. The gap either side of the text is then whatever is left
     of .future-text_inner's space-between distribution. */
  /* Sized to the gap the text leaves, the same contract as desktop, but the
     result is applied as a max-height rather than a height: in portrait the
     monitor's 1524/1080 ratio means the column's full width is usually the
     tighter of the two limits, and the gap only takes over on a short or
     landscape-ish viewport where the copy leaves little room. Whichever is
     smaller wins, so the monitor never overlaps the copy and never overflows
     the column. */
  .tv-holder {
    width: 100%;
    /* The column's own gutters are what set the monitor's width; the section
       padding on top of them left it noticeably narrower than the copy. */
    padding-left: 0;
    padding-right: 0;
    --tv-gap: 16px;
    height: auto;
    max-height: calc(
      88svh - var(--future-header-h, 100px) - var(--future-paragraph-h, 110px) -
        (var(--tv-gap) * 2)
    );
    /* Desktop nudges the monitor to sit evenly between two blocks of
       differing height. The same correction applies here for the same
       reason — the header and paragraph are not the same height, so the gap
       they leave is not centred on the viewport. */
    transform: translateY(
      calc(
        (var(--future-header-h, 100px) - var(--future-paragraph-h, 110px)) / 2
      )
    );
  }

  .tv-scaler {
    width: 100%;
    height: auto;
    max-height: inherit;
  }

  .tv-inner {
    width: 100%;
    height: auto;
    max-height: inherit;
  }

  .video {
    width: 100%;
    height: auto;
    max-height: inherit;
    /* Width-led: the ratio now decides the height rather than the reverse. */
    aspect-ratio: 1524 / 1080;
  }

  /* The card fills the viewport rather than sitting as a padded panel: at
     this width a gutter on both sides leaves the experience card too narrow
     to read. The holder keeps a small padding so the corner-rounding beat in
     the timeline still has somewhere to round to. */
  .white-overlay_holder {
    padding-left: 16px;
    padding-right: 16px;
  }

  .white-overlay-bg {
    height: 92svh;
    padding: 24px 20px;
  }

  .whiteoverlay-textholder {
    width: 100%;
    max-width: 420px;
  }

  .whiteoverlay-heading_text {
    text-align: left;
    font-size: 24px;
    line-height: 130%;
    /* A little breathing room: the card's own padding is slim here, so the
       heading needs its own cushion off the card's top edge and the deck
       below it. */
    padding: 16px 8px 12px;
  }

  /* The deck goes portrait: artwork above, copy below, pips laid out
     horizontally under the card instead of vertically beside it. */
  .experienc-section {
    left: 20px;
    right: 20px;
    flex-flow: column;
    grid-row-gap: 16px;
  }

  .experience-section_card {
    flex-flow: column;
    justify-content: flex-start;
    width: 100%;
    min-height: 0;
    padding: 24px 20px 28px;
    border-radius: 16px;
  }

  .experience-img_holer {
    width: 100%;
  }

  .experience-text_holder {
    width: 100%;
    align-items: center;
    text-align: center;
    font-size: 18px;
  }

  /* Centred under the card, and the pips turn on their side: a vertical rail
     beside the card has nowhere to live once the card is full width. */
  .indicator-holder {
    flex-flow: row;
    justify-content: center;
    align-items: center;
    width: 100%;
  }

  .indicator-item {
    width: 15px;
    height: 8px;
  }

  .indicator-item.active-indicator {
    width: 40px;
    height: 8px;
  }

  /* The closing beat. In portrait the copy and the artwork are stacked in one
     narrow column rather than sitting side by side, so the copy is anchored to
     the TOP of the card and the artwork is left the space below it. The
     desktop rule bottom-anchors the copy and clears the sea with a large
     padding-bottom, which here pushed the button down into the notes. */
  .dictate-holder {
    /* inset:auto 0 0 bottom-anchors this on desktop; anchored to the top here
       so the copy reads first and the artwork rises underneath it. */
    inset: 0 0 auto;
    align-items: flex-start;
  }

  .dictate-lhs {
    width: 100%;
    grid-row-gap: 16px;
    /* Clear of the card's own top edge, with no bottom padding: the artwork
       below is what fills the rest of the column now. */
    padding-top: 16svh;
    padding-bottom: 0;
  }

  .dictate-heading {
    font-size: 56px;
  }

  .dictate-body {
    max-width: none;
    font-size: 16px;
  }

  /* Shorter sea in portrait. At the desktop 15% its crest cut across the
     bottom of the white card, and the pips — which sit in flow just under
     the experience card — drowned behind it on shorter phones (the sea is
     z-index 9 over the overlay's 8, so anything it reaches is covered).
     8% keeps the water as the section's foot while leaving the card's
     lower band, pips included, clear of the crest. */
  .sea-holder.future-sea {
    height: 8%;
  }

  .dictate-money {
    /* Desktop's `contain` in a portrait box binds on the width, so the
       height knob does nothing at all here. The SIZE is set on the width
       instead: `auto 100%` would bind on height but crops the sides; an
       explicit width scales it predictably and lets it overflow the box's
       height, which is what puts the notes' base behind the sea's crest.

       Raise the first value to draw the notes larger. */
    background-size: 150% auto;
    background-position: 50% 100%;
    height: 42%;
    /* Desktop sinks the artwork with a negative bottom; here it rests on
       the section's edge. */
    bottom: 0%;
  }
}

/* Phone proper. The reference frames are this range: a single narrow column
   with the monitor spanning nearly the full width. */
@media screen and (max-width: 767px) {
  .future-head_text {
    font-size: 48px;
  }

  .future-paragraph_text {
    font-size: 16px;
  }

  .white-overlay-bg {
    padding: 20px 16px;
  }

  .whiteoverlay-heading_text {
    font-size: 22px;
  }

  .experienc-section {
    left: 16px;
    right: 16px;
  }

  .dictate-heading {
    font-size: 44px;
  }
}

/* ============================================================================
   Reserved space for the lazily-loaded mobile stats artwork.

   These six wrappers had no rules at all, and .c-img inside them is
   `height: 100%` — so the box had no height of its own and collapsed to
   nothing until its `loading="lazy"` image actually decoded. Scrolling near
   them then grew .need-section by ~1347px and .help-section by ~244px in one
   go, which pushed .future-section ~1591px down the page AFTER its pin start
   had been measured. The pin fired while the section was still well below the
   fold and the section snapped that distance in a single frame.

   Each ratio is the artwork's own, so the box is exactly the height the image
   will occupy and nothing reflows when it lands. Update a ratio here if the
   corresponding PNG is ever re-exported at a different size.
   ========================================================================== */
._81-percent {
  aspect-ratio: 782 / 469;
}

._82-percent {
  aspect-ratio: 802 / 470;
}

._77-percent {
  aspect-ratio: 830 / 545;
}

._31-percent {
  aspect-ratio: 800 / 464;
}

._63-percent {
  aspect-ratio: 813 / 441;
}

._55-percent {
  aspect-ratio: 825 / 478;
}

@media screen and (min-width: 992px) and (max-width: 1180px) {
  .paper-sheet_headholder {
    width: 65%;
  }

  .whiteoverlay-heading_text {
    padding-top: 8px;
    padding-bottom: 8px;
    font-size: 20px;
  }
}

@media screen and (min-width: 768px) and (max-width: 991px) and (orientation: portrait) {
  .hero-top {
    max-height: 940px;
  }
  .hero-heading {
    font-size: 88px;
  }

  .mat-img_holder {
    transform: translate(265px, 419px) rotate(-26.21deg);
  }

  /* Wide enough for the heading to wrap on two lines instead of three. */
  .whiteoverlay-textholder {
    max-width: 600px;
  }

  .whiteoverlay-heading_text {
    text-align: center;
  }

  /* Stretched to the card's foot so the flex centering puts the deck in the
     middle of the space below the heading, rather than tucked up under it
     with a void beneath. The bottom padding discounts the strip the sea
     washes over, so the deck centres on the visible white area — padding
     shifts the centred content up by half its value. */
  .experienc-section {
    bottom: 0;
    justify-content: center;
    padding-bottom: 140px;
  }

  /* The tablet block draws the artwork at 150% width inside a fixed 42%-tall
     box, and on this tall portrait viewport the scaled image outgrows the box
     — bottom-anchored, so the notes' tops get sheared off. Let the box take
     its height from the artwork instead: 918 is 612 × 1.5, the image's
     height at that 150% size, so the box always fits the whole drawing. */
  .dictate-money {
    height: auto;
    aspect-ratio: 1440 / 918;
  }
  .dictate-lhs {
    width: 50%;
  }
}