/* Site chrome (nav + base) for generated detail pages. Extracted from the
   hand pages so the real header renders identically. Regenerate by copying
   the two nav style blocks from any hand page if the nav design changes. */

        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        :root { --bg:#1c1b22; --bg-card:#2E2C35; --bg-card-alt:#383641; --accent:#1B75BC; --accent-glow:#46C2CB; --accent-dark:#001B52; --green:#80BC00; --red:#C12138; --orange:#EB7726; --yellow:#E8C41E; --text:#EAE7E4; --text-dim:#9e9b97; --text-bright:#f8f7f5; --border:#3d3b46; --radius:12px; --radius-sm:8px; --surface:#2E2C35; }
        html { scroll-behavior: smooth; scroll-padding-top: 80px; }
        body { font-family: 'Ubuntu', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; background: var(--bg); color: var(--text); line-height: 1.65; overflow-x: hidden; }
        a { color: var(--accent-glow); text-decoration: none; transition: color 0.2s; }
        a:hover { color: var(--text-bright); }
        .container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
        code { background: rgba(70,194,203,0.12); color: var(--accent-glow); padding: 1px 6px; border-radius: 4px; font-size: 0.88em; font-family: 'Ubuntu Mono', monospace; }

        .nav-logo { font-size: 1.1rem; font-weight: 800; color: var(--text-bright); letter-spacing: -0.5px; white-space: nowrap; padding-right: 8px; display: flex; align-items: center; gap: 8px; text-decoration: none; }
        .nav-logo img { height: 24px; width: auto; display: block; }
        .nav-logo span { color: var(--green); }
        nav { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 100; background: rgba(22,21,28,0.55); backdrop-filter: blur(40px) saturate(220%); -webkit-backdrop-filter: blur(40px) saturate(220%); border: 1px solid rgba(255,255,255,0.22); border-radius: 50px; padding: 0; width: max-content; max-width: calc(100vw - 32px); box-shadow: 0 4px 24px rgba(0,0,0,0.35); transition: background 0.3s, border-color 0.3s, box-shadow 0.3s; }
        nav.scrolled { background: rgba(22,21,28,0.78); border-color: rgba(255,255,255,0.12); box-shadow: 0 8px 32px rgba(0,0,0,0.5); }
        nav .container { display: flex; align-items: center; gap: 4px; padding: 6px 8px 6px 16px; max-width: none; }
        .nav-links { display: flex; gap: 6px; list-style: none; align-items: center; }
        .nav-links > li > a, .nav-dropdown-trigger { color: var(--text-dim); font-size: 0.82rem; font-weight: 500; padding: 6px 11px; border-radius: 30px; transition: color 0.2s, background 0.2s; white-space: nowrap; display: block; }
        .nav-links > li > a:hover, .nav-dropdown-trigger:hover { color: var(--text-bright); background: rgba(255,255,255,0.07); }
        .nav-dropdown { position: relative; }
        .nav-dropdown-trigger { background: none; border: none; cursor: pointer; font-family: inherit; display: flex; align-items: center; gap: 4px; }
        .nav-dropdown-trigger::after { content: ''; width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 4px solid currentColor; opacity: 0.6; transition: transform 0.2s; }
        .nav-dropdown:hover .nav-dropdown-trigger::after, .nav-dropdown.open .nav-dropdown-trigger::after { transform: rotate(180deg); }
        .nav-dropdown-menu { position: absolute; top: 100%; left: 0; background: rgba(22,21,28,0.97); backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; padding: 10px 6px 6px 6px; min-width: 220px; box-shadow: 0 8px 32px rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity 0.15s; list-style: none; }
        .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu { opacity: 1; pointer-events: auto; }
        .nav-dropdown-menu li a { display: block; padding: 8px 14px; border-radius: 8px; color: var(--text-dim); font-size: 0.82rem; font-weight: 500; white-space: nowrap; transition: color 0.15s, background 0.15s; }
        .nav-dropdown-menu li a:hover { color: var(--text-bright); background: rgba(255,255,255,0.07); }
        .nav-cta-sep { border-left: 1px solid var(--border); padding-left: 12px; margin-left: 8px; }
        .nav-cta { background: var(--green); color: #111 !important; padding: 6px 15px; border-radius: 30px; font-weight: 700; font-size: 0.8rem; transition: background 0.2s; white-space: nowrap; }
        .nav-cta:hover { background: #6aa300; color: #111 !important; }
        .nav-cta-ms { background: var(--accent-glow); color: #0f1a1b !important; padding: 6px 15px; border-radius: 30px; font-weight: 700; font-size: 0.8rem; transition: background 0.2s, box-shadow 0.2s; white-space: nowrap; margin-left: 2px; box-shadow: 0 0 0 1px rgba(70,194,203,0.25), 0 4px 14px rgba(70,194,203,0.22); }
        .nav-cta-ms:hover { background: #7ad8df; color: #ffffff !important; box-shadow: 0 0 0 1px rgba(70,194,203,0.4), 0 6px 20px rgba(70,194,203,0.35); }

        /* Burger nav: collapse the whole menu to a hamburger at <=1100px. */
        @media (max-width: 1100px) {
            .nav-links > li { display: none; }
            .nav-search-toggle { background: transparent; border: none; color: var(--green); cursor: pointer; padding: 6px 10px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; transition: color 0.2s, background 0.2s; }
        .nav-search-toggle:hover { color: var(--green); background: rgba(255,255,255,0.07); }
        .mobile-toggle { display: inline-flex !important; align-items: center; padding: 4px 8px; }
        }
        nav.mobile-open { width: calc(100vw - 32px); max-width: 520px; border-radius: 22px; }
        nav.mobile-open .container { flex-wrap: wrap; padding-bottom: 10px; }
        nav.mobile-open .nav-links { flex-direction: column; align-items: stretch; gap: 2px; width: 100%; padding: 10px 4px 4px; border-top: 1px solid rgba(255,255,255,0.12); margin-top: 8px; }
        nav.mobile-open .nav-links > li { display: block !important; }
        nav.mobile-open .nav-links > li.nav-dropdown { display: none !important; }
        nav.mobile-open .nav-links > li > a, nav.mobile-open .nav-dropdown-trigger { display: block; width: 100%; padding: 10px 14px; border-radius: 10px; font-size: 0.95rem; }
.mobile-toggle { display: none; background: none; border: none; color: var(--text); cursor: pointer; }

        .fade-up { opacity: 1; transform: none; } .js-ready .fade-up { opacity: 0; transform: translateY(32px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } .fade-up.visible { opacity: 1; transform: translateY(0); }

        @media (max-width: 900px) {
            .mobile-toggle { display: block; }

            nav.mobile-open .nav-links { display: flex; flex-direction: column; position: absolute; top: calc(100% + 8px); left: 0; right: 0; background: rgba(22,21,28,0.97); backdrop-filter: blur(20px); padding: 16px; gap: 4px; border: 1px solid rgba(255,255,255,0.1); border-radius: 14px; }
            nav.mobile-open .nav-dropdown-menu { position: static; opacity: 1; pointer-events: auto; box-shadow: none; border: none; background: rgba(255,255,255,0.04); padding: 4px 0 4px 12px; margin-top: 2px; }
            .nav-dropdown-trigger::after { display: none; }
        }

/* Design-system uplift: hover lift + cyan offset shadow on key cards */
.workload-card, .ai-feature-card, .step-card, .feature-card { transition: transform 200ms cubic-bezier(0.2,0,0,1), box-shadow 200ms cubic-bezier(0.2,0,0,1), border-color 200ms cubic-bezier(0.2,0,0,1); }
.workload-card:hover, .ai-feature-card:hover, .step-card:hover, .feature-card:hover { transform: translateY(-3px); box-shadow: -4px 4px 0 0 var(--accent-glow), 0 14px 30px rgba(0,0,0,0.45); border-color: var(--accent-glow) !important; }
    

        .nav-links > li { position: relative; }
        .nav-cta-wrap { position: relative; }
        .nav-tip { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(4px); background: rgba(22,21,28,0.97); backdrop-filter: blur(10px); border: 1px solid rgba(70,194,203,0.32); border-radius: 8px; padding: 7px 12px; font: 600 12px 'Ubuntu', sans-serif; color: #46C2CB; letter-spacing: 0.01em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 200ms cubic-bezier(0.2,0,0,1), transform 200ms cubic-bezier(0.2,0,0,1); z-index: 110; }
        .nav-tip::before { content:''; position:absolute; top:-5px; left:50%; transform:translateX(-50%) rotate(45deg); width:8px; height:8px; background: rgba(22,21,28,0.97); border-top: 1px solid rgba(70,194,203,0.32); border-left: 1px solid rgba(70,194,203,0.32); }
        .nav-links > li:hover > .nav-tip, .nav-links > li:focus-within > .nav-tip { opacity: 1; transform: translateX(-50%) translateY(0); }
        .nav-tip--reel { overflow: hidden; height: 4.2em; line-height: 1.4em; min-width: 240px; text-align: center; padding: 7px 16px; }
        .nav-tip--reel .tip-roll { display: flex; flex-direction: column; }
        .nav-tip--reel .tip-roll > span { display: block; height: 1.4em; line-height: 1.4em; }
        @keyframes navTipReel {
            0%, 5%   { transform: translateY(0); }
            8%, 13%  { transform: translateY(-1.4em); }
            16%, 21% { transform: translateY(-2.8em); }
            24%, 29% { transform: translateY(-4.2em); }
            32%, 37% { transform: translateY(-5.6em); }
            40%, 45% { transform: translateY(-7em); }
            48%, 53% { transform: translateY(-8.4em); }
            56%, 61% { transform: translateY(-9.8em); }
            64%, 69% { transform: translateY(-11.2em); }
            96%, 100% { transform: translateY(-12.6em); }
        }
        .nav-cta-wrap:hover .nav-tip--reel .tip-roll, .nav-cta-wrap:focus-within .nav-tip--reel .tip-roll { animation: navTipReel 16s ease-in-out infinite; }
        @media (max-width: 900px) { .nav-tip { display: none; } }
        @media (prefers-reduced-motion: reduce) { .nav-cta-wrap:hover .nav-tip--reel .tip-roll { animation: none; } }
        /* Product dropdown: self-contained styling so every page renders it readably */
        .nav-dropdown { position: relative; }
        .nav-dropdown-trigger { background: none; border: none; cursor: pointer; font-family: inherit; color: var(--text-dim); font-size: 0.82rem; font-weight: 500; padding: 6px 11px; border-radius: 30px; display: flex; align-items: center; gap: 4px; transition: color 0.2s, background 0.2s; }
        .nav-dropdown-trigger:hover { color: var(--text-bright); background: rgba(255,255,255,0.07); }
        .nav-dropdown-trigger::after { content: ''; width: 0; height: 0; border-left: 3.5px solid transparent; border-right: 3.5px solid transparent; border-top: 4px solid currentColor; opacity: 0.6; margin-left: 2px; transition: transform 0.2s; }
        .nav-dropdown:hover .nav-dropdown-trigger::after, .nav-dropdown.open .nav-dropdown-trigger::after { transform: rotate(180deg); }
        .nav-dropdown-menu { position: absolute; top: 100%; left: 0; min-width: 220px; list-style: none; margin: 0; padding: 8px; background: rgba(20,19,26,0.98); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,255,255,0.14); border-radius: 14px; box-shadow: 0 8px 32px rgba(0,0,0,0.55); opacity: 0; pointer-events: none; transition: opacity 0.15s; z-index: 120; }
        .nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu { opacity: 1; pointer-events: auto; }
        .nav-dropdown-menu li { position: relative; }
        .nav-dropdown-menu li a { display: block; padding: 9px 14px; border-radius: 8px; color: var(--text); font-size: 0.86rem; font-weight: 500; white-space: nowrap; text-decoration: none; transition: color 0.15s, background 0.15s; }
        .nav-dropdown-menu li a:hover { color: var(--text-bright); background: rgba(70,194,203,0.14); }
        /* Product mega menu: group the entries into labeled columns so the menu is scannable, not one long list. */
        .nav-mega { display: block; padding: 8px; min-width: 220px; max-width: calc(100vw - 32px); }
        .nav-mega .nav-mega-col { min-width: 0; }
        .nav-mega .nav-mega-col > ul { list-style: none; margin: 0; padding: 0; }
        .nav-mega .nav-mega-label { display: block; padding: 4px 14px 6px; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-glow); }
        @media (max-width: 1100px) {
            .nav-mega { display: block; min-width: 0; padding: 4px 0; }
            .nav-mega .nav-mega-label { padding: 8px 14px 2px; }
        }
        /* Mobile: keep the hamburger menu basic. Items marked nav-mobile-hide
           (the Platform mega, Beat Claude, About, and search) drop out when the
           mobile menu is open; they stay on desktop. Mobile keeps a flat set:
           Solutions, CVEs, Patches, Quick Start, Pricing, Blog, Register Free. */
        /* Mobile density: tighten the large desktop section spacing so phone
           pages are not an endless scroll of whitespace between blocks. */
        @media (max-width: 760px) {
            .section { padding: 44px 0; }
            .section-header { margin-bottom: 28px; }
            .hero-lead, .lede { font-size: 1.02rem; line-height: 1.55; }
        }
        /* Wide flow diagrams: keep them legible on phones by allowing a
           horizontal swipe instead of shrinking the text to nothing. */
        @media (max-width: 760px) {
            .mflow { overflow-x: auto; -webkit-overflow-scrolling: touch; }
            .mflow > svg { min-width: 680px; }
        }
        /* Mobile: dropdowns become tap-to-expand accordion sections so every
           page is reachable from the hamburger menu. Overrides the per-page
           rules that hid dropdowns on mobile. */
        /* Mobile: flatten the dropdowns. Every section's items are listed
           directly in the hamburger (always expanded) under a static section
           label, so no tap-to-expand is needed and there is no accordion JS to
           conflict with. */
        @media (max-width: 1100px) {
            nav.mobile-open .nav-links > li.nav-dropdown { display: block !important; }
            nav.mobile-open .nav-dropdown-trigger { display: flex !important; width: 100%; justify-content: flex-start; align-items: center; color: var(--text-dim); font-weight: 700; cursor: default; pointer-events: none; }
            nav.mobile-open .nav-dropdown-trigger::after { display: none; }
            nav.mobile-open .nav-dropdown-menu { display: block !important; position: static; opacity: 1 !important; pointer-events: auto !important; min-width: 0; box-shadow: none; border: none; background: rgba(255,255,255,0.04); border-radius: 10px; margin: 2px 0 6px; padding: 4px 0 6px 14px; }
            nav.mobile-open .nav-mega { display: block !important; min-width: 0; padding: 4px 0 6px 14px; }
        }
        /* Mobile menu: show ONLY the curated mobile link list (.nav-links-mobile)
           and hide the full desktop nav, so the hamburger is a short, focused set. */
        .nav-links-mobile { display: none; }
        @media (max-width: 1100px) {
            nav.mobile-open .nav-links { display: none !important; }
            nav.mobile-open .nav-links-mobile { display: flex; flex-direction: column; align-items: stretch; gap: 2px; width: 100%; padding: 10px 4px 6px; margin-top: 8px; border-top: 1px solid rgba(255,255,255,0.12); list-style: none; }
            nav.mobile-open .nav-links-mobile > li { display: block; width: 100%; }
            nav.mobile-open .nav-links-mobile > li > a { display: block; width: 100%; padding: 10px 14px; border-radius: 10px; font-size: 0.95rem; font-weight: 600; color: var(--text-dim); text-decoration: none; }
            nav.mobile-open .nav-links-mobile > li > a:hover { color: var(--text-bright); background: rgba(255,255,255,0.07); }
        }
        /* Stronger primary CTA: bolder, slightly larger, with a green glow. */
        .nav-cta { padding: 7px 18px !important; font-size: 0.88rem !important; font-weight: 800 !important; box-shadow: 0 0 0 1px rgba(128,188,0,0.40), 0 4px 16px rgba(128,188,0,0.32); transition: background 0.2s, box-shadow 0.2s, transform 0.15s; }
        .nav-cta:hover { box-shadow: 0 0 0 1px rgba(128,188,0,0.55), 0 6px 22px rgba(128,188,0,0.45); transform: translateY(-1px); }
        

/* Site search overlay styles (used by the nav search) */

.sen-search { position:fixed; inset:0; z-index:300; display:flex; align-items:flex-start; justify-content:center; padding:90px 16px 16px; background:rgba(10,10,16,0.6); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); }
.sen-search[hidden] { display:none; }
.sen-search-box { width:100%; max-width:640px; background:rgba(22,21,28,0.98); border:1px solid rgba(70,194,203,0.35); border-radius:16px; box-shadow:0 20px 60px rgba(0,0,0,0.6); overflow:hidden; }
.sen-search-inputrow { display:flex; align-items:center; gap:10px; padding:14px 16px; border-bottom:1px solid var(--border); }
.sen-search-inputrow input { flex:1; min-width:0; background:transparent; border:none; outline:none; color:var(--text-bright); font-family:'Ubuntu',sans-serif; font-size:1.05rem; }
.sen-search-close { flex:0 0 auto; background:transparent; border:1px solid var(--border); color:var(--text-dim); border-radius:8px; padding:3px 9px; font-size:0.72rem; cursor:pointer; }
.sen-search-results { max-height:60vh; overflow-y:auto; }
.sen-search-results a { display:block; padding:12px 16px; border-bottom:1px solid var(--border); text-decoration:none; }
.sen-search-results a:hover { background:rgba(70,194,203,0.10); }
.sen-search-rtitle { color:var(--text-bright); font-weight:700; font-size:0.96rem; }
.sen-search-rurl { color:var(--accent-glow); font-size:0.78rem; margin-top:2px; }
.sen-search-empty { padding:18px 16px; color:var(--text-dim); font-size:0.92rem; }