/* Callabra secondary pages (/answers, /industries, /industries/<slug>) — shared chrome copied verbatim from index.html (buttons, nav, header, footer). Page-specific rules live in answers.css / industries.css. */
html, body { margin: 0; }
body { background: var(--paper); font-family: var(--font-body); color: var(--ink); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
::selection { background: var(--orange); color: #fff; }
.cl-btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-body); font-weight: var(--fw-semibold);
  line-height: 1; letter-spacing: var(--track-tight);
  border-radius: var(--radius-pill); cursor: pointer; text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard),
              transform var(--dur-fast);
}
.cl-btn:active { transform: translateY(0.5px); }
.cl-btn--full { width: 100%; }
.cl-btn--sm { font-size: 14px; padding: 8px 14px; gap: 6px; }
.cl-btn--md { font-size: 15px; padding: 11px 20px; gap: 8px; }
.cl-btn--lg { font-size: 17px; padding: 15px 28px; gap: 10px; }
.cl-btn--primary { background: var(--accent); color: var(--text-on-accent); border: 1px solid transparent; box-shadow: var(--shadow-accent); }
.cl-btn--primary:hover { background: var(--accent-press); }
.cl-btn--secondary { background: var(--white); color: var(--text-strong); border: 1px solid var(--border-strong); box-shadow: var(--shadow-xs); }
.cl-btn--secondary:hover { background: var(--bg-sunken); }
.cl-btn--inverse { background: var(--paper); color: var(--ink); border: 1px solid transparent; box-shadow: none; }
.cl-btn--ghostline { background: transparent; color: var(--paper); border: 1px solid rgba(247,245,240,0.34); box-shadow: none; }
.cl-btn--ghostline:hover { background: rgba(247,245,240,0.12); }

.cl-navlink { text-decoration: none; color: rgba(247,245,240,0.82); font-size: 14.5px; font-weight: 500; white-space: nowrap; }
.cl-navlink:hover { color: var(--paper); }
@media (max-width: 800px) {
  .cl-navlinks { display: none !important; }
  /* The section links collapse into the menu button; Book a Demo stays in the bar. */
  .cl-nav { gap: 12px !important; }
}
@media (max-width: 560px) {
  .cl-header-bar { padding: 15px 16px !important; }
  .cl-brandword { font-size: 19px !important; }
  .cl-navlogin { font-size: 13.5px; }
  .cl-navbuild { font-size: 13px; padding: 8px 13px; }
}
/* ── Sticky header + mobile menu ──
   Same palette as the transparent hero bar: it only gains the ink background
   once the page scrolls, so paper-coloured brand/links stay legible. */
.cl-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard); }
.cl-header.is-solid { background: var(--ink); border-bottom-color: rgba(247,245,240,0.10); }
.cl-burger { display: none; align-items: center; justify-content: center; flex-shrink: 0;
  width: 38px; height: 38px; padding: 0; cursor: pointer; color: var(--paper);
  background: transparent; border: 1px solid rgba(247,245,240,0.34); border-radius: var(--radius-pill);
  transition: background var(--dur-fast) var(--ease-standard); }
.cl-burger:hover { background: rgba(247,245,240,0.12); }
.cl-burger svg { display: block; width: 18px; height: 18px; }
.cl-burger .cl-x { display: none; }
.cl-burger[aria-expanded="true"] .cl-x { display: block; }
.cl-burger[aria-expanded="true"] .cl-bars { display: none; }
.cl-menu { display: none; background: var(--ink); border-top: 1px solid rgba(247,245,240,0.10); }
.cl-menu.open { display: block; }
.cl-menu a { display: block; padding: 15px 22px; text-decoration: none; color: rgba(247,245,240,0.86);
  font: 500 16px/1 var(--font-body); border-bottom: 1px solid rgba(247,245,240,0.08); }
.cl-menu a:last-child { border-bottom: 0; }
.cl-menu a:hover, .cl-menu a:active { color: var(--paper); background: rgba(247,245,240,0.06); }
@media (min-width: 801px) { .cl-menu { display: none !important; } }
@media (max-width: 800px) {
  .cl-burger { display: inline-flex; }
  .cl-navlogin { display: none !important; }
}
.ft-h { font: 600 11px/1 var(--font-body); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--steel-2); margin-bottom: 14px; }
.ft-cols { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: clamp(28px,3.4vw,44px); padding-bottom: clamp(32px,4vw,48px); }
.ft-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.ft-list a { display: flex; align-items: center; min-height: 40px; color: var(--paper);
  text-decoration: none; font: 500 14.5px/1.4 var(--font-body); opacity: 0.82; }
.ft-list a:hover { opacity: 1; color: var(--orange); }
@media (max-width: 900px) { .ft-cols { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) {
  /* One long stacked list reads badly on a phone. Brand spans the width, the two
     remaining groups sit side by side, and Product is dropped — it is the same five
     links the hamburger menu already carries, so it is pure duplication here. */
  .ft-cols { grid-template-columns: 1fr 1fr; gap: 26px 20px; padding-bottom: 30px; }
  .ft-cols > :first-child { grid-column: 1 / -1; }
  .ft-col-product { display: none; }
  .ft-h { margin-bottom: 8px; }
  .ft-list a { min-height: 36px; font-size: 14px; }
}

.cl-header.is-solid { position: sticky; }            /* secondary pages: solid ink bar at every scroll position */
/* Footer grows a 5th column when the generator injects the Industries group (see build_industries.py). */
.ft-cols:has(.ft-col-industries) { grid-template-columns: 1.6fr repeat(4, 1fr); }
@media (max-width: 900px) { .ft-cols:has(.ft-col-industries) { grid-template-columns: 1fr 1fr; } }