/* ---------- The Determinism Gap ---------- */
#gap-hero h1{font-size:clamp(36px,4.5vw,68px)}
/* The claim: two editorial columns */
.claim-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px clamp(24px,3vw,48px)}
.claim{display:flex;flex-direction:column;gap:22px}
.claim p{font-size:clamp(22px,2vw,30px);font-weight:300;letter-spacing:-.02em;line-height:1.32;color:var(--ink)}
@media (max-width:860px){.claim-grid{grid-template-columns:1fr}}
/* Common tricks: Packaging rows, dark version */
.trick-list{border-top-color:var(--paper)}
.trick-list .pack{border-bottom-color:var(--line-dark);align-items:start}
.trick-list .pack .n{color:rgba(242,243,244,.45);padding-top:12px}
.trick-list .pack p{color:var(--mist)}
.trick-list .pack:hover{background:rgba(242,243,244,.04)}
.trick-list .pack:hover p{color:var(--paper)}
/* The five properties: The Store grid, light, 3 × 2 */
.prop-grid{grid-template-columns:repeat(3,minmax(0,1fr));border-color:var(--line)}
.prop-grid .store+.store{border-left:1px solid var(--line)}
.prop-grid .store:nth-child(3n+1){border-left:0}
.prop-grid .store:nth-child(n+4){border-top:1px solid var(--line)}
.prop-grid .store h3{font-size:clamp(26px,2.3vw,34px)}
.prop-grid .store p{color:var(--steel);max-width:34ch}
.prop-grid .store:hover{background:rgba(13,16,19,.03)}
@media (max-width:960px){.prop-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.prop-grid .store:nth-child(n){border-left:0;border-top:1px solid var(--line)}.prop-grid .store:nth-child(2n){border-left:1px solid var(--line)}.prop-grid .store:nth-child(-n+2){border-top:0}}
@media (max-width:560px){.prop-grid{grid-template-columns:1fr}.prop-grid .store:nth-child(n){border-left:0;border-top:1px solid var(--line)}.prop-grid .store:first-child{border-top:0}}
/* The regulatory collision: The Store grid, dark, four regulations */
.reg-grid .store h3{font-size:clamp(24px,2.1vw,32px);line-height:1.1;text-wrap:balance}
/* Pull quote */
.quote-band{background:var(--paper)}
.quote-band p{font-size:clamp(34px,5vw,80px);max-width:none}
/* Checklist: each point ticks as it passes the middle of the screen */
.chk-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--paper)}
.chk{display:grid;grid-template-columns:30px 48px minmax(0,1fr);gap:20px;align-items:start;padding:30px 0;border-bottom:1px solid var(--line-dark)}
.chk .box{width:26px;height:26px;margin-top:4px;border:1px solid rgba(242,243,244,.35);display:grid;place-items:center;transition:background .5s var(--ease),border-color .5s var(--ease)}
.chk .box svg{width:18px;height:18px;fill:none;stroke:var(--night);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:16;stroke-dashoffset:16;transition:stroke-dashoffset .5s var(--ease) .1s}
.chk .n{font-size:15px;font-weight:500;font-variant-numeric:tabular-nums;color:rgba(242,243,244,.45);padding-top:7px;transition:color .5s var(--ease)}
.chk h3{font-size:clamp(20px,1.9vw,27px);font-weight:300;letter-spacing:-.022em;line-height:1.25;color:rgba(242,243,244,.55);transition:color .5s var(--ease);max-width:44ch}
.chk p{font-size:16px;color:var(--mist);margin-top:10px;max-width:70ch;opacity:.7;transition:opacity .5s var(--ease)}
.chk.on .box{background:var(--copper);border-color:var(--copper)}
.chk.on .box svg{stroke-dashoffset:0}
.chk.on .n{color:var(--copper)}
.chk.on h3{color:var(--paper)}
.chk.on p{opacity:1}
@media (max-width:600px){.chk{grid-template-columns:26px minmax(0,1fr);gap:14px}.chk .n{display:none}}
#challenge h2{max-width:52%}
@media (max-width:900px){#challenge h2{max-width:none}}
#challenge .lede{max-width:56ch}

/* v2 edits */
/* The claim: one column reads black, the other grey; hovering swaps them and turns its label copper */
.claim p,.claim .tier-label{transition:color .5s var(--ease),border-color .5s var(--ease)}
.claim p{color:rgba(13,16,19,.32)}
.claim-grid:not(:hover) .claim:first-child p,.claim:hover p{color:var(--ink)}
.claim-grid:not(:hover) .claim:first-child .tier-label,.claim:hover .tier-label{color:var(--copper)}
.claim{cursor:default}
/* Six properties: icon and number share the top row */
.store-top{display:flex;justify-content:space-between;align-items:flex-start}
.store-top .n{font-size:15px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--steel);padding-top:6px;transition:color .45s var(--ease)}
.prop-grid .store:hover .store-top .n{color:var(--copper)}
.reg-grid .store .ic{color:var(--copper);margin-bottom:6px}
/* Pull statements fill the width between the margins */
.quote-band p{text-wrap:pretty}
/* Checklist: centred column, text still ranged left */
.chk-list{max-width:920px;margin-inline:auto}
/* hero image is bright: deepen the shade behind the copy */
#gap-hero::after{background:linear-gradient(90deg,rgba(10,12,14,.82) 0%,rgba(10,12,14,.62) 45%,rgba(10,12,14,.25) 75%,rgba(10,12,14,.15) 100%),linear-gradient(180deg,rgba(10,12,14,.45) 0%,rgba(10,12,14,0) 30%,rgba(10,12,14,.6) 100%)}
@media (max-width:900px){#gap-hero::after{background:linear-gradient(180deg,rgba(10,12,14,.6) 0%,rgba(10,12,14,.55) 30%,rgba(10,12,14,.85) 60%,rgba(10,12,14,.95) 100%)}}