/* ==========================================================================
   Homepage stylesheet: components used only by index.html.
   Loads after header.css and site.css, which hold everything shared with
   the other pages (fonts, typography, buttons, sections, motion, footer).
   ========================================================================== */

/* ---- Product screenshots ---- */
    .scr { background: #ffffff; border: 1px solid #d9dfe1; border-radius: 10px; overflow: hidden; box-shadow: 0 30px 60px -30px rgba(0,37,51,0.45), 0 2px 6px rgba(0,37,51,0.08); font-size: 12px; color: #2a404d; }
    .scr-bar { height: 40px; display: flex; align-items: center; gap: 8px; padding: 0 14px; border-bottom: 1px solid #e6eaec; background: #f6f8f8; }
    .dot { width: 9px; height: 9px; border-radius: 50%; background: #d3dadd; }
    .crumb { font-size: 12px; color: #6a7b84; margin-left: 8px; }
    .tbl { width: 100%; border-collapse: collapse; }
    .tbl th { text-align: left; font-weight: 600; font-size: 11px; color: #6a7b84; padding: 8px 10px; border-bottom: 1px solid #e6eaec; background: #fbfcfc; }
    .tbl td { padding: 8px 10px; border-bottom: 1px solid #eef1f2; white-space: nowrap; }
    .pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; }
    .pill-ok { background: #e0f7f4; color: #007d70; } .pill-warn { background: #fff0e0; color: #b85a00; } .pill-fix { background: #e8f0f4; color: #2a404d; }
    .bubble { border-radius: 10px; padding: 10px 12px; font-size: 12.5px; line-height: 1.45; max-width: 92%; }

/* ---- Built for photos ---- */
    .who-photo { width: 100%; height: 300px; object-fit: cover; border-radius: 8px; display: block; }

/* ---- Hero chromatogram ---- */
    #trace { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
    .scrim { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(85,217,204,.96) 0%, rgba(85,217,204,.9) 42%, rgba(85,217,204,.35) 58%, rgba(85,217,204,0) 72%), linear-gradient(180deg, rgba(85,217,204,.85) 0%, rgba(85,217,204,0) 55%); }
    /* Single column: the copy spans the full width, so the trace moves out from
       behind it into a readout strip at the foot of the hero. !important beats
       the hero's inline styles. */
    @media (max-width: 960px) {
      #trace { top: auto; height: 240px; }
      .scrim { display: none; }
      .hero { padding-bottom: 176px; }
      .hero > .wrap { min-height: 0 !important; padding-top: 148px !important; }
      .hero > .wrap > div { padding-bottom: 40px !important; }
    }
    .hero-visual { opacity: 0; transform: translateY(30px); animation: rise 1.1s cubic-bezier(.22,1,.36,1) .55s forwards; }

    @media (max-width: 1100px) { .hero-visual { transform: scale(.82); transform-origin: top left; } }
    @media (max-width: 960px) {
      .hero-visual { display: none; }
      .scr { overflow-x: auto; }
      .who-photo { height: 240px; }
    }
    @media (max-width: 600px) {
      .scr > div[style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
      .scr > div > div[style*="border-left"] { border-left: 0 !important; border-top: 1px solid #e6eaec; }
    }
    @media (prefers-reduced-motion: reduce) {
      .hero-visual { animation: none; opacity: 1; transform: none; }
    }

    /* ---- step 01: application view ---- */
    .app { display: grid; grid-template-columns: 42px minmax(0, 1fr) minmax(0, 1.06fr); min-height: 380px; font-size: 10.5px; line-height: 1.5; color: #33444b; background: #fff; }
    .app svg { display: block; }
    .app-rail { border-right: 1px solid #e6eaec; background: #fff; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 10px 0; }
    .app-rail .mark { width: 27px; height: 13px; overflow: hidden; display: block; margin-bottom: 6px; }
    .app-rail .mark img { width: 103px; max-width: none; height: auto; display: block; }
    .ric { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; color: #9aabb1; }
    .ric-on { background: #d6f2ec; color: #00786c; }
    .app-main { background: #f7f8f7; display: flex; flex-direction: column; min-width: 0; }
    .app-bar { height: 32px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 10px; background: #fff; border-bottom: 1px solid #e6eaec; }
    .app-bar .ibtn { width: 19px; height: 19px; border: 1px solid #d9dfe1; border-radius: 5px; display: grid; place-items: center; color: #6a7b84; flex: none; }
    .app-bar .ic { color: #9aabb1; display: grid; place-items: center; }
    .app-bar .sp { flex: 1; }
    .app-bar .avatar { height: 19px; padding: 0 7px; border: 1px solid #9eddd3; border-radius: 5px; display: grid; place-items: center; font-family: 'Red Hat Mono', monospace; font-size: 9px; font-weight: 600; color: #00786c; background: #e9faf6; }
    .app-scroll { padding: 10px; display: flex; flex-direction: column; gap: 9px; min-width: 0; overflow: hidden; }
    .acard { background: #fff; border: 1px solid #e9ecea; border-radius: 10px; padding: 10px 11px; display: flex; flex-direction: column; gap: 7px; }
    .ds-top { display: flex; align-items: center; gap: 7px; color: #8a9aa1; flex-wrap: wrap; }
    .ds-top b { font-size: 12.5px; font-weight: 800; letter-spacing: -0.02em; color: #002533; }
    .ds-raw { border: 1px solid #e3e7e5; border-radius: 5px; padding: 1px 6px; font-family: 'Red Hat Mono', monospace; font-size: 8.5px; color: #6a7b84; }
    .ds-meta { font-family: 'Red Hat Mono', monospace; font-size: 9.5px; color: #5c7079; }
    .ds-meta b { color: #002533; font-weight: 600; }
    .cp-head { display: flex; align-items: center; gap: 7px; }
    .cp-head b { font-size: 11.5px; font-weight: 800; letter-spacing: -0.015em; color: #002533; }
    .cp-search { flex: 1; min-width: 0; height: 22px; border: 1px solid #e3e7e5; border-radius: 6px; display: flex; align-items: center; gap: 5px; padding: 0 7px; color: #9aabb1; font-size: 9.5px; overflow: hidden; white-space: nowrap; }
    .cp-count { font-family: 'Red Hat Mono', monospace; font-size: 9px; color: #9aabb1; white-space: nowrap; }
    .cp-row { display: flex; flex-direction: column; gap: 6px; padding: 9px 0; border-top: 1px solid #eef1ef; }
    .cp-row:first-of-type { border-top: 0; padding-top: 3px; }
    .cp-name { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
    .cp-name b { font-size: 11px; font-weight: 700; color: #002533; }
    .cp-line { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
    .na { border: 1px solid #e3e7e5; border-radius: 4px; padding: 1px 6px; font-family: 'Red Hat Mono', monospace; font-size: 8.5px; color: #8a9aa1; white-space: nowrap; }
    .na b { color: #002533; font-weight: 600; }
    .btype { border-radius: 4px; padding: 2px 7px; font-family: 'Red Hat Mono', monospace; font-size: 9px; background: #f0f2f0; color: #4a5c63; white-space: nowrap; }
    .uniq { font-family: 'Red Hat Mono', monospace; font-size: 9px; color: #8a9aa1; }
    .vals { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
    .vchip { background: #f0f2f0; border-radius: 4px; padding: 2px 7px; font-family: 'Red Hat Mono', monospace; font-size: 9px; color: #3d4f56; white-space: nowrap; }
    .vchip-out { background: #fff; border: 1px solid #9addd1; color: #00786c; }
    .app-chat { border-left: 1px solid #e6eaec; background: #fff; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
    .chat-bar { height: 32px; flex: none; display: flex; align-items: center; gap: 7px; padding: 0 11px; border-bottom: 1px solid #e6eaec; }
    .chat-bar i { width: 6px; height: 6px; border-radius: 50%; background: #00cab7; flex: none; }
    .chat-bar b { font-size: 11.5px; font-weight: 700; color: #002533; }
    .chat-bar .sp { flex: 1; }
    .chat-bar .ic { color: #9aabb1; }
    .chat-crumb { display: flex; align-items: center; gap: 7px; padding: 7px 11px; border-bottom: 1px solid #e6eaec; color: #5c7079; font-size: 9.5px; min-width: 0; }
    .chat-crumb .nm { color: #002533; font-weight: 600; }
    .chat-crumb .sp { flex: 1; }
    .chat-body { padding: 10px; display: flex; flex-direction: column; gap: 9px; flex: 1; min-height: 0; }
    .pa { background: #e7f8f4; border: 1px solid #a9e3d9; border-radius: 10px; padding: 9px; display: flex; flex-direction: column; gap: 9px; }
    .pa-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
    .pa-head .lbl { display: flex; align-items: center; gap: 6px; font-family: 'Red Hat Mono', monospace; font-size: 9px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #00695e; }
    .pa-head .clip { width: 11px; height: 6px; overflow: hidden; display: block; }
    .pa-head .clip img { width: 42px; max-width: none; height: auto; display: block; }
    .pa-btns { margin-left: auto; display: flex; gap: 6px; }
    .pa-btn { height: 22px; padding: 0 9px; border-radius: 6px; display: inline-flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; white-space: nowrap; }
    .pa-reject { background: #fff; border: 1px solid #cde3df; color: #3d4f56; }
    .pa-approve { background: #0b7a6d; color: #fff; }
    .pa-card { background: #fff; border-radius: 8px; padding: 10px; display: flex; flex-direction: column; gap: 7px; }
    .pa-card .lbl { font-family: 'Red Hat Mono', monospace; font-size: 8.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #9aabb1; }
    .pa-file { display: flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 600; color: #002533; }
    .pa-card ol { margin: 0; padding-left: 14px; display: flex; flex-direction: column; gap: 8px; list-style: decimal; }
    .pa-card ol > li { font-size: 9.5px; line-height: 1.45; color: #5c7079; }
    .pa-card ol > li > b { display: block; font-size: 10px; font-weight: 700; color: #002533; margin-bottom: 2px; }
    .pa-card ul { margin: 4px 0 0; padding-left: 12px; list-style: disc; display: flex; flex-direction: column; gap: 2px; }
    .pa-card ul li { font-size: 9px; color: #5c7079; }
    .chat-body { position: relative; }
    .chat-more { position: absolute; bottom: 44px; left: 50%; transform: translateX(-50%); width: 24px; height: 24px; border-radius: 50%; background: #0b7a6d; color: #fff; display: grid; place-items: center; }
    .app-ask { margin-top: auto; border: 1px solid #e6eaec; border-radius: 7px; padding: 7px 9px; font-size: 9.5px; color: #9aabb1; background: #fff; }
    @media (max-width: 760px) { .app { grid-template-columns: minmax(0, 1fr); } .app-rail { display: none; } .app-chat { border-left: 0; border-top: 1px solid #e6eaec; } }

    /* ---- compliance strip (inside Benefits) ---- */
    .cmp { margin-top: 60px; padding-top: 34px; border-top: 1px solid rgba(201,214,220,0.2); display: grid; grid-template-columns: 5fr 7fr; gap: 28px 80px; align-items: start; }
    .cmp-intro { display: flex; flex-direction: column; gap: 10px; }
    .cmp-intro .h3 { color: #fbf9f6; font-size: 20px; }
    .cmp-intro p { font-size: 15px; line-height: 1.55; color: #c9d6dc; max-width: 42ch; }
    .cmp-groups { display: grid; grid-template-columns: 2fr 1fr; gap: 28px 40px; }
    .cmp-group { --c: #00cab7; display: flex; flex-direction: column; gap: 14px; }
    .cmp-group.aligned { --c: #ff800e; }
    .cmp-tag { align-self: flex-start; display: inline-flex; align-items: center; gap: 8px; padding: 3px 10px 3px 8px; border-radius: 999px; border: 1px solid var(--c); color: var(--c); font-family: 'Red Hat Mono', ui-monospace, Menlo, monospace; font-size: 10.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; }
    .cmp-tag i { width: 6px; height: 6px; border-radius: 50%; background: var(--c); display: block; }
    .cmp-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 24px; }
    .cmp-group.aligned .cmp-tiles { grid-template-columns: minmax(0, 1fr); }
    .cmp-tile { display: flex; flex-direction: column; gap: 3px; padding-top: 10px; border-top: 2px solid var(--c); }
    .cmp-tile b { font-size: 16px; font-weight: 700; letter-spacing: -0.01em; color: #fbf9f6; line-height: 1.2; }
    .cmp-tile .ref { font-family: 'Red Hat Mono', ui-monospace, Menlo, monospace; font-size: 11px; color: var(--c); }
    .cmp-tile .what { font-size: 12.5px; line-height: 1.4; color: #9fb3bb; }
    @media (max-width: 960px) { .cmp { grid-template-columns: 1fr; margin-top: 48px; } .cmp-groups { grid-template-columns: 1fr; } }
    @media (max-width: 600px) { .cmp-tiles { grid-template-columns: 1fr; } }


    /* ---- workflow: rotating steps ---- */
    .wf { padding-top: 96px; }
    .wf-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-bottom: 64px; }
    .wf-tab { all: unset; box-sizing: border-box; cursor: pointer; position: relative; display: flex; flex-direction: column; gap: 10px; padding-top: 22px; color: #8a9aa1; transition: color .3s ease; }
    .wf-tab:hover, .wf-tab.is-on { color: #002533; }
    .wf-tab:hover .wf-bar { background: #c9d4d8; }
    .wf-tab:hover:not(.is-on) .step-num { color: #6a7b84; }
    .wf-tab:focus-visible { outline: 2px solid #ff800e; outline-offset: 6px; border-radius: 2px; }
    .wf-tab .step-num { font-size: 22px; letter-spacing: 0.03em; line-height: 1.1; transition: color .3s ease; }
    .wf-tab:not(.is-on) .step-num { color: #9aabb1; }
    .wf-title { font-weight: 600; font-size: 16px; line-height: 1.35; letter-spacing: -0.005em; text-wrap: balance; }
    .wf-bar { position: absolute; top: 0; left: 0; right: 0; height: 3px; border-radius: 2px; background: #e1e7e9; overflow: hidden; }
    .wf-bar i { display: block; height: 100%; width: 0; background: #ff800e; }
    .wf.run .wf-tab.is-on .wf-bar i { animation: wfFill var(--wf-dur, 8s) linear forwards; }
    .wf.run.paused .wf-tab.is-on .wf-bar i { animation-play-state: paused; }
    .wf.manual .wf-tab.is-on .wf-bar i, .wf.static .wf-tab.is-on .wf-bar i { animation: none; width: 100%; }
    @keyframes wfFill { from { width: 0; } to { width: 100%; } }
    .wf-stage { display: grid; }
    .wf-panel { grid-area: 1 / 1; display: grid; grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; opacity: 0; visibility: hidden; transform: translateY(14px); transition: opacity .45s ease, transform .6s cubic-bezier(.22,1,.36,1), visibility 0s linear .45s; }
    .wf-panel.is-on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
    .wf-shot { min-width: 0; transform: translateX(28px); transition: transform .75s cubic-bezier(.22,1,.36,1); }
    .wf-panel.is-on .wf-shot { transform: none; }
    .wf-copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
    .wf-copy p { color: #2a404d; max-width: 46ch; }
    .wf-label { margin-top: 6px; font-weight: 900; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: #6a7b84; }
    .wf-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; color: #0b2431; font-style: italic; font-size: 16px; }
    .wf-h { display: none; }
    @media (max-width: 960px) {
      .wf { padding-top: 64px; }
      .wf-tabs { gap: 14px; margin-bottom: 32px; }
      .wf-title { display: none; }
      .wf-tab .step-num { font-size: 12px; letter-spacing: 0.02em; overflow-wrap: anywhere; }
      .wf-panel { grid-template-columns: minmax(0, 1fr); gap: 28px; }
      .wf-h { display: block; font-weight: 900; font-size: 26px; line-height: 1.1; letter-spacing: -0.02em; color: #002533; }
    }
    @media (prefers-reduced-motion: reduce) {
      .wf-panel, .wf-shot { transition: none; transform: none; }
    }

    /* ---- partners & customers: scrolling strip ---- */
    .logos { padding: 20px 0 0; }
    .logos-head { margin-bottom: 26px; }
    .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); padding-block: 22px; border-block: 1px solid #e3e8ea; }
    .marquee-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
    .marquee:hover .marquee-track { animation-play-state: paused; }
    .marquee-set { display: flex; align-items: center; gap: 64px; padding: 0 64px 0 0; margin: 0; list-style: none; }
    .marquee-set li { display: flex; align-items: center; flex: none; }
    .marquee-set img { display: block; max-width: none; filter: grayscale(1); opacity: .8; transition: filter .25s ease, opacity .25s ease; }
    .marquee-set li:hover img { filter: none; opacity: 1; }
    @keyframes marquee { to { transform: translateX(-50%); } }
    @media (max-width: 600px) { .marquee-set { gap: 48px; padding-right: 48px; } .marquee-set img { transform: scale(.82); transform-origin: center; } .logos { padding-top: 14px; } }
    @media (prefers-reduced-motion: reduce) {
      .marquee-track { animation: none; width: auto; }
      .marquee-set[aria-hidden] { display: none; }
      .marquee-set { flex-wrap: wrap; justify-content: center; gap: 18px 44px; padding: 0 32px; }
      .marquee { -webkit-mask-image: none; mask-image: none; }
    }

    /* ---- step 02: analysis view ---- */
    .app--an { grid-template-columns: 42px minmax(0, 1.22fr) minmax(0, 1fr); min-height: 440px; }
    .an-head { display: flex; align-items: center; gap: 5px; padding: 2px 2px 0; flex-wrap: nowrap; min-width: 0; white-space: nowrap; }
    .an-head b { font-size: 13px; font-weight: 800; letter-spacing: -0.02em; color: #002533; margin-right: 2px; }
    .an-head .sp { flex: 1; }
    .an-head .ic { color: #8a9aa1; display: grid; place-items: center; }
    .b-trusted { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #a9ceb0; border-radius: 5px; padding: 2px 7px; font-size: 9.5px; font-weight: 600; color: #3f7a4a; background: #fff; }
    .b-ver { border: 1px solid #e0e3e1; border-radius: 5px; padding: 2px 5px; font-family: 'Red Hat Mono', monospace; font-size: 9px; color: #6a7b84; background: #fff; }
    .b-ready { display: inline-flex; align-items: center; gap: 5px; border-radius: 5px; padding: 3px 8px; font-size: 9.5px; font-weight: 600; color: #3f7a4a; background: #e3f5e5; }
    .b-ready i { width: 5px; height: 5px; border-radius: 50%; background: #3f7a4a; display: block; }
    .an-card { padding: 0; gap: 0; overflow: hidden; }
    .an-title { font-size: 11.5px; font-weight: 700; color: #002533; padding: 9px 12px; border-bottom: 1px solid #eef1ef; }
    .an-plot { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 6px; }
    .an-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; font-size: 9px; color: #2a3f5f; }
    .an-legend span { display: inline-flex; align-items: center; gap: 5px; }
    .an-legend i { width: 6px; height: 6px; border-radius: 50%; display: block; }
    .an-legend .off { opacity: .5; }
    .an-chat { overflow: hidden; gap: 8px; }
    .bub-user { align-self: flex-end; max-width: 92%; background: #ffeede; border: 1px solid #f6d3b1; border-radius: 9px; padding: 8px 10px; font-size: 10px; line-height: 1.45; color: #3a2a1c; }
    .ai-label { display: flex; align-items: center; gap: 7px; font-family: 'Red Hat Mono', monospace; font-size: 9.5px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #00695e; }
    .ai-chip { width: 22px; height: 16px; border-radius: 5px; background: #d6f2ec; display: grid; place-items: center; }
    .ai-chip .clip { width: 12px; height: 6px; overflow: hidden; display: block; }
    .ai-chip .clip img { width: 46px; max-width: none; height: auto; display: block; }
    .bub-ai { background: #e2f8f4; border: 1px solid #a9e3d9; border-radius: 9px; padding: 9px 10px; font-size: 9.5px; line-height: 1.5; color: #1f3a40; display: flex; flex-direction: column; gap: 6px; max-height: 250px; overflow: hidden; }
    .bub-ai b { color: #002533; }
    .bub-ai ul { margin: 0; padding-left: 13px; list-style: disc; display: flex; flex-direction: column; gap: 5px; }
    @media (max-width: 760px) { .app--an { grid-template-columns: minmax(0, 1fr); } }

    /* ---- performance: scrolling strip ---- */
    .kpis { padding: 64px 0 0; }
    .marquee--kpi { padding-block: 26px; }
    .marquee--kpi .marquee-track { animation-duration: 60s; }
    .marquee--kpi .marquee-set { gap: 0; padding: 0; }
    .kpi { display: flex; align-items: center; gap: 16px; padding: 4px 40px; border-left: 1px solid #e3e8ea; }
    .kpi-n { font-weight: 900; font-size: 40px; line-height: 1; letter-spacing: -0.03em; white-space: nowrap; }
    .kpi-up { color: #00a294; }
    .kpi-down { color: #c95f00; }
    .kpi-t { display: flex; flex-direction: column; gap: 3px; }
    .kpi-t strong { font-size: 16px; font-weight: 700; color: #002533; white-space: nowrap; }
    .kpi-t em { font-style: normal; font-size: 13px; line-height: 1.35; color: #6a7b84; max-width: 24ch; }
    @media (max-width: 600px) { .kpi { padding: 4px 26px; gap: 12px; } .kpi-n { font-size: 32px; } .kpis { padding-top: 40px; } }
    @media (prefers-reduced-motion: reduce) { .marquee--kpi .kpi { border-left: 0; padding: 8px 0; } }

    /* ---- step 03: report view ---- */
    .app--rp { grid-template-columns: 42px minmax(0, 1fr) minmax(0, 1.08fr); min-height: 440px; }
    .rp-crumb { font-size: 10px; color: #6a7b84; padding: 2px 2px 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    .rp-crumb i { font-style: normal; margin: 0 4px; color: #aab7bc; }
    .rp-crumb b { color: #002533; font-weight: 600; }
    .rp-tpl { gap: 8px; }
    .rp-tpl-top { display: flex; align-items: center; justify-content: space-between; }
    .rp-edit { display: inline-flex; align-items: center; gap: 5px; border: 1px solid #1f7a8c; color: #1f6b7a; border-radius: 6px; padding: 4px 9px; font-size: 9.5px; font-weight: 600; }
    .rp-tpl-body { display: flex; gap: 12px; align-items: flex-start; }
    .rp-w { width: 42px; height: 42px; border-radius: 50%; background: #2f7d78; color: #fff; display: grid; place-items: center; flex: none; }
    .rp-meta { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
    .rp-meta > b { font-size: 12.5px; font-weight: 700; color: #002533; letter-spacing: -0.01em; }
    .rp-desc { font-size: 9.5px; color: #8a9aa1; }
    .rp-chips { display: flex; gap: 6px; flex-wrap: wrap; }
    .rp-chips span { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #cfd6d3; border-radius: 4px; padding: 2px 6px; font-size: 9px; color: #33444b; white-space: nowrap; }
    .rp-list { padding: 0; gap: 0; }
    .rp-list-head { display: flex; align-items: center; justify-content: space-between; padding: 9px 11px; border-bottom: 1px solid #eef1ef; }
    .rp-list-head b { font-size: 11px; font-weight: 700; color: #002533; }
    .rp-create { display: inline-flex; align-items: center; gap: 5px; background: #2f7d78; color: #fff; border-radius: 6px; padding: 5px 10px; font-size: 9.5px; font-weight: 600; }
    .rp-item { display: flex; align-items: center; gap: 10px; padding: 11px; }
    .rp-doc { width: 26px; height: 26px; border-radius: 50%; background: #eef1f0; color: #1f5fa8; display: grid; place-items: center; flex: none; }
    .rp-item-meta { display: flex; flex-direction: column; gap: 2px; font-size: 8.5px; color: #6a7b84; min-width: 0; }
    .rp-item-meta b { font-size: 10.5px; font-weight: 600; color: #002533; }
    .rp-item-meta u { color: #1f6b7a; text-decoration-color: rgba(31,107,122,.4); overflow-wrap: anywhere; }
    .rp-acts { margin-left: auto; display: flex; gap: 9px; flex: none; }
    .rp-preview { border-left: 1px solid #e6eaec; background: #fff; display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
    .rp-desk { flex: 1; background: #e9edeb; padding: 12px 14px 0; overflow: hidden; }
    .rp-page { position: relative; background: #fff; border-radius: 2px; box-shadow: 0 1px 2px rgba(0,37,51,.08), 0 6px 18px -8px rgba(0,37,51,.25); padding: 14px 14px 22px; display: flex; flex-direction: column; gap: 6px; }
    .rp-h { font-family: 'Helvetica Neue', Arial, sans-serif; font-size: 10.5px; color: #2a3f5f; }
    .rp-src { align-self: flex-start; display: inline-flex; align-items: center; gap: 5px; background: #e6f7f3; border: 1px solid #b4e5dc; color: #1f5f57; border-radius: 4px; padding: 2px 6px; font-size: 7.5px; white-space: nowrap; }
    .rp-src i { width: 5px; height: 5px; border-radius: 50%; background: #00a294; display: block; }
    .rp-src b { font-weight: 700; }
    .rp-tbl-wrap { overflow-x: auto; }
    .rp-tbl { width: 100%; border-collapse: collapse; font-family: 'Times New Roman', Times, serif; font-size: 7.5px; color: #111; }
    .rp-tbl th, .rp-tbl td { border: 0.8px solid #222; padding: 2px 4px; text-align: left; white-space: nowrap; }
    .rp-tbl th { font-weight: 700; }
    .rp-page-no { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); font-size: 7px; color: #9aa7ac; }
    @media (max-width: 760px) { .app--rp { grid-template-columns: minmax(0, 1fr); } .rp-preview { border-left: 0; border-top: 1px solid #e6eaec; } }
    /* Narrow report column (e.g. 1024px): the file name has no spaces and the
       chips were set not to wrap, so both overflowed the card. Let them wrap. */
    .rp-meta > b { overflow-wrap: anywhere; }
    .rp-chips span { white-space: normal; overflow-wrap: anywhere; min-width: 0; }
    /* Between the single-column layout and wide desktops, give the product
       screenshots more room than the text beside them. */
    @media (min-width: 961px) and (max-width: 1199px) { .wf-panel { grid-template-columns: 4fr 8fr; gap: 48px; } }

    /* ---- section spacing (backgrounds live in site.css) ---- */
    .kpis { padding-bottom: 110px !important; }
    /* compliance block on a light ground */
    .cmp { border-top-color: rgba(0,37,51,0.12) !important; }
    .cmp-intro .h3 { color: #002533 !important; }
    .cmp-intro p { color: #2a404d !important; }
    .cmp-group { --c: #00857a; }
    .cmp-group.aligned { --c: #c95f00; }
    .cmp-tile b { color: #002533 !important; }
    .cmp-tile .what { color: #5c7079 !important; }
    @media (max-width: 960px) { #mission, #who, #benefits { padding: 80px 0 !important; } #workflow { padding-top: 80px !important; } .kpis { padding-bottom: 80px !important; } }

    /* ---- Hover zoom: Mission / Vision (soft pastel box) and Built for / Our edge ----
       Every zoom is sized so the grown block keeps at least 5px from the window
       edge at any width: the page's side margin is 32px (20px on phones), and a
       block may grow by at most that minus 5px, including its highlight box. */
    .mv-zoom { --mv-bg: #e9f8f5; padding: 16px 18px; margin: -16px -18px; border-radius: 14px; background: transparent; transform-origin: center; transition: transform .35s cubic-bezier(.22,1,.36,1), background-color .35s ease; }
    .mv-zoom.mv-vision { --mv-bg: #fdf3ea; }
    .mv-zoom:hover { transform: scale(1.02); background: var(--mv-bg); }
    .bf-zoom { transform-origin: center top; transition: transform .35s cubic-bezier(.22,1,.36,1); }
    .bf-zoom:hover { transform: scale(1.08); position: relative; z-index: 2; }
    /* Single-column layout: blocks span the full width, so they grow less. */
    @media (max-width: 960px) {
      .mv-zoom { padding: 14px 12px; margin: -14px -12px; }
      .bf-zoom:hover { transform: scale(1.04); }
    }
    @media (max-width: 600px) {
      .mv-zoom { padding: 14px 8px; margin: -14px -8px; }
    }
    /* No hover on touch screens, and no motion when the visitor asks for less. */
    @media (hover: none), (prefers-reduced-motion: reduce) { .mv-zoom:hover, .bf-zoom:hover { transform: none; } }

    /* ---- Our edge icons ---- */
    .edge-ic { display: block; line-height: 0; }