:root{
  --navy-deep:#0B1A33;
  --navy:#1B2A52;
  --navy-card:#152443;
  --platinum:#E5E4E2;
  --lime:#8DC63F;
  --amber:#E8A33D;
  --skyblue:#6EC1E4;
  --text:#F4F6FA;
  --muted:#9FB0CC;
  --line:rgba(229,228,226,.12);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  background:var(--navy-deep);
  color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  line-height:1.55;
}
a{color:inherit;text-decoration:none}
.wrap{max-width:1100px;margin:0 auto;padding:0 20px}

/* ---------- header ---------- */
header{
  position:sticky;top:0;z-index:50;
  background:rgba(11,26,51,.94);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;padding:14px 0;gap:12px}
.brand{font-weight:800;font-size:1.05rem;letter-spacing:.02em}
.brand .nv{color:var(--lime)}
.navlinks{display:flex;align-items:center;gap:18px;font-size:.9rem}
.navlinks a{color:var(--muted)}
.navlinks a:hover,.navlinks a:focus-visible{color:var(--text)}
.navlinks a.cta{
  color:var(--navy-deep);background:var(--lime);
  padding:8px 14px;border-radius:8px;font-weight:700;
}
.lang-toggle{
  display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;font-size:.8rem;
}
.lang-toggle button{
  background:none;border:none;color:var(--muted);padding:6px 10px;cursor:pointer;font-weight:700;
}
.lang-toggle button.active{background:var(--lime);color:var(--navy-deep)}
.lang-toggle button:focus-visible{outline:2px solid var(--skyblue)}

/* ---------- hero ---------- */
.hero{padding:56px 0 40px;text-align:center}
.pill{
  display:inline-block;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--amber);border:1px solid rgba(232,163,61,.4);border-radius:999px;padding:6px 14px;margin-bottom:18px;
}
h1{font-size:clamp(2rem,6vw,3.2rem);line-height:1.12;font-weight:800}
h1 .accent{color:var(--lime)}
.hero p{max-width:640px;margin:16px auto 0;color:var(--muted);font-size:1.02rem}
.search{
  max-width:560px;margin:26px auto 0;display:flex;
  background:var(--navy);border:1px solid var(--line);border-radius:12px;overflow:hidden;
}
.search input{
  flex:1;background:none;border:none;color:var(--text);padding:14px 16px;font-size:1rem;
}
.search input::placeholder{color:var(--muted)}
.search button{
  background:var(--lime);color:var(--navy-deep);border:none;padding:0 22px;font-weight:800;cursor:pointer;
}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.chips span{
  font-size:.82rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 12px;
}
.stats{display:flex;justify-content:center;gap:38px;margin-top:34px;flex-wrap:wrap}
.stat b{display:block;font-size:1.6rem;color:var(--lime)}
.stat span{font-size:.82rem;color:var(--muted)}

/* ---------- shared section ---------- */
section{padding:52px 0;border-top:1px solid var(--line)}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}
h2{font-size:clamp(1.35rem,3.5vw,1.8rem);font-weight:800}
.sec-sub{color:var(--muted);margin-bottom:26px;font-size:.95rem}
.grid{display:grid;gap:14px}
@media(min-width:640px){.grid.cols-2{grid-template-columns:1fr 1fr}.grid.cols-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:900px){.grid.cols-4{grid-template-columns:repeat(4,1fr)}}
@media(min-width:640px) and (max-width:899px){.grid.cols-4{grid-template-columns:repeat(2,1fr)}}

/* ---------- neighborhoods ---------- */
.hood{
  background:var(--navy-card);border:1px solid var(--line);border-radius:12px;padding:16px;
  display:flex;gap:12px;align-items:flex-start;
}
.hood .emoji{font-size:1.4rem;line-height:1}
.hood b{display:block;font-size:.95rem}
.hood span{font-size:.82rem;color:var(--muted)}
.hood .check{margin-left:auto;color:var(--lime);font-weight:800}

/* ---------- categories ---------- */
.cat{
  display:block;
  background:var(--navy-card);border:1px solid var(--line);border-radius:12px;padding:16px;text-align:center;
  transition:border-color .15s ease,transform .15s ease;
}
.cat:hover,.cat:focus-visible{border-color:rgba(141,198,63,.55)}
@media(hover:hover){.cat:hover{transform:translateY(-2px)}}
@media (prefers-reduced-motion: reduce){.cat{transition:none}.cat:hover{transform:none}}
.cat .emoji{font-size:1.5rem;display:block;margin-bottom:6px}
.cat b{font-size:.92rem;display:block}
.cat span{font-size:.78rem;color:var(--muted)}

/* ---------- listing cards ---------- */
.card{
  position:relative;
  background:var(--navy-card);border:1px solid var(--line);border-radius:14px;padding:20px;
  display:flex;flex-direction:column;gap:10px;
  transition:border-color .15s ease,transform .15s ease;
}
.card .top{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.badge{
  font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;
  border-radius:6px;padding:4px 8px;
}
.badge.verified{background:var(--lime);color:var(--navy-deep)}
.badge.gold{background:var(--amber);color:var(--navy-deep)}
.badge.grade{background:rgba(141,198,63,.15);color:var(--lime);border:1px solid rgba(141,198,63,.4)}
.badge.cat-tag{background:rgba(229,228,226,.08);color:var(--muted)}
.card h3{font-size:1.08rem;font-weight:800}
.card .desc{font-size:.9rem;color:var(--muted)}
.card .meta{font-size:.84rem;color:var(--muted)}
.card .meta div{margin-top:2px}
.pending{
  font-size:.8rem;color:var(--amber);
  border:1px dashed rgba(232,163,61,.5);border-radius:8px;padding:8px 10px;
}
.card .actions{margin-top:auto;display:flex;gap:10px;padding-top:6px}
.btn{
  display:inline-block;font-weight:700;font-size:.88rem;border-radius:9px;padding:10px 16px;text-align:center;
}
.btn.solid{background:var(--lime);color:var(--navy-deep)}
.btn.outline{border:1px solid var(--line);color:var(--text)}

/* ---------- clickable listing cards ----------
   The heading holds the real link; its ::after stretches over the whole
   card so the entire card is a tap target. Inner links/buttons sit on a
   higher layer so they stay independently clickable. */
.card-link::after{
  content:"";position:absolute;inset:0;z-index:1;border-radius:inherit;
}
.card:hover,.card:focus-within{border-color:rgba(141,198,63,.55)}
@media(hover:hover){.card:hover{transform:translateY(-2px)}}
.card-link:focus-visible{outline:none}
.card:focus-within{outline:2px solid var(--skyblue);outline-offset:2px}
.card .actions,.card .meta a{position:relative;z-index:2}
.card .view-more{
  margin-top:auto;padding-top:6px;font-size:.84rem;font-weight:700;color:var(--lime);
}
.card:hover .view-more{text-decoration:underline}
@media (prefers-reduced-motion: reduce){.card{transition:none}.card:hover{transform:none}}

/* ---------- trades pending block ---------- */
.trade-group{
  background:var(--navy-card);border:1px solid var(--line);border-radius:14px;padding:20px;
}
.trade-group h3{font-size:1rem;margin-bottom:8px}
.slot{
  border:1px dashed var(--line);border-radius:8px;padding:10px 12px;margin-top:8px;
  font-size:.84rem;color:var(--muted);
}

/* ---------- value props ---------- */
.prop{text-align:center;padding:10px}
.prop .emoji{font-size:1.6rem}
.prop b{display:block;margin:8px 0 4px}
.prop p{font-size:.88rem;color:var(--muted)}

/* ---------- owners CTA ---------- */
.owners{
  background:linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);
  border:1px solid var(--line);border-radius:18px;padding:40px 24px;text-align:center;
}
.owners .pill{margin-bottom:14px}
.owners h2 .accent{color:var(--lime)}
.owners p{color:var(--muted);max-width:560px;margin:14px auto 22px}
.owners .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.perks{display:flex;gap:28px;justify-content:center;flex-wrap:wrap;margin-top:30px}
.perk{font-size:.85rem;color:var(--muted);max-width:160px}
.perk .emoji{display:block;font-size:1.3rem;margin-bottom:4px}
.perk b{display:block;color:var(--text)}

/* ---------- how to list ---------- */
.how-list{list-style:none;text-align:left;max-width:640px;margin:22px auto 26px;display:flex;flex-direction:column;gap:14px}
.how-list li{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:.95rem}
.how-list li .tick{color:var(--lime);font-weight:800;flex:none;line-height:1.4}
.how-list li b{color:var(--amber)}

/* ---------- business detail page ---------- */
.crumbs{font-size:.84rem;color:var(--muted);padding:22px 0 0}
.crumbs a{color:var(--muted);text-decoration:underline}
.crumbs a:hover{color:var(--text)}
.detail{padding:26px 0 60px}
.detail-head{display:flex;flex-direction:column;gap:12px;margin-bottom:8px}
.detail-head h1{font-size:clamp(1.6rem,4.5vw,2.4rem)}
.detail-badges{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.detail-lede{color:var(--muted);font-size:1rem;max-width:720px;margin-top:14px}
.panel{
  background:var(--navy-card);border:1px solid var(--line);border-radius:14px;padding:20px;margin-top:22px;
}
.panel h2{font-size:1.05rem;margin-bottom:12px}
.info-row{
  display:flex;gap:10px;align-items:flex-start;
  padding:9px 0;border-top:1px solid var(--line);font-size:.92rem;
}
.info-row:first-of-type{border-top:none}
.info-row .k{color:var(--muted);flex:none;min-width:112px}
.info-row .v{color:var(--text);word-break:break-word}
.info-row .v a{color:var(--skyblue);text-decoration:underline}
.muted-note{color:var(--muted);font-size:.92rem}
.hours{display:flex;flex-direction:column}
.hours-row{
  display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  padding:8px 0;border-top:1px solid var(--line);font-size:.92rem;
}
.hours-row:first-child{border-top:none}
.hours-days{color:var(--muted)}
.hours-time{color:var(--text);font-weight:600}
.detail .actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.checklist{list-style:none;display:flex;flex-direction:column;gap:10px}
.checklist li{display:flex;gap:10px;align-items:flex-start;color:var(--muted);font-size:.9rem}
.checklist li .tick{color:var(--lime);font-weight:800;flex:none}
.not-found{padding:60px 0;text-align:center}
.not-found h1{margin-bottom:12px}
.not-found p{color:var(--muted);margin-bottom:22px}

/* ---------- intake form ---------- */
.intake{
  max-width:680px;margin:0 auto;text-align:left;
  background:var(--navy-card);border:1px solid var(--line);border-radius:16px;padding:24px;
}
.gate{
  border:1px solid rgba(110,193,228,.45);background:rgba(110,193,228,.08);
  border-radius:12px;padding:14px 16px;margin-bottom:22px;font-size:.9rem;color:var(--text);
}
.gate b{display:block;color:var(--skyblue);font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;margin-bottom:6px}
.gate p{color:var(--muted);margin:0;max-width:none}
.steps{
  display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin:0 auto 26px;max-width:680px;
  font-size:.8rem;color:var(--muted);
}
.step{
  flex:1 1 150px;border:1px solid var(--line);border-radius:10px;padding:10px 12px;text-align:left;
  background:rgba(21,36,67,.6);
}
.step b{display:block;color:var(--text);font-size:.86rem}
.step.now{border-color:rgba(141,198,63,.5)}
.step.now .num{color:var(--lime)}
.step .num{font-size:.72rem;font-weight:800;letter-spacing:.08em;color:var(--muted);display:block;margin-bottom:2px}
.field{margin-bottom:16px}
.field label{display:block;font-size:.85rem;font-weight:700;margin-bottom:6px}
.field .req{color:var(--amber)}
.field input,.field select,.field textarea{
  width:100%;background:var(--navy-deep);color:var(--text);
  border:1px solid var(--line);border-radius:9px;padding:11px 12px;font-size:.95rem;
  font-family:inherit;
}
.field input::placeholder,.field textarea::placeholder{color:var(--muted)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-color:var(--skyblue);
}
.field textarea{min-height:96px;resize:vertical}
.field .hint{display:block;font-size:.78rem;color:var(--muted);margin-top:5px}
.field-row{display:grid;gap:16px}
@media(min-width:560px){.field-row{grid-template-columns:1fr 1fr}}
.check-field{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;color:var(--muted);margin-bottom:18px}
.check-field input{width:18px;height:18px;flex:none;margin-top:2px;accent-color:var(--lime)}
.form-submit{
  background:var(--lime);color:var(--navy-deep);border:none;cursor:pointer;
  font-weight:800;font-size:.95rem;border-radius:10px;padding:13px 22px;width:100%;
  font-family:inherit;
}
.form-submit:disabled{opacity:.6;cursor:progress}
.form-foot{font-size:.8rem;color:var(--muted);margin-top:12px;text-align:center}
.hp-only{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- confirmation page ---------- */
.confirm{max-width:640px;margin:0 auto;padding:70px 0;text-align:center}
.confirm .emoji{font-size:2.6rem;display:block;margin-bottom:14px}
.confirm h1{font-size:clamp(1.6rem,4.5vw,2.3rem);margin-bottom:14px}
.confirm p{color:var(--muted);margin:0 auto 16px;max-width:520px}
.confirm .panel{text-align:left}
.confirm .actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}

/* ---------- footer & legend ---------- */
footer{border-top:1px solid var(--line);padding:44px 0 28px;font-size:.88rem}
.foot-grid{display:grid;gap:28px}
@media(min-width:760px){.foot-grid{grid-template-columns:2fr 1fr 1fr 1fr}}
.foot-brand p{color:var(--muted);margin-top:8px;max-width:280px}
footer h4{font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:10px}
footer ul{list-style:none}
footer li{margin-bottom:6px}
footer li a{color:var(--muted)}
footer li a:hover{color:var(--text)}
details.legend{
  margin-top:34px;border:1px solid var(--line);border-radius:12px;background:var(--navy-card);
}
details.legend summary{
  padding:14px 16px;cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;align-items:center;
}
details.legend summary::after{content:"+";color:var(--lime);font-weight:800}
details.legend[open] summary::after{content:"–"}
.legend-body{padding:0 16px 16px;color:var(--muted);font-size:.85rem}
.legend-row{display:flex;gap:10px;align-items:flex-start;margin-top:10px}
.swatch{width:14px;height:14px;border-radius:4px;flex:none;margin-top:3px}
.copyright{margin-top:28px;color:var(--muted);text-align:center;font-size:.82rem;line-height:1.7}

/* ---------- language toggle logic ---------- */
.lang-es [data-en]{display:none!important}
.lang-en [data-es]{display:none!important}
span[data-en],span[data-es]{display:inline}
div[data-en],div[data-es],p[data-en],p[data-es],b[data-en],b[data-es],h1[data-en],h1[data-es],h2[data-en],h2[data-es],h3[data-en],h3[data-es],label[data-en],label[data-es],li[data-en],li[data-es]{display:block}
a[data-en],a[data-es],button[data-en],button[data-es]{display:inline-block}

@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}}
:focus-visible{outline:2px solid var(--skyblue);outline-offset:2px}