/* Static navigation preview, with a full-height rail on desktop. */
.workspace-preview{display:flex;flex-direction:column;width:min(1260px,calc(100% - 96px));margin:26px auto 0;padding:22px 18px;background:#eee8e1;color:#3d303a;border:1px solid #ded6cf;border-radius:12px}
.workspace-preview-heading{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:9px;font-weight:600;letter-spacing:1.25px;color:#796d75}
.workspace-preview-badge{border:1px solid #d8cec6;border-radius:20px;padding:3px 8px;font-size:8px;font-weight:400;letter-spacing:0;color:#776a73;background:#f7f3ed}
.workspace-preview-items{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;padding:0;margin:20px 0 0}
.workspace-preview-item{display:flex;align-items:flex-start;gap:10px;padding:15px 11px;border:1px solid #dfd6ce;border-radius:9px;background:#f7f3ed}
.workspace-preview-item.is-highlighted{background:#f7ddd3;border-color:#e9b9a8}
.workspace-preview-item>svg{width:18px;height:18px;color:#ba543e;margin-top:2px}
.workspace-preview-item>div{min-width:0}
.workspace-preview-item strong{display:block;font-size:12px;font-weight:600;line-height:1.5}
.workspace-preview-item div>span{display:block;font-size:9px;line-height:1.7;color:#766771;margin-top:4px}
.workspace-preview-caption{font-size:9px;line-height:1.7;color:#796d75;margin-top:22px}
.client-brand-preview{display:flex;align-items:center;flex-wrap:wrap;gap:18px;padding-bottom:20px;margin-bottom:22px;border-bottom:1px solid #dbd1c8}
.client-sample-logo{display:inline-flex;align-items:center;gap:10px;color:#3f626f;font:700 21px/1.2 var(--display);letter-spacing:2px;white-space:nowrap}
.client-sample-logo svg{width:30px;height:30px;stroke:none}
.client-brand-note{font-size:10px;line-height:1.8;color:#6e606a}
.client-brand-note>span{display:block;font-size:8.5px;color:#84757e;margin-top:2px}
.navigation>a[aria-current=page]{color:var(--coral-dark);font-weight:700}
.teams-copy>.teams-more{margin-top:28px}
@media(min-width:1101px){
  body{padding-left:232px}
  .workspace-preview{position:fixed;z-index:40;inset:0 auto 0 0;width:232px;margin:0;padding:28px 18px;border:0;border-right:1px solid #ded6cf;border-radius:0;overflow-y:auto}
  .client-brand-preview{flex-direction:column;flex-wrap:nowrap;gap:12px;text-align:center}
  .site-header .header-inner{width:calc(100% - 64px)}
  .workspace-preview-items{grid-template-columns:1fr;margin-top:18px}
  .workspace-preview-caption{margin-top:auto;padding-top:35px}
  .hero{gap:42px}
  .hero h1{font-size:clamp(42px,3.9vw,68px)}
}
@media(max-width:1100px){
  .hero{padding-top:42px}
}
@media(min-width:651px) and (max-width:950px){
  .site-header{height:79px}
  .menu-toggle{display:inline-flex}
  .navigation{display:none;position:absolute;top:78px;left:0;right:0;padding:19px 20px 25px;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--line);box-shadow:0 20px 20px #30252b0d}
  .navigation.is-open{display:flex}
  .navigation>a:not(.button){padding:11px 5px;font-size:13px}
  .navigation .button{margin-top:11px;font-size:12px}
}
@media(max-width:650px){
  .workspace-preview{width:calc(100% - 40px);margin-top:24px;padding:18px 15px}
  .workspace-preview-items{gap:8px;margin-top:16px}
  .workspace-preview-item{gap:7px;padding:12px 9px}
  .workspace-preview-item>svg{width:16px;height:16px}
  .workspace-preview-item strong{font-size:10px}
  .workspace-preview-item div>span{font-size:8px}
  .workspace-preview-caption{margin-top:16px}
}
@media(max-width:360px){
  .workspace-preview-item{display:block}
  .workspace-preview-item>svg{margin:0 0 7px}
}