/* Problems We Solve — hub + 10 problem pages. Tokens only. */

/* ---------- hero ---------- */
.pwp-phero { position: relative; overflow: hidden; isolation: isolate; --pwp-section-y: var(--pwp-space-9); }
.pwp-phero__photo {
  position: absolute; inset: 0; inline-size: 100%; block-size: 100%;
  object-fit: cover; z-index: -2;
}
.pwp-phero__scrim {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, var(--pwp-scrim-strong) 0%, var(--pwp-scrim-strong) 44%, transparent 88%);
}
.pwp-phero__grid { display: grid; }
.pwp-phero__copy { max-inline-size: 58ch; display: grid; gap: var(--pwp-space-5); }
.pwp-phero__title {
  font-family: var(--pwp-ff-display); font-weight: var(--pwp-fw-bold);
  font-size: var(--pwp-fs-h1); line-height: var(--pwp-lh-h1);
  letter-spacing: var(--pwp-track-display); text-transform: uppercase;
  text-wrap: balance; margin: 0;
}
/* Restated question sits quietly under the headline instead of competing with it. */
.pwp-phero__question {
  font-size: var(--pwp-fs-eyebrow, 0.75rem); text-transform: uppercase;
  letter-spacing: var(--pwp-track-eyebrow); color: var(--pwp-fg-muted);
  margin: calc(var(--pwp-space-3) * -1) 0 0; padding-inline-start: var(--pwp-space-4);
  position: relative; max-inline-size: 46ch;
}
.pwp-phero__question::before {
  content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.55em;
  inline-size: 10px; block-size: 1px; background: var(--pwp-accent);
}
.pwp-phero__lead { font-size: var(--pwp-fs-lead); line-height: var(--pwp-lh-lead); max-inline-size: 52ch; margin: 0; }
.pwp-phero__actions { display: flex; flex-wrap: wrap; gap: var(--pwp-space-4); margin-block-start: var(--pwp-space-2); }
@media (min-width: 1024px) { .pwp-phero { min-block-size: 660px; display: grid; align-items: center; } }

/* Problems hub hero: use the full opening viewport and center the copy inside
   the usable space below the fixed header. Child problem heroes stay unchanged. */
.pwp-phero--hub {
  min-block-size: 100svh;
  padding-block: var(--pwp-header-h) 0;
  display: grid;
}
.pwp-phero--hub .pwp-phero__photo {
  object-position: center 42%;
}
.pwp-phero--hub .pwp-phero__grid {
  position: relative;
  min-block-size: calc(100svh - var(--pwp-header-h));
  align-items: center;
  padding-block: clamp(36px, 6vh, 72px);
}
.pwp-phero--hub .pwp-phero__copy {
  gap: 0;
  align-content: center;
}
.pwp-phero--hub .pwp-phero__copy > .pwp-eyebrow {
  margin: 0 0 clamp(20px, 3vh, 32px);
}
.pwp-phero--hub .pwp-phero__title {
  margin: 0 0 clamp(24px, 3.6vh, 40px);
}
.pwp-phero--hub .pwp-phero__lead {
  margin: 0 0 clamp(28px, 4vh, 44px);
}
.pwp-phero--hub .pwp-phero__actions {
  margin: 0;
}
@media (min-width: 1280px) {
  .pwp-phero--hub .pwp-hero-scene--problems {
    inset-inline-start: 54%;
    inset-block-start: 15%;
  }
}
@media (min-width: 1024px) {
  .pwp-phero--hub .pwp-phero__copy { max-inline-size: 49%; }
}
@media (min-width: 1200px) {
  .pwp-phero--hub .pwp-phero__photo { object-position: 100% 50%; }
}
@media (max-width: 1023px) {
  .pwp-phero--hub .pwp-phero__photo { object-position: 78% center; }
  .pwp-phero--hub .pwp-phero__scrim {
    background: linear-gradient(100deg, var(--pwp-scrim-strong) 0%, var(--pwp-scrim-strong) 54%, transparent 100%);
  }
}
@media (max-width: 640px) {
  .pwp-phero--hub {
    min-block-size: 100svh;
    padding-block-start: var(--pwp-header-h-condensed);
  }
  .pwp-phero--hub .pwp-phero__grid {
    min-block-size: calc(100svh - var(--pwp-header-h-condensed));
    padding-block: clamp(32px, 5vh, 48px);
  }
  .pwp-phero--hub .pwp-phero__photo { object-position: 78% center; }
  .pwp-phero--hub .pwp-phero__scrim {
    background: linear-gradient(100deg, var(--pwp-scrim-strong) 0%, var(--pwp-scrim-strong) 68%, color-mix(in oklab, var(--pwp-scrim-strong) 72%, transparent) 100%);
  }
  .pwp-phero--hub .pwp-phero__copy > .pwp-eyebrow { margin-block-end: var(--pwp-space-4); }
  .pwp-phero--hub .pwp-phero__title { margin-block-end: var(--pwp-space-5); }
  .pwp-phero--hub .pwp-phero__lead { margin-block-end: var(--pwp-space-6); }
  .pwp-phero--hub .pwp-hero-scene--problems { padding-block-start: 8rem; }
}


/* ---------- 30-second answer + benefits ---------- */
.pwp-panswer__grid { display: grid; gap: var(--pwp-space-7); align-items: start; }
@media (min-width: 1024px) { .pwp-panswer__grid { grid-template-columns: minmax(0, 1fr) 320px; } }
.pwp-panswer__lead { font-size: var(--pwp-fs-lead); line-height: var(--pwp-lh-lead); max-inline-size: 68ch; margin-block: var(--pwp-space-4) var(--pwp-space-6); }
.pwp-formula {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--pwp-space-2);
  margin-block-end: var(--pwp-space-6); font-family: var(--pwp-ff-display);
  text-transform: uppercase; letter-spacing: var(--pwp-track-label);
}
.pwp-formula span { border: var(--pwp-hairline-strong); padding: var(--pwp-space-2) var(--pwp-space-3); border-radius: var(--pwp-radius-xs); }
.pwp-formula i { color: var(--pwp-accent); font-style: normal; font-weight: var(--pwp-fw-bold); }
.pwp-pbenefits { display: grid; gap: 1px; background: var(--pwp-line); border: var(--pwp-hairline); }
@media (min-width: 640px) { .pwp-pbenefits { grid-template-columns: 1fr 1fr; } }
.pwp-pbenefits li { background: var(--pwp-card); padding: var(--pwp-space-5); }
.pwp-pbenefits h3 {
  font-family: var(--pwp-ff-display); font-size: var(--pwp-fs-h4);
  letter-spacing: var(--pwp-track-h3); text-transform: uppercase; margin: 0 0 var(--pwp-space-2);
}
.pwp-pbenefits p { margin: 0; color: var(--pwp-fg-muted); }
.pwp-pcalc {
  border: var(--pwp-hairline-strong); border-block-start: 3px solid var(--pwp-accent);
  padding: var(--pwp-space-5); background: var(--pwp-card); border-radius: var(--pwp-radius-sm);
}
.pwp-pcalc__title { font-family: var(--pwp-ff-display); text-transform: uppercase; letter-spacing: var(--pwp-track-h3); margin: 0 0 var(--pwp-space-4); }
.pwp-pcalc__note { margin: var(--pwp-space-3) 0 0; font-size: var(--pwp-fs-small); color: var(--pwp-fg-muted); }

/* ---------- usual fixes ---------- */
.pwp-pfails__grid { display: grid; gap: 1px; background: var(--pwp-line); border: var(--pwp-hairline); margin-block-start: var(--pwp-space-6); }
@media (min-width: 768px) { .pwp-pfails__grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1240px) { .pwp-pfails__grid { grid-template-columns: repeat(4, 1fr); } }
.pwp-pfails__grid li { background: var(--pwp-card); padding: var(--pwp-space-5); }
.pwp-pfails__no { font-family: var(--pwp-ff-display); color: var(--pwp-accent); letter-spacing: var(--pwp-track-label); }
.pwp-pfails__grid h3 { font-family: var(--pwp-ff-display); font-size: var(--pwp-fs-h4); text-transform: uppercase; letter-spacing: var(--pwp-track-h3); margin: var(--pwp-space-2) 0; }
.pwp-pfails__grid p { margin: 0; color: var(--pwp-fg-muted); }

/* ---------- familiar + cost ---------- */
.pwp-pcost__grid { display: grid; gap: var(--pwp-space-7); align-items: start; }
@media (min-width: 1024px) { .pwp-pcost__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); } }
.pwp-pcost__list { margin-block-start: var(--pwp-space-5); display: grid; gap: var(--pwp-space-4); }
.pwp-pcost__list li {
  padding-inline-start: var(--pwp-space-5); position: relative;
  font-size: var(--pwp-fs-lead); line-height: var(--pwp-lh-lead);
  border-block-end: var(--pwp-hairline); padding-block-end: var(--pwp-space-4);
}
.pwp-pcost__list li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.7em; inline-size: 14px; block-size: 2px; background: var(--pwp-accent); }
.pwp-pcost__panel { border: var(--pwp-hairline-strong); border-block-start: 3px solid var(--pwp-accent); padding: var(--pwp-space-6); background: var(--pwp-card); }
.pwp-pcost__panel h3 { font-family: var(--pwp-ff-display); text-transform: uppercase; letter-spacing: var(--pwp-track-h3); margin: 0 0 var(--pwp-space-4); }
.pwp-pcost__setup { margin: 0 0 var(--pwp-space-3); color: var(--pwp-fg-muted); }
.pwp-pcost__math { margin: 0 0 var(--pwp-space-4); font-family: var(--pwp-ff-display); letter-spacing: var(--pwp-track-label); }
.pwp-pcost__figure { font-family: var(--pwp-ff-display); font-size: var(--pwp-fs-metric); line-height: 1; color: var(--pwp-accent); margin: 0; }
.pwp-pcost__figure span { display: block; font-size: var(--pwp-fs-small); letter-spacing: var(--pwp-track-label); text-transform: uppercase; color: var(--pwp-fg-muted); margin-block-start: var(--pwp-space-2); }
.pwp-pcost__note { margin: var(--pwp-space-4) 0 0; font-size: var(--pwp-fs-small); color: var(--pwp-fg-muted); }

/* ---------- root cause + book ---------- */
.pwp-proot__grid { display: grid; gap: var(--pwp-space-7); align-items: start; }
@media (min-width: 1024px) { .pwp-proot__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); } }
.pwp-proot__body { font-size: var(--pwp-fs-lead); line-height: var(--pwp-lh-lead); max-inline-size: 64ch; margin-block-start: var(--pwp-space-4); }
.pwp-pbook { border: var(--pwp-hairline-strong); padding: var(--pwp-space-6); border-radius: var(--pwp-radius-sm); }
.pwp-pbook__label { font-size: var(--pwp-fs-eyebrow); letter-spacing: var(--pwp-track-eyebrow); text-transform: uppercase; color: var(--pwp-accent-bright); margin: 0; }
.pwp-pbook__title { font-family: var(--pwp-ff-display); font-size: var(--pwp-fs-h3); text-transform: uppercase; letter-spacing: var(--pwp-track-h3); margin: var(--pwp-space-2) 0 var(--pwp-space-3); }
.pwp-pbook__body { margin: 0 0 var(--pwp-space-4); color: var(--pwp-fg-muted); }
.pwp-pbook__link { display: inline-flex; align-items: center; gap: var(--pwp-space-2); font-family: var(--pwp-ff-display); text-transform: uppercase; letter-spacing: var(--pwp-track-label); color: var(--pwp-accent-bright); }
.pwp-pbook__link svg { fill: none; stroke: currentColor; stroke-width: 1.6; }

/* ---------- what has to change ---------- */
.pwp-pchange__list { counter-reset: step; display: grid; gap: 1px; background: var(--pwp-line); border: var(--pwp-hairline); margin-block-start: var(--pwp-space-6); list-style: none; padding: 0; }
@media (min-width: 900px) { .pwp-pchange__list { grid-template-columns: 1fr 1fr; } }
.pwp-pchange__list li {
  counter-increment: step; background: var(--pwp-card);
  padding: var(--pwp-space-5) var(--pwp-space-5) var(--pwp-space-5) var(--pwp-space-8);
  position: relative; font-size: var(--pwp-fs-body);
}
.pwp-pchange__list li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; inset-inline-start: var(--pwp-space-5); inset-block-start: var(--pwp-space-5);
  font-family: var(--pwp-ff-display); color: var(--pwp-accent); letter-spacing: var(--pwp-track-label);
}

/* ---------- PPS band ---------- */
.pwp-ppps__strap { font-size: var(--pwp-fs-lead, 1.05rem); color: var(--pwp-fg-muted); max-inline-size: 58ch; margin-block: var(--pwp-space-3) var(--pwp-space-6); }
.pwp-mode-paper .pwp-ppps__strap { color: var(--pwp-fg-muted); }
.pwp-ppssteps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--pwp-space-3); grid-template-columns: 1fr; }
@media (min-width: 600px) { .pwp-ppssteps { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } }
.pwp-ppsstep {
  min-inline-size: 0; display: flex; align-items: center; gap: var(--pwp-space-3);
  border: var(--pwp-hairline); padding: var(--pwp-space-4); border-radius: var(--pwp-radius-sm);
  transition: border-color var(--pwp-dur-2, 300ms) var(--pwp-ease, ease), transform var(--pwp-dur-2, 300ms) var(--pwp-ease, ease), background var(--pwp-dur-2, 300ms) var(--pwp-ease, ease);
}
.pwp-ppsstep:hover { transform: translateY(-2px); border-color: var(--pwp-accent); }

.pwp-ppsstep__no {
  inline-size: 30px; block-size: 30px; flex: none; display: grid; place-items: center;
  border-radius: 50%; border: 1px solid currentColor; color: var(--pwp-fg-muted);
  font-family: var(--pwp-ff-display); font-size: var(--pwp-fs-micro);
}
.pwp-ppsstep.is-active .pwp-ppsstep__no { color: var(--pwp-accent-bright); border-color: var(--pwp-accent); background: var(--pwp-accent-wash); }
.pwp-mode-paper .pwp-ppsstep.is-active .pwp-ppsstep__no { color: var(--pwp-accent-deep); }
.pwp-ppsstep__name { min-inline-size: 0; overflow-wrap: break-word; word-break: normal; hyphens: none; font-size: var(--pwp-fs-small); line-height: var(--pwp-lh-tight); }
.pwp-ppsstep.is-active .pwp-ppsstep__name { font-weight: var(--pwp-fw-semibold); }
.pwp-ppps__footnote { font-size: var(--pwp-fs-small); color: var(--pwp-fg-muted); margin-block-start: var(--pwp-space-4); }
.pwp-ppps__grid { display: grid; gap: var(--pwp-space-5); margin-block-start: var(--pwp-space-7); }
@media (min-width: 900px) { .pwp-ppps__grid { grid-template-columns: 1fr 1fr; } }
.pwp-ppps__card { border: var(--pwp-hairline-strong); padding: var(--pwp-space-6); }
.pwp-ppps__card h3 { font-family: var(--pwp-ff-display); font-size: var(--pwp-fs-h4); text-transform: uppercase; letter-spacing: var(--pwp-track-h3); margin: 0 0 var(--pwp-space-4); }
.pwp-ppps__card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--pwp-space-3); }
.pwp-ppps__card li { padding-inline-start: var(--pwp-space-4); position: relative; color: var(--pwp-fg-muted); }
.pwp-ppps__card li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: 0.65em; inline-size: 10px; block-size: 2px; background: var(--pwp-accent); }
.pwp-ppps__why { margin: 0; display: grid; gap: var(--pwp-space-4); }
.pwp-ppps__why dt { font-family: var(--pwp-ff-display); text-transform: uppercase; letter-spacing: var(--pwp-track-label); color: var(--pwp-accent-bright); }
.pwp-mode-paper .pwp-ppps__why dt { color: var(--pwp-accent-deep); }
.pwp-ppps__why dd { margin: var(--pwp-space-1) 0 0; color: var(--pwp-fg-muted); }

/* ---------- what gets better ---------- */
.pwp-pbetter__grid { display: grid; gap: 1px; background: var(--pwp-line); border: var(--pwp-hairline); margin-block-start: var(--pwp-space-6); }
@media (min-width: 768px) { .pwp-pbetter__grid { grid-template-columns: repeat(3, 1fr); } }
.pwp-pbetter__grid li { background: var(--pwp-card); padding: var(--pwp-space-5); font-size: var(--pwp-fs-lead); line-height: var(--pwp-lh-lead); }

/* ---------- objections ---------- */
.pwp-pobj__grid { margin-block-start: var(--pwp-space-6); display: grid; gap: 1px; background: var(--pwp-line); border: var(--pwp-hairline); }
@media (min-width: 900px) { .pwp-pobj__grid { grid-template-columns: 1fr 1fr; } }
.pwp-pobj__grid > div { background: var(--pwp-card); padding: var(--pwp-space-5); }
.pwp-pobj__grid dt { font-family: var(--pwp-ff-display); font-size: var(--pwp-fs-h4); text-transform: uppercase; letter-spacing: var(--pwp-track-h3); }
.pwp-pobj__grid dd { margin: var(--pwp-space-2) 0 0; color: var(--pwp-fg-muted); }

/* ---------- cost of waiting ---------- */
.pwp-pwait__grid { list-style: none; margin: var(--pwp-space-6) 0 0; padding: 0; display: grid; gap: 1px; background: var(--pwp-line); border: var(--pwp-hairline); }
@media (min-width: 700px) { .pwp-pwait__grid { grid-template-columns: repeat(3, 1fr); } }
.pwp-pwait__grid li { background: var(--pwp-card); padding: var(--pwp-space-6); display: grid; gap: var(--pwp-space-2); }
.pwp-pwait__label { font-size: var(--pwp-fs-eyebrow); letter-spacing: var(--pwp-track-eyebrow); text-transform: uppercase; color: var(--pwp-fg-muted); }
.pwp-pwait__value { font-family: var(--pwp-ff-display); font-size: var(--pwp-fs-h2); line-height: 1; color: var(--pwp-accent-deep); }
.pwp-mode-dark .pwp-pwait__value { color: var(--pwp-accent-bright); }
.pwp-pwait__note { margin-block-start: var(--pwp-space-4); font-size: var(--pwp-fs-small); color: var(--pwp-fg-muted); max-inline-size: 78ch; }

.pwp-pfaq { padding-block: clamp(64px, 7vw, 104px); }
@media (min-width: 1024px) {
  .pwp-pfaq > .pwp-container { display: grid; grid-template-columns: minmax(220px, 0.65fr) minmax(0, 1.75fr); gap: clamp(48px, 6vw, 96px); align-items: start; }
  .pwp-pfaq > .pwp-container > .pwp-sectionhead,
  .pwp-pfaq > .pwp-container > h2 { position: sticky; inset-block-start: 112px; margin: 0; max-inline-size: 9ch; }
}
.pwp-pfaq__list {
  margin-block-start: clamp(28px, 5vw, 48px);
  border-block-start: var(--pwp-hairline-strong);
  max-inline-size: min(72ch, 100%);
}
@media (min-width: 1024px) { .pwp-pfaq__list { margin-block-start: 0; max-inline-size: none; } }

.pwp-pfaq__item { border-block-end: var(--pwp-hairline-strong); transition: background-color var(--pwp-dur-craft-base) var(--pwp-ease-soft); }
.pwp-mode-dark .pwp-pfaq__item[open] { background: color-mix(in oklab, var(--pwp-accent) 4%, transparent); }

.pwp-pfaq__item summary {
  cursor: pointer; list-style: none;
  padding: clamp(20px, 2vw, 28px) clamp(8px, 1.25vw, 18px);
  display: grid; grid-template-columns: minmax(0, 1fr) 32px; align-items: center; gap: clamp(16px, 2vw, 28px);
  font-family: var(--pwp-ff-display); font-size: clamp(1rem, 1.25vw, 1.18rem); line-height: 1.35; text-transform: uppercase; letter-spacing: var(--pwp-track-h3);
  position: relative; min-block-size: 44px;
  transition: color var(--pwp-dur-craft-base) var(--pwp-ease-soft);
}
.pwp-pfaq__item summary::-webkit-details-marker { display: none; }
.pwp-pfaq__item summary:hover,
.pwp-pfaq__item summary:focus-visible { color: var(--pwp-accent-deep); }
.pwp-mode-dark .pwp-pfaq__item summary:hover,
.pwp-mode-dark .pwp-pfaq__item summary:focus-visible { color: var(--pwp-accent-bright); }
.pwp-pfaq__item summary:focus-visible { outline: 2px solid var(--pwp-accent); outline-offset: -2px; }

.pwp-pfaq__qtext { max-inline-size: 58ch; }

.pwp-pfaq__icon {
  flex: 0 0 auto;
  inline-size: 32px; block-size: 32px;
  display: grid; place-items: center;
}
.pwp-pfaq__icon::before,
.pwp-pfaq__icon::after {
  content: ""; grid-area: 1 / 1;
  background: currentColor; color: var(--pwp-fg-muted);
  transition: background-color var(--pwp-dur-craft-micro) var(--pwp-ease-soft), transform var(--pwp-dur-craft-base) var(--pwp-ease-soft), opacity var(--pwp-dur-craft-base) var(--pwp-ease-soft);
}
.pwp-pfaq__icon::before { inline-size: 20px; block-size: 2px; }
.pwp-pfaq__icon::after { inline-size: 2px; block-size: 20px; }
.pwp-pfaq__item[open] .pwp-pfaq__icon::after { transform: scaleY(0); opacity: 0; }
.pwp-pfaq__item[open] .pwp-pfaq__icon::before,
.pwp-pfaq__item[open] .pwp-pfaq__icon::after,
.pwp-pfaq__item summary:hover .pwp-pfaq__icon::before,
.pwp-pfaq__item summary:hover .pwp-pfaq__icon::after,
.pwp-pfaq__item summary:focus-visible .pwp-pfaq__icon::before,
.pwp-pfaq__item summary:focus-visible .pwp-pfaq__icon::after { background: var(--pwp-accent); }

.pwp-pfaq__answer {
  display: grid; grid-template-rows: 1fr;
  transition: grid-template-rows 320ms var(--pwp-ease-soft), opacity 220ms var(--pwp-ease-soft);
}
.pwp-pfaq__answerinner { min-block-size: 0; overflow: hidden; }
.js .pwp-pfaq__item[open] .pwp-pfaq__answer { grid-template-rows: 1fr; opacity: 1; }
.js .pwp-pfaq__item.is-opening .pwp-pfaq__answer,
.js .pwp-pfaq__item.is-closing .pwp-pfaq__answer { grid-template-rows: 0fr; opacity: 0; }
.pwp-pfaq__item p {
  margin: 0; padding: 0 clamp(48px, 5vw, 72px) clamp(22px, 2.4vw, 30px) clamp(8px, 1.25vw, 18px);
  color: var(--pwp-fg-muted); max-inline-size: 66ch; line-height: 1.65;
}

@media (prefers-reduced-motion: reduce) {
  .pwp-pfaq__answer, .pwp-pfaq__icon::before, .pwp-pfaq__icon::after, .pwp-pfaq__item { transition: none; }
}

/* ---------- related + tools ---------- */
.pwp-prel__grid { display: grid; gap: 1px; background: var(--pwp-line); border: var(--pwp-hairline); margin-block-start: var(--pwp-space-6); }
@media (min-width: 768px) { .pwp-prel__grid { grid-template-columns: repeat(3, 1fr); } }
.pwp-prel__grid a { display: grid; gap: var(--pwp-space-2); background: var(--pwp-card); padding: var(--pwp-space-5); block-size: 100%; }
.pwp-prel__grid a:hover .pwp-prel__name { color: var(--pwp-accent-deep); }
.pwp-mode-dark .pwp-prel__grid a:hover .pwp-prel__name { color: var(--pwp-accent-bright); }
.pwp-prel__no { font-size: var(--pwp-fs-eyebrow); letter-spacing: var(--pwp-track-eyebrow); text-transform: uppercase; color: var(--pwp-accent); }
.pwp-prel__name { font-family: var(--pwp-ff-display); font-size: var(--pwp-fs-h4); text-transform: uppercase; letter-spacing: var(--pwp-track-h3); }
.pwp-prel__q { color: var(--pwp-fg-muted); font-size: var(--pwp-fs-small); }
.pwp-ptools { display: flex; flex-wrap: wrap; gap: var(--pwp-space-3); margin-block-start: var(--pwp-space-6); }
.pwp-ptools a {
  display: inline-flex; align-items: center; gap: var(--pwp-space-3); min-block-size: 44px;
  padding: var(--pwp-space-3) var(--pwp-space-5); border: var(--pwp-hairline-strong);
  border-radius: var(--pwp-radius-sm); font-size: var(--pwp-fs-small);
}
.pwp-ptools a:hover { border-color: var(--pwp-accent); color: var(--pwp-accent-deep); }
.pwp-mode-dark .pwp-ptools a:hover { color: var(--pwp-accent-bright); }
.pwp-ptools svg { fill: none; stroke: currentColor; stroke-width: 1.6; color: var(--pwp-accent); }

/* ---------- hub index — narrative grid ---------- */
.pwp-phub__head { margin-block-end: var(--pwp-space-7); }
.pwp-phub__title {
  font-family: var(--pwp-ff-display); font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.04; text-transform: uppercase; letter-spacing: -0.02em;
  max-inline-size: 22ch; text-wrap: balance;
}
.pwp-phub__accent { color: var(--pwp-accent-bright); }
.pwp-mode-paper .pwp-phub__accent { color: var(--pwp-accent-deep); }
.pwp-phub__rule { inline-size: 96px; block-size: 3px; background: var(--pwp-accent); margin-block-start: var(--pwp-space-5); }
.pwp-phub__index { display: grid; border-block-start: var(--pwp-hairline); margin-block-start: var(--pwp-space-6); }
.pwp-phub__row { border-block-end: var(--pwp-hairline); }
.pwp-phub__row a {
  position: relative; display: grid; align-items: center; gap: var(--pwp-space-5);
  grid-template-columns: 112px minmax(0, 1fr) auto;
  min-block-size: 44px; padding: var(--pwp-space-5) var(--pwp-space-4);
  transition: background var(--pwp-dur-fast) var(--pwp-ease-out);
}
.pwp-phub__row a:hover, .pwp-phub__row a:focus-visible { background: var(--pwp-surface-800); }
.pwp-mode-paper .pwp-phub__row a:hover { background: var(--pwp-surface-50); }
.pwp-phub__rail { display: grid; grid-template-columns: 24px 24px; align-items: center; gap: var(--pwp-space-5); }
.pwp-phub__no { font-family: var(--pwp-ff-mono, var(--pwp-ff-display)); font-size: var(--pwp-fs-small); color: var(--pwp-fg-muted); line-height: 1; transition: color var(--pwp-dur-fast) var(--pwp-ease-out); }
.pwp-phub__row a:hover .pwp-phub__no, .pwp-phub__row a:focus-visible .pwp-phub__no { color: var(--pwp-accent); }
.pwp-phub__copy { display: grid; gap: var(--pwp-space-2); min-inline-size: 0; max-inline-size: 74ch; }
.pwp-phub__icon { flex-shrink: 0; }
.pwp-phub__icon svg { fill: none; stroke: currentColor; stroke-width: 1.6; color: var(--pwp-accent); display: block; }
.pwp-phub__q { font-family: var(--pwp-ff-display); font-size: var(--pwp-fs-h3); line-height: var(--pwp-lh-h3); transition: color var(--pwp-dur-fast) var(--pwp-ease-out); }
.pwp-phub__row a:hover .pwp-phub__q, .pwp-phub__row a:focus-visible .pwp-phub__q { color: var(--pwp-accent-bright); }
.pwp-phub__more { color: var(--pwp-fg-muted); font-size: var(--pwp-fs-small); line-height: 1.55; max-inline-size: 68ch; }
.pwp-phub__arrow svg { fill: none; stroke: currentColor; stroke-width: 1.6; color: var(--pwp-accent-bright); display: block; transition: transform var(--pwp-dur-fast) var(--pwp-ease-out); }
.pwp-mode-paper .pwp-phub__arrow svg { color: var(--pwp-accent-deep); }
.pwp-phub__row a:hover .pwp-phub__arrow svg, .pwp-phub__row a:focus-visible .pwp-phub__arrow svg { transform: translateX(4px); }
@media (max-width: 899px) {
  .pwp-phub__row a { grid-template-columns: 72px minmax(0, 1fr) auto; gap: var(--pwp-space-4); align-items: start; }
  .pwp-phub__rail { grid-template-columns: 20px 24px; gap: var(--pwp-space-3); padding-block-start: 2px; }
  .pwp-phub__arrow { align-self: center; }
}
@media (max-width: 479px) {
  .pwp-phub__row a { grid-template-columns: 52px minmax(0, 1fr) auto; gap: var(--pwp-space-3); padding-inline: 0; }
  .pwp-phub__rail { grid-template-columns: 18px 20px; gap: var(--pwp-space-2); }
  .pwp-phub__icon svg { inline-size: 20px; block-size: 20px; }
  .pwp-phub__q { font-size: 1.05rem; }
  .pwp-phub__more { line-height: 1.5; }
}
@media (prefers-reduced-motion: reduce) {
  .pwp-phub__row a, .pwp-phub__q, .pwp-phub__no, .pwp-phub__arrow svg { transition: none; }
}

/* ---------- final CTA ---------- */
.pwp-pfinal__panel { border: var(--pwp-hairline-strong); border-block-start: 3px solid var(--pwp-accent); border-radius: var(--pwp-radius-lg); padding: var(--pwp-space-7); text-align: center; }
.pwp-pfinal__title { font-family: var(--pwp-ff-display); font-size: var(--pwp-fs-h2); line-height: var(--pwp-lh-h2); text-transform: uppercase; letter-spacing: var(--pwp-track-h2); margin: 0 auto; max-inline-size: 24ch; text-wrap: balance; }
.pwp-pfinal__body { margin: var(--pwp-space-4) auto 0; max-inline-size: 62ch; color: var(--pwp-fg-muted); }
.pwp-pfinal__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--pwp-space-4); margin-block-start: var(--pwp-space-6); }

/* ---------- mobile guards ---------- */
@media (max-width: 640px) {
  .pwp-phero__actions .pwp-btn,
  .pwp-pfinal__actions .pwp-btn { inline-size: 100%; }
  .pwp-pcost__figure { font-size: var(--pwp-fs-h2); }
}

/* ---------- breadcrumb bar (matches Industries pattern) ---------- */
.pwp-page--problem .pwp-crumbbar {
  padding-block: calc(var(--pwp-header-h) + var(--pwp-space-4)) var(--pwp-space-4);
  border-block-end: 1px solid var(--pwp-line);
}
@media (max-width: 1023px) {
  .pwp-page--problem .pwp-crumbbar { padding-block-start: calc(var(--pwp-header-h-condensed) + var(--pwp-space-4)); }
}
.pwp-page--problem .pwp-crumb {
  display: flex; flex-wrap: wrap; gap: var(--pwp-space-2);
  margin: 0; padding: 0; list-style: none; font-size: 0.8rem; color: var(--pwp-fg-muted);
}
.pwp-page--problem .pwp-crumb li { display: flex; align-items: center; gap: var(--pwp-space-2); }
.pwp-page--problem .pwp-crumb li + li::before { content: "/"; color: var(--pwp-line-strong); }
.pwp-page--problem .pwp-crumb a { color: var(--pwp-fg-muted); text-decoration: none; }
.pwp-page--problem .pwp-crumb a:hover,
.pwp-page--problem .pwp-crumb a:focus-visible { color: var(--pwp-accent-text); }
.pwp-page--problem .pwp-crumb li[aria-current="page"] { color: var(--pwp-fg); }

/* link resets inside generated grids */
.pwp-phub__row a, .pwp-prel__grid a, .pwp-ptools a, .pwp-pbook__link { text-decoration: none; color: inherit; }
.pwp-phub__row a:focus-visible, .pwp-prel__grid a:focus-visible { outline: 2px solid var(--pwp-accent); outline-offset: -2px; }

/* ---------- craft pass: problem pages (spec 15-improvements) ---------- */
.pwp-pfails__grid li { position: relative; display: grid; gap: var(--pwp-space-2); align-content: start; }
.pwp-pfails__icon svg { fill: none; stroke: currentColor; stroke-width: 1.6; color: var(--pwp-accent); display: block; }
.pwp-pfails__grid h3 { margin: 0; }
.pwp-pfails__grid .pwp-disclose__lead,
.pwp-pfails__grid .pwp-disclose__more p,
.pwp-pchange__list .pwp-disclose__more p { color: var(--pwp-fg-muted); margin: 0; }
.pwp-pfails__grid .pwp-live__rule,
.pwp-pchange__list .pwp-live__rule { margin-block-start: var(--pwp-space-3); }
.pwp-pchange__list li { display: grid; gap: var(--pwp-space-2); align-content: start; }
.pwp-disclose__more > div > p { margin: var(--pwp-space-2) 0 0; }

/* cost of waiting */
.pwp-pwait__grid { gap: var(--pwp-space-4); background: none; border: 0; }
@media (min-width: 700px) { .pwp-pwait__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.pwp-pwait__grid li { background: none; min-inline-size: 0; padding: var(--pwp-space-6); gap: var(--pwp-space-3); border-radius: var(--pwp-radius-sm); }
.pwp-pwait__value { font-size: clamp(1.6rem, 4.4vw, var(--pwp-fs-h2)); overflow-wrap: anywhere; min-inline-size: 0; }

/* active PPS steps breathe */
.pwp-ppsstep.is-active { border-color: var(--pwp-accent); animation: pwp-step-pulse 3.6s var(--pwp-ease-soft) infinite; }
@keyframes pwp-step-pulse {
  0%, 100% { border-color: color-mix(in srgb, var(--pwp-accent) 45%, transparent); }
  50% { border-color: var(--pwp-accent); }
}

/* related tiles */
.pwp-prel__grid li { background: var(--pwp-card); }
.pwp-prel__go { display: inline-flex; align-items: center; gap: var(--pwp-space-2); margin-block-start: var(--pwp-space-3); font-size: var(--pwp-fs-small); text-transform: uppercase; letter-spacing: var(--pwp-track-label); color: var(--pwp-accent-deep); }
.pwp-mode-dark .pwp-prel__go { color: var(--pwp-accent-bright); }
.pwp-prel__go svg, .pwp-ptools .pwp-live__arrow { fill: none; stroke: currentColor; stroke-width: 1.6; }

@media (prefers-reduced-motion: reduce) {
  .pwp-ppsstep.is-active { animation: none; }
}
.pwp-pfails__grid li, .pwp-pchange__list li, .pwp-prel__grid li { min-inline-size: 0; overflow-wrap: anywhere; }
.pwp-disclose, .pwp-disclose__lead, .pwp-disclose__more, .pwp-disclose__more > div { min-inline-size: 0; overflow-wrap: anywhere; }


/* ---------- hairline grids: no orphan filled cells (craft pass) ---------- */
.pwp-pbetter__grid,
.pwp-pchange__list,
.pwp-pbenefits,
.pwp-pobj__grid { background: transparent; border: 0; }
.pwp-pbetter__grid > li,
.pwp-pchange__list > li,
.pwp-pbenefits > li,
.pwp-pobj__grid > div {
  box-shadow: 0 0 0 1px var(--pwp-line);
  transition: box-shadow var(--pwp-dur-2, 300ms) var(--pwp-ease, ease), transform var(--pwp-dur-2, 300ms) var(--pwp-ease, ease);
}
.pwp-pbetter__grid > li:hover,
.pwp-pbenefits > li:hover,
.pwp-pobj__grid > div:hover { box-shadow: 0 0 0 1px var(--pwp-accent); }

/* Visual layer — photo panel inside the root-cause column */
.pwp-proot__media { min-height: 200px; }
@media (min-width: 1024px) {
  .pwp-proot__grid > div:first-child { grid-column: 1; grid-row: 1 / span 2; }
  .pwp-proot__media { grid-column: 2; grid-row: 1; min-height: 220px; }
  .pwp-proot__grid .pwp-pbook { grid-column: 2; grid-row: 2; }
}
.pwp-pbenefits li.pwp-vrow { align-items: start; }