/* ────────────────────────────────────────────────
   pricing — four tiers
   ──────────────────────────────────────────────── */

.pricing{
  padding: 70px 0 100px;
  position: relative;
}
.pricing > .container{ max-width: var(--container); }

.pricing header{
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin-bottom: 56px;
  max-width: 760px;
}
.pricing header h2{
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--h2);
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--ink);
}
.pricing header h2 em{
  font-style: normal;
  color: var(--ink-dim);
  font-weight: 400;
}
.pricing header p{
  font-size: var(--body);
  line-height: 1.55;
  color: var(--ink-dim);
  max-width: 540px;
  letter-spacing: -0.005em;
}

/* ────────── grid ────────── */
.pricing-grid{
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

/* ────────── card ────────── */
.pricing-card{
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 30px 26px 28px;
  transition: border-color .35s var(--ease-out);
}
.pricing-card:hover{ border-color: var(--line-2); }

.pricing-card-featured{
  background: var(--bg-3);
  border-color: var(--line-2);
}
.pricing-card-featured:hover{ border-color: rgba(245,244,242,0.22); }

.pricing-flag{
  position: absolute;
  top: 16px;
  right: 16px;
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--rec);
  border: 1px solid rgba(255, 92, 0, 0.32);
  padding: 5px 9px;
  border-radius: 100px;
}

/* ────────── card head ────────── */
.pricing-card-head{
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}
.pricing-tier{
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.025em;
  color: var(--ink);
}
.pricing-cap{
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
}

/* ────────── price row ────────── */
.pricing-price-row{
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 18px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.pricing-amount{
  font-family: var(--font-body);
  font-size: 48px;
  font-weight: 600;
  letter-spacing: -0.045em;
  line-height: 1;
  color: var(--ink);
}
.pricing-amount-text{
  font-family: var(--font-body);
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ink);
}
.pricing-currency{
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink-dim);
  letter-spacing: -0.005em;
}
.pricing-unit{
  font-family: 'Geist Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
  margin-left: auto;
  align-self: flex-end;
}

/* ────────── good for ────────── */
.pricing-good{
  margin-bottom: 22px;
}
.pricing-good-label{
  display: block;
  font-family: 'Geist Mono', monospace;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--ink-mute);
  margin-bottom: 10px;
}
.pricing-good-tags{
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pricing-good-tag{
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--ink-dim);
  border: 1px solid var(--line);
  padding: 5px 10px;
  border-radius: 100px;
  background: rgba(245,244,242,0.02);
}

/* ────────── features ────────── */
.pricing-features{
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-bottom: 28px;
  padding: 0;
  list-style: none;
  flex: 1;
}
.pricing-features li{
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-body);
  font-size: 13px;
  color: var(--ink-dim);
  letter-spacing: -0.005em;
  line-height: 1.45;
}
.pricing-check{
  width: 13px; height: 13px;
  flex-shrink: 0;
  margin-top: 3px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink);
  opacity: 0.75;
}
.pricing-check svg{ width: 100%; height: 100%; }

/* ────────── CTA ────────── */
.pricing-cta{
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--line-2);
  padding: 13px 20px;
  border-radius: 100px;
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: none;
  transition: all .35s var(--ease-out);
}
.pricing-cta:hover{
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}
.pricing-cta .arrow{
  font-size: 12px;
  transition: transform .35s var(--ease-out);
}
.pricing-cta:hover .arrow{ transform: translate(2px, -2px); }

.pricing-cta-primary{
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}
.pricing-cta-primary:hover{
  background: transparent;
  color: var(--ink);
  border-color: var(--ink);
}

/* ────────── responsive ────────── */
@media (max-width: 1180px){
  .pricing-grid{ grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

@media (max-width: 980px){
  .pricing{ padding: 60px 0 80px; }
  .pricing header{ margin-bottom: 40px; }
}

@media (max-width: 560px){
  .pricing-grid{ grid-template-columns: 1fr; gap: 12px; }
  .pricing-card{ padding: 26px 22px 24px; }
}