/* October 2026: shared visual language with Osynth Content Studio. */
:root{--paper:#101314;--surface:#1b1d1e;--control:#25282a;--ink:#f4f4f4;--muted:#a5a8aa;--line:#353839;--accent:#e2e3e3;--radius-control:14px;--radius-panel:24px}
body{font-family:Geist,sans-serif;color:var(--ink);background:var(--paper)}
h1,h2,h3,blockquote,.promise-copy{font-family:Geist,sans-serif;font-weight:600;letter-spacing:-.04em}
h1{font-size:clamp(42px,5.2vw,72px);font-weight:700;line-height:1.06;text-transform:uppercase}
h1 span{color:#b7babb}h2{font-size:clamp(32px,3.5vw,46px);line-height:1.12}h3{font-size:24px;line-height:1.2}
button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid #fff;outline-offset:5px}
.skip{background:var(--ink);color:var(--paper);border-radius:8px}
.header{background:rgba(16,19,20,.94);border-color:#ffffff12}.nav-shell{height:80px}
.brand,.brand-halo,.community-logo{display:flex;align-items:center;gap:5px}
.brand img,.promise-brand,.community-brand{width:146px;height:38px;object-fit:contain;content:url('/brand/wordmark.png');filter:brightness(0) invert(1)}
.brand:before,.brand-halo:after{content:'';display:block;flex-shrink:0;width:34px;height:38px;background:url('/brand/icon.png') center/contain no-repeat}
.brand-halo{width:185px;flex-direction:row-reverse;gap:5px}.brand-halo:before{background-image:radial-gradient(#777b7d 1px,transparent 1.5px);background-size:8px 8px;mask-image:radial-gradient(ellipse,#000,transparent 70%);width:240px;height:180px;opacity:.3}
.desktop-nav a{font-family:Geist,sans-serif;font-size:14px;text-transform:none;color:var(--muted)}
.button{font-family:Geist,sans-serif;font-weight:500;text-transform:none;border-radius:var(--radius-control);background:var(--control);border:1px solid var(--line);color:var(--ink);min-height:56px;padding:16px 28px;box-shadow:none}
.button.primary,.desktop-demo{background:#fff;color:#17191a;border-color:#fff;box-shadow:0 5px 0 #a1a3a4;font-weight:600}
.button:hover{background:#303436;box-shadow:none;transform:translateY(-2px)}
.button.primary:hover,.desktop-demo:hover{background:#eceeee;color:#17191a;box-shadow:0 7px 0 #888b8d}
.button.primary:active,.desktop-demo:active{transform:translateY(3px);box-shadow:0 2px 0 #888b8d}
.button.small{min-height:44px;padding:10px 22px;font-size:14px}.menu-toggle{border-radius:50%;background:var(--control)}
#mobile-menu{border-top:1px solid var(--line);background:var(--paper)}#mobile-menu a{color:var(--ink)}
.hero{position:relative;isolation:isolate;padding-top:164px;padding-bottom:88px}
.hero:before{content:'';position:absolute;z-index:-1;inset:65px 0 0;background-image:radial-gradient(#6e7375 1.4px,transparent 1.9px);background-size:12px 12px;opacity:.25;mask-image:radial-gradient(ellipse at 50% 42%,#000 5%,transparent 70%);pointer-events:none}
.hero-content{max-width:1000px}.backer{background:transparent;border:0;box-shadow:none;color:var(--muted);font-family:Geist,sans-serif;margin-bottom:28px;padding:0;font-size:12px}.yc-name{color:#d4d6d7}.green-dot{background:#a7abae;box-shadow:0 0 0 3px #ffffff0d;width:7px;height:7px}.yc{background:#333638;border-radius:4px;font-size:16px;width:20px;height:20px;line-height:20px}.backer-logos img{filter:brightness(0) invert(1);opacity:.8;width:126px}
.studio-label{display:inline-flex;align-items:center;gap:10px;padding:10px 17px;border:1px solid #626667;border-radius:12px;box-shadow:inset 0 1px 0 #ffffff15;background:#191c1d;color:var(--ink);font-size:13px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;margin-bottom:28px}.studio-label svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linejoin:round}
.hero-description{font-size:20px;max-width:730px;margin:24px auto 32px;line-height:1.6}.hero-media{display:flex;align-items:center;justify-content:center;gap:20px;height:auto;max-width:1140px;margin:64px auto 0;padding:12px 0 28px}
.hero-video{position:relative;inset:auto!important;transform:none;width:calc((100% - 80px)/5);height:auto;aspect-ratio:9/14;object-fit:cover;border-radius:24px;border:1px solid #ffffff15;background:var(--surface);box-shadow:0 15px 40px #0004;flex-shrink:0}
.hero-video.hv2{aspect-ratio:9/16;transform:scale(1.04)}.hero-path,.hero-media .metric,.hero-instagram,.hero-tiktok,.reactions{display:none}
.brands{padding-top:28px;padding-bottom:48px;border-top:0;border-bottom:0}.trusted-label{font-size:12px;letter-spacing:.12em;color:var(--muted);margin-bottom:28px}.client-logo img{filter:brightness(0) invert(1);opacity:.7}.client-logo:hover img{filter:brightness(0) invert(1);opacity:1}
.eyebrow{display:inline-block;border:1px solid var(--line);border-radius:8px;background:#ffffff04;padding:7px 11px;color:#bfc3c5;font-size:11px;letter-spacing:.09em;margin-bottom:20px}
.section-heading{max-width:740px;margin-bottom:56px}.section-heading h2{max-width:700px}.section-description{font-size:18px;margin-top:20px;max-width:620px;margin-left:auto;margin-right:auto}
.product{padding-top:112px;padding-bottom:112px}.product-grid{gap:16px}.product-card{border-radius:var(--radius-panel);padding:26px;gap:64px;background:var(--surface);transition:border-color .2s,transform .2s}.product-card:hover{border-color:#606567;transform:translateY(-4px)}.product-card h3{font-size:22px}.product-card p{font-size:15px;line-height:1.65}.pixel-field{opacity:.45}.orb,.orb.orange{border-radius:14px;border:1px solid #ffffff16;background:var(--control);box-shadow:none}.product-icon{width:48px;height:48px}.product-icon svg{width:23px;height:23px}
.promise{padding-bottom:112px}.promise-intro{padding:64px 64px 0;border-top:1px solid var(--line)}.promise-copy{font-size:clamp(25px,2.6vw,34px);line-height:1.4;font-weight:500;color:#d2d4d5;max-width:830px}.feature-wrap{margin-top:56px}.feature-frame{padding:5px;background:var(--surface);border:1px solid var(--line);border-radius:30px;box-shadow:0 24px 50px #0005}.feature-frame video{border-radius:24px}
.metric{font-size:11px;background:#222627;border-color:#45494a;border-radius:10px;box-shadow:0 8px 24px #0003;color:#e0e2e3;padding:10px 14px}.metric b,.red,.green,.blue,.accent{color:#d4d7d8}
.process{padding-top:40px;padding-bottom:112px;position:relative;overflow:hidden}.process .section-heading{margin-bottom:60px}.network{border-radius:24px;background:radial-gradient(ellipse at center,#25292b70,transparent 65%)}.line-base{stroke:#454a4c}.line-flow{stroke:#c4c8ca;opacity:.7}.network-wordmark{filter:brightness(0) invert(1)}.network-brand:before{background-image:radial-gradient(#bbc1c355 1.3px,transparent 1.4px);width:310px;height:290px}
.faq{padding-top:0;padding-bottom:112px}.faq-list{max-width:900px;gap:12px}.faq details{background:var(--surface);border-color:var(--line);border-radius:18px;padding:24px 28px}.faq details[open]{border-color:#565b5d}.faq summary{font-size:18px;font-weight:500;min-height:28px}.faq summary span{display:flex;align-items:center;justify-content:center;width:32px;height:32px;flex-shrink:0;border-radius:50%;background:var(--control);color:var(--ink);font-size:24px}.faq details p{line-height:1.7;font-size:16px;padding-right:44px}
.community{padding-bottom:100px}.community-panel{border-color:var(--line);border-radius:28px;background:var(--surface);padding:56px 40px 64px;position:relative;isolation:isolate}.community-panel:before{content:'';position:absolute;inset:0;z-index:-1;background-image:radial-gradient(#73797c 1px,transparent 1.5px);background-size:10px 10px;opacity:.24;mask-image:radial-gradient(ellipse at 50% 25%,#000,transparent 65%)}.community-art{padding-top:0}.fan-card{padding:3px;background:#2a2d2e;border:1px solid #46494a;border-radius:24px;box-shadow:0 20px 30px #0004}.fan-card video{border-radius:20px}.community-copy .section-description{font-size:18px}.community-copy .section-heading{margin-bottom:32px}
.footer{background:#0c0f10;border-top:1px solid var(--line);padding-top:80px;color:var(--ink)}.footer-pitch h2{font-size:28px;font-weight:600}.footer h3{font-family:Geist,sans-serif;font-size:18px;font-weight:500}.footer-top{gap:36px}.footer-links{font-family:Geist,sans-serif;text-transform:none;font-size:14px}.footer-bottom{border-color:var(--line);font-size:10px;letter-spacing:.025em}.email-row{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:2px 12px}.email-row input{min-height:48px}.email-row button{min-width:44px;min-height:44px}.email-row input::placeholder,dialog input::placeholder{color:#93999c;opacity:1}
dialog{background:#191b1c;border:1px solid #494d4f;border-radius:28px;box-shadow:0 30px 90px #0009}dialog::backdrop{background:#000b;backdrop-filter:blur(8px)}dialog h2{font-size:30px}dialog .waitlist-form input{background:var(--control);border-color:#484d50;color:var(--ink);border-radius:12px;min-height:50px}.dialog-close{width:44px;height:44px;top:10px;right:10px;background:var(--control);border-radius:50%;color:var(--ink)}
@media(max-width:1199px){.nav-shell{height:72px}.hero{padding-top:140px}.hero-media{height:auto}.product,.promise,.faq{padding-bottom:88px}.product{padding-top:88px}.process{padding-bottom:88px}.product-card{gap:48px}.footer-top{gap:36px}.community-panel{padding:48px 30px 56px}}
@media(max-width:600px){.hero{padding-top:116px;padding-bottom:36px}.brand img{width:124px;height:34px}.brand:before{width:28px;height:32px}.backer{gap:8px;font-size:11px;margin-bottom:24px}.backer-intro{font-size:11px}.backer-logos{font-size:11px}.backer-logos img{width:112px}.studio-label{font-size:11px;padding:9px 13px;margin-bottom:24px}h1{font-size:clamp(32px,8.5vw,46px);line-height:1.1}h2{font-size:32px}.hero-description{font-size:17px;line-height:1.6;margin:22px auto 28px}.actions{gap:12px}.button{font-size:14px;min-height:52px;padding:14px 22px}.hero-media{justify-content:flex-start;gap:12px;margin:40px -20px 0;padding:10px 20px 28px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin;scrollbar-color:#494f51 transparent}.hero-video{width:144px;border-radius:20px;aspect-ratio:9/14;scroll-snap-align:center}.hero-video.hv2{width:158px;transform:none;aspect-ratio:9/16}.brands{padding-top:24px;padding-bottom:28px}.product{padding-top:64px;padding-bottom:64px}.product-card{padding:24px;gap:36px;border-radius:20px}.product-card h3{font-size:23px}.product-card p{font-size:16px}.section-heading{margin-bottom:36px}.section-description{font-size:17px}.promise{padding-bottom:64px}.promise-intro{padding:48px 0 0}.promise-copy{font-size:25px;line-height:1.5}.feature-wrap{margin-top:40px}.feature-frame video{height:420px}.process{padding-top:16px;padding-bottom:64px}.process .section-heading{margin-bottom:36px}.network-brand:before{width:170px;height:160px}.faq{padding-bottom:64px}.faq details{padding:20px}.faq summary{font-size:16px;line-height:1.45;min-height:44px}.faq details p{padding-right:0;font-size:15px}.community{padding-bottom:64px}.community-panel{padding:28px 20px 40px;border-radius:24px}.video-fan{width:100%;gap:12px}.fan-card{border-radius:20px}.fan-card video{border-radius:16px}.community-logo{margin-top:20px}.community-copy .section-description{font-size:17px}.footer{padding-top:56px}.footer-pitch h2{font-size:28px}.footer h3{font-size:18px}.footer-top{gap:36px 20px}.footer-links{font-size:14px}.footer-bottom{font-size:10px}.dialog-close{width:40px;height:40px}dialog h2{font-size:27px}dialog{padding-top:58px}}

/* Temporary monochrome Osynth mark. */
.brand:before,.brand-halo:after,.network-icon{filter:brightness(0) invert(1)}

/* Reveal each client's original artwork on hover. */
.client-logo:hover img{filter:none;opacity:1}

/* Transparent backing-company pill. */
.backer{padding:10px 18px;border:1px solid #ffffff26;border-radius:999px;background:transparent;box-shadow:inset 0 1px 0 #ffffff06}
@media(max-width:600px){.backer{padding:10px 14px}}

/* White alpha-mask keeps the header mark white regardless of source colors. */
.brand:before,.brand-halo:after{background:#fff;mask:url('/brand/icon.png') center/contain no-repeat;-webkit-mask:url('/brand/icon.png') center/contain no-repeat;filter:none}

/* October 8 reference: editorial headline and framed studio media. */
.hero h1{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:clamp(54px,6.2vw,88px);line-height:1.02;letter-spacing:-.035em;text-transform:none}
.hero h1 span{color:var(--ink)}
.hero-content{max-width:1000px}
.hero-description{font-size:18px;max-width:680px;line-height:1.65;margin-top:28px}
.studio-label{background:transparent;border-color:#ffffff20;border-radius:6px;font-size:10px;font-weight:500;letter-spacing:.15em;padding:8px 12px;margin-bottom:24px}
.hero-media{perspective:1200px;gap:22px;margin-top:56px;padding:20px 0 40px;overflow:visible}
.hero-asset{position:relative;width:calc((100% - 88px)/5);flex-shrink:0;background:#080a0b;border:1px solid #ffffff13;padding:8px 8px 10px;box-shadow:0 20px 35px #0004;transform-origin:center;transition:transform .35s,border-color .35s}
.asset-chrome{display:flex;align-items:center;gap:7px;height:23px;margin-bottom:7px;color:#737778;font-family:"Geist Mono",monospace;font-size:6px;letter-spacing:.12em}
.asset-chrome i{width:4px;height:4px;background:#fff;box-shadow:0 0 7px #ffffff60}.asset-chrome b{margin-left:auto;font-size:12px;font-weight:400}
.hero-asset .hero-video,.hero-asset .hero-video.hv2{display:block;width:100%;aspect-ratio:9/13;height:auto;border:0;border-radius:0;box-shadow:none;transform:none}
.asset-0{transform:rotateY(14deg) rotateZ(-2deg)}.asset-1{transform:rotateY(7deg) rotateZ(-1deg)}.asset-3{transform:rotateY(-7deg) rotateZ(1deg)}.asset-4{transform:rotateY(-14deg) rotateZ(2deg)}
.hero-asset:hover{transform:translateY(-6px);border-color:#ffffff35}
@media(max-width:600px){.hero h1{font-size:clamp(44px,11vw,64px);line-height:1.05}.hero-description{font-size:16px}.hero-media{overflow-x:auto;gap:14px;margin-top:34px;padding:12px 20px 28px;perspective:none}.hero-asset{width:174px;transform:none;scroll-snap-align:center}.hero-asset .hero-video,.hero-asset .hero-video.hv2{width:100%;aspect-ratio:9/14}.asset-chrome{font-size:6px}.studio-label{margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){.hero-asset{transition:none}.hero-asset:hover{transform:none}}

.hero-content > .actions{margin-top:56px}
@media(max-width:600px){.hero-content > .actions{margin-top:44px}}

/* Product steps: sequential arrival into a four-card fan. */
.product-fan{position:relative;display:block;height:440px;max-width:1040px;margin:0 auto;isolation:isolate}
.product-fan .product-card{--spread:-345px;--tilt:-9deg;--card-color:#63c69e;position:absolute;left:50%;top:24px;display:flex;width:260px;height:340px;padding:28px 24px;gap:0;border:0;border-radius:12px;background:var(--card-color);color:#101314;box-shadow:0 15px 35px #0002;transform:translateX(calc(-50% + var(--spread))) rotate(var(--tilt));transform-origin:50% 85%;transition:transform .35s,box-shadow .35s;z-index:1}
.product-fan .product-card:nth-child(2){--spread:-115px;--tilt:-3deg;--card-color:#c8ff60;z-index:2}
.product-fan .product-card:nth-child(3){--spread:115px;--tilt:3deg;--card-color:#b5e9f7;z-index:3}
.product-fan .product-card:nth-child(4){--spread:345px;--tilt:9deg;--card-color:#efefed;z-index:4}
.product-fan .product-card>div{display:flex;flex-direction:column;align-items:center;justify-content:space-between;height:100%;text-align:center;width:100%}
.product-fan .product-card h3{font-size:24px;line-height:1.08;text-transform:uppercase;font-weight:700;letter-spacing:-.045em;max-width:210px;margin:0;color:#101314}
.product-fan .product-card p{color:#202827;font-size:12px;line-height:1.45;margin:0;max-width:175px}
.step-number{position:absolute;left:0;right:0;top:110px;text-align:center;font-size:100px;line-height:1;font-weight:500;letter-spacing:-.07em;color:#10131440;pointer-events:none}
.product-fan .product-card:hover,.product-fan .product-card:focus-visible{transform:translateX(calc(-50% + var(--spread))) translateY(-18px) rotate(0);z-index:5;box-shadow:0 24px 44px #0005}
.product-fan .product-card:focus-visible{outline:2px solid #fff;outline-offset:5px}
.product-fan.is-waiting .product-card{opacity:0;transform:translateX(-50%) translateY(45px) rotate(0)}
.product-fan.is-playing .product-card{animation:step-fan-in 1.1s cubic-bezier(.2,.75,.25,1) both;animation-delay:calc(var(--step)*.48s)}
@keyframes step-fan-in{0%{opacity:0;transform:translateX(-50%) translateY(45px) rotate(0)}35%{opacity:1;transform:translateX(-50%) translateY(0) rotate(0)}100%{opacity:1;transform:translateX(calc(-50% + var(--spread))) rotate(var(--tilt))}}
@media(max-width:1000px) and (min-width:701px){.product-fan .product-card{width:220px;height:330px;--spread:-285px;padding:24px 20px}.product-fan .product-card:nth-child(2){--spread:-95px}.product-fan .product-card:nth-child(3){--spread:95px}.product-fan .product-card:nth-child(4){--spread:285px}.product-fan .product-card h3{font-size:21px}}
@media(max-width:700px){.product-fan{display:grid;grid-template-columns:1fr 1fr;gap:16px;height:auto;padding:12px 0 24px}.product-fan .product-card{position:relative;left:auto;top:auto;width:100%;height:310px;transform:none!important;padding:22px 16px}.product-fan .product-card h3{font-size:20px}.product-fan .product-card p{font-size:12px}.step-number{font-size:82px;top:108px}.product-fan.is-playing .product-card{animation-name:step-mobile-in}.product-fan .product-card:hover{box-shadow:0 15px 35px #0002}@keyframes step-mobile-in{from{opacity:0;translate:0 28px}to{opacity:1;translate:0 0}}}
@media(max-width:380px){.product-fan{grid-template-columns:1fr}.product-fan .product-card{height:300px;max-width:270px;margin:auto}}
@media(prefers-reduced-motion:reduce){.product-fan .product-card{animation:none!important;transition:none;opacity:1!important}}

/* Match the reference's growing, recentered card stack. */
.product-fan .product-card{--spread:-285px;--tilt:-9deg}
.product-fan .product-card:nth-child(2){--spread:-95px;--tilt:-3deg}
.product-fan .product-card:nth-child(3){--spread:95px;--tilt:3deg}
.product-fan .product-card:nth-child(4){--spread:285px;--tilt:9deg}
.product-fan.is-playing .product-card{animation-duration:4s;animation-delay:0s;animation-timing-function:cubic-bezier(.22,.85,.28,1);animation-name:fan-first}
.product-fan.is-playing .product-card:nth-child(2){animation-name:fan-second}
.product-fan.is-playing .product-card:nth-child(3){animation-name:fan-third}
.product-fan.is-playing .product-card:nth-child(4){animation-name:fan-fourth}
@keyframes fan-first{0%{opacity:0;transform:translateX(-50%) translateY(36px)}12%,25%{opacity:1;transform:translateX(-50%) rotate(0)}38%,47%{opacity:1;transform:translateX(calc(-50% - 95px)) rotate(-4deg)}60%,69%{opacity:1;transform:translateX(calc(-50% - 190px)) rotate(-7deg)}82%,100%{opacity:1;transform:translateX(calc(-50% + var(--spread))) rotate(var(--tilt))}}
@keyframes fan-second{0%,25%{opacity:0;transform:translateX(calc(-50% + 200px)) translateY(20px) rotate(9deg)}38%,47%{opacity:1;transform:translateX(calc(-50% + 95px)) rotate(4deg)}60%,69%{opacity:1;transform:translateX(-50%) rotate(0)}82%,100%{opacity:1;transform:translateX(calc(-50% + var(--spread))) rotate(var(--tilt))}}
@keyframes fan-third{0%,47%{opacity:0;transform:translateX(calc(-50% + 290px)) translateY(20px) rotate(12deg)}60%,69%{opacity:1;transform:translateX(calc(-50% + 190px)) rotate(7deg)}82%,100%{opacity:1;transform:translateX(calc(-50% + var(--spread))) rotate(var(--tilt))}}
@keyframes fan-fourth{0%,69%{opacity:0;transform:translateX(calc(-50% + 380px)) translateY(20px) rotate(16deg)}82%,100%{opacity:1;transform:translateX(calc(-50% + var(--spread))) rotate(var(--tilt))}}
@media(max-width:700px){.product-fan.is-playing .product-card{animation-name:step-mobile-in;animation-duration:.8s;animation-delay:calc(var(--step)*.6s)}}

@media(max-width:700px){.product-fan.is-playing .product-card:nth-child(n){animation-name:step-mobile-in;animation-duration:.8s;animation-delay:calc(var(--step)*.6s)}}

/* Hold the product stage while scroll progress opens the fan. */
@media(min-width:701px){
 #product.scroll-fan{position:relative;height:calc(200vh + min(100vh,1040px));padding:0}
 #product.scroll-fan>.container{position:sticky;top:0;height:min(100vh,1040px);display:flex;flex-direction:column;justify-content:flex-start;padding-top:136px;padding-bottom:24px}
 #product.scroll-fan .section-heading{margin-bottom:28px;flex-shrink:0}
 #product.scroll-fan .product-fan{width:100%;height:400px;flex-shrink:0}
 #product.scroll-fan .product-card{transition:none;animation:none}
}
@media(min-width:701px) and (max-height:800px){#product.scroll-fan .section-heading h2{font-size:36px}#product.scroll-fan .section-description{font-size:16px;margin-top:14px}#product.scroll-fan .product-fan{height:350px}#product.scroll-fan .product-card{height:300px;top:12px}#product.scroll-fan .step-number{top:100px;font-size:82px}}

#product.scroll-fan .product-card h3{max-width:160px;font-size:22px}
#product.scroll-fan .product-card p{max-width:145px}

/* Reference composition: a light editorial center inside a content collage. */
.content-collage{background:#faf8f4;color:#101a29;padding:48px 0 56px;overflow:hidden}
.collage-stage{position:relative;height:1000px;max-width:1140px}
.collage-copy{position:absolute;top:510px;left:50%;transform:translateX(-50%);width:680px;text-align:center;z-index:5}
.collage-copy h2{font-family:"Instrument Serif",Georgia,serif;font-weight:400;font-size:64px;line-height:1.02;letter-spacing:-.03em;color:#101a29}
.collage-copy p{font-size:17px;line-height:1.5;color:#56595b;max-width:600px;margin:20px auto 0}
.collage-copy .collage-channels{margin-top:16px;color:#20262c;font-size:16px}
.collage-copy .button{display:inline-flex;margin-top:22px;background:#101a29;color:#fff;border:0;border-radius:14px;min-height:50px;padding:13px 24px}
.collage-tile{position:absolute;overflow:hidden;background:#c6d0ca;border-radius:0;box-shadow:none}
.collage-tile>img:first-child,.collage-tile>video{display:block;width:100%;height:100%;object-fit:cover}
.collage-tile:after{content:'';position:absolute;inset:0;background:#10131418;pointer-events:none}
.collage-tile .collage-mark{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:55%;height:auto;max-height:70px;object-fit:contain;filter:brightness(0) invert(1);z-index:2}
.tile-main{width:270px;height:340px;left:calc(50% - 135px);top:0;z-index:3}.tile-main .collage-mark{width:90px;max-height:110px}
.tile-left{width:210px;height:265px;left:calc(50% - 310px);top:155px;z-index:2}
.tile-right{width:235px;height:300px;left:calc(50% + 100px);top:140px;z-index:2}
.tile-a{width:125px;height:165px;left:calc(50% - 400px);top:335px}.tile-b{width:110px;height:145px;left:calc(50% + 315px);top:350px;z-index:3}
.tile-c{width:76px;height:98px;left:5%;top:570px}.tile-d{width:76px;height:98px;right:5%;top:570px}
.tile-e{width:76px;height:98px;left:12%;top:785px}.tile-f{width:76px;height:98px;right:12%;top:780px}
.tile-g{width:82px;height:106px;left:calc(50% - 41px);top:860px}
@media(max-width:900px){.collage-stage{height:930px}.collage-copy{width:70%;top:470px}.collage-copy h2{font-size:54px}.tile-main{width:220px;height:290px;left:calc(50% - 110px)}.tile-left{width:170px;height:230px;left:calc(50% - 265px)}.tile-right{width:180px;height:240px;left:calc(50% + 90px)}.tile-a{left:3%;width:95px;height:125px;top:320px}.tile-b{left:auto;right:3%;width:95px;height:125px;top:325px}.tile-g{top:810px}.tile-e,.tile-f{top:730px}.tile-c,.tile-d{top:540px}}
@media(max-width:600px){.content-collage{padding:32px 0 40px}.collage-stage{height:800px}.tile-main{width:155px;height:210px;left:calc(50% - 77px)}.tile-left{width:115px;height:155px;left:calc(50% - 165px);top:100px}.tile-right{width:120px;height:160px;left:calc(50% + 50px);top:95px}.tile-a{width:65px;height:85px;top:220px}.tile-b{width:65px;height:85px;top:230px}.collage-copy{top:350px;width:88%}.collage-copy h2{font-size:44px}.collage-copy p{font-size:15px;max-width:310px}.collage-copy .collage-channels{font-size:13px}.tile-c,.tile-d{top:300px;width:48px;height:62px}.tile-e,.tile-f{top:650px;width:60px;height:80px}.tile-g{top:700px;width:62px;height:80px;left:calc(50% - 31px)}.tile-main .collage-mark{width:58px}}

.content-collage{background:var(--paper);color:#fff}
.collage-copy h2,.collage-copy p,.collage-copy .collage-channels{color:#fff}
.collage-copy .button{background:#fff;color:#101314}

.collage-tile{transform-origin:center;will-change:transform}.collage-copy{will-change:opacity,translate}
@media(prefers-reduced-motion:reduce){.collage-tile,.collage-copy{will-change:auto}}

/* Additional moving tiles complete the circular collage. */
.tile-h{width:84px;height:108px;left:2%;top:430px}
.tile-i{width:88px;height:114px;right:2%;top:425px}
.tile-j{width:84px;height:108px;left:6%;top:690px}
.tile-k{width:84px;height:108px;right:6%;top:690px}
.tile-l{width:84px;height:108px;left:28%;top:860px}
.tile-m{width:84px;height:108px;right:28%;top:860px}
@media(max-width:900px){.tile-h,.tile-i{width:64px;height:82px;top:405px}.tile-j,.tile-k{width:64px;height:82px;top:650px}.tile-l,.tile-m{width:70px;height:90px;top:810px}}
@media(max-width:600px){.tile-h,.tile-i{width:42px;height:54px;top:380px;z-index:1}.tile-h{left:0}.tile-i{right:0}.tile-j,.tile-k{width:44px;height:58px;top:590px}.tile-j{left:1%}.tile-k{right:1%}.tile-l,.tile-m{width:46px;height:60px;top:730px}.tile-l{left:24%}.tile-m{right:24%}}

/* Match the reference's twelve-tile ring: three large upper tiles, nine small perimeter tiles. */
.collage-stage{height:1100px;max-width:1140px}
.tile-main{width:250px;height:290px;left:calc(50% - 125px);top:0;z-index:3}
.tile-left{width:185px;height:230px;left:calc(50% - 275px);top:135px;z-index:2}
.tile-right{width:210px;height:265px;left:calc(50% + 85px);top:120px;z-index:2}
.tile-a{width:120px;height:150px;left:calc(50% - 360px);top:305px;z-index:1}
.tile-b{width:98px;height:124px;left:calc(50% + 275px);top:315px;z-index:4}
.tile-c{width:64px;height:80px;left:calc(50% - 380px);top:505px}
.tile-d{width:64px;height:80px;right:auto;left:calc(50% + 320px);top:505px}
.tile-e{width:64px;height:80px;left:calc(50% - 325px);top:690px}
.tile-f{width:64px;height:80px;right:auto;left:calc(50% + 275px);top:685px}
.tile-g{width:64px;height:80px;left:calc(50% - 32px);top:870px}
.tile-h{width:64px;height:80px;left:calc(50% - 205px);top:820px}
/* The small lower-right tile balances the lower-left tile. */
.collage-copy{top:490px;width:630px}
.collage-copy h2{font-size:60px}
@media(max-width:900px){.collage-stage{height:980px}.tile-main{width:210px;height:255px;left:calc(50% - 105px)}.tile-left{width:160px;height:200px;left:calc(50% - 240px);top:115px}.tile-right{width:175px;height:225px;left:calc(50% + 70px);top:105px}.tile-a{width:100px;height:125px;left:calc(50% - 310px);top:265px}.tile-b{width:85px;height:105px;left:calc(50% + 235px);right:auto;top:280px}.tile-c{left:3%;top:450px}.tile-d{left:auto;right:3%;top:450px}.tile-e{left:10%;top:650px}.tile-f{left:auto;right:10%;top:650px}.tile-g{top:820px}.tile-h{left:29%;top:770px}.collage-copy{top:430px;width:72%}.collage-copy h2{font-size:52px}}
@media(max-width:600px){.collage-stage{height:820px}.tile-main{width:150px;height:180px;left:calc(50% - 75px)}.tile-left{width:105px;height:135px;left:calc(50% - 155px);top:85px}.tile-right{width:115px;height:145px;left:calc(50% + 50px);top:75px}.tile-a{width:68px;height:86px;left:5%;top:190px}.tile-b{width:58px;height:74px;left:auto;right:5%;top:200px}.tile-c,.tile-d{width:42px;height:54px;top:330px}.tile-e,.tile-f{width:48px;height:62px;top:625px}.tile-g{width:48px;height:62px;left:calc(50% - 24px);top:730px}.tile-h{width:48px;height:62px;left:25%;top:695px}.collage-copy{top:350px;width:86%}.collage-copy h2{font-size:42px}.collage-copy p{max-width:290px}}

.tile-i{width:64px;height:80px;left:calc(50% + 145px);right:auto;top:820px}
@media(max-width:900px){.tile-i{left:auto;right:29%;top:770px}}
@media(max-width:600px){.tile-i{width:48px;height:62px;left:auto;right:25%;top:695px}}

/* Center copy vertically between the upper arc and lower arc. */
.collage-copy{top:490px;height:290px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.collage-copy h2{flex-shrink:0}
.collage-copy p{flex-shrink:0}
.collage-copy .button{flex-shrink:0}
/* Upper tiles end at 455px; lower arc starts at 815px: equal 35px breathing room. */
.tile-a{top:305px}.tile-b{top:331px}
.tile-c,.tile-d{top:585px}
.tile-e,.tile-f{top:755px}
.tile-h,.tile-i{top:815px}
.tile-g{top:875px}
@media(max-width:900px){.collage-copy{top:430px;height:290px}.tile-a{top:265px}.tile-b{top:290px}.tile-c,.tile-d{top:530px}.tile-e,.tile-f{top:705px}.tile-h,.tile-i{top:755px}.tile-g{top:815px}}
@media(max-width:600px){.collage-copy{top:335px;height:290px}.tile-a{top:190px}.tile-b{top:216px}.tile-c,.tile-d{top:430px}.tile-e,.tile-f{top:650px}.tile-h,.tile-i{top:670px}.tile-g{top:730px}}

.collage-copy{top:458px}
@media(max-width:900px){.collage-copy{top:398px}}
@media(max-width:600px){.collage-copy{top:311px}}

/* Restore the original studio cards while retaining the scroll fan transforms. */
.product-fan .product-card{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:24px;padding:26px;box-shadow:none;align-items:flex-start;height:340px}
.product-fan .product-card>div{height:auto;margin-top:auto;align-items:flex-start;text-align:left;gap:16px}
.product-fan .product-icon{position:relative;flex-shrink:0;width:48px;height:48px;margin-bottom:44px;z-index:1}
.product-fan .pixel-field{position:absolute;left:0;top:0;pointer-events:none;opacity:.45}
.product-fan .product-card h3,#product.scroll-fan .product-card h3{color:var(--ink);font-size:22px;font-weight:600;text-transform:none;line-height:1.2;letter-spacing:-.04em;max-width:none}
.product-fan .product-card p,#product.scroll-fan .product-card p{color:var(--muted);font-size:14px;line-height:1.6;max-width:none}
@media(max-width:1000px) and (min-width:701px){.product-fan .product-card{padding:22px}.product-fan .product-card h3,#product.scroll-fan .product-card h3{font-size:20px}.product-fan .product-card p,#product.scroll-fan .product-card p{font-size:13px}}
@media(max-width:700px){.product-fan .product-card{height:350px;padding:22px}.product-fan .product-icon{margin-bottom:32px}}

/* Staggered background video outputs, revealed only during step three. */
.product-video-scene{display:none}
#product.scroll-fan>.container{isolation:isolate}
#product.scroll-fan .product-video-scene{display:block;position:absolute;inset:0 calc((100% - 100vw)/2);height:100%;overflow:hidden;z-index:-1;pointer-events:none}
.product-scene-video{position:absolute;left:var(--x);top:var(--y);width:var(--w);height:var(--h);object-fit:cover;border-radius:0;opacity:0;will-change:transform,opacity;background:#1b1d1e}
#product.scroll-fan .section-heading{position:relative;z-index:2}
#product.scroll-fan .section-heading h2,#product.scroll-fan .section-description{text-shadow:0 2px 14px #101314,0 0 24px #101314}
@media(prefers-reduced-motion:reduce){#product .product-video-scene{display:none}}

/* Left-aligned header identity. */
.nav-shell .desktop-nav{display:none}
.nav-shell .brand{grid-column:1;grid-row:1;justify-self:start}
.nav-shell .desktop-demo{grid-column:3;grid-row:1}

/* FAQ reference: editorial heading and flat accordion rows. */
.faq{padding-top:96px;padding-bottom:112px;background-color:var(--paper);background-image:radial-gradient(circle,#a5a8aa18 1px,transparent 1.4px);background-size:20px 20px}
.faq .container{max-width:1140px}
.faq .section-heading{text-align:left;margin-bottom:44px}
.faq .section-heading h2{font-family:'Instrument Serif',Georgia,serif;font-size:clamp(42px,5.3vw,76px);font-weight:400;line-height:1.1;letter-spacing:-.025em}
.faq .faq-list{max-width:none;margin:0;gap:0;border-top:1px solid #ffffff28}
.faq details,.faq details[open]{background:transparent;border:0;border-bottom:1px solid #ffffff28;border-radius:0;padding:0;box-shadow:none}
.faq summary{padding:25px 0;font-size:22px;font-weight:400;line-height:1.4;min-height:78px;gap:24px}
.faq summary span{background:transparent;border-radius:0;width:30px;height:30px;font-size:29px;font-weight:300}
.faq details p{padding:0 64px 26px 0;margin:0;max-width:900px;font-size:17px;line-height:1.7}
@media(max-width:600px){.faq{padding-top:64px;padding-bottom:72px}.faq .section-heading{margin-bottom:32px}.faq summary{font-size:17px;min-height:72px;padding:22px 0;gap:16px}.faq details p{font-size:15px;padding-right:24px}}

/* Tighten the transition from the collage to the FAQ. */
.content-collage{padding-bottom:20px}
.faq{padding-top:40px}
@media(max-width:600px){.content-collage{padding-bottom:16px}.faq{padding-top:32px}}