/* policies/policies.css. Build PM 2026-09-25 wrote the minimal sheet; Design PM's cohesion pass 2026-09-25
   put it on the site system. Loads after tokens.css and base.css and restates neither.
   Every section is a native <details> (load-bearing: the full text is in the DOM with scripts off, so a
   10DLC reviewer opening /privacy sees real content); this sheet only makes each one read as the homepage
   accordion: the 34px tint tile at --r-tile, a 20px stroke glyph in cornflower-press, 16px/800 title,
   the rotating chevron. Tokens only: no hex literal outside the allowlist (#fff). */

/* Page head: the h1 takes the hero h1's size at 390 (clamp top 26px/800), the lede is a sentence in ink,
   the date is a label and takes the label floor. */
.pol-h1{margin:var(--sp-2) 0 var(--sp-2);font-size:26px;line-height:1.16;font-weight:800;letter-spacing:-.01em;color:var(--navy)}
.pol-lede{margin:0;font-size:15px;line-height:1.5;color:var(--ink);text-wrap:pretty}
.pol-date{margin:var(--sp-2) 0 3px;font-size:12.5px;font-weight:700;color:var(--muted)}
.pol-note{margin:0 0 var(--sp-4);font-size:13px;line-height:1.5;color:var(--ink)}   /* a sentence takes ink; --muted is the label floor */

/* Sections: the homepage .acc / .acc-head, on a native <details>. Ids choices, privacy, sms, ai and terms
   are policies/app.js's contract and do not change. */
details.pol{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);margin:0 0 12px;overflow:hidden}
details.pol > summary{list-style:none;display:flex;align-items:center;gap:12px;padding:15px 16px;cursor:pointer;color:var(--navy)}
details.pol > summary::-webkit-details-marker{display:none}
details.pol > summary .ico{width:34px;height:34px;flex:0 0 auto;border-radius:var(--r-tile);background:var(--tint);display:flex;align-items:center;justify-content:center}
details.pol > summary .ico svg{width:20px;height:20px;stroke:var(--cornflower-press);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
details.pol > summary b{flex:1;font-size:16px;font-weight:800;line-height:1.2}
details.pol > summary .chev{display:flex;flex:0 0 auto;transition:transform .28s cubic-bezier(.34,1.56,.64,1)}
details.pol > summary .chev svg{width:20px;height:20px;stroke:var(--cornflower-press);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
details.pol[open] > summary .chev{transform:rotate(180deg)}
@media (prefers-reduced-motion:reduce){details.pol > summary .chev{transition:none}}
details.pol > summary:focus-visible{outline-offset:-4px;border-radius:var(--r-card)}   /* details.pol clips overflow, so the ring sits inside the card, as on the homepage accordion */

/* Body: the homepage .acc-body padding; sentences in ink, sub-headings navy. */
.pol-body{padding:2px 16px 17px;font-size:14.5px;line-height:1.55;color:var(--ink)}
.pol-body h3{margin:var(--sp-6) 0 6px;font-size:15px;font-weight:800;line-height:1.25;color:var(--navy)}   /* kg 2026-09-25: room between sub-sections, 24 not 16 */
.pol-body h3:first-child{margin-top:4px}
.pol-body p{margin:0 0 10px;text-wrap:pretty}
.pol-body p:last-child{margin-bottom:0}
.pol-body ul{margin:0 0 10px;padding-left:20px}
.pol-body li{margin:0 0 6px}
.pol-body b{color:var(--navy)}
.pol-list{margin:0 0 10px}
.pol-list dt{margin:var(--sp-4) 0 2px;font-weight:800;color:var(--navy)}
.pol-list dt:first-child{margin-top:4px}
.pol-list dd{margin:0}

/* Contact: a boxed group inside the white card, the --panel box the Follow panel and the event details use. */
.pol-contact{margin:var(--sp-4) 0 0;padding:16px;border-radius:var(--r-card);background:var(--panel);border:1px solid var(--line)}
.pol-contact h2{margin:0 0 6px;font-size:16px;font-weight:800;line-height:1.2;color:var(--navy)}
.pol-contact p{margin:0;font-size:14.5px;line-height:1.55;color:var(--ink);text-wrap:pretty}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Copy-edit structure pass 2026-09-25 (Design PM, kg's review): label and answer pairs, lists set as lists,
   and the contact block as two labeled ways to reach a person. */
.pol-list--tight dt{margin-top:14px}
.pol-body ul li{text-wrap:pretty}
.pol-ways{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:10px 0 0;font-size:14.5px;line-height:1.55}
.pol-ways dt{font-weight:800;color:var(--navy)}
.pol-ways dd{margin:0;min-width:0;overflow-wrap:anywhere}
.pol-ways address{font-style:normal}