@layer components {
  .result {
    font-size: 1.0625rem;
    line-height: var(--leading-normal);
  }
  :where(.result) :where(strong) { font-weight: 600; }
}

@layer modules {
  .result__inner { display: flex; flex-direction: column; gap: var(--space-md); padding-block: var(--space-md) 4.5rem; }
  .result .phase-timeline { margin-bottom: 0; }

  .result-hero { display: flex; flex-direction: column; gap: var(--space-xs); }
  .result-hero__phone { font-family: var(--xf-font-mono); font-size: clamp(2.25rem, 5vw, 3.75rem); font-weight: 600; line-height: 1; letter-spacing: -0.02em; }

  .result-layout { display: grid; grid-template-columns: minmax(0, 1fr); align-items: start; gap: var(--space-md); }

  .result-headline { display: flex; flex-direction: column; gap: 0.375rem; padding: var(--space-md); background: var(--xf-amber); }
  .result-headline__title { font-size: clamp(1.5rem, 3.4vw, 2.5rem); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
  .result-headline__details { font-size: 1rem; }

  .result-aside { display: flex; flex-direction: column; gap: 0.625rem; padding: var(--space-md); box-shadow: var(--xf-shadow-lg); }

  .purchase-card__prices { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem; }
  .purchase-card__anchor { color: var(--xf-ink-soft); font-size: 1.25rem; }
  .purchase-card__price { font-family: var(--xf-font-display); font-size: clamp(2.5rem, 6vw, 3.5rem); font-weight: 800; line-height: 0.9; letter-spacing: -0.03em; white-space: nowrap; }
  .purchase-card__list { display: flex; flex-direction: column; gap: 0.375rem; }
  .purchase-card__item { display: flex; align-items: flex-start; gap: 0.625rem; }
  .purchase-card__item--lead { font-weight: 600; }
  .purchase-card__check { flex: none; margin-top: 0.15em; color: var(--xf-green); }
  .purchase-card__note { color: var(--xf-ink-soft); font-size: var(--text-sm); }
  .purchase-card .btn--amber { padding: 0.75rem var(--space-sm); }
  .result .btn--amber { text-wrap: balance; }

  .result-details { display: flex; flex-direction: column; gap: var(--space-lg); min-width: 0; }

  /* NOTE: the phase broadcast replaces only #phase_indicator, so on an open page the not-found hint follows the indicator's web steps to leave. */
  .result:has(#phase_indicator.phase-timeline--compact) .not-found-card__hint,
  .result:has(#phase_indicator [data-phase=web_phone]:is(.phase-timeline__step--completed, .phase-timeline__step--failed)):has(#phase_indicator [data-phase=web_entities]:is(.phase-timeline__step--completed, .phase-timeline__step--failed)) .not-found-card__hint {
    display: none;
  }

  @media (min-width: 40rem) {
    .result__inner { gap: var(--space-xl); padding-top: var(--space-xl); }
    .result-hero { gap: var(--space-sm); }
    .result-layout { gap: var(--space-lg); }
    .result-headline { gap: var(--space-sm); padding: clamp(1.25rem, 4vw, 1.75rem); }
    .result-headline__details { font-size: 1.125rem; }
    .result-aside { gap: var(--space-md); padding: clamp(1.25rem, 4vw, 1.75rem); }
    .purchase-card__list { gap: 0.625rem; }
    .purchase-card .btn--amber { padding-block: var(--space-md); }
  }

  @media (min-width: 60rem) {
    .result-layout:has(> .result-aside) {
      grid-template-columns: minmax(0, 1fr) minmax(20rem, 23rem);
      grid-template-rows: auto 1fr;
      grid-template-areas: "headline aside" "details aside";
      column-gap: var(--space-xl);
    }
    .result-layout:has(> .result-aside) > .result-headline { grid-area: headline; }
    .result-layout:has(> .result-aside) > .result-details { grid-area: details; }
    .result-layout > .result-aside { position: sticky; top: calc(5rem + var(--space-lg)); grid-area: aside; }
  }

  .result-sticky-phone {
    position: sticky;
    bottom: 0;
    z-index: 10;
    padding: var(--space-sm) var(--gutter);
    background: var(--xf-ink);
    color: var(--xf-paper);
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
  }
}