/* Brand tokens are the app's own (NexusOS src/context/ThemeContext.tsx, src/constants/wordmark.ts, src/ui-kit/Modal.tsx):
   fixed navy chrome, two-tone text wordmark, amber primary action, 12px flat cards, light/dark following the system. */
:root{--bg:#FAFAFA;--surface:#fff;--ink:#1e293b;--muted:#64748b;--faint:#94a3b8;--line:#e2e8f0;--soft:#e2e8f0;
--navy:#0E1F4A;--green:#7BB557;--accent:#F59E0B;--on-accent:#fff;--danger:#dc2626;--warnbg:#fff7ed;--warn:#c2410c;
--nav-text:#fff;--nav-muted:rgba(255,255,255,.62);--nav-line:rgba(255,255,255,.14);--nav-hover:rgba(255,255,255,.07);--nav-current:rgba(255,255,255,.1)}
@media(prefers-color-scheme:dark){:root{--bg:#0b1220;--surface:#1e293b;--ink:#f1f5f9;--muted:#94a3b8;--faint:#64748b;--line:#334155;--soft:#334155;--danger:#f87171;--warnbg:#431407;--warn:#fb923c}}
*{box-sizing:border-box}html{scroll-behavior:smooth;background:var(--navy)}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;font-size:16px;line-height:1.65;color:var(--ink);background:var(--bg)}
a{color:inherit}main a:not(.btn){color:var(--ink);text-decoration-color:var(--green);text-underline-offset:3px}
img{max-width:100%;height:auto}:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:1080px;margin:0 auto;padding:0 24px}
.wm{font-weight:800;font-size:24px;letter-spacing:-.02em;color:#E2E8F0;text-decoration:none;line-height:1}.wm b{color:var(--green);font-weight:800}
header.site{background:var(--navy);color:var(--nav-text);position:sticky;top:0;z-index:10;border-bottom:1px solid var(--nav-line)}
header.site .wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:64px}
nav.site{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
nav.site a:not(.btn){color:var(--nav-muted);text-decoration:none;font-weight:600;font-size:14px;padding:8px 12px;border-radius:8px;transition:background-color .12s}
nav.site a:not(.btn):hover{background:var(--nav-hover);color:var(--nav-text)}nav.site a[aria-current]{background:var(--nav-current);color:var(--nav-text)}
.btn{display:inline-block;background:var(--accent);color:var(--on-accent);font-weight:600;font-size:15px;padding:9px 18px;border-radius:6px;text-decoration:none;border:1px solid transparent}
.btn:hover{filter:brightness(1.05)}.btn.ghost{background:transparent;color:var(--nav-text);border-color:var(--nav-line)}.btn.ghost:hover{background:var(--nav-hover);filter:none}
.btn.dark{background:transparent;color:var(--ink);border-color:var(--line)}
.hero{background:var(--navy);color:var(--nav-text);padding:88px 0 96px}
.eyebrow{display:inline-flex;gap:6px;align-items:center;border:1px solid var(--nav-line);border-radius:999px;padding:3px 12px;font-size:12px;font-weight:700;color:var(--nav-muted);margin-bottom:22px;letter-spacing:.02em}
.eyebrow i{width:8px;height:8px;border-radius:50%;background:var(--green);display:inline-block}
.hero h1{font-size:clamp(34px,5.2vw,56px);line-height:1.08;margin:0 0 18px;max-width:17ch;letter-spacing:-.025em;font-weight:800}
.hero h1 span{color:var(--green)}
.hero p{font-size:19px;color:var(--nav-muted);max-width:60ch;margin:0 0 30px}
.hero .row{display:flex;gap:12px;flex-wrap:wrap}
section{padding:64px 0}section.alt{background:var(--surface);border-block:1px solid var(--line)}
h2{font-size:clamp(24px,3.2vw,32px);line-height:1.2;margin:0 0 10px;letter-spacing:-.015em;font-weight:800}
.lede{color:var(--muted);max-width:62ch;margin:0 0 32px;font-size:18px}
.label{font-size:12px;font-weight:600;text-transform:uppercase;color:var(--muted);letter-spacing:.04em}
.grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:22px}
.card h3{margin:12px 0 6px;font-size:17px;font-weight:800}.card p{margin:0;color:var(--muted);font-size:15px}
.card img.mod{width:44px;height:44px;object-fit:contain;display:block}
.chip{display:inline-flex;border-radius:999px;padding:1px 8px;font-size:11px;font-weight:700;border:1px solid var(--line);color:var(--muted);background:var(--surface);vertical-align:middle}
.price{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.plan{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:28px}.plan.pop{border:2px solid var(--accent)}
.plan h3{margin:0 0 12px;font-size:17px;font-weight:800}.plan .amt{font-size:48px;font-weight:800;letter-spacing:-.03em;line-height:1}.plan .per{color:var(--muted)}
.plan ul{padding-left:20px;margin:18px 0 0}.plan li{margin:6px 0}
table{border-collapse:separate;border-spacing:0;width:100%;background:var(--surface);border:1px solid var(--line);border-radius:12px;overflow:hidden}
th,td{padding:12px 14px;text-align:left;border-bottom:1px solid var(--line);font-size:15px}th{font-size:12px;text-transform:uppercase;color:var(--muted);font-weight:600;letter-spacing:.04em}tr:last-child td{border-bottom:0}
.legal{max-width:760px}.legal h2{font-size:20px;margin-top:34px}.legal h1{font-size:clamp(30px,4vw,40px);margin:0 0 6px;letter-spacing:-.02em;font-weight:800}
.legal .meta{color:var(--muted);margin:0 0 24px}
.page-head{background:var(--navy);color:var(--nav-text);padding:56px 0}.page-head h1{margin:0 0 8px;font-size:clamp(30px,4vw,44px);letter-spacing:-.02em;font-weight:800}.page-head p{margin:0;color:var(--nav-muted);max-width:60ch;font-size:18px}
footer.site{background:var(--navy);color:var(--nav-muted);padding:44px 0 30px;font-size:14px}
footer.site .cols{display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between;margin-bottom:24px}
footer.site a{color:var(--nav-muted);text-decoration:none;display:block;margin:6px 0}footer.site a:hover{color:var(--nav-text)}
footer.site strong{color:var(--nav-text);font-size:12px;text-transform:uppercase;letter-spacing:.04em}
footer.site .wm{display:inline-block;font-size:20px;margin-bottom:8px}
@media(max-width:640px){.hero{padding:56px 0 60px}section{padding:44px 0}nav.site a:not(.btn){padding:6px 8px}}

/* Depth (owner, 2026-10-05: "This site needs more depth"): layered shadows, raised surfaces, lift on hover, glow behind the hero. */
:root{--sh1:0 1px 2px rgba(15,23,42,.06),0 4px 12px rgba(15,23,42,.06),0 18px 40px -12px rgba(15,23,42,.18);--sh2:0 2px 4px rgba(15,23,42,.08),0 12px 28px rgba(15,23,42,.12),0 32px 64px -16px rgba(15,23,42,.28);--hi:inset 0 1px 0 rgba(255,255,255,.7)}
@media(prefers-color-scheme:dark){:root{--sh1:0 1px 2px rgba(0,0,0,.4),0 6px 16px rgba(0,0,0,.35),0 24px 48px -16px rgba(0,0,0,.6);--sh2:0 2px 4px rgba(0,0,0,.5),0 16px 36px rgba(0,0,0,.5),0 40px 80px -20px rgba(0,0,0,.75);--hi:inset 0 1px 0 rgba(255,255,255,.07)}}
body{background:linear-gradient(180deg,var(--bg),color-mix(in srgb,var(--bg) 92%,var(--navy)))}
.card,.plan,table{box-shadow:var(--hi),var(--sh1);background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 100%,#fff 0%),color-mix(in srgb,var(--surface) 96%,var(--ink) 4%))}
.card{transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;position:relative}
.card:hover{transform:translateY(-4px);box-shadow:var(--hi),var(--sh2);border-color:color-mix(in srgb,var(--green) 45%,var(--line))}
.card img.mod{width:52px;height:52px;padding:8px;border-radius:12px;background:linear-gradient(145deg,#fff,#eef2f7);box-shadow:0 1px 0 #fff inset,0 6px 14px rgba(15,23,42,.18),0 1px 3px rgba(15,23,42,.2)}
.plan{box-shadow:var(--hi),var(--sh2)}.plan.pop{transform:translateY(-6px);box-shadow:var(--hi),0 0 0 4px color-mix(in srgb,var(--accent) 18%,transparent),var(--sh2)}
section.alt{box-shadow:inset 0 14px 24px -18px rgba(15,23,42,.25),inset 0 -14px 24px -18px rgba(15,23,42,.25)}
.btn{box-shadow:0 1px 0 rgba(255,255,255,.35) inset,0 6px 16px color-mix(in srgb,var(--accent) 45%,transparent),0 1px 2px rgba(0,0,0,.25);transition:transform .12s ease,box-shadow .12s ease}
.btn:hover{transform:translateY(-1px)}.btn.ghost,.btn.dark{box-shadow:0 4px 12px rgba(0,0,0,.18)}
header.site{box-shadow:0 8px 24px rgba(8,15,40,.35)}
.hero,.page-head{position:relative;overflow:hidden;background:radial-gradient(900px 480px at 85% -10%,rgba(46,100,214,.55),transparent 60%),radial-gradient(700px 420px at -5% 110%,rgba(123,181,87,.30),transparent 60%),linear-gradient(180deg,#112459,var(--navy))}
.hero::after,.page-head::after{content:"";position:absolute;inset:auto 0 0 0;height:90px;background:linear-gradient(180deg,transparent,rgba(0,0,0,.18));pointer-events:none}
.hero .wrap{display:grid;grid-template-columns:1.05fr .95fr;gap:40px;align-items:center;position:relative;z-index:1}
.hero-copy h1{max-width:15ch}
.mock{position:relative;perspective:1200px}
.mock .win{background:#0f1a3a;border:1px solid rgba(255,255,255,.14);border-radius:14px;box-shadow:0 2px 0 rgba(255,255,255,.08) inset,0 30px 60px -12px rgba(0,0,0,.65),0 0 80px -10px rgba(46,100,214,.45);transform:rotateY(-9deg) rotateX(4deg);overflow:hidden}
.mock .bar{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.04)}
.mock .bar i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22)}
.mock .body{display:grid;grid-template-columns:112px 1fr;min-height:236px}
.mock .side{padding:12px;border-right:1px solid rgba(255,255,255,.1);display:grid;gap:7px;align-content:start}
.mock .side b{display:block;height:9px;border-radius:5px;background:rgba(255,255,255,.14)}.mock .side b.on{background:var(--green)}
.mock .main{padding:14px;display:grid;gap:10px;align-content:start}
.mock .row2{display:flex;gap:8px;align-items:center;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:9px;padding:9px 10px;box-shadow:0 6px 14px rgba(0,0,0,.25)}
.mock .row2 span{height:8px;border-radius:4px;background:rgba(255,255,255,.2);flex:1}.mock .row2 em{font-style:normal;font-size:10px;font-weight:700;border-radius:999px;padding:1px 8px;background:rgba(123,181,87,.2);color:var(--green);border:1px solid rgba(123,181,87,.4)}
.mock .row2 em.a{background:rgba(245,158,11,.18);color:var(--accent);border-color:rgba(245,158,11,.4)}
.mock .float{position:absolute;right:-14px;bottom:-22px;background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:12px;padding:10px 14px;font-size:12px;font-weight:700;box-shadow:var(--hi),var(--sh2);transform:rotate(2deg)}
.mock .float small{display:block;color:var(--muted);font-weight:600;font-size:11px}
@media(max-width:860px){.hero .wrap{grid-template-columns:1fr}.mock{display:none}}
@media(prefers-reduced-motion:reduce){.card,.btn{transition:none}.card:hover{transform:none}}

/* Modern pass: same palette/wordmark/amber action, newer shape language. */
:root{--r:18px;--grad-edge:linear-gradient(135deg,rgba(123,181,87,.55),rgba(148,163,184,.25) 45%,rgba(46,100,214,.5))}
header.site{background:rgba(14,31,74,.72);-webkit-backdrop-filter:blur(16px) saturate(1.5);backdrop-filter:blur(16px) saturate(1.5)}
.btn{border-radius:10px;padding:11px 20px}
nav.site a:not(.btn){border-radius:10px}
.hero{padding:104px 0 112px}
.hero::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.16) 1px,transparent 1.4px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 70% 80% at 70% 30%,#000,transparent 75%);mask-image:radial-gradient(ellipse 70% 80% at 70% 30%,#000,transparent 75%);pointer-events:none}
.hero h1{font-size:clamp(38px,6vw,68px);line-height:1.02;letter-spacing:-.04em}
.hero h1 span{background:linear-gradient(100deg,#9bd37a,#7BB557 40%,#5fa6ff);-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{font-size:20px;line-height:1.55}
.eyebrow{background:rgba(255,255,255,.06);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
h2{font-size:clamp(28px,3.8vw,40px);letter-spacing:-.03em}
.lede{font-size:19px}
.card,.plan,table{border-radius:var(--r)}
.card{padding:26px;border:1px solid transparent;background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface) 95%,var(--ink) 5%)) padding-box,linear-gradient(180deg,var(--line),var(--line)) border-box}
.card:hover{background:linear-gradient(180deg,var(--surface),color-mix(in srgb,var(--surface) 95%,var(--ink) 5%)) padding-box,var(--grad-edge) border-box;border-color:transparent}
.card h3{font-size:19px;letter-spacing:-.015em}
.card img.mod{border-radius:14px}
.bento{grid-template-columns:repeat(6,1fr)}
.bento .card{grid-column:span 2}.bento .card:nth-child(-n+2){grid-column:span 3}
.bento .card:nth-child(-n+2) p{font-size:16px}
.bento .card:nth-child(1){background:linear-gradient(135deg,color-mix(in srgb,#7BB557 10%,var(--surface)),var(--surface) 60%) padding-box,var(--grad-edge) border-box}
.bento .card:nth-child(2){background:linear-gradient(135deg,color-mix(in srgb,#2e64d6 10%,var(--surface)),var(--surface) 60%) padding-box,var(--grad-edge) border-box}
.plan{padding:32px}.plan.pop{border:1px solid transparent;background:linear-gradient(180deg,var(--surface),var(--surface)) padding-box,linear-gradient(135deg,var(--accent),#fbbf24 50%,var(--green)) border-box}
.mock .win{border-radius:20px}.mock .float{border-radius:14px}
.page-head{padding:72px 0}
section{padding:80px 0}
.legal h2{letter-spacing:-.015em}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.hero-copy>*{animation:rise .6s cubic-bezier(.2,.7,.2,1) both}.hero-copy>*:nth-child(2){animation-delay:.07s}.hero-copy>*:nth-child(3){animation-delay:.14s}.hero-copy>*:nth-child(4){animation-delay:.21s}
.mock{animation:rise .8s .2s cubic-bezier(.2,.7,.2,1) both}
@media(max-width:860px){.bento{grid-template-columns:1fr}.bento .card,.bento .card:nth-child(-n+2){grid-column:auto}.hero{padding:64px 0 72px}section{padding:56px 0}}
@media(prefers-reduced-motion:reduce){.hero-copy>*,.mock{animation:none}}

/* Dark-first (owner, 2026-10-05: more dark tones in the background; light blue for accents only). The site is always dark;
   the light-blue accent --sky is used for links, edges, chips and highlights, never as a background wash. */
:root,:root{--bg:#070d1c;--surface:#0f1a36;--ink:#f1f5f9;--muted:#9fb0c8;--faint:#64748b;--line:#22305a;--soft:#22305a;--danger:#f87171;--warnbg:#431407;--warn:#fb923c;--sky:#7cc4ff;
--sh1:0 1px 2px rgba(0,0,0,.45),0 8px 20px rgba(0,0,0,.35),0 28px 56px -18px rgba(0,0,0,.65);--sh2:0 2px 4px rgba(0,0,0,.5),0 18px 38px rgba(0,0,0,.5),0 44px 84px -22px rgba(0,0,0,.8);--hi:inset 0 1px 0 rgba(124,196,255,.10);--grad-edge:linear-gradient(135deg,rgba(124,196,255,.65),rgba(34,48,90,.6) 50%,rgba(123,181,87,.45))}
html{background:var(--bg);color-scheme:dark}
body{background:radial-gradient(1000px 520px at 50% 0,rgba(14,31,74,.7),transparent 70%),var(--bg)}
main a:not(.btn){color:var(--sky);text-decoration-color:rgba(124,196,255,.45)}
.hero,.page-head{background:radial-gradient(800px 440px at 88% -12%,rgba(124,196,255,.16),transparent 62%),radial-gradient(640px 380px at -6% 112%,rgba(123,181,87,.10),transparent 62%),linear-gradient(180deg,#0c1a42,#0a1431 70%,#070d1c)}
.hero::after,.page-head::after{background:linear-gradient(180deg,transparent,rgba(7,13,28,.9))}
.hero::before{background-image:radial-gradient(rgba(124,196,255,.22) 1px,transparent 1.4px)}
.hero h1 span{background:linear-gradient(100deg,#a6dcff,#7cc4ff 45%,#7BB557);-webkit-background-clip:text;background-clip:text;color:transparent}
section.alt{background:linear-gradient(180deg,#0a1431,#0b1736);border-block:1px solid var(--line);box-shadow:inset 0 14px 24px -18px rgba(0,0,0,.7),inset 0 -14px 24px -18px rgba(0,0,0,.7)}
header.site{background:rgba(7,13,28,.78);border-bottom:1px solid rgba(124,196,255,.12);box-shadow:0 8px 24px rgba(0,0,0,.45)}
footer.site{background:#050a16;border-top:1px solid var(--line)}
.card,.plan,table{background:linear-gradient(180deg,#12204a,#0f1a36)}
.card{background:linear-gradient(180deg,#12204a,#0f1a36) padding-box,linear-gradient(180deg,var(--line),var(--line)) border-box}
.card:hover{background:linear-gradient(180deg,#12204a,#0f1a36) padding-box,var(--grad-edge) border-box}
.bento .card:nth-child(1){background:linear-gradient(135deg,#132556,#0f1a36 65%) padding-box,var(--grad-edge) border-box}
.bento .card:nth-child(2){background:linear-gradient(135deg,#112252,#0f1a36 65%) padding-box,var(--grad-edge) border-box}
.plan.pop{background:linear-gradient(180deg,#12204a,#0f1a36) padding-box,linear-gradient(135deg,var(--accent),#fbbf24 50%,var(--sky)) border-box}
.eyebrow i{background:var(--sky)}.chip{background:rgba(124,196,255,.08);border-color:rgba(124,196,255,.25);color:var(--sky)}
.btn.ghost,.btn.dark{color:var(--ink);border-color:rgba(124,196,255,.3);background:rgba(124,196,255,.04)}.btn.ghost:hover,.btn.dark:hover{background:rgba(124,196,255,.10)}
th{color:var(--sky)}.label{color:var(--sky)}
nav.site a[aria-current]{background:rgba(124,196,255,.12)}
.mock .win{background:#0a1431;box-shadow:0 2px 0 rgba(124,196,255,.10) inset,0 30px 60px -12px rgba(0,0,0,.8),0 0 70px -20px rgba(124,196,255,.35)}
.mock .side b.on{background:var(--sky)}
.mock .float{background:#12204a;color:var(--ink);border-color:rgba(124,196,255,.25)}
.legal h2{color:#fff}
.legal strong{color:#fff}
.card img.mod{background:linear-gradient(145deg,rgba(124,196,255,.16),rgba(124,196,255,.04));border:1px solid rgba(124,196,255,.22);box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 8px 18px rgba(0,0,0,.45)}
/* Single-color headline (owner: no multicolored typography). The two-tone wordmark is the brand and stays. */
.hero h1 span{background:none;-webkit-background-clip:border-box;background-clip:border-box;color:inherit}
/* Brand logo image (owner: use the horizontal logo, not a text wordmark). */
header.site .logo{display:block;line-height:0}header.site .logo img{height:38px;width:auto;display:block}
footer.site .flogo{height:32px;width:auto;display:block;margin-bottom:10px}
/* Same footer treatment as ITZipper.com: rule, then icon + copyright, centered. */
.legalbar{display:flex;align-items:center;justify-content:center;gap:10px;border-top:1px solid var(--line);padding-top:18px;margin-top:6px;font-size:12px;color:var(--faint)}
.legalbar img{height:40px;width:auto;flex:none}
/* Mobile header (<=640px): menu icon + dropdown; "Request a demo" is the orange button at the bottom of the dropdown. Desktop unchanged. */
.mtoggle{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px}
.burger{display:none}
@media(max-width:640px){
  header.site .wrap{padding:0 16px;gap:8px;flex-wrap:nowrap}
  header.site .logo img{height:32px}
  .burger{display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-8px;border-radius:10px;cursor:pointer}
  .burger:hover,.mtoggle:focus-visible+.burger{background:var(--nav-hover);outline:2px solid var(--accent)}
  .burger span,.burger span::before,.burger span::after{display:block;width:20px;height:2px;border-radius:2px;background:#E2E8F0;transition:transform .18s ease,background-color .18s ease}
  .burger span{position:relative}.burger span::before,.burger span::after{content:"";position:absolute;left:0}
  .burger span::before{top:-6px}.burger span::after{top:6px}
  .mtoggle:checked+.burger span{background:transparent}
  .mtoggle:checked+.burger span::before{top:0;transform:rotate(45deg)}
  .mtoggle:checked+.burger span::after{top:0;transform:rotate(-45deg)}
  nav.site{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;flex-wrap:nowrap;padding:8px 16px 16px;background:#070d1c;border-bottom:1px solid rgba(124,196,255,.12);box-shadow:0 18px 32px rgba(0,0,0,.5)}
  .mtoggle:checked~nav.site{display:flex}
  nav.site a:not(.btn){padding:13px 8px;font-size:16px;border-radius:10px;border-bottom:1px solid var(--nav-line)}
  nav.site a:not(.btn):last-of-type{border-bottom:0}
  nav.site a.btn{margin-top:10px;text-align:center;padding:13px 18px;font-size:16px}
}