/* 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, the line typed ---------- */
.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 h1 .type-visible.typing::after{content:'';display:inline-block;width:.06em;height:.82em;margin-left:.04em;background:var(--os-lime);vertical-align:-.06em;animation:os-caret .9s steps(1) infinite}
@keyframes os-caret{50%{opacity:0}}
.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}
.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}
.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);animation:os-cue 2s ease-in-out infinite}
@keyframes os-cue{0%,100%{transform:scaleY(.4);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}}

/* ---------- 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}
.os-core .os-star{width:76px;height:76px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#2c5c63,#173b40 45%,#0f2226);display:flex;align-items:center;justify-content:center;box-shadow:0 0 40px #e9f16d33,0 0 0 3px #e9f16d55}
.os-core .os-star svg{width:36px;height:36px}
.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:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}
.os-mod:hover{transform:translateY(-4px);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}
.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') center/contain no-repeat;-webkit-mask:url('/assets/vacei-v-mask.png') 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') center/contain no-repeat;-webkit-mask:url('/assets/vacei-word-mask.png') 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}
.os-end [data-reveal]{opacity:0;transform:translateY(28px);filter:blur(8px);transition:opacity .9s cubic-bezier(.22,1,.36,1),transform .9s cubic-bezier(.22,1,.36,1),filter .9s}
.os-end.is-in [data-reveal]{opacity:1;transform:none;filter:none}
.os-end.is-in [data-reveal="2"]{transition-delay:.15s}
.os-end.is-in [data-reveal="3"]{transition-delay:.3s}
.os-end.is-in [data-reveal="4"]{transition-delay:.45s}

/* 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, as on a4.com.mt, in Vacei's brand (2026-10-02) ----------
   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 play (the runtime's RISE list, the
   section headings and the hero; 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. */
.os{--fx-ease:cubic-bezier(.16,1,.3,1);--fx-io:cubic-bezier(.65,0,.35,1)}
html.fx :is(.os-sec .os-label, .os-sec .os-head>p, .os-sec .os-sub, .os-sec .os-cta-row, .os-sec .os-fine, .os-sec .os-note, .os-sec .os-film-cap, .os-sec .os-gets>*, .os-sec .os-map>*, .os-sec .os-steps>li, .os-sec .os-faq details, .os-sec .os-price, .os-sec .os-biz-links, .os-sec h2, .os-hero .os-wrap>*, .os-hero .os-cue):not(.fx-done){opacity:0}
/* Headings: the first line types behind a caret, the highlighted words rise, the highlighter draws in. */
.fx-l{position:relative;opacity:0}
.fx-l.on{opacity:1}
.fx-w,.fx-n{display:inline-block}
.fx-w:not(.on){opacity:0}
.fx-caret::after{content:'';position:absolute;right:-.07em;top:.08em;width:.06em;height:.86em;background:var(--os-teal)}
.is-dark .fx-caret::after{background:var(--os-lime)}
.fx-blink::after{animation:os-caret .5s steps(1) 3}
html.fx .os-sec h2 em{background-size:0% 100%;background-repeat:no-repeat;transition:background-size .8s var(--fx-ease)}
html.fx .os-sec h2 em.fx-mark{background-size:100% 100%}
/* Glows that drift 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%);animation:fx-drift 11s var(--fx-io) infinite alternate}
.os-hero::after{--fx-glow:#ffffff1f}
.os-sec.is-dark::after{--fx-glow:#3b717e59;animation-name:fx-drift-b;animation-duration:12.7s}
.os-end::after{--fx-glow:#e9f16d1a;animation-duration:14.4s}
.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}
@keyframes fx-drift{from{transform:translate(-18vw,-6vh)}to{transform:translate(12vw,-5vh)}}
@keyframes fx-drift-b{from{transform:translate(14vw,6vh)}to{transform:translate(-10vw,6vh)}}
/* Steps: a line fills as you read down, and each number lights as the line reaches it. */
.os-steps.fx-tl{position:relative}
@media(min-width:1025px){
  .os-steps.fx-tl::before,.os-steps.fx-tl::after{content:'';position:absolute;left:0;right:0;top:-24px;height:2px;border-radius:2px}
  .os-steps.fx-tl::before{background:var(--os-line)}
  .os-steps.fx-tl::after{background:var(--os-teal);transform:scaleX(var(--tl,0));transform-origin:left center}
  .is-dark .os-steps.fx-tl::before{background:#ffffff1f}
  .is-dark .os-steps.fx-tl::after{background:var(--os-lime)}
  .os-steps.fx-tl li::before{opacity:.45;transform-origin:left center;transition:transform .45s var(--fx-ease),opacity .45s}
  .os-steps.fx-tl li.fx-on::before{opacity:1;transform:scale(1.3)}
}
.os-sec .os-film{transform-origin:50% 60%}
/* The end card: the lockup glitches in (eight bands, six flickering blocks), then the words rise. */
.os-end .os-lockup{position:relative}
html.fx .os-end.fx-glitch [data-reveal="1"]{opacity:1;transform:none;filter:none;transition:none}
html.fx .os-end.fx-glitch .os-lockup:not(.fx-lock-on)>i{opacity:0}
html.fx .os-end.fx-glitch [data-reveal]:not([data-reveal="1"]){opacity:0;transform:translateY(28px);filter:blur(8px)}
html.fx .os-end.fx-glitch.fx-end-in [data-reveal]:not([data-reveal="1"]){opacity:1;transform:none;filter:none}
html.fx .os-end.fx-glitch.fx-end-in [data-reveal="2"]{transition-delay:1.05s}
html.fx .os-end.fx-glitch.fx-end-in [data-reveal="3"]{transition-delay:1.16s}
html.fx .os-end.fx-glitch.fx-end-in [data-reveal="4"]{transition-delay:1.27s}
.fx-gband{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(18px,2.6vw,36px);pointer-events:none}
.fx-gblock{position:absolute;pointer-events:none}
/* 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-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-cue::after,.os-hero h1 .type-visible.typing::after{animation:none}
  .os-end [data-reveal]{opacity:1;transform:none;filter:none;transition:none}
  .os-mod,.os-btn{transition:none}
  .os-hero::after,.os-sec.is-dark::after,.os-end::after{animation:none}
  .os-faq details::details-content{transition:none}
}