/* Zallant™ UI theme (v1.15.25). Loaded after app.css and site.css on every page.
   Neeraj, 2026-10-11: new fonts, spacing, corner radii, shadows and motion (docs/VERSIONS.md v1.15.25).
   v1.21 (Neeraj, 2026-10-12): the colors follow nsusystems.com too (white, light gray #f5f5f7,
   near-black #1d1d1f text, blue #0071e3); they live in the :root of app.css and site.css.
   Fonts: the visitor's own system font (San Francisco on Apple devices), then our self-hosted
   Inter (SIL OFL 1.1) everywhere else. No font files are downloaded from anyone else. */
:root {
  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro Display", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --radius: 18px;
  --radius-lg: 24px;
  --radius-xl: 28px;
  --radius-field: 12px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04), 0 4px 14px rgba(0, 0, 0, .04);
  --shadow: 0 12px 32px rgba(0, 0, 0, .08);
  --shadow-lift: 0 18px 40px rgba(0, 0, 0, .08);

  /* Text sizes (v1.23, Neeraj 2026-10-12: one text size system on every page). Use only these;
     never a one-off font-size. Body is 17px like nsusystems.com. */
  --fs-xs: .8125rem;      /* 13px: tags, badges, dates, table headings */
  --fs-sm: .9375rem;      /* 15px: secondary text, footers, menus, hints */
  --fs-body: 1.0625rem;   /* 17px: body text, form fields, buttons */
  --fs-label: 1rem;       /* 16px: form labels */
  --fs-btn: 1.0625rem;    /* 17px: buttons */
  --fs-lg: 1.25rem;       /* 20px: lead lines and intros */
  --fs-h3: 1.25rem;       /* 20px */
  --fs-logo: 1.75rem;     /* 28px: the Zallant wordmark next to the logo tile */
  --fs-h2: 1.375rem;      /* 22px: card and page section headings */
  --fs-h1: clamp(1.75rem, 1.4rem + 1.5vw, 2.25rem);   /* 28 to 36px: page titles */
  --fs-section: clamp(2rem, 1.4rem + 2.6vw, 3.25rem); /* 32 to 52px: marketing section headings */
  --fs-display: clamp(2.5rem, 1.6rem + 4.4vw, 4.75rem); /* 40 to 76px: the homepage headline */
}
/* Phones: small text one step bigger, so nothing is under 14px. */
@media (max-width: 600px) {
  :root { --fs-xs: .875rem; --fs-sm: 1rem; --fs-label: 1.0625rem; --fs-logo: 1.5rem; }
}

/* ---------- Type ---------- */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
/* WCAG 2.4.11: anything reached with the keyboard or a #link stops below the sticky header, never under it. */
html { scroll-padding-top: 104px; }
@media (max-width: 720px) { html { scroll-padding-top: 136px; } } /* the phone header wraps to two rows (~115px) */
/* The app's top bar is taller on wider screens (logo row + menu row: ~150px, ~190px when the menu wraps). */
@media (min-width: 701px) { html:has(.topbar) { scroll-padding-top: 170px; } }
@media (min-width: 701px) and (max-width: 960px) { html:has(.topbar) { scroll-padding-top: 210px; } }
body { font-family: var(--font); font-size: var(--fs-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: -.01em; line-height: 1.47; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 600; letter-spacing: -.015em; }
a { transition: color .2s ease, background-color .2s ease, opacity .2s ease; }
button, input, select, textarea { font-family: inherit; letter-spacing: inherit; }
input, select, textarea { font-size: var(--fs-body); }

/* ---------- Buttons: rounded pills that grow a little on hover ---------- */
.btn, .pillbtn {
  border-radius: 999px; font-weight: 600; font-size: var(--fs-btn);
  transition: transform .35s var(--ease), box-shadow .35s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn { min-height: 44px; padding: 0 22px; border-width: 1.5px; }
.btn.small { min-height: 34px; padding: 0 14px; font-size: var(--fs-sm); }
.btn.big { min-height: 52px; padding: 0 28px; }
.btn.block { min-height: 52px; padding: 0 22px; }
.pillbtn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 24px; }
@media (hover: hover) {
  .btn:hover, .pillbtn:hover { transform: scale(1.03); }
}

/* ---------- Form fields ---------- */
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=number], input[type=url], input[type=password], input[type=search], select, textarea {
  min-height: 48px; padding: .7rem 1rem; border-radius: var(--radius-field); border: 1px solid var(--field-line);
  transition: border-color .2s ease, box-shadow .2s ease;
}
textarea { padding: .85rem 1rem; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; border-color: var(--accent); box-shadow: 0 0 0 4px rgba(0, 113, 227, .15); }
label { font-weight: 600; font-size: var(--fs-label); }

/* =====================================================================
   App, sign-in and public pages (app.css)
   ===================================================================== */
/* Header: frosted white bar that stays at the top while you scroll */
.topbar { position: sticky; top: 0; z-index: 30; background: var(--frost); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--line); }
.nav a { border-radius: 999px; padding: .4rem .85rem; }

h1 { letter-spacing: -.02em; }
.pagehead { margin-bottom: 1.5rem; }

/* Cards: larger corners, softer edges, more room inside */
.card { border-radius: var(--radius-lg); padding: 1.5rem 1.6rem; margin-bottom: 1.25rem; border-color: var(--line); box-shadow: var(--shadow-sm); }
.grid { gap: 1.25rem; }
.stats { gap: 1rem; }
.stat { border-radius: var(--radius); padding: 1rem 1.2rem; box-shadow: var(--shadow-sm); }
.stat b { font-size: 1.75rem; letter-spacing: -.02em; }
.flash { border-radius: 14px; padding: .85rem 1.1rem; }
.pill { padding: .2rem .65rem; }
.bubble { border-radius: 14px; }
pre { border-radius: 12px; }
@media (max-width: 520px) { .card { padding: 1.2rem 1.1rem; border-radius: 20px; } }

/* Sign-in, sign-up and public forms */
.authcard { border-radius: var(--radius-xl); padding: 2.25rem 2rem; box-shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 20px 48px rgba(0, 0, 0, .08); }
.formcard { border-radius: var(--radius-xl); padding: 2rem 1.8rem; box-shadow: var(--shadow); }
.plancard { border-radius: var(--radius); padding: 16px 16px 12px; transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease; }
.qr { border-radius: 16px; }
.sign { border-radius: var(--radius-xl); }
@media (max-width: 520px) { .authcard { padding: 1.6rem 1.25rem; border-radius: 22px; } .formcard { padding: 1.5rem 1.2rem; border-radius: 22px; } }

/* Public profile pages */
.profile { border-radius: 0 0 var(--radius-xl) var(--radius-xl); box-shadow: var(--shadow); }
.tags li { padding: .3rem .85rem; }

/* =====================================================================
   zallant.com marketing and legal pages (site.css)
   ===================================================================== */
.wrap { max-width: 1200px; }
.sitehead .wrap { height: 84px; }
.sitehead nav { gap: 28px; font-weight: 500; }
.sitehead nav .pillbtn { min-height: 42px; padding: 0 20px; font-size: var(--fs-sm); }

/* Hero: bigger, tighter headline that rises in on load */
.hero h1 { font-size: var(--fs-display); line-height: 1.04; letter-spacing: -.025em; }
.hero p.lede { font-size: var(--fs-lg); line-height: 1.5; }
.hero .ctas { gap: 14px; }
.hero .ctas .pillbtn { min-height: 56px; padding: 0 30px; }
@keyframes zrise { from { opacity: 0; transform: translate3d(0, 32px, 0); } to { opacity: 1; transform: none; } }
@keyframes zfloat { from { opacity: 0; transform: translate3d(0, 60px, 0) scale(.96); } to { opacity: 1; transform: none; } }
.hero .wrap > div:first-child > * { animation: zrise 1s var(--ease) both; }
.hero .wrap > div:first-child > :nth-child(2) { animation-delay: .08s; }
.hero .wrap > div:first-child > :nth-child(3) { animation-delay: .16s; }
.hero .wrap > div:first-child > :nth-child(4) { animation-delay: .24s; }
.hero .wrap > div:first-child > :nth-child(5) { animation-delay: .32s; }
.hero .mockwrap, .hero .phone { animation: zfloat 1.3s var(--ease) .2s both; }
.mockpage { border-radius: var(--radius-lg); }

/* Sections: more air, bigger headings */
section.block { padding: 104px 0; }
section.block h2 { font-size: var(--fs-section); line-height: 1.08; letter-spacing: -.025em; }
section.block p.intro { font-size: var(--fs-lg); line-height: 1.55; margin-bottom: 56px; }

/* Cards lift on hover (mouse only) */
.plan, .examples li, .board { border-radius: var(--radius-xl); }
.plan { padding: 40px 36px; gap: 4px; transition: transform .35s var(--ease), box-shadow .35s ease; }
.plan .price b { font-size: 3.4rem; font-weight: 600; letter-spacing: -.03em; }
.examples li { border-radius: var(--radius-lg); padding: 26px 28px; transition: transform .35s var(--ease), box-shadow .35s ease; }
.examples .exart { width: calc(100% + 56px); margin: -26px -28px 16px; }
@media (hover: hover) {
  .plan:hover, .examples li:hover, .also > li:hover { transform: scale(1.03); box-shadow: 0 18px 40px rgba(0, 0, 0, .14); }
}
.chips li { padding: 12px 22px; }
.legal .callout { border-radius: 20px; padding: 22px 24px; }
.shot { border-radius: 24px; }
.crm { border-radius: 18px; }

/* FAQ: big questions with a round +/− button */
.faq details { padding: 0; }
.faq summary { min-height: 76px; align-items: center; padding: 18px 0; font-size: var(--fs-lg); letter-spacing: -.01em; }
.faq summary::after { content: "+"; flex: none; width: 36px; height: 36px; border-radius: 999px; border: 1.5px solid var(--ink); color: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; transition: background-color .2s ease, color .2s ease; }
.faq details[open] summary::after { content: "\2212"; background: var(--ink); border-color: var(--ink); color: var(--on-ink); }
.faq details p { margin: 0 0 1.4rem; padding-right: 60px; font-size: var(--fs-body); line-height: 1.65; color: var(--muted); }

@media (max-width: 900px) { section.block p.intro { margin-bottom: 40px; } .plan { padding: 32px 28px; } }
@media (max-width: 720px) { .sitehead .wrap { height: auto; min-height: 72px; } .sitehead nav { gap: 16px; } }
@media (max-width: 520px) {
  section.block { padding: 80px 0; }
  .faq details p { padding-right: 0; }
  .hero .ctas .pillbtn { min-height: 52px; padding: 0 24px; }
  .sitehead nav .pillbtn { min-height: 40px; padding: 0 14px; }
  .plan { padding: 28px 22px; }
}
@media (max-width: 400px) { .sitehead nav { gap: 12px; } .sitehead nav .pillbtn { padding: 0 12px; } }
/* v1.21.3 (Neeraj, 2026-10-12): on phones the logo is bigger and the trial button smaller and shorter
   ("Free trial"), so they look in proportion and fit on one row. */
.sitehead .pillbtn .short { display: none; }
@media (max-width: 560px) {
  .sitehead .wrap { padding-left: 16px; padding-right: 16px; min-height: 72px; }
  .mark { gap: 8px; } .mark img { width: 44px; height: 44px; } .mark .tagline { white-space: nowrap; }
  .sitehead nav { gap: 12px; }
  .sitehead nav .pillbtn { min-height: 40px; padding: 0 16px; }
  .sitehead .pillbtn .long { display: none; } .sitehead .pillbtn .short { display: inline; }
}
/* Smaller phones: a smaller tile and tighter button so it fits on one row from 385px; narrower phones wrap (site.css). */
@media (max-width: 400px) {
  .mark img { width: 40px; height: 40px; }
  .sitehead nav { gap: 10px; }
  .sitehead nav .pillbtn { min-height: 38px; padding: 0 12px; }
  .sitehead nav { gap: 8px; }
}

/* ---------- Soft color (v1.21.3, Neeraj 2026-10-12: "too white and dark blue") ----------
   Sections take turns: soft blue, white, light gray. The big solid blue band becomes a light blue
   one with dark text. All text keeps AA contrast on these (gray #6e6e73 on the soft blue is 4.6:1). */
:root { --sky: #eef5fe; --sky-2: #e3eefc; --sky-3: #f3f8fe; --sky-line: #d6e6fa; }
.hero { background: linear-gradient(180deg, var(--sky) 0%, var(--paper) 100%); }
section.block.outcomes, section.block#examples { background: var(--sky); }
section.block.alongside, section.block.faq { background: var(--cream); }
.pilot { background: linear-gradient(135deg, var(--sky-2) 0%, var(--sky-3) 100%); color: var(--ink); border-top: 1px solid var(--sky-line); }
.pilot h2, .pilot p { color: var(--ink); }
.legal { background: linear-gradient(180deg, var(--sky) 0, var(--paper) 360px) no-repeat; }
/* App, sign-in and public pages: a soft blue glow at the top fading into light gray. */
body:not(.sitebody):not(:has(.embed)) { background: linear-gradient(180deg, var(--sky-2) 0, var(--cream) 560px) no-repeat, var(--cream); }
@media print { body:not(.sitebody), .hero, .legal, section.block, .pilot { background: #fff !important; } }

/* Pictures and picture cards: no border lines, soft shadows instead (Neeraj, 2026-10-12; docs/UI-RULEBOOK.md §8). */
.shot, .crm { border: 0; }
.examples li, .also > li { border: 0; box-shadow: var(--shadow-sm); }
.also > li { transition: transform .35s var(--ease), box-shadow .35s ease; }

/* ---------- Phones: cards and their text are centered (v1.21.3, Neeraj 2026-10-12) ----------
   Lists inside cards stay left-aligned as a centered block so they're easy to read. FAQ and legal
   text stay left-aligned. */
@media (max-width: 720px) {
  section.block h2, section.block p.intro, .alsoh { text-align: center; margin-left: auto; margin-right: auto; }
  .hero .wrap > div:first-child { text-align: center; }
  .hero h1, .hero p.lede { margin-left: auto; margin-right: auto; }
  .hero .ctas { justify-content: center; }
  .plan { text-align: center; align-items: center; }
  .plan ul { align-self: center; text-align: left; flex: none; }
  .plan .pillbtn { align-self: center; }
  .examples li, .also > li, .steps li, .feature, .howlist li, .crms figcaption, .shotnote, .alongside .wrap > * { text-align: center; }
  .alsotags { justify-content: center; }
  .wins li { padding-left: 0; text-align: center; }
  .wins li::before { position: static; margin-right: 8px; }
  .pilot .wrap { flex-direction: column; justify-content: center; text-align: center; }
  .pilot p { margin-left: auto; margin-right: auto; }
  .more, section.block > .wrap > p { text-align: center; }
  footer.sitefoot .wrap { flex-direction: column; align-items: center; text-align: center; }
  footer.sitefoot nav, footer.sitefoot .footbrand { justify-content: center; } footer.sitefoot .footbrand span { text-align: left; }
  .legal, .legal *, .faq, .faq * { text-align: left; }
}

/* ---------- Scroll-in motion: sections rise in gently as they come into view ----------
   Only when the page's script adds .reveal-on (it skips that for reduced motion), so content is
   always visible without JavaScript. */
.reveal-on .reveal { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal-on .reveal.in { opacity: 1; transform: none; }

/* Anyone who asks their device for less motion gets none. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .mockstack .mockpage:first-child { opacity: 1; }
  .note { opacity: 1; transform: none; }
  .reveal-on .reveal { opacity: 1; transform: none; }
}
@media print { .topbar, .sitehead { position: static; } }

/* WCAG 2.5.8 / phone comfort: small text links and Sign out get a taller tap area (no visual change). */
.sitehead nav a:not(.pillbtn), footer.sitefoot nav a { padding-block: 10px; }
.who button { padding-block: 8px; }
/* WCAG 1.4.12: with wider letter spacing the phone header links wrap instead of pushing the page sideways. */
@media (max-width: 720px) { .sitehead nav { flex-wrap: wrap; justify-content: flex-end; } }
/* "Verify you are human" box (Cloudflare Turnstile): it is at least 300px wide. On the narrowest phones (320px) the
   form is narrower than that, so the box spreads evenly into the side padding instead of pushing the page sideways. */
.cf-turnstile { margin: .8rem min(0px, calc((100% - 300px) / 2)); }

/* ==============================================================
   Dark mode (v1.32, NSU 2026-10-12: "dark/light mode for all pages, controlled from Settings").
   Settings > Your account > Appearance: Same as my device (default), Light or Dark. The server writes
   the choice into <html data-theme="…">, so nothing flashes and no script runs (src/lib/appearance.ts).
   "Same as my device" uses the media query below. Only the tokens change; every rule above uses them.
   The two blocks below must stay identical (the smoke test checks). Print and emails always stay light.
   Every text color keeps 4.5:1 on every dark surface (docs/UI-RULEBOOK.md §2b).
   ===================================================================== */
:root { color-scheme: light; }
:root[data-theme="light"] { color-scheme: light; }
@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    --paper: #000000; --white: #1c1c1e; --bubble: #2c2c2e; --cream: #111112; --tint: #0e2a47; --blue-bg: #0e2a47; --tint-line: #1f4d80;
    --ink: #f5f5f7; --muted: #a1a1a6; --muted-2: #c7c7cc; --line: #3a3a3c; --field-line: #8e8e93; --on-ink: #1d1d1f;
    --navy: #2997ff; --navy-2: #47a6ff; --accent-hover: #0068d6; --frost: rgba(22, 22, 23, .8);
    --amber-bg: #3d2a0a; --amber-ink: #f5b955; --hot-bg: #3f1d12; --warn: #ff8a65; --gray-bg: #2c2c2e; --gray-ink: #c7c7cc;
    --green: #4cd38a; --green-bg: #0f2e1d; --red: #ff7b6e; --red-bg: #3b1512;
    --sky: #08182b; --sky-2: #0b1f38; --sky-3: #0a1a2e; --sky-line: #17345a;
    --gold-bg: #3a2f0b; --gold-ink: #f2d27a; --gold-line: #6b5a1f; --silver-bg: #2c2f34; --silver-ink: #d9dde3; --silver-line: #50555d;
    --bronze-bg: #3a2414; --bronze-ink: #f0b48a; --bronze-line: #6e452a;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 12px 32px rgba(0, 0, 0, .5); --shadow-lift: 0 18px 40px rgba(0, 0, 0, .5);
  }
}
@media screen and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --paper: #000000; --white: #1c1c1e; --bubble: #2c2c2e; --cream: #111112; --tint: #0e2a47; --blue-bg: #0e2a47; --tint-line: #1f4d80;
    --ink: #f5f5f7; --muted: #a1a1a6; --muted-2: #c7c7cc; --line: #3a3a3c; --field-line: #8e8e93; --on-ink: #1d1d1f;
    --navy: #2997ff; --navy-2: #47a6ff; --accent-hover: #0068d6; --frost: rgba(22, 22, 23, .8);
    --amber-bg: #3d2a0a; --amber-ink: #f5b955; --hot-bg: #3f1d12; --warn: #ff8a65; --gray-bg: #2c2c2e; --gray-ink: #c7c7cc;
    --green: #4cd38a; --green-bg: #0f2e1d; --red: #ff7b6e; --red-bg: #3b1512;
    --sky: #08182b; --sky-2: #0b1f38; --sky-3: #0a1a2e; --sky-line: #17345a;
    --gold-bg: #3a2f0b; --gold-ink: #f2d27a; --gold-line: #6b5a1f; --silver-bg: #2c2f34; --silver-ink: #d9dde3; --silver-line: #50555d;
    --bronze-bg: #3a2414; --bronze-ink: #f0b48a; --bronze-line: #6e452a;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4); --shadow: 0 12px 32px rgba(0, 0, 0, .5); --shadow-lift: 0 18px 40px rgba(0, 0, 0, .5);
  }
}