:root{--bg:#fbfaf7;--surf:#fff;--ink:#15171c;--ink2:#474b54;--mute:#80858d;--line:#ebe5db;--ember:#ff6a3d;--deep:#c4381d;--btn:#d6461f;--btnh:#bf3a16;--dawn:#ffb36b;--tint:#fdebe3;--hz:#ddd6cb}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg)}
body{font-family:Inter,system-ui,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;overflow-x:hidden}
.wrap{max-width:1240px;margin:0 auto;padding:0 48px}
.serif,h1,h2{font-family:'Instrument Serif',serif;font-weight:400}
a{color:inherit}

/* Nav: shrinks and frosts once you scroll */
.nav{position:fixed;top:0;left:0;right:0;z-index:20;border-bottom:1px solid var(--line);background:rgba(251,250,247,.92);transition:background .3s}
.nav.scrolled{background:rgba(251,250,247,.88);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.nav .wrap{height:76px;display:flex;align-items:center;gap:36px}
.logo{align-self:stretch;display:flex;align-items:center;gap:10px;font-family:'Instrument Serif',serif;font-size:31px;text-decoration:none;margin-right:auto}
.logo svg{width:62px;height:auto}
.nav .logo{align-items:flex-end;gap:6px}
.nav .logo .mk{line-height:0}   /* Virge stands on the menu's bottom line, its horizon; the word sits right beside it */
.nav .logo .mk svg{width:72px}
.nav .logo .wd{line-height:1;padding-bottom:10px}
.nav .l{text-decoration:none;font-size:16px;font-weight:500;color:var(--ink2);transition:color .2s}
.nav .l:hover{color:var(--ink)}

/* Buttons: Virge peeks over the top edge on hover */
.btn{position:relative;display:inline-flex;align-items:center;gap:10px;background:var(--btn);color:#fff;font:600 17px Inter,sans-serif;padding:16px 26px;border-radius:12px;border:0;cursor:pointer;text-decoration:none;transition:background .2s,transform .2s}
.btn:hover{background:var(--btnh);transform:translateY(-1px)}
.btn.sm{font-size:15px;padding:11px 18px;border-radius:10px}
.btn:disabled{opacity:.35;cursor:default;transform:none;background:var(--btn)}
.btn .pk{position:absolute;left:2px;bottom:100%;width:64px;height:30px;overflow:hidden;pointer-events:none}
.btn.sm .pk{left:0;width:52px;height:25px}
.btn .pk svg{display:block;width:100%;height:auto;transform:translateY(110%);transition:transform .45s cubic-bezier(.16,1,.3,1)}
.btn:hover .pk svg{transform:translateY(8%)}
.btn:disabled .pk{display:none}
.arr{display:inline-block;transition:transform .2s}
.btn:hover .arr{transform:translateX(3px)}
.tlink{font-weight:600;font-size:17px;text-decoration:none;display:inline-flex;gap:8px;align-items:center}
.tlink:hover .arr{transform:translateY(3px)}

/* Hero */
.kick{font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--deep);margin-bottom:20px;opacity:0;animation:up .8s cubic-bezier(.2,.8,.2,1) forwards}
.kick.you{font-size:20px;font-weight:600;letter-spacing:0;text-transform:none}
.hero .wrap{display:grid;grid-template-columns:1.15fr .85fr;gap:36px;align-items:center}
.hero h1{font-size:84px;line-height:.98;letter-spacing:-.02em;white-space:nowrap}
.hero h1 em{font-style:normal;color:var(--deep)}
.hero h1 .w{display:inline-block;opacity:0;transform:translateY(22px);animation:up .9s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes up{to{opacity:1;transform:none}}
#sub{font-size:25px;line-height:1.38;color:var(--ink2);margin:26px 0 36px;white-space:nowrap;opacity:0;animation:up .8s .8s cubic-bezier(.2,.8,.2,1) forwards}
.hero .row{display:flex;align-items:center;gap:28px;opacity:0;animation:up .8s .9s cubic-bezier(.2,.8,.2,1) forwards}
/* Done by Virge: one thing Virge did at one business, then the money it turned into, then the next business. Virge peeks over the top edge */
.today{position:relative;width:100%;max-width:480px;margin-left:auto;background:#fff;border:1px solid var(--line);border-radius:26px;padding:28px 34px 26px;box-shadow:0 40px 80px -48px rgba(40,30,20,.5);opacity:0;animation:up .8s .5s cubic-bezier(.2,.8,.2,1) forwards}
.today .vp{left:92px}
.td-hd{position:absolute;left:162px;bottom:100%;margin-bottom:9px;font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--deep);white-space:nowrap}   /* beside Virge, like the logo in the menu */
.td-top,.td-bot{position:relative}
.td-top{height:104px}
.td-bot{height:132px;margin-top:22px;border-top:1px solid #f1ece4}
.td-top .sw{position:absolute;left:0;right:0;bottom:0}
.td-bot .sw{position:absolute;left:0;right:0;top:20px}
.sw{animation:swIn .5s cubic-bezier(.2,.8,.2,1) both}
.sw.out{animation:swOut .3s ease forwards}
@keyframes swIn{from{opacity:0;transform:translateY(14px)}}
@keyframes swOut{to{opacity:0;transform:translateY(-10px)}}
.td-biz{font-size:16px;font-weight:600;color:var(--mute)}
.td-did{font-size:29px;font-weight:700;letter-spacing:-.02em;line-height:1.18;margin-top:6px;color:var(--ink);text-wrap:balance}
.td-bot b{display:block;font:400 92px/.9 'Instrument Serif',serif;color:var(--deep);font-variant-numeric:tabular-nums}
.td-bot span{display:block;font-size:18px;font-weight:600;color:var(--ink2);margin-top:8px}
/* Sections */
/* Every section is one screen; one scroll gesture moves exactly one section (the pager in the script) */
.snap{min-height:100vh;display:flex;flex-direction:column;justify-content:center;padding:96px 0 44px}
.snap > .wrap{width:100%}
.snap h2{font-size:68px;line-height:1;letter-spacing:-.01em;text-wrap:balance}
.lead,.cyj,.td-did,.ind-cap b{text-wrap:balance}
.lead{font-size:22px;color:var(--ink2);line-height:1.45;margin-top:18px;max-width:600px}
.center{text-align:center}.center .lead{margin-left:auto;margin-right:auto;max-width:760px}
[data-rev]{opacity:0;transform:translateY(26px);transition:opacity .9s cubic-bezier(.2,.8,.2,1),transform .9s cubic-bezier(.2,.8,.2,1)}
[data-rev].in{opacity:1;transform:none}

/* The idea in one picture */
.idea{display:grid;grid-template-columns:.85fr 1.15fr;gap:64px;align-items:center}
.idea .cv{position:relative;height:430px}
.idea canvas{position:absolute;inset:0;width:100%;height:100%}

/* How it works */
/* Three steps, each a quiet grey card. One by one they light up: the coral border wraps the card and Virge rises over its top edge */
.steps{position:relative;display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:18px;max-width:1080px;margin:84px auto 0}
.step{position:relative;background:#eeebe5;border-radius:24px;padding:30px 30px 34px;transition:background-color .6s ease,box-shadow .6s ease}
.step .n{display:block;font-family:'Instrument Serif',serif;font-size:76px;line-height:.9;color:#b9b3a9;transition:color .5s}
.step h3{font-size:27px;font-weight:700;letter-spacing:-.015em;line-height:1.15;margin-top:18px;color:#7d786f;transition:color .5s}
.step p{font-size:17px;font-weight:500;color:var(--mute);margin-top:10px}
.step.lit{background:#fff8f3;box-shadow:0 30px 60px -36px rgba(196,56,29,.35)}
.step.lit .n{color:var(--deep)}.step.lit h3{color:var(--ink)}
.step.lit .wrapline rect{stroke-dashoffset:0;transition:stroke-dashoffset 1s cubic-bezier(.65,0,.35,1)}
.steps.reset .step,.steps.reset .step *{transition:none!important}
.edge{position:absolute;width:0;height:0}   /* a point on a card's edge, turned to face out from it; Virge rises from behind that edge */
.edge .vp{top:0;left:0}
.sarr{align-self:center;font-style:normal;font-size:30px;color:#cfc8bd}
/* Growth stories: one at a time, on a loop. The old time is crossed out, then the new time arrives */
.cycle{position:relative;max-width:1080px;margin:62px auto 0;background:#eeebe5;border-radius:28px;padding:50px 40px 40px;text-align:center;cursor:pointer;transition:background-color .7s ease,box-shadow .7s ease}
.cycle.won{background:#fff8f3;box-shadow:0 30px 60px -36px rgba(196,56,29,.35)}
/* The coral border draws itself around the card once the new time lands: Virge wrapped the job and turned it into a win */
.wrapline{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.wrapline rect{fill:none;stroke:#d6461f;stroke-width:3;stroke-dasharray:1 1;stroke-dashoffset:1}
.cycle.won .wrapline rect{stroke-dashoffset:0;transition:stroke-dashoffset 1.1s cubic-bezier(.65,0,.35,1)}
.cys{position:absolute;left:24px;top:20px;font-size:12.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 12px;border-radius:999px;background:#e2ded6;color:#7d786f;transition:background .5s,color .5s}
.cycle.won .cys{background:#d6461f;color:#fff}
/* Virge lives just above the card's top edge and rises over it */
.vp{position:absolute;top:1px;width:150px;height:70px;transform:translate(-50%,-100%);overflow:hidden;pointer-events:none;line-height:0}
.vp span{position:absolute;inset:0;transform:translateY(102%);transition:transform .55s cubic-bezier(.16,1,.3,1)}
.vp svg{width:150px;height:auto}
.vp.up span{transform:translateY(4%)}
.vp .shut{visibility:hidden}.vp.blink .shut{visibility:visible}.vp.blink .open{visibility:hidden}
.cy{min-height:240px;display:flex;align-items:center;justify-content:center}
.cy-in{animation:cyIn .6s cubic-bezier(.2,.8,.2,1) both}
.cy-in.out{animation:cyOut .45s ease forwards}
@keyframes cyIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes cyOut{to{opacity:0;transform:translateY(-10px)}}
.cyb{text-align:center}
.cycle.reset,.cycle.reset *{transition:none!important}
.cyb b{display:block;font-size:32px;font-weight:700;letter-spacing:-.015em;line-height:1.1}
.cyb small{display:block;font-size:16px;font-weight:500;color:var(--mute);margin-top:3px}
.cyj{font-size:23px;font-weight:600;color:var(--ink2);margin-top:20px}
.cyt{display:flex;align-items:center;justify-content:center;gap:34px;margin-top:22px;font-family:'Instrument Serif',serif;font-size:108px;line-height:1;letter-spacing:-.01em}
.cyt .was{position:relative;color:#77726a;animation:cyDim .5s 1.3s ease both}
.cyt .was::after{content:"";position:absolute;left:-6px;right:-6px;top:55%;height:4px;border-radius:2px;background:#9a958d;transform:scaleX(0);transform-origin:left center;animation:cyStrike .55s .8s cubic-bezier(.65,0,.35,1) forwards}
@keyframes cyStrike{to{transform:none}}
@keyframes cyDim{to{color:#a39d94}}
.cyt .to{font-family:Inter,sans-serif;font-size:40px;color:#cfc8bd;animation:cyFade .4s 1.4s both}
@keyframes cyFade{from{opacity:0}}
.cyt .now{position:relative;color:var(--deep);animation:cyNow .65s 1.55s cubic-bezier(.2,.8,.2,1) both}
@keyframes cyNow{from{opacity:0;transform:translateX(-18px)}}
@media (prefers-reduced-motion: reduce){.cy-in,.cyt *,.cyt .was::after{animation:none!important}.cyt .was::after{transform:none}.cyt .was{color:#a39d94}}

/* ---------- The sections a CEO needs before booking a call. Optional ones can be switched off ([hidden]). ---------- */
section[hidden]{display:none!important}
/* What Virge does: a tab per job; the story card below plays it, before and after Virge */
.wk-tabs{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;max-width:1080px;margin:34px auto 0}
.pick{all:unset;box-sizing:border-box;position:relative;display:flex;align-items:center;gap:14px;cursor:pointer;border:1.5px solid transparent;border-radius:14px;transition:background .25s,border-color .25s,color .25s,box-shadow .25s}
.pick:focus-visible{outline:2px solid var(--btn);outline-offset:2px}
.pick.on{background:#fff;color:var(--ink);box-shadow:0 14px 30px -22px rgba(40,30,20,.4)}
.wk-b{justify-content:center;padding:17px 8px 21px;font-size:17px;font-weight:600;color:#8b867e;text-align:center}
.wk-b:hover{color:var(--ink2);background:rgba(255,255,255,.55)}
.wk-b.on{border-color:var(--line);color:var(--ink)}
/* The bar under the chosen tab fills while it plays; when it's full the next one starts. Hovering holds it. */
.prog{position:absolute;left:16px;right:16px;bottom:6px;height:3px;border-radius:2px;background:#f4e4dc;opacity:0;overflow:hidden;pointer-events:none}
.pick.on .prog{opacity:1}
.prog i{position:absolute;inset:0;background:var(--pc,var(--btn));transform:scaleX(0);transform-origin:left center}
.prog i.run{animation:prog var(--dur,9s) linear forwards}
.hold .prog i,.away .prog i{animation-play-state:paused}
@keyframes prog{to{transform:none}}
.pE{fill:var(--pe)}.pD{fill:var(--pd)}.pW{fill:var(--pw)}.pK{fill:var(--pk)}.pG,.pL{fill:var(--pg)}

/* Used by teams at: their own logos, in grey like everything that isn't Virge */
.usedby{display:flex;align-items:center;gap:36px;width:100%;max-width:1240px;margin:56px auto 0;padding:0 48px;opacity:0;animation:up .8s 1.1s cubic-bezier(.2,.8,.2,1) forwards}
.usedby span{font-size:15px;font-weight:600;color:var(--mute);white-space:nowrap}
.usedby img{display:block;width:auto;filter:grayscale(1) contrast(1.15);opacity:.5;transition:filter .3s,opacity .3s}
.usedby img:hover{filter:none;opacity:1}
.ub-win{flex:1;min-width:0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ub-track{display:flex;width:max-content;animation:ub 70s linear infinite}
.usedby:hover .ub-track{animation-play-state:paused}
.ub-set{display:flex;align-items:center;gap:60px;padding-right:60px}
@keyframes ub{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion: reduce){.ub-track{animation:none}}

/* Built for the hardworking: one industry at a time, with Virge dressed for it */
.ind{display:grid;grid-template-columns:1fr 1.12fr;gap:60px;align-items:center}
.ind h2{font-size:min(58px,4.6vw);white-space:nowrap}.ind .lead{font-size:20px;margin-top:14px}
.ind-pick{display:grid;grid-template-columns:1fr 1fr;gap:4px 8px;margin-top:28px}
.ind-b{padding:8px 12px 12px;font-size:15.5px;font-weight:600;line-height:1.2;color:var(--ink2);--pc:var(--c)}
.ind-b:hover{background:rgba(255,255,255,.6)}
.ind-b.on{border-color:var(--c)}
.ind-b .prog{left:12px;right:12px;bottom:5px;background:var(--t)}
.ind-b i,.ind-cap i{flex:none;display:grid;place-items:center;background:var(--t);color:var(--c)}
.ind-b i{width:36px;height:36px;border-radius:11px}
.ind-b i svg{width:20px;height:20px;display:block}
.ind-stage{position:relative;height:290px;border-radius:26px;overflow:hidden;background:#0b0f17}
.ind-stage canvas{position:absolute;inset:0;width:100%;height:100%}
.ind-cap{display:flex;align-items:center;gap:16px;margin-top:22px}
.ind-cap i{width:54px;height:54px;border-radius:16px}
.ind-cap i svg{width:28px;height:28px;display:block}
.ind-cap b{display:block;font-family:'Instrument Serif',serif;font-weight:400;font-size:38px;line-height:1.05}
.ind-cap small{display:block;font-size:15px;color:var(--mute);margin-top:4px}
.ind-jobs{list-style:none;display:grid;gap:8px;margin-top:16px}
.ind-jobs li{display:flex;align-items:center;gap:12px;font-size:18px;font-weight:600;color:var(--ink);background:#fff;border:1px solid var(--line);border-radius:14px;padding:12px 16px;animation:cyIn .5s calc(.25s + var(--k) * .15s) cubic-bezier(.2,.8,.2,1) both}
.ind-jobs svg{flex:none;width:20px;height:20px;color:#d6461f}
.ind-fade{animation:cyIn .5s cubic-bezier(.2,.8,.2,1) both}
.ind-next{all:unset;display:none;align-items:center;gap:8px;cursor:pointer;margin-top:16px;font-weight:600;font-size:17px;color:var(--deep)}
/* Nothing goes out without your OK: Virge's drafts wait in a stack; a person taps Approve on the top one and it goes */
.ctrl{display:grid;grid-template-columns:.88fr 1.12fr;gap:64px;align-items:center}
#control{overflow-x:clip}   /* an approved draft slides off to the right; it must never widen the page */
.aq{position:relative;height:280px;--pe:var(--ember);--pd:var(--dawn);--pw:#fff;--pk:var(--ink);--pg:#9aa3ad}
.aqc{position:absolute;left:0;right:0;top:72px;display:flex;align-items:center;gap:20px;background:#fff;border:1px solid var(--line);border-radius:26px;padding:26px 28px;box-shadow:0 30px 60px -40px rgba(40,30,20,.45);transform-origin:50% 100%;transition:transform .6s cubic-bezier(.2,.8,.2,1),opacity .6s ease,border-color .4s,box-shadow .4s}
.aqc.s0{z-index:4}
.aqc > *{transition:opacity .35s ease}
.aqc.s1 > *,.aqc.s2 > *,.aqc.s3 > *{opacity:0}   /* the drafts behind show only their edges */
.aqc.s1{z-index:3;transform:translateY(20px) scale(.94);opacity:.8}
.aqc.s2{z-index:2;transform:translateY(40px) scale(.88);opacity:.5}
.aqc.s3{z-index:1;transform:translateY(56px) scale(.84);opacity:0}
.aqc.out{z-index:5;transform:translateX(60%) rotate(3deg);opacity:0}
.aqc.ok{border-color:#d6461f;box-shadow:0 0 0 2px #d6461f,0 30px 60px -40px rgba(196,56,29,.45)}
.aqc .ic{flex:none;width:74px;height:74px;border-radius:20px;background:#fff6f1;display:grid;place-items:center}
.aqc .ic svg{width:46px;height:auto}
.aqc .tx{flex:1;min-width:0}
.aqc small{display:block;font-size:12.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--deep)}
.aqc b{display:block;font-size:24px;font-weight:700;letter-spacing:-.01em;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.aqc .tx span{display:block;font-size:17px;color:var(--mute);margin-top:2px}
.aqgo{flex:none;min-width:150px;text-align:center;background:var(--ink);color:#fff;font-weight:700;font-size:18px;padding:17px 22px;border-radius:14px;transition:background .3s,transform .15s}
.aqgo.press{transform:scale(.94)}
.aqc.ok .aqgo{background:#d6461f}
.aq .vp{top:73px;left:130px;z-index:0}
.cursor{position:absolute;z-index:6;width:22px;height:22px;pointer-events:none;opacity:0;transition:left .9s cubic-bezier(.4,0,.2,1),top .9s cubic-bezier(.4,0,.2,1),opacity .3s}
.cursor svg{width:22px;height:22px;filter:drop-shadow(0 2px 3px rgba(0,0,0,.25))}
/* Works with what you already use */
.tools{display:grid;grid-template-columns:repeat(6,1fr);gap:16px;width:100%;max-width:1060px;margin:48px auto 0}
.tool{background:var(--surf);border:1px solid var(--line);border-radius:20px;padding:24px 10px 20px;text-align:center}
.tool i{display:grid;place-items:center;width:58px;height:58px;margin:0 auto;border-radius:16px;background:#f3f1ed;color:var(--ink)}
.tool i svg{width:30px;height:30px}
.tool b{display:block;font-size:16px;margin-top:12px}
/* The cost */
.vs2{display:grid;grid-template-columns:1fr 1fr;gap:28px;width:100%;max-width:980px;margin:48px auto 0}
.vs2 > div{position:relative;border-radius:26px;padding:30px 34px 32px;text-align:left}
.vs2 h4{font-size:24px;font-weight:700}
.vs2 ul{list-style:none;margin-top:18px;display:grid;gap:14px}
.vs2 li{display:flex;gap:12px;align-items:center;font-size:19px}
.vs2 i{flex:none;width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:14px;font-weight:700}
.opt0{background:#efece6}.opt0 h4,.opt0 li{color:#7d786f}.opt0 i{background:#e0dcd4;color:#8b867e}
.opt1{background:#fff8f3;border:3px solid #d6461f}.opt1 i{background:#d6461f;color:#fff}
.edgepk{position:absolute;left:50%;top:0;width:120px;height:56px;transform:translate(-50%,-100%);overflow:hidden;line-height:0;pointer-events:none}
.edgepk svg{width:120px;height:auto;transform:translateY(6%)}
/* In their words */
.quote{position:relative;max-width:980px;margin:56px auto 0;background:#fff8f3;border:3px solid #d6461f;border-radius:30px;padding:48px 60px 40px;text-align:center}
.quote p{font-family:'Instrument Serif',serif;font-size:46px;line-height:1.15;letter-spacing:-.01em}
.quote cite{display:block;font-style:normal;font-size:17px;font-weight:600;margin-top:22px}
.quote cite span{display:block;font-weight:500;color:var(--mute);margin-top:3px}
.quote em{display:block;font-style:normal;font-size:13px;color:var(--mute);margin-top:16px}
/* Questions owners ask */
.faq{max-width:900px;margin:40px auto 0;display:grid;gap:10px}
.qa{background:var(--surf);border:1px solid var(--line);border-radius:18px;transition:border-color .3s,background .3s}
.qa button{all:unset;box-sizing:border-box;cursor:pointer;width:100%;display:flex;align-items:center;gap:14px;padding:18px 24px;font-size:20px;font-weight:600}
.qa button::after{content:"+";margin-left:auto;font-size:26px;font-weight:400;color:var(--mute);transition:transform .3s}
.qa.open{border-color:#d6461f;background:#fff8f3}
.qa.open button::after{transform:rotate(45deg);color:var(--deep)}
.qa .a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1)}
.qa.open .a{grid-template-rows:1fr}
.qa .a > div{overflow:hidden}
.qa .a p{padding:0 24px 20px;font-size:18px;line-height:1.5;color:var(--ink2);max-width:780px}
@media (max-width: 900px){.ind,.ctrl,.vs2{grid-template-columns:1fr}.wk-tabs{grid-template-columns:repeat(3,1fr)}.cycle{padding:50px 16px 30px}.cyb b{font-size:22px}.aqc{gap:12px;padding:16px}.aqc .ic{width:48px;height:48px}.aqc b{font-size:18px;white-space:normal}.snap h2,.ind h2{font-size:46px}.ind h2{white-space:normal}.aqgo{min-width:0;padding:12px 14px;font-size:15px}.usedby{flex-wrap:wrap;gap:18px 28px;padding:0 16px}.usedby span{flex-basis:100%;text-align:center}.ub-win{flex:1 1 100%;width:100%}.ind-stage{height:260px}.tools{grid-template-columns:repeat(3,1fr)}.quote p{font-size:30px}}

/* Your team will thank you: what Virge takes, what your people keep */
.keep{display:grid;grid-template-columns:1fr 1fr;gap:28px;width:100%;max-width:980px;margin:44px auto 0}
.keep > div{position:relative;border-radius:26px;padding:30px 34px 32px}
.keep h4{font-size:15px;font-weight:700;letter-spacing:.08em;text-transform:uppercase}
.keep ul{list-style:none;margin-top:16px;display:grid;gap:14px}
.keep li{font-size:21px;line-height:1.3}
.keep .k0{background:#efece6}.keep .k0 h4{color:#8b867e}.keep .k0 li{color:#8b867e;text-decoration:line-through;text-decoration-color:#b9b3a9;text-decoration-thickness:2px}
.keep .k1{background:#fff8f3;border:3px solid #d6461f}.keep .k1 h4{color:var(--deep)}.keep .k1 li{font-weight:600}
/* A note from the founder */
.note{position:relative;max-width:860px;margin:48px auto 0;background:var(--surf);border:1px solid var(--line);border-radius:28px;padding:44px 56px 40px;box-shadow:0 30px 60px -44px rgba(40,30,20,.45)}
.note p{font-size:22px;line-height:1.6;color:var(--ink)}
.note p + p{margin-top:14px}
.sign{display:flex;align-items:center;gap:14px;margin-top:26px}
.sign i{width:52px;height:52px;border-radius:50%;background:#f3f1ed;display:grid;place-items:center;font-style:normal;font-weight:700;color:var(--ink2)}
.sign b{display:block;font-family:'Instrument Serif',serif;font-weight:400;font-size:30px;line-height:1}
.sign span{display:block;font-size:15px;color:var(--mute);margin-top:3px}
.note em{display:block;font-style:normal;font-size:13px;color:var(--mute);margin-top:18px}
/* The page's light (option C, Phillip's pick): a faint sunrise glow and Virge's squares behind the headline card, and every
   other section on a warmer band, so the page has a rhythm; it ends on the night sky (.end) */
@property --gx{syntax:'<percentage>';inherits:true;initial-value:50%}
@property --gy{syntax:'<percentage>';inherits:true;initial-value:55%}
@property --go{syntax:'<number>';inherits:true;initial-value:1}
/* Virge's light: a sunrise glow with Virge's squares fading into it, behind the one thing that matters in a section.
   Where it sits (--gx/--gy), how wide (--gw/--gh) and how bright (--go) is set per section; it brightens when Virge acts. */
.glow{position:relative;isolation:isolate;overflow-x:clip;transition:--gx 1.1s cubic-bezier(.2,.8,.2,1),--gy 1.1s cubic-bezier(.2,.8,.2,1),--go 1.4s ease}
.glow::before,.glow::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:var(--go)}
.glow::before{background:radial-gradient(var(--gw,48%) var(--gh,62%) at var(--gx) var(--gy),rgba(255,179,107,.30),rgba(255,106,61,.08) 48%,transparent 76%)}
.glow::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22'%3E%3Crect width='4' height='4' fill='%23c4381d' fill-opacity='.16'/%3E%3C/svg%3E");-webkit-mask-image:radial-gradient(calc(var(--gw,48%) * .88) calc(var(--gh,62%) * .9) at var(--gx) var(--gy),#000,transparent 78%);mask-image:radial-gradient(calc(var(--gw,48%) * .88) calc(var(--gh,62%) * .9) at var(--gx) var(--gy),#000,transparent 78%)}
#top{--gx:76%;--gy:52%}
#does{--gx:50%;--gy:66%;--gw:46%;--gh:44%;--go:.4}#does:has(.cycle.won){--go:1}                     /* lights up as the new time lands */
#idea{--gx:70%;--gy:58%;--gw:40%;--gh:56%;--go:.35}#idea:has(.cv.in){--go:1}                        /* rises with the revenue line */
#how{--gw:22%;--gh:42%;--go:0}#how.lit{--go:1}                                                      /* follows the step that just lit */
#control{--gx:72%;--gy:52%;--gw:34%;--gh:50%;--go:.45}#control:has(.aqc.ok){--go:1}                 /* flares with every "Sent" */
#trades{--gx:74%;--gy:44%;--gw:36%;--gh:56%;--go:.8}                                               /* around Virge, dressed for the job */
#does,#how,#trades{background:#f4efe6}
#idea:has(.cv.in){transition-delay:1.6s}
/* Book a call: a few questions, one per screen, then a calendar of open times (up to three a day) */
.ov{position:fixed;inset:0;z-index:50;display:none;place-items:center;padding:16px;background:rgba(21,23,28,.5);opacity:0;transition:opacity .25s}
.ov.on{display:grid}.ov.vis{opacity:1}
.modal{position:relative;width:min(640px,100%);max-height:calc(100svh - 32px);overflow:auto;background:#fff;border-radius:26px;padding:28px 34px 30px;box-shadow:0 40px 90px -40px rgba(0,0,0,.5);transform:translateY(14px) scale(.98);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.ov.vis .modal{transform:none}
.mhd{display:flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;color:var(--mute)}
.mhd .mk{line-height:0}.mhd .mk svg{width:44px;height:auto}
.mhd .cnt{margin-left:auto}
.mx{flex:none;width:36px;height:36px;border-radius:50%;border:0;background:#f3f0ea;font-size:18px;color:var(--ink2);cursor:pointer;margin-left:12px}
.mx:hover{background:#ebe6dd}
.mbody{animation:slide .35s cubic-bezier(.2,.8,.2,1)}
@keyframes slide{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
.modal h3{font-family:'Instrument Serif',serif;font-weight:400;font-size:46px;line-height:1.05;margin-top:18px}
.modal .hint{font-size:17px;color:var(--ink2);margin-top:8px}
.field{width:100%;font:500 21px Inter,sans-serif;padding:16px 18px;border:1.5px solid var(--line);border-radius:14px;margin-top:22px;color:var(--ink);background:#fff}
.field:focus{outline:none;border-color:var(--btn);box-shadow:0 0 0 3px rgba(214,70,31,.12)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.mft{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:26px}
.back{background:none;border:0;font:600 16px Inter,sans-serif;color:var(--ink2);cursor:pointer;padding:10px 4px}
.back:hover{color:var(--ink)}
.berr{margin-top:14px;font-size:15px;font-weight:600;color:var(--deep)}
.tzs{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:16px}
.tzs span{font-size:14px;font-weight:600;color:var(--mute);margin-right:2px}
.tzs button{all:unset;cursor:pointer;font-size:14px;font-weight:600;padding:7px 11px;border-radius:10px;border:1.5px solid var(--line);color:var(--ink2)}
.tzs button[aria-pressed=true]{border-color:var(--btn);background:#fff6f2;color:var(--deep)}
.cal{margin-top:18px}
.cal-hd{font-size:15px;font-weight:700}
.cal-g{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:8px}
.cal-g .dn{font-size:11.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);text-align:center}
.cal-d{all:unset;box-sizing:border-box;cursor:pointer;text-align:center;padding:9px 0 8px;border-radius:12px;border:1.5px solid var(--line);font-weight:700;font-size:18px;color:var(--ink)}
.cal-d small{display:block;font-size:11px;font-weight:600;color:var(--mute);margin-top:1px}
.cal-d:disabled{cursor:default;color:#c9c4bb;border-color:#f1ece4;background:#faf8f4}
.cal-d.on{border-color:var(--btn);background:#fff6f2;color:var(--deep)}
.times{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}
.time{all:unset;box-sizing:border-box;cursor:pointer;text-align:center;padding:14px 6px;border-radius:12px;border:1.5px solid var(--line);font-weight:700;font-size:17px;color:var(--ink)}
.time:hover{border-color:#d8cfc2}
.time.on{border-color:var(--btn);background:var(--btn);color:#fff}
.bnone{margin-top:14px;font-size:15px;color:var(--ink2)}
.bload{margin-top:22px;font-size:16px;color:var(--mute)}
.bdone{text-align:center;padding:6px 0 2px}
.bdone .face{line-height:0;margin:8px auto 0;width:150px;animation:pop .6s cubic-bezier(.2,.8,.2,1)}
.bdone .face svg{width:150px;height:auto}
@keyframes pop{from{transform:translateY(10px) scale(.9);opacity:0}}
.bdone .when{display:inline-block;margin-top:16px;background:#fff6f2;border:1.5px solid #f3c7b6;border-radius:12px;padding:12px 16px;font-size:18px;font-weight:700;color:var(--deep)}
.bdone .btn{margin-top:24px}
@media (max-width: 600px){
  .ov{padding:0;place-items:end center}
  .modal{width:100%;max-height:94svh;border-radius:22px 22px 0 0;padding:20px 18px 26px}
  .modal h3{font-size:34px}.field{font-size:19px}.time{font-size:16px;padding:13px 4px}.cal-d{font-size:16px}
}
/* ?only=<id>: one section by itself, for the options board */
.only .nav,.only footer{display:none}
.only [data-rev]{opacity:1;transform:none;transition:none}

/* Last word */
/* The page ends on the night sky, with Virge alone on its horizon */
.end{text-align:center;padding-bottom:0;background:#0b0f17;position:relative;isolation:isolate;overflow-x:clip}
.end::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(2px 2px at 43% 39%,rgba(242,237,230,.9),transparent),radial-gradient(2px 2px at 91% 15%,rgba(242,237,230,.55),transparent),radial-gradient(1.5px 1.5px at 17% 41%,rgba(242,237,230,.9),transparent),radial-gradient(2.5px 2.5px at 77% 44%,rgba(242,237,230,.9),transparent),radial-gradient(2px 2px at 28% 27%,rgba(242,237,230,.55),transparent),radial-gradient(1.5px 1.5px at 16% 39%,rgba(242,237,230,.55),transparent),radial-gradient(1.5px 1.5px at 95% 8%,rgba(242,237,230,.9),transparent),radial-gradient(1.5px 1.5px at 76% 7%,rgba(242,237,230,.7),transparent),radial-gradient(2px 2px at 83% 17%,rgba(242,237,230,.9),transparent),radial-gradient(1.5px 1.5px at 67% 47%,rgba(242,237,230,.9),transparent),radial-gradient(2.5px 2.5px at 72% 31%,rgba(242,237,230,.7),transparent),radial-gradient(1.5px 1.5px at 44% 33%,rgba(242,237,230,.55),transparent),radial-gradient(1.5px 1.5px at 78% 33%,rgba(242,237,230,.9),transparent),radial-gradient(2.5px 2.5px at 50% 23%,rgba(242,237,230,.55),transparent),radial-gradient(2.5px 2.5px at 35% 54%,rgba(242,237,230,.9),transparent),radial-gradient(2.5px 2.5px at 27% 48%,rgba(242,237,230,.55),transparent),radial-gradient(2px 2px at 35% 9%,rgba(242,237,230,.9),transparent),radial-gradient(1.5px 1.5px at 77% 23%,rgba(242,237,230,.9),transparent),radial-gradient(2.5px 2.5px at 71% 35%,rgba(242,237,230,.9),transparent),radial-gradient(2px 2px at 47% 50%,rgba(242,237,230,.7),transparent),radial-gradient(1.5px 1.5px at 61% 22%,rgba(242,237,230,.55),transparent),radial-gradient(1.5px 1.5px at 81% 8%,rgba(242,237,230,.55),transparent);opacity:.6;animation:twinkle 4.5s ease-in-out infinite alternate}   /* a few faint stars */
@keyframes twinkle{to{opacity:.95}}
.end h2{color:#f2ede6}
.end .lead{color:#aab0bb}
.end .endc{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center}
.end h2{font-size:78px;line-height:1;letter-spacing:-.015em}
.end .lead{margin:20px auto 38px;max-width:760px}
.endv{position:relative;width:100%;max-width:740px;margin:40px auto 46px}
/* The sunrise: a warm glow rises from the horizon behind Virge as it comes up, then breathes */
.endv::before{content:"";position:absolute;left:50%;bottom:6px;width:min(1100px,100vw);height:430px;transform:translateX(-50%) scaleY(.55);transform-origin:50% 100%;background:radial-gradient(30% 22% at 50% 100%,rgba(255,214,160,.55),transparent 75%),radial-gradient(50% 100% at 50% 100%,rgba(255,140,80,.62),rgba(255,106,61,.3) 32%,rgba(196,56,29,.12) 56%,transparent 76%);opacity:0;transition:opacity 1.8s ease,transform 2.4s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.endv.up::before{opacity:1;transform:translateX(-50%) scaleY(1);animation:sunrise 6s 2.6s ease-in-out infinite alternate}
@keyframes sunrise{to{opacity:.78}}
.ev-win,.ev-line{position:relative}
.ev-win{display:block;position:relative;width:min(420px,88vw);aspect-ratio:30/14;margin:0 auto;overflow:hidden}
.ev-win span{position:absolute;inset:0;transform:translateY(102%);transition:transform 1.1s cubic-bezier(.16,1,.3,1)}
.endv.up .ev-win span{transform:none}
.ev-win svg{display:block;width:100%;height:auto}
.ev-win .shut{visibility:hidden}.endv.blink .shut{visibility:visible}.endv.blink .open{visibility:hidden}
.ev-line{display:block;height:5px;margin-top:3px;background:repeating-linear-gradient(90deg,#d9d2c6 0 12px,transparent 12px 14px)}   /* the horizon, in Virge's squares */
footer{width:100%;border-top:1px solid #1d2330;padding:26px 0 30px;color:#8a909b;font-size:15px;text-align:left}
footer .wrap{display:flex;align-items:center;gap:30px}
footer .logo{font-size:26px;color:#f2ede6;margin-right:0}
footer .logo svg{width:52px;height:auto}
footer .tl{margin-right:auto;font-family:'Instrument Serif',serif;font-size:20px;color:#c9c3b9}
footer a{text-decoration:none}footer a:hover{color:#f2ede6}
footer .legal{display:flex;gap:18px}

@media (prefers-reduced-motion: reduce){
  .hero h1 .w,.hero .row,.kick{animation:none;opacity:1;transform:none}
  [data-rev]{opacity:1;transform:none;transition:none}
}
@media (max-width: 900px){
  .wrap{padding:0 16px}
  .hero .wrap,.idea,.steps{grid-template-columns:1fr}#top{--gx:50%;--gy:76%;--gw:90%;--gh:34%}#does{--gy:72%;--gw:90%;--gh:30%}#idea{--gx:50%;--gy:74%;--gw:90%;--gh:30%}#control{--gx:50%;--gy:74%;--gw:90%;--gh:28%}#trades{--gx:50%;--gy:80%;--gw:90%;--gh:24%}.steps{gap:70px}.sarr{display:none}
  .cyt{font-size:54px;gap:14px;flex-wrap:wrap}.cyj{font-size:24px}
  .hero h1{font-size:min(64px,15vw)}.sec h2,.end h2{font-size:46px}.today{margin:72px auto 0}#sub{white-space:normal}footer .wrap{flex-wrap:wrap;gap:12px 22px}
  .nav .l{display:none}
  .snap:not(.hero):not(.end){min-height:0;padding:76px 0 64px}
  .ind{gap:22px}.ind > div:first-child{display:contents}.ind h2{order:1}.ind .lead{order:2}.ind > div:last-child{order:3}.ind-pick{order:4;margin-top:6px}
  .step{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center;padding:18px 20px 20px}.step .n{grid-row:span 2;font-size:58px}.step h3{margin-top:0;font-size:21px}.step p{margin-top:4px;font-size:15px}.steps{gap:64px}
}
/* Phones: one idea to a screen. Each section fills the screen with its content centred, and only the essentials show.
   The job tabs and the trade list step out of sight but keep running (they time the cards, which move on by
   themselves; a tap goes to the next one), the hero keeps one button, and the questions start closed. */
@media (max-width: 600px){
  .nav .wrap{height:64px}.nav .logo .mk svg{width:60px}.nav .logo .wd{padding-bottom:8px}
  .snap,.snap:not(.hero):not(.end){min-height:100svh;padding:96px 0 48px}
  .snap h2,.sec h2,.ind h2{font-size:40px}.lead,.ind .lead{font-size:18.5px;margin-top:14px}
  .hero h1{font-size:min(58px,14.5vw)}#sub{font-size:19px;margin:16px 0 26px}.hero .tlink{display:none}
  .today{margin:64px auto 0;padding:20px 22px 16px;border-radius:22px}.td-top{height:82px}.td-did{font-size:23px}
  .td-bot{height:94px;margin-top:12px}.td-bot .sw{top:12px}.td-bot b{font-size:60px}.td-bot span{font-size:15.5px;margin-top:6px}
  .usedby{margin-top:34px}
  .wk-tabs,.ind-pick{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%)}
  .cycle{margin-top:60px;padding:48px 18px 30px}.cy{min-height:210px}.cyb b{font-size:22px}.cyj{font-size:18px;margin-top:12px}
  .cyt{font-size:48px;gap:10px;margin-top:16px}.cyt .to{font-size:26px}
  .idea .cv{height:340px}
  .steps{gap:84px;margin-top:84px}
  .aq{height:330px}.aqc{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;padding:18px}.aqc .ic{width:52px;height:52px}
  .aqc .ic svg{width:34px}.aqc b{white-space:normal;font-size:19px}.aqgo{grid-column:1/-1;margin-top:10px;padding:13px}
  .ind{gap:18px}.ind .lead{display:none}.ind-stage{height:210px}.ind-cap{margin-top:16px}.ind-cap b{font-size:30px}
  .ind-jobs li{font-size:16px;padding:10px 14px}.ind-next{display:inline-flex}
  .qa button{padding:16px 18px;font-size:18px}.qa .a p{padding:0 18px 18px;font-size:16.5px}
  .end h2{font-size:44px}
}