/* llcprice v2 —— Figma a1zKH588tZQ3tbgj6TCMs1 像素复刻设计系统（doc/design/2026-11-03/v2/ 五屏为唯一视觉基准） */
@font-face { font-family:'Inter'; font-style:normal; font-weight:400; font-display:swap; src:url('/fonts/inter-latin-400-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:500; font-display:swap; src:url('/fonts/inter-latin-500-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:600; font-display:swap; src:url('/fonts/inter-latin-600-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:700; font-display:swap; src:url('/fonts/inter-latin-700-normal.woff2') format('woff2'); }
@font-face { font-family:'Inter'; font-style:normal; font-weight:800; font-display:swap; src:url('/fonts/inter-latin-800-normal.woff2') format('woff2'); }
:root {
  --ink:#0A0F1E; --ink-soft:#161D32;
  --body:#0B1220; --sub:#5A6478; --faint:#8A93A6; --hero-sub:#A7B0C4;
  --brand:#3D63FF; --brand-deep:#2B4BD8; --violet:#7C5CFF;
  --green:#0E9F6E; --green-bg:#E4F5EF;
  --border:#E8EBF3; --alt:#F6F7FB; --zebra:#FAFBFE;
  --radius-s:12px; --radius-m:16px; --radius-l:20px;
  --shadow-card:0 1px 2px rgba(16,24,40,.04),0 12px 32px rgba(16,24,40,.08);
  --shadow-pop:0 24px 50px rgba(23,32,56,.16);
  --wrap:1248px;
  --grad:linear-gradient(90deg,var(--brand),var(--violet));
  --grad-deep:linear-gradient(100deg,var(--brand-deep),var(--violet));
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; color:var(--body); background:#fff; line-height:1.55; font-size:16px; }
img,svg { vertical-align:middle; }
a { color:var(--brand); text-decoration:none; }
a:hover { text-decoration:underline; }
.wrap { max-width:var(--wrap); margin:0 auto; padding:0 24px; }
article.page { max-width:880px; margin:0 auto; padding:3rem 24px 0; }
main { display:block; }
h1,h2,h3 { color:var(--body); letter-spacing:-.02em; line-height:1.15; margin:0 0 .5em; }
h1 { font-size:2.5rem; font-weight:800; }
h2 { font-size:1.9rem; font-weight:800; }
.page h2 { font-size:1.45rem; margin-top:2.2em; }
.lede { font-size:1.08rem; color:var(--sub); max-width:44em; }
section { margin:0; }
.num { text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; }

/* ===== 按钮 / 徽章 / chips ===== */
.btn { display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 1.6rem; border-radius:999px; font-weight:600; font-size:1rem; text-decoration:none; border:0; cursor:pointer; }
.btn:hover { text-decoration:none; }
.btn-primary { background:var(--grad); color:#fff; box-shadow:0 10px 26px rgba(61,99,255,.45); }
.btn-ghost { background:transparent; color:#fff; border:1.4px solid rgba(255,255,255,.28); }
.btn-white { display:inline-block; padding:.95rem 1.9rem; border-radius:999px; background:#fff; color:var(--ink); font-weight:700; font-size:.95rem; flex:none; }
.btn-white:hover { text-decoration:none; box-shadow:0 10px 24px rgba(0,0,0,.25); }
.btn-dark { background:var(--ink); color:#fff; }
.chip { display:inline-flex; align-items:center; gap:.5rem; padding:.45rem 1.1rem; border-radius:999px; font-size:.84rem; font-weight:500; }
.chip-verified { background:var(--ink-soft); color:var(--hero-sub); border:1px solid rgba(255,255,255,.14); }
.chip-verified .dot { width:10px; height:10px; border-radius:5px; background:var(--green); }
.chip-green { background:var(--green-bg); color:var(--green); font-weight:600; }
.pill { display:inline-block; padding:.4rem 1rem; border-radius:999px; background:rgba(255,255,255,.08); color:var(--hero-sub); font-size:.8rem; font-weight:600; margin:0 .4rem .4rem 0; }

/* ===== 导航 ===== */
.site-header { position:relative; z-index:5; }
.site-header.on-dark { position:absolute; top:0; left:0; right:0; }
.site-header.on-light { background:#fff; border-bottom:1px solid var(--border); }
.site-header .wrap { display:flex; align-items:center; gap:2.2rem; padding-top:2rem; padding-bottom:2rem; }
.brand { display:inline-flex; align-items:center; gap:.7rem; font-weight:700; font-size:1.15rem; color:var(--body); letter-spacing:-.01em; }
.brand:hover { text-decoration:none; }
.brand-mark { width:32px; height:32px; border-radius:9px; background:var(--grad); display:inline-flex; align-items:center; justify-content:center; color:#fff; flex:none; }
.on-dark .brand { color:#fff; }
.site-nav { display:flex; gap:1.9rem; margin-left:auto; align-items:center; font-size:.92rem; }
.site-nav a { color:var(--sub); font-weight:500; }
.on-dark .site-nav a { color:var(--hero-sub); }
.site-nav a[aria-current] { color:var(--brand); font-weight:600; }
.on-dark .site-nav a[aria-current] { color:#fff; }
.nav-cta { background:#fff; color:var(--ink) !important; padding:.55rem 1.4rem; border-radius:999px; font-weight:600; }
.nav-cta:hover { text-decoration:none; }

/* ===== Hero（首页深色） ===== */
.hero { position:relative; background:var(--ink); color:#fff; overflow:hidden; padding:6.5rem 0 5.9rem; }
.hero::before { content:""; position:absolute; inset:0; background:
  radial-gradient(560px 560px at 82% -8%, rgba(61,99,255,.22), transparent 70%),
  radial-gradient(460px 460px at -4% 55%, rgba(124,92,255,.14), transparent 70%); }
.hero::after { content:""; position:absolute; inset:0; background:repeating-linear-gradient(to bottom, transparent 0 71px, rgba(255,255,255,.045) 71px 72px); }
.hero .wrap { position:relative; z-index:2; display:grid; grid-template-columns:minmax(0,1fr) 548px; gap:3rem; }
.hero h1 { color:#fff; font-size:3.4rem; font-weight:800; max-width:11em; }
.hero .lede { color:var(--hero-sub); font-size:1.1rem; max-width:33em; margin:1.4rem 0 3.2rem; }
.hero-trust { margin-top:3.9rem; color:#fff; font-size:.9rem; font-weight:600; display:flex; gap:1.6rem; align-items:center; flex-wrap:wrap; }
.hero-trust .sep { width:4px; height:4px; border-radius:2px; background:var(--faint); }
.hero-cards { display:flex; flex-direction:row; align-items:flex-start; gap:0; padding-top:3.4rem; }
.hero-cards .glass-card { width:266px; flex:none; }
.hero-cards .glass-card + .glass-card { margin-left:-40px; margin-top:122px; }
.glass-card { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius-m); padding:.95rem 1.1rem; backdrop-filter:blur(8px); }
.glass-card .k { font-size:.62rem; letter-spacing:.12em; font-weight:700; color:var(--hero-sub); margin:0 0 .35rem; }
.glass-card .big { font-size:1.55rem; font-weight:800; letter-spacing:-.03em; color:#fff; margin:0; }
.glass-card .big small { font-size:.78rem; font-weight:400; color:var(--hero-sub); letter-spacing:0; margin-left:.5rem; }
.glass-card .note { margin:.45rem 0 0; font-size:.72rem; font-weight:600; }
.glass-card .note.ok { color:#3ddc97; }

/* ===== 计算器卡（首页压 hero / 页内整卡） ===== */
.calc-card { position:relative; z-index:3; background:#fff; border-radius:var(--radius-l); box-shadow:var(--shadow-pop); padding:1.5rem 1.8rem; }
.home-calc { margin-top:-5rem; }
.calc-grid { display:grid; grid-template-columns:500px 1px 1fr; gap:1.5rem; }
.calc-head { display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap; }
.calc-head h2 { margin:0; font-size:1.2rem; }
.calc-sub { color:var(--sub); margin:.4rem 0 1rem; font-size:.9rem; }
.calc label.lbl { display:block; font-size:.7rem; letter-spacing:.1em; font-weight:700; color:var(--faint); margin:.7rem 0 .4rem; }
.calc select { width:100%; padding:.75rem 1rem; border-radius:var(--radius-s); border:1.2px solid var(--border); background:var(--alt); font-size:.95rem; font-weight:600; color:var(--body); appearance:none; }
.calc-check { display:flex; gap:.9rem; align-items:flex-start; margin-top:.9rem; }
.calc-check input { width:22px; height:22px; accent-color:var(--brand); margin-top:2px; flex:none; }
.calc-check .t { font-weight:600; font-size:.9rem; }
.calc-check .n { font-size:.78rem; color:var(--faint); }
.calc-fine { margin-top:.7rem; font-size:.74rem; color:var(--faint); max-width:26em; }
.calc-divider { width:1px; background:var(--border); }
/* 计算器页专用：设计稿面板 592 宽、4rem 大数字 */
.calc-page .calc-grid { grid-template-columns:518px 1px 592px; gap:0 1.9rem; }
.calc-page .calc-result { padding:2.5rem; }
.calc-page .calc-price { font-size:4rem; }
.calc-page .calc-rows { margin-top:1.6rem; }
.calc-page .calc-rows .row { padding:.55rem 0; font-size:.92rem; }
.calc-page .calc-total-row { margin-top:.7rem; padding-top:.9rem; font-size:1.05rem; }
.calc-page .calc-src { margin-top:1.4rem; }
.calc-page .calc-cheapest { margin-top:1.2rem; padding-top:1rem; }
.calc-page .calc-check { margin-top:1.3rem; }
.calc-page .calc select { padding:1rem 1.2rem; font-size:1.05rem; }
.calc-page .calc label.lbl { margin:1.4rem 0 .5rem; }
.calc-result { border-radius:var(--radius-m); padding:1.35rem 1.5rem; position:relative; overflow:hidden; }
.calc-result.on-dark { background:var(--ink); color:#fff; }
.calc-result.on-dark::before { content:""; position:absolute; inset:0; background:radial-gradient(380px 380px at 92% -12%, rgba(61,99,255,.28), transparent 70%); }
.calc-result > * { position:relative; }
.calc-result .k { font-size:.7rem; letter-spacing:.12em; font-weight:700; color:var(--faint); margin:0 0 .4rem; }
.calc-result.on-dark .k { color:var(--hero-sub); }
.calc-price { font-size:2.2rem; font-weight:800; letter-spacing:-.04em; color:var(--brand); margin:0; }
.calc-result.on-dark .calc-price { color:#fff; }
.calc-price small { font-size:.82rem; font-weight:400; letter-spacing:0; margin-left:1rem; }
.calc-result.on-dark .calc-price small { color:var(--hero-sub); }
.calc-rows { margin-top:.7rem; }
.calc-rows .row { display:flex; justify-content:space-between; padding:.32rem 0; font-size:.88rem; color:var(--sub); }
.calc-rows .row b { color:var(--body); font-weight:600; }
.calc-result.on-dark .calc-rows .row { color:var(--hero-sub); }
.calc-result.on-dark .calc-rows .row b { color:#fff; }
.calc-total-row { display:flex; justify-content:space-between; border-top:1px solid var(--border); margin-top:.4rem; padding-top:.5rem; font-weight:700; font-size:1rem; }
.calc-result.on-dark .calc-total-row { border-color:rgba(255,255,255,.14); color:#fff; }
.calc-src { margin-top:.7rem; font-size:.74rem; color:var(--faint); }
.calc-cheapest { margin-top:.7rem; padding-top:.6rem; border-top:1px solid rgba(255,255,255,.14); font-size:.78rem; color:var(--hero-sub); }
.calc-cheapest b { color:#fff; }
.calc-cheapest a { color:#9EBAFF; font-weight:600; }

/* ===== 数据表 ===== */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; }
.fee-table { border-collapse:collapse; width:100%; font-size:.93rem; }
.fee-table th { text-align:left; font-size:.72rem; letter-spacing:.08em; color:var(--faint); font-weight:700; padding:.9rem 1.4rem; background:var(--zebra); }
.fee-table td { text-align:left; padding:.95rem 1.4rem; border-bottom:1px solid var(--border); vertical-align:top; color:var(--sub); }
.fee-table--sm th { padding:.85rem 1.4rem; }
.fee-table--sm td { padding:1.05rem 1.4rem; font-size:.9rem; line-height:1.45; }
.fee-table td:first-child { font-weight:600; color:var(--body); }
.fee-table tbody tr:nth-child(even) { background:var(--zebra); }
.fee-table .flag { color:var(--brand); font-weight:700; }
.table-card { background:#fff; border-radius:var(--radius-m); box-shadow:var(--shadow-card); overflow:hidden; }
.table-note { font-size:.8rem; color:var(--faint); margin:1.2rem .2rem 0; }

/* ===== 区块 ===== */
.section-alt { background:var(--alt); }
.section-pad { padding:4.4rem 0; }
.sec-head { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; flex-wrap:wrap; margin-bottom:1.6rem; }
.sec-head h2 { margin:0; }
.sec-head .sub { color:var(--sub); margin:.4rem 0 0; }
.search-pill { display:flex; align-items:center; gap:.6rem; background:#fff; border:1.2px solid var(--border); border-radius:999px; padding:.7rem 1.4rem; color:var(--faint); min-width:280px; font-size:.9rem; }
.search-pill input { border:0; outline:0; font:inherit; background:transparent; width:100%; color:var(--body); }

/* ===== 三卡 / 编号卡 / 误区卡 ===== */
.card3 { display:grid; grid-template-columns:repeat(3,1fr); gap:1.2rem; }
.info-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius-m); box-shadow:var(--shadow-card); padding:1.6rem; }
.info-card .icon-box { width:44px; height:44px; border-radius:var(--radius-s); display:flex; align-items:center; justify-content:center; margin-bottom:.9rem; }
.info-card h3 { font-size:1.05rem; margin:0 0 .5rem; }
.info-card p { font-size:.82rem; color:var(--sub); margin:0 0 .8rem; }
.price-chip { display:inline-block; background:var(--alt); border-radius:999px; padding:.35rem .9rem; font-weight:800; font-size:.82rem; color:var(--body); }
.price-chip + span { font-size:.78rem; color:var(--faint); margin-left:.6rem; }
.num-card .step { font-size:.95rem; font-weight:800; color:var(--brand); margin:0 0 .5rem; }

.myth-card { background:#fff; border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-card); padding:1.6rem 2rem 1.3rem; margin-bottom:1.4rem; display:grid; grid-template-columns:52px 1fr; gap:1.6rem; }
.myth-card .num { width:52px; height:52px; border-radius:14px; background:var(--alt); color:var(--brand); font-size:1.1rem; font-weight:800; display:flex; align-items:center; justify-content:center; }
.myth-card h2 { font-size:1.3rem; margin:0 0 .7rem; }
.myth-card p { color:var(--sub); margin:0 0 .9rem; max-width:56em; }
.myth-card .myth-link { margin:0; font-weight:600; font-size:.9rem; }

/* ===== CTA 渐变带 ===== */
.cta-band { position:relative; border-radius:24px; background:var(--grad-deep); color:#fff; padding:3.2rem 2.8rem; box-shadow:0 18px 40px rgba(61,99,255,.35); overflow:hidden; }
.cta-band::after { content:""; position:absolute; inset:0; background:radial-gradient(500px 300px at 90% 0%, rgba(255,255,255,.14), transparent 70%); }
.cta-band h2 { color:#fff; font-size:1.9rem; margin:0 0 .7rem; }
.cta-band p { color:rgba(235,238,255,.85); margin:0; max-width:40em; }
.cta-band .btn { position:relative; z-index:2; }

/* ===== 州页 ===== */
.state-hero { position:relative; background:var(--ink); color:#fff; border-radius:20px; overflow:hidden; padding:2.2rem 2.6rem; box-shadow:0 20px 44px rgba(23,32,56,.18); }
.state-hero::before { content:""; position:absolute; inset:0; background:
  radial-gradient(360px 360px at 100% -20%, rgba(61,99,255,.25), transparent 70%),
  radial-gradient(300px 300px at 0% 120%, rgba(124,92,255,.15), transparent 70%); }
.state-hero > * { position:relative; }
.state-hero .k { font-size:.74rem; letter-spacing:.14em; font-weight:700; color:var(--hero-sub); margin:0 0 .5rem; }
.state-hero h1 { color:#fff; font-size:2.5rem; margin:0 0 .7rem; }
.state-hero .price { font-size:5.4rem; font-weight:800; letter-spacing:-.05em; line-height:1; margin:0; }
.state-hero .price small { font-size:1rem; font-weight:400; letter-spacing:0; color:var(--hero-sub); margin-left:1rem; }
.state-hero .pills { margin-top:1rem; }
.state-hero .verify { margin-top:.8rem; display:inline-block; background:rgba(33,92,71,.6); color:#A6F2D5; border-radius:999px; padding:.4rem 1rem; font-size:.75rem; font-weight:600; }
.state-grid { display:grid; grid-template-columns:minmax(0,1fr) 408px; gap:3rem; margin-top:2.4rem; }
.state-body h2 { display:flex; gap:1rem; align-items:baseline; font-size:1.35rem; margin:2.4rem 0 .8rem; }
.state-body h2 .n { order:-1; font-size:.9rem; font-weight:800; color:var(--brand); flex:none; }
.state-body p { color:var(--sub); max-width:52em; }
.side-card { background:var(--alt); border:1px solid var(--border); border-radius:var(--radius-m); padding:1.4rem 1.6rem; margin-bottom:1.6rem; }
.side-card.dark { background:var(--ink); color:#fff; border:0; }
.side-card h2, .side-card h3 { font-size:1.1rem; margin:0 0 1rem; }
.side-card.dark h3 { color:#fff; }
.side-card ol { margin:0; padding:0; list-style:none; counter-reset:s; }
.side-card ol li { counter-increment:s; position:relative; padding:0 0 1.1rem 2.4rem; color:var(--sub); font-size:.9rem; }
.side-card ol li::before { content:counter(s); position:absolute; left:0; top:0; width:26px; height:26px; border-radius:999px; border:1.4px solid var(--brand); color:var(--brand); font-weight:700; font-size:.75rem; display:flex; align-items:center; justify-content:center; background:#fff; }
.side-card table { width:100%; font-size:.84rem; border-collapse:collapse; }
.side-card td { padding:.38rem 0; color:var(--sub); }
.side-card td:last-child { text-align:right; font-weight:600; color:var(--body); white-space:nowrap; }
.side-card.dark td { color:var(--hero-sub); }
.side-card.dark td:last-child { color:#fff; }
.side-card .fine { font-size:.85rem; color:var(--green); font-weight:600; margin:.8rem 0 0; }
.side-card .more { margin:1rem 0 0; font-weight:600; font-size:.9rem; }

/* ===== 费率表页工具条 ===== */
.toolbar { display:flex; align-items:center; gap:1rem; background:#fff; border:1px solid var(--border); border-radius:14px; padding:.8rem 1.1rem; flex-wrap:wrap; margin-bottom:1.6rem; }
.toolbar .pills { display:flex; gap:.6rem; flex-wrap:wrap; }
.toolbar .pill-f { border:0; background:var(--alt); color:var(--sub); padding:.55rem 1.1rem; border-radius:999px; font-size:.85rem; font-weight:500; cursor:pointer; font-family:inherit; }
.toolbar .pill-f.on { background:var(--ink); color:#fff; }
.toolbar .sort { margin-left:auto; font-size:.85rem; color:var(--sub); font-weight:500; }

/* ===== 来源 / 脚注 / related ===== */
.verified-note, .flag-note, .aff-note, .calc-note { font-size:.85rem; color:var(--faint); }
.src-list { font-size:.9rem; color:var(--sub); padding-left:1.2rem; }
.src-meta { color:var(--faint); font-size:.78rem; }
.flag { color:var(--brand); font-weight:700; }
.related { border-top:1px solid var(--border); margin-top:3.5rem; padding-top:2rem; }
.related h2 { font-size:1.2rem; }
.related ul { padding-left:1.2rem; columns:2; max-width:46em; }
.myth, .two-schools, .aff-cta { margin:1.5rem 0; }
.aff-slot { display:inline-block; background:var(--grad); color:#fff; padding:.6rem 1.2rem; border-radius:10px; text-decoration:none; margin:.25rem 0; font-weight:600; font-size:.92rem; }
.aff-slot:hover { text-decoration:none; box-shadow:0 8px 20px rgba(61,99,255,.35); }

/* ===== 页脚 ===== */
.site-footer { background:var(--ink); color:var(--hero-sub); margin-top:3rem; padding:3rem 0 3.2rem; font-size:.9rem; }
.site-footer .cols { display:grid; grid-template-columns:2fr 1fr 1fr; gap:3rem; }
.site-footer h2 { color:#fff; font-size:1.15rem; margin:0 0 1rem; display:flex; align-items:center; gap:.7rem; }
.site-footer .brand-mark { width:32px; height:32px; }
.site-footer p { max-width:26em; line-height:1.6; }
.site-footer .k { font-size:.72rem; letter-spacing:.1em; font-weight:700; color:var(--faint); margin:0 0 .8rem; }
.site-footer ul { list-style:none; margin:0; padding:0; }
.site-footer li { margin-bottom:.75rem; }
.site-footer a { color:var(--hero-sub); }
.site-footer a:hover { color:#fff; }
.site-footer .bar { border-top:1px solid rgba(255,255,255,.1); margin-top:3rem; padding-top:1.6rem; display:flex; justify-content:space-between; gap:2rem; flex-wrap:wrap; font-size:.82rem; color:var(--faint); }

/* ===== 响应式 ===== */
@media (max-width:1000px) {
  .hero .wrap { grid-template-columns:1fr; }
  .hero-cards { flex-direction:row; padding-top:0; }
  .calc-grid, .state-grid { grid-template-columns:1fr; }
  .calc-divider { display:none; }
  .card3 { grid-template-columns:1fr; }
  .site-footer .cols { grid-template-columns:1fr; }
  .site-nav { display:none; }
  h1 { font-size:2rem; }
  .hero { padding-top:6rem; }
  .related ul { columns:1; }
}