:root {
  /* Brand palette (style guide 2026): black & white primarily,
     bright blue #3596D9 as accent only, #F0F8FF as the light tint. */
  --blue: #3596d9;
  --blue-50: #f0f8ff;
  --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;
  --mono: ui-monospace, SFMono-Regular, Menlo, "Cascadia Mono", Consolas, monospace;
}

*, *::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: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--white);
  color: var(--black);
  line-height: 1.5;
  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;
}

/* Hero - light brand texture: graph paper on #F0F8FF, fading to white. */
.hero {
  padding: 4.5rem 0 1.75rem;
  text-align: center;
  background-color: var(--blue-50);
  background-image:
    linear-gradient(180deg, transparent 0%, var(--white) 100%),
    linear-gradient(rgba(53, 150, 217, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 150, 217, 0.07) 1px, transparent 1px);
  background-size: auto, 28px 28px, 28px 28px;
}

/* Wide enough for the one-line hero headline: at the 2.75rem clamp cap the
   title is ~1000px, and an over-wide nowrap line centers inconsistently
   across browsers (Chrome shifts it right). Fit it, don't overflow it. */
.hero-content {
  max-width: 64rem;
  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; }
}

/* Style guide: italic and/or blue for emphasis. */
.hero-title em {
  font-style: italic;
  color: var(--blue);
}

.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 - closing block. White per the brand guide; blue/italic emphasis. */
.cta {
  background: var(--white);
  color: var(--black);
  text-align: center;
  border-top: 1px solid var(--gray-200);
}

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

.cta h2 em {
  font-style: italic;
  color: var(--blue);
}

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

/* Book a Demo: embedded Google scheduler. White, centered, on brand. */
.book-demo {
  padding: 4rem 0;
  text-align: center;
}

.book-demo-title {
  font-size: 2.5rem;
  font-weight: 800;
  margin: 0 0 0.75rem;
}

.book-demo-lead {
  max-width: 52ch;
  margin: 0 auto 2.5rem;
  color: var(--gray-600);
  font-size: 1.125rem;
  line-height: 1.5;
}

.book-demo-lead em {
  font-style: italic;
  color: var(--blue);
}

.demo-embed {
  display: block;
  width: 100%;
  height: 720px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--white);
}

@media (max-width: 720px) {
  .demo-embed { height: 860px; }
}

/* 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; }

/* Divider between the company story and the team section (folded in from
   the old standalone /team page). A 1pt rule per the style guide. */
.about-rule {
  border: 0;
  border-top: 1px solid var(--gray-200);
  max-width: 960px;
  margin: 0 auto 4rem;
}

/* Keep the anchor target clear of the 64px sticky header. */
.about-team { scroll-margin-top: 5rem; }

/* Team section. Note: the CSP style-src has no 'unsafe-inline', so anything
   styled here must use classes - inline style attributes are stripped.
   One person = one card: photo + bio row, org links in a ruled card footer. */
.team-member {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  flex-wrap: wrap;
  max-width: 760px;
  margin: 0 auto;
  padding: 2rem;
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  text-align: left;
}
.team-photo { width: 160px; height: 160px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.team-blurb { flex: 1; min-width: 0; }
.team-name { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 0.25rem; }
.team-role { color: var(--gray-600); font-weight: 600; font-size: 0.95rem; margin: 0 0 0.9rem; }
.team-blurb > p:not(.team-role) { color: var(--gray-700); line-height: 1.5; margin: 0 0 0.9rem; }
.team-links { display: flex; gap: 0.9rem; align-items: center; margin-top: 0.25rem; flex-wrap: wrap; }
.team-email { display: inline-flex; align-items: center; gap: 0.45rem; }
.team-email-address { height: 1em; width: auto; }
.team-org {
  flex-basis: 100%;
  display: flex;
  gap: 0.9rem;
  align-items: center;
  margin: 0;
  padding-top: 1.25rem;
  border-top: 1px solid var(--gray-200);
  flex-wrap: wrap;
}
.team-org-label { color: var(--gray-500); font-size: 0.95rem; }

@media (max-width: 620px) {
  .team-member { flex-direction: column; align-items: center; text-align: center; padding: 1.5rem; }
  .team-links { justify-content: center; }
  .team-org { justify-content: center; }
}
.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);
}
/* Flagship product: front and center, spans the full grid width. */
.product-card-featured {
  grid-column: 1 / -1;
  padding: 2rem;
  box-shadow: var(--shadow-md, var(--shadow-sm));
  border-color: var(--gray-300);
}
.product-card-featured .product-card-head h2 { font-size: 1.5rem; }
.product-card-featured .product-card-desc { font-size: 1.0625rem; }
.product-card-media {
  margin: -0.5rem -0.5rem 1rem;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--gray-100, #f3f4f6);
}
.product-card-media img,
.product-card-media video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 360px;
  object-fit: contain;
}
.product-card-featured .product-card-media img,
.product-card-featured .product-card-media video { max-height: 520px; }
.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; }

/* ---------------------------------------------------------------------- ask
   The problem, posed as three questions. Light brand texture (graph paper on
   #F0F8FF), monochrome emoji markers, blue/italic emphasis per the guide. */
.ask {
  background-color: var(--blue-50);
  background-image:
    linear-gradient(rgba(53, 150, 217, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(53, 150, 217, 0.07) 1px, transparent 1px);
  background-size: 28px 28px;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  padding: 3.5rem 0 4rem;
  text-align: center;
}

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

.ask-list {
  max-width: 640px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  text-align: left;
}

.ask-item {
  position: relative;
  padding: 0.5rem 0 0.5rem 2.6rem;
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  font-weight: 600;
  line-height: 1.5;
  color: var(--gray-900);
}

/* Markers: emoji rendered monochrome (grayscale filter) so they stay
   high-contrast black & white per the brand guide on any platform. */
.ask-item::before {
  position: absolute;
  left: 0.4rem;
  top: 0.45rem;
  font-size: 1.3rem;
  line-height: 1.5;
  filter: grayscale(1) contrast(1.2);
}

.ask-item-search::before { content: "🔍"; }
.ask-item-power::before { content: "⚡"; }
.ask-item-earth::before { content: "🌍"; }
.ask-item-flask::before { content: "⚗️"; }

.ask-item em {
  font-style: italic;
  color: var(--blue);
}

.ask-bridge {
  max-width: 46ch;
  margin: 2.5rem auto 0;
  color: var(--gray-600);
  font-size: 1.05rem;
  line-height: 1.5;
}

/* ----------------------------------------------------------------- blueprint
   Our solution, deck-page-4 idiom: a dark stage with the dark halftone brand
   texture and three "out -> in" swaps - the parts of the transformer (and its
   hardware) that we replaced. Blue marks what we swapped IN. */
.blueprint {
  background-color: var(--black);
  background-image: radial-gradient(rgba(53, 150, 217, 0.14) 1px, transparent 1.5px);
  background-size: 18px 18px;
  color: var(--white);
  padding: 3.5rem 0 4rem;
  text-align: center;
}

/* Centered like the other section titles: no max-width, explicit text-align
   and auto inline margins so centering never depends on inheritance. */
.blueprint-title {
  max-width: none;
  margin: 0 auto 0.75rem;
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  text-align: center;
}

.blueprint-title em {
  font-style: italic;
  color: var(--blue);
}

.blueprint-lead {
  max-width: 52ch;
  margin: 0 auto 2.75rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.65);
  font-size: 1.05rem;
  line-height: 1.5;
}

.swap-list {
  max-width: 980px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.swap {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 0.9rem;
}

.swap-cell {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  padding: 1.35rem 1.25rem 1.15rem;
  border-radius: var(--radius-lg);
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(255, 255, 255, 0.04);
  text-align: center;
}

.swap-out { color: rgba(255, 255, 255, 0.55); }

.swap-in {
  color: var(--white);
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue), 0 0 24px rgba(53, 150, 217, 0.25);
}

.swap-tag {
  position: absolute;
  top: -0.6rem;
  left: 1rem;
  padding: 0.05rem 0.55rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--black);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: rgba(255, 255, 255, 0.6);
}

.swap-in .swap-tag {
  border-color: var(--blue);
  color: var(--blue);
}

.swap-icon {
  width: 96px;
  height: 64px;
  margin-bottom: 0.15rem;
}

.swap-name {
  font-size: 1.02rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.swap-desc {
  font-size: 0.85rem;
  line-height: 1.5;
  opacity: 0.8;
}

.swap-complexity {
  margin-top: auto;
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 0.18rem 0.6rem;
  border-radius: 3px;
  border: 1px dashed currentColor;
}

.swap-complexity.is-out { color: rgba(255, 255, 255, 0.5); }
.swap-complexity.is-in { color: var(--blue); }

.swap-arrow {
  align-self: center;
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--blue);
}

.blueprint-products {
  max-width: 62ch;
  margin: 3rem auto 0;
  padding-top: 2rem;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.05rem;
  line-height: 1.5;
}

/* Style-guide list on the dark stage: blue square markers, centered column. */
.blueprint-products-list {
  max-width: 560px;
  margin: 1.25rem auto 0;
  padding: 0;
  list-style: none;
  text-align: left;
  color: rgba(255, 255, 255, 0.75);
  font-size: 1.0rem;
  line-height: 1.5;
}

.blueprint-products-list li {
  position: relative;
  padding: 0.45rem 0 0.45rem 1.7rem;
}

.blueprint-products-list li::before {
  content: "";
  position: absolute;
  left: 0.25rem;
  top: 0.95rem;
  width: 0.5rem;
  height: 0.5rem;
  background: var(--blue);
}

.blueprint-products-list strong { color: var(--white); }

.blueprint-products-list em {
  font-style: italic;
  color: var(--blue);
}

@media (max-width: 720px) {
  .ask { padding: 2.5rem 0 3rem; }
  .blueprint { padding: 2.5rem 0 3rem; }

  .swap { grid-template-columns: 1fr; }

  .swap-arrow {
    transform: rotate(90deg);
    padding: 0.1rem 0;
  }
}