/* ==========================================================================
   Site-wide brand + type skin
   Satoshi (Fontshare) + Rebase-inspired cool teal tones. Aqua accent #09F1C7.
   ========================================================================== */

body {
  /* Rebase-inspired tones + Closed Won aqua accent */
  --paper: #f1f7f9;
  --paper-2: #e4eef2;
  --card: #ffffff;
  --ink: #082930;
  --ink-soft: #303e4a;
  --ink-faint: #758696;
  --go: #09f1c7;
  --go-2: #3af5d3;
  --go-wash: #dffaf3;
  --go-ink: #0a6b5c; /* aqua ink for text on light surfaces */
  --signal: #09f1c7;
  --slate: #303e4a;
  --mist: #bdd9e1;
  --line: rgba(8, 41, 48, 0.14);
  --line-soft: rgba(8, 41, 48, 0.08);
  --radius: 8px;
  --radius-sm: 6px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);

  --f-display: "Satoshi", system-ui, sans-serif;
  --f-body: "Satoshi", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  font-family: var(--f-body);
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

body h1,
body h2,
body h3 {
  font-family: var(--f-display);
  letter-spacing: -0.035em;
  font-weight: 600;
}

/* ---- Larger display type (same family/weight feel as section titles) ---- */
body .hero-title {
  font-family: var(--f-display);
  font-weight: 500;
  font-size: clamp(42px, 6.6vw, 78px);
  letter-spacing: -0.04em;
  line-height: 0.98;
  max-width: 12ch;
}

/* ---- Wordmark: pipeline rail logo ---- */
body .brand {
  gap: 0;
  line-height: 0;
}
body .brand-logo,
body .footer-logo {
  height: 34px;
  width: auto;
  display: block;
}
body .brand.small .brand-logo,
body .footer-logo {
  height: 26px;
}
body .site-footer .brand { text-decoration: none; }

/* ---- Header / nav ---- */
body .site-header {
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  border-bottom: 1px solid var(--line-soft);
  backdrop-filter: blur(12px);
}
body .header-inner { height: 72px; }
body .nav-link {
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--ink-soft);
}
body .nav-link:hover { color: var(--ink); }
body .header-nav { gap: 28px; }
body .header-nav .btn {
  font-size: 16px;
  letter-spacing: -0.015em;
}
@media (max-width: 640px) {
  body .header-nav .nav-link,
  body .header-nav .btn { font-size: 17px; }
}

/* ---- Buttons ---- */
body .btn {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.015em;
  border-radius: var(--radius-sm);
  border-width: 1px;
  transition:
    transform 180ms var(--ease),
    background 180ms var(--ease),
    border-color 180ms var(--ease),
    color 180ms var(--ease);
}
body .btn:hover { transform: translateY(-1px); }
body .btn:active { transform: translateY(0); }
body .btn-primary {
  background: var(--go);
  color: var(--ink);
  border-color: var(--go);
  box-shadow: none;
}
body .btn-primary:hover {
  background: var(--go-2);
  color: var(--ink);
  box-shadow: none;
}
body .btn-ghost {
  border-color: var(--line);
  color: var(--ink);
  background: transparent;
}
body .btn-ghost:hover {
  background: var(--paper-2);
  border-color: var(--ink);
}
body .btn-lg { padding: 15px 26px; font-size: 16px; }
body .btn-sm { padding: 9px 16px; font-size: 13.5px; }

/* HubSpot form submit: ink on aqua (white fails contrast) */
body .hs-form-target .hs-button,
body .hs-form-target input[type="submit"],
body .hs-button.primary {
  background: var(--go) !important;
  border-color: var(--go) !important;
  color: var(--ink) !important;
}
body .hs-form-target .hs-button:hover,
body .hs-form-target input[type="submit"]:hover,
body .hs-button.primary:hover {
  background: var(--go-2) !important;
  color: var(--ink) !important;
}

/* ---- Labels ---- */
body .section-kicker,
body .eyebrow,
body .logos-label,
body .pkg-label,
body .hb-plat,
body .shift-label,
body .tcar-attr,
body .proof-note,
body .footer-note {
  font-family: var(--f-mono);
  letter-spacing: 0.06em;
}
body .section-kicker,
body .eyebrow {
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
}
body .section-kicker,
body .csd-breadcrumb {
  margin-bottom: 16px;
}
/* Page heroes: gap comes only from the kicker, not stacked title top margin */
body .cs-page-title,
body .page-title,
body .nf-title {
  margin-top: 0;
}
body .section-kicker::before,
body .eyebrow::before,
body .csd-breadcrumb::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  background: var(--go);
  border-radius: 1px;
  vertical-align: 0.05em;
}
body .csd-breadcrumb {
  color: var(--ink);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
body .csd-breadcrumb a { color: var(--ink); }
body .csd-breadcrumb a:hover { color: var(--ink-soft); }
body .csd-hero {
  padding-top: clamp(52px, 8vw, 92px);
}

body .hero-sub {
  font-family: var(--f-body);
  color: var(--ink-soft);
  font-size: clamp(19px, 2.3vw, 22px);
  line-height: 1.45;
  max-width: 38ch;
  margin-top: 22px;
}
body .section-title {
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 600;
  letter-spacing: -0.035em;
  max-width: 16ch;
}
body .section-lead {
  font-size: 20px;
  line-height: 1.5;
  max-width: 58ch;
}
/* Same display treatment on every page hero / page title */
body .cs-page-title,
body .page-title,
body .nf-title,
body .book-title,
body .csd-title,
body .lp-title,
body .ai-title {
  font-family: var(--f-display);
  font-size: clamp(34px, 5vw, 52px);
  font-weight: 600;
  letter-spacing: -0.035em;
  line-height: 1.1;
}
body .cs-page-title { max-width: 22ch; }
body .csd-title { font-size: clamp(34px, 5.2vw, 54px); max-width: 20ch; line-height: 1.06; }
body .lp-title { font-size: clamp(40px, 6vw, 64px); max-width: 16ch; line-height: 1.02; }
body .ai-title { font-size: clamp(34px, 5.2vw, 54px); letter-spacing: -0.035em; }
body .shift-word {
  font-size: clamp(40px, 6.8vw, 68px);
  font-weight: 600;
  letter-spacing: -0.035em;
}
body .tcar-quote {
  font-size: clamp(1.65rem, 3.8vw, 3.1rem);
  font-weight: 600;
  letter-spacing: -0.03em;
}
body .pain {
  padding: clamp(40px, 6vw, 64px) 0;
  border-top: 1px solid var(--line);
  background: var(--paper-2);
}
body .pain .section-title {
  margin-top: 6px;
  max-width: 18ch;
}
body .pain .pain-grid {
  margin-top: clamp(28px, 4vw, 40px);
}
body .pain-quote {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.32;
  background: transparent;
  border-radius: 0;
}
body .pain-close { font-size: 24px; font-weight: 600; }
body .pain-close strong { color: var(--ink); }
body .pain-close-mark {
  padding: 0.18em 0.45em 0.4em;
  background: linear-gradient(
    transparent 8%,
    color-mix(in srgb, var(--go) 78%, #fff) 8%,
    color-mix(in srgb, var(--go) 78%, #fff) 100%
  );
}
body .pkg-title {
  font-size: clamp(26px, 3.2vw, 32px);
  font-weight: 600;
}
body .man-card h3 {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.025em;
}
body .ai-stat-num {
  font-size: clamp(48px, 7vw, 72px);
  font-weight: 600;
  letter-spacing: -0.04em;
}
body .ai-body { font-size: 20px; }
body .ai-close { font-size: 22px; font-weight: 600; }
body .why-body { font-size: 19px; }
body .testimonial blockquote {
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
}
body .quiz-h2 {
  font-size: clamp(28px, 3.8vw, 36px);
  font-weight: 600;
}
body .question-text {
  font-size: clamp(24px, 3.2vw, 30px);
  font-weight: 600;
}

/* ---- Soft card geometry ---- */
body .pl-card,
body .pkg,
body .man-card,
body .testimonial,
body .ai-stat,
body .card,
body .option,
body .why-photo img {
  border-radius: var(--radius);
}
body .pl-card { box-shadow: none; }
body .why-photo img {
  box-shadow: none;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) + 4px);
}
body .why-linkedin {
  color: var(--go-ink);
  text-decoration: none;
}
body .why-linkedin:hover {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body .tcar-arrow { border-radius: var(--radius-sm); }

/* ---- Accent on light + signal on dark ---- */
body .pl-col-won .pl-head,
body .pl-head-won,
body .man-card h3 {
  color: var(--ink);
}
body .pl-col-won .pl-head,
body .pl-head-won {
  border-bottom-color: var(--go);
  font-weight: 700;
}
body .pl-col-won .pl-count {
  color: var(--ink-soft);
}
body .pl-won-flag { color: var(--slate); font-weight: 700; }
body .fit-tick {
  background: var(--go);
  color: var(--ink);
}

/* Quiz / light-card accents: bright aqua fails WCAG on white */
body .instrument-badge,
body #progress-pillar,
body .option:hover .option-key,
body .option.selected .option-key,
body .fix-first strong,
body .cs-tag,
body .csd-tag,
body .pill-tag,
body .pillar-badge,
body .cs-more,
body .tick {
  color: var(--go-ink);
}
body .instrument-badge {
  background: var(--go-wash);
  border: 1px solid color-mix(in srgb, var(--go-ink) 18%, transparent);
}
body .option:hover,
body .option.selected {
  border-color: var(--go-ink);
}
body .option.selected {
  background: var(--go-wash);
}
body .option:hover .option-key,
body .option.selected .option-key {
  border-color: var(--go-ink);
}
body .fix-first {
  border-color: color-mix(in srgb, var(--go-ink) 28%, transparent);
}

body .shift-word.accent,
body .ai-stat-num,
body .tcar-mark,
body .tcar-dot.is-active,
body .shift-arrow,
body .scorecard-section .section-kicker,
body .ai .section-kicker {
  color: var(--signal);
}

body .pl-card-won {
  background: var(--go-wash);
  border-color: color-mix(in srgb, var(--go) 40%, transparent);
}
body .pl-card-moving {
  border-color: var(--go);
  box-shadow: none;
}
body .contact {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
}
body .contact-copy .section-title {
  max-width: none;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
body .contact-copy .section-kicker,
body .contact-copy .section-lead {
  text-align: center;
}
body :focus-visible {
  outline-color: var(--go);
}

body .shift,
body .ai,
body .scorecard-section,
body .pkg-core {
  background: var(--ink);
}
body .logos {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
body .site-footer {
  background: var(--paper-2);
  border-top: 1px solid var(--line);
}