/* WizardWeb brand layer. Source: WizardWeb Brand Guidelines (kit dated 2026-10-06, received 2026-10-19).
   Palette: Deep Navy #0B1B33, Electric Blue #2E7CF6, Charcoal #1A2332, Light Gray #F4F6FA, White.
   Type: Montserrat (headings), Inter (body). Loaded after each page's inline <style>, so equal-specificity
   rules here win. Derived blues exist only so small text and buttons clear WCAG AA:
     #0A63EE  white text 5.2:1                         (button fills)
     #0957D6  on white 6.3:1, on Light Gray 5.8:1, still 4.7:1 at 85% opacity (small accent text on light)
     #5896F8  on Deep Navy 5.9:1                       (small accent text on navy)
   Exact Electric Blue is used for large type, rules, dots and glows (on navy 4.4:1, on white 3.9:1 = AA large). */

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500 800; font-display: swap; src: url(/assets/fonts/montserrat-500-800.9cd8c408c8.woff2) format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 700; font-display: swap; src: url(/assets/fonts/inter-400-700.018b9b0124.woff2) format("woff2"); }

:root {
  --navy: #0B1B33;
  --blue: #2E7CF6;
  --charcoal: #1A2332;
  --gray: #F4F6FA;
  --white: #FFFFFF;
  --blue-600: #0A63EE;
  --blue-700: #0957D6;
  --blue-800: #084CBD;
  --navy-2: #112645;

  --f-display: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --f-mono: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;

  --btn: var(--blue-600);
  --btn-hover: var(--blue-800);
  --radius: 8px;
  --nav-h: 68px;

  /* light surface is the default */
  --ink: var(--white);
  --ink-2: var(--gray);
  --paper: var(--charcoal);
  --heading: var(--navy);
  --paper-dim: rgba(26, 35, 50, 0.78);
  --smoke: #56627A;
  --line: rgba(11, 27, 51, 0.10);
  --line-strong: rgba(11, 27, 51, 0.20);
  --accent: var(--blue-700);
  --accent-ink: #FFFFFF;
}

/* dark (Deep Navy) blocks: the same class names on every page */
.hero, .page-hero, .marquee, .ai, .cta, .cta-glow, .footer, .dash, #wzc,
.work-card, .feature-shot, .p-shot, .shot-desktop, .shot-mobile {
  --ink: var(--navy);
  --ink-2: var(--navy-2);
  --paper: var(--gray);
  --heading: #FFFFFF;
  --paper-dim: rgba(244, 246, 250, 0.80);
  --smoke: #A3AEC0;
  --line: rgba(244, 246, 250, 0.12);
  --line-strong: rgba(244, 246, 250, 0.26);
  --accent: #5896F8;
  color: var(--paper);
}
.hero {
  background:
    radial-gradient(60% 55% at 88% 96%, rgba(46, 124, 246, 0.26), transparent 62%),
    radial-gradient(45% 40% at 6% 4%, rgba(46, 124, 246, 0.10), transparent 60%),
    var(--navy);
}
.page-hero { background-color: var(--navy); }
.cta, .cta-glow { background-color: var(--navy); }
.footer { background: #08162B; }

body { font-family: var(--f-sans); font-feature-settings: "kern", "calt"; }
h1, h2, h3 { color: var(--heading); font-family: var(--f-display); }
/* em was the old serif-italic accent; in this system emphasis is colour, set upright */
em { font-style: normal; }
h1 em, h2 em, h3 em { color: var(--blue); }
::selection { background: var(--blue); color: #FFFFFF; }
a:focus-visible, button:focus-visible, summary:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }

/* the short blue rule under each label, as on the brand board */
.eyebrow { color: var(--accent); font-weight: 700; letter-spacing: 0.12em; }
.eyebrow .dot { width: 18px; height: 2px; border-radius: 0; background: var(--blue); box-shadow: none; vertical-align: middle; margin-right: 10px; animation: none; }

/* ---------- header: white bar carrying the primary mark (brand board p2: default logo for the website header) ---------- */
.nav {
  height: var(--nav-h);
  padding-top: 0; padding-bottom: 0;
  background: rgba(255, 255, 255, 0.97);
  border-bottom: 1px solid rgba(11, 27, 51, 0.08);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
  color: var(--charcoal);
}
.nav.is-stuck { background: rgba(255, 255, 255, 0.97); border-bottom-color: rgba(11, 27, 51, 0.10); box-shadow: 0 6px 24px rgba(11, 27, 51, 0.06); }
.brand { align-items: center; gap: 10px; font-family: var(--f-display); font-weight: 700; font-size: 19px; letter-spacing: -0.015em; color: var(--navy); }
.brand .logo { display: block; height: 34px; width: auto; }
.brand .word { font-family: var(--f-display); font-weight: 700; font-size: 25px; line-height: 1; letter-spacing: -0.02em; color: #0B1B33; }
.nav-links { font-family: var(--f-sans); font-size: 14.5px; font-weight: 500; letter-spacing: 0; text-transform: none; gap: 30px; }
.nav-links a { color: var(--charcoal); }
.nav-links a:hover, .nav-links a.is-current { color: var(--navy); }
.nav-links a::after { background: var(--blue); height: 2px; bottom: -8px; }
.nav-cta {
  font-family: var(--f-sans); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none;
  padding: 11px 18px; border-radius: var(--radius); background: var(--btn); border: 1px solid var(--btn); color: #FFFFFF;
}
.nav-cta::before { display: none; }
.nav-cta:hover { background: var(--btn-hover); border-color: var(--btn-hover); color: #FFFFFF; }
.nav-menu { font-family: var(--f-sans); font-size: 14px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.nav-menu summary { color: var(--navy); border-color: rgba(11, 27, 51, 0.20); background: #FFFFFF; border-radius: var(--radius); }
.nav-menu[open] summary { border-color: var(--blue); }
.nav-menu .sheet { background: #FFFFFF; border-color: rgba(11, 27, 51, 0.12); border-radius: var(--radius); box-shadow: 0 16px 40px rgba(11, 27, 51, 0.14); overflow: hidden; }
.nav-menu .sheet a { color: var(--charcoal); font-weight: 500; }
.nav-menu .sheet a:hover { color: var(--navy); background: var(--gray); }
@media (max-width: 760px) {
  .nav { gap: 10px; }
  .nav-cta { padding: 10px 12px; font-size: 13px; }
  .brand { font-size: 17px; gap: 8px; }
  .brand .logo { height: 28px; }
  .brand .word { font-size: 21px; }
}
/* the 28px lockup leaves no room for the header CTA on phones; the hero carries the same Book a call button */
@media (max-width: 430px) { .nav-cta { display: none; } }

/* ---------- buttons ---------- */
.btn { font-family: var(--f-sans); font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; border-radius: var(--radius); padding: 14px 18px 14px 22px; }
.btn-primary { background: var(--btn); color: #FFFFFF; box-shadow: 0 1px 2px rgba(11, 27, 51, 0.12); }
.btn-primary:hover { background: var(--btn-hover); }
.btn-primary .arr { background: #FFFFFF; color: var(--btn); }
.btn-ghost { border-color: var(--line-strong); }
.btn-ghost:hover { background: var(--line); }
.feature-link, .p-link { text-transform: none; letter-spacing: 0; font-size: 14.5px; font-weight: 600; font-family: var(--f-sans); }
.feature-link .arr, .p-link .arr { color: #FFFFFF; }
/* cr form confirmation: an opaque tint of its own surface, so its text is judged against what is really there */
.ok { background: #EAF2FE; }
.cta-glow .ok, .cta .ok { background: #10294C; }
.ok h3:focus { outline: 2px solid var(--blue); outline-offset: 4px; }

/* ---------- surfaces and cards ---------- */
.audit-form input, .wzc-foot input { border-radius: var(--radius); }
.audit-form label { color: var(--smoke); }
.page-meta .num, .hero-meta .num { white-space: nowrap; }
.price-card .amt, .kpi .n, .hero-meta .num, .page-meta .num, .dash-kpi .n, .res-cell .num { font-variant-numeric: tabular-nums lining-nums; }
.price-card.is-featured { box-shadow: inset 0 3px 0 var(--blue); }
.form-ok { border-radius: var(--radius); }
.chip { font-family: var(--f-sans); text-transform: none; letter-spacing: 0; font-size: 13.5px; font-weight: 500; }
.chip.is-on { background: var(--btn); border-color: var(--btn); color: #FFFFFF; }
.filters { top: var(--nav-h); background: rgba(255, 255, 255, 0.94); }
.feature-shot, .work-card, .p-shot, .shot-desktop, .shot-mobile { border-radius: 10px; }
.dash { border-radius: 10px; overflow: hidden; box-shadow: 0 30px 70px rgba(11, 27, 51, 0.28); }
.ai-card, .price-card { transition: background .3s ease, box-shadow .3s ease; }

/* index: two sections that never had their own padding (sat flush on the left edge) */
#pricing { padding: 96px var(--gutter) 104px; }
#audit:not(.section-pad) { padding: 96px var(--gutter); background: var(--gray); }
#audit .cta-inner h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; letter-spacing: -0.02em; margin: 16px 0 14px; }
#audit .cta-inner p { color: var(--paper); opacity: .85; }
.audit-form input { background: #FFFFFF; }
.audit-form button[type="submit"] { font-family: var(--f-sans) !important; font-size: 15px !important; font-weight: 600 !important; letter-spacing: 0 !important; text-transform: none !important; padding: 15px 22px !important; }
.audit-form button[type="submit"]:hover { background: var(--btn-hover) !important; }
.more-head .label { font-weight: 700 !important; }

/* cr: the SULAB type card's gradient had no solid base and turned pale on the white page */
.work-card.sulab { background: radial-gradient(80% 90% at 0% 0%, rgba(46, 124, 246, 0.30), transparent 65%), var(--navy-2); }

/* cr steps: bold accent inside a faded paragraph needs the deeper blue to stay AA */
.step p b { color: var(--blue-800); }

/* chat */
body #wzc-launch { background: var(--btn); color: #FFFFFF; font-family: var(--f-sans); text-transform: none; letter-spacing: 0; font-size: 14px; border-radius: 999px; box-shadow: 0 10px 30px rgba(11, 27, 51, 0.30); }
body #wzc-launch:hover { background: var(--btn-hover); }
#wzc { border-radius: 12px; }

@media (prefers-reduced-motion: reduce) { .eyebrow .dot { animation: none; } }