/* ==========================================================================
   Pricing page
   ========================================================================== */

.pricing-hero { padding-top: var(--sec-y); padding-bottom: var(--sec-y); text-align: center; }
.pricing-card-full { max-width: 480px; margin: 0 auto; background: white; border-radius: 22px; box-shadow: var(--shadow-lifted); padding: 44px; text-align: center; border: 1px solid var(--border); }
.pricing-card-full .amount { font-family: var(--font-mono); font-size: 60px; font-weight: 700; color: var(--ink); margin-top: 10px; }
.pricing-card-full .amount span { font-size: 18px; font-weight: 500; color: var(--slate); font-family: var(--font-body); }
.pricing-list { list-style: none; padding: 0; margin: 30px 0; text-align: left; display: flex; flex-direction: column; gap: 13px; }
.pricing-list li { display: flex; align-items: flex-start; gap: 10px; font-size: 15.5px; color: var(--ink); }
.pricing-note { font-size: 13.5px; color: var(--slate-light); margin-top: 18px; }

.included-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; max-width: 780px; margin: 0 auto; }
@media (max-width: 640px) { .included-grid { grid-template-columns: 1fr; } }
.included-card { border: 1px solid var(--border); border-radius: 14px; padding: 22px; }
.included-card h3 { font-size: 16.5px; font-weight: 700; margin-bottom: 8px; }
.included-card p { font-size: 14.5px; color: var(--slate); line-height: 1.6; }

/* Three-tier pricing grid */
.tier-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 760px; margin: 0 auto; align-items: stretch; }
@media (max-width: 900px) { .tier-grid { grid-template-columns: 1fr; max-width: 480px; } }

.tier-card { background: white; border-radius: 22px; border: 1px solid var(--border); padding: 36px 32px; display: flex; flex-direction: column; position: relative; }
.tier-card.tier-featured { border: 2px solid var(--emerald); box-shadow: 0 20px 50px -20px var(--emerald-glow); transform: translateY(-6px); }
@media (max-width: 900px) { .tier-card.tier-featured { transform: none; } }

.tier-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--emerald); color: white; font-family: var(--font-mono); font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 6px 16px; border-radius: 999px; white-space: nowrap; }

.tier-eyebrow { font-family: var(--font-mono); font-size: 12.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--slate); }
.tier-featured .tier-eyebrow { color: var(--emerald-deep); }
.tier-amount { font-family: var(--font-mono); font-size: 42px; font-weight: 700; color: var(--ink); margin-top: 10px; line-height: 1.1; }
.tier-amount span { font-size: 15px; font-weight: 500; color: var(--slate); font-family: var(--font-body); }
.tier-amount .strike { font-size: 20px; color: var(--slate-light); text-decoration: line-through; font-weight: 500; margin-right: 8px; }
.tier-sub { font-size: 13.5px; color: var(--slate); margin-top: 6px; min-height: 18px; }

.tier-list { list-style: none; padding: 0; margin: 26px 0; text-align: left; display: flex; flex-direction: column; gap: 12px; flex-grow: 1; }
.tier-list li { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; color: var(--ink); line-height: 1.45; }
.tier-list li svg { flex-shrink: 0; margin-top: 2px; }
.tier-list li.tier-list-muted { color: var(--slate-light); }
.tier-list li.tier-list-muted svg { stroke: var(--slate-light); }

.tier-cta-note { font-size: 12.5px; color: var(--slate-light); margin-top: 14px; text-align: center; }

.founder-banner { max-width: 1040px; margin: 0 auto 48px; background: var(--emerald-tint); border: 1px solid var(--emerald-glow); border-radius: 14px; padding: 14px 22px; text-align: center; font-size: 14.5px; color: var(--emerald-deep); font-weight: 600; }

/* ---- Pricing hero: 60/40 split with billing toggle ---- */
.pricing-split { display: grid; grid-template-columns: 1.5fr 1fr; gap: 56px; align-items: start; max-width: 1060px; margin: 0 auto; text-align: left; }
@media (max-width: 900px) { .pricing-split { grid-template-columns: 1fr; gap: 36px; max-width: 520px; } }

.pricing-value { text-align: left; }
.pricing-value h2 { font-size: 34px; font-weight: 700; color: var(--ink); line-height: 1.2; letter-spacing: -0.02em; }
@media (max-width: 640px) { .pricing-value h2 { font-size: 27px; } }
.pricing-value .pricing-sub { font-size: 16.5px; color: var(--slate); line-height: 1.6; margin-top: 14px; max-width: 46ch; }


.pricing-box { background: white; border-radius: 22px; border: 2px solid var(--emerald); box-shadow: 0 20px 50px -20px var(--emerald-glow); padding: 28px; position: sticky; top: 96px; }
@media (max-width: 900px) { .pricing-box { position: static; } }

.billing-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--paper); border: 1px solid var(--border); border-radius: 999px; padding: 4px; }
.billing-toggle button { appearance: none; border: 0; background: transparent; cursor: pointer; font-family: var(--font-body); font-size: 13.5px; font-weight: 600; color: var(--slate); padding: 9px 6px; border-radius: 999px; transition: background .15s, color .15s; white-space: nowrap; }
.billing-toggle button[aria-selected="true"] { background: var(--ink); color: white; }
.billing-toggle button:focus-visible { outline: 2px solid var(--emerald); outline-offset: 2px; }
.billing-toggle .save-flag { color: var(--emerald); font-weight: 700; }
.billing-toggle button[aria-selected="true"] .save-flag { color: #6ee7b7; }

.price-display { text-align: center; margin: 26px 0 22px; }
.price-display .price-main { font-family: var(--font-mono); font-size: 46px; font-weight: 700; color: var(--ink); line-height: 1; letter-spacing: -0.04em; }
.price-display .price-main span { font-size: 16px; font-weight: 500; color: var(--slate); font-family: var(--font-body); letter-spacing: 0; }
.price-display .price-note { font-size: 13.5px; color: var(--slate); margin-top: 12px; line-height: 1.5; min-height: 40px; }

.pricing-box .btn { width: 100%; }
.trust-note { font-size: 12.5px; color: var(--slate-light); margin-top: 14px; text-align: center; line-height: 1.5; }

/* ---- Feature blocks: two columns, icon badges ---- */
.pricing-features { list-style: none; padding: 0; margin: 34px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 30px 28px; }
@media (max-width: 1100px) { .pricing-features { gap: 26px 22px; } }
@media (max-width: 900px)  { .pricing-features { grid-template-columns: 1fr; gap: 24px; } }

.pricing-features li { display: grid; grid-template-columns: 38px 1fr; gap: 14px; align-items: start; font-size: inherit; color: inherit; line-height: inherit; }

.feat-badge { width: 38px; height: 38px; border-radius: 11px; background: var(--emerald-tint, #e8f7f0); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.feat-badge svg { width: 19px; height: 19px; stroke: var(--emerald-deep, #0b7a54); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.feat-title { display: block; font-size: 15.5px; font-weight: 700; color: var(--ink); line-height: 1.3; letter-spacing: -0.01em; }
.feat-desc  { display: block; font-size: 14px; color: var(--slate); line-height: 1.55; margin-top: 5px; }

.box-trust { list-style: none; padding: 20px 0 0; margin: 18px 0 0; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 11px; }
.box-trust li { display: grid; grid-template-columns: 17px 1fr; gap: 10px; align-items: start; font-size: 13px; color: var(--slate); line-height: 1.5; }
.box-trust svg { width: 15px; height: 15px; margin-top: 2px; stroke: var(--emerald); fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }

/* ---- Testimonials (placeholder content until real quotes exist) ---- */
.tm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1060px; margin: 0 auto; }
@media (max-width: 900px) { .tm-grid { grid-template-columns: 1fr; max-width: 560px; gap: 18px; } }

.tm-card { background: white; border: 1px solid var(--border); border-radius: 18px; padding: 28px 26px; margin: 0; display: flex; flex-direction: column; }
.tm-card blockquote { margin: 0; font-size: 14.5px; line-height: 1.65; color: var(--slate); flex-grow: 1; }
.tm-headline { margin: 0 0 12px; font-size: 16px; font-weight: 700; color: var(--ink); line-height: 1.35; letter-spacing: -0.01em; }
.tm-card blockquote::before { content: '\201C'; display: block; font-family: var(--font-mono); font-size: 34px; line-height: 1; color: var(--emerald); margin-bottom: 2px; }
.tm-card figcaption { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border); display: flex; align-items: baseline; gap: 8px; }
.tm-name { font-size: 14.5px; font-weight: 700; color: var(--ink); }
.tm-meta { font-size: 13px; color: var(--slate-light); }

/* Competitor comparison table (self-contained: encyc.css is not loaded here) */
.cmp-table { width: 100%; border-collapse: separate; border-spacing: 0; max-width: 1020px; margin: 8px auto 0; background: white; border: 1px solid var(--border); border-radius: 14px; overflow: hidden; }
.cmp-source { max-width: 1020px; margin: 0 auto 10px; font-size: 12.5px; color: var(--slate-light); text-align: left; line-height: 1.5; }
.cmp-table th { text-align: left; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: white; background: var(--ink); padding: 13px 16px; }
.cmp-table td { padding: 15px 16px; border-top: 1px solid var(--border); color: var(--slate); vertical-align: top; font-size: 14px; line-height: 1.5; }
.cmp-table tbody tr:first-child td { border-top: 0; }
.cmp-table td:first-child { color: var(--ink); width: 21%; }
.cmp-table .cmp-kind { display: block; font-size: 12.5px; color: var(--slate-light); margin-top: 3px; font-weight: 500; }
.cmp-table .cmp-price { font-family: var(--font-mono); font-size: 13.5px; color: var(--ink); white-space: nowrap; }
.cmp-table .row-us td { background: #eefaf4; }
.cmp-table .row-us td:first-child { box-shadow: inset 3px 0 0 var(--emerald); }
.cmp-note { max-width: 760px; margin: 24px auto 0; text-align: center; font-size: 14.5px; line-height: 1.6; color: var(--slate); }
@media (max-width: 860px) {
  .cmp-table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cmp-table caption { display: block; min-width: 0; }
  .cmp-table thead, .cmp-table tbody { display: table; width: 100%; min-width: 760px; }
  .cmp-table td:first-child { width: 24%; }
}








/* ===== Two tiers ==========================================================
   The product has a free tier and a paid one, so the page has two cards.
   Structure carries the distinction; the copy no longer has to explain it. */
.tier-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  max-width: 940px; margin: 0 auto; text-align: left; align-items: stretch; }
.tier-col { background: #fff; border: 1px solid var(--border); border-radius: 20px; padding: 30px 28px 32px;
  display: flex; flex-direction: column; }
.tier-col-paid { border: 2px solid var(--emerald); box-shadow: 0 20px 50px -24px var(--emerald-glow); }

.tier-name { display: block; font-size: 13px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--slate); margin-bottom: 14px; }
.tier-price { font-size: 42px; font-weight: 800; letter-spacing: -.02em; line-height: 1.05; font-family: var(--font-mono, inherit); }
.tier-price span { font-size: 15px; font-weight: 600; letter-spacing: 0; color: var(--slate); margin-left: 6px; font-family: inherit; }
.tier-line { font-size: 14.5px; line-height: 1.55; color: var(--slate); margin: 10px 0 0; }
.tier-cta { display: flex; width: 100%; text-align: center; margin: 20px 0 10px; }
.tier-col .btn-secondary-light { display: flex; }
.tier-note { font-size: 12.5px; line-height: 1.5; color: var(--slate-light); margin: 0 0 4px; }
.tier-list { list-style: none; padding: 20px 0 0; margin: 16px 0 0; border-top: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 14px; }
.tier-list li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.55; }
.tier-list svg { width: 17px; height: 17px; flex: none; margin-top: 3px; fill: none;
  stroke: var(--emerald); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.tier-col:not(.tier-col-paid) .tier-list svg { stroke: var(--emerald); }

.tier-col .price-display { text-align: left; margin: 0; }
@media (max-width: 860px) {
  .tier-grid { grid-template-columns: 1fr; gap: 20px; max-width: 460px; }

}


/* The billing period applies to the page, not to one card, so it sits above both. */
.billing-switch { max-width: 300px; margin: 0 auto 26px; }
.billing-switch .billing-toggle { margin: 0; }


/* The line directly under the CTA, above the trust list. */
.trust-line { font-size: 13px; color: var(--slate); margin: 14px 0 0; text-align: center; line-height: 1.5; }