/* Zen service pages (deploy-pack/zen-service-pages-20261004).
   One calm layer for the generated service x city pages, hubs, region and landing pages.
   Every rule is scoped to body.zen. Nothing here removes content: long blocks fold into
   <details> accordions (apply.py), link lists become chip groups, bands get one rhythm.
   Dark is the default; light mode keys off html[data-theme="light"] like theme.css.
   Pages without theme.css still get both themes from the tokens below. */
.zen{--zen-gold:#fbbc04;--zen-gold-dark:#e5a800;--zen-line:rgba(255,255,255,.1);--zen-card:rgba(255,255,255,.04);--zen-band:rgba(0,0,0,.14);--zen-chip:rgba(255,255,255,.06);--zen-chip-line:rgba(255,255,255,.15);--zen-ink:#fff;--zen-muted:rgba(255,255,255,.72)}
html[data-theme="light"] .zen{--zen-line:rgba(15,23,42,.09);--zen-card:#fff;--zen-band:rgba(15,79,92,.045);--zen-chip:#fff;--zen-chip-line:rgba(15,23,42,.14);--zen-ink:#0f172a;--zen-muted:rgba(15,23,42,.7)}

/* Band rhythm */
.zen .section{padding:56px 0}
.zen .section-header{margin-bottom:28px}
.zen .section-header h2{font-size:clamp(1.4rem,2.6vw,1.9rem);line-height:1.2}
.zen .section-header p{font-size:.98rem}
.zen .zen-band{background:var(--zen-band)}
.zen .zen-kicker{display:inline-block;font:700 .7rem/1 'Montserrat',sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--zen-gold);margin:0 0 12px;padding:6px 12px;border:1px solid rgba(251,188,4,.35);border-radius:999px;background:rgba(251,188,4,.08)}
.zen .content-section>.zen-kicker{margin-bottom:14px}

/* Hero: one primary button, the phone and quote links go quiet */
.zen .hero{padding:104px 0 44px}
.zen .hero h1{font-size:clamp(1.7rem,4vw,2.6rem)}
.zen .hero p{font-size:1.05rem;max-width:760px}
.zen .hero-badge{font-size:.8rem;padding:7px 14px;margin-bottom:16px}
.zen .stats{gap:12px;margin-top:22px}
.zen .stat{padding:10px 14px}
.zen .stat-value{font-size:1.3rem}
.zen .hero-ctas{margin-top:22px;gap:6px 18px;align-items:center}
.zen .hero-ctas .cta-secondary{border:0;background:none;padding:10px 0;font-weight:600;opacity:.9;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.35)}
.zen .hero-ctas .cta-secondary:hover{background:none;opacity:1;color:var(--zen-gold)}
html[data-theme="light"] .zen .hero-ctas .cta-secondary{text-decoration-color:rgba(15,23,42,.3)}

/* Content write-up: intro stays open, each sub-topic folds */
.zen .content-section{padding:34px 36px;margin:0;background:var(--zen-card);border:1px solid var(--zen-line)}
.zen .content-section h2{font-size:1.35rem;margin-bottom:14px}
.zen .content-section>p{font-size:.98rem;line-height:1.7;margin-bottom:12px}
.zen .zen-accs{display:grid;gap:10px;margin-top:18px}
@media(min-width:900px){.zen .zen-accs.zen-accs-2{grid-template-columns:1fr 1fr;align-items:start}}

/* The accordion */
.zen details.zen-acc{border:1px solid var(--zen-line);border-radius:14px;background:var(--zen-card);padding:0;margin:0}
.zen details.zen-acc>summary{list-style:none;cursor:pointer;padding:14px 46px 14px 18px;position:relative;-webkit-tap-highlight-color:transparent;outline-offset:2px}
.zen details.zen-acc>summary::-webkit-details-marker{display:none}
.zen details.zen-acc>summary::marker{content:""}
.zen details.zen-acc>summary::after{content:"+";position:absolute;right:16px;top:50%;transform:translateY(-50%);font:700 1.25rem/1 'Montserrat',sans-serif;color:var(--zen-gold)}
.zen details.zen-acc[open]>summary::after{content:"\2212"}
.zen details.zen-acc>summary h2,.zen details.zen-acc>summary h3{margin:0 !important;font-size:1rem !important;line-height:1.35;font-family:'Montserrat',sans-serif;font-weight:700}
.zen details.zen-acc>summary h2{font-size:1.05rem !important}
.zen details.zen-acc>summary:hover h2,.zen details.zen-acc>summary:hover h3{color:var(--zen-gold)}
.zen .zen-acc-body{padding:0 18px 16px}
.zen .zen-acc-body>p{margin:0 0 10px;font-size:.95rem;line-height:1.7}
.zen .zen-acc-body>p:last-child{margin-bottom:0}
.zen .zen-acc-body ul,.zen .zen-acc-body ol{margin:4px 0 8px 20px;line-height:1.7}
.zen .zen-acc-body .process-steps{margin:4px 0 0;padding:0}
.zen .zen-acc-body .process-steps li{padding:10px 14px;margin:6px 0;font-size:.93rem}
.zen .zen-acc-body .zip-badges{margin-top:8px}
.zen details.zen-acc>p{padding:0 18px 16px;margin:0 !important}

/* FAQ cards become one calm list */
.zen details.faq-item{padding:0 !important;margin:0 0 10px !important;border:1px solid var(--zen-line) !important;border-radius:14px !important;background:var(--zen-card) !important}
html .zen details.faq-item:not(.glass){padding:0 !important;border-bottom:1px solid var(--zen-line) !important}
.zen details.faq-item .faq-q,.zen details.faq-item>summary h3{font-size:1rem;margin:0;line-height:1.4}
.zen details.faq-item .faq-a,.zen details.faq-item>p{padding:0 18px 16px;margin:0;font-size:.95rem;line-height:1.65}

/* Reviews */
.zen .review-card{padding:18px 20px;margin-bottom:10px}
.zen .review-card p{font-size:.95rem}
.zen .review-header{margin-bottom:8px}

/* Service cards (handyman city + county pages) */
.zen .services-grid{gap:14px}
.zen .services-grid .service-card{padding:20px 18px}
.zen .services-grid .service-icon{font-size:1.7rem;margin-bottom:8px}
.zen .services-grid h3{font-size:1rem}
.zen .services-grid p{font-size:.88rem}

/* Nearby areas: compact chips, the region line reads in both themes */
.zen #areas .area-tag,.zen .nearby-section .area-tag{font-size:.82rem;padding:7px 14px;margin:4px}
.zen .region-hub-link{color:var(--zen-muted) !important}
.zen .region-hub-link a{color:var(--zen-gold) !important;text-decoration:none;font-weight:600}
.zen .region-hub-link a:hover{text-decoration:underline}

/* Closing call to action */
.zen .cta-section{padding:40px 0 56px}
.zen .cta-card{padding:40px 24px}
.zen .cta-card h2{font-size:clamp(1.35rem,2.6vw,1.8rem)}
.zen .cta-card p{font-size:1rem;margin-bottom:20px}
.zen .cta-buttons{gap:8px 16px;align-items:center}
.zen .cta-buttons .cta-secondary{border:0;background:none;padding:10px 4px;font-weight:600;text-decoration:underline;text-underline-offset:4px;text-decoration-color:rgba(255,255,255,.35)}
.zen .cta-buttons .cta-secondary:hover{background:none;color:var(--zen-gold)}

/* The injected content-depth block (local-intro / local-trust / local-faq / local-links):
   it used to render as raw headings and bullet lists under the CTA. Now it is one quiet band
   of folds and chips. Markers and text are untouched. */
.zen .zen-depth{max-width:1200px;margin:0 auto;padding:8px 30px 36px;box-sizing:border-box}
.zen .zen-depth>.zen-kicker{margin-bottom:14px}
html .zen .zen-depth section.zen-fold,html .zen .zen-depth .local-faq,html .zen .zen-depth .local-links{margin:0 0 10px !important;padding:0 !important;background:none !important;border:0 !important;box-shadow:none !important;border-radius:0 !important}
.zen .zen-depth .local-trust ul{margin:0 0 0 18px;line-height:1.7;font-size:.95rem}
.zen .zen-depth .local-trust p{margin:12px 0 0 !important;font-size:.95rem}
.zen .zen-depth .local-faq h2,.zen .zen-depth .local-links h3{font:700 .72rem/1 'Montserrat',sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--zen-muted) !important;margin:22px 0 10px}
.zen .zen-depth .local-faq .faq{margin:0 !important}
.zen .zen-depth .local-links>div{display:block !important}
.zen .zen-depth .local-links ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.zen .zen-depth .local-links li{margin:0}
.zen .zen-depth .local-links li a{display:inline-block;padding:7px 14px;border:1px solid var(--zen-chip-line);border-radius:999px;background:var(--zen-chip);font-size:.82rem;color:var(--zen-ink);text-decoration:none;line-height:1.3}
.zen .zen-depth .local-links li a:hover{border-color:var(--zen-gold);color:var(--zen-gold)}
.zen .zen-depth .local-links div:not(:has(li)){display:none !important}

/* Real-jobs proof strip after the app section: same width as everything else */
.zen .local-trust:not(.zen-fold){max-width:1200px;margin:0 auto 28px !important;padding:16px 20px !important;box-sizing:border-box}
.zen .local-trust:not(.zen-fold) h3{font-size:.98rem}
.zen .local-trust:not(.zen-fold) p{font-size:.92rem;line-height:1.6}

/* Runtime trust row (zomg-enhance.js) sits right under the hero: keep it, make it quiet */
.zen #zomg-trust-badges{padding:12px 0}
.zen #zomg-trust-badges .ztb-badge{padding:5px 11px;font-size:.72rem}

/* Landing + hub pages (root service pages): calmer buttons and tables */
.zen .cta-group{gap:6px 18px;align-items:center}
.zen .cta-group .btn-outline{border-color:transparent;background:none;padding:10px 0;text-decoration:underline;text-underline-offset:4px;opacity:.9}
.zen .cta-group .btn-outline:hover{background:none;color:var(--zen-gold)}
.zen .faq-list .faq-item{margin-bottom:8px}
@media(max-width:600px){
  .zen table.pricing-table,.zen table.cost-table,.zen table.price-table{font-size:.8rem;width:100%;table-layout:fixed}
  .zen table.pricing-table th,.zen table.pricing-table td,.zen table.cost-table th,.zen table.cost-table td,.zen table.price-table th,.zen table.price-table td{padding:8px 6px;overflow-wrap:anywhere}
}

/* One sticky Book button on phones. Pages that already carry the conversion-boost bar
   (#zb-mob-cta) keep theirs and this one stays hidden, so bars never double. */
.zen-sticky{display:none}
@media(max-width:768px){
  .zen .section{padding:44px 0}
  .zen .section-header{margin-bottom:22px}
  .zen .hero{padding:96px 0 36px}
  .zen .stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  .zen .content-section{padding:24px 18px}
  .zen .cta-card{padding:32px 18px}
  .zen .zen-depth{padding:4px 20px 28px}
  .zen .local-trust:not(.zen-fold){margin:0 20px 24px !important}
  .zen-sticky{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:9990;gap:8px;align-items:center;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(10,42,48,.96);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-top:1px solid rgba(251,188,4,.35)}
  .zen-sticky a{font-family:'Montserrat',sans-serif;font-weight:800;font-size:.92rem;text-decoration:none;border-radius:999px;padding:13px 16px;text-align:center;line-height:1.1}
  .zen-sticky .zen-sticky-book{flex:1;background:linear-gradient(135deg,var(--zen-gold),var(--zen-gold-dark));color:#000 !important}
  .zen-sticky .zen-sticky-call{flex:0 0 auto;border:1px solid rgba(255,255,255,.3);color:#fff !important;background:rgba(255,255,255,.06)}
  html[data-theme="light"] .zen-sticky{background:rgba(255,255,255,.96);border-top-color:rgba(15,23,42,.1);box-shadow:0 -4px 16px rgba(15,23,42,.08)}
  html[data-theme="light"] .zen-sticky .zen-sticky-call{color:#0f172a !important;border-color:rgba(15,23,42,.2);background:#fff}
  body.zen{padding-bottom:72px}
  body.zen:has(#zb-mob-cta) .zen-sticky{display:none}
  body.zen:has(#zb-mob-cta){padding-bottom:74px}
  .zen .ir-widget-fab{bottom:92px !important}
  .zen #zomg-mascot-float{bottom:172px !important}
}
