/* The few product-page rules the campaign page uses (from assets/pages/product/product.css, 23 Oct 2026).
   The campaign page no longer loads the product stylesheets (40 KB, nearly all unused here), so keep these
   in step with product.css by hand if the shared section styles (.pp, .pp-k, .pp-h, .pp-sub) change. */
:root:has(body.pdp) { background: var(--void); }
.pdp {
  --pp-acc: #8fb4ff; --pp-text: rgb(255 255 255 / .72); --pp-soft: rgb(255 255 255 / .6);
  --pp-line: rgb(255 255 255 / .08); --pp-line-2: rgb(255 255 255 / .14); --pp-ease: cubic-bezier(.22, .61, .36, 1);
  background: var(--void); color: var(--paper);
}
.pdp ::selection { background: rgb(0 98 254 / .55); color: #fff; }
.pp-main { color-scheme: dark; }
.pp { position: relative; padding-block: clamp(3.5rem, 6.5vw, 6rem); scroll-margin-top: calc(var(--nav-h) - 1px); }
.pp-k {
  display: flex; align-items: center; gap: .625rem;
  font-family: var(--mono); font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: rgb(255 255 255 / .66);
}
.pp-k__dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--pp-acc); box-shadow: none; }
.pp-h {
  max-width: 18ch; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); font-weight: 300; letter-spacing: -.04em; line-height: 1.04;
  color: var(--paper); text-wrap: balance;
}
.pp-sub { max-width: 44ch; font-size: var(--step-1); font-weight: 300; line-height: 1.55; color: var(--pp-text); text-wrap: pretty; }
/* product.css's mock-up grid (.mk) also matches this page's <body class="pdp mk mkb">, so the body has always
   been a grid here; kept, so nothing on the page moves */
.mk { display: grid; grid-template-columns: calc(var(--u) * 200) minmax(0, 1fr); }
@media (width <= 639px) {
  .pp { padding-block: 4rem; }
}