/* SeeFund content-site shared styles (guides & future static pages).
   Keeps the top bar, navigation and footer visually consistent with the app. */
:root{--ink:#1c2430;--mut:#5f6b7a;--line:#e5e9ef;--teal:#0f766e;--teal-d:#0b4f4a;--soft:#e7f5f3;
  --bg:#f6f8fa;--card:#fff;--gold:#d49a1f}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.75 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;color:var(--ink);background:var(--bg)}
a{color:var(--teal)}
.wrap{max-width:1240px;margin:0 auto;padding:16px 20px 60px}
/* ---- 顶栏与导航 ----
   ⚠️ 2026-09-16：这里原来有一份**手写副本**（.topbar/.brand/.topnav…），注释还写着
   "matches the app's topbar/topnav" —— 但它早就不是了：应用页是
   `Start Here|Rank|Explore|Backtest|Price|Learn ▾`（1240px 一行），内容页被抄成
   `…Rankings…Saved…Pricing…Guides|Tools`（720px 挤两行）。手写副本 = 必然漂移。
   现在这部分样式统一来自 css/nav.css（由 tools/split_pages.py 从应用的 <style> 抽取），
   本文件不再定义任何导航样式 —— 只留内容站自己的正文排版。 */
/* ---- 页面卡片（应用的 .screen 同款：白底 / 1px 边 / 14 圆角 / 同款阴影）----
   为什么这么改（用户 2026-09-16：「文章页和计算器页的宽度感觉都很别扭，需要跟主页面风格保持一致」）：
   实测应用页 header 与正文都在 x=32·宽 1200；内容页 header 1200 但正文 720 居中（x=272·宽 684）——
   左缘不齐 + 正文只有一半宽，看起来像浮在页面中央的岛。现在：容器与应用同几何（左缘天然对齐），
   正文进同一款卡片；文章的正文列保持可读行宽（~75 字符），右侧的宽度交给**本文目录**。 */
.page{background:var(--card);border:1px solid var(--line);border-radius:14px;
  padding:26px 28px;box-shadow:0 6px 18px rgba(20,40,60,.05)}
/* 文章/工具页：卡片与应用屏等宽（通栏 1200），**正文直接拉满卡片宽度**。
   用户 2026-09-16 连说三次才对齐口径：
     v1 把文末 CTA/Related 搬到右上角做 sticky 栏 → “右上角有个卡片，没看懂”
     v2 撑成单栏 820 → “卡片去掉了，但右侧空间还是空白”
     v3 右侧加“本文目录” → “我不想让你在右边加别的东西，我的意思是直接把文字宽度扩展过去”
   结论：**不要往右边添东西，也不要用“可读行宽”当理由留白** —— 正文就撑满。
   （已知代价：1280 屏下正文约 1144px、行宽约 150 字符，远超常规 45–75 的舒适区；
     若要收窄，就整体收窄 .wrap 容器而不是在卡片里留一块空白 —— 口径已记入仓库备忘。） */
/* 文章页宽度拉满（2026-09-16 用户口径，未变）。内层卡片的事见文件末尾的"层次口径"。 */
.page--article{max-width:none}
/* 索引页：简介跨全栏，卡片自适应网格（同应用 .grid3 的观感）
   ⚠️ 只有 .card 是网格单元，其余一律跨栏 —— 原来逐个列元素白名单，漏了 h2，
      于是小节标题（如 guides 页的 "Interactive calculators"）掉进一个 320px 单元格，
      孤零零飘在卡片之间（用户截图指出）。用 :not(.card) 就不会再漏。 */
.page--index> .prose{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  gap:14px;align-items:start}
.page--index> .prose> :not(.card){grid-column:1/-1}
.page--index> .prose> .card{margin:0;height:100%}
/* 法务页（terms / privacy）与文章页同一宽度，不再需要分区特例 */
/* 计算器索引只有 4 张卡：3 列会排成 3+1（第二行孤零零一张），改 2 列正好 2×2，卡片也更宽。
   ⚠️ 必须写 `min(430px,100%)`：直接写 minmax(430px,1fr) 时，窄屏（390 手机上卡片只有 351px）
   会真的开出一列 430px → 横向溢出 67px（自己扫出来的）。所有 auto-fit 网格都要带这个兜底。 */
body.sec-calc .page--index> .prose{grid-template-columns:repeat(auto-fit,minmax(min(430px,100%),1fr))}
/* 窄屏：文章卡片不再限宽，右栏这类并排结构已在上面统一处理 */
@media (max-width:900px){
  .page--index> .prose{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  /* 手机本来就窄，别把两侧用内边距吃掉：390 屏上原来是 20+28 两侧各 48px（正文只剩 279px）。
     顶栏的 .sitebar 内边距在 nav.css（同一份来源），这里只管内容区。 */
  .wrap{padding:12px 12px 40px}
  .page{padding:16px 14px;border-radius:12px}
}
@media (max-width:400px){
  /* 超窄屏：表格是最容易顶出横向滚动的东西（实测 320px 下 3 列表格溢出 3px —— 单元格 padding
     + 长词不折行）。收 padding 并允许长词折行，保持表格结构不动。 */
  .prose table{font-size:13px}
  .prose td,.prose th{padding:6px 7px;overflow-wrap:anywhere}
}
/* ---- article ---- */
.art{max-width:720px;margin:0 auto}
h1{font-size:28px;line-height:1.25;margin:6px 0 6px}
.meta{color:var(--mut);font-size:13px;margin:0 0 16px}
h2{font-size:20px;margin:26px 0 8px}
h3{font-size:16px;margin:18px 0 4px}
table{border-collapse:collapse;width:100%;margin:12px 0;font-size:14px}
td,th{border:1px solid var(--line);padding:7px 10px;text-align:left;vertical-align:top}
th{background:#eef3f6}
.note{background:#fdf6e3;border:1px solid #f0dca8;border-radius:10px;padding:10px 14px;font-size:14px;margin:12px 0}
.cta{margin:24px 0 6px;background:var(--soft);border:1px solid #b9e2d6;border-radius:12px;padding:14px 16px;font-size:15px}
.cta a{color:var(--teal-d);font-weight:700;text-decoration:none}
.rel{margin-top:10px;font-size:14px}
/* ---- guides index ---- */
.sub{color:var(--mut);font-size:15.5px}
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 18px;margin:10px 0}
.card a.title{font-size:17px;font-weight:700;color:var(--ink);text-decoration:none}
.card a.title:hover{color:var(--teal)}
.card .d{color:var(--mut);font-size:13.5px;margin:2px 0 0}
.tag{display:inline-block;font-size:11.5px;background:var(--soft);color:var(--teal-d);border-radius:99px;padding:2px 10px;margin-bottom:6px}
/* ---- footer (matches the app's footer + disclaimer) ---- */
.footbar{margin-top:30px;border-top:1px solid var(--line);padding-top:14px;font-size:12.5px;color:var(--mut);text-align:center;line-height:1.8}
.footbar a{color:var(--mut);text-decoration:underline}
.footnote{color:#94a3b8;font-size:11px;margin-top:4px}
/* ---- interactive calculators (seo/tools) ---- */
.calc{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;margin:16px 0}
.calc .row{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:10px 0}
.calc label{font-size:13px;color:var(--mut);min-width:210px}
.calc label .hint{display:block;color:#94a3b8;font-size:11px}
.calc input[type=number]{width:120px;padding:7px 9px;border:1px solid var(--line);border-radius:8px;font-size:14px;background:#fff;color:var(--ink)}
.calc input[type=range]{flex:1;min-width:180px;accent-color:var(--teal)}
.calc output{display:block;font-size:13px;color:var(--mut);margin-top:2px}
.res{background:var(--soft);border:1px solid #b9e2d6;border-radius:12px;padding:13px 16px;margin:16px 0 4px;font-size:15px;line-height:1.7}
.res b{color:var(--teal-d)}
.res .big{font-size:22px;font-weight:800;color:var(--teal-d)}
.calc .note{margin:12px 0 2px}
.trow{display:flex;justify-content:space-between;border-top:1px solid var(--line);padding:7px 2px;font-size:14px}

/* ===== 内容站层次口径（2026-09-20，第三轮定稿）=====
   用户原话：「guide 页和计算器页，我之前只让你去掉**内层**灰色宽边框，你怎么把**外层**边框去掉了，
   变得难看了」。
   前两轮我搞反了：第一轮把文章页的 `.page` 拉平，用户随即问"为什么服务器版还能看到"（他看的是索引页），
   第二轮索性把所有页的 `.page` 都拉平 —— 结果正文裸在灰底上、只有工具面板有框，更难看了。
   现在：**外层 `.page` 保留**（与应用 .screen 同款的白底/1px 边/14 圆角/阴影），
   去的是**内层重复的那圈灰框**：
     · .calc（计算器工具面板）—— 它原来在白色页卡里又套一层白底+灰边（双重框）
     · .card（guides / calculators 索引里的条目）—— 同上
   两者改为"白卡片里的浅色块"（浅灰底、无边框）→ 一页只留一个框，仍能分层。
   ⚠️ 语义提示块（.note 黄 / .cta 青 / .res 青）**不动**：它们是"提示/结果"，不是容器。 */
.calc{background:#f8fafc;border:0;border-radius:12px;padding:14px 16px;margin:16px 0}
.card{background:#f8fafc;border:0;border-radius:12px;padding:16px 18px;margin:10px 0}
.trow b{color:var(--ink)}