/* LeadOcto - shared design system (Brand Book v1.0, 2026 redesign).
 *
 * Verbatim port of the design bundle's shared.css. The @import for the
 * Space Grotesk / Space Mono webfonts is intentionally dropped here:
 * the fonts are enqueued separately in functions.php so they load in
 * parallel rather than blocking on this stylesheet.
 *
 * Scope: only the redesigned marketing surfaces (home, pricing, why,
 * docs) load this file. The legacy app.css Tailwind bundle is NOT
 * loaded alongside it, so the generic class names below (.grid, .card,
 * .container) never collide.
 */

:root {
  /* === Primary palette === */
  --ink: #0A1214;
  --paper: #FAFAF7;
  --teal-tint: #D6F2EF;
  --teal: #1BB5A8;

  /* === Full color system === */
  --turquoise-50:  #EEFAF8;
  --turquoise-100: #D6F2EF;
  --turquoise-300: #7DD6CD;
  --turquoise-500: #1BB5A8;
  --turquoise-700: #0E7A72;
  --turquoise-900: #073F3B;

  --ink-50:  #F2F2ED;
  --ink-100: #E4E4DE;
  --ink-300: #A8AEB0;
  --ink-500: #6B7477;
  --ink-700: #3A4447;
  --ink-900: #0A1214;

  --pos-50:  #E7F7EC;
  --pos-500: #2F9E55;
  --pos-900: #0F3D1D;

  --warn-50:  #FFF3D9;
  --warn-500: #E09C1A;

  --err-50:  #FBECEC;
  --err-500: #D94444;
  --err-900: #4A0E0E;

  --sand-100: #F5F1E6;
  --sand-400: #C9B994;

  /* === Surfaces === */
  --surface: var(--paper);
  --surface-raised: #FFFFFF;
  --surface-sunken: #F2F2ED;
  --hairline: rgba(10, 18, 20, 0.08);
  --hairline-strong: rgba(10, 18, 20, 0.14);

  /* === Type === */
  --font-sans: 'Space Grotesk', system-ui, sans-serif;
  --font-mono: 'Space Mono', ui-monospace, monospace;

  /* Brand book scale: 28 / 38 / 64 / 88 / 160 */
  --t-meta: 12px;
  --t-body-sm: 14px;
  --t-body: 16px;
  --t-lead: 19px;
  --t-h5: 22px;
  --t-h4: 28px;
  --t-h3: 38px;
  --t-h2: 56px;
  --t-h1: 88px;
  --t-display: 160px;

  /* === Spacing (8px baseline) === */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 24px;
  --s6: 32px;
  --s7: 48px;
  --s8: 64px;
  --s9: 80px;
  --s10: 100px;
  --s11: 128px;

  /* === Radius === */
  --r-sm: 4px;
  --r-pill: 999px;

  /* === Shadows === */
  --shadow-card: 0 1px 0 rgba(10, 18, 20, 0.04), 0 8px 24px rgba(10, 18, 20, 0.06);
  --shadow-pop: 0 4px 12px rgba(10, 18, 20, 0.06), 0 24px 56px rgba(10, 18, 20, 0.10);
  --shadow-deep: 0 30px 80px rgba(10, 18, 20, 0.18), 0 8px 24px rgba(10, 18, 20, 0.08);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--t-body);
  line-height: 1.45;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Safety net against accidental horizontal scroll. `clip` (not
     `hidden`) so it never creates a scroll container that would break
     the sticky top nav; vertical scrolling stays normal. */
  overflow-x: clip;
}

img { max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* === Typography utilities === */
.t-display { font-size: var(--t-display); line-height: 0.92; letter-spacing: -0.04em; font-weight: 700; }
.t-h1      { font-size: var(--t-h1);      line-height: 0.96; letter-spacing: -0.035em; font-weight: 700; }
.t-h2      { font-size: var(--t-h2);      line-height: 1.02; letter-spacing: -0.03em;  font-weight: 700; }
.t-h3      { font-size: var(--t-h3);      line-height: 1.08; letter-spacing: -0.02em;  font-weight: 600; }
.t-h4      { font-size: var(--t-h4);      line-height: 1.18; letter-spacing: -0.015em; font-weight: 600; }
.t-h5      { font-size: var(--t-h5);      line-height: 1.25; letter-spacing: -0.01em;  font-weight: 600; }
.t-lead    { font-size: var(--t-lead);    line-height: 1.45; color: var(--ink-700); }
.t-body    { font-size: var(--t-body);    line-height: 1.5; }
.t-small   { font-size: var(--t-body-sm); line-height: 1.5; color: var(--ink-700); }
.t-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-500);
}
.t-mono { font-family: var(--font-mono); }

.text-muted { color: var(--ink-500); }
.text-ink-700 { color: var(--ink-700); }
.text-teal { color: var(--turquoise-700); }

/* === Buttons === */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 20px;
  border-radius: var(--r-pill);
  font: 500 15px/1 var(--font-sans);
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, color 120ms ease;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--ink);
  color: var(--paper);
}
.btn-primary:hover { background: #1a2326; }

.btn-teal {
  background: var(--teal);
  color: var(--ink);
  font-weight: 600;
}
.btn-teal:hover { background: #20cdbf; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--hairline-strong);
}
.btn-ghost:hover { background: var(--ink-50); }

.btn-sm { height: 36px; padding: 0 14px; font-size: 13px; }
.btn-lg { height: 52px; padding: 0 26px; font-size: 16px; }

.btn-paper { background: var(--paper); color: var(--ink); }
.btn-paper:hover { background: #fff; }
.btn-on-ink {
  background: transparent; color: var(--paper);
  border-color: rgba(250, 250, 247, 0.24);
}
.btn-on-ink:hover { background: rgba(250, 250, 247, 0.06); }

/* === Cards === */
.card {
  background: var(--surface-raised);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
}

.hairline { border: 1px solid var(--hairline); }
.hairline-top { border-top: 1px solid var(--hairline); }
.hairline-bottom { border-bottom: 1px solid var(--hairline); }

/* === Pills / tags === */
.tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 24px;
  padding: 0 10px;
  border-radius: var(--r-pill);
  background: var(--ink-50);
  color: var(--ink-700);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.tag-teal { background: var(--turquoise-100); color: var(--turquoise-900); }
.tag-ink { background: var(--ink); color: var(--paper); }
.tag-pos { background: var(--pos-50); color: var(--pos-900); }
.tag-warn { background: var(--warn-50); color: #6f4906; }

/* === Layout helpers === */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--s7);
}
.container-narrow { max-width: 980px; margin: 0 auto; padding: 0 var(--s7); }

.row { display: flex; }
.col { display: flex; flex-direction: column; }
.grid { display: grid; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; }
.gap-4 { gap: 16px; } .gap-5 { gap: 24px; } .gap-6 { gap: 32px; }
.gap-7 { gap: 48px; } .gap-8 { gap: 64px; }

.dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* === Section dividers === */
.section { padding: var(--s11) 0; }
.section-sm { padding: var(--s9) 0; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--turquoise-700);
}

/* === Tab/Nav helpers === */
.navlink {
  font-size: 14px;
  color: var(--ink-700);
  padding: 8px 0;
  transition: color 120ms;
}
.navlink:hover { color: var(--ink); }
.navlink.active { color: var(--ink); }

/* === Subtle teal-wash gradient backgrounds === */
.bg-teal-wash {
  background:
    radial-gradient(60% 60% at 80% 0%, rgba(27, 181, 168, 0.10) 0%, transparent 60%),
    radial-gradient(50% 50% at 0% 100%, rgba(27, 181, 168, 0.06) 0%, transparent 70%),
    var(--paper);
}

.bg-sand { background: var(--sand-100); }
.bg-ink { background: var(--ink); color: var(--paper); }

/* === Octopus-tentacle dotted divider === */
.dot-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.dot-row .dot { background: var(--turquoise-500); }

/* === Misc === */
.icon-bullet {
  width: 28px;
  height: 28px;
  border-radius: var(--r-pill);
  background: var(--turquoise-100);
  color: var(--turquoise-900);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font: 600 13px/1 var(--font-mono);
}

.lo-visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Generic display-toggle utility. The redesign templates + site.js use
 * a bare `.hidden` class to show/hide elements (the mobile-nav burger's
 * menu/close icon swap, the language menu, the docs search results, the
 * pricing "save" badge). Without this rule those elements never hide,
 * e.g. the burger shows the menu AND close icon at once. !important so
 * it always wins over a component's own `display`. */
.hidden { display: none !important; }