/* ============================================================================
 * PhotoCleared — 共享样式
 * ----------------------------------------------------------------------------
 * 结构参照 pixid.studio，配色从绿色系换成藏蓝系。
 *
 * 原站绿 → 本站藏蓝 的对应关系：
 *   #047857 emerald-700  →  #1E3A8A blue-900   （主色，CTA 按钮、价格）
 *   #0B5E3E 深绿         →  #172554 blue-950   （大 CTA 卡底、hover）
 *   #10B981 emerald-500  →  #3B82F6 blue-500   （亮点、图标）
 *   #ECFDF5 emerald-50   →  #EFF6FF blue-50    （浅底、表格高亮行）
 *
 * 设计原则（跟原站一致）：
 *   1. 大量留白，内容宽度 1120px
 *   2. 正文黑/灰，颜色只用在「该看的地方」：CTA、价格、通过状态
 *   3. 信息用表格，不用卡片堆叠
 *   4. 首页几乎不用照片 —— 只有 logo 和一处示例图占位
 * ========================================================================== */

:root {
  --navy: #1e3a8a;
  --navy-dark: #172554;
  --navy-mid: #1d4ed8;
  --blue-bright: #3b82f6;
  --navy-wash: #eff6ff;
  --navy-edge: #dbeafe;

  --ink: #111111;
  --muted: #666666;
  --slate: #475569;
  --line: #e5e5e5;
  --line-soft: #f1f3f5;
  --bg: #ffffff;
  --soft: #fbfcfb;

  --ok: #047857;
  --warn: #b45309;
  --warn-wash: #fffbeb;

  --radius: 14px;
  --wrap: 1120px;
}

* {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font:
    16px/1.6 -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

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

/* ---------- 顶部导航 ---------- */

.nav {
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  z-index: 20;
}

.nav .wrap {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 28px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}

.brand svg {
  display: block;
}

.navlinks {
  display: flex;
  gap: 22px;
  margin-left: 8px;
  flex: 1;
  overflow-x: auto;
  scrollbar-width: none;
}

.navlinks::-webkit-scrollbar {
  display: none;
}

.navlinks a {
  font-size: 13.5px;
  color: var(--slate);
  white-space: nowrap;
  /* 给当前页那条下划线留位置。.navlinks 有 overflow-x: auto，
     元素外的东西会被裁掉（桌面就因此看不到下划线），所以线必须画在 padding 区内。 */
  padding-bottom: 5px;
}

.navlinks a:hover {
  color: var(--navy);
}

/* 当前页标识：只改颜色 + 字重的时候太弱，手机上几乎看不出差别。
   加一条 2px 下划线（伪元素，不影响行高），配合 600 字重，一眼能认出来。 */
.navlinks a[aria-current="page"] {
  color: var(--navy);
  font-weight: 600;
  position: relative;
}

.navlinks a[aria-current="page"]::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--navy);
}

/* ---------- 按钮 ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  padding: 13px 21px;
  border-radius: 10px;
  border: 0;
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
}

.btn-primary {
  background: var(--navy);
  color: #fff;
}

.btn-primary:hover {
  background: var(--navy-dark);
}

.btn-sm {
  padding: 9px 15px;
  font-size: 13.5px;
  min-height: 38px;
}

.btn-ghost {
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
}

/* ---------- Hero ---------- */

.hero {
  padding: 96px 0 76px;
  position: relative;
  overflow: hidden;
}

/* 左上角的波浪纹理（来自 fingerprintBackground.svg，渐变改成藏蓝 #1E3A8A）。
   用 img 而不是内联 SVG：那个文件里有 22 个渐变 id，内联会和页面其它 SVG 撞 id。 */
.hero-deco {
  position: absolute;
  top: 0;
  left: 0;
  width: 900px;
  height: 420px;
  object-fit: cover;
  object-position: top left;
  pointer-events: none;
  user-select: none;
  z-index: 0;
  opacity: 0.3;
  /* 从左上角向外淡化：既保留装饰感，又不让线条穿过标题影响可读性 */
  -webkit-mask-image: radial-gradient(
    ellipse 78% 92% at 12% 8%,
    #000 0%,
    rgba(0, 0, 0, 0.55) 42%
  );
  mask-image: radial-gradient(
    ellipse 78% 92% at 12% 8%,
    #000 0%,
    rgba(0, 0, 0, 0.55) 42%,
    transparent 78%
  );
}

.hero > .wrap {
  position: relative;
  z-index: 1;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 56px;
  align-items: start;
}

.hero h1 {
  font-size: 42px;
  line-height: 1.14;
  letter-spacing: -0.028em;
  margin: 0 0 18px;
  font-weight: 600;
  max-width: 15em;
}

.hero h1 em {
  font-style: normal;
  color: var(--navy);
}

.hero-sub {
  font-size: 16px;
  color: var(--slate);
  margin: 0 0 26px;
  max-width: 32em;
  line-height: 1.62;
}

.hero-note {
  font-size: 12.5px;
  color: var(--muted);
  margin: 14px 0 0;
}

.hero-note b {
  color: var(--ink);
  font-weight: 500;
}

/* ---------- 报告卡 ---------- */

.reportcard {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  background: #fff;
}

.reportcard .rhead {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.reportcard .rtag {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
}

.reportcard .rsub {
  font-size: 11.5px;
  color: var(--muted);
}

.reportcard table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.8px;
  margin-top: 8px;
}

.reportcard td {
  padding: 6px 0;
  border-bottom: 1px solid var(--line-soft);
}

.reportcard td:first-child {
  color: var(--muted);
  width: 45%;
}

.reportcard td:last-child {
  text-align: right;
  font-weight: 500;
}

.reportcard .ok {
  color: var(--ok);
}

.reportcard .warn {
  color: var(--warn);
  font-weight: 400;
  font-size: 11.6px;
}

.reportcard tr.divider td {
  border-bottom: 0;
  padding-top: 11px;
}

.reportcard .rnote {
  font-size: 10.8px;
  color: var(--muted);
  margin: 11px 0 0;
  line-height: 1.5;
}

/* ---------- 通用区块 ---------- */

.section {
  padding: 72px 0;
  border-top: 1px solid var(--line);
}

.eyebrow {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}

.section h2 {
  font-size: 26px;
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0 0 8px;
  font-weight: 600;
}

.section .lede {
  font-size: 15px;
  color: var(--slate);
  margin: 0 0 34px;
  max-width: 44em;
}

/* ---------- 四步流程 ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 26px;
}

.step .num {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 7px;
}

.step h3 {
  font-size: 14.5px;
  margin: 0 0 7px;
  font-weight: 600;
}

.step p {
  font-size: 13.2px;
  color: var(--slate);
  margin: 0;
  line-height: 1.62;
}

/* ---------- 图片占位（用户自己换） ---------- */

/* 「How we verify」这一段的左右分栏。
   原来写的是内联 style="grid-template-columns:340px 1fr" —— 内联样式压不住媒体查询，
   390px 视口下 340 + 48(gap) 已经超过可用宽度 350，右列被挤到视口外，
   整页出现横向滚动（右边缘到 504px）。改成类才能做响应式。 */
.verifygrid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 48px;
  align-items: start;
}

@media (max-width: 900px) {
  .verifygrid {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .verifygrid .imgslot {
    max-width: 240px;
    margin: 0 auto;
  }
}

/* 示例图槽位。
   ★ 这里原来一条 img 规则都没有 —— 图片按原始尺寸铺进来，再被 overflow:hidden
     从右边和下面切掉（实测 510×539 的图塞进 340×453 的槽，横切 170、纵切 112）。
     现在图片用 cover 铺满，比例由槽位的 aspect-ratio 决定。
     出图仍然按 3:4 做，cover 只是兜底：万一换了一张比例不符的图，
     宁可裁掉一点边，也不要拉伸变形或溢出。 */
.imgslot {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: var(--navy-wash);
  box-shadow: 0 14px 34px -22px rgba(15, 23, 42, .5);
}

.imgslot img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---------- 对比表 ---------- */

/* 价格对比表在窄屏会被 5 列内容撑破（390px 视口时实测溢出 32px，整页出现横向滚动）。
   包一层滚动容器，表格保持可读宽度，超出部分在容器内左右滑。 */
.cmpwrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- 对比表 ---------- */

.cmp {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-size: 13.5px;
  margin-top: 6px;
}

.cmp th {
  text-align: left;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--muted);
  padding: 0 12px 10px 0;
  border-bottom: 1px solid var(--line);
}

.cmp td {
  padding: 13px 12px 13px 0;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: top;
}

.cmp td:first-child {
  color: var(--ink);
  font-weight: 500;
}

.cmp td:last-child {
  padding-right: 0;
}

.cmp .muted {
  color: var(--muted);
}

.cmp tr.ours {
  background: var(--navy-wash);
}

.cmp tr.ours td {
  border-bottom: 0;
  font-weight: 500;
}

.cmp tr.ours td:first-child,
.cmp tr.ours td:nth-child(2) {
  color: var(--navy);
}

/* ---------- 长正文段落（DV / 绿卡页用） ---------- */
.prose {
  font-size: 14.8px;
  line-height: 1.72;
  color: #374151;
  margin: 0 0 16px;
  max-width: 46em;
}

.prose b {
  color: var(--ink);
  font-weight: 500;
}

/* ---------- 要点列表 ---------- */

.points {
  margin: 0;
  padding-left: 18px;
  font-size: 14px;
  color: var(--slate);
  line-height: 1.7;
}

.points li {
  margin: 7px 0;
}

.points b {
  color: var(--ink);
  font-weight: 500;
}

/* ---------- FAQ ---------- */

.faq details {
  border-bottom: 1px solid var(--line);
}

.faq summary {
  cursor: pointer;
  padding: 15px 26px 15px 0;
  font-size: 14.5px;
  font-weight: 500;
  list-style: none;
  position: relative;
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: 2px;
  top: 13px;
  font-size: 17px;
  color: var(--muted);
  font-weight: 400;
}

.faq details[open] summary::after {
  content: "\2212";
}

.faq details p {
  margin: 0 0 14px;
  font-size: 13.8px;
  line-height: 1.68;
  color: var(--slate);
}

/* ---------- 大 CTA 卡 ---------- */

.bigcta {
  background: var(--navy);
  color: #fff;
  border-radius: 16px;
  padding: 40px 44px;
  margin: 56px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}

.bigcta .eyebrow {
  color: rgba(255, 255, 255, 0.62);
}

.bigcta h2 {
  font-size: 24px;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  font-weight: 600;
  max-width: 26em;
  line-height: 1.3;
}

.bigcta p {
  margin: 0;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.78);
  max-width: 34em;
}

.bigcta .btn {
  background: #fff;
  color: var(--navy-dark);
  font-weight: 600;
}

.bigcta .btn:hover {
  background: #f1f5f9;
}

/* ---------- 页脚 ---------- */

.footer {
  border-top: 1px solid var(--line);
  /* padding 和背景色都对齐 checker 的 .pa-footer（36/26 + 白底）。
     原来这里是 40/30 且没有背景色，footer 高度 271px，
     装饰图可见比例 65%；checker 是 258px / 61%。同一张图在两处露出
     的高度不一样，看起来就是两套东西。统一后两边都是 258px / 61%。 */
  background: #fff;
  padding: 36px 0 26px;
  font-size: 13px;
  color: var(--muted);
  position: relative;
  overflow: hidden;
}

/* 页脚容器要在装饰图之上，否则链接会被遮住（即使装饰图 pointer-events: none，
   文字压在纹理下也会影响观感） */
.footer > .wrap {
  position: relative;
  z-index: 1;
}

/* 右下角波浪，和左上角 .hero-deco 呼应。
   刻意不做镜像对称：
     · 水平+垂直翻转，弧线从右下往左上散，走向和左上角那个不同
     · 透明度 .45，约为 hero 的一半 —— 页脚链接文字多，同浓度会压住 Legal 列
     · 尺寸仍为 1003×420（scale 0.857），和 .hero-deco 的实际渲染尺寸一致，
       同一张图在同一站里必须保持相同纹理密度，否则一眼能看出是两套东西 */
.footer-deco {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 1003px;
  height: 420px;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  transform: scale(-1, -1);
  opacity: 0.45;
  -webkit-mask-image: radial-gradient(
    ellipse 78% 92% at 12% 8%,
    #000 0%,
    rgba(0, 0, 0, 0.55) 42%,
    transparent 78%
  );
  mask-image: radial-gradient(
    ellipse 78% 92% at 12% 8%,
    #000 0%,
    rgba(0, 0, 0, 0.55) 42%,
    transparent 78%
  );
}

/* 移动端隐藏：单列布局没空间展开，只会糊在文字下面 */
@media (max-width: 900px) {

  /* 手机端也要显示装饰（之前直接 display:none 是判断错误）。
     1003px 固定宽在 390px 视口里会被裁掉 60%，露出来的那点像贴图残片，
     所以不改 display，改成**按视口等比缩放**：
       · 宽度用 118vw —— 比屏幕略宽，弧线从边缘延伸出去，不留"图片边界"
       · 高度 auto 保持 1170:490 原比例，缩放后纹理密度和桌面一致
       · 左右各外扩 9vw，让纹理的稀疏那侧落到屏幕外
     opacity 比桌面略高：缩放后线条变细，同样的 alpha 看起来会偏淡。 */
  /* 缩放 0.39 倍后线条只有 0.39px，opacity 已经到 1 也无法再加深。
     mix-blend-mode: multiply 是按白底相乘：白(255)×灰线(≈180)=180，
     等于把半透明线条压成实色，形态不变但明显变清楚。
     装饰在 z-index:0，文字在它上层，所以不会影响文字颜色。 */
  .hero-deco {
    display: block;
    width: 118vw;
    height: auto;
    top: -6px;
    left: -9vw;
    opacity: 1;
    mix-blend-mode: multiply;
  }

  .footer-deco {
    display: block;
    width: 118vw;
    height: auto;
    right: -9vw;
    bottom: 0;
    opacity: .55;
    mix-blend-mode: multiply;
  }
}

.fgrid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 28px;
}

.footer h4 {
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--ink);
  margin: 0 0 10px;
}

.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer li {
  margin: 6px 0;
}

.footer a:hover {
  color: var(--navy);
}

.fbottom {
  border-top: 1px solid var(--line-soft);
  padding-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12px;
}

.footer .fbrand {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 14.5px;
  color: var(--ink);
}

.footer .fdesc {
  font-size: 12.5px;
  line-height: 1.6;
  max-width: 26em;
}

/* ---------- 移动端 ---------- */

@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hero h1 {
    font-size: 30px;
  }
  .hero {
    padding: 40px 0 36px;
  }
  .steps {
    grid-template-columns: repeat(2, 1fr);
    gap: 22px;
  }
  .section {
    padding: 40px 0;
  }
  .section h2 {
    font-size: 21px;
  }
  .bigcta {
    padding: 28px 26px;
    border-radius: 12px;
  }
  .bigcta h2 {
    font-size: 19px;
  }
  .fgrid {
    grid-template-columns: 1fr 1fr;
    gap: 26px;
  }
  .navlinks {
    gap: 16px;
  }
}

@media (max-width: 560px) {
  .steps {
    grid-template-columns: 1fr;
  }
  .fgrid {
    grid-template-columns: 1fr;
  }
  .hero h1 {
    font-size: 26px;
  }

}

/* 导航在窄屏改成两行：第一行 logo + CTA，第二行 4 个落地页入口。
   断点用 720 而不是 560 —— 实测 561~640px 时单行布局会把 .navlinks
   压到 134px，内容 306px 只露出一半，用户得横向滑才知道还有别的链接。
   单行要到 768px 才真正放得下（那时 .navlinks 刚好 341px = 内容宽度）；
   721~767 这一段单行时只剩 294px，第 4 个链接会被截掉 12px，所以断点取 767。
   原来这里是 .navlinks { display: none }，等于手机上完全没有落地页入口。 */
@media (max-width: 767px) {
  .nav .wrap {
    height: auto;
    flex-wrap: wrap;
    gap: 14px;
    padding-top: 9px;
    padding-bottom: 0;
    row-gap: 0;
  }

  /* logo 占左，CTA 推到最右 */
  .nav .wrap > .btn {
    margin-left: auto;
  }

  .navlinks {
    display: flex;
    order: 3;
    flex: 1 0 100%;
    margin-left: 0;
    margin-top: 8px;
    /* 底部 10 → 5：链接自身已带 padding-bottom: 5px（给下划线留位），
       两处叠加会把导航撑到 94px，减掉后回到 89px，上下留白也更对称。 */
    padding: 9px 0 5px;
    border-top: 1px solid var(--line-soft);
    gap: 18px;
    -webkit-overflow-scrolling: touch;
  }

  .navlinks a {
    font-size: 13px;
  }

  /* 手机：隐藏导航 CTA。
     落地页正文有 2~3 个 CTA，导航里再来一个会在 390px 上挤成两行；
     当前页由 .navlinks 的 aria-current 高亮表示，价格正文里就有，顶部不再重复。 */
  .nav .wrap > .btn {
    display: none;
  }
}

/* 320px（iPhone SE 一代）四个链接还差 23px，收一点间距和字号就够，
   比让最后一个链接被截断、需要用户横向滑动要好。 */
@media (max-width: 359px) {
  .navlinks {
    gap: 12px;
  }

  .navlinks a {
    font-size: 12.2px;
  }
}