/* Storixa V2.5 refinement layer. Override the V2 visual foundation with consistent tokens. */
:root{
 --shadow-card:0 18px 50px rgba(46,56,41,.13),0 3px 12px rgba(46,56,41,.06);
 --radius-card:22px;
}
html{scroll-padding-top:90px}
body{color:var(--ink)}
.skip-link{position:fixed;left:14px;top:-65px;z-index:1000;padding:14px 20px;border-radius:12px;background:var(--ink);color:white}
.skip-link:focus{top:12px}
button,a,summary{touch-action:manipulation}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.desktop-nav{display:flex;align-items:center;gap:31px}
.desktop-nav>a,.desktop-nav .nav-details>summary{display:flex;align-items:center;gap:9px;height:46px;font-weight:600;font-size:14px;color:#374733;cursor:pointer;list-style:none;white-space:nowrap}
.nav-details>summary::-webkit-details-marker{display:none}
.desktop-nav .nav-details>summary>.icon{width:14px;height:14px;transition:transform .2s ease}
.nav-details[open]>summary>.icon{transform:rotate(180deg)}
.nav-details{position:relative}
.nav-dropdown{position:absolute;top:46px;left:50%;transform:translateX(-50%);width:300px;padding:10px;background:#fff;border:1px solid var(--soft-line);box-shadow:var(--shadow-card);border-radius:16px;z-index:55;display:grid;gap:3px}
.nav-dropdown a{padding:13px 14px;border-radius:10px;font-size:13px;font-weight:700;color:var(--ink)}
.nav-dropdown a span{display:block;margin-top:5px;font-weight:500;font-size:11px;line-height:1.4;color:#5e8455}
.nav-dropdown a:hover,.nav-dropdown a:focus-visible{background:var(--surface-tint)}
.hero{min-height:1005px;background:linear-gradient(112deg,#fff 6%,#faffff 43%,var(--surface-tint) 100%)}
.hero-grid{min-height:973px}
.hero-copy{padding-top:94px;position:relative;z-index:4}
.headline-intro{font-size:34px;color:#425d3c}
.headline-line{font-size:72px;letter-spacing:-4px;line-height:1.07}
.hero-description{font-size:17px;line-height:1.62;max-width:450px;color:#587c4f;margin-top:24px}
.hero-description strong{color:#384834}
.hero-reassurance{display:flex;align-items:center;gap:10px;max-width:455px;color:#5d8454;font-size:12px;line-height:1.45;margin-top:21px}
.reassurance-icon{display:grid;place-items:center;flex-shrink:0;width:29px;height:29px;border-radius:50%;background:#e8f9f0;color:#0a9969}
.reassurance-icon .icon{width:15px;height:15px}
.hero-actions .btn{min-height:54px}
/* The principal browser must be legible; supporting cards stay at its periphery. */
.scene{top:68px;left:40.7%;transform:scale(.92)}
.browser-window{box-shadow:0 28px 78px rgba(46,56,41,.18),0 8px 24px rgba(91,128,82,.12),0 0 0 6px #fff7}
.scene-aura{filter:blur(1px);opacity:.88}
.floating-panel{background:var(--glass);border-color:#fff;box-shadow:var(--shadow-card)}
.scene-footnote{font-size:10px;color:#628a58;right:44px;bottom:13px}
.decision-reason{position:absolute;left:303px;bottom:4px;z-index:7;display:flex;align-items:center;gap:10px;width:397px;padding:11px 14px;background:rgba(255,255,255,.96);border:1px solid #edf3ec;border-radius:15px;box-shadow:0 11px 32px #5f86551a}
.decision-reason>.icon{color:#3f4a3c;flex-shrink:0;width:18px;height:18px}
.decision-reason span b,.decision-reason span small{display:block}.decision-reason span b{font-size:11px}.decision-reason span small{font-size:9.5px;line-height:1.5;margin-top:3px;color:#628e58}
.perspective-toggle button.active{background:var(--surface-tint);color:#3f4a3c}
.scene[data-story="improves"] .growth-float{opacity:.45}
/* The guided walkthrough is real UI, not an absent video. */
.tour-dialog{border:1px solid #e9f0e7;border-radius:25px;width:min(520px,calc(100vw - 26px));max-height:calc(100vh - 35px);padding:0;color:var(--ink);background:#fff;box-shadow:0 30px 110px rgba(46,56,41,.26);overflow:auto}
.tour-dialog::backdrop{background:rgba(46,56,41,.54);backdrop-filter:blur(9px)}
.tour-topline{display:flex;align-items:center;justify-content:space-between;padding:19px 22px;border-bottom:1px solid #eff4ee}
.tour-brand{display:flex;align-items:center;gap:8px;color:#3f4a3c;font-size:11px;font-weight:800;letter-spacing:1.1px}
.tour-brand .icon{width:17px;height:17px}.tour-close{width:42px;height:42px;border:0;background:#f5f8f5;border-radius:12px;display:grid;place-items:center}
.tour-body{padding:29px 32px 30px;background:radial-gradient(circle at 70% 35%,#f3f6f2 0%,transparent 55%),#fff}
.tour-count{font-size:11px;letter-spacing:1.2px;font-weight:800;color:#6aa05d}.tour-icon{display:grid;place-items:center;width:67px;height:67px;background:#f1f6f0;color:#3f4a3c;border-radius:20px;margin:27px 0 17px}.tour-icon .icon{width:32px;height:32px}.tour-body h2{font-size:31px;letter-spacing:-1.3px;line-height:1.18;margin:0}.tour-body p{font-size:15px;line-height:1.65;color:#5b8052;margin:13px 0 18px}.tour-evidence{font-size:13px;padding:15px;background:#f7faf6;color:#3f4a3c;border-radius:13px;font-weight:700}
.tour-footer{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:16px 22px}.tour-dots{display:flex;gap:6px}.tour-dots span{width:7px;height:7px;border-radius:50%;background:#e0eadd}.tour-dots span.active{width:20px;border-radius:8px;background:#3f4a3c}.tour-controls{display:flex;gap:10px}.tour-controls button{min-height:44px;padding:0 17px;font-size:12px}.tour-controls button:disabled{opacity:.4;cursor:not-allowed}.btn-outline{border:1px solid #dee8dc;background:#fff;color:#3f4a3c;display:inline-flex;justify-content:center;align-items:center;gap:11px;padding:0 21px;border-radius:13px;min-height:53px;font-weight:700}
/* Laptop and midsize desktop: make a larger product preview relative to floating cards. */
@media(min-width:1111px) and (max-width:1450px){
 .hero{min-height:990px}.hero-grid{min-height:970px}.hero-copy{padding-top:95px}.headline-line{font-size:63px}.scene{left:39%;top:65px;transform:scale(.765)}
 .perspective-toggle{right:19px}
}
@media(min-width:1451px) and (max-width:1650px){.hero{min-height:985px}.hero-grid{min-height:963px}.scene{left:39%;top:64px;transform:scale(.855)}.headline-line{font-size:68px}}
@media(min-width:1800px){.hero{min-height:1090px}.hero-grid{min-height:1060px}.hero-copy{padding-top:120px}.scene{top:93px;left:40%}}
/* Tablets get a compact, centered browser stage; avoids a 1320px hero. */
@media(min-width:701px) and (max-width:1110px){
 .hero{min-height:1055px}.hero-grid{min-height:1030px}.hero-copy{padding-top:53px}
 .headline-intro{font-size:28px}.headline-line{font-size:56px}.hero-description{max-width:670px;font-size:15px;margin-top:16px}
 .hero-reassurance{display:none}.hero-actions{margin-top:20px}
 .scene{top:470px;left:calc(50% - 390px);transform:scale(.75)}
 .demo-toolbar{left:210px}.perspective-toggle{right:10px}
}
@media(min-width:701px) and (max-width:840px){
 .hero{min-height:1005px}.hero-grid{min-height:975px}.scene{top:467px;left:calc(50% - 354px);transform:scale(.675)}
 .perspective-toggle{right:25px}.hero-copy{padding-top:51px}.headline-line{font-size:52px}
}
@media(max-width:700px){
 .site-header{height:66px}.hero{min-height:auto;padding-bottom:43px}.hero-grid{min-height:0}
 .hero-copy{padding-top:40px}.eyebrow{font-size:10px;min-height:32px}.headline-intro{font-size:23px;line-height:1.25}
 .headline-line{font-size:clamp(42px,12vw,52px);letter-spacing:-2.65px;line-height:1.015}
 .hero-description{font-size:14px;line-height:1.55;margin-top:17px}
 .hero-description strong{font-weight:700}
 .hero-actions{margin-top:20px;gap:9px}.hero-actions .btn{min-height:49px;font-size:11.8px;white-space:nowrap;padding:0 12px}.hero-actions .btn-primary{flex:1.08}.hero-actions .btn-quiet{flex:.95}
 .hero-reassurance{display:none}
 .mobile-experience{display:block;margin-top:28px}
 .mobile-demo-switcher{display:grid;grid-template-columns:repeat(3,1fr);width:100%;padding:4px;margin:0 0 12px;background:var(--surface-tint);border:1px solid #ecf2eb;border-radius:13px;gap:4px}
 .mobile-demo-switcher button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;font-size:12px;border-radius:9px}
 .mobile-demo-shell{padding:13px}
 .mobile-demo-top{height:34px}.mobile-demo-pill{font-size:10px}
 .mobile-banner{height:180px;border-radius:12px}.mobile-banner b{font-size:26px}
 .mobile-persona-head{padding-top:17px}.mobile-persona-head b{font-size:16px}.mobile-persona-head small{font-size:10px;color:#5f8655}
 .mobile-persona{font-size:12px;min-height:42px;padding:0 12px}
 .mobile-products article b{font-size:12px}.mobile-products article span{font-size:12px}
 .mobile-ai-notice b{font-size:12px}.mobile-ai-notice small{font-size:11px;line-height:1.4;color:#5f8656}
 .mobile-demo-detail{font-size:12px;line-height:1.55;color:#608756}
 .mobile-screen-heading{height:70px}.mobile-screen-heading small{font-size:10px;color:#597e50}.mobile-screen-heading b{font-size:15px}
 .mobile-contact b{font-size:13px}.mobile-contact small{font-size:11px;color:#5a7d52}.mobile-contact-status{font-size:10px}
 .mobile-customer-bubble,.mobile-agent-bubble{font-size:12.5px;line-height:1.5}
 .mobile-chat-product b{font-size:11px}.mobile-chat-product small{font-size:10px}.mobile-chat-product button{font-size:11px;min-height:44px;padding:0 8px}
 .mobile-growth-stats small{font-size:11px}.mobile-growth-stats b{font-size:20px}.mobile-growth-stats span{font-size:10px}
 .mobile-chart-head b{font-size:12px}.mobile-chart-head span{font-size:10px}.mobile-opportunity p{font-size:12.5px}.mobile-opportunity button{min-height:44px;font-size:11px}
 .tour-body{padding:26px 23px}.tour-body h2{font-size:26px}.tour-footer{padding:14px}

}
@media(max-width:365px){
 .hero-actions .btn{font-size:11px;padding:0 9px}.headline-line{font-size:42px}.hero-description{font-size:13.5px}.mobile-banner b{font-size:24px}
}
@media(prefers-reduced-motion:no-preference){
 .floating-panel{transition:opacity .4s,transform .4s,box-shadow .4s}
 .browser-content .demo-panel:not([hidden]){animation:story-in .35s both}
 .scene[data-story="thinks"] .decision-reason>.icon{animation:soft-pulse 2.8s ease-in-out 4}
}
@keyframes story-in{from{opacity:.3;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@keyframes soft-pulse{50%{filter:drop-shadow(0 0 5px #a7c7a0)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
/* Do not let the refined desktop navigation override the responsive menu. */
@media(max-width:1110px){.desktop-nav{display:none}}
