/* Stage 3 Phase 2: shared by /services and the three track pages. Ported from the Stage 2 prototype (site_src/pages_services.py). */

.cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px)}
@media (max-width:860px){.cols{grid-template-columns:1fr}}
.sec-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:20px clamp(28px,5vw,72px);align-items:center;margin-bottom:44px}
.sec-head .lead{margin:0}
@media (max-width:860px){.sec-head{grid-template-columns:1fr}}
.outcome{background:var(--green-tint);border-radius:16px;padding:clamp(28px,4vw,48px);display:grid;grid-template-columns:auto minmax(0,1fr);gap:16px 32px;align-items:start}
.outcome .tag{margin-top:6px}
.outcome p.big{font-family:var(--f-voice);font-style:italic;font-size:clamp(26px,3vw,40px);line-height:1.12;color:var(--green-deep)}
.outcome ul{margin-top:18px}
.outcome li::before{color:var(--green)}
@media (max-width:700px){.outcome{grid-template-columns:1fr}}
.proof{border-top:2px solid var(--ink);padding-top:28px;display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,2fr);gap:16px 48px}
.proof+.proof{margin-top:40px}
.proof h3{font-family:var(--f-voice);font-style:italic;font-weight:400;font-size:clamp(24px,2.6vw,34px);line-height:1.12}
.proof dl{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px 20px;margin:16px 0 0;font-size:16px}
.proof dt{font-weight:700;color:var(--grey);font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding-top:3px}
.proof dd{margin:0}
.proof .ex{margin-top:14px;font-size:17px;max-width:40em}
.proof>div>.note{margin-top:0}
@media (max-width:760px){.proof{grid-template-columns:1fr}.proof dl{grid-template-columns:1fr}.proof dt{padding-top:8px}}
.reserved{border:2px dashed var(--line-2);border-radius:16px;padding:clamp(28px,4vw,48px);background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(240,236,228,.55) 14px 28px)}
.reserved h3{font-family:var(--f-voice);font-style:italic;font-weight:400;font-size:clamp(24px,2.6vw,34px)}
.reading{display:grid;gap:0;border-top:1px solid var(--line-2)}
.reading a{display:grid;grid-template-columns:120px minmax(0,1fr);gap:8px 24px;padding:18px 0;border-bottom:1px solid var(--line-2);text-decoration:none;align-items:baseline}
.reading a:hover b{color:var(--blue)}
.reading .t{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--cat,var(--ember-deep))}
.reading b{font-weight:700;font-size:17px}
@media (max-width:700px){.reading a{grid-template-columns:1fr}}
/* Often combined with: its own Lighter Sand band; heading sits close to the content */
.comb .h2{margin:16px 0 24px;max-width:18em}
.combine{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px)}
.combine h3{font-weight:800;font-size:15px;letter-spacing:.06em;text-transform:uppercase;margin-bottom:14px}
.combine .tl a{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line-2);text-decoration:none;font-weight:800;font-size:22px;letter-spacing:-.02em}
.combine .tl a small{font-weight:500;font-size:15px;color:var(--grey);letter-spacing:0;text-align:right}
.combine .tl a:hover{color:var(--blue)}
.combine p{font-size:16px}
.engage{margin-top:24px;font-size:16px;padding:18px 20px;border-left:3px solid var(--blue);background:var(--sand-2)}
@media (max-width:860px){.combine{grid-template-columns:1fr}}

/* "What you get at the end" slot under each service (staging only until Weeb supplies the deliverables) */
.svc .note,.stage-r .note,.idx .note{margin-top:14px}