@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600&display=swap');

:root{
  --bg:#07090d;
  --panel:#0b0f15;
  --panel-2:#0e131a;
  --line:rgba(255,255,255,.10);
  --line-soft:rgba(255,255,255,.065);
  --text:#f3f6f8;
  --muted:#87939f;
  --muted-2:#626e79;
  --green:#95ad9d;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  min-height:100vh;
  color:var(--text);
  font-family:Inter,system-ui,sans-serif;
  background:
    radial-gradient(circle at 52% 0%,rgba(62,94,120,.18),transparent 26%),
    radial-gradient(circle at 88% 24%,rgba(57,79,98,.09),transparent 24%),
    var(--bg);
}
a{color:inherit}
button,input,select{font:inherit}
.site-header{
  height:76px;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 34px;
  border-bottom:1px solid var(--line);
  background:rgba(7,9,13,.88);
  backdrop-filter:blur(18px);
  position:sticky;
  top:0;
  z-index:20;
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  width:max-content;
}
.brand-mark{
  width:31px;
  height:31px;
  border:1px solid rgba(255,255,255,.23);
  border-radius:50%;
  display:grid;
  place-items:center;
  font-size:12px;
}
.brand-word{
  font-family:"Space Grotesk";
  letter-spacing:.34em;
  font-size:15px;
}
.site-nav{display:flex;gap:28px}
.site-nav a{
  color:#727e8a;
  text-decoration:none;
  font-size:10px;
  letter-spacing:.08em;
}
.site-nav a:hover,.site-nav a.active{color:#dce3e8}
.studio-link{
  justify-self:end;
  min-height:36px;
  display:inline-flex;
  align-items:center;
  gap:18px;
  border:1px solid var(--line);
  border-radius:9px;
  padding:0 12px;
  color:#b5c0ca;
  text-decoration:none;
  font-size:10px;
}
.studio-link:hover{border-color:rgba(255,255,255,.20);color:white}

main{max-width:1260px;margin:0 auto;padding:0 28px 100px}
.pricing-hero{
  max-width:880px;
  text-align:center;
  margin:0 auto;
  padding:104px 0 78px;
}
.eyebrow{
  margin:0 0 13px;
  color:#768592;
  font-size:9px;
  font-weight:600;
  letter-spacing:.28em;
}
.pricing-hero h1{
  margin:0;
  font-family:"Space Grotesk";
  font-weight:400;
  letter-spacing:-.045em;
  font-size:clamp(46px,6vw,78px);
  line-height:1.02;
}
.hero-copy{
  max-width:670px;
  margin:25px auto 0;
  color:#7e8b97;
  font-size:14px;
  line-height:1.7;
}
.dev-notice{
  width:max-content;
  max-width:100%;
  margin:30px auto 0;
  border:1px solid rgba(139,164,185,.15);
  border-radius:999px;
  background:rgba(45,61,77,.07);
  color:#728290;
  padding:9px 13px;
  font-size:9px;
}
.dev-notice strong{color:#9aabb9;font-weight:500}

.plan-section,.compare-section{padding:36px 0 76px}
.section-heading{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:36px;
  margin-bottom:24px;
}
.section-heading h2{
  margin:0;
  font-family:"Space Grotesk";
  font-size:31px;
  font-weight:400;
  letter-spacing:-.03em;
}
.section-heading>p{
  max-width:440px;
  margin:0;
  color:#66737e;
  font-size:10px;
  line-height:1.6;
  text-align:right;
}
.plan-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px;
}
.plan-card,.loading-card{
  min-height:420px;
  border:1px solid var(--line);
  border-radius:18px;
  background:
    linear-gradient(160deg,rgba(255,255,255,.018),transparent 38%),
    var(--panel);
  padding:22px;
}
.loading-card{
  grid-column:1/-1;
  min-height:160px;
  display:grid;
  place-items:center;
  color:#65717c;
  font-size:11px;
}
.plan-card.featured{
  border-color:rgba(151,177,160,.24);
  background:
    radial-gradient(circle at 50% 0%,rgba(94,126,104,.12),transparent 35%),
    linear-gradient(160deg,rgba(255,255,255,.025),transparent 40%),
    var(--panel);
}
.plan-top{
  min-height:83px;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
}
.plan-name{
  margin:0;
  font-family:"Space Grotesk";
  font-size:21px;
  font-weight:500;
}
.plan-kicker{
  display:inline-flex;
  min-height:23px;
  align-items:center;
  border:1px solid rgba(149,173,157,.18);
  border-radius:999px;
  color:#8ca092;
  padding:0 7px;
  font-size:7px;
  letter-spacing:.08em;
}
.plan-price{
  margin:10px 0 4px;
  font-family:"Space Grotesk";
  font-size:31px;
  color:#dce3e8;
}
.plan-price span{
  font-family:Inter;
  color:#66727d;
  font-size:10px;
}
.plan-description{
  min-height:62px;
  margin:0 0 18px;
  color:#6c7884;
  font-size:9px;
  line-height:1.6;
}
.plan-allowance{
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  padding:13px 0;
  color:#8b98a4;
  font-size:9px;
}
.plan-features{
  list-style:none;
  padding:17px 0 0;
  margin:0;
  display:grid;
  gap:10px;
}
.plan-features li{
  display:flex;
  gap:8px;
  color:#76838e;
  font-size:9px;
  line-height:1.45;
}
.plan-features li:before{
  content:"";
  width:5px;
  height:5px;
  border-radius:50%;
  background:#8ba092;
  flex:none;
  margin-top:4px;
}
.plan-cta{
  width:100%;
  height:41px;
  margin-top:20px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#10161d;
  color:#9ca8b2;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-size:9px;
}
.plan-cta.primary{
  border-color:rgba(224,235,243,.10);
  background:#edf3f7;
  color:#080b10;
  font-weight:700;
}
.plan-cta.disabled{opacity:.5;pointer-events:none}

.comparison-shell{
  border:1px solid var(--line);
  border-radius:18px;
  background:var(--panel);
  overflow:hidden;
}
.comparison-scroll{overflow:auto}
.comparison-table{
  width:100%;
  min-width:850px;
  border-collapse:collapse;
}
.comparison-table th,.comparison-table td{
  border-bottom:1px solid var(--line-soft);
  padding:15px 16px;
  text-align:center;
  font-size:9px;
}
.comparison-table th:first-child,.comparison-table td:first-child{
  position:sticky;
  left:0;
  z-index:2;
  background:#0b0f15;
  text-align:left;
  width:230px;
}
.comparison-table thead th{
  color:#cbd4db;
  font-family:"Space Grotesk";
  font-size:12px;
  font-weight:500;
  background:#0d1218;
}
.comparison-table thead th:first-child{z-index:3}
.comparison-table tbody td:first-child{color:#77848f}
.comparison-table td{color:#8d9aa5}
.comparison-table .yes{color:#a3baa9}
.comparison-table .no{color:#4e5861}
.loading-row{text-align:center!important;color:#68747f!important}

.future-section{padding:28px 0}
.future-card{
  border:1px solid var(--line);
  border-radius:24px;
  background:
    radial-gradient(circle at 75% 50%,rgba(62,93,119,.15),transparent 28%),
    linear-gradient(135deg,#0e141c,#090d12 72%);
  padding:52px;
}
.future-card h2{
  max-width:600px;
  margin:0;
  font-family:"Space Grotesk";
  font-weight:400;
  font-size:39px;
  letter-spacing:-.035em;
}
.future-card>p:not(.eyebrow){
  max-width:650px;
  margin:18px 0 26px;
  color:#77848f;
  font-size:11px;
  line-height:1.7;
}
.future-card a{
  color:#c2ccd4;
  text-decoration:none;
  font-size:10px;
}
.future-card a span{margin-left:10px}

.site-footer{
  min-height:110px;
  border-top:1px solid var(--line);
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:24px;
  padding:0 max(34px,calc((100vw - 1260px)/2 + 28px));
  color:#626e78;
}
.site-footer p{margin:0;font-size:9px}
.site-footer>div{justify-self:end;display:flex;gap:20px}
.site-footer>div a{color:#6d7984;text-decoration:none;font-size:9px}

@media(max-width:1000px){
  .plan-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .site-header{grid-template-columns:1fr auto;padding:0 18px}
  .site-nav{display:none}
  main{padding-left:18px;padding-right:18px}
  .pricing-hero{padding-top:76px}
  .section-heading{display:block}
  .section-heading>p{text-align:left;margin-top:10px}
  .future-card{padding:32px 24px}
  .site-footer{grid-template-columns:1fr auto;padding:24px 18px}
  .site-footer p{display:none}
}
@media(max-width:560px){
  .plan-grid{grid-template-columns:1fr}
  .pricing-hero h1{font-size:44px}
}


/* v0.17.1 — Pro card spacing hotfix */
.plan-card{
  position:relative;
}
.plan-top{
  display:block;
  min-height:83px;
  padding-right:0;
}
.plan-kicker{
  position:absolute;
  top:22px;
  right:22px;
  max-width:118px;
}
.plan-price{
  white-space:nowrap;
}
.plan-card.featured .plan-top{
  padding-right:0;
}


/* v0.21 preview pricing */
.preview-pricing-notice{
  border-color:rgba(149,173,157,.18);
  background:rgba(63,89,70,.07);
}
.preview-pricing-notice strong{color:#a6baa9}
.preview-price-label{
  margin-top:6px;
  color:#708277;
  font-size:7px;
  letter-spacing:.12em;
}


/* v0.22.3 — Free card vertical alignment */
.preview-price-spacer{
  visibility:hidden;
}