@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url('assets/design/geist-latin.woff2') format('woff2')}

:root{
  --paper:#F4F5F3;--ink:#0B0F12;--grey:#5C626B;--soft:#878D95;
  --sky-mid:#CCDEE6;--sky-bot:#A9C8D5;
  --edge:48px;
  color-scheme:light;
}
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:400 18px/24px Geist, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;letter-spacing:-.2px;-webkit-font-smoothing:antialiased;min-height:100vh;overflow-x:hidden}
a{color:inherit;text-decoration:none}
h2{font:inherit}
:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:2px}
.skip{position:absolute;left:-9999px;top:12px;z-index:10;background:var(--ink);color:var(--paper);padding:8px 14px;border-radius:999px;font-size:14px}
.skip:focus{left:var(--edge)}

/* one soft field of the brand's sky blue, left side only */
.glow{position:fixed;top:-10vh;bottom:-10vh;left:-30vw;width:75vw;z-index:0;pointer-events:none;
  background:radial-gradient(closest-side at 50% 45%, color-mix(in srgb, var(--sky-bot) 70%, transparent), color-mix(in srgb, var(--sky-mid) 45%, transparent) 55%, transparent)}

.brand{position:fixed;top:var(--edge);left:var(--edge);z-index:5;display:flex;align-items:center;gap:14px}
.brand .mark{width:40px;height:40px;display:block}
.brand:hover .mark,.brand:focus-visible .mark{animation:roll .9s cubic-bezier(.3,.6,.2,1)}
@keyframes roll{to{transform:rotate(360deg)}}
.brand .word{height:30px;width:auto;display:block}

main{position:relative;z-index:1;padding-left:35vw;padding-right:var(--edge)}
.hero{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-start;max-width:760px;padding:clamp(150px, 37.5vh, 337px) 0 120px}
h1{font-weight:400;font-size:40px;line-height:44px;letter-spacing:-1.6px;text-wrap:pretty}
.sub{margin-top:24px;max-width:640px;color:var(--grey)}
.ctas{margin-top:32px;display:flex;flex-wrap:wrap;gap:12px 48px}
.ctas a,.nav a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s ease}
.ctas a:hover,.nav a:hover{background-size:100% 1px}

.focus{max-width:774px;padding:24px 0 0;border-top:1px solid var(--ink);display:grid;gap:44px}
.focus div{font-size:30px;line-height:32px;letter-spacing:-1px;text-wrap:pretty}
.focus h2,.focus p{display:inline}
.focus p{color:var(--soft)}

.nav{position:fixed;left:var(--edge);bottom:42px;z-index:5;display:flex;flex-direction:column;line-height:25px}
.nav a{width:max-content}
.soon span{color:var(--grey)}

.foot{position:relative;z-index:1;padding:120px var(--edge) 44px 35vw;font-size:10px;line-height:14px;letter-spacing:0;display:flex;gap:16px}

.in{animation:rise 1s cubic-bezier(.2,.7,.2,1) both}
.d1{animation-delay:.1s}.d2{animation-delay:.2s}
@keyframes rise{from{opacity:0;transform:translateY(8px)}}

/* below 1024px the corner nav would sit on the text, so it joins the page flow */
@media (max-width:1023px){
  :root{--edge:32px}
  .brand{position:absolute}
  main,.foot{padding-left:var(--edge)}
  .nav{position:relative;left:auto;bottom:auto;z-index:1;flex-direction:row;flex-wrap:wrap;gap:8px 32px;padding:120px var(--edge) 0}
  .foot{padding-top:32px}
  .glow{width:120vw;left:-60vw}
}
@media (max-width:640px){
  :root{--edge:20px}
  .brand{gap:10px}
  .brand .mark{width:32px;height:32px}
  .brand .word{height:24px}
  .hero{min-height:auto;padding:150px 0 96px}
  h1{font-size:30px;line-height:34px;letter-spacing:-1px}
  .ctas{flex-direction:column;align-items:flex-start;gap:12px}
  body{font-size:17px}
  .focus{gap:32px}
  .focus div{font-size:24px;line-height:28px;letter-spacing:-.6px}
  .nav{padding-top:80px}
}
@media (prefers-reduced-motion:reduce){.in,.brand:hover .mark,.brand:focus-visible .mark{animation:none}.ctas a,.nav a{transition:none}}

/* Additions use the live site's typography, color and column. */
.addition{max-width:774px;margin-top:100px;padding-top:24px;border-top:1px solid var(--ink)}
.addition>h2{font-size:30px;line-height:34px;letter-spacing:-1px;margin-bottom:32px}
.addition>p{color:var(--grey);max-width:640px}
.capability{margin-top:32px;max-width:640px}
.capability h3{font-size:18px;line-height:24px;font-weight:400;margin-bottom:8px}
.capability p{color:var(--grey);font-size:16px;line-height:24px}
.access-note{font-size:14px;line-height:21px;color:var(--grey);margin-top:24px}
.pricing-hero{min-height:auto;padding:clamp(150px,25vh,240px) 0 72px}
.plans{max-width:774px;border-top:1px solid var(--ink)}
.plan{padding:28px 0 36px;border-bottom:1px solid #b3bac0;display:grid;grid-template-columns:160px 1fr;gap:24px}
.plan h2{font-size:30px;line-height:34px;letter-spacing:-1px}
.plan .amount{font-size:30px;line-height:34px;letter-spacing:-1px;margin-bottom:12px}
.plan .amount span{font-size:16px;letter-spacing:-.2px;color:var(--grey)}
.plan .included{margin-bottom:16px}
.plan ul{list-style:none;color:var(--grey);font-size:16px;line-height:26px;margin:20px 0}
.plan .trial{font-size:14px;line-height:21px;color:var(--grey);margin-top:16px;max-width:480px}
.pricing-footnote{max-width:774px;color:var(--grey);font-size:14px;line-height:21px;margin-top:24px}
.rates{display:grid;gap:28px;margin-top:32px}
.rates div{display:grid;grid-template-columns:160px 1fr;gap:24px}
.rates dt{color:var(--ink)}.rates dd{color:var(--grey);font-size:16px;line-height:24px}
.faq details{padding:20px 0;border-bottom:1px solid #c0c6ca}.faq summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;gap:20px}.faq summary:after{content:'+'}.faq details[open] summary:after{content:'−'}.faq details p{font-size:16px;line-height:24px;color:var(--grey);margin-top:16px;max-width:640px}
@media(max-width:640px){.addition{margin-top:72px}.addition>h2{font-size:24px;line-height:28px}.plan{grid-template-columns:1fr;gap:20px;padding:28px 0}.plan h2{font-size:24px;line-height:28px}.rates div{grid-template-columns:1fr;gap:8px}.pricing-hero{padding:150px 0 64px}.faq summary{font-size:17px}}

.previous-price{display:block;color:var(--grey);font-size:16px;margin-bottom:10px}.renewal{color:var(--grey);font-size:16px;margin-bottom:16px}.table-scroll{overflow-x:auto;margin-top:28px;max-width:100%}table{border-collapse:collapse;text-align:left;font-size:14px;line-height:21px;width:100%;min-width:590px}th,td{padding:14px 12px 14px 0;border-bottom:1px solid #c0c6ca;font-weight:400;vertical-align:top}thead th{color:var(--grey);border-bottom:1px solid var(--ink)}td{color:var(--grey)}.addition>p.pricing-footnote{font-size:14px;line-height:21px;margin-top:24px}

/* Pricing follows PlanPickerModal and the app's light-theme tokens. */
.pricing-page main{padding:140px 32px 0;margin-left:240px;max-width:1104px}
.pricing-page .pricing-hero{padding:0;min-height:0;max-width:none;text-align:center;display:block;margin-bottom:24px}
.pricing-page h1{font-size:24px;line-height:32px;font-weight:600;letter-spacing:-.6px}
.pricing-page .sub{font-size:13.5px;line-height:20px;margin:4px auto 0;max-width:none}
.pricing-page .access-note{font-size:12px;line-height:18px;margin-top:12px}
.pricing-page .plans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;border:0;max-width:none}
.pricing-page .plan{display:flex;flex-direction:column;gap:0;padding:0;border:1px solid #e7e7ea;border-radius:14px;overflow:hidden;background:#fff}
.pricing-page .plan.featured{border-color:#a8baf2;box-shadow:0 0 0 1px #a8baf2,0 18px 40px -24px #3b66e0}
.plan-head{padding:20px;border-bottom:1px solid #e7e7ea}
.featured .plan-head{background:linear-gradient(180deg,#e7edfb,transparent)}
.pricing-page .plan h2{font-size:14px;font-weight:600;line-height:20px;letter-spacing:0;height:20px}
.pricing-page .previous-price,.price-spacer{font-size:13px;line-height:18px;height:18px;margin:12px 0 0;color:#71717a}
.pricing-page .plan .amount{font-size:38px;line-height:46px;font-weight:600;letter-spacing:-1.14px;margin:0}
.pricing-page .plan .amount span{font-size:13.5px;line-height:20px;font-weight:400;letter-spacing:0;color:#52525b}
.pricing-page .renewal{font-size:13px;line-height:20px;margin:0;color:#52525b;height:20px}
.pricing-page .included{font-size:13px;line-height:20px;font-weight:500;margin:16px 0 10px;border:1px solid #e7e7ea;border-radius:9px;padding:8px;text-align:center;background:#f7f7f8}
.pricing-page .plan .ctas{margin:0;display:block}
.pricing-page .plan .ctas a{display:flex;justify-content:center;align-items:center;height:36px;border:1px solid #e7e7ea;border-radius:9px;font-size:13px;line-height:20px;font-weight:500;background:transparent;transition:background .15s}
.pricing-page .plan .ctas a:hover{background:#f7f7f7}
.pricing-page .featured .ctas a{background:#3b66e0;color:#fff;border-color:#3b66e0}
.pricing-page .featured .ctas a:hover{background:#2a52c4}
.pricing-page .plan ul{padding:16px 20px 20px;margin:0;font-size:13px;line-height:18px;color:#18181b;list-style:none;display:flex;flex-direction:column;gap:2px}
.pricing-page .plan li{position:relative;padding:4px 0 4px 15px}
.pricing-page .plan li:before{content:'';position:absolute;left:0;top:11px;width:5px;height:5px;border-radius:50%;background:#18181b}
.pricing-page .plan:not(:first-child) li:first-child{color:#71717a;padding-left:0}
.pricing-page .plan:not(:first-child) li:first-child:before{display:none}
.pricing-page .addition{max-width:none;margin-top:36px;padding:0;border:0}
.pricing-page .addition>h2{font-size:15px;line-height:22px;font-weight:600;letter-spacing:0;margin-bottom:4px}
.pricing-page .addition>p{max-width:none;font-size:13px;line-height:20px}
.pricing-page .table-scroll{margin-top:12px;border:1px solid #e7e7ea;border-radius:12px;background:#fff}
.pricing-page table{font-size:13px;line-height:18px;min-width:640px}
.pricing-page th,.pricing-page td{padding:10px 14px;border-bottom:1px solid #e7e7ea}
.pricing-page thead th{font-size:12px;color:#71717a}
.pricing-page tbody th{color:#18181b}
.pricing-page tbody tr:last-child>*{border-bottom:0}
.pricing-page td:nth-child(2),.pricing-page td:nth-child(3){font-family:ui-monospace,monospace;font-size:12.5px}
.pricing-page .addition>p.pricing-footnote{font-size:12px;line-height:16px;text-align:center;margin-top:16px;padding:0 16px;color:#71717a}
.pricing-page .foot{margin-left:240px;padding:56px 32px 44px}
@media(min-width:1600px){.pricing-page main{margin-left:calc((100vw - 1104px)/2)}}
@media(max-width:1150px){.pricing-page main{margin-left:0;margin-right:0;padding:140px 32px 0;max-width:none}.pricing-page .nav{position:relative;left:auto;bottom:auto;flex-direction:row;flex-wrap:wrap;padding:64px 32px 0;gap:12px 24px}.pricing-page .foot{margin-left:0;padding:32px}.pricing-page .brand{position:absolute}}
@media(max-width:767px){.pricing-page .plans{grid-template-columns:1fr}.pricing-page main{padding:125px 20px 0}.pricing-page .pricing-hero{text-align:left}.pricing-page .plan .amount{font-size:38px}.pricing-page .plan h2{font-size:14px}.pricing-page .nav{padding:56px 20px 0}.pricing-page .foot{padding:32px 20px}}

.pricing-page .plan .ctas{margin-top:16px}