/* =============================================================
   DATABASIN — SHARED COMPONENT LIBRARY
   Layer 2: loaded after marketing-shell.css, before page sidecar.

   Load order: marketing-shell.css → components.css → page-*.css

   Add to this file when a pattern appears in 3+ page sidecars.
   Sidecars override via class selectors — never ID or !important.
   ============================================================= */

/* ANIMATIONS */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* SCROLL REVEAL UTILITY
   JS sets .visible on elements when they enter the viewport.
   Use .d1–.d4 for staggered delays. */
/* 0.65s over 24px meant a visitor scrolling at ordinary speed met entire
   sections still at opacity 0 — the outcome, ecosystem, pricing and final-CTA
   bands all rendered as empty viewports mid-scroll. An entrance should confirm
   arrival, not gate it: 240ms over 10px, on an ease-out. */
/* `html.js .reveal`, NOT bare `.reveal`.
   The hidden state is opt-in and only applies once JavaScript has confirmed it
   is running. Bare `.reveal { opacity: 0 }` meant 674 elements across 26 pages
   rendered BLANK for anyone whose JS was disabled, blocked, or simply slow:
   on /platform/ that was 27 elements including the section headings; on the
   homepage it was all four proof figures and the customer quote. Nothing
   reported it, because the page looked intact and the content was just gone.
   The class is set by an inline script in <head> (renderCommonHead), so it
   lands before first paint and there is no flash of hidden content. */
html.js .reveal {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 240ms cubic-bezier(0.2, 0, 0, 1),
    transform 240ms cubic-bezier(0.2, 0, 0, 1);
}
html.js .reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
html.js .reveal.d1 { transition-delay: 0.05s; }
html.js .reveal.d2 { transition-delay: 0.10s; }
html.js .reveal.d3 { transition-delay: 0.15s; }
html.js .reveal.d4 { transition-delay: 0.20s; }

/* BUTTONS — standard Databasin CTA buttons.
   Pages with extended variants (aamc, tldr: inline-flex icons; homepage/vs: inline-block)
   keep their own definitions and will override these. */
.btn-primary {
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  background: var(--teal);
  text-decoration: none;
  padding: 14px 32px;
  border-radius: 100px;
  transition: background 0.18s, transform 0.12s;
}
.btn-primary:hover {
  background: var(--teal-mid);
  transform: translateY(-2px);
}
.btn-primary:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}
.btn-secondary {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  padding: 14px 32px;
  border-radius: 100px;
  border: 1.5px solid var(--light);
  transition: border-color 0.18s, transform 0.12s;
}
.btn-secondary:hover {
  border-color: #aaa;
  transform: translateY(-2px);
}
.btn-secondary:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 3px;
}

:is(.news-article-body, .docs-body) pre {
  margin-bottom: 28px;
  scrollbar-width: thin;
  scrollbar-color: var(--teal) transparent;
}

:is(.news-article-body, .docs-body) pre::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

:is(.news-article-body, .docs-body) pre::-webkit-scrollbar-track {
  background: transparent;
}

:is(.news-article-body, .docs-body) pre::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: var(--teal);
}

/* BREADCRUMB — shared typography across 14+ pages. Layout (width, margin,
   padding) stays in page sidecars; pages with full-bleed or bespoke layouts
   would otherwise be broken by global wrapper constraints. */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--mid);
}
.breadcrumb a {
  color: var(--signal-deep);
  text-decoration: none;
  transition: color 0.18s;
}
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb a:focus-visible {
  outline: 2px solid var(--teal);
  outline-offset: 2px;
  border-radius: 2px;
}
/* --light is a HAIRLINE colour and reads 1.35:1 as a glyph. A separator you
   cannot see is noise, not structure. */
.breadcrumb-sep { color: var(--ink-2); }
.breadcrumb span:last-child { color: var(--ink); }

/* HERO — shared typography/animation across 25+ pages. Layout properties
   (padding, max-width, margin, background) stay in page sidecars: pages
   range from constrained two-column heroes to full-bleed dark heroes,
   and a global wrapper rule breaks the full-bleed variants. */

.hero-h1 {
  font-size: clamp(34px, 4.4vw, 52px);
  color: var(--signal);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--signal);
  margin-bottom: 32px;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.2s forwards;
  font-family: var(--font-display);
}
/* Italic, not coloured. Matches the homepage: an editorial serif does the
   emphasis without spending the signal, and it stops every hero heading on
   the site sharing the same accent-second-clause template. */
.hero-h1 em { font-style: italic; }
.hero-sub {
  font-size: 17px;
  line-height: 1.75;
  color: var(--mid);
  margin-bottom: 56px;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.35s forwards;
}
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeUp 0.8s ease 0.5s forwards;
}

/* CTA BAND — shared typography across 16+ pages. Layout properties (padding,
   max-width, margin, text-align) stay in page sidecars for the same reason
   as .hero: width/centering is page-level layout, not a global default. */

.cta-h2 {
  font-size: clamp(34px, 3.9vw, 48px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin-bottom: 24px;
  font-family: var(--font-display);
}
.cta-h2 em {
  font-style: italic;
}
.cta-sub {
  font-size: 17px;
  line-height: 1.7;
  color: var(--mid);
  margin: 0 auto 40px;
}
.cta-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

/* SITEWIDE SEARCH — nav button + overlay, injected by /assets/js/search.js */
.nav-search-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--light);
  border-radius: 50%;
  background: transparent;
  color: var(--mid);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.nav-search-btn:hover { color: var(--signal-deep); border-color: var(--teal); }
.nav-search-btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }

.search-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
  background: rgba(10, 14, 13, 0.45);
  padding: 12vh 20px 20px;
}
.search-overlay.open { display: block; }
@media (prefers-reduced-motion: no-preference) {
  .search-overlay { backdrop-filter: blur(3px); }
  .search-overlay.open .search-box { animation: searchPop 0.18s ease; }
}
@keyframes searchPop {
  from { opacity: 0; transform: translateY(-8px) scale(0.99); }
  to   { opacity: 1; transform: none; }
}
.search-box {
  max-width: 620px;
  margin: 0 auto;
  background: var(--white);
  border-radius: 14px;
  box-shadow: 0 30px 90px -20px rgba(0, 0, 0, 0.45);
  overflow: hidden;
}
.search-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid var(--light);
  font-family: var(--font);
  font-size: 17px;
  color: var(--ink);
  padding: 18px 22px;
  background: var(--white);
}
.search-input:focus { outline: none; }
.search-results {
  max-height: 52vh;
  overflow-y: auto;
  padding: 8px;
}
.search-result {
  display: block;
  padding: 11px 14px;
  border-radius: 9px;
  text-decoration: none;
}
.search-result:hover,
.search-result.active { background: var(--teal-light); }
.search-result-meta {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--signal-deep);
  margin-bottom: 2px;
}
.search-result-title {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--ink);
}
.search-result-desc {
  display: block;
  font-size: 12.5px;
  line-height: 1.45;
  color: var(--mid);
  margin-top: 2px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.search-empty {
  font-size: 13.5px;
  color: var(--mid);
  padding: 22px 16px;
  text-align: left;
}
.search-hint {
  display: flex;
  gap: 18px;
  justify-content: flex-end;
  font-family: var(--mono);
  font-size: 10px;
  color: #b5b1aa;
  border-top: 1px solid var(--light);
  padding: 9px 16px;
}

/* BRIDGE — "Build my workspace" express-signup sheet, opened by
   /assets/js/mobile-bridge.js when a visitor (any device) clicks a signup CTA.
   Bottom sheet on phones, centered card on larger screens. */
.bridge-overlay {
  position: fixed;
  inset: 0;
  z-index: 320;
  display: none;
  background: rgba(10, 14, 13, 0.5);
  align-items: flex-end;
  justify-content: center;
}
.bridge-overlay.open { display: flex; }
.bridge-lock, .bridge-lock body { overflow: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .bridge-overlay { backdrop-filter: blur(3px); }
  .bridge-overlay.open .bridge-sheet { animation: bridgeUp 0.24s ease; }
}
@keyframes bridgeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: none; }
}
.bridge-sheet {
  position: relative;
  width: 100%;
  max-width: 480px;
  background: var(--white);
  border-radius: 18px 18px 0 0;
  padding: 30px 24px 28px;
  box-shadow: 0 -18px 60px -12px rgba(0, 0, 0, 0.35);
}
@media (min-width: 600px) {
  .bridge-overlay { align-items: center; padding: 20px; }
  .bridge-sheet { border-radius: 18px; padding: 34px 32px 30px; }
}
.bridge-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 50%;
  background: var(--off-white);
  color: var(--mid);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.bridge-kicker {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--signal-deep);
  margin-bottom: 10px;
}
.bridge-title {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 10px;
}
.bridge-sub {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--mid);
  margin: 0 0 18px;
}
.bridge-form { display: flex; flex-direction: column; gap: 10px; }
.bridge-email {
  width: 100%;
  font-family: var(--font);
  font-size: 16px; /* ≥16px prevents iOS zoom-on-focus */
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--light);
  border-radius: 12px;
  padding: 13px 16px;
}
.bridge-email:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px var(--teal-light);
}
.bridge-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.bridge-send {
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  background: var(--teal);
  border: none;
  border-radius: 100px;
  padding: 14px 32px;
  cursor: pointer;
  transition: background 0.18s;
}
.bridge-send:hover { background: var(--teal-mid); }
.bridge-send:disabled { opacity: 0.65; cursor: default; }
.bridge-error {
  font-size: 13px;
  color: #b3261e;
  margin-top: 10px;
}
.bridge-done { text-align: left; padding: 8px 0 4px; }
.bridge-done-mark {
  width: 52px;
  height: 52px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--teal-light);
  color: var(--signal-deep);
  font-size: 26px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.bridge-continue {
  display: inline-block;
  margin-top: 16px;
  font-size: 13px;
  color: var(--mid);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.bridge-continue:hover { color: var(--signal-deep); }

/* MOBILE READING PASS — shared-shell typography and CTA ergonomics on phones.
   Page sidecars keep their own layout; this only tunes the shared components
   so long-form copy stays comfortable and actions stay thumb-sized. */
@media (max-width: 640px) {
  .hero-h1 { font-size: clamp(32px, 8.5vw, 40px); letter-spacing: -0.03em;
	color: var(--signal);
}
  .hero-sub { font-size: 16px; line-height: 1.7; margin-bottom: 40px; }
  .cta-h2 { font-size: clamp(30px, 8vw, 40px); }
  .cta-sub { font-size: 16px; line-height: 1.7; }
  .breadcrumb { font-size: 10.5px; }
}
@media (max-width: 480px) {
  .hero-actions, .cta-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn-primary, .hero-actions .btn-secondary,
  .cta-actions .btn-primary, .cta-actions .btn-secondary {
    display: block;
    text-align: center;
    padding: 15px 24px;
  }
}

/* BRIDGE STICKY BAR — mobile-only bottom action bar injected by
   /assets/js/mobile-bridge.js once the visitor scrolls past the hero. Tapping it
   expands an inline express-signup form in place (.expanded), confirming
   inline (.done) — no sheet. Hidden while the sheet is open, dismissible per
   session, safe-area aware (iPhone home indicator). */
.bridge-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 310;
  display: none;
  align-items: center;
  gap: 10px;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.97);
  border-top: 1px solid var(--light);
  box-shadow: 0 -10px 34px rgba(0, 0, 0, 0.12);
  transform: translateY(102%);
  transition: transform 0.28s ease;
}
@media (prefers-reduced-motion: no-preference) {
  .bridge-bar { backdrop-filter: blur(8px); }
}
.bridge-bar.show { transform: none; }
.bridge-lock .bridge-bar { display: none !important; }
@media (max-width: 820px), ((pointer: coarse) and (max-width: 1024px)) {
  .bridge-bar { display: flex; }
}
.bridge-bar-btn {
  flex: 1;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  background: var(--teal);
  border: none;
  border-radius: 100px;
  padding: 13px 18px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bridge-bar-btn small {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  opacity: 0.85;
  letter-spacing: 0.04em;
}
.bridge-bar-close {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid var(--light);
  border-radius: 50%;
  background: transparent;
  color: var(--mid);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}

/* Expanded state: the bar IS the signup form. `.expanded` swaps the pitch
   button for an inline email row; `.done` swaps the form for the inline
   confirmation. */
.bridge-bar-form { display: none; flex: 1; min-width: 0; }
.bridge-bar.expanded .bridge-bar-btn { display: none; }
.bridge-bar.expanded .bridge-bar-form { display: block; }
.bridge-bar-row { display: flex; gap: 8px; }
.bridge-bar-email {
  flex: 1;
  min-width: 0;
  font-family: var(--font);
  font-size: 16px; /* >=16px so iOS doesn't zoom the viewport on focus */
  background: var(--white);
  border: 1.5px solid var(--teal);
  border-radius: 100px;
  padding: 11px 16px;
  outline: none;
}
.bridge-bar-send {
  flex: 0 0 auto;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  background: var(--teal);
  border: none;
  border-radius: 100px;
  padding: 11px 18px;
  cursor: pointer;
}
.bridge-bar-send:disabled { opacity: 0.7; }
.bridge-bar-note {
  margin-top: 6px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--mid);
}
.bridge-bar-error {
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #b3261e;
}
.bridge-bar-fallback {
  color: inherit;
  text-decoration: underline;
  white-space: nowrap;
}
.bridge-bar-done {
  display: none;
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.45;
}
.bridge-bar.done .bridge-bar-form { display: none; }
.bridge-bar.done .bridge-bar-done { display: block; }

/* BRIDGE CTA CARD — inline mid-page conversion moment. Primary = signup link
   (bridge-intercepted on all devices); secondary = explicit [data-bridge-open]
   "build my workspace with just my email" (same express-signup sheet).
   Hidden secondary when the bridge is off. */
.bridge-cta-card {
  max-width: 880px;
  margin: 56px auto;
  padding: 34px 36px;
  background: var(--white);
  border: 1px solid var(--light);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  flex-wrap: wrap;
  box-shadow: 0 16px 48px rgba(13, 92, 82, 0.07);
}

.bridge-cta-h3 {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 6px;
}
.bridge-cta-sub {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--mid);
  margin: 0;
  max-width: 440px;
}
.bridge-cta-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

/* Inline express form — one-step email capture inside bridge-cta cards */
.bridge-inline-form { width: 100%; max-width: 460px; }
.bridge-inline-row { display: flex; gap: 8px; align-items: stretch; }
.bridge-inline-email {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font);
  font-size: 16px; /* ≥16px prevents iOS zoom-on-focus */
  color: var(--ink);
  background: var(--white);
  border: 1.5px solid var(--light);
  border-radius: 100px;
  padding: 12px 18px;
}
.bridge-inline-email:focus {
  outline: none;
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(13, 92, 82, 0.15);
}
.bridge-inline-send {
  flex: 0 0 auto;
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  background: var(--teal);
  border: none;
  border-radius: 100px;
  padding: 12px 22px;
  cursor: pointer;
  transition: background 0.18s;
}
.bridge-inline-send:hover { background: var(--teal-mid); }
.bridge-inline-send:disabled { opacity: 0.65; cursor: default; }
.bridge-inline-msg {
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #b3261e;
  text-align: left;
}
.bridge-inline-msg.is-success { color: var(--signal-deep); }
.bridge-inline-cont { color: inherit; text-decoration: underline; white-space: nowrap; }
.bridge-inline-fallback {
  display: none;
  margin-top: 8px;
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--signal-deep);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* When the bridge is unconfigured the form is inert — hide it, show the link. */
.bridge-off .bridge-inline-form { display: none; }
.bridge-off .bridge-inline-fallback { display: inline-block; }
@media (max-width: 520px) {
  .bridge-inline-row { flex-direction: column; }
}


@media (max-width: 640px) {
  .bridge-cta-card {
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    padding: 28px 22px;
    margin: 40px 16px;
  }
  .bridge-cta-sub { max-width: none; }
  .bridge-cta-actions { align-items: stretch; }
  .bridge-cta-actions .btn-primary { text-align: center; }
}

/* Save-for-later link in bottom CTA bands */
.cta-bridge-note {
  margin-top: 18px;
  font-size: 13.5px;
}
.cta-bridge-note a, button.cta-bridge-link {
  font-family: var(--font);
  font-size: 13.5px;
  color: var(--mid);
  background: none;
  border: none;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cta-bridge-note a:hover, button.cta-bridge-link:hover { color: var(--signal-deep); }
.bridge-off .cta-bridge-note { display: none; }


/* VIDEO LIGHTBOX — click any in-page product video to enlarge it.
   Applied by /assets/js/video-lightbox.js (loaded on the marketing layout);
   .vlb-zoomable is stamped onto every <video> inside <main>. */
.vlb-zoomable { cursor: zoom-in; transition: box-shadow 0.15s ease; }
.vlb-zoomable:hover { box-shadow: 0 0 0 3px rgba(13, 92, 82, 0.4); }
.vlb-zoomable:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }

.vlb-overlay {
  position: fixed;
  inset: 0;
  z-index: 340;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(8, 12, 11, 0.84);
  padding: 28px;
}
.vlb-overlay.open { display: flex; }
@media (prefers-reduced-motion: no-preference) {
  .vlb-overlay { backdrop-filter: blur(4px); }
  .vlb-overlay.open .vlb-frame { animation: vlbPop 0.18s ease; }
}
@keyframes vlbPop {
  from { opacity: 0; transform: scale(0.975); }
  to   { opacity: 1; transform: none; }
}
.vlb-frame { margin: 0; width: 100%; max-width: min(1500px, 94vw); }
.vlb-video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 84vh;
  border-radius: 12px;
  background: #000;
  box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.7);
  cursor: auto;
}
.vlb-caption {
  margin-top: 10px;
  text-align: center;
  font-size: 13.5px;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}
.vlb-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
}
.vlb-close:hover { background: rgba(255, 255, 255, 0.24); }
.vlb-close:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.vlb-lock, .vlb-lock body { overflow: hidden; }

/* REDUCED MOTION — universal baseline; pages may add page-specific selectors */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ---- AGENT STAGE (flagship) ------------------------------------------------
   The one full-bleed dark moment on an otherwise light page. Three beats share
   one pinned visual; /assets/js/agent-stage.js swaps which frame is opaque as the copy
   scrolls. --ag-stage MUST match --stage in .claude/skills/databasin-creatives/assets/agents/_base.css, or the
   rendered images will show their own background as a seam.
   Below 900px the pinning is disabled (in CSS and in the script) and the beats
   render stacked, each with its own image. --------------------------------- */
.agstage {
  --ag-stage: var(--paper-2); /* Story v2 1008: images re-rendered on paper-2 */
  --ag-line: var(--ink-2);
  --ag-dim: var(--ink-2);
  --ag-bright: var(--signal);
  position: relative;
  background:
    radial-gradient(900px 520px at 50% 0%, var(--signal-tint), transparent 68%),
    var(--paper-2);
  color: var(--ink-0);
  padding: 120px 24px 108px;
  /* NO `overflow: hidden` here. It makes this section a scroll container, which
     makes it the sticky child's containing scrollport — and Chrome then applies
     the `top: 104px` offset statically, pushing the pinned visual 104px down the
     page at scroll 0. Nothing in this section overflows, so clipping isn't
     needed; if it ever is, use `overflow: clip` (clips without scrolling). */
}

/* Track: pinned visual + scrolling copy */
.agstage-track {
  max-width: 1240px;
  margin: 84px auto 0;
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: 64px;
  align-items: start;
}

.agstage-sticky {
  position: sticky;
  /* Clears the fixed nav (72px) with breathing room. */
  top: 104px;
}

.agstage-frames {
  position: relative;
  aspect-ratio: 1280 / 760;
}
.agstage-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transform: scale(0.985);
  transition: opacity 0.55s ease, transform 0.55s ease;
  will-change: opacity, transform;
}
.agstage-frame.is-active { opacity: 1; transform: scale(1); }

.agstage-legend {
  margin-top: 22px;
  display: flex;
  gap: 10px;
  list-style: none;
}
.agstage-legend li {
  flex: 1;
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  color: var(--ink-2);
  border-top: 2px solid var(--ag-line);
  padding-top: 11px;
  transition: color 0.35s ease, border-color 0.35s ease;
}
.agstage-legend li span {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 600;
}
.agstage-legend li.is-active {
  color: var(--ink-0);
  border-top-color: var(--ag-bright);
}
.agstage-legend li.is-active span { color: var(--ag-bright); }

/* Copy blocks — tall enough that each one owns a screen of scroll. */
.agstage-steps { display: flex; flex-direction: column; }
.agstage-step {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Inactive steps were 0.32 (~1.5:1 on this ground) — two-thirds of this
     section's copy was effectively unreadable at any given scroll position.
     0.55 still recedes behind the active step but stays legible.
     NOTE: shared with /agents/ — this rule lives here, not in a sidecar. */
  opacity: 0.55;
  transition: opacity 0.45s ease;
}
.agstage-step.is-active { opacity: 1; }
.agstage-step-n {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  color: var(--ag-bright);
  margin-bottom: 14px;
}
.agstage-step-h {
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.03em;
  color: var(--ink-0);
  margin-bottom: 18px;
}
.agstage-step-b {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--ag-dim);
  margin-bottom: 14px;
}
.agstage-step-b em { font-style: normal; color: var(--ink-0); }
.agstage-step-b:last-child { margin-bottom: 0; }
.agstage-step-q {
  margin-top: 6px;
  padding: 16px 18px;
  border-left: 2px solid var(--ag-bright);
  background: var(--paper-2);
  border-radius: 0 10px 10px 0;
  font-family: var(--mono);
  font-size: 14px;
  line-height: 1.65;
  color: var(--ink-0);
}

/* Stacked mode — no pinning, every beat shows its own frame above its own copy.
   The images and the copy blocks have to live in two separate containers for the
   pinned desktop layout, so `display: contents` flattens both into the track's
   flex box and `order` interleaves them. Without it, mobile renders all three
   images and then all three captions, and the pairing is lost. */
@media (max-width: 900px) {
  .agstage { padding: 84px 20px 76px; }
  .agstage-track {
    display: flex;
    flex-direction: column;
    gap: 32px;
    margin-top: 48px;
  }
  .agstage-sticky,
  .agstage-frames,
  .agstage-steps { display: contents; }
  .agstage-legend { display: none; }
  .agstage-frame {
    position: static;
    height: auto;
    opacity: 1;
    transform: none;
    border-radius: 14px;
  }
  .agstage-frames > :nth-child(1) { order: 1; }
  .agstage-steps  > :nth-child(1) { order: 2; }
  .agstage-frames > :nth-child(2) { order: 3; }
  .agstage-steps  > :nth-child(2) { order: 4; }
  .agstage-frames > :nth-child(3) { order: 5; }
  .agstage-steps  > :nth-child(3) { order: 6; }
  .agstage-step { min-height: 0; opacity: 1; }

}

/* Honor reduced motion: the sequence still advances, it just doesn't animate. */
@media (prefers-reduced-motion: reduce) {
  .agstage-frame,
.agstage-step,
.agstage-legend li { transition: none; }
  .agstage-frame { transform: none; }
  .agstage-frame.is-active { transform: none; }
}

/* ── ONE AXIS ───────────────────────────────────────────────────────────────
   Every heading, paragraph and list inside main starts at the SAME left edge
   as the copy beneath it. One vertical spine per column, top to bottom.

   This replaces a centred-heading system that produced the exact complaint it
   was meant to solve. The reason it failed is that a section had two ways to
   drift off-axis and the old rule only addressed one of them:

     pricing hero    text-align   margin      left edge
       h1            center       auto         350
       lead          center       auto         420
       fine print    start        0            218

   Three starting points stacked vertically. Centring the text is only half of
   it: a max-width block with `margin: 0 auto` floats to the middle of its
   container as well, so two blocks with different measures start in two
   different places even when both are centred. Both causes are addressed
   below: alignment for every text block, and the margin reset for the ones
   that sit inside a wrapper (see the caveat on that second rule).

   A max-width on a text block is a MEASURE, not a position: it caps the line
   length for readability and then hangs off the left edge. Hence
   `margin-inline: 0 auto` rather than `margin: 0 auto`.

   !important is deliberate and load-bearing. Around 30 per-page stylesheets
   load AFTER this file and each centres its own hero with a class selector,
   which outranks anything unprefixed that could be written here. This is the
   site-wide invariant, so it is stated as one.

   Lists get the alignment but NOT the margin reset: their left margin is the
   bullet indent. */
main :is(h1, h2, h3, h4, h5, h6, p) {
  text-align: left !important;
}

/* The margin reset is deliberately NOT applied to a text block whose parent is
   the <section> itself. In those sections there is no wrapper holding the
   content column, so the block's OWN `margin: 0 auto` is what positions it;
   zeroing that shoved the copy against the page edge (homepage §agents, and
   the same shape on /agents/ and /tldr/). Where a wrapper does exist, the
   wrapper is the column and the text hangs off its left edge. */
main :not(section) > :is(h1, h2, h3, h4, h5, h6, p) {
  margin-inline: 0 auto !important;
}

main :is(ul, ol, dl, blockquote, figcaption) {
  text-align: left !important;
}

/* The exceptions, and the whole list of them: content that is not read as
   prose. A table cell aligns to its column, and a lone control or badge
   centres inside its own box. */
main :is(th, td) { text-align: revert !important; }

/* These authored states replace dynamically inserted/removed markup. */
[data-context][hidden], [data-customer][hidden], [data-submit-state][hidden],
[data-pdf-state][hidden], .nav-search-btn[hidden], .drawer-search[hidden],
.bridge-bar-fallback[hidden], .bridge-inline-cont[hidden],
#signup-bar[hidden] { display: none !important; }