/* Crewvo shared UI: liquid glass for the navigation layer, and the agent floor.
   Glass follows the Liquid Glass rule: controls and navigation float in glass, content never does. */
.lg{position:relative;isolation:isolate;
  background:linear-gradient(135deg,rgba(255,255,255,.52),rgba(255,255,255,.22) 60%,rgba(255,255,255,.34));
  -webkit-backdrop-filter:blur(18px) saturate(190%) contrast(1.04);backdrop-filter:blur(18px) saturate(190%) contrast(1.04);
  border:1px solid rgba(255,255,255,.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 1px rgba(255,255,255,.35),inset 0 0 18px rgba(255,255,255,.18),0 1px 1px rgba(10,40,25,.06),0 14px 34px -16px rgba(10,40,25,.38)}
.lg::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:-1;
  background:radial-gradient(180px 90px at var(--mx,22%) var(--my,-10%),rgba(255,255,255,.75),rgba(255,255,255,0) 70%);opacity:.7;transition:opacity .3s}
.lg.dark{background:linear-gradient(135deg,rgba(255,255,255,.16),rgba(255,255,255,.05) 60%,rgba(255,255,255,.10));border-color:rgba(255,255,255,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),inset 0 -1px 1px rgba(255,255,255,.08),0 18px 40px -18px rgba(0,0,0,.6);color:#FFFFFF}
.lg.dark::after{background:radial-gradient(180px 90px at var(--mx,22%) var(--my,-10%),rgba(255,255,255,.28),rgba(255,255,255,0) 70%)}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.lg{background:rgba(255,255,255,.94)}.lg.dark{background:rgba(20,32,48,.92)}}
@media (prefers-reduced-transparency:reduce){.lg{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(255,255,255,.96)}.lg.dark{background:#16263A}.lg::after{display:none}}
@media (prefers-contrast:more){.lg{border-color:rgba(15,34,25,.45)}}

/* Floating navigation bar (all pages): always a liquid glass pill */
html .top{background:transparent!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;border-bottom:0!important;padding-top:10px;pointer-events:none}
html .top > .wrap{pointer-events:auto;height:60px;border-radius:999px;width:calc(100% - 20px);max-width:1220px;padding-left:20px;padding-right:8px}
@media (max-width:640px){html .top > .wrap{height:56px;padding-left:16px;width:calc(100% - 16px)}}
/* ---------- Crew floor: 12 screens, 20 agent cursors ---------- */
.floor{--st1:#B9E8CF;--st2:#C9E0FB;--st3:#E4DCFB;color:var(--ink);padding-block:clamp(72px,9vw,120px);position:relative;overflow:hidden;border-radius:36px;margin:24px clamp(8px,1.4vw,20px);
  background:radial-gradient(60% 70% at 12% 8%,rgba(255,255,255,.75),transparent 60%),radial-gradient(50% 60% at 92% 96%,rgba(255,255,255,.55),transparent 60%),linear-gradient(135deg,var(--st1) 0%,var(--st2) 52%,var(--st3) 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8),0 40px 80px -60px rgba(10,40,25,.45)}
.floor.tone-sky{--st1:#BFD9FB;--st2:#D4E6FD;--st3:#C8F0E0}
.floor.tone-dawn{--st1:#FFD9C2;--st2:#F7DDEA;--st3:#D6E3FD}
.floor.tone-lilac{--st1:#DCD3FB;--st2:#D3E3FC;--st3:#C3EDD8}
.floor::before{content:"";position:absolute;inset:0;background-image:radial-gradient(rgba(255,255,255,.55) 1px,transparent 1.4px);background-size:20px 20px;-webkit-mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent);mask-image:radial-gradient(80% 70% at 50% 40%,#000,transparent);pointer-events:none}
.floor .wrap{position:relative}
.floor-head{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:24px 56px;align-items:end;margin-bottom:44px}
.floor-head h2{font-size:clamp(36px,5vw,64px);line-height:1;letter-spacing:-.035em;color:var(--ink);max-width:10em}
.floor-head p{margin:0;color:#3D5247;font-size:17px;max-width:30em}
.floor-count{margin-top:18px!important;display:inline-flex;align-items:baseline;gap:10px;font-size:15px!important;color:#3D5247!important}
.floor-count b{font:600 clamp(30px,3vw,40px)/1 var(--font);color:#075A2B;font-variant-numeric:tabular-nums;letter-spacing:-.02em;min-width:2.2ch}
@media (max-width:820px){.floor-head{grid-template-columns:1fr}}
.floor-grid{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;gap:14px}
.fs{color:var(--ink);border-radius:20px;overflow:hidden;display:flex;flex-direction:column;min-height:220px;
  background:linear-gradient(160deg,rgba(255,255,255,.78),rgba(255,255,255,.52));-webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);
  border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 24px 48px -30px rgba(20,50,80,.45),0 2px 6px -3px rgba(20,50,80,.12)}
@media (prefers-reduced-transparency:reduce){.fs{-webkit-backdrop-filter:none;backdrop-filter:none;background:#FFFFFF}}
.fs.w2{grid-column:span 2}.fs.h2{grid-row:span 2}
.fs-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;padding:11px 14px;border-bottom:1px solid rgba(15,34,25,.07);background:rgba(255,255,255,.4)}
.fs-top b{font-size:13px;font-weight:600}
.fs-top span{font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fs-body{padding:12px 14px;display:flex;flex-direction:column;gap:9px;font-size:12.5px;flex:1;min-width:0}
.frow{display:flex;align-items:center;gap:9px;min-width:0}
.frow.col{flex-direction:column;align-items:stretch;gap:7px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.frow.col:last-child{border-bottom:0}
.frow.end{justify-content:flex-end;margin-top:auto;gap:6px}
.frow small,.fs-body small{color:var(--muted);font-size:11.5px}
.fgrow{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.fgrow b,.fmeta b{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fmeta{display:flex;align-items:center;gap:7px;min-width:0}
.fmeta em{font-style:normal;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frep{display:flex;align-items:center;gap:6px;min-width:0}
.frep .fline{flex:1;background:var(--tint);color:var(--green-text);border-radius:10px;padding:6px 9px;min-height:28px;font-weight:500}
.fline{display:block;min-height:1.4em;line-height:1.4;overflow-wrap:anywhere}
.fline.typing::after{content:"";display:inline-block;width:1.5px;height:1em;background:currentColor;margin-left:1px;vertical-align:-2px;animation:fblink .7s steps(1) infinite}
@keyframes fblink{50%{opacity:0}}
.fic{width:22px;height:22px;border-radius:7px;flex:none;background:var(--tint)}
.fic.ph{background:#E7F8EE}.fic.sms{background:#E6EEFD}.fic.ig{background:linear-gradient(135deg,#F9CE34,#EE2A7B 55%,#6228D7)}.fic.em{background:#EFEAFD}
.fbtn{font-size:11.5px;font-weight:600;border-radius:999px;padding:5px 10px;border:1px solid rgba(15,34,25,.1);background:rgba(255,255,255,.85);white-space:nowrap;transition:background-color .25s,color .25s,border-color .25s,transform .12s}
.fbtn.go{background:var(--green);border-color:var(--green);color:var(--green-ink)}
.fbtn.on{background:#DDF6E7;border-color:transparent;color:#075A2B}
.fbtn.go.on{background:var(--tint);border-color:transparent;color:var(--green-text)}
.fx-press{transform:scale(.9)}
.fcal{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:5px;flex:1}
.fcal i{font-style:normal;font-size:11px;color:var(--muted);text-align:center;font-weight:600}
.cell{border-radius:7px;background:rgba(238,243,240,.75);min-height:30px;font-size:11px;font-weight:600;display:flex;align-items:center;padding:0 7px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;transition:background-color .3s,color .3s}
.cell.busy{background:repeating-linear-gradient(-45deg,#EEF3F0 0 6px,#E5ECE8 6px 12px);color:var(--faint)}
.cell.on{background:#D4F5E1;color:#075A2B;box-shadow:inset 0 0 0 1px rgba(20,184,90,.45);animation:fpop .35s var(--ease)}
@keyframes fpop{from{transform:scale(.85);opacity:.4}}
.fplay{width:30px;height:30px;border-radius:50%;background:var(--ink);flex:none;position:relative}
.fplay::after{content:"";position:absolute;left:12px;top:9px;border-left:9px solid #FFF;border-top:6px solid transparent;border-bottom:6px solid transparent}
.fplay.on{background:var(--green)}
.fwave{flex:1;display:flex;align-items:center;gap:2px;height:30px}
.fwave i{flex:1;background:#C9D6CF;border-radius:2px;height:30%}
.fwave i:nth-child(3n){height:70%}.fwave i:nth-child(4n+1){height:50%}.fwave i:nth-child(5n+2){height:90%}
.fs.playing .fwave i{background:var(--green);animation:fwv .6s ease-in-out infinite alternate}
.fs.playing .fwave i:nth-child(2n){animation-delay:-.3s}
@keyframes fwv{to{transform:scaleY(.4)}}
.fnote{margin:0;background:rgba(244,248,245,.8);border-radius:10px;padding:8px 10px;min-height:48px}
.fchk{width:22px;height:22px;border-radius:7px;border:1.5px solid #C9D6CF;flex:none;position:relative;transition:background-color .2s,border-color .2s}
.fchk.on{background:var(--green);border-color:var(--green)}
.fchk.on::after{content:"";position:absolute;left:7px;top:3px;width:5px;height:10px;border:solid var(--green-ink);border-width:0 2px 2px 0;transform:rotate(45deg)}
.fphone{background:rgba(238,243,240,.7);border-radius:16px;padding:12px;display:flex;flex-direction:column;gap:6px;flex:1}
.fphone .fline{background:#FFFFFF;border-radius:12px 12px 12px 4px;padding:8px 10px;box-shadow:0 4px 10px -8px rgba(0,0,0,.3);min-height:60px}
.frev{display:flex;flex-direction:column;gap:3px}
.frev .stars{color:#F2B70A;letter-spacing:1px;font-size:13px}
.frev em{font-style:normal;color:var(--muted)}
.fpost{display:flex;gap:10px;align-items:flex-start}
.fpost img{width:64px;height:64px;border-radius:10px;object-fit:cover;flex:none}
.fpost span{flex:1;min-width:0}
.fsite{display:grid;gap:5px}
.fsite .fbar{height:6px;width:40%;border-radius:4px;background:var(--soft)}
.fsite .fhero{height:22px;border-radius:6px;background:linear-gradient(90deg,#D4F5E1,#E6EEFD)}
.fsite label{font-size:11px;color:var(--muted);font-weight:600}
.field{background:rgba(255,255,255,.7);border:1px solid rgba(15,34,25,.08);border-radius:8px;padding:5px 8px;min-height:28px}
.field.big{font-weight:600}
.fquote{display:grid;grid-template-columns:1fr auto;gap:6px 12px;align-items:center}
.fquote b{border-top:1px solid var(--line);padding-top:6px}
.fnum{font-family:var(--mono);font-size:12px;text-align:right;min-width:4ch;min-height:1.4em}
.fnum.tot{font-weight:700;border-top:1px solid var(--line);padding-top:6px}
.fav{width:26px;height:26px;border-radius:50%;background:var(--soft);font-size:11px;font-weight:700;display:grid;place-items:center;flex:none}
.fcur{position:absolute;left:0;top:0;z-index:5;pointer-events:none;color:var(--cc);transform:translate(-80px,-80px);transition:transform .5s cubic-bezier(.3,.1,.2,1);will-change:transform}
.fcur svg{width:20px;height:20px;filter:drop-shadow(0 3px 5px rgba(0,0,0,.35));display:block}
.fcur span{position:absolute;left:14px;top:16px;background:var(--cc);color:var(--lc);font-size:10.5px;font-weight:700;padding:2px 7px;border-radius:999px;white-space:nowrap;box-shadow:0 5px 12px -6px rgba(0,0,0,.5)}
.fcur i{position:absolute;left:-12px;top:-12px;width:24px;height:24px;border-radius:50%;border:2px solid currentColor;opacity:0}
.fcur.click i{animation:clickring .4s ease-out}
.fcur.flip span{left:auto;right:6px}
.floor-foot{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:22px;flex-wrap:wrap}
.floor-foot p{margin:0;color:#4A5F54;font-size:14px}
.fpause{font:600 13.5px var(--font);color:var(--ink);border-radius:999px;padding:10px 18px;min-height:42px;cursor:pointer}
.fpause:hover{--mx:50%}
@media (max-width:1060px){.floor-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){
  .floor{border-radius:26px;margin-inline:6px}
  .floor-grid{grid-template-columns:minmax(0,1fr);gap:12px}
  .fs.w2{grid-column:auto}.fs.h2{grid-row:auto}
  .fs.m-hide{display:none}
  .fs{min-height:0}
}

/* Sky only behind the top of each page; below it the page settles into a calm dotted canvas */
html body{background-color:#F2F5F3;background-image:radial-gradient(rgba(15,34,25,.075) 1px,transparent 1.3px);background-size:22px 22px}
html .skybg{position:absolute!important;inset:0 0 auto 0!important;height:min(1180px,130vh)!important;
  -webkit-mask-image:linear-gradient(180deg,#000 62%,transparent 100%)!important;mask-image:linear-gradient(180deg,#000 62%,transparent 100%)!important}

/* ---------- Liquid glass (controls and navigation) ----------
   Clear tinted body; the backdrop is bent at the rim by an SVG lens filter (Chromium), frosted elsewhere.
   Labels sit above the glass and stay sharp. */
:where(.lqg){position:relative}
.lqg{--lq-filter:blur(8px) saturate(170%);isolation:isolate;
  background:linear-gradient(180deg,rgba(255,255,255,.22),rgba(255,255,255,.08))!important;
  -webkit-backdrop-filter:blur(10px) saturate(180%) brightness(1.04)!important;backdrop-filter:blur(10px) saturate(180%) brightness(1.04)!important;
  border-color:transparent!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.75),inset 0 -1px 1px rgba(255,255,255,.25),inset 0 0 0 .5px rgba(255,255,255,.35),
    inset 0 -8px 16px -10px rgba(255,255,255,.35),0 1px 2px rgba(10,30,40,.08),0 10px 28px -12px rgba(10,30,40,.32)!important}
.lq-refract .lqg{-webkit-backdrop-filter:var(--lq-filter) blur(.4px)!important;backdrop-filter:var(--lq-filter) blur(.4px)!important}
.lqg > *:not(.lqg-rim){position:relative;z-index:1}
.lqg-rim{position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;padding:1.25px;
  background:conic-gradient(from var(--rim,200deg),rgba(255,255,255,.95) 0deg,rgba(255,255,255,.18) 50deg,rgba(255,255,255,.04) 110deg,rgba(255,255,255,.55) 170deg,rgba(255,255,255,.9) 190deg,rgba(255,255,255,.1) 250deg,rgba(255,255,255,.06) 300deg,rgba(255,255,255,.95) 360deg);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.lqg-rim::after{content:"";position:absolute;inset:-1px;border-radius:inherit;background:radial-gradient(60% 120% at var(--mx,30%) 0%,rgba(255,255,255,.5),transparent 60%);opacity:.0}
/* Controls on light page areas get a touch more body so labels keep contrast */
.wtab.lqg,.wplay.lqg,.fpause.lqg,.top .ghost.lqg,.menu-x.lqg,.menu-btn.lqg{background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.28))!important;color:var(--ink)}
.wtab.lqg[aria-selected="true"]{background:linear-gradient(180deg,rgba(15,34,25,.86),rgba(15,34,25,.72))!important;color:#FFFFFF}
.try.lqg{background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.3))!important}
.try.lqg .try-b{background:rgba(255,255,255,.72);border-color:rgba(255,255,255,.8)}
.ntally span.lqg{background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.06))!important}
.nstage.day .ntally span.lqg{background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,.35))!important}
.askvo .me.lqg{background:linear-gradient(180deg,rgba(255,255,255,.35),rgba(255,255,255,.12))!important}
.top > .wrap.lqg{background:linear-gradient(180deg,rgba(255,255,255,.64),rgba(255,255,255,.44))!important}
.top > .wrap.lqg nav a,.top > .wrap.lqg .logo{text-shadow:0 0 10px rgba(255,255,255,.95),0 0 2px rgba(255,255,255,.9)}
.top.scrolled > .wrap.lqg{background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.6))!important}
/* Fallbacks */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.lqg{background:rgba(255,255,255,.9)!important}}
.lq-solid .lqg{-webkit-backdrop-filter:none!important;backdrop-filter:none!important;background:#FFFFFF!important}
.lq-solid .lqg-rim{display:none}
@media (prefers-contrast:more){.lqg{background:rgba(255,255,255,.95)!important}.lqg-rim{display:none}}

/* Frosted glass for content laid over photos (no lens; content stays fully legible) */
.tile .ui{background:linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.58));-webkit-backdrop-filter:blur(16px) saturate(180%);backdrop-filter:blur(16px) saturate(180%);
  border:1px solid rgba(255,255,255,.7);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 16px 30px -18px rgba(0,0,0,.5)}
.tile .biz{background:linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.12));border:1px solid rgba(255,255,255,.45);-webkit-backdrop-filter:blur(10px) saturate(170%);backdrop-filter:blur(10px) saturate(170%);text-shadow:0 1px 2px rgba(0,0,0,.35)}
.mfy .glass{background:linear-gradient(160deg,rgba(255,255,255,.72),rgba(255,255,255,.5));-webkit-backdrop-filter:blur(22px) saturate(180%);backdrop-filter:blur(22px) saturate(180%);
  border:1px solid rgba(255,255,255,.75);box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 1px rgba(255,255,255,.3),0 30px 60px -30px rgba(0,0,0,.5)}
.mnav{background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.6))!important;-webkit-backdrop-filter:blur(24px) saturate(180%);backdrop-filter:blur(24px) saturate(180%);border-color:rgba(255,255,255,.7)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 30px 60px -30px rgba(10,30,40,.45)}
@media (prefers-reduced-transparency:reduce){.tile .ui,.mfy .glass,.mnav{-webkit-backdrop-filter:none;backdrop-filter:none;background:#FFFFFF!important}}

/* ---------- Bolder type: one confident display voice across the site ---------- */
html h1,html h2{font-weight:400;letter-spacing:-.048em;line-height:.98}
.photo-hero .hero h1{font-size:clamp(48px,min(7.2vw,11.5vh),108px);max-width:11em}
.split-head h2,.sec-head h2,.agents-head h2,.floor-head h2,.tools h2,.watch-head h2,.demo-head h2{font-size:clamp(40px,5.2vw,76px)}
.hleft h2,.nleft h2{font-size:clamp(36px,min(4.2vw,7vh),60px)}
main > section:first-child h1{font-size:clamp(46px,6.4vw,96px)}

/* ---------- Polish: contrast, browser surfaces, and the two templated grids ---------- */
:root{--faint:#5E6E66}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cell.busy{color:#4F6058}
::selection{background:rgba(20,184,90,.24);color:var(--ink)}
html{accent-color:var(--green);scrollbar-color:rgba(15,34,25,.28) transparent}
input,textarea{caret-color:var(--green)}
a{text-underline-offset:.2em;text-decoration-thickness:1px}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:rgba(15,34,25,.24);border-radius:999px;border:3px solid transparent;background-clip:content-box}
::-webkit-scrollbar-thumb:hover{background-color:rgba(15,34,25,.4)}
::-webkit-scrollbar-track{background:transparent}
.tools ::selection{background:rgba(91,240,154,.3);color:#FFFFFF}

/* Front desk features: an open list with ruled rows, not six identical boxes */
.grid3:has(> .feat){gap:0 48px}
.grid3 > .card.feat{background:none;border:0;box-shadow:none;border-radius:0;padding:26px 0 28px;border-top:1px solid rgba(15,34,25,.12);
  display:grid;grid-template-columns:28px minmax(0,1fr);gap:8px 14px;align-items:start}
.grid3 > .card.feat .ic{width:28px;height:28px;border-radius:9px;margin-top:1px}
.grid3 > .card.feat .ic svg{width:16px;height:16px}
.grid3 > .card.feat h3{font-size:21px;letter-spacing:-.02em;line-height:1.2}
.grid3 > .card.feat p{grid-column:2;max-width:34ch}

/* Who it's for: each business leads with a photo of the work, not an icon chip */
.ind .tag.photo{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:var(--g,var(--soft));margin-bottom:18px;
  box-shadow:0 18px 36px -24px rgba(10,40,25,.45)}
.ind .tag.photo img{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:861px){.ind .tag.photo{max-width:420px}}

/* Plan buttons: busy and error states */
[data-plan][aria-busy="true"]{opacity:.7;cursor:progress}
.plan-note{margin:10px 0 0;font-size:13.5px;line-height:1.45;color:#8A2A1E;text-align:left}
.plan-note a{color:inherit;font-weight:600}

/* Vo, the plush mascot, on the 404 and welcome pages */
.mascot-hero{width:clamp(130px,16vw,180px);height:auto;filter:drop-shadow(0 18px 24px rgba(10,40,25,.22))}

/* Log in: plain text beside the header buttons */
.login-link{font-size:14.5px;font-weight:600;color:var(--ink);text-decoration:none;padding:8px 6px;white-space:nowrap}
.login-link:hover{color:var(--green-text)}
@media (max-width:760px){.top .login-link{display:none}}