/* Click Inspection: the scroll-world site.
 *
 * The world is light (the app's light theme), the chrome is graphite (the
 * app's dark theme), the phone runs the app's dark theme. Green is automation
 * and success; copper is the inspector's own hand. Values come from
 * css/tokens.css, which mirrors the app; nothing here invents a colour.
 * Decisions: docs/brand-and-style-findings.md §6.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--ci-page);
  color: var(--ci-ink);
  font-family: var(--ci-sans);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  /* `clip`, not `hidden`: hidden on body makes it a scroll container that
   * never scrolls, and a pinned stage then never pins. */
  overflow-x: clip;
}

img {
  max-width: 100%;
  display: block;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.08;
  text-wrap: balance;
  letter-spacing: -0.02em;
}

p {
  margin: 0;
  text-wrap: pretty;
}

a {
  color: inherit;
}

.wrap {
  width: 100%;
  max-width: 1160px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

:root {
  --gutter: clamp(16px, 4.5vw, 56px);
  --nav-h: 60px;
  /* The space above and below every home-page section after the story: one
     value, so no boundary weighs more than another. 80px on a phone, 128px
     from about 1400px wide. */
  --section-y: clamp(80px, calc(6vw + 44px), 128px);
}

.nowrap {
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 100;
  padding: 10px 14px;
  border-radius: var(--ci-r-button);
  background: var(--ci-graphite);
  color: var(--ci-on-graphite);
}
.skip:focus {
  top: 12px;
}

:focus-visible {
  outline: 2px solid var(--ci-green-ink);
  outline-offset: 3px;
}

/* ================================================================ BUTTONS
 * The app's buttons: 10px radius, 14.5/600. The primary is the portal's green
 * gradient (GreenFill: hi, green, lo; a white lip on top; a glow in its own
 * colour) with graphite text in both themes. */
.ci-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 20px;
  border-radius: var(--ci-r-button);
  border: 0;
  font: 600 var(--ci-t-button) / 1.2 var(--ci-sans);
  text-decoration: none;
  cursor: pointer;
  transition:
    opacity var(--ci-hover-ms) ease,
    box-shadow var(--ci-hover-ms) ease,
    background-color var(--ci-hover-ms) ease;
}
.ci-btn:active {
  opacity: 0.85;
}
.ci-btn--sm {
  min-height: 38px;
  padding: 8px 14px;
  font-size: 13.5px;
  white-space: nowrap;
}
.ci-btn--block {
  width: 100%;
}
.ci-btn--green {
  color: var(--ci-on-green);
  background: linear-gradient(180deg, var(--ci-green-hi) 0%, var(--ci-green) 48%, var(--ci-green-lo) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.4),
    var(--ci-green-glow);
}
.ci-btn--green:hover {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    0 10px 24px -8px rgba(53, 199, 122, 0.7);
}
/* Light glass, as the portal's light mode draws a secondary control. */
.ci-btn--glass {
  color: var(--ci-ink);
  background: linear-gradient(170deg, #ffffff, #f3f5f8);
  box-shadow:
    inset 0 0 0 1px rgba(20, 23, 28, 0.12),
    0 6px 16px -10px rgba(20, 23, 28, 0.35);
}
.ci-btn--glass:hover {
  box-shadow:
    inset 0 0 0 1px rgba(20, 23, 28, 0.22),
    0 8px 20px -10px rgba(20, 23, 28, 0.4);
}
/* On graphite. */
.ci-btn--ghost {
  color: var(--ci-on-graphite);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px var(--ci-graphite-edge);
}
.ci-btn--ghost:hover {
  background: rgba(255, 255, 255, 0.08);
}

/* ================================================================== NAV */
.ci-nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  height: var(--nav-h);
  background: rgba(19, 21, 25, 0.92);
  border-bottom: 1px solid var(--ci-graphite-hair);
  color: var(--ci-on-graphite);
}
@supports (backdrop-filter: blur(1px)) {
  .ci-nav {
    background: rgba(19, 21, 25, 0.82);
    backdrop-filter: blur(14px) saturate(1.2);
  }
}
.ci-nav__inner {
  height: 100%;
  max-width: 1320px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 28px);
}
.ci-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  text-decoration: none;
}
.ci-brand__mark {
  height: 30px;
  width: auto;
}
.ci-brand__word {
  height: 12px;
  width: auto;
}
.ci-nav__links {
  display: flex;
  gap: clamp(14px, 1.8vw, 24px);
  font-size: 14px;
}
.ci-nav__links a {
  white-space: nowrap;
  color: var(--ci-on-graphite-2);
  text-decoration: none;
  transition: color var(--ci-hover-ms) ease;
}
.ci-nav__links a:hover {
  color: var(--ci-on-graphite);
}
/* Six links and the button need the wordmark's room until about 1010px wide;
   below that the mark carries the brand alone, as it does on a phone. */
@media (min-width: 861px) and (max-width: 1010px) {
  .ci-brand__word {
    display: none;
  }
}
@media (max-width: 860px) {
  .ci-nav__links {
    display: none;
  }
  .ci-brand__mark {
    height: 26px;
  }
}
@media (max-width: 420px) {
  .ci-brand__word {
    display: none;
  }
}

/* ================================================================ STAGE */
.story {
  position: relative;
}
.stage {
  position: relative;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  /* The plate's own sky colour, so any edge of a scene disappears into it. */
  background: #f3f4f8;
}
.world {
  position: absolute;
  inset: 0;
}
.scene {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(var(--pw) * 1px);
  height: calc(var(--ph) * 1px);
  transform-origin: 0 0;
  will-change: transform;
}
/* The plate's sky and roof run on past its top and bottom edges in their own
 * colours (sampled from the plate), so a portrait frame, which shows more
 * height than the render has, never finds an edge. */
.scene::before,
.scene::after {
  content: '';
  position: absolute;
  left: -25%;
  right: -25%;
  height: 300%;
}
.scene::before {
  bottom: 100%;
  background: var(--sky, #f3f4f8);
}
.scene::after {
  top: 100%;
  background: var(--floor, linear-gradient(90deg, #e9ebef, #eeeff3));
}
/* Later scenes wait, invisible, until the story crossfades to them. */
.scene--side,
.scene--section,
.scene--office {
  opacity: 0;
  visibility: hidden;
}

/* The pipework, lit green as the camera follows it (world.js draws it on). */
.flow {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}
.flow path[data-flow] {
  fill: none;
  stroke: var(--ci-green);
  stroke-width: 22;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.9;
  filter: drop-shadow(0 0 14px rgba(53, 199, 122, 0.75));
}
.scene--section .flow path[data-flow] {
  stroke-width: 12;
}
.plate {
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
}
.unit {
  position: absolute;
  height: auto;
  pointer-events: none;
}

/* The inspector. Positioned and sized in the scene's own pixels by
 * world.js; every pose is stacked in the same box, feet on its floor line,
 * and exactly one is shown at a time. */
.figure {
  position: absolute;
  width: 0;
  height: 0;
  pointer-events: none;
}
.figure img {
  position: absolute;
  bottom: 0;
  left: 0;
  height: var(--fig-h, 1400px);
  width: auto;
  max-width: none;
  transform: translateX(-50%);
  visibility: hidden;
}
.figure img.is-on {
  visibility: visible;
}
/* A pose turned to face the other way (the same figure, mirrored). */
.figure img.is-mirrored {
  transform: translateX(-50%) scaleX(-1);
}
/* What stands him on the floor (owner, 2026-10-01: "hovering"): a tight dark
 * contact shadow where the boots meet the ground, inside a wider soft one.
 * The poses are trimmed to the boots, so bottom: 0 IS the floor line. */
.figure__shadow {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(var(--fig-h, 1400px) * 0.5);
  height: calc(var(--fig-h, 1400px) * 0.075);
  transform: translate(-50%, 45%);
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20, 23, 28, 0.2), rgba(20, 23, 28, 0));
}
.figure__shadow::after {
  content: '';
  position: absolute;
  left: 22%;
  right: 22%;
  top: 30%;
  bottom: 30%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(20, 23, 28, 0.5), rgba(20, 23, 28, 0.18) 60%, rgba(20, 23, 28, 0));
}

/* The roof unit, live (world.js inlines the app's drawing): the fan turns and
 * air leaves it. Neither moves under reduced motion. */
.unit--plant {
  overflow: visible;
}
.ci-fan {
  animation: ci-fan 1.25s linear infinite;
}
@keyframes ci-fan {
  to {
    transform: rotate(360deg);
  }
}
.ci-air__stream {
  stroke-width: 2.2;
  stroke-dasharray: 34 26;
  animation: ci-air 1.15s linear infinite;
}
@keyframes ci-air {
  to {
    stroke-dashoffset: -60;
  }
}
.ci-air__ring {
  stroke: #8fa7c0;
  stroke-width: 2;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: ci-ring 2.4s ease-out infinite;
}
@keyframes ci-ring {
  0% {
    opacity: 0;
    transform: translate(0, 0) scale(0.92);
  }
  15% {
    opacity: 0.55;
  }
  100% {
    opacity: 0;
    transform: translate(70px, 6px) scale(1.75);
  }
}
/* The cassette at the foot of the riser: air from its louvres. */
.cassette__air {
  opacity: 0;
}
.cassette__air path {
  stroke: rgba(120, 148, 178, 0.6);
  stroke-width: 5;
  stroke-dasharray: 18 22;
  animation: ci-air-down 1.1s linear infinite;
}
@keyframes ci-air-down {
  to {
    stroke-dashoffset: -40;
  }
}
.is-reduced .ci-fan,
.is-reduced .ci-air__stream,
.is-reduced .cassette__air path {
  animation: none;
}
.is-reduced .ci-air__ring {
  display: none;
}
@media (prefers-reduced-motion: reduce) {
  .ci-fan,
  .ci-air__stream,
  .cassette__air path {
    animation: none;
  }
  .ci-air__ring {
    display: none;
  }
}

/* ---- copy ---- */
.copy {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.copy__block {
  position: absolute;
  left: var(--gutter);
  top: calc(var(--nav-h) + clamp(22px, 4vh, 44px));
  max-width: 30rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: auto;
}
/* Wide screens: the headline sits over the open roof to the right of the
 * unit, which is where the render left room for it. */
/* In the office the cassette hangs where the copy usually sits, so these
 * chapters speak from the bottom left, over the quiet desks. */
.copy__block--low {
  top: auto;
  bottom: clamp(84px, 13vh, 130px);
}
/* The report (09) starts below the ceiling cassette (owner, 2026-10-23: its
 * dark grille sat behind the label and headline). The camera's report shot
 * leaves the cassette in the top 19% of the frame on any wide screen
 * (world.js, office `report`), so the words start at 24%: never higher than
 * the other chapters', and clear of it at 16:10, 16:9 and 21:9. */
.copy__block--lowered {
  top: max(calc(var(--nav-h) + clamp(22px, 4vh, 44px)), 24vh);
}
.copy__block--hero {
  left: auto;
  right: var(--gutter);
  width: min(33rem, 37vw);
  max-width: none;
  top: calc(var(--nav-h) + clamp(28px, 8vh, 96px));
  opacity: 1;
  visibility: visible;
}
.copy h1 {
  font-size: clamp(2.2rem, 3.5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1.02;
}
.copy h2 {
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  font-weight: 700;
  letter-spacing: -0.03em;
  margin-top: 10px;
}
.copy p {
  color: var(--ci-ink-2);
  margin-top: 14px;
  font-size: clamp(1rem, 1.25vw, 1.08rem);
}
.copy .lede {
  font-size: clamp(1.02rem, 1.4vw, 1.16rem);
  margin-top: 18px;
}
.copy b {
  color: var(--ci-ink);
  font-weight: 600;
}
.eyebrow {
  font: 600 var(--ci-t-eyebrow) / 1.4 var(--ci-sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ci-ink-3);
  margin: 0;
}
.copy .eyebrow {
  margin: 0;
}
/* The home page's label lives inside its h1 (for search, 2026-10-07): on a
   line of its own, at the label's size and weight, not the headline's. */
h1 > .eyebrow {
  display: block;
}
.eyebrow .num {
  font-family: var(--ci-mono);
  margin-right: 8px;
  letter-spacing: 0.06em;
}
.eyebrow--green {
  color: var(--ci-green-ink);
}
.eyebrow--copper {
  color: var(--ci-copper-ink);
}
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}
/* The free trial in the hero: a white card on the roof's light, the label in
 * the "Every plan" badge's green, the offer in ink. It sits on the buttons it
 * leads to, so the two read as one decision. */
.offer {
  display: flex;
  align-items: center;
  gap: 12px;
  width: fit-content;
  max-width: 100%;
  margin-top: 22px;
  padding: 8px 16px 8px 8px;
  border-radius: var(--ci-r-card);
  background: linear-gradient(170deg, rgba(255, 255, 255, 0.94), rgba(247, 249, 251, 0.9));
  box-shadow:
    inset 0 0 0 1px rgba(20, 23, 28, 0.08),
    inset 0 1px 0 #fff,
    0 14px 30px -20px rgba(20, 23, 28, 0.4);
  color: var(--ci-ink-2);
  font-size: 15px;
  line-height: 1.35;
}
/* Again over `.copy p`, which would otherwise win. */
.copy .offer {
  margin-top: 22px;
  font-size: 15px;
}
.offer__tag {
  flex: none;
  padding: 6px 11px;
  border-radius: var(--ci-r-chip);
  background: var(--ci-green-tint);
  color: var(--ci-green-ink);
  font: 600 12px / 1.2 var(--ci-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}
.offer + .actions {
  margin-top: 14px;
}

/* ---- chapter rail: a slim segmented bar, bottom left ---- */
.rail {
  position: absolute;
  left: var(--gutter);
  bottom: clamp(18px, 4vh, 36px);
  z-index: 5;
}
.rail ol {
  list-style: none;
  margin: 0;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: var(--ci-r-pill);
  background: rgba(19, 21, 25, 0.86);
  box-shadow: 0 10px 24px -14px rgba(0, 0, 0, 0.6);
}
.rail button {
  position: relative;
  display: block;
  width: 26px;
  height: 22px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.rail button::before {
  content: '';
  position: absolute;
  left: 3px;
  right: 3px;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background: var(--ci-graphite-edge);
  transition: background-color 200ms ease;
}
.rail button.is-past::before {
  background: rgba(53, 199, 122, 0.55);
}
.rail button.is-on::before {
  background: var(--ci-green);
}
.rail button[disabled] {
  cursor: default;
}
.rail button[disabled]::before {
  background: var(--ci-graphite-raised);
}
.rail__label {
  margin-left: 8px;
  padding-right: 6px;
  font: 500 12px/1 var(--ci-sans);
  color: var(--ci-on-graphite-2);
  white-space: nowrap;
}
.rail__label b {
  color: var(--ci-on-graphite);
  font-weight: 600;
  margin-right: 6px;
  font-family: var(--ci-mono);
}

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: clamp(22px, 5vh, 44px);
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 14px 8px 32px;
  border-radius: var(--ci-r-pill);
  background: rgba(255, 255, 255, 0.8);
  box-shadow: inset 0 0 0 1px rgba(20, 23, 28, 0.08);
  font-size: 12.5px;
  color: var(--ci-ink-2);
}
.scroll-cue::before {
  content: '';
  position: absolute;
  left: 13px;
  top: 50%;
  width: 7px;
  height: 7px;
  margin-top: -6px;
  border-right: 1.6px solid currentColor;
  border-bottom: 1.6px solid currentColor;
  transform: rotate(45deg);
}

/* ================================================================ PHONE DOCK */
/* Positioned by CSS, moved only by GSAP (x / y), so the two never fight. */
.phone-dock {
  --ph-h: min(76vh, 740px);
  position: absolute;
  right: clamp(24px, 6vw, 110px);
  top: calc(50% + var(--nav-h) / 2);
  height: var(--ph-h);
  margin-top: calc(var(--ph-h) / -2);
  aspect-ratio: 390 / 844;
  z-index: 4;
}

/* ================================================================ MOBILE STAGE
 * Same story, re-composed for portrait: copy on top, the world in the middle
 * band, the phone rising from the bottom edge. */
@media (max-width: 760px), (max-aspect-ratio: 13/10) {
  .copy__block,
  .copy__block--hero,
  .copy__block--low,
  .copy__block--lowered {
    top: calc(var(--nav-h) + 16px);
    bottom: auto;
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
    max-width: 36rem;
  }
  .copy h1 {
    font-size: clamp(1.9rem, 8.4vw, 2.4rem);
  }
  .copy h2 {
    font-size: 1.45rem;
    margin-top: 6px;
  }
  .copy p {
    font-size: 0.95rem;
    margin-top: 8px;
  }
  /* In portrait a chapter keeps its headline only: the paragraph would sit on
     the equipment. Every word of it is in #transcript, for screen readers. */
  .copy__block:not(.copy__block--hero) p:not(.eyebrow) {
    display: none;
  }
  .copy .lede {
    font-size: 0.98rem;
  }
  .actions {
    margin-top: 16px;
  }
  .copy .offer {
    margin-top: 14px;
    padding: 6px 12px 6px 6px;
    gap: 10px;
    font-size: 14px;
  }
  .offer__tag {
    padding: 5px 9px;
  }
  .offer + .actions {
    margin-top: 12px;
  }
  /* The phone is shown WHOLE (owner, 2026-10-23: only half of it could be
     seen, so what the app does was hard to follow). world.js measures the
     room between the tallest chapter headline and the chapter rail and sets
     --dock-h and --dock-top to fill it; the values after them are only for
     the moment before it has. */
  .phone-dock {
    --ph-h: var(--dock-h, min(60svh, 540px));
    right: auto;
    left: 50%;
    top: var(--dock-top, 56svh);
    margin-top: 0;
    margin-left: calc(var(--ph-h) * -0.231);
  }
  .rail {
    left: 50%;
    transform: translateX(-50%);
    bottom: 10px;
  }
  .rail__label {
    display: none;
  }
  .scroll-cue {
    bottom: 58px;
  }
  /* A screen too short for the hero, the roof unit and the cue (world.js). */
  .scroll-cue.is-crowded {
    display: none;
  }
}

/* ================================================================ SECTIONS */
/* Everything after the story is light until the closing band, and it
   alternates the two light grounds with a hairline where two meet, so every
   boundary reads as one, even where a section ends in plain text: dashboard
   (canvas), time saved (page), zone sketch (canvas), report (page), rules
   (canvas), pricing (page). The first four live in css/pages.css. */
.rules,
.pricing {
  padding: var(--section-y) 0;
  border-top: 1px solid var(--ci-hair);
}
.pricing {
  background: var(--ci-page);
}
.rules {
  background: var(--ci-canvas);
}
.rules h2,
.pricing h2 {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
}
/* "The inspection, in words" is off the page (owner, 2026-10-13) and stays in
   it for screen readers: in portrait and without script it is where the
   story's words are. Hidden the way that keeps it in the accessibility tree. */
.transcript {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.lede {
  max-width: 44rem;
  margin-top: 14px;
  color: var(--ci-ink-2);
  font-size: 1.1rem;
}

/* Light glass cards, as the portal draws them in light mode. */
.rules__list,
.tiers {
  list-style: none;
  margin: 34px 0 0;
  padding: 0;
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.rules__list li,
.tier {
  padding: 24px;
  border-radius: var(--ci-r-panel);
  background: linear-gradient(160deg, #ffffff 0%, #f7f9fb 100%);
  box-shadow:
    inset 0 0 0 1px rgba(20, 23, 28, 0.08),
    inset 0 1px 0 #ffffff,
    0 18px 36px -24px rgba(20, 23, 28, 0.35);
}
.rules__list h3,
.tier h3 {
  font-size: 1.12rem;
  letter-spacing: -0.01em;
}
.rules__list p {
  margin-top: 10px;
  color: var(--ci-ink-2);
  font-size: 0.98rem;
}
.tier {
  display: flex;
  flex-direction: column;
}
.tier--lit {
  box-shadow:
    inset 0 0 0 2px var(--ci-green),
    0 18px 36px -20px rgba(53, 199, 122, 0.45);
}
.price {
  margin-top: 14px;
  color: var(--ci-ink-2);
}
.price span {
  display: block;
  font-size: 2.6rem;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: var(--ci-ink);
  font-variant-numeric: tabular-nums;
}
.tier ul {
  list-style: none;
  margin: 18px 0 24px;
  padding: 0;
  flex: 1;
  color: var(--ci-ink-2);
  font-size: 0.96rem;
}
.tier li {
  position: relative;
  padding-left: 22px;
}
.tier li + li {
  margin-top: 8px;
}
.tier li::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0.5em;
  width: 9px;
  height: 5px;
  border-left: 2px solid var(--ci-green-ink);
  border-bottom: 2px solid var(--ci-green-ink);
  transform: rotate(-45deg);
}
.tier b {
  color: var(--ci-ink);
}
.fine {
  margin-top: 22px;
  max-width: 48rem;
  font-size: 0.88rem;
  color: var(--ci-ink-3);
}

.close {
  background: var(--ci-graphite);
  color: var(--ci-on-graphite);
  padding: var(--section-y) 0;
  text-align: center;
}
.close__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.close__logo {
  width: min(260px, 60vw);
  height: auto;
}
.close h2 {
  margin-top: 26px;
  max-width: 20ch;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
}
.close .actions {
  justify-content: center;
}

.ci-footer {
  background: var(--ci-graphite-canvas);
  color: var(--ci-on-graphite-3);
  font-size: 14px;
  padding: 28px 0;
}
.ci-footer__inner {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 28px;
  justify-content: space-between;
}
.ci-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.ci-footer a {
  color: var(--ci-on-graphite-2);
  text-decoration: none;
}
.ci-footer a:hover {
  color: var(--ci-on-graphite);
}
/* The company's registration, which a limited company's website must show. */
.ci-footer__legal {
  flex-basis: 100%;
  margin: 0;
  font-size: 12px;
}

/* ================================================================ NO SCRIPT / REDUCED
 * Without script the stage is a still of the hero: the plate, the app's unit
 * and the headline. The transcript, for screen readers, carries the rest. */
.no-js .scene {
  width: max(100%, 100vh * 4096 / 2323);
  height: auto;
  aspect-ratio: 4096 / 2323;
}
.no-js .phone-dock,
.no-js .rail,
.no-js .scroll-cue {
  display: none;
}