/* ==========================================================================
   LabZila design system  —  added 2026-09-08
   --------------------------------------------------------------------------
   Palette is keyed to logo.png itself: the wordmark samples as #64748B
   (slate blue-grey), the accent as #F65D2C (orange). Orange is the primary /
   CTA colour; deepened slate carries the dark blocks.

   Loaded from includes/header.php AFTER the Tailwind Play CDN so the .lz-*
   component classes and the small set of global corrections at the bottom
   win over the utility classes already in the page markup.
   ========================================================================== */

:root{
  --lz-brand:#F65D2C;
  --lz-brand-d:#D9451A;
  --lz-brand-text:#BF3B14;   /* orange for TEXT on light grounds — 5.45:1 on white */
  --lz-brand-tint:#FDEDE7;
  --lz-slate:#64748B;        /* the logo wordmark colour */
  --lz-deep:#283444;
  --lz-deep-2:#1C2532;
  --lz-deep-tint:#EDF0F5;
  --lz-ground:#F2F4F7;
  --lz-paper:#FFFFFF;
  --lz-ink:#18212D;
  --lz-ink-soft:#586576;
  --lz-ink-faint:#8895A6;
  --lz-rule:#E2E6EC;

  --lz-f-display:"Poppins","Helvetica Neue",Arial,sans-serif;
  --lz-f-body:"IBM Plex Sans","Segoe UI",Helvetica,Arial,sans-serif;
  --lz-f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;

  --lz-utilh:40px;         /* utility-bar height; nav + body offset by this */
  --lz-r:16px;
  --lz-r-sm:10px;
  --lz-shadow:0 18px 44px -22px rgba(24,33,45,.30);
  --lz-shadow-sm:0 8px 24px -14px rgba(24,33,45,.26);
}

/* ---------- type ---------- */
body{font-family:var(--lz-f-body);color:var(--lz-ink);background:var(--lz-ground)}
h1,h2,h3,h4,h5,.lz-display{font-family:var(--lz-f-display);letter-spacing:-.015em}
h1{line-height:1.08}
h1 .lz-thin{display:block;font-weight:400;color:var(--lz-deep)}

/* ---------- utility bar ---------- */
/* The bar sits in normal flow and scrolls away; the nav is sticky on every
   page (navbar.php defaults to sticky), so it pins to the very top once the
   bar has scrolled past. No fixed overlay, no body offset, no dead band. */
.lz-util{
  height:var(--lz-utilh);
  background:var(--lz-deep);color:#D5DDE7;font-size:13.5px;display:flex;align-items:center;
}
nav#header{top:0 !important}
@media (max-width:760px){:root{--lz-utilh:38px}}

/* Those clearance paddings existed only to duck under a FIXED navbar. With a
   sticky nav they render as an empty band at the top of every page. */
/* The clearance lives in two different places depending on the page: on the
   <section> itself (careers, demo, partners, privacy, security, terms) or on
   the inner container (the 16 landing pages, pt-16/20/24). Neutralise both. */
body > section:first-of-type:not(.lz-hero){padding-top:clamp(26px,3vw,44px) !important}
body > section:first-of-type:not(.lz-hero) > div:not([class*="absolute"]){padding-top:0 !important}
.lz-util__in{max-width:88rem;margin:0 auto;padding:0 1rem;width:100%;display:flex;align-items:center;gap:18px}
@media (min-width:640px){.lz-util__in{padding-inline:1.5rem}}
@media (min-width:1024px){.lz-util__in{padding-inline:2.5rem}}
.lz-util strong{color:#fff;font-weight:500}
.lz-util .sep{color:rgba(255,255,255,.28)}
.lz-util a{color:inherit;text-decoration:none}
.lz-util__soc{margin-left:auto;display:flex;align-items:center;gap:14px}
.lz-util__soc a{opacity:.85}
.lz-util__soc a:hover{opacity:1;color:var(--lz-brand)}
@media (max-width:760px){.lz-util__hide{display:none}}

/* ---------- buttons ---------- */
.lz-btn{
  display:inline-flex;align-items:center;gap:9px;text-decoration:none;
  font-family:var(--lz-f-display);font-weight:500;font-size:15px;
  padding:13px 28px;border-radius:999px;border:2px solid transparent;transition:.18s;
}
.lz-btn--brand{background:var(--lz-brand);color:#fff;border-color:var(--lz-brand);box-shadow:var(--lz-shadow-sm)}
.lz-btn--brand:hover{background:var(--lz-brand-d);border-color:var(--lz-brand-d);transform:translateY(-2px);color:#fff}
.lz-btn--ghost{border-color:var(--lz-rule);color:var(--lz-ink);background:var(--lz-paper)}
.lz-btn--ghost:hover{border-color:var(--lz-deep);color:var(--lz-deep)}
.lz-btn--onDeep{background:#fff;color:var(--lz-deep);border-color:#fff}
.lz-btn--onDeep:hover{transform:translateY(-2px)}
.lz-btn--sm{padding:10px 22px;font-size:14px}

/* ---------- eyebrow chips ---------- */
.lz-eyebrow{
  display:inline-block;background:var(--lz-deep-tint);color:var(--lz-deep);
  font-family:var(--lz-f-mono);font-size:11px;font-weight:500;letter-spacing:.16em;
  text-transform:uppercase;padding:7px 14px;border-radius:999px;margin-bottom:18px;
}
.lz-eyebrow--brand{background:var(--lz-brand-tint);color:var(--lz-brand-d)}

/* ---------- hero ---------- */
.lz-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(120% 90% at 88% 12%, var(--lz-deep-tint) 0%, transparent 58%),
    linear-gradient(180deg, var(--lz-paper) 0%, var(--lz-ground) 100%);
}
.lz-hexfield{position:absolute;inset:0;pointer-events:none;opacity:.5}
.lz-hexfield svg{position:absolute;stroke:var(--lz-deep);fill:none;opacity:.14}
.lz-hex-a{width:230px;top:-40px;left:-60px}
.lz-hex-b{width:150px;bottom:120px;left:6%}
.lz-hex-c{width:320px;top:40px;right:-90px;stroke:var(--lz-brand);opacity:.12}

/* ---------- hexagon device ---------- */
.lz-hex{
  width:60px;height:66px;display:grid;place-items:center;flex:none;
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
}
.lz-hex svg{width:26px;height:26px;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}

/* ---------- overlap trio ---------- */
.lz-trio{position:relative;z-index:5;margin-top:clamp(-150px,-11vw,-104px)}
.lz-trio__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-radius:var(--lz-r);overflow:hidden;box-shadow:var(--lz-shadow)}
.lz-tcard{padding:32px 28px 30px;display:flex;flex-direction:column;gap:14px}
.lz-tcard--brand{background:var(--lz-brand);color:#fff}
.lz-tcard--deep{background:var(--lz-deep);color:#fff}
.lz-tcard--paper{background:var(--lz-paper);color:var(--lz-ink)}
.lz-tcard h3{font-size:19px;margin:0}
.lz-tcard p{font-size:14.5px;line-height:1.6;margin:0}
.lz-tcard--brand p,.lz-tcard--deep p{color:rgba(255,255,255,.86)}
.lz-tcard--paper p{color:var(--lz-ink-soft)}
.lz-tcard--brand .lz-hex,.lz-tcard--deep .lz-hex{background:rgba(255,255,255,.16)}
.lz-tcard--brand .lz-hex svg,.lz-tcard--deep .lz-hex svg{stroke:#fff}
.lz-tcard--paper .lz-hex{background:var(--lz-brand-tint)}
.lz-tcard--paper .lz-hex svg{stroke:var(--lz-brand-d)}
@media (max-width:860px){.lz-trio__grid{grid-template-columns:1fr}}

/* ---------- cards ---------- */
.lz-card{
  background:var(--lz-paper);border:1px solid var(--lz-rule);border-radius:var(--lz-r);
  padding:26px 24px 22px;transition:.2s;
}
.lz-card:hover{transform:translateY(-5px);box-shadow:var(--lz-shadow);border-color:transparent}
.lz-card__k{font-family:var(--lz-f-mono);font-size:10.5px;letter-spacing:.15em;color:var(--lz-brand);text-transform:uppercase}
.lz-hexbullet{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.lz-hexbullet li{font-size:14.5px;color:var(--lz-ink-soft);padding-left:22px;position:relative}
.lz-hexbullet li::before{
  content:"";position:absolute;left:0;top:.52em;width:11px;height:11px;background:var(--lz-deep-tint);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
}
.lz-go{font-family:var(--lz-f-display);font-weight:500;font-size:14px;color:var(--lz-deep);text-decoration:none;display:inline-flex;align-items:center;gap:7px}
.lz-go:hover{color:var(--lz-brand)}
.lz-go span{transition:transform .18s}
.lz-card:hover .lz-go span{transform:translateX(4px)}

/* ---------- section rhythm ---------- */
.lz-sec{padding:clamp(56px,7vw,104px) 0}
.lz-sec--paper{background:var(--lz-paper)}
.lz-head{max-width:70ch;margin-bottom:clamp(30px,3.6vw,50px)}
.lz-head--mid{margin-inline:auto;text-align:center}
.lz-lede{color:var(--lz-ink-soft);font-size:clamp(15.5px,1.2vw,17.5px);max-width:60ch}
.lz-head--mid .lz-lede{margin-inline:auto}

/* ---------- footer ---------- */
.lz-foot{background:var(--lz-deep-2);color:#CBD4E0}
.lz-foot h4{font-family:var(--lz-f-display);color:#fff}
.lz-foot a{color:#A3B0C1;text-decoration:none;transition:.15s}
.lz-foot a:hover{color:var(--lz-brand)}
.lz-foot__soc a{
  width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:center;color:#CBD4E0;
}
.lz-foot__soc a:hover{background:var(--lz-brand);color:#fff}
.lz-foot__bar{border-top:1px solid rgba(255,255,255,.12);color:#8A97A8}
.lz-foot__bar a{color:#8A97A8}
.lz-foot__bar a:hover{color:#fff}

/* ==========================================================================
   Global corrections applied to the existing page markup.
   These are deliberately few. Per-page bodies are being rebuilt in batches;
   until a page is converted these keep it consistent with the new system.
   ========================================================================== */

/* 1. Retire the blurred decorative blobs — the single biggest "generic
      template" tell, present on 29 pages. Purely decorative, safe to drop. */
.blur-3xl{display:none !important}

/* 2. Primary calls to action become pills, matching the new button system. */
a.bg-primary,button.bg-primary,a.bg-white.text-primary{border-radius:999px !important}

/* 3. Headings pick up the display face even in un-converted page markup. */
h1,h2,h3{font-family:var(--lz-f-display)}

/* 4. Soften the hard slate-900 hero blocks toward the brand slate so the old
      and new sections sit in one colour family. */
.from-slate-900{--tw-gradient-from:#1C2532 var(--tw-gradient-from-position) !important}
.via-slate-800{--tw-gradient-via:#283444 var(--tw-gradient-via-position) !important}
.to-slate-900{--tw-gradient-to:#1C2532 var(--tw-gradient-to-position) !important}

@media (prefers-reduced-motion: reduce){
  .lz-btn,.lz-card,.lz-go span{transition:none !important}
  .lz-btn:hover,.lz-card:hover{transform:none !important}
}

/* ==========================================================================
   Converted page sections (batch 1 — homepage)
   ========================================================================== */

/* hero */
.lz-hero__in{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:clamp(28px,4vw,56px);align-items:center;
  padding:clamp(44px,5.5vw,80px) 0 clamp(150px,13vw,200px);
}
@media (max-width:960px){.lz-hero__in{grid-template-columns:1fr;padding-bottom:clamp(130px,22vw,170px)}}
.lz-hero__cta{display:flex;flex-wrap:wrap;gap:14px}
.lz-ticks{display:flex;flex-wrap:wrap;gap:10px 26px;margin-top:28px}
.lz-tick{display:flex;align-items:center;gap:8px;font-size:14.5px;color:var(--lz-ink-soft)}
.lz-tick i{
  width:19px;height:19px;border-radius:50%;background:var(--lz-brand-tint);color:var(--lz-brand-d);
  display:grid;place-items:center;font-style:normal;font-size:11px;font-weight:700;flex:none;
}
.lz-hero__art{position:relative}
.lz-hero__art img{width:100%;border-radius:var(--lz-r);box-shadow:var(--lz-shadow);background:var(--lz-paper)}
.lz-hero__badge{
  position:absolute;left:-14px;bottom:-24px;background:var(--lz-paper);border-radius:var(--lz-r);
  box-shadow:var(--lz-shadow);padding:16px 20px;text-align:center;min-width:150px;
}
.lz-hero__badge b{display:block;font-family:var(--lz-f-display);font-size:30px;font-weight:700;color:var(--lz-brand);line-height:1}
.lz-hero__badge span{display:block;font-size:12.5px;color:var(--lz-ink-soft);margin-top:5px;line-height:1.35}
@media (max-width:960px){.lz-hero__badge{left:auto;right:8px}}

/* stats */
.lz-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px}
@media (max-width:820px){.lz-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.lz-stat{text-align:center}
.lz-stat b{display:block;font-family:var(--lz-f-display);font-size:clamp(34px,4vw,46px);font-weight:700;color:var(--lz-brand);line-height:1;margin-bottom:8px}
.lz-stat span{font-size:14.5px;color:var(--lz-ink-soft)}
.lz-stat strong{color:var(--lz-ink);font-weight:600}

/* story */
.lz-story{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(30px,5vw,68px);align-items:center}
@media (max-width:900px){.lz-story{grid-template-columns:1fr}}
.lz-story__art{position:relative}
.lz-story__art img{width:100%;border-radius:var(--lz-r);box-shadow:var(--lz-shadow)}
.lz-story__art::before{
  content:"";position:absolute;width:170px;height:190px;left:-26px;top:-26px;z-index:-1;
  background:var(--lz-brand-tint);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
}
.lz-story__stat{
  position:absolute;right:-18px;bottom:-22px;background:var(--lz-deep);color:#fff;
  border-radius:var(--lz-r);padding:18px 22px;box-shadow:var(--lz-shadow);max-width:230px;
}
.lz-story__stat b{display:block;font-family:var(--lz-f-display);font-size:22px;font-weight:700;line-height:1.1}
.lz-story__stat span{display:block;font-size:12.5px;color:rgba(255,255,255,.8);margin-top:6px;line-height:1.4}
.lz-prose{margin-top:18px;display:flex;flex-direction:column;gap:14px;color:var(--lz-ink-soft);font-size:15.5px;line-height:1.75}
.lz-prose b{color:var(--lz-ink);font-weight:600}
.lz-prose b.lz-hl{color:var(--lz-brand-d)}
.lz-note{
  margin-top:26px;background:var(--lz-paper);border:1px solid var(--lz-rule);
  border-left:4px solid var(--lz-brand);border-radius:var(--lz-r-sm);padding:20px 22px;box-shadow:var(--lz-shadow-sm);
}
.lz-note p{color:var(--lz-ink-soft);font-size:15px;margin:0}

/* 3-up grids */
.lz-grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:940px){.lz-grid3{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.lz-grid3{grid-template-columns:1fr}}

/* industry cards */
.lz-card--ind{display:flex;flex-direction:column;gap:14px}
.lz-hex--ind{width:56px;height:62px;background:var(--lz-brand-tint);color:var(--lz-brand-d);font-size:20px}
.lz-card--ind .lz-go{margin-top:auto}

/* capability cards */
.lz-cap{
  background:var(--lz-ground);border:1px solid transparent;border-radius:var(--lz-r);
  padding:26px 24px;transition:.2s;
}
.lz-cap:hover{background:var(--lz-paper);border-color:var(--lz-rule);box-shadow:var(--lz-shadow-sm);transform:translateY(-4px)}
.lz-cap__icon{
  width:48px;height:48px;border-radius:14px;background:var(--lz-brand-tint);color:var(--lz-brand-d);
  display:grid;place-items:center;font-size:19px;margin-bottom:16px;transition:.2s;
}
.lz-cap:hover .lz-cap__icon{background:var(--lz-brand);color:#fff}
.lz-cap h3{margin:0 0 9px;color:var(--lz-ink)}
.lz-cap p{margin:0;font-size:14.5px;color:var(--lz-ink-soft);line-height:1.65}
.lz-cap--ai{background:var(--lz-deep);color:#fff}
.lz-cap--ai:hover{background:var(--lz-deep-2);border-color:transparent}
.lz-cap--ai h3{color:#fff}
.lz-cap--ai p{color:rgba(255,255,255,.84)}
.lz-cap--ai .lz-cap__icon{background:rgba(255,255,255,.14);color:#fff}

/* CTA block */
.lz-cta{position:relative;overflow:hidden;background:var(--lz-deep);color:#fff;border-radius:var(--lz-r);padding:clamp(36px,5vw,62px)}
.lz-cta .lz-hexfield{opacity:.35}
.lz-cta .lz-hexfield svg{stroke:#fff;opacity:.16}
.lz-cta__in{position:relative;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(26px,4vw,52px);align-items:center}
@media (max-width:860px){.lz-cta__in{grid-template-columns:1fr}}
.lz-cta h2{color:#fff}
.lz-cta p{color:rgba(255,255,255,.82)}
.lz-eyebrow--onDeep{background:rgba(255,255,255,.14);color:#fff}
.lz-cta__box{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:var(--lz-r);padding:22px}
.lz-cta__box dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:14.5px}
.lz-cta__box dt{font-family:var(--lz-f-mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:#AFC0D4;padding-top:3px}
.lz-cta__box dd{margin:0;color:#fff}
.lz-cta__box .fine{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.16);font-size:13px;color:rgba(255,255,255,.74)}

/* FAQ */
.lz-faq{display:flex;flex-direction:column;gap:12px}
.lz-faq details{background:var(--lz-paper);border:1px solid var(--lz-rule);border-radius:var(--lz-r-sm);transition:.18s}
.lz-faq details[open]{box-shadow:var(--lz-shadow-sm);border-color:transparent}
.lz-faq summary{
  cursor:pointer;list-style:none;padding:18px 54px 18px 22px;position:relative;
  font-family:var(--lz-f-display);font-weight:500;font-size:16.5px;color:var(--lz-ink);
}
.lz-faq summary::-webkit-details-marker{display:none}
.lz-faq summary::after{
  content:"+";position:absolute;right:20px;top:50%;transform:translateY(-50%);
  width:26px;height:26px;border-radius:50%;background:var(--lz-brand-tint);color:var(--lz-brand-d);
  display:grid;place-items:center;font-family:var(--lz-f-display);font-size:16px;line-height:1;
}
.lz-faq details[open] summary::after{content:"\2013";background:var(--lz-brand);color:#fff}
.lz-faq p{padding:0 22px 20px;color:var(--lz-ink-soft);font-size:15px;margin:0}

/* last call */
.lz-lastcall{background:var(--lz-deep-2);color:#fff;padding:clamp(46px,6vw,76px) 0}
.lz-lastcall h3{color:#fff;margin:0 0 14px}
.lz-lastcall p{color:#A3B0C1;max-width:60ch;margin:0 auto 26px;font-size:15.5px}

/* hero device stack — laptop with the phone overlapping its right edge */
.lz-hero__art{padding-right:34px}
.lz-hero__laptop{width:100%}
.lz-hero__phone{
  position:absolute;right:-6px;top:34%;width:23%;max-width:132px;height:auto;
  border-radius:12px;box-shadow:var(--lz-shadow);background:var(--lz-paper);
}
@media (max-width:560px){.lz-hero__phone{width:26%;right:-2px}}

/* ==========================================================================
   Landing pages (10 feature + 6 industry) — they all share one class
   signature, so the new design language is applied here rather than by
   editing 16 files. Page headers stay dark (they read as section headers
   under the light homepage) but take the brand slate and the hexagon accents.
   ========================================================================== */

/* the old flat navy becomes the brand slate */
.bg-\[\#0d1427\]{background-color:var(--lz-deep) !important}
.bg-\[\#141d33\]{background-color:var(--lz-deep) !important}

/* Poppins ships 400-700 here; font-black (900) would render synthetically */
.font-black{font-weight:700 !important}

/* section grounds line up with the homepage */
.bg-background{background-color:var(--lz-ground) !important}

/* cards pick up the homepage radius, hover lift and border treatment */
.rounded-2xl{border-radius:var(--lz-r) !important}
.rounded-xl{border-radius:var(--lz-r-sm) !important}
section .border-border{border-color:var(--lz-rule) !important}
section .bg-white.border.border-border,
section .rounded-2xl.bg-white{transition:transform .2s ease, box-shadow .2s ease}
section .bg-white.border.border-border:hover,
section .rounded-2xl.bg-white:hover{transform:translateY(-4px);box-shadow:var(--lz-shadow)}

/* icon chips take the brand tint / hexagon feel */
.bg-primary\/10{background-color:var(--lz-brand-tint) !important}

/* eyebrow pills on landing pages match .lz-eyebrow */
.bg-orange-50{background-color:var(--lz-brand-tint) !important}
.bg-white\/10,.bg-white\/15{background-color:rgba(255,255,255,.12) !important}

/* CTAs become pills everywhere on these pages */
section a.bg-primary,
section a.bg-white.text-primary,
section a.border-2.border-white\/70{border-radius:999px !important}
section a.bg-primary{box-shadow:var(--lz-shadow-sm)}
section a.bg-primary:hover{transform:translateY(-2px)}

/* FAQ accordions on landing pages match the homepage accordion */
section details.rounded-2xl{border-radius:var(--lz-r-sm) !important}
section details summary span.faq-icon{background:var(--lz-brand-tint) !important;color:var(--lz-brand-d) !important}
section details[open] summary span.faq-icon{background:var(--lz-brand) !important;color:#fff !important}

/* ==========================================================================
   Landing-page heroes take the HOMEPAGE light treatment.
   Scoped to the first <section> on the page so the mid-page dark blocks
   (which share the same bg-[#0d1427] class) are untouched.
   ========================================================================== */
:root{--lz-hero-sel-guard:1}

body > section:first-of-type.bg-\[\#0d1427\]{
  background-color:var(--lz-paper) !important;
  background-image:
    radial-gradient(120% 90% at 88% 10%, var(--lz-deep-tint) 0%, transparent 58%),
    linear-gradient(180deg, var(--lz-paper) 0%, var(--lz-ground) 100%) !important;
  color:var(--lz-ink) !important;
}
/* white-on-dark decorations don't read on a light ground */
body > section:first-of-type.bg-\[\#0d1427\] > div[class*="absolute"]{display:none !important}

/* text */
/* ...but NOT text that sits on the brand orange — those stay white. */
body > section:first-of-type.bg-\[\#0d1427\] .text-white:not(.bg-primary):not(.bg-primary-dark),
body > section:first-of-type.bg-\[\#0d1427\] .text-slate-200{color:var(--lz-ink) !important}
body > section:first-of-type.bg-\[\#0d1427\] .bg-primary,
body > section:first-of-type.bg-\[\#0d1427\] .bg-primary *,
body > section:first-of-type.bg-\[\#0d1427\] .bg-primary-dark{color:#fff !important}
body > section:first-of-type.bg-\[\#0d1427\] .text-slate-300,
body > section:first-of-type.bg-\[\#0d1427\] .text-slate-400{color:var(--lz-ink-soft) !important}
body > section:first-of-type.bg-\[\#0d1427\] nav a:hover{color:var(--lz-brand) !important}

/* eyebrow chip */
body > section:first-of-type.bg-\[\#0d1427\] .bg-white\/10{
  background:var(--lz-deep-tint) !important;border-color:transparent !important;color:var(--lz-deep) !important;
}
body > section:first-of-type.bg-\[\#0d1427\] .border-white\/20{border-color:transparent !important}

/* secondary CTA becomes the ghost pill */
body > section:first-of-type.bg-\[\#0d1427\] a.border-white\/70{
  border-color:var(--lz-rule) !important;color:var(--lz-ink) !important;background:var(--lz-paper) !important;
}
body > section:first-of-type.bg-\[\#0d1427\] a.border-white\/70:hover{
  border-color:var(--lz-deep) !important;color:var(--lz-deep) !important;
}

/* trust-point tiles become paper cards */
body > section:first-of-type.bg-\[\#0d1427\] .bg-white\/5{
  background:var(--lz-paper) !important;border-color:var(--lz-rule) !important;box-shadow:var(--lz-shadow-sm);
}
body > section:first-of-type.bg-\[\#0d1427\] .border-white\/10{border-color:var(--lz-rule) !important}
body > section:first-of-type.bg-\[\#0d1427\] .bg-primary\/20{
  background:var(--lz-brand-tint) !important;color:var(--lz-brand-d) !important;
}

/* ==========================================================================
   Anything sitting on the brand orange takes white text.
   (The pricing billing toggle had no colour of its own and inherited the
   body ink, giving dark text on orange.)
   ========================================================================== */
a.bg-primary,button.bg-primary,span.bg-primary,label.bg-primary,
a.bg-primary-dark,button.bg-primary-dark,
.lz-btn--brand,.lz-btn--brand:hover{color:#fff !important}
a.bg-primary *,button.bg-primary *,span.bg-primary *{color:inherit}

/* ==========================================================================
   Landing-page hero: give the very light ground some corner interest —
   hexagon outlines and soft tints, replacing the white-on-dark decorations
   that were hidden when the hero went light.
   ========================================================================== */
body > section:first-of-type:not(.lz-hero){
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 112'%3E%3Cpolygon points='50,2 97,29 97,83 50,110 3,83 3,29' fill='none' stroke='%23F65D2C' stroke-opacity='0.16' stroke-width='2.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 112'%3E%3Cpolygon points='50,2 97,29 97,83 50,110 3,83 3,29' fill='none' stroke='%23283444' stroke-opacity='0.14' stroke-width='2.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 112'%3E%3Cpolygon points='50,2 97,29 97,83 50,110 3,83 3,29' fill='none' stroke='%23283444' stroke-opacity='0.10' stroke-width='3'/%3E%3C/svg%3E"),
    radial-gradient(58% 70% at 96% 4%, rgba(246,93,44,.10) 0%, transparent 62%),
    radial-gradient(52% 62% at 2% 100%, rgba(40,52,68,.10) 0%, transparent 60%),
    linear-gradient(180deg, var(--lz-paper) 0%, var(--lz-ground) 100%) !important;
  background-repeat:no-repeat !important;
  background-position:
    right -70px top -50px,
    left -60px bottom -70px,
    right 12% bottom -30px,
    right top, left bottom, center !important;
  background-size:300px auto, 260px auto, 150px auto, auto, auto, auto !important;
}
@media (max-width:860px){
  body > section:first-of-type:not(.lz-hero){background-size:180px auto,160px auto,0 0,auto,auto,auto !important}
}

/* ==========================================================================
   Readable text in the now-LIGHT heroes.
   The old dark heroes used pale tints (text-orange-100/90, text-slate-300,
   text-accent…) that vanish on a light ground. Matched with [class*=] so the
   opacity variants Tailwind generates (text-orange-100/90, text-white/80)
   are caught too. Anything on the brand orange keeps its white text.
   ========================================================================== */
body > section:first-of-type.bg-\[\#0d1427\] [class*="text-white"]:not(.bg-primary):not(.bg-primary-dark),
body > section:first-of-type.bg-\[\#0d1427\] [class*="text-slate-1"],
body > section:first-of-type.bg-\[\#0d1427\] [class*="text-slate-2"],
body > section:first-of-type.bg-\[\#0d1427\] [class*="text-gray-1"],
body > section:first-of-type.bg-\[\#0d1427\] [class*="text-gray-2"]{color:var(--lz-ink) !important}

body > section:first-of-type.bg-\[\#0d1427\] [class*="text-slate-3"],
body > section:first-of-type.bg-\[\#0d1427\] [class*="text-slate-4"],
body > section:first-of-type.bg-\[\#0d1427\] [class*="text-gray-3"],
body > section:first-of-type.bg-\[\#0d1427\] [class*="text-gray-4"]{color:var(--lz-ink-soft) !important}

/* pale accent tints -> the readable brand orange (#D9451A, ~4.6:1 on white) */
body > section:first-of-type.bg-\[\#0d1427\] [class*="text-orange-1"],
body > section:first-of-type.bg-\[\#0d1427\] [class*="text-orange-2"],
body > section:first-of-type.bg-\[\#0d1427\] [class*="text-orange-3"],
body > section:first-of-type.bg-\[\#0d1427\] [class*="text-amber-1"],
body > section:first-of-type.bg-\[\#0d1427\] [class*="text-amber-2"],
body > section:first-of-type.bg-\[\#0d1427\] [class*="text-accent"]{color:var(--lz-brand-text) !important}

/* keep white text on the orange controls regardless of the above */
body > section:first-of-type.bg-\[\#0d1427\] .bg-primary,
body > section:first-of-type.bg-\[\#0d1427\] .bg-primary *,
body > section:first-of-type.bg-\[\#0d1427\] .bg-primary-dark{color:#fff !important}