/* ==========================================================================
   Callix design tokens — from Figma `Brand` / "New website" (878:4931)
   --------------------------------------------------------------------------
   Values come from the file's variables and its per-section design context.
   Where the two disagreed,
   the FRAMES win (designer's call, 2026-09-15): page ground is #fafaf9,
   inverse ink is #fafaf9.
   The standing sizing (container 1360, 40px gutter → 1280 column, and the
   breakpoints in mobile.css) is the frame; Figma content sits inside it.
   ========================================================================== */

/* ---- fonts (all SIL OFL, self-hosted) ------------------------------------ */
@font-face {
  font-family: "Geist Mono";
  src: url(/fonts/GeistMono-Regular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Inter Display";
  src: url(/fonts/InterDisplay-Regular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* These two used to be declared by a framework stylesheet this build no longer loads. Without them Inter
   fell back to a system face and the grid's heading wrapped to three lines instead of two. Both are
   open-licence families and the files were already in /fonts; src, weight range and style are unchanged. */
@font-face {
  font-family: "Inter Variable";
  src: url(/fonts/Inter-Variable.woff2) format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "STIX Two Math";
  src: url(/fonts/STIXTwoMath-Regular.woff2) format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* grounds */
  --cx-page:        #fafaf9;   /* Backgrounds/Page/Default (frame value) */
  --cx-surface:     #ffffff;   /* Backgrounds/Surface|Card/Default */
  --cx-surface-2:   #f7f6f5;   /* integrations ground */
  --cx-subtle:      #f5f5f5;   /* Backgrounds/Accent/Neutral/Subtle/default */
  --cx-dark:        #262626;   /* dark-section ground (== Text/Primary) */

  /* ink */
  --cx-ink:         #262626;   /* Text/Primary */
  --cx-ink-2:       #737373;   /* Text/Secondary, neutral/600 */
  --cx-ink-3:       #a1a1a1;   /* Text/Tertiary */
  --cx-ink-muted:   rgba(38, 38, 38, 0.5);      /* section-title line 2 */
  --cx-inverse:     #fafaf9;   /* Text/Inverse (frame value) */
  --cx-inverse-muted: rgba(250, 250, 249, 0.5);

  /* hairlines */
  --cx-line:        rgba(38, 38, 38, 0.08);
  --cx-line-strong: rgba(38, 38, 38, 0.11);
  --cx-line-dark:   rgba(255, 255, 255, 0.10);
  --cx-line-dark-2: rgba(255, 255, 255, 0.08);
  --cx-border:      rgba(7, 13, 8, 0.07);       /* Border/Default (product UI) */
  --cx-border-input:rgba(7, 13, 8, 0.12);       /* Border/Inputs */

  /* actions */
  --cx-btn:         #262626;
  --cx-btn-ink:     #fafaf9;
  --cx-btn-2:       #dcdcdb;   /* "Log in" */
  --cx-btn-ui:      #0a0a0a;   /* Actions/Buttons/Primary/Default (product UI) */
  --cx-btn-ui-tert: rgba(255, 255, 255, 0.98);

  /* radii */
  --cx-r-sm: 4px; --cx-r-md: 6px; --cx-r-lg: 8px; --cx-r-xl: 24px; --cx-r-2xl: 32px; --cx-r-full: 999px;

  /* spacing scale (Figma 0 1 2 3 3_5 6 8 32) */
  --cx-s-1: 4px; --cx-s-2: 8px; --cx-s-3: 12px; --cx-s-3_5: 14px; --cx-s-6: 24px; --cx-s-8: 32px; --cx-s-32: 128px;

  /* type */
  --cx-sans:    "Inter Variable", "Inter", sans-serif;
  --cx-display: "Inter Display", "Inter Variable", "Inter", sans-serif;
  --cx-serif:   "STIX Two Math", serif;
  --cx-mono:    "Geist Mono", ui-monospace, monospace;
}

/* ---- type roles ---------------------------------------------------------
   The scale, desktop / mobile (set 2026-09-18). Mobile sizes are applied in
   site/callix/mobile.css at <=767.

     H1  title, serif      80 / 52     .cx-h1
         section serif     60 / 44     .cx-h2-display
     H2  section header    35 / 20     .cx-title
     P1  subtitle          20 / 16     .cx-hero__lead and the other page leads
     H3  body header       20 / 18     the feature cells' h3, .cx-legal__h2
     P2  body text         16 / 14     .cx-body, .cx-body-16, .cx-q, .cx-quote
         large numbers     96 / 64     .cx-stat

   Outside it on purpose: buttons and nav (.cx-ui, 14/500), the mono eyebrows,
   the mock product UI inside the hero card, and the text drawn into the
   gradient artwork. None of those are content type. */

.cx-h1 {                        /* hero — STIX 80/1.0, −1.2px, cap-trimmed */
  font-family: var(--cx-serif); font-weight: 400;
  font-size: 80px; line-height: 1; letter-spacing: -1.2px;
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
}
.cx-h2-display {                /* FAQ / closing CTA — STIX 60 */
  font-family: var(--cx-serif); font-weight: 400;
  font-size: 60px; line-height: 1; letter-spacing: -0.9px;
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
}
.cx-title {                     /* section title — Inter 35/40, two-tone */
  font-family: var(--cx-sans); font-weight: 400;
  font-size: 35px; line-height: 40px; letter-spacing: -0.77px; color: var(--cx-ink);
}
.cx-title > .muted { color: var(--cx-ink-muted); }
.cx-title.on-dark { color: var(--cx-inverse); }
.cx-title.on-dark > .muted { color: var(--cx-inverse-muted); }
.cx-stat {                      /* Inter Display 96 */
  font-family: var(--cx-display); font-weight: 400; font-variant-numeric: tabular-nums;   /* steady while counting */
  font-size: 96px; line-height: 1; letter-spacing: -1.44px;
  text-box-trim: trim-both; text-box-edge: cap alphabetic;
}
.cx-lead   { font-family: var(--cx-sans); font-weight: 400; font-size: 20px; line-height: 32px; letter-spacing: -0.18px; }
.cx-quote  { font-family: var(--cx-sans); font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: -0.77px; }
.cx-q      { font-family: var(--cx-sans); font-weight: 500; font-size: 16px; line-height: 24px; letter-spacing: -0.18px; }
.cx-ui     { font-family: var(--cx-sans); font-weight: 500; font-size: 14px; line-height: 24px; letter-spacing: -0.18px; }
.cx-body   { font-family: var(--cx-sans); font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: -0.09px; }
.cx-body-16{ font-family: var(--cx-sans); font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: -0.18px; }
.cx-eyebrow{ font-family: var(--cx-mono); font-weight: 400; font-size: 14px; line-height: 21px; letter-spacing: -0.18px; text-transform: uppercase; }
/* product-UI text styles (Figma named styles) */
.cx-body-regular     { font-family: var(--cx-sans); font-weight: 400; font-size: 14px; line-height: 24px; letter-spacing: 0; }
.cx-body-small-medium{ font-family: var(--cx-sans); font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: 0; }
.cx-dim {
  /* 0.6 was Figma's, and it failed WCAG AA on both light grounds: #262626 at 0.6
     composites to #7b7b7a on --cx-page (4.06:1) and #7a7979 on --cx-surface-2
     (4.02:1), against the 4.5:1 normal-text minimum. 0.66 takes those to 4.88
     and 4.80 and is imperceptible next to 0.6. The dark footer only gains by it:
     #fafaf9 over #262626 goes 6.14 -> 7.13. (2026-09-21) */
  opacity: 0.66;
}

/* ---- buttons -------------------------------------------------------------- */
.cx-btn {
  display: inline-flex; align-items: center; justify-content: center;
  height: 48px; padding: 8px 48px; border-radius: var(--cx-r-lg);
  background: var(--cx-btn); color: var(--cx-btn-ink);
  font-family: var(--cx-sans); font-weight: 500; font-size: 14px; line-height: 24px; letter-spacing: -0.18px;
  white-space: nowrap; text-decoration: none; border: 0; cursor: pointer;
}
.cx-btn.sm      { height: 32px; padding: 8px 24px; }
.cx-btn.on-dark { background: var(--cx-inverse); color: var(--cx-ink); }
.cx-btn.secondary { background: var(--cx-btn-2); color: var(--cx-ink); }
.cx-btn.nav     { background: transparent; color: var(--cx-ink); height: 32px; padding: 8px 16px; gap: 8px; }

/* ---- hairline grid primitive --------------------------------------------- */
.cx-grid       { border: 1px solid var(--cx-line); }
.cx-grid.strong{ border-color: var(--cx-line-strong); }
.cx-grid.dark  { border-color: var(--cx-line-dark); }
.cx-cell       { min-width: 0; }
.cx-cell.r     { border-right: 1px solid var(--cx-line); }
.cx-cell.b     { border-bottom: 1px solid var(--cx-line); }
.cx-grid.strong .cx-cell.r { border-right-color: var(--cx-line-strong); }
.cx-grid.strong .cx-cell.b { border-bottom-color: var(--cx-line-strong); }
.cx-grid.dark .cx-cell.r   { border-right-color: var(--cx-line-dark); }
.cx-grid.dark .cx-cell.b   { border-bottom-color: var(--cx-line-dark); }

/* ---- wrapping (request 2026-09-15): no widows / orphans anywhere text wraps -------------------- */
.cx-h1, .cx-h2-display, .cx-title, .cx-lead, .cx-quote, .cx-q, .cx-body, .cx-body-16, .cx-body-regular,
.cx-eyebrow, .cx-stat,
section[data-cx="grid"] h2, section[data-cx="grid"] h3, section[data-cx="grid"] p, section[data-cx="grid"] a,
.cx-faq__a p, .cx-how__bullet span, .cx-footer a { text-wrap: pretty; }
.cx-art__script { text-wrap: wrap; }   /* the script mask keeps plain wrapping */