/* ==========================================================================
   datavera-apple.css - Datavera brand & homepage system.
   "True to your work." Built on the Datavera navy logo with an azure accent.

   Visual system: a rounded pale-blue hero panel, navy circle badges, a clean
   feature grid, alternating white / pale-blue bands, a diagonal-cut navy
   contact block with a floating white form card, and a navy footer. The
   palette is built on the logo navy (#08386A) with an azure accent (#2f6bff).
   Type is deliberately neutral (Schibsted Grotesk display + Hanken Grotesk
   text) so the page reads "considered studio", not "AI default".

   Everything is scoped under `.dv` and prefixed `dv-` so it cannot affect
   un-migrated pages. Class names + JS/i18n/form hooks are preserved so this
   still round-trips back to the Reflex app.

   FIVE tweak axes (set as data-* on the `.dv` root by datavera-apple.js):
     data-type   = neutral | grotesk | plex | editorial   (typography)
     data-bands  = blue | white                           (section rhythm)
     data-cuts   = diagonal | straight                    (section cuts)
     data-round  = sharp | soft | round                   (corner roundness)
     --accent / --accent-press / --accent-wash            (accent colour)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600&family=IBM+Plex+Sans:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&family=Newsreader:opsz,wght@6..72,400;6..72,500;6..72,600&family=Schibsted+Grotesk:wght@400;500;600;700;800&display=swap');

/* Force a LIGHT rendering context for the new design, scoped so un-migrated
   dark pages are untouched (Reflex compiles a global dark body). */
/* STICKY NAV: datavera-shared.css sets `html,body{overflow-x:hidden}` globally.
   `overflow-x:hidden` on an ANCESTOR of a sticky element (body / .radix-themes
   wrap our .dv root on the live site) silently breaks `position:sticky`, so the
   nav scrolls away. `overflow-x:clip` contains the same horizontal overflow but
   does NOT break sticky. Override every ancestor in the chain to clip. apple.css
   loads after shared.css so these win. (Verified empirically: hidden->BROKEN,
   clip->OK.) Do not change clip back to hidden on any of these. */
html.dv-light { color-scheme: light !important; background: #ffffff; overflow-x: clip; }
body.dv-light { background: #ffffff !important; color: #0c2440 !important; overflow-x: clip; }
body.dv-light .radix-themes { background: #ffffff !important; color: #0c2440; min-height: 0; overflow-x: clip; }
html:has(.dv) { color-scheme: light !important; background: #ffffff; overflow-x: clip; }
body:has(.dv) { background: #ffffff !important; color: #0c2440 !important; overflow-x: clip; }
body:has(.dv) .radix-themes { background: #ffffff !important; color: #0c2440; overflow-x: clip; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ----- Root scope + tokens ------------------------------------------------ */
.dv {
  /* Type - variable-driven; data-type swaps the families. Default = neutral. */
  --font-display: "Schibsted Grotesk", "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-text: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Colour - navy logo family + azure accent on white/pale-blue paper. */
  --ink: #0c2440;          /* headings - deep navy ink */
  --ink-2: #29384c;
  --sub: #586a80;          /* secondary text */
  --faint: #8b99ab;        /* captions, footnotes */
  --line: #e4eaf2;         /* hairlines */
  --line-2: #d3dce8;       /* stronger hairlines */
  --paper: #ffffff;        /* page background */
  --band: #eef3fb;         /* alternating section background (pale blue) */
  --band-2: #e7eef8;
  --hero: #e9f0fb;         /* hero panel fill */
  --accent: #2f6bff;       /* azure - actions, links, data (tweakable) */
  --accent-press: #1f54e0;
  --accent-wash: #e9f0ff;  /* faint accent tint */
  --navy: #08386a;         /* logo navy - dark sections, footer, contact */
  --navy-2: #0c4d8f;       /* lighter navy for gradient depth */
  --navy-deep: #062c52;    /* deepest navy */
  --on-navy: #e4ecf6;      /* text on navy */
  --on-navy-sub: #9fb4cc;  /* secondary text on navy */
  --white: #ffffff;

  --maxw: 1160px;
  --pad: 24px;
  --radius: 14px;          /* tweakable via data-round */
  --radius-lg: 22px;

  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 17px;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  /* Horizontal-overflow containment lives on <html> (see below), NOT here:
     any overflow value other than visible on this ancestor would break the
     sticky nav (position: sticky sticks to its nearest clipping ancestor). */
  white-space: normal;
  overflow-wrap: break-word;
  font-variant-numeric: normal;
}

/* Roundness tweak ---------------------------------------------------------- */
.dv[data-round="sharp"] { --radius: 6px; --radius-lg: 9px; }
.dv[data-round="soft"]  { --radius: 14px; --radius-lg: 22px; }
.dv[data-round="round"] { --radius: 20px; --radius-lg: 32px; }

.dv *, .dv *::before, .dv *::after { box-sizing: border-box; }
.dv h1, .dv h2, .dv h3, .dv h4, .dv h5, .dv p, .dv figure, .dv blockquote { margin: 0; }
.dv h1, .dv h2, .dv h3, .dv h4 { white-space: normal; overflow-wrap: break-word; }
.dv ul { list-style: none; margin: 0; padding: 0; }
.dv a { color: inherit; text-decoration: none; }
.dv img, .dv svg { display: block; max-width: 100%; }
.dv button { font-family: inherit; }
.dv [id] { scroll-margin-top: 84px; }
.dv ::selection { background: rgba(47, 107, 255, 0.16); }

:where(.dv) a:focus-visible,
:where(.dv) button:focus-visible,
:where(.dv) input:focus-visible,
:where(.dv) textarea:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

/* ----- Type scale --------------------------------------------------------- */
/* Eyebrow - neutral uppercase label (was a mono "data" accent; dialled back to
   read cleaner). The small index rule is kept. */
.dv-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-text);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent);
}
.dv-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.6;
  flex: 0 0 auto;
}

.dv-h1 {
  font-family: var(--font-display);
  font-size: clamp(38px, 5.2vw, 58px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.04;
  color: var(--ink);
}
.dv-h2 {
  font-family: var(--font-display);
  font-size: clamp(28px, 3.8vw, 42px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  text-wrap: balance;
}
.dv-lede {
  font-family: var(--font-text);
  font-size: clamp(17px, 1.6vw, 19px);
  line-height: 1.6;
  font-weight: 400;
  color: var(--sub);
  text-wrap: pretty;
}

/* ----- Buttons ------------------------------------------------------------ */
.dv-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 14px 22px;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 6px 18px rgba(47, 107, 255, 0.22);
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.dv-btn:hover { background: var(--accent-press); box-shadow: 0 8px 22px rgba(47, 107, 255, 0.28); }
.dv-btn:active { transform: translateY(1px); }
.dv-btn svg { width: 16px; height: 16px; }

/* Outline button (secondary action). */
.dv-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: #fff;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  padding: 14px 22px;
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color 0.18s ease, color 0.18s ease, transform 0.15s ease, background 0.18s ease;
}
.dv-btn-outline:hover { border-color: var(--accent); color: var(--accent); background: #fff; }
.dv-btn-outline:active { transform: translateY(1px); }
.dv-btn-outline svg { width: 16px; height: 16px; }

.dv-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-family: var(--font-text);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.005em;
}
.dv-link svg { width: 15px; height: 15px; transition: transform 0.18s ease; }
.dv-link:hover svg { transform: translateX(3px); }

/* ----- Circle icon badge (hero + CTA band) - echoes the logo bars --------- */
.dv-badge-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--navy);
  box-shadow: 0 10px 26px rgba(8, 56, 106, 0.28);
  flex: 0 0 auto;
}
.dv-badge-circle svg { width: 26px; height: 26px; }

/* ----- Nav ---------------------------------------------------------------- */
.dv-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 18px;
  height: 64px;
  padding: 0 var(--pad);
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.25s ease;
}
.dv-nav.dv-scrolled { border-bottom-color: var(--line); }

.dv-brand {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--ink);
  justify-self: start;
}

.dv-nav-links {
  display: flex;
  align-items: center;
  gap: 30px;
  justify-self: center;
}
.dv-nav-links a {
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  opacity: 0.74;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.dv-nav-links a:hover { opacity: 1; color: var(--accent); }

.dv-nav-right { display: flex; align-items: center; gap: 12px; justify-self: end; }
.dv-nav .dv-btn { padding: 10px 18px; font-size: 14px; box-shadow: none; }
.dv-nav .dv-btn:hover { box-shadow: 0 6px 16px rgba(47, 107, 255, 0.24); }

/* Language picker (keeps #langPick / .lang-* hooks the i18n runtime needs). */
.dv .lang-pick { position: relative; }
.dv .lang-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 6px 8px;
  border-radius: 8px;
}
.dv .lang-trigger:hover { background: rgba(12, 36, 64, 0.05); }
.dv .lang-flag { width: 18px; height: 13px; border-radius: 2px; }
.dv .lang-chev { width: 14px; height: 14px; opacity: 0.55; }
.dv .lang-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 8px);
  min-width: 170px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(8, 56, 106, 0.16);
  padding: 6px;
  display: none;
}
.dv .lang-pick.open .lang-menu { display: block; }
.dv .lang-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: 0;
  cursor: pointer;
  padding: 9px 10px;
  border-radius: 8px;
  font-family: var(--font-text);
  font-size: 14px;
  color: var(--ink);
  text-align: left;
}
.dv .lang-item img { width: 20px; height: 15px; border-radius: 2px; }
.dv .lang-item:hover { background: var(--band); }
.dv .lang-item.active { color: var(--accent); font-weight: 600; }

/* Hamburger + mobile menu */
.dv-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 9px;
  background: none;
  border: 0;
  cursor: pointer;
}
.dv-burger span {
  display: block;
  height: 1.5px;
  width: 100%;
  background: var(--ink);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}
.dv-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.dv-burger.open span:nth-child(2) { opacity: 0; }
.dv-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.dv-mobile {
  position: fixed;
  inset: 64px 0 0;
  z-index: 99;
  background: var(--paper);
  padding: 14px var(--pad) 40px;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  overflow-y: auto;
}
.dv-mobile.open { opacity: 1; visibility: visible; transform: none; }
.dv-mobile a {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  padding: 18px 2px;
  border-bottom: 1px solid var(--line);
}
.dv-mobile .dv-btn { margin-top: 26px; justify-content: center; padding: 15px; font-size: 16px; }

/* ----- Section frame + band rhythm ---------------------------------------- */
.dv-section { padding: 100px var(--pad); }
.dv-wrap { max-width: var(--maxw); margin: 0 auto; }
.dv-band { background: var(--band); }
/* "All white" band tweak: bands lose their fill and gain hairline separators. */
.dv[data-bands="white"] .dv-band { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.dv-section-head { max-width: 760px; margin: 0; text-align: left; }
.dv-section-head .dv-eyebrow { display: inline-flex; margin-bottom: 20px; }
.dv-section-head .dv-h2 { max-width: 20ch; }
.dv-section-head .dv-lede { margin-top: 20px; max-width: 60ch; }

/* Showcase: explanatory copy beside the full-page document on desktop, so the
   section is compact instead of a tall stack. Stacks under 980px. */
.dv-demo-split { display: grid; grid-template-columns: 1fr; gap: 34px; align-items: start; }
.dv-demo-copy .dv-h2 { max-width: 18ch; }
.dv-demo-copy .dv-lede { margin-top: 18px; max-width: 52ch; }
.dv-demo-stage { min-width: 0; }
@media (min-width: 980px) {
  .dv-demo-split { grid-template-columns: minmax(260px, 340px) 1fr; gap: 52px; }
  /* Copy is anchored to the top of the section (align-items:start), not sticky,
     so it stays put instead of drifting down as the tall document scrolls. */
  /* Hero (this page only): compact text beside a prominent full document. */
  .dv-hero-panel.ar-hero-panel { grid-template-columns: minmax(290px, 380px) 1fr; gap: 52px; align-items: start; }
  /* Trading hero: wider visual column so the analysis sits beside the table. */
  .dv-hero-panel.tr-hero-panel { grid-template-columns: minmax(280px, 360px) 1fr; gap: 46px; align-items: center; }
  /* Document Assistant hero: wider visual column for the files + chat workspace. */
  .dv-hero-panel.da-hero-panel { grid-template-columns: minmax(270px, 350px) 1fr; gap: 46px; align-items: center; }
  /* Leasing hero: wider visual column for the fleet + residual analysis. */
  .dv-hero-panel.lc-hero-panel { grid-template-columns: minmax(270px, 350px) 1fr; gap: 46px; align-items: center; }
}
/* Hero document is full on desktop; below 980 it collapses to a compact teaser. */
@media (max-width: 979px) {
  #arHeroStage .ds-meta,
  #arHeroStage .ds-sec,
  #arHeroStage .ds-skel,
  #arHeroStage .ds-kpis,
  #arHeroStage .ds-chart2,
  #arHeroStage .ds-lede,
  #arHeroStage .ds-co-sub,
  #arHeroStage .ds-foot { display: none; }
  #arHeroStage .ds-charts { grid-template-columns: 1fr; }
}

/* ----- Hero - rounded pale-blue panel ------------------------------------- */
.dv-hero { padding: 40px var(--pad) 24px; max-width: var(--maxw); margin: 0 auto; }
.dv-hero-panel {
  position: relative;
  background: var(--hero);
  border-radius: calc(var(--radius-lg) + 8px);
  padding: clamp(34px, 5vw, 72px);
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  align-items: center;
  overflow: hidden;
}
.dv-hero-l .dv-badge-circle { margin-bottom: 26px; }
.dv-hero-l .dv-hero-logo { width: 72px; height: 72px; object-fit: contain; display: block; margin: 0 0 18px -4px; }
.dv-hero-l .dv-eyebrow { display: inline-flex; margin-bottom: 20px; }
.dv-hero-l .dv-h1 { max-width: 14ch; margin: 0 0 22px; text-wrap: balance; }
.dv-hero-l .dv-lede { max-width: 46ch; margin: 0 0 30px; }
.dv-hero-ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dv-hero-r { position: relative; min-width: 0; }

/* ----- Proof bar (homepage, under the hero) -------------------------------- */
/* Three sourceable claims, quiet by design: sentence case, muted, one line on
   desktop, stacked without separators on mobile. */
.dv-proofbar {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin: 30px auto 0;
  max-width: var(--maxw);
  padding: 0 6px;
  color: var(--sub);
  font-family: var(--font-text);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
}
.dv-proof-sep { width: 1px; height: 14px; background: var(--line-2); flex: 0 0 auto; }
@media (max-width: 860px) {
  .dv-proofbar { gap: 6px 16px; }
  .dv-proof-sep { display: none; }
  .dv-proofbar > span:not(.dv-proof-sep) { flex: 1 1 100%; }
}

/* ----- Entity line (homepage products head) -------------------------------- */
/* One extraction-friendly sentence naming who Datavera is, where, and what it
   builds. Reads as a quiet subline to humans; machines quote it verbatim. */
.dv-entity {
  margin: 18px 0 0;
  max-width: 82ch;
  color: var(--faint);
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.6;
}

/* ----- Feature grid ("Designed for confidential work") -------------------- */
.dv-features { padding-top: 104px; }
.dv-feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px 48px;
  margin-top: 52px;
}
.dv-feature { padding: 4px 0; }
.dv-feat-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: var(--radius);
  background: var(--accent-wash);
  margin-bottom: 16px;
}
.dv-feat-icon svg { width: 22px; height: 22px; color: var(--accent); }
.dv-feature h3 {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 8px;
  max-width: 24ch;
}
.dv-feature p { color: var(--sub); font-size: 15px; line-height: 1.55; max-width: 36ch; }

/* ----- Positioning band ("Three things we are not") ----------------------- */
.dv-cred { padding: 96px var(--pad); }
.dv-cred-inner { max-width: var(--maxw); margin: 0 auto; }
.dv-pos-grid { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 50px; }
.dv-pos { padding: 30px 0; border-top: 1px solid var(--line-2); }
.dv-pos:last-child { border-bottom: 1px solid var(--line-2); }
.dv-pos-no {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 14px;
}
.dv-pos h3 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 25px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  color: var(--ink);
  margin-bottom: 10px;
}
.dv-pos p { color: var(--sub); font-size: 15px; line-height: 1.55; max-width: 42ch; }

/* ----- Featured split ("Work with your team" device) ---------------------- */
.dv-split { margin-top: 64px; display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; }
.dv-split-l .dv-eyebrow { display: inline-flex; margin-bottom: 18px; }
.dv-split-l h3 {
  font-family: var(--font-display);
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--ink);
  margin-bottom: 16px;
  max-width: 16ch;
}
.dv-split-l p { color: var(--sub); font-size: 16px; line-height: 1.6; max-width: 44ch; margin-bottom: 22px; }
.dv-split-quote {
  border-left: 2px solid var(--accent);
  padding: 4px 0 4px 18px;
  margin-top: 8px;
}
.dv-split-quote p { font-style: italic; color: var(--ink-2); font-size: 15.5px; margin-bottom: 12px; }
.dv-split-who { display: flex; align-items: center; gap: 11px; }
.dv-split-who .dv-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: repeating-linear-gradient(135deg, #dbe4f0 0 8px, #e7eef8 8px 16px);
  border: 1px solid var(--line-2); flex: 0 0 34px;
}
.dv-split-who b { font-weight: 600; color: var(--ink); font-size: 14px; }
.dv-split-who span { color: var(--sub); font-size: 13.5px; }
.dv-tilt { perspective: 1600px; }
.dv-tilt > * {
  transform: rotateY(-13deg) rotateX(4deg) rotate(1deg);
  transform-origin: center;
  box-shadow: 0 40px 80px rgba(8, 56, 106, 0.18);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.dv-tilt:hover > * { transform: rotateY(-7deg) rotateX(2deg); }

/* ----- Products grid ------------------------------------------------------ */
.dv-products { padding-top: 100px; }
.dv-products-grid { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 52px; }
.dv-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  overflow: hidden;
  color: var(--ink);
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.dv-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 50px rgba(8, 56, 106, 0.12);
  border-color: var(--line-2);
}
.dv-card .dv-kicker {
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
}
.dv-card h3 {
  font-family: var(--font-display);
  font-size: clamp(20px, 2.4vw, 25px);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.14;
  margin: 12px 0 10px;
  color: var(--ink);
}
.dv-card p { color: var(--sub); font-size: 15px; line-height: 1.5; margin-bottom: 16px; }

/* ----- CTA band ("Build on the world's best platform" device) ------------- */
.dv-ctaband {
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
  align-items: center;
  margin: 64px auto 0;
  max-width: var(--maxw);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 3.4vw, 40px);
  box-shadow: 0 18px 44px rgba(8, 56, 106, 0.07);
}
.dv-ctaband-l { display: flex; align-items: center; gap: 20px; }
.dv-ctaband-l h3 {
  font-family: var(--font-display);
  font-size: clamp(21px, 2.6vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 6px;
}
.dv-ctaband-l p { color: var(--sub); font-size: 15.5px; line-height: 1.5; max-width: 52ch; }
.dv-ctaband .dv-btn { white-space: nowrap; }

/* ----- How it works: three steps ------------------------------------------ */
.dv-how-grid { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 52px; border-top: 1px solid var(--line); }
.dv-how-step { text-align: left; padding: 32px 30px 32px 0; border-bottom: 1px solid var(--line); }
.dv-how-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 16px;
}
.dv-how-step h3 {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 11px;
  color: var(--ink);
  max-width: 18ch;
}
.dv-how-step p { color: var(--sub); font-size: 15px; line-height: 1.55; max-width: 34ch; }

/* ----- Why - numbered editorial reasons ----------------------------------- */
.dv-why-grid { display: grid; grid-template-columns: 1fr; gap: 0; margin-top: 52px; border-top: 1px solid var(--line); }
.dv-why-item { text-align: left; padding: 32px 0; border-bottom: 1px solid var(--line); }
.dv-why-num {
  display: block;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--accent);
  margin-bottom: 14px;
}
.dv-why-item h3 {
  font-family: var(--font-display);
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.015em;
  margin-bottom: 10px;
  color: var(--ink);
  max-width: 22ch;
}
.dv-why-item p { color: var(--sub); font-size: 15px; line-height: 1.55; max-width: 40ch; }
.dv-why-cta { margin-top: 44px; }

/* ----- Customer story / proof (image + quote) ----------------------------- */
.dv-proof-wrap { max-width: var(--maxw); margin: 0 auto; }
.dv-proof-head { text-align: center; margin-bottom: 48px; }
.dv-proof-head .dv-eyebrow { display: inline-flex; }
.dv-proof-grid { display: grid; grid-template-columns: 1fr; gap: 44px; align-items: center; }
.dv-proof-photo { aspect-ratio: 4 / 5; }
.dv-proof blockquote {
  font-family: var(--font-display);
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.28;
  color: var(--ink);
  margin-bottom: 26px;
  text-wrap: balance;
}
.dv-proof-who { display: flex; align-items: center; gap: 14px; color: var(--sub); font-size: 15px; margin-bottom: 36px; }
.dv-proof-who b { color: var(--ink); font-weight: 600; }
.dv-proof-logo { height: 26px; width: auto; opacity: 0.85; }
.dv-proof-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border-top: 1px solid var(--line-2); }
.dv-stat { padding: 24px 22px 0 0; border-right: 1px solid var(--line); }
.dv-stat:last-child { border-right: 0; }
.dv-stat .dv-stat-n {
  display: block;
  font-family: var(--font-mono);
  font-size: clamp(26px, 3.6vw, 36px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}
.dv-stat .dv-stat-t { display: block; color: var(--sub); font-size: 13.5px; max-width: 22ch; margin: 10px 0 0; line-height: 1.45; }
/* 4-up stat strip (product pages). Collapses 4 -> 2 -> 1 so labels never cramp.
   Use a class, NOT an inline grid, or the mobile collapse can't override it. */
.dv-proof-stats.dv-stats-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 760px) { .dv-proof-stats.dv-stats-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .dv-proof-stats.dv-stats-4 { grid-template-columns: 1fr; } }

/* ----- Photo placeholder utility ------------------------------------------ */
.dv-photo {
  position: relative;
  background:
    repeating-linear-gradient(135deg, rgba(8,56,106,0.05) 0 14px, rgba(8,56,106,0.02) 14px 28px),
    var(--band-2);
  border: 1px solid var(--line-2);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 220px;
}
.dv-photo span {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--sub);
  background: #fff;
  padding: 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--line-2);
}
.dv-photo--wide { min-height: 300px; aspect-ratio: auto; }

/* ----- Customer story: compact branded testimonial ----------------------- */
#dv-customers { padding-top: 66px; padding-bottom: 66px; }
#dv-customers .dv-proof-grid { gap: 40px; align-items: center; }
#dv-customers blockquote { font-size: clamp(20px, 2.6vw, 28px); margin-bottom: 22px; }
#dv-customers .dv-proof-who { margin-bottom: 0; }

.dv-proof-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 22px;
  padding: 24px;
  text-align: center;
  text-decoration: none;
}
.dv-proof-brand img {
  width: auto;
  height: 138px;
  display: block;
  transform-origin: center bottom;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.35s ease;
}
.dv-proof-brand:hover img,
.dv-proof-brand:focus-visible img {
  transform: scale(1.08) translateY(-5px);
  filter: drop-shadow(0 18px 30px rgba(8, 56, 106, 0.26));
}
.dv-proof-brand-name {
  font-family: var(--font-display); font-weight: 600; font-size: 21px;
  letter-spacing: -0.01em; color: var(--ink);
  transition: color 0.3s ease;
}
.dv-proof-brand:hover .dv-proof-brand-name { color: var(--navy); }

/* Published-benchmark block inside the customer-story proof section:
   the measured proof under the human proof, columns mirroring the grid. */
.dv-proof-bench { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: center; margin-top: 44px; padding-top: 40px; border-top: 1px solid var(--line-2); }
.dv-bench-n { display: block; font-family: var(--font-mono); font-size: clamp(44px, 6vw, 64px); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.dv-bench-t { display: block; margin-top: 6px; color: var(--sub); font-size: 14px; }
.dv-bench-body p { color: var(--sub); font-size: 15.5px; line-height: 1.7; max-width: 62ch; }
.dv-bench-body .dv-btn-outline { margin-top: 20px; }
@media (min-width: 861px) {
  .dv-proof-bench { grid-template-columns: 0.8fr 1.2fr; gap: 44px; }
  .dv-bench-stat { text-align: center; }
}
@media (max-width: 759px) {
  #dv-customers { padding-top: 54px; padding-bottom: 54px; }
  .dv-proof-brand { padding: 4px 0 26px; }
  .dv-proof-brand img { height: 112px; }
}
@media (max-width: 560px) {
  #dv-customers { padding-top: 46px; padding-bottom: 46px; }
}
@media (max-width: 759px) {
  #dv-customers { padding-top: 54px; padding-bottom: 54px; }
  .dv-proof-brand { min-height: 0; padding: 34px 28px; }
  .dv-proof-brand img { height: 104px; }
}
@media (max-width: 560px) {
  #dv-customers { padding-top: 46px; padding-bottom: 46px; }
}

/* ----- Final CTA + contact: diagonal navy block + floating form card ------ */
.dv-contact { position: relative; padding: 0 var(--pad); }
.dv-contact-bg {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  top: 150px;
  background: linear-gradient(160deg, var(--navy) 0%, var(--navy-deep) 100%);
  z-index: 0;
}
/* Diagonal cut - tweakable. The navy slab's top edge slopes up to the right. */
.dv[data-cuts="diagonal"] .dv-contact-bg { clip-path: polygon(0 90px, 100% 0, 100% 100%, 0 100%); }
.dv[data-cuts="straight"] .dv-contact-bg { clip-path: none; top: 200px; }
.dv-contact-inner { position: relative; z-index: 1; max-width: 760px; margin: 0 auto; padding: 60px 0 90px; }
.dv-contact-intro { text-align: center; margin-bottom: 34px; }
.dv-contact-intro .dv-eyebrow { display: inline-flex; margin-bottom: 16px; }
.dv-contact-intro .dv-h2 { margin: 0 auto; max-width: 18ch; }
.dv-contact-card {
  position: relative;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: 0 40px 90px rgba(6, 44, 82, 0.32);
  padding: clamp(30px, 4vw, 52px);
  margin-top: 56px;
}
.dv-contact-card-badge {
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
}
.dv-contact-card h3 {
  font-family: var(--font-display);
  font-size: clamp(22px, 2.8vw, 28px);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-align: center;
  margin: 10px 0 28px;
}
.dv-reassure { display: grid; grid-template-columns: 1fr; gap: 18px; margin-top: 44px; }
.dv-reassure-item { display: flex; gap: 12px; align-items: flex-start; color: var(--on-navy); font-size: 14.5px; line-height: 1.5; }
.dv-reassure-item svg { width: 18px; height: 18px; color: #fff; background: var(--accent); border-radius: 50%; padding: 3px; flex: 0 0 18px; margin-top: 1px; }
.dv-reassure-item b { font-weight: 600; color: #fff; }

/* Form (keeps #contactForm / .dv-field / #formSuccess hooks). */
.dv-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
.dv-field { display: block; margin-bottom: 16px; }
.dv-field--full { grid-column: 1 / -1; }
.dv-field > span {
  display: block;
  font-family: var(--font-text);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--sub);
  margin-bottom: 8px;
}
.dv-field input, .dv-field textarea {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line-2);
  border-radius: var(--radius);
  padding: 13px 15px;
  font-family: var(--font-text);
  font-size: 16px;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.dv-field input::placeholder, .dv-field textarea::placeholder { color: #a6acb8; }
.dv-field input:focus, .dv-field textarea:focus {
  outline: none;
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.13);
}
.dv-field textarea { resize: vertical; min-height: 100px; }

.dv button.dv-form-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  background: var(--accent);
  background-image: none;
  color: #fff;
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  padding: 16px 22px;
  border: 0;
  border-radius: var(--radius);
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(47, 107, 255, 0.24);
  transition: background 0.2s ease, transform 0.15s ease;
  margin-top: 6px;
}
.dv button.dv-form-submit:hover { background: var(--accent-press); }
.dv button.dv-form-submit:active { transform: translateY(1px); }
.dv button.dv-form-submit svg { width: 16px; height: 16px; }
.dv-form-foot { margin-top: 14px; font-size: 12.5px; color: var(--faint); line-height: 1.5; text-align: center; }
.dv-form-foot a { color: var(--accent); }

.dv #contactForm.sent { display: none; }
.dv #formSuccess {
  display: none;
  align-items: center;
  gap: 13px;
  color: var(--ink);
  padding: 16px 4px;
}
.dv #formSuccess.show { display: flex; }
.dv #formSuccess svg { width: 24px; height: 24px; color: #fff; background: var(--accent); border-radius: 50%; padding: 4px; flex: 0 0 24px; }
.dv #formSuccess b { font-weight: 600; }

/* ----- Footer, navy -------------------------------------------- */
.dv-footer { position: relative; background: var(--navy-deep); color: var(--on-navy); }
.dv-footer-inner {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 24px var(--pad) 40px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}
.dv-footer-brand .dv-brand { margin-bottom: 14px; color: #fff; }
.dv-footer-brand .dv-brand-name { color: #fff; }
.dv-footer-brand p { color: var(--on-navy-sub); font-size: 14px; line-height: 1.6; max-width: 300px; }
.dv-foot-tagline {
  font-family: var(--font-text);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6fa8e6;
  margin-top: 16px;
}
.dv-footer h5 {
  font-family: var(--font-text);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6fa8e6;
  margin-bottom: 16px;
}
.dv-footer li { margin-bottom: 11px; }
.dv-footer a { color: var(--on-navy-sub); font-size: 14.5px; transition: color 0.15s ease; }
.dv-footer a:hover { color: #fff; }
.dv-footer-bot {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px var(--pad) 46px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  color: var(--on-navy-sub);
  font-family: var(--font-text);
  font-size: 12.5px;
  letter-spacing: 0.01em;
}
.dv-footer-bot a { color: var(--on-navy-sub); }
.dv-footer-bot a:hover { color: #fff; }
.dv-footer-bot > span { display: inline-flex; align-items: center; }
.dv-ch-flag { width: 14px; height: 14px; border-radius: 2px; vertical-align: -2px; margin-right: 8px; }

/* ==========================================================================
   Mock UI interfaces - clean light "screenshots" built in HTML/CSS.
   ========================================================================== */
.dv-brand { gap: 9px; }
.dv-brand-mark { width: 30px; height: 30px; display: block; object-fit: contain; }
.dv-nav .dv-brand-mark { width: 48px; height: 48px; }
.dv-brand-name { font-family: var(--font-display); font-size: 21px; font-weight: 700; letter-spacing: -0.02em; color: var(--navy); }

.dv-ui { background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; }
.dv-ui-bar { display: flex; align-items: center; gap: 6px; padding: 11px 15px; border-bottom: 1px solid var(--line); background: #fafbfd; }
.dv-ui-bar i { width: 9px; height: 9px; border-radius: 50%; background: #dde1ea; }
.dv-ui-bar em { margin-left: 8px; font-family: var(--font-mono); font-style: normal; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: #9aa0ad; }

/* Hero mock: document + chat */
.dv-ui--hero { box-shadow: 0 32px 72px rgba(8, 56, 106, 0.16); text-align: left; border-radius: 18px; }
.dv-ui-hero-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; }
.dv-doc { padding: 22px; border-right: 1px solid var(--line); background: #fcfcfe; }
.dv-doc-head { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; color: var(--navy); margin-bottom: 16px; }
.dv-doc-head svg { width: 15px; height: 15px; color: var(--accent); }
.dv-doc-l { display: block; height: 8px; border-radius: 4px; background: #e9ebf2; margin-bottom: 11px; }
.dv-doc-l.w90{width:90%}.dv-doc-l.w85{width:85%}.dv-doc-l.w80{width:80%}.dv-doc-l.w78{width:78%}.dv-doc-l.w75{width:75%}.dv-doc-l.w70{width:70%}.dv-doc-l.w60{width:60%}.dv-doc-l.w50{width:50%}
.dv-doc-hl { background: rgba(47, 107, 255, 0.18); }
.dv-chat { padding: 22px; display: flex; flex-direction: column; gap: 12px; }
.dv-bubble { font-family: var(--font-text); font-size: 13.5px; line-height: 1.5; padding: 11px 14px; border-radius: 14px; max-width: 92%; }
.dv-bubble-q { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 5px; }
.dv-bubble-a { align-self: flex-start; background: var(--band); color: var(--ink); border-bottom-left-radius: 5px; }
.dv-bubble-a b { font-weight: 600; }
.dv-cite { display: inline-flex; align-items: center; gap: 5px; margin-top: 10px; padding: 4px 9px; background: #fff; border: 1px solid var(--line-2); border-radius: 999px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.02em; color: var(--navy); }
.dv-cite svg { width: 12px; height: 12px; color: var(--accent); }

/* ----- Hero: rotating product showcase ------------------------------------ */
.dv-hero-eyebrow { display: none; }

/* Product pages: the emotional H1s never name the product, so the eyebrow
   carries it, visibly, above the headline. Crawlers and skimming visitors get
   the product name in the first line of the hero. Homepage + utility heroes
   keep theirs hidden. Styled to match .dv-eyebrow. */
.da-hero-panel .dv-hero-eyebrow,
.ar-hero-panel .dv-hero-eyebrow,
.tr-hero-panel .dv-hero-eyebrow,
.lc-hero-panel .dv-hero-eyebrow,
.acc-hero-panel .dv-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-family: var(--font-text);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--accent-press);
}
.da-hero-panel .dv-hero-eyebrow::before,
.ar-hero-panel .dv-hero-eyebrow::before,
.tr-hero-panel .dv-hero-eyebrow::before,
.lc-hero-panel .dv-hero-eyebrow::before,
.acc-hero-panel .dv-hero-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.6;
  flex: 0 0 auto;
}

/* One window, four product scenes cross-fading in place over a fixed stage. */
.dv-hero-stage { position: relative; min-height: 300px; }
.dv-scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 0.55s ease, visibility 0.55s ease; pointer-events: none; }
.dv-scene.is-on { opacity: 1; visibility: visible; pointer-events: auto; }
.dv-scene-chat { height: 100%; display: flex; flex-direction: column; justify-content: center; gap: 12px; padding: 26px 28px; }
.dv-scene-pad { height: 100%; display: flex; flex-direction: column; justify-content: center; padding: 28px 30px; }

/* Scenes reuse the product-card mock classes, scaled up for the hero. */
.dv-scene-dash .dv-dash-val { font-size: 25px; }
.dv-scene-dash .dv-spark { height: 78px; margin: 14px 0; }
.dv-scene-dash .dv-dash-rows { gap: 9px; margin-top: 6px; }
.dv-scene-dash .dv-dash-rows span { font-size: 12.5px; }
.dv-scene-report .dv-rep-head { margin-bottom: 18px; }
.dv-scene-report .dv-rep-bars { height: 104px; }
.dv-scene-lease .dv-lease-val { font-size: 23px; }
.dv-scene-lease .dv-spark-lease { height: 74px; margin: 16px 0 10px; }

/* Clickable legend below the window. */
.dv-hero-tabs { display: flex; gap: 6px; padding: 12px 14px; border-top: 1px solid var(--line); background: #fafbfd; }
.dv-hero-tab { flex: 1; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--sub); background: transparent; border: 1px solid var(--line); border-radius: 9px; padding: 8px 6px; cursor: pointer; transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease; }
.dv-hero-tab:hover { color: var(--navy); border-color: var(--line-2); }
.dv-hero-tab.is-on { color: var(--navy); background: var(--accent-wash); border-color: rgba(47, 107, 255, 0.26); }

.dv-typing { align-self: flex-start; display: none; gap: 4px; align-items: center; padding: 12px 14px; background: var(--band); border-radius: 14px; border-bottom-left-radius: 5px; }
.dv-typing span { width: 6px; height: 6px; border-radius: 50%; background: #9fb0c8; }
.dv-cite-dot { margin: 0 5px; color: var(--line-2); }
.dv-cite-doc { font-weight: 600; }

@media (prefers-reduced-motion: no-preference) {
  .dv-js #dvHeroChat .dv-bubble { opacity: 0; transform: translateY(10px) scale(0.97); transition: opacity 0.5s cubic-bezier(0.2, 0.7, 0.2, 1), transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .dv-js #dvHeroChat .dv-bubble-a .dv-cite { opacity: 0; transform: translateY(4px); transition: opacity 0.4s ease 0.1s, transform 0.4s ease 0.1s; }
  .dv-js #dvHeroTyping.is-in span { animation: dvType 1s infinite ease-in-out; }
  .dv-js #dvHeroTyping.is-in span:nth-child(2) { animation-delay: 0.15s; }
  .dv-js #dvHeroTyping.is-in span:nth-child(3) { animation-delay: 0.3s; }
}
#dvHeroChat .dv-bubble.is-in { opacity: 1; transform: none; }
#dvHeroChat .dv-bubble-a.is-in .dv-cite { opacity: 1; transform: none; }
.dv-js #dvHeroTyping.is-in { display: inline-flex; }
@keyframes dvType { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* Product card: visual on top, text below */
.dv-card-visual { padding: 26px 26px 0; }
.dv-card-visual .dv-ui, .dv-mini.dv-ui { box-shadow: 0 12px 28px rgba(8, 56, 106, 0.08); min-height: 150px; }
.dv-card-body { padding: 24px 28px 30px; display: flex; flex-direction: column; flex: 1; }
.dv-card-foot { margin-top: auto; padding-top: 18px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.dv-chip { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.02em; color: var(--navy); background: var(--accent-wash); border-radius: 7px; padding: 6px 11px; }

.dv-mini { padding: 16px; }
.dv-mini-q { font-size: 12.5px; padding: 9px 12px; margin: 0 0 10px auto; max-width: 88%; }
.dv-mini-a { font-size: 12.5px; padding: 9px 12px; max-width: 94%; }

.dv-rep-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 10px; }
.dv-rep-title { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--ink); }
.dv-rep-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.02em; color: #15803d; background: #e9f7ee; border-radius: 999px; padding: 4px 9px; white-space: nowrap; }
.dv-rep-bars { display: flex; align-items: flex-end; gap: 8px; height: 60px; }
.dv-rep-bars span { flex: 1; background: var(--accent); opacity: 0.9; border-radius: 3px 3px 0 0; }
.dv-rep-lines span { display: block; height: 7px; border-radius: 4px; background: #e9ebf2; margin-top: 9px; }
.dv-rep-lines span.w80{width:80%}.dv-rep-lines span.w60{width:60%}

.dv-dash-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.dv-dash-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sub); width: 100%; }
.dv-dash-val { font-family: var(--font-mono); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.dv-dash-up { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: #15803d; }
.dv-spark { display: block; width: 100%; height: 54px; margin: 10px 0; }
.dv-dash-rows { display: flex; flex-direction: column; gap: 6px; }
.dv-dash-rows span { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 11.5px; color: var(--sub); }
.dv-dash-rows i { font-style: normal; }
.dv-dash-rows b { font-weight: 500; }
.dv-dash-rows b.up { color: #15803d; }
.dv-dash-rows b.down { color: #dc2626; }

.dv-lease-label { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sub); }
.dv-lease-val { font-family: var(--font-mono); font-size: 19px; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); margin-top: 4px; }
.dv-lease-conf { font-family: var(--font-mono); font-size: 10px; color: var(--navy); background: var(--accent-wash); border-radius: 999px; padding: 3px 8px; vertical-align: 3px; margin-left: 4px; white-space: nowrap; }
.dv-spark-lease { display: block; width: 100%; height: 44px; margin: 10px 0 6px; }
.dv-lease-foot { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.03em; text-transform: uppercase; color: #9aa0ad; }

/* ----- Overflow guards ---------------------------------------------------- */
.dv-products-grid > *, .dv-why-grid > *, .dv-footer-inner > *,
.dv-hero-ctas > *, .dv-ui-hero-grid > *, .dv-chat, .dv-chat > *,
.dv-reassure, .dv-reassure-item, .dv-reassure-item > *,
.dv-how-grid > *, .dv-pos-grid > *, .dv-proof-stats > *, .dv-feature-grid > *,
.dv-hero-panel > *, .dv-split > *, .dv-proof-grid > *, .dv-form-grid > *,
.dv-card, .dv-why-item, .dv-feature { min-width: 0; }
.dv input, .dv textarea, .dv select { width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; }
.dv-bubble { overflow-wrap: break-word; }
.dv-ui, .dv-hero-shot, .dv-card-visual, .dv-card-visual > * { max-width: 100%; }

/* ----- Scroll reveal ------------------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
  .dv-js .dv-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
  .dv-js .dv-reveal.dv-in { opacity: 1; transform: none; }
}

/* ----- Responsive layout -------------------------------------------------- */
@media (min-width: 760px) {
  .dv-hero-panel { grid-template-columns: 1fr 1.05fr; gap: 48px; }
  .dv-feature-grid { grid-template-columns: repeat(3, 1fr); }
  .dv-split { grid-template-columns: 1fr 1.1fr; }
  .dv-proof-grid { grid-template-columns: 0.8fr 1.2fr; }
  .dv-products-grid { grid-template-columns: 1fr 1fr; gap: 20px; }
  .dv-how-grid { grid-template-columns: repeat(3, 1fr); }
  .dv-how-step { border-bottom: 0; border-right: 1px solid var(--line); padding: 34px 30px 8px 0; }
  .dv-how-step:last-child { border-right: 0; }
  .dv-ctaband { grid-template-columns: 1fr auto; gap: 28px; }
  .dv-reassure { grid-template-columns: repeat(3, 1fr); gap: 24px; }
  .dv-footer-inner { grid-template-columns: 1.6fr 1fr 1fr 1fr; }
}
@media (min-width: 680px) {
  .dv-pos-grid { grid-template-columns: repeat(3, 1fr); column-gap: 32px; }
  .dv-pos { border-top: 1px solid var(--line-2); }
  .dv-pos:last-child { border-bottom: 0; }
}
@media (min-width: 620px) {
  .dv-why-grid { grid-template-columns: 1fr 1fr; column-gap: 48px; }
}
@media (min-width: 980px) {
  .dv-why-grid { grid-template-columns: repeat(3, 1fr); column-gap: 48px; }
}

@media (max-width: 859px) {
  .dv-nav { grid-template-columns: 1fr auto; }
  .dv-nav-links { display: none; }
  .dv-nav-right .dv-nav-cta-btn { display: none; }
  .dv-burger { display: flex; }
}
@media (min-width: 860px) {
  .dv-mobile { display: none; }
  .dv-burger { display: none; }
}

@media (max-width: 700px) {
  .dv-form-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .dv-section { padding: 72px var(--pad); }
  .dv-features, .dv-products { padding-top: 76px; }
  .dv-hero { padding-top: 22px; }
  .dv-card-visual { padding: 20px 16px 0; }
  .dv-card-body { padding: 20px 18px 26px; }
  .dv-proof-stats { grid-template-columns: 1fr; }
  .dv-stat { border-right: 0; border-bottom: 1px solid var(--line); padding: 20px 0; }
  .dv-stat:last-child { border-bottom: 0; }
  .dv-tilt > * { transform: none; box-shadow: 0 20px 44px rgba(8,56,106,0.14); }
  .dv-wrap, .dv-hero, .dv-products-grid, .dv-section-head { max-width: 100%; }
}

/* ----- Type-direction presets (driven by data-type on the .dv root) ------- */
.dv[data-type="neutral"] {
  --font-display: "Schibsted Grotesk", sans-serif;
  --font-text: "Hanken Grotesk", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}
.dv[data-type="grotesk"] {
  --font-display: "Hanken Grotesk", sans-serif;
  --font-text: "Hanken Grotesk", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}
.dv[data-type="plex"] {
  --font-display: "IBM Plex Sans", sans-serif;
  --font-text: "IBM Plex Sans", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;
}
.dv[data-type="editorial"] {
  --font-display: "Newsreader", Georgia, serif;
  --font-text: "Hanken Grotesk", sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
}
.dv[data-type="editorial"] .dv-h1,
.dv[data-type="editorial"] .dv-h2,
.dv[data-type="editorial"] .dv-card h3,
.dv[data-type="editorial"] .dv-pos h3,
.dv[data-type="editorial"] .dv-split-l h3,
.dv[data-type="editorial"] .dv-proof blockquote { font-weight: 500; letter-spacing: -0.02em; }

/* ==========================================================================
   Mobile polish - legibility, fit and tap targets on small screens.
   Appended last so these intentionally win over earlier same-specificity rules.
   ========================================================================== */
@media (max-width: 700px) {
  /* Rotating hero: shorter stage and tighter padding on phones. */
  .dv-hero-stage { min-height: 248px; }
  .dv-scene-chat { padding: 20px 18px; }
  .dv-scene-pad { padding: 22px 20px; }
  .dv-hero-tabs { padding: 10px 12px; gap: 5px; }
  .dv-hero-tab { padding: 8px 4px; font-size: 10.5px; }
  /* The tailoring CTA button must never clip: allow wrap, go full width. */
  .dv-ctaband .dv-btn { white-space: normal; width: 100%; justify-content: center; text-align: center; }
}

@media (max-width: 560px) {
  /* More breathing room in the hero panel on small screens. */
  .dv-hero-panel { padding: 26px 20px; gap: 30px; }
  .dv-cred { padding: 68px var(--pad); }
  /* Full-width, comfortably tappable hero CTAs. */
  .dv-hero-ctas { gap: 12px; }
  .dv-hero-ctas .dv-btn, .dv-hero-ctas .dv-btn-outline { width: 100%; justify-content: center; }
  /* Let a long file-name + page citation wrap rather than clip. */
  .dv-cite { flex-wrap: wrap; row-gap: 2px; }
}

@media (max-width: 480px) {
  /* Keep the sticky bar from crowding on small phones. */
  .dv-nav { gap: 10px; }
  .dv-nav .dv-brand-mark { width: 36px; height: 36px; }
  .dv-brand-name { font-size: 19px; }
}

/* ==========================================================================
   Document Studio live animation: a document generates, a cursor clicks a
   section, an instruction is typed in plain language, and the document updates.
   Reusable: standalone + looping on the product page (.ds-anim[data-ds-loop]),
   and inside the homepage hero reporting scene (driven by wireHeroDemo). No-JS
   / reduced-motion fall back to a clean static still. Engine: datavera-apple.js.
   ========================================================================== */
.ds-anim { position: relative; display: flex; flex-direction: column; gap: 14px; padding: 20px; box-sizing: border-box; }
.dv-hero-stage .ds-anim { height: 100%; justify-content: center; }

/* The page: a corporate PDF, not a generic card. Accent spine across the top. */
.ds-doc { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 18px 20px 14px; box-shadow: 0 14px 36px rgba(8, 56, 106, 0.11); overflow: hidden; }
.ds-doc::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--accent), #6f3bff); }
.ds-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ds-brand { display: flex; align-items: center; gap: 9px; }
.ds-logo { width: 26px; height: 26px; flex: none; border-radius: 7px; background: linear-gradient(135deg, var(--accent), #6f3bff); color: #fff; display: grid; place-items: center; font-family: var(--font-display); font-weight: 800; font-size: 13px; }
.ds-co { font-family: var(--font-display); font-weight: 800; font-size: 12.5px; letter-spacing: 0.04em; color: var(--ink); line-height: 1.15; }
.ds-co-sub { font-size: 9.5px; color: var(--sub); letter-spacing: 0.02em; margin-top: 2px; }
.ds-badge { flex: none; font-size: 10px; font-weight: 600; color: var(--accent); background: rgba(47, 107, 255, 0.10); border-radius: 999px; padding: 4px 10px; white-space: nowrap; }
.ds-rule { height: 1.5px; background: var(--line); margin: 11px 0 12px; }
.ds-doc-title { font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; line-height: 1.25; }

.ds-gen { display: none; align-items: center; gap: 9px; font-size: 12px; color: var(--sub); padding: 6px 0 0; }
.ds-anim.is-generating .ds-gen { display: flex; }
.ds-anim.is-generating .ds-body { opacity: 0.16; filter: blur(1.6px); }
.ds-gen-dot { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: ds-spin 0.7s linear infinite; }
@keyframes ds-spin { to { transform: rotate(360deg); } }
.ds-body { transition: opacity 0.35s ease, filter 0.35s ease; }
.ds-lede { font-size: 11.5px; line-height: 1.55; color: var(--sub); margin: 12px 0 0; }
.ds-lede b { color: var(--ink); font-weight: 600; }

/* The chart: the part the cursor clicks. A selection ring appears on click. */
.ds-chart { position: relative; margin-top: 12px; border-radius: 10px; padding: 8px 8px 4px; transition: box-shadow 0.2s ease, background 0.2s ease; }
.ds-anim.is-selected .ds-chart { background: rgba(47, 107, 255, 0.05); box-shadow: 0 0 0 2px var(--accent); }
.ds-chart-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 10px; color: var(--sub); margin-bottom: 16px; }
.ds-chart-head b { color: var(--ink); font-weight: 700; }
.ds-plot { position: relative; height: 92px; }
.ds-bars { display: flex; align-items: flex-end; gap: 12px; height: 100%; }
.ds-bar { position: relative; flex: 1; height: var(--h, 50%); border-radius: 5px 5px 0 0; background: linear-gradient(180deg, #5b8bff, var(--accent)); transform-origin: bottom; transition: transform 0.55s cubic-bezier(0.2, 0.7, 0.2, 1), background 0.4s ease; }
.ds-anim.is-generating .ds-bar { transform: scaleY(0); }
.ds-bar-v { position: absolute; left: 0; right: 0; top: -15px; text-align: center; font-family: var(--font-display); font-weight: 700; font-size: 9.5px; color: var(--ink); opacity: 0; transition: opacity 0.3s ease 0.25s; }
.ds-anim:not(.is-generating) .ds-bar-v { opacity: 1; }
.ds-anim.is-applied .ds-bar.ds-miss { background: linear-gradient(180deg, #fbbf24, #f59e0b); }
.ds-anim.is-applied .ds-bar.ds-miss .ds-bar-v { color: #b45309; }
.ds-target { position: absolute; left: 0; right: 0; bottom: 64%; border-top: 2px dashed #f59e0b; opacity: 0; transform: scaleX(0); transform-origin: left; transition: transform 0.5s ease, opacity 0.3s ease; z-index: 2; }
.ds-anim.is-applied .ds-target { opacity: 1; transform: scaleX(1); }
.ds-tleg { display: none; align-items: center; gap: 5px; color: #b45309; font-weight: 700; white-space: nowrap; }
.ds-tleg::before { content: ""; width: 14px; height: 0; border-top: 2px dashed #f59e0b; }
.ds-anim.is-applied .ds-tleg { display: inline-flex; }
.ds-axis { display: flex; gap: 12px; margin-top: 7px; }
.ds-axis span { flex: 1; text-align: center; font-family: var(--font-mono); font-size: 9.5px; color: var(--sub); }
.ds-foot { display: flex; justify-content: space-between; align-items: center; border-top: 1px solid var(--line); margin-top: 13px; padding-top: 9px; font-family: var(--font-mono); font-size: 8.5px; color: var(--sub); letter-spacing: 0.02em; }

.ds-flag { display: none; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: #9a3412; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 9px; padding: 8px 10px; margin-top: 12px; }
.ds-flag svg { width: 15px; height: 15px; flex: none; color: #ea7317; }
.ds-anim.is-applied .ds-flag { display: flex; animation: ds-pop 0.4s ease; }
@keyframes ds-pop { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }

.ds-cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; opacity: 0; transform: translate(60px, 120px); transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s ease; pointer-events: none; z-index: 6; color: #0c2440; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35)); }
.ds-anim.is-selecting .ds-cursor, .ds-anim.is-selected .ds-cursor, .ds-anim.is-typing .ds-cursor { opacity: 1; }
.ds-cursor::after { content: ''; position: absolute; left: 6px; top: 6px; width: 8px; height: 8px; border-radius: 50%; border: 2px solid var(--accent); transform: scale(0); opacity: 0; }
.ds-anim.is-selected .ds-cursor::after { animation: ds-ripple 0.5s ease-out; }
@keyframes ds-ripple { 0% { transform: scale(0); opacity: 0.9; } 100% { transform: scale(3.6); opacity: 0; } }

.ds-cmd { display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--line); border-radius: 12px; padding: 10px 13px; background: var(--paper); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.ds-anim.is-selected .ds-cmd, .ds-anim.is-typing .ds-cmd { border-color: var(--accent); box-shadow: 0 6px 18px rgba(47, 107, 255, 0.12); }
.ds-cmd-spark { width: 16px; height: 16px; flex: none; color: var(--accent); }
.ds-cmd-text { flex: 1; font-size: 12.5px; color: var(--ink); line-height: 1.4; min-height: 1.4em; }
.ds-cmd-text:empty::before { content: attr(data-ph); color: var(--sub); }
.ds-cmd-caret { display: none; width: 1.5px; height: 14px; background: var(--accent); vertical-align: -2px; margin-left: 1px; }
.ds-anim.is-typing .ds-cmd-caret { display: inline-block; animation: ds-blink 1s steps(1) infinite; }
@keyframes ds-blink { 50% { opacity: 0; } }
.ds-cmd-send { flex: none; width: 28px; height: 28px; border-radius: 8px; background: var(--accent); display: inline-flex; align-items: center; justify-content: center; }
.ds-cmd-send svg { width: 14px; height: 14px; color: #fff; }
.ds-anim.is-applied .ds-cmd-send { animation: ds-send 0.4s ease; }
@keyframes ds-send { 50% { transform: scale(1.18); } }

/* Compact variant for the hero windows: smaller; drops the lede, footer, value
   labels and callout so the chart + command bar fit a small window. */
.ds-anim--mini { padding: 16px; gap: 10px; }
.ds-anim--mini .ds-lede,
.ds-anim--mini .ds-foot,
.ds-anim--mini .ds-flag,
.ds-anim--mini .ds-co-sub,
.ds-anim--mini .ds-tleg,
.ds-anim--mini .ds-bar-v { display: none !important; }
.ds-anim--mini .ds-doc { padding: 13px 15px 11px; }
.ds-anim--mini .ds-rule { margin: 8px 0 9px; }
.ds-anim--mini .ds-doc-title { font-size: 12.5px; }
.ds-anim--mini .ds-logo { width: 22px; height: 22px; font-size: 11px; }
.ds-anim--mini .ds-chart { margin-top: 9px; padding: 6px 6px 2px; }
.ds-anim--mini .ds-chart-head { margin-bottom: 9px; }
.ds-anim--mini .ds-plot { height: 70px; }

/* Product-page hero is static (no rotation), so let the document size to its
   content instead of being clipped to the fixed stage height. */
#arHeroStage { min-height: 0; }
#arHeroStage .ds-anim { height: auto; }

/* The homepage hero rotates through fixed-height absolute scenes, so scene 2
   must fit the stage in every state. Tighten the document further there. */
.dv-scene .ds-anim--mini { padding: 11px; gap: 7px; }
.dv-scene .ds-anim--mini .ds-doc { padding: 11px 13px 9px; }
.dv-scene .ds-anim--mini .ds-rule { display: none; }
.dv-scene .ds-anim--mini .ds-doc-title { font-size: 11.5px; margin-top: 7px; }
.dv-scene .ds-anim--mini .ds-chart { margin-top: 7px; }
.dv-scene .ds-anim--mini .ds-plot { height: 58px; }

/* ----- Homepage rotating hero: each scene is the product's REAL animation,
   driven by wireHeroDemo (leasing plays once). Two tiers:
   (a) >=980px desktop: the hero window is widened so each animation renders at
       full product-page fidelity (their own container queries give 2 columns);
   (b) <=979px tablet/phone: a REDUCED single-column version (the side panel and
       longest sections are dropped) so nothing clips in the narrow window. ----- */
.dv-hero-stage { min-height: 300px; }
.dv-scene .ds-anim--trade,
.dv-scene .da-anim,
.dv-scene .lc-anim,
.dv-scene .ds-anim--page { height: 100%; display: flex; align-items: center; padding: 14px 16px; box-sizing: border-box; }
.dv-scene .ds-anim--trade > .ds-doc,
.dv-scene .da-anim > .ds-doc,
.dv-scene .lc-anim > .ds-doc,
.dv-scene .ds-anim--page > .ds-doc { width: 100%; box-sizing: border-box; }
/* the full document page is built for a wide print column; tighten it for the hero */
.dv-scene .ds-anim--page .ds-doc { padding: 16px 20px 14px; }
.dv-scene .ds-anim--page .ds-doc-title { font-size: 15px; }
.dv-scene .ds-anim--page .ds-sec { margin: 12px 0 7px; }

/* (a) Desktop: widen the visual column; give the stage room for the tallest. */
@media (min-width: 980px) {
  .dv-hero-panel.idx-hero { grid-template-columns: minmax(320px, 360px) 1fr; gap: 46px; align-items: center; }
  .dv-hero-stage { min-height: 480px; }
  /* Document Studio is a full A4-style page; drop the text-only sections so the
     window shows the data (KPIs, both charts, the flag) + the live edit, and
     fits the stage without clipping. */
  .dv-scene .ds-anim--page .ds-cols,
  .dv-scene .ds-anim--page .ds-skel,
  .dv-scene .ds-anim--page .ds-meta,
  .dv-scene .ds-anim--page .ds-sec,
  .dv-scene .ds-anim--page .ds-lede,
  .dv-scene .ds-anim--page .ds-foot { display: none; }
}

/* (b) Tablet + phone: reduced single-column teaser, no clipping. */
@media (max-width: 979px) {
  .dv-hero-stage { min-height: 356px; }
  .dv-scene .tr-grid,
  .dv-scene .da-grid,
  .dv-scene .lc-grid,
  .dv-scene .ds-charts { grid-template-columns: 1fr; }
  .dv-scene .tr-analysis,
  .dv-scene .lc-analysis,
  .dv-scene .da-files { display: none; }
  /* Document Studio: reduce the full page to a compact card (letterhead, title,
     the chart, the flag, the edit) on the narrow window. */
  .dv-scene .ds-anim--page .ds-kpis,
  .dv-scene .ds-anim--page .ds-chart2,
  .dv-scene .ds-anim--page .ds-cols,
  .dv-scene .ds-anim--page .ds-skel,
  .dv-scene .ds-anim--page .ds-meta,
  .dv-scene .ds-anim--page .ds-sec,
  .dv-scene .ds-anim--page .ds-lede,
  .dv-scene .ds-anim--page .ds-foot { display: none; }
}

/* ----- Full-page variant: the product-page showcase ----------------------
   A dense, multi-section corporate PDF page: letterhead, executive summary,
   KPI strip, TWO charts (a clickable bar chart + a revenue-mix donut), an
   anomaly flag, and a two-column commentary block. The cursor clicks the bar
   chart and edits it live, so the document visibly changes. */
.ds-anim--page .ds-doc { padding: 30px 34px 22px; }
.ds-anim--page .ds-doc-title { font-size: 21px; margin-top: 2px; }
.ds-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; font-family: var(--font-mono); font-size: 9.5px; color: var(--sub); letter-spacing: 0.02em; }
.ds-meta-sep { color: var(--line); }
.ds-sec { font-family: var(--font-display); font-weight: 700; font-size: 10.5px; letter-spacing: 0.09em; text-transform: uppercase; color: var(--accent); margin: 20px 0 9px; }
.ds-anim--page .ds-lede { font-size: 12px; margin-top: 0; }
.ds-skel { display: flex; flex-direction: column; gap: 6px; margin-top: 9px; }
.ds-skel i { display: block; height: 7px; border-radius: 4px; background: linear-gradient(90deg, #eef2f8, #e4eaf4); }

.ds-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 14px; }
.ds-kpi { border: 1px solid var(--line); border-radius: 9px; padding: 11px 12px; background: #fbfcfe; }
.ds-kpi-v { display: block; font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--ink); letter-spacing: -0.01em; }
.ds-kpi-l { display: block; font-size: 9px; color: var(--sub); margin-top: 4px; letter-spacing: 0.02em; }

.ds-charts { display: grid; grid-template-columns: 1.5fr 1fr; gap: 16px; margin-top: 4px; align-items: stretch; }
.ds-charts .ds-chart { margin-top: 0; }
.ds-anim--page .ds-plot { height: 108px; }
.ds-chart2 { border: 1px solid var(--line); border-radius: 10px; padding: 12px 13px; display: flex; flex-direction: column; transition: opacity 0.4s ease, transform 0.4s ease; }
.ds-anim.is-generating .ds-chart2 { opacity: 0; transform: scale(0.96); }
.ds-chart2-head { font-size: 10px; color: var(--sub); margin-bottom: 12px; }
.ds-chart2-head b { color: var(--ink); font-weight: 700; }
.ds-donut-wrap { display: flex; align-items: center; gap: 13px; flex: 1; }
.ds-donut { width: 80px; height: 80px; flex: none; border-radius: 50%; position: relative; background: conic-gradient(var(--accent) 0 46%, #6f3bff 46% 73%, #5b8bff 73% 90%, #c7d6f0 90% 100%); }
.ds-donut::after { content: ""; position: absolute; inset: 23%; background: #fff; border-radius: 50%; }
.ds-leg { display: flex; flex-direction: column; gap: 7px; font-size: 9.5px; color: var(--sub); }
.ds-leg span { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ds-leg i { width: 8px; height: 8px; border-radius: 2px; flex: none; }

.ds-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 6px; }
.ds-col p { font-size: 11px; line-height: 1.55; color: var(--sub); margin: 0; }
.ds-col p b { color: var(--ink); font-weight: 600; }
.ds-col .ds-sec:first-child { margin-top: 0; }
.ds-anim--page .ds-foot { margin-top: 20px; }

@media (max-width: 700px) {
  .ds-anim { padding: 16px; }
  .ds-doc-title { font-size: 14px; }
  .dv-scene .ds-anim--mini { padding: 8px; gap: 6px; }
  .dv-scene .ds-anim--mini .ds-doc-title { font-size: 11px; margin-top: 4px; }
  .dv-scene .ds-anim--mini .ds-chart { margin-top: 5px; }
  .dv-scene .ds-anim--mini .ds-chart-head { margin-bottom: 4px; }
  .dv-scene .ds-anim--mini .ds-plot { height: 48px; }
  .dv-scene .ds-anim--mini .ds-axis { margin-top: 4px; }
  .ds-anim--page .ds-doc { padding: 20px 18px 16px; }
  .ds-anim--page .ds-doc-title { font-size: 16px; }
  .ds-charts { grid-template-columns: 1fr; }
  .ds-kpis { grid-template-columns: repeat(2, 1fr); }
  .ds-cols { grid-template-columns: 1fr; gap: 8px; }
  .ds-anim--page .ds-plot { height: 92px; }
}

/* ==========================================================================
   Trading Dashboard live animation. A consolidated multi-broker book: trades
   from every broker merge per asset (blended entry + combined P&L), with a
   per-broker breakdown, open/close actions, and a side market-analysis panel
   (ML candlestick forecast + live news -> the likely next move). No typing.
   Engine: playTradingAnim/wireTradingAnim in datavera-apple.js; root class
   .ds-anim--trade, internals .tr-*. The .tr-js class (added by the engine)
   gates the animated-hidden states, so no-JS / reduced-motion fall back to the
   full static dashboard. Side panel sits beside the table when the panel is
   wide enough (container query), else stacks under it.
   ========================================================================== */
.ds-anim--trade .ds-doc { padding: 18px 20px 16px; container-type: inline-size; }
.td-up { color: #15994f; }
.td-dn { color: #d23f47; }

/* Header: consolidated book + connected brokers + open P&L. */
.tr-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.tr-title { display: block; font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--ink); letter-spacing: -0.01em; }
.tr-brokers { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.tr-bk { font-family: var(--font-mono); font-size: 8.5px; font-weight: 700; letter-spacing: 0.03em; color: var(--accent); background: rgba(47, 107, 255, 0.09); border-radius: 5px; padding: 2px 6px; font-style: normal; }
.tr-bk-note { font-size: 9px; color: var(--sub); }
.tr-top-r { text-align: right; flex: none; }
.tr-pnl-l { display: block; font-size: 9px; color: var(--sub); letter-spacing: 0.02em; }
.tr-pnl { font-family: var(--font-display); font-weight: 800; font-size: 17px; letter-spacing: -0.01em; }
.tr-live { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.05em; color: #15994f; margin-top: 3px; }
.tr-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #15994f; animation: tr-pulse 1.4s ease-in-out infinite; }
@keyframes tr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }

/* Grid: consolidated table (left) + analysis (right, beside when wide). */
.tr-grid { position: relative; display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 14px; }
@container (min-width: 500px) { .tr-grid { grid-template-columns: 1.5fr 1fr; } }

/* Consolidated positions table. */
.tr-poshead { display: grid; grid-template-columns: 2fr 0.9fr 1.2fr 1fr; gap: 8px; font-size: 8px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sub); padding: 0 2px 7px; border-bottom: 1px solid var(--line); }
.tr-poshead span:nth-child(n+2) { text-align: right; }
.tr-pos { border-bottom: 1px solid var(--line); padding: 9px 2px; opacity: 1; transform: none; transition: opacity 0.45s ease, transform 0.45s ease; }
.tr-js .tr-pos { opacity: 0; transform: translateY(10px); }
.tr-js.is-live .tr-pos { opacity: 1; transform: none; transition-delay: calc(var(--d, 0) * 80ms); }
.tr-pos-main { display: grid; grid-template-columns: 2fr 0.9fr 1.2fr 1fr; gap: 8px; align-items: center; }
.tr-asset { display: flex; align-items: center; gap: 7px; }
.tr-asset b { font-family: var(--font-display); font-weight: 700; font-size: 12px; color: var(--ink); }
.tr-side { font-family: var(--font-mono); font-size: 7px; font-weight: 700; letter-spacing: 0.04em; border-radius: 4px; padding: 1px 5px; }
.tr-side.long { color: #15994f; background: rgba(21, 153, 79, 0.10); }
.tr-side.short { color: #d23f47; background: rgba(210, 63, 71, 0.10); }
.tr-num { font-family: var(--font-mono); font-size: 10.5px; color: #41546b; text-align: right; }
.tr-rpnl { font-family: var(--font-display); font-weight: 700; font-size: 11px; text-align: right; }

/* Selected row: highlighted, broker breakdown expanded, open/close actions. */
.tr-pos.is-sel { background: rgba(47, 107, 255, 0.045); border-radius: 9px; box-shadow: inset 0 0 0 1px rgba(47, 107, 255, 0.18); border-bottom-color: transparent; padding: 10px 9px; }
.tr-brk { display: none; }
.tr-pos.is-sel .tr-brk { display: block; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
.tr-brk-row { display: grid; grid-template-columns: 2fr 0.9fr 1.2fr 1fr; gap: 8px; align-items: center; padding: 3px 0; opacity: 1; transform: none; transition: opacity 0.4s ease, transform 0.4s ease; }
.tr-js .tr-brk-row { opacity: 0; transform: translateX(-6px); }
.tr-js.is-live .tr-brk-row { opacity: 1; transform: none; transition-delay: calc(0.2s + var(--d, 0) * 90ms); }
.tr-bkn { display: flex; align-items: center; gap: 6px; padding-left: 13px; position: relative; font-size: 9.5px; color: var(--sub); }
.tr-bkn::before { content: ""; position: absolute; left: 2px; top: 50%; width: 7px; height: 1px; background: var(--line); }
.tr-bkn i { font-family: var(--font-mono); font-size: 8px; font-weight: 700; color: var(--accent); font-style: normal; }
.tr-brk-row .tr-num { font-size: 9.5px; }
.tr-brk-row .tr-rpnl { font-size: 9.5px; }
.tr-actions { display: flex; gap: 7px; margin-top: 10px; }
.tr-btn { font-family: var(--font-display); font-size: 9.5px; font-weight: 600; border-radius: 7px; padding: 5px 12px; }
.tr-btn-close { color: #fff; background: var(--ink); }
.tr-btn-add { color: var(--accent); background: rgba(47, 107, 255, 0.10); }

/* Market analysis side panel (ML candlestick forecast + live news). */
.tr-analysis { border: 1px solid var(--line); border-radius: 11px; padding: 12px 13px; background: #fbfcfe; opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.5s ease; }
.tr-js .tr-analysis { opacity: 0; transform: translateY(10px); }
.tr-js.is-live .tr-analysis { opacity: 1; transform: none; transition-delay: 0.32s; }
.tr-an-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tr-an-h { font-size: 8px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sub); }
.tr-an-sym { font-family: var(--font-display); font-weight: 800; font-size: 12px; color: var(--ink); }
.tr-candles { display: block; width: 100%; height: 80px; margin-top: 10px; }
.tr-cw { stroke: #9fb2cc; stroke-width: 1; vector-effect: non-scaling-stroke; }
.tr-cu { fill: #15994f; }
.tr-cd { fill: #d23f47; }
.tr-cnow { stroke: #c2cee0; stroke-width: 1; stroke-dasharray: 3 3; vector-effect: non-scaling-stroke; }
.tr-cf { fill: rgba(47, 107, 255, 0.16); stroke: var(--accent); stroke-width: 1; stroke-dasharray: 3 2; vector-effect: non-scaling-stroke; opacity: 1; transition: opacity 0.5s ease; }
.tr-js .tr-cf { opacity: 0; }
.tr-js.is-live .tr-cf { opacity: 1; transition-delay: 0.7s; }
.tr-arrow { fill: var(--accent); opacity: 1; transition: opacity 0.4s ease; }
.tr-js .tr-arrow { opacity: 0; }
.tr-js.is-live .tr-arrow { opacity: 1; transition-delay: 0.85s; }
.tr-verdict { display: flex; align-items: center; gap: 7px; margin-top: 11px; font-size: 10.5px; color: var(--sub); }
.tr-verdict b { font-size: 11px; }
.tr-conf { font-family: var(--font-mono); font-size: 9.5px; color: var(--ink); margin-left: auto; }
.tr-confbar { height: 5px; border-radius: 3px; background: var(--band); overflow: hidden; margin-top: 7px; }
.tr-confbar i { display: block; height: 100%; width: var(--conf, 68%); border-radius: 3px; background: linear-gradient(90deg, var(--accent), #6f3bff); transition: width 0.8s ease; }
.tr-js .tr-confbar i { width: 0; }
.tr-js.is-live .tr-confbar i { width: var(--conf, 68%); transition-delay: 0.5s; }
.tr-news { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.tr-news-h { font-size: 8px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sub); }
.tr-ni { display: flex; align-items: center; gap: 7px; font-size: 9.5px; color: #41546b; line-height: 1.35; opacity: 1; transform: none; transition: opacity 0.4s ease, transform 0.4s ease; }
.tr-js .tr-ni { opacity: 0; transform: translateY(5px); }
.tr-js.is-live .tr-ni { opacity: 1; transform: none; transition-delay: calc(0.55s + var(--d, 0) * 0.12s); }
.tr-tag { flex: none; font-family: var(--font-mono); font-size: 7px; font-weight: 700; letter-spacing: 0.02em; border-radius: 4px; padding: 2px 5px; }
.tr-tag.bull { color: #15994f; background: rgba(21, 153, 79, 0.10); }
.tr-tag.bear { color: #d23f47; background: rgba(210, 63, 71, 0.10); }
.tr-tag.neu { color: var(--sub); background: rgba(88, 106, 128, 0.12); }
.tr-ni-x { flex: 1; }
.tr-ni-t { font-family: var(--font-mono); font-size: 8px; color: var(--sub); flex: none; }

@media (max-width: 700px) {
  .ds-anim--trade .ds-doc { padding: 15px 15px 13px; }
  .tr-pnl { font-size: 15px; }
  .tr-title { font-size: 13px; }
}

/* ==========================================================================
   Document Assistant animation. A workspace: a left panel of ingested files
   (each with extracted entities + connections) and an upload button; a right
   panel with a cited chat answer (which page of which doc) and a generate-a-
   document field that types out the requested document, then a "report ready"
   chip. Engine: playDocAssistAnim/wireDocAssist in datavera-apple.js; root
   class .da-anim, internals .da-*. .da-js gates animated-hidden states so
   no-JS / reduced-motion fall back to the full static workspace.
   ========================================================================== */
.da-anim { position: relative; padding: 16px; }
.da-anim .ds-doc { padding: 14px 15px; container-type: inline-size; }
.da-grid { display: grid; grid-template-columns: 1fr; gap: 14px; }
@container (min-width: 460px) { .da-grid { grid-template-columns: 0.82fr 1.18fr; } }

/* Left: ingested sources (entities + connections extracted). */
.da-files { border: 1px solid var(--line); border-radius: 11px; padding: 11px; background: #fbfcfe; }
.da-files-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.da-files-t { font-family: var(--font-display); font-weight: 700; font-size: 11px; color: var(--ink); letter-spacing: 0.02em; }
.da-files-n { font-size: 9px; color: var(--sub); }
.da-file { display: flex; align-items: center; gap: 8px; padding: 6px 5px; border-radius: 7px; opacity: 1; transform: none; transition: opacity 0.4s ease, transform 0.4s ease; }
.da-js .da-file { opacity: 0; transform: translateX(-6px); }
.da-js.is-live .da-file { opacity: 1; transform: none; transition-delay: calc(var(--d, 0) * 90ms); }
.da-file > svg { width: 16px; height: 16px; flex: none; color: var(--accent); }
.da-file-x { min-width: 0; }
.da-file-nm { display: block; font-size: 10.5px; font-weight: 600; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.da-file-meta { display: block; font-family: var(--font-mono); font-size: 8px; color: var(--sub); margin-top: 1px; }
.da-upload { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; margin-top: 8px; padding: 7px; border: 1px dashed #c2cee0; border-radius: 8px; color: var(--accent); font-family: var(--font-display); font-size: 9.5px; font-weight: 600; background: none; }
.da-upload svg { width: 13px; height: 13px; }

/* Right: cited chat answer + generate-a-document. */
.da-q { font-size: 11px; font-weight: 600; color: var(--ink); background: var(--band); border-radius: 10px 10px 10px 3px; padding: 8px 11px; opacity: 1; transform: none; transition: opacity 0.4s ease, transform 0.4s ease; }
.da-js .da-q { opacity: 0; transform: translateY(6px); }
.da-js.is-live .da-q { opacity: 1; transform: none; transition-delay: 0.35s; }
.da-a { margin-top: 8px; background: #fff; border: 1px solid var(--line); border-radius: 10px 10px 3px 10px; padding: 9px 11px; opacity: 1; transform: none; transition: opacity 0.4s ease, transform 0.4s ease; }
.da-js .da-a { opacity: 0; transform: translateY(6px); }
.da-js.is-live .da-a { opacity: 1; transform: none; transition-delay: 0.6s; }
.da-a-x { display: block; font-size: 11px; line-height: 1.5; color: var(--sub); }
.da-a-x b { color: var(--ink); font-weight: 700; }
.da-cite { display: inline-flex; align-items: center; gap: 5px; margin-top: 8px; font-family: var(--font-mono); font-size: 8.5px; color: var(--accent); background: rgba(47, 107, 255, 0.07); border-radius: 6px; padding: 3px 7px; }
.da-cite svg { width: 11px; height: 11px; flex: none; }
.da-cite i { color: var(--sub); font-style: normal; }

.da-gen { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 11px; }
.da-gen-l { font-size: 8.5px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sub); margin-bottom: 7px; }
.da-gen-field { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--line); border-radius: 10px; padding: 7px 9px; background: var(--paper); transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.da-js.is-typed .da-gen-field { border-color: var(--accent); box-shadow: 0 5px 16px rgba(47, 107, 255, 0.12); }
.da-gen-spark { width: 14px; height: 14px; flex: none; color: var(--accent); }
.da-type { flex: 1; min-width: 0; font-size: 10.5px; color: var(--ink); line-height: 1.35; min-height: 1.35em; }
.da-type:empty::before { content: attr(data-ph); color: var(--sub); }
.da-caret { display: none; width: 1.5px; height: 13px; background: var(--accent); flex: none; }
.da-js.is-typed .da-caret { display: inline-block; animation: ds-blink 1s steps(1) infinite; }
.da-js.is-done .da-caret { display: none; }
.da-gen-btn { flex: none; font-family: var(--font-display); font-size: 9.5px; font-weight: 700; color: #fff; background: var(--accent); border-radius: 8px; padding: 6px 12px; }
.da-js.is-done .da-gen-btn { animation: ds-send 0.4s ease; }
.da-report { display: none; align-items: center; gap: 8px; margin-top: 9px; font-size: 10px; color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 9px; padding: 8px 10px; }
.da-report svg { width: 14px; height: 14px; flex: none; color: #16a34a; }
.da-report b { color: #14532d; font-weight: 700; }
.da-js.is-done .da-report { display: flex; animation: ds-pop 0.4s ease; }

@media (max-width: 700px) { .da-anim { padding: 12px; } .da-anim .ds-doc { padding: 13px; } }

/* ==========================================================================
   Leasing Command Center animation. A fleet of real vehicles with residual
   values; selecting one shows its residual-value analysis: a depreciation
   curve, the second-hand-market comparables it is built from, and the per-car
   equipment uplift. No typing. Engine playLeaseAnim/wireLeaseAnim; root class
   .lc-anim, internals .lc-*. .lc-js gates animated-hidden states (no-JS /
   reduced-motion -> full static dashboard). Fleet + analysis sit side-by-side
   when the panel is wide enough (container query), else stack.
   ========================================================================== */
.lc-anim { position: relative; padding: 18px 20px 16px; }
.lc-anim .ds-doc { padding: 16px 18px; container-type: inline-size; }
.lc-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.lc-title { display: block; font-family: var(--font-display); font-weight: 800; font-size: 14px; color: var(--ink); letter-spacing: -0.01em; }
.lc-sub { display: block; font-size: 9px; color: var(--sub); margin-top: 4px; }
.lc-top-r { text-align: right; flex: none; }
.lc-pnl-l { display: block; font-size: 9px; color: var(--sub); letter-spacing: 0.02em; }
.lc-pnl { font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--ink); letter-spacing: -0.01em; }
.lc-live { display: block; font-family: var(--font-mono); font-size: 8px; letter-spacing: 0.04em; color: #15994f; margin-top: 2px; }

.lc-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 13px; }
@container (min-width: 480px) { .lc-grid { grid-template-columns: 1fr 1.25fr; } }

/* Fleet of vehicles (real makes/models) with residual values. */
.lc-fleet-head { display: grid; grid-template-columns: 1.7fr 0.7fr 1fr; gap: 8px; font-size: 8px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--sub); padding: 0 4px 7px; border-bottom: 1px solid var(--line); }
.lc-fleet-head span:nth-child(n+2) { text-align: right; }
.lc-row { display: grid; grid-template-columns: 1.7fr 0.7fr 1fr; gap: 8px; align-items: center; padding: 8px 4px; border-bottom: 1px solid var(--line); opacity: 1; transform: none; transition: opacity 0.45s ease, transform 0.45s ease; }
.lc-js .lc-row { opacity: 0; transform: translateX(-6px); }
.lc-js.is-live .lc-row { opacity: 1; transform: none; transition-delay: calc(var(--d, 0) * 80ms); }
.lc-nm { font-family: var(--font-display); font-weight: 600; font-size: 11px; color: var(--ink); }
.lc-conf { font-family: var(--font-mono); font-size: 10px; color: var(--sub); text-align: right; }
.lc-val { font-family: var(--font-display); font-weight: 700; font-size: 11px; color: var(--ink); text-align: right; }
.lc-row.is-sel { background: rgba(47, 107, 255, 0.045); border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(47, 107, 255, 0.18); border-bottom-color: transparent; }

/* Residual-value analysis for the selected vehicle. */
.lc-analysis { border: 1px solid var(--line); border-radius: 11px; padding: 12px 13px; background: #fbfcfe; opacity: 1; transform: none; transition: opacity 0.5s ease, transform 0.5s ease; }
.lc-js .lc-analysis { opacity: 0; transform: translateY(10px); }
.lc-js.is-live .lc-analysis { opacity: 1; transform: none; transition-delay: 0.3s; }
.lc-an-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.lc-an-h { font-size: 8px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sub); }
.lc-an-car { font-family: var(--font-display); font-weight: 800; font-size: 12px; color: var(--ink); }
.lc-curve { display: block; width: 100%; height: 88px; margin-top: 10px; }
.lc-grid-l { stroke: #e8eef7; stroke-width: 1; vector-effect: non-scaling-stroke; }
.lc-band { fill: rgba(47, 107, 255, 0.10); }
.lc-line { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.lc-dot { fill: var(--accent); }
.lc-axis { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 8px; color: var(--sub); margin-top: 3px; }
.lc-rvbar { display: flex; justify-content: space-between; align-items: baseline; margin-top: 9px; padding-top: 8px; border-top: 1px solid var(--line); }
.lc-rvbar-l { font-size: 10px; color: var(--sub); }
.lc-rv { font-family: var(--font-display); font-weight: 800; font-size: 15px; color: var(--ink); letter-spacing: -0.01em; }
.lc-rv-c { font-family: var(--font-mono); font-size: 8.5px; color: #15994f; margin-left: 6px; }
.lc-sec { font-size: 8px; letter-spacing: 0.05em; text-transform: uppercase; color: var(--sub); margin: 12px 0 7px; }
.lc-comp { display: flex; justify-content: space-between; gap: 8px; font-size: 9.5px; color: var(--sub); padding: 3px 0; opacity: 1; transform: none; transition: opacity 0.4s ease, transform 0.4s ease; }
.lc-comp b { color: var(--ink); font-weight: 700; }
.lc-js .lc-comp { opacity: 0; transform: translateY(4px); }
.lc-js.is-live .lc-comp { opacity: 1; transform: none; transition-delay: calc(0.5s + var(--d, 0) * 0.1s); }
.lc-equip { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 16px; }
.lc-eq { display: flex; justify-content: space-between; gap: 8px; font-size: 9.5px; color: var(--sub); opacity: 1; transform: none; transition: opacity 0.4s ease, transform 0.4s ease; }
.lc-js .lc-eq { opacity: 0; transform: translateY(4px); }
.lc-js.is-live .lc-eq { opacity: 1; transform: none; transition-delay: calc(0.7s + var(--d, 0) * 0.08s); }
.lc-up { color: #15994f; font-weight: 700; }
.lc-equip-sum { display: flex; justify-content: space-between; align-items: baseline; margin-top: 9px; padding-top: 7px; border-top: 1px dashed var(--line); font-size: 10px; color: var(--ink); font-weight: 600; }

@media (max-width: 700px) { .lc-anim { padding: 15px; } .lc-anim .ds-doc { padding: 14px; } .lc-pnl { font-size: 14px; } }

/* ==========================================================================
   Conversion pass (2026-07-02): price/pilot surfacing, proof, small polish
   ========================================================================== */

/* Small note under hero CTAs (Document Suite price + trial) */
.dv-hero-note { margin: 14px 2px 0; font-size: 13px; color: var(--sub); letter-spacing: 0.01em; }

/* Contact: pilot line under the section heading */
.dv-contact-lede { margin: 16px auto 0; max-width: 54ch; color: var(--sub); font-size: 16px; line-height: 1.6; text-align: center; }

/* Contact card: sub-line under the heading + tighter heading rhythm */
.dv-contact-card h3 { margin-bottom: 8px; }
.dv-form-sub { margin: 0 0 24px; text-align: center; color: var(--sub); font-size: 14px; }

/* KG showcase: measured-accuracy proof line */
.dv-proofline { margin: 26px auto 0; text-align: center; font-size: 14.5px; color: var(--sub); }
.dv-proofline b { color: var(--ink); font-weight: 600; }

/* Customer quote: product-mapping note under the attribution */
.dv-proof-note { margin-top: 14px; font-size: 14px; color: var(--sub); }

/* Small-caps accent labels: darker blue for AA contrast at small sizes */
.dv-hero-eyebrow, .dv-card .dv-kicker { color: var(--accent-press); }

/* Capability/why icons: a touch more presence */
.dv-feat-icon svg { width: 24px; height: 24px; }

/* Landing hero: short scenes fill the stage instead of floating in white */
.dv-scene .da-anim, .dv-scene .lc-anim, .dv-scene .ds-anim--trade { align-items: stretch; }
.dv-scene .da-anim > .ds-doc, .dv-scene .lc-anim > .ds-doc, .dv-scene .ds-anim--trade > .ds-doc { display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; }
.dv-scene .da-anim .da-grid, .dv-scene .ds-anim--trade .tr-grid, .dv-scene .lc-anim .lc-grid { flex: 1 1 auto; min-height: 0; align-content: stretch; grid-auto-rows: 1fr; }
.dv-scene .da-anim .da-main { display: flex; flex-direction: column; justify-content: center; }

/* ----- Leasing showcase: portfolio risk view (static, internals .lr-*) ---- */
.lr-view { padding: 16px; }
.lr-view .ds-doc { padding: 16px 18px 14px; container-type: inline-size; }
.lr-grid { display: grid; grid-template-columns: 1fr; gap: 4px 22px; margin-top: 12px; }
.lr-col { min-width: 0; }
.lr-bar { display: grid; grid-template-columns: 76px 1fr auto; align-items: center; gap: 10px; padding: 4.5px 0; }
.lr-bar-nm { font-size: 11.5px; font-weight: 600; color: var(--ink); }
.lr-bar-track { height: 7px; border-radius: 999px; background: var(--accent-wash); overflow: hidden; }
.lr-bar-track i { display: block; height: 100%; width: var(--w, 50%); border-radius: 999px; background: linear-gradient(90deg, var(--accent), #6f3bff); }
.lr-bar-v { font-family: var(--font-mono); font-size: 10.5px; font-weight: 600; color: var(--ink); }
.lr-fuel { display: flex; height: 9px; border-radius: 999px; overflow: hidden; margin: 2px 0 8px; }
.lr-fuel i { display: block; height: 100%; }
.lr-f1 { background: var(--accent); } .lr-f2 { background: #6f3bff; } .lr-f3 { background: #c7d6f0; }
.lr-leg { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 10px; color: var(--sub); }
.lr-leg i { display: inline-block; width: 7px; height: 7px; border-radius: 2px; margin-right: 5px; }
.lr-mat { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; font-size: 11px; color: var(--sub); padding: 4.5px 0; border-bottom: 1px dashed var(--line); }
.lr-mat:last-child { border-bottom: 0; }
.lr-mat b { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink); }
.lr-flag { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 500; color: #9a3412; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 9px; padding: 8px 10px; margin-top: 12px; }
.lr-flag svg { width: 15px; height: 15px; flex: none; color: #ea7317; }
.lc-pnl.lr-amber { color: #9a3412; }
.lc-live.lr-amber-2 { color: #b45309; }
@container (min-width: 480px) { .lr-grid { grid-template-columns: 1.15fr 1fr; } }
@media (max-width: 700px) { .lr-view { padding: 15px; } .lr-view .ds-doc { padding: 14px; } }

/* ==========================================================================
   Old-page ports (2026-07-02): pricing (.pr-/.pn-), security (.sc-),
   about (.ab-). Shared: centered single-column hero variant .pr-hero.
   ========================================================================== */

/* Centered, single-column hero (pricing, security, about, 404, kg-demo).
   The base .dv-hero-l caps h1/lede width with left-anchored margins; centre
   the capped blocks themselves or the title sits visibly off-centre. */
.dv-hero-panel.pr-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.pr-hero .dv-hero-l { max-width: 780px; }
.pr-hero .dv-hero-l .dv-h1 { max-width: 18ch; margin-left: auto; margin-right: auto; }
.pr-hero .dv-hero-l .dv-lede { margin-left: auto; margin-right: auto; }
.pr-hero .dv-hero-ctas { justify-content: center; }
.pr-hero .dv-hero-note { text-align: center; }

/* Pricing cards */
.pr-grid { display: grid; grid-template-columns: 1fr; gap: 20px; margin-top: 52px; align-items: stretch; }
@media (min-width: 940px) { .pr-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
.pr-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 30px 26px 26px; box-shadow: 0 10px 30px rgba(8, 56, 106, 0.06); display: flex; flex-direction: column; min-width: 0; }
.pr-card--hot { border-color: var(--accent); box-shadow: 0 16px 44px rgba(47, 107, 255, 0.14); }
.pr-tag { position: absolute; top: -12px; left: 24px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; padding: 4px 12px; border-radius: 999px; }
.pr-name { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; line-height: 1.3; }
.pr-price { margin-top: 14px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.pr-price b { font-family: var(--font-display); font-size: 36px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); }
.pr-price span { font-size: 13.5px; color: var(--sub); }
.pr-sub { margin-top: 6px; font-size: 13px; color: var(--sub); }
.pr-card ul { list-style: none; margin: 20px 0 24px; padding: 0; display: grid; gap: 10px; }
.pr-card li { position: relative; padding-left: 26px; font-size: 13.5px; line-height: 1.5; color: var(--sub); }
.pr-card li::before { content: ""; position: absolute; left: 0; top: 3px; width: 15px; height: 15px; background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232f6bff' stroke-width='3'><path d='M5 12l5 5L20 7'/></svg>") center/contain no-repeat; }
.pr-card .dv-btn, .pr-card .dv-btn-outline { margin-top: auto; justify-content: center; text-align: center; }
.pr-fine { margin-top: 20px; text-align: center; font-size: 12.5px; color: var(--faint); }

/* Pilot chips + demo escape hatch */
.pr-chips { display: flex; flex-wrap: wrap; gap: 10px 20px; justify-content: center; margin: 6px 0 8px; }
.pr-chips > span { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--sub); font-weight: 500; }
.pr-chips i { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; }
.pr-democta { text-align: center; font-size: 14px; color: var(--sub); margin-top: 18px; }
.pr-democta a { color: var(--accent-press); font-weight: 600; }

/* Seat-comparison cards */
.pr-vs-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 40px; }
@media (min-width: 900px) { .pr-vs-grid { grid-template-columns: repeat(3, 1fr); } }
.pr-vs { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px; min-width: 0; }
.pr-vs-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.pr-vs-big { font-family: var(--font-display); font-weight: 800; font-size: 21px; color: var(--ink); letter-spacing: -0.01em; display: inline-flex; flex-direction: column; line-height: 1.15; }
.pr-vs-big sub { font-size: 10.5px; font-weight: 500; color: var(--faint); letter-spacing: 0.02em; line-height: 1.4; }
.pr-vs-big--us { color: var(--accent-press); }
.pr-vs-vs { font-size: 11px; color: var(--faint); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 6px; }
.pr-vs p { font-size: 13.5px; line-height: 1.55; color: var(--sub); }
.pr-note { margin-top: 22px; font-size: 12px; color: var(--faint); line-height: 1.55; max-width: 880px; }
.pr-close { margin-top: 20px; font-size: 15.5px; color: var(--ink); font-weight: 500; max-width: 720px; }

/* Deployment-path cards */
.pn-grid { display: grid; grid-template-columns: 1fr; gap: 14px; margin-top: 40px; align-items: stretch; }
@media (min-width: 720px) { .pn-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1280px) { .pn-grid { grid-template-columns: repeat(5, 1fr); } }
.pn-card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 18px; min-width: 0; display: flex; flex-direction: column; }
.pn-card--us { border-color: rgba(47, 107, 255, 0.55); box-shadow: 0 8px 24px rgba(47, 107, 255, 0.10); }
.pn-card h3 { font-family: var(--font-display); font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.3; }
.pn-ex { display: block; margin-top: 5px; font-size: 11px; line-height: 1.45; color: var(--faint); }
.pn-row { margin-top: 12px; }
.pn-tag { display: block; font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--faint); margin-bottom: 3px; }
.pn-txt { display: block; font-size: 12px; line-height: 1.5; color: var(--sub); }
.pn-cost { margin-top: auto; padding-top: 12px; border-top: 1px dashed var(--line); }
.pn-cost .pn-txt { color: var(--ink); font-weight: 600; }

/* Security: posture badges + pillar cards */
.sc-badges { display: grid; grid-template-columns: 1fr; gap: 14px; }
@media (min-width: 700px) { .sc-badges { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1080px) { .sc-badges { grid-template-columns: repeat(4, 1fr); } }
.sc-badge { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 20px; min-width: 0; }
.sc-badge > svg { width: 22px; height: 22px; color: var(--accent-press); }
.sc-badge h3 { margin-top: 10px; font-family: var(--font-display); font-size: 15px; font-weight: 700; color: var(--ink); }
.sc-badge p { margin-top: 6px; font-size: 13px; line-height: 1.5; color: var(--sub); }
#dv-who .sc-badges { margin-top: 52px; }
.sc-pillars { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 46px; }
@media (min-width: 860px) { .sc-pillars { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .sc-pillars { grid-template-columns: repeat(3, 1fr); } }
.sc-pillar { background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 24px; min-width: 0; }
.sc-num { display: block; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-press); margin-bottom: 12px; }
.sc-pillar h3 { font-family: var(--font-display); font-size: 17px; font-weight: 700; color: var(--ink); }
.sc-pillar > p { margin-top: 8px; font-size: 14px; line-height: 1.55; color: var(--sub); }
.sc-pillar ul { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.sc-pillar li { position: relative; padding-left: 20px; font-size: 12.5px; line-height: 1.5; color: var(--sub); }
.sc-pillar li::before { content: ""; position: absolute; left: 0; top: 6px; width: 7px; height: 7px; border-radius: 2px; background: var(--accent-wash); border: 1px solid var(--accent); box-sizing: border-box; }

/* Contact add-ons used by the ported pages */
.dv-reassure-head { text-align: center; margin: 40px 0 -26px; font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.8); position: relative; z-index: 1; }

/* When the contact intro carries a lede line, start the navy panel lower so
   the grey intro text never crosses onto the dark background. */
.dv-contact:has(.dv-contact-lede) .dv-contact-bg { top: 260px; }
@media (max-width: 700px) { .dv-contact:has(.dv-contact-lede) .dv-contact-bg { top: 350px; } }

/* KG live demo: the functional demo keeps its own dark component styling
   (cards, flow diagram and chat are tuned for a dark backdrop, partly drawn
   by JS with fixed colors). Present it inside one deliberate dark app shell
   on the light page instead of restyling the running product. */
.kgd-shell { background: var(--band); border: 1px solid var(--line); border-radius: 24px; padding: clamp(18px, 3.6vw, 44px); }
@media (max-width: 640px) { .kgd-shell { padding: 12px; border-radius: 18px; } }

/* About: person card */
.ab-person { display: flex; gap: 30px; align-items: center; flex-wrap: wrap; background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 30px; margin-top: 34px; box-shadow: 0 10px 30px rgba(8, 56, 106, 0.06); }
.ab-photo { flex: 0 0 168px; width: 168px; height: 168px; border-radius: 14px; object-fit: cover; object-position: center top; border: 1px solid var(--line-2); }
.ab-body { flex: 1 1 320px; min-width: 260px; }
.ab-name { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--ink); }
.ab-role { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-press); margin: 4px 0 14px; }
.ab-bio { color: var(--sub); font-size: 14.5px; line-height: 1.62; max-width: 62ch; }
.ab-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ab-chips span { font-size: 12px; color: var(--ink); background: var(--accent-wash); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 11px; }

/* ==========================================================================
   Mobile animation pass (2026-07-02): phone-sized hero scenes.
   On phones the trading / leasing hero scenes ran to ~850px because the
   analysis sub-card (market analysis / residual-value analysis) stacked
   under the main list, a full extra screen of animation before the first
   content section. On small screens the hero keeps its identity (the
   consolidated book / the fleet list, with the live counters animating)
   and the analysis card stays desktop + mid-page-showcase only.
   ========================================================================== */
@media (max-width: 700px) {
  .dv-hero-r .tr-analysis,
  .dv-hero-r .lc-analysis { display: none; }
}

/* Live-demo pill in the nav: highlighted but secondary to the primary CTA. */
.dv .dv-nav-demo { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; font-size: 13.5px; font-weight: 600; color: var(--accent); background: rgba(13, 89, 242, 0.09); border: 1px solid rgba(13, 89, 242, 0.28); white-space: nowrap; }
.dv .dv-nav-demo:hover { background: rgba(13, 89, 242, 0.15); }
.dv .dv-nav-demo::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); animation: dvDemoPulse 2.2s ease-in-out infinite; }
@keyframes dvDemoPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .dv .dv-nav-demo::before { animation: none; } }
@media (max-width: 1080px) { .dv .dv-nav-demo { display: none; } }