/**
 * Platform growth landing pages — homepage-grade branding + motion.
 * Scoped to .pg-page. Reuses .ip-* / .fp-* tokens from inner-shared.
 */

.pg-page {
  --pg-brand: #9b0202;
  --pg-accent: var(--fp-red);
  --pg-accent-soft: #fff4f2;
  --pg-accent-glow: rgba(155, 0, 0, 0.14);
  /* Brighter accent for use on dark surfaces (e.g. the "What you can request" panel). */
  --pg-on-dark: #ff6b6b;
  /* Section rhythm, same as the homepage rails (96px top / 104px bottom). */
  --pg-sec-t: 96px;
  --pg-sec-b: 104px;
}

.pg-page--ig {
  --pg-accent: #dd2a7b;
  --pg-accent-soft: #fff5f9;
  --pg-accent-glow: rgba(221, 42, 123, 0.16);
  --pg-on-dark: #ff6fae;
  --pg-grad: linear-gradient(135deg, #f58529 0%, #dd2a7b 45%, #8134af 100%);
}

.pg-page--tt {
  --pg-accent: #111;
  --pg-accent-soft: #f4fffe;
  --pg-accent-glow: rgba(37, 244, 238, 0.22);
  --pg-on-dark: #25f4ee;
  --pg-grad: linear-gradient(135deg, #25f4ee 0%, #111 48%, #fe2c55 100%);
}

.pg-page--yt {
  --pg-accent: #ff0033;
  --pg-accent-soft: #fff5f6;
  --pg-accent-glow: rgba(255, 0, 51, 0.16);
  --pg-on-dark: #ff5470;
  --pg-grad: linear-gradient(145deg, #ff0033 0%, #c40028 100%);
}

.pg-page--fb {
  --pg-accent: #1877f2;
  --pg-accent-soft: #f3f8ff;
  --pg-accent-glow: rgba(24, 119, 242, 0.16);
  --pg-on-dark: #5b9cff;
  --pg-grad: linear-gradient(145deg, #4b91f7 0%, #1877f2 100%);
}

/* ── Reveal base (mirrors homepage fp-reveal) ── */
.pg-page .fp-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.pg-page .fp-reveal.is-inview {
  opacity: 1;
  transform: none;
}

.pg-page .fp-reveal.is-inview .pg-goal,
.pg-page .fp-reveal.is-inview .pg-video {
  opacity: 1;
  transform: none;
}

/* ── Hero ── */
.pg-hero {
  position: relative;
  overflow: visible;
  background:
    radial-gradient(ellipse 60% 50% at 85% 20%, var(--pg-accent-glow), transparent 70%),
    linear-gradient(180deg, var(--pg-accent-soft) 0%, #fff 72%);
}

.pg-hero__rail {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr);
  gap: 48px;
  align-items: center;
  padding-top: 72px;
  padding-bottom: 80px;
}

.pg-hero__copy .ip-actions {
  flex-wrap: wrap;
}

/* Hero secondary CTA: scroll to the explainer video and play it */
.pg-watch {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 4px 14px 4px 4px;
  margin: 0;
  font: inherit;
  text-align: left;
  color: var(--fp-ink);
  background: #fff;
  border: 1px solid #d5dae1;
  border-radius: 999px;
  box-shadow: 0 10px 28px rgba(20, 23, 31, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  cursor: pointer;
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.18s ease, background 0.18s ease;
}

/* 16:9 preview card above the pill on hover / focus */
.pg-watch__preview {
  position: absolute;
  left: 0;
  bottom: calc(100% + 14px);
  width: min(320px, calc(100vw - 48px));
  aspect-ratio: 16 / 9;
  border-radius: 14px;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px) scale(0.96);
  transition:
    opacity 0.28s ease,
    visibility 0.28s ease,
    transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
  box-shadow:
    0 24px 56px -12px rgba(11, 13, 18, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.12);
  z-index: 30;
}

.pg-watch__preview::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(11, 13, 18, 0.35) 100%);
  pointer-events: none;
}

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

.pg-watch:hover .pg-watch__preview,
.pg-watch:focus-visible .pg-watch__preview {
  opacity: 1;
  visibility: visible;
  transform: translateY(0) scale(1);
}

.pg-watch__disc-thumb {
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: 50%;
  overflow: hidden;
  opacity: 0;
  transition: opacity 0.22s ease;
}

.pg-watch__disc-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.pg-watch:hover .pg-watch__disc-thumb,
.pg-watch:focus-visible .pg-watch__disc-thumb {
  opacity: 1;
}

.pg-watch:hover .pg-play__pulse,
.pg-watch:focus-visible .pg-play__pulse {
  opacity: 0;
  animation: none;
}

.pg-watch:hover,
.pg-watch:focus-visible {
  transform: translateY(-1px);
  border-color: color-mix(in srgb, var(--pg-accent) 42%, #d5dae1);
  box-shadow: 0 14px 34px rgba(20, 23, 31, 0.12), 0 0 0 1px color-mix(in srgb, var(--pg-accent) 18%, transparent);
}

.pg-watch:focus-visible {
  outline: 2px solid var(--pg-accent);
  outline-offset: 3px;
}

.pg-watch__disc {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.pg-watch.is-busy .pg-play__disc {
  animation: pgPlayBusy 0.55s ease-in-out infinite;
}

.pg-watch__copy {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.pg-watch__title {
  font-family: var(--fp-display);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.02em;
}
@keyframes pgPlayBusy {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.07);
  }
}

/* Shared play control (hero watch disc + video poster) */
.pg-play {
  position: relative;
  display: grid;
  place-items: center;
  pointer-events: none;
}

.pg-play__pulse {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--pg-on-dark) 70%, #fff);
  opacity: 0.65;
  animation: pgPlayPulse 2.5s cubic-bezier(0.22, 1, 0.36, 1) infinite;
}

.pg-play__pulse--b {
  animation-delay: -1.25s;
}

.pg-play__disc {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  color: var(--pg-on-dark);
  background: linear-gradient(165deg, #fff 0%, #eef1f6 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -10px 24px rgba(11, 13, 18, 0.06),
    0 14px 40px -8px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.35);
  transition: transform 0.35s cubic-bezier(0.34, 1.45, 0.64, 1), box-shadow 0.35s ease;
}

.pg-play__disc--sm {
  width: 34px;
  height: 34px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -6px 14px rgba(11, 13, 18, 0.05),
    0 8px 22px -6px color-mix(in srgb, var(--pg-accent) 40%, transparent),
    0 0 0 1px rgba(255, 255, 255, 0.5);
}

.pg-play__shine {
  position: absolute;
  inset: 4px 4px auto;
  height: 42%;
  border-radius: 50%;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0) 100%);
  pointer-events: none;
}

.pg-play__disc--sm .pg-play__shine {
  inset: 3px 3px auto;
}

.pg-play__disc i {
  position: relative;
  z-index: 1;
  margin-left: 0.14em;
  font-size: 1.55em;
  filter: drop-shadow(0 1px 0 rgba(255, 255, 255, 0.6));
}

.pg-play__disc--sm i {
  font-size: 11px;
  margin-left: 2px;
}

.pg-watch:hover .pg-play__disc,
.pg-watch:focus-visible .pg-play__disc {
  transform: scale(1.06);
}

@keyframes pgPlayPulse {
  0% {
    transform: scale(0.88);
    opacity: 0.75;
  }
  65%,
  100% {
    transform: scale(1.45);
    opacity: 0;
  }
}

.pg-meter {
  position: relative;
  padding: 28px 26px 24px;
  border: 1px solid var(--fp-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 24px 56px rgba(20, 23, 31, 0.1), 0 4px 14px rgba(20, 23, 31, 0.04);
}

.pg-meter__brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 18px;
  border-radius: 16px;
  color: #fff;
  background: var(--pg-grad, var(--fp-red));
  animation: pgFloat 4.5s ease-in-out infinite;
}

.pg-meter__label {
  display: block;
  font-family: var(--fp-label);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fp-muted);
}

.pg-meter__value {
  display: block;
  margin-top: 6px;
  font-family: var(--fp-display);
  font-size: clamp(40px, 5vw, 56px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--fp-ink);
}

.pg-meter__hint {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  color: var(--fp-muted);
}

.pg-meter__bar {
  margin-top: 22px;
  height: 10px;
  border-radius: 999px;
  background: var(--fp-chip);
  overflow: hidden;
}

.pg-meter__fill {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: var(--pg-grad, var(--fp-red));
  transition: width 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.pg-meter.is-on .pg-meter__fill {
  width: 78%;
}

.pg-meter__ticks {
  display: grid;
  gap: 8px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}

.pg-meter__ticks li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--fp-muted);
  opacity: 0;
  transform: translateX(8px);
  transition: opacity 0.4s ease, transform 0.4s ease, color 0.3s ease;
  transition-delay: calc(var(--pg-i, 0) * 0.12s + 0.35s);
}

.pg-meter.is-on .pg-meter__ticks li {
  opacity: 1;
  transform: none;
  color: var(--fp-ink);
}

.pg-meter__ticks i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--pg-accent-soft);
  color: var(--pg-accent);
  font-size: 9px;
}

@keyframes pgFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* ── Definition: "What Flustle is for …" ──
   A big statement on the left, the platform illustration on the right. */
.pg-define {
  position: relative;
  overflow: hidden;
}

/* Soft platform-coloured glow behind the illustration. */
.pg-define::before {
  content: "";
  position: absolute;
  top: 50%;
  right: -6%;
  width: 760px;
  height: 760px;
  transform: translateY(-50%);
  background: radial-gradient(closest-side, var(--pg-accent-glow), transparent 72%);
  pointer-events: none;
}

.pg-define__rail {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 56px 96px;
  align-items: start;
}

.pg-define__rail--solo {
  grid-template-columns: minmax(0, 1fr);
  max-width: 920px;
}

.pg-define__eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
}

.pg-define__mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  background: var(--pg-grad, var(--fp-red));
  box-shadow: 0 12px 22px -10px var(--pg-accent-glow);
  color: #fff;
}

.pg-define__mark .tp-pf-svg {
  width: 22px;
  height: 22px;
}

.pg-define .pg-define__title {
  margin-top: 28px;
  font-size: clamp(34px, 4.6vw, 60px);
  line-height: 1.05;
  letter-spacing: -0.04em;
}

/* Plain lead paragraph under the headline (no card). */
.pg-define .pg-define__lead {
  margin-top: 26px;
  max-width: 50ch;
  font-size: 20px;
}

/* Illustration card (square, so the artwork is never cropped). */
.pg-define__visual {
  position: relative;
  width: 100%;
  margin: 0;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 40px;
  background: var(--pg-accent-soft);
  box-shadow:
    0 60px 100px -44px color-mix(in srgb, var(--pg-on-dark) 55%, transparent),
    0 18px 36px -22px rgba(20, 23, 31, 0.28);
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  transition: opacity 0.7s ease 0.15s, transform 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s;
}

.pg-page .fp-reveal.is-inview .pg-define__visual {
  opacity: 1;
  transform: none;
}

/* Glassy rim over the artwork. */
.pg-define__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.7);
  pointer-events: none;
}

/* Flat fallback illustration: drifts slowly (slightly over-scaled so the edges never show). */
.pg-define__visual > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  animation: pgDefineDrift 11s ease-in-out infinite;
}

@keyframes pgDefineDrift {
  0%, 100% { transform: scale(1.04) translateY(0); }
  50% { transform: scale(1.07) translateY(-1.6%); }
}

/* ── Animated, layered illustration (the hero picture) ──
   The platform tile and each bubble are separate cut-outs that float on their
   own seamless loops (different speed, distance and phase), with a pulsing
   glow, an orbiting ring, ripples, rising hearts, a floor shadow that follows
   the tile, twinkling sparkles and a "+1" that keeps rising from the bubbles.
   Pieces pop in on load, drift with the mouse at different depths, and every
   few seconds the whole scene celebrates (a hop, a ring burst, a flurry of
   "+1"). There is no backdrop: the pieces float straight on the page. It
   pauses while off-screen or covered (platform-growth.js) and is still for
   visitors who prefer reduced motion. */
.pg-scene {
  position: relative;
  isolation: isolate;
  container-type: inline-size; /* lets the "+1" pop-ups scale with the picture (cqw) */
}

.pg-hero__scene {
  width: 100%;
  max-width: 560px;
  margin: 0;
  justify-self: end;
  aspect-ratio: 1 / 1;
}

.pg-hero__flat {
  max-width: 520px;
  justify-self: end;
}

.pg-scene > * {
  position: absolute;
}

/* Soft platform-coloured glow behind the tile. */
.pg-scene__halo {
  top: 46%;
  left: 50%;
  z-index: 0;
  width: 80%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    color-mix(in srgb, var(--pg-on-dark) 46%, transparent),
    color-mix(in srgb, var(--pg-on-dark) 16%, transparent) 58%,
    transparent 100%
  );
  transform: translate(-50%, -50%);
  animation: pgSceneHalo 3.6s ease-in-out infinite;
}

@keyframes pgSceneHalo {
  0%, 100% { opacity: 0.68; transform: translate(-50%, -50%) scale(0.93); }
  50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); }
}

/* Orbiting glass ring: an ellipse with a bright comet that travels round it. The
   far half passes behind the tile and the near half in front of it. */
.pg-scene__ring {
  top: 50%;
  left: 50%;
  width: 88%;
  aspect-ratio: 1;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-16deg) scaleY(0.38);
}

.pg-scene__ring--back { z-index: 1; }
.pg-scene__ring--front { z-index: 4; }

.pg-scene__ring-clip {
  position: absolute;
  inset: 0;
}

.pg-scene__ring--back .pg-scene__ring-clip { clip-path: inset(0 0 50% 0); }
.pg-scene__ring--front .pg-scene__ring-clip { clip-path: inset(50% 0 0 0); }

.pg-scene__ring i {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    color-mix(in srgb, var(--pg-on-dark) 28%, transparent) 0deg,
    color-mix(in srgb, var(--pg-on-dark) 28%, transparent) 205deg,
    var(--pg-on-dark) 335deg,
    color-mix(in srgb, var(--pg-on-dark) 28%, transparent) 360deg
  );
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px));
  animation: pgSceneOrbit 6s linear infinite;
}

@keyframes pgSceneOrbit {
  to { transform: rotate(360deg); }
}

/* Floor shadow: shrinks and fades as the tile rises. */
.pg-scene__shadow {
  top: 91%;
  left: 50%;
  z-index: 1;
  width: 44%;
  height: 5.5%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 24, 70, 0.34), rgba(40, 24, 70, 0));
  filter: blur(3px);
  transform: translate(-50%, -50%);
  animation: pgSceneShadow 5.4s ease-in-out infinite;
}

@keyframes pgSceneShadow {
  0%, 100% { opacity: 0.95; transform: translate(-50%, -50%) scaleX(1); }
  50% { opacity: 0.55; transform: translate(-50%, -50%) scaleX(0.84); }
}

/* Pieces. The slot holds the resting position/size/tilt; the image inside floats. */
.pg-scene__slot {
  top: var(--y);
  left: var(--x);
  z-index: 5;
  width: var(--w);
  transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  /* Mouse parallax: nearer pieces (bigger --pz) travel further. */
  translate: calc(var(--px, 0) * var(--pz, 16) * 1px) calc(var(--py, 0) * var(--pz, 16) * 1px);
  /* Pops in with a bounce when the page loads. */
  animation: pgSceneIn 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) var(--in, 0s) both;
}

/* Wrapper that does the celebration hop (see .is-burst below). */
.pg-scene__hop {
  display: block;
}

.pg-scene__slot img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 12px 14px rgba(30, 24, 60, 0.22));
  animation:
    pgSceneFloat var(--fd, 5s) ease-in-out var(--fl, 0s) infinite,
    pgScenePulse var(--pd, 3.6s) ease-in-out var(--fl, 0s) infinite;
  will-change: transform;
}

/* The pop-in waits until the loading screen has left (see the inline script in the template). */
.pg-scene.is-wait .pg-scene__slot {
  animation-play-state: paused;
}

@keyframes pgSceneIn {
  0% { opacity: 0; scale: 0.2; }
  45% { opacity: 1; }
  100% { opacity: 1; scale: 1; }
}

@keyframes pgScenePulse {
  0%, 100% { scale: 1; }
  50% { scale: var(--ps, 1.05); }
}

.pg-scene__slot--tile {
  --x: 52.5%;
  --y: 49.5%;
  --w: 49%;
  --pz: 10;
  --ps: 1.035;
  --pd: 2.8s;
  --in: 0s;
  z-index: 2;
}

.pg-scene__slot--tile img {
  filter: drop-shadow(0 22px 22px rgba(30, 24, 60, 0.28));
  animation:
    pgSceneTile 5.2s ease-in-out infinite,
    pgScenePulse var(--pd) ease-in-out infinite;
}

.pg-scene__slot--tl { --x: 23%;   --y: 23%;   --w: 18.5%; --rot: -8deg; --fx: 7%;    --fy: 15%; --fr: 8deg;    --fd: 4.4s; --fl: -1s;   --pd: 3.4s; --ps: 1.06; --pz: 22; --in: 0.12s; --hop: 0.04s; }
.pg-scene__slot--l  { --x: 16.5%; --y: 47.5%; --w: 21.5%; --rot: -6deg; --fx: -8%;   --fy: 13%; --fr: -9deg;   --fd: 5.2s; --fl: -2.6s; --pd: 3.9s; --ps: 1.05; --pz: 28; --in: 0.2s;  --hop: 0.1s; }
.pg-scene__slot--bl { --x: 20.5%; --y: 75.5%; --w: 21%;   --rot: 5deg;  --fx: 6%;    --fy: 15%; --fr: 8deg;    --fd: 4.8s; --fl: -0.4s; --pd: 3.2s; --ps: 1.06; --pz: 26; --in: 0.28s; --hop: 0.16s; }
.pg-scene__slot--tr { --x: 83%;   --y: 23%;   --w: 22%;   --rot: 7deg;  --fx: -6%;   --fy: 14%; --fr: -8deg;   --fd: 5s;   --fl: -3.4s; --pd: 3.7s; --ps: 1.05; --pz: 24; --in: 0.16s; --hop: 0.07s; }
.pg-scene__slot--br { --x: 75%;   --y: 78%;   --w: 22.5%; --rot: -7deg; --fx: 8%;    --fy: 13%; --fr: 9deg;    --fd: 4.6s; --fl: -1.8s; --pd: 3.3s; --ps: 1.06; --pz: 30; --in: 0.32s; --hop: 0.2s; }
.pg-scene__slot--r  { --x: 87.5%; --y: 52.5%; --w: 14.5%; --rot: 8deg;  --fx: -5%;   --fy: 14%; --fr: -9deg;   --fd: 3.8s; --fl: -1.2s; --pd: 2.6s; --ps: 1.14; --pz: 32; --in: 0.4s;  --hop: 0.13s; }

/* The verified badge pulses harder than the rest (--ps above). */
.pg-scene__slot--badge img {
  filter: drop-shadow(0 10px 12px rgba(20, 70, 50, 0.24));
}

@keyframes pgSceneFloat {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); }
  25% { transform: translate3d(var(--fx, 2%), calc(var(--fy, 5%) * -1), 0) rotate(var(--fr, 3deg)); }
  50% { transform: translate3d(calc(var(--fx, 2%) * 0.3), calc(var(--fy, 5%) * -0.25), 0) rotate(calc(var(--fr, 3deg) * -0.6)); }
  75% { transform: translate3d(calc(var(--fx, 2%) * -1), calc(var(--fy, 5%) * -0.8), 0) rotate(calc(var(--fr, 3deg) * -1)); }
}

/* The tile turns like it is hovering: a sway in 3D, leaning a little toward the mouse. */
@keyframes pgSceneTile {
  0%, 100% {
    transform: perspective(1100px) translateY(0)
      rotateY(calc(-9deg + var(--px, 0) * 10deg)) rotateX(calc(3deg + var(--py, 0) * -7deg)) rotateZ(-1.6deg);
  }
  50% {
    transform: perspective(1100px) translateY(-6%)
      rotateY(calc(9deg + var(--px, 0) * 10deg)) rotateX(calc(-3deg + var(--py, 0) * -7deg)) rotateZ(1.8deg);
  }
}

/* Sparkles: a glint in the platform colour that twinkles in and out. */
.pg-scene__spark {
  top: var(--y);
  left: var(--x);
  z-index: 6;
  width: var(--s);
  aspect-ratio: 1;
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, var(--pg-on-dark) 0 16%, transparent 62%);
  opacity: 0.7;
  pointer-events: none;
  animation: pgSceneSpark var(--d, 3.6s) ease-in-out var(--l, 0s) infinite;
}

.pg-scene__spark::before,
.pg-scene__spark::after {
  content: "";
  position: absolute;
  background: linear-gradient(transparent, var(--pg-on-dark) 50%, transparent);
  border-radius: 99px;
}

.pg-scene__spark::before {
  top: -45%;
  left: 44%;
  width: 12%;
  height: 190%;
}

.pg-scene__spark::after {
  top: 44%;
  left: -45%;
  width: 190%;
  height: 12%;
  background: linear-gradient(90deg, transparent, var(--pg-on-dark) 50%, transparent);
}

@keyframes pgSceneSpark {
  0%, 100% { opacity: 0; transform: scale(0.3) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(45deg); }
}

/* ── Ripples: a signal that keeps going out from the tile ── */
.pg-scene__pulse,
.pg-scene__burst {
  top: 49.5%;
  left: 52.5%;
  z-index: 1;
  width: 52%;
  aspect-ratio: 1;
  border: 0.55cqw solid color-mix(in srgb, var(--pg-on-dark) 75%, transparent);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.6);
}

.pg-scene__pulse {
  animation: pgScenePing 3.2s cubic-bezier(0.2, 0.6, 0.3, 1) var(--l, 0s) infinite;
}

@keyframes pgScenePing {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  14% { opacity: 0.6; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); }
}

/* ── Hearts: small reactions drifting up and swaying, like a live stream ── */
.pg-scene__heart {
  --heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E");
  top: var(--hy, 72%);
  left: var(--hx, 50%);
  z-index: 3;
  width: var(--hs, 4%);
  aspect-ratio: 1;
  background: var(--hc, var(--pg-on-dark));
  -webkit-mask: var(--heart) center / contain no-repeat;
  mask: var(--heart) center / contain no-repeat;
  opacity: 0;
  pointer-events: none;
  animation: pgSceneHeart var(--hd, 5.4s) cubic-bezier(0.3, 0.55, 0.4, 1) var(--hl, 0s) infinite;
}

@keyframes pgSceneHeart {
  0% { opacity: 0; translate: 0 0; transform: translateX(0) scale(0.4); }
  12% { opacity: 0.95; }
  55% { transform: translateX(var(--sway, 3cqw)) scale(1); }
  100% { opacity: 0; translate: 0 calc(var(--rise, 46) * -1cqw); transform: translateX(calc(var(--sway, 3cqw) * -1)) scale(0.8); }
}

/* ── Celebration beat: every few seconds the scene hops and a ring bursts out
   (platform-growth.js adds .is-burst for about a second). ── */
.pg-scene.is-burst .pg-scene__hop {
  animation: pgSceneHop 0.85s cubic-bezier(0.34, 1.56, 0.64, 1) var(--hop, 0s);
}

.pg-scene.is-burst .pg-scene__slot--tile .pg-scene__hop {
  animation: pgSceneTilePunch 0.95s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pg-scene.is-burst .pg-scene__burst {
  animation: pgSceneBurst 1s cubic-bezier(0.15, 0.6, 0.3, 1);
}

@keyframes pgSceneHop {
  0%, 100% { scale: 1; rotate: 0deg; }
  35% { scale: 1.18; rotate: 5deg; }
  65% { scale: 0.96; rotate: -3deg; }
}

@keyframes pgSceneTilePunch {
  0%, 100% { scale: 1; }
  30% { scale: 1.11; }
  55% { scale: 0.97; }
  78% { scale: 1.03; }
}

@keyframes pgSceneBurst {
  0% { opacity: 0.85; border-width: 1.1cqw; transform: translate(-50%, -50%) scale(0.5); }
  100% { opacity: 0; border-width: 0.2cqw; transform: translate(-50%, -50%) scale(1.9); }
}

/* ── Growth: a "+1" that keeps rising from the bubbles ──
   platform-growth.js sends one up from a random bubble every second or so, for
   as long as the picture is on screen. */
/* One "+1" pop-up. */
.pg-scene__plus {
  position: absolute;
  top: -9%;
  left: 50%;
  z-index: 8;
  padding: 0.9cqw 2.1cqw;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1.4cqw 2.8cqw -1cqw rgba(30, 24, 60, 0.42);
  font-family: var(--fp-display);
  font-size: 3.7cqw;
  font-weight: 800;
  line-height: 1;
  color: var(--pg-accent);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  animation: pgScenePlus 1.25s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

@keyframes pgScenePlus {
  0% { opacity: 0; transform: translate(-50%, 40%) scale(0.6); }
  18% { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
  100% { opacity: 0; transform: translate(-50%, -210%) scale(0.95); }
}

/* ── Goal pop-up: the same kind of pill as the "+1", with a small icon and the goal
   ("Get followers", "Get likes", "Get comments"). platform-growth.js sends one up at a time. ── */
.pg-scene__goal {
  position: absolute;
  top: -11%;
  left: 50%;
  z-index: 8;
  display: inline-flex;
  align-items: center;
  gap: 1.1cqw;
  padding: 0.8cqw 2.5cqw 0.8cqw 0.8cqw;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1.4cqw 2.8cqw -1cqw rgba(30, 24, 60, 0.42);
  font-family: var(--fp-display);
  font-size: clamp(11px, 3.3cqw, 18px);
  font-weight: 500;
  line-height: 1;
  color: var(--fp-ink, #0b0d12);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  animation: pgSceneGoal 2.1s cubic-bezier(0.2, 0.7, 0.3, 1) forwards;
}

/* The icon sits in a round badge in the platform colours. */
.pg-scene__goal i {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.15em;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--pg-grad, var(--pg-accent));
  font-size: 0.72em;
  color: #fff;
}

/* A bubble that is showing a label comes to the front so a neighbour never covers it. */
.pg-scene__slot.has-goal {
  z-index: 9;
}

@keyframes pgSceneGoal {
  0% { opacity: 0; transform: translate(-50%, 70%) scale(0.6); }
  10% { opacity: 1; transform: translate(-50%, 0) scale(1.08); }
  18% { transform: translate(-50%, -6%) scale(1); }
  72% { opacity: 1; transform: translate(-50%, -85%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -190%) scale(0.96); }
}

/* Off-screen: stop the loops (set by platform-growth.js). */
.pg-scene.is-paused *,
.pg-scene.is-paused *::before,
.pg-scene.is-paused *::after {
  animation-play-state: paused !important;
}

@media (max-width: 991px) {
  .pg-define::before {
    top: auto;
    right: 50%;
    bottom: -12%;
    transform: translateX(50%);
    width: 620px;
    height: 620px;
  }

  .pg-define__rail {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .pg-define .pg-define__title {
    margin-top: 22px;
  }

  .pg-define__visual {
    max-width: 560px;
    justify-self: center;
    border-radius: 30px;
  }
}

@media (max-width: 767px) {
  .pg-define__visual {
    border-radius: 26px;
  }
}

/* ── Fact grid in "What Flustle is for" (replaces the side momentum meter) ── */
.pg-define__facts--aside {
  width: 100%;
  max-width: 580px;
  justify-self: end;
}

.pg-define__facts--stack {
  margin-top: 44px;
  max-width: 680px;
}

.pg-define__fact-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0;
  padding: 28px 26px;
  list-style: none;
  overflow: hidden;
  border-radius: 28px;
  --pg-facts-rgb: 190, 22, 22;
  background-color: #0b0d12;
  background-image:
    radial-gradient(ellipse 80% 70% at 12% 8%, rgba(var(--pg-facts-rgb), 0.28) 0%, transparent 58%),
    radial-gradient(ellipse 75% 65% at 92% 88%, rgba(var(--pg-facts-rgb), 0.22) 0%, transparent 55%);
  box-shadow:
    0 40px 70px -42px rgba(15, 23, 42, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.pg-define__fact-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    122deg,
    transparent 0,
    transparent 11px,
    rgb(190 22 22 / 6%) 11px,
    rgb(190 22 22 / 10%) 12.2px
  );
  -webkit-mask-image: radial-gradient(ellipse 100% 94% at 50% 42%, #000 0%, #000 38%, transparent 96%);
  mask-image: radial-gradient(ellipse 100% 94% at 50% 42%, #000 0%, #000 38%, transparent 96%);
  animation: pgDefineFactsGrid 14s linear infinite;
}

.pg-define__fact-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 110% 92% at 50% 44%,
    transparent 0%,
    rgba(11, 13, 18, 0.22) 66%,
    rgba(11, 13, 18, 0.88) 100%
  );
}

@keyframes pgDefineFactsGrid {
  0% {
    transform: translate3d(0, 0, 0);
  }
  100% {
    transform: translate3d(-24px, 18px, 0);
  }
}

.pg-define__fact {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  min-height: 100%;
  padding: 22px 20px 20px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.05);
  transition:
    translate 0.28s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.3s ease;
}

.pg-define__fact:hover,
.pg-define__fact:focus-within {
  translate: 0 -3px;
  border-color: color-mix(in srgb, var(--pg-brand) 55%, rgba(255, 255, 255, 0.2));
  background: rgba(255, 255, 255, 0.08);
  box-shadow: 0 18px 36px -24px rgba(155, 2, 2, 0.55);
}

.pg-define__fact-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--pg-brand) 14%, rgba(255, 255, 255, 0.06));
  box-shadow:
    inset 0 0 0 1px color-mix(in srgb, var(--pg-brand) 38%, transparent),
    0 10px 22px -16px rgba(155, 2, 2, 0.65);
  font-size: 17px;
  color: color-mix(in srgb, var(--pg-brand) 55%, #ff8a8a);
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    box-shadow 0.25s ease;
}

.pg-define__fact:hover .pg-define__fact-icon,
.pg-define__fact:focus-within .pg-define__fact-icon {
  background: var(--pg-brand);
  box-shadow:
    inset 0 0 0 1px var(--pg-brand),
    0 12px 24px -14px rgba(155, 2, 2, 0.75);
  color: #fff;
}

.pg-define__fact-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.pg-define__fact-label {
  margin: 0;
  font-family: var(--fp-label);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.07em;
  line-height: 1.35;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--pg-brand) 72%, #ff7070);
}

.pg-define__fact-value {
  margin: 0;
  font-family: var(--fp-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.92);
  text-wrap: pretty;
}

@media (max-width: 991px) {
  .pg-hero__scene,
  .pg-hero__flat {
    max-width: 460px;
    justify-self: center;
  }

  .pg-define__facts--aside {
    max-width: 560px;
    justify-self: stretch;
  }
}

@media (max-width: 767px) {
  .pg-define__fact-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
    padding: 22px 20px;
    border-radius: 24px;
  }

  .pg-define__fact {
    flex-direction: row;
    align-items: flex-start;
    gap: 18px;
    padding: 20px 18px;
  }

  .pg-define__fact-body {
    flex: 1;
    gap: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pg-define__fact-grid::before {
    animation: none !important;
  }

  .pg-define__fact:hover,
  .pg-define__fact:focus-within {
    translate: none;
  }
}

/* ── Actions: "What you can request" ──
   A full-width black section directly under the hero: the title and intro, three goal
   cards (get followers / likes / comments) and a 16:9 video at the bottom.
   Background lines + glow match homepage .fp-why ("Why Flustle"). */
.pg-actions {
  position: relative;
  z-index: 3;
  overflow: hidden;
  color: #fff;
  --pg-actions-rgb: 190, 22, 22;
  background-image:
    radial-gradient(ellipse 75% 58% at 10% 4%, rgba(var(--pg-actions-rgb), 0.26) 0%, transparent 58%),
    radial-gradient(ellipse 70% 55% at 92% 92%, rgba(var(--pg-actions-rgb), 0.2) 0%, transparent 55%),
    radial-gradient(ellipse 55% 45% at 74% 20%, rgba(var(--pg-actions-rgb), 0.13) 0%, transparent 50%);
  background-color: #0b0d12;
}

.pg-actions > .ip-rail {
  position: relative;
  z-index: 1;
}

.pg-actions::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(
    122deg,
    transparent 0,
    transparent 11px,
    rgb(190 22 22 / 5%) 11px,
    rgb(190 22 22 / 8%) 12.2px
  );
  -webkit-mask-image: radial-gradient(ellipse 100% 94% at 50% 42%, #000 0%, #000 42%, transparent 96%);
  mask-image: radial-gradient(ellipse 100% 94% at 50% 42%, #000 0%, #000 42%, transparent 96%);
}

.pg-actions::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background: radial-gradient(
    ellipse 110% 92% at 50% 44%,
    transparent 0%,
    rgba(11, 13, 18, 0.26) 66%,
    rgba(11, 13, 18, 0.86) 100%
  );
}

/* Header: title left, intro right. */
.pg-actions__head {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  align-items: end;
  gap: 24px 64px;
  margin-bottom: 48px;
}

.pg-actions__intro .ip-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 14px 7px 12px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--pg-on-dark);
}

.pg-actions__intro .ip-kicker::before {
  content: "";
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--pg-on-dark);
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--pg-on-dark) 22%, transparent),
    0 0 14px var(--pg-on-dark);
}

.pg-actions .ip-title {
  color: #fff;
}

.pg-actions__head .ip-lead {
  margin: 0;
  max-width: 46ch;
  padding-bottom: 6px;
  color: rgba(255, 255, 255, 0.7);
}

@media (max-width: 991px) {
  .pg-actions__head {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 32px;
  }

  .pg-actions__head .ip-lead {
    max-width: 56ch;
    padding-bottom: 0;
  }
}

/* ── Goal cards: "Get followers / likes / comments" ──
   Three big cards under the section title. Each has a small live stage (the 3D
   bubble bobbing, ripples, a "+1" that keeps rising, sparkles); the three run a
   beat apart so the row reads followers, then likes, then comments. Glass cards
   with a cursor-follow spotlight. */
.pg-goals {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.pg-goal {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.025) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07);
  opacity: 0;
  transform: translateY(18px);
  /* The reveal is staggered; hover (translate, border, shadow) is immediate. */
  transition:
    opacity 0.6s ease calc(var(--pg-i, 0) * 0.09s),
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--pg-i, 0) * 0.09s),
    translate 0.4s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.pg-goal:hover,
.pg-goal:focus-within {
  translate: 0 -6px;
  border-color: rgba(255, 255, 255, 0.18);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 32px 56px -24px rgba(0, 0, 0, 0.8);
}

/* Soft spotlight and glowing edge that follow the cursor (--mx / --my from platform-growth.js). */
.pg-goal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    420px circle at var(--mx, 50%) var(--my, 0%),
    color-mix(in srgb, var(--pg-on-dark) 20%, transparent),
    transparent 68%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
}

.pg-goal::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: radial-gradient(
    280px circle at var(--mx, 50%) var(--my, 0%),
    color-mix(in srgb, var(--pg-on-dark) 90%, transparent),
    transparent 70%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.pg-goal:hover::before,
.pg-goal:focus-within::before,
.pg-goals:hover .pg-goal::after,
.pg-goal:focus-within::after {
  opacity: 1;
}

/* The stage */
.pg-goal__stage {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  height: 214px;
  overflow: hidden;
  border-radius: 20px;
  background:
    radial-gradient(circle at 50% 60%, color-mix(in srgb, var(--pg-on-dark) 30%, transparent) 0%, transparent 62%),
    rgba(255, 255, 255, 0.035);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* A faint dot grid that fades out toward the edges. */
.pg-goal__stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.3px);
  background-size: 18px 18px;
  -webkit-mask-image: radial-gradient(62% 70% at 50% 58%, #000, transparent 100%);
  mask-image: radial-gradient(62% 70% at 50% 58%, #000, transparent 100%);
}

/* Floor shadow: shrinks and fades as the bubble rises. */
.pg-goal__stage::after {
  content: "";
  position: absolute;
  bottom: 20px;
  left: 50%;
  z-index: 1;
  width: 100px;
  height: 14px;
  margin-left: -50px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.55), transparent);
  animation: pgGoalShadow 4.4s ease-in-out var(--gd, 0s) infinite;
}

.pg-goal__art {
  position: relative;
  z-index: 2;
  width: 128px;
  margin-top: -4px;
  animation: pgGoalBob 4.4s ease-in-out var(--gd, 0s) infinite;
  transition: scale 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), rotate 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.pg-goal:hover .pg-goal__art {
  scale: 1.1;
  rotate: -4deg;
}

.pg-goal__art img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 16px rgba(0, 0, 0, 0.45));
  animation: pgGoalPop 3.6s cubic-bezier(0.34, 1.56, 0.64, 1) var(--gd, 0s) infinite;
}

.pg-goal__icon {
  display: grid;
  place-items: center;
  width: 128px;
  aspect-ratio: 1;
  border-radius: 34px;
  background: var(--pg-grad, var(--fp-red));
  font-size: 46px;
  color: #fff;
}

@keyframes pgGoalBob {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50% { transform: translateY(-12px) rotate(2.5deg); }
}

@keyframes pgGoalShadow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.55; transform: scale(0.72); }
}

/* A little hop each time a "+1" goes up (twice per 3.6 s cycle). */
@keyframes pgGoalPop {
  0%, 22%, 40%, 72%, 90%, 100% { scale: 1; }
  28%, 78% { scale: 1.14; }
  34%, 84% { scale: 0.97; }
}

/* Ripples going out from the bubble. */
.pg-goal__ring {
  position: absolute;
  top: 56%;
  left: 50%;
  z-index: 1;
  width: 150px;
  aspect-ratio: 1;
  border: 2px solid color-mix(in srgb, var(--pg-on-dark) 65%, transparent);
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.6);
  animation: pgGoalPing 3.2s cubic-bezier(0.2, 0.6, 0.3, 1) calc(var(--gd, 0s) + var(--l, 0s)) infinite;
}

@keyframes pgGoalPing {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  14% { opacity: 0.6; }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.7); }
}

/* The "+1" keeps rising, one each side (same pill as the hero). */
.pg-goal__plus {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 4;
  margin: -82px 0 0 30px;
  padding: 6px 13px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.6);
  font-family: var(--fp-display);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  color: var(--pg-accent);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  animation: pgGoalPlus 3.6s cubic-bezier(0.2, 0.7, 0.3, 1) var(--gd, 0s) infinite;
}

.pg-goal__plus--b {
  margin: -56px 0 0 -98px;
  animation-delay: calc(var(--gd, 0s) - 1.8s);
}

@keyframes pgGoalPlus {
  0%, 70% { opacity: 0; transform: translateY(40%) scale(0.6); }
  78% { opacity: 1; transform: translateY(0) scale(1.08); }
  100% { opacity: 0; transform: translateY(-220%) scale(0.95); }
}

/* Sparkles. */
.pg-goal__spark {
  position: absolute;
  top: var(--y);
  left: var(--x);
  z-index: 3;
  width: var(--s);
  aspect-ratio: 1;
  margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, var(--pg-on-dark) 0 16%, transparent 62%);
  opacity: 0;
  pointer-events: none;
  animation: pgSceneSpark var(--d, 3s) ease-in-out calc(var(--gd, 0s) + var(--l, 0s)) infinite;
}

.pg-goal__spark::before,
.pg-goal__spark::after {
  content: "";
  position: absolute;
  border-radius: 99px;
}

.pg-goal__spark::before {
  top: -45%;
  left: 44%;
  width: 12%;
  height: 190%;
  background: linear-gradient(transparent, var(--pg-on-dark) 50%, transparent);
}

.pg-goal__spark::after {
  top: 44%;
  left: -45%;
  width: 190%;
  height: 12%;
  background: linear-gradient(90deg, transparent, var(--pg-on-dark) 50%, transparent);
}

/* Nothing runs until the section has been scrolled into view. */
.pg-actions:not(.is-inview) .pg-goal__stage,
.pg-actions:not(.is-inview) .pg-goal__stage * {
  animation-play-state: paused;
}

/* The text under the stage */
.pg-goal__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 24px 16px 10px;
}

.pg-goal__body h3 {
  margin: 0;
  font-family: var(--fp-display);
  font-size: clamp(22px, 2.1vw, 26px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: #fff;
}

.pg-goal__body p {
  margin: 12px 0 24px;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.66);
  text-wrap: pretty;
}

/* The whole card is the link (the ::after stretches over it). */
.pg-goal__cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding: 14px 14px 14px 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.07);
  font-family: var(--fp-display);
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.pg-goal__cta::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 28px;
}

.pg-goal__cta i {
  display: grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  font-size: 12px;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease;
}

/* Keep the label legible: the theme's global link colours must not win on hover / focus. */
.pg-page .pg-goal__cta,
.pg-page .pg-goal__cta:visited {
  color: #fff;
  text-decoration: none;
}

.pg-page .pg-goal:hover .pg-goal__cta,
.pg-page .pg-goal__cta:focus-visible {
  border-color: transparent;
  background: var(--pg-on-dark);
  color: #0b0d12;
}

.pg-goal:hover .pg-goal__cta i {
  background: rgba(11, 13, 18, 0.14);
  transform: translateX(4px);
}

.pg-goal:has(.pg-goal__cta:focus-visible) {
  outline: 3px solid var(--pg-on-dark);
  outline-offset: 3px;
}

#pg-video {
  scroll-margin-top: calc(var(--pg-sticky-top, 72px) + 24px);
}

/* ── Video: a 16:9 player, the last row of the same grid ──
   Same glass shell and 18px gap as the goal cards above it, and the same width, so
   the cards and the video line up edge to edge. The player is a click-to-play poster
   (our own image + a play button); the YouTube player (youtube-nocookie.com) is only
   loaded when someone presses play, so the page makes no request to YouTube on load. */
.pg-video {
  position: relative;
  isolation: isolate;
  margin-top: 18px;
  padding: 10px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.025) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.07),
    0 50px 90px -50px color-mix(in srgb, var(--pg-on-dark) 40%, transparent);
  opacity: 0;
  transform: translateY(18px);
  /* Arrives just after the third goal card. */
  transition:
    opacity 0.6s ease 0.3s,
    transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s,
    border-color 0.3s ease;
}

/* The same cursor spotlight and glowing edge as the goal cards (--mx / --my from platform-growth.js). */
.pg-video::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(
    520px circle at var(--mx, 50%) var(--my, 0%),
    color-mix(in srgb, var(--pg-on-dark) 18%, transparent),
    transparent 68%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
}

.pg-video::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  padding: 1px;
  border-radius: inherit;
  background: radial-gradient(
    300px circle at var(--mx, 50%) var(--my, 0%),
    color-mix(in srgb, var(--pg-on-dark) 90%, transparent),
    transparent 70%
  );
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.pg-video:hover {
  border-color: rgba(255, 255, 255, 0.18);
}

.pg-video:hover::before,
.pg-video:hover::after {
  opacity: 1;
}

/* The 16:9 picture inside the shell (same inset and corner radius as a goal card's stage). */
.pg-video__frame {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: 20px;
  background: #14171f;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

.pg-video__poster {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  overflow: hidden;
  border: 0;
  background: linear-gradient(160deg, color-mix(in srgb, var(--pg-on-dark) 32%, #14171f), #0b0d12 72%);
  cursor: pointer;
}

.pg-video__poster img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.pg-video__poster:hover img {
  transform: scale(1.03);
}

.pg-video__shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(11, 13, 18, 0.08) 40%, rgba(11, 13, 18, 0.5) 100%);
}

.pg-video__play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
}

.pg-video__play .pg-play__pulse {
  border-color: rgba(255, 255, 255, 0.72);
}

.pg-video__play .pg-play__disc {
  width: 84px;
  height: 84px;
  font-size: 30px;
}

.pg-video__play .pg-play__disc i {
  font-size: 1em;
  margin-left: 5px;
}

.pg-video__poster:hover .pg-video__play .pg-play__disc,
.pg-video__poster:focus-visible .pg-video__play .pg-play__disc {
  transform: scale(1.08);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -10px 24px rgba(11, 13, 18, 0.06),
    0 20px 50px -10px rgba(0, 0, 0, 0.65),
    0 0 0 10px color-mix(in srgb, var(--pg-on-dark) 22%, transparent);
}

.pg-video__poster:hover .pg-video__shade {
  background: linear-gradient(180deg, rgba(11, 13, 18, 0.12) 35%, rgba(11, 13, 18, 0.58) 100%);
}

.pg-video__poster:focus-visible {
  outline: 3px solid var(--pg-on-dark);
  outline-offset: -6px;
}

.pg-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.pg-video__shade {
  transition: background 0.35s ease;
}

/* Below 992px the goal cards go one per row (stage left, text right). */
@media (max-width: 991px) {
  .pg-goals {
    grid-template-columns: minmax(0, 1fr);
    gap: 14px;
  }

  .pg-goal {
    display: grid;
    grid-template-columns: minmax(220px, 0.8fr) minmax(0, 1fr);
    align-items: stretch;
  }

  .pg-goal__stage {
    height: auto;
    min-height: 200px;
  }

  .pg-goal__body {
    justify-content: center;
    padding: 18px 16px 18px 24px;
  }

  .pg-goal__cta {
    margin-top: 0;
  }

  .pg-video {
    margin-top: 14px;
  }

  .pg-video__play {
    width: 104px;
    height: 104px;
    margin: -52px 0 0 -52px;
  }

  .pg-video__play .pg-play__disc {
    width: 72px;
    height: 72px;
    font-size: 26px;
  }
}

@media (max-width: 767px) {
  .pg-goal {
    display: flex;
    border-radius: 26px;
  }

  .pg-goal__cta::after {
    border-radius: 26px;
  }

  .pg-goal__stage {
    height: 196px;
    min-height: 0;
  }

  .pg-goal__body {
    padding: 22px 12px 8px;
  }

  .pg-goal__cta {
    margin-top: auto;
  }

  .pg-video {
    padding: 8px;
    border-radius: 26px;
  }

  .pg-video__frame {
    border-radius: 18px;
  }

  .pg-video__play {
    width: 88px;
    height: 88px;
    margin: -44px 0 0 -44px;
  }

  .pg-video__play .pg-play__disc {
    width: 58px;
    height: 58px;
    font-size: 20px;
  }

  .pg-video__play .pg-play__disc i {
    margin-left: 3px;
  }
}
/* ── Below the video ──────────────────────────────────────────────────────────
   One question per section: what it is, how it works, is it safe, who it is for,
   how it compares, the questions, where to go next. Light bands alternate white
   and grey (see "Section rhythm" below); how it works, safety and the comparison
   are the homepage's red and ink bands. No divider lines between sections. */

/* Reveal helper for the cards: they fade up one after another once the section is in view.
   Hover effects use `translate` / shadows, which are not delayed. */
.pg-rv {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.55s ease calc(var(--pg-i, 0) * 0.08s),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--pg-i, 0) * 0.08s),
    translate 0.3s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.3s ease,
    border-color 0.3s ease,
    background-color 0.3s ease;
}

.pg-page .fp-reveal.is-inview .pg-rv {
  opacity: 1;
  transform: none;
}

/* Section heading block: kicker, question, short answer. */
.pg-sec-head {
  max-width: 780px;
  margin: 0 0 48px;
}

.pg-sec-head .ip-lead {
  max-width: 62ch;
}

/* Text link with an arrow (used under the steps and in the answers). */
.pg-page .pg-textlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 34px;
  font-family: var(--fp-display);
  font-size: 16px;
  font-weight: 700;
  color: var(--pg-brand);
  text-decoration: none;
}

.pg-page .pg-textlink i {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--pg-brand) 8%, #fff);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pg-brand) 35%, transparent);
  font-size: 11px;
  color: var(--pg-brand);
  transition: translate 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.2s ease, color 0.2s ease;
}

.pg-page .pg-textlink:hover,
.pg-page .pg-textlink:focus-visible {
  color: var(--pg-brand);
}

.pg-page .pg-textlink:hover i,
.pg-page .pg-textlink:focus-visible i {
  translate: 4px 0;
  background: var(--pg-brand);
  box-shadow: inset 0 0 0 1px var(--pg-brand);
  color: #fff;
}

.pg-page .pg-textlink--sm {
  margin-top: 14px;
  font-size: 15px;
}

.pg-page .pg-textlink--sm i {
  width: 24px;
  height: 24px;
  font-size: 10px;
}

/* ── What is it: the answer, the facts, the date ── */
.pg-define .pg-define__detail {
  max-width: 54ch;
  margin: 16px 0 0;
  font-size: 17px;
  line-height: 1.65;
  color: var(--fp-muted);
  text-wrap: pretty;
}

/* ── How it works: the homepage's red four-step band (fp-how.css) ── */
.pg-page .pg-how__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fp-display);
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  text-decoration: underline;
  text-decoration-color: rgba(255, 255, 255, 0.35);
  text-underline-offset: 5px;
  transition: text-decoration-color 0.2s ease, gap 0.2s ease;
}

.pg-page .pg-how__link:hover,
.pg-page .pg-how__link:focus-visible {
  gap: 11px;
  color: #fff;
  text-decoration-color: #fff;
}

.pg-how__link i {
  font-size: 12px;
}

/* ── Safety and rules, Who it's for, Compared: the homepage sections (fp-sections.css) ──
   Only what the platform pages add on top: the honest policy note and its links,
   a fourth route (platform ads) in the comparison, the "three ways shortcuts
   backfire" list and the "not for you" note. */

/* Safety: the policy note and links sit in the sticky intro, under the lead. */
.pg-trust-note {
  max-width: 44ch;
  margin: 22px 0 0;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--fp-dim);
  text-wrap: pretty;
}

.pg-trust-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.pg-trust-links .pg-trust-link {
  margin-top: 0;
  color: #fff;
  text-decoration: none;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

.pg-trust-links .pg-trust-link:hover,
.pg-trust-links .pg-trust-link:focus-visible {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.32);
}

/* Who: the "not for you" note under the cards. */
.pg-who-not {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: 780px;
  margin: 28px 0 0;
  padding: 18px 22px;
  border-radius: 16px;
  background: var(--fp-wash);
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--fp-muted);
}

.pg-who-not i {
  flex: none;
  margin-top: 3px;
  font-size: 16px;
  color: var(--fp-hint);
}

/* Compared: four ways to grow, so the cards go two by two; platform ads get an amber
   identity. The questions run longer than the homepage title, so the intro is wider. */
.pg-vs .fp-vs__intro {
  max-width: 820px;
}

.pg-vs .fp-vs__lead {
  max-width: 62ch;
}

.pg-vs .fp-vs__cards {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.pg-vs .fp-vs__card--paid {
  --fp-vs-accent: #ffc35c;
}

.pg-vs .fp-vs__head-tag {
  margin: 0;
}

.pg-vs-note {
  margin: 18px 0 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--fp-hint);
}

.pg-vs-risks {
  margin-top: 64px;
  padding-top: 40px;
  border-top: 1px solid var(--fp-line);
}

.pg-vs-risks__title {
  margin: 0;
  font-family: var(--fp-display);
  font-size: clamp(22px, 2.2vw, 28px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.2;
  color: #fff;
}

.pg-vs-risks__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px;
  margin: 30px 0 0;
  padding: 0;
  list-style: none;
}

.pg-vs-risk__index {
  display: block;
  font-family: var(--fp-label);
  font-size: 13px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
  color: var(--fp-red);
}

.pg-vs-risk__title {
  margin: 14px 0 0;
  font-family: var(--fp-display);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.25;
  color: #fff;
  text-wrap: balance;
}

.pg-vs-risk__copy {
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--fp-muted);
  text-wrap: pretty;
}

@media (max-width: 899px) {
  .pg-vs .fp-vs__cards,
  .pg-vs-risks__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .pg-vs-risks__list {
    gap: 26px;
  }

  .pg-vs-risks {
    margin-top: 48px;
    padding-top: 32px;
  }
}
/* FAQ accordion: assets/css/pg-faq.css */

/* ── Also on Flustle ──
   Platforms hub cards (.pf-card in inner-pages.css), with lift/shadow; theme red accents. */
.pg-page .pg-related .pg-sec-head .ip-kicker {
  color: var(--pg-brand);
}

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

.pg-related .pf-card {
  box-shadow: 0 22px 40px -36px rgba(15, 23, 42, 0.4);
  transition: translate 0.25s ease, border-color 0.2s ease, box-shadow 0.25s ease;
}

.pg-related .pf-card:hover,
.pg-related .pf-card:focus-within {
  translate: 0 -5px;
  border-color: color-mix(in srgb, var(--pg-brand) 28%, transparent);
  box-shadow: 0 30px 50px -32px rgba(15, 23, 42, 0.45);
}

.pg-page .pg-related .pf-card__link,
.pg-page .pg-related .pf-card__link:hover {
  color: var(--pg-brand);
}

.pg-related .pf-card__link {
  margin-top: auto;
}

.pg-related .pf-card__chips {
  margin-bottom: 22px;
}

/* Same 3D marks as All Platforms navigation (tp-mega-icon / flustle_platform_mark). */
.pg-related .pf-card .pg-related__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 48px;
  height: 48px;
  margin-bottom: 18px;
}

.pg-related .pf-card .pg-related__icon .tp-mega-img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  filter: drop-shadow(0 3px 4px rgba(20, 23, 31, 0.14));
}

.pg-related .pf-card .pg-related__icon:not(:has(.tp-mega-img)) {
  border-radius: 11px;
  background: #eef0f4;
  color: #485163;
  font-size: 18px;
}

.pg-related .pf-card .pg-related__icon > .tp-pf-svg {
  width: 22px;
  height: 22px;
  margin: auto;
}

/* ── Below the video: responsive ── */
@media (max-width: 991px) {
  .pg-related__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .pg-sec-head {
    margin-bottom: 36px;
  }
}

/* ── Hero stays pinned; the sections after it scroll up over it ──
   Same mechanic as the pricing page (the header is already kept in the flow
   by inner-shared.css). The hero sticks just below the header, whose height
   platform-growth.js measures into --pg-sticky-top. If the hero is taller than
   the screen, `top` turns negative so it first scrolls into view and is then
   pinned by its bottom edge, so none of it becomes unreachable. */
.pg-hero {
  position: sticky;
  top: var(--pg-sticky-top, 0px);
  top: min(var(--pg-sticky-top, 0px), calc(100dvh - var(--pg-hero-h, 0px)));
  z-index: 1;
}

/* Everything after the hero is opaque and sits above it. */
.pg-page > section:not(.pg-hero) {
  position: relative;
  z-index: 3;
}

/* Sections scroll over the pinned hero, so a section must never be see-through
   or shifted while it enters: the hero would ghost through it. The section
   itself therefore stays solid and still; the fade/slide entrance runs on its
   content (the rail) instead. Cards and illustrations keep revealing through
   `.fp-reveal.is-inview` as before. */
.pg-page .fp-reveal:not(.pg-hero) {
  opacity: 1;
  transform: none;
  transition: none;
}

.pg-page .fp-reveal:not(.pg-hero) > .ip-rail {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.pg-page .fp-reveal.is-inview:not(.pg-hero) > .ip-rail {
  opacity: 1;
  transform: none;
}

/* ── Section rhythm ──
   Same system as the homepage: 96px / 104px section padding (68px / 76px on
   phones). Light bands alternate white and grey; the actions band is black.
   No divider lines. */
.pg-page .pg-actions > .ip-rail,
.pg-page .pg-define > .ip-rail,
.pg-page .pg-faq > .ip-rail,
.pg-page .pg-related > .ip-rail,
.pg-page .ip-cta .ip-cta__rail {
  padding-top: var(--pg-sec-t);
  padding-bottom: var(--pg-sec-b);
}

.pg-faq {
  background-color: var(--fp-wash);
}

.pg-define,
.pg-related {
  background: #fff;
}

@media (max-width: 767px) {
  .pg-page {
    --pg-sec-t: 68px;
    --pg-sec-b: 76px;
  }
}

/* ── Responsive ── */
@media (max-width: 991px) {
  .pg-hero__rail {
    grid-template-columns: 1fr;
    gap: 36px;
    padding-top: 48px;
    padding-bottom: 56px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pg-page .fp-reveal,
  .pg-page .fp-reveal > .ip-rail,
  .pg-goal,
  .pg-video,
  .pg-rv,
  .pg-meter__ticks li,
  .pg-meter__fill,
  .pg-meter__brand {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .pg-define__visual,
  .pg-define__visual > img {
    transition: none !important;
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  /* The layered illustration stays still, exactly as the artwork is drawn. */
  .pg-scene *,
  .pg-scene *::before,
  .pg-scene *::after {
    animation: none !important;
  }

  .pg-play__pulse,
  .pg-watch.is-busy .pg-play__disc {
    animation: none !important;
  }

  .pg-watch__preview,
  .pg-watch__disc-thumb {
    transition: none !important;
    transform: none !important;
  }

  .pg-scene__pulse,
  .pg-scene__burst,
  .pg-scene__heart {
    display: none !important;
  }

  .pg-meter__fill {
    width: 78% !important;
  }

  /* The goal cards keep their picture but stop moving; the video play button stays still. */
  .pg-goal__stage *,
  .pg-goal__stage::after,
  .pg-goal__art,
  .pg-play__disc {
    transition: none !important;
  }

  .pg-goal__ring,
  .pg-goal__plus,
  .pg-goal__spark,
  .pg-play__pulse {
    display: none !important;
  }

  .pg-goal:hover,
  .pg-goal:focus-within {
    translate: none;
  }

  /* The cards and the accordion below the video stay still too. */
  .pg-related .pf-card:hover,
  .pg-related .pf-card:focus-within {
    translate: none;
  }

  .pg-faq__a,
  .pg-faq__a-inner,
  .pg-faq__item,
  .pg-faq__chev,
  .pg-textlink i {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }

  .pg-faq__list:not(.pg-faq--js) .pg-faq__item[open] .pg-faq__a,
  .pg-faq--js .pg-faq__item.is-expanded .pg-faq__a {
    grid-template-rows: 1fr;
  }
}