/* Leadarc design-system theme layer. Loaded in so it applies before first paint (no flash), pure CSS (no JS -> no hover fighting). */ /* --- Fonts: force Cal Sans over Framer's Inter --- */ @font-face{font-family:"CS UI";src:url("/assets/fonts/CalSansUI.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap} @font-face{font-family:"CS Display";src:url("/assets/fonts/CalSans-Regular.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap} body, body *{ font-family:"CS UI", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important; } /* Display headings use Cal Sans (Display), the distinctive cut; body/UI stays Cal Sans UI. Matches the design system. */ h1, h2, h3, .ds-h1, .ds-h2, .ds-cta-h, .hiw-title, .hiw-h, .hiw-num, .ds-rstat, .v4-evv, .ds-nb{ font-family:"CS Display","CS UI", ui-sans-serif, system-ui, sans-serif !important; } /* ...and anything nested inside them. `body *` above is !important and matches every descendant, so a inside a heading silently drops to the UI font unless it is lifted here too. Catches the .blue highlight spans and Framer's per-word animation spans on the /lm/ pages. Declared after `body *` so it wins at equal specificity. */ h1 *, h2 *, h3 *, .ds-h1 *, .ds-h2 *, .ds-cta-h *, .hiw-title *, .hiw-h *, .hiw-num *, .ds-rstat *, .v4-evv *{ font-family:"CS Display","CS UI", ui-sans-serif, system-ui, sans-serif !important; } /* Stop the scroll rubber-band from revealing blank space past the header/footer, on every page */ html, body{ overscroll-behavior:none; } [style*="Inter Display"], [style*="Poppins"]{ font-family:"CS Display","CS UI", ui-sans-serif, system-ui, sans-serif !important; } html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--hdr-h,116px) + 14px); } /* --- Design tokens + continuous structural frame (very subtle Attio-style hairlines) --- */ :root{ --ds-bg:#fcfcfc; --ds-hair:rgba(0,0,0,.06); --ds-cross:rgba(0,0,0,.15); } main{ position:relative; } /* faint vertical rails at the content-column edge, continuous down the whole page (desktop only) */ @media(min-width:1240px){ main::before{ content:''; position:absolute; top:0; bottom:0; left:50%; transform:translateX(-50%); width:1200px; border-left:1px solid var(--ds-hair); border-right:1px solid var(--ds-hair); z-index:-1; pointer-events:none; } } /* faint dividers between the major sections */ .ds-sec{ border-top:1px solid var(--ds-hair); } /* Cross markers sit in a clear gap where dividers meet the vertical rails. */ @media(min-width:1240px){ .ds-sec, .rdr-sec, .cta-sec, .cs-hero{ position:relative; } .ds-sec::after, .rdr-sec::after, .cta-sec::after, .cs-hero::after{ content:''; position:absolute; top:-18.5px; left:50%; margin-left:-618px; width:1236px; height:36px; z-index:4; pointer-events:none; background: linear-gradient(var(--ds-cross) 0 0) 10px 17px / 17px 2px no-repeat, linear-gradient(var(--ds-cross) 0 0) 17.5px 9.5px / 2px 17px no-repeat, linear-gradient(var(--ds-cross) 0 0) 1209px 17px / 17px 2px no-repeat, linear-gradient(var(--ds-cross) 0 0) 1216.5px 9.5px / 2px 17px no-repeat, linear-gradient(var(--ds-grid-ground,var(--ds-bg)) 0 0) 0 0 / 36px 36px no-repeat, linear-gradient(var(--ds-grid-ground,var(--ds-bg)) 0 0) 1199px 0 / 36px 36px no-repeat; } .cs-hero::after{ top:auto; bottom:-18.5px; } .rdr-sec, .cta-sec{ --ds-cross:rgba(255,255,255,.22); --ds-grid-ground:#141414; } } /* --- Hide Framer's original banner + nav + footer (replaced by #ds-header / #ds-footer) --- */ .framer-Heryr, [data-framer-name="Desktop Nav"], [data-framer-name="Phone Nav"], .framer-hmgdee-container, [data-framer-name="Footer"]{ display:none !important; } /* --- Design-system header (static, injected after ) --- */ #ds-header{ position:sticky; top:0; z-index:100000; font-family:"CS UI",ui-sans-serif,system-ui,sans-serif; } /* Insulate header/footer from any page's body styles (theme.css sets line-height/font-smoothing) so they render IDENTICALLY on every page. */ #ds-header, #ds-footer{ line-height:normal; -webkit-font-smoothing:auto; -moz-osx-font-smoothing:auto; letter-spacing:normal; } #ds-header a{ text-decoration:none; } #ds-header, #ds-header *, #ds-header *::before, #ds-header *::after, .ds-mobile-overlay, .ds-mobile-overlay *, .ds-fab, .ds-fab *{ box-sizing:border-box; } .ds-banner{ background:#0a0a0a; color:#d4d4d4; font-size:14px; } .ds-banner-inner{ max-width:1200px; margin:0 auto; padding:9px 24px; display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap; text-align:center; } .ds-banner-promo{ display:inline-flex; align-items:center; justify-content:center; gap:9px; color:inherit; } .ds-banner-dot{ width:8px; height:8px; flex:none; display:block; border-radius:50%; background:#ef4444; } .ds-banner-text strong{ color:#fff; font-weight:600; } .ds-nav{ background:rgba(255,255,255,.82); backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px); border-bottom:1px solid rgba(0,0,0,.08); } .ds-nav-inner{ max-width:1200px; margin:0 auto; height:64px; padding:0 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; } .ds-brand{ display:inline-flex; align-items:center; gap:9px; } .ds-brand-mark{ height:21px; width:auto; display:block; } .ds-brand-word{ font-family:"CS Display","CS UI",system-ui,sans-serif; font-weight:600; font-size:16px; letter-spacing:-.015em; line-height:1; color:#0a0a0a; } .ds-brand-tld{ color:#5a83ff; } .ds-nav-links{ display:flex; align-items:center; gap:4px; } .ds-nav-links a{ padding:8px 12px; border-radius:8px; color:#525252; font-size:14px; font-weight:500; white-space:nowrap; transition:color .15s, background .15s; } .ds-nav-links a:hover{ color:#171717; background:rgba(0,0,0,.045); } .ds-nav-cta{ display:flex; align-items:center; gap:10px; } /* About dropdown (CSS hover, no JS) */ .ds-nav-drop{ position:relative; } .ds-nav-about{ display:inline-flex; align-items:center; gap:4px; padding:8px 12px; border-radius:8px; color:#525252; font-family:inherit; font-size:14px; font-weight:500; background:none; border:0; cursor:pointer; } .ds-nav-about:hover{ color:#171717; background:rgba(0,0,0,.045); } .ds-chev{ width:14px; height:14px; transition:transform .15s; } .ds-nav-drop:hover .ds-chev{ transform:rotate(180deg); } .ds-nav-menu{ position:absolute; top:100%; left:0; padding-top:8px; opacity:0; visibility:hidden; transform:translateY(4px); transition:opacity .15s, transform .15s, visibility .15s; z-index:20; } .ds-nav-drop:hover .ds-nav-menu, .ds-nav-drop:focus-within .ds-nav-menu{ opacity:1; visibility:visible; transform:none; } .ds-nav-menu-card{ min-width:200px; padding:6px; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:12px; box-shadow:0 12px 34px rgba(0,0,0,.12); } .ds-nav-menu-card a{ display:flex; align-items:center; gap:10px; padding:8px 10px; border-radius:8px; color:#404040; font-size:14px; font-weight:500; } .ds-nav-menu-card a:hover{ background:rgba(0,0,0,.045); color:#171717; } .ds-av{ width:26px; height:26px; border-radius:50%; object-fit:cover; flex:none; background:#f5f5f5; } .ds-av-logo{ border-radius:7px; object-fit:contain; padding:3px; } /* --- DS buttons (coss-ui spec: 10px radius, 1px border, weight 500, 14px, gap 8) --- */ .ds-btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; height:36px; padding:0 16px; border-radius:10px; border:1px solid transparent; font-weight:500; font-size:14px; line-height:1; white-space:nowrap; cursor:pointer; text-decoration:none; transition:background .15s, border-color .15s; } .ds-btn svg{ width:15px; height:15px; flex:none; } /* animated arrow: chevron tip by default, tail extends on hover (cal.com style) */ .ds-arw{ width:16px; height:16px; flex:none; overflow:visible; } .ds-arw .ln{ transform:scaleX(0); transform-origin:right center; opacity:0; transition:transform .22s ease, opacity .2s; } .ds-arw .hd{ transition:transform .22s ease; } .ds-btn:hover .ds-arw .ln{ transform:scaleX(1); opacity:1; } .ds-btn:hover .ds-arw .hd{ transform:translateX(3px); } .ds-btn-dark{ background:#262626; color:#fafafa; border-color:#262626; box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.05); } .ds-btn-dark:hover{ background:#171717; } .ds-btn-outline{ background:#fff; color:#262626; border-color:rgba(0,0,0,.10); box-shadow:0 1px 2px rgba(0,0,0,.04); } .ds-btn-outline:hover{ background:#fafafa; border-color:rgba(0,0,0,.18); } .ds-btn-dod{ background:#262626; color:#fff; border-color:rgba(255,255,255,.22); box-shadow:inset 0 1px 0 rgba(255,255,255,.12); } .ds-btn-dod:hover{ background:#333; } .ds-btn-sm{ height:32px; padding:0 12px; font-size:13px; } .ds-btn-block{ display:flex; width:100%; } .ds-btn-brand{ background:#0040ff; color:#fff; border-color:#0040ff; box-shadow:inset 0 1px 0 rgba(255,255,255,.16), 0 1px 2px rgba(0,0,0,.08); } .ds-btn-brand:hover{ background:#0036db; border-color:#0036db; } .ds-btn-lg{ height:44px; padding:0 24px; font-size:15px; } /* --- Mobile nav (checkbox hamburger -> full-screen overlay) --- */ .ds-burger{ display:none; } .ds-mobile-overlay{ display:none; } @media (max-width:1200px){ .ds-nav-links{ display:none; } .ds-nav-cta .ds-btn{ display:none; } .ds-burger{ display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:8px; border:1px solid rgba(0,0,0,.1); cursor:pointer; } .ds-burger span, .ds-burger span::before, .ds-burger span::after{ content:""; display:block; width:18px; height:2px; background:#171717; position:relative; } .ds-burger span::before{ position:absolute; top:-6px; left:0; } .ds-burger span::after{ position:absolute; top:6px; left:0; } /* Full-screen overlay menu: fills the viewport; the page behind is locked via html.ds-nav-open. */ .ds-mobile-overlay{ position:fixed; inset:0; z-index:100001; background:#fff; flex-direction:column; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; } html.ds-nav-open .ds-mobile-overlay{ display:flex; } html.ds-nav-open{ overflow:hidden; } .ds-mobile-overlay a{ text-decoration:none; } .ds-mobile-bar{ display:flex; align-items:center; justify-content:space-between; height:64px; padding:0 20px; border-bottom:1px solid rgba(0,0,0,.08); flex:none; } .ds-mobile-bar .ds-brand-mark{ height:21px; width:auto; display:block; } .ds-mobile-close{ width:42px; height:42px; margin-right:-6px; display:inline-flex; align-items:center; justify-content:center; border:1px solid rgba(0,0,0,.1); border-radius:8px; cursor:pointer; } .ds-mobile-close svg{ width:20px; height:20px; fill:none; stroke:#171717; stroke-width:2; stroke-linecap:round; } .ds-mobile-links{ display:flex; flex-direction:column; gap:2px; padding:16px 20px calc(28px + env(safe-area-inset-bottom)); } .ds-mobile-links a:not(.ds-btn){ padding:14px 6px; color:#262626; font-weight:500; font-size:16px; border-bottom:1px solid rgba(0,0,0,.06); } .ds-mobile-links .ds-btn{ height:48px; } .ds-mobile-links .ds-btn-dark{ margin-top:10px; } } /* --- Dark header: JS adds #ds-header.is-dark while a [data-hdr="dark"] section sits behind the sticky header. Colors mirror the DS .dark tokens (bg #141414 / card #191919 / fg neutral-100). --- */ .ds-nav, .ds-brand-mark, .ds-brand-word, .ds-nav-links a, .ds-nav-about, .ds-burger span, .ds-burger span::before, .ds-burger span::after{ transition:background-color .3s ease, color .3s ease, border-color .3s ease, filter .3s ease; } #ds-header.is-dark .ds-nav{ background:#141414; border-bottom-color:rgba(255,255,255,.09); } #ds-header.is-dark .ds-brand-mark{ filter:brightness(0) invert(1); } /* black emblem -> solid white on dark */ #ds-header.is-dark .ds-brand-word{ color:#fff; } /* wordmark -> white; .net accent stays blue */ #ds-header.is-dark .ds-nav-links a, #ds-header.is-dark .ds-nav-about{ color:rgba(255,255,255,.72); } #ds-header.is-dark .ds-nav-links a:hover, #ds-header.is-dark .ds-nav-about:hover{ color:#fff; background:rgba(255,255,255,.08); } #ds-header.is-dark .ds-nav-menu-card{ background:#191919; border-color:rgba(255,255,255,.10); box-shadow:0 12px 34px rgba(0,0,0,.55); } #ds-header.is-dark .ds-nav-menu-card a{ color:rgba(255,255,255,.78); } #ds-header.is-dark .ds-nav-menu-card a:hover{ background:rgba(255,255,255,.06); color:#fff; } #ds-header.is-dark .ds-burger{ border-color:rgba(255,255,255,.2); } #ds-header.is-dark .ds-burger span, #ds-header.is-dark .ds-burger span::before, #ds-header.is-dark .ds-burger span::after{ background:#f5f5f5; } /* --- Design-system footer (static, full-bleed dark, content at header width) --- */ #ds-footer{ background:#0a0a0a; color:#a3a3a3; border-top:1px solid rgba(255,255,255,.07); } #ds-footer a{ text-decoration:none; } .ds-foot-inner{ max-width:1200px; margin:0 auto; padding:64px 24px 40px; } .ds-foot-grid{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr 1fr; gap:40px; } .ds-foot-logo{ display:inline-flex; align-items:center; gap:9px; color:#fff; font-weight:600; font-size:16px; letter-spacing:-.01em; } .ds-foot-logo img{ height:22px; width:auto; } .ds-foot-io{ color:#5a83ff; } /* logo and CTA stack: both are inline-flex, so they share a line without this */ .ds-foot-brand{ display:flex; flex-direction:column; align-items:flex-start; } .ds-foot-brand .ds-btn{ margin-top:22px; } .ds-foot-col h4{ color:#fff; font-size:12px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; margin:0 0 16px; } .ds-foot-col a{ display:flex; align-items:center; gap:9px; color:#a3a3a3; font-size:14px; font-weight:500; margin-bottom:11px; transition:color .15s; } .ds-foot-col a:hover{ color:#fff; } .ds-i{ width:16px; height:16px; flex:none; opacity:.92; } .ds-foot-bottom{ margin-top:52px; padding-top:26px; border-top:1px solid rgba(255,255,255,.08); } .ds-foot-bottom > span{ color:#737373; font-size:13px; } .ds-foot-legal{ color:#525252; font-size:12px; line-height:1.65; margin:14px 0 0; max-width:92ch; } @media (max-width:900px){ .ds-foot-grid{ grid-template-columns:1fr 1fr; gap:30px; } .ds-foot-brand{ grid-column:1 / -1; } } @media (max-width:560px){ .ds-foot-grid{ grid-template-columns:1fr; } .ds-foot-inner{ padding:48px 20px 32px; } } /* --- Results / case-study section (rebuilt clean, DS) --- */ #ds-results{ padding:clamp(64px,9vw,110px) 0; } .ds-results-inner{ max-width:1200px; margin:0 auto; padding:0 24px; } .ds-results-head{ text-align:center; max-width:720px; margin:0 auto clamp(38px,6vw,54px); } .ds-results-head .ds-eyebrow{ display:inline-block; font-size:12px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:#737373; } .ds-results-head h2{ font-size:clamp(1.9rem,3.6vw,2.6rem); font-weight:600; color:#171717; letter-spacing:-.02em; margin:12px 0 0; } .ds-masonry{ columns:2; column-gap:24px; } @media (max-width:820px){ .ds-masonry{ columns:1; } } .ds-rcard{ break-inside:avoid; margin:0 0 24px; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:16px; padding:24px; box-shadow:0 1px 3px rgba(0,0,0,.05); } .ds-rcard-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; min-height:28px; } .ds-rcard-logo{ height:24px; width:auto; max-width:160px; object-fit:contain; object-position:left center; } .ds-rcard-logo--dark{ filter:brightness(0); } .ds-rcard-cat{ font-size:12.5px; color:#737373; font-weight:500; white-space:nowrap; } .ds-rstat{ font-size:21px; font-weight:600; color:#171717; letter-spacing:-.015em; line-height:1.25; margin:0 0 18px; } .ds-rbullets{ list-style:none; margin:0; padding:0; } .ds-rbullets li{ position:relative; padding-left:27px; margin-bottom:11px; font-size:14px; color:#404040; line-height:1.5; } .ds-rbullets li:last-child{ margin-bottom:0; } .ds-rbullets li::before{ content:""; position:absolute; left:0; top:2px; width:17px; height:17px; border-radius:50%; background:rgba(0,64,255,.1); } .ds-rbullets li::after{ content:""; position:absolute; left:5.5px; top:6px; width:5px; height:8px; border:2px solid #0040ff; border-top:0; border-left:0; transform:rotate(40deg); } .ds-rbullets b, .ds-rbullets strong{ color:#171717; font-weight:600; } .ds-rquote{ font-size:15px; color:#404040; line-height:1.62; } .ds-rquote p{ margin:0 0 12px; } .ds-rquote p:last-child{ margin:0; } .ds-rperson{ display:flex; align-items:center; gap:12px; margin-top:18px; } .ds-rav{ width:44px; height:44px; border-radius:50%; object-fit:cover; flex:none; background:#f0f0f0; } .ds-rperson .nm{ font-weight:600; color:#171717; font-size:14.5px; } .ds-rperson .ti{ color:#737373; font-size:13px; } .ds-rperson .co{ margin-left:auto; height:22px; width:auto; max-width:120px; object-fit:contain; opacity:.85; } .ds-case{ display:inline-flex; align-items:center; gap:6px; margin-top:18px; padding:8px 13px; border-radius:9px; background:rgba(0,64,255,.08); color:#0040ff; font-size:13px; font-weight:600; text-decoration:none; transition:background .15s; } .ds-case:hover{ background:rgba(0,64,255,.15); } .ds-case svg{ width:14px; height:14px; } .ds-rcta{ break-inside:avoid; margin:0 0 24px; background:#0a0a0a; border-radius:16px; padding:34px 26px; text-align:center; position:relative; overflow:hidden; } .ds-rcta::before{ content:""; position:absolute; inset:0; background:radial-gradient(ellipse 70% 120% at 50% 0%, rgba(0,64,255,.28), transparent 70%); } .ds-rcta > *{ position:relative; } .ds-rcta h3{ color:#fff; font-size:22px; font-weight:600; letter-spacing:-.015em; margin:0 0 20px; } .ds-rcta .ds-btn{ margin:0 auto; } /* ============ Clean homepage sections (Framer-free) ============ */ .ds-sec{ padding:clamp(60px,8vw,104px) 0; } .ds-sec--soft{ background:transparent; } .ds-wrap{ max-width:1200px; margin:0 auto; padding:0 24px; } .ds-head{ text-align:center; max-width:980px; margin:0 auto clamp(34px,4.5vw,48px); } .ds-pill{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:9999px; background:#fff; border:1px solid rgba(0,0,0,.09); box-shadow:0 5px 14px -3px rgba(0,0,0,.09), 0 2px 5px -2px rgba(0,0,0,.06); font-size:13px; font-weight:500; line-height:1; letter-spacing:-.005em; color:#262626; } .ds-pill svg{ width:14px; height:14px; flex:none; stroke:#262626; } .ds-h2{ font-size:clamp(1.7rem,3vw,2.1875rem); font-weight:600; color:#171717; letter-spacing:-.02em; line-height:1.14; margin:22px 0 0; } .ds-lede{ font-size:clamp(1rem,1.4vw,1.125rem); color:#737373; line-height:1.5; margin:13px 0 0; } .ds-cta-center{ text-align:center; margin-top:clamp(36px,5vw,52px); } .ds-cta-btns{ display:inline-flex; gap:12px; flex-wrap:wrap; justify-content:center; align-items:center; } /* Hero */ .ds-hero{ position:relative; overflow:hidden; padding:clamp(40px,6vw,72px) 0 26px; text-align:center; background:radial-gradient(72% 56% at 50% 92%, rgba(0,64,255,.06), rgba(0,64,255,0) 72%); } .ds-hero-bg{ position:absolute; inset:0; z-index:0; background-image:radial-gradient(rgba(0,0,0,.05) 1px,transparent 1px); background-size:22px 22px; -webkit-mask-image:radial-gradient(ellipse 75% 55% at 50% 0%,#000 30%,transparent 74%); mask-image:radial-gradient(ellipse 75% 55% at 50% 0%,#000 30%,transparent 74%); } .ds-hero .ds-wrap{ position:relative; z-index:1; } .ds-h1{ font-size:clamp(2.3rem,4.4vw,3.15rem); font-weight:600; color:#171717; letter-spacing:-.022em; line-height:1.12; margin:28px auto 0; max-width:min(95%,1040px); } /* Homepage hero headline runs a size bigger than the rest of the site's h1s. Narrower measure + balance so it splits into two even lines (no orphan word). */ .ds-hero-home .ds-h1{ font-size:clamp(2.6rem,5vw,3.6rem); max-width:min(92%,900px); text-wrap:balance; } .ds-nb{ white-space:nowrap; } /* keep "Mid-Market" from breaking at its hyphen */ /* Hero is tall (headline + sub + VSL + form), so the blue glow sits high enough to read above the fold */ .ds-hero-home{ background:radial-gradient(70% 46% at 50% 40%, rgba(0,64,255,.07), rgba(0,64,255,0) 72%); } .ds-h1 .blue{ color:#0040ff; display:block; } .ds-hero-sub{ font-size:clamp(1.05rem,1.6vw,1.25rem); color:#525252; line-height:1.55; margin:18px auto 0; max-width:52ch; } .ds-video{ max-width:920px; margin:clamp(30px,4vw,44px) auto 0; border:1px solid rgba(0,0,0,.08); border-radius:16px; overflow:hidden; box-shadow:0 30px 60px -12px rgba(0,0,0,.18); background:#fff; } .ds-trial{ margin:22px auto 0; max-width:56ch; color:#404040; font-size:14.5px; line-height:1.5; } .ds-trial{ margin:20px auto 0; } .ds-trial .ds-new{ display:inline-block; background:#0040ff; color:#fff; font-weight:600; font-size:11.5px; letter-spacing:.02em; padding:2.5px 8px; border-radius:6px; margin-right:7px; box-shadow:0 1px 3px rgba(0,64,255,.35); } .ds-trial b{ color:#171717; font-weight:600; } .ds-props{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin:26px auto 0; } .ds-prop{ display:inline-flex; align-items:center; gap:7px; padding:8px 14px; border-radius:9999px; background:#fff; border:1px solid rgba(0,0,0,.08); font-size:13.5px; font-weight:500; color:#404040; box-shadow:0 1px 2px rgba(0,0,0,.04); } /* Client logo grid (Attio-style hairline grid; replaces the old sliding marquee) */ .ds-logos{ padding:0 0 clamp(26px,3.4vw,44px); } .ds-logos-label{ display:none; } .ds-marquee{ -webkit-mask-image:none; mask-image:none; overflow:visible; } /* pull the grid out to the content-column edge; on desktop the vertical rails ARE its left/right edges, so drop the grid's own left/right borders (otherwise they double up over the rails and read darker) */ @media(min-width:1240px){ .ds-marquee{ margin-left:-24px; margin-right:-24px; } .ds-logos .ds-marquee-track{ border-left:none; } .ds-logos .ds-marquee-track img:nth-child(5n){ border-right:none; } } /* transparent cells (page bg shows through, no darkening) + hairlines drawn as cell borders */ .ds-marquee-track{ position:relative; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); grid-auto-rows:108px; width:100%; border-top:1px solid var(--ds-hair); border-left:1px solid var(--ds-hair); overflow:visible; animation:none; } .ds-marquee-track img{ width:100%; height:100%; box-sizing:border-box; object-fit:contain; padding:clamp(22px,2.4vw,30px) clamp(44px,5vw,64px); opacity:.68; filter:grayscale(1); border-right:1px solid var(--ds-hair); border-bottom:1px solid var(--ds-hair); } .ds-marquee-track img[aria-hidden="true"]{ display:none; } .ds-marquee-track > .ds-grid-cross{ position:absolute; width:36px; height:36px; left:0; top:0; transform:translate(-50%,-50%); pointer-events:none; background:linear-gradient(var(--ds-cross) 0 0) center / 17px 2px no-repeat,linear-gradient(var(--ds-cross) 0 0) center / 2px 17px no-repeat,var(--ds-bg); } /* The logo grid is an exception: cross markers only at its four outer corners. */ .ds-marquee-track > .ds-grid-cross--tr,.ds-marquee-track > .ds-grid-cross--br{left:100%} .ds-marquee-track > .ds-grid-cross--bl,.ds-marquee-track > .ds-grid-cross--br{top:100%} /* How it works */ .ds-grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; } .ds-card{ background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:16px; padding:26px; box-shadow:0 1px 3px rgba(0,0,0,.05); } .ds-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; } .ds-chip{ display:inline-flex; align-items:center; gap:7px; padding:6px 11px; border-radius:9px; background:#f5f5f5; font-size:12.5px; font-weight:600; color:#404040; } .ds-chip img, .ds-chip svg{ width:16px; height:16px; flex:none; object-fit:contain; } .ds-card h3{ font-size:19px; font-weight:600; color:#171717; letter-spacing:-.01em; margin:0 0 8px; } .ds-card p{ font-size:14.5px; color:#525252; line-height:1.55; margin:0; } .ds-partners{ display:inline-flex; align-items:center; gap:9px; margin:0 auto; padding:8px 16px; background:#fff; border:1px solid rgba(0,0,0,.09); box-shadow:0 4px 12px -3px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.05); border-radius:9999px; font-size:13px; } .ds-partners .lbl{ color:#737373; font-weight:500; } .ds-partners img{ height:13px; width:auto; } .ds-partners .cap{ color:#525252; } .ds-center-row{ display:flex; justify-content:center; } /* Qualify */ .ds-fit-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; } .ds-fit{ background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:16px; padding:28px; box-shadow:0 1px 3px rgba(0,0,0,.05); } .ds-fit-tag{ display:inline-block; padding:5px 12px; border-radius:8px; font-size:13px; font-weight:600; margin-bottom:20px; } .ds-fit-tag.good{ background:rgba(16,185,129,.12); color:#047857; } .ds-fit-tag.bad{ background:rgba(239,68,68,.1); color:#b91c1c; } .ds-fit ul{ list-style:none; margin:0; padding:0; } .ds-fit li{ position:relative; padding-left:30px; margin-bottom:14px; font-size:15px; color:#404040; line-height:1.5; } .ds-fit li:last-child{ margin-bottom:0; } .ds-fit li::before{ position:absolute; left:0; top:1px; width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; } .ds-fit.col-good li::before{ content:"✓"; background:rgba(16,185,129,.12); color:#047857; } .ds-fit.col-bad li::before{ content:"✕"; background:rgba(0,0,0,.05); color:#737373; } /* Compare */ .ds-cmp-toggle{ display:inline-flex; gap:4px; padding:4px; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:12px; box-shadow:0 1px 2px rgba(0,0,0,.04); margin:0 auto clamp(32px,4vw,44px); } .ds-cmp-toggle .ds-tab{ padding:9px 18px; border-radius:9px; font-size:14px; font-weight:500; color:#525252; cursor:default; } .ds-cmp-toggle .ds-tab.active{ background:#171717; color:#fff; } .ds-grid4{ display:grid; grid-template-columns:repeat(4,1fr); gap:24px; } .ds-cmp-card{ background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:16px; padding:24px; box-shadow:0 1px 3px rgba(0,0,0,.05); } .ds-cmp-icon{ width:44px; height:44px; border-radius:11px; background:#ebf0ff; display:flex; align-items:center; justify-content:center; margin-bottom:16px; } .ds-cmp-icon svg, .ds-cmp-icon img{ width:22px; height:22px; color:#0040ff; stroke:#0040ff; } .ds-cmp-card h3{ font-size:17px; font-weight:600; color:#171717; margin:0 0 8px; } .ds-cmp-card p{ font-size:14px; color:#525252; line-height:1.5; margin:0; } .ds-cmp > input{ position:absolute; width:0; height:0; opacity:0; pointer-events:none; } .ds-cmp-toggle label{ padding:9px 18px; border-radius:9px; font-size:14px; font-weight:500; color:#525252; cursor:pointer; transition:background .15s,color .15s; } #cmp-ol:checked ~ .ds-cmp-toggle label:nth-child(1), #cmp-oa:checked ~ .ds-cmp-toggle label:nth-child(2), #cmp-dy:checked ~ .ds-cmp-toggle label:nth-child(3){ background:#171717; color:#fff; } .ds-cmp-card .d{ display:none !important; } #cmp-ol:checked ~ .ds-grid4 .d-ol, #cmp-oa:checked ~ .ds-grid4 .d-oa, #cmp-dy:checked ~ .ds-grid4 .d-dy{ display:block !important; } /* Dashboard */ .ds-split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(32px,5vw,64px); align-items:center; } .ds-frame{ border:1px solid rgba(0,0,0,.08); border-radius:16px; overflow:hidden; box-shadow:0 24px 50px -14px rgba(0,0,0,.16); background:#fff; } .ds-frame img{ width:100%; display:block; } /* Dashboard mockup (replaces the screenshot, container-query scaled, animated) */ .ds-dashwrap{ position:relative; aspect-ratio:16/9; container-type:size; background:#f5f6f8; } .ds-dash{ position:absolute; inset:0; display:flex; flex-direction:column; gap:1.7cqw; padding:2.4cqw 2.6cqw; overflow:hidden; font-family:"CS UI",ui-sans-serif,sans-serif; } .ds-dash-top{ display:flex; align-items:center; justify-content:space-between; } .ds-dash-title{ display:flex; align-items:center; gap:1cqw; font-size:2.1cqw; font-weight:600; color:#171717; } .ds-dash-title .di{ width:2.4cqw; height:2.4cqw; } .ds-dash-title .mut{ color:#9ca3af; font-weight:500; } .ds-dash-filters{ display:flex; gap:1cqw; } .ds-dash-chip{ font-size:1.5cqw; background:#fff; border:1px solid rgba(0,0,0,.08); border-radius:1.4cqw; padding:.7cqw 1.3cqw; color:#525252; box-shadow:0 .3cqw .6cqw rgba(0,0,0,.03); } .ds-dcard{ background:#fff; border:1px solid rgba(0,0,0,.07); border-radius:2cqw; padding:2cqw 2.2cqw; box-shadow:0 1px 2px rgba(0,0,0,.04); } .ds-funnel-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.5cqw; } .ds-funnel-head span:first-child{ font-size:1.3cqw; font-weight:600; letter-spacing:.08em; color:#9ca3af; } .ds-funnel-head .seg{ font-size:1.3cqw; font-weight:600; color:#374151; background:#f1f3f7; padding:.5cqw 1.2cqw; border-radius:1cqw; } .ds-funnel{ display:flex; flex-direction:column; gap:1.3cqw; } .ds-fr{ display:flex; align-items:center; gap:1.6cqw; } .ds-fr .fl{ width:17cqw; text-align:right; font-size:1.5cqw; font-weight:600; color:#374151; line-height:1.12; flex:none; } .ds-fr .fl em{ display:block; font-size:1.15cqw; font-weight:400; font-style:normal; color:#9ca3af; } .ds-fr .fbar{ flex:1; height:3.1cqw; background:#eef0f4; border-radius:1.6cqw; overflow:hidden; } .ds-fr .fill{ display:block; height:100%; width:0; border-radius:1.6cqw; background:linear-gradient(90deg,#2545d6,#5b83ff); transition:width 1.1s cubic-bezier(.2,.8,.2,1); } .ds-dash.in .ds-fr .fill{ width:var(--w); } .ds-fr:nth-child(2) .fill{ transition-delay:.06s } .ds-fr:nth-child(3) .fill{ transition-delay:.12s } .ds-fr:nth-child(4) .fill{ transition-delay:.18s } .ds-fr:nth-child(5) .fill{ transition-delay:.24s } .ds-fr:nth-child(6) .fill{ transition-delay:.3s } .ds-fr .fv{ width:8cqw; text-align:right; font-size:1.85cqw; font-weight:700; color:#171717; flex:none; } .ds-stats-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4cqw; } .ds-stat2{ background:#fff; border:1px solid rgba(0,0,0,.07); border-radius:1.8cqw; padding:1.6cqw; box-shadow:0 1px 2px rgba(0,0,0,.04); transition:transform .18s ease, box-shadow .18s ease; } .ds-stat2:hover{ transform:translateY(-.7cqw); box-shadow:0 2.4cqw 4cqw -1cqw rgba(0,0,0,.14); } .ds-stat2.blue{ background:linear-gradient(155deg,#3670ff,#1650e6); border-color:transparent; box-shadow:0 1.5cqw 3cqw -1cqw rgba(0,64,255,.4); } .ds-stat2 .sh{ display:flex; align-items:center; font-size:1.4cqw; font-weight:500; color:#6b7280; } .ds-stat2.blue .sh{ color:rgba(255,255,255,.82); } .ds-stat2 .sv{ font-size:3.7cqw; font-weight:700; letter-spacing:-.02em; color:#111827; margin-top:.5cqw; line-height:1; } .ds-stat2.blue .sv{ color:#fff; } .ds-stat2 .ss{ font-size:1.2cqw; color:#9ca3af; margin-top:.7cqw; } .ds-stat2.blue .ss{ color:rgba(255,255,255,.72); } .ds-badge-g{ font-size:1.1cqw; background:#dcfce7; color:#16a34a; padding:.2cqw .8cqw; border-radius:.8cqw; margin-left:.6cqw; font-weight:600; } /* Process */ .ds-step{ display:inline-flex; align-items:center; justify-content:center; padding:6px 14px; border-radius:9999px; background:#0040ff; color:#fff; font-size:13px; font-weight:600; margin-bottom:16px; } /* FAQ */ .ds-faq{ max-width:820px; margin:0 auto; border:1px solid rgba(0,0,0,.08); border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.05); } .ds-faq details{ border-bottom:1px solid rgba(0,0,0,.08); } .ds-faq details:last-child{ border-bottom:0; } .ds-faq summary{ list-style:none; cursor:pointer; padding:22px 24px; display:flex; justify-content:space-between; align-items:center; gap:20px; font-size:16.5px; font-weight:600; color:#171717; } .ds-faq summary::-webkit-details-marker{ display:none; } .ds-faq summary::after{ content:"+"; font-size:24px; font-weight:400; color:#737373; line-height:1; transition:transform .2s; } .ds-faq details[open] summary::after{ content:"−"; color:#0040ff; } .ds-faq .ds-faq-body{ padding:0 24px 24px; color:#525252; font-size:15px; line-height:1.65; max-width:70ch; } /* Final CTA band */ /* --- Final CTA: dark-mode card (DS dark tokens), scrolling logo marquee, no watermark, narrower than full width --- */ .ds-cta{ max-width:900px; margin:0 auto; background:#141414; border:1px solid rgba(255,255,255,.08); border-radius:20px; padding:clamp(38px,4.5vw,58px) clamp(24px,4vw,54px) clamp(26px,3.2vw,36px); text-align:center; position:relative; overflow:hidden; box-shadow:0 34px 80px -34px rgba(0,0,0,.55); } .ds-cta-chip{ display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:9999px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); font-size:13px; font-weight:500; line-height:1; letter-spacing:-.005em; color:#e5e5e5; } .ds-cta-chip svg{ width:14px; height:14px; flex:none; stroke:#d4d4d4; } .ds-cta-h{ color:#fafafa; font-size:clamp(2rem,3.8vw,2.8rem); font-weight:600; letter-spacing:-.02em; line-height:1.13; margin:20px 0 0; } .ds-cta-sub{ color:#9a9a9a; font-size:clamp(1rem,1.35vw,1.1rem); line-height:1.55; margin:16px auto 0; max-width:52ch; } .ds-cta .ds-btn{ margin:26px auto 0; } .ds-btn-ghost-dark{ background:rgba(255,255,255,.06); color:#fafafa; border-color:rgba(255,255,255,.2); } .ds-btn-ghost-dark:hover{ background:rgba(255,255,255,.13); border-color:rgba(255,255,255,.32); } .ds-cta .ds-cta-btns{ margin:26px auto 0; } .ds-cta .ds-cta-btns .ds-btn{ margin:0; } /* dark final-CTA form: keep email + button on one row (undo the .ds-cta .ds-btn margin) and darken the inputs for the black card */ .ds-cta .ds-wl-form .ds-btn{ margin:0; } .ds-cta .ds-wl-form input, .ds-cta .wl-flag{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.16); color:#fafafa; box-shadow:none; } .ds-cta .ds-wl-form input::placeholder{ color:#8f8f8f; } .ds-cta .ds-wl-form input:focus{ border-color:#5570ff; box-shadow:0 0 0 3px rgba(85,112,255,.28); } .ds-cta-trial{ color:#a8a8a8; font-size:14px; line-height:1.5; margin:16px auto 0; max-width:62ch; } .ds-cta-trial b{ color:#fff; font-weight:600; } .ds-cta-trial .ds-new{ display:inline-block; background:#0040ff; color:#fff; font-size:11px; font-weight:600; padding:2px 7px; border-radius:6px; margin-right:5px; } .ds-cta-marq{ margin-top:clamp(32px,4vw,46px); overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%); mask-image:linear-gradient(90deg,transparent 0,#000 13%,#000 87%,transparent 100%); } .ds-cta-marq-track{ display:flex; align-items:center; gap:clamp(40px,4.5vw,64px); width:max-content; animation:ds-marq 42s linear infinite; } .ds-cta-marq-track img{ height:24px; width:auto; flex:none; opacity:.5; filter:brightness(0) invert(1); } /* Responsive */ @media (max-width:900px){ .ds-grid4{ grid-template-columns:1fr 1fr; } } @media (max-width:820px){ .ds-grid3, .ds-grid4, .ds-fit-grid, .ds-split{ grid-template-columns:1fr; } } /* ============================================================ MOBILE POLISH: everything below is mobile-only unless noted. Desktop is untouched (all rules live inside max-width queries or apply to elements only rendered on mobile). ============================================================ */ /* responsive text-swap helpers: show short copy on phones, full copy on desktop */ .ds-m-only{ display:none; } @media (max-width:600px){ .ds-m-hide{ display:none !important; } .ds-m-only{ display:inline !important; } } /* --- Floating bottom action bar (phones/tablets ≤900px) --- */ .ds-fab{ display:none; } @media (max-width:1200px){ .ds-fab{ display:flex; position:fixed; left:0; right:0; bottom:0; z-index:9000; gap:10px; padding:9px 14px calc(9px + env(safe-area-inset-bottom)); align-items:stretch; background:rgba(255,255,255,.9); backdrop-filter:saturate(180%) blur(12px); -webkit-backdrop-filter:saturate(180%) blur(12px); border-top:1px solid rgba(0,0,0,.08); box-shadow:0 -6px 22px -10px rgba(0,0,0,.22); } .ds-fab-apply{ flex:1 1 auto; height:48px; font-size:15px; white-space:nowrap; } body{ padding-bottom:calc(76px + env(safe-area-inset-bottom)); } } /* hide the floating bar while the mobile menu overlay is open */ html.ds-nav-open .ds-fab{ display:none; } /* --- Phone-only visual tweaks (≤600px) --- */ @media (max-width:600px){ /* Let the full banner message wrap beside the booking button. */ .ds-banner{ font-size:12px; } .ds-banner-inner{ flex-wrap:nowrap; gap:8px; padding:7px 10px; } .ds-banner-promo{ min-width:0; gap:7px; } .ds-banner-text{ white-space:normal; text-align:left; line-height:1.35; } .ds-banner .ds-btn{ height:30px; padding:0 9px; margin:0; flex:none; font-size:12px; } .ds-banner .ds-btn .ds-arw{ width:12px; height:12px; } /* Homepage headline: a bit smaller, still big */ .ds-hero .ds-h1{ font-size:1.85rem; line-height:1.16; } .ds-hero-home .ds-h1{ font-size:2.1rem; line-height:1.16; } /* Logo grid: fewer columns + tighter cells on phones */ .ds-marquee-track{ grid-template-columns:repeat(2,minmax(0,1fr)); grid-auto-rows:86px; } .ds-marquee-track img{ padding:16px 38px; } .ds-marquee-track > .ds-grid-cross{width:28px;height:28px} .ds-cta-marq-track{ gap:36px; } .ds-cta-marq-track img{ height:17px; } /* "Partners with" chip: shorter copy, smaller, one line */ .ds-partners{ font-size:11px; padding:6px 12px; gap:7px; white-space:nowrap; } .ds-partners img{ height:11px; } /* Compare switcher: smaller text, short labels, fits one line */ .ds-cmp-toggle{ width:100%; max-width:420px; } .ds-cmp-toggle label{ flex:1; text-align:center; padding:8px 8px; font-size:12.5px; white-space:nowrap; } /* Results cards: tighter padding, category never overflows */ .ds-rcard{ padding:20px; } .ds-rcard-cat{ font-size:11.5px; } .ds-rstat{ font-size:19px; } /* Results CTA card: smaller, centered, fits */ .ds-rcta{ padding:26px 18px; } /* Long CTA buttons: wrap + shrink so they never overflow a narrow card (excludes the waitlist form button) */ .ds-btn-lg:not(.ds-wl-btn){ display:flex; width:100%; max-width:340px; margin-left:auto; margin-right:auto; white-space:normal; height:auto; min-height:46px; padding:11px 16px; font-size:13.5px; line-height:1.25; text-align:center; } /* Dark CTA card: keep the chip on one line, leave the rest as-is */ .ds-cta{ padding:34px 18px 26px; } .ds-cta-chip{ font-size:clamp(10px,3vw,12.5px); white-space:nowrap; padding:5px 11px; letter-spacing:-.01em; } /* Waitlist review carousel: smaller cards + padding so it fits the screen */ .ds-rev{ padding:6px 0 2px; } .ds-rev-card{ flex:0 0 80vw; } .ds-rev-track{ gap:14px; } /* Form inputs at 16px so iOS never zooms on focus */ .ds-wl-form input{ font-size:16px; } /* Any inline 2-up grid (e.g. company story cards) must collapse to 1 column on phones */ [style*="grid-template-columns:1fr 1fr"], [style*="grid-template-columns: 1fr 1fr"]{ grid-template-columns:1fr !important; } }