/* Locale pages V1 — the stylesheet for the bilingual public pages.
 *
 * WHY THIS FILE EXISTS
 * --------------------
 * `pricing.css` belongs to the pricing page. The locale pages (`/en/…`, `/zh/…`)
 * and the checkout landing are a different surface with a different shape: a
 * document page (help / privacy / terms), a marketing page (home) and a
 * transactional page (checkout) that all share one chrome.
 *
 * The palette is the workspace's (#215b46 primary, #f7f8f6 ground) for the same
 * reason `pricing.css` uses it: a visitor moving between the marketing site and
 * the app should not see two products.
 *
 * Like `pricing.js`, this is a zero-build asset. The workspace bundle is produced
 * by a build step this repository cannot re-run, so a page that only existed in a
 * rebuilt bundle would not exist in production. When the bundle is next built,
 * these rules move into `src/styles.css` and this file is deleted.
 */

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

/* chrome */
.lpNav{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:18px 34px;border-bottom:1px solid #e6e9e6;background:rgba(255,255,255,.92)}
.lpBrand{font-family:Manrope;font-size:16px;font-weight:700;color:#1d4f3f;text-decoration:none}
.lpNavLinks{display:flex;align-items:center;gap:20px;font-size:14px;flex-wrap:wrap}
.lpNavLink{color:#5d6661;text-decoration:none}
.lpNavLink:hover{color:#1d4f3f}
.lpNavLink[aria-current="page"]{color:#1d4f3f;font-weight:600}
.lpLang{border:1px solid #d9e7de;background:#fff;border-radius:99px;padding:5px 12px;font-size:13px;color:#1d4f3f;text-decoration:none}
.lpLang:hover{background:#eef6f1}

/* home */
.lpHero{padding:64px 34px 30px;max-width:920px}
.lpHero h1{font:700 44px/1.12 Manrope;margin:0 0 16px;letter-spacing:-.03em}
.lpLead{font-size:18px;line-height:1.65;color:#66706b;margin:0;max-width:660px}
.lpActions{display:flex;align-items:center;gap:14px;margin-top:26px;flex-wrap:wrap}
.lpPrimary{display:inline-flex;align-items:center;justify-content:center;border:0;border-radius:10px;padding:12px 18px;background:#215b46;color:#fff;font-weight:600;font-size:15px;text-decoration:none;cursor:pointer}
.lpPrimary[disabled]{opacity:.6;cursor:progress}
.lpSecondary{display:inline-flex;align-items:center;border:1px solid #d9e7de;border-radius:10px;padding:12px 18px;background:#fff;color:#1d4f3f;font-weight:600;font-size:15px;text-decoration:none}
.lpNote{margin:16px 0 0;font-size:13px;color:#78807b}
.lpSections{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;padding:26px 34px 0;max-width:1080px}
.lpSection{background:#fff;border:1px solid #e3e7e3;border-radius:16px;padding:24px}
.lpSection h2{font:700 17px/1.3 Manrope;margin:0 0 10px}
.lpSection p{font-size:14px;line-height:1.6;color:#5d6661;margin:0}
.lpMarketNote{margin:22px 34px 0;max-width:1080px;font-size:13px;color:#78807b}

/* document pages (help / privacy / terms) */
.lpDoc{padding:56px 34px 0;max-width:820px}
.lpDoc h1{font:700 38px/1.15 Manrope;margin:0 0 14px;letter-spacing:-.03em}
.lpDoc .lpLead{margin-bottom:26px}
.lpDocList{display:grid;gap:12px}
.lpDocItem{background:#fff;border:1px solid #e6e9e6;border-radius:14px;padding:20px 22px}
.lpDocItem h2{font:700 16px/1.3 Manrope;margin:0 0 8px}
.lpDocItem p{font-size:14px;line-height:1.65;color:#5d6661;margin:0}
.lpContact{margin:22px 0 0;font-size:14px;color:#5d6661}
.lpContact a{color:#1d4f3f}

/* checkout */
.lpCheckout{padding:52px 34px 0;max-width:1000px}
.lpCheckout h1{font:700 38px/1.15 Manrope;margin:0 0 12px;letter-spacing:-.03em}
.lpState{display:flex;flex-direction:column;gap:5px;margin:22px 0 0;padding:16px 20px;border-radius:12px;font-size:14px;max-width:1000px}
.lpState.active{background:#eef6f1;border:1px solid #d9e7de;color:#1d4f3f}
.lpState.ended{background:#fdf3e6;border:1px solid #ecdcbf;color:#8a5a12}
.lpState.none{background:#fff;border:1px solid #e3e7e3;color:#5d6661}
.lpState b{font-weight:700}
.lpPlans{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:22px}
.lpPlan{position:relative;background:#fff;border:1px solid #e3e7e3;border-radius:16px;padding:24px;display:flex;flex-direction:column;gap:6px}
.lpPlan[aria-selected="true"]{border-color:#215b46;box-shadow:0 0 0 3px #eef6f1}
.lpPlanName{font:700 16px Manrope;margin:0}
.lpPlanAmount{font-size:30px;font-weight:700;letter-spacing:-.02em}
.lpPlanCadence{font-size:13px;color:#78807b;margin-bottom:10px}
.lpPlanPriceTag{display:inline-block;align-self:flex-start;background:#f1f4f2;border-radius:99px;padding:2px 9px;font-size:11px;color:#5d6661;margin-bottom:6px}
.lpPlan .lpPrimary{margin-top:auto;width:100%}
.lpPlan .lpPrimary.ghost{background:#fff;color:#215b46;border:1px solid #cfe0d6}
.lpMsg{margin-top:18px;padding:14px 18px;border-radius:12px;font-size:14px;border:1px solid #e3e7e3;background:#fff;color:#5d6661}
.lpMsg.pending{background:#eef6f1;border-color:#d9e7de;color:#1d4f3f}
.lpMsg.confirmed{background:#eef6f1;border-color:#d9e7de;color:#1d4f3f}
.lpMsg.failed{background:#fdf3e6;border-color:#ecdcbf;color:#8a5a12}
.lpMsg a{color:inherit;font-weight:600}
.lpEmpty{margin-top:22px;padding:22px;background:#fff;border:1px solid #e3e7e3;border-radius:14px;font-size:14px;color:#5d6661}

/* footer */
.lpFoot{margin-top:auto;display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:26px 34px;border-top:1px solid #e6e9e6;font-size:13px;color:#7a827e}
.lpFoot a{color:#5d6661;text-decoration:none}
.lpFoot a:hover{color:#1d4f3f}
.lpFootMail{margin-left:auto;color:#1d4f3f;text-decoration:none}

@media(max-width:860px){
  .lpSections{grid-template-columns:1fr}
  .lpPlans{grid-template-columns:1fr}
}
@media(max-width:720px){
  .lpNav{flex-direction:column;align-items:flex-start;gap:10px;padding:16px 20px}
  .lpHero{padding:40px 20px 20px}
  .lpHero h1{font-size:32px}
  .lpLead{font-size:16px}
  .lpSections,.lpMarketNote,.lpDoc,.lpCheckout,.lpState{margin-left:0;margin-right:0}
  .lpSections{padding:22px 20px 0}
  .lpMarketNote{margin-left:20px;margin-right:20px}
  .lpDoc,.lpCheckout{padding-left:20px;padding-right:20px}
  .lpDoc h1,.lpCheckout h1{font-size:30px}
  .lpFoot{padding:22px 20px}
}