/* ==================================================================
   PSSP sales page — fourth movement of the same visual system.
   Depends on style-v2.css (tokens, .btn, .stat-grid, .faq__item,
   .closing, header, footer). Scoped to .page-pssp or to a class that
   only exists on this page.

   SPACING — same contract as contact.css. Every vertical distance comes
   from --s1..--s9. No loose px values. Three composition rules hold in
   every section:
     eyebrow    → heading       --s3
     heading    → body copy     --s5
     head block → its content   --s7

   RED DISCIPLINE — tokens.css: red is display type, CTAs and accents
   only. On any one screen there is ONE red CTA plus small accents. The
   Framer original flooded the page with red (a fully red pricing card,
   red headings, red bars) until red stopped meaning "act here". The
   offer card here is dark with a red button, never a red card.
   ================================================================== */

.page-pssp {
  --s1:  4px;
  --s2:  8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 96px;

  --section-y: var(--s9);
  --hero-top: 150px;          /* tracks header height, not rhythm */

  background: #0f0f10;
}
.page-pssp::after { display: none; }

/* German compounds must not auto-hyphenate at display sizes. */
.page-pssp h1,
.page-pssp h2,
.page-pssp h3,
.page-pssp summary { overflow-wrap: normal; word-break: normal; hyphens: none; }

/* German is not title-cased. The Framer page applied text-transform:
   capitalize and produced "Du Verstehst Die Schulter Als System". */
.page-pssp h1, .page-pssp h2, .page-pssp h3 { text-transform: none; }

.page-pssp .nav-links [aria-current="page"] { color: #fff; }
.page-pssp .nav-links [aria-current="page"]::after { right: 0; }

/* One eyebrow treatment for the whole page. */
.page-pssp .eyebrow { margin-bottom: var(--s3); }
.page-pssp .eyebrow--red { color: #ff8a94; font-weight: 780; letter-spacing: .14em; }

/* style-v2.css resets `ul` but not `ol`. Both ordered lists on this page carry
   their own numbering (the pillars counter, the module markers), so the
   browser's default markers render a second, conflicting set — "1." beside
   "Modul 1". Reset them here. */
.page-pssp ol { list-style: none; padding: 0; margin: 0; }

/* Unresolved content is marked, never faked. */
[data-pending] {
  color: var(--red-soft);
  font-style: italic;
  opacity: .85;
}

/* ---------- Fixed portrait backdrop ---------- */
.page-pssp .page-backdrop { background: #0f0f10; }
.page-pssp .page-backdrop picture { display: block; width: 100%; height: 100%; }
.page-pssp .page-backdrop img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.page-pssp .page-backdrop::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(15,15,16,.96) 0%, rgba(15,15,16,.70) 46%, rgba(15,15,16,.14) 80%),
    linear-gradient(0deg, rgba(15,15,16,.82), transparent 38%),
    radial-gradient(55% 75% at 84% 58%, rgba(255,0,25,.30), transparent 78%);
}

/* ---------- 1. Hero ----------
   Same height contract as the homepage: min(92svh, 860px), vertically
   centred. The first build used min-height:0, so the hero collapsed to its
   content (~590px) and the credibility strip's opaque background sliced the
   fixed portrait off at chest height. The portrait needs the full stage. */
.hero--pssp {
  min-height: min(92svh, 860px);
  padding-block: var(--hero-top) var(--s9);
  align-items: center;
  background: transparent;
}
.hero--pssp .hero__bg,
.hero--pssp .hero__scrim { display: none; }
.hero--pssp .hero__inner { width: 100%; }
.hero--pssp__copy { max-width: min(1080px, 84%); }
.hero--pssp .hero__title {
  /* 30ch + the smaller step keeps this to TWO lines at every width.
     At 17ch/5.6rem it ran to five lines in the 700-900px range. */
  max-width: 36ch;
  font-size: clamp(1.75rem, 3.3vw, 3.7rem);
  line-height: .98;
  letter-spacing: -.05em;
  text-wrap: balance;
  text-shadow: 0 3px 28px rgba(0,0,0,.65);
}
.hero--pssp .hero__title em { display: inline; font-style: normal; color: #ff3547; }
.hero--pssp__lead {
  max-width: 52ch;
  margin-top: var(--s5);
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 1.4vw, 1.35rem);
  font-weight: 620;
  line-height: 1.5;
  letter-spacing: -.018em;
  color: #ececed;
  text-shadow: 0 2px 20px rgba(0,0,0,.6);
}
.hero--pssp .btn { margin-top: var(--s7); }

/* ---------- 2. Credibility strip ---------- */
/* The top edge fades in rather than cutting straight across the portrait. */
.creds {
  background: linear-gradient(180deg, rgba(22,22,24,0) 0%, #161618 8%, #101012 100%);
  border-top: 0;
}
.creds__title {
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  margin-bottom: var(--s7);
  color: #fff;
}
.creds .stat-grid { gap: var(--s6) var(--s5); }
.creds .stat { border-top-color: rgba(255,0,25,.45); padding-top: var(--s4); }
.creds .stat__label { margin-top: var(--s3); }
.creds .stat__note { margin-top: var(--s2); }

/* Headings that live in a narrow sidebar column need their own step.
   .section__title tops out at 4.5rem, which in a ~470px column sets three or
   four lines. These are the columns: problem head, path head, fit, faq. */
.problem--pssp__head .section__title,
.path__title,
.fit__title,
.faq--pssp .faq__title { font-size: clamp(1.7rem, 2.9vw, 2.7rem); line-height: 1.02; }

/* ---------- 3. Problem ---------- */
.problem--pssp { background: #101012; }
.problem--pssp__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: var(--s8);
  align-items: start;
}
.problem--pssp__head { position: sticky; top: calc(var(--s9) + var(--s5)); }
.problem--pssp__head .section__title { margin-bottom: 0; max-width: 17ch; color: #fff; }
.problem--pssp__copy p { max-width: 58ch; color: var(--text-2); }
.problem--pssp__copy p + p { margin-top: var(--s5); }
.problem--pssp__turn {
  margin-top: var(--s7) !important;
  padding-top: var(--s5);
  border-top: 1px solid rgba(255,0,25,.45);
  color: var(--red) !important;
  font-size: clamp(1.5rem, 2.6vw, 2.25rem) !important;
  font-weight: 800 !important;
  letter-spacing: -.035em;
  line-height: 1.1;
}

/* ---------- 4. Why me ---------- */
.why { background: linear-gradient(180deg, #161618 0%, #101012 100%); border-top: 1px solid rgba(255,255,255,.08); }
.why__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: var(--s8);
  align-items: center;
}
.why__figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius-lg) 4px 4px 4px;
  background: var(--surface-2);
}
.why__figure img { width: 100%; height: clamp(420px, 46vw, 620px); object-fit: cover; object-position: 50% 22%; }
.why__title { max-width: 19ch; margin-bottom: var(--s5); color: #fff; }
.why__copy .prose p { color: var(--text-2); }
.why__pull {
  margin: var(--s7) 0 0;
  padding-left: var(--s5);
  border-left: 3px solid var(--red);
  font-family: var(--f-display);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  font-weight: 780;
  line-height: 1.25;
  letter-spacing: -.03em;
  color: #fff;
}

/* ---------- 5. The program ---------- */
.program { background: #101012; }
.program__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s8);
  align-items: center;
}

/* comment 4a — the mockup is 16:9 and cannot be cropped tall without losing
   two of the three devices. Instead the COLUMN is made tall: the mockup keeps
   its native aspect and the stats card (comment 5) sits beneath it. Nothing is
   cropped, and the two elements together stand as tall as the copy beside them. */
.program__media { display: grid; gap: var(--s5); align-content: center; }
.program__figure {
  margin: 0;
  overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface-2);
}
.program__figure img { width: 100%; height: auto; display: block; }

.program__stats {
  padding: var(--s6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(21,21,23,.76);
}
.program__stats .stat-grid--3 { margin: 0; max-width: none; gap: var(--s5); }
.program__stats .stat { border-top: 0; border-left: 2px solid var(--red); padding: var(--s1) 0 var(--s1) var(--s3); }
.program__stats .stat__value { color: #fff; font-size: clamp(1.75rem, 2.4vw, 2.35rem); }
.program__stats .stat__label { margin-top: var(--s1); color: var(--muted); font-size: .9rem; font-weight: 600; }

/* comment 2 — the program NAME as a product lockup, not another red heading.
   The monogram carries the acronym the page uses ~20 times; the full name sits
   beside it, so PSSP is defined once and visibly. */
.lockup {
  display: flex;
  align-items: center;
  gap: var(--s4);
  margin-bottom: var(--s6);
}
.lockup__mark {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: var(--s3) var(--s4);
  border: 2px solid rgba(255,0,25,.55);
  border-radius: var(--radius-sm);
  background: rgba(255,0,25,.10);
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 1.6vw, 1.5rem);
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1;
  color: var(--red);
}
.lockup__name {
  /* Client: "make the title bigger, more emphasis, maybe red". Red is within
     the token rule — red is for display type, CTAs and accents. */
  font-size: clamp(1.6rem, 2.9vw, 2.75rem);
  line-height: 1.02;
  letter-spacing: -.035em;
  color: var(--red);
  max-width: 21ch;
  text-wrap: balance;
  margin: 0;
}
/* The acronym is already in the mark; keep it for screen readers only. */
.lockup__name-sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

.program__prose p { color: var(--text-2); max-width: 46ch; }

/* The behaviour chain — the page's one-line summary of the whole system. */
.program__chain {
  margin: var(--s5) 0;
  padding: var(--s4) var(--s5);
  border-left: 2px solid var(--red);
  background: rgba(255,255,255,.035);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-family: var(--f-display);
  font-size: clamp(.95rem, 1.2vw, 1.1rem);
  font-weight: 700;
  line-height: 1.7;
  letter-spacing: -.01em;
  color: #fff;
}
.program__chain span { color: var(--red); margin: 0 var(--s1); }

/* ---------- 6. Three pillars ---------- */
.pillars { background: linear-gradient(180deg, #161618 0%, #101012 100%); border-top: 1px solid rgba(255,255,255,.08); }
.pillars__head { text-align: center; margin-bottom: var(--s7); }
.pillars__title {
  max-width: 34ch;
  margin: 0 auto;
  color: #fff;
  text-wrap: balance;
}
/* Centred as a group, left-aligned inside — so the red rule that makes the
   three read as a set survives. */
.pillars__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s5);
  counter-reset: pillar;
}
.pillar {
  padding: var(--s6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(21,21,23,.6);
  counter-increment: pillar;
}
.pillar::before {
  content: "0" counter(pillar);
  display: block;
  margin-bottom: var(--s5);
  font-family: var(--f-display);
  font-size: .8rem;
  font-weight: 800;
  letter-spacing: .14em;
  color: var(--red);
}
.pillar__title {
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  line-height: 1.22;
  letter-spacing: -.025em;
  color: #fff;
  margin-bottom: var(--s3);
}
.pillar__body { font-size: .98rem; line-height: 1.62; color: var(--text-2); }

/* ---------- 7. Module path ---------- */
.path { background: #101012; }
.path__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: var(--s8);
  align-items: start;
}
.path__head { position: sticky; top: calc(var(--s9) + var(--s5)); }
.path__title { max-width: 21ch; margin-bottom: 0; color: #fff; text-wrap: balance; }


/* Vertical stepper. A horizontal 8-step path cannot hold
   "Rotatorenmanschetten-Dysfunktion" at 1440, let alone 390. */
.path__list { display: grid; }
.step {
  position: relative;
  padding: var(--s5) 0 var(--s5) var(--s8);
  border-top: 1px solid rgba(255,255,255,.12);
}
.step:last-child { border-bottom: 1px solid rgba(255,255,255,.12); }
/* the connecting spine */
.step::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(255,0,25,.35);
}
.step:first-child::before { top: 50%; }
.step:last-child::before  { bottom: 50%; }

.step__marker {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--red);
  background: #101012;
  font-family: var(--f-display);
  font-size: .95rem;
  font-weight: 800;
  color: var(--red);
}
/* The two foundation steps read as prologue, not as numbered modules —
   this is what makes the layout explain the "6 Module" stat. */
.step--base .step__marker {
  border-style: dashed;
  border-color: var(--line-strong);
  color: var(--muted);
}
.step--base .step__marker::after {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--muted);
}
.step__kicker {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s2);
}
.step--base .step__kicker { color: rgba(157,160,166,.8); }
.step__title {
  font-size: clamp(1.15rem, 1.9vw, 1.6rem);
  line-height: 1.18;
  letter-spacing: -.03em;
  color: #fff;
}
.step--base .step__title { color: var(--text-2); font-weight: 700; }

/* ---------- 8. Fit ---------- */
.fit { background: linear-gradient(180deg, #161618 0%, #101012 100%); border-top: 1px solid rgba(255,255,255,.08); }
.fit__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: var(--s8);
  align-items: start;
}
.fit__title { max-width: 25ch; margin-bottom: 0; color: #fff; }
.fit__list { display: grid; gap: var(--s5); }
.fit__list li {
  position: relative;
  padding-left: var(--s7);
  font-family: var(--f-display);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  font-weight: 640;
  line-height: 1.45;
  letter-spacing: -.02em;
  color: var(--text-2);
}
.fit__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: var(--s6);
  height: 2px;
  background: var(--red);
}

/* ---------- 9. Testimonials ---------- */
.voices { background: #101012; }
.voices__head { margin-bottom: var(--s7); }
.voices__title { max-width: 18ch; margin-bottom: 0; color: #fff; }
.voices__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s5);
}
.voice {
  display: flex;
  flex-direction: column;
  gap: var(--s5);
  padding: var(--s6);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(21,21,23,.6);
}
.voice blockquote {
  flex: 1;
  margin: 0;
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 640;
  line-height: 1.55;
  letter-spacing: -.015em;
  color: var(--text-2);
}
.voice blockquote::before { content: "„"; color: var(--red); }
.voice blockquote::after  { content: "“"; color: var(--red); }
.voice__by {
  display: flex;
  align-items: center;
  gap: var(--s3);
  font-size: .875rem;
  margin: 0;
}
.voice__by img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.voice__by b { display: block; color: var(--text); font-weight: 600; line-height: 1.3; }
.voice__by small { display: block; color: var(--muted); font-size: .8125rem; line-height: 1.3; }

/* ---------- 10. The offer ---------- */
.offer { background: linear-gradient(180deg, #161618 0%, #101012 100%); border-top: 1px solid rgba(255,255,255,.08); }
.offer__head { text-align: center; margin-bottom: var(--s7); }
.offer__title { max-width: 24ch; margin: 0 auto; color: #fff; text-wrap: balance; }

/* A DARK card with a red button — not a red card. See the red-discipline note. */
.offer__card {
  max-width: 560px;
  margin-inline: auto;
  padding: var(--s8) var(--s6);
  border: 1px solid rgba(255,0,25,.45);
  border-radius: var(--radius-lg);
  background: rgba(21,21,23,.9);
  box-shadow: 0 0 60px -24px var(--red-glow);
  text-align: center;
}
.offer__price {
  font-family: var(--f-display);
  font-size: clamp(3.5rem, 7vw, 5.5rem);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.05em;
  color: #fff;
}
.offer__cur { color: var(--red); margin-left: .04em; }
.offer__terms {
  margin-top: var(--s5);
  font-family: var(--f-display);
  font-size: 1.05rem;
  font-weight: 640;
  line-height: 1.5;
  color: var(--text-2);
}
.offer__terms b { color: #fff; font-weight: 780; }
.offer__promise {
  margin-top: var(--s5);
  font-size: .98rem;
  line-height: 1.6;
  color: var(--muted);
}
.offer__bonus {
  margin-top: var(--s6);
  padding-top: var(--s6);
  border-top: 1px solid var(--line);
  text-align: left;
}
.offer__bonus-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--red-soft);
  margin-bottom: var(--s2);
}
.offer__bonus-text { font-size: .95rem; line-height: 1.6; color: var(--text-2); }
.offer__cta { margin-top: var(--s7); width: 100%; }

.guarantee {
  max-width: 560px;
  margin: var(--s5) auto 0;
  padding: var(--s6);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius);
  text-align: center;
}
.guarantee__title {
  font-size: clamp(1.1rem, 1.5vw, 1.35rem);
  letter-spacing: -.025em;
  color: #fff;
  margin-bottom: var(--s3);
}
.guarantee__body { font-size: .93rem; line-height: 1.65; color: var(--muted); }

/* ---------- 11. FAQ ---------- */
.faq--pssp { background: #101012; }
.faq--pssp .faq__grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: var(--s8);
  align-items: start;
}
.faq--pssp .faq__head { position: sticky; top: calc(var(--s9) + var(--s5)); }
.faq--pssp .faq__title { max-width: 21ch; margin: 0; color: #fff; }

.faq--pssp .faq__list { display: grid; }
.faq--pssp .faq__item { border-top: 1px solid rgba(255,255,255,.16); }
.faq--pssp .faq__item:last-child { border-bottom: 1px solid rgba(255,255,255,.16); }
.faq--pssp .faq__item summary {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px;
  align-items: start;
  gap: var(--s5);
  padding: var(--s5) 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--f-display);
  font-size: clamp(1.1rem, 1.4vw, 1.35rem);
  font-weight: 740;
  line-height: 1.32;
  letter-spacing: -.025em;
  color: #fff;
  transition: color .2s var(--ease);
}
.faq--pssp .faq__item summary::-webkit-details-marker { display: none; }
.faq--pssp .faq__item summary:hover { color: #ff8a94; }
.faq--pssp .faq__item summary::after {
  content: "";
  width: 18px;
  height: 18px;
  margin-top: .3em;
  background:
    linear-gradient(var(--red), var(--red)) center / 100% 2px no-repeat,
    linear-gradient(var(--red), var(--red)) center / 2px 100% no-repeat;
  transition: transform .3s var(--ease);
}
.faq--pssp .faq__item[open] summary::after { transform: rotate(135deg); }
.faq--pssp .faq__answer { padding-bottom: var(--s5); }
.faq--pssp .faq__answer p { max-width: 58ch; font-size: 1rem; line-height: 1.66; color: var(--text-2); }

/* ---------- 12. Closing ---------- */
.page-pssp .closing { text-align: center; background: transparent; }
.page-pssp .closing .eyebrow { color: #ff8a94; }
.page-pssp .closing__title {
  max-width: 24ch;
  margin-inline: auto;
  font-size: clamp(2.1rem, 4.6vw, 4.1rem);
  line-height: 1.04;
  color: #fff;
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
}
.page-pssp .closing__title em { font-style: normal; color: var(--red); }
/* Lead and copy share ONE measure, set in rem not ch, so their left and right
   edges are pixel-identical. Set in ch at three different font sizes they
   resolved to three different widths (830 / 480 / 460px at 1440), which reads
   as misalignment rather than design.
   The title ends in a comma and the lead completes the sentence, so the
   title -> lead gap is deliberately tighter than the lead -> copy gap: one
   sentence, then a separate thought. */
.page-pssp .closing__lead,
.page-pssp .closing__copy {
  max-width: min(34rem, 100%);
  margin-inline: auto;
  text-wrap: balance;
}
.page-pssp .closing__lead {
  margin-top: var(--s4);
  font-family: var(--f-display);
  font-size: clamp(1.15rem, 1.6vw, 1.45rem);
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.025em;
  color: #fff;
}
.page-pssp .closing__copy {
  margin-top: var(--s6);
  font-size: 1.02rem;
  line-height: 1.6;
  color: var(--muted);
}
.page-pssp .closing .btn { margin-top: var(--s7); }

/* Footer styling is global — see the note in contact.css. Removed 21 Sep 2026. */

/* ==================================================================
   Responsive — the scale steps down, the composition rules do not.
   ================================================================== */
@media (max-width: 1100px) {
  .page-pssp { --s8: 48px; }
  .voices__grid,
  .pillars__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
  .page-pssp { --s9: 80px; }
  .hero--pssp__copy { max-width: 82%; }
  .hero--pssp .hero__title { font-size: clamp(1.7rem, 3.5vw, 3rem); }
  .problem--pssp__grid,
  .why__grid,
  .program__grid,
  .path__grid,
  .fit__grid,
  .faq--pssp .faq__grid { grid-template-columns: 1fr; }
  .problem--pssp__head,
  .path__head,
  .faq--pssp .faq__head { position: static; }
  .problem--pssp__head .section__title,
  .path__title,
  .fit__title,
  .faq--pssp .faq__title { max-width: 18ch; }
  .path__note { max-width: 54ch; }
  /* media column first is right on desktop; on one column the copy leads. */
  .program__media { order: 2; }
  .program__copy { order: 1; }
  .why__figure img { height: clamp(340px, 52vw, 460px); }
}

@media (max-width: 860px) {
  .page-pssp .nav-links:not(.is-open) { visibility: hidden; }
  .page-pssp .nav-links.is-open { visibility: visible; }

  .page-pssp { --hero-top: 124px; }
  /* Centred rather than bottom-pinned: this hero has no badge and shorter
     copy than the homepage, so flex-end left a large void above the eyebrow. */
  .hero--pssp { min-height: min(88svh, 720px); padding-block: var(--hero-top) var(--s8); align-items: center; }
  .hero--pssp__copy { max-width: 100%; }
  .hero--pssp .hero__title { font-size: clamp(1.55rem, 4.6vw, 2.5rem); max-width: 30ch; }
  .hero--pssp__lead { max-width: 100%; }
  .creds .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Below ~730px .closing__title's font-size hits its clamp floor and the title
     stops shrinking at ~524px, so the shared 34rem measure would overtake it and
     invert the hierarchy. Step the pair down to stay narrower than the title. */
  .page-pssp .closing__lead,
  .page-pssp .closing__copy { max-width: min(30rem, 100%); }
}

@media (max-width: 620px) {
  .page-pssp { --s7: 36px; --s8: 40px; --s9: 56px; --hero-top: 112px; }
  /* Long German compounds need a smaller display step to hold two lines
     at phone widths. See the note at the top of the responsive block. */
  .page-pssp .section__title { font-size: clamp(1.6rem, 6.4vw, 2.1rem); }
  .page-pssp .closing__title { font-size: clamp(1.6rem, 6.4vw, 2.1rem); }
  .hero--pssp .hero__title { font-size: clamp(1.45rem, 5.6vw, 2rem); line-height: 1.02; max-width: 30ch; }
  .hero--pssp__lead { font-size: 1.05rem; }
  .hero--pssp .btn { width: 100%; }

  .creds .stat-grid { grid-template-columns: 1fr; }
  .pillars__list,
  .voices__grid { grid-template-columns: 1fr; }

  .lockup { flex-direction: column; align-items: flex-start; gap: var(--s3); }

  .step { padding-left: var(--s7); }
  .step::before { left: 15px; }
  .step__marker { width: 32px; height: 32px; font-size: .85rem; }

  .offer__card { padding: var(--s7) var(--s5); }
  .guarantee { padding: var(--s5); }

  .page-pssp .closing__title { font-size: clamp(1.85rem, 7vw, 2.5rem); max-width: 100%; }
  .page-pssp .closing .btn { width: 100%; }
}

@media (max-width: 380px) {
  .hero--pssp .hero__title { font-size: 1.4rem; }
  .step__title { font-size: 1.05rem; }
}

@media (prefers-reduced-motion: reduce) {
  .page-pssp *, .page-pssp *::before, .page-pssp *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ==================================================================
   Divi 5 adapter — stable classes from create-dsp-pssp-page.php.
   The declarations above are the approved source styles, including the
   Phase 1 closing-section measurements. These rules only neutralize Divi
   wrappers and map native Text, Image, and Button modules onto that structure.

   Spacing continues to use the page-scoped --s1..--s9 scale.
   ================================================================== */
body.dsp-pssp-page.et-db { --dsp-pssp-gutter: var(--gutter); }
body.dsp-pssp-page.et-db #page-container { padding: 0 !important; overflow: clip; }
body.dsp-pssp-page.et-db #main-content { background: transparent; }
body.dsp-pssp-page.et-db #main-content .et_builder_inner_content { z-index: auto; }
body.dsp-pssp-page.et-db #main-content .et_pb_module { margin-bottom: 0 !important; }
body.dsp-pssp-page.et-db #main-content .et_pb_text_inner p { padding-bottom: 0 !important; }
body.dsp-pssp-page.et-db #main-content .et_pb_section {
  position: relative;
  z-index: 1;
  margin: 0 !important;
}
body.dsp-pssp-page.et-db #main-content .et_pb_row.dsp-pssp-shell {
  width: 100% !important;
  max-width: var(--shell) !important;
  padding-inline: var(--dsp-pssp-gutter) !important;
  margin: 0 auto !important;
}
body.dsp-pssp-page.et-db #main-content .dsp-pssp-shell > .et_pb_column {
  float: none !important;
  width: auto !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
}
body.dsp-pssp-page.et-db #main-content .dsp-pssp-section.section {
  padding: var(--section-y) 0 !important;
}
body.dsp-pssp-page.et-db #main-content h1,
body.dsp-pssp-page.et-db #main-content h2,
body.dsp-pssp-page.et-db #main-content h3 {
  padding: 0 !important;
}

/* Divi row clearfix pseudo-elements otherwise become extra grid items. */
body.dsp-pssp-page.et-db #main-content .dsp-pssp-shell::before,
body.dsp-pssp-page.et-db #main-content .dsp-pssp-shell::after {
  content: none !important;
  display: none !important;
}

/* Native responsive backdrop markup, moved to <body> by main-v2.js. */
body.dsp-pssp-page.et-db #main-content .dsp-pssp-backdrop-layer,
body.dsp-pssp-page.et-db #main-content .dsp-pssp-backdrop-layer > .et_pb_row,
body.dsp-pssp-page.et-db #main-content .dsp-pssp-backdrop-layer .et_pb_column {
  position: static !important;
  width: 0 !important;
  height: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
}
body.dsp-pssp-page.et-db #pageBackdrop {
  position: fixed !important;
  inset: 0;
  z-index: 0;
  display: block;
  width: 100% !important;
  height: 100svh;
  max-width: none !important;
  pointer-events: none;
  background: #0f0f10;
  transition: opacity .65s var(--ease);
}
body.dsp-pssp-page.et-db #pageBackdrop .et_pb_text_inner,
body.dsp-pssp-page.et-db #pageBackdrop picture {
  display: block;
  width: 100%;
  height: 100%;
}
body.dsp-pssp-page.et-db #pageBackdrop img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: 50% 32%;
}

/* Hero: preserve the approved full-stage portrait contract. */
body.dsp-pssp-page.et-db #main-content .dsp-pssp-hero {
  display: flex !important;
  min-height: min(92svh, 860px) !important;
  padding: var(--hero-top) 0 var(--s9) !important;
  align-items: center !important;
  overflow: visible;
}
body.dsp-pssp-page.et-db #main-content .dsp-pssp-hero > .hero__inner { align-self: center; }
body.dsp-pssp-page.et-db .dsp-pssp-hero-title .hero__title,
body.dsp-pssp-page.et-db .dsp-pssp-hero-lead .hero--pssp__lead { margin-bottom: 0; }
body.dsp-pssp-page.et-db #main-content .hero--pssp__lead { margin-top: var(--s5) !important; }
body.dsp-pssp-page.et-db .dsp-pssp-hero .et_pb_button_module_wrapper {
  margin-top: var(--s7) !important;
}

/* Source grids mapped onto Divi rows and their non-floating columns. */
body.dsp-pssp-page.et-db #main-content .problem--pssp__grid {
  display: grid !important;
  grid-template-columns: minmax(0,.85fr) minmax(0,1.15fr) !important;
  gap: var(--s8) !important;
  align-items: start !important;
}
body.dsp-pssp-page.et-db #main-content .program__grid {
  display: grid !important;
  grid-template-columns: repeat(2,minmax(0,1fr)) !important;
  gap: var(--s8) !important;
  align-items: center !important;
}
body.dsp-pssp-page.et-db #main-content .path__grid {
  display: grid !important;
  grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr) !important;
  gap: var(--s8) !important;
  align-items: start !important;
}
body.dsp-pssp-page.et-db #main-content .why__grid {
  display: grid !important;
  grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr) !important;
  gap: var(--s8) !important;
  align-items: center !important;
}
body.dsp-pssp-page.et-db #main-content .fit__grid {
  display: grid !important;
  grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr) !important;
  gap: var(--s8) !important;
  align-items: start !important;
}
body.dsp-pssp-page.et-db #main-content .faq__grid {
  display: grid !important;
  grid-template-columns: minmax(0,.8fr) minmax(0,1.2fr) !important;
  gap: var(--s8) !important;
  align-items: start !important;
}

body.dsp-pssp-page.et-db .program__media {
  display: grid;
  gap: var(--s5);
  align-content: center;
}
body.dsp-pssp-page.et-db .program__figure,
body.dsp-pssp-page.et-db .program__figure .et_pb_image_wrap,
body.dsp-pssp-page.et-db .why__figure,
body.dsp-pssp-page.et-db .why__figure .et_pb_image_wrap {
  display: block;
  width: 100%;
}
body.dsp-pssp-page.et-db .program__figure img { width: 100%; height: auto; }
body.dsp-pssp-page.et-db .why__figure .et_pb_image_wrap { height: 100%; }
body.dsp-pssp-page.et-db .why__figure img {
  width: 100%;
  height: clamp(420px,46vw,620px);
  object-fit: cover;
  object-position: 50% 22%;
}

/* Restore source vertical composition where Divi zeroes module margins. */
body.dsp-pssp-page.et-db #main-content .creds__title { margin-bottom: var(--s7) !important; }
body.dsp-pssp-page.et-db #main-content .pillars__head,
body.dsp-pssp-page.et-db #main-content .voices__head,
body.dsp-pssp-page.et-db #main-content .offer__head { margin-bottom: var(--s7) !important; }
body.dsp-pssp-page.et-db #main-content .why__title { margin-bottom: var(--s5) !important; }
body.dsp-pssp-page.et-db #main-content .problem--pssp__copy p + p { margin-top: var(--s5) !important; }
body.dsp-pssp-page.et-db #main-content .problem--pssp__turn { margin-top: var(--s7) !important; }
body.dsp-pssp-page.et-db #main-content .lockup { margin-bottom: var(--s6) !important; }
body.dsp-pssp-page.et-db #main-content .program__chain { margin-block: var(--s5) !important; }
body.dsp-pssp-page.et-db #main-content .offer__terms,
body.dsp-pssp-page.et-db #main-content .offer__promise { margin-top: var(--s5) !important; }
body.dsp-pssp-page.et-db #main-content .offer__bonus { margin-top: var(--s6) !important; }

/* Offer and guarantee are Divi rows, so override the shared shell width/padding. */
body.dsp-pssp-page.et-db #main-content .et_pb_row.offer__card {
  max-width: 35rem !important;
  padding: var(--s8) var(--s6) !important;
  text-align: center !important;
}
body.dsp-pssp-page.et-db #main-content .et_pb_row.guarantee {
  max-width: 35rem !important;
  padding: var(--s6) !important;
  margin: var(--s5) auto 0 !important;
  text-align: center !important;
}
body.dsp-pssp-page.et-db .offer__head .et_pb_text_inner,
body.dsp-pssp-page.et-db .offer__card .et_pb_text,
body.dsp-pssp-page.et-db .offer__card .et_pb_text_inner,
body.dsp-pssp-page.et-db .guarantee .et_pb_text,
body.dsp-pssp-page.et-db .guarantee .et_pb_text_inner { text-align: center !important; }
body.dsp-pssp-page.et-db .offer__card .offer__bonus { text-align: left !important; }
body.dsp-pssp-page.et-db .offer__card .et_pb_button_module_wrapper {
  margin-top: var(--s7) !important;
  width: 100%;
}
body.dsp-pssp-page.et-db .offer__cta.et_pb_button { width: 100% !important; }

/* Native Divi buttons at Divi's specificity. */
body.dsp-pssp-page.et-db .et_pb_button.dsp-pssp-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: .55em !important;
  min-height: 3.25rem !important;
  padding: .95rem 1.6rem !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background: var(--red) !important;
  color: #fff !important;
  box-shadow: 0 .375rem 1.5rem -.5rem var(--red-glow) !important;
  font-family: var(--f-body) !important;
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  transition: background .2s var(--ease),transform .2s var(--ease),box-shadow .25s var(--ease) !important;
}
body.dsp-pssp-page.et-db .et_pb_button.dsp-pssp-button--large {
  padding: 1.1rem 2rem !important;
  font-size: 1.05rem !important;
}
body.dsp-pssp-page.et-db .et_pb_button.dsp-pssp-button::after { display: none !important; }
body.dsp-pssp-page.et-db .et_pb_button.dsp-pssp-button:hover {
  background: #ff2033 !important;
  transform: translateY(-.125rem) !important;
  box-shadow: 0 .625rem 1.875rem -.375rem var(--red-glow) !important;
}

/* FAQ details stay in a single inline Text module, without wpautop grid nodes. */
body.dsp-pssp-page.et-db .faq__list .et_pb_text_inner {
  display: grid;
  height: auto !important;
}

/* Closing: carry Phase 1 over exactly, including the asymmetric gaps. */
body.dsp-pssp-page.et-db #main-content .dsp-pssp-closing { background: transparent; }
body.dsp-pssp-page.et-db #main-content .dsp-pssp-closing .et_pb_column,
body.dsp-pssp-page.et-db #main-content .dsp-pssp-closing .et_pb_text,
body.dsp-pssp-page.et-db #main-content .dsp-pssp-closing .et_pb_text_inner,
body.dsp-pssp-page.et-db #main-content .dsp-pssp-closing .closing__title,
body.dsp-pssp-page.et-db #main-content .dsp-pssp-closing .closing__lead,
body.dsp-pssp-page.et-db #main-content .dsp-pssp-closing .closing__copy {
  text-align: center !important;
}
body.dsp-pssp-page.et-db #main-content .dsp-pssp-closing .closing__title {
  margin: 0 auto !important;
  color: #fff;
}
body.dsp-pssp-page.et-db #main-content .dsp-pssp-closing .closing__lead {
  max-width: min(34rem,100%);
  margin: var(--s4) auto 0 !important;
}
body.dsp-pssp-page.et-db #main-content .dsp-pssp-closing .closing__copy {
  max-width: min(34rem,100%);
  margin: var(--s6) auto 0 !important;
}
body.dsp-pssp-page.et-db .dsp-pssp-closing .et_pb_button_module_wrapper {
  margin-top: var(--s7) !important;
  text-align: center;
}

/* Divi adapter corrections carried over from the Contact browser QA. */
body.dsp-pssp-page.et-db #main-content .hero__title,
body.dsp-pssp-page.et-db #main-content .creds__title,
body.dsp-pssp-page.et-db #main-content .section__title,
body.dsp-pssp-page.et-db #main-content .lockup__name,
body.dsp-pssp-page.et-db #main-content .pillar__title,
body.dsp-pssp-page.et-db #main-content .step__title,
body.dsp-pssp-page.et-db #main-content .guarantee__title,
body.dsp-pssp-page.et-db #main-content .closing__title { color: #fff; }
body.dsp-pssp-page.et-db #main-content .hero__title em { color: #ff3547; }
body.dsp-pssp-page.et-db #main-content .lockup__name { color: var(--red); }

/* Divi's stylesheet paints every bare <blockquote> with its own brand blue:
   `border-left: 5px solid #2ea3f2; padding-left: 20px`. The testimonial quotes
   are unclassed <blockquote> elements, so Divi's default won and each card grew
   a blue bar the static design never had. The §5.4 override list covered
   .et_pb_text colour, margins and ul list-style, but not blockquote. */
body.dsp-pssp-page.et-db #main-content .voice blockquote {
  border-left: 0;
  padding-left: 0;
}

/* Divi restores list markers and padding inside Text modules. */
body.dsp-pssp-page.et-db #main-content .stat-grid,
body.dsp-pssp-page.et-db #main-content .pillars__list,
body.dsp-pssp-page.et-db #main-content .path__list,
body.dsp-pssp-page.et-db #main-content .fit__list,
body.dsp-pssp-page.et-db #main-content .voices__grid,
body.dsp-pssp-page.et-db #main-content .faq__list {
  list-style: none;
  padding: 0;
  margin-left: 0;
}
body.dsp-pssp-page.et-db #main-content .stat-grid > li,
body.dsp-pssp-page.et-db #main-content .pillars__list > li,
body.dsp-pssp-page.et-db #main-content .path__list > li,
body.dsp-pssp-page.et-db #main-content .fit__list > li,
body.dsp-pssp-page.et-db #main-content .voices__grid > li {
  list-style: none;
}
body.dsp-pssp-page.et-db #main-content .stat-grid > li::before,
body.dsp-pssp-page.et-db #main-content .pillars__list > li::marker,
body.dsp-pssp-page.et-db #main-content .path__list > li::marker,
body.dsp-pssp-page.et-db #main-content .fit__list > li::marker,
body.dsp-pssp-page.et-db #main-content .voices__grid > li::before { content: none; }

@media (max-width: 1024px) {
  body.dsp-pssp-page.et-db #main-content .problem--pssp__grid,
  body.dsp-pssp-page.et-db #main-content .program__grid,
  body.dsp-pssp-page.et-db #main-content .path__grid,
  body.dsp-pssp-page.et-db #main-content .why__grid,
  body.dsp-pssp-page.et-db #main-content .fit__grid,
  body.dsp-pssp-page.et-db #main-content .faq__grid {
    grid-template-columns: 1fr !important;
  }
  body.dsp-pssp-page.et-db .program__media { order: 2; }
  body.dsp-pssp-page.et-db .program__copy { order: 1; }
  body.dsp-pssp-page.et-db .why__figure img { height: clamp(340px,52vw,460px); }
}
@media (max-width: 860px) {
  body.dsp-pssp-page.et-db #main-content .dsp-pssp-hero {
    min-height: min(88svh,720px) !important;
    padding: var(--hero-top) 0 var(--s8) !important;
    align-items: center !important;
  }
  body.dsp-pssp-page.et-db #main-content .dsp-pssp-hero > .hero__inner { align-self: center; }
  body.dsp-pssp-page.et-db #main-content .dsp-pssp-closing .closing__lead,
  body.dsp-pssp-page.et-db #main-content .dsp-pssp-closing .closing__copy {
    max-width: min(30rem,100%);
  }
}
@media (max-width: 620px) {
  body.dsp-pssp-page.et-db #main-content .et_pb_row.offer__card { padding: var(--s7) var(--s5) !important; }
  body.dsp-pssp-page.et-db #main-content .et_pb_row.guarantee { padding: var(--s5) !important; }
  body.dsp-pssp-page.et-db .dsp-pssp-hero .et_pb_button_module_wrapper,
  body.dsp-pssp-page.et-db .dsp-pssp-hero-button.et_pb_button,
  body.dsp-pssp-page.et-db .dsp-pssp-closing .et_pb_button_module_wrapper,
  body.dsp-pssp-page.et-db .dsp-pssp-closing-button.et_pb_button { width: 100% !important; }
}
@media (prefers-reduced-motion: reduce) {
  body.dsp-pssp-page.et-db #pageBackdrop { transition: none !important; }
}