/* divinci.app funnel — single-page checkout style.
   Palette trimmed from site/static/css/variables.css (Renaissance warm). */

:root {
  color-scheme: light only;
  --gold: #b8a080;
  --gold-deep: #a6946b;
  /* Secondary blues: denim sampled from the hero painting's beret, plus
     divinci.ai's highlight blue (variables.css --color-highlight-blue).
     The deep blue-green (--green) is now a sparing accent only. */
  --denim: #4a6d94;
  --denim-dark: #3a5778;
  --blue: #cfdcff;
  --blue-hover: #b8c9f0;
  --green: #2d5a4f;
  --green-dark: #1e3d35;
  --ink: #2d3c34;
  --ink-soft: #5d6d65;
  --parchment: #f8f4f0;
  --parchment-deep: #e8ddc7;
  --white: #ffffff;
  --border: rgba(184, 160, 128, 0.28);
  --radius: 14px;
  --shadow: 0 6px 24px rgba(45, 60, 52, 0.08);
}

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

body {
  /* Same faces as divinci.ai: Fraunces for headings, Source Sans 3 for body. */
  font-family: 'Source Sans 3', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--parchment);
  color: var(--ink);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }
a { color: var(--denim); }

/* ── Top bar ─────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 22px; max-width: 1080px; margin: 0 auto;
}
.brand {
  font-family: 'Fraunces', Georgia, serif;
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: var(--ink);
  font-weight: 700; font-size: 1.15rem; letter-spacing: 0.01em;
}
.signin {
  text-decoration: none; color: var(--denim); font-weight: 600;
  padding: 8px 16px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--white);
}
.signin:hover { background: var(--parchment-deep); }

/* ── Hero ────────────────────────────────────────────────── */
.hero {
  position: relative;
  max-width: 860px; margin: 0 auto; padding: 56px 22px 40px;
  text-align: center;
  /* No overflow:hidden — the bg video is exactly inset:0 (doesn't need
     clipping) and the floating proof-logo chips intentionally extend
     past the content column on wide viewports. */
}
/* Full-bleed ambient artwork behind the header + hero: spans the entire
   first viewport (100vh). Layer order (top→bottom): a radial parchment
   overlay that is MOST opaque at the hero's center (keeps headline/form
   legible) and thins toward the edges; a bottom fade into the page bg;
   the artwork itself, crop shifted ~75px toward the top of the source. */
.hero-bg {
  position: absolute; top: 0; left: 0; z-index: 0;
  width: 100%; height: 100vh;
  pointer-events: none;
  background-image:
    radial-gradient(ellipse 70% 60% at 50% 42%,
      rgba(248, 244, 240, 0.96) 0%,
      rgba(248, 244, 240, 0.88) 55%,
      rgba(248, 244, 240, 0.74) 100%),
    linear-gradient(to bottom, rgba(248, 244, 240, 0) 72%, var(--parchment) 100%),
    url("/images/davinci-painter-robot-800w.webp");
  background-size: cover, cover, cover;
  /* Top-align the artwork's crop so the subject's head is in frame. */
  background-position: center, center, 50% top;
  background-repeat: no-repeat;
}

/* Cursor orb -- a soft circle of the artwork ITSELF, unveiled, tracking the
   pointer.

   .hero-bg paints a parchment veil over the picture so the headline stays
   legible. This repaints the same picture on top, masked to a circle, so the
   effect reads as the veil thinning under the cursor rather than as a light
   being shone onto it.

   The box, the `cover` and the `50% top` MUST match the parent's artwork layer
   exactly. inset:0 gives an identical box, so `cover` resolves identically. If
   any of the three drift, the orb reveals a SHIFTED copy of the painting and
   the effect reads as a ghost image rather than as a window.

   Driven by --orb-x / --orb-y / --orb-o, set by app.js. With no JS the vars are
   unset, --orb-o falls back to 0, and this layer is invisible -- the hero is
   byte-for-byte what it was before. app.js also feature-detects mask-image
   first: without masking this would be a full unmasked copy of the painting
   laid over the hero at opacity 1, i.e. the headline gone. */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("/images/davinci-painter-robot-800w.webp");
  background-size: cover;
  background-position: 50% top;
  background-repeat: no-repeat;
  opacity: var(--orb-o, 0);
  /* Radius 25vw, so the effect spans 50% of the page width. The stops fade all
     the way to `transparent 100%` rather than ending early at 72%, so that
     figure is the VISIBLE width and not a circle with an invisible margin --
     an early transparent stop makes the radius and the apparent size two
     different numbers, and then "make it 50%" has no single answer.

     Proportional, not clamped: it is meant to read as a wash across the hero,
     so it should scale with the hero.

     The mask never reaches full opacity at its core -- 0.55, dropped from 0.80
     when the radius widened. The veil exists to keep the hero type legible, so
     the orb THINS it rather than removing it. Peak alpha and radius are not
     independent: at 240px the strong core landed between the lines of type, but
     a 25vw core covers the h1, the sub and the CTAs at once, and at 0.80 the
     sub (--ink-soft, 1.05rem) washed out against the painter's hat. Widening
     this again means softening the core again.
     Fades the orb in and out at the band's edges. The POSITION is never
     transitioned -- an easing on x/y makes the orb lag the cursor, which reads
     as jank rather than as smoothing. */
  transition: opacity 0.3s ease;
  -webkit-mask-image: radial-gradient(circle var(--orb-r, 25vw) at var(--orb-x, 50%) var(--orb-y, 50%),
    rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.42) 25%,
    rgba(0, 0, 0, 0.24) 50%, rgba(0, 0, 0, 0.09) 75%, transparent 100%);
  mask-image: radial-gradient(circle var(--orb-r, 25vw) at var(--orb-x, 50%) var(--orb-y, 50%),
    rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.42) 25%,
    rgba(0, 0, 0, 0.24) 50%, rgba(0, 0, 0, 0.09) 75%, transparent 100%);
}

/* Decorative and cursor-driven: nothing here is content. */
@media (prefers-reduced-motion: reduce) {
  .hero-bg::after { display: none; }
}
.topbar, main, .footer { position: relative; z-index: 1; }
.hero h1 {
  font-family: 'Fraunces', Georgia, serif;
  /* Max sized so the full English line fits without orphaning "AI." onto
     its own line; text-wrap: balance keeps other languages from orphaning
     a single short word when they do wrap. */
  font-size: clamp(2rem, 4.8vw, 2.6rem);
  line-height: 1.14; font-weight: 800; letter-spacing: -0.02em;
  text-wrap: balance;
}
.hero h1 em { font-style: normal; color: var(--green); }
.hero-sub {
  margin: 18px auto 26px; max-width: 520px;
  font-size: 1.15rem; color: var(--ink-soft);
}

.scan-form {
  display: flex; gap: 10px; max-width: 560px; margin: 0 auto;
  background: var(--white); border: 1px solid var(--border);
  border-radius: 999px; padding: 8px; box-shadow: var(--shadow);
}
.scan-form input {
  flex: 1; min-width: 0; border: 0; outline: none;
  font-size: 1.05rem; padding: 10px 16px; border-radius: 999px;
  background: transparent; color: var(--ink);
}
.scan-form button {
  border: 0; cursor: pointer; white-space: nowrap;
  font-size: 1.05rem; font-weight: 700; color: var(--white);
  background: var(--denim); border-radius: 999px; padding: 12px 24px;
  transition: background 0.15s ease;
}
.scan-form button:hover { background: var(--denim-dark); }

/* Floating "already built for" logo chips either side of the hero form —
   proof this isn't vaporware, without competing with the CTA for attention.
   Each chip is absolutely positioned inside a tall zone beside the form;
   app.js scatters them with seeded-random offsets so they don't sit in a
   row (see the hero-proof IIFE). */
.scan-form-wrap { position: relative; max-width: 560px; margin: 0 auto; }
.hero-proof {
  list-style: none; margin: 0; padding: 0;
  position: absolute; top: 50%;
  width: 220px; height: 260px;
  transform: translateY(-50%);
  pointer-events: none;
}
.hero-proof-left { right: 100%; margin-right: 110px; }
.hero-proof-right { left: 100%; margin-left: 110px; }
.hero-proof li {
  position: absolute;
  /* JS sets --x / --y as percentages within the zone. Fallbacks keep a
     sane diagonal spread if JS never runs. */
  left: var(--x, calc(var(--i) * 25%));
  top: var(--y, calc(var(--i) * 25%));
  width: 58px; height: 58px; border-radius: 18px;
  background: var(--white); border: 1px solid var(--border);
  box-shadow: var(--shadow); display: flex; align-items: center; justify-content: center;
  animation: hero-proof-float 6s ease-in-out infinite;
  animation-delay: calc(var(--i) * 0.7s);
}
.hero-proof img { width: 32px; height: 32px; border-radius: 8px; object-fit: contain; }
@keyframes hero-proof-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
@media (max-width: 1300px) {
  .hero-proof { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-proof li { animation: none; }
}

.hero-note { margin-top: 12px; font-size: 0.9rem; color: var(--ink-soft); }
.hero-note-proof { display: block; margin-top: 4px; }

/* Three overlapping demo videos where the hero art used to be: the center
   one takes the old .hero-art footprint; the two smaller ones peek out
   behind it, left and right. */
.hero-videos {
  position: relative;
  margin: 72px auto 0;
  width: min(480px, 90vw);
  aspect-ratio: 16 / 9;
}
.hero-video {
  position: absolute;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--white);
}
.hero-video iframe {
  width: 100%; height: 100%; display: block; border: 0;
}
.hero-video-center {
  inset: 0; z-index: 2;
}
.hero-video-left,
.hero-video-right {
  width: 62%; aspect-ratio: 16 / 9;
  top: 50%; transform: translateY(-50%);
  z-index: 1; opacity: 0.95;
}
.hero-video-left { left: -46%; }
.hero-video-right { right: -46%; }
.hero-video,
.hero-videos {
  transition: width 0.4s ease, left 0.4s ease, right 0.4s ease, opacity 0.4s ease;
}
/* Playing state: the clicked video takes the center at ~80% of the hero's
   width; the other two shrink to slim layers peeking from the sides. */
.hero-videos-expanded { width: 80%; }
.hero-videos-expanded .hero-video-left,
.hero-videos-expanded .hero-video-right { width: 26%; opacity: 0.85; }
.hero-videos-expanded .hero-video-left { left: -16%; }
.hero-videos-expanded .hero-video-right { right: -16%; }
@media (max-width: 900px) {
  /* Not enough side room — stack just the center video. */
  .hero-video-left, .hero-video-right { display: none; }
  .hero-videos-expanded { width: 90vw; }
}

/* ── Sections shared ─────────────────────────────────────── */
main section { padding: 52px 22px; }
main h2 {
  font-family: 'Fraunces', Georgia, serif;
  text-align: center; font-size: clamp(1.5rem, 4vw, 2.1rem);
  font-weight: 800; letter-spacing: -0.01em; margin-bottom: 30px;
}

/* ── Steps ───────────────────────────────────────────────── */
.steps { background: var(--white); }
.steps ol {
  list-style: none; display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  max-width: 980px; margin: 0 auto;
}
.steps li {
  background: var(--parchment); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px; text-align: center;
}
.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--blue); color: var(--denim-dark);
  font-weight: 800; font-size: 1.1rem; margin-bottom: 12px;
}
.steps h3 { font-size: 1.15rem; margin-bottom: 6px; }
.steps p { color: var(--ink-soft); font-size: 0.98rem; }

/* ── Menu cards ──────────────────────────────────────────── */
.cards {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  max-width: 980px; margin: 0 auto;
}
.card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow);
}
.card h3 { font-size: 1.08rem; margin-bottom: 6px; }
.card h3 em { font-style: italic; color: var(--green); }
.card p { color: var(--ink-soft); font-size: 0.97rem; }

/* ── Trust ───────────────────────────────────────────────── */
.trust { background: var(--parchment-deep); }
.trust ul {
  list-style: none; max-width: 640px; margin: 0 auto; display: grid; gap: 14px;
}
.trust li {
  background: var(--white); border-radius: var(--radius);
  padding: 16px 20px; border: 1px solid var(--border);
}
.trust-more { text-align: center; margin-top: 22px; color: var(--ink-soft); }

/* ── FAQ ─────────────────────────────────────────────────── */
.faq { max-width: 980px; margin: 0 auto; }
.faq-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px;
  align-items: start;
}
@media (max-width: 760px) { .faq-grid { grid-template-columns: 1fr; } }
.faq details {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 18px; margin-bottom: 10px;
}
.faq summary {
  cursor: pointer; font-weight: 700; font-size: 1.02rem;
  list-style-position: outside;
}
/* Native disclosure-triangle markers default to stark black — recolor to
   a muted denim so they blend with the palette instead of standing out. */
.faq summary::marker,
.feature-dropdown .feature-arrow,
.language-switcher .dropdown-icon {
  color: var(--denim);
}
.faq summary::-webkit-details-marker { color: var(--denim); }
.faq details p { margin-top: 10px; color: var(--ink-soft); }

.faq-ask-cta {
  /* Sits as the last cell of .faq-grid, so it must match a <details>
     box exactly: same padding, radius, border and bottom margin. */
  display: block; width: 100%; text-align: left;
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 18px; margin-bottom: 10px;
  font: inherit; font-size: 1.02rem; font-weight: 700; color: var(--ink-soft);
  cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease;
}
.faq-ask-cta strong { color: var(--denim); font-weight: 700; }
.faq-ask-cta:hover { border-color: var(--denim); background: var(--blue); }

/* ── Bottom CTA ──────────────────────────────────────────── */
.bottom-cta {
  background: var(--denim); color: var(--white); text-align: center;
}
.bottom-cta h2 { color: var(--white); margin-bottom: 6px; }
.bottom-cta > p { color: rgba(255, 255, 255, 0.85); margin-bottom: 24px; }
.bottom-cta .scan-form { border-color: transparent; }
.bottom-cta .scan-form button { background: var(--blue); color: var(--denim-dark); }
.bottom-cta .scan-form button:hover { background: var(--blue-hover); }

/* ── Footer ──────────────────────────────────────────────── */
.footer {
  text-align: center; padding: 30px 22px 40px; color: var(--ink-soft);
  font-size: 0.95rem;
}
.footer a { color: var(--ink-soft); }
.fineprint { margin-top: 8px; font-size: 0.85rem; }

/* Footer system-status indicator — mirrors the divinci.ai footer widget, but
   restyled for this footer's light, centered layout instead of the marketing
   site's dark bar. Default (and failure) state is neutral grey; it only turns
   green once /api/status confirms it.

   Sits INLINE at the head of the "Pricing · Docs · Privacy · Contact" row, so
   it must behave like the sibling text links: inherit their font-size (0.95rem)
   rather than setting its own, and use vertical-align: middle — an inline-flex
   box otherwise aligns on its own baseline and rides a couple of px low against
   the neighbouring anchors. */
.footer-status {
  display: inline-flex;
  align-items: center;
  vertical-align: middle;
  gap: 0.4rem;
  color: var(--ink-soft);
  text-decoration: none;
  opacity: 0.9;
  transition: opacity 0.25s ease;
  white-space: nowrap;
}
.footer-status:hover { opacity: 1; text-decoration: underline; }
.footer-status-dot {
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: #9aa7ad;
  box-shadow: 0 0 0 3px rgba(154, 167, 173, 0.22);
  flex-shrink: 0;
}
.footer-status[data-state="operational"]    .footer-status-dot { background: #51cf66; box-shadow: 0 0 0 3px rgba(81, 207, 102, 0.25); }
.footer-status[data-state="degraded"]       .footer-status-dot { background: #ffd43b; box-shadow: 0 0 0 3px rgba(255, 212, 59, 0.25); }
.footer-status[data-state="partial_outage"] .footer-status-dot { background: #ff922b; box-shadow: 0 0 0 3px rgba(255, 146, 43, 0.25); }
.footer-status[data-state="major_outage"]   .footer-status-dot { background: #ff6b6b; box-shadow: 0 0 0 3px rgba(255, 107, 107, 0.25); }

/* ── Small screens ───────────────────────────────────────── */
@media (max-width: 520px) {
  .scan-form { flex-direction: column; border-radius: var(--radius); }
  .scan-form input { text-align: center; padding: 12px; }
  .scan-form button { width: 100%; padding: 14px; }
  .hero { padding-top: 36px; }
}

/* ── RTL (Arabic build sets dir="rtl") ── */
html[dir="rtl"] body { direction: rtl; }
html[dir="rtl"] .scan-form button { white-space: nowrap; }

/* ── Footer language switcher ── */
.lang-switch { margin-top: 14px; font-size: 0.88rem; }
.lang-switch a { margin: 0 5px; color: var(--ink-soft); text-decoration: none; }
.lang-switch a:hover { text-decoration: underline; }
.lang-switch a[aria-current="true"] { color: var(--green); font-weight: 700; }

/* ── Header language switcher (recycled from divinci.ai style.css) ── */
.top-actions { display: flex; align-items: center; gap: 10px; }
.language-switcher { position: relative; z-index: 50; }
.language-switcher-current {
  display: flex; align-items: center; gap: 7px; cursor: pointer;
  padding: 8px 14px; border-radius: 999px;
  background: var(--white); border: 1px solid var(--border);
  font-weight: 600; color: var(--denim); font-size: 0.95rem;
  transition: background 0.2s ease;
}
.language-switcher-current:hover { background: var(--blue); }
.language-switcher .dropdown-icon { font-size: 10px; transition: transform 0.3s ease; }
.language-switcher.active .dropdown-icon { transform: rotate(180deg); }
.language-switcher-dropdown {
  position: absolute; top: calc(100% + 8px); right: 0; width: 200px;
  max-height: 70vh; overflow-y: auto;
  background: var(--parchment); border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: 1px solid rgba(0, 0, 0, 0.1);
  display: none; z-index: 60;
}
.language-switcher.active .language-switcher-dropdown { display: block; }
.language-option {
  display: flex; justify-content: space-between; align-items: center;
  padding: 11px 16px; text-decoration: none; color: var(--ink);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05); transition: all 0.2s ease;
}
.language-option:last-child { border-bottom: none; }
.language-option:hover { background: var(--blue); }
.language-option[aria-current="true"] { background: var(--parchment-deep); }
.language-label { display: flex; align-items: center; gap: 8px; }
.language-flag { font-size: 16px; line-height: 1; }
.language-name { font-size: 14px; font-weight: 500; }
.language-native { font-size: 13px; color: var(--ink-soft); }
html[dir="rtl"] .language-switcher-dropdown { right: auto; left: 0; }

/* ── Codex-margin card art ── faint denim-ink sketches, like notebook marginalia */
.steps li, .card { position: relative; overflow: hidden; }
.card-art {
  position: absolute; right: -8px; bottom: -10px; width: 92px; height: 92px;
  color: var(--denim); opacity: 0.12; pointer-events: none;
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
html[dir="rtl"] .card-art { right: auto; left: -8px; transform: scaleX(-1); }
.title-emoji { font-style: normal; margin-right: 6px; }

/* Already-in-directory alert (funnel-side pre-check before /start/scan). */
.scan-directory-alert {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-bottom: 12px; padding: 12px 16px;
  background: #fdf3ea; border: 1px solid #e8c9a0; border-radius: 10px;
  font-size: 0.92rem; color: #6b4a1e; text-align: left;
}
.scan-directory-actions {
  display: flex; flex-wrap: wrap; gap: 6px 14px;
}
.scan-directory-alert a {
  color: var(--denim); font-weight: 700; white-space: nowrap;
}

/* ── Example: NutritionFacts demo sections (recycled from demo landing) ── */
.demo-corpus { background: var(--white); }
.section-eyebrow {
  text-align: center; font-size: 0.85rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--denim); margin-bottom: 26px;
}
.demo-corpus-grid {
  display: grid; gap: 28px; align-items: center;
  grid-template-columns: 1fr 1fr;
  max-width: 980px; margin: 0 auto;
}
@media (max-width: 800px) { .demo-corpus-grid { grid-template-columns: 1fr; } }
.demo-corpus-media {
  border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow);
  border: 1px solid var(--border); order: 2;
}
.demo-corpus-media video { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.demo-corpus-copy { order: 1; }
.demo-corpus-copy h2 {
  font-family: 'Fraunces', Georgia, serif; text-align: left;
  font-size: clamp(1.4rem, 3.4vw, 1.9rem); font-weight: 800;
  letter-spacing: -0.01em; margin-bottom: 14px;
}
.demo-corpus-copy p { color: var(--ink-soft); font-size: 1.02rem; }
.demo-stats {
  display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr);
  max-width: 980px; margin: 34px auto 0;
}
@media (max-width: 640px) { .demo-stats { grid-template-columns: 1fr; } }
.demo-stats article {
  background: var(--parchment); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px 22px;
}
.stat-value { font-size: 2rem; font-weight: 800; color: var(--denim-dark); line-height: 1; }
.stat-label { margin-top: 6px; font-size: 0.8rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-soft); }
.demo-langs { text-align: center; margin-top: 38px; }
.demo-langs-title { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--denim); }
.demo-langs-list { margin-top: 8px; color: var(--ink-soft); }
.demo-langs-list span { color: var(--ink-soft); opacity: 0.6; }

/* Example transcript card */
.demo-transcript { background: var(--parchment-deep); }
.chat-card {
  max-width: 640px; margin: 0 auto; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); overflow: hidden;
}
.chat-card-header {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 18px; border-bottom: 1px solid var(--border);
}
.chat-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: #e5f3e8; color: #2f7d3f; font-weight: 800;
  display: inline-flex; align-items: center; justify-content: center;
}
.chat-title { font-weight: 700; }
.chat-status { margin-left: auto; font-size: 0.85rem; color: var(--ink-soft); display: inline-flex; align-items: center; gap: 6px; }
.chat-status-dot { width: 8px; height: 8px; border-radius: 50%; background: #37a24d; display: inline-block; }
.chat-card-body { padding: 18px; display: flex; flex-direction: column; gap: 12px; }
.chat-msg { max-width: 85%; padding: 12px 16px; border-radius: 16px; font-size: 0.98rem; line-height: 1.5; }
.chat-msg-user { align-self: flex-end; background: #2e3440; color: var(--white); border-bottom-right-radius: 4px; }
.chat-msg-ai { align-self: flex-start; background: #e9f2ec; color: var(--ink); border-bottom-left-radius: 4px; }
.chat-cite {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 3px; border-radius: 4px;
  background: #cfe3d6; font-size: 0.7rem; font-weight: 700; color: #2f5d3d;
}
.chat-meta { font-size: 0.78rem; color: var(--ink-soft); }
.chat-suggestion {
  align-self: flex-start; border: 1px solid var(--border); border-radius: 999px;
  padding: 8px 14px; font-size: 0.85rem; color: var(--ink-soft); background: var(--white);
}
.chat-suggestion strong { color: var(--denim-dark); }
.chat-card-input {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 18px 18px; padding: 12px 16px;
  border: 1px solid var(--border); border-radius: 999px;
  color: var(--ink-soft); font-size: 0.92rem; background: var(--white);
}
.chat-send { color: var(--denim); }
.demo-caption { text-align: center; margin-top: 16px; font-size: 0.85rem; color: var(--ink-soft); }
.demo-caption a { color: var(--denim-dark); font-weight: 600; }

/* Example question cards */
.demo-examples { background: var(--white); }
.demo-examples-sub { text-align: center; color: var(--ink-soft); margin: -18px auto 28px; max-width: 560px; }
.demo-example-cards {
  display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  max-width: 980px; margin: 0 auto;
}
.demo-example-card {
  display: block; border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--white); padding: 18px; text-decoration: none; color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.demo-example-card:hover { border-color: var(--denim); box-shadow: var(--shadow); }
.demo-example-card p { font-weight: 600; display: flex; gap: 8px; align-items: flex-start; }
.demo-example-hint { display: block; margin-top: 10px; font-size: 0.85rem; color: var(--ink-soft); }
.demo-example-card:hover .demo-example-hint { color: var(--denim-dark); }

/* Team (recycled from divinci.ai homepage) */
.team { background: var(--parchment-deep); }
.team-sub { text-align: center; color: var(--ink-soft); margin: -18px auto 30px; }
/* One full-bleed row: cards scroll horizontally and overflow past both
   page edges like a carousel; scroll-snap keeps a card centered. */
.team-grid {
  display: flex; gap: 18px;
  width: 100vw; margin-left: calc(50% - 50vw);
  /* Symmetric padding lets the row CENTER when the cards fit, and still
     overflow past both page edges when they don't. */
  padding: 6px 24px;
  justify-content: safe center;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}
.team-grid .team-card {
  flex: 0 0 280px;
  scroll-snap-align: center;
}
.team-card {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 24px; text-align: center; box-shadow: var(--shadow);
}
.team-card img { width: 94px; height: 94px; border-radius: 50%; object-fit: cover; margin-bottom: 12px; }
.team-card h3 { font-size: 1.08rem; }
.team-role { font-size: 0.85rem; font-weight: 700; color: var(--denim); margin: 2px 0 8px; }
.team-bio { font-size: 0.9rem; color: var(--ink-soft); }
.team-card a { display: inline-block; margin-top: 10px; font-size: 0.88rem; font-weight: 600; color: var(--denim-dark); }

/* Fixed ask bar — opens the Divinci chat panel; hidden while it's open. */
.ask-bar {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  z-index: 40; display: flex; gap: 8px; align-items: center;
  width: min(560px, calc(100vw - 110px));
  background: color-mix(in srgb, var(--white) 88%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--border); border-radius: 999px;
  padding: 8px; box-shadow: var(--shadow);
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.ask-bar input {
  flex: 1; min-width: 0; border: 0; outline: none; background: transparent;
  font: inherit; font-size: 1rem; padding: 8px 14px; color: var(--ink);
  cursor: pointer;
}
.ask-bar button {
  border: 0; cursor: pointer; font-size: 1rem; font-weight: 700;
  color: var(--white); background: var(--denim); border-radius: 999px;
  padding: 10px 22px; transition: background 0.15s ease;
}
.ask-bar button:hover { background: var(--denim-dark); }
.ask-bar-hidden { opacity: 0; transform: translateX(-50%) translateY(70px); pointer-events: none; }

/* Lite YouTube facade — thumbnail + our own denim play button (the native
   iframe's red button can't be styled). The real player is injected on
   click by the yt-facade IIFE in app.js. */
.yt-facade {
  display: block; width: 100%; height: 100%;
  border: 0; padding: 0; cursor: pointer;
  background-size: cover; background-position: center;
  position: relative;
}
.yt-play {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 64px; height: 64px; border-radius: 50%;
  background: color-mix(in srgb, var(--denim) 88%, transparent);
  box-shadow: 0 4px 18px rgba(45, 60, 52, 0.35);
  transition: background 0.15s ease, transform 0.15s ease;
}
.yt-play::after {
  content: "";
  position: absolute; top: 50%; left: 54%;
  transform: translate(-50%, -50%);
  border-style: solid;
  border-width: 12px 0 12px 20px;
  border-color: transparent transparent transparent var(--white);
}
.yt-facade:hover .yt-play {
  background: var(--denim-dark);
  transform: translate(-50%, -50%) scale(1.08);
}
.hero-video-left .yt-play,
.hero-video-right .yt-play { width: 48px; height: 48px; }
.hero-video-left .yt-play::after,
.hero-video-right .yt-play::after { border-width: 9px 0 9px 15px; }

/* Rotating shimmer on the hero URL form — recycled from the web app's
   /start/scan input (conic-gradient border sweep). Runs until the field
   has focus-within or content, then the plain border returns. */
@property --shine-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}
.scan-form-shine {
  border: 2px solid transparent;
  background:
    linear-gradient(var(--white), var(--white)) padding-box,
    conic-gradient(
        from var(--shine-angle, 0deg),
        transparent,
        var(--blue) 5%,
        var(--denim) 10%,
        var(--blue) 15%,
        transparent 20%
      )
      border-box;
  animation: scan-shine-rotate 3s linear infinite;
}
@keyframes scan-shine-rotate {
  to { --shine-angle: 360deg; }
}
@media (prefers-reduced-motion: reduce) {
  .scan-form-shine { animation: none; border-color: var(--border); }
}

/* ── Blue promo strip (recycled from divinci.ai's .site-research-banner) ── */
.promo-banner {
  position: relative; z-index: 2;
  background: linear-gradient(90deg, #2d4d6a 0%, #3d6888 100%);
  color: #eef5fb;
  font-size: 0.85rem;
  border-bottom: 1px solid rgba(168, 212, 240, 0.2);
  height: 36px;
  /* No overflow:hidden here — it would clip the language dropdown. The
     sliding carousel is clipped by .promo-slides instead. */
}
.promo-slides { position: absolute; inset: 0; overflow: hidden; }
.promo-slide {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 1.5rem;
  opacity: 0; transform: translateY(100%);
  transition: opacity 0.45s ease, transform 0.45s ease;
  white-space: nowrap;
}
.promo-slide-active { opacity: 1; transform: translateY(0); }
.promo-slide-leaving { opacity: 0; transform: translateY(-100%); }
a.promo-slide { color: #eef5fb; text-decoration: none; }
a.promo-slide:hover { color: #ffffff; text-decoration: underline; text-underline-offset: 2px; }
.promo-slide a { color: #ffffff; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.promo-ask {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: #ffffff; font-weight: 600;
  text-decoration: underline; text-underline-offset: 2px;
}
.promo-site-icon {
  width: 16px; height: 16px; border-radius: 4px; object-fit: contain;
  background: #ffffff; flex-shrink: 0;
}
@media (prefers-reduced-motion: reduce) {
  .promo-slide { transition: none; }
}

/* ── Language switcher tucked into the blue banner (recycled 1:1 from
   divinci.ai's .site-research-banner switcher: plain-text trigger, light
   color, dropdown hanging below-right). Overrides the header-pill styles
   above when the switcher lives inside .promo-banner. */
.promo-banner .language-switcher {
  position: absolute; right: 1rem; top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}
.promo-banner .language-switcher-current {
  background: none; border: none; border-radius: 0; padding: 0;
  color: #cfe5f4; font: inherit; line-height: 1; font-weight: 500;
}
.promo-banner .language-switcher-current:hover {
  background: none; color: #ffffff;
}
.promo-banner .language-switcher-dropdown {
  top: calc(100% + 10px); right: 0; left: auto;
}
html[dir="rtl"] .promo-banner .language-switcher { right: auto; left: 1rem; }
html[dir="rtl"] .promo-banner .language-switcher-dropdown { right: auto; left: 0; }
@media (max-width: 640px) {
  /* Keep the strip single-row on phones: message left, language right. */
  .promo-banner .language-switcher .current-language { display: none; }
}

/* Pricing text link beside Sign in */
.top-pricing {
  text-decoration: none; color: var(--denim); font-weight: 600;
  padding: 8px 4px;
}
.top-pricing:hover { color: var(--denim-dark); text-decoration: underline; }