/* Bail Guard, shared styles */
:root{
  color-scheme: light;
  --surface:#fcfcfb; --plane:#f9f9f7; --raised:#fff;
  --ink:#0b0b0b; --ink-2:#52514e; --muted:#898781;
  --grid:#e1e0d9; --baseline:#c3c2b7;
  --accent:#2a78d6; --accent-soft:#cde2fb;
  --icon:#e0620d;                     /* zing-bail orange, tuned for the light surface */
  --s1:#2a78d6; --s2:#eb6834; --s3:#1baf7a; --s4:#eda100;
  --border:rgba(11,11,11,.10);
  --shadow:0 1px 2px rgba(11,11,11,.05),0 8px 24px rgba(11,11,11,.06);
}
@media (prefers-color-scheme:dark){
  :root:where(:not([data-theme="light"])){
    color-scheme: dark;
    --surface:#1a1a19; --plane:#0d0d0d; --raised:#212120;
    --ink:#fff; --ink-2:#c3c2b7; --muted:#898781;
    --grid:#2c2c2a; --baseline:#383835;
    --accent:#3987e5; --accent-soft:#184f95;
    --icon:#ff9a4d;
    --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
    --border:rgba(255,255,255,.10);
    --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.36);
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --surface:#1a1a19; --plane:#0d0d0d; --raised:#212120;
  --ink:#fff; --ink-2:#c3c2b7; --muted:#898781;
  --grid:#2c2c2a; --baseline:#383835;
  --accent:#3987e5; --accent-soft:#184f95;
    --icon:#ff9a4d;
  --s1:#3987e5; --s2:#d95926; --s3:#199e70; --s4:#c98500;
  --border:rgba(255,255,255,.10);
  --shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.36);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--plane);color:var(--ink);font-family:system-ui,-apple-system,"Segoe UI",sans-serif;font-size:17px;line-height:1.62;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{line-height:1.14;letter-spacing:-.022em;margin:0;font-weight:645}
p{margin:0}
a{color:var(--accent)}
img{max-width:100%;height:auto;display:block}
.wrap{width:min(1060px,100% - 3rem);margin-inline:auto}
.narrow{width:min(760px,100%);margin-inline:auto}
section{padding:clamp(3.2rem,6vw,5rem) 0}
.band{background:var(--surface);border-block:1px solid var(--border)}
.center{text-align:center;margin-inline:auto}

/* nav */
.nav{position:sticky;top:0;z-index:60;background:color-mix(in srgb,var(--plane) 90%,transparent);backdrop-filter:saturate(1.6) blur(12px);border-bottom:1px solid var(--border)}
.nav-in{display:flex;align-items:center;gap:1.15rem;height:64px}
.brand{display:flex;align-items:center;gap:.55rem;font-weight:680;letter-spacing:-.02em;text-decoration:none;color:var(--ink);margin-right:auto;font-size:1.05rem}
.brand svg{width:25px;height:25px;flex:none;color:var(--ink)}
.navlink{color:var(--ink-2);text-decoration:none;font-size:.91rem;font-weight:520;white-space:nowrap}
.navlink:hover,.navlink[aria-current="page"]{color:var(--ink)}
@media (max-width:700px){.navlink{font-size:.84rem}}
@media (max-width:520px){.nav-in{gap:.75rem}.brand span{display:none}}
.theme-btn{border:1px solid var(--border);background:var(--raised);color:var(--ink-2);width:34px;height:34px;border-radius:9px;cursor:pointer;display:grid;place-items:center;flex:none}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.72rem 1.2rem;border-radius:10px;text-decoration:none;font-size:.94rem;font-weight:570;border:1px solid transparent;cursor:pointer;white-space:nowrap}
.btn-primary{background:var(--accent);color:#fff}
.btn-primary:hover{filter:brightness(1.08)}
.btn-ghost{background:var(--raised);color:var(--ink);border-color:var(--border)}
.btn-ghost:hover{border-color:var(--baseline)}

/* hero */
.hero{padding:clamp(2.8rem,6vw,4.2rem) 0 clamp(1.8rem,3vw,2.4rem);text-align:center}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:.77rem;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 24%,transparent);padding:.32rem .78rem;border-radius:999px}
.vision{font-size:clamp(2rem,4.5vw,3.3rem);font-weight:720;letter-spacing:-.038em;line-height:1.06;margin:1.1rem auto 0;text-wrap:balance}
.vision em{font-style:normal;color:var(--accent)}
.lede{font-size:clamp(1.02rem,1.6vw,1.18rem);color:var(--ink-2);max-width:60ch;margin:1.1rem auto 0}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:2.3rem}
.stat{background:var(--surface);padding:1.2rem 1rem;text-align:center}
.stat .v{font-size:clamp(1.8rem,3.5vw,2.4rem);font-weight:690;letter-spacing:-.03em;line-height:1}
.stat .l{font-size:.85rem;color:var(--ink-2);margin-top:.4rem}
.stat .n{font-size:.76rem;color:var(--muted);margin-top:.1rem}

/* used-in band */
.backers{margin-top:2rem;text-align:center}
.backers .cap{font-size:.79rem;font-weight:640;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.logos{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:.95rem}
.logo{display:inline-flex;flex-direction:column;align-items:flex-start;gap:.15rem;padding:.65rem 1.05rem;border:1px solid var(--border);border-radius:10px;background:var(--surface);text-align:left}
.logo b{color:var(--ink);font-weight:640;font-size:.92rem}
.logo i{font-style:normal;color:var(--muted);font-size:.75rem}

/* section dividers */
.divider{border-top:1px solid var(--border);padding-top:1.35rem;margin-bottom:2.2rem;display:flex;align-items:baseline;gap:1rem;flex-wrap:wrap}
.divider .num{font-size:1.15rem;font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}
.divider .name{font-size:1.28rem;font-weight:670;color:var(--ink);letter-spacing:-.01em}
.divider .sub{font-size:.92rem;color:var(--muted);margin-left:auto}
@media (max-width:620px){.divider .sub{margin-left:0;flex-basis:100%}}
.sec-head{margin-bottom:2rem}
.sec-head h2{font-size:clamp(1.55rem,3vw,2.1rem)}
.sec-head p{color:var(--ink-2);margin-top:.8rem;max-width:62ch}
.sec-head.center p{margin-inline:auto}

/* cards + grids */
.card{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:clamp(1.15rem,2.4vw,1.7rem)}
.grid{display:grid;gap:1rem}
.g2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(215px,1fr))}

/* intro split: photo + video */
.split{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(1.2rem,3.5vw,2.4rem);align-items:center}
@media (max-width:880px){.split{grid-template-columns:1fr}}
.diagram{background:#fff;border:1px solid var(--border);border-radius:14px;padding:.85rem;box-shadow:var(--shadow)}
.video{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--surface);border:1px solid var(--border);box-shadow:var(--shadow)}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.cap{margin-top:.55rem;font-size:.92rem;color:var(--ink-2);line-height:1.5}

/* problem */
.hits{display:grid;gap:.55rem}
.hit{display:flex;gap:.85rem;align-items:baseline;padding:.8rem 1.05rem;background:var(--surface);border:1px solid var(--border);border-radius:10px;flex-wrap:wrap}
.hit b{font-weight:635;white-space:nowrap}
.hit b a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--baseline)}
.hit b a:hover{color:var(--accent);border-color:var(--accent)}
.hit span{color:var(--ink-2);font-size:.93rem;flex:1;min-width:220px}
.who{display:grid;grid-template-columns:repeat(auto-fit,minmax(148px,1fr));gap:1px;background:var(--border);border:1px solid var(--border);border-radius:12px;overflow:hidden;margin-top:1.3rem}
.who div{background:var(--surface);padding:.8rem .95rem;font-size:.89rem;color:var(--ink-2)}
.who div b{display:block;color:var(--ink);font-weight:625;font-size:.93rem}

/* law */
.law{background:var(--surface);border:1px solid var(--border);border-left:4px solid var(--accent);border-radius:0 14px 14px 0;padding:clamp(1.35rem,3vw,2rem)}
.law-tag{font-size:.79rem;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--accent)}
.law blockquote{margin:.95rem 0 0;font-size:clamp(1.03rem,1.9vw,1.24rem);line-height:1.5;border:0;padding:0}
.law cite{display:block;margin-top:.95rem;font-style:normal;font-size:.86rem;color:var(--muted)}

/* chart */
.chart-title{font-weight:630;font-size:1.03rem}
.chart-sub{color:var(--muted);font-size:.85rem;margin-top:.2rem}
.donut-wrap{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.3rem,4vw,2.6rem);align-items:center;margin-top:1.5rem}
@media (max-width:680px){.donut-wrap{grid-template-columns:1fr;justify-items:center}}
.donut{width:230px;height:230px;flex:none}
.donut circle{fill:none;stroke-width:26}
.legend{display:grid;gap:.5rem;width:100%}
.lg{display:grid;grid-template-columns:12px 1fr auto auto;gap:.7rem;align-items:center;padding:.35rem .2rem;border-radius:7px}
.lg i{width:12px;height:12px;border-radius:3px;display:block}
.lg .nm{color:var(--ink-2);font-size:.92rem}
.lg .vl{font-weight:625;font-variant-numeric:tabular-nums}
.lg .pc{color:var(--muted);font-size:.85rem;font-variant-numeric:tabular-nums;min-width:3.6em;text-align:right}
.bars{margin-top:1.5rem;display:flex;flex-direction:column;gap:2px}
.bar-row{display:grid;grid-template-columns:98px 1fr;align-items:center;gap:.8rem;padding:.26rem 0;border-radius:6px}
.bar-name{font-size:.88rem;color:var(--ink-2);text-align:right}
.bar-track{display:flex;align-items:center;gap:.6rem}
.bar-fill{height:22px;border-radius:0 4px 4px 0;min-width:2px}
.bar-val{font-size:.86rem;font-weight:600;font-variant-numeric:tabular-nums}
.axis{margin-top:.85rem;padding-left:calc(98px + .8rem);border-top:1px solid var(--grid);display:flex;justify-content:space-between}
.axis span{font-size:.73rem;color:var(--muted);font-variant-numeric:tabular-nums;padding-top:.3rem}
.toggle{margin-top:1.4rem;display:flex;gap:.4rem;flex-wrap:wrap}
.toggle button{font:inherit;font-size:.81rem;padding:.34rem .75rem;border-radius:7px;cursor:pointer;border:1px solid var(--border);background:transparent;color:var(--ink-2)}
.toggle button[aria-pressed="true"]{background:var(--raised);color:var(--ink);border-color:var(--baseline)}
table{width:100%;border-collapse:collapse;margin-top:1.15rem;font-size:.89rem}
th,td{text-align:right;padding:.52rem .6rem;border-bottom:1px solid var(--grid);font-variant-numeric:tabular-nums}
th:first-child,td:first-child{text-align:left;font-variant-numeric:normal}
th{color:var(--muted);font-weight:600;font-size:.78rem}
tfoot td{font-weight:650;border-bottom:none}
[hidden]{display:none !important}

.caveat{border-left:3px solid var(--accent);background:color-mix(in srgb,var(--accent) 6%,transparent);padding:1.05rem 1.25rem;border-radius:0 10px 10px 0;margin-top:1.9rem}
.caveat h3{font-size:1rem}
.caveat p,.caveat li{color:var(--ink-2);font-size:.91rem}
.caveat ul{margin:.5rem 0 0;padding-left:1.1rem}

/* journey */
.journey{display:grid;gap:.65rem}
.step{display:grid;grid-template-columns:auto 1fr auto;gap:1.1rem;align-items:center;padding:1rem 1.2rem;background:var(--surface);border:1px solid var(--border);border-radius:12px;text-decoration:none;color:var(--ink);transition:border-color .15s,transform .15s}
.step:hover{border-color:var(--accent);transform:translateX(3px)}
.step .n{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--accent);font-weight:700;font-size:.95rem;font-variant-numeric:tabular-nums;flex:none}
.step .body b{display:block;font-weight:620;font-size:1rem}
.step .body span{display:block;font-size:.87rem;color:var(--ink-2);margin-top:.12rem}
.step .meta{font-size:.75rem;font-weight:620;letter-spacing:.03em;text-transform:uppercase;color:var(--muted);white-space:nowrap}
@media (max-width:560px){.step{grid-template-columns:auto 1fr}.step .meta{display:none}}
.substeps{margin:.55rem 0 0 4.1rem;display:grid;gap:.3rem}
.substeps a{font-size:.9rem;color:var(--ink-2);text-decoration:none;display:flex;gap:.5rem;align-items:baseline}
.substeps a:hover{color:var(--accent)}
.substeps a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--baseline);flex:none;translate:0 -3px}

/* petition */
.petition{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.2rem,3vw,2.2rem);align-items:center}
@media (max-width:620px){.petition{grid-template-columns:1fr;text-align:center;justify-items:center}}
.qr{width:150px;height:150px;background:#fff;border:1px solid var(--border);border-radius:12px;padding:9px;flex:none}
.qr img{width:100%;height:100%}
.actions{display:flex;gap:.55rem;align-items:center;flex-wrap:wrap;margin-top:1.2rem}
.icon-btn{width:44px;height:44px;border-radius:10px;border:1px solid var(--border);background:var(--raised);color:var(--ink-2);display:grid;place-items:center;cursor:pointer;text-decoration:none;flex:none}
.icon-btn:hover{border-color:var(--baseline);color:var(--ink)}
.icon-btn svg{width:20px;height:20px}

/* people */
.people{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:.8rem;margin-top:1.4rem}
.person{background:var(--surface);border:1px solid var(--border);border-radius:11px;padding:1rem 1.15rem}
.person b{display:block;font-weight:635;font-size:.97rem}
.person span{display:block;font-size:.85rem;color:var(--ink-2);margin-top:.25rem}
.person .role{display:inline-block;margin-top:.6rem;font-size:.72rem;font-weight:640;letter-spacing:.04em;text-transform:uppercase;padding:.16rem .5rem;border-radius:5px;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--accent)}

/* gallery */
.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem;margin-top:1.5rem}
.shot{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden}
.shot img{width:100%;aspect-ratio:4/3;object-fit:contain;background:#fff}
.shot figcaption{padding:.75rem .95rem;font-size:.87rem;color:var(--ink-2)}

footer{padding:2.8rem 0;color:var(--muted);font-size:.87rem;border-top:1px solid var(--border)}
footer a{color:var(--ink-2)}
.todo{display:none;background:#fff8e1;border:1px solid #e8cf8a;color:#5a4300;border-radius:10px;padding:.85rem 1.1rem;font-size:.86rem;margin-top:1.2rem}
:root[data-theme="dark"] .todo{background:#2a2410;border-color:#5a4a1a;color:#e8cf8a}
@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])) .todo{background:#2a2410;border-color:#5a4a1a;color:#e8cf8a}}

/* timeline (our story) */
.tl{position:relative;margin-top:2rem;padding-left:2.1rem}
.tl::before{content:'';position:absolute;left:8px;top:.5rem;bottom:.5rem;width:2px;background:var(--grid)}
.tl-item{position:relative;padding-bottom:2.2rem}
.tl-item::before{content:'';position:absolute;left:-2.1rem;top:.45rem;width:18px;height:18px;border-radius:50%;background:var(--surface);border:3px solid var(--baseline)}
.tl-item.key::before{border-color:var(--icon);background:var(--icon)}
.tl-when{font-size:.82rem;font-weight:670;letter-spacing:.03em;color:var(--icon)}
.tl-item h3{font-size:1.12rem;margin-top:.3rem}
.tl-item p{color:var(--ink-2);font-size:.94rem;margin-top:.4rem;max-width:60ch}
.tl-item figure{margin:.9rem 0 0;max-width:420px}
.tl-item figure img{border-radius:11px;border:1px solid var(--border);background:#fff}
.tl-item figcaption{font-size:.82rem;color:var(--muted);margin-top:.4rem}
.fact{display:inline-block;margin-top:.6rem;font-size:.85rem;color:var(--ink-2);background:color-mix(in srgb,var(--icon) 12%,transparent);border:1px solid color-mix(in srgb,var(--icon) 30%,transparent);padding:.3rem .65rem;border-radius:7px}

:root[data-draft] .todo{display:block}

/* ---- mobile refinements ---- */
@media (max-width:620px){
  /* 2. equal width organisation cards */
  .logos{display:grid;grid-template-columns:1fr;gap:.55rem}
  .logo{width:100%;align-items:flex-start}
  /* 4. injury rows stack cleanly instead of half wrapping */
  .hit{flex-direction:column;gap:.3rem}
  .hit span{min-width:0}
  /* 5. personas in a single column, so no blank cell */
  .who{grid-template-columns:1fr}
  /* petition card actions stay tidy */
  .actions{width:100%}
  .actions .btn{flex:1}
}

/* nav has to fit four links plus the toggle on a narrow phone */
@media (max-width:560px){
  .wrap{width:min(1060px,100% - 2rem)}
  .nav-in{gap:.55rem}
  .navlink{font-size:.8rem}
  .brand{font-size:.98rem;gap:.4rem}
  .brand svg{width:22px;height:22px}
  .theme-btn{width:32px;height:32px}
}
@media (max-width:400px){
  .nav-in{gap:.42rem}
  .navlink{font-size:.75rem}
}

@media (max-width:345px){
  .wrap{width:min(1060px,100% - 1.5rem)}
  .nav-in{gap:.3rem}
  .navlink{font-size:.7rem}
  .brand svg{width:20px;height:20px}
  .theme-btn{width:28px;height:28px}
}