/* ===== v4: big feedback round ===== */

/* accents: every .tone is brand blue */
.tone,.band-dark .tone{color:var(--blue)}
.band-dark .tone{color:var(--blue-dark)}

/* ---- hero ---- */
.hero__dims{position:absolute;inset:0;pointer-events:none}
.dim{position:absolute;left:0;top:0;opacity:0;font-size:11px;color:var(--blue);background:var(--paper);padding:2px 6px;border-radius:4px;white-space:nowrap}
.plabel::before{width:32px}
.finish{--fi:0;position:absolute;right:calc(50% - var(--wrap)/2);top:118px;display:flex;padding:4px;border-radius:999px;background:rgba(255,255,255,.8);backdrop-filter:blur(12px);box-shadow:var(--sh-sm),0 0 0 1px var(--line) inset;opacity:0;transform:translateY(-6px);transition:opacity .5s var(--ease),transform .5s var(--ease);z-index:3}
.finish.is-in{opacity:1;transform:none}
.finish button{position:relative;z-index:1;display:flex;align-items:center;gap:8px;height:32px;padding:0 14px 0 10px;border-radius:999px;font-size:13px;font-weight:500;color:var(--muted);transition:color .25s var(--ease)}
.finish button[aria-checked=true]{color:var(--ink)}
.finish__pill{position:absolute;top:4px;left:4px;height:32px;width:calc(50% - 4px);border-radius:999px;background:var(--surface);box-shadow:var(--sh-sm),0 0 0 1px var(--line) inset;transform:translateX(calc(var(--fi) * 100%));transition:transform .45s var(--ease)}
.finish__sw{width:14px;height:14px;border-radius:50%;display:block}
.finish__sw--a{background:conic-gradient(#1E2125 0 75%,#0058F6 0)}
.finish__sw--b{background:conic-gradient(from 20deg,#E4E7EA,#9CA2A8,#E4E7EA 75%,#C99A3A 0)}
.hero__canvas{cursor:default}

/* reel dialog */
.reel{border:0;padding:0;background:transparent;max-width:none;max-height:none;width:min(1120px,calc(100vw - 96px));overflow:visible}
.reel::backdrop{background:rgba(247,247,245,.72);backdrop-filter:blur(14px)}
.reel[open]{animation:reelIn .45s var(--ease)}
@keyframes reelIn{from{opacity:0;transform:translateY(16px) scale(.98)}}
.reel__in{background:var(--surface);border-radius:var(--r-panel);box-shadow:var(--sh),0 0 0 1px var(--line);padding:18px;display:grid;gap:14px}
.reel__head{display:flex;align-items:center;justify-content:space-between;padding:2px 6px}
.reel__head .mono{display:flex;align-items:center;gap:10px;color:var(--ink)}
.reel__dot{width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px var(--blue-wash)}
.reel__x{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;box-shadow:0 0 0 1px var(--line) inset;transition:background-color .15s}
.reel__x:hover{background:var(--paper)}
.reel__stage{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--paper);box-shadow:0 0 0 1px var(--line)}
.reel__stage img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;opacity:0}
.reel__stage img.is-on{opacity:1}
.reel__bar{height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.reel__bar i{display:block;height:100%;background:var(--blue);transform-origin:0 50%;transform:scaleX(0);transition:transform .45s linear}
.reel__cases{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}
.reel__cases a{display:grid;gap:6px;font-size:12px;font-weight:500;color:var(--muted);transition:color .2s}
.reel__cases img{aspect-ratio:16/10;width:100%;object-fit:cover;object-position:top;border-radius:8px;box-shadow:0 0 0 1px var(--line);transition:box-shadow .2s,transform .3s var(--ease)}
.reel__cases a:hover img{transform:translateY(-2px)}
.reel__cases a.is-on{color:var(--ink)}
.reel__cases a.is-on img{box-shadow:0 0 0 2px var(--blue)}
html.reel-open{overflow:hidden}

/* nav logo: pieces part along the kerf, brand piece lifts */
.nav__logo g[data-part=symbol] path{transition:transform .5s cubic-bezier(.2,0,0,1),fill .3s;transform-box:fill-box}
.nav__logo:hover g[data-part=symbol] path:nth-child(1){transform:translate(-12px,-12px)}
.nav__logo:hover g[data-part=symbol] path:nth-child(2){transform:translate(12px,12px)}
.nav__logo:hover g[data-part=symbol] path:nth-child(3){transform:translate(-20px,16px)}
.nav__logo g[data-part=symbol] path:nth-child(1),.nav__logo g[data-part=symbol] path:nth-child(2){fill:var(--ink)}
.nav__logo:hover g[data-part=symbol] path:nth-child(2){fill:var(--blue)}
.nav__logo svg{overflow:visible}
.nav__logo g[id=bfsLockup]>g:last-child{transition:transform .5s cubic-bezier(.2,0,0,1)}


.plabel--b::before{left:0;top:-34px;width:1px;height:28px}
.plabel--b span{left:0;top:14px;transform:translateX(-50%)}
.reel{width:min(1120px,calc(100vw - 96px),calc((100vh - 230px) * 16 / 9 + 36px))}
.reel__cases span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ---- spec strip v4 ---- */
.spec__c{font-size:13.5px}
.stars5{display:flex;align-items:center;gap:10px}
.stars5__s{display:inline-flex;gap:2px}
.stars5__s svg{width:15px;height:15px;fill:var(--ink)}
.vquote{position:relative;overflow:hidden;display:block;min-height:176px;padding:0;background:var(--ink);isolation:isolate}
.vquote__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transform:scale(1.02);transition:transform .6s var(--ease)}
.vquote:hover .vquote__vid{transform:scale(1.06)}
.vquote__shade{position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(14,15,17,.15) 0%,rgba(14,15,17,.25) 40%,rgba(14,15,17,.86) 100%)}
.vquote__play{position:absolute;left:18px;top:18px;width:40px;height:40px;transition:transform .35s var(--ease)}
.vquote:hover .vquote__play{transform:scale(1.08)}
.vquote__len{position:absolute;right:18px;top:26px;color:rgba(255,255,255,.85);font-size:11px}
.vquote__txt{position:absolute;left:18px;right:18px;bottom:16px;display:flex;flex-direction:column;gap:6px}
.vquote__q{font-size:17px}
.vquote__who{color:rgba(255,255,255,.7);font-size:11px}
.clients__grid{list-style:none;padding:0;margin:0;flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.clients__grid li{height:64px;display:grid;place-items:center;border-left:1px solid var(--line);position:relative}
.clients__grid a{display:grid;place-items:center;width:100%;height:100%;transition:opacity .45s var(--ease),filter .45s var(--ease),transform .45s var(--ease)}
.clients__grid a.is-out{opacity:0;filter:blur(8px);transform:translateY(4px)}
.clients__grid img{display:block;width:auto;max-width:150px;filter:brightness(0);opacity:.6;transition:opacity .2s var(--ease)}
.clients__grid a:hover img{opacity:1}
@media (prefers-reduced-motion:reduce){.clients__grid a,.vquote__vid{transition:none}}

/* ---- problem v4: immersive pinned field ---- */
.problem{padding-top:150px}
.problem::before{display:none}
.pscene{position:relative;height:100vh;min-height:720px;overflow:hidden}
.pscene #p3d{position:absolute;inset:0;width:100%;height:100%;display:block}
.pscene__veil{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,var(--c950) 0,rgba(12,13,14,.82) 26%,rgba(12,13,14,0) 52%),linear-gradient(180deg,var(--c950) 0,rgba(12,13,14,0) 14%,rgba(12,13,14,0) 86%,var(--c950) 100%)}
.pscene__ui{position:relative;height:100%;display:flex;align-items:center;pointer-events:none}
.pscene__copy{position:relative;width:440px;padding-left:28px}
.pscene__step{font-size:11px;color:var(--steel3);margin-bottom:22px}
.pscene__step span:first-child{color:#fff}
.pains{list-style:none;margin:0;padding:0;display:grid;border:0}
.pains .pain{grid-area:1/1;display:block;padding:0;border:0;opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .6s var(--ease)}
.pains .pain.is-on{opacity:1;transform:none}
.pains .pain h3{font-size:36px;line-height:1.1;letter-spacing:-.03em;font-weight:600;color:#fff;margin-bottom:18px}
.pains .pain p{font-size:17px;line-height:1.55;color:var(--steel3);max-width:400px}
.pains .pain p::before{display:none}
.pscene__rail{position:absolute;left:0;top:0;bottom:0;width:2px;background:var(--c700);border-radius:1px;overflow:hidden}
.pscene__rail i{display:block;width:100%;height:100%;background:var(--blue-dark);transform-origin:50% 0;transform:scaleY(0)}
.pscene__tags{list-style:none;margin:0;padding:0;position:absolute;right:40px;bottom:64px;display:grid;justify-items:end}
.pscene__tags li{grid-area:1/1;font-size:11px;letter-spacing:.04em;color:#EDEEEC;padding:8px 12px;border-radius:8px;background:rgba(26,29,32,.7);box-shadow:0 0 0 1px var(--c700) inset;backdrop-filter:blur(8px);opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .5s var(--ease)}
.pscene__tags li.is-on{opacity:1;transform:none}
.pscene__tags li:not([data-s="6"]){color:#F6E3E1;background:linear-gradient(rgba(238,79,66,.13),rgba(238,79,66,.13)),rgba(26,29,32,.72);box-shadow:0 0 0 1px rgba(238,79,66,.42) inset,0 0 18px -6px rgba(238,79,66,.35)}
.pscene.is-resolved .pscene__copy{opacity:0;transition:opacity .5s var(--ease)}
.pscene__copy{transition:opacity .5s var(--ease)}
@media (prefers-reduced-motion:reduce){.pscene{height:auto}.pscene #p3d,.pscene__veil,.pscene__tags,.pscene__rail{display:none}.pains{gap:40px}.pains .pain{grid-area:auto;opacity:1;transform:none}.pscene__ui{padding:60px 0}}
.pscene.is-resolved .pscene__tags{right:50%;transform:translateX(50%)}

/* ---- stack board v4: dark matte blocks, top-down, flat -> lifted ---- */
.tboard__cats{flex-wrap:nowrap}
.tboard__cats button{padding:0 10px}
.tboard__stage{position:relative;height:500px;margin-top:14px;border-radius:var(--r-panel);background:radial-gradient(90% 80% at 50% 45%,#17191C 0,#0C0D0E 75%);box-shadow:0 0 0 1px #202327 inset,var(--sh);perspective:1300px;perspective-origin:50% 30%;overflow:hidden}
.tboard__stage::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent 0 31px,rgba(255,255,255,.035) 31px 32px),repeating-linear-gradient(90deg,transparent 0 31px,rgba(255,255,255,.035) 31px 32px);-webkit-mask:radial-gradient(closest-side,#000,transparent);mask:radial-gradient(closest-side,#000,transparent)}
.tboard__plane{--t:62px;--ts:54px;--td:22px;width:calc(6 * var(--t));height:calc(7 * var(--t));transform:translate3d(0,6px,0) rotateX(16deg);z-index:1}
.tboard__plane::before{display:none}
.tile{transform:translate3d(0,calc(var(--a) * -3px),calc(var(--a) * var(--td)))}
.tile::before{inset:4px;border-radius:12px;background:rgba(0,88,246,.55);filter:blur(14px);opacity:calc(var(--a) * .38);transform:translate3d(0,4px,calc(var(--a) * var(--td) * -1))}
.tile__face{border-radius:11px;background:linear-gradient(160deg,#2A2D31 0,#1B1D20 60%,#16181A 100%);box-shadow:0 0 0 1px #2C3035 inset,0 1px 0 rgba(255,255,255,.06) inset;gap:5px}
.tile__face::after{border-radius:11px;box-shadow:0 0 0 1px rgba(77,141,255,.75),0 0 18px rgba(0,88,246,.35);opacity:calc(var(--a) * .9)}
.tile__face i{width:22px;height:22px;background:color-mix(in srgb,#F2F3F1 calc(var(--a) * 100%),#5E6369)}
.tile__face span{font-size:7.5px;color:color-mix(in srgb,#C9CCCF calc(var(--a) * 100%),#4C5056)}
.tile__s1{background:linear-gradient(#141618,#0B0C0D)}
.tile__s2{background:#0F1113}
.stk__flag{position:sticky;top:76px;z-index:5;height:0;display:flex;justify-content:flex-end;pointer-events:none}
.stk__flag span{display:inline-flex;align-items:center;gap:8px;height:28px;padding:0 12px;border-radius:999px;background:rgba(255,255,255,.82);backdrop-filter:blur(10px);box-shadow:0 0 0 1px var(--line);font:500 11px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink);transform:translateY(12px)}
.stk__flag span i{width:7px;height:7px;border-radius:2px;background:var(--blue)}
.stk__flag b{font-weight:500;color:var(--muted)}

/* ---- services v4 ---- */
.rs{padding-bottom:0}
.rs__front,.rs__cap{width:100%}
.layer__dd{display:inline-flex;align-items:center;gap:8px;margin:-4px 0 18px;padding:5px;border-radius:999px;background:var(--blue-wash);box-shadow:0 0 0 1px rgba(0,88,246,.18) inset}
.layer__ddk{font:500 12px/1 var(--mono);letter-spacing:.04em;text-transform:uppercase;color:#fff;background:var(--blue);padding:7px 11px;border-radius:999px}
.layer__ddp{font:600 14px/1 var(--mono);color:var(--blue)}
.manage{display:grid;grid-template-columns:420px 1fr;gap:64px;align-items:start;padding-top:140px}
.manage__h{font-size:96px;line-height:.95;letter-spacing:-.05em;font-weight:600;margin:14px 0 22px}
.manage__p{font-size:18px;color:var(--muted);max-width:380px}
.manage .handover{grid-column:1/-1;margin-top:8px}
.done{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.done li{display:grid;grid-template-columns:28px 1fr auto 70px;align-items:center;gap:14px;height:62px;border-bottom:1px solid var(--line);transition:background-color .3s var(--ease),padding .4s var(--ease)}
.done li:hover{background:var(--surface);padding:0 12px}
.done b{font-size:18px;font-weight:550;letter-spacing:-.012em}
.done em{font-style:normal;font-size:11px;color:var(--steel);padding:5px 8px;border-radius:6px;box-shadow:0 0 0 1px var(--line) inset}
.done__t{text-align:right;font-size:12px;color:var(--muted)}
.done__ck{width:20px;height:20px;border-radius:6px;box-shadow:0 0 0 1.5px var(--line2) inset;position:relative;transition:background-color .35s var(--ease),box-shadow .35s var(--ease)}
.done__ck::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg) scale(0);transition:transform .35s var(--ease)}
.done li.is-done .done__ck{background:var(--blue);box-shadow:none}
.done li.is-done .done__ck::after{transform:rotate(45deg) scale(1)}
.done li.is-done b{color:var(--ink)}
.done li:not(.is-done) b{color:var(--muted)}
.bigquote figcaption.bq{display:inline-flex;align-items:center;gap:18px;padding:12px 22px 12px 12px;border-radius:999px;background:var(--surface);box-shadow:var(--sh-sm),0 0 0 1px var(--line) inset;text-align:left}
.bq .face{width:52px;height:52px;border-radius:50%;object-fit:cover}
.bq__who{display:flex;flex-direction:column;gap:3px}
.bq__who b{font-size:16px;font-weight:600}
.bq__who em{font-style:normal;font-size:14px;color:var(--muted)}
.bq__logo{padding-left:18px;border-left:1px solid var(--line);opacity:.9}
.bq__num{display:flex;flex-direction:column;gap:3px;padding-left:18px;border-left:1px solid var(--line)}
.bq__num b{font-size:18px;font-weight:600;letter-spacing:-.02em}
.bq__num em{font-style:normal;font-size:10.5px;color:var(--steel)}

/* ---- how it works: one board ---- */
.process.sec{padding:0}
.kb{height:100vh;display:flex;align-items:center}
.kb__in{padding-top:72px}
.kb__head{display:grid;grid-template-columns:1fr 400px;gap:60px;align-items:end;margin-bottom:28px}
.kb__head .eyebrow{margin-bottom:14px}
.process .kb__head .h2--md{font-size:40px;margin:0;max-width:700px}
.kb__head .lede{font-size:16px}
.kb__note{margin-top:14px;color:var(--steel)}
@media (prefers-reduced-motion:reduce){.kb{height:auto;padding:120px 0}}

/* ---- work ledger: a real screen on every row ---- */
.lrow__btn,.lrow--head{grid-template-columns:300px 1fr 300px 110px 32px;gap:28px}
.lrow__btn{padding:24px 0;cursor:pointer}
.lrow--concept .lrow__btn{min-height:0;padding:24px 0;font-size:15px}
.lc--img .mshot{display:block;border-radius:12px;overflow:hidden;box-shadow:0 0 0 1px var(--line);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.lc--img .ms__bar{display:none}
.lc--img .ms__img img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:top}
.lrow__btn:hover .lc--img .mshot{transform:translateY(-3px);box-shadow:0 18px 36px -18px rgba(20,22,24,.35),0 0 0 1px var(--line2)}
.lc--client{gap:6px}
.lc--client>em.mono{font-size:10.5px;color:var(--steel)}
.lc__did{font-size:15px;color:var(--muted);max-width:340px}
.lrow--concept .lc--client b{font-size:20px;color:var(--ink)}
.lc--kpi{display:flex;flex-direction:column;gap:2px}
.lc--kpi b{font-size:44px;line-height:1;letter-spacing:-.04em;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.lc--kpi em{font-style:normal;font-size:14px;color:var(--ink);margin-top:6px}
.lc--kpi small{font-size:13px;color:var(--muted)}
.lrow--concept .lc--kpi b{font-size:30px;color:var(--muted)}
.lrow__in blockquote,.lrow__case{margin-left:328px}
.lrow__in{grid-template-columns:300px 1fr 600px;gap:28px;align-items:start}
.lrow__in--solo{grid-template-columns:300px 1fr 600px;justify-content:stretch}
.lrow__in>*{margin-top:4px}
.lrow__in blockquote,.lrow__case{margin-left:0;grid-column:2}
.lrow__in blockquote{grid-row:1;font-size:24px;line-height:1.2;align-self:start}
.lrow__in .lrow__case{grid-row:2}
.lrow__in--solo .lrow__case{grid-row:1;align-self:start}
.lrow__in .gal{grid-column:3;grid-row:1/3}
.lrow__in .gal .gal__main{grid-column:auto;grid-row:auto}
/* ---- testimonials: header, our video, then their words ---- */
.vhead{margin-bottom:48px}
.vcard{grid-template-columns:1.55fr 1fr;border-radius:28px;background:var(--surface);color:var(--ink);box-shadow:var(--sh),0 0 0 1px var(--line) inset}
.vcard__screen{position:relative;padding:0;background:#000;display:block;overflow:hidden}
.vcard__video{border-radius:0;height:100%;aspect-ratio:16/9;object-fit:cover}
.vcard__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 55%,rgba(0,0,0,.55));pointer-events:none;transition:opacity .3s var(--ease)}
.vcard__play{position:absolute;left:24px;bottom:24px;top:auto;width:auto;height:auto;margin:0;transform:none;border-radius:999px;display:flex;align-items:center;gap:14px;padding:8px 22px 8px 8px;background:rgba(255,255,255,.92);backdrop-filter:blur(12px);box-shadow:0 12px 30px -10px rgba(0,0,0,.45);color:var(--ink);text-align:left;transition:transform .35s var(--ease),box-shadow .35s var(--ease),opacity .25s var(--ease)}
.vcard__play:hover{transform:translateY(-2px);box-shadow:0 18px 36px -12px rgba(0,0,0,.55)}
.vcard__pi{width:48px;height:48px;border-radius:50%;background:var(--blue);display:grid;place-items:center;flex:none;transition:transform .35s var(--ease)}
.vcard__play:hover .vcard__pi{transform:scale(1.06)}
.vcard__pi svg{width:18px;height:18px;fill:#fff;margin:0 0 0 3px}
.vcard__pl{display:flex;flex-direction:column;gap:3px}
.vcard__pl b{font-size:15px;font-weight:600}
.vcard__pl em{font-style:normal;font-size:10.5px;color:var(--muted)}
.vcard__time{right:20px;top:20px;bottom:auto;display:flex;align-items:center;gap:7px;font-size:10px;background:rgba(0,0,0,.45);backdrop-filter:blur(8px)}
.vcard__time i{width:6px;height:6px;border-radius:50%;background:#fff;opacity:.85}
.vcard.is-playing .vcard__shade{opacity:0}
.vcard__copy{padding:44px 44px 36px;justify-content:space-between;gap:20px}
.vcard__copy .mono.vcard__k{font-size:11px;color:var(--steel)}
.vcard__q{font-size:36px;line-height:1.1;letter-spacing:-.03em;font-weight:550;color:var(--muted);margin:0}
.vcard__q b{color:var(--ink);font-weight:600}
.vcard__cap{color:var(--muted);font-size:15px;margin:0}
.vcard__who{border-color:var(--line);margin:0;padding:16px 0 0;border-bottom:0}
.vcard__who .face{width:48px;height:48px;border-radius:50%;object-fit:cover}
.vcard__who em{color:var(--muted)}
.vcard__foot{display:flex;align-items:center;justify-content:space-between;padding-top:16px;border-top:1px solid var(--line)}
.vcard__logo{margin:0;filter:none;opacity:1}
.vcard__num{font-size:13px;color:var(--muted)}
.reviews{padding-top:56px}
.slip blockquote{color:var(--steel);font-weight:450}
.slip blockquote .best{color:var(--ink);font-weight:550}
.slip__num{padding:10px 0;margin:0;border-bottom:0}
.slip__num b{font-size:14px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}
.slip__num span{font-size:12px}
.vcard__num{border:0!important;padding:0!important;margin:0!important}

/* ---- pricing: invoice slips ---- */
.prh{margin-bottom:28px}
.bill{--slip:#fff}
.bill__bar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin-bottom:20px}
.seg{position:relative;display:inline-flex;padding:5px;border-radius:16px;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset}
.seg button{position:relative;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 22px;border-radius:12px;color:var(--muted);transition:color .25s var(--ease)}
.seg button b{font-size:15px;font-weight:600}
.seg button em{font-style:normal;font-size:10px;letter-spacing:.06em;text-transform:uppercase}
.seg button[aria-selected=true]{color:var(--ink)}
.seg__ind{position:absolute;left:5px;top:5px;bottom:5px;width:0;border-radius:12px;background:#fff;box-shadow:0 0 0 1.5px var(--blue),0 6px 16px -8px rgba(0,88,246,.45);will-change:transform}
.fit{display:flex;align-items:center;gap:6px}
.fit__q{font-size:10.5px;color:var(--steel);text-transform:uppercase;letter-spacing:.08em;margin-right:6px}
.fit button{font-size:13px;padding:8px 13px;border-radius:999px;color:var(--muted);box-shadow:0 0 0 1px var(--line) inset;transition:box-shadow .25s var(--ease),color .25s var(--ease)}
.fit button:hover{color:var(--ink);box-shadow:0 0 0 1px var(--line2) inset}
.fit button[aria-pressed=true]{color:var(--ink);box-shadow:0 0 0 1.5px var(--blue) inset}
.bill__panes{display:grid}
.bill__pane{grid-area:1/1;opacity:0;transform:translate3d(0,10px,0);pointer-events:none;transition:opacity .35s var(--ease),transform .5s var(--ease);display:grid;grid-template-columns:1fr 330px;gap:28px;align-items:start}
.bill__pane[data-pane=partner]{display:block}
.bill__pane.is-on{opacity:1;transform:none;pointer-events:auto}
/* the slip */
.rc{position:relative;background:var(--slip);border-radius:14px 14px 6px 6px;padding:22px 26px 20px;box-shadow:0 0 0 1px var(--line) inset,0 1px 0 rgba(0,0,0,.02),0 22px 40px -28px rgba(20,22,24,.28);font-variant-numeric:tabular-nums;transition:box-shadow .3s var(--ease),transform .45s var(--ease)}
.rc::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:8px;background:radial-gradient(circle at 6px 0,var(--slip) 5.5px,transparent 6px) 0 0/12px 8px repeat-x;filter:drop-shadow(0 1px 0 var(--line))}
.rc__head{display:flex;align-items:center;gap:10px;padding-bottom:14px;border-bottom:1px dashed var(--line2)}
.rc__logo{width:20px;height:20px;fill:var(--ink)}
.rc__no{font-size:12px;font-weight:600;color:var(--ink)}
.rc__kind{margin-left:auto;font-size:10.5px;color:var(--steel);text-transform:uppercase;letter-spacing:.06em}
.rc__to{display:flex;justify-content:space-between;font-size:11px;color:var(--steel);padding:12px 0 6px}
.rc__to b{color:var(--ink);font-weight:500}
.rc__lines{border:0;margin:0;padding:0}
.rc__cols,.rl{display:grid;grid-template-columns:44px 1fr 84px 112px;gap:12px;align-items:center}
.rc__cols{font-size:10px;color:var(--steel);text-transform:uppercase;letter-spacing:.08em;padding:8px 12px;border-bottom:1px solid var(--line)}
.rc__cols span:nth-child(n+3),.rl__t,.rl__p{text-align:right}
.rl{position:relative;padding:13px 12px;margin:4px 0;border-radius:10px;cursor:pointer;box-shadow:0 0 0 1px transparent inset;transition:box-shadow .25s var(--ease),background-color .25s var(--ease)}
.rl input{position:absolute;opacity:0;pointer-events:none}
.rl:hover{box-shadow:0 0 0 1px rgba(0,88,246,.35) inset}
.rl.is-sel{box-shadow:0 0 0 1.5px var(--blue) inset}
.rl:has(input:focus-visible){outline:2px solid var(--blue);outline-offset:2px}
.rl__qty{font-size:12px;color:var(--steel)}
.rl__d{display:flex;flex-direction:column;gap:3px}
.rl__d b{font-size:15.5px;font-weight:600;color:var(--ink)}
.rl__d em{font-style:normal;font-size:13px;color:var(--muted);line-height:1.4}
.rl__t{font-size:12px;color:var(--muted)}
.rl__p{font-size:14px;color:var(--ink);font-weight:500}
.rc__perf{position:relative;height:1px;margin:14px -26px;border-top:2px dotted var(--line2)}
.rc__perf::before,.rc__perf::after{content:"";position:absolute;top:-9px;width:16px;height:16px;border-radius:50%;background:var(--paper);box-shadow:0 0 0 1px var(--line) inset}
.rc__perf::before{left:-8px;clip-path:inset(0 0 0 50%)}
.rc__perf::after{right:-8px;clip-path:inset(0 50% 0 0)}
.rc__sum{display:grid;gap:6px;font-size:12.5px;color:var(--muted)}
.rc__sum>div{display:flex;justify-content:space-between}
.rc__sum [hidden]{display:none}
.rc__total{padding-top:10px;margin-top:4px;border-top:1px solid var(--ink);color:var(--ink);align-items:baseline}
.rc__total>span{font-size:12px;text-transform:uppercase;letter-spacing:.06em}
.rc__total b{font-family:var(--sans,inherit);font-size:34px;font-weight:600;letter-spacing:-.03em}
.rc__total b span{font-size:15px;font-weight:500;color:var(--muted);letter-spacing:0}
.rc__note{font-size:10.5px;color:var(--steel);margin:12px 0 0;line-height:1.5}
.rc-side{padding:26px 4px 0;display:flex;flex-direction:column;gap:18px}
.rc-side__k{font-size:10.5px;color:var(--steel);text-transform:uppercase;letter-spacing:.08em;margin:0}
.rc-side__l{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.rc-side__l li{position:relative;padding-left:26px;font-size:15px;color:var(--ink);line-height:1.4}
.rc-side__l li::before{content:"";position:absolute;left:0;top:3px;width:15px;height:15px;border-radius:50%;box-shadow:0 0 0 1.5px var(--blue) inset;background:radial-gradient(circle,var(--blue) 2.5px,transparent 3px)}
.rc-side .btn{align-self:flex-start}
.rc-side__s{font-size:11px;color:var(--muted);margin:0;min-height:2.8em;line-height:1.5}
.rc-row{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.rc--mo{cursor:pointer;display:flex;flex-direction:column}
.rc--mo:hover{box-shadow:0 0 0 1px rgba(0,88,246,.35) inset,0 22px 40px -28px rgba(20,22,24,.28)}
.rc--mo.is-sel{box-shadow:0 0 0 1.5px var(--blue) inset,0 22px 40px -28px rgba(20,22,24,.28)}
.rc--mo.is-sel::after{filter:drop-shadow(0 1.5px 0 var(--blue))}
.rc--mo:focus-visible{outline:2px solid var(--blue);outline-offset:3px}
.rc__t{font-size:24px;font-weight:600;letter-spacing:-.02em;margin:16px 0 10px}
.rc__items{list-style:none;margin:0;padding:0;display:grid;gap:9px;font-size:12.5px;color:var(--muted)}
.rc__items li{display:flex;align-items:baseline;gap:8px}
.rc__items i{flex:1;border-bottom:1px dotted var(--line2);transform:translateY(-3px)}
.rc__items li span:last-child{color:var(--ink)}
.rc--mo .rc__tot{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--ink);padding-top:10px}
.rc--mo .rc__tot span{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink)}
.rc--mo .rc__tot b{font-size:32px;font-weight:600;letter-spacing:-.03em}
.rc--mo .rc__note{min-height:3em}
.rc--mo .rc__cta{margin-top:auto;align-self:flex-start}
.rc-row__foot{margin-top:28px;color:var(--muted)}
@media (prefers-reduced-motion:reduce){.bill__pane{transform:none;transition:opacity .2s}}
.rl{padding:10px 12px;margin:3px 0}.rl__d{gap:1px}.rl__d em{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rc__perf{margin:10px -26px 12px}.rc__total{margin-top:2px;padding-top:8px}
.rc__total b{font-family:var(--f);font-size:32px}.rc__total b span{font:inherit;color:inherit}.rc__total b #sprintFrom{font-size:14px;font-weight:500;color:var(--muted);margin-right:4px}
.rc__head{padding-bottom:12px}.rc__to{padding:10px 0 4px}.rc{padding:20px 26px 18px}
.rc--mo .rc__tot b{font-family:var(--f)}

/* ---- FAQ: next question + typed answers ---- */
.call__hint{display:flex;align-items:center;gap:10px;width:100%;text-align:left;font-size:11px;color:var(--muted);padding:14px 18px;border-top:1px solid var(--line);background:none;cursor:pointer;transition:color .2s var(--ease),background-color .2s var(--ease)}
.call__hint:hover{color:var(--ink);background:rgba(0,88,246,.04)}
.call__hint>span:first-child{text-transform:uppercase;letter-spacing:.08em;flex:none}
.call__nq{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-family:var(--f);font-size:14px;color:var(--ink);text-transform:none;letter-spacing:0}
.kbd{display:inline-grid;place-items:center;width:34px;height:28px;border-radius:7px;background:#fff;box-shadow:0 0 0 1px var(--line2) inset,0 2px 0 var(--line2);transition:transform .15s var(--ease),box-shadow .15s var(--ease)}
.kbd svg{width:15px;height:15px;fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.call__hint:hover .kbd{box-shadow:0 0 0 1.5px var(--blue) inset,0 2px 0 var(--blue)}
.call__hint:active .kbd{transform:translateY(2px);box-shadow:0 0 0 1.5px var(--blue) inset,0 0 0 var(--blue)}
.msg__b.is-typing::after{content:"";display:inline-block;width:7px;height:1.05em;margin-left:2px;vertical-align:-2px;background:var(--blue);animation:caret 1s steps(2) infinite}
@keyframes caret{50%{opacity:0}}

/* ---- direct: x-ray of a real screen ---- */
.xray{margin-top:8px}
.xray__teams{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:18px;margin-bottom:18px}
.xteam{display:inline-flex;align-items:center;gap:10px;padding:10px 16px;border-radius:999px;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset}
.xteam b{font-size:15px;font-weight:600}
.xteam em{font-style:normal;font-size:10.5px;color:var(--steel);text-transform:uppercase;letter-spacing:.06em}
.xteam__dot{width:8px;height:8px;border-radius:50%;background:var(--blue)}
.xteam--dev{background:var(--ink);color:#fff;box-shadow:none}
.xteam--dev em{color:#9aa0a6}
.xray__link{display:flex;align-items:center;gap:12px}
.xray__link i{flex:1;height:1px;background:repeating-linear-gradient(90deg,var(--blue) 0 6px,transparent 6px 11px);background-size:22px 1px;animation:xflow 1.4s linear infinite}
.xray__link em{font-style:normal;font-size:10.5px;color:var(--blue);text-transform:uppercase;letter-spacing:.08em;white-space:nowrap}
@keyframes xflow{to{background-position:22px 0}}
.xray__stage{display:grid;grid-template-columns:1.32fr 1fr;gap:20px;align-items:stretch}
.xshot{margin:0;border-radius:20px;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset,var(--sh);overflow:hidden;display:flex;flex-direction:column}
.xshot__bar{display:flex;align-items:center;gap:6px;padding:12px 16px;border-bottom:1px solid var(--line);font-size:11px;color:var(--muted)}
.xshot__bar i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.xshot__bar span{margin-left:10px}
.xshot__bar a{margin-left:auto;color:var(--ink);text-decoration:none;font-size:11px;transition:color .2s var(--ease)}
.xshot__bar a:hover{color:var(--blue)}
.xshot__img{position:relative;aspect-ratio:16/10;background:#0a0a0a}
.xshot__img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.xshot figcaption{padding:12px 16px;font-size:10.5px;color:var(--steel);text-transform:uppercase;letter-spacing:.06em;border-top:1px solid var(--line);margin-top:auto}
.xpin{position:absolute;width:30px;height:30px;margin:-15px 0 0 -15px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);box-shadow:0 0 0 1px rgba(255,255,255,.55) inset;color:#fff;font:600 12px/1 var(--mono);cursor:pointer;transition:background-color .3s var(--ease),box-shadow .3s var(--ease),transform .45s var(--ease)}
.xpin::before{content:"";position:absolute;inset:-7px;border-radius:50%;box-shadow:0 0 0 1.5px var(--blue);opacity:0;transform:scale(.7);transition:opacity .3s var(--ease),transform .45s var(--ease)}
.xpin:hover,.xpin.is-on{background:var(--blue);box-shadow:0 0 0 1px var(--blue) inset;transform:scale(1.08)}
.xpin.is-on::before{opacity:1;transform:none}
.xcode{border-radius:20px;background:#101214;color:#d7dade;display:flex;flex-direction:column;overflow:hidden;box-shadow:var(--sh)}
.xcode__bar{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid #23272b;font-size:11px;color:#8b9198}
.xcode__ok{display:flex;align-items:center;gap:7px;color:#cfd3d7}
.xcode__ok i{width:7px;height:7px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px rgba(0,88,246,.25)}
.xcode__src{margin:0;padding:14px 0;font-size:11.5px;line-height:1.85;white-space:pre;overflow:hidden}
.xl{display:block;padding:0 18px 0 0;color:#8b9198;transition:background-color .3s var(--ease),color .3s var(--ease)}
.xl em{display:inline-block;width:40px;padding-right:14px;text-align:right;font-style:normal;color:#4a5056}
.xl--k{color:#c3c8cd;cursor:default}
.xl--c{color:#5f666d}
.xl b{color:#7fa8ff;font-weight:400}.xl i{color:#fff;font-style:normal}.xl s{text-decoration:none;color:#a9c4ff}
.xl.is-on{background:rgba(0,88,246,.22);color:#fff;box-shadow:inset 2px 0 0 var(--blue)}
.xl.is-on em{color:#a9c4ff}
.xnote{display:grid;margin-top:auto;border-top:1px solid #23272b}
.xnote__i{grid-area:1/1;padding:16px 18px 18px;opacity:0;transform:translate3d(0,6px,0);transition:opacity .3s var(--ease),transform .45s var(--ease)}
.xnote__i.is-on{opacity:1;transform:none}
.xnote__i p{margin:0;font-size:13.5px;line-height:1.5;color:#c3c8cd;display:grid;grid-template-columns:62px 1fr;gap:8px}
.xnote__i p+p{margin-top:6px}
.xnote__i p b{font-size:10px;font-weight:400;color:#8b9198;text-transform:uppercase;letter-spacing:.08em;padding-top:3px}
.xnote__t{font-size:17px!important;color:#fff!important;font-weight:600;margin-bottom:8px!important}
.xnote__t span{font-size:11px;color:var(--blue);font-weight:400;padding-top:4px}
.xray__hint{margin:14px 0 0;font-size:10.5px;color:var(--steel);text-transform:uppercase;letter-spacing:.06em}
@media (prefers-reduced-motion:reduce){.xray__link i{animation:none}}
.xcode__src,.xl{text-transform:none;letter-spacing:0}.xcode__src{font-size:11px}
.xbox{position:absolute;border-radius:6px;box-shadow:0 0 0 1px rgba(255,255,255,.18) inset;pointer-events:none;transition:box-shadow .35s var(--ease),background-color .35s var(--ease)}
.xbox.is-on{box-shadow:0 0 0 1.5px var(--blue) inset,0 0 0 4px rgba(0,88,246,.18);background:rgba(0,88,246,.06)}
.xpin{margin:-11px 0 0 -11px;width:24px;height:24px;font-size:11px}

/* ---- footer: lockup in an edge-to-edge construction grid ---- */
.foot__mark{display:none}
.fgrid{position:relative;margin:88px 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper);cursor:crosshair}
.fgrid__svg{display:block;width:100%;height:auto;overflow:hidden}
.fg{fill:none;stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.fg--m{stroke:var(--line2)}
.fc{fill:none;stroke:#c6c9cc;stroke-width:1;vector-effect:non-scaling-stroke}
.fc--m{stroke:#aeb2b6}
.fc--d{stroke-dasharray:3 4}
.fc--b{stroke:var(--blue);stroke-opacity:.55}
.ft{font:10px/1 var(--mono);fill:var(--steel);letter-spacing:.06em;text-transform:uppercase}
.ft--b{fill:var(--blue)}
.fl__holes path{fill:#000;stroke:#000;stroke-width:6;vector-effect:non-scaling-stroke}
#flShape path{fill:var(--f,none);stroke:var(--s,none);stroke-width:1.25;vector-effect:non-scaling-stroke;stroke-linejoin:round}
#flShape .fl__b{fill:var(--fb,var(--f,none));stroke:var(--sb,var(--s,none))}
.fl__flat{--f:none;--s:var(--ink)}
.fl__side{--f:color-mix(in srgb,#8f959b calc(var(--i)*6%),#dfe2e5)}
.fl__top{--f:#1b1e21;--fb:var(--blue);--s:#000;--sb:var(--blue)}
.fl__cell{fill:var(--blue);fill-opacity:0;transition:fill-opacity .3s var(--ease)}
.fgrid.is-in .fl__cell{fill-opacity:.07}
.foot__small{margin-top:0;border-top:0}
.book__mk{width:44px;height:44px;border-radius:50%;overflow:hidden;background:var(--raised);box-shadow:0 0 0 2px #fff,0 0 0 3px var(--line);flex:none;padding:0}
.book__mk img{width:100%;height:100%;object-fit:cover;display:block}

/* hero work card: compact, anchored beside the mark */
.reel{position:absolute;margin:0;inset:auto;width:340px;max-width:none;max-height:none;z-index:40;opacity:0;transform:scale(.92);transition:opacity .28s var(--ease),transform .45s cubic-bezier(.2,.9,.25,1)}
.reel.is-in{opacity:1;transform:none}
.reel[open]{animation:none}
.reel__in{padding:10px;gap:9px;border-radius:16px;box-shadow:0 24px 60px -20px rgba(20,22,24,.28),0 0 0 1px var(--line)}
.reel__head{padding:2px 2px 0 6px}
.reel__head .mono{font-size:11px;gap:8px;min-width:0}
.reel__head a{color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-decoration:none}
.reel__head a:hover{color:var(--blue)}
.reel__x{width:28px;height:28px}
.reel__stage{aspect-ratio:16/10;border-radius:10px}
.reel__bar i{transition:transform .6s linear}
.reel__cases{grid-template-columns:repeat(7,1fr);gap:5px}
.reel__cases img{border-radius:5px;aspect-ratio:4/3}
.reel__all{font-size:11px;color:var(--muted);text-decoration:none;padding:0 4px 2px;justify-self:end}
.reel__all:hover{color:var(--blue)}
html.reel-open{overflow:visible}
.reel__in:focus{outline:none}

/* ---- Problem v5: point of view lives inside the pin, right under the mark ---- */
.pscene__pov{position:absolute;left:0;right:0;top:41%;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 40px;pointer-events:none;opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .7s var(--ease)}
.pscene.is-pov .pscene__pov{opacity:1;transform:none}
.pscene__pov .eyebrow{margin-bottom:18px}
.pscene__pov .pov__h{font-size:60px;line-height:1.05;margin-bottom:26px;max-width:980px}
.pscene__pov .pov__body{font-size:21px;max-width:820px}
.pscene.is-pov .pscene__tags,.pscene.is-pov .pscene__copy{opacity:0}
.pscene__tags{transition:opacity .5s var(--ease)}
.pscene.is-resolved .pscene__veil{opacity:.35}
.pscene__veil{transition:opacity .6s var(--ease)}
.pscene.is-resolved .pscene__tags{bottom:auto;top:calc(50% + 230px)}
@media (prefers-reduced-motion:reduce){.pscene__pov{position:static;opacity:1;transform:none;padding:80px 40px}}
/* ---- Services v5: 3D sticky mark aligned to the index; tighter quote-to-stack rhythm ---- */
.mark2{width:300px;height:300px;perspective:none}
.mark2 canvas{display:block;width:100%;height:100%}
.bigquote{padding:120px 0 16px}
.stk{margin-top:0;height:calc(100vh + 7 * 42vh)}
.stk__sticky{justify-content:flex-start;padding-top:112px}
/* ================= v6 · Apple-style frosted app icon (shared: stack + how it works) ================= */
.ai{--s:56px;--rx:0deg;--ry:0deg;position:relative;display:inline-block;flex:none;width:var(--s);height:var(--s);border-radius:calc(var(--s) * .27);
  background:radial-gradient(120% 85% at 28% 0%,rgba(255,255,255,.98) 0,rgba(255,255,255,0) 58%),linear-gradient(162deg,#FCFCFD 0%,#EEF0F2 52%,#E1E4E8 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -2px 4px rgba(24,32,48,.07),inset 0 0 0 .5px rgba(255,255,255,.8),0 0 0 .5px rgba(16,24,40,.11),0 1px 1px rgba(16,24,40,.06),0 calc(6px + var(--a,0) * 6px) calc(14px + var(--a,0) * 10px) -4px rgba(16,24,40,calc(.15 + var(--a,0) * .07)),0 calc(16px + var(--a,0) * 10px) calc(28px + var(--a,0) * 12px) -14px rgba(16,24,40,.22);
  transform:perspective(420px) rotateX(var(--rx)) rotateY(var(--ry)) translate3d(0,calc(var(--a,0) * -5px),0);transform-style:preserve-3d}
.ai::before{content:"";position:absolute;inset:1px;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.85) 0,rgba(255,255,255,.18) 46%,rgba(255,255,255,0) 52%);pointer-events:none}
.ai::after{content:"";position:absolute;inset:calc(var(--s) * .07);border-radius:calc(var(--s) * .2);box-shadow:inset 0 1px 1.5px rgba(255,255,255,.95),inset 0 -1px 1px rgba(16,24,40,.05);background:radial-gradient(90% 70% at 50% 110%,rgba(16,24,40,.05),rgba(16,24,40,0) 70%);pointer-events:none}
.ai>i{position:absolute;inset:25%;z-index:1;filter:drop-shadow(0 1px 0 rgba(255,255,255,.95)) drop-shadow(0 calc(var(--s) * .035) calc(var(--s) * .05) rgba(16,24,40,.28));transform:translateZ(6px)}
.ai>i::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,#2F7BFF calc(var(--a,0) * 100%),#43474E) 0,color-mix(in srgb,#0047D6 calc(var(--a,0) * 100%),#16181B) 100%);-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
.ai--sm{--s:28px}.ai--xs{--s:20px}
.ai--sm>i,.ai--xs>i{inset:24%;filter:drop-shadow(0 1px 0 rgba(255,255,255,.9)) drop-shadow(0 1px 1px rgba(16,24,40,.25))}
.ai--sm::after,.ai--xs::after{display:none}
@media (prefers-reduced-motion:reduce){.ai{transform:none}}

/* ================= v6 · Stack: editor + icon board ================= */
.stk__grid{grid-template-columns:560px 1fr;gap:40px;align-items:stretch}
.cfg{display:flex;flex-direction:column;border-radius:16px;background:#0F1115;box-shadow:0 0 0 1px rgba(255,255,255,.06) inset,0 0 0 1px #0B0C0E,0 2px 4px rgba(16,24,40,.08),0 24px 48px -20px rgba(16,24,40,.45);overflow:hidden;color:#D6D9DE}
.ed__bar{display:flex;align-items:center;justify-content:space-between;height:36px;padding:0 14px;background:#16181D;border-bottom:1px solid #22252B}
.ed__dots{display:flex;gap:7px;width:52px}.ed__dots i{width:11px;height:11px;border-radius:50%;background:#3A3E46;box-shadow:inset 0 0 0 .5px rgba(255,255,255,.08)}
.ed__dots i:nth-child(1){background:#E5675D}.ed__dots i:nth-child(2){background:#E2B54A}.ed__dots i:nth-child(3){background:#5DBB6A}
.ed__title{font-size:11px!important;color:#8B919A!important;letter-spacing:.04em;text-transform:none}
.ed__tabs{display:flex;height:34px;background:#121419;border-bottom:1px solid #22252B;text-transform:none!important;font-size:11.5px!important}
.ed__tab{display:inline-flex;align-items:center;gap:7px;padding:0 14px;color:#7E848D;border-right:1px solid #1E2127;white-space:nowrap}
.ed__tab.is-on{background:#0F1115;color:#E8EAED;box-shadow:inset 0 2px 0 #4D8DFF}
.ed__tab b{font-weight:400;color:#6B717A;margin-left:4px}
.ed__ic{font-style:normal;font-size:9px;font-weight:600;color:#C7A35C}.ed__ic--ts{color:#4D8DFF}.ed__ic--md{color:#8B919A}
.ed__crumbs{margin:0;height:28px;display:flex;align-items:center;gap:6px;padding:0 18px;font-size:11px!important;color:#6F757E!important;text-transform:none!important;border-bottom:1px solid #1A1D22}
.ed__crumbs i{font-style:normal;color:#4A4F57}.ed__crumbs b{font-weight:500;color:#C9CDD3}
.cfg__body{flex:1;margin:0;padding:12px 0;font:450 12.5px/23px var(--mono);color:#D6D9DE;white-space:pre;overflow:hidden;background:#0F1115}
.cfg .ln{display:block;position:relative;padding:0 18px 0 54px;white-space:pre;transition:background-color .35s var(--ease),opacity .35s var(--ease)}
.cfg .ln>i{position:absolute;left:0;width:36px;text-align:right;font-style:normal;color:#474C55;opacity:1;transition:color .35s var(--ease)}
.cfg .tx{display:inline-block;vertical-align:top;min-height:23px}
.cfg .row::before{width:2px;background:#4D8DFF}
.cfg .row.is-on{background:linear-gradient(90deg,rgba(77,141,255,.16),rgba(77,141,255,.05) 70%,rgba(77,141,255,0))}
.cfg .row.is-on>i{color:#C9D8F5}
.cfg.has-on .row:not(.is-on){opacity:.5}
.cfg .row.is-on.is-last .tx::after{content:"";display:inline-block;width:2px;height:15px;margin-left:2px;vertical-align:-3px;background:#4D8DFF;animation:edCaret 1.1s steps(1) infinite}
@keyframes edCaret{50%{opacity:0}}
.c-kw{color:#C4A7F5}.c-f{color:#7FB8FF}.c-k{color:#8FD3E8}.c-s{color:#E9BE86}.c-p{color:#8D949E}.c-c{color:#6A717B;font-style:italic}
.cfg.is-armed .tx{clip-path:inset(0 100% 0 0)}
.cfg.is-typing .tx{animation:edType calc(var(--n) * 16ms + 60ms) steps(var(--n)) var(--dl,0ms) forwards}
@keyframes edType{to{clip-path:inset(0 0 0 0)}}
.ed__status{margin:0;display:flex;align-items:center;gap:16px;height:28px;padding:0 14px;background:#0B57E3;color:rgba(255,255,255,.92)!important;font-size:10.5px!important;text-transform:none!important;letter-spacing:.02em}
.ed__status span{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.ed__br svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round}
.ed__ok i{width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.22)}
.ed__r{margin-left:auto;gap:14px!important;opacity:.85}
.tboard{align-items:stretch}
.tboard__cats{align-self:center;background:rgba(255,255,255,.8);box-shadow:0 0 0 1px var(--line),0 1px 2px rgba(16,24,40,.04)}
.tboard__stage{position:relative;height:auto;flex:1;margin-top:14px;border-radius:22px;perspective:none;display:grid;place-items:center;overflow:visible;
  background:radial-gradient(70% 60% at 50% 0%,rgba(255,255,255,.95),rgba(255,255,255,0) 70%),linear-gradient(180deg,#F1F2F3,#E9EBED);box-shadow:inset 0 0 0 1px rgba(16,24,40,.06),inset 0 1px 0 #fff,0 1px 2px rgba(16,24,40,.04)}
.tboard__stage::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background-image:radial-gradient(circle,rgba(16,24,40,.13) 1px,transparent 1.3px);background-size:22px 22px;-webkit-mask:radial-gradient(80% 75% at 50% 50%,#000 30%,transparent 90%);mask:radial-gradient(80% 75% at 50% 50%,#000 30%,transparent 90%)}
.tboard__plane{position:relative;z-index:1;width:auto;height:auto;transform:none;display:grid;grid-template-columns:repeat(7,72px);column-gap:6px;row-gap:12px;padding:22px 0}
.tboard__plane::before{display:none}
.tile{--a:0;position:relative;left:auto;top:auto;width:auto;height:auto;transform:none;display:flex;flex-direction:column;align-items:center;gap:8px;cursor:default}
.tile::before{display:none}
.tile .ai{opacity:calc(.5 + var(--a,0) * .5);filter:saturate(calc(.6 + var(--a,0) * .4))}
.tile__n{font:500 10px/1 var(--mono);letter-spacing:.01em;color:color-mix(in srgb,var(--ink) calc(var(--a,0) * 100%),#9DA2A8);white-space:nowrap}
.tile .ai{opacity:calc(.62 + var(--a,0) * .38)}

/* ================= v6 · How it works: Linear x Apple board ================= */
.kb{height:auto;display:block;padding:112px 0 72px}
.kb__in{padding-top:0}
.app{--req:#8A9097;--scp:#8B7CF0;--wip:#D99A2B;--rev:#0058F6;--shp:#1F9D63;
  height:calc(100vh - 104px);min-height:600px;max-height:820px;display:flex;flex-direction:column;border-radius:20px;background:#FBFBFA;overflow:hidden;
  box-shadow:0 0 0 1px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.05),0 24px 60px -28px rgba(16,24,40,.28)}
.app__bar{display:flex;align-items:center;gap:16px;height:46px;flex:none;padding:0 18px;border-bottom:1px solid rgba(16,24,40,.07);background:rgba(255,255,255,.85)}
.app__dots{display:flex;gap:7px}.app__dots i{width:10px;height:10px;border-radius:50%;background:#DADCDF}
.app__crumb{font-size:11px;color:var(--steel);text-transform:none;letter-spacing:.02em}
.app__crumb i{font-style:normal;color:#C8CBCF;margin:0 7px}.app__crumb b{color:var(--ink);font-weight:500}
.app__people{display:flex;margin-left:auto}.app__people .av{margin-left:-6px;box-shadow:0 0 0 2px #fff}
.app__stat{font-size:11px;color:var(--ink);text-transform:none;padding:5px 10px;border-radius:999px;background:#F1F2F3}
.av{display:inline-grid;place-items:center;width:24px;height:24px;border-radius:50%;font:600 9.5px/1 var(--f);letter-spacing:.02em;color:#3D4247;background:linear-gradient(160deg,#EDEFF1,#DCDFE3);box-shadow:inset 0 0 0 .5px rgba(16,24,40,.1)}
.av--xs{width:20px;height:20px;font-size:8px}
.app__body{flex:1;min-height:0;display:grid;grid-template-columns:232px 1fr}
.app__side{border-right:1px solid rgba(16,24,40,.07);padding:16px 12px;background:#F6F6F5;overflow:hidden}
.app__lbl{font-size:10px;color:var(--steel);padding:0 10px 10px}
.stg{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:3px}
.stg__i{border-radius:12px;padding:9px 10px 11px;transition:background-color .4s var(--ease),box-shadow .4s var(--ease)}
.stg__b{all:unset;cursor:pointer;display:flex;align-items:center;gap:9px;width:100%}
.stg__n{font-size:10px;color:var(--steel);width:16px}
.stg__b b{font-size:14px;font-weight:550;letter-spacing:-.01em;color:var(--muted);transition:color .3s var(--ease)}
.stg__d{margin-left:auto;font-size:9.5px;color:var(--steel)}
.stg__tools{display:flex;gap:8px;margin-top:9px;padding-left:25px}
.stg__i .ai{opacity:.6;transition:opacity .4s var(--ease)}
.stg__i.is-on{background:#fff;box-shadow:0 0 0 1px rgba(16,24,40,.07),0 1px 2px rgba(16,24,40,.05),0 8px 18px -10px rgba(16,24,40,.18)}
.stg__i.is-on b,.stg__i.is-done b{color:var(--ink)}
.stg__i.is-on .stg__n{color:var(--blue)}
.stg__i.is-on .ai{opacity:1;--a:1}
.stg__i.is-done .ai{opacity:.85}
.stg__i.is-done .stg__n{color:var(--shp)}
.app__main{display:flex;flex-direction:column;gap:12px;min-width:0;min-height:0;padding:14px 18px 16px}
.app__cap{flex:none;margin:0;font-size:13.5px;line-height:20px;height:20px;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .22s var(--ease)}
.app__cap.is-swap{opacity:0}
.kcols{position:relative;flex:none;height:274px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px}
.kcol{--c:var(--req);border-radius:12px;background:color-mix(in srgb,var(--c) 4%,#F5F5F4);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 10%,rgba(16,24,40,.05));padding:10px;transition:box-shadow .4s var(--ease)}
.kcol--scp{--c:var(--scp)}.kcol--wip{--c:var(--wip)}.kcol--rev{--c:var(--rev)}.kcol--shp{--c:var(--shp)}
.kcol__h{display:flex;align-items:center;gap:7px;margin:0;font-size:12px;font-weight:550;color:var(--ink);letter-spacing:-.005em}
.sdot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--c,var(--steel));box-shadow:0 0 0 3px color-mix(in srgb,var(--c,var(--steel)) 18%,transparent)}
.kcol__h em{margin-left:auto;font-style:normal;font-size:10px;min-width:20px;text-align:center;padding:2px 6px;border-radius:999px;color:color-mix(in srgb,var(--c) 85%,#000);background:color-mix(in srgb,var(--c) 12%,transparent)}
.kcol.is-hot{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--c) 40%,transparent)}
.kcards{position:absolute;inset:0;pointer-events:none}
.kc{position:absolute;left:0;top:0;border-radius:10px;background:#fff;box-shadow:0 0 0 1px rgba(16,24,40,.07),0 1px 2px rgba(16,24,40,.05),0 4px 10px -6px rgba(16,24,40,.12);will-change:transform}
.kc__full{height:92px;padding:9px 11px 10px;display:flex;flex-direction:column}
.kc__top{display:flex;align-items:center;justify-content:space-between;margin:0 0 5px}
.kc__id{font-size:9.5px;color:var(--steel);letter-spacing:.03em}
.kc__tag{font-size:10px;font-weight:500;color:var(--muted);padding:1px 7px;border-radius:999px;background:#F2F3F4}
.kc__t{margin:0;font-size:12.5px;line-height:16px;font-weight:550;letter-spacing:-.01em;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kc__ft{display:flex;align-items:center;gap:6px;margin:auto 0 0}
.kc__due{margin-left:auto;font-size:9.5px;color:var(--steel)}
.kc__mini{display:none;align-items:center;gap:7px;height:24px;margin:0;padding:0 9px;font-size:11.5px;font-weight:500;color:var(--ink);white-space:nowrap;overflow:hidden}
.kc__mini .kc__id{font-size:9px}
.kc__ok{flex:none;width:12px;height:12px;border-radius:50%;background:var(--shp) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.4 6.2l1.7 1.7 3.5-3.6' fill='none' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.kc.is-ship{border-radius:7px;box-shadow:0 0 0 1px rgba(16,24,40,.06),0 1px 1px rgba(16,24,40,.04)}
.kc.is-ship .kc__full{display:none}.kc.is-ship .kc__mini{display:flex}
.app__prev{position:relative;flex:1;min-height:0;display:grid;place-items:center;border-radius:14px;background:#F1F2F2;box-shadow:inset 0 0 0 1px rgba(16,24,40,.05);overflow:hidden}
/* the product page under construction, drawn at 1120x520 and scaled to fit */
.pv{--k:.75;position:absolute;left:50%;top:50%;width:1120px;height:520px;margin:-260px 0 0 -560px;transform:scale(var(--k));display:flex;flex-direction:column;border-radius:14px;background:#fff;overflow:hidden;
  box-shadow:0 0 0 1px rgba(16,24,40,.08),0 2px 4px rgba(16,24,40,.05),0 30px 60px -30px rgba(16,24,40,.3);font-family:var(--f);color:#121417}
.pv__chrome{flex:none;display:flex;align-items:center;gap:16px;height:40px;padding:0 16px;background:#F7F7F8;border-bottom:1px solid #ECEDEF}
.pv__dots{display:flex;gap:7px}.pv__dots i{width:11px;height:11px;border-radius:50%;background:#DDDFE2}
.pv__url{display:flex;align-items:center;gap:8px;margin:0 auto;height:26px;padding:0 14px;border-radius:8px;background:#fff;box-shadow:inset 0 0 0 1px #E6E7EA;font-size:12px;color:var(--steel);text-transform:none;min-width:300px;justify-content:center}
.pv__lock{width:9px;height:9px;border-radius:2px;box-shadow:inset 0 0 0 1.5px #A9AEB4}
.pv__live{font-style:normal;font-size:10.5px;color:#fff;background:var(--shp,#1F9D63);padding:4px 9px;border-radius:999px;opacity:0;transform:scale(.9);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.pv.is-live .pv__live{opacity:1;transform:none}.pv.is-live .pv__url{color:var(--ink)}
.pv__page{position:relative;flex:1;min-height:0}
.pv__empty{position:absolute;inset:0;display:grid;place-content:center;text-align:center;margin:0;font-size:22px;font-weight:550;letter-spacing:-.02em;color:#B9BDC2;transition:opacity .4s var(--ease)}
.pv__empty span{font-size:15px;font-weight:450;letter-spacing:0;margin-top:6px}
.pv.has-any .pv__empty{opacity:0}
.pe{opacity:0;transform:translateY(8px);transition:opacity .45s var(--ease),transform .45s var(--ease),color .45s var(--ease),background-color .45s var(--ease),box-shadow .45s var(--ease)}
.pe.is-in{opacity:1;transform:none}
.pe:not(.is-real){color:transparent!important;border-radius:8px}
.pe:not(.is-real) *{visibility:hidden}
.pv__nav{position:absolute;left:48px;right:48px;top:20px;height:36px;display:flex;align-items:center;gap:26px;font-size:13.5px;font-weight:500;color:#555B62}
.pv__nav:not(.is-real){background:#F0F1F2}
.pv__logo{display:flex;align-items:center;gap:8px;margin-right:18px;font-size:19px;font-weight:700;letter-spacing:-.04em;color:#111}
.pv__logo i{width:20px;height:20px;border-radius:6px;background:conic-gradient(from 210deg,#111 0 50%,#5B6168 0 75%,#111 0)}
.pv__nav em{margin-left:auto;font-style:normal}
.pv__nav strong{font-weight:550;color:#fff;background:#111;padding:9px 16px;border-radius:10px}
.pv__hero{position:absolute;left:48px;top:96px;width:470px;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.pv__pill{display:inline-flex;align-items:center;gap:9px;margin:0;padding:5px 12px 5px 5px;border-radius:999px;font-size:12.5px;font-weight:500;color:#3A3F45;box-shadow:inset 0 0 0 1px #E4E6E9}
.pv__pill b{font-weight:600;font-size:11px;color:#fff;background:var(--blue);padding:3px 8px;border-radius:999px}
.pv__pill:not(.is-real){background:#F0F1F2;box-shadow:none;width:250px}
.pv__h1{margin:0;font-size:44px;line-height:1.04;font-weight:650;letter-spacing:-.04em}
.pv__h1:not(.is-real){background:#E9EBED}
.pv__sub{margin:0;font-size:15.5px;line-height:1.5;color:#5A6067;max-width:430px}
.pv__sub:not(.is-real){background:#F0F1F2}
.pv__cta{display:flex;gap:10px;margin:2px 0 0;font-size:14px;font-weight:550}
.pv__cta span{color:#fff;background:var(--blue);padding:12px 20px;border-radius:11px;box-shadow:0 1px 0 rgba(255,255,255,.2) inset,0 6px 14px -6px rgba(0,88,246,.6)}
.pv__cta em{font-style:normal;color:#1A1D21;padding:12px 18px;border-radius:11px;box-shadow:inset 0 0 0 1px #E1E3E6}
.pv__cta:not(.is-real){background:#E9EBED;width:250px;height:44px}
.pv__trust{display:flex;align-items:center;gap:20px;margin-top:22px;font-size:15px;font-weight:650;letter-spacing:-.02em;color:#9BA0A6}
.pv__trust small{font-size:11.5px;font-weight:450;letter-spacing:0;color:#9BA0A6;max-width:96px;line-height:1.3}
.pv__trust:not(.is-real){background:#F3F4F5;width:440px;height:30px}
.pv__dash{position:absolute;right:48px;top:84px;width:500px;height:326px;padding:16px 18px;border-radius:16px;background:#fff;box-shadow:0 0 0 1px #E8E9EC,0 20px 40px -24px rgba(16,24,40,.25);display:flex;flex-direction:column;gap:14px}
.pv__dash:not(.is-real){background:#F3F4F5;box-shadow:none}
.dsh__top{display:flex;align-items:center;gap:10px;font-size:13.5px}
.dsh__top b{font-weight:650;letter-spacing:-.01em}.dsh__top span{color:#8A9097;font-size:12px}
.dsh__top em{margin-left:auto;display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:11px;font-weight:500;color:#1F7A4F;background:#EAF6F0;padding:4px 9px;border-radius:999px}
.dsh__top em i{width:6px;height:6px;border-radius:50%;background:#1F9D63}
.dsh__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.dsh__kpis p{margin:0;padding:10px 12px;border-radius:11px;background:#F7F8F9;display:flex;flex-direction:column;gap:3px}
.dsh__kpis small{font-size:11px;color:#8A9097}.dsh__kpis b{font-size:21px;font-weight:650;letter-spacing:-.03em}.dsh__kpis i{font-style:normal;font-size:10.5px;color:#1F7A4F}
.dsh__chart p{display:flex;justify-content:space-between;margin:0 0 8px;font-size:11px;color:#8A9097}
.dsh__bars{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;height:72px;align-items:end}
.dsh__bars span{display:flex;flex-direction:column;align-items:center;gap:5px;height:100%;justify-content:flex-end}
.dsh__bars i{width:100%;height:calc(var(--h) * 52px);border-radius:5px 5px 2px 2px;background:#DCDFE3;transform-origin:bottom;transition:transform .7s var(--ease)}
.dsh__bars .is-now i{background:var(--blue)}
.dsh__bars em{font-style:normal;font-size:10px;color:#9AA0A6}
.pv__dash:not(.is-real) .dsh__bars i{transform:scaleY(0)}
.dsh__rows{display:flex;flex-direction:column;border-top:1px solid #EFF0F2}
.dsh__rows p{display:grid;grid-template-columns:1fr 120px 76px;align-items:center;margin:0;height:30px;font-size:12.5px;border-bottom:1px solid #F2F3F4}
.dsh__rows span{color:#3A3F45}.dsh__rows b{font-weight:550;text-align:right;padding-right:14px;font-variant-numeric:tabular-nums}
.dsh__rows em{justify-self:end;font-style:normal;font-size:10.5px;font-weight:550;padding:3px 8px;border-radius:999px}
.dsh__rows .ok{color:#1F7A4F;background:#EAF6F0}.dsh__rows .rv{color:#9A6A12;background:#FBF3E2}
.pv__ops{position:relative;flex:none;height:52px;border-top:1px solid #ECEDEF;background:#FAFAFB;text-transform:none!important}
.ops{position:absolute;inset:0;display:flex;align-items:center;gap:12px;margin:0;padding:0 24px;font-size:12px;color:#6A7077;opacity:0;transform:translateY(6px);transition:opacity .4s var(--ease),transform .4s var(--ease)}
.ops b{font-weight:550;color:#1A1D21}.ops>span{margin-left:auto;color:#8A9097}
.ops .sdot{--c:var(--steel)}
.pv[data-stage="0"] .ops[data-s="0"],.pv[data-stage="1"] .ops[data-s="1"],.pv[data-stage="2"] .ops[data-s="2"],.pv[data-stage="3"] .ops[data-s="3"],.pv[data-stage="4"] .ops[data-s="4"],.pv[data-stage="5"] .ops[data-s="5"]{opacity:1;transform:none}
.ops[data-s="1"] .sdot{--c:#8B7CF0}.ops[data-s="2"] .sdot{--c:#D99A2B}.ops[data-s="3"] .sdot{--c:#0058F6}.ops[data-s="5"] .sdot{--c:#1F9D63}
.ops .chip{margin:0;display:inline-flex;gap:6px;align-items:center;padding:5px 10px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px #E6E7EA;color:#5A6067}
.ops .chip::before{content:"";width:7px;height:7px;border-radius:50%;background:#1F9D63}
.ops .chip b{color:#1F7A4F}
.ops svg{width:200px;height:28px}
.ops path{fill:none;stroke:var(--blue);stroke-width:2;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:var(--sp,1);vector-effect:non-scaling-stroke}
@media (prefers-reduced-motion:reduce){.kb{padding:120px 0}.app{height:auto;max-height:none}}.kc__mini .kc__id{display:none}
.app__people{gap:4px}.app__people .av{margin-left:0;box-shadow:inset 0 0 0 .5px rgba(16,24,40,.1)}
.pv__dash{top:76px;height:auto;padding:14px 16px;gap:12px}
.dsh__bars{height:58px}.dsh__bars i{height:calc(var(--h) * 40px)}
.dsh__rows p{height:28px}/* v7 captions + Nathan framing */
.vcard__video{transform:scale(1.12);transform-origin:96% 45%;transition:transform .6s var(--ease)}
.vcard.is-playing .vcard__video{transform:none}
.vquote__vid{transform-origin:96% 45%;transform:scale(1.12)}
.vquote:hover .vquote__vid{transform:scale(1.16)}
.vcap{position:absolute;left:50%;bottom:104px;z-index:3;width:max-content;max-width:78%;margin:0;transform:translateX(-50%);text-align:center;pointer-events:none;transition:bottom .4s var(--ease),opacity .2s linear;opacity:0}
.vcard.is-playing .vcap{bottom:64px}
.has-cap .vcap{opacity:1}
.vcap__t{display:inline;padding:4px 10px;border-radius:6px;background:rgba(10,12,16,.62);color:#fff;font:500 19px/1.55 var(--font,inherit);letter-spacing:-.005em;text-shadow:0 1px 2px rgba(0,0,0,.45);-webkit-box-decoration-break:clone;box-decoration-break:clone}
.vquote .vcap{position:static;transform:none;display:block;width:auto;max-width:none;margin:0 0 8px;text-align:center}
.vquote .vcap__t{font-size:12px;line-height:1.5;padding:2px 7px;border-radius:4px}
.vquote__txt{display:flex;flex-direction:column}
@media (prefers-reduced-motion:reduce){.vcard__video{transition:none}}.vquote .vcap{position:absolute;left:12px;right:12px;top:68px;bottom:auto;margin:0;white-space:nowrap;overflow:hidden}
.vquote .vcap__t{font-size:11.5px;font-weight:500}/* v7 invoice paper */
.rc{--slip:#FBFAF6;background-color:var(--slip);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .32 0 0 0 0 .3 0 0 0 0 .26 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E"),linear-gradient(180deg,rgba(255,255,255,.7),rgba(255,255,255,0) 30%,rgba(120,110,90,.025));border-radius:4px 4px 2px 2px;margin-top:8px}
.rc::before{content:"";position:absolute;left:0;right:0;top:-7px;height:8px;background:linear-gradient(135deg,transparent 50%,var(--slip) 50%) 0 0/10px 8px repeat-x,linear-gradient(225deg,transparent 50%,var(--slip) 50%) 0 0/10px 8px repeat-x;filter:drop-shadow(0 -1px 0 var(--line))}
.rc--mo.is-sel::before{filter:drop-shadow(0 -1.5px 0 var(--blue))}
.rc__meta{display:flex;justify-content:space-between;gap:12px;font-size:10.5px;color:var(--steel);text-transform:uppercase;letter-spacing:.06em;padding:10px 0 0}
.rc__meta b{color:var(--ink);font-weight:500}
.rc--mo .rc__meta{padding:10px 0 2px;border-bottom:1px dotted var(--line2);padding-bottom:10px}
.rc--sprint .rc__to{padding-top:6px}
.rl__d b{display:flex;align-items:baseline;gap:10px;font-family:var(--mono);font-size:14px;font-weight:600;letter-spacing:-.01em}
.rl__d b::after{content:"";flex:1;min-width:16px;border-bottom:1.5px dotted var(--line2);transform:translateY(-4px)}
.rl__d em{font-family:var(--mono);font-size:11.5px;letter-spacing:-.01em}
.rl{border-bottom:1px dotted var(--line);border-radius:6px}
.rc__t{font-family:var(--mono);font-size:21px;letter-spacing:-.03em}
.rc__sum>div:not(.rc__total){border-bottom:1px dotted var(--line2);padding-bottom:6px}
.rc__total{border-top:0;box-shadow:0 -1px 0 var(--ink),0 -4px 0 var(--slip),0 -5px 0 var(--ink)}
.rc--mo .rc__tot{border-top:0;box-shadow:0 -1px 0 var(--ink),0 -4px 0 var(--slip),0 -5px 0 var(--ink);margin-top:5px}
/* Sam avatar in call CTAs */
.btn__av{width:24px;height:24px;border-radius:50%;object-fit:cover;flex:none;margin:0 10px 0 -8px;box-shadow:0 0 0 1.5px rgba(255,255,255,.85);background:#ddd}
.btn--sm .btn__av{width:22px;height:22px;margin:0 8px 0 -6px}
.btn--ghost .btn__av{box-shadow:0 0 0 1px var(--line)}
/* v7 footer: calm grid, crisp hollow lockup, local spring lift to solid 3D */
.fgrid{cursor:default;background:var(--paper)}
.fx-g{stroke:#141618;stroke-opacity:.07;stroke-width:1;vector-effect:non-scaling-stroke;shape-rendering:crispEdges}
.fx-a{stroke:#141618;stroke-opacity:.22;stroke-width:1;vector-effect:non-scaling-stroke;shape-rendering:crispEdges}
.fx-a--d{stroke-dasharray:4 6;stroke-opacity:.2}
.fx-t{font:10px/1 var(--mono);fill:var(--steel);letter-spacing:.08em;text-transform:uppercase}
.fx-t--b{fill:var(--blue)}
#fxL path{fill:var(--lf,none);stroke:var(--ls,none);stroke-width:var(--lw,1.4);vector-effect:non-scaling-stroke;stroke-linejoin:round;stroke-linecap:round}
#fxL .fx-b{fill:var(--lfb,var(--lf,none));stroke:var(--lsb,var(--ls,none))}
.fx-gap{--lf:#000;--ls:#000;--lw:18}
.fx-flat{--ls:#2a2e33;--lsb:var(--blue);--lw:1.4}
.fx-shadow{--lf:rgba(20,22,24,.22);opacity:var(--k,0)}
.fx-side{--lf:color-mix(in srgb,#5f656c calc(var(--i)*8%),#b9bdc2);--ls:var(--lf);--lfb:color-mix(in srgb,#00297a calc(var(--i)*8%),#2f74f0);--lsb:var(--lfb);--lw:2.2}
.fx-top{--lf:#2b2f34;--ls:#3d434a;--lfb:var(--blue);--lsb:#3d82ff;--lw:1}
/* problem (dark): the fine diagonal line texture the user liked, back on and a touch clearer */
.problem::before{display:block;z-index:0;background:repeating-linear-gradient(-45deg,transparent 0 23px,rgba(255,255,255,.05) 23px 24px);
  -webkit-mask:linear-gradient(#000,rgba(0,0,0,.35) 18%,rgba(0,0,0,.35) 82%,#000);mask:linear-gradient(#000,rgba(0,0,0,.35) 18%,rgba(0,0,0,.35) 82%,#000)}


/* v7 perf: stack icons light up by opacity crossfade on their own layers (no per-frame filter/colour-mix repaints) */
.tile .ai{filter:none;opacity:1;will-change:transform}
.tboard .ai{box-shadow:inset 0 1px 0 #fff,inset 0 -2px 4px rgba(24,32,48,.07),inset 0 0 0 .5px rgba(255,255,255,.8),0 0 0 .5px rgba(16,24,40,.11),0 1px 1px rgba(16,24,40,.06),0 8px 18px -6px rgba(16,24,40,.2)}
.ai>i::before{background:linear-gradient(180deg,#43474E,#16181B)}
.ai>i::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#2F7BFF,#0047D6);-webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat;opacity:var(--a,0)}
.tile__n{color:#9DA2A8;transition:color .3s var(--ease)}
.tile.is-on .tile__n{color:var(--ink)}
.tile .ai{opacity:calc(.55 + var(--a,0) * .45)}

/* problem: no BFS blue in the problem scenes; the progress rail is soft amber */
.pscene__rail i{background:#D9A441}

/* v8 footer: clean solid lockup with real 3D depth that tilts to the pointer (no grid) */
.fm{position:relative;margin:56px 0 0;height:500px;display:grid;place-items:center;perspective:1800px;cursor:default}
.fm__obj{--rx:8deg;--ry:-12deg;position:relative;width:1040px;aspect-ratio:363/124;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry))}
.fm__l{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform:translateZ(calc(var(--i,0) * -2.6px));backface-visibility:hidden;
  fill:color-mix(in srgb,#2b2f34 calc(var(--i) * 6%),#8c9298)}
.fm__l{--fmb:color-mix(in srgb,#00256e calc(var(--i) * 6%),#3b7cf0)}
.fm__l[style*="--i:16"]{filter:drop-shadow(0 30px 28px rgba(20,22,24,.18))}
.fm__top{fill:url(#fmTop);transform:translateZ(1px)}
.fm__top{--fmb:url(#fmBlue)}
.fm__sheen{position:absolute;inset:0;transform:translateZ(2px);pointer-events:none;mix-blend-mode:soft-light;opacity:.9;
  background:radial-gradient(38% 120% at var(--hx,30%) var(--hy,0%),rgba(255,255,255,.75),rgba(255,255,255,0) 70%);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='18 18 363 124'%3E%3Cpath d='M24 24 L136 24 L80 80 L24 80 Z M96 80 L136 80 L136 136 L40 136 Z M24 91.31 L68.69 91.31 L24 136 Z'/%3E%3Cg transform='translate(163.33 20.89) scale(0.7778)'%3E%3Cpath fill-rule='evenodd' d='M6 4H30V58C35 48 45 42 58 42H131V34C131 14 143 4 164 4C169 4 173 5 176 6V24C173 23 169 22 165 22C157 22 154 26 154 35V42H176V61H154V146H131V61H98C103 70 105 81 105 94C105 125 86 148 59 148C45 148 35 142 30 132V146H6V4ZM55 60C39 60 29 73 29 94C29 115 39 129 55 129C71 129 81 115 81 94C81 73 71 60 55 60Z'/%3E%3Cpath d='M228 42C254 42 269 54 270 73H247C246 63 239 59 227 59C216 59 210 63 210 70C210 77 216 80 233 83C257 87 272 95 272 114C272 135 255 148 228 148C200 148 184 135 183 114H207C208 125 215 131 229 131C241 131 248 126 248 117C248 109 242 106 224 102C201 98 186 90 186 72C186 53 203 42 228 42Z'/%3E%3C/g%3E%3C/svg%3E") 0 0/100% 100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='18 18 363 124'%3E%3Cpath d='M24 24 L136 24 L80 80 L24 80 Z M96 80 L136 80 L136 136 L40 136 Z M24 91.31 L68.69 91.31 L24 136 Z'/%3E%3Cg transform='translate(163.33 20.89) scale(0.7778)'%3E%3Cpath fill-rule='evenodd' d='M6 4H30V58C35 48 45 42 58 42H131V34C131 14 143 4 164 4C169 4 173 5 176 6V24C173 23 169 22 165 22C157 22 154 26 154 35V42H176V61H154V146H131V61H98C103 70 105 81 105 94C105 125 86 148 59 148C45 148 35 142 30 132V146H6V4ZM55 60C39 60 29 73 29 94C29 115 39 129 55 129C71 129 81 115 81 94C81 73 71 60 55 60Z'/%3E%3Cpath d='M228 42C254 42 269 54 270 73H247C246 63 239 59 227 59C216 59 210 63 210 70C210 77 216 80 233 83C257 87 272 95 272 114C272 135 255 148 228 148C200 148 184 135 183 114H207C208 125 215 131 229 131C241 131 248 126 248 117C248 109 242 106 224 102C201 98 186 90 186 72C186 53 203 42 228 42Z'/%3E%3C/g%3E%3C/svg%3E") 0 0/100% 100% no-repeat}
@media (prefers-reduced-motion:reduce){.fm__obj{--rx:6deg;--ry:-8deg}}
/* ================= v8 icons: flat logo tile -> solid 3D "BFS metal" tile with the logo engraved =================
   inactive: flat white squircle, logo in its own brand colour. active (--a 0..1): a matte metal block fades in on its own
   layer with its extrusion + shadow baked in, and the logo crossfades to white / bright brand colour. Only transform + opacity move. */
.ai{--c:#1A1D21;--c2:#fff;background:#fff;box-shadow:0 0 0 1px rgba(16,24,40,.10);
  transform:perspective(420px) rotateX(calc(var(--rx,0deg) + var(--a,0) * 16deg)) rotateY(var(--ry,0deg)) translate3d(0,calc(var(--a,0) * -5px),0)}
.tboard .ai{box-shadow:0 0 0 1px rgba(16,24,40,.10)}
.ai::before{inset:0;border-radius:inherit;opacity:var(--a,0);
  background:radial-gradient(110% 70% at 30% 0%,rgba(255,255,255,.20),rgba(255,255,255,0) 60%),repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 1px,rgba(0,0,0,0) 1px 3px),linear-gradient(170deg,#5B6169 0%,#363A40 42%,#1E2125 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.38),inset 0 0 0 1px rgba(255,255,255,.06),inset 0 -2px 3px rgba(0,0,0,.5),
    0 1px 0 #2A2D32,0 2px 0 #24272B,0 3px 0 #1F2125,0 4px 0 #1A1C1F,0 5px 0 #151719,
    0 12px 18px -6px rgba(10,12,16,.45),0 24px 32px -18px rgba(10,12,16,.35)}
.ai::after{display:none!important}
.ai>i{inset:24%;filter:none;transform:none}
.ai>i::before{background:var(--c)!important;opacity:calc(1 - var(--a,0))}
.ai>i::after{content:"";position:absolute;inset:0;opacity:var(--a,0);
  background:linear-gradient(180deg,color-mix(in srgb,var(--c2) 100%,#fff) 0%,color-mix(in srgb,var(--c2) 82%,#000) 100%)!important;
  -webkit-mask:var(--logo) center/contain no-repeat;mask:var(--logo) center/contain no-repeat}
.ai--sm>i,.ai--xs>i{inset:23%;filter:none}
.ai--xs::before{display:none}
.tile.is-on .ai>i,.stg__i.is-on .ai>i{filter:drop-shadow(0 -.5px 0 rgba(0,0,0,.65)) drop-shadow(0 .5px 0 rgba(255,255,255,.18))}
.tile .ai,.stg__i .ai{opacity:1!important}
.stg__i .ai{transition:transform .5s cubic-bezier(.22,1,.36,1)}
.stg__i .ai::before,.stg__i .ai>i::before,.stg__i .ai>i::after{transition:opacity .45s cubic-bezier(.22,1,.36,1)}
.stg__i.is-on .ai{--a:1}
@media (prefers-reduced-motion:reduce){.ai{transform:none}}
/* brand colours: --c on the flat white tile, --c2 engraved on metal (white where the brand colour is dark) */
.ai[style*="figma.svg"]{--c:#F24E1E;--c2:#FF7A52}
.ai[style*="blender.svg"]{--c:#E87D0D;--c2:#F5932E}
.ai[style*="framer.svg"]{--c:#0055FF}
.ai[style*="webflow.svg"]{--c:#146EF5}
.ai[style*="react.svg"]{--c:#087EA4;--c2:#61DAFB}
.ai[style*="astro.svg"]{--c:#BC52EE;--c2:#D78BFA}
.ai[style*="tailwindcss.svg"]{--c:#0EA5C6;--c2:#38BDF8}
.ai[style*="greensock.svg"]{--c:#5E9A00;--c2:#88CE02}
.ai[style*="lottiefiles.svg"]{--c:#00A88A;--c2:#00DDB3}
.ai[style*="sanity.svg"]{--c:#F03E2F;--c2:#FF6A5C}
.ai[style*="cloudflare.svg"]{--c:#F38020;--c2:#F7962F}
.ai[style*="linear.svg"]{--c:#5E6AD2;--c2:#A2A9FF}
.ai[style*="trello.svg"]{--c:#0052CC}
.ai[style*="slack.svg"]{--c:#4A154B}
.ai[style*="discord.svg"]{--c:#5865F2}
.ai[style*="gmail.svg"]{--c:#EA4335;--c2:#FF6B5E}
.ai[style*="googleanalytics.svg"]{--c:#E37400;--c2:#F9AB00}
.ai[style*="posthog.svg"]{--c:#F54E00;--c2:#FF7A33}

/* ================= v8 How it works: tools row on top, kanban middle-left, live build right ================= */
.kb .app{--W:min(1376px,calc(100vw - 96px));width:var(--W);margin-left:calc((100% - var(--W)) / 2);
  --req:#9AA1A9;--scp:#8B5CF6;--wip:#F5A524;--rev:#2F7BFF;--shp:#22C55E}
.app__body{display:flex;flex-direction:column;grid-template-columns:none}
.app__side{flex:none;border-right:0;border-bottom:1px solid rgba(16,24,40,.07);padding:9px 14px;background:#F7F7F6;overflow:visible}
.stg{flex-direction:row;gap:6px}
.stg__i{flex:1 1 0;min-width:0;display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:12px}
.stg__b{width:auto;flex:none;gap:7px}
.stg__b b{font-size:13.5px}
.stg__n{width:auto}
.stg__d{display:none}
.stg__tools{margin:0 0 0 auto;padding:0;gap:7px}
.stg__tools .ai--sm{--s:30px}
.app__main{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:12px 18px;padding:14px 18px 16px}
.app__cap{grid-column:1;grid-row:1;white-space:normal;height:auto;min-height:40px;line-height:20px;font-size:13.5px;overflow:visible;display:block}
.kcols{grid-column:1;grid-row:2;height:auto;min-height:0;gap:8px}
.app__prev{grid-column:2;grid-row:1/3;min-height:0}
/* no tinted columns: neutral lanes, only the status dot carries colour with a soft glow */
.kcol{background:#F5F5F4!important;box-shadow:inset 0 0 0 1px rgba(16,24,40,.05)!important;padding:10px 6px}
.kcol.is-hot{box-shadow:inset 0 0 0 1px rgba(16,24,40,.12)!important}
.kcol__h{font-size:11.5px;gap:6px;padding:0 4px;white-space:nowrap}
.kcol__h span{overflow:hidden;text-overflow:ellipsis}
.kcol__h em{color:#6A7077!important;background:#EAEBEC!important;padding:2px 5px;min-width:16px}
.kcol .sdot{width:7px;height:7px;background:var(--c);box-shadow:0 0 0 2.5px color-mix(in srgb,var(--c) 18%,transparent),0 0 9px 1px color-mix(in srgb,var(--c) 70%,transparent)}
.kc__full{height:96px;padding:9px 9px 9px}
.kc__top{margin-bottom:6px}
.kc__tag{font-size:9.5px;padding:1px 6px}
.kc__t{font-size:12px;line-height:15.5px}
.kc__mini{padding:0 7px;gap:6px;font-size:11px}
.kc__mini>span:last-child{overflow:hidden;text-overflow:ellipsis}
/* the build: drawn at 800x800, scaled to fit the right panel */
.pv{width:800px;height:800px;margin:-400px 0 0 -400px}
.pv__hero{left:48px;right:48px;top:84px;width:auto;gap:16px}
.pv__h1{font-size:40px}
.pv__sub{max-width:560px}
.pv__trust{margin-top:12px}
.pv__dash{left:48px;right:48px;top:384px;width:auto;height:auto;opacity:0;transition:opacity .5s var(--ease),box-shadow .5s var(--ease)}
.pv.has-any .pv__dash{opacity:1}
.pv:not(.is-designed) .pv__dash{box-shadow:0 0 0 1px #EEF0F2}
.pv__dash .pe:not(.is-real){background:#F0F1F2!important;box-shadow:none!important}
.pv__dash:not(.is-real) .dsh__bars i{transform:none}
.dsh__chart:not(.is-real) .dsh__bars i{transform:scaleY(0)}
.dsh__rows p{grid-template-columns:1fr 140px 84px}
.dsh__rows p.pe{border-radius:0}
.app__lbl{display:none}
.pv__dash{top:362px;gap:10px}.dsh__rows p{height:26px}.pv__hero{top:80px;gap:14px}

.stg__i{flex:1 1 auto;gap:8px}.stg{gap:4px}
@media (max-width:1380px){.app__main{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}.stg__tools .ai--sm{--s:27px}.stg__tools{gap:5px}.stg__b b{font-size:13px}}

/* v9 nathan foot */
.vcard__logo{height:22px;width:auto}
.vcard__num{font-size:15px;font-weight:600;color:var(--blue,#0058F6)}


/* v9 pricing: torn top edge drawn by the silhouette (no straight top line, also when selected) */
.rc{border-radius:0 0 2px 2px;box-shadow:none!important;--e:rgba(20,22,24,.13);--ew:1px;filter:drop-shadow(var(--ew) 0 0 var(--e)) drop-shadow(calc(var(--ew)*-1) 0 0 var(--e)) drop-shadow(0 var(--ew) 0 var(--e)) drop-shadow(0 calc(var(--ew)*-1) 0 var(--e)) drop-shadow(0 16px 18px rgba(20,22,24,.09));transition:filter .25s var(--ease)}
.rc::before,.rc::after,.rc--mo.is-sel::before,.rc--mo.is-sel::after{filter:none}
.rc::before{top:-9px;height:10px;background:conic-gradient(from 135deg at 50% 0,var(--slip) 90deg,#0000 0) 0 0/12px 6px repeat-x,linear-gradient(var(--slip) 0 0) 0 5px/100% 5px no-repeat}
.rc--mo:hover{--e:rgba(0,88,246,.4)}
.rc--mo.is-sel{--e:var(--blue);--ew:1.5px}
/* v9 review slips: layered paper, zigzag tear edges, perforated stub */
.slip{background:none!important;box-shadow:none!important;border-radius:0;padding:0;isolation:isolate;filter:drop-shadow(1px 0 0 rgba(20,22,24,.1)) drop-shadow(-1px 0 0 rgba(20,22,24,.1)) drop-shadow(0 1px 0 rgba(20,22,24,.1)) drop-shadow(0 -1px 0 rgba(20,22,24,.1)) drop-shadow(0 12px 16px rgba(20,22,24,.08))}
.slip__paper,.slip::before{--zz:conic-gradient(from 135deg at 50% 0,#000 90deg,#0000 0) 0 0/12px 6px repeat-x,conic-gradient(from -45deg at 50% 100%,#000 90deg,#0000 0) 0 100%/12px 6px repeat-x;-webkit-mask-repeat:repeat-x}
.slip__paper{position:relative;padding:30px 22px 26px;background:linear-gradient(180deg,#FFFEFB,#FBF9F4);
 -webkit-mask:conic-gradient(from 135deg at 50% 0,#000 90deg,#0000 0) 0 0/12px 6px repeat-x,conic-gradient(from -45deg at 50% 100%,#000 90deg,#0000 0) 0 100%/12px 6px repeat-x,radial-gradient(circle 8px at 0 calc(100% - 64px),#0000 7.5px,#000 8px) 0 6px/51% calc(100% - 12px) no-repeat,radial-gradient(circle 8px at 100% calc(100% - 64px),#0000 7.5px,#000 8px) 100% 6px/51% calc(100% - 12px) no-repeat;
 mask:conic-gradient(from 135deg at 50% 0,#000 90deg,#0000 0) 0 0/12px 6px repeat-x,conic-gradient(from -45deg at 50% 100%,#000 90deg,#0000 0) 0 100%/12px 6px repeat-x,radial-gradient(circle 8px at 0 calc(100% - 64px),#0000 7.5px,#000 8px) 0 6px/51% calc(100% - 12px) no-repeat,radial-gradient(circle 8px at 100% calc(100% - 64px),#0000 7.5px,#000 8px) 100% 6px/51% calc(100% - 12px) no-repeat}
.slip::before{content:"";position:absolute;z-index:-1;inset:10px -5px -7px 7px;height:auto;top:10px;background:#F1EEE7;transform:rotate(1.4deg);transform-origin:50% 0;
 -webkit-mask:conic-gradient(from 135deg at 50% 0,#000 90deg,#0000 0) 0 0/12px 6px repeat-x,conic-gradient(from -45deg at 50% 100%,#000 90deg,#0000 0) 0 100%/12px 6px repeat-x,linear-gradient(#000 0 0) 0 6px/100% calc(100% - 12px) no-repeat;
 mask:conic-gradient(from 135deg at 50% 0,#000 90deg,#0000 0) 0 0/12px 6px repeat-x,conic-gradient(from -45deg at 50% 100%,#000 90deg,#0000 0) 0 100%/12px 6px repeat-x,linear-gradient(#000 0 0) 0 6px/100% calc(100% - 12px) no-repeat}
.slips .slip:nth-child(even)::before{transform:rotate(-1.2deg);inset:12px 6px -6px -5px}
.slip__num{position:relative;margin:14px -22px 0;padding:14px 22px 0;border-top:0;height:44px;box-sizing:border-box}
.slip__num::before{content:"";position:absolute;left:12px;right:12px;top:0;border-top:1.5px dashed rgba(20,22,24,.22)}
.slip__who,.slip blockquote{border-color:rgba(20,22,24,.14)}
.slip::before,.slips .slip:nth-child(even)::before{inset:14px -5px -6px 5px;transform:none;background:#EFECE5;border-radius:0 0 3px 3px;-webkit-mask:none;mask:none}


/* v9 problem read-outs pinned to the launch scene */
.p3lab{position:absolute;left:0;top:0;z-index:2;pointer-events:none;opacity:0;font-family:var(--mono);white-space:nowrap;will-change:transform,opacity;text-align:center}
.p3lab--watch b{display:block;font-size:15px;font-weight:600;letter-spacing:.02em;color:#F2A7A0;text-shadow:0 0 12px rgba(242,107,92,.55)}
.p3lab--watch span{display:block;font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(237,238,236,.55);margin-top:2px}
.p3lab--backlog{display:flex;align-items:baseline;gap:8px;padding:5px 10px;border-radius:7px;background:rgba(26,22,18,.72);box-shadow:0 0 0 1px rgba(247,178,77,.32) inset;backdrop-filter:blur(6px)}
.p3lab--backlog span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(237,238,236,.7)}
.p3lab--backlog b{font-size:15px;font-weight:600;color:#F7B24D;font-variant-numeric:tabular-nums}
.pscene.is-pov .p3lab{visibility:hidden}
@media (prefers-reduced-motion:reduce){.p3lab{display:none}}


/* ================= v10 (round 2) ================= */
/* A. tool icons: white logos only. flat graphite tile (2D) -> bevelled brushed-metal block with the white logo engraved (3D) */
.ai,.ai[style]{--c:#fff!important;--c2:#fff!important}
.ai,.tboard .ai{background:linear-gradient(180deg,#4A4F56,#3A3E44);box-shadow:0 0 0 1px rgba(16,24,40,.16)}
.ai::before{inset:0;border-radius:inherit;opacity:var(--a,0);
  background:
    radial-gradient(70% 45% at 28% 6%,rgba(255,255,255,.42),rgba(255,255,255,0) 70%),
    conic-gradient(from 210deg at 50% 50%,rgba(255,255,255,0) 0deg,rgba(255,255,255,.10) 40deg,rgba(255,255,255,0) 90deg,rgba(255,255,255,0) 200deg,rgba(255,255,255,.08) 250deg,rgba(255,255,255,0) 300deg),
    repeating-linear-gradient(90deg,rgba(255,255,255,.035) 0 1px,rgba(0,0,0,.025) 1px 2px,rgba(0,0,0,0) 2px 4px),
    linear-gradient(172deg,#6E747C 0%,#4A4F56 30%,#2E3237 62%,#1E2125 100%);
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.5),inset 0 0 0 1px rgba(255,255,255,.08),inset 1px 0 0 rgba(255,255,255,.12),inset -1px 0 0 rgba(0,0,0,.25),inset 0 -3px 4px rgba(0,0,0,.45),
    0 1px 0 #2C2F34,0 2px 0 #26292D,0 3px 0 #212327,0 4px 0 #1C1E21,0 5px 0 #17191B,0 6px 0 #131416,
    0 14px 20px -8px rgba(10,12,16,.5),0 28px 36px -20px rgba(10,12,16,.35)}
.ai>i::before{background:#fff!important}
.ai>i::after{background:linear-gradient(180deg,#fff 0%,#E6E9ED 100%)!important}
.tile.is-on .ai>i,.stg__i.is-on .ai>i{filter:drop-shadow(0 -.6px 0 rgba(0,0,0,.7)) drop-shadow(0 .7px 0 rgba(255,255,255,.28))}
.ai--xs,.ai--sm{background:#3A3E44}
/* B. stack: no dot field behind the board, sticky sits higher */
.tboard__stage::after{display:none!important}
.stk__sticky{padding-top:84px!important}
/* G. pricing: one clean zigzag top edge (single SVG stroke), sides via inset lines, no outline filter on the teeth */
.rc{filter:drop-shadow(0 16px 18px rgba(20,22,24,.09))!important;
  box-shadow:inset 1px 0 0 var(--e),inset -1px 0 0 var(--e),inset 0 -1px 0 var(--e)!important}
.rc--mo.is-sel{box-shadow:inset 1.5px 0 0 var(--e),inset -1.5px 0 0 var(--e),inset 0 -1.5px 0 var(--e)!important}
.rc::before{top:-7px;height:8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 8.5L6 1L12 8.5Z' fill='%23FBFAF6'/%3E%3Cpath d='M0 8L6 1L12 8' fill='none' stroke='%23D8D9DB' stroke-width='1'/%3E%3C/svg%3E") 0 0/12px 8px round no-repeat}
.rc--mo:hover::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 8.5L6 1L12 8.5Z' fill='%23FBFAF6'/%3E%3Cpath d='M0 8L6 1L12 8' fill='none' stroke='%2380ABFA' stroke-width='1'/%3E%3C/svg%3E")}
.rc--mo.is-sel::before{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 8.5L6 1L12 8.5Z' fill='%23FBFAF6'/%3E%3Cpath d='M0 8L6 1.2L12 8' fill='none' stroke='%230058F6' stroke-width='1.5'/%3E%3C/svg%3E")}
.rc::after{display:none}
/* G. sprint / partner switch: even track, indicator aligned to the tab it sits under */
.seg{padding:4px;gap:2px;border-radius:14px;background:#EEEEEC;box-shadow:inset 0 0 0 1px rgba(16,24,40,.07)}
.seg button{padding:9px 20px 9px 18px;border-radius:10px;gap:1px;min-width:168px}
.seg button b{font-size:14.5px;letter-spacing:-.01em}
.seg button em{font-size:9.5px;color:var(--steel)}
.seg button[aria-selected=true] em{color:var(--blue)}
.seg__ind{left:0;top:4px;bottom:4px;border-radius:10px;background:#fff;box-shadow:0 0 0 1px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.08),0 4px 12px -6px rgba(16,24,40,.25)}
.seg button:focus-visible{outline:2px solid var(--blue);outline-offset:1px}

/* Problem rail heat: colour follows scroll (set as --heat on #problemPin) */
.pscene{--heat:#F4F2EE}
.pscene__rail i{background:linear-gradient(180deg,#F4F2EE,var(--heat))!important}
#pStepN{color:var(--heat)}

/* nav over dark bands: dark translucent bar, light logo/links, light CTA. colour-only transitions */
.nav{transition:background-color .25s var(--ease),box-shadow .25s var(--ease)}
.nav__logo svg,.nav__logo g[data-part=symbol] path,.nav__links a,.nav .btn--primary{transition:fill .25s var(--ease),color .25s var(--ease),background-color .25s var(--ease),box-shadow .25s var(--ease),transform .5s cubic-bezier(.2,0,0,1)}
.nav.is-dark,.nav.is-dark.is-solid{background:rgba(14,15,17,.72);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);box-shadow:0 1px 0 rgba(255,255,255,.07)}
.nav.is-dark .nav__logo svg,.nav.is-dark .nav__logo g[data-part=symbol] path:nth-child(1),.nav.is-dark .nav__logo g[data-part=symbol] path:nth-child(2){fill:#F4F4F2}
.nav.is-dark .nav__logo g[data-part=symbol] path:last-child,.nav.is-dark .nav__logo:hover g[data-part=symbol] path:nth-child(2){fill:var(--blue-dark,#4D8DFF)}
.nav.is-dark .nav__links a{color:rgba(237,238,236,.66)}
.nav.is-dark .nav__links a:hover,.nav.is-dark .nav__links a.is-active{color:#fff;background:rgba(255,255,255,.08)}
.nav.is-dark .btn--primary{background:#F4F4F2;color:#141618;box-shadow:0 0 0 1px rgba(255,255,255,.2),0 6px 18px -8px rgba(0,0,0,.6)}

/* nav logo hover: "bfs" wordmark hands over to "Built for SaaS" (overlay, zero layout shift, interruptible CSS transitions from live value) */
.nav__logo{position:relative;display:inline-flex;align-items:center}
.nav__logo g[id=bfsLockup]>g:last-child path{transition:transform .42s cubic-bezier(.2,0,0,1) .06s,opacity .26s cubic-bezier(.2,0,0,1) .08s,fill .25s var(--ease)}
.nav__logo:hover g[id=bfsLockup]>g:last-child path{transform:translateY(-34px);opacity:0;transition-delay:0s,0s,0s}
.nav__full{position:absolute;left:31px;top:50%;display:flex;align-items:baseline;white-space:nowrap;pointer-events:none;font-family:inherit;font-size:20px;font-weight:600;line-height:1;letter-spacing:-.025em;color:var(--ink);transform:translateY(-52%);transition:color .25s var(--ease)}
.nav__full i{font-style:normal;display:inline-block;opacity:0;transform:translateY(.55em);filter:blur(3px);transition:transform .42s cubic-bezier(.2,0,0,1),opacity .2s cubic-bezier(.2,0,0,1),filter .3s cubic-bezier(.2,0,0,1);transition-delay:calc((11 - var(--i,0)) * 10ms)}
.nav__full .sp{width:.26em}
.nav__logo:hover .nav__full i{opacity:1;transform:none;filter:none;transition-duration:.5s,.3s,.35s;transition-delay:calc(70ms + var(--i,0) * 18ms)}
.nav.is-dark .nav__full{color:#F4F4F2}
@media (prefers-reduced-motion:reduce){.nav__full i,.nav__logo g[id=bfsLockup]>g:last-child path{transform:none!important;filter:none!important;transition:opacity .2s linear!important}}

/* side rails removed: the dashed scroll meter (js/meter.js) replaces them */
body::before,body::after,.joint::before,.joint::after{display:none!important}
.meter{position:fixed;left:0;top:0;z-index:40;pointer-events:none;will-change:transform}
@media print{.meter{display:none}}

/* ================= v11 tool icons: flat 2D glyph -> single solid brushed-metal slab with the white logo engraved ================= */
.ai,.ai[style],.tboard .ai,.ai--xs,.ai--sm{--spr:linear(0.000,0.131,0.358,0.562,0.715,0.821,0.890,0.934,0.960,0.977,0.986,0.992,0.995,0.997,0.999,0.999,1.000,1.000,1);background:none!important;box-shadow:none!important;
  transform:perspective(420px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translate3d(0,calc(var(--a,0) * -3px),0) scale(calc(1 + var(--a,0) * .04))}
/* 3D slab (fades in): satin brushed metal, environment reflections, rolled bevel, contact shadow. one layer, no stacked plates */
.ai::before,.ai--xs::before{display:block!important;content:"";position:absolute;inset:0;border-radius:inherit;opacity:var(--a,0);pointer-events:none;
  background:
    radial-gradient(120% 60% at 30% -8%,rgba(255,255,255,.34),rgba(255,255,255,0) 62%),
    linear-gradient(115deg,rgba(255,255,255,0) 38%,rgba(255,255,255,.13) 47%,rgba(255,255,255,0) 58%),
    repeating-linear-gradient(90deg,rgba(255,255,255,.028) 0 1px,rgba(0,0,0,.03) 1px 2px,rgba(255,255,255,0) 2px 3px),
    linear-gradient(180deg,#767C84 0%,#565B62 34%,#3E4248 70%,#30343A 100%)!important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 calc(var(--s) * .05) calc(var(--s) * .05) calc(var(--s) * -.03) rgba(255,255,255,.22),
    inset 0 calc(var(--s) * -.06) calc(var(--s) * .06) calc(var(--s) * -.03) rgba(0,0,0,.5),
    inset 0 0 0 1px rgba(0,0,0,.28),
    0 1px 1px rgba(12,14,18,.30),
    0 calc(var(--s) * .12) calc(var(--s) * .2) calc(var(--s) * -.08) rgba(12,14,18,.42),
    0 calc(var(--s) * .3) calc(var(--s) * .4) calc(var(--s) * -.22) rgba(12,14,18,.30)!important}
.ai::after{display:none!important}
.ai>i,.ai--sm>i,.ai--xs>i{inset:24%;filter:none!important;transform:none}
/* flat state: single-colour ink glyph, no tile */
.ai>i::before{background:#2A2D32!important;opacity:calc(1 - var(--a,0))!important}
/* active: white logo engraved into the face (dark lip on top edge, light catch on the bottom edge) */
.ai>i::after{background:linear-gradient(180deg,#F4F5F6 0%,#FFFFFF 55%,#E3E6EA 100%)!important;opacity:var(--a,0)!important;
  filter:drop-shadow(0 -.7px 0 rgba(0,0,0,.55)) drop-shadow(0 .7px 0 rgba(255,255,255,.3))}
.tile.is-on .ai>i,.stg__i.is-on .ai>i{filter:none!important}
/* class-driven icons (How it works): interruptible critically-damped transition, starts from the live value */
.stg__i .ai{transition:transform .9s var(--spr)!important}
.stg__i .ai::before,.stg__i .ai>i::before,.stg__i .ai>i::after{transition:opacity .7s var(--spr)!important}
@media (prefers-reduced-motion:reduce){.ai,.ai[style]{transform:none!important}}

/* v11 how it works: board inside the page frame (clear of the side meter), wider kanban, narrower build panel with even padding */
.kb .app{--W:min(1280px,calc(100vw - 160px))}
.kb .app__main{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:12px 16px;padding:14px 16px 16px}
.kcols{gap:7px}
.kcol{padding:10px 5px}
.pv{width:680px;height:800px;margin:-400px 0 0 -340px}
.pv__hero{left:40px;right:40px}
.pv__h1{font-size:38px}
.pv__dash{left:40px;right:40px;top:400px}
@media (max-width:1380px){.kb .app{--W:calc(100vw - 96px)}.kb .app__main{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr)}}
.pv__nav{left:40px!important;right:40px!important}.pv__nav>*{white-space:nowrap}.pv__nav{gap:20px}
/* nav never wider than the viewport */
.nav__in{width:min(calc(var(--wrap) + 80px),calc(100vw - 64px))}
.chip__contra{display:inline-block;height:14px;width:auto;margin:0 1px 0 4px;vertical-align:-2px;opacity:.92}

/* v11 nav logo morph: brand "bfs" hands over to live letters b/f/s, which slide apart and resize while "uilt", "or", "aaS" grow out of them */
.nav__full{--spr:linear(0.000,0.131,0.358,0.562,0.715,0.821,0.890,0.934,0.960,0.977,0.986,0.992,0.995,0.997,0.999,0.999,1.000,1.000,1);--k0:1.3;--dx:-1px;--dy:1px;display:inline-flex;align-items:baseline;opacity:0;transform-origin:0 50%;
  transform:translate(var(--dx),calc(-52% + var(--dy))) scale(var(--k0));font-weight:650;
  transition:opacity .12s linear .5s,transform .7s var(--spr),color .25s var(--ease)}
.nav__logo:hover .nav__full{opacity:1;transform:translate(0,-52%) scale(1);transition:opacity .1s linear 0s,transform .7s var(--spr),color .25s var(--ease)}
.nav__logo g[id=bfsLockup]>g:last-child path,.nav__logo:hover g[id=bfsLockup]>g:last-child path{transform:none!important}
.nav__logo g[id=bfsLockup]>g:last-child path{transition:opacity .12s linear .5s,fill .25s var(--ease)!important}
.nav__logo:hover g[id=bfsLockup]>g:last-child path{opacity:0;transition:opacity .1s linear 0s,fill .25s var(--ease)!important}
.nf-a{display:inline-grid;font-weight:inherit}
.nf-a>span{grid-area:1/1;transition:opacity .22s var(--ease),transform .7s var(--spr)}
.nf-a .up{opacity:0;transform:scale(.7,.6);transform-origin:50% 100%}
.nav__logo:hover .nf-a .up{opacity:1;transform:none;transition-delay:.06s}
.nav__logo:hover .nf-a:has(.up) .lo{opacity:0;transform:scale(1.25,1.5);transform-origin:50% 100%;transition-delay:.06s}
.nf-g{display:inline-grid;grid-template-columns:0fr;transition:grid-template-columns .7s var(--spr)}
.nf-g>span{min-width:0;overflow:hidden;white-space:pre;padding:.12em 0;margin:-.12em 0;transform:translateX(-.5em);opacity:0;transition:transform .7s var(--spr),opacity .25s var(--ease)}
.nav__logo:hover .nf-g{grid-template-columns:1fr}
.nav__logo:hover .nf-g>span{transform:none;opacity:1;transition-delay:0s,.08s}
@media (prefers-reduced-motion:reduce){.nav__full,.nf-g,.nf-g>span,.nf-a>span{transition-duration:.01s!important}}
.nav__full{width:max-content;max-width:none}
@media (max-height:800px){.stk__sticky{min-height:0;padding-top:78px!important}.stk__head{margin-bottom:14px}.stk__head h2{font-size:clamp(30px,3vw,40px)}}
.call__av--sam{position:relative;border-radius:50%;background:none;overflow:visible}.call__av--sam img{width:40px;height:40px;border-radius:50%;object-fit:cover;display:block}.call__av--sam i{position:absolute;right:-1px;bottom:-1px;width:11px;height:11px;border-radius:50%;background:#22C55E;box-shadow:0 0 0 2px #fff}.call__rec i{animation:none!important;background:#22C55E!important}
.fm--3d{display:block;height:auto;margin:40px 0 0;perspective:none}.fm__cv{display:block;width:100%;height:440px}.fm__word{display:flex;justify-content:center;margin:4px 0 24px;font-size:clamp(40px,4.6vw,68px);font-weight:600;letter-spacing:-.035em;line-height:1;color:var(--ink);user-select:none}.fm__word i{font-style:normal;display:inline-block;will-change:transform}
/* E: soft realistic shadows on real-work images */
:root{--work-sh:0 0 0 1px rgba(20,22,24,.07),0 1px 2px rgba(20,22,24,.05),0 6px 14px -4px rgba(20,22,24,.08),0 24px 48px -18px rgba(20,22,24,.18),0 48px 90px -40px rgba(20,22,24,.16)}
.mshot,.xshot,.gal__main.mshot,.rs__front.mshot,.ccard .mshot{box-shadow:var(--work-sh)!important}
.lc--img .mshot{box-shadow:0 0 0 1px rgba(20,22,24,.07),0 2px 4px rgba(20,22,24,.05),0 10px 22px -10px rgba(20,22,24,.2)!important}
.gal__t{box-shadow:0 0 0 1px rgba(20,22,24,.08),0 4px 10px -4px rgba(20,22,24,.14)}
.gal__t.is-on{box-shadow:0 0 0 2px var(--blue),0 6px 14px -6px rgba(0,88,246,.35)}
/* F (round 2): review slips back to the normal surface, ONE layer, ticket-stub style (not the invoice zigzag) */
.slip{filter:none!important;background:var(--surface)!important;border-radius:14px!important;box-shadow:0 0 0 1px rgba(20,22,24,.08),0 1px 2px rgba(20,22,24,.04),0 10px 24px -14px rgba(20,22,24,.16)!important;overflow:visible}
.slip::before,.slips .slip:nth-child(even)::before{content:none!important;display:none!important}
.slip__paper{background:none!important;padding:24px 22px 22px!important;
 -webkit-mask:radial-gradient(circle 8px at 0 calc(100% - 58px),#0000 7.5px,#000 8px) 0 0/51% 100% no-repeat,radial-gradient(circle 8px at 100% calc(100% - 58px),#0000 7.5px,#000 8px) 100% 0/51% 100% no-repeat!important;
 mask:radial-gradient(circle 8px at 0 calc(100% - 58px),#0000 7.5px,#000 8px) 0 0/51% 100% no-repeat,radial-gradient(circle 8px at 100% calc(100% - 58px),#0000 7.5px,#000 8px) 100% 0/51% 100% no-repeat!important}
.slip__num{height:auto!important;padding:14px 22px 0!important;margin:14px -22px 0!important}
#video{padding-bottom:64px}

/* Problem: glow compare toggle + stepped rail heat */
@property --heat{syntax:'<color>';inherits:true;initial-value:#F4F2EE}
.pscene{transition:--heat .32s cubic-bezier(.2,.7,.2,1)}
.pscene__rail i{background:var(--heat)!important}

/* Round 10: footer lockup + word span the content column (sized in foot3d.js) */
.fm--3d .fm__cv{height:min(560px,calc((var(--wrap) * 124 / 363) + 150px))}
.fm--3d .fm__word{width:var(--wrap);margin:0 auto 28px;justify-content:flex-start;font-size:180px;letter-spacing:-.045em;line-height:.9;white-space:nowrap}

/* ===== Round 12: simpler invoice slip, real cut-out notches ===== */
.rcw{--e:rgba(20,22,24,.12);--ew:1px;display:flex;filter:drop-shadow(var(--ew) 0 0 var(--e)) drop-shadow(calc(var(--ew)*-1) 0 0 var(--e)) drop-shadow(0 var(--ew) 0 var(--e)) drop-shadow(0 calc(var(--ew)*-1) 0 var(--e)) drop-shadow(0 14px 16px rgba(20,22,24,.08));transition:filter .25s var(--ease)}
.rcw>.rc{flex:1;min-width:0}
.rcw:has(.rc--mo:hover){--e:rgba(0,88,246,.4)}
.rcw:has(.rc--mo.is-sel){--e:var(--blue);--ew:1.5px}
.rc{--ny:70%;filter:none!important;box-shadow:none!important;border-radius:0!important;margin-top:0!important;background:#FCFBF8!important;padding:30px 28px 22px!important;
  -webkit-mask:radial-gradient(circle 10px at 0 var(--ny),#0000 9.5px,#000 10px),radial-gradient(circle 10px at 100% var(--ny),#0000 9.5px,#000 10px),conic-gradient(from 135deg at 50% 0,#000 90deg,#0000 0) 0 0/12px 6px repeat-x,linear-gradient(#000 0 0) 0 6px/100% calc(100% - 6px) no-repeat;
  -webkit-mask-composite:source-in,source-in,source-over;
  mask:radial-gradient(circle 10px at 0 var(--ny),#0000 9.5px,#000 10px),radial-gradient(circle 10px at 100% var(--ny),#0000 9.5px,#000 10px),conic-gradient(from 135deg at 50% 0,#000 90deg,#0000 0) 0 0/12px 6px repeat-x,linear-gradient(#000 0 0) 0 6px/100% calc(100% - 6px) no-repeat;
  mask-composite:intersect,intersect,add}
.rc::before,.rc::after{content:none!important;display:none!important}
.rc__head{padding-bottom:16px;border-bottom:0}
.rc__meta,.rc__to,.rc__cols,.rl__qty,.rc__items i{display:none!important}
.rc__lines{margin-top:4px}
.rc .rl{grid-template-columns:1fr 70px 104px!important;padding:14px 12px!important;border-bottom:0!important;border-top:1px solid rgba(20,22,24,.07)}
.rc .rl:first-of-type{border-top:0}
.rc .rl em{color:var(--muted)}
.rc__perf{height:0!important;border-top:1.5px dashed rgba(20,22,24,.16)!important;margin:16px -28px 16px!important}
.rc__perf::before,.rc__perf::after{content:none!important;display:none!important}
.rc__sum>div:first-child{display:none}
.rc__sum>div:not(.rc__total){border-bottom:0!important;padding-bottom:0}
.rc__total,.rc--mo .rc__tot{border-top:0!important;box-shadow:none!important;padding-top:0!important;margin-top:0!important}
.rc__note{margin-top:10px;opacity:.85}
.rc--mo .rc__t{margin:6px 0 14px}
.rc__items{gap:10px}
.rc__items li{justify-content:space-between}
.rc--mo .rc__note{min-height:0;margin-bottom:16px}
.rc .rl__d b{font-family:var(--f);font-size:16px;letter-spacing:-.015em}
.rc .rl__d b::after{content:none}
.rc .rl__d em{font-family:var(--f);font-size:13px;letter-spacing:0}
.rc .rl__p{font-family:var(--f);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums}
.rc .rl.is-sel,.rc .rl.is-sel+.rl{border-top-color:transparent}
.rc .rl.is-sel{background:rgba(0,88,246,.03)}
.rc--mo .rc__t{font-family:var(--f)!important;font-size:24px!important}
.rc .rl{grid-template-columns:1fr 70px 128px!important}.rc .rl__p{white-space:nowrap}
.rcw{position:relative;filter:drop-shadow(var(--ew) 0 0 var(--e)) drop-shadow(calc(var(--ew)*-1) 0 0 var(--e)) drop-shadow(0 var(--ew) 0 var(--e)) drop-shadow(0 calc(var(--ew)*-1) 0 var(--e))}
.rcw::after{content:"";position:absolute;z-index:-1;left:3%;right:3%;bottom:2px;height:60px;border-radius:0 0 40% 40%;box-shadow:0 18px 26px -12px rgba(20,22,24,.16)}

/* ================= round 12 ================= */
/* nav logo morph is JS-driven (main.js): CSS only fixes the final layout and removes the old transitions */
.nm-js .nav__full,.nm-js .nav__full *,.nm-js #bfsLockup>g:last-child,.nm-js #bfsLockup>g:last-child path{transition:color .25s var(--ease),fill .25s var(--ease)!important}
.nm-js .nav__full{opacity:0;will-change:transform,opacity}
.nm-js .nf-g,.nav__logo.nm-js:hover .nf-g{grid-template-columns:1fr!important;display:inline-block}
.nm-js .nf-g>span,.nav__logo.nm-js:hover .nf-g>span{transform:none!important;opacity:1!important;display:inline;padding:0!important;margin:0!important;overflow:visible}
.nm-js .nf-a{display:inline-block;position:relative}.nm-js .nf-a .up{position:absolute;left:0;bottom:0}
.nm-js .nf-a>span,.nav__logo.nm-js:hover .nf-a>span{transform:none!important}
.nm-js .nf-a .up{opacity:0}
.nm-js #bfsLockup>g:last-child path,.nav__logo.nm-js:hover #bfsLockup>g:last-child path{opacity:1!important}
/* hero eyebrow: Contra logo, hairline, words (no blue mark) */
.chip--contra{gap:10px;padding:0 14px 0 12px}
.chip--contra .chip__contra{margin:0;height:14px;vertical-align:0;opacity:1}
.chip__sep{width:1px;height:14px;background:var(--line2,rgba(20,22,24,.18))}
/* gold stars everywhere in testimonials */
:root{--gold:#F2A900;--gold2:#FFC83D}
.stars{color:var(--gold)!important;letter-spacing:2px}
.stars5__s svg,.gstars svg{fill:var(--gold)!important}
.gstars{display:inline-flex;gap:3px}.gstars svg{width:16px;height:16px}
/* 5-star verified rating badge (reviews header) */
.vrate{display:inline-flex;align-items:center;gap:16px;padding:10px 20px 10px 10px;border-radius:999px;background:var(--surface,#fff);box-shadow:0 0 0 1px rgba(20,22,24,.08),0 8px 22px -14px rgba(20,22,24,.25);align-self:end}
.vrate__badge{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border-radius:999px;background:#FFF7E0;box-shadow:inset 0 0 0 1px rgba(242,169,0,.28)}
.vrate__badge>b{font-size:22px;font-weight:650;letter-spacing:-.02em;color:var(--ink);line-height:1}
.vrate__t{display:flex;flex-direction:column;gap:4px}
.vrate__t b{font-size:15px;font-weight:600;color:var(--ink)}
.vrate__t em{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:11px;color:var(--muted);letter-spacing:.02em}
.vrate__ok{width:14px;height:14px;border-radius:50%;background:#1F9D63;position:relative;flex:none}
.vrate__ok::after{content:"";position:absolute;inset:0;background:#fff;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.4l2.4 2.4 5.2-5.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.4l2.4 2.4 5.2-5.4' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
/* Handled list: centred check inside a correctly sized circle badge */
.done__ck{width:22px;height:22px;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--line2,rgba(20,22,24,.18));background:transparent;justify-self:start;overflow:hidden}
.done__ck::after{left:0;top:0;width:100%;height:100%;border:0;background:#fff;transform:scale(.4);opacity:0;transition:transform .45s cubic-bezier(.2,0,0,1),opacity .2s linear;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.6 11.4l3 3 5.8-6.2' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M6.6 11.4l3 3 5.8-6.2' fill='none' stroke='%23000' stroke-width='2.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/100% no-repeat}
.done li.is-done .done__ck{background:var(--blue);box-shadow:none}
.done li.is-done .done__ck::after{transform:none;opacity:1}
/* big quote: compact */
.bigquote--sm{padding:96px 0 8px}
.bigquote--sm .gstars{justify-content:center;margin:0 auto 18px;display:flex}
.bigquote--sm blockquote{font-size:34px;line-height:1.16;max-width:860px;margin-bottom:24px}
.vcard__q--long{font-size:26px;line-height:1.22}
/* written testimonials: one sheet of letter paper each (not the invoice slip): warm cream, folded corner, soft single shadow */
.slip{background:none!important;box-shadow:none!important;border-radius:0!important;filter:drop-shadow(0 1px 1px rgba(20,22,24,.08)) drop-shadow(0 12px 22px rgba(20,22,24,.10))!important}
.slip::before,.slip::after{content:none!important;display:none!important}
.slip__paper{--fold:22px;position:relative;background:
    linear-gradient(225deg,#E9E2D2 0,#F3EEE2 calc(var(--fold) * .7),transparent calc(var(--fold) * .7)) top right/var(--fold) var(--fold) no-repeat,
    linear-gradient(180deg,#FFFDF7,#FBF7EE)!important;
  -webkit-mask:none!important;mask:none!important;clip-path:polygon(0 0,calc(100% - var(--fold)) 0,100% var(--fold),100% 100%,0 100%);border-radius:0!important;padding:26px 24px 22px!important;box-shadow:inset 0 0 0 1px rgba(120,100,60,.12)}
.slip__paper::after{content:"";position:absolute;left:24px;top:0;bottom:0;width:0;border-left:1px solid rgba(229,72,62,.0)}
.slip blockquote{font-family:inherit;color:#4A4741!important}
.slip blockquote .best{color:#1B1A17!important}
.slip__num::before{border-top:1px solid rgba(120,100,60,.18)!important}

/* r12: kanban, Hirely app header + status dots lit only while the column holds a card */
.app .kcol--req{--c:#14B8A6}
.app__bar{gap:14px!important;background:#fff!important}
.app__brand{display:inline-flex;align-items:center;gap:7px;color:#0B0B0C;padding-right:14px;border-right:1px solid rgba(16,24,40,.08);height:22px}
.app__brand b{font-family:Inter,Geist,system-ui,sans-serif;font-weight:600;font-size:14px;letter-spacing:-.01em}
.app__search{display:inline-flex;align-items:center;gap:7px;margin-left:auto;height:28px;width:220px;padding:0 10px;border-radius:7px;background:#F4F4F5;box-shadow:inset 0 0 0 1px rgba(16,24,40,.06);color:#8A9097;font-size:11.5px}
.app__search+.app__people{margin-left:0!important}
.kcol .sdot{background:#C9CDD2!important;box-shadow:0 0 0 2.5px rgba(16,24,40,.06)!important;transition:background-color .45s var(--ease),box-shadow .45s var(--ease)}
.kcol.is-lit .sdot{background:var(--c)!important;box-shadow:0 0 0 2.5px color-mix(in srgb,var(--c) 18%,transparent),0 0 9px 1px color-mix(in srgb,var(--c) 70%,transparent)!important}

/* r12: Partner state, no blue under-glow; selection is a quiet 1px edge like the sprint slip */
.rcw::after{content:none!important}
.rcw{filter:drop-shadow(var(--ew) 0 0 var(--e)) drop-shadow(calc(var(--ew)*-1) 0 0 var(--e)) drop-shadow(0 var(--ew) 0 var(--e)) drop-shadow(0 calc(var(--ew)*-1) 0 var(--e)) drop-shadow(0 10px 14px rgba(20,22,24,.06))!important}
.rcw:has(.rc--mo:hover){--e:rgba(0,88,246,.32)}
.rcw:has(.rc--mo.is-sel){--e:rgba(0,88,246,.55);--ew:1px}

/* r12: tool icons, satin steel, one face: smooth reflections + fine grain, soft rolled bevel, no line patterns or hard bands */
.ai::before,.ai--xs::before{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9 .06' numOctaves='2' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='96' height='96' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/96px 96px,
    radial-gradient(140% 80% at 28% -10%,rgba(255,255,255,.30),rgba(255,255,255,0) 60%),
    radial-gradient(120% 70% at 80% 118%,rgba(255,255,255,.10),rgba(255,255,255,0) 60%),
    linear-gradient(160deg,#7A8088 0%,#60666D 30%,#4A4F56 62%,#3A3E44 100%)!important;
  box-shadow:
    inset 0 .5px .5px rgba(255,255,255,.42),
    inset 0 calc(var(--s) * .06) calc(var(--s) * .08) calc(var(--s) * -.04) rgba(255,255,255,.16),
    inset 0 calc(var(--s) * -.07) calc(var(--s) * .08) calc(var(--s) * -.04) rgba(0,0,0,.34),
    0 0 0 .5px rgba(12,14,18,.35),
    0 calc(var(--s) * .1) calc(var(--s) * .18) calc(var(--s) * -.08) rgba(12,14,18,.36),
    0 calc(var(--s) * .26) calc(var(--s) * .36) calc(var(--s) * -.22) rgba(12,14,18,.24)!important}
.ai>i::after{background:linear-gradient(180deg,#FFFFFF 0%,#F2F4F6 60%,#E1E5EA 100%)!important;
  filter:drop-shadow(0 -.5px .3px rgba(0,0,0,.45)) drop-shadow(0 .5px .2px rgba(255,255,255,.22))}

.reel__cases{grid-template-columns:repeat(9,1fr)!important;gap:4px!important}.reel__cases img{border-radius:4px}
/* ===== Round 13: No-Figma x-ray restored, tubecut sections per step (image + code change together) ===== */
.xray--steps .xshot__img{background:#0d0c14}
.xray--steps .xstep{opacity:0;transition:opacity .45s var(--ease)}
.xray--steps .xstep.is-on{opacity:1}
.xray--steps .xbox{opacity:0;transition:opacity .35s var(--ease),box-shadow .35s var(--ease)}
.xray--steps .xbox.is-on{opacity:1}
.xtabs{display:inline-flex;gap:6px;margin-left:auto}
.xray--steps .xshot__bar a{margin-left:14px}
.xtabs .xpin{position:relative;margin:0;width:24px;height:24px;background:var(--surface);box-shadow:0 0 0 1px var(--line) inset;color:var(--muted);backdrop-filter:none}
.xtabs .xpin::before{inset:-4px}
.xtabs .xpin:hover,.xtabs .xpin.is-on{background:var(--blue);color:#fff;box-shadow:0 0 0 1px var(--blue) inset;transform:none}
.xfile{display:grid}.xfile em{grid-area:1/1;font-style:normal;opacity:0;transition:opacity .3s var(--ease)}.xfile em.is-on{opacity:1}
.xsrc{display:grid}
.xsrc .xcode__src{grid-area:1/1;opacity:0;transform:translate3d(0,6px,0);transition:opacity .35s var(--ease),transform .45s var(--ease);pointer-events:none}
.xsrc .xcode__src.is-on{opacity:1;transform:none;pointer-events:auto}
.xsrc .xl--h{background:rgba(0,88,246,.16);color:#fff;box-shadow:inset 2px 0 0 var(--blue)}
.xsrc .xl--h em{color:#a9c4ff}
.xtabs{gap:10px;padding:0 4px}

/* ===== Round 14: kanban builds the real Hirely site, section by section ===== */
.pv__page{overflow:hidden;background:#fff}
.hy{position:absolute;left:0;top:0;width:100%;display:flex;flex-direction:column;will-change:transform}
.hy__s{position:relative;margin:0;opacity:0;transition:opacity .5s var(--ease)}
.hy__s img{display:block;width:100%;height:auto;opacity:0;filter:grayscale(1);transition:opacity .55s var(--ease),filter .55s var(--ease)}
.hy__s figcaption{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:11px;letter-spacing:.04em;text-transform:uppercase;color:#8A9097;background:#fff;padding:5px 10px;border-radius:999px;box-shadow:0 0 0 1px #E3E5E8;transition:opacity .4s var(--ease)}
.hy__s::after{content:"";position:absolute;inset:6px 10px;border-radius:10px;box-shadow:inset 0 0 0 1px #E3E5E8;background:#F6F7F8;transition:opacity .45s var(--ease),box-shadow .45s var(--ease),background-color .45s var(--ease)}
.hy__s figcaption{z-index:1}
.hy__s.is-plan{opacity:1}
.hy__s.is-wip img{opacity:.45}
.hy__s.is-wip::after{background:transparent;box-shadow:inset 0 0 0 1.5px rgba(0,88,246,.55)}
.hy__s.is-wip figcaption{color:var(--blue);box-shadow:0 0 0 1px rgba(0,88,246,.35)}
.hy__s.is-done img{opacity:1;filter:none}
.hy__s.is-done::after,.hy__s.is-done figcaption{opacity:0}
.kb .pv{height:930px;margin-top:-465px}
.chip__em{font-weight:600;color:var(--ink)}.chip--contra{white-space:nowrap}
.app__bar{position:relative}
.app__prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--blue);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
.kb__cur{position:absolute;left:0;top:0;z-index:5;width:16px;height:16px;opacity:0;pointer-events:none;transition:opacity .35s var(--ease);filter:drop-shadow(0 1px 1.5px rgba(16,24,40,.3))}
.app.is-idle.is-vis .kb__cur{opacity:1;animation:kbCur 2.8s cubic-bezier(.45,0,.25,1) infinite}
@keyframes kbCur{0%,100%{transform:translate3d(150px,120px,0)}35%,60%{transform:translate3d(96px,78px,0)}}
.app.is-idle.is-vis .kc:first-of-type .kc__full{animation:kbLift 2.8s cubic-bezier(.45,0,.25,1) infinite}
@keyframes kbLift{0%,30%,70%,100%{transform:none}42%,58%{transform:translate3d(4px,-3px,0) rotate(-1.2deg)}}
.kc__full{border-radius:inherit;background:#fff;transform-origin:50% 60%}
.app.is-vis .hy__s.is-plan:not(.is-wip):not(.is-done)::after{background:linear-gradient(100deg,#F4F5F6 30%,#FBFBFC 50%,#F4F5F6 70%) 0 0/300% 100%;animation:kbShim 1.8s linear infinite}
@keyframes kbShim{from{background-position:100% 0}to{background-position:0 0}}
@media (prefers-reduced-motion:reduce){.kb__cur,.app.is-vis .hy__s::after,.kc__full{animation:none!important}}
/* kickoff sitemap + wireframes */
.smap{position:absolute;inset:0;z-index:3;background:#F5F5F3 radial-gradient(circle,#CFD2D6 1.1px,transparent 1.4px) 0 0/20px 20px;transition:opacity .45s var(--ease);overflow:hidden}
.smap.is-off{opacity:0;pointer-events:none}
.smap>svg{position:absolute;left:0;top:0;overflow:visible}
.smap>svg path{fill:none;stroke:#7D838A;stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset .45s cubic-bezier(.22,1,.36,1)}
.smap>svg path.is-in{stroke-dashoffset:0}
.smap marker path{fill:#7D838A;stroke:none;stroke-dasharray:none;stroke-dashoffset:0}
.smap>svg path:not(.is-in){marker-end:none}
.fj [data-t]:not(path){opacity:0;transform:translate3d(0,10px,0) scale(.9);transition:opacity .3s var(--ease),transform .55s cubic-bezier(.34,1.35,.64,1)}
.fj [data-t].is-in:not(path){opacity:1;transform:none}
.fj__file{position:absolute;left:16px;top:16px;display:flex;align-items:center;gap:8px;height:40px;padding:0 14px 0 10px;background:#fff;border-radius:var(--r-chip);box-shadow:0 0 0 1px #E2E4E7,0 2px 8px -4px rgba(16,24,40,.18);font-size:15px;color:var(--ink)}
.fj__file span{color:var(--steel)}
.fj__fi{width:20px;height:20px;border-radius:4px;background:conic-gradient(from 45deg,var(--blue) 0 25%,#F2C94C 0 50%,#E5484D 0 75%,#30A46C 0)}
.fj__who{position:absolute;right:16px;top:18px;display:flex}
.fj__av{width:34px;height:34px;margin-left:-6px;display:grid;place-items:center;border-radius:50%;border:2px solid #F5F5F3;font:600 11.5px/1 var(--mono,monospace);font-style:normal;color:#fff;background:var(--blue)}
.fj__av--b{background:var(--ink)}.fj__av--c{background:#8C9197}
.fj__sec{position:absolute;border-radius:var(--r-chip);background:rgba(255,255,255,.55);box-shadow:inset 0 0 0 1.5px #D9DCE0}
.fj__sec em{position:absolute;left:8px;top:6px;height:24px;padding:0 9px;display:flex;align-items:center;border-radius:4px;background:#E9EAEC;font-size:12.5px;font-style:normal;color:#5E6369}
.fj__c{position:absolute;perspective:700px}
.fj__in{position:relative;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.34,1.2,.64,1);transition-delay:calc(var(--f,0) * 45ms)}
.fj__c.is-wf .fj__in{transform:rotateY(180deg)}
.fj__f,.fj__b{backface-visibility:hidden;-webkit-backface-visibility:hidden;padding:9px;border-radius:var(--r-chip);background:#fff;box-shadow:0 0 0 1.5px #DADDE2,0 3px 10px -5px rgba(16,24,40,.22)}
.fj__b{position:absolute;inset:0;transform:rotateY(180deg);background:#F1F2F4}
.fj__f b{display:flex;align-items:center;gap:6px;height:26px;font-size:15px;font-weight:600;color:var(--ink)}
.fj__f b span{font-size:12px;color:var(--steel);font-weight:400}
.fj__f p,.fj__b p{margin:6px 0 0;display:flex;flex-direction:column;gap:5px}
.fj__f i{display:block;height:24px;padding:0 8px;line-height:24px;border-radius:4px;background:#F1F3F5;font-size:12.5px;font-style:normal;color:#4A5057;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;transform:translate3d(0,6px,0);transition:opacity .25s var(--ease),transform .4s cubic-bezier(.34,1.3,.64,1);transition-delay:calc(.12s + var(--d) * 50ms)}
.fj__c.is-in .fj__f i{opacity:1;transform:none}
.fj__f i:first-child{background:#E6EEFE;color:#0B3FA8}
.fj__b b{display:block;height:26px;width:60%;border-radius:4px;background:#D5D9DE}
.fj__b i{display:block;height:24px;border-radius:4px;background:#DFE2E6}
.fj__b i:nth-child(2n){width:78%}
.fj__c--home .fj__f{background:var(--ink);box-shadow:0 4px 14px -6px rgba(16,24,40,.45)}
.fj__c--home .fj__f b{color:#fff}
.fj__c--home .fj__f p{flex-direction:row;flex-wrap:wrap}
.fj__c--home .fj__f i{background:#2A2D31;color:#D5D8DC;width:calc((100% - 10px)/3);padding:0 6px}
.fj__c--home .fj__f i:first-child{background:var(--blue);color:#fff}
.fj__c--home .fj__b p{flex-direction:row;flex-wrap:wrap}.fj__c--home .fj__b i{width:calc((100% - 10px)/3)}
.fj__lbl{position:absolute;margin:0;font-size:12.5px;color:#5E6369}
.fj__note{position:absolute;width:168px;min-height:118px;padding:14px 14px 30px;border-radius:2px;box-shadow:0 1px 1px rgba(16,24,40,.06),0 8px 18px -10px rgba(16,24,40,.35);rotate:var(--r)}
.fj__note p{margin:0;font-size:14.5px;line-height:1.35;color:#23262A;font-weight:500}
.fj__note span{position:absolute;left:14px;bottom:10px;font-size:11px;color:rgba(20,22,24,.55)}
.fj__note--a{background:#F6EBC8}.fj__note--b{background:#D9E5FD}.fj__note--c{background:#DDEDE3}
.fj [data-t].fj__note{transform:translate3d(0,-18px,0) scale(1.08)}
.fj [data-t].fj__note.is-in{transform:none}
.fj__tool{position:absolute;left:50%;bottom:22px;translate:-50% 0;display:flex;gap:4px;padding:6px;background:#fff;border-radius:var(--r-chip);box-shadow:0 0 0 1px #E2E4E7,0 6px 18px -8px rgba(16,24,40,.3)}
.fj__tool i{width:40px;height:40px;display:grid;place-items:center;border-radius:4px;color:#3A3E44}
.fj__tool i.is-on{background:var(--blue);color:#fff}
.fj__tool svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linejoin:round;stroke-linecap:round}
.fj__tool i.is-on svg{fill:currentColor}
.fj__zoom{position:absolute;right:16px;bottom:28px;display:flex;align-items:center;height:36px;background:#fff;border-radius:var(--r-chip);box-shadow:0 0 0 1px #E2E4E7;font-size:13px;color:#3A3E44}
.fj__zoom i{width:32px;text-align:center;font-style:normal}.fj__zoom span{padding:0 4px}
.fj__cur{position:absolute;left:0;top:0;z-index:5;will-change:transform}
.fj__ci svg{display:block;width:22px;height:22px;fill:var(--blue);stroke:#fff;stroke-width:1.2;filter:drop-shadow(0 1px 1.5px rgba(0,0,0,.25))}
.fj__ci span{position:absolute;left:18px;top:18px;padding:3px 8px;border-radius:3px;background:var(--blue);color:#fff;font-size:13px;font-weight:550;white-space:nowrap}
.fj__cur--b svg{fill:var(--ink)}.fj__cur--b span{background:var(--ink)}
.app.is-idle.is-vis .fj__cur--a .fj__ci{animation:fjIdle 3.2s ease-in-out infinite}
.app.is-idle.is-vis .fj__cur--b .fj__ci{animation:fjIdle 4s ease-in-out -1.4s infinite reverse}
@keyframes fjIdle{0%,100%{transform:translate3d(0,0,0)}35%{transform:translate3d(14px,8px,0)}70%{transform:translate3d(-6px,12px,0)}}
@media (prefers-reduced-motion:reduce){.fj *{transition:none!important;animation:none!important}}
.wf{position:absolute;inset:0;z-index:1;opacity:0;transition:opacity .35s var(--ease)}
.wf i{position:absolute;display:block;border-radius:5px;background:#E3E6E9;transform:scale(.96);opacity:0;transition:opacity .4s var(--ease),transform .5s cubic-bezier(.22,1,.36,1)}
.hy__s.is-plan .wf{opacity:1}.hy__s.is-plan .wf i{opacity:1;transform:none}
.hy__s.is-wip .wf,.hy__s.is-done .wf{opacity:0}
.wf i:nth-child(2n){transition-delay:.04s}.wf i:nth-child(3n){transition-delay:.08s}.wf i:nth-child(5n){transition-delay:.12s}
.wf .w-ln--s{background:#ECEEF0}.wf .w-ln--l{background:#4A4E55}
.wf .w-pill{border-radius:4px;background:#C9CDD2}.wf .w-pill--o{background:#fff;box-shadow:inset 0 0 0 1.5px #D5D8DC}
.wf .w-blk{border-radius:6px;background:#EEF0F2;box-shadow:inset 0 0 0 1px #E1E4E7}
.wf .w-blk--d{background:#2B2E33;box-shadow:none}.wf .w-blk--l{background:#3A3E44}
.wf .w-sq{border-radius:6px;background:#D8DBDF}.wf .w-bar{border-radius:8px;background:#ECEEF0}
.hy__s figcaption{top:14px;left:18px;transform:none;z-index:2}
.hy__s.is-plan:not(.is-wip):not(.is-done)::after{inset:6px 10px}

/* Round 15: check badges follow the square radius language (--r-chip) */
.done__ck{border-radius:var(--r-chip)}
.pcheck li::before{border-radius:4px}
.rc-side__l li::before{border-radius:4px;background:linear-gradient(var(--blue),var(--blue)) center/5px 5px no-repeat}
.kc__ok{border-radius:3px}

/* Round 16: Possible mark is two-tone (light top, ink bottom); keep its tones instead of flattening to black */
.clients__grid img[src$="possible.svg"]{filter:none}

/* Round 16: testimonial letter paper in the site's own neutrals (white / #F7F7F5 paper / ink lines), not cream:
   soft fibre grain, slight edge shading, folded corner, one soft shadow */
.slip__paper{background:
    linear-gradient(225deg,#E4E5E2 0,#F1F1EF calc(var(--fold) * .7),transparent calc(var(--fold) * .7)) top right/var(--fold) var(--fold) no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .08 0 0 0 0 .09 0 0 0 0 .1 0 0 0 .045 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E") 0 0/160px 160px,
    radial-gradient(120% 90% at 50% 40%,transparent 62%,rgba(20,22,24,.035) 100%),
    linear-gradient(180deg,#FFFFFF 0%,#FCFCFB 55%,#F7F7F5 100%)!important;
  box-shadow:inset 0 0 0 1px rgba(20,22,24,.08),inset 0 1px 0 #fff!important}
.slip blockquote{color:var(--muted)!important}
.slip blockquote .best{color:var(--ink)!important}
.slip__num::before{border-top:1px solid var(--line)!important}
.slip__who{border-color:var(--line)!important}

/* Round 16: ONE clean edge on the invoice slips that traces the zigzag + notches.
   The slip itself is filled with the edge colour; a paper layer, eroded by --ew on every side
   (zigzag shifted down by ew*1.414 for its 45deg teeth, notches grown by ew), sits on top. No drop-shadow rings. */
.rcw{filter:drop-shadow(0 10px 14px rgba(20,22,24,.07))!important}
.rcw .rc,.rcw .rc.rc--mo.is-sel,.rcw .rc.rc--mo:hover{background:var(--e)!important;box-shadow:none!important;isolation:isolate}
.rcw .rc::before,.rcw .rc.rc--mo.is-sel::before,.rcw .rc.rc--mo:hover::before{content:""!important;display:block!important;position:absolute;z-index:-1;left:var(--ew);right:var(--ew);top:0;bottom:var(--ew);height:auto;filter:none!important;
  background:#FCFBF8!important;background-image:none!important;
  -webkit-mask:radial-gradient(circle calc(10px + var(--ew)) at calc(var(--ew) * -1) var(--ny),#0000 calc(9.5px + var(--ew)),#000 calc(10px + var(--ew))),radial-gradient(circle calc(10px + var(--ew)) at calc(100% + var(--ew)) var(--ny),#0000 calc(9.5px + var(--ew)),#000 calc(10px + var(--ew))),conic-gradient(from 135deg at 50% 0,#000 90deg,#0000 0) calc(var(--ew) * -1) calc(var(--ew) * 1.414)/12px 6px repeat-x,linear-gradient(#000 0 0) 0 calc(6px + var(--ew) * 1.414)/100% 100% no-repeat;
  -webkit-mask-composite:source-in,source-in,source-over;
  mask:radial-gradient(circle calc(10px + var(--ew)) at calc(var(--ew) * -1) var(--ny),#0000 calc(9.5px + var(--ew)),#000 calc(10px + var(--ew))),radial-gradient(circle calc(10px + var(--ew)) at calc(100% + var(--ew)) var(--ny),#0000 calc(9.5px + var(--ew)),#000 calc(10px + var(--ew))),conic-gradient(from 135deg at 50% 0,#000 90deg,#0000 0) calc(var(--ew) * -1) calc(var(--ew) * 1.414)/12px 6px repeat-x,linear-gradient(#000 0 0) 0 calc(6px + var(--ew) * 1.414)/100% 100% no-repeat;
  mask-composite:intersect,intersect,add}
.rcw{--e:rgba(20,22,24,.14);--ew:1px}
.rcw:has(.rc--mo:hover){--e:rgba(0,88,246,.45);--ew:1px}
.rcw:has(.rc--mo.is-sel){--e:var(--blue)!important;--ew:1.5px!important}

/* Round 17: No Figma handoff = tubecut hero only, Figma-style selection per element, code follows */
.xshot__img--one .xstep{opacity:1}
.xsrc--one{height:333px;overflow:hidden;position:relative}
.xsrc--one .xcode__src{transition:transform .6s cubic-bezier(.22,1,.36,1);will-change:transform}
.xsrc--one .xl--c{color:#5d646b}
.xray--steps .xsel{border-radius:0;background:rgba(0,88,246,.08);box-shadow:0 0 0 1.5px var(--blue);transition:opacity .3s var(--ease)}
.xray--steps .xsel.is-on{box-shadow:0 0 0 1.5px var(--blue);background:rgba(0,88,246,.08)}
.xsel b,.xsel s{position:absolute;height:18px;padding:0 6px;display:flex;align-items:center;background:var(--blue);color:#fff;font-size:10px;font-weight:500;letter-spacing:.02em;text-decoration:none;white-space:nowrap;border-radius:2px}
.xsel b{left:-1.5px;top:-22px}
.xsel s{left:50%;bottom:-24px;translate:-50% 0;text-transform:none;background:#1b3f8f}
.xsel i{position:absolute;width:7px;height:7px;background:#fff;box-shadow:0 0 0 1.5px var(--blue)}
.xsel i:nth-of-type(1){left:-4px;top:-4px}.xsel i:nth-of-type(2){right:-4px;top:-4px}.xsel i:nth-of-type(3){left:-4px;bottom:-4px}.xsel i:nth-of-type(4){right:-4px;bottom:-4px}
.xtabs .xpin,.xtabs .xpin::before{border-radius:4px}
.xsrc--one .xcode__src{overflow:visible;height:auto;align-self:start}

/* Round 17: steel finish for the 3D tool icons (superseded by Round 19 below) */
.ai::before,.ai--xs::before{
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.015 .9' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .028 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/120px 120px,
    radial-gradient(130% 70% at 26% -12%,rgba(255,255,255,.26),rgba(255,255,255,0) 58%),
    linear-gradient(112deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.09) 44%,rgba(255,255,255,0) 56%),
    radial-gradient(120% 70% at 78% 120%,rgba(255,255,255,.07),rgba(255,255,255,0) 60%),
    linear-gradient(165deg,#5C6168 0%,#464A50 32%,#34373C 66%,#26282C 100%)!important;
  box-shadow:
    inset 0 .6px .4px rgba(255,255,255,.5),
    inset 0 calc(var(--s) * .05) calc(var(--s) * .06) calc(var(--s) * -.035) rgba(255,255,255,.14),
    inset 0 calc(var(--s) * -.06) calc(var(--s) * .07) calc(var(--s) * -.035) rgba(0,0,0,.42),
    0 0 0 .5px rgba(10,12,14,.45),
    0 calc(var(--s) * .1) calc(var(--s) * .18) calc(var(--s) * -.08) rgba(10,12,14,.4),
    0 calc(var(--s) * .26) calc(var(--s) * .36) calc(var(--s) * -.22) rgba(10,12,14,.26)!important}
/* Round 18: Problem caption + Glow share the stage centre (JS writes the stage centre/bottom from the projected particle bbox) */
.pstack{position:absolute;left:0;top:0;z-index:3;display:flex;flex-direction:column;align-items:center;gap:12px;pointer-events:none;will-change:transform;
  transform:translate3d(calc(var(--sx,1000px) - 50%),calc(var(--sy,700px) + 28px),0)}
.pstack .pscene__tags,.pscene.is-resolved .pstack .pscene__tags{position:relative;right:auto;bottom:auto;top:auto;transform:none;justify-items:center}
.pscene.is-pov .pstack{opacity:0}
.pstack{transition:opacity .5s var(--ease)}
@media (prefers-reduced-motion:reduce){.pstack{position:static;transform:none;padding:0 0 40px}}

/* Round 19: the only metal = dark brushed steel with fine hairline scuffs. 3D marks use js/steel.js */
.ai::before,.ai--xs::before{
  background:
    url("../assets/brand/steel-scratches.svg") var(--scx,0) var(--scy,0)/calc(var(--s) * 1.9) calc(var(--s) * 1.9),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.012 .8' numOctaves='2' seed='7' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E") 0 0/120px 120px,
    radial-gradient(130% 70% at 26% -12%,rgba(255,255,255,.2),rgba(255,255,255,0) 58%),
    linear-gradient(112deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.07) 44%,rgba(255,255,255,0) 56%),
    radial-gradient(120% 70% at 78% 120%,rgba(255,255,255,.05),rgba(255,255,255,0) 60%),
    linear-gradient(165deg,#4A4E54 0%,#383B40 32%,#2A2C30 66%,#1E2023 100%)!important}
.tile:nth-child(3n+1) .ai{--scx:-31%;--scy:-12%}.tile:nth-child(3n+2) .ai{--scx:-58%;--scy:-47%}.tile:nth-child(4n) .ai{--scx:-14%;--scy:-71%}

/* Round 19 perf: 11 promoted kanban card layers forced the whole pinned board to re-composite every scroll frame (process: 90 -> 14 slow frames per pass) */
.kc{will-change:auto}
/* no-figma: unnumbered markers */
.xtabs .xpin{width:12px;height:12px;font-size:0}
.xtabs{gap:8px;align-items:center}
.xtabs .xpin::before{inset:-3px}
.xnote__t{display:block!important;grid-template-columns:none!important}
/* stack: tonal panel, hairline border, faint fading dot grid (square) */
#tboard .tboard__stage{border-radius:0;background:linear-gradient(180deg,#FBFBFA 0%,#F3F3F1 55%,#ECEDEB 100%);box-shadow:inset 0 0 0 1px rgba(16,24,40,.09),inset 0 1px 0 #fff,inset 0 10px 24px -14px rgba(16,24,40,.10),inset 0 -14px 28px -18px rgba(16,24,40,.12)}
#tboard .tboard__stage::after{display:block!important;content:"";position:absolute;inset:0;border-radius:0;pointer-events:none;background-image:radial-gradient(circle,rgba(16,24,40,.16) .9px,transparent 1.2px);background-size:18px 18px;background-position:center;-webkit-mask:radial-gradient(75% 70% at 50% 50%,#000 25%,transparent 100%);mask:radial-gradient(75% 70% at 50% 50%,#000 25%,transparent 100%);opacity:.8}
/* pricing: launch discount on the slip */
.rc__offer{display:inline-block;vertical-align:2px;margin-left:6px;padding:2px 6px 1px;font:500 9.5px/1.3 var(--mono,ui-monospace),monospace;letter-spacing:.08em;text-transform:uppercase;font-style:normal;color:var(--blue);background:rgba(0,88,246,.08);box-shadow:inset 0 0 0 1px rgba(0,88,246,.22);border-radius:0}
.rc .rl__p .rl__was{display:block;font-size:11.5px;font-weight:400;color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px;line-height:1.1;margin-bottom:2px}
.rc__sum>.rc__reg:not([hidden]),.rc__sum>.rc__disc:not([hidden]){display:flex!important;justify-content:space-between;font-size:12.5px;color:var(--muted)}
.rc__sum .rc__reg s{color:var(--muted);text-decoration-thickness:1px}
.rc__sum .rc__disc span:last-child{color:var(--blue);font-weight:600}
.rc__sum--mo{margin:0 0 10px}
.rc__total.is-off b,.rc--mo .rc__tot.is-off b{color:var(--blue)}
.rc__total.is-off b #sprintFrom{display:none}
/* nav logo slot roll (main.js): the link is the 30px window; nothing inside animates except transform */
.nav__logo.nm-roll{clip-path:inset(0 -600px 0 -24px)}
.nm-roll .nav__full,.nm-roll .nav__full *,.nm-roll #bfsLockup>g:last-child path{transition:color .25s var(--ease),fill .25s var(--ease)!important;opacity:1!important;filter:none!important;clip-path:none!important}
.nm-roll .nav__full{transform:translate3d(0,calc(-52% + 32px),0);will-change:transform}
.nm-roll .nav__full *{transform:none!important}
.nm-roll .nf-g{display:inline;grid-template-columns:none}
.nm-roll .nf-g>span{display:inline;padding:0;margin:0;overflow:visible}
.nm-roll .nf-a{display:inline;position:static}.nm-roll .nf-a>span{position:static;display:inline}
.nm-roll #bfsLockup>g:last-child path{will-change:transform}
.nav__logo.nm-roll.is-open::after{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(31px + var(--fullw,160px))}


/* v14 karaoke captions (playing player only) */
.vcard .vcap{bottom:76px;max-width:84%;width:max-content;transition:opacity .22s linear,bottom .4s var(--ease)}
.vcard.is-playing .vcap{bottom:66px}
.vcard .vcard__screen::after{content:"";position:absolute;left:0;right:0;bottom:0;height:46%;z-index:2;pointer-events:none;background:linear-gradient(to top,rgba(6,8,12,.8),rgba(6,8,12,.42) 45%,rgba(6,8,12,0));opacity:0;transition:opacity .3s linear}
.vcard.is-playing.has-cap .vcard__screen::after{opacity:1}
.vcard .vcap__t{display:inline-block;padding:0;background:none;border-radius:0;color:#fff;font-weight:600;font-size:26px;line-height:1.38;font-family:Geist,system-ui,sans-serif;letter-spacing:-.015em;text-shadow:0 1px 14px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.5);max-width:100%;text-wrap:balance;transition:opacity .12s linear,transform .12s linear}
.vcard .vcap__t.is-swap{opacity:0;transform:translateY(4px)}
.vcard .vw{display:inline-block;padding:0 3px;margin:0 -1px;color:rgba(255,255,255,.5);transform:translateZ(0) scale(1);transition:color .18s linear,background-color .14s linear,transform .32s cubic-bezier(.34,1.56,.64,1)}
.vcard .vw.is-said{color:#fff}
.vcard .vw.is-cur{background:rgb(0,88,246);color:#fff;text-shadow:none;transform:scale(1.06)}

/* v14 perf: tiles repaint in isolation */
#plane .tile{contain:layout paint style}

/* v14 stage row: content-sized stages spread with equal gaps; equal pill padding so the 3D tiles (incl. shadow) sit fully inside */
.stg{justify-content:space-between;gap:6px}
.stg__i{flex:0 0 auto!important;min-width:0;gap:0;padding:9px 12px 11px!important}
.stg__tools{margin:0 0 0 16px!important;gap:10px!important}
.stg__i .ai{transform:perspective(420px) scale(calc(1 + var(--a,0) * .03))!important}
@media (max-width:1380px){.stg__i{padding:8px 10px 10px!important}.stg__tools{margin-left:12px!important;gap:8px!important}}

/* v14 stack panel: soft corners, content-height with even padding, cells reserve room for the lifted 3D tile + shadow, short last row centred */
#tboard{justify-content:center}
#tboard .tboard__stage,#tboard .tboard__stage::after{border-radius:18px!important}
#tboard .tboard__stage{flex:none!important;height:auto!important;padding:18px 20px;overflow:hidden}
#tboard #plane{display:flex!important;flex-wrap:wrap;justify-content:center;column-gap:4px;row-gap:8px;padding:0!important;width:calc(7 * 76px + 6 * 4px);max-width:100%}
#plane .tile{width:76px;padding:8px 0 4px;box-sizing:border-box}

/* v14 stack panel = code window height: tabs sit inside the panel top, grid centred below */
#tboard{position:relative;justify-content:flex-start}
#tboard #tboardCats{position:absolute;top:16px;left:50%;transform:translateX(-50%);z-index:3;margin:0}
#tboard .tboard__stage{flex:1 1 auto!important;height:auto!important;margin-top:0!important;padding:70px 20px 16px!important;display:flex!important;align-items:center;justify-content:center}
#tboard .tboard__stage,#tboard .tboard__stage::after{border-radius:16px!important}
/* perf: the fixed nav gets its own layer, otherwise every scroll frame repaints the whole root layer (Stack 60 -> ~12, Process ~90 slow frames per pass). No motion change. */
.nav{will-change:transform}
/* perf: the kanban app is one layer so its scroll-driven cards repaint only the board, not the root (process ~42 -> 0 slow frames). */
#kbApp{will-change:transform}

.call__av--bfs svg{width:22px;height:22px;fill:#fff}.call__av--bfs .w{fill:var(--blue)}
.book__role{font-size:13px;color:var(--muted);margin:1px 0 2px}
.book__t,.book__role{white-space:nowrap}

/* optical centring of asymmetric glyphs (bbox already centred) */
.ai>i{translate:var(--gx,0) var(--gy,0)}
.ai[style*="vercel.svg"]{--gy:-6%}
.ai[style*="threedotjs.svg"]{--gx:4%;--gy:4%}
.ai[style*="blender.svg"]{--gx:-3%}

.lc__since{display:block;margin-top:8px;font-size:11px;letter-spacing:.02em;color:var(--muted);white-space:nowrap}

/* v14: real macOS traffic lights on every window mockup */
:is(.app__dots,.pv__dots,.ed__dots,.xshot__bar,.shot__bar,.code__bar,.ms__bar)>i:nth-child(1){background:#FF5F57}:is(.app__dots,.pv__dots,.ed__dots,.xshot__bar,.shot__bar,.code__bar,.ms__bar)>i:nth-child(2){background:#FEBC2E}:is(.app__dots,.pv__dots,.ed__dots,.xshot__bar,.shot__bar,.code__bar,.ms__bar)>i:nth-child(3){background:#28C840}

/* v14: shared video lightbox, captions on, Close */
.vlb{position:fixed;inset:0;width:100vw;height:100vh;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;display:grid;place-items:center;opacity:0;transition:opacity .25s linear}
.vlb:not([open]){display:none}
.vlb::backdrop{background:rgba(10,11,13,.82)}
.vlb.is-in{opacity:1}
.vlb__frame{position:relative;width:min(1100px,86vw);aspect-ratio:16/9;border-radius:16px;overflow:hidden;background:#000;box-shadow:0 30px 80px rgba(0,0,0,.45);transform:scale(.97);transition:transform .45s var(--ease)}
.vlb.is-in .vlb__frame{transform:none}
.vlb__v{width:100%;height:100%;display:block;object-fit:cover}
.vlb .vcap{bottom:72px}
.vlb .vcap__t{display:inline-block;padding:0;background:none;color:#fff;font:600 26px/1.38 Geist,system-ui,sans-serif;letter-spacing:-.015em;text-shadow:0 1px 14px rgba(0,0,0,.55),0 1px 2px rgba(0,0,0,.5);text-wrap:balance;transition:opacity .12s linear,transform .12s linear}
.vlb .vcap__t.is-swap{opacity:0;transform:translateY(4px)}
.vlb__x{position:absolute;top:24px;right:28px;display:flex;align-items:center;gap:8px;height:38px;padding:0 14px 0 16px;border:1px solid rgba(255,255,255,.18);border-radius:999px;background:rgba(255,255,255,.08);color:#fff;font:500 14px Geist,system-ui,sans-serif;cursor:pointer}
.vlb__x:hover{background:rgba(255,255,255,.16)}
.vlb__x svg{width:14px;height:14px;stroke:#fff;stroke-width:1.8;fill:none}
.vlb::backdrop{background:rgba(8,9,11,.92)}
.vlb__x{top:calc(50% - min(1100px,86vw)*9/32 - 54px);right:calc(50% - min(1100px,86vw)/2)}
.vcard:not(.is-playing) .vcap{bottom:112px}
.vcard:not(.is-playing) .vcap__t{font-size:22px}

.face--mono{display:inline-grid;place-items:center;flex:none;width:40px;height:40px;border-radius:50%;background:#EEF3FE;color:var(--blue);font:600 13px/1 Geist,system-ui,sans-serif;letter-spacing:.02em;box-shadow:inset 0 0 0 1px rgba(0,88,246,.18)}
.bq .face--mono{width:52px;height:52px;font-size:16px}
.slip__logo--txt{font:650 22px/1 Geist,system-ui,sans-serif;letter-spacing:-.035em;color:#1d1d1f}

/* item 8: stack board blank = page bg, keep hairline + dot structure */
#tboard .tboard__stage{background:transparent!important;box-shadow:inset 0 0 0 1px rgba(16,24,40,.09)!important}