/* assets/css/app.css — all site styles (moved out of index.html). */
/* The hidden attribute always wins over display rules set elsewhere. */
[hidden]{display:none !important;}
.demo-banner{background:#FFF4D6;color:#5A4300;border-bottom:1px solid #EBD9A6;font-size:12.5px;line-height:1.4;text-align:center;padding:6px max(16px, env(safe-area-inset-right, 0px)) 6px max(16px, env(safe-area-inset-left, 0px));}
.demo-data-note{font-size:12px;color:var(--ink-soft);margin:6px 0 0;}
:root{
  --bg:#F1F3F0;
  --surface:#FFFFFF;
  --ink:#142B2E;
  --ink-soft:#496163;
  --sea:#1B5E63;
  --sea-deep:#0E3A3F;
  --sea-pale:#E4EEEC;
  --citrus:#E08F2A;
  --citrus-deep:#B96F18;
  --coral:#D9624B;
  --line:#DDE3DD;
  --line-soft:#E9ECE6;
  --radius:14px;
  --shadow:0 1px 2px rgba(14,58,63,.06), 0 8px 24px -12px rgba(14,58,63,.18);
  --font-display:'Geologica',system-ui,sans-serif;
  --font-body:'Geologica',system-ui,sans-serif;
  --font-mono:'Geologica',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
/* Safety net found via mobile viewport testing: the topbar's own content
   (logo + nav + language toggle + CTA button) can overflow its container
   on narrow screens (see the .wrap/.topbar mobile fix below for the
   actual root-cause fix) — without this, that overflow drags the ENTIRE
   PAGE into horizontal scroll, a much worse symptom than one element
   being tight for space. This doesn't replace fixing the real cause,
   it just stops a single overflowing element from breaking the whole
   page if something is ever missed. */
html,body{overflow-x:hidden;max-width:100vw;}
body{
  font-family:var(--font-body);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
img{max-width:100%;display:block;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--citrus);color:#fff;}

/* ---------- layout helpers ---------- */
.wrap{max-width:1240px;margin:0 auto;padding:0 28px;}
.wrap-admin{max-width:1600px;margin:0 auto;padding:0 28px;} /* admin is a data-dense tool, not a marketing page — give it real screen space on wide monitors */
.wrap-wide{max-width:1600px;margin:0 auto;padding:0 28px;} /* listings page — same reasoning: browsing many properties benefits from more columns on a wide monitor, rather than a fixed 3 regardless of screen size */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);}
:focus-visible{outline:2px solid var(--citrus);outline-offset:2px;}

/* ---------- top bar ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  background:rgba(241,243,240,.92);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  /* Only matters inside a native edge-to-edge WebView (no browser chrome
     eating this space already) — env() safely resolves to 0 in a normal
     browser tab, so this is harmless there. Requires viewport-fit=cover
     on the meta viewport tag above, or these env() values stay 0 even on
     a notched device. */
  padding-top:env(safe-area-inset-top);
}
.topbar .wrap{display:flex;align-items:center;gap:28px;height:68px;}
.logo{font-family:var(--font-display);font-weight:700;font-size:22px;letter-spacing:-.02em;color:var(--sea-deep);display:flex;align-items:center;gap:8px;}
.logo .dot{width:8px;height:8px;border-radius:50%;background:var(--citrus);}
.nav{
  display:flex;gap:4px;flex:1;min-width:0; /* min-width:0 is required for a flex child to actually shrink/scroll instead of forcing the row wider than the viewport */
  overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.nav::-webkit-scrollbar{display:none;}
.nav button{
  background:none;border:none;padding:10px 14px;border-radius:999px;flex:none;white-space:nowrap;
  font-size:14.5px;font-weight:600;color:var(--ink-soft);transition:.15s;
}
.nav button:hover{background:var(--sea-pale);color:var(--sea-deep);}
.nav button.active{background:var(--sea-deep);color:#fff;}
.top-actions{display:flex;align-items:center;gap:10px;flex:none;} /* never shrinks — lang toggle/favourites/CTA always stay fully visible; the nav scrolls instead */
.nav-more{position:relative;flex:none;}
.nav-more-toggle{display:flex;align-items:center;gap:5px;}
.nav-more-toggle svg{transition:transform .15s ease;flex:none;}
.nav-more-toggle.open svg{transform:rotate(180deg);}
.nav-more-panel{
  position:fixed;min-width:190px; /* fixed (not absolute) deliberately — .nav scrolls horizontally, which clips absolutely-positioned descendants; fixed escapes that entirely. Exact position is set in JS when opened. */
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 14px 34px rgba(14,58,63,.16);padding:7px;display:flex;flex-direction:column;gap:1px;
  opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .15s ease, transform .15s ease;z-index:200;
}
.nav-more-panel.open{opacity:1;pointer-events:auto;transform:translateY(0);}
.nav-more-panel button{width:100%;text-align:left;border-radius:9px;} /* overrides the pill-shaped, centered .nav button default for a proper vertical menu list */
.lang-toggle{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;margin-right:4px;}
.lang-toggle button{background:var(--surface);border:none;padding:6px 11px;font-size:11.5px;font-weight:700;color:var(--ink-soft);cursor:pointer;font-family:var(--font-mono);}
.lang-toggle button.active{background:var(--sea-deep);color:#fff;}
.icon-btn{
  position:relative;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);
  background:var(--surface);display:flex;align-items:center;justify-content:center;color:var(--sea-deep);
  transition:.15s;
}
.icon-btn:hover{border-color:var(--sea);background:var(--sea-pale);}
.icon-btn svg{width:18px;height:18px;}
.badge-count{
  position:absolute;top:-4px;right:-4px;background:var(--coral);color:#fff;font-size:10px;font-weight:700;
  min-width:16px;height:16px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:0 4px;
  font-family:var(--font-mono);
}
.btn{
  font-weight:600;font-size:14px;border-radius:999px;padding:10px 18px;border:1px solid transparent;transition:.15s;
}
.btn-primary{background:var(--sea-deep);color:#fff;}
.btn-primary:hover{background:var(--sea);}
.btn-citrus{background:var(--citrus);color:#fff;}
.btn-citrus:hover{background:var(--citrus-deep);}
.btn-ghost{background:transparent;border-color:var(--line);color:var(--ink);}
.btn-ghost:hover{border-color:var(--sea);color:var(--sea-deep);}
.btn-sm{padding:7px 13px;font-size:12.5px;}
.btn:disabled{opacity:.45;cursor:not-allowed;}

/* ---------- hero ---------- */
.hero{
  background:radial-gradient(120% 160% at 15% -10%, #154348 0%, var(--sea-deep) 45%, #0A2A2E 100%);
  color:#fff;padding:56px 0 0;position:relative;overflow:hidden;
}
.hero::before{
  content:'';position:absolute;top:-120px;right:-80px;width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle, rgba(224,143,42,.16) 0%, transparent 70%);pointer-events:none;
  animation:heroBlobDrift 18s ease-in-out infinite;
}
@keyframes heroBlobDrift{ 0%,100%{transform:translate(0,0);} 50%{transform:translate(-30px,40px);} }
.hero-bg-photos{position:absolute;inset:0;overflow:hidden;z-index:0;}
.hero-bg-photos::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg, rgba(14,58,63,.8), rgba(9,38,42,.88));}
.hero-bg-photos img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transition:opacity 1.8s ease;filter:saturate(0.7) brightness(.55);
}
.hero-bg-photos img.active{opacity:1;}
#heroCyclingWord{display:inline-block;position:relative;transition:opacity .25s ease, transform .25s ease;}
#heroCyclingWord.swap{opacity:0;transform:translateY(6px);}
.reveal-on-scroll{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.2,.7,.3,1), transform .6s cubic-bezier(.2,.7,.3,1);}
.reveal-on-scroll.revealed{opacity:1;transform:translateY(0);}
.reveal-stagger.revealed > *{animation:fadeInUp .5s cubic-bezier(.2,.7,.3,1) both;}
.reveal-stagger.revealed > *:nth-child(1){animation-delay:.02s;} .reveal-stagger.revealed > *:nth-child(2){animation-delay:.06s;}
.reveal-stagger.revealed > *:nth-child(3){animation-delay:.1s;} .reveal-stagger.revealed > *:nth-child(4){animation-delay:.14s;}
.reveal-stagger.revealed > *:nth-child(5){animation-delay:.18s;} .reveal-stagger.revealed > *:nth-child(6){animation-delay:.22s;}
.reveal-stagger.revealed > *:nth-child(n+7){animation-delay:.26s;}
.hero::after{
  content:'';position:absolute;inset:0;
  background-image:radial-gradient(circle at 1px 1px, rgba(255,255,255,.07) 1px, transparent 0);
  background-size:22px 22px;pointer-events:none;
}
.hero .wrap{position:relative;z-index:1;}
.hero-eyebrow{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:12px;
  letter-spacing:.06em;text-transform:uppercase;color:#9FCAC9;background:rgba(255,255,255,.08);
  padding:6px 12px;border-radius:999px;margin-bottom:18px;
}
.hero h1{
  font-family:var(--font-display);font-weight:700;font-size:clamp(32px,5vw,52px);line-height:1.05;
  letter-spacing:-.02em;max-width:680px;margin-bottom:14px;
}
.hero h1 em{color:var(--citrus);font-style:normal;}
.hero p.sub{color:#C7DCDA;font-size:16.5px;max-width:560px;margin-bottom:32px;}

/* search card */
.search-card{
  background:var(--surface);border-radius:18px;padding:18px;box-shadow:0 24px 60px -20px rgba(0,0,0,.45);
  margin-bottom:0;
}
.search-toggle{display:flex;gap:6px;margin-bottom:14px;}
.search-toggle button{
  flex:0 0 auto;padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--bg);
  font-size:13.5px;font-weight:600;color:var(--ink-soft);
}
.search-toggle button.active{background:var(--sea-deep);color:#fff;border-color:var(--sea-deep);}
.search-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr .9fr auto;gap:10px;}
.field{display:flex;flex-direction:column;gap:4px;}
.field label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.05em;color:var(--ink-soft);}
.field input,.field select{
  border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-size:14.5px;color:var(--ink);background:var(--surface);
}
.field input:focus,.field select:focus{border-color:var(--sea);}
#xmlInput,#admin_xmlInput{
  width:100%;min-height:160px;border:1px solid var(--line);border-radius:10px;padding:12px;
  font-size:12.5px;font-family:var(--font-mono);color:var(--ink);background:var(--surface);
  resize:vertical;margin-top:10px;
}
#xmlInput:focus,#admin_xmlInput:focus{border-color:var(--sea);outline:none;}
.search-grid .btn{align-self:end;padding:12px 22px;white-space:nowrap;}

.district-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:34px;}
.trust-row{display:flex;gap:36px;flex-wrap:wrap;padding:22px 0 30px;border-top:1px solid rgba(255,255,255,.12);margin-top:8px;}

/* ---------- home page blocks ---------- */
.home-section{padding:56px 0;}
.home-section-title{font-family:var(--font-display);font-size:26px;margin-bottom:28px;}
.why-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.why-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;}
.why-icon{width:40px;height:40px;border-radius:10px;background:var(--sea-pale);color:var(--sea-deep);display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;margin-bottom:14px;}
.why-card h3{font-family:var(--font-display);font-size:16px;margin-bottom:8px;}
.why-card p{font-size:13.5px;color:var(--ink-soft);line-height:1.5;}
.district-explore-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;}
.district-explore-card{
  position:relative;aspect-ratio:3/4;border-radius:var(--radius);overflow:hidden;cursor:pointer;
  display:flex;align-items:flex-end;color:#fff;transition:transform .25s cubic-bezier(.2,.7,.3,1);
}
.district-explore-card:hover{transform:translateY(-4px);}
.district-explore-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.6);transition:transform .5s ease;}
.district-explore-card:hover img{transform:scale(1.08);}
.district-explore-card::after{content:'';position:absolute;inset:0;background:linear-gradient(to top, rgba(9,38,42,.85), transparent 60%);}
.district-explore-info{position:relative;z-index:1;padding:16px;}
.district-explore-info .name{font-family:var(--font-display);font-size:17px;font-weight:700;}
.district-explore-info .count{font-size:12px;opacity:.85;margin-top:2px;}
.how-grid{display:grid;grid-template-columns:1fr 1fr;gap:32px;}
.how-col{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;}
.how-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.how-step{text-align:center;padding:8px;}
.how-step-num{
  width:44px;height:44px;border-radius:50%;background:var(--sea-deep);color:#fff;font-family:var(--font-display);
  font-weight:700;font-size:18px;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;
}
.how-step h3{font-family:var(--font-display);font-size:16px;margin-bottom:8px;}
.how-step p{font-size:13.5px;color:var(--ink-soft);line-height:1.5;}
@media(max-width:900px){ .how-steps{grid-template-columns:1fr;} }
.how-col h3{font-family:var(--font-display);font-size:18px;margin-bottom:16px;}
.how-col ol{padding-left:20px;}
.how-col li{font-size:13.5px;color:var(--ink-soft);margin-bottom:10px;line-height:1.5;}
.home-cta{
  background:linear-gradient(135deg,var(--sea-deep),var(--sea));color:#fff;border-radius:var(--radius);
  padding:32px;margin:56px 0;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.home-cta h3{font-family:var(--font-display);font-size:19px;margin-bottom:6px;}
.home-cta p{font-size:13.5px;opacity:.85;}
@media(max-width:980px){ .why-grid{grid-template-columns:repeat(2,1fr);} .district-explore-grid{grid-template-columns:repeat(3,1fr);} .how-grid{grid-template-columns:1fr;} }
@media(max-width:640px){ .why-grid{grid-template-columns:1fr;} .district-explore-grid{grid-template-columns:repeat(2,1fr);} .home-cta{flex-direction:column;align-items:flex-start;} }

/* ── Home: browse by type ── */
.type-explore-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;}
.type-explore-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:18px 14px;text-align:center;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease,border-color .2s;}
.type-explore-card:hover{transform:translateY(-3px);border-color:var(--sea);box-shadow:0 10px 22px -12px rgba(14,58,63,.3);}
.type-explore-card svg{width:30px;height:30px;margin:0 auto 8px;color:var(--sea-deep);}
.type-explore-card .name{font-size:13.5px;font-weight:600;}
.type-explore-card .count{font-size:11.5px;color:var(--ink-soft);margin-top:2px;}
@media(max-width:980px){ .type-explore-grid{grid-template-columns:repeat(3,1fr);} }
@media(max-width:640px){ .type-explore-grid{grid-template-columns:repeat(2,1fr);} }

/* ── Home: horizontal card strips ── */
.home-strip-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:20px;}
.home-viewall{color:var(--sea-deep);font-weight:600;}
.h-scroll{display:grid;grid-auto-flow:column;grid-auto-columns:290px;gap:14px;overflow-x:auto;padding:4px 4px 12px;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;}
.h-scroll .card{scroll-snap-align:start;grid-column:auto !important;}
.h-scroll::-webkit-scrollbar{height:8px;}
.h-scroll::-webkit-scrollbar-thumb{background:var(--line);border-radius:99px;}
@media(max-width:640px){ .h-scroll{grid-auto-columns:240px;} }

/* ── Home: news & guides teasers ── */
.home-content-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px;}
.home-content-h{font-size:15px;font-weight:700;margin-bottom:12px;}
.home-teaser{display:block;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px;cursor:pointer;transition:border-color .2s,transform .2s;}
.home-teaser:hover{border-color:var(--sea);transform:translateY(-2px);}
.home-teaser .date{font-size:11px;color:var(--ink-soft);font-family:var(--font-mono);margin-bottom:4px;}
.home-teaser .h{font-size:14px;font-weight:600;line-height:1.35;}
@media(max-width:900px){ .home-content-cols{grid-template-columns:1fr;} }

/* ── Home: calculator teaser ── */
.calc-teaser{display:flex;align-items:center;justify-content:space-between;gap:24px;background:linear-gradient(120deg,var(--sea-deep),var(--sea));color:#fff;border-radius:16px;padding:26px 30px;}
.calc-teaser h3{font-family:var(--font-display);font-size:20px;margin-bottom:6px;}
.calc-teaser p{font-size:13.5px;opacity:.9;max-width:560px;}
@media(max-width:700px){ .calc-teaser{flex-direction:column;align-items:flex-start;} }

/* ── Home: agency chip strip ── */
.agency-chip-strip{display:flex;flex-wrap:wrap;gap:10px;}
.agency-chip{display:flex;align-items:center;gap:9px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 16px 7px 7px;font-size:13px;font-weight:600;cursor:pointer;transition:border-color .2s,transform .2s;}
.agency-chip:hover{border-color:var(--sea);transform:translateY(-2px);}
.agency-chip .a-logo{width:30px;height:30px;border-radius:50%;background:var(--sea-deep);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;}
.agency-chip .a-count{font-size:11px;color:var(--ink-soft);font-weight:500;}

/* ── Home: dual CTA band ── */
.dual-cta{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.dual-cta-panel{border-radius:16px;padding:30px 32px;background:var(--surface);border:1px solid var(--line);}
.dual-cta-panel h3{font-family:var(--font-display);font-size:20px;margin-bottom:8px;}
.dual-cta-panel p{font-size:13.5px;color:var(--ink-soft);margin-bottom:18px;line-height:1.55;}
.dual-cta-agency{background:linear-gradient(135deg,var(--sea-deep),#0E3A3F);border:none;color:#fff;}
.dual-cta-agency p{color:rgba(255,255,255,.82);}
.dual-cta-ghost{border-color:rgba(255,255,255,.5);color:#fff;}
.dual-cta-ghost:hover{background:rgba(255,255,255,.12);}
@media(max-width:800px){ .dual-cta{grid-template-columns:1fr;} }

/* ── For-business landing funnel ── */
.biz-sticky{position:sticky;top:68px;z-index:39;background:var(--sea-deep);color:#fff;display:flex;align-items:center;justify-content:center;gap:16px;padding:9px 16px;font-size:13px;box-shadow:0 6px 18px -8px rgba(10,28,30,.5);}
.biz-sticky-label{opacity:.92;}
@media(max-width:640px){ .biz-sticky-label{font-size:11.5px;} }
.biz-faq summary::-webkit-details-marker{display:none;}
/* Support page */
.support-channels{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:28px;}
.support-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px 24px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px;}
.support-icon{width:46px;height:46px;border-radius:50%;background:var(--sea-deep);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;}
.support-card h3{font-family:var(--font-display);font-size:17px;}
.support-card p{font-size:13px;color:var(--ink-soft);line-height:1.55;flex:1;}
.support-form-card{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:26px 28px;max-width:720px;}
.support-form-card h3{font-family:var(--font-display);font-size:17px;margin-bottom:16px;}
@media(max-width:800px){ .support-channels{grid-template-columns:1fr;} }
.chat-panel{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:20px 22px;max-width:720px;margin-bottom:28px;}
.chat-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px;}
.chat-status{font-size:11.5px;color:var(--ink-soft);margin-top:2px;}
.chat-messages{max-height:380px;min-height:140px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:6px 2px;margin-bottom:10px;}
.chat-msg{max-width:78%;padding:9px 13px;border-radius:14px;font-size:13.5px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word;}
.chat-msg.visitor{align-self:flex-end;background:var(--sea-deep);color:#fff;border-bottom-right-radius:4px;}
.chat-msg.agent{align-self:flex-start;background:var(--bg);border:1px solid var(--line);border-bottom-left-radius:4px;}
.chat-msg .m-meta{display:block;font-size:10px;opacity:.65;margin-top:4px;font-family:var(--font-mono);}
.chat-inputrow{display:flex;gap:8px;align-items:flex-end;}
.chat-inputrow textarea{flex:1;border:1px solid var(--line);border-radius:10px;padding:9px 12px;font-size:13.5px;resize:vertical;min-height:40px;max-height:120px;font-family:var(--font-body);}
.chat-closed-note{font-size:12px;color:var(--citrus-deep);font-weight:600;margin-bottom:8px;}
/* Agent console */
.chatadmin-layout{display:grid;grid-template-columns:320px 1fr;gap:16px;align-items:start;}
.chatadmin-list{max-height:560px;overflow-y:auto;display:flex;flex-direction:column;gap:8px;}
.chatadmin-item{border:1px solid var(--line);border-radius:12px;padding:11px 13px;cursor:pointer;background:var(--surface);}
.chatadmin-item:hover{border-color:var(--sea);}
.chatadmin-item.active{border-color:var(--sea-deep);box-shadow:0 0 0 2px rgba(27,94,99,.12);}
.chatadmin-item .n{font-weight:700;font-size:13px;display:flex;align-items:center;gap:7px;}
.chatadmin-item .p{font-size:11.5px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:3px;}
.chat-unread-dot{background:var(--coral);color:#fff;border-radius:999px;font-size:10px;font-weight:800;padding:1px 7px;}
@media(max-width:860px){ .chatadmin-layout{grid-template-columns:1fr;} }
.biz-hero{background:linear-gradient(140deg,#0A1C1E,var(--sea-deep) 55%,#134C52);color:#fff;padding:64px 0 52px;}
.biz-hero h1{font-family:var(--font-display);font-size:clamp(28px,4.4vw,44px);line-height:1.12;letter-spacing:-.02em;max-width:720px;margin-bottom:14px;}
.biz-hero .sub{color:#C7DCDA;font-size:16px;max-width:620px;margin-bottom:28px;line-height:1.6;}
.biz-hero-ctas{display:flex;gap:12px;flex-wrap:wrap;}
.biz-ghost{border-color:rgba(255,255,255,.5);color:#fff;}
.biz-ghost:hover{background:rgba(255,255,255,.12);}
.biz-pain-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;}
.biz-pain,.biz-solution{border-radius:16px;padding:26px 28px;}
.biz-pain{background:var(--surface);border:1px solid var(--line);}
.biz-solution{background:linear-gradient(135deg,var(--sea-deep),#0E3A3F);color:#fff;}
.biz-pain h3,.biz-solution h3{font-family:var(--font-display);font-size:18px;margin-bottom:14px;}
.biz-pain ul,.biz-solution ul{list-style:none;display:flex;flex-direction:column;gap:11px;font-size:13.5px;line-height:1.5;}
.biz-pain li::before{content:'✕ ';color:var(--coral);font-weight:700;}
.biz-solution li::before{content:'✓ ';color:var(--citrus);font-weight:700;}
.biz-solution li{color:rgba(255,255,255,.88);}
@media(max-width:800px){ .biz-pain-grid{grid-template-columns:1fr;} }
.biz-report-sample{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--citrus);border-radius:14px;padding:24px 28px;max-width:760px;}
.biz-report-tag{font-family:var(--font-mono);font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--citrus-deep);margin-bottom:10px;}
.biz-report-line{font-size:16.5px;line-height:1.65;margin-bottom:12px;}
.biz-report-line b{color:var(--sea-deep);}
.biz-inline-cta{margin-top:26px;}
.biz-plans{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;align-items:stretch;}
@media(max-width:1100px){ .biz-plans{grid-template-columns:repeat(2,1fr);} }
.biz-plan{background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:24px 20px 20px;display:flex;flex-direction:column;position:relative;}
.biz-plan.recommended{border:2px solid var(--citrus);box-shadow:0 16px 36px -14px rgba(185,111,24,.35);}
.biz-plan-flag{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--citrus-deep);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.05em;padding:4px 12px;border-radius:999px;white-space:nowrap;}
.biz-plan .p-name{font-weight:700;font-size:15px;margin-bottom:6px;}
.biz-plan .p-price{font-family:var(--font-mono);font-size:30px;font-weight:600;color:var(--sea-deep);}
.biz-plan .p-price span{font-size:13px;color:var(--ink-soft);font-weight:500;}
.biz-plan ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:13px;margin:18px 0 22px;flex:1;}
.biz-plan li.off{color:var(--ink-soft);opacity:.55;}
.biz-plan li::before{content:'✓ ';color:var(--sea);font-weight:700;}
.biz-plan li.off::before{content:'— ';}
@media(max-width:640px){ .biz-plans{grid-template-columns:1fr;} }
.biz-faq{max-width:760px;}
.biz-faq details{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:0 20px;margin-bottom:10px;}
.biz-faq summary{cursor:pointer;font-weight:600;font-size:14px;padding:16px 0;list-style:none;position:relative;padding-right:28px;}
.biz-faq summary::after{content:'+';position:absolute;right:2px;top:50%;transform:translateY(-50%);font-size:19px;color:var(--sea-deep);}
.biz-faq details[open] summary::after{content:'–';}
.biz-faq details p{font-size:13.5px;color:var(--ink-soft);line-height:1.6;padding-bottom:16px;}
.biz-final-cta{background:linear-gradient(120deg,var(--sea-deep),var(--sea));color:#fff;border-radius:18px;padding:44px 32px;text-align:center;}
.biz-final-cta h3{font-family:var(--font-display);font-size:24px;margin-bottom:8px;}
.biz-final-cta p{font-size:14px;opacity:.9;margin-bottom:22px;}
.trust-stat .v{font-family:var(--font-display);font-size:26px;font-weight:700;color:#fff;}
.trust-stat .l{font-size:12px;color:rgba(255,255,255,.65);margin-top:2px;}
@media(max-width:640px){ .trust-row{gap:22px;} .trust-stat .v{font-size:21px;} }
.chip{
  font-size:13px;font-weight:600;color:#D7E9E7;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  padding:7px 14px;border-radius:999px;transition:.15s;
}
.chip:hover{background:rgba(255,255,255,.18);}

/* coastline ribbon — signature element */
.ribbon-section{background:var(--sea-deep);padding:0 0 36px;position:relative;}
.ribbon-wrap{max-width:1240px;margin:0 auto;padding:0 28px;}
.ribbon-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:#7FB3B0;margin-bottom:10px;}
.ribbon-svg{width:100%;height:auto;display:block;}
.ribbon-pin-label{font-family:var(--font-mono);font-size:10.5px;fill:#BFE0DD;}
.ribbon-pin-price{font-family:var(--font-display);font-size:13px;font-weight:700;fill:#fff;}

/* ---------- main content ---------- */
.content{padding:36px 0 80px;}
.content-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:18px;flex-wrap:wrap;}
.listings-search-row{display:flex;gap:10px;margin-bottom:18px;}
.listings-search-row input{flex:1;border:1px solid var(--line);border-radius:8px;padding:10px 14px;font-size:13.5px;font-family:var(--font-body);}
@media(max-width:640px){ .listings-search-row{flex-direction:column;} }
.view-toggle{display:flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;}
.view-toggle button{background:var(--surface);border:none;padding:7px 16px;font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;}
.view-toggle button.active{background:var(--sea-deep);color:#fff;}
#propertyMap{height:600px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);}
.map-popup-price{font-family:var(--font-mono);font-weight:700;font-size:14px;color:var(--sea-deep);}
.map-popup-title{font-size:12.5px;margin:4px 0;max-width:180px;}
.map-popup-link{font-size:12px;color:var(--sea-deep);font-weight:600;cursor:pointer;}
.content-head h2{font-family:var(--font-display);font-size:24px;font-weight:700;letter-spacing:-.01em;}
.result-count{color:var(--ink-soft);font-size:13.5px;}
.layout{display:grid;grid-template-columns:260px 1fr;gap:28px;align-items:start;}

/* sidebar filters */
.filters{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;position:sticky;top:88px;
  max-height:calc(100vh - 100px);overflow-y:auto;
}
.filters h3{font-family:var(--font-display);font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-soft);margin-bottom:14px;}
.filter-group{margin-bottom:20px;}
.filter-group:last-child{margin-bottom:0;}
.filter-group .ftitle{font-size:13px;font-weight:700;margin-bottom:8px;color:var(--ink);}
.check-row{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:13.5px;color:var(--ink-soft);cursor:pointer;}
.check-row input{accent-color:var(--sea);width:15px;height:15px;}
.check-row:hover{color:var(--ink);}
.range-row{display:flex;gap:8px;}
.range-row input{width:100%;border:1px solid var(--line);border-radius:8px;padding:8px 9px;font-size:13px;font-family:var(--font-mono);}
.district-pills{display:flex;flex-wrap:wrap;gap:6px;}
.district-pills button{
  font-size:12.5px;font-weight:600;padding:6px 11px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink-soft);
}
.district-pills button.active{background:var(--sea-pale);border-color:var(--sea);color:var(--sea-deep);}
.save-search-btn{width:100%;margin-top:6px;}

/* grid + cards */
.grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));gap:16px;align-items:stretch;grid-auto-flow:dense;}

/* ── List view: same cards, laid out as horizontal rows ── */
.grid.list-mode{grid-template-columns:1fr;gap:14px;}
.list-mode .card{display:grid;grid-template-columns:280px 1fr;grid-template-rows:auto 1fr;}
.list-mode .card-tier-ribbon{grid-column:1 / -1;}
.list-mode .card-media{aspect-ratio:auto;height:100%;min-height:190px;grid-row:2;}
.list-mode .card-body{grid-row:2;padding:14px 18px 14px;}
.list-mode .card-prestige,.list-mode .card-premium{grid-column:1 / -1;} /* neutralise span-2 */
.list-mode .card-prestige .card-media,.list-mode .card-premium .card-media{aspect-ratio:auto;}
.list-mode .card-title{-webkit-line-clamp:1;}
@media(max-width:640px){
  .list-mode .card{grid-template-columns:120px 1fr;}
  .list-mode .card-media{min-height:120px;}
  .list-mode .card-media svg{width:30px;height:30px;}
  .list-mode .card-body{padding:10px 12px 12px;}
  .list-mode .card-agent-line{display:none;}
  .list-mode .card-photo-count{display:none;}
}
@media(max-width:980px){.grid{grid-template-columns:repeat(2,1fr);} .layout{grid-template-columns:1fr;} .filters{position:static;}}
@media(max-width:640px){.grid{grid-template-columns:1fr;} .search-grid{grid-template-columns:1fr;}}

.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;
  transition:transform .25s cubic-bezier(.2,.7,.3,1), box-shadow .25s cubic-bezier(.2,.7,.3,1), border-color .25s;
  cursor:pointer;display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-5px) scale(1.012);box-shadow:0 16px 32px -14px rgba(14,58,63,.28);border-color:var(--sea);}
.card:hover .card-photo{transform:scale(1.06);}
.card-media{
  position:relative;aspect-ratio:4/3;display:flex;align-items:center;justify-content:center;color:#fff;overflow:hidden;
}
.card-media svg{width:46px;height:46px;opacity:.85;}
.card-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.3,1);}
.media-fallback-icon{position:absolute;inset:0;align-items:center;justify-content:center;display:none;pointer-events:none;}
.card-badges{position:absolute;top:10px;left:10px;display:flex;gap:6px;flex-wrap:wrap;}
.tag{font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;color:#fff;font-family:var(--font-mono);letter-spacing:.02em;}
.tag-new{background:var(--coral);}
.tag-reduced{background:var(--citrus-deep);}
.tag-agency{background:var(--sea-deep);}
.tag-premium{background:var(--sea-deep);box-shadow:0 2px 8px -2px rgba(14,58,63,.5);}
.card-photo-count{position:absolute;bottom:10px;right:10px;background:rgba(10,28,30,.6);color:#fff;font-size:11px;font-weight:600;padding:3px 8px;border-radius:999px;}
.card-photo-dots{position:absolute;bottom:10px;left:10px;display:flex;gap:5px;z-index:2;}
.card-photo-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.5);border:none;padding:0;cursor:pointer;transition:.15s;}
.card-photo-dot.active{background:#fff;width:16px;border-radius:4px;}
.card-video-badge{position:absolute;top:10px;left:10px;background:rgba(217,98,75,.9);color:#fff;font-size:11px;font-weight:700;padding:4px 9px;border-radius:999px;z-index:2;}
.card-media-collage{position:absolute;inset:0;display:grid;gap:2px;}
.collage-2{grid-template-columns:1fr 1fr;}
.collage-3{grid-template-columns:1.4fr 1fr;grid-template-rows:1fr 1fr;}
.collage-3 .collage-pane.main{grid-row:1 / 3;}
.collage-pane{position:relative;overflow:hidden;background:#0009;}
.collage-pane img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s cubic-bezier(.2,.7,.3,1);}
.card:hover .collage-pane img{transform:scale(1.05);}
.collage-play-btn{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(10,28,30,.35);color:#fff;font-size:22px;
}
.card-compare-label{display:flex;align-items:center;gap:5px;font-size:11.5px;color:var(--ink-soft);margin-top:8px;cursor:pointer;user-select:none;}
.compare-bar{
  position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:60;
  background:var(--sea-deep);color:#fff;padding:12px 18px;border-radius:999px;
  display:flex;align-items:center;gap:14px;box-shadow:0 12px 30px -8px rgba(14,58,63,.5);font-size:13px;
}
.compare-bar .btn-citrus{color:#fff;}
.compare-table th, .compare-table td{text-align:center;}
.compare-table td:first-child, .compare-table th:first-child{text-align:left;}
.floating-btn{
  position:fixed;right:20px;width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 26px -8px rgba(14,58,63,.4);z-index:55;transition:transform .2s cubic-bezier(.34,1.56,.64,1),opacity .2s ease,visibility .2s;
  cursor:pointer;border:none;
}
.floating-btn:hover{transform:scale(1.08);}
.floating-btn:active{transform:scale(.94);}
.back-to-top{bottom:calc(20px + env(safe-area-inset-bottom));background:var(--sea-deep);color:#fff;}
.back-to-top.hide{opacity:0;visibility:hidden;pointer-events:none;}
@media(max-width:640px){ .floating-btn{width:46px;height:46px;right:14px;} .back-to-top{bottom:calc(14px + env(safe-area-inset-bottom));} }
.new-listings-badge{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:56;
  background:var(--citrus-deep);color:#fff;padding:9px 14px;border-radius:999px;font-size:13px;font-weight:600;
  display:flex;align-items:center;gap:10px;box-shadow:0 10px 24px -8px rgba(185,111,24,.5);cursor:pointer;
  animation:badgePulse 2.4s ease-in-out infinite;
}
.new-listings-badge button{background:rgba(255,255,255,.25);border:none;color:#fff;width:20px;height:20px;border-radius:50%;font-size:11px;cursor:pointer;flex:none;}
@keyframes badgePulse{ 0%,100%{box-shadow:0 10px 24px -8px rgba(185,111,24,.5);} 50%{box-shadow:0 10px 30px -4px rgba(185,111,24,.75);} }
@media(max-width:640px){ .new-listings-badge{font-size:12px;padding:8px 12px;} }
.new-listings-badge{
  position:fixed;top:80px;left:50%;transform:translateX(-50%);z-index:56;
  background:var(--citrus);color:#fff;font-size:12.5px;font-weight:700;padding:9px 16px;border-radius:999px;
  display:flex;align-items:center;gap:10px;box-shadow:0 10px 24px -8px rgba(185,111,24,.5);cursor:pointer;
  animation:newBadgePulse 2.4s ease-in-out infinite;
}
.new-listings-dismiss{opacity:.75;font-weight:400;padding:2px;}
.new-listings-dismiss:hover{opacity:1;}
@keyframes newBadgePulse{ 0%,100%{box-shadow:0 10px 24px -8px rgba(185,111,24,.5);} 50%{box-shadow:0 10px 30px -4px rgba(185,111,24,.75);} }
@media(max-width:640px){ .new-listings-badge{top:auto;bottom:140px;font-size:11.5px;} }
.price-compare-chart{display:flex;flex-direction:column;gap:10px;margin-top:6px;}
.price-compare-row{display:grid;grid-template-columns:140px 1fr auto;align-items:center;gap:10px;}
.price-compare-label{font-size:12px;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.price-compare-track{background:var(--bg);border-radius:999px;height:10px;overflow:hidden;}
.price-compare-fill{height:100%;border-radius:999px;transition:width .6s cubic-bezier(.2,.7,.3,1);}
.price-compare-fill-this{background:var(--citrus);}
.price-compare-fill-avg{background:var(--sea);}
.price-compare-value{font-family:var(--font-mono);font-size:12.5px;font-weight:600;white-space:nowrap;}
@media(max-width:640px){ .price-compare-row{grid-template-columns:100px 1fr auto;} .price-compare-label{font-size:11px;} }
.donut-chart{width:140px;height:140px;border-radius:50%;position:relative;flex:none;display:flex;align-items:center;justify-content:center;}
.donut-chart-total{position:relative;width:76px;height:76px;background:var(--surface);border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-size:22px;font-weight:700;color:var(--ink);}
.mobile-filter-bar{display:none;}
@media(max-width:900px){
  .mobile-filter-bar{
    display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:20;
    background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-bottom:14px;
    font-size:12.5px;box-shadow:0 4px 14px -8px rgba(14,58,63,.2);
  }
}

/* Prestige/Premium listing cards get progressively more prominent treatment
   — bigger, richer, and clearly labelled — so the tier's value is obvious
   to a visitor before they even open the listing. Premium is marked with a
   compact corner badge (.tag-premium, see .card-badges); Prestige is the
   only tier that claims the full top edge with a banner (below). */
.card-tier-ribbon{text-align:center;font-weight:800;letter-spacing:.06em;color:#fff;}
.ribbon-prestige{background:linear-gradient(90deg,var(--citrus-deep),var(--citrus),var(--citrus-deep));font-size:12px;padding:7px 0;}

.card-premium{border:1px solid var(--sea);box-shadow:0 8px 22px -10px rgba(27,94,99,.35);}
/* Premium keeps the same 4:3 media as Simple so grid rows stay perfectly level —
   the tier stands out via the badge, border, shadow, tinted body wash, bigger
   price and agent line instead of raw size. */
.card-premium .card-body{padding:14px 16px 16px;background:linear-gradient(180deg,rgba(228,238,236,0) 0%,rgba(228,238,236,.6) 100%);}
.card-premium .card-price{font-size:19px;}
.card-premium:hover{box-shadow:0 18px 40px -10px rgba(27,94,99,.55);border-color:var(--sea);}
.card-premium .card-photo{transition:transform .5s cubic-bezier(.2,.7,.3,1),opacity .28s ease;}

/* ── Tier visual impact ── */
/* Prestige: slow Ken Burns pan draws the eye even without hover */
@keyframes kenBurns{0%{transform:scale(1);}50%{transform:scale(1.07) translate(-1.2%,.8%);}100%{transform:scale(1);}}
.card-prestige .card-photo,.card-prestige .collage-pane.main img{animation:kenBurns 16s ease-in-out infinite;}
/* Prestige ribbon: subtle animated gold shimmer */
.ribbon-prestige{background:linear-gradient(90deg,var(--citrus-deep),var(--citrus),#F0CE8A,var(--citrus),var(--citrus-deep));background-size:250% 100%;animation:ribbonShimmer 5s linear infinite;}
@keyframes ribbonShimmer{0%{background-position:0% 0;}100%{background-position:250% 0;}}
@media(prefers-reduced-motion:reduce){
  .card-prestige .card-photo,.card-prestige .collage-pane.main img{animation:none;}
  .ribbon-prestige{animation:none;}
}
/* Prestige: price gets top billing, gold-tinted to match its tier colour,
   with €/m² context as a small pill alongside it. */
.card-prestige .card-price{font-size:22px;color:var(--citrus-deep);}
.card-ppm2{font-size:11.5px;color:var(--citrus-deep);font-family:var(--font-mono);font-weight:600;background:rgba(224,143,42,.14);padding:2px 8px;border-radius:999px;}
/* Agent avatar (initials) on Premium/Prestige contact line — Prestige gets a
   slightly larger avatar, one more small perk that comes with the top tier. */
.agent-avatar{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--sea-deep);color:#fff;font-size:9.5px;font-weight:700;letter-spacing:.02em;flex:none;}
.card-agent-line{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-soft);}
.card-prestige .agent-avatar{width:26px;height:26px;font-size:10.5px;}
/* Prestige rows in List view get a taller photo */
.list-mode .card-prestige .card-media{min-height:230px;}

/* ── Tier preview modal (agency portal) ── */
.tier-preview-overlay{position:fixed;inset:0;background:rgba(10,28,30,.72);z-index:120;display:flex;align-items:center;justify-content:center;padding:24px;overflow:auto;}
.tier-preview-box{background:var(--bg);border-radius:16px;max-width:1080px;width:100%;padding:26px 28px;position:relative;max-height:92vh;overflow:auto;}
.tier-preview-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;align-items:start;margin-top:18px;}
.tier-preview-grid .card{grid-column:auto !important;pointer-events:none;}
.tier-preview-col-label{text-align:center;margin-top:10px;font-size:12.5px;color:var(--ink-soft);}
.tier-preview-col-label b{display:block;font-size:14px;color:var(--ink);margin-bottom:2px;}
.tier-preview-close{position:absolute;top:14px;right:16px;background:none;border:none;font-size:22px;cursor:pointer;color:var(--ink-soft);}
@media(max-width:900px){ .tier-preview-grid{grid-template-columns:1fr;} }
.card-prestige{
  border:1px solid var(--citrus);
  box-shadow:0 14px 34px -8px rgba(185,111,24,.4);
  position:relative;
  grid-column:span 2; /* meaningfully bigger than a standard card, not just decorated */
}
.card-prestige .card-media{aspect-ratio:16/9;} /* wider photo to suit the doubled card width */
.card-prestige .card-body{padding:16px 18px 18px;background:linear-gradient(180deg,rgba(240,206,138,0) 0%,rgba(240,206,138,.2) 100%);} /* still the most generous spacing of the three tiers */
/* Prestige signature moment: a slim CTA bar slides up over the photo on hover.
   Reserved for the top tier only — the one place this design spends its boldness. */
.card-prestige-cta{
  position:absolute;left:0;right:0;bottom:0;z-index:1;
  background:linear-gradient(90deg,var(--citrus-deep),var(--citrus));color:#fff;
  font-size:12px;font-weight:700;letter-spacing:.03em;text-align:center;padding:9px 0;
  transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.7,.3,1);
}
.card-prestige:hover .card-prestige-cta{transform:translateY(0);}
.card-prestige::before{
  content:'';position:absolute;inset:-1px;border-radius:var(--radius);padding:1px;
  background:linear-gradient(135deg,var(--citrus),var(--citrus-deep),var(--citrus));
  -webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.card-prestige:hover{transform:translateY(-5px) scale(1.012);}
.card-agent-line{margin-top:6px;}
@media(max-width:900px){ .card-prestige{grid-column:span 1;} .card-prestige .card-media{aspect-ratio:4/3;} }
/* Home "Featured" section shows only prestige cards — as three equal columns,
   not span-2 (which would leave empty holes in an all-prestige grid). */
#featuredGrid .card-prestige{grid-column:span 1;}
#featuredGrid .card-prestige .card-media{aspect-ratio:4/3;}
/* v88 — Sort control lives in the results toolbar now, not the sidebar */
.sort-inline{display:flex;align-items:center;gap:8px;}
.sort-inline label{font-size:12.5px;font-weight:600;color:var(--sea-deep);white-space:nowrap;}
.sort-inline select{border:1px solid var(--line);border-radius:8px;padding:8px 10px;font-size:13px;background:#fff;}
@media(max-width:640px){.sort-inline{width:100%;margin-left:0!important;} .sort-inline select{flex:1;}}
/* v88 — Listings grid only (#propertyGrid): fixed 12-col system so a desktop
   row always fits exactly 4 standard cards, or 3 prestige (which span wider).
   Other .grid uses (featured, favourites, recently viewed) keep auto-fill. */
#propertyGrid:not(.list-mode){grid-template-columns:repeat(12,1fr);}
#propertyGrid:not(.list-mode) .card{grid-column:span 3;}
#propertyGrid:not(.list-mode) .card-prestige{grid-column:span 4;}
@media(max-width:1360px){
  #propertyGrid:not(.list-mode) .card{grid-column:span 4;}
  #propertyGrid:not(.list-mode) .card-prestige{grid-column:span 6;}
}
@media(max-width:1150px){
  #propertyGrid:not(.list-mode) .card{grid-column:span 6;}
  #propertyGrid:not(.list-mode) .card-prestige{grid-column:span 12;}
}
@media(max-width:640px){
  #propertyGrid:not(.list-mode) .card,
  #propertyGrid:not(.list-mode) .card-prestige{grid-column:span 12;}
}
/* v88 — Compact desktop list view: roughly 3 cards visible per screen */
@media(min-width:981px){
  .grid.list-mode{gap:12px;}
  .list-mode .card{grid-template-columns:240px 1fr;}
  .list-mode .card-media{min-height:150px;}
  .list-mode .card-body{padding:10px 16px 12px;}
  .list-mode .card-prestige .card-media{min-height:170px;}
}
.tier-banner{padding:9px 16px;border-radius:10px;font-size:12.5px;font-weight:700;margin-bottom:14px;text-align:center;letter-spacing:.02em;color:#fff;}
.tier-banner-prestige{background:linear-gradient(135deg,var(--citrus-deep),var(--citrus));}
.tier-banner-premium{background:linear-gradient(135deg,var(--sea-deep),var(--sea));}
.fav-btn{
  position:absolute;top:10px;right:10px;width:32px;height:32px;border-radius:50%;background:rgba(20,43,46,.55);
  border:none;display:flex;align-items:center;justify-content:center;color:#fff;backdrop-filter:blur(4px);
}
.fav-btn svg{width:16px;height:16px;}
.fav-btn.active svg{fill:var(--coral);stroke:var(--coral);}
.card-body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:6px;flex:1;}
.card-price-row{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;}
.card-price{font-family:var(--font-mono);font-size:17.5px;font-weight:600;color:var(--sea-deep);}
.card-price span{font-size:12px;color:var(--ink-soft);font-weight:500;}
.card-title{font-size:14px;font-weight:600;line-height:1.3;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.card-loc{font-size:12px;color:var(--ink-soft);display:flex;align-items:center;gap:5px;}
.card-loc .loc-icon{width:12px;height:12px;flex:none;opacity:.75;}
.card-meta-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:2px;}
.meta-tag{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:999px;background:var(--bg);color:var(--ink-soft);border:1px solid var(--line);}
.meta-tag-construction{background:var(--sea-pale);color:var(--sea-deep);border-color:var(--sea);}
.card-specs{display:flex;gap:12px;font-size:12.5px;color:var(--ink-soft);margin-top:auto;padding-top:8px;border-top:1px solid var(--line-soft);}
.card-specs span{display:flex;align-items:center;gap:4px;}
.card-specs svg,.card-specs .spec-icon{width:14px;height:14px;flex:none;opacity:.8;}
.card-agency{font-size:11px;color:var(--ink-soft);font-family:var(--font-mono);}

.empty-state{
  text-align:center;padding:70px 20px;color:var(--ink-soft);grid-column:1/-1;
}
.empty-state h3{font-family:var(--font-display);font-size:18px;color:var(--ink);margin-bottom:6px;}

/* ---------- modal ---------- */
.modal-overlay{
  position:fixed;inset:0;background:rgba(10,28,30,.6);backdrop-filter:blur(3px);z-index:100;
  display:none;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto;
}
.modal-overlay.open{display:flex;}
.modal{
  background:var(--surface);border-radius:18px;max-width:880px;width:100%;overflow:hidden;
  box-shadow:0 40px 80px -20px rgba(0,0,0,.5);
}
.modal-gallery{
  background:linear-gradient(135deg,var(--sea-deep),var(--sea));height:280px;position:relative;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.modal-gallery svg{width:70px;height:70px;color:#fff;opacity:.8;}
.modal-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .15s ease;}
#stickyMobileContactBar{
  display:none; /* only shown on mobile, see media query below — desktop already has the persistent agent-card in the modal itself, no need for a second copy */
  position:fixed;left:0;right:0;bottom:0;z-index:145;
  background:#fff;border-top:1px solid var(--line);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  gap:8px;box-shadow:0 -8px 24px -8px rgba(14,58,63,.15);
}
#stickyMobileContactBar.hide{display:none !important;}
#stickyMobileContactBar a, #stickyMobileContactBar button{flex:1;text-align:center;font-size:13px;padding:11px 6px;}
@media(max-width:768px){
  /* Directly from the property-portal UX research pass: Zillow/Redfin
     keep a persistent contact/tour box in the desktop right rail, but
     on mobile — where there's no right rail and the agent-card sits
     far down a long scrolling page — a sticky bottom bar (Call/
     WhatsApp/Enquire) keeps the primary conversion actions reachable
     without scrolling back up. Only shown while a property modal is
     actually open (toggled in JS), not on every page. */
  #stickyMobileContactBar.open{display:flex;}
}
.modal-close{
  position:absolute;top:14px;right:14px;width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.92);
  border:none;display:flex;align-items:center;justify-content:center;
}
.modal-photo-count{position:absolute;bottom:12px;right:14px;background:rgba(10,28,30,.65);color:#fff;font-size:11.5px;font-weight:600;padding:4px 10px;border-radius:999px;}
.modal-thumbs{display:flex;gap:6px;padding:10px 32px;overflow-x:auto;background:var(--surface);border-bottom:1px solid var(--line-soft);}
.modal-thumb{width:64px;height:48px;object-fit:cover;border-radius:8px;cursor:pointer;flex:none;opacity:.6;transition:opacity .15s ease,outline .15s ease;outline:2px solid transparent;}
.modal-thumb:hover{opacity:.9;}
.modal-thumb.active{opacity:1;outline-color:var(--sea-deep);}
.modal-body{padding:30px 34px 36px;}
.modal-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:22px;flex-wrap:wrap;}
.modal-price{font-family:var(--font-mono);font-size:28px;font-weight:600;color:var(--sea-deep);}
.modal-price-col{display:flex;flex-direction:column;align-items:flex-end;gap:3px;}
.modal-ref{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-soft);}
.modal-title{font-family:var(--font-display);font-size:21px;font-weight:700;margin:4px 0 6px;}
.modal-loc{font-size:13.5px;color:var(--ink-soft);display:flex;align-items:center;gap:5px;}
.modal-loc .loc-icon{width:13px;height:13px;flex:none;opacity:.75;}
.fact-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden;margin:24px 0;}
/* Was a fixed repeat(4,1fr) — with fewer than 4 real facts (properties
   don't always have year built/EPC/title deed/parking/etc. all
   populated), the leftover grid cells had nothing in them but still
   showed the container's own background color, reading as an odd blank
   grey box rather than the grid just being narrower. Found during a UI
   review. auto-fit sizes the grid to however many facts actually exist. */
.fact{background:var(--surface);padding:16px 10px;text-align:center;}
.fact .v{font-family:var(--font-mono);font-weight:600;font-size:16px;}
.fact .l{font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.04em;margin-top:2px;}
.modal-section{margin-top:30px;}
.local-services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;}
.local-service-card{position:relative;border:1px solid var(--line);border-radius:10px;padding:14px;}
.local-service-card.featured{border-color:var(--citrus);box-shadow:0 6px 16px -8px rgba(185,111,24,.3);}
.local-service-badge{position:absolute;top:10px;right:10px;color:var(--citrus-deep);font-weight:700;}
.local-service-cat{font-size:11px;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px;}
.local-service-name{font-family:var(--font-display);font-size:14.5px;font-weight:700;margin-bottom:6px;}
.local-service-desc{font-size:12px;color:var(--ink-soft);line-height:1.4;margin-bottom:10px;}
.local-service-actions{display:flex;gap:6px;flex-wrap:wrap;}
.services-cat-filter{display:flex;gap:8px;flex-wrap:wrap;}
.services-cat-filter button{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:13px;font-weight:600;color:var(--ink-soft);cursor:pointer;}
.services-cat-filter button.active{background:var(--sea-deep);color:#fff;border-color:var(--sea-deep);}
.modal-section h4{
  font-family:var(--font-display);font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;
  color:var(--sea-deep);margin-bottom:14px;padding-bottom:10px;border-bottom:1px solid var(--line-soft);
}
.modal-desc{font-size:14.5px;line-height:1.65;color:var(--ink-soft);}
.investor-note{
  margin-top:16px;background:var(--sea-pale);border:1px solid #C7DEDA;border-radius:10px;padding:12px 14px;font-size:13px;color:var(--sea-deep);
  display:flex;gap:10px;align-items:flex-start;
}
.investor-note svg{width:18px;height:18px;flex:none;margin-top:1px;}
.attention-note{
  background:#FDF1EE;border:1px solid #F3D2C8;border-radius:10px;padding:12px 14px;font-size:13px;color:#9A3E29;
  display:flex;gap:10px;align-items:flex-start;margin-bottom:8px;
}
.attention-note svg{width:18px;height:18px;flex:none;margin-top:1px;color:var(--coral);}
.attention-note b{color:#7A2E1D;}
.attention-clear{
  background:var(--sea-pale);border:1px solid #C7DEDA;border-radius:10px;padding:12px 14px;font-size:13px;color:var(--sea-deep);
  display:flex;gap:10px;align-items:center;
}
.top-agency-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line-soft);}
.top-agency-row:last-child{border-bottom:none;}
.top-agency-rank{width:22px;height:22px;border-radius:50%;background:var(--sea-pale);color:var(--sea-deep);font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none;}
.top-agency-name{flex:1;font-size:13px;font-weight:600;}
.top-agency-meta{font-size:11px;color:var(--ink-soft);}
.top-agency-activity{font-size:13px;font-weight:700;color:var(--sea-deep);}
.pagination-bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;padding:12px 4px;}
.pagination-info{font-size:12px;color:var(--ink-soft);}
.pagination-controls{display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.pagination-btn{min-width:34px;padding:6px 10px !important;}
.pagination-size{border:1px solid var(--line);border-radius:8px;padding:6px 8px;font-size:12px;background:var(--surface);}
.sortable-th:hover{color:var(--sea-deep);}
.row-thumb{width:44px;height:33px;border-radius:6px;object-fit:cover;background:var(--bg);border:1px solid var(--line);flex:none;}
.row-thumb-placeholder{width:44px;height:33px;border-radius:6px;background:var(--sea-pale);display:flex;align-items:center;justify-content:center;flex:none;color:var(--sea-deep);}
.row-logo{width:28px;height:28px;border-radius:50%;object-fit:cover;background:var(--bg);border:1px solid var(--line);flex:none;}
.row-logo-placeholder{width:28px;height:28px;border-radius:50%;background:var(--sea-deep);color:#fff;display:flex;align-items:center;justify-content:center;flex:none;font-size:11px;font-weight:700;font-family:var(--font-display);}
.row-with-media{display:flex;align-items:center;gap:9px;}
.bulk-action-bar{
  display:flex;align-items:center;gap:12px;background:var(--sea-deep);color:#fff;border-radius:10px;
  padding:10px 16px;margin-bottom:12px;font-size:13px;flex-wrap:wrap;
}
.bulk-action-bar select{border-radius:7px;border:none;padding:6px 9px;font-size:12.5px;}
.bulk-action-bar button{white-space:nowrap;}
.nav-badge{background:var(--coral);color:#fff;border-radius:999px;font-size:10px;font-weight:800;padding:1px 6px;margin-left:5px;}
.nav-badge-update{position:absolute;top:2px;right:2px;width:8px;height:8px;border-radius:50%;background:var(--coral);border:2px solid var(--surface);}
.preset-chip{display:inline-flex;align-items:center;gap:2px;background:var(--sea-pale);border-radius:999px;padding:2px 4px 2px 10px;margin-right:6px;}
.preset-chip .preset-delete{color:var(--ink-soft);padding:2px 6px;}
.preset-chip .preset-delete:hover{color:var(--coral);}
.delta-label{font-size:10.5px;font-weight:700;margin-top:2px;}
.delta-up{color:var(--sea-deep);}
.delta-down{color:var(--coral);}
.global-search-results{
  position:absolute;top:calc(100% + 6px);left:0;width:100%;max-height:320px;overflow-y:auto;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;
  box-shadow:0 14px 34px rgba(14,58,63,.16);padding:6px;z-index:60;
}
.global-search-item{display:block;width:100%;text-align:left;padding:9px 11px;border-radius:9px;border:none;background:none;cursor:pointer;}
.global-search-item:hover{background:var(--sea-pale);}
.global-search-item .gs-label{font-size:13px;font-weight:600;color:var(--sea-deep);}
.global-search-item .gs-sub{font-size:11px;color:var(--ink-soft);margin-top:1px;}
.global-search-item .gs-type{display:inline-block;font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;color:var(--citrus-deep);margin-bottom:2px;}
.help-icon-btn{
  display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;
  background:var(--sea-pale);color:var(--sea-deep);border:none;font-size:10.5px;font-weight:700;cursor:pointer;
  vertical-align:middle;margin-left:5px;flex:none;line-height:1;
}
.help-icon-btn:hover{background:var(--sea);color:#fff;}
.help-popup{
  position:fixed;max-width:280px;background:var(--ink);color:#fff;border-radius:10px;padding:10px 13px;
  font-size:12.5px;line-height:1.5;box-shadow:0 14px 30px rgba(0,0,0,.24);z-index:300;
  opacity:0;pointer-events:none;transform:translateY(-4px);transition:opacity .12s ease, transform .12s ease;
}
.help-popup.open{opacity:1;pointer-events:auto;transform:translateY(0);}
.help-popup::after{content:'';position:absolute;top:-5px;left:14px;width:10px;height:10px;background:var(--ink);transform:rotate(45deg);}
/* Reusable row-actions kebab menu — position:fixed and appended to <body>,
   same reasoning as .help-popup above: any dropdown nested inside a
   .preview-wrap table (overflow:auto) would get clipped, so this renders
   outside that scrolling context and is positioned via getBoundingClientRect(). */
.kebab-btn{width:28px;height:28px;border-radius:50%;border:1px solid var(--line);background:var(--surface);display:inline-flex;align-items:center;justify-content:center;color:var(--ink-soft);cursor:pointer;flex:none;font-size:16px;line-height:1;}
.kebab-btn:hover{background:var(--sea-pale);color:var(--sea-deep);border-color:var(--sea);}
.kebab-menu{position:fixed;background:var(--surface);border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 34px rgba(14,58,63,.18);padding:6px;min-width:190px;z-index:300;display:none;max-height:70vh;overflow-y:auto;}
.kebab-menu.open{display:block;}
.kebab-menu button,.kebab-menu a{display:block;width:100%;text-align:left;padding:8px 11px;border-radius:7px;border:none;background:none;font-size:13px;cursor:pointer;color:var(--ink);text-decoration:none;font-family:var(--font-body);}
.kebab-menu button:hover,.kebab-menu a:hover{background:var(--sea-pale);color:var(--sea-deep);}
.kebab-menu .danger{color:var(--coral);}
.kebab-menu .danger:hover{background:#FDF1EE;color:#9A3E29;}
.kebab-menu hr{border:none;border-top:1px solid var(--line-soft);margin:5px 2px;}
.row-actions-inline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.agent-card{
  display:flex;align-items:center;gap:12px;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:10px;
}
.agent-avatar{width:46px;height:46px;border-radius:50%;background:var(--sea-deep);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;flex:none;}
.agent-meta{flex:1;}
.agent-meta .name{font-weight:600;font-size:14px;}
.agent-meta .org{font-size:12.5px;color:var(--ink-soft);}
.agent-actions{display:flex;gap:8px;flex-wrap:wrap;}
.modal-actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;}

/* mini mortgage calc inside modal */
.mini-calc{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px;}
.mini-calc .field input{padding:9px 10px;font-size:13px;}
.mini-calc-result{margin-top:10px;font-size:13.5px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:10px 12px;}
.mini-calc-result b{font-family:var(--font-mono);color:var(--sea-deep);}

/* ---------- tabs: agencies / favorites / import / tools ---------- */
.section-pad{padding:40px 0 80px;}
.section-pad:not(.hide), .content:not(.hide){ animation:tabFadeIn .35s cubic-bezier(.2,.7,.3,1) both; }
@keyframes tabFadeIn{ from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} }
.page-head{margin-bottom:28px;}
.page-head h2{font-family:var(--font-display);font-size:28px;font-weight:700;letter-spacing:-.01em;margin-bottom:6px;}
.page-head p{color:var(--ink-soft);font-size:14.5px;max-width:640px;}

.agency-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
@media(max-width:900px){.agency-grid{grid-template-columns:1fr 1fr;}}
@media(max-width:600px){.agency-grid{grid-template-columns:1fr;}}
.agency-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px;position:relative;}
.agency-featured{border-color:var(--citrus);box-shadow:0 10px 26px -10px rgba(185,111,24,.35);}
.agency-featured-badge{background:linear-gradient(90deg,var(--citrus-deep),var(--citrus));color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.04em;padding:4px 10px;border-radius:999px;display:inline-block;margin-bottom:10px;}
.agency-top{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.agency-logo{width:48px;height:48px;border-radius:12px;background:var(--sea-deep);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:18px;}
.agency-name{font-weight:700;font-size:15px;}
.agency-loc{font-size:12.5px;color:var(--ink-soft);}
.agency-stats{display:flex;gap:16px;margin:12px 0;font-size:12.5px;color:var(--ink-soft);}
.agency-stats b{color:var(--ink);font-family:var(--font-mono);}

.fav-empty,.import-empty{text-align:center;padding:60px 20px;color:var(--ink-soft);}

/* import tab */
.import-layout{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:start;}
@media(max-width:900px){.import-layout{grid-template-columns:1fr;}}
.import-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;}
.import-card h3{font-family:var(--font-display);font-size:16px;margin-bottom:6px;}
.import-card p.hint{font-size:13px;color:var(--ink-soft);margin-bottom:14px;}
.dropzone{
  border:2px dashed var(--line);border-radius:12px;padding:26px;text-align:center;color:var(--ink-soft);font-size:13.5px;
  margin-bottom:14px;transition:.15s;
}
.dropzone.drag{border-color:var(--sea);background:var(--sea-pale);}
.dropzone svg{width:28px;height:28px;margin:0 auto 8px;color:var(--sea);}
textarea#xmlInput{
  width:100%;min-height:420px;border:1px solid var(--line);border-radius:10px;padding:12px;font-family:var(--font-mono);
  font-size:12px;resize:vertical;background:#0E2628;color:#CDE7E4;line-height:1.6;
}
.import-actions{display:flex;gap:10px;margin-top:12px;}
.schema-box{background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:14px;font-size:12px;font-family:var(--font-mono);color:var(--ink-soft);line-height:1.7;}
.schema-box .req{color:var(--coral);font-weight:700;}
.preview-table{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:14px;}
.preview-table th{text-align:left;padding:8px;background:var(--bg);border-bottom:1px solid var(--line);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);}
.preview-table td{padding:8px;border-bottom:1px solid var(--line-soft);}
.preview-table tr.row-error td{color:var(--coral);}
.preview-wrap{
  max-height:75vh; /* was a fixed 280px — cramped every data table in the app into ~5 visible rows regardless of screen size; scales with the actual viewport now */
  overflow:auto;border:1px solid var(--line);border-radius:10px;
}
.import-summary{display:flex;gap:18px;margin-top:14px;font-size:13px;}
.import-summary b{font-family:var(--font-mono);}
.toast{
  position:fixed;bottom:calc(24px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%) translateY(20px);background:var(--ink);color:#fff;
  padding:13px 22px;border-radius:999px;font-size:13.5px;font-weight:600;box-shadow:var(--shadow);z-index:200;
  opacity:0;pointer-events:none;transition:.25s;display:flex;align-items:center;gap:8px;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}
.toast svg{width:16px;height:16px;color:#7FE0B0;}

/* tools tab */
.tools-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;}
@media(max-width:860px){.tools-grid{grid-template-columns:1fr;}}
.tool-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;}
.tool-card h3{font-family:var(--font-display);font-size:16px;margin-bottom:4px;}
.tool-card p.hint{font-size:13px;color:var(--ink-soft);margin-bottom:16px;}
.tool-field{margin-bottom:12px;}
.tool-field label{font-size:12.5px;font-weight:600;color:var(--ink-soft);display:block;margin-bottom:4px;}
.tool-field input,.tool-field select{width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 11px;font-size:14px;}
.tool-result{margin-top:14px;background:var(--sea-pale);border:1px solid #C7DEDA;border-radius:10px;padding:14px;}
.tool-result .big{font-family:var(--font-mono);font-size:24px;font-weight:600;color:var(--sea-deep);}
.tool-result .label{font-size:12px;color:var(--ink-soft);}
.tool-note{font-size:12px;color:var(--ink-soft);margin-top:10px;line-height:1.5;}

/* saved searches */
.saved-list{display:flex;flex-direction:column;gap:10px;}
.saved-item{display:flex;justify-content:space-between;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:14px 16px;}
.saved-item .meta{font-size:12.5px;color:var(--ink-soft);}
.saved-item .name{font-weight:600;font-size:14px;}

/* ---------- agency portal: auth gate + pricing ---------- */
.auth-tabs{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap;}
.auth-tabs button{padding:8px 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:13.5px;font-weight:600;color:var(--ink-soft);}
.auth-tabs button.active{background:var(--sea-deep);color:#fff;border-color:var(--sea-deep);}
.auth-layout{display:grid;grid-template-columns:360px 1fr;gap:24px;align-items:start;margin-bottom:36px;}
@media(max-width:900px){.auth-layout{grid-template-columns:1fr;}}
.auth-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:24px;}
.auth-card h3{font-family:var(--font-display);font-size:16px;margin-bottom:14px;}
.auth-field{margin-bottom:12px;}
.auth-field label{font-size:12.5px;font-weight:600;color:var(--ink-soft);display:block;margin-bottom:4px;}
.auth-field input,.auth-field select{width:100%;border:1px solid var(--line);border-radius:9px;padding:10px 11px;font-size:14px;}
.auth-error{color:var(--coral);font-size:12.5px;margin-top:6px;min-height:16px;}
.auth-note{font-size:11.5px;color:var(--ink-soft);margin-top:12px;line-height:1.5;}

.pricing-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
@media(max-width:900px){.pricing-grid{grid-template-columns:1fr;}}
/* Billing term toggle + founding-rate strikethrough */
.term-toggle{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;}
.term-toggle button{background:var(--surface);border:none;padding:8px 16px;font-size:12.5px;font-weight:600;color:var(--ink-soft);cursor:pointer;}
.term-toggle button.active{background:var(--sea-deep);color:#fff;}
.plan-price-was{color:var(--ink-soft);font-size:15px;font-weight:400;margin-right:7px;opacity:.7;}
.plan-tagline{font-size:11px;color:var(--ink-soft);font-weight:500;margin-top:2px;}
.term-disclosure{display:flex;gap:10px;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:12.5px;line-height:1.55;color:var(--ink-soft);margin-bottom:12px;cursor:pointer;}
.term-disclosure input{margin-top:3px;flex:none;}
.input-invalid{border-color:var(--coral) !important;box-shadow:0 0 0 3px rgba(217,98,75,.13) !important;}
.field-error-msg{color:var(--coral);font-size:11.5px;font-weight:600;margin-top:4px;}
.term-disclosure.input-invalid{border-color:var(--coral);}
@media(max-width:520px){
  .term-toggle{display:flex;width:100%;}
  .term-toggle button{flex:1;padding:8px 6px;font-size:11px;}
}
.plan-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;}
.plan-card.featured{border-color:var(--sea);box-shadow:0 0 0 3px var(--sea-pale);position:relative;}
.plan-card.featured::before{content:'Most popular';position:absolute;top:-11px;left:18px;background:var(--citrus);color:#fff;font-size:10.5px;font-weight:700;padding:3px 10px;border-radius:999px;letter-spacing:.03em;}
.plan-card.featured[data-badge]::before{content:attr(data-badge);} /* translated label from the portal */
.plan-name{font-family:var(--font-display);font-size:16px;font-weight:700;}
.plan-price{font-family:var(--font-mono);font-size:28px;font-weight:600;margin:8px 0 2px;color:var(--sea-deep);}
.plan-price span{font-size:12.5px;color:var(--ink-soft);font-weight:500;}
.plan-feat{list-style:none;margin:14px 0 18px;font-size:13px;color:var(--ink-soft);display:flex;flex-direction:column;gap:8px;flex:1;}
.plan-feat li{display:flex;gap:8px;align-items:flex-start;}
.plan-feat li svg{width:15px;height:15px;color:var(--sea);flex:none;margin-top:1px;}
.plan-feat li.off{color:#B7BFB9;}
.plan-feat li.off svg{color:#C9CFC9;}

/* dashboard */
.dash-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:22px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px 22px;}
.dash-plan-badge{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;background:var(--sea-pale);color:var(--sea-deep);padding:4px 10px;border-radius:999px;}
.dash-usage{font-size:12.5px;color:var(--ink-soft);margin-top:4px;}
.dash-usage-bar{width:160px;height:6px;border-radius:99px;background:var(--line-soft);overflow:hidden;margin-top:6px;}
.dash-quickjump{
  position:sticky;top:0;z-index:15;background:var(--surface);border:1px solid var(--line);border-radius:10px;
  padding:10px 14px;margin-bottom:20px;display:flex;gap:18px;flex-wrap:wrap;box-shadow:0 4px 14px -8px rgba(14,58,63,.15);
}
.dash-quickjump a{font-size:12.5px;font-weight:600;color:var(--ink-soft);text-decoration:none;}
.dash-quickjump a:hover{color:var(--sea-deep);}
#dashSectionListings, #dashSectionLeads, #dashSectionWallet, #dashSectionFeatured, #dashSectionTeam, #dashSectionSettings, #dashSectionMessages, #dashSectionCobroke, #dashSectionSupport{scroll-margin-top:60px;}
.dash-usage-fill{height:100%;background:var(--sea);}
.lock-card{background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius);padding:30px;text-align:center;color:var(--ink-soft);}
.lock-card svg{width:30px;height:30px;color:var(--sea);margin:0 auto 10px;}
.manage-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px;} /* was border-collapse:collapse, which silently breaks position:sticky on th in most browsers — the sticky column headers below never actually worked until this changed; only bottom-borders are used on cells so the visual result is identical */
.manage-table th{text-align:left;padding:9px 10px;background:var(--bg);border-bottom:1px solid var(--line);font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-soft);}
.manage-table td{padding:9px 10px;border-bottom:1px solid var(--line-soft);vertical-align:middle;}
.manage-table input[type=number]{width:90px;border:1px solid var(--line);border-radius:7px;padding:5px 7px;font-family:var(--font-mono);font-size:12.5px;}
.manage-table select{border:1px solid var(--line);border-radius:7px;padding:5px 7px;font-size:12.5px;}
.tiny-link{font-size:12px;color:var(--coral);font-weight:600;}
.add-listing-form{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:6px;}
@media(max-width:760px){.add-listing-form{grid-template-columns:1fr 1fr;}}
.add-listing-form .field input,.add-listing-form .field select{width:100%;}

footer{background:var(--sea-deep);color:#BFE0DD;padding:40px 0;margin-top:40px;}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:20px;font-size:13px;}
footer .cols{display:flex;gap:48px;flex-wrap:wrap;}
footer .col h5,footer .col h2.foot-h{color:#fff;font-size:12px;text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px;font-family:inherit;font-weight:700;line-height:1.3;}
footer .col a{display:block;padding:3px 0;color:#9DC6C3;}
.footer-link-btn{display:block;padding:3px 0;color:#9DC6C3;background:none;border:none;font:inherit;text-align:left;cursor:pointer;width:100%;}
.footer-link-btn:hover{color:#fff;}
.footer-business-link{color:var(--citrus)!important;font-weight:600;cursor:pointer;}
footer .col a:hover{color:#fff;}
.disclaimer{font-size:11.5px;color:#6FA09D;margin-top:24px;border-top:1px solid rgba(255,255,255,.1);padding-top:16px;}
@media(max-width:640px){
  footer .cols{gap:20px 28px;}
  footer .col{flex:1 1 40%;min-width:130px;}
  footer .wrap{gap:24px;}
}

.hide{display:none !important;}

/* ---------- admin nav: horizontal pill row ---------- */
.admin-nav-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:20px;align-items:center;}
.admin-nav-groups-row{margin-bottom:0;}
.admin-nav-subitems-row{margin:8px 0 20px;padding-top:10px;border-top:1px dashed var(--line);}
.admin-nav-group-btn{font-weight:700;}
.admin-nav-group-label{flex-basis:100%;font-size:10.5px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.06em;margin:10px 0 1px;}
.admin-nav-divider{width:1px;height:20px;background:var(--line);margin:0 4px;}
.admin-nav-item{display:inline-flex;align-items:center;gap:7px;padding:9px 14px;border-radius:999px;font-size:13.5px;font-weight:600;color:var(--ink-soft);border:1px solid var(--line);background:var(--surface);cursor:pointer;transition:background .15s ease,color .15s ease,border-color .15s ease;}
.admin-nav-item svg{width:15px;height:15px;flex:none;}
.admin-nav-item:hover{background:var(--sea-pale);color:var(--sea-deep);border-color:var(--sea);}
.admin-nav-item.active{background:var(--sea-deep);color:#fff;border-color:var(--sea-deep);}

/* status pills */
.status-pill{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 9px;border-radius:999px;white-space:nowrap;}
.status-pill.ok{background:#E1EFE6;color:#2A7A4F;}
.status-pill.warn{background:#FBEFD9;color:var(--citrus-deep);}
.status-pill.danger{background:#FBE4E0;color:var(--coral);}
.status-pill.neutral{background:var(--bg);color:var(--ink-soft);}

/* empty state */
.admin-empty{text-align:center;padding:44px 20px;color:var(--ink-soft);}
.admin-empty svg{width:32px;height:32px;margin:0 auto 12px;color:var(--sea);opacity:.55;display:block;}
.admin-empty .t{font-family:var(--font-display);font-size:14.5px;color:var(--ink);margin-bottom:4px;}

/* table polish */
.manage-table thead th{position:sticky;top:0;background:var(--bg);z-index:1;}
.manage-table tbody tr{transition:background .12s ease;}
.manage-table tbody tr:hover{background:var(--sea-pale);}
.admin-search{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 12px 9px 34px;font-size:13.5px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23496163' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M21 21l-4.3-4.3'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:10px center;background-size:15px;}

/* section intro helper text under h3 */
.admin-section-head{display:flex;align-items:center;gap:8px;margin-bottom:4px;}
.admin-section-head svg{width:18px;height:18px;color:var(--sea);}


/* ---------- animation system ---------- */
@keyframes fadeInUp{ from{opacity:0;transform:translateY(14px);} to{opacity:1;transform:translateY(0);} }
@keyframes shimmer{ 0%{background-position:-200% 0;} 100%{background-position:200% 0;} }
@keyframes popIn{ from{opacity:0;transform:scale(.96);} to{opacity:1;transform:scale(1);} }

.card{ animation:fadeInUp .45s cubic-bezier(.2,.7,.3,1) both; }
.btn{ transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease; }
.btn:hover{ transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.fav-btn{ transition:transform .2s cubic-bezier(.34,1.56,.64,1), background .15s ease; }
.fav-btn:active{ transform:scale(.85); }
.fav-btn.active svg{ animation:popIn .25s ease; }
.chip, .district-pills button, .auth-tabs button{ transition:background .15s ease, color .15s ease, transform .15s ease; }
.chip:hover{ transform:translateY(-1px); }

.modal-overlay{
  opacity:0; pointer-events:none; transition:opacity .2s ease;
  display:flex !important; /* always in the flow — visibility handled by opacity/pointer-events */
}
.modal-overlay.open{ opacity:1; pointer-events:auto; }
.modal{ transform:scale(.97) translateY(8px); transition:transform .25s cubic-bezier(.2,.8,.3,1); }
.modal-overlay.open .modal{ transform:scale(1) translateY(0); }

.toast{ transition:opacity .3s ease, transform .3s cubic-bezier(.2,.8,.3,1); }

/* Skeleton loading shimmer — used instead of plain "Loading…" text where it helps */
.skeleton{
  background:linear-gradient(90deg, var(--line-soft) 25%, #F6F4EF 37%, var(--line-soft) 63%);
  background-size:400% 100%; animation:shimmer 1.4s ease infinite;
  border-radius:8px; display:block;
}
.skeleton-line{ height:14px; margin-bottom:8px; }
.skeleton-card{ height:210px; border-radius:var(--radius); }

/* Count-up numbers (fact grid, stats) get a tiny settle animation when they change */
.fact .v, .plan-price, .modal-price{ transition:opacity .2s ease; }

/* Ribbon path draws in on load */
@keyframes drawPath{ from{ stroke-dashoffset:1400; } to{ stroke-dashoffset:0; } }
.ribbon-draw{ stroke-dasharray:1400; animation:drawPath 1.6s cubic-bezier(.2,.7,.3,1) both; }

/* Reduced motion respect */
/* ---------- mobile / tablet pass ---------- */
html{overflow-x:hidden;} /* safety net against any residual element causing whole-page horizontal scroll */

@media(max-width:900px){
  /* Top nav now only has 4 direct items + "More" (the rest live in the
     dropdown), so this rarely needs to scroll at all — the horizontal-scroll
     fallback in the base .nav rule still covers any edge case (e.g. very
     narrow phones with the browser's own zoom/text-size increased). */
  .topbar .wrap{gap:12px;}
  .nav button{padding:8px 12px;font-size:13.5px;}
  .logo{font-size:19px;flex:none;}
  .top-actions{gap:6px;}
}
@media(max-width:560px){
  .wrap{padding:0 14px;}
  .topbar .wrap{gap:8px;}
  .top-actions{gap:5px;}
  .logo{font-size:17px;}
  #listPropertyBtn{padding:8px 9px;font-size:11px;}
  .fact-grid{grid-template-columns:repeat(2,1fr);}
  .mini-calc{grid-template-columns:1fr;}
  .modal-body{padding:20px 18px 24px;}
  .modal-overlay{padding:16px 8px;}
  .agent-card{flex-wrap:wrap;}
  .agent-actions{width:100%;justify-content:stretch;}
  .agent-actions a{flex:1;text-align:center;}
  .add-listing-form{grid-template-columns:1fr !important;}
  .hero{padding-top:36px;}
  .search-card{padding:14px;}
  .admin-nav-item{padding:8px 11px;font-size:12.5px;}
  .admin-nav-item span{display:inline;}
  .admin-nav-group-label{font-size:10px;margin:8px 0 1px;}
  .dash-top{padding:14px 16px;}
  .dash-top > div:last-child{align-items:flex-start !important;}
  .dash-top > div:last-child .hint{text-align:left !important;}
  .pricing-grid{gap:12px;}
  .auth-card{padding:18px;}
}
@media(max-width:400px){
  .lang-toggle button{padding:5px 8px;font-size:10.5px;}
  #listPropertyBtn{padding:8px 9px;font-size:11.5px;}
  .icon-btn{width:32px;height:32px;}
  .admin-nav-item span{display:none;} /* icon-only on the narrowest phones so the row still fits without wrapping to 3+ lines */
  .card-specs{gap:8px;font-size:11.5px;}
}

@media (prefers-reduced-motion: reduce){
  .card, .fav-btn.active svg, .ribbon-draw, .skeleton, .section-pad, .content, .new-listings-badge, .hero::before{ animation:none !important; }
  .btn, .modal, .modal-overlay, .toast, .reveal-on-scroll, .hero-bg-photos img, #heroCyclingWord{ transition:none !important; }
  .reveal-on-scroll{ opacity:1 !important; transform:none !important; }
  .reveal-stagger.revealed > *{ animation:none !important; }
}

body.admin-active .hero,
body.admin-active .ribbon-section,
body.admin-active #mainNav,
body.admin-active .top-actions{display:none !important;}


/* ───────────── UX pass, 18 Oct 2026 ───────────── */

/* .tiny-link is used on <button>s all over the site (Share, Hide this,
   Cancel subscription…) but never reset the browser's button look, so they
   rendered as grey boxed system buttons. */
button.tiny-link{background:none;border:none;padding:0;font-family:inherit;cursor:pointer;text-align:left;line-height:1.4;}
button.tiny-link:hover{text-decoration:underline;}
button.tiny-link:focus-visible{outline:2px solid var(--sea);outline-offset:2px;border-radius:3px;}

/* Public-only floating pill doesn't belong over the agency portal or admin. */
body[data-tab="import"] .new-listings-badge,
body[data-tab="admin"] .new-listings-badge,
body.admin-active .new-listings-badge{display:none !important;}
/* The public cookie banner sat over the admin sidebar and action buttons.
   Admins are staff on an internal tool, so it waits until they are back on
   the public site (it still shows there until a choice is made). */
body.admin-active #cookieNotice{display:none !important;}

/* Admin overview money tiles: 3 across on desktop, stacked on phones. */
.admin-kpi-3{grid-template-columns:repeat(3,1fr);}
@media(max-width:760px){ .admin-kpi-3{grid-template-columns:1fr;} }

/* Listing toolbar on phones: "Show prices in" and "Sort by" each get a full row
   (side by side they ran off the right edge). */
@media(max-width:640px){
  .sort-inline{display:grid !important;grid-template-columns:auto 1fr;gap:8px 10px;align-items:center;}
  .sort-inline select{width:100%;min-width:0;}
}

/* ── Phone header + slide-in menu (≤760px) ── */
.mobile-menu-btn{display:none;}
@media(max-width:760px){
  .topbar .nav,
  .topbar .lang-toggle,
  .topbar #listPropertyBtn{display:none !important;}
  .mobile-menu-btn{display:inline-flex;}
  .topbar .wrap{justify-content:space-between;}
}
.mobile-menu{position:fixed;inset:0;z-index:200;display:flex;justify-content:flex-end;background:rgba(14,30,32,.45);opacity:0;pointer-events:none;transition:opacity .2s ease;}
.mobile-menu.open{opacity:1;pointer-events:auto;}
.mobile-menu-panel{width:min(86vw,340px);height:100%;background:var(--surface);display:flex;flex-direction:column;gap:4px;overflow-y:auto;
  padding:calc(14px + env(safe-area-inset-top)) 16px calc(18px + env(safe-area-inset-bottom));transform:translateX(100%);transition:transform .22s ease;box-shadow:-12px 0 40px -20px rgba(0,0,0,.35);}
.mobile-menu.open .mobile-menu-panel{transform:none;}
.mobile-menu-head{display:flex;align-items:center;justify-content:space-between;padding:2px 4px 10px;font-family:var(--font-display);font-size:18px;color:var(--sea-deep);}
.mobile-menu-links{display:flex;flex-direction:column;gap:2px;}
.mobile-menu-links button{display:block;width:100%;text-align:left;padding:12px 12px;border-radius:10px;background:none;border:none;font:inherit;font-size:16px;font-weight:600;color:var(--ink);cursor:pointer;}
.mobile-menu-links button:active,.mobile-menu-links button.active{background:var(--sea-pale);color:var(--sea-deep);}
.mobile-menu-foot{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px;}
.mobile-menu-label{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);}
.mobile-menu-langs{display:flex;gap:8px;}
.mobile-menu-langs button{flex:1;padding:10px 0;border-radius:10px;border:1px solid var(--line);background:none;font:inherit;font-weight:700;cursor:pointer;color:var(--ink);}
.mobile-menu-langs button.active{background:var(--sea-deep);border-color:var(--sea-deep);color:#fff;}
body.mobile-menu-open{overflow:hidden;}
@media(prefers-reduced-motion:reduce){ .mobile-menu,.mobile-menu-panel{transition:none;} }

/* ── Filters as a full-screen sheet on phones/tablets (≤900px) ── */
.filters-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.filters-sheet-close,.filters-sheet-actions{display:none;}
@media(max-width:900px){
  .layout > .filters{display:none;}
  body.filters-sheet-open .layout > .filters{display:block;position:fixed;inset:0;z-index:150;margin:0;border:none;border-radius:0;max-height:none;
    overflow-y:auto;padding:calc(16px + env(safe-area-inset-top)) 18px calc(96px + env(safe-area-inset-bottom));}
  body.filters-sheet-open .filters-sheet-close{display:inline-flex;}
  body.filters-sheet-open .filters-sheet-actions{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:151;background:var(--surface);
    border-top:1px solid var(--line);padding:12px 16px calc(12px + env(safe-area-inset-bottom));}
  .filters-sheet-actions .btn{flex:1;}
  body.filters-sheet-open{overflow:hidden;}
}

/* ── Colour contrast (18 Oct): bright citrus stays the brand colour for fills
   and accents; anything that has to be READ on or in orange now passes WCAG AA. ── */
:root{ --citrus-deep:#A35A0B; /* was #B96F18 — small orange text on the light background now 4.7:1, white on it 5.2:1 */
       --citrus-mid:#B96F18; }
.btn-citrus,
.compare-bar .btn-citrus{color:var(--ink);}              /* dark ink on bright citrus: 5.75:1 (white was 2.6:1) */
.btn-citrus:hover{background:#D2801C;color:var(--ink);}
.new-listings-badge{color:var(--ink) !important;}
.plan-card.featured::before{color:var(--ink);}
::selection{color:var(--ink);}
.logo-accent{color:var(--citrus);}
.topbar .logo-accent{color:var(--citrus-mid);}             /* 22px bold = large text: 3.5:1 passes; bright citrus was 2.3:1 */
/* Prestige ribbons/banners: a richer amber so the white label stays readable. */
.ribbon-prestige{background:linear-gradient(90deg,#8F4D08,#B5620E,#8F4D08) !important;animation:none !important;}
.tier-banner-prestige,
.agency-featured-badge{background:linear-gradient(135deg,#8F4D08,#B5620E) !important;}

/* ── Cookie notice: one compact strip on phones (it used to cover a fifth of the screen) ── */
@media(max-width:640px){
  .cookie-notice{padding:12px 14px calc(12px + env(safe-area-inset-bottom)) !important;gap:10px !important;font-size:12px !important;line-height:1.45;}
  .cookie-notice-actions{width:100%;display:grid !important;grid-template-columns:1fr 1fr;gap:8px !important;}
  .cookie-notice-actions #cookieManageBtn{grid-column:1 / -1;order:3;border:none !important;padding:2px 0 !important;text-decoration:underline;font-size:12px;}
}
.card-prestige-cta{background:linear-gradient(90deg,#8F4D08,#B5620E) !important;}

/* Price ribbon: a dark halo behind each label so the line never cuts through the text. */
.ribbon-pin-label,.ribbon-pin-price{paint-order:stroke;stroke:var(--sea-deep);stroke-width:5px;stroke-linejoin:round;}
.ribbon-pin-label{font-size:11px;}

/* ── Agency portal: section tabs stay reachable; phone header much shorter ── */
.dash-quickjump{top:calc(68px + env(safe-area-inset-top));}   /* was top:0 — slid underneath the sticky site header */
@media(max-width:640px){
  .dash-quickjump{flex-wrap:nowrap;overflow-x:auto;gap:6px;padding:8px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .dash-quickjump::-webkit-scrollbar{display:none;}
  .dash-quickjump .admin-nav-item{flex:none;}
  #onboardingChecklistCard{padding:14px 16px;}
  .onboard-steps{gap:6px !important;}
  .onboard-step{min-width:100% !important;padding:9px 12px !important;}
  .onboard-step .hint{display:none;}
  .dash-top{gap:12px;}
  .dash-top-actions{align-items:stretch !important;width:100%;}
  .dash-top-actions .hint{text-align:left !important;}
  .dash-top-buttons{display:grid !important;grid-template-columns:1fr 1fr;gap:6px !important;}
  .dash-top-buttons #planSwitcher{grid-column:1 / -1;}
}
/* Remaining contrast fixes (axe-core): every small text now ≥ 4.5:1. */
.tag-new{background:#B8462F;}                       /* white on coral was 3.6:1 → 5.3:1 */
.plan-price s{color:var(--ink-soft);}               /* struck-out old price */
.plan-feat li.off{color:#6B7772;text-decoration:line-through;text-decoration-color:rgba(107,119,114,.5);} /* "not included" stays clearly secondary but readable */
.biz-plan li.off{opacity:1;color:#6B7772;text-decoration:line-through;text-decoration-color:rgba(107,119,114,.5);}
.disclaimer{color:#9CC8C4;}

/* ── Guides & news: card grid; full text opens in place ── */
.content-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;}
.content-card{display:grid;grid-template-columns:200px minmax(0,1fr);gap:16px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:14px;align-items:start;}
.content-card-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;background:var(--sea-pale);}
.content-card-body{display:flex;flex-direction:column;gap:6px;min-width:0;}
.content-card-meta{font-family:var(--font-mono);font-size:11.5px;color:var(--ink-soft);}
.content-card h3{font-family:var(--font-display);font-size:17px;line-height:1.3;margin:0;text-wrap:balance;}
.content-card-excerpt{font-size:14px;color:var(--ink-soft);line-height:1.55;margin:0;}
.content-card-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px;}
.content-card-link{color:var(--sea-deep);}
.content-card.expanded{grid-column:1 / -1;grid-template-columns:260px minmax(0,1fr);}
.content-card{scroll-margin-top:96px;}
.content-card-full{font-size:15px;line-height:1.7;max-width:72ch;}
@media(max-width:860px){ .content-grid{grid-template-columns:1fr;} }
@media(max-width:560px){ .content-card,.content-card.expanded{grid-template-columns:1fr;} .content-card-img{aspect-ratio:16/9;} }
.agency-logo{overflow:hidden;flex:none;}
.agency-logo img{width:100%;height:100%;object-fit:contain;background:#fff;}
.tool-result:empty{display:none;}
.services-cta{margin-top:22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;background:var(--sea-pale);border:1px solid #C7DEDA;border-radius:var(--radius);padding:16px 18px;font-size:14.5px;}
.nowrap{white-space:nowrap;}
.card-agent-line{flex-wrap:wrap;row-gap:0;column-gap:7px;}
.card-agent-line .agent-name{white-space:nowrap;}
.card-agent-line .agent-phone{white-space:nowrap;}
.card-agent-line .agent-phone::before{content:"· ";}
/* The 46px avatar further up is for the property popup; keep card avatars small. */
.card-agent-line .agent-avatar{width:22px;height:22px;font-size:9.5px;font-family:inherit;}
.card-prestige .card-agent-line .agent-avatar{width:26px;height:26px;font-size:10.5px;}

/* Stream F (agency portal): unpaid-plan banner, "waiting for you" strip, Co-Broker prices on For business */
.portal-bill-banner{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;margin-bottom:16px;}
.portal-bill-banner .portal-bill-actions{display:flex;align-items:center;gap:8px;margin-left:auto;}
@media (max-width:600px){ .portal-bill-banner .portal-bill-actions{margin-left:30px;width:100%;} .portal-bill-banner .portal-bill-actions .btn{width:100%;} }
.portal-attention{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 16px;padding:10px 14px;border:1px solid var(--line);border-left:3px solid var(--citrus);border-radius:10px;background:var(--surface);font-size:13px;}
.portal-attention .portal-attn-item{border:1px solid var(--line);background:var(--bg);border-radius:999px;padding:4px 11px;font-size:12.5px;font-weight:600;color:var(--sea-deep);cursor:pointer;}
.portal-attention .portal-attn-item:hover{border-color:var(--sea);}
.biz-cobroke{margin-top:22px;border:1px solid var(--line);border-radius:14px;padding:18px 20px;background:var(--surface);}
.biz-cobroke-head{display:flex;gap:16px;justify-content:space-between;align-items:flex-start;flex-wrap:wrap;margin-bottom:12px;}
.biz-cobroke-head h3{font-family:var(--font-display);font-size:17px;margin:0 0 4px;}
.biz-cobroke-head .hint{max-width:560px;margin:0;}
.biz-cobroke-price{font-family:var(--font-mono);font-size:22px;font-weight:600;color:var(--sea-deep);text-align:right;}
.biz-cobroke-price span{display:block;font-family:inherit;font-size:12px;font-weight:500;color:var(--ink-soft);}
@media (max-width:600px){ .biz-cobroke-price{text-align:left;} }
.biz-cobroke-table td,.biz-cobroke-table th{text-align:left;}