/* Case study title: normal casing (parent .banner-subtitle uses uppercase) */ .banner-subtitle-lead { text-transform: none; } /* * Hero case-study pill — “Read now” link (root commit a103848 baseline). * Marker class keeps this treatment explicit if `.banner-subtitle-read-link` is reused elsewhere. */ .banner-subtitle-read-link.banner-subtitle-read-link--a103848 { display: inline-flex; align-items: center; gap: 0.35em; margin-left: 0.2em; /* Webflow sets `a { font-family, font-size, … }` at min-width:1920px; inherit keeps pill typography consistent */ font-family: inherit; font-size: inherit; line-height: inherit; font-weight: inherit; letter-spacing: inherit; color: inherit; text-decoration: none; text-transform: none; border-bottom: 1px solid currentColor; padding-bottom: 0.05em; transition: color 0.2s ease, border-color 0.2s ease; } .banner-subtitle-read-link.banner-subtitle-read-link--a103848:hover { color: var(--primary-dark); border-bottom-color: var(--primary-dark); } /* Inline chevron SVG (hero pill, testimonial CTA, stream links, etc.) — unchanged since a103848 */ .banner-subtitle-read-arrow { display: block; flex-shrink: 0; transform: translateY(0.06em); } /* Webflow IX preload targets this data-w-id on in exports. In the Next app we keep the same attribute for IX, but must not set body to opacity:0 or the entire page disappears until w-mod-ix (see webflow-ix-preload-home.css). */ @media screen and (min-width: 992px) { html.w-mod-js:not(.w-mod-ix) body.body[data-w-id="6583dc7e043fa8662865e329"] { opacity: 1 !important; } } /* Navbar: vertical dashed guides + bottom dashed border — avoid a 1px hairline gap */ .navbar > .container > .section-line.left, .navbar > .container > .section-line.right { top: 0; bottom: -1px; height: auto; } /* Homepage grid rails: connect nav side lines to hero, align inner column divider. - Outer: bridge navbar rails slightly past the dashed border; banner rails run full .container.banner height (override Webflow top: 79px). - Inner: top-align columns so the image column’s dashed border matches the copy column (not centered / floating above). */ .page-wrapper--home .navbar { overflow: visible; } .page-wrapper--home .navbar > .container > .section-line.left, .page-wrapper--home .navbar > .container > .section-line.right { bottom: -18px; z-index: 0; } .page-wrapper--home .section.banner .container.banner > .section-line.left, .page-wrapper--home .section.banner .container.banner > .section-line.right { top: 0; bottom: 0; height: auto; z-index: 0; } .page-wrapper--home .section.banner .banner-content { position: relative; z-index: 1; } .page-wrapper--home .section.banner .banner-top-content { align-items: flex-start; } /* Blank divider art: reduce washout and add a touch of contrast on home. */ .page-wrapper--home .blank-div { background-color: #eae5e3; background-image: none; } .page-wrapper--home .blank-div::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("../images/30noise.png"); background-position: 0 0; background-repeat: repeat; background-size: 96px 96px; mix-blend-mode: multiply; opacity: 0.42; } .page-wrapper--home .blank-div::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: url("../images/About-Line-Pattern.svg"); background-position: 50%; background-repeat: no-repeat; background-size: cover; mix-blend-mode: multiply; opacity: 0.58; } /* Homepage black sections: add subtle texture like other dark panels */ .page-wrapper--home .section.core-features, .page-wrapper--home .section.home-integrations { background-image: url("../images/30noise.png"); background-repeat: repeat; background-size: 96px 96px; background-position: 0 0; } .page-wrapper--home .section.core-features .core-features-wrapper { background-color: transparent; } .page-wrapper--home .section.core-features .subtile-single .subtile-icon.home-mono-strap-emoji { max-width: none; max-height: none; width: 1em; height: 1em; display: inline-flex; align-items: center; justify-content: center; font-size: 15px; line-height: 1; } .page-wrapper--home .section.core-features .core-features-section-cta { display: flex; justify-content: center; margin-top: 48px; } @media screen and (max-width: 991px) { .page-wrapper--home .section.core-features .core-features-section-cta { margin-top: 36px; } } /* Grounded-data card: remove vertical strip gradient behind the bar stack */ .page-wrapper--home .section.core-features .core-features-bar { background-image: none; } /* Grounded-data card: solid lighter brand orange (Webflow default is primary → primary-dark gradient) */ .page-wrapper--home .section.core-features .core-features-bar-circle { background-image: none; background-color: var(--primary, #f47540); } /* Permission-aware card: inner ring behind user glyph */ .page-wrapper--home .section.core-features .security-circle-single { background-image: none; background-color: #f47541; } /* Permission-aware card Lottie glow (see documents/Untitled-file.json fr for speed) */ .page-wrapper--home .section.core-features .security-jason { opacity: 0.2; } .page-wrapper--home .section.core-features .security-shape { opacity: 0.2; } /* User-group icon: dedicated square frame so flex + img scaling never skews the glyph */ .page-wrapper--home .section.core-features .security-icon-wrap { position: relative; z-index: 2; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: min(46px, 88%); height: min(46px, 88%); max-width: 46px; max-height: 46px; flex-shrink: 0; isolation: isolate; } .page-wrapper--home .section.core-features .security-icon-wrap .security-icon { display: block; width: 100%; height: 100%; max-width: 100%; max-height: 100%; object-fit: contain; } @media screen and (max-width: 479px) { .page-wrapper--home .section.core-features .security-icon-wrap { width: min(28px, 85%); height: min(28px, 85%); max-width: 28px; max-height: 28px; } } /* Bar stack: IX2 animates each img’s opacity up to 1 — scale the group so effective max is 0.2 */ .page-wrapper--home .section.core-features .core-features-bar-element-wrap { opacity: 0.2; } /* Multilingual world image: 0.2 opacity (overrides Webflow inline opacity for IX) */ .page-wrapper--home .section.core-features .core-features-card-world-image { opacity: 0.2 !important; } /* Core card hero images: desktop stays 0.2; tablet/mobile slightly higher opacity only (no filter) */ @media screen and (max-width: 991px) { .page-wrapper--home .section.core-features .core-features-card-world-image, .page-wrapper--home .section.core-features .analytics-image, .page-wrapper--home .section.core-features .security-shape { opacity: 0.6 !important; } } @media screen and (max-width: 767px) { .page-wrapper--home .section.core-features .core-features-card-world-image { opacity: 0.75 !important; } .page-wrapper--home .section.core-features .analytics-image { opacity: 1 !important; } .page-wrapper--home .section.core-features .security-shape { opacity: 0.95 !important; } } /* Core feature cards: 50% near-black over transparent (text stays opaque) */ .page-wrapper--home .section.core-features .core-features-card { background-color: color-mix(in srgb, var(--near-black) 50%, transparent); } /* Model-agnostic card: overlapping provider marks */ .page-wrapper--home .core-features-card.one .core-features-flag-image { object-fit: contain; width: 42px; height: 42px; } @keyframes core-features-flag-mexican-wave { 0%, 8%, 100% { transform: translate3d(0, 0, 0) scale(1); } 4% { transform: translate3d(0, -12px, 0) scale(1.08); } } /* Multilingual: staggered “wave” on each provider circle, repeats every ~4s */ .page-wrapper--home .section.core-features .core-features-flag-wrapper > .core-features-flag { animation: core-features-flag-mexican-wave 4s cubic-bezier(0.45, 0, 0.55, 1) infinite; transform-origin: center 80%; will-change: transform; backface-visibility: hidden; } .page-wrapper--home .section.core-features .core-features-flag-wrapper > .core-features-flag:nth-child(1) { animation-delay: 0s; } .page-wrapper--home .section.core-features .core-features-flag-wrapper > .core-features-flag:nth-child(2) { animation-delay: 0.14s; } .page-wrapper--home .section.core-features .core-features-flag-wrapper > .core-features-flag:nth-child(3) { animation-delay: 0.28s; } .page-wrapper--home .section.core-features .core-features-flag-wrapper > .core-features-flag:nth-child(4) { animation-delay: 0.42s; } @media (prefers-reduced-motion: reduce) { .page-wrapper--home .section.core-features .core-features-flag-wrapper > .core-features-flag { animation: none !important; will-change: auto; } } /* Homepage CTA + footer: carry the same subtle dark texture */ .page-wrapper--home .cta-footer, .page-wrapper--home .cta-footer .section.cta, .page-wrapper--home .cta-footer .section.footer { background-color: var(--near-black); background-image: url("../images/30noise.png"); background-repeat: repeat; background-size: 96px 96px; background-position: 0 0; } /* Case study pill: Webflow uses overflow:hidden for IX; ensure it stays visible if IX is late */ .page-wrapper--home .banner-subtitle-wrapper { overflow: visible !important; } .page-wrapper--home .banner-subtitle-single { opacity: 1 !important; transform: none !important; } @media screen and (min-width: 992px) { .page-wrapper--home .home-hero-stack { position: static; display: block; height: auto; padding-bottom: 0; } .page-wrapper--home .home-hero-stack > .section.banner { display: block; flex: none; padding-bottom: 0; margin-bottom: 0; } .page-wrapper--home .home-hero-stack > .section.banner > .banner-vh { width: 100%; height: 100% !important; } .page-wrapper--home .home-hero-stack > .section.banner .banner-sticky { height: 100%; } .page-wrapper--home .home-hero-stack > .section.banner .container.banner { height: 100%; box-sizing: border-box; padding-top: clamp(12px, 1.8vw, 28px); } .page-wrapper--home .section.banner .banner-content, .page-wrapper--home .section.banner .banner-top-content { height: auto; } .page-wrapper--home .section.banner .banner-image-wrapper { align-self: stretch; min-height: 0; margin-top: 5px; padding-bottom: 70px; justify-content: flex-start; } .page-wrapper--home .section.banner .banner-image-content { margin-top: 70px; } .page-wrapper--home .home-hero-stack > .section.sponsors { margin-top: 0; margin-bottom: 0; } .page-wrapper--home .section.banner .banner-content { padding-bottom: 0; } .page-wrapper--home .banner-subtitle-wrapper { margin-top: 84px; } .page-wrapper--home .banner-button-wrapper { margin-bottom: 0; } .page-wrapper--home [data-w-id="c9cc0609-d6ab-6b2d-3042-91503a55efd9"] { opacity: 1 !important; transform: none !important; } } /* Homepage only: .banner-vh--static is set on app/page.tsx after removing tab strip + image block */ .banner-vh.banner-vh--static { height: auto !important; } .banner-vh.banner-vh--static .banner-sticky { position: relative !important; top: auto !important; } /* * Below 992px Webflow expects a tall `.banner-vh` + sticky offset for the parallax hero. * Homepage uses `.banner-vh--static` (height auto, non-sticky): keep copy column-centered * (`align-items: center`) without full-viewport flex centering — that plus Webflow’s * `.section.banner` / `.banner-typography` padding read as excessive top + bottom space. */ @media screen and (max-width: 991px) { .page-wrapper--home .home-hero-stack > .section.banner { box-sizing: border-box; display: flex; flex-direction: column; min-height: 0; /* Tighter than Webflow 75px; still clears fixed navbar */ padding-top: clamp(42px, 8vw, 52px); padding-bottom: clamp(6px, 1.5vw, 12px); } .page-wrapper--home .home-hero-stack > .section.banner > .banner-vh.banner-vh--static { flex: 0 1 auto; display: flex; flex-direction: column; min-height: 0; } .page-wrapper--home .home-hero-stack > .section.banner .banner-sticky { flex: 0 1 auto; display: flex; flex-direction: column; min-height: 0; } .page-wrapper--home .home-hero-stack > .section.banner .container.banner { flex: 0 1 auto; display: flex; flex-direction: column; justify-content: flex-start; box-sizing: border-box; padding-top: clamp(8px, 2.4vw, 20px); padding-bottom: 0; } .page-wrapper--home .section.banner .banner-top-content { align-items: center; width: 100%; } .page-wrapper--home .section.banner .banner-content { width: 100%; box-sizing: border-box; padding-top: clamp(10px, 2.6vw, 22px); padding-bottom: clamp(8px, 1.8vw, 16px); } .page-wrapper--home .section.banner .banner-typography { padding-bottom: clamp(10px, 2.5vw, 18px); } /* Hero case-study pill — compact type on narrow viewports */ .page-wrapper--home .section.banner .banner-subtitle-single .banner-subtitle-button, .page-wrapper--home .section.banner .banner-subtitle-single .banner-subtitle, .page-wrapper--home .section.banner .banner-subtitle-read-link { font-size: 0.6875rem; line-height: 1.42; } .page-wrapper--home .section.banner .banner-description { font-size: 1rem; line-height: 1.55; } } @media screen and (max-width: 767px) { /* Extra air under the fixed nav on narrow viewports (content wrapper only; rails stay aligned). */ .page-wrapper--home .section.banner .banner-content { padding-top: 60px; padding-bottom: clamp(10px, 3vw, 18px); } .page-wrapper--home .section.banner .banner-typography { max-width: 404px; } /* Space between case-study pill and main headline (Webflow uses 10px here) */ .page-wrapper--home .section.banner .banner-subtitle-wrapper { margin-bottom: 25px; } } /* Square “full stop”: hide the real period (kept for screen readers) and paint a black box */ .banner-title .banner-title-fullstop { display: inline-block; position: relative; width: 0.26em; height: 0.26em; margin-left: 0.06em; vertical-align: 0.06em; font-size: 0; line-height: 0; color: transparent; -webkit-text-fill-color: transparent; } .banner-title .banner-title-fullstop::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; height: 100%; background-color: #000; } /* Hero highlight (.banner-title-span): Webflow uses a "gradient as text fill" trick: - background-image draws the gradient on the element - background-clip: text (+ -webkit-) masks it to the letter shapes - -webkit-text-fill-color: transparent lets that clipped background show through Default in fabric-209f0a.webflow.css is linear-gradient(125deg, #f9c20d, #ff340b) so the left/start of the headline span reads yellow first, then orange-red. Override below: start at theme orange (--primary) and move toward --primary-dark. */ .banner-title-span { background-image: linear-gradient(125deg, var(--primary), var(--primary-dark)); font-style: italic; } /* Hero h1: slightly taller line-height when the title wraps (enterprise-style rhythm) */ .section.banner .banner-title { line-height: 1.12; } /* Home hero headline: step up from Webflow’s tiny phone size without going as large as prior clamp */ @media screen and (max-width: 767px) { .page-wrapper--home .section.banner .banner-title { font-size: clamp(2.35rem, 1.95rem + 3.6vw, 3.75rem); } } /* Sponsors fade masks: solid base #eae5e3 fading to transparent (no noise layer) */ .sponsors-ticker-shape.left { background-image: linear-gradient( 90deg, rgba(234, 229, 227, 0.98), rgba(234, 229, 227, 0) ) !important; background-repeat: no-repeat; } .sponsors-ticker-shape.right { background-image: linear-gradient( 90deg, rgba(234, 229, 227, 0), rgba(234, 229, 227, 0.98) ) !important; background-repeat: no-repeat; } /* Homepage sponsor logos: grayscale + tone to read like template gray marks (~#868686) */ .page-wrapper--home .section.sponsors .sponsor-image { height: 28px; width: auto; max-width: 140px; object-fit: contain; object-position: 50% 50%; filter: grayscale(1) brightness(0.42) contrast(1.08); } @media screen and (max-width: 991px) { .page-wrapper--home .section.sponsors .sponsor-image { height: 26px; max-width: 118px; } } @media screen and (max-width: 767px) { /* SQL stack: a bit more air above the title, between title and logos, and below the ticker */ .page-wrapper--home .section.sponsors .sponsors-wrapper { padding-top: clamp(18px, 4.2vw, 28px); padding-bottom: calc(15px + clamp(20px, 4.5vw, 32px)); row-gap: clamp(14px, 3.2vw, 22px); } .page-wrapper--home .section.sponsors .sponsors-title-wrapper { padding-top: 0; padding-bottom: 0; min-height: 0; display: block; text-align: center; box-sizing: border-box; } .page-wrapper--home .section.sponsors .sponsor-image { height: 30px; max-width: 132px; } } /* Homepage: Fabric-styled strap below sponsors, inside grid rails */ .page-wrapper--home .section.home-mono-strap { position: relative; background-color: transparent; /* Vertical spacing lives on .home-mono-strap-inner so rails span full section height */ padding-top: 0; padding-bottom: 0; border-bottom: 1px dashed rgba(0, 0, 0, 0.1); overflow: visible; } .page-wrapper--home .section.home-mono-strap .container { position: relative; } /* Fill only the center column area; keep outer gutters transparent */ .page-wrapper--home .section.home-mono-strap .container::before { content: ""; position: absolute; inset: 0 15px; z-index: 0; pointer-events: none; /* Same 30noise as body — full tile, no wash; multiply makes grain read clearly on #eae5e3 */ background-color: #eae5e3; background-image: url("../images/30noise.png"); background-position: 0 0; background-size: auto; background-repeat: repeat; background-blend-mode: multiply; } .page-wrapper--home .home-mono-strap-inner { position: relative; z-index: 1; text-align: center; max-width: 62rem; margin-left: auto; margin-right: auto; padding-top: clamp(2.5rem, 5vw, 4.25rem); padding-bottom: clamp(2.5rem, 5vw, 4.25rem); padding-left: clamp(12px, 2vw, 24px); padding-right: clamp(12px, 2vw, 24px); } .page-wrapper--home .home-mono-strap-subtile { margin-bottom: 1rem; display: inline-block; } .page-wrapper--home .home-mono-strap-subtile .subtile { text-transform: uppercase; } .page-wrapper--home .home-mono-strap-subtile .home-mono-strap-emoji { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; max-width: none; max-height: none; width: 1.1em; height: 1.1em; font-size: 15px; line-height: 1; } /* Mono strap: same reveal pattern as About (overflow-hidden + slide up + fade), scroll-triggered */ .page-wrapper--home .section.home-mono-strap .home-mono-strap-reveal { opacity: 0; transform: translate3d(0, 100%, 0); transition: opacity 0.9s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.9s cubic-bezier(0.215, 0.61, 0.355, 1); will-change: opacity, transform; } .page-wrapper--home .section.home-mono-strap .home-mono-strap-reveal--title { width: 100%; } .page-wrapper--home .section.home-mono-strap.home-mono-strap--in-view .home-mono-strap-reveal--tag { opacity: 1; transform: translate3d(0, 0, 0); transition-delay: 0s; } .page-wrapper--home .section.home-mono-strap.home-mono-strap--in-view .home-mono-strap-reveal--title { opacity: 1; transform: translate3d(0, 0, 0); transition-delay: 0.22s; } @media (prefers-reduced-motion: reduce) { .page-wrapper--home .section.home-mono-strap .home-mono-strap-reveal { opacity: 1 !important; transform: none !important; transition: none !important; transition-delay: 0s !important; } } .page-wrapper--home .home-mono-strap-title { margin: 0; font-size: clamp(2rem, 4.5vw, 3.625rem); line-height: 1.05; letter-spacing: -0.04em; } /* Keep rail circles centered on the actual dashed rail positions */ .page-wrapper--home .section.sponsors > .container > .section-circle.bottom-left { left: 10px; } .page-wrapper--home .section.sponsors > .container > .section-circle.bottom-right { right: 10px; } /* Rails: stretch full container; overlap seams so lines read continuous with adjacent sections */ .page-wrapper--home .section.home-mono-strap > .container > .section-line.left, .page-wrapper--home .section.home-mono-strap > .container > .section-line.right { top: -2px; bottom: -2px; height: auto; z-index: 2; } .page-wrapper--home .section.sponsors > .container > .section-line.left, .page-wrapper--home .section.sponsors > .container > .section-line.right { bottom: -2px; height: auto; } /* General sibling: home-agent-stream (or any block) may sit between mono strap and testimonial */ .page-wrapper--home .section.home-mono-strap ~ .section.testimonial > .container > .section-line.left, .page-wrapper--home .section.home-mono-strap ~ .section.testimonial > .container > .section-line.right { top: -2px; height: auto; } @media screen and (max-width: 767px) { .page-wrapper--home .section.home-mono-strap .container::before { inset: 0 10px; } .page-wrapper--home .section.sponsors > .container > .section-circle.bottom-left { left: 5px; } .page-wrapper--home .section.sponsors > .container > .section-circle.bottom-right { right: 5px; } } /* “Work”: ~7% smaller than the headline so it doesn’t dominate the lead-in */ .banner-title-span.banner-title-work { font-size: 0.93em; text-decoration: underline; text-decoration-color: var(--primary-dark); text-decoration-thickness: 0.045em; text-underline-offset: 0.16em; text-decoration-skip-ink: auto; } /* Let the insight card hang past the photo edge without clipping */ .banner-image-wrapper, .banner-image-content { overflow: visible; } /* Hero image: floating “SQL agent” insight card (bottom-left overlay) */ .hero-sql-insight { position: absolute; left: -38px; bottom: -2px; z-index: 11; max-width: min(288px, calc(100% - 20px)); } /* Panel (glass background) appears shortly after the hero photo reads as “in” */ @keyframes hero-sql-panel-in { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } } @keyframes hero-sql-stagger { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .hero-sql-insight-inner { padding: 14px 16px 11px; border-radius: 14px; border: 1px solid rgba(0, 0, 0, 0.08); background: rgba(255, 255, 255, 0.94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.7) inset, 0 20px 48px rgba(15, 15, 15, 0.14); transform-origin: left bottom; opacity: 0; animation: hero-sql-panel-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.48s forwards; } .hero-sql-insight-kicker, .hero-sql-insight-question, .hero-sql-insight-answer, .hero-sql-insight-chart, .hero-sql-insight-foot { opacity: 0; animation: hero-sql-stagger 0.45s cubic-bezier(0.22, 1, 0.36, 1) forwards; } .hero-sql-insight-kicker { animation-delay: 0.86s; } .hero-sql-insight-question { animation-delay: 1s; } .hero-sql-insight-answer { animation-delay: 1.12s; } .hero-sql-insight-chart { animation-delay: 1.24s; } .hero-sql-insight-foot { animation-delay: 1.36s; } @media (prefers-reduced-motion: reduce) { .hero-sql-insight-inner, .hero-sql-insight-kicker, .hero-sql-insight-question, .hero-sql-insight-answer, .hero-sql-insight-chart, .hero-sql-insight-foot { animation: none; opacity: 1; transform: none; } .hero-sql-insight-spark-line { animation: none; stroke-dasharray: none; stroke-dashoffset: 0; } } .hero-sql-insight-kicker { font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--neutral-600, #585858); margin-bottom: 7px; } .hero-sql-insight-question { margin: 0 0 10px; font-family: var(--_font-family---inter-tight, "Inter Tight", sans-serif); font-size: 13px; line-height: 1.45; letter-spacing: -0.02em; color: var(--title-color, #222); font-weight: 500; } .hero-sql-insight-answer { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35em 0.55em; margin-bottom: 8px; } .hero-sql-insight-metric { font-family: var(--_font-family---funnel-display, "Funnel Display", sans-serif); font-size: 1.35rem; font-weight: 600; letter-spacing: -0.03em; color: var(--title-color, #222); } .hero-sql-insight-delta { font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 13px; font-weight: 600; color: #b42318; } .hero-sql-insight-vs { font-family: var(--_font-family---inter-tight, "Inter Tight", sans-serif); font-size: 11px; color: var(--neutral-600, #585858); } .hero-sql-insight-chart { margin: 2px -2px 7px; } .hero-sql-insight-spark { display: block; width: 100%; height: auto; } /* Spark stroke “draws” left → right after the chart block fades in */ @keyframes hero-sql-spark-draw { to { stroke-dashoffset: 0; } } .hero-sql-insight-spark-line { /* Path length ≈ 236 SVG units; pad so small path edits still fully reveal */ stroke-dasharray: 320; stroke-dashoffset: 320; animation: hero-sql-spark-draw 1.95s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: 1.32s; } .hero-sql-insight-foot { font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(0, 0, 0, 0.42); } /* Home testimonial: single quote (no bottom tab thumbnails) */ .page-wrapper--home .section.testimonial > .container.section-padding--reduced { padding-top: 45px; padding-bottom: 45px; } /* Mirror the top dashed divider with a matching bottom divider on home testimonial. */ .page-wrapper--home .section.testimonial .testimonial-content { border-bottom: 1px dashed var(--black-stock-color, rgba(0, 0, 0, 0.1)); } @media screen and (max-width: 991px) { .page-wrapper--home .section.testimonial > .container.section-padding--reduced { padding-top: 45px; padding-bottom: 45px; } } .testimonial-single { display: flex; flex-flow: column; min-height: 440px; } @media screen and (min-width: 1280px) { .testimonial-single { min-height: 451px; } } @media screen and (max-width: 991px) { .testimonial-single { min-height: auto; } } /* Thomas testimonial: Premier mark as solid black */ .page-wrapper--home .testimonial-details-logo--premier { filter: brightness(0) saturate(100%); object-fit: contain; } /* Single-column testimonial (Webflow: .testimonial-wrapper → 1fr at ≤767px): shrink headshot */ @media screen and (max-width: 767px) { .page-wrapper--home .section.testimonial .testimonial-image-wrapper { justify-self: start; /* Match .testimonial-typography horizontal padding (Webflow: 20px 16px at ≤991px) */ margin-left: 16px; width: min(168px, 42vw); max-width: 100%; aspect-ratio: 1; border-radius: 14px; overflow: hidden; } .page-wrapper--home .section.testimonial .testimonial-image { display: block; min-height: 0; border-radius: inherit; } } /* Case study CTA under results metrics (matches hero “Read now” treatment) */ .page-wrapper--home .testimonial-case-study-wrap { margin-top: 18px; } .page-wrapper--home .testimonial-case-study-link { display: inline-flex; align-items: center; gap: 0.35em; font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 11px; letter-spacing: var(--_letter-spacing---headline, 0.06em); text-transform: uppercase; color: var(--title-color); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 0.12em; transition: color 0.2s ease, border-color 0.2s ease; } .page-wrapper--home .testimonial-case-study-link:hover { color: var(--primary-dark); border-bottom-color: var(--primary-dark); } /* -------------------------------------------------------------------------- */ /* Home: agent stream demo (mono strap → testimonial) */ /* -------------------------------------------------------------------------- */ .section.home-agent-stream { position: relative; background-color: transparent; border-bottom: 1px dashed rgba(0, 0, 0, 0.1); } /* Features nav deep links: section top (dashed divider edge) clears fixed navbar */ .page-wrapper--home .section.home-agent-stream[id] { scroll-margin-top: max(5.25rem, calc(env(safe-area-inset-top, 0px) + 4.5rem)); } /* Features mega dropdown: outer list is transparent — spacing/margin here, not a second white “shelf” */ .navbar .nav-features-dropdown .dropdown-column-wrapper { background-color: transparent; width: min(560px, calc(100vw - 32px)); max-width: min(560px, calc(100vw - 32px)); min-width: 0; /* Use padding (not margin) below the toggle so the pointer still hits this node while moving into the panel. margin-top created a dead zone where Webflow closed the dropdown before the list received hover. */ padding-top: 12px; margin-top: 0; /* Webflow’s global `.dropdown-column-wrapper { overflow: hidden }` clips margins; keep flyout gap visible */ overflow: visible; } .navbar .nav-features-dropdown .dropdown-toggle-arrow { transition: transform 0.2s ease; } .navbar .nav-features-dropdown.w--open .dropdown-toggle-arrow, .navbar .nav-features-dropdown:has(.dropdown-column-wrapper.w--open) .dropdown-toggle-arrow { transform: rotate(180deg); } .navbar .nav-features-dropdown .dropdown-pd.nav-features-mega { position: relative; padding: 20px 22px 22px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.08); background-color: #ffffff; box-sizing: border-box; overflow: hidden; box-shadow: 0 10px 36px rgba(0, 0, 0, 0.08); } .navbar .nav-features-mega::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; z-index: 0; background-image: url("../images/20noise.png"); background-repeat: repeat; background-size: 96px 96px; opacity: 0.28; mix-blend-mode: normal; } .navbar .nav-features-mega__header, .navbar .nav-features-mega__grid { position: relative; z-index: 1; } .navbar .nav-features-mega__header { margin: 0 0 18px; font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(0, 0, 0, 0.42); } .navbar .nav-features-mega__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 32px; } .navbar .nav-features-mega__card { position: relative; z-index: 0; display: flex; gap: 14px; align-items: flex-start; padding: 10px 12px; margin: 0 -4px; border-radius: 8px; border: 1px dashed transparent; text-decoration: none; color: var(--title-color, #1a1a1a); isolation: isolate; transition: border-color 0.15s ease; } .navbar .nav-features-mega__card:hover { border-color: rgba(244, 117, 64, 0.75); } /* Hover: high-transparency brand orange, noise on top (not the whole dropdown panel) */ .navbar .nav-features-mega__card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; background-color: rgba(244, 117, 64, 0.14); opacity: 0; transition: opacity 0.15s ease; } .navbar .nav-features-mega__card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 1; background-image: url("../images/20noise.png"); background-repeat: repeat; background-size: 96px 96px; opacity: 0; mix-blend-mode: multiply; transition: opacity 0.15s ease; } .navbar .nav-features-mega__card > .nav-features-mega__icon, .navbar .nav-features-mega__card > .nav-features-mega__text { position: relative; z-index: 2; } .navbar .nav-features-mega__card:hover::before { opacity: 1; } .navbar .nav-features-mega__card:hover::after { opacity: 0.5; } .navbar .nav-features-mega__card:focus-visible { outline: 2px solid rgba(244, 117, 64, 0.85); outline-offset: 2px; } .navbar .nav-features-mega__icon { flex-shrink: 0; margin-top: 1px; color: rgba(0, 0, 0, 0.72); } .navbar .nav-features-mega__icon svg { display: block; } .navbar .nav-features-mega__text { display: block; min-width: 0; } .navbar .nav-features-mega__title { display: block; margin: 0 0 5px; font-family: var(--_font-family---funnel-display, "Funnel Display", system-ui, sans-serif); font-size: 15px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; color: var(--title-color, #1a1a1a); } .navbar .nav-features-mega__desc { display: block; margin: 0; font-size: 13px; line-height: 1.45; color: rgba(0, 0, 0, 0.5); } @media screen and (max-width: 991px) { .navbar .nav-features-dropdown .dropdown-column-wrapper.w--open { width: 100%; max-width: 100%; } .navbar .nav-features-mega__grid { grid-template-columns: 1fr; gap: 18px; } .navbar .nav-features-dropdown .dropdown-pd.nav-features-mega { padding: 18px 16px 20px; } .nav-menu .menu-text-link.nav-feature-pillar-link { white-space: normal; } } /* Collapsed navbar (≤991): larger labels + ~48px touch rows for links, Platform toggle, and mega cards */ @media screen and (max-width: 991px) { .navbar .nav-menu.w-nav-menu { row-gap: 6px; } .navbar .nav-menu .nav-link.w-nav-link { display: flex; align-items: center; width: 100%; box-sizing: border-box; min-height: 48px; padding: 12px 12px 12px 12px; margin-bottom: 0; font-size: 1.125rem; line-height: 1.35; -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1); } .navbar .nav-menu .nav-link.w-nav-link.w--current { min-height: 48px; padding-left: 18px; background-position: 0 50%; } .navbar .nav-menu .menu-dropdown-wrapper { width: 100%; margin-bottom: 0; } .navbar .nav-menu .dropdown-toggle.w-dropdown-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 12px 12px; box-sizing: border-box; font-size: 1.125rem; line-height: 1.35; -webkit-tap-highlight-color: rgba(255, 255, 255, 0.1); } .navbar .nav-menu .dropdown-toggle-text-block { font-size: inherit; } .navbar .nav-menu .dropdown-toggle-arrow { font-size: 1rem; margin-left: 12px; } .navbar .nav-features-mega__card { padding: 16px 14px; min-height: 56px; margin: 0; align-items: center; } .navbar .nav-features-mega__title { font-size: 1.0625rem; } .navbar .nav-features-mega__desc { font-size: 0.9375rem; } .navbar .nav-features-mega__icon svg { width: 26px; height: 26px; } .navbar .menu-button.w-nav-button { min-width: 48px; min-height: 48px; padding: 10px; display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; } } @media screen and (max-width: 767px) { .navbar .nav-menu .nav-link.w-nav-link { font-size: 1.1875rem; min-height: 52px; padding-top: 14px; padding-bottom: 14px; } .navbar .nav-menu .nav-link.w-nav-link.w--current { min-height: 52px; } .navbar .nav-menu .dropdown-toggle.w-dropdown-toggle { font-size: 1.1875rem; min-height: 52px; padding-top: 14px; padding-bottom: 14px; } .navbar .nav-features-mega__card { min-height: 60px; padding: 18px 16px; } .navbar .nav-features-mega__title { font-size: 1.125rem; } } /* Platform megamenu: never show “current page” / Webflow selected styling on pillar links */ .menu-text-link.nav-feature-pillar-link.w--current, .menu-text-link.nav-feature-pillar-link[aria-current="page"] { background-image: none !important; padding-left: 0 !important; padding-right: 0 !important; } .navbar .nav-features-mega__card.nav-feature-pillar-link.w--current:not(:hover), .navbar .nav-features-mega__card.nav-feature-pillar-link[aria-current="page"]:not(:hover) { border-color: transparent; color: var(--title-color, #1a1a1a); } .navbar .nav-features-mega__card.nav-feature-pillar-link.w--current:not(:hover)::before, .navbar .nav-features-mega__card.nav-feature-pillar-link[aria-current="page"]:not(:hover)::before, .navbar .nav-features-mega__card.nav-feature-pillar-link.w--current:not(:hover)::after, .navbar .nav-features-mega__card.nav-feature-pillar-link[aria-current="page"]:not(:hover)::after { opacity: 0 !important; } .navbar .nav-features-mega__card.nav-feature-pillar-link.w--current:not(:hover) .nav-features-mega__title, .navbar .nav-features-mega__card.nav-feature-pillar-link[aria-current="page"]:not(:hover) .nav-features-mega__title { color: var(--title-color, #1a1a1a); } .navbar .nav-features-mega__card.nav-feature-pillar-link.w--current:not(:hover) .nav-features-mega__desc, .navbar .nav-features-mega__card.nav-feature-pillar-link[aria-current="page"]:not(:hover) .nav-features-mega__desc { color: rgba(0, 0, 0, 0.5); } .navbar .nav-features-mega__card.nav-feature-pillar-link.w--current:not(:hover) .nav-features-mega__icon, .navbar .nav-features-mega__card.nav-feature-pillar-link[aria-current="page"]:not(:hover) .nav-features-mega__icon { color: rgba(0, 0, 0, 0.72); } .navbar .nav-features-mega__card.nav-feature-pillar-link:focus:not(:focus-visible) { outline: none; } .section.home-agent-stream.home-agent-stream--secondary { border-bottom: none; border-top: 1px dashed rgba(0, 0, 0, 0.1); } .section.home-agent-stream.home-agent-stream--tertiary { border-top: 1px dashed rgba(0, 0, 0, 0.1); } /* Match mono strap / sponsors: rails live inside .container (position: relative) */ .section.home-agent-stream > .container.section-padding { padding-top: clamp(2.75rem, 5vw, 4.5rem); padding-bottom: clamp(2.75rem, 5vw, 4.5rem); } .section.home-agent-stream > .container > .section-line.left, .section.home-agent-stream > .container > .section-line.right { top: -2px; bottom: -2px; height: auto; z-index: 2; } .section.home-agent-stream .agent-stream-layout { display: grid; gap: 1.75rem; align-items: start; /* Inset copy + chat from the vertical rails (container already has 15px) */ padding-left: clamp(10px, 2.2vw, 26px); padding-right: clamp(10px, 2.2vw, 26px); } /* Scroll reveal (HomeCustomAnimations adds .home-agent-stream--in-view) — mono-strap style */ .section.home-agent-stream .agent-stream-intro, .section.home-agent-stream .agent-stream-chat { opacity: 0; transform: translate3d(0, 100px, 0); transition: opacity 1s cubic-bezier(0.165, 0.84, 0.44, 1), transform 1s cubic-bezier(0.165, 0.84, 0.44, 1); will-change: opacity, transform; } .section.home-agent-stream.home-agent-stream--in-view .agent-stream-intro { opacity: 1; transform: translate3d(0, 0, 0); transition-delay: 0s; } .section.home-agent-stream.home-agent-stream--in-view .agent-stream-chat { opacity: 1; transform: translate3d(0, 0, 0); transition-delay: 0s; } @media (prefers-reduced-motion: reduce) { .section.home-agent-stream .agent-stream-intro, .section.home-agent-stream .agent-stream-chat { opacity: 1 !important; transform: none !important; transition: none !important; transition-delay: 0s !important; } } @media screen and (min-width: 992px) { .section.home-agent-stream .agent-stream-layout { grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(2rem, 4.5vw, 3.5rem); /* Vertically center copy block with the fixed-height chat panel */ align-items: center; } .section.home-agent-stream .agent-stream-layout.agent-stream-layout--reverse { grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); } .section.home-agent-stream .agent-stream-layout.agent-stream-layout--reverse .agent-stream-chat { order: 1; } .section.home-agent-stream .agent-stream-layout.agent-stream-layout--reverse .agent-stream-intro { order: 2; } } .section.home-agent-stream .agent-stream-intro { max-width: 36rem; } .section.home-agent-stream .agent-stream-intro__kicker { margin: 0 0 0.75rem; font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(0, 0, 0, 0.42); } .section.home-agent-stream .agent-stream-intro__title { margin: 0 0 1rem; font-size: clamp(1.75rem, 2.4vw + 1rem, 2.5rem); line-height: 1.12; letter-spacing: -0.02em; font-weight: 600; color: var(--title-color); } .section.home-agent-stream .agent-stream-intro__body { margin: 0 0 1.25rem; font-size: 1rem; line-height: 1.55; color: rgba(0, 0, 0, 0.52); max-width: 36ch; } .section.home-agent-stream .agent-stream-intro__link { display: inline-flex; align-items: center; gap: 0.3em; white-space: nowrap; font-size: 0.9375rem; color: var(--title-color); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: color 0.2s ease; } .section.home-agent-stream .agent-stream-intro__link:hover { color: var(--primary-dark); } .section.home-agent-stream .agent-stream-chat { min-width: 0; } /* Outer “rail”: warm fill like mono strap (#eae5e3) but a step lighter + 50% noise tile */ .section.home-agent-stream .agent-stream-chat-rail { position: relative; display: flex; flex-direction: column; box-sizing: border-box; height: min(500px, 58vh); min-height: 292px; padding: clamp(10px, 2vw, 14px); border-radius: 18px; border: 1px solid rgba(0, 0, 0, 0.07); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.05); isolation: isolate; overflow: hidden; } @media screen and (max-width: 991px) { /* Must follow base rule above — otherwise `padding: clamp(...)` wins on mobile/tablet */ .section.home-agent-stream .agent-stream-chat-rail { padding: 0; } } .section.home-agent-stream .agent-stream-chat-rail::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-color: #f0ece9; z-index: 0; pointer-events: none; } .section.home-agent-stream .agent-stream-chat-rail::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: url("../images/30noise.png"); background-position: 0 0; background-repeat: repeat; opacity: 0.5; pointer-events: none; z-index: 1; mix-blend-mode: multiply; } .section.home-agent-stream .agent-stream-chat .agent-stream { max-width: none; margin-left: 0; margin-right: 0; width: 100%; } .section.home-agent-stream .agent-stream-chat-rail > .agent-stream { position: relative; z-index: 2; flex: 1; min-height: 0; display: flex; flex-direction: column; } .section.home-agent-stream .agent-stream__panel { display: flex; flex-direction: column; /* Fixed height so the stream reads as a consistent “window” (scroll is inside .agent-stream__scroll) */ height: min(560px, 66vh); min-height: 280px; /* Canvas: not white — white reserved for user bubble + final answer bubble */ background: #f2f0ee; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: 16px; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.06); overflow: hidden; } .section.home-agent-stream .agent-stream-chat-rail .agent-stream__panel { flex: 1; min-height: 0; height: auto; max-height: 100%; border-radius: 14px; box-shadow: 0 10px 32px rgba(0, 0, 0, 0.065); } .section.home-agent-stream .agent-stream-chat-rail .agent-stream__panel-head { padding: 10px 14px; } .section.home-agent-stream .agent-stream-chat-rail .agent-stream__feed { padding: 14px 14px 16px; gap: 12px; } .section.home-agent-stream .agent-stream-chat-rail .agent-stream__composer { padding: 7px 10px; } .section.home-agent-stream .agent-stream-chat-rail .agent-stream__composer-send { width: 30px; height: 30px; } /* * First hero demo chat only: inner chrome aligned with Memory “Example SQL pairs” * (head, composer, bubbles, SQL shell/tokens). Rail + panel wrappers keep default warm fills. */ .section.home-agent-stream:not(.home-agent-stream--secondary):not(.home-agent-stream--tertiary):not( .home-agent-stream--quaternary ) .agent-stream-chat-rail:not(.memory-context-graphic):not(.adoption-review-graphic) .agent-stream__panel-head { background: rgba(255, 255, 255, 0.92); border-bottom-color: rgba(15, 23, 42, 0.09); color: rgba(0, 0, 0, 0.42); } .section.home-agent-stream:not(.home-agent-stream--secondary):not(.home-agent-stream--tertiary):not( .home-agent-stream--quaternary ) .agent-stream-chat-rail:not(.memory-context-graphic):not(.adoption-review-graphic) .agent-stream__panel-title { color: rgba(22, 32, 50, 0.88); } .section.home-agent-stream:not(.home-agent-stream--secondary):not(.home-agent-stream--tertiary):not( .home-agent-stream--quaternary ) .agent-stream-chat-rail:not(.memory-context-graphic):not(.adoption-review-graphic) .agent-stream__composer { background: rgba(15, 23, 42, 0.045); border-top-color: rgba(15, 23, 42, 0.08); } .section.home-agent-stream:not(.home-agent-stream--secondary):not(.home-agent-stream--tertiary):not( .home-agent-stream--quaternary ) .agent-stream-chat-rail:not(.memory-context-graphic):not(.adoption-review-graphic) .agent-stream__composer-placeholder { color: rgba(22, 32, 50, 0.38); } .section.home-agent-stream:not(.home-agent-stream--secondary):not(.home-agent-stream--tertiary):not( .home-agent-stream--quaternary ) .agent-stream-chat-rail:not(.memory-context-graphic):not(.adoption-review-graphic) .agent-stream__demo-restart-btn { background: rgba(255, 255, 255, 0.85); border-color: rgba(15, 23, 42, 0.1); color: rgba(22, 32, 50, 0.52); } .section.home-agent-stream:not(.home-agent-stream--secondary):not(.home-agent-stream--tertiary):not( .home-agent-stream--quaternary ) .agent-stream-chat-rail:not(.memory-context-graphic):not(.adoption-review-graphic) .agent-stream__bubble--agent:not(.agent-stream__bubble--final) { background: rgba(255, 255, 255, 0.78); border: 1px solid rgba(15, 23, 42, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65); } .section.home-agent-stream:not(.home-agent-stream--secondary):not(.home-agent-stream--tertiary):not( .home-agent-stream--quaternary ) .agent-stream__sql-query-block .agent-stream__msg-tag { background: rgba(255, 255, 255, 0.9); border-color: rgba(15, 23, 42, 0.08); } .section.home-agent-stream:not(.home-agent-stream--secondary):not(.home-agent-stream--tertiary):not( .home-agent-stream--quaternary ) .agent-stream__sql-nest { border-left-color: rgba(15, 23, 42, 0.12); } .section.home-agent-stream:not(.home-agent-stream--secondary):not(.home-agent-stream--tertiary):not( .home-agent-stream--quaternary ) .agent-stream__sql-shell { background: rgba(15, 23, 42, 0.045); border: 1px solid rgba(15, 23, 42, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65); border-radius: 9px; } .section.home-agent-stream:not(.home-agent-stream--secondary):not(.home-agent-stream--tertiary):not( .home-agent-stream--quaternary ) .agent-stream__sql-shell .agent-stream__sql.agent-stream__sql--pretty { background: transparent; border: none; box-shadow: none; color: rgba(22, 32, 50, 0.9); padding: 10px 36px 10px 12px; } .section.home-agent-stream:not(.home-agent-stream--secondary):not(.home-agent-stream--tertiary):not( .home-agent-stream--quaternary ) .agent-stream__sql-tok--kw { color: rgba(95, 61, 140, 0.92); font-weight: 600; } .section.home-agent-stream:not(.home-agent-stream--secondary):not(.home-agent-stream--tertiary):not( .home-agent-stream--quaternary ) .agent-stream__sql-tok--fn { color: rgba(30, 95, 150, 0.92); font-weight: 600; } .section.home-agent-stream:not(.home-agent-stream--secondary):not(.home-agent-stream--tertiary):not( .home-agent-stream--quaternary ) .agent-stream__sql-tok--id { color: rgba(22, 32, 50, 0.9); } .section.home-agent-stream:not(.home-agent-stream--secondary):not(.home-agent-stream--tertiary):not( .home-agent-stream--quaternary ) .agent-stream__sql-tok--lit { color: rgba(21, 110, 80, 0.9); } .section.home-agent-stream:not(.home-agent-stream--secondary):not(.home-agent-stream--tertiary):not( .home-agent-stream--quaternary ) .agent-stream__sql-tok--pun { color: rgba(22, 32, 50, 0.42); } .section.home-agent-stream .agent-stream__panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; padding: 14px 18px; background: #fff; border-bottom: 1px dashed rgba(0, 0, 0, 0.12); font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 11px; letter-spacing: var(--_letter-spacing---headline, 0.06em); text-transform: uppercase; color: rgba(0, 0, 0, 0.45); } .section.home-agent-stream .agent-stream__panel-head-actions { display: inline-flex; align-items: center; flex-shrink: 0; } .section.home-agent-stream .agent-stream__demo-restart-btn { margin: 0; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; border: 1px solid rgba(0, 0, 0, 0.1); background: #fff; color: rgba(0, 0, 0, 0.55); transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease; } .section.home-agent-stream .agent-stream__demo-restart-btn:hover { color: var(--primary-dark, #c24a1f); border-color: rgba(244, 117, 64, 0.35); background: rgba(244, 117, 64, 0.06); } .section.home-agent-stream .agent-stream__demo-restart-icon { display: block; } .section.home-agent-stream .agent-stream__demo-restart-glyph { display: block; font-size: 14px; line-height: 1; font-weight: 600; transform: translateY(1px); } .section.home-agent-stream .agent-stream__panel-head-right { display: inline-flex; align-items: center; gap: 10px; flex-shrink: 0; } .section.home-agent-stream .agent-stream__panel-chevron { font-size: 9px; line-height: 1; color: rgba(0, 0, 0, 0.35); transform: translateY(1px); } .section.home-agent-stream .agent-stream__scroll { flex: 1; min-height: 0; overflow-x: hidden; overflow-y: auto; /* Allow wheel/trackpad to chain to the page when already at top/bottom */ overscroll-behavior-y: auto; -webkit-overflow-scrolling: touch; } .section.home-agent-stream .agent-stream__scroll--locked { overflow-y: hidden; /* Keep widget frozen, but let wheel/touch bubble to page scroll. */ touch-action: pan-y; overscroll-behavior-y: auto; } .section.home-agent-stream .agent-stream__composer { display: flex; align-items: center; gap: 10px; flex-shrink: 0; padding: 8px 12px; border-top: 1px dashed rgba(0, 0, 0, 0.1); /* Slightly brighter than panel canvas so the input reads as its own strip */ background: #faf8f6; } .section.home-agent-stream .agent-stream__composer-placeholder { flex: 1; min-width: 0; font-size: 0.875rem; color: rgba(0, 0, 0, 0.34); line-height: 1.3; } .section.home-agent-stream .agent-stream__composer-send { flex-shrink: 0; width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: rgba(244, 117, 64, 0.86); color: #fff; box-shadow: 0 2px 7px rgba(244, 117, 64, 0.2); } .section.home-agent-stream .agent-stream__composer-send svg { display: block; width: 16px; height: 16px; margin: 0; transform: translateX(-2px) rotate(45deg); transform-origin: 50% 50%; } .section.home-agent-stream .agent-stream__panel-title { flex: 1; min-width: 0; color: var(--title-color); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .section.home-agent-stream .agent-stream__panel-meta { color: rgba(0, 0, 0, 0.38); font-size: 10px; } .section.home-agent-stream .agent-stream__feed { padding: 18px 18px 22px; display: flex; flex-direction: column; gap: 14px; } .section.home-agent-stream .agent-stream__row { display: flex; gap: 10px; align-items: flex-start; } .section.home-agent-stream .agent-stream__row--continuation { margin-left: 42px; } .section.home-agent-stream .agent-stream__row--continuation .agent-stream__bubble { flex: 1; min-width: 0; } /* Fabric “work” thread: rail + collapse */ .section.home-agent-stream .agent-stream__fabric-thread { position: relative; overflow: hidden; max-height: 2400px; opacity: 1; transition: max-height 0.65s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.45s ease, margin 0.45s ease; } .section.home-agent-stream .agent-stream__fabric-thread-inner { position: relative; display: flex; flex-direction: column; gap: 14px; } .section.home-agent-stream .agent-stream__fabric-thread::before { content: ""; position: absolute; left: 15px; top: 44px; bottom: 10px; width: 2px; border-radius: 2px; background: linear-gradient( 180deg, rgba(244, 117, 64, 0.42) 0%, rgba(244, 117, 64, 0.12) 55%, rgba(244, 117, 64, 0.04) 100% ); pointer-events: none; z-index: 0; } .section.home-agent-stream .agent-stream__fabric-thread .agent-stream__row { position: relative; z-index: 1; } .section.home-agent-stream .agent-stream__fabric-thread--collapsed { max-height: 0; opacity: 0; margin-top: 0; margin-bottom: 0; pointer-events: none; } .section.home-agent-stream .agent-stream__fabric-thread--collapsed::before { opacity: 0; } .section.home-agent-stream .agent-stream__bubble--work { border-left: 2px solid rgba(244, 117, 64, 0.18); } .section.home-agent-stream .agent-stream__sql-query-block .agent-stream__msg-tag { margin-bottom: 6px; } .section.home-agent-stream .agent-stream__sql-query-block .agent-stream__thread-text { margin-bottom: 10px; } .section.home-agent-stream .agent-stream__sql-nest { margin-left: 0; margin-top: 4px; padding: 10px 0 4px 14px; border-left: 2px solid rgba(15, 23, 42, 0.12); } /* SQL block shell + copy affordance (matches memory-context Example SQL pairs). */ .section.home-agent-stream .agent-stream__sql-shell { position: relative; display: block; margin: 0; } .section.home-agent-stream .agent-stream__sql-shell .agent-stream__sql-copy-btn { position: absolute; top: 5px; right: 5px; z-index: 1; margin: 0; padding: 4px; border: none; border-radius: 6px; background: rgba(255, 255, 255, 0.65); color: rgba(0, 0, 0, 0.38); display: flex; align-items: center; justify-content: center; cursor: pointer; appearance: none; -webkit-appearance: none; font: inherit; line-height: 0; transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease; } .section.home-agent-stream .agent-stream__sql-shell .agent-stream__sql-copy-btn:hover { background: rgba(255, 255, 255, 0.92); color: rgba(0, 0, 0, 0.52); } .section.home-agent-stream .agent-stream__sql-shell .agent-stream__sql-copy-btn:active { transform: scale(0.94); } .section.home-agent-stream .agent-stream__sql-shell .agent-stream__sql-copy-icon { display: block; } .section.home-agent-stream .agent-stream__sql-shell .agent-stream__sql { margin: 0; } .section.home-agent-stream .agent-stream__final-answer { position: relative; margin-top: 4px; padding-top: 14px; } .section.home-agent-stream .agent-stream__final-answer--after-work { margin-top: 10px; padding-top: 16px; border-top: 1px dashed rgba(0, 0, 0, 0.1); } .section.home-agent-stream .agent-stream__final-answer--solo { margin-top: 0; padding-top: 0; } .section.home-agent-stream .agent-stream__final-answer__bar { height: 3px; border-radius: 3px; margin: 0 0 12px 42px; background: linear-gradient(90deg, rgba(244, 117, 64, 0.55), rgba(244, 117, 64, 0.08)); } .section.home-agent-stream .agent-stream__final-label { font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(244, 117, 64, 0.95); margin-bottom: 8px; font-weight: 600; } .section.home-agent-stream .agent-stream__bubble--final { background: #fff; border: 1px solid rgba(244, 117, 64, 0.22); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.04); } .section.home-agent-stream .agent-stream__text--type, .section.home-agent-stream .agent-stream__insight-type { white-space: pre-wrap; word-break: break-word; } .section.home-agent-stream .agent-stream__insight-type { margin: 0; font-size: 12.5px; line-height: 1.45; color: rgba(0, 0, 0, 0.78); } .section.home-agent-stream .agent-stream__type-caret { display: inline-block; margin-left: 1px; color: rgba(244, 117, 64, 0.85); font-weight: 300; animation: agentStreamCaret 1s step-end infinite; } @keyframes agentStreamCaret { 50% { opacity: 0; } } .section.home-agent-stream .agent-stream__mem-list strong { font-weight: 700; color: var(--title-color); } .section.home-agent-stream .agent-stream__plot-table-toggle { align-self: flex-start; margin: 0 0 10px; display: inline-flex; align-items: center; gap: 0.35em; font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--title-color); background: none; border: none; border-bottom: 1px solid currentColor; padding: 0 0 0.12em; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } .section.home-agent-stream .agent-stream__plot-table-toggle:hover { color: var(--primary-dark); border-bottom-color: var(--primary-dark); } .section.home-agent-stream .agent-stream__plot-table-accordion { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.45s ease; } .section.home-agent-stream .agent-stream__plot-table-accordion--open { grid-template-rows: 1fr; } .section.home-agent-stream .agent-stream__plot-table-accordion > .agent-stream__plot-table-wrap { overflow: hidden; min-height: 0; } .section.home-agent-stream .agent-stream__row--pop { animation: agentStreamRowPop 0.5s cubic-bezier(0.215, 0.61, 0.355, 1) both; } @keyframes agentStreamRowPop { from { opacity: 0; transform: translate3d(0, 10px, 0); } to { opacity: 1; transform: translate3d(0, 0, 0); } } @media (prefers-reduced-motion: reduce) { .section.home-agent-stream .agent-stream__row--pop { animation: none; } } .section.home-agent-stream .agent-stream__bubble--thread { padding: 10px 12px; } .section.home-agent-stream .agent-stream__msg-tag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; padding: 4px 10px 4px 6px; border-radius: 999px; background: rgba(244, 117, 64, 0.1); border: 1px solid rgba(244, 117, 64, 0.2); font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 10px; letter-spacing: 0.07em; text-transform: uppercase; color: rgba(0, 0, 0, 0.55); } .section.home-agent-stream .agent-stream__msg-tag-mark { display: inline-flex; align-items: center; justify-content: center; color: #c24a1f; } .section.home-agent-stream .agent-stream__msg-tag-emoji { font-size: 13px; line-height: 1; } .section.home-agent-stream .agent-stream__tag-icon-svg { display: block; } .section.home-agent-stream .agent-stream__msg-tag-label { font-weight: 600; color: var(--title-color); } .section.home-agent-stream .agent-stream__mem-list { margin: 0; padding-left: 1.05rem; font-size: 12px; line-height: 1.45; color: rgba(0, 0, 0, 0.68); } .section.home-agent-stream .agent-stream__mem-list li { margin: 0.25em 0; } .section.home-agent-stream .agent-stream__thread-text { margin: 0; font-size: 13px; line-height: 1.5; color: rgba(0, 0, 0, 0.72); } .section.home-agent-stream .agent-stream__pipeline-list { margin: 0; padding-left: 1.05rem; font-size: 12px; line-height: 1.45; color: rgba(0, 0, 0, 0.68); } .section.home-agent-stream .agent-stream__pipeline-list code { font-size: 11px; background: rgba(0, 0, 0, 0.05); padding: 1px 4px; border-radius: 4px; } .section.home-agent-stream .agent-stream__bubble--insight .agent-stream__insight-lead { margin: 0 0 8px; font-size: 12.5px; line-height: 1.45; color: rgba(0, 0, 0, 0.78); } .section.home-agent-stream .agent-stream__bubble--insight .agent-stream__insight-list { margin: 0 0 8px; padding-left: 1.05rem; font-size: 11.5px; line-height: 1.4; color: rgba(0, 0, 0, 0.58); } .section.home-agent-stream .agent-stream__bubble--insight .agent-stream__insight-foot { margin: 0; font-size: 11.5px; line-height: 1.4; color: rgba(0, 0, 0, 0.52); } .section.home-agent-stream .agent-stream__avatar { flex-shrink: 0; width: 32px; height: 32px; border-radius: 10px; background: rgba(0, 0, 0, 0.06); color: rgba(0, 0, 0, 0.55); font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; } .section.home-agent-stream .agent-stream__avatar--agent { background: rgba(244, 117, 64, 0.12); color: #c24a1f; } .section.home-agent-stream .agent-stream__bubble { flex: 1; min-width: 0; border-radius: 12px; padding: 12px 14px; } .section.home-agent-stream .agent-stream__bubble--user { background: #fff; border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04); } .section.home-agent-stream .agent-stream__bubble--agent:not(.agent-stream__bubble--final) { background: #ebe8e5; border: 1px solid rgba(0, 0, 0, 0.06); } .section.home-agent-stream .agent-stream__bubble--wide { max-width: 100%; } .section.home-agent-stream .agent-stream__name { font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(0, 0, 0, 0.4); margin-bottom: 6px; } .section.home-agent-stream .agent-stream__text { margin: 0; font-size: 15px; line-height: 1.45; color: var(--title-color); } .section.home-agent-stream .agent-stream__bubble--user .agent-stream__text { font-size: 14.5px; line-height: 1.45; } .section.home-agent-stream .agent-stream__thinking { display: flex; align-items: center; gap: 8px; padding: 8px 14px 8px 46px; font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 12px; color: rgba(0, 0, 0, 0.45); } .section.home-agent-stream .agent-stream__thinking-dots { display: inline-flex; gap: 4px; } .section.home-agent-stream .agent-stream__thinking-dots span { width: 5px; height: 5px; border-radius: 50%; background: rgba(244, 117, 64, 0.85); animation: agentStreamDot 1s ease-in-out infinite both; } .section.home-agent-stream .agent-stream__thinking-dots span:nth-child(2) { animation-delay: 0.15s; } .section.home-agent-stream .agent-stream__thinking-dots span:nth-child(3) { animation-delay: 0.3s; } @keyframes agentStreamDot { 0%, 80%, 100% { opacity: 0.25; transform: scale(0.85); } 40% { opacity: 1; transform: scale(1); } } .section.home-agent-stream .agent-stream__log-toggle { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 0; border: none; background: none; cursor: pointer; font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary-dark); } .section.home-agent-stream .agent-stream__log-toggle:hover { text-decoration: underline; } .section.home-agent-stream .agent-stream__log-toggle-chevron { font-size: 9px; line-height: 1; } .section.home-agent-stream .agent-stream__log { font-size: 13px; line-height: 1.5; color: rgba(0, 0, 0, 0.72); } .section.home-agent-stream .agent-stream__log-list { margin: 0 0 10px 1rem; padding: 0; } .section.home-agent-stream .agent-stream__log-sub { margin: 10px 0; padding: 10px 12px; border-radius: 10px; border: 1px dashed rgba(0, 0, 0, 0.12); background: #fff; } .section.home-agent-stream .agent-stream__log-subtitle { font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(0, 0, 0, 0.45); margin-bottom: 6px; } .section.home-agent-stream .agent-stream__log-steps { margin: 0; padding-left: 1.1rem; font-size: 12px; color: rgba(0, 0, 0, 0.68); } .section.home-agent-stream .agent-stream__log-steps code { font-size: 11px; background: rgba(0, 0, 0, 0.05); padding: 1px 4px; border-radius: 4px; } .section.home-agent-stream .agent-stream__log-subtitle--sql { margin-top: 12px; margin-bottom: 6px; } .section.home-agent-stream .agent-stream__sql { margin: 0 0 4px; padding: 12px 14px; border-radius: 8px; background: rgba(0, 0, 0, 0.04); border: 1px solid rgba(0, 0, 0, 0.08); overflow-x: auto; font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 11px; line-height: 1.45; color: rgba(0, 0, 0, 0.78); white-space: pre; } .section.home-agent-stream .agent-stream__sql--pretty { padding: 12px 14px; background: linear-gradient(165deg, #f8fafc 0%, #f1f5f9 100%); border: 1px solid rgba(15, 23, 42, 0.1); font-size: 11px; line-height: 1.5; } .section.home-agent-stream .agent-stream__sql-tok--kw { color: #6d28d9; font-weight: 600; } .section.home-agent-stream .agent-stream__sql-tok--fn { color: #0369a1; font-weight: 500; } .section.home-agent-stream .agent-stream__sql-tok--id { color: #0f172a; } .section.home-agent-stream .agent-stream__sql-tok--lit { color: #b45309; } .section.home-agent-stream .agent-stream__sql-tok--pun { color: #64748b; } .section.home-agent-stream .agent-stream__sql code { font-family: inherit; font-size: inherit; background: none; padding: 0; border-radius: 0; } .section.home-agent-stream .agent-stream__bubble--rich .agent-stream__rich { font-size: 14px; line-height: 1.55; color: var(--title-color); } .section.home-agent-stream .agent-stream__bubble--rich .agent-stream__rich p { margin: 0 0 10px; } .section.home-agent-stream .agent-stream__bubble--rich .agent-stream__rich p:last-child { margin-bottom: 0; } .section.home-agent-stream .agent-stream__bubble--rich .agent-stream__rich ul { margin: 0 0 10px; padding-left: 1.1rem; } .section.home-agent-stream .agent-stream__chart-card, .section.home-agent-stream .agent-stream__plot-card { margin-left: 42px; padding: 14px 16px; border-radius: 12px; border: 1px solid rgba(0, 0, 0, 0.08); background: #fff; } .section.home-agent-stream .agent-stream__plot-svg { display: block; width: 100%; height: auto; max-width: 100%; margin-bottom: 10px; border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.06); } .section.home-agent-stream .agent-stream__plot-axis-y { fill: rgba(0, 0, 0, 0.42); font-size: 9px; font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); } .section.home-agent-stream .agent-stream__plot-axis-x { fill: rgba(0, 0, 0, 0.38); font-size: 8px; font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); } .section.home-agent-stream .agent-stream__plot-legend { fill: rgba(0, 0, 0, 0.55); font-size: 9px; font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); } .section.home-agent-stream .agent-stream__plot-legend--rail { text-anchor: start; font-size: 8.5px; } .section.home-agent-stream .agent-stream__plot-table-wrap { max-height: 200px; overflow: auto; border-radius: 8px; border: 1px solid rgba(0, 0, 0, 0.08); background: #fafbfc; } .section.home-agent-stream .agent-stream__final-answer--solo .agent-stream__final-answer__bar { margin-left: 0; } /* Chart nested under the Answer bubble (dual tabs + panel) */ .section.home-agent-stream .agent-stream__final-answer__chart--tabbed { position: relative; margin-top: 14px; padding-top: 2px; padding-left: 0; border: none; } .section.home-agent-stream .agent-stream__chart-dual-tabs { display: flex; flex-wrap: wrap; gap: 0; margin-bottom: -1px; position: relative; z-index: 1; } .section.home-agent-stream .agent-stream__chart-tab-btn { font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 9px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(0, 0, 0, 0.42); background: linear-gradient(180deg, #ececea 0%, #e2e0de 100%); border: 1px solid rgba(0, 0, 0, 0.1); border-bottom-color: rgba(0, 0, 0, 0.1); border-radius: 10px 10px 0 0; padding: 7px 14px 6px; margin-right: 4px; cursor: pointer; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .section.home-agent-stream .agent-stream__chart-tab-btn:hover { color: var(--title-color); } .section.home-agent-stream .agent-stream__chart-tab-btn--active { color: rgba(0, 0, 0, 0.55); background: linear-gradient(180deg, #f6f6f5 0%, #fafafa 100%); border-bottom-color: transparent; box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.7) inset; } .section.home-agent-stream .agent-stream__chart-tab-btn--demo-touch { animation: agent-stream-chart-tab-touch-cue 420ms cubic-bezier(0.22, 1, 0.36, 1); } @keyframes agent-stream-chart-tab-touch-cue { 0% { transform: translateY(0) scale(1); border-color: rgba(0, 0, 0, 0.1); box-shadow: 0 0 0 0 rgba(244, 117, 64, 0); } 35% { transform: translateY(1px) scale(0.96); color: var(--primary-dark, #c24a1f); border-color: rgba(244, 117, 64, 0.42); box-shadow: 0 0 0 2px rgba(244, 117, 64, 0.22), 0 2px 10px rgba(244, 117, 64, 0.12); } 100% { transform: translateY(0) scale(1); border-color: rgba(0, 0, 0, 0.1); box-shadow: 0 0 0 0 rgba(244, 117, 64, 0); } } .section.home-agent-stream .agent-stream__chart-tab-btn--active.agent-stream__chart-tab-btn--demo-touch { animation: agent-stream-chart-tab-touch-cue-active 420ms cubic-bezier(0.22, 1, 0.36, 1); } @keyframes agent-stream-chart-tab-touch-cue-active { 0% { transform: translateY(0) scale(1); color: rgba(0, 0, 0, 0.55); border-color: rgba(0, 0, 0, 0.1); border-bottom-color: transparent; box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.7) inset; } 35% { transform: translateY(1px) scale(0.96); color: var(--primary-dark, #c24a1f); border-color: rgba(244, 117, 64, 0.42); border-bottom-color: transparent; box-shadow: 0 0 0 2px rgba(244, 117, 64, 0.22), 0 2px 10px rgba(244, 117, 64, 0.12), 0 -1px 0 rgba(255, 255, 255, 0.35) inset; } 100% { transform: translateY(0) scale(1); color: rgba(0, 0, 0, 0.55); border-color: rgba(0, 0, 0, 0.1); border-bottom-color: transparent; box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.7) inset; } } .section.home-agent-stream .agent-stream__final-answer__chart--tabbed .agent-stream__plot-card { margin-left: 0; position: relative; z-index: 0; border-top-left-radius: 0; border-radius: 0 12px 12px 12px; padding-top: 12px; background: #fff; } .section.home-agent-stream .agent-stream__chart-bar-value { fill: rgba(0, 0, 0, 0.62); font-size: 9px; font-weight: 600; font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); } .section.home-agent-stream .agent-stream__insight-lead--solo { margin-bottom: 0; } .section.home-agent-stream .agent-stream__weekly-table-details { margin-top: 4px; } .section.home-agent-stream .agent-stream__weekly-table-details > summary { list-style: none; } .section.home-agent-stream .agent-stream__weekly-table-details > summary::-webkit-details-marker { display: none; } .section.home-agent-stream .agent-stream__plot-table-toggle--ghost { margin-top: 6px; margin-bottom: 0; font-size: 10px; letter-spacing: 0.05em; color: rgba(0, 0, 0, 0.45); border-bottom-color: rgba(0, 0, 0, 0.2); } .section.home-agent-stream .agent-stream__results-pack { margin-top: 12px; padding-top: 10px; border-top: 1px dashed rgba(0, 0, 0, 0.1); } .section.home-agent-stream .agent-stream__results-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; cursor: pointer; list-style: none; padding: 4px 8px; border-radius: 8px; border: 1px solid transparent; background: transparent; box-shadow: inset 0 0 0 rgba(244, 117, 64, 0); font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(0, 0, 0, 0.48); transition: background-color 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease; } .section.home-agent-stream .agent-stream__results-summary::-webkit-details-marker { display: none; } .section.home-agent-stream .agent-stream__results-summary--touch-cue { animation: agent-stream-results-touch-cue 420ms cubic-bezier(0.22, 1, 0.36, 1); } @keyframes agent-stream-results-touch-cue { 0% { transform: translateY(0) scale(1); color: rgba(0, 0, 0, 0.48); border-color: transparent; background: transparent; box-shadow: inset 0 0 0 rgba(244, 117, 64, 0); } 35% { transform: translateY(1px) scale(0.985); color: var(--primary-dark, #c24a1f); border-color: rgba(244, 117, 64, 0.38); background: rgba(244, 117, 64, 0.12); box-shadow: inset 0 0 0 1px rgba(244, 117, 64, 0.2); } 100% { transform: translateY(0) scale(1); color: rgba(0, 0, 0, 0.48); border-color: transparent; background: transparent; box-shadow: inset 0 0 0 rgba(244, 117, 64, 0); } } .section.home-agent-stream .agent-stream__results-summary-main { font-weight: 600; color: var(--title-color); } .section.home-agent-stream .agent-stream__results-summary-hint { font-size: 9px; letter-spacing: 0.12em; color: rgba(0, 0, 0, 0.38); } .section.home-agent-stream .agent-stream__results-pack[open] .agent-stream__results-summary-hint { display: none; } .section.home-agent-stream .agent-stream__results-body { margin-top: 10px; display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 1400ms cubic-bezier(0.22, 1, 0.36, 1), opacity 600ms ease; } .section.home-agent-stream .agent-stream__results-body-inner { min-height: 0; overflow: hidden; transform-origin: top center; clip-path: inset(0 0 100% 0 round 8px); transform: translateY(-10px) scaleY(0.86); opacity: 0.2; transition: clip-path 1200ms cubic-bezier(0.22, 1, 0.36, 1), transform 1200ms cubic-bezier(0.22, 1, 0.36, 1), opacity 900ms ease; } .section.home-agent-stream .agent-stream__results-pack[open] .agent-stream__results-body { grid-template-rows: 1fr; opacity: 1; } .section.home-agent-stream .agent-stream__results-pack[open] .agent-stream__results-body-inner { clip-path: inset(0 0 0 0 round 8px); transform: translateY(0) scaleY(1); opacity: 1; } .section.home-agent-stream .agent-stream__results-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; } .section.home-agent-stream .agent-stream__results-csv-label { font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 10px; color: rgba(0, 0, 0, 0.42); } .section.home-agent-stream .agent-stream__results-download { display: inline-flex; align-items: center; gap: 4px; font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 9px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--title-color); background: #fafbfc; border: 1px solid rgba(0, 0, 0, 0.12); border-radius: 7px; padding: 4px 8px; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .section.home-agent-stream .agent-stream__results-download:hover { border-color: var(--primary, #f47540); color: var(--primary-dark); } .section.home-agent-stream .agent-stream__results-download--demo-hover { border-color: var(--primary, #f47540); color: var(--primary-dark); } .section.home-agent-stream .agent-stream__results-download.agent-stream__results-download--demo-press { transform: scale(0.94); opacity: 0.88; box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.12); transition: transform 0.14s ease, opacity 0.14s ease, box-shadow 0.14s ease; } .section.home-agent-stream .agent-stream__results-download-icon { display: block; width: 13px; height: 13px; } .section.home-agent-stream .agent-stream__plot-table-wrap--results { max-height: 160px; } .section.home-agent-stream .agent-stream__results-pack[open] .agent-stream__plot-table-wrap--results { animation: agent-stream-results-table-reveal 980ms cubic-bezier(0.22, 1, 0.36, 1) both; } @keyframes agent-stream-results-table-reveal { 0% { opacity: 0; transform: translateY(-4px); } 100% { opacity: 1; transform: translateY(0); } } .section.home-agent-stream .agent-stream__results-download { text-decoration: none; } .section.home-agent-stream .agent-stream__chart-radio-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .section.home-agent-stream .agent-stream__chart-pane-static--totals { display: block; } .section.home-agent-stream .agent-stream__chart-pane-static--weekly { display: none; } #home-static-ch-weekly:checked ~ .agent-stream__plot-card > .agent-stream__chart-pane-static--totals { display: none; } #home-static-ch-weekly:checked ~ .agent-stream__plot-card > .agent-stream__chart-pane-static--weekly { display: block; } #home-static-ch-totals:checked ~ .agent-stream__chart-dual-tabs label[for="home-static-ch-totals"], #home-static-ch-weekly:checked ~ .agent-stream__chart-dual-tabs label[for="home-static-ch-weekly"] { color: rgba(0, 0, 0, 0.55); background: linear-gradient(180deg, #f6f6f5 0%, #fafafa 100%); border-bottom-color: transparent; box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.7) inset; } #home-static-ch-totals:checked ~ .agent-stream__chart-dual-tabs label[for="home-static-ch-weekly"], #home-static-ch-weekly:checked ~ .agent-stream__chart-dual-tabs label[for="home-static-ch-totals"] { color: rgba(0, 0, 0, 0.42); background: linear-gradient(180deg, #ececea 0%, #e2e0de 100%); border-bottom-color: rgba(0, 0, 0, 0.1); box-shadow: none; } @media (prefers-reduced-motion: reduce) { .section.home-agent-stream .agent-stream__type-caret { animation: none; opacity: 0.6; } } .section.home-agent-stream .agent-stream__plot-table { width: 100%; border-collapse: collapse; font-size: 10px; font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); } .section.home-agent-stream .agent-stream__plot-table th, .section.home-agent-stream .agent-stream__plot-table td { text-align: right; padding: 6px 8px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); white-space: nowrap; } .section.home-agent-stream .agent-stream__plot-table th:first-child, .section.home-agent-stream .agent-stream__plot-table td:first-child { text-align: left; } .section.home-agent-stream .agent-stream__plot-table th { position: sticky; top: 0; background: #f1f5f9; text-transform: uppercase; letter-spacing: 0.05em; font-size: 8px; color: rgba(0, 0, 0, 0.45); } .section.home-agent-stream .agent-stream__plot-table-tr--demo-hover td { background: rgba(244, 117, 64, 0.1); transition: background-color 0.12s ease; } .section.home-agent-stream .agent-stream__chart-title { font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(0, 0, 0, 0.42); margin-bottom: 8px; } .section.home-agent-stream .agent-stream__chart-svg { display: block; width: 100%; height: auto; max-width: 100%; } .section.home-agent-stream .agent-stream__chart-label { fill: rgba(0, 0, 0, 0.55); font-size: 11px; font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); } .section.home-agent-stream .agent-stream__chart-bar { fill: #f47540; } .section.home-agent-stream .agent-stream__chart-value { fill: var(--title-color); font-size: 11px; font-weight: 600; font-family: var(--_font-family---funnel-display, system-ui, sans-serif); } .section.home-agent-stream .agent-stream__table-block { margin-left: 42px; display: flex; flex-direction: column; gap: 8px; } .section.home-agent-stream .agent-stream__table-toggle { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.35em; font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--title-color); background: none; border: none; border-bottom: 1px solid currentColor; padding: 0 0 0.12em; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } .section.home-agent-stream .agent-stream__table-toggle:hover { color: var(--primary-dark); border-bottom-color: var(--primary-dark); } .section.home-agent-stream .agent-stream__table-wrap { max-height: 0; overflow: hidden; transition: max-height 0.45s ease; } .section.home-agent-stream .agent-stream__table-wrap--open { max-height: 320px; overflow-y: auto; } .section.home-agent-stream .agent-stream__table-caption { caption-side: bottom; text-align: left; font-size: 11px; color: rgba(0, 0, 0, 0.45); padding-top: 8px; } .section.home-agent-stream .agent-stream__table { width: 100%; border-collapse: collapse; font-size: 12px; font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); } .section.home-agent-stream .agent-stream__table th, .section.home-agent-stream .agent-stream__table td { text-align: left; padding: 8px 10px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); } .section.home-agent-stream .agent-stream__table th { text-transform: uppercase; font-size: 10px; letter-spacing: 0.06em; color: rgba(0, 0, 0, 0.45); } @media screen and (max-width: 767px) { .section.home-agent-stream .agent-stream__chart-card, .section.home-agent-stream .agent-stream__plot-card, .section.home-agent-stream .agent-stream__table-block, .section.home-agent-stream .agent-stream__row--continuation { margin-left: 0; } .section.home-agent-stream .agent-stream__final-answer__chart--tabbed { margin-top: 12px; } } /* Static HTML:

summaries for steps + table */ .section.home-agent-stream .agent-stream__static-details, .section.home-agent-stream .agent-stream__static-table-details { margin: 0; } .section.home-agent-stream .agent-stream__static-work { margin: 0 0 6px; } .section.home-agent-stream .agent-stream__static-work-sum { list-style: none; cursor: pointer; font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(0, 0, 0, 0.45); padding: 6px 0; } .section.home-agent-stream .agent-stream__static-work-sum::-webkit-details-marker { display: none; } .section.home-agent-stream .agent-stream__plot-weekly-details { margin: 0; } .section.home-agent-stream .agent-stream__plot-weekly-details > summary { list-style: none; } .section.home-agent-stream .agent-stream__plot-weekly-details > summary::-webkit-details-marker { display: none; } .section.home-agent-stream .agent-stream__static-details summary, .section.home-agent-stream .agent-stream__static-table-summary { list-style: none; cursor: pointer; font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--primary-dark); margin-bottom: 8px; } .section.home-agent-stream .agent-stream__static-details summary::-webkit-details-marker, .section.home-agent-stream .agent-stream__static-table-summary::-webkit-details-marker { display: none; } .section.home-agent-stream .agent-stream__static-table-summary { color: var(--title-color); border-bottom: 1px solid currentColor; display: inline-block; padding-bottom: 0.12em; margin-bottom: 10px; } /* Home process: bottom edge after removing blank-div spacer (aligns with site dashed rails) */ .page-wrapper--home .section.process { border-bottom: 1px dashed var(--black-stock-color, rgba(0, 0, 0, 0.1)); } /* * Process row fills the container: `.process-content` is flex; default `flex: 0 1 auto` on the grid * made the whole block shrink to the title row when accordion bodies used `display: none`. */ .page-wrapper--home .section.process .process-content { width: 100%; align-items: stretch; } .page-wrapper--home .section.process .process-grid { flex: 1 1 100%; width: 100%; min-width: 0; max-width: 100%; } .page-wrapper--home .section.process .process-left-content { min-width: 0; width: 100%; } .page-wrapper--home .section.process .process-tabs.w-tabs, .page-wrapper--home .section.process .process-tabs-menu.w-tab-menu { width: 100%; } .page-wrapper--home .section.process .process-tabs-menu-link.w-tab-link { display: block; width: 100%; max-width: none; box-sizing: border-box; } .page-wrapper--home .section.process .process-tabs-menu-link-single { width: 100%; } /* Home process: ~55% / 45% columns on desktop */ @media screen and (min-width: 992px) { .page-wrapper--home .section.process .process-grid { grid-template-columns: minmax(0, 55fr) minmax(0, 45fr); } .page-wrapper--home .section.process .process-right-content { width: 100%; min-width: 0; /* Was Webflow `justify-content: center` — stack jumped when accordion height changed */ justify-content: flex-start; align-self: start; } .page-wrapper--home .section.process .process-image-wrapper { justify-content: flex-start; /* Webflow uses margin-top: -108px; with top alignment that sits too high */ margin-top: clamp(3.5rem, 7vw, 6.5rem); } .page-wrapper--home .section.process .process-tabs-menu-ans { max-width: none; } } /* Home process: slight darken on stacked product images (filter applies per layer) */ .page-wrapper--home .section.process .process-image { filter: brightness(0.97); } /* Home process: number badges + typography overrides */ .page-wrapper--home .section.process .process-tabs-menu-icon-wrap { position: relative; overflow: hidden; background-color: #efeae7; background-image: none; width: 38px; height: 38px; border-radius: 9px; display: flex; align-items: center; justify-content: center; } .page-wrapper--home .section.process .process-tabs-menu-icon-wrap::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.2; background-image: url("../images/30noise.png"); background-repeat: repeat; background-size: 96px 96px; mix-blend-mode: multiply; } .page-wrapper--home .section.process .process-tabs-menu-step { position: relative; z-index: 1; display: inline-block; font-family: var(--_font-family---funnel-display); font-size: 1rem; font-weight: var(--_font-weight---semi-bold); line-height: 1; color: #fb3808; background-image: linear-gradient(125deg, #f47540, #fb3808); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; } .page-wrapper--home .section.process .process-tabs-menu-title { color: var(--title-color); font-size: var(--_typography---large-paragraph); line-height: var(--_line-height---large); font-weight: var(--_font-weight---medium); letter-spacing: var(--_letter-spacing---large-paragraph); } .page-wrapper--home .section.process .process-tabs-menu-ans { font-size: 1rem; line-height: 1.55; color: rgba(0, 0, 0, 0.52); } /* Match title column: home badges are 38px; Webflow uses 50px + 20px gap → 70px here */ .page-wrapper--home .section.process .process-tabs-menu-ans-wrap { padding-left: calc(38px + 20px); } @media screen and (max-width: 767px) { .page-wrapper--home .section.process .process-tabs-menu-ans-wrap { padding-left: calc(38px + 10px); } } /* * Accordion closed: collapse vertically without `display: none` so the left column * keeps the same width as when copy is visible (subtext no longer drives shrink-to-fit). */ .page-wrapper--home .section.process .process-tabs-menu-link:not(.w--current) .process-tabs-menu-ans-wrap { max-height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; visibility: hidden; pointer-events: none; } .page-wrapper--home .section.process .process-tabs-menu-link.w--current .process-tabs-menu-ans-wrap { max-height: none; overflow: visible; visibility: visible; pointer-events: auto; } /* Tab chrome: +10px vertical inside each link */ .page-wrapper--home .section.process .process-tabs-menu-link { padding-top: 43px; padding-bottom: 43px; padding-left: 40px; padding-right: 25px; } @media screen and (max-width: 991px) { .page-wrapper--home .section.process .process-tabs-menu-link { padding: 28px 20px; } } /* FAQ: same title + body typography as Process tabs (“Map your data…”), home + book-demo */ .page-wrapper--home .section.faq .faq-accordion-title { font-family: var(--_font-family---funnel-display); color: var(--title-color); font-size: var(--_typography---large-paragraph); line-height: var(--_line-height---large); font-weight: var(--_font-weight---medium); letter-spacing: var(--_letter-spacing---large-paragraph); word-break: normal; white-space: normal; } .page-wrapper--home .section.faq .faq-accordion-ans { font-size: 1rem; line-height: 1.55; color: rgba(0, 0, 0, 0.52); } @media screen and (max-width: 991px) { .page-wrapper--home .section.faq .faq-accordion-link { padding-left: 24px; padding-right: 24px; } .page-wrapper--home .section.faq .faq-accordion-content-wrap { padding-left: 24px; padding-right: 24px; } } @media screen and (max-width: 767px) { .page-wrapper--home .section.faq .faq-accordion-link { padding-left: 28px; padding-right: 28px; } .page-wrapper--home .section.faq .faq-accordion-content-wrap { padding-left: 28px; padding-right: 28px; } } @media screen and (max-width: 479px) { .page-wrapper--home .section.faq .faq-accordion-link { padding-left: 32px; padding-right: 32px; } .page-wrapper--home .section.faq .faq-accordion-content-wrap { padding-left: 32px; padding-right: 32px; } } /* CTA + footer (React `SiteHomeCtaFooter`): scroll reveal — same motion as case study `.cs-reveal` */ .page-wrapper--home .cta-footer .cs-reveal { opacity: 0; transform: translate3d(0, 22px, 0); transition: opacity 0.75s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.75s cubic-bezier(0.215, 0.61, 0.355, 1); will-change: opacity, transform; } .page-wrapper--home .cta-footer .cs-reveal.cs-reveal--in-view { opacity: 1; transform: translate3d(0, 0, 0); } @media (prefers-reduced-motion: reduce) { .page-wrapper--home .cta-footer .cs-reveal { opacity: 1 !important; transform: none !important; transition: none !important; } .page-wrapper--home .cta-footer .section.cta .cta-content .cta-cascade-item { opacity: 1 !important; transform: none !important; transition: none !important; } } /* CTA: single IO on `.cta-content`; all children share one “in view” moment, cascade top → bottom via transition-delay */ .page-wrapper--home .cta-footer .section.cta .cta-content.cs-reveal { opacity: 1; transform: none; transition: none; will-change: auto; } .page-wrapper--home .cta-footer .section.cta .cta-content:not(.cs-reveal--in-view) .cta-cascade-item { opacity: 0; transform: translate3d(0, 22px, 0); } .page-wrapper--home .cta-footer .section.cta .cta-content.cs-reveal--in-view .cta-cascade-item { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity 0.75s cubic-bezier(0.215, 0.61, 0.355, 1), transform 0.75s cubic-bezier(0.215, 0.61, 0.355, 1); } .page-wrapper--home .cta-footer .section.cta .cta-content.cs-reveal--in-view .cta-footer-subtile-wrapper.cta-cascade-item { transition-delay: 0s; } .page-wrapper--home .cta-footer .section.cta .cta-content.cs-reveal--in-view .cta-title { transition-delay: 0.1s; } .page-wrapper--home .cta-footer .section.cta .cta-content.cs-reveal--in-view .cta-description { transition-delay: 0.22s; } .page-wrapper--home .cta-footer .section.cta .cta-content.cs-reveal--in-view .cta-button-wrapper { transition-delay: 0.34s; } /* Footer: remove template dead band (absolute stock rail + inset) so the block sits flush to the viewport */ .page-wrapper--home .cta-footer .section.footer { padding-bottom: 0; margin-bottom: 0; } .page-wrapper--home .cta-footer .footer-stock { display: none; } /* Bottom bar: not scroll-revealed (avoids stuck opacity:0 when IO never fires at page bottom) */ .page-wrapper--home .cta-footer .footer-bottom-content { opacity: 1; transform: none; visibility: visible; } .page-wrapper--home .cta-footer { margin-bottom: 0; padding-bottom: 0; } .page-wrapper--case-premier .cta-footer { margin-bottom: 0; padding-bottom: 0; } /* Per-cell footer reveal: keep grid columns from overflowing while opacity animates */ .page-wrapper--home .cta-footer .footer-top-grid > .footer-menu-single.cs-reveal { min-width: 0; } /* CTA shell: match Webflow `padding-bottom` on `.cta-content` (80px; 60px ≤479px). */ .page-wrapper--home .cta-footer .section.cta .cta-content { background-color: transparent; background-image: none; position: relative; overflow: hidden; padding-top: 80px; } @media screen and (max-width: 479px) { .page-wrapper--home .cta-footer .section.cta .cta-content { padding-top: 60px; } } .page-wrapper--home .cta-wrapper { isolation: isolate; background-color: var(--near-black); border: 1px dashed var(--white-12-stock); border-radius: 14px; padding: clamp(3.75rem, 10vw, 7rem) clamp(2.5rem, 6vw, 5rem); max-width: min(94vw, 76rem); min-height: clamp(20rem, 48vh, 34rem); display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; z-index: 2; } .page-wrapper--home .cta-wrapper::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background-image: url("../images/30noise.png"); background-repeat: repeat; background-size: 96px 96px; background-position: 0 0; opacity: 0.5; pointer-events: none; z-index: 0; } .page-wrapper--home .cta-wrapper > * { position: relative; z-index: 1; } .page-wrapper--home .cta-inner-wrapper { max-width: min(90vw, 52rem); width: 100%; margin-left: auto; margin-right: auto; } /* Footer CTA: mono-strap-style tag (emoji + caps subtile), same pattern as homepage sections */ .page-wrapper--home .cta-footer .cta-footer-subtile-wrapper { display: flex; justify-content: center; width: 100%; margin-bottom: clamp(0.65rem, 1.8vw, 1rem); } .page-wrapper--home .cta-footer .cta-footer-subtile-wrapper .subtile-icon.home-mono-strap-emoji { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; max-width: none; max-height: none; width: 1em; height: 1em; font-size: 15px; line-height: 1; } /* Footer CTA typography: subtle light-gray headline + lighter gray → white accent. */ .page-wrapper--home .cta-footer .section.cta .cta-title { color: rgba(255, 255, 255, 0.92); } .page-wrapper--home .cta-footer .section.cta .cta-title .banner-title-span { background-image: linear-gradient(125deg, #f2f5f8, #ffffff); } .page-wrapper--home .cta-footer .section.cta .cta-title .banner-title-span.banner-title-work { text-decoration-color: rgba(255, 255, 255, 0.46); } /* CTA: Webflow-style dual-layer button slide (replaces IX on React-owned markup) */ .page-wrapper--home .section.cta .primary-button { position: relative; /* Slightly larger hit area so hover doesn’t drop when the label moves */ padding: 15px 28px; } .page-wrapper--home .section.cta .primary-button img { pointer-events: none; } /* Mouse leave: snappy return; hover in uses shorter duration on :hover below */ .page-wrapper--home .section.cta .primary-button-single { transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .page-wrapper--home .section.cta .primary-button:hover .primary-button-single { transition-duration: 0.58s; transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1); } .page-wrapper--home .section.cta .primary-button-single.in { transform: translate3d(0, 0, 0); } .page-wrapper--home .section.cta .primary-button-single.out { left: 0; right: 0; top: 0; bottom: 0; justify-content: center; /* Match Webflow IX defaults (out layer sat at +300%) */ transform: translate3d(0, 300%, 0); } .page-wrapper--home .section.cta .primary-button:hover .primary-button-single.in { /* Full exit upward so the first label clears the pill */ transform: translate3d(0, -300%, 0); } .page-wrapper--home .section.cta .primary-button:hover .primary-button-single.out { transform: translate3d(0, 0, 0); } @media (prefers-reduced-motion: reduce) { .page-wrapper--home .section.cta .primary-button-single { transition: none; } .page-wrapper--home .section.cta .primary-button-single.out { opacity: 0; pointer-events: none; transform: translate3d(0, 0, 0); } .page-wrapper--home .section.cta .primary-button:hover .primary-button-single.in { transform: none; } } /* Pricing page cards: same dual-layer button slide as homepage CTA */ .page-wrapper--pricing .section.main-pricing .primary-button { position: relative; padding: 15px 28px; } .page-wrapper--pricing .section.main-pricing .primary-button img { pointer-events: none; } .page-wrapper--pricing .section.main-pricing .primary-button-single { transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94); } .page-wrapper--pricing .section.main-pricing .primary-button:hover .primary-button-single { transition-duration: 0.58s; transition-timing-function: cubic-bezier(0.33, 1, 0.68, 1); } .page-wrapper--pricing .section.main-pricing .primary-button-single.in { transform: translate3d(0, 0, 0); } .page-wrapper--pricing .section.main-pricing .primary-button-single.out { left: 0; right: 0; top: 0; bottom: 0; justify-content: center; transform: translate3d(0, 300%, 0); } .page-wrapper--pricing .section.main-pricing .primary-button:hover .primary-button-single.in { transform: translate3d(0, -300%, 0); } .page-wrapper--pricing .section.main-pricing .primary-button:hover .primary-button-single.out { transform: translate3d(0, 0, 0); } @media (prefers-reduced-motion: reduce) { .page-wrapper--pricing .section.main-pricing .primary-button-single { transition: none; } .page-wrapper--pricing .section.main-pricing .primary-button-single.out { opacity: 0; pointer-events: none; transform: translate3d(0, 0, 0); } .page-wrapper--pricing .section.main-pricing .primary-button:hover .primary-button-single.in { transform: none; } } /* Footer logo: match navbar `.navbar-logo` size (130px; 120px on small screens) */ .page-wrapper--home .footer-logo-image { width: 130px; max-width: 130px; max-height: none; height: auto; opacity: 1; object-fit: contain; } @media screen and (max-width: 479px) { .page-wrapper--home .footer-logo-image { width: 120px; max-width: 120px; } } /* Footer first column: logo + tagline (replaces Main Pages) */ .page-wrapper--home .footer-brand-column { display: flex; flex-direction: column; align-items: flex-start; } .page-wrapper--home .footer-brand-logo-link { display: block; line-height: 0; } .page-wrapper--home .footer-brand-tagline { margin: 1rem 0 0; max-width: min(18rem, 100%); font-size: var(--_typography---small-paragraph); line-height: var(--_line-height---subtitle); letter-spacing: var(--_letter-spacing---headline); color: var(--white-60); } /* Footer link columns: compact vertical rhythm + align with nav link typography */ .page-wrapper--home .footer-top-content .footer-menu-single { padding: 2rem 0.75rem 2.35rem 1.5rem; } .page-wrapper--home .footer-menu-title-wrapper { margin-bottom: 0.55rem; } .page-wrapper--home .footer-menu-title { font-size: 0.6875rem; line-height: 1.25; letter-spacing: 0.14em; } .page-wrapper--home .footer-menu-list { grid-row-gap: 0.3rem; row-gap: 0.3rem; } .page-wrapper--home .footer-menu-text-link { font-size: var(--_typography---small-paragraph); line-height: 1.35; letter-spacing: var(--_letter-spacing---button); font-weight: var(--_font-weight---normal); text-decoration: none; transition: color 0.2s ease; } .page-wrapper--home .footer-menu-text-link:hover { color: var(--primary-dark); } .page-wrapper--home .footer-menu-text-link.w--current { color: var(--primary-dark); } /* Webflow template underline bar — hide on homepage footer */ .page-wrapper--home .footer-underline-button { display: none; } @media screen and (max-width: 991px) { .page-wrapper--home .footer-top-content .footer-menu-single { padding-top: 1.25rem; padding-bottom: 1.25rem; padding-left: 0.85rem; padding-right: 0.65rem; } .page-wrapper--home .footer-menu-title-wrapper { margin-bottom: 0.45rem; } } @media screen and (max-width: 479px) { .page-wrapper--home .footer-menu-list { grid-row-gap: 0.22rem; row-gap: 0.22rem; } .page-wrapper--home .footer-menu-title-wrapper { margin-bottom: 0.35rem; } } /* Footer: copyright block bottom-right */ .page-wrapper--home .footer-bottom-meta { display: flex; flex-direction: column; align-items: flex-end; text-align: right; max-width: min(100%, 36rem); } .page-wrapper--home .footer-bottom-meta .footer-details-text { font-size: 0.6875rem; line-height: 1.4; letter-spacing: 0.03em; } /* Homepage: memory / context graphic — fixed height, in-panel scroll disabled, rotating focus */ .section.home-agent-stream .memory-context-graphic.agent-stream-chat-rail { align-self: stretch; min-height: 0; height: 100%; /* Let vertical/horizontal pans chain to scrollable ancestors (wheel forwarding also in TS). */ touch-action: pan-x pan-y; } .section.home-agent-stream .memory-context-graphic .agent-stream__panel--memory-graphic { width: 100%; min-width: 0; box-sizing: border-box; height: 500px; min-height: 500px; max-height: 500px; display: flex; flex-direction: column; } .section.home-agent-stream .memory-context-graphic .agent-stream__panel-head { justify-content: flex-start; flex-shrink: 0; } .section.home-agent-stream .memory-context-graphic.agent-stream-chat-rail > .agent-stream { width: 100%; min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__chrome { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; width: 100%; } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__tabs { flex-shrink: 0; display: flex; gap: 0; padding: 0 10px; margin: 0; border-bottom: 1px dashed rgba(0, 0, 0, 0.12); background: rgba(255, 255, 255, 0.42); } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__tab { flex: 1; min-width: 0; margin: 0; padding: 10px 8px 9px; border: none; border-radius: 0; border-bottom: 2px solid transparent; background: transparent; font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 9.5px; font-weight: 600; letter-spacing: 0.055em; text-transform: uppercase; text-align: center; white-space: normal; line-height: 1.25; color: rgba(0, 0, 0, 0.38); cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.15s ease; } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__tab:hover { color: rgba(0, 0, 0, 0.58); } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__tab--active { color: var(--title-color); border-bottom-color: rgba(244, 117, 64, 0.85); } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__tab--demo-hover:not(.memory-context-graphic__tab--active) { color: rgba(0, 0, 0, 0.72); background: rgba(244, 117, 64, 0.06); } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__tab--demo-press:not(.memory-context-graphic__tab--active) { transform: translateY(1px); } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__scroll { flex: 1 1 0; width: 100%; min-width: 0; min-height: 0; align-self: stretch; display: flex; flex-direction: column; overflow: hidden; overscroll-behavior-y: auto; } /* Must include .agent-stream__feed so we beat .agent-stream-chat-rail .agent-stream__feed */ .section.home-agent-stream .memory-context-graphic .agent-stream__feed.memory-context-graphic__feed { flex: 0 0 auto; align-self: stretch; width: 100%; max-width: 100%; min-width: 0; margin: 0; display: flex; flex-direction: column; gap: 0 !important; padding: 8px 14px 12px; overflow: visible; box-sizing: border-box; } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__feed.memory-context-graphic__feed--interaction-locked { pointer-events: none; user-select: none; } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__def-list { list-style: none; margin: 0; width: 100%; padding: 0; display: flex; flex-direction: column; gap: 5px; flex: 0 0 auto; min-height: 0; overflow: visible; } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__def-item { margin: 0; flex-shrink: 0; padding: 6px 9px 6px; border-radius: 11px; font-size: 12.5px; line-height: 1.4; letter-spacing: 0.01em; color: rgba(0, 0, 0, 0.5); background: rgba(255, 255, 255, 0.65); border: 1px solid rgba(0, 0, 0, 0.055); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset; transform: translate3d(0, 0, 0) scale(0.988); opacity: 0.4; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.35s ease, box-shadow 0.35s ease; } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__def-item-text-wrap { list-style: none; margin: 0; padding: 0; flex-shrink: 0; } .section.home-agent-stream .memory-context-graphic button.memory-context-graphic__def-item--text { box-sizing: border-box; display: block; width: 100%; margin: 0; padding: 6px 9px 6px; border-radius: 11px; border: 1px solid rgba(0, 0, 0, 0.055); background: rgba(255, 255, 255, 0.65); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset; font: inherit; text-align: left; cursor: pointer; appearance: none; -webkit-appearance: none; color: inherit; /* Override .def-item transitions — instant when selection moves (avoid laggy unselect). */ transition: none; } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__def-list--text button.memory-context-graphic__def-item--text:not(.memory-context-graphic__def-item--active):hover { transform: translate3d(0, -1px, 0) scale(0.993); opacity: 0.72; background: rgba(255, 255, 255, 0.88); border-color: rgba(0, 0, 0, 0.07); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 4px 14px rgba(0, 0, 0, 0.05); } .section.home-agent-stream .memory-context-graphic button.memory-context-graphic__def-item--text:focus { outline: none; } .section.home-agent-stream .memory-context-graphic button.memory-context-graphic__def-item--text:focus-visible { outline: 2px solid rgba(244, 117, 64, 0.45); outline-offset: 2px; } /* Text/Definitions memories: mono + uppercase label style (matches SQL label / panel chrome) */ .section.home-agent-stream .memory-context-graphic .memory-context-graphic__text-line { display: block; font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 9.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: rgba(0, 0, 0, 0.48); line-height: 1.4; white-space: normal; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; text-overflow: ellipsis; } /* SQL tool cards: barely-there brand tint (no orange hairline border) */ .section.home-agent-stream .memory-context-graphic .memory-context-graphic__def-item--sequel { padding: 8px 10px 8px; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 1px 5px rgba(244, 117, 64, 0.022), 0 0 7px rgba(244, 117, 64, 0.018); } /* Example SQL pairs: inactive cards dimmer (animated list); hover looks clickable (selection stays scripted). */ .section.home-agent-stream .memory-context-graphic .memory-context-graphic__def-list--tools:not(.memory-context-graphic__def-list--static) .memory-context-graphic__def-item.memory-context-graphic__def-item--sequel:not( .memory-context-graphic__def-item--active ) { opacity: 0.16; cursor: pointer; } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__def-list--tools:not(.memory-context-graphic__def-list--static) .memory-context-graphic__def-item.memory-context-graphic__def-item--sequel:not( .memory-context-graphic__def-item--active ):hover { opacity: 0.5; transform: translate3d(0, -1px, 0) scale(0.993); background: rgba(255, 255, 255, 0.58); border-color: rgba(15, 23, 42, 0.12); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 4px 14px rgba(0, 0, 0, 0.055); } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__def-list--tools.memory-context-graphic__def-list--static .memory-context-graphic__def-item.memory-context-graphic__def-item--sequel:hover { cursor: pointer; transform: translate3d(0, -1px, 0) scale(0.996); border-color: rgba(15, 23, 42, 0.1); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 4px 12px rgba(0, 0, 0, 0.045); } @media (prefers-reduced-motion: reduce) { .section.home-agent-stream .memory-context-graphic .memory-context-graphic__def-list--tools:not(.memory-context-graphic__def-list--static) .memory-context-graphic__def-item.memory-context-graphic__def-item--sequel:not( .memory-context-graphic__def-item--active ):hover, .section.home-agent-stream .memory-context-graphic .memory-context-graphic__def-list--tools.memory-context-graphic__def-list--static .memory-context-graphic__def-item.memory-context-graphic__def-item--sequel:hover { transform: none; } } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__def-list--tools .memory-context-graphic__sequel-question { -webkit-line-clamp: 2; line-clamp: 2; margin-bottom: 6px; } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__def-list--tools .memory-context-graphic__sequel-pre { font-size: 10px; line-height: 1.42; max-height: none; overflow: visible; } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__def-list--tools .memory-context-graphic__sequel-foot { font-size: 8.5px; padding-top: 3px; } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__sequel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 5px; } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__sequel-qlabel { font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 9px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(0, 0, 0, 0.38); } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__sequel-actions { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__action-pill { display: inline-flex; align-items: center; gap: 5px; padding: 3px 8px 3px 6px; border-radius: 999px; font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 9.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: lowercase; color: rgba(0, 0, 0, 0.52); background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset; } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__pill-icon { display: block; color: rgba(194, 74, 31, 0.85); flex-shrink: 0; } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__action-more { font-size: 12px; line-height: 1; letter-spacing: 0.06em; color: rgba(0, 0, 0, 0.28); transform: translateY(1px); user-select: none; } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__sequel-question { margin: 0 0 5px; font-size: 11.5px; line-height: 1.35; font-weight: 500; color: rgba(0, 0, 0, 0.72); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__sql-block-label { margin: 0 0 3px; font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 9px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(0, 0, 0, 0.38); } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__sql-shell { position: relative; margin: 0 0 6px; padding: 7px 30px 7px 8px; border-radius: 9px; background: rgba(15, 23, 42, 0.045); border: 1px solid rgba(15, 23, 42, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65); } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__copy-btn { position: absolute; top: 5px; right: 5px; margin: 0; padding: 4px; border: none; border-radius: 6px; background: rgba(255, 255, 255, 0.65); color: rgba(0, 0, 0, 0.38); display: flex; align-items: center; justify-content: center; cursor: pointer; appearance: none; -webkit-appearance: none; font: inherit; line-height: 0; transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease; } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__copy-btn:hover { background: rgba(255, 255, 255, 0.92); color: rgba(0, 0, 0, 0.52); } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__copy-btn:active { transform: scale(0.94); } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__copy-icon { display: block; } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__sequel-pre { margin: 0; padding: 0; font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 9.5px; line-height: 1.38; white-space: pre-wrap; word-break: break-word; max-height: none; overflow: visible; } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__sequel-code { font: inherit; color: rgba(22, 32, 50, 0.9); } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__sql-tok--kw { color: rgba(95, 61, 140, 0.92); font-weight: 600; } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__sql-tok--fn { color: rgba(30, 95, 150, 0.92); font-weight: 600; } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__sql-tok--str { color: rgba(21, 110, 80, 0.9); } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__sequel-foot { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 4px; margin: 0; padding-top: 4px; border-top: 1px solid rgba(0, 0, 0, 0.06); font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 9px; line-height: 1.35; color: rgba(0, 0, 0, 0.4); } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__sequel-foot-sep { color: rgba(0, 0, 0, 0.22); user-select: none; } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__def-list--static .memory-context-graphic__def-item { opacity: 1; transform: none; } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__def-item--active { opacity: 1; transform: scale(1); color: rgba(0, 0, 0, 0.82); background: #fff; border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 7px 18px rgba(0, 0, 0, 0.045), 0 0 8px rgba(244, 117, 64, 0.045), 0 0 16px rgba(244, 117, 64, 0.028); animation: memoryGraphicSchemaPop 0.52s cubic-bezier(0.215, 0.61, 0.355, 1) both, memoryGraphicSchemaPulse 3.5s ease-in-out 0.52s infinite; } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__def-item--active .memory-context-graphic__text-line { color: rgba(0, 0, 0, 0.62); } /* Text/Definitions rows: instant, stable glow — no pulse (animated box-shadow reads as jitter by small mono type). */ .section.home-agent-stream .memory-context-graphic .memory-context-graphic__def-list--text button.memory-context-graphic__def-item--text.memory-context-graphic__def-item--active { transition: none; animation: none; box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 7px 18px rgba(0, 0, 0, 0.045), 0 0 8px rgba(244, 117, 64, 0.045), 0 0 16px rgba(244, 117, 64, 0.028); } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__def-item--active.memory-context-graphic__def-item--sequel { border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 7px 18px rgba(0, 0, 0, 0.045), 0 0 9px rgba(244, 117, 64, 0.052), 0 0 18px rgba(244, 117, 64, 0.032); animation: memoryGraphicSchemaPop 0.52s cubic-bezier(0.215, 0.61, 0.355, 1) both, memoryGraphicSchemaPulseSequel 3.5s ease-in-out 0.52s infinite; } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__def-item--active .memory-context-graphic__sequel-qlabel { color: rgba(0, 0, 0, 0.48); } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__def-item--active .memory-context-graphic__sql-shell { background: rgba(15, 23, 42, 0.055); border-color: rgba(15, 23, 42, 0.09); } @keyframes memoryGraphicSchemaPop { from { opacity: 0.5; transform: translate3d(0, 6px, 0) scale(0.97); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } } @keyframes memoryGraphicSchemaPulse { 0%, 100% { box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 7px 18px rgba(0, 0, 0, 0.045), 0 0 8px rgba(244, 117, 64, 0.045), 0 0 16px rgba(244, 117, 64, 0.028); } 50% { box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 8px 20px rgba(0, 0, 0, 0.048), 0 0 10px rgba(244, 117, 64, 0.056), 0 0 19px rgba(244, 117, 64, 0.036); } } @keyframes memoryGraphicSchemaPulseSequel { 0%, 100% { box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 7px 18px rgba(0, 0, 0, 0.045), 0 0 9px rgba(244, 117, 64, 0.052), 0 0 18px rgba(244, 117, 64, 0.032); } 50% { box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 8px 21px rgba(0, 0, 0, 0.05), 0 0 11px rgba(244, 117, 64, 0.063), 0 0 21px rgba(244, 117, 64, 0.04); } } @media (prefers-reduced-motion: reduce) { .section.home-agent-stream .memory-context-graphic .memory-context-graphic__def-item--active { animation: none; box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 7px 18px rgba(0, 0, 0, 0.045), 0 0 8px rgba(244, 117, 64, 0.048), 0 0 17px rgba(244, 117, 64, 0.03); } .section.home-agent-stream .memory-context-graphic .memory-context-graphic__def-item--active.memory-context-graphic__def-item--sequel { box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 7px 18px rgba(0, 0, 0, 0.045), 0 0 9px rgba(244, 117, 64, 0.055), 0 0 19px rgba(244, 117, 64, 0.034); } } /* ─── Built for Adoption: admin “awaiting review” table (quaternary demo graphic) ─── */ .section.home-agent-stream .adoption-review-graphic.agent-stream-chat-rail { align-self: stretch; min-height: 0; height: 100%; touch-action: pan-x pan-y; } .section.home-agent-stream .adoption-review-graphic .agent-stream__panel--adoption-graphic { width: 100%; min-width: 0; box-sizing: border-box; height: 410px; min-height: 410px; max-height: 410px; display: flex; flex-direction: column; } @media screen and (max-width: 767px) { /* “Your dedicated environment” demo rail: 90px shorter on phones */ .section.home-agent-stream .agent-stream-chat-rail.air-gapped-diagram-rail { height: min(410px, 58vh); min-height: 202px; } } .section.home-agent-stream .adoption-review-graphic .agent-stream__panel-head { justify-content: flex-start; flex-shrink: 0; } .section.home-agent-stream .adoption-review-graphic.agent-stream-chat-rail > .agent-stream { width: 100%; min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; } .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__chrome { flex: 1 1 0; display: flex; flex-direction: column; min-height: 0; width: 100%; } /* Same tab chrome pattern as `.memory-context-graphic__tabs` (Memories rail). */ .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__tabs { flex-shrink: 0; display: flex; gap: 0; padding: 0 10px; margin: 0; border-bottom: 1px dashed rgba(0, 0, 0, 0.12); background: rgba(255, 255, 255, 0.42); } .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__tab { flex: 1; min-width: 0; margin: 0; padding: 10px 8px 9px; border: none; border-radius: 0; border-bottom: 2px solid transparent; background: transparent; font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 9.5px; font-weight: 600; letter-spacing: 0.055em; text-transform: uppercase; text-align: center; white-space: normal; line-height: 1.25; color: rgba(0, 0, 0, 0.38); cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, transform 0.15s ease; } .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__tab:hover { color: rgba(0, 0, 0, 0.58); } .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__tab--active { color: var(--title-color); border-bottom-color: rgba(244, 117, 64, 0.85); } /* Looks clickable but does not switch panels (demo only). */ .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__tab--noninteractive { cursor: pointer; } .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__tab-panel { width: 100%; min-width: 0; } .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__toolbar { flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; padding: 5px 10px 6px; background: rgba(255, 255, 255, 0.18); border-bottom: 1px solid rgba(0, 0, 0, 0.04); } /* De-emphasize chrome so the table reads as the hero */ .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__toolbar--subtle { opacity: 0.55; } .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__search { flex: 0 1 140px; min-width: 0; max-width: 42%; display: flex; align-items: center; gap: 5px; padding: 4px 7px 5px; border-radius: 8px; background: rgba(255, 255, 255, 0.28); border: 1px solid rgba(0, 0, 0, 0.04); box-shadow: none; } .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__search-ic { flex-shrink: 0; color: rgba(0, 0, 0, 0.22); opacity: 0.85; } .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__search-placeholder { font-family: var(--_font-family---inter-tight, "Inter Tight", system-ui, sans-serif); font-size: 9.5px; font-weight: 400; color: rgba(0, 0, 0, 0.26); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__filters { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; } .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__fake-select { display: inline-flex; align-items: center; gap: 3px; padding: 3px 5px 4px; border-radius: 6px; font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 7px; font-weight: 500; letter-spacing: 0.03em; text-transform: uppercase; color: rgba(0, 0, 0, 0.3); background: rgba(255, 255, 255, 0.22); border: 1px solid rgba(0, 0, 0, 0.04); } .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__chev { flex-shrink: 0; color: rgba(0, 0, 0, 0.22); opacity: 0.8; } .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__scroll { flex: 1 1 0; width: 100%; min-width: 0; min-height: 0; overflow: hidden; overscroll-behavior-y: auto; } .section.home-agent-stream .adoption-review-graphic .agent-stream__feed.adoption-review-graphic__feed { flex: 1 1 0; margin: 0; padding: 8px 10px 12px; gap: 0 !important; overflow: auto; min-height: 0; } .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__card-list { display: flex; flex-direction: column; gap: 8px; width: 100%; min-width: 0; } .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__card-list--sweeping { pointer-events: none; } /* Full-contrast tiles by default (post-sweep + reduced-motion). During sweep, dim non-active rows only. */ .section.home-agent-stream .adoption-review-graphic button.adoption-review-graphic__card { margin: 0; padding: 9px 10px 10px; border-radius: 10px; border: 1px solid rgba(0, 0, 0, 0.06); background: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 7px 18px rgba(0, 0, 0, 0.045); display: block; width: 100%; box-sizing: border-box; text-align: left; font: inherit; cursor: pointer; appearance: none; -webkit-appearance: none; color: rgba(0, 0, 0, 0.82); transform: scale(1); opacity: 1; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease; } .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__card-list--sweeping button.adoption-review-graphic__card:not(.adoption-review-graphic__card--active) { border: 1px solid rgba(0, 0, 0, 0.055); background: rgba(255, 255, 255, 0.65); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.75) inset; color: inherit; transform: translate3d(0, 0, 0) scale(0.988); opacity: 0.4; } .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__card-list--sweeping button.adoption-review-graphic__card { cursor: default; } .section.home-agent-stream .adoption-review-graphic button.adoption-review-graphic__card:focus { outline: none; } .section.home-agent-stream .adoption-review-graphic button.adoption-review-graphic__card:focus-visible { outline: 2px solid rgba(15, 23, 42, 0.22); outline-offset: 2px; } .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; min-width: 0; } .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__cell-title { margin: 0; max-width: 100%; font-family: var(--_font-family---inter-tight, "Inter Tight", system-ui, sans-serif); font-size: 11px; line-height: 1.38; color: rgba(22, 32, 50, 0.9); font-weight: 500; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__cell-owner { flex: 1 1 auto; min-width: 0; color: rgba(0, 0, 0, 0.42); font-family: var(--_font-family---inter-tight, "Inter Tight", system-ui, sans-serif); font-size: 10px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__card-head .adoption-review-graphic__feedback { flex-shrink: 0; } .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__feedback { display: grid; grid-template-columns: repeat(2, auto); gap: 3px 5px; align-items: center; justify-content: start; justify-items: center; width: min-content; max-width: 100%; } .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__thumb-wrap { display: inline-flex; align-items: center; justify-content: center; line-height: 0; flex-shrink: 0; } .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__thumb-svg { display: block; flex-shrink: 0; overflow: visible; fill: none; /* Reduce fill-style fragmentation when the chat rail sits on a composited layer */ shape-rendering: geometricPrecision; backface-visibility: hidden; transform: translateZ(0); } .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__thumb-svg--up { color: #1b9e5a; } .section.home-agent-stream .adoption-review-graphic .adoption-review-graphic__thumb-svg--down { color: #e0353a; } /* ─── Dedicated environment diagram ("Your data stays yours" tertiary section) ─── */ .section.home-agent-stream .air-gapped-diagram-rail { width: 100%; min-width: 0; align-self: stretch; touch-action: pan-x pan-y; } /* Fill the rail column height; inner diagram + React Flow stretch to remaining space below banner */ .section.home-agent-stream .agent-stream__panel--air-gap { flex: 1; min-height: 0; align-self: stretch; height: 100%; max-height: none; display: flex; flex-direction: column; background: #f7f7f5; border: 1px dashed rgba(0, 0, 0, 0.22); border-radius: 16px; box-shadow: 0 10px 36px rgba(0, 0, 0, 0.06); overflow: hidden; } .section.home-agent-stream .air-gapped-diagram { position: relative; display: flex; flex-direction: column; flex: 1; min-height: 0; width: 100%; overflow: hidden; border-radius: inherit; background: #f7f7f5; } .section.home-agent-stream .air-gapped-diagram__noise { position: absolute; inset: 0; background-image: url("../images/30noise.png"); background-position: 0 0; background-repeat: repeat; opacity: 0.5; pointer-events: none; mix-blend-mode: multiply; z-index: 0; } .section.home-agent-stream .air-gapped-diagram__banner { position: relative; z-index: 2; flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 10px 16px; padding: 12px 14px; background: rgba(255, 255, 255, 0.92); border-bottom: 1px dashed rgba(0, 0, 0, 0.14); } .section.home-agent-stream .air-gapped-diagram__banner-title { font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 10px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(0, 0, 0, 0.82); } /* Fills space under banner; node positions scale to width & height in TS (BASE_W × BASE_H). */ .section.home-agent-stream .air-gapped-diagram__canvas { container-type: inline-size; container-name: airgap; position: relative; z-index: 1; width: 100%; flex: 1; min-height: 0; height: 100%; overflow: visible; } /* --- React Flow (@xyflow/react): nodes/edges scaled from 400×240 design coords in JS --- */ .section.home-agent-stream .air-gapped-diagram__flow-host { min-height: 0; } .section.home-agent-stream .air-gapped-diagram__flow { width: 100%; height: 100%; } .section.home-agent-stream .air-gapped-diagram__flow .react-flow__attribution { display: none; } .section.home-agent-stream .air-gapped-diagram__flow .react-flow__renderer { overflow: visible; } .section.home-agent-stream .air-gapped-diagram__flow .react-flow__viewport { transform-origin: 0 0; } .section.home-agent-stream .air-gapped-diagram__flow .react-flow__node { padding: 0; border: none; background: transparent; } .section.home-agent-stream .air-gapped-diagram__flow .react-flow__edges { z-index: 0; } .section.home-agent-stream .air-gapped-diagram__flow .react-flow__nodes { z-index: 1; } .section.home-agent-stream .air-gapped-diagram__node--rf { position: relative; left: auto; right: auto; top: auto; transform: none; width: 100%; height: 100%; margin: 0; } .section.home-agent-stream .air-gapped-diagram__node--square { box-sizing: border-box; } .section.home-agent-stream .air-gapped-diagram__node-square-inner { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; box-sizing: border-box; width: 100%; height: 100%; min-height: 0; padding: 4px 5px 6px; text-align: center; } .section.home-agent-stream .air-gapped-diagram__hub.air-gapped-diagram__hub--rf { position: relative; left: auto; top: auto; transform: none; box-sizing: border-box; width: 100%; height: 100%; min-width: 48px; min-height: 48px; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; } .section.home-agent-stream .air-gapped-diagram__handle { width: 12px !important; height: 12px !important; min-width: 0 !important; min-height: 0 !important; border: none !important; background: transparent !important; opacity: 0; pointer-events: none; } .section.home-agent-stream .air-gapped-diagram__rf-edge-base, .section.home-agent-stream .air-gapped-diagram__rf-edge-flow { vector-effect: non-scaling-stroke; } .section.home-agent-stream .air-gapped-diagram__wire-base { stroke: rgba(0, 0, 0, 0.15); } .section.home-agent-stream .air-gapped-diagram__wire-flow { /* stroke: `url(#…)` linearGradient on path (light tail → dark toward hub, matches intro title gradient family) */ stroke-linecap: round; /* Short dash, tight gap; duration ∝ period keeps ~same px/sec along path, faster loop */ stroke-dasharray: 38 258; stroke-dashoffset: 0; animation-duration: 3s; animation-timing-function: linear; animation-iteration-count: infinite; } .section.home-agent-stream .air-gapped-diagram__wire-flow--in { animation-name: airgap-flow-in; } .section.home-agent-stream .air-gapped-diagram__wire-flow--out { animation-name: airgap-flow-out; } @keyframes airgap-flow-in { to { stroke-dashoffset: -296; } } @keyframes airgap-flow-out { to { stroke-dashoffset: 296; } } @media (prefers-reduced-motion: reduce) { .section.home-agent-stream .air-gapped-diagram__wire-flow { animation: none; stroke-dasharray: 38 258; opacity: 0.9; } } .section.home-agent-stream .air-gapped-diagram__node { position: absolute; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 1.5cqw; width: 23cqw; min-width: 52px; min-height: 58px; text-align: center; box-sizing: border-box; } .section.home-agent-stream .air-gapped-diagram__node-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 13cqw; height: 13cqw; border-radius: 2.5cqw; background: #fcfcfb; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* Opaque ~82% black on white — matches banner title tone, no alpha on stroke icons */ color: #2e2e2e; } /* React Flow edge anchor: center of the large square icon tile (not the label chip). */ .section.home-agent-stream .air-gapped-diagram__node-icon .air-gapped-diagram__handle--source-icon-center { position: absolute !important; left: 50% !important; top: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; } /* 5px toward the hub from geometric center so the stroke clears the icon midpoint (hub targets unchanged). */ .section.home-agent-stream .air-gapped-diagram__node-icon .air-gapped-diagram__handle--source-icon-center.air-gapped-diagram__handle--source-icon-offset-exit-right { transform: translate(calc(-50% + 5px), -50%) !important; } .section.home-agent-stream .air-gapped-diagram__node-icon .air-gapped-diagram__handle--source-icon-center.air-gapped-diagram__handle--source-icon-offset-exit-left { transform: translate(calc(-50% - 5px), -50%) !important; } .section.home-agent-stream .air-gapped-diagram__node-icon .air-gapped-diagram__glyph { display: block; width: 46%; height: 46%; } .section.home-agent-stream .air-gapped-diagram__node-icon .air-gapped-diagram__node-icon-llm-logos { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: clamp(1px, 0.28cqw, 3px); width: 74%; height: 36%; box-sizing: border-box; } .section.home-agent-stream .air-gapped-diagram__node-icon-llm-logo { flex: 1 1 0; width: 0; min-width: 0; height: 100%; object-fit: contain; display: block; } .section.home-agent-stream .air-gapped-diagram__node-icon--sm { width: 11cqw; height: 11cqw; } .section.home-agent-stream .air-gapped-diagram__node-icon--sm .air-gapped-diagram__glyph { width: 42%; height: 42%; } .section.home-agent-stream .air-gapped-diagram__node-label-icon-wrap { flex-shrink: 0; width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; color: #2e2e2e; } .section.home-agent-stream .air-gapped-diagram__node-label-icon { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; } .section.home-agent-stream .air-gapped-diagram__node-label-icon .air-gapped-diagram__glyph { display: block; width: 13px; height: 13px; } .section.home-agent-stream .air-gapped-diagram__node-label-wrap { flex-shrink: 0; width: max-content; margin-inline: auto; padding: 4px 6px; box-sizing: border-box; border-radius: 4px; background: #fcfcfb; } .section.home-agent-stream .air-gapped-diagram__node-label-wrap--row { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 3px; width: max-content; margin-top: 10px; } .section.home-agent-stream .air-gapped-diagram__node-label-wrap--row .air-gapped-diagram__node-label { flex: 0 0 auto; text-align: left; } .section.home-agent-stream .air-gapped-diagram__node-label-wrap--user { margin-top: 10px; } /* Match memory-context-graphic__tab label typography (same section rail) */ .section.home-agent-stream .air-gapped-diagram__node-label { display: block; font-family: var(--_font-family---chivo-mono, "Chivo Mono", monospace); font-size: 9.5px; font-weight: 600; letter-spacing: 0.055em; text-transform: uppercase; line-height: 1.25; color: rgba(0, 0, 0, 0.55); white-space: nowrap; margin-right: 4px; } .section.home-agent-stream .air-gapped-diagram__hub-inner { display: flex; align-items: center; justify-content: center; width: 15cqw; height: 15cqw; border-radius: 3cqw; background: #fcfcfb; border: 1px solid rgba(0, 0, 0, 0.1); box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08); } /* React Flow hub node: fill the square node box (same width as height). */ .section.home-agent-stream .air-gapped-diagram__hub.air-gapped-diagram__hub--rf .air-gapped-diagram__hub-inner { width: 100%; height: 100%; aspect-ratio: 1; max-width: 100%; max-height: 100%; box-sizing: border-box; } .section.home-agent-stream .air-gapped-diagram__hub.air-gapped-diagram__hub--rf .air-gapped-diagram__hub-logo { width: 58%; max-width: 44px; height: auto; } .section.home-agent-stream .air-gapped-diagram__hub-logo { display: block; width: 10cqw; height: auto; object-fit: contain; } @media screen and (max-width: 479px) { .section.home-agent-stream .air-gapped-diagram__node { width: 19cqw; } .section.home-agent-stream .air-gapped-diagram__node-icon { width: 11cqw; height: 11cqw; } } /* Get started: sticky headline column while Cal embed scrolls (desktop row layout only) */ @media screen and (min-width: 992px) { .page-wrapper--home .section.contact-us.get-started-booking .contact-us-content { align-items: flex-start; } .page-wrapper--home .section.contact-us.get-started-booking .contact-us-typography { position: sticky; top: calc(env(safe-area-inset-top, 0px) + 5.5rem); align-self: flex-start; flex: 0 1 520px; min-width: 0; justify-content: flex-start; } .page-wrapper--home .section.contact-us.get-started-booking .contact-us-form-wrapper { flex: 1 1 640px; min-width: 0; max-width: 640px; } } /* Homepage: half the default section-padding top on Process + Control FAQ (mobile) */ @media screen and (max-width: 767px) { .page-wrapper--home .section.process > .container.section-padding, .page-wrapper--home .section.faq > .container.section-padding { padding-top: 70px; } } @media screen and (max-width: 479px) { .page-wrapper--home .section.process > .container.section-padding, .page-wrapper--home .section.faq > .container.section-padding { padding-top: 60px; } }