/* formats/saas/format.css - Ostrel Systems, a business-to-business product site. Brand truth: BRAND.md.
   The page-per-service structure presented as one product document: dark blue graphite, brushed
   aluminium lines, cold screen light as the only glow, one ice blue accent. Every selector is
   prefixed .fmt-saas, so it can never reach another demo.

   CLASS INVENTORY (page order)
   section#board.os-hero   .os-hero-top (h1 | .os-hero-side: .lead .os-ctas .micro)
                           figure.os-app > figcaption.visually-hidden + .os-win[aria-hidden] (the product, HTML)
                             .os-bar | .os-body (.os-rail | .os-main: .os-head .os-stats .os-table | .os-side: .os-map .os-appr) | svg.os-cursor
   section.os-proof        ul.os-proof-l (four example figures) + p.os-proof-n
   section#product         .os-bento > article.os-cell (#dispatch #approvals #schedule), each with an .os-vig vignette
   section#teams           .os-teams-grid (.os-teams-copy: h2, [role=tablist] .os-tabs, .os-tp copy, the honesty line | .os-panels)
   section#pricing         .os-plans > article.os-plan (x3, .is-pick in the middle)
   section#faq             .os-faq-grid (.os-faq-head: h2 + photograph | details list)
   section#demo            .os-demo-grid (.chat.os-chat with .os-slots | .tile.os-demo-fig)
   footer.os-foot

   Shape rule (one system): tiles and windows 14 px, cards and wells 10 px, buttons and chips 8 px,
   status tags 6 px. Nothing is a full pill.
   No shader, zero WebGL. Motion is gsap (loaded by format.js only when motion is allowed) plus css
   transitions keyed to shared.js's reveal; the block at the foot of this file stills the rest. */

/* ---------- face: Geist, subset to latin and instanced to weights 400-700 (17 KB). SIL OFL 1.1,
   licence in formats/saas/OFL-geist.txt. Fallback measured against Arial Bold at weight 600 on a
   lowercase-heavy sample of this page: advance ratio 1.006, ascent 1005/1000, descent 295/1000. ---------- */
@font-face{font-family:'Geist';font-style:normal;font-weight:400 700;font-display:swap;src:url('/formats/saas/geist-display.woff2') format('woff2')}
@font-face{font-family:'Geist Fallback';src:local('Arial');size-adjust:100.6%;ascent-override:99.9%;descent-override:29.3%;line-gap-override:0%}

/* ---------- brand hooks. Measured pairs: ink 16.4 / text2 8.6 / text3 6.3 on the page ground,
   text3 5.9 on ground3; on-accent ink on the ice blue 12.1. ---------- */
.fmt-saas{--b-ground:#0A0D12;--b-ground2:#0F131A;--b-ground3:#161B24;--b-ink:#E9EEF4;--b-text2:#AAB4C2;--b-text3:#939EAF;
  --b-accent:#A9D2FF;--b-accent-tint:#152233;--b-on-accent:#0A0D12;--b-line:rgba(186,202,224,.11);--b-line-2:rgba(186,202,224,.18);
  --b-line-control:rgba(186,202,224,.34);--b-surface:var(--b-ground2);--b-focus:var(--b-accent);--b-tab-rule:var(--b-accent);
  --b-glass:rgba(15,19,26,.9);--b-glass-line:rgba(186,202,224,.14);--b-dot:#7FD8B0;
  --os-ok:#7FD8B0;--os-wait:#EBC77A;--os-late:#F4A095;
  --b-display:'Geist','Geist Fallback',Arial,sans-serif;--b-display-weight:600;
  --os-r-win:14px;--os-r-card:10px;--os-r-btn:8px;--os-r-tag:6px}
.fmt-saas .f-nav,.fmt-saas main,.fmt-saas .f-foot{--text-2:var(--b-text2);--text-3:var(--b-text3);--bg-3:var(--b-ground3);
  --line-control:var(--b-line-control);--r-tile:var(--os-r-win);--r-card:var(--os-r-card);--r-pill:var(--os-r-btn)}
.fmt-saas main ::selection,.fmt-saas .f-nav ::selection{background:var(--b-accent);color:var(--b-on-accent)}
.fmt-saas .ex{opacity:1;color:var(--b-text2);background:transparent;border-color:var(--b-line-control);border-radius:var(--os-r-tag)}
.fmt-saas .os-mono,.fmt-saas kbd{font-family:var(--font-mono);font-weight:400;font-variant-numeric:tabular-nums}

/* ---------- type ---------- */
.fmt-saas .f-brand{font-size:18px;font-weight:600;letter-spacing:-.03em;gap:9px}
.fmt-saas .f-brand .f-mark{width:22px;height:22px;color:var(--b-accent)}
.fmt-saas main .h1{font-size:clamp(42px,5.2vw,78px);font-weight:600;letter-spacing:-.045em;line-height:1.02;max-width:none;margin:0;padding-bottom:.04em;text-wrap:balance}
.fmt-saas main .h2{font-size:clamp(30px,3.4vw,50px);font-weight:600;letter-spacing:-.04em;line-height:1.06;max-width:18ch;margin-bottom:0}
.fmt-saas main .hcard-t{font-size:clamp(20px,1.7vw,24px);font-weight:600;letter-spacing:-.03em;line-height:1.2;max-width:24ch}
.fmt-saas main .hcard-p{font-weight:400;max-width:48ch;line-height:1.55}
.fmt-saas main .lead{font-weight:400;color:var(--b-text2);max-width:40ch;margin-bottom:28px}
.fmt-saas main .sub{font-weight:400}
.fmt-saas main .micro{font-weight:400}

/* ---------- chrome on graphite ---------- */
.fmt-saas .f-nav{background:color-mix(in srgb,var(--b-ground) 84%,transparent);border-bottom-color:var(--b-line)}
.fmt-saas .f-tabs a{font-weight:500;opacity:.74}
.fmt-saas .f-tabs a:hover,.fmt-saas .f-tabs a.is-on,.fmt-saas .f-tabs a[aria-current]{opacity:1}
.fmt-saas .pill{letter-spacing:-.005em;transition:transform .18s var(--ease),background .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)}
.fmt-saas .pill-ink{background:var(--b-accent);color:var(--b-on-accent);box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 8px 24px -12px rgba(169,210,255,.55)}
.fmt-saas .pill-ink:hover{background:#C4E0FF;transform:translateY(-1px)}
.fmt-saas .pill-ghost{background:rgba(186,202,224,.04);border-color:var(--b-line-control);color:var(--b-ink)}
.fmt-saas .pill-ghost:hover{background:rgba(186,202,224,.1);border-color:var(--b-ink);transform:translateY(-1px)}

/* ---------- ground: flat graphite with one cold light off the top, behind the product only ---------- */
.fmt-saas main{background:var(--b-ground)}
.fmt-saas main>section{position:relative}

/* ---------- hero ---------- */
.fmt-saas .os-hero{padding-top:clamp(40px,6vw,88px);padding-bottom:clamp(40px,5vw,72px);overflow:hidden}
.fmt-saas .os-hero-top{display:grid;grid-template-columns:minmax(0,7.4fr) minmax(0,4.6fr);gap:clamp(24px,4vw,64px);align-items:end}
.fmt-saas .os-hero-side .lead{margin-top:0}
.fmt-saas .os-hero-side .micro{margin-top:18px}
.fmt-saas .os-ctas{gap:12px}

.fmt-saas .os-app{position:relative;margin:clamp(36px,4.6vw,64px) 0 0}
/* the one glow on the page: cold screen light spilling up off the window, not a gradient mesh */
.fmt-saas .os-app::before{content:"";position:absolute;left:8%;right:8%;top:-80px;height:280px;z-index:0;pointer-events:none;
  background:radial-gradient(50% 60% at 50% 70%,rgba(169,210,255,.16),rgba(169,210,255,0) 70%)}
.fmt-saas .os-win{position:relative;z-index:1;border:1px solid var(--b-line-2);border-radius:var(--os-r-win);background:var(--b-ground2);overflow:hidden;
  box-shadow:inset 0 1px 0 rgba(233,238,244,.07),0 60px 120px -60px rgba(0,0,0,.9),0 0 0 1px rgba(0,0,0,.4);
  font-size:13px;line-height:1.35;font-weight:500;color:var(--b-ink);font-variant-numeric:tabular-nums}
.fmt-saas .os-win::after{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(169,210,255,.5),transparent);pointer-events:none}

.fmt-saas .os-bar{display:flex;align-items:center;gap:16px;height:44px;padding:0 14px;border-bottom:1px solid var(--b-line);background:rgba(10,13,18,.55)}
.fmt-saas .os-lights{display:flex;gap:6px;flex:none}
.fmt-saas .os-lights i{width:10px;height:10px;border-radius:50%;background:#2A313D}
.fmt-saas .os-crumb{display:flex;gap:8px;align-items:center;color:var(--b-text2);white-space:nowrap;min-width:0;overflow:hidden}
.fmt-saas .os-crumb b{color:var(--b-ink);font-weight:600}
.fmt-saas .os-crumb i{font-style:normal;color:var(--b-text3)}
.fmt-saas .os-search{margin-left:auto;display:flex;align-items:center;gap:26px;height:28px;padding:0 6px 0 10px;border:1px solid var(--b-line);border-radius:var(--os-r-btn);color:var(--b-text3);background:var(--b-ground);white-space:nowrap}
.fmt-saas .os-search kbd{font-size:11px;padding:1px 6px;border:1px solid var(--b-line-2);border-radius:5px;color:var(--b-text2)}
.fmt-saas .os-ex{font-size:11px;color:var(--b-text2);border:1px solid var(--b-line-control);border-radius:var(--os-r-tag);padding:1px 8px;flex:none}

.fmt-saas .os-body{display:grid;grid-template-columns:188px minmax(0,1fr) 320px;min-height:470px}
.fmt-saas .os-rail{display:flex;flex-direction:column;gap:2px;padding:14px 10px;border-right:1px solid var(--b-line)}
.fmt-saas .os-rail-k{margin:10px 8px 6px;font-size:11px;color:var(--b-text3);font-weight:500}
.fmt-saas .os-rail-k:first-child{margin-top:2px}
.fmt-saas .os-nav{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;border-radius:var(--os-r-tag);color:var(--b-text2)}
.fmt-saas .os-nav.is-on{background:var(--b-ground3);color:var(--b-ink)}
.fmt-saas .os-nav em{font-style:normal;font-size:12px;color:var(--b-text3);font-family:var(--font-mono);font-weight:400}
.fmt-saas .os-nav em.os-badge{min-width:20px;text-align:center;padding:0 5px;border-radius:5px;background:rgba(235,199,122,.14);color:var(--os-wait)}

.fmt-saas .os-main{padding:16px 20px 0;min-width:0}
.fmt-saas .os-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.fmt-saas .os-title{margin:0 10px 0 0;font-family:var(--b-display);font-size:17px;font-weight:600;letter-spacing:-.02em}
.fmt-saas .os-chip{padding:3px 10px;border:1px solid var(--b-line);border-radius:var(--os-r-tag);color:var(--b-text2);font-size:12px}
.fmt-saas .os-chip.is-on{border-color:var(--b-line-control);color:var(--b-ink);background:var(--b-ground3)}
.fmt-saas .os-live{margin-left:auto;display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--os-ok)}
.fmt-saas .os-live i{width:7px;height:7px;border-radius:50%;background:var(--os-ok);box-shadow:0 0 0 3px rgba(127,216,176,.16)}

.fmt-saas .os-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));margin:0 0 16px;border:1px solid var(--b-line);border-radius:var(--os-r-card);overflow:hidden}
.fmt-saas .os-stats>div{padding:10px 14px;border-left:1px solid var(--b-line)}
.fmt-saas .os-stats>div:first-child{border-left:0}
.fmt-saas .os-stats dt{font-size:12px;color:var(--b-text3);font-weight:500}
.fmt-saas .os-stats dd{margin:2px 0 0;font-family:var(--b-display);font-size:24px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}

.fmt-saas .os-table{--rh:52px;--cols:76px minmax(0,1.7fr) minmax(0,.7fr) minmax(0,1fr) 132px}
.fmt-saas .os-th,.fmt-saas .os-tr{display:grid;grid-template-columns:var(--cols);gap:12px;align-items:center;padding:0 6px}
.fmt-saas .os-th{height:30px;font-size:12px;color:var(--b-text3);border-bottom:1px solid var(--b-line)}
.fmt-saas .os-rows-clip{height:calc(var(--rh) * 6);overflow:hidden;position:relative}
.fmt-saas .os-rows{will-change:transform}
.fmt-saas .os-tr{height:var(--rh);border-bottom:1px solid var(--b-line);color:var(--b-text2)}
.fmt-saas .os-tr.is-new{background:linear-gradient(90deg,rgba(169,210,255,.07),transparent 70%)}
.fmt-saas .os-id{font-family:var(--font-mono);font-weight:400;font-size:12px;color:var(--b-text3)}
.fmt-saas .os-job{display:flex;flex-direction:column;color:var(--b-ink);min-width:0;white-space:nowrap}
.fmt-saas .os-job small{font-size:12px;color:var(--b-text3);font-weight:400;overflow:hidden;text-overflow:ellipsis}
.fmt-saas .os-tr .os-mono{font-size:12px}
.fmt-saas .os-st{display:inline-block;font-size:12px;font-weight:500;padding:3px 8px;border-radius:var(--os-r-tag);white-space:nowrap;transition:background-color .4s var(--ease),color .4s var(--ease)}
.fmt-saas .st-ok{color:var(--os-ok);background:rgba(127,216,176,.12)}
.fmt-saas .st-wait{color:var(--os-wait);background:rgba(235,199,122,.13)}
.fmt-saas .st-go{color:var(--b-accent);background:rgba(169,210,255,.12)}
.fmt-saas .st-late{color:var(--os-late);background:rgba(244,160,149,.12)}
.fmt-saas .st-q{color:var(--b-text2);background:rgba(186,202,224,.08)}
.fmt-saas .st-done{color:var(--b-text3);background:transparent;box-shadow:inset 0 0 0 1px var(--b-line-2)}

.fmt-saas .os-side{display:flex;flex-direction:column;gap:12px;padding:14px;border-left:1px solid var(--b-line);background:rgba(10,13,18,.35)}
.fmt-saas .os-card{border:1px solid var(--b-line);border-radius:var(--os-r-card);background:var(--b-ground2);padding:12px}
.fmt-saas .os-card-k{display:flex;justify-content:space-between;gap:8px;margin:0 0 10px;font-size:12px;color:var(--b-text3)}
.fmt-saas .os-card-k span{font-family:var(--font-mono);font-weight:400}
.fmt-saas .os-map{padding-bottom:10px}
.fmt-saas .os-map-svg{display:block;width:100%;height:132px;border-radius:7px;background:var(--b-ground)}
.fmt-saas .os-streets path{stroke:rgba(186,202,224,.12);stroke-width:1}
.fmt-saas .os-streets .os-street-b{stroke:rgba(186,202,224,.07);stroke-width:6}
.fmt-saas .os-route{fill:none;stroke:var(--b-accent);stroke-width:2;stroke-linejoin:round;opacity:.9}
.fmt-saas .os-route-2{stroke:rgba(169,210,255,.45);stroke-dasharray:3 4}
.fmt-saas .os-depot{fill:var(--b-ground3);stroke:rgba(186,202,224,.4)}
.fmt-saas .os-site{fill:var(--b-ground);stroke:var(--b-ink);stroke-width:1.5}
.fmt-saas .os-site-late{stroke:var(--os-late)}
.fmt-saas .os-van circle{fill:var(--b-accent)}
.fmt-saas .os-van .os-van-halo{fill:rgba(169,210,255,.18)}
.fmt-saas .os-eta{display:flex;justify-content:space-between;margin:10px 0 0;font-size:12px;color:var(--b-text2)}
.fmt-saas .os-eta b{color:var(--b-ink);font-weight:400}

.fmt-saas .os-appr{position:relative}
.fmt-saas .os-appr-in{transition:opacity .35s var(--ease)}
.fmt-saas .os-appr-t{margin:0;font-size:14px;font-weight:600}
.fmt-saas .os-appr-m{margin:2px 0 0;font-size:12px;color:var(--b-text3);font-weight:400}
.fmt-saas .os-amt{margin:8px 0 10px;font-size:18px;color:var(--b-ink)}
.fmt-saas .os-chain{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:6px;font-size:12px;color:var(--b-text3)}
.fmt-saas .os-chain li{display:flex;align-items:center;gap:8px}
.fmt-saas .os-chain i{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--b-line-control);flex:none;position:relative;transition:background-color .3s var(--ease),border-color .3s var(--ease)}
.fmt-saas .os-chain .is-done{color:var(--b-text2)}
.fmt-saas .os-chain .is-done i{background:var(--os-ok);border-color:var(--os-ok)}
.fmt-saas .os-chain .is-done i::after{content:"";position:absolute;left:3.5px;top:1.5px;width:3px;height:6px;border:solid var(--b-ground);border-width:0 1.6px 1.6px 0;transform:rotate(45deg)}
.fmt-saas .os-chain .is-now{color:var(--b-ink)}
.fmt-saas .os-chain .is-now i{border-color:var(--os-wait);box-shadow:0 0 0 3px rgba(235,199,122,.14)}
.fmt-saas .os-appr-acts{display:flex;gap:8px}
.fmt-saas .os-btn{flex:1;display:inline-flex;align-items:center;justify-content:center;height:32px;border-radius:var(--os-r-btn);border:1px solid var(--b-line-control);color:var(--b-ink);font-size:13px;transition:background-color .2s var(--ease),transform .12s var(--ease),color .2s var(--ease)}
.fmt-saas .os-btn-go{background:var(--b-accent);border-color:var(--b-accent);color:var(--b-on-accent)}
.fmt-saas .os-btn-go.is-hover{background:#C4E0FF}
.fmt-saas .os-btn-go.is-press{transform:scale(.96)}
.fmt-saas .os-btn-go.is-done{background:rgba(127,216,176,.16);border-color:transparent;color:var(--os-ok)}
.fmt-saas .os-stamp{margin:10px 0 0;font-size:12px;color:var(--os-ok);opacity:0;transform:translateY(4px);transition:opacity .35s var(--ease),transform .35s var(--ease)}
.fmt-saas .os-appr.is-approved .os-stamp{opacity:1;transform:none}

.fmt-saas .os-cursor{position:absolute;left:0;top:0;z-index:5;width:20px;height:24px;pointer-events:none;opacity:0;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.fmt-saas .os-cursor path{fill:var(--b-ink);stroke:var(--b-ground);stroke-width:1.4;stroke-linejoin:round}

/* ---------- proof: four example figures on hairlines, no logos ---------- */
.fmt-saas .os-proof{padding:clamp(40px,5vw,72px) 0}
.fmt-saas .os-proof-l{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--b-line)}
.fmt-saas .os-proof-l li{display:grid;gap:6px;padding:24px 24px 0;border-left:1px solid var(--b-line)}
.fmt-saas .os-proof-l li:first-child{border-left:0;padding-left:0}
.fmt-saas .os-proof-l b{font-family:var(--b-display);font-size:clamp(34px,3.4vw,50px);font-weight:600;letter-spacing:-.045em;line-height:1;font-variant-numeric:tabular-nums}
.fmt-saas .os-proof-l li>span{font-size:15px;color:var(--b-text2);font-weight:400}
.fmt-saas .os-proof-n{display:flex;align-items:center;gap:10px;margin:28px 0 0;font-size:13px;color:var(--b-text3);font-weight:400}

/* ---------- product: three cells, asymmetric, each with a vignette ---------- */
.fmt-saas .os-product{padding:clamp(48px,6vw,96px) 0 clamp(56px,7vw,110px)}
.fmt-saas .os-bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.fmt-saas .os-cell{position:relative;display:grid;gap:28px;align-content:space-between;padding:clamp(22px,2.6vw,36px);border:1px solid var(--b-line);border-radius:var(--os-r-win);background:var(--b-ground2);overflow:hidden;isolation:isolate}
.fmt-saas .os-cell-dispatch{grid-column:1 / span 7;background:radial-gradient(80% 70% at 100% 100%,rgba(169,210,255,.08),transparent 70%),var(--b-ground2)}
.fmt-saas .os-cell-appr{grid-column:8 / span 5}
.fmt-saas .os-cell-sched{grid-column:1 / -1;grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:center;gap:clamp(24px,4vw,64px);
  background:linear-gradient(120deg,var(--b-ground2) 30%,#111A26 100%)}
.fmt-saas .os-cell-copy{display:grid;gap:10px;align-content:start}
.fmt-saas .os-cell-k{margin:0;font-size:14px;font-weight:500;color:var(--b-accent)}
.fmt-saas .os-vig{position:relative;border:1px solid var(--b-line);border-radius:var(--os-r-card);background:var(--b-ground);padding:16px;font-size:13px;color:var(--b-text2)}
.fmt-saas .os-vig-ex{position:absolute;right:12px;bottom:12px}

/* dispatch vignette */
.fmt-saas .os-vig-map{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:center;padding-bottom:44px}
.fmt-saas .os-vm-h{margin:0 0 10px;color:var(--b-ink);font-weight:600}
.fmt-saas .os-vm-r{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;margin:0;padding:8px 10px;border-radius:var(--os-r-tag);transition:background-color .5s var(--ease),box-shadow .5s var(--ease)}
.fmt-saas .os-vm-r b{font-weight:400;color:var(--b-ink)}
.fmt-saas .os-vm-r.is-pick{background:rgba(169,210,255,.08);box-shadow:inset 0 0 0 1px rgba(169,210,255,.3);color:var(--b-ink)}
.fmt-saas .os-vm-sent{display:flex;align-items:center;gap:8px;margin:10px 0 0;color:var(--os-ok);transition:opacity .4s var(--ease) 1.4s,transform .4s var(--ease) 1.4s}
.fmt-saas .os-vm-sent i{width:7px;height:7px;border-radius:50%;background:var(--os-ok)}
.fmt-saas .os-vm-svg{display:block;width:100%;height:auto}
.fmt-saas .os-vm-grid{stroke:rgba(186,202,224,.12);fill:none}
.fmt-saas .os-vm-path{fill:none;stroke:var(--b-accent);stroke-width:2.5;stroke-linejoin:round;stroke-dasharray:420;stroke-dashoffset:0;transition:stroke-dashoffset 1.4s var(--ease) .2s}
.fmt-saas .os-vm-a{fill:var(--b-accent)}
.fmt-saas .os-vm-b{fill:var(--b-ground);stroke:var(--b-ink);stroke-width:2}
.fmt-saas .os-vm-ring{fill:none;stroke:var(--b-accent);stroke-width:1.5;transform-box:fill-box;transform-origin:center;opacity:0}
.fmt-saas .os-vm-o{fill:var(--b-ground3);stroke:rgba(186,202,224,.4)}

/* approvals vignette */
.fmt-saas .os-vig-chain{padding:18px 18px 48px}
.fmt-saas .os-vc{list-style:none;margin:0;padding:0;display:grid;gap:0}
.fmt-saas .os-vc li{position:relative;display:grid;grid-template-columns:18px 1fr auto;gap:12px;align-items:center;padding:10px 0}
.fmt-saas .os-vc li+li::before{content:"";position:absolute;left:8px;top:-10px;height:20px;width:2px;background:var(--os-ok);transform-origin:top;transition:transform .35s var(--ease)}
.fmt-saas .os-vc i{width:18px;height:18px;border-radius:50%;background:var(--os-ok);position:relative;transition:background-color .3s var(--ease),transform .3s var(--ease)}
.fmt-saas .os-vc i::after{content:"";position:absolute;left:6px;top:3px;width:4px;height:8px;border:solid var(--b-ground);border-width:0 2px 2px 0;transform:rotate(45deg)}
.fmt-saas .os-vc span{color:var(--b-ink);font-weight:500}
.fmt-saas .os-vc small{font-size:12px;color:var(--b-text3);font-family:var(--font-mono);font-weight:400}

/* schedule vignette */
.fmt-saas .os-vig-week{padding:16px 16px 48px}
.fmt-saas .os-vw{display:grid;grid-template-columns:52px repeat(5,minmax(0,1fr));gap:6px;align-items:stretch}
.fmt-saas .os-vw-d{font-size:12px;color:var(--b-text3);padding-bottom:2px}
.fmt-saas .os-vw-n{font-size:12px;color:var(--b-text2);align-self:center}
.fmt-saas .os-vw-c{position:relative;min-height:34px;border-radius:var(--os-r-tag);background:rgba(186,202,224,.04)}
.fmt-saas .os-vw-c i{position:absolute;inset:3px;border-radius:5px;font-style:normal;font-size:11px;line-height:1.15;display:flex;align-items:center;padding:0 6px}
.fmt-saas .os-vw-c .s1{background:rgba(169,210,255,.22)}
.fmt-saas .os-vw-c .s2{background:rgba(169,210,255,.1);box-shadow:inset 0 0 0 1px rgba(169,210,255,.22)}
.fmt-saas .os-vw-gap .s-off{background:repeating-linear-gradient(135deg,rgba(244,160,149,.14) 0 5px,transparent 5px 10px);color:var(--os-late);box-shadow:inset 0 0 0 1px rgba(244,160,149,.35);transition:opacity .4s var(--ease) 1.3s}
.fmt-saas .os-vw-gap .s-fill{background:#1B2A3D;box-shadow:inset 0 0 0 1px rgba(127,216,176,.5);color:var(--b-ink);transition:transform .7s var(--ease) 1.1s,opacity .5s var(--ease) 1.1s}
.fmt-saas .os-vw-gap .s-off{opacity:0}
.fmt-saas .os-vw-from i{transition:opacity .5s var(--ease) 1.1s;opacity:.35}

/* the vignettes rest finished; only on a page that reveals do they start one step back */
.fmt-saas.fmt-reveal .os-cell:not(.is-in) .os-vm-path,.fmt-reveal .fmt-saas .os-cell:not(.is-in) .os-vm-path{stroke-dashoffset:420}
.fmt-reveal .fmt-saas .os-cell:not(.is-in) .os-vm-r.is-pick{background:transparent;box-shadow:none;color:var(--b-text2)}
.fmt-reveal .fmt-saas .os-cell:not(.is-in) .os-vm-sent{opacity:0;transform:translateY(4px)}
.fmt-reveal .fmt-saas .os-cell:not(.is-in) .os-vc li:nth-child(n+3) i{background:var(--b-ground3);transform:scale(.8)}
.fmt-reveal .fmt-saas .os-cell:not(.is-in) .os-vc li:nth-child(n+3)::before{transform:scaleY(0)}
.fmt-reveal .fmt-saas .os-cell:not(.is-in) .os-vw-gap .s-off{opacity:1;transition-delay:0s}
.fmt-reveal .fmt-saas .os-cell:not(.is-in) .os-vw-gap .s-fill{opacity:0;transform:translateY(-120%);transition-delay:0s}
.fmt-reveal .fmt-saas .os-cell:not(.is-in) .os-vw-from i{opacity:1;transition-delay:0s}
.fmt-saas .os-vc li:nth-child(3) i,.fmt-saas .os-vc li:nth-child(3)::before{transition-delay:.7s}
.fmt-saas .os-vc li:nth-child(4) i,.fmt-saas .os-vc li:nth-child(4)::before{transition-delay:1.2s}
@media (prefers-reduced-motion:no-preference){
  .fmt-saas .os-cell.is-in .os-vm-ring{animation:os-ring 2.4s var(--ease) 1.6s infinite}
}
@keyframes os-ring{0%{opacity:.9;transform:scale(1)}100%{opacity:0;transform:scale(3.2)}}

/* ---------- teams: tabs on the left, the photograph on the right ---------- */
.fmt-saas .os-teams{padding:clamp(64px,8vw,120px) 0;border-top:1px solid var(--b-line)}
.fmt-saas .os-teams-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:center}
.fmt-saas .os-tabs{display:grid;gap:2px;margin:clamp(24px,3vw,40px) 0 20px;border-left:1px solid var(--b-line)}
.fmt-saas .os-tabs [role="tab"]{appearance:none;background:none;border:0;text-align:left;font:inherit;font-family:var(--b-display);font-size:clamp(18px,1.6vw,22px);font-weight:600;letter-spacing:-.025em;
  color:var(--b-text3);padding:10px 0 10px 20px;margin-left:-1px;border-left:2px solid transparent;cursor:pointer;transition:color .2s var(--ease),border-color .3s var(--ease)}
.fmt-saas .os-tabs [role="tab"]:hover{color:var(--b-text2)}
.fmt-saas .os-tabs [role="tab"][aria-selected="true"]{color:var(--b-ink);border-left-color:var(--b-accent)}
.fmt-saas .os-tabs [role="tab"]:focus-visible{outline:2px solid var(--b-accent);outline-offset:2px}
.fmt-saas .os-tp{margin:0;font-size:17px;line-height:1.55;color:var(--b-text2);font-weight:400;max-width:42ch;min-height:5.2em}
.fmt-saas .os-honest{margin-top:20px;font-size:13px;color:var(--b-text3)}
.fmt-saas .os-panels{position:relative;aspect-ratio:4/3;border-radius:var(--os-r-win);overflow:hidden;background:var(--b-ground2);border:1px solid var(--b-line)}
.fmt-saas .os-panel{position:absolute;inset:0}
.fmt-saas .os-panel picture,.fmt-saas .os-panel img{display:block;width:100%;height:100%;object-fit:cover}
.fmt-saas .os-panel img.os-pos-face{object-position:50% 28%}
@media (prefers-reduced-motion:no-preference){
  .fmt-saas .os-panel.is-show{animation:os-fade .6s var(--ease) both}
  .fmt-saas .os-tp.is-show{animation:os-fade .5s var(--ease) both}
}
@keyframes os-fade{from{opacity:0;transform:scale(1.015)}to{opacity:1;transform:none}}

/* ---------- pricing ---------- */
.fmt-saas .os-pricing{padding:clamp(64px,8vw,120px) 0;border-top:1px solid var(--b-line)}
.fmt-saas .os-plans{display:grid;grid-template-columns:1fr 1.08fr 1fr;gap:16px;align-items:stretch}
.fmt-saas .os-plan{position:relative;display:flex;flex-direction:column;gap:6px;padding:clamp(22px,2.4vw,32px);border:1px solid var(--b-line);border-radius:var(--os-r-win);background:var(--b-ground2)}
.fmt-saas .os-plan.is-pick{background:linear-gradient(180deg,#131C28,var(--b-ground2) 60%);border-color:rgba(169,210,255,.36);box-shadow:0 30px 80px -50px rgba(169,210,255,.35)}
.fmt-saas .os-plan-tag{position:absolute;top:clamp(22px,2.4vw,32px);right:clamp(22px,2.4vw,32px);margin:0;padding:3px 9px;font-size:12px;color:var(--b-accent);font-weight:500;border:1px solid rgba(169,210,255,.36);border-radius:var(--os-r-tag)}
.fmt-saas .os-plan-for{margin:0;font-size:15px;color:var(--b-text2);font-weight:400}
.fmt-saas .os-price{display:flex;align-items:baseline;gap:10px;margin:18px 0 18px;padding-bottom:18px;border-bottom:1px solid var(--b-line)}
.fmt-saas .os-price b{font-family:var(--b-display);font-size:clamp(34px,3vw,44px);font-weight:600;letter-spacing:-.045em;line-height:1}
.fmt-saas .os-price span{font-size:14px;color:var(--b-text3);font-weight:400}
.fmt-saas .os-feat{list-style:none;margin:0 0 24px;padding:0;display:grid;gap:10px;font-size:15px;font-weight:400;color:var(--b-text2)}
.fmt-saas .os-feat li{display:flex;gap:10px;align-items:baseline}
.fmt-saas .os-feat li::before{content:"";flex:none;width:9px;height:5px;border:solid var(--b-accent);border-width:0 0 1.6px 1.6px;transform:translateY(-3px) rotate(-45deg)}
.fmt-saas .os-plan-a{margin-top:auto;width:100%}

/* ---------- questions ---------- */
.fmt-saas .os-faq{padding:clamp(64px,8vw,120px) 0;border-top:1px solid var(--b-line)}
.fmt-saas .os-faq-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(28px,5vw,80px);align-items:start}
.fmt-saas .os-faq-fig{margin-top:clamp(24px,3vw,40px);border:1px solid var(--b-line)}
.fmt-saas .os-faq-list details{border-top:1px solid var(--b-line)}
.fmt-saas .os-faq-list details:last-child{border-bottom:1px solid var(--b-line)}
.fmt-saas .os-faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;cursor:pointer;list-style:none;
  font-family:var(--b-display);font-size:clamp(17px,1.4vw,20px);font-weight:600;letter-spacing:-.02em}
.fmt-saas .os-faq-list summary::-webkit-details-marker{display:none}
.fmt-saas .os-faq-list summary::after{content:"";flex:none;width:10px;height:10px;border:solid var(--b-text2);border-width:0 1.6px 1.6px 0;transform:translateY(-3px) rotate(45deg);transition:transform .3s var(--ease)}
.fmt-saas .os-faq-list details[open] summary::after{transform:translateY(2px) rotate(-135deg)}
.fmt-saas .os-faq-list summary:focus-visible{outline:2px solid var(--b-accent);outline-offset:4px;border-radius:4px}
.fmt-saas .os-faq-b p{margin:0 0 22px;max-width:58ch;font-size:16px;line-height:1.6;color:var(--b-text2);font-weight:400}

/* ---------- demo: the assistant books the call ---------- */
.fmt-saas .os-demo{padding:clamp(64px,8vw,120px) 0 clamp(72px,9vw,140px);border-top:1px solid var(--b-line)}
.fmt-saas .os-demo-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(28px,5vw,80px);align-items:center}
.fmt-saas .os-demo-copy .sub{margin-top:18px}
.fmt-saas .os-chat.chat{width:100%;max-width:560px;border-radius:var(--os-r-win);padding:18px;--b-surface:rgba(186,202,224,.07);--line:rgba(186,202,224,.14);
  --text-2:var(--b-text2);--text-3:var(--b-text3);--ink:var(--b-ink)}
.fmt-saas .os-chat .chat-log{min-height:0}
.fmt-saas .os-chat .bub{font-weight:400}
.fmt-saas .os-chat .bub.out{background:var(--b-ground3);color:var(--b-ink);border:1px solid rgba(169,210,255,.28)}
.fmt-saas .os-chat .booked{align-self:flex-end;color:#0A0D12;background:var(--os-ok)}
.fmt-saas .os-slots{margin-top:6px;padding-top:14px;border-top:1px solid var(--b-line)}
.fmt-saas .os-slots-k{display:flex;justify-content:space-between;align-items:center;margin:0 0 10px;font-size:13px;color:var(--b-text2);font-weight:400}
.fmt-saas .os-slot-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.fmt-saas .os-slot{appearance:none;height:40px;border-radius:var(--os-r-btn);border:1px solid var(--b-line-control);background:transparent;color:var(--b-ink);
  font:400 14px/1 var(--font-mono);cursor:pointer;transition:background-color .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .12s var(--ease)}
.fmt-saas .os-slot:hover{border-color:var(--b-accent);background:rgba(169,210,255,.07)}
.fmt-saas .os-slot:active{transform:scale(.98)}
.fmt-saas .os-slot:focus-visible{outline:2px solid var(--b-accent);outline-offset:2px}
.fmt-saas .os-slot.is-booked{background:var(--b-accent);border-color:var(--b-accent);color:var(--b-on-accent)}
.fmt-saas .os-slot[aria-disabled="true"]:not(.is-booked){opacity:.55;cursor:default}
.fmt-saas .os-demo-fig{aspect-ratio:4/5;border:1px solid var(--b-line)}
.fmt-saas .os-demo-fig img{object-position:40% 50%}

/* ---------- footer ---------- */
.fmt-saas .os-foot{padding:clamp(40px,5vw,64px) 0 64px;background:var(--b-ground);border-top-color:var(--b-line)}
.fmt-saas .os-foot-top{display:flex;align-items:flex-start;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-bottom:32px;margin-bottom:24px;border-bottom:1px solid var(--b-line)}
.fmt-saas .os-foot-nav{display:flex;gap:clamp(32px,6vw,96px)}
.fmt-saas .os-foot-nav div{display:grid;gap:10px;align-content:start}
.fmt-saas .os-foot-nav p{margin:0 0 4px;font-size:13px;color:var(--b-text3);font-weight:500}
.fmt-saas .os-foot-nav a{font-size:15px;color:var(--b-text2);text-decoration:none;font-weight:400}
.fmt-saas .os-foot-nav a:hover{color:var(--b-ink)}
.fmt-saas .os-foot .f-foot-in p{color:var(--b-text3);font-weight:400}

/* ---------- widths ---------- */
@media (max-width:1180px){
  .fmt-saas .os-body{grid-template-columns:minmax(0,1fr) 290px}
  .fmt-saas .os-rail{display:none}
}
@media (max-width:960px){
  .fmt-saas .os-hero-top{grid-template-columns:1fr;gap:20px}
  .fmt-saas .os-body{grid-template-columns:1fr}
  .fmt-saas .os-side{border-left:0;border-top:1px solid var(--b-line);display:grid;grid-template-columns:1fr 1fr;align-items:start}
  .fmt-saas .os-cell-dispatch,.fmt-saas .os-cell-appr{grid-column:1 / -1}
  .fmt-saas .os-cell-sched{grid-template-columns:minmax(0,1fr)}
  .fmt-saas .os-teams-grid,.fmt-saas .os-faq-grid,.fmt-saas .os-demo-grid{grid-template-columns:minmax(0,1fr)}
  .fmt-saas .os-plans{grid-template-columns:1fr;max-width:560px}
  .fmt-saas .os-proof-l{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fmt-saas .os-proof-l li:nth-child(3){border-left:0;padding-left:0}
  .fmt-saas .os-proof-l li:nth-child(n+3){border-top:1px solid var(--b-line);margin-top:24px}
  .fmt-saas .os-demo-fig{aspect-ratio:3/2}
}
@media (max-width:760px){
  .fmt-saas .os-hero{padding-top:32px}
  .fmt-saas main .h1{font-size:clamp(40px,11.6vw,56px)}
  .fmt-saas main .lead{font-size:17px}
  .fmt-saas .os-ctas .pill{flex:1 1 auto}
  .fmt-saas .os-app{margin-right:calc(var(--gutter) * -1)}
  .fmt-saas .os-win{border-right:0;border-top-right-radius:0;border-bottom-right-radius:0}
  .fmt-saas .os-search,.fmt-saas .os-crumb .os-hide{display:none}
  .fmt-saas .os-main{padding:14px 14px 0}
  .fmt-saas .os-head .os-chip:not(.is-on){display:none}
  .fmt-saas .os-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fmt-saas .os-stats>div:nth-child(3){border-left:0}
  .fmt-saas .os-stats>div:nth-child(n+3){border-top:1px solid var(--b-line)}
  .fmt-saas .os-stats dd{font-size:21px}
  .fmt-saas .os-table{--rh:50px;--cols:minmax(0,1fr) auto}
  .fmt-saas .os-th span:nth-child(n+2):not(:last-child),.fmt-saas .os-tr>span:nth-child(n+3):not(:last-child),.fmt-saas .os-th span:first-child,.fmt-saas .os-tr>.os-id{display:none}
  .fmt-saas .os-th::before{content:"Job"}
  .fmt-saas .os-rows-clip{height:calc(var(--rh) * 5)}
  .fmt-saas .os-side{grid-template-columns:1fr}
  .fmt-saas .os-map{display:none}
  .fmt-saas .os-bento{gap:12px}
  .fmt-saas .os-vig-map{grid-template-columns:1fr}
  .fmt-saas .os-vm-svg{max-height:150px}
  .fmt-saas .os-vw{grid-template-columns:40px repeat(5,minmax(0,1fr));gap:4px}
  .fmt-saas .os-vw-c{min-height:40px}
  .fmt-saas .os-vw-c i{font-size:10px;padding:0 3px;overflow:hidden}
  .fmt-saas .os-tabs{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;scrollbar-width:none;border-left:0;border-bottom:1px solid var(--b-line);gap:18px;margin-right:calc(var(--gutter) * -1);padding-right:var(--gutter)}
  .fmt-saas .os-tabs::-webkit-scrollbar{display:none}
  .fmt-saas .os-tabs [role="tab"]{font-size:16px;padding:10px 0;margin:0 0 -1px;border-left:0;border-bottom:2px solid transparent}
  .fmt-saas .os-tabs [role="tab"][aria-selected="true"]{border-bottom-color:var(--b-accent)}
  .fmt-saas .os-tp{min-height:0}
  .fmt-saas .os-slot{font-size:13px}
  .fmt-saas .os-foot-nav{gap:48px}
}

/* ---------- reduced motion: shared.js already stops reveal and replay; this stills the rest ---------- */
@media (prefers-reduced-motion:reduce){
  .fmt-saas .os-cursor{display:none}
  .fmt-saas .os-vm-path,.fmt-saas .os-vm-sent,.fmt-saas .os-vc i,.fmt-saas .os-vc li::before,.fmt-saas .os-vw-c i,.fmt-saas .os-st,.fmt-saas .os-stamp,.fmt-saas .pill,.fmt-saas .os-slot,.fmt-saas .os-faq-list summary::after{transition:none}
}