/* /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%}}


/* /os-home.css */
/* The homepage's own parts (owner, 10 and 11 October 2026): the two demo cards (#demos), Marija's film
   (#home-film) and "How to start" (#how). They are built from the site's own parts (firm-os.css: os-sec, os-wrap,
   os-head, os-label, os-h2, os-sub, os-cta-row, os-btn, os-film, os-film-cap, os-note, os-fine) and its tokens
   (.os), in Google Sans Flex. What is here is only what those parts do not already draw: the demo cards (the #vees
   card's look: white, hairlines, a soft shadow), the film's missing-file label, the four steps that follow the set-up
   film and its Pause, and the spacing of the hero's two links. Every class here starts osh-. Linked before
   firm-os.css (the stylesheet run after it is pinned by other tests), so a rule that meets one of firm-os.css's is
   written to win on specificity. os-home.js drives the film's Play button and the steps. */

/* ---------- The hero's two links (firm-os.css .os-biz): side by side, stacked on a phone ---------- */
.os-hero .os-hero-copy .os-biz+.os-biz{margin-left:26px}
@media(max-width:640px){
  .os-hero .os-hero-copy .os-biz{display:table;margin-left:auto;margin-right:auto}
  .os-hero .os-hero-copy .os-biz+.os-biz{margin-top:12px;margin-left:auto}
}

/* What needs os-home.js waits hidden until it runs (Play, the missing-file label, the set-up film's Pause): without
   it each section is its heading and its line. While the film plays, Play keeps its place but is not shown. */
.osh-sec [hidden]{display:none!important}
.osh-sec .osh-is-playing{visibility:hidden}

/* ---------- Marija's film (#home-film, an os-sec with an os-film) ---------- */
.osh-soon{position:absolute;z-index:1;left:16px;top:16px;padding:6px 12px;border-radius:999px;background:#0f2226d9;font-size:13px;color:#fff}

/* ---------- What we do (#demos, an os-sec on sage): two target cards, then "keeps improving" and Build your portal ---------- */
.osh-sec .os-head .os-sub{margin-top:22px;max-width:560px}
.osh-demos{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.osh-demo{display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid #dce3de;border-radius:28px;background:#fff;color:var(--os-ink);box-shadow:0 34px 70px -44px #173b4066,0 2px 10px #173b400a;transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.osh-demo:hover{transform:translateY(-4px);box-shadow:0 44px 80px -40px #173b4066,0 2px 10px #173b400a}
.osh-demo-shot{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--os-deep)}
.osh-demo-shot img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.osh-demo:hover .osh-demo-shot img{transform:scale(1.03)}
.osh-demo-body{display:flex;flex:1;flex-direction:column;gap:12px;padding:26px 28px 28px}
.osh-demo-k{font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--os-teal)}
.osh-demo-t{margin:0;font-size:clamp(26px,2.4vw,34px)!important;font-weight:400;line-height:1.1!important;letter-spacing:-.03em;color:var(--os-ink)}
.osh-demo-p{display:flex;flex-wrap:wrap;gap:8px;margin:2px 0 0;padding:0;list-style:none}
.osh-demo-p li{padding:6px 12px;border:1px solid #dce3de;border-radius:999px;font-size:14px;line-height:1.3;color:var(--os-body)}
.osh-demo-acts{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:auto;padding-top:14px}
.osh-demo-go{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 24px;border-radius:999px;background:var(--os-ink);font-size:15px;font-weight:500;color:#fff;text-decoration:none;transition:background .25s}
.osh-demo-go:hover{background:var(--os-deep)}
.osh-demo.is-firm .osh-demo-go{background:var(--os-lime);color:var(--os-ink)}
.osh-demo.is-firm .osh-demo-go:hover{background:#d3dd3c}
.osh-demo-build{font-size:15px;font-weight:500;color:var(--os-ink);text-decoration:underline;text-underline-offset:5px;text-decoration-color:#173b4040}
.osh-demo-build:hover{text-decoration-color:var(--os-ink)}
.osh-demo-go:focus-visible,.osh-demo-build:focus-visible{outline:3px solid var(--os-ink);outline-offset:3px}
/* the two tiles under the cards: the Vees keep improving (white), Build your portal (ink, one link) */
.osh-more{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;margin-top:24px}
.osh-learn{display:grid;grid-template-columns:72px minmax(0,1fr);gap:18px;align-items:center;padding:24px 28px;border:1px solid #dce3de;border-radius:28px;background:#fff}
.osh-learn img{display:block;width:72px;height:72px;object-fit:contain;transform:scale(1.25)}
.osh-learn h3{margin:0 0 6px;font-size:22px!important;font-weight:400;line-height:1.2!important;letter-spacing:-.02em;color:var(--os-ink)}
.osh-learn p{margin:0;font-size:15px;line-height:1.55;color:var(--os-body)}
.osh-build{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px 24px;padding:24px 28px;border-radius:28px;background:var(--os-ink);color:#fff;text-decoration:none;transition:background .25s}
.osh-build:hover{background:var(--os-deep)}
.osh-build:focus-visible{outline:3px solid var(--os-ink);outline-offset:4px}
.osh-build-copy{display:flex;flex-direction:column;gap:4px;min-width:0}
.osh-build-k{font-size:13px;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--os-lime)}
.osh-build-copy b{font-size:22px;font-weight:400;line-height:1.2;letter-spacing:-.02em}
.osh-build-copy span:last-child{font-size:15px;color:var(--os-on-dark)}
.osh-build-go{display:inline-flex;align-items:center;gap:10px;min-height:50px;padding:0 24px;border-radius:999px;background:var(--os-lime);font-size:15px;font-weight:500;color:var(--os-ink)}

/* ---------- How to start (#how, an os-sec on dark): four steps beside the set-up film ---------- */
.osh-start{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.62fr);gap:40px;align-items:center}
.osh-steps{display:grid;gap:10px;margin:0;padding:0;list-style:none}
.osh-step{display:grid;grid-template-columns:40px minmax(0,1fr);gap:4px 16px;width:100%;padding:16px 18px;border:1px solid #ffffff1f;border-radius:20px;background:#ffffff0d;font:inherit;text-align:left;color:#fff;cursor:pointer;transition:background .3s,border-color .3s}
.osh-step:hover{background:#ffffff14}
.osh-step:focus-visible{outline:3px solid #fff;outline-offset:2px}
.osh-step-n{grid-row:1 / span 3;display:flex;align-items:center;justify-content:center;width:40px;height:40px;border:1.5px solid #ffffff4d;border-radius:50%;box-sizing:border-box;font-size:16px;font-weight:500;transition:background .3s,border-color .3s,color .3s}
.osh-step-t{font-size:20px;line-height:1.2;letter-spacing:-.02em}
.osh-step-p{font-size:15px;line-height:1.5;color:var(--os-on-dark)}
.osh-step-bar{display:block;height:3px;margin-top:8px;overflow:hidden;border-radius:2px;background:#ffffff1f}
.osh-step-bar i{display:block;width:100%;height:100%;background:var(--os-lime);transform:scaleX(var(--p,0));transform-origin:0 50%}
/* the step on screen: lime number, lime edge; the steps before it: a lime ring */
.osh-steps .is-on .osh-step{border-color:var(--os-lime);background:#ffffff14}
.osh-steps .is-on .osh-step-n{border-color:var(--os-lime);background:var(--os-lime);color:var(--os-ink)}
.osh-steps .is-done .osh-step-n{border-color:var(--os-lime);color:var(--os-lime)}
/* without os-home.js the steps are a plain list beside the poster: no bars, nothing to press */
.osh-start:not(.is-live) .osh-step-bar{display:none}
.osh-start:not(.is-live) .osh-step{cursor:default}
.osh-start-film{min-width:0}
.osh-start-btn{position:absolute;z-index:2;left:14px;bottom:14px;display:inline-flex;align-items:center;gap:10px;min-height:40px;padding:0 16px 0 14px;border:0;border-radius:999px;background:var(--os-deep);font:inherit;font-size:14px;font-weight:500;color:#fff;cursor:pointer;transition:background .25s}
.osh-start-btn:hover{background:var(--os-ink)}
.osh-start-btn:focus-visible{outline:3px solid #fff;outline-offset:2px}
.osh-start-ic{display:block;width:10px;height:12px;box-sizing:border-box;border-left:3px solid #fff;border-right:3px solid #fff}
.osh-start-btn.is-held .osh-start-ic{width:0;height:0;border-left:10px solid #fff;border-right:0;border-top:6px solid transparent;border-bottom:6px solid transparent}
.osh-start+.os-fine{margin-top:28px;color:var(--os-on-dark)}

@media(max-width:1024px){
  .osh-more{grid-template-columns:minmax(0,1fr)}
  .osh-start{grid-template-columns:minmax(0,1fr);gap:24px}
  .osh-start-film{order:-1}
  .osh-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:640px){
  .osh-demos{grid-template-columns:minmax(0,1fr);gap:16px}
  .osh-demo{border-radius:22px}
  .osh-demo-body{padding:20px 20px 22px}
  .osh-more{gap:16px;margin-top:16px}
  .osh-learn,.osh-build{padding:20px;border-radius:22px}
  .osh-steps{grid-template-columns:minmax(0,1fr);gap:8px}
  .osh-step{padding:12px 14px;border-radius:16px}
  .osh-step-t{font-size:18px}
  .osh-step-p{font-size:14px}
  /* on a phone the film is small: Pause is a round icon in the corner, its words kept for screen readers */
  .osh-start-btn{left:8px;bottom:8px;justify-content:center;width:34px;min-height:34px;padding:0}
  .osh-start-btn [data-osh-start-l]{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media(prefers-reduced-motion:reduce){
  .osh-demo,.osh-demo-shot img,.osh-step,.osh-step-n,.osh-build{transition:none}
  .osh-demo:hover{transform:none}
  .osh-demo:hover .osh-demo-shot img{transform:none}
}

/* /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}
}

/* /books-live.css */
/* Vacei Books, live: "phone to portal" (homepage #business; owner, 2026-10-08).
   A phone running Claude beside the Vacei Books portal of a fictional company. The markup in index.html is
   one settled frame (the supplier bill, posted); books-live.js replays three short scenes from it while the
   section is on screen. Every size is fixed here, so nothing on the page moves when the scenes play.
   Under reduced motion nothing animates and the settled frame stays (books-live.js does not run either). */
.bl{--bl-ph-w:292px;--bl-ph-h:580px;--bl-po-h:440px;--bl-hot:#fbfce4;--bl-hot-line:#d9e25a;--bl-amber:#fcebc7;--bl-amber-ink:#8a5a00;position:relative;margin-top:56px}
.bl-sr{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}
.bl-stage{display:flex;align-items:center;height:var(--bl-ph-h);font-size:13px;line-height:1.45;color:var(--os-ink);font-variant-numeric:tabular-nums}
.bl-stage p{margin:0}
.bl-stage i{font-style:normal}

/* The phone: a plain chat app labelled Claude, no logos. */
.bl-phone{position:relative;z-index:1;flex:none;width:var(--bl-ph-w);height:var(--bl-ph-h);padding:10px;border-radius:44px;background:#0a1417;box-shadow:0 40px 80px -36px #0f2226b3,inset 0 0 0 1px #ffffff1f}
.bl-screen{display:flex;flex-direction:column;height:100%;overflow:hidden;border-radius:34px;background:#fff}
.bl-status{flex:none;display:flex;align-items:center;justify-content:space-between;height:34px;padding:0 24px 0 28px;font-size:12px;font-weight:500}
.bl-notch{width:76px;height:22px;border-radius:999px;background:#0a1417}
.bl-battery{position:relative;width:22px;height:11px;border-radius:3px;border:1.5px solid var(--os-ink);box-sizing:border-box}
.bl-battery::before{content:'';position:absolute;inset:1.5px 5px 1.5px 1.5px;border-radius:1px;background:var(--os-ink)}
.bl-chat-head{flex:none;display:flex;flex-direction:column;align-items:center;gap:1px;padding:4px 16px 10px;border-bottom:1px solid #eef2ef}
.bl-chat-head b{font-size:15px;font-weight:600}
.bl-chat-head span{display:inline-flex;align-items:center;gap:6px;font-size:11px;color:var(--os-muted)}
.bl-chat-head span::before{content:'';width:6px;height:6px;border-radius:50%;background:#3aa76d}
.bl-chat{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:12px 14px;overflow:hidden;-webkit-mask-image:linear-gradient(transparent,#000 22px);mask-image:linear-gradient(transparent,#000 22px);transition:opacity .3s}
.bl-chat.is-clearing{opacity:0}
.bl-chat>*{flex:none;transition:opacity .35s cubic-bezier(.2,.7,.2,1),transform .35s cubic-bezier(.2,.7,.2,1)}
.bl-chat>.bl-enter{opacity:0;transform:translateY(8px)}
.bl-hello{align-self:center;margin:auto 0!important;padding:0 10px;font-size:15px;line-height:1.35;text-align:center;color:var(--os-muted)}
.bl-u{align-self:flex-end;max-width:84%;padding:8px 12px;border-radius:16px 16px 4px 16px;background:var(--os-sage)}
.bl-b{align-self:stretch}
.bl-b ul{margin:6px 0 0;padding:0;list-style:none}
.bl-b li{display:flex;justify-content:space-between;gap:8px;padding:5px 0;border-top:1px solid #eef2ef;font-size:12.5px}
.bl-b li:first-child{border-top:0}
.bl-b li i{color:var(--bl-amber-ink);flex:none;white-space:nowrap}
.bl-b .bl-note{margin-top:6px;font-size:12.5px;color:var(--os-muted)}
.bl-b strong{font-weight:600}
.bl-entry{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:4px 10px;margin-top:8px;padding:9px 11px;border-radius:12px;border:1px solid var(--os-line);font-size:12px}
.bl-entry i{color:var(--os-muted)}
.bl-entry b{font-weight:500;text-align:right}
.bl-confirm{position:relative;display:inline-flex;align-items:center;height:30px;margin-top:8px;padding:0 16px;border-radius:999px;background:var(--os-ink);color:#fff;font-size:12.5px;font-weight:500;transition:background .25s,color .25s,transform .15s}
.bl-confirm.is-pressed{transform:scale(.95)}
.bl-confirm.is-done{background:var(--os-lime);color:var(--os-ink)}
.bl-tap{position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;background:#173b4059;pointer-events:none;animation:bl-tap .55s ease-out forwards}
@keyframes bl-tap{from{opacity:1;transform:scale(.3)}to{opacity:0;transform:scale(1.7)}}
.bl-posted{align-self:flex-start;display:inline-flex;align-items:center;padding:4px 11px;border-radius:999px;background:var(--os-sage);font-size:12px;font-weight:500;color:var(--os-teal)}
.bl-work{align-self:flex-start;display:inline-flex;align-items:center;gap:8px;font-size:12px;color:var(--os-muted)}
.bl-work i{display:inline-flex;gap:3px}
.bl-work i::before,.bl-work i::after,.bl-work b{content:'';width:5px;height:5px;border-radius:50%;background:var(--os-teal);animation:bl-dot 1s ease-in-out infinite}
.bl-work b{animation-delay:.15s}
.bl-work i::after{animation-delay:.3s}
@keyframes bl-dot{0%,100%{opacity:.25}50%{opacity:1}}
.bl-compose{flex:none;display:flex;flex-direction:column;gap:6px;margin:0 12px 14px;padding:7px 7px 7px 14px;border-radius:20px;border:1px solid var(--os-line);background:#fff}
.bl-compose-row{display:flex;align-items:center;gap:8px}
/* One line that clips: books-live.js scrolls it as it types, so a long question keeps its newest characters and the
   caret in view (review fix F6). */
.bl-input{flex:1;min-width:0;min-height:20px;font-size:13px;white-space:nowrap;overflow:hidden}
.bl-ph{color:#98a8ab}
.bl-input.is-typing .bl-ph{display:none}
.bl-input.is-typing .bl-typed{padding-right:3px}
.bl-input.is-typing .bl-typed::after{content:'';display:inline-block;width:1.5px;height:15px;margin-left:1px;vertical-align:-3px;background:var(--os-ink);animation:bl-caret 1s steps(1) infinite}
@keyframes bl-caret{50%{opacity:0}}
.bl-send{flex:none;position:relative;width:28px;height:28px;border-radius:50%;background:#dce3de;transition:background .2s}
.bl-send::before{content:'';position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-2px 0 0 -4px;border:solid #fff;border-width:2px 0 0 2px;transform:rotate(45deg)}
.bl-send.is-ready{background:var(--os-ink)}

/* Between them: the connection, which carries a dot across when an entry is posted. */
.bl-link{flex:none;position:relative;width:48px;height:2px;background:repeating-linear-gradient(90deg,#346a7666 0 6px,transparent 6px 12px)}
.bl-link i{position:absolute;left:0;top:-3px;width:8px;height:8px;border-radius:50%;background:var(--os-teal);opacity:0}
.bl-link.is-on i{animation:bl-travel .7s cubic-bezier(.4,0,.2,1)}
@keyframes bl-travel{0%{opacity:0;transform:translateX(0)}15%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateX(40px)}}

/* The portal: the Vacei Books window of Northstar Studio. */
.bl-portal{flex:1;min-width:0;height:var(--bl-po-h);display:flex;flex-direction:column;overflow:hidden;border-radius:20px;background:#fff;border:1px solid var(--os-line);box-shadow:0 40px 90px -50px #0f2226}
.bl-chrome{flex:none;display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;background:#f3f6f4;border-bottom:1px solid var(--os-line)}
.bl-chrome>i{width:9px;height:9px;border-radius:50%;background:#cfd9d3}
.bl-chrome span{flex:1;max-width:300px;margin:0 auto;padding:4px 12px;border-radius:999px;background:#fff;font-size:11.5px;text-align:center;color:var(--os-muted)}
.bl-app{flex:1;min-height:0;display:flex;flex-direction:column;gap:14px;padding:18px 20px}
.bl-app-head{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
.bl-app-head b{font-size:16px;font-weight:600;letter-spacing:-.01em}
.bl-app-head span{display:inline-flex;align-items:center;gap:8px;padding:4px 12px 4px 4px;border-radius:999px;border:1px solid var(--os-line);font-size:12px;font-weight:500}
.bl-app-head span i{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:var(--os-ink);color:var(--os-lime);font-size:9.5px;font-weight:600}
.bl-cards{flex:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bl-card{display:flex;flex-direction:column;justify-content:space-between;gap:4px;padding:12px 14px;border-radius:14px;border:1px solid var(--os-line);transition:background .4s,border-color .4s,box-shadow .4s}
.bl-card span{font-size:11.5px;color:var(--os-muted)}
.bl-card b{font-size:21px;font-weight:500;letter-spacing:-.02em;white-space:nowrap}
.bl-card.is-hot{background:var(--bl-hot);border-color:var(--bl-hot-line);box-shadow:0 0 0 1px var(--bl-hot-line)}
.bl-panes{flex:1;min-height:0;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:12px}
.bl-pane{min-height:0;overflow:hidden;padding:12px 14px;border-radius:14px;border:1px solid var(--os-line)}
.bl-pane-title{margin:0 0 4px!important;font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--os-muted)}
.bl-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:10px;padding:9px 6px;margin:0 -6px;border-top:1px solid #eef2ef;border-radius:8px;font-size:12.5px;overflow:hidden;transition:background .5s,box-shadow .5s}
.bl-row:first-child{border-top-color:transparent}
.bl-row span{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.bl-row i{font-size:11px;color:var(--os-muted)}
.bl-row b{font-weight:500;text-align:right}
[data-bl-ledger] .bl-row i{padding:2px 8px;border-radius:999px;background:var(--os-sage);color:var(--os-teal)}
.bl-row.is-new{background:var(--bl-hot);box-shadow:inset 3px 0 0 var(--bl-hot-line)}
.bl-row.is-in{animation:bl-row-in .55s cubic-bezier(.2,.7,.2,1)}
@keyframes bl-row-in{from{max-height:0;padding-top:0;padding-bottom:0;opacity:0}to{max-height:40px;opacity:1}}
.bl-row.is-out{opacity:0;transition:opacity .35s}
.bl-row.is-late{background:var(--bl-amber);box-shadow:inset 3px 0 0 #f2b84b}
.bl-row.is-late i{color:var(--bl-amber-ink);font-weight:500}

/* Under the stage: what this is, and a pause for those who want the page still. */
.bl-foot{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px}
.bl-tag{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--os-muted)}
.bl-tag::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--os-teal)}
.bl-toggle{display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px;border-radius:999px;border:1px solid #173b4033;background:transparent;font:inherit;font-size:13px;color:var(--os-ink);cursor:pointer}
.bl-toggle:hover{border-color:var(--os-ink)}
.bl-toggle:focus-visible{outline:3px solid var(--os-ink);outline-offset:2px}
.bl-toggle[hidden]{display:none}
.bl.is-paused .bl-stage *,.bl.is-paused .bl-stage *::before,.bl.is-paused .bl-stage *::after{animation-play-state:paused!important}

/* Up to 1240 px the portal is too narrow for two panes side by side (names cut to stubs between about 641 and
   1240 px, review fix F7): one pane at a time, full width, so names show in full. The ledger, then Debtors for
   scene c (books-live.js adds .is-debtors); the settled frame shows the ledger. */
@media(max-width:1240px){
  .bl-panes{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr)}
  .bl-pane{grid-area:1/1;transition:opacity .35s,visibility .35s}
  .bl-pane+.bl-pane,.bl.is-debtors .bl-pane:first-child{opacity:0;visibility:hidden}
  .bl.is-debtors .bl-pane+.bl-pane{opacity:1;visibility:visible}
}
@media(max-width:1180px){
  .bl{--bl-ph-w:272px;--bl-ph-h:552px;--bl-po-h:432px}
  .bl-link{width:32px}
  .bl-card b{font-size:18px}
}
/* Tablets and phones: the phone above the portal. */
@media(max-width:860px){
  .bl{--bl-ph-w:300px;--bl-ph-h:500px;--bl-po-h:410px}
  .bl-stage{flex-direction:column;align-items:stretch;gap:16px;height:auto}
  .bl-phone{align-self:center;max-width:100%}
  .bl-link{display:none}
  .bl-portal{flex:none}
}
@media(max-width:640px){
  .bl{--bl-ph-w:300px;--bl-ph-h:444px;--bl-po-h:320px;margin-top:40px}
  .bl-stage{gap:14px}
  .bl-phone{padding:8px;border-radius:38px}
  .bl-screen{border-radius:30px}
  .bl-status{height:28px}
  .bl-notch{width:64px;height:18px}
  .bl-chat-head{padding-bottom:8px}
  .bl-chat{gap:8px;padding:10px 12px}
  .bl-app{gap:10px;padding:12px}
  .bl-app-head b{font-size:14px}
  .bl-cards{gap:6px}
  .bl-card{padding:8px 9px;border-radius:12px}
  .bl-card span{font-size:10.5px}
  .bl-card b{font-size:14px}
  /* Still one pane at a time (from 1240 px down), so the phone and the portal fit on one screen. */
  .bl-pane{padding:8px 10px;border-radius:12px}
  .bl-row{padding:6px;font-size:12px}
  .bl-row:nth-child(n+4){display:none}
  .bl-foot{flex-wrap:wrap}
}
@media(prefers-reduced-motion:reduce){
  .bl *,.bl *::before,.bl *::after{animation:none!important;transition:none!important}
}