/* /clean-design.css */
:root{--ink:#173b40;--muted:#607174;--paper:#f8f9f5;--lime:#e9f16d;--line:#dce3de}
*{box-sizing:border-box}html{scroll-behavior:auto;scroll-padding-top:0}body.clean-site{margin:0;background:var(--paper);color:var(--ink);font-family:Inter,sans-serif;-webkit-font-smoothing:antialiased}a{color:inherit;text-decoration:none}button{font:inherit}button,a,summary{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible,summary:focus-visible{outline:3px solid #759fa0;outline-offset:5px}[hidden]{display:none!important}.wrap{max-width:1240px;margin:auto;padding-left:48px;padding-right:48px}.clean-nav{height:88px;display:flex;align-items:center;gap:36px;padding:0 40px;position:sticky;top:0;z-index:30;background:rgba(248,249,245,.96);border-bottom:1px solid var(--line);backdrop-filter:blur(16px)}.wordmark{font-family:Outfit,sans-serif;font-size:39px;font-weight:600;letter-spacing:-2.3px;line-height:1}.wordmark span{font:11px Inter,sans-serif;vertical-align:top;letter-spacing:0;margin-left:3px}.nav-links{display:flex;gap:28px;align-items:center;margin-left:auto;font-size:13px;font-weight:500}.nav-links>a:last-child{display:none}.nav-links a{color:var(--ink)!important}.nav-actions{display:flex;align-items:center;gap:24px;font-size:13px}.button{display:inline-flex;justify-content:center;align-items:center;gap:24px;padding:16px 23px;border-radius:8px;font-size:13px;font-weight:600;transition:background .2s,transform .2s;border:1px solid transparent;line-height:1.25}.button:hover{transform:translateY(-2px);background:#dce661}.lime{background:var(--lime);color:var(--ink)}.mobile-toggle{display:none}.hero{display:grid;grid-template-columns:1.03fr 1fr;gap:62px;align-items:center;padding-top:86px;padding-bottom:88px}.eyebrow{display:flex;align-items:center;gap:9px;font-size:10px;letter-spacing:.13em;text-transform:uppercase;font-weight:600;line-height:1.7}.eyebrow i{height:6px;width:6px;background:#72978e;border-radius:50%}h1,h2,h3{font-family:Outfit,sans-serif;font-weight:400}h1{font-size:clamp(48px,5.5vw,76px);line-height:1.03;letter-spacing:-.045em;margin:23px 0}h1 em,h2 em{font-style:normal;color:#648781}.hero-copy>p,.firm-hero>p{font-size:15px;line-height:1.8;max-width:440px;color:var(--muted)}.actions{display:flex;gap:26px;align-items:center;flex-wrap:wrap;margin-top:28px}.text-link{font-size:13px;font-weight:600;display:inline-flex;align-items:center;gap:15px;padding:9px 0}.text-link:hover{text-decoration:underline;text-underline-offset:5px}.hero-copy .micro{font-size:10px;margin-top:18px}.firm-shortcut{display:block;font-size:11px;line-height:1.6;margin-top:28px;padding-top:20px;border-top:1px solid var(--line);max-width:410px}.hero-product{border:1px solid #d6dfd8;background:white;border-radius:16px;box-shadow:0 24px 60px #1d454010;position:relative;transform:rotate(-1deg)}.window-bar{padding:18px 22px;border-bottom:1px solid #e4e9e5;display:flex;justify-content:space-between;align-items:center}.mini-brand{font-size:14px;font-weight:600;letter-spacing:-.5px}.sample-label{font-size:9px;color:#7a8a89}.workspace{padding:26px}.workspace-heading{display:flex;justify-content:space-between;align-items:center;gap:8px}.workspace-heading small{font-size:8px;letter-spacing:.12em;color:var(--muted)}.workspace-heading h2{font-size:25px;margin:8px 0 23px;letter-spacing:-.03em}.status{font-size:8px;color:#38756b;background:#edf5ee;padding:6px 8px;border-radius:5px;white-space:nowrap}.metrics{display:grid;grid-template-columns:1.2fr 1fr;gap:12px;margin-bottom:24px}.metrics>div{padding:16px;background:#f6f8f4;border:1px solid #e7ece5;border-radius:9px}.metrics small{font-size:10px;color:var(--muted)}.metrics strong{display:block;font-size:26px;font-weight:500;letter-spacing:-1px;margin-top:12px}.metrics strong span{float:right;font-size:17px;color:#799589}.metrics p{font-size:9px;color:var(--muted);line-height:1.6}.metrics svg{width:100%;height:42px;overflow:visible}.metrics path{fill:none;stroke:#648c7e;stroke-width:2;stroke-dasharray:300;stroke-dashoffset:300;animation:chart-draw 3s ease forwards}.document-row{display:flex;gap:12px;align-items:center;border-top:1px solid #e6ebe6;padding:15px 0;animation:entry-in .9s both}.document-row:nth-child(4){animation-delay:.2s}.doc-icon{font-size:20px;border:1px solid var(--line);border-radius:6px;padding:4px 8px}.document-row b{display:block;font-size:10px;font-weight:500}.document-row small{display:block;font-size:8px;color:var(--muted);margin-top:5px}.document-row>.status{margin-left:auto}.ai-message{background:#edf1e7;border:1px solid #dce4d2;padding:16px;border-radius:9px;display:flex;align-items:flex-start;gap:12px;margin-top:12px;animation:entry-in 1s .4s both}.ai-message img{width:22px;height:22px}.ai-message b{font-size:10px;font-weight:600}.ai-message p{font-size:9px;line-height:1.6;margin:6px 0 0;color:var(--muted)}.workspace-link{display:flex;justify-content:space-between;margin-top:23px;font-size:10px;font-weight:600}.floating-note{position:absolute;bottom:-21px;right:25px;background:#244b46;color:white;border-radius:9px;padding:15px 21px;font-size:10px;box-shadow:0 10px 20px #153b401c}.floating-note span{color:var(--lime);margin-right:10px}.connection-strip{display:flex;align-items:center;gap:38px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding-top:24px;padding-bottom:24px}.connection-strip>span:first-child{font-size:9px;letter-spacing:.13em;margin-right:auto;color:var(--muted)}.connection-strip>span{display:flex;align-items:center;gap:10px;font-size:16px}.connection-strip img{width:24px;height:24px}.connection-strip small{font-size:9px;color:var(--muted)}.section{padding-top:96px;padding-bottom:96px}.section-heading{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;margin-bottom:40px}h2{font-size:clamp(34px,3.8vw,49px);line-height:1.08;letter-spacing:-.035em;margin:18px 0 0}.section-heading>p{max-width:345px;font-size:14px;line-height:1.8;color:var(--muted);margin:0 0 4px}.tour-shell{border:1px solid #d2ded6;border-radius:14px;overflow:hidden;background:white}.tour-tabs{display:flex;padding:10px;gap:7px;background:#eef2eb;border-bottom:1px solid #d9e3d8}.tour-tabs button{flex:1;border:0;background:transparent;border-radius:6px;padding:16px;cursor:pointer;text-align:left;font-size:10px;color:#638078;display:flex;gap:17px;align-items:center}.tour-tabs button span{font-size:12px;font-weight:500;color:var(--ink)}.tour-tabs button[aria-selected=true]{background:white;box-shadow:0 2px 7px #163b4010}.motion-frame{position:relative;aspect-ratio:16/9;background:#18393f;overflow:hidden}.motion-frame iframe{position:absolute;width:100%;height:100%;inset:0;border:0}.tour-caption{padding:18px 24px;display:flex;justify-content:space-between;gap:16px;font-size:10px;background:#fff;line-height:1.6}.tour-caption>span{color:var(--muted)}.tour-caption a{font-weight:600}.feature-row{display:grid;grid-template-columns:repeat(3,1fr);gap:42px;margin-top:38px}.feature-row>div>span{font-size:10px;color:#79918a}.feature-row h3{font-size:19px;margin:14px 0 8px;letter-spacing:-.02em}.feature-row p{font-size:12px;line-height:1.8;color:var(--muted);margin:0}.firm-section{background:#193e40;color:#fff;padding:84px 0}.firm-grid{display:grid;grid-template-columns:1fr 1fr;gap:92px;align-items:center}.firm-section .eyebrow{color:#dfe9e6}.firm-section h2{margin:22px 0}.firm-section h2 em{color:#bdcec6}.firm-section p{font-size:14px;line-height:1.8;color:#e3ece9}.firm-section small{display:block;margin-top:22px;color:#b7c9c2;font-size:10px}.portal-stack{border-top:1px solid #476362}.portal-stack>a{display:flex;align-items:center;gap:22px;padding:24px 0;border-bottom:1px solid #476362;transition:padding .2s}.portal-stack>a:hover{padding-left:10px}.portal-number{font-size:12px;color:#e3ece9}.portal-stack h3{font-size:21px;margin:0}.portal-stack p{font-size:13px;margin:5px 0 0}.portal-stack>a>span:last-child{margin-left:auto;color:var(--lime)}.assistance{display:grid;grid-template-columns:1fr 1fr;gap:90px;align-items:center}.assistance p{font-size:14px;color:var(--muted);line-height:1.8;max-width:420px}.support-options details{border-bottom:1px solid var(--line);padding:24px 0}.support-options details:first-child{border-top:1px solid var(--line)}summary{list-style:none;cursor:pointer;font-size:14px;font-weight:500;display:flex;gap:15px;justify-content:space-between;line-height:1.6}summary::-webkit-details-marker{display:none}summary span{font-size:20px;font-weight:400;transition:transform .2s}details[open] summary span{transform:rotate(45deg)}.support-options p{font-size:12px;line-height:1.8;max-width:95%}.support-options a{font-size:11px;font-weight:600}.firm-section .support-options details{border-color:#476362}.closing{background:#eaf0e6;border-radius:16px;display:grid;grid-template-columns:1fr 1fr;gap:80px;padding-top:58px;padding-bottom:58px;margin-bottom:80px}.closing h2{font-size:42px}.closing>div:last-child{padding-left:30px;border-left:1px solid #cddacc}.closing p{font-size:14px;line-height:1.8;color:var(--muted)}.price{font-size:50px;font-family:'Google Sans Flex',Arial,sans-serif;letter-spacing:-2px}.price span{font:13px 'Google Sans Flex',Arial,sans-serif;letter-spacing:0;margin-left:7px}.closing small,.closing>div>a:not(.button){display:block;font-size:13px;margin-top:14px}.clean-footer{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding-top:10px;padding-bottom:28px}.clean-footer p{font-size:12px;line-height:1.8;color:var(--muted);margin-top:20px}.clean-footer b{font-size:11px;display:block;margin:7px 0 20px}.clean-footer>div>a:not(.wordmark){display:block;font-size:11px;color:var(--muted);margin-top:14px}.footer-bottom{border-top:1px solid var(--line);padding-top:25px;grid-column:1/-1;display:flex;align-items:center;gap:24px;font-size:12px;color:var(--muted)}.footer-bottom span{margin-right:auto}.clean-footer .footer-bottom>a{margin:0!important;font-size:12px!important}.firm-hero{text-align:center;padding-top:76px;padding-bottom:58px}.firm-hero .eyebrow,.firm-hero .actions{justify-content:center}.firm-hero h1{font-size:clamp(48px,6.5vw,84px)}.firm-hero>p{margin:20px auto}.firm-hero>small{display:block;font-size:10px;color:var(--muted);margin-top:22px}.firm-movie .motion-frame{border-radius:14px 14px 0 0}.firm-movie .tour-caption{border:1px solid var(--line);border-radius:0 0 14px 14px}.product-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.product-grid article{background:#eef2ea;padding:35px;border-radius:12px;display:flex;flex-direction:column;scroll-margin-top:110px}.product-card-top{display:flex;justify-content:space-between;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#617b71}.product-grid h3{font-size:30px;line-height:1.15;letter-spacing:-.025em;max-width:330px;margin:35px 0 16px}.product-grid p{font-size:13px;line-height:1.8;color:var(--muted);margin:0 0 25px}.product-grid a{margin-top:auto}.svc-dd{position:relative}.svc-menu{display:none;position:absolute;top:100%;left:-15px;min-width:255px;padding:13px;background:white;border:1px solid var(--line);border-radius:10px;box-shadow:0 14px 40px #173b4017}.svc-menu a{display:block;padding:10px;font-size:12px;border-radius:5px}.svc-menu a:hover{background:#edf2e9}.svc-open-business [data-svc-key=business]>.svc-menu,.svc-open-firms [data-svc-key=firms]>.svc-menu,.svc-open-services [data-svc-key=services]>.svc-menu{display:block}@keyframes chart-draw{to{stroke-dashoffset:0}}@keyframes entry-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(min-width:1500px){.clean-nav{padding-left:calc((100vw - 1144px)/2);padding-right:calc((100vw - 1144px)/2)}}
@media(max-width:1100px){.nav-links{gap:18px}.nav-links>a{display:none}.clean-nav{gap:24px}.hero{gap:35px}.hero h1{font-size:60px}.firm-grid{gap:50px}.connection-strip{gap:22px}.nav-actions{gap:15px}}
@media(max-width:850px){.wrap{padding-left:26px;padding-right:26px}.clean-nav{height:74px;padding:0 26px}.nav-links,.nav-actions{display:none}.mobile-toggle{display:flex;margin-left:auto;gap:20px;align-items:center;background:transparent;border:0;font-size:12px;padding:12px 0;color:var(--ink)}#clean-mobile{position:absolute;top:74px;left:0;right:0;background:var(--paper);padding:18px 26px 26px;border-bottom:1px solid var(--line);box-shadow:0 20px 30px #173b4015}#clean-mobile a{display:block;padding:13px 0;font-size:15px}.hero{grid-template-columns:1fr;gap:48px;padding-top:48px;padding-bottom:65px}.hero-copy>p{max-width:500px}.hero h1{font-size:62px}.hero-product{max-width:560px;width:100%;justify-self:center;transform:none}.connection-strip{flex-wrap:wrap;gap:20px}.connection-strip>span:first-child{width:100%}.connection-strip small{margin-left:auto}.section{padding-top:64px;padding-bottom:64px}.section-heading{gap:25px}.section-heading>p{max-width:280px}.firm-grid,.assistance{grid-template-columns:1fr;gap:40px}.firm-section{padding:64px 0}.firm-grid>div:first-child{max-width:560px}.closing{margin-left:26px;margin-right:26px;gap:32px;padding-top:40px;padding-bottom:40px}.closing h2{font-size:33px}.feature-row{gap:24px}.tour-tabs button{padding:13px 10px;gap:8px}.clean-footer{gap:25px}.product-grid article{padding:26px}}
@media(max-width:540px){.hero h1{font-size:53px}.hero .eyebrow{font-size:8px}.hero-copy>p{font-size:14px}.hero .actions{gap:19px}.button{padding:15px 18px;font-size:12px}.text-link{font-size:12px}.workspace{padding:19px}.window-bar{padding:16px 19px}.floating-note{font-size:9px;right:15px;padding:13px}.workspace-heading h2{font-size:23px}.connection-strip>span{font-size:15px}.connection-strip small{width:100%;margin:0}.section-heading{display:block}.section-heading>p{margin-top:20px;max-width:none;font-size:13px}.tour-tabs{padding:7px;gap:3px}.tour-tabs button{flex-direction:column;align-items:flex-start;gap:7px;padding:11px 8px}.tour-tabs button span{font-size:10px;line-height:1.4}.motion-frame{aspect-ratio:4/3}.tour-caption{flex-direction:column;padding:15px 18px;font-size:9px;gap:8px}.feature-row{grid-template-columns:1fr;gap:25px}.feature-row>div{border-bottom:1px solid var(--line);padding-bottom:23px}.feature-row h3{margin-top:10px}.closing{grid-template-columns:1fr;gap:28px;margin-bottom:55px}.closing>div:last-child{padding:25px 0 0;border-left:0;border-top:1px solid #cddacc}.clean-footer{grid-template-columns:1fr 1fr}.clean-footer>div:first-child{grid-column:1/-1}.footer-bottom{flex-wrap:wrap;gap:16px}.clean-footer{padding-bottom:96px}.footer-bottom span{width:100%}.product-grid{grid-template-columns:1fr}.firm-hero{padding-top:50px}.firm-hero h1{font-size:48px}.firm-hero p{font-size:13px}.firm-hero .actions{gap:18px}.firm-movie{padding-left:15px;padding-right:15px}}
.pricing-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.price-card{background:white;border:1px solid var(--line);border-radius:12px;padding:30px 26px;display:flex;flex-direction:column}.price-card.featured{background:#edf2e7;border-color:#b9c9ae}.price-card h2{font-size:27px;min-height:66px;margin:21px 0 24px}.price-card .eyebrow{font-size:8px}.quote-price{font:29px 'Google Sans Flex',Arial,sans-serif;letter-spacing:-.03em;min-height:63px;display:flex;align-items:center}.price-card p{font-size:10px;color:var(--muted);margin:10px 0}.price-card ul{list-style:none;padding:22px 0;margin:12px 0 20px;border-top:1px solid var(--line);font-size:11px;line-height:1.7;display:grid;gap:16px}.price-card li{padding-left:20px;position:relative}.price-card li::before{content:'✓';position:absolute;left:0;color:#618174}.price-card .button{margin-top:auto}.outline{border-color:#bfcfc3}.outline:hover{background:#eef2e8}.price-card small{font-size:9px;line-height:1.7;color:var(--muted);margin-top:17px}.service-note{padding-top:44px;text-align:center}.service-note h3{font-size:23px;margin:0}.service-note p{font-size:12px;color:var(--muted);line-height:1.7}.clean-site section[id]{scroll-margin-top:100px}.clean-site .nav-links>a:last-child{display:none}
@media(max-width:850px){.pricing-grid{grid-template-columns:1fr;max-width:600px}.price-card h2{min-height:0}.price-card{padding:30px}.price-card ul{margin-top:10px}.price-card .eyebrow{font-size:9px}.price-card li{font-size:13px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}.metrics path{stroke-dashoffset:0}}
.motion-actions{display:flex;justify-content:flex-end;gap:8px;padding:12px 18px;background:#edf2eb;border-top:1px solid #d5e0d4}.motion-actions button{border:1px solid #bdcdbf;border-radius:6px;background:white;color:#244a42;min-height:40px;min-width:65px;font-size:11px;cursor:pointer}.motion-actions button:hover{background:#e9f16d}
.wordmark{display:inline-flex;flex-shrink:0}.wordmark .brand-mark{display:block;width:116px;height:30px;margin:0;background:#173b40;mask:url(/assets/vacei-word-mask.png?v=31c81e3068) center/contain no-repeat;-webkit-mask:url(/assets/vacei-word-mask.png?v=31c81e3068) center/contain no-repeat}
.motion-frame::before{content:"Loading animated walkthrough…";position:absolute;inset:0;display:grid;place-items:center;background:#193e40;color:#c6d7cf;font:12px Inter,sans-serif;z-index:2;pointer-events:none}.motion-frame.motion-ready::before{display:none}

/* /brand-refinement.css */
/* Original Vacei cover palette and rounded surfaces, with the clearer page structure. */
.clean-site{--paper:#fafbf9;--lime:#e9f16d;--cover-1:#33646e;--cover-2:#4e7b84;--cover-3:#6b939b;--cover-4:#8faeb3}
.clean-site .button{border-radius:999px}
.clean-site .hero.wrap{max-width:none;padding-left:max(48px,calc((100vw - 1144px)/2));padding-right:max(48px,calc((100vw - 1144px)/2));background:radial-gradient(ellipse at 80% 0%,#ffffff22,transparent 60%),linear-gradient(112deg,var(--cover-1),var(--cover-2) 48%,var(--cover-4));border-radius:0 0 34px 34px;position:relative;overflow:hidden;padding-top:78px;padding-bottom:84px}
.hero-copy{position:relative;z-index:1}.hero-copy h1{color:#fff;font-weight:400}.hero-copy h1 em{color:#e7eee2}.hero-copy>.eyebrow{color:#e0e9e8}.hero-copy>.eyebrow i{background:var(--lime)}.hero-copy>p{color:#f0f5f2}.hero-copy .micro{color:#e2ece8}.hero-copy .text-link{color:#fff}.hero-copy .firm-shortcut{border-color:#ffffff38;color:#fff}.hero-product{transform:none;border-radius:22px;border:1px solid #ffffff66;box-shadow:0 28px 80px #153b4030}.hero-product .window-bar{background:#f4f6f2;border-radius:22px 22px 0 0}.hero-product .floating-note{background:#143c3f;border:1px solid #ffffff38;border-radius:999px;right:22px;bottom:-20px}.clean-site .connection-strip{border-top:0;margin-top:12px}.clean-site .firm-section{background:radial-gradient(ellipse at 0 0,#6b939b44,transparent 65%),linear-gradient(120deg,#254f59,#173a43 60%,#122d33)}.clean-site .portal-stack>a{border-color:#ffffff25}.clean-site .portal-stack>a:hover{background:#ffffff05}.clean-site .closing{background:radial-gradient(ellipse at 100% 0%,#d4e2df 0%,transparent 70%),#eef3ed;border-radius:24px}.clean-site .product-grid article{border-radius:20px;background:#edf2ef;border:1px solid #dfe8e0}.clean-site .price-card{border-radius:20px}.clean-site .tour-shell{border-radius:22px}.clean-site .price-card.featured{border-color:#789c8f;background:linear-gradient(145deg,#eaf2e6,#f3f6ed)}
body[data-page="for-firms"] .firm-hero,body[data-page="books"] .firm-hero,body[data-page="bookkeeping"] .firm-hero,body[data-page="audit"] .firm-hero{max-width:none;background:radial-gradient(ellipse at 85% 0%,#ffffff18,transparent 60%),linear-gradient(112deg,#33646e,#4e7b84 62%,#6b939b);padding-top:66px;padding-bottom:115px;border-radius:0 0 34px 34px;color:white}
body[data-page="for-firms"] .firm-hero h1,body[data-page="books"] .firm-hero h1,body[data-page="bookkeeping"] .firm-hero h1,body[data-page="audit"] .firm-hero h1{font-size:clamp(46px,5.6vw,72px)}
body[data-page]:not([data-page="pricing"]) .firm-hero h1 em{color:#e0eade}
body[data-page]:not([data-page="pricing"]) .firm-hero>p,body[data-page]:not([data-page="pricing"]) .firm-hero>small{color:#edf3ee}
body[data-page]:not([data-page="pricing"]) .firm-hero .eyebrow{color:#dde9e3}
body[data-page]:not([data-page="pricing"]) .firm-hero .eyebrow i{background:var(--lime)}
.firm-hero+.firm-movie{margin-top:-55px;position:relative;z-index:1}.firm-movie .motion-frame{border:1px solid #ffffff40;border-bottom:0;border-radius:22px 22px 0 0;box-shadow:0 20px 65px #183b4015}.firm-movie .tour-caption{border-radius:0 0 22px 22px}
.clean-site .tour-tabs{background:#e8efeb}.clean-site .motion-actions{background:#edf2ee}.clean-site .firm-shortcut:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:1100px){.clean-site .clean-nav{gap:20px}.clean-site .nav-links{gap:17px;font-size:12px}.clean-site .nav-actions{gap:15px}.clean-site .hero.wrap{gap:35px}.clean-site .hero h1{font-size:58px}}
@media(max-width:1024px){.clean-site .nav-links,.clean-site .nav-actions{display:none}.clean-site .mobile-toggle{display:flex;margin-left:auto;gap:20px;align-items:center;background:transparent;border:0;font-size:12px;padding:12px 0;color:var(--ink)}.clean-site .clean-nav{height:74px;padding:0 26px}.clean-site #clean-mobile{position:absolute;top:74px;left:0;right:0;background:var(--paper);padding:18px 26px 26px;border-bottom:1px solid var(--line);box-shadow:0 20px 30px #173b4015}.clean-site #clean-mobile a{display:block;padding:13px 0;font-size:15px}.clean-site #clean-mobile a.button{display:flex;justify-content:center;margin-top:14px;padding:15px 22px}}
@media(max-width:850px){.clean-site .hero.wrap{padding:48px 26px 65px;gap:46px;border-radius:0 0 26px 26px}.clean-site .hero h1{font-size:62px}.hero-product{width:100%}.hero-copy .firm-shortcut{max-width:500px}.clean-site .connection-strip{margin-top:0}.firm-hero+.firm-movie{margin-top:-42px}body[data-page="for-firms"] .firm-hero,body[data-page="books"] .firm-hero,body[data-page="bookkeeping"] .firm-hero,body[data-page="audit"] .firm-hero{padding-top:50px;padding-bottom:88px;border-radius:0 0 26px 26px}}
@media(max-width:540px){.clean-site .hero h1{font-size:52px}.hero-product .floating-note{right:10px;font-size:8px;padding:13px 15px}.clean-site .hero-copy .micro{font-size:9px}body[data-page="for-firms"] .firm-hero h1,body[data-page="books"] .firm-hero h1,body[data-page="bookkeeping"] .firm-hero h1,body[data-page="audit"] .firm-hero h1{font-size:46px}.clean-site .connection-strip{padding-top:26px;padding-bottom:26px}}
@media(max-width:850px){.clean-site .hero.wrap{background:radial-gradient(ellipse at 100% 0%,#ffffff0a,transparent 60%),linear-gradient(140deg,#2d5963,#416e78)}body[data-page="for-firms"] .firm-hero,body[data-page="books"] .firm-hero,body[data-page="bookkeeping"] .firm-hero,body[data-page="audit"] .firm-hero{background:linear-gradient(135deg,#2d5963,#416e78)}}

/* /signature-motion.css */
/* Teal sampled from the supplied logo reference; no pale blue overlay. */
.clean-site{--vacei-teal-start:#346a76;--vacei-teal-mid:#376c79;--vacei-teal-end:#3b717e;--vacei-cover:linear-gradient(112deg,var(--vacei-teal-start),var(--vacei-teal-mid) 50%,var(--vacei-teal-end));--logo-color:#173b40}
.clean-site .clean-nav{background:var(--vacei-cover);border-bottom:1px solid #ffffff18;color:#fff;--logo-color:#fff;backdrop-filter:none}
.clean-site .nav-links a{color:#fff!important}.clean-site .nav-links .svc-menu a{color:#173b40!important}.clean-site .mobile-toggle{color:#fff}.clean-site #clean-mobile{background:var(--vacei-cover);border-color:#ffffff30;color:#fff}
.clean-site .wordmark{display:inline-flex;align-items:center;gap:13px;min-width:132px;height:42px;letter-spacing:0}
.clean-site .wordmark .brand-symbol{display:block;flex:none;width:41px;height:41px;margin:0;background:var(--logo-color);mask:url('/assets/vacei-v-mask.png?v=6091836562') center/contain no-repeat;-webkit-mask:url('/assets/vacei-v-mask.png?v=6091836562') center/contain no-repeat}
.clean-site .wordmark .brand-divider{display:block;flex:none;width:1px;height:33px;margin:0;background:var(--logo-color);opacity:.4}
.clean-site .wordmark .brand-mark{display:block;flex:none;width:66px;height:18px;margin:0;background:var(--logo-color);mask:url('/assets/vacei-word-mask.png?v=31c81e3068') center/contain no-repeat;-webkit-mask:url('/assets/vacei-word-mask.png?v=31c81e3068') center/contain no-repeat}
.clean-site .hero.wrap{background:var(--vacei-cover);border-radius:0;transform-origin:50% 40%;will-change:transform,border-radius;min-height:calc(100svh - 88px);padding-top:48px;padding-bottom:64px}
.hero-scroll-stage{position:relative;height:128svh;background:#edf2ed}.clean-site .hero-scroll-stage>.hero{position:sticky;top:88px}.hero-scroll-stage .hero-copy,.hero-scroll-stage .hero-product{will-change:transform,opacity}
.clean-site .hero h1 em{color:#e5eeea}.clean-site .hero-product{box-shadow:0 20px 60px #13373e22}.clean-site .hero-product .floating-note{box-shadow:none}
body[data-page="for-firms"] .firm-hero,body[data-page="books"] .firm-hero,body[data-page="bookkeeping"] .firm-hero,body[data-page="audit"] .firm-hero{background:var(--vacei-cover)}
.clean-site .firm-section{background:var(--vacei-cover)}
.intro-scroll-stage{height:168svh;position:relative;background:#fafbf9;margin:0;z-index:2}
.intro-sticky{height:100svh;position:sticky;top:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;overflow:hidden;padding:16px 0}
.intro-heading{text-align:center;flex:none}.intro-heading .eyebrow{justify-content:center;font-size:9px}.intro-heading h2{font-size:32px;margin-top:10px;letter-spacing:-.035em}
.intro-media{width:min(calc(100vw - 48px),1600px,calc((100svh - 170px)*1.77778));flex:none;transform:scale(.86);transform-origin:50% 50%;will-change:transform;perspective:1200px}
.intro-tilt{overflow:hidden;border-radius:24px;background:#15373f;box-shadow:0 22px 65px #183b401f;transform:rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));transition:transform .18s ease-out;will-change:transform;border:1px solid #d5e1dd}
.intro-media video{display:block;width:100%;aspect-ratio:16/9;background:#15373f;object-fit:contain}
.intro-film-controls{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:12px 18px;background:#fff;color:#173b40}
.intro-film-controls>span{font-size:11px}.intro-film-controls>div{display:flex;gap:8px}.intro-film-controls button{border:1px solid #d4dfd7;border-radius:999px;background:#f6f8f4;color:#173b40;min-height:40px;padding:0 17px;font-size:11px;cursor:pointer}.intro-film-controls button:hover{background:#e9f16d}.intro-film-controls button:last-child{background:#e9f16d;border-color:#e9f16d}
.intro-skip{font-size:11px;font-weight:500;padding:10px;flex:none}.intro-skip:hover{text-decoration:underline;text-underline-offset:4px}
@media(max-width:1100px){.clean-site .hero h1{font-size:54px}.clean-site .clean-nav{gap:22px}.clean-site .nav-links{gap:15px}}
@media(max-width:1024px){.clean-site .hero-scroll-stage>.hero{top:74px}.clean-site .hero.wrap{min-height:calc(100svh - 74px)}.intro-sticky{top:0;height:100svh}}
@media(max-width:850px){.hero-scroll-stage{height:auto;padding-bottom:40px}.clean-site .hero-scroll-stage>.hero{position:relative;top:0}.clean-site .hero.wrap{padding-top:42px;padding-bottom:58px;min-height:0;border-radius:0;transform-origin:50% 15%}.clean-site .hero h1{font-size:58px}.intro-scroll-stage{height:135svh}.intro-sticky{gap:20px}.intro-media{width:calc(100vw - 28px)}.intro-heading h2{font-size:29px}.intro-film-controls{padding:12px;flex-wrap:wrap;justify-content:center}.intro-film-controls>span{display:none}.intro-film-controls button{font-size:11px;padding:0 15px;min-height:42px}.intro-tilt{box-shadow:0 16px 35px #183b401a}}
@media(max-width:540px){.clean-site .wordmark{min-width:126px;gap:12px}.clean-site .wordmark .brand-symbol{width:37px;height:37px}.clean-site .wordmark .brand-mark{width:62px;height:17px}.clean-site .hero h1{font-size:51px}.intro-scroll-stage{height:auto;padding:40px 0}.intro-sticky{position:relative;height:auto}.intro-heading h2{font-size:27px}.intro-media{width:calc(100vw - 20px)}.intro-heading .eyebrow{font-size:8px}}
@media(prefers-reduced-motion:reduce){.hero-scroll-stage{height:auto;padding-bottom:0}.clean-site .hero-scroll-stage>.hero{position:relative;top:0}.clean-site .hero.wrap{transform:none!important;box-shadow:none!important;border-radius:0!important}.hero-scroll-stage .hero-copy,.hero-scroll-stage .hero-product{transform:none!important;opacity:1!important}.intro-scroll-stage{height:auto;padding:45px 0}.intro-sticky{height:auto;position:relative;top:0;overflow:visible}.intro-media,.intro-tilt{transform:none!important}.intro-media{will-change:auto}.intro-skip{margin-top:12px}}

/* /fonts/google-sans-flex.css */
/* Google Sans Flex (opsz 8-144, wght 400-600), self-hosted so first paint never waits on two Google
   origins and an @import chain. The same woff2 subsets and descriptors that
   fonts.googleapis.com/css2?family=Google+Sans+Flex:opsz,wght@8..144,400..600&display=swap served on
   2026-10-04 (v23). SIL Open Font License 1.1: fonts/google-sans-flex/OFL.txt.
   Each unicode-range is the range Google served cut down to the characters its file can draw (perf,
   2026-10-05). Google declares one generic range per subset, wider than the file: the arrows and marks
   the pages use (↗ → ☰ ✓) sit in the symbols and math ranges, but neither file has them, so every
   page downloaded both (106 KB) and laid its text out again as each arrived, only for those characters
   to fall back to the next font, as they always did and still do. A browser downloads a subset only
   for a character it can draw now; what each character renders in is unchanged. The pages whose hero
   fade waits for the face (index, outsourced-audit, outsourced-bookkeeping) preload latin.woff2. */
/* canadian-aboriginal */
@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/google-sans-flex/canadian-aboriginal.woff2?v=e08ee6f354) format('woff2');
  unicode-range: U+02C7, U+02D8-02D9, U+02DB, U+0307, U+25CC;
}
/* cherokee */
@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/google-sans-flex/cherokee.woff2?v=6b3490a7ae) format('woff2');
  unicode-range: U+0300-0302, U+0304, U+030B-030C, U+0323;
}
/* math */
@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/google-sans-flex/math.woff2?v=8edb70172d) format('woff2');
  unicode-range: U+0302-0303, U+0307-0308, U+0312, U+0326-0327, U+03BC, U+2070, U+2074-2079, U+207B, U+2080-2089, U+221A, U+2248, U+2260, U+2264-2265, U+25CC, U+1D6E1;
}
/* nushu */
@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/google-sans-flex/nushu.woff2?v=ff5eb9902b) format('woff2');
  unicode-range: U+2003;
}
/* symbols */
@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/google-sans-flex/symbols.woff2?v=5f8652229f) format('woff2');
  unicode-range: U+25CC, U+2780-2788, U+278A-2792;
}
/* syriac */
@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/google-sans-flex/syriac.woff2?v=6798ed6146) format('woff2');
  unicode-range: U+0303-0304, U+0307-0308, U+030A, U+0323, U+25CC;
}
/* tifinagh */
@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/google-sans-flex/tifinagh.woff2?v=a8f291a3f2) format('woff2');
  unicode-range: U+02C7, U+0301-0302, U+0304, U+0306-0307, U+0309, U+0323, U+25CC;
}
/* vietnamese */
@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/google-sans-flex/vietnamese.woff2?v=29d89e7c75) format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+1EA0-1EF9;
}
/* latin-ext */
@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/google-sans-flex/latin-ext.woff2?v=a6d71eae2e) format('woff2');
  unicode-range: U+0100-0107, U+010A-0113, U+0116-011B, U+011E-0123, U+0126-012B, U+012E-0130, U+0132-0133, U+0136-0137, U+0139-0148, U+014C-014D, U+0150-0151, U+0154-015B, U+015E-0165, U+0168-017E, U+0181, U+018A, U+018F, U+0198-0199, U+01A0-01A1, U+01AF-01B0, U+01B3-01B4, U+01CD-01CE, U+0218-021B, U+0237, U+0253, U+0257, U+0259, U+02C7, U+02DD, U+02E3, U+0304, U+0308, U+1E44-1E45, U+1E62-1E63, U+1E80-1E85, U+1E9E, U+1EF2-1EF9, U+20A9, U+20B9;
}
/* latin */
@font-face {
  font-family: 'Google Sans Flex';
  font-style: normal;
  font-weight: 400 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(/fonts/google-sans-flex/latin.woff2?v=6ea3d11623) format('woff2');
  unicode-range: U+000D, U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+2002, U+2009, U+200B, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+2044, U+20AC, U+2122, U+2212;
}

/* /minimal-design.css */
/* One typographic system across product pages, campaigns and service forms. */
.legacy-minimal .hero2{display:block!important;max-width:900px!important;text-align:center;margin:auto}.legacy-minimal .hero2>div:nth-child(2){display:none!important}.legacy-minimal .hero2 h1,.legacy-minimal .hero2 p{margin-left:auto!important;margin-right:auto!important}.legacy-minimal .hero2 h1{max-width:20ch}.legacy-minimal .hero2>div>div:has(>a){justify-content:center}.legacy-minimal .hero2>div>p:last-child:has(a[href="/health-check"]){display:none}.legacy-minimal .site-bar .nav-links{margin-left:auto!important;margin-right:20px!important}.legacy-minimal .site-bar .nav-cta{background:#e9f16d!important;min-height:48px!important;font-weight:500!important}.legacy-minimal .quiet-video{margin:32px auto 0;max-width:1000px;border-radius:24px!important;overflow:hidden;position:relative;box-shadow:none!important;cursor:default!important}.legacy-minimal .quiet-video video{display:block;width:100%;border-radius:24px}.legacy-minimal footer{background:#173b40!important}
:root{--font-marketing:'Google Sans Flex',Arial,sans-serif;--font-body:'Google Sans Flex',Arial,sans-serif}
body.clean-site,body.legacy-minimal{font-family:'Google Sans Flex',Arial,sans-serif;--paper:#fafbf9;--ink:#173b40;--body:#465d60;--muted:#607174;--brand:#346a76;--cover-1:#346a76;--cover-2:#376c79;--cover-3:#386d7a;--cover-4:#3b717e}
.clean-site h1,.clean-site h2,.clean-site h3,.legacy-minimal h1,.legacy-minimal h2,.legacy-minimal h3{font-family:'Google Sans Flex',Arial,sans-serif!important;font-weight:400!important;text-wrap:balance;letter-spacing:-.045em!important}
.clean-site .eyebrow{font-size:12px;text-transform:none;letter-spacing:.02em;font-weight:400}
.clean-site .hero.wrap{display:flex;justify-content:center;text-align:center;min-height:calc(92svh - 88px);padding-top:90px;padding-bottom:95px}
.clean-site .hero-copy{width:100%;max-width:1000px}.clean-site .hero h1{font-size:clamp(48px,6.6vw,94px);line-height:1.05;letter-spacing:-.055em;margin:28px 0}
.clean-site .hero-copy>.eyebrow,.clean-site .hero-copy .actions{justify-content:center}.clean-site .hero-copy>p{max-width:550px;margin-left:auto;margin-right:auto;font-size:17px;line-height:1.6}.clean-site .hero-copy .micro{font-size:12px}.clean-site .hero-copy .firm-shortcut{margin:35px auto 0;border:0;padding:0;max-width:none;font-size:13px;color:#e1ece9}
.type-line{display:inline-grid;position:relative;max-width:100%}.type-reserve{visibility:hidden;grid-area:1/1}.type-visible{grid-area:1/1}.type-visible.typing:after{content:'';display:inline-block;height:.82em;width:2px;background:currentColor;margin-left:5px;animation:caret .7s step-end infinite}@keyframes caret{50%{opacity:0}}
.clean-site .firm-hero{padding:85px 28px 110px!important;max-width:none!important;background:linear-gradient(112deg,#346a76,#376c79 50%,#3b717e)!important;color:white!important;border-radius:0 0 32px 32px}
.clean-site .firm-hero h1{font-size:clamp(44px,5.8vw,80px)!important;max-width:950px;margin-left:auto;margin-right:auto}.clean-site .firm-hero h1 em,.clean-site .firm-hero>p,.clean-site .firm-hero>small,.clean-site .firm-hero .eyebrow{color:#e5eeea!important}.clean-site .firm-hero>p{max-width:620px;font-size:17px;line-height:1.65}.clean-site .firm-hero .text-link{color:white}
.clean-site .product-grid article{background:transparent;border:0;border-top:1px solid #dce3de;border-radius:0;padding-left:0;padding-right:20px}.clean-site .section{padding-top:100px;padding-bottom:75px}.clean-site .closing{background:#eef3ef;box-shadow:none}.clean-site .tour-shell{border:0;background:transparent}.clean-site .tour-tabs{background:transparent;border:0;padding:0 0 16px}.clean-site .tour-tabs button{border-radius:999px;text-align:center;justify-content:center}.clean-site .motion-frame{aspect-ratio:16/9;border:0!important;border-radius:24px!important;overflow:hidden;box-shadow:none!important}.clean-site .tour-caption{background:transparent!important;border:0!important;padding:20px 4px}.clean-site .tour-caption>span{font-size:11px;color:#657675}.clean-site .motion-actions{display:none}.clean-site .firm-movie{max-width:1100px}
.landing-film{position:relative;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:#14353d}.landing-film iframe{display:block;width:100%;height:100%;border:0}.clean-site .firm-movie .landing-film{border:1px solid #ffffff30}
.intro-tilt{position:relative;box-shadow:none!important;border:0!important}.intro-play{position:absolute;inset:0;width:100%;height:100%;border:0;background:transparent;color:#173b40;cursor:none}.play-cursor{position:absolute;left:var(--cursor-x,50%);top:var(--cursor-y,50%);transform:translate(-50%,-50%);padding:18px 25px;display:flex;align-items:center;gap:13px;white-space:nowrap;border-radius:999px;background:#ffffffed;backdrop-filter:blur(12px);font-size:14px;pointer-events:none;box-shadow:0 4px 22px #0001}.play-cursor>span{font-size:11px}.intro-play:focus-visible{outline:3px solid #e9f16d;outline-offset:-7px}.intro-play:focus-visible .play-cursor{left:50%;top:50%}.intro-dialog{padding:0;width:min(1200px,94vw);max-width:94vw;background:#101819;border:0;border-radius:24px;overflow:visible;color:white}.intro-dialog::backdrop{background:#071316dd;backdrop-filter:blur(15px)}.intro-dialog video{display:block;width:100%;max-height:80svh;border-radius:24px}.intro-close{position:absolute;right:0;top:-48px;border:0;color:white;background:transparent;padding:10px 0;cursor:pointer;font-size:14px}html:has(.intro-dialog[open]){overflow:hidden}
/* Older pages retain their forms and tools, with the same quieter visual treatment. */
body.legacy-minimal{margin:0;background:#fafbf9!important;color:#173b40}.legacy-minimal :is(h1,h2,h3,p,a,button,input,select,textarea){font-family:'Google Sans Flex',Arial,sans-serif!important}.legacy-minimal .site-bar{min-height:88px;background:linear-gradient(112deg,#346a76,#3b717e)!important;box-shadow:none!important;border-bottom:1px solid #ffffff18}.legacy-minimal [data-screen-label="Hero"]{background:linear-gradient(112deg,#346a76,#376c79 50%,#3b717e)!important;padding-top:85px!important;padding-bottom:95px!important;border-radius:0 0 32px 32px}.legacy-minimal [data-screen-label="Hero"] h1{font-size:clamp(44px,5.8vw,80px)!important;line-height:1.07!important}.legacy-minimal [data-screen-label="Hero"] h1+p{font-size:17px!important;line-height:1.65!important}.legacy-minimal [data-screen-label="Hero"]>div:first-child:not(:has(h1)){background:transparent!important;backdrop-filter:none!important;border:0!important}.legacy-minimal [data-reveal]{scroll-margin-top:105px!important}.legacy-minimal section[data-reveal]{padding-top:90px!important}.legacy-minimal [data-reveal] h2{font-size:clamp(32px,3.8vw,49px)!important}.legacy-minimal div:has(>iframe),.legacy-minimal div:has(>div>iframe){box-shadow:none!important;border-radius:24px!important}.legacy-minimal iframe{border-radius:24px}.legacy-minimal section a[style*="height:"]{border-radius:999px!important}.legacy-minimal [data-screen-label="Footer"]{background:#173b40!important}.legacy-minimal [style*="font-family: var(--font-body); background: #0F2226"]{background:#fafbf9!important}.legacy-minimal .site-bar>a:first-child span:first-child{width:41px!important;height:41px!important}.legacy-minimal .site-bar>a:first-child span:last-child{width:66px!important;height:18px!important}.legacy-minimal .site-bar>a:first-child{gap:13px!important}
@media(max-width:850px){.clean-site .hero.wrap{min-height:650px;padding:70px 22px 80px}.clean-site .hero h1{font-size:clamp(43px,7.7vw,68px)}.clean-site .hero-copy>p{font-size:16px}.clean-site .hero-copy .micro{font-size:11px}.clean-site .firm-hero{padding:62px 24px 95px!important}.clean-site .section{padding-top:65px;padding-bottom:50px}.clean-site .firm-hero>p{font-size:16px}.landing-film,.clean-site .motion-frame{border-radius:20px!important}.legacy-minimal [data-screen-label="Hero"]{padding:62px 24px 75px!important}.legacy-minimal .site-bar{min-height:74px}.legacy-minimal section[data-reveal]{padding-top:65px!important}.legacy-minimal .site-bar>a:first-child span:first-child{width:33px!important;height:33px!important}}
@media(max-width:540px){.clean-site .hero h1{font-size:clamp(34px,9vw,48px)}.clean-site .hero.wrap{min-height:610px}.clean-site .hero-copy .actions{gap:15px}.clean-site .hero-copy .firm-shortcut{font-size:12px;max-width:260px}.play-cursor{padding:14px 20px;font-size:13px}.intro-dialog,.intro-dialog video{border-radius:16px}.clean-site .firm-hero h1{font-size:43px!important}}
@media(pointer:coarse){.intro-play{cursor:pointer}.play-cursor{left:50%!important;top:50%!important}}
@media(prefers-reduced-motion:reduce){.type-visible.typing:after{animation:none}.intro-play{cursor:pointer}.play-cursor{left:50%!important;top:50%!important}}
/* Page navigation leaves the viewport with the page; it does not cover demos. */
.clean-site .clean-nav,.legacy-minimal .site-bar{position:relative!important;top:auto!important}
.clean-site .hero-scroll-stage>.hero,.clean-site .intro-sticky{top:0}

.skip-link{position:fixed;left:16px;top:12px;z-index:300;padding:10px 14px;border-radius:8px;background:#fff;color:#173b40;font-weight:600;transform:translateY(-160%)}.skip-link:focus{transform:translateY(0)}
/* Older pages (body.legacy-minimal) still load the A4 Services design system. These rules put them on the Vacei brand the clean pages use. */
body.legacy-minimal{--marketing-dark:#0f2225;--shell-dark:#0f2225;--sidebar-dark:#0f2225;--brand-hover:#2a535c;--brand-glow:#6b939b;--brand-soft:#edf2ed;--brand-soft-border:#dce6df;--brand-tint:rgba(52,106,118,.08);--brand-focus:#759fa0;--sidebar-active:rgba(52,106,118,.24);--canvas:#edf2ed;--hairline:#dce6df;--hairline-soft:#e6ede8;--hairline-strong:#cfdcd4;--line:#dce6df;--line-soft:#e6ede8;--stone:#5d7073;--mute:#6b7f82;--marketing-mute:#5d7073;--lime:#e9f16d;--lime-ink:#173b40;--surface-subtle:#f3f6f3;--surface-hover:#edf2ed;--surface-quiet:#fafbf9}
body.legacy-minimal a[style*="background: var(--marketing-dark)"],body.legacy-minimal button[style*="background: var(--marketing-dark)"]{background:#e9f16d!important;color:#173b40!important;border-color:transparent!important}
body.legacy-minimal a[style*="background: var(--marketing-dark)"]:hover,body.legacy-minimal button[style*="background: var(--marketing-dark)"]:hover{background:#dde65a!important;color:#173b40!important}
body.legacy-minimal footer.clean-footer{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:40px;padding:56px max(48px,calc((100% - 1144px)/2)) 28px;background:#f8f9f5!important;color:#173b40;font-family:'Google Sans Flex',Arial,sans-serif}
body.legacy-minimal .clean-footer p{font-size:12px;line-height:1.8;color:#607174;margin:20px 0 0}
body.legacy-minimal .clean-footer b{font-size:11px;font-weight:600;display:block;margin:7px 0 20px}
body.legacy-minimal .clean-footer>div>a:not(.wordmark){display:block;font-size:11px;color:#607174;margin-top:14px}
body.legacy-minimal .clean-footer>div>a:not(.wordmark):hover{color:#173b40}
body.legacy-minimal .clean-footer .footer-note{grid-column:1/-1;margin:0}
body.legacy-minimal .clean-footer .footer-bottom{border-top:1px solid #dce3de;padding-top:25px;grid-column:1/-1;display:flex;align-items:center;gap:24px;font-size:12px;color:#607174}
body.legacy-minimal .clean-footer .footer-bottom span{margin-right:auto}
body.legacy-minimal .clean-footer .footer-bottom a{color:#607174}
body.legacy-minimal .clean-footer .wordmark{--logo-color:#173b40;display:inline-flex;align-items:center;gap:13px;min-width:132px;height:42px}
body.legacy-minimal .clean-footer .wordmark .brand-symbol{display:block;flex:none;width:41px;height:41px;background:var(--logo-color);mask:url('/assets/vacei-v-mask.png?v=6091836562') center/contain no-repeat;-webkit-mask:url('/assets/vacei-v-mask.png?v=6091836562') center/contain no-repeat}
body.legacy-minimal .clean-footer .wordmark .brand-divider{display:block;flex:none;width:1px;height:33px;background:var(--logo-color);opacity:.4}
body.legacy-minimal .clean-footer .wordmark .brand-mark{display:block;flex:none;width:66px;height:18px;background:var(--logo-color);mask:url('/assets/vacei-word-mask.png?v=31c81e3068') center/contain no-repeat;-webkit-mask:url('/assets/vacei-word-mask.png?v=31c81e3068') center/contain no-repeat}
@media(max-width:850px){body.legacy-minimal footer.clean-footer{gap:25px;padding:48px 26px 96px}}
@media(max-width:540px){body.legacy-minimal footer.clean-footer{grid-template-columns:1fr 1fr}body.legacy-minimal .clean-footer>div:first-child{grid-column:1/-1}body.legacy-minimal .clean-footer .footer-bottom{flex-wrap:wrap;gap:16px}body.legacy-minimal .clean-footer .footer-bottom span{width:100%}}


/* /firm-os.css */
/* Vacei, the operating system for firms (2026-10-01): the homepage as a film.
   As on a4.com.mt, the page alternates pinned scroll films (the Vacei film's chapters,
   played by film/os-film.js) with static sections, and ends on the film's end card.
   Vacei's own brand throughout: Google Sans Flex at 400, the teal cover, ink #173b40,
   deep #0f2226, lime only as a fill under ink text or as the highlighter, sage surfaces.
   Loaded after the shared clean-site sheets. */
.os{--os-deep:#0f2226;--os-ink:#173b40;--os-teal:#346a76;--os-lime:#e9f16d;--os-sage:#edf2ed;--os-off:#fafbf9;--os-line:#dce3de;--os-body:#465d60;--os-muted:#607174;--os-on-dark:#b7cdd0;--os-pad:clamp(96px,11vw,168px)}
.os main{background:var(--os-off)}
.os :is(h1,h2,h3){font-weight:400!important}
.os-wrap{max-width:1240px;margin:0 auto;padding:0 48px}
.os-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* The one emphasised word: the film's lime highlighter on light, lime ink on dark. */
.os h1 em,.os h2 em{font-style:normal;background:linear-gradient(transparent 14%,var(--os-lime) 14%,var(--os-lime) 94%,transparent 94%);color:var(--os-ink);padding:0 .06em;border-radius:.08em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
.os .is-dark h2 em,.os .os-hero h1 em,.os .os-end h2 em{background:none;color:var(--os-lime);padding:0}

/* ---------- Nav: tucks away while reading down, returns on the way up ---------- */
.os .clean-nav{transition:transform .45s cubic-bezier(.22,1,.36,1)}
html.os-nav-tucked .os .clean-nav{transform:translateY(-100%)}
html[data-immersive] .os .clean-nav{transform:translateY(-100%)}
/* While a film is pinned, floating chrome steps aside (the cookie notice never does). */
html[data-immersive] :is(.vc-launcher,.vc-fab,[data-vc-launcher],#vacei-chat-launcher,.geo-banner,[data-floating-chrome]){opacity:0!important;pointer-events:none!important;transition:opacity .3s}

/* ---------- Hero: the teal cover, quiet grid ---------- */
.os-hero{position:relative;overflow:hidden;min-height:calc(100svh - 88px);display:flex;align-items:center;background:var(--vacei-cover,linear-gradient(112deg,#346a76,#376c79 50%,#3b717e));color:#fff;text-align:center}
.os-hero::before{content:'';position:absolute;inset:-64px;background-image:linear-gradient(#ffffff14 1px,transparent 1px),linear-gradient(90deg,#ffffff14 1px,transparent 1px);background-size:64px 64px;background-position:calc(50% + 32px) calc(50% + 32px);-webkit-mask-image:radial-gradient(ellipse 70% 65% at 50% 45%,#000 25%,transparent 100%);mask-image:radial-gradient(ellipse 70% 65% at 50% 45%,#000 25%,transparent 100%);pointer-events:none}
.os-hero .os-wrap{position:relative;width:100%;padding-top:72px;padding-bottom:120px}
.os-kicker{display:inline-flex;align-items:center;gap:10px;padding:7px 15px;border-radius:999px;background:#ffffff1a;border:1px solid #ffffff2e;font-size:13px;font-weight:500;letter-spacing:.01em;color:#edf2ed}
.os-kicker i{width:7px;height:7px;border-radius:50%;background:var(--os-lime)}
.os-hero h1{margin:28px auto 0;max-width:1100px;font-size:clamp(46px,7.2vw,112px)!important;line-height:1.02!important;letter-spacing:-.05em!important;color:#fff}
.os-hero h1 .type-line{display:inline-grid}
.os-hero h1 .type-line>*{grid-area:1/1}
.os-hero h1 .type-reserve{visibility:hidden}
.os-hero p.os-lead{max-width:700px;margin:30px auto 0;font-size:clamp(17px,1.5vw,20px);line-height:1.6;color:#e4eeec}
.os-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:38px}
.os-btn{display:inline-flex;align-items:center;gap:12px;min-height:56px;padding:0 28px;border-radius:999px;font-size:16px;font-weight:500;line-height:1;border:1px solid transparent;cursor:pointer;transition:transform .25s cubic-bezier(.22,1,.36,1),background .25s,border-color .25s}
.os-btn:hover{transform:translateY(-2px)}
.os-btn:focus-visible{outline:3px solid var(--os-lime);outline-offset:3px}
/* Lime is for the dark surfaces (the teal hero and end card, .is-dark). On the light sections (off-white, sage) it
   all but disappears, so the ring there is ink (review fix F5, 2026-10-08). */
.os-sec:not(.is-dark) .os-btn:focus-visible{outline-color:var(--os-ink)}
/* Plain links on light sections: the base #759fa0 ring is under 3:1 on sage and off-white (owner review, 2026-10-09). */
.os-sec:not(.is-dark) a:focus-visible{outline-color:var(--os-ink)}
.os-hero a:not(.os-btn):focus-visible{outline-color:var(--os-lime)}
.os-btn.is-lime{background:var(--os-lime);color:var(--os-ink)}
.os-btn.is-lime:hover{background:#dce661}
.os-btn.is-ghost{background:#ffffff14;border-color:#ffffff4d;color:#fff;font:inherit;font-size:16px;font-weight:500}
.os-btn.is-ghost:hover{background:#ffffff26}
.os-btn.is-ink{background:var(--os-ink);color:#fff}
.os-btn.is-ink:hover{background:var(--os-deep)}
.os-btn .os-play{width:22px;height:22px;border-radius:50%;background:var(--os-lime);display:inline-flex;align-items:center;justify-content:center}
.os-btn .os-play::before{content:'';border-left:7px solid var(--os-ink);border-top:4.5px solid transparent;border-bottom:4.5px solid transparent;margin-left:2px}
.os-hero .os-biz{display:inline-block;margin-top:26px;font-size:14px;color:#e4eeec;text-decoration:underline;text-underline-offset:5px;text-decoration-color:#ffffff59}
.os-hero .os-biz:hover{text-decoration-color:#fff}
/* The homepage hero with VEE and his team (2026-10-04; VEE alone from 2026-10-03). The copy leads on the left; on the
   right a modest cluster: VEE in the middle (150-220 px), Emma, Tom, Olivia and Sam on a loose orbit round him (56-72
   px), a thin lime line from VEE to each and a name chip, in a box no larger than 440 x 380 at 1440 wide. The markup is
   the final composition, shown as stills with no 3D (phones, tablets, Save-Data, low memory, no WebGL2) and under
   reduced motion. On desktop with 3D (vees/vees-loader.js, data-vees-media), vees/vees-hero.js plays the call once:
   while the 3D is being tried (.is-3d-loading) and while it runs (.is-3d), a teammate, its line and its chip show only
   once VEE has called it (.is-called); the engine brings the teammate in when its spot loses data-vees-hidden. The
   whole call is over, and the stage at rest, within 5 s. The lines' coordinates in index.html are drawn for this box
   (viewBox 432 x 372) and these positions. */
.os-hero.has-vee .os-wrap{display:flex;flex-direction:column;align-items:center}
.os-hero-copy{width:100%}
.os-hero-vee{--vee:72px;--mate:30px;order:-1;position:relative;width:calc(var(--vee) * 2);aspect-ratio:432/372;margin:0 auto 4px}
.os-hero-lead{position:absolute;left:50%;top:50%;width:var(--vee);translate:-50% -50%}
.os-hero-mate{position:absolute;width:var(--mate);translate:-50% -50%}
.os-hero-mate .vees-art{width:100%}
.os-hero-mate.is-nw{left:15%;top:24%}
.os-hero-mate.is-ne{left:85%;top:21%}
.os-hero-mate.is-se{left:86%;top:77%}
.os-hero-mate.is-sw{left:14%;top:79%}
/* his still, and his live halo, carry their glow to the edges of their square: round his still off on the teal (the
   star, his hop and his shadow sit well inside the solid part; his live halo fits inside the box) */
.os-hero-lead .vees-still{-webkit-mask-image:radial-gradient(closest-side,#000 74%,transparent);mask-image:radial-gradient(closest-side,#000 74%,transparent)}
.os-hero-links{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.os-hero-link{fill:none;stroke:var(--os-lime);stroke-opacity:.34;stroke-width:1.25;stroke-linecap:round;vector-effect:non-scaling-stroke;transform-box:view-box;transform-origin:50% 50%}
.os-hero-tag{position:absolute;display:none;padding:4px 10px 5px;border:1px solid #ffffff24;border-radius:999px;background:#0f222659;color:#cfe0dd;font-size:12.5px;line-height:1.25;white-space:nowrap;opacity:.86}
.os-hero-tag b{font-weight:500;color:#fff}
.os-hero-mate:is(.is-nw,.is-ne) .os-hero-tag{bottom:calc(100% + 2px)}
.os-hero-mate:is(.is-sw,.is-se) .os-hero-tag{top:calc(100% + 2px)}
.os-hero-mate:is(.is-nw,.is-sw) .os-hero-tag{left:0}
.os-hero-mate:is(.is-ne,.is-se) .os-hero-tag{right:0}
@media(max-width:640px){
  .os-hero.has-vee .os-wrap{padding-top:24px}
}
@media(min-width:1025px){
  .os-hero.has-vee{text-align:left}
  .os-hero.has-vee::after{transform:translate(22vw,-4vh)}
  .os-hero.has-vee .os-wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:clamp(24px,3vw,56px)}
  .os-hero.has-vee h1{margin:28px 0 0;font-size:clamp(46px,5.3vw,88px)!important}
  .os-hero.has-vee p.os-lead{margin:30px 0 0;max-width:600px}
  .os-hero.has-vee .os-actions{justify-content:flex-start}
  .os-hero.has-vee .os-hero-fine{margin:22px 0 0}
  .os-hero-vee{--vee:clamp(150px,15vw,220px);--mate:clamp(56px,calc(var(--vee) * .335),72px);order:0;margin:0}
  .os-hero-tag{display:block}
  /* the call (vees/vees-hero.js): held back until VEE calls each one, then the line draws out from him and the chip
     rises in; while he calls, the called lines and chips are bright, and settle to the quiet state when he is done */
  .os-hero-link{transition:transform .3s cubic-bezier(.2,.7,.2,1),stroke-opacity .6s ease}
  .os-hero-tag{transition:opacity .4s ease,translate .4s cubic-bezier(.2,.7,.2,1)}
  .os-hero-vee.is-3d-loading [data-vees-hidden] .vees-still{opacity:0}
  .os-hero-vee:is(.is-3d-loading,.is-3d) .os-hero-link:not(.is-called){transform:scale(0);stroke-opacity:0}
  .os-hero-vee:is(.is-3d-loading,.is-3d) .os-hero-mate:not(.is-called) .os-hero-tag{opacity:0;translate:0 4px}
  .os-hero-vee.is-calling .os-hero-link.is-called,.os-hero-link.is-ping{stroke-opacity:.72}
  .os-hero-vee.is-calling .is-called .os-hero-tag,.os-hero-mate.is-ping .os-hero-tag{opacity:1}
}
@media(prefers-reduced-motion:reduce){
  .os-hero-link,.os-hero-tag{transition:none}
}
.os-cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#d4e3e0}
.os-cue::after{content:'';width:1px;height:34px;background:linear-gradient(#fff,transparent)}

/* ---------- Scroll films ----------
   Without JavaScript a chapter is its transcript, set large on the dark surface. With it,
   film/os-film.js sets the height, pins the stage and the transcript becomes screen-reader
   text. */
.os-chapter{position:relative;background:var(--os-deep);color:#fff}
.os-chapter .os-script{max-width:1240px;margin:0 auto;padding:var(--os-pad) 48px}
.os-chapter .os-script p{margin:0 0 .5em;font-size:clamp(26px,3.6vw,52px);line-height:1.15;letter-spacing:-.035em;color:#fff}
.os-chapter .os-script p strong{font-weight:400;color:var(--os-lime)}
.os-chapter .os-script .os-script-label{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--os-on-dark);margin-bottom:28px}
.os-chapter.is-live .os-script{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.os-chapter .os-stage{display:none}
/* No `contain: paint` here: on a sticky stage Chromium then skips repaints while scrolling. */
.os-chapter.is-live .os-stage{display:block;position:sticky;top:0;height:100svh;overflow:hidden;background:var(--os-deep)}
.os-stage-inner{position:absolute;inset:0;overflow:hidden}

/* ---------- Sections between the films ---------- */
.os-sec{position:relative;padding:var(--os-pad) 0;background:var(--os-off);color:var(--os-ink)}
.os-sec.is-sage{background:var(--os-sage)}
.os-sec.is-dark{background:radial-gradient(1100px 760px at 70% 20%,#3b717e44,transparent 70%),linear-gradient(112deg,#0f2226,#173b40);color:#fff}
.os-sec.is-dark::before{content:'';position:absolute;inset:0;background-image:linear-gradient(#ffffff0b 1px,transparent 1px),linear-gradient(90deg,#ffffff0b 1px,transparent 1px);background-size:64px 64px;pointer-events:none}
.os-sec>.os-wrap{position:relative}
.os-label{display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--os-teal)}
.os-label::before{content:'';width:8px;height:8px;border-radius:50%;background:var(--os-teal)}
.is-dark .os-label{color:var(--os-on-dark)}
.is-dark .os-label::before{background:var(--os-lime)}
.os-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:56px;align-items:end;margin-bottom:64px}
.os-head h2,.os-h2{margin:18px 0 0;font-size:clamp(40px,5.4vw,84px)!important;line-height:1.03!important;letter-spacing:-.05em!important;color:inherit}
.os-head>p,.os-sub{margin:0;font-size:clamp(17px,1.4vw,19px);line-height:1.65;color:var(--os-body)}
.is-dark .os-head>p,.is-dark .os-sub{color:#d4e3e0}

/* The operating system: VEE in the middle, four portals around it. */
.os-map{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.os-core{grid-column:1/-1;display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:28px;align-items:center;padding:34px 38px;border-radius:28px;background:linear-gradient(112deg,#0f2226,#173b40);color:#fff;box-shadow:0 30px 70px -40px #0f2226}
/* VEE in the core card: his still (no flat orb; the outsourcing pages show him the same way), its glow
   rounded off on the dark card as in the hero */
.os-core .os-core-vee{display:block;width:96px;height:96px;-webkit-mask-image:radial-gradient(closest-side,#000 74%,transparent);mask-image:radial-gradient(closest-side,#000 74%,transparent)}
.os-core h3{margin:0 0 8px;font-size:30px!important;letter-spacing:-.03em;color:#fff}
.os-core p{margin:0;font-size:16px;line-height:1.6;color:#d4e3e0;max-width:680px}
.os-core strong{font-weight:500;color:var(--os-ink);background:var(--os-lime);padding:10px 18px;border-radius:999px;white-space:nowrap;font-size:15px}
.os-mod{display:flex;flex-direction:column;padding:30px 28px 26px;border-radius:24px;background:#fff;border:1px solid var(--os-line);min-height:260px;transition:box-shadow .35s}
.os-mod:hover{box-shadow:0 26px 50px -30px #173b4055}
.os-num{font-size:15px;color:var(--os-teal);font-variant-numeric:tabular-nums}
.os-mod h3{margin:18px 0 10px;font-size:28px!important;letter-spacing:-.03em;color:var(--os-ink)}
.os-mod p{margin:0 0 22px;font-size:15px;line-height:1.6;color:var(--os-body)}
.os-mod a{margin-top:auto;font-size:15px;font-weight:500;color:var(--os-ink);text-decoration:underline;text-underline-offset:5px;text-decoration-color:#173b4040}
.os-mod a:hover{text-decoration-color:var(--os-ink)}
.os-note{margin:40px 0 0;max-width:900px;font-size:clamp(18px,1.6vw,22px);line-height:1.55;color:var(--os-body)}
.os-note strong{font-weight:400;color:var(--os-ink)}

/* Films that are watched, not scrolled: the explainers. */
.os-film{position:relative;border-radius:28px;overflow:hidden;background:#0f2226;box-shadow:0 40px 90px -50px #0f2226;aspect-ratio:16/9}
.os-film video{display:block;width:100%;height:100%;object-fit:cover}
/* A loop's poster is a lazy <img> under its video (perf, 2026-10-05): a video's poster attribute is fetched with the
   page wherever the video sits, three of them 129 KB at load on the homepage. Until a loop has a frame to show the
   video is transparent, so the image shows through exactly where and as the poster did (same frame, same cover). */
.os-film .os-film-poster{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.os-film .os-film-poster+video{position:relative}
.os-film-cap{margin:14px 4px 0;font-size:14px;color:var(--os-muted)}
.is-dark .os-film-cap{color:var(--os-on-dark)}

.os-steps{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;counter-reset:os}
.os-steps.is-four{grid-template-columns:repeat(4,minmax(0,1fr))}
.os-steps li{counter-increment:os;padding:26px 24px;border-radius:22px;background:#fff;border:1px solid var(--os-line)}
.is-dark .os-steps li{background:#ffffff0d;border-color:#ffffff1f}
.os-steps li::before{content:counter(os,decimal-leading-zero);display:block;font-size:15px;color:var(--os-teal);margin-bottom:18px}
.is-dark .os-steps li::before{color:var(--os-lime)}
.os-steps h3{margin:0 0 8px;font-size:21px!important;letter-spacing:-.02em;line-height:1.2;color:inherit}
.os-steps p{margin:0;font-size:15px;line-height:1.6;color:var(--os-body)}
.is-dark .os-steps p{color:#d4e3e0}

.os-gets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.os-get{padding:32px 30px;border-radius:24px;background:#fff;border:1px solid var(--os-line)}
.os-get.is-key{background:var(--os-ink);border-color:var(--os-ink);color:#fff}
.os-ico{width:52px;height:52px;border-radius:16px;background:var(--os-sage);display:flex;align-items:center;justify-content:center;color:var(--os-teal)}
.os-get.is-key .os-ico{background:var(--os-lime);color:var(--os-ink)}
.os-ico svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.os-get h3{margin:24px 0 10px;font-size:24px!important;letter-spacing:-.025em;color:inherit}
.os-get p{margin:0;font-size:15px;line-height:1.65;color:var(--os-body)}
.os-get.is-key p{color:#d4e3e0}

.os-how{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}
.os-cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:40px}
.os-link{font-size:16px;font-weight:500;color:inherit;text-decoration:underline;text-underline-offset:6px;text-decoration-color:currentColor}

/* Businesses: Vacei Books, kept as its own door. */
.os-biz-band{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:center}
.os-price{display:flex;align-items:baseline;gap:8px;margin-top:30px;font-size:64px;letter-spacing:-.05em;color:var(--os-ink)}
.os-price span{font-size:18px;letter-spacing:0;color:var(--os-muted)}
.os-fine{margin:8px 0 0;font-size:14px;color:var(--os-muted)}
.os-biz-links{display:flex;flex-direction:column;gap:12px;margin-top:22px;font-size:15px}
.os-biz-links a{color:var(--os-ink);text-decoration:underline;text-underline-offset:5px;text-decoration-color:#173b4040}

/* FAQ */
.os-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:56px}
.os-faq details{border-bottom:1px solid var(--os-line)}
.os-faq summary{display:flex;justify-content:space-between;gap:20px;padding:24px 0;font-size:20px;letter-spacing:-.015em;color:var(--os-ink);cursor:pointer;list-style:none}
.os-faq summary::-webkit-details-marker{display:none}
.os-faq summary span{flex:none;width:32px;height:32px;border-radius:50%;background:var(--os-sage);display:inline-flex;align-items:center;justify-content:center;transition:transform .3s}
.os-faq details[open] summary span{transform:rotate(45deg);background:var(--os-lime)}
.os-faq details p{margin:0 0 24px;max-width:640px;font-size:16px;line-height:1.7;color:var(--os-body)}

/* The end card: the film's last frame, and the page's. */
.os-end{position:relative;overflow:hidden;min-height:100svh;display:flex;align-items:center;justify-content:center;text-align:center;background:var(--vacei-cover,linear-gradient(112deg,#346a76,#376c79 50%,#3b717e));color:#fff}
.os-end .os-lockup{display:flex;align-items:center;justify-content:center;gap:clamp(18px,2.6vw,36px);--logo-color:#fff}
.os-end .os-lockup i{display:block;background:#fff}
.os-end .os-lockup .v{width:clamp(70px,9vw,130px);aspect-ratio:1;mask:url('/assets/vacei-v-mask.png?v=6091836562') center/contain no-repeat;-webkit-mask:url('/assets/vacei-v-mask.png?v=6091836562') center/contain no-repeat}
.os-end .os-lockup .d{width:2px;height:clamp(56px,7vw,104px);opacity:.45}
.os-end .os-lockup .w{width:clamp(120px,15vw,214px);aspect-ratio:3.67;mask:url('/assets/vacei-word-mask.png?v=31c81e3068') center/contain no-repeat;-webkit-mask:url('/assets/vacei-word-mask.png?v=31c81e3068') center/contain no-repeat}
.os-end h2{margin:clamp(36px,5vw,64px) auto 0;max-width:900px;font-size:clamp(32px,4vw,58px)!important;line-height:1.1!important;letter-spacing:-.04em!important;color:#fff}
.os-end .os-actions{margin-top:44px}
.os-end small{display:block;margin-top:26px;font-size:15px;color:#e4eeec}
html.fx .os-end [data-reveal]{opacity:0;transform:translateY(12px);transition:opacity .45s cubic-bezier(.2,.7,.2,1),transform .45s cubic-bezier(.2,.7,.2,1)}
html.fx .os-end.is-in [data-reveal]{opacity:1;transform:none}

/* The full film, with sound, in a dialog. */
.os-dialog{width:min(1280px,calc(100vw - 32px));max-width:none;padding:0;border:0;border-radius:24px;background:#0f2226;overflow:hidden}
.os-dialog::backdrop{background:#0f2226d9;backdrop-filter:blur(6px)}
.os-dialog video{display:block;width:100%;aspect-ratio:16/9;background:#0f2226}
.os-dialog .os-close{position:absolute;top:12px;right:12px;z-index:2;min-height:40px;padding:0 16px;border-radius:999px;border:0;background:#ffffffe6;color:#173b40;font:inherit;font-size:14px;font-weight:500;cursor:pointer}

/* ---------- The outsourcing pages (2026-10-02) on the same parts ---------- */
.os-hero .os-hero-fine{max-width:720px;margin:26px auto 0;font-size:14px;line-height:1.7;color:#e4eeec}
.os-map.is-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.os-head+.os-steps{margin-top:0}
.os-head:last-child{margin-bottom:0}
.os-film iframe{display:block;width:100%;height:100%;border:0}
.is-dark .os-get{background:#ffffff0d;border-color:#ffffff1f;color:#fff}
.is-dark .os-get p{color:#d4e3e0}
.is-dark .os-ico{background:#ffffff14;color:var(--os-lime)}
.os-end small{max-width:720px;margin-left:auto;margin-right:auto;line-height:1.7}
.os-end .os-end-lead{max-width:640px;margin:26px auto 0;font-size:clamp(17px,1.4vw,19px);line-height:1.6;color:#e4eeec}
.os-end .os-end-link{display:inline-block;margin-top:18px;font-size:15px;color:#fff;text-decoration:underline;text-underline-offset:5px;text-decoration-color:#ffffff66}
.os-end .os-end-link:hover{text-decoration-color:#fff}
/* ---------- Motion (2026-10-03): one gentle fade, once ----------
   The sections are played by os-motion.js on the homepage and the outsourcing pages. The <head>
   sets html.fx before first paint; it hides only what is about to fade in (the runtime's RISE
   groups; a test keeps the lists equal). No JavaScript, a runtime that never starts within 3.5 s,
   or reduced motion: no html.fx, nothing hidden. Nothing here moves on its own or with the
   scroll: the glows behind the cover, the dark bands and the end card are still.
   The hero (perf, 2026-10-04) plays the same fade in CSS: the same 12px rise over 450 ms on the
   same curve, as one group, once the face is in and never later than 600 ms. The <head> starts it
   (html.fx-hero) as soon as the stylesheets are in, instead of os-motion.js starting it behind
   every deferred script on the page. It starts from 1% opacity, which no eye can tell from 0 on
   the teal cover, because Chrome does not count text it first paints at opacity 0 as painted until
   the fade has ended: a fade from 0 holds the page's Largest Contentful Paint back by 450 ms. */
.os{--fx-ease:cubic-bezier(.16,1,.3,1)}
html.fx :is(.os-sec>.os-wrap>*):not(.fx-done){opacity:0}
html.fx:not(.fx-hero) :is(.os-hero .os-wrap>*, .os-hero .os-cue){opacity:0}
@keyframes fx-rise{from{opacity:.01;transform:translateY(12px)}to{opacity:1;transform:none}}
html.fx.fx-hero :is(.os-hero .os-wrap>*, .os-hero .os-cue){animation:fx-rise .45s cubic-bezier(.2,.7,.2,1) backwards}
/* Still glows behind the teal cover, the dark bands and the end card. */
.os-sec.is-dark{overflow:hidden}
.os-hero::after,.os-sec.is-dark::after,.os-end::after{content:'';position:absolute;z-index:0;left:50%;top:50%;width:1100px;height:1100px;margin:-550px 0 0 -550px;border-radius:50%;pointer-events:none;background:radial-gradient(circle,var(--fx-glow) 0,transparent 65%);transform:translate(-4vw,-6vh)}
.os-hero::after{--fx-glow:#ffffff1f}
.os-sec.is-dark::after{--fx-glow:#3b717e59;transform:translate(6vw,6vh)}
.os-end::after{--fx-glow:#e9f16d1a}
.os-hero .os-wrap,.os-sec.is-dark>.os-wrap,.os-end .os-wrap{position:relative;z-index:1}
.os-hero .os-cue{z-index:1}
.os-end .os-lockup{position:relative}
/* Answers slide open where the browser can animate to auto; elsewhere they open at once. */
@supports selector(::details-content){
  .os-faq details{interpolate-size:allow-keywords}
  .os-faq details::details-content{block-size:0;overflow-y:clip;transition:block-size .45s var(--fx-ease),content-visibility .45s allow-discrete}
  .os-faq details[open]::details-content{block-size:auto}
}
.os-get{transition:border-color .35s,box-shadow .35s}
.os-get:hover{border-color:#346a7659;box-shadow:0 24px 60px -34px #173b4040}
.is-dark .os-get:hover{border-color:#e9f16d59;box-shadow:0 24px 60px -34px #00000066}
/* ---------- Footer under the end card ---------- */
.os .clean-footer{padding-top:64px}

@media(max-width:1024px){
  .os-head,.os-how,.os-biz-band,.os-faq{grid-template-columns:1fr;gap:28px}
  .os-map{grid-template-columns:repeat(2,minmax(0,1fr))}
  .os-core{grid-template-columns:auto minmax(0,1fr)}
  .os-core strong{grid-column:1/-1;justify-self:start}
  .os-steps,.os-steps.is-four{grid-template-columns:repeat(2,minmax(0,1fr))}
  .os-gets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .os-hero{min-height:calc(100svh - 74px)}
  .os-map.is-three{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .os-wrap,.os-chapter .os-script{padding-left:20px;padding-right:20px}
  .os-map,.os-map.is-three,.os-steps,.os-steps.is-four,.os-gets{grid-template-columns:1fr}
  .os-core{grid-template-columns:1fr;padding:28px 24px}
  .os-core .os-core-vee{width:72px;height:72px}
  .os-hero .os-wrap{padding-top:48px;padding-bottom:110px}
  .os-btn{min-height:52px;padding:0 22px;font-size:15px}
  .os-faq summary{font-size:18px}
  .os-film{border-radius:18px}
}
@media(prefers-reduced-motion:reduce){
  .os .clean-nav{transition:none}
  .os-end [data-reveal]{opacity:1;transform:none;transition:none}
  .os-mod,.os-btn{transition:none}
  .os-faq details::details-content{transition:none}
}
/* On your phone and tablet (homepage #app, 2026-10-05): the installable apps,
   prominent on the homepage, with VEE. Two real app screens, no motion. */
.os-app-band{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:56px;align-items:center}
.os-app-facts{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.os-app-facts li{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:0 16px;border-radius:999px;background:#fff;border:1px solid var(--os-line);font-size:15px;color:var(--os-ink)}
.os-app-facts li::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--os-teal)}
.os-app-art{position:relative;min-height:540px;display:flex;align-items:center;justify-content:center}
.os-app-phone{width:240px;aspect-ratio:860/1864;padding:9px;border-radius:40px;background:#0a1417;box-shadow:0 40px 80px -36px #0f2226b3,inset 0 0 0 1px #ffffff1f}
.os-app-phone img{display:block;width:100%;height:100%;object-fit:cover;object-position:top;border-radius:31px}
.os-app-phone.is-back{position:absolute;transform:translate(-112px,28px) rotate(-6deg) scale(.88)}
.os-app-phone.is-front{position:relative;transform:translate(60px,0) rotate(3deg)}
.os-app-vee{position:absolute;left:0;bottom:7%;z-index:1;display:flex;align-items:center;gap:12px;max-width:300px;padding:10px 20px 10px 10px;border-radius:999px;background:#fff;border:1px solid var(--os-line);box-shadow:0 24px 50px -30px #173b4066;font-size:15px;line-height:1.35;color:var(--os-body)}
.os-app-vee img{width:56px;height:56px;flex:none;border-radius:50%;background:var(--os-sage)}
.os-app-vee b{display:block;font-weight:500;color:var(--os-ink)}
@media(max-width:1024px){
  .os-app-band{grid-template-columns:1fr;gap:28px}
  .os-app-art{min-height:500px}
}
@media(max-width:640px){
  .os-app-art{min-height:420px}
  .os-app-phone{width:180px;padding:7px;border-radius:30px}
  .os-app-phone img{border-radius:24px}
  .os-app-phone.is-back{transform:translate(-78px,22px) rotate(-6deg) scale(.88)}
  .os-app-phone.is-front{transform:translate(44px,0) rotate(3deg)}
  .os-app-vee{bottom:2%;max-width:250px;font-size:14px}
  .os-app-vee img{width:48px;height:48px}
}
/* Vacei Books, the homepage highlight (owner, 2026-10-08: a dedicated Books section). The heading, the live
   "phone to portal" illustration (books-live.css, books-live.js), the four reasons, then the price (owner, 2026-10-08: €5 a month per company, first month free), sign-up and A4. */
.os-books-head{max-width:980px}
.os-books-head .os-sub{margin-top:22px;max-width:640px}
.os-books-points{list-style:none;margin:56px 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.os-books-points li{padding:26px 24px;border-radius:22px;background:#fff;border:1px solid var(--os-line)}
.os-books-points h3{margin:0 0 10px;font-size:20px!important;line-height:1.25!important;letter-spacing:-.02em!important;color:var(--os-ink)}
.os-books-points p{margin:0;font-size:15px;line-height:1.6;color:var(--os-body)}
.os-books-start{margin-top:56px}
.os-books-start .os-price{margin-top:0}
.os-books-start .os-biz-links{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px 56px;margin-top:32px;padding-top:24px;border-top:1px solid var(--os-line)}
/* Vacei Payroll (owner, 2026-10-08), straight after Books. A light outline button sits beside the ink one. */
.os-btn.is-line{background:transparent;border-color:#173b4040;color:var(--os-ink);font:inherit;font-size:16px;font-weight:500}
.os-btn.is-line:hover{border-color:var(--os-ink)}
.os-payroll{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:56px;align-items:center}
.os-payroll .os-sub{margin-top:22px}
.os-payroll-fine{margin-top:18px}
/* The price line under the payroll lead, and the link to A4's prices (owner, 2026-10-08: €5 a month per company). */
.os-payroll-price{margin-top:16px;font-size:15px;color:var(--os-ink)}
.os-payroll-fine a{color:var(--os-ink);text-decoration:underline;text-underline-offset:5px;text-decoration-color:#173b4040}
.os-payroll-fine a:hover{text-decoration-color:var(--os-ink)}
.os-pay-list{list-style:none;margin:0;padding:6px 28px;border-radius:24px;background:#fff;border:1px solid var(--os-line)}
.os-pay-list li{display:flex;justify-content:space-between;align-items:baseline;gap:16px;padding:20px 0;border-top:1px solid var(--os-line)}
.os-pay-list li:first-child{border-top:0}
.os-pay-list b{font-weight:500;font-size:19px;letter-spacing:-.01em;color:var(--os-ink)}
.os-pay-list span{font-size:15px;color:var(--os-muted);text-align:right}
@media(max-width:1024px){
  .os-books-points{grid-template-columns:repeat(2,minmax(0,1fr))}
  .os-books-start .os-biz-links,.os-payroll{grid-template-columns:1fr}
  .os-payroll{gap:32px}
}
@media(max-width:640px){
  .os-books-points{grid-template-columns:1fr;margin-top:40px}
  .os-books-start{margin-top:40px}
  .os-pay-list{padding:4px 20px}
  .os-pay-list li{flex-direction:column;align-items:flex-start;gap:2px;padding:14px 0}
  .os-pay-list b{font-size:17px}
  .os-pay-list span{font-size:14px;text-align:left}
}

/* /vees/vees.css */
/* The Vees: base styles every surface shares. Each page also links its own surface sheet
   (vees-lineup.css on the homepage, vees-tips.css on the outsourcing pages, vees-band.css on the samples).
   A spot is span.vees-art[data-vee] holding img.vees-still; when the 3D layer is ready it adds .is-3d to the
   stage, the stills fade out and its canvas (.vees-canvas, which it positions and fades itself) shows the Vees. */
:root{--vees-lime:#E9F16D;--vees-ink:#13262A;--vees-ink-2:#173B40;--vees-focus:#759FA0}

.vees-art{position:relative;display:block;aspect-ratio:1;flex:none}
/* a still is the spot plus 12.5% a side (props reach past the Vee's box: tools/vees/render-stills.py), so it is drawn
   at 125%, centred, and lines up with the live Vee exactly */
.vees-still{position:absolute;left:-12.5%;top:-12.5%;display:block;width:125%;height:125%;max-width:none;object-fit:contain;transition:opacity .25s ease,transform .25s ease;pointer-events:none;user-select:none;-webkit-user-select:none;-webkit-user-drag:none}
.is-3d .vees-still{opacity:0}

.vees-canvas{display:block;pointer-events:none}
.is-3d .vees-canvas{opacity:1}

/* the lineup's control: a plain button around the spot (vees-lineup.css lays it out) */
.vees-pick{appearance:none;-webkit-appearance:none;margin:0;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}

/* focus: the site's ring; lime on the dark portal band */
:is(.vees-pick,.vees-pill,[data-vees-tip]):focus-visible{outline:3px solid var(--vees-focus);outline-offset:4px}
[data-vees-stage="portal"] :focus-visible{outline:3px solid var(--vees-lime);outline-offset:3px}

/* visually hidden, still read by screen readers */
.vees-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* reduced motion: no 3D is loaded at all (vees-loader.js); every Vees transition and animation lands at once,
   so end events still fire and surfaces reach their final state */
@media (prefers-reduced-motion: reduce){
  [class^="vees-"],[class*=" vees-"],[class^="vees-"]::before,[class*=" vees-"]::before,[class^="vees-"]::after,[class*=" vees-"]::after{
    transition-duration:.01ms!important;transition-delay:0s!important;
    animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;
    scroll-behavior:auto!important}
}

/* /vees/vees-lineup.css */
/* The homepage's "Meet the Vees" (section#vees, between #os and the "work" film chapter). Loaded after
   firm-os.css and vees.css. The lineup follows the owner's character sheet: two rows (7 + 6), each Vee with
   its name (17px, ink) and role (13px, muted) underneath, VEE in the middle of the first row and a little larger.
   The work card next to it is styled like the film's product cards. vees-moments.js plays both.
   Widths: 7 picks need ~930px at full size, more than the site's 1144px column leaves beside a 380px card, so
   from 1280px the lineup and card take a wider band (up to 1320px) under a centred head, and the art is fluid
   (capped at 120px, VEE 140px) so a row never overflows. Below 1280px the card moves under the lineup. */

.os-sec.vees-sec{background:radial-gradient(ellipse 78% 92% at 50% 44%,#fafbf9 18%,#e3eae5)}
.vees-sec .os-head{grid-template-columns:minmax(0,1fr);justify-items:center;gap:20px;margin-bottom:clamp(36px,4.4vw,60px);text-align:center}
.vees-sec .os-head>p{max-width:640px;text-wrap:pretty}
.vees-foot{margin:28px 0 0;font-size:13px;line-height:1.5;color:#52676a;text-align:center}

/* ---------- the lineup and its card ---------- */
.vees-meet{display:grid;grid-template-columns:minmax(0,1fr);gap:36px;justify-items:center}
.vees-lineup{position:relative;width:100%;padding:30px 0 6px;container-type:inline-size}
.vees-row{display:flex;justify-content:center;align-items:flex-start}
.vees-row+.vees-row{margin-top:clamp(16px,2.2vw,30px)}

/* A pick: the Vee, its name and its role. --vees-w is one pick's width: the longer row fits the lineup (7, or 8 once
   Felix and Clara close row 2), and VEE takes 24px more. */
.vees-lineup{--vees-cols:7}
.vees-lineup:has(.vees-row>.vees-pick:nth-child(8)){--vees-cols:8}
.vees-pick{--vees-w:min(132px,calc((100cqi - 24px) / var(--vees-cols)));flex:none;width:var(--vees-w);display:flex;flex-direction:column;align-items:center;padding:4px 2px 8px;border-radius:20px;text-align:center}
.vees-pick[data-vees-kind="vee"]{width:calc(var(--vees-w) + 24px)}
.vees-lineup .vees-art{width:min(120px,calc(var(--vees-w) - 12px));isolation:isolate}
/* VEE is 20px larger; it grows upwards so every name in the row sits on one line, as on the sheet */
.vees-lineup [data-vees-kind="vee"] .vees-art{width:min(140px,calc(var(--vees-w) + 8px));margin-top:-20px}
@supports not (width:1cqi){
  .vees-pick{--vees-w:120px}
  .vees-row{flex-wrap:wrap}
}
.vees-name{display:inline-block;margin-top:6px;padding:0 .14em;font-size:17px;line-height:1.3;letter-spacing:-.01em;color:#173b40;background:linear-gradient(#e9f16d,#e9f16d) no-repeat 0 88%/0% 42%;transition:background-size .35s cubic-bezier(.22,1,.36,1)}
.vees-role{display:block;max-width:100%;margin-top:2px;font-size:13px;line-height:1.35;color:#52676a;text-wrap:balance}

/* keyboard focus: an ink ring (the base sheet's #759FA0 is under 3:1 on this light gradient; ink is ~10:1) */
.vees-lineup .vees-pick:focus-visible{outline-color:#173b40}
/* hover or focus: the lime highlighter under the name; without 3D the still lifts a little */
.vees-pick:is(:hover,:focus-visible,[aria-pressed="true"],.is-featured) .vees-name{background-size:100% 42%}
.vees-lineup:not(.is-3d) .vees-pick:is(:hover,:focus-visible) .vees-still{transform:translateY(-4px)}
/* chosen (or shown by the tour): a lime ring on the floor under the Vee */
.vees-lineup .vees-art::before{content:'';position:absolute;z-index:-1;left:15%;right:15%;bottom:1%;height:15%;border-radius:50%;background:#e9f16d;box-shadow:0 0 0 2px #d3dd3c,0 0 18px 4px #e9f16d8c;opacity:0;transform:scale(.5);transition:opacity .25s ease,transform .4s cubic-bezier(.22,1,.36,1)}
.vees-pick:is([aria-pressed="true"],.is-featured) .vees-art::before{opacity:1;transform:none}
.vees-pick.is-featured:not([aria-pressed="true"]) .vees-art::before{opacity:.7}

/* ---------- the work card, like the film's product cards ---------- */
.vees-card{position:relative;display:flex;flex-direction:column;width:100%;max-width:560px;min-height:440px;padding:22px 24px 24px;border-radius:24px;background:#fff;border:1px solid #dce3de;box-shadow:0 34px 70px -44px #173b4066,0 2px 10px #173b400a;color:#173b40;text-align:left}
.vees-sec .vees-card h3{margin:0;font-size:17px!important;line-height:1.3!important;letter-spacing:-.015em!important;color:#173b40}

/* empty: a quiet sketch of a card and the invitation */
.vees-card__empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;text-align:center}
.vees-sec .vees-card__empty h3{max-width:250px;font-size:22px!important;letter-spacing:-.025em!important}
.vees-ghost{display:grid;gap:11px;width:min(100%,250px);padding:18px 18px 20px;border-radius:18px;background:#f5f8f6;border:1px solid #e6ece8}
.vees-ghost>span{display:block;height:9px;border-radius:5px;background:#e3eae5}
.vees-ghost>span:nth-child(1){width:46%;height:12px;margin-bottom:6px}
.vees-ghost>span:nth-child(2){width:86%}
.vees-ghost>span:nth-child(3){width:72%}
.vees-ghost>span:nth-child(4){width:80%}
.vees-ghost>span:nth-child(5){width:54%;height:22px;margin-top:6px;border-radius:999px;background:#e9f16d8c}

/* a played card fills the region; its end line sits at the foot */
.vees-card__body{flex:1;display:flex;flex-direction:column}

/* header: the Vee, its name and role, and the status pill */
.vees-card__head{display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 12px;align-items:center}
.vees-card__av{grid-row:1/3;width:40px;height:40px;object-fit:contain;transform:scale(1.35)}
.vees-card__who{margin:0;font-size:15px;line-height:1.3;color:#173b40}
.vees-card__name{font-weight:500}
.vees-card__role{color:#607174}
.vees-card__role::before{content:' · '}
.vees-status{justify-self:start;display:inline-flex;align-items:center;gap:7px;max-width:100%;margin:0;padding:4px 11px 4px 8px;border-radius:14px;border:1px solid #dce3de;background:#fff;font-size:12.5px;line-height:1.3;color:#173b40;transition:background-color .3s ease,border-color .3s ease}
.vees-status.is-done{background:#e9f16d;border-color:#e9f16d}
.vees-spin{flex:none;width:12px;height:12px;border-radius:50%;border:2px solid #d3ddd8;border-top-color:#346a76;animation:vees-spin .8s linear infinite}
.vees-tick{flex:none;position:relative;width:12px;height:12px}
.vees-tick::after{content:'';position:absolute;left:3.5px;top:.5px;width:4px;height:8px;border:solid #173b40;border-width:0 2px 2px 0;transform:rotate(45deg)}
@keyframes vees-spin{to{transform:rotate(360deg)}}

.vees-card__title{margin-top:18px!important;padding-bottom:10px;border-bottom:1px solid #edf1ee}

/* rows: each lands, then ticks */
.vees-card__rows{list-style:none;margin:6px 0 16px;padding:0}
.vees-ri{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(20px,auto);align-items:center;gap:4px 10px;margin:0 -10px;padding:9px 10px;border-radius:12px;opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .35s cubic-bezier(.22,1,.36,1)}
.vees-ri.is-in{opacity:1;transform:none}
.vees-ri+.vees-ri{box-shadow:inset 0 1px 0 #edf1ee}
.vees-ri::before{content:'';position:absolute;z-index:-1;inset:2px 0;border-radius:10px;background:#e9f16d73;transform:scaleX(0);transform-origin:left center;transition:transform .32s cubic-bezier(.22,1,.36,1)}
.vees-ri.is-need::before{background:#e9f16d}
.vees-ri.is-washed::before{transform:none}
.vees-ri__main{min-width:0}
.vees-ri__label{display:block;font-size:14px;line-height:1.35;color:#173b40}
.vees-nw{white-space:nowrap}
.vees-ri__sub{display:block;margin-top:2px;font-size:12.5px;line-height:1.35;color:#607174}
.vees-ri__num{font-size:14px;line-height:1.35;color:#173b40;font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.vees-ri__tag{font-size:12.5px;line-height:1.3;color:#346a76;text-align:right}
.vees-ri__tag.is-need{padding:3px 9px;border-radius:999px;background:#e9f16d;color:#173b40}
.vees-chip{display:inline-flex;align-items:center;gap:4px;margin-top:3px;padding:1px 9px;border-radius:999px;border:1px solid #dce3de;background:#fff;font-size:11.5px;line-height:1.5;color:#173b40}
.vees-chip.is-cat::before{content:'+';color:#607174}
.vees-chip.is-need{margin:0;padding:2px 9px;border-color:#173b40;background:#173b40;color:#fff;white-space:nowrap}
.vees-check{position:relative;width:20px;height:20px;border-radius:50%;border:2px solid #dce3de;transition:background-color .2s ease,border-color .2s ease,transform .3s cubic-bezier(.22,1,.36,1)}
.vees-check::after{content:'';position:absolute;left:5.5px;top:2.5px;width:4px;height:8px;border:solid #173b40;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .25s cubic-bezier(.22,1,.36,1)}
.vees-ri.is-ticked .vees-check{border-color:#e9f16d;background:#e9f16d;transform:scale(1.05)}
.vees-ri.is-ticked .vees-check::after{transform:rotate(45deg) scale(1)}
.vees-check.is-ask{border-style:dashed;border-color:#93a5a4}
/* Tom's boxes: the payable line closes the list */
.vees-card--figures .vees-ri:last-child .vees-ri__label,.vees-card--figures .vees-ri:last-child .vees-ri__num{font-weight:500}
.vees-card--figures .vees-ri:last-child{box-shadow:inset 0 1px 0 #173b4040}

/* VEE's conversation */
.vees-chat{display:flex;flex-direction:column;gap:14px;margin:16px 0 16px}
.vees-msg{margin:0;opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .35s cubic-bezier(.22,1,.36,1)}
.vees-msg.is-in{opacity:1;transform:none}
.vees-msg--you{align-self:flex-end;max-width:86%;padding:10px 15px;border-radius:18px 18px 6px 18px;background:#eef2ef;font-size:14px;line-height:1.45;color:#173b40}
.vees-msg__text{margin:0}
.vees-msg__text.is-typing::after{content:'';display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-.15em;background:#346a76}
.vees-msg--vee .vees-msg__text{font-size:15px;line-height:1.45;color:#173b40}
.vees-msg__from{display:flex;align-items:center;gap:7px;margin:0 0 4px;font-size:12.5px;color:#607174}
.vees-msg__av{width:20px;height:20px;object-fit:contain;transform:scale(1.3)}
.vees-team{display:flex;flex-wrap:wrap;gap:6px;margin:0}
.vees-team__chip{display:inline-flex;align-items:center;gap:5px;padding:3px 10px 3px 4px;border-radius:999px;border:1px solid #dce3de;background:#fff;font-size:12.5px;line-height:1.3;color:#173b40;transition:background-color .25s ease,border-color .25s ease}
.vees-team__chip.is-on{background:#e9f16d;border-color:#e9f16d}
.vees-team__av{width:22px;height:22px;object-fit:contain;transform:scale(1.3)}
.vees-team__tag{display:inline-flex;align-items:center;gap:6px;margin:10px 0 0;font-size:12.5px;color:#346a76;opacity:0;transition:opacity .3s ease}
.vees-team__tag.is-in{opacity:1}
.vees-team__tag::before{content:'';width:4px;height:8px;margin:0 3px 2px 2px;border:solid #346a76;border-width:0 2px 2px 0;transform:rotate(45deg)}

/* the end line, and Iris's stamp */
.vees-card__end{display:flex;align-items:flex-start;gap:10px;margin:auto 0 0;padding:11px 14px;border-radius:14px;background:#e9f16d;font-size:14px;line-height:1.45;color:#173b40;opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .35s cubic-bezier(.22,1,.36,1)}
.vees-card__end::before{content:'';flex:none;width:5px;height:10px;margin:2px 4px 0 5px;border:solid #173b40;border-width:0 2px 2px 0;transform:rotate(45deg)}
.vees-card__end.is-in{opacity:1;transform:none}
.vees-stamp{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;margin:auto 0 8px 6px;padding:7px 18px 7px 14px;border:2px solid #173b40;border-radius:10px;background:#e9f16d;font-size:18px;line-height:1.2;letter-spacing:.1em;text-transform:uppercase;color:#173b40;opacity:0;transform:rotate(-8deg) scale(1.4);transition:opacity .15s ease,transform .38s cubic-bezier(.22,1,.36,1)}
.vees-stamp::before{content:'';width:6px;height:12px;margin:0 2px 3px 0;border:solid #173b40;border-width:0 2.5px 2.5px 0;transform:rotate(45deg)}
.vees-stamp.is-in{opacity:1;transform:rotate(-8deg) scale(1)}

/* ---------- wide: the card beside the lineup ---------- */
@media(min-width:1280px){
  .vees-meet{--vees-band:min(1320px,calc(100vw - 96px));width:var(--vees-band);margin-left:calc((100% - var(--vees-band)) / 2);grid-template-columns:minmax(0,1fr) clamp(340px,26vw,380px);gap:clamp(28px,3vw,44px);align-items:center}
  .vees-card{max-width:none;min-height:476px}
}

/* ---------- tablet: four columns, VEE first and twice as wide, the card underneath ---------- */
@media(max-width:1024px){
  .vees-lineup{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));row-gap:22px;padding-top:30px}
  .vees-row{display:contents}
  .vees-pick,.vees-pick[data-vees-kind="vee"]{grid-column:span 2;width:auto;min-width:0}
  .vees-pick[data-vees-kind="vee"]{grid-column:span 4;order:-1}
  /* a short last line is centred (13 Vees leave two there) */
  .vees-row:last-child>.vees-pick:last-child:nth-child(4n+1){grid-column:4/span 2}
  .vees-row:last-child>.vees-pick:nth-last-child(2):nth-child(4n+1){grid-column:3/span 2}
  .vees-row:last-child>.vees-pick:nth-last-child(3):nth-child(4n+1){grid-column:2/span 2}
  .vees-lineup .vees-art{width:min(120px,100%)}
  .vees-lineup [data-vees-kind="vee"] .vees-art{width:min(140px,100%)}
}

/* ---------- phone: three columns, VEE on its own row, roles move into the card ---------- */
@media(max-width:640px){
  .vees-lineup{grid-template-columns:repeat(6,minmax(0,1fr));row-gap:14px;padding-top:12px}
  .vees-pick[data-vees-kind="vee"]{grid-column:1/-1}
  .vees-row:last-child>.vees-pick:last-child:nth-child(4n+1),.vees-row:last-child>.vees-pick:nth-last-child(2):nth-child(4n+1),.vees-row:last-child>.vees-pick:nth-last-child(3):nth-child(4n+1){grid-column:auto/span 2}
  /* three a line after VEE: a short last line is centred (15 Vees leave two there) */
  .vees-row:last-child>.vees-pick:last-child:nth-child(3n+1){grid-column:3/span 2}
  .vees-row:last-child>.vees-pick:nth-last-child(2):nth-child(3n+1){grid-column:2/span 2}
  .vees-lineup .vees-art{width:min(88px,100%)}
  .vees-lineup [data-vees-kind="vee"] .vees-art{width:min(104px,100%);margin-top:0}
  .vees-name{font-size:16px}
  .vees-role{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
  .vees-card{min-height:450px;padding:20px 18px 22px;border-radius:22px}
  .vees-meet{gap:28px}
}
/* small phones: titles and VEE's chips wrap to more lines (VEE's card reaches ~490px at 320-360px), so the card
   starts that tall and no card grows while it builds */
@media(max-width:379px){
  .vees-card{min-height:500px}
}

/* /os-explainer.css */
/* /how-it-works (owner, 10 Oct 2026, spec section 20): "take the previous website and adjust it to this content".
   The page is built like the outsourcing pages from firm-os.css (os-hero, os-sec plain / is-sage / is-dark, os-head,
   os-steps, os-film, os-faq, os-end) and the homepage's Vees lineup (vees.css, vees-lineup.css). This sheet only adds
   what those parts do not have: the step-through ("Follow one request"), drawn as a white portal window like the Books
   live demo (books-live.css), with the site's own colours for state: amber for what needs you, the lime of "done" and
   of a new item; the team filter and card; the decisions table; the set-up's timing lines and the film's Pause; the
   connect tiles and their summary bar. Copy, structure and behaviour are draft 7's
   (docs/superpowers/specs/2026-10-10-os-design-prototype.html.txt) with the copy review. Every selector carries an
   osx- class, so nothing reaches the site header, the footer or the chat widget. Loaded after the shared sheets. */
.osx{--osx-amber:#fcebc7;--osx-amber-ink:#8a5a00;--osx-amber-line:#f2b84b;--osx-hot:#fbfce4;--osx-hot-line:#d9e25a;--osx-row:#eef2ef}
.osx [hidden]{display:none!important}
/* Enhanced parts show once os-explainer.js runs (html.osx-js, or html.osx-ready on a late start, when the plain lists
   stay); the plain page is complete without it. Without it the connect section shows the firm's statuses under the
   one switch they belong to, "For a firm", and its tiles, disabled until the script runs, are not dimmed. */
:root:not(.osx-js):not(.osx-ready) .osx-jsonly{display:none!important}
:root:not(.osx-js):not(.osx-ready) .osx-seg label:has(#osx-aud-biz){display:none}
:root:not(.osx-ready) .osx-tile:disabled{opacity:1;cursor:default}
.osx-sprite{position:absolute;width:0;height:0;overflow:hidden}
.osx-ic{width:16px;height:16px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.osx-sr{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* The site's rings: ink on the light sections, lime on the teal and the dark ones. */
.osx :focus-visible{outline:3px solid var(--os-ink);outline-offset:3px}
.osx :is(.os-hero,.os-sec.is-dark,.os-end) :focus-visible{outline-color:var(--os-lime)}
/* The "AI agent" tag, as the Books ledger's tags: teal on sage. */
.osx-ai{display:inline-block;padding:0 8px;border-radius:999px;background:var(--os-sage);color:var(--os-teal);font-size:.92em;font-weight:500;line-height:1.55;letter-spacing:0;text-transform:none;white-space:nowrap}
.osx-tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--os-muted)}
.osx-tag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--os-teal)}
.osx-card{background:#fff;border:1px solid var(--os-line);border-radius:24px;min-width:0}
/* a section head without a side paragraph takes the full width */
.osx .os-head>div:only-child{grid-column:1/-1}

/* ── small controls: pills, as the Books confirm button and the site's chips ── */
.osx-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:42px;padding:0 18px;border-radius:999px;border:1px solid transparent;font:inherit;font-size:14px;font-weight:500;line-height:1;white-space:nowrap;cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.osx-btn--line{background:#fff;border-color:var(--os-line);color:var(--os-ink)}
.osx-btn--line:hover:not([aria-disabled="true"]){border-color:var(--os-ink)}
.osx-btn--ink{background:var(--os-ink);color:#fff}
.osx-btn--ink:hover:not([aria-disabled="true"]){background:var(--os-deep)}
.osx-btn--icon{width:42px;padding:0}
.osx-btn[aria-disabled="true"]{opacity:.4;cursor:default}
.osx-seg{display:inline-flex;gap:2px;max-width:100%;padding:4px;border-radius:999px;background:#fff;border:1px solid var(--os-line)}
.osx-seg label{position:relative;display:block;min-width:0}
.osx-seg input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
.osx-seg span{display:block;padding:9px 18px;border-radius:999px;font-size:14px;font-weight:500;line-height:1.3;color:var(--os-body);text-align:center;transition:background .25s,color .25s}
.osx-seg input:checked+span{background:var(--os-ink);color:#fff}
.osx-seg input:focus-visible+span{outline:3px solid var(--os-ink);outline-offset:2px}

/* ── the step-through: a white portal window on the sage section ── */
:root:not(.osx-js) .osx-stagebox{display:none}
.osx-stage{display:flex;flex-direction:column;gap:14px;padding:clamp(14px,2vw,22px);border-radius:28px;background:#fff;border:1px solid var(--os-line);box-shadow:0 40px 90px -50px #0f2226,0 2px 10px #173b400a;color:var(--os-ink);font-variant-numeric:tabular-nums}
.osx-stage p{margin:0}
.osx-bar{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between}
.osx-bar-l,.osx-bar-r{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;min-width:0}
/* the story's line keeps the room of the longest (the audit story's, 19.2em), so the bar wraps the same way for every
   story and the stage keeps its height when the story changes (on a phone the switch has a line of its own) */
.osx-who-cap{min-width:20em;font-size:13px;color:var(--os-muted)}
.osx-tourbar{height:3px;border-radius:3px;background:var(--osx-row);overflow:hidden}
.osx-tourbar i{display:block;height:100%;width:0;background:var(--os-teal);transition:width .4s linear}

/* the route: five numbered dots on a line; a finished step takes the lime of "done", the current one ink */
.osx-route{position:relative}
.osx-route::before,.osx-trace{content:'';position:absolute;left:10%;right:10%;top:27px;height:2px;border-radius:2px;background:var(--os-line)}
.osx-trace{right:auto;width:0;z-index:1;background:var(--os-teal);transition:width .45s cubic-bezier(.22,1,.36,1)}
.osx-prog{position:relative;z-index:2;min-height:90px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));margin:0;padding:10px 6px 2px;list-style:none}
.osx-prog li{display:flex;justify-content:center;min-width:0}
.osx-prog button{display:flex;flex-direction:column;align-items:center;gap:7px;max-width:100%;padding:0 4px;border:0;border-radius:14px;background:none;font:inherit;font-size:13px;line-height:1.25;color:var(--os-muted);text-align:center;cursor:pointer}
.osx-dot{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--os-line);background:#fff;color:var(--os-teal);font-size:14px;box-shadow:0 0 0 5px #fff;transition:background .25s,border-color .25s,color .25s}
.osx-prog li.osx-done .osx-dot{background:var(--os-lime);border-color:var(--os-lime);color:var(--os-ink)}
.osx-prog li.osx-now .osx-dot{background:var(--os-ink);border-color:var(--os-ink);color:#fff}
.osx-prog li.osx-now button{color:var(--os-ink);font-weight:500}
.osx-yours{font-size:10.5px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--osx-amber-ink)}

/* counters, as the Books cards: amber while something waits on you, the lime of "new" once you have decided */
.osx-gauges{min-height:52px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0;padding:0;list-style:none}
.osx-stat{display:flex;align-items:baseline;justify-content:space-between;gap:10px;min-width:0;padding:12px 14px;border-radius:14px;border:1px solid var(--os-line);transition:background .4s,border-color .4s}
.osx-stat span{min-width:0;font-size:12.5px;color:var(--os-muted)}
.osx-stat b{font-size:21px;font-weight:500;letter-spacing:-.02em;line-height:1.2;white-space:nowrap}
.osx-stat--you{background:var(--osx-amber);border-color:var(--osx-amber-line)}
.osx-stat--you span,.osx-stat--you b{color:var(--osx-amber-ink)}
.osx-stat--ok{background:var(--osx-hot);border-color:var(--osx-hot-line);box-shadow:0 0 0 1px var(--osx-hot-line)}

/* two panes: The Vees, and You */
.osx-panes{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:12px}
.osx-pane{display:flex;flex-direction:column;gap:10px;min-width:0;min-height:330px;padding:14px 16px;border-radius:16px;border:1px solid var(--os-line)}
.osx-pane-h{display:flex;align-items:center;flex-wrap:wrap;gap:4px 8px;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--os-muted)}
.osx-pane-h .osx-ai{font-size:11px;letter-spacing:.02em}
.osx-pane-b{flex:1;display:flex;flex-direction:column;gap:10px;min-width:0}
.osx-ui{display:flex;flex-direction:column;min-width:0;padding:12px 12px 4px;border-radius:14px;border:1px solid var(--osx-row);background:var(--os-off);font-size:13.5px;color:var(--os-body)}
.osx-ui.osx-new{background:var(--osx-hot);border-color:var(--osx-hot-line);box-shadow:0 0 0 1px var(--osx-hot-line)}
.osx-vh{display:flex;align-items:center;gap:10px;min-width:0;padding-bottom:8px}
.osx-vh img{width:36px;height:36px;display:block;flex:none;object-fit:contain;transform:scale(1.3)}
.osx-vh b{font-weight:500;color:var(--os-ink)}
.osx-vh span{display:block;font-size:12.5px;color:var(--os-muted)}
.osx-vh .osx-ai{display:inline-block}
.osx-kv{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 -12px;padding:8px 12px;border-top:1px solid var(--osx-row);font-size:13px;color:var(--os-ink)}
.osx-kv span{min-width:0}
.osx-kv .osx-v{font-weight:500;white-space:nowrap;text-align:right}
.osx-kv--warn{background:var(--osx-amber);box-shadow:inset 3px 0 0 var(--osx-amber-line)}
.osx-kv--warn,.osx-kv--warn .osx-v{color:var(--osx-amber-ink)}
.osx-kv--ok .osx-v{padding:1px 9px;border-radius:999px;background:var(--os-lime);color:var(--os-ink)}
.osx-empty{padding:12px 14px;border-radius:14px;border:1px dashed var(--os-line);font-size:13.5px;color:var(--os-muted)}
.osx-bubble{align-self:flex-end;max-width:92%;padding:9px 14px;border-radius:18px 18px 6px 18px;background:var(--osx-row);font-size:13.5px;line-height:1.45;color:var(--os-ink)}
.osx-composer{margin-top:auto}
.osx-chipbtn{display:flex;align-items:center;gap:10px;width:100%;min-height:46px;padding:9px 16px;border-radius:999px;border:1px solid var(--os-line);background:#fff;font:inherit;font-size:13.5px;line-height:1.35;color:var(--os-ink);text-align:left;cursor:pointer;transition:border-color .25s}
.osx-chipbtn:hover{border-color:var(--os-ink)}
.osx-chipbtn .osx-ic{color:var(--os-teal)}
.osx-do{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 8px 0 18px;border:0;border-radius:999px;background:var(--os-ink);font:inherit;font-size:14px;font-weight:500;color:#fff;cursor:pointer;transition:background .25s}
.osx-do:hover{background:var(--os-deep)}
.osx-do i,.osx-did i{display:grid;place-items:center;border-radius:50%;font-style:normal}
.osx-do i{width:26px;height:26px;background:#ffffff26}
.osx-did{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;padding:5px 14px 5px 6px;border-radius:999px;background:var(--os-lime);font-size:13.5px;font-weight:500;color:var(--os-ink)}
.osx-did i{width:22px;height:22px;background:var(--os-ink);color:var(--os-lime)}
.osx-did .osx-ic{width:13px;height:13px}

/* the caption, the activity log and the controls */
.osx-caption{min-height:78px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;padding:2px 2px 0}
.osx-caption p{font-size:18px;line-height:1.45;letter-spacing:-.01em;color:var(--os-ink)}
.osx-turn{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 10px;border-radius:999px;background:var(--osx-amber);font-size:13px;font-weight:500;color:var(--osx-amber-ink)}
.osx-turn::before{content:'';width:7px;height:7px;border-radius:50%;background:var(--osx-amber-line);flex:none}
.osx-log{padding-top:12px;border-top:1px solid var(--osx-row)}
.osx-log-h{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--os-muted)}
.osx-log-n{padding:1px 9px;border-radius:999px;background:var(--os-sage);color:var(--os-teal);letter-spacing:0}
.osx-log ol{display:flex;flex-direction:column;gap:6px;min-height:72px;margin:8px 0 0;padding:0;list-style:none;font-size:13.5px;color:var(--os-body)}
.osx-log li{display:grid;grid-template-columns:minmax(0,180px) minmax(0,1fr);gap:12px;align-items:baseline}
.osx-log li b{font-weight:400;font-size:13px;color:var(--os-muted)}
.osx-log li.osx-you b{font-weight:500;color:var(--os-ink)}
.osx-log li.osx-new{color:var(--os-ink)}
.osx-foot{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;justify-content:space-between;padding-top:12px;border-top:1px solid var(--osx-row)}
.osx-keys{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px;color:var(--os-muted)}
.osx-kbd{padding:0 6px;border-radius:6px;border:1px solid var(--os-line);background:var(--os-off);font-family:inherit;font-size:11px;color:var(--os-body)}
.osx-nav2{display:flex;gap:8px}

/* the story in words: the whole step-through without JavaScript, and for screen readers with it */
.osx-story{display:flex;flex-direction:column;gap:14px}
.osx-story>.osx-tag{align-self:flex-start}
.osx-js .osx-story{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.osx-story-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.osx-story .osx-card{padding:28px 28px 26px}
.osx-story-h{margin:0 0 6px;font-size:22px!important;letter-spacing:-.025em;line-height:1.25;color:var(--os-ink)}
.osx-story p{margin:0;font-size:14px;color:var(--os-muted)}
.osx-story ol{display:flex;flex-direction:column;gap:8px;margin:16px 0 0;padding-left:1.3em;font-size:15px;line-height:1.6;color:var(--os-body)}
.osx-story b{font-weight:500;color:var(--os-ink)}

/* ── the team: the homepage's lineup, with a filter and the chosen Vee's card ── */
.osx-team-f{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.osx-chip{min-height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--os-line);background:#fff;font:inherit;font-size:14px;font-weight:500;color:var(--os-body);cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.osx-chip:hover{border-color:var(--os-ink)}
.osx-chip[aria-pressed="true"]{background:var(--os-ink);border-color:var(--os-ink);color:#fff}
/* in the lineup the tag sits on its own line above the role */
.osx-lineup .vees-role .osx-ai{display:table;margin:3px auto 2px;font-size:11.5px}
.osx-lineup .osx-sep{display:none}
/* filtered (four Vees), the chosen group stands in one row */
@media(min-width:1025px){.osx-lineup.osx-filtered{display:flex;flex-wrap:wrap;justify-content:center}.osx-lineup.osx-filtered .vees-row{display:contents}}
.osx .osx-vcard{min-height:0;gap:14px}
.osx-vcard .vees-card__head{grid-template-columns:40px minmax(0,1fr)}
.osx-vcard .vees-card__head p{margin:0}
.osx-vcard .vees-status{border:0;padding:0;background:none}
.osx-tm-line{margin:0;font-size:16px;line-height:1.6;color:var(--os-body)}

/* ── who decides: a table on a white card ── */
.osx-decide-wrap{padding:6px clamp(18px,3vw,34px);overflow-x:auto}
.osx-decide{width:100%;border-collapse:collapse}
.osx-decide th{padding:20px 16px 14px 0;border-bottom:1px solid var(--os-line);font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;text-align:left;color:var(--os-teal)}
.osx-decide td{padding:14px 16px 14px 0;border-bottom:1px solid var(--osx-row);vertical-align:middle;font-size:17px;line-height:1.45;color:var(--os-body)}
.osx-decide tr:last-child td{border-bottom:0}
.osx-decide td:last-child{color:var(--os-ink);font-weight:500}
.osx-decide-w{display:flex;align-items:center;gap:14px}
.osx-decide img{width:40px;height:40px;display:block;flex:none;object-fit:contain;transform:scale(1.25)}
.osx-foot-line{margin-top:18px}

/* ── how the set-up works: the timing lines, the film and its Pause ── */
.osx-setup-film{margin-top:56px}
.osx-timing{margin:0;padding:0;list-style:none}
.osx-timing li{display:flex;align-items:center;gap:18px;padding:18px 0;border-top:1px solid #ffffff1f;font-size:clamp(20px,2vw,26px);line-height:1.3;letter-spacing:-.02em;color:#fff}
.osx-timing li:last-child{border-bottom:1px solid #ffffff1f}
.osx-timing .os-ico{flex:none;width:46px;height:46px;border-radius:14px}
.osx-side{display:flex;flex-direction:column;align-items:flex-start;gap:12px;margin-top:28px}
.osx-side-l{margin:0;font-size:15px;line-height:1.6;color:#d4e3e0}
.osx-film{min-width:0}
.osx-film-btn{position:absolute;left:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 16px 0 12px;border:0;border-radius:999px;background:var(--os-deep);font:inherit;font-size:14px;font-weight:500;color:#fff;cursor:pointer;transition:background .25s}
.osx-film-btn:hover{background:var(--os-ink)}
.osx .osx-film .osx-film-btn:focus-visible{outline-color:var(--os-ink)}

/* ── what we connect: cards like the site's offer cards; a tick and a status chip each ── */
.osx-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:24px 0 0;padding:0;list-style:none}
.osx-tiles li{display:flex;min-width:0}
.osx-tile{width:100%;display:flex;flex-direction:column;gap:10px;padding:26px 24px 24px;border-radius:24px;border:1px solid var(--os-line);background:#fff;font:inherit;color:var(--os-ink);text-align:left;cursor:pointer;transition:border-color .35s,box-shadow .35s}
.osx-tile:not(:disabled):hover{border-color:#346a7659;box-shadow:0 24px 60px -34px #173b4040}
.osx-tile[aria-pressed="true"]{border-color:var(--os-ink);box-shadow:0 0 0 1px var(--os-ink)}
.osx-tile:disabled{opacity:.5;cursor:default}
.osx-tile-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.osx-tile-name{font-size:21px;line-height:1.2;letter-spacing:-.02em}
.osx-tile-p{font-size:15px;line-height:1.6;color:var(--os-body)}
.osx-tick{flex:none;width:24px;height:24px;border-radius:50%;border:2px solid var(--os-line);display:grid;place-items:center;color:transparent;transition:background .2s,border-color .2s}
.osx-tick .osx-ic{width:13px;height:13px;stroke-width:2.2}
.osx-tile[aria-pressed="true"] .osx-tick{background:var(--os-lime);border-color:var(--os-lime);color:var(--os-ink)}
.osx-tile:disabled .osx-tick{display:none}
.osx-pill{align-self:flex-start;margin-top:auto;padding:3px 11px;border-radius:999px;font-size:12.5px;font-weight:500;line-height:1.4}
.osx-pill--live{background:var(--os-lime);color:var(--os-ink)}
.osx-pill--setup{background:var(--os-sage);color:var(--os-teal)}
.osx-pill--none{border:1px dashed #93a5a4;color:var(--os-muted)}
.osx-shortlist{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;justify-content:space-between;margin-top:14px;padding:14px 14px 14px 28px;border-radius:32px;border:1px solid var(--os-line);background:#fff}
.osx-short-n{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:baseline;margin:0;font-size:15px;color:var(--os-muted)}
.osx-short-n b{font-size:24px;font-weight:500;letter-spacing:-.02em;color:var(--os-ink);font-variant-numeric:tabular-nums}
.osx-short-live b{color:var(--os-teal)}
.osx-seg+.osx-tiles{margin-top:24px}

@media(max-width:1024px){
  .osx-panes,.osx-story-cols{grid-template-columns:1fr}
  /* measured at 768 px over every beat of all three stories: a counter label wraps once its figure has three digits */
  .osx-gauges{min-height:65px}
  .osx-pane+.osx-pane{min-height:230px}
  .osx-caption{min-height:110px}
  .osx-lineup.osx-filtered .vees-row>.vees-pick.osx-tm{grid-column:auto/span 2}
  .osx-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .osx-gauges{grid-template-columns:1fr;min-height:172px}
  /* measured at 375 px over every beat of all three stories: the route with a "Yours" step, three log lines of two rows each;
     the controls always on a line of their own, so Next stays put whatever its label */
  .osx-prog{min-height:106px}
  .osx-log ol{min-height:120px}
  .osx-foot{flex-direction:column;align-items:flex-start}
  /* a filtered team of four: two by two */
  .osx-lineup.osx-filtered .vees-row>.vees-pick.osx-tm{grid-column:auto/span 3}
  .osx-prog li:not(.osx-now) .osx-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .osx-log li{grid-template-columns:1fr;gap:0}
  .osx-tiles{grid-template-columns:1fr}
  .osx-bar-l .osx-seg{width:100%}
  .osx-bar-l .osx-seg label{flex:1}
  .osx-bar-l .osx-seg span{padding:9px 8px}
  /* a story label that wraps to two lines keeps every pill the bar's height */
  .osx-bar-l .osx-seg label{display:flex}
  .osx-bar-l .osx-seg span{flex:1;display:flex;align-items:center;justify-content:center}
  .osx-who-cap{min-width:0}
  .osx-keys .osx-kbd{display:none}
  .osx-caption p{font-size:17px}
  .osx-decide td{font-size:15px}
  .osx-decide img{width:32px;height:32px}
  .osx-shortlist{padding:18px;border-radius:24px}
}
@media(prefers-reduced-motion:no-preference){
  .osx-ui.osx-new,.osx-log li.osx-new{animation:osx-in .45s cubic-bezier(.2,.7,.2,1)}
  .osx-turn::before{animation:osx-pulse 1.6s ease-in-out 3}
}
@keyframes osx-in{from{transform:translateY(8px);opacity:.3}to{transform:none;opacity:1}}
@keyframes osx-pulse{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){
  .osx *,.osx *::before,.osx *::after{animation:none!important;transition:none!important}
}