/* page-moneygoes.css — "Where the Money Actually Goes" page family.
   Loaded after page-problems.css; only adds the components unique to this
   family (hero data panel, benefit strip, four-column diagnostic band,
   four-card solution band, workflow chain, startable list, resource row).
   Tokens only: no raw colour values. */

.pwp-page--money .pwp-phero__title { text-transform: uppercase; }

/* --- hero data panel ------------------------------------------------ */
.pwp-mhero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: var(--pwp-space-8);
  align-items: center;
}

.pwp-mpanel {
  border: 1px solid var(--pwp-border-dark-strong);
  background: var(--pwp-surface-900);
  padding: var(--pwp-space-5);
  box-shadow: var(--pwp-shadow-lg);
}

.pwp-mpanel__title {
  margin: 0 0 var(--pwp-space-4);
  font-family: var(--pwp-ff-display);
  font-size: var(--pwp-fs-eyebrow);
  font-weight: var(--pwp-fw-bold);
  letter-spacing: var(--pwp-track-eyebrow);
  text-transform: uppercase;
  color: var(--pwp-accent);
}

.pwp-mpanel__rows,
.pwp-mpanel__totals { margin: 0; display: grid; gap: var(--pwp-space-2); }

.pwp-mpanel__rows > div,
.pwp-mpanel__totals > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--pwp-space-4);
  border-bottom: 1px solid var(--pwp-border-dark);
  padding-block-end: var(--pwp-space-2);
}

.pwp-mpanel__rows dt,
.pwp-mpanel__totals dt {
  font-size: var(--pwp-fs-small);
  color: var(--pwp-ink-inverse-muted);
}

.pwp-mpanel__rows dd,
.pwp-mpanel__totals dd {
  margin: 0;
  font-family: var(--pwp-ff-display);
  font-weight: var(--pwp-fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--pwp-ink-inverse);
}

.pwp-mpanel__totals {
  margin-block-start: var(--pwp-space-4);
  padding-block-start: var(--pwp-space-4);
  border-top: 2px solid var(--pwp-accent);
}

.pwp-mpanel__totals > div { border-bottom: 0; padding-block-end: 0; }
.pwp-mpanel__totals dt { color: var(--pwp-ink-inverse-soft); }
.pwp-mpanel__totals dd { font-size: var(--pwp-fs-h4); }
.pwp-mpanel__totals > div:last-child dd { color: var(--pwp-data-good); }

.pwp-mpanel__table { width: 100%; border-collapse: collapse; }

.pwp-mpanel__table th,
.pwp-mpanel__table td {
  text-align: left;
  padding: var(--pwp-space-2) var(--pwp-space-2) var(--pwp-space-2) 0;
  border-bottom: 1px solid var(--pwp-border-dark);
  font-size: var(--pwp-fs-small);
  color: var(--pwp-ink-inverse-muted);
}

.pwp-mpanel__table thead th {
  font-family: var(--pwp-ff-display);
  font-size: var(--pwp-fs-micro);
  letter-spacing: var(--pwp-track-label);
  text-transform: uppercase;
  color: var(--pwp-accent);
}

.pwp-mpanel__table tbody th { color: var(--pwp-ink-inverse); font-weight: var(--pwp-fw-semibold); }

.pwp-mpanel__note {
  margin: var(--pwp-space-4) 0 0;
  font-size: var(--pwp-fs-micro);
  color: var(--pwp-ink-inverse-muted);
}

/* --- quick benefit strip -------------------------------------------- */
.pwp-mstrip { padding-block: var(--pwp-space-8); border-top: 1px solid var(--pwp-border-dark); }

.pwp-mstrip__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pwp-space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pwp-mstrip__grid > li { border-top: 2px solid var(--pwp-accent); padding-block-start: var(--pwp-space-3); }

.pwp-mstrip__no {
  display: block;
  font-family: var(--pwp-ff-display);
  font-size: var(--pwp-fs-micro);
  letter-spacing: var(--pwp-track-label);
  color: var(--pwp-accent);
}

.pwp-mstrip__grid h2 {
  margin: var(--pwp-space-2) 0 var(--pwp-space-1);
  font-size: var(--pwp-fs-h4);
  line-height: var(--pwp-lh-h4);
  color: var(--pwp-ink-inverse);
}

.pwp-mstrip__grid p { margin: 0; font-size: var(--pwp-fs-small); color: var(--pwp-ink-inverse-muted); }

/* --- answer band ----------------------------------------------------- */
.pwp-manswer__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
  gap: var(--pwp-space-8);
  align-items: start;
}

.pwp-manswer__grid .pwp-sectionhead__title { font-size: var(--pwp-fs-h3); line-height: var(--pwp-lh-h3); }
.pwp-manswer__note { margin: var(--pwp-space-4) 0 0; color: var(--pwp-ink-muted); }

/* --- diagnostic band -------------------------------------------------- */
.pwp-mdiag__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  margin-block-start: var(--pwp-space-6);
  border: 1px solid var(--pwp-line);
}

.pwp-mdiag__col {
  padding: var(--pwp-space-5);
  border-right: 1px solid var(--pwp-line);
}

.pwp-mdiag__col:last-child { border-right: 0; }

.pwp-mdiag__col h3 {
  margin: 0 0 var(--pwp-space-3);
  font-size: var(--pwp-fs-h4);
  line-height: var(--pwp-lh-h4);
}

.pwp-mdiag__col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--pwp-space-2); }

.pwp-mdiag__col li {
  position: relative;
  padding-inline-start: var(--pwp-space-4);
  font-size: var(--pwp-fs-small);
  color: var(--pwp-ink-muted);
}

.pwp-mdiag__col li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  width: 8px;
  height: 2px;
  background: var(--pwp-accent);
}

.pwp-mdiag__col--cost { background: var(--pwp-surface-50); }

.pwp-mdiag__figure {
  margin: var(--pwp-space-4) 0 var(--pwp-space-2);
  font-family: var(--pwp-ff-display);
  font-size: var(--pwp-fs-h2);
  line-height: var(--pwp-lh-h2);
  font-variant-numeric: tabular-nums;
  color: var(--pwp-accent-text);
}

.pwp-mdiag__lead,
.pwp-mdiag__bottom { font-size: var(--pwp-fs-small); color: var(--pwp-ink-strong); }
.pwp-mdiag__lead { margin: 0 0 var(--pwp-space-3); font-weight: var(--pwp-fw-semibold); }
.pwp-mdiag__bottom { margin: var(--pwp-space-4) 0 0; font-weight: var(--pwp-fw-semibold); }
.pwp-mdiag__note { margin: 0; font-size: var(--pwp-fs-micro); color: var(--pwp-ink-muted); }

/* --- solution band ---------------------------------------------------- */
.pwp-msol__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pwp-space-5);
  margin-block-start: var(--pwp-space-6);
}

.pwp-msol__card {
  border: 1px solid var(--pwp-border-dark-strong);
  background: var(--pwp-surface-900);
  padding: var(--pwp-space-5);
}

.pwp-msol__card h3 {
  margin: 0 0 var(--pwp-space-4);
  font-size: var(--pwp-fs-h4);
  line-height: var(--pwp-lh-h4);
  color: var(--pwp-ink-inverse);
}

.pwp-msol__card ul { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--pwp-space-3); }

.pwp-msol__card ul > li,
.pwp-msol__steps > li {
  position: relative;
  padding-inline-start: var(--pwp-space-5);
  font-size: var(--pwp-fs-small);
  color: var(--pwp-ink-inverse-muted);
}

.pwp-msol__card ul > li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: 0.55em;
  width: 10px;
  height: 2px;
  background: var(--pwp-accent);
}

.pwp-msol__steps { margin: 0; padding: 0; list-style: none; counter-reset: msol; display: grid; gap: var(--pwp-space-3); }

.pwp-msol__steps > li { counter-increment: msol; }

.pwp-msol__steps > li::before {
  content: counter(msol, decimal-leading-zero);
  position: absolute;
  inset-inline-start: 0;
  font-family: var(--pwp-ff-display);
  font-size: var(--pwp-fs-micro);
  color: var(--pwp-accent);
}

.pwp-msol__formula {
  margin: var(--pwp-space-4) 0 0;
  padding: var(--pwp-space-3);
  border: 1px solid var(--pwp-accent);
  font-family: var(--pwp-ff-display);
  font-size: var(--pwp-fs-small);
  color: var(--pwp-ink-inverse);
}

.pwp-page--money .pwp-ppssteps { margin-block: 0 var(--pwp-space-3); }

@media (min-width: 600px) {
  .pwp-msol__card .pwp-ppssteps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.pwp-msol__card .pwp-ppsstep { min-width: 0; }
.pwp-msol__card .pwp-ppsstep__name { min-width: 0; overflow-wrap: anywhere; }

/* --- workflow chain --------------------------------------------------- */
.pwp-mflow { border-top: 1px solid var(--pwp-border-dark); }
.pwp-mflow__lead { max-width: 62ch; color: var(--pwp-ink-inverse-muted); }

.pwp-mflow__chain {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: var(--pwp-space-4);
  margin: var(--pwp-space-6) 0 0;
  padding: 0;
  list-style: none;
}

.pwp-mflow__chain > li {
  position: relative;
  border-top: 2px solid var(--pwp-accent);
  padding: var(--pwp-space-3) var(--pwp-space-3) var(--pwp-space-4) 0;
}

.pwp-mflow__chain > li::after {
  content: "";
  position: absolute;
  inset-block-start: -6px;
  inset-inline-end: -2px;
  width: 10px;
  height: 10px;
  background: var(--pwp-accent);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.pwp-mflow__chain > li:last-child::after { display: none; }

.pwp-mflow__no { font-family: var(--pwp-ff-display); font-size: var(--pwp-fs-micro); color: var(--pwp-accent); }

.pwp-mflow__chain h3 {
  margin: var(--pwp-space-2) 0 var(--pwp-space-1);
  font-size: var(--pwp-fs-h4);
  line-height: var(--pwp-lh-h4);
  color: var(--pwp-ink-inverse);
}

.pwp-mflow__chain p { margin: 0; font-size: var(--pwp-fs-small); color: var(--pwp-ink-inverse-muted); }

/* --- startable work --------------------------------------------------- */
.pwp-mstart__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--pwp-space-8);
  align-items: start;
}

.pwp-mstart__note { color: var(--pwp-ink-muted); font-size: var(--pwp-fs-small); }

.pwp-mstart__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: 1px solid var(--pwp-line); }

.pwp-mstart__list > li {
  counter-increment: mstart;
  display: flex;
  gap: var(--pwp-space-3);
  padding: var(--pwp-space-4) 0;
  border-bottom: 1px solid var(--pwp-line);
  color: var(--pwp-ink-strong);
}

.pwp-mstart__list { counter-reset: mstart; }

.pwp-mstart__list > li::before {
  content: counter(mstart, decimal-leading-zero);
  font-family: var(--pwp-ff-display);
  font-size: var(--pwp-fs-micro);
  color: var(--pwp-accent-text);
}

/* --- related pages, tools, action card -------------------------------- */
.pwp-mrel__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 0.7fr);
  gap: var(--pwp-space-6);
  align-items: start;
}

.pwp-mrel__grid .pwp-sectionhead__title { font-size: var(--pwp-fs-h3); line-height: var(--pwp-lh-h3); margin-block-end: var(--pwp-space-4); }
.pwp-mrel__grid .pwp-prel__grid { grid-template-columns: minmax(0, 1fr); }

.pwp-mrel__all { margin: var(--pwp-space-4) 0 0; }

.pwp-mrel__all a {
  display: inline-flex;
  align-items: center;
  gap: var(--pwp-space-2);
  font-family: var(--pwp-ff-display);
  font-size: var(--pwp-fs-small);
  letter-spacing: var(--pwp-track-label);
  text-transform: uppercase;
  color: var(--pwp-accent-text);
}

.pwp-mrel__all a svg { fill: none; stroke: currentColor; stroke-width: 2; }

.pwp-mtools {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pwp-space-4);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pwp-mtools > li {
  border: 1px solid var(--pwp-line);
  background: var(--pwp-surface-0);
  padding: var(--pwp-space-4);
}

.pwp-mtools svg { fill: none; stroke: var(--pwp-accent-text); stroke-width: 1.6; }

.pwp-mtools h3 { margin: var(--pwp-space-3) 0 var(--pwp-space-1); font-size: var(--pwp-fs-body); line-height: var(--pwp-lh-h4); }
.pwp-mtools p { margin: 0 0 var(--pwp-space-3); font-size: var(--pwp-fs-small); color: var(--pwp-ink-muted); }

.pwp-mtools a {
  display: inline-flex;
  align-items: center;
  gap: var(--pwp-space-2);
  font-family: var(--pwp-ff-display);
  font-size: var(--pwp-fs-micro);
  letter-spacing: var(--pwp-track-label);
  text-transform: uppercase;
  color: var(--pwp-accent-text);
}

.pwp-mtools a svg { stroke: currentColor; }

.pwp-maction {
  display: block;
  padding: var(--pwp-space-6) var(--pwp-space-5);
  background: var(--pwp-surface-950);
  border: 1px solid var(--pwp-surface-800);
  color: var(--pwp-ink-inverse);
  text-decoration: none;
  transition: border-color var(--pwp-dur-fast) var(--pwp-ease-out), transform var(--pwp-dur-fast) var(--pwp-ease-out);
}

.pwp-maction:hover,
.pwp-maction:focus-visible { border-color: var(--pwp-accent); transform: translateY(-2px); }

.pwp-maction__play {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: 2px solid var(--pwp-accent);
  border-radius: var(--pwp-radius-pill);
  margin-block-end: var(--pwp-space-4);
}

.pwp-maction__play svg { fill: var(--pwp-accent); }

.pwp-maction__title {
  display: block;
  font-family: var(--pwp-ff-display);
  font-size: var(--pwp-fs-h4);
  line-height: var(--pwp-lh-h4);
  text-transform: uppercase;
}

.pwp-maction__sub { display: block; margin-block-start: var(--pwp-space-2); font-size: var(--pwp-fs-small); color: var(--pwp-ink-inverse-muted); }

.pwp-mfinal__next {
  margin: var(--pwp-space-5) auto 0;
  max-width: 62ch;
  font-size: var(--pwp-fs-small);
  color: var(--pwp-ink-inverse-muted);
}

/* --- responsive -------------------------------------------------------- */
@media (max-width: 1080px) {
  .pwp-mhero__grid,
  .pwp-manswer__grid,
  .pwp-mstart__grid { grid-template-columns: minmax(0, 1fr); }
  .pwp-mdiag__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pwp-mdiag__col:nth-child(2) { border-right: 0; }
  .pwp-mdiag__col:nth-child(-n+2) { border-bottom: 1px solid var(--pwp-line); }
  .pwp-mstrip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pwp-mflow__chain { grid-auto-flow: row; }
  .pwp-mflow__chain > li::after { display: none; }
  .pwp-mrel__grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .pwp-mstrip__grid,
  .pwp-msol__grid,
  .pwp-mtools { grid-template-columns: minmax(0, 1fr); }
  .pwp-mdiag__grid { grid-template-columns: minmax(0, 1fr); }
  .pwp-mdiag__col { border-right: 0; border-bottom: 1px solid var(--pwp-line); }
  .pwp-mdiag__col:last-child { border-bottom: 0; }
  .pwp-mpanel { padding: var(--pwp-space-4); }
  .pwp-mpanel__table th,
  .pwp-mpanel__table td { font-size: var(--pwp-fs-micro); }
}

/* ======================================================================
   Premium craft pass — Where the Money Actually Goes
   Editorial rhythm, quieter secondary copy, hairline grids, live surfaces.
   Copy is untouched; tokens only.
   ====================================================================== */

/* hero: calmer secondary line, actions on one line where there is room */
.pwp-page--money .pwp-phero__question {
  font-size: var(--pwp-fs-micro);
  letter-spacing: var(--pwp-track-label);
  color: var(--pwp-ink-inverse-muted);
}

.pwp-page--money .pwp-phero__lead { max-width: 46ch; }

.pwp-page--money .pwp-phero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: var(--pwp-space-3);
}

.pwp-page--money .pwp-phero__actions > * { flex: 0 1 auto; }

/* benefit strip: rules breathe, live on hover */
.pwp-mstrip__grid > li {
  transition: border-color var(--pwp-dur-2, 300ms) var(--pwp-ease, ease),
              transform var(--pwp-dur-2, 300ms) var(--pwp-ease, ease);
}

.pwp-mstrip__grid > li:hover { transform: translateY(-3px); }

/* answer band: shorter measure, quieter statement scale */
.pwp-manswer__grid .pwp-sectionhead__title {
  font-size: var(--pwp-fs-h4);
  line-height: var(--pwp-lh-h3);
  max-width: 34ch;
  text-transform: none;
}

/* diagnostic band: hairline columns instead of one heavy box */
.pwp-mdiag__grid {
  border: 0;
  border-top: 1px solid var(--pwp-line);
  align-items: start;
  column-gap: 0;
}

.pwp-mdiag__col {
  padding-inline: var(--pwp-space-5);
  padding-block: var(--pwp-space-6);
  transition: background var(--pwp-dur-2, 300ms) var(--pwp-ease, ease);
}

.pwp-mdiag__col:first-child { padding-inline-start: 0; }
.pwp-mdiag__col:last-child { padding-inline-end: 0; }
.pwp-mdiag__col:hover { background: var(--pwp-surface-50); }
.pwp-mdiag__col--cost { background: transparent; }
.pwp-mdiag__col--cost .pwp-mdiag__figure { letter-spacing: -0.01em; }

/* solution cards: subtle lift, accent edge on hover */
.pwp-msol__card {
  transition: transform var(--pwp-dur-2, 300ms) var(--pwp-ease, ease),
              border-color var(--pwp-dur-2, 300ms) var(--pwp-ease, ease);
}

.pwp-msol__card:hover {
  transform: translateY(-3px);
  border-color: var(--pwp-accent);
}

/* waiting-cost band: give the figures room and a hairline baseline */
.pwp-page--money .pwp-pwait__value { letter-spacing: -0.01em; }

@media (prefers-reduced-motion: reduce) {
  .pwp-mstrip__grid > li,
  .pwp-msol__card { transition: none; }
  .pwp-mstrip__grid > li:hover,
  .pwp-msol__card:hover { transform: none; }
}

@media (max-width: 1080px) {
  .pwp-mdiag__col { padding-inline: var(--pwp-space-4); }
  .pwp-mdiag__col:nth-child(odd) { padding-inline-start: 0; }
  .pwp-mdiag__col:nth-child(even) { padding-inline-end: 0; }
}

@media (max-width: 720px) {
  .pwp-mdiag__col { padding-inline: 0; }
}