@import url('./design-tokens.css?v=system-130');
/* Shared controls: page colours remain contextual, dimensions and states do not. */
body :is(.footer-demo-button,.book-demo-button,.woo-button,.about-button,.case-button,.page-demo),
body .hero-nav .demo-link{
 min-height:var(--control-height);padding:var(--control-padding);border-radius:var(--radius-control);
 font:400 var(--type-body)/1.25 var(--font-ui);display:inline-flex;align-items:center;justify-content:center;
 gap:0;text-decoration:none;box-sizing:border-box;
}
body :is(.demo-submit,.report-request-submit){min-height:var(--control-height);font:400 var(--type-body)/1.25 var(--font-ui);border-radius:var(--radius-control);padding:var(--control-padding)}
body .demo-submit{min-height:56px} /* Full-width form controls follow the input row. */
body .hero-nav .menu-toggle{min-width:var(--touch-target);min-height:var(--touch-target)}
body :is(.customer-tabs button,.about-role-filters button,.blog-filters button){min-height:var(--touch-target);border-radius:var(--radius-control);font-family:var(--font-ui)}
body .about-role-filters button{font-size:14px}
body .about-founder-signatures a{width:var(--touch-target);height:var(--touch-target);border-radius:var(--radius-control)}
body #report-dialog .report-dialog-close{width:var(--touch-target);height:var(--touch-target)}
body :is(.case-study-link,.woo-case-copy>a,.about-text-link){font:400 var(--type-body)/1.5 var(--font-ui);min-height:var(--touch-target);display:inline-flex;align-items:center;width:fit-content;gap:0;text-underline-offset:5px}
body .customer-quote .case-study-link{font-size:var(--type-body)}
/* Uniform, contrasting keyboard focus on light and dark surfaces. */
body :is(a,button,summary,input,textarea,select,[tabindex]):focus-visible{
 outline:2px solid var(--action-blue);outline-offset:4px;
}
body #report-dialog :is(input,textarea):focus-visible{outline:2px solid var(--action-blue);outline-offset:3px}
body button:disabled{opacity:.45;cursor:not-allowed}
/* Structure: large cards, compact panels, controls. Animated artwork keeps its own geometry. */
body :is(.woo-ai-card,.woo-case,.about-letter,.about-values,.blog-card,.case-feature,.case-related-card,.demo-confirmation){border-radius:var(--radius-card)}
body :is(.woo-control-mosaic){border-radius:var(--radius-card)}
body :is(.case-chart,.case-outcome-card,.v-stat-pair,.v-operation,.case-result-story){border-radius:var(--radius-panel)}
body .case-metrics.case-container{margin-inline:auto}
/* Use a consistent reading size; tiny interface artwork is intentionally excluded. */
body .about-main :is(.about-letter-body p,.about-job-section p,.about-job-section li,.about-values p){font-size:var(--type-body);line-height:1.8}
body .woo-control-tile>p,body .woo-control-tile>div>p{font-size:var(--type-body);line-height:1.7}
body .v-chart-note,body .case-source-note{font-size:var(--type-caption)!important;color:var(--text-muted-light)}
body :is(.v-chart-readout,.v-chart figcaption>span,.v-chart-grid text,.v-chart-axis text){color:var(--text-muted-light);fill:var(--text-muted-light)}
body .v-chart :is(.v-bar-track i){background:var(--action-blue)}
body .v-recovery-chart .v-bar-row:first-child i,body .v-conversion-chart .v-bar-row:nth-child(-n+2) i{background:#a8adb2}
body .v-line-stroke{stroke:var(--action-blue)}
body .v-point-dot{stroke:var(--action-blue)}
@media(max-width:760px){
 body :is(.case-feature,.about-letter,.woo-control-mosaic){border-radius:var(--radius-panel)}
 body .hero-nav .demo-link{display:flex;width:100%}
 body .about-role-filters{gap:8px}
 body .customer-tabs button{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
 body :is(.footer-demo-button,.demo-link,.woo-button,.about-button,.case-button,.page-demo,.demo-submit,.report-request-submit){transition:none}
}

body .hero-nav::before{border-radius:var(--radius-panel);background:var(--nav-glass-dark);backdrop-filter:blur(var(--nav-blur));-webkit-backdrop-filter:blur(var(--nav-blur))}
body .hero-nav.nav-on-light::before{background:var(--nav-glass-light)}

/* Equal outer inset for both ends of the navigation; logo border is drawn by the SVG. */
body .hero-nav{left:7.1vw;right:8.3vw;width:auto;padding:8px;min-height:64px}
body .hero-nav::before{inset:0}
body .hero-nav .brand-logo{width:48px;height:48px;border-radius:0;overflow:visible}
@media(max-width:1100px){
 body .hero-nav{min-height:60px}
 body .hero-nav .brand-logo{width:44px;height:44px}
}

/* Mobile reading scale and balanced opening guides. */
@media(max-width:760px){
 body{font-size:var(--type-body-mobile)}
 /* Keep the same 24px breathing room beside the frame, below it and below the nav. */
 body .page-guides{--mobile-guide-inset:24px}
 body .page-guides .guide-left{left:var(--mobile-guide-inset)}
 body .page-guides .guide-right{right:var(--mobile-guide-inset)}
 body .page-guides .guide-top{top:100px}
 body .page-guides .guide-bottom{top:auto;bottom:var(--mobile-guide-inset)}
 body .hero-nav{left:24px;right:24px}
 body .customer-tabs{scrollbar-width:none;-ms-overflow-style:none}
 body .customer-tabs::-webkit-scrollbar{display:none;width:0;height:0}
 body .customer-quote{min-height:0}
 body .customer-quote blockquote{font-size:var(--type-quote-mobile);line-height:1.5}
 /* Reading copy; display statements, data and miniature UI retain their hierarchy. */
 body .site-footer .footer-brand>p,
 body :is(.setup-details p,.customer-placeholder p,.footer-links,.footer-links h3),
 body .woo-main :is(.woo-hero-copy>p,.woo-heading>p,.woo-section-heading>p,.woo-operation>p,.woo-operation li,.woo-ai-copy p,.woo-platform-grid p,.woo-layer-grid p,.woo-migration-steps p,.woo-team-grid p,.woo-case-copy p,.woo-benchmarks p),
 body .woo-control-tile>p,body .woo-control-tile>div>p,
 body .about-main :is(.about-hero-copy>p,.about-section-heading>p,.about-letter-body p,.about-job-section p,.about-job-section li,.about-values p,.about-role-body>p,.about-benefits p),
 body .case-main :is(.case-lead,.case-body-copy,.case-story-copy,.case-timeline p,.case-result-story p,.case-next-chapter>p:not(.section-tag),.case-faq-list details>p,.v-feature-summary p,.v-takeaways p,.v-operation li p),
 body .blog-main .blog-featured-copy>p,
 body :is(.blog-heading>p:last-child,.blog-featured>div>p:not(.blog-eyebrow),.blog-card>p,.article-deck,.article-prose,.demo-description),
 body .demo-confirmation p:not(.demo-eyebrow):not(.demo-preview-note){font-size:var(--type-body-mobile);line-height:1.65}
 /* Never reduce editable fields below 16px: iOS zooms smaller inputs on focus. */
 body :is(input,textarea,select){font-size:16px}
}

/* Secondary pages share a compact mobile hierarchy; the landing page is excluded. */
@media(max-width:760px){
 body:is(.woo-page,.about-page,.case-page,.blog-page,.demo-page) :is(main,.site-footer) :is(h3,h4,h5,h6),
 body.woo-page .woo-main :is(.setup-select,.woo-faq-list summary),
 body.about-page .about-main .about-role-title,
 body.blog-page .blog-main .blog-featured h2,
 body.demo-page .demo-main .demo-trust h2{font-size:14px;line-height:1.5}
 body:is(.woo-page,.about-page,.case-page,.blog-page,.demo-page) :is(main,.site-footer) :is(h1,h2),
 body.woo-page .setup-section .section-title,
 body.woo-page .woo-main :is(.woo-ai-copy h3,.woo-case-copy h3),
 body.case-page .case-main :is(.case-related-card h3,.case-result-story h3){
  font-size:24px;line-height:1.2;
 }
 body.woo-page .woo-scroll-copy{font-size:24px!important;line-height:1.35!important;margin:8px 0 0}
 body.woo-page :is(.woo-section,.setup-section){padding-block:48px}
 body.woo-page .woo-heading{margin-bottom:24px}
 body.woo-page .woo-main .section-tag{margin-bottom:16px}
 body.woo-page .woo-intro{height:auto;border:0}
 body.woo-page .woo-intro-sticky{position:static;height:auto;min-height:0;padding:80px 24px 100px;border:0}
 body.woo-page .woo-trust{border-bottom:0;padding-block:24px}
 body.woo-page .setup-options{min-height:0;justify-content:flex-start;padding-top:0}
 body.woo-page .setup-card{row-gap:0}
 body.woo-page .woo-faq .woo-heading{margin-bottom:12px}
 body.woo-page .woo-faq .woo-heading>p{display:none}
 body.woo-page .woo-faq h2{margin-bottom:0}
 body.woo-page .woo-faq-grid{gap:0}
 body.woo-page .woo-faq-list summary{padding-block:20px}
 body.woo-page .woo-trust>.woo-container>.woo-trust-logos{
  display:block;width:100%;overflow-x:auto;scrollbar-width:none;
  mask-image:linear-gradient(to right,transparent,#000 5%,#000 95%,transparent);
 }
 body.woo-page .woo-trust-logos::-webkit-scrollbar{display:none}
 body.woo-page .woo-trust .woo-logo-track{display:flex;width:max-content;animation:client-scroll 22s linear infinite}
 body.woo-page .woo-trust .woo-logo-group{display:flex;flex:none;width:auto;gap:32px;padding:8px 16px}
 body.woo-page .woo-trust .woo-logo-group img{width:112px;height:30px;max-width:none;flex:none}
 body.woo-page .woo-trust-logos:is(:hover,:focus-within) .woo-logo-track{animation-play-state:paused}
 body.about-page .about-hero{padding:120px 0 48px}
 body.about-page .about-section{padding-top:48px}
 body.about-page .about-section-heading{gap:16px;margin-bottom:24px}
 body.about-page .about-letter{padding:24px}
 body.about-page .about-letter h2{margin-bottom:24px}
 body.about-page .about-benefits{padding-bottom:48px}
 body.blog-page :is(.blog-main,.article-main){padding:120px 24px 48px}
 body.blog-page :is(.blog-heading,.article-heading){margin-bottom:32px}
 body.blog-page .blog-featured{padding:24px;margin-bottom:40px}
 body.blog-page .article-prose :is(h2,h3,h4){margin-top:32px;margin-bottom:16px}
 body.blog-page .article-related{padding-top:32px;margin-top:24px}
 body.case-page .case-hero{padding-top:112px}
 body.case-page .case-feature{margin-top:32px}
 body.case-page .case-editorial{padding-block:48px;gap:32px}
 body.case-page .case-chapter{padding-bottom:32px;margin-bottom:32px}
 body.case-page .case-chapter:last-child{padding-bottom:0;margin-bottom:0}
 body.case-page .case-related{padding-block:48px}
 body.demo-page .demo-intro{padding-top:120px}
 body.demo-page .demo-description{margin-bottom:24px}
 body.demo-page .demo-trust{margin-top:48px}
 body:is(.woo-page,.about-page,.case-page,.blog-page,.demo-page) .footer-demo-intro{padding:48px 24px 20px}
}
@media(max-width:760px) and (prefers-reduced-motion:reduce){
 body.woo-page .woo-trust .woo-logo-track{animation:none}
 body.woo-page .woo-trust .woo-logo-group[aria-hidden]{display:none}
}

/* Main page titles lead the mobile hierarchy; section and form titles stay compact. */
@media(max-width:760px){
 body:is(.woo-page,.about-page,.case-page,.blog-page,.demo-page) :is(main,.site-footer) h1,
 body .hero-title .hero-title-mobile{font-size:40px}
 body.case-page .case-index{display:none}
}
/* Mobile articles begin with the story, keeping only the back-to-blog link. */
@media(max-width:760px){
 body.blog-page .article-layout .article-toc{display:none}
 body.blog-page .article-layout>aside{border:0;padding-bottom:0;margin-bottom:24px}
 body.blog-page .article-layout>aside .article-back{margin-bottom:0}
}