/* ==========================================================================
   Bully Proof Inc: shared site styles
   Tokens follow brand/tokens/bully-proof-inc.css (v2.0). Square, institutional,
   ink and gold. Radius 4px by default, 0 for panels. Gold is a fill or a rule,
   never body text on light.
   ========================================================================== */

:root{
  --ink:#12161A; --gold:#F2B01E; --grey:#757D85; --fog:#F1F2F3; --red:#B3352A;
  --gold-text:#805F14;

  --bg:#FFFFFF; --bg-2:#F1F2F3; --raised:#FFFFFF;
  --text:#12161A; --text-2:#3F444A; --text-3:#585F65; --accent-text:#805F14;
  --rule:#12161A; --hair:#D5D7DA; --border-i:#757D85;

  --f:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mark:'Archivo Black','Archivo',system-ui,sans-serif;
  --pad:16px; --max:1180px; --nav:60px;
  --ease:cubic-bezier(.2,.8,.2,1);

  --grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]):not([data-fixed]){
    --bg:#12161A; --bg-2:#05070A; --raised:#1B1E22;
    --text:#F1F2F3; --text-2:#ABB0B5; --text-3:#8D949B; --accent-text:#F2B01E;
    --rule:#F1F2F3; --hair:#303437;
  }
}
:root[data-theme="dark"]{
  --bg:#12161A; --bg-2:#05070A; --raised:#1B1E22;
  --text:#F1F2F3; --text-2:#ABB0B5; --text-3:#8D949B; --accent-text:#F2B01E;
  --rule:#F1F2F3; --hair:#303437;
}
/* any block that is dark in every theme */
.ink{
  --bg:#12161A; --bg-2:#05070A; --raised:#1B1E22;
  --text:#F1F2F3; --text-2:#ABB0B5; --text-3:#8D949B; --accent-text:#F2B01E;
  --rule:#F1F2F3; --hair:#303437;
  background:var(--bg); color:var(--text);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--nav) + 16px)}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--f);font-size:16.5px;
     line-height:1.55;overflow-x:hidden;-webkit-font-smoothing:antialiased;
     text-rendering:optimizeLegibility}
img,video,svg,canvas{display:block;max-width:100%}
p,figure{margin:0}
h1,h2,h3,h4{margin:0;font-weight:900;font-stretch:78%;line-height:.95;letter-spacing:-.018em;
            text-wrap:balance}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
a{color:inherit}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--text);outline-offset:3px}
.ink :focus-visible,.on-dark :focus-visible{outline-color:var(--gold)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);
    white-space:nowrap}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
.num{font-variant-numeric:tabular-nums}

/* ---------- type roles ---------- */
.lab{font-size:11px;font-weight:700;font-stretch:120%;letter-spacing:.16em;text-transform:uppercase;
     line-height:1.3}
.lab--accent{color:var(--accent-text)}
.lede{font-size:18px;line-height:1.5;color:var(--text-2);max-width:46ch}
.small{font-size:14px;color:var(--text-3);line-height:1.5}
.legal{font-size:12px;line-height:1.55;color:var(--text-3)}
.bar-under{background:linear-gradient(var(--gold),var(--gold)) 0 100%/100% .14em no-repeat;
           padding-bottom:.02em}

/* ---------- wordmark, set as type ---------- */
.mark{display:inline-flex;flex-direction:column;text-decoration:none;color:var(--text);
      font-family:var(--mark);line-height:.8;letter-spacing:-.045em}
.mark b{font-weight:400;font-size:17px;display:block}
.mark b + b{display:flex;align-items:flex-end;gap:4px}
.mark i{font-style:normal;font-size:7.5px;letter-spacing:.02em;color:var(--gold);
        line-height:1;padding-bottom:1px}
:root:not([data-theme="dark"]) .mark i{color:var(--gold-text)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]):not([data-fixed]) .mark i{color:var(--gold)}}
.ink .mark i,.on-dark .mark i{color:var(--gold)!important}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;
     padding:0 22px;border-radius:4px;border:2px solid transparent;background:var(--text);
     color:var(--bg);font-weight:800;font-stretch:112%;font-size:13px;letter-spacing:.11em;
     text-transform:uppercase;text-decoration:none;line-height:1.1;white-space:nowrap;
     transition:box-shadow .18s var(--ease),transform .18s var(--ease),background .18s}
.btn:hover{box-shadow:inset 0 -4px 0 var(--gold)}
.btn:active{transform:translateY(1px)}
.btn svg{flex:none}
.btn--line{background:transparent;color:var(--text);border-color:var(--text)}
.btn--line:hover{box-shadow:inset 0 -4px 0 var(--gold)}
.btn--donate{background:var(--ink);color:#fff;box-shadow:inset 4px 0 0 var(--gold)}
.btn--donate:hover{box-shadow:inset 4px 0 0 var(--gold),inset 0 -4px 0 var(--gold)}
.btn--sm{min-height:40px;padding:0 14px;font-size:11.5px}
.btn--block{display:flex;width:100%}
.btn[disabled]{opacity:.4;cursor:default;box-shadow:none}
.arrow{width:18px;height:12px}

/* ---------- nav ---------- */
.nav{position:sticky;top:0;z-index:70;height:var(--nav);background:color-mix(in srgb,var(--bg) 92%,transparent);
     backdrop-filter:blur(14px) saturate(1.2);-webkit-backdrop-filter:blur(14px) saturate(1.2);
     border-bottom:1px solid var(--hair)}
.nav .inner{max-width:var(--max);margin:0 auto;padding:0 var(--pad);height:100%;display:flex;
            align-items:center;gap:14px}
.nav .links{display:none;gap:26px;margin-left:28px}
.nav .links a{text-decoration:none;font-size:14px;font-weight:600;color:var(--text-2);
              padding:6px 0;background:linear-gradient(var(--gold),var(--gold)) 0 100%/0 3px no-repeat;
              transition:background-size .2s var(--ease),color .2s}
.nav .links a:hover,.nav .links a[aria-current]{color:var(--text);background-size:100% 3px}
.nav .sp{flex:1}
.iconbtn{flex:none;width:42px;height:42px;border-radius:4px;border:1.5px solid var(--hair);
         background:transparent;display:grid;place-items:center;color:var(--text-2)}
.iconbtn:hover{border-color:var(--text);color:var(--text)}
@media (min-width:900px){.nav .links{display:flex}}

/* ---------- sections ---------- */
.sec{padding:72px 0}
.sec-head{display:grid;gap:14px;margin-bottom:36px}
.sec-head h2{font-size:clamp(40px,9vw,76px)}
.idx{display:flex;align-items:center;gap:12px}
.idx::before{content:attr(data-n);font-weight:900;font-stretch:78%;font-size:15px;
             background:var(--gold);color:var(--ink);min-width:30px;height:24px;display:grid;
             place-items:center;padding:0 6px}
.rule{height:2px;background:var(--rule);border:0;margin:0}
@media (min-width:900px){.sec{padding:112px 0}}

/* ---------- forms: label above, never inside ---------- */
.form{display:grid;gap:14px}
.field{display:grid;gap:6px}
.field label{font-size:13px;font-weight:700;color:var(--text)}
.field input,.field select,.field textarea{width:100%;min-height:52px;padding:13px 14px;border-radius:4px;
     border:1.5px solid var(--border-i);background:var(--raised);color:var(--text);font-size:16px;
     resize:vertical}
.field textarea{min-height:120px}
.field select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
     linear-gradient(135deg,currentColor 50%,transparent 50%);background-position:calc(100% - 20px) 50%,
     calc(100% - 15px) 50%;background-size:5px 5px;background-repeat:no-repeat}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--text);
     box-shadow:0 0 0 1px var(--text)}
.ink .field input:focus,.ink .field select:focus,.ink .field textarea:focus{border-color:var(--gold);
     box-shadow:0 0 0 1px var(--gold)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.formfail{font-size:14px;color:var(--text);border-left:3px solid var(--red);padding:8px 12px;
          background:color-mix(in srgb,var(--red) 10%,transparent)}
.sent{border-left:4px solid var(--gold);padding:18px 20px;background:var(--bg-2)}
.sent b{display:block;font-weight:900;font-stretch:80%;font-size:26px;line-height:1;margin-bottom:8px}
.sent p{color:var(--text-2);font-size:15px}

/* ---------- contribution flow ---------- */
.donate{display:grid;gap:16px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:0;border:1.5px solid var(--border-i);border-radius:4px;
     overflow:hidden}
.seg button{min-height:48px;background:transparent;border:0;font-weight:800;font-stretch:112%;font-size:12px;
     letter-spacing:.08em;text-transform:uppercase;color:var(--text-2)}
.seg button + button{border-left:1.5px solid var(--border-i)}
.seg button[aria-pressed="true"]{background:var(--text);color:var(--bg)}
.ink .seg button[aria-pressed="true"]{background:var(--gold);color:var(--ink)}
.chips{display:grid;grid-template-columns:repeat(auto-fit,minmax(72px,1fr));gap:10px}
.chip{min-height:52px;background:var(--raised);border:1.5px solid var(--border-i);border-radius:4px;
      font-weight:800;font-size:15px;color:var(--text);font-variant-numeric:tabular-nums}
.chip:hover{border-color:var(--text)}
.chip.is-on{background:var(--text);color:var(--bg);border-color:var(--text)}
.ink .chip.is-on{background:var(--gold);color:var(--ink);border-color:var(--gold)}

/* ---------- crisis numbers ---------- */
.crisis{display:grid;gap:0}
.crisis a{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;
          padding:16px 0;border-top:1.5px solid currentColor;text-decoration:none}
.crisis a:last-child{border-bottom:1.5px solid currentColor}
.crisis b{font-weight:900;font-stretch:72%;font-size:44px;line-height:.9;min-width:3.4ch;
          font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.crisis span{font-size:15px;line-height:1.4}
.crisis em{font-style:normal}
.crisis svg{width:22px;height:22px}

/* ---------- footer ---------- */
.foot{padding:64px 0 40px;border-top:2px solid var(--rule)}
.foot .cols{display:grid;gap:36px;grid-template-columns:1fr 1fr}
.foot .brandcol{grid-column:1/-1}
.foot h5{margin:0 0 12px;font-size:11px;font-weight:700;font-stretch:120%;letter-spacing:.16em;
         text-transform:uppercase;color:var(--text-3)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px}
.foot ul a,.foot ul button{color:var(--text-2);text-decoration:none;background:none;border:0;padding:0;
         text-align:left}
.foot ul a:hover,.foot ul button:hover{color:var(--text);text-decoration:underline;
         text-decoration-color:var(--gold);text-decoration-thickness:2px;text-underline-offset:4px}
.disclosure{margin-top:44px;padding-top:20px;border-top:1px solid var(--hair);display:grid;gap:14px}
.disclosure p{max-width:70ch}
.bigmark{font-family:var(--mark);font-size:clamp(64px,17vw,220px);line-height:.8;letter-spacing:-.05em;
         margin:0 0 28px;color:var(--text)}
.bigmark i{font-style:normal;color:var(--gold);font-size:.2em;letter-spacing:0;vertical-align:top}
.bigrule{display:block;width:clamp(48px,9vw,110px);height:clamp(4px,.7vw,8px);background:var(--gold);margin:-8px 0 14px}
.bigsub{margin:0 0 30px;color:var(--text-3)}
@media (min-width:760px){.foot .cols{grid-template-columns:2fr 1fr 1fr 1fr}.foot .brandcol{grid-column:auto}}

/* ---------- help button + sheet ---------- */
.fab{position:fixed;right:14px;bottom:14px;z-index:90;display:flex;align-items:center;gap:10px;
     min-height:48px;padding:0 18px;border-radius:4px;border:1.5px solid rgba(255,255,255,.18);
     background:var(--ink);color:#fff;font-weight:800;font-stretch:112%;font-size:12.5px;
     letter-spacing:.11em;text-transform:uppercase;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.fab s{width:9px;height:9px;border-radius:50%;background:var(--gold);text-decoration:none;
       box-shadow:0 0 0 0 rgba(242,176,30,.6);animation:ping 2.2s ease-out infinite}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(242,176,30,.55)}70%,100%{box-shadow:0 0 0 10px rgba(242,176,30,0)}}
.fab:hover{box-shadow:0 10px 30px rgba(0,0,0,.28),inset 0 -4px 0 var(--gold)}
.fab{transition:transform .3s var(--ease),opacity .3s}
.fab-tucked .fab{transform:translateY(150%);opacity:0;pointer-events:none}
.veil{position:fixed;inset:0;z-index:96;background:rgba(5,7,10,.66);animation:fade .2s both}
@keyframes fade{from{opacity:0}}
.sheet{position:fixed;z-index:97;left:0;right:0;bottom:0;max-height:88vh;overflow-y:auto;
       overscroll-behavior:contain;padding:22px var(--pad) 28px;border-radius:8px 8px 0 0;
       border-top:4px solid var(--gold);box-shadow:0 -20px 60px rgba(0,0,0,.5);
       animation:up .28s var(--ease) both}
@keyframes up{from{transform:translateY(100%)}}
.shead{display:flex;align-items:center;gap:10px;margin-bottom:20px}
.shead h3{flex:1;font-size:30px}
.shead button{width:40px;height:40px;border-radius:4px;border:1.5px solid var(--hair);background:none;
              color:var(--text-2);font-size:18px;line-height:1;display:grid;place-items:center}
.shead button:hover{border-color:var(--gold);color:var(--text)}
.opts{display:grid;gap:10px}
.opts button{display:flex;gap:14px;align-items:center;text-align:left;width:100%;padding:18px;
             border-radius:4px;border:1.5px solid var(--hair);background:var(--raised)}
.opts button:hover{border-color:var(--gold)}
.opts b{display:block;font-size:17px;font-weight:800}
.opts span span{display:block;font-size:14px;color:var(--text-3);margin-top:2px}
.opts i{flex:none;width:40px;height:40px;display:grid;place-items:center;font-style:normal;
        font-weight:900;font-size:18px;background:var(--gold);color:var(--ink)}
.opts .danger i{background:var(--red);color:#fff}
.snote{color:var(--text-2);font-size:15px;margin-bottom:16px}
@media (min-width:760px){
  .fab{right:24px;bottom:24px}
  .sheet{left:auto;right:24px;bottom:24px;width:430px;border-radius:6px;max-height:82vh;
         animation:up2 .24s var(--ease) both}
  @keyframes up2{from{opacity:0;transform:translateY(14px)}}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
                       transition-duration:.01ms!important;scroll-behavior:auto!important}
}