/* Zinifly marketing site: "deep navy" enterprise design system (scoped under .z3).
   Used by views/landing/home-3.php. Plain CSS, independent of the purged Tailwind build.

   Vocabulary: brand blue (#5859F4, the logo colour) for every action and accent, navy
   ink (#00034D) for headings and dark surfaces, a radial hero fading brand blue to navy, a periwinkle page
   surface (#EAEFFB) on which every piece of content sits in a white rounded card,
   pill eyebrows, 52px buttons and Montserrat throughout. Motion is transform/opacity
   only (no backdrop-filter, blur or parallax: see the homepage scroll-perf notes). */

/* ==== Tokens ============================================================ */
:root{
  --z3-navy:#00034D;--z3-navy-2:#0A134E;--z3-navy-3:#151980;
  /* Brand blue = the Zinifly logo colour. Every blue on the page derives from it:
     -dark is the hover shade (15% navy mixed in), -tint / -line are 10% / 30% on
     white, -light is the 55% tint used for accents on the dark hero. */
  --z3-blue:#5859F4;--z3-blue-dark:#4B4CDB;--z3-blue-tint:#EEEEFE;--z3-blue-line:#CDCDFC;--z3-blue-light:#B4B5FA;
  --z3-blue-rgb:88,89,244;
  --z3-surface:#EAEFFB;--z3-surface-2:#F3F5FC;--z3-card:#FFFFFF;
  --z3-text:#15151A;--z3-muted:#4B5568;--z3-faint:#7C8499;
  --z3-ink:var(--z3-navy);
  --z3-line:#DDE3F3;--z3-line-strong:#C2CBE6;
  --z3-green:#15803D;--z3-green-tint:#ECFDF3;--z3-amber:#B45309;--z3-amber-tint:#FFF7E6;
  --z3-sage:#E9F2DC;
  /* Same stop structure as the reference hero, re-hued so the glow at the top is
     the brand blue and each stop is that blue mixed with 30% / 70% / 100% navy. */
  --z3-hero:radial-gradient(186.42% 107.56% at 50% 0%,#5859F4 0%,#3E3FC2 5.77%,#1A1D7F 34.62%,#00034D 58.66%);
  --z3-r:12px;--z3-r-lg:16px;--z3-r-xl:24px;
  --z3-shadow-sm:0 1px 2px rgba(0,3,77,.04),0 6px 16px -8px rgba(0,3,77,.10);
  --z3-shadow:0 4px 6px -2px rgba(0,3,77,.06),0 16px 40px -16px rgba(0,3,77,.18);
  --z3-shadow-lg:0 30px 70px -30px rgba(0,3,77,.45),0 8px 20px -10px rgba(0,3,77,.2);
  --z3-font:'Montserrat',ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --z3-ease:cubic-bezier(.22,1,.36,1);
}

/* ==== Base ============================================================== */
.z3{font-family:var(--z3-font);color:var(--z3-text);background:var(--z3-surface);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
.z3 *,.z3 *::before,.z3 *::after{box-sizing:border-box}
:where(.z3) a{text-decoration:none}
:where(.z3) p{margin:0}
:where(.z3) :is(h1,h2,h3,h4){margin:0;color:var(--z3-navy);letter-spacing:-0.02em;font-weight:600}
:where(.z3) ul{list-style:none;margin:0;padding:0}
:where(.z3) svg{display:inline-block;vertical-align:middle;flex-shrink:0}
:where(.z3) img{max-width:100%}

.z3-wrap{max-width:1168px;margin:0 auto;padding:0 24px}
.z3-section{padding:104px 0}
.z3-section--tight{padding:72px 0}
/* z2 had alternating bands and hairlines; the z3 surface is uniform, so these are
   kept only so converted markup stays valid. */
.z3-section--surface{background:transparent}
.z3-section--top-line{border-top:0}
.z3-center{text-align:center}
.z3-measure{max-width:600px}
.z3-measure--center{margin-left:auto;margin-right:auto}

/* ==== Type ============================================================== */
.z3-h1{font-size:clamp(40px,5.2vw,60px);line-height:1.12;font-weight:600;letter-spacing:-0.022em;color:#fff}
.z3-h2{font-size:clamp(30px,3.6vw,46px);line-height:1.16;letter-spacing:-0.03em}
.z3-h2--sm{font-size:clamp(28px,3vw,38px);font-weight:700;letter-spacing:-0.02em;line-height:1.2}
.z3-h3{font-size:20px;line-height:1.3;font-weight:700;letter-spacing:-0.012em}
.z3-accent{color:var(--z3-blue-light)}
.z3-lead{font-size:20px;line-height:1.5;color:var(--z3-navy);font-weight:600;letter-spacing:-0.01em}
.z3-sub{font-size:16px;line-height:1.7;color:var(--z3-muted);font-weight:500}
.z3-sub--sm{font-size:14.5px;line-height:1.65}

/* Pill eyebrow (FieldPulse's badge above every heading) */
.z3-pill{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:-0.005em;color:var(--z3-navy);background:linear-gradient(180deg,rgba(var(--z3-blue-rgb),.03),rgba(var(--z3-blue-rgb),.11));box-shadow:0 1px 2px rgba(0,3,77,.05),inset 0 0 0 1px rgba(var(--z3-blue-rgb),.18);margin-bottom:20px;white-space:nowrap}
.z3-pill--light{color:#fff;background:rgba(255,255,255,.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,.22)}
.z3-eyebrow{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 16px;border-radius:999px;font-size:13px;font-weight:600;letter-spacing:-0.005em;color:var(--z3-navy);background:linear-gradient(180deg,rgba(var(--z3-blue-rgb),.03),rgba(var(--z3-blue-rgb),.11));box-shadow:0 1px 2px rgba(0,3,77,.05),inset 0 0 0 1px rgba(var(--z3-blue-rgb),.18);margin-bottom:20px;white-space:nowrap;max-width:100%}
.z3-eyebrow--plain{background:transparent;box-shadow:none;padding:0;height:auto}
.z3-eyebrow--center{margin-left:auto;margin-right:auto}
.z3-tag{font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--z3-faint)}

/* ==== Buttons =========================================================== */
.z3-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:52px;padding:0 24px;border-radius:8px;font-size:15px;font-weight:600;border:1px solid transparent;font-family:inherit;transition:transform .18s var(--z3-ease),background .15s,border-color .15s,color .15s,box-shadow .18s;white-space:nowrap;cursor:pointer;letter-spacing:-0.005em}
.z3-btn:hover{transform:translateY(-1px)}
.z3-btn:active{transform:translateY(0)}
.z3-btn--primary{background:var(--z3-blue);color:#fff;box-shadow:0 8px 20px -10px rgba(var(--z3-blue-rgb),.55)}
.z3-btn--primary:hover{background:var(--z3-blue-dark);color:#fff}
.z3-btn--secondary{background:#fff;color:var(--z3-navy);border-color:var(--z3-navy)}
.z3-btn--secondary:hover{background:var(--z3-surface-2);color:var(--z3-navy)}
.z3-btn--white{background:#fff;color:var(--z3-navy)}
.z3-btn--white:hover{background:var(--z3-surface-2);color:var(--z3-navy)}
.z3-btn--outline-white{background:transparent;color:#fff;border-color:rgba(255,255,255,.6)}
.z3-btn--outline-white:hover{border-color:#fff;background:rgba(255,255,255,.08);color:#fff}
.z3-btn--dark{background:var(--z3-navy);color:#fff}
.z3-btn--dark:hover{background:var(--z3-navy-3);color:#fff}
.z3-btn--ghost{background:transparent;color:var(--z3-blue);padding:0;height:auto;border:0;font-weight:600;box-shadow:none}
.z3-btn--ghost:hover{color:var(--z3-blue-dark);transform:none}
.z3-btn--block{width:100%}
.z3-btn-row{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.z3-link{color:var(--z3-navy);font-weight:600;font-size:14.5px;display:inline-flex;align-items:center;gap:6px;transition:color .15s,gap .15s}
.z3-link:hover{color:var(--z3-blue);gap:9px}
.z3-trust{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:13px;color:var(--z3-muted);margin-top:20px;font-weight:500}
.z3-trust span{display:inline-flex;align-items:center;gap:6px}
.z3-trust svg{color:var(--z3-green)}

/* Chips */
.z3-chip{display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 9px;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.02em;border:1px solid var(--z3-line);color:var(--z3-muted);background:#fff;white-space:nowrap;flex-shrink:0}
.z3-chip--ok{color:var(--z3-green);background:var(--z3-green-tint);border-color:#BBE7C9}
.z3-chip--warn{color:var(--z3-amber);background:var(--z3-amber-tint);border-color:#F5D9A8}
.z3-chip--blue{color:#fff;background:var(--z3-blue);border-color:var(--z3-blue)}

/* ==== Hero ============================================================== */
/* flow-root keeps the card strip's negative bottom margin from collapsing through
   the section, so the hero really ends 150px above the cards and they straddle
   the boundary onto the periwinkle surface. */
.z3-hero{position:relative;display:flow-root;background:var(--z3-navy);background-image:var(--z3-hero);color:#fff;padding:172px 0 0}
/* Optional texture: a faint 64px grid with a small dot at every intersection, drawn
   with gradients (no image, no blur) and masked so it is strongest around the copy
   and fades out toward the edges and the bottom where the card strip sits. The
   pattern layer is painted BELOW the content (wrap gets z-index 1). */
.z3-hero--grid::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(circle,rgba(255,255,255,.34) 1.2px,transparent 1.9px),linear-gradient(rgba(255,255,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.06) 1px,transparent 1px);background-size:64px 64px,64px 64px,64px 64px;background-position:32px 32px,0 0,0 0;mask-image:radial-gradient(85% 75% at 50% 18%,#000 30%,transparent 100%);-webkit-mask-image:radial-gradient(85% 75% at 50% 18%,#000 30%,transparent 100%)}
.z3-hero--grid > .z3-wrap{position:relative;z-index:1}
.z3-hero-copy{text-align:center;max-width:880px;margin:0 auto}
.z3-hero-copy .z3-pill{margin-bottom:28px}
.z3-hero-copy .z3-lead{color:#fff;margin:26px auto 12px;max-width:640px}
.z3-hero-copy .z3-sub{color:rgba(255,255,255,.82);font-size:17px;max-width:620px;margin:0 auto 36px}
.z3-hero-copy .z3-btn-row{justify-content:center}
.z3-hero-copy .z3-trust{justify-content:center;color:rgba(255,255,255,.78);margin-top:22px}
.z3-hero-copy .z3-trust svg{color:#fff}

/* Card strip straddling the hero / surface boundary (FieldPulse's signature) */
.z3-hero-strip{position:relative;z-index:2;display:grid;grid-template-columns:1fr 1.55fr 1fr;gap:24px;align-items:end;margin:76px auto -150px}
.z3-hero-photo{position:relative;border-radius:var(--z3-r-lg);overflow:hidden;height:340px;box-shadow:var(--z3-shadow-lg);background:var(--z3-navy-2)}
.z3-hero-photo img{width:100%;height:100%;object-fit:cover;display:block}
.z3-hero-photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,3,77,0) 55%,rgba(0,3,77,.35));pointer-events:none}
.z3-strip-item{opacity:0;animation:z3PopIn .7s var(--z3-ease) forwards}
.z3-strip-item:nth-child(1){animation-delay:.25s}
.z3-strip-item:nth-child(2){animation-delay:.1s}
.z3-strip-item:nth-child(3){animation-delay:.4s}
@keyframes z3PopIn{from{opacity:0;transform:translateY(28px) scale(.97)}to{opacity:1;transform:none}}

/* ==== Product mockup (illustration; sample data) ======================== */
.z3-mock{background:#fff;border-radius:var(--z3-r-lg);box-shadow:var(--z3-shadow-lg);color:var(--z3-text)}
.z3-hero-mock{position:relative;padding:18px 18px 44px}
.z3-mock-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.z3-mock-app{border:1px solid var(--z3-line);border-radius:12px;overflow:hidden;background:#fff}
.z3-mock-head{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--z3-line)}
.z3-mock-logo{width:32px;height:32px;border-radius:9px;background:var(--z3-blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:15px}
.z3-mock-hi{font-size:14px;font-weight:700;color:var(--z3-navy);display:flex;align-items:center;gap:6px}
.z3-mock-hi .z3-dot{width:7px;height:7px;border-radius:50%;background:#F59E0B;display:inline-block}
.z3-mock-sub{font-size:11.5px;color:var(--z3-muted);margin-top:2px;font-weight:500}
.z3-mock-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px 16px}
.z3-stat{border:1px solid var(--z3-line);border-radius:10px;padding:12px 14px;background:var(--z3-surface-2)}
.z3-stat .z3-tag{letter-spacing:.04em;text-transform:none;font-size:11px;color:var(--z3-muted);font-weight:600}
.z3-stat-val{font-size:24px;font-weight:700;color:var(--z3-navy);letter-spacing:-0.02em;margin-top:4px;line-height:1.1}
.z3-stat-val small{font-size:11px;font-weight:500;color:var(--z3-faint);margin-left:4px;letter-spacing:0}
.z3-stat-note{font-size:10.5px;color:var(--z3-faint);margin-top:4px;font-weight:500}
.z3-mock-tabs{display:flex;gap:18px;padding:0 16px;border-bottom:1px solid var(--z3-line);font-size:12px;color:var(--z3-muted);font-weight:500}
.z3-mock-tabs span{padding:8px 0 10px;border-bottom:2px solid transparent}
.z3-mock-tabs span.is-on{color:var(--z3-blue);border-color:var(--z3-blue);font-weight:700}
.z3-mock-rows{padding:6px 16px 10px}
.z3-mock-row{display:flex;align-items:flex-start;gap:10px;padding:10px 0;border-bottom:1px solid var(--z3-line)}
.z3-mock-row:last-child{border-bottom:0}
.z3-mock-ico{width:22px;height:22px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px}
.z3-mock-ico--green{background:var(--z3-green-tint);color:var(--z3-green)}
.z3-mock-ico--blue{background:var(--z3-blue-tint);color:var(--z3-blue)}
.z3-mock-ico--amber{background:var(--z3-amber-tint);color:var(--z3-amber)}
.z3-mock-row-t{font-size:12.5px;font-weight:600;color:var(--z3-navy);line-height:1.3}
.z3-mock-row-s{font-size:11px;color:var(--z3-muted);margin-top:2px;font-weight:500}
.z3-mock-row-r{margin-left:auto;font-size:11px;color:var(--z3-faint);white-space:nowrap;padding-top:2px;font-weight:500}
.z3-mock-float{position:absolute;right:-20px;bottom:-22px;background:#fff;border-radius:12px;box-shadow:var(--z3-shadow-lg);padding:12px 14px;display:flex;align-items:center;gap:10px;max-width:260px;z-index:2}
.z3-mock-float .z3-mock-ico{width:28px;height:28px;border-radius:8px}
.z3-mock-float-t{font-size:12.5px;font-weight:700;color:var(--z3-navy)}
.z3-mock-float-s{font-size:11px;color:var(--z3-muted);font-weight:500}

/* ==== Audience strip (under the hero) =================================== */
.z3-serve{padding:222px 0 0}
.z3-serve-inner{text-align:center}
.z3-serve-links{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:18px}
.z3-serve-links a{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:64px;min-width:230px;padding:0 28px;border-radius:14px;background:#fff;box-shadow:var(--z3-shadow-sm);font-size:15px;font-weight:600;color:var(--z3-navy);transition:transform .18s var(--z3-ease),box-shadow .18s}
.z3-serve-links a:hover{transform:translateY(-2px);box-shadow:var(--z3-shadow);color:var(--z3-navy)}
.z3-serve-links a svg{color:var(--z3-blue)}

/* ==== Section head (centered pill + H2 + sub) =========================== */
.z3-head{text-align:center;max-width:780px;margin:0 auto 52px}
.z3-head .z3-sub{margin-top:18px;max-width:620px;margin-left:auto;margin-right:auto}

/* ==== Feature panel + bento ============================================ */
.z3-panel{background:#fff;border-radius:var(--z3-r-xl);padding:24px;box-shadow:var(--z3-shadow-sm)}
.z3-bento{display:grid;grid-template-columns:repeat(12,1fr);grid-auto-rows:auto;gap:16px}
/* Cards are white with a soft shadow because they sit straight on the periwinkle
   surface; inside a white .z3-panel they flip to a surface tint (home-3 bento). */
.z3-card{background:#fff;box-shadow:var(--z3-shadow-sm);border-radius:var(--z3-r-lg);padding:28px;display:flex;flex-direction:column;position:relative;transition:transform .2s var(--z3-ease),box-shadow .2s;color:var(--z3-text)}
.z3-card:hover{transform:translateY(-3px);box-shadow:var(--z3-shadow)}
.z3-panel .z3-card{background:var(--z3-surface);box-shadow:none}
.z3-panel .z3-card:hover{box-shadow:var(--z3-shadow)}
.z3-card--a{grid-column:1/5;grid-row:1/3}
.z3-card--b{grid-column:5/9}
.z3-card--c{grid-column:9/13}
.z3-card--d{grid-column:5/13;flex-direction:row;gap:28px;align-items:center}
.z3-card-num{position:absolute;top:24px;right:24px;font-size:12px;font-weight:700;color:var(--z3-faint);letter-spacing:.08em}
.z3-card-ico{width:44px;height:44px;border-radius:12px;background:var(--z3-blue-tint);color:var(--z3-blue);display:flex;align-items:center;justify-content:center;margin-bottom:20px;flex-shrink:0}
.z3-panel .z3-card-ico{background:#fff;box-shadow:var(--z3-shadow-sm)}
.z3-card .z3-h3{margin-bottom:8px}
.z3-card .z3-sub--sm{margin-bottom:20px}
.z3-card .z3-link{margin-top:auto;font-size:14px}
.z3-card--d > div:first-child{flex:1 1 55%}
.z3-card--d > div:last-child{flex:1 1 45%}
/* Legacy alias from the first pricing/demo builds: cards are white by default now */
.z3-card--white{background:#fff;box-shadow:var(--z3-shadow-sm)}

.z3-mini{border:1px solid var(--z3-line);border-radius:12px;overflow:hidden;margin-bottom:20px;background:#fff}
.z3-mini-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--z3-line);background:#fff}
.z3-mini-row:last-child{border-bottom:0}
.z3-avatar{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;letter-spacing:.02em}
.z3-mini-t{font-size:12.5px;font-weight:600;color:var(--z3-navy);line-height:1.25}
.z3-mini-s{font-size:11px;color:var(--z3-faint);font-weight:500}
.z3-mini-row .z3-chip{margin-left:auto}

.z3-booths{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-bottom:20px}
.z3-booth{height:32px;border-radius:7px;background:var(--z3-blue);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;letter-spacing:.02em}
.z3-booth--open{background:#fff;border:1px dashed var(--z3-line-strong);color:var(--z3-faint)}

.z3-pay{display:flex;align-items:center;gap:18px;margin:6px 0 22px;flex-wrap:wrap}
.z3-pay span{font-weight:800;color:var(--z3-navy);letter-spacing:-0.03em;font-size:19px}
.z3-pay span.z3-pay--light{font-weight:600;letter-spacing:-0.01em}

.z3-site{border-radius:12px;overflow:hidden;background:#fff;box-shadow:var(--z3-shadow-sm)}
.z3-site-bar{display:flex;gap:5px;padding:9px 10px;border-bottom:1px solid var(--z3-line);background:var(--z3-surface-2)}
.z3-site-bar i{width:7px;height:7px;border-radius:50%;background:var(--z3-line-strong);display:block}
.z3-site-body{padding:16px 18px 18px;background:var(--z3-sage)}
.z3-site-body .z3-tag{color:#4B5D2C}
.z3-site-h{font-family:Georgia,'Times New Roman',serif;font-size:24px;line-height:1.15;color:#1F2A12;letter-spacing:-0.01em;margin:8px 0 12px;font-weight:400}
.z3-site-btn{display:inline-block;background:#1F2A12;color:#fff;font-size:10.5px;font-weight:600;padding:6px 10px;border-radius:6px}

.z3-more{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:28px;flex-wrap:wrap;font-size:14px}
.z3-more .z3-tag{width:100%;text-align:center;margin-bottom:2px}
.z3-more a{display:inline-flex;align-items:center;gap:9px;height:44px;padding:0 18px;border-radius:999px;background:#fff;color:var(--z3-navy);font-weight:600;box-shadow:var(--z3-shadow-sm);transition:transform .18s var(--z3-ease),box-shadow .18s}
.z3-more a svg{color:var(--z3-blue)}
.z3-more a:hover{transform:translateY(-2px);box-shadow:var(--z3-shadow);color:var(--z3-navy)}

/* ==== Photo + accordion split ========================================== */
/* The photo stretches to the copy column's height (the tabs' images are absolutely
   positioned and cover it); the aspect ratio only applies once the grid stacks. */
.z3-split{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:stretch}
.z3-photo{position:relative;border-radius:var(--z3-r-lg);overflow:hidden;min-height:420px;background:var(--z3-navy-2);box-shadow:var(--z3-shadow)}
.z3-photo img{width:100%;height:100%;object-fit:cover;display:block}
.z3-photo--tabs img{position:absolute;inset:0;opacity:0;transition:opacity .4s ease}
.z3-photo--tabs img.is-on{opacity:1}
.z3-photo-badge{position:absolute;left:16px;bottom:16px;background:rgba(0,3,77,.9);color:#fff;font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:9px 12px;border-radius:8px}
.z3-split .z3-h2--sm{margin-top:0}
.z3-split .z3-sub{margin-top:18px;max-width:460px}
.z3-acc{margin-top:28px}
.z3-acc details{background:#fff;border-radius:14px;box-shadow:var(--z3-shadow-sm);margin-bottom:10px;padding:0 20px;transition:box-shadow .2s}
.z3-acc details:hover{box-shadow:var(--z3-shadow)}
.z3-acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:17px 0;font-size:15px;font-weight:600;color:var(--z3-navy)}
.z3-acc summary::-webkit-details-marker{display:none}
.z3-acc summary svg{color:var(--z3-navy);transition:transform .2s;flex-shrink:0}
.z3-acc details[open] summary svg{transform:rotate(45deg);color:var(--z3-blue)}
.z3-acc .z3-sub--sm{padding:0 0 18px;max-width:460px}
.z3-split .z3-link{margin-top:22px}

/* Dashed S-curve connector between alternating blocks (decorative) */
.z3-connector{display:block;width:100%;height:120px;margin:-24px auto -24px;color:var(--z3-line-strong)}
.z3-connector path{stroke:currentColor;stroke-width:2;stroke-dasharray:6 9;fill:none;stroke-linecap:round}

/* ==== Steps ============================================================= */
.z3-steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:56px}
.z3-steps::before{content:"";position:absolute;top:56px;left:12%;right:12%;border-top:2px dashed var(--z3-line-strong);z-index:0}
.z3-step{position:relative;z-index:1;background:#fff;border-radius:var(--z3-r-lg);padding:32px 30px;box-shadow:var(--z3-shadow-sm);transition:transform .2s var(--z3-ease),box-shadow .2s}
.z3-step:hover{transform:translateY(-3px);box-shadow:var(--z3-shadow)}
.z3-step-n{width:46px;height:46px;border-radius:12px;background:var(--z3-blue);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;letter-spacing:.02em;margin-bottom:24px}
.z3-step .z3-h3{margin-bottom:10px}

/* Callout strip (strong + copy + link) as a white card row */
.z3-callout{margin-top:44px;background:#fff;border-radius:var(--z3-r-lg);box-shadow:var(--z3-shadow-sm);padding:20px 24px;display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.z3-callout strong{color:var(--z3-navy);font-size:15px;font-weight:700}
.z3-callout .z3-sub--sm{flex:1;min-width:220px}

/* Navy spotlight card (FieldPulse's dark "Operator AI" block) */
.z3-spot{position:relative;overflow:hidden;margin-top:56px;background:var(--z3-navy);background-image:linear-gradient(135deg,#1A1F8F 0%,#0A134E 55%,#00034D 100%);border-radius:var(--z3-r-xl);padding:48px 56px;color:#fff;display:grid;grid-template-columns:1fr auto;gap:32px;align-items:center;box-shadow:var(--z3-shadow-lg)}
.z3-spot::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:48px 48px;mask-image:radial-gradient(70% 120% at 100% 50%,#000 30%,transparent 100%);-webkit-mask-image:radial-gradient(70% 120% at 100% 50%,#000 30%,transparent 100%);pointer-events:none}
.z3-spot > *{position:relative}
.z3-spot strong{display:block;font-size:26px;font-weight:600;letter-spacing:-0.02em;color:#fff;margin-bottom:8px;line-height:1.2}
.z3-spot .z3-sub{color:rgba(255,255,255,.8);max-width:560px}

/* ==== Pricing =========================================================== */
.z3-toggle{display:inline-flex;align-items:center;gap:12px;margin:28px auto 0;padding:8px 18px;border-radius:999px;background:#fff;box-shadow:var(--z3-shadow-sm);font-size:14px;color:var(--z3-muted);font-weight:600}
.z3-toggle label{position:relative;display:inline-block;width:44px;height:24px;cursor:pointer}
.z3-toggle input{position:absolute;opacity:0;width:0;height:0}
.z3-toggle .z3-knob{position:absolute;inset:0;background:var(--z3-line-strong);border-radius:999px;transition:background .15s}
.z3-toggle .z3-knob::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .18s var(--z3-ease);box-shadow:0 1px 2px rgba(0,0,0,.2)}
.z3-toggle input:checked + .z3-knob{background:var(--z3-blue)}
.z3-toggle input:checked + .z3-knob::after{transform:translateX(20px)}
.z3-toggle input:focus-visible + .z3-knob{outline:2px solid var(--z3-blue);outline-offset:2px}
.z3-toggle .z3-save{color:var(--z3-green);font-weight:700}
.z3-plans{display:grid;gap:20px;margin-top:44px}
.z3-plans--1{grid-template-columns:minmax(0,440px);justify-content:center}
.z3-plans--2{grid-template-columns:repeat(2,minmax(0,440px));justify-content:center}
.z3-plans--3{grid-template-columns:repeat(3,1fr)}
.z3-plan{background:#fff;border-radius:20px;padding:32px;position:relative;display:flex;flex-direction:column;box-shadow:var(--z3-shadow-sm);border:2px solid transparent;transition:transform .2s var(--z3-ease),box-shadow .2s}
.z3-plan:hover{transform:translateY(-3px);box-shadow:var(--z3-shadow)}
.z3-plan--hot{border-color:var(--z3-blue);box-shadow:0 4px 6px -2px rgba(var(--z3-blue-rgb),.10),0 20px 44px -18px rgba(var(--z3-blue-rgb),.35)}
.z3-plan-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.z3-plan-name{font-size:20px;font-weight:700;color:var(--z3-navy);letter-spacing:-0.015em}
.z3-plan-desc{font-size:13px;color:var(--z3-muted);margin-top:6px;line-height:1.5;font-weight:500}
.z3-price{display:flex;align-items:baseline;gap:6px;margin-top:24px}
.z3-price-amt{font-size:46px;font-weight:700;color:var(--z3-navy);letter-spacing:-0.035em;line-height:1}
.z3-price-per{font-size:13.5px;color:var(--z3-muted);font-weight:500}
.z3-price-note{font-size:11.5px;color:var(--z3-faint);margin-top:8px;font-weight:500}
.z3-price-note s{color:var(--z3-faint)}
.z3-plan .z3-btn{margin-top:22px}
.z3-plan-feats{margin-top:24px;padding-top:22px;border-top:1px solid var(--z3-line);display:grid;gap:10px}
.z3-plan-feats li{display:flex;align-items:flex-start;gap:9px;font-size:13.5px;color:var(--z3-text);line-height:1.45;font-weight:500}
.z3-plan-feats li svg{color:var(--z3-blue);margin-top:2px}
.z3-plan-feats strong{font-weight:700;color:var(--z3-navy)}
.z3-pricing-foot{margin-top:28px;font-size:12.5px;color:var(--z3-faint);font-weight:500}
.z3-pricing-foot a{color:var(--z3-muted);text-decoration:underline;text-underline-offset:3px}
.z3-pricing-foot a:hover{color:var(--z3-blue)}
.z3-lite{margin-top:36px;border-radius:16px;background:#fff;padding:22px 28px;display:flex;align-items:center;gap:20px;flex-wrap:wrap;box-shadow:var(--z3-shadow-sm)}
.z3-lite > div{flex:1;min-width:260px}
.z3-lite strong{display:block;font-size:15px;color:var(--z3-navy);font-weight:700;margin-bottom:3px}
.z3-empty{margin:40px auto 0;max-width:560px;border-radius:16px;padding:32px;background:#fff;box-shadow:var(--z3-shadow-sm)}

/* ==== Comparison / data tables (pricing) =============================== */
.z3-table-wrap{overflow-x:auto;background:#fff;border-radius:20px;box-shadow:var(--z3-shadow-sm)}
.z3-table{width:100%;border-collapse:collapse;font-size:14px;min-width:640px}
.z3-table th,.z3-table td{padding:15px 20px;border-bottom:1px solid var(--z3-line);text-align:center;vertical-align:middle}
.z3-table th:first-child,.z3-table td:first-child{text-align:left}
.z3-table thead th{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--z3-muted);background:var(--z3-surface-2)}
.z3-table thead th.is-hot{color:var(--z3-blue)}
.z3-table tbody tr:last-child td{border-bottom:0}
.z3-table td:first-child{font-weight:600;color:var(--z3-navy)}
.z3-table td{color:var(--z3-text);font-weight:500}
.z3-table td svg{color:var(--z3-blue)}
.z3-table .z3-unl{color:var(--z3-green);font-weight:700}

/* ==== FAQ =============================================================== */
.z3-faq{display:grid;grid-template-columns:.85fr 1.15fr;gap:72px;align-items:start}
.z3-faq .z3-h2{margin-bottom:20px}
.z3-faq-intro .z3-sub--sm{max-width:380px}
.z3-faq .z3-btn{margin-top:22px}
.z3-faq-list details{background:#fff;border-radius:14px;box-shadow:var(--z3-shadow-sm);margin-bottom:12px;padding:0 24px;transition:box-shadow .2s}
.z3-faq-list details:hover{box-shadow:var(--z3-shadow)}
.z3-faq-list summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;font-size:15px;font-weight:600;color:var(--z3-navy)}
.z3-faq-list summary::-webkit-details-marker{display:none}
.z3-faq-list summary svg{color:var(--z3-navy);transition:transform .2s}
.z3-faq-list details[open] summary svg{transform:rotate(45deg);color:var(--z3-blue)}
.z3-faq-list .z3-sub--sm{padding:0 0 20px;max-width:none}

/* ==== Final CTA (photo-backed navy) ==================================== */
.z3-cta{position:relative;isolation:isolate;color:#fff;padding:128px 0;background:var(--z3-navy);overflow:hidden}
.z3-cta-bg{position:absolute;inset:0;z-index:-1}
.z3-cta-bg img{width:100%;height:100%;object-fit:cover;display:block;opacity:.32}
/* The overlay is fully opaque navy over the last 10% so the section ends in the
   same flat #00034D that the newsletter strip below starts with (no visible seam). */
.z3-cta-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,3,77,.45) 0%,rgba(0,3,77,.8) 60%,#00034D 90%,#00034D 100%)}
.z3-cta .z3-pill{margin-bottom:24px}
.z3-cta .z3-h2{color:#fff}
.z3-cta .z3-sub{color:rgba(255,255,255,.82);margin:20px auto 34px}
.z3-cta .z3-btn-row{justify-content:center}
.z3-cta .z3-trust{justify-content:center;color:rgba(255,255,255,.75);margin-top:22px}
.z3-cta .z3-trust svg{color:#fff}

/* ==== Newsletter card on the CTA / footer seam ========================= */
/* .z3-tail paints its top half in the CTA's navy and its bottom half in the
   footer's white, so the card's midline lands on the seam whatever the card's
   height (no negative margins to keep in step with the content). The card is a
   free-standing rounded block whose shadow separates it from the white footer;
   1168px wide with 48px side padding, its content sits on the footer's 1072px
   column (.zf-wrap 1120 - 2 x 24). */
.z3-tail{background:linear-gradient(180deg,var(--z3-navy) 0,var(--z3-navy) 50%,#fff 50%,#fff 100%);padding:0 24px}
.z3-news{position:relative;z-index:2;max-width:1168px;margin:0 auto;background:#fff;border-radius:var(--z3-r-xl);box-shadow:0 32px 80px -28px rgba(0,3,77,.5),0 12px 32px -16px rgba(0,3,77,.28),0 0 0 1px rgba(0,3,77,.06);padding:40px 48px}
.z3-news-inner{display:flex;align-items:center;justify-content:space-between;gap:32px;flex-wrap:wrap}
.z3-news h3{font-size:20px;margin-bottom:6px;font-weight:700}
.z3-news form{display:flex;gap:10px;flex-wrap:wrap}
.z3-news input[type=email]{height:52px;min-width:300px;flex:1;border:1px solid var(--z3-line-strong);border-radius:8px;padding:0 16px;font:inherit;font-size:14.5px;font-weight:500;color:var(--z3-navy);background:#fff}
.z3-news input[type=email]:focus{outline:none;border-color:var(--z3-blue);box-shadow:0 0 0 3px rgba(var(--z3-blue-rgb),.18)}
.z3-news button:disabled{opacity:.55;cursor:not-allowed}
.z3-news-msg{font-size:13px;margin-top:10px;font-weight:500}
.z3-news-msg--ok{color:var(--z3-green)}
.z3-news-msg--err{color:#B91C1C}

/* ==== Page-scoped chrome overrides (nav pill + white footer sheet) ===== */
/* The nav and footer come from header.php / footer.php. On this page the nav
   floats as a white pill over the dark hero and the footer continues the white
   sheet. Two selectors reach them: body:has(> main.z3) works without JS, and the
   classes home-3.php adds from inline scripts (.z3-nav / .z3-menu / .z3-foot)
   cover browsers without :has(). They are wrapped in :is() because it is a
   FORGIVING selector list: an unsupported :has() only drops that argument,
   whereas in a plain comma list it would invalidate the whole rule. */
:is(body:has(> main.z3) .zn-nav,.zn-nav.z3-nav){background:transparent;border-bottom:0;padding:16px 24px 0;font-family:var(--z3-font)}
:is(body:has(> main.z3) .zn-nav,.zn-nav.z3-nav) .zn-wrap{background:#fff;border-radius:14px;box-shadow:0 12px 32px -12px rgba(0,3,77,.45),0 1px 2px rgba(0,3,77,.08);padding:0 12px 0 20px}
:is(body:has(> main.z3) #mobileMenu,#mobileMenu.z3-menu){font-family:var(--z3-font)}
:is(body:has(> main.z3) .zn-nav,.zn-nav.z3-nav,body:has(> main.z3) #mobileMenu,#mobileMenu.z3-menu) .zn-cta{background:var(--z3-blue);border-radius:10px;height:42px}
:is(body:has(> main.z3) .zn-nav,.zn-nav.z3-nav,body:has(> main.z3) #mobileMenu,#mobileMenu.z3-menu) .zn-cta:hover{background:var(--z3-blue-dark)}
:is(body:has(> main.z3) .zn-nav,.zn-nav.z3-nav) :is(.zn-link,.zn-signin){color:var(--z3-navy);font-weight:600}
:is(body:has(> main.z3) .zn-nav,.zn-nav.z3-nav) .mega-menu{padding-top:12px}
:is(body:has(> main.z3) .zf,.zf.z3-foot){border-top:0;font-family:var(--z3-font);padding-top:24px}

/* ==== Scroll reveal (only when JS has run: main gets .z3-js) ============ */
.z3-js .z3-reveal{opacity:0;transform:translateY(26px);transition:opacity .7s var(--z3-ease),transform .7s var(--z3-ease)}
.z3-js .z3-reveal.is-in{opacity:1;transform:none}
.z3-js .z3-reveal--d1{transition-delay:.08s}
.z3-js .z3-reveal--d2{transition-delay:.16s}

/* Focus rings for keyboard users */
.z3 a:focus-visible,.z3 button:focus-visible,.z3 summary:focus-visible,.z3 input:focus-visible{outline:2px solid var(--z3-blue);outline-offset:3px;border-radius:6px}

/* ==== Responsive ======================================================== */
@media (max-width:1100px){
  .z3-hero-strip{grid-template-columns:1fr 1.7fr 1fr;gap:16px}
  .z3-hero-photo{height:300px}
  .z3-split,.z3-faq{gap:44px}
}
@media (max-width:900px){
  .z3-section{padding:80px 0}
  .z3-hero{padding-top:140px}
  .z3-hero-strip{grid-template-columns:1fr;margin:56px auto -110px}
  .z3-hero-photo{display:none}
  .z3-hero-strip .z3-strip-item:nth-child(2){animation-delay:.15s}
  .z3-serve{padding-top:170px}
  .z3-mock-float{right:10px;bottom:-18px}
  .z3-bento{grid-template-columns:1fr 1fr}
  .z3-card--a{grid-column:1/3;grid-row:auto}
  .z3-card--b{grid-column:1/2}
  .z3-card--c{grid-column:2/3}
  .z3-card--d{grid-column:1/3}
  .z3-split{grid-template-columns:1fr}
  .z3-photo{min-height:0;aspect-ratio:4/3}
  .z3-connector{display:none}
  .z3-steps{grid-template-columns:1fr;gap:16px}
  .z3-steps::before{display:none}
  .z3-spot{grid-template-columns:1fr;padding:36px 32px}
  .z3-plans--3,.z3-plans--2{grid-template-columns:1fr;max-width:480px;margin-left:auto;margin-right:auto}
  .z3-faq{grid-template-columns:1fr}
  .z3-cta{padding:96px 0}
  .z3-news{padding:32px 28px}
  :is(body:has(> main.z3) .zn-nav,.zn-nav.z3-nav){padding:12px 16px 0}
}
@media (max-width:600px){
  .z3-section{padding:64px 0}
  .z3-hero{padding-top:124px}
  .z3-hero-copy .z3-lead{font-size:18px}
  .z3-hero-mock{padding:14px 14px 18px}
  .z3-mock-stats{grid-template-columns:1fr}
  .z3-mock-float{position:static;margin-top:14px;max-width:none}
  .z3-hero-strip{margin-bottom:-80px}
  .z3-serve{padding-top:130px}
  .z3-serve-links a{width:100%;min-width:0}
  .z3-panel{padding:14px}
  .z3-bento{grid-template-columns:1fr}
  .z3-card--a,.z3-card--b,.z3-card--c,.z3-card--d{grid-column:1/2}
  .z3-card--d{flex-direction:column;align-items:stretch}
  .z3-btn-row .z3-btn{width:100%}
  .z3-news input[type=email]{min-width:0;width:100%}
  .z3-news form .z3-btn{width:100%}
  .z3-more a{width:100%;justify-content:center}
  .z3-pill{white-space:normal;height:auto;padding:8px 14px;text-align:center}
  .z3-spot{padding:30px 24px}
  .z3-spot .z3-btn{width:100%}
  .z3-cta{padding:80px 0}
  .z3-tail{padding:0 16px}
  .z3-news{padding:28px 20px;border-radius:var(--z3-r-lg)}
  :is(body:has(> main.z3) .zn-nav,.zn-nav.z3-nav){padding:10px 12px 0}
}

/* ==== Reduced motion ==================================================== */
@media (prefers-reduced-motion:reduce){
  .z3-strip-item{animation:none;opacity:1}
  .z3-js .z3-reveal{opacity:1;transform:none;transition:none}
  .z3-card,.z3-step,.z3-plan,.z3-btn,.z3-serve-links a,.z3-more a,.z3-link,.z3-photo--tabs img,.z3-acc summary svg,.z3-faq-list summary svg,.z3-toggle .z3-knob,.z3-toggle .z3-knob::after{transition:none}
  .z3-card:hover,.z3-step:hover,.z3-plan:hover,.z3-btn:hover,.z3-serve-links a:hover,.z3-more a:hover{transform:none}
}