/* Shared site layout — linked from every marketing page . !important beats inline style attributes on DC components. */ @media (max-width: 760px) { [data-kd-nav] { overflow-x: auto !important; scrollbar-width: none; } [data-kd-nav]::-webkit-scrollbar { display: none; } } @media (max-width: 860px) { [data-kd-nav] { width: 100% !important; max-width: none !important; padding: 8px 52px 8px 16px !important; border-radius: 16px !important; overflow: visible !important; overflow-x: visible !important; justify-content: flex-start !important; align-items: center !important; } [data-kd-nav] > a:not(:first-child), [data-kd-nav] > button:not([data-kd-burger]) { display: none !important; } [data-kd-nav] > a:first-child { margin-right: auto !important; } [data-kd-stack]:not([data-kd-diagram]) { grid-template-columns: minmax(0, 1fr) !important; } /* Children carry inline grid-column: span N from the multi-column desktop layout. Once the grid is one column, a span > 1 spawns implicit columns and the cards overlap, so reset every child to a single column. */ [data-kd-stack]:not([data-kd-diagram]) > * { grid-column: auto !important; } section:has([data-kd-stack]) { overflow: visible !important; } [data-kd-thead] { display: none !important; } [data-kd-minw] { min-width: 460px; } :has(> [data-kd-minw]) { overflow-x: auto !important; -webkit-overflow-scrolling: touch; } [data-kd-stack] span, [data-kd-stack] p { overflow-wrap: anywhere; } [data-kd-diagram] { grid-template-columns: minmax(0, 1fr) !important; } [data-kd-diagram] > [data-kd-conn] { display: grid !important; place-items: center; height: 48px; padding: 0 !important; } [data-kd-diagram] > [data-kd-conn] > div { width: 48px !important; height: 2px !important; transform: rotate(90deg); } [data-kd-diagram] > [data-kd-conn] > div:nth-child(n + 2) { display: none; } /* Sticky headline columns overlap the cards once the two-column grid collapses to one column on phones. Let them scroll normally. */ [data-kd-unstick] { position: static !important; top: auto !important; } [data-kd-burger] { display: flex !important; } [data-kd-drawer][data-mounted] { display: flex !important; } html:has([data-kd-drawer][data-open]), html:has([data-kd-drawer][data-open]) body { overflow: hidden; } } /* ---- Mobile typography ------------------------------------------------- Headings are sized with inline clamp() whose *minimums* are desktop scale (h1 40px, h2 36–38px, h3 28px), so a phone renders them at those minimums and everything looks oversized. These !important caps beat the inline font-size and re-scale headings for small screens in one place. Body copy (16–18px) is already fine, so it is left untouched. */ @media (max-width: 640px) { h1 { font-size: clamp(27px, 8vw, 40px) !important; line-height: 1.05 !important; } h2 { font-size: clamp(23px, 6.6vw, 34px) !important; line-height: 1.08 !important; } h3 { font-size: clamp(18px, 5vw, 24px) !important; line-height: 1.2 !important; } } /* ---- Mobile spacing + display numbers ---------------------------------- Section padding and a few display figures are hardcoded inline at desktop scale, so phones inherit 140–150px section padding and 40–56px numbers. These rules match the inline styles by substring and rescale them for small screens — no markup edits, desktop untouched (all inside the query). Only padding-top / padding-bottom are overridden, so the inline horizontal 24px padding is preserved. */ @media (max-width: 640px) { /* NOTE: the DC runtime re-serializes inline styles after hydration, adding a space after each colon (padding:150px -> "padding: 150px"). The spacing between VALUE tokens stays single in both states, so padding rules match on the value pair (no "padding:" prefix) to work pre- and post-hydration, and font-size rules list both the spaced and unspaced forms. */ /* Hero sections only need to clear the fixed nav, not a 150px gap. */ [style*="150px 24px"] { padding-top: 96px !important; padding-left: 16px !important; padding-right: 16px !important; } /* Tall content sections and band inner containers. */ [style*="140px 24px 120px"], [style*="130px 24px 120px"], [style*="110px 24px 120px"], [style*="120px 24px 130px"], [style*="140px 24px 110px"], [style*="130px 24px 100px"], [style*="120px 24px;"] { padding-top: 72px !important; padding-bottom: 60px !important; padding-left: 16px !important; padding-right: 16px !important; } /* Medium content sections (96px top/bottom) waste a lot of vertical space on a phone once their two columns stack. */ [style*="96px 24px"] { padding-top: 56px !important; padding-bottom: 56px !important; } /* Two-column grids leave a big vertical gap once they stack. */ [style*="gap: 64px"], [style*="gap:64px"] { gap: 32px !important; } [style*="gap: 48px"], [style*="gap:48px"], [style*="gap: 40px"], [style*="gap:40px"] { gap: 28px !important; } /* Oversized display figures: marquee count, pricing, Warren stats. */ [style*="font-size: 56px"], [style*="font-size:56px"] { font-size: 34px !important; } [style*="font-size: 44px"], [style*="font-size:44px"] { font-size: 32px !important; } [style*="font-size: 40px"], [style*="font-size:40px"] { font-size: 30px !important; } /* Footer: the brand column spans the full width and the three link columns pair up, rather than every column becoming its own very tall row. */ [data-kd-footer] { padding: 36px 20px 22px !important; } [data-kd-footer-top] { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px !important; } [data-kd-footer-top] > :first-child { grid-column: 1 / -1 !important; } /* Warren stats (100+ / $3.0M+ / …). The desktop row gives each cell a right divider and asymmetric left padding; stacked on a phone that misaligns the numbers and leaves stray vertical lines. Rebuild it as a clean single column with dividers between rows. */ [data-kd-stats] { grid-template-columns: 1fr !important; } [data-kd-stats] > * { padding: 18px 0 !important; border-right: 0 !important; border-top: 1px solid var(--kd-band-hair) !important; } [data-kd-stats] > *:first-child { border-top: 0 !important; } /* Center hero action buttons on phones (the row is a flex that otherwise left-aligns inside a centered hero). The primary CTA takes the full first row so the two secondary buttons sit together on the next row. */ [data-kd-actions] { width: 100% !important; justify-content: center !important; } [data-kd-actions] > :first-child { flex-basis: 100% !important; justify-content: center !important; } /* The two secondary buttons split the second row evenly. */ [data-kd-actions] > :not(:first-child) { flex: 1 1 0 !important; min-width: 0 !important; justify-content: center !important; } } @media (max-width: 600px) { [data-kd-pipe] { padding-bottom: 14px; } [data-kd-pipe] [data-kd-lbl] { font-size: 9.5px !important; letter-spacing: 0 !important; } [data-kd-pipe] > div:nth-child(even) [data-kd-lbl] { transform: translateY(14px); } [data-kd-log] div { white-space: normal !important; overflow: visible !important; } } /* Mobile menu (injected by assets/js/mobile-nav.js on ) */ [data-kd-burger] { position: fixed !important; top: 15px !important; right: 24px !important; z-index: 31 !important; flex: none; align-items: center !important; justify-content: center !important; flex-direction: column !important; gap: 5px !important; width: 36px !important; height: 36px !important; margin: 0 !important; padding: 0 !important; pointer-events: auto !important; border: 0px solid var(--kd-hair) !important; border-radius: 999px !important; background: transparent !important; color: var(--kd-text) !important; cursor: pointer !important; -webkit-tap-highlight-color: transparent; touch-action: manipulation; transition: border-color 0.2s, background 0.2s; box-sizing: border-box !important; } [data-kd-burger]:hover, [data-kd-burger][aria-expanded="true"] { border-color: var(--kd-text) !important; background: var(--kd-page2) !important; } [data-kd-burger] span { display: block !important; width: 18px !important; height: 2px !important; border-radius: 1px !important; background: currentColor !important; margin: 0 !important; padding: 0 !important; border: none !important; transition: transform 0.22s ease, opacity 0.18s ease; } [data-kd-burger][aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } [data-kd-burger][aria-expanded="true"] span:nth-child(2) { opacity: 0; transform: scaleX(0); } [data-kd-burger][aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } [data-kd-drawer] { position: fixed; inset: 0; z-index: 30; display: none; flex-direction: column; gap: 4px; padding: 96px 20px 28px; background: var(--kd-page); color: var(--kd-text); overflow-y: auto; opacity: 0; transition: opacity 0.2s ease; } [data-kd-drawer][data-open] { opacity: 1; } [data-kd-drawer] a { padding: 15px 4px; border-bottom: 1px solid var(--kd-hair); color: var(--kd-text); font-family: "Geist", system-ui, sans-serif; font-size: 19px; font-weight: 500; letter-spacing: -0.01em; text-decoration: none; } [data-kd-drawer] a[data-kd-cta] { margin-top: 22px; border-bottom: 0; border-radius: 10px; background: #46fea7; color: #0b0e0d; font-size: 16px; text-align: center; } [data-kd-drawer] button { margin-top: 14px; padding: 13px 4px; border: 1px solid var(--kd-hair); border-radius: 10px; background: transparent; color: var(--kd-muted); font-family: "Geist", system-ui, sans-serif; font-size: 14px; cursor: pointer; } /* Must come after base [data-kd-burger] rules (do not set display:none there). */ @media (min-width: 861px) { [data-kd-burger] { display: none !important; } [data-kd-nav] { overflow: visible !important; } } /* Guides menu in the pill nav. Hidden under 860px; those links live in the mobile drawer. */ [data-kd-guides] { position: relative; } [data-kd-guides] > summary { list-style: none; cursor: pointer; padding: 8px 12px; border-radius: 999px; font-size: 13.5px; font-weight: 500; color: var(--kd-text); font-family: "Geist", system-ui, sans-serif; } [data-kd-guides] > summary::-webkit-details-marker { display: none; } [data-kd-guides] > summary::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: 6px; vertical-align: 2px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; opacity: 0.7; } [data-kd-guides] > summary:hover { background: var(--kd-page2); } [data-kd-guides] > div { display: none; position: absolute; top: calc(100% + 14px); right: 0; width: 280px; max-height: min(70vh, 520px); overflow: auto; background: var(--kd-surface); border: 1px solid var(--kd-hair); border-radius: 16px; padding: 8px; box-shadow: 0 24px 50px -28px rgba(11, 14, 13, 0.45); z-index: 40; } [data-kd-guides][open] > div { display: flex; flex-direction: column; } [data-kd-guides] > div a { padding: 8px 10px; border-radius: 8px; font-size: 13.5px; line-height: 1.35; color: var(--kd-text); font-weight: 500; } [data-kd-guides] > div a:hover { background: var(--kd-page2); color: var(--kd-accent-text); } [data-kd-guides] > div span { padding: 10px 10px 4px; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--kd-muted); } @media (max-width: 860px) { [data-kd-nav] > details { display: none !important; } } /* Guides menu on the dark header used by the content pages. */ .nav-drop { position: relative; } .nav-drop > summary { list-style: none; cursor: pointer; padding: 8px 16px; border-radius: var(--radius, 10px); font-size: 0.9rem; font-weight: 500; color: var(--text-3, #8a968f); white-space: nowrap; } .nav-drop > summary::-webkit-details-marker { display: none; } .nav-drop > summary::after { content: ""; display: inline-block; width: 0; height: 0; margin-left: 6px; vertical-align: 2px; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 5px solid currentColor; } .nav-drop > summary:hover { color: var(--text, #f4f7f5); background: rgba(255, 255, 255, 0.045); } .nav-drop-panel { display: none; position: absolute; top: calc(100% + 12px); left: 0; width: 280px; max-height: min(70vh, 520px); overflow: auto; padding: 8px; border-radius: 14px; background: #141a17; border: 1px solid #232b27; box-shadow: 0 24px 50px -24px rgba(0, 0, 0, 0.55); z-index: 40; } .nav-drop[open] .nav-drop-panel { display: flex; flex-direction: column; } .nav-drop-panel a { padding: 8px 10px !important; border-radius: 8px; color: #f4f7f5 !important; font-size: 13.5px !important; background: transparent !important; } .nav-drop-panel a:hover { background: rgba(255, 255, 255, 0.06) !important; color: #46fea7 !important; } .nav-drop-panel a::after { display: none !important; } .nav-drop-panel span { padding: 10px 10px 4px; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: #8a968f; } @media (max-width: 1080px) { .nav-drop { display: none; } } /* Visible breadcrumbs sit in the hero's top padding, under the fixed nav. */ [data-kd-crumbs], .kd-crumbs { position: absolute; left: 0; right: 0; top: 86px; z-index: 4; } [data-kd-crumbs] ol, .kd-crumbs ol { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 0; max-width: 1200px; margin: 0 auto; padding: 0 24px; font-family: "JetBrains Mono", monospace; font-size: 12px; letter-spacing: 0.04em; color: var(--kd-muted, var(--text-3, #5b655f)); } [data-kd-crumbs] li, .kd-crumbs li { display: flex; align-items: center; } [data-kd-crumbs] li:not(:last-child)::after, .kd-crumbs li:not(:last-child)::after { content: "/"; margin: 0 8px; color: var(--kd-hair2, var(--text-4, #c4cbc6)); } [data-kd-crumbs] a, .kd-crumbs a { color: inherit; text-decoration: none; } [data-kd-crumbs] a:hover, .kd-crumbs a:hover { color: var(--kd-text, var(--text, #0b0e0d)); } [data-kd-crumbs] [aria-current="page"], .kd-crumbs [aria-current="page"] { color: var(--kd-text, var(--text, #0b0e0d)); } body.has-annc .kd-crumbs { top: calc(86px + var(--annc-h, 40px)); } [data-kd-contact-social] a { width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--kd-hair); display: inline-flex; align-items: center; justify-content: center; color: var(--kd-muted); } [data-kd-contact-social] a:hover { color: var(--kd-text); border-color: var(--kd-text); } .section-head.is-wide { max-width: none; } @media (max-width: 640px) { [data-kd-crumbs], .kd-crumbs { top: 76px; } body.has-annc .kd-crumbs { top: calc(76px + var(--annc-h, 40px)); } } #per-tenant-runtime, #agent-identity, #guardrail-policy, #mcp-server, #operating-layer, #credential-vault, #dry-run, #opentelemetry-trace, #warren, #nash, #artpark { scroll-margin-top: 110px; } .mnav a.mnav-sub { font-size: 1.05rem; padding: 10px 4px 10px 8px; color: var(--text-3, #8a968f); } [data-kd-drawer] a[data-kd-guide] { font-size: 16px; padding: 11px 4px 11px 14px; color: var(--kd-muted); }