/* ════════════════════════════════════════════════════════════════
 * pricing/pricing.css — 各产品 pricing.html 共享样式
 *
 * 与主页 apps/homepage/index.html **共用同一套 --fb-* 设计令牌**：
 * 同样的 sand / dark 两种 mode、同样的 Spectral + IBM Plex 字体系统、
 * 同样的 1120px 版心与轻量页头页脚。
 *
 * 产品主色由页面覆盖一行即可（值取自 packages/ui/src/tokens.css，
 * 与各页 <meta name="theme-color"> 一致）：
 *   :root{--fb-accent:var(--fb-accent-guardian)}
 * 历史上这里是每页各写一套 --brand（guardian 是暗红 #5B2A2E、poa 是藏青、
 * snt 是青绿、uk-lpa 是墨绿），与产品自身主色和 theme-color 全部不符 ——
 * 现在统一走 --fb-accent-*。
 *
 * ⚠ 令牌块必须与 apps/homepage/index.html 里的 :root 块逐字一致。
 * ⚠ 本文件是**源文件**；各 app 的 public/vendor/ledger-core/pricing/ 是
 *   scripts/sync-shared.js 构建时拷进去的副本（已 gitignore），改副本无效。
 * ════════════════════════════════════════════════════════════════ */

/* ── Tokens — 与主页逐字一致 ── */
:root,:root[data-theme="sand"]{
  --fb-bg:#F7F4EE; --fb-bg-card:#FFFEFC; --fb-ink:#1C1A17; --fb-ink-soft:#5A5853; --fb-ink-faint:#6F6B61;
  --fb-line:rgba(60,50,30,.09); --fb-line-strong:rgba(60,50,30,.14); --fb-brand:#364156; --fb-brand-soft:#E7EAEF;
  --fb-amber:#B5530C; --fb-amber-light:#E09550; --fb-radius-sm:8px; --fb-radius-md:12px; --fb-radius-lg:14px;
  --fb-shadow-sm:0 2px 8px rgba(60,50,30,.06); --fb-shadow-md:0 4px 16px rgba(60,50,30,.08); --fb-shadow-lg:0 12px 40px rgba(60,50,30,.12);
  --fb-max-w:1120px; --fb-font-display:"Spectral","Iowan Old Style",Georgia,serif; --fb-font-body:"IBM Plex Sans",-apple-system,"Segoe UI",sans-serif; --fb-font-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --fb-accent-guardian:#185FA5; --fb-accent-soft-guardian:#E9F1F9; --fb-accent-poa:#534AB7; --fb-accent-soft-poa:#EEEDFE;
  --fb-accent-snt:#0C447C; --fb-accent-soft-snt:#E0EDF7; --fb-accent-uklpa:#2A500C; --fb-accent-soft-uklpa:#EAF3E2;
  --fb-ok:#1F7A4D; --fb-ok-soft:rgba(31,122,77,.10); --fb-ok-line:rgba(31,122,77,.24);
}
:root[data-theme="dark"]{
  --fb-bg:#141619; --fb-bg-card:#1C1F24; --fb-ink:#E9EAE5; --fb-ink-soft:#A9ABA2; --fb-ink-faint:#9A9C92;
  --fb-line:rgba(255,255,255,.10); --fb-line-strong:rgba(255,255,255,.18); --fb-brand:#A3B6D6; --fb-brand-soft:#2C3547; --fb-amber:#E09550;
  --fb-shadow-sm:0 2px 8px rgba(0,0,0,.3); --fb-shadow-md:0 4px 16px rgba(0,0,0,.4); --fb-shadow-lg:0 12px 40px rgba(0,0,0,.5);
  --fb-accent-guardian:#5CA8E8; --fb-accent-soft-guardian:rgba(92,168,232,.12); --fb-accent-poa:#A79FF0; --fb-accent-soft-poa:rgba(167,159,240,.12);
  --fb-accent-snt:#63AEEA; --fb-accent-soft-snt:rgba(99,174,234,.12); --fb-accent-uklpa:#8FC65F; --fb-accent-soft-uklpa:rgba(143,198,95,.12);
  --fb-ok:#7FC79E; --fb-ok-soft:rgba(127,199,158,.12); --fb-ok-line:rgba(127,199,158,.28);
}

/* ── 页内派生令牌 ──
   --fb-accent 由每个 pricing.html 覆盖为对应产品的 --fb-accent-*。
   --fb-on-accent 是「压在主色块上的文字色」：亮色下恒白，暗色下各产品主色
   变浅（guardian #5CA8E8、poa #A79FF0…），必须换成近黑才够对比度 ——
   与 packages/ui/src/tokens.css 的 --fb-on-accent 同一套取值。 */
:root{
  --fb-accent:var(--fb-brand);
  --fb-on-accent:#FFFFFF;
  --fb-accent-soft:var(--fb-brand-soft);
  /* 旧变量别名：统一前的老页面/页内样式仍引用 --paper/--card/--ink 等 */
  --ink:var(--fb-ink); --ink-soft:var(--fb-ink-soft); --ink-faint:var(--fb-ink-faint);
  --ink-dim:var(--fb-ink-faint);
  --paper:var(--fb-bg); --card:var(--fb-bg-card); --line:var(--fb-line); --paper-line:var(--fb-line);
  --brand:var(--fb-accent); --brand-dark:var(--fb-accent); --brand-soft:var(--fb-accent-soft);
  --accent:var(--fb-amber); --radius:var(--fb-radius-sm); --radius-lg:var(--fb-radius-lg);
}
:root[data-theme="dark"]{ --fb-on-accent:#0A1404; }

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--fb-bg);color:var(--fb-ink);font-family:var(--fb-font-body);line-height:1.65;-webkit-font-smoothing:antialiased;font-size:15px}
body{min-height:100vh;transition:background-color .25s,color .25s}
.disp{font-family:var(--fb-font-display);letter-spacing:-.01em}
.mono{font-family:var(--fb-font-mono)}
a{color:var(--fb-accent);text-decoration:none;transition:color .15s}
a:hover{text-decoration:underline}
button{font:inherit;transition:background .15s,color .15s,box-shadow .15s,transform .15s}
button:active{transform:scale(.97)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--fb-amber);outline-offset:3px}

/* ── NAV（几何与主页 .nav 一致）── */
.nav{max-width:var(--fb-max-w);margin:0 auto;padding:22px 32px 0;display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--fb-font-display);font-weight:700;font-size:16px;letter-spacing:-.01em;color:var(--fb-ink)}
.brand .mark{width:30px;height:30px;border-radius:var(--fb-radius-sm);background:var(--fb-accent);color:var(--fb-on-accent);display:flex;align-items:center;justify-content:center;font-size:12px;font-family:var(--fb-font-mono);font-weight:600;flex-shrink:0}
.nav-r{display:flex;align-items:center;gap:26px;font-size:13px}
.nav-link{color:var(--fb-ink-soft)}
.nav-link:hover{color:var(--fb-ink);text-decoration:none}
.fb-theme-toggle{width:32px;height:32px;border-radius:var(--fb-radius-sm);border:1px solid var(--fb-line);background:var(--fb-bg-card);color:var(--fb-ink-soft);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:15px;flex-shrink:0}
.fb-theme-toggle:hover{color:var(--fb-ink);border-color:var(--fb-ink-faint)}
/* 切换图标用内联 SVG，不引 tabler 图标字体 —— 定价页为这一个字形
   多下 245KB 不值得。两枚 SVG 同时存在，靠 data-theme 切换显隐。 */
.fb-theme-toggle svg{width:15px;height:15px;display:block}
.fb-theme-toggle .fb-ico-sun{display:none}
:root[data-theme="dark"] .fb-theme-toggle .fb-ico-sun{display:block}
:root[data-theme="dark"] .fb-theme-toggle .fb-ico-moon{display:none}
.back-to-app{display:inline-flex;align-items:center;gap:6px;padding:8px 15px;border-radius:var(--fb-radius-sm);background:var(--fb-accent);color:var(--fb-on-accent);font-size:13px;font-weight:500;white-space:nowrap}
.back-to-app:hover{filter:brightness(1.1);text-decoration:none;color:var(--fb-on-accent)}

/* ── HERO ── */
.hero{max-width:var(--fb-max-w);margin:0 auto;padding:56px 32px 32px}
.eyebrow{font-family:var(--fb-font-mono);font-size:11px;color:var(--fb-amber);letter-spacing:.04em;margin-bottom:18px;text-transform:uppercase}
.hero h1{font-family:var(--fb-font-display);font-size:38px;font-weight:600;letter-spacing:-.018em;line-height:1.16;margin-bottom:14px;color:var(--fb-ink)}
.hero .sub{font-size:16px;color:var(--fb-ink-soft);max-width:620px;line-height:1.65}
.hero .audience{display:inline-block;margin-top:14px;font-size:12px;color:var(--fb-ink-faint);padding:4px 11px;background:var(--fb-accent-soft);border-radius:99px}

/* ── LICENSE STATUS ── */
#license-status{max-width:var(--fb-max-w);margin:0 auto;padding:0 32px 8px}
.ls-badge{display:inline-block;padding:5px 12px;border-radius:99px;font-size:12px;font-weight:600;margin-bottom:8px}
.ls-trial{background:var(--ls-trial-bg);color:var(--ls-trial-ink)}
.ls-active{background:var(--ls-active-bg);color:var(--ls-active-ink)}
.ls-expired{background:var(--ls-expired-bg);color:var(--ls-expired-ink)}
.ls-new{background:var(--fb-accent-soft);color:var(--fb-accent)}
.ls-invalid{background:var(--ls-expired-bg);color:var(--ls-expired-ink)}
.ls-text{font-size:13px;color:var(--fb-ink-soft);line-height:1.6;max-width:680px}
:root{ --ls-trial-bg:#FAEEDA; --ls-trial-ink:#854F0B; --ls-active-bg:#EAF3DE; --ls-active-ink:#3B6D11; --ls-expired-bg:#FCEBEB; --ls-expired-ink:#A32D2D; }
:root[data-theme="dark"]{ --ls-trial-bg:rgba(224,149,80,.16); --ls-trial-ink:#E09550; --ls-active-bg:rgba(127,199,158,.16); --ls-active-ink:#7FC79E; --ls-expired-bg:rgba(226,120,120,.16); --ls-expired-ink:#E88C8C; }

/* ── PLANS ── */
.plans-wrap{max-width:var(--fb-max-w);margin:0 auto;padding:36px 32px 8px}
.plans-head{text-align:center;margin-bottom:32px}
.plans-head h2{font-family:var(--fb-font-display);font-size:23px;font-weight:600;letter-spacing:-.015em;color:var(--fb-ink);margin-bottom:6px}
.plans-head p{font-size:13px;color:var(--fb-ink-soft)}
#plans{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;align-items:stretch}
.plan{background:var(--fb-bg-card);border:1px solid var(--fb-line);border-radius:var(--fb-radius-lg);padding:22px 22px 24px;display:flex;flex-direction:column;position:relative;transition:border-color .15s,transform .15s}
.plan:hover{border-color:var(--fb-line-strong);transform:translateY(-1px)}
.plan.popular{border:2px solid var(--fb-accent);box-shadow:var(--fb-shadow-md)}
.ribbon{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--fb-accent);color:var(--fb-on-accent);font-size:11px;font-weight:600;padding:3px 12px;border-radius:99px;letter-spacing:.02em;white-space:nowrap}
.plan-head h3{font-family:var(--fb-font-display);font-size:18px;font-weight:600;letter-spacing:-.01em;color:var(--fb-ink);margin-bottom:3px}
.plan-hint{font-size:12px;color:var(--fb-ink-faint);margin-bottom:14px}
.plan-price{display:flex;align-items:baseline;gap:4px;margin-bottom:14px}
.plan-price .amt{font-family:var(--fb-font-display);font-size:32px;font-weight:600;color:var(--fb-ink);letter-spacing:-.015em}
.plan-price .per{font-size:13px;color:var(--fb-ink-faint)}
.plan-features{list-style:none;margin:0 0 18px;padding:0;flex:1}
.plan-features li{font-size:13px;color:var(--fb-ink-soft);padding:4px 0 4px 22px;position:relative;line-height:1.5}
.plan-features li .check{position:absolute;left:0;color:var(--fb-accent);font-weight:600}
.buy-btn{width:100%;padding:11px 16px;border-radius:var(--fb-radius-sm);border:1px solid var(--fb-accent);background:var(--fb-accent);color:var(--fb-on-accent);font-size:14px;font-weight:500;cursor:pointer;font-family:inherit}
.buy-btn:hover:not(:disabled){filter:brightness(1.1)}
.buy-btn:disabled{opacity:.55;cursor:default}
.buy-legal{margin:8px 0 0;font-size:10.5px;color:var(--fb-ink-faint);line-height:1.4;text-align:center}
.buy-legal a{color:var(--fb-ink-faint);text-decoration:underline}

/* ── PRE-LAUNCH NOTE（支付上线前：按钮点击后高亮提示） ── */
.prelaunch-note{max-width:640px;margin:18px auto 0;padding:12px 16px;border:1px solid var(--fb-line);border-radius:var(--fb-radius-sm);background:var(--fb-bg-card);font-size:13px;color:var(--fb-ink-soft);line-height:1.6;opacity:.8;transition:opacity .2s,border-color .2s}
.prelaunch-note[data-show="1"]{opacity:1;border-color:var(--fb-accent)}
.prelaunch-note a{color:var(--fb-accent)}

/* ── PAYPAL FALLBACK ── */
#paypal-button-container{max-width:var(--fb-max-w);margin:0 auto;padding:8px 32px 24px}
.pp-divider{display:flex;align-items:center;gap:14px;margin:18px 0 14px;color:var(--fb-ink-faint);font-size:12px}
.pp-divider::before,.pp-divider::after{content:"";flex:1;height:1px;background:var(--fb-line)}
#pp-btn{max-width:280px;margin:0 auto}

/* ── FAQ（.open class 版，由 pricing-page.js 切换） ── */
.faq{max-width:var(--fb-max-w);margin:0 auto;padding:36px 32px 64px}
.faq-head{margin-bottom:18px}
.faq-head h2{font-family:var(--fb-font-display);font-size:19px;font-weight:600;color:var(--fb-ink)}
.faq-list{display:flex;flex-direction:column;gap:8px;max-width:760px}
.faq-item{background:var(--fb-bg-card);border:1px solid var(--fb-line);border-radius:var(--fb-radius-sm);overflow:hidden}
.faq-q{font-size:14px;font-weight:500;padding:14px 18px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;color:var(--fb-ink);list-style:none}
.faq-q::after{content:"+";font-family:var(--fb-font-mono);font-size:16px;color:var(--fb-ink-faint);transition:transform .2s;flex-shrink:0}
.faq-item.open .faq-q::after{content:"\2212"}
.faq-a{font-size:13.5px;color:var(--fb-ink-soft);line-height:1.7;padding:0 18px;max-height:0;overflow:hidden;transition:max-height .2s,padding .2s}
.faq-item.open .faq-a{padding:0 18px 16px;max-height:420px}

/* ── FOOTER（几何与主页 footer 一致）── */
footer{max-width:var(--fb-max-w);margin:0 auto;padding:26px 32px;border-top:1px solid var(--fb-line);display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:11.5px;color:var(--fb-ink-faint)}
footer a{color:var(--fb-ink-faint)}
footer a:hover{color:var(--fb-ink-soft);text-decoration:none}

/* ── 订阅徽章 / seats 选择器（L0-1C，2026-09-09）── */
.plan-badge{display:inline-block;font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--fb-accent);border:1px solid currentColor;border-radius:99px;padding:2px 10px;margin-bottom:8px}
.seats-control{display:flex;align-items:center;gap:10px;margin:4px 0 12px;font-size:13px;color:var(--fb-ink-soft)}
.seats-control label{font-weight:500;color:var(--fb-ink)}
.seats-control input{width:72px;padding:6px 8px;border:1px solid var(--fb-line);border-radius:var(--fb-radius-sm);font:inherit;font-family:var(--fb-font-mono);background:var(--fb-bg-card);color:var(--fb-ink)}
.seats-control .seats-note{font-size:12px;color:var(--fb-ink-faint)}

/* ── RESPONSIVE：断点与主页一致（960 / 620）── */
@media (max-width:960px){
  .nav,.hero,#license-status,.plans-wrap,#paypal-button-container,.faq,footer{padding-left:28px;padding-right:28px}
  .hero{padding-top:44px}
}
@media (max-width:620px){
  .nav,.hero,#license-status,.plans-wrap,#paypal-button-container,.faq,footer{padding-left:20px;padding-right:20px}
  .hero{padding-top:36px}
  .hero h1{font-size:29px}
  #plans{grid-template-columns:1fr}
  .nav-r{gap:14px}
  .nav-r .nav-link{display:none}
  footer{flex-direction:column;align-items:flex-start;gap:10px;padding-top:22px;padding-bottom:34px}
}