/* ============================================================================
 * The Trust Builders — Design System v1
 * (operated by Open Cybersecurity, Inc.)
 *
 * Inspired by Harvey's "hy-*" architecture (Jan 2026):
 * https://harvey.ai/blog/rebuilding-design-system
 *
 * RULES
 *   1. Tokens are the single source of truth. Never hardcode hex outside :root.
 *   2. New code uses --ttb-* tokens only.
 *   3. Legacy tokens (--bone, --ink, --teal, --oc-*) are aliases — kept for
 *      backwards compatibility. Will be deprecated at 80% migration,
 *      removed at 95%.
 *   4. Theming = override --ttb-* in [data-theme="dark"] (future).
 *   5. Naming by INTENT, not appearance: "fg-base" > "neutral-900".
 *
 * MIGRATION MAP: see assets/_migration.md
 * VISUAL VALUES UNCHANGED in this refactor.
 * ============================================================================ */

:root {
  /* ========================================================================
   * 1. PRIMITIVE SCALES (raw color values — DO NOT use directly in components)
   * ====================================================================== */

  /* Petrol (brand primary) */
  --petrol-50:  #F1F7F9;
  --petrol-100: #D5E7EC;
  --petrol-200: #ACCFD8;
  --petrol-300: #79B4C3;
  --petrol-400: #54A2B6;
  --petrol-500: #3F8A9D;
  --petrol-600: #307688;       /* PRIMARY accent */
  --petrol-700: #225E6D;
  --petrol-800: #17444F;       /* dark sections */
  --petrol-900: #0F3038;

  /* Amber (warm accent — numbers, badges) */
  --amber-50:  #FFFAEB;
  --amber-100: #FEF0C8;
  --amber-200: #FDDD8C;
  --amber-300: #FBC550;
  --amber-400: #FFBB0F;
  --amber-500: #F5970A;
  --amber-600: #DB7706;

  /* Warm neutrals */
  --warm-50:  #F9F8F6;
  --warm-100: #F0EEEA;
  --warm-200: #E0DCD7;
  --warm-300: #C3BDB6;
  --warm-400: #5C636A;
  --warm-500: #746B67;
  --warm-600: #5E5450;
  --warm-700: #3E3532;
  --warm-800: #29211F;
  --warm-900: #1E1715;

  /* Status (raw) */
  --status-success: #21C45D;
  --status-warning: #FFBB0F;
  --status-error:   #EF4343;

  /* ========================================================================
   * 2. SEMANTIC TOKENS (--ttb-*) — USE THESE in new components.
   * Naming pattern: --ttb-{role}-{variant}
   * Roles: bg, fg, accent, border, status
   * ====================================================================== */

  /* Backgrounds */
  --ttb-bg-base:    #FAF8F4;                /* page bg — warm bone */
  --ttb-bg-surface: #FFFFFF;                /* cards, modals */
  --ttb-bg-subtle:  var(--warm-100);        /* alt sections */
  --ttb-bg-inverse: var(--warm-900);        /* dark surfaces */

  /* Foregrounds */
  --ttb-fg-base:    var(--warm-900);        /* primary text */
  --ttb-fg-subtle:  var(--warm-700);        /* secondary text */
  --ttb-fg-muted:   var(--warm-400);        /* tertiary text, placeholders */
  --ttb-fg-inverse: #FAF8F4;                /* text on dark surfaces */

  /* Accents */
  --ttb-accent-primary:       var(--petrol-600);
  --ttb-accent-primary-hover: var(--petrol-500);
  --ttb-accent-warm:          var(--amber-400);

  /* Borders */
  --ttb-border-base:   var(--warm-200);
  --ttb-border-subtle: var(--warm-100);
  --ttb-border-strong: var(--warm-300);

  /* Status (semantic) */
  --ttb-success:     var(--status-success);
  --ttb-warning:     var(--status-warning);
  --ttb-destructive: var(--status-error);
  --ttb-info:        var(--petrol-500);

  /* ========================================================================
   * 3. SHADOWS — petrol-tinted, never neutral gray
   * ====================================================================== */
  --shadow-xs:   0 1px 2px rgba(15, 48, 56, 0.06);
  --shadow-soft: 0 1px 1px rgba(15, 48, 56, 0.04), 0 4px 14px rgba(15, 48, 56, 0.06);
  --shadow-sm:   0 2px 6px rgba(15, 48, 56, 0.08), 0 1px 2px rgba(15, 48, 56, 0.04);
  --shadow-md:   0 6px 16px rgba(15, 48, 56, 0.10), 0 2px 4px rgba(15, 48, 56, 0.05);
  --shadow-lg:   0 18px 40px rgba(15, 48, 56, 0.12), 0 4px 10px rgba(15, 48, 56, 0.06);

  /* ========================================================================
   * 4. BORDERS — composite shorthands using ttb tokens
   * ====================================================================== */
  --border-hair:   1px solid var(--ttb-border-base);
  --border-thin:   1px solid var(--ttb-border-strong);
  --border-medium: 1.5px solid var(--ttb-fg-base);

  --r-sm: 0;
  --r-md: 0;
  --r-lg: 0;
  --r-xl: 0;

  /* Motion */
  --motion-fast: 180ms;
  --motion-base: 240ms;
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  --font-display: "Fraunces", "Source Serif 4", Georgia, serif;
  --font-body: "Outfit", "Inter", system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--ttb-bg-base);
  color: var(--ttb-fg-subtle);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  background-color: var(--ttb-bg-base);
  background-image: none;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
button { font-family: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }

:focus-visible {
  outline: 2px solid var(--ttb-accent-primary);
  outline-offset: 3px;
}

/* Type scale — editorial: serif H1/H2, italic accents */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
  color: var(--ttb-fg-base);
}
h1 {
  font-size: clamp(2.5rem, 4vw + 1rem, 4.75rem);
  font-weight: 400;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
h1 em, h2 em { font-style: italic; font-weight: 400; }
h2 {
  font-size: clamp(1.75rem, 2vw + 1rem, 2.75rem);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.1;
}
h3 { font-size: clamp(1.35rem, 0.8vw + 1rem, 1.75rem); font-weight: 500; font-family: var(--font-body); letter-spacing: -0.01em; }
h4 { font-size: clamp(1.05rem, 0.4vw + 1rem, 1.25rem); line-height: 1.3; font-weight: 600; font-family: var(--font-body); }
h5 { font-size: 0.78rem; font-family: var(--font-body); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ttb-fg-base); font-weight: 600; }

p { margin: 0; text-wrap: pretty; }
p.lead { font-size: 1.2rem; color: var(--warm-600); line-height: 1.55; font-weight: 400; }

.eyebrow {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ttb-fg-base);
  font-weight: 600;
  display: inline-block;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}
.eyebrow.violet { color: var(--ttb-accent-primary); }

.muted { color: var(--ttb-fg-muted); }
.kicker { font-family: var(--font-body); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ttb-fg-base); font-weight: 600; }

.grad {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  color: var(--ttb-fg-base);
  background: none;
  padding: 0;
  display: inline;
  box-shadow: none;
  border: none;
  /* Soft warm underline — pop without color */
  background-image: linear-gradient(to right, var(--warm-300), var(--warm-300));
  background-size: 100% 6px;
  background-position: 0 92%;
  background-repeat: no-repeat;
  padding-bottom: 2px;
}
.statement .grad,
.hero-rating-score-area .grad {
  background-image: none;
  padding-bottom: 0;
}

/* Layout */
.container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.container-narrow { max-width: 820px; margin: 0 auto; padding: 0 32px; }

section { position: relative; }
.section-pad { padding: 96px 0; }
.section-pad-sm { padding: 64px 0; }
.section-pad-lg { padding: 128px 0; }

@media (max-width: 720px) {
  .section-pad { padding: 64px 0; }
  .section-pad-lg { padding: 80px 0; }
  .container, .container-narrow { padding: 0 24px; }
}

.section-divider { border-top: var(--ttb-border-base); }

/* Buttons — editorial: teal sentence-case, hairline border, 2px shadow */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  letter-spacing: 0;
  text-transform: none;
  border: var(--ttb-border-strong);
  background: var(--ttb-bg-surface);
  color: var(--ttb-fg-base);
  box-shadow: var(--shadow-sm);
  transition: transform var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
  white-space: nowrap;
}
.btn:hover {
  transform: translate(1px, 1px);
  box-shadow: var(--shadow-xs);
  text-decoration: none;
}
.btn:active {
  transform: translate(2px, 2px);
  box-shadow: none;
}
.btn-primary { background: var(--ttb-accent-primary); color: var(--ttb-bg-surface); }
.btn-primary:hover { background: var(--petrol-800); color: var(--ttb-bg-surface); }
.btn-secondary { background: var(--ttb-bg-surface); color: var(--ttb-fg-base); }
.btn-secondary:hover { background: var(--ttb-bg-subtle); }
.btn-magenta { background: var(--ttb-accent-primary); color: var(--ttb-bg-surface); }
.btn-magenta:hover { background: var(--petrol-100); color: var(--ttb-bg-surface); }
.btn-ghost {
  background: transparent;
  color: var(--ttb-fg-base);
  border: var(--ttb-border-base);
  box-shadow: none;
  padding: 11px 20px;
}
.btn-ghost:hover {
  background: var(--petrol-800);
  color: var(--ttb-bg-surface);
  transform: none;
  box-shadow: none;
}
.btn .arrow { display: inline-block; transition: transform var(--motion-fast) var(--ease); font-weight: 500; }
.btn:hover .arrow { transform: translateX(2px); }

/* Pills / Badges */
.pill {
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  gap: 8px;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--ttb-bg-surface);
  border: var(--ttb-border-base);
  font-size: 0.78rem;
  color: var(--ttb-fg-base);
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  box-shadow: none;
}
.pill .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ttb-accent-primary); border: none; }
.pill.violet { background: var(--ttb-bg-surface); }
.pill.violet .dot { background: var(--ttb-accent-primary); }
.pill .star { color: var(--ttb-fg-base); font-weight: 600; }

.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border: var(--ttb-border-base);
  background: var(--ttb-bg-surface);
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--ttb-fg-base);
  border-radius: 999px;
}
.badge.success { background: var(--petrol-100); }
.badge.warn { background: var(--ttb-accent-warm); }
.badge.danger { background: var(--amber-100); }
.badge.purple { background: var(--ttb-accent-primary); color: var(--ttb-bg-surface); border-color: var(--ttb-accent-primary); }
.badge.blue { background: var(--ttb-accent-primary); color: var(--ttb-bg-surface); border-color: var(--ttb-accent-primary); }

/* Cards — paper, hairline border, subtle 2px shadow */
.card {
  background: var(--ttb-bg-surface);
  border: var(--ttb-border-base);
  border-radius: var(--r-md);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: transform var(--motion-base) var(--ease), box-shadow var(--motion-base) var(--ease);
}
.card:hover {
  transform: translate(1px, 1px);
  box-shadow: var(--shadow-xs);
}
.card-hoverable { cursor: pointer; }

/* Header — solid bone w/ hairline border bottom */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--ttb-bg-base);
  border-bottom: var(--ttb-border-base);
  backdrop-filter: none;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 76px;
  gap: 32px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-weight: 800;
  font-size: 1.35rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ttb-fg-base);
}
.brand-mark {
  width: 28px; height: 28px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--ttb-accent-primary);
  border: var(--ttb-border-base);
  position: relative;
}
.brand-mark::before {
  content: "";
  position: absolute;
  inset: 5px;
  background: var(--ttb-bg-base);
  border-radius: 50%;
}
.brand-mark::after {
  content: "";
  position: absolute;
  inset: 9px;
  background: var(--ttb-accent-primary);
  border-radius: 50%;
}
.brand-logo {
  height: 40px;
  width: auto;
  display: block;
}
.footer-brand .brand-logo { height: 56px; }
@media (max-width: 768px) {
  .brand-logo { height: 32px; }
  .footer-brand .brand-logo { height: 48px; }
}

.nav-list { display: flex; gap: 4px; align-items: center; list-style: none; padding: 0; margin: 0; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  border-radius: 0;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ttb-fg-base);
  white-space: nowrap;
  flex-shrink: 0;
}
.nav-link, .nav-link * { white-space: nowrap !important; }
.nav-list { flex-wrap: nowrap; }
.nav-item { flex-shrink: 0; }
.nav-link:hover { background: transparent; color: var(--ttb-fg-base); text-decoration: none; }
.nav-link.has-menu::after {
  content: "";
  width: 6px; height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  margin-left: 2px;
}

.header-actions { display: flex; align-items: center; gap: 12px; }
.lang-toggle {
  display: inline-flex;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  background: transparent;
  border: var(--ttb-border-base);
  border-radius: 999px;
  padding: 0;
  gap: 0;
  box-shadow: none;
  overflow: hidden;
}
.lang-toggle span { padding: 4px 10px; color: var(--ttb-fg-base); }
.lang-toggle .active { background: var(--petrol-800); color: var(--ttb-bg-surface); }

@media (max-width: 980px) {
  .nav-list { display: none; }
}

/* ==========================================================
   Mega menu — fade + slide, hover-intent, hairline editorial
   ========================================================== */
.has-mega { position: relative; }

.nav-link {
  position: relative;
}
.nav-link.has-menu::after { display: none; }
.nav-chev {
  margin-left: 4px;
  opacity: 0.5;
  transition: transform 220ms cubic-bezier(.4,0,.2,1), opacity 180ms ease;
}
.nav-item.is-open .nav-chev,
.nav-item:hover .nav-chev { opacity: 1; transform: rotate(180deg); }

.nav-link::before {
  content: "";
  position: absolute;
  left: 14px; right: 14px;
  bottom: 4px;
  height: 1px;
  background: var(--ttb-fg-base);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 280ms cubic-bezier(.4,0,.2,1);
}
.nav-item.is-open .nav-link::before,
.nav-link:hover::before { transform: scaleX(1); }

/* Mega wrap — animated container.
   The wrap sits in each <li>, but we override its `left` via a CSS variable
   set by JS so every panel opens at the SAME horizontal anchor (left of the
   primary nav). This kills the "panels jumping sides" feeling. */
.primary-nav { position: relative; }
.mega-wrap {
  position: absolute;
  top: calc(100% + 14px);
  left: var(--mega-offset, 0px);
  transform: translateY(-6px);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 200ms cubic-bezier(.4,0,.2,1),
    transform 240ms cubic-bezier(.4,0,.2,1),
    visibility 0s linear 240ms;
  z-index: 60;
  padding-top: 0;
}
.nav-item.is-open .mega-wrap {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
  transition:
    opacity 200ms cubic-bezier(.4,0,.2,1),
    transform 240ms cubic-bezier(.4,0,.2,1),
    visibility 0s;
}

.mega {
  background: var(--ttb-bg-surface);
  border: var(--ttb-border-base);
  box-shadow:
    0 1px 1px rgba(15, 48, 56, 0.04),
    0 8px 28px -6px rgba(15, 48, 56, 0.16),
    0 24px 60px -20px rgba(15, 48, 56, 0.18);
  border-radius: 6px;
  overflow: hidden;
}

/* Backdrop — no blur, just a whisper of dim so the panel reads cleanly */
.mega-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 48, 56, 0);
  pointer-events: none;
  transition: background 200ms ease;
  z-index: 40;
}
.mega-backdrop.is-visible {
  background: rgba(15, 48, 56, 0.06);
}

/* SOLUTIONS — grid of cards */
.mega-cards { width: 880px; padding: 24px; }
.mega-cards-header {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 0 4px 16px;
  border-bottom: var(--ttb-border-base);
  margin-bottom: 16px;
}
.mega-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ttb-fg-muted);
}
.mega-all-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--petrol-700);
  text-decoration: none;
  display: inline-flex; gap: 6px; align-items: center;
}
.mega-all-link:hover { color: var(--petrol-900); }

.mega-cards-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--ttb-border-base);
  border: var(--ttb-border-base);
}
.mega-card {
  position: relative;
  display: flex; flex-direction: column;
  gap: 4px;
  padding: 18px 16px 22px;
  background: var(--ttb-bg-surface);
  text-decoration: none;
  color: var(--ttb-fg-base);
  transition: background 180ms ease, transform 220ms ease, box-shadow 220ms ease;
  min-height: 132px;
}
.mega-card:hover {
  background: var(--ttb-bg-base);
  text-decoration: none;
  box-shadow: 0 1px 1px rgba(15, 48, 56, 0.04), 0 6px 14px -4px rgba(15, 48, 56, 0.10);
  z-index: 1;
}
.mega-card-num {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--ttb-fg-muted);
  margin-bottom: 6px;
}
.mega-card-eyebrow {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--petrol-600);
  margin-bottom: 4px;
}
.mega-card-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--ttb-fg-base);
  letter-spacing: -0.005em;
}
.mega-card-blurb {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--warm-600);
  margin-top: 2px;
}
.mega-card-arrow {
  position: absolute;
  bottom: 14px; right: 14px;
  font-size: 14px; color: var(--ttb-fg-muted);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 180ms ease, transform 220ms cubic-bezier(.4,0,.2,1), color 180ms ease;
}
.mega-card:hover .mega-card-arrow {
  opacity: 1; transform: translateX(0); color: var(--petrol-700);
}
.mega-card.is-featured {
  background: linear-gradient(155deg, var(--petrol-900), var(--petrol-700));
  color: var(--ttb-bg-surface);
}
.mega-card.is-featured::after {
  content: "★";
  position: absolute;
  top: 14px; right: 14px;
  width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  background: var(--warm-100);
  color: var(--petrol-900);
  font-size: 10px;
  border-radius: 50%;
  font-weight: 700;
  line-height: 1;
}
.mega-card.is-featured .mega-card-num,
.mega-card.is-featured .mega-card-blurb { color: rgba(255,255,255,0.7); }
.mega-card.is-featured .mega-card-eyebrow { color: var(--warm-200); }
.mega-card.is-featured .mega-card-title { color: var(--ttb-bg-surface); }
.mega-card.is-featured:hover { background: linear-gradient(155deg, var(--petrol-800), var(--petrol-600)); }
.mega-card.is-featured .mega-card-arrow { color: var(--petrol-200); }

/* FRAMEWORKS — sidebar + grid */
.mega-frameworks {
  width: 820px;
  display: grid;
  grid-template-columns: 280px 1fr;
}
.mega-frameworks-side {
  background: var(--ttb-bg-base);
  padding: 24px;
  border-right: var(--ttb-border-base);
  display: flex; flex-direction: column; gap: 10px;
}
.mega-side-title {
  font-family: var(--font-display);
  font-size: 22px;
  line-height: 1.15;
  color: var(--ttb-fg-base);
  margin: 6px 0 4px;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.mega-side-blurb {
  font-size: 13px;
  color: var(--warm-600);
  line-height: 1.5;
  margin: 0 0 12px;
}
.fw-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ttb-border-base);
}
.fw-tile {
  display: flex; flex-direction: column;
  padding: 16px 16px 18px;
  background: var(--ttb-bg-surface);
  text-decoration: none;
  color: var(--ttb-fg-base);
  transition: background 160ms ease, box-shadow 200ms ease;
}
.fw-tile:hover {
  background: var(--ttb-bg-base);
  text-decoration: none;
  box-shadow: 0 1px 1px rgba(15, 48, 56, 0.04), 0 5px 12px -3px rgba(15, 48, 56, 0.10);
  position: relative; z-index: 1;
}
.fw-tile-name {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 14px;
  color: var(--ttb-fg-base);
  letter-spacing: -0.005em;
}
.fw-tile-blurb {
  font-size: 11.5px;
  color: var(--ttb-fg-muted);
  margin-top: 3px;
}

/* STAGE — three big cards horizontal */
.mega-stage {
  width: 780px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ttb-border-base);
}
.stage-card {
  position: relative;
  padding: 24px 22px 26px;
  background: var(--ttb-bg-surface);
  text-decoration: none;
  color: var(--ttb-fg-base);
  display: flex; flex-direction: column;
  min-height: 200px;
  transition: background 180ms ease;
}
.stage-card:hover { background: var(--ttb-bg-base); text-decoration: none; }
.stage-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--warm-500);
  font-weight: 600;
}
.stage-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--petrol-600);
  margin-top: 4px;
}
.stage-card h3, .stage-card h4 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -0.01em;
  color: var(--ttb-fg-base);
  margin: 8px 0 8px;
  line-height: 1;
}
.stage-card p {
  font-size: 13px; line-height: 1.5;
  color: var(--warm-600); margin: 0;
}
.stage-go {
  position: absolute;
  right: 18px; bottom: 18px;
  color: var(--ttb-fg-muted);
  font-size: 16px;
  transform: translateX(-6px);
  opacity: 0;
  transition: transform 240ms cubic-bezier(.4,0,.2,1), opacity 180ms ease, color 180ms ease;
}
.stage-card:hover .stage-go { opacity: 1; transform: translateX(0); color: var(--petrol-700); }

/* RESOURCES & COMPANY — feature + list */
.mega-resources {
  width: 720px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.mega-feature-lg {
  padding: 24px;
  background: var(--ttb-bg-base);
  text-decoration: none;
  color: var(--ttb-fg-base);
  border-right: var(--ttb-border-base);
  display: flex; flex-direction: column; gap: 8px;
  transition: background 180ms ease;
}
.mega-feature-lg:hover { background: var(--ttb-bg-subtle); text-decoration: none; }
.mega-feature-lg h4 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 22px; line-height: 1.2; letter-spacing: -0.01em;
  color: var(--ttb-fg-base); margin: 4px 0;
}
.mega-feature-lg p { font-size: 13px; color: var(--warm-600); line-height: 1.5; margin: 0; }
.mega-feature-lg .read-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--petrol-700);
  margin-top: auto;
  padding-top: 12px;
}

.mega-company {
  width: 540px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.mega-resources .mega-col,
.mega-company .mega-col {
  padding: 0;
}
.mega-company .mega-col {
  border-right: var(--ttb-border-base);
}
.mega-link {
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 20px;
  border-bottom: var(--ttb-border-base);
  text-decoration: none;
  color: var(--ttb-fg-base);
  transition: background 160ms ease, padding-left 220ms cubic-bezier(.4,0,.2,1);
}
.mega-link:last-child { border-bottom: none; }
.mega-link:hover {
  background: var(--ttb-bg-base);
  padding-left: 26px;
  text-decoration: none;
}
.mega-link strong {
  font-family: var(--font-body);
  font-weight: 600; font-size: 14px;
  color: var(--ttb-fg-base);
}
.mega-link em {
  font-style: normal;
  font-size: 12px;
  color: var(--ttb-fg-muted);
}

/* Company → Trust center feature panel (gradient card on the right) */
.mega-trust-feature {
  position: relative;
  display: flex; flex-direction: column;
  padding: 24px;
  background: linear-gradient(155deg, var(--petrol-900), var(--petrol-700));
  color: var(--ttb-bg-surface);
  text-decoration: none;
  overflow: hidden;
  transition: background 220ms ease;
}
.mega-trust-feature::before {
  content: "";
  position: absolute;
  inset: -40% -10% auto auto;
  width: 220px; height: 220px;
  background: radial-gradient(circle at center, rgba(255,255,255,0.18), transparent 65%);
  pointer-events: none;
}
.mega-trust-feature:hover {
  background: linear-gradient(155deg, var(--petrol-800), var(--petrol-600));
  text-decoration: none;
}
.mega-trust-feature .mega-eyebrow {
  color: var(--petrol-200);
}
.mega-trust-feature h4 {
  font-family: var(--font-display); font-weight: 400;
  font-size: 24px; line-height: 1.15; letter-spacing: -0.01em;
  color: var(--ttb-bg-surface); margin: 8px 0 6px;
}
.mega-trust-feature p {
  font-size: 13px; line-height: 1.5;
  color: rgba(255, 255, 255, 0.78);
  margin: 0;
}
.mega-trust-feature .read-link {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ttb-bg-surface);
  margin-top: auto;
  padding-top: 16px;
  display: inline-flex; gap: 6px; align-items: center;
}

/* ==========================================================
   Active state — current page in nav
   ========================================================== */
.nav-item.is-current > .nav-link {
  color: var(--ttb-fg-base);
}
.nav-item.is-current > .nav-link::before {
  transform: scaleX(1);
}
.mega-card.is-current,
.fw-tile.is-current,
.mega-link.is-current,
.stage-card.is-current {
  background: var(--ttb-bg-base);
}
.mega-card.is-current .mega-card-arrow,
.stage-card.is-current .stage-go {
  opacity: 1; transform: translateX(0); color: var(--petrol-700);
}
.mega-card.is-featured.is-current {
  background: linear-gradient(155deg, var(--petrol-800), var(--petrol-600));
}
.mega-trust-feature.is-current {
  background: linear-gradient(155deg, var(--petrol-800), var(--petrol-600));
}

/* ==========================================================
   Header search trigger
   ========================================================== */
.header-search {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 12px;
  background: transparent;
  border: 1px solid var(--ttb-border-base);
  border-radius: 999px;
  color: var(--warm-700);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.header-search:hover {
  color: var(--ttb-fg-base);
  border-color: var(--petrol-300);
  background: var(--ttb-bg-base);
}
.header-search-kbd { display: inline-flex; gap: 2px; }
.header-search-kbd kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--ttb-bg-base);
  border: 1px solid var(--ttb-border-base);
  border-radius: 3px;
  padding: 1px 4px;
  color: var(--warm-700);
  line-height: 1;
}
@media (max-width: 1100px) {
  .header-search-kbd { display: none; }
  .header-search { padding: 0 10px; }
}

/* ==========================================================
   Mobile toggle + drawer
   ========================================================== */
.mobile-toggle {
  display: none;
  width: 42px; height: 42px;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 5px;
  background: transparent;
  border: 1px solid var(--ttb-border-base);
  border-radius: 999px;
  cursor: pointer;
  padding: 0;
}
.mobile-toggle-bar {
  width: 16px; height: 1.5px;
  background: var(--ttb-fg-base);
  transition: transform 280ms cubic-bezier(.4,0,.2,1), opacity 180ms ease;
}
.mobile-toggle.is-active .mobile-toggle-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.mobile-toggle.is-active .mobile-toggle-bar:nth-child(2) { opacity: 0; }
.mobile-toggle.is-active .mobile-toggle-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

@media (max-width: 980px) {
  .primary-nav { display: none; }
  .header-search-kbd { display: none; }
  .mobile-toggle { display: inline-flex; }
  .header-actions .btn.header-cta { display: none; }
}

.mobile-drawer {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100vh;
  background: var(--ttb-bg-surface);
  z-index: 50;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 240ms ease, transform 320ms cubic-bezier(.4,0,.2,1);
  overflow-y: auto;
  padding: 96px 20px 40px;
}
.mobile-drawer.is-open {
  pointer-events: auto;
  opacity: 1;
  transform: translateY(0);
}
.mobile-drawer-inner { max-width: 540px; margin: 0 auto; }
.mobile-group {
  border-bottom: var(--ttb-border-base);
}
.mobile-group summary {
  display: flex; justify-content: space-between; align-items: center;
  padding: 18px 4px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 400;
  cursor: pointer;
  list-style: none;
  color: var(--ttb-fg-base);
}
.mobile-group summary::-webkit-details-marker { display: none; }
.mobile-group summary svg { transition: transform 240ms ease; }
.mobile-group[open] summary svg { transform: rotate(180deg); }
.mobile-group ul {
  list-style: none; padding: 0 0 16px 4px; margin: 0;
}
.mobile-group ul li a {
  display: block;
  padding: 10px 0;
  font-size: 15px;
  color: var(--warm-600);
  text-decoration: none;
}
.mobile-group ul li a:hover { color: var(--ttb-fg-base); }
.mobile-cta {
  display: inline-flex !important;
  margin-top: 28px;
}

/* ==========================================================
   Command palette (⌘K)
   ========================================================== */
.cmdk {
  position: fixed; inset: 0;
  z-index: 100;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12vh;
  pointer-events: none;
  opacity: 0;
  transition: opacity 200ms ease;
}
.cmdk.is-open { pointer-events: auto; opacity: 1; }
.cmdk-backdrop {
  position: absolute; inset: 0;
  background: rgba(15, 48, 56, 0.4);
  backdrop-filter: blur(4px);
}
.cmdk-panel {
  position: relative;
  width: min(560px, 92vw);
  background: var(--ttb-bg-surface);
  border: var(--ttb-border-base);
  border-radius: 6px;
  box-shadow: 0 32px 80px -20px rgba(15, 48, 56, 0.4);
  overflow: hidden;
  transform: translateY(-8px) scale(0.98);
  transition: transform 280ms cubic-bezier(.4,0,.2,1);
}
.cmdk.is-open .cmdk-panel { transform: translateY(0) scale(1); }
.cmdk-input-row {
  display: flex; align-items: center; gap: 12px;
  padding: 16px 18px;
  border-bottom: var(--ttb-border-base);
  color: var(--ttb-fg-muted);
}
.cmdk-input {
  flex: 1;
  border: none; outline: none; background: transparent;
  font-family: var(--font-body);
  font-size: 16px;
  color: var(--ttb-fg-base);
}
.cmdk-input::placeholder { color: var(--ttb-fg-muted); }
.cmdk-esc {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--ttb-bg-base);
  border: 1px solid var(--ttb-border-base);
  border-radius: 3px;
  padding: 2px 6px;
  color: var(--warm-700);
}
.cmdk-results {
  max-height: 400px;
  overflow-y: auto;
  padding: 6px 0;
}
.cmdk-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px; align-items: center;
  padding: 10px 18px;
  text-decoration: none;
  color: var(--ttb-fg-base);
  transition: background 120ms ease;
}
.cmdk-row.is-active { background: var(--ttb-bg-base); }
.cmdk-row-title { font-size: 14px; color: var(--ttb-fg-base); }
.cmdk-row-group {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ttb-fg-muted);
}
.cmdk-row-arrow {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ttb-fg-muted);
  opacity: 0;
}
.cmdk-row.is-active .cmdk-row-arrow { opacity: 1; color: var(--petrol-700); }
.cmdk-empty {
  padding: 28px 18px;
  text-align: center;
  color: var(--ttb-fg-muted);
  font-size: 13px;
}
.cmdk-footer {
  display: flex; gap: 18px;
  padding: 10px 18px;
  border-top: var(--ttb-border-base);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--ttb-fg-muted);
}
.cmdk-footer kbd {
  font-family: var(--font-mono);
  font-size: 10px;
  background: var(--ttb-bg-base);
  border: 1px solid var(--ttb-border-base);
  border-radius: 3px;
  padding: 1px 4px;
  color: var(--warm-700);
  margin-right: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .mega-wrap, .nav-chev, .mega-card-arrow, .stage-go,
  .cmdk-panel, .mobile-drawer, .nav-link::before {
    transition: none !important;
  }
}

/* Hide legacy mega blocks if any remain */
.mega.mega-3, .mega.mega-2 { all: unset; }

/* Announcement bar */
.announcement {
  background: var(--petrol-800);
  color: var(--ttb-bg-base);
  border-bottom: var(--ttb-border-base);
  padding: 8px 0;
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  text-align: center;
}
.announcement .container { display: flex; justify-content: center; align-items: center; gap: 12px; }
.announcement strong { font-weight: 600; }
.announcement a { color: var(--ttb-bg-base); background: var(--ttb-accent-primary); padding: 2px 10px; text-decoration: none; font-weight: 600; }
.announcement a:hover { background: var(--petrol-100); text-decoration: none; }

/* Orbits decorative bg — for sections that use class="has-orbits" */
.has-orbits {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.has-orbits > * { position: relative; z-index: 1; }
.orbits-bg {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  mix-blend-mode: multiply;
  opacity: 0.22;
  max-width: none;
}
/* Variant: hero — orbits anchor right side, slight bleed */
.hero.has-orbits .orbits-bg {
  top: -120px;
  right: -180px;
  width: 880px;
  height: 880px;
}
@media (max-width: 760px) {
  .hero.has-orbits .orbits-bg { top: -60px; right: -240px; width: 560px; height: 560px; opacity: 0.16; }
}
/* Variant: full-bleed section — orbits centered/left */
.section-pad.has-orbits .orbits-bg {
  top: -80px;
  left: -200px;
  width: 720px;
  height: 720px;
  opacity: 0.2;
}
/* Variant: final CTA — symmetric orbits left + right, behind the centered text */
.final-cta.has-orbits .orbits-bg {
  top: -120px;
  width: 720px;
  height: 720px;
  opacity: 0.22;
}
.final-cta.has-orbits .orbits-bg.left { left: -260px; }
.final-cta.has-orbits .orbits-bg.right { right: -260px; transform: scaleX(-1); }
@media (max-width: 800px) {
  .final-cta.has-orbits .orbits-bg { width: 520px; height: 520px; opacity: 0.18; }
  .final-cta.has-orbits .orbits-bg.left { left: -360px; }
  .final-cta.has-orbits .orbits-bg.right { right: -360px; }
}

/* Variant: schedule shell — orbits behind right column */
.schedule-shell.has-orbits {
  position: relative;
  isolation: isolate;
}
.schedule-shell.has-orbits .orbits-bg {
  top: -40px;
  right: -160px;
  width: 640px;
  height: 640px;
  opacity: 0.22;
}

/* Hero */
.hero {
  padding: 96px 0 72px;
  background: var(--ttb-bg-base);
  border-bottom: none;
  text-align: center;
}
.hero .container > * { max-width: 920px; margin-left: auto; margin-right: auto; }
.hero-grid { background: var(--ttb-bg-base); }
.hero-inner { max-width: 920px; margin: 0 auto; }
.hero h1 { margin-top: 24px; }
.hero .lead { margin-top: 28px; max-width: 720px; margin-left: auto; margin-right: auto; }
.hero-ctas { display: flex; gap: 16px; margin-top: 40px; flex-wrap: wrap; justify-content: center; }
.hero-meta { display: flex; gap: 24px; margin-top: 36px; flex-wrap: wrap; align-items: center; justify-content: center; font-family: var(--font-body); font-size: 0.85rem; font-weight: 500; color: var(--ttb-fg-muted); }
.hero-meta .sep { width: 3px; height: 3px; border-radius: 50%; background: var(--ttb-fg-muted); }

/* Section header */
.section-header { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section-header.left { text-align: left; margin-left: 0; }
.section-header h2 { margin-top: 16px; }
.section-header p { margin-top: 16px; color: var(--warm-600); font-size: 1.1rem; }

/* Logo strip */
.logo-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0;
  border-top: var(--ttb-border-base);
  border-bottom: var(--ttb-border-base);
  background: transparent;
  box-shadow: none;
}
.logo-strip > div {
  flex: 1 1 140px;
  padding: 28px 16px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ttb-fg-muted);
  border-right: var(--ttb-border-base);
}
.logo-strip > div:last-child { border-right: none; }

/* Stats — single row with hairline dividers */
.impact-stats, .stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: var(--ttb-border-base);
  border-bottom: var(--ttb-border-base);
  background: transparent;
  box-shadow: none;
}
.stat-item, .case-stat {
  padding: 32px 24px;
  border-right: var(--ttb-border-base);
  text-align: center;
}
.stat-item:last-child, .case-stat:last-child { border-right: none; }
.stat-item:nth-child(2), .case-stat:nth-child(2) { background: transparent; }
.stat-num {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.4rem, 4vw, 3.5rem);
  font-weight: 400;
  color: var(--ttb-accent-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}
.stat-label {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  text-transform: none;
  color: var(--warm-600);
  letter-spacing: 0;
  margin-top: 12px;
}
@media (max-width: 800px) {
  .impact-stats, .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .stat-item:nth-child(odd), .case-stat:nth-child(odd) { background: transparent; }
  .stat-item:nth-child(even), .case-stat:nth-child(even) { background: transparent; }
}

/* Statement / painted banner — bone w/ italic serif */
.statement {
  background: var(--ttb-bg-subtle);
  border-top: var(--ttb-border-base);
  border-bottom: var(--ttb-border-base);
  padding: 96px 0;
  color: var(--ttb-fg-base);
  text-align: center;
}
.statement h2 {
  color: var(--ttb-fg-base);
  font-size: clamp(2rem, 3vw + 1rem, 3.5rem);
  max-width: 920px;
  margin: 0 auto;
}
.statement .grad { color: var(--ttb-accent-primary); font-style: italic; background: none; }

/* Solutions / pillars / generic 3-up */
.three-up {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 900px) {
  .three-up { grid-template-columns: 1fr; }
  .two-up { grid-template-columns: 1fr; }
}

.solution-card { background: var(--ttb-bg-surface); }
.solution-card:nth-child(2) { background: var(--ttb-bg-surface); }
.solution-card .icon-mono {
  width: 40px; height: 40px;
  border: var(--ttb-border-base);
  display: grid; place-items: center;
  font-family: var(--font-body);
  font-weight: 600;
  background: var(--ttb-bg-subtle);
  margin-bottom: 20px;
  box-shadow: none;
  border-radius: 50%;
}

/* Solutions table-like list */
.solutions-list { display: flex; flex-direction: column; gap: 0; border-top: var(--ttb-border-base); border-bottom: var(--ttb-border-base); background: transparent; box-shadow: none; }
.solution-row {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 24px;
  padding: 28px 8px;
  align-items: center;
  border-bottom: var(--ttb-border-base);
}
.solution-row:last-child { border-bottom: none; }
.solution-row:nth-child(even) { background: transparent; }
.solution-row h4 { font-family: var(--font-body); }
.solution-row p { color: var(--warm-600); margin-top: 6px; }
@media (max-width: 800px) {
  .solution-row { grid-template-columns: 1fr; }
}

/* Trust framework / maturity stages */
.maturity {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.maturity-stage {
  background: var(--ttb-bg-surface);
  border: var(--ttb-border-base);
  border-radius: var(--r-md);
  padding: 32px;
  box-shadow: var(--shadow-sm);
}
.maturity-stage:nth-child(2) { background: var(--ttb-bg-surface); }
.maturity-stage:nth-child(3) { background: var(--ttb-bg-surface); color: var(--ttb-fg-base); }
.maturity-stage:nth-child(3) h3, .maturity-stage:nth-child(3) h4, .maturity-stage:nth-child(3) .maturity-num { color: var(--ttb-fg-base); }
.maturity-stage:nth-child(3) ul li { color: var(--warm-600); border-color: var(--ttb-fg-base); }
.maturity-num {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ttb-accent-primary);
  margin-bottom: 16px;
}
.maturity-stage h3, .maturity-stage h4 { margin-bottom: 12px; font-size: 1.4rem; font-family: var(--font-display); font-weight: 400; }
.maturity-stage p { color: var(--warm-600); margin-bottom: 20px; }
.maturity-stage:nth-child(3) p { color: var(--warm-600); }
.maturity-stage ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0; }
.maturity-stage ul li {
  font-size: 0.92rem;
  color: var(--warm-600);
  padding: 10px 0;
  border-top: var(--ttb-border-base);
  font-weight: 400;
}
@media (max-width: 900px) { .maturity { grid-template-columns: 1fr; } }

/* Resources / blog cards */
.list-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .list-grid { grid-template-columns: 1fr; } }
.resource-card {
  background: var(--ttb-bg-surface);
  border: var(--ttb-border-base);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: transform var(--motion-base) var(--ease), box-shadow var(--motion-base) var(--ease);
}
.resource-card:hover { transform: translate(1px, 1px); box-shadow: var(--shadow-xs); text-decoration: none; }
.resource-card.is-disabled { cursor: default; }
.resource-card.is-disabled:hover { transform: none; box-shadow: none; }
.resource-card .btn-ghost[disabled] { margin-top: auto; opacity: 0.55; cursor: not-allowed; pointer-events: none; }
.resource-cover {
  aspect-ratio: 16 / 9;
  background: var(--ttb-bg-subtle);
  border-bottom: var(--ttb-border-base);
  display: grid;
  place-items: center;
  position: relative;
}
.resource-card:nth-child(3n+2) .resource-cover { background: var(--petrol-100); }
.resource-card:nth-child(3n) .resource-cover { background: var(--amber-100); }
.cover-mono {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--ttb-fg-base);
  border: var(--ttb-border-base);
  background: var(--ttb-bg-base);
  padding: 4px 10px;
  border-radius: 999px;
}
.resource-body { padding: 24px; display: flex; flex-direction: column; gap: 8px; }
.resource-meta {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ttb-fg-muted);
}
.resource-card h4 { margin-top: 4px; font-family: var(--font-display); font-weight: 400; font-size: 1.3rem; line-height: 1.2; }
.resource-body p { color: var(--warm-600); font-size: 0.95rem; }
.resource-body a:last-child {
  margin-top: auto;
  padding-top: 16px;
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: none;
  font-size: 0.92rem;
  color: var(--ttb-accent-primary);
}
.resource-body .read-link {
  margin-top: auto;
  padding-top: 16px;
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: none;
  font-size: 0.92rem;
  color: var(--ttb-accent-primary);
  display: inline-block;
}


/* Forms */
input, textarea, select {
  font-family: var(--font-body);
  font-size: 0.95rem;
  width: 100%;
  padding: 12px 14px;
  background: var(--ttb-bg-surface);
  border: var(--ttb-border-base);
  border-radius: var(--r-md);
  color: var(--ttb-fg-base);
  box-shadow: none;
  transition: border-color var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--ttb-accent-primary);
  box-shadow: 0 0 0 2px rgba(14, 110, 122, 0.15);
}
input::placeholder, textarea::placeholder { color: var(--ttb-fg-muted); }
label {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ttb-fg-base);
  display: block;
  margin-bottom: 6px;
}
.form-grid { display: flex; flex-direction: column; gap: 20px; }
.form-grid .row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 700px) { .form-grid .row-2 { grid-template-columns: 1fr; } }

.inline-form { display: grid; grid-template-columns: 1fr 1.2fr; gap: 64px; align-items: start; }
@media (max-width: 900px) { .inline-form { grid-template-columns: 1fr; gap: 32px; } }

/* Schedule page */
.schedule-shell { display: grid; grid-template-columns: 1fr 1.5fr; gap: 48px; align-items: start; }
@media (max-width: 1000px) { .schedule-shell { grid-template-columns: 1fr; } }
.schedule-side h2 { margin-top: 16px; }
.schedule-side p { color: var(--warm-600); margin-top: 16px; }
.schedule-meta { list-style: none; padding: 0; margin: 24px 0 0; display: flex; flex-direction: column; gap: 12px; }
.schedule-meta li { display: flex; gap: 12px; align-items: center; font-size: 0.95rem; color: var(--warm-600); }
.schedule-meta .check {
  width: 22px; height: 22px;
  border: var(--ttb-border-base);
  background: var(--petrol-100);
  display: grid; place-items: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  color: var(--ttb-fg-base);
  flex-shrink: 0;
  border-radius: 50%;
}
.schedule-trust { margin-top: 32px; }
.schedule-trust .row { display: flex; flex-wrap: wrap; gap: 8px; }
.schedule-trust .row span {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  text-transform: none;
  border: var(--ttb-border-base);
  padding: 4px 10px;
  background: var(--ttb-bg-surface);
  border-radius: 999px;
}

.schedule-embed {
  background: var(--ttb-bg-surface);
  border: var(--ttb-border-base);
  border-radius: var(--r-md);
  padding: 28px;
  box-shadow: var(--shadow-sm);
}
.cal-mock { display: grid; grid-template-columns: 1.4fr 1fr; gap: 20px; }
@media (max-width: 800px) { .cal-mock { grid-template-columns: 1fr; } }
.cal-cal { border: var(--ttb-border-base); padding: 16px; background: var(--ttb-bg-base); border-radius: var(--r-md); }
.cal-month { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; font-family: var(--font-body); font-weight: 600; }
.cal-arrows button {
  background: var(--ttb-bg-surface); border: var(--ttb-border-base);
  width: 28px; height: 28px;
  font-weight: 500;
  margin-left: 4px;
  border-radius: 50%;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; font-family: var(--font-body); font-size: 0.85rem; }
.cal-grid .day-h { font-weight: 600; text-align: center; padding: 4px; color: var(--ttb-fg-muted); }
.cal-grid .day {
  text-align: center; padding: 8px 0;
  border: 1px solid transparent;
  background: var(--ttb-bg-surface);
  font-weight: 400;
  border-radius: var(--r-sm);
}
.cal-grid .day.dim { color: var(--ttb-fg-muted); background: transparent; }
.cal-grid .day.avail { border: var(--ttb-border-base); cursor: pointer; }
.cal-grid .day.sel { background: var(--ttb-accent-primary); color: var(--ttb-bg-surface); border: var(--ttb-border-base); font-weight: 600; }
.cal-times { display: flex; flex-direction: column; gap: 8px; }
.time-h { font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: none; margin-bottom: 4px; color: var(--ttb-fg-base); }
.cal-time {
  border: var(--ttb-border-base);
  background: var(--ttb-bg-surface);
  padding: 10px 12px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--r-md);
  transition: background var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.cal-time:hover { background: var(--ttb-bg-subtle); border-color: var(--ttb-accent-primary); }
.cal-time.sel { background: var(--ttb-accent-primary); color: var(--ttb-bg-surface); border-color: var(--ttb-accent-primary); }

/* Founder + team */
.founder { display: grid; grid-template-columns: 1fr 1.5fr; gap: 56px; align-items: start; }
@media (max-width: 900px) { .founder { grid-template-columns: 1fr; gap: 32px; } }
.founder-photo {
  aspect-ratio: 4 / 5;
  background: var(--ttb-accent-primary);
  border: var(--ttb-border-base);
  box-shadow: var(--shadow-sm);
  position: relative;
  display: grid;
  place-items: end start;
  padding: 20px;
  border-radius: var(--r-md);
}
.founder-photo .ph-label {
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ttb-bg-surface);
  background: var(--petrol-800);
  padding: 4px 10px;
  border-radius: 999px;
}
.founder-text p { font-size: 1.05rem; color: var(--warm-600); margin-bottom: 18px; line-height: 1.7; }
.signature { font-family: var(--font-display); font-style: italic; font-weight: 400; color: var(--ttb-fg-base); margin-top: 16px; font-size: 1.15rem; }

.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
.team-card {
  background: var(--ttb-bg-surface);
  border: var(--ttb-border-base);
  padding: 20px;
  box-shadow: var(--shadow-sm);
  border-radius: var(--r-md);
}
.team-card:nth-child(3n+2) { background: var(--ttb-bg-surface); }
.team-card:nth-child(3n) { background: var(--ttb-bg-surface); }
.team-photo {
  aspect-ratio: 1 / 1;
  background: var(--ttb-bg-subtle);
  color: var(--ttb-fg-base);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 2rem;
  margin-bottom: 16px;
  border: var(--ttb-border-base);
  border-radius: 50%;
}
.team-name { font-family: var(--font-body); font-weight: 600; color: var(--ttb-fg-base); }
.team-role { font-family: var(--font-body); font-size: 0.82rem; color: var(--ttb-fg-muted); font-weight: 400; text-transform: none; letter-spacing: 0; margin-top: 4px; }

/* Values grid */
.values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
@media (max-width: 900px) { .values-grid { grid-template-columns: repeat(2, 1fr); } }

/* LATAM map */
.latam-map { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
@media (max-width: 900px) { .latam-map { grid-template-columns: 1fr; } }
.map-region { list-style: none; padding: 0; margin-top: 24px; }
.map-region li {
  display: flex; justify-content: space-between;
  padding: 14px 0;
  border-bottom: var(--ttb-border-base);
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--ttb-fg-base);
}
.map-region li span { color: var(--ttb-fg-muted); font-family: var(--font-body); font-weight: 400; font-size: 0.9rem; }
.latam-visual {
  aspect-ratio: 1 / 1;
  background: var(--petrol-100);
  border: var(--ttb-border-base);
  box-shadow: var(--shadow-sm);
  border-radius: var(--r-md);
  background-image: none;
}

/* Press logos */
.press-logos {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border-top: var(--ttb-border-base);
  border-bottom: var(--ttb-border-base);
  background: transparent;
}
.press-logos .pl {
  padding: 28px 16px;
  text-align: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ttb-fg-muted);
  border-right: var(--ttb-border-base);
}
.press-logos .pl:last-child { border-right: none; }
@media (max-width: 800px) { .press-logos { grid-template-columns: repeat(3, 1fr); } .press-logos .pl:nth-child(3) { border-right: none; } .press-logos .pl:nth-child(-n+3) { border-bottom: var(--ttb-border-base); } }

/* Careers row */
.career-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1.4fr auto;
  gap: 20px;
  align-items: center;
  padding: 20px 24px;
  background: var(--ttb-bg-surface);
  border: var(--ttb-border-base);
  box-shadow: var(--shadow-sm);
  margin-bottom: 12px;
  border-radius: var(--r-md);
  transition: transform var(--motion-fast) var(--ease), box-shadow var(--motion-fast) var(--ease);
}
.career-row:hover { transform: translate(1px, 1px); box-shadow: var(--shadow-xs); }
.career-row .role { font-family: var(--font-body); font-weight: 600; font-size: 1.05rem; color: var(--ttb-fg-base); }
.meta-mono { font-family: var(--font-body); font-size: 0.82rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ttb-fg-muted); }
@media (max-width: 800px) { .career-row { grid-template-columns: 1fr; } }

/* Article */
.article-hero {
  max-width: 820px;
  margin: 0 auto;
  padding: 80px 32px 40px;
}
.article-hero h1 {
  text-transform: none;
  font-size: clamp(2.25rem, 3vw + 1rem, 3.75rem);
  margin-top: 24px;
}
.article-hero .meta {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ttb-fg-base);
  background: transparent;
  padding: 0;
  border: none;
  display: inline-block;
  color: var(--ttb-fg-muted);
}
.article-hero .lead { margin-top: 24px; }
.article-cover {
  aspect-ratio: 16 / 9;
  background: var(--petrol-100);
  border: var(--ttb-border-base);
  box-shadow: var(--shadow-sm);
  background-image: none;
  border-radius: var(--r-md);
}
.article-body {
  max-width: 720px;
  margin: 64px auto 0;
  padding: 0 32px;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--warm-600);
}
.article-body h2 { margin: 48px 0 16px; text-transform: none; font-size: 1.85rem; font-family: var(--font-display); font-weight: 400; }
.article-body p { margin: 0 0 20px; }
.article-body ul { margin: 0 0 24px 0; padding-left: 1.2rem; }
.article-body li { margin-bottom: 8px; }
.article-body code { font-family: var(--font-mono); background: var(--ttb-bg-subtle); border: var(--ttb-border-base); padding: 2px 8px; font-size: 0.9em; font-weight: 500; border-radius: var(--r-sm); }
.article-body blockquote {
  margin: 32px 0;
  padding: 24px 28px;
  background: transparent;
  border: none;
  border-left: 3px solid var(--ttb-accent-primary);
  box-shadow: none;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.4rem;
  color: var(--ttb-fg-base);
  line-height: 1.4;
}

/* Case study */
.case-hero {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 56px;
  padding: 80px 0 40px;
  align-items: end;
}
@media (max-width: 900px) { .case-hero { grid-template-columns: 1fr; gap: 32px; } }
.case-meta {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--ttb-fg-muted);
  background: transparent;
  padding: 0;
  border: none;
  display: inline-block;
  margin-bottom: 16px;
}
.case-hero h1 { text-transform: none; font-size: clamp(2.25rem, 3vw + 1rem, 3.75rem); }
.testimonial-meta { display: flex; align-items: center; gap: 16px; margin-top: 20px; }
.testimonial-meta > div:last-child { flex: 1; min-width: 0; }
.testimonial-meta .avatar {
  width: 44px; height: 44px;
  background: var(--ttb-accent-primary);
  color: var(--ttb-bg-surface);
  border: var(--ttb-border-base);
  display: grid; place-items: center;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  border-radius: 50%;
}
.testimonial-meta .name { font-family: var(--font-body); font-weight: 600; color: var(--ttb-fg-base); }
.testimonial-meta .role { font-family: var(--font-body); font-size: 0.82rem; color: var(--ttb-fg-muted); font-weight: 400; text-transform: none; }

/* Featured testimonial (homepage) — two-column quote + side stats */
.testimonial-large {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 56px;
  align-items: start;
  padding: 56px 0 24px;
  border-top: var(--ttb-border-base);
}
.testimonial-large > div:first-child .eyebrow {
  display: inline-block;
  margin-bottom: 24px;
  white-space: nowrap;
}
.testimonial-large blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(1.5rem, 2vw + 0.5rem, 2.1rem);
  line-height: 1.25;
  color: var(--ttb-fg-base);
  margin: 0 0 24px;
  text-wrap: pretty;
}
.testimonial-side {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 32px;
}
.testimonial-side .logo-mark {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ttb-fg-muted);
  margin-bottom: 8px;
}
.testimonial-side .stat {
  font-family: var(--font-display);
  font-style: italic;
  font-size: clamp(2.4rem, 3vw + 1rem, 3.4rem);
  font-weight: 400;
  color: var(--petrol-700);
  line-height: 1;
  letter-spacing: -0.02em;
}
.testimonial-side .stat-label {
  font-family: var(--font-body);
  font-size: 0.88rem;
  color: var(--ttb-fg-subtle);
  margin-top: 6px;
}
@media (max-width: 900px) {
  .testimonial-large {
    grid-template-columns: 1fr;
    gap: 36px;
    padding: 40px 0 16px;
  }
  .testimonial-side { padding-top: 0; }
}

/* Testimonials */
.testimonials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .testimonials-grid { grid-template-columns: 1fr; } }
.testimonial-card {
  background: var(--ttb-bg-surface);
  border: var(--ttb-border-base);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  border-radius: var(--r-md);
}
.testimonial-card:nth-child(2) { background: var(--ttb-bg-surface); }
.testimonial-card:nth-child(3) { background: var(--ttb-bg-surface); }
.testimonial-card blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.25rem;
  color: var(--ttb-fg-base);
  line-height: 1.4;
  margin: 0 0 24px;
}

/* Final CTA / footer-band */
.final-cta {
  background: var(--ttb-bg-subtle);
  border-top: var(--ttb-border-base);
  border-bottom: var(--ttb-border-base);
  padding: 96px 0;
  text-align: center;
}
.final-cta-inner { display: flex; flex-direction: column; align-items: center; gap: 32px; max-width: 720px; margin: 0 auto; }
.final-cta h2 { color: var(--ttb-fg-base); }
.final-cta p { color: var(--warm-600); margin-top: 16px; font-size: 1.1rem; max-width: 580px; }
.final-cta-inner > div:last-child { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }

/* Footer — graphite, inverted text, hairline borders */
.site-footer {
  background: var(--petrol-800);
  color: #FAFAFA;
  border-top: 1px solid var(--petrol-800);
  padding: 80px 0 40px;
}
.footer-grid { display: grid; grid-template-columns: 1.2fr repeat(4, 1fr); gap: 48px; margin-bottom: 64px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
.footer-grid h5 { color: #FAFAFA; margin-bottom: 16px; font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; letter-spacing: 0; text-transform: none; }
.footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer-col a { color: rgba(250, 250, 250, 0.72); font-size: 0.92rem; opacity: 1; }
.footer-col a:hover { color: #FAFAFA; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.footer-brand p { color: rgba(250, 250, 250, 0.72); opacity: 1; margin-top: 16px; font-size: 0.92rem; line-height: 1.5; }
.footer-brand .brand { font-size: 2rem; font-weight: 800; }
.footer-brand .brand-name { color: #FAFAFA; }
.footer-brand .brand-name span { color: rgba(250, 250, 250, 0.55); }
.footer-bottom {
  padding-top: 32px;
  border-top: 1px solid rgba(250, 250, 250, 0.12);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--font-body);
  font-size: 0.85rem;
  color: rgba(250, 250, 250, 0.55);
  opacity: 1;
  text-transform: none;
  letter-spacing: 0;
}
.footer-bottom a { color: rgba(250, 250, 250, 0.55); }
.footer-bottom a:hover { color: #FAFAFA; }

/* Skip link */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--ttb-accent-primary);
  color: var(--ttb-bg-surface);
  padding: 10px 16px;
  border: var(--ttb-border-base);
  font-family: var(--font-body);
  font-weight: 500;
  text-transform: none;
  font-size: 0.92rem;
  z-index: 100;
  border-radius: var(--r-md);
}
.skip-link:focus { left: 12px; }

/* Legal pages */
.legal-page { max-width: 760px; margin: 0 auto; padding: 80px 32px 96px; }
.legal-page h1 { text-transform: none; font-size: clamp(2rem, 3vw + 1rem, 3rem); margin-bottom: 16px; }
.legal-page .meta { font-family: var(--font-body); font-size: 0.85rem; color: var(--ttb-fg-muted); padding-bottom: 24px; border-bottom: var(--ttb-border-base); margin-bottom: 32px; font-weight: 500; }
.legal-page h2 { font-size: 1.5rem; margin: 40px 0 12px; text-transform: none; font-family: var(--font-display); font-weight: 400; }
.legal-page p { color: var(--warm-600); margin-bottom: 16px; line-height: 1.7; }

/* Section alternation — even sections get warm-50 tint */
section.section-pad:nth-of-type(even),
section.section-pad-sm:nth-of-type(even) {
  background: var(--ttb-bg-subtle);
}
.section-divider { border-top: var(--ttb-border-base); }

/* Reduced motion + high contrast */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .btn:hover, .card:hover, .resource-card:hover, .career-row:hover { transform: none; }
}
@media (prefers-contrast: more) {
  :root { --border-hair: 1.5px solid var(--ttb-fg-base); --border-thin: 2px solid var(--ttb-fg-base); }
}
@media (max-width: 768px) {
  :root { --shadow-md: 2px 2px 0 0 var(--ttb-fg-base); --shadow-lg: 3px 3px 0 0 var(--ttb-fg-base); }
}

.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ============================================================
   Page-specific (modular blocks, stage heroes, framework, two-col, pricing, faq)
   ============================================================ */

.hero-diagram { display: none; }

.modular-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
  padding: 96px 0;
  border-bottom: var(--ttb-border-base);
}
.modular-block:last-child { border-bottom: none; }
.modular-block.reverse .modular-text { order: 2; }
.modular-text h3 { margin: 16px 0 16px; text-transform: none; font-family: var(--font-display); font-weight: 400; font-size: 2rem; }
.modular-text p.lead { font-size: 1.1rem; margin-bottom: 24px; color: var(--warm-600); }
.modular-bullets { list-style: none; padding: 0; margin: 24px 0 32px; display: flex; flex-direction: column; }
.modular-bullets li {
  display: flex; gap: 12px; align-items: flex-start;
  color: var(--warm-600);
  font-size: 0.98rem;
  font-weight: 400;
  padding: 12px 0;
  border-top: var(--ttb-border-base);
  line-height: 1.5;
}
.modular-bullets li:last-child { border-bottom: var(--ttb-border-base); }
.modular-bullets li::before {
  content: "→";
  flex: 0 0 auto;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--ttb-accent-primary);
  width: 20px;
}
.modular-visual {
  background: var(--ttb-bg-surface);
  border: var(--ttb-border-base);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-sm);
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.modular-block:nth-child(odd) .modular-visual { background: var(--petrol-100); }
.modular-block:nth-child(even) .modular-visual { background: var(--ttb-bg-subtle); }
.modular-block:nth-child(4n) .modular-visual { background: var(--amber-100); }
.modular-visual .card { background: var(--ttb-bg-surface); border: var(--ttb-border-base); box-shadow: var(--shadow-xs); padding: 12px 14px !important; margin-bottom: 0; border-radius: var(--r-sm); }
.modular-visual .card:hover { transform: none; box-shadow: var(--shadow-xs); }
.modular-visual [style*="color:var(--ttb-accent-primary)"], .modular-visual [style*="color: var(--ttb-accent-primary)"] { color: var(--ttb-fg-base) !important; font-weight: 500; }
.modular-visual [style*="color:var(--ttb-fg-muted)"], .modular-visual [style*="color: var(--ttb-fg-muted)"] { color: var(--warm-600) !important; }
.modular-visual [style*="color:var(--ttb-fg-muted)"], .modular-visual [style*="color: var(--ttb-fg-muted)"] { color: var(--ttb-fg-base) !important; font-weight: 500; }
.modular-visual [style*="color:var(--ttb-accent-primary)"], .modular-visual [style*="color: var(--ttb-accent-primary)"] { color: var(--ttb-accent-primary) !important; font-weight: 500; }
.modular-visual [style*="color:var(--ttb-warning)"], .modular-visual [style*="color: var(--ttb-warning)"] { color: var(--ttb-accent-primary) !important; }
@media (max-width: 900px) { .modular-block { grid-template-columns: 1fr; gap: 32px; padding: 48px 0; } .modular-block.reverse .modular-text { order: initial; } }

.stage-hero { background: var(--ttb-bg-subtle); border-bottom: var(--ttb-border-base); padding: 80px 0; text-align: center; }
.stage-hero.growth { background: var(--petrol-100); }
.stage-hero.enterprise { background: var(--amber-100); color: var(--ttb-fg-base); }
.stage-hero.enterprise h1, .stage-hero.enterprise h2 { color: var(--ttb-fg-base); }

.framework-hero { display: grid; grid-template-columns: 1.4fr 1fr; gap: 56px; padding: 80px 0; align-items: center; border-bottom: var(--ttb-border-base); }
@media (max-width: 900px) { .framework-hero { grid-template-columns: 1fr; } }

.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
@media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } }

.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }
.pricing-card { background: var(--ttb-bg-surface); border: var(--ttb-border-base); padding: 32px; box-shadow: var(--shadow-sm); border-radius: var(--r-md); }
.pricing-card.featured { background: var(--ttb-bg-subtle); }
.pricing-card .price { font-family: var(--font-display); font-style: italic; font-size: 3rem; font-weight: 400; color: var(--ttb-accent-primary); margin: 16px 0; line-height: 1; }
.pricing-card .price-suffix { font-family: var(--font-body); font-size: 0.85rem; font-weight: 400; color: var(--ttb-fg-muted); }

.faq-list details { border: var(--ttb-border-base); background: var(--ttb-bg-surface); margin-bottom: 8px; box-shadow: none; border-radius: var(--r-md); }
.faq-list summary { padding: 18px 22px; font-family: var(--font-body); font-weight: 500; font-size: 1.05rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; }
.faq-list summary::after { content: "+"; font-size: 1.3rem; font-weight: 400; color: var(--ttb-accent-primary); }
.faq-list details[open] summary::after { content: "−"; }
.faq-list details p { padding: 0 22px 20px; color: var(--warm-600); }

/* "Get a demo" alice-style hard-shadow CTA */
.btn-demo { background: var(--ttb-accent-primary); color: var(--ttb-bg-surface); border: var(--ttb-border-base); box-shadow: 3px 3px 0 0 var(--ttb-fg-base); padding: 10px 24px; border-radius: 0; font-weight: 500; text-transform: none; font-size: 0.95rem; }
.btn-demo:hover { background: var(--petrol-800); transform: translate(1px, 1px); box-shadow: 1px 1px 0 0 var(--ttb-fg-base); }

/* Header CTA override — soft blue */
.btn.header-cta { background: #a3c9d9; color: var(--ttb-fg-base); border: 1px solid #a3c9d9; }
.btn.header-cta:hover { background: var(--petrol-700); color: var(--ttb-bg-surface); border-color: var(--petrol-700); }

/* Header actions — equal-height controls (lang switcher matches CTA) */
.header-actions .lang-trigger,
.header-actions .btn.header-cta {
  height: 42px;
  box-sizing: border-box;
  padding-top: 0;
  padding-bottom: 0;
}
.header-actions .lang-trigger { padding-left: 14px; padding-right: 14px; }
.header-actions .btn.header-cta { padding-left: 22px; padding-right: 22px; }


/* ============================================================
   Hero — split layout (text left, isometric visual right)
   ============================================================ */
.hero-split { padding: 32px 0 40px; background: var(--ttb-bg-base); text-align: left; border-bottom: 0; overflow: visible; }
.hero-split .container > * { max-width: none; margin: 0; }
.hero-split-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; overflow: visible; }
@media (max-width: 980px) { .hero-split-grid { grid-template-columns: 1fr; gap: 32px; } }

.hero-copy h1 { margin-top: 16px; text-align: left; max-width: 22ch; line-height: 1.05; }
.hero-copy .lead { margin-top: 16px; max-width: 48ch; text-align: left; margin-left: 0; margin-right: 0; font-size: 1rem; line-height: 1.5; }
.hero-copy .hero-ctas { justify-content: flex-start; margin-top: 22px; }

.hero-rating {
  display: inline-flex; align-items: center; gap: 12px;
  text-decoration: none; color: inherit;
  padding: 0; border: none; background: transparent;
}
.hero-rating-shield {
  width: 48px; height: 58px;
  display: block; flex: 0 0 48px;
  filter: drop-shadow(0 2px 4px rgba(15, 48, 56, 0.12));
}
.hero-rating-meta { display: flex; flex-direction: column; gap: 2px; }
.hero-rating-score {
  font-family: var(--font-body); font-size: 0.82rem; font-weight: 600;
  color: var(--ttb-fg-base); letter-spacing: -0.005em;
}
.hero-rating-label {
  font-family: var(--font-mono); font-size: 0.64rem; font-weight: 400;
  color: var(--ttb-fg-muted); letter-spacing: 0.06em; text-transform: uppercase;
}
.hero-rating:hover .hero-rating-score { color: var(--ttb-accent-primary); }

.hero-visual {
  position: relative;
  background: var(--ttb-bg-base);
  border-radius: var(--r-lg, 12px);
  min-height: 480px;
  display: flex; align-items: center; justify-content: center;
}
.hero-iso { width: 100%; height: auto; max-width: 560px; display: block; }
.hero-shield-hero {
  width: 100%; height: auto; max-width: 480px; display: block;
  filter: drop-shadow(0 8px 24px rgba(15, 48, 56, 0.06));
}
@media (max-width: 980px) { .hero-shield-hero { max-width: 360px; margin: 0 auto; } }

/* Hero orbit — animated rings around shield */
.hero-visual { overflow: visible; background: transparent; min-height: 0; padding-top: 0; }
.hero-orbit {
  position: relative;
  width: 100%;
  max-width: 600px;
  height: 440px;
  margin: 0 auto;
  z-index: 1;
}
.hero-octonaut {
  position: absolute;
  top: 50%;
  left: -40px;
  transform: translateY(-50%);
  width: 240px;
  height: auto;
  z-index: 5;
  pointer-events: none;
  user-select: none;
  filter: drop-shadow(0 12px 24px rgba(48, 118, 136, 0.18)) drop-shadow(0 4px 8px rgba(48, 118, 136, 0.10));
  animation: hero-octonaut-float 4s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes hero-octonaut-float {
  0%   { transform: translateY(calc(-50% - 8px)); }
  100% { transform: translateY(calc(-50% + 8px)); }
}
@media (max-width: 980px) {
  .hero-octonaut { width: 180px; left: 0; }
}
@media (max-width: 660px) {
  .hero-octonaut { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-octonaut { animation: none !important; transform: translateY(-50%); }
}
.hero-orbit-sides {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(1.15);
  width: 490px; height: 230px;
  z-index: 1; pointer-events: none;
}
.hero-orbit-circles {
  position: relative;
  width: 440px; height: 440px;
  margin: 0 auto;
}
.hero-orbit-circle {
  position: absolute; top: 0; left: 0;
  width: 440px; height: 440px;
  animation: hero-orbit-spin 1s linear infinite;
  will-change: transform;
}
.hero-orbit-circle:nth-child(1)  { animation-duration: 36s; }
.hero-orbit-circle:nth-child(2)  { animation-duration: 48s; animation-direction: reverse; }
.hero-orbit-circle:nth-child(3)  { animation-duration: 60s; }
.hero-orbit-circle:nth-child(4)  { animation-duration: 72s; animation-direction: reverse; }
.hero-orbit-circle:nth-child(5)  { animation-duration: 84s; }
.hero-orbit-circle:nth-child(6)  { animation-duration: 96s; animation-direction: reverse; }
.hero-orbit-circle:nth-child(7)  { animation-duration: 108s; }
.hero-orbit-circle:nth-child(8)  { animation-duration: 120s; animation-direction: reverse; }
.hero-orbit-circle:nth-child(9)  { animation-duration: 132s; }
.hero-orbit-circle:nth-child(10) { animation-duration: 144s; animation-direction: reverse; }
@keyframes hero-orbit-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.hero-orbit-center {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 230px; height: auto;
  z-index: 10;
  user-select: none; pointer-events: none;
  filter: drop-shadow(0 12px 24px rgba(48, 118, 136, 0.18)) drop-shadow(0 4px 8px rgba(48, 118, 136, 0.10));
}
@media (max-width: 980px) {
  .hero-orbit { max-width: 366px; height: 320px; }
  .hero-orbit-circles { transform: scale(0.85); transform-origin: center; }
  .hero-orbit-sides { transform: translate(-50%, -50%) scale(0.85); }
  .hero-orbit-center { width: 161px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-orbit-circle { animation: none !important; }
}

/* ISO HERO VIZ — 3-stage Trust Framework, Workstreet-inspired */
.hero-iso {
  position: relative;
  width: 100%;
  max-width: 560px;
  aspect-ratio: 7 / 6;
  margin: 0 auto;
}
.hero-iso-svg {
  width: 100%;
  height: 100%;
  display: block;
  filter: drop-shadow(0 8px 18px rgba(48, 118, 136, 0.12));
}
.iso-label {
  position: absolute;
  font-family: var(--font-body, system-ui, sans-serif);
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--ttb-fg-base, #1E1715);
  letter-spacing: 0.01em;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.iso-label strong {
  font-weight: 600;
  color: var(--ttb-fg-base, #1E1715);
}
.iso-label .iso-bar {
  display: inline-block;
  height: 4px;
  background: var(--ttb-fg-muted, #8a8783);
  opacity: 0.35;
  border-radius: 2px;
  width: 90px;
}
.iso-label .iso-bar:nth-child(odd) { width: 70px; }
.iso-label-1 { left: 4%; bottom: 12%; max-width: 140px; }
.iso-label-2 { left: 36%; top: 56%; max-width: 140px; }
.iso-label-3 { right: 2%; top: 6%; max-width: 160px; text-align: left; }
.iso-label-3 strong { color: var(--ttb-accent-primary, #307688); }
@media (max-width: 980px) {
  .hero-iso { max-width: 420px; }
  .iso-label { font-size: 0.72rem; }
  .iso-label .iso-bar { width: 70px; }
  .iso-label-1 { max-width: 110px; }
  .iso-label-2 { max-width: 110px; }
  .iso-label-3 { max-width: 130px; }
}

/* HERO LOGOS — compact trusted-by strip directly under hero (Workstreet pattern) */
.hero-logos {
  background: var(--ttb-bg-base, #FAF8F4);
  padding: 20px 0 24px;
  border-top: 1px solid var(--ttb-border-subtle, #E0DCD7);
  border-bottom: 1px solid var(--ttb-border-subtle, #E0DCD7);
}
.hero-logos-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: nowrap;
}
.hero-logos-label {
  font-family: var(--font-mono, monospace);
  font-size: 0.66rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ttb-fg-muted, #8a8783);
  white-space: nowrap;
  flex-shrink: 0;
}
.hero-logos-track {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: nowrap;
  flex: 1;
  overflow: hidden;
}
.hero-logos-item {
  font-family: var(--font-display, Fraunces, serif);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ttb-fg-subtle, #4a4540);
  opacity: 0.7;
  transition: opacity var(--motion-fast, 160ms) var(--ease, ease);
  white-space: nowrap;
}
.hero-logos-item:hover { opacity: 1; }
.hero-logos-dot {
  color: var(--ttb-fg-muted, #8a8783);
  opacity: 0.4;
  user-select: none;
}
@media (max-width: 720px) {
  .hero-logos-row { gap: 12px; }
  .hero-logos-track { gap: 12px; }
  .hero-logos-item { font-size: 0.92rem; }
}

.hero-shield-emblem {
  position: absolute;
  top: 8%; left: 8%;
  width: 96px; height: 96px;
  z-index: 2;
  filter: drop-shadow(0 4px 8px rgba(15, 48, 56, 0.08));
}
@media (max-width: 980px) {
  .hero-shield-emblem { width: 80px; height: 80px; top: 4%; left: 4%; }
}
@media (max-width: 980px) { .hero-visual { min-height: 360px; } .hero-iso { max-width: 460px; } }

/* ============================================================
   Logo strip v2 — static grid of client placeholders
   ============================================================ */
.logo-strip-v2 {
  padding: 24px 0 64px;
  background: var(--ttb-bg-base);
  border-bottom: 0;
}
.logo-strip-v2 .container {
  display: flex; align-items: center; gap: 36px;
  flex-wrap: nowrap;
}
.logo-strip-v2 .logo-strip-label {
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 400;
  color: var(--ttb-fg-muted); letter-spacing: 0.06em; text-transform: uppercase;
  text-align: left; margin: 0;
  flex: 0 0 auto;
  white-space: nowrap;
}
.logo-grid {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  border: 0;
}
.logo-grid .logo-slot {
  display: flex; align-items: center; justify-content: center;
  height: auto;
  font-family: var(--font-display); font-style: italic; font-weight: 400;
  font-size: 1rem; color: var(--warm-500);
  border: 0;
  transition: color 0.2s ease;
  user-select: none;
  white-space: nowrap;
  opacity: 0.7;
}
.logo-grid .logo-slot:hover { color: var(--ttb-fg-base); opacity: 1; }
.logo-grid .client-logo {
  max-height: 24px; width: auto; max-width: 100%;
  filter: grayscale(1); opacity: 0.7;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.logo-grid .logo-slot:hover .client-logo { filter: grayscale(0); opacity: 1; }
@media (max-width: 980px) {
  .logo-strip-v2 .container { flex-wrap: wrap; gap: 20px; }
  .logo-grid { flex-wrap: wrap; gap: 24px 28px; justify-content: center; }
  .logo-strip-v2 .logo-strip-label { width: 100%; text-align: center; }
}
@media (max-width: 560px) {
  .logo-grid .logo-slot { font-size: 0.92rem; }
}


/* ============================================================
   Logo marquee — infinite seamless carousel (Alice-style)
   ============================================================ */
.logo-marquee {
  padding: 28px 0 64px;
  background: var(--ttb-bg-base);
  overflow: hidden;
}
.logo-marquee .container {
  display: flex;
  align-items: center;
  gap: 28px;
  flex-wrap: nowrap;
}
.logo-marquee-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--ttb-fg-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.logo-marquee-label::before {
  content: "";
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--warm-400);
}
.logo-marquee-viewport {
  position: relative;
  flex: 1 1 auto;
  overflow: hidden;
  /* Soft fade on both edges (Alice has clean cuts; we go a bit softer) */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0,
    #000 64px,
    #000 calc(100% - 64px),
    transparent 100%);
          mask-image: linear-gradient(to right,
    transparent 0,
    #000 64px,
    #000 calc(100% - 64px),
    transparent 100%);
}
.logo-marquee-track {
  display: flex;
  align-items: center;
  gap: 64px;
  width: max-content;
  /* Track is 2× the visible set (set A + set B), so translating -50%
     lands exactly at the start of set B == identical to set A position 0.
     Result: seamless loop. */
  animation: logo-marquee-scroll 38s linear infinite;
}
.logo-marquee:hover .logo-marquee-track {
  animation-play-state: paused;
}
.logo-marquee-track .logo-slot {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: center;
  height: auto;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 1.05rem;
  color: var(--warm-500);
  white-space: nowrap;
  user-select: none;
  opacity: 0.7;
  transition: color 0.2s ease, opacity 0.2s ease;
}
.logo-marquee-track .logo-slot:hover {
  color: var(--ttb-fg-base);
  opacity: 1;
}
.logo-marquee-track .client-logo {
  max-height: 28px;
  width: auto;
  filter: grayscale(1);
  opacity: 0.7;
  transition: filter 0.2s ease, opacity 0.2s ease;
}
.logo-marquee-track .logo-slot:hover .client-logo {
  filter: grayscale(0);
  opacity: 1;
}
@keyframes logo-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee-track {
    animation: none;
    transform: none;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px 36px;
    width: auto;
  }
  .logo-marquee-viewport {
    -webkit-mask-image: none;
            mask-image: none;
  }
}
@media (max-width: 720px) {
  .logo-marquee .container {
    flex-direction: column;
    align-items: stretch;
    gap: 14px;
  }
  .logo-marquee-label { text-align: center; }
  .logo-marquee-track { gap: 48px; }
  .logo-marquee-track .logo-slot { font-size: 0.95rem; }
}


/* ============================================================
   THE TRUST BUILDERS — i18n + skeleton primitives
   ============================================================ */

/* Wordmark */
.tb-wordmark { letter-spacing: -0.01em; }
.tb-wordmark em { font-style: italic; font-weight: 600; }

/* Language switcher pills */
/* Language switcher — globe icon + dropdown */
.lang-switcher {
  position: relative;
  display: inline-flex;
  margin-right: 8px;
}
.lang-trigger {
  display: inline-flex; align-items: center; gap: 6px;
  background: transparent;
  border: 1px solid var(--ttb-border-base);
  border-radius: 999px;
  padding: 7px 12px 7px 10px;
  cursor: pointer;
  color: var(--warm-700);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  line-height: 1;
  transition: color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease), background var(--motion-fast) var(--ease);
}
.lang-trigger:hover {
  color: var(--ttb-fg-base);
  border-color: var(--petrol-300);
  background: var(--ttb-bg-base);
}
.lang-trigger svg { display: block; flex: none; }
.lang-trigger .lang-chev {
  width: 12px; height: 12px;
  transition: transform var(--motion-fast) var(--ease);
}
.lang-switcher.is-open .lang-trigger {
  color: var(--ttb-fg-base);
  border-color: var(--petrol-300);
  background: var(--ttb-bg-base);
}
.lang-switcher.is-open .lang-chev { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 180px;
  background: var(--ttb-bg-surface);
  border: 1px solid var(--ttb-border-base);
  border-radius: 12px;
  box-shadow:
    0 1px 1px rgba(15, 48, 56, 0.04),
    0 8px 24px -4px rgba(15, 48, 56, 0.14),
    0 20px 48px -16px rgba(15, 48, 56, 0.16);
  padding: 6px;
  z-index: 200;
  display: flex; flex-direction: column;
  gap: 2px;
}
.lang-menu[hidden] { display: none; }
.lang-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
  color: var(--ttb-fg-base);
  transition: background var(--motion-fast) var(--ease);
}
.lang-item:hover { background: var(--ttb-bg-base); }
.lang-item.is-active { background: var(--petrol-50); }
.lang-item .li-code {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  font-weight: 500;
  color: var(--petrol-700);
  width: 24px;
  flex: none;
}
.lang-item .li-name {
  font-family: var(--font-body);
  font-size: 14px;
  flex: 1;
  color: var(--ttb-fg-base);
}
.lang-item .li-check {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--petrol-600);
  font-weight: 600;
}
@media (max-width: 720px) {
  .lang-trigger-code { display: none; }
  .lang-trigger { padding: 7px 8px; }
}

/* Header actions row gets a bit more gap */
.header-actions { display: flex; align-items: center; gap: 8px; }

/* Alfred line — single mute paragraph below CTAs on home */
.alfred-line {
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.55;
  color: var(--warm-500);
  max-width: 60ch;
  margin: 18px 0 0;
}
.hero .alfred-line { color: var(--warm-500); }

/* Trust Framework mantra — thin centered line */
.trust-mantra-thin {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 22px 24px;
  border-top: var(--ttb-border-base);
  border-bottom: var(--ttb-border-base);
  background: var(--ttb-bg-base);
}
.trust-mantra-thin span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--warm-500);
  opacity: 0.85;
  text-align: center;
}
.trust-mantra-inline {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warm-500);
}

/* Compliance scrollbar marquee */
.compliance-scrollbar {
  overflow: hidden;
  border-top: var(--ttb-border-base);
  border-bottom: var(--ttb-border-base);
  padding: 14px 0;
  background: var(--ttb-bg-base);
}
.compliance-track {
  display: flex; gap: 18px;
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warm-500);
  opacity: 0.7;
  justify-content: center;
  flex-wrap: wrap;
}
.compliance-track .dot-sep { opacity: 0.4; }

/* SurfaceStats — 4-col stat row with hairline dividers */
.surface-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: var(--ttb-border-base);
  border-bottom: var(--ttb-border-base);
  background: var(--ttb-bg-base);
}
.surface-stats .ss-cell {
  padding: 36px 28px;
  border-right: var(--ttb-border-base);
  display: flex; flex-direction: column; gap: 10px;
}
.surface-stats .ss-cell:last-child { border-right: none; }
.surface-stats .ss-num {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  line-height: 1;
  color: var(--ttb-fg-base);
  letter-spacing: -0.02em;
}
.surface-stats .ss-num em {
  font-style: italic;
  color: var(--petrol-600);
}
.surface-stats .ss-label {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warm-700);
  font-weight: 500;
}
.surface-stats .ss-source {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warm-400);
  margin-top: 4px;
}
@media (max-width: 980px) {
  .surface-stats { grid-template-columns: repeat(2, 1fr); }
  .surface-stats .ss-cell:nth-child(2n) { border-right: none; }
  .surface-stats .ss-cell:nth-child(-n+2) { border-bottom: var(--ttb-border-base); }
}
@media (max-width: 560px) {
  .surface-stats { grid-template-columns: 1fr; }
  .surface-stats .ss-cell { border-right: none; border-bottom: var(--ttb-border-base); }
  .surface-stats .ss-cell:last-child { border-bottom: none; }
}

/* PersonaTabs — horizontal mono tab strip */
.persona-tabs {
  display: flex; flex-direction: column; gap: 18px;
}
.persona-tabs .pt-row {
  display: flex; flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  border-bottom: var(--ttb-border-base);
  padding-bottom: 0;
}
.persona-tabs .pt-prefix {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--warm-400);
  margin-right: 12px;
  padding-bottom: 14px;
}
.persona-tabs .pt-tab {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  background: transparent;
  border: none;
  color: var(--warm-500);
  padding: 12px 14px 14px;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--motion-fast) var(--ease), border-color var(--motion-fast) var(--ease);
}
.persona-tabs .pt-tab:hover { color: var(--ttb-fg-base); }
.persona-tabs .pt-tab.is-active {
  color: var(--petrol-700);
  border-bottom-color: var(--petrol-600);
}
.persona-tabs .pt-copy {
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  color: var(--warm-700);
  max-width: 70ch;
  min-height: 3em;
  margin: 0;
}
.persona-tabs .pt-copy em {
  font-family: var(--font-display);
  font-style: italic;
}

/* TimelineBox — single highlight box for service detail */
.timeline-box {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 28px 32px;
  border: var(--ttb-border-base);
  border-radius: var(--r-lg);
  background: var(--ttb-bg-base);
  box-shadow: var(--shadow-sm);
}
.timeline-box .tb-num {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 600;
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  line-height: 1.1;
  color: var(--petrol-700);
  flex-shrink: 0;
  border-right: var(--ttb-border-base);
  padding-right: 28px;
}
.timeline-box .tb-lead {
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  color: var(--warm-700);
  max-width: 60ch;
}
@media (max-width: 720px) {
  .timeline-box { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; }
  .timeline-box .tb-num { border-right: none; padding-right: 0; padding-bottom: 12px; border-bottom: var(--ttb-border-base); width: 100%; }
}

/* TimelineVisual — Day 0 → 30 → 60 → 90 horizontal */
.timeline-visual {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: var(--ttb-border-base);
  border-bottom: var(--ttb-border-base);
  background: var(--ttb-bg-base);
}
.timeline-visual .tv-step {
  position: relative;
  padding: 32px 28px;
  border-right: var(--ttb-border-base);
}
.timeline-visual .tv-step:last-child { border-right: none; }
.timeline-visual .tv-day {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--petrol-600);
  margin-bottom: 14px;
  display: inline-flex; align-items: center; gap: 8px;
}
.timeline-visual .tv-day::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--petrol-600);
}
.timeline-visual .tv-step h3, .timeline-visual .tv-step h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 1.2;
  color: var(--ttb-fg-base);
  margin: 0 0 10px;
}
.timeline-visual .tv-step p {
  font-size: 14px;
  line-height: 1.55;
  color: var(--warm-700);
  margin: 0;
}
@media (max-width: 980px) {
  .timeline-visual { grid-template-columns: repeat(2, 1fr); }
  .timeline-visual .tv-step:nth-child(2n) { border-right: none; }
  .timeline-visual .tv-step:nth-child(-n+2) { border-bottom: var(--ttb-border-base); }
}
@media (max-width: 560px) {
  .timeline-visual { grid-template-columns: 1fr; }
  .timeline-visual .tv-step { border-right: none; border-bottom: var(--ttb-border-base); }
  .timeline-visual .tv-step:last-child { border-bottom: none; }
}

/* RelatedFrameworks — 3 cards */
.related-frameworks {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.related-frameworks .rf-card {
  display: flex; flex-direction: column; gap: 12px;
  padding: 24px;
  border: var(--ttb-border-base);
  border-radius: var(--r-lg);
  background: var(--ttb-bg-base);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
}
.related-frameworks .rf-card:hover {
  border-color: var(--petrol-300);
  transform: translateY(-2px);
}
.related-frameworks .rf-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--petrol-600);
}
.related-frameworks .rf-card h4 {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1.3rem;
  margin: 0;
  color: var(--ttb-fg-base);
}
.related-frameworks .rf-card p {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--warm-700);
}
.related-frameworks .rf-card .arrow-link {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--petrol-600);
  margin-top: auto;
}
@media (max-width: 720px) {
  .related-frameworks { grid-template-columns: 1fr; }
}

/* ============================================================
   FOOTER REWRITE — 5-column + legal entity fineprint
   ============================================================ */
.footer-grid-5 {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr;
  gap: 40px;
  align-items: start;
}
@media (max-width: 1080px) {
  .footer-grid-5 { grid-template-columns: 1.5fr 1fr 1fr; }
  .footer-grid-5 .footer-col:nth-child(4),
  .footer-grid-5 .footer-col:nth-child(5) { grid-column: span 1; }
}
@media (max-width: 720px) {
  .footer-grid-5 { grid-template-columns: 1fr 1fr; }
  .footer-grid-5 .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer-grid-5 { grid-template-columns: 1fr; }
}

/* Six-col variant — adds "Where We Operate" Alice-style */
.footer-grid-6 {
  display: grid;
  grid-template-columns: 1.6fr repeat(5, 1fr);
  gap: 40px;
  margin-bottom: 64px;
}
@media (max-width: 1200px) {
  .footer-grid-6 { grid-template-columns: 1.5fr repeat(3, 1fr); }
  .footer-grid-6 .footer-col:nth-child(5),
  .footer-grid-6 .footer-col:nth-child(6) { grid-column: auto; }
}
@media (max-width: 900px) {
  .footer-grid-6 { grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
}
@media (max-width: 720px) {
  .footer-grid-6 { grid-template-columns: 1fr 1fr; }
  .footer-grid-6 .footer-brand { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .footer-grid-6 { grid-template-columns: 1fr; }
}

.site-footer .tb-wordmark { color: #FAFAFA; }
.site-footer .footer-tagline { font-style: italic; }
.site-footer .footer-newsletter input {
  font-family: var(--font-body);
  padding: 10px 12px;
  border-radius: var(--r-md);
  border: 1px solid;
  font-size: 14px;
}

.footer-bottom-tb {
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
}
.footer-fineprint { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1 1 auto; }
.footer-fineprint > div { line-height: 1.7; white-space: nowrap; }
.footer-fineprint > div:first-child { color: rgba(255,255,255,0.85); white-space: normal; }
.footer-fineprint a { color: inherit; }
.footer-fineprint a:hover { color: #FFF; }
.footer-legal-links {
  display: flex; gap: 18px; flex-wrap: wrap;
}
.footer-legal-links a {
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
}
.footer-legal-links a:hover { color: #FFF; }

/* Hero secondary CTA arrow polish */
.hero-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* Stage card deadline highlight */
.stage-card .stage-deadline {
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  color: var(--petrol-700);
  font-size: 1.05rem;
  line-height: 1.35;
  margin: 8px 0 10px;
}

/* /llm plain page */
.llm-doc {
  max-width: 720px;
  margin: 0 auto;
  padding: 96px 24px 120px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  color: var(--ttb-fg-base);
}
.llm-doc h1 {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  margin: 0 0 24px;
  border-bottom: var(--ttb-border-base);
  padding-bottom: 16px;
}
.llm-doc h2 {
  font-family: var(--font-display);
  font-size: 1.3rem;
  font-weight: 600;
  margin: 36px 0 12px;
  color: var(--petrol-700);
}
.llm-doc h3, .llm-doc h4 {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 24px 0 8px;
  color: var(--warm-700);
}
.llm-doc ul { padding-left: 20px; }
.llm-doc li { margin-bottom: 4px; }
.llm-doc p { margin: 0 0 12px; }
.llm-doc code {
  font-family: var(--font-mono);
  font-size: 13.5px;
  background: var(--warm-50);
  padding: 1px 6px;
  border-radius: 3px;
}

/* OutcomesRibbon — Stage page outcomes */
.outcomes-ribbon {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  border: var(--ttb-border-base);
  border-radius: 16px;
  padding: 28px;
  background: var(--ttb-bg-base);
}
.outcomes-ribbon .or-item {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 18px;
  border-right: var(--ttb-border-base);
}
.outcomes-ribbon .or-item:last-child { border-right: none; }
.outcomes-ribbon .or-check {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--petrol-100);
  color: var(--petrol-700);
  font-size: 14px; font-weight: 600;
  font-family: var(--font-mono);
}
.outcomes-ribbon .or-item p {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.5;
  color: var(--ttb-fg-base);
  font-weight: 500;
}
@media (max-width: 980px) {
  .outcomes-ribbon { grid-template-columns: 1fr; }
  .outcomes-ribbon .or-item { border-right: none; border-bottom: var(--ttb-border-base); }
  .outcomes-ribbon .or-item:last-child { border-bottom: none; }
}


/* ============================================================
   Testimonials marquee (.t-marquee)
   Voices section — horizontal auto-scroll cards
   ============================================================ */
.t-marquee-row {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 80px, #000 calc(100% - 80px), transparent 100%);
}
.t-marquee {
  display: flex;
  gap: 24px;
  width: max-content;
  padding: 4px 24px;
  animation: t-marquee-scroll 60s linear infinite;
}
.t-marquee-row:hover .t-marquee { animation-play-state: paused; }

@keyframes t-marquee-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.t-card {
  flex: 0 0 auto;
  width: 380px;
  background: var(--ttb-bg-surface);
  border: var(--ttb-border-base);
  border-radius: 14px;
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--motion-fast) var(--ease), transform var(--motion-fast) var(--ease);
}
.t-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}
.t-card-logo {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--petrol-700);
  font-weight: 600;
}
.t-card-quote {
  font-family: var(--font-display);
  font-size: 18px;
  line-height: 1.45;
  color: var(--ttb-fg-base);
  letter-spacing: -0.005em;
  font-weight: 400;
  flex: 1;
  text-wrap: pretty;
}
.t-card-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: var(--ttb-border-base);
}
.t-card-meta .avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--petrol-50);
  color: var(--petrol-700);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  flex: none;
  border: 1px solid var(--petrol-200);
}
.t-card-meta .name {
  font-family: var(--font-body);
  font-size: 14px;
  color: var(--ttb-fg-base);
  font-weight: 500;
  line-height: 1.2;
}
.t-card-meta .role {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--warm-500);
  margin-top: 3px;
}
@media (max-width: 720px) {
  .t-card { width: 300px; padding: 22px 22px 20px; }
  .t-card-quote { font-size: 16px; }
}


/* ============================================================
   Brutalist override — square corners everywhere
   Zeros radius on ALL elements (including pills, avatars, badges)
   ============================================================ */
*, *::before, *::after {
  border-radius: 0 !important;
}

/* ============================================================
   Premium polish pass — Apple-grade refinement
   Mobile-first; senior-designer review.
   Type rhythm, spacing system, eyebrow fix, header tightening,
   button refinement, card hover, hero composition.
   ============================================================ */

/* —— Type scale: bigger, tighter, more confident on desktop;
       generous on mobile so everything reads on phone first —— */
h1 {
  font-size: clamp(2.65rem, 5.2vw + 0.8rem, 5.25rem) !important;
  letter-spacing: -0.025em !important;
  line-height: 1.02 !important;
}
h2 {
  font-size: clamp(1.85rem, 2.8vw + 0.9rem, 3.1rem) !important;
  letter-spacing: -0.02em !important;
  line-height: 1.06 !important;
}
h3 {
  font-size: clamp(1.4rem, 1.1vw + 1rem, 1.85rem) !important;
  line-height: 1.18 !important;
}
p.lead {
  font-size: clamp(1.05rem, 0.6vw + 0.9rem, 1.3rem);
  line-height: 1.55;
  color: var(--ttb-fg-subtle);
  text-wrap: pretty;
}
/* Constrain lead measure ONLY in left-aligned contexts; centered heroes need more width */
.hero-split .lead, .section-header.left + * .lead { max-width: 38ch; }

/* —— Eyebrow fix: kill awkward two-line wrap on short labels.
       Apple's "Overview" / "Tech specs" eyebrows are calmer.       —— */
.eyebrow,
.kicker,
.mega-card-eyebrow,
.stage-num {
  letter-spacing: 0.14em;
  white-space: nowrap;
}
.eyebrow { font-size: 0.74rem; }

/* —— Section padding rhythm —— */
.section-pad { padding: 112px 0; }
.section-pad-lg { padding: 144px 0; }
@media (max-width: 900px) {
  .section-pad { padding: 72px 0; }
  .section-pad-lg { padding: 88px 0; }
}
@media (max-width: 560px) {
  .section-pad { padding: 56px 0; }
  .section-pad-lg { padding: 72px 0; }
}

/* —— Container: a touch wider, more breathing room at the edges —— */
.container { max-width: 1240px; padding: 0 40px; }
.container-narrow { max-width: 860px; padding: 0 40px; }
@media (max-width: 720px) {
  .container, .container-narrow { padding: 0 24px; }
}

/* —— Header: slimmer, more refined; subtle blur on scroll —— */
.site-header {
  background: color-mix(in srgb, var(--ttb-bg-base) 88%, transparent);
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
}
.header-inner { min-height: 64px; }
@media (max-width: 720px) {
  .header-inner { min-height: 56px; }
}

/* —— Buttons: slightly tighter, more confident type, no shadow on hover.
       Premium = restraint.                                              —— */
.btn {
  padding: 13px 22px;
  font-size: 0.92rem;
  letter-spacing: -0.005em;
  font-weight: 500;
  transition: background 200ms var(--ease), transform 200ms var(--ease), color 200ms var(--ease);
}
.btn:hover { transform: none; box-shadow: var(--shadow-sm); }
.btn-primary { background: var(--petrol-700); color: var(--ttb-bg-surface); border-color: var(--petrol-700); }
.btn-primary:hover { background: var(--petrol-800); border-color: var(--petrol-800); }
.btn-secondary { background: transparent; color: var(--ttb-fg-base); }
.btn-secondary:hover { background: var(--ttb-fg-base); color: var(--ttb-bg-base); border-color: var(--ttb-fg-base); }

/* —— Cards: lift on hover (subtle, fast) —— */
.card,
.stage-card,
.mega-card,
.t-card,
.testimonial-card,
.resource-card {
  transition: transform 220ms var(--ease), box-shadow 220ms var(--ease), background 220ms var(--ease);
}
.stage-card:hover,
.t-card:hover,
.testimonial-card:hover,
.resource-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 1px 1px rgba(15, 48, 56, 0.04), 0 8px 24px -8px rgba(15, 48, 56, 0.10);
}

/* —— Hero: more confident composition; the stat badge breathes.
       Lead paragraph constrains to a comfortable measure.        —— */
.hero { padding-top: clamp(48px, 7vw, 88px); padding-bottom: clamp(48px, 6vw, 80px); }
/* Only constrain H1 width on the home/left-aligned hero, NOT centered framework heroes */
.hero-split .hero-copy h1 {
  max-width: 22ch;
  margin-top: 12px;
  margin-bottom: 0;
  font-size: clamp(2rem, 2.4vw + 0.8rem, 2.85rem) !important;
  line-height: 1.05 !important;
}
.hero-split .hero-copy .lead { margin-top: 16px; max-width: 48ch; font-size: 1rem; line-height: 1.5; }
.hero-split .hero-ctas { margin-top: 22px; gap: 12px; }
.hero-ctas { margin-top: 36px; gap: 12px; }
@media (max-width: 720px) {
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; justify-content: center; }
}

/* —— Hero rating badge: refined, premium spacing —— */
.hero-rating { gap: 16px; }
@media (max-width: 720px) { .hero-rating { gap: 12px; } }

/* —— Logo marquee: more whitespace; logos breathe —— */
.logo-marquee { padding: 32px 0 72px; }
.logo-marquee-track { gap: 64px; }
@media (max-width: 720px) {
  .logo-marquee { padding: 24px 0 56px; }
  .logo-marquee-track { gap: 40px; }
}

/* —— Mobile typography: eyebrows compact, line-heights generous —— */
@media (max-width: 720px) {
  .eyebrow, .kicker { font-size: 0.7rem; letter-spacing: 0.12em; }
  .stage-num, .mega-card-num { letter-spacing: 0.12em; }
  p, p.lead { line-height: 1.55; }
}

/* —— Final CTA section breathing room —— */
.final-cta { padding: clamp(80px, 10vw, 144px) 0; }

/* —— Footer: more generous, refined —— */
.site-footer { padding-top: 88px; padding-bottom: 56px; }
@media (max-width: 720px) {
  .site-footer { padding-top: 64px; padding-bottom: 40px; }
}

/* —— Touch targets: enforce 44px minimum on mobile —— */
@media (max-width: 720px) {
  .btn, .nav-link, .footer-col a, .lang-trigger {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
}

/* —— Focus rings: visible, on-brand —— */
:focus-visible {
  outline: 2px solid var(--petrol-500);
  outline-offset: 2px;
}
.btn:focus-visible {
  outline-offset: 3px;
}


/* ============================================================
   POLISH v2 — fine adjustments only
   P0 critical · P1 typography · P2 spacing · P3 micro-interactions
   ============================================================ */

:root {
  --ttb-ease-apple: cubic-bezier(0.32, 0.72, 0, 1);
  --ttb-border-hairline-soft: rgba(15, 48, 56, 0.08);
}

/* P0.1 Announcement bar */
.announcement-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
@media (max-width: 480px) { .announcement-text { display: none; } }

/* P0.2 Hero rating subordinated */
.hero-rating { opacity: 0.94; transition: opacity 240ms var(--ttb-ease-apple); }
.hero-rating:hover { opacity: 1; }
.hero-rating img, .hero-rating .rating-badge, .hero-rating .badge-img {
  filter: saturate(0.88); transition: filter 240ms var(--ttb-ease-apple);
}
.hero-rating:hover img, .hero-rating:hover .rating-badge, .hero-rating:hover .badge-img { filter: saturate(1); }

/* P0.3 Grad underline calmer */
.grad { background-size: 100% 0.16em !important; background-position: 0 92% !important; }

/* P1.4 Lead leading */
p.lead { line-height: 1.6; }
@media (max-width: 600px) { p.lead { line-height: 1.5; } }

/* P1.5 Tabular numerals */
.stat-num, .case-stat .stat-num, .case-meta, .meta-mono, .tl-day, .tv-num, .step-num,
.stage-num, .mega-card-num, .timeline-box .tb-num, .surface-stats .ss-num, .outcomes-ribbon .or-num {
  font-variant-numeric: tabular-nums lining-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* P1.7 Card eyebrows softer */
.stage-num, .mega-card-num { opacity: 0.74; }

/* P2.8 Hairline soft */
.section-divider { border-top: 1px solid var(--ttb-border-hairline-soft) !important; }

/* P2.9 Marquee pause on hover */
.logo-marquee:hover .logo-marquee-track,
.t-marquee:hover .t-marquee-track,
.logo-strip:hover .logo-marquee-track { animation-play-state: paused; }

/* P2.10 Final CTA breathing */
.final-cta .lead { max-width: 38ch; margin-left: auto; margin-right: auto; }
.final-cta .hero-ctas { margin-top: 32px; }

/* P3.11 Apple easing on buttons */
.btn, .btn-primary, .btn-secondary, .btn-ghost {
  transition: background-color 240ms var(--ttb-ease-apple), color 240ms var(--ttb-ease-apple),
    border-color 240ms var(--ttb-ease-apple), transform 240ms var(--ttb-ease-apple),
    box-shadow 240ms var(--ttb-ease-apple);
}

/* P3.12 Inline link underlines refined */
.article-body a:not(.btn):not(.tag), .prose a:not(.btn):not(.tag), .case-body a:not(.btn) {
  text-decoration: underline; text-decoration-thickness: 1px;
  text-decoration-color: rgba(48, 118, 136, 0.45); text-underline-offset: 3px;
  transition: text-decoration-color 200ms var(--ttb-ease-apple), color 200ms var(--ttb-ease-apple);
}
.article-body a:not(.btn):not(.tag):hover, .prose a:not(.btn):not(.tag):hover, .case-body a:not(.btn):hover {
  text-decoration-color: var(--petrol-700); color: var(--petrol-700);
}

/* P3.13 Cards: hairline reacts on hover */
.stage-card:hover, .resource-card:hover, .t-card:hover, .testimonial-card:hover {
  border-color: var(--petrol-300);
}

/* P3.14 Smooth scroll */
html { scroll-behavior: smooth; }
section[id] { scroll-margin-top: 88px; }

/* P3.15 On-brand selection */
::selection { background: rgba(48, 118, 136, 0.18); color: var(--ttb-fg-base); }
::-moz-selection { background: rgba(48, 118, 136, 0.18); color: var(--ttb-fg-base); }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .logo-marquee-track, .t-marquee-track { animation-duration: 0.001ms !important; }
  *, *::before, *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Alice-style M4 — Quote band: 3 quotes, single column, no carousel */
.quote-band {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  align-items: stretch;
}
.quote-card {
  background: var(--bg-card, #fff);
  border: 1px solid var(--ttb-border-hairline-soft, rgba(15,48,56,0.10));
  padding: 36px 32px;
  margin: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: border-color 240ms var(--ttb-ease-apple);
}
.quote-card:hover { border-color: var(--petrol-300); }
.quote-card blockquote {
  font-family: var(--font-display);
  font-size: 1.15rem;
  line-height: 1.45;
  letter-spacing: -0.01em;
  color: var(--ttb-fg-base);
  margin: 0 0 28px;
  quotes: "\201C" "\201D" "\2018" "\2019";
}
.quote-card figcaption {
  display: flex;
  align-items: center;
  gap: 12px;
  border-top: 1px solid var(--ttb-border-hairline-soft, rgba(15,48,56,0.10));
  padding-top: 20px;
  margin: 0;
}
.quote-card figcaption .avatar {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--petrol-100);
  color: var(--petrol-700);
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  letter-spacing: 0.04em;
  flex: none;
}
.quote-card figcaption .name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--ttb-fg-base);
  line-height: 1.3;
}
.quote-card figcaption .role {
  font-size: 0.82rem;
  color: var(--ttb-fg-muted);
  font-family: var(--font-mono);
  letter-spacing: 0.02em;
}
@media (max-width: 980px) {
  .quote-band { grid-template-columns: 1fr; gap: 20px; }
  .quote-card { padding: 28px 24px; }
}

/* Alice-style M3 — Stats bar: 4 numbers with hierarchy */
.stats-bar {
  border-top: 1px solid var(--ttb-border-hairline-soft, rgba(15,48,56,0.10));
  border-bottom: 1px solid var(--ttb-border-hairline-soft, rgba(15,48,56,0.10));
  padding: 56px 0;
  background: var(--bg, #FAFAFA);
}
.stats-bar-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 48px;
  align-items: start;
}
.stats-bar .stat-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stats-bar .stat-num {
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 4.6vw, 3.6rem);
  font-weight: 500;
  line-height: 0.95;
  letter-spacing: -0.03em;
  color: var(--ttb-fg-base);
  font-variant-numeric: tabular-nums lining-nums;
}
.stats-bar .stat-label {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ttb-fg-muted);
  margin-top: 4px;
}
.stats-bar .stat-blurb {
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--secondary, #555);
  max-width: 28ch;
  margin-top: 10px;
}
@media (max-width: 900px) {
  .stats-bar { padding: 40px 0; }
  .stats-bar-grid { grid-template-columns: 1fr 1fr; gap: 32px 24px; }
}
@media (max-width: 520px) {
  .stats-bar-grid { grid-template-columns: 1fr; gap: 28px; }
  .stats-bar .stat-blurb { max-width: none; }
}

/* Alice-style M9 — Thesis band: 3-block headline framework */
.thesis-band {
  background: var(--bg, #FAFAFA);
}
.thesis-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 56px;
  align-items: start;
  position: relative;
}
.thesis-grid::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--ttb-border-hairline-soft, rgba(15,48,56,0.10));
}
.thesis-block {
  display: flex;
  flex-direction: column;
  padding-top: 32px;
}
.thesis-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warm-500, #c87a4a);
  margin-bottom: 20px;
  font-variant-numeric: tabular-nums lining-nums;
}
.thesis-block h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 2.4vw, 1.85rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--ttb-fg-base);
  margin: 0 0 18px;
  text-wrap: balance;
}
.thesis-block p {
  font-size: 1rem;
  line-height: 1.55;
  color: var(--secondary, #555);
  max-width: 36ch;
  margin: 0;
}
@media (max-width: 980px) {
  .thesis-grid { grid-template-columns: 1fr; gap: 32px; }
  .thesis-grid::before { display: none; }
  .thesis-block {
    border-top: 1px solid var(--ttb-border-hairline-soft, rgba(15,48,56,0.10));
    padding-top: 28px;
  }
}

/* ============================================================================
 * UTILITY CLASSES — extracted from inline styles (Harvey-style DRY)
 * Covers ~90% of repeated inline `style="..."` patterns.
 * Migration: HTML uses .u-* helpers; new code should prefer these over inline.
 * ============================================================================ */

/* spacing — top */
.u-mt-1  { margin-top: 8px; }
.u-mt-2  { margin-top: 12px; }   /* 149 occurrences */
.u-mt-3  { margin-top: 16px; }
.u-mt-4  { margin-top: 24px; }
.u-mt-5  { margin-top: 32px; }   /* 19 occurrences */

/* spacing — bottom */
.u-mb-1  { margin-bottom: 6px; }
.u-mb-2  { margin-bottom: 8px; }
.u-mb-3  { margin-bottom: 12px; }
.u-mb-4  { margin-bottom: 24px; }

/* spacing — vertical block */
.u-my-3 { margin: 16px 0; }

/* layout — grid */
.u-grid-2     { display: grid; grid-template-columns: 1fr 1fr; }
.u-grid-3     { display: grid; grid-template-columns: repeat(3, 1fr); }
.u-grid-1-1-4 { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; }

/* layout — flex */
.u-flex-row    { display: flex; gap: 12px; }
.u-flex-center { justify-content: center; }

/* widths */
.u-mw-none { max-width: none; }
.u-mw-880  { max-width: 880px; }
.u-mw-1100 { margin-left: auto; margin-right: auto; max-width: 1100px; }

/* text colors (semantic, opt for migration to ttb tokens later) */
.u-text-muted   { color: var(--ttb-fg-muted); }
.u-text-subtle  { color: var(--ttb-fg-subtle); font-style: italic; }

/* common combos */
.u-cta-mt-flex { margin-top: 8px; justify-content: center; display: flex; gap: 12px; }
.u-block-with-mb { max-width: none; margin-bottom: 24px; } /* 34 occurrences */

/* a11y helper — visually hidden but accessible to screen readers */
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

/* newsletter form layout (replaces inline style) */
.newsletter-form {
  display: flex;
  gap: 8px;
  flex-direction: column;
}
.newsletter-form input {
  background: rgba(255,255,255,0.08);
  color: #FAFAFA;
  border-color: rgba(255,255,255,0.18);
}

/* multi-select height (replaces inline style="height:100px") */
.multi-select {
  height: 100px;
}

/* ============================================================================
 * MORE UTILITIES (Batch 2) — extracted from frequent inline styles
 * ========================================================================= */
.u-text-muted-mb-1 { color: var(--ttb-fg-muted); margin-bottom: 6px; }
.u-text-secondary { color: var(--ttb-accent-primary); }
.u-text-secondary-mb-3 { color: var(--ttb-accent-primary); margin-bottom: 12px; }
.u-text-primary-mt-3 { color: var(--ttb-accent-primary); margin-top: 18px; }
.u-fs-088 { font-size: 0.88rem; }
.u-pos-abs-32 { position: absolute; inset: 32px; }
.u-text-center-820 { text-align: center; max-width: 760px; margin: 0 auto 56px; }
.u-text-center-mt-40 { text-align: center; margin-top: 40px; }
.u-codepad { padding: 14px; font-family: var(--font-mono); font-size: 0.78rem; color: var(--ttb-fg-muted); }
.u-codepad-secondary { padding: 14px; font-family: var(--font-mono); font-size: 0.78rem; color: var(--ttb-accent-primary); }
.u-codepad-3col { position: absolute; inset: 32px; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; }
.u-codeline-row { padding: 10px 14px; display: flex; justify-content: space-between; }
.u-mono-tiny { font-family: var(--font-mono); font-size: 0.7rem; color: var(--ttb-fg-muted); letter-spacing: 0.06em; }


/* ============================================================================
 * TIMELINE container (markup .timeline > .tl) — was missing CSS
 * Consistent with .timeline-visual structure
 * ============================================================================ */
.timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  border-top: 1px solid var(--ttb-border-base);
  padding-top: 24px;
  position: relative;
}
.timeline .tl {
  position: relative;
  padding: 0 16px;
  border-right: 1px solid var(--ttb-border-base);
}
.timeline .tl:last-child { border-right: none; }
.timeline .tl-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--ttb-accent-primary);
  margin-bottom: 12px;
}
.timeline .tl-day {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ttb-fg-muted);
  margin-bottom: 8px;
}
.timeline .tl h3, .timeline .tl h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 1.4rem;
  margin: 0 0 8px;
}
.timeline .tl p {
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--ttb-fg-subtle);
  margin: 0;
}
@media (max-width: 980px) {
  .timeline { grid-template-columns: repeat(2, 1fr); }
  .timeline .tl:nth-child(2n) { border-right: none; }
  .timeline .tl:nth-child(-n+2) { border-bottom: 1px solid var(--ttb-border-base); padding-bottom: 16px; }
}
@media (max-width: 600px) {
  .timeline { grid-template-columns: 1fr; }
  .timeline .tl { border-right: none; border-bottom: 1px solid var(--ttb-border-base); padding-bottom: 16px; }
  .timeline .tl:last-child { border-bottom: none; }
}