/* Prompt me! landing page.
   Deliberately its own token layer: the marketing page is bone + cobalt, the
   console is the existing white + blue. They share a wordmark, not a palette. */

:root {
  --pm-ground: #f2efe6;
  --pm-ink: #16161d;
  --pm-ink-soft: #5a5a66;
  --pm-rule: #dcd7c9;
  --pm-accent: #1f3be0;
  --pm-halt: #8d2b23;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body.pm {
  background: var(--pm-ground);
  color: var(--pm-ink);
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  -webkit-font-smoothing: antialiased;
}

.pm-mono,
.pm-label,
.pm-foot,
.pm-n,
.pm-eyebrow,
.pm-nav a,
.pm-footer p {
  font-family: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  font-variant-numeric: tabular-nums;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.pm-wrap,
.pm-header,
.pm-zig,
.pm-steps { max-width: 1180px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }

@media (min-width: 768px) {
  .pm-wrap, .pm-header, .pm-zig, .pm-steps { padding-left: 40px; padding-right: 40px; }
}

/* Header */
.pm-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-top: 24px; padding-bottom: 24px;
}

.pm-mark { display: inline-flex; align-items: baseline; gap: 3px; font-weight: 600; letter-spacing: -0.02em; font-size: 1.02rem; }
.pm-mark svg rect { fill: var(--pm-accent); }
.pm-nav { display: flex; align-items: center; gap: 28px; }
.pm-nav a { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--pm-ink-soft); transition: color 0.15s ease; }
.pm-nav a:hover { color: var(--pm-ink); }
.pm-nav a.pm-cta-line { color: var(--pm-ink); }
@media (max-width: 640px) { .pm-nav a:not(.pm-cta-line) { display: none; } }

/* Type scale */
.pm-display { font-size: clamp(2.25rem, 6vw, 3.75rem); letter-spacing: -0.04em; line-height: 0.98; }
.pm-display-sm { font-size: clamp(2rem, 4.5vw, 3rem); letter-spacing: -0.035em; line-height: 1; }
.pm-lede { margin-top: 20px; max-width: 52ch; font-size: 1rem; line-height: 1.65; color: var(--pm-ink-soft); }
.pm-eyebrow { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.18em; color: var(--pm-accent); }

/* Bespoke chrome: three CTAs, three garments, no shared button class. */
.pm-cta-line {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--pm-ink); border-radius: 999px; padding: 8px 16px;
  font-weight: 500; transition: background 0.18s ease, transform 0.14s ease;
}
.pm-cta-line:hover { background: rgba(22, 22, 29, 0.05); }
.pm-cta-line:active { transform: scale(0.98); }

.pm-cta-slab {
  display: inline-flex; align-items: center; margin-top: 40px;
  background: var(--pm-ink); color: var(--pm-ground); font-weight: 500; font-size: 1rem;
  padding: 16px 40px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--pm-ink);
  transition: background 0.2s ease, color 0.2s ease, transform 0.14s ease;
}
.pm-cta-slab:hover { background: var(--pm-accent); color: #fff; box-shadow: inset 0 0 0 1px var(--pm-accent); }
.pm-cta-slab:active { transform: scale(0.98); }

/* The storm.
   A deliberate staged act: the page goes dark while the budget burns, then
   lifts back to bone as the rewrite lands. --lift (0 to 1) is driven from JS
   and every colour here interpolates against it, so one number moves the
   whole scene. */
/* Heads-up display: the shared budget everything is spending. */
.pm-hud {
  position: absolute; left: 50%; top: 5vh; transform: translateX(-50%);
  width: min(520px, calc(100% - 48px)); z-index: 4;
  display: flex; flex-direction: column; gap: 10px;
}
.pm-hud-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.pm-hud .pm-label { color: inherit; opacity: 0.55; }
.pm-hud-pct { font-family: "Geist Mono", monospace; font-size: 0.8rem; opacity: 0.75; }
.pm-hud-bar { height: 6px; border-radius: 999px; background: rgba(128, 128, 140, 0.28); overflow: hidden; }
.pm-hud-bar i {
  display: block; height: 100%; width: 100%; border-radius: 999px;
  transform: scaleX(0); transform-origin: left center;
  background: linear-gradient(90deg, var(--pm-accent), #6b7bff);
  will-change: transform;
}
.is-alert .pm-hud-bar i { background: linear-gradient(90deg, #b4544f, #d9645c); }
.is-fixed .pm-hud-bar i { background: linear-gradient(90deg, var(--pm-accent), #4f6bff); }

.pm-hud-money { align-items: flex-end; }
.pm-money {
  font-family: "Geist Mono", monospace; font-variant-numeric: tabular-nums;
  font-size: clamp(1.8rem, 4vw, 2.6rem); letter-spacing: -0.03em; line-height: 1;
  transition: color 0.3s ease;
}
.is-alert .pm-money { color: #e07b74; }
.is-fixed .pm-money { color: var(--pm-accent); }
.pm-hud-sub { font-family: "Geist Mono", monospace; font-size: 0.72rem; opacity: 0.6; }

/* The sessions themselves. */
.pm-terms { position: absolute; inset: 18vh 3% 12vh; z-index: 2; }

.pm-term {
  position: absolute; opacity: 0;
  border-radius: 10px; overflow: hidden;
  background: rgba(23, 23, 31, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.09);
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(2px);
  transition: border-color 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease;
}
.pm-term header {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  font-family: "Geist Mono", monospace; font-size: 0.62rem; letter-spacing: 0.04em;
  color: rgba(244, 242, 236, 0.55);
}
.pm-term header i { width: 6px; height: 6px; border-radius: 50%; background: #6ad08a; flex-shrink: 0; }
.pm-term header b { margin-left: auto; font-weight: 400; opacity: 0.75; }
.pm-term-body { padding: 12px; min-height: 62px; }
.pm-term-body p {
  margin: 0; font-family: "Geist Mono", monospace; font-size: 0.78rem; line-height: 1.55;
  color: rgba(244, 242, 236, 0.9); word-break: break-word;
}
.pm-caret { display: inline-block; width: 7px; height: 1em; margin-left: 2px; vertical-align: -2px; background: currentColor; opacity: 0.8; animation: pm-blink 1.1s steps(1) infinite; }
@keyframes pm-blink { 0%, 50% { opacity: 0.85; } 51%, 100% { opacity: 0; } }

.pm-term.is-stalled { border-color: rgba(180, 84, 79, 0.6); filter: saturate(0.6); }
.pm-term.is-stalled header i { background: #b4544f; }
.pm-term.is-clear { border-color: rgba(31, 59, 224, 0.55); box-shadow: 0 24px 60px rgba(31, 59, 224, 0.22); }
.pm-term.is-clear header i { background: #6b8cff; }
.pm-term.is-clear .pm-term-body p { color: #cfd8ff; }

/* Verdict + the moment Prompt me! steps in. */
.pm-verdict {
  position: absolute; left: 50%; bottom: 9vh; transform: translateX(-50%) translateY(12px);
  z-index: 5; text-align: center; width: min(560px, calc(100% - 48px));
  opacity: 0; transition: opacity 0.35s ease, transform 0.35s ease;
}
.pm-verdict-kicker {
  font-family: "Geist Mono", monospace; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.18em;
  color: #e07b74;
}
.pm-verdict.is-resolved .pm-verdict-kicker { color: var(--pm-accent); }
.pm-verdict-line { margin-top: 10px; font-size: clamp(1.5rem, 3.4vw, 2.2rem); letter-spacing: -0.03em; line-height: 1.1; }

.pm-badge {
  position: absolute; left: 50%; top: 70%; z-index: 6;
  opacity: 0;  /* transform is owned by landing.js (anime.js writes it wholesale) */
  display: flex; align-items: center; gap: 12px;
  padding: 14px 22px; border-radius: 999px;
  background: var(--pm-ground); color: var(--pm-ink);
  box-shadow: 0 20px 60px rgba(31, 59, 224, 0.35);
  transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  white-space: nowrap;
}
.pm-badge .pm-mark { font-size: 1rem; }
.pm-badge-note { font-family: "Geist Mono", monospace; font-size: 0.68rem; opacity: 0.6; }

.pm-scroll-hint {
  position: absolute; left: 50%; bottom: 3.5vh; transform: translateX(-50%); z-index: 5;
  font-family: "Geist Mono", monospace; font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.22em;
  opacity: 0.5; transition: opacity 0.3s ease;
}

.pm-storm-stage.is-alarmed .pm-hud-bar i { background: linear-gradient(90deg, #b4544f, #d9776f); }
.pm-storm-stage.is-alarmed .pm-money { color: #e08b83; }

.pm-storm-fallback { padding: 96px 0; }

/* Reduced motion: the act holds its resolved end state, nothing moves. */
@media (prefers-reduced-motion: reduce) {
  .pm-storm { height: auto; }
  .pm-storm-stage { position: static; height: auto; min-height: 100dvh; }
  .pm-storm-bg { animation: none; }
  .pm-caret { animation: none; }
  .pm-term, .pm-badge, .pm-verdict, .pm-hud-bar i, .pm-money { transition: none; }
}

@media (max-width: 767px) {
  /* Four floating panels do not fit a phone: stack them in flow instead. */
  .pm-terms { position: static; padding: 20vh 20px 4vh; display: flex; flex-direction: column; gap: 12px; }
  .pm-term { position: static !important; width: 100% !important; }
  .pm-verdict { bottom: 4vh; }
  .pm-badge { top: auto; bottom: 22vh; }
  .pm-scroll-hint { display: none; }
}

/* ===================================================================
   The journey: one pinned stage, six acts, one playhead.

   The track's height is the animation's duration. The stage sticks to the
   top of the viewport for the whole track, and the acts are full-bleed
   layers stacked on it that the master timeline cross-fades between — so
   an act carries its own background and the palette changes come free.

   Everything here is opt-in: the journey only pins once landing.js adds
   .is-pinned. Without JS, with reduced motion, or on a viewport too short
   to hold an act, the acts stay ordinary stacked sections.
   =================================================================== */

.pm-journey { position: relative; }
/* The track height IS the animation's duration. landing.js overwrites this
   from the per-act vh weights in ACTS; the value here is only what applies
   for the frame before the script runs. */
.pm-journey.is-pinned { height: 1500vh; }

.pm-stage { display: flow-root; }

.pm-act {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: var(--pm-ground);
  color: var(--pm-ink);
}

.pm-act-inner {
  width: 100%; max-width: 1180px; margin: 0 auto; padding: 88px 24px;
}
@media (min-width: 768px) { .pm-act-inner { padding: 96px 40px; } }

/* Pinned mode. Acts become layers on one sticky stage. */
.pm-journey.is-pinned .pm-stage {
  position: sticky; top: 0; height: 100svh; overflow: hidden;
}
.pm-journey.is-pinned .pm-act {
  position: absolute; inset: 0;
  min-height: 0; height: 100%;
  will-change: opacity, transform;
}
/* Act 1 owns its own full-bleed stage, so it gets no inner padding. */
.pm-journey.is-pinned .pm-act-storm { display: block; }

.pm-act-storm { padding: 0; }
.pm-act-storm .pm-storm-stage { position: relative; top: auto; height: 100svh; }

/* Dark acts. Each layer paints its own ground, so cross-fading the layers
   cross-fades the palette without a separate colour tween. */
.pm-dark {
  --pm-ground: #0e0e14;
  --pm-ink: #f4f2ec;
  --pm-ink-soft: #9a97a8;
  --pm-rule: rgba(244, 242, 236, 0.13);
}
.pm-dark::before {
  content: '';
  position: absolute; inset: -30% -10% auto; height: 70%;
  background: radial-gradient(45% 60% at 50% 0%, rgba(31, 59, 224, 0.20), transparent 72%);
  pointer-events: none;
}
.pm-dark > * { position: relative; }

.pm-eyebrow {
  font-family: "Geist Mono", monospace; font-size: 0.68rem; text-transform: uppercase;
  letter-spacing: 0.2em; color: var(--pm-accent);
}
.pm-dark .pm-eyebrow { color: #7f93ff; }

/* The header floats over the pinned stage, so it needs its own ground. */
.pm-header[data-header] { position: fixed; top: 0; left: 0; right: 0; z-index: 20; transition: background 0.3s ease, color 0.3s ease; }
.pm-header.is-over-dark { color: #f4f2ec; }
.pm-header.is-over-dark .pm-nav a { color: rgba(244, 242, 236, 0.66); }
.pm-header.is-over-dark .pm-nav a:hover, .pm-header.is-over-dark .pm-nav a.pm-cta-line { color: #f4f2ec; }
.pm-header.is-over-dark .pm-cta-line { border-color: rgba(244, 242, 236, 0.35); }
.pm-header.is-over-dark .pm-mark img { filter: brightness(0) invert(1); }

/* ------------------------------------------------------------- act 2 */

.pm-act-stats h2 { margin-top: 18px; }
.pm-stat-grid { margin-top: 44px; display: grid; gap: 16px; }
@media (min-width: 860px) { .pm-stat-grid { grid-template-columns: repeat(3, 1fr); } }

.pm-stat {
  border: 1px solid var(--pm-rule); border-radius: 18px;
  background: linear-gradient(180deg, rgba(244, 242, 236, 0.055), rgba(244, 242, 236, 0.015));
  padding: 26px 24px 24px; display: flex; flex-direction: column;
  transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.pm-stat:hover { border-color: rgba(127, 147, 255, 0.5); transform: translateY(-4px); }
.pm-stat.is-accent {
  border-color: rgba(127, 147, 255, 0.42);
  background: linear-gradient(180deg, rgba(31, 59, 224, 0.20), rgba(31, 59, 224, 0.05));
}
.pm-stat-num {
  font-family: "Geist Mono", monospace; font-variant-numeric: tabular-nums;
  font-size: clamp(2.6rem, 5vw, 3.8rem); font-weight: 400;
  letter-spacing: -0.055em; line-height: 0.95;
  display: flex; align-items: baseline; gap: 2px;
}
.pm-stat-num i { font-style: normal; }
.pm-stat-num .pm-arrow { color: var(--pm-ink-soft); font-size: 0.5em; padding: 0 10px; }
.pm-stat.is-accent .pm-stat-num { color: #a8b6ff; }
.pm-stat-key {
  margin-top: 14px; font-family: "Geist Mono", monospace; font-size: 0.66rem;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--pm-ink-soft);
}
.pm-stat-note {
  margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--pm-rule);
  font-size: 0.86rem; line-height: 1.55; color: var(--pm-ink-soft);
}
.pm-drain { margin-top: 18px; height: 8px; border-radius: 999px; background: rgba(244, 242, 236, 0.1); overflow: hidden; }
.pm-drain i { display: block; height: 100%; border-radius: 999px; transform-origin: left center; background: linear-gradient(90deg, var(--pm-accent), #6b7bff); }
.pm-ticks { margin-top: 18px; display: flex; gap: 4px; height: 20px; align-items: flex-end; }
.pm-ticks i { flex: 1; height: 100%; border-radius: 2px; background: #6b7bff; }
.pm-ticks i.is-out { background: rgba(244, 242, 236, 0.14); }
.pm-freebar { margin-top: 18px; height: 8px; border-radius: 999px; background: rgba(244, 242, 236, 0.1); overflow: hidden; }
.pm-freebar i {
  display: block; height: 100%; width: 100%; border-radius: 999px;
  background: linear-gradient(90deg, transparent, #a8b6ff, transparent); transform: translateX(-100%);
}

/* ------------------------------------------------------------- act 3 */

.pm-zig-grid { display: grid; gap: 40px; align-items: center; }
@media (min-width: 900px) { .pm-zig-grid { grid-template-columns: 1fr 1.05fr; gap: 64px; } }
.pm-act-spend h2 { margin-top: 18px; }
.pm-act-spend .pm-lede { margin-top: 18px; }
.pm-plate { display: block; width: 100%; max-width: 300px; height: auto; margin-top: 28px; will-change: transform; }
@media (max-width: 899px) { .pm-plate { display: none; } }

.pm-spend { list-style: none; display: grid; gap: 22px; }
.pm-spend li { display: grid; gap: 10px; }
.pm-spend-label { font-size: 0.95rem; line-height: 1.45; max-width: 40ch; }
.pm-spend-bar { display: block; height: 10px; border-radius: 999px; background: rgba(22, 22, 29, 0.07); overflow: hidden; }
.pm-spend-bar i {
  display: block; height: 100%; width: var(--w); border-radius: 999px;
  background: linear-gradient(90deg, #b4544f, #d9776f);
  transform: scaleX(0); transform-origin: left center;
}
.pm-spend li.is-accent .pm-spend-label { color: var(--pm-accent); }
.pm-spend li.is-accent .pm-spend-bar i { background: linear-gradient(90deg, var(--pm-accent), #6b7bff); }

/* ------------------------------------------------------------- act 4 */

.pm-act-rewrite h2 { margin-top: 18px; max-width: 20ch; }
.pm-console {
  margin-top: 28px; border: 1px solid var(--pm-rule); border-radius: 14px;
  background: rgba(8, 8, 12, 0.72); overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}
.pm-console.is-accent { border-color: rgba(127, 147, 255, 0.45); box-shadow: 0 30px 90px rgba(31, 59, 224, 0.28); }
.pm-console-bar {
  display: flex; align-items: center; gap: 7px; padding: 10px 16px;
  border-bottom: 1px solid var(--pm-rule); background: rgba(244, 242, 236, 0.035);
}
.pm-console-bar i { width: 9px; height: 9px; border-radius: 50%; background: rgba(244, 242, 236, 0.2); }
.pm-console.is-accent .pm-console-bar i:first-child { background: #6b7bff; }
.pm-console-bar span {
  margin-left: auto; font-family: "Geist Mono", monospace; font-size: 0.64rem;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--pm-ink-soft);
}
.pm-console-body { padding: 20px; font-family: "Geist Mono", monospace; font-size: 0.86rem; line-height: 1.7; }
@media (min-width: 768px) { .pm-console-body { padding: 24px 26px; font-size: 0.9rem; } }
.pm-vague { display: flex; align-items: baseline; gap: 10px; color: #c9c5d6; }
.pm-sign { color: #b4544f; }
.pm-order { display: flex; flex-direction: column; gap: 12px; }
.pm-order p { color: #d8d5e4; }
.pm-order b { font-weight: 400; color: #a8b6ff; }
.pm-morph { display: flex; justify-content: center; padding: 12px 0 0; color: #6b7bff; }

/* ------------------------------------------------------------- act 5 */

.pm-act-steps h2 { margin-top: 18px; }
.pm-rail { position: relative; margin-top: 44px; padding-left: 62px; }
.pm-rail-line { position: absolute; left: 21px; top: 22px; width: 2px; height: calc(100% - 44px); color: var(--pm-accent); opacity: 0.5; }
.pm-act-steps ol { list-style: none; display: grid; gap: 44px; }
.pm-act-steps li { display: grid; gap: 14px; position: relative; }
@media (min-width: 768px) { .pm-act-steps li { grid-template-columns: 1fr 1.4fr; gap: 40px; align-items: start; } }
.pm-n {
  position: absolute; left: -62px; top: -2px; width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; font-family: "Geist Mono", monospace; font-size: 0.74rem;
  color: var(--pm-accent); background: var(--pm-ground); border: 1px solid var(--pm-rule);
}
.pm-act-steps h3 { font-size: 1.3rem; font-weight: 500; letter-spacing: -0.025em; }
.pm-act-steps p { max-width: 52ch; font-size: 0.98rem; line-height: 1.6; color: var(--pm-ink-soft); }

/* ------------------------------------------------------------- act 6 */

.pm-close-inner { text-align: center; display: flex; flex-direction: column; align-items: center; }
.pm-glow {
  position: absolute; left: 50%; top: 50%; width: min(760px, 90vw); aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(31, 59, 224, 0.26), transparent 62%);
  pointer-events: none;
}
.pm-close-inner .pm-lede { margin: 20px auto 0; max-width: 46ch; color: var(--pm-ink-soft); }
.pm-close-inner .pm-cta-slab { margin-top: 36px; }
.pm-cta-slab[data-magnet] { will-change: transform; }
.pm-cta-slab[data-magnet] span { display: block; }

/* --------------------------------------------------------- epilogue */

.pm-epilogue { background: var(--pm-ground); padding: 112px 0; border-top: 1px solid var(--pm-rule); }
.pm-free { display: grid; gap: 32px; }
@media (min-width: 900px) { .pm-free { grid-template-columns: 1.4fr 1fr; gap: 56px; align-items: start; } }
.pm-free h3 { font-size: 1.6rem; letter-spacing: -0.03em; font-weight: 500; }
.pm-free > div > p { margin-top: 14px; max-width: 56ch; font-size: 1rem; line-height: 1.65; color: var(--pm-ink-soft); }
.pm-providers { list-style: none; margin-top: 22px; display: flex; flex-wrap: wrap; gap: 8px; }
.pm-providers li {
  font-family: "Geist Mono", monospace; font-size: 0.72rem;
  border: 1px solid var(--pm-rule); border-radius: 999px; padding: 7px 14px; color: var(--pm-ink-soft);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.pm-providers li:hover { border-color: var(--pm-accent); color: var(--pm-ink); }
.pm-epilogue-cta { margin-top: 28px; }
.pm-note { font-size: 0.8rem; line-height: 1.6; color: var(--pm-ink-soft); border-left: 2px solid var(--pm-rule); padding-left: 16px; }

.pm-footer {
  border-top: 1px solid var(--pm-rule); max-width: 1180px; margin: 0 auto;
  padding: 40px 24px; display: flex; flex-direction: column; gap: 12px;
}
@media (min-width: 768px) { .pm-footer { flex-direction: row; align-items: center; justify-content: space-between; padding: 40px; } }
.pm-footer p { font-size: 0.7rem; color: var(--pm-ink-soft); }

/* Every animated element has a static fallback. */
@media (prefers-reduced-motion: reduce) {
  .pm-cta-slab, .pm-cta-line { transition: none; }
}

/* Visually hidden, still announced. */
.pm-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* A pinned act cannot be scrolled, so its content MUST fit the stage. On narrow
   screens the three stat cards stack and overflowed by ~180px, which put the
   third card off-stage with no way to reach it. The figure and its label are
   the claim; the supporting sentence is detail the epilogue already carries at
   length, so that is what gives way rather than the card itself. */
@media (max-width: 600px) {
  .pm-act-inner { padding: 76px 20px; }
  .pm-stat-grid { margin-top: 26px; gap: 10px; }
  .pm-stat { padding: 16px 18px 14px; }
  .pm-stat-num { font-size: 2.1rem; }
  .pm-stat-key { margin-top: 8px; }
  .pm-stat-note { display: none; }
  .pm-drain, .pm-ticks, .pm-freebar { margin-top: 12px; }
  .pm-ticks { height: 16px; }
}

/* Brand lockup. Height-driven so every placement keeps the 4:1 ratio.
   Without this the raw 1157x289 asset paints at full width. */
.pm-mark img { display: block; height: 30px; width: auto; }
.pm-badge .pm-mark img { height: 26px; }
.pm-footer .pm-mark img { height: 28px; }

/* text.split wraps each word so a line can never break inside one. */
[data-split] [data-word] { display: inline-block; white-space: nowrap; }