/* Hero-specific composition; existing product and creator sections stay intact. */
:root{--teal:#007f73;--paper:#f7f8f2;--ink:#142e29}
header nav{font-size:15px;gap:25px}header .button.small{font-size:14px}header .brand{font-size:27px}.concept-bar{font-size:10px}.concept-bar a{font-size:12px}
.hero-story{--progress:0;position:relative}.hero-story .hero{max-width:1800px;grid-template-columns:.83fr 1.17fr;gap:5%;padding-top:48px;padding-bottom:55px;min-height:calc(100svh - 125px)}.hero-story h1{font-size:clamp(60px,5.45vw,104px);letter-spacing:-.065em;line-height:1.02;margin:27px 0}.hero-story h1 em{color:var(--teal);letter-spacing:-.06em}.hero-story .hero .eyebrow{font-size:10px;letter-spacing:1px;max-width:460px}.hero-story .hero-description{font-size:20px;max-width:470px;line-height:1.6;margin-top:25px}.hero-description strong{font-weight:500;color:var(--ink)}.hero-story .hero-actions{gap:24px;margin-top:29px}.hero-story .hero-actions .button{font-size:16px;padding:20px 27px}.hero-story .plain-button{font-size:15px}.hero-story .hero-note{font-size:13px;margin-top:23px}.hero-access{font-size:12px;color:var(--muted);margin-top:10px;max-width:430px}.hero-scroll{display:inline-block;font-size:12px;margin-top:40px;color:var(--teal);border-bottom:1px solid #007f7340;padding-bottom:7px}
.hero-story .demo{border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible;min-width:0;scroll-margin-top:115px}.hero-story .demo-header{background:none;border:0;padding:0 12px 27px;font-size:10px;letter-spacing:1px}.hero-story .demo-pair{position:relative;grid-template-columns:1fr 1fr;gap:8px;padding:20px 10px 30px;align-items:center}.hero-story .demo-pair figure{overflow:hidden;box-shadow:0 18px 32px #17372c17;transition:none;will-change:transform}.hero-story .before{border:10px solid white;border-bottom:0;border-radius:0;background:white;transform:translateX(calc(var(--progress)*-5px)) rotate(calc(-9deg + var(--progress)*9deg));z-index:1}.hero-story .before>img{height:auto;aspect-ratio:3/4;object-fit:cover}.hero-story .before figcaption{font-size:9px;letter-spacing:.5px;padding:17px 3px;background:white;gap:10px}.hero-story .before figcaption span{font-size:7px}.hero-story .after{border:7px solid #142e29;border-radius:19px;background:var(--ink);transform:translateY(calc(-20px + var(--progress)*20px)) rotate(calc(7deg - var(--progress)*7deg));z-index:2}.hero-story .after>video{height:auto;width:100%;aspect-ratio:9/14;object-fit:cover;background:#142e29}.hero-story .after figcaption{background:#142e29;color:white;font-size:9px;padding:12px 9px}.hero-story .pair-arrow{position:absolute;left:43%;top:67%;font-size:65px;font-family:Georgia,serif;color:#f6b12a;z-index:4;transform:rotate(-15deg);pointer-events:none}.hero-sticker{position:absolute;bottom:2%;left:5%;z-index:5;background:#e1efbd;color:var(--ink);padding:16px 22px;font-size:16px;line-height:1.4;transform:rotate(-7deg);opacity:calc(1 - var(--progress));pointer-events:none;box-shadow:3px 5px 0 #17372c09}.hero-proof-controls{margin-top:9px;border-top:1px solid #d5dfd6}.hero-story .sample-tabs{padding:18px 0 0;gap:8px}.hero-story .sample-tab{font-size:13px;min-height:44px;background:transparent}.hero-story .sample-tab[aria-pressed=true]{background:var(--ink)}.hero-story .demo-bottom{padding:16px 0 8px}.hero-story .demo-bottom h2{font-size:21px}.hero-story .demo-bottom p{font-size:13px;max-width:520px}.hero-story .demo-bottom button{width:48px;height:48px}.hero-story .demo-status{font-size:11px;padding:0}.reel-banner{position:relative;display:flex;align-items:center;background:var(--teal);color:white;padding:20px 0;overflow:hidden}.banner-window{overflow:hidden;flex:1}.banner-track{display:flex;width:max-content;animation:reel-ticker 35s linear infinite}.banner-copy{display:flex;align-items:center;gap:40px;padding-right:40px;white-space:nowrap;font-family:var(--head);font-size:24px;font-weight:600;letter-spacing:-.7px}.banner-copy b{font-size:31px;color:#d9edb7;font-weight:400}#banner-pause{flex-shrink:0;z-index:1;background:var(--teal);color:white;border:1px solid #ffffff70;border-radius:50%;width:44px;height:44px;margin:0 22px}.reel-banner:hover .banner-track,.reel-banner:focus-within .banner-track,.reel-banner[data-paused=true] .banner-track{animation-play-state:paused}@keyframes reel-ticker{to{transform:translateX(-50%)}}
@media(min-width:1101px) and (min-height:800px){.hero-story.motion-enabled{height:calc(100svh + 180px)}.hero-story.motion-enabled .hero{position:sticky;top:85px;min-height:calc(100svh - 115px)}}
@media(min-width:1101px) and (max-height:900px){.hero-story .hero{padding-top:30px;padding-bottom:30px}.hero-story .demo-pair{max-width:660px;margin:auto}.hero-story h1{font-size:clamp(60px,5vw,87px)}.hero-story .hero-scroll{margin-top:22px}}
@media(max-width:1100px){header nav{font-size:13px;gap:16px}.hero-story .hero{gap:30px;grid-template-columns:.9fr 1.1fr;min-height:0;padding-top:55px;padding-bottom:55px}.hero-story h1{font-size:60px}.hero-story .hero-description{font-size:17px}.hero-story .hero .eyebrow{font-size:8px}.hero-story .hero-actions .button{font-size:14px}.hero-story .hero-actions{gap:12px}.hero-story .plain-button{font-size:13px}.hero-story .demo-header{font-size:8px}.hero-story .before figcaption span{display:none}.hero-sticker{font-size:13px;padding:12px}.hero-story .demo-bottom p{font-size:12px}.hero-story .demo-bottom h2{font-size:18px}}
@media(max-width:700px){.hero-story .hero{grid-template-columns:1fr;gap:32px;padding-top:30px;padding-bottom:35px}.hero-story h1{font-size:clamp(49px,12vw,75px);margin:18px 0}.hero-story .hero-description{font-size:17px;margin-top:18px}.hero-story .hero-note{font-size:12px}.hero-access{font-size:11px}.hero-scroll{display:none}.hero-story .hero .eyebrow{font-size:8px;letter-spacing:.6px}.hero-story .hero-actions{margin-top:22px}.hero-story .demo-header{padding-bottom:14px}.hero-story .demo-pair{padding:15px 8px 30px;gap:5px}.hero-story .before{border-width:6px}.hero-story .before figcaption{font-size:7px;padding:13px 2px}.hero-story .after{border-width:5px;border-radius:12px}.hero-story .after figcaption{font-size:6px;padding:9px 4px}.hero-story .pair-arrow{font-size:45px}.hero-sticker{font-size:12px;padding:10px 14px}.hero-story .sample-tab{font-size:12px}.hero-story .demo-bottom h2{font-size:18px}.hero-story .demo-bottom p{font-size:12px}.hero-story .demo-status{font-size:10px}.banner-copy{font-size:18px;gap:25px;padding-right:25px}.banner-copy b{font-size:23px}.reel-banner{padding:14px 0}#banner-pause{margin:0 12px}header .brand{font-size:24px}}
@media(prefers-reduced-motion:reduce){.banner-track{animation:none}.hero-story .before,.hero-story .after{transform:none!important}.hero-sticker{opacity:1}.hero-story.motion-enabled{height:auto}.hero-story.motion-enabled .hero{position:static}}
@media(max-width:700px){.hero-story .hero-note{display:none}.hero-story .hero-actions{gap:12px}.hero-story .hero-actions .button{font-size:13px;padding:16px}.hero-story .hero-actions .plain-button{font-size:12px}.hero-story .hero-access{margin-top:15px}.hero-story .hero{gap:24px}.hero-story .hero-description br{display:none}.hero-story .hero-description strong{display:block}}