/* Pricing / paywall V1 — the page's own stylesheet.
 *
 * WHY THIS IS NOT IN THE APP BUNDLE'S CSS
 * ---------------------------------------
 * Same reason `pricing.js` is a zero-build module: the bundle and its stylesheet
 * are produced by a build step this repository cannot run today. A price on a
 * page with no styling is still a price, but it is an unreadable one, so the
 * page carries its own CSS and the bundle is left untouched.
 *
 * When the bundle is next built, this file is deleted and the rules move into
 * `src/styles.css` with the component — not kept alongside it.
 *
 * Palette matches the workspace (#215b46 primary, #f7f8f6 ground) so a visitor
 * moving between the marketing site and the app does not see two products.
 */

.pricingPage{font-family:'DM Sans',system-ui,sans-serif;color:#18201d;background:#f7f8f6;min-height:100vh;display:flex;flex-direction:column}

/* top bar */
.pricingNav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 34px;border-bottom:1px solid #e6e9e6;background:rgba(255,255,255,.9)}
.pricingBrand{font-family:Manrope;font-size:16px;font-weight:700;color:#1d4f3f}
.pricingNavLinks{display:flex;align-items:center;gap:20px;font-size:14px}
.pricingNavLink{color:#5d6661;text-decoration:none}
.pricingNavLink:hover{color:#1d4f3f}

/* hero */
.pricingHead{padding:56px 34px 26px;max-width:900px}
.pricingHead h1{font:700 42px/1.1 Manrope;margin:0 0 14px;letter-spacing:-.03em}
.pricingLead{font-size:17px;line-height:1.65;color:#66706b;margin:0;max-width:640px}

/* trial state strip — the paywall's single loudest element */
.priceTrial{display:flex;flex-direction:column;gap:5px;margin:0 34px 26px;padding:16px 20px;border-radius:12px;font-size:14px}
.priceTrial.active{background:#eef6f1;border:1px solid #d9e7de;color:#1d4f3f}
.priceTrial.ended{background:#fdf3e6;border:1px solid #ecdcbf;color:#8a5a12}
.priceTrial.none{background:#fff;border:1px solid #e3e7e3;color:#5d6661}
.priceTrial b{font-weight:700}

/* plan grid */
.priceGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:0 34px;max-width:1000px}
.priceCard{position:relative;background:#fff;border:1px solid #e3e7e3;border-radius:16px;padding:26px}
.priceCard.highlight{border-color:#cfe0d6;box-shadow:0 2px 0 #e6efe9}
.priceBadge{position:absolute;top:-11px;left:24px;background:#fdf3e6;border:1px solid #ecdcbf;border-radius:99px;padding:3px 10px;font-size:11px;font-weight:700;color:#8a5a12}
.priceName{margin:0 0 8px;font:700 17px Manrope}
.priceAmount{display:block;font-size:30px;font-weight:700;letter-spacing:-.02em}
.priceSub{margin:6px 0 16px;font-size:14px;color:#78807b;min-height:40px}
.priceList{list-style:none;margin:0 0 22px;padding:0;display:grid;gap:8px}
.priceList li{font-size:14px;line-height:1.5;color:#4d5651;padding-left:20px;position:relative}
.priceList li::before{content:"";position:absolute;left:2px;top:8px;width:7px;height:7px;border-radius:50%;background:#5b9c7d}
.pricingCta{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:10px;padding:11px 16px;background:#215b46;color:#fff;font-weight:600;font-size:14px;text-decoration:none;cursor:pointer}
.pricingCta[disabled]{opacity:.6;cursor:progress}

/* note under the grid — the honest "nothing is charged" line */
.priceNote{margin:14px 34px 0;max-width:1000px;font-size:13px;color:#78807b}

/* faq */
.pricingFaq{max-width:820px;margin:44px auto 0;padding:0 34px}
.pricingFaqTitle{font:700 20px Manrope;margin:0 0 14px}
.priceFaqList{display:grid;gap:10px}
.priceFaq{display:flex;flex-direction:column;gap:4px;padding:14px 16px;background:#fff;border:1px solid #e6e9e6;border-radius:12px}
.priceFaq b{font-size:14px}
.priceFaq span{font-size:13px;line-height:1.55;color:#6b736e}

/* footer */
.pricingFoot{margin-top:auto;display:flex;align-items:center;gap:14px;padding:26px 34px;border-top:1px solid #e6e9e6;font-size:13px;color:#7a827e}
.pricingMail{margin-left:auto;color:#1d4f3f}

@media(max-width:720px){
  .pricingNav{flex-direction:column;align-items:flex-start;gap:10px}
  .pricingNavLinks{gap:14px;flex-wrap:wrap}
  .pricingHead{padding:38px 20px 20px}
  .pricingHead h1{font-size:32px}
  .priceGrid{grid-template-columns:1fr;padding:0 20px}
  .priceTrial,.priceNote{margin-left:20px;margin-right:20px}
  .pricingFaq{padding:0 20px}
  .pricingFoot{padding:22px 20px}
}