/* =========================================================
   SBN — Design System
   A property marketplace for Delhi NCR
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

:root{
  /* SBN brand theme — blue + green, sampled from the logo */
  --ink:       #0F2744;
  --ink-70:    rgba(15,39,68,0.7);
  --ink-45:    rgba(15,39,68,0.45);
  --paper:     #F3F7FB;
  --paper-dim: #E7F0F7;
  --card:      #FFFFFF;
  --brick:     #0A6FE8;   /* brand blue — primary actions */
  --brick-dark:#0857BA;
  --gold:      #1E9E35;   /* brand green — accents, badges */
  --sage:      #167A29;
  --line:      rgba(15,39,68,0.14);
  --line-soft: rgba(15,39,68,0.08);
  --shadow:    0 10px 30px rgba(15,39,68,0.12);

  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

  --radius-sm: 4px;
  --radius-md: 8px;
  --container: 1160px;
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin:0;
  font-family: var(--font-body);
  background: var(--paper);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }
h1,h2,h3,h4{
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.14;
  margin: 0 0 .5em;
  color: var(--ink);
}
p{ margin: 0 0 1em; max-width: 62ch; }
:focus-visible{ outline: 2px solid var(--brick); outline-offset: 2px; }

.container{
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 24px;
}
.visually-hidden{
  position:absolute; width:1px;height:1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap;
}

/* ---------- Skip link ---------- */
.skip-link{
  position:absolute; left:-999px; top:0; background:var(--ink); color:#fff;
  padding:10px 16px; z-index:1000; border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus{ left:0; }

/* ---------- Top utility bar ---------- */
.topbar{
  background: var(--ink); color: rgba(247,243,234,0.82);
  font-size: .8rem;
}
.topbar .container{
  display:flex; justify-content:space-between; align-items:center;
  padding-top:8px; padding-bottom:8px; gap: 16px; flex-wrap: wrap;
}
.topbar a{ color: rgba(247,243,234,0.82); }
.topbar a:hover{ color:#fff; }
.topbar__links{ display:flex; gap:18px; }

/* ---------- Header / nav ---------- */
.site-header{
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  position: sticky; top:0; z-index: 100;
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  padding-top:16px; padding-bottom:16px; gap: 24px;
}
.logo{
  font-family: var(--font-display); font-weight:700; font-size:1.5rem;
  letter-spacing: -0.01em; display:flex; align-items:baseline; gap:2px;
}
.logo span{ color: var(--brick); }
.logo small{
  display:block; font-family: var(--font-body); font-weight:500;
  font-size: .62rem; color: var(--ink-45); letter-spacing:.02em;
}

/* Image-based brand logo (header / footer / admin / auth) */
.brand-logo{ display:flex; align-items:center; gap:10px; }
.brand-logo img.brand-logo__mark{ height:34px; width:auto; display:block; }
.brand-logo__tagline{
  display:block; font-family: var(--font-body); font-weight:500;
  font-size: .62rem; color: var(--ink-45); letter-spacing:.02em; margin-top:2px;
}
.brand-logo--footer img.brand-logo__mark{ height:30px; }
.brand-logo--footer .brand-logo__word{
  font-family: var(--font-display); font-weight:700; font-size:1.3rem; color:#fff; letter-spacing:-0.01em;
}
.brand-logo--admin img.brand-logo__mark{ height:28px; }
.brand-logo--admin .brand-logo__word{ font-family: var(--font-display); font-weight:700; font-size:1.15rem; color:#fff; }

.main-nav{ display:flex; gap: 28px; }
.main-nav a{
  font-size: .93rem; font-weight:500; color: var(--ink-70);
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.main-nav a:hover, .main-nav a[aria-current="page"]{
  color: var(--ink); border-bottom-color: var(--brick);
}

.header-actions{ display:flex; align-items:center; gap:12px; }
.nav-toggle{
  display:none; background:none; border:1px solid var(--line); border-radius: var(--radius-sm);
  width:40px; height:40px; align-items:center; justify-content:center;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
  content:''; display:block; width:18px; height:2px; background:var(--ink); position:relative;
}
.nav-toggle span::before{ position:absolute; top:-6px; }
.nav-toggle span::after{ position:absolute; top:6px; }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding: 12px 22px; border-radius: var(--radius-sm); font-weight:600; font-size:.92rem;
  border: 1px solid transparent; transition: transform .12s ease, background .15s ease;
  white-space: nowrap;
}
.btn:active{ transform: translateY(1px); }
.btn-primary{ background: var(--brick); color:#fff; }
.btn-primary:hover{ background: var(--brick-dark); }
.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover{ border-color: var(--ink); }
.btn-outline-light{ background: transparent; color:#fff; border-color: rgba(255,255,255,.5); }
.btn-outline-light:hover{ border-color: #fff; }
.btn-sm{ padding: 8px 14px; font-size: .82rem; }
.btn-block{ width:100%; }

/* ---------- Hero ---------- */
.hero{
  position: relative;
  overflow:hidden;
  background: linear-gradient(180deg, #123A66 0%, #0B2744 100%);
  color: #fff;
  padding: 64px 0 0;
}
.hero .container{
  display:grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items:end;
}
.hero__eyebrow-free{ /* intentionally no eyebrow label per design guidance */ }
.hero__kicker{
  font-size: .95rem; color: var(--gold); font-weight:600; margin-bottom: 14px;
}
.hero h1{
  color:#fff; font-size: clamp(2.2rem, 4vw, 3.4rem); max-width: 14ch; margin-bottom: .35em;
}
.hero p.lede{ color: rgba(247,243,234,0.78); font-size:1.08rem; max-width: 46ch; }
.hero__stats{
  display:flex; gap: 34px; margin-top: 28px; padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.hero__stats div strong{
  display:block; font-family: var(--font-display); font-size: 1.7rem; color:#fff;
}
.hero__stats div span{ font-size: .8rem; color: rgba(247,243,234,0.6); }

.skyline{ width:100%; height: auto; }

/* Search card overlapping hero */
.search-card{
  background: var(--card); color: var(--ink);
  border-radius: var(--radius-md);
  padding: 22px; box-shadow: var(--shadow);
  transform: translateY(38px);
  margin-top: 40px;
}
.search-card__tabs{
  display:flex; gap: 4px; margin-bottom: 16px; border-bottom: 1px solid var(--line-soft);
}
.search-card__tabs button{
  background:none; border:none; padding: 8px 14px; font-weight:600; font-size:.88rem;
  color: var(--ink-45); border-bottom: 2px solid transparent; margin-bottom:-1px;
}
.search-card__tabs button.is-active{ color: var(--ink); border-bottom-color: var(--brick); }
.search-card__row{ display:grid; grid-template-columns: 1.4fr 1fr 1fr auto; gap: 10px; }
.field{ display:flex; flex-direction:column; gap:4px; }
.field label{ font-size:.72rem; font-weight:600; color: var(--ink-45); }
.field select, .field input{
  border:1px solid var(--line); border-radius: var(--radius-sm); padding: 10px 12px;
  font-size:.9rem; font-family: inherit; background:#fff; color: var(--ink);
}
.search-card .btn-primary{ align-self:end; }
.hero-spacer{ height: 56px; }

/* ---------- Category pills ---------- */
.categories{ padding: 32px 0 8px; }
.category-grid{
  display:grid; grid-template-columns: repeat(7, 1fr); gap: 14px;
}
.category-card{
  background:var(--card); border:1px solid var(--line-soft); border-radius: var(--radius-md);
  padding: 16px 10px; text-align:center; transition: border-color .15s;
}
.category-card:hover{ border-color: var(--brick); }
.category-card .ic{ font-size:1.5rem; display:block; margin-bottom:8px; }
.category-card span{ font-size:.8rem; font-weight:600; }

/* ---------- Section shell ---------- */
.section{ padding: 64px 0; }
.section-alt{ background: var(--paper-dim); }
.section__head{
  display:flex; justify-content:space-between; align-items:flex-end; gap:20px;
  margin-bottom: 30px;
}
.section__head h2{ font-size: clamp(1.6rem, 3vw, 2.1rem); margin-bottom:.2em; }
.section__head p{ color: var(--ink-70); margin:0; }

/* ---------- Property cards ---------- */
.property-grid{
  display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px;
}
.property-card{
  background: var(--card); border:1px solid var(--line-soft); border-radius: var(--radius-md);
  overflow:hidden; transition: box-shadow .18s, transform .18s;
}
.property-card:hover{ box-shadow: var(--shadow); transform: translateY(-3px); }
.property-card__media{ position:relative; aspect-ratio: 4/3; overflow:hidden; }
.property-card__media svg{ width:100%; height:100%; }
.badge{
  position:absolute; top:10px; left:10px; background: var(--gold); color:#1C1404;
  font-size:.68rem; font-weight:700; padding: 4px 9px; border-radius: 3px; letter-spacing:.02em;
}
.badge-verified{ background: var(--sage); color:#fff; }
.property-card__save{
  position:absolute; top:10px; right:10px; width:32px; height:32px; border-radius:50%;
  background: rgba(255,255,255,.92); border:none; display:flex; align-items:center; justify-content:center;
}
.property-card__body{ padding: 16px; }
.property-card__price{ font-family: var(--font-display); font-size:1.25rem; font-weight:600; }
.property-card__price small{ font-family: var(--font-body); font-weight:500; font-size:.7rem; color: var(--ink-45); }
.property-card__title{ font-size:.95rem; font-weight:600; margin: 6px 0 2px; }
.property-card__loc{ font-size:.82rem; color: var(--ink-70); margin-bottom:10px; }
.property-card__meta{
  display:flex; gap:14px; font-size:.78rem; color: var(--ink-70);
  border-top:1px solid var(--line-soft); padding-top:10px;
}

/* ---------- How it works ---------- */
.steps{ display:grid; grid-template-columns: repeat(4,1fr); gap:24px; }
.step{ position:relative; padding-top: 6px; }
.step__num{
  font-family: var(--font-display); font-size:2.1rem; color: var(--brick); font-weight:600;
  display:block; margin-bottom:8px;
}
.step h3{ font-size:1.05rem; margin-bottom:6px; }
.step p{ font-size:.9rem; color: var(--ink-70); }

/* ---------- Locations ---------- */
.location-grid{ display:grid; grid-template-columns: repeat(6,1fr); gap:14px; }
.location-card{
  aspect-ratio: 1/1; border-radius: var(--radius-md); overflow:hidden; position:relative;
  display:flex; align-items:flex-end; padding:12px; color:#fff; font-weight:600; font-size:.88rem;
}
.location-card::before{
  content:''; position:absolute; inset:0; background: linear-gradient(160deg, var(--sage), var(--ink));
  opacity:.92;
}
.location-card span{ position:relative; z-index:1; }
.location-card small{ position:relative; z-index:1; display:block; font-weight:400; font-size:.72rem; opacity:.8; }

/* ---------- Testimonials ---------- */
.testimonial-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap: 22px; }
.testimonial{
  background: var(--card); border:1px solid var(--line-soft); border-radius: var(--radius-md); padding:22px;
}
.testimonial p{ font-size:.95rem; color: var(--ink-70); margin-bottom:16px; }
.testimonial__who{ display:flex; align-items:center; gap:10px; }
.avatar{
  width:38px; height:38px; border-radius:50%; background: var(--paper-dim); color:var(--brick);
  display:flex; align-items:center; justify-content:center; font-weight:700; font-family: var(--font-display);
}
.testimonial__who strong{ display:block; font-size:.88rem; }
.testimonial__who span{ font-size:.76rem; color: var(--ink-45); }

/* ---------- CTA band ---------- */
.cta-band{
  background: var(--ink); color:#fff; border-radius: var(--radius-md);
  padding: 40px; display:flex; justify-content:space-between; align-items:center; gap:24px;
}
.cta-band h2{ color:#fff; margin-bottom:.2em; font-size:1.6rem; }
.cta-band p{ color: rgba(247,243,234,.72); margin:0; }
.cta-band__actions{ display:flex; gap:12px; flex-shrink:0; }

/* ---------- Blog teasers ---------- */
.blog-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.blog-card{ background:var(--card); border:1px solid var(--line-soft); border-radius: var(--radius-md); overflow:hidden; }
.blog-card__media{ aspect-ratio: 16/9; }
.blog-card__body{ padding:16px; }
.blog-card time{ font-size:.74rem; color: var(--ink-45); }
.blog-card h3{ font-size:1rem; margin: 6px 0; }
.blog-card p{ font-size:.86rem; color: var(--ink-70); margin:0; }

/* ---------- Footer ---------- */
.site-footer{ background: var(--ink); color: rgba(247,243,234,.75); padding: 56px 0 24px; }
.footer-grid{
  display:grid; grid-template-columns: 1.4fr repeat(4,1fr); gap: 30px; padding-bottom: 36px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.footer-grid h4{ color:#fff; font-size:.82rem; font-family: var(--font-body); font-weight:700; margin-bottom:14px; letter-spacing:.01em; }
.footer-grid li{ margin-bottom:9px; font-size:.87rem; }
.footer-grid a:hover{ color:#fff; }
.footer-brand p{ font-size:.87rem; margin: 12px 0 16px; }
.footer-bottom{
  display:flex; justify-content:space-between; padding-top:20px; font-size:.8rem; flex-wrap:wrap; gap:10px;
}
.footer-bottom a{ color: rgba(247,243,234,.6); }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs{ padding: 14px 0; font-size:.82rem; color: var(--ink-45); }
.breadcrumbs a:hover{ color: var(--brick); }
.breadcrumbs span[aria-hidden]{ margin:0 6px; }

/* ---------- Page header (inner pages) ---------- */
.page-header{ background: var(--paper-dim); padding: 30px 0 34px; border-bottom:1px solid var(--line); }
.page-header h1{ font-size: clamp(1.7rem,3vw,2.3rem); margin-bottom:.2em; }
.page-header p{ color: var(--ink-70); margin:0; }

/* ---------- Listing / search layout ---------- */
.listing-layout{ display:grid; grid-template-columns: 280px 1fr; gap: 28px; align-items:start; }
.filters{
  background: var(--card); border:1px solid var(--line-soft); border-radius: var(--radius-md); padding: 20px;
  position: sticky; top: 90px;
}
.filters h2{ font-size:1.05rem; margin-bottom:16px; }
.filter-group{ margin-bottom: 20px; padding-bottom:18px; border-bottom:1px solid var(--line-soft); }
.filter-group:last-child{ border-bottom:none; }
.filter-group h3{ font-family: var(--font-body); font-size:.82rem; font-weight:700; margin-bottom:10px; text-transform: none; }
.filter-chip-row{ display:flex; flex-wrap:wrap; gap:8px; }
.chip{
  border:1px solid var(--line); border-radius: 20px; padding:6px 13px; font-size:.8rem; background:#fff;
}
.chip.is-active{ background: var(--ink); color:#fff; border-color: var(--ink); }
.range-row{ display:flex; gap:8px; align-items:center; }
.range-row input{ width:100%; padding:8px 10px; border:1px solid var(--line); border-radius: var(--radius-sm); }
.check-row{ display:flex; align-items:center; gap:8px; font-size:.86rem; margin-bottom:8px; }

.results-bar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; flex-wrap:wrap; gap:10px; }
.results-bar h1{ font-size:1.25rem; margin:0; }
.results-bar select{ padding:8px 12px; border:1px solid var(--line); border-radius: var(--radius-sm); background:#fff; }
.listing-grid{ display:grid; grid-template-columns: repeat(2,1fr); gap:20px; }
.pagination{ display:flex; justify-content:center; gap:8px; margin-top:32px; }
.pagination a{
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border:1px solid var(--line); border-radius: var(--radius-sm); font-size:.85rem;
}
.pagination a.is-active{ background: var(--ink); color:#fff; border-color: var(--ink); }

/* ---------- Property detail page ---------- */
.detail-layout{ display:grid; grid-template-columns: 1fr 340px; gap: 34px; align-items:start; }
.gallery{ display:grid; grid-template-columns: 2fr 1fr; gap:8px; border-radius: var(--radius-md); overflow:hidden; margin-bottom:24px; }
.gallery__main{ aspect-ratio: 4/3; }
.gallery__side{ display:grid; grid-template-rows: 1fr 1fr; gap:8px; }
.gallery svg{ width:100%; height:100%; }
.detail-price{ display:flex; align-items:baseline; gap:10px; margin-bottom:6px; }
.detail-price strong{ font-family: var(--font-display); font-size:2rem; }
.detail-loc{ color: var(--ink-70); margin-bottom:18px; }
.spec-grid{
  display:grid; grid-template-columns: repeat(4,1fr); gap:16px; background: var(--card);
  border:1px solid var(--line-soft); border-radius: var(--radius-md); padding:20px; margin-bottom:28px;
}
.spec{ text-align:center; }
.spec strong{ display:block; font-family: var(--font-display); font-size:1.3rem; }
.spec span{ font-size:.78rem; color: var(--ink-45); }
.detail-section{ margin-bottom: 30px; }
.detail-section h2{ font-size:1.2rem; margin-bottom:12px; }
.amenity-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:12px; }
.amenity{ display:flex; align-items:center; gap:8px; font-size:.9rem; padding: 8px 0; }
.map-embed{
  aspect-ratio: 16/7; background: var(--paper-dim); border-radius: var(--radius-md);
  display:flex; align-items:center; justify-content:center; color: var(--ink-45); font-size:.9rem;
  border:1px solid var(--line-soft);
}
.owner-card{
  background: var(--card); border:1px solid var(--line-soft); border-radius: var(--radius-md);
  padding: 22px; position: sticky; top: 90px;
}
.owner-card__who{ display:flex; gap:12px; align-items:center; margin-bottom:16px; }
.owner-card__who strong{ display:block; }
.owner-card__who span{ font-size:.8rem; color: var(--ink-45); }
.owner-card .btn{ margin-bottom:10px; }
.owner-card__form input, .owner-card__form textarea{
  width:100%; padding:10px 12px; border:1px solid var(--line); border-radius: var(--radius-sm);
  font-family:inherit; font-size:.88rem; margin-bottom:10px;
}
.trust-note{ font-size:.76rem; color: var(--ink-45); text-align:center; margin-top:10px; }

.similar-strip{ margin-top: 50px; }

/* ---------- Forms (login / contact / post-property) ---------- */
.auth-shell{
  max-width: 420px; margin: 56px auto; background: var(--card); border:1px solid var(--line-soft);
  border-radius: var(--radius-md); padding: 34px; box-shadow: var(--shadow);
}
.auth-tabs{ display:flex; gap:4px; margin-bottom:22px; border-bottom:1px solid var(--line-soft); }
.auth-tabs button{
  flex:1; background:none; border:none; padding:10px; font-weight:600; color:var(--ink-45);
  border-bottom:2px solid transparent;
}
.auth-tabs button.is-active{ color:var(--ink); border-bottom-color: var(--brick); }
.form-group{ margin-bottom: 16px; }
.form-group label{ display:block; font-size:.82rem; font-weight:600; margin-bottom:6px; }
.form-group input, .form-group select, .form-group textarea{
  width:100%; padding:11px 12px; border:1px solid var(--line); border-radius: var(--radius-sm);
  font-family:inherit; font-size:.92rem;
}
.form-row{ display:grid; grid-template-columns: 1fr 1fr; gap:12px; }
.form-foot{ text-align:center; font-size:.86rem; margin-top: 14px; color: var(--ink-70); }
.form-foot a{ color: var(--brick); font-weight:600; }

/* ---------- Step form (post property) ---------- */
.step-shell{ display:grid; grid-template-columns: 260px 1fr; gap: 34px; align-items:start; }
.step-nav{ list-style:none; }
.step-nav li{
  display:flex; gap:12px; padding: 12px 0; border-bottom:1px solid var(--line-soft); font-size:.88rem; color: var(--ink-45);
}
.step-nav li.is-done{ color: var(--sage); }
.step-nav li.is-current{ color: var(--ink); font-weight:700; }
.step-nav .n{
  width:24px; height:24px; border-radius:50%; border:1px solid var(--line); flex-shrink:0;
  display:flex; align-items:center; justify-content:center; font-size:.72rem; font-family: var(--font-display);
}
.step-nav li.is-current .n{ background: var(--brick); border-color: var(--brick); color:#fff; }
.step-nav li.is-done .n{ background: var(--sage); border-color: var(--sage); color:#fff; }
.step-panel{ background: var(--card); border:1px solid var(--line-soft); border-radius: var(--radius-md); padding: 30px; }
.step-panel h2{ font-size:1.3rem; margin-bottom:6px; }
.step-panel > p{ color: var(--ink-70); margin-bottom: 22px; }
.purpose-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap:14px; }
.purpose-card{
  border:1px solid var(--line); border-radius: var(--radius-md); padding:20px 12px; text-align:center; background:#fff;
}
.purpose-card.is-selected{ border-color: var(--brick); background: #E8F2FE; }
.purpose-card .ic{ font-size:1.6rem; display:block; margin-bottom:8px; }
.step-actions{ display:flex; justify-content:space-between; margin-top: 26px; }

/* ---------- About / Contact ---------- */
.value-grid{ display:grid; grid-template-columns: repeat(3,1fr); gap:22px; }
.value-card{ background: var(--card); border:1px solid var(--line-soft); border-radius: var(--radius-md); padding:22px; }
.value-card .ic{ font-size:1.5rem; display:block; margin-bottom:10px; }
.contact-layout{ display:grid; grid-template-columns: 1fr 1fr; gap:36px; }
.contact-info li{ display:flex; gap:12px; padding:14px 0; border-bottom:1px solid var(--line-soft); font-size:.92rem; }
.contact-info strong{ display:block; }

/* ---------- Responsive ---------- */
@media (max-width: 980px){
  .hero .container{ grid-template-columns: 1fr; }
  .search-card__row{ grid-template-columns: 1fr 1fr; }
  .category-grid{ grid-template-columns: repeat(4,1fr); }
  .property-grid, .steps, .testimonial-grid, .blog-grid, .value-grid{ grid-template-columns: repeat(2,1fr); }
  .location-grid{ grid-template-columns: repeat(3,1fr); }
  .listing-layout, .detail-layout, .step-shell, .contact-layout{ grid-template-columns: 1fr; }
  .filters, .owner-card{ position: static; }
  .listing-grid{ grid-template-columns: 1fr; }
  .amenity-grid{ grid-template-columns: repeat(2,1fr); }
  .spec-grid{ grid-template-columns: repeat(2,1fr); }
  .purpose-grid{ grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 700px){
  .main-nav{ display:none; }
  .nav-toggle{ display:flex; }
  .category-grid{ grid-template-columns: repeat(3,1fr); }
  .property-grid, .steps, .testimonial-grid, .blog-grid, .value-grid, .location-grid{ grid-template-columns: repeat(2,1fr); }
  .cta-band{ flex-direction:column; text-align:center; }
  .footer-grid{ grid-template-columns: repeat(2,1fr); }
  .search-card__row{ grid-template-columns: 1fr; }
}

/* =========================================================
   Additions for the PHP application (dashboards, admin, alerts)
   ========================================================= */
.alert{ padding:12px 16px; border-radius: var(--radius-sm); font-size:.88rem; margin-bottom:18px; }
.alert-success{ background:#E4F0E7; color:#1F4A2E; border:1px solid #B9DAC2; }
.alert-error{ background:#FBE7E1; color:#7E3316; border:1px solid #F1C1AE; }
.alert-info{ background:#E7F0F7; color:var(--ink-70); border:1px solid var(--line); }
.field-error{ color:var(--brick-dark); font-size:.78rem; margin-top:4px; display:block; }

/* Dashboard */
.dash-shell{ display:grid; grid-template-columns: 240px 1fr; gap:28px; align-items:start; }
.dash-nav{ background:var(--card); border:1px solid var(--line-soft); border-radius: var(--radius-md); padding:10px; position:sticky; top:90px; }
.dash-nav a{ display:block; padding:10px 12px; border-radius: var(--radius-sm); font-size:.9rem; font-weight:500; color:var(--ink-70); }
.dash-nav a:hover, .dash-nav a.is-active{ background: var(--paper-dim); color:var(--ink); }
.dash-stats{ display:grid; grid-template-columns: repeat(4,1fr); gap:16px; margin-bottom:26px; }
.dash-stat{ background:var(--card); border:1px solid var(--line-soft); border-radius: var(--radius-md); padding:18px; }
.dash-stat strong{ display:block; font-family: var(--font-display); font-size:1.6rem; }
.dash-stat span{ font-size:.8rem; color:var(--ink-45); }
.table-shell{ background:var(--card); border:1px solid var(--line-soft); border-radius: var(--radius-md); overflow:hidden; }
table.data-table{ width:100%; border-collapse:collapse; font-size:.88rem; }
table.data-table th{ text-align:left; background:var(--paper-dim); padding:12px 14px; font-size:.76rem; text-transform:uppercase; letter-spacing:.03em; color:var(--ink-45); }
table.data-table td{ padding:12px 14px; border-top:1px solid var(--line-soft); vertical-align:middle; }
table.data-table tr:hover td{ background: var(--paper-dim); }
.pill{ display:inline-block; padding:3px 10px; border-radius:20px; font-size:.72rem; font-weight:600; }
.pill-pending{ background:#FBF1DD; color:#8A5A00; }
.pill-approved{ background:#E4F0E7; color:#1F4A2E; }
.pill-rejected{ background:#FBE7E1; color:#7E3316; }
.pill-new{ background:#EAF0FA; color:#1E4E8C; }
.pill-closed{ background:var(--paper-dim); color:var(--ink-45); }
.inline-form{ display:inline; }
.action-row{ display:flex; gap:6px; }
.icon-btn{ border:1px solid var(--line); background:#fff; padding:5px 10px; border-radius: var(--radius-sm); font-size:.76rem; }
.icon-btn.danger{ border-color:#F1C1AE; color:var(--brick-dark); }
.icon-btn.confirm{ border-color:#B9DAC2; color:#1F4A2E; }
.empty-state{ text-align:center; padding:50px 20px; color: var(--ink-45); }

/* Admin shell reuses dash-shell with a dark side nav */
.admin-shell{ display:grid; grid-template-columns: 230px 1fr; min-height:100vh; }
.admin-side{ background:var(--ink); color:rgba(247,243,234,.8); padding:22px 16px; }
.admin-side .logo{ color:#fff; margin-bottom:26px; }
.admin-side a{ display:block; padding:10px 12px; border-radius: var(--radius-sm); font-size:.88rem; margin-bottom:4px; }
.admin-side a:hover, .admin-side a.is-active{ background: rgba(255,255,255,.08); color:#fff; }
.admin-main{ padding: 28px 34px; background: var(--paper); }
.admin-topbar{ display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; }

/* =========================================================
   Free Rent Agreement Generator module
   (uses the SBN tokens above: --brick = brand blue, --gold = brand green,
    --sage = darker green. Class names are namespaced to avoid colliding
    with the marketplace's .hero / .steps / .step rules.)
   ========================================================= */
.btn-green{ background: var(--sage); color:#fff; }
.btn-green:hover{ background:#10601F; }

/* Landing hero */
.ra-hero{ position:relative; overflow:hidden; background: linear-gradient(180deg, #123A66 0%, #0B2744 100%); color:#fff; padding:60px 0 72px; }
.ra-hero .container{ display:grid; grid-template-columns:1.1fr .9fr; gap:40px; align-items:center; }
.ra-hero__kicker{ font-size:.9rem; color:#7FE08F; font-weight:600; margin-bottom:14px; letter-spacing:.02em; }
.ra-hero h1{ color:#fff; font-size: clamp(2rem, 3.6vw, 3rem); max-width:17ch; margin-bottom:.4em; }
.ra-hero p.lede{ color: rgba(255,255,255,0.8); font-size:1.05rem; max-width:48ch; }
.ra-hero__actions{ display:flex; gap:14px; margin-top:22px; flex-wrap:wrap; }
.ra-hero__stats{ display:flex; gap:30px; margin-top:28px; padding-top:22px; border-top:1px solid rgba(255,255,255,0.16); }
.ra-hero__stats strong{ display:block; font-family: var(--font-display); font-size:1.5rem; color:#fff; }
.ra-hero__stats span{ font-size:.78rem; color: rgba(255,255,255,0.62); }
.ra-hero__doc{ background:#fff; color:var(--ink); border-radius: var(--radius-md); box-shadow: var(--shadow); padding:22px; transform: rotate(1.2deg); }
.ra-hero__doc h3{ font-size:1rem; margin-bottom:10px; text-align:center; }
.ra-hero__doc .ln{ height:8px; background: var(--paper-dim); border-radius:2px; margin-bottom:8px; }
.ra-hero__doc .ln.short{ width:60%; }
.ra-hero__doc .sig{ display:flex; justify-content:space-between; margin-top:18px; font-size:.7rem; color:var(--ink-45); }

/* Step strip */
.ra-strip{ background: var(--paper-dim); border-bottom:1px solid var(--line); padding:14px 0; }
.ra-strip ol{ display:flex; justify-content:center; gap:6px; flex-wrap:wrap; align-items:center; margin:0; padding:0; list-style:none; }
.ra-strip li{ display:flex; align-items:center; gap:8px; font-size:.82rem; color: var(--ink-45); font-weight:600; }
.ra-strip li .n{ width:22px; height:22px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:.72rem; font-family: var(--font-display); background:#fff; }
.ra-strip li.is-current{ color: var(--ink); }
.ra-strip li.is-current .n{ background: var(--brick); border-color: var(--brick); color:#fff; }
.ra-strip li.is-done .n{ background: var(--gold); border-color: var(--gold); color:#fff; }
.ra-strip li.sep{ width:18px; height:1px; background: var(--line); }
.ra-strip li[data-ra-step-nav-item]{ cursor:pointer; }

/* Generator layout: form + live preview */
.gen-layout{ display:grid; grid-template-columns:1.05fr .95fr; gap:28px; align-items:start; padding:30px 0 60px; }
.gen-form{ background: var(--card); border:1px solid var(--line-soft); border-radius: var(--radius-md); padding:28px; }
.gen-form h2{ font-size:1.3rem; margin-bottom:4px; }
.gen-form .step-sub{ color: var(--ink-70); margin-bottom:22px; font-size:.92rem; }
.gen-form .form-group .hint{ font-size:.76rem; color: var(--ink-45); margin-top:4px; display:block; }
.form-row-3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }
.prefill-note{ background:#E8F2FE; border:1px solid #BCD8F8; color:var(--ink-70); border-radius: var(--radius-sm); padding:10px 14px; font-size:.84rem; margin-bottom:18px; }

.preview-pane{ position: sticky; top:90px; }
.preview-doc{
  background:#fff; border:1px solid var(--line-soft); border-radius: var(--radius-md); box-shadow: var(--shadow);
  padding:28px 30px; max-height:76vh; overflow-y:auto; font-family: var(--font-display); font-size:.86rem; line-height:1.65;
}
.preview-doc h3{ text-align:center; font-size:1.05rem; margin-bottom:4px; text-transform:uppercase; letter-spacing:.02em; }
.preview-doc .ref{ text-align:center; font-family: var(--font-body); font-size:.72rem; color: var(--ink-45); margin-bottom:16px; }
.preview-doc h4{ font-family: var(--font-body); font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color: var(--brick); border-bottom:1px solid var(--line-soft); padding-bottom:4px; margin:18px 0 8px; }
.preview-doc dl{ display:grid; grid-template-columns:38% 62%; gap:4px 8px; margin:0 0 10px; font-family: var(--font-body); font-size:.82rem; }
.preview-doc dt{ font-weight:600; color: var(--ink-70); }
.preview-doc dd{ margin:0; }
.preview-doc .muted{ color: var(--ink-45); font-style:italic; }

/* Cards, steps, states, FAQ */
.type-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px; }
.type-card{ background: var(--card); border:1px solid var(--line-soft); border-radius: var(--radius-md); padding:24px; transition: box-shadow .15s, transform .15s; }
.type-card:hover{ box-shadow: var(--shadow); transform: translateY(-3px); }
.type-card .ic{ font-size:1.6rem; display:block; margin-bottom:12px; }
.type-card h3{ font-size:1.05rem; margin-bottom:8px; }
.type-card p{ font-size:.88rem; color: var(--ink-70); margin-bottom:14px; }
.ra-steps{ display:grid; grid-template-columns:repeat(5,1fr); gap:20px; }
.ra-step__num{ font-family: var(--font-display); font-size:1.9rem; color: var(--brick); font-weight:600; display:block; margin-bottom:8px; }
.ra-step h3{ font-size:.98rem; margin-bottom:6px; }
.ra-step p{ font-size:.86rem; color: var(--ink-70); }
.state-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.state-card{ background: var(--card); border:1px solid var(--line-soft); border-radius: var(--radius-md); padding:18px; }
.state-card h3{ font-size:1rem; margin-bottom:6px; display:flex; align-items:center; justify-content:space-between; gap:8px; }
.state-card .tag{ font-size:.66rem; font-weight:700; text-transform:uppercase; letter-spacing:.02em; background: var(--paper-dim); color: var(--ink-45); padding:2px 8px; border-radius:20px; }
.state-card p{ font-size:.82rem; color: var(--ink-70); margin-bottom:6px; }
.state-search{ max-width:420px; margin:0 auto 30px; }
.state-search input{ width:100%; padding:12px 14px; border:1px solid var(--line); border-radius: var(--radius-sm); font-size:.92rem; }
.faq-item{ border-bottom:1px solid var(--line-soft); padding:16px 0; }
.faq-item summary{ cursor:pointer; font-weight:600; font-size:.96rem; }
.faq-item p{ margin-top:10px; color: var(--ink-70); font-size:.9rem; }
.disclaimer-box{ background: var(--paper-dim); border:1px solid var(--line); border-left:4px solid var(--gold); border-radius: var(--radius-sm); padding:16px 18px; font-size:.84rem; color: var(--ink-70); }

/* Success page */
.success-card{ max-width:620px; margin:50px auto; background: var(--card); border:1px solid var(--line-soft); border-radius: var(--radius-md); padding:40px; text-align:center; box-shadow: var(--shadow); }
.success-card .ic{ font-size:2.4rem; display:block; margin-bottom:14px; }
.success-card .ref-badge{ display:inline-block; background: var(--paper-dim); border-radius:20px; padding:6px 16px; font-family: var(--font-display); font-weight:600; margin:14px 0 22px; }
.success-actions{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:10px; }

/* Cross-promotion band / card (homepage + property page) */
.promo-band{ background: linear-gradient(120deg, #0A6FE8 0%, #167A29 100%); color:#fff; border-radius: var(--radius-md); padding:34px 38px; display:flex; justify-content:space-between; align-items:center; gap:24px; flex-wrap:wrap; }
.promo-band h2{ color:#fff; font-size:1.5rem; margin-bottom:.25em; }
.promo-band p{ color: rgba(255,255,255,.88); margin:0; max-width:56ch; }
.promo-band .btn-white{ background:#fff; color:var(--ink); }
.promo-band .btn-white:hover{ background:#E8F2FE; }
.promo-card{ background:#E8F7EC; border:1px solid #BFE3C8; border-radius: var(--radius-md); padding:18px; margin-top:16px; }
.promo-card strong{ display:block; margin-bottom:4px; }
.promo-card p{ font-size:.84rem; color: var(--ink-70); margin:0 0 12px; }

/* Extra status pills used by the generator's admin screens */
.pill-contacted, .pill-in_progress{ background:#FBF1DD; color:#8A5A00; }
.pill-converted, .pill-active, .pill-generated{ background:#E4F0E7; color:#1F4A2E; }
.pill-inactive{ background: var(--paper-dim); color: var(--ink-45); }
.pill-draft{ background:#FBF1DD; color:#8A5A00; }
.admin-form-card{ background: var(--card); border:1px solid var(--line-soft); border-radius: var(--radius-md); padding:22px; margin-bottom:22px; }
.admin-main textarea{ width:100%; font-family:inherit; font-size:.88rem; padding:10px 12px; border:1px solid var(--line); border-radius: var(--radius-sm); }
.admin-side .nav-group{ font-size:.68rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color: rgba(247,243,234,.45); margin:18px 12px 6px; }

@media (max-width: 980px){
  .ra-hero .container{ grid-template-columns:1fr; }
  .gen-layout{ grid-template-columns:1fr; }
  .preview-pane{ position:static; }
  .type-grid, .ra-steps, .state-grid{ grid-template-columns:repeat(2,1fr); }
  .form-row-3{ grid-template-columns:1fr; }
}
@media (max-width: 700px){
  .type-grid, .ra-steps, .state-grid{ grid-template-columns:1fr; }
  .ra-strip li span.label{ display:none; }
  .promo-band{ flex-direction:column; text-align:center; align-items:center; }
}

/* polish */
.form-group select{ background:#fff; }
.admin-side .brand-logo{ margin-bottom:22px; }

@media (max-width: 700px){
  .topbar .container{ padding-top:6px; padding-bottom:6px; }
  .topbar{ font-size:.74rem; }
  .topbar .topbar__links{ gap:12px; }
  .topbar .topbar__links:first-child a:nth-child(3){ display:none; }
}