/* Illustrative reach, 2026-09-21. Paid social placement beside a clipping campaign at the same example
   budget. Brought over from the Base44 site at Levi's request. The figures are arithmetic from the example
   CPM ranges in docs/sources/comparison-cpm-assumptions.md; until that record carries a source the section
   stays publication-blocked (data-publish-blocker on the element). Shared by compare.html and the homepage. */
.reach { margin: 0 var(--pad); padding: var(--section-pad) clamp(1.5rem,4vw,4rem); border-radius: var(--radius-panel); background: var(--ink); color: var(--cream); }
.reach-head { max-width: 72ch; }
.reach-eyebrow { display: block; font-size: .8rem; letter-spacing: .01em; color: var(--magenta-on-ink); margin-bottom: 1.1rem; }
.reach h2 { font-size: var(--t-h2); } /* leading and tracking come from type.css, so the homepage and Compare copies match */
.reach h2 .land { background: linear-gradient(92deg, #a78bfa 0%, #f06595 46%, #fdba74 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.reach-intro { margin-top: 1.4rem; font-size: clamp(1rem,1.2vw,1.15rem); line-height: 1.5; color: var(--cream-2); max-width: 62ch; }
.reach-sides { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem,4vw,4rem); margin-top: clamp(2rem,4vw,3.5rem); padding-top: clamp(1.5rem,3vw,2.5rem); border-top: 1px solid rgba(244,239,232,.16); }
.reach-arm + .reach-arm { border-left: 1px solid rgba(244,239,232,.16); padding-left: clamp(1.5rem,4vw,4rem); }
.reach-label { display: block; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--cream-2); }
.reach-arm--clip .reach-label { color: var(--magenta-on-ink); }
.reach-budget { margin-top: 1.4rem; font-family: var(--display); font-weight: 500; font-size: clamp(2.2rem,3.6vw,3.8rem); line-height: 1; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.reach-budget span, .reach-result span { display: block; margin-top: .45rem; font-family: var(--sans); font-size: .85rem; letter-spacing: 0; color: var(--cream-2); }
.reach-result { margin-top: 1.2rem; font-family: var(--display); font-weight: 500; font-size: clamp(1.6rem,2.6vw,2.7rem); line-height: 1; letter-spacing: -.015em; color: var(--cream-2); font-variant-numeric: tabular-nums; }
.reach-arm--clip .reach-result { color: transparent; background: linear-gradient(92deg, #a78bfa 0%, #f06595 46%, #fdba74 100%); -webkit-background-clip: text; background-clip: text; width: max-content; max-width: 100%; }
.reach-arm--clip .reach-result span { color: var(--cream-2); background: none; -webkit-text-fill-color: var(--cream-2); }
.reach-arm ul { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: .55rem; }
.reach-arm li { position: relative; padding-left: 1.4rem; font-size: .95rem; line-height: 1.45; color: var(--cream-2); }
.reach-arm li::before { content: ""; position: absolute; left: 0; top: .7em; width: .75rem; height: 1px; background: rgba(244,239,232,.4); }
.reach-arm--clip li::before { background: var(--magenta); }
.reach-arm li.reach-last { color: var(--cream); font-weight: 600; }
.reach-notes { margin-top: clamp(1.5rem,3vw,2.5rem); padding-top: 1.5rem; border-top: 1px solid rgba(244,239,232,.16); display: grid; grid-template-columns: 1.2fr 1fr auto; gap: 1.5rem 3rem; align-items: start; }
.reach-takeaway { font-style: italic; font-size: 1rem; line-height: 1.5; color: var(--cream); max-width: 52ch; }
.reach-fine { font-size: .8rem; line-height: 1.55; color: var(--cream-2); max-width: 60ch; }
.reach-notes .link-plain { color: var(--cream); white-space: nowrap; }
.reach--home { margin-block: clamp(2rem,4vw,4rem); }
@media (max-width: 860px) {
  /* 2026-10-04 (Levi on his iPhone): the two arms stay side by side on a phone so the comparison reads at a
     glance, no swipe. Figures and bullets scale down to fit two columns at 390px; the copy is unchanged. */
  .reach { padding-inline: 1.1rem; }
  .reach-sides { gap: 1rem; }
  .reach-arm { min-width: 0; }
  .reach-arm + .reach-arm { padding-left: 1rem; }
  .reach-label { font-size: .68rem; letter-spacing: .04em; }
  .reach-budget { margin-top: 1rem; font-size: 1.75rem; }
  .reach-result { margin-top: .9rem; font-size: 1.2rem; line-height: 1.1; }
  .reach-budget span, .reach-result span { margin-top: .35rem; font-size: var(--t-note); }
  .reach-arm ul { margin-top: 1.1rem; gap: .5rem; }
  .reach-arm li { padding-left: 1rem; font-size: var(--t-note); line-height: 1.4; }
  .reach-arm li::before { width: .55rem; top: .6em; }
  .reach-notes { grid-template-columns: 1fr; }
}