/* Shoud / Open Sky — semantic tokens and final component materials.
   Layout modules remain in their source files; compiled by build-styles.cjs. */
@font-face{font-family:Shoud Display;src:url('/fonts/shoud-wordmark.ttf') format('truetype');font-display:swap}
html.sky{--sky:#659acf;--sky-dark:#142b42;--sky-paper:#fffdf3;--sky-lime:#cdff53;--sky-line:#142b4226;--sky-radius:24px;scroll-padding-top:110px}
html.sky body.lg{background:#f4f5ef!important;background-attachment:scroll!important}
html.sky[data-theme=dark],html.sky[data-theme=dark] body.lg{background:#000!important;color:#fff}
html.sky body.lg::before,html.sky body.lg::after{content:none!important}
html.sky body:not(.lg){background:#f4f5ef!important;background-attachment:scroll!important;color:var(--sky-dark);font-family:Manrope,system-ui,sans-serif!important}
html.sky body:not(.lg)::before,html.sky body:not(.lg)::after{content:none!important}
html.sky body:not(.lg) :is(h1,h2,h3,h4){text-wrap:balance}
html.sky body:not(.lg) p{line-height:1.7}
html.sky body:not(.lg) :is(a,button,input,textarea,select,summary):focus-visible{outline:3px solid #174b85!important;outline-offset:5px!important}
html.sky body:not(.lg) :is(.button,.primary,.nav-start,button[type=submit]){background:var(--sky-lime)!important;color:#142b42!important;-webkit-text-fill-color:#142b42!important;border:1px solid transparent!important;box-shadow:none!important;min-height:48px;transition:transform .18s ease,background .18s ease!important}
html.sky body:not(.lg) :is(.button,.primary,.nav-start):hover{background:#dfff8c!important;transform:translateY(-2px)}
html.sky body:not(.lg) :is(.button.secondary,.secondary){background:#fffdf3!important;border-color:var(--sky-line)!important}
html.sky body:not(.lg) :is(.card,.capability-card,.plan-card,.price-card,.connection-card,.page-playground,.workbook,.starter-card,.enterprise-plan-card){background:var(--sky-paper)!important;border:1px solid var(--sky-line)!important;box-shadow:0 12px 32px -24px #142b4240!important;backdrop-filter:none!important;border-radius:var(--sky-radius)!important}
html.sky body:not(.lg) :is(input,textarea,select){border-color:#142b4255!important;border-radius:12px!important;background:#fff!important}
html.sky body:not(.lg) :is(.nav,.enterprise-nav){background:#fffdf3f2!important;border-color:#142b4214!important;box-shadow:0 8px 28px -20px #142b4260!important;backdrop-filter:blur(12px)!important;max-width:1280px}
html.sky body:not(.lg) .nav .nav-start{background:var(--sky-lime)!important;color:var(--sky-dark)!important;-webkit-text-fill-color:var(--sky-dark)!important}
html.sky body:not(.lg) .nav-drop__btn{min-height:44px}
html.sky body:not(.lg) .nav .nav-drop__menu{background:var(--sky-paper)!important}
html.sky body:not(.lg) .nav-drop:not(.is-open) .nav-drop__menu{display:none}
html.sky body:not(.lg) .nav-drop.is-open .nav-drop__menu{display:flex}
html.sky body:not(.lg) :is(.page-hero,.enterprise-hero){padding-block:48px!important}
html.sky body:not(.lg) .page-hero h1{font-size:clamp(42px,6.8vw,84px)!important;line-height:1.02!important;max-width:1000px;letter-spacing:-.055em}
html.sky body:not(.lg) .page-hero .hero-sublead{max-width:650px;font-size:20px!important}
html.sky body:not(.lg) .page-hero .sprite-team img{image-rendering:pixelated;background:var(--sky-paper);border:1px solid var(--sky-line);border-radius:50%;padding:5px}
html.sky body:not(.lg) .hero-trial-bar{background:#fffdf3!important;border:1px solid var(--sky-line)!important;box-shadow:none!important;padding:16px!important;gap:10px!important}
html.sky body:not(.lg) .hero-trial-bar span{background:transparent!important;border:0!important;padding:0 10px 0 0!important;font-size:12px!important}
html.sky body:not(.lg) .footer{background:transparent!important;padding-block:40px!important}
html.sky body:not(.lg) :is(.shoud-section,.work-section,.explain-section){margin-block:32px}
html.sky body:not(.lg) :is(.section-heading h2,.shoud-section-head h2){font-size:clamp(32px,4.5vw,58px)!important;line-height:1.08!important}
/* The homepage masthead: an original sky painting, cream wordmark, living cast. */
html.sky:has(.sky-hero) body:not(.lg){background:linear-gradient(#659acf 0 850px,#f4f5ef 1150px)!important}
html.sky .sky-hero{position:relative;isolation:isolate;max-width:none!important;margin:-86px 0 0!important;padding:150px max(28px,calc((100vw - 1240px)/2)) 30px!important;min-height:790px;background:#659acf url('/img/office-sky.webp') center 42%/cover no-repeat!important;overflow:hidden}
html.sky .sky-kicker{font-size:11px;letter-spacing:.16em;font-weight:800;display:flex;gap:10px;align-items:center;justify-content:center;color:#142b42;margin:15px 0 8px}
html.sky .sky-dot{width:7px;height:7px;border-radius:50%;background:var(--sky-lime);box-shadow:0 0 0 4px #cdff5324}
html.sky body:not(.lg) h1.sky-wordmark{position:relative;font-family:'Shoud Display',Georgia,serif!important;font-style:normal;font-weight:400!important;line-height:.9!important;letter-spacing:-.065em!important;font-size:clamp(110px,23vw,320px)!important;text-align:center;margin:16px 0 38px!important;padding-right:.1em;color:var(--sky-paper)!important;-webkit-text-fill-color:var(--sky-paper)!important;transform:scaleY(1.16) rotate(-3deg)!important;text-shadow:none!important;filter:none!important}
html.sky .sky-wordmark-star{position:absolute;right:-.01em;top:.07em;font:normal .2em/1 system-ui;letter-spacing:0;color:#142b42!important;-webkit-text-fill-color:#142b42!important}
html.sky .sky-hero>svg{display:none!important}
html.sky body:not(.lg) .skip{background:#fffdf3!important;color:#142b42!important;-webkit-text-fill-color:#142b42!important}
html.sky body:not(.lg) :is(.button,.primary,.nav-start) *{color:inherit!important;-webkit-text-fill-color:inherit!important}
html.sky body:not(.lg) :is(button,input,select,textarea,.sky-teammate,.sky-start a){font-family:inherit!important}
html.sky body:not(.lg) footer>div{flex-wrap:wrap;min-width:0}
html.sky body:not(.lg) .footer :is(a,span){color:#142b42!important;-webkit-text-fill-color:#142b42!important;-webkit-text-stroke:0!important}
html.sky .sky-hero-bottom{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-top:45px}
html.sky body:not(.lg) .sky-intro .sky-tagline{font-size:clamp(25px,3vw,40px);font-weight:800;letter-spacing:-.045em;line-height:1.1!important;margin:0 0 12px;color:#142b42}
html.sky body:not(.lg) .sky-intro>p:not(.sky-tagline){font-size:14px;color:#142b42;margin:0;line-height:1.6}
html.sky .sky-start{text-align:right;padding-bottom:2px}
html.sky .sky-start .button{font-size:15px;padding:18px 30px!important;gap:26px;display:inline-flex;align-items:center}
html.sky .sky-start p{font-size:12px;font-weight:650;color:#142b42!important;margin:12px 0}
html.sky .sky-tour{font-size:12px;font-weight:700;color:#142b42;text-underline-offset:5px}
html.sky .sky-team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:36px}
html.sky .sky-teammate{display:flex;align-items:center;gap:10px;padding:12px 16px 12px 8px;background:#fffdf3e8;border:1px solid #fffdf360;border-radius:18px;text-decoration:none;color:#142b42;transition:transform .2s}
html.sky .sky-teammate:hover{transform:translateY(-4px)}
html.sky .sky-teammate img{image-rendering:pixelated;object-fit:contain;width:52px;height:56px;animation:sky-bob 5s ease-in-out infinite}
html.sky .sky-teammate:nth-child(2n) img{animation-delay:-2s}
html.sky .sky-teammate strong{display:block;font-size:13px}
html.sky .sky-teammate small{display:block;font-size:10px;margin-top:5px}
html.sky .sky-teammate>span:last-child{margin-left:auto;font-size:14px}
html.sky body:not(.lg) #officePreview{max-width:1280px;margin:0 auto!important;padding:80px 32px 40px!important;background:transparent!important}
html.sky body:not(.lg) #officePreview .hero__panel{gap:48px;align-items:center}
html.sky body:not(.lg) #heroTitle{font-size:clamp(38px,4.2vw,60px)!important;line-height:1.08!important;margin:18px 0 26px!important}
html.sky body:not(.lg) #heroTitle em{font-family:Georgia,serif;font-weight:400}
html.sky body:not(.lg) #officePreview .hero-promise{font-size:10px;color:#142b42!important}
html.sky body:not(.lg) #officePreview .hero-sublead{font-size:20px!important;line-height:1.5!important}
html.sky body:not(.lg) #officePreview .hero-description{font-size:15px!important;line-height:1.8!important}
html.sky body:not(.lg) #officePreview .start-note{font-size:11px!important;line-height:1.7;max-width:500px;margin:18px 0}
html.sky body:not(.lg) #officePreview .hero-facts{flex-wrap:wrap;font-size:10px}
html.sky body:not(.lg) #officePreview .task-composer{background:#fffdf3!important;border:1px solid var(--sky-line)!important;border-radius:24px!important;box-shadow:none!important;padding:24px!important}
html.sky #heroOffice{min-height:340px;border-radius:24px;background:#fffdf340;contain:layout}
html.sky .public-office:empty{min-height:340px}
html.sky .office-preview-label{font:600 11px/1.6 system-ui!important;color:#142b42!important;margin:0 0 12px!important}
html.sky .office-preview-fallback{padding:40px;max-width:600px;margin:auto;font:14px/1.7 system-ui}
html.sky .office-preview-fallback button{border:1px solid #142b4240;padding:12px 18px;border-radius:24px;background:#cdff53;color:#142b42}
html.sky .office-preview-fallback a{color:#142b42;text-underline-offset:4px}
html.sky:not([data-theme=dark]) body.lg .onboarding{background:linear-gradient(#fffdf3d9,#f4f5eff2),url('/img/office-sky.webp') center top/cover no-repeat}
html.sky:not([data-theme=dark]) body.lg .onboarding-card{background:#fffdf3!important;border:1px solid #142b4226;border-radius:28px}
html.sky #heroOffice:empty::before{content:'YOUR SHARED OFFICE · MEET THE CHIEFS BELOW';display:block;text-align:center;padding:140px 20px;font-size:11px;letter-spacing:.08em}
html.sky body:not(.lg) .price-card{display:flex;flex-direction:column}
html.sky body:not(.lg) .price-card.featured{border:2px solid #3e5b1d!important;background:#f4ffd9!important}
html.sky body:not(.lg) .price-card .button{margin-top:auto}
html.sky body:not(.lg) .office-invitation{border-radius:28px!important;overflow:hidden}
html.sky .office-feature-grid{color:white}
@keyframes sky-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
@media(min-width:1600px){html.sky .sky-hero{background-position:center 48%;min-height:850px}}
@media(max-width:850px){html.sky .sky-hero{margin-top:-76px!important;padding:128px 24px 24px!important;min-height:0;background-position:center top!important}.sky-team{gap:8px!important}html.sky .sky-team{grid-template-columns:repeat(2,minmax(0,1fr))}html.sky body:not(.lg) h1.sky-wordmark{margin-block:24px 40px!important}html.sky body:not(.lg) .nav__links.mobile-open{background:var(--sky-paper)!important}html.sky body:not(.lg) #officePreview{padding:52px 24px!important}html.sky body:not(.lg) #officePreview .hero__panel{gap:28px}html.sky body:not(.lg) .nav .nav-drop:not(.is-open) .nav-drop__menu{display:none}html.sky body:not(.lg) .nav .nav-drop.is-open .nav-drop__menu{display:flex}}
@media(max-width:520px){html.sky .sky-hero{padding:116px 18px 24px!important;background-position:48% 0!important}.sky-kicker{font-size:8px!important;letter-spacing:.12em!important}html.sky body:not(.lg) h1.sky-wordmark{font-size:25vw!important;margin:28px 0 36px!important}html.sky .sky-hero-bottom{align-items:flex-start;flex-direction:column;gap:22px;margin-top:20px}html.sky .sky-intro .sky-tagline{font-size:30px!important}html.sky .sky-intro>p:not(.sky-tagline){font-size:13px!important}html.sky .sky-start{text-align:left;width:100%}html.sky .sky-start .button{display:flex;justify-content:space-between;width:100%;padding:16px 22px!important}html.sky .sky-start p{display:inline-block;margin-right:12px;font-size:10px}html.sky .sky-tour{font-size:10px}html.sky .sky-team{margin-top:16px;gap:8px}html.sky .sky-teammate{padding:8px 9px 8px 4px;gap:4px;border-radius:14px}html.sky .sky-teammate img{width:40px;height:44px}html.sky .sky-teammate strong{font-size:11px}html.sky .sky-teammate small{font-size:8px}html.sky .sky-teammate>span:last-child{display:none}html.sky body:not(.lg) #officePreview{padding:44px 18px!important}html.sky body:not(.lg) #officePreview .task-composer{padding:16px!important}html.sky .composer-bottom{flex-wrap:wrap;gap:12px}html.sky .composer-bottom button{width:100%;justify-content:space-between}html.sky body:not(.lg) .page-hero{padding-block:32px!important}html.sky .sky-team img{animation:none}}
@media(prefers-reduced-motion:reduce){html.sky *,html.sky *::before,html.sky *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.reveal-ready,.night-reveal{opacity:1!important;transform:none!important}}
@media print{html.sky .sky-hero{background:white!important;min-height:0!important}html.sky body:not(.lg) h1.sky-wordmark{color:#111!important;-webkit-text-fill-color:#111!important}}

/* Monochrome coding system. These follow the sky rules so black and white win. */
html.sky{--sky:#111111;--sky-dark:#111111;--sky-paper:#ffffff;--sky-lime:#111111;--sky-line:#11111122}
html.sky body:not(.lg){background:#ffffff!important;color:#111111!important;font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace!important}
html.sky body:not(.lg) :is(h1,h2,h3,h4,p,a,button,small,strong,em,span,label){font-family:inherit}
html.sky body:not(.lg) h1.sky-wordmark{font-family:"JetBrains Mono",ui-monospace,monospace!important;color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;transform:none!important;letter-spacing:-.06em!important;font-weight:700!important}
html.sky:has(.sky-hero) body:not(.lg){background:#ffffff!important}
html.sky .sky-hero{background:#0a0a0a!important}
html.sky .sky-kicker,html.sky .sky-intro .sky-tagline,html.sky .sky-intro>p:not(.sky-tagline),html.sky .sky-start p,html.sky .sky-tour{color:#ffffff!important;-webkit-text-fill-color:#ffffff!important}
html.sky .sky-teammate{background:#161616e8;border-color:#ffffff24;color:#ffffff}
html.sky .sky-teammate strong,html.sky .sky-teammate small{color:#ffffff}
html.sky body:not(.lg) :is(.button,.primary,.nav-start,button[type=submit]){background:#111111!important;color:#ffffff!important;-webkit-text-fill-color:#ffffff!important;border-color:#111111!important}
html.sky body:not(.lg) :is(.button,.primary,.nav-start):hover{background:#000000!important}
html.sky .sky-start .button{background:#ffffff!important;color:#111111!important;-webkit-text-fill-color:#111111!important}
html.sky body:not(.lg) :is(.button.secondary,.secondary){background:#ffffff!important;color:#111111!important;-webkit-text-fill-color:#111111!important;border-color:#111111!important}
html.sky body:not(.lg) .price-card.featured{border-color:#111111!important;background:#f4f4f4!important}
html.sky body:not(.lg) #heroTitle em{font-family:"JetBrains Mono",ui-monospace,monospace;font-style:normal}
html.sky .sky-dot{background:#ffffff;box-shadow:0 0 0 4px #ffffff33}