:root{
  --night-0:#0C1917;
  --night-1:#14251F;
  --pine:#1C332A;
  --conifer:#2F5A41;
  --moss:#3F7052;
  --sage:#9AB49B;
  --birch:#F6F4EC;
  --mist:#ECEFE4;
  --ink:#1E2A24;
  --ink-soft:#4C5B52;
  --amber:#E9A13B;
  --amber-deep:#B97817;
  --amber-glow:rgba(233,161,59,.55);
  --card-line:#DCDFCF;
  --radius:14px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* Listeo injects popup markup (save-search dialog, etc) into wp_footer on every
   page and relies on .mfp-hide in its own style.css to keep it offscreen until
   Magnific Popup opens it. This template dequeues that stylesheet, so without
   this rule the raw unstyled dialog sits visible at the bottom of the page. */
.mfp-hide{display:none !important}
body{
  font-family:'Karla',system-ui,sans-serif;
  background:var(--birch);
  color:var(--ink);
  line-height:1.6;
  font-size:16.5px;
}
h1,h2,h3{font-family:'Bricolage Grotesque',system-ui,sans-serif;line-height:1.08;letter-spacing:-.01em}
.mono{font-family:'IBM Plex Mono',monospace}
a{color:inherit}
img{max-width:100%}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:4px}

/* ---------- NAV ---------- */
.nav{
  position:absolute;top:0;left:0;right:0;z-index:10;
  padding:22px 0;
}
.nav .wrap{display:flex;align-items:center;gap:34px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--birch);font-family:'Bricolage Grotesque';font-weight:800;font-size:1.35rem;letter-spacing:-.02em}
.brand svg{display:block}
/* Header lockup is the same SVG file Listeo serves, so the landing pages and
   the dashboard show an identical logo. */
.nav .brand img{display:block;height:34px;width:auto;max-width:100%}
@media (max-width:600px){
  .nav .brand img{height:28px}
}
.nav-links{display:flex;gap:26px;margin-left:auto;align-items:center}
.nav-links a{color:rgba(246,244,236,.85);text-decoration:none;font-weight:500;font-size:.95rem}
.nav-links a:hover{color:#fff}
.btn{
  display:inline-block;text-decoration:none;font-weight:700;
  border-radius:999px;padding:12px 24px;font-size:.97rem;
  transition:transform .15s ease, box-shadow .15s ease, background .15s ease;
  border:none;cursor:pointer;
}
.btn:hover{transform:translateY(-1px)}
.btn-amber{background:var(--amber);color:#231603;box-shadow:0 6px 18px -6px var(--amber-glow)}
.btn-amber:hover{background:#F0AC49}
.btn-ghost{border:1.5px solid rgba(246,244,236,.5);color:var(--birch)}
.btn-ghost:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.btn-pine{background:var(--conifer);color:#fff}
.btn-pine:hover{background:var(--moss)}
.nav .btn{padding:10px 20px}

/* ---------- HERO ---------- */
.hero{
  position:relative;
  background:linear-gradient(180deg,#0A1520 0%,#0E1E1E 45%,var(--night-1) 100%);
  color:var(--birch);
  overflow:hidden;
}
.hero-inner{
  position:relative;z-index:3;
  padding:150px 0 0;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;gap:24px;
}
.eyebrow{
  font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--sage);margin-bottom:18px;display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--amber);display:inline-block}
.hero h1{
  font-size:clamp(2.6rem,5.4vw,4.3rem);font-weight:800;color:#FBFAF4;
  margin-bottom:20px;
}
.hero h1 em{font-style:normal;color:var(--amber)}
.hero p.lede{font-size:1.14rem;color:rgba(246,244,236,.82);max-width:34em;margin-bottom:30px}
.hero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.trust{
  font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:rgba(154,180,155,.9);
  display:flex;gap:22px;flex-wrap:wrap;padding-bottom:24px;
}
.trust span{display:flex;align-items:center;gap:7px}
.trust svg{flex:none}

/* hero scene */
.scene{position:relative;z-index:2;align-self:end}
.scene svg{display:block;width:100%;height:auto}
.stars{position:absolute;inset:0;z-index:1;pointer-events:none}
.stars i{
  position:absolute;width:2px;height:2px;border-radius:50%;
  background:#DDE6D9;opacity:.7;animation:twinkle 4s ease-in-out infinite;
}
@keyframes twinkle{0%,100%{opacity:.25}50%{opacity:.85}}
.ring{
  transform-origin:center;transform-box:fill-box;
  animation:pulse 3.4s ease-out infinite;opacity:0;
}
.ring.r2{animation-delay:1.1s}
.ring.r3{animation-delay:2.2s}
@keyframes pulse{
  0%{transform:scale(.35);opacity:0}
  18%{opacity:.85}
  100%{transform:scale(1.15);opacity:0}
}
.dish-glow{animation:glowbeat 3.4s ease-in-out infinite}
@keyframes glowbeat{0%,100%{opacity:.55}50%{opacity:1}}
.hero-base{
  position:relative;z-index:2;height:74px;
  background:linear-gradient(180deg,transparent,rgba(12,25,23,.0));
}
.hero::after{ /* treeline that runs full width under both columns */
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:110px;z-index:1;
  background:var(--night-0);
  clip-path:polygon(0 62%,3% 48%,5% 60%,8% 40%,10% 58%,13% 46%,16% 62%,19% 38%,21% 56%,25% 44%,28% 60%,31% 34%,33% 55%,37% 42%,40% 62%,44% 36%,46% 58%,50% 46%,53% 62%,57% 40%,59% 58%,63% 44%,66% 60%,70% 34%,72% 54%,76% 44%,79% 62%,83% 38%,85% 56%,89% 46%,92% 60%,96% 40%,98% 58%,100% 50%,100% 100%,0 100%);
}

/* ---------- WIFI HIGHLIGHT ---------- */
.wifi{
  background:var(--night-0);color:var(--birch);
  padding:86px 0 96px;position:relative;
}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:42px;flex-wrap:wrap}
.sec-head h2{font-size:clamp(1.9rem,3.4vw,2.7rem);font-weight:800}
.wifi .sec-head h2{color:#FBFAF4}
.sec-head .sub{max-width:30em;color:var(--ink-soft)}
.wifi .sec-head .sub{color:rgba(246,244,236,.7)}
.badge{
  font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  background:rgba(233,161,59,.14);color:var(--amber);border:1px solid rgba(233,161,59,.4);
  padding:5px 12px;border-radius:999px;display:inline-block;margin-bottom:14px;
}
.wifi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.wifi-card{
  background:linear-gradient(170deg,#16292A 0%,#122220 100%);
  border:1px solid #23423A;border-radius:var(--radius);
  padding:30px 28px;display:flex;flex-direction:column;gap:14px;
  transition:transform .18s ease,border-color .18s ease;
}
.wifi-card:hover{transform:translateY(-4px);border-color:var(--amber-deep)}
.wifi-card.feature{border-color:var(--amber-deep);box-shadow:0 20px 50px -30px var(--amber-glow)}
.wifi-card h3{font-size:1.32rem;color:#FBFAF4;font-weight:700}
.wifi-card p{color:rgba(246,244,236,.72);font-size:.98rem;flex:1}
.price{
  font-family:'IBM Plex Mono',monospace;color:var(--amber);font-size:1.05rem;font-weight:600;
}
.price small{color:rgba(246,244,236,.55);font-weight:400;font-size:.78rem}
.bars{display:flex;gap:4px;align-items:flex-end;height:22px}
.bars b{width:5px;background:var(--conifer);border-radius:2px;display:block}
.bars b:nth-child(1){height:6px}.bars b:nth-child(2){height:10px}
.bars b:nth-child(3){height:15px}.bars b:nth-child(4){height:20px;background:var(--amber)}
.cat-icon{display:flex;align-items:center;height:22px}
.wifi-card .btn{align-self:flex-start;margin-top:6px}
.tag{
  font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sage);
}

/* ---------- GEAR CATEGORY CAROUSEL ---------- */
.gear{padding:92px 0}
.gear-carousel{position:relative;display:flex;align-items:center;gap:12px}
.gear-track{
  display:flex;gap:20px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x proximity;
  padding:4px 4px 16px;margin:0 -4px;flex:1;
  scrollbar-width:none;-ms-overflow-style:none;
}
.gear-track::-webkit-scrollbar{display:none}
.gear-card{
  background:#fff;border:1px solid var(--card-line);border-radius:var(--radius);
  overflow:hidden;text-decoration:none;display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease;
  flex:0 0 260px;scroll-snap-align:start;
}
.gear-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(30,42,36,.35)}
.gear-card-more{background:var(--mist)}
.gear-art{height:130px;display:flex;align-items:center;justify-content:center;background:var(--mist)}
.gear-card-more .gear-art{background:#fff}
.gear-art svg{display:block}
.gear-body{padding:18px 20px 22px}
.gear-body h3{font-size:1.08rem;font-weight:700;margin-bottom:6px}
.gear-body p{font-size:.88rem;color:var(--ink-soft);min-height:2.6em}
.gear-body .from{font-family:'IBM Plex Mono',monospace;font-size:.8rem;color:var(--amber-deep);margin-top:12px;display:block;font-weight:600}
.gear-arrow{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;border:1px solid var(--card-line);
  background:#fff;color:var(--pine);font-size:1.6rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:background .15s ease,color .15s ease;
}
.gear-arrow:hover{background:var(--pine);color:#fff;border-color:var(--pine)}
@media (max-width:640px){.gear-arrow{display:none}}

/* ---------- HOW IT WORKS ---------- */
.how{background:var(--mist);padding:92px 0;border-top:1px solid var(--card-line);border-bottom:1px solid var(--card-line)}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;counter-reset:step}
.step{position:relative;padding:26px 26px 30px;background:#fff;border:1px solid var(--card-line);border-radius:var(--radius)}
.step::before{
  counter-increment:step;content:counter(step,decimal-leading-zero);
  font-family:'IBM Plex Mono',monospace;font-size:.8rem;font-weight:600;
  color:var(--amber-deep);letter-spacing:.1em;display:block;margin-bottom:14px;
}
.step h3{font-size:1.18rem;margin-bottom:8px}
.step p{font-size:.95rem;color:var(--ink-soft)}

/* ---------- HOST ---------- */
.host{padding:96px 0}
.host-panel{
  background:linear-gradient(140deg,var(--pine) 0%,var(--night-1) 100%);
  border-radius:22px;color:var(--birch);
  padding:64px 58px;display:grid;grid-template-columns:1.2fr .8fr;gap:40px;align-items:center;
  position:relative;overflow:hidden;
}
.host-panel::after{
  content:"";position:absolute;right:-60px;top:-60px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(233,161,59,.22),transparent 65%);
}
.host-panel h2{font-size:clamp(1.8rem,3.2vw,2.5rem);color:#FBFAF4;margin-bottom:14px}
.host-panel p{color:rgba(246,244,236,.78);max-width:36em}
.host-stats{display:flex;flex-direction:column;gap:18px;position:relative;z-index:1}
.hstat{border-left:3px solid var(--amber);padding-left:18px}
.hstat .n{font-family:'IBM Plex Mono',monospace;font-size:1.5rem;font-weight:600;color:var(--amber)}
.hstat .l{font-size:.85rem;color:rgba(246,244,236,.65)}
.host-panel .btn{margin-top:26px}

/* ---------- FOOTER ---------- */
footer{background:var(--night-0);color:rgba(246,244,236,.65);padding:56px 0 40px;font-size:.92rem}
footer .wrap{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:center}
footer .brand{font-size:1.1rem}
footer nav{display:flex;gap:22px;flex-wrap:wrap}
footer a{text-decoration:none}
footer a:hover{color:#fff}

/* ---------- RESPONSIVE ---------- */
@media (max-width:920px){
  .hero-inner{grid-template-columns:1fr;padding-top:120px}
  .scene{max-width:520px;margin:10px auto 0}
  .wifi-grid,.steps{grid-template-columns:1fr 1fr}
  .host-panel{grid-template-columns:1fr;padding:44px 34px}
  .nav-links a:not(.btn){display:none}
}
@media (max-width:600px){
  .wifi-grid,.steps{grid-template-columns:1fr}
  .gear-card{flex-basis:220px}
  body{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  html{scroll-behavior:auto}
}

/* ================= WORDPRESS INTEGRATION ================= */
/* The global reset above would otherwise flatten the admin bar. */
#wpadminbar,#wpadminbar *{box-sizing:content-box}
#wpadminbar{line-height:32px}
body.admin-bar .nav{top:32px}
@media (max-width:782px){
  body.admin-bar .nav{top:46px}
}

/* Featured listings pulled from the database */
.featured-live{background:var(--mist);padding:86px 0;border-top:1px solid var(--card-line)}
.featured-live .sec-head h2{color:var(--ink)}
.featured-live .badge{
  background:rgba(233,161,59,.14);color:var(--amber-deep);border-color:rgba(185,120,23,.4);
}
.live-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.live-card{
  background:#fff;border:1px solid var(--card-line);border-radius:var(--radius);
  overflow:hidden;text-decoration:none;display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease;
}
.live-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(30,42,36,.35)}
.live-card.is-featured{border-color:var(--amber-deep)}
.live-art{
  height:150px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(170deg,#16292A,#122220);position:relative;overflow:hidden;
}
.live-art img{width:100%;height:100%;object-fit:cover;display:block}
.live-flag{
  position:absolute;top:10px;left:10px;font-family:'IBM Plex Mono',monospace;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;background:var(--amber);color:#231603;
  border-radius:999px;padding:3px 9px;font-weight:600;
}
.live-body{padding:18px 20px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.live-cat{font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--moss)}
.live-body h3{font-size:1.05rem;font-weight:700;line-height:1.3;color:var(--ink)}
.live-loc{font-size:.86rem;color:var(--ink-soft)}
.live-meta{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:auto;padding-top:12px;flex-wrap:wrap}
.live-price{font-family:'IBM Plex Mono',monospace;font-size:.84rem;font-weight:600;color:var(--amber-deep)}
.live-dep{font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:var(--ink-soft)}

@media (max-width:920px){
  .live-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .live-grid{grid-template-columns:1fr}
}

/* ============ EMBEDDED WORDPRESS FORMS ============
   The landing templates dequeue Listeo's CSS, so the Listeo registration form
   and Contact Form 7 arrive unstyled. These rules give them the same look as
   the mockup's own .form-panel inputs. */

.wl-tagline{
  font-family:'IBM Plex Mono',monospace;
  color:var(--amber-deep);
  margin-bottom:8px;
  line-height:1.45;
}

.wl-account-form,
.wl-contact-form,
.wl-signup-cta{max-width:640px}

/* Owner signup CTA — signup itself lives on Listeo's /profile/ account page */
.wl-signup-cta h3{font-weight:800;margin-bottom:10px}
.wl-signup-cta > p{color:var(--ink-soft);margin-bottom:18px}
.wl-signup-steps{
  list-style:none;counter-reset:wlstep;margin:0 0 24px;padding:0;
}
.wl-signup-steps li{
  position:relative;padding-left:38px;margin-bottom:12px;
  color:var(--ink);
}
.wl-signup-steps li::before{
  counter-increment:wlstep;content:counter(wlstep);
  position:absolute;left:0;top:-1px;
  width:26px;height:26px;border-radius:50%;
  background:var(--conifer);color:#fff;
  font-family:'IBM Plex Mono',monospace;font-weight:600;
  display:flex;align-items:center;justify-content:center;
}
.wl-signup-actions{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}

@media (max-width:520px){
  .wl-signup-actions .btn{width:100%;text-align:center}
}

/* Role picker (Guest / Owner radios) */
.wl-account-form .account-type,
.wl-account-form .row.account-type{
  display:flex;gap:12px;flex-wrap:wrap;margin-bottom:22px;
}
.wl-account-form .account-type input[type="radio"]{position:absolute;opacity:0;pointer-events:none}
.wl-account-form .account-type label{
  flex:1 1 160px;
  display:flex;align-items:center;justify-content:center;gap:9px;
  border:1.5px solid var(--card-line);border-radius:12px;
  padding:14px 18px;cursor:pointer;background:#fff;
  font-weight:700;color:var(--ink-soft);
  transition:border-color .15s ease,color .15s ease,background .15s ease;
}
.wl-account-form .account-type label:hover{border-color:var(--moss);color:var(--ink)}
.wl-account-form .account-type input[type="radio"]:checked + label{
  border-color:var(--amber);
  background:rgba(233,161,59,.1);
  color:var(--amber-deep);
}
.wl-account-form .account-type input[type="radio"]:focus-visible + label{
  outline:3px solid var(--amber);outline-offset:2px;
}

/* Inputs shared by Listeo account forms and CF7 */
.wl-account-form input[type="text"],
.wl-account-form input[type="email"],
.wl-account-form input[type="password"],
.wl-account-form input[type="tel"],
.wl-account-form select,
.wl-account-form textarea,
.wl-contact-form input[type="text"],
.wl-contact-form input[type="email"],
.wl-contact-form input[type="tel"],
.wl-contact-form select,
.wl-contact-form textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--card-line);
  border-radius:10px;
  background:#fff;
  font-family:'Karla',system-ui,sans-serif;
  font-size:.95rem;
  color:var(--ink);
  margin-bottom:14px;
}
.wl-account-form input:focus,
.wl-account-form select:focus,
.wl-account-form textarea:focus,
.wl-contact-form input:focus,
.wl-contact-form select:focus,
.wl-contact-form textarea:focus{
  outline:none;
  border-color:var(--amber);
  box-shadow:0 0 0 3px rgba(233,161,59,.18);
}
.wl-account-form label,
.wl-contact-form label{
  display:block;
  font-family:'IBM Plex Mono',monospace;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);margin-bottom:6px;
}

/* Submit buttons */
.wl-account-form input[type="submit"],
.wl-account-form button[type="submit"],
.wl-contact-form input[type="submit"],
.wl-contact-form button[type="submit"]{
  background:var(--amber);
  color:#231603;
  border:none;border-radius:999px;
  padding:13px 28px;
  font-family:'Karla',system-ui,sans-serif;
  font-weight:700;font-size:.97rem;
  cursor:pointer;
  box-shadow:0 6px 18px -6px var(--amber-glow);
  transition:transform .15s ease,background .15s ease;
  width:auto;
}
.wl-account-form input[type="submit"]:hover,
.wl-contact-form input[type="submit"]:hover,
.wl-account-form button[type="submit"]:hover,
.wl-contact-form button[type="submit"]:hover{
  background:#F0AC49;transform:translateY(-1px);
}

/* Notices + validation */
.wl-account-form .notification,
.wl-contact-form .wpcf7-response-output{
  border-radius:12px;
  padding:14px 18px;
  margin:16px 0;
  border:1px solid var(--card-line);
  background:var(--mist);
}
.wl-contact-form .wpcf7-not-valid-tip{
  color:#B4442A;margin:-8px 0 12px;display:block;
}
.wl-contact-form .wpcf7-response-output.wpcf7-validation-errors{
  border-color:rgba(180,68,42,.4);background:rgba(180,68,42,.08);
}
.wl-contact-form .wpcf7-mail-sent-ok{
  border-color:rgba(47,90,65,.4);background:rgba(47,90,65,.08);color:var(--conifer);
}
.wl-form-notice{
  background:rgba(233,161,59,.1);
  border:1px solid rgba(233,161,59,.35);
  border-radius:12px;padding:16px 20px;color:var(--amber-deep);
}

/* Listeo sprinkles its own grid classes inside the form */
.wl-account-form .row{display:flex;gap:14px;flex-wrap:wrap}
.wl-account-form .row > [class*="col-"]{flex:1 1 220px;min-width:0}
.wl-account-form .chosen-container{width:100%!important}
.wl-account-form .checkboxes label,
.wl-account-form .terms-wrap label{
  text-transform:none;letter-spacing:0;font-family:'Karla',sans-serif;color:var(--ink-soft);
}

@media (max-width:600px){
  .wl-account-form .account-type label{flex-basis:100%}
}

/* ================= INNER PAGES ================= */
.page-hero{
  position:relative;overflow:hidden;color:var(--birch);
  background:linear-gradient(180deg,#0A1520 0%,#0E1E1E 55%,var(--night-1) 100%);
  padding:140px 0 60px;
}
.page-hero h1{font-size:clamp(2.1rem,4.4vw,3.3rem);font-weight:800;color:#FBFAF4;margin-bottom:14px}
.page-hero h1 em{font-style:normal;color:var(--amber)}
.page-hero .lede{font-size:1.08rem;color:rgba(246,244,236,.8);max-width:40em}
.page-hero .eyebrow{margin-bottom:16px}
.page-hero .hero-ctas{margin:26px 0 0}
.section{padding:76px 0}
.section-alt{background:var(--mist);border-top:1px solid var(--card-line);border-bottom:1px solid var(--card-line)}
.section h2{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:800;margin-bottom:10px}
.section .sub{color:var(--ink-soft);max-width:44em;margin-bottom:34px}
.crumbs{font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sage);margin-bottom:18px}
.crumbs a{color:inherit;text-decoration:none}
.crumbs a:hover{color:#fff}

/* filter chips */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:26px}
.chip{
  font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.05em;
  border:1px solid var(--card-line);background:#fff;color:var(--ink-soft);
  border-radius:999px;padding:8px 16px;text-decoration:none;transition:border-color .15s,color .15s;
}
.chip:hover{border-color:var(--moss);color:var(--ink)}
.chip.on{background:var(--conifer);border-color:var(--conifer);color:#fff}

/* browse layout */
.browse-layout{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:24px;align-items:start}
.map-panel{
  position:sticky;top:96px;min-height:560px;border-radius:var(--radius);overflow:hidden;
  background:linear-gradient(170deg,#16292A 0%,#122220 100%);border:1px solid #23423A;
}
.map-panel svg{position:absolute;inset:0;width:100%;height:100%}
.map-pin{position:absolute;transform:translate(-50%,-100%);text-align:center;text-decoration:none}
.map-pin .dot{
  display:inline-block;font-family:'IBM Plex Mono',monospace;font-size:.78rem;font-weight:600;
  background:var(--amber);color:#231603;border-radius:999px;padding:4px 10px;
  box-shadow:0 6px 16px -6px var(--amber-glow);white-space:nowrap;
}
.map-pin.alt .dot{background:var(--conifer);color:#fff;box-shadow:none}
.map-note{
  position:absolute;left:14px;bottom:12px;font-family:'IBM Plex Mono',monospace;
  font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:rgba(154,180,155,.75);
}
.listing-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.listing-card{
  background:#fff;border:1px solid var(--card-line);border-radius:var(--radius);
  overflow:hidden;text-decoration:none;display:flex;flex-direction:column;
  transition:transform .18s ease,box-shadow .18s ease;
}
.listing-card:hover{transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(30,42,36,.35)}
.listing-card.feature{border-color:var(--amber-deep)}
.lc-art{height:118px;display:flex;align-items:center;justify-content:center;background:var(--mist);position:relative}
.lc-art.dark{background:linear-gradient(170deg,#16292A,#122220)}
.lc-flag{
  position:absolute;top:10px;left:10px;font-family:'IBM Plex Mono',monospace;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;background:var(--amber);color:#231603;
  border-radius:999px;padding:3px 9px;font-weight:600;
}
.lc-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:6px;flex:1}
.lc-cat{font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--sage)}
.lc-body h3{font-size:1.02rem;font-weight:700;line-height:1.3}
.lc-loc{font-size:.85rem;color:var(--ink-soft)}
.lc-meta{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:10px}
.lc-price{font-family:'IBM Plex Mono',monospace;font-size:.85rem;font-weight:600;color:var(--amber-deep)}
.lc-rate{font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:var(--ink-soft)}
.lc-rate b{color:var(--amber-deep)}

/* single listing */
.listing-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:32px;align-items:start}
.gallery{border-radius:var(--radius);overflow:hidden;border:1px solid #23423A;background:linear-gradient(170deg,#16292A,#122220)}
.gallery svg{display:block;width:100%;height:auto}
.thumb-row{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:10px}
.thumb{height:70px;border-radius:10px;background:var(--mist);border:1px solid var(--card-line);display:flex;align-items:center;justify-content:center}
.listing-body h2{font-size:1.45rem;margin:38px 0 14px}
.listing-body p{margin-bottom:14px;color:var(--ink)}
.check-list{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 24px;margin:6px 0 8px}
.check-list li{padding-left:26px;position:relative;font-size:.95rem}
.check-list li::before{content:"✓";position:absolute;left:0;color:var(--moss);font-weight:700}
.spec-table{width:100%;border-collapse:collapse;font-size:.94rem}
.spec-table th,.spec-table td{text-align:left;padding:11px 14px;border-bottom:1px solid var(--card-line)}
.spec-table th{
  font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-soft);font-weight:600;width:38%;
}
.amenities{display:flex;gap:10px;flex-wrap:wrap}
.amenity{
  font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.06em;
  border:1px solid var(--card-line);border-radius:999px;padding:7px 14px;color:var(--ink-soft);background:#fff;
}
.host-card{display:flex;gap:16px;align-items:center;background:#fff;border:1px solid var(--card-line);border-radius:var(--radius);padding:20px 22px}
.avatar{
  width:54px;height:54px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--conifer);color:#fff;font-family:'Bricolage Grotesque';font-weight:800;font-size:1.3rem;
}
.host-card .meta{font-size:.85rem;color:var(--ink-soft)}
.review{background:#fff;border:1px solid var(--card-line);border-radius:var(--radius);padding:20px 22px;margin-bottom:14px}
.review .who{display:flex;justify-content:space-between;font-size:.85rem;margin-bottom:8px}
.review .who b{font-size:.95rem}
.stars{color:var(--amber-deep);font-size:.85rem;letter-spacing:.1em}

/* booking box */
.book-box{
  position:sticky;top:96px;background:#fff;border:1px solid var(--card-line);
  border-radius:var(--radius);padding:26px;box-shadow:0 24px 50px -34px rgba(30,42,36,.4);
}
.book-box .price-line{display:flex;align-items:baseline;gap:8px;margin-bottom:4px}
.book-box .price-line .big{font-family:'IBM Plex Mono',monospace;font-size:1.6rem;font-weight:600;color:var(--ink)}
.book-box .price-line small{color:var(--ink-soft)}
.rate-ladder{display:flex;gap:8px;margin:14px 0 18px}
.rate-ladder span{
  flex:1;text-align:center;border:1px solid var(--card-line);border-radius:10px;padding:9px 4px;
  font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:var(--ink-soft);
}
.rate-ladder span b{display:block;font-size:.9rem;color:var(--ink)}
.field{margin-bottom:14px}
.field label{
  display:block;font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-soft);margin-bottom:6px;
}
.input,select.input,textarea.input{
  width:100%;padding:12px 14px;border:1px solid var(--card-line);border-radius:10px;
  background:#fff;font-family:'Karla',system-ui,sans-serif;font-size:.95rem;color:var(--ink);
}
.input:focus{outline:3px solid var(--amber);outline-offset:1px}
.date-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.addon{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed var(--card-line);font-size:.9rem}
.addon input{accent-color:var(--conifer);width:16px;height:16px;flex:none}
.addon .p{margin-left:auto;font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:var(--amber-deep);white-space:nowrap}
.book-box .btn{width:100%;text-align:center;margin-top:18px}
.book-note{font-size:.8rem;color:var(--ink-soft);text-align:center;margin-top:12px}
.deposit-tag{
  font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--sage);display:block;margin-top:8px;text-align:center;
}

/* generic content blocks */
.callout{background:rgba(233,161,59,.09);border:1px solid rgba(233,161,59,.35);border-radius:12px;padding:20px 24px;margin:26px 0}
.callout b{color:var(--amber-deep)}
.table{width:100%;border-collapse:collapse;font-size:.95rem;background:#fff;border:1px solid var(--card-line);border-radius:var(--radius);overflow:hidden}
.table th,.table td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--card-line)}
.table thead th{
  font-family:'IBM Plex Mono',monospace;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink-soft);background:var(--mist);
}
.table tr:last-child td{border-bottom:none}
details.faq{background:#fff;border:1px solid var(--card-line);border-radius:12px;padding:18px 22px;margin-bottom:12px}
details.faq summary{font-weight:700;cursor:pointer;font-family:'Bricolage Grotesque',sans-serif;font-size:1.04rem}
details.faq[open] summary{margin-bottom:10px}
details.faq p{color:var(--ink-soft);font-size:.95rem}
.steps.five{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.resource-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.resource{
  background:#fff;border:1px solid var(--card-line);border-radius:var(--radius);
  padding:20px;text-decoration:none;font-size:.9rem;color:var(--ink-soft);
  transition:transform .18s ease,box-shadow .18s ease;
}
.resource:hover{transform:translateY(-3px);box-shadow:0 14px 30px -20px rgba(30,42,36,.35)}
.resource b{display:block;color:var(--ink);font-family:'Bricolage Grotesque';font-size:1rem;margin-bottom:6px}
.resource .mono{color:var(--amber-deep);display:block;margin-top:10px;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase}
.trust-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.form-panel{background:#fff;border:1px solid var(--card-line);border-radius:var(--radius);padding:34px;max-width:640px}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.earn-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}

@media (max-width:920px){
  .browse-layout,.listing-layout{grid-template-columns:1fr}
  .map-panel{position:relative;top:0;min-height:340px}
  .book-box{position:relative;top:0}
  .resource-grid{grid-template-columns:1fr 1fr}
  .trust-grid,.earn-cards{grid-template-columns:1fr 1fr}
}
@media (max-width:600px){
  .listing-grid{grid-template-columns:1fr}
  .check-list,.form-row,.resource-grid,.trust-grid,.earn-cards{grid-template-columns:1fr}
  .page-hero{padding:120px 0 48px}
}

/* ================================================================
   LIST YOUR GEAR page
   ================================================================ */

/* Solid nav variant for pages without a dark hero */
.nav-solid{position:sticky;top:0;background:var(--night-0);padding:16px 0;box-shadow:0 1px 0 rgba(255,255,255,.06)}

.page-head{background:var(--night-0);color:var(--birch);padding:46px 0 38px}
.page-head h1{font-size:clamp(1.7rem,3vw,2.4rem);font-weight:800;color:#FBFAF4}
.page-head p.lede2{margin-top:14px;color:rgba(246,244,236,.8);max-width:40em;font-size:1.05rem}
.page-head .hero-ctas{margin-top:26px}

.types{padding:86px 0 30px}
.types-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.type-card{
  background:#fff;border:1px solid var(--card-line);border-radius:var(--radius);
  padding:30px 28px 32px;display:flex;flex-direction:column;gap:12px;
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.type-card:hover{transform:translateY(-4px);box-shadow:0 18px 40px -24px rgba(30,42,36,.35)}
.type-card.feature{border-color:var(--amber-deep);box-shadow:0 20px 50px -34px var(--amber-glow)}
.type-card .num{font-family:'IBM Plex Mono',monospace;font-size:.74rem;font-weight:600;letter-spacing:.12em;color:var(--amber-deep)}
.type-card .ticon{height:44px;display:flex;align-items:center}
.type-card h3{font-size:1.3rem;font-weight:700}
.type-card .kicker{font-family:'IBM Plex Mono',monospace;font-size:.78rem;color:var(--conifer);line-height:1.55}
.type-card p.desc{font-size:.96rem;color:var(--ink-soft)}

.note-callout{
  margin-top:26px;background:rgba(233,161,59,.1);border:1px solid rgba(185,120,23,.35);
  border-left:4px solid var(--amber);border-radius:10px;padding:18px 22px;font-size:.95rem;color:var(--ink);
}
.note-callout b{color:var(--amber-deep)}

.earn{background:var(--mist);border-top:1px solid var(--card-line);border-bottom:1px solid var(--card-line);padding:86px 0;margin-top:66px}
.earn-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:start}
.etable{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--card-line);border-radius:var(--radius);overflow:hidden}
.etable caption{caption-side:bottom;text-align:left;font-size:.8rem;color:var(--ink-soft);padding-top:10px}
.etable th{
  font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  text-align:left;color:var(--ink-soft);background:var(--birch);padding:14px 20px;border-bottom:1px solid var(--card-line);
}
.etable td{padding:15px 20px;border-bottom:1px solid var(--card-line);font-size:.98rem}
.etable tr:last-child td{border-bottom:none}
.etable td.v{font-family:'IBM Plex Mono',monospace;font-weight:600;color:var(--amber-deep)}
.estats{display:flex;flex-direction:column;gap:22px}
.estat{border-left:3px solid var(--amber);padding-left:18px}
.estat .n{font-family:'IBM Plex Mono',monospace;font-size:1.35rem;font-weight:600;color:var(--amber-deep);display:block;margin-bottom:3px}
.estat .l{font-size:.95rem;color:var(--ink-soft)}
.estat .l b{color:var(--ink)}

.start{padding:70px 0 10px}
.start-panel{
  background:#fff;border:1px solid var(--card-line);
  border-radius:22px;color:var(--ink);padding:60px 56px;
  max-width:1000px;margin:0 auto;
  display:grid;grid-template-columns:1.1fr .9fr;gap:46px;align-items:center;
  position:relative;overflow:hidden;
  box-shadow:0 30px 70px -45px rgba(30,42,36,.45);
}
.start-panel::after{
  content:"";position:absolute;right:-70px;bottom:-70px;width:340px;height:340px;border-radius:50%;
  background:radial-gradient(circle,rgba(233,161,59,.12),transparent 65%);
}
.start-panel h2{font-size:clamp(1.7rem,3vw,2.4rem);color:var(--ink);margin-bottom:12px}
.start-panel p{color:var(--ink-soft);max-width:36em}
.start-panel p b{color:var(--ink)}
.start-panel .hero-ctas{margin-top:28px}
.start-panel .btn-ghost{border:1.5px solid var(--conifer);color:var(--conifer)}
.start-panel .btn-ghost:hover{background:var(--mist);border-color:var(--conifer)}
.start-panel .fine{font-size:.82rem;color:var(--ink-soft);margin-top:16px;max-width:34em}
.start-panel .fine a{color:var(--amber-deep)}
.osteps{display:flex;flex-direction:column;gap:0;position:relative;z-index:1}
.ostep{display:flex;gap:16px;padding:16px 0;border-bottom:1px solid var(--card-line);align-items:baseline}
.ostep:last-child{border-bottom:none}
.ostep .n{
  font-family:'IBM Plex Mono',monospace;font-size:.78rem;font-weight:600;color:var(--amber-deep);
  border:1.5px solid rgba(185,120,23,.5);border-radius:999px;width:30px;height:30px;flex:none;
  display:flex;align-items:center;justify-content:center;transform:translateY(4px);
}
.ostep div b{display:block;color:var(--ink);font-size:1.02rem}
.ostep div span{font-size:.9rem;color:var(--ink-soft)}

@media (max-width:920px){
  .types-grid{grid-template-columns:1fr}
  .earn-grid{grid-template-columns:1fr}
  .start-panel{grid-template-columns:1fr;padding:44px 32px}
}