/* ═══════════════════════════════════════════════════════════════
   Zenzo AI — orange theme (modelled on Zenzo_v1/zenzo-ai-website.html)
   Loaded after site.css; overrides colour and surface only — layout,
   type scale and content are unchanged. Remove the <link> to revert.

   Palette from the reference:
     brand   #F97316 → #EA6C0A → #C2570A   (hero, CTA)
     tints   #FFF4ED · #FFFAF5 · #FED7AA · #FDBA74
     neutral #FFFFFF · #FAFAF9 · #E7E5E4 (stone)
     warm dark #1A0A00 → #2D1204           (security)
═══════════════════════════════════════════════════════════════ */
:root {
  --paper: #FFFFFF;
  --bg-s: #FAFAF9;
  --bdr: #E7E5E4;
  --bdr-l: #F0EEEC;
  --warm-1: #FFFAF5;
  --warm-dk: #1A0A00;
  --warm-dk2: #2D1204;
}
body { background: #fff; }

/* ═══ HERO — zenzolabs.com gradient: orange → peach → cream → white ═══
   Exact stops from zenzolabs.com (.hero). The bottom fades into the white page,
   so copy that sits low in the hero uses warm-dark ink instead of white. */
.masthead {
  background:
    linear-gradient(to bottom, rgba(0,0,0,.07) 0%, rgba(0,0,0,.03) 50%, rgba(0,0,0,0) 100%),
    linear-gradient(to bottom, #F97316 0%, #F59E66 45%, #FDDCBB 75%, #FFFFFF 100%);
}
.masthead-bg::before { background: none; }
.masthead-bg::after { content: none; }
.masthead .eyebrow { color: #fff; }
.hero-h1 { color: #fff; text-shadow: 0 1px 24px rgba(154,52,18,.18); }
.hero-h1 em { color: var(--warm-dk); text-shadow: none; }
.hero-lead { color: #3B1A06; }
.hero-trust li { color: #3B1A06; }
.masthead .check { border-color: #EA580C; color: #EA580C; background: rgba(255,255,255,.6); }
/* Hero trust points: a deliberate vertical stack with a distinct icon per promise */
.hero-trust.is-stack { flex-direction: column; flex-wrap: nowrap; gap: 10px; margin-top: 36px; }
.hero-trust.is-stack li { gap: 12px; font-size: 15px; line-height: 1.4; }
.hero-trust .trust-ic { width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: #C2410C; background: rgba(255,255,255,.7); border: 1px solid rgba(234,88,12,.22); }
.hero-trust .trust-ic svg { width: 15px; height: 15px; }
@media (max-width: 768px) { .hero-trust.is-stack { gap: 10px; margin-top: 26px; } .hero-trust.is-stack li { font-size: 14.5px; } }
.masthead .btn-light { background: var(--warm-dk); color: #fff; box-shadow: 0 14px 30px -14px rgba(26,10,0,.55); }
.masthead .btn-light:hover { background: #fff; color: var(--or-dk); }
.masthead .btn-ghost { color: var(--warm-dk); border-color: rgba(26,10,0,.28); background: rgba(255,255,255,.35); }
.masthead .btn-ghost:hover { background: #fff; border-color: var(--warm-dk); }

/* Live demo: the product window stays dark; everything around it goes white & orange */
.masthead .demo { filter: drop-shadow(0 36px 50px rgba(154,52,18,.22)); }
.viz-lines .orbit { stroke: url(#vzOrbit); stroke-width: 1.1; }
.viz-lines .wire { stroke: url(#vzWire); stroke-width: 1.3; }
.viz-lines .dot { fill: #fff; stroke: #FB923C; stroke-width: 1.2; }
.viz-lines .live .wire { stroke: url(#vzLive); stroke-width: 2; }
.viz-lines .live .dot { fill: #F97316; stroke: #fff; stroke-width: 1.5; }
.viz-lines .live .dot-halo { fill: rgba(249,115,22,.22); }
.persona { background: rgba(255,255,255,.92); border-color: #FED7AA; box-shadow: 0 12px 28px -16px rgba(154,52,18,.35); backdrop-filter: blur(8px); }
.persona img { border-color: #FED7AA; }
.persona b { color: var(--t1); }
.persona span { color: var(--t3); }
.persona.on { background: #fff; border-color: var(--or); box-shadow: 0 0 0 4px rgba(249,115,22,.16), 0 18px 40px -14px rgba(234,88,12,.45); }
.persona.on span { color: var(--or-dk); }
.demo-ctrl, .demo-ctrl button { color: #7C2D12; }

/* ═══ Logo strip / explainer ═══ */
.int-row { border-bottom-color: var(--bdr); }
.int-more { color: var(--or-dk); }

/* ═══ THE CHALLENGE — warm wash behind the three columns ═══ */
.ch-wrap::before { background: radial-gradient(50% 50% at 50% 50%, rgba(249,115,22,.07), transparent 70%); }
.ch-num { background: #FFF4ED; border: 1px solid #FED7AA; color: var(--or-dk); }
.ch-result { background: linear-gradient(100deg, #FFFAF5 0%, #FFFFFF 60%); border-color: #F6E3D3; box-shadow: 0 24px 50px -36px rgba(194,87,10,.35); }
.ch-result-ic { background: #FFF4ED; color: var(--or-dk); border: 1px solid #FED7AA; }

/* ═══ HOW ZENZO WORKS — keep the light-orange card, give it depth ═══ */
.hiw { background: linear-gradient(180deg, #FFF4ED 0%, #FFFAF5 100%); border: 1px solid #FED7AA; }

/* ═══ Cards: white on white, warm on hover ═══ */
.eco-card, .uc-panel, .intg-box { box-shadow: 0 1px 2px rgba(28,25,23,.04), 0 18px 40px -34px rgba(28,25,23,.25); }
.eco-card:hover { border-color: #FDBA74; background: linear-gradient(180deg, #FFFAF5, #fff 55%); }
.eco-layer { background: linear-gradient(100deg, var(--warm-dk) 0%, var(--warm-dk2) 100%); }
.eco-card.is-live { background: linear-gradient(180deg, #FFF4ED 0%, #FFFFFF 58%); border-color: #FDBA74; }

/* Use cases: the selected team uses brand orange instead of black */
.uc-tab[aria-selected="true"] { background: var(--or); border-color: var(--or); box-shadow: 0 10px 22px -12px rgba(234,108,10,.7); }
.uc-tab[aria-selected="true"] .uc-ti { background: rgba(255,255,255,.22); color: #fff; }
.uc-tab:hover { border-color: #FDBA74; }
.uc-r { background: linear-gradient(180deg, #FFFAF5, #FAFAF9); }

/* Integrations: warm top wash, orange counters */
.intg-box { background: linear-gradient(180deg, #FFFAF5 0%, #FFFFFF 38%); border-color: #F3E3D6; }
.intg-stats div b { color: var(--or-dk); }
.intg-chips span { background: #fff; border-color: var(--bdr); }

/* ═══ SECURITY — warm dark instead of black ═══ */
.secu { background: linear-gradient(135deg, var(--warm-dk) 0%, var(--warm-dk2) 100%); }
.secu::before { background: radial-gradient(45% 60% at 88% 0%, rgba(249,115,22,.22), transparent 70%), radial-gradient(35% 50% at 0% 100%, rgba(249,115,22,.08), transparent 70%); }

/* ═══ CTA — solid brand orange, white type ═══ */
.cta { background: linear-gradient(120deg, #F97316 0%, #EA6C0A 60%, #C2570A 100%); color: #fff; }
.cta::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='52' height='52'%3E%3Crect x='6' y='6' width='40' height='40' rx='9' fill='white' fill-opacity='.06'/%3E%3C/svg%3E"); background-size: 52px 52px;
  -webkit-mask-image: linear-gradient(90deg, transparent 30%, #000 100%); mask-image: linear-gradient(90deg, transparent 30%, #000 100%); }
.cta .eyebrow { color: #fff; }
.cta h2 { color: #fff; }
.cta h2 em { font-style: normal; color: var(--warm-dk); }
.cta-main p { color: rgba(255,255,255,.92); }
.cta small { color: rgba(255,255,255,.78); }
.cta .btn-dark { background: var(--warm-dk); }
.cta .btn-white { color: var(--or-dk); }
.cta-side .btn-white { align-self: flex-start; margin-top: 22px; }
.cta-side { border-left-color: rgba(255,255,255,.32); }
.cta-side p { color: rgba(255,255,255,.92); }
.btn-line { color: #fff; border-color: rgba(255,255,255,.6); }
.btn-line:hover { background: rgba(255,255,255,.14); border-color: #fff; }

/* nav sits on the white page */
.nav { background: rgba(255,255,255,.86); }
.dots button { background: rgba(124,45,18,.16); }

/* ═══ HERO DEMO — light dashboard, as on zenzolabs.com ═══ */
.viz-lines .dot { stroke-width: 1.5; }
.viz-lines .live .dot-halo { fill: rgba(249,115,22,.2); }

.masthead .app { --line-d: #F0EEEC; background: #fff; border-color: rgba(255,255,255,.9); color: var(--t1);
  box-shadow: 0 0 0 6px rgba(255,255,255,.45), 0 40px 90px -34px rgba(154,52,18,.45), 0 2px 6px rgba(28,25,23,.05); }
.app-bar { background: #FAFAF9; }
.app-user { color: var(--t3); }
.app-user b { color: var(--t1); }
.side { background: #fff; }
.side-brand { color: var(--t1); }
.side li { color: var(--t3); }
.side li svg { color: var(--t4); }
.side li.on { background: #FFF4ED; color: var(--or-dk); }
.side li.on svg { color: var(--or); }
.ask { background: #fff; border-color: #FED7AA; box-shadow: 0 1px 2px rgba(28,25,23,.04); }
.ask.typing { border-color: #FB923C; box-shadow: 0 0 0 3px rgba(249,115,22,.12); }
.ask-q { color: var(--t1); }
.ask-q:empty::before { color: var(--t4); }
.stepper::before { border-top-color: rgba(28,25,23,.16); }
.st { color: var(--t4); }
.st i { background: #fff; border-color: #E7E5E4; color: var(--t4); }
.st.done { color: var(--t2); }
.st.done i { background: #FFF4ED; border-color: #FDBA74; color: var(--or); }
.st.on { color: var(--t1); }
.st.on i { box-shadow: 0 0 0 4px rgba(249,115,22,.16); }
.st-note { color: #92400E; background: #FFFBEB; border-color: #FCD34D; }
.result { background: #fff; border-color: #F0EEEC; box-shadow: 0 1px 3px rgba(28,25,23,.04); }
.kicker { color: var(--t3); }
.conf { color: #15803D; background: #F0FDF4; border-color: #BBF7D0; }
.conf.medium { color: #B45309; background: #FFFBEB; border-color: #FDE68A; }
.result h3 { color: var(--t1); }
.result h3 em { color: var(--or-dk); }
.result h3 em.down { color: #DC2626; }
.result h3 em.up { color: #16A34A; }
.result p { color: var(--t3); }
.result p .cav { color: #B45309; }
.chip.privacy { color: var(--t2); background: #FAFAF9; border-color: #E7E5E4; }
.chip.sql { color: var(--t1); border-color: #D6D3D1; background: #fff; }
.panel { background: #FAFAF9; border-color: #F0EEEC; }
.panel-h { color: var(--t1); }
.pill { color: var(--t3); background: #F0EEEC; }
.skel i { background: linear-gradient(90deg, #F0EEEC, #E7E5E4, #F0EEEC); background-size: 200% 100%; }
.ch-bars li { color: var(--t2); }
.ch-bars .bar { background: #EDEAE7; }
.ch-note { color: var(--t4); }
.ch-table th { color: var(--t4); }
.ch-table td { color: var(--t2); }
.ch-table td b { color: var(--t1); }
.tag { color: var(--or-dk); background: #FFF4ED; }
.ch-svg text { fill: var(--t3); }
.ch-svg .lbl-v { fill: var(--t1); }
.ch-heat .hd { color: var(--t4); }
.ch-heat .rl { color: var(--t2); }
.masked { color: var(--t3); }
.masked code { color: var(--t4); background: #F0EEEC; }
.srcs .ic { box-shadow: inset 0 0 0 1px rgba(28,25,23,.08); }
.srcs .ic.kb { background: #FFF4ED; border-color: #FDBA74; }
.srcs b { color: var(--t1); }
.srcs small { color: var(--t3); }
.srcs small em { color: var(--or-dk); background: #FFF4ED; }
.srcs .ok { color: #16A34A; }
.srcs .cite { border-top-color: rgba(28,25,23,.12); }
.play { color: #7C2D12; }
.play:hover { color: var(--t1); }
@media (max-width: 768px) {
  .chips button { background: rgba(255,255,255,.72); border-color: #FED7AA; color: var(--t2); }
  .chips button.on { background: #fff; border-color: var(--or); color: var(--or-dk); }
}

/* Home heading grammar: neutral eyebrow, dark setup line, accented payoff line (one orange). */
.ds { --accent-text: #EA580C; }
.ds .eyebrow { color: var(--t2); }
.ds .masthead .eyebrow, .ds .cta .eyebrow { color: rgba(255,255,255,.86); }
.ds .secu .eyebrow { color: rgba(255,255,255,.66); }
.ds .ch-h2 em, .ds .sec-h2 em, .ds .hiw h2 em, .ds .ch-result h3 em { color: var(--accent-text); }
.ds .secu .sec-h2 em { color: #FB923C; }
.ds .sec-h2 br { display: inline; }

/* Home visual system: one heading size, two title sizes, two button sizes, one panel radius. */
.ds .hiw h2, .ds .cta h2 { font-size: clamp(36px, 4.2vw, 64px); line-height: 1.06; letter-spacing: -.055em; margin-top: 18px; }
.ds .ch-head h3, .ds .ch-result h3, .ds .secu-item h3 { font-size: 24px; line-height: 1.15; letter-spacing: -.045em; }
.ds .int-label { color: var(--t2); }
.ds .hw-k { font-size: 11px; }
.ds .hiw { --hw-mut: var(--t3); }
.ds .btn-light, .ds .btn-ghost, .ds .btn-dark, .ds .btn-white, .ds .btn-line { box-sizing: border-box; height: 58px; padding: 0 30px; border-radius: 999px; }
.ds .m-actions .btn-m { box-sizing: border-box; height: 48px; padding: 0 22px; font-weight: 400; }
.ds .masthead { border-radius: 30px; }
.ds #integrations { max-width: none; padding: 0; }
.ds .intg-box { margin: 0 18px; padding: 65px 4% 44px; background: linear-gradient(180deg, #FFF4ED 0%, #FFFAF5 100%); border: 1px solid #FED7AA; box-shadow: none; }
/* Radius scale: 6 / 12 / 18 / 30 / pill */
.ds .nav-link, .ds .intg-chips span, .ds .intg-chips i, .ds .dd-side-row.core { border-radius: 6px; }
.ds .prod-icon, .ds .nav-burger, .ds .m-link, .ds .res-icon { border-radius: 12px; }
.ds .prod, .ds .eco-layer, .ds .eco-card, .ds .hiw-core, .ds .dd, .ds .ch-result, .ds .uc-panel, .ds .ex-modal video { border-radius: 18px; }
.ds .dd-foot { border-radius: 0 0 18px 18px; }
.ds .ex-card { border-radius: 30px; }
@media (min-width: 769px) {
  .ds .btn-nav { box-sizing: border-box; height: 48px; padding: 0 22px; }
}
@media (max-width: 768px) {
  .ds .masthead, .ds .intg-box, .ds .ex-card { border-radius: 22px; }
  .ds .intg-box { margin: 0 10px; padding: 36px 20px 32px; }
  .ds .ch-head h3, .ds .ch-result h3, .ds .secu-item h3, .ds .eco-card h3 { font-size: 22px; }
}
@media (max-width: 560px) {
  .ds .hiw h2, .ds .cta h2 { font-size: clamp(36px, 9.5vw, 44px); }
}

/* Eyebrow labels: 12px semibold, #34312E on light and orange backgrounds; 24px to the heading (20px on mobile). */
.ds .eyebrow, .ds .int-label { font-size: 12px; font-weight: 600; letter-spacing: .12em; }
.ds .masthead .eyebrow, .ds .cta .eyebrow { color: var(--t2); }
.ds .hero-h1, .ds .ch-h2, .ds .sec-h2, .ds .hiw h2, .ds .cta h2 { margin-top: 24px; }
.ds .ch-result h3 { margin-top: 12px; }
@media (max-width: 768px) {
  .ds .hero-h1, .ds .ch-h2, .ds .sec-h2, .ds .hiw h2, .ds .cta h2 { margin-top: 20px; }
}

/* ===== Home layout system =====
   --G  content gutter (plain sections and the inside of panels share it)
   --PM panel inset from the viewport edge
   --S  space between sections */
.ds { --G: clamp(24px, 6vw, 96px); --PM: 18px; --S: 120px;
  --card-sh: 0 1px 2px rgba(28,25,23,.04), 0 18px 40px -34px rgba(28,25,23,.25); --ic: #C2570A; }

/* One left/right edge for every section */
.ds .nav-inner, .ds .integrations, .ds .explainer, .ds .challenge, .ds .sec, .ds .sec-rule, .ds .foot-in { padding-left: var(--G); padding-right: var(--G); }
.ds .masthead, .ds .hiw, .ds .intg-box, .ds .secu, .ds .cta { margin-left: var(--PM); margin-right: var(--PM); }
.ds #integrations { max-width: none; padding: 0; }
.ds .hero { max-width: none;
  padding-left: max(calc(var(--G) - var(--PM)), calc((100% + 2 * var(--PM) - var(--max-w)) / 2 + var(--G) - var(--PM)));
  padding-right: max(calc(var(--G) - var(--PM)), calc((100% + 2 * var(--PM) - var(--max-w)) / 2 + var(--G) - var(--PM))); }
.ds .secu, .ds .cta {
  padding-left: max(calc(var(--G) - var(--PM)), calc((100% - var(--max-w)) / 2 + var(--G) - var(--PM)));
  padding-right: max(calc(var(--G) - var(--PM)), calc((100% - var(--max-w)) / 2 + var(--G) - var(--PM))); }
.ds .hiw, .ds .intg-box {
  padding-left: max(calc(var(--G) - var(--PM) - 1px), calc((100% - var(--max-w)) / 2 + var(--G) - var(--PM) - 1px));
  padding-right: max(calc(var(--G) - var(--PM) - 1px), calc((100% - var(--max-w)) / 2 + var(--G) - var(--PM) - 1px)); }
.ds .hiw-in, .ds .secu-in, .ds .cta-in { max-width: none; }
.ds .hiw-top p, .ds .sec-top > p { width: 35%; max-width: 380px; }
.ds .cta-side p { max-width: 380px; }

/* One vertical rhythm: panels pad 72/56, sections sit --S apart, rules only between two plain sections */
.ds .hiw, .ds .intg-box, .ds .secu, .ds .cta { padding-top: 72px; padding-bottom: 56px; }
.ds .sec-rule { margin: calc(var(--S) / 2) auto; }
.ds .challenge + .sec-rule::before, .ds .hiw + .sec-rule::before, .ds #use-cases + .sec-rule::before,
.ds #integrations + .sec-rule::before, .ds .secu + .sec-rule::before { border-top-color: transparent; }
.ds .explainer { padding-bottom: calc(var(--S) / 2); }
.ds .ch-wrap { padding-top: calc(var(--S) / 2); }
.ds .foot { margin-top: calc(var(--S) / 2); }
.ds .sec-top, .ds .intg-box .sec-top, .ds .hiw-top { margin-bottom: 48px; }
.ds .ch-cols { margin-top: 48px; }
.ds .ex-label { margin-bottom: 24px; }

/* In-card labels: one style */
.ds .uc-role, .ds .uc-k, .ds .hw-k, .ds .ch-result .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); }
.ds .eco-layer b { font-size: 11px; font-weight: 600; letter-spacing: .12em; color: rgba(255,255,255,.66); }

/* Icons: 44px rounded tiles for features, one icon colour; circles only for numbers */
.ds .eco-ic, .ds .secu-ic, .ds .hw-ic, .ds .ch-result-ic { width: 44px; height: 44px; border-radius: 12px; }
.ds .eco-ic svg, .ds .secu-ic svg, .ds .hw-ic svg, .ds .ch-result-ic svg { width: 20px; height: 20px; }
.ds .eco-ic, .ds .ch-result-ic, .ds .prod-icon { background: #FFF4ED; border: 1px solid #FED7AA; color: var(--ic); }
.ds .hw-ic { background: #fff; border: 1px solid #FED7AA; color: var(--ic); }
.ds .eco-card.is-live .eco-ic, .ds .prod.is-primary .prod-icon { background: var(--or); border-color: var(--or); color: #fff; }
.ds .secu-ic { color: #FB923C; }
.ds .eco-card li svg, .ds .uc-l li svg { color: var(--ic); }
.ds .uc-l li svg { width: 16px; height: 16px; padding: 0; background: none; margin-top: 4px; }
.ds .check, .ds .masthead .check { width: auto; height: auto; border: 0; border-radius: 0; background: none; color: #EA580C; }
.ds .check svg { width: 15px; height: 15px; }

/* Links: one style */
.ds .eco-link, .ds .intg-foot a, .ds .dd-link { font-size: 14px; font-weight: 500; color: var(--t1); }
.ds .eco-card:hover .eco-link, .ds .intg-foot a:hover, .ds .dd-link:hover { color: var(--or-dk); }

/* Card text */
.ds .ch-col p, .ds .ch-result p, .ds .eco-card > p, .ds .secu-item p { font-size: 15px; }
.ds .secu-item p { color: rgba(255,255,255,.66); }
.ds .eco-card li, .ds .uc-l li { font-size: 14px; }

/* Cards: white, 1px border, one shadow; featured card gets an orange border only */
.ds .ch-result, .ds .eco-card, .ds .eco-card.is-live, .ds .uc-panel, .ds .hiw-core { background: #fff; border: 1px solid var(--bdr); box-shadow: var(--card-sh); }
.ds .eco-card.is-live { border-color: #FDBA74; }
.ds .eco-card:hover { background: #fff; }
.ds .hiw-core { border-color: #FED7AA; }
.ds .ex-card { box-shadow: var(--card-sh); }
.ds .eco-card, .ds .hiw-core { padding: 28px 24px 24px; }
.ds .ch-result { padding: 28px 32px; gap: 28px; }

/* Chips: pills */
.ds .intg-chips span { box-sizing: border-box; height: 36px; padding: 0 14px 0 8px; border-radius: 999px; }
.ds .intg-chips i { width: 20px; height: 20px; border-radius: 50%; }

/* Stats */
.ds .intg-stats div b { font-size: 44px; color: var(--t1); }
.ds .intg-stats b i { font-style: normal; color: var(--accent-text); }

@media (max-width: 768px) {
  .ds { --G: 24px; --PM: 8px; --S: 72px; }
  .ds .hiw, .ds .intg-box, .ds .secu, .ds .cta { padding-top: 48px; padding-bottom: 40px; }
  .ds .sec-top, .ds .intg-box .sec-top, .ds .hiw-top { margin-bottom: 32px; }
  .ds .hiw-top p, .ds .sec-top > p { width: auto; max-width: none; }
  .ds .ch-cols { margin-top: 32px; }
  .ds .intg-stats div b { font-size: 36px; }
}

/* Headings break into even lines instead of leaving one word behind */
.ds .hero-h1, .ds main h2, .ds .ch-result h3 { text-wrap: balance; }
.ds .intg-foot a { padding: 11px 0; }

/* ===== Mobile fixes ===== */
@media (max-width: 768px) {
  /* Hero demo bleeds to the panel edge; its chips, window and controls start on the gutter */
  .ds .hero .demo { margin-left: calc(var(--PM) - var(--G)); margin-right: calc(var(--PM) - var(--G)); }
  .ds .viz, .ds .demo-ctrl { padding-left: calc(var(--G) - var(--PM)); padding-right: calc(var(--G) - var(--PM)); }
  .ds .chips { padding-left: calc(var(--G) - var(--PM)); padding-right: calc(var(--G) - var(--PM)); scroll-padding-inline: calc(var(--G) - var(--PM)); }
  /* Buttons: one large size, 15px text, full width */
  .ds .btn-light, .ds .btn-ghost, .ds .btn-dark, .ds .btn-white, .ds .btn-line { height: 52px; padding: 0 22px; font-size: 15px; }
  .ds .btn-line { align-self: stretch; justify-content: center; }
  .ds .btn-nav { box-sizing: border-box; height: 40px; padding: 0 16px; }
  /* Logo strip: left-aligned like every other label, logos on a tidy grid */
  .ds .int-label { text-align: left; }
  .ds .int-logos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 12px; justify-items: center; }
  /* Stats on an even 2-column grid */
  .ds .intg-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
  /* Comfortable tap targets */
  .ds .hiw-ctrl button.n { width: 40px; height: 40px; font-size: 13px; }
  .ds .hiw-ctrl .pp, .ds .play { min-height: 40px; padding: 0 8px; }
  .ds .ch-result { padding: 24px; }
}

/* Desktop: menus centred in the viewport so none open off-screen at any zoom/width */
@media (min-width: 769px) {
  .ds .nav-item { position: static; }
  .ds .dd { max-width: calc(100vw - 32px); }
}

/* ═══ Motion layer (home only) ═══
   html.mo is set in <head> unless the visitor prefers reduced motion; without it everything renders static.
   Reveals use the individual `translate`/`scale` properties so they never fight existing `transform`s. */
.ds { --mo-ease: cubic-bezier(.2,.7,.2,1); }
@keyframes moUp { from { opacity: 0; translate: 0 12px; } }
@keyframes moSweep { from { background-position: 100% 0; } }

/* Hero: plays on load and is fully readable within ~300ms */
.mo .ds .hero-copy > * { animation: moUp .5s var(--mo-ease) both; }
.mo .ds .hero-copy > :nth-child(2) { animation-delay: .04s; }
.mo .ds .hero-copy > :nth-child(3) { animation-delay: .1s; }
.mo .ds .hero-copy > :nth-child(4) { animation-delay: .16s; }
.mo .ds .hero-copy > :nth-child(n+5) { animation-delay: .22s; }

/* Highlight sweep — hero and final CTA only */
.mo .ds .hero-h1 em, .mo .ds .cta h2 em {
  background: linear-gradient(90deg, var(--warm-dk) 46%, color-mix(in srgb, var(--warm-dk) 22%, transparent) 54%) 0 0 / 220% 100% no-repeat;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.mo .ds .hero-h1 em { animation: moSweep .8s .28s var(--mo-ease) both; }
.mo .ds .cta h2.rv em { background-position: 100% 0; }
.mo .ds .cta h2.rv.in em { background-position: 0 0; }
.mo .ds .cta h2.in em { animation: moSweep .8s .3s var(--mo-ease) both; }

/* Scroll reveal: content settles in once, staggered via --d */
.mo .ds .rv {
  opacity: 0; translate: 0 16px;
  transition: opacity .6s var(--mo-ease) var(--d, 0s), translate .6s var(--mo-ease) var(--d, 0s),
              border-color .2s, box-shadow .2s, transform .2s var(--mo-ease), background-color .2s;
}
.mo .ds .rv.in { opacity: 1; translate: none; }
/* Headings: line 1 first, the accent line lands ~200ms later */
.mo .ds .rv-h em { opacity: 0; position: relative; top: .28em; transition: opacity .6s var(--mo-ease), top .6s var(--mo-ease); transition-delay: calc(var(--d, 0s) + .2s); }
.mo .ds .rv-h.in em { opacity: 1; top: 0; }
.mo .ds .cta h2.rv-h em { opacity: 1; top: 0; }

/* Challenge: scattered sources drift into place, then the questions pop */
.mo .ds .ill .cd, .mo .ds .ill .qbub, .mo .ds .ill .ill-dot, .mo .ds .ill .wires {
  transition: opacity .7s var(--mo-ease) var(--d, 0s), translate .9s var(--mo-ease) var(--d, 0s), rotate .9s var(--mo-ease) var(--d, 0s), scale .45s cubic-bezier(.34,1.56,.64,1) var(--d, 0s);
}
.mo .ds .ill:not(.in) .cd { opacity: 0; translate: var(--dx, 0) var(--dy, 14px); rotate: var(--dr, 0deg); }
.mo .ds .ill:not(.in) .qbub, .mo .ds .ill:not(.in) .ill-dot, .mo .ds .ill:not(.in) .cd.q .qi { opacity: 0; scale: .3; }
.mo .ds .ill .cd.q .qi { transition: opacity .3s var(--d, 0s), scale .45s cubic-bezier(.34,1.56,.64,1) var(--d, 0s); }
.mo .ds .ill:not(.in) .wires { opacity: 0; }

/* Use cases: panel crossfade + source chips stagger on tab change */
@keyframes moPanel { from { opacity: 0; translate: 0 8px; } }
@keyframes moChip { from { opacity: 0; scale: .92; } }
.mo .ds .uc-panel { animation: moPanel .35s var(--mo-ease) backwards; }
.mo .ds .uc-panel .uc-src > span, .mo .ds .uc-panel .uc-out > div { animation: moChip .3s var(--mo-ease) backwards; }
.mo .ds .uc-panel :is(.uc-src > span, .uc-out > div):nth-child(2) { animation-delay: .05s; }
.mo .ds .uc-panel :is(.uc-src > span, .uc-out > div):nth-child(3) { animation-delay: .1s; }
.mo .ds .uc-panel :is(.uc-src > span, .uc-out > div):nth-child(n+4) { animation-delay: .15s; }

/* Stats: the "+" lands after the count finishes */
.mo .ds .intg-stats b i { transition: opacity .3s, scale .4s cubic-bezier(.34,1.56,.64,1); }
.mo .ds .intg-stats b.counting i { opacity: 0; scale: .4; }

/* Product cards: the icon tile fills and the arrow nudges on hover (motion or not) */
.ds .eco-ic, .ds .eco-link svg { transition: background-color .2s, border-color .2s, color .2s, translate .2s var(--mo-ease); }
.ds .eco-card:not(.is-soon):hover .eco-ic:not(.pm) { background: var(--or); border-color: var(--or); color: #fff; }
.ds .eco-card:hover .eco-ic.pm { translate: 0 -2px; }
.ds .eco-card:hover .eco-link svg { translate: 3px 0; }

/* ═══════════════════════════════════════════════════════════════
   Internal pages (products, solutions): the same system mapped onto their components.
   Everything above that is scoped to .ds already applies; this block covers what only these pages use.
═══════════════════════════════════════════════════════════════ */

/* Hero on the orange gradient: same type size as home, dark-ink breadcrumbs and badges */
.ds .p-hero .hero-h1 { font-size: clamp(46px, 4.7vw, 78px); }
.ds .crumbs { color: rgba(26,10,0,.62); }
.ds .crumbs a:hover { color: var(--warm-dk); }
.ds .crumbs [aria-current] { color: var(--warm-dk); }
.ds .hero-tag .badge-dark, .ds .hero-tag .badge-dark-early { color: var(--warm-dk); background: rgba(255,255,255,.6); border-color: rgba(255,255,255,.85); }
.ds .p-note { background: rgba(255,255,255,.62); border-color: #FDBA74; color: #3B1A06; }
.ds .p-note b { color: var(--warm-dk); }

/* Hero preview window: light, like the home demo app */
.ds .pv { --line-d: #F0EEEC; }
.ds .pv::before { background: radial-gradient(50% 50% at 50% 50%, rgba(154,52,18,.22), transparent 70%); }
.ds .pv-win { background: #fff; border-color: rgba(255,255,255,.9); color: var(--t1);
  box-shadow: 0 0 0 6px rgba(255,255,255,.45), 0 40px 90px -34px rgba(154,52,18,.45), 0 2px 6px rgba(28,25,23,.05); }
.ds .pv-bar { background: #FAFAF9; color: var(--t3); }
.ds .pv-bar b { color: var(--t1); }
.ds .pv-q { background: #fff; border-color: #FED7AA; color: var(--t1); box-shadow: 0 1px 2px rgba(28,25,23,.04); }
.ds .pv-card, .ds .pv-kpi, .ds .pv-cite div, .ds .pv-node { background: #fff; border-color: #F0EEEC; }
.ds .pv-k, .ds .pv-kpi small, .ds .pv-cite small, .ds .pv-node small { color: var(--t3); }
.ds .pv-h, .ds .pv-kpi b, .ds .pv-cite b, .ds .pv-node b { color: var(--t1); }
.ds .pv-h em { color: var(--or-dk); }
.ds .pv-p, .ds .pv-node { color: var(--t2); }
.ds .pv-chip { color: var(--t2); background: #FAFAF9; border-color: #E7E5E4; }
.ds .pv-chip.ok { color: #15803D; background: #F0FDF4; border-color: #BBF7D0; }
.ds .pv-chip.warn { color: #B45309; background: #FFFBEB; border-color: #FDE68A; }
.ds .pv-bars div { color: var(--t2); }
.ds .pv-bars span.b { background: #EDEAE7; }
.ds .pv-kpi em { color: #16A34A; }
.ds .pv-kpi em.d { color: #DC2626; }
.ds .pv-cite .n, .ds .pv-sup, .ds .pv-node .ic { background: #FFF4ED; color: var(--or-dk); }
.ds .pv-tag { color: #FDBA74; background: var(--warm-dk); border-color: var(--warm-dk); }

/* Logo strip: on the page gutter */
.ds .p-strip { max-width: var(--max-w); padding: 40px var(--G) 0; }
.ds .p-strip .int-label { margin-bottom: 20px; }

/* Cards: white, 1px border, one shadow, 18px radius; large panels 30px */
.ds .p-prob article, .ds .p-feat article, .ds .p-uc article, .ds .p-road article, .ds .s-rhythm .card,
.ds .s-proof article, .ds .s-fit a, .ds .s-hub a, .ds .p-table {
  background: #fff; border: 1px solid var(--bdr); border-radius: 18px; box-shadow: var(--card-sh); }
.ds .p-row, .ds .p-example, .ds .p-tools { border: 1px solid var(--bdr); border-radius: 30px; box-shadow: var(--card-sh); }
.ds .p-road article.now { border-color: #BBF7D0; }
.ds .s-fit a.is-lead { background: #fff; border-color: #FDBA74; }
.ds .s-hub a.more { background: linear-gradient(100deg, var(--warm-dk) 0%, var(--warm-dk2) 100%); border-color: var(--warm-dk); }
.ds .p-feat article:hover, .ds .s-proof article:hover, .ds .s-fit a:hover, .ds .s-hub a:hover { border-color: #FDBA74; box-shadow: 0 20px 40px -26px rgba(234,88,12,.35); }
.ds .p-prob article, .ds .p-feat article, .ds .p-road article, .ds .s-proof article { padding: 28px 24px 24px; }
.ds .p-uc article, .ds .s-fit a { padding: 24px; }

/* Titles: 24px for card titles, 20px for quoted questions */
.ds .p-prob h3, .ds .p-feat h3, .ds .p-road h3, .ds .p-steps h3, .ds .s-fit h3 { font-size: 24px; line-height: 1.15; letter-spacing: -.045em; }
.ds .p-uc q, .ds .s-rhythm q, .ds .s-proof h3, .ds .s-hub h3 { font-size: 20px; line-height: 1.25; letter-spacing: -.035em; }
.ds .p-row h3 { font-size: clamp(30px, 2.8vw, 40px); line-height: 1.1; letter-spacing: -.05em; }

/* Card text */
.ds .p-prob p, .ds .p-feat p, .ds .s-proof p, .ds .s-fit p, .ds .p-row li { font-size: 15px; }
.ds .p-uc p, .ds .p-road li, .ds .p-road > article > p, .ds .s-hub q, .ds .s-rhythm p { font-size: 14px; }

/* Icons: 44px tiles, one icon colour */
.ds .p-feat .ic, .ds .s-hub .ic, .ds .s-fit .prod-icon { width: 44px; height: 44px; border-radius: 12px; background: #FFF4ED; border: 1px solid #FED7AA; color: var(--ic); }
.ds .p-feat .ic svg, .ds .s-hub .ic svg, .ds .s-fit .prod-icon svg { width: 20px; height: 20px; }
.ds .s-fit a.is-lead .prod-icon { background: var(--or); border-color: var(--or); color: #fff; }
.ds .s-hub a.more .ic { background: rgba(249,115,22,.14); border-color: rgba(249,115,22,.4); color: #FB923C; }
.ds .p-uc .tm span { border-radius: 12px; background: #FFF4ED; border: 1px solid #FED7AA; color: var(--ic); }
.ds .p-row li svg { width: 16px; height: 16px; padding: 0; border-radius: 0; background: none; color: var(--ic); margin-top: 4px; }
.ds .s-rhythm .when svg, .ds .s-rel a svg { color: var(--ic); }

/* Number labels: the home circle chip */
.ds .p-prob .n, .ds .p-steps .n { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%;
  background: #FFF4ED; border: 1px solid #FED7AA; color: var(--or-dk); font-size: 12px; font-weight: 600; }
.ds .p-steps li::before { display: none; }
.ds .p-steps li { padding-top: 28px; }

/* In-card labels: one style */
.ds .s-proof .k, .ds .s-rel-group .k, .ds .s-rhythm p b, .ds .lv-k, .ds .p-table th, .ds .p-example blockquote::before {
  font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--t3); }
.ds .s-rhythm .when { font-size: 11px; font-weight: 600; letter-spacing: .12em; color: var(--t2); border-color: #FED7AA; }

/* Links: one style */
.ds .s-fit .go, .ds .s-hub .go { font-size: 14px; font-weight: 500; color: var(--t1); }
.ds .s-fit a:hover .go, .ds .s-hub a:hover .go { color: var(--or-dk); }
.ds .s-hub a.more .go { color: #fff; }
.ds .s-hub a.more:hover .go { color: #FDBA74; }

/* Chips: pills, as on home */
.ds .s-rel a { height: 40px; box-sizing: border-box; padding: 0 16px; border-radius: 999px; }
.ds .s-proof .intg-chips span { height: 30px; font-size: 12px; padding: 0 10px 0 6px; }
.ds .s-proof .intg-chips i { width: 18px; height: 18px; }

/* FAQ */
.ds .faq-list summary svg { color: var(--ic); }
.ds .faq-list summary:hover { color: var(--or-dk); }
.ds .p-faq .sec-top > p { width: auto; max-width: 380px; margin-top: 24px; }

/* Rhythm: dividers next to the panels, as on home */
.ds .sec-rule:has(+ .secu), .ds .sec-rule:has(+ .cta), .ds .secu + .sec-rule { visibility: hidden; }
.ds .p-hero + .p-strip + .sec-rule { margin-top: calc(var(--S) / 2); }

/* Tables and code stay readable on small screens */
.ds .lv-code, .ds .pv-code { max-width: 100%; }

@media (max-width: 1080px) {
  .ds .p-row, .ds .p-example { padding: 40px calc(var(--G) - var(--PM)); }
}
@media (max-width: 768px) {
  .ds .p-strip { padding: 32px var(--G) 0; }
  .ds .p-prob h3, .ds .p-feat h3, .ds .p-road h3, .ds .p-steps h3, .ds .s-fit h3 { font-size: 22px; }
  .ds .p-uc q, .ds .s-rhythm q, .ds .s-proof h3, .ds .s-hub h3 { font-size: 19px; }
  .ds .p-row, .ds .p-example, .ds .p-tools { border-radius: 22px; padding: 28px 20px; }
  .ds .p-prob article, .ds .p-feat article, .ds .p-road article, .ds .s-proof article, .ds .p-uc article, .ds .s-fit a { padding: 24px 20px; }
  .ds .p-table tr { padding: 18px 20px; }
  .ds .p-steps li, .ds .p-steps li + li { padding-top: 24px; }
  .ds .s-rel a { height: 44px; }
  .ds .hero-tag { row-gap: 8px; }
  /* Hero and CTA buttons always stack full width, as on home */
  .ds .hero-ctas a, .ds .cta-btns a { flex: 1 1 100%; justify-content: center; }
}

/* ═══ Product marks: one full-colour app-icon family (Analyst, BI, Knowledge, Brain) ═══
   The tile is part of the mark, so the containers drop their own tile styling. */
.ds .pm, .ds .eco-card.is-live .eco-ic.pm, .ds .prod.is-primary .prod-icon.pm, .ds .s-fit .prod-icon.pm, .ds .s-fit a.is-lead .prod-icon.pm {
  flex: none; background: none; border: 0; padding: 0; color: inherit; box-shadow: 0 6px 14px -8px rgba(154,52,18,.55); }
.ds .pm svg, .ds .s-fit .prod-icon.pm svg { width: 100%; height: 100%; display: block; }
.ds .prod-icon.pm { width: 36px; height: 36px; border-radius: 10px; }
.ds .m-link .prod-icon.pm { width: 32px; height: 32px; border-radius: 9px; }
.ds .eco-ic.pm, .ds .s-fit .prod-icon.pm { width: 48px; height: 48px; border-radius: 13px; }
.ds .hero-pm { display: inline-flex; width: 30px; height: 30px; border-radius: 8px; box-shadow: 0 0 0 2px rgba(255,255,255,.75), 0 6px 14px -8px rgba(26,10,0,.6); }
.ds .hero-pm svg { width: 100%; height: 100%; }
.ds .hero-tag { gap: 10px; }

/* Integration chips: generic formats (Email, CSV, JSON…) use a neutral tile with a line icon; brands use their own logo */
.ds :is(.intg-chips, .uc-src, .pv-chip) i.g { background: #F5F4F2; border: 1px solid var(--bdr); color: var(--t2); }
.ds :is(.intg-chips, .uc-src, .pv-chip) i.g svg { width: 11px; height: 11px; }
.ds :is(.uc-src, .pv-chip) i.f { background: #fff; border: 1px solid var(--bdr-l); }

/* Footer: five link columns (Products, Solutions, Comparisons, Resources, Company) */
.ds .foot-top { grid-template-columns: minmax(0, 2.4fr) repeat(5, minmax(0, 1fr)); gap: 24px; }
.ds .foot-col ul { gap: 9px; }
@media (max-width: 1240px) { .ds .foot-top { grid-template-columns: repeat(5, minmax(0, 1fr)); } .ds .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 900px) { .ds .foot-top { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) { .ds .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; } }
/* Footer column titles are h2 (the footer is its own landmark) styled as the old h4 */
.foot-col .foot-h { font-size: 15px; font-weight: 500; letter-spacing: 0; line-height: 1.4; color: #fff; margin: 0 0 14px; }
/* Product pages: wide sample tables scroll inside their panel on small phones */
.ds .p-row-v .lv { overflow-x: auto; }

/* ═══ Spacing consistency (all pages) ═══
   Card title (22–24px) → description: 8px everywhere. Larger titles keep larger gaps (12px, 14px).
   Small label → value pairs: 6px. Multi-line questions and answer lines: line-height 1.4. */
.ds .eco-card > p, .ds .p-road > article > p, .ds .p-prob p, .ds .ch-head p { margin-top: 8px; }
.ds .faq-list summary { line-height: 1.4; }
.ds .pv-h { line-height: 1.4; }
.ds .hiw-core h3 + p { margin-top: 8px; }
/* Hero demo answer card: same title → text rhythm as the product previews */
.ds .result h3 { line-height: 1.4; }
.ds .result p { margin-top: 6px; line-height: 1.5; }

/* ═══ Products dropdown: one product per row + layered platform panel ═══ */
.ds .dd-products { grid-template-columns: 1fr 272px; }
.ds .dd-products-main, .ds .dd-side { padding: 22px 16px 16px; }
.ds .dd-side { padding-left: 22px; padding-right: 22px; }
.ds .dd-side .dd-kicker { margin-left: 0; }
.ds .prod-grid { grid-template-columns: 1fr; gap: 2px; }
.ds .prod { align-items: center; gap: 14px; padding: 12px; border-radius: 12px; }
.ds .prod-body { flex: 1; min-width: 0; }
.ds .prod-name { display: block; margin-bottom: 2px; white-space: nowrap; }
.ds .prod-desc { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds .prod > .badge { flex: none; }
.ds .dd-stack { display: grid; gap: 6px; }
.ds .dd-layer { display: flex; gap: 4px; padding: 6px; background: #fff; border: 1px solid var(--bdr); border-radius: 10px; }
.ds .dd-layer span { flex: auto; text-align: center; white-space: nowrap; font-size: 11px; font-weight: 500; color: var(--t2); background: var(--bg-s); border-radius: 6px; padding: 5px 6px; }
.ds .dd-layer.core { justify-content: center; align-items: center; gap: 8px; padding: 10px 8px; background: var(--warm-dk); border-color: var(--warm-dk); color: #fff; font-size: 12px; font-weight: 600; white-space: nowrap; }
.ds .dd-layer.core::before { content: ''; width: 6px; height: 6px; border-radius: 2px; background: var(--or); }
.ds .dd-side-text { margin: 14px 0 0; font-size: 13px; line-height: 1.5; text-wrap: balance; }
.ds .dd-side .dd-link { margin-top: auto; padding-top: 14px; }
.ds .nav-actions a { white-space: nowrap; }
.ds .nav .logo { flex: none; }
.ds .nav .logo img { max-width: none; }
/* Narrow tablets: keep the full header on one line until the burger takes over at 768px */
@media (min-width: 769px) and (max-width: 960px) {
  .ds .nav-menu { gap: 0; }
  .ds .nav-link { padding-left: 8px; padding-right: 8px; }
  .ds .nav-signin { padding: 0 16px; font-size: 14px; }
  .ds .btn-nav { padding: 11px 16px; font-size: 14px; }
}
@media (min-width: 769px) and (max-width: 860px) { .ds .btn-nav svg { display: none; } }
/* Talk to Sales drops out of the bar where it would push the header off one line */
@media (min-width: 769px) and (max-width: 1000px) { .ds .nav-sales { display: none; } }

/* footer: six link columns now that Trust & Legal has its own */
.ds .foot-top { grid-template-columns: minmax(0, 1.9fr) repeat(6, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 1240px) { .ds .foot-top { grid-template-columns: repeat(6, minmax(0, 1fr)); } .ds .foot-brand { grid-column: 1 / -1; } }
@media (max-width: 900px) { .ds .foot-top { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 768px) { .ds .foot-top { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px 24px; } }