/* ============================================================
   Aftermesh — shared site skin
   LIGHT. Loaded by index + all sub-pages. No build step.

   2026-08 从深色改为浅色，与 /guides/* 的 article.css 同一套底色，
   整站不再有两种明暗观感。变量名（--ink / --ink-soft / --ink-line）
   是深色时期的遗留 —— **它们现在的含义是「页面底 / 卡片底 / 描边」**，
   与"墨色"无关。没有连带改名，是因为 400 多行引用改名会把这次
   换肤的 diff 淹掉；要改名请单独做一次。
   ============================================================ */

:root {
  /* Surfaces（浅） */
  --ink: #f7f9fc;            /* 页面底 —— 与 article.css 的 --bg 同值 */
  --ink-soft: #ffffff;       /* 卡片 / 分区底：浅底上「更软」= 更白 */
  --ink-line: #e8edf4;
  --ink-line-strong: #d7dfea;

  /* Accents — 来自 logo 渐变 (#2563eb → #7c3aed)。
     **深色时期这里是 #4f7cff，并写着「Do not darken it back」——
     那条注释只在深底上成立。** 换成浅底之后必须反过来：#4f7cff 压在
     #f7f9fc 上只有约 3.0:1，正文链接不达标；#2563eb 是 4.9:1。
     这也正好与 article.css 的 --primary 同值，两套皮肤的主色终于一致。 */
  --electric: #2563eb;
  --electric-dim: #1d4ed8;
  --violet: #7c3aed;
  --grad: linear-gradient(135deg, var(--electric), var(--violet));

  /* Foreground on light。
     --fg-muted **不是** article.css 的 #94a3b8：那个值在这套底色上只有
     2.5:1，而本文件用 --fg-muted 渲染卡片正文、FAQ 答案、页脚链接
     ——都是真正要读的字。#64748b measures 4.8:1 on --ink。 */
  --fg: #0f172a;
  --fg-soft: #475569;
  --fg-muted: #64748b;

  --success: #047857;        /* 浅底上 #34d399 几乎看不见 */

  --radius: 14px;
  --radius-lg: 20px;
  --max: 1140px;

  /* 浅底上的阴影必须是「轻的冷灰」而不是纯黑透明 —— 黑透明压在
     #f7f9fc 上会发脏，看起来像没洗干净的屏幕。 */
  --shadow-md: 0 6px 18px rgba(15, 23, 42, 0.07);
  --shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.12);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  color: var(--fg);
  line-height: 1.6;
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--electric); text-decoration: none; }
a:hover { color: var(--electric-dim); }

.container { max-width: var(--max); margin: 0 auto; padding: 0 24px; }

/* ---------- Header ---------- */
header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid var(--ink-line);
}
/* 只写上下内边距。这里曾是 `padding: 16px 0` —— 与 .container 的
   `padding: 0 24px` 同特异度且位置更靠后,整条 shorthand 把左右内边距清成 0,
   于是顶栏贴着屏幕边缘,和页面其它内容差了 24px。别改回 shorthand。 */
.nav {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 16px; padding-bottom: 16px;
}
.logo {
  display: flex; align-items: center; gap: 9px;
  font-weight: 800; font-size: 20px; color: var(--fg);
  letter-spacing: -0.02em;
}
.logo:hover { color: var(--fg); }
.logo-mark { width: 32px; height: 32px; display: block; }

.nav-links { display: flex; gap: 28px; align-items: center; }
.nav-links a { color: var(--fg-muted); font-weight: 500; font-size: 14px; }
.nav-links a:hover { color: var(--fg); }
.nav-links a.btn-primary, .nav-links a.btn-primary:hover { color: #fff; }

.lang-toggle {
  display: inline-flex;
  border: 1px solid var(--ink-line-strong);
  border-radius: 8px; overflow: hidden;
}
.lang-toggle button, .lang-toggle a {
  border: 0; background: transparent; color: var(--fg-muted);
  padding: 6px 10px; font-size: 13px; font-weight: 600;
  cursor: pointer; font-family: inherit; line-height: 1.2;
  text-decoration: none;
}
.lang-toggle button:hover, .lang-toggle a:hover { color: var(--fg); }
.lang-toggle button.active, .lang-toggle a.active { background: var(--electric); color: #fff; }

/* 浅色皮肤下这条提示带用「淡蓝底 + 深字」，而不是深色时期的深蓝底浅字。 */
.zh-hint { background: #eef3ff; color: #1e293b; text-align: center; padding: 9px 40px 9px 14px; font-size: 14px; position: relative; border-bottom: 1px solid var(--ink-line); }
.zh-hint a { color: var(--electric); font-weight: 600; }
/* 关闭叉用 --fg-soft 而不是 --fg-muted：这条提示带自带淡蓝底(#eef3ff)，
   muted 压上去只有 4.28:1，差一点点不达标。 */
.zh-hint button { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: 0; color: var(--fg-soft); font-size: 18px; cursor: pointer; }

@media (max-width: 860px) {
  .nav-links a:not(.btn) { display: none; }
  .nav-links .lang-toggle a { display: inline-block; }
  .nav-links { gap: 10px; }
  .nav { padding-top: 12px; padding-bottom: 12px; }
  .nav-links .btn {
    padding: 8px 14px; font-size: 13px;
    border-radius: 8px; white-space: nowrap;
  }
}

/* 手机顶栏塞不下「品牌字样 + 语言切换 + 登录 + Start free」四组元素 —— 英文
   最宽("Sign in"/"Start free"),375px 上 Start free 会被挤出屏幕外。
   按价值排序砍掉「登录」:页脚有同一个登录入口,而老用户本来也不靠顶栏登录;
   品牌字样(引流页的全部意义)和 Start free(唯一转化点)必须留。

   下面四条是结构性兜底,让它在任何窄屏上都溢出不了,而不是靠像素estimate:
     - .nav gap        —— logo 与右侧永不贴死
     - .nav-links      —— flex-shrink:0,右侧永远拿到完整宽度
     - .logo min-width:0 —— flex 项默认 min-width:auto,这正是 logo 拒绝收缩、
                            把 Start free 顶出屏幕的原因
     - .logo span 省略号 —— 真到 320px 时优雅截断,而不是裁掉右边的按钮 */
@media (max-width: 560px) {
  .nav { gap: 10px; }
  .nav-links { gap: 8px; flex: 0 0 auto; }
  .nav-links .btn-ghost { display: none; }

  .logo { font-size: 17px; gap: 7px; min-width: 0; }
  .logo-mark { width: 28px; height: 28px; flex: 0 0 auto; }
  .logo span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .lang-toggle a { padding: 5px 7px; font-size: 12px; }
  .nav-links .btn { padding: 8px 11px; }
}

/* 只为 320 级窄屏。实测 360 / 375 在上面的尺寸下就已经放得下,不需要这一档 ——
   断点定在 340 而不是 380,免得误伤 iPhone SE2/8 这类 375 宽的常见机型。
   320 上四组元素仍差约 25px,品牌字样会被截成 "After…"。与其截品牌,不如把
   左右留白从 24 收到 16 —— 320 屏上 48px 留白占掉 15% 宽度本来就浪费。
   改的是 .container 而不是只改 .nav,这样顶栏和正文仍然对齐。 */
@media (max-width: 340px) {
  .container { padding: 0 16px; }
  .logo { font-size: 16px; }
  .nav { gap: 8px; }
  .nav-links { gap: 6px; }
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 600; font-size: 14px;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
  border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  font-family: inherit;
}
.btn-primary { background: var(--electric); color: #fff; }
.btn-primary:hover {
  background: var(--electric-dim); color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.28);
}
.btn-ghost {
  color: var(--fg-soft); background: transparent;
  border-color: var(--ink-line-strong);
}
.btn-ghost:hover { color: var(--fg); border-color: var(--fg-muted); }
.btn-lg { padding: 14px 28px; font-size: 16px; }

/* ---------- Sections ---------- */
section { padding: 96px 0; position: relative; }
.section-soft { background: var(--ink-soft); }

.section-head { max-width: 760px; margin: 0 0 56px; }
.section-head.center { text-align: center; margin-left: auto; margin-right: auto; }
.section-tag {
  display: inline-block;
  color: var(--electric);
  font-weight: 600; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.1em;
  margin-bottom: 14px;
}
.section-head h2 {
  font-size: clamp(28px, 4vw, 44px);
  line-height: 1.1; margin: 0 0 16px;
  letter-spacing: -0.03em; font-weight: 800;
}
.section-head p { font-size: 17px; color: var(--fg-soft); margin: 0; }

/* Decorative step numerals (01 / 02 / 03) */
.section-num {
  font-size: 40px; font-weight: 800;
  line-height: 1; margin-bottom: 16px;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  opacity: 0.9;
}

/* ---------- Hero ---------- */
.hero {
  padding: 88px 0 96px;
  /* Contains the hero shot's right-edge bleed so it never spawns a
     horizontal scrollbar. */
  overflow: hidden;
  /* 浅底上的氛围光要更淡：深色时期 0.22/0.16 的蓝紫压在近黑上只是微微发亮，
     同样的透明度压在 #f7f9fc 上会变成两块脏色斑。 */
  background:
    radial-gradient(ellipse 900px 520px at 15% -10%, rgba(37, 99, 235, 0.10), transparent 70%),
    radial-gradient(ellipse 700px 400px at 85% 10%, rgba(124, 58, 237, 0.08), transparent 70%),
    var(--ink);
}
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 48px; align-items: center;
}
/* dashboard.png is 1888px of dense UI. Boxed inside the container it renders
   as an unreadable smudge, so past 1100px it bleeds toward the viewport edge
   and scales up until the panel text is actually legible. */
@media (min-width: 1100px) {
  .hero .shot { margin-right: -130px; }
}
.pill {
  display: inline-block;
  padding: 6px 14px; border-radius: 999px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.22);
  color: var(--electric-dim);
  font-size: 13px; font-weight: 500;
  margin-bottom: 26px;
}
/* Max is 72px, not larger: the headline shares the row with the hero shot, and
   past ~72px "is a stranger." breaks into a lone orphan word. */
.hero h1 {
  font-size: clamp(40px, 5.4vw, 72px);
  line-height: 1.0;
  margin: 0 0 24px;
  letter-spacing: -0.04em;
  font-weight: 800;
}
.hero h1 span {
  background: var(--grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* Chinese has no word boundaries, so the browser breaks anywhere it likes —
   it will happily split 陌|生人 across two lines. keep-all confines breaks to
   punctuation; the smaller max then guarantees each sentence still fits the
   column, since keep-all would otherwise overflow rather than wrap. */
html[lang="zh-CN"] .hero h1 {
  font-size: clamp(32px, 4vw, 52px);
  word-break: keep-all;
  line-height: 1.18;
}
.hero p.lead {
  font-size: 18px; color: var(--fg-soft);
  max-width: 560px; margin: 0 0 36px;
}
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-trust {
  margin-top: 34px; font-size: 13px; color: var(--fg-muted);
  line-height: 1.9;
}
.hero-trust strong { color: var(--fg-soft); font-weight: 600; }
/* 首屏信任徽章,取代了原来的 .hero-rules 合规散文段(那段已移到答谢流程一节)。
   依据:同行首屏逐字抓取显示,GetReviews 首屏同样有 4 条合规信息,但形态是短标签;
   我们此前是两段必须逐字读的散文加一个反问句。条数没减,阅读成本降了。 */
.hero-badges {
  list-style: none; margin: 20px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; max-width: 560px;
}
.hero-badge {
  border: 1px solid var(--ink-line);
  background: var(--ink-soft);
  border-radius: 10px;
  padding: 10px 12px;
}
.hero-badge b { display: block; font-size: 13px; font-weight: 700; color: var(--fg); }
.hero-badge span { display: block; font-size: 12px; line-height: 1.5; color: var(--fg-muted); margin-top: 2px; }
/* 第 4 枚整块可点。用 --electric:它在 --ink 上量过 4.9:1(见文件头注释)。
   hover 往深走而不是往白走 —— 浅底上 #fff 的链接等于消失。 */
.hero-badge a { display: block; color: inherit; }
.hero-badge a b { color: var(--electric); text-decoration: underline; text-underline-offset: 2px; }
.hero-badge a:hover b { color: var(--electric-dim); }
@media (max-width: 620px) {
  .hero-badges { grid-template-columns: 1fr; }
}

/* Screenshot frame。深色时期它的作用是「把浅色 UI 截图垫起来」，浅底之后
   反过来 —— 截图与页面同为浅色，需要的是一圈能看见的边界，而不是发光。
   渐变留一点品牌色，但压到很淡，否则白底上像个彩色相框。 */
.shot {
  position: relative; border-radius: var(--radius-lg);
  padding: 8px;
  background: linear-gradient(160deg, rgba(37,99,235,0.14), rgba(124,58,237,0.08) 45%, rgba(226,232,240,0.9));
  box-shadow: var(--shadow-lg);
}
.shot img {
  display: block; width: 100%; height: auto;
  border-radius: 13px;
  border: 1px solid rgba(15, 23, 42, 0.08);
  cursor: zoom-in;
}
.shot img:focus-visible { outline: 2px solid var(--electric); outline-offset: 4px; }
.shot::after {
  content: ""; position: absolute; inset: 0;
  border-radius: var(--radius-lg); pointer-events: none;
  box-shadow: inset 0 0 60px rgba(37, 99, 235, 0.06);
}

@media (max-width: 900px) {
  .hero { padding: 60px 0 72px; }
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero p.lead { max-width: none; }
}

/* ---------- Cards ---------- */
.grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 20px;
}
/* 资源区专用:4 张卡(1 个工具 + 3 篇指南)。用 grid-3 的话 auto-fit 在 1092px 的
   可用宽度里只排得下 3 列(4×260+3×20=1100 > 1092),第 4 张会孤零零掉到第二行。
   420 的下限保证桌面恰好两列、880 以下自然堆成一列;卡片更宽也正好容得下
   直接取自文章 $meta 的描述(比原来手写的卡片文案长)。 */
.grid-2 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
  gap: 20px;
}
@media (max-width: 480px) { .grid-2 { grid-template-columns: 1fr; } }
/* 卡片描述现在直接取文章的 $meta['description'](按 SEO 写的,150–250 字符,比原来
   手写的卡片文案长且长短不一)。夹到 3 行让四张卡高度一致,而全文仍留在 DOM 里
   —— 用 CSS 夹行而不是在 PHP 里截断:不会截在半个词/半个汉字上,也不用管多字节。 */
.grid-2 .card p {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
}
.card {
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  border-radius: var(--radius);
  padding: 28px;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
  border-color: var(--ink-line-strong);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.card h3 { margin: 0 0 8px; font-size: 17px; letter-spacing: -0.01em; }
.card p { margin: 0; color: var(--fg-muted); font-size: 14px; }

.card-icon {
  width: 44px; height: 44px; border-radius: 11px;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.18);
  display: grid; place-items: center;
  margin-bottom: 18px; color: var(--electric);
  flex-shrink: 0;
}
.card-icon svg { width: 21px; height: 21px; }

/* Full-width closer under the grid — icon beside the text, not above it. */
.card-wide {
  margin-top: 20px;
  display: flex; align-items: flex-start; gap: 18px;
}
.card-wide .card-icon { margin-bottom: 0; }
.card-wide p { max-width: 76ch; }
@media (max-width: 620px) {
  .card-wide { flex-direction: column; gap: 0; }
  .card-wide .card-icon { margin-bottom: 18px; }
}

/* .stat-num（痛点段的渐变大字）随痛点段一起删除，2026-08-12。 */

/* ---------- Resource cards (homepage → guides / tools) ---------- */
.card-link { display: block; color: inherit; }
.card-link:hover { color: inherit; border-color: var(--electric-dim); }
.card-kicker {
  font-size: 12px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--electric); margin-bottom: 10px;
}
.card-link .card-more {
  display: inline-block; margin-top: 14px;
  color: var(--electric); font-weight: 600; font-size: 14px;
}
.card-link:hover .card-more { color: var(--electric-dim); }
.section-more { text-align: center; margin: 28px 0 0; }
.section-more a { color: var(--electric); font-weight: 600; text-decoration: none; }
.section-more a:hover { color: var(--electric-dim); }

/* 分区末尾的一句补充说明（答谢流程的「邀请正文不可编辑」、价格的年付说明）。
   居中、限宽、弱化 —— 它是脚注，不是第四张卡。 */
.section-note {
  max-width: 76ch;
  margin: 24px auto 0;
  text-align: center;
  color: var(--fg-muted);
  font-size: 15px;
}

/* ---------- Pricing ---------- */
/* 只用既有 token，不引入任何新色值：新增 hex 会绕过 theme-contrast 的色板检查。 */
/* 2026-08-12：套餐卡片（.price-card / -name / -amount / -quota）随价格数字一起删除。 */
/* 劝退句。收在段落下方居中，不做成警示条 —— 它是一句实话，不是一个警告。 */
.price-note {
  max-width: 68ch;
  margin: 18px auto 0;
  text-align: center;
  color: var(--fg-soft);
}
.price-cta { text-align: center; margin: 28px 0 0; }

/* ---------- FAQ ---------- */
.faq-grid { max-width: 820px; margin: 0 auto; }
details.faq {
  background: var(--ink-soft);
  border: 1px solid var(--ink-line);
  border-radius: 12px;
  margin-bottom: 12px; overflow: hidden;
}
details.faq[open] { border-color: var(--electric-dim); }
details.faq summary {
  list-style: none; padding: 18px 24px; cursor: pointer;
  font-weight: 600; font-size: 16px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
details.faq summary::-webkit-details-marker { display: none; }
details.faq summary::after {
  content: "+"; font-size: 22px; color: var(--fg-muted);
  flex-shrink: 0; line-height: 1;
}
details.faq[open] summary::after { content: "\2212"; color: var(--electric); }
.faq-answer { padding: 0 24px 20px; color: var(--fg-muted); font-size: 15px; }
.faq-answer p { margin: 0 0 10px; }
.faq-answer p:last-child { margin-bottom: 0; }

/* ---------- CTA ---------- */
.cta-section {
  text-align: center;
  border: 1px solid var(--ink-line-strong);
  border-radius: 24px;
  padding: 64px 24px;
  margin: 0 auto; max-width: var(--max);
  background:
    radial-gradient(ellipse 620px 300px at 50% 0%, rgba(37, 99, 235, 0.08), transparent 70%),
    var(--ink-soft);
}
.cta-section h2 {
  font-size: clamp(28px, 4.4vw, 44px);
  margin: 0 0 14px; letter-spacing: -0.03em; font-weight: 800;
}
.cta-section p { color: var(--fg-soft); font-size: 17px; margin: 0 0 30px; }
.cta-actions { display: flex; justify-content: center; }
.cta-note { font-size: 13px; color: var(--fg-muted); margin-top: 16px; }

/* ---------- Footer ---------- */
footer {
  border-top: 1px solid var(--ink-line);
  padding: 40px 0 34px; margin-top: 40px;
}
.footer-row {
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 20px;
  font-size: 14px; color: var(--fg-muted);
}
.footer-links { display: flex; gap: 22px; flex-wrap: wrap; }
.footer-links a { color: var(--fg-muted); }
.footer-links a:hover { color: var(--fg); }

/* 页脚联系区。⚠️ 同一块结构在 article.css 里还有一份 —— 页脚 partial 被两套皮肤
   共用，只改一边会让指南页的二维码裸奔。改这里必须同步改那边。 */
.footer-contact {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding-bottom: 26px; margin-bottom: 22px;
  border-bottom: 1px solid var(--ink-line);
}
.footer-qrs { display: flex; gap: 14px; }
.footer-qr-item { margin: 0; text-align: center; }
/* padding 不是留白好看：二维码要求四周有「静区」才好识别，而各家生成的图
   自带白边宽窄不一（微信的宽、WhatsApp 的几乎贴边）。统一补一圈。 */
.footer-qr {
  width: 112px; height: 112px; display: block;
  padding: 6px; box-sizing: border-box;
  border: 1px solid var(--ink-line); border-radius: 10px; background: #fff;
}
.footer-qr-cap { margin-top: 6px; font-size: 12px; color: var(--fg-muted); }
.footer-contact-title { font-weight: 600; color: var(--fg); margin-bottom: 6px; }
.footer-contact-line { margin: 0 0 4px; font-size: 14px; color: var(--fg-muted); }
.footer-contact-line a { color: var(--electric); }

/* ---------- Lightbox ---------- */
/* Screenshots are shown scaled-down; this is how the detail is actually
   readable. Built from one shared overlay, not one per image.
   **这一块是全站唯一仍然是深色的地方，而且必须是**：看图时压暗周围是所有
   图片查看器的做法，浅色遮罩会让截图糊在背景里。
   代价是它不能跟着 :root 的前景变量走 —— 2026-08 换浅色皮肤时，关闭按钮的
   `color: var(--fg)` 一夜之间从浅字变成近黑压在深遮罩上，按钮直接看不见。
   所以下面的关闭按钮写死浅色，别改成变量。 */
.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(5, 7, 12, 0.9);
  backdrop-filter: blur(6px);
  display: none; place-items: center;
  padding: 40px 24px;
  cursor: zoom-out;
}
.lightbox.open { display: grid; }
.lightbox img {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: var(--shadow-lg);
}
.lightbox-close {
  position: absolute; top: 16px; right: 20px;
  width: 38px; height: 38px; border-radius: 9px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #fff; font-size: 22px; line-height: 1;
  cursor: pointer; font-family: inherit;
  display: grid; place-items: center;
}
.lightbox-close:hover { background: rgba(255, 255, 255, 0.16); }

/* ---------- Prose (legal / sub-pages) ---------- */
.prose { max-width: 780px; margin: 0 auto; color: var(--fg-soft); }
.prose .back {
  display: inline-block; margin-bottom: 28px;
  color: var(--fg-muted); font-size: 14px;
}
.prose .back:hover { color: var(--fg); }
.prose h1 {
  font-size: clamp(32px, 5vw, 48px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.1;
  margin: 0 0 12px; color: var(--fg);
}
.prose h2 {
  font-size: 22px; margin: 40px 0 12px;
  color: var(--fg); letter-spacing: -0.02em;
}
.prose h3 { font-size: 17px; margin: 28px 0 8px; color: var(--fg); }
.prose p, .prose li { font-size: 15px; }
.prose ul, .prose ol { padding-left: 22px; }
.prose li { margin-bottom: 6px; }
.prose .updated { color: var(--fg-muted); font-size: 14px; margin-bottom: 40px; }
.prose table { width: 100%; border-collapse: collapse; margin: 16px 0; }
.prose th, .prose td {
  border: 1px solid var(--ink-line);
  padding: 10px 12px; text-align: left; font-size: 14px;
}
.prose th { background: var(--ink-soft); color: var(--fg); }