/* NumberBroom design tokens, direction "2a" (1a layout + 1c near-black/cyan palette)
   Source of truth for the redesign. Shipped from the repo root to /styles.css by
   STATIC_ASSETS in scripts/build-hosting.js. Every page loads it; per-page <style>
   blocks may add layout on top but must not redefine a --nb-* value.

   Two deviations from the designer's tokens.css, both deliberate:
   - The --nb-h-* hue block was dropped. Nothing referenced it in any mock, and
     it still declared --nb-h-accent as hue 40, labelled "brand amber", left
     over from the abandoned amber direction. That contradicts the cyan accent
     declared two lines below it, so it was a trap, not a token.
   - Nothing else. Values are byte-identical to the handoff.

   Dark is the default. Add data-theme="light" to <html> for light (articles,
   email, PDF, and the user-toggleable app theme).
   All fonts are on Google Fonts:
   https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap */

:root {
  /* ── Type ─────────────────────────────── */
  --nb-font-sans: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --nb-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --nb-text-xs: 12px;   --nb-lh-xs: 16px;
  --nb-text-sm: 13px;   --nb-lh-sm: 18px;
  --nb-text-md: 15px;   --nb-lh-md: 24px;   /* body */
  --nb-text-lg: 17px;   --nb-lh-lg: 26px;   /* lede */
  --nb-text-xl: 20px;   --nb-lh-xl: 28px;   /* h4 */
  --nb-text-2xl: 26px;  --nb-lh-2xl: 32px;  /* h3 */
  --nb-text-3xl: 34px;  --nb-lh-3xl: 40px;  /* h2 */
  --nb-text-4xl: 44px;  --nb-lh-4xl: 48px;  /* h1 article */
  --nb-text-5xl: 56px;  --nb-lh-5xl: 58px;  /* h1 hero */
  --nb-tracking-tight: -0.02em;
  --nb-tracking-caps: 0.08em;   /* mono eyebrows, table headers */
  --nb-weight-regular: 400;
  --nb-weight-medium: 500;
  --nb-weight-semibold: 600;   /* max weight anywhere */

  /* ── Space (4px base) ──────────────────── */
  --nb-space-1: 4px;  --nb-space-2: 8px;  --nb-space-3: 12px; --nb-space-4: 16px;
  --nb-space-5: 20px; --nb-space-6: 24px; --nb-space-8: 32px; --nb-space-10: 40px;
  --nb-space-12: 48px; --nb-space-16: 64px; --nb-space-20: 80px; --nb-space-24: 96px;
  --nb-container: 1200px;
  --nb-measure: 68ch;

  /* ── Radii, engineered, not soft ──────── */
  --nb-radius-xs: 3px;   /* chips, keys */
  --nb-radius-sm: 6px;   /* inputs, buttons */
  --nb-radius-md: 8px;   /* cards, panels */
  --nb-radius-lg: 12px;  /* hero card only */
  --nb-radius-full: 999px;

  /* ── Motion ────────────────────────────── */
  --nb-ease: cubic-bezier(.2,.7,.2,1);
  --nb-dur-fast: 120ms;
  --nb-dur: 200ms;

  /* ── Dark theme (default) ──────────────── */
  color-scheme: dark;
  --nb-bg: #0A0A0B;
  --nb-bg-sunken: #060607;
  --nb-surface: #121214;
  --nb-surface-2: #1A1A1D;
  --nb-surface-hover: #202024;
  --nb-border: #232326;
  --nb-border-strong: #3A3A40;
  --nb-rule: #1A1A1D;              /* table hairlines */

  --nb-text: #F4F4F5;
  --nb-text-2: #A1A1AA;
  --nb-text-3: #8B8B94;            /* meta, AA on --nb-surface */
  --nb-text-inverse: #0A0A0B;

  --nb-accent: #22D3EE;            /* cyan, buttons, links, focus */
  --nb-accent-hover: #67E1F5;
  --nb-accent-text: #22D3EE;
  --nb-accent-soft: rgba(34,211,238,.12);
  --nb-link: #22D3EE;
  --nb-link-hover: #8FE9F7;

  --nb-mobile: #67E8A0;   --nb-mobile-soft: rgba(103,232,160,.12);  /* shifted off-cyan so it never reads as the accent */
  --nb-landline: #94A3B8; --nb-landline-soft: rgba(148,163,184,.14);
  --nb-voip: #C084FC;     --nb-voip-soft: rgba(192,132,252,.12);
  --nb-invalid: #8B8B94;  --nb-invalid-soft: rgba(139,139,148,.14);
  --nb-disconnected: #8B8B94;
  --nb-risk: #F87171;     --nb-risk-soft: rgba(248,113,113,.12);  --nb-risk-border: rgba(248,113,113,.45);
  --nb-warn: #F5A524;     --nb-warn-soft: rgba(245,165,36,.12);
  --nb-ok: #67E8A0;

  /* Grade scale, one hue ramp, not a rainbow */
  --nb-grade-a: #3DDC84;
  --nb-grade-b: #8ED66B;
  --nb-grade-c: #D9C34A;
  --nb-grade-d: #F5A524;
  --nb-grade-f: #FF5D5D;
  --nb-grade-none: #5A6774;

  /* Elevation, dark ground needs edge light more than shadow */
  --nb-shadow-1: 0 1px 0 rgba(255,255,255,.04) inset, 0 1px 2px rgba(0,0,0,.4);
  --nb-shadow-2: 0 1px 0 rgba(255,255,255,.05) inset, 0 8px 24px -8px rgba(0,0,0,.6);
  --nb-shadow-3: 0 1px 0 rgba(255,255,255,.06) inset, 0 24px 48px -12px rgba(0,0,0,.7);

  /* Focus, two rings so it's visible on any surface */
  --nb-focus: 0 0 0 2px var(--nb-bg), 0 0 0 4px var(--nb-accent);
}

:root[data-theme="light"], [data-theme="light"] {
  color-scheme: light;
  --nb-bg: #F7F6F2;
  --nb-bg-sunken: #EFEDE7;
  --nb-surface: #FFFFFF;
  --nb-surface-2: #F3F1EC;
  --nb-surface-hover: #ECE9E2;
  --nb-border: #DDD9D0;
  --nb-border-strong: #B9B3A6;
  --nb-rule: #E8E5DE;

  --nb-text: #14181D;
  --nb-text-2: #3E4750;
  --nb-text-3: #6B7480;
  /* Not in the handoff's tokens.css, which left --nb-text-inverse inheriting
     the dark value. It is the label colour on a filled accent button, and
     #0A0A0B on the light accent #0E7490 is 3.6:1 -- under AA for body text.
     White on that same accent is 5.4:1. Without this every primary button on
     an article, an email or the PDF fails contrast. */
  --nb-text-inverse: #FFFFFF;

  --nb-accent: #0E7490;            /* cyan darkened for 4.6:1 on white */
  --nb-accent-hover: #0B5C73;
  --nb-accent-text: #0E7490;
  --nb-accent-soft: rgba(14,116,144,.10);
  --nb-link: #0E7490;
  --nb-link-hover: #14181D;

  --nb-mobile: #1B7F4B;   --nb-mobile-soft: rgba(27,127,75,.10);
  --nb-landline: #3F627F; --nb-landline-soft: rgba(63,98,127,.10);
  --nb-voip: #6A4FC8;     --nb-voip-soft: rgba(106,79,200,.10);
  --nb-invalid: #6B7480;  --nb-invalid-soft: rgba(107,116,128,.12);
  --nb-disconnected: #6B7480;
  --nb-risk: #C42B2B;     --nb-risk-soft: rgba(196,43,43,.08);  --nb-risk-border: rgba(196,43,43,.45);
  --nb-warn: #9A5B00;     --nb-warn-soft: rgba(154,91,0,.10);
  --nb-ok: #1B7F4B;

  --nb-grade-a: #1B7F4B;
  --nb-grade-b: #4F8F2E;
  --nb-grade-c: #8A7A00;
  --nb-grade-d: #9A5B00;
  --nb-grade-f: #C42B2B;
  --nb-grade-none: #A0A8B0;

  --nb-shadow-1: 0 1px 2px rgba(20,24,29,.06);
  --nb-shadow-2: 0 1px 2px rgba(20,24,29,.05), 0 8px 24px -8px rgba(20,24,29,.12);
  --nb-shadow-3: 0 2px 4px rgba(20,24,29,.05), 0 24px 48px -12px rgba(20,24,29,.18);
}

/* Base resets the tokens assume */
html { font-family: var(--nb-font-sans); background: var(--nb-bg); color: var(--nb-text); -webkit-font-smoothing: antialiased; }
body { margin: 0; font-size: var(--nb-text-md); line-height: var(--nb-lh-md); }
a { color: var(--nb-link); text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--nb-link) 40%, transparent); text-underline-offset: 3px; }
a:hover { color: var(--nb-link-hover); text-decoration-color: currentColor; }
:focus-visible { outline: none; box-shadow: var(--nb-focus); border-radius: var(--nb-radius-sm); }
::selection { background: var(--nb-accent-soft); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Theme-aware wordmark: render both imgs inside a [data-nb-wordmark] wrapper; the rule hides the wrong one. */
[data-nb-wordmark] [data-on="light"] { display: none; }
[data-theme="light"] [data-nb-wordmark] [data-on="dark"], :root[data-theme="light"] [data-nb-wordmark] [data-on="dark"] { display: none; }
[data-theme="light"] [data-nb-wordmark] [data-on="light"], :root[data-theme="light"] [data-nb-wordmark] [data-on="light"] { display: inline; }


/* ═══ Shared components ═══════════════════════════════════════════════════
   Below this line the file stops being pure tokens. These rules style markup
   emitted by a shared partial in scripts/lib/render-page.js and injected into
   both the generated content pages and the hand-written HTML pages, so they
   cannot live in either page's own <style> block without being duplicated.
   Keep this section small: anything used by exactly one surface belongs in
   that surface's stylesheet. */

/* Column heading, shared by the footer and the article's aside rails. */
.aside-label{font:500 11px/1 var(--nb-font-mono);letter-spacing:var(--nb-tracking-caps);text-transform:uppercase;color:var(--nb-text-3);margin-bottom:12px}

/* ── Footer ── */
.footer{border-top:1px solid var(--nb-border);padding:48px 32px 28px;display:flex;flex-direction:column;gap:36px;max-width:var(--nb-container);margin:0 auto}
.footer-cols{display:grid;grid-template-columns:1.4fr repeat(4,1fr);gap:32px}
.footer-about{display:flex;flex-direction:column;gap:14px}
.footer-about .footer-brand{font:600 17px/1 var(--nb-font-sans);letter-spacing:-.02em;color:var(--nb-text);text-decoration:none}
.footer-about p{margin:0;font:400 13px/20px var(--nb-font-sans);color:var(--nb-text-2);max-width:30ch;text-wrap:pretty}
.footer-theme{display:flex;align-items:center;gap:10px}
.footer-theme span{font:400 11px/1 var(--nb-font-mono);color:var(--nb-text-3)}
.footer-col{display:flex;flex-direction:column;gap:10px}
.footer-col a{font:400 14px/1 var(--nb-font-sans);color:var(--nb-text-2);text-decoration:none}
.footer-col a:hover{color:var(--nb-text)}
.footer-legal{padding-top:20px;border-top:1px solid var(--nb-border);display:flex;justify-content:space-between;align-items:flex-start;gap:32px;flex-wrap:wrap}
.footer-legal p{margin:0;font:400 12px/18px var(--nb-font-sans);color:var(--nb-text-3);max-width:80ch;text-wrap:pretty}
.footer-legal .footer-copy{font:400 12px/18px var(--nb-font-mono);color:var(--nb-text-3);white-space:nowrap}

@media (max-width:1099px){ .footer-cols{grid-template-columns:1fr 1fr;gap:28px} }
@media (max-width:699px){ .footer{padding:36px 20px 24px} .footer-cols{grid-template-columns:1fr} }

/* ═══ Marketing surface ═══════════════════════════════════════════════════
   The component layer shared by the hand-written marketing pages (the seven
   landing pages, and anything added beside them). It exists because those
   pages previously carried seven near-identical copies of the same nav,
   button, card, form and FAQ rules, which is how a redesign goes stale one
   file at a time.

   index.html and pricing.html still carry their own fuller copies inline;
   those load after this file and win where they overlap. Their surfaces are
   big enough to justify it. Anything smaller should use what is here.
   ────────────────────────────────────────────────────────────────────── */

.nb *,.nb *::before,.nb *::after{box-sizing:border-box}
.nb img{max-width:100%}
.nb .hidden{display:none!important}
.nb .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.nb{background:var(--nb-bg);color:var(--nb-text);font-family:var(--nb-font-sans);line-height:var(--nb-lh-md);-webkit-font-smoothing:antialiased;margin:0}
.nb .container{width:100%;max-width:var(--nb-container);margin:0 auto;padding:0 32px}
.nb .container-narrow{max-width:880px}
.nb section{padding:64px 0;position:relative}
.nb h1,.nb h2,.nb h3,.nb h4{font-weight:var(--nb-weight-semibold);color:var(--nb-text);letter-spacing:var(--nb-tracking-tight);line-height:1.15;margin:0}
.nb h1{font-size:clamp(30px,4.6vw,44px);line-height:1.14;text-wrap:balance}
.nb h2{font-size:clamp(22px,3vw,28px)}
.nb h3{font-size:17px;letter-spacing:0}
.nb p{color:var(--nb-text-2);margin:0}
.nb .lede{font:400 17px/26px var(--nb-font-sans);color:var(--nb-text-2);max-width:56ch;text-wrap:pretty}
.nb .sub{font:400 14px/22px var(--nb-font-sans);color:var(--nb-text-3)}
.nb .text-gradient{color:var(--nb-accent-text)}
.nb ::selection{background:var(--nb-accent-soft)}

/* Nav. The mark is inlined per page so it can follow currentColor. */
.nb nav#nav{position:sticky;top:0;z-index:50;background:var(--nb-bg);border-bottom:1px solid var(--nb-border)}
.nb .nav-inner{height:60px;max-width:var(--nb-container);margin:0 auto;padding:0 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.nb .nav-logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--nb-text)}
.nb .nav-logo svg{width:24px;height:24px;color:var(--nb-accent)}
.nb .nav-logo span{font:600 17px/1 var(--nb-font-sans);letter-spacing:var(--nb-tracking-tight)}
.nb .nav-links{display:flex;align-items:center;gap:28px;font:500 14px/1 var(--nb-font-sans)}
.nb .nav-links a:not(.btn){color:var(--nb-text-2);text-decoration:none}
.nb .nav-links a:not(.btn):hover,.nb .nav-links a.active{color:var(--nb-text)}

/* Buttons: 36 nav, 40 inline, 44 hero and forms. */
.nb .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:44px;padding:0 18px;border:none;border-radius:var(--nb-radius-sm);font:600 15px/1 var(--nb-font-sans);text-decoration:none;cursor:pointer;white-space:nowrap;transition:background var(--nb-dur) var(--nb-ease),border-color var(--nb-dur) var(--nb-ease)}
.nb .btn:disabled{opacity:.5;cursor:not-allowed}
.nb .btn-orange,.nb .btn-primary,.nb .btn-azure{background:var(--nb-accent);color:var(--nb-text-inverse)}
.nb .btn-orange:hover,.nb .btn-primary:hover,.nb .btn-azure:hover{background:var(--nb-accent-hover);color:var(--nb-text-inverse)}
.nb .btn-glass,.nb .btn-outline,.nb .btn-secondary{background:transparent;border:1px solid var(--nb-border-strong);color:var(--nb-text);font-weight:500}
.nb .btn-glass:hover,.nb .btn-outline:hover,.nb .btn-secondary:hover{background:var(--nb-surface-hover);color:var(--nb-text)}
.nb .btn-sm{height:36px;padding:0 14px;font-size:14px}

/* Hero */
.nb .hero{padding:56px 0 40px;position:relative;isolation:isolate}
.nb .hero-inner{position:relative;max-width:880px;margin:0 auto;padding:0 32px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.nb .hero-inner.left{align-items:flex-start;text-align:left}
.nb .eyebrow,.nb .tag,.nb .section-tag{display:inline-flex;align-items:center;gap:8px;font:500 12px/1 var(--nb-font-mono);letter-spacing:var(--nb-tracking-caps);text-transform:uppercase;color:var(--nb-text-3)}
.nb .section-tag svg,.nb .tag svg{width:14px;height:14px}
.nb nb-backdrop{position:absolute;inset:0;z-index:-1}

/* Cards */
.nb .card,.nb .glass{background:var(--nb-surface);border:1px solid var(--nb-border);border-radius:var(--nb-radius-md);padding:22px}
.nb .card-icon,.nb .assess-icon,.nb .step-icon-box{width:36px;height:36px;border-radius:var(--nb-radius-sm);background:var(--nb-surface-2);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.nb .card-icon svg,.nb .assess-icon svg,.nb .step-icon-box svg{width:18px;height:18px;color:var(--nb-accent)}
.nb .cards,.nb .grid2{display:grid;gap:16px}
.nb .cards{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.nb .grid2{grid-template-columns:1fr 1fr}
.nb .section-header{text-align:center;max-width:640px;margin:0 auto 28px}
.nb .section-header p{font:400 14.5px/22px var(--nb-font-sans);color:var(--nb-text-3);margin-top:8px}

/* Stats */
.nb .stat,.nb .stat-item{display:flex;flex-direction:column;gap:4px}
.nb .stat-num,.nb .r-num{font:600 28px/1 var(--nb-font-mono);color:var(--nb-text)}
.nb .stat-label,.nb .stat-lbl,.nb .r-lbl{font:400 12px/16px var(--nb-font-sans);color:var(--nb-text-3)}

/* Forms */
.nb .form-group{display:flex;flex-direction:column;gap:6px;margin-bottom:16px;text-align:left}
.nb label{font:500 12px/16px var(--nb-font-sans);color:var(--nb-text-2);display:block}
.nb input[type="text"],.nb input[type="email"],.nb input[type="tel"],.nb input[type="password"],.nb input[type="number"],.nb select,.nb textarea{width:100%;min-height:42px;padding:10px 12px;background:var(--nb-bg);border:1px solid var(--nb-border-strong);border-radius:var(--nb-radius-sm);color:var(--nb-text);font:400 14px/1.5 var(--nb-font-sans)}
.nb textarea{min-height:120px;resize:vertical}
.nb input::placeholder,.nb textarea::placeholder{color:var(--nb-text-3)}
.nb input:focus-visible,.nb select:focus-visible,.nb textarea:focus-visible{outline:none;border-color:var(--nb-accent);box-shadow:0 0 0 3px var(--nb-accent-soft)}
.nb input[aria-invalid="true"]{border-color:var(--nb-risk);box-shadow:0 0 0 3px var(--nb-risk-soft)}
.nb .field-error{font:400 12.5px/18px var(--nb-font-sans);color:var(--nb-risk);margin-top:4px}

/* Answer capsule + FAQ, same grammar as the content pages. */
.nb .answer-capsule{padding:20px 22px;background:var(--nb-surface);border:1px solid var(--nb-border);border-radius:var(--nb-radius-md);margin-bottom:24px}
.nb .answer-capsule h2{font:600 15px/1 var(--nb-font-sans);letter-spacing:0;margin-bottom:8px}
.nb .answer-capsule p{font:400 15px/24px var(--nb-font-sans);color:var(--nb-text-2)}
.nb .faq-list{border-top:1px solid var(--nb-border)}
.nb .faq-item{border-bottom:1px solid var(--nb-border)}
.nb .faq-item summary{list-style:none;cursor:pointer;padding:15px 0;display:flex;justify-content:space-between;align-items:center;gap:16px;font:500 15px/22px var(--nb-font-sans);color:var(--nb-text)}
.nb .faq-item summary::-webkit-details-marker{display:none}
.nb .faq-item summary::after{content:'+';font:400 18px/1 var(--nb-font-mono);color:var(--nb-text-3);flex:none}
.nb .faq-item[open] summary::after{content:'\2212'}
.nb .faq-answer{padding-bottom:15px;font:400 14px/22px var(--nb-font-sans);color:var(--nb-text-2)}

/* Tables */
.nb .tbl-wrap{border:1px solid var(--nb-border);border-radius:var(--nb-radius-md);overflow-x:auto}
.nb .tbl-wrap table{width:100%;border-collapse:collapse;font:400 13.5px/1 var(--nb-font-sans)}
.nb .tbl-wrap th{height:38px;padding:0 16px;text-align:left;font:500 11px/1 var(--nb-font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--nb-text-3);background:var(--nb-surface);border-bottom:1px solid var(--nb-border);white-space:nowrap}
.nb .tbl-wrap td{height:42px;padding:0 16px;color:var(--nb-text-2);border-bottom:1px solid var(--nb-rule)}
.nb .tbl-wrap tr:last-child td{border-bottom:0}

/* Closing CTA */
.nb .cta-section{padding:56px 0}
.nb .cta-box{max-width:720px;margin:0 auto;padding:36px 32px;border:1px solid var(--nb-border);border-radius:var(--nb-radius-lg);background:var(--nb-surface);text-align:center}
.nb .cta-box h2{margin-bottom:10px}
.nb .cta-box p{font:400 14.5px/22px var(--nb-font-sans);max-width:52ch;margin:0 auto 20px}
.nb .cta-actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

.nb code,.nb .mono{font-family:var(--nb-font-mono)}
.nb ::-webkit-scrollbar{width:8px;height:8px}
.nb ::-webkit-scrollbar-track{background:var(--nb-bg)}
.nb ::-webkit-scrollbar-thumb{background:var(--nb-border-strong);border-radius:4px}

@media (max-width:1099px){
  .nb .container,.nb .nav-inner{padding:0 24px}
  .nb .grid2{grid-template-columns:1fr}
}
@media (max-width:699px){
  .nb .container,.nb .nav-inner,.nb .hero-inner{padding:0 20px}
  .nb .nav-links{gap:14px;font-size:13px}
  .nb .nav-links a.hide-mob{display:none}
  .nb section{padding:48px 0}
  .nb .cards{grid-template-columns:1fr}
}
