/* Scroll-led product storytelling. Native scroll, no wheel interception. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: page-out .16s ease both; }
::view-transition-new(root) { animation: page-in .3s ease both; }
@keyframes page-out { to { opacity: 0; } }
@keyframes page-in { from { opacity: 0; transform: translateY(8px); } }
.experience-site { --section-space: clamp(112px, 11vw, 172px); --motion-accent: #c44362; --motion-ease: cubic-bezier(.16,1,.3,1); }
.experience-site.theme-forge { --motion-accent: #ff9f70; }
.experience-site .site-header { padding-block: 0; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(20px); }
.experience-site.theme-forge .site-header { background: #0c0c0feb; }
.experience-site .product-nav { border-bottom: 1px solid var(--soft-line); }
.experience-site .product-nav .subnav-inner { min-height: 58px; }
.experience-site .product-nav a { font-size: 14px; }
.experience-site .inner-intro { padding-top: 92px; padding-bottom: 70px; }
.experience-site .inner-intro h1 { max-width: 1000px; font-size: clamp(50px,6vw,88px); line-height: 1.07; letter-spacing: -.065em; margin: 27px 0; }
.experience-site .inner-intro p { max-width: 680px; font-size: 18px; line-height: 1.85; }
.experience-site .product-intro-new { text-align: center; padding: 105px 0 76px; position: relative; background: radial-gradient(ellipse at 50% 105%,#f1dfe44a,transparent 66%); }
.theme-forge .product-intro-new { background: radial-gradient(ellipse at 50% 115%,#ff815515,transparent 67%); }
.product-intro-new .wrap { position: relative; }
.experience-site .product-intro-new h1 { max-width: 1040px; margin: 30px auto; font-size: clamp(57px,6.5vw,96px); }
.experience-site .product-intro-new h1 em { color: #c44864; }
.experience-site.theme-forge .product-intro-new h1 em { color: #ffa275; }
.experience-site .product-intro-new p { margin: 0 auto; max-width: 650px; font-size: 18px; }
.product-intro-new .overview-actions { justify-content: center; gap: 14px; margin-top: 35px; }
.product-quick-facts { display: flex; justify-content: center; gap: 26px; margin-top: 35px; color: #877e7b; font-size: 13px; flex-wrap: wrap; }
.product-quick-facts span+span { position: relative; }
.product-quick-facts span+span:before { content: ''; position: absolute; left: -14px; top: 9px; width: 3px; height: 3px; border-radius: 50%; background: #c2afab; }
.theme-forge .product-quick-facts { color: #a99ca4; }
.demo-intro { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 25px; gap: 22px; }
.demo-intro p { font: 500 20px/1.4 var(--display); letter-spacing: -.035em; margin: 0; }
.demo-intro>span:last-child { color: #8c7c78; font-size: 13px; }
.theme-forge .demo-intro>span:last-child { color: #ac939e; }
.product-lab-section { padding: 20px 0 0; }
.product-lab-section .tool-lab { border-radius: 22px; box-shadow: 0 32px 85px -42px #5c26353d; }
.theme-forge .product-lab-section .tool-lab { box-shadow: 0 38px 95px -42px #000; }
.editorial-heading { margin-bottom: 66px; }
.editorial-heading h2 { font-size: clamp(42px,4.8vw,70px); line-height: 1.09; }
.experience-site .tool-value { padding-top: 160px; padding-bottom: 155px; }
.tool-value>.wrap>.editorial-heading { display: grid; grid-template-columns: 1.25fr .75fr; column-gap: 110px; align-items: end; }
.tool-value .editorial-heading .eyebrow { grid-column: 1/-1; }
.tool-value .editorial-heading h2 { margin-bottom: 0; }
.tool-value .editorial-heading p { margin-bottom: 4px; font-size: 17px; }
.value-feature-grid { gap: 70px; margin-bottom: 42px; }
.value-feature-grid article { padding-top: 32px; }
.value-feature-grid h3 { margin-top: 27px; font-size: 29px; }
.value-feature-grid p { line-height: 1.9; }
.actual-workspace { background: #f0ebe5; border-block: 1px solid #e4dad5; }
.theme-forge .actual-workspace { background: #131115; border-color: #2b222b; }
.actual-workspace>.wrap>.editorial-heading { margin-bottom: 45px; }
.actual-workspace>.wrap>.editorial-heading p { margin-top: 25px; }
.scroll-story { display: grid; grid-template-columns: .7fr 1.3fr; gap: 70px; align-items: start; position: relative; }
.story-chapter { min-height: 640px; display: flex; flex-direction: column; justify-content: center; padding: 70px 0; scroll-margin-top: 190px; }
.story-number { display: flex; align-items: center; gap: 14px; color: #ad7984; font: 13px var(--mono); }
.story-number i { display: block; width: 30px; height: 1px; background: currentColor; opacity: .5; transition: width .7s var(--motion-ease); }
.story-chapter.is-current .story-number i { width: 50px; }
.story-chapter h3 { font: 500 clamp(28px,2.7vw,39px)/1.18 var(--display); letter-spacing: -.045em; margin: 27px 0 23px; color: #32272b; }
.story-chapter>p { font-size: 16px; line-height: 1.9; margin: 0; color: #807071; }
.story-outcome { border-top: 1px solid #d9caca; padding-top: 24px; margin-top: 28px; display: grid; gap: 9px; }
.story-outcome>span { font: 12px var(--mono); color: #a28183; }
.story-outcome>strong { font-size: 15px; line-height: 1.7; font-weight: 500; color: #625052; }
.story-lesson { font-size: 14px; font-weight: 500; display: flex; justify-content: space-between; align-items: center; max-width: 190px; color: #ac4260; padding: 20px 0 6px; }
.story-lesson span { transition: transform .3s; }.story-lesson:hover span { transform: translate(3px,-3px); }
.theme-forge .story-number { color: #d39374; }
.theme-forge .story-chapter h3 { color: #f1e8e8; }
.theme-forge .story-chapter>p { color: #b2a1ad; }
.theme-forge .story-outcome { border-color: #46343e; }
.theme-forge .story-outcome>span { color: #a77e82; }
.theme-forge .story-outcome>strong { color: #cbb3bc; }
.theme-forge .story-lesson { color: #f09e77; }
.story-visual { position: sticky; top: max(184px, calc(50vh - 150px)); padding: 25px 0; min-width: 0; align-self: start; }
.story-device { border: 1px solid #dfcfcd; border-radius: 15px; padding: 0 0 4px; background: #fff9f5; box-shadow: 0 30px 70px -40px #5a303955; overflow: hidden; }
.story-device-bar { display: flex; align-items: center; gap: 14px; padding: 16px 19px; font-size: 13px; color: #736269; border-bottom: 1px solid #eadcda; }
.story-device-bar small { margin-left: auto; color: #a1848f; font-size: 12px; }
.story-window-dots { display: flex; gap: 4px; }.story-window-dots i { width: 6px; height: 6px; background: #d7c3c9; border-radius: 50%; }
.story-screen.tour-screen { padding: 0; margin: 0; position: relative; background: #f7eeed; border: 0; }
.story-screen.tour-screen img { width: 100%; height: auto; aspect-ratio: 16/9; object-fit: contain; border-radius: 0; transform: none; }
.story-screen .tour-zoom { opacity: 0; transform: translateY(5px); transition: opacity .25s,transform .25s; font-size: 12px; }
.story-screen:hover .tour-zoom,.story-screen:focus-visible .tour-zoom { opacity: 1; transform: none; }
.story-screen-caption { display: flex; justify-content: space-between; align-items: center; padding: 17px 20px; font-size: 13px; color: #a1838d; }
.story-screen-caption strong { font-weight: 500; color: #71545f; }
.theme-forge .story-device { background: #211820; border-color: #4a333e; box-shadow: 0 40px 85px -35px #0009; }
.theme-forge .story-device-bar { border-color: #49323e; color: #d5b3c1; }
.theme-forge .story-device-bar small { color: #ac8297; }.theme-forge .story-window-dots i { background: #694754; }
.theme-forge .story-screen-caption { color: #a97e93; }.theme-forge .story-screen-caption strong { color: #dfbdca; }
.story-dots { display: flex; gap: 12px; margin: 24px 0 15px; }.story-dots a { flex: 1; display: grid; gap: 9px; padding: 9px 0; color: #a48c90; font: 12px var(--mono); }
.story-dots i { height: 2px; width: 100%; background: #dfd0cf; position: relative; }
.story-dots i:after { content: ''; position: absolute; inset: 0; background: var(--motion-accent); transform: scaleX(0); transform-origin: left; transition: transform .6s var(--motion-ease); }
.story-dots a[aria-current=step] { color: var(--motion-accent); }.story-dots a[aria-current=step] i:after { transform: scaleX(1); }
.theme-forge .story-dots i { background: #49343f; }.theme-forge .story-dots a { color: #a68694; }
.story-scroll-hint { font-size: 13px; color: #a68e8e; text-align: center; margin: 10px 0 0; }.story-scroll-hint span { display: inline-block; margin-right: 7px; }
.story-mobile-shot { display: none; }
.experience-site .section { padding-block: 112px; }
.experience-site .feature-layout { gap: 100px; }
.experience-site .feature-copy h2 { line-height: 1.15; }
.experience-site .feature-copy p { line-height: 1.95; }
.experience-site .feature-list { margin-top: 26px; }.experience-site .feature-list li { margin-bottom: 14px; }
.experience-site .screen-gallery { gap: 38px; }
.experience-site .lesson-card { padding: 32px; }.experience-site .lesson-grid { gap: 28px; }
.experience-site .price-sheet { padding-top: 20px; }.experience-site .price-card { padding: 38px 32px; }
.experience-site .btn { min-height: 50px; font-size: 14px; padding-inline: 24px; transition: transform .35s var(--motion-ease), box-shadow .35s,background .25s; }
.experience-site .btn:hover { transform: translateY(-3px); box-shadow: 0 9px 24px #33201c16; }
.experience-site .btn span { transition: transform .3s; }.experience-site .btn:hover span { transform: translate(2px,-2px); }
.experience-site .home-product-stack { gap: 70px; }.experience-site .home-tool { padding-top: 65px; padding-bottom: 65px; }
.experience-site .home-tool h3 { font-size: clamp(36px,3.5vw,51px); }.experience-site .about-layout { gap: 120px; }
/* Motion remains an enhancement: the document is readable before JS and with reduced motion. */
.experience-site.motion-ready .reveal { transform: translate3d(0,55px,0); opacity: 0; transition: opacity .85s ease, transform 1.1s var(--motion-ease); transition-delay: var(--reveal-delay,0ms); }
.experience-site.motion-ready .reveal.visible { opacity: 1; transform: none; }
.motion-enabled .motion-enter { opacity: 0; transform: translateY(35px); transition: opacity .8s ease,transform 1.1s var(--motion-ease); transition-delay: var(--enter-delay,0ms); }
.motion-enabled .intro-in .motion-enter { opacity: 1; transform: none; }
.motion-word-wrap { display: inline-block; overflow: visible; vertical-align: top; padding: .03em .07em .16em; margin: -.03em -.045em -.13em; }
.motion-enabled .motion-word { display: inline-block; opacity: 0; filter: blur(4px); transform: translateY(20px); transition: transform .78s var(--motion-ease),opacity .58s ease,filter .68s ease; transition-delay: var(--word-delay,0ms); }
.motion-enabled .intro-in .motion-word { opacity: 1; filter: blur(0); transform: translateY(0); }
.motion-enabled .scroll-lift { transform: perspective(1500px) translate3d(0,var(--lift-y,0px),0) rotateX(var(--lift-tilt,0deg)) scale(var(--lift-scale,1)); transform-origin: 50% 15%; will-change: transform; }
.motion-enabled .home-tool-visual img { transform: translateY(var(--image-y,0px)) scale(1.035); }
.page-loading-line { position: fixed; inset: 0 auto auto 0; width: 100%; height: 3px; z-index: 300; pointer-events: none; background: linear-gradient(90deg,var(--motion-accent),#f3b594,var(--motion-accent)); transform: scaleX(.05); transform-origin: left; transition: transform .5s ease, opacity .3s ease; }
.page-loading-line.is-loaded { transform: scaleX(1)!important; opacity: 0; }
.image-loading { background: linear-gradient(100deg,#d6cac322 20%,#ffffff90 45%,#d6cac322 70%); background-size: 250% 100%; animation: image-sheen 1.5s ease-in-out infinite; }
.theme-forge .image-loading { background-image: linear-gradient(100deg,#332430 20%,#614958 45%,#332430 70%); }
@keyframes image-sheen { to { background-position: -150% 0; } }
.experience-site .scroll-progress { height: 2px; background: var(--motion-accent); }
@media(min-width:901px){.motion-enabled .story-chapter { opacity: .48; transition: opacity .7s; }.motion-enabled .story-chapter.is-current { opacity: 1; }}
@media(max-width:1100px){.scroll-story{gap:40px;grid-template-columns:.75fr 1.25fr}.story-device-bar small{display:none}.tool-value>.wrap>.editorial-heading{column-gap:60px}.value-feature-grid{gap:35px}.experience-site .feature-layout{gap:55px}.experience-site .about-layout{gap:60px}.demo-intro>.eyebrow{display:none}}
@media(max-width:900px){.scroll-story{display:block}.story-visual{display:none}.story-chapter{min-height:0;padding:55px 0 65px;border-bottom:1px solid #dfd0cf}.story-chapter:last-child{border:0;padding-bottom:0}.story-chapter h3{max-width:600px;font-size:38px}.story-chapter>p{max-width:640px}.story-outcome{max-width:580px}.story-mobile-shot{display:block;margin:30px 0 0;border:1px solid #d9c9c6;border-radius:12px;overflow:hidden;background:#fff8f4;cursor:zoom-in}.story-mobile-shot img{width:100%;height:auto}.story-mobile-shot figcaption{padding:13px 18px;font-size:12px;color:#947c7e}.theme-forge .story-chapter{border-color:#43303b}.theme-forge .story-mobile-shot{border-color:#4c3441;background:#251923}.theme-forge .story-mobile-shot figcaption{color:#ba92a5}.actual-workspace>.wrap>.editorial-heading{margin-bottom:20px}}
@media(max-width:760px){.experience-site{--section-space:90px}.experience-site .inner-intro{padding-top:58px;padding-bottom:48px}.experience-site .inner-intro h1{font-size:48px}.experience-site .inner-intro p{font-size:16px;line-height:1.85}.experience-site .product-intro-new{padding:68px 0 52px}.experience-site .product-intro-new h1{font-size:clamp(43px,8.8vw,62px);line-height:1.1;margin:24px auto}.experience-site .product-intro-new p{font-size:16px}.product-intro-new .overview-actions{margin-top:28px;gap:10px}.product-quick-facts{gap:8px 20px;font-size:12px;margin-top:26px}.product-quick-facts span+span:before{left:-11px}.product-quick-facts span:last-child{display:none}.demo-intro{padding-bottom:20px;display:block}.demo-intro p{font-size:19px}.demo-intro>span:last-child{display:block;margin-top:8px;font-size:12px}.product-lab-section{padding-top:15px}.experience-site .tool-value{padding-block:96px}.tool-value>.wrap>.editorial-heading{display:block}.editorial-heading{margin-bottom:42px}.editorial-heading h2{font-size:42px}.tool-value .editorial-heading p{margin-top:25px;font-size:16px}.value-feature-grid{gap:32px}.value-feature-grid article{padding-top:24px}.value-feature-grid h3{margin-top:20px}.story-chapter{padding:40px 0 55px}.story-chapter h3{font-size:31px;margin-block:24px 20px}.story-chapter>p{font-size:16px;line-height:1.9}.story-number{font-size:12px}.experience-site .section{padding-block:80px}.experience-site .feature-layout{gap:35px}.experience-site .price-sheet{padding-top:15px}.experience-site .price-card{padding:30px 26px}.experience-site .lesson-card{padding:27px}.experience-site .home-product-stack{gap:35px}.experience-site .home-tool{padding-top:35px;padding-bottom:0}.experience-site .home-tool h3{font-size:39px}.experience-site .about-layout{gap:15px}.experience-site .btn{padding-inline:20px;font-size:14px}.experience-site .product-nav a{font-size:13px}.experience-site .product-nav .subnav-inner{min-height:54px}.experience-site .tool-next-links h2{font-size:34px}.motion-enabled .scroll-lift{transform:none}}
@media(prefers-reduced-motion:reduce){::view-transition-old(root),::view-transition-new(root){animation:none}.experience-site.motion-ready .reveal,.motion-enabled .motion-enter,.motion-enabled .motion-word,.motion-enabled .scroll-lift,.motion-enabled .home-tool-visual img{opacity:1;transform:none;transition:none}.page-loading-line{display:none}.image-loading{animation:none}.story-chapter,.story-number i,.story-dots i:after{transition:none}.experience-site .btn:hover{transform:none}.motion-enabled .story-chapter{opacity:1}}