* {
  box-sizing: border-box;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 12px;
  background: var(--mint);
  color: var(--bg);
  padding: 0.7rem 1.1rem;
  z-index: 200;
  text-decoration: none;
  font-weight: 700;
  border-radius: 0 0 10px 10px;
  transition: top 0.18s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  top: 0;
  outline: 2px solid var(--sky);
  outline-offset: 2px;
}

html,
body {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* Every anchor destination has to clear the sticky topbar, and one
     declaration on the scroll container does it for every id in the document —
     including the ones nobody remembered to list. `scroll-margin-top` on the
     targets themselves is the other way to spell this, and setting both does
     not pick one: the two ADD, which is why anchors used to land 208px down
     for a 78px bar. The value is a token because the topbar is shorter on a
     phone and shorter again on a phone held sideways — see responsive.css. */
  scroll-padding-top: var(--anchor-offset);
  scroll-snap-type: y proximity;
}

body {
  background:
    radial-gradient(1200px 620px at 10% -5%, rgb(from var(--sky) r g b / 0.2), transparent 60%),
    radial-gradient(1000px 560px at 86% 0%, rgb(from var(--mint) r g b / 0.18), transparent 62%),
    linear-gradient(180deg, #041326, #031427);
  color: var(--ink);
  font-family: "Plus Jakarta Sans", sans-serif;
  line-height: 1.5;
  position: relative;
  min-height: 100vh;
  overflow-x: hidden;
}

.ambient-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  /* Written by ambient.js on pointer movement, read by the layers below. Scoped
     here so a write invalidates this subtree and not the whole document. */
  --motion-x: 0;
  --motion-y: 0;
}

.ambient-bg::before,
.ambient-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ambient-bg::before {
  background:
    radial-gradient(92% 34% at 50% 50%, rgba(11, 45, 69, 0.16), transparent 76%),
    radial-gradient(84% 28% at 50% 56%, rgba(7, 35, 56, 0.13), transparent 76%),
    radial-gradient(120% 44% at 50% 60%, rgba(5, 27, 45, 0.1), transparent 80%),
    radial-gradient(140% 18% at 50% 53%, rgba(6, 32, 50, 0.12), transparent 74%);
  filter: blur(56px);
  opacity: 0.62;
}

.ambient-bg::after {
  background:
    radial-gradient(138% 48% at 50% 50%, rgba(8, 43, 66, 0.08), transparent 74%),
    radial-gradient(104% 38% at 50% 58%, rgba(6, 31, 49, 0.08), transparent 78%),
    radial-gradient(160% 16% at 50% 54%, rgba(5, 27, 43, 0.08), transparent 76%);
  filter: blur(30px);
  opacity: 0.42;
}

.ambient-lite .ambient-bg::before {
  filter: blur(36px);
  opacity: 0.62;
}

.ambient-lite .ambient-bg::after {
  filter: blur(18px);
  opacity: 0.46;
}

.ambient-off .ambient-bg {
  display: none;
}

.ambient-stars,
.ambient-network,
.ambient-wave,
.ambient-graph,
.ambient-glow {
  position: absolute;
  inset: -10%;
}

.ambient-stars {
  opacity: 0.65;
  background-image:
    radial-gradient(circle at 8% 18%, rgba(120, 210, 255, 0.95) 0 1px, transparent 2px),
    radial-gradient(circle at 12% 38%, rgba(90, 209, 255, 0.7) 0 1px, transparent 2px),
    radial-gradient(circle at 18% 72%, rgba(78, 190, 255, 0.8) 0 1.4px, transparent 2.8px),
    radial-gradient(circle at 22% 58%, rgba(116, 232, 255, 0.8) 0 1px, transparent 2.2px),
    radial-gradient(circle at 28% 32%, rgba(108, 224, 255, 0.78) 0 1px, transparent 2px),
    radial-gradient(circle at 42% 14%, rgba(85, 188, 255, 0.72) 0 1.2px, transparent 2.6px),
    radial-gradient(circle at 46% 44%, rgba(112, 218, 255, 0.75) 0 1.1px, transparent 2.3px),
    radial-gradient(circle at 56% 56%, rgba(136, 236, 255, 0.76) 0 1px, transparent 2px),
    radial-gradient(circle at 66% 24%, rgba(76, 176, 255, 0.9) 0 1.2px, transparent 2.8px),
    radial-gradient(circle at 68% 80%, rgba(84, 214, 255, 0.76) 0 1px, transparent 2.2px),
    radial-gradient(circle at 74% 68%, rgba(81, 224, 233, 0.8) 0 1.4px, transparent 2.8px),
    radial-gradient(circle at 84% 36%, rgba(104, 214, 255, 0.76) 0 1px, transparent 2px),
    radial-gradient(circle at 92% 18%, rgba(70, 171, 255, 0.88) 0 1.3px, transparent 2.6px),
    radial-gradient(circle at 14% 88%, rgba(90, 198, 255, 0.85) 0 1.2px, transparent 2.6px),
    radial-gradient(circle at 36% 82%, rgba(82, 230, 239, 0.85) 0 1.4px, transparent 2.8px),
    radial-gradient(circle at 58% 88%, rgba(77, 182, 255, 0.8) 0 1.1px, transparent 2.4px),
    radial-gradient(circle at 82% 86%, rgba(91, 216, 255, 0.76) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 62%, rgba(122, 239, 255, 0.72) 0 1.1px, transparent 2.4px);
  filter: blur(0.2px);
  transform: translate3d(calc(var(--motion-x) * -18px), calc(var(--motion-y) * -10px), 0);
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.82) 10%,
    rgba(0, 0, 0, 1) 26%,
    rgba(0, 0, 0, 1) 74%,
    rgba(0, 0, 0, 0.82) 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.82) 10%,
    rgba(0, 0, 0, 1) 26%,
    rgba(0, 0, 0, 1) 74%,
    rgba(0, 0, 0, 0.82) 90%,
    transparent 100%
  );
}

.ambient-network,
.ambient-graph {
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.74) 14%,
    rgba(0, 0, 0, 0.96) 28%,
    rgba(0, 0, 0, 1) 50%,
    rgba(0, 0, 0, 0.96) 72%,
    rgba(0, 0, 0, 0.74) 86%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.74) 14%,
    rgba(0, 0, 0, 0.96) 28%,
    rgba(0, 0, 0, 1) 50%,
    rgba(0, 0, 0, 0.96) 72%,
    rgba(0, 0, 0, 0.74) 86%,
    transparent 100%
  );
}

.ambient-network {
  opacity: 0.16;
  mix-blend-mode: screen;
}

/* The edge and node values below are the time-average of what the deleted rAF
   loop was actually painting, not the values this stylesheet used to declare —
   the loop overrode both with inline styles on every frame, so the declared ones
   had not been on screen in a long time. Sampled off the live page before the
   migration: node opacity averaged 0.56 (twinkling 0.32-0.72), and an edge
   averaged 0.12 opacity against a 0.12-0.18 alpha stroke. An edge is dimmer here
   than that product suggests because the animation faded edges in and out, so
   only ever a third of them were visible at once, where a static drawing shows
   all 34 together. */
.ambient-network line {
  stroke: rgba(78, 226, 196, 0.07);
  stroke-width: 0.8;
  stroke-linecap: round;
}

.ambient-network circle {
  fill: rgba(168, 255, 233, 0.88);
  stroke: rgba(7, 24, 34, 0.82);
  stroke-width: 1.1;
  opacity: 0.55;
  filter: drop-shadow(0 0 6px rgba(55, 223, 184, 0.24));
}

.ambient-lite .ambient-network {
  opacity: 0.2;
}

.ambient-lite .ambient-network circle {
  filter: none;
}

.ambient-network-b {
  opacity: 0.14;
}

.ambient-graph {
  left: -8%;
  width: 116%;
  mix-blend-mode: screen;
}

.ambient-graph .graph-glow {
  fill: none;
  stroke: rgb(from var(--mint) r g b / 0.18);
  stroke-width: 16;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: blur(8px);
}

.ambient-graph .graph-line {
  fill: none;
  stroke: rgba(108, 248, 231, 0.9);
  stroke-width: 3.25;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 0 10px rgb(from var(--mint) r g b / 0.28));
}

.ambient-graph .graph-fill {
  fill: rgb(from var(--mint) r g b / 0.06);
}

.ambient-lite .ambient-graph .graph-glow {
  display: none;
}

.ambient-lite .ambient-graph .graph-line {
  filter: none;
  stroke-width: 2.35;
}

.ambient-lite .ambient-graph .graph-fill {
  fill: rgb(from var(--mint) r g b / 0.03);
}

/* 0.28 and 0.21, not the 0.18 and 0.14 declared before: the rAF loop set an
   inline opacity on both graphs every frame, so those are the values that have
   actually been on screen. Restoring the stylesheet values would have dimmed
   the curves by a third as a side effect of deleting the loop. */
.ambient-graph-a {
  top: 9%;
  height: 22rem;
  opacity: 0.28;
}

.ambient-graph-b {
  top: 53%;
  height: 16rem;
  opacity: 0.21;
}

.ambient-wave {
  left: -14%;
  right: -14%;
  inset: auto;
  height: 22rem;
  border-radius: 999px;
  filter: blur(12px);
  opacity: 0.2;
  mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.62) 16%,
    rgba(0, 0, 0, 0.9) 34%,
    rgba(0, 0, 0, 1) 52%,
    rgba(0, 0, 0, 0.9) 74%,
    rgba(0, 0, 0, 0.62) 90%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    transparent 0%,
    rgba(0, 0, 0, 0.62) 16%,
    rgba(0, 0, 0, 0.9) 34%,
    rgba(0, 0, 0, 1) 52%,
    rgba(0, 0, 0, 0.9) 74%,
    rgba(0, 0, 0, 0.62) 90%,
    transparent 100%
  );
}

.ambient-wave-a {
  top: 9%;
  background:
    radial-gradient(72% 84% at 10% 52%, transparent 57%, rgb(from var(--mint) r g b / 0.52) 59%, transparent 63%),
    radial-gradient(78% 88% at 48% 42%, transparent 58%, rgb(from var(--sky) r g b / 0.42) 60%, transparent 64%),
    radial-gradient(70% 82% at 86% 48%, transparent 57%, rgb(from var(--mint) r g b / 0.4) 59%, transparent 63%);
  transform: translate3d(calc(var(--motion-x) * 10px), calc(var(--motion-y) * 6px), 0);
}

.ambient-wave-b {
  top: 34%;
  height: 38rem;
  opacity: 0.2;
  background:
    radial-gradient(76% 86% at 22% 48%, transparent 59%, rgb(from var(--sky) r g b / 0.32) 61%, transparent 65%),
    radial-gradient(86% 92% at 76% 54%, transparent 59%, rgb(from var(--mint) r g b / 0.3) 61%, transparent 65%);
  transform: translate3d(calc(var(--motion-x) * -8px), calc(var(--motion-y) * 5px), 0);
}

.ambient-glow {
  border-radius: 999px;
  filter: blur(86px);
  opacity: 0.08;
}

.ambient-lite .ambient-glow {
  display: none;
}

.ambient-glow-a {
  width: 26rem;
  height: 26rem;
  top: -8rem;
  left: -8rem;
  background: rgb(from var(--sky) r g b / 0.55);
  transform: translate3d(calc(var(--motion-x) * -12px), calc(var(--motion-y) * -8px), 0);
}

.ambient-glow-b {
  width: 30rem;
  height: 30rem;
  right: -10rem;
  bottom: -12rem;
  background: rgb(from var(--mint) r g b / 0.48);
  transform: translate3d(calc(var(--motion-x) * 12px), calc(var(--motion-y) * 8px), 0);
}

/* Scroll parallax for the ambient layers.
 *
 * `scroll(root block)` is the document scroller's own progress, 0 at the top and
 * 1 at the bottom — the exact quantity the deleted JS recomputed on every scroll
 * event and wrote to `:root` as `--scroll-progress`. Expressed as a timeline the
 * browser advances it itself, with no scroll listener and no per-frame style
 * invalidation of the document.
 *
 * Parallax animates `translate`, not `transform`, and that is deliberate:
 * `transform` above already carries the pointer parallax off `--motion-x/y`.
 * They are separate properties applied in sequence, so each effect keeps its own
 * declaration and neither has to know the other's numbers.
 *
 * The @supports gate is load-bearing rather than decorative. A browser that does
 * not understand `animation-timeline` drops that declaration but still honours
 * the `animation` shorthand — whose duration then defaults to 0s, and with
 * `both` fill that would pin every layer at its END offset for good. Gated, such
 * a browser gets a still background, which is the intended fallback.
 *
 * Support is Chrome/Edge 115+, Firefox 144+ and Safari 26+, so the ungated path
 * is now the older-browser path rather than the common one. */
@supports (animation-timeline: scroll()) {
  @keyframes ambient-parallax-stars {
    to {
      translate: 0 -42px;
    }
  }

  @keyframes ambient-parallax-network-a {
    to {
      translate: 0 -22px;
    }
  }

  @keyframes ambient-parallax-network-b {
    to {
      translate: 0 -12px;
    }
  }

  @keyframes ambient-parallax-graph-a {
    to {
      translate: 0 -40px;
    }
  }

  @keyframes ambient-parallax-graph-b {
    to {
      translate: 0 -18px;
    }
  }

  @keyframes ambient-parallax-wave-a {
    to {
      translate: 0 -64px;
    }
  }

  @keyframes ambient-parallax-wave-b {
    to {
      translate: 0 -38px;
    }
  }

  @keyframes ambient-parallax-glow-b {
    to {
      translate: 0 -24px;
    }
  }

  .ambient-stars,
  .ambient-network-a,
  .ambient-network-b,
  .ambient-graph-a,
  .ambient-graph-b,
  .ambient-wave-a,
  .ambient-wave-b,
  .ambient-glow-b {
    /* Longhands, not the `animation` shorthand: the shorthand resets
       `animation-timeline` to `auto`, and it takes a <time> for duration where
       what a progress-based timeline wants is the initial `auto` — the value
       that maps one iteration onto the whole scroll range. */
    animation-timing-function: linear;
    animation-fill-mode: both;
    animation-timeline: scroll(root block);
  }

  .ambient-stars {
    animation-name: ambient-parallax-stars;
  }

  .ambient-network-a {
    animation-name: ambient-parallax-network-a;
  }

  .ambient-network-b {
    animation-name: ambient-parallax-network-b;
  }

  .ambient-graph-a {
    animation-name: ambient-parallax-graph-a;
  }

  .ambient-graph-b {
    animation-name: ambient-parallax-graph-b;
  }

  .ambient-wave-a {
    animation-name: ambient-parallax-wave-a;
  }

  .ambient-wave-b {
    animation-name: ambient-parallax-wave-b;
  }

  /* .ambient-glow-a is intentionally absent: it never had a scroll component,
     only the pointer one it still carries on `transform`. */
  .ambient-glow-b {
    animation-name: ambient-parallax-glow-b;
  }
}

.shell {
  width: min(1180px, calc(100% - 2rem));
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  backdrop-filter: blur(12px);
  background: rgb(from var(--bg) r g b / 0.82);
  border-bottom: 1px solid rgba(29, 71, 113, 0.78);
}

.ambient-lite .topbar {
  backdrop-filter: blur(8px);
}

.topbar-inner {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.topbar-actions {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.brand {
  display: grid;
  text-decoration: none;
  color: inherit;
}

.brand-mark {
  font-family: "Outfit", sans-serif;
  font-size: 1.45rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}

.brand-sub {
  margin-top: 0.15rem;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--ink-soft);
}

.topnav {
  display: flex;
  gap: 1.4rem;
}

.topnav a {
  position: relative;
  text-decoration: none;
  color: var(--ink-soft);
  font-weight: 600;
  padding: 0.4rem 0;
  transition: color 0.18s ease;
}

.topnav a:hover {
  color: var(--mint);
}

.topnav a[aria-current="location"] {
  color: var(--ink);
}

.topnav a[aria-current="location"]::after {
  content: "";
  position: absolute;
  inset: auto 0 -4px 0;
  height: 2px;
  background: var(--mint);
  border-radius: var(--radius-pill);
  box-shadow: 0 0 12px rgb(from var(--mint) r g b / 0.65);
  view-transition-name: nav-active-indicator;
}

::view-transition-old(nav-active-indicator),
::view-transition-new(nav-active-indicator) {
  animation-duration: 0.32s;
  animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
}

.locale-switch {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.2rem;
  border-radius: 999px;
  border: 1px solid rgb(from var(--sky) r g b / 0.22);
  background: rgba(9, 27, 48, 0.62);
}

.locale-link {
  min-width: 2.2rem;
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  text-align: center;
  text-decoration: none;
  color: var(--ink-soft);
  font-family: "Outfit", sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.locale-link:hover {
  color: var(--ink);
}

.locale-link.is-active {
  background: rgb(from var(--mint) r g b / 0.16);
  color: var(--mint);
  cursor: default;
}

.page-flow {
  padding: clamp(1.2rem, 2.2vw, 1.8rem) 0 2.1rem;
  display: grid;
  gap: 1.35rem;
}

.story-stage {
  min-height: calc(100svh - 104px);
  display: grid;
  align-content: center;
  gap: 1rem;
  scroll-snap-align: center;
}

.story-stage-closing {
  align-content: start;
}

.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: 1rem;
  align-items: stretch;
}

.hero-peek-card,
.companion-strip,
.problem-card,
.solution-card,
.moments,
.faq {
  background: var(--bg-grad-card);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);
}

.hero-peek-card {
  position: relative;
  margin: 0;
  min-height: clamp(12rem, 25vw, 18rem);
  overflow: hidden;
}

.hero-peek-card img {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: block;
  object-fit: cover;
  object-position: center 58%;
}

.hero-peek-card figcaption {
  position: absolute;
  inset: auto 1rem 1rem 1rem;
  display: grid;
  gap: 0.34rem;
  padding: 1rem 1.05rem;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgb(from var(--bg) r g b / 0.2), rgb(from var(--bg) r g b / 0.84)),
    linear-gradient(135deg, rgb(from var(--bg) r g b / 0.88), rgb(from var(--bg) r g b / 0.56));
  border: 1px solid rgba(116, 212, 255, 0.2);
  backdrop-filter: blur(6px);
}

.hero-peek-card figcaption strong {
  font-family: "Outfit", sans-serif;
  font-size: clamp(1.2rem, 2.4vw, 1.9rem);
  line-height: 1.02;
}

.hero-peek-card figcaption span:last-child {
  color: #d7eefc;
  font-size: 0.95rem;
  line-height: 1.42;
}

.hero-peek-badge {
  display: inline-flex;
  width: fit-content;
  border-radius: 999px;
  padding: 0.34rem 0.7rem;
  color: var(--mint);
  font-family: "Outfit", sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgb(from var(--mint) r g b / 0.14);
  border: 1px solid rgb(from var(--mint) r g b / 0.34);
}

.companion-strip {
  padding: 0.95rem 1rem 1rem;
  display: grid;
  gap: 0.72rem;
  border: 1px solid rgb(from var(--mint) r g b / 0.2);
  background:
    radial-gradient(circle at 100% 0%, rgb(from var(--mint) r g b / 0.12), transparent 36%),
    var(--bg-grad-card-strong);
}

.companion-kicker {
  margin: 0;
  color: var(--mint);
  font-family: "Outfit", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.companion-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

.companion-point {
  display: grid;
  gap: 0.3rem;
  padding: 0.85rem 0.9rem;
  border-radius: 16px;
  border: 1px solid rgb(from var(--sky) r g b / 0.2);
  background: linear-gradient(180deg, rgba(15, 40, 68, 0.62), rgba(9, 28, 49, 0.58));
}

.companion-point strong {
  font-family: "Outfit", sans-serif;
  font-size: 1rem;
  line-height: 1.1;
}

.companion-point span {
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.38;
}

.problem-card,
.solution-card {
  padding: 1.4rem 1.35rem 1.45rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.eyebrow {
  margin: 0;
  display: inline-flex;
  border-radius: 999px;
  padding: 0.34rem 0.74rem;
  font-family: "Outfit", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mint);
  border: 1px solid rgb(from var(--mint) r g b / 0.45);
  background: rgb(from var(--mint) r g b / 0.12);
}

h1,
h2,
h3,
summary {
  font-family: "Outfit", sans-serif;
  letter-spacing: -0.02em;
}

h1 {
  margin: 0.82rem 0 0;
  font-size: clamp(1.9rem, 3.4vw, 3.35rem);
  line-height: 1.04;
}

h2 {
  margin: 0.72rem 0 0;
  font-size: clamp(1.6rem, 2.6vw, 2.55rem);
  line-height: 1.08;
}

.pain-list {
  margin: 1rem 0 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.48rem;
  color: var(--ink-soft);
}

.problem-note {
  margin: auto 0 0;
  font-weight: 700;
  color: var(--sky);
}

.solution-card > p:not(.eyebrow) {
  margin: 0.7rem 0 0;
  color: var(--ink-soft);
}

.hero-signal-row {
  margin: 0.9rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.hero-microcopy {
  margin: 0.8rem 0 0;
  color: #dff6ff;
  font-size: 0.94rem;
  line-height: 1.45;
}

.hero-signal {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.42rem 0.72rem;
  border: 1px solid rgb(from var(--sky) r g b / 0.24);
  background: rgba(8, 29, 51, 0.64);
  color: #dff6ff;
  font-size: 0.84rem;
  font-weight: 700;
  line-height: 1.2;
  box-shadow: inset 0 0 0 1px rgb(from var(--mint) r g b / 0.04);
}

.solution-glance {
  margin: 1rem 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.8rem;
  align-items: stretch;
}

.solution-screen {
  margin: 0;
  display: flex;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgb(from var(--sky) r g b / 0.38);
  background: linear-gradient(180deg, rgb(from var(--paper-elev) r g b / 0.82), rgb(from var(--paper) r g b / 0.82));
  box-shadow: inset 0 0 0 1px rgb(from var(--mint) r g b / 0.08);
}

.solution-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.solution-points {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  gap: 0.55rem;
}

.solution-point {
  border: 1px solid rgb(from var(--sky) r g b / 0.28);
  border-radius: 14px;
  padding: 0.62rem 0.72rem;
  background: linear-gradient(95deg, rgb(from var(--sky) r g b / 0.1), rgb(from var(--mint) r g b / 0.08));
}

.solution-label {
  display: inline-block;
  color: var(--mint);
  font-family: "Outfit", sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.solution-point p {
  margin: 0.28rem 0 0;
  color: var(--ink-soft);
  font-size: 0.87rem;
  line-height: 1.35;
}

.btn {
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.78rem 1.25rem;
  font-family: "Outfit", sans-serif;
  font-weight: 700;
  letter-spacing: 0.01em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.btn:hover {
  transform: translateY(-1px);
}

.btn-primary {
  margin-top: 1rem;
  color: #032722;
  background: linear-gradient(130deg, var(--mint), #80ffe5);
  box-shadow: 0 12px 24px rgb(from var(--mint) r g b / 0.34);
}

.btn-secondary {
  margin-top: 0.72rem;
  color: var(--ink);
  border-color: rgb(from var(--sky) r g b / 0.36);
  background: var(--bg-grad-elev);
  box-shadow: inset 0 0 0 1px rgb(from var(--sky) r g b / 0.1);
}

.btn-linkish {
  box-shadow: none;
  background: transparent;
  border-color: transparent;
  color: var(--sky);
  padding-inline: 0;
  justify-content: flex-start;
}

.btn-linkish:hover {
  color: var(--mint);
}

.solution-card > .btn-primary {
  margin-top: auto;
  align-self: flex-start;
}

.cta-stack {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.58rem;
}

.cta-stack .btn {
  margin-top: 0;
}

.helper-link {
  color: var(--sky);
  font-weight: 700;
  text-decoration: none;
  line-height: 1.3;
}

.helper-link:hover,
.helper-link:focus-visible {
  color: var(--mint);
  outline: none;
}

.btn-sm {
  padding: 0.56rem 1rem;
  background: var(--sky);
  color: var(--bg);
  white-space: nowrap;
}

.btn.full {
  width: 100%;
}

.trust-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.8rem;
}

.trust-card {
  border: 1px solid rgb(from var(--sky) r g b / 0.24);
  border-radius: 18px;
  padding: 1rem 1rem 1.05rem;
  background: linear-gradient(180deg, rgb(from var(--paper) r g b / 0.78), rgb(from var(--bg-deep) r g b / 0.78));
  box-shadow: var(--shadow-lg);
}

.trust-label {
  margin: 0;
  color: var(--mint);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.trust-card h3 {
  margin: 0.35rem 0 0;
  font-size: 1.18rem;
  line-height: 1.1;
}

.trust-card p:last-child {
  margin: 0.5rem 0 0;
  color: var(--ink-soft);
}

.origin-story-card {
  border: 1px solid rgb(from var(--sky) r g b / 0.24);
  border-radius: 22px;
  padding: 1.05rem 1.1rem 1.1rem;
  background:
    radial-gradient(circle at 0% 0%, rgb(from var(--sky) r g b / 0.1), transparent 26%),
    linear-gradient(180deg, rgb(from var(--paper) r g b / 0.92), rgba(7, 25, 44, 0.94));
  box-shadow: var(--shadow-lg);
}

.origin-story-label {
  margin: 0;
  color: var(--mint);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.origin-story-card h3 {
  margin: 0.38rem 0 0;
  font-size: clamp(1.4rem, 2.3vw, 2rem);
  line-height: 1.08;
}

.origin-story-card p {
  margin: 0.66rem 0 0;
  color: var(--ink-soft);
  font-size: 0.98rem;
  line-height: 1.55;
  max-width: 54rem;
}

.section-intro {
  margin: 0.6rem 0 0;
  color: var(--ink-soft);
  max-width: 58rem;
}

.phone-app {
  padding: 1.3rem 1.2rem 1.2rem;
  background: var(--bg-grad-card);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);
}

.ecosystem-rows {
  margin-top: 1.1rem;
  display: grid;
  gap: 0.9rem;
}

.ecosystem-row {
  border: 1px solid rgb(from var(--sky) r g b / 0.2);
  border-radius: 20px;
  padding: 1rem;
  background: linear-gradient(180deg, rgb(from var(--paper-elev) r g b / 0.3), rgba(8, 28, 50, 0.24));
}

.ecosystem-row-head {
  margin-bottom: 0.72rem;
}

.phone-app-label {
  margin: 0;
  color: var(--mint);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ecosystem-row-head h3 {
  margin: 0.3rem 0 0;
  font-size: 1.2rem;
  line-height: 1.08;
}

.ecosystem-grid {
  container-type: inline-size;
  container-name: card-grid;
  display: grid;
  gap: 0.75rem;
}

.ecosystem-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.ecosystem-grid-tall {
  align-items: stretch;
}

.ecosystem-grid-5 {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.ecosystem-card {
  margin: 0;
  border: 1px solid rgb(from var(--sky) r g b / 0.2);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, rgb(from var(--paper-elev) r g b / 0.44), rgba(8, 28, 50, 0.34));
}

.ecosystem-card img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  display: block;
  object-fit: cover;
  background: #081d34;
}

.ecosystem-card-tall img {
  aspect-ratio: 9 / 16;
  object-fit: contain;
  padding: 0.55rem;
  background:
    radial-gradient(circle at top, rgba(64, 109, 171, 0.28), rgba(8, 29, 52, 0.98) 72%),
    #081d34;
}

.ecosystem-card figcaption {
  padding: 0.6rem 0.72rem 0.68rem;
  color: #dff6ff;
  font-family: "Outfit", sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.1;
}

.moments {
  padding: 1.3rem 1.2rem 1.2rem;
}

.moments header h2 {
  margin-top: 0.5rem;
}

.moments-grid {
  container-type: inline-size;
  container-name: card-grid;
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.moments-grid article {
  display: grid;
  grid-template-rows: auto auto 1fr;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-grad-elev);
}

.problem-card,
.solution-card,
.companion-strip,
.solution-point,
.moments-grid article,
.hospital-story,
.hospital-card,
.ecosystem-row,
.ecosystem-card,
.hero-peek-card,
.waitlist-copy,
.waitlist-form,
details {
  transition:
    transform 0.28s ease,
    box-shadow 0.28s ease,
    border-color 0.28s ease,
    background-color 0.28s ease;
}

.problem-card:hover,
.solution-card:hover,
.companion-strip:hover,
.solution-point:hover,
.moments-grid article:hover,
.hospital-story:hover,
.hospital-card:hover,
.ecosystem-row:hover,
.ecosystem-card:hover,
.hero-peek-card:hover,
.waitlist-copy:hover,
.waitlist-form:hover,
details:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 56px rgba(0, 10, 24, 0.48);
  border-color: rgb(from var(--sky) r g b / 0.54);
}

.moments-grid img {
  width: calc(100% + 4px);
  aspect-ratio: 16 / 10;
  height: 100%;
  margin-left: -2px;
  display: block;
  object-fit: cover;
  object-position: center center;
  background: #081d34;
}

.moments-grid h3,
.moments-grid p {
  margin-left: 0.82rem;
  margin-right: 0.82rem;
}

.moments-grid h3 {
  margin-top: 0.66rem;
  margin-bottom: 0;
  font-size: 1.28rem;
  line-height: 1.08;
}

.moments-grid p {
  margin-top: 0.7rem;
  margin-bottom: 0.82rem;
  color: var(--ink-soft);
}

.hospital-story {
  padding: 1.3rem 1.2rem 1.2rem;
  background: var(--bg-grad-card);
  border: 1px solid var(--line);
  border-radius: 26px;
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);
}

.hospital-grid {
  container-type: inline-size;
  container-name: card-grid;
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.hospital-card {
  display: grid;
  grid-template-rows: auto auto 1fr;
  border: 1px solid rgb(from var(--sky) r g b / 0.22);
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg-grad-elev);
}

.hospital-card img {
  width: calc(100% + 4px);
  aspect-ratio: 16 / 10;
  height: 100%;
  margin-left: -2px;
  display: block;
  object-fit: cover;
  object-position: center center;
  background: #081d34;
}

.hospital-card h3,
.hospital-card p {
  margin-left: 0.82rem;
  margin-right: 0.82rem;
}

.hospital-card h3 {
  margin-top: 0.66rem;
  margin-bottom: 0;
  font-size: 1.28rem;
  line-height: 1.08;
}

.hospital-card p {
  margin-top: 0.7rem;
  margin-bottom: 0.82rem;
  color: var(--ink-soft);
}

.waitlist {
  padding: 0;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 1rem;
  align-items: stretch;
}

.waitlist-priority {
  position: relative;
}

.waitlist-copy {
  height: 100%;
  padding: 1.22rem;
  display: flex;
  flex-direction: column;
  border: 1px solid rgb(from var(--sky) r g b / 0.22);
  border-radius: 26px;
  background: linear-gradient(180deg, rgb(from var(--paper) r g b / 0.92), rgb(from var(--bg-deep) r g b / 0.92));
  box-shadow: var(--shadow-lg);
  backdrop-filter: blur(10px);
}

.waitlist-copy p {
  color: var(--ink-soft);
  margin-top: 0.65rem;
}

.waitlist-benefits {
  margin-top: 1rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.65rem;
}

.benefit-card {
  border: 1px solid rgb(from var(--sky) r g b / 0.24);
  border-radius: 14px;
  padding: 0.8rem 0.85rem;
  background: linear-gradient(180deg, rgb(from var(--paper-elev) r g b / 0.46), rgba(8, 28, 50, 0.4));
}

.benefit-card strong,
.lead-magnet h3 {
  font-family: "Outfit", sans-serif;
}

.benefit-card strong {
  display: block;
  font-size: 1rem;
  color: var(--ink);
}

.benefit-card p {
  margin: 0.45rem 0 0;
  font-size: 0.92rem;
  line-height: 1.4;
}

.lead-magnet {
  margin-top: 0.95rem;
  border: 1px solid rgb(from var(--mint) r g b / 0.22);
  border-radius: 16px;
  padding: 0.95rem 1rem;
  background:
    radial-gradient(circle at 100% 0%, rgb(from var(--mint) r g b / 0.12), transparent 38%),
    linear-gradient(180deg, rgba(9, 32, 56, 0.82), rgba(6, 24, 43, 0.88));
}

.lead-magnet-label {
  margin: 0;
  color: var(--mint);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lead-magnet h3 {
  margin: 0.34rem 0 0;
  font-size: 1.22rem;
  line-height: 1.12;
}

.lead-magnet p:last-child {
  margin-bottom: 0;
}

.waitlist-visual {
  margin: 0.72rem 0 0;
  border: 1px solid rgb(from var(--sky) r g b / 0.24);
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, rgba(12, 35, 60, 0.74), rgba(8, 28, 50, 0.66));
  box-shadow: inset 0 0 0 1px rgb(from var(--mint) r g b / 0.04);
}

.waitlist-visual img {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 16 / 6.5;
  object-fit: cover;
  object-position: center 54%;
}

.waitlist-visual figcaption {
  padding: 0.62rem 0.9rem 0.72rem;
  color: var(--ink-soft);
  font-size: 0.85rem;
  line-height: 1.32;
}

.waitlist-form {
  border: 1px solid rgb(from var(--mint) r g b / 0.34);
  border-radius: 16px;
  padding: 0.9rem;
  background: linear-gradient(180deg, rgba(15, 40, 68, 0.92), rgba(9, 28, 49, 0.94));
  display: grid;
  height: 100%;
  align-content: start;
  gap: 0.5rem;
  box-shadow: 0 24px 56px rgba(0, 12, 28, 0.34);
}

.form-callout {
  margin-bottom: 0.25rem;
  border: 1px solid rgb(from var(--mint) r g b / 0.28);
  border-radius: 16px;
  padding: 0.95rem 1rem;
  background:
    radial-gradient(circle at 100% 0%, rgb(from var(--mint) r g b / 0.16), transparent 34%),
    linear-gradient(180deg, rgba(8, 29, 51, 0.98), rgba(6, 23, 41, 0.96));
}

.form-callout-kicker {
  margin: 0;
  color: var(--mint);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.form-callout h3 {
  margin: 0.35rem 0 0;
  font-size: 1.5rem;
  line-height: 1.06;
}

.form-callout-copy {
  margin: 0.5rem 0 0;
  color: var(--ink-soft);
  font-size: 0.95rem;
}

.form-callout-list {
  margin: 0.75rem 0 0;
  padding-left: 1rem;
  display: grid;
  gap: 0.26rem;
  color: #dff6ff;
  font-size: 0.92rem;
}

.submit-note {
  margin: 0.18rem 0 0.1rem;
  color: var(--ink-soft);
  font-size: 0.9rem;
  line-height: 1.4;
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: auto;
  padding-top: 0.8rem;
}

.btn-compact {
  margin-top: 0;
  min-width: 10.5rem;
  padding: 0.68rem 1.05rem;
  box-shadow: 0 10px 20px rgb(from var(--mint) r g b / 0.22);
}

.tester-inline-link {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sky);
  font: inherit;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.tester-inline-link:hover,
.tester-inline-link:focus-visible {
  color: var(--mint);
  outline: none;
}

.tester-panel {
  margin-top: 0.2rem;
  border: 1px solid rgb(from var(--sky) r g b / 0.24);
  border-radius: 14px;
  padding: 0.85rem;
  background: linear-gradient(180deg, rgba(8, 29, 51, 0.88), rgba(6, 23, 41, 0.88));
  display: grid;
  gap: 0.5rem;
}

/* `hidden` is only a `display: none` in the UA stylesheet, and ANY author
   `display` beats the UA origin no matter how specific — so the rule above has
   been quietly defeating `forms.js` setting `testerPanel.hidden`, and every
   visitor has been shown the tester fields whether or not they asked for them.
   On a phone that is 330px of the wrong form standing between the email field
   and the submit button. Restating the attribute here keeps the grid and gives
   the toggle back its effect. */
.tester-panel[hidden] {
  display: none;
}

/* A <select> is as wide as its widest <option> unless told otherwise, and
   "Osoba korzystająca z odczytów" wants 283px. Inside a grid whose items
   default to `min-width: auto` that floor propagates all the way up to
   `.page-flow`, whose single column then stretches every story stage on the
   page to 345px — clipping body copy on any viewport under 377px. */
.tester-panel select {
  min-width: 0;
}

.tester-panel-title {
  margin: 0 0 0.1rem;
  font-family: "Outfit", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
}

.tester-panel-copy {
  margin: 0.1rem 0 0;
  color: var(--ink-soft);
  font-size: 0.88rem;
  line-height: 1.42;
}

.waitlist-form label {
  font-size: 0.86rem;
  font-weight: 700;
  color: #b6d3ea;
}

.waitlist-form input,
.waitlist-form select {
  font: inherit;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.68rem 0.74rem;
  background: #081d34;
  color: var(--ink);
}

.waitlist-form input::placeholder {
  color: #87aac9;
}

.waitlist-form input:focus,
.waitlist-form select:focus {
  outline: 2px solid rgb(from var(--mint) r g b / 0.36);
  border-color: rgb(from var(--mint) r g b / 0.7);
}

.form-message {
  margin: 0.2rem 0 0;
  min-height: 1.18rem;
  color: var(--mint);
  font-size: 0.9rem;
}

.faq {
  padding: 1.2rem 1.2rem 0.84rem;
}

details {
  border-bottom: 1px solid var(--line);
  padding: 0.84rem 0;
}

details:last-child {
  border-bottom: 0;
}

summary {
  cursor: pointer;
  font-size: 1.17rem;
}

summary::marker {
  color: var(--peach);
}

details p {
  margin: 0.52rem 0 0;
  color: var(--ink-soft);
}

.footer {
  padding: 0.65rem 0 1.65rem;
}

.footer-inner {
  color: var(--ink-soft);
  font-size: 0.91rem;
  display: grid;
  gap: 0.24rem;
}

.footer-inner p {
  margin: 0;
}

.footer-inner a {
  color: var(--sky);
}

/* Mobile conversion bar.
   Below tablet portrait the topbar nav collapses, and on a single-page funnel
   that is fine: scrolling IS the navigation there. What is not fine is losing
   the one action the page exists for, so it gets a permanent home at the foot
   of the viewport. `js/mobile-cta.js` decides when it is on screen;
   responsive.css decides at which widths it exists at all.

   The declarations below ARE the no-JavaScript state: off-screen, transparent
   and `visibility: hidden` — which, unlike `opacity: 0`, also takes it out of
   the tab order and the accessibility tree. A blocked or broken module
   therefore leaves a bar that cannot sit on top of the waitlist submit button,
   the one failure that would make this component worse than no component. */
.mobile-cta {
  display: none;
  position: fixed;
  z-index: 40;
  left: max(0.75rem, env(safe-area-inset-left));
  right: max(0.75rem, env(safe-area-inset-right));
  bottom: calc(0.75rem + env(safe-area-inset-bottom));
  align-items: center;
  gap: 0.7rem;
  padding: 0.48rem 0.48rem 0.48rem 0.95rem;
  border: 1px solid rgb(from var(--mint) r g b / 0.34);
  border-radius: var(--radius-lg);
  /* Opaque rather than blurred on purpose: responsive.css already drops
     backdrop-filter from the topbar at phone widths, and this bar spends its
     life over photographs where a cheap blur reads as mud. */
  background: linear-gradient(180deg, rgba(10, 33, 60, 0.97), rgba(4, 20, 38, 0.98));
  box-shadow:
    0 18px 40px rgba(0, 8, 18, 0.55),
    inset 0 1px 0 rgb(from var(--mint) r g b / 0.12);
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, calc(100% + 1.5rem), 0);
  transition:
    transform 0.36s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.24s ease,
    visibility 0s linear 0.36s;
}

.mobile-cta.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition:
    transform 0.36s cubic-bezier(0.32, 0.72, 0, 1),
    opacity 0.24s ease,
    visibility 0s;
}

.mobile-cta-label {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  min-width: 0;
  color: var(--ink-soft);
  font-family: "Outfit", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  white-space: nowrap;
}

/* The single ornament on this bar. GlucoLantern's whole pitch is a glance at
   something that is already lit, so the bar carries a lit point rather than an
   icon of one. Static — a pulse here would compete with the button. */
.mobile-cta-label::before {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow:
    0 0 0 3px rgb(from var(--mint) r g b / 0.16),
    0 0 12px rgb(from var(--mint) r g b / 0.75);
}

/* Reuses .btn-primary's mint gradient — the page's "yes" colour — which also
   ranks it above the topbar's quieter sky-blue CTA without making it bigger. */
.mobile-cta-btn {
  margin-top: 0;
  margin-left: auto;
  min-height: 44px;
  padding: 0.6rem 1.1rem;
  white-space: nowrap;
  box-shadow: 0 10px 22px rgb(from var(--mint) r g b / 0.3);
}

/* The `will-change` below is not the layer-promotion hint it looks like, and
   removing it does not reclaim GPU memory. Measured in Chrome 131 over CDP
   (LayerTree + compositingReasons), three runs locally and three against a
   Pages preview: with the hint and without it the reveal set composites to the
   same 23 layers and the same ~113 MB of texture, because the `translate3d()`
   below already promotes every one of these elements and `backdrop-filter`
   promotes five of them again. Chrome's own compositing reasons say so —
   drop the hint and `Trivial3DTransform` is still there on 22 of the 23.

   What the hint does buy is raster stability across `scale(0.996)` -> `scale(1)`:
   without it Chrome re-rasters those layers mid-transition and the paint count
   over the reveal set goes from 56 to ~94 on the same scroll.

   Clearing it on `transitionend` instead gets the worst of both: the same
   113 MB, a paint count no better than dropping the hint outright, and under
   `prefers-reduced-motion` the blanket `transition: none` in responsive.css
   means the event never fires, so the hint would leak on exactly the devices
   the cleanup was meant to spare.

   The lever that would actually free memory is a 2D `translate()` — that drops
   the set to 7 layers / 76 MB — but it changes how the reveal composites and
   belongs in its own task, not in a tidy-up of this declaration. */
.reveal {
  opacity: 0;
  transform: translate3d(0, 14px, 0) scale(0.996);
  transition:
    opacity 0.58s cubic-bezier(0.22, 0.61, 0.36, 1),
    transform 0.76s cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform, opacity;
}

.reveal-left {
  transform: translate3d(-14px, 14px, 0) scale(0.996);
}

.reveal-right {
  transform: translate3d(14px, 14px, 0) scale(0.996);
}

.reveal-up {
  transform: translate3d(0, 16px, 0) scale(0.996);
}

.reveal-delay-1 {
  transition-delay: 90ms;
}

.reveal-delay-2 {
  transition-delay: 160ms;
}

.reveal.in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
}