/* shoud.online · Liquid Glass layer for every public page. Loaded last; scoped to html.lq. */
html.lq{--lq-lime:#c0ff72;--lq-ink:#000000;--lq-ink-2:rgb(0 0 0/.64);--lq-glass:rgb(255 255 255/.62);--lq-glass-strong:rgb(255 255 255/.84);--lq-edge:rgb(0 0 0/.08);--lq-spec:rgb(255 255 255/.95);--lq-wash:rgb(192 255 114/.34);--lq-blur:blur(24px) saturate(1.8);--lq-spring:cubic-bezier(.2,.9,.25,1.14);--lq-smooth:cubic-bezier(.22,1,.36,1);--lq-lift:0 1px 2px rgb(0 0 0/.05),0 22px 60px -24px rgb(0 0 0/.3);scroll-padding-top:110px}
html.lq body{background:radial-gradient(1100px 700px at 100% -10%,var(--lq-wash),transparent 60%),radial-gradient(900px 640px at -15% 30%,rgb(192 255 114/.16),transparent 62%),#ffffff;background-attachment:fixed;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
html.lq ::selection{background:var(--lq-lime);color:#000000}

/* Page transitions between pages (Chrome, Edge, Safari 18.2+) */
@view-transition{navigation:auto}
html.lq .nav{view-transition-name:lq-nav}
::view-transition-old(root){animation:lq-page-out .28s var(--lq-smooth,ease) both}
::view-transition-new(root){animation:lq-page-in .5s cubic-bezier(.22,1,.36,1) both}
@keyframes lq-page-out{to{opacity:0;transform:scale(.985);filter:blur(6px)}}
@keyframes lq-page-in{from{opacity:0;transform:translateY(14px) scale(1.01);filter:blur(8px)}}

/* Navigation: floating Liquid Glass capsule */
html.lq body .nav{background:var(--lq-glass)!important;color:#000000!important;border:0!important;border-radius:999px!important;-webkit-backdrop-filter:var(--lq-blur);backdrop-filter:var(--lq-blur);box-shadow:inset 0 1px 0 var(--lq-spec),inset 0 0 0 1px var(--lq-edge),var(--lq-lift)!important;transition:background .35s,box-shadow .35s,transform .5s var(--lq-spring),min-height .35s var(--lq-smooth)}
html.lq.lq-scrolled body .nav{background:var(--lq-glass-strong)!important;box-shadow:inset 0 1px 0 var(--lq-spec),inset 0 0 0 1px var(--lq-edge),0 18px 40px -22px rgb(0 0 0/.35)!important}
html.lq.lq-nav-hidden body .nav{transform:translateY(calc(-100% - 24px))}
html.lq body .nav :is(.nav__brand,.brand,.nav__brand span,.brand-tail){color:#000000!important}
html.lq body .nav .nav__brand em,html.lq body .nav .brand em{color:#000000!important;opacity:.55;font-style:normal}
html.lq body .nav .nav__links a{position:relative;color:#000000!important;opacity:.8;border-radius:999px;padding:8px 13px;transition:opacity .2s,background .25s}
html.lq body .nav .nav__links a:hover{opacity:1;background:rgb(0 0 0/.05)}
html.lq body .nav .nav__links a[aria-current=page]{opacity:1;background:#000000;color:var(--lq-lime)!important}
html.lq body .nav .sign-in{color:#000000!important}
html.lq body .nav :is(.nav__cta,.nav-start){background:#000000!important;color:var(--lq-lime)!important;border:0!important;border-radius:999px!important;box-shadow:0 10px 24px -12px rgb(0 0 0/.6)!important}
html.lq body .nav :is(.nav__cta,.nav-start):hover{background:var(--lq-lime)!important;color:#000000!important}
html.lq body .nav .menu{background:#000000!important;color:var(--lq-lime)!important;border:0!important;border-radius:999px!important}

/* Buttons: spring press, specular top edge */
html.lq body :is(.button,.nav__cta,.nav-start,.primary,.btn,.google,.tb-cta,button[type=submit]){transition:transform .45s var(--lq-spring),background .2s,color .2s,box-shadow .3s!important;will-change:transform}
html.lq body :is(.button,.primary,.btn-primary):not(.secondary){box-shadow:inset 0 1px 0 rgb(255 255 255/.55),0 12px 28px -14px rgb(0 0 0/.55)!important}
html.lq body :is(.button,.nav__cta,.nav-start,.primary,.btn,.google,.tb-cta,button[type=submit],.chip,.playground-tab):active{transform:scale(.95)!important;transition-duration:.12s!important}
html.lq body :is(.button,.primary):not(.secondary):hover{box-shadow:inset 0 1px 0 rgb(255 255 255/.55),0 18px 36px -14px rgb(0 0 0/.5),0 0 0 6px var(--lq-wash)!important}
html.lq body :is(a,button,input,select,textarea,summary):focus-visible{outline:2.5px solid #000000!important;outline-offset:3px!important;border-radius:12px}

/* Hero */
html.lq body .page-hero:after{display:none!important}
html.lq body main h1{animation:lq-rise 1s var(--lq-smooth) .05s both}
html.lq body main h1 em{display:inline-block;animation:lq-rise 1.1s var(--lq-smooth) .22s both}
html.lq body .page-hero>p,html.lq body .hero-description{animation:lq-rise .9s var(--lq-smooth) .32s both}
html.lq body .page-hero .eyebrow,html.lq body .hero-promise{animation:lq-rise .8s var(--lq-smooth) both}
@keyframes lq-rise{from{opacity:0;transform:translateY(26px);filter:blur(10px)}}

/* Office characters: bouncy cast */
html.lq body .sprite-team{display:flex;gap:6px;flex-wrap:wrap}
html.lq body .sprite-team img{width:52px!important;height:52px!important;padding:2px;border-radius:18px!important;border:0!important;background:var(--lq-glass)!important;-webkit-backdrop-filter:var(--lq-blur);backdrop-filter:var(--lq-blur);box-shadow:inset 0 1px 0 var(--lq-spec),inset 0 0 0 1px var(--lq-edge),0 10px 22px -14px rgb(0 0 0/.4)!important;animation:lq-pop .8s var(--lq-spring) both;transition:transform .5s var(--lq-spring)}
html.lq body .sprite-team img:nth-child(2){animation-delay:.06s}html.lq body .sprite-team img:nth-child(3){animation-delay:.12s}html.lq body .sprite-team img:nth-child(4){animation-delay:.18s}html.lq body .sprite-team img:nth-child(5){animation-delay:.24s}html.lq body .sprite-team img:nth-child(6){animation-delay:.3s}
html.lq body .sprite-team img:hover{transform:translateY(-8px) scale(1.12) rotate(-3deg)}
@keyframes lq-pop{from{opacity:0;transform:translateY(16px) scale(.6)}}
html.lq body :is(.card-character,.feature-character,.step-character){transition:transform .6s var(--lq-spring)}
html.lq body :is(.card,.price-card):hover :is(.card-character,.feature-character){transform:translateY(-6px) scale(1.12)}

/* Glass surfaces */
html.lq body :is(article.card,.price-card,.plan-matcher,.page-playground,.task-workbook,.calculator,.callout,.office-guide-step,.workspace-guides article,.capability-card,.connection-card,.plan-inclusions,.guide-handoff,.hero-task,.task-composer,.hero-studio form){position:relative;background:var(--lq-glass)!important;color:#000000;border:0!important;-webkit-backdrop-filter:var(--lq-blur);backdrop-filter:var(--lq-blur);box-shadow:inset 0 1px 0 var(--lq-spec),inset 0 0 0 1px var(--lq-edge),var(--lq-lift)!important;border-radius:30px!important}
html.lq body :is(article.card,.price-card,.capability-card,.connection-card,.office-guide-step){transition:transform .6s var(--lq-spring),box-shadow .4s!important;isolation:isolate;overflow:hidden}
html.lq body :is(article.card,.price-card,.capability-card,.connection-card,.office-guide-step):before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:radial-gradient(380px circle at var(--mx,50%) var(--my,0%),rgb(192 255 114/.55),transparent 55%);opacity:0;transition:opacity .4s;pointer-events:none}
html.lq body :is(article.card,.price-card,.capability-card,.connection-card,.office-guide-step):hover{transform:translateY(-6px);box-shadow:inset 0 1px 0 var(--lq-spec),inset 0 0 0 1px rgb(0 0 0/.1),0 34px 70px -28px rgb(0 0 0/.38)!important}
html.lq body :is(article.card,.price-card,.capability-card,.connection-card,.office-guide-step):hover:before{opacity:1}
html.lq body :is(article.card,.price-card,.capability-card) :is(h2,h3,p,li,small,span:not(.lq-word)){color:#000000}
html.lq body .price-card.featured,html.lq body article.selected{box-shadow:inset 0 0 0 2px #000000,0 30px 70px -26px rgb(0 0 0/.42)!important}
html.lq body .breadcrumbs{display:inline-flex;gap:4px;padding:7px 14px;border-radius:999px;background:var(--lq-glass);-webkit-backdrop-filter:var(--lq-blur);backdrop-filter:var(--lq-blur);box-shadow:inset 0 0 0 1px var(--lq-edge)}

/* Segmented controls and tabs */
html.lq body :is(.billing,.playground-tabs){display:inline-flex;gap:4px;padding:4px;border-radius:999px!important;background:rgb(0 0 0/.05)!important;border:0!important;box-shadow:inset 0 1px 2px rgb(0 0 0/.06)}
html.lq body :is(.billing a,.playground-tab){border-radius:999px!important;transition:background .3s var(--lq-smooth),color .2s,box-shadow .3s,transform .4s var(--lq-spring)}
html.lq body :is(.billing a[aria-current=page],.playground-tab[aria-selected=true],.playground-tab.active,.playground-tab.on){background:#ffffff!important;color:#000000!important;box-shadow:0 1px 2px rgb(0 0 0/.08),0 6px 16px -8px rgb(0 0 0/.3)!important}

/* Fields */
html.lq body :is(.plan-matcher,.page-playground,.task-workbook,.calculator,.overnight-planner,.hero-task) :is(input,textarea,select){border-radius:16px!important;transition:box-shadow .25s,border-color .25s}
html.lq body :is(.plan-matcher,.page-playground,.task-workbook,.calculator,.hero-task) :is(input,textarea,select):focus{box-shadow:0 0 0 4px var(--lq-wash)!important;border-color:#000000!important}

/* Disclosure: smooth open */
html.lq body details>summary{cursor:pointer}
html.lq body details[open]>:not(summary){animation:lq-unfold .45s var(--lq-smooth) both}
@keyframes lq-unfold{from{opacity:0;transform:translateY(-6px)}}

/* Scroll reveal (classes added by liquid.js only, so content is never hidden without it) */
html.lq .lq-reveal{opacity:0;transform:translateY(34px) scale(.975);filter:blur(8px);transition:opacity .8s var(--lq-smooth),transform 1s var(--lq-spring),filter .8s var(--lq-smooth);transition-delay:calc(var(--lq-i,0)*70ms)}
html.lq .lq-reveal.lq-in{opacity:1;transform:none;filter:none}
html.lq .lq-reveal.lq-in:is(article.card,.price-card,.capability-card,.connection-card,.office-guide-step){transition:opacity .8s var(--lq-smooth),transform .6s var(--lq-spring),filter .8s var(--lq-smooth),box-shadow .4s!important;transition-delay:0s}

/* Sign in */
html.lq body:has(#googleBtn){background:radial-gradient(900px 600px at 50% -10%,var(--lq-wash),transparent 60%),radial-gradient(700px 500px at 100% 100%,rgb(192 255 114/.2),transparent 60%),#ffffff!important}
html.lq body:has(#googleBtn) .bg-photo{display:none}
html.lq body:has(#googleBtn) .shell>.card{background:var(--lq-glass)!important;border:0!important;border-radius:38px!important;padding:34px 30px 26px!important;-webkit-backdrop-filter:var(--lq-blur);backdrop-filter:var(--lq-blur);box-shadow:inset 0 1px 0 var(--lq-spec),inset 0 0 0 1px var(--lq-edge),0 40px 90px -30px rgb(0 0 0/.35)!important;animation:lq-sheet .8s var(--lq-spring) both}
html.lq body:has(#googleBtn) .office-welcome{border:0!important;background:transparent!important;gap:4px;justify-content:center}
html.lq body:has(#googleBtn) .office-welcome img{width:56px!important;height:56px!important;animation:lq-pop .8s var(--lq-spring) both;transition:transform .5s var(--lq-spring)}
html.lq body:has(#googleBtn) .office-welcome img:nth-child(2){animation-delay:.07s}html.lq body:has(#googleBtn) .office-welcome img:nth-child(3){animation-delay:.14s}html.lq body:has(#googleBtn) .office-welcome img:nth-child(4){animation-delay:.21s}html.lq body:has(#googleBtn) .office-welcome img:nth-child(5){animation-delay:.28s}html.lq body:has(#googleBtn) .office-welcome img:nth-child(6){animation-delay:.35s}
html.lq body:has(#googleBtn) .office-welcome img:hover{transform:translateY(-10px) scale(1.15)}
html.lq body:has(#googleBtn) .shell h1{font-size:clamp(36px,6vw,48px)!important;font-weight:800!important;letter-spacing:-.045em!important;line-height:1.02!important}
html.lq body:has(#googleBtn) .sub{font-size:15.5px!important;line-height:1.6!important;color:rgb(0 0 0/.68)!important;max-width:340px;margin-inline:auto!important}
html.lq body:has(#googleBtn) .google{min-height:58px!important;border-radius:999px!important;background:#000000!important;color:#ffffff!important;font:650 16px/1 'Manrope',system-ui,sans-serif!important;letter-spacing:-.01em!important;text-transform:none!important;box-shadow:inset 0 1px 0 rgb(255 255 255/.18),0 16px 34px -14px rgb(0 0 0/.6)!important}
html.lq body:has(#googleBtn) .google:hover{background:#111111!important;box-shadow:inset 0 1px 0 rgb(255 255 255/.18),0 20px 40px -14px rgb(0 0 0/.6),0 0 0 6px var(--lq-wash)!important}
html.lq body:has(#googleBtn) .google svg{background:#ffffff;border-radius:50%;padding:4px;width:26px!important;height:26px!important}
html.lq body:has(#googleBtn) .trust span{padding:6px 10px;border-radius:999px;background:rgb(0 0 0/.045)}
html.lq body:has(#googleBtn) .trust svg{color:#000000!important;stroke:#000000}
html.lq body:has(#googleBtn) .steps{border:0!important;border-radius:26px;background:var(--lq-glass);-webkit-backdrop-filter:var(--lq-blur);backdrop-filter:var(--lq-blur);box-shadow:inset 0 0 0 1px var(--lq-edge);animation:lq-rise .9s var(--lq-smooth) .3s both}

/* Mobile menu: glass sheet with staggered links */
@media(max-width:860px){
  html.lq body .nav .menu{font-size:14px!important;font-weight:700!important;min-height:40px;padding:0 16px!important;letter-spacing:0!important}
  html.lq body .nav :is(.nav__cta,.nav-start){font-size:13px!important;padding:10px 14px!important;min-height:40px!important}
  html.lq body .breadcrumbs{border-radius:16px;font-size:10px;line-height:1.5}
  html.lq body .nav .nav__links.mobile-open{background:var(--lq-glass-strong)!important;-webkit-backdrop-filter:var(--lq-blur);backdrop-filter:var(--lq-blur);border:0!important;border-radius:28px!important;box-shadow:inset 0 1px 0 var(--lq-spec),inset 0 0 0 1px var(--lq-edge),0 30px 60px -20px rgb(0 0 0/.4)!important;padding:10px!important;animation:lq-sheet .5s var(--lq-spring) both;transform-origin:top right}
  html.lq body .nav .nav__links.mobile-open a{display:block;padding:14px 16px;font-size:17px;font-weight:650;opacity:1;animation:lq-rise .5s var(--lq-smooth) both}
  html.lq body .nav .nav__links.mobile-open a:nth-child(2){animation-delay:.04s}html.lq body .nav .nav__links.mobile-open a:nth-child(3){animation-delay:.08s}html.lq body .nav .nav__links.mobile-open a:nth-child(4){animation-delay:.12s}html.lq body .nav .nav__links.mobile-open a:nth-child(5){animation-delay:.16s}html.lq body .nav .nav__links.mobile-open a:nth-child(6){animation-delay:.2s}
}
@keyframes lq-sheet{from{opacity:0;transform:scale(.9) translateY(-8px)}}

/* Office companion: glass bubble */
html.lq body .office-pet .pet-toggle{background:var(--lq-glass-strong)!important;color:#000000!important;border:0!important;border-radius:999px!important;-webkit-backdrop-filter:var(--lq-blur);backdrop-filter:var(--lq-blur);box-shadow:inset 0 1px 0 var(--lq-spec),inset 0 0 0 1px var(--lq-edge),0 18px 40px -16px rgb(0 0 0/.4)!important;transition:transform .5s var(--lq-spring),box-shadow .3s!important;animation:lq-pop .9s var(--lq-spring) 1.2s both}
html.lq body .office-pet .pet-toggle:hover{transform:translateY(-3px) scale(1.03)}
html.lq body .office-pet .pet-toggle:active{transform:scale(.94)}
html.lq body .office-pet .pet-toggle img{background:var(--lq-lime)!important;border-radius:50%!important}
html.lq body .office-pet .pet-panel:not([hidden]){background:var(--lq-glass-strong)!important;-webkit-backdrop-filter:var(--lq-blur);backdrop-filter:var(--lq-blur);border:0!important;border-radius:28px!important;box-shadow:inset 0 1px 0 var(--lq-spec),inset 0 0 0 1px var(--lq-edge),0 30px 70px -24px rgb(0 0 0/.45)!important;animation:lq-sheet .5s var(--lq-spring) both;transform-origin:bottom right}

/* Reading progress in lime, pinned under the island */
html.lq body .page-reading-progress span{background:linear-gradient(90deg,#000000,var(--lq-lime))!important}

/* Toasts and trial banner as a Dynamic Island */
html.lq body :is(.toast,.trial-banner){border-radius:999px!important;background:#000000!important;color:#ffffff!important;box-shadow:0 18px 40px -16px rgb(0 0 0/.6)!important;animation:lq-island .6s var(--lq-spring) both}
@keyframes lq-island{from{opacity:0;transform:translateY(-14px) scale(.7)}}

/* Cursor light (desktop) */
html.lq .lq-glow{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:-1;background:radial-gradient(circle,rgb(192 255 114/.3),transparent 62%);transform:translate3d(var(--gx,-999px),var(--gy,-999px),0);transition:opacity .4s;opacity:0}
html.lq.lq-pointer .lq-glow{opacity:1}

@media(prefers-reduced-motion:reduce){
  html.lq *,html.lq *:before,html.lq *:after{animation-duration:.001ms!important;animation-delay:0s!important;transition-duration:.001ms!important}
  html.lq .lq-reveal{opacity:1;transform:none;filter:none}
  html.lq .lq-glow{display:none}
  ::view-transition-old(root),::view-transition-new(root){animation:none}
}
@media(prefers-reduced-transparency:reduce){html.lq body *{-webkit-backdrop-filter:none!important;backdrop-filter:none!important}}
@media(hover:none){html.lq .lq-glow{display:none}}