/* The Build benefit: one dark editorial panel inside the paper Membership
 * section presenting the Coach Website and the CLUTCH Media Day as the two
 * halves of a single choice, rather than as separate products.
 * Motion is handled by the existing .has-motion / .motion-off switch.
 */
.web-inclusion{display:grid;gap:26px;margin-top:32px;padding:32px 24px 28px;color:var(--white);border:1px solid rgba(230,237,225,.14);background-color:var(--deep);background-image:radial-gradient(118% 88% at 86% 6%,rgba(213,175,89,.15),transparent 58%),linear-gradient(174deg,var(--panel),var(--deep));isolation:isolate}
.web-inclusion :focus-visible{outline-color:var(--gold)}
.web-inclusion .eyebrow{color:var(--gold);margin-bottom:13px}
.web-inclusion h3{font-size:clamp(1.55rem,6.4vw,2.05rem);line-height:1.07;letter-spacing:-.04em}
.web-inclusion-lead{margin-top:15px;max-width:58ch;font-size:.9375rem;line-height:1.65;color:#d7e2d6}
.web-inclusion-note{margin:0;max-width:74ch;font-size:.6875rem;line-height:1.7;color:var(--muted-dark)}

/* The two options carry equal weight: neither is a consolation prize. */
.build-options{display:grid;gap:30px}
.build-option{display:grid;gap:11px;align-content:start;padding-top:20px;border-top:1px solid rgba(230,237,225,.17)}
.build-option-label{margin:0;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--gold)}
.build-option h4{margin:0;font-size:clamp(1.15rem,3.6vw,1.4rem);font-weight:550;letter-spacing:-.025em;line-height:1.15;color:var(--white)}
.build-option>p{margin:0;font-size:.875rem;line-height:1.65;color:#d7e2d6}
.build-option-list{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:9px}
.build-option-list li{position:relative;padding-left:15px;font-size:.8125rem;line-height:1.6;color:#cfdccf}
.build-option-list li:before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-right:1.5px solid var(--gold);border-top:1.5px solid var(--gold);transform:rotate(45deg)}

.build-benefit-foot{display:grid;gap:15px;padding-top:21px;border-top:1px solid rgba(230,237,225,.17)}
.build-benefit-timing{margin:0;max-width:72ch;font-size:.875rem;line-height:1.65;color:#d7e2d6}
.build-benefit-foot .text-link{color:var(--gold);justify-self:start}

/* The delivered work itself: the coach site as built, and the Media Day on set */
.build-option-art{margin-bottom:6px;overflow:hidden;background:#0d2119;border:1px solid rgba(230,237,225,.14)}
.build-option-photo{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.has-motion .build-option-photo{transition:transform .9s var(--ease)}
.has-motion .build-option:hover .build-option-photo{transform:scale(1.022)}

@media (min-width:760px){
  .web-inclusion{padding:40px 36px 36px}
  .build-options{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px}
  .build-option{border-top-width:1px}
}
@media (min-width:1100px){
  .web-inclusion{gap:34px;margin-top:42px;padding:54px 50px 48px}
  .build-benefit-head{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);align-items:end;gap:46px}
  .build-benefit-head .eyebrow{grid-column:1;grid-row:1}
  .build-benefit-head h3{grid-column:1;grid-row:2}
  .build-benefit-head .web-inclusion-lead{grid-column:2;grid-row:2;margin-top:0}
  .web-inclusion-lead{font-size:1rem}
  .build-options{gap:58px}
  .build-option>p{font-size:.9375rem}
  .build-option-list li{font-size:.875rem}
  .build-benefit-foot{grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:14px 40px}
  .web-inclusion-note{font-size:.75rem}
}