/* NILA Connect v13 brand rollout
   Purpose: carry the approved Lovable look and feel across all pages and interfaces.
   Scope: UI only. No routes, IDs, data attributes, forms, scripts, Airtable proxy or Netlify functions changed. */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght,SOFT,WONK@9..144,500..800,0..100,0..1&family=Inter:wght@400;450;500;600;700;800;900&display=swap');

:root{
  --brand-bg:#fbfaf7;
  --brand-bg-2:#f6f1e9;
  --brand-card:#ffffff;
  --brand-ink:#151712;
  --brand-muted:#66736b;
  --brand-soft:#e8f5ef;
  --brand-line:rgba(15,28,22,.10);
  --brand-line-2:rgba(15,28,22,.16);
  --brand-teal:#0d6b55;
  --brand-deep:#06251f;
  --brand-lime:#d9f765;
  --brand-gold:#d4a832;
  --brand-danger:#b42318;
  --brand-shadow:0 18px 42px rgba(6,37,31,.08);
  --brand-shadow-2:0 34px 80px rgba(6,37,31,.14);
  --brand-radius:24px;
  --brand-radius-sm:16px;
  --brand-radius-lg:32px;
  --brand-pill:999px;
  --font-ui:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --font-display:'Fraunces',Georgia,serif;

  --paper:var(--brand-bg);
  --paper2:var(--brand-bg-2);
  --white:var(--brand-card);
  --ink:var(--brand-ink);
  --muted:var(--brand-muted);
  --teal:var(--brand-teal);
  --navy:var(--brand-deep);
  --gold:var(--brand-lime);
  --border:var(--brand-line);
  --border2:var(--brand-line-2);
  --shadow:var(--brand-shadow);
  --shadow2:var(--brand-shadow-2);
  --radius:var(--brand-radius-sm);
  --radius2:var(--brand-radius);
}

*{box-sizing:border-box}
html{background:var(--brand-bg);scroll-behavior:smooth}
body{
  background:var(--brand-bg)!important;
  color:var(--brand-ink)!important;
  font-family:var(--font-ui)!important;
  letter-spacing:-.012em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
body:not(.page-home){
  background:
    radial-gradient(circle at 88% 2%,rgba(217,247,101,.12),transparent 30%),
    linear-gradient(180deg,#fffefb 0%,var(--brand-bg) 46%,var(--brand-bg-2) 100%)!important;
}
.container{width:min(1160px,94vw)!important;margin-inline:auto!important}
img,svg,video{max-width:100%}

h1,h2,h3,h4,
.page-hero h1,.pagehero h1,.dir-hero-v125 h1,.cd-hero h1,.pd-hero h1,.owner-hero h1,
.form-card h1,.form-card h2,.auth-card h1,.login-card h1,.card h2,.card h3,
.section-head h2,.join-title,.form-section-title,.nav-title,.st,.empty-title{
  font-family:var(--font-display)!important;
  color:var(--brand-ink)!important;
  letter-spacing:-.058em!important;
  line-height:.98!important;
  font-weight:660!important;
}
p,li,.form-note,.empty-sub,.card p,.section-head p{color:var(--brand-muted)!important;line-height:1.6}
a{color:inherit}
.gold,.gold-text,.nav-title span{color:var(--brand-teal)!important;font-style:italic!important;font-family:var(--font-display)!important}

/* Brand navigation across old and new pages */
.nav{
  background:rgba(251,250,247,.92)!important;
  border-bottom:1px solid var(--brand-line)!important;
  backdrop-filter:blur(20px)!important;
  box-shadow:0 1px 0 rgba(255,255,255,.75) inset!important;
}
.nav-links{background:rgba(255,255,255,.58)!important;border:1px solid var(--brand-line)!important;border-radius:var(--brand-pill)!important;padding:3px!important;gap:3px!important}
.nav-links a{border-radius:var(--brand-pill)!important;color:#3e4a43!important;font-weight:760!important}
.nav-links a:hover,.nav-links a.active{background:#fff!important;color:var(--brand-ink)!important;box-shadow:0 1px 2px rgba(6,37,31,.06)!important}
.nav .btn,.nav-actions .btn{min-height:34px!important;border-radius:var(--brand-pill)!important;font-weight:820!important}
.nav .btn-gold,.nav .btn-primary{background:var(--brand-ink)!important;color:#fff!important;border-color:var(--brand-ink)!important}
.nav .btn-outline{background:#fff!important;border:1px solid var(--brand-line-2)!important;color:var(--brand-ink)!important}
.nav-logo svg{filter:none!important}
.nav-hamburger span{background:var(--brand-ink)!important}

/* Buttons */
.btn,.go,.btn-submit,.submit-btn,.p-btn,.dir-btn-primary,.dir-mini-btn,.lb-primary,.cb-primary,.ops-btn,.ctrl-btn,.export-btn,.owner-small-btn,.empty-btn,.sa,.change-btn,.mode-btn,.tab-btn,.nav-back{
  border-radius:var(--brand-pill)!important;
  font-family:var(--font-ui)!important;
  font-weight:820!important;
  letter-spacing:-.012em!important;
  transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease!important;
}
.btn:hover,.go:hover,.submit-btn:hover,.p-btn:hover,.dir-btn-primary:hover,.owner-small-btn:hover,.ops-btn:hover,.sa:hover,.empty-btn:hover{transform:translateY(-1px)!important}
.btn-gold,.btn-primary,.go,.btn-submit,.submit-btn,.dir-btn-primary,.p-btn-primary,.lb-primary,.sa-view,.empty-btn,.owner-small-btn.primary,.ops-btn.primary,.export-btn.gold{
  background:var(--brand-ink)!important;
  color:#fff!important;
  border-color:var(--brand-ink)!important;
  box-shadow:0 12px 24px rgba(17,19,15,.15)!important;
}
.btn-outline,.btn-soft,.p-btn-outline,.lb-soft,.dir-mini-btn,.sa-call,.change-btn,.owner-small-btn,.ops-btn,.mode-btn{
  background:#fff!important;
  color:var(--brand-ink)!important;
  border:1px solid var(--brand-line-2)!important;
  box-shadow:0 1px 2px rgba(6,37,31,.04)!important;
}
.btn-outline-light{background:rgba(255,255,255,.08)!important;color:#fff!important;border:1px solid rgba(255,255,255,.24)!important}
.sa-wa{background:#128c5b!important;color:#fff!important;border:0!important}

/* Badges, tabs and chips */
.eyebrow,.page-hero-tag,.insight-tag,.community-badge,.plan-badge,.badge,.p-plan,.dir-card-tag,.status-pill,.ops-pill,.lb,.fchip,.sm,.new-post-tag,
.dir-cat,.filter-chip,.sort-chip,.group-tab,.join-tab,.pd-tab,.cd-tab,.owner-tab,.ops-tab,.dbsort-chip,.budget-opt,.contact-opt{
  border-radius:var(--brand-pill)!important;
  font-family:var(--font-ui)!important;
  font-weight:850!important;
}
.eyebrow,.page-hero-tag,.insight-tag,.community-badge,.badge,.p-plan,.dir-card-tag,.status-pill,.ops-pill,.new-post-tag,.sm-dist,.sm-avail{
  background:var(--brand-soft)!important;
  color:var(--brand-teal)!important;
  border:1px solid #cfe8dd!important;
}
.dir-cat,.filter-chip,.sort-chip,.group-tab,.join-tab,.pd-tab,.cd-tab,.owner-tab,.ops-tab,.dbsort-chip,.fchip,.budget-opt,.contact-opt{
  background:#fff!important;
  color:#37463f!important;
  border:1px solid var(--brand-line-2)!important;
  box-shadow:0 1px 2px rgba(6,37,31,.03)!important;
}
.dir-cat.active,.filter-chip.active,.sort-chip.active,.group-tab.active,.join-tab.active,.pd-tab.active,.cd-tab.active,.owner-tab.active,.ops-tab.active,.dbsort-chip.active,.fchip.active,.budget-opt.active,.contact-opt.active,.mode-btn.active{
  background:var(--brand-ink)!important;
  color:#fff!important;
  border-color:var(--brand-ink)!important;
}

/* Universal card language */
.card,.form-card,.login-card,.auth-card,.cd-card,.pd-card,.owner-card,.ops-card,.dir-card,.community-type,.insight-card,.contact-opt,.check-card,
.request-side-card,.nila-life-card,.home-choice,.provider-card,.lead-card,.admin-charts-card,.admin-feedback-card,.admin-add-vendor-card,.admin-data-table,
.owner-panel,.owner-action-panel,.owner-link-card,.owner-user-card,.owner-experience-strip,.experience-preview,.setting-card,.ops-panel,.p-card,.profile-card,
.safe-form,.safe-item,.chat-box,.form-section,.provider-mini,.saved-card,.req-card,.community-card,.gallery-card,.pricing-card,.result-card,.backup-card,.system-card,
.phone .content-card,.notice,.empty-state,.phone .sh,.phone .filter-bar{
  background:#fff!important;
  border:1px solid var(--brand-line)!important;
  border-radius:var(--brand-radius)!important;
  box-shadow:var(--brand-shadow)!important;
}
.card:hover,.dir-card:hover,.provider-card:hover,.saved-card:hover,.req-card:hover,.owner-link-card:hover,.community-type:hover,.insight-card:hover{box-shadow:var(--brand-shadow-2)!important;transform:translateY(-1px)}
.form-card,.login-card,.auth-card,.join-panel{border-radius:28px!important;box-shadow:0 28px 70px rgba(6,37,31,.11)!important}

/* Page hero treatment for pages that still looked legacy */
.page-hero,.pagehero,.faq-hero,.dir-hero-v125,.pd-hero,.cd-hero,.owner-hero,.group-hero,
body.page-backup-status main > section:first-child,body.page-system-check main > section:first-child,body.page-test-runner main > section:first-child,
body.page-emergency-contact main > section:first-child,body.page-evidence main > section:first-child,body.page-report-issue main > section:first-child,body.page-job-status main > section:first-child,
body.page-safety-moderation main > section:first-child{
  background:radial-gradient(circle at 82% 12%,rgba(217,247,101,.16),transparent 28%),linear-gradient(135deg,var(--brand-deep),var(--brand-teal))!important;
  color:#fff!important;
  border:0!important;
  border-radius:0 0 34px 34px!important;
  box-shadow:0 30px 70px rgba(6,37,31,.13)!important;
}
.page-hero h1,.pagehero h1,.faq-hero h1,.dir-hero-v125 h1,.pd-hero h1,.cd-hero h1,.owner-hero h1,.group-hero h1{color:#fff!important}
.page-hero p,.pagehero p,.faq-hero p,.dir-hero-v125 p,.pd-hero p,.cd-hero p,.owner-hero p,.group-hero p{color:rgba(255,255,255,.75)!important}
.section{padding:80px 0!important}.alt-bg{background:var(--brand-bg-2)!important}.section-head{margin-bottom:32px!important}
.section-head h2{font-size:clamp(32px,4.4vw,58px)!important}.section-head.centered{text-align:center!important;align-items:center!important}

/* Forms */
.form-field input,.form-field select,.form-field textarea,.field input,.field select,.field textarea,.input,.loc-input,.ops-input,.pf-input,.safe-select,.safe-textarea,
.owner-search,.owner-search-slim,.search-bar input,.search-bar select,.hero-search input,.hero-search select,input[type="text"],input[type="email"],input[type="password"],input[type="tel"],input[type="number"],select,textarea{
  background:#fff!important;
  color:var(--brand-ink)!important;
  border:1px solid var(--brand-line-2)!important;
  border-radius:16px!important;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset!important;
  font-family:var(--font-ui)!important;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus,.field input:focus,.field select:focus,.field textarea:focus,.input:focus,.loc-input:focus,.ops-input:focus,.pf-input:focus,.safe-select:focus,.safe-textarea:focus,.owner-search:focus,.owner-search-slim:focus,input:focus,select:focus,textarea:focus{
  outline:0!important;
  border-color:#74c9ad!important;
  box-shadow:0 0 0 4px rgba(13,107,85,.12)!important;
}
label,.form-field label,.field label,.safe-label{color:#34433c!important;font-weight:820!important;font-size:12px!important;letter-spacing:.015em!important}
.form-section-title{font-size:22px!important;text-transform:none!important;color:var(--brand-ink)!important;margin-bottom:14px!important}
.form-note,.request-helper-card,.empty-note,.notice-empty,.cd-empty,.dir-empty,.owner-empty,.ops-empty,.ux-empty-mini{
  background:#fff!important;
  border:1px dashed var(--brand-line-2)!important;
  border-radius:22px!important;
  color:var(--brand-muted)!important;
}

/* Search and marketplace pages */
.search-bar,.hero-search,.dir-cats,.filter-bar,.provider-sort-bar,.join-tabs,.login-tabs,.group-tabs,.pd-tabs,.cd-tabs,.owner-tabs,.ops-filter-row,.dbrowse-sort{
  background:rgba(255,255,255,.78)!important;
  border:1px solid var(--brand-line)!important;
  border-radius:22px!important;
  box-shadow:0 14px 32px rgba(6,37,31,.06)!important;
  backdrop-filter:blur(12px)!important;
}
.dir-results-head h2,.st,.sh h2{font-size:clamp(24px,3vw,38px)!important}
.dir-card,.provider-card,.p-card,.saved-card,.req-card{position:relative;overflow:hidden}
.dir-card::before,.provider-card::before,.p-card::before,.saved-card::before,.req-card::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--brand-teal),var(--brand-lime));opacity:.75}
.dir-card-avatar,.p-avatar,.mini-avatar,.sc-avatar,.cd-avatar,.s-avatar{background:var(--brand-soft)!important;color:var(--brand-teal)!important;border-radius:16px!important;box-shadow:none!important}
.dir-card-name,.p-name,.mini-name,.sc-name,.s-name,.cd-name,.owner-user-name{font-weight:850!important;color:var(--brand-ink)!important}
.dir-card-rating,.p-rating,.mini-rating,.sc-rating{color:var(--brand-teal)!important;font-weight:850!important}

/* Dashboard and owner interfaces */
.cd-shell,.pd-shell,.owner-shell,.ops-shell,.ux-provider-app{background:var(--brand-bg)!important}
.ux-side,.ux-side.pro,.ux-side.power,.ops-nav{
  background:linear-gradient(180deg,var(--brand-deep),#08382f)!important;
  color:#fff!important;
  border-right:1px solid rgba(255,255,255,.07)!important;
}
.ux-brand,.ux-side-plan{color:#fff!important}
.ux-side button,.ops-nav a{border-radius:16px!important;color:rgba(255,255,255,.72)!important;font-weight:760!important}
.ux-side button.ux-side-active,.ux-side button:hover,.ops-nav a.active,.ops-nav a:hover{background:rgba(217,247,101,.13)!important;color:#fff!important}
.ux-main,.ops-main{background:var(--brand-bg)!important}
.ux-welcome,.nila-hero-card{
  background:radial-gradient(circle at 80% 22%,rgba(217,247,101,.15),transparent 30%),linear-gradient(135deg,var(--brand-deep),var(--brand-teal))!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:30px!important;
  box-shadow:var(--brand-shadow-2)!important;
}
.ux-welcome h1,.ux-welcome h2,.ux-welcome h3,.nila-hero-card h1,.nila-hero-card h2{color:#fff!important}
.ux-welcome p,.nila-hero-card p{color:rgba(255,255,255,.72)!important}
.ux-metric-card,.nila-metric-card,.cd-stat,.dash-stat-grid > *, .xp-mini{
  background:#fff!important;
  border:1px solid var(--brand-line)!important;
  border-radius:22px!important;
  box-shadow:0 12px 28px rgba(6,37,31,.06)!important;
}
.ux-chart i,.chart-bars i,.xp-chart i{background:linear-gradient(180deg,var(--brand-teal),var(--brand-lime))!important;border-radius:10px 10px 0 0!important}
.ux-donut{background:conic-gradient(var(--brand-teal),var(--brand-lime),#eef3ec)!important}
.owner-user-grid,.experience-preview-grid,.owner-segment-grid,.nila-metric-grid{gap:16px!important}
.owner-panel,.ops-panel{padding:24px!important}
.ops-table-wrap,.admin-data-table{background:#fff!important;border:1px solid var(--brand-line)!important;border-radius:24px!important;box-shadow:var(--brand-shadow)!important;overflow:hidden!important}
table,.ops-table{border-collapse:separate!important;border-spacing:0!important;width:100%!important;background:#fff!important}
th{background:#f2f8f5!important;color:#33443c!important;font-weight:850!important;text-transform:none!important}td,th{border-bottom:1px solid var(--brand-line)!important;padding:13px 14px!important}

/* Legacy mobile framed pages: align them to v13 branding */
body:has(.phone){
  background:
    radial-gradient(circle at 80% 10%,rgba(217,247,101,.12),transparent 28%),
    linear-gradient(135deg,#071b18,#0d6b55)!important;
  display:flex!important;
  justify-content:center!important;
  align-items:flex-start!important;
}
.phone{
  background:var(--brand-bg)!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.16),0 30px 90px rgba(0,0,0,.38)!important;
  border-radius:44px!important;
  border:8px solid #0b1110!important;
}
.phone .status-bar,.phone .top-nav{
  background:linear-gradient(135deg,var(--brand-deep),var(--brand-teal))!important;
  color:#fff!important;
}
.phone .content{background:var(--brand-bg)!important}
.phone .bottom-nav{
  background:rgba(255,255,255,.94)!important;
  border-top:1px solid var(--brand-line)!important;
  box-shadow:0 -14px 34px rgba(6,37,31,.10)!important;
}
.phone .nav-item,.phone .mn-item{color:#6a756d!important;font-weight:780!important}.phone .nav-item.active,.phone .mn-item.active{color:var(--brand-teal)!important}
.phone .top-nav .nav-back{background:rgba(255,255,255,.12)!important;color:#fff!important;border:1px solid rgba(255,255,255,.12)!important}
.phone .filter-bar{margin:12px 12px 0!important;padding:8px!important;border-radius:20px!important}
.phone .content > .sh{margin:12px 12px 8px!important;padding:12px 14px!important}
.phone .saved-card,.phone .req-card,.phone .provider-mini,.phone .form-section,.phone .notice{margin-inline:12px!important;border-radius:22px!important}
.phone .sc-actions,.phone .budget-options,.phone .contact-opts{gap:8px!important}
.phone .sa,.phone .submit-btn{min-height:42px!important}
.phone .form-body{padding:14px 12px 100px!important}
.phone .chat-bubble{background:var(--brand-teal)!important;box-shadow:0 14px 30px rgba(13,107,85,.26)!important}.phone .back-top{background:var(--brand-ink)!important}

/* Article and legacy content pages */
body.page-article main,body.page-about main,body.page-services main,body.page-insights main,body.page-contact main,body.page-gallery main,body.page-faq main,body.page-release-v11-34 main{
  background:var(--brand-bg)!important;
}
body.page-article article,body.page-article .article,body.page-article .content,
body.page-about .card,body.page-services .card,body.page-insights .insight-card,body.page-contact .form-card,body.page-gallery .card,body.page-faq .card{
  background:#fff!important;border:1px solid var(--brand-line)!important;border-radius:28px!important;box-shadow:var(--brand-shadow)!important;
}
body.page-article h1,body.page-article h2,body.page-article h3{font-family:var(--font-display)!important;color:var(--brand-ink)!important;letter-spacing:-.05em!important}

/* Footer */
.footer{background:#061d19!important;color:#fff!important;border-top:0!important}.footer p,.footer a,.footer-bottom{color:rgba(255,255,255,.66)!important}.footer strong{color:#fff!important}
.mobile-nav{background:rgba(255,255,255,.92)!important;border:1px solid var(--brand-line)!important;border-radius:24px 24px 0 0!important;box-shadow:0 -16px 38px rgba(6,37,31,.10)!important;backdrop-filter:blur(18px)!important}
.mn-item{color:#6b756f!important;font-weight:750!important}.mn-item.active,.mn-item:hover{color:var(--brand-teal)!important}

/* Mobile first hardening */
@media(max-width:980px){
  .nav-links,.nav-actions{display:none!important}.nav-hamburger{display:flex!important}
  .section{padding:64px 0!important}
  .providers-grid,.cards-grid,.grid3,.community-type-grid,.nila-life-grid,.owner-user-grid,.experience-preview-grid,.owner-segment-grid,.nila-metric-grid,.ux-grid.two,.dash-stat-grid{grid-template-columns:1fr 1fr!important}
  .dir-body,.community-banner,.provider-cta-wrap,.owner-shell,.ops-shell,.ux-provider-app{grid-template-columns:1fr!important;display:block!important}
  .ux-side,.ops-nav{position:relative!important;width:100%!important;min-height:auto!important;display:flex!important;overflow-x:auto!important;gap:8px!important;padding:12px!important}
  .ux-side button,.ops-nav a{flex:0 0 auto!important;white-space:nowrap!important}
}
@media(max-width:680px){
  body{font-size:14px;padding-bottom:72px}
  .container{width:min(100% - 28px,1160px)!important}
  .section{padding:52px 0!important}
  h1,.page-hero h1,.pagehero h1,.dir-hero-v125 h1,.cd-hero h1,.pd-hero h1,.owner-hero h1{font-size:clamp(34px,12vw,54px)!important;line-height:.96!important}
  .section-head{align-items:flex-start!important;flex-direction:column!important;text-align:left!important}
  .hero-search,.search-bar,.form-grid,.request-value-grid,.date-row,.contact-opts,.budget-options{grid-template-columns:1fr!important;display:grid!important}
  .providers-grid,.cards-grid,.grid3,.community-type-grid,.nila-life-grid,.dir-grid,.dashboard-grid,.form-grid,.request-value-grid,.owner-user-grid,.experience-preview-grid,.owner-segment-grid,.nila-metric-grid,.ux-grid.two,.dash-stat-grid{grid-template-columns:1fr!important}
  .dir-cats,.filter-bar,.provider-sort-bar,.group-tabs,.join-tabs,.pd-tabs,.cd-tabs,.owner-tabs,.ops-filter-row,.dbrowse-sort{overflow-x:auto!important;white-space:nowrap!important;flex-wrap:nowrap!important;-webkit-overflow-scrolling:touch!important;padding-bottom:7px!important}
  .form-card,.login-card,.auth-card,.join-panel,.card,.dir-card,.cd-card,.pd-card,.owner-card,.ops-card,.safe-form,.safe-item,.chat-box,.form-section,.provider-mini,.saved-card,.req-card{border-radius:22px!important;padding:20px!important}
  .btn,.go,.submit-btn,.sa,.empty-btn{min-height:44px!important;width:auto}
  .search-bar .go,.hero-search .hs-submit,.submit-btn{width:100%!important}
  table,.admin-data-table,.ops-table-wrap{display:block!important;max-width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}
  .phone{width:min(390px,calc(100vw - 20px))!important;height:min(844px,calc(100vh - 20px))!important;border-radius:34px!important;border-width:6px!important}
  body:has(.phone){padding:10px!important;align-items:flex-start!important}
  .phone .content{height:auto!important;flex:1 1 auto!important}
}