.proof-preview{padding-bottom:70px}
.preview-hero{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:64px;align-items:center;padding-block:70px 62px}
.preview-copy h1{font-size:clamp(3rem,5.7vw,5.45rem);line-height:1.04;letter-spacing:-.07em;max-width:11ch}
.preview-copy .lead{margin-top:26px;max-width:42ch}
.preview-art{margin:0;min-width:0;aspect-ratio:1.48;display:grid;place-items:center;padding:20px;background-color:var(--surface)}
.wireframe{width:100%;max-width:430px;height:auto;overflow:visible}
.wire-ink{fill:none;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.wire-ink{stroke:#fff;stroke-width:2.7}
.hero-wide{padding:50px 42px;gap:38px;margin-block:52px 55px;background-color:var(--surface)}
.hero-wide .preview-art{background:transparent;padding:0}
.hero-wide .preview-copy h1{font-size:clamp(3rem,5.2vw,4.8rem)}
.preview-scenarios{border-top:3px solid transparent;border-image:var(--action-triplet) 1;padding-top:32px}
.preview-scenarios>header{display:flex;justify-content:space-between;align-items:baseline;gap:25px;margin-bottom:29px}
.preview-scenarios h2{font-size:2.3rem}
.preview-scenarios>header p{font-size:.8rem}
.preview-case{border-top:1px solid var(--line)}
.preview-case:last-child{border-bottom:1px solid var(--line)}
.preview-case summary{display:flex;align-items:center;justify-content:space-between;gap:25px;min-height:76px;padding:20px 0;list-style:none}
.preview-case summary::-webkit-details-marker{display:none}
.preview-case summary h3{font-size:1.2rem;line-height:1.35;font-weight:550;letter-spacing:-.02em}
.expand{font-size:1.7rem;font-weight:300;flex:none;line-height:1}
.preview-case[open] .expand{transform:rotate(45deg)}
.preview-detail{padding:4px 0 30px;max-width:1020px}
.preview-problem{font-size:1rem;max-width:68ch;margin-bottom:24px}
.preview-detail dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 44px;margin:0}
.preview-detail dt{font-size:.9rem;font-weight:650;margin-bottom:8px}
.preview-detail dd{color:var(--muted);font-size:.95rem;line-height:1.65;margin:0}
.preview-detail .sp-service-note{margin-top:16px;font-size:.95rem;line-height:1.65;max-width:85ch}
.preview-detail .sp-service-link{margin-top:0}
.preview-detail .sp-references{display:flex;flex-wrap:wrap;gap:6px 20px;margin-top:0;font-size:.8rem}
@media(max-width:1000px){.preview-hero{gap:35px}.hero-wide{padding:34px}.preview-copy h1{font-size:clamp(3rem,6vw,4.5rem)}.hero-wide .preview-copy h1{font-size:clamp(2.8rem,5.5vw,4rem)}}
@media(max-width:780px){.preview-hero{grid-template-columns:1fr;gap:30px;padding-block:42px}.preview-copy h1{font-size:clamp(2.8rem,10vw,4rem);max-width:13ch}.preview-copy .lead{font-size:1.05rem;max-width:43ch}.preview-art{width:100%;max-width:580px;justify-self:center;padding:12px}.hero-wide{margin-block:28px 34px;padding:28px;gap:24px}.hero-wide .preview-copy h1{font-size:clamp(2.4rem,9vw,3.5rem)}.preview-scenarios>header{display:block;margin-bottom:22px}.preview-scenarios h2{font-size:1.9rem}.preview-scenarios>header p{margin-top:12px}.preview-case summary{min-height:72px}.preview-case summary h3{font-size:1.08rem}.wireframe{max-width:400px}}

.proof-site .preview-case{scroll-margin-top:28px}
.proof-site .preview-case summary:hover h3{text-decoration:underline;text-underline-offset:5px}
.proof-site .preview-problem{margin-top:0}
.proof-site .sp-references a{min-height:44px;display:inline-flex;align-items:center;max-width:100%}
.proof-site .sp-closing{display:flex;align-items:center;justify-content:space-between;gap:30px;padding:36px;margin-top:64px}
.proof-site .sp-closing h2{font-size:clamp(1.8rem,3vw,2.8rem);max-width:23ch}
.proof-site .sp-closing p{margin-top:14px;font-size:1rem}
.proof-site .sp-closing>.button{flex:none;max-width:100%;text-align:left}
@media(max-width:780px){.proof-site .sp-closing{align-items:flex-start;flex-direction:column;padding:28px;margin-top:48px}}

.proof-site .sp-boundary{margin-top:24px;font-size:.95rem;line-height:1.65;max-width:85ch}
@media(max-width:780px){.proof-site .preview-detail dl{grid-template-columns:1fr;gap:20px}}

.proof-site .sp-link-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 28px;margin-top:20px}
.proof-site .sp-references a{font-size:.8rem;font-weight:400;color:var(--muted)}

/* Share the illustrated preview at every width. A single card column keeps
 * native disclosures in reading order without empty cells beside open cards. */
  .proof-site .preview-case{border:1px solid #3b3b3b;margin-bottom:14px;background:#171717}
  .proof-site .preview-case summary{display:grid;grid-template-columns:minmax(0,1fr) 48px;grid-template-rows:auto auto auto;gap:0 16px;padding:22px;align-items:start}
  .proof-site .preview-case summary h3{grid-column:1;grid-row:1;font-size:1.25rem;line-height:1.25;align-self:center}
  .proof-site .sp-mobile-illustration{display:block;grid-column:2;grid-row:1;width:48px;height:48px;color:#fff}
  .proof-site .sp-mobile-teaser{display:block;grid-column:1/-1;grid-row:2;color:#c5c5c5;font-size:.9rem;line-height:1.6;margin-top:16px}
  .proof-site .sp-mobile-cue{display:block;grid-column:1;grid-row:3;align-self:center;font-size:.8rem;font-weight:650;margin-top:20px}
  .proof-site .sp-mobile-cue .when-open{display:none}
  .proof-site .preview-case[open] .when-open{display:inline}
  .proof-site .preview-case[open] .when-closed{display:none}
  .proof-site .preview-case summary .expand{grid-column:2;grid-row:3;justify-self:end;align-self:center;margin-top:20px}
  .proof-site .preview-case[open] summary{border-bottom:1px solid #3b3b3b}
  .proof-site .preview-case[open] .preview-problem{display:none}
  .proof-site .preview-detail{padding:24px 22px}
  .proof-site .preview-case summary:hover h3{text-decoration:none}
@media(min-width:781px){
  .proof-site .preview-case{margin-bottom:18px}
  .proof-site .preview-case summary{padding:28px;column-gap:20px}
  .proof-site .preview-case summary h3{font-size:1.4rem}
  .proof-site .sp-mobile-teaser{font-size:.95rem}
  .proof-site .preview-detail{padding:26px 28px}
}
@media(min-width:1001px){
  .proof-site .preview-case summary{grid-template-columns:56px minmax(200px,.9fr) minmax(0,1.1fr) 28px;grid-template-rows:auto auto;gap:12px 28px;align-items:center}
  .proof-site .sp-mobile-illustration{grid-column:1;grid-row:1/3;width:56px;height:56px}
  .proof-site .preview-case summary h3{grid-column:2;grid-row:1;font-size:1.35rem}
  .proof-site .sp-mobile-teaser{grid-column:3;grid-row:1/3;margin-top:0}
  .proof-site .sp-mobile-cue{grid-column:2;grid-row:2;margin-top:0}
  .proof-site .preview-case summary .expand{grid-column:4;grid-row:1/3;margin-top:0}
}