/* ThalamusCUA documentation — shared styles (the EvalsArena docs sheet: the Thalamus SRE docs recoloured to the CUA/EvalsArena orange) for all pages. */
:root {
  --bg: #ffffff;
  --bg-hero: #fbf3ec;
  --ink: #0c1322;
  --ink-soft: #44506a;
  --ink-faint: #6b7890;
  --line: #e3e8f0;
  --brand: #f07a1f;
  --brand-ink: #c4580a;
  --card-bg: #ffffff;
  --nav-bg: #0e1525;
  --nav-ink: #e7ecf5;
  --nav-ink-soft: #aab6cc;
  --radius: 14px;
  --maxw: 1440px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink);
  background: var(--bg);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }

/* ---- top nav ---- */
.nav {
  background: var(--nav-bg);
  color: var(--nav-ink);
  border-bottom: 1px solid #1b2740;
}
.nav-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 14px 24px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 19px; letter-spacing: .2px; }
.brand .mark { color: var(--brand); font-size: 21px; }
.nav-search {
  flex: 1;
  max-width: 460px;
  display: flex; align-items: center; gap: 8px;
  background: #1a2236;
  border: 1px solid #283450;
  border-radius: 10px;
  padding: 8px 12px;
  color: var(--nav-ink-soft);
  font-size: 15px;
}
.nav-search .kbd {
  margin-left: auto; font-size: 13px; color: var(--nav-ink-soft);
  border: 1px solid #324063; border-radius: 6px; padding: 1px 6px;
}
.nav-actions { display: flex; align-items: center; gap: 18px; margin-left: auto; }
.nav-link { color: var(--nav-ink-soft); font-size: 15px; }
.nav-link:hover { color: var(--nav-ink); }
.btn-primary {
  background: var(--brand); color: #fff; border: 0;
  padding: 9px 16px; border-radius: 10px; font-size: 15px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.btn-primary:hover { background: var(--brand-ink); }

/* ---- section tabs ---- */
.tabs {
  background: var(--nav-bg);
  border-bottom: 1px solid #1b2740;
}
.tabs-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 0 24px;
  display: flex; gap: 26px; overflow-x: auto;
}
.tab {
  color: var(--nav-ink-soft); font-size: 15px; padding: 14px 2px;
  border-bottom: 2px solid transparent; white-space: nowrap;
}
.tab:hover { color: var(--nav-ink); }
.tab.active { color: #fff; border-bottom-color: var(--brand); font-weight: 600; }

/* ---- hero ---- */
.hero { background: linear-gradient(180deg, var(--bg-hero) 0%, #fdf9f5 100%); position: relative; z-index: 0; overflow: hidden; }
/* Sphere — the Thalamus AI Cloud gold wireframe sphere. On a hero page it sits behind the right
   of the hero (its stacking context, which clips it at the bottom edge); on a sidebar page it
   sits behind the top right of the main column, as on the AI Cloud docs, with the body
   clipping it so it cannot add a horizontal scroll (clip, not hidden, so sticky still works). */
body { overflow-x: clip; }
.hero-sphere {
  position: absolute; z-index: -1; pointer-events: none;
  width: 680px; height: 680px; top: -60px; right: max(-160px, calc((100vw - var(--maxw)) / 2 - 60px));
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent);
          mask-image: radial-gradient(closest-side, #000 72%, transparent);
}
.doc-main { position: relative; z-index: 0; }
.doc-main > .hero-sphere { width: 600px; height: 600px; top: -70px; right: -300px; }
@media (max-width: 900px) { .hero-sphere { display: none; } }
.hero-inner { max-width: var(--maxw); margin: 0 auto; padding: 56px 24px 18px; }
.hero-shot { margin: 26px 0 8px; }
.hero h1 { font-size: 41px; line-height: 1.1; margin: 0 0 14px; letter-spacing: -0.5px; }
.hero p { font-size: 19px; color: var(--ink-soft); margin: 0; }
.eyebrow { font-size: 14px; font-weight: 600; color: var(--brand-ink); text-transform: uppercase; letter-spacing: 1px; margin: 0 0 10px; }

/* ---- content ---- */
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }
section.block { padding: 40px 0; }
section.block.tinted { background: var(--bg-hero); }
h2 { font-size: 27px; margin: 0 0 6px; letter-spacing: -0.3px; }
.section-sub { color: var(--ink-soft); margin: 0 0 26px; font-size: 17px; }
/* category subheading for grouped card grids (e.g. the integration catalog) */
.cat-h {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: var(--ink-faint); margin: 26px 0 10px;
}
/* category pill shown inside a card (so cards don't need category sections) */
.cat-pill {
  display: inline-block; font-size: 11.5px; font-weight: 600; letter-spacing: .3px;
  text-transform: uppercase; color: var(--brand-ink); background: #fdeedd;
  border-radius: 999px; padding: 2px 9px; flex: 0 0 auto;
}
/* catalog card: icon + pill + title on ONE row, then description below — short cards. */
.catalog-card { padding: 11px 14px; }
.catalog-card .cc-head { display: flex; align-items: center; gap: 9px; margin: 0 0 6px; }
.catalog-card .cc-head .ic { flex: 0 0 auto; margin: 0; width: 28px; height: 28px; font-size: 16px; }
.catalog-card .cc-head h3 { margin: 0; font-size: 16px; }
.catalog-card p { margin: 0; }

.grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 1000px) { .grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px)  { .grid { grid-template-columns: 1fr; } }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .grid-3 { grid-template-columns: 1fr; } }

.card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
  display: block;
}
.card:hover {
  border-color: #f3c9a0;
  box-shadow: 0 8px 24px rgba(196,88,10,.10);
  transform: translateY(-2px);
}
.card .ic {
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: #fdeedd; color: var(--brand-ink); font-size: 21px; margin-bottom: 14px;
}
.card h3 { margin: 0 0 6px; font-size: 17px; }
.card p { margin: 0; font-size: 15px; color: var(--ink-faint); line-height: 1.5; }

/* .compact (on .grid, .grid-2, or .grid-3) — shorter nav cards: a small icon sits
   to the LEFT of a stacked title + description, with tighter padding so the whole
   section is less tall. The icon uses CSS grid placement so heading + copy share the
   right column. */
.grid.compact .card, .grid-2.compact .card, .grid-3.compact .card {
  display: grid;
  grid-template-columns: 34px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px; row-gap: 2px;
  padding: 14px 16px;
}
.grid.compact .card .ic, .grid-2.compact .card .ic, .grid-3.compact .card .ic {
  grid-row: 1 / span 2; align-self: start;
  margin-bottom: 0; width: 34px; height: 34px; font-size: 18px;
}
.grid.compact .card h3, .grid-2.compact .card h3, .grid-3.compact .card h3 { grid-column: 2; margin: 0; align-self: center; }
.grid.compact .card p, .grid-2.compact .card p, .grid-3.compact .card p { grid-column: 2; font-size: 14px; line-height: 1.45; }

/* two-up wide cards for the modes */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 760px) { .grid-2 { grid-template-columns: 1fr; } }
.mode-card .badge {
  display: inline-block; font-size: 13px; font-weight: 600; color: var(--brand-ink);
  background: #fdeedd; border-radius: 999px; padding: 3px 10px; margin-bottom: 10px;
}
.mode-card ul { margin: 12px 0 0; padding-left: 18px; color: var(--ink-soft); font-size: 15px; }
.mode-card li { margin: 4px 0; }

/* prose blocks on the detail pages — the container keeps the centered .wrap width
   (var(--maxw)); running text stays at a readable measure, images go full width. */
.prose > p, .prose > ul, .prose > h2, .prose > h3 { max-width: none; }

/* generic screenshot figure — constrains the image to its column everywhere */
.shot {
  margin: 16px 0 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(15,28,55,.10);
  background: #fff;
  max-width: 100%;
}
.shot img { display: block; width: 100%; height: auto; }
.shot figcaption {
  font-size: 13px; color: var(--ink-faint); padding: 7px 12px;
  border-top: 1px solid var(--line); background: #fafbfe;
}
/* .shot.natural — render the image at its original (intrinsic) size instead of
   stretching to the column width; the figure shrinks to the image (not the caption). */
.shot.natural { display: inline-block; width: auto; max-width: 100%; }
.shot.natural img { width: auto; max-width: 100%; }
.shot.natural figcaption { width: 0; min-width: 100%; box-sizing: border-box; }
.prose p { color: var(--ink-soft); font-size: 17px; margin: 0 0 16px; }
.prose h3 { font-size: 20px; margin: 28px 0 8px; }
.prose ul { color: var(--ink-soft); font-size: 16px; padding-left: 20px; margin: 0 0 16px; }
.prose li { margin: 5px 0; }
.prose code, .card code {
  background: #f1f4fa; border: 1px solid var(--line); border-radius: 6px;
  padding: 1px 6px; font-size: 14px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.steps { counter-reset: step; list-style: none; padding: 0; max-width: none; }
.steps li {
  position: relative; padding: 0 0 14px 40px; color: var(--ink-soft); font-size: 16px;
}
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: 0;
  width: 26px; height: 26px; border-radius: 999px;
  background: #fdeedd; color: var(--brand-ink); font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
}
.callout {
  border: 1px solid #f6dcc0; background: #fff5ec; border-radius: 12px;
  padding: 14px 16px; font-size: 15px; color: var(--ink-soft); margin: 18px 0; max-width: none;
}

/* ---- feature banner sections (landing page) ---- */
.feature {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 36px;
  align-items: center;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 4px;
}
.feature.reverse .feature-copy { order: 2; }
.feature.reverse .feature-shot { order: 1; }
@media (max-width: 820px) {
  .feature { grid-template-columns: 1fr; gap: 22px; }
  .feature.reverse .feature-copy { order: 1; }
  .feature.reverse .feature-shot { order: 2; }
}
.feature-copy .badge {
  display: inline-block; font-size: 13px; font-weight: 600; color: var(--brand-ink);
  background: #fdeedd; border-radius: 999px; padding: 3px 11px; margin-bottom: 12px;
}
.feature-copy h2 { font-size: 29px; margin: 0 0 10px; }
.feature-copy p { color: var(--ink-soft); font-size: 17px; margin: 0 0 14px; }
.feature-copy ul { color: var(--ink-soft); font-size: 16px; padding-left: 20px; margin: 0 0 18px; }
.feature-copy li { margin: 5px 0; }
.feature-copy .more {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; color: var(--brand-ink); font-size: 16px;
}
.feature-copy .more:hover { text-decoration: underline; }
.feature-shot {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(15,28,55,.12);
  background: #fff;
}
.feature-shot img { display: block; width: 100%; height: auto; }
.feature-shot figcaption {
  font-size: 13px; color: var(--ink-faint); padding: 8px 12px;
  border-top: 1px solid var(--line); background: #fafbfe;
}

/* ---- 3-column doc layout (sidebar · content · on-this-page) ---- */
.doc-layout {
  max-width: var(--maxw);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 36px;
  padding: 36px 24px 60px;
  align-items: start;
}
@media (max-width: 1100px) { .doc-layout { grid-template-columns: 220px minmax(0,1fr); } }
@media (max-width: 760px)  { .doc-layout { grid-template-columns: 1fr; } .doc-side { display: none; } }

/* left sidebar nav */
.doc-side { position: sticky; top: 24px; font-size: 15px; }
.doc-side .side-group { margin-bottom: 22px; }
.doc-side .side-label {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px;
  color: var(--ink-faint); margin: 0 0 8px;
}
.doc-side a {
  display: block; color: var(--ink-soft); padding: 6px 10px; border-radius: 8px;
  border-left: 2px solid transparent; margin-left: -2px;
}
.doc-side a:hover { background: #faf4ee; color: var(--ink); }
.doc-side a.current { color: var(--brand-ink); font-weight: 600; border-left-color: var(--brand); background: #fff5ec; }

/* center content */
.doc-main { min-width: 0; }
.doc-main .crumbs { font-size: 14px; color: var(--ink-faint); margin: 0 0 10px; }
.doc-main h1 { font-size: 37px; margin: 0 0 12px; letter-spacing: -0.5px; }
.doc-meta { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; font-size: 14px; color: var(--ink-faint); margin: 0 0 22px; }
.doc-meta .pill { background: #fdeedd; color: var(--brand-ink); font-weight: 600; border-radius: 999px; padding: 2px 10px; }
.doc-main > p.lead { font-size: 18px; color: var(--ink-soft); margin: 0 0 28px; }

.gs-h { font-size: 25px; margin: 36px 0 18px; letter-spacing: -0.3px; }

/* numbered steps */
.gs-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; margin: 0 0 30px; }
.gs-step .num {
  width: 34px; height: 34px; border-radius: 999px; background: #fdeedd; color: var(--brand-ink);
  font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: 16px;
}
.gs-step .body { min-width: 0; } /* let wide <pre> scroll instead of expanding the column */
.gs-step .body h3 { margin: 4px 0 8px; font-size: 20px; }
.gs-step .body p { margin: 0 0 10px; color: var(--ink-soft); font-size: 16px; }
.gs-step .body ul { margin: 0 0 12px; padding-left: 20px; color: var(--ink-soft); font-size: 16px; }
.gs-step .body li { margin: 4px 0; }
.gs-step .shot {
  margin: 12px 0 4px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(15,28,55,.10);
}
.gs-step .shot img { display: block; width: 100%; height: auto; }
.gs-step .shot figcaption { font-size: 13px; color: var(--ink-faint); padding: 7px 12px; border-top: 1px solid var(--line); background: #fafbfe; }
.gs-step pre {
  background: #0e1525; color: #e7ecf5; border-radius: 10px; padding: 12px 14px; overflow-x: auto;
  font-size: 14px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin: 0 0 12px;
}

/* right on-this-page */
.toc { position: sticky; top: 24px; font-size: 14px; min-width: 0; }
.toc .toc-label { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--ink-faint); margin: 0 0 10px; }
.toc a { display: block; color: var(--ink-soft); padding: 4px 0 4px 12px; border-left: 2px solid var(--line); line-height: 1.45; }
.toc a:hover { color: var(--brand-ink); border-left-color: var(--brand); }

/* ---- playground callout ---- */
.playground {
  max-width: none;
  border: 1px solid #f6dcc0;
  border-radius: var(--radius);
  background: linear-gradient(180deg, #fff5ec 0%, #fbf3ec 100%);
  padding: 22px 24px;
  margin: 8px 0 4px;
}
.playground h3 { margin: 0 0 6px; font-size: 20px; }
.playground p { margin: 0 0 16px; color: var(--ink-soft); font-size: 16px; }
.playground .pg-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.playground .btn-primary { text-decoration: none; }
.playground .btn-ghost {
  display: inline-flex; align-items: center; gap: 6px;
  font-weight: 600; color: var(--brand-ink); font-size: 15px;
  border: 1px solid #f3c9a0; border-radius: 10px; padding: 8px 14px; background: #fff;
}
.playground .btn-ghost:hover { background: #fff5ec; }
.playground .pg-note { font-size: 14px; color: var(--ink-faint); margin: 12px 0 0; }

/* ---- clickable screenshots: hover cue ---- */
.shot img, .feature-shot img { cursor: zoom-in; }

/* ---- lightbox (full-size image view) ---- */
.lightbox {
  position: fixed; inset: 0; z-index: 1000;
  display: none; align-items: center; justify-content: center;
  background: rgba(8, 14, 28, .86);
  padding: 32px;
  opacity: 0; transition: opacity .15s ease;
}
.lightbox.open { display: flex; opacity: 1; }
.lightbox figure { margin: 0; max-width: 96vw; max-height: 92vh; display: flex; flex-direction: column; align-items: center; }
.lightbox img {
  max-width: 96vw; max-height: 84vh; width: auto; height: auto;
  border-radius: 10px; box-shadow: 0 24px 70px rgba(0,0,0,.5); cursor: zoom-out;
  background: #fff;
}
.lightbox figcaption { color: #cdd6e6; font-size: 14px; margin-top: 12px; text-align: center; max-width: 80ch; }
.lightbox-close {
  position: fixed; top: 18px; right: 22px;
  width: 40px; height: 40px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.12); color: #fff; font-size: 23px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
.lightbox-close:hover { background: rgba(255,255,255,.22); }

/* ---- schedule-demo CTA (shared across pages) ---- */
.demo-cta { background: var(--nav-bg); color: var(--nav-ink); }
.demo-cta-inner {
  max-width: var(--maxw); margin: 0 auto; padding: 52px 24px;
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 48px; align-items: start;
}
@media (max-width: 860px) { .demo-cta-inner { grid-template-columns: 1fr; gap: 28px; } }
.demo-cta-img {
  display: block; width: 100%; height: auto;
  border-radius: 10px; border: 1px solid #283450; margin: 0 0 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,.35);
}
.demo-cta .eyebrow { color: #f7a865; }
.demo-cta h2 { font-size: 29px; margin: 0 0 12px; color: #fff; }
.demo-cta .demo-lead { color: var(--nav-ink-soft); font-size: 17px; margin: 0 0 18px; max-width: 46ch; }
.demo-cta ul { list-style: none; padding: 0; margin: 0; color: var(--nav-ink-soft); font-size: 15px; }
.demo-cta li { padding: 4px 0 4px 22px; position: relative; }
.demo-cta li::before { content: "✓"; position: absolute; left: 0; color: #f7a865; font-weight: 700; }

.demo-form {
  background: #141d31; border: 1px solid #283450; border-radius: var(--radius);
  padding: 22px; display: grid; grid-template-columns: 1fr 1fr; gap: 14px;
}
.demo-form .full { grid-column: 1 / -1; }
.demo-field { display: flex; flex-direction: column; gap: 5px; }
.demo-field label { font-size: 13px; font-weight: 600; color: var(--nav-ink-soft); }
.demo-field input, .demo-field select, .demo-field textarea {
  background: #0e1525; border: 1px solid #324063; border-radius: 8px;
  padding: 9px 11px; color: var(--nav-ink); font-size: 15px; font-family: inherit; width: 100%;
}
.demo-field input::placeholder, .demo-field textarea::placeholder { color: #6b7890; }
.demo-field input:focus, .demo-field select:focus, .demo-field textarea:focus {
  outline: none; border-color: var(--brand);
}
.demo-field textarea { resize: vertical; min-height: 102px; }
.demo-form .btn-primary { grid-column: 1 / -1; justify-content: center; padding: 11px; font-size: 16px; }
.demo-note { grid-column: 1 / -1; font-size: 13px; color: #6b7890; margin: 0; }
.demo-thanks {
  grid-column: 1 / -1; display: none; background: #10301f; border: 1px solid #1f6b46;
  color: #b8f0d0; border-radius: 10px; padding: 14px 16px; font-size: 15px;
}
.demo-form.sent .demo-thanks { display: block; }
.demo-form.sent .demo-field, .demo-form.sent .btn-primary, .demo-form.sent .demo-note { display: none; }

/* ---- knowledge-base article (left "On this page" card + prose) ---- */
.kb-head { background: var(--bg-hero); border-bottom: 1px solid var(--line); position: relative; z-index: 0; overflow: hidden; }
.kb-head-inner { max-width: var(--maxw); margin: 0 auto; padding: 44px 24px 30px; }
.kb-head .eyebrow { margin: 0 0 8px; }
.kb-head h1 { font-size: 43px; line-height: 1.08; margin: 0 0 10px; letter-spacing: -0.6px; }
.kb-head .kb-updated { font-size: 15px; color: var(--ink-faint); margin: 0; }

.kb-layout {
  max-width: var(--maxw); margin: 0 auto; padding: 36px 24px 60px;
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 48px; align-items: start;
}
@media (max-width: 900px) { .kb-layout { grid-template-columns: 1fr; gap: 24px; } }

.kb-toc {
  position: sticky; top: 24px;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 22px 8px;
  background: #fff; box-shadow: 0 6px 20px rgba(15,28,55,.05);
}
@media (max-width: 900px) { .kb-toc { position: static; } }
.kb-toc .kb-toc-label { font-size: 19px; font-weight: 700; margin: 0 0 14px; }
.kb-toc a { display: block; color: var(--ink-faint); font-size: 16px; line-height: 1.4; padding: 7px 0; }
.kb-toc a:hover { color: var(--brand-ink); }
.kb-toc a.active { color: var(--ink); font-weight: 600; }

.kb-article { min-width: 0; max-width: 760px; }
.kb-article > p { font-size: 18px; color: var(--ink-soft); margin: 0 0 18px; line-height: 1.6; }
.kb-article h2 { font-size: 27px; margin: 38px 0 14px; letter-spacing: -0.3px; }
.kb-article h3 { font-size: 20px; margin: 26px 0 8px; }
.kb-article ul, .kb-article ol { color: var(--ink-soft); font-size: 17px; padding-left: 22px; margin: 0 0 18px; line-height: 1.6; }
.kb-article li { margin: 7px 0; }
.kb-article code { background: #f1f4fa; border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-size: 15px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.kb-article .figure-note { font-size: 14px; color: var(--ink-faint); margin: 6px 0 0; }

/* ---- footer ---- */
footer { border-top: 1px solid var(--line); color: var(--ink-faint); font-size: 14px; }
.foot-inner { max-width: var(--maxw); margin: 0 auto; padding: 28px 24px; display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-links a:hover { color: var(--brand-ink); }

/* ---- section and card glow (the Thalamus AI Cloud look) ----
   As on thalamusaicloud.com, the tinted sections become ink bands whose gold rises from the
   bottom edge, so a long page reads as chapters; cards become ink panels carrying a quieter
   version of the same gold. Inside a band, cards go translucent with a lighter rule so the
   band's own glow shows through (a second glow per card would be noise). The demo band and
   the footer close every page with the same band, so the one-section pages get it too.
   Last in the sheet so it wins over the light defaults above. */
:root {
  --ink-band: #0e1525;
  --band-glow: radial-gradient(90% 60% at 50% 118%, rgba(226,191,124,.55), rgba(201,169,110,.16) 50%, transparent 75%);
  --panel-glow: radial-gradient(120% 70% at 50% 135%, rgba(226,191,124,.42), rgba(176,141,79,.12) 50%, transparent 72%);
  --band-ink: #f5f0eb;
  --band-soft: #c4bcb2;
  --band-faint: #a39b90;
  --band-line: #263248;
  --gold: #e2bf7c;
}
section.block.tinted, .demo-cta, footer {
  background: var(--band-glow), var(--ink-band);
  color: var(--band-ink);
}
section.block.tinted { padding: 64px 0 72px; }
footer { border-top: 0; color: var(--band-faint); }
footer .foot-inner { padding: 40px 24px 52px; }
footer .foot-links a:hover { color: var(--gold); }

/* text inside a band */
section.block.tinted :is(h2, h3) { color: var(--band-ink); }
section.block.tinted :is(.section-sub, .prose p, .prose ul, .feature-copy p, .feature-copy ul, .steps li, .playground p, .mode-card ul) { color: var(--band-soft); }
section.block.tinted :is(.cat-h, .pg-note, .shot figcaption) { color: var(--band-faint); }
section.block.tinted :is(.eyebrow, .feature-copy .more, .playground .btn-ghost) { color: #f7a865; }
section.block.tinted :is(.badge, .feature-copy .badge, .cat-pill, .steps li::before) { background: rgba(247,168,101,.14); color: #f7a865; }
section.block.tinted :is(.prose code, .callout code, .card code) { background: rgba(255,255,255,.06); border-color: var(--band-line); color: var(--band-ink); }
section.block.tinted :is(.shot, .feature-shot) { border-color: var(--band-line); box-shadow: 0 14px 40px rgba(0,0,0,.45); }
section.block.tinted .shot figcaption, section.block.tinted .feature-shot figcaption { background: #121a2c; border-top-color: var(--band-line); }
section.block.tinted :is(.callout, .playground) { background: rgba(14,21,37,.78); border-color: var(--band-line); color: var(--band-soft); }
section.block.tinted .playground .btn-ghost { background: transparent; border-color: rgba(247,168,101,.45); }
section.block.tinted .playground .btn-ghost:hover { background: rgba(247,168,101,.1); }

/* cards: ink panels with the gold glow on the light ground, translucent inside a band */
.card {
  background: var(--panel-glow), linear-gradient(180deg, #141c2e 0%, #0d1220 100%);
  border-color: #1f2a40;
  color: var(--band-ink);
}
.card:hover { border-color: rgba(226,191,124,.55); box-shadow: 0 12px 30px rgba(12,19,34,.25); }
.card h3 { color: var(--band-ink); }
.card p, .mode-card ul { color: var(--band-soft); }
.card .ic { background: rgba(226,191,124,.14); color: var(--gold); }
.card :is(.badge, .cat-pill) { background: rgba(247,168,101,.14); color: #f7a865; }
.card code { background: rgba(255,255,255,.06); border-color: #2a3650; color: var(--band-ink); }
section.block.tinted .card { background: rgba(14,21,37,.78); border-color: var(--band-line); }

/* the demo form is a panel inside the demo band */
.demo-form { background: rgba(14,21,37,.78); border-color: var(--band-line); }
.demo-cta-img { border-color: var(--band-line); }

/* code blocks are the ink panels of the prose pages — the same quiet glow, kept low so the
   last line of a block stays readable */
pre.code, .gs-step pre {
  background: radial-gradient(120% 60% at 50% 140%, rgba(226,191,124,.26), rgba(176,141,79,.08) 50%, transparent 72%), #0e1525;
}

/* ==== EvalsArena additions ================================================== */

/* A screenshot that has not been added yet: placeholders.js swaps a missing image for this,
   naming the file to drop into images/ so the page reads as finished in the meantime. */
.img-missing {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  min-height: 220px; padding: 24px; text-align: center;
  background: repeating-linear-gradient(135deg, #fdf6ef 0 12px, #fbefe3 12px 24px);
  color: var(--ink-faint); font-size: 14px;
}
.img-missing b { color: var(--brand-ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13.5px; }
section.block.tinted .img-missing { background: repeating-linear-gradient(135deg, #141c2e 0 12px, #10182a 12px 24px); color: var(--band-faint); }
section.block.tinted .img-missing b { color: var(--gold); }

/* how-to recipes: a titled card with numbered steps and where-to-click */
.task {
  border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px 6px;
  margin: 0 0 22px; background: #fff; box-shadow: 0 6px 20px rgba(15,28,55,.04); scroll-margin-top: 20px;
}
.task h3 { margin: 0 0 4px; font-size: 19px; }
.task .task-meta { font-size: 14px; color: var(--ink-faint); margin: 0 0 12px; }
.task .task-meta b { color: var(--brand-ink); font-weight: 600; }
.task ol { margin: 0 0 14px; padding-left: 22px; color: var(--ink-soft); font-size: 16px; }
.task ol li { margin: 6px 0; }
.task .tip { font-size: 14.5px; color: var(--ink-soft); background: #fff5ec; border: 1px solid #f6dcc0; border-radius: 10px; padding: 9px 12px; margin: 0 0 14px; }
.ui { font-weight: 600; color: var(--ink); background: #faf4ee; border: 1px solid var(--line); border-radius: 6px; padding: 0 6px; white-space: nowrap; font-size: .95em; }

/* glossary */
dl.glossary { margin: 0 0 22px; max-width: none; }
dl.glossary dt { font-weight: 700; font-size: 17px; margin: 18px 0 4px; color: var(--ink); scroll-margin-top: 20px; }
dl.glossary dt .where { font-weight: 500; font-size: 13.5px; color: var(--brand-ink); margin-left: 8px; }
dl.glossary dd { margin: 0; color: var(--ink-soft); font-size: 16px; }

/* plain tables in prose */
table.doc-table { border-collapse: collapse; width: 100%; max-width: none; font-size: 15px; margin: 8px 0 22px; }
table.doc-table th, table.doc-table td { border-bottom: 1px solid var(--line); padding: 9px 10px; text-align: left; vertical-align: top; }
table.doc-table th { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--ink-faint); font-weight: 700; }
table.doc-table td { color: var(--ink-soft); }
table.doc-table td:first-child { color: var(--ink); font-weight: 600; white-space: nowrap; }
/* tables whose first column holds sentences (troubleshooting) wrap it */
table.doc-table.wrap-first td:first-child { white-space: normal; min-width: 220px; }
table.doc-table code { overflow-wrap: anywhere; }
/* wide tables scroll inside their own box on narrow screens */
.table-scroll { overflow-x: auto; max-width: 100%; margin: 8px 0 22px; }
.table-scroll > table.doc-table { margin: 0; min-width: 600px; }
.table-scroll table.doc-table td:first-child { white-space: normal; }
table.doc-table code, .doc-main p code, .doc-main li code, .callout code, .task code {
  background: #f6f1ec; border: 1px solid var(--line); border-radius: 6px; padding: 1px 6px; font-size: 14px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.doc-main h2 { scroll-margin-top: 20px; }
.doc-main h2.sec { font-size: 27px; margin: 40px 0 10px; }
.doc-main h3.sub { font-size: 20px; margin: 26px 0 8px; scroll-margin-top: 20px; }
.doc-main > p, .doc-main section > p { color: var(--ink-soft); font-size: 16.5px; margin: 0 0 14px; max-width: none; }
.doc-main ul.plain { color: var(--ink-soft); font-size: 16px; padding-left: 20px; margin: 0 0 16px; max-width: none; }
.doc-main ul.plain li { margin: 5px 0; }
pre.code {
  color: #e7ecf5; border-radius: 10px; padding: 12px 14px; overflow-x: auto; max-width: none;
  font-size: 14px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; margin: 0 0 16px; line-height: 1.5;
}
.callout.warn { border-color: #f3d39b; background: #fff8e8; }
.where-pill { display: inline-block; font-size: 12.5px; font-weight: 600; color: var(--brand-ink); background: #fdeedd; border-radius: 999px; padding: 2px 9px; margin: 0 0 8px; }

/* phones: the long product name and the header links do not fit side by side — the tabs below
   carry the same navigation — and a table's code column may wrap rather than push the page wide */
@media (max-width: 600px) {
  .nav-actions { display: none; }
  .brand { font-size: 16px; }
  table.doc-table td:first-child { white-space: normal; word-break: break-word; }
  table.doc-table { font-size: 14px; }
  table.doc-table th, table.doc-table td { padding: 8px 6px; }
}

/* links inside running text: the base sheet strips link colour site-wide (cards and nav are
   links), which left in-text links indistinguishable from the words around them */
.hero p a, .doc-main p a, .doc-main li a, .task a, .callout a, dl.glossary dd a, .section-sub a, table.doc-table a {
  color: var(--brand-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px;
}
.hero p a:hover, .doc-main p a:hover, .doc-main li a:hover, .task a:hover, .callout a:hover, dl.glossary dd a:hover { color: var(--brand); }
section.block.tinted .section-sub a { color: #f7a865; }

/* long addresses (the instance URL) wrap on phones instead of widening the page */
p code, li code, td code, .callout code, .lead b, .section-sub b {
  overflow-wrap: anywhere;
}
.card p b, .card p code {
  overflow-wrap: anywhere;
}

/* the decorative sphere may reach past the window on narrower screens: clip it there
   (clip, unlike hidden, keeps the sticky sidebar working) */
html, body { overflow-x: clip; }