/* shell: shared bar, mobile menu, page primitives. Loaded after home12-*.css */

.bar{position:relative;z-index:60;width:1560px;margin:0 auto;background:#000}
.bar__inner{position:relative;width:1440px;margin:0 auto;height:86px;display:flex;align-items:center;
  justify-content:space-between;gap:40px;border-bottom:1px solid rgba(255,255,255,.14)}
.bar__logo{display:block;flex:0 0 auto;width:186px;line-height:0;text-decoration:none}
.bar__logo img{display:block;width:186px;max-width:186px;height:auto}

.bar__nav{display:flex;align-items:center;gap:38px;margin:0;padding:0}
.bar__link{position:relative;display:inline-block;padding:4px 0;text-decoration:none;
  font:600 10px/12px BlenderProBold,'Segoe UI',sans-serif;letter-spacing:.26em;text-transform:uppercase;
  color:#8d939b;transition:color .22s ease}
.bar__link:hover{color:#fff}
.bar__link.is-active{color:#fff}
.bar__link.is-active::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:1px;background:#fff}

.bar__login{position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:11px 18px;text-decoration:none;color:#fff;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.34);
  clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  -webkit-clip-path:polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
  transition:background .22s ease,color .22s ease}
.bar__login-label{font:600 10px/12px BlenderProBold,'Segoe UI',sans-serif;letter-spacing:.26em;text-transform:uppercase}
.bar__login:hover{background:#fff;color:#000}

.bar__toggle{display:none;appearance:none;background:none;border:0;padding:10px;margin:0;cursor:pointer;
  flex-direction:column;justify-content:center;gap:4px;width:34px;height:34px}
.bar__toggle span{display:block;width:18px;height:1px;background:#fff;transition:transform .22s ease,opacity .22s ease}
.bar.is-open .bar__toggle span:nth-child(1){transform:translateY(5px)}
.bar.is-open .bar__toggle span:nth-child(2){opacity:0}
.bar.is-open .bar__toggle span:nth-child(3){transform:translateY(-5px)}

@media (max-width:900px){
  .bar__toggle{display:flex}
  .bar__nav{display:none;position:absolute;left:0;right:0;top:100%;z-index:70;
    flex-direction:column;align-items:flex-start;gap:0;padding:10px 24px 18px;
    background:#050505;box-shadow:inset 0 0 0 1px rgba(255,255,255,.16)}
  .bar.is-open .bar__nav{display:flex}
  .bar__link{width:100%;padding:14px 0;border-bottom:1px solid rgba(255,255,255,.08)}
  .bar__link.is-active::after{display:none}
  .bar__login{margin-top:16px}
}

a.foot__status{text-decoration:none}

.pg{position:relative;width:1560px;margin:0 auto;padding:104px 0 140px}
.pg--flush{padding-top:0}
.pg__inner{position:relative;width:1440px;margin:0 auto}

.pg-head{margin:0 0 54px;max-width:760px}
.pg-head h1{margin:0 0 18px;font:400 64px/66px BlenderProBook,'Segoe UI',sans-serif;
  letter-spacing:-.015em;text-transform:uppercase;color:#fff}
.pg-head h1 span{color:#8d939b}
.pg-head p{margin:0;max-width:620px;font:400 14px/23px BlenderProBook,'Segoe UI',sans-serif;color:#aeb4bb}

.prose{max-width:720px;font:400 14px/24px BlenderProBook,'Segoe UI',sans-serif;color:#aeb4bb}
.prose p{margin:0 0 18px}
.prose h2{margin:44px 0 16px;font:400 30px/34px BlenderProBook,'Segoe UI',sans-serif;
  letter-spacing:.01em;text-transform:uppercase;color:#fff}
.prose h3{margin:32px 0 12px;font:600 13px/18px BlenderProBold,'Segoe UI',sans-serif;
  letter-spacing:.1em;text-transform:uppercase;color:#fff}
.prose ul,.prose ol{margin:0 0 18px;padding:0;list-style:none}
.prose li{position:relative;padding:0 0 0 22px;margin:0 0 10px;color:#c8ccd1}
.prose li::before{content:"";position:absolute;left:0;top:11px;width:9px;height:1px;background:rgba(255,255,255,.6)}
.prose a{color:#fff;text-decoration:none;box-shadow:inset 0 -1px 0 rgba(255,255,255,.34)}
.prose a:hover{box-shadow:inset 0 -1px 0 #fff}
.prose strong{font-family:BlenderProBold,'Segoe UI',sans-serif;font-weight:600;color:#fff}
.prose code{padding:1px 6px;background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);font:400 12px/18px Consolas,monospace;color:#c8ccd1}

.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

/* card frame: 14px cut, hairline, two L brackets, bottom accent, corner hatch.
   .card is complete on its own; .card--brackets is the opt-in for page-local card
   variants that do not carry .card (pricing .plan, tools .tl-card). Brackets sit in
   ::before, the accent in ::after (scaleX), so no extra markup is needed. */
.card{--bk:rgba(255,255,255,.5);position:relative;isolation:isolate;padding:26px 28px 30px;
  background-color:rgba(255,255,255,.03);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);
  clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
  -webkit-clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);
  transition:background-color .22s ease,box-shadow .22s ease}
.card::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(90deg,var(--bk),var(--bk)),
    linear-gradient(0deg,var(--bk),var(--bk)),
    linear-gradient(90deg,var(--bk),var(--bk)),
    linear-gradient(0deg,var(--bk),var(--bk)),
    repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 1px,transparent 1px 9px);
  background-repeat:no-repeat;
  background-position:left 2px top 2px,left 2px top 2px,right 2px bottom 2px,right 2px bottom 2px,right 16px top 16px;
  background-size:18px 1px,1px 18px,18px 1px,1px 18px,64px 48px;
  transition:background-size .3s cubic-bezier(.22,.75,.2,1)}
.card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#fff;
  transform:scaleX(0);transform-origin:left center;pointer-events:none;z-index:2;
  transition:transform .34s cubic-bezier(.22,.75,.2,1)}
.card:hover{--bk:#fff;background-color:rgba(255,255,255,.055);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.card:hover::before{background-size:26px 1px,1px 26px,26px 1px,1px 26px,64px 48px}
.card:hover::after{transform:scaleX(1)}

.card--brackets{--bk:rgba(255,255,255,.5);position:relative;isolation:isolate;
  transition:background-color .22s ease,box-shadow .22s ease}
.card--brackets:not(.plan)::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background-image:
    linear-gradient(90deg,var(--bk),var(--bk)),
    linear-gradient(0deg,var(--bk),var(--bk)),
    linear-gradient(90deg,var(--bk),var(--bk)),
    linear-gradient(0deg,var(--bk),var(--bk)),
    repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 1px,transparent 1px 9px);
  background-repeat:no-repeat;
  background-position:left 2px top 2px,left 2px top 2px,right 2px bottom 2px,right 2px bottom 2px,right 16px top 16px;
  background-size:18px 1px,1px 18px,18px 1px,1px 18px,64px 48px;
  transition:background-size .3s cubic-bezier(.22,.75,.2,1)}
.card--brackets:not(.plan)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#fff;
  transform:scaleX(0);transform-origin:left center;pointer-events:none;z-index:2;
  transition:transform .34s cubic-bezier(.22,.75,.2,1)}
.card--brackets:not(.plan):hover{--bk:#fff;box-shadow:inset 0 0 0 1px rgba(255,255,255,.28)}
.card--brackets:not(.plan):hover::before{background-size:26px 1px,1px 26px,26px 1px,1px 26px,64px 48px}
.card--brackets:not(.plan):hover::after{transform:scaleX(1)}

/* pricing plans: bracket segments ride the frame edges where the 25px chamfer ends */
.plan.card--brackets .plan__body{--bk:rgba(255,255,255,.72);background-image:
    linear-gradient(90deg,var(--bk),var(--bk)),
    linear-gradient(0deg,var(--bk),var(--bk)),
    linear-gradient(90deg,var(--bk),var(--bk)),
    linear-gradient(0deg,var(--bk),var(--bk)),
    repeating-linear-gradient(135deg,rgba(255,255,255,.025) 0 1px,transparent 1px 9px);
  background-repeat:no-repeat;
  background-position:left 25px top 0,left 0 top 25px,right 25px bottom 0,right 0 bottom 25px,right 20px top 20px;
  background-size:18px 1px,1px 18px,18px 1px,1px 18px,64px 48px;
  transition:background-size .3s cubic-bezier(.22,.75,.2,1)}
.plan.card--brackets:hover .plan__body{--bk:#fff;
  background-size:26px 1px,1px 26px,26px 1px,1px 26px,64px 48px}

.card h3{margin:0 0 10px;font:600 13px/17px BlenderProBold,'Segoe UI',sans-serif;
  letter-spacing:.02em;text-transform:uppercase;color:#fff}
.card p{margin:0;font:400 13px/20px BlenderProBook,'Segoe UI',sans-serif;color:#aeb4bb}

.hr-line{height:1px;margin:48px 0;border:0;background:rgba(255,255,255,.18)}

.note{max-width:720px;margin:28px 0;padding:2px 0 2px 18px;border-left:1px solid rgba(255,255,255,.18);
  font:400 12px/19px BlenderProBook,'Segoe UI',sans-serif;color:#8d939b}