/* =====================================================================
   PrideSafe: "night edition on paper". Afternoon Edition base (css/case-study.css),
   plus one spot color (mint, artwork details only), night bands and a halftone signature.
   Mint is never used for body text or links; on paper it always has a thin ink edge.
   ===================================================================== */
.ps{--mint:#3DFB9A;--pink:#FF4FB1;--night:#2A1D1A;
  --dots:radial-gradient(circle at 25% 25%,var(--pink) 1.6px,transparent 2px),radial-gradient(circle at 75% 75%,var(--mint) 1.6px,transparent 2px)}

/* ---------- night band: a dark page laid onto the newspaper, torn top and bottom ---------- */
.night{position:relative;width:100vw;margin-left:calc(50% - 50vw);filter:drop-shadow(0 3px 5px rgba(62,39,35,.28))}
.night-fiber{display:block;background:var(--paper-card);clip-path:polygon(0.0% 4.6px,2.3% 8.4px,4.5% 5.1px,6.8% 2.5px,9.1% 6.0px,11.4% 1.8px,13.6% 1.7px,15.9% 6.5px,18.2% 8.9px,20.5% 6.2px,22.7% 2.3px,25.0% 5.2px,27.3% 2.5px,29.5% 1.2px,31.8% 4.5px,34.1% 5.2px,36.4% 5.0px,38.6% 4.7px,40.9% 9.0px,43.2% 7.7px,45.5% 3.5px,47.7% 3.3px,50.0% 7.1px,52.3% 7.8px,54.5% 8.7px,56.8% 1.0px,59.1% 8.3px,61.4% 8.8px,63.6% 1.6px,65.9% 7.2px,68.2% 1.7px,70.5% 8.7px,72.7% 1.9px,75.0% 1.8px,77.3% 7.4px,79.5% 5.5px,81.8% 2.5px,84.1% 2.0px,86.4% 1.9px,88.6% 2.7px,90.9% 8.8px,93.2% 3.4px,95.5% 2.7px,97.7% 7.8px,100.0% 1.8px,100.0% calc(100% - 5.5px),97.7% calc(100% - 4.7px),95.5% calc(100% - 5.7px),93.2% calc(100% - 5.1px),90.9% calc(100% - 7.3px),88.6% calc(100% - 3.4px),86.4% calc(100% - 7.5px),84.1% calc(100% - 1.3px),81.8% calc(100% - 8.7px),79.5% calc(100% - 5.9px),77.3% calc(100% - 1.1px),75.0% calc(100% - 1.5px),72.7% calc(100% - 2.9px),70.5% calc(100% - 4.7px),68.2% calc(100% - 7.7px),65.9% calc(100% - 6.1px),63.6% calc(100% - 6.3px),61.4% calc(100% - 3.2px),59.1% calc(100% - 9.0px),56.8% calc(100% - 6.7px),54.5% calc(100% - 2.8px),52.3% calc(100% - 1.6px),50.0% calc(100% - 4.2px),47.7% calc(100% - 4.1px),45.5% calc(100% - 7.8px),43.2% calc(100% - 2.7px),40.9% calc(100% - 4.8px),38.6% calc(100% - 4.2px),36.4% calc(100% - 6.0px),34.1% calc(100% - 3.2px),31.8% calc(100% - 3.7px),29.5% calc(100% - 7.1px),27.3% calc(100% - 3.0px),25.0% calc(100% - 1.5px),22.7% calc(100% - 2.4px),20.5% calc(100% - 4.6px),18.2% calc(100% - 6.9px),15.9% calc(100% - 6.1px),13.6% calc(100% - 4.4px),11.4% calc(100% - 3.2px),9.1% calc(100% - 7.4px),6.8% calc(100% - 8.1px),4.5% calc(100% - 4.2px),2.3% calc(100% - 6.1px),0.0% calc(100% - 8.9px))}
.night-ink{position:relative;display:block;background-color:var(--night);color:var(--paper);clip-path:polygon(0.0% 13.9px,2.3% 13.5px,4.5% 9.3px,6.8% 8.4px,9.1% 3.7px,11.4% 4.1px,13.6% 1.3px,15.9% 10.9px,18.2% 8.2px,20.5% 6.0px,22.7% 12.0px,25.0% 10.2px,27.3% 14.6px,29.5% 11.6px,31.8% 9.0px,34.1% 5.4px,36.4% 7.6px,38.6% 9.3px,40.9% 10.0px,43.2% 3.5px,45.5% 12.4px,47.7% 2.6px,50.0% 1.5px,52.3% 9.0px,54.5% 5.6px,56.8% 5.0px,59.1% 11.9px,61.4% 4.6px,63.6% 12.0px,65.9% 12.6px,68.2% 8.6px,70.5% 9.3px,72.7% 3.3px,75.0% 1.8px,77.3% 1.3px,79.5% 10.6px,81.8% 12.3px,84.1% 8.5px,86.4% 11.5px,88.6% 14.6px,90.9% 3.7px,93.2% 7.5px,95.5% 14.1px,97.7% 4.0px,100.0% 8.4px,100.0% calc(100% - 14.3px),97.7% calc(100% - 2.2px),95.5% calc(100% - 6.9px),93.2% calc(100% - 2.8px),90.9% calc(100% - 7.2px),88.6% calc(100% - 7.4px),86.4% calc(100% - 2.2px),84.1% calc(100% - 6.9px),81.8% calc(100% - 11.3px),79.5% calc(100% - 1.8px),77.3% calc(100% - 9.2px),75.0% calc(100% - 9.7px),72.7% calc(100% - 6.1px),70.5% calc(100% - 6.2px),68.2% calc(100% - 10.2px),65.9% calc(100% - 2.2px),63.6% calc(100% - 11.1px),61.4% calc(100% - 7.3px),59.1% calc(100% - 3.5px),56.8% calc(100% - 5.5px),54.5% calc(100% - 3.7px),52.3% calc(100% - 2.4px),50.0% calc(100% - 4.9px),47.7% calc(100% - 12.5px),45.5% calc(100% - 6.2px),43.2% calc(100% - 5.3px),40.9% calc(100% - 8.7px),38.6% calc(100% - 2.5px),36.4% calc(100% - 10.9px),34.1% calc(100% - 4.3px),31.8% calc(100% - 13.9px),29.5% calc(100% - 14.2px),27.3% calc(100% - 14.7px),25.0% calc(100% - 6.8px),22.7% calc(100% - 12.3px),20.5% calc(100% - 14.6px),18.2% calc(100% - 14.3px),15.9% calc(100% - 14.8px),13.6% calc(100% - 5.8px),11.4% calc(100% - 6.3px),9.1% calc(100% - 2.1px),6.8% calc(100% - 3.8px),4.5% calc(100% - 14.3px),2.3% calc(100% - 2.4px),0.0% calc(100% - 3.4px));
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .95 0 0 0 0 .91 0 0 0 0 .85 0 0 0 .3 -.08'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E")}
.night-in{max-width:1120px;margin:0 auto;padding:44px 32px 40px}
/* thin halftone strip just inside the torn edges */
.night-strip{position:absolute;left:0;right:0;height:16px;background-image:var(--dots);background-size:9px 9px;opacity:.6;pointer-events:none}
.night-strip.top{top:18px}
.night-strip.bottom{bottom:18px}

/* ---------- header ---------- */
.ps-head{padding:0;margin-top:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);column-gap:40px;align-items:center}
.ps-head .cs-kicker,.ps-head h1,.ps-head .cs-facts dt,.ps-head .cs-facts dd{color:var(--paper)}
.ps-head .cs-deck{color:var(--paper)}
.ps-head .cs-facts{grid-column:1 / -1;border-color:var(--paper);position:relative;z-index:1}
.ps-head .cs-facts > div + div{border-left-color:rgba(243,232,218,.4)}
.ps-head .cs-tags span{border-color:var(--mint);background:none}
.ps-hero{position:relative;margin:0 0 -6px;aspect-ratio:1259/1372;max-width:520px;justify-self:end;width:100%}
.ps-hero::before{content:"";position:absolute;inset:6% -6% 8% -6%;background-image:var(--dots);background-size:11px 11px;opacity:.28;
  -webkit-mask:radial-gradient(closest-side,#000 40%,transparent);mask:radial-gradient(closest-side,#000 40%,transparent)}
.ps-hero img{position:absolute;inset:0;width:100%;height:100%;display:block}
.ps-hero .ink-layer{display:none}
.anim .ps-hero .ink-layer{display:block;clip-path:inset(0 0 100% 0);animation:ps-print 1.3s var(--ease) .15s forwards}
.anim .ps-hero .color-layer{opacity:0;animation:ps-fade 1.5s ease 1.25s forwards}
@keyframes ps-print{to{clip-path:inset(0 0 0 0)}}
@keyframes ps-fade{to{opacity:1}}
.ps .cs-body{margin-top:56px}

/* ---------- foster care numbers ---------- */
.ps .factbox{max-width:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 36px;padding:26px 28px}
.ps .factbox > div + div{border-left:1px solid var(--hair);padding-left:36px}
.ps .factbox p{font-size:15.5px;line-height:1.55}
.chart-h{font-family:var(--type);font-size:11.5px;letter-spacing:.1em;color:var(--ink-soft);margin:18px 0 8px}
.sbar{display:flex;height:30px;border:1px solid var(--ink);overflow:hidden}
.sbar i{display:block;height:100%}
.sbar i + i{border-left:1px solid var(--ink)}
.k-adopted{background:var(--mint)}
.k-not{background:repeating-linear-gradient(135deg,var(--mint) 0 3px,var(--paper-card) 3px 6px)}
.k-aged{background:var(--ink)}
.anim .sbar:not(.in){clip-path:inset(0 100% 0 0)}
.anim .sbar.in{clip-path:inset(0 0 0 0);transition:clip-path 1.2s var(--ease)}
.ps .factbox .skey{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:10px;font-size:14px}
.skey li{display:flex;align-items:center;gap:7px}
.skey i{width:13px;height:13px;border:1px solid var(--ink);flex:none}
.skey b{font-weight:600}
.pairs{display:grid;gap:16px}
.pair h4{font-family:var(--sans);font-weight:600;font-size:14px;margin:0 0 6px}
.brow{display:grid;grid-template-columns:96px minmax(0,1fr) 44px;align-items:center;gap:8px;font-size:13.5px;line-height:1.3;margin-top:5px}
.brow b{font-weight:600;text-align:right}
.ps .bar{height:15px;border:0;background:none;border-radius:0;overflow:visible}
.ps .bar .fill{background:var(--mint);border:1px solid var(--ink);width:var(--p)}
.ps .bar.gen .fill{background:rgba(117,96,90,.5)}

/* foster care vs typical families */
.cmp{width:100%;border-collapse:collapse;border-top:3px double var(--ink);border-bottom:1px solid var(--ink)}
.cmp th{font-family:var(--type);font-weight:400;font-size:12px;letter-spacing:.08em;text-align:left;padding:12px 18px 10px 0;border-bottom:1px solid var(--ink);vertical-align:bottom}
.cmp td{font-size:15.5px;line-height:1.45;padding:12px 18px 12px 0;vertical-align:top;width:50%}
.cmp tr + tr td{border-top:1px solid var(--hair)}
.cmp td + td,.cmp th + th{border-left:1px solid var(--rule);padding-left:18px;padding-right:0}

/* ---------- content note ---------- */
.content-note{font-family:var(--serif);font-style:italic;font-size:17px;line-height:1.45;color:var(--ink-soft);border-left:3px double var(--ink);padding:2px 0 2px 14px;margin:0 0 40px;max-width:60ch}

/* ---------- big numbers ---------- */
.bigs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:3px double var(--ink);border-bottom:1px solid var(--ink)}
.bigs > div{padding:18px 20px 20px}
.bigs > div:first-child{padding-left:0}
.bigs > div + div{border-left:1px solid var(--rule)}
.bigs b{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(46px,6vw,70px);line-height:1;font-variant-numeric:lining-nums tabular-nums}
.bigs span{display:block;font-size:15px;line-height:1.45;margin-top:8px;max-width:26ch}

/* still, calm quote cards (no typing, counting or other motion) */
.calm{background:var(--paper-card);border:1px solid rgba(62,39,35,.28);padding:36px 40px 30px}
.calm blockquote{margin:0;font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.1vw,25px);line-height:1.5}
.calm cite{display:block;font-style:normal;font-family:var(--type);font-size:12px;letter-spacing:.06em;color:var(--ink-soft);margin-top:16px}
.trio-stats{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:30px}
.trio-stats li{padding:0 20px;font-size:15px;line-height:1.5}
.trio-stats li:first-child{padding-left:0}
.trio-stats li + li{border-left:1px solid var(--rule)}
.trio-stats b{display:block;font-family:var(--serif);font-weight:400;font-size:38px;line-height:1.1;font-variant-numeric:lining-nums;margin-bottom:4px}

/* ---------- legal protection: tile-grid map ---------- */
.map-legend{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 12px}
.map-legend button{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:6px 12px 5px;background:var(--paper-card);border:1px solid rgba(62,39,35,.4);color:var(--ink);font:inherit;font-size:14px;cursor:pointer}
.map-legend button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.map-legend button:focus-visible,.tile:focus-visible{outline:2px solid var(--raspberry);outline-offset:2px}
.map-legend i{width:14px;height:14px;border:1px solid var(--ink);flex:none}
.c1{background:var(--mint)}
.c2{background:repeating-linear-gradient(135deg,var(--mint) 0 3px,var(--paper-card) 3px 6px)}
.c3{background:var(--paper-card)}
.map-read{min-height:30px;font-size:16px;line-height:1.35;margin-bottom:12px}
.map-read b{font-family:var(--serif);font-weight:400;font-size:22px;margin-right:8px}
.usmap{display:grid;grid-template-columns:repeat(11,minmax(0,1fr));gap:4px;max-width:720px}
.tile{position:relative;grid-row:var(--tr);grid-column:var(--tc);aspect-ratio:1;padding:0;border:1px solid var(--hair);background:none;color:var(--ink);font-family:var(--type);font-size:clamp(10px,1.5vw,14px);letter-spacing:.02em;cursor:pointer;transition:opacity .25s ease}
.tile span{position:relative;z-index:1}
.tile::before{content:"";position:absolute;inset:-1px;border:1px solid var(--ink)}
.tile.c1,.tile.c2,.tile.c3{background:none}
.tile.c1::before{background:var(--mint)}
.tile.c2::before{background:repeating-linear-gradient(135deg,var(--mint) 0 3px,var(--paper-card) 3px 6px)}
.tile.c2 span{background:var(--paper-card);padding:0 2px;line-height:1.1}
.tile.c3::before{background:var(--paper-card)}
.tile[aria-pressed="true"]{z-index:2}
.tile[aria-pressed="true"]::before{box-shadow:0 0 0 2px var(--ink)}
.usmap.f1 .tile:not(.c1),.usmap.f2 .tile:not(.c2),.usmap.f3 .tile:not(.c3){opacity:.22}
.anim .usmap:not(.in) .tile::before{opacity:0;transform:scale(.55)}
.anim .usmap.in .tile::before{transition:opacity .4s ease,transform .45s cubic-bezier(.3,1.3,.5,1);transition-delay:calc(var(--cat) * .7s + var(--i) * 12ms)}
@media (hover:hover) and (pointer:fine){.tile:hover::before{box-shadow:0 0 0 2px var(--ink)}}
.tally{font-family:var(--type);font-size:13.5px;letter-spacing:.03em;line-height:1.5;border-top:1px solid var(--ink);margin-top:18px;padding-top:12px;max-width:720px}
.map-src{font-family:var(--type);font-size:12px;letter-spacing:.04em;color:var(--ink-soft);margin-top:6px}
.map-src a{color:var(--raspberry)}

/* ---------- four challenges ---------- */
.chall{list-style:none;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:34px 36px;counter-reset:ch}
.chall li{counter-increment:ch;display:grid;grid-template-columns:minmax(0,150px) minmax(0,1fr);gap:16px;align-items:start}
.chall img{display:block;width:100%;height:auto}
.chall h4{font-family:var(--serif);font-weight:400;font-size:21px;line-height:1.2;margin:0 0 6px}
.chall h4::before{content:counter(ch);display:block;font-family:var(--type);font-size:12px;color:var(--ink-soft);margin-bottom:4px}
.chall p{font-size:15px;line-height:1.5}

/* ---------- needs by age: horizontal timeline ---------- */
.ages{list-style:none;padding:26px 0 0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative}
.ages::before{content:"";position:absolute;left:0;right:0;top:9px;height:2px;background:var(--ink);transform-origin:left}
.anim .ages:not(.in)::before{transform:scaleX(0)}
.anim .ages.in::before{transition:transform 1.3s var(--ease)}
.ages > li{position:relative;padding:0 14px 16px 0}
.ages > li::before{content:"";position:absolute;left:0;top:-23px;width:13px;height:13px;border-radius:50%;background:var(--paper);border:2px solid var(--ink)}
.ages h4{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.15;margin:0 0 8px}
.ages ul{padding-left:16px;display:grid;gap:6px;font-size:14px;line-height:1.42}
.ages .focus{background:var(--paper-card);box-shadow:0 0 0 1px var(--ink);padding:12px 12px 14px;margin:0 12px 0 -4px}
.ages .focus::before{background:var(--mint);width:17px;height:17px;left:0;top:-25px;border-color:var(--ink)}
.ages .tag{display:block;font-family:var(--type);font-size:11px;letter-spacing:.08em;color:var(--raspberry);margin-bottom:6px}
.ages-end{display:flex;justify-content:space-between;font-family:var(--type);font-size:11.5px;letter-spacing:.08em;color:var(--ink-soft);margin-bottom:6px}
.focus-note{border-top:1px solid var(--ink);margin-top:10px;padding-top:14px;max-width:68ch;font-size:17px;line-height:1.7}

/* ---------- interviews: three still cards ---------- */
.interviews{display:grid;gap:26px}
.interviews .calm{display:grid;grid-template-columns:minmax(0,230px) minmax(0,1fr);gap:12px 36px}
.interviews h4{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.15;margin:0 0 4px}
.interviews .who{font-family:var(--type);font-size:12px;letter-spacing:.05em;color:var(--ink-soft);line-height:1.5}
.interviews .ctx{font-size:14.5px;line-height:1.5;margin-top:10px}
.interviews .src{grid-column:2;font-family:var(--type);font-size:11.5px;letter-spacing:.04em;color:var(--ink-soft);margin-top:6px}
.solutions{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:3px double var(--ink);border-bottom:1px solid var(--ink)}
.solutions li{padding:16px 20px 18px;font-size:15.5px;line-height:1.5}
.solutions li:first-child{padding-left:0}
.solutions li + li{border-left:1px solid var(--rule)}

/* ---------- persona ---------- */
.persona{padding:36px 40px 34px}
.persona .name{font-family:var(--serif);font-size:34px;line-height:1.1}
.persona .who{font-family:var(--type);font-size:12.5px;letter-spacing:.05em;color:var(--ink-soft);margin-top:6px}
.persona blockquote{margin:20px 0 26px;max-width:40ch}
.persona-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--rule)}
.persona-grid > div{padding:14px 20px 0}
.persona-grid > div:first-child{padding-left:0}
.persona-grid > div + div{border-left:1px solid var(--hair)}
.persona-grid h4{font-family:var(--type);font-weight:400;font-size:12px;letter-spacing:.1em;color:var(--raspberry);margin:0 0 8px}
.persona-grid ul{padding-left:16px;display:grid;gap:6px;font-size:14.5px;line-height:1.45}

/* ---------- market research: four plain review cards ---------- */
.reviews-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.rev{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;background:var(--paper-card);border:1px solid rgba(62,39,35,.28);padding:18px 20px}
.rev img{display:block;width:110px;height:110px}
.rev h4{font-family:var(--serif);font-weight:400;font-size:22px;line-height:1.15;margin:0 0 4px}
.rev p{font-size:14.5px;line-height:1.45}
.rev dl{grid-column:1 / -1;display:grid;gap:6px;margin:0;border-top:1px solid var(--hair);padding-top:10px;font-size:14px;line-height:1.45}
.rev dt{display:inline;font-family:var(--type);font-size:11.5px;letter-spacing:.06em;margin-right:6px}
.rev dd{display:inline;margin:0}

/* ---------- small headings ---------- */
.ps-h3{font-family:var(--serif);font-weight:400;font-size:30px;line-height:1.15;margin:0 0 12px}
.ps .lede{max-width:68ch;font-size:17px;line-height:1.7;margin-bottom:18px}
.ps .takeaway{max-width:68ch;font-size:17px;line-height:1.7;margin-top:22px}
.ps .by-label{margin-bottom:14px}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .ages{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@media (max-width:900px){
  .ps-head{grid-template-columns:minmax(0,1fr)}
  .ps-hero{justify-self:center;max-width:420px;margin:26px auto 22px}
  .chall{grid-template-columns:minmax(0,1fr)}
  /* needs by age: vertical on phones and tablets */
  .ages-end{display:none}
  .ages{grid-template-columns:minmax(0,1fr);padding:0 0 0 26px}
  .ages::before{left:6px;right:auto;top:6px;bottom:6px;width:2px;height:auto;transform-origin:top}
  .anim .ages:not(.in)::before{transform:scaleY(0)}
  .ages > li{padding:0 0 22px}
  .ages > li::before{left:-26px;top:5px}
  .ages .focus{margin:0 0 22px;padding:14px}
  .ages .focus::before{left:-28px;top:17px}
}
@media (max-width:700px){
  .night-in{padding:40px 24px 36px}
  .ps .factbox{grid-template-columns:minmax(0,1fr);padding:24px 20px;gap:22px}
  .ps .factbox > div + div{border-left:0;padding-left:0;border-top:1px solid var(--hair);padding-top:18px}
  .bigs,.trio-stats,.solutions,.persona-grid{grid-template-columns:minmax(0,1fr)}
  .bigs > div,.bigs > div:first-child{padding:16px 0}
  .bigs > div + div{border-left:0;border-top:1px solid var(--rule)}
  .trio-stats li,.trio-stats li:first-child{padding:14px 0}
  .trio-stats li + li{border-left:0;border-top:1px solid var(--rule)}
  .solutions li,.solutions li:first-child{padding:14px 0}
  .solutions li + li{border-left:0;border-top:1px solid var(--rule)}
  .persona-grid > div,.persona-grid > div:first-child{padding:14px 0}
  .persona-grid > div + div{border-left:0;border-top:1px solid var(--hair)}
  .interviews .calm{grid-template-columns:minmax(0,1fr)}
  .interviews .src{grid-column:1}
  .calm,.persona{padding:26px 22px 22px}
  .reviews-grid{grid-template-columns:minmax(0,1fr)}
  .usmap{gap:2px}
}
@media (max-width:420px){
  .chall li{grid-template-columns:minmax(0,110px) minmax(0,1fr);gap:12px}
  .rev{grid-template-columns:84px minmax(0,1fr);padding:16px}
  .rev img{width:84px;height:84px}
  .cmp th,.cmp td{padding-right:10px}
  .cmp td + td,.cmp th + th{padding-left:10px}
  .brow{grid-template-columns:82px minmax(0,1fr) 40px}
}

/* ---------- reduced motion: final, still state ---------- */
@media (prefers-reduced-motion:reduce){
  .tile{transition:none}
}

/* =====================================================================
   Part 2: Design Concept, Product Design, the squeeze demo
   ===================================================================== */
.concept-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:3px double var(--ink);border-bottom:1px solid var(--ink)}
.concept-grid article{padding:16px 16px 18px}
.concept-grid article:first-child{padding-left:0}
.concept-grid article:last-child{padding-right:0}
.concept-grid article + article{border-left:1px solid var(--rule)}
.concept-grid h3{font-family:var(--serif);font-weight:400;font-size:20px;line-height:1.18;margin:0 0 8px}
.concept-grid p{font-size:14.5px;line-height:1.5}

/* zoomable figures */
.zoomable{position:relative;display:block;width:100%;padding:0;border:0;background:none;cursor:zoom-in;color:inherit}
.zoomable:focus-visible{outline:2px solid var(--raspberry);outline-offset:4px}
.zoom-chip{position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:var(--paper-card);border:1px solid var(--ink);font-family:var(--sans);font-size:19px;line-height:1;box-shadow:0 0 0 2px var(--mint)}
.zoom-view{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--newsprint);color:var(--ink)}
.zoom-view::backdrop{background:rgba(42,29,26,.6)}
.zoom-close{position:fixed;top:14px;right:16px;z-index:2;font-family:var(--type);font-size:13px;letter-spacing:.06em;background:var(--paper-card);border:1px solid var(--ink);color:var(--ink);padding:9px 14px 7px;cursor:pointer}
.zoom-close:focus-visible{outline:2px solid var(--raspberry);outline-offset:3px}
.zoom-scroll{width:100%;height:100%;overflow:auto;display:flex;touch-action:pan-x pan-y pinch-zoom}
.zoom-scroll img{display:block;margin:auto;width:auto;height:auto;max-width:100%;max-height:100%;cursor:zoom-in}
.zoom-scroll.big img{max-width:none;max-height:none;width:min(260vw,var(--nat,3400px));cursor:zoom-out}

/* sketches, inked on paper */
.sketches{list-style:none;padding:0;display:flex;justify-content:space-between;align-items:flex-end;gap:14px;border-bottom:1px solid var(--ink);padding-bottom:12px}
.sketches li{flex:1 1 0;min-width:0;display:flex;justify-content:center}
.sketches img{display:block;width:100%;max-width:190px;height:auto;max-height:190px;object-fit:contain}

/* flag picker */
.fl-row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:8px;margin-top:6px}
.fl-sw{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 2px 7px;background:none;border:1px solid transparent;color:var(--ink);font-family:var(--sans);font-size:12.5px;line-height:1.2;cursor:pointer;min-width:0}
.fl-sw i{display:block;width:100%;max-width:64px;aspect-ratio:3/2;border:1px solid var(--ink)}
.fl-sw[aria-checked="true"]{background:var(--paper-card);border-color:var(--ink);font-weight:600;box-shadow:0 3px 0 var(--mint),0 4px 0 var(--ink)}
.fl-sw:focus-visible{outline:2px solid var(--raspberry);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.fl-sw:hover i{transform:translateY(-2px)} .fl-sw i{transition:transform .2s ease}}
.fl-stage{margin-top:14px;min-height:430px}
.fl-panel{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:28px;align-items:center;padding:6px 0 18px}
.fl-panel[hidden]{display:none}
.fl-uni{display:block;width:100%;height:auto;max-height:430px;object-fit:contain}
.anim .fl-panel.swap .fl-uni{animation:fl-in .45s var(--ease)}
.anim .fl-panel.swap .fl-syms li{animation:fl-fade .4s ease}
@keyframes fl-in{from{opacity:0;transform:translateY(8px) rotate(-1.5deg)}}
@keyframes fl-fade{from{opacity:0}}
.fl-panel h4{font-family:var(--serif);font-weight:400;font-size:32px;line-height:1.1;margin:0 0 14px}
.fl-syms{list-style:none;padding:0;display:grid;gap:12px}
.fl-syms li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:14px;align-items:center;font-size:15.5px;line-height:1.4}
.fl-syms img{display:block;width:64px;height:64px;object-fit:contain}

/* earrings */
.earrings{display:flex;gap:18px;align-items:flex-end;flex-wrap:wrap}
.earrings .clip{flex:0 1 150px;min-width:0}
.earrings .pic{padding:6px}

/* hardware */
.parts{max-width:460px;margin:8px 0 34px}
.hw-steps{list-style:none;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px 16px}
.hw-steps li{position:relative}
.hw-steps img{display:block;width:100%;height:auto}
.hw-steps .n{position:absolute;left:-4px;top:-8px;z-index:1;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--ink);color:var(--paper);font-family:var(--type);font-size:13px}
.hw-steps p{font-size:14px;line-height:1.4;margin-top:8px}
.hw-after{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px;align-items:start;margin-top:34px}
.hw-after p{font-size:16.5px;line-height:1.6}
.code-clip{margin-top:14px;font-family:var(--type);font-size:13px;background:var(--paper-card);border:1px solid rgba(62,39,35,.28)}
.code-clip summary{padding:9px 12px 7px;cursor:pointer;letter-spacing:.08em}
.code-clip summary:focus-visible{outline:2px solid var(--raspberry);outline-offset:2px}
.code-clip pre{margin:0;padding:4px 12px 12px;white-space:pre-wrap;overflow-wrap:anywhere;font:inherit}
.code-clip code{font:inherit}
.assembly{display:grid;grid-template-columns:1.05fr 1fr 1fr 1fr 1fr;gap:12px;align-items:center;margin-top:30px}
.assembly img{display:block;width:100%;height:auto}

/* ---------- night band inside the article: full width across the page, over the Contents column ---------- */
.band-article{z-index:3;margin-top:56px;margin-bottom:10px;margin-left:calc(-1 * (max(0px,(100vw - 1120px) / 2) + 288px))}
.squeeze{padding-top:52px;padding-bottom:50px;color:var(--paper)}
.sq-title{font-family:var(--serif);font-weight:400;font-size:clamp(34px,4.6vw,56px);line-height:1.05;margin:0 0 26px;color:var(--paper)}
.sq-live{display:grid;grid-template-columns:minmax(0,1fr) minmax(70px,150px) minmax(0,290px);column-gap:18px;align-items:center;max-width:860px;margin:0 auto}
.sq-left{grid-column:1;grid-row:1;display:flex;justify-content:center}
.sq-bt{grid-column:2;grid-row:1;display:flex;justify-content:space-between;align-items:center}
.sq-right{grid-column:3;grid-row:1 / span 2}
.sq-meter-wrap{grid-column:1 / span 2;grid-row:2;padding:22px 28px 0 0}

/* the pendant, with a halftone shadow printed behind it in the pendant's own shape */
.sq-photo{position:relative;width:min(340px,100%);aspect-ratio:768/972;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.sq-photo::before{content:"";position:absolute;inset:0;transform:translate(16px,14px);background-image:var(--dots);background-size:8px 8px;
  -webkit-mask:url(../images/pridesafe-web/pendant-les@384.webp) center/100% 100% no-repeat;mask:url(../images/pridesafe-web/pendant-les@384.webp) center/100% 100% no-repeat}
.sq-photo img{position:relative;display:block;width:100%;height:100%;pointer-events:none;-webkit-user-drag:none}
.anim .sq-live.pressing .sq-photo img{transform:scale(.985);transition:transform .25s ease}
.anim .sq-photo img{transition:transform .3s ease}

/* the horn hotspot */
.sq-horn{position:absolute;left:40.5%;top:17.5%;width:max(44px,20%);aspect-ratio:1;transform:translate(-50%,-50%);padding:0;border:2px solid var(--mint);border-radius:50%;background:rgba(61,251,154,.16);cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;box-shadow:0 0 0 1.5px var(--night)}
.sq-horn span{position:absolute;inset:-2px;border-radius:50%;border:2px solid var(--mint)}
.anim .sq-horn span{animation:sq-ping 2.2s ease-out infinite}
@keyframes sq-ping{from{opacity:.9;transform:scale(1)}70%,to{opacity:0;transform:scale(1.55)}}
.sq-live.pressing .sq-horn{background:rgba(61,251,154,.5)}
.sq-live.pressing .sq-horn span,.sq-live.sent .sq-horn span{animation:none;opacity:0}
.sq-horn:focus-visible{outline:2px solid var(--paper);outline-offset:4px}

/* Bluetooth: a dotted line that pulses from pendant to phone */
.sq-bt i{display:block;width:7px;height:7px;border-radius:50%;background:var(--mint);opacity:.22}
.sq-live.sending .sq-bt i{animation:sq-bt 1s linear infinite}
.sq-bt i:nth-child(1){animation-delay:0s!important}.sq-bt i:nth-child(2){animation-delay:.1s!important}.sq-bt i:nth-child(3){animation-delay:.2s!important}.sq-bt i:nth-child(4){animation-delay:.3s!important}.sq-bt i:nth-child(5){animation-delay:.4s!important}.sq-bt i:nth-child(6){animation-delay:.5s!important}.sq-bt i:nth-child(7){animation-delay:.6s!important}.sq-bt i:nth-child(8){animation-delay:.7s!important}.sq-bt i:nth-child(9){animation-delay:.8s!important}
@keyframes sq-bt{0%,100%{opacity:.22;transform:scale(1)}15%{opacity:1;transform:scale(1.5)}40%{opacity:.22;transform:scale(1)}}

/* the phone: real screens, swapped by opacity */
.sq-screen{position:relative;aspect-ratio:640/1296}
.sq-screen img{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;transition:opacity .35s ease}
.sq-screen img.on{opacity:1}

/* pressure meter */
.sq-meter{position:relative;height:18px;border:1px solid var(--paper);--t:70%}
.sq-meter .fill{position:absolute;inset:1px;background:var(--mint);transform:scaleX(0);transform-origin:left}
.sq-meter .tick{position:absolute;left:var(--t);top:-7px;bottom:-7px;width:2px;background:var(--paper)}
.sq-status{font-family:var(--type);font-size:13px;letter-spacing:.04em;line-height:1.4;color:var(--paper);margin-top:14px;min-height:2.8em}
.sq-again{font-family:var(--type);font-size:12.5px;letter-spacing:.06em;background:none;color:var(--paper);border:1px solid var(--paper);padding:8px 12px 6px;cursor:pointer}
.sq-again:focus-visible{outline:2px solid var(--mint);outline-offset:3px}

/* still version */
.sq-stills{display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;align-items:start}
.sq-stills img{display:block;width:100%;height:auto}
.sq-stills .sq-photo{width:100%}
.sq-stills figure{margin:0}
.sq-stills figcaption{font-family:var(--type);font-size:12.5px;line-height:1.45;letter-spacing:.03em;margin-top:12px;color:var(--paper)}
.sq-stills figcaption b{font-weight:400;display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--mint);color:var(--night);margin-right:6px}
html:not(.anim) .sq-live{display:none}
html:not(.anim) .sq-stills{display:grid}

@media (max-width:1100px){
  .band-article{margin-left:calc(50% - 50vw)}
}
@media (max-width:900px){
  .concept-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .concept-grid article,.concept-grid article:first-child,.concept-grid article:last-child{padding:14px 16px 16px}
  .concept-grid article:nth-child(odd){padding-left:0;border-left:0}
  .concept-grid article:nth-child(even){padding-right:0}
  .concept-grid article:nth-child(n+3){border-top:1px solid var(--rule)}
  .hw-after{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:700px){
  .fl-row{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fl-panel{grid-template-columns:minmax(0,1fr);justify-items:center;gap:12px}
  .fl-uni{max-width:230px;max-height:340px}
  .fl-panel > div{width:100%}
  .fl-stage{min-height:600px}
  .hw-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .assembly{grid-template-columns:repeat(2,minmax(0,1fr))}
  .assembly img:first-child{grid-column:1 / -1;max-width:220px;justify-self:center}
  .sketches{flex-wrap:wrap;justify-content:center}
  .sketches li{flex:0 1 29%}
  .sketches li:first-child,.sketches li:last-child{flex:0 1 44%}
  /* phones: pendant and phone stay side by side, so both show while you press */
  .sq-live{grid-template-columns:minmax(0,1fr) 14px minmax(0,1fr);column-gap:6px}
  .sq-right{grid-row:1}
  .sq-bt{flex-direction:column;align-self:stretch;justify-content:center;gap:9px}
  .sq-bt i{width:6px;height:6px}
  .sq-meter-wrap{grid-column:1 / -1;padding:22px 0 0}
  .sq-stills{grid-template-columns:minmax(0,1fr);max-width:280px;margin:0 auto}
}
@media (prefers-reduced-motion:reduce){
  .sq-screen img,.sq-photo img{transition:none}
  .sq-horn span{animation:none}
}

/* =====================================================================
   Part 3: clickable app, three pendants, storyboard film strip
   ===================================================================== */
.app-demo{display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);grid-template-areas:"phone tabs" "phone panel";grid-template-rows:auto 1fr;column-gap:44px;row-gap:22px;align-items:start}
.app-tabs{grid-area:tabs;display:flex;flex-wrap:wrap;gap:0;border-bottom:1px solid var(--ink)}
.app-tab{flex:1 1 auto;padding:11px 12px 9px;background:none;border:1px solid transparent;border-bottom:0;color:var(--ink);font-family:var(--type);font-size:13px;letter-spacing:.05em;cursor:pointer;margin-bottom:-1px}
.app-tab[aria-selected="true"]{background:var(--paper-card);border-color:var(--ink);box-shadow:inset 0 3px 0 var(--mint)}
.app-tab:focus-visible,.app-thumb:focus-visible{outline:2px solid var(--raspberry);outline-offset:2px}
.app-phone{grid-area:phone;position:relative;aspect-ratio:640/1296;overflow:hidden;border-radius:12% / 6%}
.app-phone img{position:absolute;inset:0;display:block;width:100%;height:100%;opacity:0;pointer-events:none}
.app-phone img.on{opacity:1}
.anim .app-phone img.on{animation:app-slide .36s var(--ease)}
.anim .app-phone.back img.on{animation-name:app-slide-back}
@keyframes app-slide{from{opacity:0;transform:translateX(26px)}}
@keyframes app-slide-back{from{opacity:0;transform:translateX(-26px)}}
.app-panels{grid-area:panel}
.app-panel[hidden]{display:none}
.app-panel h3{font-family:var(--serif);font-weight:400;font-size:34px;line-height:1.1;margin:0 0 8px}
.app-panel p{font-size:17px;line-height:1.6;max-width:44ch}
.app-more{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:12px;margin-top:22px}
.app-thumb{display:flex;flex-direction:column;align-items:center;gap:6px;width:92px;padding:6px 4px;background:none;border:1px solid transparent;color:var(--ink);font-family:var(--sans);font-size:12px;line-height:1.25;cursor:pointer;text-align:center}
.app-thumb img{display:block;width:64px;height:auto}
.app-thumb[aria-pressed="true"]{background:var(--paper-card);border-color:var(--ink)}
@media (hover:hover) and (pointer:fine){.app-thumb img{transition:transform .2s ease}.app-thumb:hover img{transform:translateY(-3px)}}
.app-flow{font-family:var(--type);font-size:13px;letter-spacing:.04em;margin-top:-16px}
.app-flow a{color:var(--raspberry)}

/* pendants hang from a rule like charms */
.charms{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start;border-top:1px solid var(--ink);padding-top:0}
.charm{margin:0;outline:none}
.charm-in{position:relative;display:block}
.charm-in::before{content:"";position:absolute;inset:0;transform:translate(12px,10px);background-image:var(--dots);background-size:7px 7px;opacity:.75}
.charm img{position:relative;display:block;width:100%;height:auto;transform-origin:50% 0}
.charm figcaption{font-family:var(--type);font-size:12.5px;letter-spacing:.05em;margin-top:14px;text-align:center}
.charm:focus-visible{outline:2px solid var(--raspberry);outline-offset:4px}
@keyframes charm-turn{0%{transform:none}30%{transform:perspective(700px) rotateY(18deg) rotate(2.4deg)}65%{transform:perspective(700px) rotateY(-11deg) rotate(-1.6deg)}100%{transform:none}}
@media (hover:hover) and (pointer:fine){.anim .charm:hover img{animation:charm-turn 1.9s ease-in-out}}
.anim .charm:focus-visible img,.anim .charm.swing img{animation:charm-turn 1.9s ease-in-out}
.charm-gay .charm-in::before{-webkit-mask:url(../images/pridesafe-web/charm-gay@360.webp) center/100% 100% no-repeat;mask:url(../images/pridesafe-web/charm-gay@360.webp) center/100% 100% no-repeat}
.charm-trans .charm-in::before{-webkit-mask:url(../images/pridesafe-web/charm-trans@360.webp) center/100% 100% no-repeat;mask:url(../images/pridesafe-web/charm-trans@360.webp) center/100% 100% no-repeat}
.charm-les .charm-in::before{-webkit-mask:url(../images/pridesafe-web/charm-les@360.webp) center/100% 100% no-repeat;mask:url(../images/pridesafe-web/charm-les@360.webp) center/100% 100% no-repeat}

/* storyboard: a film strip with sprocket holes */
.story-band{margin-top:6px}
.story-band .night-ink{padding:46px 0 44px}
.film-nav{display:flex;justify-content:flex-end;gap:8px;max-width:1120px;margin:0 auto 14px;padding:0 32px}
.film-btn{display:grid;place-items:center;width:42px;height:42px;background:none;border:1px solid var(--paper);border-radius:50%;color:var(--paper);font-family:var(--sans);font-size:18px;cursor:pointer}
.film-btn:disabled{opacity:.35;cursor:default}
.film-btn:focus-visible,.film:focus-visible{outline:2px solid var(--mint);outline-offset:3px}
.film{overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:max(32px,calc((100vw - 1056px) / 2));-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--paper) transparent;padding-bottom:12px}
.film ol{list-style:none;display:flex;width:max-content;padding:0 max(32px,calc((100vw - 1056px) / 2))}
.film li{flex:none;width:clamp(250px,42vw,520px);scroll-snap-align:start}
.film figure{margin:0}
.frame{display:block;padding:24px 5px;background-color:#0E0908;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='24'%3E%3Crect x='7' y='7' width='12' height='10' rx='2' fill='%23F3E8DA' fill-opacity='.8'/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='24'%3E%3Crect x='7' y='7' width='12' height='10' rx='2' fill='%23F3E8DA' fill-opacity='.8'/%3E%3C/svg%3E");
  background-repeat:repeat-x;background-position:0 0,0 100%;background-size:26px 24px}
.frame img{display:block;width:100%;height:auto;aspect-ratio:1170/658;object-fit:cover}
.film figcaption{font-size:15px;line-height:1.5;color:var(--paper);padding:14px 22px 0 5px}
.film figcaption b{font-family:var(--type);font-weight:400;font-size:12.5px;display:block;margin-bottom:4px}

@media (max-width:760px){
  .app-demo{grid-template-columns:minmax(0,1fr);grid-template-areas:"tabs" "phone" "panel";grid-template-rows:none}
  .app-phone{width:min(62vw,270px);justify-self:center}
  .app-tab{padding:10px 4px 8px;font-size:12px}
  .app-flow{margin-top:-12px}
  .film li{width:80vw}
  .film ol{padding:0 24px}
  .film{scroll-padding-inline:24px}
  .film-nav{padding:0 24px}
}
@media (max-width:520px){
  .charms{grid-template-columns:repeat(2,minmax(0,1fr))}
  .charm-les{grid-column:1 / -1;max-width:50%;justify-self:center}
}
@media (prefers-reduced-motion:reduce){
  .app-phone img,.charm img{animation:none!important}
  .film{scroll-behavior:auto}
}
/* after the cut: two hardware photos (finished device, sensor test) and the Focus age heading */
.hw-steps.two{grid-template-columns:repeat(2,minmax(0,1fr));max-width:640px}
.ps-h3 .tag{display:inline-block;vertical-align:middle;font-family:var(--type);font-size:12px;letter-spacing:.12em;color:var(--ink);border:2px solid var(--mint);outline:1px solid var(--ink);padding:3px 7px 2px;margin-right:10px}
.factbox .src{margin-top:12px;font-family:var(--type);font-size:10.5px;letter-spacing:.06em;line-height:1.4;color:var(--ink-soft)}
.factbox .src a{color:inherit}