/* AL Solutions — Demo suite design system
   Brand per ~/ai-business-campaign/docs/brand-guidelines.md v1.0.
   Self-sufficient: does NOT depend on the site's style.css.
   One stylesheet serves RTL (he) and LTR (en) via logical properties.
   Page anatomy: .demo-header → .demo-hero → .app-frame (the mock product)
   → .demo-explain → .demo-stats → .demo-cta → .demo-footer
   Video mode: body.rec hides everything but .app-frame + .caption-bar. */

@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/heebo-var-hebrew.woff2') format('woff2');
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: 'Heebo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/heebo-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --navy: #0B1F3A;
  --navy-deep: #081729;
  --navy-raised: #0E2A52;
  --navy-card: #16324F;
  --blue: #2D7FF9;
  --blue-bright: #5C9DFF;
  --blue-ink: #1D4ED8;
  --white: #FFFFFF;
  --muted: #B9CBE4;
  --muted-light: #C9D6E8;
  --muted-dim: #7E93AD;
  --border-dark: #33547A;
  --control-border-dark: #6382AD;
  --success: #22C55E;
  --warning: #F59E0B;
  --error: #EF4444;
  --font: 'Heebo', -apple-system, "Helvetica Neue", "Segoe UI", Arial, sans-serif;
  --mono: "SF Mono", SFMono-Regular, ui-monospace, Menlo, Consolas, monospace;
  --radius-btn: 10px;
  --radius-card: 14px;
  --container: 1120px;
  --frame-max: 980px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

body {
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
  background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }

a { color: var(--blue-bright); }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  inset-inline-start: -9999px;
  background: var(--blue);
  color: #fff;
  padding: 10px 18px;
  border-radius: var(--radius-btn);
  z-index: 100;
}
.skip-link:focus {
  inset-inline-start: 12px;
  top: 12px;
}

.container { max-width: var(--container); margin-inline: auto; padding-inline: 24px; }

/* --muted-dim (#7E93AD) is AA-safe on the page navy/navy-deep (5.2:1 / 5.7:1) but
   FAILS 4.5:1 on --navy-card (4.15, axe-measured). Inside card surfaces the token
   resolves to a card-safe step: 4.65:1 on navy-card, 5.07:1 on navy-raised. */
.panel, .result-card, .cluster-card, .review-box, .guard-box, .feed-item {
  --muted-dim: #889CB4;
}

/* ---------- Header ---------- */

.demo-header { padding-block: 18px; }
.demo-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-height: 44px; /* touch target: matches the main site's 44px standard */
  text-decoration: none;
  direction: ltr; /* wordmark always LTR, even in RTL layout */
}
/* Lockup metrics from brand-guidelines: mark height = font-size x 0.9259,
   baseline nudge = font-size x 0.09259, derived so mark and word never drift. */
.brand img {
  width: auto;
  height: calc(22px * 0.9259);
  transform: translateY(calc(22px * 0.09259));
}
.brand-name {
  color: var(--white);
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.header-links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.header-links a {
  color: var(--muted-light);
  text-decoration: none;
  font-size: 15px;
  padding: 10px 2px;
  min-height: 44px; /* touch target: matches the main site's 44px standard */
  display: inline-flex;
  align-items: center;
}
.header-links a:hover { color: var(--white); text-decoration: underline; }
.header-links a.lang-switch { min-width: 44px; justify-content: center; }

/* Permanent honesty badge: every demo page and every frame carries it */
.demo-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid var(--border-dark);
  border-radius: 9999px;
  padding: 4px 13px;
  font-size: 13.5px;
  color: var(--muted-light);
  background: rgba(14, 42, 82, 0.6);
  white-space: nowrap;
}
.demo-badge .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--blue-bright);
  flex: none;
}

/* ---------- Hero ---------- */

.demo-hero { padding-block: 34px 26px; text-align: center; }
.kicker {
  display: block;
  color: var(--blue-bright);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.demo-hero h1 {
  color: var(--white);
  font-size: clamp(30px, 4.4vw, 42px);
  font-weight: 800;
  line-height: 1.18;
  max-width: 26ch; /* 21ch wrapped Hebrew headlines to 3 lines with a 1-word orphan */
  text-wrap: balance;
  margin-inline: auto;
}
.demo-hero .sub {
  max-width: 62ch;
  margin: 14px auto 0;
  font-size: 18px;
  color: var(--muted);
}

/* ---------- App frame: the mock product ---------- */

.app-frame {
  max-width: var(--frame-max);
  margin: 26px auto 0;
  background: var(--navy-deep);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(4, 12, 24, 0.55);
}
.app-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  background: var(--navy-raised);
  border-bottom: 1px solid var(--border-dark);
}
.app-bar .app-name {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--white);
  font-weight: 700;
  font-size: 15.5px;
}
.app-bar .app-name svg { color: var(--blue-bright); flex: none; }
.app-bar .app-badge {
  font-size: 12.5px;
  color: var(--muted-light);
  border: 1px solid var(--border-dark);
  border-radius: 9999px;
  padding: 2px 10px;
  white-space: nowrap;
}
.app-body { padding: 20px; min-height: 430px; }
/* With JavaScript off the demo cannot run, and an unexplained empty frame is a
   worse experience than an honest sentence. The rest of the page is static. */
.noscript-note {
  color: var(--muted-light);
  font-size: 15.5px;
  max-width: 62ch;
  border-inline-start: 3px solid var(--blue);
  padding: 10px 16px;
  background: rgba(45, 127, 249, 0.08);
  border-radius: 8px;
}

/* ---------- App primitives shared by all demos ---------- */

.panel {
  background: var(--navy-card);
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  padding: 16px;
}
.panel h3, .panel h4, .panel-title {
  color: var(--white);
  font-size: 14.5px;
  font-weight: 700;
  margin-bottom: 10px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  border-radius: var(--radius-btn);
  padding: 11px 22px;
  min-height: 44px;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--blue); color: #fff; font-size: 19px; }
.btn-primary:hover { background: #1f6fe8; }
.btn-secondary {
  background: transparent;
  color: var(--white);
  border-color: var(--control-border-dark);
}
.btn-secondary:hover { border-color: var(--blue-bright); }
.btn-small { font-size: 15px; padding: 8px 16px; min-height: 40px; }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Preset-question chips: the "choose one of N inputs" pattern */
.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
  font-family: var(--font);
  font-size: 15px;
  color: var(--muted-light);
  background: var(--navy-raised);
  border: 1px solid var(--control-border-dark);
  border-radius: 9999px;
  padding: 9px 16px;
  min-height: 44px;
  cursor: pointer;
  text-align: start;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.chip:hover { border-color: var(--blue-bright); color: var(--white); }
.chip[aria-pressed="true"], .chip.active {
  border-color: var(--blue);
  color: var(--white);
  background: rgba(45, 127, 249, 0.16);
}
.chip[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Chat */
.chat-log { display: flex; flex-direction: column; gap: 12px; }
.msg { max-width: 85%; border-radius: 12px; padding: 11px 15px; font-size: 15.5px; }
.msg-user {
  align-self: flex-end;
  background: rgba(45, 127, 249, 0.2);
  border: 1px solid rgba(45, 127, 249, 0.45);
  color: var(--white);
}
.msg-ai {
  align-self: flex-start;
  background: var(--navy-card);
  border: 1px solid var(--border-dark);
  color: var(--muted-light);
}
.msg-ai .msg-head {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--blue-bright);
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
}
.msg-ai strong { color: var(--white); }

/* Typing caret */
.caret::after {
  content: "";
  display: inline-block;
  width: 2px;
  height: 1em;
  background: var(--blue-bright);
  margin-inline-start: 2px;
  vertical-align: text-bottom;
  animation: blink 0.9s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* Thinking dots */
.thinking { display: inline-flex; gap: 5px; align-items: center; padding-block: 4px; }
.thinking i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--muted-dim);
  animation: pulse 1.2s ease-in-out infinite;
}
.thinking i:nth-child(2) { animation-delay: 0.18s; }
.thinking i:nth-child(3) { animation-delay: 0.36s; }
@keyframes pulse { 0%, 100% { opacity: 0.25; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }

/* Progress steps (pipeline view) */
.pipe { display: flex; flex-direction: column; gap: 9px; }
.pipe-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--muted-dim);
  transition: color 0.2s ease;
}
.pipe-step .ind {
  width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--border-dark);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.pipe-step.run { color: var(--white); }
.pipe-step.run .ind { border-color: var(--blue-bright); }
.pipe-step.run .ind::after {
  content: "";
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--blue-bright);
  animation: pulse 1s ease-in-out infinite;
}
.pipe-step.done { color: var(--muted-light); }
.pipe-step.done .ind { border-color: var(--success); background: rgba(34, 197, 94, 0.15); }
/* Drawn checkmark, not a "✓" text glyph: brand rule is SVG/vector marks only,
   and the character renders as an emoji on some platforms. */
.pipe-step.done .ind::after {
  content: "";
  width: 5px; height: 9px;
  border: solid var(--success);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg) translate(-1px, -1px);
}

/* Confidence meter */
.meter {
  height: 6px;
  background: var(--navy-raised);
  border-radius: 9999px;
  overflow: hidden;
  min-width: 70px;
}
.meter > i {
  display: block;
  height: 100%;
  border-radius: 9999px;
  background: var(--success);
  width: 0;
  transition: width 0.7s ease;
}
.meter.warn > i { background: var(--warning); }

/* Status pills */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  border-radius: 9999px;
  padding: 3px 11px;
  white-space: nowrap;
}
/* Pill tints are OPAQUE, not alpha. Alpha tints composite against whatever card
   they land on, so the same pill measured 4.05:1 on navy-card and passed on navy.
   Fixed colors keep every pill above 4.5:1 wherever it is used. */
.pill-blue { color: #8FBCFF; background: #12294A; border: 1px solid rgba(45, 127, 249, 0.5); }
.pill-green { color: #6EE7A0; background: #0E2C22; border: 1px solid rgba(34, 197, 94, 0.5); }
.pill-amber { color: #FCD34D; background: #2E2410; border: 1px solid rgba(245, 158, 11, 0.55); }
.pill-red { color: #FCA5A5; background: #341A22; border: 1px solid rgba(239, 68, 68, 0.55); }
.pill-grey { color: #D3DEEC; background: #1B2C42; border: 1px solid var(--border-dark); }

/* Data table */
.dtable { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.dtable th {
  text-align: start;
  color: var(--muted-dim);
  font-weight: 700;
  font-size: 13px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border-dark);
}
.dtable td {
  padding: 9px 10px;
  border-bottom: 1px solid rgba(51, 84, 122, 0.4);
  color: var(--muted-light);
}
.dtable tr:last-child td { border-bottom: none; }
.dtable .num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: embed; }

/* Code block (SQL etc.) */
.code {
  font-family: var(--mono);
  direction: ltr;
  text-align: left;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--muted-light);
  background: #061120;
  border: 1px solid var(--border-dark);
  border-radius: 10px;
  padding: 14px 16px;
  /* pre-wrap, not pre: the demo's whole promise is that the SQL is visible.
     Clipping it behind a horizontal scrollbar broke that (and failed 1.4.13). */
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 2;
}
.code .kw { color: var(--blue-bright); font-weight: 600; }
.code .str { color: #4ADE80; }
.code .cm { color: var(--muted-dim); }

/* Citations */
.cite {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 21px;
  height: 21px;
  padding-inline: 5px;
  border-radius: 6px;
  background: rgba(45, 127, 249, 0.18);
  border: 1px solid rgba(45, 127, 249, 0.5);
  color: var(--blue-bright);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  vertical-align: 2px;
  margin-inline: 2px;
}
.cite:hover, .cite.active { background: var(--blue); color: #fff; }
.src-quote {
  border-inline-start: 3px solid var(--blue);
  background: rgba(45, 127, 249, 0.07);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--muted-light);
}
.src-quote mark { background: rgba(45, 127, 249, 0.3); color: var(--white); border-radius: 3px; padding-inline: 2px; }
.src-quote .src-name { color: var(--blue-bright); font-size: 12.5px; font-weight: 700; display: block; margin-bottom: 4px; }

/* Log lines (agent activity) */
.alog { display: flex; flex-direction: column; gap: 7px; font-size: 14px; }
.alog .line {
  display: flex;
  gap: 9px;
  align-items: baseline;
  color: var(--muted-light);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.alog .line.show { opacity: 1; transform: none; }
.alog .t { font-family: var(--mono); font-size: 12px; color: var(--muted-dim); direction: ltr; flex: none; }

/* Skeleton shimmer */
.skel {
  border-radius: 8px;
  background: linear-gradient(90deg, var(--navy-card) 25%, var(--navy-raised) 50%, var(--navy-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.3s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* Staged reveal */
.reveal { opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease, transform 0.35s ease; }
.reveal.show { opacity: 1; transform: none; }

/* Toggle switch (live/scripted in sales tier; reused for options) */
.switch { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; user-select: none; }
.switch input { position: absolute; opacity: 0; width: 44px; height: 24px; cursor: pointer; }
.switch .track {
  width: 44px; height: 24px; border-radius: 9999px;
  background: var(--navy-raised);
  border: 1px solid var(--control-border-dark);
  position: relative;
  transition: background-color 0.15s ease;
  flex: none;
}
.switch .track::after {
  content: "";
  position: absolute;
  top: 2px;
  inset-inline-start: 2px;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--muted-light);
  transition: transform 0.15s ease, background-color 0.15s ease;
}
.switch input:checked + .track { background: rgba(45, 127, 249, 0.4); }
.switch input:checked + .track::after { transform: translateX(20px); background: var(--white); }
[dir="rtl"] .switch input:checked + .track::after { transform: translateX(-20px); }
.switch input:focus-visible + .track { outline: 3px solid var(--blue); outline-offset: 2px; }

/* ---------- Below the frame ---------- */

.demo-explain { padding-block: 44px 8px; }
.demo-explain h2, .demo-stats h2 {
  color: var(--white);
  font-size: 26px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 24px;
}
.explain-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  max-width: var(--frame-max);
  margin-inline: auto;
}
.explain-card {
  background: var(--navy-card);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-card);
  padding: 20px;
}
.explain-card .num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: rgba(45, 127, 249, 0.16);
  color: var(--blue-bright);
  font-weight: 800;
  margin-bottom: 10px;
}
.explain-card h3 { color: var(--white); font-size: 17.5px; margin-bottom: 6px; }
.explain-card p { font-size: 15px; color: var(--muted); }

.demo-stats { padding-block: 36px 8px; }
.stats-note {
  text-align: center;
  font-size: 14px;
  color: var(--muted-dim);
  max-width: 60ch;
  margin: 14px auto 0;
}
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  max-width: var(--frame-max);
  margin-inline: auto;
}
.stat-card {
  background: var(--navy-card);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-card);
  padding: 20px;
  text-align: center;
}
.stat-card .n {
  display: block;
  color: var(--blue-bright);
  font-size: 34px;
  font-weight: 800;
  line-height: 1.1;
  /* isolate, NOT direction:ltr. A blanket LTR made "SQL גלוי" read as
     "גלוי SQL" to a Hebrew reader. Only pure-symbol values (14 → 1) carry
     dir="ltr" in the markup; everything else keeps the page direction. */
  unicode-bidi: isolate;
}
.stat-card .l { font-size: 14.5px; color: var(--muted); }

.demo-cta { padding-block: 46px 40px; text-align: center; }
.demo-cta h2 { color: var(--white); font-size: 28px; font-weight: 800; margin-bottom: 8px; }
.demo-cta p { max-width: 54ch; margin-inline: auto; }
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }

.demo-footer {
  border-top: 1px solid var(--border-dark);
  padding-block: 26px;
  text-align: center;
  font-size: 14px;
  color: var(--muted-dim);
}
.demo-footer .flinks { display: flex; gap: 18px; justify-content: center; align-items: center; flex-wrap: wrap; margin-bottom: 10px; }
.demo-footer a {
  color: var(--muted-light);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px; /* touch target: matches the main site's 44px standard */
  min-width: 44px;
  padding-inline: 4px;
}
.demo-footer a:hover { color: var(--white); text-decoration: underline; }

/* ---------- Video recording mode ---------- */

.caption-bar {
  display: none;
  position: fixed;
  inset-inline: 0;
  bottom: 0;
  z-index: 60;
  padding: 18px 24px 22px;
  background: linear-gradient(0deg, rgba(4, 12, 24, 0.96) 55%, rgba(4, 12, 24, 0));
  text-align: center;
  pointer-events: none;
}
.caption-bar .cap {
  display: inline-block;
  background: rgba(8, 23, 41, 0.92);
  border: 1px solid var(--border-dark);
  border-radius: 12px;
  color: var(--white);
  font-size: 21px;
  font-weight: 600;
  line-height: 1.45;
  padding: 10px 22px;
  max-width: 88%;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.caption-bar .cap.show { opacity: 1; transform: none; }

body.rec .demo-header, body.rec .demo-hero, body.rec .demo-explain,
body.rec .demo-stats, body.rec .demo-cta, body.rec .demo-footer { display: none; }
body.rec #a11y-widget { display: none !important; }
body.rec { background: var(--navy-deep); }
body.rec .caption-bar { display: block; }
body.rec .app-frame {
  max-width: none;
  margin: 0;
  border: none;
  border-radius: 0;
  box-shadow: none;
  min-height: 100vh;
}
body.rec .app-body { padding-bottom: 110px; }

/* Watermark lockup inside the frame in rec mode (brand presence in videos).
   Bottom-start, not top: at the top it landed on the app-bar title in all
   eight rendered videos. The caption bar owns the bottom centre, so the
   inline-start corner is the one free spot. */
.rec-brand {
  display: none;
  position: fixed;
  bottom: 96px;
  inset-inline-start: 20px;
  z-index: 61;
  align-items: baseline;
  gap: 6px;
  direction: ltr;
  opacity: 0.9;
}
/* width:auto is load-bearing: without it the img keeps its 122px width
   attribute and the mark sits a wordmark's width away from "Solutions". */
.rec-brand img { width: auto; height: calc(15px * 0.9259); transform: translateY(calc(15px * 0.09259)); }
.rec-brand span { color: var(--white); font-size: 15px; font-weight: 800; }
body.rec .rec-brand { display: inline-flex; }

/* ---------- Responsive ---------- */

@media (max-width: 720px) {
  body { font-size: 16px; }
  .app-body { padding: 14px; min-height: 0; }
  .app-bar { flex-wrap: wrap; }
  .app-bar .app-badge { white-space: normal; }
  .demo-hero { padding-block: 22px 16px; }
  .demo-hero .sub { font-size: 16.5px; }
  .caption-bar .cap { font-size: 16px; }
  .two-col { grid-template-columns: 1fr !important; }
  .doc-panel { overflow-x: auto; }
}
@media (max-width: 420px) {
  /* 320px reflow (WCAG 1.4.10): field rows stack instead of escaping the panel */
  .f-row { grid-template-columns: 1fr auto; }
  .f-label { grid-column: 1 / -1; padding-bottom: 2px; }

  /* The synthetic invoice is a 4-column table whose min-content width cannot
     fit 320px. It used to overflow .paper (overflow:visible), so the total
     column was CLIPPED rather than scrolled: 924.00 rendered as "24.00".
     On a demo about reading invoice amounts, a wrong-looking number is worse
     than the reflow failure itself. Shrinking the type does not close the gap
     (three numeric columns alone need more than the sheet has), so the table
     stacks into labelled rows, which is the standard responsive-table pattern
     and cannot clip at any width. */
  .paper { padding-inline: 14px; }
  .pitems thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .pitems tr { display: block; padding-block: 6px; border-bottom: 1px solid #E4E7EE; }
  .pitems tr:last-child { border-bottom: none; }
  .pitems td { display: flex; justify-content: space-between; gap: 12px; border: none; padding: 2px 0; }
  .pitems td::before { content: attr(data-l); color: #5A6478; font-size: 11px; flex: none; }
  .pitems td:first-child { font-weight: 600; }
  .ptotals { max-width: none; }
}

/* ---------- Demo 1: Document AI ---------- */

.doc-picker .picker-label, .picker-label {
  color: var(--white);
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 10px;
}
.doc-panel { padding: 14px; background: var(--navy-raised); }

.paper {
  background: #FDFDF9;
  color: #1A2233;
  border-radius: 8px;
  padding: 20px 22px;
  font-size: 13px;
  line-height: 1.5;
  box-shadow: 0 6px 24px rgba(3, 10, 20, 0.5);
}
.paper.messy { transform: rotate(-0.6deg); filter: saturate(0.85) contrast(0.92); }
.phead { display: flex; justify-content: space-between; gap: 14px; border-bottom: 2px solid #1A2233; padding-bottom: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.psup { font-size: 16.5px; display: block; }
.psub { color: #5A6478; font-size: 11.5px; display: block; }
.pmeta { display: flex; flex-direction: column; gap: 2px; font-size: 12px; text-align: end; }
.ptype { font-weight: 800; font-size: 13.5px; }
.pnum { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: embed; }
.pitems { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.pitems th { text-align: start; border-bottom: 1px solid #B9BFCC; padding: 4px 6px; font-size: 11.5px; color: #5A6478; }
.pitems td { padding: 5px 6px; border-bottom: 1px solid #E4E7EE; }
.ptotals { margin-top: 10px; margin-inline-start: auto; max-width: 240px; display: flex; flex-direction: column; gap: 3px; font-size: 12.5px; }
.ptotals > div { display: flex; justify-content: space-between; gap: 18px; }
.ptotals .grand { font-weight: 800; font-size: 14px; border-top: 2px solid #1A2233; padding-top: 5px; margin-top: 3px; }
.ptotals .grand.blurred .pnum { filter: blur(2.2px); }
.pfoot { margin-top: 14px; padding-top: 8px; border-top: 1px solid #E4E7EE; color: #5A6478; font-size: 10.5px; }
.paper [data-f] { border-radius: 3px; transition: background-color 0.25s ease, box-shadow 0.25s ease; }
.paper [data-f].hl { background: rgba(45, 127, 249, 0.22); box-shadow: 0 0 0 3px rgba(45, 127, 249, 0.35); }

.extract-side { display: flex; flex-direction: column; }
/* flex-wrap is a 320px reflow fix (1.4.10): the heading and its pill together
   exceed the panel at that width, and .pill is nowrap, so without wrapping the
   pill was pushed past its container edge. */
.fields-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.fields-empty { font-size: 14px; color: var(--muted-dim); }
.f-row {
  display: grid;
  grid-template-columns: minmax(96px, 0.9fr) 1.1fr auto;
  gap: 10px;
  align-items: center;
  padding-block: 7px;
  border-bottom: 1px solid rgba(51, 84, 122, 0.4);
  font-size: 14px;
}
.f-row:last-child { border-bottom: none; }
.f-label { color: var(--muted-dim); }
.f-val { color: var(--white); font-weight: 600; overflow-wrap: anywhere; }
.f-missing { color: #FBBF24; font-weight: 700; }
.f-conf { display: inline-flex; align-items: center; gap: 8px; justify-self: end; }
.f-pct { font-size: 12.5px; color: var(--muted-dim); min-width: 40px; text-align: end; }
.f-row.low .f-pct { color: #FBBF24; font-weight: 700; }

.review-box {
  margin-top: 14px;
  border: 1px solid rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.07);
  border-radius: 12px;
  padding: 14px;
}
.review-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.review-head strong { color: var(--white); font-size: 15px; }
.review-why { font-size: 14px; color: var(--muted-light); margin-bottom: 10px; }
.review-choices { display: flex; gap: 10px; flex-wrap: wrap; }

.result-box { margin-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.result-line { display: inline-flex; align-items: center; gap: 10px; font-size: 14.5px; color: var(--muted-light); }
.result-note { width: 100%; font-size: 13.5px; color: var(--muted-dim); }
.toast { font-size: 13.5px; color: #4ADE80; margin-inline-start: 10px; }

.run-row { display: flex; gap: 12px; justify-content: center; margin-top: 18px; }

/* ---------- Demo 2: RAG Assistant ---------- */

.rag-layout { grid-template-columns: 1.35fr 1fr; }
.rag-chat { display: flex; flex-direction: column; }
/* No inner scroll: the conversation grows and the page scrolls once. The side
   column sticks so the retrieved passages stay beside whatever you are reading. */
.rag-chat .chat-log { flex: 1; min-height: 330px; }
.rag-side { align-self: stretch; }
.rag-sticky { position: sticky; top: 16px; }
.ret-none {
  border-inline-start: 3px solid var(--warning);
  background: rgba(245, 158, 11, 0.07);
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13.5px;
  color: var(--muted-light);
}
.ret-none strong { color: var(--white); display: block; margin-bottom: 3px; font-size: 14px; }
.chat-input { display: flex; gap: 10px; margin-top: 12px; }
.chat-input input {
  flex: 1;
  min-width: 0; /* 320px reflow: input yields before the send button overflows */
  font-family: var(--font);
  font-size: 15px;
  color: var(--white);
  background: var(--navy-raised);
  border: 1px solid var(--control-border-dark);
  border-radius: var(--radius-btn);
  padding: 10px 14px;
  min-height: 44px;
}
.chat-input input::placeholder { color: var(--muted-dim); }
.chat-input input:disabled { opacity: 0.85; }
.corpus { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.corpus li { display: flex; align-items: center; gap: 9px; font-size: 14px; color: var(--muted-light); }
.corpus li svg { color: var(--blue-bright); flex: none; }
.corpus .c-pages { margin-inline-start: auto; font-size: 12px; color: var(--muted-dim); white-space: nowrap; }
.corpus-meta { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(51, 84, 122, 0.5); font-size: 12.5px; color: var(--muted-dim); }
.ret-list { display: flex; flex-direction: column; gap: 10px; max-height: 300px; overflow-y: auto; }
.src-quote.cite-hl { border-inline-start-color: var(--blue-bright); background: rgba(45, 127, 249, 0.16); }
.ask-block { margin-top: 16px; }
.ans-meta { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(51, 84, 122, 0.45); font-size: 12.5px; color: var(--muted-dim); }
.guard-box {
  margin-top: 10px;
  border: 1px solid rgba(245, 158, 11, 0.5);
  background: rgba(245, 158, 11, 0.07);
  border-radius: 10px;
  padding: 12px;
}
.search-note { font-size: 13px; color: var(--muted-dim); }
@media (max-width: 860px) {
  .rag-layout { grid-template-columns: 1fr; }
  .rag-sticky { position: static; }
}

/* ---------- Demo 3: Data Copilot ---------- */

/* The schema is reference material, not the show. It rides as a compact strip
   above a full-width conversation, so the answer, the SQL and the chart get the
   whole frame instead of a half-column next to 280px of empty navy. */
.dc-main { display: flex; flex-direction: column; }
.dc-log { display: flex; flex-direction: column; gap: 12px; }
.schema-strip { margin-bottom: 12px; }
.schema-strip .fields-head { margin-bottom: 10px; }
.schema { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px 18px; }
.schema li { font-size: 13.5px; color: var(--muted-light); background: var(--navy-raised); border: 1px solid rgba(51, 84, 122, 0.6); border-radius: 9px; padding: 8px 11px; }
.schema .tname { display: flex; align-items: center; gap: 8px; color: var(--white); font-weight: 700; font-family: var(--mono); font-size: 13px; direction: ltr; justify-content: flex-end; }
[dir="ltr"] .schema .tname { justify-content: flex-start; }
.schema .tname svg { color: var(--blue-bright); flex: none; }
.schema .trows { color: var(--muted-dim); font-size: 11.5px; margin-inline-start: auto; }
.schema .cols { font-family: var(--mono); direction: ltr; text-align: left; font-size: 11px; color: var(--muted-dim); display: block; margin-top: 2px; overflow-wrap: anywhere; }
.result-card { background: var(--navy-card); border: 1px solid var(--border-dark); border-radius: 12px; padding: 14px; }
.result-card .sql-label { font-size: 12px; font-weight: 700; color: var(--muted-dim); margin-bottom: 6px; }
.result-card .code { margin-bottom: 12px; }
.sql-status { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--muted-dim); margin-bottom: 10px; }
.answer-line { font-size: 15px; color: var(--muted-light); margin-top: 12px; }
.answer-line strong { color: var(--white); }
.res-meta { margin-top: 10px; padding-top: 8px; border-top: 1px solid rgba(51, 84, 122, 0.45); font-size: 12.5px; color: var(--muted-dim); }

/* Bar chart (HTML marks per dataviz specs: thin, rounded data-end, baseline anchor) */
.chart { direction: ltr; }
.chart-title { font-size: 13px; font-weight: 700; color: var(--muted-light); margin-bottom: 10px; text-align: start; }
.cbars { display: flex; align-items: flex-end; justify-content: space-around; gap: 18px; height: 180px; border-bottom: 1px solid var(--border-dark); padding-inline: 8px; }
.cbar { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; flex: 1; max-width: 90px; }
.cbar .bfill { width: 100%; max-width: 46px; background: var(--blue); border-radius: 4px 4px 0 0; height: 0; transition: height 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.cbar .bval { font-size: 12.5px; color: var(--white); font-weight: 700; margin-bottom: 5px; font-variant-numeric: tabular-nums; opacity: 0; transition: opacity 0.4s ease 0.5s; }
.cbar.on .bval { opacity: 1; }
.cbar-labels { display: flex; justify-content: space-around; gap: 18px; padding-inline: 8px; margin-top: 6px; }
.cbar-labels span { flex: 1; max-width: 90px; text-align: center; font-size: 12.5px; color: var(--muted-dim); }

/* Horizontal bars */
.hbars { display: flex; flex-direction: column; gap: 9px; }
.hbar { display: grid; grid-template-columns: minmax(120px, 0.65fr) 1fr; gap: 10px; align-items: center; font-size: 13px; }
.hbar .hlabel { color: var(--muted-light); text-align: end; direction: rtl; }
[lang="en"] .hbar .hlabel, [dir="ltr"] .hbar .hlabel { direction: ltr; text-align: end; }
.hbar .htrack { display: flex; align-items: center; gap: 8px; }
.hbar .hfill { height: 14px; background: var(--blue); border-radius: 0 4px 4px 0; width: 0; transition: width 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.hbar .hval { font-size: 12px; color: var(--white); font-weight: 700; white-space: nowrap; opacity: 0; transition: opacity 0.4s ease 0.5s; }
.hbar.on .hval { opacity: 1; }

/* Line chart (SVG) */
.cline svg { width: 100%; height: auto; display: block; }
.cline .grid-line { stroke: rgba(51, 84, 122, 0.45); stroke-width: 1; }
.cline .series { fill: none; stroke: var(--blue); stroke-width: 2; }
.cline .dot { fill: var(--blue-bright); stroke: var(--navy-deep); stroke-width: 2; }
.cline .pt-label { fill: var(--white); font-family: var(--font); font-size: 11px; font-weight: 700; }
.cline .ax-label { fill: var(--muted-dim); font-family: var(--font); font-size: 10.5px; }

/* Warning cell in results table */
.cell-flag { display: inline-flex; align-items: center; gap: 6px; }
.cell-flag svg { flex: none; }

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

/* ---------- Demo 4: Agentic Triage ---------- */

/* Feed and agent log sit side by side while the agent works; the clusters (the
   actual product of the demo) then get the full frame width below them. */
.tr-layout { grid-template-columns: 1fr 1fr; }
.cluster-wrap { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; align-items: start; }
.cluster-wrap .cluster-card + .cluster-card { margin-top: 0; }
.feed { display: flex; flex-direction: column; gap: 7px; max-height: 420px; overflow-y: auto; padding-inline-end: 4px; }
/* Scrollable panes are keyboard-reachable (WCAG 2.1.1 / 1.4.13); the engines add
   tabindex="0" + role="region", this gives the focus state something to show. */
.feed:focus-visible, .ret-list:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; border-radius: 8px; }
.feed-item {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 13px;
  color: var(--muted-light);
  background: var(--navy-raised);
  border: 1px solid rgba(51, 84, 122, 0.5);
  border-radius: 8px;
  padding: 7px 10px;
  opacity: 0;
  transform: translateY(5px);
  transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.3s ease;
}
.feed-item.show { opacity: 1; transform: none; }
.feed-item .sev { width: 8px; height: 8px; border-radius: 50%; flex: none; align-self: center; }
.feed-item .sev.red { background: var(--error); }
.feed-item .sev.amber { background: var(--warning); }
.feed-item .sev.grey { background: var(--muted-dim); }
.feed-item .ft { font-family: var(--mono); font-size: 11px; color: var(--muted-dim); direction: ltr; flex: none; }
.feed-item .fsrc { font-size: 11px; color: var(--blue-bright); flex: none; white-space: nowrap; }
.feed-item.grouped { border-color: rgba(45, 127, 249, 0.55); background: #14335B; }
.feed-item.grouped .ft { color: #93A6BD; }
/* "Already handled" state. Never dim with opacity: that dragged 11px text down to
   2.16:1. Recede the surface and the border instead, keep the text legible. */
.feed-item.settled { border-color: rgba(51, 84, 122, 0.35); background: #0C2038; }
.feed-item.settled .ft, .feed-item.settled .fsrc { color: #8296B0; }
.feed-item.settled .sev { box-shadow: 0 0 0 2px rgba(8, 23, 41, 0.6); }
.feed-count { font-size: 12.5px; color: var(--muted-dim); margin-top: 8px; }

.cluster-card {
  background: var(--navy-card);
  border: 1px solid var(--border-dark);
  border-inline-start: 3px solid var(--muted-dim);
  border-radius: 12px;
  padding: 14px;
}
.cluster-card.p1 { border-inline-start-color: var(--error); }
.cluster-card.p2 { border-inline-start-color: var(--warning); }
.cluster-card + .cluster-card { margin-top: 10px; }
.cl-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.cl-head strong { color: var(--white); font-size: 15px; }
.cl-head .cl-n { font-size: 12px; color: var(--muted-dim); margin-inline-start: auto; white-space: nowrap; }
.cl-cause { font-size: 14px; color: var(--muted-light); }
.cl-cause .lbl, .cl-act .lbl { color: var(--muted-dim); font-size: 12px; font-weight: 700; display: block; margin-bottom: 2px; }
.cl-act { margin-top: 10px; font-size: 14px; color: var(--muted-light); }
.appr-row { display: flex; gap: 10px; align-items: center; margin-top: 12px; flex-wrap: wrap; }
/* Outcome pills carry a full sentence and now live in a narrower card, so they
   wrap rather than run off the edge. */
.appr-row .pill { white-space: normal; text-align: start; }
.gate-note { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; color: #FBBF24; }
.summary-strip {
  margin-top: 14px;
  background: rgba(45, 127, 249, 0.1);
  border: 1px solid rgba(45, 127, 249, 0.45);
  border-radius: 12px;
  padding: 14px 16px;
  color: var(--white);
  font-size: 15.5px;
  font-weight: 600;
  text-align: center;
}
.summary-strip .big { color: var(--blue-bright); font-weight: 800; }

@media (max-width: 860px) {
  .tr-layout { grid-template-columns: 1fr; }
  .feed { max-height: 260px; }
}

/* ---------- Demo 5: Computer Vision ---------- */

.cam-panel { padding: 14px; background: var(--navy-raised); }
.cam { position: relative; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-dark); }
.cam svg { display: block; width: 100%; height: auto; }
/* A low-light, partially occluded frame: the model's own uncertainty is the
   point of that scenario, so the picture has to actually look hard to read. */
.cam-dim svg { filter: brightness(0.74) blur(0.6px); }
.cam-id, .cam-time {
  position: absolute;
  top: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  color: #C6D4E6;
  background: rgba(6, 17, 32, 0.72);
  border-radius: 4px;
  padding: 2px 7px;
}
.cam-id { left: 8px; }
.cam-time { right: 8px; }

.cam .sc-bg { fill: #101F33; }
.cam .sc-floor, .cam .sc-wall { stroke: #2C476B; stroke-width: 1.5; fill: none; }
.cam .sc-pallet rect { fill: #3B4A5E; stroke: #7A8CA3; stroke-width: 1; } /* 2.87:1 -> 4.82:1 on the scene bg */
.cam .sc-carton rect, .cam .sc-carton path { fill: #4A5C72; stroke: #6C7F97; stroke-width: 1.2; }
.cam .sc-carton .sc-tape { stroke: #8C9DB2; stroke-width: 1.2; fill: none; }
.cam .sc-carton .sc-tear { stroke: #C48B8B; stroke-width: 1.4; fill: none; }
.cam .sc-tag rect { fill: #E8EDF4; stroke: #9AA9BC; stroke-width: 0.8; }
.cam .sc-tag line { stroke: #2A3646; stroke-width: 1; }
.cam .sc-shadow { fill: rgba(4, 10, 20, 0.55); }

.cam .bbox { opacity: 0; transition: opacity 0.3s ease; }
.cam .bbox.on { opacity: 1; }
.cam .bbox rect { fill: none; stroke-width: 2; }
.cam .bbox text { font-family: var(--font); font-size: 10px; font-weight: 700; }
.cam .bbox-ok rect { stroke: #4ADE80; }
.cam .bbox-ok text { fill: #6EE7A0; }
.cam .bbox-warn rect { stroke: #FBBF24; stroke-dasharray: 5 3; }
.cam .bbox-warn text { fill: #FCD34D; }
/* #F87171 measured 2.48:1 where the stroke crosses a carton (#4A5C72), under
   the 3:1 required for a graphic that carries meaning. #FCA5A5 is 3.61:1 there
   and 8.74:1 over the scene background. */
.cam .bbox-bad rect { stroke: #FCA5A5; }
.cam .bbox-bad text { fill: #FCA5A5; }

@media (prefers-reduced-motion: reduce) {
  .cam .bbox { opacity: 1; }
}

/* ---------- Demos landing ---------- */

.demos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  max-width: var(--container);
  margin: 30px auto 0;
}
/* Pin to 3 columns on desktop: with 5 cards that lands 3 + 2, which reads as a
   deliberate grid. auto-fit alone produced a single orphaned card. */
@media (min-width: 900px) {
  .demos-grid { grid-template-columns: repeat(3, 1fr); }
}
a.demo-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--navy-card);
  /* Scoped, NOT --border-dark retuned: that token is shared with light
     surfaces across the site. These are link cards, and the statement claims
     3:1 on link-card boundaries. --border-dark reaches only 2.12:1 against the
     page background here, and the card fill is 1.26:1, so neither carried it.
     #5A7BA6 is 3.79:1 against the page. */
  border: 1px solid #5A7BA6;
  border-radius: var(--radius-card);
  padding: 24px 22px;
  text-decoration: none;
  color: var(--muted);
  transition: border-color 0.18s ease, transform 0.18s ease;
}
a.demo-card:hover { border-color: var(--blue-bright); transform: translateY(-3px); }
a.demo-card .icon {
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(45, 127, 249, 0.14);
  border-radius: 12px;
  color: var(--blue-bright);
}
a.demo-card h3 { color: var(--white); font-size: 19px; }
a.demo-card p { font-size: 15px; color: var(--muted); flex: 1; }
a.demo-card .go {
  color: var(--blue-bright);
  font-weight: 700;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
a.demo-card:hover .go { text-decoration: underline; }
.honesty-strip {
  max-width: var(--container);
  margin: 26px auto 0;
  background: rgba(14, 42, 82, 0.55);
  border: 1px solid var(--border-dark);
  border-radius: var(--radius-card);
  padding: 16px 20px;
  font-size: 15px;
  color: var(--muted-light);
  text-align: center;
}

/* Utility */
.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; align-items: start; }
.two-col > * { min-width: 0; } /* let grid tracks shrink below item min-content (320px reflow) */
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-20 { margin-top: 20px; }
.hidden { display: none !important; }
.vh {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}