/* =============================================================
       Salespanel — homepage (clean variation)
       White canvas, soft neutral greys, one accent. Generous
       whitespace, 16px radii, shadows only on real surfaces.
       Every feature section is carried by a drawn diagram rather
       than by decoration.
       ============================================================= */
    @font-face { font-family: 'Homepage Archivo'; src: url('assets/fonts/archivo-latin.woff2') format('woff2'); font-weight: 300 900; font-display: swap; }
    @font-face { font-family: 'Homepage Archivo'; src: url('assets/fonts/archivo-latin-ext.woff2') format('woff2'); font-weight: 300 900; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg:      #ffffff;
      --bg-soft: #faf9ff;
      --bg-2:    #e5e0f2;
      --ink:     #1f1b2e;
      --ink-2:   #2e2844;
      --body:    #46405c;
      --muted:   #6e6880;
      --line:    #e8e4f5;
      --line-2:  #f1eefa;

      --accent:    #1f1b2e;
      --accent-dk: #000000;
      --accent-lt: #f3f0fc;
      --hilite:    #1f1b2e;

      /* diagram tokens */
      --dg-bg: #ffffff;
      --dg-ink: #1f1b2e;
      --dg-line: #ded8f0;
      --dg-soft: #e5e0f2;
      --dg-accent: #1f1b2e;
      --dg-muted: #6e6880;

      /* aliases so the existing markup keeps resolving */
      --white:#ffffff; --navy:#1f1b2e; --slate:#2e2844;
      --g900:#1f1b2e; --g700:#46405c; --g500:#6e6880;
      --g300:#b7b0c7; --g200:#e8e4f5; --g100:#f1eefa; --g50:#faf9ff;
      --indigo:#1f1b2e; --indigo-dk:#000000; --indigo-lt:#f3f0fc;
      --violet:#1f1b2e; --violet-lt:#f3f0fc;
      --teal:#6e6880; --teal-dk:#46405c; --teal-lt:#f3f0fc;
      --blue:#1f1b2e; --blue-lt:#f3f0fc;
      --green:#0f8a5f; --green-lt:#e9f7f1;
      --amber:#8a6a2f; --amber-lt:#f6f2ea;
      --red:#a8463d; --red-lt:#faf1f0; --red-mid:#f3ddda;

      --r-sm: 10px; --r: 14px; --r-lg: 22px; --r-pill: 999px;
      --shadow-sm: 0 1px 2px rgba(11,27,51,.04);
      --shadow-md: 0 8px 28px -14px rgba(11,27,51,.14);
      --shadow-lg: 0 12px 32px -12px rgba(11,27,51,.14);
      --shadow-xl: 0 40px 90px -40px rgba(11,27,51,.26);

      --ff: 'Homepage Archivo', -apple-system, 'Segoe UI', Helvetica, Arial, sans-serif;
      --gut: 32px; --max: 1340px;
    }

    /* clip on <html> too — overflow escapes past a clipped <body> to the root otherwise */
    html { overflow-x: clip; }
    body { font-family: var(--ff); color: var(--body); background: var(--bg); font-size: 17px; line-height: 1.72; padding-top: 104px; -webkit-font-smoothing: antialiased; overflow-x: clip; }
    .container { max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }
    a { text-decoration: none; color: inherit; }
    img { display: block; max-width: 100%; }
    button { font: inherit; }
    ::selection { background: var(--accent); color: #fff; }
    :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

    h1, h2, h3, h4, h5 { font-family: var(--ff); color: var(--ink); font-weight: 500; letter-spacing: -.026em; line-height: 1.14; }
    h1 { font-size: clamp(2.8rem, 5.8vw, 5.2rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.02; }
    h2 { font-size: clamp(1.95rem, 3.4vw, 2.9rem); font-weight: 500; letter-spacing: -.03em; }
    h3 { font-size: 1.06rem; font-weight: 600; letter-spacing: -.014em; line-height: 1.34; }
    p { color: var(--body); font-size: 1rem; }

    .pill, .pill--indigo, .pill--teal, .pill--violet, .pill--light {
      /* quiet label: a short accent rule, then the word */
      display: inline-flex; align-items: center; gap: 8px;
      font-size: .84rem; font-weight: 500; letter-spacing: .01em; text-transform: none;
      color: var(--muted); background: none; border: none;
      padding: 0; border-radius: 0; margin-bottom: 18px;
    }
    .pill::before { content: ''; width: 26px; height: 1px; background: var(--accent); flex: 0 0 auto; }

    .btn { display: inline-flex; align-items: center; gap: 10px; padding: 16px 30px; font-size: .95rem; font-weight: 500; letter-spacing: .005em; border-radius: var(--r-sm); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: background-color .18s, color .18s, border-color .18s; }
    .btn svg { width: 16px; height: 16px; transition: transform .18s; }
    .btn:hover svg { transform: translateX(3px); }
    .btn-indigo { background: var(--ink); color: #fff; }
    .btn-indigo:hover { background: var(--accent); }
    .btn-ghost, .btn-hero-watch { background: #fff; color: var(--ink); border-color: var(--line); box-shadow: var(--shadow-sm); }
    .btn-ghost:hover, .btn-hero-watch:hover { border-color: var(--g300); }
    .btn-sm { padding: 11px 22px; font-size: .89rem; }
    .btn-light { background: #fff; color: var(--ink); }
    .btn-light:hover { background: var(--accent); color: #fff; }
    .btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
    .btn-outline-light:hover { background: rgba(255,255,255,.08); border-color: #fff; }

    /* ── NAV ── */
    .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1001; background: var(--ink); color: #fff; }
    .topbar-inner { display: flex; align-items: center; justify-content: center; gap: 10px; height: 36px; font-size: .84rem; }
    .topbar-inner a { display: inline-flex; align-items: center; gap: 6px; color: #fff; }
    .topbar-inner a:hover { text-decoration: underline; }
    .topbar-tag { background: rgba(255,255,255,.14); border-radius: 100px; padding: 2px 10px; font-size: .71rem; font-weight: 500; text-transform: none; letter-spacing: 0; }

    .navbar { position: fixed; top: 36px; left: 0; right: 0; z-index: 1000; background: var(--bg); border-bottom: 1px solid var(--line-2); }
    .navbar-inner { display: flex; align-items: center; justify-content: space-between; height: 68px; }
    .navbar-logo img { height: 28px; width: auto; }
    .navbar-links { display: flex; align-items: center; list-style: none; height: 100%; }
    .navbar-links > li { position: relative; height: 100%; display: flex; align-items: center; }
    .navbar-links > li > a, .navbar-links > li > span { font-size: .94rem; font-weight: 400; color: var(--body); padding: 0 .85rem; height: 100%; display: flex; align-items: center; gap: .35rem; cursor: pointer; white-space: nowrap; transition: color .18s; }
    .navbar-links > li > a:hover, .navbar-links > li:hover > a, .navbar-links > li:hover > span { color: var(--ink); }
    .nav-arrow { font-size: .58rem; opacity: .45; transition: transform .25s; }
    .navbar-links > li:hover .nav-arrow { transform: rotate(180deg); }
    .dropdown { position: absolute; top: calc(100% - 4px); left: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: .55rem; min-width: 268px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s; box-shadow: var(--shadow-lg); }
    .navbar-links > li:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
    .dropdown a { display: flex; flex-direction: column; gap: .1rem; padding: .6rem .75rem; border-radius: var(--r-sm); color: var(--ink); font-size: .9rem; font-weight: 500; transition: background .15s; }
    .dropdown a:hover { background: var(--bg-soft); }
    .dropdown a .dd-desc { font-size: .8rem; color: var(--muted); font-weight: 400; line-height: 1.45; }
    .dropdown-api-entry { padding: .6rem .75rem; border-radius: var(--r-sm); }
    .dropdown-api-entry > .dropdown-api-title { display: block; padding: 0; }
    .dropdown-api-entry .dd-desc { display: block; color: var(--muted); font-size: .8rem; font-weight: 400; line-height: 1.45; }
    .dropdown-api-entry .dropdown-inline-link { display: inline; padding: 0; color: #5366c1; font-size: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
    .dropdown-api-entry .dropdown-inline-link:hover { background: transparent; color: var(--ink); }
    .dropdown-mega { min-width: 560px; left: 50%; transform: translateX(-50%) translateY(8px); padding: 1rem; }
    .navbar-links > li:hover .dropdown-mega { transform: translateX(-50%) translateY(0); }
    .mega-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 .8rem; }
    .navbar-actions { display: flex; align-items: center; gap: .85rem; }
    .navbar-login { font-size: .94rem; color: var(--muted); padding: .5rem; transition: color .2s; }
    .navbar-login:hover { color: var(--ink); }
    .hamburger { display: none; flex-direction: column; gap: 5px; cursor: pointer; background: none; border: none; padding: 6px; }
    .hamburger span { width: 22px; height: 2px; background: var(--body); border-radius: 2px; transition: all .3s; }
    .hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px,5px); }
    .hamburger.open span:nth-child(2) { opacity: 0; }
    .hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px,-5px); }
    @media(max-width:1080px){ .navbar-links{display:none;} .hamburger{display:flex;} .navbar-actions .btn{display:none;} }
    .navbar-links.mobile-open { display: flex; flex-direction: column; position: fixed; top: 104px; left: 0; right: 0; bottom: 0; background: var(--bg); padding: 1.25rem var(--gut); overflow-y: auto; z-index: 999; align-items: flex-start; }
    .navbar-links.mobile-open > li { width: 100%; height: auto; border-bottom: 1px solid var(--line-2); }
    .navbar-links.mobile-open > li > a, .navbar-links.mobile-open > li > span { padding: .9rem 0; height: auto; }
    .navbar-links.mobile-open .dropdown, .navbar-links.mobile-open .dropdown-mega { position: static; opacity: 1; visibility: visible; transform: none; background: transparent; border: none; box-shadow: none; padding: 0 0 .5rem 1rem; min-width: 0; }
    .navbar-links.mobile-open .mega-grid, .navbar-links.mobile-open .mega-cols { grid-template-columns: 1fr; }
    .dropdown-mega--wide { min-width: 730px; padding: 1.1rem 1.1rem .6rem; }
    .dropdown-product { min-width: 610px; padding: 1.1rem 1.1rem .6rem; }
    .dropdown-resources { min-width: 465px; }
    @media (min-width: 1081px) {
      .dropdown-mega, .dropdown-resources {
        position: fixed; top: 100px; left: 50%; max-height: calc(100vh - 120px);
        overflow-y: auto; transform: translateX(-50%) translateY(8px);
        border-radius: 8px;
      }
      .dropdown-mega--wide { width: min(92vw, 1480px); padding: 22px 26px; }
      .dropdown-product { width: min(84vw, 1060px); padding: 22px 26px; }
      .dropdown-resources { width: min(78vw, 900px); padding: 20px 24px; }
      .navbar-links > li:hover .dropdown-resources,
      .navbar-links > li:focus-within .dropdown-resources { transform: translateX(-50%) translateY(0); }
      .dropdown-mega--wide .mega-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 28px; }
      .dropdown-product .mega-cols { gap: 0 32px; }
      .dropdown-mega a, .dropdown-resources a { padding: 14px 10px; font-size: .98rem; line-height: 1.3; }
      .dropdown-mega .dd-desc, .dropdown-resources .dd-desc { font-size: .86rem; line-height: 1.5; }
      .dropdown-mega .dropdown-api-entry { padding: 14px 10px; }
      .dropdown-mega .dropdown-api-entry .dropdown-api-title,
      .dropdown-mega .dropdown-api-entry .dropdown-inline-link { padding: 0; }
      .dropdown-mega .mega-group-title {
        padding: 12px 10px 9px; margin-bottom: 5px;
        border-bottom: 1px solid #dfe5e9; color: #52616d;
        font-size: .76rem; font-weight: 700; text-transform: uppercase;
      }
      .dropdown-mega--wide .mega-col:last-child {
        background: #f7f8fb; border-radius: 6px; padding: 0 12px 12px;
      }
    }
    .mega-cols { display: grid; grid-template-columns: 1.15fr 1.15fr .9fr; gap: 0 1.4rem; }
    .mega-cols--2 { grid-template-columns: 1fr 1fr; }
    .mega-col { display: flex; flex-direction: column; }
    .mega-group-title { font-size: .76rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--muted); padding: .65rem .75rem .3rem; }
    .mega-col > .mega-group-title:not(:first-child) { margin-top: .5rem; }
    .navbar-links.mobile-open .dropdown-mega--wide, .navbar-links.mobile-open .dropdown-resources { min-width: 0; }

    /* ── HERO ── */
    .hero { padding: clamp(64px, 8vw, 104px) 0 0; background: var(--bg); position: relative; overflow: hidden; }
    .hero::before { display: none; }
    .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(44px, 6vw, 76px); justify-items: center; text-align: center; position: relative; z-index: 1; }
    .hero-left { padding: 0; max-width: 1040px; }
    .hero .pill--light { display: inline-flex; }
    .hero h1 { color: var(--ink); margin-bottom: 28px; max-width: 21ch; margin-inline: auto; }
    .hero h1 .hl { color: var(--accent); background: none; -webkit-text-fill-color: currentColor; }
    .hero-desc { color: var(--muted); font-size: 1.24rem; line-height: 1.62; margin: 0 auto 40px; max-width: 64ch; }
    .hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-bottom: 20px; }
    .hero-note { font-size: .87rem; color: var(--muted); margin-bottom: 28px; display: flex; align-items: center; justify-content: center; gap: 8px; }
    .hero-note svg { width: 15px; height: 15px; color: var(--green); }
    .hero-trust { display: flex; align-items: center; justify-content: center; gap: 15px; flex-wrap: wrap; }
    .hero-trust-avatars { display: flex; }
    .hero-trust-avatars span { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-size: .6rem; font-weight: 600; color: #fff; margin-left: -9px; }
    .hero-trust-avatars span:first-child { margin-left: 0; }
    .hero-trust-text { font-size: .88rem; color: var(--muted); }
    .hero-trust-text strong { color: var(--ink); font-weight: 600; }

    /* ── Live feed panel ── */
    .hero-right { align-self: stretch; width: 100%; max-width: 1220px; text-align: left; background: var(--bg-soft); border-radius: var(--r-lg) var(--r-lg) 0 0; padding: clamp(20px, 3vw, 38px) clamp(20px, 3vw, 38px) 0; }
    .mock-win { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg) var(--r-lg) 0 0; box-shadow: var(--shadow-xl); overflow: hidden; }
    .mock-win--float { border-radius: var(--r-lg); }
    .mock-topbar { background: var(--bg-soft); border-bottom: 1px solid var(--line-2); padding: 13px 18px; display: flex; align-items: center; gap: 7px; }
    .mock-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--g300) !important; }
    .mock-topbar-title { margin-left: auto; font-size: .76rem; color: var(--muted); display: flex; align-items: center; gap: 7px; }
    .live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--hilite); box-shadow: 0 0 0 1px rgba(11,27,51,.12); animation: livePulse 2s ease-out infinite; }
    @keyframes livePulse { 0%{box-shadow:0 0 0 0 rgba(37,99,235,.45)} 70%{box-shadow:0 0 0 8px rgba(37,99,235,0)} 100%{box-shadow:0 0 0 0 rgba(37,99,235,0)} }
    .mock-body { padding: 20px; }
    .mock-body-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
    .mock-body-hd h4 { font-size: .95rem; font-weight: 600; }
    .mock-body-hd span { font-size: .76rem; font-weight: 500; }
    .id-badge { color: var(--accent); background: var(--accent-lt); padding: 4px 11px; border-radius: 100px; display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; transition: color .3s, background .3s; }
    .id-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
    .id-badge.scanning { color: var(--muted); background: var(--bg-soft); }
    .id-badge.scanning::before { animation: dotPulse 1s ease-in-out infinite; }
    @keyframes dotPulse { 0%,100%{opacity:1} 50%{opacity:.22} }

    .intent-account { display: flex; flex-direction: column; gap: 8px; }
    .ia-card { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 13px 15px; overflow: hidden; transition: border-color .45s, background .45s; }
    .ia-card.anon { background: var(--bg-soft); border-color: var(--line-2); }
    .ia-card::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:0; background: linear-gradient(180deg, transparent, rgba(37,99,235,.09) 50%, transparent); transform: translateY(-100%); }
    .ia-card.anon::after { opacity:1; animation: scanSweep 1.8s ease-in-out infinite; }
    @keyframes scanSweep { 0%{transform:translateY(-105%)} 100%{transform:translateY(105%)} }
    .ia-top { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; }
    .ia-logo { position: relative; width: 34px; height: 34px; border-radius: var(--r-sm); display: flex; align-items: center; justify-content: center; font-size: .74rem; font-weight: 600; color: #fff; background: var(--c, var(--ink)); transition: background .45s; }
    .ia-card.anon .ia-logo { background: var(--bg-2); }
    .ia-logo .logo-initial { transition: opacity .4s, transform .4s; }
    .ia-card.anon .ia-logo .logo-initial { opacity: 0; transform: scale(.5); }
    .ia-logo .logo-scan { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); opacity: 0; transition: opacity .35s; }
    .ia-logo .logo-scan svg { width: 17px; height: 17px; }
    .ia-card.anon .ia-logo .logo-scan { opacity: 1; animation: scanSpin 1.5s linear infinite; }
    @keyframes scanSpin { to { transform: rotate(360deg); } }
    .ia-id { min-width: 0; }
    .ia-name, .ia-meta { display: grid; }
    .ia-meta { margin-top: 1px; }
    .ia-name > span, .ia-meta > span { grid-area: 1 / 1; white-space: nowrap; transition: opacity .45s, filter .45s, transform .45s; }
    .ia-name .real-text { font-size: .9rem; font-weight: 600; color: var(--ink); }
    .ia-name .anon-text { font-size: .9rem; font-weight: 500; color: var(--muted); }
    .ia-meta .real-text, .ia-meta .anon-text { font-size: .77rem; color: var(--muted); }
    .ia-name .anon-text, .ia-meta .anon-text { opacity: 0; }
    .ia-card.anon .ia-name .anon-text, .ia-card.anon .ia-meta .anon-text { opacity: 1; }
    .ia-card.anon .ia-name .real-text, .ia-card.anon .ia-meta .real-text { opacity: 0; filter: blur(5px); transform: translateX(4px); }
    .ia-score-num { font-size: 1.15rem; font-weight: 700; color: var(--accent); background: none; -webkit-text-fill-color: currentColor; text-align: right; letter-spacing: -.03em; transition: color .4s; }
    .ia-card.anon .ia-score-num { color: var(--g300); -webkit-text-fill-color: currentColor; }
    .ia-score-label { font-size: .66rem; color: var(--muted); text-align: right; }
    .ia-signals { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; min-height: 20px; }
    .ia-sig { font-size: .7rem; font-weight: 500; padding: 3px 9px; border-radius: 100px; background: var(--bg-soft) !important; color: var(--body); transition: opacity .4s, transform .4s cubic-bezier(.34,1.56,.64,1); }
    .ia-card.anon .ia-sig { opacity: 0; transform: scale(.4); }
    .ia-sig--form { background: var(--accent-lt) !important; color: var(--accent); font-weight: 600; }
    @media (prefers-reduced-motion: reduce) { .ia-card.anon::after, .ia-card.anon .ia-logo .logo-scan, .live-dot { animation: none; } }

    /* ── LOGO BAR ── */
    .logo-bar { padding: 34px 0 38px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--bg); }
    .logo-bar-label { text-align: center; font-size: .87rem; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); margin-bottom: 24px; }
    .logo-bar-logos { display: flex; align-items: center; justify-content: center; gap: 50px; flex-wrap: wrap; }
    .logo-bar-logos img { height: 26px; width: auto; max-width: 128px; object-fit: contain; filter: grayscale(100%) opacity(.5); transition: filter .25s; }
    .logo-bar-logos img:hover { filter: grayscale(0%) opacity(1); }
    .logo-bar-logos img.lg { height: 32px; }

    /* ── SECTIONS ── */
    .section { padding: clamp(90px, 10.5vw, 156px) 0; }
    .section--slate { background: var(--bg-soft); }
    .section--dark { background: var(--ink); color: rgba(255,255,255,.72); }
    .sec-hd { text-align: center; max-width: 760px; margin: 0 auto clamp(56px, 6.5vw, 88px); display: flex; flex-direction: column; align-items: center; }
    .sec-hd h2 { margin-bottom: 18px; max-width: 20ch; margin-inline: auto; }
    .sec-hd p { color: var(--muted); font-size: 1.14rem; line-height: 1.62; }
    .sec-hd--light h2 { color: #fff; }
    .sec-hd--light p, .sec-hd--light .pill { color: rgba(255,255,255,.62); }

    /* ── Diagrams ── */
    .dg-fig { margin: 0; min-width: 0; }
    .dg-scroll { overflow-x: auto; overscroll-behavior-x: contain; }
    .dg { display: block; width: 100%; min-width: 0; max-width: 100%; overflow: visible; }
    .dg-cap { margin-top: 14px; font-size: .82rem; color: var(--muted); }
    .dg-t  { font-family: var(--ff); font-size: 14px; font-weight: 500; fill: var(--dg-ink); }
    .dg-l  { font-family: var(--ff); font-size: 13px; fill: var(--dg-muted); }
    .dg-l--on { fill: var(--dg-ink); font-weight: 600; }
    .dg-n  { font-family: var(--ff); font-size: 14px; font-weight: 600; fill: var(--dg-ink); }
    .dg-n2 { font-family: var(--ff); font-size: 12px; font-weight: 500; fill: var(--dg-muted); }
    .dg-ax { font-family: var(--ff); font-size: 12px; fill: var(--dg-muted); }
    .dg-b  { font-family: var(--ff); font-size: 12px; font-weight: 500; fill: #fff; }
    .dg-b--ink { fill: var(--dg-ink); }
    .dg-big { font-family: var(--ff); font-size: 40px; font-weight: 700; letter-spacing: -.03em; fill: var(--dg-ink); }
    .dg-track { fill: var(--dg-soft); }
    .dg-fill  { fill: var(--dg-accent); transform-box: view-box; transform-origin: 170px center; }
    .dg-box rect { fill: #fff; stroke: var(--dg-line); }
    .dg-box--on rect { stroke: var(--dg-accent); }
    .dg-hub { fill: var(--dg-ink); }
    .dg-hub-t { font-family: var(--ff); font-size: 15px; font-weight: 600; fill: #fff; }
    .dg-hub-s { font-family: var(--ff); font-size: 11.5px; fill: rgba(255,255,255,.66); }
    .dg-wire path { fill: none; stroke: var(--dg-line); stroke-width: 1.5; }
    .dg-wire--on path { stroke: var(--dg-accent); }
    .dg-grid line { stroke: var(--dg-line); stroke-dasharray: 2 6; }
    .dg-chip { fill: var(--accent-lt); stroke: none; }

    /* ── Capability + use-case cards ── */
    .cap-grid, .uc-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
    .cap-card, .uc-card { background: var(--bg-soft); border: none; border-radius: var(--r-lg); padding: 38px 32px 40px; transition: background-color .25s ease, box-shadow .25s ease; }
    .cap-card:hover, .uc-card:hover { background: #fff; box-shadow: var(--shadow-md); }
    .section--slate .cap-card, .section--slate .uc-card { background: #fff; }
    .section--slate .cap-card:hover, .section--slate .uc-card:hover { box-shadow: var(--shadow-md); }
    .icon-box { width: 30px; height: 30px; border-radius: 0; display: flex; align-items: center; justify-content: center; margin-bottom: 24px; background: none !important; color: var(--accent); }
    .icon-box svg { width: 24px; height: 24px; stroke-width: 1.3; }
    .ib-indigo, .ib-violet, .ib-teal, .ib-blue, .ib-amber, .ib-green { color: var(--accent); }
    .cap-card h3, .uc-card h3 { margin-bottom: 12px; font-size: 1.05rem; }
    .cap-card p, .uc-card p { font-size: .95rem; color: var(--muted); line-height: 1.68; }

    /* ── Feature rows ── */
    .feature-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(44px, 6vw, 92px); align-items: center; padding: clamp(60px, 7.5vw, 104px) 0; border-bottom: none; }
    .feature-row:last-child { border-bottom: none; }
    .feature-row--flip .fr-vis { order: -1; }
    .fr-vis { min-width: 0; }
    .fr-text h2 { margin-bottom: 18px; max-width: 17ch; }
    .fr-lead { color: var(--body); font-size: 1.06rem; line-height: 1.7; margin-bottom: 28px; max-width: 46ch; }
    .fr-chips { display: flex; flex-direction: column; gap: 0; }
    .fr-chip { display: grid; grid-template-columns: 34px minmax(0,1fr); align-items: start; gap: 15px; background: none; border: none; border-radius: 0; padding: 14px 0; }
    .fr-chip:first-child { padding-top: 0; }
    .fr-chip:hover { box-shadow: none; }
    .fr-chip-icon { width: 30px; height: 30px; border-radius: var(--r-sm); background: var(--accent-lt) !important; color: var(--accent); display: flex; align-items: center; justify-content: center; margin-top: 1px; }
    .fr-chip-icon svg { width: 17px; height: 17px; }
    .fr-chip-title { font-size: .98rem; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
    .fr-chip-desc { font-size: .91rem; color: var(--muted); line-height: 1.58; }

    /* ── Partner band ── */
    .partner-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
    .partner-card { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-lg); padding: 30px 28px; transition: border-color .2s, background .2s; }
    .partner-card:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.22); }
    .partner-mark { font-size: 2.2rem; line-height: .8; color: var(--accent); margin-bottom: 16px; height: 18px; }
    .partner-quote { font-size: 1.08rem; color: rgba(255,255,255,.86); line-height: 1.62; margin-bottom: 28px; letter-spacing: -.008em; }
    .partner-person { display: flex; align-items: center; gap: 12px; }
    .partner-av { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 600; color: #fff; flex-shrink: 0; overflow: hidden; }
    .partner-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
    .partner-name { font-size: .93rem; font-weight: 600; color: #fff; }
    .partner-role { font-size: .81rem; color: rgba(255,255,255,.55); }
    .ecosystem-catalog { margin-top: 56px; border-top: 1px solid rgba(255,255,255,.22); padding-top: 42px; }
    .ecosystem-catalog-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; margin-bottom: 27px; }
    .ecosystem-catalog-head h3 { color: #fff; font-size: clamp(1.5rem, 2.5vw, 2.1rem); line-height: 1.18; margin-bottom: 8px; }
    .ecosystem-catalog-head p { color: rgba(255,255,255,.68); font-size: .96rem; line-height: 1.5; margin: 0; }
    .ecosystem-catalog-head a { flex-shrink: 0; color: #fff; font-weight: 600; border-bottom: 1px solid var(--accent); padding-bottom: 5px; }
    .ecosystem-catalog-head a:hover { color: #cbb9ff; }
    .ecosystem-group { margin-top: 24px; }
    .ecosystem-group h4 { color: rgba(255,255,255,.6); font-size: .73rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 11px; }
    .ecosystem-tools { display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 9px; margin: 0; padding: 0; list-style: none; }
    .ecosystem-tools li { display: flex; align-items: center; min-width: 0; gap: 10px; min-height: 56px; padding: 8px 11px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.13); border-radius: 7px; color: #fff; font-size: .88rem; font-weight: 600; overflow-wrap: anywhere; }
    .ecosystem-tools img { display: block; width: 34px; height: 34px; flex: none; object-fit: contain; background: #fff; border-radius: 5px; padding: 5px; }
    .ecosystem-other { margin: 27px 0 0; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.66); font-size: .84rem; line-height: 1.7; }
    .ecosystem-other strong { color: #fff; margin-right: 8px; }

    /* ── Integrations ── */
    .int-grid { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; max-width: 840px; margin: 0 auto; }
    .int-chip { display: inline-flex; align-items: center; gap: 11px; background: var(--bg-soft); border: none; border-radius: 100px; padding: 13px 22px 13px 15px; transition: background-color .18s, box-shadow .18s; }
    .int-chip:hover { background: #fff; box-shadow: var(--shadow-md); }
    .int-chip img { width: 21px; height: 21px; object-fit: contain; }
    .int-badge { width: 21px; height: 21px; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: .7rem; font-weight: 600; color: #fff; }
    .int-chip span { font-size: .92rem; font-weight: 500; color: var(--ink); }
    .int-more { text-align: center; margin-top: 28px; font-size: .97rem; color: var(--muted); }
    .int-more a { color: var(--ink); font-weight: 600; border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
    .int-more a:hover { color: var(--accent); }

    /* ── Testimonials ── */
    .testi-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; }
    .testi-card { background: var(--bg-soft); border: none; border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; transition: background-color .2s, box-shadow .2s; }
    .testi-card:hover { background: #fff; box-shadow: var(--shadow-md); }
    .testi-top { background: none; padding: 32px 28px 24px; flex: 1; }
    .testi-company { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
    .testi-company img { height: 21px; width: auto; max-width: 114px; object-fit: contain; filter: grayscale(100%) opacity(.75); }
    .testi-stars { color: var(--g300); font-size: .8rem; letter-spacing: 1px; }
    .testi-quote { font-size: 1.12rem; color: var(--ink); line-height: 1.58; font-weight: 400; letter-spacing: -.014em; }
    .testi-bottom { padding: 18px 28px 26px; border-top: 1px solid rgba(11,27,51,.06); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
    .testi-author { display: flex; align-items: center; gap: 11px; min-width: 0; }
    .testi-av { width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: .75rem; font-weight: 600; color: #fff; flex-shrink: 0; overflow: hidden; }
    .testi-av img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
    .testi-name { font-size: .9rem; font-weight: 600; color: var(--ink); }
    .testi-role { font-size: .8rem; color: var(--muted); }
    .testi-link { font-size: .83rem; font-weight: 600; color: var(--ink); white-space: nowrap; display: inline-flex; align-items: center; gap: 5px; }
    .testi-link:hover { color: var(--accent); }
    .testi-link svg { width: 12px; height: 12px; transition: transform .2s; }
    .testi-link:hover svg { transform: translate(2px,-2px); }
    .testi-cta { background: var(--ink); border: none; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 34px 30px; color: #fff; }
    .testi-cta h3 { color: #fff; font-size: 1.45rem; font-weight: 500; letter-spacing: -.026em; margin-bottom: 14px; }
    .testi-cta p { color: rgba(255,255,255,.66); font-size: .97rem; margin-bottom: 24px; }

    /* ── FAQ ── */
    .faq-list { max-width: 840px; margin: 0 auto; border: none; border-radius: var(--r-lg); overflow: hidden; background: var(--bg-soft); }
    .faq-item { border-bottom: 1px solid rgba(11,27,51,.06); }
    .faq-item:last-child { border-bottom: none; }
    .faq-btn { width: 100%; background: none; border: none; padding: 26px 30px; display: grid; grid-template-columns: minmax(0,1fr) 26px; align-items: center; gap: 18px; cursor: pointer; text-align: left; }
    .faq-btn span { font-size: 1.1rem; font-weight: 500; color: var(--ink); letter-spacing: -.022em; }
    .faq-icon { width: 26px; height: 26px; border-radius: 50%; background: rgba(11,27,51,.06); display: flex; align-items: center; justify-content: center; font-size: 1rem; color: var(--muted); flex-shrink: 0; transition: background .2s, color .2s, transform .3s cubic-bezier(.2,.7,.3,1); }
    .faq-item.open .faq-icon { background: var(--accent); color: #fff; transform: rotate(45deg); }
    .faq-ans { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.4,0,.2,1); }
    .faq-item.open .faq-ans { max-height: 400px; }
    .faq-ans p { padding: 0 30px 26px; font-size: 1rem; color: var(--body); line-height: 1.72; max-width: 66ch; }
    .faq-ans a { color: var(--accent); font-weight: 500; }

    /* ── CTA ── */
    /* ── CTA: dark copy panel + fluid colour field with floating proof ── */
    .cta-section { background: var(--bg-soft); padding: clamp(72px, 8vw, 112px) 0; }
    .cta-split { display: grid; grid-template-columns: 1.04fr .96fr; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); gap: 0; align-items: stretch; }
    .cta-left { background: var(--ink); border-radius: var(--r-lg) 0 0 var(--r-lg); padding: clamp(42px, 4.8vw, 68px); display: flex; flex-direction: column; justify-content: center; min-width: 0; }
    .cta-left::before { display: none; }
    .cta-left h2 { color: #fff; margin-bottom: 16px; max-width: 13ch; }
    .cta-left p { color: rgba(255,255,255,.66); font-size: 1.06rem; margin-bottom: 28px; max-width: 38ch; }
    .cta-left-btns { display: flex; gap: 12px; flex-wrap: wrap; }
    /* the four perks moved under the copy — quiet, two up */
    .cta-perks { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 18px 26px; margin-top: 36px; padding-top: 30px; border-top: 1px solid rgba(255,255,255,.13); }
    .cta-perk { display: grid; grid-template-columns: 26px minmax(0,1fr); align-items: start; gap: 11px; }
    .cta-perk-icon { width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,.1); color: #c4bdd8; display: flex; align-items: center; justify-content: center; flex: none; box-shadow: none; }
    .cta-perk-icon svg { width: 15px; height: 15px; }
    .cta-perk-title { font-size: .9rem; font-weight: 600; color: #fff; }
    .cta-perk-desc { font-size: .82rem; color: rgba(255,255,255,.55); line-height: 1.45; margin-top: 2px; }
    /* right panel: a painted colour field, not a photo — nothing to load, nothing to break */
    /* Right panel — a "signal field": brand-blue wash, fine dot grid, tracking rings.
       Built entirely from gradients here; no photograph, no borrowed artwork. */
    .cta-right { position: relative; overflow: hidden; min-width: 0; padding: 0; border: none; border-radius: 0 var(--r-lg) var(--r-lg) 0; background: linear-gradient(158deg, #f6edff 0%, #ebe3ff 52%, #e2daf9 100%); min-height: clamp(500px, 44vw, 620px); display: flex; align-items: center; justify-content: center; }
    .cta-flow { position: absolute; inset: 0; pointer-events: none; }
    /* two restrained washes, well apart, no swirl */
    .cta-flow i { position: absolute; display: block; border-radius: 50%; filter: blur(60px); }
    .cta-flow i:nth-child(1) { width: 58%; height: 58%; left: -14%; top: -16%; background: #a29cb2; opacity: .5; }
    .cta-flow i:nth-child(2) { width: 50%; height: 50%; right: -16%; bottom: -18%; background: #1f1b2e; opacity: .28; }
    /* concentric tracking rings, centred low-right */
    .cta-flow i:nth-child(3) { width: 132%; height: 132%; left: 22%; top: 6%; filter: none; background: none; opacity: .5;
      border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(37,99,235,.14), 0 0 0 1px rgba(37,99,235,.10); }
    .cta-flow i:nth-child(4) { width: 92%; height: 92%; left: 42%; top: 26%; filter: none; background: none; opacity: .55;
      border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(37,99,235,.16); }
    /* fine dot grid over the whole field */
    .cta-flow i:nth-child(5) { inset: 0; width: auto; height: auto; filter: none; border-radius: 0; opacity: .5;
      background-image: radial-gradient(rgba(20,42,74,.16) 1px, transparent 1.2px); background-size: 22px 22px;
      -webkit-mask-image: radial-gradient(120% 95% at 50% 45%, #000 30%, transparent 78%);
              mask-image: radial-gradient(120% 95% at 50% 45%, #000 30%, transparent 78%); }
    .cta-right::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(105% 78% at 50% 46%, rgba(255,255,255,.62), rgba(255,255,255,0) 66%); }
    /* three real quotes, the middle one lifted forward */
    /* real quotes on a slow rotation — three visible, the middle one forward */
    .cta-proof:active { cursor: grabbing; }
    .cta-proof:focus-visible { outline: 2px solid rgba(37,99,235,.55); outline-offset: 6px; border-radius: 18px; }
    .cta-proof { position: relative; width: 100%; height: 100%; z-index: 1; touch-action: pan-y; cursor: grab; outline: none; }
    .cta-qc { position: absolute; top: 50%; left: 50%; width: 78%; background: #fff; border-radius: 16px; padding: 30px 32px; min-height: min(42%, 400px); display: flex; flex-direction: column; box-shadow: 0 22px 50px -18px rgba(11,27,51,.4); opacity: 0; visibility: hidden; transform: translate(-50%,-50%) scale(.8); transition: transform .7s cubic-bezier(.4,0,.2,1), opacity .7s ease, visibility .7s; }
    .cta-qc.is-active { opacity: 1; visibility: visible; z-index: 3; transform: translate(-50%,-50%) scale(1); }
    .cta-qc.is-prev   { opacity: .55; visibility: visible; z-index: 2; transform: translate(-133.5%,-50%) scale(.85); }
    .cta-qc.is-next   { opacity: .55; visibility: visible; z-index: 2; transform: translate(33.5%,-50%) scale(.85); }
    .cta-qc p { font-size: .95rem; line-height: 1.62; color: var(--ink); margin: 0 0 20px; }
    .cta-qc-by { margin-top: auto; display: flex; align-items: center; gap: 11px; }
    .cta-qc-av { width: 38px; height: 38px; border-radius: 50%; overflow: hidden; flex: none; background: #e8e4f5; }
    .cta-qc-av img { width: 100%; height: 100%; object-fit: cover; display: block; }
    .cta-qc-name { font-size: .88rem; font-weight: 650; color: var(--ink); line-height: 1.25; }
    .cta-qc-role { font-size: .78rem; color: var(--muted); line-height: 1.3; }
    .cta-qc-stars { margin-left: auto; color: #f5a623; font-size: .8rem; letter-spacing: 1px; flex: none; }
    .cta-qc.is-prev .cta-qc-stars, .cta-qc.is-next .cta-qc-stars { visibility: hidden; }
    /* dots */
    .cta-dots { position: absolute; left: 50%; bottom: clamp(18px, 3vw, 30px); transform: translateX(-50%); display: flex; gap: 8px; z-index: 4; }
    .cta-dots button { width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%; background: rgba(11,27,51,.24); cursor: pointer; transition: background .3s, width .3s; }
    .cta-dots button[aria-current="true"] { width: 22px; border-radius: 4px; background: rgba(11,27,51,.62); }
    .cta-dots button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
    @media (prefers-reduced-motion: no-preference) {
      .cta-flow i:nth-child(1) { animation: ctaFlowA 20s ease-in-out infinite alternate; }
      .cta-flow i:nth-child(2) { animation: ctaFlowB 26s ease-in-out infinite alternate; }
      .cta-flow i:nth-child(3) { animation: ctaRing 30s ease-in-out infinite alternate; }
      .cta-flow i:nth-child(4) { animation: ctaRing 24s ease-in-out infinite alternate-reverse; }
    }
    @media (prefers-reduced-motion: reduce) { .cta-qc { transition: none; } }
    @keyframes ctaFlowA { to { transform: translate(7%, -5%) scale(1.12); } }
    @keyframes ctaRing { to { transform: scale(1.06); } }
    @keyframes ctaFlowB { to { transform: translate(-6%, 6%) scale(1.08); } }
    /* form in the dark panel */
    .cta-form { display: grid; gap: 13px; max-width: 420px; margin-bottom: 16px; }
    .cta-field label { display: block; font-size: .8rem; font-weight: 600; color: rgba(255,255,255,.74); margin-bottom: 6px; }
    .cta-field input { width: 100%; padding: 13px 15px; border-radius: 10px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: #fff; font: inherit; font-size: .95rem; }
    .cta-field input::placeholder { color: rgba(255,255,255,.38); }
    .cta-field input:focus { outline: none; border-color: #a49eb4; background: rgba(255,255,255,.1); box-shadow: 0 0 0 3px rgba(122,168,255,.25); }
    .cta-form .btn { width: 100%; justify-content: center; margin-top: 3px; }
    .cta-alt { font-size: .88rem; color: rgba(255,255,255,.55); }
    .cta-alt a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

    /* ── Footer ── */
    .footer { background: var(--ink); padding: 74px 0 38px; color: rgba(255,255,255,.7); }
    .footer-top { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr 1fr; gap: 42px; margin-bottom: 58px; }
    .footer-brand img { height: 26px; margin-bottom: 18px; }
    .footer-brand p { font-size: .92rem; color: rgba(255,255,255,.6); line-height: 1.65; max-width: 30ch; margin-bottom: 20px; }
    .newsletter-form { display: flex; gap: .5rem; flex-wrap: wrap; }
    .newsletter-form input { flex: 1; min-width: 150px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: var(--r-sm); padding: .7rem .9rem; font-family: var(--ff); font-size: .9rem; color: #fff; outline: none; }
    .newsletter-form input::placeholder { color: rgba(255,255,255,.4); }
    .newsletter-form button { background: var(--accent); color: #fff; border: none; border-radius: var(--r-sm); padding: .7rem 1.2rem; font-size: .9rem; font-weight: 600; cursor: pointer; }
    .newsletter-form button:hover { background: var(--accent-dk); }
    .footer-col h5, .fs-col h5 { font-size: .9rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: #fff; margin-bottom: 17px; }
    .footer-col ul, .fs-col ul { list-style: none; display: flex; flex-direction: column; gap: .6rem; }
    .footer-col a, .fs-col a { font-size: .89rem; color: rgba(255,255,255,.66); transition: color .2s; line-height: 1.45; }
    .footer-col a:hover, .fs-col a:hover { color: #fff; }
    .footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 38px 28px; margin-bottom: 46px; align-items: start; }
    .fs-col--right { text-align: right; }
    .fs-col--right ul { align-items: flex-end; }
    .fs-badges { display: flex; flex-direction: column; align-items: flex-end; gap: 15px; margin-top: 22px; }
    .fs-badges .b-gdpr { height: 40px; width: auto; }
    .fs-badges .b-g2 { height: 92px; width: auto; }
    .fs-col .footer-demo-link { display: inline-flex; align-items: center; justify-content: center; margin-top: 22px; padding: 10px 16px; border: 1px solid rgba(255,255,255,.45); border-radius: 6px; color: #fff; font-size: .89rem; font-weight: 600; }
    .fs-col .footer-demo-link:hover, .fs-col .footer-demo-link:focus-visible { border-color: #fff; background: rgba(255,255,255,.1); color: #fff; }
    .footer-bottom { border-top: 1px solid rgba(255,255,255,.14); padding-top: 26px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
    .footer-bottom p, .fb-copy { font-size: .85rem; color: rgba(255,255,255,.5); }
    .fb-brand { display: flex; align-items: center; gap: 17px; flex-wrap: wrap; }
    .fb-logo { height: 26px; width: auto; }
    .fb-webspdy { display: inline-flex; opacity: .75; transition: opacity .2s; }
    .fb-webspdy:hover { opacity: 1; }
    .fb-webspdy img { height: 21px; width: auto; }


    /* =========================================================
       Pipeline spine — the three feature stages read as one
       continuous run from anonymous visitor to closed deal,
       instead of alternating left/right blocks.
       ========================================================= */
    .container:has(.feature-row) { counter-reset: stage; position: relative; }
    .container:has(.feature-row)::before {
      content: '';
      position: absolute; left: calc(var(--gut) + 17px); top: 40px; bottom: 40px; width: 2px;
      background: linear-gradient(180deg, var(--line) 0%, var(--line) 100%);
      transform-origin: top center;
    }
    .container:has(.feature-row)::after {
      content: '';
      position: absolute; left: calc(var(--gut) + 17px); top: 40px; bottom: 40px; width: 2px;
      background: var(--accent); transform-origin: top center; transform: scaleY(0);
    }

    .feature-row {
      grid-template-columns: 56px minmax(0, 1fr) minmax(0, 1.06fr);
      align-items: start;
      position: relative;
      counter-increment: stage;
    }
    .feature-row--flip .fr-vis { order: 0; }          /* no zigzag */
    .feature-row::before {
      content: counter(stage, decimal-leading-zero);
      position: absolute; left: 0; top: clamp(60px, 7.5vw, 104px);
      width: 36px; height: 36px; border-radius: 50%;
      background: var(--bg); border: 2px solid var(--accent); color: var(--accent);
      display: grid; place-items: center;
      font-size: .78rem; font-weight: 600; letter-spacing: 0;
      z-index: 1;
    }
    .fr-text { grid-column: 2; min-width: 0; padding-top: clamp(0px, .4vw, 6px); }
    .feature-row .fr-vis { grid-column: 3; min-width: 0; }
    .fr-stage-label { display: none; }

    /* =========================================================
       Bento boards — mixed-size tiles instead of repeating rows
       of identical cards.
       ========================================================= */
    .cap-grid, .uc-grid {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      gap: 16px;
    }
    .cap-card, .uc-card {
      display: flex; flex-direction: column;
      padding: 32px 30px 34px;
      border-radius: var(--r-lg);
    }
    .cap-card p, .uc-card p { margin-top: auto; padding-top: 10px; }

    /* platform board: two wide, two narrow */
    .cap-card:nth-child(1) { grid-column: 1; }
    .cap-card:nth-child(2) { grid-column: 1; }
    .cap-card:nth-child(3) { grid-column: 1; }
    .cap-card:nth-child(4) { grid-column: 1; }

    /* use-case board: 6-3-3 / 4-4-4 / 6-6 */
    .uc-card:nth-child(2) { grid-column: span 3; }
    .uc-card:nth-child(3) { grid-column: span 3; }
    .uc-card:nth-child(4) { grid-column: span 4; }
    .uc-card:nth-child(5) { grid-column: span 4; }
    .uc-card:nth-child(6) { grid-column: span 4; }
    .uc-card:nth-child(7) { grid-column: span 6; }
    .uc-card:nth-child(8) { grid-column: span 6; background: var(--ink); }

    /* =========================================================
       Lead score builder — the reader assembles a score and
       watches it cross the sales-ready threshold. Pure CSS:
       counters do the arithmetic, :has() reads the total.
       ========================================================= */
    .sb {
      counter-reset: score 0;
      background: var(--bg-soft);
      border-radius: var(--r-lg);
      padding: 26px 26px 24px;
      min-width: 0;
    }
    .sb-in { position: absolute; opacity: 0; pointer-events: none; }
    .sb-hd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
    .sb-eyebrow { font-size: .82rem; font-weight: 500; color: var(--muted); }

    .sb-rows { display: flex; flex-direction: column; gap: 8px; }
    .sb-row {
      display: grid; grid-template-columns: 22px minmax(0,1fr) auto;
      align-items: center; gap: 14px;
      background: #fff; border: 1px solid var(--line); border-radius: var(--r);
      padding: 14px 16px; cursor: pointer;
      transition: border-color .18s, background .18s;
    }
    .sb-row:hover { border-color: var(--g300); }
    .sb-check {
      width: 20px; height: 20px; border-radius: 6px;
      border: 1.5px solid var(--g300); background: #fff;
      display: grid; place-items: center;
      transition: background .18s, border-color .18s;
    }
    .sb-check::after {
      content: ''; width: 10px; height: 6px;
      border-left: 2px solid #fff; border-bottom: 2px solid #fff;
      transform: rotate(-45deg) scale(.4); opacity: 0;
      transition: opacity .18s, transform .18s;
    }
    .sb-name { display: block; font-size: .95rem; font-weight: 600; color: var(--ink); }
    .sb-sub  { display: block; font-size: .83rem; color: var(--muted); line-height: 1.45; }
    .sb-pts  { font-size: .92rem; font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; }

    /* checked states — and the counter arithmetic */
    .sb:has(#sig1:checked) .r1, .sb:has(#sig2:checked) .r2, .sb:has(#sig3:checked) .r3 {
      border-color: var(--accent); background: var(--accent-lt);
    }
    .sb:has(#sig1:checked) .r1 .sb-check,
    .sb:has(#sig2:checked) .r2 .sb-check,
    .sb:has(#sig3:checked) .r3 .sb-check { background: var(--accent); border-color: var(--accent); }
    .sb:has(#sig1:checked) .r1 .sb-check::after,
    .sb:has(#sig2:checked) .r2 .sb-check::after,
    .sb:has(#sig3:checked) .r3 .sb-check::after { opacity: 1; transform: rotate(-45deg) scale(1); }
    .sb:has(#sig1:checked) .r1 .sb-pts,
    .sb:has(#sig2:checked) .r2 .sb-pts,
    .sb:has(#sig3:checked) .r3 .sb-pts { color: var(--accent); }

    .sb:has(#sig1:checked) .r1 { counter-increment: score 25; }
    .sb:has(#sig2:checked) .r2 { counter-increment: score 30; }
    .sb:has(#sig3:checked) .r3 { counter-increment: score 37; }

    .sb-foot { margin-top: 34px; }
    .sb-meter {
      position: relative; display: flex; gap: 3px;
      height: 8px; background: var(--bg-2); border-radius: 99px;
      margin-bottom: 18px;
    }
    .sb-seg { display: block; width: 0; background: var(--accent); border-radius: 99px; transition: width .35s cubic-bezier(.2,.75,.3,1); }
    .sb:has(#sig1:checked) .s1 { width: 25%; }
    .sb:has(#sig2:checked) .s2 { width: 30%; }
    .sb:has(#sig3:checked) .s3 { width: 37%; }
    .sb-thresh { position: absolute; left: 70%; top: -4px; bottom: -4px; width: 2px; background: var(--ink); opacity: .28; }
    .sb-thresh i { position: absolute; left: 8px; top: -24px; font-style: normal; font-size: .72rem; color: var(--muted); white-space: nowrap; }

    .sb-total { display: flex; align-items: center; gap: 12px; }
    .sb-label { font-size: .9rem; color: var(--muted); }
    .sb-num { font-size: 2rem; font-weight: 700; color: var(--ink); letter-spacing: -.03em; line-height: 1; font-variant-numeric: tabular-nums; }
    .sb-num::after { content: counter(score); }
    .sb-badge {
      margin-left: auto; font-size: .8rem; font-weight: 600;
      color: var(--accent); background: var(--accent-lt);
      border: 1px solid var(--accent); border-radius: 99px; padding: 5px 14px;
      opacity: 0; transform: translateY(4px);
      transition: opacity .25s, transform .25s;
    }
    /* the badge appears only once the total clears the threshold */
    .sb:has(#sig1:checked):has(#sig2:checked):has(#sig3:checked) .sb-badge { opacity: 1; transform: none; }
    .sb-live { font-size: .8rem; color: var(--muted); }
    /* ── Motion: scroll-driven, additive only ── */
    @media (prefers-reduced-motion: no-preference) {
      @keyframes cRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
      /* scroll-driven reveals move only — never opacity — so content can
         never be left invisible if a scroll timeline fails to activate */
      @keyframes cSlide { from { transform: translateY(22px); } to { transform: none; } }
      @keyframes cGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
      @keyframes cDraw { from { stroke-dashoffset: 620; } to { stroke-dashoffset: 0; } }
      @keyframes cProg { to { transform: scaleX(1); } }

      .hero-left > * { animation: cRise .8s cubic-bezier(.2,.75,.3,1) both; }
      .hero-left > .pill { animation-delay: .04s; }
      .hero-left > h1 { animation-delay: .1s; }
      .hero-left > .hero-desc { animation-delay: .2s; }
      .hero-left > .hero-ctas { animation-delay: .28s; }
      .hero-left > .hero-note { animation-delay: .34s; }
      .hero-left > .hero-trust { animation-delay: .4s; }
      .hero-right { animation: cRise .95s cubic-bezier(.2,.75,.3,1) .28s both; }

      @supports (animation-timeline: view()) {
        body::after {
          content: ''; position: fixed; left: 0; right: 0; top: 103px; height: 2px;
          background: var(--accent); transform-origin: left center; transform: scaleX(0);
          z-index: 1002; pointer-events: none;
          animation: cProg linear both; animation-timeline: scroll(root);
        }
        .sec-hd, .cap-card, .uc-card, .testi-card, .partner-card, .int-chip,
        .fr-chip, .cta-perk, .faq-item, .cta-split, .dg-fig, .fr-text > * {
          animation: cSlide .9s linear both;
          animation-timeline: view(); animation-range: entry 3% cover 24%;
        }
        /* diagrams draw themselves as they arrive */
        .dg-fill {
          animation: cGrow 1s linear none;
          animation-timeline: view(); animation-range: entry 18% cover 40%;
        }
        .dg-curve { transform-box: view-box;
          stroke-dasharray: 620; stroke-dashoffset: 0;
          animation: cDraw 1s linear none;
          animation-timeline: view(); animation-range: entry 14% cover 42%;
        }
        @media (min-width: 901px) { .feature-row .fr-vis { position: sticky; top: 132px; } }
      }
    }

    /* ── Responsive ── */
    @media(max-width:1080px){
      :root { --gut: 26px; }
      .cap-grid, .uc-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .testi-grid, .partner-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .ecosystem-tools { grid-template-columns: repeat(4, minmax(0,1fr)); }
      .footer-top { grid-template-columns: repeat(3, 1fr); }
      .footer-brand { grid-column: 1/-1; }
    }
    @media(max-width:900px){
      :root { --gut: 22px; }
      .hero-grid { gap: 40px; }
      .hero h1 { max-width: none; }
      .hero-right { max-width: 100%; }
      .feature-row, .feature-row--flip { grid-template-columns: 1fr; gap: 36px; }
      .feature-row--flip .fr-vis { order: 0; }
      .fr-text h2 { max-width: none; }
      .cta-split { grid-template-columns: 1fr; }
      .cta-left { border-radius: var(--r-lg) var(--r-lg) 0 0; }
      .cta-right { border-radius: 0 0 var(--r-lg) var(--r-lg); min-height: clamp(530px, 78vw, 600px); }
      .cta-qc.is-prev { transform: translate(-141%,-50%) scale(.85); }
      .cta-qc.is-next { transform: translate(41%,-50%) scale(.85); }
      .footer-cols { grid-template-columns: repeat(2, 1fr); }
      .fs-col--right { text-align: left; }
      .fs-col--right ul { align-items: flex-start; }
      .fs-badges { align-items: flex-start; }
    }
    @media(max-width:620px){
      .cta-perks { grid-template-columns: 1fr; }
      body { font-size: 16px; }
      .section { padding: 64px 0; }
      .cap-grid, .uc-grid, .testi-grid, .partner-grid { grid-template-columns: 1fr; }
      .ecosystem-catalog { margin-top: 40px; padding-top: 30px; }
      .ecosystem-catalog-head { display: block; }
      .ecosystem-catalog-head a { display: inline-block; margin-top: 18px; }
      .ecosystem-tools { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .ecosystem-tools li { font-size: .8rem; }
      .footer-top, .footer-cols { grid-template-columns: 1fr; }
      .hero-ctas .btn { flex: 1; justify-content: center; }
      .dg { min-width: 460px; }
      .dg-fig { overflow-x: auto; }
    }

    /* ── Spine draws itself as the section is read ──
       The original rule lived here and used `animation-range: entry 30%
       cover 88%` on the same pseudo-element. Two scroll animations on
       one element, with different ranges, is a debugging trap even when
       the more specific one wins — so the live rule is kept in a single
       place, down with the rest of the mesh-section styling. ── */

    /* ── Bento + spine: responsive behaviour ── */
    @media (max-width: 1080px) {
      .cap-grid, .uc-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
      .cap-card:nth-child(1), .cap-card:nth-child(4),
      .uc-card:nth-child(1), .uc-card:nth-child(7), .uc-card:nth-child(8) { grid-column: span 6; }
      .cap-card:nth-child(2), .cap-card:nth-child(3),
      .uc-card:nth-child(2), .uc-card:nth-child(3) { grid-column: span 3; }
      .uc-card:nth-child(4), .uc-card:nth-child(5), .uc-card:nth-child(6) { grid-column: span 2; }
    }

    @media (max-width: 900px) {
      /* the spine steps aside: the number sits above each stage */
      .container:has(.feature-row)::before,
      .container:has(.feature-row)::after { display: none; }
      .feature-row { grid-template-columns: minmax(0, 1fr); padding-top: 26px; }
      .fr-text, .feature-row .fr-vis { grid-column: 1; }
      .feature-row::before {
        position: static; margin-bottom: 20px;
        width: 34px; height: 34px;
      }
      .cap-grid, .uc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
      .cap-card, .uc-card,
      .cap-card:nth-child(1), .cap-card:nth-child(2), .cap-card:nth-child(3), .cap-card:nth-child(4),
      .uc-card:nth-child(1), .uc-card:nth-child(2), .uc-card:nth-child(3), .uc-card:nth-child(4),
      .uc-card:nth-child(5), .uc-card:nth-child(6), .uc-card:nth-child(7), .uc-card:nth-child(8) {
        grid-column: span 1;
      }
      .uc-card:nth-child(1), .uc-card:nth-child(8) { grid-column: span 2; }
    }

    @media (max-width: 620px) {
      .cap-grid, .uc-grid { grid-template-columns: minmax(0, 1fr); }
      .cap-card, .uc-card,
      .uc-card:nth-child(1), .uc-card:nth-child(8) { grid-column: span 1; }
      .cap-card, .uc-card { padding: 26px 22px 28px; }
      .sb { padding: 20px 18px 20px; }
      .sb-row { grid-template-columns: 20px minmax(0,1fr) auto; gap: 11px; padding: 12px 13px; }
      .sb-sub { font-size: .79rem; }
      .sb-thresh i { left: -46px; }
    }

    /* keyboard focus for the score builder, since the inputs are visually hidden */
    .sb-in:focus-visible ~ .sb-rows .sb-row { outline: none; }
    .sb-in#sig1:focus-visible ~ .sb-rows .r1,
    .sb-in#sig2:focus-visible ~ .sb-rows .r2,
    .sb-in#sig3:focus-visible ~ .sb-rows .r3 { outline: 2px solid var(--accent); outline-offset: 2px; }

    /* no :has() support — show the finished state rather than an empty one */
    @supports not selector(:has(*)) {
      .sb-num::after { content: '92'; }
      .sb-seg.s1 { width: 25%; } .sb-seg.s2 { width: 30%; } .sb-seg.s3 { width: 37%; }
      .sb-badge { opacity: 1; transform: none; }
      .sb-check { background: var(--accent); border-color: var(--accent); }
      .sb-check::after { opacity: 1; transform: rotate(-45deg) scale(1); }
      .container:has(.feature-row)::before, .container:has(.feature-row)::after { display: none; }
    }

    /* =========================================================
       Hero stage — soft colour field behind the product panel,
       leads flying in from both sides, then the feed filling in
       row by row. Time-based, so it plays once on arrival.
       ========================================================= */
    .hero { isolation: isolate; }
    .hero::before {
      display: block; content: '';
      position: absolute; inset: -10% -20% auto -20%; height: 78%;
      pointer-events: none; z-index: 0;
      background:
        radial-gradient(38% 46% at 18% 30%, rgba(37,99,235,.16) 0%, rgba(37,99,235,0) 70%),
        radial-gradient(34% 44% at 82% 22%, rgba(99,102,241,.13) 0%, rgba(99,102,241,0) 72%),
        radial-gradient(46% 40% at 50% 82%, rgba(14,165,233,.10) 0%, rgba(14,165,233,0) 70%);
    }
    .hero .container { position: relative; z-index: 1; }

    .hero-right { position: relative; }

    /* the leads themselves */
    .lead-stream { position: absolute; inset: -70px -8% 0; pointer-events: none; z-index: 2; }
    .lead {
      position: absolute; top: var(--y, 0);
      width: 40px; height: 40px; border-radius: 50%;
      display: grid; place-items: center;
      background: #fff; color: var(--ink);
      border: 1px solid var(--line);
      box-shadow: 0 12px 26px -14px rgba(11,27,51,.30);
      will-change: transform, opacity;
      font-size: .72rem; font-weight: 700; letter-spacing: .01em;
      opacity: 0;
    }
    .lead svg { width: 21px; height: 21px; color: var(--muted); }
    .lead.l3 svg { color: #fff; }
    .lead.l2, .lead.l5 { width: 36px; height: 36px; }
    .lead.l2 svg, .lead.l5 svg { width: 19px; height: 19px; }
    .lead.l3 { background: var(--accent); color: #fff; border-color: var(--accent); }

    .l1 { --y: 8px;   left: 0; }
    .l2 { --y: 96px;  left: 4%; }
    .l3 { --y: 178px; left: 1%; }
    .l4 { --y: 26px;  right: 0; }
    .l5 { --y: 118px; right: 3%; }
    .l6 { --y: 196px; right: 1%; }

    @media (prefers-reduced-motion: no-preference) {
      /* leads travel in from the page edges and are absorbed by the panel */
      @keyframes leadInL {
        0%   { opacity: 0; transform: translate3d(-170px, -8px, 0) scale(.94); }
        13%  { opacity: 1; }
        72%  { opacity: 1; }
        100% { opacity: 0; transform: translate3d(160px, 104px, 0) scale(.56); }
      }
      @keyframes leadInR {
        0%   { opacity: 0; transform: translate3d(170px, -8px, 0) scale(.94); }
        13%  { opacity: 1; }
        72%  { opacity: 1; }
        100% { opacity: 0; transform: translate3d(-160px, 104px, 0) scale(.56); }
      }
      /* the panel registers each arrival */
      @keyframes panelPulse {
        0%, 100% { box-shadow: var(--shadow-xl); }
        50%      { box-shadow: var(--shadow-xl), 0 0 0 8px rgba(37,99,235,.07); }
      }
      /* feed rows appear one after another */
      @keyframes rowIn {
        from { opacity: 0; transform: translateY(12px); }
        to   { opacity: 1; transform: none; }
      }
      @keyframes softIn { from { opacity: 0; } to { opacity: 1; } }

      .lead { animation: leadInL 3.1s cubic-bezier(.36,.06,.5,1) both; }
      .l4, .l5, .l6 { animation-name: leadInR; }
      .l1 { animation-delay: .5s; }
      .l4 { animation-delay: .78s; }
      .l2 { animation-delay: 1.06s; }
      .l5 { animation-delay: 1.34s; }
      .l3 { animation-delay: 1.62s; }
      .l6 { animation-delay: 1.9s; }

      .mock-win { animation: panelPulse 1.8s cubic-bezier(.4,0,.3,1) 2.4s 2; }

      /* the feed fills in only once the leads have arrived */
      .mock-body-hd { animation: softIn .7s ease 2.5s both; }
      .mock-body .ia-card { animation: rowIn .75s cubic-bezier(.22,.61,.36,1) both; }
      .mock-body .ia-card:nth-child(1) { animation-delay: 2.8s; }
      .mock-body .ia-card:nth-child(2) { animation-delay: 3.05s; }
      .mock-body .ia-card:nth-child(3) { animation-delay: 3.3s; }
    }

    @media (max-width: 900px) {
      .lead-stream { display: none; }
      .hero::before { inset: -8% -30% auto -30%; height: 60%; }
    }

    /* ── Capability tiles: tighter type, each with its own schematic ── */
    .cap-card { padding: 34px 32px 30px; }
    .cap-card h3 { font-size: 1.16rem; margin-bottom: 8px; }
    .cap-card p { margin-top: 0; padding-top: 0; font-size: .95rem; line-height: 1.6; max-width: 46ch; }
    .cap-card .icon-box { margin-bottom: 22px; }

    .cap-viz {
      display: block; width: 100%; max-width: 300px; height: auto;
      margin-top: auto; padding-top: 30px;
      overflow: visible;
    }
    .cv-dot   { fill: var(--g300); }
    .cv-wire  { fill: none; stroke: var(--g300); stroke-width: 1.5; stroke-linecap: round; }
    .cv-wire--on { stroke: var(--accent); }
    .cv-node  { fill: none; stroke: var(--g300); stroke-width: 1.5; }
    .cv-node--on { stroke: var(--accent); }
    .cv-end   { fill: var(--accent); }
    .cv-grid  { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 5; }
    .cv-spark { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .cv-live  { fill: var(--accent); }
    .cv-track { fill: var(--bg-2); }
    .cv-fill  { fill: var(--accent); }
    .cv-fill--low { fill: var(--g300); }
    .cv-thresh { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 3 4; opacity: .45; }
    .cv-arrow { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }


    @media (prefers-reduced-motion: no-preference) {
      @supports (animation-timeline: view()) {
        @keyframes cvDraw { from { stroke-dashoffset: var(--len, 300); } to { stroke-dashoffset: 0; } }
        @keyframes cvGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
        @keyframes cvPing { 0% { r: 5; opacity: 1; } 70% { r: 9; opacity: 0; } 100% { r: 5; opacity: 0; } }

        .cv-spark { --len: 320; stroke-dasharray: 320;
          animation: cvDraw 1.1s linear none;
          animation-timeline: view(); animation-range: entry 15% cover 42%; }
        .cv-fill { transform-box: fill-box; transform-origin: left center;
          animation: cvGrow .9s linear none;
          animation-timeline: view(); animation-range: entry 18% cover 44%; }
      }
      .cv-live { animation: cvPing 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
    }

    @media (max-width: 620px) {
      .cap-viz { max-width: 100%; padding-top: 24px; }
    }

    /* =========================================================
       Capability rows — four equal full-width blocks, one surface,
       text left and its schematic right on a shared baseline.
       ========================================================= */
    .cap-grid {
      display: grid;
      grid-template-columns: minmax(0, 1fr);
      gap: 12px;
    }
    .cap-card {
      display: grid;
      grid-template-columns: 34px minmax(0, 1fr) minmax(0, 720px);
      align-items: center;
      gap: clamp(20px, 3vw, 44px);
      min-height: 152px;
      padding: 30px clamp(26px, 3vw, 40px);
      background: var(--bg-soft);
      border: 1px solid transparent;
      border-radius: var(--r-lg);
      transition: background-color .22s ease, border-color .22s ease;
    }
    .cap-card:hover { background: #fff; border-color: var(--line); box-shadow: none; }

    .cap-card .icon-box {
      width: 30px; height: 30px; margin: 0; align-self: center;
      color: var(--accent);
    }
    .cap-card .icon-box svg { width: 26px; height: 26px; stroke-width: 1.4; }

    .cap-card h3 { font-size: 1.14rem; margin: 0 0 7px; letter-spacing: -.018em; }
    .cap-card p  { margin: 0; padding: 0; font-size: .97rem; line-height: 1.62; color: var(--muted); max-width: 38ch; }

    .cap-viz {
      display: block; width: 100%; max-width: 300px; height: 58px;
      margin: 0 0 0 auto; padding: 0;
      overflow: visible;
    }

    @media (max-width: 900px) {
      .cap-card {
        grid-template-columns: 30px minmax(0, 1fr);
        min-height: 0; gap: 16px 20px;
        padding: 26px 24px;
      }
      .cap-viz { grid-column: 2; max-width: 260px; margin-left: 0; margin-top: 4px; }
    }
    @media (max-width: 620px) {
      .cap-card { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; }
      .cap-card .icon-box { margin-bottom: 2px; }
      .cap-viz { grid-column: 1; max-width: 100%; }
    }

    /* ── Use-case board: even tiles, one surface ── */
    .uc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
    .uc-card,
    .uc-card:nth-child(1), .uc-card:nth-child(2), .uc-card:nth-child(3), .uc-card:nth-child(4),
    .uc-card:nth-child(5), .uc-card:nth-child(6), .uc-card:nth-child(7), .uc-card:nth-child(8) {
      grid-column: auto;
      background: var(--bg-soft);
      border: 1px solid transparent;
      border-radius: var(--r-lg);
      padding: 30px 26px 32px;
      min-height: 232px;
      display: flex; flex-direction: column;
    }
    .uc-card:hover { background: #fff; border-color: var(--line); box-shadow: none; }
    .uc-card h3 { color: var(--ink); font-size: 1.04rem; margin: 0 0 8px; }
    .uc-card p  { color: var(--muted); margin: 0; padding: 0; font-size: .93rem; line-height: 1.6; }
    .uc-card .icon-box { margin-bottom: 20px; color: var(--accent); }

    @media (max-width: 1080px) { .uc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
    @media (max-width: 900px)  { .uc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .uc-card { min-height: 0; } }
    @media (max-width: 620px)  { .uc-grid { grid-template-columns: minmax(0, 1fr); } }

    /* ── Block illustrations: small product vignettes, one per row ── */
    .cap-card { min-height: 360px; align-items: center; }
    .cap-card .cap-txt, .cap-card > div:not(.icon-box) { align-self: center; }
    .cap-viz { width: 100%; max-width: 720px; height: auto; aspect-ratio: 300 / 120; margin: 0 0 0 auto; align-self: center; }

    .cvs-soft rect   { fill: var(--bg-2); }
    .cvs-card rect   { fill: #fff; stroke: var(--line); stroke-width: 1; }
    .cvs-win         { fill: #fff; stroke: var(--line); stroke-width: 1; }
    .cvs-winbar      { stroke: var(--line); stroke-width: 1; }
    .cvs-dots circle { fill: var(--g300); }
    .cvs-tick path, .cvs-tick2 { stroke: var(--g300); stroke-width: 3; stroke-linecap: round; fill: none; }
    .cvs-tick2--off  { stroke: var(--bg-2); }
    .cvs-wire        { fill: none; stroke: var(--g300); stroke-width: 1.5; stroke-linecap: round; }
    .cvs-wire--on    { stroke: var(--accent); }
    .cvs-hub         { fill: var(--accent); }
    .cvs-hubmark     { stroke: #fff; stroke-width: 2; stroke-linecap: round; fill: none; }
    .cvs-avatar circle { fill: var(--bg-2); }
    .cvs-grid        { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 5; fill: none; }
    .cvs-spark       { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .cvs-live        { fill: var(--accent); }
    .cvs-pulse circle { fill: var(--accent); opacity: .16; }
    .cvs-face        { fill: var(--bg-2); }
    .cvs-check       { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
    .cvs-check--off  { stroke: var(--g300); }
    .cvs-ring        { fill: none; stroke: var(--bg-2); stroke-width: 7; }
    .cvs-ring--on    { stroke: var(--accent); stroke-linecap: round;
                       stroke-dasharray: 239; stroke-dashoffset: 19;
                       transform: rotate(-90deg); transform-origin: 252px 60px; }
    .cvs-score       { fill: var(--ink); font-family: var(--ff); font-size: 26px; font-weight: 600; letter-spacing: -.03em; }
    .cvs-app rect    { fill: #fff; stroke: var(--line); stroke-width: 1; }
    .cvs-glyph       { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .cvs-arrow       { fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
    .cvs-loop        { fill: none; stroke: var(--g300); stroke-width: 1.5; stroke-dasharray: 4 5; stroke-linecap: round; }

    @media (prefers-reduced-motion: no-preference) {
      @keyframes cvsPing { 0% { transform: scale(1); opacity: .22; } 70% { transform: scale(2.1); opacity: 0; } 100% { transform: scale(1); opacity: 0; } }
      .cvs-pulse circle { transform-box: fill-box; transform-origin: center; animation: cvsPing 2.6s ease-out infinite; }
      .cvs-pulse circle:nth-child(2) { animation-delay: 1.3s; }
      .cvs-live { transform-box: fill-box; transform-origin: center; animation: cvsPing 2.6s ease-out infinite; }

      @supports (animation-timeline: view()) {
        @keyframes cvsDraw { from { stroke-dashoffset: 320; } to { stroke-dashoffset: 0; } }
        @keyframes cvsRing { from { stroke-dashoffset: 239; } to { stroke-dashoffset: 19; } }
        .cvs-spark { stroke-dasharray: 320;
          animation: cvsDraw 1.1s linear none;
          animation-timeline: view(); animation-range: entry 16% cover 44%; }
        .cvs-ring--on {
          animation: cvsRing 1.2s linear none;
          animation-timeline: view(); animation-range: entry 16% cover 46%; }
      }
    }

    @media (max-width: 900px) {
      .cap-viz { max-width: 100%; height: auto; margin-left: 0; }
      .cap-card { min-height: 0; }
    }

    /* ── Surfaces: soft blue tint, no flat grey ── */
    .cap-card, .uc-card {
      background: linear-gradient(168deg, #f8efff 0%, #f0e7ff 100%);
      border: 1px solid #efebfa;
    }
    .cap-card:hover, .uc-card:hover {
      background: #fff;
      border-color: #e2daf9;
      box-shadow: 0 20px 44px -30px rgba(37,99,235,.30);
    }
    .section--slate { background: #fbfaf6; }
    .sb { background: linear-gradient(168deg, #f8efff 0%, #f0e7ff 100%); }
    .sb-row { border-color: #efebfa; }
    .faq-list { background: linear-gradient(168deg, #faf9f5 0%, #f5f2fd 100%); }
    .int-chip { background: #f6edff; }
    .int-chip:hover { background: #fff; box-shadow: 0 14px 30px -22px rgba(37,99,235,.35); }
    .hero-right { background: linear-gradient(180deg, #f6edff 0%, #eee6ff 100%); }
    .logo-bar-logos img { filter: grayscale(100%) opacity(.5); }
    .logo-bar-logos img:hover { filter: none; }

    /* ── Tinted bands: a soft field rather than a flat fill, fading to
       near-white at the edges so the seams with white sections soften ── */
    .section--slate {
      background:
        radial-gradient(68% 58% at 12% 4%,  rgba(37,99,235,.085) 0%, rgba(37,99,235,0) 62%),
        radial-gradient(58% 52% at 88% 16%, rgba(99,102,241,.075) 0%, rgba(99,102,241,0) 66%),
        radial-gradient(70% 46% at 60% 100%, rgba(14,165,233,.06) 0%, rgba(14,165,233,0) 68%),
        linear-gradient(180deg, #fefdf9 0%, #f5f2fd 46%, #fcfbf7 100%);
    }


    /* ── Use-case tiles: crafted icon plate, tighter type, live hover ── */
    .uc-grid { gap: 14px; }
    .uc-card,
    .uc-card:nth-child(1), .uc-card:nth-child(2), .uc-card:nth-child(3), .uc-card:nth-child(4),
    .uc-card:nth-child(5), .uc-card:nth-child(6), .uc-card:nth-child(7), .uc-card:nth-child(8) {
      position: relative;
      min-height: 0;
      padding: 28px 26px 30px;
      /* no overflow:hidden — it would clip the proof badge, which is
         deliberately offset outside the hero-right box */
      transition: background-color .22s ease, border-color .22s ease, box-shadow .22s ease;
    }

    /* icon sits on its own plate rather than floating */
    .uc-card .icon-box {
      width: 44px; height: 44px;
      display: grid; place-items: center;
      margin-bottom: 22px;
      background: #fff !important;
      border: 1px solid #efebfa;
      border-radius: 13px;
      color: var(--accent);
      transition: background-color .22s ease, border-color .22s ease, color .22s ease;
    }
    .uc-card .icon-box svg { width: 21px; height: 21px; stroke-width: 1.6; }

    .uc-card h3 {
      font-size: 1.05rem; font-weight: 600; letter-spacing: -.018em;
      margin: 0 0 9px; color: var(--ink);
    }
    .uc-card p {
      font-size: .92rem; line-height: 1.64; color: var(--muted);
      margin: 0; padding: 0;
    }

    /* a hairline of accent draws across the top edge on hover */
    .uc-card::after {
      content: ''; position: absolute; left: 0; right: 0; top: 0; height: 2px;
      background: var(--accent); transform: scaleX(0); transform-origin: left center;
      transition: transform .3s cubic-bezier(.22,.61,.36,1);
    }
    .uc-card:hover::after { transform: scaleX(1); }
    .uc-card:hover .icon-box { background: var(--accent) !important; border-color: var(--accent); color: #fff; }
    .uc-card:hover { box-shadow: 0 22px 46px -30px rgba(37,99,235,.34); }

    /* ── Capability rows: explicit placement so the illustration cannot
       wrap into the icon column, and normal row height ── */
    .cap-card {
      grid-template-columns: 34px minmax(0, 1fr) minmax(0, 380px);
      grid-template-rows: auto auto;
      column-gap: clamp(20px, 3vw, 40px);
      row-gap: 8px;
      align-items: center;
      min-height: 0;
      padding: 30px clamp(24px, 2.6vw, 36px);
    }
    .cap-card .icon-box { grid-column: 1; grid-row: 1 / span 2; align-self: center; margin: 0; }
    .cap-card h3 { grid-column: 2; grid-row: 1; align-self: end; margin: 0; }
    .cap-card p  { grid-column: 2; grid-row: 2; align-self: start; margin: 0; max-width: 52ch; }
    .cap-viz {
      grid-column: 3; grid-row: 1 / span 2;
      width: 100%; max-width: 372px; height: auto;
      aspect-ratio: 332 / 200;
      margin: 0 0 0 auto; align-self: center;
    }

    @media (max-width: 900px) {
      .cap-card {
        grid-template-columns: 34px minmax(0, 1fr);
        grid-template-rows: auto auto auto;
        padding: 26px 24px;
      }
      .cap-card .icon-box { grid-row: 1; }
      .cap-card h3 { grid-column: 2; grid-row: 1; align-self: center; }
      .cap-card p  { grid-column: 2; grid-row: 2; }
      .cap-viz { grid-column: 2; grid-row: 3; max-width: 100%; margin: 10px 0 0; }
    }
    @media (max-width: 620px) {
      .cap-card { grid-template-columns: minmax(0, 1fr); padding: 24px 20px; }
      .cap-card .icon-box, .cap-card h3, .cap-card p, .cap-viz { grid-column: 1; }
      .cap-card .icon-box { grid-row: 1; margin-bottom: 6px; }
      .cap-card h3 { grid-row: 2; }
      .cap-card p  { grid-row: 3; }
      .cap-viz     { grid-row: 4; }
    }

    /* =========================================================
       Ambient field — a periwinkle ground with saturated blooms,
       with the page content reading as a white sheet on top.
       ========================================================= */
    body {
      background:
        radial-gradient(120% 60% at 50% 0%, #ebe3ff 0%, #f2e9ff 38%, #ffffff 72%),
        #ffffff;
    }

    /* the blooms live behind everything, fixed so they stay put on scroll */
    body::before {
      content: '';
      position: fixed; inset: 0; z-index: -1; pointer-events: none;
      background:
        radial-gradient(30% 26% at -4% 26%,  rgba(60,90,255,.50) 0%, rgba(60,90,255,0) 62%),
        radial-gradient(24% 22% at 6% 44%,   rgba(0,180,255,.38) 0%, rgba(0,180,255,0) 66%),
        radial-gradient(30% 26% at 104% 30%, rgba(60,90,255,.46) 0%, rgba(60,90,255,0) 62%),
        radial-gradient(24% 22% at 94% 50%,  rgba(0,180,255,.34) 0%, rgba(0,180,255,0) 66%);
      filter: blur(64px);
      opacity: .5;
    }

    /* the hero sits directly on the field */
    .hero { background: transparent; }
    .hero::before {
      display: block; content: '';
      position: absolute; inset: -12% -18% auto -18%; height: 86%;
      z-index: 0; pointer-events: none;
      background:
        radial-gradient(40% 48% at 16% 26%, rgba(72,96,255,.20) 0%, rgba(72,96,255,0) 68%),
        radial-gradient(36% 44% at 84% 18%, rgba(120,110,255,.18) 0%, rgba(120,110,255,0) 70%),
        radial-gradient(50% 40% at 50% 92%, rgba(0,170,255,.13) 0%, rgba(0,170,255,0) 72%);
    }

    /* white sheets float above the field */
    .section:not(.section--slate):not(.section--dark):not(.section--stories):not(.mcp):not(.closing):not(.prob):not(.section--mesh),
    .logo-bar { background: #fff; }

    /* tinted bands pick up the periwinkle rather than plain blue */
    .section--slate {
      background:
        radial-gradient(66% 56% at 10% 2%,  rgba(72,96,255,.10) 0%, rgba(72,96,255,0) 64%),
        radial-gradient(58% 50% at 90% 14%, rgba(126,112,255,.09) 0%, rgba(126,112,255,0) 68%),
        radial-gradient(70% 46% at 58% 100%, rgba(0,170,255,.07) 0%, rgba(0,170,255,0) 70%),
        linear-gradient(180deg, #fdfcf8 0%, #f1e8ff 46%, #fcfbf7 100%);
    }

    /* the product panel reads as glass on the field */
    .hero-right { background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(238,242,255,.86) 100%); }

    @media (max-width: 900px) {
      body::before { filter: blur(48px); opacity: .42; }
    }

    /* =========================================================
       Palette — violet primary, near-black type, pale lavender
       surfaces and a sky wash behind the hero.
       ========================================================= */
    :root {
      --accent:    #1f1b2e;
      --accent-dk: #6d28d9;
      --accent-lt: #f4f1fd;
      --hilite:    #1f1b2e;

      --ink:    #1f1b2e;
      --ink-2:  #2b292f;
      --body:   #4b4852;
      --muted:  #6e6880;

      --bg:      #ffffff;
      --bg-soft: #faf9ff;
      --bg-2:    #efebfa;
      --line:    #e9e1ff;
      --line-2:  #f5f2fd;

      --g900:#1f1b2e; --g700:#4b4852; --g500:#6e6880;
      --g300:#c8c1dc; --g200:#e9e1ff; --g100:#f5f2fd; --g50:#faf9ff;
      --navy:#1f1b2e; --slate:#2b292f;
      --indigo:#1f1b2e; --indigo-dk:#6d28d9; --indigo-lt:#f4f1fd;
      --violet:#1f1b2e; --violet-lt:#f4f1fd;
      --blue:#1f1b2e;  --blue-lt:#f4f1fd;

      --dg-ink: #1f1b2e;
      --dg-line: #e4dcfb;
      --dg-soft: #efebfa;
      --dg-accent: #1f1b2e;
      --dg-muted: #6e6880;
    }

    /* page ground: pale lavender, resolving to white */
    body {
      background:
        linear-gradient(180deg, #f7eeff 0%, #fbfbfe 40%, #ffffff 70%),
        #ffffff;
    }
    body::before {
      background:
        radial-gradient(30% 26% at -4% 24%,  rgba(31,27,46,.34) 0%, rgba(31,27,46,0) 64%),
        radial-gradient(26% 22% at 8% 46%,   rgba(120,170,255,.30) 0%, rgba(120,170,255,0) 66%),
        radial-gradient(30% 26% at 104% 28%, rgba(31,27,46,.30) 0%, rgba(31,27,46,0) 64%),
        radial-gradient(26% 22% at 92% 50%,  rgba(120,170,255,.26) 0%, rgba(120,170,255,0) 66%);
      filter: blur(70px);
      opacity: .55;
    }

    /* hero: a soft sky wash under the headline, lavender at the edges */
    .hero::before {
      inset: -8% -16% auto -16%; height: 92%;
      background:
        radial-gradient(52% 44% at 50% 62%, rgba(150,190,240,.34) 0%, rgba(150,190,240,0) 70%),
        radial-gradient(40% 40% at 14% 24%, rgba(31,27,46,.14) 0%, rgba(31,27,46,0) 70%),
        radial-gradient(38% 38% at 86% 20%, rgba(140,120,255,.13) 0%, rgba(140,120,255,0) 70%);
    }
    .hero-right { background: linear-gradient(180deg, rgba(255,255,255,.66) 0%, rgba(240,238,253,.85) 100%); }

    /* tinted bands take the lavender cast */
    .section--slate {
      background:
        radial-gradient(64% 54% at 10% 2%,  rgba(31,27,46,.09) 0%, rgba(31,27,46,0) 64%),
        radial-gradient(56% 48% at 90% 14%, rgba(140,120,255,.08) 0%, rgba(140,120,255,0) 68%),
        radial-gradient(70% 44% at 58% 100%, rgba(140,180,255,.07) 0%, rgba(140,180,255,0) 70%),
        linear-gradient(180deg, #fdfcf8 0%, #f4f1fd 46%, #fbfaff 100%);
    }

    /* surfaces */
    .cap-card, .uc-card {
      background: linear-gradient(168deg, #fbfaff 0%, #f4f1fd 100%);
      border: 1px solid #efebfa;
    }
    .cap-card:hover, .uc-card:hover {
      background: #fff; border-color: #e0d8f6;
      box-shadow: 0 22px 46px -30px rgba(31,27,46,.34);
    }
    .uc-card .icon-box { border-color: #efebfa; }
    .sb { background: linear-gradient(168deg, #fbfaff 0%, #f4f1fd 100%); }
    .sb-row { border-color: #efebfa; }
    .faq-list { background: linear-gradient(168deg, #fbfaff 0%, #f4ebff 100%); }
    .int-chip { background: #faf9ff; }
    .int-chip:hover { background: #fff; box-shadow: 0 14px 30px -22px rgba(31,27,46,.36); }

    /* buttons: violet primary, near-black secondary, pill shaped */
    .btn { border-radius: 999px; }
    .btn-indigo { background: var(--accent); color: #fff; border-color: var(--accent); }
    .btn-indigo:hover { background: var(--accent-dk); border-color: var(--accent-dk); }
    .btn-ghost, .btn-hero-watch { background: #fff; color: var(--ink); border-color: var(--line); }
    .btn-ghost:hover, .btn-hero-watch:hover { border-color: var(--ink); }
    .navbar-actions .btn-indigo { background: var(--ink); border-color: var(--ink); }
    .navbar-actions .btn-indigo:hover { background: var(--accent); border-color: var(--accent); }

    /* ── Capability illustrations: layered product vignettes ── */
    .cap-viz { aspect-ratio: 332 / 200; max-width: 380px; overflow: visible; }

    .a-glow          { fill: var(--accent); opacity: .10; }
    .a-chip rect,
    .a-card rect,
    .a-win, .a-node rect { fill: #fff; stroke: #ece4ff; stroke-width: 1; }
    .a-glyph         { fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
    .a-glyph2        { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .a-bar path      { stroke: #ded8f0; stroke-width: 4; stroke-linecap: round; fill: none; }
    .a-bar2          { stroke: #ded8f0; stroke-width: 4; stroke-linecap: round; fill: none; }
    .a-bar3          { stroke: #cec7e3; stroke-width: 4; stroke-linecap: round; fill: none; }
    .a-wire          { fill: none; stroke: #d8d0ee; stroke-width: 1.6; stroke-linecap: round; }
    .a-wire--on      { stroke: var(--accent); }
    .a-hub           { fill: url(#g1a); }
    .a-hubmark       { stroke: #fff; stroke-width: 2.4; stroke-linecap: round; fill: none; }
    .a-av circle     { fill: #efebfa; }
    .a-spark path    { fill: var(--accent); opacity: .5; }

    .a-winbar        { stroke: #ece4ff; stroke-width: 1; }
    .a-dots circle   { fill: #ded8f0; }
    .a-live          { fill: var(--accent-lt); }
    .a-livedot       { fill: var(--accent); }
    .a-grid          { stroke: #efe6ff; stroke-width: 1; stroke-dasharray: 2 5; fill: none; }
    .a-area          { fill: url(#g2a); opacity: .12; }
    .a-line          { fill: none; stroke: url(#g2a); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
    .a-tip           { fill: var(--accent); }
    .a-ping          { fill: var(--accent); opacity: .22; }
    .a-pulsering circle { fill: var(--accent); opacity: .14; }
    .a-avdot circle  { fill: var(--accent); }

    .a-face          { fill: #efebfa; }
    .a-facemark      { fill: #b7b1c9; }
    .a-rule          { stroke: #efe6ff; stroke-width: 1; }
    .a-check         { fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
    .a-track         { fill: none; stroke: #efebfa; stroke-width: 9; }
    .a-arc           { fill: none; stroke: url(#g3a); stroke-width: 9; stroke-linecap: round;
                       stroke-dasharray: 264; stroke-dashoffset: 21;
                       transform: rotate(-90deg); transform-origin: 254px 66px; }
    .a-score         { fill: var(--ink); font-family: var(--ff); font-size: 27px; font-weight: 700; letter-spacing: -.03em; }
    .a-badge         { fill: #fff; stroke: #e5ddfc; stroke-width: 1; }
    .a-badgemark     { fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }

    .a-flow path     { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 6 6; }
    .a-arrowhead     { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
    .a-loop          { fill: none; stroke: #d8d0ee; stroke-width: 1.6; stroke-dasharray: 4 6; stroke-linecap: round; }
    .a-toggle rect   { fill: var(--accent); }
    .a-toggle circle { fill: #fff; }

    @media (prefers-reduced-motion: no-preference) {
      @keyframes aPing  { 0% { transform: scale(1); opacity: .28; } 70% { transform: scale(2.2); opacity: 0; } 100% { transform: scale(1); opacity: 0; } }
      @keyframes aFlow  { to { stroke-dashoffset: -24; } }
      @keyframes aFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

      .a-ping, .a-pulsering circle { transform-box: fill-box; transform-origin: center; animation: aPing 2.6s ease-out infinite; }
      .a-pulsering circle:nth-child(2) { animation-delay: 1.3s; }
      .a-flow path { animation: aFlow 1.6s linear infinite; }
      .a-spark path { transform-box: fill-box; transform-origin: center; animation: aFloat 3.4s ease-in-out infinite; }

      @supports (animation-timeline: view()) {
        @keyframes aDraw { from { stroke-dashoffset: 300; } to { stroke-dashoffset: 0; } }
        @keyframes aArc  { from { stroke-dashoffset: 264; } to { stroke-dashoffset: 21; } }
        .a-line { stroke-dasharray: 300;
          animation: aDraw 1.2s linear none;
          animation-timeline: view(); animation-range: entry 16% cover 44%; }
        .a-arc {
          animation: aArc 1.3s linear none;
          animation-timeline: view(); animation-range: entry 16% cover 46%; }
      }
    }

    /* ── Diagram motion: the flow diagram runs continuously, the
       journey draws itself as the stage is read ── */
    @media (prefers-reduced-motion: no-preference) {
      @keyframes dgFlow  { to { stroke-dashoffset: -28; } }
      @keyframes dgBreath{ 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
      @keyframes dgHalo  { 0% { transform: scale(.9); opacity: .5; } 70% { transform: scale(1.5); opacity: 0; } 100% { opacity: 0; } }

      /* data visibly moves along the wires */
      .dg-wire path { stroke-dasharray: 7 9; animation: dgFlow 1.6s linear infinite; }
      .dg-wire--on path { animation-duration: 1.1s; }

      /* the hub breathes */
      .dg-hub { transform-box: fill-box; transform-origin: center; animation: dgBreath 3.4s ease-in-out infinite; }

    }

    /* ── Trust line: the number leads, the claim sits beside it.
       Reads in one glance, no decoding required. ── */
    .hero-trust { gap: 0; }
    .hero-trust-text {
      display: inline-flex; align-items: center; gap: 14px;
      padding: 0; font-size: inherit;
    }
    .tr-num {
      font-size: 2.5rem; font-weight: 700; letter-spacing: -.045em;
      color: var(--ink); line-height: 1;
      font-variant-numeric: tabular-nums;
    }
    .tr-lab {
      font-size: .88rem; line-height: 1.32; color: var(--muted);
      text-align: left; padding-left: 14px;
      border-left: 1px solid var(--line);
    }
    @media (max-width: 620px) {
      .tr-num { font-size: 2.1rem; }
      .tr-lab { font-size: .84rem; }
    }

    /* =========================================================
       Proof band — one place, not two. The number and the names
       sit together, with the G2 mark as third-party evidence.
       ========================================================= */
    .logo-bar { padding: 44px 0 46px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: transparent; }

    .proof-hd {
      display: flex; align-items: center; justify-content: space-between;
      gap: 24px; flex-wrap: wrap;
      padding-bottom: 26px; margin-bottom: 28px;
      border-bottom: 1px solid var(--line-2);
    }
    .logo-bar-label {
      display: inline-flex; align-items: baseline; gap: 12px;
      margin: 0; text-align: left; text-transform: none; letter-spacing: 0;
    }
    .pf-num {
      font-size: 2.3rem; font-weight: 700; letter-spacing: -.045em;
      color: var(--ink); line-height: 1; font-variant-numeric: tabular-nums;
    }
    .pf-lab { font-size: .96rem; color: var(--muted); line-height: 1.4; }

    .logo-bar-logos { justify-content: space-between; gap: 26px 40px; }
    .logo-bar-logos img { height: 27px; filter: grayscale(100%) opacity(.52); transition: filter .22s ease; }
    .logo-bar-logos img.lg { height: 33px; }
    .logo-bar-logos img:hover { filter: none; }

    @media (max-width: 760px) {
      .proof-hd { justify-content: flex-start; gap: 18px; }
      .pf-num { font-size: 2rem; }
      .logo-bar-logos { justify-content: center; gap: 22px 30px; }
    }

    /* ── Proof band graphic: an isotype block. Each figure reads as a
       team at a glance, so the number has a picture to sit against. ── */
    .proof-hd { align-items: center; gap: 28px; }
    .pf-picto { flex: none; width: 214px; height: 58px; display: block; }
    .pf-off use, .pf-off { fill: #d9d1ef; }
    .pf-on use, .pf-on  { fill: var(--accent); }
    .logo-bar-label { flex-direction: column; align-items: flex-start; gap: 2px; }
    .pf-num { font-size: 2.1rem; }
    .pf-lab { font-size: .93rem; }

    @media (prefers-reduced-motion: no-preference) {
      @supports (animation-timeline: view()) {
        @keyframes pfIn { from { opacity: .25; } to { opacity: 1; } }
        .pf-picto use {
          animation: pfIn .5s linear none;
          animation-timeline: view(); animation-range: entry 10% cover 34%;
        }
      }
    }

    @media (max-width: 760px) {
      .pf-picto { width: 178px; height: 48px; }
      .proof-hd { gap: 18px; }
    }

    /* ── Proof circle: 65% of the disc packed with figures, the
       remaining 35% carrying the count. Figures blink softly. ── */
    .pf-ring { flex: none; width: 168px; height: 168px; display: block; }
    .pf-secA { fill: #f4f1fd; }
    .pf-secB { fill: #fff; stroke: var(--line); stroke-width: 1.5; }
    .pf-figs use { fill: var(--accent); opacity: .5; }
    .pf-big {
      fill: var(--ink); font-family: var(--ff);
      font-size: 30px; font-weight: 700; letter-spacing: -.045em;
    }
    .pf-sm {
      fill: var(--muted); font-family: var(--ff);
      font-size: 14px; font-weight: 500;
    }
    .proof-hd { gap: 26px; }
    .logo-bar-label { flex-direction: column; align-items: flex-start; margin: 0; }
    .pf-lab { font-size: 1.05rem; color: var(--body); line-height: 1.4; max-width: 22ch; text-align: left; }

    @media (prefers-reduced-motion: no-preference) {
      @keyframes pfBlink { 0%, 100% { opacity: .28; } 50% { opacity: .95; } }
      .pf-figs use { animation: pfBlink 2.8s ease-in-out infinite; animation-delay: var(--d, 0s); }
    }

    @media (max-width: 760px) {
      .pf-ring { width: 138px; height: 138px; }
      .pf-lab { font-size: .95rem; }
    }

    /* ── Display weights (superseded by the Archivo block below) — the hero mixes a
       light setting against a heavy emphasis, the way display
       specimens do. ── */
    h1 { font-weight: 300; letter-spacing: -.042em; }
    .hero h1 .hl { font-weight: 800; letter-spacing: -.05em; }
    h2 { font-weight: 500; letter-spacing: -.034em; }
    h3 { font-weight: 600; letter-spacing: -.02em; }
    .btn { font-weight: 500; letter-spacing: .002em; }
    .pf-big, .tr-num, .sb-num, .a-score { font-weight: 700; }
    .testi-quote { font-weight: 500; }
    .fr-chip-title, .cap-card h3, .uc-card h3 { font-weight: 600; }

    /* ── Archivo: a neo-grotesque with a strong black weight. Display
       lines are set heavy and tight, the way the specimen sets them. ── */
    h1 {
      font-weight: 700; letter-spacing: -.045em; line-height: .98;
      font-stretch: 100%;
    }
    .hero h1 .hl { font-weight: 800; letter-spacing: -.05em; }
    h2 { font-weight: 700; letter-spacing: -.038em; line-height: 1.06; }
    h3 { font-weight: 600; letter-spacing: -.022em; }
    .btn { font-weight: 600; letter-spacing: 0; }
    .pf-big, .tr-num, .sb-num, .a-score, .testi-name { font-weight: 800; letter-spacing: -.04em; }
    .testi-quote { font-weight: 500; letter-spacing: -.012em; }
    .fr-chip-title, .cap-card h3, .uc-card h3 { font-weight: 600; }
    .pf-lab, .hero-desc, p { font-weight: 400; }
    .logo-bar-label, .sec-hd p { letter-spacing: -.006em; }

    /* ── Proof badge: floats over the product panel, text wrapped
       around the rim, figures filling 65% of the disc ── */
    .pf-badge {
      position: absolute; z-index: 5;
      left: clamp(-18px, -1vw, 6px); top: -46px;
      width: 168px; height: 168px;
      pointer-events: none;
      filter: drop-shadow(0 18px 34px rgba(27,27,32,.20));
    }
    .pf-ring { width: 100%; height: 100%; display: block; }

    .pf-plate { fill: #fff; }
    .pf-secA  { fill: #f4f1fd; }
    .pf-secB  { fill: #fff; }
    .pf-figs use { fill: var(--accent); opacity: .5; }

    .pf-big { fill: var(--ink); font-family: var(--ff); font-size: 30px; font-weight: 800; letter-spacing: -.045em; }
    .pf-sm  { fill: var(--muted); font-family: var(--ff); font-size: 14px; font-weight: 500; }

    @media (prefers-reduced-motion: no-preference) {
      @keyframes pfBlink { 0%, 100% { opacity: .28; } 50% { opacity: .95; } }
      .pf-figs use { animation: pfBlink 2.8s ease-in-out infinite; animation-delay: var(--d, 0s); }
    }

    @media (max-width: 900px) {
      .pf-badge { width: 128px; height: 128px; top: -34px; left: -6px; }
    }

    /* ── Badge: bottom corner of the panel, plain horizontal band ── */
    .pf-badge {
      top: auto; bottom: 30px;
      left: clamp(16px, 2vw, 30px);
      width: 158px; height: 158px;
      filter: drop-shadow(0 16px 30px rgba(27,27,32,.22));
    }
    .pf-ring { overflow: visible; }
    .pf-band rect { fill: var(--ink); }
    .pf-band text {
      fill: #fff; font-family: var(--ff);
      font-size: 17px; font-weight: 700; letter-spacing: .06em;
    }
    .pf-big { font-size: 34px; }

    @media (max-width: 900px) {
      .pf-badge { width: 126px; height: 126px; bottom: 22px; left: 16px; }
    }
    @media (max-width: 620px) {
      .pf-badge { width: 104px; height: 104px; bottom: 16px; left: 12px; }
    }

    /* ── Badge: figures fill the whole disc, a white strip crosses it ── */
    .pf-badge { bottom: 20px; left: auto; right: 20px; width: 164px; height: 164px; }
    .pf-secA { fill: #f4f1fd; }
    .pf-figs use { fill: var(--accent); opacity: .55; }
    .pf-band rect {
      fill: #fff;
      filter: drop-shadow(0 6px 14px rgba(27,27,32,.20));
    }
    .pf-band text {
      fill: var(--ink); font-family: var(--ff);
      font-size: 17px; font-weight: 800; letter-spacing: .01em;
    }
    @media (max-width: 900px) { .pf-badge { width: 132px; height: 132px; bottom: 16px; left: auto; right: 16px; } }
    @media (max-width: 620px) { .pf-badge { width: 110px; height: 110px; bottom: 12px; left: auto; right: 12px; } }

    /* ── Badge hangs off the panel's bottom-right corner. The hero can
       stop clipping because body already has overflow-x: clip, so no
       horizontal scrollbar can appear. ── */
    .hero { overflow: visible; }
    .hero::before { overflow: hidden; }
    .pf-badge { bottom: -38px; right: -30px; }

    @media (max-width: 900px) { .pf-badge { bottom: -28px; right: -18px; } }
    @media (max-width: 620px) { .pf-badge { bottom: -22px; right: -10px; } }

    /* ── Buyer journey: a continuous loop. The curve traces, each
       touchpoint lands in turn, the alert arrives, then it retraces
       and runs again — so it plays whether or not you scrolled past. ── */
    @media (prefers-reduced-motion: no-preference) {
      @keyframes jCurve {
        0%   { stroke-dashoffset: 760; }
        26%  { stroke-dashoffset: 0; }
        88%  { stroke-dashoffset: 0; }
        100% { stroke-dashoffset: 760; }
      }
      @keyframes jN1 {
        0%, 8%   { opacity: 0; transform: scale(.3); }
        14%, 86% { opacity: 1; transform: none; }
        94%,100% { opacity: 0; transform: scale(.3); }
      }
      @keyframes jN2 {
        0%, 16%  { opacity: 0; transform: scale(.3); }
        22%, 86% { opacity: 1; transform: none; }
        94%,100% { opacity: 0; transform: scale(.3); }
      }
      @keyframes jN3 {
        0%, 24%  { opacity: 0; transform: scale(.3); }
        30%, 86% { opacity: 1; transform: none; }
        94%,100% { opacity: 0; transform: scale(.3); }
      }
      @keyframes jN4 {
        0%, 32%  { opacity: 0; transform: scale(.3); }
        38%, 86% { opacity: 1; transform: none; }
        94%,100% { opacity: 0; transform: scale(.3); }
      }
      @keyframes jFlag {
        0%, 42%  { opacity: 0; transform: translateY(-7px); }
        52%, 86% { opacity: 1; transform: none; }
        94%,100% { opacity: 0; transform: translateY(-7px); }
      }

      .dg-curve {
        stroke-dasharray: 760;
        animation: jCurve 8s cubic-bezier(.45,.05,.35,1) infinite;
      }
      .jn { transform-box: fill-box; transform-origin: center; }
      .jn1 { animation: jN1 8s ease-out infinite; }
      .jn2 { animation: jN2 8s ease-out infinite; }
      .jn3 { animation: jN3 8s ease-out infinite; }
      .jn4 { animation: jN4 8s ease-out infinite; }
      .dg-flag { transform-box: fill-box; transform-origin: center; animation: jFlag 8s ease-out infinite; }
    }

    /* ── Badge slides in after the panel has settled, disc first,
       then the strip ── */
    @media (prefers-reduced-motion: no-preference) {
      @keyframes pfSlideIn {
        from { opacity: 0; transform: translate(54px, 30px) scale(.86); }
        to   { opacity: 1; transform: none; }
      }
      @keyframes pfBandIn {
        from { opacity: 0; transform: translateX(-22px); }
        to   { opacity: 1; transform: none; }
      }
      .pf-badge { animation: pfSlideIn .85s cubic-bezier(.2,.78,.32,1) 1.45s both; }
      .pf-band  { transform-box: fill-box; transform-origin: center;
                  animation: pfBandIn .6s cubic-bezier(.2,.78,.32,1) 2.05s both; }
    }

    /* =========================================================
       Use cases — "under one roof", drawn.
       Marketing runs down the left, sales down the right, and a
       spine joins every item to the shared record in the middle.
       No boxes: the page has had two card grids by this point,
       and the join is the whole argument of the section.
       ========================================================= */
    .uc-grid {
      position: relative;
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      column-gap: clamp(72px, 9vw, 132px);
      row-gap: 0;
      align-items: stretch;
    }

    /* the spine, and the record it runs into */
    .uc-grid::before {
      content: '';
      position: absolute; left: 50%; top: 6px; bottom: 6px;
      width: 2px; margin-left: -1px;
      background: linear-gradient(180deg,
        rgba(31,27,46,0) 0%, var(--accent) 12%,
        var(--accent) 88%, rgba(31,27,46,0) 100%);
      opacity: .28;
    }
    .uc-grid::after {
      content: '';
      position: absolute; left: 50%; top: 50%;
      width: 15px; height: 15px; margin: -7.5px 0 0 -7.5px;
      border-radius: 50%; background: var(--accent);
      box-shadow: 0 0 0 7px #fff, 0 0 0 9px rgba(31,27,46,.22);
    }

    /* column headings */
    .uc-side {
      grid-row: 1;
      margin: 0 0 26px; padding-bottom: 14px;
      font-size: .82rem; font-weight: 700; letter-spacing: .1em;
      text-transform: uppercase; color: var(--muted);
      border-bottom: 1px solid var(--line);
    }
    .uc-side--m { grid-column: 1; text-align: right; }
    .uc-side--s { grid-column: 2; text-align: left; }

    /* items: rules and space, not boxes */
    .uc-card,
    .uc-card:nth-of-type(1), .uc-card:nth-of-type(2), .uc-card:nth-of-type(3), .uc-card:nth-of-type(4),
    .uc-card:nth-of-type(5), .uc-card:nth-of-type(6), .uc-card:nth-of-type(7), .uc-card:nth-of-type(8) {
      position: relative;
      background: none; border: none; border-radius: 0;
      box-shadow: none; padding: 0 0 30px; margin: 0 0 30px;
      border-bottom: 1px solid var(--line-2);
      display: block; min-height: 0;
      transition: none;
    }
    .uc-card:hover { background: none; box-shadow: none; transform: none; }
    .uc-card::after { content: none; }

    /* left column: everything reads toward the spine */
    .uc-card:nth-of-type(1) { grid-column: 1; grid-row: 2; }
    .uc-card:nth-of-type(2) { grid-column: 1; grid-row: 3; }
    .uc-card:nth-of-type(3) { grid-column: 1; grid-row: 4; }
    .uc-card:nth-of-type(4) { grid-column: 1; grid-row: 5; padding-bottom: 0; margin-bottom: 0; border-bottom: none; }
    .uc-card:nth-of-type(5) { grid-column: 2; grid-row: 2; }
    .uc-card:nth-of-type(6) { grid-column: 2; grid-row: 3; }
    .uc-card:nth-of-type(7) { grid-column: 2; grid-row: 4; }
    .uc-card:nth-of-type(8) { grid-column: 2; grid-row: 5; padding-bottom: 0; margin-bottom: 0; border-bottom: none; }

    .uc-card:nth-of-type(-n+4) { text-align: right; }
    .uc-card:nth-of-type(-n+4) .icon-box { margin-left: auto; }

    /* the connector each item makes to the spine */
    .uc-card .icon-box {
      width: 40px; height: 40px; margin-bottom: 16px;
      background: #fff !important;
      border: 1px solid var(--line); border-radius: 12px;
      color: var(--accent);
      transition: background-color .22s ease, border-color .22s ease, color .22s ease;
    }
    .uc-card .icon-box svg { width: 20px; height: 20px; stroke-width: 1.7; }

    .uc-card::before {
      content: '';
      position: absolute; top: 20px; height: 1px;
      background: var(--line);
      transform: scaleX(.42); transform-origin: var(--o, left center);
      transition: transform .3s cubic-bezier(.22,.61,.36,1), background-color .3s ease;
    }
    .uc-card:nth-of-type(-n+4)::before {
      right: calc(-1 * clamp(72px, 9vw, 132px) / 2 - 1px);
      width: calc(clamp(72px, 9vw, 132px) / 2);
      --o: left center;
    }
    .uc-card:nth-of-type(n+5)::before {
      left: calc(-1 * clamp(72px, 9vw, 132px) / 2 - 1px);
      width: calc(clamp(72px, 9vw, 132px) / 2);
      --o: right center;
    }
    .uc-card:hover::before { transform: scaleX(1); background: var(--accent); }
    .uc-card:hover .icon-box { background: var(--accent) !important; border-color: var(--accent); color: #fff; }

    .uc-card h3 { font-size: 1.08rem; font-weight: 700; letter-spacing: -.022em; margin: 0 0 8px; color: var(--ink); }
    .uc-card p  { font-size: .94rem; line-height: 1.62; color: var(--muted); margin: 0; }

    @media (max-width: 860px) {
      .uc-grid { grid-template-columns: minmax(0, 1fr); column-gap: 0; }
      .uc-grid::before, .uc-grid::after { display: none; }
      .uc-side { grid-row: auto; text-align: left !important; margin-top: 34px; }
      .uc-side--m, .uc-side--s { grid-column: 1; }
      .uc-side--m { margin-top: 0; }
      .uc-card, .uc-card:nth-of-type(1), .uc-card:nth-of-type(2), .uc-card:nth-of-type(3),
      .uc-card:nth-of-type(4), .uc-card:nth-of-type(5), .uc-card:nth-of-type(6),
      .uc-card:nth-of-type(7), .uc-card:nth-of-type(8) {
        grid-column: 1; grid-row: auto; text-align: left;
        padding-bottom: 24px; margin-bottom: 24px; border-bottom: 1px solid var(--line-2);
      }
      .uc-card .icon-box { margin-left: 0 !important; }
      .uc-card::before { display: none; }
    }

    /* ── The record travels the spine as the section is read ── */
    @media (prefers-reduced-motion: no-preference) {
      @supports (animation-timeline: view()) {
        @keyframes ucRun {
          from { top: 8px; }
          to   { top: calc(100% - 8px); }
        }
        @keyframes ucHalo {
          0%, 100% { box-shadow: 0 0 0 7px #fff, 0 0 0 9px rgba(31,27,46,.22); }
          50%      { box-shadow: 0 0 0 7px #fff, 0 0 0 13px rgba(31,27,46,.14); }
        }
        /* the grid drives the timeline; the node reads it */
        .uc-grid { view-timeline-name: --ucline; }
        .uc-grid::after {
          animation: ucRun linear both, ucHalo 2.6s ease-in-out infinite;
          animation-timeline: --ucline, auto;
          animation-range: cover 8% cover 92%, normal;
        }
      }
    }

    /* ── Eyebrow labels removed: headings now sit directly under the
       section's top edge, so the spacing they occupied is reclaimed ── */
    .sec-hd h2 { margin-top: 0; }
    .fr-text h2 { margin-top: 0; }
    .hero h1 { margin-top: 0; }


    /* =========================================================
       CUSTOMER PROOF — the block strip
       One slab. A row of customer blocks along the top; the one
       you pick turns white, drops its divider and becomes the
       panel underneath it. No gaps, no floating cards, no shadow
       — the purple field separates, hairlines do the rest.
       The graphic on the right is the customer's own mark, because
       it is the only image here that is truly theirs and needs no
       invented numbers beside it.
       CSS-only tabs on real radios, so arrow keys work.
       ========================================================= */
    .section--stories {
      position: relative; overflow: hidden;
      background:
        radial-gradient(70% 60% at 88% 16%, rgba(255,255,255,.15) 0%, rgba(255,255,255,0) 62%),
        linear-gradient(126deg, #2e2749 0%, #1f1b2e 44%, #141126 100%);
      border-radius: 28px;
      margin-inline: clamp(16px, 3vw, 40px);
      /* the slab floats — it must not butt into the dark band above */
      margin-block: clamp(34px, 4.5vw, 68px) clamp(10px, 1.6vw, 26px);
      padding-block: clamp(56px, 6.5vw, 92px);
    }
    .section--stories::before {
      content: ''; position: absolute; right: -8%; top: -16%;
      width: 440px; height: 440px; border-radius: 128px;
      background: rgba(255,255,255,.07); transform: rotate(24deg);
    }
    .section--stories .container { position: relative; z-index: 1; }

    .section--stories .sec-hd { text-align: center; max-width: 760px; margin: 0 auto 40px; }
    .section--stories .sec-hd h2 {
      color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.9rem); font-weight: 800;
      letter-spacing: -.036em; line-height: 1.1; margin: 0 0 14px;
    }
    .section--stories .sec-hd p {
      color: rgba(255,255,255,.76); font-size: 1rem; line-height: 1.65; margin: 0;
    }

    /* ── the slab ─────────────────────────────────────────── */
    .cs { background: #fff; border-radius: 26px; overflow: hidden; }
    .cs-in {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }

    /* ── the block strip ──────────────────────────────────── */
    .cs-tabs {
      display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
      background: #f1eefa;
    }
    .cs-tab {
      position: relative; cursor: pointer;
      min-height: 100px; padding: 18px 14px;
      display: grid; grid-template-rows: 1fr auto; gap: 9px;
      justify-items: center; align-items: center;
      border-right: 1px solid #e9e5f6;
      border-bottom: 1px solid #e9e5f6;
      transition: background .22s ease;
    }
    .cs-tab:last-of-type { border-right: 0; }
    .cs-tab-mark {
      max-width: 118px; max-height: 34px; width: auto; height: auto;
      object-fit: contain;
      opacity: .5; filter: saturate(.35);
      transition: opacity .22s ease, filter .22s ease;
    }
    .cs-tab-co {
      font-size: .7rem; font-weight: 650; letter-spacing: -.01em;
      color: #6e6880; line-height: 1.2; text-align: center;
      transition: color .22s ease;
    }
    .cs-tab:hover { background: #eae1ff; }

    /* the picked block stops being a tab: it turns into the panel */
    #cs1:checked ~ .cs-tabs .cs-tab:nth-of-type(1),
    #cs2:checked ~ .cs-tabs .cs-tab:nth-of-type(2),
    #cs3:checked ~ .cs-tabs .cs-tab:nth-of-type(3),
    #cs4:checked ~ .cs-tabs .cs-tab:nth-of-type(4),
    #cs5:checked ~ .cs-tabs .cs-tab:nth-of-type(5) {
      background: #fff; border-bottom-color: transparent;
    }
    #cs1:checked ~ .cs-tabs .cs-tab:nth-of-type(1) .cs-tab-mark,
    #cs2:checked ~ .cs-tabs .cs-tab:nth-of-type(2) .cs-tab-mark,
    #cs3:checked ~ .cs-tabs .cs-tab:nth-of-type(3) .cs-tab-mark,
    #cs4:checked ~ .cs-tabs .cs-tab:nth-of-type(4) .cs-tab-mark,
    #cs5:checked ~ .cs-tabs .cs-tab:nth-of-type(5) .cs-tab-mark {
      opacity: 1; filter: none;
    }
    #cs1:checked ~ .cs-tabs .cs-tab:nth-of-type(1) .cs-tab-co,
    #cs2:checked ~ .cs-tabs .cs-tab:nth-of-type(2) .cs-tab-co,
    #cs3:checked ~ .cs-tabs .cs-tab:nth-of-type(3) .cs-tab-co,
    #cs4:checked ~ .cs-tabs .cs-tab:nth-of-type(4) .cs-tab-co,
    #cs5:checked ~ .cs-tabs .cs-tab:nth-of-type(5) .cs-tab-co { color: var(--ink); }

    /* keyboard: the radios are off-screen, so the block shows the ring */
    #cs1:focus-visible ~ .cs-tabs .cs-tab:nth-of-type(1),
    #cs2:focus-visible ~ .cs-tabs .cs-tab:nth-of-type(2),
    #cs3:focus-visible ~ .cs-tabs .cs-tab:nth-of-type(3),
    #cs4:focus-visible ~ .cs-tabs .cs-tab:nth-of-type(4),
    #cs5:focus-visible ~ .cs-tabs .cs-tab:nth-of-type(5) {
      outline: 2px solid var(--accent); outline-offset: -3px;
    }

    /* ── story panel ──────────────────────────────────────── */
    .cs-panel { display: grid; padding: clamp(28px, 3.4vw, 48px) clamp(24px, 3vw, 48px); }
    .cs-story {
      grid-area: 1 / 1;
      display: grid;
      grid-template-columns: minmax(0, 1.5fr) minmax(0, .82fr);
      column-gap: clamp(26px, 3.4vw, 52px);
      align-items: stretch;
      visibility: hidden;
    }
    #cs1:checked ~ .cs-panel .cs-story:nth-of-type(1),
    #cs2:checked ~ .cs-panel .cs-story:nth-of-type(2),
    #cs3:checked ~ .cs-panel .cs-story:nth-of-type(3),
    #cs4:checked ~ .cs-panel .cs-story:nth-of-type(4),
    #cs5:checked ~ .cs-panel .cs-story:nth-of-type(5) { visibility: visible; }

    .cs-said { display: flex; flex-direction: column; align-items: flex-start; }
    .cs-stars { color: #e8a020; font-size: .8rem; letter-spacing: 3px; margin-bottom: 18px; }
    .cs-quote {
      margin: 0 0 auto; padding: 0; border: 0;
      font-size: clamp(1.1rem, 1.8vw, 1.52rem);
      font-weight: 500; line-height: 1.5; letter-spacing: -.022em;
      color: var(--ink); text-wrap: balance;
    }
    .cs-quote::before { content: '“'; }
    .cs-quote::after  { content: '”'; }

    .cs-by { display: flex; align-items: center; gap: 13px; margin-top: clamp(24px, 3vw, 36px); }
    .cs-face {
      width: 46px; height: 46px; border-radius: 50%;
      object-fit: cover; flex: none; background: #f1eefa;
    }
    .cs-by-text { display: grid; gap: 3px; min-width: 0; }
    .cs-by-name { font-size: .95rem; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
    .cs-by-role { font-size: .8rem; color: var(--muted); line-height: 1.35; }

    /* The brand field. The photograph is licensed stock chosen for the
       customer's industry — never their own team or premises, which we
       have no licence to publish and which a logo on top would imply.
       No identifiable faces, for the same reason. The dark wash keeps
       any photo behaving the same, and the white plate means a logo
       reads whether or not its file carries transparency. */
    .cs-brand {
      position: relative; overflow: hidden; isolation: isolate;
      display: grid; align-content: center; justify-items: center; gap: 24px;
      min-height: 248px; padding: 34px 26px;
      border-radius: 20px; text-align: center;
      background-color: #171327;
    }
    .cs-brand-photo {
      position: absolute; inset: 0; z-index: -2;
      width: 100%; height: 100%; object-fit: cover;
    }
    .cs-brand::before {
      content: ''; position: absolute; inset: 0; z-index: -1;
      background: linear-gradient(176deg, rgba(14,10,26,.58) 0%, rgba(14,10,26,.82) 100%);
    }
    .cs-brand-plate {
      display: grid; place-items: center;
      padding: 18px 24px; border-radius: 14px;
      background: #fff;
    }
    .cs-brand-mark {
      max-width: 168px; max-height: 46px; width: auto; height: auto;
      object-fit: contain; display: block;
    }
    .cs-brand .cs-go { color: #fff; }
    .cs-brand .cs-go:hover { border-bottom-color: rgba(255,255,255,.7); }
    .cs-go {
      display: inline-flex; align-items: center; gap: 7px;
      font-size: .86rem; font-weight: 650; letter-spacing: -.01em;
      color: var(--accent); text-decoration: none;
      border-bottom: 1px solid transparent; padding-bottom: 2px;
    }
    .cs-go svg { width: 15px; height: 15px; flex: none; }
    .cs-go:hover { border-bottom-color: currentColor; }

    /* ── slab footer ──────────────────────────────────────── */
    .cs-foot {
      display: flex; align-items: center; justify-content: space-between;
      gap: 18px; flex-wrap: wrap;
      padding: 18px clamp(24px, 3vw, 48px);
      border-top: 1px solid var(--line-2);
      background: #fbfaff;
    }
    .cs-foot p { margin: 0; font-size: .86rem; color: var(--muted); }
    .cs-all {
      display: inline-flex; align-items: center; gap: 7px;
      font-size: .88rem; font-weight: 700; letter-spacing: -.01em;
      color: var(--ink); text-decoration: none;
    }
    .cs-all svg { width: 15px; height: 15px; }
    .cs-all:hover { color: var(--accent); }

    /* ── motion: the panel changes, nothing else moves ────── */
    @media (prefers-reduced-motion: no-preference) {
      @keyframes csIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
      #cs1:checked ~ .cs-panel .cs-story:nth-of-type(1),
      #cs2:checked ~ .cs-panel .cs-story:nth-of-type(2),
      #cs3:checked ~ .cs-panel .cs-story:nth-of-type(3),
      #cs4:checked ~ .cs-panel .cs-story:nth-of-type(4),
      #cs5:checked ~ .cs-panel .cs-story:nth-of-type(5) {
        animation: csIn .34s cubic-bezier(.2,.8,.3,1);
      }
    }

    /* ── responsive ───────────────────────────────────────── */
    @media (max-width: 900px) {
      .cs-tab { min-height: 84px; padding: 14px 10px; }
      .cs-tab-mark { max-width: 84px; max-height: 26px; }
      .cs-tab-co { display: none; }
      .cs-story { grid-template-columns: minmax(0, 1fr); row-gap: 26px; }
      .cs-brand { min-height: 190px; padding: 28px 24px; gap: 20px; }
    }
    @media (max-width: 620px) {
      .section--stories { border-radius: 20px; margin-inline: 12px; }
      .cs { border-radius: 18px; }
      .cs-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .cs-tab:nth-of-type(3) { border-right: 0; }
      .cs-tab:last-of-type { border-right: 1px solid #e9e5f6; }
      /* two rows: the "picked block merges downward" trick only works in one row */
      .cs-tabs .cs-tab { border-bottom: 1px solid #e9e5f6 !important; }
      .cs-tab:nth-of-type(4), .cs-tab:nth-of-type(5) { border-bottom: 1px solid #e9e5f6; }
      .cs-tab { min-height: 72px; }
      .cs-foot { flex-direction: column; align-items: flex-start; gap: 10px; }
    }

    /* customer marks stay in their own colours */
    .logo-bar-logos img { filter: none; opacity: 1; }

    /* ── Source icons in the flow diagram ── */
    .dg-ic { fill: none; stroke: var(--dg-accent); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

    /* the closing card stays dark on hover — the generic white card
       hover would otherwise out-specify its background */
    .section--stories .testi-cta:hover {
      background: var(--ink);
      box-shadow: 0 28px 54px -26px rgba(30,10,80,.50);
    }

    /* ── One typeface, enforced everywhere. Form controls and SVG text
       do not inherit font-family by default, so they are named too. ── */
    html, body,
    h1, h2, h3, h4, h5, h6, p, span, a, li, div, strong, em, small, blockquote,
    button, input, select, textarea, label,
    svg text, .btn, .testi-quote, .fr-lead, .hero-desc {
      font-family: var(--ff);
    }
    input::placeholder, textarea::placeholder { font-family: var(--ff); }

    /* =========================================================
       PASS 1 — sections added for the GTM-data-layer positioning
       ========================================================= */

    .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

    /* hero stat chip */
    .hero-stat {
      display: inline-block; margin-top: 18px;
      font-size: .92rem; color: var(--body);
      background: var(--accent-lt); border: 1px solid #e7e2f3;
      border-radius: 999px; padding: 9px 18px;
    }
    .hero-stat strong { color: var(--accent); font-weight: 800; }

    /* ── Ecosystem ── */
    .eco-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
    .eco-card {
      background: linear-gradient(168deg, #fbfaff 0%, #f4f1fd 100%);
      border: 1px solid #efebfa; border-radius: var(--r-lg);
      padding: 30px 26px 32px;
    }
    .eco-card .icon-box { width: 34px; height: 34px; margin-bottom: 18px; color: var(--accent); background: none !important; }
    .eco-card h3 { font-size: 1.04rem; margin: 0 0 9px; }
    .eco-card p { font-size: .93rem; line-height: 1.62; color: var(--muted); margin: 0; }

    .eco-logos {
      display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
      gap: 22px 46px; margin: clamp(36px,4vw,52px) 0 0; padding: 0; list-style: none;
    }
    .eco-logos img { height: 26px; width: auto; max-width: 118px; object-fit: contain; }
    .eco-cta { text-align: center; margin-top: 30px; }

    /* ── Real-time ── */
    .rt-cards { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; margin-bottom: clamp(34px,4vw,48px); }
    .rt-card {
      background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
      padding: 26px 24px 28px;
    }
    .rt-card h3 { font-size: 1.02rem; margin: 0 0 8px; }
    .rt-card p { font-size: .93rem; color: var(--muted); margin: 0; line-height: 1.6; }
    .rt-vis { max-width: 860px; margin: 0 auto; }

    /* ── MCP spotlight (the one dark section) ── */
    .mcp { background: #171327; color: rgba(255,255,255,.74); border-radius: 28px; margin-inline: clamp(16px,3vw,40px); }
    .mcp-hd { max-width: 760px; margin: 0 auto clamp(38px,4vw,56px); text-align: center; }
    .mcp-eyebrow {
      display: inline-block; margin-bottom: 16px;
      font-family: ui-monospace, Menlo, monospace;
      font-size: .72rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
      color: #a78bfa; border: 1px solid rgba(167,139,250,.34); border-radius: 999px; padding: 5px 12px;
    }
    .mcp-hd h2 { color: #fff; }
    .mcp-hd p { color: rgba(255,255,255,.62); font-size: 1.04rem; line-height: 1.65; }

    .mcp-grid { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(0,.85fr); gap: 22px; align-items: start; }

    .mcp-chat { background: #1f1b2e; border: 1px solid #352e52; border-radius: 16px; overflow: hidden; }
    .mcp-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #2a2440; border-bottom: 1px solid #352e52; }
    .mcp-dot { width: 8px; height: 8px; border-radius: 50%; background: #4a4370; }
    .mcp-title { margin-left: 8px; font-family: ui-monospace, Menlo, monospace; font-size: .74rem; color: rgba(255,255,255,.5); }
    .mcp-body { padding: 20px 18px 18px; }
    .mcp-q { color: #fff; font-size: .97rem; font-weight: 600; margin: 0 0 16px; }
    .mcp-tool { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; }
    .mcp-tool-name { font-family: ui-monospace, Menlo, monospace; font-size: .78rem; color: #a78bfa; }
    .mcp-ok { color: #6fd0a8; font-size: .8rem; }
    .mcp-chip {
      font-family: ui-monospace, Menlo, monospace; font-size: .72rem; color: rgba(255,255,255,.66);
      background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
      border-radius: 5px; padding: 3px 8px;
    }
    .mcp-meta { font-family: ui-monospace, Menlo, monospace; font-size: .72rem; color: rgba(255,255,255,.4); margin: 0 0 16px; }
    .mcp-results { list-style: none; padding: 0; margin: 0 0 16px; display: grid; gap: 8px; }
    .mcp-results li {
      display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr) auto auto;
      align-items: center; gap: 12px;
      background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
      border-radius: 9px; padding: 11px 14px;
    }
    .mcp-name { color: #fff; font-size: .9rem; font-weight: 600; }
    .mcp-co { color: rgba(255,255,255,.56); font-size: .85rem; }
    .mcp-score { color: #a78bfa; font-weight: 800; font-size: .95rem; }
    .mcp-visits { color: rgba(255,255,255,.42); font-size: .78rem; }
    .mcp-ask {
      border: 1px dashed rgba(255,255,255,.16); border-radius: 9px;
      padding: 11px 14px; font-size: .86rem; color: rgba(255,255,255,.36);
    }

    .mcp-side { display: grid; gap: 18px; }
    .mcp-compare { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); border-radius: 16px; padding: 22px 20px; }
    .mcp-then, .mcp-now { margin-bottom: 16px; }
    .mcp-lab { display: block; font-family: ui-monospace, Menlo, monospace; font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.44); margin-bottom: 8px; }
    .mcp-compare ol { margin: 0; padding-left: 18px; color: rgba(255,255,255,.7); font-size: .88rem; line-height: 1.7; }
    .mcp-now ol { color: #fff; }
    .mcp-cap { margin: 0; font-size: .82rem; color: rgba(255,255,255,.45); border-top: 1px solid rgba(255,255,255,.1); padding-top: 14px; }

    .mcp-tools { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
    .mcp-tools li {
      display: flex; align-items: center; justify-content: space-between; gap: 12px;
      background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1);
      border-radius: 10px; padding: 12px 15px;
    }
    .mcp-tool-t { color: #fff; font-size: .92rem; font-weight: 600; }
    .mcp-tool-s { font-family: ui-monospace, Menlo, monospace; font-size: .72rem; color: rgba(255,255,255,.42); }
    .mcp-tool-s.is-live { color: #6fd0a8; }
    .mcp .btn-light { justify-content: center; }

    /* ── Pillar feature (score builder) ── */
    .pillar-feature {
      display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
      gap: clamp(28px,4vw,64px); align-items: center;
      margin-top: clamp(36px,4vw,56px);
      background: linear-gradient(168deg,#fbfaff 0%,#f4f1fd 100%);
      border: 1px solid #efebfa; border-radius: var(--r-lg);
      padding: clamp(28px,3vw,44px);
    }
    .pillar-feature h3 { font-size: 1.3rem; margin: 0 0 10px; }
    .pillar-feature .pf-copy p { color: var(--muted); font-size: .98rem; line-height: 1.65; margin: 0; }

    /* ── Enterprise readiness ── */
    .ent-panel {
      border: 1px solid var(--line); border-radius: 24px;
      padding: clamp(32px,4vw,56px); background: #fff;
    }
    .ent-panel .sec-hd { margin-bottom: clamp(30px,3vw,42px); }
    .ent-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 18px; }
    .ent-card { background: var(--bg-soft); border-radius: var(--r); padding: 24px 22px 26px; }
    .ent-card h3 { font-size: .99rem; margin: 0 0 8px; }
    .ent-card p { font-size: .9rem; color: var(--muted); line-height: 1.6; margin: 0; }

    .ent-bound { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 18px; margin-top: 26px; }
    .ent-in, .ent-out { border: 1px solid var(--line); border-radius: var(--r); padding: 22px 22px 24px; }
    .ent-in { background: #fbfaff; }
    .ent-out { background: #fbfbfc; border-style: dashed; }
    .ent-lab { display: block; font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; }
    .ent-bound ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
    .ent-bound li { font-size: .92rem; color: var(--ink); padding-left: 20px; position: relative; }
    .ent-in li::before { content: "\2713"; position: absolute; left: 0; color: var(--accent); font-weight: 700; }
    .ent-out li { color: var(--muted); }
    .ent-out li::before { content: "\2014"; position: absolute; left: 0; color: var(--g300); }
    .ent-note { margin: 14px 0 0; font-size: .84rem; color: var(--muted); }
    .ent-cap { margin: 14px 0 0; font-size: .84rem; color: var(--muted); }
    .ent-next {
      margin: 26px 0 0; padding-top: 22px; border-top: 1px solid var(--line-2);
      font-size: .93rem; color: var(--muted);
    }
    .ent-next a { color: var(--accent); font-weight: 600; }

    /* ── Managed teaser ── */
    .mg-card {
      display: flex; align-items: center; justify-content: space-between;
      gap: clamp(24px,3vw,48px); flex-wrap: wrap;
      background: var(--ink); border-radius: 24px;
      padding: clamp(30px,3.4vw,46px) clamp(28px,3vw,48px);
    }
    .mg-copy { max-width: 62ch; }
    .mg-card h2 { color: #fff; font-size: clamp(1.5rem,2.6vw,2rem); margin: 0 0 10px; }
    .mg-card p { color: rgba(255,255,255,.7); font-size: 1rem; line-height: 1.6; margin: 0; }
    .mg-card .btn { flex: none; background: #fff; color: var(--ink); border-color: #fff; }
    .mg-card .btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }

    /* ── Closing zone: resources + posts ── */
    .closing { background: linear-gradient(180deg,#fdfcf8 0%,#f5f2fd 50%,#fbfaff 100%); }
    .res-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
    .res-card {
      display: block; background: #fff; border: 1px solid var(--line);
      border-radius: var(--r-lg); padding: 28px 26px 30px;
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .res-card:hover { border-color: #ded8f0; box-shadow: 0 20px 42px -30px rgba(31,27,46,.34); }
    .res-card h3 { font-size: 1.08rem; margin: 0 0 8px; }
    .res-card p { font-size: .93rem; color: var(--muted); margin: 0 0 16px; }
    .res-go { color: var(--accent); font-weight: 700; }

    .posts-hd { text-align: center; margin: clamp(52px,6vw,80px) 0 clamp(28px,3vw,40px); }
    .posts-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
    .post-card {
      display: block; background: #fff; border: 1px solid var(--line);
      border-radius: var(--r); padding: 24px 22px 26px;
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .post-card:hover { border-color: #ded8f0; box-shadow: 0 18px 38px -28px rgba(31,27,46,.32); }
    .post-card h3 { font-size: .99rem; margin: 0 0 8px; line-height: 1.34; }
    .post-card p { font-size: .89rem; color: var(--muted); margin: 0; line-height: 1.55; }

    /* ── CTA tertiary links ── */
    .cta-tertiary { margin-top: 18px; font-size: .88rem; color: rgba(255,255,255,.5); display: flex; gap: 10px; flex-wrap: wrap; }
    .cta-tertiary a { color: rgba(255,255,255,.8); text-decoration: underline; text-underline-offset: 3px; }
    .cta-tertiary a:hover { color: #fff; }

    @media (max-width: 1000px) {
      .eco-grid, .rt-cards, .res-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .ent-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .posts-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
      .mcp-grid { grid-template-columns: minmax(0,1fr); }
      .pillar-feature { grid-template-columns: minmax(0,1fr); }
    }
    @media (max-width: 620px) {
      .eco-grid, .rt-cards, .res-grid, .ent-grid, .posts-grid, .ent-bound { grid-template-columns: minmax(0,1fr); }
      .mcp { border-radius: 20px; margin-inline: 12px; }
      .mg-card { flex-direction: column; align-items: flex-start; }
    }

    /* =========================================================
       PASS 2 — stakeholder-discovery realignment
       ========================================================= */

    /* hero punch line: the bridge between the position and the problem */
    .hero-punch {
      margin: 20px auto 0; max-width: 46ch;
      font-size: clamp(1.12rem, 1.9vw, 1.42rem);
      font-weight: 700; letter-spacing: -.022em; line-height: 1.32;
      color: var(--ink);
    }
    .hero-desc { margin-top: 18px; }

    /* ── Problem recognition — diagnostic, not product ── */
    .prob { background: linear-gradient(180deg,#fbfaff 0%,#f4f1fd 100%); }
    .prob .sec-hd { max-width: 780px; }
    .prob-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
    .prob-card {
      position: relative;
      background: #fff; border: 1px solid var(--line);
      border-radius: var(--r-lg); padding: 30px 28px 32px;
    }
    /* a hairline that stops short — the signal that doesn't reach the next system */
    .prob-card::after {
      content: ''; position: absolute; left: 28px; right: 55%; bottom: 0; height: 2px;
      background: linear-gradient(90deg, var(--accent) 0%, rgba(31,27,46,0) 100%);
      border-radius: 2px;
    }
    .prob-role {
      display: inline-block; margin-bottom: 14px;
      font-size: .74rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
      color: var(--accent);
    }
    .prob-card h3 { font-size: 1.14rem; line-height: 1.3; margin: 0 0 10px; letter-spacing: -.02em; }
    .prob-card p { font-size: .95rem; line-height: 1.65; color: var(--muted); margin: 0; }

    /* ── Resolution 02: integration logos as proof, inside the panel ── */
    .res02-proof {
      margin: 0 0 clamp(46px,6vw,80px);
      padding: clamp(26px,3vw,38px) clamp(24px,3vw,40px);
      background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
    }
    .res02-proof .eco-logos { margin-top: 0; }
    .res02-proof .eco-cta { margin-top: 24px; }

    /* ── Stakeholder outcomes ── */
    .out-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 18px; }
    .out-card {
      background: linear-gradient(168deg,#fbfaff 0%,#f4f1fd 100%);
      border: 1px solid #efebfa; border-radius: var(--r-lg);
      padding: 32px 28px 34px;
    }
    .out-icon {
      width: 42px; height: 42px; margin-bottom: 20px;
      display: grid; place-items: center;
      background: #fff; border: 1px solid #efebfa; border-radius: 12px;
      color: var(--accent);
    }
    .out-icon svg { width: 21px; height: 21px; }
    .out-card h3 { font-size: 1.1rem; margin: 0 0 10px; letter-spacing: -.02em; }
    .out-card p { font-size: .95rem; line-height: 1.65; color: var(--muted); margin: 0; }

    @media (max-width: 1000px) {
      .prob-grid, .out-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    }
    @media (max-width: 620px) {
      .prob-grid, .out-grid { grid-template-columns: minmax(0,1fr); }
      .hero-punch { font-size: 1.1rem; }
    }

    /* inline arrow links: the SVG has no intrinsic size, so it must be
       constrained or it renders at the viewport-filling default */
    .link-arrow { display: inline-flex; align-items: center; gap: 8px; }
    .link-arrow svg { width: 16px; height: 16px; flex: none; }
    .eco-cta .link-arrow, .res02-proof .link-arrow {
      font-size: .97rem; font-weight: 600; color: var(--ink);
      border-bottom: 1px solid var(--accent); padding-bottom: 3px;
    }
    .eco-cta .link-arrow:hover, .res02-proof .link-arrow:hover { color: var(--accent); }

    /* the integration proof sits inside the numbered flow, so it must
       clear the spine column rather than crossing it */
    @media (min-width: 901px) {
      .res02-proof { margin-left: 56px; }
    }

    /* =========================================================
       Hero widget, screen 1 — the question, typed.
       The feed underneath is the resting state, so if these
       animations never run you simply see the results.
       ========================================================= */
    .mock-win { position: relative; }

    .ask-screen {
      position: absolute; left: 0; right: 0; top: 46px; bottom: 0;
      z-index: 3; background: #fff;
      display: grid; place-items: center;
      padding: 24px;
      opacity: 0; visibility: hidden;
      pointer-events: none;
    }
    .ask-inner { width: 100%; max-width: 620px; text-align: left; }

    .ask-label {
      display: block; margin-bottom: 14px;
      font-size: .76rem; font-weight: 800; letter-spacing: .12em;
      text-transform: uppercase; color: var(--accent);
    }

    .ask-bar {
      display: flex; align-items: center; gap: 12px;
      background: #fff; border: 2px solid var(--accent);
      border-radius: 999px; padding: 15px 22px;
      box-shadow: 0 16px 34px -22px rgba(31,27,46,.45);
    }
    .ask-mag { width: 20px; height: 20px; flex: none; color: var(--accent); }

    /* the typing effect: a clipped box whose width steps open */
    .ask-type {
      display: inline-block; overflow: hidden; white-space: nowrap;
      max-width: 100%;
      border-right: 2px solid var(--accent);
      font-size: 1rem; font-weight: 500; color: var(--ink);
      width: 0;
    }
    .ask-text { display: inline-block; padding-right: 4px; }

    .ask-hint {
      display: flex; align-items: center; gap: 10px;
      margin: 18px 0 0; padding-left: 4px;
      font-size: .88rem; color: var(--muted);
      opacity: 0;
    }
    .ask-spin {
      width: 14px; height: 14px; flex: none;
      border: 2px solid var(--bg-2); border-top-color: var(--accent);
      border-radius: 50%;
    }

    @media (prefers-reduced-motion: no-preference) {
      @keyframes askIn    { from { opacity: 0; } to { opacity: 1; } }
      @keyframes askOut   { from { opacity: 1; } to { opacity: 0; } }
      @keyframes askType  { from { width: 0; } to { width: 100%; } }
      @keyframes askCaret { 0%, 100% { border-right-color: var(--accent); } 50% { border-right-color: transparent; } }
      @keyframes askSpin  { to { transform: rotate(360deg); } }

      /* screen 1 holds for ~3.6s, then hands over to the feed */
      .ask-screen {
        visibility: visible;
        animation: askIn .4s ease .25s both, askOut .5s ease 3.6s both;
      }
      .ask-type {
        animation: askType 1.9s steps(58, end) .8s both,
                   askCaret .8s step-end .8s 4;
      }
      .ask-hint { animation: askIn .35s ease 2.9s both; }
      .ask-spin { animation: askSpin .9s linear 2.9s infinite; }

      /* the feed arrives after the question is answered */
      .mock-body-hd { animation: softIn .5s ease 4.05s both; }
      .mock-body .ia-card:nth-child(1) { animation-delay: 4.25s; }
      .mock-body .ia-card:nth-child(2) { animation-delay: 4.45s; }
      .mock-body .ia-card:nth-child(3) { animation-delay: 4.65s; }
      .mock-win { animation: panelPulse 1.8s cubic-bezier(.4,0,.3,1) 3.9s 2; }
    }

    /* with motion off, screen 1 never shows and the feed is simply there */
    @media (prefers-reduced-motion: reduce) {
      .ask-screen { display: none; }
    }

    @media (max-width: 620px) {
      .ask-bar { padding: 12px 16px; gap: 9px; }
      .ask-type { font-size: .88rem; }
      .ask-label { font-size: .7rem; }
    }

    /* =========================================================
       Hero — the first-party data layer, drawn.
       First-party signals are collected at the top, Salespanel
       resolves them into one record, and the live feed below is
       what that record looks like in use.
       ========================================================= */
    .fpl { margin-bottom: 18px; }

    .fpl-src {
      list-style: none; margin: 0; padding: 0;
      display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px;
    }
    .fpl-src li {
      display: flex; flex-direction: column; align-items: center; gap: 7px;
      background: #fff; border: 1px solid var(--line);
      border-radius: 12px; padding: 12px 6px 10px;
    }
    .fpl-ico { color: var(--accent); display: grid; place-items: center; }
    .fpl-ico svg { width: 19px; height: 19px; display: block; }
    .fpl-lab {
      font-size: .72rem; font-weight: 600; color: var(--body);
      text-align: center; line-height: 1.2; white-space: nowrap;
    }

    /* the collection wires: five short runs feeding down into the bar */
    .fpl-wires {
      display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px;
      height: 22px;
    }
    .fpl-wires span {
      position: relative; display: block;
      justify-self: center; width: 2px; height: 100%;
      background: linear-gradient(180deg, var(--line) 0%, #ded8f0 100%);
      /* no overflow:hidden — it would clip the proof badge, which is
         deliberately offset outside the hero-right box */
    }
    /* a packet of first-party data travelling down the wire */
    .fpl-wires span::after {
      content: ''; position: absolute; left: -1px; top: -30%;
      width: 4px; height: 30%; border-radius: 2px;
      background: var(--accent); opacity: 0;
    }

    .fpl-bar {
      position: relative;
      display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
      background: var(--ink); border-radius: 12px;
      padding: 13px 18px;
      /* no overflow:hidden — it would clip the proof badge, which is
         deliberately offset outside the hero-right box */
    }
    /* faint grid so the bar reads as a surface, not a button */
    .fpl-bar::before {
      content: ''; position: absolute; inset: 0; pointer-events: none;
      background:
        repeating-linear-gradient(90deg, rgba(255,255,255,.07) 0 1px, transparent 1px 22px),
        repeating-linear-gradient(180deg, rgba(255,255,255,.07) 0 1px, transparent 1px 22px);
    }
    .fpl-bar-dot {
      width: 8px; height: 8px; border-radius: 50%; flex: none;
      background: #6fd0a8; position: relative; z-index: 1;
    }
    .fpl-bar-t {
      position: relative; z-index: 1;
      font-size: .85rem; font-weight: 700; color: #fff; letter-spacing: -.01em;
    }
    .fpl-bar-s {
      position: relative; z-index: 1; margin-left: auto;
      font-size: .74rem; color: rgba(255,255,255,.55); white-space: nowrap;
    }

    /* the single run out of the layer into the live feed */
    .fpl-out { height: 18px; display: grid; place-items: center; }
    .fpl-out span {
      position: relative; display: block; width: 2px; height: 100%;
      background: linear-gradient(180deg, #ded8f0 0%, var(--line) 100%);
      /* no overflow:hidden — it would clip the proof badge, which is
         deliberately offset outside the hero-right box */
    }
    .fpl-out span::after {
      content: ''; position: absolute; left: -1px; top: -40%;
      width: 4px; height: 40%; border-radius: 2px;
      background: var(--accent); opacity: 0;
    }

    @media (prefers-reduced-motion: no-preference) {
      @keyframes fplDrop { 0% { top: -30%; opacity: 0; } 15% { opacity: 1; } 85% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
      @keyframes fplRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

      .fpl { animation: fplRise .7s cubic-bezier(.2,.75,.3,1) .18s both; }

      .fpl-wires span::after { animation: fplDrop 1.9s linear infinite; }
      .fpl-wires span:nth-child(1)::after { animation-delay: 0s; }
      .fpl-wires span:nth-child(2)::after { animation-delay: .38s; }
      .fpl-wires span:nth-child(3)::after { animation-delay: .76s; }
      .fpl-wires span:nth-child(4)::after { animation-delay: 1.14s; }
      .fpl-wires span:nth-child(5)::after { animation-delay: 1.52s; }

      .fpl-out span::after { animation: fplDrop 1.4s linear .6s infinite; }
    }

    @media (max-width: 720px) {
      .fpl-src { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .fpl-src li:nth-child(4), .fpl-src li:nth-child(5) { display: none; }
      .fpl-wires { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .fpl-wires span:nth-child(4), .fpl-wires span:nth-child(5) { display: none; }
      .fpl-bar-s { display: none; }
      .fpl-bar-t { font-size: .8rem; }
    }

    /* =========================================================
       MCP conversation — you type in the bar at the bottom, the
       answer builds above it, the way a chat client behaves.
       Resting state is the finished exchange: the script arms
       the panel only if it runs, so nothing can be left hidden.
       ========================================================= */
    .mcp-ask {
      display: flex; align-items: center; gap: 10px;
      border: 1px solid rgba(255,255,255,.16); border-radius: 10px;
      padding: 12px 14px; background: rgba(255,255,255,.03);
    }
    .mcp-ask-ph { font-size: .88rem; color: rgba(255,255,255,.34); display: none; }
    .mcp-ask-typed {
      flex: 1; min-width: 0;
      font-size: .88rem; color: rgba(255,255,255,.9);
      overflow: hidden; white-space: nowrap; text-overflow: clip;
    }
    .mcp-send {
      flex: none; width: 26px; height: 26px; border-radius: 7px;
      display: grid; place-items: center;
      background: var(--accent); color: #fff;
    }
    .mcp-send svg { width: 14px; height: 14px; }

    .mcp-think { display: none; gap: 5px; margin: 0 0 16px; }
    .mcp-think span { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.4); display: block; }

    @media (prefers-reduced-motion: no-preference) {

      /* armed: the thread is empty and the bar is waiting */
      .mcp-chat.is-armed .mcp-q,
      .mcp-chat.is-armed .mcp-tool,
      .mcp-chat.is-armed .mcp-meta,
      .mcp-chat.is-armed .mcp-results li,
      .mcp-chat.is-armed .mcp-ok { opacity: 0; }
      .mcp-chat.is-armed .mcp-ask-typed { width: 0; }
      .mcp-chat.is-armed .mcp-ask-ph { display: block; }
      .mcp-chat.is-armed .mcp-send { opacity: .3; }

      @keyframes mcpTypeBar { from { width: 0; } to { width: 100%; } }
      @keyframes mcpIn      { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
      @keyframes mcpPop     { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
      @keyframes mcpThink   { 0%, 80%, 100% { transform: translateY(0); opacity: .35; } 40% { transform: translateY(-4px); opacity: 1; } }
      @keyframes mcpOut     { to { opacity: 0; visibility: hidden; height: 0; margin: 0; } }
      @keyframes mcpFade    { to { opacity: 0; } }
      @keyframes mcpWake    { to { opacity: 1; } }

      /* 1 — the question is typed into the bar at the bottom */
      .mcp-chat.is-playing .mcp-ask-typed {
        animation: mcpTypeBar 1.8s steps(34, end) .3s both,
                   mcpFade .01s linear 2.35s forwards;
      }
      .mcp-chat.is-playing .mcp-ask-ph { display: block; animation: mcpFade .01s linear .3s forwards, mcpWake .3s ease 2.4s forwards; }
      .mcp-chat.is-playing .mcp-send { animation: mcpWake .3s ease 1.4s both; }

      /* 2 — sent: it appears above as the user's message */
      .mcp-chat.is-playing .mcp-q { animation: mcpIn .4s cubic-bezier(.2,.8,.3,1) 2.4s both; }

      /* 3 — Claude thinks */
      .mcp-chat.is-playing .mcp-think {
        display: flex;
        animation: mcpIn .3s ease 2.9s both, mcpOut .01s linear 3.7s forwards;
      }
      .mcp-chat.is-playing .mcp-think span { animation: mcpThink 1s ease-in-out infinite; }
      .mcp-chat.is-playing .mcp-think span:nth-child(2) { animation-delay: .16s; }
      .mcp-chat.is-playing .mcp-think span:nth-child(3) { animation-delay: .32s; }

      /* 4 — the tool call runs, binds its parameters, then confirms */
      .mcp-chat.is-playing .mcp-tool { animation: mcpIn .4s ease 3.75s both; }
      .mcp-chat.is-playing .mcp-chip { animation: mcpIn .3s ease both; }
      .mcp-chat.is-playing .mcp-chip:nth-of-type(1) { animation-delay: 3.95s; }
      .mcp-chat.is-playing .mcp-chip:nth-of-type(2) { animation-delay: 4.08s; }
      .mcp-chat.is-playing .mcp-chip:nth-of-type(3) { animation-delay: 4.21s; }
      .mcp-chat.is-playing .mcp-ok { animation: mcpPop .35s cubic-bezier(.2,1.3,.4,1) 4.4s both; }

      /* 5 — the result line, then the answer lead by lead */
      .mcp-chat.is-playing .mcp-meta { animation: mcpIn .35s ease 4.65s both; }
      .mcp-chat.is-playing .mcp-results li { animation: mcpIn .45s cubic-bezier(.2,.75,.3,1) both; }
      .mcp-chat.is-playing .mcp-results li:nth-child(1) { animation-delay: 4.95s; }
      .mcp-chat.is-playing .mcp-results li:nth-child(2) { animation-delay: 5.15s; }
      .mcp-chat.is-playing .mcp-results li:nth-child(3) { animation-delay: 5.35s; }
    }

    /* ── Resource cards: wayfinding, so calm — but each one names its
       destination rather than trailing a bare arrow ── */
    .res-grid { gap: 20px; }
    .res-card {
      display: flex; flex-direction: column;
      padding: 32px 30px 30px;
      border-radius: 20px;
      transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
    }
    .res-ico {
      width: 44px; height: 44px; margin-bottom: 22px;
      display: grid; place-items: center;
      background: var(--accent-lt); border-radius: 13px;
      color: var(--accent);
      transition: background-color .22s ease, color .22s ease;
    }
    .res-ico svg { width: 22px; height: 22px; }
    .res-card h3 { font-size: 1.12rem; margin: 0 0 9px; letter-spacing: -.022em; }
    .res-card p { font-size: .94rem; line-height: 1.6; color: var(--muted); margin: 0 0 22px; }

    .res-go {
      margin-top: auto;
      display: inline-flex; align-items: center; gap: 8px;
      font-size: .9rem; font-weight: 700; color: var(--accent);
    }
    .res-go svg { width: 15px; height: 15px; flex: none; transition: transform .22s ease; }

    .res-card:hover .res-go svg { transform: translateX(4px); }
    .res-card:hover .res-ico { background: var(--accent); color: #fff; }

    @media (prefers-reduced-motion: no-preference) {
      .res-card:hover { transform: translateY(-3px); }
    }

    /* =========================================================
       Featured posts — each card leads with its own artwork, then
       a category kicker, then the title. Art is drawn in CSS, so
       there are no images to source or ship.
       ========================================================= */
    .posts-grid { gap: 22px; }

    .post-card {
      display: flex; flex-direction: column;
      background: none; border: none; border-radius: 0;
      padding: 0; box-shadow: none;
      transition: transform .24s ease;
    }
    .post-card:hover { border: none; box-shadow: none; }

    .post-thumb {
      position: relative; display: block;
      aspect-ratio: 16 / 10; width: 100%;
      border-radius: 16px; overflow: hidden;
      margin-bottom: 18px;
      display: grid; place-items: center;
      transition: box-shadow .24s ease;
    }
    .post-card:hover .post-thumb { box-shadow: 0 22px 44px -26px rgba(27,27,32,.38); }

    /* four distinct grounds, the way a real editorial set varies */
    .pt-a { background: linear-gradient(150deg, #4a3f78 0%, #2e2749 55%, #8b7bd6 100%); }
    .pt-b { background: linear-gradient(150deg, #f5f2fd 0%, #e6defd 48%, #d9d1ef 100%); }
    .pt-c { background: linear-gradient(150deg, #e8fbf2 0%, #d2f3e4 45%, #bdead6 100%); }
    .pt-d { background: linear-gradient(150deg, #fef1e2 0%, #fbe0c6 50%, #f8d2ae 100%); }

    /* A — capability chips */
    .pt-chips { display: flex; gap: 8px; }
    .pt-chip {
      display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
      background: #fff; border-radius: 9px; padding: 10px 11px 9px;
      font-size: .64rem; font-weight: 700; color: #1f1b2e;
      box-shadow: 0 6px 14px -8px rgba(20,10,60,.4);
    }
    .pt-gl {
      display: grid; place-items: center;
      width: 18px; height: 18px; border-radius: 5px;
      background: #f1e8ff; color: #1f1b2e; font-style: normal; font-size: .6rem;
    }

    /* B — anonymous rows resolving */
    .pt-rows { display: grid; gap: 7px; width: 62%; }
    .pt-row {
      display: flex; align-items: center; gap: 8px;
      background: rgba(255,255,255,.86); border-radius: 7px; padding: 7px 9px;
    }
    .pt-av { width: 14px; height: 14px; border-radius: 50%; background: #1f1b2e; flex: none; }
    .pt-av.is-anon { background: #c4bdd8; }
    .pt-bar { height: 5px; border-radius: 3px; background: #d5ceea; display: block; }
    .pt-bar.w1 { width: 46%; } .pt-bar.w2 { width: 62%; } .pt-bar.w3 { width: 54%; background: #1f1b2e; }
    .pt-row.is-known { background: #fff; box-shadow: 0 6px 14px -8px rgba(20,10,60,.35); }

    /* C — a guide cover */
    .pt-doc {
      width: 44%; aspect-ratio: 3 / 4;
      background: #fff; border-radius: 6px;
      padding: 14px 12px; display: grid; align-content: start; gap: 7px;
      box-shadow: 0 10px 22px -10px rgba(10,60,40,.35);
    }
    .pt-doc-t { height: 8px; width: 70%; border-radius: 3px; background: #2e8f6a; }
    .pt-doc-l { height: 4px; width: 100%; border-radius: 2px; background: #d8e8e0; }
    .pt-doc-l.short { width: 62%; }

    /* D — an agent exchange */
    .pt-chat { display: grid; gap: 7px; width: 66%; }
    .pt-msg { height: 13px; border-radius: 7px; display: block; }
    .pt-msg.is-you { width: 58%; background: #1f1b2e; justify-self: end; }
    .pt-msg.is-them { width: 78%; background: rgba(255,255,255,.92); }
    .pt-msg.is-them.short { width: 46%; }

    .post-kicker {
      display: block; margin-bottom: 7px;
      font-size: .78rem; font-weight: 600; color: var(--muted);
    }
    .post-card h3 {
      font-size: 1.06rem; line-height: 1.34; margin: 0 0 8px;
      letter-spacing: -.022em; color: var(--ink);
    }
    .post-card p { font-size: .9rem; line-height: 1.55; color: var(--muted); margin: 0; }
    .post-card:hover h3 { color: var(--accent); }

    @media (prefers-reduced-motion: no-preference) {
      .post-card:hover { transform: translateY(-4px); }
    }

    @media (max-width: 1000px) {
      .posts-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    }
    @media (max-width: 620px) {
      .posts-grid { grid-template-columns: minmax(0,1fr); }
      .post-thumb { aspect-ratio: 16 / 9; }
    }

    /* ── Featured posts now carry the real article artwork ── */
    .post-thumb { background: var(--bg-2); display: block; }
    .post-thumb img {
      width: 100%; height: 100%;
      object-fit: cover; object-position: center;
      display: block;
      transition: transform .5s cubic-bezier(.2,.75,.3,1);
    }
    .post-card:hover .post-thumb img { transform: scale(1.04); }

    /* ── Post thumbnails: these are square share graphics with the
       article title set inside them, so the frame matches their
       native ratio rather than cropping the type away ── */
    .post-thumb { aspect-ratio: 1 / 1; border-radius: 14px; }
    .post-thumb img { object-fit: cover; object-position: center; }

    /* the tracking diagram is wider than square and dense with fine
       labels — give it room rather than magnifying a crop */
    .post-card:nth-child(3) .post-thumb { background: #fff; }
    .post-card:nth-child(3) .post-thumb img { object-fit: contain; padding: 6%; }

    @media (max-width: 620px) {
      .post-thumb { aspect-ratio: 4 / 3; }
      .post-thumb img { object-fit: contain; background: #fff; }
    }

    /* ── Post thumbnails: landscape photography, cropped to a
       consistent 16:10 frame ── */
    .post-thumb { aspect-ratio: 16 / 10; border-radius: 16px; background: var(--bg-2); }
    .post-thumb img { object-fit: cover; object-position: center; }
    .post-card:nth-child(3) .post-thumb { background: var(--bg-2); }
    .post-card:nth-child(3) .post-thumb img { object-fit: cover; padding: 0; }

    @media (max-width: 620px) {
      .post-thumb { aspect-ratio: 16 / 9; }
      .post-thumb img { object-fit: cover; background: none; }
    }

    .post-thumb--artwork { background: #f4f2eb; }
    .post-thumb--artwork img { object-fit: contain; }

    /* ── Resource cards now lead with a photo, matching the posts band.
       The icon becomes a badge sitting on the image corner. ── */
    .res-card { padding: 0; background: none; border: none; box-shadow: none; }
    .res-card:hover { background: none; border: none; box-shadow: none; }

    .res-thumb {
      position: relative; display: block;
      aspect-ratio: 16 / 10; width: 100%;
      border-radius: 16px; overflow: hidden;
      background: var(--bg-2); margin-bottom: 20px;
      transition: box-shadow .24s ease;
    }
    .res-thumb img {
      width: 100%; height: 100%;
      object-fit: cover; object-position: center; display: block;
      transition: transform .5s cubic-bezier(.2,.75,.3,1);
    }
    .res-card:hover .res-thumb { box-shadow: 0 22px 44px -26px rgba(27,27,32,.38); }
    .res-card:hover .res-thumb img { transform: scale(1.04); }

    .res-card .res-ico {
      position: absolute; left: 14px; bottom: 14px; margin: 0;
      width: 40px; height: 40px; border-radius: 12px;
      background: #fff; color: var(--accent);
      box-shadow: 0 8px 18px -10px rgba(27,27,32,.45);
    }
    .res-card .res-ico svg { width: 20px; height: 20px; }
    .res-card:hover .res-ico { background: #fff; color: var(--accent); }

    .res-card h3 { font-size: 1.1rem; margin: 0 0 8px; }
    .res-card p { margin: 0 0 16px; }
    .res-card .res-go { margin-top: auto; }

    @media (max-width: 620px) {
      .res-thumb { aspect-ratio: 16 / 9; }
    }

    /* ── CTA tertiary links: a single quiet line, not a flex column ── */
    .cta-tertiary {
      display: block; margin-top: 20px;
      font-size: .88rem; line-height: 1.7;
      color: rgba(255,255,255,.45);
    }
    .cta-tertiary a {
      color: rgba(255,255,255,.78);
      text-decoration: underline; text-underline-offset: 3px;
      text-decoration-color: rgba(255,255,255,.28);
      white-space: nowrap;
    }
    .cta-tertiary a:hover { color: #fff; text-decoration-color: #fff; }
    .cta-tertiary span { margin: 0 8px; }

    /* =========================================================
       Enterprise readiness — the heading holds a column of its
       own and the four assurances sit beside it as a 2x2 board,
       so the section carries weight instead of reading as a row
       of grey boxes.
       ========================================================= */
    .ent-panel {
      display: grid;
      grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
      gap: clamp(32px, 5vw, 72px);
      align-items: start;
      background: linear-gradient(160deg, #f7eeff 0%, #f1e8ff 100%);
      border: 1px solid #e9e5f6;
      border-radius: 26px;
      padding: clamp(34px, 4.4vw, 64px);
    }
    .ent-panel .sec-hd {
      margin: 0; text-align: left; max-width: none;
      display: block;
    }
    .ent-panel .sec-hd h2 {
      margin: 0; text-align: left; max-width: 14ch;
      font-size: clamp(1.8rem, 3vw, 2.5rem);
    }

    .ent-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
    .ent-card {
      background: #fff;
      border: 1px solid #efebfa;
      border-radius: 16px;
      padding: 26px 24px 28px;
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .ent-card:hover { border-color: #ded8f0; box-shadow: 0 18px 38px -28px rgba(31,27,46,.32); }

    .ent-ico {
      display: grid; place-items: center;
      width: 38px; height: 38px; margin-bottom: 18px;
      border-radius: 11px;
      background: var(--accent-lt); color: var(--accent);
    }
    .ent-ico svg { width: 20px; height: 20px; }

    .ent-card h3 { font-size: 1rem; margin: 0 0 9px; letter-spacing: -.018em; }
    .ent-card p { font-size: .92rem; line-height: 1.6; color: var(--muted); margin: 0; }

    @media (max-width: 1000px) {
      .ent-panel { grid-template-columns: minmax(0, 1fr); gap: 30px; }
      .ent-panel .sec-hd h2 { max-width: 20ch; }
    }
    @media (max-width: 620px) {
      .ent-grid { grid-template-columns: minmax(0, 1fr); }
      .ent-panel { border-radius: 20px; }
    }

    /* =========================================================
       The first-party data layer, built as an actual layer.
       Sources dock into a slab that has real thickness; the live
       feed below rests on it. The word "layer" made physical.
       ========================================================= */
    .fpl { margin-bottom: 20px; }

    .fpl-src {
      list-style: none; margin: 0; padding: 0;
      display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px;
      position: relative; z-index: 2;
    }
    .fpl-src li {
      position: relative;
      display: flex; flex-direction: column; align-items: center; gap: 7px;
      background: #fff; border: 1px solid var(--line);
      border-radius: 12px 12px 4px 4px;
      padding: 13px 6px 14px;
      box-shadow: 0 8px 18px -14px rgba(27,27,32,.4);
    }
    .fpl-ico { color: var(--accent); display: grid; place-items: center; }
    .fpl-ico svg { width: 19px; height: 19px; display: block; }
    .fpl-lab {
      font-size: .72rem; font-weight: 600; color: var(--body);
      text-align: center; line-height: 1.2; white-space: nowrap;
    }

    /* each source ends in a plug that seats into the slab below */
    .fpl-plug {
      position: absolute; left: 50%; bottom: -9px; transform: translateX(-50%);
      width: 26px; height: 10px; border-radius: 0 0 4px 4px;
      background: #fff; border: 1px solid var(--line); border-top: none;
    }
    .fpl-plug::after {
      content: ''; position: absolute; left: 50%; top: 2px; transform: translateX(-50%);
      width: 5px; height: 5px; border-radius: 50%; background: var(--accent);
    }

    /* the slab: a face you read, and an edge that gives it depth */
    .fpl-slab { position: relative; margin-top: -1px; z-index: 1; }
    .fpl-face {
      position: relative;
      display: flex; align-items: center; gap: 12px; flex-wrap: nowrap;
      background: var(--ink);
      border-radius: 12px 12px 0 0;
      padding: 15px 20px;
      /* no overflow:hidden — it would clip the proof badge, which is
         deliberately offset outside the hero-right box */
    }
    /* the docking ports along the top edge */
    .fpl-face::before {
      content: ''; position: absolute; left: 0; right: 0; top: 0; height: 3px;
      background: linear-gradient(90deg,
        transparent 0 8%, rgba(31,27,46,.9) 8% 12%, transparent 12% 28%,
        rgba(31,27,46,.9) 28% 32%, transparent 32% 48%,
        rgba(31,27,46,.9) 48% 52%, transparent 52% 68%,
        rgba(31,27,46,.9) 68% 72%, transparent 72% 88%,
        rgba(31,27,46,.9) 88% 92%, transparent 92%);
    }
    .fpl-edge {
      height: 9px; border-radius: 0 0 12px 12px;
      background: linear-gradient(180deg, #0c0c0c 0%, #171327 100%);
      box-shadow: 0 12px 22px -14px rgba(27,27,32,.55);
    }

    .fpl-bar-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #6fd0a8; }
    .fpl-bar-t {
      font-size: .85rem; font-weight: 700; color: #fff;
      letter-spacing: -.01em; white-space: nowrap; flex: none;
    }
    .fpl-bar-s {
      font-size: .74rem; color: rgba(255,255,255,.5);
      white-space: nowrap; flex: none;
    }

    /* the resolved record moving through the layer */
    .fpl-flow {
      position: relative; flex: 1; min-width: 40px; height: 3px;
      background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden;
    }
    .fpl-flow i {
      position: absolute; top: 0; left: -22%;
      width: 22%; height: 100%; border-radius: 2px;
      background: linear-gradient(90deg, rgba(31,27,46,0), #a78bfa, rgba(31,27,46,0));
    }

    @media (prefers-reduced-motion: no-preference) {
      @keyframes fplRun  { to { left: 100%; } }
      @keyframes fplRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
      @keyframes fplSeat { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }

      .fpl { animation: fplRise .7s cubic-bezier(.2,.75,.3,1) .18s both; }
      .fpl-flow i { animation: fplRun 2.6s linear infinite; }
      .fpl-flow i:nth-child(2) { animation-delay: .85s; }
      .fpl-flow i:nth-child(3) { animation-delay: 1.7s; }
      .fpl-plug::after { animation: fplSeat 2s ease-in-out infinite; }
      .fpl-src li:nth-child(2) .fpl-plug::after { animation-delay: .3s; }
      .fpl-src li:nth-child(3) .fpl-plug::after { animation-delay: .6s; }
      .fpl-src li:nth-child(4) .fpl-plug::after { animation-delay: .9s; }
      .fpl-src li:nth-child(5) .fpl-plug::after { animation-delay: 1.2s; }
    }

    @media (max-width: 760px) {
      .fpl-src { grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .fpl-src li:nth-child(4), .fpl-src li:nth-child(5) { display: none; }
      .fpl-bar-s { display: none; }
      .fpl-bar-t { font-size: .78rem; white-space: normal; }
      .fpl-face::before {
        background: linear-gradient(90deg,
          transparent 0 13%, rgba(31,27,46,.9) 13% 20%, transparent 20% 46%,
          rgba(31,27,46,.9) 46% 54%, transparent 54% 80%,
          rgba(31,27,46,.9) 80% 87%, transparent 87%);
      }
    }

    /* =========================================================
       Hero stage as two blocks: the data layer is its own panel,
       the live feed is another, with a short run between them so
       the relationship still reads as "this feeds that".
       ========================================================= */
    .fpl {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 20px;
      padding: 20px 20px 22px;
      margin-bottom: 0;
      box-shadow: 0 14px 32px -26px rgba(27,27,32,.32);
    }
    .fpl-src li { box-shadow: none; background: var(--bg-soft); border-color: #efebfa; }
    .fpl-plug { background: var(--bg-soft); border-color: #efebfa; }
    .fpl-edge { box-shadow: none; }

    /* the run between the two blocks */
    .fpl-link {
      position: relative; height: 34px;
      display: grid; place-items: center;
    }
    .fpl-link::before {
      content: ''; position: absolute; top: 0; bottom: 0;
      width: 2px; background: linear-gradient(180deg, #ded8f0, var(--line));
    }
    .fpl-link span {
      position: relative; z-index: 1;
      width: 22px; height: 22px; border-radius: 50%;
      background: #fff; border: 1px solid var(--line);
      display: grid; place-items: center;
      color: var(--accent); font-size: .7rem; line-height: 1;
      box-shadow: 0 4px 10px -6px rgba(27,27,32,.3);
    }

    @media (prefers-reduced-motion: no-preference) {
      @keyframes fplDrip { 0% { top: -30%; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
      .fpl-link::after {
        content: ''; position: absolute; left: 50%; margin-left: -2px;
        width: 4px; height: 30%; border-radius: 2px; background: var(--accent);
        animation: fplDrip 1.6s linear infinite;
      }
    }

    @media (max-width: 620px) {
      .fpl { padding: 16px 14px 18px; border-radius: 16px; }
      .fpl-link { height: 26px; }
    }

    /* =========================================================
       Hero stage in two columns: the data layer on the left
       feeding the live feed on the right.
       ========================================================= */
    @media (min-width: 1000px) {
      .hero-right {
        display: grid;
        grid-template-columns: minmax(0, .88fr) 40px minmax(0, 1.3fr);
        align-items: start;
        gap: 0;
      }
      .fpl { grid-column: 1; margin: 0; align-self: stretch; }
      .fpl-link { grid-column: 2; height: auto; align-self: center; }
      .mock-win { grid-column: 3; }

      /* the run now points across, not down */
      .fpl-link::before {
        top: 50%; bottom: auto; left: 0; right: 0;
        width: auto; height: 2px; transform: translateY(-1px);
        background: linear-gradient(90deg, #ded8f0, var(--line));
      }
      .fpl-link span { transform: rotate(-90deg); }

      /* the packet travels left to right */
      @media (prefers-reduced-motion: no-preference) {
        @keyframes fplDripX { 0% { left: -30%; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { left: 100%; opacity: 0; } }
        .fpl-link::after {
          top: 50%; margin-top: -2px; margin-left: 0;
          width: 30%; height: 4px;
          animation: fplDripX 1.6s linear infinite;
        }
      }

      /* the layer column is narrower, so it sheds its optional text */
      .fpl-src { gap: 7px; }
      .fpl-src li { padding: 11px 4px 12px; }
      .fpl-ico svg { width: 17px; height: 17px; }
      .fpl-lab { font-size: .66rem; }
      .fpl-face { padding: 14px 16px; gap: 10px; }
      .fpl-bar-t { font-size: .76rem; white-space: normal; }
      .fpl-bar-s { display: none; }
      .fpl-flow { min-width: 24px; }
    }

    @media (min-width: 1000px) and (max-width: 1200px) {
      .fpl-src { grid-template-columns: repeat(3, minmax(0,1fr)); row-gap: 8px; }
      .fpl-src li:nth-child(4), .fpl-src li:nth-child(5) { display: flex; }
      .fpl-face::before { display: none; }
    }

    /* =========================================================
       Inside the layer: the four operations the slab names, shown
       running. Fills the block and makes "resolve · score ·
       segment · sync" something you watch rather than read.
       ========================================================= */
    .fpl { display: flex; flex-direction: column; }
    .fpl-slab { flex: none; }

    .fpl-ops {
      list-style: none; margin: 18px 0 0; padding: 0;
      display: flex; flex-direction: column; gap: 10px;
      flex: 1;
    }
    .fpl-ops li {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr);
      grid-template-areas: "n t" "n m" "b b";
      align-items: center; gap: 2px 11px;
      background: var(--bg-soft);
      border: 1px solid #efebfa;
      border-radius: 12px;
      padding: 12px 14px 13px;
      flex: 1;
      align-content: center;
    }
    .fpl-op-n {
      grid-area: n;
      font-size: .66rem; font-weight: 800; letter-spacing: .06em;
      color: var(--accent);
      background: #fff; border: 1px solid #e7e2f3; border-radius: 7px;
      padding: 5px 7px; line-height: 1;
    }
    .fpl-op-t { grid-area: t; font-size: .84rem; font-weight: 700; color: var(--ink); line-height: 1.2; }
    .fpl-op-m { grid-area: m; font-size: .7rem; color: var(--muted); line-height: 1.3; }
    .fpl-op-bar {
      grid-area: b; margin-top: 9px;
      height: 3px; border-radius: 2px; background: #e7e2f3;
      overflow: hidden; display: block;
    }
    .fpl-op-bar i {
      display: block; height: 100%; width: 100%; border-radius: 2px;
      background: var(--accent);
      transform: scaleX(0); transform-origin: left center;
    }

    @media (prefers-reduced-motion: no-preference) {
      @keyframes fplOp { 0% { transform: scaleX(0); } 22% { transform: scaleX(1); } 82% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
      .fpl-op-bar i { animation: fplOp 4.4s cubic-bezier(.3,.7,.4,1) infinite; }
      .fpl-ops li:nth-child(1) .fpl-op-bar i { animation-delay: 0s; }
      .fpl-ops li:nth-child(2) .fpl-op-bar i { animation-delay: .5s; }
      .fpl-ops li:nth-child(3) .fpl-op-bar i { animation-delay: 1s; }
      .fpl-ops li:nth-child(4) .fpl-op-bar i { animation-delay: 1.5s; }
    }

    /* stacked layout doesn't need the block filled — keep it compact */
    @media (max-width: 999px) {
      .fpl-ops { flex-direction: row; flex-wrap: wrap; gap: 8px; }
      .fpl-ops li { flex: 1 1 46%; }
    }
    @media (max-width: 620px) {
      .fpl-ops li { flex: 1 1 100%; }
      .fpl-op-m { display: none; }
    }

    /* =========================================================
       Layer block, refined: tiles clear the slab, the slab keeps
       its ports, and the operations read as a clean list.
       ========================================================= */

    /* the plugs were being cut by the slab — the ports on the slab
       already carry that meaning, so the tiles simply sit above it */
    .fpl-plug { display: none; }
    .fpl-src { gap: 8px; margin-bottom: 12px; }
    .fpl-src li {
      border-radius: 12px;
      padding: 13px 6px 12px;
      background: #fff;
      border: 1px solid #ebe3ff;
      box-shadow: 0 3px 8px -6px rgba(27,27,32,.22);
    }
    .fpl-ico svg { width: 18px; height: 18px; }
    .fpl-lab { font-size: .68rem; color: var(--ink); }

    /* slab: a touch more presence, ports still aligned to the tiles */
    .fpl-face { border-radius: 12px 12px 0 0; padding: 14px 18px; }
    .fpl-edge { height: 7px; }
    .fpl-bar-t { font-size: .8rem; }

    /* operations: a calm list, each with its own progress rail */
    .fpl-ops { gap: 8px; margin-top: 16px; }
    .fpl-ops li {
      grid-template-columns: 30px minmax(0, 1fr);
      grid-template-areas: "n t" "n m" ". b";
      gap: 1px 12px;
      background: #fff;
      border: 1px solid #ede5ff;
      border-radius: 12px;
      padding: 13px 15px 14px;
      box-shadow: none;
      transition: border-color .2s ease;
    }
    .fpl-op-n {
      width: 30px; height: 30px; padding: 0;
      display: grid; place-items: center;
      border-radius: 9px; font-size: .62rem;
      background: var(--accent-lt); border: none; color: var(--accent);
      align-self: center;
    }
    .fpl-op-t { font-size: .86rem; font-weight: 700; letter-spacing: -.012em; }
    .fpl-op-m { font-size: .715rem; color: var(--muted); }
    .fpl-op-bar { margin-top: 10px; height: 2px; background: #eee6ff; }

    /* the run between blocks: a cleaner marker */
    .fpl-link span {
      width: 26px; height: 26px;
      border: 1px solid #e7e2f3; background: #fff;
      color: var(--accent); font-size: .62rem;
      box-shadow: 0 4px 12px -6px rgba(31,27,46,.5);
    }

    @media (min-width: 1000px) {
      .fpl { padding: 18px 18px 20px; }
      .fpl-ops li { padding: 12px 13px 13px; }
      .fpl-op-t { font-size: .82rem; }
      .fpl-op-m { font-size: .69rem; }
    }

    /* =========================================================
       Problem recognition — each card draws its own claim.
       The three break-lines this replaces differed only by where
       the gap sat, so at a glance they read as the same picture
       three times. These are three different pictures:
         01  measurable activity above unnamed accounts
         02  one lead, three systems, three answers
         03  the buyer's actions, and how far behind them Sales is
       Flat tinted fills, no outline-heavy strokes, sentence case
       inside the frame. Nothing here implies a figure we don't
       have — the marks are counts of themselves, not data.
       ========================================================= */
    .prob-card {
      display: flex; flex-direction: column;
      padding: 30px 28px 26px;
    }
    .prob-card::after { content: none; }

    .prob-role {
      display: inline-flex; align-items: baseline; gap: 9px;
      margin-bottom: 13px;
      font-size: .85rem; font-weight: 700; letter-spacing: -.012em;
      color: var(--accent);
    }
    .prob-role i {
      font-style: normal; font-size: .72rem; font-weight: 700;
      color: #9a93ad; font-variant-numeric: tabular-nums;
    }
    .prob-card h3 { font-size: 1.12rem; line-height: 1.3; margin: 0 0 10px; }
    .prob-card p  { margin: 0 0 24px; }

    /* ── the figure ───────────────────────────────────────── */
    .prob-fig {
      margin: auto 0 0; padding: 20px 0 0;
      border-top: 1px solid var(--line-2);
    }
    .prob-fig svg { display: block; width: 100%; height: auto; }
    .prob-fig figcaption {
      margin-top: 13px;
      font-size: .72rem; line-height: 1.4; color: var(--muted);
    }

    /* shared type inside the frames */
    .pg-k {
      font-family: var(--ff); font-size: 10px; font-weight: 650;
      fill: #6e6880; letter-spacing: -.005em;
    }
    .pg-k--end { text-anchor: end; }

    /* 01 — what is measured, and what is missing beneath it */
    .pg-have rect { fill: var(--accent); opacity: .85; }
    .pg-drop path { stroke: #e5e0f2; stroke-width: 1.5; stroke-dasharray: 2 3; stroke-linecap: round; }
    .pg-void rect { fill: #fbfaff; stroke: #e5e0f2; stroke-width: 1.5; stroke-dasharray: 4 4; }
    .pg-q text {
      font-family: var(--ff); font-size: 13px; font-weight: 700;
      fill: #c6c0d6; text-anchor: middle;
    }

    /* 02 — three systems disagreeing about one lead */
    .pg-row  { fill: #faf9ff; }
    .pg-chip { fill: #d8d2e8; }
    .pg-src  { font-family: var(--ff); font-size: 10.5px; fill: #6e6880; }
    .pg-val  {
      font-family: var(--ff); font-size: 10.5px; font-weight: 700;
      fill: var(--ink); text-anchor: end;
    }

    /* 03 — the distance between doing and knowing */
    .pg-axis { stroke: #e5e0f2; stroke-width: 2; stroke-linecap: round; }
    .pg-lag  { stroke: #d8d2e8; stroke-width: 2; stroke-dasharray: 3 5; stroke-linecap: round; }
    .pg-past circle { fill: #fff; stroke: #d8d2e8; stroke-width: 2; }
    .pg-now  { fill: var(--accent); }
    .pg-t text {
      font-family: var(--ff); font-size: 9.5px; fill: #9b96ab; text-anchor: middle;
    }
    .pg-nowt {
      font-family: var(--ff); font-size: 10px; font-weight: 700;
      fill: var(--ink); text-anchor: middle;
    }
    .pg-lagt {
      font-family: var(--ff); font-size: 9.5px; fill: #9a93ad; text-anchor: middle;
    }

    @media (prefers-reduced-motion: no-preference) {
      /* one quiet pulse per card, staggered — the thing that is
         absent is the thing that moves */
      @keyframes pgSeek { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
      .pg-void rect,
      .pg-lag { animation: pgSeek 2.6s ease-in-out infinite; }
      .prob-card:nth-child(2) .pg-void rect,
      .prob-card:nth-child(2) .pg-lag { animation-delay: .45s; }
      .prob-card:nth-child(3) .pg-void rect,
      .prob-card:nth-child(3) .pg-lag { animation-delay: .9s; }
    }

    @media (max-width: 980px) and (min-width: 621px) {
      .prob-card { padding: 26px 22px 22px; }
    }

    /* =========================================================
       HERO EXTRACTION ENGINE
       Two ideas, in order: (1) how the data is extracted — every
       source is labelled with the mechanism that pulls it; (2) the
       system takes it automatically — the core reaches outward and
       the pulses run source ➝ core, never the other way.
       ========================================================= */
    .hx { display: block; width: 100%; height: auto; overflow: visible; }

    .hx-pod {
      fill: #fff; stroke: var(--line); stroke-width: 1;
      filter: drop-shadow(0 10px 20px rgba(27,27,32,.07));
    }
    .hx-pod--key { stroke: rgba(31,27,46,.42); }
    .hx-ico { color: var(--accent); }
    .hx-t {
      font-family: var(--ff); font-size: 13.5px; font-weight: 650;
      fill: var(--ink); letter-spacing: -.01em;
    }
    .hx-m { font-family: var(--ff); font-size: 10.5px; font-weight: 500; fill: #7c7788; }
    .hx-port { fill: #fff; stroke: var(--accent); stroke-width: 1.6; }

    .hx-wire { stroke: var(--line); stroke-width: 1.4; }
    .hx-pull {
      stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round;
      stroke-dasharray: 9 91; stroke-dashoffset: 100; opacity: 0;
    }

    .hx-halo { pointer-events: none; }
    .hx-orbit {
      fill: none; stroke: rgba(31,27,46,.3); stroke-width: 1.2;
      stroke-dasharray: 3 9; transform-box: fill-box; transform-origin: center;
    }
    .hx-reach {
      fill: none; stroke: rgba(31,27,46,.5); stroke-width: 1.4;
      transform-box: fill-box; transform-origin: center; opacity: 0;
    }
    .hx-plate { filter: drop-shadow(0 22px 40px rgba(27,27,32,.28)); }
    .hx-sweep { fill: rgba(167,139,250,.22); transform-box: fill-box; transform-origin: 0 50%; }
    .hx-dial { fill: none; stroke: rgba(255,255,255,.14); stroke-width: 1; stroke-dasharray: 2 6; }

    .hx-core-k {
      font-family: var(--ff); font-size: 9px; font-weight: 700;
      letter-spacing: .13em; fill: rgba(255,255,255,.5); text-anchor: middle;
    }
    .hx-core-v {
      font-family: var(--ff); font-size: 18px; font-weight: 700;
      letter-spacing: -.02em; fill: #fff; text-anchor: middle;
    }
    .hx-core-s {
      font-family: var(--ff); font-size: 10px; font-weight: 500;
      fill: rgba(255,255,255,.55); text-anchor: middle;
    }

    @media (prefers-reduced-motion: no-preference) {
      /* a packet leaves the source and is drawn into the core */
      @keyframes hxPull {
        0%   { stroke-dashoffset: 100; opacity: 0; }
        12%  { opacity: 1; }
        78%  { opacity: 1; }
        100% { stroke-dashoffset: 0; opacity: 0; }
      }
      @keyframes hxReach { from { transform: scale(1); opacity: .55; } to { transform: scale(1.85); opacity: 0; } }
      @keyframes hxSpin  { to { transform: rotate(360deg); } }
      @keyframes hxPort  { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }

      .hx-pull { animation: hxPull 2.8s cubic-bezier(.55,0,.5,1) infinite; }
      .hx-pull--2 { animation-delay: .5s; }
      .hx-pull--3 { animation-delay: 1s; }
      .hx-pull--4 { animation-delay: 1.5s; }
      .hx-pull--5 { animation-delay: 2s; }

      .hx-reach--a { animation: hxReach 3.4s ease-out infinite; }
      .hx-reach--b { animation: hxReach 3.4s ease-out 1.7s infinite; }
      .hx-orbit { animation: hxSpin 26s linear infinite; }
      .hx-sweep { animation: hxSpin 6.5s linear infinite; }
      .hx-port { animation: hxPort 2.8s ease-in-out infinite; }
      .hx-src g:nth-child(2) .hx-port { animation-delay: .5s; }
      .hx-src g:nth-child(3) .hx-port { animation-delay: 1s; }
      .hx-src g:nth-child(4) .hx-port { animation-delay: 1.5s; }
      .hx-src g:nth-child(5) .hx-port { animation-delay: 2s; }
    }

    @media (max-width: 760px) {
      .hx-m { font-size: 11.5px; }
      .hx-t { font-size: 14.5px; }
    }

    /* =========================================================
       HERO STAGE — "the record"
       One focal object, two quiet flanks. The flanks are the
       mechanisms that extract (left) and the systems that receive
       (right); the dark card in the middle is the single record
       they produce, assembling itself with nobody touching it.
       Hierarchy is carried by weight: the centre is dark and
       elevated, everything else is pale and recessive.
       ========================================================= */
    @property --hs-n { syntax: '<integer>'; inherits: false; initial-value: 74; }

    .hero-right { display: block; }
    .hs {
      display: grid;
      grid-template-columns: minmax(0, .74fr) 56px minmax(0, 1.42fr) 56px minmax(0, .74fr);
      align-items: center;
      padding-bottom: clamp(22px, 3vw, 40px);
    }

    /* ── flanks ───────────────────────────────────────────── */
    .hs-side { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
    .hs-chip {
      position: relative;
      display: grid; grid-template-columns: 30px 1fr; column-gap: 10px;
      align-items: center;
      background: rgba(255, 255, 255, .82);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 11px 13px;
      backdrop-filter: blur(6px);
    }
    .hs-chip-ico {
      grid-row: 1 / 3; align-self: center;
      width: 30px; height: 30px; border-radius: 9px;
      display: grid; place-items: center;
      background: rgba(31,27,46, .09); color: var(--accent);
    }
    .hs-chip-ico svg { width: 16px; height: 16px; display: block; }
    .hs-chip-t {
      font-size: .8rem; font-weight: 650; color: var(--ink);
      letter-spacing: -.012em; line-height: 1.25;
    }
    .hs-chip-m { font-size: .68rem; color: #6e6880; line-height: 1.3; }

    /* the out-side chips are receipts, not inputs — flip the accent */
    .hs-chip--out .hs-chip-ico { background: rgba(60, 170, 125, .11); color: #2f9c72; }

    /* ── the bus: many sources collapse into one path ─────── */
    .hs-bus { position: relative; align-self: stretch; display: block; }
    .hs-bus::before {
      content: ''; position: absolute; left: 50%; top: 12%; bottom: 12%;
      width: 1px; margin-left: -.5px; background: var(--line);
    }
    .hs-bus::after {
      content: ''; position: absolute; left: 50%; top: 50%;
      width: 100%; height: 1px; transform: translate(-50%, -50%);
      background: linear-gradient(90deg, transparent, var(--line) 22%, var(--line) 78%, transparent);
    }
    .hs-bus i {
      position: absolute; left: 0; top: 50%;
      width: 5px; height: 5px; margin-top: -2.5px; border-radius: 50%;
      background: var(--accent); opacity: 0;
      box-shadow: 0 0 0 3px rgba(31,27,46, .14);
    }
    .hs-bus--out i { background: #2f9c72; box-shadow: 0 0 0 3px rgba(47, 156, 114, .14); }

    /* ── the record ───────────────────────────────────────── */
    .hs-rec {
      position: relative; overflow: hidden;
      background: linear-gradient(158deg, #1f1b2e 0%, #2a2440 58%, #1b1730 100%);
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 20px;
      padding: 20px clamp(18px, 2vw, 26px) 22px;
      box-shadow: 0 42px 70px -34px rgba(24, 18, 44, .62), 0 6px 18px -10px rgba(24, 18, 44, .3);
    }
    /* a soft field of light behind the identity row */
    .hs-rec::before {
      content: ''; position: absolute; left: -10%; top: -40%;
      width: 60%; aspect-ratio: 1; border-radius: 50%; pointer-events: none;
      background: radial-gradient(circle, rgba(167,139,250,.16), transparent 68%);
    }
    .hs-rec > * { position: relative; }

    .hs-scan {
      position: absolute; inset: 0; pointer-events: none; opacity: 0;
      background: linear-gradient(180deg, transparent, rgba(167,139,250, .16) 46%, rgba(167,139,250, .5) 50%, rgba(167,139,250, .16) 54%, transparent);
    }

    .hs-rec-top {
      display: flex; align-items: center; gap: 9px;
      padding-bottom: 14px; margin-bottom: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, .08);
    }
    .hs-live {
      width: 7px; height: 7px; border-radius: 50%; flex: none;
      background: #5fd3a3; box-shadow: 0 0 0 3px rgba(95, 211, 163, .18);
    }
    .hs-rec-title {
      font-size: .72rem; font-weight: 700; letter-spacing: .1em;
      text-transform: uppercase; color: rgba(255, 255, 255, .68);
    }
    .hs-rec-time { margin-left: auto; font-size: .68rem; color: rgba(255, 255, 255, .38); }

    /* identity */
    .hs-id { display: grid; grid-template-columns: 46px 1fr auto; column-gap: 13px; align-items: center; }
    .hs-mark {
      width: 46px; height: 46px; border-radius: 13px;
      display: grid; place-items: center;
      font-size: .92rem; font-weight: 700; letter-spacing: .01em; color: #fff;
      background: linear-gradient(150deg, #352e52, #1f1b2e);
      box-shadow: 0 10px 22px -12px rgba(31,27,46, .9);
    }
    .hs-id-text { display: grid; gap: 4px; min-width: 0; }
    .hs-name {
      font-size: clamp(1.02rem, 1.35vw, 1.24rem); font-weight: 700;
      letter-spacing: -.022em; color: #fff; line-height: 1.15;
    }
    .hs-meta {
      font-size: .71rem; color: rgba(255, 255, 255, .5); line-height: 1.35;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    }
    .hs-pill {
      position: relative; flex: none;
      display: grid; place-items: center;
      padding: 6px 12px; border-radius: 999px;
      font-size: .68rem; font-weight: 650; letter-spacing: .01em;
      background: rgba(95, 211, 163, .13);
      border: 1px solid rgba(95, 211, 163, .3);
      color: #7fe0b6;
    }
    .hs-pill-a, .hs-pill-b { grid-area: 1 / 1; white-space: nowrap; }
    .hs-pill-a { opacity: 0; }

    /* score */
    .hs-score {
      display: grid; grid-template-columns: auto auto 1fr; align-items: baseline;
      column-gap: 10px; row-gap: 9px;
      margin-top: 18px; padding-top: 16px;
      border-top: 1px solid rgba(255, 255, 255, .08);
    }
    .hs-score-k {
      font-size: .68rem; font-weight: 600; letter-spacing: .09em;
      text-transform: uppercase; color: rgba(255, 255, 255, .42);
    }
    .hs-score-n {
      font-size: clamp(1.5rem, 2.1vw, 1.95rem); font-weight: 700;
      letter-spacing: -.035em; color: #fff; line-height: 1;
      --hs-n: 74;                 /* also the fallback where @property is unsupported */
      counter-reset: hsn var(--hs-n);
    }
    .hs-score-n::after { content: counter(hsn); }
    .hs-score-tag {
      justify-self: start;
      font-size: .68rem; font-weight: 650; color: #a78bfa;
      padding: 4px 9px; border-radius: 999px;
      background: rgba(167,139,250, .14);
    }
    .hs-score-bar {
      grid-column: 1 / -1; position: relative; display: block;
      height: 5px; border-radius: 3px; overflow: hidden;
      background: rgba(255, 255, 255, .08);
    }
    .hs-score-bar i {
      position: absolute; inset: 0 auto 0 0; width: 74%; border-radius: 3px;
      background: linear-gradient(90deg, #8b5cf6, #a78bfa);
    }

    /* stats */
    .hs-stats {
      list-style: none; margin: 16px 0 0; padding: 0;
      display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px;
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .07);
      border-radius: 12px; overflow: hidden;
    }
    .hs-stats li {
      display: grid; gap: 4px; padding: 10px 11px;
      background: rgba(255, 255, 255, .028);
    }
    .hs-stat-k {
      font-size: .62rem; font-weight: 600; letter-spacing: .07em;
      text-transform: uppercase; color: rgba(255, 255, 255, .38);
    }
    .hs-stat-v {
      font-size: .82rem; font-weight: 650; color: rgba(255, 255, 255, .93);
      letter-spacing: -.01em; white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis;
    }

    /* journey */
    .hs-journey { margin-top: 17px; }
    .hs-j-k {
      display: block; margin-bottom: 11px;
      font-size: .62rem; font-weight: 600; letter-spacing: .09em;
      text-transform: uppercase; color: rgba(255, 255, 255, .38);
    }
    .hs-j-line {
      list-style: none; margin: 0; padding: 0;
      display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
      position: relative;
    }
    .hs-j-line::before {
      content: ''; position: absolute; left: 5px; right: 5px; top: 5px;
      height: 1px; background: rgba(255, 255, 255, .13);
    }
    .hs-j-line li { position: relative; display: grid; gap: 8px; justify-items: start; }
    .hs-j-dot {
      width: 11px; height: 11px; border-radius: 50%;
      background: #221d36; border: 2px solid #a78bfa;
    }
    .hs-j-line li:last-child .hs-j-dot { background: #a78bfa; box-shadow: 0 0 0 4px rgba(167,139,250, .18); }
    .hs-j-t {
      font-size: .68rem; color: rgba(255, 255, 255, .58);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
    }

    /* ── motion: it assembles once, then only breathes ────── */
    @media (prefers-reduced-motion: no-preference) {
      @keyframes hsRecIn   { from { opacity: 0; transform: translateY(20px) scale(.985); } to { opacity: 1; transform: none; } }
      @keyframes hsFieldIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } }
      @keyframes hsChipIn  { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
      @keyframes hsScan    { 0% { opacity: 0; transform: translateY(-100%); } 12% { opacity: 1; } 88% { opacity: 1; } 100% { opacity: 0; transform: translateY(100%); } }
      @keyframes hsCount   { from { --hs-n: 0; } to { --hs-n: 74; } }
      @keyframes hsBar     { from { width: 0; } to { width: 74%; } }
      @keyframes hsFlip    { 0%, 100% { opacity: 0; } 1%, 92% { opacity: 1; } }
      @keyframes hsPillOn  { from { opacity: 0; transform: scale(.9); } to { opacity: 1; transform: none; } }
      @keyframes hsRun     { 0% { left: 0; opacity: 0; } 14% { opacity: 1; } 82% { opacity: 1; } 100% { left: calc(100% - 5px); opacity: 0; } }
      @keyframes hsRunBack { 0% { left: calc(100% - 5px); opacity: 0; } 14% { opacity: 1; } 82% { opacity: 1; } 100% { left: 0; opacity: 0; } }
      @keyframes hsDotIn   { from { opacity: 0; transform: scale(.3); } to { opacity: 1; transform: none; } }
      @keyframes hsGlow    { 0%, 100% { box-shadow: 0 0 0 3px rgba(95, 211, 163, .18); } 50% { box-shadow: 0 0 0 6px rgba(95, 211, 163, 0); } }

      /* 1. the extractors arrive */
      .hs-side--in .hs-chip { animation: hsChipIn .6s cubic-bezier(.2,.75,.3,1) both; }
      .hs-side--in .hs-chip:nth-child(1) { animation-delay: .15s; }
      .hs-side--in .hs-chip:nth-child(2) { animation-delay: .27s; }
      .hs-side--in .hs-chip:nth-child(3) { animation-delay: .39s; }
      .hs-side--in .hs-chip:nth-child(4) { animation-delay: .51s; }

      /* 2. their signal runs down the bus into the card */
      .hs-bus--in i  { animation: hsRun 2.6s cubic-bezier(.5,0,.5,1) .7s infinite; }
      .hs-bus--in i:nth-child(2) { animation-delay: 1.57s; }
      .hs-bus--in i:nth-child(3) { animation-delay: 2.44s; }

      /* 3. the card lands and is read top-to-bottom by the scan */
      .hs-rec  { animation: hsRecIn .85s cubic-bezier(.2,.75,.3,1) .55s both; }
      .hs-scan { animation: hsScan 1.5s cubic-bezier(.45,0,.4,1) 1.1s both; }

      /* 4. fields resolve in reading order */
      .hs-rec-top  { animation: hsFieldIn .5s ease-out 1.25s both; }
      .hs-id       { animation: hsFieldIn .5s ease-out 1.45s both; }
      .hs-score    { animation: hsFieldIn .5s ease-out 1.75s both; }
      .hs-stats    { animation: hsFieldIn .5s ease-out 1.95s both; }
      .hs-journey  { animation: hsFieldIn .5s ease-out 2.15s both; }

      /* 5. anonymous gives way to identified — the pill changes state with it */
      @keyframes hsPillTone {
        0%, 99% {
          background: rgba(255, 255, 255, .07);
          border-color: rgba(255, 255, 255, .16);
          color: rgba(255, 255, 255, .55);
        }
        100% {
          background: rgba(95, 211, 163, .13);
          border-color: rgba(95, 211, 163, .3);
          color: #7fe0b6;
        }
      }
      .hs-pill { animation: hsPillTone 2.6s steps(1, end) 0s both; }
      .hs-pill-a { animation: hsFlip 1.1s steps(1, end) 1.5s both; }
      .hs-pill-b { animation: hsPillOn .45s cubic-bezier(.2,.8,.3,1) 2.6s both; }

      /* 6. the score is computed in front of you */
      .hs-score-n   { animation: hsCount 1.3s cubic-bezier(.25,.9,.35,1) 2.2s both; }
      .hs-score-bar i { animation: hsBar 1.3s cubic-bezier(.25,.9,.35,1) 2.2s both; }
      .hs-j-line li .hs-j-dot { animation: hsDotIn .4s cubic-bezier(.2,.9,.3,1) both; }
      .hs-j-line li:nth-child(1) .hs-j-dot { animation-delay: 2.5s; }
      .hs-j-line li:nth-child(2) .hs-j-dot { animation-delay: 2.66s; }
      .hs-j-line li:nth-child(3) .hs-j-dot { animation-delay: 2.82s; }
      .hs-j-line li:nth-child(4) .hs-j-dot { animation-delay: 2.98s; }

      /* 7. and it leaves, on its own, for the systems that need it */
      .hs-bus--out i { animation: hsRunBack 2.6s cubic-bezier(.5,0,.5,1) 3.2s infinite; }
      .hs-bus--out i:nth-child(2) { animation-delay: 4.07s; }
      .hs-bus--out i:nth-child(3) { animation-delay: 4.94s; }
      .hs-side--out .hs-chip { animation: hsChipIn .6s cubic-bezier(.2,.75,.3,1) both; }
      .hs-side--out .hs-chip:nth-child(1) { animation-delay: 3.5s; }
      .hs-side--out .hs-chip:nth-child(2) { animation-delay: 3.68s; }
      .hs-side--out .hs-chip:nth-child(3) { animation-delay: 3.86s; }
      .hs-side--out .hs-chip:nth-child(4) { animation-delay: 4.04s; }

      .hs-live { animation: hsGlow 2.4s ease-in-out 4.4s infinite; }
    }

    /* ── responsive ───────────────────────────────────────── */
    @media (max-width: 1080px) {
      .hs { grid-template-columns: minmax(0, .8fr) 40px minmax(0, 1.5fr); row-gap: 22px; }
      .hs-bus--out { display: none; }
      .hs-side--out {
        grid-column: 1 / -1;
        grid-template-columns: repeat(4, minmax(0, 1fr));
      }
      .hs-side--out .hs-chip { grid-template-columns: 26px 1fr; }
      .hs-side--out .hs-chip-ico { width: 26px; height: 26px; border-radius: 8px; }
    }
    @media (max-width: 860px) {
      .hs { grid-template-columns: minmax(0, 1fr); row-gap: 18px; }
      .hs-bus--in { display: none; }
      .hs-side--in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .hs-side--out { grid-column: auto; grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .hs-rec { padding: 18px 16px 20px; }
      .hs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .hs-meta { white-space: normal; }
    }
    @media (max-width: 560px) {
      .hs-side--in, .hs-side--out { grid-template-columns: minmax(0, 1fr); }
      .hs-side--in .hs-chip:nth-child(n+3), .hs-side--out .hs-chip:nth-child(n+3) { display: none; }
      .hs-id { grid-template-columns: 42px 1fr; row-gap: 10px; }
      .hs-pill { grid-column: 1 / -1; justify-self: start; }
      .hs-j-line { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 12px; }
      .hs-j-line::before { display: none; }
    }

    /* =========================================================
       HERO SLIDER — two stages, one stage at a time
       Slide 1 is the resolved record; slide 2 is the pass-1 live
       feed. They stack in one grid cell so the band never changes
       height between them, and the feed pins to the bottom so its
       window still runs off the edge of the band the way it was
       drawn. Crossfade only — nothing slides sideways, because a
       horizontal move would fight the page's own scroll direction.
       No JS: if the animation never runs, slide 1 stands alone and
       the hero is complete.
       ========================================================= */
    /* row 1 is the progress pair, row 2 holds both slides stacked, so
       the read-out can never sit on top of a slide's own content */
    .heroslides {
      position: relative;
      display: grid; grid-template-rows: auto 1fr; align-items: stretch;
    }
    .hero-slide { grid-row: 2; grid-column: 1; min-width: 0; }

    /* the feed slide was drawn to sit flush on the band's bottom edge */
    .hero-slide--feed { display: flex; flex-direction: column; justify-content: flex-end; }

    /* base state: record only. Slide 2 carries no links, so opacity
       alone is enough to keep it out of the way. */
    .hero-slide--feed { opacity: 0; }

    /* the progress pair — a read-out, not a control, so it is not
       focusable and never looks like something to press */
    .hero-dots {
      grid-row: 1; grid-column: 1; justify-self: end;
      display: flex; gap: 7px;
      margin-bottom: 16px; pointer-events: none;
    }
    .hero-dots i {
      position: relative; display: block;
      width: 34px; height: 3px; border-radius: 2px;
      background: rgba(11, 27, 51, .16); overflow: hidden;
    }
    .hero-dots i::after {
      content: ''; position: absolute; inset: 0;
      background: var(--accent); border-radius: 2px;
      transform: scaleX(0); transform-origin: left center;
    }

    @media (prefers-reduced-motion: no-preference) {
      /* 16s cycle: ~7.2s on each stage, 0.8s to cross over */
      @keyframes heroFadeA {
        0%, 45%   { opacity: 1; }
        50%, 95%  { opacity: 0; }
        100%      { opacity: 1; }
      }
      @keyframes heroFadeB {
        0%, 45%   { opacity: 0; }
        50%, 95%  { opacity: 1; }
        100%      { opacity: 0; }
      }
      @keyframes heroTickA {
        0%   { transform: scaleX(0); }
        45%  { transform: scaleX(1); }
        50%, 100% { transform: scaleX(0); }
      }
      @keyframes heroTickB {
        0%, 50%  { transform: scaleX(0); }
        95%      { transform: scaleX(1); }
        100%     { transform: scaleX(0); }
      }

      .hero-slide--record { animation: heroFadeA 16s ease-in-out infinite; }
      .hero-slide--feed   { animation: heroFadeB 16s ease-in-out infinite; }
      .hero-dots i:nth-child(1)::after { animation: heroTickA 16s linear infinite; }
      .hero-dots i:nth-child(2)::after { animation: heroTickB 16s linear infinite; }

      /* let people stop it and read */
      .heroslides:hover .hero-slide,
      .heroslides:hover .hero-dots i::after { animation-play-state: paused; }
    }

    @media (max-width: 620px) {
      .hero-dots { margin-bottom: 10px; }
      .hero-dots i { width: 26px; }
    }

    /* =========================================================
       SLIDE 2 INSIDE THE SLIDER
       The pass-1 hero was written to load once and settle. Two of
       its behaviours need adjusting now that it waits its turn:

       1. leadInL / leadInR end at opacity 0 — the visitors fly in
          and are absorbed by the panel. As a one-shot that means
          the whole cluster has vanished by the time this slide
          appears at 8s. Looping it restores the intended reading:
          a stream of arrivals that never stops. The per-lead
          delays already stagger it, so only the count changes.

       2. The panel pulse fired twice at 2.4s, behind an invisible
          layer. It marks an arrival, so it belongs on the loop too.
       ========================================================= */
    @media (prefers-reduced-motion: no-preference) {
      .hero-slide--feed .lead { animation-iteration-count: infinite; }
      .hero-slide--feed .mock-win {
        animation: panelPulse 3.1s cubic-bezier(.4,0,.3,1) 1.6s infinite;
      }
    }

    /* =========================================================
       TABBED SLAB — one component, three sections
       The same mechanic as the customer proof block: a strip of
       choices along the top, and the one you pick turns white,
       drops its divider and becomes the panel underneath it.

       Written once and shared rather than copied three times.
       :has() pairs the checked input with its tab and its panel,
       so a single set of rules drives every instance on the page
       regardless of how many tabs it has.

       CSS only — real radios, so arrow keys move between tabs.
       Hidden panels use visibility, which keeps their links out
       of the tab order and holds the slab at a constant height
       so nothing jumps when you switch.
       ========================================================= */
    .tb {
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 24px;
      /* no overflow:hidden — it would clip the proof badge, which is
         deliberately offset outside the hero-right box */
    }
    .tb-in {
      position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
      overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
    }

    /* ── the strip ────────────────────────────────────────── */
    .tb-strip { display: grid; background: #f4f1fd; }
    .tb--3 .tb-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tb--4 .tb-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }

    .tb-tab {
      cursor: pointer;
      display: flex; align-items: center; justify-content: center; gap: 9px;
      padding: 17px 14px; text-align: center;
      border-right: 1px solid #e9e5f6;
      border-bottom: 1px solid #e9e5f6;
      font-size: .87rem; font-weight: 700; letter-spacing: -.014em;
      color: #6e6880; line-height: 1.25;
      transition: background .2s ease, color .2s ease;
    }
    .tb-tab:last-of-type { border-right: 0; }
    .tb-tab:hover { background: #f1eefa; }
    .tb--4 .tb-tab { font-size: .8rem; padding: 15px 10px; }

    .tb-tab-n {
      font-size: .72rem; font-weight: 700; color: #9a93ad;
      font-variant-numeric: tabular-nums; flex: none;
    }
    .tb-tab-i { flex: none; width: 17px; height: 17px; color: #9a93ad; transition: color .2s ease; }
    .tb-tab-i svg { width: 100%; height: 100%; display: block; }

    /* ── the panel ────────────────────────────────────────── */
    .tb-panels { display: grid; padding: clamp(26px, 3.2vw, 46px); }
    .tb-panel { grid-area: 1 / 1; visibility: hidden; }

    /* the diagram keeps the styling it already had, minus the
       card's divider — in here it is the subject, not a footnote */
    .tb .prob-fig { margin: 0; padding: 0; border-top: 0; }
    .tb .prob-fig figcaption { margin-top: 14px; font-size: .78rem; }

    /* what a role actually works from — every chip is a phrase
       already used in that role's own paragraph, not a new claim */
    .tb-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
    .tb-chips li {
      display: inline-flex; align-items: center; gap: 7px;
      padding: 9px 14px; border-radius: 999px;
      background: var(--accent-lt); color: var(--accent);
      font-size: .82rem; font-weight: 650; letter-spacing: -.01em;
    }
    .tb-chips li::before {
      content: ''; width: 5px; height: 5px; border-radius: 50%;
      background: currentColor; flex: none;
    }
    .tb-chips-k {
      margin: 0 0 13px; font-size: .74rem; font-weight: 650; color: #6e6880;
    }

    /* the guarantee icon, above its heading */
    .tb-ico {
      display: grid; place-items: center;
      width: 42px; height: 42px; margin-bottom: 16px;
      border-radius: 12px; background: var(--accent-lt); color: var(--accent);
    }
    .tb-ico svg { width: 20px; height: 20px; display: block; }

    /* ── which tab is live ────────────────────────────────── */
    .tb:has(.tb-in:nth-of-type(1):checked) .tb-tab:nth-of-type(1),
    .tb:has(.tb-in:nth-of-type(2):checked) .tb-tab:nth-of-type(2),
    .tb:has(.tb-in:nth-of-type(3):checked) .tb-tab:nth-of-type(3),
    .tb:has(.tb-in:nth-of-type(4):checked) .tb-tab:nth-of-type(4) {
      background: #fff; border-bottom-color: transparent; color: var(--ink);
    }
    .tb:has(.tb-in:nth-of-type(1):checked) .tb-tab:nth-of-type(1) .tb-tab-i,
    .tb:has(.tb-in:nth-of-type(2):checked) .tb-tab:nth-of-type(2) .tb-tab-i,
    .tb:has(.tb-in:nth-of-type(3):checked) .tb-tab:nth-of-type(3) .tb-tab-i,
    .tb:has(.tb-in:nth-of-type(4):checked) .tb-tab:nth-of-type(4) .tb-tab-i { color: var(--accent); }

    .tb:has(.tb-in:nth-of-type(1):checked) .tb-panel:nth-of-type(1),
    .tb:has(.tb-in:nth-of-type(2):checked) .tb-panel:nth-of-type(2),
    .tb:has(.tb-in:nth-of-type(3):checked) .tb-panel:nth-of-type(3),
    .tb:has(.tb-in:nth-of-type(4):checked) .tb-panel:nth-of-type(4) { visibility: visible; }

    /* keyboard: the radios sit off-screen, so the tab shows the ring */
    .tb:has(.tb-in:nth-of-type(1):focus-visible) .tb-tab:nth-of-type(1),
    .tb:has(.tb-in:nth-of-type(2):focus-visible) .tb-tab:nth-of-type(2),
    .tb:has(.tb-in:nth-of-type(3):focus-visible) .tb-tab:nth-of-type(3),
    .tb:has(.tb-in:nth-of-type(4):focus-visible) .tb-tab:nth-of-type(4) {
      outline: 2px solid var(--accent); outline-offset: -3px;
    }

    @media (prefers-reduced-motion: no-preference) {
      @keyframes tbIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
      .tb:has(.tb-in:nth-of-type(1):checked) .tb-panel:nth-of-type(1),
      .tb:has(.tb-in:nth-of-type(2):checked) .tb-panel:nth-of-type(2),
      .tb:has(.tb-in:nth-of-type(3):checked) .tb-panel:nth-of-type(3),
      .tb:has(.tb-in:nth-of-type(4):checked) .tb-panel:nth-of-type(4) {
        animation: tbIn .34s cubic-bezier(.2,.8,.3,1);
      }
    }

    /* ── responsive ───────────────────────────────────────── */
    @media (max-width: 900px) {
      .tb-tab { font-size: .8rem; padding: 14px 8px; gap: 6px; }
      .tb--4 .tb-tab { font-size: .74rem; }
      .tb-tab-n { display: none; }
    }
    @media (max-width: 620px) {
      .tb { border-radius: 18px; }
      .tb--3 .tb-strip,
      .tb--4 .tb-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .tb-tab { border-right: 1px solid #e9e5f6; border-bottom: 1px solid #e9e5f6; }
      .tb-tab:nth-of-type(2n) { border-right: 0; }
      /* two rows means a tab can't merge downward into the panel */
      .tb .tb-tab { border-bottom: 1px solid #e9e5f6 !important; }
      .tb-tab-i { display: none; }
    }

    /* =========================================================
       TABBED SLAB — second pass
       The enterprise panel was the weak one: four tabs above an
       icon, a heading and a single sentence, in a panel with room
       for far more. Each tab now ends in a drawing of the promise
       it makes.

       Every one of those drawings is a picture of a sentence that
       was already on the page — the read-only diagram in
       particular just sets the existing sentence as two lists. No
       new security detail has been introduced, because that copy
       is still behind its release gate.
       ========================================================= */

    .tb-figline {
      margin: 22px 0 0; padding: 20px 0 0;
      border-top: 1px solid var(--line-2);
    }
    .tb-figline svg { display: block; width: 100%; height: auto; max-width: 430px; }

    /* shared marks for the guarantee drawings */
    .eg-mid { text-anchor: middle; }
    .eg-end { text-anchor: end; }
    .eg-box  { fill: rgba(31,27,46, .055); stroke: var(--accent); stroke-width: 1.4; }
    .eg-out  { fill: none; stroke: #d8d0ee; stroke-width: 1.4; stroke-dasharray: 4 4; }
    .eg-pill { fill: #fff; stroke: #e9e5f6; stroke-width: 1; }
    .eg-node { fill: #faf9ff; }
    .eg-div  { stroke: #e9e5f6; stroke-width: 1; }

    .eg-lab  { font-family: var(--ff); font-size: 10px; font-weight: 700; fill: var(--accent); letter-spacing: .01em; }
    .eg-labm { font-family: var(--ff); font-size: 10px; font-weight: 700; fill: #6e6880; letter-spacing: .01em; }
    .eg-t    { font-family: var(--ff); font-size: 10.5px; fill: var(--ink); }
    .eg-tm   { font-family: var(--ff); font-size: 10.5px; fill: #8b8499; }
    .eg-nt   { font-family: var(--ff); font-size: 11px; font-weight: 700; fill: var(--ink); text-anchor: middle; }
    .eg-cap  { font-family: var(--ff); font-size: 10px; fill: #8b8499; text-anchor: middle; }

    /* (the old bare-stroke tick and cross rules were removed here —
       they are badges now, styled further down) */

    .eg-link  { stroke: var(--accent); stroke-width: 2; stroke-linecap: round; }
    .eg-linkx { stroke: #d8d0ee; stroke-width: 2; stroke-dasharray: 4 4; stroke-linecap: round; }
    .eg-cut   { fill: #fff; stroke: var(--accent); stroke-width: 1.6; }
    .eg-cutx  { stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; }
    .eg-arrow { stroke: #d8d2e8; stroke-width: 1.6; fill: none; stroke-linecap: round; stroke-linejoin: round; }

    /* the outcomes column reads as a block, not as chips adrift */
    .tb-aside {
      background: #faf9ff;
      border-radius: 16px;
      padding: 22px 22px 24px;
    }

    /* a wrapped tab label shouldn't sit shorter than its neighbours */
    .tb-tab { min-height: 58px; }

    @media (prefers-reduced-motion: no-preference) {
      /* the break in the link is the thing worth noticing */
      @keyframes egCut { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
      .eg-linkx { animation: egCut 2.6s ease-in-out infinite; }
    }

    @media (max-width: 620px) {
      .tb-figline svg { max-width: none; }
      .tb-aside { padding: 18px; }
    }

    /* =========================================================
       TAB PANEL — title one side, everything else the other
       The section's own <h2> stays exactly where it was, centred
       above the slab. The split happens INSIDE the panel: the
       panel's title takes the left column on its own, and the
       right column carries the sentence and that tab's
       illustration stacked together.

       Same arrangement in all three blocks, so switching a tab
       never moves the title and the eye keeps its place.
       ========================================================= */
    .tb-panel {
      display: grid;
      grid-template-columns: minmax(0, .86fr) minmax(0, 1.34fr);
      gap: clamp(24px, 3.6vw, 56px);
      align-items: start;
    }

    @media (max-width: 900px) {
      .tb-panel { grid-template-columns: minmax(0, 1fr); gap: 18px; }
    }

    /* =========================================================
       TAB SLAB — the menu runs down the side
       The strip was a row across the top; it is now a column down
       the left, and the slab is menu + panel side by side.

       The picked item keeps the same trick it had horizontally:
       it turns white and bleeds one pixel over the divider, so it
       stops being a tab and becomes the panel it opens.
       ========================================================= */
    .tb {
      display: grid;
      grid-template-columns: minmax(0, 228px) minmax(0, 1fr);
      align-items: stretch;
    }

    .tb-strip {
      grid-column: 1; grid-row: 1;
      display: flex; flex-direction: column;
      border-right: 1px solid #e9e5f6;
    }
    .tb--3 .tb-strip,
    .tb--4 .tb-strip { grid-template-columns: none; }

    .tb-tab {
      position: relative;
      justify-content: flex-start; text-align: left;
      gap: 11px; padding: 18px 20px;
      border-right: 0;
      border-bottom: 1px solid #e9e5f6;
      min-height: 0;
    }
    .tb-tab:last-of-type { border-bottom: 1px solid #e9e5f6; }
    .tb--4 .tb-tab { font-size: .84rem; padding: 16px 18px; }

    .tb-panels { grid-column: 2; grid-row: 1; }

    /* the picked item merges sideways into the panel */
    .tb:has(.tb-in:nth-of-type(1):checked) .tb-tab:nth-of-type(1),
    .tb:has(.tb-in:nth-of-type(2):checked) .tb-tab:nth-of-type(2),
    .tb:has(.tb-in:nth-of-type(3):checked) .tb-tab:nth-of-type(3),
    .tb:has(.tb-in:nth-of-type(4):checked) .tb-tab:nth-of-type(4) {
      background: #fff;
      border-bottom-color: #e9e5f6;
      margin-right: -1px;
      box-shadow: 1px 0 0 #fff;
    }

    @media (max-width: 900px) {
      /* a column of tabs would eat the width on a phone */
      .tb { grid-template-columns: minmax(0, 1fr); }
      .tb-strip {
        grid-column: 1; grid-row: 1;
        display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
        border-right: 0; border-bottom: 1px solid #e9e5f6;
      }
      /* out-ranks the .tb--3 / .tb--4 column counts set above */
      .tb--3 .tb-strip,
      .tb--4 .tb-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .tb-panels { grid-column: 1; grid-row: 2; }
      .tb-tab {
        justify-content: center; text-align: center;
        padding: 14px 10px; border-right: 1px solid #e9e5f6;
      }
      .tb-tab:nth-of-type(2n) { border-right: 0; }
      .tb:has(.tb-in:nth-of-type(1):checked) .tb-tab:nth-of-type(1),
      .tb:has(.tb-in:nth-of-type(2):checked) .tb-tab:nth-of-type(2),
      .tb:has(.tb-in:nth-of-type(3):checked) .tb-tab:nth-of-type(3),
      .tb:has(.tb-in:nth-of-type(4):checked) .tb-tab:nth-of-type(4) {
        margin-right: 0; box-shadow: none;
      }
    }

    /* =========================================================
       TAB PANEL — title sits on its paragraph
       Giving the title a column to itself left a tall empty space
       underneath it, because a two-line heading cannot fill the
       height of a paragraph plus an illustration. So the title
       goes back on top of the words it introduces, and the two
       share one column; the illustration takes the other.
       Nothing is left holding air.
       ========================================================= */
    .tb-panel {
      grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
      gap: clamp(24px, 3.4vw, 48px);
      align-items: start;
    }

    .tb-copy { min-width: 0; }
    .tb-copy h3 {
      margin: 0 0 14px;
      font-size: clamp(1.28rem, 2.05vw, 1.78rem); font-weight: 800;
      line-height: 1.17; letter-spacing: -.034em; color: var(--ink);
      text-wrap: balance;
    }
    .tb-copy > p {
      margin: 0;
      font-size: 1.01rem; line-height: 1.7; color: var(--muted);
    }
    .tb-copy .tb-ico { margin-bottom: 16px; }

    .tb-art { min-width: 0; }
    .tb-art .prob-fig,
    .tb-art .tb-figline { margin: 0; padding: 0; border-top: 0; }
    .tb-art .tb-aside { margin: 0; }
    /* in here the diagram is the subject — let it use the column */
    .tb-art .tb-figline svg,
    .tb-art .prob-fig svg { max-width: none; }


    @media (max-width: 900px) {
      .tb-panel { grid-template-columns: minmax(0, 1fr); gap: 20px; }
    }

    /* =========================================================
       ENTERPRISE — onto the same pattern as the other two
       It was the odd one out: heading pinned to a left column,
       slab squeezed into the right. That left a tall empty area
       under a three-line heading, and gave the slab too little
       width for a vertical menu beside a split panel.

       Now it matches — heading centred above, slab full width
       below — so all three blocks are built the same way. The
       gradient panel stays, because it is what still tells this
       section apart from its neighbours.
       ========================================================= */
    .ent-panel {
      display: block;
      padding: clamp(30px, 3.8vw, 52px);
    }
    .ent-panel .sec-hd {
      text-align: center;
      max-width: 760px;
      margin: 0 auto clamp(30px, 3.4vw, 46px);
      display: flex; flex-direction: column; align-items: center;
    }
    .ent-panel .sec-hd h2 {
      margin: 0; text-align: center;
      max-width: 20ch; margin-inline: auto;
      font-size: clamp(1.75rem, 3vw, 2.5rem);
    }

    @media (max-width: 620px) {
      .ent-panel { padding: 22px 16px; }
    }

    /* =========================================================
       MCP CLIENT LIST — the marks, and a live signal
       Each client carries its own mark, in its own colour, from a
       local file. Two of the three are black, and this band is
       near-black, so each mark sits on a small white tile — that
       is what lets the real colours show instead of forcing them
       all to one ink.

       The pip breathes because "live" is a present-tense claim —
       a static dot states it, a moving one shows it.
       ========================================================= */
    .mcp-tool-t { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
    .mcp-tool-logo {
      width: 28px; height: 28px; flex: none;
      padding: 6px; border-radius: 8px;
      background: #fff;
      object-fit: contain;
    }

    .mcp-tool-s { display: inline-flex; align-items: center; gap: 8px; flex: none; }
    .live-pip {
      width: 7px; height: 7px; border-radius: 50%; flex: none;
      background: #6fd0a8;
      box-shadow: 0 0 0 0 rgba(111, 208, 168, .5);
    }

    @media (prefers-reduced-motion: no-preference) {
      @keyframes livePip {
        0%, 100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(111, 208, 168, .5); }
        50%      { transform: scale(1.32); box-shadow: 0 0 0 5px rgba(111, 208, 168, 0); }
      }
      .live-pip { animation: livePip 2.2s ease-in-out infinite; }
      /* offset so the three read as three signals, not one metronome */
      .mcp-tools li:nth-child(2) .live-pip { animation-delay: .35s; }
      .mcp-tools li:nth-child(3) .live-pip { animation-delay: .7s; }
    }

    /* =========================================================
       MCP RESULT ROWS — a face and a mark per lead
       The rows were four columns of text, which read as a table
       rather than as people. A portrait and a company mark make
       the same data land as a list of leads.

       The companies are invented — Acme Robotics, Northwind Labs,
       Fen Digital — so they carry invented geometric marks. No
       real company's logo sits next to a fabricated lead score.
       ========================================================= */
    .mcp-results li {
      grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr) auto auto;
      gap: 13px;
      padding: 10px 14px;
    }
    .mcp-face {
      width: 34px; height: 34px; border-radius: 50%;
      object-fit: cover; flex: none;
      background: #2c2645;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, .12);
    }
    .mcp-co { display: inline-flex; align-items: center; gap: 9px; min-width: 0; }
    .mcp-mark {
      width: 22px; height: 22px; flex: none;
      display: grid; place-items: center;
      border-radius: 6px;
      background: rgba(167,139,250, .13);
      color: #a78bfa;
    }
    .mcp-mark svg { width: 13px; height: 13px; display: block; }

    @media (max-width: 900px) {
      /* the face keeps its column; score and visits drop under */
      .mcp-results li { grid-template-columns: 30px minmax(0, 1fr) auto; row-gap: 4px; }
      .mcp-face { width: 30px; height: 30px; }
      .mcp-co { grid-column: 2 / -1; }
    }

    /* =========================================================
       PROBLEM RECOGNITION — scrolling blocks
       Not tabs. The three roles are three full blocks stacked down
       the page, and each one pins as you reach it while the next
       rises over the top of it — so the reader passes THROUGH all
       three rather than choosing one and never seeing the others.
       That matters here: the point of this section is that all
       three teams have the problem at once, which a tab strip
       actively works against by showing you only one at a time.

       Each block pins 18px lower than the one before, so the
       earlier blocks keep a visible sliver and the stack reads as
       a stack. Plain position:sticky — no JS, no scroll library —
       and with sticky unsupported it degrades to three blocks in
       a column, which is still the whole section.
       ========================================================= */
    .ps { display: block; }

    .ps-block {
      position: sticky;
      top: calc(112px + var(--i, 0) * 18px);
      display: grid;
      grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr);
      gap: clamp(24px, 3.4vw, 52px);
      align-items: center;
      background: #fff;
      border: 1px solid var(--line);
      border-radius: 24px;
      padding: clamp(28px, 3.4vw, 48px);
      margin-bottom: clamp(26px, 3.2vw, 44px);
    }
    .ps-block:last-child { margin-bottom: 0; }

    /* the covered blocks need to sit behind the ones that follow */
    .ps-block { z-index: calc(var(--i, 0) + 1); }

    .ps-copy { min-width: 0; }
    .ps-role {
      display: inline-flex; align-items: baseline; gap: 10px;
      margin-bottom: 14px;
      font-size: .88rem; font-weight: 700; letter-spacing: -.012em;
      color: var(--accent);
    }
    .ps-role i {
      font-style: normal; font-size: .74rem; font-weight: 700;
      color: #9a93ad; font-variant-numeric: tabular-nums;
    }
    .ps-copy h3 {
      margin: 0 0 14px;
      font-size: clamp(1.3rem, 2.1vw, 1.82rem); font-weight: 800;
      line-height: 1.16; letter-spacing: -.034em; color: var(--ink);
      text-wrap: balance;
    }
    .ps-copy p {
      margin: 0;
      font-size: 1.01rem; line-height: 1.7; color: var(--muted);
    }

    .ps-art { min-width: 0; }
    .ps-art .prob-fig { margin: 0; padding: 0; border-top: 0; }
    .ps-art .prob-fig svg { max-width: none; }
    .ps-art .prob-fig figcaption { margin-top: 14px; font-size: .78rem; }

    /* a block that is being covered eases back, so the one arriving
       reads as landing on top rather than simply overlapping */
    @supports (animation-timeline: view()) {
      @media (prefers-reduced-motion: no-preference) {
        @keyframes psSettle {
          from { transform: scale(1);    }
          to   { transform: scale(.965); }
        }
        .ps-block {
          animation: psSettle linear both;
          animation-timeline: view();
          animation-range: exit 0% exit 92%;
          transform-origin: 50% 0;
        }
        .ps-block:last-child { animation: none; }
      }
    }

    @media (max-width: 900px) {
      .ps-block {
        position: static;
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
        padding: 24px 20px;
      }
      .ps-block { animation: none; }
    }

    /* =========================================================
       SCROLLING BLOCKS — the other two sections
       Outcomes and enterprise now use the same stack as the
       problem section, so the three read as one system. Each
       keeps its own way of naming a block, which is what stops
       them looking like the same section three times:
         problem    01 / 02 / 03 with the role
         outcomes   an icon with "For Marketing"
         enterprise a short topic label above the heading
       ========================================================= */
    .ps-role { align-items: center; }
    .ps-role-i {
      width: 18px; height: 18px; flex: none;
      display: grid; place-items: center; color: var(--accent);
    }
    .ps-role-i svg { width: 100%; height: 100%; display: block; }

    .ps-lab {
      display: block; margin-bottom: 11px;
      font-size: .82rem; font-weight: 700; letter-spacing: -.012em;
      color: var(--accent);
    }
    .ps-copy .tb-ico { margin-bottom: 15px; }

    /* the art column carries whichever illustration that block has */
    .ps-art .tb-aside { margin: 0; }
    .ps-art .tb-figline { margin: 0; padding: 0; border-top: 0; }
    .ps-art .tb-figline svg { max-width: none; }

    /* four blocks instead of three still has to clear the nav */
    .ent-panel .ps-block { top: calc(108px + var(--i, 0) * 16px); }

    /* =========================================================
       PALETTE — soft violet
         highlight   #A78BFA   (the swatch from the board)
         ink accent  #7C3AED   (its text-safe sibling)
         primary     #1F1B2E   (a violet-cast near-black)
         base        #FFFFFF

       #A78BFA measures 2.72:1 on white — below the 4.5:1 body text
       needs, so like the yellow before it, it cannot carry text on
       a light surface. It is very good at everything else: 6.15:1
       under the dark ink when used as a fill, and the same 6.15:1
       sitting ON the dark panels.

       So the hue runs at two depths. #7C3AED takes the ink jobs —
       links, labels, diagram strokes, icon glyphs — at 5.7:1 on
       white. #A78BFA is the wash: button-adjacent fills, chip
       tints, the marker stroke through the headline, and the light
       accent on every dark panel. Same colour, two jobs, no
       contrast compromise.

       The neutrals are no longer grey but violet-cast, which is
       what stops the page reading as "grey with purple bits" and
       makes it read as one tinted system, closer to the board.
       ========================================================= */
    :root {
      --ink:     #1F1B2E;
      --ink-2:   #2E2844;
      --body:    #46405C;
      --muted:   #6E6880;

      --bg:      #FFFFFF;
      --bg-soft: #FAF9FF;
      --bg-2:    #EEEAFB;
      --line:    #E8E4F5;
      --line-2:  #F1EEFA;

      /* the ink-weight violet: links, labels, strokes, glyphs */
      --accent:    #7C3AED;
      --accent-dk: #6D28D9;
      --accent-lt: #F3F0FC;

      /* the wash: fills and tints that carry ink or sit on dark */
      --hl:      #A78BFA;
      --hl-dk:   #8B5CF6;
      --hl-ink:  #1F1B2E;
      --hl-tint: rgba(167, 139, 250, .20);

      --hilite: #7C3AED;
      --indigo: #7C3AED; --indigo-dk: #6D28D9; --indigo-lt: #F3F0FC;
      --violet: #7C3AED; --violet-lt: #F3F0FC;
      --blue:   #7C3AED; --blue-lt:   #F3F0FC;
      --g900:#1F1B2E; --g700:#46405C; --g500:#6E6880;
      --g300:#B7B0C7; --g200:#E8E4F5; --g100:#F1EEFA; --g50:#FAF9FF;
      --navy:#1F1B2E; --slate:#2E2844;

      --dg-ink: #1F1B2E; --dg-accent: #7C3AED; --dg-muted: #6E6880;
      --dg-line: #E8E4F5; --dg-soft: #EEEAFB;
    }

    /* ── where each depth of the hue goes ─────────────────── */

    /* the primary action takes the ink violet and white on it */
    .btn-indigo, .btn-indigo:hover {
      background: var(--accent); border-color: var(--accent); color: #fff;
    }
    .btn-indigo:hover { background: var(--accent-dk); border-color: var(--accent-dk); }

    /* the headline marker — the wash, with ink reading over it */
    .hl {
      background: linear-gradient(180deg, transparent 58%, var(--hl) 58%);
      color: var(--ink); -webkit-text-fill-color: currentColor;
      padding: 0 .06em;
    }

    /* numbers on the dark panels take the wash, not the ink violet */
    .hs-score-bar i { background: var(--hl); }
    .hs-score-n, .cr-sc, .mcp-score { color: var(--hl); }
    .hs-mark { background: var(--accent); }

    /* the "identified" state, on light surfaces */
    .cf--on { fill: var(--hl); }
    .pg-have rect { fill: var(--hl); opacity: 1; }
    .jr-band { fill: var(--hl-tint); }
    .pg-row  { fill: #F4F1FD; }

    /* tints that sit behind ink text */
    .tb-chips li { background: var(--hl-tint); color: var(--ink); }
    .tb-aside    { background: #FAF9FF; }
    .eg-box      { fill: var(--hl-tint); stroke: var(--accent); }
    .mcp-mark    { background: rgba(167,139,250,.16); color: var(--hl); }

    /* the one colour field: deep violet rather than near-black, so
       the band belongs to the hue instead of interrupting it */
    .section--stories {
      background:
        radial-gradient(70% 60% at 88% 16%, rgba(167,139,250,.22) 0%, rgba(167,139,250,0) 62%),
        linear-gradient(126deg, #3A2E63 0%, #251F3F 52%, #1A1530 100%);
    }
    .section--stories .sec-hd p { color: rgba(255,255,255,.74); }
    .cs-tab-co { color: #6E6880; }

    /* stars sit on a WHITE panel — the wash is 2.7:1 there, so the
       rating keeps its conventional amber, a status colour like the
       green live dot rather than part of the violet system */
    .cs-stars { color: #e8a020; }

    .ps-role, .ps-lab, .ps-role-i { color: var(--ink); }
    .ps-role i { color: var(--muted); }
    .prob-role i { color: var(--muted); }

    /* -- palette: the rules that have to out-rank earlier ones -- */

    /* .hero h1 .hl is (0,2,1) and sets the highlight back to plain
       ink, so the marker stroke has to match that weight or lose */
    .hero h1 .hl {
      color: var(--ink);
      -webkit-text-fill-color: currentColor;
      background: linear-gradient(180deg, transparent 56%, var(--hl) 56%);
      padding: 0 .06em;
      border-radius: 2px;
    }

    /* .navbar-actions .btn-indigo is (0,2,0): the nav button stays
       charcoal so the yellow means one thing per screen */
    .navbar-actions .btn-indigo { background: var(--ink); border-color: var(--ink); color: #fff; }
    .navbar-actions .btn-indigo:hover { background: #000; border-color: #000; }

    /* the small index numerals were 2.8:1 on white � too light to
       read at .74rem, so they take the muted grey, which is 5.1:1 */
    .ps-role i, .prob-role i, .tb-tab-n { color: var(--muted); }

    /* charcoal buttons on the dark band need the yellow instead */
    .section--stories .btn-indigo,
    .mcp .btn-indigo,
    .closing .btn-indigo { background: var(--hl); border-color: var(--hl); color: var(--hl-ink); }

    /* links keep ink, and earn their emphasis from the underline */
    .cs-go, .res-go, .tb-chips li { color: var(--ink); }
    .cs-go:hover, .res-go:hover { border-bottom-color: var(--ink); }

    /* =========================================================
       GUARANTEE ICONS — small badges instead of bare strokes
       The ticks and crosses were loose 2px paths floating beside
       the words, which reads as unfinished at this size. Each is
       now a 17px disc with the glyph set inside it, so the column
       has a repeating shape to scan down and the marks sit lighter
       on the page rather than shouting.

       The permission tick keeps its green and the limit is a plain
       grey — a limit is not an alarm, so it is not coloured as one.
       The disconnect control is the one thing here a person would
       actually press, so it is the one thing wearing the accent.
       ========================================================= */
    .eg-yes  circle { fill: rgba(47, 156, 114, .13); }
    .eg-yes  path   {
      fill: none; stroke: #2f9c72; stroke-width: 1.9;
      stroke-linecap: round; stroke-linejoin: round;
    }
    .eg-nope circle { fill: #f1eefa; }
    .eg-nope path   {
      fill: none; stroke: #a49dba; stroke-width: 1.7;
      stroke-linecap: round;
    }

    /* the break in the link: yellow disc, charcoal cross — 11.8:1,
       and the ring keeps it off the white behind it */
    .eg-cut  { fill: var(--hl); stroke: var(--ink); stroke-width: 1.3; }
    .eg-cutx { stroke: var(--ink); stroke-width: 1.9; stroke-linecap: round; }
    .eg-link { stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; }
    .eg-linkx {
      stroke: #c6c0d6; stroke-width: 1.8;
      stroke-dasharray: 3 4.5; stroke-linecap: round;
    }

    /* =========================================================
       HERO — the mesh gradient
       Gold on the left, magenta through the middle, blue into the
       right and bottom, with the grain that stops a big gradient
       looking like flat CSS. Built from four radial fields over a
       diagonal base rather than an image, so it scales to any
       viewport and costs nothing to load.

       The grain is one inline SVG turbulence, ~300 bytes, at low
       opacity in overlay — that is the whole trick that makes a
       gradient this size read as a surface instead of a wash.

       Everything above it goes white. The body underneath stays
       light and near-neutral: a page cannot carry a field this
       loud twice, so the gradient happens once and the rest of
       the page is quiet enough to let it.
       ========================================================= */
    .hero {
      position: relative;
      background:
        /* The scrim. Measured: white over the raw gold stop is 1.87:1,
           which is unreadable. A 45%+ wash lifts the worst stop past
           4.5:1 while keeping every hue, so the sweep survives and the
           copy is legible. It deepens the field into a jewel tone —
           which suits a hero carrying real sentences better than the
           raw pastel would. */
        radial-gradient(30% 34% at 14% 70%,  #6F72F2 0%, rgba(111,114,242,0) 72%),
        radial-gradient(34% 30% at 32% 86%,  #7C80F5 0%, rgba(124,128,245,0) 74%),
        radial-gradient(40% 36% at 44% 64%,  rgba(176,168,246,.55) 0%, rgba(176,168,246,0) 72%),
        radial-gradient(36% 30% at 76% 40%,  #F6C2EF 0%, rgba(246,194,239,0) 72%),
        radial-gradient(30% 28% at 58% 30%,  rgba(240,200,236,.7) 0%, rgba(240,200,236,0) 72%),
        linear-gradient(180deg, #F3F6F7 0%, #F2F4F7 100%);
      /* no overflow:hidden — it would clip the proof badge, which is
         deliberately offset outside the hero-right box */
    }
    /* the grain */
    .hero::after {
      content: ''; position: absolute; inset: 0; z-index: 0;
      pointer-events: none; opacity: .30; mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E");
      background-size: 220px 220px;
    }
    .hero > .container { position: relative; z-index: 1; }

    /* ── everything on the gradient turns white ───────────── */
    .hero h1,
    .hero h1 .hl {
      color: #fff; -webkit-text-fill-color: #fff; background: none;
      text-shadow: 0 1px 24px rgba(28, 10, 60, .22);
    }
    .hero h1 .hl { opacity: .82; }
    .hero-punch { color: #fff; text-shadow: 0 1px 18px rgba(28,10,60,.22); }
    .hero-desc  { color: rgba(255,255,255,.88); }
    .hero-note  { color: rgba(255,255,255,.82); }
    .hero-note svg { color: #C8F7DF; }
    /* This pill kept .hero-stat's light lavender fill from the body theme
       while the hero turned its text white — white on #F2ECFD is 1.15:1,
       which is why it had all but disappeared. On the gradient it becomes
       dark glass instead, which takes the worst stop (gold, already
       scrimmed) to 8.3:1 rather than lightening it further. */
    .hero-stat {
      background: rgba(25, 10, 56, .34);
      border: 1px solid rgba(255, 255, 255, .26);
      color: rgba(255, 255, 255, .90);
      backdrop-filter: blur(8px);
    }
    .hero-stat strong { color: #fff; }
    /* white-translucent chips LIGHTEN the gradient, which cuts contrast:
       over the gold stop a .18 white wash puts white text at 3.56:1.
       Dark glass darkens instead, so the same white text clears 8:1. */
    .hero .pill--light {
      background: rgba(25, 10, 56, .30); color: #fff;
      border-color: rgba(255,255,255,.28);
      backdrop-filter: blur(8px);
    }

    /* the buttons: one solid white, one outlined */
    .hero .btn-indigo,
    .hero .btn-indigo:hover {
      background: #fff; border-color: #fff; color: #23104A;
    }
    .hero .btn-indigo:hover { background: #F2ECFF; border-color: #F2ECFF; }
    .hero .btn-hero-watch {
      background: rgba(25, 10, 56, .30); color: #fff;
      border-color: rgba(255,255,255,.40);
      backdrop-filter: blur(8px);
    }
    .hero .btn-hero-watch:hover { background: rgba(25, 10, 56, .44); }

    /* ── the product stage becomes glass on the gradient ──── */
    .hero-right {
      background: rgba(255,255,255,.14);
      border: 1px solid rgba(255,255,255,.30);
      border-bottom: 0;
      backdrop-filter: blur(16px) saturate(1.1);
      box-shadow: 0 -20px 60px -30px rgba(24, 8, 54, .5);
    }

    /* The nav and announcement bar are FIXED — they travel over the
       whole page, not just the gradient. White text on a translucent
       bar would vanish the moment you scrolled onto the light body,
       so both keep their light styling and simply read as a frosted
       bar sitting on the gradient. */

    @media (max-width: 900px) {
      .hero::after { opacity: .24; }
    }

    /* =========================================================
       BODY — arranged under the gradient
       The hero carries gold, magenta and blue at full strength.
       The page below cannot compete with that and should not try:
       it stays near-white and takes one hue back from the middle
       of the gradient — the violet — as its single accent.

       Two deliberate echoes keep the page tied to its header
       rather than looking like two different sites: the section
       tints carry a trace of the gradient's warmth at the top and
       its blue lower down, and the one colour field (the customer
       band) is a deep version of the same three-hue sweep.
       ========================================================= */
    :root {
      --bg:      #FFFFFF;
      --bg-soft: #FAF8FE;
      --bg-2:    #F2EDFB;
      --line:    #E9E3F6;
      --line-2:  #F3EFFB;

      --ink:     #1B1233;
      --ink-2:   #2C2150;
      --body:    #443A63;
      --muted:   #6B6189;

      --accent:    #6D3BE0;
      --accent-dk: #5A2BC9;
      --accent-lt: #F2ECFD;

      --hl:      #A78BFA;
      --hl-dk:   #8B5CF6;
      --hl-ink:  #1B1233;
      --hl-tint: rgba(167, 139, 250, .20);

      --hilite: #6D3BE0;
      --indigo: #6D3BE0; --indigo-dk: #5A2BC9; --indigo-lt: #F2ECFD;
      --violet: #6D3BE0; --violet-lt: #F2ECFD;
      --blue:   #6D3BE0; --blue-lt:   #F2ECFD;
      --g900:#1B1233; --g700:#443A63; --g500:#6B6189;
      --g300:#B3AAC9; --g200:#E9E3F6; --g100:#F3EFFB; --g50:#FAF8FE;
      --navy:#1B1233; --slate:#2C2150;
      --dg-ink:#1B1233; --dg-accent:#6D3BE0; --dg-muted:#6B6189;
      --dg-line:#E9E3F6; --dg-soft:#F2EDFB;
    }

    /* the trace of the gradient, top to bottom of the page */
    .prob { background: linear-gradient(180deg, #FFFCF4 0%, #FBF5FC 58%, #F6F4FE 100%); }
    .section--slate { background: #FAF8FE; }
    /* (the flat light gradient that was here is superseded by the light
       mesh further down — left out rather than left to be overridden) */

    /* the one colour field: the same sweep, taken deep */
    .section--stories {
      background:
        radial-gradient(60% 70% at 14% 22%, rgba(221,160,40,.30) 0%, rgba(221,160,40,0) 62%),
        radial-gradient(60% 70% at 84% 78%, rgba(58,98,214,.42) 0%, rgba(58,98,214,0) 66%),
        linear-gradient(126deg, #4A2A78 0%, #3A2270 48%, #241A55 100%);
    }
    .section--stories .sec-hd p { color: rgba(255,255,255,.76); }

    /* the marker stroke picks the gradient's middle hue */
    .hl {
      background: linear-gradient(180deg, transparent 58%, var(--hl) 58%);
      color: var(--ink); -webkit-text-fill-color: currentColor; padding: 0 .06em;
    }
    .btn-indigo, .btn-indigo:hover {
      background: var(--accent); border-color: var(--accent); color: #fff;
    }
    .btn-indigo:hover { background: var(--accent-dk); border-color: var(--accent-dk); }
    .cs-stars { color: #e8a020; }
    /* =========================================================
       RESOLUTIONS — the light mesh
       Same gold → magenta → blue as the hero, but lifted to pastel
       rather than scrimmed dark. The dark version needed a 45%
       wash because white over raw gold is 1.87:1; lifting the
       stops inverts that — dark text now clears 11.8:1 on every
       stop, so there is no scrim and the field stays light.

       That leaves the hero as the only loud field on the page,
       with this band and the enterprise panel as the same colour
       at speaking volume. One shout, two echoes.

       THE SEPARATOR: inset from the page edges with a generous
       radius, so it arrives as a floating slab with the page
       colour showing around it. The gap is the separator — no
       rule, no divider — the same device the customer band uses.
       ========================================================= */
    .section--mesh {
      position: relative;
      background:
        radial-gradient(56% 66% at 10% 18%,  #F7E3A0 0%, rgba(247,227,160,0) 62%),
        radial-gradient(50% 60% at 40% 62%,  #F0C8E8 0%, rgba(240,200,232,0) 66%),
        radial-gradient(66% 76% at 86% 28%,  #C6D6F6 0%, rgba(198,214,246,0) 70%),
        radial-gradient(56% 64% at 72% 92%,  #D9CDF8 0%, rgba(217,205,248,0) 68%),
        radial-gradient(42% 48% at 26% 80%,  #F7D9E6 0%, rgba(247,217,230,0) 64%),
        linear-gradient(118deg, #FAEFC8 0%, #F0D8EE 44%, #D6E0F8 100%);
      border: 1px solid #EADFF2;
      border-radius: 34px;
      margin-inline: clamp(16px, 3vw, 40px);
      margin-block: clamp(40px, 5vw, 76px);
      /* NO overflow:hidden. It makes this section a scroll container, and
         animation-timeline: view() then measures against THIS box rather
         than the viewport — which froze the spine's fill part-way and
         made it look static. The grain clips itself with inherit. */
    }
    .section--mesh::after {
      content: ''; position: absolute; inset: 0; z-index: 0;
      pointer-events: none; opacity: .22; mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n2)'/%3E%3C/svg%3E");
      background-size: 220px 220px;
      border-radius: inherit;
    }
    .section--mesh > .container { position: relative; z-index: 1; }

    /* the words stay dark — that is the point of a light field */
    .section--mesh h2 { color: var(--ink); text-shadow: none; }
    .section--mesh .fr-lead { color: var(--body); }
    .section--mesh .fr-chip-title { color: var(--ink); }
    .section--mesh .fr-chip-desc  { color: var(--muted); }
    .section--mesh .fr-chip-icon  {
      background: rgba(255,255,255,.72); color: var(--accent);
      border: 1px solid rgba(76, 48, 124, .14);
    }
    .section--mesh .link-arrow, .section--mesh a { color: var(--accent); }
    .section--mesh .feature-row::before {
      /* the resting state is also the animation's 'from', so the static
         and animated paths look identical before any scrolling */
      background: rgba(255,255,255,.90);
      border-color: rgba(76, 48, 124, .30);
      color: var(--accent);
    }

    /* a white card on the palest stop is only 1.46:1, so the widgets
       carry a real edge rather than relying on their fill */
    .section--mesh .sb,
    .section--mesh .dg-fig {
      background: rgba(255,255,255,.90);
      border: 1px solid rgba(76, 48, 124, .14);
      border-radius: 20px;
      padding: clamp(16px, 2vw, 24px);
      backdrop-filter: blur(4px);
      box-shadow: 0 24px 48px -32px rgba(40, 18, 80, .30);
    }
    .section--mesh .int-chip { background: rgba(255,255,255,.82); }
    .section--mesh .int-chip:hover { background: #fff; }

    @media (max-width: 620px) {
      .section--mesh { border-radius: 22px; margin-inline: 12px; }
      .section--mesh::after { opacity: .18; }
    }

    /* =========================================================
       ENTERPRISE — the light mesh
       Same hues as the hero and the resolutions band, taken to a
       pastel weight instead of scrimmed down. The dark fields
       needed a 45% wash because white copy over raw gold is
       1.87:1; lift the stops instead and the problem inverts —
       dark text now sits on every stop at 11.8:1 or better, so
       this one needs no scrim at all and stays genuinely light.

       Three fields, three weights: the hero is the loud one, the
       resolutions band repeats it, and this arrives as the same
       colour breathing out. It also breaks up a page that was
       heading toward three dark bands in a row.
       ========================================================= */
    .ent-panel {
      position: relative;
      /* NO overflow:hidden here — it disables position:sticky for every
         descendant, and this panel holds the four scrolling blocks.
         The grain clips itself with border-radius:inherit instead. */
      border: 1px solid #EADFF2;
      background:
        radial-gradient(56% 66% at 10% 18%,  #F7E3A0 0%, rgba(247,227,160,0) 62%),
        radial-gradient(50% 60% at 40% 62%,  #F0C8E8 0%, rgba(240,200,232,0) 66%),
        radial-gradient(66% 76% at 86% 28%,  #C6D6F6 0%, rgba(198,214,246,0) 70%),
        radial-gradient(56% 64% at 72% 92%,  #D9CDF8 0%, rgba(217,205,248,0) 68%),
        radial-gradient(42% 48% at 26% 80%,  #F7D9E6 0%, rgba(247,217,230,0) 64%),
        linear-gradient(118deg, #FAEFC8 0%, #F0D8EE 44%, #D6E0F8 100%);
    }
    .ent-panel::before {
      content: ''; position: absolute; inset: 0; z-index: 0;
      pointer-events: none; opacity: .22; mix-blend-mode: overlay;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n3'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n3)'/%3E%3C/svg%3E");
      background-size: 220px 220px;
      border-radius: inherit;
    }
    .ent-panel > * { position: relative; z-index: 1; }

    /* text stays dark here — that is the whole point of a light field */
    .ent-panel .sec-hd h2 { color: var(--ink); text-shadow: none; }

    /* a white card on the palest stop is only 1.46:1, so the blocks
       need a real edge rather than relying on their fill */
    .ent-panel .ps-block {
      background: rgba(255,255,255,.88);
      border-color: rgba(76, 48, 124, .16);
      backdrop-filter: blur(4px);
      box-shadow: 0 22px 44px -30px rgba(40, 18, 80, .28);
    }

    @media (max-width: 620px) {
      .ent-panel::before { opacity: .18; }
    }

    /* =========================================================
       THE SPINE FILLS AS YOU SCROLL
       The track and the fill already existed — ::before is the pale
       rail, ::after is the accent rail sitting at scaleY(0). It was
       built to be driven and then never wired up, so the fill has
       simply been invisible.

       It runs on a scroll-driven timeline now: the rail darkens
       downward as the section passes, and each numeral turns solid
       as the fill reaches it. No JS, no observer — the pseudo's own
       view() progress is the clock.

       Base state is the fill at zero and the numerals pale, which
       is exactly how the section looks today. Where scroll-driven
       CSS is unsupported, or motion is reduced, nothing moves and
       nothing is missing.
       ========================================================= */
    /* the transition between the problem blocks and the three steps —
       every other section change on this page names the turn in words */
    .bridge { text-align: center; max-width: 820px; margin: clamp(56px, 6vw, 86px) auto 0; }
    .bridge-line { font-size: clamp(1.5rem, 2.5vw, 2.1rem); font-weight: 600; line-height: 1.22; letter-spacing: -.02em; color: var(--ink); }
    .bridge-cue { display: block; margin-top: clamp(26px, 3vw, 38px); color: var(--accent); opacity: .55; }
    .bridge-cue svg { width: 26px; height: 26px; }
    .bridge-eyebrow {
      display: inline-flex; align-items: center; gap: 9px;
      font-size: .82rem; font-weight: 500; letter-spacing: .02em;
      color: #4C307C; background: rgba(255,255,255,.72);
      border: 1px solid rgba(76,48,124,.14); border-radius: 100px;
      padding: 7px 16px; margin-bottom: 22px;
    }
    .bridge-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }
    .bridge-line { margin: 0 auto 18px; max-width: 22ch; }
    .bridge-sub { margin: 0 auto; max-width: 62ch; color: var(--muted); font-size: 1.14rem; line-height: 1.62; }

    .section--mesh .container:has(.feature-row)::before {
      background: rgba(76, 48, 124, .16);
    }
    .section--mesh .container:has(.feature-row)::after {
      background: linear-gradient(180deg, var(--accent) 0%, #4A1FA8 100%);
      border-radius: 2px;
    }

    @supports (animation-timeline: view()) {
      @media (prefers-reduced-motion: no-preference) {
        @keyframes spineFill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
        .section--mesh .container:has(.feature-row)::after {
          animation: spineFill linear both;
          animation-timeline: view();
          /* the range proven working on the deployed build — the bug was
             never the range, it was the scroll-container ancestor above */
          animation-range: entry 30% cover 88%;
        }

        /* each numeral goes solid as the rail arrives at it */
        @keyframes stageOn {
          from {
            background: rgba(255,255,255,.90);
            border-color: rgba(76, 48, 124, .30);
            color: var(--accent);
          }
          to {
            background: var(--accent);
            border-color: var(--accent);
            color: #fff;
          }
        }
        .section--mesh .feature-row::before {
          animation: stageOn linear both;
          animation-timeline: view();
          /* the numeral turns as it crosses the middle of the screen,
             which is where the fill line visually reaches it */
          animation-range: cover 42% cover 54%;
        }
      }
    }

    /* =========================================================
       HERO — light rainbow-arc gradient
       Near-white across the top, the colour arc low behind the
       product stage. White text measures 1.14:1 on that pale top,
       so everything the hero set to white goes back to ink
       (15.6:1) and the glass chips switch from dark to light.
       Scoped to .hero only — nothing else on the page changes.
       ========================================================= */
    .hero::after { opacity: .16; }
    .hero h1, .hero h1 .hl {
      color: var(--ink); -webkit-text-fill-color: var(--ink); text-shadow: none;
    }
    .hero h1 .hl { opacity: 1; color: var(--accent); -webkit-text-fill-color: var(--accent); }
    .hero-punch { color: var(--ink); text-shadow: none; }
    .hero-desc  { color: var(--body); }
    .hero-note  { color: var(--muted); }
    .hero-note svg { color: #1f9e6b; }

    .hero .pill--light, .hero-stat {
      background: rgba(255,255,255,.72); color: var(--body);
      border: 1px solid rgba(76,48,124,.16);
      backdrop-filter: blur(8px);
    }
    .hero-stat strong { color: var(--accent); }

    .hero .btn-indigo, .hero .btn-indigo:hover {
      background: var(--accent); border-color: var(--accent); color: #fff;
    }
    .hero .btn-indigo:hover { background: var(--accent-dk); border-color: var(--accent-dk); }
    .hero .btn-hero-watch {
      background: rgba(255,255,255,.78); color: var(--ink);
      border-color: rgba(76,48,124,.20);
    }
    .hero .btn-hero-watch:hover { background: #fff; }

    .hero-right {
      background: rgba(255,255,255,.28);
      border-color: rgba(255,255,255,.55);
      box-shadow: 0 -20px 60px -34px rgba(24,8,54,.28);
    }

    /* =========================================================
       LOGO BAR — its own band, not the tail of the hero
       It was background: transparent, so the hero's pale gradient
       ran straight through it and the two read as one surface.
       Now it sits on solid white with a firm top edge and a soft
       shadow cast up onto the hero, so there is a clear seam
       between the gradient and the customer strip.
       ========================================================= */
    .logo-bar {
      position: relative; z-index: 1;
      background: #FFFFFF;
      border-top: 1px solid #E2DDEE;
      border-bottom: 1px solid #EDEAF5;
      box-shadow: 0 -22px 44px -34px rgba(40, 18, 80, .30);
      padding: 28px 0;
    }
    .logo-marquee { overflow: hidden; mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
    .logo-marquee-track { display: flex; width: max-content; animation: logo-marquee-scroll 60s linear infinite; }
    .logo-marquee:hover .logo-marquee-track, .logo-marquee:focus .logo-marquee-track { animation-play-state: paused; }
    .logo-marquee-group { display: flex; align-items: center; flex: none; gap: 44px; padding-right: 44px; }
    .logo-marquee-item { display: inline-flex; align-items: center; flex: none; gap: 10px; white-space: nowrap; color: #4e4a59; font-size: .92rem; font-weight: 600; }
    .logo-marquee-item img { display: block; width: 36px; height: 36px; object-fit: contain; }
    .logo-marquee-item--wordmark img { width: 160px; height: auto; max-height: 36px; }
    .logo-marquee-item--darkened img { filter: brightness(0); opacity: .7; }
    @keyframes logo-marquee-scroll { to { transform: translateX(-50%); } }
    @media (prefers-reduced-motion: reduce) {
      .logo-marquee { overflow-x: auto; mask-image: none; }
      .logo-marquee-track { animation: none; }
      .logo-marquee-group[aria-hidden="true"] { display: none; }
    }

    /* =========================================================
       HERO ANIMATION — "Ask Salespanel"
       Ported from video-trial/index.html rather than embedded as
       the MP4: it stays sharp at any width, weighs a few KB instead
       of 1.6 MB, and has no dark video frame around it.

       The card was designed at a fixed 1280px. It is kept at that
       size and scaled to the header's width by the script, so every
       proportion matches the recording exactly. All classes carry
       an spq- prefix — the original names (.row, .step, .chip, .tag,
       .bar, .live) are already used elsewhere on this page.
       ========================================================= */
    .hero-right .spq-fit { position: relative; width: 100%; overflow: hidden; padding-bottom: clamp(20px, 3vw, 38px); }
    .spq-win {
      --spq-ink: #0f172a; --spq-mute: #64748b; --spq-line: #e2e8f0;
      --spq-brand: #2563eb; --spq-brand2: #7c3aed;
      --spq-hot: #ef4444; --spq-warm: #f59e0b; --spq-cool: #10b981;
      width: 1280px; transform-origin: 0 0;
      background: #fff; border-radius: 28px;
      box-shadow: 0 40px 120px -30px rgba(15, 23, 42, .35);
      padding: 40px 48px; text-align: left;
      font-family: var(--ff); color: var(--spq-ink);
      transition: opacity .6s, translate .6s;
    }
    .spq-win.spq-out { opacity: 0; translate: 0 24px; }

    .spq-top { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; }
    .spq-logo { width: 40px; height: 40px; border-radius: 10px; background: linear-gradient(135deg, var(--spq-brand), var(--spq-brand2)); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 20px; }
    .spq-top b { font-size: 22px; color: var(--spq-ink); }
    .spq-top span { margin-left: auto; font-size: 15px; color: var(--spq-mute); display: flex; align-items: center; gap: 8px; }
    .spq-live { width: 10px; height: 10px; border-radius: 50%; background: var(--spq-cool); box-shadow: 0 0 0 0 rgba(16,185,129,.6); }

    .spq-ask { display: flex; align-items: center; gap: 18px; border: 2px solid var(--spq-line); border-radius: 18px; padding: 22px 26px; font-size: 30px; color: var(--spq-ink); transition: border-color .3s, box-shadow .3s; }
    .spq-ask.spq-focus { border-color: var(--spq-brand); box-shadow: 0 0 0 6px rgba(37,99,235,.12); }
    .spq-ask svg { flex: none; }
    #spqQ { min-height: 36px; }
    .spq-caret { display: inline-block; width: 3px; height: 32px; background: var(--spq-brand); vertical-align: middle; margin-left: 2px; }
    .spq-send { margin-left: auto; width: 52px; height: 52px; flex: none; border-radius: 14px; background: var(--spq-line); display: grid; place-items: center; transition: background .3s, transform .2s; }
    .spq-send.spq-on { background: linear-gradient(135deg, var(--spq-brand), var(--spq-brand2)); }
    .spq-send.spq-press { transform: scale(.88); }

    .spq-steps { margin-top: 26px; display: flex; gap: 14px; flex-wrap: wrap; }
    .spq-step { font-size: 18px; color: var(--spq-mute); background: #f1f5f9; border-radius: 999px; padding: 10px 18px; display: flex; align-items: center; gap: 10px; opacity: 0; transform: translateY(8px); transition: all .4s; }
    .spq-step.spq-show { opacity: 1; transform: none; }
    .spq-step i { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #cbd5e1; border-top-color: var(--spq-brand); }
    .spq-step.spq-done i { border-color: var(--spq-cool); background: var(--spq-cool); }

    .spq-answer { margin-top: 28px; opacity: 0; transition: opacity .4s; }
    .spq-answer.spq-show { opacity: 1; }
    .spq-summary { font-size: 24px; color: var(--spq-ink); margin: 0 0 20px; }
    .spq-summary strong { background: linear-gradient(135deg, var(--spq-brand), var(--spq-brand2)); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
    .spq-head, .spq-row { display: grid; grid-template-columns: 2.2fr 1.3fr 2.4fr 1fr 1.1fr; align-items: center; gap: 16px; padding: 0 18px; }
    .spq-head { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--spq-mute); padding-bottom: 10px; border-bottom: 1px solid var(--spq-line); }
    .spq-row { height: 78px; border-bottom: 1px solid var(--spq-line); font-size: 19px; color: var(--spq-ink); opacity: 0; transform: translateX(-30px); transition: all .5s cubic-bezier(.2,.8,.2,1); }
    .spq-row.spq-show { opacity: 1; transform: none; }
    .spq-row.spq-hl { background: #eff6ff; border-radius: 12px; }
    .spq-co { display: flex; align-items: center; gap: 14px; font-weight: 600; }
    .spq-av { width: 44px; height: 44px; flex: none; border-radius: 12px; display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 18px; }
    .spq-co small { display: block; font-weight: 400; color: var(--spq-mute); font-size: 15px; }
    .spq-pages { color: var(--spq-mute); font-size: 17px; }
    .spq-bar { height: 10px; background: #f1f5f9; border-radius: 9px; overflow: hidden; width: 90px; display: inline-block; vertical-align: middle; margin-right: 10px; }
    .spq-bar u { display: block; height: 100%; width: 0; border-radius: 9px; transition: width 1s .2s ease-out; }
    .spq-tag { font-size: 15px; font-weight: 600; padding: 6px 12px; border-radius: 999px; justify-self: start; }
    .spq-hot { background: #fee2e2; color: #b91c1c; }
    .spq-warm { background: #fef3c7; color: #b45309; }
    .spq-cold { background: #d1fae5; color: #047857; }
    .spq-follow { margin-top: 22px; display: flex; gap: 12px; opacity: 0; transition: opacity .5s; }
    .spq-follow.spq-show { opacity: 1; }
    .spq-chip { font-size: 17px; padding: 12px 18px; border-radius: 12px; border: 1.5px solid var(--spq-line); color: var(--spq-ink); }
    .spq-chip--pri { background: var(--spq-ink); color: #fff; border-color: var(--spq-ink); }

    @media (prefers-reduced-motion: no-preference) {
      @keyframes spqPulse { to { box-shadow: 0 0 0 12px rgba(16,185,129,0); } }
      @keyframes spqBlink { 50% { opacity: 0; } }
      @keyframes spqSpin  { to { transform: rotate(360deg); } }
      .spq-live  { animation: spqPulse 1.6s infinite; }
      .spq-caret { animation: spqBlink 1s steps(1) infinite; }
      .spq-step:not(.spq-done) i { animation: spqSpin .7s linear infinite; }
    }

    /* ── Ask Salespanel: tighter vertical rhythm ──
       Same card, same five rows — the height comes out of padding,
       gaps and row height rather than cutting content. */
    .spq-win { padding: 28px 40px 30px; }
    .spq-top { margin-bottom: 18px; }
    .spq-ask { padding: 15px 22px; font-size: 27px; }
    .spq-send { width: 46px; height: 46px; }
    .spq-steps { margin-top: 16px; }
    .spq-step { padding: 8px 16px; }
    .spq-answer { margin-top: 18px; }
    .spq-summary { margin-bottom: 12px; }
    .spq-head { padding-bottom: 8px; }
    .spq-row { height: 58px; }
    .spq-av { width: 38px; height: 38px; font-size: 16px; }
    .spq-follow { margin-top: 14px; }
    .spq-chip { padding: 9px 16px; }
    .hero-right .spq-fit { padding-bottom: clamp(14px, 2vw, 26px); }

    /* ── Ask Salespanel: breathing room between result rows ──
       Rows were flush strips divided by a single rule. Each is now
       its own rounded row with a gap between, so the list reads as
       five distinct accounts arriving rather than one block. */
    .spq-head { margin-bottom: 8px; }
    #spqRows { display: grid; gap: 8px; }
    .spq-row {
      height: 56px;
      border: 1px solid var(--spq-line);
      border-radius: 12px;
    }
    .spq-row.spq-hl { border-color: #bfdbfe; }

    /* less crowded: 4 columns, 4 roomier rows, visitor portraits */
    .spq-head, .spq-row { grid-template-columns: 2.2fr 1.55fr 1.15fr .85fr 1.55fr; gap: 20px; padding: 0 22px; }
    .spq-tag { white-space: nowrap; font-size: 15px; padding: 7px 13px; }
    .spq-cmp  { background: #ede9fe; color: #6d28d9; }
    .spq-eval { background: #dbeafe; color: #1d4ed8; }
    .spq-bar { width: 60px; margin-right: 8px; }
    .spq-company { display: flex; align-items: center; gap: 12px; font-weight: 600; }
    .spq-clogo { width: 34px; height: 34px; flex: none; border-radius: 9px; padding: 7px; box-sizing: border-box; }
    .spq-top .spq-brandlogo { height: 34px; width: auto; display: block; }
    #spqRows { gap: 14px; }
    .spq-row { height: 84px; font-size: 20px; }
    .spq-co { gap: 18px; }
    .spq-photo { width: 52px; height: 52px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 0 0 4px var(--spq-line); }
    .spq-co small { margin-top: 3px; }
    .spq-when { color: var(--spq-mute); }
    .spq-head { margin-bottom: 12px; }
    .spq-follow { margin-top: 22px; }

    /* SCENE 2 — workflow. The conversation scrolls inside a fixed-height view,
       so the header keeps one height for both scenes. */
    .spq-view { position: relative; overflow: hidden; margin: -8px -12px 0; padding: 8px 12px 0; }
    .spq-stream { position: relative; transition: transform .9s cubic-bezier(.65,0,.35,1); }
    .spq-stream.spq-jump { transition: none; }
    .spq-ask:not(.spq-focus) .spq-caret { opacity: 0; animation: none; }
    .spq-s2 { padding-top: 44px; visibility: hidden; }
    .spq-s2.spq-s2-on { visibility: visible; }
    .spq-agent { display: flex; align-items: center; gap: 14px; margin-top: 22px; opacity: 0; transform: translateY(8px); transition: opacity .5s, transform .5s; }
    .spq-agent.spq-show { opacity: 1; transform: none; }
    .spq-agent-av { width: 38px; height: 38px; flex: none; border-radius: 11px; display: grid; place-items: center; background: linear-gradient(135deg, var(--spq-brand), var(--spq-brand2)); }
    .spq-agent p { margin: 0; font-size: 22px; color: var(--spq-ink); transition: opacity .35s; }
    .spq-agent p.spq-swap { opacity: 0; }

    .spq-canvas { margin-top: 22px; display: grid; grid-template-columns: 330px 1fr; gap: 22px; opacity: 0; transform: translateY(12px); transition: opacity .5s, transform .5s; }
    .spq-canvas.spq-show { opacity: 1; transform: none; }
    .spq-plan { list-style: none; margin: 0; padding: 14px; border: 1px solid var(--spq-line); border-radius: 18px; background: #f8fafc; display: grid; gap: 6px; align-content: start; }
    .spq-plan li { display: flex; align-items: center; gap: 14px; font-size: 18px; color: #94a3b8; padding: 13px 14px; border-radius: 12px; opacity: 0; transform: translateX(-10px); transition: opacity .35s, transform .35s, background .3s, color .3s; }
    .spq-plan li.spq-show { opacity: 1; transform: none; }
    .spq-plan li i { width: 24px; height: 24px; flex: none; border-radius: 50%; border: 2px solid #cbd5e1; display: grid; place-items: center; box-sizing: border-box; transition: all .3s; }
    .spq-plan li.spq-act { background: #fff; color: var(--spq-ink); box-shadow: 0 1px 0 var(--spq-line), 0 6px 16px -10px rgba(15,23,42,.3); }
    .spq-plan li.spq-act i { border-top-color: var(--spq-brand); }
    .spq-plan li.spq-done { color: var(--spq-ink); }
    .spq-plan li.spq-done i { background: var(--spq-cool); border-color: var(--spq-cool); }
    .spq-plan li.spq-done i::after { content: ""; width: 10px; height: 5px; border: solid #fff; border-width: 0 0 2.5px 2.5px; transform: translateY(-1px) rotate(-45deg); }

    .spq-panes { position: relative; min-height: 470px; border: 1px solid var(--spq-line); border-radius: 18px; background: #fff; }
    .spq-pane { position: absolute; inset: 0; padding: 26px 30px; opacity: 0; transform: translateY(10px); transition: opacity .45s, transform .45s; pointer-events: none; }
    .spq-pane.spq-on { opacity: 1; transform: none; }
    .spq-pane h4 { margin: 0 0 8px; display: flex; align-items: center; gap: 12px; font-size: 24px; font-weight: 600; color: var(--spq-ink); letter-spacing: -.01em; }
    .spq-pane h4 em { width: 28px; height: 28px; border-radius: 50%; background: var(--spq-cool); color: #fff; font-style: normal; font-size: 16px; display: grid; place-items: center; }
    .spq-pane p { margin: 0; font-size: 19px; line-height: 1.45; color: var(--spq-mute); }
    .spq-pane p b { color: var(--spq-ink); font-weight: 600; }
    .spq-pane code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; background: #f1f5f9; color: var(--spq-ink); padding: 2px 7px; border-radius: 6px; }
    .spq-pane .spq-seg { display: inline-block; margin-top: 4px; font-size: 18px; font-weight: 600; color: #4c1d95; background: #ede9fe; padding: 6px 14px; border-radius: 999px; }
    .spq-filters { margin-top: 22px; display: grid; gap: 10px; }
    .spq-filters div, .spq-dests div { display: flex; align-items: center; gap: 14px; font-size: 18px; padding: 14px 18px; border: 1px solid var(--spq-line); border-radius: 12px; background: #f8fafc; }
    .spq-filters span { width: 150px; color: var(--spq-mute); }
    .spq-filters b, .spq-dests b { font-weight: 600; color: var(--spq-ink); }
    .spq-dests { margin-top: 22px; display: grid; gap: 12px; }
    .spq-dests i { font-style: normal; color: #94a3b8; }
    .spq-dest { min-width: 104px; text-align: center; font-weight: 600; font-size: 16px; padding: 6px 12px; border-radius: 8px; }
    .spq-dest--hs { background: #ffedd5; color: #9a3412; }
    .spq-dest--sl { background: #f3e8ff; color: #6b21a8; }
    .spq-label { margin-top: 22px; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--spq-mute); }
    .spq-roles { margin-top: 10px; display: flex; gap: 10px; flex-wrap: wrap; }
    .spq-roles span { font-size: 18px; font-weight: 500; padding: 9px 16px; border-radius: 999px; background: #eff6ff; color: #1e40af; border: 1px solid #dbeafe; }
    .spq-pane .spq-micro { margin-top: 20px; display: flex; align-items: center; gap: 8px; font-size: 16px; color: #047857; }
    .spq-mail { margin-top: 20px; border: 1px solid var(--spq-line); border-radius: 14px; overflow: hidden; box-shadow: 0 14px 30px -22px rgba(15,23,42,.35); }
    .spq-mail-top { display: flex; align-items: center; gap: 10px; padding: 14px 18px; background: #f8fafc; border-bottom: 1px solid var(--spq-line); font-size: 18px; font-weight: 600; color: var(--spq-ink); }
    .spq-mail ul { list-style: none; margin: 0; padding: 10px 18px 14px; }
    .spq-mail li { font-size: 18px; color: var(--spq-mute); padding: 6px 0; }
    .spq-mail li b { display: inline-block; min-width: 34px; color: var(--spq-ink); }
    .spq-toggle { margin-top: 26px; display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--spq-line); border-radius: 14px; background: #f8fafc; font-size: 19px; }
    .spq-toggle-name { font-weight: 600; color: var(--spq-ink); margin-right: auto; }
    .spq-switch { width: 56px; height: 32px; border-radius: 999px; background: #cbd5e1; position: relative; transition: background .35s; }
    .spq-switch u { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: transform .35s cubic-bezier(.3,1.4,.5,1); }
    .spq-toggle b { width: 96px; font-weight: 600; }
    .spq-off { color: var(--spq-mute); }
    .spq-on-txt { display: none; color: #047857; }
    .spq-toggle.spq-enabled .spq-switch { background: var(--spq-cool); }
    .spq-toggle.spq-enabled .spq-switch u { transform: translateX(24px); }
    .spq-toggle.spq-enabled .spq-off { display: none; }
    .spq-toggle.spq-enabled .spq-on-txt { display: inline; }
    .spq-final-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
    .spq-final-head h4 { margin: 0; }
    .spq-livebadge { display: flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: #047857; background: #d1fae5; padding: 6px 14px; border-radius: 999px; }
    .spq-livebadge em { width: 9px; height: 9px; border-radius: 50%; background: var(--spq-cool); }
    .spq-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .spq-checks li { display: flex; align-items: center; gap: 12px; font-size: 18px; color: var(--spq-ink); padding: 14px 16px; border: 1px solid var(--spq-line); border-radius: 12px; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s; }
    .spq-checks li::before { content: "\2713"; width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--spq-cool); color: #fff; font-size: 14px; display: grid; place-items: center; }
    .spq-checks li.spq-show { opacity: 1; transform: none; }
    @media (prefers-reduced-motion: no-preference) {
      .spq-plan li.spq-act:not(.spq-done) i { animation: spqSpin .7s linear infinite; }
    }
    .spq-follow { margin-top: 16px; }

    .mobile-account-link { display: none !important; }
    .topbar-short { display: none; }
    .navbar-links > li:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
    .navbar-links > li:focus-within .dropdown-mega { transform: translateX(-50%) translateY(0); }
    .account-menu { position: relative; }
    .account-menu-toggle { border: 0; background: transparent; cursor: pointer; font: inherit; }
    .account-menu-links { display: none; position: absolute; top: 100%; right: 0; min-width: 170px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg); }
    .account-menu:hover .account-menu-links, .account-menu:focus-within .account-menu-links { display: block; }
    .account-menu-links a { display: block; padding: 8px 10px; color: var(--body); }
    .account-menu-links a:hover { background: var(--bg-soft); color: var(--ink); }
    @media (max-width: 1080px) {
      .account-menu { display: none; }
      .navbar-links.mobile-open > li { display: flex; flex-direction: column; align-items: stretch; }
      .navbar-links.mobile-open .dropdown { width: 100%; }
      .navbar-links.mobile-open > li:focus-within .dropdown-mega { transform: none; }
      .navbar-links.mobile-open .mobile-account-link { display: flex !important; }
    }
    @media (max-width: 620px) {
      .topbar-full { display: none; }
      .topbar-short { display: inline; }
      .navbar-inner { gap: 12px; }
      .navbar-logo img { max-width: 150px; height: auto; }
    }

    .navbar-logo .logo-light { display: none; }
    .navbar-links > li > .nav-section-toggle {
      border: 0; background: transparent; font: inherit; text-align: left;
      font-size: .94rem; font-weight: 400; color: var(--body);
      padding: 0 .85rem; height: 100%; display: flex; align-items: center;
      gap: .35rem; cursor: pointer; white-space: nowrap;
    }
    .navbar-links > li:hover > .nav-section-toggle { color: var(--ink); }
    @media (max-width: 1080px) {
      .navbar-actions .navbar-login { display: none; }
      .navbar.mobile-menu-open { background: #244d83; border-color: #244d83; }
      .navbar.mobile-menu-open .logo-dark { display: none; }
      .navbar.mobile-menu-open .navbar-logo .logo-light { display: block; }
      .navbar.mobile-menu-open .hamburger span { background: #fff; }
      .navbar-links.mobile-open {
        padding: 0 0 28px; align-items: stretch; overscroll-behavior: contain;
      }
      .navbar-links.mobile-open > li {
        display: flex; flex-direction: column; align-items: stretch;
        border-bottom: 1px solid #edf0f3; width: 100%;
      }
      .navbar-links.mobile-open > li > a,
      .navbar-links.mobile-open > li > .nav-section-toggle {
        width: 100%; min-height: 60px; padding: 16px 20px;
        font-size: 1.16rem; font-weight: 700; line-height: 1.3;
        color: #263341; white-space: normal;
      }
      .navbar-links.mobile-open > li > .nav-section-toggle {
        justify-content: space-between; position: sticky; top: 0;
        z-index: 2; background: #fff;
      }
      .navbar-links.mobile-open > li > .nav-section-toggle:focus-visible {
        outline-offset: -4px;
      }
      .navbar-links.mobile-open .nav-arrow {
        display: grid; place-items: center; width: 22px; height: 22px;
        flex: none; border-radius: 50%; background: #36434e;
        color: #fff; font-size: .75rem; opacity: 1; transform: none;
      }
      .navbar-links.mobile-open .mobile-section-open .nav-arrow { transform: rotate(180deg); }
      .navbar-links.mobile-open .nav-section > .dropdown { display: none; }
      .navbar-links.mobile-open .nav-section.mobile-section-open > .dropdown {
        display: block; position: static; width: 100%; min-width: 0;
        opacity: 1; visibility: visible; transform: none;
        padding: 12px 24px 22px; border: 0; border-radius: 0;
        background: #fff; box-shadow: none;
      }
      .navbar-links.mobile-open .mega-cols,
      .navbar-links.mobile-open .mega-grid { display: block; }
      .navbar-links.mobile-open .dropdown a {
        display: block; padding: 8px 0; border-radius: 0;
        color: #5c65b8; font-size: .96rem; font-weight: 700;
      }
      .navbar-links.mobile-open .dropdown a:hover { background: transparent; text-decoration: underline; }
      .navbar-links.mobile-open .dropdown-api-entry { padding: 8px 0; }
      .navbar-links.mobile-open .dropdown .dropdown-api-title { padding: 0; }
      .navbar-links.mobile-open .dropdown .dropdown-inline-link { display: inline; padding: 0; font-size: inherit; font-weight: 600; }
      .navbar-links.mobile-open .dropdown .dd-desc {
        display: block; margin-top: 4px; color: #69727d;
        font-size: .84rem; font-weight: 400; line-height: 1.55;
      }
      .navbar-links.mobile-open .mega-group-title {
        padding: 14px 0 5px; color: #69727d;
        font-size: .72rem; font-weight: 700; text-transform: uppercase;
      }
      .navbar-links.mobile-open .mobile-login-link { border-bottom: 0; padding: 20px 20px 0; }
      .navbar-links.mobile-open .mobile-login-link > a {
        min-height: 48px; padding: 11px 16px; justify-content: center;
        border: 1px solid #5667cb; color: #5667cb; font-size: .94rem;
      }
      .navbar-links.mobile-open .mobile-login-link + .mobile-account-link {
        border-bottom: 0; padding: 12px 20px 20px;
      }
      .navbar-links.mobile-open .mobile-login-link + .mobile-account-link > a {
        min-height: 48px; padding: 11px 16px; justify-content: center;
        background: #5667cb; color: #fff; font-size: .94rem;
      }
    }