/* Pricing page — the only page on the site that asks for money.

   It deliberately borrows the homepage's free-card furniture (.free-section,
   .free-card, .free-features, .free-action) rather than inventing a second
   card style, so the paid card reads as the same family as the free one and
   inherits its responsive rules for nothing. Everything below is only the
   handful of parts a price needs and a free plan does not. */

/* ── Page head ──────────────────────────────────────────────────────────── */

.pricing-head {
  position: relative;
  padding: clamp(120px, 13vw, 170px) max(var(--gut), calc((100vw - var(--max)) / 2)) clamp(20px, 4vw, 50px);
}

.pricing-head h1 {
  max-width: 900px;
  margin: 0;
  font-size: clamp(45px, 5.2vw, 72px);
  font-weight: 620;
  letter-spacing: -0.058em;
  line-height: 1.02;
}

.pricing-head h1 span {
  color: var(--blue);
}

.pricing-head > p {
  max-width: 660px;
  margin: 24px 0 0;
  color: var(--muted);
  font-size: clamp(17px, 1.5vw, 20px);
  line-height: 1.7;
  letter-spacing: -0.015em;
}

/* ── The paid card ──────────────────────────────────────────────────────── */

.price-section {
  padding-top: clamp(40px, 6vw, 80px) !important;
}

.price-section .free-card {
  margin-inline: auto;
}

/* The price itself. Mirrors .price-zero so the two cards sit at the same
   optical weight, with room for the struck-through standard price beside it. */
.price-pro {
  display: flex;
  align-items: baseline;
  gap: 9px;
  color: var(--green-dark);
  font-size: 30px;
  font-weight: 750;
  letter-spacing: -0.05em;
}

.price-pro s {
  color: var(--muted-light);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
}

.price-pro small {
  color: var(--muted);
  font-size: 9px;
  font-weight: 650;
  letter-spacing: 0;
}

/* The founding-seat counter. Ships with honest static wording so that a
   blocked or slow /api/billing/founder leaves a true sentence on the page
   rather than an empty pill. */
.founder-tag {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 13px 32px;
  border-bottom: 1px solid var(--line);
  color: var(--blue-deep);
  background: linear-gradient(110deg, rgba(231, 226, 255, 0.62), rgba(223, 242, 232, 0.5));
  font-size: 11px;
  font-weight: 750;
  letter-spacing: -0.01em;
}

.founder-tag::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-radius: 50%;
  background: var(--blue);
}

/* ── Honest small print inside the card ─────────────────────────────────── */

.addon-note {
  margin: 20px 32px 0;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: rgba(23, 35, 31, 0.025);
}

.addon-note strong {
  display: block;
  margin-bottom: 5px;
  color: var(--ink);
  font-size: 12px;
}

.addon-note p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  line-height: 1.6;
}

/* ── Buy button + failure text ──────────────────────────────────────────── */

.free-action button.button {
  cursor: pointer;
}

/* The refund promise is the sentence that removes the last hesitation before
   buying, so it is lifted out of the 9px small print it sits in rather than
   left to compete with the Stripe/currency housekeeping on the same line. */
.free-action small strong {
  display: inline-block;
  margin-bottom: 3px;
  color: var(--green-dark);
  font-size: 12px;
  letter-spacing: -0.01em;
}

.free-action button.button[disabled] {
  cursor: default;
  opacity: 0.72;
  transform: none;
}

/* Hidden until something actually goes wrong. Styled as a plain sentence, not
   an alarm: the most likely reader is someone whose card page just failed to
   open, and they need the next step rather than a red box. */
.buy-error {
  margin: 0 32px 30px;
  padding: 14px 18px;
  border: 1px solid rgba(180, 60, 60, 0.22);
  border-radius: 14px;
  color: #7c2b2b;
  background: rgba(239, 217, 222, 0.5);
  font-size: 12px;
  line-height: 1.55;
}

/* ── What stays free / reassurance rows ─────────────────────────────────── */

.pricing-reassure {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  max-width: 1050px;
  margin: 40px auto 0;
}

.pricing-reassure > div {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 3px 14px;
  padding: 22px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
}

.pricing-reassure > div > span {
  grid-row: 1 / span 2;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 13px;
  color: #d6f0e2;
  background: rgba(255, 255, 255, 0.09);
}

.pricing-reassure > div > span .ic {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.pricing-reassure strong {
  color: #f7fbf9;
  font-size: 13px;
  letter-spacing: -0.02em;
}

.pricing-reassure small {
  color: #a9c3ba;
  font-size: 11px;
  line-height: 1.55;
}

/* ── The free alternative, stated plainly under the price ───────────────── */

.pricing-free {
  padding: clamp(90px, 10vw, 140px) max(var(--gut), calc((100vw - var(--max)) / 2));
  text-align: center;
}

.pricing-free h2 {
  max-width: 760px;
  margin: 0 auto;
  font-size: clamp(34px, 3.6vw, 50px);
  font-weight: 620;
  letter-spacing: -0.05em;
  line-height: 1.06;
}

.pricing-free > p {
  max-width: 620px;
  margin: 22px auto 0;
  color: var(--muted);
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.7;
}

.pricing-free .free-action-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-top: 34px;
}

/* ── Questions specific to paying ───────────────────────────────────────── */

.pricing-faq {
  padding: 0 max(var(--gut), calc((100vw - var(--max)) / 2)) clamp(110px, 12vw, 160px);
}

.pricing-faq-inner {
  max-width: 860px;
  margin: 0 auto;
}

.pricing-faq h2 {
  margin: 0 0 30px;
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 620;
  letter-spacing: -0.05em;
}

.pricing-faq details {
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
}

.pricing-faq summary {
  cursor: pointer;
  list-style: none;
  font-size: clamp(16px, 1.4vw, 19px);
  font-weight: 700;
  letter-spacing: -0.025em;
}

.pricing-faq summary::-webkit-details-marker {
  display: none;
}

.pricing-faq p {
  margin: 14px 0 0;
  max-width: 700px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.7;
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .pricing-reassure {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .founder-tag,
  .addon-note,
  .buy-error {
    margin-inline: 18px;
  }

  .founder-tag {
    margin-inline: 0;
    padding: 12px 18px;
  }

  .price-pro {
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
  }

  .pricing-reassure {
    grid-template-columns: minmax(0, 1fr);
  }
}