/* chokinghazard.org additions (October 2026): About, For parents and For health care providers pages,
   What to say on Resources, the rating form and activity on Media Ratings, the homepage
   "4 in 5" line, and the footer contact strip. Loaded after compact.css on every page. */
/* chokinghazard.org prototypes: new components only.
   Built on the site's own tokens from site.css (:root): --yellow --hazink --slate --teal --logo
   --mint --aqua --coral --paper --ink --ink2 --disp --mono --serif. Nothing here restyles
   existing site components. */

/* ---------- prototype chrome ---------- */
.px-switch button[aria-pressed="true"]{background:var(--yellow);color:var(--hazink)}
.px-btn:focus-visible,.px-situ button:focus-visible,.px-door:focus-visible{outline:3px solid var(--mint);outline-offset:3px}

/* shared bits */
.px-lab{display:block;font:700 10.5px/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--teal);margin-bottom:10px}
.px-h2{font:900 var(--t-h2)/.95 var(--disp);text-transform:uppercase;letter-spacing:-.02em;color:var(--ink);margin:6px 0 0;text-wrap:balance}
.why .px-h2{color:#fff}
.px-lede{font:400 var(--t-lede)/1.55 var(--serif);color:var(--ink2);margin:14px 0 0;max-width:none}
.why .px-lede{color:#c3dde2}
.px-btn{display:inline-flex;align-items:center;gap:8px;font:700 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;background:var(--hazink);color:var(--yellow);border:2px solid var(--hazink);padding:13px 16px;cursor:pointer;text-decoration:none}
.px-btn:hover{background:var(--yellow);color:var(--hazink)}
.px-btn.mint{background:var(--mint);color:#08171c;border-color:var(--mint)}
.px-btn.mint:hover{background:#fff;border-color:#fff}
.px-src{font:500 12px/1.5 var(--serif);color:var(--ink3);margin:16px 0 0}
.why .px-src{color:#8fb3bb}
.px-sec{padding-top:var(--sec-y);padding-bottom:var(--sec-y)}

/* ---------- homepage: norm strip + what you can do ---------- */
.px-doors{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px;margin-top:26px}
.px-door{grid-column:span 2;position:relative;display:flex;flex-direction:column;gap:10px;background:#fff;border:3px solid var(--hazink);padding:20px 20px 52px;text-decoration:none;color:var(--ink);transition:transform .15s,background .15s}
.px-door.big{grid-column:span 3;background:var(--slate);color:#fff}
.px-door b{font:900 var(--t-h4)/1.05 var(--disp);text-transform:uppercase;letter-spacing:-.01em}
.px-door span:not(.dtk){font:400 16px/1.5 var(--serif);color:var(--ink2)}
.px-door.big span:not(.dtk){color:#c7d9de}
.px-door.big .dtk{color:var(--mint)}
.px-door i{position:absolute;left:20px;bottom:16px;font:700 20px/1 var(--mono);font-style:normal;color:var(--teal)}
.px-door.big i{color:var(--mint)}
.px-door:hover{transform:translateY(-3px);background:var(--mint);color:#08171c}
.px-door:hover span:not(.dtk),.px-door:hover .dtk,.px-door:hover i{color:#08171c}
@media(max-width:900px){.px-doors{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.px-door,.px-door.big{grid-column:span 1}.px-door.big{grid-column:span 2}}
@media(max-width:560px){.px-doors{grid-template-columns:minmax(0,1fr)}.px-door,.px-door.big{grid-column:span 1}}

/* ---------- what to say: situations ---------- */
.px-situ{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;margin-top:20px}
.px-situ button{text-align:left;display:flex;flex-direction:column;gap:8px;background:#fff;border:3px solid var(--ink);padding:16px 16px 18px;cursor:pointer;color:var(--ink)}
.px-situ button span{font:700 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--teal)}
.px-situ button b{font:900 var(--t-h5)/1.08 var(--disp);text-transform:uppercase;letter-spacing:-.01em}
.px-situ button:hover{background:var(--aqua)}
.px-situ button[aria-selected="true"]{background:var(--yellow);border-color:var(--hazink)}
.px-situ button[aria-selected="true"] span{color:var(--hazink)}
@media(max-width:860px){.px-situ{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.px-panels{display:grid;margin-top:4px}
.px-panel{grid-area:1/1;visibility:hidden;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);background:#fff;border:3px solid var(--ink)}
.px-panel.on{visibility:visible}
.px-panel > div{padding:28px 30px}
.px-sayit{background:var(--slate);color:#fff;display:flex;flex-direction:column;justify-content:center}
.px-sayit .px-lab{color:var(--mint)}
.px-big{font:900 clamp(30px,3.6vw,50px)/.98 var(--disp);text-transform:uppercase;letter-spacing:-.02em;margin:0;text-wrap:balance}
.px-alt{margin:16px 0 0;font:400 18px/1.5 var(--serif);color:#c7d9de}
.px-then ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.px-then li{position:relative;padding-left:24px;font:400 17.5px/1.5 var(--serif);color:var(--ink)}
.px-then li::before{content:"";position:absolute;left:0;top:.55em;width:11px;height:11px;background:var(--yellow);border:2px solid var(--hazink)}
.px-then a{color:var(--logo);font-weight:600}
.px-fact{grid-column:1/-1;margin:0;padding:16px 30px;background:var(--aqua);border-top:3px solid var(--ink);font:400 16.5px/1.5 var(--serif);color:var(--ink)}
.px-fact b{font:700 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--logo);margin-right:10px}
@media(max-width:760px){.px-panel{grid-template-columns:minmax(0,1fr)}.px-panel > div{padding:22px 20px}.px-fact{padding:14px 20px}}

/* ---------- what to say: practice chat ---------- */

/* ---------- before you do it ---------- */

/* ---------- parents ---------- */
.px-seg button[aria-pressed="true"]{background:var(--ink);color:var(--mint)}
.px-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin-top:22px}
@media(max-width:860px){.px-two{grid-template-columns:minmax(0,1fr)}}
.px-card{background:#fff;border:3px solid var(--ink);padding:24px 24px 22px;display:flex;flex-direction:column;gap:12px}
.px-card h3{font:900 var(--t-h4)/1.05 var(--disp);color:var(--ink);text-transform:uppercase;margin:0}
.px-card ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.px-card li{position:relative;padding-left:22px;font:400 17px/1.5 var(--serif);color:var(--ink)}
.px-card li::before{content:"";position:absolute;left:0;top:.55em;width:10px;height:10px;background:var(--mint);border:2px solid var(--ink)}
.px-card.warn li::before{background:var(--coral)}
.px-hot{display:flex;flex-wrap:wrap;gap:6px 18px;font:400 15.5px/1.5 var(--serif);color:var(--ink2);border-top:2px solid var(--line);padding-top:12px;margin-top:auto}
.px-hot b{font-weight:700;color:var(--ink)}

/* ---------- educators ---------- */
.px-tl[hidden]{display:none}
.px-tl button[aria-selected="true"]{background:var(--yellow);border-color:var(--hazink)}
.px-tl button[aria-selected="true"] span{color:var(--hazink)}
.px-tl button[aria-selected="true"]:hover{background:var(--yellow)}

/* ---------- media ratings ---------- */
.px-rt{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.px-rt .r{font:700 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--ink2)}
.px-rt .box{font:900 22px/1 var(--disp);border:3px solid var(--hazink);padding:3px 7px 2px;background:var(--yellow);color:var(--hazink)}
.px-rt .box.bae{background:var(--mint)}
.px-rt .tag{font:700 10px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;background:var(--hazink);color:var(--yellow);padding:6px 7px}
.px-rt .tag.bae{color:var(--mint)}
.px-mc b.t{font:900 var(--t-h4)/1.02 var(--disp);text-transform:uppercase;color:var(--ink)}
.px-mc .m{font:700 10.5px/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink3)}
.px-mc p{margin:0;font:400 16px/1.5 var(--serif);color:var(--ink)}

.px-rate{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px;margin-top:24px;align-items:start}
@media(max-width:900px){.px-rate{grid-template-columns:minmax(0,1fr)}}
.px-form{background:#fff;border:3px solid var(--ink);padding:22px 24px;display:grid;gap:20px}
.px-form fieldset{border:0;margin:0;padding:0;display:grid;gap:10px;min-width:0}
.px-form legend{font:900 var(--t-h5)/1.1 var(--disp);text-transform:uppercase;color:var(--ink);padding:0;margin-bottom:10px}
.px-form label.px-l{font:900 var(--t-h5)/1.1 var(--disp);text-transform:uppercase;color:var(--ink)}
.px-form input[type=text],.px-form select,.px-form textarea{font:400 17px/1.4 var(--serif);border:2px solid var(--ink);padding:10px 12px;background:var(--paper);color:var(--ink);width:100%;min-width:0}
.px-form textarea{min-height:84px;resize:vertical}
.px-chips{display:flex;flex-wrap:wrap;gap:6px}
.px-chips label{position:relative}
.px-chips input{position:absolute;opacity:0;pointer-events:none}
.px-chips span{display:inline-block;font:700 11.5px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;border:2px solid var(--ink);padding:10px 12px;cursor:pointer;background:#fff;color:var(--ink)}
.px-chips input:checked + span{background:var(--ink);color:var(--mint)}
.px-chips input:focus-visible + span{outline:3px solid var(--mint);outline-offset:2px}
.px-two-in{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,.6fr);gap:8px}
@media(max-width:520px){.px-two-in{grid-template-columns:minmax(0,1fr)}}
.px-out{position:sticky;top:110px;display:grid;gap:12px}
.px-outcard{background:#fff;border:3px solid var(--hazink);padding:20px 22px;display:flex;flex-direction:column;gap:10px;box-shadow:8px 8px 0 var(--hazink)}
.px-outcard .px-why{border-top:2px solid var(--line);padding-top:10px;font:400 16.5px/1.5 var(--serif);color:var(--ink)}
.px-outcard .px-why em{color:var(--ink3)}
.px-outnote{font:400 15px/1.5 var(--serif);color:var(--ink2);margin:0}

/* ---------- clinicians ---------- */
.px-signs{columns:2;column-gap:28px}
@media(max-width:620px){.px-signs{columns:1}}
.px-signs li{break-inside:avoid;margin-bottom:10px}

/* ---------- hub ---------- */

/* ---------- fixes after first render ---------- */
[hidden]{display:none!important}
.px-h2,.sec h2.px-h2{max-width:none}
.px-then{display:flex;flex-direction:column;justify-content:center}
.rcsec .px-lede{color:#c3dde2}
.px-outcard .px-mc{display:flex;flex-direction:column;gap:6px}
.px-outcard .px-mc b.t{font-size:clamp(26px,2.6vw,36px);line-height:.98}
.px-outcard.is-ch{background:var(--yellow)}
.px-outcard.is-bae{background:var(--teal)}
.px-outcard.is-bae .px-mc b.t,.px-outcard.is-bae .px-why,.px-outcard.is-bae .px-rt .r{color:#fff}
.px-outcard.is-bae .px-mc .m,.px-outcard.is-bae .px-why em{color:#c7ecef}
.px-outcard.is-ch .px-why{border-top-color:rgba(0,0,0,.25)}
.px-outcard.is-bae .px-why{border-top-color:rgba(255,255,255,.35)}
.px-outcard{min-height:260px}
.px-card ul.px-signs{display:block;columns:3;column-gap:28px}
@media(max-width:900px){.px-card ul.px-signs{columns:2}}
@media(max-width:620px){.px-card ul.px-signs{columns:1}}

/* =====================================================================
   Round 2
   ===================================================================== */

/* Square bullets: one rule for every list. The square is 12px and sits centred on the
   first line, so its top is half a line (0.75em at line-height 1.5) minus half its size. */
.px-then li,.px-card li,.px-checks li{position:relative;padding-left:26px;line-height:1.5}
.px-then li::before,.px-card li::before,.px-checks li::before{content:"";position:absolute;left:0;top:calc(.75em - 6px);width:12px;height:12px;box-sizing:border-box;border:2px solid var(--hazink)}
.px-then li::before{background:var(--yellow)}
.px-card li::before{background:var(--mint);border-color:var(--ink)}
.px-card.warn li::before{background:var(--coral)}
.px-checks{margin:0;padding:0;list-style:none;display:grid;gap:10px}
.px-checks li{font:400 17px/1.5 var(--serif);color:var(--ink)}
.px-checks li::before{background:#fff;border-color:var(--ink)}
.px-checks li::after{content:"";position:absolute;left:3px;top:calc(.75em - 4px);width:6px;height:3px;border-left:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(-45deg)}

/* What to say: equal panels */
.px-situ button b{min-height:2.2em}
.px-big{font-size:clamp(28px,3vw,42px)}
.px-sayit{justify-content:center}
.px-panel > div{padding:30px 32px}
.px-then ul{gap:14px}

/* numbered lists */
.px-ol{margin:0;padding:0;list-style:none;counter-reset:ol;display:grid;gap:12px}
.px-ol li{counter-increment:ol;position:relative;padding-left:40px;font:400 17px/1.5 var(--serif);color:var(--ink)}
.px-ol li::before{content:counter(ol);position:absolute;left:0;top:calc(.75em - 13px);width:26px;height:26px;display:grid;place-items:center;font:900 14px/1 var(--disp);background:var(--hazink);color:var(--yellow)}
.px-ol li b{font-weight:700}

/* stat bands */
.px-pstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:24px}
.px-pstats.four{grid-template-columns:repeat(4,minmax(0,1fr))}
.px-pstats > div{background:rgba(0,0,0,.2);border-top:5px solid var(--mint);padding:22px 22px 20px}
.px-pstats b{display:block;font:900 clamp(44px,5vw,72px)/.88 var(--disp);color:var(--mint);letter-spacing:-.02em}
.px-pstats p{margin:12px 0 0;font:400 16.5px/1.5 var(--serif);color:#dcebee}
@media(max-width:1000px){.px-pstats.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.px-pstats,.px-pstats.four{grid-template-columns:minmax(0,1fr)}}

/* chips */
.px-chip{display:inline-block;align-self:flex-start;font:700 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;padding:6px 8px;border:2px solid var(--hazink);background:#fff;color:var(--hazink)}
.px-chip.ch{background:var(--yellow)}
.px-chip.bae{background:var(--mint)}

/* parents: conversation */
.px-b{position:relative;max-width:86%;padding:14px 16px 16px;display:flex;flex-direction:column;gap:8px}
.px-b p{margin:0;font:500 18.5px/1.45 var(--serif)}
.px-who{font:700 10px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase}
.px-b.you{align-self:flex-start;background:var(--mint);color:#08171c;border:2px solid var(--hazink)}
.px-b.you .px-who{color:#0d4f45}
.px-b.kid{align-self:flex-end;background:#fff;color:var(--ink);border:2px solid var(--hazink)}
.px-b.kid .px-who{color:var(--ink3)}
.px-ifchips button[aria-selected="true"]{background:var(--ink);color:#fff}

/* parents: covers */
.px-covers{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:24px}
@media(max-width:860px){.px-covers{grid-template-columns:minmax(0,1fr)}}
.px-cov{margin:0;background:#fff;border:3px solid var(--hazink);display:flex;flex-direction:column;box-shadow:6px 6px 0 var(--hazink)}
.px-covimg{position:relative;aspect-ratio:4/3;overflow:hidden;border-bottom:3px solid var(--hazink);background:var(--slate)}
.px-covimg img{width:100%;height:100%;object-fit:cover;display:block}
.px-covimg .px-chip{position:absolute;top:12px;left:12px}
.px-cov figcaption{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.px-cov figcaption .px-lab{margin:0}
.px-cov figcaption b{font:900 var(--t-h4)/1.05 var(--disp);text-transform:uppercase;color:var(--ink)}
.px-cov figcaption p{margin:0;font:500 18px/1.45 var(--serif);color:var(--ink);background:var(--aqua);padding:12px 14px;border-left:5px solid var(--teal)}

/* parents: next-step bands */
.px-band{border:3px solid var(--hazink);background:#fff;display:flex;flex-direction:column}
.px-bandhead{padding:20px 22px;display:flex;flex-direction:column;gap:8px}
.px-band.coral .px-bandhead{background:var(--coral)}
.px-band.teal .px-bandhead{background:var(--teal);color:#fff}
.px-band .px-bandhead .px-lab{margin:0;color:var(--hazink)}
.px-band.teal .px-bandhead .px-lab{color:var(--mint)}
.px-saybig{margin:0;font:900 clamp(22px,2.2vw,30px)/1.05 var(--disp);text-transform:uppercase;letter-spacing:-.01em}
.px-band .px-ol{padding:20px 22px 4px}
.px-band .px-hot{margin:auto 22px 0;padding:14px 0 18px}

/* parents: go deeper */
.px-deeper{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px;margin-top:22px}
@media(max-width:860px){.px-deeper{grid-template-columns:minmax(0,1fr)}}
.px-book,.px-handout{display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px;align-items:center;background:#fff;border:3px solid var(--ink);padding:20px;text-decoration:none;color:var(--ink)}
.px-book img{width:100%;border:2px solid var(--ink);display:block}
.px-book b,.px-handout b{display:block;margin:8px 0 6px;font:900 var(--t-h4)/1.05 var(--disp);text-transform:uppercase}
.px-book p,.px-handout p{margin:0;font:400 16.5px/1.5 var(--serif);color:var(--ink2)}
.px-book:hover{background:var(--yellow)}
@media(max-width:480px){.px-book,.px-handout{grid-template-columns:90px minmax(0,1fr)}}

/* educators */

/* clinicians */
.px-flow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:24px}
@media(max-width:960px){.px-flow{grid-template-columns:minmax(0,1fr)}}
.px-step3{position:relative;background:#fff;border:3px solid var(--ink);padding:24px 22px 22px;display:flex;flex-direction:column;gap:12px}
.px-step3 + .px-step3::before{content:"";position:absolute;left:-17px;top:42px;width:0;height:0;border:12px solid transparent;border-left-color:var(--ink);z-index:2}
@media(max-width:960px){.px-step3 + .px-step3::before{display:none}}
.px-stepn{font:900 48px/.8 var(--disp);color:var(--teal)}
.px-step3 h3{margin:0;font:900 var(--t-h3)/1 var(--disp);text-transform:uppercase;color:var(--ink)}
.px-step3 > p{margin:0;font:400 16.5px/1.5 var(--serif);color:var(--ink2)}
.px-intake{background:var(--paper);border:2px solid var(--ink);padding:14px 16px;display:flex;flex-direction:column;gap:10px}
.px-intk{font:700 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);border-bottom:1px solid var(--line);padding-bottom:8px}
.px-intake p{margin:0;font:600 17px/1.45 var(--serif);color:var(--ink)}
.px-boxes{display:flex;flex-wrap:wrap;gap:6px 14px}
.px-boxes span{display:inline-flex;align-items:center;gap:7px;font:700 11px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink)}
.px-boxes span::before{content:"";width:13px;height:13px;border:2px solid var(--ink);background:#fff}
.px-dlg{display:flex;flex-direction:column;gap:8px}
.px-b.doc{max-width:100%;background:var(--slate);color:#fff;border:2px solid var(--hazink)}
.px-b.doc .px-who{color:var(--mint)}
.px-b.doc p{font-size:17.5px}
.px-triage{display:grid;gap:4px;margin-top:24px}
.px-tcard{margin:0}
.px-tcard h3{margin:0 0 14px}
.px-tcard ul.px-signs{margin:0;padding:0;list-style:none;columns:3;column-gap:28px}
.px-tcard ul.px-signs li{break-inside:avoid;margin-bottom:10px;position:relative;padding-left:24px;font:400 16.5px/1.5 var(--serif)}
.px-tcard ul.px-signs li::before{content:"";position:absolute;left:0;top:calc(.75em - 6px);width:12px;height:12px;box-sizing:border-box;background:var(--coral);border:2px solid var(--hazink)}
@media(max-width:900px){.px-tcard ul.px-signs{columns:2}}
@media(max-width:600px){.px-tcard ul.px-signs{columns:1}}
.px-clinic{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:22px}
@media(max-width:960px){.px-clinic{grid-template-columns:minmax(0,1fr)}}
.px-cdl{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:center;background:#fff;border:3px solid var(--ink);padding:18px;text-decoration:none;color:var(--ink)}
.px-cdl img{width:96px;height:124px;object-fit:cover;object-position:top;border:2px solid var(--ink);display:block}
.px-cdl b{display:block;margin:8px 0 6px;font:900 var(--t-h5)/1.05 var(--disp);text-transform:uppercase}
.px-cdl p{margin:0;font:400 15.5px/1.45 var(--serif);color:var(--ink2)}
a.px-cdl:hover{background:var(--yellow)}

/* media ratings: suggestion form */
.px-fld{display:grid;gap:8px;min-width:0}
.px-opt-l{font:700 10px/1 var(--mono);letter-spacing:.12em;color:var(--ink3);margin-left:6px;vertical-align:middle}
.px-sendrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;border-top:2px solid var(--line);padding-top:18px}
.px-btn.send{font-size:13px;padding:16px 20px;background:var(--yellow);color:var(--hazink);box-shadow:5px 5px 0 var(--hazink)}
.px-btn.send:hover{background:var(--mint)}
.px-btn.send:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--hazink)}
.px-err{margin:0;font:600 15.5px/1.4 var(--serif);color:#9b2c25;background:#ffe3e1;border:2px solid var(--coral);padding:10px 12px}
.px-form.sent input,.px-form.sent select,.px-form.sent textarea,.px-form.sent .px-chips span{opacity:.55;pointer-events:none}
.px-outcard{position:relative}
.px-stamp{position:absolute;right:16px;top:50%;transform:translateY(-50%) rotate(-12deg);font:900 clamp(38px,4vw,54px)/1 var(--disp);text-transform:uppercase;letter-spacing:.04em;color:var(--hazink);border:6px solid var(--hazink);padding:4px 14px 2px;background:rgba(21,255,200,.92);animation:pxstamp .35s cubic-bezier(.2,1.6,.4,1) both;z-index:2}
@keyframes pxstamp{from{opacity:0;transform:translateY(-50%) rotate(-12deg) scale(1.8)}to{opacity:1;transform:translateY(-50%) rotate(-12deg) scale(1)}}
@media(prefers-reduced-motion:reduce){.px-stamp{animation:none}}
.px-thanks{background:var(--slate);color:#fff;border:3px solid var(--hazink);padding:18px 20px;display:flex;flex-direction:column;gap:10px;align-items:flex-start}
.px-thanks b{font:900 var(--t-h4)/1.05 var(--disp);text-transform:uppercase;color:var(--mint)}
.px-thanks p{margin:0;font:400 16.5px/1.5 var(--serif);color:#dcebee}
.px-thanks .px-btn{background:var(--mint);color:#08171c;border-color:var(--mint)}

/* media ratings: printable sheet */
.px-sheettext{display:flex;flex-direction:column;gap:20px;align-items:flex-start}
.px-sheettext .px-checks li{font-size:18px}
.px-btn[disabled]{opacity:.6;cursor:not-allowed}

/* homepage: below the exhibits */
.px-realwrap{padding-top:10px;padding-bottom:var(--sec-y)}
.px-real{background:var(--slate);color:#fff;padding:28px 30px;border:3px solid var(--hazink);display:flex;flex-direction:column;gap:16px}
.px-real .px-reallead{margin:0;font:900 clamp(24px,2.8vw,38px)/1.02 var(--disp);text-transform:uppercase;letter-spacing:-.015em;color:#fff;text-wrap:balance}
.px-real .px-reallead em{font-style:normal;color:var(--mint)}
.px-realrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;border-top:2px solid rgba(255,255,255,.18);padding-top:16px}
.px-realrow b{font:900 clamp(52px,6.5vw,92px)/.85 var(--disp);color:var(--mint);letter-spacing:-.03em}
.px-realrow p{margin:0;flex:1;min-width:220px;font:400 clamp(17px,1.5vw,20px)/1.5 var(--serif);color:#dcebee}
.px-real .px-src{margin:0;color:#8fb3bb}

/* round 2 fixes after render */
.px-tcard ul.px-signs{display:block!important}
.px-book img{height:auto}
.px-step3 .px-checks{margin-bottom:4px}
/* numbered markers: the 26px box sits on the 25.5px first line (17px x 1.5); px value because the
   marker's own font size would change what em means */
.px-ol li::before{top:0}
/* homepage reality line: compact */
.px-realwrap{padding-top:6px;padding-bottom:calc(var(--sec-y) - 14px)}
.px-real{padding:16px 22px 14px;gap:8px;border-width:2px}
.px-real .px-reallead{font-size:clamp(16px,1.35vw,19px);line-height:1.2;letter-spacing:-.005em}
.px-realrow{gap:2px 14px;padding-top:8px;border-top-width:1px}
.px-realrow b{font-size:clamp(28px,2.6vw,36px);line-height:1}
.px-realrow p{font-size:16px;min-width:180px}
.px-real .px-src{font-size:11.5px;line-height:1.4}

/* =====================================================================
   Round 3
   ===================================================================== */
/* parents: the five facts */
.px-factgrid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.65fr);gap:4px;margin-top:22px}
@media(max-width:900px){.px-factgrid{grid-template-columns:minmax(0,1fr)}}
.px-factlist ul{gap:12px}
.px-factlist li{font-size:18.5px}
.px-evid{background:var(--slate);color:#fff;border:3px solid var(--ink);padding:24px;display:flex;flex-direction:column;gap:10px;justify-content:center}
.px-evid .px-lab{color:var(--mint);margin:0}
.px-evid b{font:900 clamp(34px,3.4vw,48px)/.92 var(--disp);text-transform:uppercase;color:var(--mint);letter-spacing:-.02em}
.px-evid p{margin:0;font:400 16.5px/1.5 var(--serif);color:#dcebee}
.px-evid .px-src{color:#8fb3bb;font-size:12px}

/* parents: a way in, with whole covers */
.px-cov{display:grid;grid-template-columns:136px minmax(0,1fr);flex-direction:initial}
.px-covimg{aspect-ratio:2/3;border-bottom:0;border-right:3px solid var(--hazink);align-self:start;height:100%;min-height:204px}
.px-covimg img{object-fit:cover}
.px-covimg.sq{background:#f6e9ef;display:grid;place-items:center}
.px-covimg.sq img{object-fit:contain;height:auto;width:100%}
.px-cov figcaption{padding:16px 18px 18px;gap:8px}
.px-cov figcaption .px-chip{margin-bottom:2px}
.px-cov figcaption p{font-size:16.5px;padding:10px 12px}
@media(max-width:1100px) and (min-width:861px){.px-covers{grid-template-columns:minmax(0,1fr)}}
@media(max-width:420px){.px-cov{grid-template-columns:104px minmax(0,1fr)}.px-covimg{min-height:156px}}

/* educators: materials */

/* media ratings: write-in */
.px-otherin{font:400 17px/1.4 var(--serif);border:2px solid var(--ink);padding:10px 12px;background:var(--paper);color:var(--ink);width:100%;min-width:0;margin-top:6px}

/* clinicians: pocket card mock + tile titles */
.px-cdl > div > b{display:block;margin:8px 0 6px;font:900 var(--t-h5)/1.05 var(--disp);text-transform:uppercase}
.px-covimg{height:auto;width:100%;min-height:0;min-width:0}
.px-cov{align-items:start}
.px-cov figcaption{min-width:0}
.px-cov{align-items:stretch}
.px-covimg{aspect-ratio:auto;align-self:stretch;height:auto;display:flex;align-items:flex-start;background:var(--slate)}
.px-covimg img{width:100%;height:auto;aspect-ratio:2/3;object-fit:cover}
.px-covimg.sq{background:#f6e9ef;align-items:center}
.px-covimg.sq img{aspect-ratio:1/1;object-fit:contain}

/* printables: real pages in place of the planned mocks */
a.px-handout:hover{background:var(--yellow)}
.px-hthumb{display:block}
.px-hthumb img{display:block;width:100%;height:auto;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--ink);transform:rotate(-3deg);background:#fff}
.px-realsheet{position:relative;display:block;width:100%;max-width:440px;justify-self:center;padding:0 40px 34px 0}
.px-realsheet img{display:block;height:auto;border:2px solid var(--ink);background:#fff}
.px-realsheet .f{position:relative;width:100%;transform:rotate(-2deg);box-shadow:10px 10px 0 var(--hazink);transition:transform .2s}
.px-realsheet .b{position:absolute;top:26px;left:40px;width:calc(100% - 40px);transform:rotate(3deg);box-shadow:0 6px 18px rgba(0,0,0,.18)}
.px-realsheet:hover .f{transform:rotate(-1deg) translateY(-4px)}

/* contact page */
/* footer: the new Contact link */

/* about page */
.px-btn-mint{background:var(--mint);color:var(--hazink);margin-top:26px}
.px-whyrow{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:48px;align-items:center;margin-top:22px}
@media(max-width:860px){.px-whyrow{grid-template-columns:minmax(0,1fr);gap:28px}}
.px-whytext{display:flex;flex-direction:column;gap:16px;align-items:flex-start}
.px-whytext p{margin:0;font:400 var(--t-lede,19px)/1.6 var(--serif);color:var(--ink)}
.px-whytext .px-btn{margin-top:8px}
.px-whysticker{display:block;width:100%;max-width:440px;height:auto;justify-self:center;transform:rotate(-5deg);filter:drop-shadow(0 14px 24px rgba(0,0,0,.25))}
/* nav: the new About link */
/* the New tag on About becomes a dot where the nav is tight */

/* nav: Home only in the "Current site" view */

/* footer: contact line and social accounts under the three site boxes */
.px-fcontact{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px 40px;align-items:center;margin-top:3px;background:rgba(255,255,255,.05);padding:18px 22px}
.px-fcmail,.px-fcsoc{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.px-fcsoc{justify-content:flex-end}
.px-fclab{font:700 10.5px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mint)}
.px-fcmail a{font:900 var(--t-h5)/1.1 var(--disp);color:#fff;text-decoration:none;border-bottom:2px solid rgba(21,255,200,.5)}
.px-fcmail a:hover{color:var(--mint);border-bottom-color:var(--mint)}
.px-fcmail em{font:400 14px/1.4 var(--serif);font-style:normal;color:#9dc2ca}
.px-fcsoc a{display:inline-flex;gap:6px;align-items:baseline;padding:8px 11px;border:1px solid rgba(209,254,255,.28);font:500 12.5px/1 var(--mono);color:#9dc2ca;text-decoration:none}
.px-fcsoc a b{font-weight:700;color:#fff}
.px-fcsoc a:hover{background:var(--mint);border-color:var(--mint);color:#08171c}
.px-fcsoc a:hover b{color:#08171c}
@media(max-width:1100px){.px-fcontact{grid-template-columns:minmax(0,1fr)}.px-fcsoc{justify-content:flex-start}}
@media(max-width:520px){.px-fcsoc .px-fclab{flex-basis:100%}.px-fcsoc a{flex:1 1 calc(50% - 7px);justify-content:center;padding:10px 6px}}
@media(min-width:1101px){
  .px-fcontact{grid-template-columns:repeat(3,minmax(0,1fr));column-gap:3px}
  .px-fcsoc{grid-column:2/4;flex-wrap:nowrap;gap:8px}
  .px-fcsoc a{padding:8px 10px;white-space:nowrap}
  .px-fcsoc .px-fclab{margin-right:4px;white-space:nowrap}
}

/* footer site links in three columns: About | Resources | Media Ratings / Learn More | Short Film | Donate */
.ftop .fnav-site{grid-template-columns:max-content max-content minmax(max-content,1fr)!important;column-gap:clamp(18px,2.4vw,34px)!important;justify-content:start!important;width:100%!important}
.ftop .fnav-site a{white-space:nowrap!important}

/* Rate it yourself: "Something else" is a text box that fills the rest of the chip row */
.px-chips input.px-otherin{position:static;opacity:1;pointer-events:auto;flex:1 1 180px;min-width:160px;width:auto;margin:0;padding:6px 12px;font:400 16px/1.2 var(--serif);background:var(--paper);color:var(--ink);border:2px solid var(--ink)}
.px-chips input.px-otherin::placeholder{color:var(--ink2);opacity:1;font-style:italic}
.px-chips input.px-otherin:focus{outline:3px solid var(--mint);outline-offset:2px}
.px-chips input.px-otherin.on{background:var(--paper);color:var(--ink);box-shadow:inset 0 -4px 0 var(--mint)}
@media(min-width:1000px){.ftop .fnav-site{width:calc(100% - 44px)!important;justify-self:center!important}}
@media(min-width:1000px) and (max-width:1120px){.ftop .fnav-site{column-gap:14px!important;width:calc(100% - 24px)!important}}

/* footer: divider between Contact and Follow SafeBAE */
@media(min-width:1101px){.px-fcsoc{border-left:1px solid rgba(209,254,255,.22);padding-left:28px}}
@media(max-width:1100px){.px-fcsoc{border-top:1px solid rgba(209,254,255,.22);padding-top:14px}}
@media(min-width:1101px){.px-fcsoc{justify-content:flex-start}.px-fcsoc a{flex:1 1 0;justify-content:center}}

/* parents, A way in: three matching cards, each image fills its column */
.px-cov{grid-template-columns:150px minmax(0,1fr)}
.px-covimg,.px-covimg.sq{position:relative;display:block;background:var(--slate);min-height:0;height:auto;align-self:stretch}
.px-covimg img,.px-covimg.sq img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:center top}
.px-covimg.sq{background:#f8f8f8}
.px-covimg.sq img{object-fit:contain;object-position:center}
@media(max-width:420px){.px-cov{grid-template-columns:110px minmax(0,1fr)}}
/* parents, If it comes up: linked hotlines */
.px-hot a{color:inherit;text-decoration:underline;text-decoration-color:rgba(19,132,143,.5);text-underline-offset:3px}
.px-hot a:hover{color:var(--teal);text-decoration-color:var(--teal)}
/* footer: Contact and Follow SafeBAE as two boxes, split like the three above */
.px-fcontact{background:none;padding:0;gap:3px}
.px-fcmail,.px-fcsoc{background:rgba(255,255,255,.05);padding:18px 22px;border:0!important}
@media(min-width:1101px){.px-fcsoc{padding-left:22px!important}}
@media(max-width:1100px){.px-fcsoc{padding-top:18px!important}}
@media(max-width:1100px){.px-cov{grid-template-columns:124px minmax(0,1fr)}}
@media(max-width:560px){.px-cov{grid-template-columns:110px minmax(0,1fr)}.px-covimg img{object-fit:contain;object-position:center top}}

/* resources: What to say */
.px-picklab{margin-top:26px}
.px-fact a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* homepage: one intro for the numbers section */
/* footer: both boxes the same height */
.px-fcontact{align-items:stretch}
.px-fcsoc{align-content:center}

/* ===== About page, round 2 ===== */
.px-abphoto{position:relative;margin:34px 0 0;border:3px solid var(--hazink);box-shadow:12px 12px 0 var(--hazink);background:var(--slate)}
.px-abphoto > img:first-child{display:block;width:100%;height:clamp(300px,42vw,560px);object-fit:cover;object-position:center 30%}
.px-abphoto figcaption{position:absolute;left:0;bottom:0;background:var(--yellow);color:var(--hazink);border-top:3px solid var(--hazink);border-right:3px solid var(--hazink);font:700 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;padding:10px 14px}
.px-abstats{margin-top:46px}
.px-story{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:44px;align-items:start;margin-top:30px}
@media(max-width:900px){.px-story{grid-template-columns:minmax(0,1fr);gap:26px}}
.px-storytext{display:flex;flex-direction:column;gap:16px}
.px-storytext p{margin:0;font:400 var(--t-lede,19px)/1.6 var(--serif);color:var(--ink)}
.px-storylinks{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
.px-btn-ghost{background:#fff;color:var(--ink);border:2px solid var(--ink)}
.px-btn-ghost:hover{background:var(--mint)}
.px-vbtns{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.px-vlink{font:700 12px/1.4 var(--mono);letter-spacing:.1em;text-transform:uppercase;color:#fff;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.5)}
.px-vlink:hover{color:var(--mint)}
.px-shelves{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:26px}
@media(max-width:960px){.px-shelves{grid-template-columns:minmax(0,1fr)}}
.px-shelf{display:flex;flex-direction:column;background:#fff;border:3px solid var(--hazink)}
.px-shelf h3{margin:0;padding:16px 20px;font:900 var(--t-h5)/1.1 var(--disp);text-transform:uppercase;color:var(--hazink);border-bottom:3px solid var(--hazink)}
.px-shelf.s1 h3{background:var(--yellow)}
.px-shelf.s2 h3{background:var(--mint)}
.px-shelf.s3 h3{background:var(--coral)}
.px-shelf a{position:relative;flex:1;display:flex;flex-direction:column;gap:4px;padding:14px 44px 14px 20px;border-bottom:1px solid var(--line,#d6dcdc);text-decoration:none;color:var(--ink)}
.px-shelf a:last-child{border-bottom:0}
.px-shelf a::after{content:"↗";position:absolute;right:18px;top:15px;font:700 16px/1 var(--serif);color:var(--teal)}
.px-shelf a b{font:700 17px/1.25 var(--serif);color:var(--ink)}
.px-shelf a span{font:400 15px/1.45 var(--serif);color:var(--ink2)}
.px-shelf a:hover{background:var(--aqua)}

/* parents: sources sit tight under what they support; a smaller facts card */
.px-srcstats{margin-top:10px}
.px-ledesrc{margin-top:22px;margin-bottom:0}
.px-srctight{margin-top:6px}
.px-factgrid{grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr)}
.px-factlist{padding-bottom:22px}
.px-evid{gap:8px;padding:20px 22px}
.px-evid b{font-size:clamp(28px,2.9vw,40px);line-height:.95;white-space:nowrap}
.px-evid p{font-size:16px;line-height:1.5}
.px-evid .px-src{margin-top:2px;font-size:12.5px}

/* About, round 3: story and student photo side by side in the opening section */
.px-abhero .px-story{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:stretch;margin-top:34px}
@media(max-width:900px){.px-abhero .px-story{grid-template-columns:minmax(0,1fr);gap:26px}}
.px-abhero .px-abphoto{margin:0;display:flex;flex-direction:column;min-height:320px;box-shadow:10px 10px 0 var(--hazink)}
.px-abhero .px-abphoto > img:first-child{flex:1;height:100%;min-height:320px;max-height:none;object-fit:cover;object-position:center 30%}
@media(max-width:900px){.px-abhero .px-abphoto > img:first-child{height:auto;aspect-ratio:5/4;flex:none}}
.px-abhero .px-storytext{display:flex;flex-direction:column;gap:14px;justify-content:center}
.px-abhero .px-storytext .kick{margin:0}
.px-abhero .px-storytext h2{margin:0;font:900 var(--t-h3)/1.02 var(--disp);text-transform:uppercase;color:#fff;letter-spacing:-.01em}
.px-abhero .px-storytext p{margin:0;font:400 17px/1.6 var(--serif);color:#dcebee}
.px-abhero .px-storylinks{margin-top:4px}
.px-abhero .px-abstats{margin-top:34px}
.px-storylinks{align-items:center}
.px-storylinks .px-btn{margin-top:0}

/* media ratings: a compact Rate it yourself section, small sheet in one column */
.px-sheetrow2{display:grid;grid-template-columns:230px minmax(0,1fr);gap:56px;align-items:center}
@media(max-width:760px){.px-sheetrow2{grid-template-columns:minmax(0,1fr);gap:30px}.px-realsheet.sm{justify-self:start}}
.px-realsheet.sm{max-width:230px;padding:0 22px 20px 0}
.px-realsheet.sm .f{box-shadow:7px 7px 0 var(--hazink)}
.px-realsheet.sm .b{top:14px;left:22px;width:calc(100% - 22px)}
.px-sheetrow2 .px-sheettext{gap:14px}
.px-sheetrow2 .px-sheettext .kick,.px-sheetrow2 .px-sheettext .px-h2,.px-sheetrow2 .px-sheettext .px-lede{margin:0}
.px-sheetrow2 .px-checks li{font-size:17px}

/* ===== site-only rules ===== */
/* the homepage "4 in 5" box keeps its hazard-tape frame */
.px-real{position:relative;border:0!important;margin:7px}
.px-real::after{content:"";position:absolute;inset:-7px;border:6px solid transparent;border-image:repeating-linear-gradient(-45deg,var(--yellow) 0 9px,var(--hazink) 9px 18px) 6;pointer-events:none}
/* spam trap on the rating form: hidden from people, filled in only by bots */
.px-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden}
/* Resources: For parents / For health care providers */
.px-doors .px-door.half{grid-column:span 3}
@media(max-width:900px){.px-doors .px-door.half{grid-column:span 1}}
.px-adults .px-doors{margin-top:22px}

/* after sending, the hidden radio buttons stay hidden */
.px-form.sent .px-chips input[type=radio]{opacity:0}
.px-form.sent .px-chips input.px-otherin{opacity:.55;pointer-events:none}

/* Homepage feed: "The reality" card, the one dark exhibit (replaced the 4-in-5 box under the feed) */
.fc-real{background:var(--slate)}
.feedwrap .fc-real{border-color:var(--hazink)}
.ftag.real{background:var(--mint);color:#08171c}
.freal{display:flex;flex-direction:column;gap:6px;padding:16px 16px 18px;background:rgba(0,0,0,.22);border:1px solid rgba(255,255,255,.14)}
.freal .frk{font:700 10px/1.3 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#9fc4cc}
.freal b{font:900 64px/.9 var(--disp);color:var(--mint);letter-spacing:-.03em;margin-top:4px}
.freal .frt{font:400 17px/1.4 var(--serif);color:#fff}
.freal .frow{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:10px}
.freal .frow i{height:26px;background:var(--mint)}
.freal .frow i.off{background:transparent;border:2px solid var(--coral)}
.fc-real .fcap{color:#dcebee}
.fc-real .fcap .fsrc{color:#8fb3bb!important}

/* Media Ratings top: the rating card on the left, what the two ratings mean on the right */
.x-roomgrid{display:grid;gap:30px}
@media(min-width:1000px){
  .x-roomgrid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,4vw,60px);align-items:center}
  .x-roomgrid .x-player{max-width:none!important;margin:0!important;padding:3.7% 6%!important}
}
.x-key{display:flex;flex-direction:column;gap:16px;min-width:0}
.x-key .kick{margin:0}
.x-krow{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px;align-items:start;padding-top:16px;border-top:1px solid rgba(255,255,255,.18)}
.x-kbox{font:900 32px/.85 var(--disp);letter-spacing:-.02em;padding:5px 8px 7px;border:4px solid var(--hazink);min-width:92px;text-align:center}
.x-krow.ch .x-kbox{background:var(--yellow);color:var(--hazink)}
.x-krow.bae .x-kbox{background:var(--teal);color:var(--mint);border-color:var(--mint)}
.x-krow b{display:block;font:900 clamp(18px,1.6vw,22px)/1.05 var(--disp);text-transform:uppercase;letter-spacing:-.005em;color:#fff}
.x-krow p{margin:7px 0 0;font:400 17px/1.5 var(--serif);color:#c7d9de;max-width:none}
.x-ktags{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.x-ktags li{font:700 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:6px 8px 5px;background:var(--yellow);color:var(--hazink)}
.x-krow.bae .x-ktags li{background:var(--mint)}
@media(max-width:520px){.x-krow{grid-template-columns:minmax(0,1fr);gap:12px}.x-kbox{justify-self:start}}

/* For adults: its own band on Drew's night-sky photo, on Resources and Learn More */
.band.b-adults{min-height:0;display:block;padding:clamp(44px,6vw,76px) 0 clamp(48px,6.5vw,80px)}
.band.b-adults::before{
  background-image:linear-gradient(90deg,rgba(8,16,30,.45) 0%,rgba(8,16,30,.15) 55%,rgba(8,16,30,0) 100%),url("../img/band-sky.jpg");
  background-blend-mode:normal;background-position:center 45%}
.band.b-adults h2{margin:0}
.band.b-adults .px-doors{margin-top:26px}
.band.b-adults .px-door{border-color:var(--hazink);box-shadow:6px 6px 0 rgba(0,0,0,.35)}
@media(max-width:640px){.band.b-adults{min-height:0;padding:40px 0 44px}}

/* Media Ratings form: optional reply email beside the Send button */
.px-sendrow{align-items:flex-end}
.px-replyfld{flex:1 1 260px}
.px-form input[type=email]{font:400 17px/1.4 var(--serif);border:2px solid var(--ink);padding:10px 12px;background:var(--paper);color:var(--ink);width:100%;min-width:0}
.px-form input[type=email]::placeholder{color:var(--ink2);opacity:1}