/* Fenix Animal Project — Styles */
/* by Bentley's Playhouse */


:root{
 --or:#F97B3C;--or2:#E05F20;--gr:#FFB347;--gr2:#F08020;--gr3:#B85A00;
 --c50:#FFEBEE;--c400:#E53935;--c600:#C62828;
 --g100:#F4F4EF;--g200:#E0DED8;
 /* --g400 was 2.75:1 against white — below WCAG AA's 4.5:1 minimum for
    text this small (locations, hints, timestamps use it throughout).
    Darkened along the same muted-gray hue rather than changing the color
    itself, so it reads the same but is actually legible. */
 --g400:#76746B;--g600:#6B6960;--g800:#2D2C28;
 --t50:#FFF4EC;--t100:#FFD4A8;
 /* --t400 was referenced ~20 times (verified badges, tags, links) but was
    never defined in :root, which makes those declarations invalid and
    silently falls back to inherited/black text. Matches --gr3, the
    existing color in this same terracotta family used right above. */
 --t400:#B85A00;
 --r:8px;--sh:0 2px 8px rgba(0,0,0,.08);--shl:0 6px 28px rgba(0,0,0,.13);
}
*{box-sizing:border-box;margin:0;padding:0}
/* Keeps every anchor jump (hamburger menu, bottom nav, "How it works", etc.)
   from landing a section heading underneath the sticky top nav. */
html{scroll-padding-top:76px}
body{font-family:'Inter',sans-serif;background:#F7F7F2;color:var(--g800);line-height:1.6}
a{color:inherit;text-decoration:none}img{max-width:100%}button{font-family:inherit}

/* ── ACCESSIBILITY: skip link, screen-reader-only text, visible focus ── */
.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}
.skip-link{position:absolute;top:-48px;left:8px;z-index:1000;background:var(--g800);color:#fff;padding:12px 18px;border-radius:0 0 8px 8px;font-size:14px;font-weight:700;text-decoration:none;transition:top .15s}
.skip-link:focus{top:0}
/* A visible, consistent focus indicator on every interactive element —
   :focus-visible only shows it for keyboard/AT navigation, not mouse
   clicks, so it doesn't change the look of normal mouse use at all. */
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,
textarea:focus-visible,[tabindex]:focus-visible,summary:focus-visible{
 outline:3px solid var(--or2);outline-offset:2px;border-radius:4px;
}
.sbar input:focus-visible,.fg input:focus-visible,.fg select:focus-visible,.fg textarea:focus-visible{
 outline:3px solid var(--or2);outline-offset:1px;
}
/* Respect the OS-level reduced-motion preference — no animation,
   transition, or auto-scroll for anyone who's asked for less motion. */
@media (prefers-reduced-motion: reduce){
 *,*::before,*::after{
  animation-duration:.001ms !important;animation-iteration-count:1 !important;
  transition-duration:.001ms !important;scroll-behavior:auto !important;
 }
}

/* ── NAV ── */
nav{background:#fff;border-bottom:1px solid #E8E6DF;position:sticky;top:0;z-index:200;padding:0 16px}
.nav-inner{max-width:1100px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:60px;gap:12px;overflow:hidden}
.logo{display:flex;align-items:center;gap:8px;flex-shrink:0;min-width:0}
.logo-icon{width:36px;height:36px;background:linear-gradient(135deg,var(--or),#FF8A50);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0;box-shadow:0 2px 8px rgba(230,81,0,.3)}
.logo-img{height:42px;width:auto;flex-shrink:0;object-fit:contain}
.logo-text{font-weight:700;font-size:clamp(14px,2vw,22px);color:#111111;line-height:1;white-space:nowrap}
.logo-sub{font-size:9px;color:var(--g400);white-space:nowrap}
.logo-by{font-size:9px;color:var(--t400);font-weight:600;white-space:nowrap}
.nav-r{display:flex;gap:2px;align-items:center;flex-shrink:0}
.nl{padding:5px 8px;border-radius:var(--r);font-size:clamp(11px,1.1vw,13px);font-weight:500;color:var(--g600);background:none;border:none;cursor:pointer;white-space:nowrap}
.nl:hover{background:var(--g100)}
.nc{background:var(--or);color:#fff;border-radius:var(--r);padding:7px 12px;font-size:clamp(11px,1.1vw,13px);font-weight:600;border:none;cursor:pointer;white-space:nowrap}
.nc:hover{background:var(--or2)}
.lt{display:flex;background:var(--g100);border-radius:6px;padding:2px;gap:1px}
.lb{padding:4px 8px;border-radius:4px;font-size:10px;font-weight:700;cursor:pointer;border:none;background:transparent;color:var(--g400)}
.lb.active{background:#fff;color:var(--or);box-shadow:0 1px 3px rgba(0,0,0,.1)}
.hbg{display:none;background:none;border:none;cursor:pointer;padding:5px}
.hbg span{display:block;width:20px;height:2px;background:var(--g600);margin:4px 0;border-radius:2px}
.mob-menu{display:none;background:#fff;border-bottom:1px solid #E8E6DF;padding:8px 16px 14px}
.mob-menu.open{display:block}
/* Spanish and French nav labels ("Trouver un Vétérinaire", "Comment ça marche", etc.)
   run noticeably longer than the English ones. At the old 768px cutoff the desktop
   nav links + language toggle + register button no longer fit in one row once
   translated, and since .nav-inner clips overflow instead of wrapping, the language
   toggle (and part of the register button) would silently get cut off screen.
   Switching to the hamburger menu earlier — before that overflow can happen —
   fixes it in all three languages instead of just tuning pixel widths. */
@media(max-width:900px){
  .nav-r .nl,.nav-r .nc{display:none}
  .hbg{display:block}
}
.mob-menu a,.mob-menu .mml{display:block;width:100%;text-align:left;padding:13px 4px;font-size:14.5px;font-weight:500;color:var(--g600);border-bottom:1px solid var(--g100);background:none;border-left:none;border-right:none;border-top:none;cursor:pointer;min-height:44px}
.mml-active{color:var(--or);font-weight:700}
/* Section headers inside the hamburger menu — group items by the same two
   paths ("I need help" / "find an animal") used on the homepage, so the
   menu teaches the same mental model instead of being one flat list. */
.mml-hdr{padding:16px 4px 4px;font-size:10.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase}
.mml-hdr:first-child{padding-top:4px}
.mml-hdr-help{color:#B85A00}
.mml-hdr-animal{color:#1B5E20}
.mml-hdr-more{color:var(--g400)}

/* ── URGENCY BAR ── */
.urg{background:#F5C842;color:#4A3000;text-align:center;padding:9px 16px;font-size:12px;font-weight:600}
.urg a{color:#4A3000;text-decoration:underline;font-weight:700}

/* ── HERO ── */
.hero{background:linear-gradient(145deg,#FEE8D6,#FDDBB8 50%,#FEE8D6);color:#5A2E00;text-align:center;padding:60px 16px 68px;position:relative;overflow:hidden}

.hbadge{display:inline-flex;align-items:center;gap:7px;background:rgba(255,85,0,.92);border-radius:20px;padding:5px 14px;font-size:12px;font-weight:600;margin-bottom:20px}
.hero h1{font-family:'Playfair Display',serif;font-size:clamp(28px,5vw,52px);line-height:1.12;margin-bottom:14px}
.hero h1 span{color:#E85D00}
.hero p{font-size:clamp(13px,2vw,16px);opacity:.88;max-width:560px;margin:0 auto 30px;line-height:1.7}
.hbtns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.bw{background:var(--or);color:#fff;font-weight:700;padding:12px 24px;border-radius:10px;font-size:14px;border:2px solid var(--or);cursor:pointer;transition:all .2s}
.bw:hover{background:#fff;border-color:var(--or);color:var(--or);transform:translateY(-2px);box-shadow:var(--shl)}
.bo:hover{background:#fff;border-color:var(--or);color:var(--or);transform:translateY(-2px);box-shadow:var(--shl)}
.bo{background:var(--or);color:#fff;font-weight:700;padding:12px 24px;border-radius:10px;font-size:14px;border:2px solid var(--or);cursor:pointer;transition:all .2s}
.hstats{display:flex;gap:32px;justify-content:center;margin-top:44px;flex-wrap:wrap}

/* ── Two-path hero cards: "I need help" vs "I need to find/report an animal".
   These are the very first decision a stressed, first-time visitor has to
   make, so they get their own large, color-coded, unmissable cards above
   everything else in the hero — see task: two clear paths. ── */
.path-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1100px;margin:28px auto 0;text-align:left}
.path-card{border-radius:18px;padding:22px 20px 24px;position:relative;box-shadow:0 4px 18px rgba(0,0,0,.06)}
.path-help{background:linear-gradient(160deg,#FFF6EE,#FFE7CE);border:1.5px solid #FFC98A}
.path-animal{background:linear-gradient(160deg,#EEFBF1,#DCF3E1);border:1.5px solid #A8DDB5}
/* Third box: former "Register Your Organization. Free" text link, now styled to
   match path-help/path-animal exactly. Indigo reuses the existing .tme tag color
   already in the palette, keeping it visually distinct from the orange (help)
   and green (animal) cards without introducing a brand-new hue. */
.path-register{background:linear-gradient(160deg,#F2F4FF,#E1E6FD);border:1.5px solid #B9C4F5}
.path-lbl{font-size:10.5px;font-weight:800;letter-spacing:1px;text-transform:uppercase;margin-bottom:10px}
.path-help .path-lbl{color:#B85A00}
.path-animal .path-lbl{color:#1B5E20}
.path-register .path-lbl{color:#4338CA}
.path-tit{font-family:'Playfair Display',serif;font-size:clamp(18px,2.6vw,22px);color:#2D2C28;margin-bottom:6px}
.path-desc{font-size:13px;color:#5A5850;line-height:1.55;margin-bottom:18px}
.path-cta{display:block;width:100%;padding:14px;border-radius:11px;border:none;font-size:15px;font-weight:800;cursor:pointer;color:#fff;min-height:48px;transition:transform .15s}
.path-cta:active{transform:scale(.98)}
.path-help .path-cta{background:var(--or)}
.path-help .path-cta:hover{background:var(--or2)}
.path-animal .path-cta{background:#2E7D32}
.path-animal .path-cta:hover{background:#1B5E20}
.path-register .path-cta{background:#4338CA}
.path-register .path-cta:hover{background:#3730A3}
.path-subactions{display:flex;gap:8px;margin-top:10px}
.path-sub{flex:1;padding:10px 6px;border-radius:9px;border:1.5px solid #A8DDB5;background:#fff;color:#1B5E20;font-size:12.5px;font-weight:700;cursor:pointer;min-height:44px}
.path-sub:hover{background:#F0FDF4}
.hero-context{font-size:12.5px !important;opacity:.75 !important;margin-top:10px !important}
/* Three cards sit in one row only on true desktop widths. iPad (portrait and
   landscape) and phone both get the single-column stacked treatment — this
   single breakpoint covers both, matching the stacking the two original
   cards already had on phone. */
@media(max-width:1024px){
  .path-cards{grid-template-columns:1fr;max-width:440px}
}
.sn{font-size:26px;font-weight:700;font-family:'Playfair Display',serif}
.sl{font-size:11px;opacity:.75;margin-top:1px}

/* ── VENEZUELA ALERT ── */
.vzalert{background:#FFF8E1;border-left:4px solid var(--or);padding:14px 18px;display:flex;gap:13px;max-width:1100px;margin:28px auto 0;border-radius:0 var(--r) var(--r) 0}
.vzalert h3{font-size:15px;font-weight:700;color:var(--or2);margin-bottom:3px}
.vzalert p{font-size:12px;color:var(--g600)}

/* ── TABS ── */
.vtabs{display:flex;background:#fff;border-bottom:1px solid #E8E6DF;padding:0 16px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.vt{padding:11px 15px;font-size:13px;font-weight:600;color:var(--g400);border:none;background:none;cursor:pointer;border-bottom:3px solid transparent;white-space:nowrap;transition:all .15s}
.vt.active{color:var(--or);border-bottom-color:var(--or)}

/* ── SEARCH ── */
.srch{background:#fff;border-bottom:1px solid #E8E6DF;padding:18px 16px}
.si{max-width:1100px;margin:0 auto}
.sbar{display:flex;gap:7px;margin-bottom:10px;flex-wrap:wrap}
.sbar input{flex:1;min-width:200px;padding:11px 14px;border:1.5px solid #E8E6DF;border-radius:var(--r);font-size:14px;font-family:inherit;outline:none;transition:border .15s}
.sbar input:focus{border-color:var(--or)}
.sbar button{background:var(--or);color:#fff;border:none;padding:11px 20px;border-radius:var(--r);font-size:14px;font-weight:600;cursor:pointer}
.frow{display:flex;gap:5px;flex-wrap:wrap}
.fc{padding:5px 12px;border-radius:18px;border:1.5px solid #E8E6DF;font-size:11px;font-weight:500;cursor:pointer;background:#fff;color:var(--g600);transition:all .15s;white-space:nowrap}
.fc:hover,.fc.active{background:var(--t50);border-color:var(--t400);color:var(--t400)}

/* ── ORG CARDS ── */
.ca{max-width:1100px;margin:0 auto;padding:28px 16px}
.og{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:18px}
.oc{background:#fff;border-radius:14px;border:1px solid #E8E6DF;overflow:hidden;transition:all .22s;cursor:pointer}
.oc:hover{transform:translateY(-3px);box-shadow:var(--shl);border-color:var(--t100)}
.och{padding:18px 18px 12px;display:flex;gap:12px;align-items:flex-start}
.oav{width:48px;height:48px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;overflow:hidden;background:var(--g100)}
.oav img{width:100%;height:100%;object-fit:cover}
.ocn{font-weight:700;font-size:14px;color:var(--g800);margin-bottom:2px}
.ocl{font-size:11px;color:var(--g400)}
.ocb{padding:0 18px 12px}
.ocd{font-size:12px;color:var(--g600);line-height:1.6;margin-bottom:10px}
.otags{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:12px}
.tag{padding:2px 9px;border-radius:9px;font-size:10px;font-weight:600}
.tgr{background:var(--t50);color:var(--t400)}.tme{background:#EEF2FF;color:#4338CA}
.tsh{background:#FFF3E0;color:#E65100}.tfo{background:#FFF9C4;color:#827717}
.ttr{background:#E8F5E9;color:#1B5E20}.tvz{background:var(--c50);color:var(--c600)}
.twl{background:#E0F2E9;color:#1B5E20}
.ocf{padding:10px 18px;border-top:1px solid var(--g100);display:flex;justify-content:space-between;align-items:center;gap:7px}
.dbt{background:var(--or);color:#fff;border:none;padding:6px 13px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer}
.dbt:hover{background:var(--or2)}
.wabt{background:#25D366;color:#fff;border:none;padding:6px 10px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:3px;text-decoration:none}
.vbg{font-size:10px;color:var(--t400);font-weight:600;flex:1}
.pbg{font-size:10px;color:#E65100;font-weight:600;flex:1}

/* ── MAP ── */
#map-view{display:none}
#omap{height:500px;border-radius:14px;border:1px solid #E8E6DF;margin-bottom:18px}

/* ── LOST & FOUND ── */
#lf-view{display:none}
.lfg{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
.lfc{background:#fff;border-radius:14px;border:1px solid #E8E6DF;overflow:hidden;cursor:pointer;transition:all .2s}
.lfc:hover{transform:translateY(-2px);box-shadow:var(--sh)}
.lfi{height:100px;display:flex;align-items:center;justify-content:center;font-size:44px;overflow:hidden}
.lfi img{width:100%;height:100%;object-fit:cover}
.lfb{padding:9px 10px 11px}
.lfs{font-size:9px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;padding:2px 7px;border-radius:8px;display:inline-block;margin-bottom:4px}
.sl2{background:var(--c50);color:var(--c600)}.sf2{background:var(--t50);color:var(--t400)}
.lfn{font-size:12px;font-weight:700;color:var(--g800)}
.lfl{font-size:10px;color:var(--g400);margin-top:1px}
.lfbr{font-size:10px;color:var(--g400)}
.wa-share{background:#E8F5E9;border:1px solid #A5D6A7;border-radius:10px;padding:12px 16px;display:flex;align-items:center;gap:12px;margin-bottom:16px;flex-wrap:wrap}
.wa-share-text{font-size:12px;color:#1B5E20;flex:1;min-width:180px}
.wa-share-btn{background:#25D366;color:#fff;border:none;border-radius:7px;padding:8px 16px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;flex-shrink:0}

/* ── VOLUNTEER BANNER ── */
.vol-banner{background:linear-gradient(135deg,var(--gr3),var(--gr2));color:#fff;border-radius:14px;padding:22px 24px;margin-bottom:24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.vol-banner-text h3{font-size:16px;font-weight:700;margin-bottom:4px}
.vol-banner-text p{font-size:12px;opacity:.85}
.vol-btn{background:#fff;color:var(--gr2);border:none;border-radius:8px;padding:10px 20px;font-size:13px;font-weight:700;cursor:pointer;white-space:nowrap;flex-shrink:0;margin-left:auto}

/* ── MODALS ── */
.mo.open{display:flex !important;}
.mo{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:300;overflow-y:auto;padding:20px 16px;-webkit-overflow-scrolling:touch;display:none;align-items:flex-start;justify-content:center}
.mo.open{display:flex;align-items:flex-start;justify-content:center;padding-top:30px}
.moverlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:500;overflow-y:auto;padding:20px 16px;-webkit-overflow-scrolling:touch;align-items:flex-start;justify-content:center}
.moverlay.open{display:flex !important;align-items:flex-start;justify-content:center;padding-top:30px}
.md{background:#fff;border-radius:18px;max-width:580px;width:100%;max-height:90vh;overflow-y:scroll;-webkit-overflow-scrolling:touch;display:flex;flex-direction:column}
.mdh{padding:16px 18px 14px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0;border-bottom:1px solid #F0EEE8;position:sticky;top:0;background:#fff;z-index:1}
.mdt{font-size:15px;font-weight:700;color:var(--g800)}
.mcl{background:none;border:none;font-size:24px;cursor:pointer;color:var(--g400);width:34px;height:34px;display:flex;align-items:center;justify-content:center;border-radius:50%}
.mcl:hover{background:var(--g100)}
.mdb{padding:14px 18px 32px;overflow-y:auto;-webkit-overflow-scrolling:touch;flex:1}
.sdiv{border:none;border-top:1px solid var(--g100);margin:14px 0}
.mr{display:flex;align-items:center;justify-content:space-between;padding:10px 14px;border:1px solid #E8E6DF;border-radius:var(--r);margin-bottom:7px}
.cpb{background:none;border:1px solid #E8E6DF;border-radius:5px;padding:3px 9px;font-size:11px;cursor:pointer;color:var(--g600)}
.cpb:hover{background:var(--t50);color:var(--t400)}

/* ── VOLUNTEER MODAL ── */
.vol-modal-intro{background:var(--t50);border-radius:10px;padding:14px;margin-bottom:14px;font-size:13px;color:var(--gr2)}

/* ── FORMS ── */
.fg{margin-bottom:14px}
.fg label{display:block;font-size:11px;font-weight:600;color:var(--g600);margin-bottom:5px;text-transform:uppercase;letter-spacing:.4px}
.fg input,.fg select,.fg textarea{width:100%;padding:10px 12px;border:1.5px solid #E8E6DF;border-radius:var(--r);font-size:13px;font-family:inherit;outline:none;transition:border .15s;background:#fff;color:var(--g800)}
.fg input:focus,.fg select:focus,.fg textarea:focus{border-color:var(--or)}
.fg textarea{resize:vertical;min-height:80px}
.fgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.full{grid-column:1/-1}
.ckg{display:flex;flex-wrap:wrap;gap:8px;margin-top:5px}
.cki{display:flex;align-items:center;gap:5px;font-size:12px;cursor:pointer}
.cki input{width:15px;height:15px;accent-color:var(--or)}
/* Primary form-submit button (Register org, Volunteer form, etc). Not to be
   confused with .fsub below, which is unrelated small caption/subtitle text
   — they used to share a class name by mistake, which made these buttons
   render as plain unstyled text instead of an actual button. */
.form-submit-btn{display:block;width:100%;padding:14px;border-radius:10px;border:none;background:var(--or);color:#fff;font-size:15px;font-weight:800;letter-spacing:.2px;cursor:pointer;transition:all .2s;box-shadow:0 4px 14px rgba(249,123,60,.35)}
.form-submit-btn:hover{background:var(--or2);transform:translateY(-1px);box-shadow:0 6px 18px rgba(249,123,60,.45)}
.form-submit-btn:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}
.uz{border:2px dashed var(--g200);border-radius:12px;padding:20px;text-align:center;cursor:pointer;transition:all .2s;background:#fff;min-height:90px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.uz:hover,.uz.has{border-color:var(--or);background:#FFF8F0}

/* ── FAST-TRACK TOGGLE ── */
.form-mode-toggle{display:flex;background:var(--g100);border-radius:8px;padding:3px;margin-bottom:18px;gap:2px}
.fmt-btn{flex:1;padding:7px;border-radius:6px;font-size:12px;font-weight:600;border:none;cursor:pointer;background:transparent;color:var(--g600);transition:all .15s}
.fmt-btn.active{background:#fff;color:var(--or);box-shadow:0 1px 4px rgba(0,0,0,.1)}
#form-full{display:none}

/* ── HOW IT WORKS ── */
.hows{background:#FDF0E4;color:#5A2E00;padding:56px 16px}
.hi{max-width:1100px;margin:0 auto}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:36px}
.snum{width:44px;height:44px;background:rgba(249,123,60,.15);border:2px solid rgba(249,123,60,.35);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;margin:0 auto 14px;font-family:'Playfair Display',serif}
.step h3{font-size:15px;font-weight:700;margin-bottom:6px;text-align:center}
.step p{font-size:12px;opacity:.75;line-height:1.65;text-align:center}

/* ── VERIFICATION CRITERIA ── */
.ver-criteria{background:#F7F7F2;border-radius:12px;padding:20px 24px;margin:28px 0}
.ver-criteria h3{font-size:14px;font-weight:700;color:var(--g800);margin-bottom:12px}
.ver-list{list-style:none;display:flex;flex-direction:column;gap:8px}
.ver-list li{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--g600)}
.ver-list li::before{content:'\2713';background:var(--t50);color:var(--t400);border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;margin-top:1px}

/* ── REGISTER ── */
.regs{background:#fff;padding:56px 16px}
.ri{max-width:1100px;margin:0 auto;display:grid;grid-template-columns:1fr 1.6fr;gap:48px;align-items:start}
.ri h2{font-family:'Playfair Display',serif;font-size:clamp(22px,3vw,30px);color:var(--g800);margin-bottom:10px}
.ri p{font-size:13px;color:var(--g600);margin-bottom:20px;line-height:1.7}
.bl{list-style:none;display:flex;flex-direction:column;gap:9px}
.bl li{display:flex;align-items:flex-start;gap:9px;font-size:13px;color:var(--g600)}
.bl li::before{content:'\2713';background:var(--t50);color:var(--t400);border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0;margin-top:1px}
.fraud-box{background:#FFF8E1;border:1.5px solid #FFE082;border-radius:10px;padding:13px 15px}

/* ── FOOTER ── */
footer{background:#1A1A16;color:rgba(255,255,255,.7);padding:32px 20px 20px}
.fi{max-width:1100px;margin:0 auto}
.fg2{display:grid;grid-template-columns:1.8fr 1fr 1fr 1fr;gap:28px;margin-bottom:24px}
.fc-brand{display:flex;flex-direction:column}
.fc2{display:flex;flex-direction:column}
.flogo{font-size:15px;font-weight:700;color:#fff;margin-bottom:1px}
.fsub{font-size:12px;color:var(--g400);font-weight:500;margin-top:2px;letter-spacing:.3px}
.flogo span{color:#FFD180}
.fby{font-size:9px;color:rgba(255,209,128,.8);font-weight:600;margin-bottom:6px}
.fdesc{font-size:11px;line-height:1.6;opacity:.7}

.fc2 ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:6px}
.fc2 ul li a:hover,.fc2 ul li button:hover{color:#fff}
.fc2 ul li a,.fc2 ul li button{font-size:12px;color:rgba(255,255,255,.78);transition:color .15s;background:none;border:none;cursor:pointer;padding:0;text-align:left;font-family:inherit;text-decoration:none;line-height:1.4}
.fc2 ul li a:hover,.fc2 ul li button:hover{opacity:1}
.fb{border-top:1px solid rgba(255,255,255,.1);padding-top:14px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:6px;font-size:11px}

/* ── PRIVACY POLICY SECTION ── */
.privacy-notice{background:#F7F7F2;border:1px solid #E8E6DF;border-radius:10px;padding:14px 16px;font-size:11px;color:var(--g600);line-height:1.7;margin-top:12px}
.privacy-notice a{color:var(--t400);text-decoration:underline}

/* ── MISC ── */
.sp{display:inline-block;padding:2px 9px;border-radius:9px;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.sp-v{background:var(--t50);color:var(--t400)}.sp-p{background:#FFF3CD;color:#856404}
.nr{text-align:center;padding:48px 16px;color:var(--g400)}
.nri{font-size:42px;margin-bottom:9px}
.ai-box{background:var(--t50);border:1px solid var(--t100);border-radius:10px;padding:12px;margin-bottom:12px}
.ail{font-size:10px;font-weight:700;color:var(--t400);text-transform:uppercase;letter-spacing:.5px;margin-bottom:7px}
.succ{display:none;background:var(--t50);border:1px solid var(--t100);border-radius:12px;padding:22px;text-align:center}
.succ.show{display:block}
.toast{position:fixed;bottom:20px;right:20px;background:#1A1A16;color:#fff;padding:11px 18px;border-radius:var(--r);font-size:13px;font-weight:500;z-index:500;transform:translateY(80px);opacity:0;transition:all .3s;max-width:280px}
.toast.show{transform:translateY(0);opacity:1}
.ldov{display:none;position:fixed;inset:0;background:rgba(255,255,255,.88);z-index:400;align-items:center;justify-content:center;flex-direction:column;gap:14px}
.ldov.show{display:flex}
.spin{width:36px;height:36px;border:3px solid var(--t100);border-top-color:var(--or);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.sdot{height:4px;border-radius:2px;flex:1;transition:all .3s}

@media(max-width:768px){
  /* Footer */
  .fg2{grid-template-columns:1fr 1fr;gap:28px}
  .fc-brand{grid-column:1/-1}
  /* How it works — 2x2 on tablet */
  .steps{grid-template-columns:repeat(2,1fr)}
  /* Nav */
  .nav-r .nl,.nav-r .nc{display:none}
  .hbg{display:block}
  nav{padding:0 14px}
  /* Hero */
  .hero{padding:40px 16px 52px}
  .hbtns{flex-direction:column;align-items:stretch;gap:8px}
  .hbtns .bw,.hbtns .bo{width:100%;padding:14px 20px;font-size:15px;text-align:center}
  .hstats{gap:16px;flex-wrap:wrap;justify-content:center}
  /* Layout */
  .ri{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .fg2{grid-template-columns:1fr 1fr;gap:16px}
  .ca{padding:20px 14px}
  /* Orgs */
  .og{grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
  /* LF cards */
  .lfg2{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
  /* Filter chips — scrollable row */
  .frow,.lf-chip-row{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;padding-bottom:6px;scroll-snap-type:x mandatory}
  .fc{flex-shrink:0;scroll-snap-align:start;padding:8px 14px;font-size:13px}
  /* How it works steps */
  .steps{grid-template-columns:1fr 1fr}
  /* Modals */
  .mcard{background:#fff;border-radius:18px;width:100%;max-width:460px;max-height:90vh;overflow-y:auto;-webkit-overflow-scrolling:touch;box-shadow:0 8px 40px rgba(0,0,0,.18)}
.mdlg{background:#fff;border-radius:18px;max-width:calc(100vw - 28px);margin:16px auto;max-height:90vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
  /* Registration */
  .fgrid{grid-template-columns:1fr}
  /* Alert */
  .vzalert{flex-direction:column;gap:6px}
  /* Tabs */
  .vtabs{overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;gap:4px;padding-bottom:4px}
  .vt{flex-shrink:0}
  /* Stats */
  .hstats .sn{font-size:26px}
  /* Forms */
  .fg.full{grid-column:span 1}
  /* Touch targets */
  button,.bw,.bo,.fc,.nl,.nc,.vt{min-height:44px}
  /* Reg form 3-col → 1-col */
  .fg.full > div{grid-template-columns:1fr !important}
}

@media(max-width:480px){
  /* Footer */
  .fg2{grid-template-columns:1fr;gap:24px}
  /* How it works — 2x2 stays on mobile too */
  .steps{grid-template-columns:repeat(2,1fr);gap:14px}
  /* Single column everything */
  .fg2{grid-template-columns:1fr}
  .og{grid-template-columns:1fr}
  .lfg{grid-template-columns:1fr}
  .lfg2{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  /* Hero */
  .hero{padding:32px 14px 44px}
  .hstats{flex-direction:row;justify-content:space-around;gap:8px}
  .hstats > div{flex:1;text-align:center}
  .hstats .sn{font-size:22px}
  .hstats .sl{font-size:10px}
  /* Org card full width */
  .oc,.ogc{min-width:0;width:100%}
  /* LF card full width */
  .lfc2{width:100%}
  /* Modal full screen feel */
  .mcard,.mdlg{margin:8px;max-width:calc(100vw - 16px);border-radius:16px}
  /* Nav logo smaller */
  .logo-text{font-size:16px}
  /* Filter chips */
  .fc{padding:7px 12px;font-size:12px}
  /* Buttons full width in hero */
  .hbtns{gap:8px}
  /* Reg country row → stack */
  [style*="grid-template-columns:1fr 1fr 1fr"]{grid-template-columns:1fr !important}
}

.lfg2{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;margin-top:12px}
.lfc2{background:#fff;border-radius:14px;border:1.5px solid var(--g100);overflow:hidden;cursor:pointer;transition:box-shadow .15s}
.lfc2:hover{box-shadow:0 4px 20px rgba(0,0,0,.12)}
.lfb2{padding:12px 14px}
.lfs2{font-size:10px;font-weight:800;letter-spacing:.6px;padding:3px 8px;border-radius:5px;display:inline-block}
.sl2{background:#FFEBEE;color:#C62828}.sf2{background:#FFF4EC;color:#F08020}
.nut-list li{padding:7px 0;border-bottom:1px solid var(--g100);line-height:1.4}
.nut-list li:last-child{border:none}
.nut-list li strong{display:block;font-size:12px;color:var(--g800)}
.nut-list li .nut-note{font-size:11px;color:var(--g400)}
.sp-chip{display:inline-flex;align-items:center;gap:5px;padding:6px 11px;border-radius:20px;border:1.5px solid #E8E6DF;font-size:12px;font-weight:500;cursor:pointer;background:#fff;transition:all .15s;white-space:nowrap}
.sp-chip:has(input:checked){background:var(--t50);border-color:var(--t400);color:var(--t400);font-weight:700}
.sp-chip input{display:none}

/* Honeypot — hidden from humans, bots fill it */
.hp-field{position:absolute;left:-9999px;top:-9999px;opacity:0;pointer-events:none;tab-index:-1}

/* ── Mobile bottom nav ── */
.mob-nav{
  display:none;
  position:fixed;bottom:0;left:0;right:0;
  background:#fff;border-top:1px solid #E8E6DF;
  z-index:600;padding:8px 0 max(8px,env(safe-area-inset-bottom));
  grid-template-columns:repeat(5,1fr);
  /* Forces iOS Safari to keep this on its own compositor layer, which
     avoids a common bug where fixed-position bars become unresponsive to
     taps once the address bar auto-hides/shows during scroll. */
  -webkit-transform:translateZ(0);transform:translateZ(0);
  touch-action:manipulation;
}
.mob-nav button{
  background:none;border:none;padding:4px 2px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:10px;font-weight:600;color:var(--g400);font-family:inherit;
  min-height:44px;justify-content:center;transition:color .15s;
  position:relative;z-index:1;
}
.mob-nav button.active{color:var(--or)}
.mob-nav button .mob-icon{font-size:20px;line-height:1}
.mob-nav button span{font-size:10px}
/* Push content up when mobile nav is visible */
@media(max-width:768px){
  .mob-nav{display:grid}
  body{padding-bottom:72px}
  /* Hide desktop tabs on mobile since we have bottom nav */
  .vtabs{display:none}
}

/* ── ABOUT US PAGE — prose typography ──
   Shared classes instead of repeated inline styles, so the About page's
   paragraph width, heading hierarchy and spacing stay consistent and are
   easy to adjust in one place. Font sizes are px (matching the rest of
   the site) and scale correctly under the accessibility text-size zoom
   levels above, since zoom scales the whole rendered page. */
.about-h2{
  font-family:'Playfair Display',serif;font-weight:700;color:#5A2E00;
  font-size:clamp(19px,3vw,23px);line-height:1.3;margin:40px 0 14px;
}
main .about-h2:first-of-type{margin-top:8px}
.about-p{font-size:16px;color:var(--g800);line-height:1.8;margin-bottom:18px}
.about-list{margin:4px 0 20px;padding-left:0;list-style:none}
.about-list li{
  font-size:16px;color:var(--g800);line-height:1.7;margin-bottom:9px;
  padding-left:22px;position:relative;
}
.about-list li::before{
  content:"";position:absolute;left:0;top:10px;width:7px;height:7px;
  border-radius:50%;background:var(--or2);
}
@media(max-width:480px){
  .about-p,.about-list li{font-size:15px}
}

/* ══════════════════════════════════════════════════════════════════
   ACCESSIBILITY MENU (Phase 2) — floating widget injected by JS on
   every page (see buildA11yMenu() in fenix-app.js), so it's available
   site-wide without duplicating markup per page. Preferences persist
   in localStorage and are re-applied on load — same mechanism already
   used for rate-limit tracking (see 'rl_' keys) elsewhere in this app.
   ══════════════════════════════════════════════════════════════════ */

/* Floating toggle button — bottom-left, so it never collides with the
   toast (bottom-right) or the mobile bottom-nav bar (full-width, but
   this sits above it with its own z-index and margin). */
.a11y-btn{
  position:fixed;left:16px;bottom:16px;z-index:750;
  width:52px;height:52px;border-radius:50%;
  background:var(--or);color:#fff;border:none;cursor:pointer;
  font-size:24px;display:flex;align-items:center;justify-content:center;
  box-shadow:var(--shl);
}
.a11y-btn:hover{background:var(--or2)}
@media(max-width:768px){.a11y-btn{bottom:88px}} /* clear the mobile bottom-nav */

.a11y-panel{
  position:fixed;left:16px;bottom:76px;z-index:751;
  width:min(340px,calc(100vw - 32px));max-height:min(560px,calc(100vh - 110px));
  background:#fff;border-radius:16px;box-shadow:var(--shl);
  display:none;flex-direction:column;overflow:hidden;
  border:1px solid #E8E6DF;
}
.a11y-panel.open{display:flex}
@media(max-width:768px){.a11y-panel{bottom:148px}}
.a11y-ph{padding:14px 16px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #F0EEE8;flex-shrink:0}
.a11y-pt{font-size:14px;font-weight:700;color:var(--g800)}
.a11y-pb{padding:14px 16px 20px;overflow-y:auto;flex:1}
.a11y-row{margin-bottom:16px}
.a11y-label{font-size:12px;font-weight:700;color:var(--g600);margin-bottom:7px;display:block}
.a11y-toggle{
  width:100%;display:flex;justify-content:space-between;align-items:center;
  padding:10px 12px;border-radius:10px;border:1.5px solid #E8E6DF;background:#fff;
  cursor:pointer;font-size:12.5px;font-weight:600;color:var(--g800);text-align:left;
}
.a11y-toggle[aria-pressed="true"]{background:var(--t50);border-color:var(--t400);color:var(--t400)}
.a11y-toggle .a11y-state{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:10px;background:var(--g100);color:var(--g600)}
.a11y-toggle[aria-pressed="true"] .a11y-state{background:var(--t400);color:#fff}
.a11y-size-row{display:flex;gap:8px;align-items:center}
.a11y-size-row button{
  width:38px;height:38px;border-radius:9px;border:1.5px solid #E8E6DF;background:#fff;
  font-size:15px;font-weight:800;cursor:pointer;color:var(--g800);
}
.a11y-size-row button:hover{background:var(--t50);border-color:var(--t400)}
.a11y-size-pct{flex:1;text-align:center;font-size:12.5px;font-weight:700;color:var(--g600)}
.a11y-reset{width:100%;padding:9px;border-radius:9px;border:1.5px dashed #E8E6DF;background:none;font-size:11.5px;font-weight:700;color:var(--g400);cursor:pointer;margin-top:2px}
.a11y-reset:hover{border-color:var(--c400);color:var(--c400)}
.a11y-divider{height:1px;background:#F0EEE8;margin:16px 0}
.a11y-listen-controls{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:8px}
.a11y-listen-controls button{
  flex:1;min-width:70px;padding:9px 8px;border-radius:9px;border:1.5px solid #E8E6DF;
  background:#fff;font-size:12px;font-weight:700;color:var(--g800);cursor:pointer;
}
.a11y-listen-controls button:hover:not(:disabled){background:var(--t50);border-color:var(--t400)}
.a11y-listen-controls button:disabled{opacity:.4;cursor:not-allowed}
.a11y-status{font-size:11.5px;color:var(--g400);font-weight:600;margin-top:2px}

/* ── High contrast ── redefines the shared color custom properties, so
   most var()-based styling across the whole site cascades automatically.
   Hardcoded hex colors (a handful of literal #fff backgrounds, badge
   colors in JS templates) are covered separately below for the highest-
   traffic containers; this is a known, accepted partial gap rather than
   a full per-element rewrite, to keep this change reviewable. */
html.a11y-contrast{
  --or:#FFD700;--or2:#FFEA70;--gr:#FFD700;--gr2:#FFEA70;--gr3:#FFD700;
  --c50:#000;--c400:#FF6B6B;--c600:#FF3B3B;
  --g100:#000;--g200:#333;--g400:#fff;--g600:#fff;--g800:#fff;
  --t50:#000;--t100:#FFD700;--t400:#FFD700;
}
html.a11y-contrast body{background:#000;color:#fff}
html.a11y-contrast nav,html.a11y-contrast .mob-menu,html.a11y-contrast footer,
html.a11y-contrast .md,html.a11y-contrast .a11y-panel,html.a11y-contrast .toast,
html.a11y-contrast .mob-nav{background:#000!important;color:#fff!important;border-color:#FFD700!important}
html.a11y-contrast a{color:#FFD700!important}
html.a11y-contrast .fc,html.a11y-contrast button:not(.a11y-btn){border-color:#FFD700!important}
html.a11y-contrast img{filter:grayscale(.2) contrast(1.3)}

/* ── Text spacing ── */
html.a11y-spacing body{letter-spacing:.03em;word-spacing:.14em}
html.a11y-spacing p,html.a11y-spacing li,html.a11y-spacing .odesc,html.a11y-spacing .oaddr{line-height:2!important}

/* ── Highlight links ── scoped to prose/content areas so nav buttons,
   filter chips, and CTA buttons (already visually distinct) aren't
   affected — this targets the "is this a link?" ambiguity that
   underlined-links accessibility settings exist to solve. */
html.a11y-links main a,html.a11y-links footer a,html.a11y-links .mdb a,
html.a11y-links .oc a:not(.dbt):not(.wabt){
  text-decoration:underline!important;text-decoration-thickness:2px!important;text-underline-offset:3px!important;font-weight:700!important;
}

/* ── Larger buttons/controls ── */
html.a11y-large button,html.a11y-large .fc,html.a11y-large input,
html.a11y-large select,html.a11y-large a.nl,html.a11y-large a.nc{
  min-height:52px!important;font-size:1.12em!important;padding:13px 18px!important;
}
html.a11y-large .a11y-btn{width:60px;height:60px;font-size:28px}

/* ── Reduce motion (manual toggle, in addition to the OS-level
   prefers-reduced-motion media query already applied globally) ── */
html.a11y-motion *,html.a11y-motion *::before,html.a11y-motion *::after{
  animation-duration:.001ms!important;animation-iteration-count:1!important;
  transition-duration:.001ms!important;scroll-behavior:auto!important;
}

/* ── Text size ── the site is 100% px-based with no rem scaffolding, so
   granular font scaling uses `zoom` (supported in all current major
   browsers, including Firefox 126+) rather than rewriting every
   font-size declaration to rem. */
html[data-a11y-text="1"]{zoom:1.12}
html[data-a11y-text="2"]{zoom:1.25}
html[data-a11y-text="3"]{zoom:1.4}
html[data-a11y-text="4"]{zoom:1.6}

/* ── RESOURCES / SEO ARTICLES ── prose uses existing .about-h2/.about-p/.about-list */
.res-crumb{font-size:12px;color:var(--g400);margin-bottom:18px}
.res-crumb a{color:var(--t400);text-decoration:none}
.res-crumb a:hover{text-decoration:underline}
.res-meta{font-size:12px;color:var(--g400);margin-bottom:28px;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.res-lang{font-size:12px;display:inline-flex;gap:4px;align-items:center}
.res-lang a,.res-lang span{padding:2px 7px;border-radius:6px;font-weight:700}
.res-lang span{color:var(--t400);background:var(--t50)}
.res-lang a{color:var(--g400);text-decoration:none}
.res-lang a:hover{color:var(--t400)}
.res-help-box{background:var(--t50);border:2px solid var(--t100);border-radius:16px;padding:24px 22px;margin:40px 0 8px}
.res-help-box h2{font-family:'Playfair Display',serif;font-weight:700;color:#5A2E00;font-size:18px;margin-bottom:12px}
.res-help-box ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:10px}
.res-help-box li a{display:inline-flex;align-items:center;gap:6px;color:var(--or2);font-weight:700;font-size:14px;text-decoration:none}
.res-help-box li a:hover{text-decoration:underline}
.res-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));margin-top:24px}
.res-card{background:#fff;border:1.5px solid var(--g100);border-radius:12px;padding:18px;display:block;text-decoration:none;transition:border-color .15s}
.res-card:hover{border-color:var(--t400)}
.res-card h3{font-size:15px;font-weight:700;color:var(--g800);margin-bottom:6px;line-height:1.4}
.res-card p{font-size:13px;color:var(--g600);line-height:1.6}
.res-cat{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--t400);background:var(--t50);border-radius:6px;padding:3px 8px;margin-bottom:8px}
@media(max-width:480px){.res-help-box{padding:20px 16px}}

/* Colombia emergency phone numbers grid (see renderColombiaEmergencyPhones()
   in fenix-app.js). Previously used inline auto-fill styling, which left an
   uneven gap after the 5th box instead of spreading all boxes evenly across
   the full row — auto-fit (below) collapses that empty track and stretches
   the real items to fill the width instead. Explicit breakpoints replace the
   old "however many happen to fit at 130px" wrapping with a deliberate
   step-down: 5 across on desktop, 3 across on tablet, 2 across (clean stack)
   on phones, rather than an unpredictable auto-fill reflow. */
.phone-grid{display:grid;gap:10px;grid-template-columns:repeat(5,1fr);margin-bottom:8px}
@media(max-width:768px){.phone-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:480px){.phone-grid{grid-template-columns:repeat(2,1fr)}}
.phone-box{text-decoration:none;background:#fff;border:1.5px solid #FFCDD2;border-radius:10px;padding:12px 10px;display:block;text-align:center}
.phone-box .pn{font-weight:700;color:#B71C1C;font-size:17px}
.phone-box .pl{font-size:11px;color:var(--g600);margin-top:2px}