/* ===== v2 additions: repositioned messaging components ===== */

/* Outcome stats */
.stat-unit { font-size: 0.45em; margin-left: 4px; color: var(--accent); }


/* Hero eyebrow */
.hero-eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 2.5px; color: var(--purple); margin-bottom: 16px; text-transform: uppercase; }

/* Second Brain */
.second-brain-section { padding: 96px 0; background: var(--bg-hero-1); }
.second-brain-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px; align-items: center; }
.second-brain-visual { display: flex; align-items: center; }

/* Team pedigree strip */
.pedigree-strip { text-align: center; margin-top: 64px; padding-top: 48px; border-top: 1px solid var(--line); }
.pedigree-label { font-size: 11px; font-weight: 800; letter-spacing: 2.5px; color: var(--muted); margin-bottom: 18px; }
.pedigree-logos { display: flex; justify-content: center; align-items: center; gap: clamp(28px, 6vw, 72px); flex-wrap: wrap; }
.pedigree-logos span { font-family: var(--font-round); font-size: clamp(20px, 2.6vw, 28px); color: var(--navy); opacity: .8; }
.pedigree-note { max-width: 560px; margin: 22px auto 0; font-size: 13.5px; color: var(--muted); }

/* Three Promises */
.promises-section { padding: 96px 0; background: linear-gradient(180deg, var(--bg-hero-1) 0%, #fff 100%); }
.promise-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 48px; }
.promise-card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 36px 30px;
  box-shadow: 0 8px 24px rgba(33,57,117,.06); text-align: left;
}
.promise-card.featured-promise { border: 2px solid var(--navy); box-shadow: 0 24px 60px rgba(33,57,117,.14); }
/* real line icons, not emoji: emoji render differently per OS and read
   as informal on a B2B page */
.promise-icon {
  width: 52px; height: 52px; margin-bottom: 18px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 13px; background: var(--bg-hero-1); color: var(--accent);
}
.promise-icon svg { width: 30px; height: 30px; }
.featured-promise .promise-icon { background: var(--navy); color: #fff; }
.promise-icon-own { color: var(--purple); background: #f6eef9; }
.promise-card h3 { font-size: 19px; margin-bottom: 4px; }
.promise-tag { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--purple); margin-bottom: 12px; }
.promise-card p:last-child { color: var(--muted); font-size: 14px; }

/* Process: Discovery → Build → Operate */
.process-section { padding: 96px 0; }
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin: 48px auto 56px; }
.process-step { text-align: center; padding: 0 12px; }
.process-num {
  width: 52px; height: 52px; border-radius: 50%; background: var(--navy); color: #fff;
  font-family: var(--font-round); font-size: 22px; display: flex; align-items: center; justify-content: center;
  margin: 0 auto 18px;
}
.process-step h3 { font-size: 19px; margin-bottom: 8px; }
.process-step p { color: var(--muted); font-size: 14px; }

/* Pricing v2 */
.center-sub { text-align: center; color: var(--muted); margin: -24px 0 40px; }
.plan-tagline { font-size: 13px; color: var(--muted); margin: -8px 0 12px; }
.plan-badge {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--purple); color: #fff; font-size: 11px; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase; padding: 6px 16px; border-radius: 20px;
  box-shadow: 0 6px 16px rgba(123,62,143,.35);
}
.price-card.featured { position: relative; }
.plan-target { font-size: 12.5px; color: var(--purple); font-weight: 700; margin-bottom: 16px; }
.plan-roi {
  font-size: 12.5px; font-weight: 700; color: var(--navy); background: var(--bg-hero-1);
  border-radius: 8px; padding: 8px 14px; margin-bottom: 20px; text-align: center;
}
.pricing-compare { text-align: center; color: var(--muted); font-size: 13px; max-width: 640px; margin: 40px auto 0; }
.free-card {
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  margin: 0 0 32px; padding: 30px 36px; border-radius: 16px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  box-shadow: 0 24px 60px rgba(33,57,117,.2);
}
.free-card-copy p { color: #c9d4f0; font-size: 14px; max-width: 560px; margin-top: 6px; }
.free-card-copy p strong { color: #fff; }
.free-card .btn { flex-shrink: 0; }
@media (max-width: 640px) { .free-card { flex-direction: column; align-items: flex-start; } }

/* ===== Multi-page components ===== */

/* Internal concept banner */
.concept-banner {
  background: repeating-linear-gradient(45deg, #7b3e8f, #7b3e8f 12px, #6a3579 12px, #6a3579 24px);
  color: #fff; text-align: center; font-size: 12.5px; font-weight: 800; letter-spacing: 1px;
  text-transform: uppercase; padding: 10px 16px;
}

/* Professional Services card (pricing concept) */
.service-card { max-width: 820px; margin: 0 auto; background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 8px 34px; box-shadow: 0 8px 24px rgba(33,57,117,.06); }
.service-line { padding: 26px 0; border-bottom: 1px solid var(--line); }
.service-line:last-child { border-bottom: 0; }
.service-line-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.service-line-head h3 { margin: 0; font-size: 17px; }
.service-price { font-family: var(--font-round); font-size: 15px; color: var(--purple); font-weight: 400; white-space: nowrap; }
.service-line p { color: var(--muted); font-size: 14px; margin: 0; }

/* ===== Concept C: behavioral framing components ===== */

/* Internal annotation blocks. Delete this rule + the .annotation divs to ship */
.annotation {
  max-width: 820px; margin: 0 auto; padding: 20px 24px 22px;
  border-left: 3px solid var(--purple); background: #faf7fb;
  font-size: 13.5px; line-height: 1.65; color: var(--muted);
}
.annotation b { display: block; color: var(--purple); font-size: 12px; font-weight: 800;
  letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 8px; }
.annotation em { font-style: italic; }
.annotation strong { color: var(--navy); }

/* Anchor comparison */
.anchor-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 24px; align-items: center; max-width: 900px; margin: 0 auto; }
.anchor-vs { font-family: var(--font-round); font-size: 18px; color: var(--muted); opacity: .7; }
.anchor-card { border-radius: 16px; padding: 32px 30px; }
.anchor-card-muted { background: #fff; border: 1px solid var(--line); opacity: .78; }
.anchor-card-primary { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%); box-shadow: 0 24px 60px rgba(33,57,117,.2); }
.anchor-label { font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.anchor-card-primary .anchor-label { color: #9db4ea; }
.anchor-figure { font-family: var(--font-round); font-size: clamp(34px, 4.5vw, 48px); color: var(--navy); line-height: 1.1; }
.anchor-card-primary .anchor-figure { color: #fff; }
.anchor-sub { font-size: 13px; color: var(--muted); margin-bottom: 18px; }
.anchor-card-primary .anchor-sub { color: #c9d4f0; }
.anchor-card ul { list-style: none; }
.anchor-card li { padding-left: 20px; position: relative; margin-bottom: 9px; font-size: 13.5px; color: var(--muted); }
.anchor-card li::before { content: "·"; position: absolute; left: 4px; font-weight: 700; }
.anchor-card-primary li { color: #c9d4f0; }

/* Single recommended offer */
.single-offer { display: grid; grid-template-columns: 1.35fr 1fr; gap: 0; max-width: 940px; margin: 0 auto;
  border-radius: 18px; overflow: hidden; box-shadow: 0 28px 70px rgba(33,57,117,.18); background: #fff; }
.single-offer-main { padding: 44px 46px; }
.single-offer-label { font-size: 12px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--purple); margin-bottom: 12px; }
.single-offer-price { display: flex; align-items: baseline; gap: 10px; }
.single-offer-price b { font-family: var(--font-round); font-size: 68px; font-weight: 400; color: var(--navy); line-height: 1; }
.single-offer-price span { font-size: 16px; color: var(--muted); }
.single-offer-detail { font-size: 13.5px; color: var(--muted); margin: 10px 0 24px; }
.single-offer-side { background: var(--bg-hero-1); padding: 44px 34px; display: flex; flex-direction: column; justify-content: center; }
.side-label { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.side-quote { font-size: 15px; color: var(--navy); line-height: 1.65; margin-bottom: 16px; }
.side-note { font-size: 13px; color: var(--muted); font-style: italic; }

/* Guarantee */
.guarantee-card { text-align: center; background: #fff; border: 2px solid var(--navy); border-radius: 18px; padding: 44px 40px; box-shadow: 0 24px 60px rgba(33,57,117,.12); }
.guarantee-icon { font-size: 38px; margin-bottom: 14px; }
.guarantee-card p { color: var(--muted); max-width: 560px; margin: 0 auto; }
.guarantee-note { font-size: 12px; color: var(--purple); margin-top: 18px; font-weight: 700; }

/* Who this isn't for */
.notfor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.notfor-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 28px 26px; }
.notfor-card h3 { font-size: 16px; margin-bottom: 10px; }
.notfor-card p { font-size: 13.5px; color: var(--muted); }

/* De-emphasized alternatives */
.alt-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 860px; margin: 0 auto; }
.alt-card { border-top: 2px solid var(--line); padding: 24px 4px 0; }
.alt-card h3 { font-size: 17px; margin-bottom: 4px; }
.alt-price { font-size: 13px; font-weight: 700; color: var(--purple); margin-bottom: 10px; }
.alt-card p { font-size: 13.5px; color: var(--muted); margin-bottom: 12px; }
.alt-link { font-size: 13.5px; font-weight: 700; color: var(--navy); text-decoration: none; }
.alt-link:hover { text-decoration: underline; }

@media (max-width: 960px) {
  .anchor-grid { grid-template-columns: 1fr; }
  .anchor-vs { text-align: center; }
  .single-offer { grid-template-columns: 1fr; }
  .single-offer-main { padding: 34px 28px; }
  .single-offer-side { padding: 30px 28px; }
  .notfor-grid, .alt-grid { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
}

/* Page hero (interior pages) */
.page-hero { background: linear-gradient(135deg, var(--bg-hero-1) 0%, var(--bg-hero-2) 100%); padding: 56px 0 64px; }
.page-hero h1 { font-size: clamp(28px, 3.6vw, 44px); margin-bottom: 18px; }
.page-hero .lede { max-width: 660px; font-size: 16px; color: var(--muted); }
.page-hero .lede.center { margin: 0 auto; }
.page-hero.center { text-align: center; }

/* Breadcrumbs */
.crumbs { font-size: 12.5px; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--navy); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }
.crumbs span { margin: 0 6px; opacity: .6; }

/* Active nav state */
.nav-links a[aria-current="page"] { color: var(--navy); font-weight: 700; box-shadow: inset 0 -2px 0 var(--purple); }

/* Team page */
.team-grid, .usecase-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-top: 48px; }
.team-card { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 32px; box-shadow: 0 8px 24px rgba(33,57,117,.06); }
.team-card h3 { font-size: 20px; margin-bottom: 2px; }
.team-role { font-size: 12.5px; font-weight: 700; color: var(--purple); text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 14px; }
.team-card p { color: var(--muted); font-size: 14px; margin-bottom: 12px; }
.team-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.team-tag { font-size: 11px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; background: var(--bg-hero-1); color: var(--navy); border-radius: 20px; padding: 5px 12px; }

/* Capability columns (big + small workflows) */
.scale-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; margin-top: 44px; }
/* 3-up variant. Declared as a class rather than an inline style so the mobile
   collapse below can actually override it. An inline rule wins over the media
   query and caused horizontal overflow on /platform. */
.scale-grid-3 { grid-template-columns: repeat(3, 1fr); }
.scale-card { border: 1px solid var(--line); border-radius: 16px; padding: 34px; background: #fff; }
.scale-card h3 { font-size: 19px; margin-bottom: 10px; }
.scale-card p { color: var(--muted); font-size: 14px; margin-bottom: 16px; }
.scale-card ul { list-style: none; }
.scale-card li { padding-left: 24px; position: relative; margin-bottom: 9px; color: var(--muted); font-size: 13.5px; }
.scale-card li::before { content: "→"; position: absolute; left: 0; color: var(--purple); font-weight: 700; }

/* FAQ (SEO long-tail) */
.faq-section { padding: 88px 0; background: var(--bg-hero-1); }
.faq-list { max-width: 800px; margin: 40px auto 0; }
.faq-item { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 24px 26px; margin-bottom: 14px; }
.faq-item h3 { font-size: 16px; margin-bottom: 8px; }
.faq-item p { color: var(--muted); font-size: 14px; }

/* Section CTA band (interior pages) */
.mini-cta { background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%); padding: 72px 0; text-align: center; }
.mini-cta h2 { color: #fff; margin-bottom: 12px; }
.mini-cta p { color: #c9d4f0; margin-bottom: 26px; max-width: 620px; margin-left: auto; margin-right: auto; }

/* Cross-links */
.next-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 44px; }
.next-link { display: block; text-decoration: none; border: 1px solid var(--line); border-radius: 12px; padding: 24px; background: #fff; transition: transform .2s, box-shadow .2s; }
.next-link:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(33,57,117,.12); }
.next-link b { display: block; color: var(--navy); font-family: var(--font-round); font-size: 17px; font-weight: 400; margin-bottom: 6px; }
.next-link span { color: var(--muted); font-size: 13.5px; }

@media (max-width: 960px) {
  .promise-grid, .process-grid, .team-grid, .usecase-grid, .scale-grid, .scale-grid-3, .next-links { grid-template-columns: 1fr; max-width: 480px; margin-left: auto; margin-right: auto; }
  /* Must live here, not styles.css; v2.css defines the base rule and loads last. */
  .second-brain-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   SLACK SETUP GUIDE (/slack-setup)
   Doc-page primitives: numbered steps, code blocks, scope table,
   callouts. Scoped to the setup guide so nothing here can leak
   into the marketing pages.
   ============================================================ */

/* --- Numbered steps --- */
.setup-steps { counter-reset: setup; margin: 40px 0 0; padding: 0; list-style: none; }
.setup-step {
  counter-increment: setup;
  position: relative;
  padding: 0 0 34px 62px;
  border-left: 2px solid var(--line);
  margin-left: 19px;
}
.setup-step:last-child { border-left-color: transparent; padding-bottom: 0; }
.setup-step::before {
  content: counter(setup);
  position: absolute;
  left: -20px; top: -4px;
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  background: var(--navy); color: #fff;
  font-family: var(--font-round); font-size: 17px;
  border-radius: 50%;
}
.setup-step h3 { font-size: 19px; margin: 4px 0 10px; color: var(--navy); }
.setup-step p { color: var(--muted); font-size: 15px; line-height: 1.7; margin-bottom: 12px; }
.setup-step p:last-child, .setup-step > *:last-child { margin-bottom: 0; }
.setup-step ul { margin: 0 0 12px; padding-left: 20px; color: var(--muted); font-size: 15px; line-height: 1.7; }
.setup-step ul li { margin-bottom: 5px; }

/* --- Code --- */
code {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.88em;
  background: #eef1fb;
  color: var(--navy-deep);
  padding: 2px 6px;
  border-radius: 5px;
  overflow-wrap: break-word;
}
.code-block {
  background: var(--navy-deep);
  color: #dbe4ff;
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 14px;
  line-height: 1.6;
  padding: 16px 18px;
  border-radius: var(--radius);
  overflow-x: auto;
  margin: 0 0 14px;
  max-width: 100%;
}
.code-block code { background: none; color: inherit; padding: 0; font-size: inherit; }

/* --- Scope table --- */
.table-scroll { overflow-x: auto; margin: 0 0 14px; max-width: 100%; }
.scope-table { border-collapse: collapse; width: 100%; min-width: 460px; font-size: 14.5px; }
.scope-table th, .scope-table td {
  text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--line); vertical-align: top;
}
.scope-table th {
  font-family: var(--font-round); color: var(--navy);
  font-size: 13px; text-transform: uppercase; letter-spacing: 0.6px;
  border-bottom-width: 2px; white-space: nowrap;
}
.scope-table td:first-child { white-space: nowrap; }
.scope-table td { color: var(--muted); }
.scope-table tr:last-child td { border-bottom: 0; }

/* --- Callouts --- */
.callout {
  border-left: 4px solid var(--accent);
  background: #f5f7fd;
  padding: 18px 20px;
  border-radius: 0 var(--radius) var(--radius) 0;
  margin: 0 0 18px;
}
.callout h4 {
  font-family: var(--font-round); font-size: 15px; color: var(--navy);
  margin: 0 0 7px; letter-spacing: 0.2px;
}
.callout p { color: var(--muted); font-size: 14.5px; line-height: 1.7; margin: 0 0 9px; }
.callout p:last-child, .callout ul:last-child { margin-bottom: 0; }
.callout ul { margin: 0; padding-left: 19px; color: var(--muted); font-size: 14.5px; line-height: 1.7; }
.callout-warn { border-left-color: var(--gold); background: #fdf7ec; }
.callout-secure { border-left-color: var(--green); background: var(--green-tint); }
.callout-secure p, .callout-secure ul, .callout-secure li { color: #14512f; }

@media (max-width: 700px) {
  .setup-step { padding-left: 48px; }
  .setup-step::before { width: 32px; height: 32px; left: -17px; font-size: 15px; }
}

/* ============================================================
   COMPOUNDING PAGE (/compounding)
   Two-path comparison, workflow catalog, mechanism grid, chart.
   ============================================================ */

/* --- Two-path comparison --- */
.path-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 44px; }
.path-col { border-radius: 16px; padding: 30px 28px; }
.path-col-dim { background: #f4f6fb; border: 1px solid var(--line); }
.path-col-lit {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  border: 1px solid var(--navy); color: #fff;
  box-shadow: 0 24px 60px rgba(33,57,117,.18);
}
.path-label {
  font-size: 11px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
  margin-bottom: 8px; color: var(--muted);
}
.path-col-lit .path-label { color: #9db4ea; }
.path-q { font-family: var(--font-round); font-size: 18px; line-height: 1.35; margin-bottom: 22px; color: var(--navy); }
.path-col-lit .path-q { color: #fff; }
.path-timeline { list-style: none; margin: 0; padding: 0; }
.path-step { position: relative; padding: 10px 0 10px 26px; font-size: 14px; line-height: 1.55; color: var(--ink); }
.path-col-lit .path-step { color: rgba(255,255,255,.85); }
.path-step::before {
  content: ""; position: absolute; left: 0; top: 17px;
  width: 9px; height: 9px; border-radius: 50%; background: #c3cde4;
}
.path-col-lit .path-step::before { background: var(--accent-on-dark); }
.path-time {
  display: block; font-size: 10.5px; letter-spacing: 1.2px; font-weight: 800;
  text-transform: uppercase; opacity: .6; margin-bottom: 2px;
}
.path-outcome {
  margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line);
  font-size: 14.5px; font-weight: 700; color: var(--muted);
}
.path-col-lit .path-outcome { border-top-color: rgba(155,180,235,.3); color: #9db4ea; }
.path-metric {
  display: block; font-family: var(--font-round); font-size: 26px;
  font-weight: 400; margin-top: 4px; color: var(--navy);
}
.path-col-lit .path-metric { color: #fff; }

/* --- Chart --- */
.chart-wrap { max-width: 900px; margin: 0 auto; }
.chart-legend { display: flex; gap: 26px; flex-wrap: wrap; justify-content: center; margin-bottom: 22px; }
.legend-item { display: flex; align-items: center; gap: 9px; font-size: 13px; font-weight: 700; color: var(--navy); }
.legend-swatch { width: 14px; height: 14px; border-radius: 4px; flex-shrink: 0; }
.chart-wrap svg { display: block; width: 100%; height: auto; }
.chart-note {
  text-align: center; font-size: 12.5px; color: var(--muted);
  max-width: 620px; margin: 18px auto 0; line-height: 1.6;
}

/* --- Workflow catalog --- */
.layer-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin: 0 0 22px; padding-bottom: 14px; border-bottom: 1px solid var(--line);
}
.layer-badge {
  font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 800;
  padding: 6px 11px; border-radius: 5px; color: #fff; white-space: nowrap;
}
.layer-badge.l1 { background: var(--accent); }
.layer-badge.l2 { background: var(--green); }
.layer-badge.l3 { background: var(--purple); }
.layer-title { font-family: var(--font-round); font-size: 20px; color: var(--navy); }
.layer-when {
  margin-left: auto; font-size: 11.5px; letter-spacing: 1.1px; text-transform: uppercase;
  font-weight: 800; color: var(--muted);
}
.wf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 44px; }
.wf-grid.two { grid-template-columns: repeat(2, 1fr); }
.wf-grid.one { grid-template-columns: 1fr; }
.wf-card {
  background: #fff; border: 1px solid var(--line); border-top: 3px solid;
  border-radius: 12px; padding: 24px 22px;
  box-shadow: 0 6px 20px rgba(33,57,117,.05);
}
.wf-card.l1 { border-top-color: var(--accent); }
.wf-card.l2 { border-top-color: var(--green); }
.wf-card.l3 { border-top-color: var(--purple); background: linear-gradient(180deg, #f9f5fb 0%, #fff 55%); }
.wf-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 14px; }
.wf-name { font-size: 16.5px; font-family: var(--font-round); color: var(--navy); line-height: 1.3; }
.wf-cadence {
  font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; font-weight: 800;
  color: var(--muted); background: var(--bg-hero-1); border: 1px solid var(--line);
  padding: 4px 8px; border-radius: 4px; white-space: nowrap;
}
.wf-row { display: grid; grid-template-columns: 58px 1fr; gap: 10px; padding: 9px 0; font-size: 13.5px; line-height: 1.55; }
.wf-row + .wf-row { border-top: 1px dashed var(--line); }
.wf-key { font-size: 9.5px; letter-spacing: 1.3px; text-transform: uppercase; font-weight: 800; color: var(--muted); padding-top: 3px; }
.wf-val { color: var(--muted); }
.wf-val strong { color: var(--navy); }
.wf-foot {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line);
}
.wf-hours-label { font-size: 9.5px; letter-spacing: 1.1px; text-transform: uppercase; font-weight: 800; color: var(--muted); }
.wf-hours-num { font-family: var(--font-round); font-size: 16px; margin-top: 2px; }
.wf-card.l1 .wf-hours-num { color: var(--accent); }
.wf-card.l2 .wf-hours-num { color: var(--green); }
.wf-card.l3 .wf-hours-num { color: var(--purple); }
.wf-needs {
  font-size: 9.5px; letter-spacing: 1px; text-transform: uppercase; font-weight: 800;
  background: var(--navy); color: #fff; padding: 6px 10px; border-radius: 4px; line-height: 1.4;
}
.wf-card.featured { padding: 32px 30px; }
.wf-card.featured .wf-name { font-size: 21px; }
.wf-star {
  font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase;
  font-weight: 800; color: var(--purple); display: block; margin-bottom: 10px;
}

/* --- Mechanism grid --- */
.mech-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 44px; }
.mech-cell {
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.12);
  border-radius: 12px; padding: 24px 20px;
}
.mech-num { font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 800; color: #9db4ea; margin-bottom: 8px; }
.mech-title { font-family: var(--font-round); font-size: 16px; color: #fff; line-height: 1.3; margin-bottom: 14px; }
.mech-then, .mech-now { font-size: 12.5px; line-height: 1.55; }
.mech-then {
  color: rgba(255,255,255,.5); padding-bottom: 9px; margin-bottom: 9px;
  border-bottom: 1px dashed rgba(255,255,255,.15);
}
.mech-now { color: #fff; }
.mech-kv { display: block; font-size: 9px; letter-spacing: 1.1px; text-transform: uppercase; font-weight: 800; opacity: .65; margin-bottom: 3px; }
.mech-now b { color: var(--accent-on-dark); font-weight: 700; }

/* --- Economics --- */
.econ-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 40px; }
.econ-card { border-radius: 16px; padding: 32px 30px; }
.econ-card-dim { background: #f4f6fb; border: 1px solid var(--line); }
.econ-card-lit {
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-deep) 100%);
  border: 1px solid var(--navy); color: #fff;
}
.econ-label { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 800; color: var(--muted); margin-bottom: 7px; }
.econ-card-lit .econ-label { color: #9db4ea; }
.econ-title { font-family: var(--font-round); font-size: 21px; color: var(--navy); margin-bottom: 22px; }
.econ-card-lit .econ-title { color: #fff; }
.econ-row {
  display: flex; justify-content: space-between; gap: 16px; align-items: baseline;
  padding: 11px 0; font-size: 14px; border-bottom: 1px solid var(--line); color: var(--ink);
}
.econ-card-lit .econ-row { border-bottom-color: rgba(255,255,255,.12); color: rgba(255,255,255,.85); }
.econ-row:last-of-type { border-bottom: 0; }
.econ-val { font-weight: 700; white-space: nowrap; }
.econ-total { margin-top: 16px; padding-top: 18px; border-top: 2px solid var(--muted); }
.econ-card-lit .econ-total { border-top-color: var(--accent-on-dark); }
.econ-total-label { font-size: 10.5px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 800; color: var(--muted); margin-bottom: 5px; }
.econ-card-lit .econ-total-label { color: #9db4ea; }
.econ-total-val { font-family: var(--font-round); font-size: 30px; color: var(--navy); }
.econ-card-lit .econ-total-val { color: #fff; }
.econ-total-sub { font-size: 13px; color: var(--muted); margin-top: 5px; line-height: 1.6; }
.econ-card-lit .econ-total-sub { color: rgba(255,255,255,.7); }

@media (max-width: 980px) {
  .mech-grid { grid-template-columns: repeat(2, 1fr); }
  .wf-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .path-grid, .econ-grid, .wf-grid, .wf-grid.two, .mech-grid { grid-template-columns: 1fr; }
  .layer-when { margin-left: 0; width: 100%; }
  .wf-card.featured { padding: 24px 22px; }
  .wf-card.featured .wf-name { font-size: 18px; }
}

/* ============================================================
   LEGAL / LONG-FORM DOCUMENT PAGES
   (privacy-policy, terms-of-service, soc2)
   ============================================================ */
.legal { max-width: 780px; margin: 0 auto; }
.legal h2 {
  font-family: var(--font-round); font-size: 22px; color: var(--navy);
  margin: 44px 0 14px; padding-top: 22px; border-top: 1px solid var(--line);
}
.legal h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal h3 { font-size: 16.5px; color: var(--navy); margin: 26px 0 8px; font-weight: 800; }
.legal h4 {
  font-size: 11.5px; letter-spacing: 1.4px; text-transform: uppercase;
  font-weight: 800; color: var(--purple); margin: 24px 0 8px;
}
.legal p { font-size: 15px; line-height: 1.75; color: var(--muted); margin-bottom: 14px; }
.legal p strong, .legal li strong { color: var(--navy); font-weight: 700; }
.legal ul { list-style: none; margin: 0 0 16px; padding: 0; }
.legal li {
  position: relative; padding-left: 20px; margin-bottom: 9px;
  font-size: 15px; line-height: 1.7; color: var(--muted);
}
.legal li::before {
  content: ""; position: absolute; left: 2px; top: 11px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--accent);
}
.legal-meta {
  font-size: 13px; color: var(--muted); padding: 14px 18px; margin-bottom: 32px;
  background: var(--bg-hero-1); border-left: 3px solid var(--accent); border-radius: 6px;
}
.legal-meta strong { color: var(--navy); }
@media (max-width: 700px) {
  .legal h2 { font-size: 19px; }
  .legal p, .legal li { font-size: 14.5px; }
}

/* ============================================================
   MOTION HIERARCHY
   The base .reveal treats all 31 homepage elements identically,
   so nothing reads as more important than anything else.
   These add rank: leads arrive first, supporting copy follows,
   grid children stagger. All inherit the existing
   prefers-reduced-motion guard on .reveal.
   ============================================================ */

/* Children of a revealed grid cascade instead of landing together */
.stagger > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
  transition-delay: calc(var(--i, 0) * 70ms);
}
.stagger.in > * { opacity: 1; transform: none; }

/* ---- Compounding chart: draw the curve rather than flash it ---- */
.chart-wrap .chart-draw {
  stroke-dasharray: var(--len, 1200);
  stroke-dashoffset: var(--len, 1200);
}
.chart-wrap.in .chart-draw {
  animation: chart-draw 1.5s cubic-bezier(.4, 0, .25, 1) forwards;
}
@keyframes chart-draw { to { stroke-dashoffset: 0; } }

.chart-wrap .chart-fill { opacity: 0; }
.chart-wrap.in .chart-fill { animation: chart-fade .9s ease .7s forwards; }
@keyframes chart-fade { to { opacity: 1; } }

.chart-wrap .chart-dot { opacity: 0; transform-box: fill-box; transform-origin: center; }
.chart-wrap.in .chart-dot {
  animation: chart-pop .45s cubic-bezier(.34, 1.56, .64, 1) forwards;
  animation-delay: calc(.45s + var(--d, 0) * .22s);
}
@keyframes chart-pop { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: scale(1); } }

.chart-wrap .chart-note-anim { opacity: 0; }
.chart-wrap.in .chart-note-anim { animation: chart-fade .6s ease 1.5s forwards; }

@media (prefers-reduced-motion: reduce) {
  .stagger > *,
  .chart-wrap .chart-fill,
  .chart-wrap .chart-dot,
  .chart-wrap .chart-note-anim { opacity: 1; transform: none; transition: none; animation: none; }
  .chart-wrap .chart-draw { stroke-dashoffset: 0; animation: none; }
}

/* Adjacent paragraphs need separating. The base reset zeroes p margins, which
   was invisible while every section had only a single paragraph. */
.feature p + p,
.second-brain-section p + p,
.platform-section p + p { margin-top: 15px; }

/* The platform band on /platform now carries only the product shot, so it does
   not need the padding that was sized for a heading plus a stat row. */
.platform-shot-only { padding-top: 48px; padding-bottom: 56px; }

/* ============================================================
   HERO BACKGROUND VIDEO
   Decorative only. The scrim keeps the H1 at an accessible
   contrast ratio over moving imagery, and the whole thing is
   replaced by the poster when motion is not wanted.
   ============================================================ */
.hero-video { position: relative; overflow: hidden; isolation: isolate; }
.hero-video > .container { position: relative; z-index: 2; }

.hero-bg {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  pointer-events: none;
}
.hero-scrim {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  /* the loop is rendered on the hero's own background colour, so this only
     needs to lift contrast under the copy column, not mask the whole frame */
  background:
    linear-gradient(100deg, rgba(238,241,251,.90) 0%, rgba(238,241,251,.72) 30%,
                             rgba(238,241,251,.10) 62%, rgba(238,241,251,0) 100%);
}
@media (max-width: 960px) {
  .hero-scrim {
    background: linear-gradient(to bottom, rgba(238,241,251,.88), rgba(238,241,251,.80));
  }
}
@media (prefers-reduced-motion: reduce) {
  .hero-bg { display: none; }
  .hero-video { background-image: url("/video/hero-poster.jpg"); background-size: cover; }
}

/* Click-to-play brand film. preload="none" means the 3.6MB file is only
   fetched if someone actually presses play. */
.film-wrap {
  max-width: 960px; margin: 44px auto 0;
  border-radius: 16px; overflow: hidden;
  box-shadow: 0 30px 70px rgba(33,57,117,.22);
  border: 1px solid var(--line);
  background: var(--navy);
}
.film { display: block; width: 100%; height: auto; }

/* ============================================================
   SECOND BRAIN FLOW DIAGRAM
   The core concept had no visual at all. Sources feed the brain,
   agents draw from it, and results are written back, which is the
   compounding loop the whole pitch rests on.
   ============================================================ */
.second-brain-copy { max-width: 820px; margin: 0 auto; text-align: center; }
.second-brain-copy .checklist { text-align: left; display: inline-block; margin-top: 8px; }

.sb-diagram { max-width: 1100px; margin: 56px auto 0; padding: 0 16px; }
.sb-diagram svg { width: 100%; height: auto; overflow: visible; }

.sb-col {
  font-size: 13px; font-weight: 800; letter-spacing: 1.6px;
  fill: var(--muted); text-anchor: middle;
}
.sb-col.sb-mid { fill: var(--accent); }
.sb-col.sb-end { fill: var(--green); }

.sb-diagram .chip {
  fill: #fff; stroke: var(--line); stroke-width: 1.5;
  filter: drop-shadow(0 3px 10px rgba(33,57,117,.08));
}
.sb-diagram .chip.out { stroke: #bfe0cd; }
.sb-diagram text { font-size: 15px; fill: var(--navy); font-weight: 600; }
.sb-diagram .dot { fill: var(--accent); }
.sb-diagram .dot.g { fill: var(--green); }
.sb-diagram .src-t { font-size: 13px; font-weight: 700; fill: var(--navy); }
.sb-diagram .src-e { font-size: 11.5px; font-weight: 400; fill: var(--muted); }
.sb-diagram .src-more { font-size: 12px; font-weight: 700; fill: var(--accent); text-anchor: middle; }

.sb-in, .sb-out { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.sb-in  { stroke: url(#flowIn); }
.sb-out { stroke: url(#flowOut); }

.sb-corelabel {
  font-size: 13px; font-weight: 800; letter-spacing: 1.5px;
  fill: var(--accent); text-anchor: middle; text-transform: uppercase;
}
.sb-loop {
  fill: none; stroke: var(--purple); stroke-width: 2;
  stroke-dasharray: 7 7; opacity: .55;
}
.sb-looplabel { font-size: 13.5px; fill: var(--purple); text-anchor: middle; font-weight: 700; }

/* --- animation, gated on the section entering view --- */
.sb-diagram .sb-in, .sb-diagram .sb-out {
  stroke-dasharray: 260; stroke-dashoffset: 260;
}
.sb-diagram.in .sb-in, .sb-diagram.in .sb-out {
  animation: sb-draw 1.1s ease forwards; animation-delay: calc(.25s + var(--d, 0s));
}
@keyframes sb-draw { to { stroke-dashoffset: 0; } }

.sb-diagram .sb-src g, .sb-diagram .sb-out-chips g { opacity: 0; }
.sb-diagram.in .sb-src g { animation: sb-pop .5s ease forwards; }
.sb-diagram.in .sb-out-chips g { animation: sb-pop .5s ease forwards; animation-delay: 1.1s; }
.sb-diagram.in .sb-out-chips g:nth-child(2) { animation-delay: 1.2s; }
.sb-diagram.in .sb-out-chips g:nth-child(3) { animation-delay: 1.3s; }
.sb-diagram.in .sb-out-chips g:nth-child(4) { animation-delay: 1.4s; }
/* opacity only: a CSS transform here would override the SVG
   transform="translate(...)" attribute and reset each chip to 0,0 */
@keyframes sb-pop { from { opacity: 0; } to { opacity: 1; } }

@keyframes sb-lat { from { opacity: 0; transform: scale(.72); } to { opacity: 1; transform: scale(1); } }

.sb-diagram .sb-loop { stroke-dashoffset: 0; opacity: 0; }
.sb-diagram.in .sb-loop { animation: sb-fade .8s ease 1.7s forwards, sb-march 2.4s linear 2.5s infinite; }
.sb-diagram .sb-looplabel { opacity: 0; }
.sb-diagram.in .sb-looplabel { animation: sb-fade .7s ease 2s forwards; }
@keyframes sb-fade { to { opacity: .55; } }
@keyframes sb-march { to { stroke-dashoffset: -56; } }

@media (max-width: 700px) {
  .sb-diagram text { font-size: 21px; }
  .sb-col, .sb-corelabel { font-size: 18px; }
  .sb-looplabel { font-size: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .sb-diagram .sb-in, .sb-diagram .sb-out { stroke-dashoffset: 0; animation: none; }
  .sb-diagram .sb-src g, .sb-diagram .sb-out-chips g,
  .sb-diagram .sb-lattice, .sb-diagram .sb-looplabel { opacity: 1; animation: none; }
  .sb-diagram .sb-loop { opacity: .55; animation: none; }
}

/* The wide flow cannot survive a 390px viewport: it scales to 7px type.
   Below 820px a vertical variant of the same diagram is shown instead. */
.sb-diagram .sb-mobile { display: none; }
@media (max-width: 820px) {
  .sb-diagram .sb-wide { display: none; }
  .sb-diagram .sb-mobile { display: block; }
  .sb-diagram text { font-size: 15px; }
  .sb-col, .sb-corelabel { font-size: 12.5px; }
  .sb-looplabel { font-size: 12.5px; }
  .sb-diagram .src-t { font-size: 13.5px; }
  .sb-diagram .src-e { font-size: 12px; }
  .sb-diagram .src-more { font-size: 12.5px; }
}
/* the mobile variant points at its own gradients. A media-query override
   did not win here, and #flowIn lives inside the display:none wide SVG. */
.sb-in-m  { stroke: url(#flowInM); }
.sb-out-m { stroke: url(#flowOutM); }

/* ============================================================
   PROCESS TIMELINE  (/services)
   Replaces three numbered circles with a real schedule: phases
   on a spine, durations to scale, deliverable under each.
   ============================================================ */
.proc-wrap { max-width: 1100px; margin: 48px auto 0; padding: 0 16px; }
.proc { width: 100%; height: auto; overflow: visible; }

.proc-weeks text { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; fill: var(--muted); text-anchor: middle; }
.proc-tick { stroke: var(--line); stroke-width: 1.5; }
.proc-ticks line { stroke: var(--line); stroke-width: 1.5; }

.proc-spine-bg { fill: var(--line); }
.proc-spine { transform-origin: 60px 0; }
.proc-phase rect { fill: #fff; stroke-width: 2; }
.proc-phase circle { stroke: none; }
.proc-phase .n { font-size: 13px; font-weight: 800; fill: #fff; text-anchor: middle; }
.proc-phase .lbl { font-size: 12.5px; font-weight: 800; letter-spacing: 1.6px; }
.proc-phase.p1 rect { stroke: var(--accent); } .proc-phase.p1 circle { fill: var(--accent); } .proc-phase.p1 .lbl { fill: var(--accent); }
.proc-phase.p2 rect { stroke: var(--purple); } .proc-phase.p2 circle { fill: var(--purple); } .proc-phase.p2 .lbl { fill: var(--purple); }
.proc-phase.p3 rect { stroke: var(--green); }  .proc-phase.p3 circle { fill: var(--green); }  .proc-phase.p3 .lbl { fill: var(--green); }

.proc-card rect { fill: #fff; stroke: var(--line); stroke-width: 1.5;
  filter: drop-shadow(0 6px 18px rgba(33,57,117,.07)); }
.proc-card .stem { fill: none; stroke: var(--line); stroke-width: 2; stroke-linejoin: round; }
.proc-card .h { font-size: 17px; font-weight: 700; fill: var(--navy); }
.proc-card .d { font-size: 13.5px; fill: var(--muted); }
.proc-card .k { font-size: 11px; font-weight: 800; letter-spacing: 1.1px; }
.proc-card.c1 .k { fill: var(--accent); } .proc-card.c2 .k { fill: var(--purple); } .proc-card.c3 .k { fill: var(--green); }

/* the spine fills left to right, phases and cards follow it */
.proc .proc-spine { transform: scaleX(0); }
.reveal.in .proc .proc-spine { animation: proc-fill 1.5s cubic-bezier(.4,0,.2,1) .2s forwards; }
@keyframes proc-fill { to { transform: scaleX(1); } }
.proc .proc-phase, .proc .proc-card { opacity: 0; }
.reveal.in .proc .proc-phase { animation: proc-in .55s ease forwards; }
.reveal.in .proc .proc-card  { animation: proc-in .55s ease forwards; }
.reveal.in .proc .p1 { animation-delay: .35s } .reveal.in .proc .c1 { animation-delay: .5s }
.reveal.in .proc .p2 { animation-delay: .75s } .reveal.in .proc .c2 { animation-delay: .9s }
.reveal.in .proc .p3 { animation-delay: 1.15s } .reveal.in .proc .c3 { animation-delay: 1.3s }
@keyframes proc-in { to { opacity: 1; } }

@media (max-width: 860px) {
  .proc-weeks text { font-size: 17px; }
  .proc-phase .lbl { font-size: 18px; }
  .proc-card .h { font-size: 23px; } .proc-card .d { font-size: 18px; } .proc-card .k { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .proc .proc-spine { transform: scaleX(1); animation: none; }
  .proc .proc-phase, .proc .proc-card { opacity: 1; animation: none; }
}

/* ============================================================
   NINETY DAY ROADMAP  (/compounding)
   Swimlanes showing when each layer starts and which workflows
   land in it, over a cumulative hours curve.
   ============================================================ */
.road-wrap { max-width: 1100px; margin: 8px auto 52px; padding: 0 16px; }
.road { width: 100%; height: auto; overflow: visible; }
.road-scale text { font-size: 11px; font-weight: 800; letter-spacing: 1.5px; fill: var(--muted); text-anchor: middle; }
.road-grid line { stroke: var(--line); stroke-width: 1.5; stroke-dasharray: 3 5; }
.road-axis { stroke: var(--line); stroke-width: 1.5; }

.lane .lane-lbl { font-size: 12px; font-weight: 800; letter-spacing: 1.4px; }
.lane .lane-sub { font-size: 11.5px; fill: var(--muted); }
.lane .bar { opacity: .16; }
.lane .wf circle { stroke: #fff; stroke-width: 1.5; }
.lane .wf text { font-size: 13px; font-weight: 600; fill: var(--navy); }
.lane.l1 .lane-lbl { fill: var(--accent); } .lane.l1 .bar, .lane.l1 .wf circle { fill: var(--accent); }
.lane.l2 .lane-lbl { fill: var(--green); }  .lane.l2 .bar, .lane.l2 .wf circle { fill: var(--green); }
.lane.l3 .lane-lbl { fill: var(--purple); } .lane.l3 .bar, .lane.l3 .wf circle { fill: var(--purple); }

.road-line { fill: none; stroke: var(--accent); stroke-width: 3; stroke-linejoin: round; }
.road-dot circle { fill: var(--accent); stroke: #fff; stroke-width: 2; }
.road-cap { font-size: 11px; font-weight: 800; letter-spacing: 1.2px; fill: var(--muted); }

.road .lane, .road .road-line, .road .road-fill, .road .road-dot { opacity: 0; }
.reveal.in .road .lane { animation: road-in .6s ease forwards; }
.reveal.in .road .l1 { animation-delay: .15s }
.reveal.in .road .l2 { animation-delay: .45s }
.reveal.in .road .l3 { animation-delay: .75s }
.reveal.in .road .road-fill { animation: road-in .8s ease 1.05s forwards; }
.reveal.in .road .road-dot  { animation: road-in .6s ease 1.5s forwards; }
.reveal.in .road .road-line {
  opacity: 1; stroke-dasharray: 1100; stroke-dashoffset: 1100;
  animation: road-draw 1.3s cubic-bezier(.4,0,.2,1) 1.05s forwards;
}
@keyframes road-in { to { opacity: 1; } }
@keyframes road-draw { to { stroke-dashoffset: 0; } }

@media (max-width: 900px) {
  .road-scale text, .lane .lane-lbl { font-size: 17px; }
  .lane .lane-sub, .lane .wf text { font-size: 16px; }
  .road-cap { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .road .lane, .road .road-line, .road .road-fill, .road .road-dot { opacity: 1; animation: none; }
  .road .road-line { stroke-dashoffset: 0; }
}

/* ============================================================
   TIER COMPARISON  (/pricing)
   The three cards say what each tier costs. This says what the
   axis actually is: who operates the thing.
   ============================================================ */
.tier-wrap { max-width: 1100px; margin: 72px auto 0; padding: 0 16px; }
.tier-wrap .center { text-align: center; }
.tiers { width: 100%; height: auto; overflow: visible; margin-top: 36px; }

.tier-axis .ax { font-size: 11.5px; font-weight: 800; letter-spacing: 1.6px; fill: var(--muted); }
.tier-axis .ax.r { text-anchor: end; }
.tier-axis line { stroke: var(--line); stroke-width: 1.5; }
.tier-axis polygon { fill: var(--line); }

.tier rect { fill: #fff; stroke: var(--line); stroke-width: 1.5; }
.tier .nm { font-size: 17px; font-weight: 700; fill: var(--navy); }
.tier .pr { font-family: var(--font-round); font-size: 34px; fill: var(--navy); }
.tier .pu { font-size: 12.5px; fill: var(--muted); }
.tier .rule { stroke: var(--line); stroke-width: 1.5; }
.tier .ln { font-size: 13.5px; fill: var(--muted); }

.tier.featured rect { stroke: var(--navy); stroke-width: 2.5;
  filter: drop-shadow(0 18px 40px rgba(33,57,117,.16)); }
.tier.featured .pill { fill: var(--purple); stroke: none; filter: none; }
.tier.featured .pilltx { font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px;
  fill: #fff; text-anchor: middle; }
.tier.featured .pr { fill: var(--accent); }

.tier-note { text-align: center; color: var(--muted); font-size: 14px;
  max-width: 660px; margin: 28px auto 0; }

.tiers .tier { opacity: 0; }
.reveal.in .tiers .t1 { animation: tier-in .6s ease .1s forwards; }
.reveal.in .tiers .t2 { animation: tier-in .6s ease .3s forwards; }
.reveal.in .tiers .t3 { animation: tier-in .6s ease .5s forwards; }
@keyframes tier-in { to { opacity: 1; } }

@media (max-width: 900px) {
  .tier .nm { font-size: 25px; } .tier .ln { font-size: 19px; }
  .tier .pu { font-size: 18px; } .tier-axis .ax { font-size: 16px; }
  .tier.featured .pilltx { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .tiers .tier { opacity: 1; animation: none; } }

/* ============================================================
   WIDE DIAGRAMS ON NARROW SCREENS
   These three are schedules and comparisons: squeezing them to a
   phone width renders 4px type. Below 900px they keep their
   designed width and pan horizontally instead, the same pattern
   already used for the Slack scope table.
   ============================================================ */
@media (max-width: 900px) {
  .proc-wrap, .road-wrap, .tier-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }
  /* min-width must equal the viewBox width, otherwise the SVG still scales
     down inside the scroller and the type shrinks with it */
  .proc-wrap > .proc     { min-width: 1060px; }
  .road-wrap > .road     { min-width: 1060px; }
  .tier-scroll > .tiers  { min-width: 1060px; }

  /* the media-query type bumps are unnecessary once width is preserved */
  .proc-weeks text { font-size: 11px; }
  .proc-phase .lbl { font-size: 12.5px; }
  .proc-card .h { font-size: 17px; } .proc-card .d { font-size: 13.5px; } .proc-card .k { font-size: 11px; }
  .road-scale text, .lane .lane-lbl { font-size: 12px; }
  .lane .lane-sub { font-size: 11.5px; } .lane .wf text { font-size: 13px; }
  .road-cap { font-size: 11px; }
  .tier .nm { font-size: 17px; } .tier .ln { font-size: 13.5px; }
  .tier .pu { font-size: 12.5px; } .tier-axis .ax { font-size: 11.5px; }
  .tier.featured .pilltx { font-size: 10.5px; }

  .proc-wrap::after, .road-wrap::after {
    content: "scroll to see the full timeline";
    display: block; text-align: center; font-size: 12px;
    color: var(--muted); padding-top: 10px; letter-spacing: .3px;
  }
}

/* ---- the brain: a circuit board, silhouette plus routed traces ---- */
.brain-halo { fill: #7e9ce4; opacity: .12; filter: url(#soft); }
.cb-outline path {
  fill: rgba(54,98,208,.07); stroke: var(--accent); stroke-width: 3;
  stroke-linejoin: round;
}
.cb-traces path {
  fill: none; stroke: var(--accent); stroke-width: 1.4; opacity: .7;
  stroke-linecap: round; stroke-linejoin: round;
}
.cb-vias circle { fill: var(--navy); }

.sb-diagram .brain { opacity: 0; }
.sb-diagram.in .brain { animation: brain-fade 1.1s ease .3s forwards; }
@keyframes brain-fade { from { opacity: 0; } to { opacity: 1; } }

/* the silhouette draws itself, then the traces energise */
.sb-diagram .cb-outline path { stroke-dasharray: 1000; stroke-dashoffset: 1000; }
.sb-diagram.in .cb-outline path { animation: cb-draw 1.6s ease .35s forwards; }
@keyframes cb-draw { to { stroke-dashoffset: 0; } }
.sb-diagram .cb-traces, .sb-diagram .cb-vias { opacity: 0; }
.sb-diagram.in .cb-traces { animation: brain-fade 1s ease 1.1s forwards; }
.sb-diagram.in .cb-vias { animation: brain-fade .8s ease 1.5s forwards; }

@media (prefers-reduced-motion: reduce) {
  .sb-diagram .brain, .sb-diagram .cb-traces, .sb-diagram .cb-vias { opacity: 1; animation: none; }
  .sb-diagram .cb-outline path { stroke-dashoffset: 0; animation: none; }
}