/* Shared commercial-page shell, based on the approved homepage concept. */
body.designRefresh{background:#f7f5ee;color:#263c30;font-family:'IBM Plex Sans Arabic',system-ui,sans-serif}
html:has(body.designRefresh){scroll-padding-top:115px}.designRefresh .page,.designRefresh .helpShell{--landing-cream:#f7f5ee;--landing-ink:#263c30;--landing-border:#dfe4d9;--landing-muted:#657164;--cream:#f7f5ee;--ink:#263c30;--line:#dfe4d9;background:#f7f5ee;overflow:clip;animation:none}.designRefresh .page::before,.designRefresh .helpShell::before{display:none}
.designHeader{position:sticky;top:0;z-index:100;width:100%;display:flex;align-items:center;gap:30px;padding:20px max(5%,calc((100% - 1296px)/2));background:#f7f5ee;border:0;box-shadow:0 6px 22px #263c3007}.designBrand{display:inline-flex;align-items:center;gap:11px;flex:none;text-decoration:none}.designMark{display:grid;place-items:center;background:#356142;width:44px;height:44px;border-radius:11px}.designMark img{width:34px;height:34px}.designWordmark{width:125px;height:auto}.designNav{display:flex;align-items:center;gap:27px;flex:1}.designNav a,.designNav summary{font:inherit;font-size:14px;color:#263c30;text-decoration:none;cursor:pointer}.designNav details{position:relative}.designNav summary{list-style:none}.designNav summary::-webkit-details-marker{display:none}.designNav summary:after{content:'⌄';margin-inline-start:8px}.designPanel{position:absolute;top:35px;inset-inline-start:0;width:310px;padding:13px;background:#fffdfa;border:1px solid #dfe4d9;border-radius:15px;box-shadow:0 15px 35px #263c3012}.designPanel a{display:block;padding:12px;border-radius:8px}.designPanel a:hover{background:#eef3e8}.designPanel small{display:block;color:#718167;font-size:11px;margin-top:4px}.designNav a[aria-current=page]{color:#356142;font-weight:700}.designActions{display:flex;align-items:center;gap:18px}.designLanguage{font-size:12px;color:#53684d}.designDemo{font:inherit;white-space:nowrap;border:0;background:#356142;color:white;border-radius:10px;padding:12px 18px;cursor:pointer;font-size:13px;transition:transform .2s,box-shadow .2s}.designDemo:hover{transform:translateY(-2px);box-shadow:0 7px 18px #294a341c}.designMenu{display:none}.designMobileActions{display:none}.designHeader :focus-visible{outline:2px solid #356142;outline-offset:5px}
.designRefresh h1,.designRefresh h2,.designRefresh h3{font-family:inherit}.designRefresh h1{letter-spacing:-.025em;font-weight:600;line-height:1.35}.designRefresh :is(.pricingHero,.aboutHero,.blogHero,.helpHero,.legalHero){background:radial-gradient(circle,#72947728 1px,transparent 1.5px) 0 0/24px 24px,linear-gradient(#eef3e8,#f7f5ee);padding-block:65px 55px}.designRefresh :is(.pricingHero,.aboutHero,.blogHero,.helpHero,.legalHero) h1{font-size:clamp(32px,4.5vw,58px)}.designRefresh :is(.tierCard,.blogCard,.helpCategoryCard,.categoryCard,.aboutStorySection,.legalSection){border-color:#dfe4d9;border-radius:18px;box-shadow:0 10px 30px #263c3006}.designRefresh :is(.footer,.helpFooter){background:#112b1f;border-top:0;color:#d7e1da}.designRefresh :is(.footerColumn a,.helpFooterLinks a){color:#bdcec2}.designRefresh :is(.footerColumn a,.helpFooterLinks a):hover{color:#fff}.designRefresh :is(.footerTagline,.footerBottom p,.helpFooterBottom){color:#a8bdae}.designRefresh .articleToc{scrollbar-width:thin}.designRefresh .helpSidebar{top:110px}
html[dir=ltr] body.designRefresh{font-family:'Plus Jakarta Sans',system-ui,sans-serif}
@media(max-width:1050px){.designHeader{gap:20px}.designNav{gap:17px}.designActions{gap:12px}.designWordmark{width:105px}.designNav a,.designNav summary{font-size:13px}}
@media(max-width:900px){.designHeader{padding:14px 5%;gap:15px}.designMenu{display:block;margin-inline-start:auto;font:inherit;font-size:13px;min-height:44px;padding:8px 13px;background:white;color:#263c30;border:1px solid #dfe4d9;border-radius:8px}.designActions{display:none}.designNav{display:none;position:absolute;top:100%;inset-inline:0;background:#fffdfa;border-bottom:1px solid #dfe4d9;padding:20px 5%;max-height:75svh;overflow:auto;box-shadow:0 16px 25px #263c3010}.designNav.isOpen{display:flex;flex-direction:column;align-items:stretch;gap:18px}.designPanel{position:static;box-shadow:none;margin-top:12px;width:100%}.designNav a,.designNav summary{min-height:36px;font-size:15px}.designMobileActions{display:flex;align-items:center;gap:22px;padding-top:15px;border-top:1px solid #dfe4d9}.designWordmark{width:125px}.designRefresh :is(.pricingHero,.aboutHero,.blogHero,.helpHero,.legalHero){padding-block:38px}.designRefresh .helpSidebar{top:90px}}
@media(max-width:360px){.designWordmark{width:110px}.designMark{width:38px;height:38px}.designMark img{width:29px;height:29px}.designHeader{gap:10px}}
@media(prefers-reduced-motion:reduce){.designDemo{transition:none}}
/* Page introductions share the homepage's quiet, readable surface. */
.designRefresh :is(.pricingHero,.aboutHero,.blogHero,.helpHero,.legalHero){color:#263c30;text-shadow:none;border:0;box-shadow:none}
.designRefresh :is(.pricingHero,.aboutHero,.blogHero,.helpHero,.legalHero) h1{color:#263c30;text-shadow:none}
.designRefresh :is(.pricingHero,.aboutHero,.blogHero,.helpHero,.legalHero) p{color:#657164;text-shadow:none}
.designRefresh :is(.pricingHero,.aboutHero,.blogHero,.helpHero,.legalHero)::before,.designRefresh .blogHero::after{display:none}
.designRefresh .blogHero{width:100%;margin:0;border-radius:0;padding-inline:max(5%,calc((100% - 1296px)/2));min-height:280px}
.designRefresh :is(.pricingTiersSection,.pricingComparisonSection,.seatsSection,.aboutContent,.blogContent){background:#f7f5ee}
.designRefresh :is(.pricingTierCard,.calculatorCard,.seatCard,.categoryCard,.popularCard,.blogCard,.aboutStorySection){background:#fffdf8;border:1px solid #dfe4d9;border-radius:18px;box-shadow:0 8px 28px #263c3005}
.designRefresh .pricingTierCard.featured{background:#eef3e8;border:2px solid #356142}
.designRefresh .blogArticleHero{background:#eef3e8;border-radius:20px;border:1px solid #dfe4d9;box-shadow:none}
.designRefresh .blogArticleBody{line-height:1.95}
.designRefresh .legalContent{background:#fffdf8;border:1px solid #dfe4d9;border-radius:20px;padding:clamp(24px,4vw,56px);margin-block:40px 72px}
.designRefresh .footerLogoMark{border-radius:11px}
@media(max-width:600px){.designRefresh .blogGrid{grid-template-columns:minmax(0,1fr)}.designRefresh .blogContent{padding:35px 5%}.designRefresh .blogHero{padding-inline:5%}.designRefresh .legalContent{margin-inline:5%;width:90%}.designRefresh .blogArticleHero{border-radius:0}}
.designRefresh .aboutStorySection{padding:clamp(24px,4vw,48px)}
.designRefresh .blogArticleHero{padding-top:28px}
.designNav details:has(a[aria-current="page"])>summary{color:#356142;font-weight:700}
@media(prefers-reduced-motion:no-preference){.designNav details[open] .designPanel,.designNav.isOpen{animation:designMenuIn .22s cubic-bezier(.22,.61,.36,1) both}@keyframes designMenuIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}}

/* Keep the Help Center identity attached to the brand, in reading order. */
.designHelpBrand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.designHelpDivider{color:#a8b6a5;font-size:24px;font-weight:400}
.designHelpLabel{font-size:13px;font-weight:600;white-space:nowrap;color:#356142}
@media(max-width:1150px) and (min-width:901px){
.helpShell .designHeader{gap:14px;padding-inline:3%}
.helpShell .designWordmark{width:90px}
.helpShell .designNav{gap:12px}
.helpShell .designActions{gap:10px}
.helpShell .designDemo{padding-inline:10px}
.helpShell .designHelpBrand{gap:8px}
.helpShell .designHelpLabel{font-size:11px}
}
@media(max-width:600px){
.designHelpBrand{gap:8px}.helpShell .designHeader{gap:8px}
.helpShell .designWordmark{width:90px}.helpShell .designMark{width:34px;height:34px}.helpShell .designMark img{width:27px;height:27px}
.helpShell .designBrand{gap:7px}.designHelpLabel{font-size:11px}.designHelpDivider{font-size:20px}
.helpShell .designMenu{padding-inline:9px;font-size:12px}
}
@media(max-width:360px){.helpShell .designWordmark{width:72px}.designHelpBrand{gap:6px}.designHelpLabel{font-size:10px}}
/* Compact brand lockup when paired with the Help Center label. */
.designHelpBrand .designMark{width:34px;height:34px;border-radius:9px}
.designHelpBrand .designMark img{width:27px;height:27px}
.designHelpBrand .designWordmark{width:100px}
.designHelpBrand .designBrand{gap:8px}
@media(max-width:1150px){.designHelpBrand .designWordmark{width:82px}}
@media(max-width:600px){.designHelpBrand .designMark{width:29px;height:29px;border-radius:8px}.designHelpBrand .designMark img{width:23px;height:23px}.designHelpBrand .designWordmark{width:76px}.designHelpBrand .designBrand{gap:6px}}
@media(max-width:360px){.designHelpBrand .designWordmark{width:66px}}

/* Frosted header: opaque fallback keeps navigation readable without blur support. */
.designHeader{box-shadow:0 5px 22px #263c3005}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
.designHeader{background:rgb(247 245 238 / 78%);-webkit-backdrop-filter:blur(18px) saturate(125%);backdrop-filter:blur(18px) saturate(125%)}
}
@media(prefers-reduced-transparency:reduce){.designHeader{background:#f7f5ee;-webkit-backdrop-filter:none;backdrop-filter:none}}

/* Smaller header branding; keep the already compact Help Center lockup. */
.designHeader>.designBrand{gap:8px;min-height:44px}
.designHeader>.designBrand .designMark{width:34px;height:34px;border-radius:9px}
.designHeader>.designBrand .designMark img{width:27px;height:27px}
.designHeader>.designBrand .designWordmark{width:100px}
@media(max-width:600px){.designHeader>.designBrand .designMark{width:30px;height:30px;border-radius:8px}.designHeader>.designBrand .designMark img{width:24px;height:24px}.designHeader>.designBrand .designWordmark{width:90px}}
/* Match the homepage: clear at the top, frosted once content scrolls underneath. */
.designHeader{background:transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;transition:background-color .3s ease,box-shadow .3s ease}
.designHeader.isScrolled{background:#f7f5ee;box-shadow:0 5px 22px #263c3005}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.designHeader.isScrolled{background:rgb(247 245 238 / 78%);-webkit-backdrop-filter:blur(18px) saturate(125%);backdrop-filter:blur(18px) saturate(125%)}}
@media(prefers-reduced-transparency:reduce){.designHeader.isScrolled{background:#f7f5ee;-webkit-backdrop-filter:none;backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){.designHeader{transition:none}}
/* One continuous surface behind the top navigation and page introduction. */
.designRefresh :is(.page,.helpShell).hasHeroSurface{isolation:isolate}
.designRefresh :is(.page,.helpShell).hasHeroSurface::before{content:'';display:block;position:absolute;inset:0 0 auto;height:var(--intro-surface-height,480px);z-index:-1;pointer-events:none;border-radius:0;opacity:1;transform:none;animation:none;background:radial-gradient(circle,#72947728 1px,transparent 1.5px) 0 0/24px 24px,linear-gradient(#eef3e8,#f7f5ee);mask-image:linear-gradient(#000 65%,transparent);-webkit-mask-image:linear-gradient(#000 65%,transparent)}
.designRefresh .hasHeroSurface :is(.pricingHero,.aboutHero,.blogHero,.helpHero,.legalHero){background:transparent}
/* Slightly stronger section label without enlarging the brand lockup. */
.designBlogBrand .designHelpLabel{font-size:15px}
@media(max-width:600px){.designBlogBrand .designHelpLabel{font-size:13px}}
@media(max-width:360px){.designBlogBrand .designHelpLabel{font-size:12px}}