/* An immersive opening, then quiet editorial space for the product itself. */
.studio-home { --paper:var(--studio-surface); --ink:var(--studio-ink); --muted:var(--studio-muted); --blue:var(--studio-accent); --line:var(--studio-line); --yellow:var(--studio-accent-soft); color:#111315; background:#fff; font-family:Manrope,Arial,sans-serif; }
.studio-home .site-header.marketing-header { position:absolute; inset:0 0 auto; min-height:76px; padding-inline:32px; background:#24242618; backdrop-filter:blur(18px); color:#fff; border-bottom:1px solid #ffffff1c; }
.studio-home .brand { font-weight:700; letter-spacing:-1px; }
.studio-home .brand-symbol { color:inherit; font-size:30px; }
.studio-home .site-navigation { color:#ffffffda; font-size:13px; gap:34px; font-weight:500; }
.studio-home .site-navigation a:hover,.studio-home .nav-platform > summary:hover { color:#fff; }
.studio-home .marketing-header .header-action { background:#101214; color:#fff; padding:8px 15px; border-radius:3px; font-weight:500; }
.studio-home .platform-dropdown,.studio-home .mobile-navigation { color:#181a1b; background:#fff; border:1px solid #ddd; border-radius:2px; box-shadow:0 12px 30px #0002; }
.studio-home .site-menu > summary span:last-child { color:#fff; }
.studio-home .mobile-navigation > a { color:#242628; }
.home-shell { width:min(1320px,calc(100% - 112px)); margin-inline:auto; }
.home-hero { min-height:640px; height:calc(100svh - 62px); max-height:1100px; position:relative; display:flex; align-items:flex-end; overflow:hidden; background:#373538; color:#fff; }
.hero-art { position:absolute; inset:0; background:#373538 url('assets/home/connections-hero.webp') center 40% / cover no-repeat; }
.home-hero::after { content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,#0a0c0e12 25%,#0a0c0e0a 45%,#0a0c0edb 100%); }
.hero-bottom { position:relative; z-index:1; width:100%; display:flex; justify-content:space-between; align-items:flex-end; gap:48px; padding:80px 48px 48px; }
.hero-copy h1 { font-size:clamp(38px,4.1vw,64px); line-height:1.1; font-weight:400; letter-spacing:-2px; }
.hero-copy p { margin-top:25px; color:#e1dddd; font-size:16px; line-height:1.7; max-width:520px; }
.hero-actions { display:flex; align-items:center; gap:16px; flex-shrink:0; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:28px; min-height:48px; padding:12px 22px; border-radius:3px; font-size:14px; font-weight:500; }
.button-light { background:#fff; color:#151719; }
.button-light:hover { background:#ead4ca; }
.hero-scroll { display:grid; place-items:center; width:48px; height:48px; border:1px solid #ffffff50; border-radius:3px; font-size:28px; color:#fff; }
.hero-scroll:hover { background:#ffffff18; }
.product-navigation { position:sticky; top:0; z-index:25; min-height:62px; display:flex; align-items:center; justify-content:space-between; gap:25px; padding:10px 32px; background:#fffffff5; backdrop-filter:blur(12px); border-bottom:1px solid #ddd; font-size:12px; }
.product-name { font-weight:600; }
.product-navigation > div { display:flex; gap:34px; }
.product-navigation a { display:flex; align-items:center; min-height:40px; }
.product-start { gap:20px; color:#fff; background:#111315; padding:0 15px; border-radius:3px; }
.home-intro { display:grid; grid-template-columns:1fr 1fr; gap:80px; padding-block:140px; scroll-margin-top:62px; }
.section-caption { font-size:13px; line-height:1.7; color:#66696b; }
.home-intro h2,.feature-heading h2,.campaign-copy h2,.control-heading h2 { font-weight:400; font-size:clamp(36px,4vw,58px); letter-spacing:-2px; line-height:1.12; }
.home-intro > div > p { margin-top:30px; font-size:17px; line-height:1.8; max-width:530px; color:#5c6063; }
.prospect-section,.campaign-section { scroll-margin-top:100px; }
.feature-heading { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:end; padding:0 0 55px; }
.feature-heading > div > p,.campaign-copy > p:not(.section-caption) { max-width:430px; color:#626669; font-size:16px; line-height:1.8; }
.text-link { display:inline-flex; align-items:center; gap:32px; min-height:44px; margin-top:22px; font-size:13px; border-bottom:1px solid #111315; }
.text-link:hover { color:#8c4f38; border-color:currentColor; }
.prospect-showcase { width:calc(100% - 48px); max-width:1560px; margin:auto; background:#252729; padding:44px 6% 0; overflow:hidden; }
.showcase-topline { background:#f2f2f0; padding:19px 27px; display:flex; align-items:center; gap:35px; font-size:11px; border-bottom:1px solid #d6d6d4; border-radius:5px 5px 0 0; }
.showcase-topline > span:first-child { font-weight:700; }
.showcase-topline .demo-label { color:#777; margin-left:auto; font-size:9px; }
.prospect-workspace { display:grid; grid-template-columns:150px 1fr; background:#f5f5f3; box-shadow:0 10px 60px #0005; }
.showcase-sidebar { display:flex; flex-direction:column; gap:7px; padding:25px 16px; border-right:1px solid #ddd; background:#efefed; color:#777; font-size:11px; }
.sidebar-monogram { font-size:27px; color:#222; margin-bottom:24px; }
.showcase-sidebar > span:not(.sidebar-monogram) { padding:9px 10px; }
.showcase-sidebar .sidebar-active { color:#111; background:#dededb; border-radius:3px; }
.showcase-sidebar > div { margin-top:auto; padding:15px 10px; font-size:9px; line-height:1.8; }
.showcase-body { padding:18px 45px 0; }
.studio-home .prospect-list-scene.case-scene { max-width:980px; margin:auto; filter:grayscale(1); }
.studio-home .prospect-list-stage { min-height:555px; }
.studio-home .prospect-table,.studio-home .prospect-detail { border-radius:5px; background:#fff; }
.studio-home .prospect-table { width:51%; }
.studio-home .prospect-detail { width:46%; top:105px; }
.studio-home .prospect-list-scene figcaption { padding-bottom:18px; }
.scene-motion-toggle { display:inline-flex; align-items:center; gap:6px; border:1px solid #ccc; background:#fff; border-radius:3px; color:#60666c; font-size:10px; padding:7px 10px; min-height:32px; }
.scene-motion-toggle:hover { border-color:#555; }
.feature-notes { display:grid; grid-template-columns:repeat(3,1fr); gap:60px; padding-block:40px 120px; }
.feature-notes h3,.control-features h3 { font-size:16px; line-height:1.4; font-weight:500; letter-spacing:-.3px; }
.feature-notes p,.control-features p { margin-top:12px; font-size:13px; line-height:1.8; color:#686c70; max-width:320px; }
.campaign-section { display:grid; grid-template-columns:.8fr 1.2fr; gap:90px; align-items:center; padding-block:50px 130px; }
.campaign-copy .section-caption { margin-bottom:24px; }
.campaign-copy > p:not(.section-caption) { margin-top:25px; }
.campaign-detail { display:flex; gap:16px; padding-top:30px; margin-top:35px; border-top:1px solid #d4d4d4; color:#76797b; font-size:12px; line-height:1.8; }
.campaign-detail > span { font-size:28px; line-height:1; color:#111; }
.campaign-detail strong { font-weight:400; color:#272b2d; }
.campaign-showcase { padding:24px 28px; background:#f2f2f0; }
.studio-home .campaign-tree { width:100%; margin:0; filter:grayscale(1); }
.studio-home .tree-block { border-radius:4px; }
.control-section { background:#f3f3f1; padding-block:110px; }
.control-heading { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:end; }
.control-heading > p { color:#626669; max-width:390px; font-size:16px; line-height:1.8; }
.control-features { display:grid; grid-template-columns:repeat(3,1fr); gap:75px; margin-top:75px; }
.feature-icon { display:block; font-size:32px; line-height:1; margin-bottom:28px; font-family:Arial,sans-serif; }
.home-faq { display:grid; grid-template-columns:1fr 1fr; gap:80px; padding-block:120px; }
.home-faq h2 { font-size:38px; font-weight:400; line-height:1.2; letter-spacing:-1.5px; }
.home-faq details { border-bottom:1px solid #d6d6d6; padding:22px 0; }
.home-faq details:first-child { padding-top:0; }
.home-faq summary { display:flex; align-items:center; justify-content:space-between; gap:16px; cursor:pointer; font-size:14px; line-height:1.6; list-style:none; }
.home-faq summary::-webkit-details-marker { display:none; }
.home-faq summary::after { content:'+'; font-size:24px; font-weight:400; }
.home-faq details[open] summary::after { content:'−'; }
.home-faq details p { margin-top:18px; color:#626669; font-size:13px; line-height:1.9; }
.home-closing { background:#101214; color:#fff; padding-block:100px 110px; text-align:center; }
.closing-symbol { display:block; color:#d9ad99; font-size:55px; margin-bottom:25px; line-height:1; }
.home-closing h2 { font-size:clamp(50px,6.5vw,98px); line-height:1.05; font-weight:400; letter-spacing:-4px; }
.home-closing .button { margin-top:40px; }
.home-closing p { margin-top:32px; font-size:12px; color:#999da0; }
.studio-home .site-footer.content-footer { background:#101214; border-top:1px solid #333638; color:#fff; padding-block:65px 25px; }
.studio-home .footer-link-group strong { color:#fff; font-weight:500; }
.studio-home .footer-brand > p,.studio-home .footer-link-group > a,.studio-home .footer-bottom { color:#a9acae; }
.studio-home .footer-bottom { border-color:#343638; }
.studio-home .footer-link-group > a:hover { color:#fff; }
@media(min-width:1500px) { .showcase-body { padding-inline:70px; } }
@media(max-width:1100px) { .home-shell { width:calc(100% - 80px); } .home-intro,.feature-heading,.campaign-section,.control-heading,.home-faq { gap:45px; } .showcase-body { padding-inline:24px; } .prospect-workspace { grid-template-columns:125px 1fr; } .studio-home .prospect-table-heading h4 { font-size:16px; } .campaign-showcase { padding:18px; } .hero-bottom { padding-inline:40px; } }
@media(max-width:900px) { .home-hero { min-height:720px; } .hero-bottom { align-items:flex-start; flex-direction:column; gap:28px; } .hero-copy h1 { font-size:48px; } .home-intro { padding-block:85px; } .feature-heading { grid-template-columns:1fr; gap:28px; } .feature-heading > div > p { max-width:550px; } .prospect-showcase { padding:28px 24px 0; width:100%; } .prospect-workspace { grid-template-columns:100px 1fr; } .showcase-sidebar { padding:20px 8px; } .showcase-body { padding:10px 24px 0; } .studio-home .prospect-list-stage { min-height:0; } .studio-home .prospect-table { width:100%; } .studio-home .prospect-detail { position:relative; top:auto; width:min(94%,396px); margin-top:22px; } .feature-notes { gap:30px; padding-bottom:80px; } .campaign-section { grid-template-columns:1fr; gap:40px; padding-top:0; padding-bottom:85px; } .campaign-copy { max-width:550px; } .campaign-showcase { max-width:650px; width:100%; justify-self:center; padding:30px; } .control-section { padding-block:80px; } .control-features { gap:30px; } .home-faq { padding-block:85px; } }
@media(max-width:600px) { .home-shell { width:calc(100% - 40px); } .studio-home .site-header.marketing-header { padding-inline:20px; min-height:72px; } .studio-home .marketing-header .brand { font-size:18px; } .home-hero { min-height:680px; height:calc(100svh - 56px); max-height:900px; } .hero-art { background-position:58% center; } .hero-bottom { padding:110px 20px 32px; gap:28px; } .hero-copy h1 { font-size:41px; letter-spacing:-1.7px; } .hero-copy p { font-size:14px; margin-top:22px; } .hero-copy p br { display:none; } .hero-actions { justify-content:space-between; width:100%; } .product-navigation { padding:8px 20px; min-height:56px; gap:10px; } .product-name { font-size:10px; } .product-navigation > div { gap:16px; font-size:11px; } .product-start { display:none!important; } .home-intro { grid-template-columns:1fr; padding-block:65px; gap:28px; } .section-caption br { display:none; } .home-intro h2,.feature-heading h2,.campaign-copy h2,.control-heading h2 { font-size:38px; letter-spacing:-1.5px; } .home-intro > div > p { font-size:15px; margin-top:24px; } .feature-heading { padding-bottom:32px; } .feature-heading > div > p,.campaign-copy > p:not(.section-caption) { font-size:14px; } .prospect-showcase { padding:20px 14px 0; } .showcase-topline { padding:15px; gap:18px; font-size:10px; } .showcase-topline .demo-label { display:none; } .prospect-workspace { display:block; } .showcase-sidebar { display:none; } .showcase-body { padding:0 14px; } .studio-home .prospect-table-heading h4 { font-size:20px; } .studio-home .prospect-detail { width:100%; padding-inline:16px; } .feature-notes { grid-template-columns:1fr; gap:24px; padding-block:30px 65px; } .feature-notes > div { border-bottom:1px solid #ddd; padding-bottom:24px; } .feature-notes h3,.control-features h3 { font-size:16px; } .feature-notes p,.control-features p { margin-top:8px; font-size:13px; max-width:none; } .campaign-section { padding-bottom:65px; gap:30px; } .campaign-detail { margin-top:25px; padding-top:22px; } .campaign-showcase { padding:12px; } .control-section { padding-block:60px; } .control-heading { grid-template-columns:1fr; gap:24px; } .control-heading > p { font-size:14px; } .control-features { grid-template-columns:1fr; gap:35px; margin-top:40px; } .feature-icon { font-size:28px; margin-bottom:16px; } .home-faq { grid-template-columns:1fr; padding-block:65px; gap:35px; } .home-faq h2 { font-size:34px; } .home-faq summary { font-size:13px; } .home-closing { padding-block:65px; } .home-closing h2 { font-size:55px; letter-spacing:-2.5px; } .home-closing .button { margin-top:30px; } }
@media(prefers-reduced-motion:reduce) { .studio-home { scroll-behavior:auto; } }
.studio-home .launch-notice { position:absolute; inset:76px 0 auto; z-index:20; background:#161a1dcc; color:#fff; }
@media(max-width:600px) { .studio-home .launch-notice { top:72px; padding:8px 20px; font-size:12px; } }