/* Case study pages (full width, story layer): opener with scopes and the big number · the problem · what we did (how it
   works week to week, the interactive mock with MADE-UP data, the parts) · the result (numbers + what changed) · for you.
   Spacing only from the tokens in site.css (--sp, --gap, --pad), so tools/balance.cjs passes. */
.c-open{position:relative;overflow:hidden}
.c-open-in{display:grid;grid-template-columns:1.45fr .55fr;gap:var(--sp);align-items:end}
.c-open-copy{display:flex;flex-direction:column;gap:20px}
.c-open h1{font-size:clamp(34px,4.6vw,68px)}
.chips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.chips li{font:500 13px/1 var(--head);padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.75);box-shadow:inset 0 0 0 1px rgba(38,70,83,.12);color:var(--harbour)}
.c-num{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:var(--pad);display:flex;flex-direction:column;gap:12px;box-shadow:0 18px 40px rgba(38,70,83,.08)}
.c-num b{font:700 clamp(48px,5vw,84px)/.95 var(--head);white-space:nowrap;color:var(--teal);letter-spacing:-.02em}
.c-num span{font:500 17px/1.4 var(--head);color:var(--muted)}
.c-two{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp);align-items:start}
.c-two .sec-head{margin-bottom:0}
.before,.changed{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.before li,.changed li{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;background:var(--paper);border:1px solid var(--line);border-radius:12px}
.before li::before{content:"";flex:none;width:10px;height:10px;margin-top:8px;border-radius:50%;background:var(--mango)}
.changed li::before{content:"✓";flex:none;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--teal-ink);color:#fff;font:700 12px var(--head);margin-top:1px}
.c-how{display:flex;flex-direction:column;gap:16px}
.how{list-style:none;counter-reset:h;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.how li{counter-increment:h;display:flex;gap:14px;align-items:flex-start;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:14px 16px}
.how li::before{content:counter(h);flex:none;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--teal-ink);color:#fff;font:600 13px var(--head)}
.c-mock{display:flex;flex-direction:column;gap:10px}
.parts{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:calc(var(--sp) / 2)}
.parts article{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:var(--pad);display:flex;flex-direction:column;gap:8px}
.parts b{font:600 17px/1.3 var(--head)}.parts p{font-size:15px}
.results{display:grid;grid-template-columns:repeat(var(--cols,3),1fr);gap:var(--gap)}
.results div{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:var(--pad);display:flex;flex-direction:column;gap:8px}
.results b{font:700 clamp(30px,3vw,40px)/1 var(--head);color:var(--teal-ink)}
.results span{font-size:15px;color:var(--muted)}
.changed-row{margin-top:calc(var(--sp) / 2);display:flex;flex-direction:column;gap:16px}
.changed-row .changed{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap)}
@media (max-width:720px){.changed-row .changed{grid-template-columns:1fr}}
.small-print{font-size:13px;color:var(--muted);margin-top:16px}
.foryou{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:var(--pad);display:flex;justify-content:space-between;align-items:center;gap:var(--gap);flex-wrap:wrap}
.foryou .sec-head{margin:0}
.more{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.more .label{margin-right:6px}
.more a{font:500 14px var(--head);padding:10px 14px;border-radius:999px;text-decoration:none;color:var(--harbour);background:rgba(255,255,255,.6);box-shadow:inset 0 0 0 1px var(--line)}
.more a:hover{background:#fff}
@media (max-width:900px){.c-open-in,.c-two{grid-template-columns:1fr;gap:calc(var(--sp) / 2)}.parts{grid-template-columns:1fr 1fr}.results{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.parts{grid-template-columns:1fr}}
.mock{background:var(--harbour);color:var(--on-dark);border-radius:22px;padding:18px;display:flex;flex-direction:column;gap:14px;box-shadow:0 20px 50px rgba(38,70,83,.18)}
.mock .bar{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;font:600 14px var(--head)}
.mock .note{font-size:12px;color:var(--on-dark-muted)}
.mock .tabs{display:flex;gap:6px;flex-wrap:wrap}
.mock .tabs button{font:600 13px/1 var(--head);padding:10px 14px;border-radius:999px;border:1px solid rgba(244,241,232,.2);background:transparent;color:var(--on-dark);cursor:pointer;min-height:40px}
.mock .tabs button[aria-selected=true]{background:var(--teal-ink);border-color:var(--teal-ink);color:#fff}
.mock .panel{background:var(--harbour-2);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:10px;min-height:220px}
.mock .row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;background:rgba(244,241,232,.06);border-radius:10px;padding:10px 12px;font-size:14px}
.mock .row b{font:600 14px var(--head)}
.mock .chip{font:600 10px/1 var(--head);letter-spacing:.06em;text-transform:uppercase;padding:5px 8px;border-radius:999px;background:rgba(244,241,232,.12);color:var(--on-dark)}
.mock .chip.go{background:var(--teal-ink);color:#fff}.mock .chip.wait{background:var(--gold);color:var(--harbour)}.mock .chip.alert{background:var(--mango);color:var(--harbour)}
.mock .act{font:600 13px/1 var(--head);padding:10px 14px;border-radius:999px;border:0;background:var(--gold);color:var(--harbour);cursor:pointer;min-height:40px}
.mock .act[disabled]{opacity:.45;cursor:default}
.mock .act.ghost{background:transparent;color:var(--on-dark);box-shadow:inset 0 0 0 1px rgba(244,241,232,.35)}
.mock .log{font:12px/1.5 var(--body);color:var(--on-dark-muted);display:flex;flex-direction:column;gap:4px}
.mock .meter{height:8px;border-radius:9px;background:rgba(244,241,232,.12);overflow:hidden}.mock .meter i{display:block;height:100%;background:var(--teal);transition:width .4s}
.mock .grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}@media (max-width:560px){.mock .grid2{grid-template-columns:1fr}}
.mock .flash{animation:flash 1.2s ease-out}
@keyframes flash{0%{background:rgba(233,196,107,.45)}100%{background:rgba(244,241,232,.06)}}
@media (prefers-reduced-motion:reduce){.mock .flash{animation:none}.mock .meter i{transition:none}}