:root {
  --black: #000000;
  --white: #ffffff;
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #e5e5e5;
  --gray-300: #d4d4d4;
  --gray-400: #a3a3a3;
  --gray-500: #737373;
  --gray-600: #525252;
  --gray-700: #404040;
  --gray-800: #262626;
  --gray-900: #171717;
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
  --radius: 8px;
  --radius-lg: 12px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

/* Baseline reset. Every element below this line gets its final spacing,
   list markers, and form-control typography from a rule further down this
   file - nothing here should ever be visible on its own. */
h1, h2, h3, h4, h5, h6, p, blockquote, figure, dl, dd, ul, ol {
  margin: 0;
}

h1, h2, h3, h4, h5, h6 {
  font-size: inherit;
  font-weight: inherit;
}

ul, ol {
  padding: 0;
  list-style: none;
}

button, input, select, optgroup, textarea {
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
}

/* Responsive images */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--white);
  color: var(--black);
  line-height: 1.6;
  margin: 0;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

main {
  flex: 1;
}

.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Full-bleed rail for the demo surfaces. The demos are three-column compute
   instruments and were being squeezed into a 1100-1600px column. Same 1.5rem
   gutter as .container, so the edges still line up with the rest of the page. */
.container-bleed {
  max-width: none;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Header */
.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 64px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  text-decoration: none;
  color: var(--black);
  font-weight: 700;
  font-size: 1.25rem;
}

.logo-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: var(--black);
  color: var(--white);
  border-radius: 6px;
  font-size: 1rem;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.main-nav a:not(.btn) {
  color: var(--gray-600);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color 0.15s;
}

.main-nav a:not(.btn):hover {
  color: var(--black);
}

/* Hamburger toggle. Hidden by default (desktop, and also the no-JS case
   below 680px - see the media query below): nav_controller.js only reveals
   it once it adds is-collapsible, so a button that can't do anything
   without JS never renders in the first place. */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  border-radius: var(--radius);
  cursor: pointer;
  flex-shrink: 0;
}

.nav-toggle:hover {
  background: var(--gray-100);
}

.nav-toggle-bars,
.nav-toggle-bars::before,
.nav-toggle-bars::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--black);
}

.nav-toggle-bars {
  position: relative;
  transition: background 0.15s ease;
}

.nav-toggle-bars::before,
.nav-toggle-bars::after {
  content: "";
  position: absolute;
  left: 0;
  transition: transform 0.15s ease;
}

.nav-toggle-bars::before {
  top: -6px;
}

.nav-toggle-bars::after {
  top: 6px;
}

/* Icon morphs to an X once the panel is open. Driven off aria-expanded,
   which the controller already keeps in sync, instead of a second class
   that could drift out of sync with it. */
.nav-toggle[aria-expanded="true"] .nav-toggle-bars {
  background: transparent;
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before {
  transform: translateY(6px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after {
  transform: translateY(-6px) rotate(-45deg);
}

/* Below ~680px the five nav items plus the wordmark no longer fit in one
   row (measured ~481px of content against a 390px viewport). Two layers
   here: a plain flex-wrap fallback that works with zero JS, and - only
   once nav_controller.js has added is-collapsible - the hamburger/panel
   behaviour on top of it. */
@media (max-width: 680px) {
  .main-nav {
    flex-wrap: wrap;
    justify-content: flex-end;
    row-gap: 0.5rem;
  }

  .is-collapsible .nav-toggle {
    display: inline-flex;
  }

  .is-collapsible .main-nav {
    display: none;
    position: fixed;
    /* Set on .site-header (this controller's own element) by nav_controller.js
       from its actual measured height, not assumed from .header-inner's
       min-height: 64px - a larger root font size (or anything else that grows
       the header) would otherwise leave the panel floating below a taller
       header instead of meeting its bottom edge. Falls back to 64px for the
       one frame before connect() has run. */
    top: var(--header-height, 64px);
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    margin: 0;
    background: var(--white);
    border-top: 1px solid var(--gray-200);
    padding: 0.5rem 1.5rem 2rem;
    overflow-y: auto;
    z-index: 99;
  }

  .is-collapsible .main-nav.is-open {
    display: flex;
  }

  .is-collapsible .main-nav a:not(.btn) {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    border-bottom: 1px solid var(--gray-100);
  }

  .is-collapsible .main-nav .btn,
  .is-collapsible .main-nav form {
    width: 100%;
  }

  .is-collapsible .main-nav .btn {
    min-height: 44px;
    margin-top: 0.75rem;
  }

  /* Set by nav_controller.js while the mobile panel is open; released on
     close and on Turbo navigation (disconnect()). Scoped to this media query:
     the panel and hamburger only exist below 680px, so if the viewport
     crosses back above it while open (e.g. rotating a phone to landscape)
     this rule must not keep the body scroll-locked with no visible menu and
     no way to reach it - nav_controller.js also actively closes the panel on
     that crossing (see the wideQuery listener), but this scoping is the
     belt-and-suspenders guarantee that above 680px the body is never left
     locked even if that listener somehow didn't fire first. */
  body.nav-open {
    overflow: hidden;
  }
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.15s ease;
}

.btn-primary {
  background: var(--black);
  color: var(--white);
}

.btn-primary:hover {
  background: var(--gray-800);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

.btn-secondary {
  background: var(--white);
  color: var(--black);
  border: 1px solid var(--gray-300);
}

.btn-secondary:hover {
  background: var(--gray-50);
  border-color: var(--gray-400);
}

.btn-ghost {
  background: transparent;
  color: var(--gray-600);
}

.btn-ghost:hover {
  color: var(--black);
}

.btn-lg {
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
}

.btn-block {
  width: 100%;
  display: block;
}

.btn-disabled {
  background: var(--gray-100);
  color: var(--gray-400);
  border: 1px solid var(--gray-200);
  cursor: not-allowed;
}

.model-docs-link {
  font-size: 0.875rem;
  margin: 0.75rem 0 0;
}

/* Hero */
.hero {
  padding: 4.5rem 0 1.75rem;
  text-align: center;
  background: linear-gradient(180deg, var(--gray-50) 0%, var(--white) 100%);
}

.hero-content {
  max-width: 680px;
  margin: 0 auto;
}

.hero-title {
  font-size: clamp(1.75rem, 3.9vw, 2.75rem);
  font-weight: 800;
  line-height: 1.1;
  margin: 0 0 1.5rem;
  letter-spacing: -0.02em;
  max-width: 100%;
}

/* The static headline fits one line once there's room; below that it may wrap. */
@media (min-width: 700px) {
  .hero-title { white-space: nowrap; }
}

.hero-title em {
  font-style: normal;
  color: var(--gray-600);
}

.hero-subtitle {
  font-size: 1.25rem;
  color: var(--gray-600);
  margin: 0 0 2rem;
  line-height: 1.5;
}

.hero-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

.hero-note {
  font-size: 0.875rem;
  color: var(--gray-500);
}

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

/* The reel is a fixed window as wide as the longest word, and the live word is pinned to
   its right edge. That keeps the space between the word and "AI" constant and holds the
   rest of the sentence still: a short word grows leftward into empty space instead of
   pushing the line around. The hidden ghosts are what size the window. */
.slot {
  display: inline-grid;
  justify-items: end;
  vertical-align: baseline;
  white-space: nowrap;
}

.slot > .slot-word {
  grid-area: 1 / 1;
}

.slot-ghost {
  visibility: hidden;
}

.slot-word {
  display: block;
  will-change: transform, opacity;
}

.slot-word.is-leaving {
  animation: slot-out 220ms cubic-bezier(0.4, 0, 1, 1) forwards;
}

.slot-word.is-entering {
  animation: slot-in 560ms cubic-bezier(0.22, 1.4, 0.36, 1) forwards;
}

@keyframes slot-out {
  to {
    transform: translateY(-115%);
    opacity: 0;
  }
}

@keyframes slot-in {
  0% {
    transform: translateY(115%);
    opacity: 0;
  }
  45% {
    opacity: 1;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .slot-word.is-leaving,
  .slot-word.is-entering {
    animation: none;
    transform: none;
    opacity: 1;
  }
}

/* Sections */
section {
  padding: 4rem 0;
}

.section-title {
  font-size: 2rem;
  font-weight: 700;
  text-align: center;
  margin: 0 0 3rem;
}

/* Problem */
.problem-content {
  max-width: 800px;
  margin: 0 auto;
}

.problem-text {
  font-size: 1.25rem;
  text-align: center;
  color: var(--gray-700);
  margin-bottom: 3rem;
}

.problem-text strong {
  color: var(--black);
}

.problem-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.problem-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.problem-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.problem-card p {
  color: var(--gray-600);
  margin: 0;
  font-size: 0.9375rem;
}

/* Vision */
.vision {
  background: var(--gray-50);
}

.vision-content {
  max-width: 900px;
  margin: 0 auto;
}

.vision-text {
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 3rem;
}

.vision-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.feature {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}

.feature-icon {
  font-size: 1.75rem;
  margin-bottom: 0.75rem;
}

.feature h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.feature p {
  color: var(--gray-600);
  margin: 0;
  font-size: 0.9375rem;
}

/* CTA */
.cta {
  background: var(--black);
  color: var(--white);
  text-align: center;
}

.cta-logo {
  max-width: 200px !important;
  margin: 0 auto 2rem !important;
  display: block !important;
  animation: spin 20s linear infinite !important;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.cta h2 {
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 0.75rem;
}

.cta p {
  color: var(--gray-400);
  margin: 0 0 2rem;
  font-size: 1.125rem;
}

/* About */
.about-hero {
  padding: 4rem 0;
  text-align: center;
  background: var(--gray-50);
}

.about-hero h1 {
  font-size: 2.5rem;
  font-weight: 800;
  margin: 0 0 1rem;
}

.about-hero .lead {
  font-size: 1.25rem;
  color: var(--gray-600);
  margin: 0;
}

.about-content {
  padding: 4rem 0;
}

.about-block {
  max-width: 700px;
  margin: 0 auto 3rem;
}

.about-block h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin: 0 0 1rem;
}

.about-block p {
  color: var(--gray-700);
  margin: 0 0 1rem;
  font-size: 1.0625rem;
}

.about-section { max-width: 960px; margin: 0 auto 4rem; }
.about-section > h2 { font-size: 1.75rem; font-weight: 800; margin: 0 0 1.5rem; }
.about-mission { max-width: 760px; }
.about-mission p { color: var(--gray-700); font-size: 1.0625rem; margin: 0 0 1rem; }
.about-mission-quote {
  margin: 1.5rem 0 0;
  padding: 1rem 1.5rem;
  border-left: 3px solid var(--black);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--black);
}
/* Unlike .about-mission/.about-story, the vision pillars are a card grid, not
   a prose column, so this section keeps the full .about-section width. */
.about-vision { max-width: 960px; }
.about-vision-card {
  background: rgba(0, 0, 0, 0.04);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius);
  padding: 1rem;
  margin-bottom: 1rem;
}
.about-vision-card:last-child { margin-bottom: 0; }
.about-vision-card p { margin: 0; color: var(--gray-700); font-size: 0.95rem; }
.about-story { max-width: 760px; }
.about-story p { color: var(--gray-700); font-size: 1.0625rem; margin: 0 0 1rem; }

/* Legal pages */
.legal-hero {
  padding: 4rem 0 2rem;
  text-align: center;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}
.legal-hero h1 { font-size: 2.5rem; font-weight: 800; margin: 0 0 0.5rem; }
.legal-hero .lead { color: var(--gray-600); margin: 0; }
.legal-content { padding: 3rem 0 4rem; }
.legal-text { max-width: 760px; margin: 0 auto; color: var(--gray-700); }
.legal-text > h1 { font-size: 2.25rem; font-weight: 800; color: var(--black); margin: 0 0 0.5rem; }
.legal-text h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--black);
  margin: 3rem 0 1rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-200);
}
.legal-text h3 { font-size: 1.15rem; font-weight: 700; color: var(--black); margin: 2rem 0 0.6rem; }
.legal-text h4 { font-size: 1rem; font-weight: 700; color: var(--gray-800); margin: 1.5rem 0 0.5rem; }
.legal-text p { margin: 0 0 1rem; line-height: 1.7; }
.legal-text ul, .legal-text ol { margin: 0 0 1.25rem; padding-left: 1.4rem; }
.legal-text ul { list-style: disc; }
.legal-text ol { list-style: decimal; }
.legal-text li { margin: 0.4rem 0; line-height: 1.65; }
.legal-text li > ul, .legal-text li > ol { margin: 0.5rem 0; }
.legal-text a { color: var(--black); text-decoration: underline; }
.legal-text strong { color: var(--black); }
.legal-text table { width: 100%; border-collapse: collapse; margin: 1rem 0 1.5rem; font-size: 0.9rem; }
.legal-text th, .legal-text td { border: 1px solid var(--gray-200); padding: 0.5rem 0.75rem; text-align: left; }
.legal-text th { background: var(--gray-50); font-weight: 600; }

/* Blog - long-form reading, same measure-and-hierarchy idiom as .legal-text.
   .container overrides below narrow the shared site container just for this
   section, so the title, meta and body all share one reading column. */
.blog-index { padding: 3rem 0 4rem; }
.blog-index .container { max-width: 740px; }
.blog-index h1 { font-size: 2.5rem; font-weight: 800; margin: 0 0 2rem; }

.blog-list { display: grid; gap: 2rem; }
.blog-list-item { padding-bottom: 2rem; border-bottom: 1px solid var(--gray-200); }
.blog-list-item:last-child { border-bottom: none; padding-bottom: 0; }
.blog-list-item h2 { font-size: 1.5rem; font-weight: 700; margin: 0 0 0.4rem; }
.blog-list-item h2 a { color: var(--black); text-decoration: none; }
.blog-list-item h2 a:hover { text-decoration: underline; }
.blog-excerpt { color: var(--gray-700); font-size: 1rem; line-height: 1.6; margin: 0; }
.blog-empty { color: var(--gray-500); font-size: 1rem; padding: 1rem 0 2rem; }

.blog-post { padding: 3rem 0 4rem; }
.blog-post .container { max-width: 740px; }
.blog-back { display: inline-block; color: var(--gray-500); text-decoration: none; font-size: 0.875rem; margin-bottom: 1.5rem; }
.blog-back:hover { color: var(--black); }
.blog-post h1 { font-size: 2.25rem; font-weight: 800; color: var(--black); margin: 0 0 0.5rem; line-height: 1.2; }
.blog-post .blog-meta { margin: 0 0 2.5rem; }

/* Shared by both views: publish date under a title. */
.blog-meta { color: var(--gray-500); font-size: 0.875rem; margin: 0 0 0.75rem; }

/* Renders whatever the post body's sanitized HTML contains. */
.blog-body { color: var(--gray-700); font-size: 1.0625rem; line-height: 1.7; }
.blog-body p { margin: 0 0 1.25rem; }
.blog-body h2 { font-size: 1.5rem; font-weight: 700; color: var(--black); margin: 2.5rem 0 1rem; }
.blog-body h3 { font-size: 1.15rem; font-weight: 700; color: var(--black); margin: 2rem 0 0.75rem; }
.blog-body ul, .blog-body ol { margin: 0 0 1.25rem; padding-left: 1.4rem; }
.blog-body ul { list-style: disc; }
.blog-body ol { list-style: decimal; }
.blog-body li { margin: 0.4rem 0; line-height: 1.65; }
.blog-body a { color: var(--black); text-decoration: underline; }
.blog-body strong { color: var(--black); }
.blog-body blockquote {
  margin: 1.5rem 0; padding: 0.25rem 1.5rem;
  border-left: 3px solid var(--black); color: var(--gray-700); font-style: italic;
}
.blog-body code {
  background: var(--gray-100); border-radius: 4px; padding: 0.15rem 0.4rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.9em;
}
.blog-body pre {
  background: var(--gray-900); color: var(--white); padding: 1.25rem;
  border-radius: var(--radius); overflow-x: auto; font-size: 0.875rem; line-height: 1.6; margin: 0 0 1.5rem;
}
.blog-body pre code { background: none; padding: 0; color: inherit; font-size: inherit; }

@media (max-width: 600px) {
  .blog-index h1 { font-size: 2rem; }
  .blog-post h1 { font-size: 1.75rem; }
}

/* Contact */
.contact-hero {
  padding: 4rem 0 2rem;
  text-align: center;
  background: var(--gray-50);
  border-bottom: 1px solid var(--gray-200);
}
.contact-hero h1 { font-size: 2.5rem; font-weight: 800; margin: 0 0 0.5rem; }
.contact-hero p { color: var(--gray-600); margin: 0; }
.contact-content { padding: 3rem 0 4rem; }
.contact-grid {
  max-width: 760px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}
.contact-item {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.75rem;
}
.contact-item h2 { font-size: 1.0625rem; font-weight: 600; margin: 0 0 0.5rem; }
.contact-item p { margin: 0; color: var(--gray-700); }
.contact-item a { color: var(--black); }
@media (max-width: 600px) { .contact-grid { grid-template-columns: 1fr; } }

/* Billing */
.billing-hero {
  padding: 4rem 0;
  text-align: center;
  background: var(--gray-50);
}

.billing-hero h1 {
  font-size: 2.5rem;
  font-weight: 800;
  margin: 0 0 1rem;
}

.billing-hero .lead {
  font-size: 1.25rem;
  color: var(--gray-600);
  margin: 0;
}

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 4rem;
}

.pricing-card {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 2rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}

.pricing-card.featured {
  border-color: var(--black);
  box-shadow: var(--shadow-lg);
}

.pricing-split { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-bottom: 3rem; }
.pricing-panel {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 2rem;
  display: flex;
  flex-direction: column;
}
.pricing-panel h2 { font-size: 1.5rem; font-weight: 700; margin: 0 0 0.75rem; }
.pricing-panel p { color: var(--gray-600); margin: 0 0 1rem; }
.pricing-panel .pricing-features { flex: 1; }
.pricing-business { border-color: var(--black); box-shadow: var(--shadow-lg); }
@media (max-width: 800px) { .pricing-split { grid-template-columns: 1fr; } }

.pricing-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.pricing-header h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.pricing-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.25rem;
}

.pricing-price .price {
  font-size: 2.5rem;
  font-weight: 800;
}

.pricing-price .period {
  color: var(--gray-500);
  font-size: 0.9375rem;
}

.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  flex: 1 1 auto;
}

.pricing-features li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0;
  font-size: 0.9375rem;
  color: var(--gray-700);
}

.check-icon {
  width: 20px;
  height: 20px;
  color: var(--gray-400);
  flex-shrink: 0;
}

.pricing-faq {
  max-width: 700px;
  margin: 0 auto;
}

.pricing-faq h2 {
  font-size: 1.75rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 2rem;
}

.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.faq-item h3 {
  font-size: 1rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}

.faq-item p {
  color: var(--gray-600);
  margin: 0;
  font-size: 0.9375rem;
}

/* Footer */
.site-footer {
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  padding: 3rem 0 1.5rem;
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  margin-bottom: 2rem;
}

.footer-brand {
  max-width: 250px;
}

.footer-brand p {
  color: var(--gray-500);
  font-size: 0.875rem;
  margin: 0.5rem 0 0;
}

.footer-links {
  display: flex;
  gap: 3rem;
}

.footer-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.footer-col h4 {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gray-500);
  margin: 0 0 0.25rem;
}

.footer-col a {
  color: var(--gray-700);
  text-decoration: none;
  font-size: 0.9375rem;
}

.footer-col a:hover {
  color: var(--black);
}

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1.5rem;
  border-top: 1px solid var(--gray-200);
}

.footer-bottom p {
  color: var(--gray-500);
  font-size: 0.8125rem;
  margin: 0;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--gray-600);
  font-size: 0.8125rem;
  text-decoration: none;
}

.status-badge:hover {
  color: var(--black);
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--black);
  display: inline-block;
}

/* Responsive */
@media (max-width: 768px) {
  .hero-title {
    font-size: 2.25rem;
  }

  .problem-grid,
  .vision-features,
  .pricing-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    flex-direction: column;
    gap: 2rem;
  }

  .footer-links {
    flex-wrap: wrap;
    gap: 2rem;
  }

  /* Narrow viewport only - desktop's link density stays as approved. */
  .footer-col a {
    display: flex;
    align-items: center;
    min-height: 44px;
  }
}

/* Models index: an organic taxonomy. The graph is enhancement, the list is the
   page. .is-graphed is set by the Stimulus controller once the graph is drawn,
   so the list only disappears when something has actually replaced it. */
.models-index { padding: 3rem 0 4rem; }
.models-index-head { text-align: center; max-width: 34rem; margin: 0 auto 1rem; }
.models-index-head h1 { font-size: 2.5rem; font-weight: 800; margin: 0 0 0.5rem; }
.models-index-head p { color: var(--gray-600); margin: 0; font-size: 1.0625rem; line-height: 1.5; }

.models-graph { position: relative; }
.models-graph-canvas { display: block; width: 100%; height: 640px; touch-action: none; }

.bubble-link { stroke: var(--gray-300); stroke-width: 1.5; }
.bubble circle {
  fill: var(--white);
  stroke: var(--gray-300);
  stroke-width: 1.5;
  transition: stroke 0.15s, fill 0.15s;
}
.bubble-label {
  font-size: 11px; font-weight: 600; fill: var(--gray-800);
  dominant-baseline: middle; pointer-events: none; user-select: none;
}
.bubble-icon {
  stroke: var(--gray-500); stroke-width: 1.4; fill: none;
  stroke-linecap: round; stroke-linejoin: round; pointer-events: none;
}

.bubble-root circle { fill: var(--black); stroke: var(--black); }
.bubble-root .bubble-label { fill: var(--white); font-weight: 800; font-size: 12px; }

.bubble-category { cursor: pointer; }
.bubble-category circle { stroke: var(--gray-400); }
.bubble-category:hover circle,
.bubble-category:focus-visible circle { stroke: var(--black); fill: var(--gray-50); }
.bubble-category.is-open circle { stroke: var(--black); stroke-width: 2; }
.bubble-category.is-open .bubble-icon { stroke: var(--black); }

.bubble-model { cursor: pointer; }
.bubble-model circle { stroke-dasharray: 3 3; }
.bubble-model:hover circle,
.bubble-model:focus-visible circle {
  stroke: var(--black); stroke-dasharray: none; fill: var(--gray-50);
}
.bubble-model .bubble-label { fill: var(--gray-600); font-weight: 500; }
.bubble-model:hover .bubble-label { fill: var(--black); }

.models-fallback { display: grid; gap: 2rem; margin-top: 2rem; }
.models-fallback-group h2 {
  display: flex; align-items: center; gap: 0.5rem;
  font-size: 1.125rem; font-weight: 700; margin: 0 0 0.25rem;
}
.models-fallback-icon { width: 20px; height: 20px; flex: 0 0 auto; }
.models-fallback-blurb { color: var(--gray-500); font-size: 0.875rem; margin: 0 0 0.75rem; }
.models-fallback ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.models-fallback li { border-bottom: 1px solid var(--gray-200); }
/* The whole row is the tap target, not just the model name glyphs - the link
   wraps the name and the modality tag and pads out to a 44px hit box. */
.models-fallback li a {
  display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
  padding: 0.75rem 0; min-height: 44px; box-sizing: border-box;
  color: var(--black); font-weight: 600; text-decoration: none;
}
.models-fallback li a:hover { text-decoration: underline; }
.models-fallback-modality { color: var(--gray-500); font-size: 0.875rem; }

/* Wide screen, graph drawn: the list steps aside. Narrow screen: the list is the
   whole page and the graph never draws — bubbles do not fit on a phone. */
@media (min-width: 601px) {
  .models-graph.is-graphed + .models-fallback { display: none; }
}
@media (max-width: 600px) {
  .models-graph { display: none; }
  .models-index-head h1 { font-size: 2rem; }
}

.model-detail-head {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
}
.model-family {
  font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--gray-500); font-weight: 600;
}
.model-status {
  font-size: 0.6875rem; padding: 0.15rem 0.5rem; border-radius: 999px;
  border: 1px solid var(--gray-300); color: var(--gray-600);
  /* Never wraps or shrinks, however long the model's name is. */
  white-space: nowrap; flex: 0 0 auto; align-self: flex-start;
}
.model-status-live { border-color: var(--black); color: var(--black); }
.model-status-coming_soon { border-color: var(--gray-300); color: var(--gray-500); }

/* Products page */
.products-hero {
  padding: 4rem 0 1.5rem;
  text-align: center;
}
.products-hero h1 {
  font-size: clamp(2rem, 4vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}
.products-lede {
  color: var(--gray-600);
  font-size: 1.125rem;
  margin: 0;
}
.products-content { padding: 1.5rem 0 4.5rem; }
.products-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 920px;
  margin: 0 auto;
}
@media (max-width: 680px) {
  .products-grid { grid-template-columns: 1fr; }
}
.product-card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  box-shadow: var(--shadow-sm);
}
.product-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.6rem;
}
.product-card-head h2 {
  font-size: 1.2rem;
  font-weight: 700;
  margin: 0;
}
.product-card-tagline {
  color: var(--gray-700);
  font-size: 0.875rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.product-card-desc {
  color: var(--gray-600);
  font-size: 0.9375rem;
  line-height: 1.55;
  margin: 0 0 1.25rem;
  flex: 1 1 auto;
}
.product-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: auto;
}
.model-modality { color: var(--gray-600); font-size: 0.875rem; margin: 0 0 0.75rem; }
.model-desc { color: var(--gray-700); font-size: 0.9375rem; line-height: 1.5; }
.model-detail { padding: 3rem 0 4rem; }
.model-back { color: var(--gray-500); text-decoration: none; font-size: 0.875rem; }
.model-back:hover { color: var(--black); }
.model-detail h1 { font-size: 2.5rem; margin: 0.75rem 0 0.25rem; }
.model-meta { display: flex; flex-wrap: wrap; gap: 2rem; margin: 2rem 0; }
.model-meta div { display: flex; flex-direction: column; gap: 0.25rem; }
.model-meta strong { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-500); }
.code-block {
  background: var(--gray-900); color: var(--white); padding: 1.25rem;
  border-radius: var(--radius); overflow-x: auto; font-size: 0.8125rem; line-height: 1.6;
}
.model-links { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 2rem; }

.model-detail-demo { margin: 1.5rem 0 2rem; }
.demo-host { position: relative; border: 1px solid var(--gray-200); border-radius: var(--radius-lg); overflow: hidden; background: var(--white); }
/* Initial placeholder height only, so there's no layout jump before JS runs
   and a no-JS visitor still gets a usable (if scrolling) demo. The
   demo-frame Stimulus controller measures the embedded document and sets
   this element's height inline once it loads, and that governs from then on. */
.demo-host-frame { width: 100%; height: 900px; border: 0; display: block; }

/* Auth */
.auth { display: flex; justify-content: center; padding: 3.5rem 1.5rem; }
.auth-card { width: 100%; max-width: 400px; }
.auth-card h1 { font-size: 1.75rem; margin: 0 0 0.25rem; }
.auth-sub { color: var(--gray-600); margin: 0 0 1.75rem; font-size: 0.9375rem; }
.auth-field { margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.35rem; }
.auth-field label { font-size: 0.8125rem; font-weight: 600; color: var(--gray-700); }
.auth-field input[type="text"],
.auth-field input[type="email"],
.auth-field input[type="password"] {
  width: 100%; padding: 0.6rem 0.75rem; border: 1px solid var(--gray-300);
  border-radius: 6px; font-size: 0.9375rem; background: var(--white);
}
.auth-field input:focus { outline: none; border-color: var(--black); }
.auth-field small { color: var(--gray-500); font-size: 0.75rem; }
.auth-check { flex-direction: row; align-items: center; gap: 0.5rem; }
.auth-check label { font-weight: 400; color: var(--gray-600); }
.auth-check a { color: var(--black); }
.auth-errors {
  background: var(--gray-50); border: 1px solid var(--gray-300);
  border-radius: 6px; padding: 0.75rem 1rem; margin-bottom: 1rem;
}
.auth-errors ul { margin: 0; padding-left: 1.1rem; }
.auth-errors li { color: var(--gray-800); font-size: 0.875rem; }
.auth-divider { text-align: center; margin: 1.25rem 0; position: relative; color: var(--gray-400); font-size: 0.8125rem; }
.auth-divider::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--gray-200); }
.auth-divider span { background: var(--white); padding: 0 0.75rem; position: relative; }
.auth-alt { text-align: center; margin-top: 1.5rem; font-size: 0.875rem; color: var(--gray-600); }
.auth-alt a { color: var(--black); }

/* Dashboard */
.dash { padding: 3rem 0 4rem; }
.dash h1 { font-size: 2rem; margin: 0 0 0.25rem; }
.dash-sub { color: var(--gray-600); margin: 0 0 2rem; }
.dash-notice {
  background: var(--gray-900); color: var(--white); padding: 0.75rem 1rem;
  border-radius: 6px; margin-bottom: 1.5rem; font-size: 0.875rem;
}
.dash-card {
  border: 1px solid var(--gray-200); border-radius: var(--radius-lg);
  padding: 1.75rem; margin-bottom: 2.5rem;
}
.dash-tokens { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 1.5rem; }
.dash-tokens-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-500); }
.dash-tokens-value { font-size: 2.5rem; font-weight: 800; letter-spacing: -0.02em; }
.dash-key { margin-bottom: 1.25rem; }
.dash-key label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--gray-700); margin-bottom: 0.5rem; }
.dash-key-warn { color: var(--gray-800); font-size: 0.8125rem; margin: 0 0 0.5rem; font-weight: 600; }
.dash-key-row { display: flex; gap: 0.5rem; align-items: center; }
.dash-key-row input {
  flex: 1; padding: 0.6rem 0.75rem; border: 1px solid var(--gray-300);
  border-radius: 6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.875rem;
}
.dash-key-hint { color: var(--gray-400); font-size: 0.8125rem; }
.dash-h2 { font-size: 1.25rem; margin: 0 0 1rem; }
.dash-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.dash-table th, .dash-table td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--gray-200); }
.dash-table th { font-size: 0.6875rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gray-500); }
.dash-empty { color: var(--gray-500); }

.portal { padding: 2.5rem 0 4rem; }
.portal-inner { display: grid; grid-template-columns: 200px 1fr; gap: 2rem; align-items: start; }
.portal-sidebar { display: flex; flex-direction: column; gap: 0.25rem; position: sticky; top: 88px; }
.portal-nav-item {
  display: block; padding: 0.5rem 0.75rem; border-radius: var(--radius);
  color: var(--gray-600); text-decoration: none; font-size: 0.9375rem; border: 1px solid transparent;
}
.portal-nav-item:hover { color: var(--black); background: var(--gray-50); }
.portal-nav-item.is-active { color: var(--black); font-weight: 600; background: var(--gray-100); border-color: var(--gray-200); }
.portal-content { min-width: 0; }
.portal-content h1 { font-size: 1.75rem; margin: 0 0 0.25rem; }
@media (max-width: 720px) {
  .portal-inner { grid-template-columns: 1fr; }
  .portal-sidebar { position: static; flex-direction: row; flex-wrap: wrap; }
}

/* Docs */
.docs { padding: 3rem 0 4rem; }
.docs #swagger-ui { margin-top: 1.5rem; }

/* Developer widget */
.widget-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid var(--gray-200);
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.widget-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.6rem 0.9rem;
  font-size: 0.9375rem;
  color: var(--gray-500);
  cursor: pointer;
}
.widget-tab:hover { color: var(--black); }
.widget-tab-active { color: var(--black); border-bottom-color: var(--black); font-weight: 600; }
.widget-panel { display: none; }
.widget-panel-active { display: block; }
.widget-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 1.5rem;
  align-items: start;
}
.widget-options {
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  padding: 1.25rem;
}
.widget-options-title { font-size: 1rem; margin: 0 0 1rem; }
.widget-option { display: flex; flex-direction: column; gap: 0.3rem; margin-bottom: 1rem; }
.widget-option label { font-size: 0.8125rem; font-weight: 600; color: var(--gray-700); }
.widget-option select,
.widget-option input[type="number"] {
  padding: 0.45rem 0.6rem;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 0.875rem;
  background: var(--white);
}
.widget-option input[type="checkbox"] { width: 18px; height: 18px; }
.widget-langs { display: flex; gap: 0.25rem; margin-bottom: 0.75rem; align-items: center; }
.widget-lang {
  background: transparent;
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 0.35rem 0.7rem;
  font-size: 0.8125rem;
  color: var(--gray-600);
  cursor: pointer;
}
.widget-lang-active { background: var(--black); color: var(--white); border-color: var(--black); }
.widget-copy { margin-left: auto; padding: 0.35rem 0.7rem; font-size: 0.8125rem; }
.widget-request .code-block { white-space: pre; margin: 0; }
.widget-account-links { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.5rem; }

@media (max-width: 768px) {
  .widget-grid { grid-template-columns: 1fr; }
}

/* Billing extras */
.pricing-free { display:block; text-align:center; color: var(--gray-500); font-size: 0.875rem; padding: 0.6rem 0; }
.enterprise-cta { border: 1px solid var(--gray-200); border-radius: var(--radius-lg); padding: 2rem; margin: 2rem 0; }
.enterprise-cta h2 { font-size: 1.25rem; margin: 0 0 0.5rem; }
.enterprise-cta p { color: var(--gray-600); margin: 0 0 1rem; }
.enterprise-options { display: flex; gap: 1.5rem; margin-bottom: 1.25rem; flex-wrap: wrap; }
.enterprise-option { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9375rem; color: var(--gray-700); }
.billing-receipts { color: var(--gray-600); font-size: 0.9375rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }

/* Vision figure placeholders */
.vision-figure {
  background: var(--gray-50);
  border-radius: var(--radius-lg);
  aspect-ratio: 16 / 9;
  margin: 1.5rem 0 0;
  overflow: hidden;
}
.vision-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(1) contrast(1.05);
}

/* Status / coming-soon / maintenance pages */
.status-page { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: 2rem; }
.status-page-inner { text-align: center; max-width: 32rem; }
.status-logo { margin: 0 auto 1.5rem; }
.status-page-inner h1 { font-size: 2rem; margin: 0 0 0.75rem; }
.status-page-inner p { color: var(--gray-600); margin: 0 0 0.5rem; }
.status-page-sub a { color: var(--black); font-size: 0.875rem; }

/* ===========================================================================
   Front-page hook visual  ("Do you see the problem here? We do!")
   Pure black & white on a dark sim stage; the ONLY colours are one red (on
   fire / in the red) and one green (in the green), used sparingly to POP.
   All dynamic sizes/levels arrive via the CSSOM from burn_controller.js.
   =========================================================================== */
.burn {
  /* scoped pop tokens — restrained, only these two colours ever appear */
  --hz: #d6341c;   /* on fire / in the red */
  --pos: #16a34a;  /* in the green */
  --burn-mono: ui-monospace, SFMono-Regular, Menlo, "Cascadia Mono", Consolas, monospace;
  --burn-ink: rgba(255, 255, 255, 0.96);
  --burn-dim: rgba(255, 255, 255, 0.55);
  background: var(--white);
  text-align: center;
  padding: 2.5rem 0 3rem;
  border-top: 1px solid var(--gray-200);
}

.burn-title {
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  color: var(--gray-600);
}

/* Sits between the burn title and the stage. Same measure and tone as
   .diagnosis-lead — this section is on white, so the light-copy colours apply. */
.burn-lead {
  max-width: 62ch;
  margin: 0 auto 1.75rem;
  text-align: center;
  color: var(--gray-600);
  font-size: 1.05rem;
  line-height: 1.6;
}

.burn-stage {
  position: relative;
  max-width: 940px;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 1.5rem;
  background: var(--black);
  color: var(--burn-ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  text-align: left;
}

/* content fades out, resets under cover, and fades back in (replaces the wipe) */
.burn-feeder,
.burn-panels,
.burn-registers { transition: opacity 0.6s ease; }
.burn-stage.is-fading .burn-feeder,
.burn-stage.is-fading .burn-panels,
.burn-stage.is-fading .burn-registers { opacity: 0; }

/* ---- feeder: the shared request stream ---------------------------------- */
.burn-feeder {
  position: relative;
  height: 44px;
  margin-bottom: 0.75rem;
}
.burn-feeder-line {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  height: 2px;
  background: repeating-linear-gradient(90deg,
    var(--burn-dim) 0 8px, transparent 8px 16px);
  background-size: 16px 2px;
  animation: burn-march 0.6s linear infinite;
}
.burn-feeder-rail {
  position: absolute;
  top: 40%;
  left: 0;
  right: 0;
  height: 0;
}
.burn-pulse {
  position: absolute;
  top: -5px;
  left: 0;
  width: 11px;
  height: 11px;
  border-radius: 2px;
  background: #fff;
  box-shadow: 0 0 9px 2px rgba(255, 255, 255, 0.65);
  animation: burn-travel 1.15s linear forwards;
}
.burn-intakes {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
}
.burn-intake {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 7px solid var(--burn-dim);
  transition: border-top-color 0.12s ease, filter 0.12s ease;
}
.burn-intake.is-active {
  border-top-color: #fff;
  filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.8));
}
/* hyperscaler intake jams red while a parcel has nowhere to go */
.burn-intake.is-stall {
  border-top-color: var(--hz);
  filter: drop-shadow(0 0 6px rgba(214, 52, 28, 0.9));
  animation: burn-jam 0.4s steps(2) infinite;
}
/* our intake flashes green — we took the request they couldn't */
.burn-intake.is-took {
  border-top-color: var(--pos);
  filter: drop-shadow(0 0 6px rgba(22, 163, 74, 0.9));
}
@keyframes burn-jam { 50% { opacity: 0.35; } }

@keyframes burn-march { to { background-position: 16px 0; } }
@keyframes burn-travel {
  0%   { left: 0; opacity: 0; }
  10%  { opacity: 1; }
  100% { left: 100%; opacity: 0.15; }
}

/* ---- panels ------------------------------------------------------------- */
.burn-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
.burn-panel {
  position: relative;
  min-height: 280px;
  padding: 0.75rem 1rem 1rem;
  overflow: hidden;
}
.burn-panel-us { border-left: 1px dashed rgba(255, 255, 255, 0.14); }

.burn-panel-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.5rem;
  margin-bottom: 0.85rem;
}
.burn-panel-tag {
  font-family: var(--burn-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
}
.burn-panel-sub {
  font-family: var(--burn-mono);
  font-size: 0.66rem;
  color: var(--burn-dim);
}

.burn-grid {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-content: flex-start;
}
/* both grids spread across the panel instead of huddling in a corner */
.burn-grid-us { max-width: 100%; }

/* The hyperscaler rack: big GPUs that fill the box top-to-bottom. New GPUs pin to
   the RIGHT, shoving the older ones off the left edge — so the burning frontier
   always ends up at the right-middle, the rest melting off the page. */
.burn-grid-them {
  max-width: 100%;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: stretch;
  gap: 12px;
  height: 190px;
}

/* GPU chip: fills ~2/3 per packet, glows red when a packet can't be placed. */
.burn-chip {
  position: relative;
  flex: 0 0 118px;
  width: 118px;
  align-self: stretch;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 5px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
  animation: burn-pop 0.3s ease both;
}
.burn-chip::after {
  /* die crosshair — reads as silicon, not a plain box */
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 2px;
}
.burn-chip-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--fill, 0) * 100%);
  background: rgba(255, 255, 255, 0.8);
  transition: height 0.5s ease;
}
.burn-chip.is-full { border-color: rgba(255, 255, 255, 0.7); }
.burn-chip.is-hot {
  border-color: var(--hz);
  box-shadow: 0 0 12px 2px rgba(214, 52, 28, 0.75);
  animation: burn-flare 0.5s ease;
}
.burn-chip.is-hot .burn-chip-fill { background: var(--hz); }

/* Server node: pre-installed, calm, only ever partly filled. */
.burn-node {
  position: relative;
  width: 54px;
  height: 30px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 3px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.05);
}
.burn-node-fill {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--fill, 0) * 100%);
  background: rgba(255, 255, 255, 0.62);
  transition: height 0.7s ease;
}

/* smoke over the hyperscaler when it rumbles */
.burn-smoke {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(60% 45% at 30% 90%, rgba(120, 120, 120, 0.55), transparent 70%),
    radial-gradient(50% 40% at 70% 100%, rgba(90, 90, 90, 0.5), transparent 70%);
  transition: opacity 0.25s ease;
}
.burn-smoke.is-active { opacity: 1; }

/* cha-ching: big green cash flung off the left when they buy another rack */
.burn-cash {
  position: absolute;
  z-index: 5;
  font-family: var(--burn-mono);
  font-weight: 800;
  font-size: 2rem;
  line-height: 1;
  color: var(--pos);
  text-shadow: 0 0 12px rgba(22, 163, 74, 0.7);
  opacity: 0;
  pointer-events: none;
}
.burn-cash.is-fly { animation: burn-cash 1.05s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes burn-cash {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.5); }
  18%  { opacity: 1; transform: translate(-14px, -10px) scale(1.2); }
  100% { opacity: 0; transform: translate(-190px, -66px) scale(1.35); }
}

/* faint background tree on the calm side */
.burn-tree {
  position: absolute;
  right: 0.75rem;
  bottom: 0.4rem;
  margin: 0;
  font-family: var(--burn-mono);
  font-size: 0.72rem;
  line-height: 1;
  color: rgba(255, 255, 255, 0.38);
  white-space: pre;
  pointer-events: none;
  z-index: 0;
}

/* "can't fit — dropped": the rack is out of room and the parcel bounces */
.burn-drop {
  position: absolute;
  right: 1rem;
  bottom: 0.35rem;
  z-index: 6;
  font-family: var(--burn-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ff6244;
  border: 1px solid var(--hz);
  border-radius: 3px;
  padding: 0.24rem 0.5rem;
  background: rgba(6, 2, 1, 0.92);
  box-shadow: 0 0 12px 2px rgba(214, 52, 28, 0.45);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease;
  pointer-events: none;
}
.burn-drop.is-active {
  opacity: 1;
  transform: none;
  animation: burn-jam 0.5s steps(2) 2;
}

/* tiny black-and-white bird that drifts low across the calm side, tree level */
.burn-bird {
  position: absolute;
  bottom: 2.1rem;
  left: -34px;
  z-index: 3;
  color: rgba(255, 255, 255, 0.82);
  opacity: 0;
}
.burn-bird.is-flying { animation: burn-fly 7s linear forwards; }

.burn-grid.is-rumbling { animation: burn-rumble 0.16s linear 4; }

@keyframes burn-pop { from { transform: scale(0.4); opacity: 0; } }
@keyframes burn-flare { 50% { box-shadow: 0 0 18px 5px rgba(214, 52, 28, 0.9); } }
@keyframes burn-rumble {
  0%, 100% { transform: translate(0, 0); }
  25% { transform: translate(-1.5px, 1px); }
  75% { transform: translate(1.5px, -1px); }
}
@keyframes burn-fly {
  0%   { transform: translate(0, 0); opacity: 0; }
  12%  { opacity: 0.85; }
  35%  { transform: translate(120px, -12px); }
  60%  { transform: translate(240px, -4px); }
  88%  { opacity: 0.85; }
  100% { transform: translate(380px, -16px); opacity: 0; }
}

/* ---- registers: the P&L (real, readable text) --------------------------- */
.burn-registers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-top: 1rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.14);
  padding-top: 0.9rem;
  font-family: var(--burn-mono);
}
.burn-register { padding: 0 1rem; }
.burn-register-us { border-left: 1px dashed rgba(255, 255, 255, 0.14); }

.burn-reg-row {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
  font-size: 0.82rem;
  line-height: 1.7;
}
.burn-reg-label { color: var(--burn-dim); min-width: 5.4em; }
.burn-reg-val { margin-left: auto; font-variant-numeric: tabular-nums; }
.burn-reg-trend { color: var(--burn-dim); font-size: 0.72rem; }
.burn-reg-rule {
  height: 1px;
  margin: 0.35rem 0;
  background: rgba(255, 255, 255, 0.2);
}
.burn-reg-margin { font-size: 0.98rem; font-weight: 700; padding-top: 0.15rem; }
.burn-reg-margin .burn-reg-label { color: var(--burn-ink); }
.burn-reg-val.is-hz { color: var(--hz); }
.burn-reg-val.is-pos { color: var(--pos); }
/* their compute number jumps red on each GPU install (a cost spike, not a packet) */
.burn-reg-val.is-spike { animation: burn-cost-spike 0.55s ease; }
@keyframes burn-cost-spike {
  0%   { color: var(--hz); transform: scale(1.28); }
  100% { color: inherit; transform: none; }
}

.burn-caption {
  max-width: 640px;
  margin: 1rem auto 0;
  font-size: 0.85rem;
  color: var(--gray-500);
  text-align: center;
}

@media (max-width: 620px) {
  /* Each company's register must land directly under its OWN panel, not in a
     second stacked group after both panels. .burn-panels / .burn-registers
     drop their boxes (display: contents) so their four children become
     direct flex items of .burn-stage, which we can then reorder:
       panel-them -> register-them -> panel-us -> register-us
     None of the absolutely-positioned decorations (.burn-smoke, .burn-drop,
     .burn-bird) are affected — they're positioned against .burn-panel(-them/-us)
     itself (position: relative lives there), not against these wrappers. */
  .burn-panels,
  .burn-registers { display: contents; }

  .burn-stage {
    display: flex;
    flex-direction: column;
  }

  .burn-feeder { order: -1; }
  .burn-panel-them { order: 1; }
  .burn-register-them { order: 2; }
  .burn-panel-us { order: 3; }
  .burn-register-us { order: 4; }

  /* The gap/border that used to live on .burn-panels / .burn-registers is
     re-homed onto the three items that now follow something else in the
     stack (the first item, .burn-panel-them, needs no lead-in rule). */
  .burn-panel-us,
  .burn-register-them,
  .burn-register-us {
    border-left: 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.14);
    margin-top: 0.6rem;
    padding-top: 0.6rem;
  }

  /* .burn-panels / .burn-registers can no longer carry the cycle fade
     (display: contents generates no box, so opacity is a no-op on them) —
     apply it to the four actual boxes instead. */
  .burn-panel-them,
  .burn-register-them,
  .burn-panel-us,
  .burn-register-us { transition: opacity 0.6s ease; }
  .burn-stage.is-fading .burn-panel-them,
  .burn-stage.is-fading .burn-register-them,
  .burn-stage.is-fading .burn-panel-us,
  .burn-stage.is-fading .burn-register-us { opacity: 0; }
}

/* ---------------------------------------------------------------- diagnosis
   The "How". A mechanic's fault log: four faults, each caused by the last fix,
   landing on the pull-quote that sells the company. Static — no JS. */
.diagnosis {
  background: var(--gray-50);
  border-top: 1px solid var(--gray-200);
  padding: 3.5rem 0 4rem;
}

.diagnosis-title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  text-align: center;
  color: var(--gray-900);
  margin: 0 0 0.75rem;
}

.diagnosis-lead {
  max-width: 44ch;
  margin: 0 auto 2.75rem;
  text-align: center;
  color: var(--gray-600);
  font-size: 1.05rem;
  line-height: 1.6;
}

.diag-steps {
  max-width: 760px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

.diag-step {
  position: relative;
  padding: 0 0 1.75rem 3.5rem;
  border-left: 2px solid var(--gray-200);
  margin-left: 1rem;
}

/* the last step owns no trailing rail — the story stops here */
.diag-step:last-child {
  border-left-color: transparent;
  padding-bottom: 0.5rem;
}

.diag-num {
  position: absolute;
  left: -1rem;
  top: 0;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--black);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
}

.diag-fault {
  font-size: clamp(1.1rem, 2.2vw, 1.35rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--gray-900);
  margin: 0.15rem 0 0.6rem;
}

.diag-body {
  color: var(--gray-600);
  line-height: 1.65;
  margin: 0 0 0.75rem;
}

.diag-fix {
  color: var(--gray-700);
  line-height: 1.6;
  margin: 0;
  font-size: 0.95rem;
}

.diag-fix-tag {
  font-weight: 700;
  color: var(--black);
}

/* The sale. Give it room and let it carry its own weight. */
.diag-quote {
  max-width: 760px;
  margin: 3rem auto 2rem;
  padding: 2rem 1rem;
  border: 0;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  text-align: center;
}

.diag-quote p {
  margin: 0;
  font-size: clamp(1.4rem, 3.6vw, 2.25rem);
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -0.03em;
  color: var(--gray-900);
  text-wrap: balance;
}

.diag-quote em {
  font-style: italic;
}

.diag-bridge {
  max-width: 60ch;
  margin: 0 auto;
  text-align: center;
  color: var(--gray-600);
  line-height: 1.65;
}

.diag-bridge strong {
  color: var(--black);
  font-weight: 700;
}

@media (max-width: 620px) {
  .diagnosis { padding: 2.5rem 0 3rem; }
  .diag-step {
    padding-left: 2.5rem;
    margin-left: 0.85rem;
  }
  .diag-quote {
    margin: 2rem auto 1.5rem;
    padding: 1.5rem 0.5rem;
  }
}

/* --------------------------------------------------------------------- arch
   The "What". Same two-panel split as .burn, on purpose — it is a motif. But
   this one is cool and architectural where .burn is hot and economic: the page
   escalates from how it works to what it costs you. The .burn registers idiom
   returns here as a memory meter. The one thing this must make you feel: the
   left side gets heavier and the right side does not.

   The meter lives INSIDE each panel (unlike .burn, where registers are a
   sibling row) — so stacking on mobile is a plain flex-direction change and
   needs none of burn's display:contents reordering. */
.arch {
  --hz: #d6341c;   /* growing without bound */
  --pos: #16a34a;  /* flat, forever */
  --arch-mono: ui-monospace, SFMono-Regular, Menlo, "Cascadia Mono", Consolas, monospace;
  --arch-ink: rgba(255, 255, 255, 0.96);
  --arch-dim: rgba(255, 255, 255, 0.55);
  background: var(--white);
  text-align: center;
  padding: 3.5rem 0 3rem;
}

/* Deliberately subordinate to the hero h1: the animation below is the argument,
   this only introduces it. The wide measure keeps it to one or two lines. */
.arch-title {
  font-size: clamp(1.25rem, 2.4vw, 1.6rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gray-600);
  margin: 0 auto 1.75rem;
  max-width: 52ch;
  text-wrap: balance;
}

.arch-title em {
  font-style: italic;
}

.arch-stage {
  position: relative;
  max-width: 940px;
  margin: 0 auto;
  padding: 1.25rem 1.25rem 1.5rem;
  background: var(--black);
  color: var(--arch-ink);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  text-align: left;
}

/* content fades out, resets under cover, fades back in — same cycle as .burn */
.arch-feeder,
.arch-panels { transition: opacity 0.6s ease; }
.arch-stage.is-fading .arch-feeder,
.arch-stage.is-fading .arch-panels { opacity: 0; }

/* ---- feeder: the same words stream into both sides ---- */
.arch-feeder {
  position: relative;
  height: 34px;
  margin-bottom: 0.5rem;
}

.arch-feeder-line {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 8px;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.28) 20%,
    rgba(255, 255, 255, 0.28) 80%,
    transparent);
}

.arch-feeder-rail {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 0;
  height: 17px;
}

.arch-pulse {
  position: absolute;
  top: 5px;
  left: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--arch-ink);
  animation: arch-travel 1.1s linear forwards;
}

@keyframes arch-travel {
  0%   { left: 0; opacity: 0; }
  10%  { opacity: 1; }
  100% { left: 100%; opacity: 1; }
}

.arch-intakes {
  position: absolute;
  top: 22px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-around;
}

.arch-intake {
  width: 10px;
  height: 3px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.25);
  transition: background 0.2s ease;
}

.arch-intake.is-active { background: var(--arch-ink); }

/* ---- panels ---- */
.arch-panels {
  display: flex;
}

.arch-panel {
  position: relative;
  flex: 1 1 50%;
  min-width: 0;
  padding: 0 0.9rem;
  display: flex;
  flex-direction: column;
}

.arch-panel-us {
  border-left: 1px dashed rgba(255, 255, 255, 0.14);
}

.arch-panel-head {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 0.5rem;
  min-height: 2.6rem;
}

.arch-panel-tag {
  font-family: var(--arch-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--arch-ink);
}

.arch-panel-sub {
  font-size: 0.78rem;
  line-height: 1.35;
  color: var(--arch-dim);
}

/* ---- the field ---- */
.arch-mesh {
  display: block;
  width: 100%;
  height: 160px;
}

/* A chord between two words. Most are dim: present, paid for, never activated.
   Opacity is animated in so each new connection reads as it lands. */
.arch-link {
  stroke: rgba(255, 255, 255, 0.16);
  stroke-width: 0.5;
  opacity: 0;
  animation: arch-ink-in 0.45s ease forwards;
}

.arch-link.is-live {
  stroke: rgba(255, 255, 255, 0.85);
  stroke-width: 0.7;
}

/* Our side: one spoke per word, down into the wave. Linear, not quadratic. */
.arch-spoke {
  stroke: rgba(22, 163, 74, 0.55);
  stroke-width: 0.6;
  opacity: 0;
  animation: arch-ink-in 0.45s ease forwards;
}

.arch-node {
  fill: var(--arch-ink);
  opacity: 0;
  animation: arch-ink-in 0.35s ease forwards;
}

.arch-node-us { fill: var(--pos); }

@keyframes arch-ink-in {
  to { opacity: 1; }
}

/* The wave. Redrawn as each word folds in — same amplitude, same footprint,
   forever. That constancy IS the constant-memory claim. */
.arch-wave {
  stroke: var(--pos);
  stroke-width: 1.6;
  stroke-linecap: round;
  filter: drop-shadow(0 0 3px rgba(22, 163, 74, 0.45));
  transition: d 0.5s ease;
}

.arch-note {
  font-family: var(--arch-mono);
  font-size: 0.68rem;
  letter-spacing: 0.04em;
  color: var(--arch-dim);
  text-align: center;
  min-height: 1rem;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.arch-note.is-shown { opacity: 1; }

/* ---- memory meter: the register idiom from .burn, one per panel ---- */
.arch-meter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-family: var(--arch-mono);
  font-size: 0.72rem;
}

.arch-meter-label {
  color: var(--arch-dim);
  letter-spacing: 0.04em;
}

.arch-meter-track {
  flex: 1 1 auto;
  height: 6px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

/* Driven by transform: scaleX(--level), not width — the CSP-safe path (the level is
   set through the CSSOM) and the one that animates on the compositor. */
.arch-meter-fill {
  height: 100%;
  width: 100%;
  border-radius: 3px;
  transform-origin: left center;
  transform: scaleX(var(--level, 0));
  transition: transform 0.45s ease;
}

.arch-meter-fill.is-hz { background: var(--hz); }
.arch-meter-fill.is-pos { background: var(--pos); }

.arch-meter-val {
  min-width: 3.5rem;
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.arch-meter-val.is-hz { color: var(--hz); }
.arch-meter-val.is-pos { color: var(--pos); }

/* the left meter pins and stays pinned — it has nowhere left to go */
.arch-meter-val.is-maxed {
  animation: arch-throb 1.1s ease-in-out infinite;
}

@keyframes arch-throb {
  50% { opacity: 0.45; }
}

/* ---- the three plain claims ---- */
.arch-claims {
  display: flex;
  gap: 1.5rem;
  max-width: 940px;
  margin: 1.75rem auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.arch-claim {
  flex: 1 1 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--gray-600);
}

.arch-claim strong {
  display: block;
  color: var(--black);
  font-weight: 700;
  margin-bottom: 0.15rem;
}

@media (max-width: 620px) {
  .arch { padding: 2.5rem 0 2.5rem; }

  .arch-panels { flex-direction: column; }

  .arch-panel { padding: 0; }

  .arch-panel-us {
    border-left: 0;
    border-top: 1px dashed rgba(255, 255, 255, 0.14);
    margin-top: 0.9rem;
    padding-top: 0.9rem;
  }

  .arch-panel-head { min-height: 0; }

  .arch-mesh { height: 130px; }

  .arch-claims {
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.5rem;
  }
}

/* Reduced motion: freeze the final dramatic frame, zero motion. The controller
   paints THEM full + burning and US calm + green; here we just kill animation. */
@media (prefers-reduced-motion: reduce) {
  .burn-feeder-line,
  .burn-pulse,
  .burn-chip,
  .burn-chip.is-hot,
  .burn-grid.is-rumbling,
  .burn-bird.is-flying {
    animation: none;
  }
  .burn-chip-fill,
  .burn-node-fill { transition: none; }
  .burn-feeder,
  .burn-panels,
  .burn-registers { transition: none; }

  /* .arch: the controller paints the final frame directly, so every transition and
     keyframe here is dead weight that would animate it anyway. */
  .arch-pulse,
  .arch-link,
  .arch-spoke,
  .arch-node,
  .arch-meter-val.is-maxed {
    animation: none;
    opacity: 1;
  }
  .arch-wave { transition: none; }
  .arch-meter-fill { transition: none; }
  .arch-note { transition: none; }
  .arch-feeder,
  .arch-panels { transition: none; }
}