/* Shared visual rules, loaded after page styles. UI crops keep their own coordinates;
   their surrounding frames, editorial photos, cards, and typography are consistent. */
:root{--layout-width:1200px;--section-space:clamp(52px,6vw,80px);--panel-radius:20px;--card-radius:14px;--brand-ink:#13233c;--brand-muted:#536078;--surface:#f5f8fc;--edge:#dfe7f1;--panel-shadow:0 16px 40px rgb(25 55 98 / .08)}
body{font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--brand-ink);-webkit-font-smoothing:antialiased}
:is(.fw-wrap,.pd-wrap,.about-wrap,.price-wrap,.blog-wrap){width:min(calc(100% - 64px),var(--layout-width))}
.site-header{padding-inline:max(24px,calc((100% - var(--layout-width))/2));box-shadow:0 2px 14px #18365c04}
.main-nav{gap:clamp(14px,1.8vw,28px)}
.site-header .brand{font-size:25px}
.site-footer{background:#11243f;padding-top:60px}
.footer-inner,.footer-bottom{max-width:var(--layout-width)}
.footer-brand{color:#fff}
.footer-copy,.footer-col a,.footer-bottom{color:#c7d6e8}
.footer-col a{font-size:14px;line-height:1.6}
.footer-col strong{font-size:14px}
.footer-bottom{border-top-color:#ffffff20;font-size:12px}
.seo-breadcrumbs{width:min(calc(100% - 64px),var(--layout-width));padding-block:22px}
:is(.fw-hero,.pd-hero,.about-hero .about-split,.price-hero){grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px;align-items:center}
.fw-hero{padding-block:66px 74px}
.pd-hero{padding-block:32px 70px}
.price-hero{padding-block:32px 70px}
.about-hero{padding-block:54px 64px;background:linear-gradient(135deg,#fafcff,#edf5ff)}
:is(.fw-hero h1,.product-detail-page h1,.about-main h1,.price-hero h1,.blog-hero h1,.catalog-page main>h1){font-size:clamp(34px,3.85vw,52px);line-height:1.1;letter-spacing:-.045em;color:var(--brand-ink);font-weight:750;text-wrap:balance}
:is(.fw-intro,.pd-intro,.about-main .about-lead,.price-hero-copy){font-size:17px;line-height:1.75;color:var(--brand-muted);margin-block:22px}
:is(.fw-section h2,.fw-integrations h2,.product-detail-page h2,.about-main h2,.price-heading h2,.blog-section-head h2){font-size:clamp(28px,3vw,40px);line-height:1.16;letter-spacing:-.035em;text-wrap:balance}
:is(.fw-eyebrow,.pd-eyebrow,.about-eyebrow,.price-eyebrow){font-size:11px;line-height:1.6;letter-spacing:.1em;font-weight:750}
:is(.fw-section,.pd-section,.about-section){padding-block:var(--section-space)}
:is(.fw-section-heading,.pd-section-heading){margin-bottom:32px}
:is(.fw-button,.pd-button,.about-cta-button,.price-button,.nav-cta){min-height:48px;padding:13px 20px;border-radius:9px;box-shadow:none;font-size:14px;font-weight:700;line-height:1.4;transition:background .18s ease,box-shadow .18s ease}
:is(.fw-button,.pd-button,.about-cta-button,.price-button,.nav-cta):hover{box-shadow:0 5px 16px #1b58d51a;transform:none}
/* Every hero has the same outer canvas, regardless of source image dimensions. */
.visual-panel{width:100%;max-width:none;min-width:0;margin:0;padding:0;overflow:hidden;border:1px solid var(--edge);border-radius:var(--panel-radius);background:#fff;box-shadow:var(--panel-shadow);transform:none;display:block;align-self:center}
.visual-canvas{position:relative;display:grid;place-items:center;width:100%;aspect-ratio:4/3;padding:22px;background:radial-gradient(ellipse at 50% 20%,#e4eeff,#f5f8fd 75%);overflow:hidden}
.visual-panel>.visual-canvas>:is(.fw-dashboard,.pd-crop){width:100%;min-width:0;border-radius:10px;box-shadow:0 8px 20px #17345c0b}
.visual-panel .fw-dashboard{margin:0}
.visual-panel .about-product-crop{width:92%;min-width:0;justify-self:center}
.visual-panel>.visual-canvas>.pd-photo{width:100%;height:100%;aspect-ratio:auto;border-radius:0}
.visual-canvas-photo{padding:0}
.visual-canvas-photo img{width:100%;height:100%;object-fit:cover}
.visual-panel>figcaption{display:block;min-height:54px;padding:15px 20px;margin:0;border-top:1px solid var(--edge);color:#536078;font-size:12px;line-height:1.65;text-align:left;background:#fff}
.fw-hero-visual>figcaption{min-height:76px}
.fw-hero-visual figcaption a{margin-top:3px}
.price-hero-visual .price-hero-art{width:100%;height:100%;max-height:none;object-fit:contain;display:block}
/* Editorial photos share one landscape ratio and never stretch to text height. */
:is(.fw-story-photo,.about-story-photo,.about-values-photo){width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:4/3;border-radius:var(--panel-radius);overflow:hidden;margin:0;align-self:center;border:1px solid var(--edge)}
:is(.fw-story-photo,.about-story-photo,.about-values-photo)>img{width:100%;height:100%;min-height:0;object-fit:cover;display:block}
.about-story-photo>img{object-position:55% center}
.about-values-photo>img{object-position:center 48%}
.about-values .about-split{align-items:center}
.pd-context>img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:var(--panel-radius);border:1px solid var(--edge)}
:is(.fw-story,.about-split,.pd-context){gap:52px}
.fw-quote blockquote{font-size:18px;line-height:1.75}
/* Card collections use matching media rectangles, gutters, and aligned link rows. */
:is(.fw-product-grid,.pd-cards,.blog-grid,.catalog-page .grid){gap:22px}
:is(.fw-product,.pd-card,.blog-card,.catalog-page .product,.feature-card,.plan-card){border-radius:var(--card-radius);border-color:var(--edge);box-shadow:none}
:is(.fw-product,.pd-card){padding:28px}
.pd-card h3,.fw-workflows h3{font-size:21px;line-height:1.3}
.pd-card p{font-size:15px;line-height:1.75}
.fw-product-primary{background:linear-gradient(120deg,#fff,#f8fbff)}
.fw-crm-mark{background:none}
.fw-crm-mark strong{font-size:28px;border-radius:10px}
.fw-workflows article{border-top-color:#c1d4f4}
.catalog-page main{width:min(calc(100% - 64px),var(--layout-width));max-width:none;padding:0 0 72px;margin-inline:auto}
.catalog-page .seo-breadcrumbs{width:100%}
.catalog-page .intro{font-size:17px;line-height:1.75;max-width:740px}
.catalog-page .grid{margin-top:36px}
.catalog-page .product{padding:0 0 24px;gap:12px;box-shadow:none;align-items:stretch}
.catalog-media{width:100%;aspect-ratio:16/10;overflow:hidden;background:#edf3fb;border-bottom:1px solid var(--edge)}
.catalog-page .product .catalog-media img{display:block;width:100%;height:100%;aspect-ratio:auto;object-fit:cover;border-radius:0;object-position:center}
.catalog-page .product:first-child .catalog-media img{object-fit:contain;padding:10px;background:#edf3fb}
.catalog-page .product :is(.eyebrow,h2,.description,.open){margin-inline:22px}
.catalog-page .product h2{font-size:23px;line-height:1.25;letter-spacing:-.03em}
.catalog-page .product .eyebrow{margin-top:7px;font-size:10px;letter-spacing:.09em}
.catalog-page .description{font-size:15px;line-height:1.65}
.catalog-page .open{padding-top:12px;font-size:14px}
.catalog-page .product:hover{transform:translateY(-3px);box-shadow:0 12px 24px #18345f0b}
/* Featured and smaller insights photos maintain the same landscape media shape. */
.blog-hero{padding:36px 24px 42px}
.blog-feature{grid-template-columns:1fr 1fr;align-items:start;border-radius:var(--panel-radius);box-shadow:none}
.blog-feature>img,.blog-card>img{display:block;width:100%;height:auto;min-height:0;max-height:none;aspect-ratio:4/3;object-fit:cover}
.blog-feature-copy{padding:30px;align-self:center}
.blog-feature h2{font-size:32px;line-height:1.15}
.blog-feature p,.blog-card p{font-size:15px;line-height:1.7}
.blog-card-copy{padding:26px}
.blog-cta{border:1px solid var(--edge);border-radius:var(--panel-radius);padding:36px}
/* Equal portraits and restrained team cards keep a clear baseline. */
.about-team-grid{gap:18px}
.about-person{padding:24px 16px;border-radius:var(--card-radius);border-color:var(--edge)}
.about-portrait{width:112px;max-width:100%;aspect-ratio:1;margin-bottom:18px}
.about-person h3{font-size:18px;line-height:1.35}
.about-person p{font-size:14px;line-height:1.65}
.about-team{background:#f5f8fc}
.about-values{background:#fafbfd}
.about-team-principles .about-icon{width:54px;height:54px}
.about-vision{padding:22px;border-radius:var(--card-radius)}
.about-cta{width:min(calc(100% - 64px),var(--layout-width));margin-top:64px;grid-template-columns:1.15fr 1fr;border-radius:var(--panel-radius);box-shadow:none;border:1px solid var(--edge)}
.about-cta-copy{padding:42px}
.about-cta-photo{width:100%;height:100%;min-height:0;object-fit:cover}
.about-cta h2{font-size:38px}
.about-benefits{gap:16px}
/* Pricing gets the same scale and spacing as the rest of the site. */
.plan-card{padding:28px 22px 24px}
.plan-card.featured{border-color:#2863ed;box-shadow:0 0 0 1px #2863ed}
.plan-card .plan-price{font-size:32px;line-height:1.2;padding-top:24px}
.plan-card .price-button{min-height:44px;margin-top:14px;font-size:13px}
.plan-card .plan-billing{margin-top:8px;font-size:12px}
.price-heading{margin-bottom:34px}
.price-heading p{font-size:16px;line-height:1.75;max-width:720px}
.comparison th,.comparison td{padding:13px 14px}
.feature-card{padding:26px}
.feature-card h3{font-size:18px;line-height:1.35}
.feature-card p{font-size:15px;line-height:1.65}
.fw-form-card{border-radius:var(--panel-radius);box-shadow:none;padding:32px}
.fw-integrations,.pd-cta{background:#11243f}
:is(.fw-integrations,.pd-cta) h2{color:white}
.home-page .faq-section{padding-block:var(--section-space)}
.faq-item{box-shadow:none}
@media(min-width:1600px){.fw-hero{padding-block:76px}}
@media(max-width:1000px){
 :is(.fw-hero,.pd-hero,.about-hero .about-split,.price-hero,.fw-story,.about-split,.pd-context){gap:32px}
 .visual-canvas{padding:16px}
 .visual-canvas-photo{padding:0}
 .about-cta-copy{padding:32px}
 .blog-feature-copy{padding:24px}
 .blog-feature h2{font-size:28px}
}
@media(max-width:800px){
 :is(.fw-wrap,.pd-wrap,.about-wrap,.price-wrap,.blog-wrap,.seo-breadcrumbs){width:calc(100% - 40px)}
 .site-header{padding-inline:16px}
 .site-header .brand{font-size:22px}
 .site-header>.nav-cta{min-height:40px;padding:10px;font-size:12px}
 :is(.fw-hero,.pd-hero,.about-hero .about-split,.price-hero,.fw-story,.about-split,.pd-context){grid-template-columns:1fr;gap:32px}
 .fw-hero{padding-block:40px 52px}
 .pd-hero,.price-hero{padding-block:20px 52px}
 .about-hero{padding-block:36px 48px}
 :is(.fw-hero h1,.product-detail-page h1,.about-main h1,.price-hero h1,.blog-hero h1,.catalog-page main>h1){font-size:clamp(34px,6vw,46px)}
 .visual-panel{max-width:620px;justify-self:center;margin-inline:auto}
 .visual-canvas{padding:22px}
 .visual-canvas-photo{padding:0}
 :is(.fw-story-photo,.about-story-photo,.about-values-photo,.pd-context>img){max-width:620px;justify-self:center}
 .about-cta{width:calc(100% - 40px);grid-template-columns:1fr;margin-top:48px}
 .about-cta-photo{height:auto;aspect-ratio:4/3;max-height:400px;object-position:center 40%}
 .about-cta h2{font-size:34px}
 .catalog-page main{width:calc(100% - 40px)}
 .catalog-page .seo-breadcrumbs{width:100%}
 .blog-feature{grid-template-columns:1fr}
 .blog-feature>img{aspect-ratio:4/3}
 .blog-feature-copy{padding:28px}
 .blog-hero{padding:24px 20px 32px}
 .comparison th,.comparison td{padding:10px 8px}
}
@media(max-width:480px){
 :is(.fw-wrap,.pd-wrap,.about-wrap,.price-wrap,.blog-wrap,.seo-breadcrumbs){width:calc(100% - 32px)}
 .visual-canvas{padding:14px}
 .visual-canvas-photo{padding:0}
 .visual-panel{border-radius:16px}
 .visual-panel>figcaption{padding:12px 16px;font-size:11px;min-height:46px}
 .fw-hero-visual>figcaption{min-height:68px}
 :is(.fw-product,.pd-card,.blog-card-copy,.fw-form-card){padding:24px}
 .about-cta{width:calc(100% - 32px);margin-top:40px}
 .about-cta-copy{padding:28px 24px}
 .catalog-page main{width:calc(100% - 32px)}
 .catalog-page .seo-breadcrumbs{width:100%}
 .catalog-page .grid{gap:22px}
 .about-person{padding:20px 12px}
 .about-portrait{width:100px}
 .about-person h3{font-size:17px}
 .about-team-grid{gap:12px}
 .blog-feature-copy{padding:24px}
 .blog-cta{padding:28px 22px}
 .pd-actions a,.fw-actions a{width:100%;justify-content:space-between}
 .footer-inner{gap:28px 18px}
}
@media(prefers-reduced-motion:reduce){:is(.fw-button,.pd-button,.about-cta-button,.price-button,.nav-cta,.catalog-page .product){transition:none;transform:none}}
/* Grid children may shrink inside the fixed media canvas on narrow screens. */
.visual-canvas,.visual-canvas>.pd-visual{min-width:0;min-height:0}
/* Use the original wordmarks at their intrinsic proportions. */
.brand .brand-logo{display:block;flex:none;width:auto;height:30px;max-width:100%;object-fit:contain}
.footer-brand .brand-logo{height:36px}
@media(max-width:800px){.site-header .brand-logo{height:26px}}
/* FAQ answers stay readable and stable when expanded, with useful deep-link targets. */
:is(.faq-item,.pd-faq details,.pricing-faq details){scroll-margin-top:calc(var(--nav-h) + 20px)}
:is(.faq-answer,.pd-faq details p,.pricing-faq details p) a{color:#1857d8;text-decoration:underline;text-underline-offset:3px}
.pricing-faq summary{font-size:14px;line-height:1.5;padding:17px}
.pricing-faq details p{font-size:14px;line-height:1.75;padding:0 17px 17px}
.pricing-faq-list{align-items:start}
/* Brand artwork retains its proportions inside equally sized integration tiles. */
.fw-integration-list{gap:12px}
.fw-integration-list li{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;min-width:0;padding:14px 12px;border:1px solid #ffffff24;border-radius:12px;background:#ffffff08;color:#f5f8ff;font-size:13px;font-weight:600;line-height:1.4}
.fw-integration-icon{display:grid;place-items:center;width:100%;height:64px;padding:12px;border-radius:8px;background:#fff;overflow:hidden}
.fw-integration-icon img{display:block;width:auto;height:auto;max-width:100%;max-height:38px;object-fit:contain}
@media(max-width:540px){.fw-integration-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}.fw-integration-list li{padding:10px 8px;gap:10px;font-size:12px}.fw-integration-icon{height:56px;padding:8px}.fw-integration-icon img{max-height:32px}}
/* Product feature sections: an editorial introduction beside illustrated pointers. */
.pd-feature-section{--feature-accent:#2863ed;--feature-soft:#eaf1ff;--feature-edge:#cdddfb}
.pd-feature-section[data-accent=violet]{--feature-accent:#7453c8;--feature-soft:#f0ebfb;--feature-edge:#ded4f5}
.pd-feature-section[data-accent=teal]{--feature-accent:#087f75;--feature-soft:#e7f5f1;--feature-edge:#c1e5db}
.pd-feature-section[data-accent=amber]{--feature-accent:#ad6418;--feature-soft:#fff3e2;--feature-edge:#f1dcb9}
.pd-feature-section[data-accent=rose]{--feature-accent:#bb466b;--feature-soft:#fcecf2;--feature-edge:#f0cfda}
.pd-feature-section[data-accent=indigo]{--feature-accent:#535dc4;--feature-soft:#edefFC;--feature-edge:#d4d8f5}
.pd-feature-section>.pd-wrap{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr);gap:52px;align-items:start}
.pd-feature-section .pd-section-heading{margin:8px 0 0;max-width:390px}
.pd-feature-section .pd-section-heading .pd-eyebrow{display:inline-block;color:var(--feature-accent);padding:7px 10px;border:1px solid var(--feature-edge);border-radius:6px;background:var(--feature-soft);font-size:10px;letter-spacing:.065em;line-height:1.6;margin-bottom:20px}
.pd-feature-section .pd-section-heading h2{font-size:clamp(28px,2.6vw,36px);line-height:1.18;letter-spacing:-.035em}
.pd-feature-section .pd-section-heading>p:last-child{font-size:16px;line-height:1.8;margin-top:20px}
.pd-feature-section .pd-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.pd-feature-section .pd-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:20px;min-width:0;padding:26px;border:1px solid var(--edge);border-radius:16px;background:#fff;box-shadow:0 5px 18px #1b355505;overflow:hidden}
.pd-feature-section .pd-card:before{content:'';position:absolute;top:0;left:26px;width:38px;height:3px;border-radius:0 0 3px 3px;background:var(--feature-accent);opacity:.7}
.pd-feature-icon{display:grid;place-items:center;flex:none;width:46px;height:46px;border:1px solid var(--feature-edge);border-radius:13px;background:var(--feature-soft);color:var(--feature-accent);box-shadow:0 3px 6px #19345604}
.pd-feature-icon svg{display:block;width:24px;height:24px}
.pd-feature-copy{min-width:0}
.pd-feature-section .pd-card h3{font-size:19px;line-height:1.35;letter-spacing:-.025em;color:#192b45;margin:0}
.pd-feature-section .pd-card p{font-size:15px;line-height:1.75;margin:10px 0 0;color:#536078}
.pd-feature-section .pd-card:last-child:nth-child(odd){grid-column:1/-1;flex-direction:row;align-items:flex-start;background:linear-gradient(115deg,#fff,var(--feature-soft));border-color:var(--feature-edge)}
.pd-feature-section .pd-card:last-child:nth-child(odd):before{width:3px;height:36px;top:26px;left:0;border-radius:0 3px 3px 0}
@media(max-width:1000px){.pd-feature-section>.pd-wrap{grid-template-columns:minmax(0,.85fr) minmax(0,1.5fr);gap:30px}.pd-feature-section .pd-card{padding:22px}.pd-feature-section .pd-card:before{left:22px}.pd-feature-section .pd-card h3{font-size:18px}}
@media(max-width:850px){.pd-feature-section>.pd-wrap{grid-template-columns:1fr;gap:28px}.pd-feature-section .pd-section-heading{max-width:700px;margin:0}.pd-feature-section .pd-section-heading h2{max-width:650px;font-size:32px}.pd-feature-section .pd-section-heading>p:last-child{margin-top:16px}.pd-feature-section .pd-section-heading .pd-eyebrow{margin-bottom:16px}}
@media(max-width:560px){.pd-feature-section .pd-cards{grid-template-columns:1fr;gap:14px}.pd-feature-section .pd-card,.pd-feature-section .pd-card:last-child:nth-child(odd){flex-direction:row;gap:16px;padding:22px 20px;background:#fff;border-color:var(--edge)}.pd-feature-section .pd-card:before,.pd-feature-section .pd-card:last-child:nth-child(odd):before{width:3px;height:32px;top:24px;left:0;border-radius:0 3px 3px 0}.pd-feature-icon{width:40px;height:40px;border-radius:11px}.pd-feature-icon svg{width:21px;height:21px}.pd-feature-section .pd-section-heading h2{font-size:29px}.pd-feature-section .pd-card p{font-size:14px;margin-top:8px}.pd-feature-section .pd-card h3{font-size:18px}}

/* Shared navigation spacing accommodates the Case studies destination. */
.site-header .main-nav{gap:clamp(10px,1.3vw,22px)}
