/*
 * One Ticket's product pages and homepage ("Night and Paper"): published
 * by the copy at /m/products.css, linked after /m/brand.css and
 * /m/fixes.css on those pages only (tooling/marketing src/products).
 * Huge serif headlines with one italic word in the brand gradient, white
 * and paper grounds with night bands, real screens in phone and browser
 * frames. The gradient (#5b4fe0 → #9a5de6 → #ee6aa7) is the only accent.
 * Contrast: ink #0b0b0f on paper 19:1, muted #4a4a55 on paper 8.6:1, faint
 * #5f5f6b 6:1; on night #f5f5f8 18:1, muted #b4b4c4 9.7:1, faint #9a9aab
 * 7:1. The gradient words (.pp-gx) take their own stops per ground, each
 * 3.9:1 or more (large text): #5b4fe0 → #9a5de6 → #c2417f on paper and
 * white, #9d95ff → #c4a1ff → #ff9cc8 on night and on the FAQ card.
 * Motion (the motion block, with products-motion.js) is off under
 * prefers-reduced-motion, and hides nothing without the script.
 */

/* The fonts' size-matched fallbacks, the font stacks and the headline
   sizes are /m/type.css's (linked on every marketing page, this one's
   included), shared with the other pages */

.pp {
  --pp-g1: #5b4fe0;
  --pp-g2: #9a5de6;
  --pp-g3: #ee6aa7;
  --pp-grad: linear-gradient(
    90deg,
    var(--pp-g1),
    var(--pp-g2) 55%,
    var(--pp-g3)
  );
  --pp-grad-diag: linear-gradient(
    135deg,
    var(--pp-g1),
    var(--pp-g2) 55%,
    var(--pp-g3)
  );
  --pp-grad-text: linear-gradient(90deg, #5b4fe0, #9a5de6 55%, #c2417f);
  --pp-serif: var(--ot-serif);
  --pp-sans: var(--ot-sans);
  --pp-mono: var(--ot-mono);
  --pp-wrap: 1200px;
  --pp-gutter: clamp(16px, 4vw, 32px);
  background: #f8f8fa;
  font-family: var(--pp-sans);
  overflow-x: clip;
}

/* The homepage leads dark (owner, 2026-10-22): its shell under the
   header is night, and the header and its Products menu take the night
   palette (brand.css sets the light one, so this outranks it) */
.pp.is-dark-top {
  background: #0b0b0f;
}
html body .pp.is-dark-top .ot-header {
  --ot-bg: #0b0b0f !important;
  --ot-surface: #15151c !important;
  --ot-surface-2: #1d1d26 !important;
  --ot-text: #f5f5f8 !important;
  --ot-muted: #b4b4c4 !important;
  --ot-faint: #9a9aab !important;
  --ot-border: rgba(255, 255, 255, 0.12) !important;
  --ot-border-strong: rgba(255, 255, 255, 0.3) !important;
  --ot-link: #c8c3ff !important;
  --ot-link-hover: #e0ddff !important;
  --ot-cta: #ffffff !important;
  --ot-cta-hover: #e5e5ec !important;
  --ot-cta-ink: #0b0b0f !important;
  --ot-accent: #c8c3ff !important;
  --ot-accent-soft: rgba(255, 255, 255, 0.1) !important;
  --ot-focus-ring: #c8c3ff !important;
  color-scheme: dark;
}
/* (the white Log in button keeps its own dark ring, fixes.css) */
html body .pp.is-dark-top .ot-header a:not(.ot-header-cta):focus-visible,
html body .pp.is-dark-top .ot-header button:focus-visible {
  outline-color: #c8c3ff !important;
}
html body .pp.is-dark-top .ot-products-ico {
  background: rgba(255, 255, 255, 0.08);
  color: #c4a1ff;
}
html body .pp.is-dark-top .ot-products-menu {
  background: #15151c;
}

/* A section's ground sets its own ink */
.pp-sec.is-paper,
.pp-sec.is-white {
  --bg: #f8f8fa;
  --ink: #0b0b0f;
  --muted: #4a4a55;
  --faint: #5f5f6b;
  --line: #e5e5ec;
  --card: rgba(255, 255, 255, 0.78);
  --card-solid: #ffffff;
  --card-line: rgba(11, 11, 15, 0.09);
  --btn: #0b0b0f;
  --btn-ink: #ffffff;
  --ghost-line: rgba(11, 11, 15, 0.22);
  --glass: rgba(255, 255, 255, 0.78);
  --glow-a: rgba(154, 93, 230, 0.18);
  --glow-b: rgba(238, 106, 167, 0.16);
  --good: #0b6b47;
  --focus: #4f46e5;
}
.pp-sec.is-white {
  --bg: #ffffff;
  --card: rgba(248, 248, 250, 0.9);
  --card-solid: #f8f8fa;
}
.pp-sec.is-night {
  --bg: #0b0b0f;
  --ink: #f5f5f8;
  --muted: #b4b4c4;
  --faint: #9a9aab;
  --line: rgba(255, 255, 255, 0.12);
  --card: rgba(255, 255, 255, 0.05);
  --card-solid: #15151c;
  --card-line: rgba(255, 255, 255, 0.11);
  --btn: #ffffff;
  --btn-ink: #0b0b0f;
  --ghost-line: rgba(255, 255, 255, 0.3);
  --glass: rgba(20, 20, 28, 0.7);
  --glow-a: rgba(91, 79, 224, 0.42);
  --glow-b: rgba(238, 106, 167, 0.28);
  --good: #6ee7b7;
  --focus: #c8c3ff;
  --pp-grad-text: linear-gradient(90deg, #9d95ff, #c4a1ff 55%, #ff9cc8);
}

html body .pp-main {
  display: block;
  max-width: none;
  margin: 0;
  padding: 0;
}
.pp-sec {
  position: relative;
  padding-block: clamp(72px, 11vw, 144px);
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--pp-sans);
  font-size: 17px;
  line-height: 1.6;
}
.pp-sec * {
  box-sizing: border-box;
}
.pp-sec img {
  display: block;
  max-width: 100%;
}
.pp-sec a {
  color: inherit;
}
.pp-sec :focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
}
.pp-wrap {
  position: relative;
  z-index: 1;
  max-width: var(--pp-wrap);
  margin: 0 auto;
  padding-inline: var(--pp-gutter);
}
.pp-center {
  text-align: center;
}
.pp-vh {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ------------------------------------------------------------- type */
.pp-display,
.pp-h2,
.pp-h3 {
  margin: 0;
  font-family: var(--pp-serif);
  font-weight: 400;
  letter-spacing: -0.015em;
  color: var(--ink);
  text-wrap: balance;
}
.pp-display {
  font-size: var(--ot-display);
  line-height: 0.95;
}
.pp-display.is-closer {
  font-size: clamp(50px, 8vw, 104px);
}
.pp-h2 {
  font-size: var(--ot-h2);
  line-height: 1;
}
.pp-h3 {
  font-size: clamp(30px, 3.2vw, 40px);
  line-height: 1.05;
}
.pp-sec em {
  font-style: italic;
}
.pp-gx {
  padding-right: 0.06em;
  padding-bottom: 0.06em;
  background: var(--pp-grad-text);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #9a5de6;
}
.pp-lede {
  max-width: 580px;
  margin: 22px auto 0;
  color: var(--muted);
  font-size: clamp(17px, 1.6vw, 20px);
  line-height: 1.55;
}
.pp-body {
  margin: 14px 0 0;
  color: var(--muted);
}
.pp-body.pp-big {
  max-width: 520px;
  font-size: 19px;
}
.pp-eyebrow {
  /* the words and a plan pill wrap as two items, never jammed */
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 0 0 18px;
  color: var(--faint);
  font: 500 12px/1.6 var(--pp-mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.pp-mono {
  margin: 0;
  color: var(--faint);
  font: 500 12px/1.4 var(--pp-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pp-note {
  margin: 16px 0 0;
  color: var(--faint);
  font-size: 14px;
}
.pp-head {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.pp-sec a:not([class]) {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ------------------------------------------------------------- buttons */
.pp-btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 34px;
}
.pp-btns.is-left {
  justify-content: flex-start;
}
.pp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 52px;
  padding: 0 26px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--btn);
  color: var(--btn-ink) !important;
  font: 600 16px/1 var(--pp-sans);
  text-decoration: none;
}
.pp-btn:hover {
  box-shadow: 0 10px 30px var(--glow-a);
}
.pp-btn svg {
  width: 16px;
  height: 16px;
}
.pp-btn.is-ghost {
  border-color: var(--ghost-line);
  background: transparent;
  color: var(--ink) !important;
}

/* plan pills */
.pp-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(91, 79, 224, 0.1);
  color: #4338ca;
  font: 600 11px/1.5 var(--pp-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  vertical-align: middle;
}
.pp-pill.is-free {
  background: rgba(16, 150, 100, 0.12);
  color: #0b6b47;
}
.is-night .pp-pill {
  background: rgba(154, 93, 230, 0.22);
  color: #e0dcff;
}
.is-night .pp-pill.is-free {
  background: rgba(16, 150, 100, 0.22);
  color: #a7f0cf;
}

/* ------------------------------------------------------------- glows */
.pp-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.pp-glow::before,
.pp-glow::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
}
.pp-glow::before {
  left: 50%;
  top: 40%;
  width: 62vw;
  height: 62vw;
  max-width: 900px;
  max-height: 900px;
  transform: translateX(-78%);
  background: radial-gradient(closest-side, var(--glow-a), transparent);
}
.pp-glow::after {
  left: 50%;
  top: 48%;
  width: 52vw;
  height: 52vw;
  max-width: 760px;
  max-height: 760px;
  transform: translateX(-12%);
  background: radial-gradient(closest-side, var(--glow-b), transparent);
}
.pp-glow.is-soft {
  opacity: 0.6;
}
.pp-halo {
  position: absolute;
  inset: 8% 10%;
  border-radius: 50%;
  filter: blur(60px);
  background:
    radial-gradient(closest-side, var(--glow-a), transparent),
    radial-gradient(closest-side at 70% 70%, var(--glow-b), transparent);
}

/* ------------------------------------------------------------- devices */
.pp-phone {
  --sb: #ffffff;
  --sbi: #0b0b0f;
  position: relative;
  flex: none;
  width: min(300px, 74vw);
  padding: 9px;
  border-radius: 50px;
  background: linear-gradient(160deg, #2b2b35, #0b0b0f 40%, #23232c);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.08) inset,
    0 50px 90px -20px rgba(40, 20, 90, 0.45),
    0 18px 36px -12px rgba(0, 0, 0, 0.35);
}
.pp-phone.is-dark {
  --sb: #0b0b0f;
  --sbi: #ffffff;
}
.pp-phone.is-sm {
  width: min(250px, 64vw);
  border-radius: 42px;
}
.pp-screen {
  overflow: hidden;
  border-radius: 41px;
  background: var(--sb);
}
.pp-phone.is-sm .pp-screen {
  border-radius: 34px;
}
.pp-status {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  padding: 0 24px 0 28px;
  background: var(--sb);
  color: var(--sbi);
  font: 600 13px/1 var(--pp-sans);
}
.pp-status::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 8px;
  width: 84px;
  height: 22px;
  border-radius: 20px;
  background: #000;
  transform: translateX(-50%);
}
.pp-status i {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pp-status b {
  display: block;
  width: 16px;
  height: 9px;
  border: 1.5px solid currentColor;
  border-radius: 3px;
}
.pp-status s {
  display: block;
  width: 14px;
  height: 9px;
  background: currentColor;
  clip-path: polygon(0 100%, 100% 0, 100% 100%);
}
.pp-phone img {
  width: 100%;
  height: auto;
  aspect-ratio: 390 / 760;
  object-fit: cover;
  object-position: top;
}
.pp-browser {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(11, 11, 15, 0.1);
  border-radius: 16px;
  background: #fff;
  box-shadow:
    0 50px 100px -30px rgba(40, 20, 90, 0.4),
    0 12px 30px -10px rgba(0, 0, 0, 0.18);
}
.is-night .pp-browser {
  border-color: rgba(255, 255, 255, 0.14);
}
.pp-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  height: 38px;
  padding: 0 14px;
  border-bottom: 1px solid #e5e5ec;
  background: #f3f3f7;
}
.pp-bar u {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #d6d6de;
}
.pp-bar span {
  margin: 0 auto;
  padding: 4px 14px;
  border-radius: 8px;
  background: #fff;
  color: #5f5f6b;
  font: 500 12px/1.2 var(--pp-sans);
}
.pp-browser img {
  width: 100%;
  height: auto;
  aspect-ratio: 1600 / 1000;
  object-fit: cover;
  object-position: top left;
}
.pp-wide-shot {
  max-width: 1040px;
  margin: 64px auto 0;
}

/* a glass chip beside a device */
.pp-chip {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 290px;
  padding: 14px 16px;
  border: 1px solid var(--card-line);
  border-radius: 18px;
  background: var(--glass);
  box-shadow: 0 20px 50px -18px rgba(20, 10, 60, 0.45);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  color: var(--ink);
  font-size: 14px;
  line-height: 1.35;
  text-align: left;
}
.pp-chip small {
  display: block;
  color: var(--muted);
  font-size: 12.5px;
}
.pp-chip-dot {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 12px;
  background: var(--pp-grad-diag);
  color: #fff;
}
.pp-chip-dot svg {
  width: 18px;
  height: 18px;
}

/* ------------------------------------------------------------- hero */
.pp-hero {
  padding-top: clamp(40px, 6vw, 80px);
}
.pp-hero.is-centre {
  padding-bottom: 0;
  text-align: center;
}
.pp-hero .pp-display {
  margin-top: 6px;
}
.pp-stage {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  height: clamp(440px, 52vw, 600px);
  margin-top: clamp(48px, 7vw, 80px);
  /* the devices run off its bottom edge only: their tops, sides, shadows
     and float stay whole */
  clip-path: inset(-120px -100vw 0 -100vw);
}
.pp-stage::after {
  content: '';
  position: absolute;
  inset: auto 0 0;
  z-index: 4;
  height: 160px;
  background: linear-gradient(transparent, var(--bg));
  pointer-events: none;
}
.pp-stage-browser {
  position: absolute;
  left: 50%;
  top: 70px;
  width: min(880px, 92%);
  transform: translateX(-58%);
}
.pp-stage-phone {
  z-index: 2;
  margin-left: min(52vw, 500px);
}
.pp-chip.is-a {
  left: max(1%, calc(50% - 600px));
  top: 10px;
}
.pp-chip.is-b {
  right: max(1%, calc(50% - 600px));
  top: 320px;
}
.pp-hero.is-split {
  padding-bottom: clamp(64px, 8vw, 120px);
}
.pp-split {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 48px;
  align-items: center;
}
.pp-split .pp-display {
  font-size: clamp(54px, 7.4vw, 104px);
}
.pp-split .pp-lede {
  margin-left: 0;
}
.pp-split .pp-btns {
  justify-content: flex-start;
}
.pp-split-media {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 600px;
}
.pp-split-media .is-back {
  position: absolute;
  right: 0;
  top: 90px;
  transform: rotate(4deg);
}
.pp-split-media .is-front {
  left: -60px;
  z-index: 2;
  transform: rotate(-3deg);
}
.pp-split-media .pp-chip.is-a {
  left: -10px;
  top: auto;
  bottom: 60px;
}

/* the strip of names (works with) */
.pp-sec.pp-strip {
  padding-block: 8px 40px;
}
.pp-works {
  max-width: 980px;
  margin: 0 auto;
  color: var(--muted);
  font-family: var(--pp-serif);
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.35;
}
.pp-works i {
  padding: 0 0.2em;
  color: var(--pp-g2);
  font-style: normal;
}

/* ------------------------------------------------------------- cards */
.pp-grid {
  display: grid;
  gap: 16px;
  margin-top: 64px;
}
.pp-grid.is-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.pp-grid.is-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.pp-card {
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: clamp(28px, 4vw, 52px);
  border: 1px solid var(--card-line);
  border-radius: 28px;
  background: var(--card-solid);
  text-align: center;
}
.pp-card.is-plain {
  text-align: left;
}
.pp-card .pp-body {
  max-width: 440px;
  margin-inline: auto;
}
.pp-card.is-plain .pp-h3 {
  margin: 6px 0 18px;
}
.pp-card-pill {
  margin: 0 0 16px;
}
.pp-card.is-glow {
  border-color: rgba(255, 255, 255, 0.2);
  background:
    radial-gradient(
      120% 90% at 20% 0%,
      rgba(91, 79, 224, 0.95),
      transparent 60%
    ),
    radial-gradient(
      90% 80% at 100% 100%,
      rgba(238, 106, 167, 0.85),
      transparent 60%
    ),
    linear-gradient(160deg, #5a43d6, #8b4fd8 50%, #b14fa5);
  color: #fff;
}
.pp-card.is-glow .pp-h3 {
  color: #fff;
}
.pp-card.is-glow .pp-body {
  color: #fff;
}
.pp-card.is-glow .pp-pill {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
}
.pp-card-crop {
  display: flex;
  justify-content: center;
  margin: 36px 0 calc(-1 * clamp(28px, 4vw, 52px));
  max-height: 420px;
}
.pp-card-crop .pp-phone {
  border-radius: 50px 50px 0 0;
}
.pp-card-screen {
  margin: 32px -8px calc(-1 * clamp(28px, 4vw, 52px));
}
.pp-step {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--pp-grad-diag);
  color: #fff;
  font: 600 13px/1 var(--pp-mono);
}

/* ------------------------------------------------------------- feature row */
.pp-feature {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.pp-feature > * {
  min-width: 0;
}
.pp-feature.is-flip .pp-feature-media {
  order: -1;
}
.pp-feature-media {
  position: relative;
  display: flex;
  justify-content: center;
  padding-block: 24px;
}
.pp-feature-media > :not(.pp-halo) {
  position: relative;
}
.pp-feature-media .is-behind {
  z-index: 1;
  margin: 80px -60px 0 0;
}
.pp-feature-media .is-main {
  z-index: 2;
}
.pp-feature.has-browser .pp-feature-media {
  padding-bottom: 60px;
}
.pp-feature.has-browser .is-main {
  width: 100%;
  max-width: 560px;
  align-self: center;
}
.pp-feature-media .is-over {
  position: absolute;
  right: 0;
  bottom: -10px;
  z-index: 3;
}
.pp-ticks {
  display: grid;
  gap: 12px;
  margin: 26px 0 0;
  padding: 0;
  list-style: none;
}
.pp-ticks li {
  position: relative;
  padding-left: 34px;
  color: var(--ink);
}
.pp-ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--pp-grad-diag);
}
.pp-ticks li::after {
  content: '';
  position: absolute;
  left: 7px;
  top: 8px;
  width: 8px;
  height: 5px;
  border-bottom: 2px solid #fff;
  border-left: 2px solid #fff;
  transform: rotate(-45deg);
}

/* ------------------------------------------------------------- showcase chips */
.pp-chips-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 40px 0 0;
  padding: 0;
  list-style: none;
}
.pp-chips-row li {
  padding: 10px 18px;
  border: 1px solid var(--card-line);
  border-radius: 999px;
  background: var(--card);
  font-size: 15px;
}

/* ------------------------------------------------------------- day cards */
.pp-days {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
}
.pp-day {
  width: 150px;
  padding: 18px 14px 20px;
  border: 1px solid var(--card-line);
  border-radius: 20px;
  background: var(--card-solid);
  text-align: center;
}
.pp-day.is-on {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--card-solid), var(--card-solid)) padding-box,
    var(--pp-grad-diag) border-box;
}
.pp-day .pp-mono {
  font-size: 11px;
}
.pp-day-ic {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 14px auto 12px;
  border-radius: 12px;
  background: var(--pp-grad-diag);
  color: #fff;
}
.pp-day-ic svg {
  width: 19px;
  height: 19px;
}
.pp-day b {
  display: block;
  font-family: var(--pp-serif);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.1;
}
.pp-day small {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

/* ------------------------------------------------------------- table */
.pp-table {
  margin-top: 48px;
  overflow-x: auto;
  border: 1px solid var(--card-line);
  border-radius: 22px;
  background: var(--card-solid);
}
.pp-table table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 15.5px;
}
.pp-table th,
.pp-table td {
  padding: 18px 22px;
  border-top: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.pp-table thead th {
  border-top: 0;
  color: var(--faint);
  font: 500 12px/1.3 var(--pp-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pp-table tbody th {
  width: 26%;
  font-weight: 600;
}
.pp-table td {
  color: var(--muted);
}

/* ------------------------------------------------------------- price */
.pp-price {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  margin-top: 56px;
  overflow: hidden;
  border: 1px solid var(--card-line);
  border-radius: 28px;
  background: var(--card-solid);
}
.pp-price-big {
  padding: clamp(32px, 5vw, 56px);
  background:
    radial-gradient(
      90% 120% at 0% 0%,
      rgba(91, 79, 224, 0.14),
      transparent 60%
    ),
    radial-gradient(
      80% 100% at 100% 100%,
      rgba(238, 106, 167, 0.14),
      transparent 60%
    );
}
.pp-price-big b {
  display: block;
  font-family: var(--pp-serif);
  font-size: clamp(96px, 13vw, 168px);
  font-weight: 400;
  line-height: 0.9;
}
.pp-price-line {
  margin: 14px 0 0;
  font-size: 19px;
  font-weight: 700;
}
.pp-price-rows {
  padding: clamp(28px, 4vw, 48px);
}
.pp-price-rows h3 {
  margin: 0 0 14px;
  font-size: 19px;
  font-weight: 700;
}
.pp-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  font-size: 15px;
}
.pp-row:first-of-type {
  border-top: 0;
}
.pp-row b {
  font-weight: 600;
}
.pp-row .is-good {
  color: var(--good);
}
.pp-plans {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}
.pp-plan {
  padding: 22px 22px 24px;
  border: 1px solid var(--card-line);
  border-radius: 20px;
  background: var(--card-solid);
}
.pp-plan b {
  font-family: var(--pp-serif);
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
}
.pp-plan span {
  color: var(--muted);
}
.pp-plan p:not(.pp-mono) {
  margin: 10px 0 0;
  color: var(--muted);
  font-size: 14.5px;
}

/* ------------------------------------------------------------- facts */
.pp-sec.pp-facts-sec {
  padding-block: clamp(32px, 4vw, 48px) clamp(48px, 7vw, 88px);
}
.pp-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--card-line);
  border-radius: 22px;
  background: var(--card-line);
  list-style: none;
}
.pp-facts li {
  padding: 26px 22px;
  background: var(--bg);
  text-align: center;
}
.pp-facts b {
  display: block;
  font-family: var(--pp-serif);
  font-size: 44px;
  font-weight: 400;
  line-height: 1;
}
.pp-facts li > span {
  display: block;
  margin-top: 8px;
  color: var(--faint);
  font: 500 11.5px/1.4 var(--pp-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ------------------------------------------------------------- product grid */
.pp-bento {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 16px;
  margin-top: 64px;
}
.pp-tile {
  position: relative;
  display: flex;
  flex-direction: column;
  grid-column: span 2;
  min-height: 380px;
  padding: 28px 28px 0;
  overflow: hidden;
  border: 1px solid var(--card-line);
  border-radius: 28px;
  background: var(--card-solid);
  color: var(--ink);
  text-decoration: none;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    border-color 0.25s ease;
}
.pp-tile:hover {
  border-color: rgba(154, 93, 230, 0.5);
  box-shadow: 0 30px 60px -30px rgba(40, 20, 90, 0.35);
}
.pp-tile.is-wide {
  grid-column: span 3;
}
.pp-tile-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-right: 48px;
}
.pp-tile h3 {
  margin: 12px 0 0;
  font-family: var(--pp-serif);
  font-size: 32px;
  font-weight: 400;
  line-height: 1.05;
}
.pp-tile p {
  max-width: 380px;
  /* room before the picture's edge */
  margin: 10px 0 26px;
  color: var(--muted);
  font-size: 15.5px;
}
.pp-tile-go {
  position: absolute;
  top: 24px;
  right: 24px;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 1px solid var(--card-line);
  border-radius: 50%;
}
.pp-tile-go svg {
  width: 16px;
  height: 16px;
}
.pp-tile:hover .pp-tile-go {
  background: var(--ink);
  color: var(--bg);
}
.pp-peek {
  display: flex;
  justify-content: center;
  margin-top: auto;
}
.pp-peek img {
  width: 78%;
  height: 230px;
  object-fit: cover;
  object-position: top;
  border: 1px solid var(--card-line);
  border-bottom: 0;
  border-radius: 22px 22px 0 0;
}
.pp-peek.is-desk img {
  width: 100%;
  border-radius: 12px 12px 0 0;
  object-position: top left;
}

/* the grid's drawn pictures (mocks.ts): one part of a product each */
.pp-mock {
  position: relative;
  align-items: center;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  /* on the card's own ground, no panel of its own (owner, 2026-10-22) */
  min-height: 230px;
  padding: 0 0 28px;
  color: #0b0b0f;
  font-size: 13px;
  line-height: 1.3;
  text-align: left;
}
.pp-mock > * {
  display: flex;
}
.pp-mock small {
  display: block;
  color: #5f5f6b;
  font-size: 11.5px;
}
.pp-mock-card {
  flex-direction: column;
  width: min(100%, 420px);
  border: 1px solid rgba(11, 11, 15, 0.09);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 48px -28px rgba(40, 20, 90, 0.35);
}
.pp-mock-card {
  padding: 6px;
}
.pp-mock-tier {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 12px;
}
.pp-mock-tier.is-on {
  background: #f4f1ff;
  box-shadow: inset 0 0 0 1.5px #5b4fe0;
}
.pp-mock-tier-name {
  flex: 1;
  font-weight: 600;
}
.pp-mock-left {
  color: #0b6b47;
  font-size: 12px;
  font-weight: 600;
}
.pp-mock-step {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pp-mock-step i {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border: 1px solid rgba(11, 11, 15, 0.18);
  border-radius: 50%;
  font-style: normal;
}
.pp-mock-pill {
  padding: 6px 14px;
  border-radius: 999px;
  background: #0b0b0f;
  color: #fff;
  font-weight: 600;
}
.pp-mock-days {
  justify-content: center;
  gap: 10px;
  width: min(100%, 340px);
}
.pp-mock-day {
  position: relative;
  display: flex;
  flex: 1 1 0;
  max-width: 74px;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 12px 0;
  border: 1px solid rgba(11, 11, 15, 0.09);
  border-radius: 16px;
  background: #fff;
}
.pp-mock-day b {
  font-family: var(--pp-serif);
  font-size: 34px;
  font-weight: 400;
  line-height: 1.1;
}
.pp-mock-day.is-done {
  background: #f3f3f6;
  color: #5f5f6b;
}
.pp-mock-day.is-next {
  border-color: transparent;
  background: var(--pp-grad-diag) border-box;
  color: #fff;
}
.pp-mock-day.is-next small {
  color: rgba(255, 255, 255, 0.85);
}
/* the session gone by: a tick in its month's place, the same height */
.pp-mock-done {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: #0b6b47;
  color: #fff;
}
.pp-mock-done svg {
  width: 10px;
  height: 10px;
}
.pp-mock.is-countdown {
  color: #f5f5f8;
}
.pp-mock-room > * {
  display: flex;
}
/* the watch room: a dark inset on the light card */
.pp-mock-room {
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: min(100%, 300px);
  padding: 22px 18px;
  border-radius: 20px;
  background:
    radial-gradient(
      90% 80% at 50% 120%,
      rgba(154, 93, 230, 0.45),
      transparent 70%
    ),
    #0b0b0f;
}
.pp-mock-badge {
  align-items: center;
  gap: 8px;
  padding: 5px 12px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  font: 600 11px/1.4 var(--pp-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pp-mock-badge i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ff9cc8;
}
.pp-mock-label {
  color: #b4b4c4;
}
.pp-mock-units {
  gap: 10px;
}
.pp-mock-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 70px;
  padding: 10px 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
}
.pp-mock-unit b {
  font-family: var(--pp-serif);
  font-size: 34px;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}
.pp-mock.is-countdown small {
  color: #9a9aab;
}
.pp-mock.is-door {
  flex-direction: row;
  gap: 18px;
}
.pp-mock-ok {
  display: grid;
  flex: none;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #0b6b47;
  box-shadow: 0 0 0 12px rgba(16, 150, 100, 0.14);
  color: #fff;
}
.pp-mock-ok svg {
  width: 52px;
  height: 52px;
}
.pp-mock-ok-text {
  flex-direction: column;
}
.pp-mock-ok-text b {
  font-family: var(--pp-serif);
  font-size: 30px;
  font-weight: 400;
  line-height: 1.1;
}

/* ------------------------------------------------------------- ask */
.pp-spark {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto 22px;
  color: var(--pp-g2);
}
.pp-spark svg {
  width: 48px;
  height: 48px;
  fill: currentColor;
  stroke: none;
}
.pp-ask {
  max-width: 720px;
  margin: 48px auto 0;
}
.is-night .pp-ask-in {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 12px 12px 12px 26px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  font-size: 18px;
  text-align: left;
}
.is-night .pp-ask-go {
  display: grid;
  flex: none;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-left: auto;
  border-radius: 50%;
  background: #fff;
  color: #0b0b0f;
}
.is-night .pp-ask-go svg {
  width: 20px;
  height: 20px;
}
.is-night .pp-ask-out {
  max-width: 560px;
  margin: 14px 0 0 auto;
  padding: 18px 20px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 17px;
  text-align: left;
}
.is-night .pp-ask-out .pp-mono {
  display: block;
  margin-bottom: 8px;
}

/* ------------------------------------------------------------- guides */
.pp-guides {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  max-width: 980px;
  margin: 48px auto 0;
  padding: 0;
  list-style: none;
}
.pp-guides a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding: 16px 22px;
  border: 1px solid var(--card-line);
  border-radius: 18px;
  background: var(--card-solid);
  font-weight: 600;
  text-decoration: none;
}
.pp-guides a:hover {
  border-color: rgba(154, 93, 230, 0.5);
}
.pp-guides svg {
  flex: none;
  width: 16px;
  height: 16px;
}

/* ------------------------------------------------------------- FAQ: the blog's
   "Answers to your questions" card (faq.ts), two columns on a laptop */
.pp-sec.pp-faq-sec {
  padding-block: 0 clamp(64px, 8vw, 104px);
}
.pp .bl-qa {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 48px;
  padding: clamp(28px, 5vw, 64px);
  border-radius: 28px;
  background: #1b1c1e;
  color: #f4f4f6;
}
/* on a night band the card keeps an edge */
.pp-sec.is-night .bl-qa {
  border: 1px solid rgba(255, 255, 255, 0.12);
}
.pp .bl-qa h2 {
  margin: 0;
  color: #fff;
  font-family: var(--pp-serif);
  font-size: clamp(38px, 4.4vw, 56px);
  font-weight: 400;
  line-height: 1.04;
}
.pp .bl-qa h2 em {
  font-style: italic;
  background: linear-gradient(90deg, #9d95ff, #c4a1ff 55%, #ff9cc8);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #c4b5fd;
}
.pp .bl-qa-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.pp .bl-qa-item {
  border-radius: 18px;
  background: #2a2b2e;
}
.pp .bl-qa-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 60px;
  padding: 16px 20px;
  border-radius: 18px;
  color: #f4f4f6;
  cursor: pointer;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.35;
  list-style: none;
}
.pp .bl-qa-item > summary::-webkit-details-marker {
  display: none;
}
@media (hover: hover) {
  .pp .bl-qa-item > summary:hover {
    background: #323337;
  }
}
.pp .bl-qa-item > summary:focus-visible {
  outline: 3px solid #a5b4fc;
  outline-offset: 2px;
}
.pp .bl-qa-icon {
  position: relative;
  flex: none;
  width: 22px;
  height: 22px;
}
.pp .bl-qa-icon::before,
.pp .bl-qa-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 1.5px;
  border-radius: 1px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform 0.2s ease;
}
.pp .bl-qa-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
.pp .bl-qa-item[open] .bl-qa-icon::after {
  transform: translate(-50%, -50%) rotate(0deg);
}
.pp .bl-qa-a {
  padding: 0 20px 22px;
}
.pp .bl-qa-a p {
  margin: 0;
  color: #c8c8d0;
  font-size: 15.5px;
  line-height: 1.6;
}

/* ------------------------------------------------------------- closer */
.pp-sec.pp-closer {
  padding-bottom: 0;
  text-align: center;
}
.pp-closer-stage {
  position: relative;
  display: flex;
  justify-content: center;
  gap: 28px;
  height: 420px;
  margin-top: 64px;
  overflow: hidden;
}
.pp-closer-stage .pp-phone.is-sm {
  margin-top: 70px;
}

/* ------------------------------------------------------------- motion */
/*
 * Reveals (products-motion.js, after useorigin.com's: sections rise and
 * fade in once, headlines slide up word by word, screens ease in, figures
 * count up, night bands fade their ground in). Every hidden state is under
 * html.pm, which only that script sets, and only without reduced motion:
 * with no script, in print or under reduced motion every word shows.
 * Transform and opacity only (the night bands' ground aside): nothing
 * moves anything else. The hero plays at once (keyframes, no observer).
 */
.pp-num {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}
.pp-ask-q {
  position: relative;
}
.pp-ask-typed {
  position: absolute;
  inset: 0;
}
@media (prefers-reduced-motion: no-preference) {
  .pp-float {
    animation: pp-float 7s ease-in-out infinite;
  }
  .pp-float.is-late {
    animation-delay: -3.5s;
  }
  .pp-tile:hover {
    transform: translateY(-3px);
  }
  .pp-btn {
    transition:
      transform 0.2s ease,
      box-shadow 0.2s ease;
  }
  .pp-btn:hover {
    transform: translateY(-1px);
  }
  /* the hero's laptop and back phone drift up a little as it scrolls away */
  @supports (animation-timeline: view()) {
    .pp-stage-browser,
    .pp-split-media .is-back {
      animation: pp-drift linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 100%;
    }
  }
}
@media screen and (prefers-reduced-motion: no-preference) {
  /* prerendered and not yet shown (products-motion.js): the hero waits */
  html.pm.pm-pre .pp-hero,
  html.pm.pm-pre .pp-hero * {
    animation-play-state: paused;
  }
  /* page-motion.js's rise of <main>: the hero has its own */
  html.pm:not(.ot-exiting) .pp-main.ot-page-enter {
    animation: none;
  }

  /* blocks rise and fade in; a list's items follow one another */
  html.pm .pp-rise,
  html.pm .pp-stagger > *,
  html.pm .pp-faq-sec .bl-qa,
  html.pm .pp-faq-sec .bl-qa-item {
    transition:
      opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
      translate 1s cubic-bezier(0.22, 1, 0.36, 1),
      scale 1s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--d, 0ms);
  }
  html.pm .pp-stagger > *,
  html.pm .pp-faq-sec .bl-qa-item {
    transition-delay: calc(var(--d, 0ms) + 120ms + var(--i, 0) * 70ms);
  }
  html.pm .pp-rise:not(.pp-stagger):not(.is-in),
  html.pm .pp-rise.pp-stagger:not(.is-in) > *,
  html.pm .pp-rise:not(.is-in) .pp-mock .pp-stagger > *,
  html.pm .pp-faq-sec .bl-qa:not(.is-in),
  html.pm .pp-faq-sec .bl-qa:not(.is-in) .bl-qa-item {
    opacity: 0;
    translate: 0 32px;
  }
  html.pm .pp-rise:not(.is-in) .pp-ticks > * {
    opacity: 0;
    translate: -12px 0;
  }

  /* screens: a touch smaller, then full size */
  html.pm .pp-feature-media:not(.is-in),
  html.pm .pp-wide-shot:not(.is-in) {
    scale: 0.94;
  }

  /* headlines: each word slides up out of its own mask */
  html.pm .pp-words .pp-w {
    display: inline-block;
    overflow: clip;
    vertical-align: top;
    margin: -0.15em -0.25em -0.45em;
    padding: 0.15em 0.25em 0.45em;
  }
  html.pm .pp-words .pp-w > span {
    display: inline-block;
    transition: translate 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: calc(var(--d, 0ms) + var(--i, 0) * 60ms);
  }
  html.pm .pp-sec:not(.pp-hero) .pp-words:not(.is-in) .pp-w > span {
    translate: 0 110%;
  }
  html.pm .pp-hero .pp-words .pp-w > span {
    animation: pp-word 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards;
    animation-delay: calc(80ms + var(--i, 0) * 60ms);
  }
  /* the gradient rides on each word (products-motion.js sizes and places
     it: an inline-block inside background-clip:text drops out in Safari) */
  html.pm .pp-words .pp-gx {
    background: none;
  }
  html.pm .pp-words .pp-gx .pp-w > span {
    /* the same room as its mask, inside the painted box
       (background-clip:text paints only there) */
    margin: -0.15em -0.25em -0.45em;
    padding: 0.15em 0.25em 0.45em;
    background-image: var(--pp-grad-text);
    -webkit-background-clip: text;
    background-clip: text;
  }

  /* the hero's other parts follow its headline */
  /* the hero's other parts settle in from the first paint (never fully
     hidden: the largest paint is often its lede or its phone) */
  html.pm .pp-hero .pp-eyebrow,
  html.pm .pp-hero .pp-lede,
  html.pm .pp-hero .pp-btns,
  html.pm .pp-hero .pp-note {
    animation: pp-up 0.9s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }
  html.pm .pp-hero .pp-btns {
    animation-delay: 0.1s;
  }
  html.pm .pp-hero .pp-note {
    animation-delay: 0.15s;
  }
  html.pm .pp-hero .pp-stage,
  html.pm .pp-hero .pp-split-media {
    animation: pp-device 1.2s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }

  /* night bands: after a light one the ground fades in from paper, then
     what's on it */
  html.pm .pp-sec.is-night:not(.pp-hero) {
    transition: background-color 0.6s ease-out;
  }
  html.pm .pp-sec.is-night:not(.pp-hero) > * {
    transition: opacity 0.7s ease 0.15s;
  }
  html.pm
    :is(.pp-sec.is-paper, .pp-sec.is-white)
    + .pp-sec.is-night:not(.pp-hero):not(.is-in) {
    background-color: #f8f8fa;
  }
  html.pm .pp-sec.is-night:not(.pp-hero):not(.is-in) > * {
    opacity: 0;
  }

  /* the grid's drawn pictures: rows and days arrive, the tick pops and
     draws (the countdown ticks: products-motion.js) */
  html.pm .pp-mock-ok {
    transition: scale 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s;
  }
  html.pm .pp-tile:not(.is-in) .pp-mock-ok {
    scale: 0.6;
  }
  html.pm .pp-mock svg path {
    stroke-dasharray: 1;
    transition: stroke-dashoffset 0.6s ease 0.7s;
  }
  html.pm .pp-tile:not(.is-in) .pp-mock svg path {
    stroke-dashoffset: 1;
  }
  html.pm .pp-mock-badge i {
    animation: pp-caret 1.6s ease-in-out infinite;
  }

  /* the Assistant's question types itself, then the answer shows */
  html.pm .pp-ask:not(.is-typed) .pp-ask-real {
    opacity: 0;
  }
  html.pm .pp-ask.is-typing .pp-ask-typed::after {
    content: '';
    display: inline-block;
    width: 2px;
    height: 1.1em;
    margin-left: 2px;
    vertical-align: -0.15em;
    background: currentColor;
    animation: pp-caret 1s steps(1) infinite;
  }
  html.pm .pp-ask.is-sent .pp-ask-go {
    animation: pp-press 0.3s ease;
  }
  html.pm .pp-ask-out {
    transition:
      opacity 0.6s ease,
      translate 0.8s cubic-bezier(0.22, 1, 0.36, 1);
  }
  html.pm .pp-ask:not(.is-typed) .pp-ask-out {
    opacity: 0;
    translate: 0 16px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .pp .bl-qa-icon::before,
  .pp .bl-qa-icon::after {
    transition: none;
  }
}
@keyframes pp-float {
  50% {
    translate: 0 -10px;
  }
}
@keyframes pp-drift {
  to {
    translate: 0 -48px;
  }
}
@keyframes pp-word {
  from {
    translate: 0 110%;
  }
}
@keyframes pp-up {
  from {
    opacity: 0.3;
    translate: 0 20px;
  }
}
@keyframes pp-device {
  from {
    opacity: 0.4;
    translate: 0 48px;
    scale: 0.96;
  }
}
@keyframes pp-caret {
  50% {
    opacity: 0;
  }
}
@keyframes pp-press {
  50% {
    scale: 0.88;
  }
}

/* ------------------------------------------------------------- seams */
/* centred eyebrows centre their pill too */
.pp-center .pp-eyebrow,
.pp-centre .pp-eyebrow,
.pp-head .pp-eyebrow {
  justify-content: center;
}
/* the FAQ card after a band of another ground: its own room above */
:is(.pp-sec.is-paper, .pp-sec.is-white) + .pp-faq-sec.is-night,
.pp-sec.is-night + .pp-faq-sec:is(.is-paper, .is-white) {
  padding-top: clamp(56px, 8vw, 104px);
}
/* a hero's devices cut cleanly at a night band below (no fade to its own
   ground and then a hard edge) */
.pp-hero.is-centre:has(+ .pp-sec.is-night) .pp-stage::after {
  display: none;
}
/* a shorter stage, for a screen with little on it */
.pp-stage.is-short {
  height: clamp(300px, 36vw, 440px);
}
/* an open question's row belongs to its answer: no pill of its own */
.pp .bl-qa-item[open] > summary {
  border-radius: 18px 18px 0 0;
}
.pp .bl-qa-a p {
  padding-top: 2px;
}

/* ------------------------------------------------------------- narrower */
@media (max-width: 900px) {
  .pp-grid.is-2,
  .pp-grid.is-3,
  .pp-feature,
  .pp-price,
  .pp .bl-qa,
  .pp-split {
    grid-template-columns: 1fr;
  }
  .pp .bl-qa {
    gap: 28px;
  }
  /* a band that ends on its devices needs less room under them */
  .pp-sec:has(> .pp-feature) {
    padding-bottom: 48px;
  }
  .pp-hero.is-split .pp-eyebrow {
    justify-content: center;
  }
  .pp-feature.is-flip .pp-feature-media {
    order: 0;
  }
  .pp-bento {
    grid-template-columns: 1fr;
  }
  .pp-tile,
  .pp-tile.is-wide {
    grid-column: auto;
    min-height: 340px;
  }
  .pp-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .pp-plans,
  .pp-guides {
    grid-template-columns: 1fr;
  }
  .pp-chip {
    display: none;
  }
  .pp-stage-browser,
  .pp-feature-media .is-behind,
  .pp-feature-media .is-over,
  .pp-split-media .is-back,
  .pp-closer-stage .pp-phone.is-sm {
    display: none;
  }
  .pp-stage-phone {
    margin-left: 0;
  }
  .pp-hero.is-split {
    text-align: center;
  }
  .pp-split .pp-lede {
    margin-left: auto;
  }
  .pp-split .pp-btns {
    justify-content: center;
  }
  .pp-split-media {
    min-height: 0;
  }
  .pp-split-media .is-front {
    left: 0;
    transform: none;
  }
}
@media (max-width: 520px) {
  /* a table fits a phone whole: no column hidden off the edge */
  .pp-table table {
    min-width: 0;
    font-size: 14px;
  }
  .pp-table th,
  .pp-table td {
    padding: 12px;
  }
  .pp-sec {
    font-size: 16px;
  }
  .pp-btn {
    width: 100%;
  }
  .pp-btns.is-left .pp-btn {
    width: auto;
  }
  .pp-facts b {
    font-size: 36px;
  }
  .pp-day {
    width: calc(50% - 6px);
  }
  .pp-card-crop .pp-phone {
    width: min(260px, 70vw);
  }
}