@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-latin-600-normal.woff2) format("woff2")}
@font-face{font-family:"Barlow Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-latin-700-normal.woff2) format("woff2")}
@font-face{font-family:"Commissioner";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/commissioner-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"Commissioner";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/commissioner-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"Commissioner";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/commissioner-latin-700-normal.woff2) format("woff2")}

:root{
  --steel:#2b343a;--deep:#1d2428;--lip:#46535b;--label:#f4f6f5;--wall:#d3dadd;
  --ink:#111;--mute:#3f4c53;--pale:#c3ced3;--go:#ff5f1f;--ok:#12803e;--bad:#8a2a12;
  --tape:#dccd96;--frame:#c5cdd1;--code:#161c20;
  --cond:"Barlow Condensed","Arial Narrow","Roboto Condensed",sans-serif;
  --body:"Commissioner","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:ui-monospace,"Cascadia Mono",Consolas,Menlo,monospace;
  --s1:.5rem;--s2:1rem;--s3:1.5rem;--s4:2.5rem;--s5:4rem;--s6:6rem;
  --gut:clamp(16px,4vw,32px);
  --slot:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='32'%3E%3Crect x='20' y='11' width='16' height='6' rx='3' fill='%231d2428'/%3E%3C/svg%3E");
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scrollbar-color:var(--lip) var(--wall)}
body{margin:0;background:var(--wall);color:var(--ink);font:400 1.0625rem/1.55 var(--body);caret-color:var(--steel);overflow-x:clip}
::selection{background:var(--steel);color:var(--label)}
.dark ::selection{background:var(--go);color:var(--ink)}
img{display:block;max-width:100%}
img[hidden],[hidden]{display:none!important}
h1,h2,h3,p,ul,ol,figure{margin:0}
p,li{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
ul,ol{padding:0;list-style:none}
a{color:inherit;text-underline-offset:.2em;text-decoration-thickness:.08em}
code,pre{font-family:var(--mono)}
b{font-weight:700}
.wrap{width:min(1240px,100% - 2*var(--gut));margin-inline:auto}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

:focus-visible{outline:3px solid var(--focus,var(--ink));outline-offset:3px}
.dark{--focus:var(--label)}
.cut:focus-visible,.go:focus-visible,.nav a:focus-visible{outline-offset:-7px}
.inv:focus-visible,.nav a[aria-current]:focus-visible{--focus:var(--label)}
.dark .inv:focus-visible{--focus:var(--ink)}
.skip{position:absolute;left:var(--s2);top:-6rem;z-index:10;padding:.75rem 1rem;background:var(--ink);color:var(--label);font:600 1rem/1 var(--cond);letter-spacing:.08em;text-transform:uppercase}
.skip:focus{top:var(--s1);--focus:var(--go)}

/* die-cut label stock */
.cut{--c:20px;clip-path:polygon(0 0,calc(100% - var(--c)) 0,100% var(--c),100% 100%,var(--c) 100%,0 calc(100% - var(--c)))}
.hole{position:absolute;left:22px;top:22px;width:16px;height:16px;border-radius:50%;background:var(--hole,var(--wall))}
.dark .hole{--hole:var(--steel)}
.tape{position:absolute;display:block;width:78px;height:24px;background:var(--tape);opacity:.94;transform:rotate(-4deg);
  clip-path:polygon(0 0,100% 0,97% 25%,100% 50%,97% 75%,100% 100%,0 100%,3% 75%,0 50%,3% 25%)}

/* shelf rail */
.rail{height:40px;background:var(--steel) var(--slot) repeat-x 0 50%;border-top:6px solid var(--lip);border-bottom:5px solid var(--deep)}

.rail-steps{display:block;height:auto;padding:12px 0 12px}
.rail-steps ul{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2)}
.rail-steps a{--c:10px;display:flex;align-items:center;min-height:44px;padding:0 20px;background:var(--label);color:var(--ink);font:700 1.25rem/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.rail-steps a:hover{background:var(--tape)}

/* header */
.top{background:var(--steel);border-bottom:5px solid var(--deep);border-top:6px solid var(--lip)}
.top-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--s1) var(--s3);padding-block:var(--s2)}
.brand{display:flex;align-items:center;gap:12px;min-height:44px;color:var(--label);font:700 1.75rem/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;text-decoration:none}
.brand::before{content:"";width:20px;height:24px;background:var(--label);clip-path:polygon(0 0,calc(100% - 7px) 0,100% 7px,100% 100%,0 100%);-webkit-mask:radial-gradient(circle at 6px 7px,transparent 2.4px,#000 2.6px);mask:radial-gradient(circle at 6px 7px,transparent 2.4px,#000 2.6px)}
.brand:focus-visible{--focus:var(--label)}
.nav{display:flex;flex-wrap:wrap;gap:var(--s1) 12px}
.nav a{--c:8px;display:flex;align-items:center;min-height:44px;padding:0 18px;background:var(--label);color:var(--ink);font:600 1.05rem/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;text-decoration:none}
.nav a:hover{background:var(--wall)}
.nav a[aria-current]{background:var(--steel);color:var(--label);box-shadow:inset 0 0 0 2px var(--label)}

/* hero */
.hero{padding-block:var(--s3)}
.hero-grid{display:grid;gap:var(--s5) var(--s5);align-items:start}
.tag{position:relative;background:var(--label);padding:var(--s4) var(--s4) var(--s4) calc(var(--s4) + 14px)}
.hero-tag{display:flex;flex-direction:column;gap:var(--s2);padding:calc(var(--s4) + 6px) var(--s3) var(--s3) calc(var(--s4) + 14px)}
h1{font:700 clamp(2.5rem,5.1vw,4.4rem)/.95 var(--cond);text-transform:uppercase;letter-spacing:.005em}
h1 span{display:block}
h1 .inv{display:inline-block;margin:6px 0 0 -12px;padding:0 .2em 0 12px;background:var(--steel);color:var(--label)}
.sub{font-size:1.2rem;line-height:1.45;max-width:36rem;color:#1c2428}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s3) var(--s3);margin-top:var(--s1)}
.go{display:inline-flex;align-items:center;min-height:68px;padding:0 14px 0 30px;background:var(--go);color:var(--ink);font:700 clamp(1.6rem,2.4vw,1.9rem)/1 var(--cond);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;clip-path:polygon(0 0,100% 0,calc(100% - 10px) 50%,100% 100%,0 100%,10px 50%)}
.go span{display:flex;align-items:center;margin-left:16px;padding:0 10px 0 14px;border-left:2px dashed rgba(17,17,17,.5);min-height:44px}
.go:hover{background:var(--ink);color:var(--go)}
.taped{position:relative;display:flex;flex-direction:column;justify-content:center;min-height:56px;padding:10px 18px 9px;border:2px solid var(--ink);background:#fff;color:var(--ink);text-decoration:none}
.taped .tape{left:16px;top:-14px;width:70px}
.taped b{font:600 1.5rem/1.05 var(--cond);letter-spacing:.07em;text-transform:uppercase}
.taped span{font-size:.9rem;color:var(--mute)}
.taped:hover{background:var(--steel);color:var(--label);--focus:var(--label)}
.taped:hover span{color:var(--pale)}
.legend{display:flex;flex-wrap:wrap;gap:var(--s1) var(--s3);margin-top:var(--s1);padding-top:var(--s2);border-top:2px solid var(--ink);font-size:.95rem;color:var(--mute)}
.legend li{display:block}
.legend .dot,.legend .ring{vertical-align:-2px;margin-right:10px}
.legend b{margin-right:6px}
.legend b{font:600 1.1rem/1.2 var(--cond);letter-spacing:.07em;text-transform:uppercase;color:var(--ink)}
.dot,.ring{display:inline-block;flex:none;width:16px;height:16px;border-radius:50%}
.dot{background:var(--ok)}
.dot.bad{background:var(--bad)}
.ring{border:3.5px solid var(--steel);background:transparent}
.dark .ring{border-color:var(--label)}
.hero-items{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1fr);gap:var(--s3);align-items:end}

/* shelf items */
.item{position:relative}
.frame{position:relative;overflow:hidden;aspect-ratio:1280/800;background:var(--frame);box-shadow:0 10px 22px -10px rgba(17,17,17,.45)}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:left top}
.frame img{max-width:none}
/* crops keep each headline whole: stranger shows the left 64% of its capture, donor the left 55% of its capture */
.frame.crop-s{aspect-ratio:819/800}
.frame.crop-s img{width:156.29%}
.frame.crop-d{aspect-ratio:704/1245}
.frame.crop-d img{width:181.82%;height:102.81%}
.frame.sq{aspect-ratio:1/1}
.missing{position:absolute;inset:10px;display:flex;align-items:center;justify-content:center;text-align:center;padding:var(--s2);border:2px dashed var(--lip);font-size:.9rem;line-height:1.4;color:var(--ink);background:var(--frame)}
.lip{display:block;height:12px;background:var(--steel);border-top:3px solid var(--lip);border-bottom:3px solid var(--deep)}
.lab{--c:9px;display:inline-block;max-width:100%;margin-top:14px;padding:10px 18px 11px;background:var(--label);color:var(--ink);font:700 1.45rem/1 var(--cond);letter-spacing:.1em;text-transform:uppercase}
.lab small{display:block;margin-top:6px;font:400 .9rem/1.3 var(--body);letter-spacing:0;text-transform:none;color:var(--mute)}
.lab.inv{background:var(--steel);color:var(--label)}
.lab.inv small{color:var(--pale)}
/* stickers sit on the real regions of the capture; positions are % of the (cropped) image */
.stk{position:absolute;z-index:1;color:var(--ink);font:700 1rem/1 var(--cond);letter-spacing:.07em;text-transform:uppercase;box-shadow:0 6px 12px -4px rgba(17,17,17,.5)}
.s-est{display:grid;place-items:center;width:80px;height:80px;padding:8px;border-radius:50%;border:5px solid var(--steel);background:var(--label);text-align:center;font-size:.92rem;line-height:1;transform:translate(-50%,-50%) rotate(-8deg)}
.s-rec{display:inline-flex;align-items:center;gap:7px;padding:7px 11px 7px 9px;border:2px solid var(--steel);background:var(--label);white-space:nowrap;transform:rotate(-3deg)}
.s-rec .dot{width:14px;height:14px}
.crop-d .s-est{left:80%;top:86%}
.crop-d .s-rec{left:10%;top:72%}
.sq .s-est{left:47%;top:83.5%}
.sq .s-rec{left:5.5%;top:70%}

/* heading tag: one true measurement printed beside the heading, like a price tag */
.head{display:flex;flex-wrap:wrap;align-items:flex-end;gap:var(--s2) var(--s3)}
.price{--c:9px;display:inline-block;flex:none;padding:10px 16px 9px;background:var(--steel);color:var(--label);font:700 1.35rem/1 var(--cond);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.dark .price{background:var(--label);color:var(--ink)}
.dash-copy .head{align-items:center}

/* sections */
.sec{padding-block:var(--s6)}
.lede{max-width:40rem;font-size:1.15rem}
.dark{background:var(--steel);color:var(--label)}
.label-h{position:relative;display:block;width:fit-content;max-width:100%;padding:var(--s3) var(--s4) var(--s3) calc(var(--s4) + 14px);padding-top:calc(var(--s3) + 14px);background:var(--label);color:var(--ink);font:700 clamp(2.1rem,4.6vw,3.6rem)/.98 var(--cond);text-transform:uppercase;letter-spacing:.01em;text-wrap:balance;--c:18px}
.inv-h{max-width:20ch;font:700 clamp(2.1rem,4.6vw,3.6rem)/.98 var(--cond);text-transform:uppercase;letter-spacing:.01em;text-wrap:balance;color:var(--label)}
.dark .lede{color:var(--pale);margin-top:var(--s3)}
.fine{font-size:.9rem;color:var(--mute);max-width:36rem}
.dark .fine{color:var(--pale)}

/* idea */
.idea-intro{display:grid;gap:var(--s3);margin-bottom:var(--s5)}
.idea .label-h{max-width:min(100%,36rem)}
.idea-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s4)}
.pic-a .frame{width:min(100%,26rem)}
.pins ul{display:grid;gap:var(--s2)}
.note{--c:12px;display:flex;gap:14px;align-items:flex-start;padding:var(--s2) var(--s3) var(--s2) var(--s2);background:var(--label)}
.note>.dot,.note>.ring,.note>.ico{margin-top:5px;flex:none}
.note>.ico{width:20px;height:20px;margin-top:3px;color:var(--ink)}
.note p{font-size:1rem;line-height:1.45;max-width:30rem}
.pic-b .frame{box-shadow:0 14px 28px -12px rgba(17,17,17,.5)}

/* live */
.live{padding-block:var(--s6)}
.live-grid{display:grid;gap:var(--s4);margin-top:var(--s5)}
.live .tag{color:var(--ink);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);padding-top:calc(var(--s4) + 14px)}
.live h3{font:700 clamp(1.9rem,3.6vw,2.6rem)/1.12 var(--cond);text-transform:uppercase;letter-spacing:.02em}
.live .tag p{max-width:30rem;color:#1c2428}
.btn{--c:10px;display:inline-flex;align-items:center;gap:12px;min-height:52px;padding:0 24px;background:var(--steel);color:var(--label);font:700 1.3rem/1 var(--cond);letter-spacing:.09em;text-transform:uppercase;text-decoration:none;margin-top:var(--s1)}
.btn:hover{background:var(--ink)}
.path{font-size:.85rem;color:var(--mute)}
.presenter{position:relative;display:block;width:fit-content;max-width:100%;margin-top:var(--s5);padding:var(--s2) var(--s3);background:var(--tape);color:var(--ink);font-size:1rem;clip-path:polygon(0 0,100% 0,99% 25%,100% 50%,99% 75%,100% 100%,0 100%,1% 75%,0 50%,1% 25%)}
.presenter .tape{display:none}
.presenter code{padding:2px 6px;background:rgba(17,17,17,.1);font-size:.95em;font-weight:700}

/* how */
.how-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s5);margin-top:var(--s5)}
.how-grid>*{min-width:0}
.steps{display:grid;gap:var(--s4)}
.steps h3{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:var(--s1);font:700 1.7rem/1.05 var(--cond);letter-spacing:.03em;text-transform:uppercase}
.steps .price{padding:8px 12px 7px;font-size:1.15rem}
.steps p{max-width:30rem}
.codes{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--s3);align-content:start}
.codes>*{min-width:0;max-width:100%}
.code{position:relative;background:var(--code);color:var(--pale);border-top:6px solid var(--lip);border-bottom:5px solid var(--deep);scroll-margin-top:var(--s3)}
.code-bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s2);padding:10px var(--s2);border-bottom:1px solid var(--lip)}
.code-title{font:600 1.1rem/1 var(--cond);letter-spacing:.14em;text-transform:uppercase;color:var(--label)}
.code pre{margin:0;padding:var(--s3) var(--s2);white-space:pre;overflow-x:auto;overscroll-behavior-x:contain;scrollbar-color:var(--lip) var(--code);font-size:.8rem;line-height:1.7}
.code b{color:#fff;font-weight:700}
.copy{--c:8px;min-height:44px;min-width:92px;padding:0 20px;border:0;background:var(--label);color:var(--ink);font:700 1.15rem/1 var(--cond);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.copy:hover{background:var(--tape)}
.copy:focus-visible{--focus:var(--ink)}
.stub{--c:8px;position:absolute;right:var(--s2);top:calc(100% - 4px);z-index:2;padding:9px 18px 10px;background:var(--label);color:var(--ink);font:700 1.1rem/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;box-shadow:0 8px 14px -6px rgba(17,17,17,.4)}
.stub:empty{display:none}
.stub.print{animation:feed .7s cubic-bezier(.16,1,.3,1) both}
@keyframes feed{from{clip-path:inset(0 0 100% 0);transform:translateY(-14px)}to{clip-path:inset(0 0 0 0);transform:none}}

/* honesty */
.pair{display:grid;gap:var(--s3);margin-top:var(--s5)}
.rec,.est{display:flex;gap:var(--s2);align-items:flex-start;padding:var(--s3)}
.rec{--c:16px;background:var(--label);color:var(--ink)}
.est{border:3px dashed var(--label);color:var(--label)}
.rec>.dot,.est>.ring{margin-top:8px}
.big{font:700 clamp(1.5rem,2.6vw,2.1rem)/1.1 var(--cond);letter-spacing:.02em;text-transform:uppercase}
.small{margin-top:6px;font-size:.95rem;color:inherit}
.rec .small{color:var(--mute)}
.est .small{color:var(--pale)}
.sub-h{margin-top:var(--s5);font:700 1.9rem/1 var(--cond);letter-spacing:.06em;text-transform:uppercase}
.flow{display:grid;gap:var(--s2);margin-top:var(--s3)}
.flow li{--c:12px;position:relative;padding:var(--s2) var(--s3);background:var(--lip);color:var(--label);font-size:1rem;line-height:1.45}
.flow li:nth-child(2){background:var(--label);color:var(--ink)}
.flow li:nth-child(3){background:var(--steel);color:var(--label);box-shadow:inset 0 0 0 3px var(--label)}
.guard{display:grid;gap:var(--s2);margin-top:var(--s4);max-width:44rem}
.switch{--c:10px;display:inline-flex;align-items:center;gap:12px;width:fit-content;min-height:48px;padding:0 20px;border:0;background:var(--label);color:var(--ink);font:700 1.15rem/1 var(--cond);letter-spacing:.09em;text-transform:uppercase;cursor:pointer}
.switch:focus-visible{--focus:var(--ink)}
.sw{position:relative;width:38px;height:20px;background:var(--steel);border-radius:10px}
.sw::after{content:"";position:absolute;top:3px;left:21px;width:14px;height:14px;border-radius:50%;background:var(--label);transition:left .25s cubic-bezier(.16,1,.3,1)}
.switch[aria-pressed=false] .sw{background:var(--frame);box-shadow:inset 0 0 0 2px var(--steel)}
.switch[aria-pressed=false] .sw::after{left:3px;background:var(--steel)}
.st{min-width:2.2em;color:var(--mute)}
.draft{--c:14px;position:relative;padding:var(--s3);background:var(--label);color:var(--ink);transform-origin:20% 0;transition:transform .5s cubic-bezier(.16,1,.3,1),opacity .5s cubic-bezier(.16,1,.3,1)}
.edge{display:block;margin:var(--s3) calc(-1 * var(--s3)) calc(-1 * var(--s3));padding:9px var(--s3) 8px;background:var(--pale);color:var(--ink);font:600 1rem/1 var(--cond);letter-spacing:.14em;text-transform:uppercase}
.draft-body{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2) var(--s3)}
.eg{margin-top:var(--s2)}
.sentence{display:flex;gap:12px;align-items:flex-start;font:700 clamp(1.4rem,2.6vw,1.9rem)/1.3 var(--cond);letter-spacing:.02em}
.sentence .dot{margin-top:.35em}
.draft .sentence{display:block;min-width:0}
.stamp{display:inline-block;flex:none;padding:9px 14px 8px;border:3px solid var(--bad);color:var(--bad);background:var(--label);font:700 1.1rem/1 var(--cond);letter-spacing:.12em;text-transform:uppercase;transform:rotate(-4deg)}
.draft::after{content:"";position:absolute;right:0;top:0;width:var(--c);height:var(--c);background:var(--pale)}
[data-guard=on] .draft{transform:rotate(-1.4deg) translateX(-8px);opacity:.82}
[data-guard=on] .draft .sentence{text-decoration:line-through;text-decoration-thickness:.1em}
[data-guard=off] .stamp,[data-guard=off] .v-on{display:none}
[data-guard=on] .v-off{display:none}
.ico.down{margin-left:var(--s3);color:var(--pale)}
.shown{--c:14px;padding:var(--s3);background:var(--label);color:var(--ink);box-shadow:inset 0 0 0 0 transparent}
.shown .small{color:var(--mute)}
.thin{--c:14px;max-width:44rem;margin-top:var(--s5);padding:var(--s3);background:var(--label);color:var(--ink);font-size:1.05rem}

/* dashboard */
.dash-grid{display:grid;gap:var(--s5);align-items:center}
.dash-copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s2);padding-top:calc(var(--s4) + 14px)}
.dash-copy h2{font:700 clamp(2.1rem,4vw,3rem)/1 var(--cond);text-transform:uppercase;letter-spacing:.02em}
.dash-copy .small{color:var(--mute)}
.dash-pic .frame{border:2px solid var(--ink)}

/* footer */
.foot{padding-bottom:var(--s5);background:var(--deep);color:var(--pale)}
.foot::before{content:"";display:block;height:40px;margin-bottom:var(--s3);background:var(--steel) var(--slot) repeat-x 0 50%;border-top:6px solid var(--lip);border-bottom:5px solid var(--deep)}
.foot-in{display:grid;gap:var(--s1);justify-items:start}
.foot-main{--c:14px;position:relative;margin-top:-52px;margin-bottom:var(--s2);padding:var(--s2) var(--s3);background:var(--label);color:var(--ink);font:700 1.25rem/1.35 var(--body);max-width:44rem}

@media (min-width:640px){
  .live-grid{grid-template-columns:1.15fr 1fr;align-items:start}
  .live-b{margin-top:var(--s5)}
  .pair{grid-template-columns:1fr 1.15fr;align-items:stretch}
  .flow{grid-template-columns:1fr 1fr 1.3fr;align-items:stretch}
  .idea-grid{grid-template-columns:minmax(0,4fr) minmax(0,5fr);column-gap:var(--s4)}
  .pic-a .frame{width:100%}
  .pins{grid-column:1/-1}
  .pins ul{grid-template-columns:repeat(3,minmax(0,1fr))}
  .pic-a{align-self:end}
}
@media (min-width:1100px){
  .idea-grid{grid-template-columns:minmax(0,4fr) minmax(0,5fr) minmax(0,3fr);row-gap:0}
  .pic-a,.pic-b{grid-row:1/4}
  .pic-a{grid-column:1}
  .pic-b{grid-column:2}
  .pins{grid-column:3;grid-row:1;position:relative;min-height:0}
  .pins ul{position:absolute;inset:0;grid-template-columns:minmax(0,1fr);grid-template-rows:17fr 33fr 31fr 19fr;gap:0}
  .pins .note{align-self:start;grid-column:1}
  .pins .note:nth-child(1){grid-row:2}
  .pins .note:nth-child(2){grid-row:3}
  .pins .note:nth-child(3){grid-row:4}
}
@supports (grid-template-rows:subgrid){
  @media (min-width:640px){
    .pic-a,.pic-b{display:grid;grid-row:1/4;grid-template-rows:subgrid}
    .pic-a{grid-column:1}.pic-b{grid-column:2}
    .pic-a .frame{align-self:end}
    .pic-a .lab,.pic-b .lab{justify-self:start}
    .pins{grid-row:4}
  }
  @media (min-width:1100px){
    .pins{grid-row:1}
  }
}
@media (min-width:960px){
  .hero-grid{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:var(--s4);align-items:end}
  /* 1280x800: narrower donor column keeps the first-viewport rail fully above the fold (hero bottom ~ 780px) */
  .hero{padding-bottom:var(--s2)}
  .hero-items{grid-template-columns:minmax(0,.8fr) minmax(0,.86fr)}
  .how-grid{grid-template-columns:minmax(0,1fr) minmax(0,2.1fr);gap:var(--s5)}
  .dash-grid{grid-template-columns:4fr 8fr;gap:var(--s4)}
}
@media (max-width:959px){
  .sec{padding-block:var(--s5)}
}
@media (max-width:639px){
  .hero-items{grid-template-columns:minmax(0,1fr)}
  /* one capture only on phones: the donor view; the stranger view follows in section 2 */
  .hi-s{display:none}
}
@media (max-width:480px){
  .tag{padding:var(--s3) var(--s3) var(--s3) calc(var(--s3) + 10px)}
  .hero-tag{padding-top:calc(var(--s3) + 14px)}
  .hole{left:16px;top:16px;width:14px;height:14px}
  .label-h{padding-left:calc(var(--s3) + 10px)}
  .s-est{width:66px;height:66px;font-size:.78rem;padding:3px;border-width:4px}
  .s-rec{gap:5px;padding:5px 8px 5px 7px;font-size:.82rem}
  .s-rec .dot{width:11px;height:11px}
  .sq .s-est{left:50%;top:84%}
  .sq .s-rec{left:5%;top:72%}
  .lab{font-size:1.2rem;padding:8px 12px 9px}
  .go{padding-left:28px;font-size:1.6rem}
  .rail-steps ul{flex-direction:column;align-items:flex-start}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
}