.landing{
  --ink:#fff;
  --mark:#005cfd;
  min-height:100vh;
  background:var(--mark);
  color:#fff
}
.landing .console{height:40px;padding:12px 18px;background:var(--mark);color:#fff;font:10px/1.35 var(--mono);letter-spacing:.08em}
.landing .console span{color:rgba(255,255,255,.7)}
.landing > header{
  width:min(1100px,calc(100% - 48px));
  margin:0 auto;
  padding-left:0;
  padding-right:0;
  background:var(--mark);
  position:relative;
  border-bottom:0
}
.pixel-rule{
  width:min(1100px,calc(100% - 48px));
  height:2px;
  margin:0 auto;
  background:repeating-linear-gradient(90deg,#fff 0 6px,transparent 6px 10px)
}
.landing .brand{font:600 22px/1 var(--pixel);letter-spacing:.02em;color:#fff}
.landing .pixel-cta{
  display:inline-block;
  border:1px solid #fff;
  border-radius:0;
  background:#fff;
  box-shadow:none;
  color:var(--mark);
  padding:8px 14px;
  font:600 13px/1 var(--pixel);
  letter-spacing:.08em;
  text-decoration:none
}
.landing header>div{display:flex;align-items:center;gap:14px}
.landing .login-link{color:#fff;font:10px var(--mono);letter-spacing:.08em;text-decoration:none;background:none;border:0;padding:0;cursor:pointer}
.landing .login-link:hover{text-decoration:underline}
.landing .login-link[hidden]{display:none}
.landing .kicker{margin:0 0 18px;color:rgba(255,255,255,.75);font:10px var(--mono);letter-spacing:.12em}
.landing h1,.landing h2{
  margin:0;
  color:#fff;
  font:normal clamp(48px,7vw,88px)/.92 Georgia,'Times New Roman',serif;
  letter-spacing:-.075em
}
.landing .lede,.statement>p:not(.kicker){max-width:470px;margin:0 0 28px;color:rgba(255,255,255,.86);font-size:18px;line-height:1.42}
.resume{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  width:min(1100px,calc(100% - 48px));
  margin:22px auto 0;
  padding:12px 0;
  border-top:1px solid rgba(255,255,255,.35);
  border-bottom:1px solid rgba(255,255,255,.35)
}
.resume[hidden]{display:none}
.resume-card{display:flex;align-items:center;gap:12px}
.resume-card .mark{width:40px;height:36px;border:1px solid #fff;color:#fff;font:18px var(--pixel)}
.resume p{margin:0;color:rgba(255,255,255,.86);font:13px Georgia,serif}
.hero{
  display:grid;
  grid-template-columns:minmax(240px,.95fr) minmax(280px,1.15fr);
  align-items:center;
  gap:clamp(20px,4vw,48px);
  width:min(1100px,calc(100% - 48px));
  margin:auto;
  padding:clamp(36px,6vw,72px) 0 64px
}
.hero-visual{
  position:relative;
  min-height:280px;
  display:grid;
  place-items:center
}
.hero-speed{
  position:absolute;
  inset:18% 42% 18% 0;
  display:flex;
  flex-direction:column;
  justify-content:space-evenly;
  pointer-events:none
}
.hero-speed span{
  display:block;
  height:3px;
  background:#fff;
  transform-origin:right center;
  animation:pixel-dash .7s steps(5) infinite
}
.hero-speed span:nth-child(1){width:92%;animation-delay:0s}
.hero-speed span:nth-child(2){width:58%;animation-delay:.08s}
.hero-speed span:nth-child(3){width:80%;animation-delay:.16s}
.hero-speed span:nth-child(4){width:44%;animation-delay:.04s}
.hero-speed span:nth-child(5){width:70%;animation-delay:.2s}
.hero-speed span:nth-child(6){width:36%;animation-delay:.12s}
.hero-speed span:nth-child(7){width:64%;animation-delay:.24s}
.hero-logo{
  position:relative;
  z-index:1;
  width:min(100%,420px);
  height:auto;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  animation:cash-fly 1.8s steps(8) infinite
}
@keyframes cash-fly{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(10px,-8px)}
  50%{transform:translate(16px,-2px)}
  75%{transform:translate(6px,-10px)}
}
@keyframes pixel-dash{
  0%{transform:translateX(8px);opacity:.25}
  50%{opacity:1}
  100%{transform:translateX(-18px);opacity:.15}
}
.hero-copy .ghost-link{
  display:inline-block;
  border:1px solid #fff;
  border-radius:0;
  box-shadow:none;
  padding:10px 16px;
  color:#fff;
  font:600 13px/1 var(--pixel);
  letter-spacing:.08em;
  text-decoration:none
}
.hero-copy .ghost-link:hover{background:rgba(255,255,255,.12)}
.punch{
  width:min(1100px,calc(100% - 48px));
  margin:0 auto;
  padding:48px 0
}
.punch-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:0;
  margin:8px 0 0;
  padding:28px 0 0;
  list-style:none;
  background:repeating-linear-gradient(90deg,#fff 0 6px,transparent 6px 10px);
  background-size:100% 2px;
  background-repeat:no-repeat
}
.punch-grid li{
  display:grid;
  align-content:start;
  gap:14px;
  min-height:220px;
  padding:22px 24px 22px 0;
  border-right:1px solid rgba(255,255,255,.28)
}
.punch-grid li:last-child{border-right:0;padding-right:0}
.punch-head{display:grid;gap:10px}
.punch-num{color:#fff;font:600 18px/1 var(--pixel);letter-spacing:.06em}
.punch-label{color:rgba(255,255,255,.75);font:10px var(--mono);letter-spacing:.16em;text-transform:uppercase}
.punch-grid h3{margin:8px 0 0;color:#fff;font:22px/1.15 Georgia,'Times New Roman',serif}
.punch-grid p{max-width:28ch;margin:0;color:rgba(255,255,255,.82);font-size:13px;line-height:1.45}
.system-section,.statement{width:min(1100px,calc(100% - 48px));margin:auto;padding:72px 0;border-top:0}
.system-section h2,.statement h2{font-size:clamp(36px,5vw,64px)}
.system-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;margin-top:36px;border-top:0;background:repeating-linear-gradient(90deg,#fff 0 6px,transparent 6px 10px);background-size:100% 2px;background-repeat:no-repeat;padding-top:36px}
.system-grid article{min-height:170px;padding:22px 22px 22px 0;border-right:1px solid rgba(255,255,255,.2)}
.system-grid article:last-child{border-right:0;padding-right:0}
.system-grid span{display:block;color:#fff;font:600 18px/1 var(--pixel);letter-spacing:.06em}
.system-grid h3{margin:22px 0 8px;color:#fff;font:18px/1.2 Georgia,'Times New Roman',serif}
.system-grid p{max-width:250px;margin:0;color:rgba(255,255,255,.8);font-size:12px;line-height:1.45}
.statement{padding-bottom:90px}
.landing footer{
  width:min(1100px,calc(100% - 48px));
  margin:auto;
  padding:40px 0 28px;
  background:repeating-linear-gradient(90deg,#fff 0 6px,transparent 6px 10px);
  background-size:100% 2px;
  background-repeat:no-repeat;
  background-position:left top;
  color:rgba(255,255,255,.75)
}
.footer-main{display:grid;grid-template-columns:minmax(260px,1.4fr) repeat(2,minmax(140px,.6fr));gap:40px;padding-bottom:36px}
.footer-brand{display:grid;justify-items:start;align-content:start;gap:16px}
.footer-brand .brand{font-size:34px}
.footer-brand p{max-width:34ch;text-wrap:pretty;margin:0;color:rgba(255,255,255,.86);font:15px/1.45 Georgia,'Times New Roman',serif}
.footer-col{display:grid;align-content:start;gap:12px}
.footer-head{margin:0 0 4px;color:rgba(255,255,255,.6);font:10px var(--mono);letter-spacing:.14em;text-transform:uppercase}
.footer-col a{justify-self:start;color:#fff;font:14px Georgia,'Times New Roman',serif;text-decoration:none}
.footer-col a::before{content:"";display:inline-block;width:5px;height:5px;margin-right:10px;background:rgba(255,255,255,.45);vertical-align:3px;transition:background .1s steps(1)}
.footer-col a:hover{text-decoration:underline}
.footer-col a:hover::before{background:#fff}
.footer-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-top:18px;border-top:1px solid rgba(255,255,255,.25);font:9px var(--mono);letter-spacing:.08em}
.footer-bar a{color:#fff;text-decoration:none}
.footer-bar a:hover{text-decoration:underline}
.landing footer a:focus-visible{outline:2px solid #fff;outline-offset:3px}
.pixel-live::before{
  content:"";
  display:inline-block;
  width:6px;
  height:6px;
  margin-right:8px;
  background:#fff;
  vertical-align:1px
}
.product{width:min(1100px,calc(100% - 48px));margin:auto;padding:72px 0}
.product h2{font-size:clamp(36px,5vw,64px)}
.product-lede{max-width:520px;margin:24px 0 0;color:rgba(255,255,255,.86);font-size:17px;line-height:1.45}
.product-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:40px}
.product-box{display:grid;align-content:start;gap:12px;padding:24px;border:2px solid #fff;background:rgba(255,255,255,.06);box-shadow:6px 6px 0 rgba(0,0,0,.18);transition:transform .12s steps(2),box-shadow .12s steps(2)}
.product-box:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 rgba(0,0,0,.22)}
.product-tag{justify-self:start;padding:5px 8px;background:#fff;color:var(--mark);font:600 12px/1 var(--pixel);letter-spacing:.08em}
.product-box h3{margin:6px 0 0;color:#fff;font:22px/1.15 Georgia,'Times New Roman',serif;text-wrap:balance}
.product-box p{margin:0;color:rgba(255,255,255,.84);font-size:13px;line-height:1.5}
.product-box ul{display:grid;gap:8px;margin:6px 0 0;padding:14px 0 0;list-style:none;background:repeating-linear-gradient(90deg,rgba(255,255,255,.6) 0 6px,transparent 6px 10px);background-size:100% 1px;background-repeat:no-repeat}
.product-box li{position:relative;padding-left:16px;color:#fff;font:11px/1.4 var(--mono);letter-spacing:.02em}
.product-box li::before{content:"";position:absolute;left:0;top:5px;width:6px;height:6px;background:#fff}
.final-cta{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;width:min(1100px,calc(100% - 48px));margin:0 auto 64px;padding:40px;background:#fff;color:var(--mark)}
.final-cta .kicker{color:rgba(0,92,253,.7)}
.final-cta h2{color:var(--mark);font-size:clamp(34px,4.6vw,56px)}
.final-cta p:not(.kicker){max-width:440px;margin:18px 0 0;color:#233;font-size:15px;line-height:1.45}
.final-cta-actions{display:flex;flex-wrap:wrap;gap:12px;flex:0 0 auto}
.final-cta .pixel-cta{background:var(--mark);border-color:var(--mark);color:#fff;padding:12px 18px}
.final-cta .ghost-link{display:inline-block;border:1px solid var(--mark);padding:11px 16px;color:var(--mark);font:600 13px/1 var(--pixel);letter-spacing:.08em;text-decoration:none}
.final-cta .pixel-cta:hover{background:#0048c8}
.final-cta .ghost-link:hover{background:rgba(0,92,253,.08)}
.pricing-hero{width:min(1100px,calc(100% - 48px));margin:auto;padding:clamp(40px,7vw,88px) 0 40px}
.pricing-hero .lede{margin-top:24px}
.pricing-plans{display:grid;grid-template-columns:1fr 1fr 1.2fr;gap:16px;width:min(1100px,calc(100% - 48px));margin:0 auto;padding:0 0 72px}
.plan-box{display:grid;align-content:start;justify-items:start;gap:14px;padding:28px 24px;border:2px solid #fff;background:rgba(255,255,255,.06);box-shadow:6px 6px 0 rgba(0,0,0,.18)}
.plan-box.is-featured{background:#fff;color:var(--mark)}
.plan-box.is-featured .product-tag{background:var(--mark);color:#fff}
.plan-price{display:flex;align-items:baseline;gap:8px;margin:8px 0 0}
.plan-price b{font:normal 64px/1 Georgia,'Times New Roman',serif;letter-spacing:-.05em}
.plan-price span{font:11px var(--mono);letter-spacing:.06em;opacity:.8}
.plan-note{margin:0;font-size:13px;line-height:1.45;opacity:.85}
.plan-cta{margin-top:10px}
.plan-box.is-featured .plan-cta{background:var(--mark);border-color:var(--mark);color:#fff}
.plan-included{padding:28px 0 0 12px}
.plan-included ul{display:grid;gap:12px;margin:0;padding:0;list-style:none}
.plan-included li{position:relative;padding-left:18px;color:#fff;font:14px/1.4 Georgia,'Times New Roman',serif}
.plan-included li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;background:#fff}
.pricing-faq{width:min(1100px,calc(100% - 48px));margin:auto;padding:72px 0}
.pricing-faq h2{font-size:clamp(36px,5vw,64px)}
.faq-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin-top:36px}
.faq-grid details{padding:18px 0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.6) 0 6px,transparent 6px 10px);background-size:100% 1px;background-repeat:no-repeat}
.faq-grid summary{cursor:pointer;color:#fff;font:18px/1.3 Georgia,'Times New Roman',serif;list-style:none}
.faq-grid summary::-webkit-details-marker{display:none}
.faq-grid summary::before{content:"+";display:inline-block;width:20px;font:600 16px/1 var(--pixel)}
.faq-grid details[open] summary::before{content:"–"}
.faq-grid details p{max-width:44ch;margin:10px 0 0 20px;color:rgba(255,255,255,.84);font-size:13px;line-height:1.5}
@media(max-width:800px){
  .pricing-plans{grid-template-columns:1fr;padding-bottom:48px}
  .plan-included{padding:12px 0 0}
  .faq-grid{grid-template-columns:1fr}
  .pricing-faq{padding:56px 0}
  .product{padding:56px 0}
  .product-grid{grid-template-columns:1fr}
  .final-cta{flex-direction:column;align-items:flex-start;padding:28px 20px;margin-bottom:40px}
  .hero{grid-template-columns:1fr;padding-top:28px;gap:12px}
  .hero-visual{min-height:220px;max-width:320px}
  .hero-logo{width:min(100%,280px)}
  .system-grid{grid-template-columns:1fr}
  .system-grid article{min-height:0;padding:22px 0;border-right:0;border-bottom:0;background:repeating-linear-gradient(90deg,#fff 0 6px,transparent 6px 10px);background-size:100% 2px;background-repeat:no-repeat;background-position:left bottom}
  .system-grid article:last-child{background:none}
  .punch{padding:28px 0 36px}
  .punch-grid{grid-template-columns:1fr}
  .punch-grid li{
    min-height:0;
    padding:22px 0;
    border-right:0;
    background:repeating-linear-gradient(90deg,#fff 0 6px,transparent 6px 10px);
    background-size:100% 2px;
    background-repeat:no-repeat;
    background-position:left bottom
  }
  .punch-grid li:last-child{background:none}
  .resume{flex-direction:column;align-items:flex-start}
  .system-section,.statement{padding:56px 0}
  .footer-main{grid-template-columns:1fr 1fr;gap:32px}
  .footer-brand{grid-column:1/-1}
  .footer-bar{flex-wrap:wrap}
}
@media(max-width:680px){
  .landing > header{background:var(--mark)}
  .landing .console span{display:none}
  .landing h1{font-size:52px}
  .lede{font-size:16px}
}
@media(prefers-reduced-motion:reduce){
  .hero-logo,.hero-speed span{animation:none}
  .product-box{transition:none}
}

/* Use cases: index cards on blue, long-form posts on white paper for easy reading. */
.usecases-hero{padding-bottom:32px}
.post-index{display:grid;grid-template-columns:1fr 1fr;gap:20px;width:min(1100px,calc(100% - 48px));margin:0 auto 72px}
.post-card{display:grid;align-content:start;gap:14px;padding:28px;border:1px solid rgba(255,255,255,.55);color:#fff;text-decoration:none;transition:background .12s steps(2),color .12s steps(2)}
.post-card h2{margin:0;font:600 clamp(22px,2.6vw,30px)/1.1 var(--pixel);letter-spacing:.01em}
.post-card p{margin:0;color:rgba(255,255,255,.86);font:15px/1.5 Georgia,'Times New Roman',serif}
.post-card .post-meta{font:10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.7)}
.post-card:hover,.post-card:focus-visible{background:#fff;color:var(--mark);outline:none}
.post-card:hover p,.post-card:focus-visible p,.post-card:hover .post-meta,.post-card:focus-visible .post-meta{color:#233}
.post-card:hover .product-tag,.post-card:focus-visible .product-tag{background:var(--mark);color:#fff}
.post{width:min(780px,calc(100% - 48px));margin:0 auto 72px;background:#fff;color:#1b2230;scroll-margin-top:24px;box-shadow:8px 8px 0 rgba(0,0,0,.18)}
.post-head{padding:clamp(28px,5vw,56px) clamp(22px,5vw,56px) 28px;background:#fff;border-bottom:2px dashed #cdd9f5}
.post-kicker{margin:0 0 14px;color:var(--mark);font:10px var(--mono);letter-spacing:.14em}
.post-head h2{margin:0 0 16px;color:var(--mark);font:600 clamp(30px,4.4vw,46px)/1.05 var(--pixel);letter-spacing:.01em;text-wrap:balance}
.post-dek{margin:0;color:#3a4458;font:19px/1.5 Georgia,'Times New Roman',serif;text-wrap:pretty}
.post-body{padding:12px clamp(22px,5vw,56px) 24px;font:18px/1.7 Georgia,'Times New Roman',serif}
.post-body h3{margin:36px 0 10px;color:#0d1b3d;font:600 21px/1.25 var(--pixel);letter-spacing:.01em}
.post-body p{margin:0 0 16px;text-wrap:pretty}
.post-body ul{margin:0 0 16px;padding-left:22px}
.post-body li{margin:0 0 8px}
.post-body b{color:#0d1b3d}
.post-quote{padding:14px 18px;background:#0e1116;color:#e8eefc;font:15px/1.4 var(--mono)!important;letter-spacing:.02em}
.post-code{padding:1px 6px;background:#eef3ff;color:var(--mark);font:15px var(--mono)}
.post-box{margin:32px 0 8px;padding:22px 24px;background:#f2f6ff;border-left:4px solid var(--mark)}
.post-box-title{margin:0 0 12px!important;color:var(--mark);font:600 16px/1.2 var(--pixel);letter-spacing:.02em}
.post-box ol{margin:0;padding-left:22px;font-size:16px;line-height:1.55}
.post-box li{margin:0 0 8px}
.post-note{margin:12px 0 0!important;color:#6b7690;font:12px/1.4 var(--mono)!important}
.post-cta{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;padding:24px clamp(22px,5vw,56px);background:var(--mark);color:#fff}
.post-cta p{margin:0;font:600 18px/1.2 var(--pixel);letter-spacing:.02em}
.post-cta .pixel-cta{background:#fff;color:var(--mark)}
@media(max-width:800px){
  .post-index{grid-template-columns:1fr;margin-bottom:48px}
  .post{margin-bottom:48px;box-shadow:none}
  .post-body{font-size:17px}
}

/* "Built with Biti" footer badge: a glossy speech bubble. */
.footer-main:has(.footer-badge){grid-template-columns:minmax(260px,1.4fr) repeat(2,minmax(140px,.6fr)) auto}
.footer-badge{display:flex;justify-content:flex-end;align-items:flex-start}
.built-badge{position:relative;display:inline-flex;align-items:center;gap:9px;padding:9px 20px 9px 12px;border:1px solid #2b3a93;border-radius:22px;background:linear-gradient(180deg,#e3edff 0%,#b7d0ff 38%,#a4c4ff 58%,#c6dfff 82%,#e2f2ff 100%);box-shadow:0 8px 16px rgba(0,20,80,.28),inset 0 -2px 4px rgba(255,255,255,.55),inset 0 1px 0 rgba(255,255,255,.9);color:#000;text-decoration:none;transition:transform .15s ease,box-shadow .15s ease}
.built-badge::before{content:"";position:absolute;left:14px;right:14px;top:3px;height:9px;border-radius:9px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,.25));pointer-events:none}
.built-badge img{position:relative;width:30px;height:30px;margin:-4px -2px -4px 0;filter:drop-shadow(0 2px 3px rgba(0,30,90,.25))}
.built-badge span{position:relative;font:500 17px/1.2 system-ui,-apple-system,'Segoe UI',Inter,Roboto,sans-serif;letter-spacing:-.01em;white-space:nowrap;text-shadow:0 1px 0 rgba(255,255,255,.9),0 0 6px rgba(255,255,255,.6)}
.built-badge-tail{position:absolute;right:-8px;bottom:-10px;width:30px;height:20px;overflow:visible}
.built-badge-tail .fill{fill:#dff0ff}
.built-badge-tail .line{fill:none;stroke:#2b3a93;stroke-width:1;stroke-linecap:round}
.built-badge:hover{transform:translateY(-2px);box-shadow:0 12px 22px rgba(0,20,80,.32),inset 0 -2px 4px rgba(255,255,255,.55),inset 0 1px 0 rgba(255,255,255,.9)}
.built-badge:focus-visible{outline:2px solid #fff;outline-offset:4px}
@media(max-width:800px){
  .footer-main:has(.footer-badge){grid-template-columns:1fr 1fr}
  .footer-badge{grid-column:1/-1;justify-content:flex-start}
}
@media(prefers-reduced-motion:reduce){.built-badge{transition:none}}

/* Use cases as a switch: the selected card fills white, only its post shows. */
.has-post-tabs .post-index{margin-bottom:0}
.has-post-tabs .post-card{position:relative}
.has-post-tabs .post-card.is-on{background:#fff;color:var(--mark);border-color:#fff}
.has-post-tabs .post-card.is-on p,.has-post-tabs .post-card.is-on .post-meta{color:#233}
.has-post-tabs .post-card.is-on .product-tag{background:var(--mark);color:#fff}
.has-post-tabs .post-card.is-on::after{content:"";position:absolute;left:50%;bottom:-13px;width:24px;height:13px;background:#fff;transform:translateX(-50%);clip-path:polygon(0 0,100% 0,50% 100%)}
.has-post-tabs .post-card:not(.is-on) .post-meta::after{content:" · read →"}
.has-post-tabs .post-card.is-on .post-meta::after{content:" · reading"}
.has-post-tabs .post{margin-top:40px}
.post[hidden]{display:none}
@media(max-width:800px){.has-post-tabs .post-card.is-on::after{display:none}.has-post-tabs .post{margin-top:24px}}
.landing .post-card:hover h2,.landing .post-card:focus-visible h2,.landing .has-post-tabs .post-card.is-on h2,.has-post-tabs .post-card.is-on h2{color:var(--mark)}

/* Footer with a Support column: brand, three link columns, then the badge. */
.footer-main:has(.footer-badge){grid-template-columns:minmax(240px,1.3fr) repeat(3,minmax(130px,.55fr)) auto}
.footer-col a.footer-email{font:11px var(--mono);letter-spacing:.02em;color:rgba(255,255,255,.8);overflow-wrap:normal}
.footer-col a.footer-email::before{display:none}
@media(max-width:1000px){.footer-main:has(.footer-badge){grid-template-columns:1fr 1fr 1fr}.footer-main:has(.footer-badge) .footer-brand,.footer-main:has(.footer-badge) .footer-badge{grid-column:1/-1}.footer-badge{justify-content:flex-start}}
@media(max-width:640px){.footer-main:has(.footer-badge){grid-template-columns:1fr 1fr}}

@media(min-width:901px){.pricing-plans{grid-template-columns:repeat(3,1fr)}.pricing-plans .plan-included{grid-column:1/-1}}
/* Pricing: Monthly / Yearly switch; only the chosen billing's plans show. */
.billing-switch{position:relative;display:flex;width:max-content;margin:0 auto 28px;padding:4px;border:2px solid #fff;background:rgba(255,255,255,.08);box-shadow:4px 4px 0 rgba(0,0,0,.18)}
.billing-switch button{position:relative;z-index:1;padding:10px 22px;border:0;background:transparent;color:#fff;font:600 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;cursor:pointer;transition:color .3s ease}
.billing-switch button[aria-checked="true"]{color:var(--mark)}
.billing-pill{position:absolute;top:4px;bottom:4px;left:4px;width:0;background:#fff;box-shadow:0 4px 14px rgba(0,20,80,.25)}
.billing-switch.is-ready .billing-pill{transition:transform .4s cubic-bezier(.65,0,.35,1.25),width .4s cubic-bezier(.65,0,.35,1)}
/* Cards: the old ones fade down, the new ones rise in one after another. */
.pricing-plans .plan-box.is-leaving{opacity:0;transform:translateY(10px) scale(.98);transition:opacity .18s ease,transform .18s ease}
.pricing-plans .plan-box.is-entering{animation:plan-enter .55s cubic-bezier(.2,.8,.2,1) both}
@keyframes plan-enter{0%{opacity:0;transform:translateY(22px) scale(.96)}60%{opacity:1}100%{opacity:1;transform:none}}
.pricing-plans .plan-box.is-entering .plan-price b{animation:plan-price-pop .6s cubic-bezier(.2,.8,.2,1) both;animation-delay:inherit}
@keyframes plan-price-pop{0%{opacity:0;transform:translateY(-12px)}100%{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.billing-switch.is-ready .billing-pill{transition:none}.pricing-plans .plan-box.is-leaving,.pricing-plans .plan-box.is-entering,.pricing-plans .plan-box.is-entering .plan-price b{animation:none;transition:none;opacity:1;transform:none}}
.billing-switch button:focus-visible{outline:2px solid #fff;outline-offset:3px}
.pricing-plans .plan-box[hidden]{display:none}
@media(min-width:901px){.pricing-plans{grid-template-columns:repeat(2,minmax(0,380px));justify-content:center}}
.plan-box-quiet{align-content:center}
.plan-features{display:grid;gap:8px;margin:2px 0 0;padding:0;list-style:none}
.plan-features li{position:relative;padding-left:16px;font-size:13px;line-height:1.4}
.plan-features li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;background:currentColor;opacity:.8}
.plan-features b{font-weight:600}