/* Canonical Chat Workforce public surface: shared header, footer, shell, CTA.
   Rendered with _cw_public_nav.html and _cw_public_footer.html on every public
   chat-workforce route. Palette falls back here but each page may re-declare it
   inline. No em or en dashes anywhere in this file. */
:root{
  --cw-slate:#1A1A2E;--cw-slate-deep:#12121F;--cw-indigo:#6366F1;--cw-indigo-soft:#818CF8;
  --cw-white:#ffffff;--cw-line:rgba(255,255,255,0.10);--cw-muted:rgba(255,255,255,0.72);
  /* --cw-faint was rgba(...,0.42) (4.0:1 on the slate footer, below AA). Raised to
     0.72 so footer/eyebrow labels clear 4.5:1. See dark-surface contrast fix. */
  --cw-faint:rgba(255,255,255,0.72);
  --cw-font-display:'Syne',system-ui,sans-serif;--cw-font-body:'DM Sans',system-ui,sans-serif;
  --cw-font-mono:'JetBrains Mono',monospace;
}
.cw-public *{box-sizing:border-box}
/* Zero horizontal scrollbar at every viewport, even against a sub-pixel child. */
html:has(body.cw-dark),html:has(.cw-public){overflow-x:clip}
body.cw-dark,body:has(.cw-public){overflow-x:clip}

/* Header. Fixed height, padding, and logo size on every route (identical parity). */
.nav{background:var(--slate,var(--cw-slate));border-bottom:1px solid rgba(255,255,255,0.06);position:relative;z-index:30}
.nav-inner{width:min(100% - 48px,1200px);margin:0 auto;height:64px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.nav-brand{display:flex;align-items:center;gap:10px;text-decoration:none;height:44px;flex:0 0 auto}
.nav-mark{width:30px;height:30px;background:var(--indigo,var(--cw-indigo));border-radius:6px;display:flex;align-items:center;justify-content:center;font-family:var(--font-display,var(--cw-font-display));font-weight:800;font-size:11px;color:#fff}
.nav-wordmark{display:flex;flex-direction:column;font-family:var(--font-display,var(--cw-font-display));font-weight:800;font-size:14px;letter-spacing:.05em;text-transform:uppercase;color:#fff;white-space:nowrap;line-height:1.1}
.nav-wordmark-sub{font-family:var(--font-mono,var(--cw-font-mono));font-weight:500;font-size:8px;letter-spacing:.16em;color:var(--indigo-soft,var(--cw-indigo-soft))}
.nav-right{display:flex;align-items:center;gap:12px}
.nav-link{font-family:var(--font-mono,var(--cw-font-mono));font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,0.62);text-decoration:none;display:inline-flex;align-items:center;min-height:44px;white-space:nowrap;padding:0 2px}
.nav-link:hover,.nav-link.is-active{color:#fff}
.nav-link:focus-visible,.nav-cta:focus-visible,.nav-burger:focus-visible{outline:3px solid var(--indigo-soft,var(--cw-indigo-soft));outline-offset:3px}
.nav-cta{display:inline-flex;align-items:center;justify-content:center;background:var(--indigo,var(--cw-indigo));color:#fff;font-family:var(--font-display,var(--cw-font-display));font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;border:none;border-radius:5px;min-height:44px;padding:0 16px;text-decoration:none;white-space:nowrap;flex:0 0 auto}
.nav-cta:hover{background:var(--indigo-soft,var(--cw-indigo-soft))}
.nav-burger{display:none;width:44px;height:44px;border:1px solid var(--cw-line);border-radius:8px;background:transparent;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;flex:0 0 auto;padding:0}
.nav-burger span{display:block;width:20px;height:2px;background:#fff;transition:transform .15s ease,opacity .15s ease}
.nav.is-open .nav-burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.is-open .nav-burger span:nth-child(2){opacity:0}
.nav.is-open .nav-burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Canonical CTA (buttons in page bodies): horizontal rectangle. */
.cw-cta{display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:190px;min-height:48px;padding:0 24px;border-radius:6px;background:var(--indigo,var(--cw-indigo));color:#fff;font-family:var(--font-display,var(--cw-font-display));font-weight:700;font-size:13px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;flex:0 0 auto;align-self:center;text-decoration:none;border:0;cursor:pointer;line-height:1}
.cw-cta:hover{background:var(--indigo-soft,var(--cw-indigo-soft))}
/* site_brand.css CTA used on some panels: hold the 48px minimum height. */
.cw-public .cw-site-cta{min-height:48px;min-width:190px}
/* AA action indigo. White text on the marketing swatch #6366F1 measures 4.47:1,
   just under the 4.5 normal-text floor. #5C5FEF is a near-identical, slightly
   deeper indigo that clears 4.5:1 white-on-fill AND indigo-on-white. Applied to
   the filled CTAs/logo tile here (per-page --indigo tokens otherwise keep the
   lighter swatch); page-level buttons and small indigo-on-white labels take the
   same value at their own definitions. */
.nav-cta,.cw-cta,.cw-site-cta,.nav-mark{background:#5C5FEF}

/* Shared shell */
.cw-shell{width:min(100% - 48px,1200px);margin:0 auto;padding:72px 0}
.cw-shell p{max-width:68ch}

/* B2: inset the hero into the shared centered container so headings are never
   glued to the viewport edge on the site_brand.css pages. */
.cw-public .cw-hero{width:min(100% - 48px,1180px);margin-left:auto;margin-right:auto;padding-left:0;padding-right:0}

/* B1: force readable heading/body contrast on the dark chat shell. The dark
   pages carry body class `cw-dark`; the light chat_about story surface does not,
   so it is never repainted. These selectors (html body.cw-dark ...) beat
   themes.css `body.public-site h1{color:var(--color-text)}` on both specificity
   and load order, and the forced background stops themes flipping the shell
   light in light mode (the review-reported near-invisible heading defect). */
html body.cw-dark{background:#1A1A2E}
html body.cw-dark h1,
html body.cw-dark h2,
html body.cw-dark h3,
html body.cw-dark h4,
html body.cw-dark summary,
html body.cw-dark strong,
html body.cw-dark .hero-title{color:#fff}
html body.cw-dark h1 em,
html body.cw-dark .hero-title em{color:var(--indigo-soft,var(--cw-indigo-soft))}
/* The .hero-title heading appears only on dark heroes (chat_about story hero and
   pricing). chat_about is a mixed light page, so it is not marked cw-dark; force
   its dark hero heading white here (its light story headings stay dark). */
html body .hero-title{color:#fff}
html body .hero-title em{color:var(--indigo-soft,var(--cw-indigo-soft))}
html body .hero-body{color:rgba(255,255,255,0.74)}
html body.cw-dark p,
html body.cw-dark li,
html body.cw-dark label,
html body.cw-dark .cw-lede,
html body.cw-dark .cw-section-copy,
html body.cw-dark .cw-bio,
html body.cw-dark .security-lede,
html body.cw-dark .path-desc,
html body.cw-dark .hero-sub,
html body.cw-dark .beta-proof div,
html body.cw-dark .field-help{color:rgba(255,255,255,0.74)}

/* Dark-surface theme lock. The public pages ship a `theme-toggle` that stamps
   html[data-theme]. themes.css then repaints `body.public-site` to a WHITE
   background under html[data-theme="light"], while these pages keep their
   authored light-on-dark text, producing white-on-white. Pin every dark public
   surface (body.cw-dark) to the slate background in BOTH themes. These selectors
   carry html[data-theme=...] so they match themes.css specificity (0,2,2) and
   win on load order (cw_public.css loads after themes.css); the bare fallback
   covers pages that never stamp data-theme. */
html[data-theme="light"] body.cw-dark,
html[data-theme="dark"] body.cw-dark,
html body.cw-dark{background:#1A1A2E;color-scheme:dark}

/* Light-surface theme lock (homepage). chat_homepage.html is a standalone
   template (not base.html): it authors a light page with dark ink, white cards,
   and dark accent bands, but never stamps data-theme, so tokens.css :root dark
   defaults (loaded after its inline palette) paint its body near-black while the
   section ink stays dark = dark-on-dark. Pin the light surface and restore the
   brand indigo that tokens.css remaps to its lighter dark-theme accent, so the
   `<em>` emphasis keeps enough contrast on the light background. */
html:has(body.cw-light){background:#F7F7FD}
html body.cw-light{background:#F7F7FD;color:#111827;color-scheme:light;--indigo:#5C5FEF}

/* The footer is the shared dark slate surface on EVERY public page, including
   the light story pages (chat_about) where themes.css `body.public-site p`
   would otherwise darken its ink to the light-mode secondary color. Pin the
   footer text to light values; the two-class container selectors outrank
   themes.css regardless of load order. */
.footer .footer-brand-name{color:#fff}
.footer .footer-brand-line,
.footer .footer-col a{color:rgba(255,255,255,0.74)}
.footer .footer-col-label{color:var(--cw-faint)}
.footer .footer-col a:hover{color:#fff}

/* Footer, four columns */
.footer{background:var(--slate,var(--cw-slate));border-top:1px solid rgba(255,255,255,0.06);color:var(--cw-muted)}
.footer-inner{width:min(100% - 48px,1200px);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.6fr) repeat(3,minmax(0,1fr));gap:32px;padding:56px 0}
.footer-brand-name{font-family:var(--font-display,var(--cw-font-display));font-weight:800;font-size:18px;text-transform:uppercase;color:#fff}
.footer-brand-line{margin:12px 0 0;max-width:40ch;font-size:14px;line-height:1.6;color:var(--cw-muted)}
.footer-col{display:flex;flex-direction:column;gap:10px}
.footer-col-label{font-family:var(--font-mono,var(--cw-font-mono));font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--cw-faint)}
.footer-col a{color:var(--cw-muted);text-decoration:none;font-size:14px;min-height:32px;display:inline-flex;align-items:center}
.footer-col a:hover{color:#fff}
.footer-col a:focus-visible{outline:3px solid var(--indigo-soft,var(--cw-indigo-soft));outline-offset:3px}

/* B6: collapse the nav into the burger menu at 1120px, before the nine-item row
   collides (measured collision band 861-1090px). */
@media(max-width:1120px){
  .nav-burger{display:inline-flex}
  .nav-right{display:none;position:absolute;top:64px;left:0;right:0;flex-direction:column;align-items:stretch;gap:2px;background:var(--slate,var(--cw-slate));border-bottom:1px solid var(--cw-line);padding:8px 24px 16px;z-index:30}
  .nav.is-open .nav-right{display:flex}
  .nav-link{min-height:48px;font-size:13px;padding:0}
  .nav-cta{width:100%;min-height:48px;margin-top:4px}
}
@media(max-width:860px){
  .footer-inner{grid-template-columns:1fr;gap:28px;padding:40px 0}
  .footer-brand-line{max-width:none}
  .cw-shell{padding:48px 0}
}