/* The two typefaces, served from nearbyon.app itself (public/fonts/, SIL Open Font License, see OFL-*.txt there):
   Atkinson Hyperlegible for text (made by the Braille Institute to be easy to read) and Bricolage Grotesque for
   titles (one variable file for weights 600 to 800 and every optical size). Latin letters only, which covers
   English, Spanish and Portuguese; anything else falls back to the system font. */
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/atkinson-400.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/atkinson-700.woff2) format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:italic;font-weight:400;font-display:swap;src:url(/fonts/atkinson-400i.woff2) format("woff2")}
@font-face{font-family:"Bricolage Grotesque";font-style:normal;font-weight:600 800;font-stretch:100%;font-display:swap;src:url(/fonts/bricolage.woff2) format("woff2")}
/* Look of the pages outside the home: pro pages (/p/<name>), search (/find) and the account page (/app/).
   Same tokens as the home (src/site/home.html): light, large type, large tap targets, mobile first. */
:root{
  --bg:#FFFFFF; --soft:#F2F4F1; --soft-2:#F7F8F5; --ink:#1F2B36; --muted:#56636F; --line:#DCE2D9;
  --lime:#8BBC08; --lime-2:#A6D11F; --lime-strong:#4A7300; --lime-soft:#EDF5D6; --on-lime:#142006;
  --ok:#2E7A38; --ok-soft:#E2F1E4; --err:#B3413A; --err-soft:#FBE9E7; --wa:#188046;
  --shadow:0 1px 2px rgba(25,35,45,.06),0 14px 34px rgba(25,35,45,.10);
  --font-display:"Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --font-body:"Atkinson Hyperlegible","Segoe UI",system-ui,-apple-system,sans-serif;
  color-scheme:light;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0;background:var(--bg)}
body{color:var(--ink);font-family:var(--font-body);font-size:18px;line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;height:auto;object-fit:contain}
a{color:var(--lime-strong)}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--lime-strong);outline-offset:2px;border-radius:8px}
h1,h2,h3{font-family:var(--font-display);margin:0;line-height:1.1;letter-spacing:-.015em;text-wrap:balance}
p{margin:0}
.wrap{max-width:1080px;margin:0 auto;padding-inline:20px}
.sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.muted{color:var(--muted)}
.ic{width:22px;height:22px;flex:none}
/* the account page uses the home's line icons (src/site/icons.svg), drawn by these rules */
.page-app .ic{fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}

/* top bar */
.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(14px) saturate(1.6);backdrop-filter:blur(14px) saturate(1.6);border-bottom:1px solid rgba(220,226,217,.8);padding-top:env(safe-area-inset-top,0px)}
.top .wrap{display:flex;align-items:center;gap:12px;height:64px}
.brand{display:flex;align-items:center;min-height:44px}
.brand img{height:30px;width:auto;display:block}
.nav{margin-left:auto;display:flex;align-items:center;gap:2px}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;border-radius:12px;color:var(--ink);font-weight:700;font-size:16px;text-decoration:none;white-space:nowrap}
.nav a:hover{background:var(--soft)}
.flags{margin-left:4px;display:flex;align-items:center;gap:2px}
.flags a{display:grid;place-items:center;width:44px;height:44px;border-radius:12px}
.flags a:hover{background:var(--soft)}
.flag{display:block;width:30px;height:20px;border-radius:4px;overflow:hidden;box-shadow:0 0 0 1px rgba(25,35,45,.16)}
.flag svg{display:block;width:100%;height:100%}
.flags a[aria-current="true"] .flag{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--ink)}

/* buttons and chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 24px;border-radius:16px;border:2px solid transparent;font-weight:700;font-size:18px;text-decoration:none;cursor:pointer;line-height:1.2;text-align:center;transition:transform .14s ease,box-shadow .14s ease}
.btn:active{transform:translateY(1px)}
.btn.primary{background:linear-gradient(180deg,var(--lime-2),var(--lime));color:var(--on-lime);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 6px 16px rgba(110,150,10,.25)}
.btn.wa{background:var(--wa);color:#fff;box-shadow:0 6px 16px rgba(20,120,60,.25)}
.btn.dark{background:var(--ink);color:#fff}
.btn.ghost{background:#fff;border-color:#C9D2C6;color:var(--ink)}
.btn.sm{min-height:48px;font-size:16px;padding:0 16px;border-radius:12px}
.btn[disabled]{opacity:.55;cursor:default}
.linkbtn{background:none;border:0;padding:10px 0;min-height:44px;color:var(--muted);text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:15px}
.chip{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:6px 14px;border-radius:999px;background:var(--soft-2);border:1px solid var(--line);font-size:15.5px;font-weight:700}
.chip .ic{width:18px;height:18px}
.chip.ok{background:var(--ok-soft);border-color:#C3E2C8;color:var(--ok)}

/* ---------- pro page ---------- */
.pro .band{height:150px;background:radial-gradient(60% 120% at 85% 0%,#DDF0B0 0%,rgba(221,240,176,0) 70%),linear-gradient(180deg,#F1F8E3,#FFFFFF);position:relative;overflow:hidden}
.pro .band .tm{display:none;position:absolute;right:max(20px,calc(50% - 520px));bottom:-26px;height:150px;width:auto;opacity:.95;filter:drop-shadow(0 10px 14px rgba(30,60,10,.18))}
.pro .head{display:flex;align-items:flex-end;gap:18px;margin-top:-64px;position:relative}
.av{width:128px;height:128px;border-radius:50%;object-fit:cover;border:5px solid #fff;box-shadow:var(--shadow);flex:none;background:#fff}
.av.ini{display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:46px;color:#fff;background:hsl(var(--h) 45% 42%)}
.pro .who{padding-bottom:8px;min-width:0}
.pro h1{font-size:clamp(28px,5vw,40px)}
.pro .job{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin-top:6px;color:var(--muted);font-size:17px}
.pro .job img{width:28px;height:28px}
.pro .job .ic{width:18px;height:18px}
.pro .job .pl{display:inline-flex;align-items:center;gap:4px;white-space:nowrap;margin-left:8px}
.pro .chips{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:18px;align-items:center}
.pro .chk{font-size:15px;display:inline-flex;align-items:center;min-height:44px}
.pro .licd{margin-top:10px;font-size:15.5px;line-height:1.5;color:var(--muted);max-width:720px}
.pro .licd span{display:block}
.card .lic{display:inline-flex;align-items:center;gap:4px;margin-top:2px;color:var(--ok);font-weight:700;font-size:15px}
.card .lic .ic{width:16px;height:16px}
.pro .acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.pro .acts .btn.wa{flex:1 1 260px}
.pro h2{font-size:24px;margin:34px 0 12px}
.pro .bio{font-size:18px;max-width:720px}
.pro .serves{display:flex;align-items:center;gap:8px;margin-top:14px;color:var(--muted)}
.pro .serves .ic{width:18px;height:18px}
.grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.grid button{display:block;width:100%;padding:0;border:0;background:var(--soft);border-radius:12px;overflow:hidden;cursor:zoom-in;aspect-ratio:1}
.grid img{display:block;width:100%;height:100%;object-fit:cover}
#lb{border:0;padding:0;background:transparent;max-width:min(96vw,1100px);max-height:94vh}
#lb::backdrop{background:rgba(10,15,20,.88)}
#lb figure{margin:0}
#lb img{display:block;width:auto;height:auto;max-width:min(96vw,1100px);max-height:84vh;border-radius:12px;margin:auto}
#lb figcaption{color:#fff;text-align:center;padding:10px 50px;font-size:17px}
#lb button{position:fixed;top:50%;width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.92);font-size:30px;line-height:1;cursor:pointer}
#lb .lb-x{top:14px;right:14px;font-size:22px}
#lb .lb-p{left:12px}
#lb .lb-n{right:12px}
.pro .since{margin-top:26px;color:var(--muted);font-size:15.5px}
.pro .more{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;margin:26px 0 50px}

/* ---------- search ---------- */
.find{padding:22px 0 50px}
.sbar{display:grid;grid-template-columns:1fr;gap:10px;background:#fff;border:1.5px solid var(--line);border-radius:22px;padding:12px;box-shadow:var(--shadow)}
.sbar select,.sbar input{min-height:56px;border:1.5px solid #C9D2C6;border-radius:14px;padding:0 14px;background:#fff;font-size:18px;width:100%}
.find h1{font-size:clamp(26px,4.4vw,38px);margin-top:28px}
.find .count{color:var(--muted);margin-top:6px}
.cards{list-style:none;margin:20px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:14px}
.card{background:#fff;border:1.5px solid var(--line);border-radius:22px;padding:16px;box-shadow:0 1px 2px rgba(25,35,45,.05)}
.card .who{display:flex;align-items:center;gap:14px;text-decoration:none;color:var(--ink)}
.card .av{width:72px;height:72px;border-width:3px;box-shadow:none}
.card .av.ini{font-size:26px}
.card b{display:block;font-family:var(--font-display);font-size:21px;line-height:1.2}
.card small{display:block;color:var(--muted);font-size:15.5px}
.card small.d{display:flex;align-items:center;gap:4px}
.card small.d .ic{width:15px;height:15px}
.card .ph{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-top:14px}
.card .ph img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:10px;background:var(--soft)}
.card .pc{font-size:14px;color:var(--muted);margin-top:6px}
.card .acts{display:flex;gap:8px;margin-top:14px}
.card .acts .btn{flex:1}
.empty{text-align:center;padding:30px 0 10px;display:grid;justify-items:center;gap:12px}
.empty img{width:150px;height:auto}
.empty h1,.empty h2{font-size:26px}
.empty p{color:var(--muted);max-width:460px}
.procta{display:inline-flex;align-items:center;gap:8px;min-height:44px;margin-top:24px;font-weight:700;text-underline-offset:4px}
.procta .ic{width:18px;height:18px}

/* ---------- account page ---------- */
.page-app main{padding:22px 0 60px}
.panel{max-width:560px;margin:0 auto;background:#fff;border:1.5px solid var(--line);border-radius:26px;padding:24px 22px;box-shadow:var(--shadow)}
.panel + .panel{margin-top:18px}
.panel h1{font-size:30px}
.panel h2{font-size:23px}
.panel > p{color:var(--muted);margin-top:8px}
.field{display:grid;gap:6px;margin-top:18px}
.field > span,.field > label{font-weight:700;font-size:17px}
.field small{color:var(--muted);font-size:15px;font-weight:400}
.field input,.field select,.field textarea{width:100%;min-height:56px;border:1.5px solid #C9D2C6;border-radius:14px;padding:12px 14px;background:#fff;font-size:18px}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--lime-strong);outline:0;box-shadow:0 0 0 3px rgba(139,188,8,.25)}
.code{letter-spacing:.5em;font-size:28px!important;text-align:center;font-family:var(--font-display)}
.checks{display:flex;flex-wrap:wrap;gap:8px}
.checks label{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 16px;border:1.5px solid #C9D2C6;border-radius:12px;cursor:pointer;font-size:17px}
.checks input{width:20px;height:20px;accent-color:var(--lime-strong)}
.panel .btn{width:100%;margin-top:22px}
.check{display:flex;align-items:flex-start;gap:12px;margin-top:18px;font-size:17px;cursor:pointer}
.check input{flex:none;width:24px;height:24px;margin-top:2px;accent-color:var(--lime-strong)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.how{margin-top:16px}
.how summary{display:flex;align-items:center;min-height:44px;cursor:pointer;font-weight:700;color:var(--lime-strong)}
.how p{margin-top:6px;color:var(--muted)}
.panel .btn .ic{width:24px;height:24px}
.panel.done{text-align:center}
.panel.done img{display:block;margin:0 auto 8px;height:160px;width:auto}
.msg{margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--err-soft);color:var(--err);font-weight:700}
.msg.ok{background:var(--ok-soft);color:var(--ok)}
.note{margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--lime-soft);color:var(--lime-strong);font-weight:700}
.row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.row .btn{flex:1 1 200px;width:auto;margin-top:0}
.me{display:flex;align-items:center;gap:14px}
.me .av{width:84px;height:84px;border-width:3px}
.me .av.ini{font-size:30px}
.me b{display:block;font-family:var(--font-display);font-size:22px;line-height:1.2}
.me small{display:block;color:var(--muted)}
.link{display:flex;align-items:center;gap:8px;margin-top:14px;padding:12px 14px;border-radius:12px;background:var(--soft-2);border:1px dashed var(--line);font-weight:700;word-break:break-all}
.pics{list-style:none;margin:16px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.pics li{position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;background:var(--soft)}
.pics img{width:100%;height:100%;object-fit:cover;display:block}
.pics button{position:absolute;top:6px;right:6px;width:36px;height:36px;border-radius:50%;border:0;background:rgba(255,255,255,.94);font-size:18px;cursor:pointer;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.pics li.up::after{content:"";position:absolute;inset:0;background:rgba(255,255,255,.6) center/36px no-repeat}
.file{position:relative;overflow:hidden}
.file input{position:absolute;inset:0;opacity:0;cursor:pointer}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.stats div{display:grid;justify-items:center;gap:2px;padding:14px 6px;border-radius:16px;background:var(--soft-2);border:1px solid var(--line);text-align:center}
.stats b{font-family:var(--font-display);font-size:30px;line-height:1.1}
.stats span{font-size:14.5px;color:var(--muted);line-height:1.25}
.out{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;max-width:560px;margin:16px auto 0;color:var(--muted);font-size:15.5px}

footer{border-top:1px solid var(--line);padding:22px 0 calc(22px + env(safe-area-inset-bottom,0px));font-size:15.5px;color:var(--muted);background:linear-gradient(180deg,#fff,#F7FAF2)}
footer .wrap{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center}
footer .logo{height:22px;width:auto;display:block}
footer a{color:var(--muted);display:inline-block;padding:10px 0;min-width:44px;text-align:center}
footer .sp{margin-left:auto}

@media (max-width:640px){.nav a.np{display:none}}
@media (max-width:520px){.nav a.nf{display:none}}
@media (max-width:520px){.wrap{padding-inline:16px}.top .wrap{gap:4px}.brand img{height:26px}.nav a{padding:0 8px;font-size:15.5px}.flags{margin-left:0}.flags a{width:40px}}
@media (max-width:370px){.brand img{height:22px}.flags a{width:36px}}
@media (min-width:640px){
  .sbar{grid-template-columns:1.2fr 1fr auto}
  .cards{grid-template-columns:1fr 1fr}
  .grid{gap:10px}
  .av{width:150px;height:150px}
  .pro .head{margin-top:-74px}
  .pro .band{height:180px}
  .pro .band .tm{display:block;height:190px}
}
@media (min-width:980px){
  .cards{grid-template-columns:repeat(3,1fr)}
  .grid{grid-template-columns:repeat(4,1fr)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}