/* =============================================================================
   Case Study Presentation Layer
   =============================================================================
   Ownership:
   - Analytical publishing surfaces and case-study components only.
   - Interactive calculator/tool runtime styling belongs in tool-shell.css.
   - Shared platform primitives remain in pp-*.css.

   This file centralizes case-study presentation so future case studies inherit
   responsive behavior from the framework instead of page-level one-off CSS.
============================================================================= */

/* --------------------------------------------------------------------------
   CaseStudyCard
-------------------------------------------------------------------------- */
.case-study-card {
    display: grid;
    gap: 12px;
    height: 100%;
    padding: 20px;
    border: 1px solid var(--pp-border-structural);
    border-radius: var(--pp-radius-lg);
    background: var(--pp-surface);
  }

  .case-study-card--featured {
    border-color: var(--pp-brand-700);
  }

  .case-study-card__meta,
  .case-study-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }

  .case-study-card__meta span,
  .case-study-card__tags span {
    display: inline-flex;
    padding: 4px 8px;
    border-radius: 999px;
    background: var(--pp-surface-muted);
    color: var(--pp-text-700);
    font-size: 0.82rem;
    line-height: 1.2;
  }

  .case-study-card__title {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.25;
  }

  .case-study-card__title a {
    color: var(--pp-text-900);
    text-decoration: none;
  }

  .case-study-card__title a:hover {
    color: var(--pp-brand-900);
    text-decoration: underline;
  }

  .case-study-card__question {
    margin: 0;
    color: var(--pp-text-900);
    font-weight: 700;
  }

  .case-study-card__summary {
    margin: 0;
    color: var(--pp-text-700);
  }

  .case-study-card__cta {
    align-self: end;
    color: var(--pp-brand-900);
    font-weight: 700;
    text-decoration: none;
  }

  .case-study-card__cta:hover {
    text-decoration: underline;
  }

/* --------------------------------------------------------------------------
   CaseStudyHubGrid
-------------------------------------------------------------------------- */
.case-study-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 18px;
  }

/* --------------------------------------------------------------------------
   MortgageCaseStudy
-------------------------------------------------------------------------- */
.mortgage-case-study {
    display: grid;
    gap: 30px;
    padding: clamp(18px, 3vw, 30px);
    border: 1px solid rgba(70, 91, 125, 0.16);
    border-radius: calc(var(--pp-radius-lg) + 10px);
    background: #ffffff;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.08);
  }

  .mortgage-case-study__hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
    gap: 24px 30px;
    padding: clamp(26px, 4vw, 44px);
    border: 1px solid rgba(70, 91, 125, 0.22);
    border-radius: calc(var(--pp-radius-lg) + 6px);
    background:
      radial-gradient(circle at 92% 0%, rgba(255, 255, 255, 0.98) 0, rgba(255, 255, 255, 0) 34%),
      linear-gradient(135deg, #ffffff 0%, #ffffff 48%, #f6f9ff 100%);
    box-shadow: 0 18px 46px rgba(15, 23, 42, 0.05);
  }

  .mortgage-case-study__hero-main,
  .mortgage-case-study__title-block,
  .mortgage-case-study__main,
  .mortgage-case-study__rail {
    display: grid;
  }

  .mortgage-case-study__hero-main {
    gap: 18px;
    align-content: start;
  }

  .mortgage-case-study__title-block {
    gap: 14px;
  }

  .mortgage-case-study__hero h1 {
    max-width: 860px;
    margin: 0;
    color: var(--pp-text-900);
    font-size: clamp(1.72rem, 2.18vw, 2.32rem);
    line-height: 1.075;
    letter-spacing: -0.04em;
  }

  .mortgage-case-study__eyebrow,
  .mortgage-case-study__hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
  }

  .mortgage-case-study__eyebrow span {
    display: inline-flex;
    padding: 5px 9px;
    border: 1px solid rgba(70, 91, 125, 0.18);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.82);
    color: var(--pp-text-700);
    font-size: 0.78rem;
    line-height: 1.2;
  }

  .case-brief-question,
  .case-brief-answer {
    display: grid;
    gap: 5px;
    max-width: 820px;
  }

  .case-brief-question span,
  .case-brief-answer span,
  .case-mini-label,
  .case-section-kicker,
  .case-headline-card dt {
    color: var(--pp-text-700);
    font-size: 0.72rem;
    font-weight: 900;
    letter-spacing: 0.085em;
    text-transform: uppercase;
  }

  .case-brief-question p,
  .case-brief-answer p {
    margin: 0;
    color: var(--pp-text-900);
    line-height: 1.55;
  }

  .case-brief-question p {
    font-size: clamp(1.05rem, 1.35vw, 1.22rem);
    font-weight: 900;
  }

  .case-brief-answer p {
    max-width: 790px;
    color: var(--pp-text-800);
    font-size: 0.98rem;
  }

  .case-study-action,
  .case-rail-card--cta a,
  .case-action-link {
    color: var(--pp-brand-900);
    font-weight: 800;
    text-decoration: none !important;
  }

  .case-study-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid rgba(26, 54, 93, 0.32);
    border-radius: var(--pp-radius-md);
    background: #ffffff;
    box-shadow: 0 5px 12px rgba(15, 23, 42, 0.035);
    transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
  }

  .case-study-action:hover {
    transform: translateY(-1px);
    border-color: rgba(26, 54, 93, 0.58);
    box-shadow: 0 8px 18px rgba(15, 23, 42, 0.06);
  }

  .case-study-action--primary:hover,
  .case-rail-card--cta a:hover,
  .case-action-link.is-primary:hover {
    color: #ffffff;
    border-color: rgba(26, 54, 93, 0.9);
    box-shadow: 0 10px 22px rgba(26, 54, 93, 0.22);
  }

  .case-study-action--primary,
  .case-rail-card--cta a,
  .case-action-link.is-primary {
    border-color: rgba(26, 54, 93, 0.72);
    background: linear-gradient(180deg, #315f99, #234a7d);
    color: #ffffff;
    box-shadow: 0 8px 18px rgba(26, 54, 93, 0.16);
  }

  .case-study-action:focus-visible,
  .case-rail-card--cta a:focus-visible,
  .case-action-link:focus-visible {
    outline: 3px solid rgba(26, 54, 93, 0.24);
    outline-offset: 3px;
  }

  .case-headline-card {
    display: grid;
    gap: 14px;
    align-self: start;
    padding: 22px;
    border: 1px solid rgba(26, 54, 93, 0.2);
    border-radius: var(--pp-radius-lg);
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.08);
  }

  .case-headline-card > p {
    margin: -4px 0 0;
    color: var(--pp-text-700);
    font-size: 0.9rem;
    line-height: 1.45;
  }

  .case-headline-card dl {
    display: grid;
    gap: 10px;
    margin: 0;
  }

  .case-headline-card div {
    display: grid;
    gap: 5px;
    padding: 13px 14px;
    border: 1px solid rgba(70, 91, 125, 0.18);
    border-radius: var(--pp-radius-md);
    background: #ffffff;
  }

  .case-headline-card dt,
  .case-headline-card dd {
    margin: 0;
  }

  .case-headline-card dd {
    color: var(--pp-text-900);
    font-size: 1.34rem;
    font-weight: 950;
    letter-spacing: -0.025em;
  }

  .case-headline-card small {
    color: var(--pp-text-700);
    line-height: 1.35;
  }

  .mortgage-case-study__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 28px;
    align-items: start;
  }

  .mortgage-case-study__main,
  .mortgage-case-study__rail {
    gap: 24px;
  }

  .mortgage-case-study__rail {
    position: sticky;
    top: 18px;
  }

  .case-section,
  .case-rail-card {
    border: 1px solid rgba(70, 91, 125, 0.16);
    border-radius: var(--pp-radius-lg);
    background: #ffffff;
    box-shadow: 0 8px 22px rgba(15, 23, 42, 0.025);
  }

  .case-section {
    padding: clamp(22px, 3vw, 30px);
  }

  .case-section--setup,
  .case-section--evidence,
  .case-section--meaning {
    background: #ffffff;
  }

  .case-section--conclusion {
    border-color: rgba(26, 54, 93, 0.22);
    background:
      radial-gradient(circle at 0 0, rgba(238, 244, 255, 0.75), rgba(255, 255, 255, 0) 34%),
      #ffffff;
  }

  .case-section h2,
  .case-rail-card h2 {
    margin: 6px 0 14px;
    color: var(--pp-text-900);
    letter-spacing: -0.02em;
  }

  .case-section h3,
  .case-rail-card h3 {
    margin: 0;
    color: var(--pp-text-900);
  }

  .case-section p,
  .case-rail-card p {
    color: var(--pp-text-800);
    line-height: 1.65;
  }

  .case-section-intro {
    max-width: 820px;
    margin: 0 0 18px;
    color: var(--pp-text-700);
    line-height: 1.65;
  }

  .case-brief-copy {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
  }

  .case-brief-item {
    padding: 16px;
    border: 1px solid rgba(70, 91, 125, 0.12);
    border-radius: var(--pp-radius-md);
    background: #fbfdff;
  }

  .case-brief-item p {
    margin: 8px 0 0;
  }

  .case-fact-grid,
  .case-question-grid,
  .case-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 12px;
  }

  .case-fact,
  .case-question-grid section {
    display: grid;
    gap: 8px;
    padding: 15px;
    border: 1px solid rgba(70, 91, 125, 0.15);
    border-radius: var(--pp-radius-md);
    background: #fafcff;
  }

  .case-fact small {
    color: var(--pp-text-700);
  }

  .case-fact span {
    color: var(--pp-text-900);
    font-size: 1.08rem;
    font-weight: 900;
  }

  .case-exhibit-stack {
    display: grid;
    gap: 18px;
  }

  .case-exhibit {
    display: grid;
    gap: 18px;
    padding: clamp(20px, 3vw, 26px);
    border: 1px solid rgba(70, 91, 125, 0.16);
    border-radius: var(--pp-radius-lg);
    background: #ffffff;
    box-shadow: 0 10px 26px rgba(15, 23, 42, 0.03);
  }

  .case-exhibit__header {
    display: grid;
    gap: 6px;
    max-width: 860px;
  }

  .case-exhibit__header span {
    color: var(--pp-brand-900);
    font-size: 0.74rem;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .case-exhibit__header p,
  .case-exhibit__callout {
    margin: 0;
  }

  .case-exhibit__callout {
    padding: 14px 16px;
    border: 1px solid rgba(26, 54, 93, 0.24);
    border-left: 4px solid var(--pp-brand-700);
    border-radius: var(--pp-radius-md);
    background: #f7faff;
    color: var(--pp-text-900) !important;
    font-weight: 850;
    line-height: 1.55;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.65);
  }

  .case-waterfall {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) auto minmax(0, 0.78fr) auto minmax(0, 1.1fr);
    gap: 10px;
    align-items: stretch;
  }

  .case-waterfall__step {
    display: grid;
    gap: 7px;
    min-height: 128px;
    padding: 17px;
    border: 1px solid rgba(70, 91, 125, 0.15);
    border-radius: var(--pp-radius-md);
    background: #fafcff;
    align-content: start;
  }

  .case-waterfall__step.is-total {
    border-color: rgba(26, 54, 93, 0.34);
    background: #ffffff;
    box-shadow: inset 0 0 0 1px rgba(26, 54, 93, 0.05);
  }

  .case-waterfall__operator {
    align-self: center;
    color: var(--pp-brand-900);
    font-size: 1.28rem;
    font-weight: 950;
  }

  .case-waterfall__label,
  .case-visual-list dt,
  .case-evidence-table dt span,
  .case-rail-list dt {
    color: var(--pp-text-700);
    font-size: 0.9rem;
  }

  .case-waterfall__value,
  .case-visual-list dd {
    margin: 0;
    color: var(--pp-text-900);
    font-size: 1.25rem;
    font-weight: 950;
    letter-spacing: -0.02em;
  }

  .case-waterfall small,
  .case-visual-list small,
  .case-bar-compare small {
    color: var(--pp-text-700);
  }

  .case-timeline {
    display: grid;
    gap: 12px;
  }

  .case-timeline__track {
    position: relative;
    height: 42px;
    overflow: hidden;
    border: 1px solid rgba(70, 91, 125, 0.28);
    border-radius: 999px;
    background: linear-gradient(90deg, #ffffff, #f3f7ff);
  }

  .case-timeline__term {
    position: absolute;
    inset: 0 auto 0 0;
    width: var(--term-width);
    background: linear-gradient(90deg, var(--pp-brand-900), var(--pp-brand-700));
  }

  .case-timeline__marker {
    position: absolute;
    top: -6px;
    bottom: -6px;
    left: var(--marker-position);
    width: 4px;
    background: var(--pp-brand-900);
    box-shadow: 0 0 0 6px rgba(26, 54, 93, 0.12);
  }

  .case-timeline__axis {
    position: relative;
    min-height: 22px;
    color: var(--pp-text-700);
    font-size: 0.82rem;
    font-weight: 850;
  }

  .case-timeline__axis span {
    position: absolute;
    top: 0;
    white-space: nowrap;
  }

  .case-timeline__axis-start {
    left: 0;
  }

  .case-timeline__axis-renewal {
    left: var(--renewal-position);
    transform: translateX(-28%);
  }

  .case-timeline__axis-end {
    right: 0;
    text-align: right;
  }

  .case-visual-list {
    display: grid;
    gap: 10px;
    margin: 0;
  }

  .case-visual-list--three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .case-visual-list div {
    display: grid;
    gap: 4px;
    padding: 13px;
    border: 1px solid rgba(70, 91, 125, 0.15);
    border-radius: var(--pp-radius-md);
    background: #fafcff;
  }

  .case-bar-compare {
    display: grid;
    gap: 14px;
  }

  .case-bar-compare__row {
    display: grid;
    gap: 7px;
  }

  .case-bar-compare__summary {
    display: flex;
    justify-content: space-between;
    gap: 12px;
  }

  .case-bar-compare__summary span {
    color: var(--pp-text-900);
    font-weight: 950;
    text-align: right;
  }

  .case-bar-compare__track {
    height: 16px;
    overflow: hidden;
    border: 1px solid rgba(70, 91, 125, 0.24);
    border-radius: 999px;
    background: var(--pp-surface-muted);
  }

  .case-bar-compare__track span {
    display: block;
    width: var(--bar-width);
    height: 100%;
    border-radius: 999px;
    background: rgba(96, 116, 151, 0.42);
  }

  .case-bar-compare__track span.is-primary {
    background: var(--pp-brand-700);
  }

  .case-evidence-table {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
  }

  .case-evidence-table section {
    padding: 18px;
    border: 1px solid rgba(70, 91, 125, 0.15);
    border-radius: var(--pp-radius-md);
    background: #fafcff;
  }

  .case-evidence-table h3 {
    margin-bottom: 12px;
  }

  .case-evidence-table dl {
    display: grid;
    margin: 0;
  }

  .case-evidence-table dl div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
    padding: 11px 0;
    border-top: 1px solid var(--pp-border-subtle);
  }

  .case-evidence-table dl div:first-child {
    border-top: 0;
  }

  .case-evidence-table dl div.is-primary dd {
    color: var(--pp-brand-900);
  }

  .case-evidence-table dt {
    display: grid;
    gap: 3px;
  }

  .case-evidence-table small {
    color: var(--pp-text-700);
  }

  .case-evidence-table dd {
    margin: 0;
    color: var(--pp-text-900);
    font-weight: 950;
    text-align: right;
  }

  .case-meaning-list {
    display: grid;
    gap: 12px;
  }

  .case-meaning-list article {
    display: grid;
    grid-template-columns: 122px minmax(0, 1fr);
    gap: 18px;
    padding: 18px;
    border: 1px solid rgba(70, 91, 125, 0.15);
    border-radius: var(--pp-radius-md);
    background: #fafcff;
  }

  .case-meaning-list article > span {
    align-self: stretch;
    display: flex;
    align-items: flex-start;
    padding-right: 16px;
    border-right: 1px solid rgba(70, 91, 125, 0.16);
    color: var(--pp-brand-900);
    font-size: 0.74rem;
    font-weight: 950;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  .case-meaning-list p {
    margin: 6px 0 0;
  }

  .case-meaning-list strong {
    display: block;
    margin-top: 10px;
    color: var(--pp-text-900);
  }

  .case-matrix-wrap {
    overflow-x: auto;
    border: 1px solid var(--pp-border-subtle);
    border-radius: var(--pp-radius-md);
  }

  .case-matrix {
    width: 100%;
    min-width: 760px;
    border-collapse: collapse;
    background: var(--pp-surface);
  }

  .case-matrix th,
  .case-matrix td {
    padding: 15px;
    border-bottom: 1px solid var(--pp-border-subtle);
    text-align: left;
    vertical-align: top;
  }

  .case-matrix thead th {
    background: var(--pp-surface-muted);
    color: var(--pp-text-700);
    font-size: 0.78rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }

  .case-matrix tbody th span {
    display: block;
    margin-top: 4px;
    color: var(--pp-text-700);
    font-weight: 600;
  }

  .case-matrix td:nth-child(2),
  .case-matrix td:nth-child(3),
  .case-matrix td:nth-child(4) {
    color: var(--pp-text-900);
    font-weight: 900;
    white-space: nowrap;
  }

  .case-question-grid section {
    border-left: 3px solid rgba(26, 54, 93, 0.46);
    background: #ffffff;
  }

  .case-question-grid ul,
  .case-boundary-list,
  .case-rail-links,
  .case-rail-jump {
    margin: 0;
    padding-left: 18px;
  }

  .case-question-grid li,
  .case-boundary-list li {
    margin-top: 8px;
  }

  .case-reveal-strip {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 18px;
  }

  .case-reveal-strip span {
    display: block;
    padding: 15px;
    border: 1px solid rgba(70, 91, 125, 0.16);
    border-radius: var(--pp-radius-md);
    background: #ffffff;
    color: var(--pp-text-900);
    font-weight: 850;
  }

  .case-action-band {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 20px;
    border: 1px solid rgba(26, 54, 93, 0.2);
    border-radius: var(--pp-radius-lg);
    background: linear-gradient(180deg, #ffffff, #f8fbff);
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.025);
  }

  .case-action-band > div:first-child {
    display: grid;
    gap: 5px;
  }

  .case-action-band strong {
    color: var(--pp-text-900);
  }

  .case-action-band span {
    color: var(--pp-text-700);
  }

  .case-action-band__links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
  }

  .case-action-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    padding: 10px 16px;
    border: 1px solid rgba(26, 54, 93, 0.34);
    border-radius: var(--pp-radius-md);
    background: #ffffff;
    box-shadow: 0 4px 10px rgba(15, 23, 42, 0.03);
    line-height: 1.2;
    text-align: center;
  }

  .case-rail-card {
    padding: 20px;
    background: #ffffff;
  }

  .case-rail-card h2 {
    margin-top: 0;
  }

  .case-rail-list {
    display: grid;
    gap: 8px;
    margin: 0;
  }

  .case-rail-list div {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--pp-border-subtle);
  }

  .case-rail-list div:first-child {
    border-top: 0;
  }

  .case-rail-list dd {
    margin: 0;
    color: var(--pp-text-900);
    font-weight: 900;
    text-align: right;
  }

  .case-rail-list--stacked div {
    display: grid;
  }

  .case-rail-list--stacked dd {
    text-align: left;
  }

  .case-rail-card--watch {
    background: linear-gradient(180deg, #ffffff, #f8fbff);
  }

  .case-rail-card--cta {
    border-color: rgba(26, 54, 93, 0.24);
    background: linear-gradient(180deg, #ffffff, #f7faff);
  }

  .case-rail-card--cta p,
  .case-rail-note {
    margin: 0 0 14px;
    color: var(--pp-text-700);
  }

  .case-rail-card--cta a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 13px;
    border: 1px solid rgba(26, 54, 93, 0.78);
    border-radius: var(--pp-radius-md);
    background: linear-gradient(180deg, #315f99, #234a7d);
    color: #ffffff;
  }

  .case-rail-links,
  .case-rail-jump {
    display: grid;
    gap: 8px;
  }

  .case-rail-links a,
  .case-rail-jump a {
    color: var(--pp-brand-900);
    font-weight: 800;
  }

  @media (max-width: 1080px) {
    .mortgage-case-study__hero,
    .mortgage-case-study__layout {
      grid-template-columns: 1fr;
    }

    .mortgage-case-study__rail {
      position: static;
    }
  }

  @media (max-width: 720px) {
    .mortgage-case-study,
    .mortgage-case-study__hero,
    .case-section {
      padding: 20px;
    }

    .case-brief-copy,
    .case-waterfall,
    .case-evidence-table,
    .case-reveal-strip,
    .case-action-band,
    .case-visual-list--three {
      grid-template-columns: 1fr;
    }


    .case-timeline__axis {
      display: grid;
      gap: 5px;
      min-height: auto;
    }

    .case-timeline__axis span {
      position: static;
      transform: none;
      text-align: left;
      white-space: normal;
    }

    .case-waterfall__operator {
      justify-self: center;
      margin: -2px 0;
    }

    .case-bar-compare__summary {
      display: grid;
    }

    .case-bar-compare__summary span {
      text-align: left;
    }

    .case-meaning-list article {
      grid-template-columns: 1fr;
    }

    .case-action-band__links {
      justify-content: stretch;
    }

    .case-action-link {
      width: 100%;
    }

    .mortgage-case-study__hero h1 {
      font-size: clamp(1.65rem, 8vw, 2.05rem);
    }

    .case-meaning-list article > span {
      padding-right: 0;
      padding-bottom: 8px;
      border-right: 0;
      border-bottom: 1px solid rgba(70, 91, 125, 0.16);
    }
  }
  /* Platform case-study mobile template polish */
  .case-study-template,
  .case-study-template * {
    min-width: 0;
  }

  .case-study-template {
    max-width: 100%;
    overflow-x: clip;
  }

  .case-study-template :where(h1, h2, h3, p, li, dt, dd, strong, span, small, a) {
    overflow-wrap: anywhere;
  }

  @media (max-width: 720px) {
    .mortgage-case-study {
      gap: 18px;
      padding: 14px;
      border-radius: 20px;
      box-shadow: 0 16px 44px rgba(15, 23, 42, 0.06);
    }

    .mortgage-case-study__hero {
      grid-template-columns: 1fr;
      gap: 16px;
      padding: 16px;
      border-radius: 18px;
      background:
        linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 251, 255, 0.96));
      box-shadow: none;
    }

    .mortgage-case-study__hero-main {
      gap: 14px;
    }

    .mortgage-case-study__hero h1 {
      max-width: 100%;
      font-size: clamp(1.46rem, 7vw, 1.88rem);
      line-height: 1.12;
      letter-spacing: -0.035em;
    }

    .mortgage-case-study__eyebrow {
      gap: 6px;
    }

    .mortgage-case-study__eyebrow span {
      max-width: 100%;
      padding: 5px 8px;
      font-size: 0.72rem;
    }

    .case-brief-question,
    .case-brief-answer {
      gap: 5px;
      max-width: 100%;
    }

    .case-brief-question p {
      font-size: clamp(1rem, 4.7vw, 1.14rem);
      line-height: 1.35;
    }

    .case-brief-answer p {
      font-size: 0.94rem;
      line-height: 1.52;
    }

    .mortgage-case-study__hero-actions {
      display: grid;
      grid-template-columns: 1fr;
      gap: 8px;
    }

    .case-study-action,
    .case-action-link,
    .case-rail-card--cta a {
      width: 100%;
      min-height: 42px;
      padding: 10px 12px;
      text-align: center;
    }

    .case-headline-card {
      gap: 12px;
      padding: 14px;
      border-radius: 16px;
      box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
    }

    .case-headline-card > p {
      font-size: 0.86rem;
      line-height: 1.42;
    }

    .case-headline-card dl {
      gap: 8px;
    }

    .case-headline-card div {
      padding: 11px 12px;
      border-color: rgba(70, 91, 125, 0.12);
      background: #fbfdff;
    }

    .case-headline-card dd {
      font-size: clamp(1.05rem, 5.8vw, 1.22rem);
      line-height: 1.1;
    }

    .mortgage-case-study__layout {
      grid-template-columns: 1fr;
      gap: 18px;
    }

    .mortgage-case-study__main {
      gap: 16px;
    }

    .mortgage-case-study__rail {
      display: none;
    }

    .case-section {
      padding: 16px;
      border-radius: 16px;
      box-shadow: none;
    }

    .case-section h2 {
      margin: 5px 0 10px;
      font-size: clamp(1.12rem, 5.4vw, 1.38rem);
      line-height: 1.18;
    }

    .case-section h3 {
      font-size: 1rem;
      line-height: 1.22;
    }

    .case-section p,
    .case-rail-card p {
      line-height: 1.55;
    }

    .case-section-intro {
      max-width: 100%;
      margin-bottom: 12px;
      font-size: 0.93rem;
      line-height: 1.55;
    }

    .case-brief-copy,
    .case-fact-grid,
    .case-evidence-table,
    .case-question-grid,
    .case-related-grid,
    .case-reveal-strip,
    .case-action-band,
    .case-visual-list--three {
      grid-template-columns: 1fr;
    }

    .case-brief-copy,
    .case-fact-grid,
    .case-exhibit-stack,
    .case-evidence-table,
    .case-meaning-list,
    .case-question-grid,
    .case-reveal-strip {
      gap: 10px;
    }

    .case-brief-item,
    .case-fact,
    .case-question-grid section,
    .case-exhibit,
    .case-evidence-table section,
    .case-meaning-list article,
    .case-reveal-strip span,
    .case-action-band,
    .case-visual-list div,
    .case-waterfall__step {
      padding: 12px;
      border-color: rgba(70, 91, 125, 0.11);
      border-radius: 13px;
      background: #fbfdff;
      box-shadow: none;
    }

    .case-exhibit {
      gap: 13px;
    }

    .case-exhibit__header {
      gap: 5px;
      max-width: 100%;
    }

    .case-exhibit__callout {
      padding: 12px;
      border-left-width: 3px;
      font-size: 0.92rem;
    }

    .case-waterfall {
      grid-template-columns: 1fr;
      gap: 8px;
    }

    .case-waterfall__step {
      min-height: auto;
    }

    .case-waterfall__operator {
      justify-self: center;
      margin: -2px 0;
      font-size: 1rem;
    }

    .case-waterfall__value,
    .case-visual-list dd {
      font-size: 1.08rem;
    }

    .case-timeline__track {
      height: 32px;
    }

    .case-timeline__axis {
      display: grid;
      gap: 5px;
      min-height: auto;
      font-size: 0.78rem;
    }

    .case-timeline__axis span {
      position: static;
      transform: none;
      text-align: left;
      white-space: normal;
    }

    .case-bar-compare__summary {
      display: grid;
      gap: 3px;
    }

    .case-bar-compare__summary span {
      text-align: left;
    }

    .case-bar-compare__track {
      height: 12px;
    }

    .case-evidence-table dl div {
      grid-template-columns: 1fr;
      gap: 5px;
      padding: 10px 0;
    }

    .case-evidence-table dd {
      text-align: left;
      font-size: 1.02rem;
    }

    .case-meaning-list article {
      grid-template-columns: 1fr;
      gap: 10px;
    }

    .case-meaning-list article > span {
      display: block;
      padding-right: 0;
      padding-bottom: 8px;
      border-right: 0;
      border-bottom: 1px solid rgba(70, 91, 125, 0.14);
    }

    .case-matrix-wrap {
      overflow: visible;
      border: 0;
      border-radius: 0;
    }

    .case-matrix,
    .case-matrix tbody,
    .case-matrix tr,
    .case-matrix th,
    .case-matrix td {
      display: block;
      width: 100%;
      min-width: 0;
    }

    .case-matrix {
      background: transparent;
      border-collapse: separate;
    }

    .case-matrix thead {
      display: none;
    }

    .case-matrix tbody {
      display: grid;
      gap: 10px;
    }

    .case-matrix tr {
      padding: 12px;
      border: 1px solid rgba(70, 91, 125, 0.12);
      border-radius: 13px;
      background: #fbfdff;
    }

    .case-matrix th,
    .case-matrix td {
      padding: 8px 0;
      border-bottom: 1px solid rgba(70, 91, 125, 0.1);
      text-align: left;
      white-space: normal !important;
    }

    .case-matrix td:last-child {
      border-bottom: 0;
    }

    .case-matrix td::before {
      display: block;
      margin-bottom: 3px;
      color: var(--pp-text-700);
      font-size: 0.72rem;
      font-weight: 900;
      letter-spacing: 0.065em;
      text-transform: uppercase;
    }

    .case-matrix td:nth-child(2)::before {
      content: "Monthly P&I";
    }

    .case-matrix td:nth-child(3)::before {
      content: "Financed principal";
    }

    .case-matrix td:nth-child(4)::before {
      content: "Balance at renewal";
    }

    .case-matrix td:nth-child(5)::before {
      content: "What changes";
    }

    .case-question-grid section {
      border-left: 0;
    }

    .case-question-grid ul,
    .case-boundary-list,
    .case-rail-links,
    .case-rail-jump {
      padding-left: 16px;
    }

    .case-action-band {
      gap: 12px;
      align-items: stretch;
    }

    .case-action-band__links {
      display: grid;
      justify-content: stretch;
    }

    .mortgage-case-study__related {
      margin-top: 0;
    }
  }

  @media (max-width: 430px) {
    .mortgage-case-study {
      padding: 12px;
      gap: 16px;
    }

    .mortgage-case-study__hero,
    .case-section,
    .case-headline-card {
      padding: 14px;
    }

    .case-section-kicker,
    .case-mini-label,
    .case-brief-question span,
    .case-brief-answer span,
    .case-headline-card dt {
      font-size: 0.68rem;
      letter-spacing: 0.075em;
    }
  }

  /* Platform case-study mobile horizontal overflow guard */
  /*
    Scope:
    - Case-study template mobile overflow repair.
    - Fixes horizontal page scrolling introduced during mobile template polish.
    - Keeps the solution at the shared mortgage case-study template level so future
      mortgage case studies inherit the mobile-safe behavior.
    - Does not change case-study facts, calculator formulas, benchmark logic,
      scenario logic, Canada insurance, or runtime calculation ownership.
  */
  .case-study-template,
  .case-study-template *,
  .case-study-template *::before,
  .case-study-template *::after {
    box-sizing: border-box;
  }

  .case-study-template {
    width: 100%;
    max-width: 100%;
  }

  @media (max-width: 720px) {
    .case-study-template,
    .mortgage-case-study,
    .mortgage-case-study__hero,
    .mortgage-case-study__layout,
    .mortgage-case-study__main,
    .case-section,
    .case-headline-card,
    .case-exhibit,
    .case-evidence-table,
    .case-matrix-wrap,
    .case-action-band,
    .mortgage-case-study__related {
      width: 100%;
      max-width: 100%;
      min-width: 0;
    }

    .case-study-template,
    .mortgage-case-study {
      overflow-x: hidden;
    }

    .case-study-template :where(img, svg, canvas, table, iframe, pre, code) {
      max-width: 100%;
    }

    .case-study-template :where(pre, code) {
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    .mortgage-case-study__hero,
    .mortgage-case-study__layout,
    .case-brief-copy,
    .case-fact-grid,
    .case-evidence-table,
    .case-question-grid,
    .case-related-grid,
    .case-reveal-strip,
    .case-action-band,
    .case-visual-list--three,
    .case-waterfall,
    .case-matrix,
    .case-matrix tbody,
    .case-matrix tr,
    .case-matrix th,
    .case-matrix td {
      min-width: 0;
      max-width: 100%;
    }

    .case-matrix-wrap {
      overflow-x: hidden;
    }

    .case-matrix {
      table-layout: fixed;
      width: 100%;
    }

    .case-study-action,
    .case-action-link,
    .case-rail-card--cta a {
      max-width: 100%;
      white-space: normal;
    }
  }

/* --------------------------------------------------------------------------
   Platform Case Study Mobile Template Contract
   --------------------------------------------------------------------------
   This section is intentionally shared and case-study-specific.
   It must stay out of tool-shell.css. Tool runtime modules own interactive
   calculators; case-study.css owns analytical publishing surfaces.

   Mobile rule: one primary content surface per section. Inner analytical
   patterns become divider rows unless the nested surface is necessary to show
   a total, a timeline, or an evidence boundary.
-------------------------------------------------------------------------- */
.case-study-card,
.case-study-grid,
.mortgage-case-study,
.mortgage-case-study *,
.mortgage-case-study *::before,
.mortgage-case-study *::after {
  box-sizing: border-box;
}

.mortgage-case-study,
.case-study-card,
.case-study-grid {
  max-width: 100%;
}

@media (max-width: 720px) {
  .mortgage-case-study {
    gap: 22px;
    padding: 14px;
    overflow-x: hidden;
    border-radius: calc(var(--pp-radius-lg) + 2px);
  }

  .mortgage-case-study__hero,
  .mortgage-case-study__layout,
  .mortgage-case-study__main,
  .case-section,
  .case-headline-card,
  .case-exhibit,
  .case-evidence-table,
  .case-action-band,
  .mortgage-case-study__related {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .mortgage-case-study__rail {
    display: none;
  }

  .mortgage-case-study__hero {
    gap: 18px;
    padding: 18px;
    border-radius: var(--pp-radius-lg);
  }

  .mortgage-case-study__hero-actions,
  .case-action-band__links {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .case-study-action,
  .case-action-link {
    width: 100%;
    min-width: 0;
    white-space: normal;
  }

  .case-headline-card,
  .case-section {
    padding: 16px;
    border-radius: var(--pp-radius-lg);
  }

  .case-headline-card dl,
  .case-fact-grid,
  .case-visual-list,
  .case-evidence-table dl,
  .case-question-grid,
  .case-related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .case-headline-card dl > div,
  .case-fact,
  .case-visual-list div,
  .case-evidence-table dl > div {
    padding: 12px 0;
    border: 0;
    border-top: 1px solid rgba(70, 91, 125, 0.14);
    border-radius: 0;
    background: transparent;
  }

  .case-headline-card dl > div:first-child,
  .case-fact:first-child,
  .case-visual-list div:first-child,
  .case-evidence-table dl > div:first-child {
    border-top: 0;
  }

  .case-fact small,
  .case-visual-list small,
  .case-evidence-table small,
  .case-waterfall__step small {
    max-width: 100%;
    overflow-wrap: anywhere;
  }

  .case-exhibit {
    padding: 16px;
  }

  .case-waterfall {
    gap: 0;
  }

  .case-waterfall__step {
    display: grid;
    gap: 5px;
    padding: 12px 0;
    border: 0;
    border-top: 1px solid rgba(70, 91, 125, 0.14);
    border-radius: 0;
    background: transparent;
  }

  .case-waterfall__step:first-child {
    border-top: 0;
  }

  .case-waterfall__step.is-total {
    margin-top: 6px;
    padding: 14px;
    border: 1px solid rgba(26, 54, 93, 0.28);
    border-left: 3px solid rgba(26, 54, 93, 0.78);
    border-radius: var(--pp-radius-md);
    background: #ffffff;
  }

  .case-waterfall__operator {
    min-height: 26px;
    margin: 0;
  }

  .case-timeline__track {
    margin-inline: 0;
  }

  .case-timeline__axis {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4px;
    min-height: auto;
    margin-top: 8px;
  }

  .case-timeline__axis span {
    position: static;
    transform: none;
    white-space: normal;
    text-align: left;
  }

  .case-exhibit__callout {
    padding: 13px 14px;
  }

  .case-matrix-wrap {
    overflow-x: hidden;
  }

  .case-matrix,
  .case-matrix thead,
  .case-matrix tbody,
  .case-matrix tr,
  .case-matrix th,
  .case-matrix td {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .case-matrix thead {
    display: none;
  }

  .case-matrix tr {
    padding: 12px 0;
    border-top: 1px solid rgba(70, 91, 125, 0.14);
  }

  .case-matrix tr:first-child {
    border-top: 0;
  }

  .case-matrix th,
  .case-matrix td {
    padding: 5px 0;
    border: 0;
    white-space: normal !important;
  }

  .case-matrix td:nth-child(2)::before {
    content: "Monthly P&I";
  }

  .case-matrix td:nth-child(3)::before {
    content: "Financed principal";
  }

  .case-matrix td:nth-child(4)::before {
    content: "Balance at renewal";
  }

  .case-matrix td:nth-child(5)::before {
    content: "What changes";
  }

  .case-matrix td::before {
    display: block;
    margin-bottom: 2px;
    color: var(--pp-text-600);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.055em;
    line-height: 1.1;
    text-transform: uppercase;
  }

  .case-reveal-strip,
  .case-action-band {
    grid-template-columns: 1fr;
  }

  .case-study-template :where(img, svg, canvas, table, iframe, pre, code) {
    max-width: 100%;
  }

  .case-study-template :where(pre, code) {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}

/* Platform case-study mobile block system */
/*
  Ownership:
  - Case-study publishing surfaces only.
  - Tool runtime surfaces remain in tool-shell.css.
  - Desktop report richness is preserved; mobile uses one-column readable block patterns.

  Supported shared blocks:
  - assumption-list
  - formula-chain
  - timeline-read
  - evidence rows / comparison matrix
*/
.case-study-template :where(
  .case-assumption-list,
  .case-formula-chain,
  .case-timeline-read,
  .case-timeline-read__facts,
  .case-matrix,
  .case-matrix-wrap
) {
  min-width: 0;
}

@media (max-width: 720px) {
  .case-study-template {
    --case-study-mobile-card-border: rgba(70, 91, 125, 0.12);
    --case-study-mobile-soft-bg: #fbfdff;
    --case-study-mobile-soft-bg-strong: #f6f9ff;
    --case-study-mobile-section-pad: 15px;
  }

  .case-study-template .case-section {
    padding: var(--case-study-mobile-section-pad) !important;
  }

  .case-study-template .case-section h2 {
    margin-bottom: 10px !important;
  }

  .case-study-template .case-section-intro {
    margin-bottom: 14px !important;
    line-height: 1.55 !important;
  }

  .case-study-template .case-section--setup .case-section-intro,
  .case-study-template .case-section--exhibits .case-section-intro {
    margin-bottom: 12px !important;
  }

  /* Assumption-list pattern: one governed mobile surface, not many mini cards. */
  .case-study-template .case-assumption-list,
  .case-study-template .case-section--setup .case-fact-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    overflow: hidden;
    border: 1px solid var(--case-study-mobile-card-border);
    border-radius: var(--pp-radius-md);
    background: var(--case-study-mobile-soft-bg);
  }

  .case-study-template .case-assumption-list .case-fact,
  .case-study-template .case-section--setup .case-fact {
    display: grid !important;
    grid-template-columns: minmax(0, 0.84fr) minmax(0, 1.16fr);
    gap: 4px 12px !important;
    align-items: baseline;
    min-width: 0;
    padding: 10px 12px !important;
    border: 0 !important;
    border-top: 1px solid rgba(70, 91, 125, 0.12) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .case-study-template .case-assumption-list .case-fact:first-child,
  .case-study-template .case-section--setup .case-fact:first-child {
    border-top: 0 !important;
  }

  .case-study-template .case-assumption-list .case-fact strong,
  .case-study-template .case-section--setup .case-fact strong {
    color: var(--pp-text-600);
    font-size: 0.76rem;
    font-weight: 850;
    letter-spacing: 0.035em;
    line-height: 1.2;
    text-transform: uppercase;
  }

  .case-study-template .case-assumption-list .case-fact span,
  .case-study-template .case-section--setup .case-fact span {
    min-width: 0;
    color: var(--pp-text-900);
    font-size: 0.95rem;
    font-weight: 850;
    line-height: 1.25;
    text-align: right;
    overflow-wrap: anywhere;
  }

  .case-study-template .case-assumption-list .case-fact small,
  .case-study-template .case-section--setup .case-fact small {
    grid-column: 1 / -1;
    color: var(--pp-text-700);
    line-height: 1.35;
  }

  /* Formula-chain pattern: arithmetic relationship as compact rows. */
  .case-study-template .case-exhibit {
    gap: 14px !important;
  }

  .case-study-template .case-exhibit__header {
    gap: 5px;
  }

  .case-study-template .case-formula-chain,
  .case-study-template .case-exhibit--composition-bar .case-waterfall {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    overflow: hidden;
    padding: 0 !important;
    border: 1px solid var(--case-study-mobile-card-border);
    border-radius: var(--pp-radius-md);
    background: var(--case-study-mobile-soft-bg);
  }

  .case-study-template .case-formula-chain__step,
  .case-study-template .case-exhibit--composition-bar .case-waterfall__step {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px !important;
    align-items: baseline;
    min-height: 0 !important;
    min-width: 0;
    padding: 11px 12px !important;
    border: 0 !important;
    border-top: 1px solid rgba(70, 91, 125, 0.12) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .case-study-template .case-formula-chain__step:first-child,
  .case-study-template .case-exhibit--composition-bar .case-waterfall__step:first-child {
    border-top: 0 !important;
  }

  .case-study-template .case-formula-chain__step.is-total,
  .case-study-template .case-exhibit--composition-bar .case-waterfall__step.is-total {
    margin: 0 !important;
    border-left: 0 !important;
    background: linear-gradient(180deg, #ffffff, var(--case-study-mobile-soft-bg-strong)) !important;
  }

  .case-study-template .case-formula-chain__operator,
  .case-study-template .case-exhibit--composition-bar .case-waterfall__operator {
    display: flex !important;
    align-items: center;
    justify-content: center;
    min-height: 24px !important;
    margin: 0 !important;
    padding: 3px 0;
    border-top: 1px solid rgba(70, 91, 125, 0.1);
    background: rgba(246, 249, 255, 0.72);
    color: var(--pp-brand-900);
    font-size: 0.95rem !important;
    font-weight: 950;
    line-height: 1;
  }

  .case-study-template .case-waterfall__label,
  .case-study-template .case-visual-list dt {
    color: var(--pp-text-650, var(--pp-text-700));
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.25;
  }

  .case-study-template .case-waterfall__value,
  .case-study-template .case-visual-list dd {
    color: var(--pp-text-900);
    font-size: 1rem;
    font-weight: 900;
    line-height: 1.18;
  }

  .case-study-template .case-exhibit--composition-bar .case-waterfall__value {
    justify-self: end;
    text-align: right;
    white-space: nowrap;
  }

  .case-study-template .case-waterfall small,
  .case-study-template .case-visual-list small {
    grid-column: 1 / -1;
    line-height: 1.35;
  }

  /* Timeline-read pattern: readable axis and compact evidence rows. */
  .case-study-template .case-timeline-read,
  .case-study-template .case-exhibit--term-timeline .case-timeline {
    display: grid;
    gap: 12px !important;
  }

  .case-study-template .case-timeline-read .case-timeline__track,
  .case-study-template .case-exhibit--term-timeline .case-timeline__track {
    height: 34px !important;
    overflow: visible !important;
    border-radius: 999px !important;
  }

  .case-study-template .case-timeline-read .case-timeline__marker,
  .case-study-template .case-exhibit--term-timeline .case-timeline__marker {
    top: -5px;
    bottom: -5px;
    width: 3px;
    box-shadow: 0 0 0 5px rgba(26, 54, 93, 0.12);
  }

  .case-study-template .case-timeline-read .case-timeline__axis,
  .case-study-template .case-exhibit--term-timeline .case-timeline__axis {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 8px !important;
    min-height: auto !important;
    margin-top: 4px !important;
    color: var(--pp-text-650, var(--pp-text-700));
    font-size: 0.72rem !important;
    font-weight: 800;
    line-height: 1.2;
  }

  .case-study-template .case-timeline-read .case-timeline__axis span,
  .case-study-template .case-exhibit--term-timeline .case-timeline__axis span {
    position: static !important;
    transform: none !important;
    white-space: normal !important;
  }

  .case-study-template .case-timeline-read .case-timeline__axis-renewal,
  .case-study-template .case-exhibit--term-timeline .case-timeline__axis-renewal {
    text-align: center !important;
  }

  .case-study-template .case-timeline-read .case-timeline__axis-end,
  .case-study-template .case-exhibit--term-timeline .case-timeline__axis-end {
    text-align: right !important;
  }

  .case-study-template .case-timeline-read__facts,
  .case-study-template .case-exhibit--term-timeline .case-visual-list--three {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    overflow: hidden;
    margin-top: 2px;
    border: 1px solid var(--case-study-mobile-card-border);
    border-radius: var(--pp-radius-md);
    background: var(--case-study-mobile-soft-bg);
  }

  .case-study-template .case-timeline-read__facts div,
  .case-study-template .case-exhibit--term-timeline .case-visual-list--three div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px !important;
    align-items: baseline;
    padding: 10px 12px !important;
    border: 0 !important;
    border-top: 1px solid rgba(70, 91, 125, 0.12) !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .case-study-template .case-timeline-read__facts div:first-child,
  .case-study-template .case-exhibit--term-timeline .case-visual-list--three div:first-child {
    border-top: 0 !important;
  }

  .case-study-template .case-exhibit--term-timeline .case-visual-list--three dd {
    justify-self: end;
    text-align: right;
  }

  /* Evidence and matrix rows: readable mobile cards without horizontal scroll. */
  .case-study-template .case-evidence-table section {
    padding: 13px !important;
    border-radius: var(--pp-radius-md) !important;
  }

  .case-study-template .case-evidence-table dl div {
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 10px !important;
  }

  .case-study-template .case-matrix-wrap {
    border: 0 !important;
    overflow-x: hidden !important;
  }

  .case-study-template .case-matrix tr {
    display: grid !important;
    gap: 8px !important;
    margin-top: 10px;
    padding: 12px !important;
    border: 1px solid var(--case-study-mobile-card-border) !important;
    border-radius: var(--pp-radius-md);
    background: var(--case-study-mobile-soft-bg);
  }

  .case-study-template .case-matrix tr:first-child {
    margin-top: 0;
  }

  .case-study-template .case-matrix th[scope="row"] {
    padding-bottom: 6px !important;
    border-bottom: 1px solid rgba(70, 91, 125, 0.12) !important;
  }

  .case-study-template .case-matrix td {
    display: grid !important;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 8px !important;
    align-items: baseline;
  }

  .case-study-template .case-matrix td::before {
    margin: 0 !important;
  }
}

@media (max-width: 430px) {
  .case-study-template .case-assumption-list .case-fact,
  .case-study-template .case-section--setup .case-fact,
  .case-study-template .case-formula-chain__step,
  .case-study-template .case-exhibit--composition-bar .case-waterfall__step,
  .case-study-template .case-timeline-read__facts div,
  .case-study-template .case-exhibit--term-timeline .case-visual-list--three div,
  .case-study-template .case-evidence-table dl div,
  .case-study-template .case-matrix td {
    grid-template-columns: 1fr !important;
  }

  .case-study-template .case-assumption-list .case-fact span,
  .case-study-template .case-section--setup .case-fact span,
  .case-study-template .case-exhibit--composition-bar .case-waterfall__value,
  .case-study-template .case-exhibit--term-timeline .case-visual-list--three dd,
  .case-study-template .case-evidence-table dd {
    justify-self: start !important;
    text-align: left !important;
  }
}

/* Platform case-study mobile content-width standard */
/*
  Purpose:
  - Shared mobile density standard for case-study publishing surfaces.
  - Reduce nested-card squeezing and maximize readable horizontal width.
  - Keep rich desktop report composition intact.
  - Applies to semantic block patterns so future case studies inherit the behavior.
*/
@media (max-width: 720px) {
  .case-study-template {
    --case-study-mobile-section-pad: 13px;
    --case-study-mobile-inner-pad: 11px;
    --case-study-mobile-row-pad: 10px 11px;
    --case-study-mobile-divider: rgba(70, 91, 125, 0.12);
  }

  .mortgage-case-study {
    gap: 18px !important;
    padding: 12px !important;
    border-radius: 18px !important;
  }

  .mortgage-case-study__hero {
    padding: 16px !important;
  }

  .mortgage-case-study__layout,
  .mortgage-case-study__main {
    gap: 16px !important;
  }

  .case-section {
    padding: var(--case-study-mobile-section-pad) !important;
    border-radius: 15px !important;
  }

  .case-section h2 {
    margin-top: 4px !important;
  }

  .case-section-intro {
    max-width: none !important;
  }

  /* Standard mobile rule: inside an analytical section, the section is the main surface.
     Inner exhibits become separators/blocks instead of full cards inside cards. */
  .case-section--exhibits .case-exhibit {
    gap: 12px !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .case-section--exhibits .case-exhibit + .case-exhibit {
    margin-top: 4px;
    padding-top: 16px !important;
    border-top: 1px solid var(--case-study-mobile-divider) !important;
  }

  .case-exhibit__header {
    max-width: none !important;
  }

  .case-exhibit__header p {
    line-height: 1.5 !important;
  }

  .case-exhibit__callout {
    padding: 11px 12px !important;
    border-radius: 12px !important;
    border-left-width: 3px !important;
    line-height: 1.5 !important;
  }

  /* Compact list blocks should use the full available section width. */
  .case-study-template .case-assumption-list,
  .case-study-template .case-formula-chain,
  .case-study-template .case-timeline-read__facts,
  .case-study-template .case-evidence-table,
  .case-study-template .case-matrix-wrap {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: 0 !important;
  }

  .case-study-template .case-assumption-list .case-fact,
  .case-study-template .case-section--setup .case-fact,
  .case-study-template .case-formula-chain__step,
  .case-study-template .case-exhibit--composition-bar .case-waterfall__step,
  .case-study-template .case-timeline-read__facts div,
  .case-study-template .case-exhibit--term-timeline .case-visual-list--three div,
  .case-study-template .case-evidence-table dl div,
  .case-study-template .case-matrix td {
    padding: var(--case-study-mobile-row-pad) !important;
  }

  /* Tables/evidence should read as rows, not boxed tables squeezed inside cards. */
  .case-evidence-table {
    gap: 10px !important;
  }

  .case-evidence-table section {
    padding: var(--case-study-mobile-inner-pad) !important;
    border-radius: 12px !important;
  }

  .case-brief-copy,
  .case-meaning-list,
  .case-question-grid,
  .case-related-grid,
  .case-reveal-strip {
    gap: 10px !important;
  }

  .case-brief-item,
  .case-meaning-list article,
  .case-question-grid section,
  .case-reveal-strip span {
    padding: var(--case-study-mobile-inner-pad) !important;
    border-radius: 12px !important;
  }

  /* Timeline labels remain readable without forcing a desktop axis into mobile. */
  .case-study-template .case-timeline-read .case-timeline__axis,
  .case-study-template .case-exhibit--term-timeline .case-timeline__axis {
    margin-top: 6px !important;
    gap: 7px !important;
    font-size: 0.72rem !important;
  }

  .case-study-template .case-timeline-read .case-timeline__axis-start,
  .case-study-template .case-exhibit--term-timeline .case-timeline__axis-start {
    text-align: left !important;
  }

  .case-study-template .case-timeline-read .case-timeline__axis-renewal,
  .case-study-template .case-exhibit--term-timeline .case-timeline__axis-renewal {
    text-align: center !important;
  }

  .case-study-template .case-timeline-read .case-timeline__axis-end,
  .case-study-template .case-exhibit--term-timeline .case-timeline__axis-end {
    text-align: right !important;
  }
}

@media (max-width: 430px) {
  .case-study-template {
    --case-study-mobile-section-pad: 12px;
    --case-study-mobile-inner-pad: 10px;
    --case-study-mobile-row-pad: 9px 10px;
  }

  .mortgage-case-study {
    padding: 10px !important;
  }

  .mortgage-case-study__hero {
    padding: 14px !important;
  }

  .case-section {
    padding: var(--case-study-mobile-section-pad) !important;
  }
}

/* Platform case-study mobile exhibit block repair */
/*
  Scope:
  - Shared case-study mobile exhibit presentation only.
  - Uses existing semantic block classes already present in the template:
    case-assumption-list, case-formula-chain, case-timeline-read.
  - Avoids Astro markup changes to prevent template syntax regressions.
  - Does not change case-study facts, mortgage calculations, benchmark logic,
    scenario logic, Canada insurance, or tool runtime behavior.
*/
@media (max-width: 720px) {
  /* Exhibit mobile rule: the case section is the surface; inner exhibits should
     read as structured rows, not as nested report cards. */
  .case-study-template .case-section--exhibits {
    overflow: hidden;
  }

  .case-study-template .case-section--exhibits .case-exhibit {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .case-study-template .case-section--exhibits .case-exhibit__header {
    padding-inline: 0 !important;
  }

  /* Formula-chain pattern: convert desktop waterfall cards into compact
     operator rows. Operators are shown inline with the row so the formula does
     not become a tall stack of mini-cards on mobile. */
  .case-study-template .case-formula-chain,
  .case-study-template .case-exhibit--composition-bar .case-waterfall {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .case-study-template .case-formula-chain__operator,
  .case-study-template .case-exhibit--composition-bar .case-waterfall__operator {
    display: none !important;
  }

  .case-study-template .case-formula-chain__step,
  .case-study-template .case-exhibit--composition-bar .case-waterfall__step {
    position: relative;
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) max-content !important;
    grid-template-areas:
      "op label value"
      "op note note";
    column-gap: 9px !important;
    row-gap: 3px !important;
    align-items: baseline;
    min-width: 0;
    padding: 11px 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(70, 91, 125, 0.12) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .case-study-template .case-formula-chain__step:first-of-type,
  .case-study-template .case-exhibit--composition-bar .case-waterfall__step:first-of-type {
    border-top: 0 !important;
    padding-top: 4px !important;
  }

  .case-study-template .case-formula-chain__step::before,
  .case-study-template .case-exhibit--composition-bar .case-waterfall__step::before {
    grid-area: op;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    min-height: 20px;
    border-radius: 999px;
    color: var(--pp-brand-900);
    font-size: 0.82rem;
    font-weight: 950;
    line-height: 1;
  }

  .case-study-template .case-formula-chain__step:nth-of-type(2)::before,
  .case-study-template .case-exhibit--composition-bar .case-waterfall__step:nth-of-type(2)::before {
    content: "+";
    background: rgba(26, 54, 93, 0.06);
  }

  .case-study-template .case-formula-chain__step:nth-of-type(3)::before,
  .case-study-template .case-exhibit--composition-bar .case-waterfall__step:nth-of-type(3)::before {
    content: "=";
    background: rgba(26, 54, 93, 0.1);
  }

  .case-study-template .case-formula-chain__step:first-of-type::before,
  .case-study-template .case-exhibit--composition-bar .case-waterfall__step:first-of-type::before {
    content: "";
    background: transparent;
  }

  .case-study-template .case-formula-chain__step.is-total,
  .case-study-template .case-exhibit--composition-bar .case-waterfall__step.is-total {
    margin: 0 !important;
    padding-bottom: 12px !important;
    background: linear-gradient(180deg, rgba(246, 249, 255, 0.45), transparent) !important;
  }

  .case-study-template .case-formula-chain__step .case-waterfall__label,
  .case-study-template .case-exhibit--composition-bar .case-waterfall__label {
    grid-area: label;
    min-width: 0;
    color: var(--pp-text-650, var(--pp-text-700)) !important;
    font-size: 0.78rem !important;
    font-weight: 800 !important;
    line-height: 1.25 !important;
  }

  .case-study-template .case-formula-chain__step .case-waterfall__value,
  .case-study-template .case-exhibit--composition-bar .case-waterfall__value {
    grid-area: value;
    justify-self: end;
    min-width: max-content;
    color: var(--pp-text-900) !important;
    font-size: 1rem !important;
    font-weight: 920 !important;
    line-height: 1.18 !important;
    text-align: right;
    white-space: nowrap;
  }

  .case-study-template .case-formula-chain__step small,
  .case-study-template .case-exhibit--composition-bar .case-waterfall__step small {
    grid-area: note;
    color: var(--pp-text-650, var(--pp-text-700)) !important;
    line-height: 1.36 !important;
  }

  /* Timeline-read pattern: keep the visual timeline, but use compact labels and
     supporting rows so the mobile layout does not depend on crowded absolute
     axis positioning. */
  .case-study-template .case-timeline-read,
  .case-study-template .case-exhibit--term-timeline .case-timeline {
    gap: 10px !important;
  }

  .case-study-template .case-timeline-read .case-timeline__track,
  .case-study-template .case-exhibit--term-timeline .case-timeline__track {
    height: 30px !important;
    overflow: hidden !important;
    border-radius: 999px !important;
  }

  .case-study-template .case-timeline-read .case-timeline__marker,
  .case-study-template .case-exhibit--term-timeline .case-timeline__marker {
    top: -4px !important;
    bottom: -4px !important;
    width: 3px !important;
    box-shadow: 0 0 0 5px rgba(26, 54, 93, 0.12) !important;
  }

  .case-study-template .case-timeline-read .case-timeline__axis,
  .case-study-template .case-exhibit--term-timeline .case-timeline__axis {
    display: grid !important;
    grid-template-columns: 0.78fr 0.92fr 1.15fr !important;
    gap: 6px !important;
    margin-top: 4px !important;
    min-height: auto !important;
    color: var(--pp-text-650, var(--pp-text-700)) !important;
    font-size: 0.68rem !important;
    font-weight: 820 !important;
    line-height: 1.18 !important;
  }

  .case-study-template .case-timeline-read .case-timeline__axis span,
  .case-study-template .case-exhibit--term-timeline .case-timeline__axis span {
    position: static !important;
    transform: none !important;
    min-width: 0;
    white-space: normal !important;
  }

  .case-study-template .case-timeline-read .case-timeline__axis-renewal,
  .case-study-template .case-exhibit--term-timeline .case-timeline__axis-renewal {
    text-align: center !important;
  }

  .case-study-template .case-timeline-read .case-timeline__axis-end,
  .case-study-template .case-exhibit--term-timeline .case-timeline__axis-end {
    text-align: right !important;
    font-size: 0 !important;
  }

  .case-study-template .case-timeline-read .case-timeline__axis-end::after,
  .case-study-template .case-exhibit--term-timeline .case-timeline__axis-end::after {
    content: "Full reference";
    font-size: 0.68rem;
  }

  .case-study-template .case-timeline-read__facts,
  .case-study-template .case-exhibit--term-timeline .case-visual-list--three {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .case-study-template .case-timeline-read__facts div,
  .case-study-template .case-exhibit--term-timeline .case-visual-list--three div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    gap: 4px 10px !important;
    align-items: baseline;
    min-width: 0;
    padding: 10px 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(70, 91, 125, 0.12) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .case-study-template .case-timeline-read__facts div:first-child,
  .case-study-template .case-exhibit--term-timeline .case-visual-list--three div:first-child {
    border-top: 0 !important;
  }

  .case-study-template .case-timeline-read__facts dt,
  .case-study-template .case-exhibit--term-timeline .case-visual-list--three dt {
    min-width: 0;
  }

  .case-study-template .case-timeline-read__facts dd,
  .case-study-template .case-exhibit--term-timeline .case-visual-list--three dd {
    justify-self: end !important;
    min-width: max-content;
    text-align: right !important;
    white-space: nowrap;
  }

  .case-study-template .case-timeline-read__facts small,
  .case-study-template .case-exhibit--term-timeline .case-visual-list--three small {
    grid-column: 1 / -1;
  }
}

@media (max-width: 430px) {
  .case-study-template .case-formula-chain__step,
  .case-study-template .case-exhibit--composition-bar .case-waterfall__step {
    grid-template-columns: 20px minmax(0, 1fr) !important;
    grid-template-areas:
      "op label"
      "op value"
      "op note" !important;
  }

  .case-study-template .case-formula-chain__step .case-waterfall__value,
  .case-study-template .case-exhibit--composition-bar .case-waterfall__value {
    justify-self: start !important;
    text-align: left !important;
  }

  .case-study-template .case-timeline-read__facts div,
  .case-study-template .case-exhibit--term-timeline .case-visual-list--three div {
    grid-template-columns: 1fr !important;
  }

  .case-study-template .case-timeline-read__facts dd,
  .case-study-template .case-exhibit--term-timeline .case-visual-list--three dd {
    justify-self: start !important;
    text-align: left !important;
  }
}


/* Platform case-study timeline-read structural mobile repair */
/*
  Scope:
  - Shared case-study timeline-read block presentation.
  - Adds a mobile milestone row so Exhibit timelines do not depend on a
    desktop axis squeezed into a phone viewport.
  - Keeps the fix in case-study.css and leaves tool-shell.css untouched.
*/
.case-timeline-read__milestones {
  display: none;
}

@media (max-width: 720px) {
  .case-study-template .case-timeline-read .case-timeline__axis,
  .case-study-template .case-exhibit--term-timeline .case-timeline__axis {
    display: none !important;
  }

  .case-study-template .case-timeline-read__milestones {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 2px 0 0;
    padding: 0;
  }

  .case-study-template .case-timeline-read__milestones div {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 8px 0 0;
    border-top: 1px solid rgba(70, 91, 125, 0.12);
  }

  .case-study-template .case-timeline-read__milestones dt,
  .case-study-template .case-timeline-read__milestones dd {
    margin: 0;
    min-width: 0;
  }

  .case-study-template .case-timeline-read__milestones dt {
    color: var(--pp-text-600);
    font-size: 0.67rem;
    font-weight: 850;
    letter-spacing: 0.035em;
    line-height: 1.15;
    text-transform: uppercase;
  }

  .case-study-template .case-timeline-read__milestones dd {
    color: var(--pp-text-900);
    font-size: 0.84rem;
    font-weight: 900;
    line-height: 1.16;
  }

  .case-study-template .case-timeline-read__milestones div:nth-child(2) {
    text-align: center;
  }

  .case-study-template .case-timeline-read__milestones div:nth-child(3) {
    text-align: right;
  }

  .case-study-template .case-timeline-read__facts {
    margin-top: 8px !important;
  }
}

@media (max-width: 390px) {
  .case-study-template .case-timeline-read__milestones {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .case-study-template .case-timeline-read__milestones div,
  .case-study-template .case-timeline-read__milestones div:nth-child(2),
  .case-study-template .case-timeline-read__milestones div:nth-child(3) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 8px;
    align-items: baseline;
    text-align: left;
  }
}


/* Platform case-study mobile content density finalization */
/*
  Scope:
  - Shared case-study mobile density and compact numeric-label presentation.
  - Uses existing case-study semantic classes.
  - Does not change formulas, reviewed values, benchmark logic, scenario logic,
    Canada insurance, calculator runtime, or tool-shell.css ownership.
*/
@media (max-width: 720px) {
  /* Mobile rule: the section is the primary surface. Inner report cards become
     readable rows so content width is not repeatedly lost to nested borders. */
  .case-study-template .case-section {
    padding: 18px 14px !important;
  }

  .case-study-template .case-section--setup .case-assumption-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    overflow: hidden !important;
    border: 1px solid rgba(70, 91, 125, 0.14) !important;
    border-radius: 15px !important;
    background: #fbfdff !important;
  }

  .case-study-template .case-section--setup .case-assumption-list .case-fact {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    gap: 3px 10px !important;
    min-width: 0 !important;
    padding: 10px 12px !important;
    border: 0 !important;
    border-top: 1px solid rgba(70, 91, 125, 0.1) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .case-study-template .case-section--setup .case-assumption-list .case-fact:first-child {
    border-top: 0 !important;
  }

  .case-study-template .case-section--setup .case-assumption-list .case-fact strong {
    min-width: 0 !important;
    color: var(--pp-text-650, var(--pp-text-700)) !important;
    font-size: 0.72rem !important;
    font-weight: 860 !important;
    letter-spacing: 0.055em !important;
    line-height: 1.15 !important;
    text-transform: uppercase !important;
  }

  .case-study-template .case-section--setup .case-assumption-list .case-fact span {
    justify-self: end !important;
    min-width: max-content !important;
    color: var(--pp-text-900) !important;
    font-size: 0.98rem !important;
    font-weight: 900 !important;
    line-height: 1.16 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  .case-study-template .case-section--setup .case-assumption-list .case-fact small {
    grid-column: 1 / -1 !important;
    color: var(--pp-text-650, var(--pp-text-700)) !important;
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
  }

  .case-study-template .case-section--exhibits .case-exhibit {
    padding: 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(70, 91, 125, 0.12) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .case-study-template .case-section--exhibits .case-exhibit:first-child {
    border-top: 0 !important;
    padding-top: 0 !important;
  }

  .case-study-template .case-section--exhibits .case-exhibit + .case-exhibit {
    padding-top: 18px !important;
  }

  .case-study-template .case-section--exhibits .case-exhibit__header {
    padding: 0 !important;
  }

  .case-study-template .case-exhibit--composition-bar .case-waterfall {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
    margin-top: 2px !important;
    overflow: hidden !important;
    border: 1px solid rgba(70, 91, 125, 0.14) !important;
    border-radius: 15px !important;
    background: #fbfdff !important;
  }

  .case-study-template .case-exhibit--composition-bar .case-waterfall__operator {
    display: none !important;
  }

  .case-study-template .case-exhibit--composition-bar .case-waterfall__step {
    position: relative !important;
    display: grid !important;
    grid-template-columns: 22px minmax(0, 1fr) max-content !important;
    grid-template-areas:
      'op label value'
      'op note note' !important;
    gap: 3px 8px !important;
    align-items: baseline !important;
    min-width: 0 !important;
    min-height: 0 !important;
    padding: 11px 12px !important;
    border: 0 !important;
    border-top: 1px solid rgba(70, 91, 125, 0.1) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .case-study-template .case-exhibit--composition-bar .case-waterfall__step:first-of-type {
    border-top: 0 !important;
  }

  .case-study-template .case-exhibit--composition-bar .case-waterfall__step::before {
    grid-area: op;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    min-height: 20px;
    border-radius: 999px;
    color: var(--pp-brand-900);
    font-size: 0.82rem;
    font-weight: 950;
    line-height: 1;
  }

  .case-study-template .case-exhibit--composition-bar .case-waterfall__step:nth-of-type(1)::before {
    content: '';
  }

  .case-study-template .case-exhibit--composition-bar .case-waterfall__step:nth-of-type(2)::before {
    content: '+';
    background: rgba(26, 54, 93, 0.06);
  }

  .case-study-template .case-exhibit--composition-bar .case-waterfall__step:nth-of-type(3)::before {
    content: '=';
    background: rgba(26, 54, 93, 0.1);
  }

  .case-study-template .case-exhibit--composition-bar .case-waterfall__step.is-total {
    background: linear-gradient(180deg, rgba(246, 249, 255, 0.85), rgba(255,255,255,0)) !important;
  }

  .case-study-template .case-exhibit--composition-bar .case-waterfall__label {
    grid-area: label !important;
    min-width: 0 !important;
    color: var(--pp-text-650, var(--pp-text-700)) !important;
    font-size: 0.78rem !important;
    font-weight: 780 !important;
    line-height: 1.25 !important;
  }

  .case-study-template .case-exhibit--composition-bar .case-waterfall__value {
    grid-area: value !important;
    justify-self: end !important;
    min-width: max-content !important;
    color: var(--pp-text-900) !important;
    font-size: 1rem !important;
    font-weight: 920 !important;
    line-height: 1.15 !important;
    text-align: right !important;
    white-space: nowrap !important;
  }

  .case-study-template .case-exhibit--composition-bar .case-waterfall__step small {
    grid-area: note !important;
    color: var(--pp-text-650, var(--pp-text-700)) !important;
    font-size: 0.78rem !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 430px) {
  .case-study-template .case-exhibit--composition-bar .case-waterfall__step {
    grid-template-columns: 20px minmax(0, 1fr) !important;
    grid-template-areas:
      'op label'
      'op value'
      'op note' !important;
  }

  .case-study-template .case-exhibit--composition-bar .case-waterfall__value {
    justify-self: start !important;
    text-align: left !important;
  }
}

/* Platform case-study assumption inline compact note */
.case-assumption-list__inline-note {
  display: inline;
  margin-left: 4px;
  color: var(--pp-text-650, var(--pp-text-700));
  font-size: 0.92em;
  font-weight: 780;
  letter-spacing: normal;
  line-height: inherit;
  text-transform: none;
}

@media (max-width: 720px) {
  .case-assumption-list__inline-note {
    color: var(--pp-text-650, var(--pp-text-700));
    font-size: 0.9em;
  }
}

/* Platform case-study assumption inline compact note specificity repair */
.case-study-template .case-section--setup .case-assumption-list .case-fact span .case-assumption-list__inline-note,
.case-study-template .case-assumption-list .case-fact span .case-assumption-list__inline-note {
  display: inline !important;
  grid-column: auto !important;
  margin-left: 4px !important;
  color: var(--pp-text-650, var(--pp-text-700)) !important;
  font-size: 0.9em !important;
  font-weight: 780 !important;
  letter-spacing: normal !important;
  line-height: inherit !important;
  text-transform: none !important;
  white-space: nowrap !important;
}

/* Platform case-study formula-chain component contract */
/*
  Scope:
  - Shared formula-chain block presentation.
  - Keeps desktop waterfall behavior while making the mobile operator rows
    deterministic from data-case-chain-operator instead of fragile position rules.
  - Does not change case-study values, calculator formulas, benchmark logic,
    scenario logic, Canada insurance, or tool runtime behavior.
*/
@media (max-width: 720px) {
  .case-study-template .case-formula-chain__step::before {
    content: attr(data-case-chain-operator) !important;
  }

  .case-study-template .case-formula-chain__step[data-case-chain-operator=""]::before {
    content: "" !important;
    background: transparent !important;
  }
}

/* Platform case-study timeline-read component contract */
.case-timeline-read__track-wrap {
  display: grid;
  gap: 12px;
}

@media (min-width: 721px) {
  .case-timeline-read__milestones {
    display: none !important;
  }
}

@media (max-width: 720px) {
  .case-study-template .case-timeline-read {
    display: grid !important;
    gap: 12px !important;
  }

  .case-study-template .case-timeline-read__milestones {
    order: 1;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 0 !important;
    padding: 0 !important;
  }

  .case-study-template .case-timeline-read__track-wrap {
    order: 2;
    display: grid !important;
    gap: 0 !important;
  }

  .case-study-template .case-timeline-read__facts {
    order: 3;
  }

  .case-study-template .case-timeline-read .case-timeline__axis {
    display: none !important;
  }

  .case-study-template .case-timeline-read .case-timeline__track {
    height: 30px !important;
    border-radius: 999px !important;
  }

  .case-study-template .case-timeline-read__milestones div {
    display: grid;
    gap: 3px;
    min-width: 0;
    padding: 8px 0 0;
    border-top: 1px solid rgba(70, 91, 125, 0.12);
  }

  .case-study-template .case-timeline-read__milestones dt,
  .case-study-template .case-timeline-read__milestones dd {
    margin: 0;
    min-width: 0;
  }

  .case-study-template .case-timeline-read__milestones dt {
    color: var(--pp-text-600);
    font-size: 0.67rem;
    font-weight: 850;
    letter-spacing: 0.035em;
    line-height: 1.15;
    text-transform: uppercase;
  }

  .case-study-template .case-timeline-read__milestones dd {
    color: var(--pp-text-900);
    font-size: 0.84rem;
    font-weight: 900;
    line-height: 1.16;
  }

  .case-study-template .case-timeline-read__milestones div:nth-child(2) {
    text-align: center;
  }

  .case-study-template .case-timeline-read__milestones div:nth-child(3) {
    text-align: right;
  }

  .case-study-template .case-timeline-read__facts div {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    gap: 4px 10px !important;
    align-items: baseline !important;
    padding: 10px 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(70, 91, 125, 0.12) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .case-study-template .case-timeline-read__facts div:first-child {
    border-top: 0 !important;
  }

  .case-study-template .case-timeline-read__facts dd {
    justify-self: end !important;
    min-width: max-content;
    text-align: right !important;
    white-space: nowrap;
  }

  .case-study-template .case-timeline-read__facts small {
    grid-column: 1 / -1;
  }
}

@media (max-width: 390px) {
  .case-study-template .case-timeline-read__milestones {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .case-study-template .case-timeline-read__milestones div,
  .case-study-template .case-timeline-read__milestones div:nth-child(2),
  .case-study-template .case-timeline-read__milestones div:nth-child(3) {
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 8px;
    align-items: baseline;
    text-align: left;
  }
}

/* Platform case-study evidence-list block */
.case-evidence-list {
  width: 100%;
}

.case-evidence-list__group {
  min-width: 0;
}

.case-evidence-list__row {
  min-width: 0;
}

@media (max-width: 720px) {
  .case-study-template .case-evidence-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100%;
    max-width: 100%;
  }

  .case-study-template .case-evidence-list__group {
    padding: 12px 0 !important;
    border: 0 !important;
    border-top: 1px solid rgba(70, 91, 125, 0.12) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .case-study-template .case-evidence-list__group:first-child {
    border-top: 0 !important;
    padding-top: 0 !important;
  }

  .case-study-template .case-evidence-list__group h3 {
    margin-bottom: 8px !important;
    color: var(--pp-text-900) !important;
    font-size: 1rem !important;
    line-height: 1.2 !important;
  }

  .case-study-template .case-evidence-list dl {
    display: grid !important;
    gap: 0 !important;
  }

  .case-study-template .case-evidence-list__row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) max-content !important;
    gap: 6px 12px !important;
    align-items: baseline !important;
    padding: 10px 0 !important;
    border-top: 1px solid rgba(70, 91, 125, 0.1) !important;
  }

  .case-study-template .case-evidence-list__row:first-child {
    border-top: 0 !important;
  }

  .case-study-template .case-evidence-list__row dt {
    min-width: 0;
  }

  .case-study-template .case-evidence-list__row dt span {
    color: var(--pp-text-700) !important;
    font-size: 0.8rem !important;
    font-weight: 780 !important;
    line-height: 1.25 !important;
  }

  .case-study-template .case-evidence-list__row small {
    color: var(--pp-text-650, var(--pp-text-700)) !important;
    font-size: 0.76rem !important;
    line-height: 1.35 !important;
  }

  .case-study-template .case-evidence-list__row dd {
    justify-self: end !important;
    min-width: max-content;
    color: var(--pp-text-900) !important;
    font-size: 0.95rem !important;
    font-weight: 900 !important;
    line-height: 1.18 !important;
    text-align: right !important;
    white-space: nowrap;
  }

  .case-study-template .case-evidence-list__row.is-primary dd {
    color: var(--pp-brand-900) !important;
  }
}

@media (max-width: 430px) {
  .case-study-template .case-evidence-list__row {
    grid-template-columns: 1fr !important;
    gap: 3px !important;
  }

  .case-study-template .case-evidence-list__row dd {
    justify-self: start !important;
    text-align: left !important;
  }
}

/* Platform case-study comparison matrix block */
.case-comparison-matrix__cards {
  display: none;
}

@media (max-width: 720px) {
  .case-comparison-matrix {
    overflow: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
  }

  .case-comparison-matrix__table {
    display: none !important;
  }

  .case-comparison-matrix__cards {
    display: grid !important;
    gap: 10px;
  }

  .case-comparison-matrix__card {
    display: grid;
    gap: 10px;
    min-width: 0;
    padding: 12px;
    border: 1px solid rgba(70, 91, 125, 0.14);
    border-radius: var(--pp-radius-md);
    background: linear-gradient(180deg, #ffffff, #fbfdff);
  }

  .case-comparison-matrix__card-head {
    display: grid;
    gap: 3px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(70, 91, 125, 0.12);
  }

  .case-comparison-matrix__card-head span,
  .case-comparison-matrix__values dt,
  .case-comparison-matrix__interpretation span {
    color: var(--pp-text-650, var(--pp-text-700));
    font-size: 0.68rem;
    font-weight: 880;
    letter-spacing: 0.065em;
    line-height: 1.12;
    text-transform: uppercase;
  }

  .case-comparison-matrix__card-head strong {
    color: var(--pp-text-900);
    font-size: 0.92rem;
    font-weight: 900;
    line-height: 1.2;
  }

  .case-comparison-matrix__values {
    display: grid;
    gap: 0;
    margin: 0;
  }

  .case-comparison-matrix__values div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 10px;
    align-items: baseline;
    padding: 8px 0;
    border-top: 1px solid rgba(70, 91, 125, 0.1);
  }

  .case-comparison-matrix__values div:first-child {
    border-top: 0;
    padding-top: 0;
  }

  .case-comparison-matrix__values dd {
    margin: 0;
    color: var(--pp-text-900);
    font-size: 0.88rem;
    font-weight: 900;
    line-height: 1.15;
    text-align: right;
    white-space: nowrap;
  }

  .case-comparison-matrix__interpretation {
    display: grid;
    gap: 4px;
    margin: 0;
    padding-top: 9px;
    border-top: 1px solid rgba(70, 91, 125, 0.12);
    color: var(--pp-text-800);
    line-height: 1.5;
  }
}

@media (max-width: 430px) {
  .case-comparison-matrix__values div {
    grid-template-columns: 1fr;
    gap: 3px;
  }

  .case-comparison-matrix__values dd {
    text-align: left;
    white-space: normal;
  }
}

/* --------------------------------------------------------------------------
   Platform Case Study Visual Governance System
   --------------------------------------------------------------------------
   Scope:
   - Shared case-study typography, color roles, block surface roles, gradient
     policy, and chart-series color roles.
   - Applies through semantic classes and data-case-visual-tone attributes.
   - Stays out of tool-shell.css and does not change calculation/runtime logic.
-------------------------------------------------------------------------- */
.case-study-template,
.case-study-card,
.case-study-grid {
  --case-study-font-label: 0.72rem;
  --case-study-font-card-title: 1.12rem;
  --case-study-font-h1: clamp(1.72rem, 2.18vw, 2.32rem);
  --case-study-font-subtitle: clamp(1.03rem, 1.25vw, 1.16rem);
  --case-study-font-body: 0.98rem;
  --case-study-font-section-title: clamp(1.26rem, 1.65vw, 1.58rem);
  --case-study-font-block-title: clamp(1.02rem, 1.18vw, 1.18rem);
  --case-study-font-metric-value: clamp(1.18rem, 1.5vw, 1.34rem);
  --case-study-font-row-value: 1rem;
  --case-study-font-rail-title: 1.22rem;
  --case-study-line-tight: 1.14;
  --case-study-line-body: 1.58;
  --case-study-letter-tight: -0.035em;
  --case-study-label-tracking: 0.078em;

  --case-study-surface-page: #ffffff;
  --case-study-surface-hero: #ffffff;
  --case-study-surface-section: #ffffff;
  --case-study-surface-row: #fbfdff;
  --case-study-surface-row-strong: #f6f9ff;
  --case-study-surface-callout: #f7faff;
  --case-study-border: rgba(70, 91, 125, 0.16);
  --case-study-border-strong: rgba(26, 54, 93, 0.24);
  --case-study-text-strong: var(--pp-text-900);
  --case-study-text-body: var(--pp-text-800);
  --case-study-text-muted: var(--pp-text-700);
  --case-study-shadow-shell: 0 28px 80px rgba(15, 23, 42, 0.08);
  --case-study-shadow-card: 0 8px 22px rgba(15, 23, 42, 0.026);
  --case-study-shadow-hero: 0 18px 46px rgba(15, 23, 42, 0.05);

  --case-study-gradient-hero:
    radial-gradient(circle at 92% 0%, rgba(255, 255, 255, 0.98) 0, rgba(255, 255, 255, 0) 34%),
    linear-gradient(135deg, #ffffff 0%, #ffffff 48%, #f6f9ff 100%);
  --case-study-gradient-primary-action: linear-gradient(180deg, #315f99, #234a7d);
  --case-study-gradient-block-subtle: linear-gradient(180deg, #ffffff, #fbfdff);

  --case-study-tone-setup-accent: #536b8f;
  --case-study-tone-setup-surface: linear-gradient(180deg, #ffffff, #fbfdff);
  --case-study-tone-setup-border: rgba(83, 107, 143, 0.22);
  --case-study-tone-structure-accent: #234a7d;
  --case-study-tone-structure-surface: linear-gradient(180deg, #ffffff, #f8fbff);
  --case-study-tone-structure-border: rgba(35, 74, 125, 0.24);
  --case-study-tone-timeline-accent: #3d638e;
  --case-study-tone-timeline-surface: linear-gradient(180deg, #ffffff, #f7fbff);
  --case-study-tone-timeline-border: rgba(61, 99, 142, 0.24);
  --case-study-tone-evidence-accent: #2f5f6f;
  --case-study-tone-evidence-surface: linear-gradient(180deg, #ffffff, #f8fcfc);
  --case-study-tone-evidence-border: rgba(47, 95, 111, 0.22);
  --case-study-tone-comparison-accent: #4d5f86;
  --case-study-tone-comparison-surface: linear-gradient(180deg, #ffffff, #fafcff);
  --case-study-tone-comparison-border: rgba(77, 95, 134, 0.24);
  --case-study-tone-takeaway-accent: #1d3878;
  --case-study-tone-takeaway-surface:
    radial-gradient(circle at 0 0, rgba(238, 244, 255, 0.78), rgba(255, 255, 255, 0) 34%),
    #ffffff;
  --case-study-tone-takeaway-border: rgba(26, 54, 93, 0.26);
  --case-study-tone-guidance-accent: #6a5b46;
  --case-study-tone-guidance-surface: linear-gradient(180deg, #ffffff, #fdfbf7);
  --case-study-tone-guidance-border: rgba(106, 91, 70, 0.18);
  --case-study-tone-boundary-accent: #5a6475;
  --case-study-tone-boundary-surface: linear-gradient(180deg, #ffffff, #f8fafc);
  --case-study-tone-boundary-border: rgba(90, 100, 117, 0.22);
  --case-study-tone-action-accent: #1d3878;
  --case-study-tone-action-surface: linear-gradient(180deg, #ffffff, #f7faff);
  --case-study-tone-action-border: rgba(26, 54, 93, 0.26);

  --case-study-block-accent: var(--pp-brand-700);
  --case-study-block-surface: var(--case-study-gradient-block-subtle);
  --case-study-block-border: var(--case-study-border);
  --case-study-block-callout-bg: var(--case-study-surface-callout);

  /* Legacy compact comparison aliases delegate to platform visualization roles. */
  --case-study-chart-primary: var(--pp-viz-series-primary);
  --case-study-chart-baseline: var(--pp-viz-series-baseline);
  --case-study-chart-alternative: var(--pp-viz-series-alternative);
  --case-study-chart-positive: var(--pp-viz-series-positive);
  --case-study-chart-negative: var(--pp-viz-series-negative);
  --case-study-chart-neutral: var(--pp-viz-series-neutral);
  --case-study-chart-tradeoff: var(--pp-viz-series-tradeoff);
  --case-study-chart-track: var(--pp-viz-track);
}

.case-study-template[data-case-visual-tone="setup"],
.case-study-template [data-case-visual-tone="setup"] {
  --case-study-block-accent: var(--case-study-tone-setup-accent);
  --case-study-block-surface: var(--case-study-tone-setup-surface);
  --case-study-block-border: var(--case-study-tone-setup-border);
}

.case-study-template[data-case-visual-tone="structure"],
.case-study-template [data-case-visual-tone="structure"] {
  --case-study-block-accent: var(--case-study-tone-structure-accent);
  --case-study-block-surface: var(--case-study-tone-structure-surface);
  --case-study-block-border: var(--case-study-tone-structure-border);
}

.case-study-template[data-case-visual-tone="timeline"],
.case-study-template [data-case-visual-tone="timeline"] {
  --case-study-block-accent: var(--case-study-tone-timeline-accent);
  --case-study-block-surface: var(--case-study-tone-timeline-surface);
  --case-study-block-border: var(--case-study-tone-timeline-border);
}

.case-study-template[data-case-visual-tone="evidence"],
.case-study-template [data-case-visual-tone="evidence"] {
  --case-study-block-accent: var(--case-study-tone-evidence-accent);
  --case-study-block-surface: var(--case-study-tone-evidence-surface);
  --case-study-block-border: var(--case-study-tone-evidence-border);
}

.case-study-template[data-case-visual-tone="comparison"],
.case-study-template [data-case-visual-tone="comparison"] {
  --case-study-block-accent: var(--case-study-tone-comparison-accent);
  --case-study-block-surface: var(--case-study-tone-comparison-surface);
  --case-study-block-border: var(--case-study-tone-comparison-border);
}

.case-study-template[data-case-visual-tone="takeaway"],
.case-study-template [data-case-visual-tone="takeaway"] {
  --case-study-block-accent: var(--case-study-tone-takeaway-accent);
  --case-study-block-surface: var(--case-study-tone-takeaway-surface);
  --case-study-block-border: var(--case-study-tone-takeaway-border);
}

.case-study-template[data-case-visual-tone="guidance"],
.case-study-template [data-case-visual-tone="guidance"] {
  --case-study-block-accent: var(--case-study-tone-guidance-accent);
  --case-study-block-surface: var(--case-study-tone-guidance-surface);
  --case-study-block-border: var(--case-study-tone-guidance-border);
}

.case-study-template[data-case-visual-tone="boundary"],
.case-study-template [data-case-visual-tone="boundary"] {
  --case-study-block-accent: var(--case-study-tone-boundary-accent);
  --case-study-block-surface: var(--case-study-tone-boundary-surface);
  --case-study-block-border: var(--case-study-tone-boundary-border);
}

.case-study-template[data-case-visual-tone="action"],
.case-study-template [data-case-visual-tone="action"] {
  --case-study-block-accent: var(--case-study-tone-action-accent);
  --case-study-block-surface: var(--case-study-tone-action-surface);
  --case-study-block-border: var(--case-study-tone-action-border);
}

.case-study-template.mortgage-case-study {
  background: var(--case-study-surface-page);
  box-shadow: var(--case-study-shadow-shell);
}

.case-study-template .mortgage-case-study__hero {
  border-color: var(--case-study-border-strong);
  background: var(--case-study-gradient-hero);
  box-shadow: var(--case-study-shadow-hero);
}

.case-study-template .mortgage-case-study__hero h1 {
  color: var(--case-study-text-strong);
  font-size: var(--case-study-font-h1);
  line-height: var(--case-study-line-tight);
  letter-spacing: var(--case-study-letter-tight);
}

.case-study-template .case-brief-question p {
  font-size: var(--case-study-font-subtitle);
  line-height: 1.38;
}

.case-study-template .case-brief-answer p,
.case-study-template .case-section p,
.case-study-template .case-rail-card p {
  color: var(--case-study-text-body);
  font-size: var(--case-study-font-body);
  line-height: var(--case-study-line-body);
}

.case-study-template .case-section,
.case-study-template .case-rail-card,
.case-study-template .case-exhibit {
  border-color: var(--case-study-block-border, var(--case-study-border));
  background: var(--case-study-block-surface, var(--case-study-surface-section));
  box-shadow: var(--case-study-shadow-card);
}

.case-study-template .case-section-kicker,
.case-study-template .case-mini-label,
.case-study-template .case-brief-question span,
.case-study-template .case-brief-answer span,
.case-study-template .case-headline-card dt,
.case-study-template .case-exhibit__header span {
  color: var(--case-study-block-accent, var(--pp-brand-900));
  font-size: var(--case-study-font-label);
  font-weight: 900;
  letter-spacing: var(--case-study-label-tracking);
  text-transform: uppercase;
}

.case-study-template .case-section h2 {
  color: var(--case-study-text-strong);
  font-size: var(--case-study-font-section-title);
  line-height: 1.18;
  letter-spacing: -0.024em;
}

.case-study-template .case-rail-card h2 {
  color: var(--case-study-text-strong);
  font-size: var(--case-study-font-rail-title);
  line-height: 1.2;
  letter-spacing: -0.018em;
}

.case-study-template .case-exhibit__header h3,
.case-study-template .case-section h3,
.case-study-template .case-rail-card h3 {
  color: var(--case-study-text-strong);
  font-size: var(--case-study-font-block-title);
  line-height: 1.22;
  letter-spacing: -0.014em;
}

.case-study-template .case-headline-card {
  border-color: var(--case-study-border-strong);
  background: var(--case-study-surface-hero);
}

.case-study-template .case-headline-card div,
.case-study-template .case-fact,
.case-study-template .case-brief-item,
.case-study-template .case-question-grid section,
.case-study-template .case-evidence-table section,
.case-study-template .case-visual-list div,
.case-study-template .case-waterfall__step,
.case-study-template .case-comparison-matrix__card {
  border-color: var(--case-study-block-border, var(--case-study-border));
  background: var(--case-study-surface-row);
}

.case-study-template .case-question-grid section {
  align-content: start;
}

.case-study-template .case-headline-card dd {
  font-size: var(--case-study-font-metric-value);
  line-height: 1.12;
}

.case-study-template .case-exhibit__callout {
  border-color: var(--case-study-block-border);
  border-left-color: var(--case-study-block-accent);
  background: var(--case-study-block-callout-bg);
}

.case-study-template .case-timeline__term,
.case-study-template .case-timeline__marker {
  background: var(--case-study-block-accent);
}

.case-study-template .case-timeline__track,
.case-study-template .case-bar-compare__track {
  background: var(--case-study-chart-track);
}

.case-study-template .case-bar-compare__track span {
  background: var(--case-study-chart-neutral);
}

.case-study-template .case-bar-compare__track span[data-case-series-role="primary"] {
  background: var(--case-study-chart-primary);
}

.case-study-template .case-bar-compare__track span[data-case-series-role="baseline"] {
  background: var(--case-study-chart-baseline);
}

.case-study-template .case-bar-compare__track span[data-case-series-role="alternative"] {
  background: var(--case-study-chart-alternative);
}

.case-study-template .case-bar-compare__track span[data-case-series-role="positive"] {
  background: var(--case-study-chart-positive);
}

.case-study-template .case-bar-compare__track span[data-case-series-role="negative"] {
  background: var(--case-study-chart-negative);
}

.case-study-template .case-bar-compare__track span[data-case-series-role="neutral"] {
  background: var(--case-study-chart-neutral);
}

.case-study-template .case-bar-compare__track span[data-case-series-role="tradeoff"] {
  background: var(--case-study-chart-tradeoff);
}

.case-study-template .case-study-action--primary,
.case-study-template .case-rail-card--cta a,
.case-study-template .case-action-link.is-primary {
  background: var(--case-study-gradient-primary-action);
}

.case-study-template .case-action-band {
  border-color: var(--case-study-tone-action-border);
  background: var(--case-study-tone-action-surface);
}

.case-study-card {
  border-color: var(--case-study-border);
  background: var(--case-study-surface-section);
}

.case-study-card--featured {
  border-color: var(--pp-brand-700);
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.04);
}

.case-study-card__title {
  font-size: var(--case-study-font-card-title);
  line-height: 1.24;
}

@media (max-width: 720px) {
  .case-study-template,
  .case-study-card,
  .case-study-grid {
    --case-study-font-label: 0.68rem;
    --case-study-font-h1: clamp(1.46rem, 7vw, 1.88rem);
    --case-study-font-subtitle: clamp(1rem, 4.7vw, 1.14rem);
    --case-study-font-body: 0.94rem;
    --case-study-font-section-title: clamp(1.12rem, 5.4vw, 1.38rem);
    --case-study-font-block-title: 1rem;
    --case-study-font-rail-title: 1.05rem;
    --case-study-font-metric-value: clamp(1.05rem, 5.8vw, 1.22rem);
    --case-study-line-body: 1.55;
    --case-study-shadow-card: none;
  }

  .case-study-template .mortgage-case-study__hero h1 {
    font-size: var(--case-study-font-h1) !important;
    line-height: 1.12 !important;
  }

  .case-study-template .case-section h2 {
    font-size: var(--case-study-font-section-title) !important;
    line-height: 1.18 !important;
  }

  .case-study-template .case-section h3,
  .case-study-template .case-exhibit__header h3 {
    font-size: var(--case-study-font-block-title) !important;
  }

  .case-study-template .case-section p,
  .case-study-template .case-section-intro,
  .case-study-template .case-exhibit__header p,
  .case-study-template .case-exhibit__callout {
    font-size: var(--case-study-font-body) !important;
    line-height: var(--case-study-line-body) !important;
  }

  .case-study-template .case-headline-card dd {
    font-size: var(--case-study-font-metric-value) !important;
  }

  .case-study-template .case-section,
  .case-study-template .case-exhibit,
  .case-study-template .case-headline-card {
    border-color: var(--case-study-block-border, var(--case-study-border)) !important;
  }
}

/* --------------------------------------------------------------------------
   Platform Case Study Mobile Containment Contract
   --------------------------------------------------------------------------
   Scope:
   - Shared mobile de-nesting rules for all case-study pages using the
     case-study-template + case-section framework.
   - Future sections choose a containment mode with data-case-mobile-containment.
   - Future block components remain eligible by exposing data-case-block and
     using shared section/block classes.
   - This stays in case-study.css and never in tool-shell.css.

   Mobile containment modes:
   - section-owned: the section is the only full card; prose-only children
     flatten into divider rows.
   - block-owned: the section wrapper flattens; shared analytical blocks own
     the visible surfaces.
   - child-owned: the section wrapper flattens; repeated child cards own the
     visible surfaces.
-------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .case-study-template {
    --case-study-mobile-divider: rgba(70, 91, 125, 0.13);
    --case-study-mobile-section-x: 15px;
    --case-study-mobile-section-y: 16px;
    --case-study-mobile-flat-row-y: 12px;
  }

  .case-study-template.mortgage-case-study {
    gap: 18px !important;
    padding: 0 !important;
    overflow-x: hidden !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .case-study-template .case-section {
    padding: var(--case-study-mobile-section-y) var(--case-study-mobile-section-x) !important;
  }

  .case-study-template .case-section[data-case-mobile-containment="block-owned"],
  .case-study-template .case-section[data-case-mobile-containment="child-owned"] {
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .case-study-template .case-section[data-case-mobile-containment="block-owned"] > .case-section__inner > :where(.case-section-kicker, h2, .case-section-intro),
  .case-study-template .case-section[data-case-mobile-containment="child-owned"] > .case-section__inner > :where(.case-section-kicker, h2, .case-section-intro) {
    padding-inline: 2px !important;
  }

  .case-study-template .case-section[data-case-mobile-containment="block-owned"] > .case-section__inner > .case-section-intro,
  .case-study-template .case-section[data-case-mobile-containment="child-owned"] > .case-section__inner > .case-section-intro {
    max-width: 100% !important;
  }

  .case-study-template .case-section[data-case-mobile-containment="block-owned"] .case-exhibit-stack,
  .case-study-template .case-section[data-case-mobile-containment="child-owned"] .case-meaning-list,
  .case-study-template .case-section[data-case-mobile-containment="child-owned"] .case-comparison-matrix__cards {
    gap: 12px !important;
  }

  .case-study-template .case-section[data-case-mobile-containment="section-owned"] :where(
    .case-brief-copy,
    .case-evidence-list,
    .case-question-grid,
    .case-reveal-strip
  ) {
    gap: 0 !important;
  }

  .case-study-template .case-section[data-case-mobile-containment="section-owned"] :where(
    .case-brief-item,
    .case-evidence-list__group,
    .case-question-grid > section,
    .case-reveal-strip > span,
    .case-action-band
  ) {
    padding: var(--case-study-mobile-flat-row-y) 0 !important;
    border: 0 !important;
    border-top: 1px solid var(--case-study-mobile-divider) !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .case-study-template .case-section[data-case-mobile-containment="section-owned"] :where(
    .case-brief-item:first-child,
    .case-evidence-list__group:first-child,
    .case-question-grid > section:first-child,
    .case-reveal-strip > span:first-child,
    .case-action-band:first-of-type
  ) {
    padding-top: 0 !important;
    border-top: 0 !important;
  }

  .case-study-template .case-section[data-case-mobile-containment="section-owned"] :where(
    .case-brief-item:last-child,
    .case-evidence-list__group:last-child,
    .case-question-grid > section:last-child,
    .case-reveal-strip > span:last-child,
    .case-action-band:last-child
  ) {
    padding-bottom: 0 !important;
  }

  .case-study-template .case-question-grid > section {
    align-content: start !important;
  }

  .case-study-template .case-question-grid > section ul {
    margin-top: 2px !important;
  }

  .case-study-template .case-reveal-strip > span {
    display: block !important;
    color: var(--pp-text-900) !important;
  }

  .case-study-template .case-action-band {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    align-items: stretch !important;
  }

  .case-study-template .case-action-band__links {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  .case-study-template .case-evidence-list__group h3 {
    margin-bottom: 8px !important;
  }

  .case-study-template .case-evidence-list__group dl {
    margin: 0 !important;
  }
}

.case-study-template .case-section__inner {
  min-width: 0;
}

/* --------------------------------------------------------------------------
   Platform Case Study Mobile Surface Contract
   --------------------------------------------------------------------------
   Scope:
   - Separates semantic page chapters from the mobile canvas without restoring
     nested-card width loss.
   - Every shared CaseStudySection receives card, chapter-band, or canvas from
     the section presentation registry.
   - The outer section owns the surface; case-section__inner owns alignment.
   - Desktop remains unchanged.

   Mobile surface roles:
   - card: one bounded section surface.
   - chapter-band: full-width square chapter surface with one responsive inner
     gutter, subtle top/bottom hairlines, no shadow, and no side border.
   - canvas: no section perimeter; governed child blocks own presentation.
-------------------------------------------------------------------------- */
@media (max-width: 720px) {
  .case-study-template {
    --case-study-mobile-chapter-surface:
      linear-gradient(180deg, rgba(248, 250, 252, 0.99), rgba(243, 247, 251, 0.99));
    --case-study-mobile-chapter-border: rgba(70, 91, 125, 0.12);
    --case-study-mobile-chapter-bleed: var(--pp-page-pad-x, 16px);
    --case-study-mobile-chapter-gutter: var(--pp-page-pad-x, 16px);
    --case-study-mobile-chapter-y: 20px;
  }

  .pp-page:has(.case-study-template) {
    overflow-x: clip;
  }

  .case-study-template:has(.case-section[data-case-mobile-surface="chapter-band"]) {
    overflow-x: visible !important;
  }

  .case-study-template .case-section[data-case-mobile-surface="card"] {
    border-color: var(--case-study-block-border, var(--case-study-border)) !important;
    background: var(--case-study-block-surface, var(--case-study-surface-section)) !important;
  }

  .case-study-template .case-section[data-case-mobile-surface="canvas"] {
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .case-study-template .case-section[data-case-mobile-surface="chapter-band"] {
    box-sizing: border-box;
    width: auto;
    max-width: none;
    justify-self: stretch;
    margin-inline: calc(0px - var(--case-study-mobile-chapter-bleed)) !important;
    padding: 0 !important;
    overflow: clip !important;
    border: 0 !important;
    border-top: 1px solid var(--case-study-mobile-chapter-border) !important;
    border-bottom: 1px solid var(--case-study-mobile-chapter-border) !important;
    border-radius: 0 !important;
    background: var(--case-study-mobile-chapter-surface) !important;
    box-shadow: none !important;
  }

  .case-study-template .case-section[data-case-mobile-surface="chapter-band"] > .case-section__inner {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: var(--case-study-mobile-chapter-y) var(--case-study-mobile-chapter-gutter);
  }

  .case-study-template .case-section[data-case-mobile-surface="chapter-band"] > .case-section__inner > :where(
    .case-section-kicker,
    h2,
    .case-section-intro,
    .case-exhibit-stack
  ) {
    width: 100%;
    max-width: 100%;
  }

  .case-study-template .case-section[data-case-mobile-surface="chapter-band"] > .case-section__inner > :where(
    .case-section-kicker,
    h2,
    .case-section-intro
  ) {
    padding-inline: 0 !important;
  }
}

/* Platform chart surface adapter
   --------------------------------------------------------------------------
   Case-study blocks own exhibit framing only. Chart geometry, axes, semantic
   series roles, responsive behavior, and accessible fallbacks are owned by
   /styles/visualization.css and src/components/visualization/. */
.case-study-chart-adapter {
  width: 100%;
  min-width: 0;
}

.case-next-step[data-case-block="next-step"] {
  width: 100%;
}
/* --------------------------------------------------------------------------
   Reusable Featured Case Study Surface
   --------------------------------------------------------------------------
   - One editorial boundary for registry-selected tool/category placements.
   - The placement shell owns spacing only; this component owns its surface.
   - Evidence themes remain supporting metadata rather than a nested card.
-------------------------------------------------------------------------- */
.featured-case-study {
  min-width: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--pp-border-subtle) 86%, transparent);
  border-radius: var(--pp-radius-lg);
  background:
    linear-gradient(
      135deg,
      color-mix(in srgb, var(--pp-brand-100) 30%, var(--pp-surface-base)) 0%,
      var(--pp-surface-base) 48%
    ),
    var(--pp-surface-base);
  box-shadow: 0 14px 34px color-mix(in srgb, var(--pp-text-900) 7%, transparent);
}

.featured-case-study__body {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(16rem, 0.65fr);
  gap: 1.35rem 2rem;
  min-width: 0;
  padding: clamp(1.35rem, 2.5vw, 2rem);
}

.featured-case-study__body--empty {
  grid-template-columns: minmax(0, 1fr);
}

.featured-case-study__header,
.featured-case-study__main,
.featured-case-study__evidence,
.featured-case-study__actions {
  min-width: 0;
}

.featured-case-study__header {
  grid-column: 1 / -1;
  display: grid;
  gap: 0.65rem;
}

.featured-case-study__meta,
.featured-case-study__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
}

.featured-case-study__meta span,
.featured-case-study__tags span {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.25rem 0.55rem;
  border: 1px solid color-mix(in srgb, var(--pp-brand-700) 16%, var(--pp-border-subtle));
  border-radius: 999px;
  background: color-mix(in srgb, var(--pp-brand-100) 34%, var(--pp-surface-base));
  color: var(--pp-brand-900);
  font-size: 0.75rem;
  font-weight: 750;
  line-height: 1.15;
}

.featured-case-study h2,
.featured-case-study h3,
.featured-case-study p {
  margin: 0;
}

.featured-case-study h2 {
  max-width: 26ch;
  color: var(--pp-text-900);
  font-size: clamp(1.6rem, 2.35vw, 2.15rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.025em;
}

.featured-case-study h3 {
  color: var(--pp-brand-900);
  font-size: clamp(1.05rem, 1.3vw, 1.28rem);
  font-weight: 800;
  line-height: 1.25;
}

.featured-case-study__main {
  grid-column: 1;
  grid-row: 2 / span 2;
  display: grid;
  align-content: start;
  gap: 0.85rem;
}

.featured-case-study__question {
  padding-top: 0.9rem;
  border-top: 1px solid color-mix(in srgb, var(--pp-border-subtle) 78%, transparent);
  color: var(--pp-text-900);
  font-size: clamp(1.02rem, 1.15vw, 1.16rem);
  font-weight: 800;
  line-height: 1.48;
}

.featured-case-study__question a {
  color: inherit;
  text-decoration: none;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.featured-case-study__question a:hover,
.featured-case-study__question a:focus-visible {
  color: var(--pp-brand-900);
  text-decoration: underline;
}

.featured-case-study__thesis,
.featured-case-study__summary {
  color: var(--pp-text-700);
  font-size: 0.96rem;
  line-height: 1.62;
}

.featured-case-study__thesis {
  color: var(--pp-text-800);
  font-weight: 650;
}

.featured-case-study__evidence {
  grid-column: 2;
  grid-row: 2;
  align-self: start;
  display: grid;
  gap: 0.75rem;
  padding-left: 1.4rem;
  border-left: 1px solid color-mix(in srgb, var(--pp-border-subtle) 80%, transparent);
}

.featured-case-study__evidence-title {
  color: var(--pp-text-600);
  font-size: 0.7rem;
  font-weight: 850;
  letter-spacing: 0.075em;
  line-height: 1.15;
  text-transform: uppercase;
}

.featured-case-study__actions {
  grid-column: 2;
  grid-row: 3;
  align-self: end;
  display: grid;
  gap: 0.6rem;
  padding-left: 1.4rem;
}

.featured-case-study__actions a {
  display: inline-flex;
  min-height: 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0.7rem 0.9rem;
  border-radius: var(--pp-radius-sm);
  font-size: 0.86rem;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}

.featured-case-study__primary-action {
  border: 1px solid var(--pp-brand-900);
  background: var(--pp-brand-900);
  color: var(--pp-surface-base);
}

.featured-case-study__primary-action:hover,
.featured-case-study__primary-action:focus-visible {
  background: var(--pp-brand-700);
  border-color: var(--pp-brand-700);
}

.featured-case-study__secondary-action {
  color: var(--pp-brand-900);
}

.featured-case-study__secondary-action:hover,
.featured-case-study__secondary-action:focus-visible {
  text-decoration: underline;
}

@media (max-width: 767px) {
  .featured-case-study {
    box-shadow: none;
  }

  .featured-case-study__body {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.9rem;
    padding: 1.1rem 1rem;
  }

  .featured-case-study__header,
  .featured-case-study__main,
  .featured-case-study__evidence,
  .featured-case-study__actions {
    grid-column: 1;
    grid-row: auto;
  }

  .featured-case-study h2 {
    max-width: none;
    font-size: clamp(1.55rem, 7vw, 1.9rem);
  }

  .featured-case-study h3 {
    font-size: 1.02rem;
  }

  .featured-case-study__question,
  .featured-case-study__thesis,
  .featured-case-study__summary {
    font-size: var(--pp-mobile-readable-copy-size, 0.93rem);
    line-height: var(--pp-mobile-readable-copy-line-height, 1.58);
  }

  .featured-case-study__evidence {
    gap: 0.65rem;
    margin-top: 0.1rem;
    padding: 0.85rem 0 0;
    border-top: 1px solid color-mix(in srgb, var(--pp-border-subtle) 80%, transparent);
    border-left: 0;
  }

  .featured-case-study__actions {
    gap: 0.35rem;
    padding-left: 0;
  }
}