/* ============================================================
   pagerocket.net root marketing site -- shared stylesheet
   Locked typography system per html-build-notes.md (David 2026-06-01)
   ============================================================ */

:root {
  /* Brand palette */
  --pr-yellow:        #FEBE40;   /* CTAs only */
  --pr-cyan:          #00A3CC;   /* secondary accents */
  --pr-dark:          #1A1A1A;   /* near-black text + footer bg */
  --pr-text:          #1A1A1A;
  --pr-text-muted:    #5A5F66;
  --pr-bg:            #FEF9F1;   /* hero off-white (matches wireframe RGB 254,249,241) */
  --pr-bg-grey:       #F4F7FA;   /* secondary section bg */
  --pr-bg-card:       #FFFFFF;
  --pr-border:        #E5E9EE;

  /* Type sizes (desktop) */
  --type-hero-headline:      4rem;     /* 64px */
  --type-section-headline:   3rem;     /* 48px */
  --type-section-subhead:    1.25rem;  /* 20px */
  --type-card-heading:       1.375rem; /* 22px */
  --type-body:               1rem;     /* 16px */
  --type-card-body:          0.9375rem;/* 15px */
  --type-eyebrow:            0.8125rem;/* 13px */
  --type-button:             1rem;     /* 16px */
  --type-microcopy:          0.8125rem;/* 13px */
  --type-pullquote:          1.5rem;   /* 24px */

  /* Weights */
  --weight-hero:        800;
  --weight-headline:    700;
  --weight-card-heading:700;
  --weight-body:        400;
  --weight-eyebrow:     700;
  --weight-button:      700;
  --weight-pullquote:   500;

  /* Line heights */
  --lh-hero:      1.05;
  --lh-headline:  1.1;
  --lh-card-head: 1.25;
  --lh-body:      1.6;
  --lh-microcopy: 1.4;
  --lh-pullquote: 1.4;

  /* Letter spacing */
  --ls-eyebrow: 0.1em;

  /* Layout */
  --pr-max-width:   1200px;
  --pr-side-pad:    32px;
  --pr-section-pad-y: 96px;
}

@media (max-width: 768px) {
  :root {
    --type-hero-headline:    3rem;      /* 48px */
    --type-section-headline: 2.25rem;   /* 36px */
    --type-section-subhead:  1.125rem;  /* 18px */
    --type-card-heading:     1.25rem;   /* 20px */
    --type-pullquote:        1.25rem;   /* 20px */
    --pr-side-pad:           20px;
    --pr-section-pad-y:      64px;
  }
}

/* ============================================================
   Reset + base
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: var(--type-body);
  font-weight: var(--weight-body);
  line-height: var(--lh-body);
  color: var(--pr-text);
  background: var(--pr-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 { margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
button { font-family: inherit; cursor: pointer; }

.pr-container {
  width: 100%;
  max-width: var(--pr-max-width);
  margin: 0 auto;
  padding: 0 var(--pr-side-pad);
}

/* ============================================================
   Buttons
   ============================================================ */

.pr-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px 28px;
  border-radius: 8px;
  font-size: var(--type-button);
  font-weight: var(--weight-button);
  line-height: 1;
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  cursor: pointer;
  text-align: center;
}

.pr-btn--cta {
  background: var(--pr-yellow);
  color: var(--pr-dark);
  box-shadow: 0 2px 0 rgba(0,0,0,0.06);
}

.pr-btn--cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(254, 190, 64, 0.4);
}

.pr-btn--sm {
  padding: 10px 18px;
  font-size: 0.875rem;
}

/* ============================================================
   Announcement bar (yellow, sticky-top)
   ============================================================ */

.pr-announce {
  background: var(--pr-yellow);
  color: var(--pr-dark);
  font-size: 0.875rem;
  font-weight: 600;
  padding: 10px var(--pr-side-pad);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}

.pr-announce__pill {
  display: inline-block;
  background: var(--pr-dark);
  color: var(--pr-yellow);
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.pr-announce__muted { opacity: 0.75; font-weight: 500; }

/* ============================================================
   Nav
   ============================================================ */

.pr-nav {
  background: #FFFFFF;
  border-bottom: 1px solid var(--pr-border);
  padding: 14px var(--pr-side-pad);
}

.pr-nav__inner {
  max-width: var(--pr-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.pr-nav__logo img {
  height: 36px;
  width: auto;
}

.pr-nav__links {
  display: flex;
  gap: 32px;
  font-size: 0.9375rem;
  font-weight: 500;
}

.pr-nav__links a:hover { color: var(--pr-cyan); }

@media (max-width: 900px) {
  .pr-nav__links { display: none; }
}

/* ============================================================
   Hero (section 1)
   ============================================================ */

.pr-hero {
  background: var(--pr-bg);
  padding: 64px var(--pr-side-pad) 80px;
}

.pr-hero__inner {
  max-width: var(--pr-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 0.9fr;
  gap: 40px;
  align-items: center;
}

.pr-hero__eyebrow {
  font-size: var(--type-eyebrow);
  font-weight: var(--weight-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--pr-cyan);
  margin-bottom: 20px;
}

.pr-hero__headline {
  font-size: var(--type-hero-headline);
  font-weight: var(--weight-hero);
  line-height: var(--lh-hero);
  color: var(--pr-text);
  margin-bottom: 24px;
  letter-spacing: -0.02em;
}

.pr-hero__body {
  font-size: 1.125rem;
  color: #3A3F46;
  margin-bottom: 32px;
  max-width: 560px;
}

.pr-hero__cta {
  margin-bottom: 28px;
}

.pr-hero__stamps {
  display: flex;
  flex-wrap: nowrap;
  gap: 18px;
  margin-bottom: 20px;
  font-size: 0.8125rem;
  color: var(--pr-text);
  font-weight: 500;
  padding: 0;
  list-style: none;
  white-space: nowrap;
}

@media (max-width: 900px) {
  .pr-hero__stamps {
    flex-wrap: wrap;
    white-space: normal;
  }
}

.pr-hero__stamp {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pr-hero__stamp svg {
  width: 18px;
  height: 18px;
  color: var(--pr-cyan);
  flex-shrink: 0;
}

.pr-hero__trust {
  font-size: var(--type-microcopy);
  color: var(--pr-text-muted);
}

.pr-hero__mascot-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.pr-hero__mascot {
  width: 100%;
  max-width: 448px;
  height: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .pr-hero__mascot {
    animation: pr-mascot-hover 4s ease-in-out infinite;
  }
}

@keyframes pr-mascot-hover {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

@media (max-width: 900px) {
  .pr-hero { padding: 40px var(--pr-side-pad) 56px; }
  .pr-hero__inner {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .pr-hero__mascot { max-width: 260px; }
  .pr-hero__mascot-wrap { order: -1; }
}

/* ============================================================
   Section 2 - Trust strip
   ============================================================ */

.pr-trust {
  background: var(--pr-dark);
  color: #FFFFFF;
  padding: 120px var(--pr-side-pad);
}

.pr-trust__grid {
  max-width: var(--pr-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}

.pr-trust__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 16px;
  position: relative;
}

.pr-trust__col + .pr-trust__col::before {
  content: '';
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 12%;
  width: 1px;
  background: rgba(255, 255, 255, 0.18);
}

.pr-trust__icon {
  width: 150px;
  height: 150px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 32px;
}

.pr-trust__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pr-trust__headline {
  font-size: 1.875rem;
  font-weight: 800;
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: 0.005em;
  color: #FFFFFF;
  margin-bottom: 22px;
}

.pr-trust__sub {
  font-size: var(--type-eyebrow);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.45;
}

@media (max-width: 900px) {
  .pr-trust { padding: 56px var(--pr-side-pad); }
  .pr-trust__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 0;
  }
  .pr-trust__col + .pr-trust__col::before { display: none; }
  .pr-trust__col:nth-child(2)::before,
  .pr-trust__col:nth-child(4)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 12%;
    bottom: 12%;
    width: 1px;
    background: rgba(255, 255, 255, 0.18);
  }
  .pr-trust__headline { font-size: 1.25rem; }
}

/* ============================================================
   Section 3 - Problem / pain
   ============================================================ */

.pr-problem {
  background: var(--pr-bg-grey);
  padding: var(--pr-section-pad-y) var(--pr-side-pad);
}

.pr-problem__inner {
  max-width: var(--pr-max-width);
  margin: 0 auto;
}

.pr-problem__head {
  text-align: center;
  margin-bottom: 56px;
}

.pr-section-eyebrow {
  font-size: var(--type-eyebrow);
  font-weight: var(--weight-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--pr-cyan);
  margin-bottom: 16px;
}

.pr-section-headline {
  font-size: var(--type-section-headline);
  font-weight: var(--weight-headline);
  line-height: var(--lh-headline);
  color: var(--pr-text);
  letter-spacing: -0.015em;
  max-width: 960px;
  margin: 0 auto;
}

.pr-problem__body {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 64px;
  align-items: center;
}

.pr-problem__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pr-problem__item {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--pr-text);
  padding: 24px 0;
  border-bottom: 1px solid var(--pr-cyan);
}

.pr-problem__item:last-child { border-bottom: none; }
.pr-problem__item:first-child { padding-top: 0; }

.pr-problem__item strong { font-weight: 700; }

.pr-problem__illust {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pr-problem__illust img {
  width: 100%;
  max-width: 380px;
  height: auto;
}

@media (max-width: 900px) {
  .pr-problem__head { margin-bottom: 36px; }
  .pr-problem__body {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .pr-problem__illust img { max-width: 260px; }
}

/* ============================================================
   Section 4 - Why landing page
   ============================================================ */

.pr-why {
  background: #FFFFFF;
  padding: var(--pr-section-pad-y) var(--pr-side-pad);
}

.pr-why__inner {
  max-width: var(--pr-max-width);
  margin: 0 auto;
}

.pr-why__head {
  text-align: center;
  margin-bottom: 48px;
}

.pr-section-sub {
  margin-top: 18px;
  font-size: var(--type-section-subhead);
  line-height: 1.55;
  color: var(--pr-text-muted);
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.pr-why__table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  margin-bottom: 72px;
  background: var(--pr-bg-card);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}

.pr-why__table th,
.pr-why__table td {
  width: 50%;
}

.pr-why__table th,
.pr-why__table td {
  padding: 18px 24px;
  text-align: left;
  font-size: 1rem;
  color: var(--pr-text);
  vertical-align: middle;
}

.pr-why__table th {
  font-size: 1.625rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding-top: 28px;
  padding-bottom: 28px;
}

/* Column-wide tint: left col warm pink (matches the red X marks),
   right col cool cyan tint (matches the brand accent). Sampled from wireframe. */
.pr-why__table th:first-child,
.pr-why__table td:first-child {
  background: #F6EBEB;
  color: var(--pr-text);
}

.pr-why__table th:last-child,
.pr-why__table td:last-child {
  background: #EAF9FC;
}

.pr-why__table thead th:first-child {
  color: var(--pr-text);
}

.pr-why__table thead th:last-child {
  color: var(--pr-cyan);
}

.pr-why__table tbody tr + tr td {
  border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.pr-why__icon-x,
.pr-why__icon-check {
  display: inline-block;
  width: 22px;
  height: 22px;
  vertical-align: middle;
  margin-right: 12px;
}

.pr-why__icon-x { color: #E94B3C; }
.pr-why__icon-check { color: var(--pr-cyan); }

.pr-why__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-bottom: 56px;
}

.pr-why__card {
  display: flex;
  flex-direction: column;
  text-align: left;
}

.pr-why__card-icon {
  width: 130px;
  height: 130px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
}

.pr-why__card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pr-why__card-heading {
  font-size: var(--type-card-heading);
  font-weight: var(--weight-card-heading);
  line-height: var(--lh-card-head);
  color: var(--pr-text);
  margin-bottom: 14px;
}

.pr-why__card-body {
  font-size: var(--type-card-body);
  line-height: var(--lh-body);
  color: var(--pr-text-muted);
}

.pr-why__card-body p + p { margin-top: 4px; }

.pr-why__pullquote {
  font-size: var(--type-pullquote);
  font-weight: var(--weight-pullquote);
  line-height: var(--lh-pullquote);
  color: var(--pr-text);
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}

@media (max-width: 900px) {
  .pr-why__cards {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .pr-why__table th, .pr-why__table td { padding: 14px 14px; font-size: 0.9375rem; }
  .pr-why__pullquote { font-size: 1.125rem; }
}

/* ============================================================
   Section 5 - Lower CPC
   ============================================================ */

.pr-cpc {
  background: var(--pr-bg-grey);
  padding: var(--pr-section-pad-y) var(--pr-side-pad);
}

.pr-cpc__inner {
  max-width: var(--pr-max-width);
  margin: 0 auto;
}

.pr-cpc__head {
  text-align: center;
  margin-bottom: 48px;
}

.pr-cpc__flow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 12px;
  margin-bottom: 56px;
}

.pr-cpc__pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #FFFFFF;
  padding: 12px 18px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pr-text);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  white-space: nowrap;
}

.pr-cpc__pill-icon {
  width: 24px;
  height: 24px;
  color: var(--pr-cyan);
  flex-shrink: 0;
}

.pr-cpc__arrow {
  color: var(--pr-cyan);
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.pr-cpc__cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 56px;
}

.pr-cpc__card {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 36px 36px 40px;
  box-shadow: 0 2px 14px rgba(0,0,0,0.06);
  text-align: left;
}

.pr-cpc__card-label {
  text-align: center;
  font-size: var(--type-eyebrow);
  font-weight: var(--weight-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--pr-cyan);
  margin-bottom: 18px;
}

.pr-cpc__card-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  margin-bottom: 22px;
}

.pr-cpc__card-logo img {
  max-height: 100%;
  width: auto;
  object-fit: contain;
}

/* Google G is square -- needs more height to feel visually equal to Meta's wide wordmark */
.pr-cpc__card-logo--google img {
  height: 80px;
  max-height: none;
}

.pr-cpc__card-logo--meta img {
  max-height: 90%;
}

.pr-cpc__card-heading {
  text-align: center;
  font-size: var(--type-card-heading);
  font-weight: var(--weight-card-heading);
  line-height: var(--lh-card-head);
  color: var(--pr-text);
  margin-bottom: 22px;
}

.pr-cpc__card-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pr-cpc__card-list li {
  display: flex;
  gap: 12px;
  font-size: var(--type-card-body);
  line-height: 1.55;
  color: var(--pr-text);
  padding: 8px 0;
}

.pr-cpc__card-check {
  width: 18px;
  height: 18px;
  color: var(--pr-cyan);
  flex-shrink: 0;
  margin-top: 4px;
}

.pr-cpc__bottom {
  text-align: center;
  max-width: 880px;
  margin: 0 auto;
}

.pr-cpc__bottom-headline {
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--pr-text);
  margin-bottom: 10px;
}

.pr-cpc__bottom-sub {
  font-size: 1rem;
  color: var(--pr-text-muted);
}

@media (max-width: 900px) {
  .pr-cpc__cards {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .pr-cpc__flow { flex-wrap: wrap; gap: 8px; }
  .pr-cpc__pill { font-size: 0.6875rem; padding: 8px 12px; white-space: normal; }
  .pr-cpc__arrow { width: 20px; height: 20px; }
  .pr-cpc__bottom-headline { font-size: 1.25rem; }
}

/* ============================================================
   Section 6 - Solution three pillars
   ============================================================ */

.pr-pillars {
  background: #FFFFFF;
  padding: var(--pr-section-pad-y) var(--pr-side-pad);
}

.pr-pillars__inner {
  max-width: var(--pr-max-width);
  margin: 0 auto;
}

.pr-pillars__head {
  text-align: center;
  margin-bottom: 56px;
}

.pr-pillars__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.pr-pillars__card {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 56px 40px 44px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.08);
  text-align: center;
  border-top: 5px solid var(--pr-cyan);
}

.pr-pillars__card-icon {
  width: 160px;
  height: 160px;
  margin: 4px auto 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pr-pillars__card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pr-pillars__card-heading {
  font-size: var(--type-card-heading);
  font-weight: 800;
  line-height: 1.25;
  color: var(--pr-text);
  margin-bottom: 20px;
}

.pr-pillars__card-body {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--pr-text-muted);
  margin-bottom: 28px;
}

.pr-pillars__card-tag {
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pr-cyan);
}

@media (max-width: 900px) {
  .pr-pillars__grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* ============================================================
   Section 7 - 18-module framework library
   ============================================================ */

.pr-modules {
  background: var(--pr-bg-grey);
  padding: var(--pr-section-pad-y) var(--pr-side-pad);
}

.pr-modules__inner {
  max-width: var(--pr-max-width);
  margin: 0 auto;
}

.pr-modules__head {
  text-align: center;
  margin-bottom: 48px;
}

.pr-modules__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 16px;
}

.pr-modules__card {
  background: #FFFFFF;
  border-radius: 10px;
  padding: 20px 18px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.pr-modules__card:hover {
  background: #EAF9FC;
  box-shadow: 0 6px 16px rgba(0, 163, 204, 0.18);
  transform: translateY(-2px);
}

.pr-modules__num {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--pr-cyan);
  line-height: 1;
  margin-bottom: 12px;
}

.pr-modules__name {
  font-size: 0.875rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: var(--pr-text);
  line-height: 1.2;
  margin-bottom: 10px;
}

.pr-modules__desc {
  font-size: 0.8125rem;
  line-height: 1.45;
  color: var(--pr-text-muted);
}

@media (max-width: 1100px) {
  .pr-modules__grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 700px) {
  .pr-modules__grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Section 7b - Typical results CVR chart
   ============================================================ */

.pr-results {
  background: var(--pr-bg-grey);
  padding: var(--pr-section-pad-y) var(--pr-side-pad);
}

.pr-results__inner {
  max-width: var(--pr-max-width);
  margin: 0 auto;
}

.pr-results__head {
  text-align: center;
  margin-bottom: 40px;
}

.pr-results__chart-card {
  background: #F0F4F8;
  border: 1px solid rgba(0, 0, 0, 0.04);
  border-radius: 14px;
  padding: 36px 40px 24px;
  position: relative;
  overflow: hidden;
}

.pr-results__chart-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pr-text-muted);
  margin-bottom: 18px;
}

.pr-results__chart-wrap {
  position: relative;
  width: 100%;
  /* Aspect ratio matches the wireframe chart proportion */
  padding-bottom: 42%;
}

.pr-results__chart {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.pr-results__mascot {
  position: absolute;
  right: 4%;
  top: 8%;
  width: 26%;
  max-width: 280px;
  z-index: 2;
  pointer-events: none;
}

.pr-results__lift {
  position: absolute;
  right: 28px;
  bottom: 28px;
  background: var(--pr-cyan);
  color: #FFFFFF;
  font-size: 0.8125rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  padding: 8px 16px;
  border-radius: 999px;
  z-index: 3;
}

.pr-results__footnote {
  margin-top: 18px;
  text-align: center;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--pr-text-muted);
}

@media (max-width: 900px) {
  .pr-results__chart-card { padding: 24px 20px 16px; }
  .pr-results__chart-wrap { padding-bottom: 55%; }
  .pr-results__mascot { width: 32%; }
  .pr-results__lift { right: 14px; bottom: 14px; font-size: 0.6875rem; padding: 6px 12px; }
}

/* ============================================================
   Section 8 - Featured work
   ============================================================ */

.pr-work {
  background: #FFFFFF;
  padding: var(--pr-section-pad-y) var(--pr-side-pad);
}

.pr-work__inner {
  max-width: var(--pr-max-width);
  margin: 0 auto;
}

.pr-work__head {
  text-align: center;
  margin-bottom: 48px;
}

.pr-work__grid {
  display: flex;
  gap: 28px;
  overflow-x: auto;
  scroll-snap-type: none;
  scroll-padding-left: calc((100vw - var(--pr-max-width)) / 2 + var(--pr-side-pad));
  padding: 8px calc((100vw - var(--pr-max-width)) / 2 + var(--pr-side-pad)) 32px;
  margin: 0 calc(-1 * ((100vw - var(--pr-max-width)) / 2 + var(--pr-side-pad)));
  scrollbar-width: thin;
  scrollbar-color: var(--pr-cyan) var(--pr-bg-grey);
}
.pr-work__grid::-webkit-scrollbar { height: 10px; }
.pr-work__grid::-webkit-scrollbar-track { background: var(--pr-bg-grey); border-radius: 5px; }
.pr-work__grid::-webkit-scrollbar-thumb { background: var(--pr-cyan); border-radius: 5px; }
.pr-work__grid::-webkit-scrollbar-thumb:hover { background: #0087AB; }

.pr-work__card {
  flex: 0 0 540px;
  scroll-snap-align: start;
  background: #FFFFFF;
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.pr-work__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 163, 204, 0.20);
}

.pr-work__card:hover .pr-work__browser-body img {
  transform: scale(1.03);
}

.pr-work__hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
  font-size: 13px;
  color: var(--pr-text-muted);
}
.pr-work__hint-arrow {
  display: inline-flex;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pr-cyan);
  color: #fff;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  animation: pr-work-nudge 1.8s ease-in-out infinite;
}
@keyframes pr-work-nudge {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(4px); }
}

.pr-work__browser {
  background: #F4F7FA;
  padding: 20px;
  border-bottom: 1px solid var(--pr-border);
  display: block;
  text-decoration: none;
  color: inherit;
}

.pr-work__browser-chrome {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  background: #FFFFFF;
  border-radius: 8px 8px 0 0;
  border: 1px solid var(--pr-border);
  border-bottom: none;
}

.pr-work__browser-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D6DEE6;
  display: inline-block;
}

.pr-work__browser-bar {
  margin-left: 12px;
  height: 8px;
  flex: 1;
  background: #E5E9EE;
  border-radius: 4px;
}

.pr-work__browser-body {
  background: #FFFFFF;
  border: 1px solid var(--pr-border);
  border-radius: 0 0 8px 8px;
  aspect-ratio: 16 / 10;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--pr-text-muted);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: center;
  padding: 14px;
  overflow: hidden;
  position: relative;
}

.pr-work__browser-body img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform 0.4s ease;
}

.pr-work__body {
  padding: 24px 26px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex: 1;
}

.pr-work__tags {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pr-cyan);
}

.pr-work__title {
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--pr-text);
  line-height: 1.2;
}

.pr-work__desc {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--pr-text-muted);
  flex: 1;
}

.pr-work__link {
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--pr-cyan);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
}

.pr-work__link:hover { text-decoration: underline; }

.pr-work__footnote {
  margin-top: 32px;
  text-align: center;
  font-size: 0.875rem;
  font-style: italic;
  color: var(--pr-text-muted);
}

@media (max-width: 900px) {
  .pr-work__grid {
    gap: 16px;
    scroll-padding-left: var(--pr-side-pad);
    padding: 8px var(--pr-side-pad) 20px;
    margin: 0 calc(-1 * var(--pr-side-pad));
  }
  .pr-work__card { flex: 0 0 85vw; max-width: 460px; }
  .pr-work__hint { display: none; }
}

.pr-work__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 16px;
}
.pr-work__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #D6DEE6;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}
.pr-work__dot:hover { transform: scale(1.2); }
.pr-work__dot[aria-current="true"] {
  background: var(--pr-cyan);
  transform: scale(1.3);
}
@media (min-width: 901px) {
  .pr-work__dots { display: none; }
}

/* ============================================================
   Section 8b - Social proof testimonials
   ============================================================ */

.pr-proof {
  background: var(--pr-bg-grey);
  padding: var(--pr-section-pad-y) var(--pr-side-pad);
}

.pr-proof__inner {
  max-width: var(--pr-max-width);
  margin: 0 auto;
}

.pr-proof__head {
  text-align: center;
  margin-bottom: 48px;
}

.pr-proof__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 40px;
}

.pr-proof__card {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 28px 28px 26px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
}

.pr-proof__stars {
  display: flex;
  gap: 3px;
  margin-bottom: 16px;
}

.pr-proof__stars svg {
  width: 18px;
  height: 18px;
  color: var(--pr-cyan);
  fill: currentColor;
}

.pr-proof__quote {
  font-size: 1.1875rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--pr-text);
  margin-bottom: 14px;
}

.pr-proof__body {
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--pr-text-muted);
  margin-bottom: 20px;
  flex: 1;
}

.pr-proof__meta {
  display: flex;
  align-items: center;
  gap: 14px;
  border-top: 1px solid var(--pr-border);
  padding-top: 18px;
}

.pr-proof__photo {
  width: 56px;
  height: 56px;
  background: var(--pr-bg-grey);
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pr-proof__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.pr-proof__author {
  font-size: 0.9375rem;
  font-weight: 800;
  color: var(--pr-text);
  line-height: 1.25;
  margin-bottom: 2px;
}

.pr-proof__role {
  font-size: 0.8125rem;
  color: var(--pr-text-muted);
  line-height: 1.3;
}

.pr-proof__tag {
  font-size: 0.75rem;
  font-style: italic;
  color: var(--pr-cyan);
  margin-top: 2px;
}

.pr-proof__bottom {
  text-align: center;
  font-size: 1.375rem;
  font-weight: 800;
  color: var(--pr-text);
}

@media (max-width: 900px) {
  .pr-proof__grid { grid-template-columns: 1fr; gap: 20px; }
  .pr-proof__bottom { font-size: 1.125rem; }
}

/* ============================================================
   Section 9 - How it works (3 steps)
   ============================================================ */

.pr-process {
  background: #FFFFFF;
  padding: var(--pr-section-pad-y) var(--pr-side-pad);
}

.pr-process__inner {
  max-width: var(--pr-max-width);
  margin: 0 auto;
}

.pr-process__head {
  text-align: center;
  margin-bottom: 56px;
}

.pr-process__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  position: relative;
  margin-bottom: 32px;
}

.pr-process__step {
  text-align: center;
  position: relative;
}

.pr-process__step-num {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--pr-cyan);
  color: #FFFFFF;
  font-size: 1.625rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 28px;
  position: relative;
  z-index: 2;
}

/* Dashed connector line between step circles (desktop only) */
.pr-process__step:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 44px;   /* vertical-center of 88px circle */
  left: calc(50% + 44px);
  right: calc(-50% + 44px);
  border-top: 2px dashed var(--pr-cyan);
  z-index: 1;
}

.pr-process__step-title {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--pr-text);
  line-height: 1.2;
  margin-bottom: 16px;
}

.pr-process__step-body {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--pr-text-muted);
  max-width: 320px;
  margin: 0 auto;
}

.pr-process__footnote {
  text-align: center;
  font-size: 0.9375rem;
  color: var(--pr-text-muted);
  margin-top: 32px;
}

@media (max-width: 900px) {
  .pr-process__steps {
    grid-template-columns: 1fr;
    gap: 40px;
  }
  .pr-process__step:not(:last-child)::after { display: none; }
}

/* ============================================================
   Section 10 - What's included (8-tile grid)
   ============================================================ */

.pr-included {
  background: #FFFFFF;
  padding: var(--pr-section-pad-y) var(--pr-side-pad);
}

.pr-included__inner {
  max-width: var(--pr-max-width);
  margin: 0 auto;
}

.pr-included__head {
  text-align: center;
  margin-bottom: 56px;
}

.pr-included__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px 32px;
  margin-bottom: 48px;
}

.pr-included__item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.pr-included__icon {
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.pr-included__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pr-included__title {
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--pr-text);
  line-height: 1.25;
  margin-bottom: 10px;
  max-width: 220px;
}

.pr-included__body {
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--pr-text-muted);
  max-width: 240px;
}

.pr-included__bottom {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--pr-text);
}

@media (max-width: 1024px) {
  .pr-included__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
}

@media (max-width: 600px) {
  .pr-included__bottom { font-size: 1.0625rem; }
}

/* ============================================================
   Section 11 - Pricing
   ============================================================ */

.pr-pricing {
  background: #FFFFFF;
  padding: var(--pr-section-pad-y) var(--pr-side-pad);
}

.pr-pricing__inner {
  max-width: var(--pr-max-width);
  margin: 0 auto;
}

.pr-pricing__head {
  text-align: center;
  margin-bottom: 56px;
}

.pr-pricing__body {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 40px;
  align-items: start;
}

.pr-pricing__illust {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pr-pricing__illust img {
  width: 100%;
  max-width: 940px;
  height: auto;
}

.pr-pricing__cards {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.pr-pricing__card {
  background: #FFFFFF;
  border-radius: 14px;
  border-top: 5px solid var(--pr-cyan);
  padding: 36px 36px 32px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.pr-pricing__pill {
  display: inline-block;
  background: var(--pr-bg-grey);
  color: var(--pr-text);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 16px;
  border-radius: 999px;
  margin-bottom: 18px;
}

.pr-pricing__price {
  font-size: 3.25rem;
  font-weight: 800;
  color: var(--pr-text);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
}

.pr-pricing__price-label {
  font-size: 0.9375rem;
  color: var(--pr-text-muted);
  margin-bottom: 22px;
}

.pr-pricing__card-head {
  text-align: center;
  border-bottom: 1px solid var(--pr-border);
  padding-bottom: 22px;
  margin-bottom: 22px;
}

.pr-pricing__list {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
}

.pr-pricing__list li {
  display: flex;
  gap: 12px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--pr-text);
  padding: 7px 0;
}

.pr-pricing__check {
  width: 22px;
  height: 22px;
  background: var(--pr-cyan);
  color: #FFFFFF;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

.pr-pricing__check svg { width: 14px; height: 14px; }

.pr-pricing__cta {
  width: 100%;
  margin-bottom: 16px;
}

.pr-pricing__fine {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--pr-text-muted);
  line-height: 1.5;
}

.pr-pricing__intro {
  background: transparent;
  border: 2px dashed var(--pr-cyan);
  border-radius: 14px;
  padding: 28px 32px 24px;
  text-align: center;
}

.pr-pricing__intro-label {
  font-size: var(--type-eyebrow);
  font-weight: var(--weight-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--pr-cyan);
  margin-bottom: 10px;
}

.pr-pricing__intro-price {
  font-size: 2.75rem;
  font-weight: 800;
  color: var(--pr-text);
  line-height: 1;
  margin-bottom: 12px;
}

.pr-pricing__intro-eligibility {
  font-size: 0.9375rem;
  color: var(--pr-text);
  font-weight: 600;
  margin-bottom: 12px;
}

.pr-pricing__intro-fine {
  font-size: 0.8125rem;
  color: var(--pr-text-muted);
}

@media (max-width: 900px) {
  .pr-pricing__body { grid-template-columns: 1fr; gap: 36px; }
  .pr-pricing__illust img { max-width: 280px; }
}

/* ============================================================
   Section 12 - About BrandRocket
   ============================================================ */

.pr-about {
  background: #FFFFFF;
  padding: var(--pr-section-pad-y) var(--pr-side-pad);
}

.pr-about__inner {
  max-width: var(--pr-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

/* LEFT column: operating-system diagram */
.pr-about__os {
  text-align: center;
}

.pr-about__os-label {
  font-size: var(--type-eyebrow);
  font-weight: var(--weight-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--pr-cyan);
  margin-bottom: 28px;
}

.pr-about__os-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 32px;
}

.pr-about__os-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 22px 14px;
  width: 110px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10);
  position: relative;
  z-index: 2;
}

.pr-about__os-pill svg {
  width: 42px;
  height: 42px;
  color: var(--pr-cyan);
}

.pr-about__os-pill-label {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--pr-text);
  text-align: center;
  line-height: 1.2;
}

.pr-about__os-connector {
  flex: 0 1 36px;
  height: 0;
  border-top: 2px dashed var(--pr-cyan);
  margin: 0;
  z-index: 1;
}

.pr-about__logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.pr-about__logo img {
  width: 200px;
  height: auto;
  margin-top: 8px;
}

/* RIGHT column: copy */
.pr-about__copy {}

.pr-about__copy p {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--pr-text);
  margin-bottom: 18px;
}

.pr-about__copy p:last-of-type { margin-bottom: 0; }

.pr-about__italic {
  font-size: 1.0625rem;
  font-style: italic;
  color: var(--pr-text);
  margin-top: 22px;
  margin-bottom: 22px;
}

.pr-about__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.pr-about__tag {
  display: inline-block;
  border: 1.5px solid var(--pr-cyan);
  color: var(--pr-cyan);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 14px;
  border-radius: 999px;
}

@media (max-width: 900px) {
  .pr-about__inner { grid-template-columns: 1fr; gap: 40px; }
  .pr-about__os-row { flex-wrap: wrap; gap: 10px; }
  .pr-about__os-connector { display: none; }
  .pr-about__os-pill { width: 80px; }
}

/* ============================================================
   Section 13 - FAQ
   ============================================================ */

.pr-faq {
  background: #EAF1F8;
  padding: var(--pr-section-pad-y) var(--pr-side-pad);
}

.pr-faq__inner {
  max-width: var(--pr-max-width);
  margin: 0 auto;
}

.pr-faq__head {
  text-align: center;
  margin-bottom: 48px;
}

.pr-faq__body {
  display: grid;
  grid-template-columns: 0.85fr 1.4fr;
  gap: 48px;
  align-items: center;
}

.pr-faq__mascot {
  display: flex;
  align-items: center;
  justify-content: center;
}

.pr-faq__mascot img {
  width: 100%;
  max-width: 288px;
  height: auto;
}

.pr-faq__list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.pr-faq__item {
  background: #FFFFFF;
  border-radius: 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.pr-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 20px 24px;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
}

.pr-faq__q-text {
  font-size: 1rem;
  font-weight: 700;
  color: var(--pr-text);
  line-height: 1.35;
}

.pr-faq__toggle {
  font-size: 1.5rem;
  color: var(--pr-cyan);
  font-weight: 400;
  line-height: 1;
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.pr-faq__item[open] .pr-faq__toggle {
  transform: rotate(45deg);
}

.pr-faq__a {
  padding: 0 24px 22px;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--pr-text-muted);
}

/* details/summary native styling reset */
.pr-faq__item summary { list-style: none; }
.pr-faq__item summary::-webkit-details-marker { display: none; }

@media (max-width: 900px) {
  .pr-faq__body { grid-template-columns: 1fr; gap: 24px; }
  .pr-faq__mascot img { max-width: 220px; }
}

/* ============================================================
   Section 14 - Risk reversal
   ============================================================ */

.pr-risk {
  background: #FFFFFF;
  padding: var(--pr-section-pad-y) var(--pr-side-pad);
}

.pr-risk__inner {
  max-width: var(--pr-max-width);
  margin: 0 auto;
}

.pr-risk__head {
  text-align: center;
  margin-bottom: 48px;
}

.pr-risk__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-bottom: 40px;
}

.pr-risk__card {
  background: #FFFFFF;
  border-radius: 14px;
  border-top: 5px solid var(--pr-cyan);
  padding: 44px 32px 36px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.pr-risk__icon {
  width: 110px;
  height: 110px;
  margin: 0 auto 28px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pr-risk__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pr-risk__title {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.25;
  color: var(--pr-text);
  margin-bottom: 14px;
}

.pr-risk__body {
  font-size: 0.9375rem;
  line-height: 1.55;
  color: var(--pr-text-muted);
}

.pr-risk__divider {
  height: 4px;
  background: var(--pr-cyan);
  border-radius: 2px;
  margin: 32px 0 18px;
}

.pr-risk__footer {
  text-align: center;
  font-size: 0.9375rem;
  color: var(--pr-text-muted);
}

@media (max-width: 900px) {
  .pr-risk__grid { grid-template-columns: 1fr; gap: 20px; }
}

/* ============================================================
   Section 15 - Still wondering (math + symptoms + quote)
   ============================================================ */

.pr-wonder {
  background: var(--pr-bg-grey);
  padding: var(--pr-section-pad-y) var(--pr-side-pad);
}

.pr-wonder__inner {
  max-width: var(--pr-max-width);
  margin: 0 auto;
}

.pr-wonder__head {
  text-align: center;
  margin-bottom: 48px;
}

.pr-wonder__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 40px;
}

/* LEFT card: math */
.pr-wonder__math {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 36px 32px 32px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
  text-align: center;
  display: flex;
  flex-direction: column;
}

.pr-wonder__card-label {
  font-size: var(--type-eyebrow);
  font-weight: var(--weight-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--pr-cyan);
  margin-bottom: 28px;
  text-align: center;
}

.pr-wonder__chart {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 18px;
  margin: 40px 0 24px;
  position: relative;
  min-height: 280px;
}

.pr-wonder__bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  position: relative;
}

.pr-wonder__bar {
  width: 110px;
  border-radius: 4px 4px 0 0;
}

.pr-wonder__bar--short {
  background: #C9D0D8;
  height: 80px;
}

.pr-wonder__bar--tall {
  background: var(--pr-cyan);
  height: 240px;
  position: relative;
}

.pr-wonder__pill {
  position: absolute;
  top: -36px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--pr-cyan);
  color: #FFFFFF;
  font-size: 0.75rem;
  font-weight: 800;
  padding: 6px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.pr-wonder__bar-label {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pr-text-muted);
  text-align: center;
  line-height: 1.35;
  max-width: 130px;
}

.pr-wonder__mascot {
  width: 100px;
  height: auto;
  align-self: flex-end;   /* baseline aligned with bars */
  margin-right: 8px;
  flex-shrink: 0;
}

.pr-wonder__math-summary {
  font-size: 1.0625rem;
  font-weight: 800;
  color: var(--pr-text);
  margin-bottom: 8px;
  margin-top: auto;
}

.pr-wonder__math-fine {
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--pr-text-muted);
}

/* RIGHT column: 2 stacked cards */
.pr-wonder__right {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.pr-wonder__symptoms {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 28px 28px 24px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.pr-wonder__symptoms-label {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pr-cyan);
  margin-bottom: 18px;
}

.pr-wonder__list,
.pr-wonder__checklist-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pr-wonder__list li {
  display: flex;
  gap: 12px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--pr-text);
  padding: 7px 0;
  font-weight: 600;
}

.pr-wonder__x {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 3px;
  color: #E94B3C;
}

.pr-wonder__list li span:last-child { font-weight: 600; }

.pr-wonder__list em {
  display: block;
  font-style: normal;
  font-weight: 400;
  color: var(--pr-text-muted);
  font-size: 0.875rem;
  margin-top: 2px;
}

.pr-wonder__checklist {
  background: transparent;
  border: 2px dashed var(--pr-cyan);
  border-radius: 14px;
  padding: 24px 28px;
}

.pr-wonder__checklist-list li {
  display: flex;
  gap: 12px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--pr-text);
  padding: 7px 0;
}

.pr-wonder__check {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--pr-cyan);
}

.pr-wonder__quote {
  text-align: center;
  font-size: var(--type-pullquote);
  font-weight: var(--weight-pullquote);
  font-style: italic;
  color: var(--pr-text);
  margin-top: 16px;
}

.pr-wonder__attr {
  text-align: center;
  font-size: 0.875rem;
  color: var(--pr-text-muted);
  margin-top: 8px;
}

@media (max-width: 900px) {
  .pr-wonder__body { grid-template-columns: 1fr; }
  .pr-wonder__mascot { display: none; }
}

/* ============================================================
   Section 16a - Final CTA form (yellow band)
   ============================================================ */

.pr-cta {
  background: var(--pr-yellow);
  padding: var(--pr-section-pad-y) var(--pr-side-pad);
}

.pr-cta__inner {
  max-width: var(--pr-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 56px;
  align-items: start;
}

.pr-cta__copy {
  color: var(--pr-text);
}

.pr-cta__headline {
  font-size: var(--type-section-headline);
  font-weight: var(--weight-headline);
  line-height: var(--lh-headline);
  letter-spacing: -0.015em;
  color: var(--pr-text);
  margin-bottom: 18px;
}

.pr-cta__body {
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--pr-text);
  margin-bottom: 22px;
}

.pr-cta__list {
  list-style: none;
  margin: 0 0 26px;
  padding: 0;
}

.pr-cta__list li {
  display: flex;
  gap: 12px;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--pr-text);
  padding: 6px 0;
  font-weight: 500;
}

.pr-cta__list svg {
  width: 18px;
  height: 18px;
  color: var(--pr-text);
  flex-shrink: 0;
  margin-top: 4px;
}

.pr-cta__intro {
  font-size: 0.9375rem;
  color: var(--pr-text);
}

.pr-cta__intro-q {
  font-weight: 700;
  margin-bottom: 4px;
}

.pr-cta__intro-a { font-weight: 700; }

/* Form card */
.pr-cta__form {
  background: #FFFFFF;
  border-radius: 14px;
  padding: 36px 36px 32px;
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
}

.pr-cta__form-heading {
  font-size: 1.625rem;
  font-weight: 800;
  color: var(--pr-text);
  margin-bottom: 22px;
}

.pr-cta__field {
  margin-bottom: 16px;
}

.pr-cta__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--pr-text);
  margin-bottom: 6px;
}

.pr-cta__input,
.pr-cta__select,
.pr-cta__textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 1rem;
  color: var(--pr-text);
  background: #FFFFFF;
  border: 1.5px solid #D6DEE6;
  border-radius: 8px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
  -webkit-appearance: none;
  appearance: none;
}

.pr-cta__select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

.pr-cta__textarea {
  min-height: 84px;
  resize: vertical;
  font-family: inherit;
}

.pr-cta__input:focus,
.pr-cta__select:focus,
.pr-cta__textarea:focus {
  outline: none;
  border-color: var(--pr-cyan);
  box-shadow: 0 0 0 3px rgba(0, 163, 204, 0.18);
}

.pr-cta__submit {
  width: 100%;
  margin-top: 8px;
  font-size: 1.0625rem;
  padding: 16px 24px;
}

.pr-cta__reassure {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--pr-text-muted);
  margin-top: 12px;
}

/* Honeypot field is invisible */
.pr-cta__honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 900px) {
  .pr-cta__inner { grid-template-columns: 1fr; gap: 32px; }
  .pr-cta__form { padding: 24px 24px 22px; }
}

/* ============================================================
   Section 16b - Footer (dark)
   ============================================================ */

.pr-footer {
  background: var(--pr-dark);
  color: #FFFFFF;
  padding: 72px var(--pr-side-pad) 28px;
}

.pr-footer__inner {
  max-width: var(--pr-max-width);
  margin: 0 auto;
}

.pr-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1.4fr 1fr 0.8fr;
  gap: 32px;
  margin-bottom: 36px;
  align-items: start;
}

.pr-footer__brand img {
  width: 140px;
  height: auto;
  margin-bottom: 14px;
}

.pr-footer__tagline {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.6);
  line-height: 1.5;
}

.pr-footer__col-label {
  font-size: 0.6875rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pr-cyan);
  margin-bottom: 14px;
}

.pr-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.pr-footer__list li {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.55;
  margin-bottom: 8px;
}

.pr-footer__list a:hover { color: var(--pr-cyan); }

.pr-footer__col p {
  font-size: 0.875rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.55;
}

.pr-footer__mascot {
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.pr-footer__mascot img {
  width: 100%;
  max-width: 130px;
  height: auto;
}

.pr-footer__divider {
  border-top: 1px solid rgba(255,255,255,0.12);
  margin: 24px 0 18px;
}

.pr-footer__legal {
  text-align: center;
  font-size: 0.8125rem;
  color: rgba(255,255,255,0.55);
}

.pr-footer__legal a { color: inherit; }
.pr-footer__legal a:hover { color: var(--pr-cyan); }

@media (max-width: 900px) {
  .pr-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: 28px;
  }
  .pr-footer__mascot { grid-column: span 2; max-width: 100px; margin: 0 auto; }
  .pr-footer__mascot img { max-width: 100px; }
}