@layer components {
  .main-content { padding-top: 5rem; }

  .hero { padding-block: var(--space-2xl) var(--space-3xl); }
  .hero__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-2xl); align-items: center; }
  .hero__intro { display: flex; flex-direction: column; gap: var(--space-lg); }

  .hero__title { font-size: clamp(2.75rem, 6vw, 4.75rem); line-height: 0.98; letter-spacing: -0.03em; text-wrap: balance; }
  .hero__highlight { display: inline-block; padding-inline: 0.75rem; border: var(--xf-border); border-radius: var(--xf-radius-sm); background: var(--xf-amber); box-shadow: var(--xf-shadow-md); transform: rotate(-1.5deg); }
  .hero__subtitle { max-width: 32.5rem; color: var(--xf-ink-soft); font-size: var(--text-lg); }

  .hero__trust { display: flex; flex-wrap: wrap; gap: 0.625rem 1.375rem; font-size: 0.9375rem; font-weight: 600; }
  .hero__trust-item { display: flex; align-items: center; gap: var(--space-sm); }
  .hero__trust-icon { color: var(--xf-green); }

  .sample-report { justify-self: center; width: 100%; max-width: 28.75rem; box-shadow: var(--xf-shadow-lg); }
  .sample-report__header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-sm) var(--space-md); padding: 0.875rem 1.125rem; border-bottom: var(--xf-border); }
  .sample-report__phone { font-weight: 600; }
  .sample-report__body { display: flex; flex-direction: column; gap: 0.875rem; padding: 1.125rem; }
  .sample-report__score { display: flex; align-items: center; gap: var(--space-md); padding: 0.875rem var(--space-md); border: var(--xf-border); border-radius: var(--xf-radius-sm); background: var(--xf-red-soft); }
  .sample-report__score-value { font-family: var(--xf-font-display); font-size: 2.75rem; font-weight: 800; line-height: 1; }
  .sample-report__score-text { display: flex; flex-direction: column; }
  .sample-report__score-label { color: var(--xf-ink-soft); font-size: var(--text-sm); }
  .sample-report__rows { display: flex; flex-direction: column; gap: 0.75rem; }
  .sample-report__row { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-bottom: 0.75rem; border-bottom: 2px dashed var(--xf-ink); }
  .sample-report__row:last-child { padding-bottom: 0; border-bottom: 0; }
  .sample-report__row dd { font-weight: 600; }

  @media (min-width: 64rem) {
    .hero { padding-block: 4.5rem 5rem; }
    .hero__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3.5rem; }
    .sample-report { box-shadow: var(--xf-shadow-xl); transform: rotate(1.5deg); }
  }
}