/* Zendrex new look (W-014 Change 1, W-015 Change 2). Loaded AFTER /styles.css, which is pre-built with no build step.
   Jobs: (1) redefine the colour tokens and the few named classes the old sections use, so every section
   moves to the new navy palette at once; (2) style the header, hero, footer and the content pages (classes prefixed zl-);
   (3) the light theme and its button (data-theme="light", at the end). Colours below are tokens or documented literals only. */

@font-face{font-family:'Plex';font-weight:400 700;font-display:swap;src:url(/assets/fonts/ibm-plex-sans-latin-var.woff2) format('woff2')}

:root{
  /* Page tokens (override styles.css) */
  --bg:#0B1220; --bg-raised:#111B30; --bg-card:#111B30; --line:#24324D; --text:#E8EEF8; --muted:#A9B6CC;
  /* Brand */
  --zl-ink:#0F172A; --zl-band:#12305F; --zl-indigo:#2C2766;
  --zl-rule-a:#56CFE0; --zl-rule-m:#6796CB; --zl-rule-b:#945EB7;
  --zl-text-a:#56CFE0; --zl-text-m:#6C93F0; --zl-text-b:#B07CFF;
  --zl-accent-fallback:#8CC4FF;
  /* Action colour (locked): S3 for large buttons, S1 solid for small ones. Navy text on both. */
  --zl-a-bg:linear-gradient(90deg,#FF9A3D,#FF4F6D); --zl-a-hover:linear-gradient(90deg,#FFAA5A,#FF6483); --zl-a-press:linear-gradient(90deg,#E8832F,#E8405D);
  --zl-a-solid:#FF7849; --zl-a-solid-hover:#FF8D63; --zl-a-solid-press:#E85F30;
  --zl-ctl:#5B6F94; --zl-dis-bg:#475B82; --zl-dis-fg:#E8EEF8;
  --zl-on-dark:#E8EEF8; --zl-on-dark-2:#BFD3F2; --zl-on-dark-3:#D5E1F5; --zl-link:#4FACFE; --zl-white:#FFFFFF;
  --zl-state-work:#00f2fe; --zl-state-ok:#3ef27a; --zl-state-err:#ff7a7a;
  --zl-sans:'Plex',system-ui,sans-serif;
  /* --zl-white is the heading colour on the page ground: white on navy, near-black on the light page (see Light theme). */
  --zl-focus:#FFFFFF;
  color-scheme:dark;
}

/* ---- Global ---- */
body{font-family:var(--zl-sans)}
.font-display{font-family:var(--zl-sans)}
:focus-visible{outline:3px solid var(--zl-focus);outline-offset:3px}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--zl-focus)!important;outline-offset:2px}
html,body{overflow-x:hidden;overflow-x:clip}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}

/* Form overflow guard (W-017). A grid item defaults to min-width:auto, so one long unbreakable line or a wider fallback
   font can stretch the whole form past the screen (the section's overflow-hidden then hides the right edge).
   Tracks are minmax(0,1fr) on phones and every item may shrink to fit. */
#quote .grid>*,#contact .grid>*,#freeAuditTool .grid>*,#discoveryForm .grid>*{min-width:0}
@media (max-width:639px){#quote .grid,#contact .grid,#freeAuditTool .grid,#discoveryForm .grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1023px){#quote .grid:has(>#quoteForm),#contact .grid:has(>#contactForm){grid-template-columns:minmax(0,1fr)}}
#quoteForm,#contactForm,#auditForm,#discoveryForm{min-width:0;max-width:100%}
form :is(input,select,textarea){max-width:100%;min-width:0}
.choice-card{min-width:0;max-width:100%}
.choice-card>span:not(.check-dot){min-width:0;overflow-wrap:anywhere}
form :is(label,legend,p){overflow-wrap:anywhere}

/* Same guard for the rest of the page (W-017, second pass): the hero and the section cards are grids too, and the
   stress check (125% root font, wide fallback monospace) showed the hero column growing past a 320 px screen.
   Any grid item may shrink; below 640 px a grid with no unprefixed grid-cols class is one minmax(0,1fr) track
   (its sm:/md:/lg: columns only start at 640 px and up, so nothing wider changes). */
.grid>*{min-width:0}
@media (max-width:639px){.grid:not([class^="grid-cols-"]):not([class*=" grid-cols-"]){grid-template-columns:minmax(0,1fr)}}
@media (max-width:1023px){.zl-hero .grid{grid-template-columns:minmax(0,1fr)}}
/* W-018: the hero's lg:grid-cols-[1.2fr_0.8fr] has no rule in the pre-built styles.css, so the panel dropped below the
   text on desktop. Two columns from 1024 px, panel on the right (same split as the Hallmark mock). */
@media (min-width:1024px){.zl-hero .grid{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);align-items:center}}

/* W-018, class-check.js: classes the home and /free-audit markup uses that the pre-built styles.css never had (each was
   a silent no-op). Values are the standard Tailwind ones. Not added: hover:shadow-[0_0_30px_...] on .grad-cta buttons,
   because the locked action style above removes the hover glow on purpose. */
.pt-3{padding-top:.75rem}.pt-4{padding-top:1rem}.pt-9{padding-top:2.25rem}.pt-12{padding-top:3rem}
.mt-12{margin-top:3rem}.mt-14{margin-top:3.5rem}
.gap-10{gap:2.5rem}.gap-x-12{column-gap:3rem}.gap-y-4{row-gap:1rem}.gap-y-10{row-gap:2.5rem}
.max-w-3xl{max-width:48rem}.max-w-5xl{max-width:64rem}
.hover\:underline:hover{text-decoration-line:underline}
.bg-\[var\(--bg-raised\)\]\/95{background-color:var(--bg-raised);background-color:color-mix(in srgb,var(--bg-raised) 95%,transparent)}
.border-\[var\(--cyan-b\)\]\/40{border-color:color-mix(in srgb,var(--cyan-b) 40%,transparent)}
@media (min-width:640px){.sm\:items-center{align-items:center}}
@media (min-width:768px){.md\:col-start-1{grid-column-start:1}.md\:pt-40{padding-top:10rem}.md\:text-5xl{font-size:3rem}}
.zl-hero h1,.zl-hero .grad-text,.zl-sub,.zl-lead,.zl-fine,.zl-panel :is(h2,p,label,li){overflow-wrap:anywhere}
.zl-btn-large{max-width:100%}
.zl-panel,.zl-panel input[type=text]{max-width:100%;min-width:0}

/* Submit-button feedback (W-005): working / success / error shown on the button itself, set by setBtnState().
   Moved here from the page styles; same colours, now tokens. Navy text instead of pure black. */
button[data-state]{background-image:none!important;color:var(--zl-ink)!important;font-weight:600}
button[data-state="working"]{background-color:var(--zl-state-work)!important;opacity:.85;cursor:progress}
button[data-state="success"]{background-color:var(--zl-state-ok)!important;cursor:default}
button[data-state="error"]{background-color:var(--zl-state-err)!important}
button[data-state="working"]::before{content:"";display:inline-block;width:.9em;height:.9em;margin-right:.55em;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;vertical-align:-.12em;animation:btn-spin .7s linear infinite}
@keyframes btn-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){button[data-state="working"]::before{animation-duration:2s}}

/* Gradient A (locked): one continuous sweep across the whole phrase. Fallback is a solid light blue. */
.grad-text{color:var(--zl-accent-fallback)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .grad-text{background-image:linear-gradient(90deg,var(--zl-text-a) 0%,var(--zl-text-m) 50%,var(--zl-text-b) 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;-webkit-box-decoration-break:slice;box-decoration-break:slice}
}
@media (forced-colors:active){.grad-text{background:none;color:inherit;-webkit-text-fill-color:currentColor}}

/* Action colour on every existing .grad-cta button (large: gradient, small: solid) */
.grad-cta{background:var(--zl-a-bg);color:var(--zl-ink)!important;border:2px solid transparent;background-origin:border-box}
.grad-cta:hover{background:var(--zl-a-hover);background-origin:border-box;box-shadow:none!important}
.grad-cta:active{background:var(--zl-a-press);background-origin:border-box}
.grad-cta:disabled,.grad-cta[aria-disabled="true"]{background:var(--zl-dis-bg);color:var(--zl-dis-fg)!important;cursor:not-allowed}
header .grad-cta{background:var(--zl-a-solid)}
header .grad-cta:hover{background:var(--zl-a-solid-hover)}
header .grad-cta:active{background:var(--zl-a-solid-press)}
@media (forced-colors:active){.grad-cta,header .grad-cta{background:ButtonFace;color:ButtonText!important;border-color:ButtonText}}

/* ---- Header ---- */
.zl-header{background:var(--zl-ink);border-bottom:1px solid var(--line)}
/* The logo WebP files carry a near-black box. "lighten" keeps whichever of the logo pixel and the
   header pixel is lighter, so the box disappears on the navy header and the footer ground. */
.zl-logo{display:flex;align-items:center;gap:.625rem}
.zl-logo img,footer img{display:block;width:auto;mix-blend-mode:lighten}
.zl-logo-icon{height:52px}
.zl-logo-word{height:44px}
@media (max-width:480px){.zl-logo-icon{height:30px}.zl-logo-word{height:26px}}
.zl-header nav,.zl-header #mobileMenu{font-family:var(--zl-sans)}
/* Header fit (W-015 round 8). The logo, five links, theme button and quote button need about 1155 px, so the links move into
   the menu button below 1280 px (they were overlapping the wordmark from 1024 to about 1250 px). Between 640 and 1279 px the
   logo is smaller and the quote button never wraps (it wrapped to two lines near 768 px). The menu itself is unchanged. */
.zl-header>div:first-child{gap:.75rem}
.zl-header>div>a[href="/quote"]{white-space:nowrap;flex-shrink:0}
@media (min-width:640px) and (max-width:1279px){.zl-logo-icon{height:40px}.zl-logo-word{height:34px}}
/* Below 1280 px the theme button, quote button and menu button sit together on the right. */
@media (max-width:1279px){.zl-header #themeBtn{margin-left:auto}}
@media (min-width:1024px) and (max-width:1279px){
  .zl-header nav[aria-label="Main"]{display:none}
  .zl-header #menuBtn{display:block}
  .zl-header #mobileMenu:not(.hidden){display:flex}
}

/* ---- Hero: navy band to indigo, headline gradient, one button and the Free check panel ---- */
.zl-hero{background:linear-gradient(165deg,var(--zl-ink) 0%,var(--zl-band) 62%,var(--zl-indigo) 100%);padding-top:7rem;padding-bottom:5rem}
@media (min-width:768px){.zl-hero{padding-top:9rem;padding-bottom:6rem}}
.zl-hero h1{font-weight:700;letter-spacing:-.025em;line-height:1.06;font-size:clamp(2.4rem,5.4vw,3.75rem);max-width:17ch;overflow-wrap:break-word;color:var(--zl-white)}
.zl-rule{display:block;width:72px;height:4px;border-radius:2px;background:linear-gradient(90deg,var(--zl-rule-a),var(--zl-rule-m),var(--zl-rule-b));margin-top:1.5rem}
.zl-sub{margin-top:1.5rem;font-size:1.25rem;line-height:1.45;font-weight:500;color:var(--zl-on-dark-3);max-width:34ch}
.zl-lead{margin-top:1rem;color:var(--zl-on-dark-2);max-width:46ch}
.zl-fine{margin-top:1rem;font-size:.875rem;color:var(--zl-on-dark-2);max-width:46ch}
.zl-btn-large{display:inline-block;min-height:56px;padding:1rem 1.75rem;border-radius:4px;font-size:1.125rem;font-weight:600;line-height:1.5rem;text-align:center;text-decoration:none}

/* Free check panel */
.zl-panel{background:var(--bg-card);border:1px solid var(--line);border-radius:4px;padding:1.5rem}
.zl-panel h2{font-size:1.5rem;font-weight:700;line-height:1.2;color:var(--zl-white)}
.zl-panel .zl-free{margin-top:.25rem;font-size:.875rem;color:var(--muted)}
.zl-panel label{display:block;margin:1.5rem 0 .5rem;font-size:.875rem;font-weight:600;color:var(--text)}
.zl-panel input[type=text]{width:100%;min-height:52px;padding:.75rem;border:1px solid var(--zl-ctl);border-radius:4px;background:var(--bg);color:var(--text);font-size:1.0625rem}
.zl-panel .zl-go{display:block;width:100%;margin-top:.75rem;min-height:52px;padding:.75rem 1rem;border-radius:4px;border:2px solid var(--text);background:transparent;color:var(--text);font-size:1.0625rem;font-weight:600;text-align:center;cursor:pointer}
.zl-panel .zl-go:hover{background:var(--text);color:var(--bg)}
.zl-panel .zl-covers{margin-top:1.5rem;padding-top:1rem;border-top:1px solid var(--line);font-size:.9375rem;color:var(--muted)}
.zl-panel ul{list-style:none;margin:.5rem 0 0;padding:0}
.zl-panel li{padding:.5rem 0;color:var(--text)}

/* ---- Footer: gradient edge (locked) ---- */
.zl-foot-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.5rem 1.25rem;min-width:0}
@media (min-width:640px){.zl-foot-row{justify-content:flex-end}}
/* The footer is navy in both themes (the logo files need a navy ground); in the light theme it re-declares the dark tokens (see Light theme). */
footer#contact,.zl-footer{background:var(--zl-ink);color:var(--text)}
footer#contact,.zl-footer{border-top:3px solid transparent;border-image:linear-gradient(90deg,var(--zl-rule-a),var(--zl-rule-m),var(--zl-rule-b)) 1}

/* ---- Content pages and the trimmed home (W-015, Change 2). Same parts as the Hallmark mock (_mock-hallmark/hm.css).
   Every colour is a token, so the light theme only has to swap tokens. Sections use max-w-7xl mx-auto px-5 md:px-8. ---- */
:root{--zl-bg2:#17243E;--zl-tag-bg:#F8FAFC;--zl-tag-fg:#0F172A;--zl-tag-line:#64748B}
.zl-hero-slim{padding-top:6.5rem;padding-bottom:3rem}
@media (min-width:768px){.zl-hero-slim{padding-top:8rem;padding-bottom:4rem}}
.zl-crumbs{font-size:.875rem;font-weight:500;color:var(--zl-on-dark-2);margin-bottom:1.5rem}
.zl-crumbs a{color:var(--zl-on-dark-3);text-decoration:underline}
/* W-028 (images, plan items 1 to 3). Tokens only, so the light theme needs nothing extra.
   (1) Work band: wide crop plus a phone crop. Phones (under 768 px) show only the phone crop; the hidden wide one is lazy, so it is not fetched. */
.zl-shots{display:grid;gap:1.25rem;align-items:end}
.zl-shots img{display:block;width:100%;height:auto;border:1px solid var(--line);border-radius:4px}
.zl-shots .zl-shot-wide{display:none}
.zl-shots .zl-shot-phone{max-width:22rem;margin:0 auto}
@media (min-width:768px){.zl-shots{grid-template-columns:minmax(0,1fr) 15rem;gap:1.5rem}.zl-shots .zl-shot-wide{display:block}.zl-shots .zl-shot-phone{max-width:none;margin:0}}
/* (2) Tradies hero: a phone sketch in the slot the three text boxes had. The phone stays navy in both themes (like the footer); the boxes keep the old tag colours. */
.zl-sketch{justify-self:center;width:100%;max-width:19rem;margin:0}
.zl-phone{border:2px solid var(--zl-ctl);border-radius:28px;padding:.9rem .8rem 1.1rem;background:var(--zl-ink)}
.zl-phone-notch{width:34%;height:6px;border-radius:3px;background:var(--zl-ctl);margin:0 auto .8rem}
.zl-phone-bar{display:flex;align-items:center;gap:.5rem;margin-bottom:.8rem}
.zl-phone-bar i{display:block;height:.6rem;border-radius:3px;background:var(--zl-band)}
.zl-phone-bar i:first-child{flex:none;width:1.6rem;height:1.6rem;border-radius:6px}
.zl-phone-bar i:nth-child(2){width:45%}
.zl-phone-bar i:last-child{flex:none;margin-left:auto;width:1.1rem;height:.7rem;border-top:2px solid var(--zl-ctl);border-bottom:2px solid var(--zl-ctl);border-radius:0;background:none}
.zl-slot{display:flex;align-items:center;gap:.7rem;margin:.55rem 0;padding:.75rem .8rem;border-radius:8px;border:2px dashed var(--zl-tag-line);background:var(--zl-tag-bg);color:var(--zl-tag-fg);font-weight:600;font-size:.9375rem;line-height:1.3}
.zl-slot-call{border-color:transparent;background:var(--zl-a-bg);color:var(--zl-ink)}
.zl-slot b{flex:none;width:1.5rem;height:1.5rem;border-radius:50%;background:var(--zl-ink);color:#FFFFFF;font-size:.8rem;line-height:1.5rem;text-align:center}
.zl-phone-lines{margin-top:1rem}
.zl-phone-lines i{display:block;height:.5rem;border-radius:3px;background:var(--zl-band);margin-top:.5rem}
.zl-phone-lines i:nth-child(2){width:80%}
.zl-phone-lines i:nth-child(3){width:60%}
/* (3) Site Care: three boxes in a row from 760 px, stacked with arrows below that. */
.zl-care{display:grid;gap:.5rem;margin:2rem 0;align-items:stretch}
@media (min-width:760px){.zl-care{grid-template-columns:minmax(0,1fr) 2rem minmax(0,.8fr) 2rem minmax(0,1fr);gap:.5rem}}
.zl-care-col{border:1px solid var(--line);border-radius:4px;background:var(--bg-card);padding:1rem 1.1rem;min-width:0}
.zl-care-h{font-size:.8125rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:.6rem}
.zl-care-col ul{list-style:none;margin:0;padding:0}
.zl-care-col li{padding:.45rem 0;border-top:1px solid var(--line);font-size:.9375rem;color:var(--text)}
.zl-care-col li:first-child{border-top:0}
.zl-care-site{display:grid;place-items:center;text-align:center;border-color:var(--zl-ctl)}
.zl-care-site b{display:block;font-size:1.125rem;color:var(--zl-white)}
.zl-care-globe{width:3.2rem;height:3.2rem;border-radius:50%;border:2px solid var(--zl-ctl);margin:0 auto .6rem;position:relative}
.zl-care-globe:before{content:"";position:absolute;left:0;right:0;top:.55rem;bottom:.55rem;border-top:2px solid var(--zl-ctl);border-bottom:2px solid var(--zl-ctl);border-radius:50%}
.zl-care-arrow{display:grid;place-items:center;color:var(--muted);font-size:1.5rem;line-height:1}
.zl-care-arrow:before{content:"\2193"}
.zl-care-arrow-back:before{content:"\2191"}
@media (min-width:760px){.zl-care-arrow:before{content:"\2192"}.zl-care-arrow-back:before{content:"\2190"}}
.zl-sect{padding:4rem 0}
@media (min-width:700px){.zl-sect{padding:6rem 0}}
.zl-alt{background:var(--zl-bg2)}
.zl-two{display:grid;gap:1.5rem}
@media (min-width:1024px){.zl-two{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:3rem}}
.zl-h{font-weight:700;font-size:clamp(1.875rem,3.8vw,2.75rem);line-height:1.1;letter-spacing:-.02em;color:var(--zl-white);text-wrap:balance;overflow-wrap:anywhere}
.zl-h3{font-weight:700;font-size:1.5rem;line-height:1.2;letter-spacing:-.01em;color:var(--zl-white);text-wrap:balance}
.zl-intro{font-size:1.25rem;line-height:1.5;max-width:48ch;margin-bottom:3rem;color:var(--text)}
.zl-note{margin-top:1rem;color:var(--muted);max-width:40ch}
.zl-prose p{margin-top:1rem;max-width:62ch;color:var(--text)}
.zl-prose p:first-child{margin-top:0}
.zl-prose a,.zl-sect a:not(.zl-btn-large):not(.zl-btn2):not(.grad-cta):not(.zl-row){color:var(--zl-link);text-decoration:underline}
.zl-muted{color:var(--muted)}
.zl-rows{list-style:none;padding:0;margin:0;border-top:2px solid var(--text)}
.zl-rows li{border-bottom:1px solid var(--line)}
.zl-row{display:grid;gap:.25rem 1.5rem;padding:1.5rem 0;text-decoration:none;color:var(--text)}
@media (min-width:760px){.zl-row{grid-template-columns:minmax(0,5fr) minmax(0,5fr) auto;align-items:baseline}}
.zl-row .zl-name{font-weight:700;font-size:clamp(1.5rem,2.8vw,2.125rem);line-height:1.1;letter-spacing:-.015em;color:var(--zl-white)}
.zl-row .zl-line{color:var(--muted);font-size:1rem}
.zl-row .zl-go{font-weight:600;font-size:.9375rem;color:var(--zl-link);text-decoration:underline}
.zl-row:hover .zl-name{text-decoration:underline}
.zl-costs{list-style:none;padding:0;margin:0;border-top:2px solid var(--text)}
.zl-costs li{padding:1rem 0;border-bottom:1px solid var(--line);max-width:64ch}
.zl-probs{border-top:2px solid var(--text)}
.zl-probs>div{padding:1.5rem 0;border-bottom:1px solid var(--line);display:grid;gap:.5rem}
@media (min-width:760px){.zl-probs>div{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3rem}}
.zl-probs p{color:var(--muted)}
.zl-band{background:#060B16;color:var(--zl-on-dark);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.zl-band h2{font-weight:700;font-size:clamp(2rem,4.6vw,3.5rem);line-height:1.05;letter-spacing:-.025em;max-width:16ch;color:var(--zl-white)}
.zl-band p{margin-top:1rem;color:var(--zl-on-dark-2);font-size:1.25rem}
.zl-band p.zl-small{font-size:1rem;margin-top:.5rem}
.zl-band .zl-btn-large{margin-top:3rem}
.zl-band a:not(.zl-btn-large){color:var(--zl-on-dark-3);text-decoration:underline}
.zl-btn-large{color:var(--zl-ink)}

/* Pricing table (home) */
.zl-table{width:100%;border-collapse:collapse;background:var(--bg-card);border:1px solid var(--line)}
.zl-table th,.zl-table td{padding:1.5rem 1rem;text-align:left;border-bottom:1px solid var(--line);vertical-align:baseline}
.zl-table thead th{font-size:.875rem;font-weight:600;color:var(--muted)}
.zl-table tbody th{font-weight:700;font-size:1.25rem;color:var(--zl-white)}
.zl-table tbody th span{display:block;margin-top:.25rem;font-size:.9375rem;font-weight:400;color:var(--muted)}
.zl-table td.zl-price{font-weight:700;font-size:1.75rem;font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.01em;color:var(--zl-white)}
.zl-table td.zl-price.zl-o{font-weight:500;color:var(--muted);font-size:1.375rem}
.zl-table tr.zl-pop{box-shadow:inset 6px 0 0 var(--text)}
.zl-table tr.zl-pop th::after{content:"Most popular";display:block;margin-top:.25rem;font-size:.8125rem;font-weight:600;color:var(--muted)}
@media (max-width:699px){
  .zl-table,.zl-table thead,.zl-table tbody,.zl-table tr,.zl-table th,.zl-table td{display:block}
  .zl-table thead{position:absolute;left:-9999px}
  .zl-table tr{border-bottom:1px solid var(--line);padding:.5rem 0}
  .zl-table th,.zl-table td{border:0;padding:.5rem 1rem}
  .zl-table td[data-l]::before{content:attr(data-l);display:block;font-size:.8125rem;font-weight:500;color:var(--muted)}
  .zl-table td.zl-price{white-space:normal;overflow-wrap:anywhere}
}
.zl-table th,.zl-table td{overflow-wrap:anywhere}
.zl-foot{margin-top:1rem;color:var(--muted);font-size:1rem;max-width:64ch}

/* Site Care plans and SEO cards */
.zl-plans{display:grid;gap:1.5rem}
@media (min-width:900px){.zl-plans.zl-3{grid-template-columns:repeat(3,minmax(0,1fr))}.zl-plans.zl-2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.zl-plan{background:var(--bg-card);border:1px solid var(--line);border-radius:4px;padding:1.5rem}
.zl-plan h3{font-weight:700;font-size:1.5rem;line-height:1.2;color:var(--zl-white)}
.zl-plan .zl-pop-tag{margin-top:.25rem;font-size:.8125rem;font-weight:600;color:var(--muted)}
.zl-plan>p{margin-top:1rem;color:var(--muted);font-size:.9375rem}
.zl-list{list-style:none;padding:0;margin:1rem 0 0}
.zl-list li{padding:.625rem 0;border-top:1px solid var(--line);font-size:.9375rem;color:var(--text)}
.zl-callout{background:var(--bg-card);border:1px solid var(--line);border-radius:4px;padding:1.5rem}
.zl-callout p{margin-top:.75rem;color:var(--muted);font-size:.9375rem;max-width:80ch}
.zl-callout p:first-child{margin-top:0}
.zl-callout strong{color:var(--zl-white)}
.zl-btn2{display:inline-block;min-height:44px;padding:.625rem 1.25rem;border:2px solid var(--text);border-radius:4px;background:transparent;color:var(--text);font-weight:600;text-align:center;text-decoration:none}
.zl-btn2:hover{background:var(--text);color:var(--bg)}
.zl-table .zl-list{margin-top:.75rem}
.zl-table .zl-list li{font-weight:400;font-size:.9375rem;color:var(--muted)}
.zl-table th p{margin-top:.75rem;font-weight:400;font-size:.875rem;color:var(--muted)}
.zl-badge{display:inline-block;font-size:.8125rem;font-weight:600;padding:.125rem .5rem;border:1px solid var(--zl-ctl);border-radius:4px;color:var(--text)}

/* ---- Old sections brought into the new look (W-015): the quote form, the contact form and the audit pieces still carry
   Tailwind classes from the first design. These rules make them match the Hallmark parts without rewriting the markup
   (and so without touching the form ids, names and scripts): square 4 px corners, plain Plex instead of tracked mono caps,
   flat cards. ---- */
.font-mono{font-family:var(--zl-sans);letter-spacing:normal}
.font-mono.text-xs{font-size:.875rem}
.font-mono.text-\[11px\],.font-mono.text-\[10px\]{font-size:.8125rem}
.tracking-widest,.tracking-wide{letter-spacing:normal}
.grad-cta{border-radius:4px}
#quote .glow-border,#contact .glow-border,#quote .card-elevated,#contact .card-elevated,#freeAuditTool.glow-border{border-radius:4px;background:var(--bg-card)}
#quote :is(.rounded-xl,.rounded-2xl,.rounded-lg,.rounded-full),#contact :is(.rounded-xl,.rounded-2xl,.rounded-lg),#freeAuditTool :is(.rounded-xl,.rounded-2xl,.rounded-lg){border-radius:4px}
#quote .choice-card,#contact .choice-card,#discoveryForm .choice-card{border-radius:4px}
.zl-h-sm{font-size:clamp(1.5rem,2.4vw,1.875rem)}
@media (min-width:768px){.md\:text-3xl{font-size:1.875rem;line-height:2.25rem}}
.zl-panel>label:first-child{margin-top:0}
.zl-table td:not(.zl-price){font-weight:400}

/* ---- Theme button (W-015). Hidden until /assets/theme.js runs, so a visitor without JavaScript never sees a dead button. ---- */
.zl-tt{width:44px;height:44px;border-radius:4px;border:1px solid #3B4A6B;background:transparent;color:var(--zl-on-dark);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;margin-left:.75rem;flex-shrink:0}
.zl-tt[hidden]{display:none}
.zl-tt:hover{background:#1B2E52}
.zl-tt svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.zl-tt .sun{display:none}
.zl-tt[data-mode="dark"] .sun{display:block}
.zl-tt[data-mode="dark"] .moon{display:none}
@media (forced-colors:active){.zl-tt{border-color:ButtonText;color:ButtonText}}

/* ---- Light theme (W-015). Dark is the default; the light theme is a saved choice (data-theme="light" on <html>, set by the
   no-flash script in <head> and the button). The header, the hero band, dark bands and the footer stay navy in both themes
   (the logo files rely on a navy ground), so they re-declare the dark tokens for everything inside them. The Free check
   panel inside the hero goes back to the light tokens, as in the Hallmark mock. Old Tailwind sections follow through the
   tokens; hard-coded white text is remapped to the text token. ---- */
:root[data-theme="light"]{
  color-scheme:light;
  --bg:#F8FAFC; --bg-raised:#EEF2F8; --bg-card:#FFFFFF; --line:#D5DDE9; --text:#020617; --muted:#475569;
  --cyan-a:#0369A1; --cyan-b:#0369A1; --purple-a:#6D28D9; --purple-b:#A21CAF;
  --zl-ctl:#64748B; --zl-link:#0369A1; --zl-bg2:#EEF2F8; --zl-white:#020617; --zl-focus:#0F172A;
  --zl-dis-bg:#FBBFAB; --zl-dis-fg:#0F172A; --zl-state-err:#B91C1C; --zl-state-ok:#166534;
}
:root[data-theme="light"] :is(.zl-header,.zl-hero,.zl-band,footer){
  --bg:#0B1220; --bg-raised:#111B30; --bg-card:#111B30; --line:#24324D; --text:#E8EEF8; --muted:#A9B6CC;
  --cyan-a:#4FACFE; --cyan-b:#00F2FE; --purple-a:#B174FF; --purple-b:#FF60EC;
  --zl-ctl:#5B6F94; --zl-link:#4FACFE; --zl-white:#FFFFFF; --zl-focus:#FFFFFF; --zl-bg2:#17243E;
  --zl-dis-bg:#475B82; --zl-dis-fg:#E8EEF8; --zl-state-err:#FF7A7A; --zl-state-ok:#3EF27A;
  color-scheme:dark;
}
/* Result panel for the contact, quote and audit forms (assets/form-result.js). Colour comes from the state tokens, so it
   is darker on the light page and bright inside the navy footer. */
.zl-result{--zl-result:var(--zl-state-ok);display:flex;gap:.875rem;align-items:flex-start;margin-top:1.5rem;padding:1rem 1.125rem;border:2px solid var(--zl-result);border-radius:4px;background:color-mix(in srgb,var(--zl-result) 12%,transparent);color:var(--text);text-align:left;scroll-margin:6rem}
.zl-result.is-err{--zl-result:var(--zl-state-err)}
.zl-result:focus-visible{outline:2px solid var(--zl-focus);outline-offset:3px}
.zl-result svg{flex:none;width:1.75rem;height:1.75rem;fill:none;stroke:var(--zl-result);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.zl-result>div{min-width:0;overflow-wrap:anywhere}
.zl-result-h{margin:0;font-size:1.125rem;font-weight:700;line-height:1.3}
.zl-result-m{margin:.25rem 0 0;font-size:.9375rem;line-height:1.5}
@media (forced-colors:active){.zl-result{border-color:CanvasText}.zl-result svg{stroke:CanvasText}}
:root[data-theme="light"] .zl-panel{
  --bg:#F8FAFC; --bg-raised:#EEF2F8; --bg-card:#FFFFFF; --line:#D5DDE9; --text:#020617; --muted:#475569;
  --zl-ctl:#64748B; --zl-link:#0369A1; --zl-white:#020617; --zl-focus:#0F172A;
  color-scheme:light;
}
/* Old Tailwind sections in the light theme: status colours that are hard-coded for a dark ground get darker equivalents. */
:root[data-theme="light"] .text-\[\#ff7a7a\]{color:#B91C1C}
:root[data-theme="light"] .text-\[\#ffb84d\]{color:#92400E}
:root[data-theme="light"] .text-\[\#ffd28a\]{color:#78350F}
:root[data-theme="light"] .text-\[\#3ef27a\]{color:#166534}
:root[data-theme="light"] input.field-invalid,:root[data-theme="light"] select.field-invalid,:root[data-theme="light"] textarea.field-invalid{border-color:#B91C1C!important;box-shadow:0 0 0 1px #B91C1C}
:root[data-theme="light"] .field-invalid.grid,:root[data-theme="light"] div.field-invalid{outline-color:#B91C1C}
:root[data-theme="light"] :is(.zl-header,.zl-hero,.zl-band,footer) .text-\[\#ff7a7a\]{color:#ff7a7a}
:root[data-theme="light"] :is(.zl-header,.zl-hero,.zl-band,footer) .text-\[\#ffb84d\]{color:#ffb84d}
:root[data-theme="light"] :is(.zl-header,.zl-hero,.zl-band,footer) .text-\[\#ffd28a\]{color:#ffd28a}
:root[data-theme="light"] :is(.zl-header,.zl-hero,.zl-band,footer) .text-\[\#3ef27a\]{color:#3ef27a}
:root[data-theme="light"] footer input.field-invalid,:root[data-theme="light"] footer select.field-invalid,:root[data-theme="light"] footer textarea.field-invalid{border-color:#ff7a7a!important;box-shadow:0 0 0 1px #ff7a7a}
:root[data-theme="light"] .text-white,
:root[data-theme="light"] .text-white\/80,
:root[data-theme="light"] .text-white\/85,
:root[data-theme="light"] .text-white\/90,
:root[data-theme="light"] .hover\:text-white:hover{color:var(--text)}

/* ---- Light theme, second pass (W-020): "Navy and sky". JK picked Option A from the mocks on 28/10/2026. Light theme only: every
   selector below starts with :root[data-theme="light"], so the dark theme (the default) is not touched. The page alternates a
   pale sky ground with deep navy bands (.zl-alt), headings get a brand rule, cards get a coloured top edge, the recommended
   price row is a highlighted block, and the closing bands are navy-indigo. From 1536 px the container and the type grow so a
   wide screen is filled. Colours are the brand navy, cyan and violet already used in the header and hero. ---- */
:root[data-theme="light"]{
  --bg:#F2F7FD; --bg-raised:#E4EEFA; --bg-card:#FFFFFF; --line:#C5D6EB; --text:#0B1B38; --muted:#3A4F70;
  --zl-white:#0B1B38; --zl-link:#0B5CAD; --ba:#0369A1; --bb:#6D28D9;
}
:root[data-theme="light"] body{background:var(--bg)}

/* Navy bands: the same dark tokens the header and footer use, so everything inside reads correctly. */
:root[data-theme="light"] .zl-alt{
  --bg:#0B1220; --bg-raised:#111B30; --bg-card:#14223D; --line:#2A3B5C; --text:#E8EEF8; --muted:#B4C2DA;
  --zl-white:#FFFFFF; --zl-link:#7CC4FF; --zl-ctl:#5B6F94; --zl-focus:#FFFFFF; --ba:#4FACFE; --bb:#B174FF;
  background:linear-gradient(160deg,#0F172A 0%,#12305F 70%,#2C2766 100%); color:var(--text);
}
:root[data-theme="light"] .zl-alt .text-\[\#ff7a7a\]{color:#ff7a7a}
:root[data-theme="light"] .zl-alt .text-\[\#ffb84d\]{color:#ffb84d}
:root[data-theme="light"] .zl-alt .text-\[\#ffd28a\]{color:#ffd28a}
:root[data-theme="light"] .zl-alt .text-\[\#3ef27a\]{color:#3ef27a}

/* Hero: same navy, with a cyan glow top right and a violet glow bottom left. */
:root[data-theme="light"] .zl-hero{
  background:radial-gradient(800px 380px at 85% 0%,rgba(0,242,254,.22),transparent 65%),
             radial-gradient(700px 360px at 0% 100%,rgba(168,85,247,.28),transparent 60%),
             linear-gradient(165deg,#0F172A 0%,#12305F 62%,#2C2766 100%);
}

/* Bigger headings with a brand rule. */
:root[data-theme="light"] .zl-h{font-size:clamp(2.1rem,4.6vw,3.5rem)}
:root[data-theme="light"] .zl-h::after{content:"";display:block;width:84px;height:6px;margin-top:1.1rem;border-radius:3px;background:linear-gradient(90deg,#0EA5C6,#5B6CE0,#A855F7)}
:root[data-theme="light"] .zl-intro{font-size:clamp(1.25rem,1.8vw,1.6rem)}

/* Cards: white (or deep navy inside a navy band), coloured top edge, soft shadow. */
:root[data-theme="light"] :is(.zl-plan,.zl-callout){border:0;border-radius:6px;padding:2rem;box-shadow:inset 0 6px 0 var(--ba),0 18px 40px -22px rgba(11,27,56,.5)}
:root[data-theme="light"] .zl-plans>.zl-plan:nth-child(even){box-shadow:inset 0 6px 0 var(--bb),0 18px 40px -22px rgba(11,27,56,.5)}
:root[data-theme="light"] .zl-plan h3{font-size:1.75rem}
:root[data-theme="light"] #quote :is(.glow-border,.card-elevated){border:0;border-radius:6px;box-shadow:inset 0 6px 0 var(--ba),0 18px 40px -22px rgba(11,27,56,.4)}

/* "Who we help" rows become cards with a coloured left edge. */
:root[data-theme="light"] .zl-rows{border-top:0;display:grid;gap:1rem}
:root[data-theme="light"] .zl-rows li{border:0;border-radius:6px;background:#fff;color:#0B1B38;box-shadow:inset 6px 0 0 #0369A1,0 14px 30px -20px rgba(11,27,56,.5)}
:root[data-theme="light"] .zl-rows li:nth-child(even){box-shadow:inset 6px 0 0 #6D28D9,0 14px 30px -20px rgba(11,27,56,.5)}
:root[data-theme="light"] .zl-row{padding:1.75rem 2rem;color:#0B1B38}
:root[data-theme="light"] .zl-row .zl-name{font-size:clamp(1.75rem,3.2vw,2.75rem);color:#12305F}
:root[data-theme="light"] .zl-row .zl-line{color:#3A4F70}
:root[data-theme="light"] .zl-row .zl-go{display:inline-block;padding:.5rem 1.1rem;border-radius:999px;background:#0B1B38;color:#fff;text-decoration:none}
/* Small phones: the row cards may shrink and wrap (a long word at a large root font stretched them past a 320 px screen). */
:root[data-theme="light"] .zl-rows li,:root[data-theme="light"] .zl-row,:root[data-theme="light"] .zl-row>*{min-width:0}
:root[data-theme="light"] .zl-row .zl-name,:root[data-theme="light"] .zl-row .zl-line{overflow-wrap:anywhere}
@media (max-width:399px){
  :root[data-theme="light"] .zl-row{padding:1.25rem 1rem}
  :root[data-theme="light"] .zl-row .zl-name{font-size:1.5rem}
  :root[data-theme="light"] :is(.zl-plan,.zl-callout){padding:1.25rem}
}

/* Pricing: the recommended row stands out with an orange edge and a lighter navy block. */
:root[data-theme="light"] .zl-table{border:0;box-shadow:0 18px 40px -22px rgba(0,0,0,.6)}
:root[data-theme="light"] .zl-table tr.zl-pop{box-shadow:inset 8px 0 0 #FF7849;background:#1B3868}

/* Closing bands: brand navy-indigo, bigger type. */
:root[data-theme="light"] .zl-band{background:linear-gradient(120deg,#12305F 0%,#2C2766 100%);border:0}
:root[data-theme="light"] .zl-band h2{font-size:clamp(2.4rem,5.6vw,4.5rem);max-width:14ch}

/* Wide screens (light theme only): the container grows from 1280 to 1560 px and the type scales with the screen, so a 1920 or
   2000 px window is filled instead of leaving blank gutters. Nothing changes below 1536 px. */
@media (min-width:1536px){
  :root[data-theme="light"]{font-size:clamp(16px,calc(.55vw + 8px),20px)}
  :root[data-theme="light"] .max-w-7xl{max-width:1560px}
  :root[data-theme="light"] .zl-sect{padding-top:7rem;padding-bottom:7rem}
  :root[data-theme="light"] .zl-hero{padding-top:10rem;padding-bottom:7rem}
  :root[data-theme="light"] .zl-hero h1{font-size:clamp(3.75rem,4.2vw,5.5rem);max-width:15ch}
  :root[data-theme="light"] .zl-hero-slim h1{font-size:clamp(3.25rem,3.6vw,4.75rem)}
  :root[data-theme="light"] .zl-h{font-size:clamp(2.75rem,3vw,3.75rem)}
  :root[data-theme="light"] .zl-lead,:root[data-theme="light"] .zl-sub{max-width:52ch}
  :root[data-theme="light"] .zl-intro{max-width:60ch}
  :root[data-theme="light"] .zl-prose p{max-width:70ch}
  :root[data-theme="light"] .zl-plans{gap:2rem}
}

/* ---- Client pages (W-021): accept-quote, discovery and self-hosting load this file now. Look only. ---- */
/* Classes their markup uses that styles.css never had (W-018 class-check list); values are the standard ones. */
.italic{font-style:italic}
.border-\[var\(--cyan-a\)\]{border-color:var(--cyan-a)}
.bg-\[var\(--cyan-b\)\]\/\[0\.08\]{background-color:color-mix(in srgb,var(--cyan-b) 8%,transparent)}
.bg-\[\#ff7a7a\]\/\[0\.08\]{background-color:color-mix(in srgb,#ff7a7a 8%,transparent)}
.bg-\[\#ffd166\]\/\[0\.06\]{background-color:color-mix(in srgb,#ffd166 6%,transparent)}
.border-\[\#ff7a7a\]\/40{border-color:color-mix(in srgb,#ff7a7a 40%,transparent)}
.border-\[\#ffd166\]\/40{border-color:color-mix(in srgb,#ffd166 40%,transparent)}
.py-10{padding-top:2.5rem;padding-bottom:2.5rem}
/* The "Choose file" buttons: the markup asks for white text on the raised-card colour, which is pale on pale in the light theme.
   Tokens give readable contrast in both themes (text colour on the raised card, a visible border, a stronger hover). */
form input[type="file"]::file-selector-button{margin-right:.75rem;padding:.5rem .875rem;border:1px solid var(--zl-ctl);border-radius:4px;background:var(--bg-raised);color:var(--text);font-family:inherit;font-size:.875rem;font-weight:600;cursor:pointer}
form input[type="file"]::file-selector-button:hover{background:var(--line)}
/* The questionnaire gets the same flat 4 px cards as the quote form; the accept form may shrink on a small phone. */
#discoveryForm.glow-border,#discoveryForm.card-elevated{border-radius:4px;background:var(--bg-card)}
#discoveryForm :is(.rounded-xl,.rounded-2xl,.rounded-lg){border-radius:4px}
#acceptForm{min-width:0;max-width:100%}
#acceptForm :is(input,select,textarea){max-width:100%;min-width:0}
:root[data-theme="light"] #discoveryForm.card-elevated{border:0;box-shadow:inset 0 6px 0 var(--ba),0 18px 40px -22px rgba(11,27,56,.4)}

/* ---- W-026: six header links, and footer rows that wrap instead of overlapping ---- */
/* The header now has "Styles" as well. From 1280 to 1439 px the logo is a little smaller and the gaps between links tighter so the
   whole row still fits on one line; from 1440 px up nothing changes. Below 1280 px the links are in the menu button, as before. */
@media (min-width:1280px) and (max-width:1439px){
  .zl-header nav[aria-label="Main"]{gap:1.125rem;margin:0 .5rem!important}
  .zl-logo-icon{height:44px}
  .zl-logo-word{height:38px}
}
/* Footer: every row that puts the logo or text beside the links may wrap onto a second line when it runs out of room, so the
   logo, the copyright line and the links can never sit on top of each other at any width (JK saw the wordmark run into the
   copyright text at about 2000 px). */
@media (min-width:640px){footer .flex.flex-col.sm\:flex-row{flex-wrap:wrap;row-gap:1rem}}