/* CFOLogic theme — the same dial settings as navigator.cfologic.com.
 *
 * Loaded after the design system and each page's own <style>, so it has the
 * last word on tokens and shared classes. The design is unchanged; what this
 * file changes is the volume, measured off Navigator: heading weight 500,
 * emphasised words in #858585 instead of a gradient fill, pure greys, cards
 * as thin-bordered 20px panels with no shadow, pill buttons at 500. Inline
 * styles the pages carry (kickers, heading sizes, blur, shadows) are quietened
 * at build time in scripts/restyle.py, which a stylesheet cannot reach.
 *
 * Navigator does keep the brand gradient in two places — the primary button and
 * one highlighted card — so the gradient tokens stay as designed. It never
 * uses gradient text, so .grad-text is the one class turned off.
 */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600&display=swap');

:root {
  --font-heading-weight: 500;

  /* Navigator's greys, measured: #161616 text, #4d4d4d body, #666 secondary,
     #e6e6e6 borders. The design shipped warm neutrals (#7d7979). */
  --color-text: #161616;
  --color-neutral-100: #f7f7f7;
  --color-neutral-200: #e6e6e6;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #b5b5b5;
  --color-neutral-500: #999999;
  --color-neutral-600: #666666;
  --color-neutral-700: #4d4d4d;
  --color-neutral-800: #333333;
  --color-neutral-900: #1a1a1a;
  --color-divider: #e6e6e6;

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 20px;

  --shadow-sm: 0 1px 2px rgba(20, 20, 20, 0.05);
  --shadow-md: 0 1px 2px rgba(20, 20, 20, 0.04), 0 6px 20px rgba(20, 20, 20, 0.05);
  --shadow-lg: 0 2px 4px rgba(20, 20, 20, 0.04), 0 12px 32px rgba(20, 20, 20, 0.07);
}

body { color: var(--color-text); }
/* Headings inherit — the dark bands set white on the section and must keep it. */

/* Emphasised words in headings: Navigator sets its second line in #858585. */
.grad-text {
  background-image: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: #858585;
}
/* …but when the whole heading carries the class it is the title itself. */
h1.grad-text, h2.grad-text, h3.grad-text, h4.grad-text { color: inherit; }

/* ---- buttons: pill, weight 500; primary keeps the brand gradient ---------- */
.btn {
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0;
  border-radius: 999px;
  padding: 10px 18px;
  transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease, filter 0.18s ease;
}
.btn-primary:hover { filter: brightness(0.94); }
.btn-ghost {
  border-color: currentColor;
  background: transparent;
  padding-inline: 18px;
}
.btn-ghost:hover { background: rgba(127, 127, 127, 0.08); }

/* ---- cards: Navigator's panel, measured ---------------------------------- */
.glass {
  background: rgba(255, 255, 255, 0.78);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid var(--color-neutral-200);
  border-radius: 20px;
  box-shadow: none;
}

/* The tile grids ("The gap", "Who it's for", …). The design hid each tile's
   description until hover; Navigator shows the caption and lets the headline
   breathe. !important because the tiles carry their padding and type size
   inline. */
.fit-tile {
  padding: 30px 30px 28px !important;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 28px;
  transition: border-color 0.2s ease;
}
.fit-tile h3, .fit-tile h4 {
  font-size: 22.5px !important;
  line-height: 1.22 !important;
  font-weight: 500 !important;
  letter-spacing: -0.015em;
  margin: 0 !important;
}
.fit-tile .fit-body { grid-template-rows: 1fr !important; }
.fit-tile .fit-body > p {
  padding-top: 0 !important;
  font-size: 14.5px !important;
  line-height: 24px !important;
  color: var(--color-neutral-700) !important;
}
.fit-tile:hover { border-color: var(--color-neutral-400); box-shadow: none; }

/* Other card headlines at the design's 19px: Navigator's 22.5 / 500. */
.glass > h3[style*="font-size: 19px"] { font-size: 22.5px !important; line-height: 1.22 !important; }

/* ---- product screenshots on Navigator's soft-blue panel ------------------- */
figure:has(> img[src*="dashboard-hero"]) {
  background:
    radial-gradient(120% 90% at 15% 100%, var(--color-accent-700) 0%, rgba(0, 71, 171, 0) 55%),
    radial-gradient(90% 70% at 85% 10%, #9cc4ff 0%, rgba(156, 196, 255, 0) 60%),
    linear-gradient(160deg, #e8f0ff, #bcd4ff) !important;
  border: 0 !important;
  border-radius: 20px !important;
  box-shadow: none !important;
  padding: clamp(18px, 2.4vw, 31px) !important;
}
figure:has(> img[src*="dashboard-hero"]) > img {
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 43, 102, 0.22);
}

/* ---- footer (src/partials/footer.html) ------------------------------------ */
.site-footer { border-top: 1px solid var(--color-neutral-200); background: #fff; overflow: hidden; }
.sf-wrap { max-width: 1200px; margin: 0 auto; padding: 72px clamp(20px, 5vw, 72px) 0; }
.sf-grid { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 40px 32px; }
.sf-brand img { height: 40px; }
.sf-tagline { font-size: 15.5px; line-height: 25px; color: var(--color-neutral-800); margin: 22px 0 26px; max-width: 34ch; }
.sf-addr { font-style: normal; font-size: 14.5px; line-height: 23px; color: var(--color-neutral-700); margin: 0 0 16px; max-width: 34ch; }
.sf-addr strong { display: block; color: var(--color-text); font-weight: 600; }
.sf-social { display: flex; gap: 10px; margin-top: 26px; }
.sf-social a {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--color-neutral-200);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--color-text); background: #fff;
  transition: border-color 0.18s ease;
}
.sf-social a:hover { border-color: var(--color-neutral-500); }
.sf-col h4 { font-family: var(--font-heading); font-size: 15.5px; font-weight: 600; color: var(--color-text); margin: 4px 0 22px; }
.sf-col a { display: block; font-size: 15.5px; line-height: 1.35; color: var(--color-neutral-700); text-decoration: none; margin: 0 0 17px; }
.sf-col a:hover { color: var(--color-text); }
.sf-subscribe form { display: flex; flex-direction: column; gap: 8px; }
.sf-subscribe input[type="email"] {
  width: 100%; box-sizing: border-box; font-family: inherit; font-size: 14px;
  padding: 10px 14px; border: 1px solid var(--color-neutral-300); border-radius: 999px;
  background: #fff; color: var(--color-text);
}
.sf-subscribe .btn { width: 100%; }
.sf-note { font-size: 13px; color: var(--color-neutral-600); margin: 10px 0 0; }
.sf-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  border-top: 1px solid var(--color-neutral-200);
  margin-top: 64px; padding: 24px 0 0;
  font-size: 14.5px; color: var(--color-neutral-600);
}
.sf-bottom nav a { color: var(--color-neutral-600); text-decoration: none; margin-left: 28px; }
.sf-bottom nav a:hover { color: var(--color-text); }
.sf-wrap { padding-bottom: 32px; }
@media (max-width: 980px) { .sf-grid { grid-template-columns: 1fr 1fr; } .sf-brand { grid-column: 1 / -1; } }
@media (max-width: 560px) { .sf-grid { grid-template-columns: 1fr; } }